/********** Template CSS **********/
:root {
    --primary: #06A3DA;
    --secondary: #F57E57;
    --light: #EEF9FF;
    --dark: #091E3E;

    --blue-1: rgb(18, 130, 171);
    --blue-1: rgb(30, 135, 184);

    --white-1: #ffffff;
    --black-1: #01050d;
    --gray-1: rgb(206, 210, 210);
    --orange: rgb(226, 64, 4);
    --green: rgb(2, 145, 50);
    --pupple: rgb(32, 4, 194);
    --teal: #8ccec3; ;

    --fontsize-maelezo-small: .75rem;
    --fontsize-maelezo-1: .8rem;
    --fontsize-title-1: 1.6rem;
    --fontsize-title-2: 1.4rem;
    --fontsize-title-3: 1.1rem;
    --fontsize-title-4: .8rem;

    --fontsize-S: 1rem;
    --fontsize-M: 1.3rem;
    --fontsize-L: 1.8rem;
    --fontsize-large: 2rem;
    --fontsize-larger: 2.5rem;
    --fontsize-XL: 3rem;
    --fontsize-XXL: 4rem;

    --font-family-1: "Averia Serif Libre", cursive;

}


.btn-search{color: var(--pupple);border: .5px solid; border-radius: 0; margin:1px 10px; padding: 0; display: flex; align-items: center; justify-content: center;}
.fa-search{font-size: 1.2rem; margin: 0;}
.btn-search:hover {background: var(--orange); color: white}




html, body {
    overflow-x: hidden;
    margin: 0;
    padding: 0; max-width: 100vw;
}


.top-top-carousel{max-width: 100%; padding: 10px;}
.top-top-carousel h1, .top-top-carousel h2 {color: white; font-family: var(--font-family-1) !important; }


.top-top-carousel h1 {
    font-size: clamp(var(--fontsize-maelezo-small), 1vw + 0.1rem, var(--fontsize-M)) !important;  /*clamp(min, preferred, max) → it’ll never go smaller than min or bigger than max.*/
}

.top-top-carousel h2 {
    padding-bottom: 8px !important;
    font-size: clamp(var(--fontsize-M), 2vw + 0.2rem, var(--fontsize-larger)) !important;
}



.container-topbar{padding-left: 20px; padding-right: 0; display: none; justify-content: center; align-items: center; text-align: center; background: #c9f9f6;}
.top-text-1, .top-text-2{padding: 3px 0; font-family: var(--font-family-1); font-size: var(--fontsize-maelezo-small); font-weight: 300; color: var(--pupple);margin:4px; }
.top-text-2{ color: var(--white-1); }

.top-shape::before {
    position: absolute;
    content: "";
    width: 40px;
    height: 100%;
    top: 0;
    left: -17px;
    background: var(--pupple);
    transform: skew(40deg);
}

.top-shape {
    background: var(--pupple); padding: 0  30px;
}
.top-email-box{padding-right: 2px; border-right: .1px solid; background: var(--pupple);}
.top-number-box{ background: var(--pupple);}


.navbar-light.is-stuck .navbar-brand img {height: 60px;}




.navbar-brand {
  display: flex;
  align-items: center;
  gap: 10px; /* space between image and text */
  
}

.navbar-brand img {
  height: 80px; 
  width: auto;
  object-fit: contain;
  display: block;
  margin: 0;
}

.navbar-brand h1 {
  margin: 0;
  font-size: clamp(var(--fontsize-M), 2vw + 0.2rem, var(--fontsize-large)) !important;
  color: var(--pupple);
  font-family: var(--font-family-1);
}
.navbar-brand h1 span {
  color: var(--green);
   display: block;       /* forces it to its own line */
    text-align: center;   /* centers the text within h1 */
}


.container, .general-container-1, .general-container-2 {
    background: rgb(255, 255, 255);
    padding: 10px  10px; 
    margin: auto;
}
.general-container-1 {
    background: linear-gradient(rgba(70, 177, 155, 0.85), rgba(74, 76, 216, 0.5)), url(../img/pic-1.jpg) center center no-repeat;
    background-size: cover;
}

.container-services, .container-header, .container-project-1{
    background:#e9f4f2; 
    padding: 8px;
}

.container-project-1{
    position: relative;
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center;
    margin: 0 auto;
}


.container-services{
    background: linear-gradient(rgba(99, 146, 200, 0.1), rgba(245, 245, 247, 0.2)), url(../img/img-8.jpg) center center no-repeat;
    background: transparent;
    background-size: cover;
}

.service-intro-box{
    background: rgb(255, 255, 255, .9);
    padding: 10px  5px; 
    margin: 5px auto;
}



.container-1{
    background: white; 
    padding: 5px 20px; 
    height: 180px;
}

.container-2{
    background: rgb(46, 120, 132, .2);
    padding: 2px; 
}
.container-3{
    background: rgb(255, 255, 255);
    padding: 2px; 
    height: 600px;
}
.container-3 .row {
  display: flex;
  justify-content: center; 
}


.service-items-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px; /* space between items */
    position: relative;
}

.footer-container{
    background: rgba(255, 255, 255, 0.6); 
    padding-top: 5px; 
    border: .5px solid white; margin-top: 70px;
}

