* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Open Sans', sans-serif;
  background: white;
}

header {
  width: 100%;
  height: 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  z-index: 99;
  box-shadow: 0 0 10px #000;
  background: white;
}

@media only screen and (max-width: 1850px) {
  header {
    width: 100%;
    height: 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    z-index: 99;
    box-shadow: 0 0 10px #000;
    background: white;
  }
}

@media (max-width: 1000px) {
  header {
    width: 100%;
    height: 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    z-index: 99;
    box-shadow: 0 0 10px #000;
    background: white;
  }

  i {
    color: #fff;
    cursor: pointer;
    padding-left: 155px;
  }
}

#chk1 {
  display: none;
}

i {
  color: black;
  cursor: pointer;
}

header .logo {
  flex: 1;
}

.logo img {
  float: left;
  width: 100px;
  padding-top: 0px;
  margin-left: 415px;
}

@media only screen and (max-width: 1850px) {
  .logo img {
    float: left;
    width: 100px;
    padding-top: 0px;
    margin-left: 140px;
  }
}

@media only screen and (max-width: 480px) {
  .logo img {
    float: left;
    width: 85px;
    padding-top: 7px;
    margin-left: 20px;
  }
}


@media only screen and (max-width: 768px) {
  .logo img {
    margin-left: 20px;
  }
}

header ul {
  flex: 100%;
  display: flex;
  justify-content: center;
  margin-left: -409px;
}

header ul li {
  list-style: none;
  position: relative; /* Needed for dropdown */
}

header ul li a {
  text-decoration: none;
  color: #3d3d3c;
  font-weight: bold;
  font-size: 13px;
  text-transform: uppercase;
  padding: 10px 15px;
}

header ul li a:hover {
  color: #3ebd88;
}

header .menu {
  font-size: 2.5em;
  display: none;
}

@media only screen and (max-width: 1850px) {
  header ul {
    flex: 2;
    display: flex;
    justify-content: center;
    margin-left: -450px;
  }

  header ul li {
    list-style: none;
  }

  header ul li a {
    text-decoration: none;
    color: #3d3d3c;
    font-weight: bold;
    font-size: 13px;
    text-transform: uppercase;
    padding: 10px;
  }

  header ul li a:hover {
    color: #3ebd88;
  }

  header .menu {
    font-size: 2.5em;
    display: none;
  }
}

@media only screen and (max-width: 1000px) {
  header ul {
    position: fixed;
    top: 77px;
    background-color: #ffffff;
    border-radius: 5px;
    height: calc(86vh - 45vh);
    width: 40%;
    flex-direction: column;
    justify-items: center;
    transition: right 0.5s linear;
    margin-left: 250px;
  }

  header li {
    padding: 10px;
  }
}





/* Dropdown container */
ul li ul.dropdown {
  min-width: 150px;
  background: white;
  position: absolute;
  top: 100%; /* Prevent hover gap */
  left: 0;
  z-index: 999;
  display: none;
  border-radius: 5px;
  margin: 0;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  margin-top: 8px;
  padding-top: 10px;
  padding-top: 20px;
  padding-right: 0px;
}

/* Dropdown list items */
ul li ul.dropdown li {
  display: block;
  background: white;
  margin: 0;
  border-radius: 5px;
}

/* Links inside the dropdown */
ul li ul.dropdown li a {
  color: black;
  text-decoration: none;
  padding: 10px 15px;
  display: block;
  font-size: 13px;
  text-align: left;
}

/* Hover effect for dropdown items */
ul li ul.dropdown li a:hover {
  color: #3ebd88;
}

/* Show dropdown on hover */
ul li:hover > ul.dropdown {
  display: block;
}







      figure{
          position: relative;
          left: 0;
          width: 400%; /* width dikali slide */
          animation: 10s slide infinite;
      }




      footer{
          background-color: #1fa67a;
           -moz-box-shadow: 0 0px 30px 0 #AD6F33 inset;
          -webkit-box-shadow: 0 0px 30px 0 #AD6F33 inset;
          box-shadow: 0 0px 30px 0 #AD6F33 inset;
      }
      .footerContainer{
          width: 100%;
          padding: 20px 20px 10px 20px ;
      }
      .socialIcons{
          display: flex;
          justify-content: center;
      }

  .footerBottom {
  color: white;
  padding: 10px 20px;
  font-size: 14px;
}

