.carousel-item {
      position: relative;
      width: 100%;
      aspect-ratio: 4 / 3;
      min-height: 50vh;
      max-height: 100vh;
    }
    .carousel-item img {
      object-fit: cover;
      width: 100%;
      min-height: 50vh;
      max-height: 100vh;
    }

    /* Gradient overlay for better text visibility */
    .carousel-item::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.6) 0%,
        rgba(0, 0, 0, 0.3) 50%,
        rgba(0, 0, 0, 0) 100%
      );
      z-index: 1;
    }

    /* Center text */
    .carousel-caption {
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      bottom: auto;
      z-index: 2; /* above gradient */
    }

    /* Letter animation */
    .animated-letter {
      display: inline-block;
      opacity: 0;
      transform: translateX(50px);
    }
    .animated-letter.show {
      opacity: 1;
      transform: translateX(0);
      transition: transform 0.4s ease, opacity 0.4s ease;
    }

    /* Responsive font sizes */
    .carousel-caption h2 {
      font-weight: bold;
      color: #fff;
      font-size: clamp(1.5rem, 5vw, 3rem);
      text-align: center;
    }

  /* Navbar */
  .navbar-custom {
    background: #FCFDEF !important;
    transition: all 0.4s ease;
    z-index: 1000;
  }
  .navbar-scrolled {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  }
  .navbar-brand, .nav-link {
    color: #0b0b0b !important;
    font-weight: 500;
  }
  .nav-link:hover {
    color: #B01F24 !important;
  }
  /* Default navbar link color */
.navbar .nav-link {
  transition: color 0.3s ease;
}

/* On scroll */
.navbar.navbar-scrolled .nav-link {
  color: black !important;
}

/* Optional: change brand/logo text */
.navbar.navbar-scrolled .navbar-brand {
  color: black !important;
}


  /* Hero section */
  .hero-section {
    background-color: #F78321;
    border-radius: 15px;
    overflow: hidden;
    margin: 2rem auto;
    max-width: 1200px;
    padding: 2rem;
  }
  .door-img {
    width: 100%;
    height: auto;
    border-radius: 10px;
  }
  /* .btn-custom {
    border: 1px solid white;
    border-radius: 25px;
    padding: 0.5rem 1.5rem;
    background-color: transparent;
    color: white;
  } */

  /* Image slider */
  .slider {
    /* width: 90%; */
    overflow: hidden;
    position: relative;
    margin: 2rem auto;
  }
  .slide-track {
    display: flex;
    width: calc(500px * 10);
    animation: scroll 60s linear infinite;
  }
  .slide-track:hover {
    animation-play-state: paused;
    cursor: pointer;
  }
  .slide {
    width: 250px;
    margin: 0 10px;
  }
  .slide {
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
  }
  .slider:hover .slide img {
    filter: grayscale(100%) blur(2px);
    opacity: 0.6;
  }
  .slider .slide:hover img {
    filter: none;
    opacity: 1;
  }

  @keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }
  .c-img:hover{
    background: linear-gradient(135deg, #F78321, #B31F26);
  }
  .footer {
      background: #1a0f0b; /* dark brown/black */
      color: #fff;
      padding: 50px 0;
    }
    .footer a {
      color: #fff;
      text-decoration: none;
    }
    .footer a:hover {
      text-decoration: underline;
    }
    .footer-logo img {
      max-width: 200px;
      margin-bottom: 15px;
    }
    .footer-bottom {
      border-top: 1px solid rgba(255,255,255,0.2);
      margin-top: 30px;
      padding-top: 20px;
      text-align: center;
      font-size: 14px;
      color: #bbb;
    }
    .partner-section{
      background: linear-gradient(135deg, #F78321, #B31F26);
      border-radius: 20px;
      color: #fff;
      overflow: hidden;
    }
    .card-body{
      background: linear-gradient(135deg, #F78321, #B31F26);
      border-radius: 0px;
      color: #fff;
      overflow: hidden;
    }
    .partner-image img {
      width: 100%;
      height: auto;
      object-fit: cover;
    }
    .form-control {
      border-radius: 10px;
    }
    /* .btn-custom {
      border-radius: 25px;
      background: #fff;
      color: #F78321;
      font-weight: bold;
      padding: 10px 30px;
    } */
    .btn-custom:hover {
      background: #f1f1f1;
      color: #0b0b0b;
    }


    .choose-carousel .item {
      display: flex;
      align-items: center;
      color: #fff;
      font-size: 1.1rem;
    }
    .choose-carousel .item i {
      font-size: 24px;
    }
    /* fade effect */
    .choose-section::before,
    .choose-section::after {
      content: "";
      position: absolute;
      top: 0;
      width: 80px;
      height: 100%;
      z-index: 2;
      pointer-events: none;
    }
    .choose-section::before {
      left: 0;
      background: linear-gradient(to right,135deg, #F78321, #B31F26);
    }
    .choose-section::after {
      right: 0;
      background: linear-gradient(to left,135deg, #F78321, #B31F26);
    }
    /* Navbar base style */
.navbar-custom {
  background: transparent;
  transition: all 0.4s ease;
  padding: 15px 0;
}
.navbar-custom.scrolled {
  background: #3d231c; /* Dark background on scroll */
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
  padding: 10px 0;
}

/* Links */
.navbar-nav .nav-link {
  color: #fff;
  font-weight: 500;
  margin-left: 20px;
  position: relative;
  transition: color 0.3s ease;
}
.navbar-nav .nav-link::after {
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -5px;
  left: 0;
  background-color: #ffb347;
  transition: width 0.3s ease;
}
.navbar-nav .nav-link:hover {
  color: #ffb347;
}
.navbar-nav .nav-link:hover::after {
  width: 100%;
}

/* Dropdown hover */
.nav-item.dropdown:hover .dropdown-menu {
  display: block;
  margin-top: 0;
  animation: fadeIn 0.3s ease forwards;
}

/* Dropdown style */
.dropdown-menu {
  border-radius: 10px;
  padding: 10px 0;
  background: #fff;
  box-shadow: 0px 8px 20px rgba(0,0,0,0.15);
}
.dropdown-menu .dropdown-item {
  transition: background 0.3s ease, padding-left 0.3s ease;
}
.dropdown-menu .dropdown-item:hover {
  background: #ffb347;
  color: #fff;
  padding-left: 20px;
}

/* Animation */
@keyframes fadeIn {
  from {opacity: 0; transform: translateY(10px);}
  to {opacity: 1; transform: translateY(0);}
}