.footer-box-2 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px; /* space between items */
    position: relative;
}

.footer-item-box{
    border: .5px solid rgb(255, 255, 255,.2); 
    padding: 5px 2px;
     width: 100%;      /* fills the entire column */
    box-sizing: border-box; /* ensures padding/border don’t change width */
}

.footer-item-box h1{
    font-family: var(--font-family-1); 
    color: var(--pupple);
    font-size: clamp(var(--fontsize-M), 1vw + 0.1rem, var(--fontsize-large));  /*clamp(min, preferred, max)*/
    border-bottom: 1px solid;
    padding: 5px 10px;
}

.footer-contact-item {
    display: flex;
    align-items: center; /*centers icon vertically */
    padding: 4px 5px;
    color: var(--pupple); 
}

.footer-contact-item i {
    margin-right: 10px;
}
.footer-contact-item p {
    font-family: var(--font-family-1); font-size: var(--fontsize-maelezo-small);
    margin: 0;
    text-align: left; /* ensures wrapped lines are left-aligned */
}

.footer-social-media {
   margin-top: 15px;
   padding: 5px 3px;
   background: linear-gradient(rgba(8, 46, 46, 0.75), rgba(31, 3, 16, 0.5)), url(../img/img-4.jpg) center center no-repeat;   
}

.footer-social-media h1{
   color:  var(--white-1); 
   font-size: clamp(var(--fontsize-maelezo-small), 1vw + 0.1rem, var(--fontsize-M));  
}

.footer-social-media-btn-box {
    display: flex;
    flex-wrap: wrap;               /* allow wrapping */
    border: 0.0px solid white;
    gap: 5px;                     /* space between items */
    box-sizing: border-box;        /* keeps borders/padding inside */
    
}






.footer-gallery-box {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px; /* space between items */
    position: relative;
}
.footer-gallery-item-box{
    border: .5px solid rgb(255, 255, 255, .2);
    position: relative;
}

.footer-gallery-item-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;       /* fill the box while keeping aspect ratio */
    object-position: center; /* center the image */
    display: block;          /* remove inline-block spacing */
    
}


.footer-gallery-item-box p {
    position: absolute;
    top: 50%;              /* vertically center */
    left: 50%;             /* horizontally center */
    transform: translate(-50%, -50%);
    color: white;
    font-size: var(--fontsize-maelezo-small);
    font-family: var(--font-family-1);
    text-align: center;
    background: rgb(255, 255, 255, .3);
    padding: 10px;
    text-shadow: 1px 1px 5px rgba(0,0,0,0.7); /* make text readable */
}

.footer-gallery-item-box span {
    position: absolute;
    top: 50%;              /* vertically center */
    left: 50%;             /* horizontally center */
    transform: translate(-50%, -50%);
    font-size: var(--fontsize-maelezo-small);
    text-align: center;
    background: rgb(255, 255, 255, .6);
    font-size: 5rem; 
    width: 80%; height: 80%;
    opacity: 0;
    display: flex; 
    align-items: center; 
    justify-content: center; font-family: 'Courier New', Courier, monospace;
}

.footer-gallery-item-box:hover span{
    opacity: 1;
} 
.footer-gallery-item-box:hover a{
    color: white;
} 

.footer-gallery-item-box:hover p{
    opacity: 0;
} 



.quick-links{
    display: flex; 
    flex-direction: column; 
}
.quick-links i, .quick-links p{
    font-size: clamp(var(--fontsize-maelezo-s), 1vw + 0.1rem, var(--fontsize-M)); 
}

.quick-links .footer-contact-item {
    width: 90%; padding: 0  5px;
    transition: all 0.3s ease; /* smooth transition for everything */
}

.quick-links .footer-contact-item:hover {
     color: var(--orange);
    transform: translateX(8px); /* slide to the right */
    padding: 1.5px; margin-left: 2px;
    letter-spacing: .1rem;
    background: rgb(255, 255, 255, .7); 
}

.header-2-row{
    height: 800px; 
    display: flex;
    align-items: stretch; 
}


