* {
   margin: 0px;
   padding: 0px;
}

@font-face {
   font-family: 'Raleway';
   src: url('../../fonts/Raleway-VariableFont_wght.ttf')
}

@font-face {
   font-family: 'Bonvivant-regular';
   src: url("../../fonts/BonVivant-Regular.ttf") format('truetype');
}

@font-face {
   font-family: 'Bonvivant-serif';
   src: url("../../fonts/BonVivantSerif.ttf") format('truetype');
}

body {
   font-family: var(--font-family-main) !important;
   overflow-x: hidden;
   font-size: 14px
}

#navbarNav {
   justify-content: end;
}

#banner-section {
   background-image: url('../../images/frontend/home_background.svg');
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center top;
   background-attachment: scroll;
}

#header,
#footer {
   background: var(--blue-color);
}

.logo {
   height: 50px;
   width: 50px;
}

.custom-nav {
   display: flex;
   column-gap: 40px;
}

.social-icons {
   margin-top: 18px;
   column-gap: 19px;
}

.social-icons img {
   width: 36px;
   height: 36px;
}

.align-contact-us-section {
   display: flex;
   flex-direction: column;
   row-gap: 15px;
   text-align: end;
}

/* .custom-nav li a {
    font-size: 20px;
} */
#footer {
   padding-top: 32px;
}

.al-sarosh-heading {

   font-size: 32px;
   font-weight: 700;
   color: var(--white);
   /* font-family: ; */
}

.about-al-sarosh {
   font-weight: var(--font-weight-normal);
   line-height: 30px;
   font-family: var(--font-family-main);
   font-size: 16px;
}

.links {
   padding-left: 0px;
   list-style-type: none;
   row-gap: 15px;
   font-weight: var(--font-weight-normal);
}

.links li {
   font-weight: 500;
   font-size: 16px;
}

.para {
   font-size: 16px;
   font-weight: 400;
   color: var(--white);
   font-weight: var(--font-weight-normal);
}

.footer-al-sarosh {
   margin-top: 20px;
}

.banner-section {
   margin-top: 110px;
}

.banner-content {
   padding-top: 62px;
}

.main-heading {
   font-size: 90px;
   color: var(--heading-color);
}

.banner-al-sarosh-content {
   font-size: 32px;
   color: var(--heading-color);

}

.about-banner-al-sarosh {
   padding-top: 56px;
}

.about-al-sarosh-artificial {
   font-size: 22px;
   line-height: 38px;
   color: var(--heading-color);
   text-align: justify;
}

#image-section {
   padding-top: 76px;
   position: relative;
   /* margin-bottom: 350px; */
}

.custom-card {
   background-color: var(--white);
   border-radius: 25px;
   box-shadow: -10px 13px 38.5px 0px rgba(0, 0, 0, 0.25);
   padding: 30px 45px;
}

.card-content {
   row-gap: 15px;
}

.mission-vision-text {
   font-size: 20px;
   text-align: justify;
}

.vision-mission-row {
   position: relative;
   justify-content: space-around;
   align-items: center;
   margin: -75px 0px 135px 0px;
}

.icons-row {
   padding-top: 110px;
}

#objectives {
   background-color: var(--bg-color-pink);
}


.header-heading {
   font-family: var(--ff-main);
   font-size: 29px;
   font-weight: var(--font-weight-bold);
   line-height: 46.5px;
   color: var(--heading-color);
}

.objective-content {
   font-family: var(--ff-main);
   font-size: 20px;
   font-weight: var(--font-weight-normal);
   line-height: 30px;
   color: var(--heading-color);
   text-align: justify;

}

.objective-image {
   width: 70px;
   height: 70px;
}

.objective-content {
   padding-top: 20px;
}


section#about-donor {
   background-color: var(--bg-color-camel);
}

.heading {
   font-size: 48px;
   font-weight: var(--font-weight-normal);
   font-family: var(--font-family-main);
   color: var(--heading-color);
}

