html,
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  justify-content: center;
  align-content: flex-start;
  background-color: white;
}
.body-heading{
    color:#337065;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    animation: typing 6s steps(22) infinite;
}
p{
  font-weight: 400;
}
.top-header{
  background-color: #32c5ad;
  display: flex;
  justify-content: space-between;
  padding: 11px;
}
.quick-donate h1{
  color: white;
  margin-top: 7px;
  font-size: 1.2rem;
}
.donation-btn a:hover{
  color: rgb(51, 51, 51);
  background-color: #ffffff;
}
.make-donate{
  padding: 6px 12px;
  font-weight: 600;
  background-color:#ffffff;
  color: #337065;
  border: 2px solid #337065;
  border-radius: 20px;
  font-size: 0.9rem;
  cursor: pointer;
  background: linear-gradient(to right, #ffffff 50%,  #336570 50%);
  background-size: 200% 100%;
  transition: background-position 0.5s;
}
.make-donate:hover {
  background-position: -100% 0;
  color: white;
}
/* Pill header */
    .pill {
      display: inline-block;
      padding: 10px 18px;
      border-radius: 28px;
      font-weight: 700;
      color: #fff;
      text-transform: uppercase;
      font-size: 18px;
      text-align: center;
      background: linear-gradient(90deg, #0f8b76, #3fc1a8);
      box-shadow: 0 4px 12px rgba(15,139,118,0.12);
    }
.glow-heading {
  font-size: 2rem;
  font-weight: bold;
  color: #2A7D78;  /* Primary blue color */
  text-align: center;
  animation: glow 2s ease-in-out infinite alternate;
}

@keyframes glow {
  from {
    text-shadow: 0 0 3px #2A7D78, 0 0 3px #2A7D78, 0 0 8px #2A7D78;
    color: #346355;
  }
  to {
    text-shadow: 0 0 5px #00e1ff, 0 0 7px #00bfff, 0 0 10px #00a2ff;
    color: #61C2A2;
  }
}
    .impact-section {
      background: #f8fafc;
      padding: 40px 0;
    }
    .impact-card {
      text-align: center;
      padding: 3px;
      border-radius: 1.25rem;
      background: #ffffff;
      height: 100%;
      box-shadow: 0 2px 10px rgba(0,0,0,0.05);
      transition: transform .2s ease, box-shadow .2s ease;
	  padding:10px;
    }
    .impact-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    }
    .impact-img {
      width: 100%;
      aspect-ratio: 1/1; /* perfect circle ratio */
      object-fit: cover;
      border-radius:15px;
      border: 4px solid #e9ecef;
     
    }
    .impact-title {
      font-weight: 600;
      font-size: 1rem;
      margin-bottom: 6px;
    }
    .impact-text {
      font-size: .95rem;
      color: #6c757d;
      margin: 0;
    }
    /* Column content */
    .bank-card {
      padding: 18px 12px;
      margin-top: 18px;
    }

    .bank-card p {
      margin: 6px 0;
      line-height: 1.45;
      font-size: 15px;
      color: #1f3b34;
    }
    .bank-label {
      font-weight: 600;
      margin-right: 6px;
    }
.donation-btn a:hover{
  color: #ffffff;
  border: 2px solid #ffffff;
}
.make-donate-bottom{
  padding: 8px 20px;
  background-color:#337065;
  color: #fffbfb;
  border: 2px solid #ffffff;
  border-radius: 20px;
  font-size: 0.9rem;
  cursor: pointer;
}
p{
  font-size: 1rem;
  font-weight: 500;
  color: #555252;
}
.our-iniciatives-heading h1{
   color: #337065;
   font-size: 4rem;
   font-weight: 500;
}
.our-iniciatives-heading h2{
  color:#337065;
  font-size: 3rem;
  font-weight: 500;
}
.our-projects-heading h1{
   color: #337065;
   font-size: 4rem;
   font-weight: 500;
}
.our-projects-heading h4{
  color: #337065;
  font-size: 1.4rem;
  font-weight: 400;
}
.card-body p{
  font-weight: 400;
}
.about-info h2{
  color: #337065;
  font-size: 2rem;
}
@media (max-width: 998px) {
  .our-iniciatives-heading h1{
    color: #337065;
    font-size: 1.7rem;
    font-weight: 700;
 }
 .our-iniciatives-heading h2{
   color: #337065;
   font-size: 1.5rem;
   font-weight: 500;
 }
 .our-projects-heading h1{
  color: #337065;
  font-size: 1.7rem;
  font-weight: 700;
  
}
.our-projects-heading h4{
 color:#337065;
 font-size: 1rem;
 font-weight: 400;
}
.about-info h2{
  color: #337065;
  font-size: 1.2rem;
}
.body-heading{
    color:#337065;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    animation: typing 6s steps(22) infinite;
    font-size: 1.4rem;
}
}
.no-gutters > [class*='col-']{
	padding-right:1px;
	padding-left:1px;
	}
.logo-img{
  width:57px; 
  height: 57px;
  margin-top: -12px;
  margin-bottom: -10px;
}
/*start navbar */
.navbar{
    background-color:#337065;
    height: 58px;
    z-index: 1;
}
.navbar-nav {
    flex-direction: row;
}
ul .nav-item{
  margin-left: 20px;
}
.navbar .nav-item a:hover{
  color:rgb(255, 255, 255);
}
.navbar .nav-item a{
  color: white;
  font-size:1rem;
  font-weight: 500;
}
/*Dropdown*/
/* ============ desktop view ============ */
.navbar-nav li .dropdown-menu{
  margin-top:0;
  background-color: #f3f3f3;
  width: 300px;
  border-radius: 8px;
}
.dropdown-menu li{
    position: relative;
    background-color:#f3f3f3;
}
.dropdown-menu li .dropdown-item{
  padding: 7px;
  border-bottom:  0.5px solid rgb(150, 139, 139) ;
  border-style: dashed;
  color:#555555;
  font-size: 0.9rem;
  font-weight: 400;
}
.dropdown-menu > li .dropdown-item:hover{
    background-color: #337065;
    color: #242424;
}
.navbar-nav li:hover >.dropdown-menu{
    display: block;
}
/* ============ desktop view .end// ============ */
/*End Dropdown*/
@media (min-width: 998px) {
    #navbar-menu{
        margin-left:1px;
   }
    .navbar .nav-item a:hover{
      color: #ffffff;
       /*border-bottom:2px solid gray;
       */
   }
    .navbar-btn button {
        display: none;
   }
}
@media (max-width: 998px){
    .navbar-collapse #navbar-menu{
        display:none;
   }
   .navbar-nav li{
    margin-right:10px;
   }
    .navbar-btn button {
        display: inline-block;
        vertical-align: middle;
        cursor:pointer;
   }
    .navbar-nav .users{
        display:none;
   }
}
/*end navbar */
/*start left sidebar */
#left-sidebar {
  top: 0;
  left: 0;
  left: -280px;
  height: 100vh;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  width: 280px;
  float: left;
  background-color: #f5f5f5;
  position: fixed;
  z-index: 9;
}
.offcanvas-active #left-sidebar {
  left: 0;
}
.navbar-nav .icon-menu {
  display: inline-block;
  vertical-align: middle;
  padding-top: 14px;
  padding-bottom: 14px;
  position: relative;
}
.navbar-nav .icon-menu i {
  font-size: 20px;
}
.navbar-btn button {
  font-size: 24px;
  width: 45px;
  border: 1px solid white;
  border-radius: 3px;
  border-style: dashed ;
  height: 35px;
  color:rgb(255, 255, 255);
  background: none;
 
}
.sidebar-nav ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
.sidebar-nav .metismenu ul a {
  font-size: 0.9rem;
  font-weight: 400;
  padding: 10px 15px 10px 40px; 
}
.sidebar-nav .metismenu a {
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  position: relative;
  display: block;
  padding: 12px 15px;
  font-size:15px;
  color: black;
}
.sidebar-nav .metismenu li a {
  text-decoration: none;
  border-bottom: dashed;
  border-color: #337065;
}
.sidebar-nav li a{
  font-weight: 700;
}
.sidebar-nav .metismenu ul.collapse a:hover, .sidebar-nav .metismenu ul.collapse a:focus {
  text-decoration: none;
}
.sidebar-nav .metismenu a:hover, .sidebar-nav .metismenu a:focus, .sidebar-nav .metismenu a:active {
  text-decoration: none;
  color:black;
}
.nav-link i{
  font-size: 16px;
}
.nav-link{
	cursor :pointer;
}
/*end left sidebar */