@media (max-width: 992.5px) {
    .header-2-row { height: auto;} /* let row content dictate height on smaller devices */

    .header-carousel{height: 400px !important;}

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



@media (max-width: 1200px) {
    .service-items-container {
        grid-template-columns: repeat(2, 1fr);
    
    }
}

@media (max-width: 750px) {
    .service-items-container {
        grid-template-columns: 1fr;
    }

}



@media (max-width: 440px) {
    .footer-box-2{grid-template-columns: 1fr;}
    .team-item-social {
        padding: 2px;
        top: 65% !important; 
        
    }
}

@media (max-width: 375px) {
    .top-top-carousel h2 {font-size: .8rem !important;}
    .col-6.col-lg-3 {
      flex: 0 0 100%;     
      max-width: 100%;
    }
}

@media (max-width: 290px) {
    .top-top-carousel h1, .top-top-carousel h2  {font-size: .7rem !important;}
}





.service-item-container {
    overflow: hidden; /* hides parts that don't fit */
    border: .5px solid rgba(255, 255, 255, 0.8);
    padding: 5px;
    display: flex;               /* enable flexbox */
    flex-direction: column;      /* stack children vertically */
    align-items: center;         /* vertical centering */
    justify-content: center;     /* horizontal centering */
    height: 100%;           /* must have height for flex children to use */

}


.box-maelezo-1 {
    position: relative;
    background: var(--white-1);
    padding: 55px 30px  30px  30px;
    margin: 0;
    border-bottom: 1px solid var(--pupple);
}


.box-maelezo-1 h2 {
    color: var(--pupple);
    font-family: var(--font-family-1);
    font-size: var(--fontsize-S);
    text-align: center;
}

.mstari {
    border: .5px solid  var(--pupple); 
    width: 100%;                   
    margin: 10px auto; 
    opacity: .8;            
}

.service-item-maelezo-1{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5px  5px;
}

.service-item-maelezo-1:hover{
   background: var(--blue-1);
   cursor: pointer;
}

.service-item-maelezo-1:hover span,
.service-item-maelezo-1:hover i {
    color: var(--white-1); 
}

.service-item-maelezo-1 span {
    color: var(--black-1);
    font-family: var(--font-family-1);
    font-size: var(--fontsize-maelezo-1);
    line-height: 1.2rem;
}

.service-item-maelezo-1 i{
    color: var(--blue-1);
    font-size: var(--fontsize-maelezo-small);
}

.service-item-1{
    height: 100%; 
    display: flex; 
    flex-direction: column;
    box-sizing: border-box;
    padding-bottom: 30px; 
   
}



.service-item-title {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.service-item-title h1 {
    position: relative;
    font-size: var(--fontsize-S);
    color: var(--pupple);
    background: var(--white-1);
    padding: 10px 10px;       /* space inside the box */ 
    margin: 0;
    font-family: var(--font-family-1);
    border-radius: 0px;
}

.service-item-title::before,
.service-item-title::after {
    content: "";
    flex: 1; /* stretches line */
    border-bottom: .5px solid white;
}


.main-title {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 40px;
    margin-bottom: 20px;
}

.main-title h1 {
    position: relative;
    font-size: var(--fontsize-M);
    color: var(--orange);
    background: var(--white-1);
    width: 50%;
    padding: 10px 10px;       /* space inside the box */ 
    margin: 0;
    font-family: var(--font-family-1);
    border-top: .5px solid var(--orange);
    border-left: .5px solid var(--orange);
    border-right: .5px solid var(--pupple);
    border-bottom: .5px solid var(--pupple);
    border-radius: 0px;
    text-align: center;
}


.col-carousel-1 {
    padding: 10px 2px; 
    border: .5px dotted rgb(255, 255, 255); 
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.col-carousel-1 h1, h2{color: var(--pupple); margin: 0 auto; padding: 4px 15px; font-size: var(--fontsize-larger); text-align: center; font-family: var(--font-family-1);}
.col-carousel-1 h1 span {color: var(--green);}
.col-carousel-1 h2 {font-size: var(--fontsize-s); font-style: italic; color: var(--dark);}

@media (max-width: 500px) {
      .main-title h1 {
        
        width: 80%;
       
    }
    .col-carousel-1 {padding: 10px  2px !important; }

}







.main-title::before,
.main-title::after {
    content: "";
    flex: 1; /* stretches line */
}


.main-title::before {
    border-bottom: 1px solid var(--orange);
}

.main-title::after {
    border-bottom: 1px solid var(--pupple);
}


.main-title h1::before {
    position: absolute;
    content: "";
    width: 40%;
    height: 1px;
    left: 10%;
    bottom: 5px;
    background: var(--pupple);
}

.main-title h1::after {
    position: absolute;
    content: "";
    width: 20%;
    height: 1px;
    right: 15%;
    bottom: 5px;
    background: var(--orange);
}

.after-main-title{
    padding: 5px 15px;
}

.after-main-title h2 {
    font-family: var(--font-family-1);
    font-size: var(--fontsize-larger);
    text-align: center;
    color: var(--pupple); 
    margin-bottom: 10px;
}
.after-main-title h3 {
    font-family: var(--font-family-1);
    font-size: var(--fontsize-maelezo-1);
    color: var(--black-1);
    font-weight: 500;
    line-height: 1.5rem;
}




.our-vision {
  position: relative;
  border: .5px solid var(--gray-1);
  padding: 2px 5px 10px 5px;
  margin: 15px  0; 
    background: linear-gradient(rgba(8, 22, 128, 0.5), rgba(116, 6, 6, 0.5)), url(../img/pic-1.jpg) center center no-repeat; 
    background: rgb(0, 88, 81); 
}

.our-vision h2 {
    position: relative;
    font-family: var(--font-family-1);
    font-size: var(--fontsize-S);
    font-weight: 500;
    color: rgb(133, 4, 4);
    background: rgb(189, 200, 197); 
    display: flex; justify-content: left;
}


.our-vision .fa-plus, 
.our-vision .fa-minus {
  position: absolute;
  top: 60%;           
  left: 15px;            
  transform: translateY(-50%);
  cursor: pointer;
  font-size: 1.2rem;
  color: var(--white-1); opacity: .8; z-index: 99;
}

.our-vision h3, .our-vision h4 {
    font-family: var(--font-family-1);
    font-size: var(--fontsize-maelezo-1);
    font-weight: 500;
    padding-left: 50px;    /* add space inside instead of shifting */
    box-sizing: border-box; /* ensures padding doesn't increase width */
    max-width: 100%;       /* prevents overflow */
    overflow-wrap: break-word; /* helps long words wrap */
    color: var(--white-1);
    line-height: 1.4rem;margin: 3px auto;
}

.our-vision h4 {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.5s ease, opacity 0.3s ease;
  margin-top: 0;
  font-weight: 300;
  padding-left: 60px; 
  font-style: italic; /* added */
}

.our-vision h4.show {
  max-height: 1000px; /* large enough to show content */
  opacity: 1;
  margin-top: 15px; /* restore spacing */
}


/*
.kiswahili {
    background: linear-gradient(rgba(6, 56, 193, 0.75), rgba(104, 4, 4, 0.75)), url(../img/img-8.jpg) center center no-repeat;
    background-size: cover; border: unset;
}*/

.kiswahili .fa-plus, 
.kiswahili .fa-minus {
  top: 50%; color: var(--white-1); font-style: italic; 
  left:14px        
}

.kiswahili h3, .kiswahili h4{color: var(--white-1);font-style: italic;}





.service-item-img-container{position: relative;}
.service-item-icon-container{
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--white-1);
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 100%; 
    padding: 5px;   
    transform: translate(-50%, -50%); 
    border: .5px solid rgb(241, 242, 241); width: 100px; height: 100px; overflow: hidden;
}
.service-item-icon-container i {
   
    width: 100%;
    height: 100%;
    line-height: 1;           /* keep vertical alignment correct */
    display: flex;
    align-items: center;
    justify-content: center;
}



.carousel{
    height: 100%; 
    padding: 1px; 
    background: white;
}


.carousel-inner {
  height: 100%; 
}


.carousel-item {
  padding: 1px;
  height: 100%;
  box-sizing: border-box; 
  overflow: hidden; 
  background: rgb(255, 255, 255);
}
.carousel-item img {
  height: 100%;
  width: 100%;
  object-fit: cover; /* fills while keeping aspect ratio */
  
}



.btn-1 {
    background: var(--pupple);
    font-family: var(--font-family-1);
    font-size: var(--fontsize-maelezo-1);
    transition: .5s;
    color: var(--white-1);
    padding: 5px 10px;
    position: absolute; top: 100%; left: 50%;transform: translate(-50%, -50%); 
    transition: background 0.5s ease, color 0.5s ease;
}
.btn-1:hover {
    background: var(--orange);
    color: var(--pupple);
}

.btn-2 {
    background: var(--pupple);
    font-family: var(--font-family-1);
    font-size: var(--fontsize-maelezo-1);
    transition: background 0.5s ease, color 0.5s ease;
    color: var(--white-1);
    padding: 15px;
    display: flex;                  /* flex for centering inside */
    align-items: center;             /* center vertically */
    justify-content: center;         /* center horizontally */
    min-height: 50px !important;
    width: fit-content;              /* shrink to text width */
    margin: 0 auto;                  /* center button itself */
    text-align: center;
}


.btn-2:hover {
    background: var(--orange);
    color: var(--pupple);
}






.btn-common, .btn-common-1 {
    font-family: var(--font-family-1);
    font-size: var(--fontsize-S);
    font-weight: 400;
    transition: .3s;
    padding: 15px 20px;
    color: #FFFFFF;
    background: var(--pupple);
    border-radius: 0 !important;
    min-width: 20%;
    
}

.btn-common-1 {background: var(--orange);}

.btn-common:hover, .btn-common-1:hover {
   background: var(--green);
   color: var(--pupple);
}




.btn {
    font-family: var(--font-family-1);
    font-size: var(--fontsize-maelezo-1);
    font-weight: 400;
    transition: .5s;padding: 8px !important;
}

.btn-primary,
.btn-secondary {
    color: #FFFFFF;
    border-radius: 0;font-size: var(--fontsize-S); display: flex; align-items: center; justify-content: center; padding: 0; margin: 0;
   
}

.btn-primary:hover {
    background: var(--secondary);
    border-color: var(--secondary);
}

.btn-secondary:hover {
    background: var(--primary);
    border-color: var(--primary);
}

.btn-square {
    width: 34px;
    height: 34px;
}

.btn-sm-square {
    width: 28px;
    height: 28px;
}

.btn-lg-square {
    width: 46px;
    height: 46px;
}

.btn-square,
.btn-sm-square,
.btn-lg-square {
    padding-left: 0;
    padding-right: 0;
    text-align: center;
}

.btn-social-media {
    padding: 1px;
    width: 36px;
    height: 36px;
    border:1px solid var(--pupple);
    color: var(--pupple);
    background: rgb(255, 255, 255, .5);
    border-radius: 0;
    font-size: 1.1rem; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    text-align: center; 
    transition: all .3s; 
}
.btn-social-media:hover {
    border: none;
    color: white; 
    background: var(--orange);
    transform: translateY(-5px);
}






#success-msg{
    display:none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 15px 25px;
    background-color: #4CAF50;
    color: white;
    border-radius: 8px;
    font-size: 16px;
    z-index: 9999;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
    width: 20%;

}











#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease-out, visibility 0s linear .5s;
    z-index: 99999;
}