.text {
   font-family: var(--font-family-main);
   font-weight: var(--font-weight-semi-bold);
   font-size: 25px;
   line-height: 35px;
   color: var(--heading-color);
   text-align: justify;
}


.partner-description {
   padding-top: 42px;
}

#partners-row img {
   height: 100%;
   object-fit: contain;
}

#gallery {
   margin: 105px 0px 106px 0px;
}

.breadcrmb {
   display: flex;
   align-items: center;
   column-gap: 10px;
   background-color: inherit;
}

.back {
   color: var(--heading-color);
   font-size: 18px;
   font-family: var(--font-family-main);
}

.underline {
   text-decoration: underline;
}

.project-banner-text {
   font-size: 24px;
   text-align: justify;
}

#single-project {
   background-image: url('../../images/frontend/single_projects.svg');
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center top;
   background-attachment: scroll;
}

.projects {
   padding-top: 84px;
}

.project-more {
   font-size: 31px;
}

.projects-heading {
   font-size: 48px;
   padding: 67px 0px 50px 0px;
}

.border-images {
   border-radius: 12px;
}

.projects-list {
   display: flex;
   flex-direction: row;
   row-gap: 210px;
}

.main-image {
   position: absolute;
}

.proj-desc {
   font-size: 20px;
}

.ceo-name {
   font-size: 18px;
}

.card-column {
   max-width: 391px;
}

.card-column .bg-image {
   background-size: cover;
   background-position: 100% 100%;
   height: 391px;
   border-radius: 12px;
}

.main-list {
   display: flex;
   flex-flow: wrap;
   gap: 50px;
   justify-content: center;
}

.objective-header {
   column-gap: 55px;
}

.leaderships {
   display: flex;
   justify-content: center;
}

.leadership-card {
   border-radius: 25px;
}

.leader img {
   width: 150px;
   height: 150px;
   object-fit: contain;
}

.name {
   font-size: 18px;
}

.role {
   font-size: 16px;
}

.detail-desc {
   font-size: 32px;
}

.details-logo {
   padding-bottom: 30px;
}

.detail-heading,
.description {
   font-size: 20px;
   text-transform: capitalize;
   color: var(--black);
}

.text-align-justify {
   text-align: justify;
}

.profile_img {
   height: 505px;
   object-fit: contain;
}

.text-clr {
   line-height: 30px;
}

.main-btn {
   padding: 10px 28px;
   gap: 10px;
   border-radius: 39px;
   background: var(--main-btn-bg-clr);
   color: var(--main-btn-text-clr);
   border: 1px solid var(--main-btn-bg-clr);
   width: fit-content;
   font-weight: var(--font-weight-bold);
   text-decoration: none;
   text-align: center;
}

.main-btn:hover {
   color: var(--main-btn-text-clr);
}

.pl-0 {
   padding-left: 0px !important;
}

.card-width {
   width: 20rem;
}

.card-title a:hover {
   color: var(--blk-color);
}

.text-align-justify {
   text-align: justify;
}

#bg-about {
   background-image: url('../../images/frontend/about_us_top.svg') !important;
   background-repeat: no-repeat !important;
   position: relative;
   /* background-position: left !important; */
}

#about-us-bottom {
   position: absolute;
   top: 77%;
   right: 1%;
}

.p-md-t {
   padding-top: 0px !important;
}