.footerContent {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  max-width: 1085px;
  margin: auto;
  width: 100%;
  margin-top: -15px;
  border-top: 1px dashed #fff;
  padding-top: 10px;
  padding-bottom: 5px;
}

.footerContent .left p {
  margin: 0;
  font-weight: 400;
}

.footerContent .right {
  text-align: right;
}

.footerContent .right a {
  color: white;
  text-decoration: underline;
  margin: 0 5px;
  transition: color 0.3s ease;
}

.footerContent .right a:hover {
  text-decoration: none;
}

@media only screen and (max-width: 768px){
.footerContent .right a {
  font-size: 10px;
}
  .footerContent .right {
   font-size: 10px;
}
}

       .socialIcons a{
        width: 25px;
          text-decoration: none;
          padding:  4px;
          margin: 10px;
          border-radius: 20%;
          background-color: #ffffffe6;
        
      }
      .socialIcons a i{
          font-size: 1em;
          color: rgb(255, 255, 255);
          opacity: 0,9;
      }
      /* Hover affect on social media icon */
      .socialIcons a:hover{
          background-color: white;
          transition: 0.5s;
      }
      .socialIcons a:hover i{
          color: white;
          transition: 0.5s;
      }


      @media only screen and (max-width: 768px){
        .socialIcons{
                 width: 100%;
                 display: flex;
                 justify-content: center;
                 padding-left: 15px;
             }

.socialIcons a{
          width: 10%;
          border-radius: 10%;
          background-color:transparent;
   
      }

  .socialIcons img{
          width: 50%;
          margin-left: 100px;
      }
     }





     @media only screen and (max-width: 480px){
      .socialIcons{
               width: 100%;
               display: flex;
               justify-content: center;
               padding-left: 15px;
           }

.socialIcons a{
        width: 25%;
        border-radius: 10%;
        background-color:transparent;
 
    }

.socialIcons img{
        width: 40%;
        margin-left: 100px;
    }
   }


      .footerNav{
          margin: 20px 0;
      }
      .footerNav ul{
          display: flex;
          justify-content: center;
          list-style-type: none;
      }
      .footerNav ul li a{
          color:white;
          margin: 35px;
          text-decoration: none;
          font-size: 15px;
          opacity: 0.9;
          transition: 0.5s;
      
      }
      .footerNav ul li a:hover{
          opacity: 1;
      }
      .footerBottom{
          padding-bottom: 5px;
          text-align: center;
      }
      .footerBottom p{
          color: white;
          font-size: 14px;
      }