#spinner.show {
    transition: opacity .5s ease-out, visibility 0s linear 0s;
    visibility: visible;
    opacity: 1;
}

.back-to-top {
    position: fixed;
    display: none;
    width: 30px; 
    height: 40px; 
    right: 45px;
    bottom: 45px;
    z-index: 99;
    animation: action 1s infinite alternate;
}

.back-to-top i{ font-size: 1.2rem; margin: 0; padding: 0;   line-height: 2;}

@keyframes action {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-20px);
  }
}






.navbar-light .navbar-nav .nav-link {
    font-family: var(--font-family-1);
    padding: 4px 15px;
    font-size: var(--fontsize-maelezo-1);
    color: var(--pupple);
    outline: none;
    transition: padding 0.5s ease, color 0.5s ease; /* smooth padding/color change */
}

.navbar-light {
    margin: 4px 10px;;
    padding: 10px  25px;
    background: white;
    box-shadow: 
    8px 8px 15px rgba(0, 0, 0, 0.6),     /* stronger, darker bottom-right shadow */
    -8px -8px 15px rgba(150, 150, 150, 0.4); /* noticeable gray top-left highlight */
    transition: margin 0.5s ease, background 0.5s ease, box-shadow 0.5s ease;
    border-top: 2px ridge rgb(8, 160, 190);
}