.video {
   opacity: 0.8;
   background: var(--Primary-04, #F6E1E4);
}

a:hover {
   color: var(--text-color);
}

.ghss-images .col-md-5 img {
   width: 100%;
   height: 380px;
   object-fit: cover;
}

.conference_banner_images .col-md-12 img,
.ghss-banner .col-md-12 img,
.conference_images .col-md-3 img,
.conference_images .col-md-5 img {
   width: 100%;
}

.timeline {
   position: relative;
   padding-left: 50px;
   margin-top: 20px;
}

.timeline::before {
   content: '';
   position: absolute;
   left: 30px;
   top: 0;
   bottom: 0;
   width: 2px;
   background-color: #000;
}

.timeline-item {
   display: flex;
   position: relative;
   margin-bottom: 30px;
}

.timeline-item::before {
   content: '';
   position: absolute;
   left: -18px;
   top: 16px;
   width: 33px;
   height: 2px;
   background-color: #000;
}

.timeline-day {
   width: 200px;
   font-weight: var(--font-weight-normal) !important;
   text-align: left;
   margin-left: 20px;
}

.timeline-day a {
   color: var(--heading-color);
}

.timeline-section {
   margin-top: 150px;
}

#codesign_images .col-md-4 img {
   width: 100%;
}

.gallery-images .col-md-3 img {
   width: 100%;
   height: 225px;
   object-fit: cover;
}

.gallery-images .col-md-3 {
   padding: 0px;
}

#set-margin-top {
   margin-top: 105px;
}



.img-container {
   height: 200px;
   /* Adjust based on desired image size */
   overflow: hidden;
}

.img-container img {
   object-fit: cover;
   height: 100%;
   width: 100%;
}

.nav-link a,
.links li a {
   text-decoration: none;
   color: white;
}

/* Contact US */
.bg-light {
   background-color: #FFDBCC !important;
   /* Custom light color for the form background */
}

.bg-primary {
   background-color: #313467 !important;
   /* Custom primary color */
}

.form-control {
   border-radius: 0;
   /* Makes the input fields squared */
}

.btn-primary {
   background-color: #E47257;
   /* Custom button color */
   border: none;
}

.custom-input-field {
   border-top: none;
   border-bottom: 1px solid #000;
   border-right: none;
   border-left: none;
   background: inherit;
}

.custom-input-field:focus {
   background: inherit;
   border-color: #FFDBCC;
   box-shadow: none;
   border-bottom: 1px solid #000;
}

.height-md-0 {
   height: 0px;
}

.resize-none {
   resize: none;
}

.right-bar {
   width: 29%;
   height: 50%;
   margin: 3% 0% 0% -14%;
}

/* Contact Us */

#codesign_images .col-md-4 img,
.conference_images .col-md-3 img {
   height: 100%;
   width: 100%;
   object-fit: cover;
}

.navbar-toggler {
   border: none;
}

.navbar-toggler-icon {
   background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="800px" height="800px" viewBox="0 0 17 17"><path d="M16 3v2h-15v-2h15zM1 10h15v-2h-15v2zM1 15h15v-2h-15v2z" fill="%23FFFFFF"/></svg>');
}

.navbar-toggler:focus {
   box-shadow: none;
}

.navbar-toggler-icon {
   width: 24px !important;
   height: 24px !important;
}

.navbar-toggler.cross .navbar-toggler-icon {
   background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px"  viewBox="0 0 16 16" fill="white"><path fill-rule="evenodd" d="M1.5 1.5L14.5 14.5M14.5 1.5L1.5 14.5" stroke="white" stroke-width="2"/></svg>');
}

/* Scrollbar */
#scrollbar {
   /* height: 200px; */
   overflow-y: auto;
   overflow-x: hidden;
}

#scrollbar::-webkit-scrollbar-track {
   -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
   background-color: #F5F5F5;
}

#scrollbar::-webkit-scrollbar {
   width: 12px;
   background-color: #F5F5F5;
}

#scrollbar::-webkit-scrollbar-thumb {
   border-radius: 10px;
   -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
   background-color: #313467;
   /* height: 80px; */
}

/* Scrollbar */
.line-height-27 {
   line-height: 27px;
}

.fs-md-48 {
   font-size: 36px;
}

.set-reports-desc-width {
   width: 64%;
   font-size:25px;
}

.fs-md-39 {
   font-size: 39px;
}

.fs-md-30 {
   font-size: 24px;
}