@media only screen and (max-width: 768px){
     .footerBottom p{
          font-size: 10px;
      }
}

      .designer{
          opacity: 0.7;
          text-transform: uppercase;
          letter-spacing: 1px;
          font-weight: 400;
          margin: 0px 5px;
      }
      @media (max-width: 1000px){
          .footerNav ul{
              flex-direction: column;
          } 
          .footerNav ul li{
              width:100%;
              text-align: center;
              margin: 5px;
          }
          .socialIcons a{
              padding: 10px;
            padding-bottom: 0px;
              margin: 4px;
            margin-left: -180px;
      
          }
      }


    





     




    @media only screen and (max-width: 1850px){
    
      .fa{
      
          margin-top: 0;
          margin-left: 20px;
      }
          
      }





      
    * {box-sizing: border-box;}
    .mySlides {display: none;}
    img {vertical-align: middle;}
    
    /* Slideshow container */
    .slideshow-container {
      max-width: 100%;
      position: relative;
      margin: auto;
      padding-top: 80px;
    }
    
    /* Caption text */
    .text {
      color: #f2f2f2;
      font-size: 20px;
      padding: 8px 12px;
      position: absolute;
      bottom: 300px;
      width: 100%;
      text-align: right;
      padding-right: 100px;
    }
    
    @media only screen and (max-width: 1850px){
      .text {
         color: #f2f2f2;
         text-shadow: 2px 2px black;
         font-size: 20px;
         padding: 8px 12px;
         position: absolute;
         bottom: 170px;
         width: 100%;
         text-align: right;
         padding-right: 100px;
       }
   }

    .text a{
      color: white;
    }

    /* Number text (1/3 etc) */
    .numbertext {
      color: #f2f2f2;
      font-size: 12px;
      padding: 8px 12px;
      position: absolute;
      top: 0;
    }
    
    /* The dots/bullets/indicators */
    .dot {
      height: 15px;
      width: 15px;
      margin: 0 2px;
      background-color: #bbb;
      border-radius: 50%;
      display: inline-block;
      transition: background-color 0.6s ease;
    }
    
    .active {
      background-color: #717171;
    }
    
    /* Fading animation */
    .fade {
      animation-name: fade;
      animation-duration: 1.5s;
    }
    
    @keyframes fade {
      from {opacity: .4} 
      to {opacity: 1}
    }
    
    /* On smaller screens, decrease text size */
    @media only screen and (max-width: 300px) {
      .text {font-size: 11px}
    }

    
    .intro{
      background-color: #1fa67a;
      -moz-box-shadow: 0 0px 50px 0 rgba(173, 111, 51, 0.69) inset;
      -webkit-box-shadow: 0 0px 50px 0 rgba(173, 111, 51, 0.69) inset;
      box-shadow: 0 0px 50px 0 rgba(173, 111, 51, 0.69) inset;
      margin-top: 30px;
      width: 100%;
      height: 230px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      text-align: justify;
  }
  
  .intro h3{
      color: white;
      font-size: 25px;
      font-weight: 400;
      position: relative;
      padding-top: 10px;
  }
  
  .intro p{
      width: 60%;
      color: white;
      font-size: 15px;
      padding-top: 5px;
      padding-bottom: 20px;
      line-height: 30px;
  }

  @media only screen and (max-width: 1000px){
    
    .intro{
      background-color: #1fa67a;
      margin-top: 30px;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      text-align: justify;
  }
  
 .intro h3{
      color: white;
      font-size: 20px;
      font-weight: 400;
      position: relative;
      padding-top: 10px;
      text-align: center;
  }
    
    .intro p{
        width: 90%;
        color: rgb(0, 0, 0);
        font-size: 18px;
        padding-top: 5px;
        padding-bottom: 20px;
        line-height: 30px;
    }
    
  }
  
  

  .intro a{
    margin-top: -10px;
    padding-bottom: 30px
  }


.partners{
  background-color: rgb(202 241 255);
  margin-top: 30px;
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
}

.partners h3{
  color: #333333;
  font-size: 15px;
  font-weight: bold;
  position: relative;
  padding-top: 20px;
  margin-bottom: -13px;
}
.partners img{
  width: 250px;
  margin-top: -20px;
  margin-bottom: 20px;
}

.partners-slider {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 57%;
  margin-top: 10px;
  margin-bottom: 10px;
  overflow: hidden;
  background: rgb(202 241 255);
  border-radius: 16px;
  backdrop-filter: blur(7.4px);
  -webkit-backdrop-filter: blur(7.4px);
}



@media only screen and (max-width: 1850px){
  .partners-slider {
  width: 85%;
}
}

.partners-slider-items {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  animation: scrolling 20s linear infinite;

}

@keyframes scrolling {

  0% {
      transform: translateX(80%);
  }

  100% {
      transform: translateX(-20%);
  }
}

.partners-slider img {
  width: 17%;
  margin: 20px;

}

.intro .paragraph {
  width: 60%;
  color: rgb(0, 0, 0);
  font-size: 18px;
  margin-top: -27px;
  padding-left: 15px;
  padding-bottom: 20px;
  line-height: 30px;
}


.container{
  width: 1100px;
  height: 480px;
  display: flex;   
  background: #ffff;
  justify-self: center;
}










/* Main Heading Style */
.gallery h3 {
  text-align: center;
  font-size: 25px;
  font-weight: 400;
  color: white;
  background-color: #1fa67a;
  padding: .4em;
  width: 57.8%; /* Fixed width for all screen sizes */
  margin: 30px auto 0;
  border-radius: 8px 8px 0 0;
    -moz-box-shadow: 0 0px 50px 0 rgba(173, 111, 51, 0.69) inset;
  -webkit-box-shadow: 0 0px 50px 0 rgba(173, 111, 51, 0.69) inset;
   box-shadow: 0 0px 50px 0 rgba(173, 111, 51, 0.69) inset;
}