.navbar-light.is-stuck { margin: 0;}


/*
.sticky-top.navbar-light {
    margin: 2px 0px;
}

.sticky-top.navbar-light .navbar-nav .nav-link {
    padding: 15px 12px;
}

@media (max-width: 991.98px) {
    .navbar-light .navbar-nav .nav-link,
    .sticky-top.navbar-light .navbar-nav .nav-link {
        padding: 10px 0;
    }
}

*/

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active {
    color: var(--green);
}


.carousel-caption {
    position: absolute; /* needed for top/left/right/bottom to work */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 5px;
    background: rgba(9, 30, 62, .5);
    z-index: 1;

    display: flex;                /* enable flexbox */
    align-items: center;          /* vertical centering */
    justify-content: center;      /* horizontal centering */
    text-align: center;           /* center text inside */
}

.carousel-caption h5 {
    font-size: 1.5rem; /* default desktop */
}

.carousel-caption h1 {
    font-size: 3rem; /* default desktop */
}




@media (max-width: 576px) {
    .carousel-caption h5 {
        font-size: 14px;
        font-weight: 500 !important;
    }

    .carousel-caption h1 {
        font-size: 30px;
        font-weight: 600 !important;
    }
}

@media (max-width: 490px) {
    .navbar-brand {
    flex-direction: column;
    text-align: center;
    padding: 2px;
 }
    .navbar-brand h1 {
    display: none;
 }
   
   .navbar-light {
     padding: 10px  10px;
    }

}

.carousel-control-prev,
.carousel-control-next {
    width: 10%;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 3rem;
    height: 3rem;
}

@media (min-width: 991.98px) {
    .banner {
        position: relative;
        margin-top: -90px;
        z-index: 1;
    }
}



@media (min-width: 1080px){
    .navbar-expand-lg{flex-wrap:nowrap;justify-content:flex-start}
    .navbar-expand-lg .navbar-nav{flex-direction:row}
    .navbar-expand-lg .navbar-nav .dropdown-menu{position:absolute}
    .navbar-expand-lg .navbar-nav .nav-link{padding-right:.5rem;padding-left:.5rem}
    .navbar-expand-lg .navbar-nav-scroll{overflow:visible}
    .navbar-expand-lg .navbar-collapse{display:flex !important;flex-basis:auto}
    .navbar-expand-lg .navbar-toggler{display:none}


}


.top-contact-media-incolapse{display: none; border-top: .25px solid; border-bottom: .25px solid;}

@media (max-width: 1079.98px){
    .navbar-collapse{margin-top: 30px; margin-bottom: 20px; border-top: .5px solid var(--pupple);}

    .btn-search{margin:10px 10px;}
    .top-donate-btn{margin: 0px 10px; margin-bottom: 10px; padding: 15px !important;}
    .top-contact-media-incolapse{display: block;}

}



.dropdown-menu{padding-left: 15px;}
.dropdown-item {color: var(--orange); font-family: var(--font-family-1); font-size: var(--fontsize-maelezo-1); font-weight: 300;}


.section-title h5::before {
    position: absolute;
    content: "";
    width: 45px;
    height: 3px;
    right: 50px;
    bottom: -5px;
    background: var(--primary);
}

.section-title h5::after {
    position: absolute;
    content: "";
    width: 25px;
    height: 3px;
    right: -5px;
    bottom: -5px;
    background: var(--secondary);
}

.twentytwenty-wrapper {
    height: 100%;
}

.hero-header {
    background: linear-gradient(rgba(9, 30, 62, .85), rgba(9, 30, 62, .80)), url(../img/ecotourism.jpg) center center no-repeat;
    background-size: cover;
    margin: 0 auto;
    padding: 50px 0;
}

