.custom {
    bottom: 1rem;
    left: 1rem;
    z-index: 10;
    width: fit-content;
}

.slider-container {
        position: relative;
        background: #000;
        height: 75vh;
        width: 100%;
        padding: 80px 0;
        overflow: hidden;
      }

      .swiper {
        width: 100%;
        height: 100%;
      }

      .swiper-slide {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #000;
        position: relative;
        overflow: hidden;
        border-radius: 10px;
      }

      /* Dark overlay for better contrast */
      .swiper-slide::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          to right,
          rgba(0, 0, 0, 0.7),
          rgba(0, 0, 0, 0.4)
        );
        z-index: 1;
      }

      .slide-content {
        position: relative;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 3rem;
        padding: 0 3rem;
        flex-wrap: wrap;
      }

      /* Animation setup */
      .slide-img {
        flex: 1;
        max-height: 350px;
        opacity: 0;
        transform: translateX(-100px);
        transition: all 1s ease-in-out;
        transition-delay: 0.7s;
      }

      .slide-text {
        flex: 1;
        opacity: 0;
        transform: translateY(100px);
        transition: all 1s ease-in-out;
        transition-delay: 0.8s;
        color: #fff;
      }

      .swiper-slide-active .slide-img {
        opacity: 1;
        transform: translateX(0);
      }

      .swiper-slide-active .slide-text {
        opacity: 1;
        transform: translateY(0);
      }

      .slide-text h2 {
        font-size: 2.5rem;
        font-weight: 700;
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
        color: #fff;
      }

      .slide-text p {
        font-size: 1.1rem;
        max-width: 500px;
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
      }

      /* Arrows */
      .swiper-button-prev,
      .swiper-button-next {
        color: #fff;
        opacity: 0;
        transition: opacity 0.4s ease;
      }

      .slider-container:hover .swiper-button-prev,
      .slider-container:hover .swiper-button-next {
        opacity: 1;
      }

      /* Dots */
      .swiper-pagination-bullet {
        background: #777;
        opacity: 1;
      }

      .swiper-pagination-bullet-active {
        background: #fff;
        width: 20px;
        border-radius: 10px;
      }
      /* Make arrow buttons smaller than default */
      .swiper-button-next,
      .swiper-button-prev {
        width: 25px; /* smaller than default */
        height: 25px;
      }

      /* Make the arrow icons smaller too */
      .swiper-button-next::after,
      .swiper-button-prev::after {
        font-size: 14px; /* reduce icon size */
      }

      /* Keep them white or match your theme */
      .swiper-button-next,
      .swiper-button-prev {
        color: #fff;
        opacity: 0; /* only visible on hover */
        transition: opacity 0.3s ease, transform 0.3s ease;
      }

      /* Show on hover */
      .slider-container:hover .swiper-button-next,
      .slider-container:hover .swiper-button-prev {
        opacity: 1;
      }

      /* Optional: Add slight hover scale for better feel */
      .swiper-button-next:hover,
      .swiper-button-prev:hover {
        transform: scale(1.1);
      }

      /* Hide image on small screens */
      @media (max-width: 768px) {
        .slide-img {
          display: none;
        }
        .slider-container {
          height: 50vh;
        }
        .slide-content {
          justify-content: center;
          text-align: center;
        }
        .slide-text h2 {
          font-size: 2rem;
        }
        .slide-text p {
          font-size: 1rem;
        }
      }

 .x-factor-section {
   background: #fff;
   color: #000;
 }

 .unveil-image {
   max-width: 600px;
   width: 100%;
   height: auto;
 }

 .x-number {
   font-size: 2.5rem;
   font-weight: 600;
   background: linear-gradient(135deg, #b37b58, #e6b89c);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
 }

 .x-subtext {
   font-size: 0.95rem;
   color: #3a2f2a;
 }

 @media (max-width: 767px) {
   .unveil-image {
     max-width: 80%;
   }

   .x-number {
     font-size: 2rem;
   }
 }

 .gallery-img {
   width: 100%;
   height: 200px;
   object-fit: cover;
   border-radius: 10px;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
   transition: transform 0.3s ease;
 }

 .gallery-img:hover {
   transform: scale(1.05);
 }

 /* Home page styles */


 .price-box {
   position: relative;
   background: #a25b5216;
   text-align: center;
 }

 .price-box-in {
   position: relative;
 }

 .price-box .h1 {
   background: #BB7960;
   font-size: 26px;
   color: #fff;
   padding: 10px 0;
   letter-spacing: 0.5px;
 }

 .custom-btn {
   width: fit-content;
   padding: 10px;
   background-color: #a25b52;
   border: none;
   border-radius: 4px;
   color: #fff;
   font-size: 16px;
   cursor: pointer;
   transition: background-color 0.3s;
 }

 /* Hero Section */
 .hero-section {
   position: relative;
   background-image: url("../img/Outside.jpg");
   background-size: cover;
   background-position: center;
   height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   color: white;
   overflow: hidden;
 }

 .hero-content {
   width: 100%;
   height: 160%;
   background-color: rgba(0, 0, 0, 0.5);
   /* dark overlay */
   align-content: center;
 }

 .hero-form {
   background-color: #00000033;
   backdrop-filter: blur(4px);
   padding: 20px;
   border-radius: 8px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
   max-width: 420px;
   margin-left: auto;
 }

 .hero-form .contact-form {
   background-color: transparent;
   padding: 0;
 }

 .hero-form .contact-form label {
   display: none;
 }

 /* wave base style */
 .wave-divider {
   position: absolute;
   bottom: 0;
   left: 0;
   width: 200%;
   /* wider for animation */
   height: 100px;
   line-height: 0;
   overflow: hidden;
 }

 .wave-divider svg {
   width: 100%;
   height: 100%;
 }

 .wave-divider path {
   fill: #fff;
   /* next section background color */
 }

 /* wave 1 animation */
 .wave1 {
   animation: waveMove 6s linear infinite;
   opacity: 0.8;
 }

 .wave1 path {
   fill: #d4af37;
 }

 /* wave 2 animation (slower + opposite dir) */
 .wave2 {
   animation: waveMoveReverse 10s linear infinite;
   opacity: 0.5;
   bottom: 0;
   /* slightly above wave1 */
 }

 .wave2 path {
   fill: #2c5282;
 }

 @keyframes waveMove {
   0% {
     transform: translateX(0);
   }

   100% {
     transform: translateX(-50%);
   }
 }

 @keyframes waveMoveReverse {
   0% {
     transform: translateX(-50%);
   }

   100% {
     transform: translateX(0);
   }
 }

 .hero-content h1 {
   font-size: 3rem;
   line-height: 4rem;
   font-weight: 600;
   margin-bottom: 20px;
   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
 }

 .hero-text p {
   font-size: 25px;
   line-height: 34px;
   font-weight: 400;
 }

 .hero-text ul {
   list-style: none;
   /* remove default bullets */
   padding: 0;
   margin: 0;
 }

 .hero-text ul li {
   position: relative;
   /* needed for absolute ::before */
   padding-left: 20px;
   /* space for tick */
   margin-bottom: 10px;
   /* spacing between items */
   line-height: 32px;
   font-size: 18px;
 }

 .hero-text ul li::before {
   content: "✔";
   /* tick symbol */
   position: absolute;
   left: 0;
   top: 0;
   color: #ffd700;
   /* tick color */
   font-size: 18px;
   /* tick size */
   line-height: 32px;
   /* keep aligned */
 }

 .hero-buttons {
   display: flex;
   flex-direction: column;
   gap: 20px;
   align-items: center;
 }

 .hero-btn {
   padding: 15px 30px;
   border: none;
   border-radius: 30px;
   font-size: 16px;
   font-weight: bold;
   cursor: pointer;
   transition: all 0.3s;
 }

 .hero-btn.primary {
   background: linear-gradient(135deg, #ffd700, #ffed4e);
   color: #1a365d;
 }

 .hero-btn.secondary {
   background: transparent;
   color: white;
   border: 2px solid white;
 }

 .hero-btn:hover {
   transform: translateY(-3px);
   box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
 }

 /* Section Styling */
 .floor-plan {
   padding: 80px 20px;
   background: #fff;
   color: #000;
   font-family: "Helvetica Neue", Arial, sans-serif;
 }

 /* Section Header */
 .floor-plan .section-header {
   text-align: center;
   margin-bottom: 50px;
 }

 .floor-plan .section-header h2 {
   font-size: 38px;
   font-weight: 800;
   letter-spacing: 2px;
   margin-bottom: 12px;
   position: relative;
   display: inline-block;
   text-transform: uppercase;
 }

 .floor-plan .section-header h2::after {
   content: "";
   display: block;
   width: 80px;
   height: 2px;
   background: #000;
   margin: 12px auto 0;
 }

 .floor-plan .section-header p {
   font-size: 18px;
   color: #444;
   font-style: italic;
 }

 /* Card Container */
 .floor-plan-cards {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 30px;
 }

 /* Individual Card */
 .floor-card {
   position: relative;
   flex: 1 1 320px;
   min-width: 320px;
   height: 100%;
   background: #fff;
   border: 1px solid #000;
   border-radius: 12px;
   /*overflow: hidden;*/
   box-shadow: 0 3px 15px rgba(0, 0, 0, 0.08);
   transition: all 0.3s ease;
 }

 .floor-card:hover {
   transform: translateY(-8px);
   box-shadow: 0 8px 24px rgba(65, 71, 102, 0.15);
   border-color: #444;
 }

 /* Background Image */
 .floor-bg {
   position: absolute;
   inset: 0;
   border-radius: 14px;
   z-index: 1;
   overflow: hidden;
 }

 .floor-bg img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   filter: brightness(0.8);
 }

 /* Foreground Content */
 .floor-content {
   position: relative;
   z-index: 2;
   padding: 30px;
   min-height: 300px;
   background: rgba(255,
       255,
       255,
       0.85);
   /* translucent white overlay for readability */
   backdrop-filter: blur(2px);
   border-radius: 12px;
 }

 /* Card Headings */
 .floor-card h4 {
   font-size: 22px;
   font-weight: 700;
   margin-bottom: 18px;
   border-bottom: 2px solid #000;
   padding-bottom: 10px;
   text-transform: uppercase;
   letter-spacing: 1px;
 }

 /* List Items */
 .floor-card ul {
   list-style: none;
   padding: 0;
   margin: 0 0 18px;
 }

 .floor-card ul li {
   font-size: 16px;
   margin-bottom: 8px;
   line-height: 1.5;
 }

 /* Paragraphs */
 .floor-card p {
   font-size: 15px;
   margin-bottom: 8px;
   line-height: 1.5;
 }

 /* Responsive */
 @media (max-width: 768px) {
   .floor-plan-cards {
     flex-direction: column;
     align-items: center;
   }

   .floor-card {
     width: 100%;
     min-width: unset;
   }
 }

 /* Amenities Section */
 .amenities-section {
   background: var(--primary-black);
   color: var(--pure-white);
 }

 .amenities-section .section-title {
   color: var(--pure-white);
 }

 .amenities-section .section-subtitle {
   color: var(--light-gray);
 }

 .amenity-item {
   position: relative;
   text-align: center;
   align-items: center;
   height: 100%;
   padding: 30px 20px;
   background: rgba(255, 255, 255, 0.05);
   border-radius: 15px;
   margin-bottom: 30px;
   transition: all 0.3s ease;
   border: 1px solid rgba(212, 175, 55, 0.2);
   overflow: hidden;
   /* important for gradient overlay */
 }

 /* gradient overlay */
 .amenity-item::before {
   content: "";
   position: absolute;
   top: 100%;
   /* start hidden */
   left: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(135deg, #d4af3755, #f4d03f55);
   transition: top 0.5s ease;
   z-index: 1;
   border-radius: 15px;
 }

 /* keep content above overlay */
 .amenity-item * {
   position: relative;
   z-index: 2;
 }

 /* hover effect */
 .amenity-item:hover::before {
   top: 0;
   /* slide overlay up */
 }

 .amenity-item:hover {
   transform: translateY(-5px);
   /* keep the lift effect */
   border-color: rgba(212, 175, 55, 0.5);
 }

 .amenity-icon {
   font-size: 3rem;
   color: var(--primary-gold);
   margin-bottom: 20px;
 }

 .amenity-title {
   font-size: 1.3rem;
   font-weight: 600;
   margin-bottom: 10px;
 }

 .amenity-description {
   color: var(--light-gray);
   font-size: 0.95rem;
 }

 .pricing-section .underline {
   width: 60px;
   height: 3px;
   background: #b8860b;
   /* golden */
   margin-top: 5px;
 }

 .pricing-section td {
   font-weight: 600;
   padding: 20px 0;
   min-width: 150px;
 }

 .faq-title {
   font-weight: 700;
   margin-bottom: 30px;
   text-align: center;
 }

 .faq-item {
   margin-bottom: 25px;
   padding: 20px;
   border: 1px solid #e0e0e0;
   border-radius: 10px;
   background: #f9f9f9;
 }

 .faq-question {
   font-weight: 600;
   font-size: 1.1rem;
   color: #080808;
   /* Green shade */
   margin-bottom: 10px;
   display: flex;
   align-items: center;
 }

 .faq-question span {
   background: #080808;
   color: #fff;
   font-weight: bold;
   border-radius: 50%;
   width: 28px;
   height: 28px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   margin-right: 10px;
   font-size: 0.9rem;
 }

 .faq-answer {
   font-size: 0.95rem;
   color: #333;
   line-height: 1.6;
 }

 /* Location Section */
 .location {
   background: var(--primary-black);
   color: white;
   position: relative;
   overflow: hidden;
   padding: 3rem 1rem;
   /* default padding for mobile */
 }

 /* Mobile-first grid (1 column default) */
 .location-grid {
   display: grid;
   grid-template-columns: 1fr;
   gap: 1rem;
   margin-top: 2rem;
 }

 .location-item {
   background: rgba(255, 255, 255, 0.1);
   backdrop-filter: blur(10px);
   padding: 1.5rem;
   border-radius: 15px;
   border: 1px solid rgba(255, 255, 255, 0.2);
   transition: transform 0.3s ease;
 }

 .location-item:hover {
   transform: scale(1.05);
 }

 .location-name {
   font-size: 1.1rem;
   font-weight: 600;
   margin-bottom: 0.5rem;
 }

 .location-distance {
   color: #ffed4e;
   font-weight: 700;
   font-size: 1rem;
 }

 .contact-section {
   background: #fff;
 }

 /* Tablet (≥ 768px) */
 @media (min-width: 768px) {
   .location {
     padding: 4rem 2rem;
   }

   .location-grid {
     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
     gap: 2rem;
     margin-top: 3rem;
   }

   .location-item {
     padding: 2rem;
   }

   .location-name {
     font-size: 1.2rem;
   }

   .location-distance {
     font-size: 1.1rem;
   }

   .faq-answer {
     margin-left: 38px;
   }
 }

 /* Desktop (≥ 1024px) */
 @media (min-width: 1024px) {
   .location {
     padding: 5rem 3rem;
   }
 }

 @media (min-width: 481px) {
   .cta-button {
     font-size: 15px;
     padding: 12px 22px;
   }
 }

 @media (min-width: 768px) {
   .hero-buttons {
     flex-direction: row;
     justify-content: center;
   }
 }