/* Container Padding */
.container2 {
  padding: 20px;
  padding-top: 10px;
}

/* Flex Layout for Videos */
.videos {
  width: 59%;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  justify-self: center;
  margin: 0 auto;
}


@media screen and (max-width: 1850px){
  .videos {
    width: 88.5%;
  }
  .gallery h3 {
  width: 86%; 
}
  
}

/* Video Item Styling */
.video-item {
  width: 23%;
  text-align: center;
  border: 2px solid #f0f0f0;
  border-radius: 10px;
  padding: 10px;
  transition: transform 0.3s ease-in-out;
}

.video-item:hover {
  transform: scale(1.05);
}

.video-thumb {
  width: 100%;
  height: 180px;
  border-radius: 8px;
}

.video-info {
  margin-top: 10px;
}

.video-title {
  font-size: 1.1rem;
  font-weight: 400;
  color: #333;
  margin-bottom: 5px;
}

.video-duration {
  font-size: 0.9rem;
  color: #777;
}

/* Responsive Styling */
@media screen and (max-width: 1024px) { /* Tablets and smaller screens */
  .gallery h3 {
    width: 57.8%; /* Keep the same width on tablets and smaller devices */
    font-size: 22px; /* Slightly smaller font */
    margin-top: 60px; /* Adjust top margin */
  }

  .video-item {
    width: 48%; /* Make video items take up more space on smaller screens */
  }

  .video-thumb {
    height: 150px;
  }
}

@media screen and (max-width: 768px) { /* Tablets */
  .gallery h3 {
    width: 95%; /* Keep same width */
    font-size: 25px; /* Slightly smaller font */
    margin-top: 30px; /* Adjust top margin */
  }

  .videos{
    width: 99.5%;
  }
  .video-item {
    width: 48%; /* Adjust width for more space */
  }

  .video-thumb {
    height: 150px;
  }
}

@media screen and (max-width: 480px) { /* Mobile Devices */
  .gallery h3 {
    width: 90%; /* Keep same width */
    font-size: 25px; /* Smaller font size */
    margin-top: 30px; /* Adjust top margin */
  }

  .video-item {
    width: 100%; /* Video items take up full width */
  }

.videos{
  width: 100%;
}
  
  .video-thumb {
    height: 150px;
  }
}











.contact p{
  text-align: center;
  color: white;
  opacity: 0.7;
  transition: 0.5s;
  line-height: 20px;
  padding-top: 20px;
}

      .contact p:hover{
          opacity: 1;
      }


.about {
  margin-left: 150px;
  float: left; 
}

.about p{
  color: white;
   opacity: 0.7;
   transition: 0.5s;
   line-height: 20px;
   padding-top: 5px;
}

      .about p:hover{
          opacity: 1;
      }



.quicklinks ul{
  display: flex;
  padding-top: 5px;
}

.gallary h3{
  font-size: 25px;
  font-weight: bold;
  color: #3ebd88;
  text-align: center;
  margin-top: 75px;
  position: relative;
  color: white;
  background-color: #3ebd88;
  padding: .4em;
  width: 57.73%;
  justify-self: center;
  border-radius: 0
}
 

@media only screen and (max-width: 1850px){
  .gallary h3{
  width: 86%;

}
}


.read-more.btn {
   color: #ffffff;
   background-color: #47c28c;
   padding: .6em 1.1em;
   font-size: .96em;
   text-transform: uppercase;
   display: inline-block;
   text-decoration: none;
   border: none;
}

.read-more.btn a{
  color: #ffffff;
}

.btn.read-more:hover {
   color: #ffffff;
   background-color: #777a77;
   padding: .85em 1.1em;
   font-size: .96em;
   text-transform: uppercase;
   display: inline-block;
   -webkit-transform: translate(0, -2px);
   -moz-transform: translate(0, -2px);
   transform: translate(0, -2px);
   box-shadow: rgb(0 0 0 / 30%) 0 12px 12px 0;
   -webkit-box-shadow: rgb(0 0 0 / 30%) 0 12px 12px 0;
   -moz-box-shadow: rgba(0, 0, 0, 0.3) 0 12px 12px 0;
   text-decoration: none;
}



.scrollup {
  width: 30px;
  height: 30px;
  position: fixed;
  display:none;
  bottom: 15px;
  right:100px;  
  background:url(../image/top.PNG)  ;
  opacity:0.8
}