.hero-header-column{text-align: center;}
.hero-header-column h1, .hero-header-column h2, .hero-header-column h3, .hero-header-column p {color: white; font-family: var(--font-family-1);}
.hero-header-column h1, .hero-header-column p {
    font-size: clamp(var(--fontsize-maelezo-small), 1vw + 0.1rem, var(--fontsize-M));
    color: var(--orange);
}
.hero-header-column h2{font-size: clamp(var(--fontsize-M), 1.2vw + 0.2rem, var(--fontsize-larger)); margin: 5px;}
.hero-header-column h3{font-size: var(--fontsize-maelezo-1);}


.contact-column {
    background: white; 
    height: 100%; 
    padding: 5px; 
    border: .5px solid var(--gray-1);
    display: flex;
    flex-direction: column;
    height: 100%; /* Make it stretch within its container */
}
.contact-column form {
    display: flex;
    flex-direction: column;
    flex: 1; /* Let the form grow to fill */
}

.contact-column .row.g-2 {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.contact-name-place, .contact-email-place, .contact-subject-place, .contact-text-place, .contact-phone-place, .contact-company-place, .contact-occupation-place {
    border: .25px solid var(--pupple); 
    background: rgb(200, 217, 223); 
    border-radius: 0;
    font-family: var(--font-family-1);
    font-size: var(--fontsize-maelezo-1);
    color: var(--pupple);
}
.contact-name-place, .contact-email-place, .contact-subject-place, .contact-phone-place, .contact-company-place, .contact-occupation-place{
    height: 50px;
}

.contact-column iframe{
    position: relative; 
    width: 100%; height: 100%;
     border: .5px solid var(--pupple) !important;
    box-sizing: border-box; /* ensures border doesn't overflow */
}




.bg-appointment {
    background: linear-gradient(rgba(9, 30, 62, .85), rgba(9, 30, 62, .5)), url(../img/carousel-11.jpg) center center no-repeat;
    background-size: cover;
}




.appointment-form {
    background: rgba(6, 163, 218, .7);
}

.team-row .col-lg-3{
    border: 1px solid var(--blue-1); 
    padding: 1.5px ;
    
 
}

.team-intro-box {
    border: 1px solid var(--blue-1); 
    padding: 1.5px ;
      height: 100%;
  display: flex;
  flex-direction: column; /* so content stacks */
  justify-content: center; /* optional — centers vertically */
}





.team-item {
    border:10px ridge var(--blue-1);
    height: 400px;
    display: flex;
    flex-direction: column;
    position: relative;
}
.team-image-box {
    position: relative;
    z-index: 1;
    background: var(--primary);
    padding: .5px;
    height: 80%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.team-image-box img {
    width: 100%;
    height: 100%; 
    object-fit: cover; 
    transition: transform 0.4s ease;
}

.team-text-box {
    position: relative;
    height: 20%;
    text-align: center;
    padding: 4px;
    background: white;
    transition:  0.4s ease;
    display: flex; flex-direction: column; align-items:center ; justify-content: center;
}
.team-text-box h1{font-size: var(--fontsize-title-4); font-weight: 600; font-family: var(--font-family-1); color: var(--dark); border-bottom: 1px solid; padding-bottom: 3px; width: 90%;}
.team-text-box h2{font-size: var(--fontsize-maelezo-1); font-weight: 400; font-family: var(--font-family-1); color: var(--blue-1);}

.team-item:hover .team-image-box img {
    transform: scale(1.2); /* Zoom out */
}

.team-item:hover .team-text-box{
    height: 30%; background: var(--primary);
}

.team-item:hover .team-text-box h1{color: white;}
.team-item:hover .team-text-box h2{color: var(--black-1);}



.team-item-social {
    opacity: 0.0; 
    position: absolute; 
    top: 25%; left: 50%;  
    transform: translate(-50%, -80%);
    padding: 3px; 
    display: flex;
    background: var(--white-1);
    z-index: 5; 
    overflow: visible;
    transition: top 0.5s ease, opacity 0.5s ease; /* smooth fall + fade */
    flex-wrap: wrap;  gap: 2px;             /* allow wrapping */
    align-items: center; justify-content: center;
    width: 85%;
}

.team-item:hover .team-item-social {
    opacity: 1;
    top: 70%; 
}


.social-media-item {
    opacity: 0.0;
    pointer-events: none;   /* Prevent clicks when hidden */
    transform: translateY(-20px); /* start a bit above */
    transition: transform 0.4s ease, opacity 0.4s ease;
}

.team-item:hover .social-media-item {
   opacity: 1;
   transform: translateY(0);
    pointer-events: auto;   /* Enable interaction on hover */
    
}

/* Delay each one for staggered fall */
.social-media-item:nth-child(1) { transition-delay: 0.2s; }
.social-media-item:nth-child(2) { transition-delay: 0.3s; }
.social-media-item:nth-child(3) { transition-delay: 0.4s; }
.social-media-item:nth-child(4) { transition-delay: 0.5s; }
.social-media-item:nth-child(5) { transition-delay: 0.6s; }
.social-media-item:nth-child(6) { transition-delay: 0.7s; }
.social-media-item:nth-child(7) { transition-delay: 0.8s; }
.social-media-item:nth-child(8) { transition-delay: 0.9s; }













.project-item{
  display:flex;
  flex-direction:column;
  min-height:320px;                 /* give the card some height */
  padding:4px;
  background:rgb(74, 95, 91);
  border:.5px dotted var(--gray-1);
  box-sizing:border-box;
}

.project-image-box{ 
    flex:0 0 auto; 
    overflow:hidden;
}
.project-image-box img{ 
    width:100%; 
    height:auto; display:block;  
    transition: .5s; 
}
.project-item-text{
  flex:1;                   /* fills remaining vertical space */
  background:rgb(255, 255, 255);
  text-align:center;
  padding:10px 2px;
  box-sizing:border-box;
}


.project-item-text h1 {
   font-family: var(--font-family-1);
   font-size: var(--fontsize-M);
   color: var(--black-1);
   border-bottom: .5px solid;
   padding: 4px;
}
.project-item-text p {
   font-family: var(--font-family-1);
   font-size: var(--fontsize-maelezo-1);
   color: var(--black-1);
   border-bottom: .5px solid;
   padding: 4px;
}

.project-item h1 {
    transition: .5s;
}
.project-item :hover img {
    transform: scale(1.2);
}





.service-carousel{
    height: 100%;
    display: flex;
    flex-direction: column;
    border: .25px solid var(--blue-1);
    background: var(--white-1);
    padding: 1.5px;
   
}



.service-carousel .owl-nav {
    position: absolute;
    width: 100%;
    height: 45px;
    top: calc(50% - 150px);
    left: 0px;
    display: flex;
    justify-content: space-between;
    opacity: 0;
    transition: .5s;
}

.service-carousel:hover .owl-nav {
    opacity: 1;
}

.service-carousel .owl-nav .owl-prev,
.service-carousel .owl-nav .owl-next {
    position: relative;
    width: 45px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    background: var(--blue-1);
    border-radius: 1px;
    font-size: 22px;
    transition: .5s;
}

.service-carousel .owl-nav .owl-next {
    right: 0;
    box-sizing: border-box;
}

.service-carousel .owl-nav .owl-prev:hover,
.service-carousel .owl-nav .owl-next:hover {
    background: var(--orange);
}




.testimonial-carousel {
    background: var(--blue-1);
    padding: 40px;
    display: flex; 
    align-items: stretch; /* Make children fill height */
    justify-content: center;
}

.testimonial-item {
    flex: 1; /* Take up equal width if multiple */
    height: 100%; /* Fill parent's height */
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    text-align: center; 
    border: .0px solid var(--gray-1);
    padding: 3px;
    position: relative;
    
}





.testimonial-item p{font-family: var(--font-family-1); color: white; font-size: var(--fontsize-maelezo-1); font-weight: 400;font-style: italic;}
.testimonial-item h4{font-family: var(--font-family-1); color: white; font-size: var(--fontsize-S); font-weight: 400;}
.testimonial-item hr{ color: white; }


.testimonial-carousel .owl-nav {
    position: absolute;
    width: calc(100% + 40px);
    height: 40px;
    top: calc(30% - 10px);
    display: flex;
    justify-content: space-between;
    z-index: 1;
}

.testimonial-carousel .owl-nav .owl-prev,
.testimonial-carousel .owl-nav .owl-next {
    position: relative;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    background: var(--pupple);
    opacity: .5;
    border-radius: 0%;
    font-size: 24px;
    transition: .5s;
}

.testimonial-carousel .owl-nav .owl-prev{left: 20px;}
.testimonial-carousel .owl-nav .owl-next{right: 140px;}

.testimonial-carousel .owl-nav .owl-prev:hover,
.testimonial-carousel .owl-nav .owl-next:hover {
    background: var(--orange);
    opacity: 1;
}

.testimonial-carousel .owl-item img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    margin: 8px;
}

/* Quotes*/
.testimonial-item::before,
.testimonial-item::after {
    content: '“';
    font-size: 3rem;
    color: var(--white-1);
    position: absolute;
    font-family: var(--font-family-1);
}

.testimonial-item::before {
    top: 35%;
    left: 5px;
}

.testimonial-item::after {
    content: '”';
    bottom: 5%;
    right: 20px;
}






.navbar-toggler{
  width:43px; height:43px; 
  padding:0; 
  margin:0;
  border-radius:0;
  border: 1px solid var(--pupple) !important; 
  display:flex;  
  align-items:center; 
  justify-content:center;
}
/* Base icon styles */
.icon-burger, .icon-close{
  width:1.3em; height:1.3em;
  background-repeat:no-repeat;
  background-position:center;
  background-size:100%;
  display:inline-block;
}

/* Hamburger (closed state) */
.icon-burger{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280,0,0,0.7%29' stroke-linecap='round' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
/* X (open state) */
.icon-close{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280,0,0,0.7%29' stroke-linecap='round' stroke-width='2' d='M7 7L23 23M23 7L7 23'/%3e%3c/svg%3e");
}

/* Show burger when collapsed (menu closed), show X when expanded */
.navbar-toggler.collapsed .icon-burger { display:inline-block; }
.navbar-toggler.collapsed .icon-close  { display:none; }

.navbar-toggler:not(.collapsed) .icon-burger { display:none; }
.navbar-toggler:not(.collapsed) .icon-close  { display:inline-block; }

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








.header-carousel {
    border: 0px dotted var(--green); 
    padding: 1px; 
    height: 100%;
    display: flex;
    align-items: center;      
    justify-content: center; 
    text-align: center;
    overflow: hidden; /* hide any overflow */      
}


.header-carousel .owl-stage-outer {
    height: 100%; 
    width: 100%;
}
.header-carousel .owl-stage-outer,
.header-carousel .owl-stage,
.header-carousel .owl-item {
    height: 100%; 
    width: 100%;
}

.header-carousel .owl-item img {
    display: block;          /* removes inline-block whitespace */
    width: 100%;
    height: 100%;
    object-fit: cover;       /* fills without stretching */
}



.price-carousel .owl-nav,
.header-carousel .owl-nav {
    position: absolute;
    top: 50%;
    left: 5%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column; /* stack up and down */
    align-items: center;
    gap: 20px; /* space between up & down buttons */
    z-index: 1;
}

.price-carousel .owl-nav .owl-prev,
.price-carousel .owl-nav .owl-next, 
.header-carousel .owl-nav .owl-prev,
.header-carousel .owl-nav .owl-next {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    background: var(--pupple);
    border-radius: 0px;
    font-size: 30px;
    opacity: .5;
    transition: .3s; 
}

.price-carousel .owl-nav .owl-prev:hover,
.price-carousel .owl-nav .owl-next:hover,
.header-carousel .owl-nav .owl-prev:hover,
.header-carousel .owl-nav .owl-next:hover {
    opacity: 1;
}

.input-group{
    border: 2px ridge;
    display: flex;
    align-items: stretch; 
}

.email-place{
    padding: 3px 5px; 
    flex: 1; /* fill remaining space */
    min-width: 0; /* prevents overflow issues */
    background: rgb(248, 218, 158);
    border: none;
    font-size: var(--fontsize-maelezo-1);        
    font-family: var(--font-family-1); 
    color: var(--pupple);
}

.input-group .email-place:focus {
    outline: none;        /* removes the blue glow */
    border: none;         /* removes border */
    border-radius: 0;     /* removes rounded corners */
    background: white;
}


.footer-brand-box {
    display: flex;
    align-items: center;       /* vertical center */
    background: rgb(255, 255, 255);
    gap: 8px;
    padding: 3px  10px;
    margin-bottom: 10px;
}
.footer-brand-box img {
    width: 60px; 
    height: 60px;
}
.footer-brand-box h1 {
    font-size: clamp(var(--fontsize-maelezo-1), 2vw + 0.2rem, var(--fontsize-M)); 
    margin: 0;
    color: var(--pupple);
    font-family: var(--font-family-1);
}
.footer-brand-box span {
   color: var(--green);
}


.copyright-container{
    background: var(--dark); 
    font-family: var(--font-family-1);
}






/* Popup styles */
.popup {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 999999; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  background-color: rgba(0, 0, 0, 0.6); /* Black with opacity */
}
.popup-content {
  position: relative;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 40px;
  background-color: var(--color-white-1); /* White background */
  border-radius: 5px;
  text-align: center;
  width: 300px; /* Width of the popup */
  color: var(--color-teal-1);
}








/*
.btn-play-1 {
  position: absolute;
  top: 50%;           
  left: 15px;
  box-sizing: content-box;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  border: .2px solid var(--orange);
  outline: none !important;
  margin: 0;
}
*/


.btn-play-1:before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 59.5%;           
  left: 22.8px;
  display: block;
  width: 25px;
  height: 25px;
  background: rgb(208, 189, 189);
  border-radius: 100%;
  animation: pulse-border 4000ms ease-out infinite;
}
.btn-play-1.swahili:before {
  top: 50%;           
}

.swahili.btn-play-1::before {animation-delay: 0.1s;}
.vision.btn-play-1::before {animation-delay: 0.3s;}
.mission.btn-play-1::before {animation-delay: 0.5s;}
.objectives.btn-play-1::before {animation-delay: 0.7s;}
.core-values.btn-play-1::before {animation-delay: 0.9s;}

@keyframes pulse-border {
  0% {
    transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateX(-50%) translateY(-50%) translateZ(0) scale(2);
    opacity: 0;
  }
}




.container-project-2 {
    border: .5px solid var(--gray-1); padding: 4px; height: 100%; width: 100%; position: relative; justify-content: center;
    background: url("../img/ecotourism.jpg") center center no-repeat;
    background-size: cover;
    background-color: rgba(255, 255, 255, 0.85);
    background-blend-mode: overlay;
}

.project-item-column {border: .5px solid var(--gray-1); padding: 4px; position: relative;}

.question-text {
    background: var(--blue-1);
    padding: 8%;
    text-align: center;
    color: white;
}
.question-text h1 {
    font-size: var(--fontsize-large);
    font-family: var(--font-family-1);
    color: white;
}

.question-text p {
    font-size: var(--fontsize-maelezo-1);
    font-family: var(--font-family-1);
}