.banner-img {
   height: 520px;
   border-radius: 25px;
   object-fit: cover;
}

.international-public-images {
    height: 440px; 
   object-fit: cover;
   width: 100%;
}

.conference_images {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
}

.health_conference_images {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
}

.conference_images img {
   width: 100%;
}

.dropdown-menu[data-bs-popper] {
   top: 153% !important;
}

.set-partner-margin-top {
   margin-top: -30px;
}

.sarosh-desc {
   line-height: 38px;
   font-size: 18px;
}

.gallery_image {
   width: 400px !important;
   height: 334px !important;
   object-fit: cover;
}

.card-text {
   font-size: 20px !important;
   font-family: var(--font-family-main) !important;
   font-weight: 500 !important;
}
#who-are-we {
   margin-top: -60px;
}
.para-font-size {
   font-size: 18px;
   font-family: var(--font-family-main) !important;
}
.nav-item.dropdown:hover .dropdown-menu {
   display: block;
   margin-top: 0;
   visibility: visible; /* Make sure it's visible */
   opacity: 1; /* Ensure it's fully opaque */
}

/* Keep the dropdown open when hovering over the submenu */
.nav-item .dropdown-menu:hover {
   display: block;
}
.pt-80 {
   padding-top: 80px;
   padding-bottom: 80px;
}
.fs-22 {
   font-size: 22px;
}
.p-x-2 {
   padding: 0 2rem;
}
@media (min-width: 768px) and (max-width: 992px) {

   .custom-card {
      margin-bottom: 10px;
   }

   .main-heading {
      font-size: 45px;
   }

   .banner-al-sarosh-content {
      font-size: 24px;
   }

   .about-al-sarosh-artificial {
      font-size: 20px;
      line-height: 30px;

   }

   .gallery_image {
      width: 100% !important;
   }

}

body {
   margin: 0;
   font-family: Arial, sans-serif;
}

.menu-container {
   position: relative;
}

.burger {
   font-size: 30px;
   cursor: pointer;
   padding: 10px;
   display: none; /* Hidden by default */
}

.menu {
   display: none; /* Hidden by default */
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: rgba(0, 0, 0, 0.9);
   color: white;
   z-index: 1000;
   padding-top: 50px;
   overflow: hidden; /* Disable scrolling */
}

.menu ul {
   list-style-type: none;
   padding: 0;
   text-align: center;
}

.menu li {
   margin: 20px 0;
}

.menu a {
   color: white;
   text-decoration: none;
   font-size: 24px;
}

@media (min-width: 992px) and (max-width: 1024px) {
   .right-bar {
      width: 38%;
   }
}