a.scrollup:hover {opacity:1;}
.img-sectn img{  float: left;
margin-right: 15px;
margin-top: 6px;
max-width: 300px;}
.our-volun p {line-height:20px;font-family:serif}
.testi-qote img{
  max-width:100%;
}


/* Phones */
@media (max-width: 768px) {
    .scrollup { 
    display: none;
    background: none;
}
}

.mobile-menu{
  font-size: 30px;
  cursor: pointer;
  display: none;
}

@media only screen and (max-width: 768px){
  .mobile-menu{
    display: block;
    padding-right: 20px;
  }
  header ul{
    display: none;
    top: 77px;
    height: auto;
    width:100%;
    text-align: center;
    margin-left: 0px;
    padding-bottom: 10px;
  }

}


@media only screen and (max-width: 480px){
  .mobile-menu{
    display: block;
    padding-right: 20px;
  }
  header ul{
    display: none;
    top: 77px;
    height: auto;
    width:100%;
    text-align: center;
    margin-left: 0px;
    padding-bottom: 10px;
  }

}



.project-container {
  max-width: 1140px;
  margin: auto;
  padding: 20px;
}

.project-container h2 {
  text-align: center;
  margin-bottom: 10px;
  font-size: 25px;
  font-weight: 400;
  text-align: center;
  margin-top: 30px;
  position: relative;
  color: white;
  background-color: #1fa67a;
  padding: .4em;
  width: 100%;
  justify-self: center;
  border-radius: 8px 8px 0 0;
  -moz-box-shadow: 0 0px 50px 0 rgba(173, 111, 51, 0.69) inset;
  -webkit-box-shadow: 0 0px 50px 0 rgba(173, 111, 51, 0.69) inset;
   box-shadow: 0 0px 50px 0 rgba(173, 111, 51, 0.69) inset;
}



@media screen and (max-width: 768px){
  .project-container h2{
   margin-top: 15px; 
}
} 


@media screen and (max-width: 480px) {
.project-container h2{
 margin-top: 15px; 
}

}

.project-slide {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.project-card {
  flex: 1 1 45%;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: transform 0.3s ease;
}

.project-card:hover {
  transform: translateY(-5px);
}

.project-card img {
  width: 100%;
  height: auto;
  display: block;
}

.project-name {
  padding: 20px;
  text-align: center;
  font-family: gotu;
}

.project-name h3 {
  margin-bottom: 5px;
  font-size: 2.5rem;
}

.project-name p {
  margin-bottom: 15px;
  font-size: .8rem;
}

.read-more {
  display: inline-block;
  padding: 10px 20px;
  background-color: #1fa67a;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.read-more:hover {
  background-color: rgb(81, 180, 139);
}

/* Responsive styles */
@media (max-width: 768px) {
  .project-card {
    flex: 1 1 100%;
  }

  .project-name h3 {
    font-size: 2.5rem;
  }

  .project-name p {
    font-size: 0.8rem;
  }
}






.modal {
  display: none;
  position: fixed;
  z-index: 999;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.6);
  overflow-y: auto;
}

.modal-content {
  background-color: #fff;
  color: #333;
  margin: 250px auto;
  padding: 30px 40px;
  border: 5px solid #2eaf85;
  border-radius: 10px;
  width: 90%;
  max-width: 800px;
  font-family: 'Open Sans', sans-serif;
  line-height: 1.3;
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
  position: relative;
}

.modal-content h2 {
  color: #2eaf85;
  font-size: 18px;
  margin-bottom: 20px;
  font-weight: 400;
}

.modal-content ol {
  padding-left: 20px;
  margin: 0;
}

.modal-content li {
  margin-bottom: 15px;
  font-size: 13px;
}

.close {
   position: absolute;
  top: 10px;
  right: 10px;
  background: #1fa67a;
  color: white;
  font-size: 22px;
  border-radius: 50%;
  font-size: 32px;
  width: 32px;
  height: 32px;
  text-align: center;
  line-height: 30px;
  cursor: pointer;
  transition: 0.3s ease;
}

.close:hover {
  background: #248c68;
}


#donation-text{
  margin-left: 10px;
}

@media (max-width: 768px){
  #donation-text{
  margin-left: 0px;
}
}