body {
     font-family: 'Inter', sans-serif;
     margin: 0px;
     padding: 0px;
 }

 .navbar{
     width: 100%  !important;
 }
 
 .hero-carousel {
    height: 80vh;
    overflow: hidden;
}

/* Carousel responsive styles */
@media (max-width: 1200px) {
    .hero-carousel {
        height: 70vh;
    }
}

@media (max-width: 992px) {
    .hero-carousel {
        height: 60vh;
    }
    .carousel-caption h1 {
        font-size: 2.5rem;
    }
    .carousel-caption p {
        font-size: 1.1rem;
    }
}

@media (max-width: 768px) {
    .hero-carousel {
        height: 50vh;
    }
    .mb-6 {
        margin-bottom: 2rem;
    }
    .carousel-caption h1 {
        font-size: 2rem;
    }
    .carousel-caption p {
        font-size: 1rem;
    }
    .btn-lg {
        padding: 0.5rem 1.5rem;
        font-size: 0.95rem;
    }
}

@media (max-width: 576px) {
    .hero-carousel {
        height: 40vh;
    }
    .carousel-caption h1 {
        font-size: 1.75rem;
    }
    .carousel-caption p {
        font-size: 0.9rem;
    }
    .carousel-caption .d-flex {
        flex-direction: column;
        gap: 0.5rem;
    }
    .card-img-top {
        height: 200px;
    }
}

/* Additional responsive styles for all pages */
.navbar-brand img {
    max-height: 50px;
}

.container-fluid {
    padding-left: 15px;
    padding-right: 15px;
}

/* Make tables responsive */
.table-responsive {
    overflow-x: auto;
}

/* Make images responsive */
img {
    max-width: 100%;
    height: auto;
}

/* Responsive spacing */
@media (max-width: 768px) {
    .py-5 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
    
    .my-5 {
        margin-top: 2rem !important;
        margin-bottom: 2rem !important;
    }
    
    h1.display-4 {
        font-size: 2.5rem;
    }
    
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* Small devices */
@media (max-width: 576px) {
    .navbar-brand img {
        max-height: 40px;
    }
    
    h1.display-4 {
        font-size: 2rem;
    }
    
    .lead {
        font-size: 1rem;
    }
    
    .py-5 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }
}

 .hero {
     background: url('#') center/cover no-repeat;
     color: white;
     min-height: 90vh;
     display: flex;
     align-items: center;
     text-align: center;
     position: relative;
 }

 .hero::before {
     content: "";
     position: absolute;
     inset: 0;
     background: rgba(0, 0, 0, 0.5);
 }

 .hero-content {
     position: relative;
     z-index: 2;
 }

 .cta-section {
     background: url('assets/water-bg.jpg') center/cover no-repeat;
     position: relative;
     color: white;
     text-align: center;
     padding: 80px 20px;
 }

 .cta-section::before {
     content: "";
     position: absolute;
     inset: 0;
     background: rgba(0, 119, 182, 0.7);
 }

 .cta-section .content {
     position: relative;
     z-index: 2;
 }

 .mb-6 {
     margin-bottom: 100px;
 }

 .hero-carousel {
     height: 600px;
 }


 .hero-carousel img {
     object-fit: cover; /* crop image instead of stretching */
     height: 100%;
     width: 100%;
 }

.text-primary{
  color: #03a7c8 !important;
}

.card-img-top {
  height: 200px;       /* fixed height */
  object-fit: cover;   /* crops image without stretching */
}

/* Responsive Styles */
@media (max-width: 1200px) {
  .hero-carousel {
    height: 500px;
  }
  
  .mb-6 {
    margin-bottom: 70px;
  }
}

@media (max-width: 992px) {
  .hero-carousel {
    height: 450px;
  }
  
  .carousel-caption h1 {
    font-size: 2rem;
  }
  
  .mb-6 {
    margin-bottom: 50px;
  }
}

@media (max-width: 768px) {
  .hero-carousel {
    height: 400px;
  }
  
  .carousel-caption h1 {
    font-size: 1.75rem;
  }
  
  .carousel-caption p {
    font-size: 0.9rem;
  }
  
  .btn-lg {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
  }
  
  .mb-6 {
    margin-bottom: 30px;
  }
  
  .card-img-top {
    height: 180px;
  }
}