.form-control:focus {
  border-color: #ccc;
  }
.navbar-toggle {
  margin-right: 35px;
  border: none;
  background: transparent !important;
}
.navbar-toggle:hover {
  background: transparent !important;
}
.navbar-toggle .icon-bar {
  width: 22px;
  transition: all 0.2s;
}
.navbar-toggle .top-bar {
  transform: rotate(45deg);
  transform-origin: 10% 10%;
}
.navbar-toggle .middle-bar {
  opacity: 0;
}
.navbar-toggle .bottom-bar {
  transform: rotate(-45deg);
  transform-origin: 10% 90%;
}
.navbar-toggle.collapsed .top-bar {
  transform: rotate(0);
}
.navbar-toggle.collapsed .middle-bar {
  opacity: 1;
}
.navbar-toggle.collapsed .bottom-bar {
  transform: rotate(0);
}
/*end search bar*/
/*Start Body section */
.contact-form {
  background-color: #fefeff; /* For browsers that do not support gradients */
  background-image: linear-gradient(to right, #e0e0e0 , #E6E6FA);
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
ul li a{
  text-decoration: none;
  color:#3b3b3b;
  
}
/*End Body section */
/* Image slider */
@media (max-width: 600px) {
     .slider-img-mob {
         width: 100%;
         height: auto;
    }
    .slider-img-desktop {
      display: none;
  }
}
 @media (min-width: 600px) {
  .slider-img-desktop {
    width: 100%;
    height: auto;
}
.slider-img-mob {
  display: none;
}
}
.our-mission h4{
  color: #337065;
  width: fit-content;
  white-space: nowrap;
  overflow: hidden;
  animation: typing 6s steps(22) infinite;
  font-size: 1.6rem;
  margin-left: 20px;
}
@keyframes typing {
  from {
      width: 0;
  }
  to {
      width: 100%;
  }
}

/* Blinking cursor effect */
@keyframes blink {
  from, to {
      border-color: transparent;
  }
  50% {
      border-color: #333;
  }
}
/* End Image Slider */
ol li{
  margin-top: 7px;
  font-size: 1rem;
  color: #555252;
}
.cat{
  margin-top: 35px;
}
.d-box{
  background-color: #f5f5f5;
  border-radius: 4px;
  padding: 10px;
}
.d-box h5{
  color: #337065;
  font-size: 1.7rem;
  text-align: center;
}
.btn-donate{
  padding: 15px;
  text-align: center;
}
.founder-box{
  background-color: #f5f5f5;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
  height: auto;
  margin-bottom: 30px;
  border : 2px solid #337065;
}
.founder-img{
  padding: 5px;
  width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.founder-info h5{
  color: #337065;
  padding: 8px;
}
.founder-info p{
  color: #337065;
  margin-top: 5px;
}
.links ul li{
  margin-top: 10px;
}
.cat-card img{
  width: 100%;
  
}
.project-card img {
      width: 100%;
      border-radius: 2px;
    }
.project-card {
  background-color: #fcf5fd;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}
.project-card-body{
  background-color: #fcf5fd;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}
.project-card-title{
    padding: 5px;
    color:#337065;
    font-weight: 500;
    
}
.card{
  margin-top: 6px;
  background-color: #fcf5fd;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}
.divider {
  font-size: cat0px;
  display: flex;
  align-items: center;
}
.divider::before, .divider::after {
  flex: 1;
  content: '';
  padding: 1px;
  background-color:  #337065;
  margin: 5px;
}
.card-in{
   border-radius: 2px;
   margin-bottom: 10px;
   position: relative;
   overflow: hidden;
   width: 100%;
}
.elements1{
  padding:15px;
}
.elements2{
  padding:15px;
  text-align: right;
}
.box h2{
  margin-top: 10px;
  font-size: 35px;
}
.box h3{
  font-size: 40px;
  font-weight: 700;
  text-shadow: 2px 3px #272323;
}
@media (max-width: 768px){
  .box img{
    width: 60px;
  }
  .box h2{
    font-size: 25px;
  }
  .box h3{
    text-shadow: 2px 3px #272323;
    font-weight: 700;
    font-size: 25px;
  }
  
}
.btn-readmore{
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  background-color: white;
  color: #242424;
  border-radius: 20px;
  font-size: 0.8rem;
}
.card-img-overlay-aqua{
  position: absolute;
  left: 0;
  right: 0;
  color: #ffffff; /* Text color */
  padding: 1rem;
  background-image: linear-gradient(to left, rgba(23, 146, 228, 0), rgb(40, 44, 43));
}
.card-img-overlay-sustain {
  position: absolute;
  left: 0;
  right: 0;
  color: #ffffff; /* Text color */
  padding: 1rem;
  background-image: linear-gradient(to right, rgba(23, 146, 228, 0), rgb(84, 233, 220));
}
.card-img-overlay-sharemeals {
  position: absolute;
  left: 0;
  right: 0;
  color: #ffffff; /* Text color */
  padding: 1rem;
  background-image: linear-gradient(to left, rgba(23, 146, 228, 0), rgb(178, 199, 199));
}
.card-img-overlay-rebuildhope {
  position: absolute;
  left: 0;
  right: 0;
  color: #ffffff; /* Text color */
  padding: 1rem;
  background-image: linear-gradient(to right, rgba(23, 146, 228, 0), rgb(39, 43, 43));
}
.card-title-in{
  color: white;
}
.card-text{
  color: white;
}
.founder-card{
  border:1px solid rgb(236, 231, 231);
  border-radius: 4px;
}
/*Accept donation   */
.accept-donation{
  background-color: #f5f5f5;
  margin-top: 30px;
  margin-bottom: 30px;
}
.img-icon {
  width:5rem;
  margin-bottom: 0.5rem; /* Adjust spacing between icon and title */
}
.icon-title {
  color: #333232;
  font-weight: 600;
}
.home-icons {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 10px 0;
}
.home-icon {
  width: 160px;
  height: 160px;
  border: 2px solid #333;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  transition: transform 0.3s ease-in-out;
}

.home-icon:hover {
  transform: scale(1.1);
}
.home-icon h3 {
  margin-top: 10px;
  font-size: 16px;
  color: #333;
}
@media (max-width: 768px) {
  .home-icon {
    width: 90px;
    height: 90px;
    border: 1px solid #333;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    transition: transform 0.3s ease-in-out;
  }
  .img-icon {
    width:3rem;/* Adjust icon size for smaller screens */
    margin-bottom: 0; /* Remove margin on smaller screens */
}
.icon-title {
    color: #333232;
    font-size: 0.7rem;
}
}
.cat-images{
  width: 100%;
  border-radius: 4px;
}
.gallery-img{
  margin-top: 2px;
}
.footer-menu{
  background-color:#32c5ad;
}
.footer-bottom{
  background-color: #337065;
}
.footer-bottom p{ 
  color: white;
}
.links ul li a{
  color:white;
}
.links h5{
  color:white;
}
.links p{
  color:white;
}
/* social icon */
.fa-whatsapp {
  color: white;
  font-size: 20px;
}
.fa:hover {
    opacity: 0.7;
}
.fa-facebook {
  padding: 7px 8px;
  font-size: 18px;
  width: 30px;
  height: 30px;
  text-align: center;
  text-decoration: none;
  border-radius: 50%;
}
.fa-facebook {
  background: #fcfdff;
  color: rgb(50, 88, 145);
}
.fa-instagram{
    font-size: 1.7rem;
    color: rgb(255, 255, 255);
}
.fa-youtube-play {
    font-size: 1.7rem;
    color:rgb(250, 250, 250);
}
.social_media a{
padding: 10px;
display:inline-block;
}
.column-heading {
  text-align: center;
}
/* Customize icon size */
@media (min-width: 998px){
  .icon-img {
    margin-top: 20px;
    width: 150px; /* Adjust as needed */
    height: auto;
  }
  /* Customize heading size */
  .text-center a{
    text-decoration: none;
  }
  .column-heading{
    font-size: 1.5rem; /* Adjust as needed */
    color:#32c5ad;
    font-weight: 600;
  }
  .center-image {
    display: flex;
    justify-content: center;
    padding: 20px;
  }
  .center-image img{
    max-width: 700px;
  }
  .elements2 i{
    color:white;
    font-size: 200px;
  }
  h2.title{
    font-size: 3rem; /* Adjust as needed */
     color: #337065;
    font-weight: 600;
  }
  .we-accept-donation h1{
   color: #337065;
  font-size: 4rem;
  font-weight: 600;
 }
}
@media (max-width: 998px){
  .icon-img {
    margin-top: 20px;
  }
.text-center a{
  text-decoration: none;
}
.column-heading{
  color:#32c5ad;
  font-size: 1.1rem;
  font-weight: 600;
}
.elements2 i{
  color:white;
  font-size: 80px;
}
.we-accept-donation h1{
   color: #337065;
  font-size: 1.7rem;
  font-weight: 700;
 }
 h2.title{
  font-size: 1.6rem; /* Adjust as needed */
   color: #337065;
  font-weight: 600;
}
}
.we-accept{
  margin-top: 40px;
  background-color: #F5F5F5;
  padding-bottom: 20px;
}
.we-accept-donation{
    margin-top: 20px;
}
.we-accept-donation h1{
  text-align: center;

}
.center-image {
  display: flex;
  justify-content: center;
}
.overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.overlay-text h4{
  color:#42dfdf;
  font-weight: 700;
  font-size: 2rem;
}
.overlay-text-chat h4{
  color:#ffffff;
  font-weight: 700;
  font-size: 2rem;
}
h3.whatsapp{
  color: #36bb22;
  font-size: 23px;
  font-weight: 700;
    
}
i.fa-whatsapp{
  color: #36bb22;
  font-size: 26px;
}
.overlay p{
  color: #ffffff;
  font-size: 24px;
}
.overlay-button {
  margin-top: 10px;
}
.column {
  position: relative;
  padding: 0;
}
.column img {
  width: 100%;
  height: auto;
}
.overlay-button-aquaid{
  background-color: transparent;
  border:1px solid white;
  color:white;
  margin-top: 40px;
}
.overlay-button-aquaid:hover{
  background-color: transparent;
  border:1px solid white;
  color:white;
  margin-top: 40px;
}
.payment-logo{
  margin-top:20px;
}

.donate-today-btn {
  margin-top: 40px;
  display: inline-block;
  padding: 12px 30px;
  color: white;
  text-decoration: none;
  border-radius: 27px;
  border: none;
  cursor: pointer;
  font-size: 1.3rem;
  background: linear-gradient(to right, #337065 50%,  #56ccc2 50%);
  background-size: 200% 100%;
  transition: background-position 0.5s;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Adjust values as needed */
}
.donate-today-btn:hover {
  background-position: -100% 0;
  color: white;
}
.donation-policy img{
  margin-top: 35px;
}
.card-services {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  background-color: #ffffff;
  padding: 8px;
  border: 3px solid #337065;
  
}
.card-others{
  margin-top: 6px;
}
.card-body-services {
  margin-top: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.card-title-services{
  color: #337065;
  font-weight: 500;
}
.btn-services{
  background-color: #337065;
  color: white;
  border-radius: 25px;
  padding: 7px 20px;
}
.btn-services:hover{
  background-color:  #32c5ad;
  color: white;
}
.other-services-heading h1{
  font-size: 2rem;
  color: #32c5ad ;
  padding: 8px;
}
.cat-card img{
  margin-top: 20px;
}
.btn-submit{
  background-color:#337065;
  color: white;
  border-radius: 20px;
  padding: 7px 40px;
  border:2px solid #ffffff;
}
.btn-submit:hover{
  background-color:#ffffff;
  color: #1f1e1e;
  border-radius: 20px;
  padding: 7px 40px;
  border:2px solid #32c5ad;
}
.address-box{
  padding: 60px 6px 60px 6px;
}
.card-address{
  background-color: rgb(255, 255, 255);
  border: 2px solid #337065;
}
.address{
  background-color: #f5f5f5;
}
.card-text-address{
  color:#4a4d55;
  font-weight: 500;
}
.card-address i{
  color:#32c5ad;
  font-size: 1.6rem;
}
.card-body-address{
  padding: 9px;
}
.card-body-address h5{
  font-size: 1.6rem;
  font-weight: 500;
}
.title h6{
  color:#337065;
  font-weight: 500;
}
.category img{
  width: 120px;
}
/*FAQ*/
.our-faq-heading h3{
  color:#32c5ad;
}
.accordion-button {
  color: rgb(37, 36, 36);
  background-color: #ebebeb;
  border-color: #7952b3;
 
}
.accordion-item.show .accordion-button {
  background-color: #6a398e;
  color: #ffffff;
}
.accordion-item{
  margin-top: 30px;
}
.accordion-item.show .accordion-button::after {
  color: #2c2a2a;
}
.accordion-body {
  background-color:#337065;
  color: #ffffff;
  border-radius: 8px;
}