@media(max-width:768px) {
   .icons-row {
      padding-top: unset;
   }

   .banner-content {
      padding-top: 15px;
   }

   .main-heading {
      font-size: 28px;
   }

   .banner-al-sarosh-content {
      font-size: 18px;
      line-height: 30px;
   }

   /* .about-banner-al-sarosh {
      padding-top: 23px;
   } */

   .about-al-sarosh-artificial {
      font-size: 16px;

   }

   .header-heading {
      font-size: 16px;
   }

   .objective-content {
      font-size: 14px;
   }

   .objective-image {
      width: 50px;
      height: 50px;
   }

   .vision-mission-row {
      row-gap: 15px !important;
      margin: -40px 0px 25px 0px !important;
   }

   .custom-card {
      padding: 20px !important;
   }

   #image-section {
      padding-top: 35px;
   }

   .heading {
      font-size: 26px;
   }

   .mission-vision-text {
      font-size: 14px;
      line-height: 30px;
   }

   .p-0-sm {
      padding: 0px !important;
   }

   .text {
      font-size: 16px;
   }

   #gallery img,
   .map-image {
      width: 100%;
   }


   .project-banner-text {
      font-size: 14px;
      line-height: 30px;
   }

   .project-more {
      font-size: 18px;
   }

   .projects-heading {
      font-size: 36px;
      padding: 33px 0px 25px 0px;
   }

   .border-images {
      min-width: 96%;
      width: 96%;
   }

   .projects-list {
      display: flex;
      row-gap: 200px;
      padding: 0px 0px 25px 0px;
   }

   .proj-desc,
   .ceo-name {
      max-width: 333px;
      font-size: 18px;
   }

   .leadership-card {
      width: 100% !important;
      row-gap: 20px;
   }

   .profile_img {
      width: 100%;
      height: 300px;
   }

   .detail-desc {
      font-size: 20px;
   }

   .details-logo,
   .desc-row,
   .personal-info-col {
      padding: 0px 0px 15px 0px;
   }

   .detail-heading,
   .detail-desc {
      font-size: 16px;
   }

   .detail-heading {
      line-height: 30px;
   }

   .pr-0 {
      padding-right: 0px !important;
   }

   .card-width {
      width: 100%;
   }

   .breadcrmb .back,
   .breadcrmb .items {
      font-size: 14px;
   }

   .main-btn {
      font-size: 14px;
   }

   .heading-font-size {
      font-size: 18px;
   }

   .para-font-size {
      font-size: 14px;
      font-family: var(--font-family-main) !important;
   }

   .align-contact-us-section {
      text-align: start;
   }

   #about-us-bottom {
      top: 89%;
   }

   .main-btn {
      width: 100%;
   }

   .col-md-5 .video-img {
      background-position: right;
   }

   .timeline-section {
      margin-top: 0px;
   }

   #set-margin-top {
      margin-top: 0px;
   }

   .right-bar {
      width: 100%;
      margin: 0% 0% 0% 0%;
   }

   .submit-btn {
      width: 100% !important;
   }

   .fs-32 {
      font-size: 20px;
   }

   .set-reports-desc-width {
      width: 100%;
      font-size: 18px;
   }

   .fs-24 {
      font-size: 18px;
   }

   .banner-img {
      height: 250px;

   }

   .international-public-images {
      height: 135px;
      object-fit: cover;
   }

   .article-img {
      width: 100%;
   }

   .set-partner-margin-top {
      margin-top: 0px;
   }

   .care-icons img {
      max-width: 44px;
   }

   .social-icons {
      margin: 18px 0px 18px 0px;
   }

   #partners-row img {
      width: 50%;
      height: 115px;
   }

   .ai-sarosh-stands-for {
      font-size: 18px;
   }

   .set-sm-fs {
      font-size: 18px;
   }

   .main-list {
      gap: 20px;
   }

   .detail-description p {
      line-height: 30px;
   }

   .name {
      font-size: 16px;
   }

   .card-title {
      font-size: 14px;
   }

   .card-text {
      font-size: 14px !important;
      font-family: var(--font-family-main) !important;
      font-weight: 500 !important;

   }

   .gallery_image {
      width: 100% !important;
      height: 250px !important;
   }

   .set-fs-25 {
      font-size: 18px;
   }

   .sarosh-desc {
      font-size: 14px;
      line-height: 30px;
   }


   .burger {
      display: block; /* Show the burger on small screens */
   }




   #social-links {
      padding-top: 70px;
   }
   .nav-item {
      font-size: 20px;
   }
   .navbar-nav .nav-item {
      margin: 10px 0px 5px 0px;
   }
   #header {
      position: fixed;
      width: 100%;
      z-index: 99;
   }
   #who-are-we {
      margin-top: 0;
   }
   .proj-title {
      font-size: 24px !important;
   }
   .pt-80 {
      padding-top: 40px;
      padding-bottom: 40px;
   }
   .set-sm-fs-24 {
   font-size: 24px;
}
.p-x-2 {
      padding: 0 !important;
}
}
@media(max-width:500px) {
   #header {
      margin-top: -6%;
   }
   .navbar {
      margin-top: 15px;
   }
   .social-icons {
      justify-content: center !important;

   }


}