@media (max-width: 576px) {
  .hero-carousel {
    height: 350px;
  }
  
  .carousel-caption h1 {
    font-size: 1.5rem;
  }
  
  .carousel-caption p {
    font-size: 0.8rem;
  }
  
  .btn-lg {
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem;
  }
  
  .mb-6 {
    margin-bottom: 20px;
  }
  
  .card-img-top {
    height: 160px;
  }
  
  .carousel-caption .d-flex {
    flex-direction: column;
    gap: 0.5rem !important;
  }
}

.btn-primary{
    background-color: #01486e;
    color: #fff;
}
 
.btn-secondary{
      border-color: #00b4d8;       /* border same as brand */
      color: #fff;    
}

btn-show{
    border-color: #00B4D8;
}

.btn-partner {
  border-color: #0299b8;       /* border same as brand */
  color: #fff;                 /* text color */
}

.btn-partner:hover {
  background-color: #019ebe;   /* brand blue */
  color: #fff;                 /* text stays white */
  border-color: #019dbd;       /* match border */
}

.bht-partner.active{
    color: #0076b5;      
}

.offcanvas{
  width: 300px;
}



/* Default link color */
.offcanvas-body .nav-link {
  color: #004a72 !important;  /* deep water blue */
  font-weight: 500;
  transition: color 0.3s ease;
}

/* Hover/active state */
.offcanvas-body .nav-link:hover,
.offcanvas-body .nav-link:focus {
  color: #03a2c2 !important;   /* aqua blue */
}

/* Optional: Active page highlight */
.offcanvas-body .nav-link.active {
  color: #0396b3 !important;
  font-weight: 600;
}

  .carousel-control-prev {
    left: 0px; /* adjust as needed */
  }
  .carousel-control-next {
    right: 0px; /* optional, for symmetry */
  }


.bg-footer{
    background-color: rgb(71, 109, 125);

}


 /* Hero banner for About page */
.hero-about {
  height: 90vh;
  background: url("../assets/our-purpose-bg-image.png") no-repeat center center/cover;
  text-shadow: 0 2px 6px rgba(0,0,0,0.5);
}

/* Hero banner for Services page */
.hero-services {
  height: 90vh;
  background: url("../assets/services.jpg") no-repeat center center/cover;
  text-shadow: 0 2px 6px rgba(0,0,0,0.5);
}

/* Hero banner for Industries page */
.hero-industries {
  height: 90vh;
  background: url("../assets/indutry-bg.jpeg") no-repeat center center/cover;
  text-shadow: 0 2px 6px rgba(0,0,0,0.5);
}

/* Industry Cards */
.industry-card {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}

.industry-card img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.industry-card:hover img {
  transform: scale(1.1);
}

.industry-card .overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 1.25rem;
  transition: background 0.3s ease;
}

.industry-card:hover .overlay {
  background: rgba(0, 0, 0, 0.6);
}

/* Hero banner */
.hero-approach {
  height: 80vh;
  background: url("../assets/approach-bg.webp") no-repeat center center/cover;
  text-shadow: 0 2px 6px rgba(0,0,0,0.5);
}

/* Stepper Circles */
.step-circle {
  width: 70px;
  height: 70px;
  margin: 0 auto;
  background: #0077B6;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: bold;
  transition: transform 0.3s ease, background 0.3s ease;
}

.step-circle:hover {
  transform: scale(1.1);
  background: #00B4D8;
}

h5 {
  font-family: 'Poppins', sans-serif;
}



/* Hero banner for Contact page */
 .hero-contact {
  height: 80vh;
  background: url("../assets/contact-bg-water.jpg") no-repeat center center/cover;
  text-shadow: 0 2px 6px rgba(0,0,0,0.5);
}

.lead-color{
  background:  #00b4d8;
}


.fs-s{
  font-size: x-small;
}




 /* ----- */
 /* .cta-section {
    position: relative;
    background: url('assets/water-bg.jpg') no-repeat center center/cover;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .cta-section .overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to right, rgba(0, 119, 182, 0.8), rgba(0, 180, 216, 0.7));
    z-index: 1;
  }

  .cta-section .container {
    position: relative;
    z-index: 2;
  } */


 /* .hover-shadow:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
  } */

  /* Primary: #0077B6 (deep blue water) 
   Secondary: #00B4D8 (aqua blue) 
    Accent: #90E0EF (light aqua) 
     Neutral: dark gray for text, white background */