/* ========== FIX 1: NAVBAR OFFSET ========== */
   /* Add this if your navbar is fixed/sticky */
   body {
       padding-top: 76px;
       /* Adjust based on your navbar height */
   }

   /* Alternative: Add margin-top directly to banner container */
   /* Use this if you can't modify body padding */

   /* ========== BANNER CSS - IMPROVED VERSION ========== */

   /* Reset & Base Styles */
   html,
   body {
       height: 100%;
       margin: 0;
       padding: 0;
       overflow-x: hidden;
   }

   /* Main Container - Fixed for navbar overlap */
   .hero-banner-container {
       width: 100%;
       position: relative;
       /* If body padding-top doesn't work, uncomment below */
       margin-top: 130px;
   }

   /* Hero Slider */
   #heroSlider {
       height: 100%;
       width: 100%;
   }

   /* Carousel Inner */
   .carousel-inner {
       height: 100%;
       width: 100%;
   }

   /* Carousel Items */
   .carousel-item {
       height: 100%;
       width: 100%;
       transition: transform 1.2s ease-in-out;
   }

   /* Slide Height - Main Banner Height */
   .slide-height {
       height: 85vh !important;
       min-height: 550px !important;
       width: 100%;
       position: relative;
       overflow: hidden;
   }

   /* Banner Images */
   .slide-height img {
       width: 100% !important;
       height: 100% !important;
       object-fit: cover !important;
       object-position: center !important;
       display: block;
   }

   /* Gradient Overlay - Better than dark overlay */
   .overlay-gradient {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       /*background: linear-gradient(*/
       /*    to bottom,*/
       /*    rgba(0, 0, 0, 0.2) 0%,*/
       /*    rgba(0, 0, 0, 0.4) 50%,*/
       /*    rgba(0, 0, 0, 0.6) 100%*/
       /*);*/
       z-index: 1;
       pointer-events: none;
   }

   /* Carousel Caption Styling - IMPROVED */
   .carousel-caption {
       z-index: 2;
       bottom: 20%;
       left: 0;
       right: 0;
       text-align: center;
       padding: 2rem;
       background: transparent;
       animation: slideUp 0.8s ease-out;
   }

   @keyframes slideUp {
       from {
           opacity: 0;
           transform: translateY(30px);
       }

       to {
           opacity: 1;
           transform: translateY(0);
       }
   }

   .carousel-caption h1 {
       font-weight: 800;
       margin-bottom: 1rem;
       font-size: 3.5rem;
       letter-spacing: -0.5px;
       text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.5);
   }

   .carousel-caption p {
       font-size: 1.3rem;
       margin-bottom: 1.8rem;
       text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
   }

   /* CTA Button Styling */
   .btn-banner {
       display: inline-block;
       padding: 12px 30px;
       background: #4CAF50;
       color: white;
       text-decoration: none;
       border-radius: 50px;
       font-weight: 600;
       transition: all 0.3s ease;
       border: 2px solid #4CAF50;
   }

   .btn-banner:hover {
       background: transparent;
       color: white;
       border-color: white;
       transform: translateY(-3px);
       box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
   }

   /* Carousel Indicators - IMPROVED */
   .carousel-indicators {
       z-index: 3;
       margin-bottom: 2rem;
       gap: 10px;
   }

   .carousel-indicators button {
       width: 12px;
       height: 12px;
       border-radius: 50%;
       margin: 0;
       background-color: rgba(255, 255, 255, 0.5);
       transition: all 0.3s ease;
   }

   .carousel-indicators button.active {
       background-color: #4CAF50;
       transform: scale(1.2);
       width: 14px;
       height: 14px;
   }

   /* Carousel Controls - IMPROVED & RE-ENABLED */
   .carousel-control-prev,
   .carousel-control-next {
       z-index: 3;
       width: 8%;
       opacity: 0;
       transition: opacity 0.3s ease;
   }

   #heroSlider:hover .carousel-control-prev,
   #heroSlider:hover .carousel-control-next {
       opacity: 1;
   }

   .carousel-control-prev-icon,
   .carousel-control-next-icon {
       background-color: rgba(0, 0, 0, 0.5);
       border-radius: 50%;
       padding: 25px;
       background-size: 50%;
       transition: all 0.3s ease;
   }

   .carousel-control-prev-icon:hover,
   .carousel-control-next-icon:hover {
       background-color: #4CAF50;
       transform: scale(1.1);
   }

   /* ========== RESPONSIVE DESIGN ========== */

   /* Tablet (991px and below) */
   @media (max-width: 991.98px) {
       body {
           padding-top: 70px;
       }

       .slide-height {
           height: 70vh !important;
           min-height: 500px !important;
       }

       .carousel-caption h1 {
           font-size: 2.5rem;
       }

       .carousel-caption p {
           font-size: 1.1rem;
       }

       .btn-banner {
           padding: 10px 25px;
           font-size: 0.9rem;
       }
   }

   /* Mobile Landscape (767px and below) */
   @media (max-width: 767.98px) {
       body {
           padding-top: 65px;
       }

       .slide-height {
           height: 60vh !important;
           min-height: 450px !important;
       }

       .carousel-caption {
           bottom: 15%;
           padding: 1rem;
       }

       .carousel-caption h1 {
           font-size: 2rem;
       }

       .carousel-caption p {
           font-size: 1rem;
           margin-bottom: 1.2rem;
       }

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

   /* Mobile Portrait (575px and below) */
   @media (max-width: 575.98px) {
       body {
           padding-top: 60px;
       }

       .slide-height {
           height: 50vh !important;
           min-height: 400px !important;
       }

       .carousel-caption h1 {
           font-size: 1.5rem;
       }

       .carousel-caption p {
           font-size: 0.85rem;
       }

       .btn-banner {
           padding: 8px 20px;
           font-size: 0.8rem;
       }

       /* Keep controls but make them smaller */
       .carousel-control-prev-icon,
       .carousel-control-next-icon {
           padding: 15px;
           background-size: 40%;
       }

       .carousel-indicators button {
           width: 8px;
           height: 8px;
       }
   }

   /* Small Mobile (375px and below) */
   @media (max-width: 375px) {
       .slide-height {
           height: 45vh !important;
           min-height: 350px !important;
       }

       .carousel-caption h1 {
           font-size: 1.25rem;
       }
   }

   /* Height Adjustment for Very Tall Screens */
   @media (min-height: 1000px) {
       .slide-height {
           height: 75vh !important;
           min-height: 700px !important;
       }
   }

   /* Animations */
   @keyframes fadeIn {
       from {
           opacity: 0;
           transform: scale(1.05);
       }

       to {
           opacity: 1;
           transform: scale(1);
       }
   }

   .carousel-item.active .slide-height img {
       animation: fadeIn 1.2s ease-in-out;
   }

   /* Loading Spinner (Optional) */
   .carousel-item {
       background-color: #f5f5f5;
   }



   .featurs-item {
       transition: all 0.3s ease;
       border: 1px solid rgba(0, 0, 0, 0.05);
   }

   .featurs-item:hover {
       transform: translateY(-8px);
       box-shadow: 0 20px 35px -10px rgba(0, 0, 0, 0.1);
       background-color: #ffffff !important;
   }

   .featurs-icon {
       transition: transform 0.3s ease, background-color 0.3s ease;
   }

   .featurs-item:hover .featurs-icon {
       transform: scale(1.05);
       background-color: #2d6a4f !important;
       /* darker green on hover */
   }

   .featurs-icon i {
       transition: transform 0.2s ease;
   }

   .featurs-item:hover .featurs-icon i {
       transform: scale(1.1);
   }

   .featurs-content h5 {
       transition: color 0.3s ease;
   }

   .featurs-item:hover .featurs-content h5 {
       color: #2d6a4f;
   }

   .about-img-wrapper {
       position: relative;
       overflow: hidden;
       border-radius: 1rem;
       box-shadow: 0 20px 35px -10px rgba(0, 0, 0, 0.1);
       transition: transform 0.3s ease;
   }

   .about-img-wrapper:hover {
       transform: translateY(-5px);
   }

   .about-img-wrapper img {
       width: 100%;
       height: 400px;
       /* Fixed height for consistency */
       object-fit: cover;
       /* Ensures image covers area without distortion */
       transition: transform 0.5s ease;
   }

   .about-img-wrapper:hover img {
       transform: scale(1.03);
   }

   .overlay-content {
       position: absolute;
       bottom: 0;
       left: 0;
       right: 0;
       background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
       color: white;
       padding: 2rem 1.5rem 1.5rem;
       text-align: center;
   }

   .overlay-content h3 {
       font-size: 1.75rem;
       font-weight: bold;
       margin-bottom: 0.5rem;
   }

   .overlay-content p {
       font-size: 1rem;
       margin-bottom: 0;
       opacity: 0.9;
   }

   .overlay-content .btn-overlay {
       margin-top: 1rem;
       background: rgba(255, 255, 255, 0.2);
       border: 1px solid white;
       color: white;
       border-radius: 50px;
       padding: 0.4rem 1.2rem;
       font-size: 0.85rem;
       transition: all 0.3s;
       display: inline-block;
       text-decoration: none;
   }

   .overlay-content .btn-overlay:hover {
       background: white;
       color: #000;
   }

   @media (max-width: 768px) {
       .about-img-wrapper img {
           height: 300px;
       }

       .overlay-content h3 {
           font-size: 1.3rem;
       }

       .overlay-content p {
           font-size: 0.85rem;
       }
   }

   @media (max-width: 576px) {
       .about-img-wrapper img {
           height: 250px;
       }
   }