/*
 * BAMX Properties - Custom Styles
 * Extracted from home.blade.php
 */

/* Accessibility: Visually hidden labels for screen readers */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Performance: Font display optimization */
/* Note: Font Awesome fonts need font-display: swap in their @font-face declarations */
/* This is typically done in fontawesome.min.css file itself */
/* For now, we ensure text is visible immediately while fonts load */
body, html {
  font-display: swap;
}

/* Optimize font loading for better FCP */
@supports (font-display: swap) {
  * {
    font-display: swap;
  }
}



@media (max-width: 767px) {
    .h1, h1 {
        font-size: 18px;
    }
}
    /* Floating Notification Animations */
    @keyframes slideInRight {
      from {
        transform: translateX(100%);
        opacity: 0;
      }
      to {
        transform: translateX(0);
        opacity: 1;
      }
    }

    @keyframes slideOutRight {
      from {
        transform: translateX(0);
        opacity: 1;
      }
      to {
        transform: translateX(100%);
        opacity: 0;
      }
    }

    /* Floating Notification Styles */
    .floating-notification {
      transition: all 0.3s ease;
    }

    .floating-notification:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 35px rgba(0,0,0,0.25) !important;
    }
    
    /* Enhanced notification colors */
    .floating-notification.alert-success {
      background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
      color: #ffffff !important;
      border-left: 4px solid #ffffff;
    }
    
    .floating-notification.alert-danger {
      background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important;
      color: #ffffff !important;
      border-left: 4px solid #ffffff;
    }
    
    /* Error field highlighting */
    .is-invalid {
      border-color: #dc3545 !important;
      box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
    }
    
    .invalid-feedback {
      display: block !important;
      color: #dc3545;
      font-size: 14px;
      margin-top: 5px;
    }

    /* Mobile Responsive */
    @media (max-width: 768px) {
      .floating-notification {
        top: 10px !important;
        right: 10px !important;
        left: 10px !important;
        min-width: auto !important;
        max-width: none !important;
      }
    }

    .tiktok-logo {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
    }

    .tiktok-logo svg {
      width: 16px;
      height: 16px;
      fill: currentColor;
      transition: all 0.3s ease;
    }

    .tiktok-logo:hover svg {
      transform: scale(1.1);
      fill: #ff0050;
    }

    .tiktok-hero-logo {
      text-align: center;
      margin-bottom: 1rem;
    }

    .tiktok-hero-link {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 12px 20px;
      background: linear-gradient(45deg, #ff0050, #00f2ea);
      color: white;
      text-decoration: none;
      border-radius: 25px;
      font-weight: 600;
      font-size: 14px;
      transition: all 0.3s ease;
      box-shadow: 0 4px 15px rgba(255, 0, 80, 0.3);
    }

    .tiktok-hero-link:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(255, 0, 80, 0.4);
      color: white;
      text-decoration: none;
    }

    .tiktok-hero-svg {
      width: 32px !important;
      height: 32px !important;
      fill: white !important;
    }

    .tiktok-hero-text {
      font-weight: 600;
      letter-spacing: 0.5px;
    }

    @media (max-width: 768px) {
      .tiktok-hero-link {
        padding: 10px 16px;
        font-size: 13px;
      }

      .tiktok-hero-svg {
        width: 28px !important;
        height: 28px !important;
      }
    }




    @media (max-width: 768px) {
      .tiktok-hero-link {
        padding: 10px 16px;
        font-size: 13px;
      }
      .tiktok-hero-svg {
        width: 28px !important;
        height: 28px !important;
      }
    }

         /* Smooth Scrolling */
    html {
      scroll-behavior: smooth;
    }



     /* Highlight Cards */
     .highlight-card {
       background: white;
       border-radius: 20px;
       padding: 35px 25px;
       text-align: center;
       box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
       border: 1px solid rgba(168, 104, 58, 0.1);
       transition: all 0.3s ease;
       height: 100%;
       position: relative;
       overflow: hidden;
     }

     .highlight-card::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       height: 4px;
       background: linear-gradient(45deg, #c8906a, #D2691E);
     }

     .highlight-card:hover {
       transform: translateY(-10px);
       box-shadow: 0 20px 40px rgba(168, 104, 58, 0.2);
       border-color: #c8906a;
     }

     .highlight-card .highlight-icon {
       width: 80px;
       height: 80px;
       background: linear-gradient(135deg, #c8906a, #D2691E);
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       margin: 0 auto 25px;
       transition: all 0.3s ease;
     }

     .highlight-card:hover .highlight-icon {
       transform: scale(1.1);
       box-shadow: 0 10px 25px rgba(168, 104, 58, 0.4);
     }

     .highlight-card .highlight-icon i {
       font-size: 2.5rem;
       color: white;
     }

     .highlight-card .highlight-title {
       color: #2C1810;
       font-size: 1.4rem;
       font-weight: 700;
       margin-bottom: 15px;
       line-height: 1.3;
     }

     .highlight-card .highlight-text {
       color: #6B4423;
       font-size: 1rem;
       line-height: 1.6;
       margin: 0;
     }


     .info-item {
       text-align: center;
       padding: 10px 15px;
       transition: all 0.3s ease;
     }

     .info-item:hover {
       transform: translateY(-5px);
     }

     .info-item .info-icon {
       width: 60px;
       height: 60px;
       background: linear-gradient(135deg, #c8906a, #D2691E);
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       margin: 0 auto 20px;
       transition: all 0.3s ease;
     }

     .info-item:hover .info-icon {
       transform: scale(1.1);
       box-shadow: 0 8px 20px rgba(168, 104, 58, 0.4);
     }

     .info-item .info-icon i {
       font-size: 1.8rem;
       color: white;
     }

     .info-item h4 {
       color: #2C1810;
       font-size: 1.2rem;
       font-weight: 700;
       margin-bottom: 10px;
     }

     .info-item p {
       color: #6B4423;
       font-size: 1rem;
       margin: 0;
       font-weight: 500;
     }

     /* Special Invitation */
     .special-invitation {
       background: linear-gradient(135deg, #c8906a, #D2691E);
       border-radius: 25px;
       padding: 50px 40px;
       text-align: center;
       position: relative;
       overflow: hidden;
       box-shadow: 0 20px 40px rgba(168, 104, 58, 0.3);
     }

     .special-invitation::before {
       content: '';
       position: absolute;
       top: -50%;
       left: -50%;
       width: 200%;
       height: 200%;
       background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="stars" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="20" cy="20" r="1" fill="%23ffffff" opacity="0.3"/><circle cx="80" cy="40" r="0.5" fill="%23ffffff" opacity="0.2"/><circle cx="40" cy="80" r="0.8" fill="%23ffffff" opacity="0.25"/></pattern></defs><rect width="100" height="100" fill="url(%23stars)"/></svg>');
       animation: float 20s ease-in-out infinite;
     }

     @keyframes float {
       0%, 100% { transform: translateY(0px) rotate(0deg); }
       50% { transform: translateY(-20px) rotate(180deg); }
     }

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

     .special-invitation .invitation-title {
       color: white;
       font-size: 2rem;
       font-weight: 700;
       margin-bottom: 20px;
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 15px;
     }

     .special-invitation .invitation-title i {
       color: #FFD700;
       font-size: 2.2rem;
     }

     .special-invitation .invitation-text {
       color: rgba(255, 255, 255, 0.95);
       font-size: 1.2rem;
       line-height: 1.8;
       margin-bottom: 30px;
       max-width: 800px;
       margin-left: auto;
       margin-right: auto;
     }

     .special-invitation .invitation-cta .vs-btn {
       background: #FFD700;
       color: #2C1810;
       border: none;
       padding: 15px 35px;
       border-radius: 50px;
       font-weight: 700;
       font-size: 1.1rem;
       transition: all 0.3s ease;
       box-shadow: 0 8px 25px rgba(255, 215, 0, 0.4);
       display: inline-flex;
       align-items: center;
       gap: 10px;
     }

     .special-invitation .invitation-cta .vs-btn:hover {
       background: #FFC107;
       transform: translateY(-3px);
       box-shadow: 0 12px 30px rgba(255, 215, 0, 0.6);
       color: #2C1810;
     }

     /* Responsive Design */
     @media (max-width: 768px) {


       .highlight-card {
         padding: 25px 20px;
         margin-bottom: 20px;
       }

       .highlight-card .highlight-icon {
         width: 60px;
         height: 60px;
       }

       .highlight-card .highlight-icon i {
         font-size: 2rem;
       }

       .highlight-card .highlight-title {
         font-size: 1.2rem;
       }


       .info-item {
         padding: 20px 10px;
         margin-bottom: 15px;
       }

       .special-invitation {
         padding: 40px 25px;
       }

       .special-invitation .invitation-title {
         font-size: 1.6rem;
       }

        .special-invitation .invitation-text {
          font-size: 1rem;
        }
      }

    /* Sierra-Style Hero Section */
    .sierra-style-hero {
      position: relative;
      width: 100%;
      height: 100vh;
      min-height: 600px;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 !important;
      padding: 0 !important;
      margin-top: 0 !important;
      padding-top: 0 !important;
    }

    .hero-video-wrapper {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
    }

    .hero-video-bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
    }

    .youtube-video-wrapper {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100vw;
      height: 100vh;
      min-width: 100%;
      min-height: 100%;
      pointer-events: none;
      overflow: hidden; /* Hide any overflow content */
    }
    
    /* Hide all YouTube overlays, controls, and info */
    .youtube-video-wrapper::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      pointer-events: none;
      z-index: 2;
    }

    .youtube-iframe {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100vw;
      height: 56.25vw; /* 16:9 aspect ratio */
      min-height: 100vh;
      min-width: 177.77vh; /* 16:9 aspect ratio */
      border: none;
      pointer-events: none !important; /* Disable all mouse interactions */
      -webkit-user-select: none !important;
      -moz-user-select: none !important;
      -ms-user-select: none !important;
      user-select: none !important;
    }

    #heroVideoMobile {
      display: none;
    }

    @media (max-width: 768px) {
      #heroVideoDesktop {
        display: none;
      }
      #heroVideoMobile {
        display: block;
      }
    }

    .hero-bg-fallback {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      z-index: 0;
    }

    .hero-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.4);
      z-index: 2;
    }

    .hero-content-wrapper.iman-style {
      position: relative;
      z-index: 10;
      width: 100%;
      height: 54vh;
      min-height: 530px;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      text-align: center;
      padding: 0;
    }

    .hero-main-content.iman-content {
      max-width: 100%;
      margin: 0 auto;
    }

    /* IMAN Style Large Logo */
    .iman-logo-large {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 8px;
      margin-bottom: 20px;
      font-family: 'Playfair Display', serif;
    }

    .iman-letter-b,
    .iman-letter-a,
    .iman-letter-m,
    .iman-letter-x {
      font-size: 12rem;
      font-weight: 700;
      color: #8B6F47;
      line-height: 1;
      letter-spacing: -5px;
      text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    }

    .iman-letter-b {
      position: relative;
    }

    .iman-letter-b::before {
      content: '';
      position: absolute;
      top: -20px;
      left: 50%;
      transform: translateX(-50%);
      width: 60px;
      height: 8px;
      background: #8B6F47;
      border-radius: 4px;
    }

    @media (max-width: 991px) {
      .iman-letter-b,
      .iman-letter-a,
      .iman-letter-m,
      .iman-letter-x {
        font-size: 8rem;
        letter-spacing: -3px;
      }
      .iman-letter-b::before {
        width: 40px;
        height: 6px;
        top: -15px;
      }
    }

    @media (max-width: 768px) {
      .iman-letter-b,
      .iman-letter-a,
      .iman-letter-m,
      .iman-letter-x {
        font-size: 5rem;
        letter-spacing: -2px;
      }
      .iman-letter-b::before {
        width: 30px;
        height: 4px;
        top: -10px;
      }
    }

    .iman-subtitle {
      font-size: 1.1rem;
      font-weight: 400;
      color: #ffffff;
      letter-spacing: 3px;
      margin-bottom: 15px;
      text-transform: uppercase;
      font-family: 'Inter', sans-serif;
    }

    @media (max-width: 768px) {
      .iman-subtitle {
        font-size: 0.85rem;
        letter-spacing: 2px;
        margin-bottom: 12px;
      }
    }

    .iman-developers-text {
      font-size: 2rem;
      font-weight: 300;
      color: #8B6F47;
      letter-spacing: 8px;
      margin-bottom: 50px;
      text-transform: uppercase;
      font-family: 'Inter', sans-serif;
    }

    @media (max-width: 768px) {
      .iman-developers-text {
        font-size: 1.3rem;
        letter-spacing: 5px;
        margin-bottom: 40px;
      }
    }

    .hero-cta-wrapper {
      margin-top: 0;
    }

    .iman-cta-btn {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      background: #d07231;
      color: #ffffff;
      padding: 16px 40px;
      border-radius: 4px;
      font-weight: 500;
      font-size: 1rem;
      text-decoration: none;
      transition: all 0.3s ease;
      border: none;
      cursor: pointer;
      text-transform: uppercase;
      letter-spacing: 1px;
      font-family: 'Inter', sans-serif;
      position: relative;
      animation: pulseGlow 2s ease-in-out infinite;
    }
    
    @keyframes pulseGlow {
      0% {
        box-shadow: 0 0 0 0 rgba(208, 114, 49, 0.7),
                    0 0 0 0 rgba(208, 114, 49, 0.4);
      }
      50% {
        box-shadow: 0 0 0 10px rgba(208, 114, 49, 0),
                    0 0 0 20px rgba(208, 114, 49, 0);
      }
      100% {
        box-shadow: 0 0 0 0 rgba(208, 114, 49, 0),
                    0 0 0 0 rgba(208, 114, 49, 0);
      }
    }

    .iman-cta-btn:hover {
      background: #3a6a1f;
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(45, 80, 22, 0.4),
                  0 0 0 10px rgba(58, 106, 31, 0.3),
                  0 0 0 20px rgba(58, 106, 31, 0.1);
      color: #ffffff;
      animation: pulseGlowHover 1.5s ease-in-out infinite;
    }
    
    @keyframes pulseGlowHover {
      0% {
        box-shadow: 0 8px 20px rgba(45, 80, 22, 0.4),
                    0 0 0 0 rgba(58, 106, 31, 0.5),
                    0 0 0 0 rgba(58, 106, 31, 0.3);
      }
      50% {
        box-shadow: 0 8px 20px rgba(45, 80, 22, 0.4),
                    0 0 0 12px rgba(58, 106, 31, 0),
                    0 0 0 24px rgba(58, 106, 31, 0);
      }
      100% {
        box-shadow: 0 8px 20px rgba(45, 80, 22, 0.4),
                    0 0 0 0 rgba(58, 106, 31, 0),
                    0 0 0 0 rgba(58, 106, 31, 0);
      }
    }

    .iman-cta-btn i {
      font-size: 0.9rem;
      transition: transform 0.3s ease;
    }

    .iman-cta-btn:hover i {
      transform: translateX(4px);
    }

    @media (max-width: 768px) {
      .iman-cta-btn {
        padding: 14px 30px;
        font-size: 0.9rem;
        gap: 10px;
      }
    }

    /* Info Bar at Bottom */
    .hero-info-bar {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      background: rgba(0, 0, 0, 0.7);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      padding: 5px 0;
      z-index: 10;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .info-bar-content {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      gap: 20px;
      flex-wrap: nowrap;
    }

    .info-item {
      display: flex;
      align-items: center;
    }

    .info-text {
      color: #ffffff;
      font-size: 0.9rem;
      font-weight: 400;
      white-space: nowrap;
    }

    .info-divider {
      width: 1px;
      height: 20px;
      background: rgba(255, 255, 255, 0.3);
    }

    @media (max-width: 991px) {
      .info-bar-content {
        gap: 15px;
      }
      .info-text {
        font-size: 0.8rem;
      }
    }

    @media (max-width: 768px) {
      .hero-info-bar {
        display: none !important;
      }
    }

    .hero-form-section {
      position: relative;
      z-index: 10;
      background: #ffffff;
      padding: 80px 0;
      margin-top: -100px;
      border-radius: 30px 30px 0 0;
      box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.1);
    }

    @media (max-width: 768px) {
      .hero-form-section {
        padding: 60px 0;
        margin-top: -80px;
        border-radius: 20px 20px 0 0;
      }
    }

    /* Highlights Section - Carousel Design */
    .highlights-section {
      background: #ffffff;
      padding: 100px 0;
      position: relative;
      overflow: hidden;
    }

    .highlights-header {
      text-align: center;
      margin-bottom: 60px;
    }

    .highlights-title {
      font-size: 3.5rem;
      font-weight: 700;
      color: #2C1810;
      letter-spacing: -1px;
      margin: 0;
      position: relative;
      display: inline-block;
    }

    .highlights-title::after {
      content: '';
      position: absolute;
      bottom: -15px;
      left: 50%;
      transform: translateX(-50%);
      width: 80px;
      height: 4px;
      background: linear-gradient(90deg, #c8906a 0%, #d4a574 100%);
      border-radius: 2px;
    }

    @media (max-width: 768px) {
      .highlights-title {
        font-size: 2.2rem;
      }
      .highlights-section {
        padding: 60px 0;
      }
      .highlights-header {
        margin-bottom: 40px;
      }
    }

    /* Carousel Wrapper */
    .highlights-carousel-wrapper {
      position: relative;
      padding: 0 80px;
    }

    /* Gallery Item - Same Beautiful Design */
    .gallery-item {
      position: relative;
      overflow: hidden;
      border-radius: 20px;
      aspect-ratio: 4 / 5;
      cursor: pointer;
      will-change: transform;
      transform: translateZ(0);
      padding: 0 15px;
      outline: none;
    }

    .gallery-image-container {
      position: relative;
      width: 100%;
      height: 100%;
      overflow: hidden;
      border-radius: 20px;
      background: #f8f9fa;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
      transition: box-shadow 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    }

    .gallery-image-container img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
      will-change: transform;
      transform: translateZ(0);
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
    }

    .gallery-item::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%);
      opacity: 0;
      transition: opacity 0.5s cubic-bezier(0.23, 1, 0.32, 1);
      z-index: 1;
      border-radius: 20px;
      pointer-events: none;
    }

    .gallery-item:hover {
      transform: translateY(-10px) scale(1.02);
    }

    .gallery-item:hover .gallery-image-container {
      box-shadow: 0 20px 50px rgba(200, 144, 106, 0.25);
    }

    .gallery-item:hover .gallery-image-container img {
      transform: scale(1.1);
    }

    .gallery-item:hover::before {
      opacity: 1;
    }
    
    /* Optimize will-change for better performance */
    .gallery-item:not(:hover) {
      will-change: auto;
    }
    
    .gallery-item:hover {
      will-change: transform;
    }

    /* Slick Carousel Customization */
    .highlights-carousel .slick-list {
      margin: 0 -15px;
      padding: 20px 0;
    }

    .highlights-carousel .slick-slide {
      transition: opacity 0.3s ease;
    }

    .highlights-carousel .slick-slide:not(.slick-active) {
      opacity: 0.6;
    }

    .highlights-carousel .slick-slide.slick-active {
      opacity: 1;
    }

    /* Carousel Arrows - Hidden */
    .highlights-carousel .slick-arrow {
      display: none !important;
    }

    /* Carousel Dots */
    .highlights-carousel .slick-dots {
      bottom: -50px;
      text-align: center;
      position: absolute;
      width: 100%;
    }

    .highlights-carousel .slick-dots li {
      margin: 0 8px;
      width: auto;
      height: auto;
    }

    /* Limit dots to maximum 5 */
    .highlights-carousel .slick-dots li:nth-child(n+6) {
      display: none !important;
    }

    .highlights-carousel .slick-dots li button {
      width: 40px;
      height: 4px;
      border-radius: 2px;
      background: rgba(200, 144, 106, 0.3);
      transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
      padding: 0;
      border: none;
      position: relative;
      overflow: hidden;
    }

    .highlights-carousel .slick-dots li button::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 0;
      height: 100%;
      background: linear-gradient(90deg, #c8906a 0%, #d4a574 100%);
      transition: width 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    }

    .highlights-carousel .slick-dots li.slick-active button {
      background: rgba(200, 144, 106, 0.2);
      width: 60px;
    }

    .highlights-carousel .slick-dots li.slick-active button::before {
      width: 100%;
    }

    /* Responsive */
    @media (max-width: 1400px) {
      .highlights-carousel-wrapper {
        padding: 0 60px;
      }
    }

    @media (max-width: 1200px) {
      .highlights-carousel-wrapper {
        padding: 0 40px;
      }
    }

    @media (max-width: 768px) {
      .highlights-carousel-wrapper {
        padding: 0 10px;
      }
      .gallery-item {
        aspect-ratio: 16 / 10;
        padding: 0 10px;
      }
      .highlights-carousel .slick-dots {
        bottom: -40px;
      }
    }

    /* Performance Optimizations */
    .highlights-carousel * {
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    
    /* GPU Acceleration for Animations - Optimized */
    .gallery-item,
    .amenity-card,
    .project-card,
    .info-card {
      transform: translateZ(0);
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      contain: layout style paint;
    }
    
    /* Optimize Image Rendering */
    img {
      image-rendering: -webkit-optimize-contrast;
      image-rendering: crisp-edges;
    }
    
    /* Reduce repaints on scroll */
    .header-inner,
    .parallax-image {
      contain: layout style paint;
    }
  

/* ============================================
   CSS Block Separator
   ============================================ */


          .header-inner {
            padding: 25px 11% !important;
            background: transparent;
            /* backdrop-filter: blur(5px); */
            -webkit-backdrop-filter: blur(5px);
            box-shadow: none;
            transition: all 0.3s ease;
          }
          
          .header-inner.scrolled {
            background: rgba(255, 255, 255, 0.98);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
          }
          
          .vs-header {
            position: fixed !important;
            top: 0px !important;
            left: 0 !important;
            right: 0 !important;
            width: 100% !important;
            z-index: 1000 !important;
            background: transparent;
            margin: 0 !important;
            padding: 0 !important;
          }
          
          /* Ensure body and html have no margins */
          body {
            margin: 0 !important;
            padding: 0 !important;
          }
          
          html {
            margin: 0 !important;
            padding: 0 !important;
          }
          
          /* Remove any spacing before hero */
          body > *:not(.preloader):not(.vs-header):first-of-type {
            margin-top: 0 !important;
          }
          
          /* Ensure hero starts at top */
          #hero,
          .sierra-style-hero {
            margin-top: 0 !important;
            padding-top: 0 !important;
          }
          
          /* Remove any default section spacing */
          section {
            margin-top: 0;
          }
          
          section#hero {
            margin-top: 0 !important;
            padding-top: 0 !important;
          }
          
          /* Logo styling for transparent header */
          .header-logo img {
            transition: all 0.3s ease, filter 0.3s ease;
            filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
          }
          
          .header-inner.scrolled .header-logo img {
            filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
          }
          
          /* Smooth image transition */
          .header-logo-img {
            opacity: 1;
            transition: opacity 0.3s ease;
          }
          
          /* CTA button styling for transparent header */
          .header-cta-btn {
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
          }
          
          .header-inner.scrolled .header-cta-btn {
            box-shadow: 0 2px 8px rgba(200, 144, 106, 0.3);
          }
          
          .header-cta-btn {
            padding: 12px 28px;
            background: linear-gradient(135deg, #c8906a 0%, #D2691E 100%);
            color: white;
            border-radius: 25px;
            font-weight: 600;
            font-size: 14px;
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-block;
            border: none;
          }
          
          .header-cta-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(200, 144, 106, 0.4);
            color: white;
            text-decoration: none;
          }
          
          @media (max-width: 991px) {
            .vs-header {
            top: 40px !important;
            }
            .header-logo {
              text-align: left !important;
            }
            .menu-top .row {
              justify-content: space-between !important;
            }
            .header-inner {
              padding: 21px 15px !important;
            }
          }
          
          @media (max-width: 575px) {
            .header-logo img {
              max-width: 120px !important;
              height: auto !important;
            }
            .header-inner {
              padding: 21px 15px !important;
            }
            .header-cta-btn {
              padding: 10px 20px;
              font-size: 13px;
            }
          }
        

/* ============================================
   CSS Block Separator
   ============================================ */


    .parallax-section {
      position: relative;
      height: 500px;
      overflow: hidden;
      margin: 0;
      padding: 0;
    }

    .parallax-container {
      position: relative;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }

    .parallax-image {
      position: absolute;
      top: -100px;
      left: 0;
      width: 100%;
      height: calc(100% + 100px);
      will-change: transform;
    }

    .parallax-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
    }

    .parallax-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(333deg, rgb(0 0 0 / 25%) 0%, rgb(0 0 0 / 60%) 50%, rgb(0 0 0 / 25%) 100%);
      z-index: 1;
    }

    .parallax-content {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 2;
      text-align: center;
      width: 100%;
      padding: 0 20px;
    }

    .parallax-title {
      font-size: 80px;
      font-weight: 700;
      color: #ffffff;
      text-transform: uppercase;
      letter-spacing: 8px;
      margin: 0;
      text-shadow: 
        0 2px 10px rgba(0, 0, 0, 0.5),
        0 5px 30px rgba(200, 144, 106, 0.4);
      animation: fadeInUp 1s ease-out;
      font-family: 'Inria Sans', sans-serif;
    }

    .parallax-line {
      width: 150px;
      height: 3px;
      background: linear-gradient(90deg, transparent, #c8906a, transparent);
      margin: 30px auto 0;
      animation: expandLine 1s ease-out 0.3s both;
      box-shadow: 0 0 20px rgba(200, 144, 106, 0.6);
    }

    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(30px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes expandLine {
      from {
        width: 0;
        opacity: 0;
      }
      to {
        width: 150px;
        opacity: 1;
      }
    }

    /* Tablet */
    @media (max-width: 991px) {
      .parallax-section {
        height: 400px;
      }

      .parallax-title {
        font-size: 60px;
        letter-spacing: 6px;
      }

      .parallax-line {
        width: 120px;
      }
    }

    /* Mobile */
    @media (max-width: 576px) {
      .parallax-section {
        height: 300px;
      }

      .parallax-title {
        font-size: 40px;
        letter-spacing: 4px;
      }

      .parallax-line {
        width: 100px;
        height: 2px;
      }
    }

    @media (max-width: 400px) {
      .parallax-section {
        height: 250px;
      }

      .parallax-title {
        font-size: 32px;
        letter-spacing: 3px;
      }
    }
  

/* ============================================
   CSS Block Separator
   ============================================ */


    .project-info-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 25px;
      padding: 30px;
      max-width: 1200px;
      margin: 0 auto;
    }

    .info-card {
      background: #ffffff;
    border-radius: 15px;
    padding: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 15px;
    border: 1px solid rgba(200, 144, 106, 0.1);
    flex-direction: column;
    justify-content: center;

    }

    .info-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 6px 20px rgba(200, 144, 106, 0.2);
      border-color: rgba(200, 144, 106, 0.3);
    }

    .info-icon {
      width: 50px;
      height: 50px;
      background: linear-gradient(135deg, rgba(200, 144, 106, 0.1), rgba(210, 105, 30, 0.1));
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .info-icon i {
      font-size: 24px;
      color: #c8906a;
    }

    .info-content {
      text-align: center;
    }

    .info-label {
      font-size: 14px;
      color: #666;
      margin-bottom: 5px;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .info-value {
      font-size: 18px;
      color: #2c3e50;
      font-weight: 700;
      margin: 0;
      line-height: 1.4;
    }

    .project-image-wrapper {
      position: relative;
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    }

    .project-image-wrapper img {
      width: 100%;
      height: auto;
      display: block;
      transition: transform 0.5s ease;
      opacity: 1;
      visibility: visible;
    }

    .project-image-wrapper:hover img {
      transform: scale(1.05);
    }

    .logo-overlay-box {
      position: absolute;
      top: 20px;
      left: 20px;
      z-index: 10;
      background: rgba(255, 255, 255, 0.95);
      padding: 15px 20px;
      border-radius: 15px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      transition: all 0.3s ease;
    }

    .logo-overlay-box:hover {
      transform: translateY(-5px);
      box-shadow: 0 6px 25px rgba(0, 0, 0, 0.2);
    }

    .why-cta-btn {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      padding: 16px 35px;
      background: linear-gradient(135deg, #c8906a 0%, #d2691e 50%, #a8683a 100%);
      color: #ffffff;
      font-size: 18px;
      font-weight: 600;
      text-decoration: none;
      border-radius: 50px;
      box-shadow: 0 6px 25px rgba(200, 144, 106, 0.4);
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      overflow: hidden;
      letter-spacing: 0.5px;
    }

    .why-cta-btn::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
      transition: left 0.5s ease;
    }

    .why-cta-btn:hover::before {
      left: 100%;
    }

    .why-cta-btn:hover {
      transform: translateY(-3px) scale(1.03);
      box-shadow: 0 8px 30px rgba(200, 144, 106, 0.5);
      color: #ffffff;
    }

    .why-cta-btn:active {
      transform: translateY(-1px) scale(1.01);
    }

    .cta-text {
      position: relative;
      z-index: 1;
    }

    .cta-icon {
      font-size: 16px;
      transition: transform 0.3s ease;
      position: relative;
      z-index: 1;
    }

    .why-cta-btn:hover .cta-icon {
      transform: translateX(5px);
    }

    /* Responsive */
    @media (max-width: 1200px) {
      .project-info-grid {
        grid-template-columns: repeat(3, 1fr);
        padding: 25px;
        gap: 20px;
      }
    }

    @media (max-width: 991px) {
      .why-content-wrapper {
        padding-right: 0 !important;
        margin-bottom: 30px;
      }

      .sec-title {
        font-size: 36px !important;
      }

      .why-description p {
        font-size: 16px !important;
      }

      .why-cta-btn {
        font-size: 16px;
        padding: 14px 30px;
      }

      .logo-overlay-box {
        top: 15px;
        left: 15px;
        padding: 12px 15px;
      }

      .logo-overlay-img {
        height: 60px !important;
      }

      .project-info-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        padding: 15px;
      }

      .info-card {
        padding: 10px;
      }

      .info-icon {
        width: 45px;
        height: 45px;
      }

      .info-icon i {
        font-size: 20px;
      }

      .info-value {
        font-size: 16px;
      }
    }

    @media (max-width: 576px) {
      .sec-title {
        font-size: 28px !important;
      }

      .why-description p {
        font-size: 15px !important;
        text-align: left !important;
      }

      .why-cta-btn {
        font-size: 15px;
        padding: 12px 25px;
        width: 100%;
        justify-content: center;
      }

      .logo-overlay-box {
        position: absolute;
        top: 8px;
        left: 8px;
        z-index: 10;
        background: rgba(255, 255, 255, 0.95);
        padding: 2px 3px;
        border-radius: 15px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
      }

      .logo-overlay-img {
        height: 55px !important;
      }

      .project-info-grid {
        grid-template-columns: 1fr;
        gap: 12px;
      }

      .info-card {
        padding: 10px;
      }

      .info-value {
        font-size: 15px;
      }
    }
  

/* ============================================
   CSS Block Separator
   ============================================ */


    /* Amenities Section - Enhanced & Smooth v2.0 */
    .amenities-section {
      padding: 80px 0;
    }

    .amenities-grid {
      margin-top: 10px;
    }

    .amenity-card {
      height: 100%;
      border-radius: 25px;
      overflow: hidden;
      position: relative;
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
      transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      background: #fff;
      will-change: transform;
    }

    .amenity-card:hover {
      transform: translateY(-12px) scale(1.02);
      box-shadow: 0 20px 50px rgba(200, 144, 106, 0.25);
      will-change: transform;
    }
    
    .amenity-card:not(:hover) {
      will-change: auto;
    }

    .amenity-image-wrapper {
      position: relative;
      width: 100%;
      height: 240px;
      overflow: hidden;
      background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
    }

    .amenity-image {
      aspect-ratio: 16/9;
      width: 100%;
      height: auto;
      object-fit: cover;
      object-position: center;
      transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.6s ease;
      display: block;
      filter: brightness(1);
    }

    .amenity-card:hover .amenity-image {
      transform: scale(1.12);
      filter: brightness(1.05);
    }

    .amenity-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.2) 30%,
        rgba(0, 0, 0, 0.7) 100%
      );
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      align-items: center;
      padding: 40px 30px;
      transition: all 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .amenity-card:hover .amenity-overlay {
      background: linear-gradient(
        180deg,
        rgba(200, 144, 106, 0.15) 0%,
        rgba(200, 144, 106, 0.45) 30%,
        rgba(200, 144, 106, 0.88) 100%
      );
    }

    .amenity-icon {
      width: 60px;
      height: 60px;
      background: rgba(255, 255, 255, 0.18);
      backdrop-filter: blur(15px);
      -webkit-backdrop-filter: blur(15px);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 25px;
      transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
      border: 2.5px solid rgba(255, 255, 255, 0.3);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    }

    .amenity-icon i {
      font-size: 38px;
      color: #ffffff;
      transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    }

    .amenity-card:hover .amenity-icon {
      background: rgba(255, 255, 255, 1);
      transform: scale(1.2) rotate(360deg);
      border-color: rgba(200, 144, 106, 0.5);
      box-shadow: 0 12px 30px rgba(200, 144, 106, 0.4);
    }

    .amenity-card:hover .amenity-icon i {
      color: #c8906a;
      transform: scale(1.15);
      filter: drop-shadow(0 3px 6px rgba(200, 144, 106, 0.3));
    }

    .amenity-title {
      font-size: 26px;
      font-weight: 700;
      color: #ffffff;
      margin-bottom: 14px;
      text-align: center;
      letter-spacing: 1px;
      text-shadow: 0 3px 20px rgba(0, 0, 0, 0.5);
      transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      text-transform: capitalize;
    }

    .amenity-card:hover .amenity-title {
      transform: scale(1.05);
      text-shadow: 0 4px 25px rgba(0, 0, 0, 0.6);
    }

    .amenity-description {
      font-size: 16px;
      color: rgba(255, 255, 255, 0.98);
      text-align: center;
      margin: 0;
      opacity: 0;
      transform: translateY(30px);
      transition: all 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s;
      line-height: 1.7;
      font-weight: 400;
      text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }

    .amenity-card:hover .amenity-description {
      opacity: 1;
      transform: translateY(0);
    }

    /* Responsive */
    @media (max-width: 991px) {
      .amenities-section {
        padding: 60px 0;
      }

      .sec-title {
        font-size: 36px !important;
      }

      .amenity-image-wrapper {
        height: auto;
      }

      .amenity-icon {
        width: 70px;
        height: 70px;
      }

      .amenity-icon i {
        font-size: 32px;
      }

      .amenity-title {
        font-size: 24px;
      }

      .amenity-description {
        font-size: 15px;
      }
    }

    @media (max-width: 576px) {
      .amenities-section {
        padding: 50px 0;
      }

      .sec-title {
        font-size: 28px !important;
      }

      .amenity-image-wrapper {
        height: auto;
      }

      .amenity-overlay {
        padding: 30px 25px;
      }

      .amenity-icon {
        width: 65px;
        height: 65px;
        margin-bottom: 18px;
      }

      .amenity-icon i {
        font-size: 28px;
      }

      .amenity-title {
        font-size: 22px;
        margin-bottom: 12px;
        letter-spacing: 0.8px;
      }

      .amenity-description {
        font-size: 14px;
        opacity: 1;
        transform: translateY(0);
        line-height: 1.6;
      }

      .amenity-card:hover {
        transform: translateY(-8px) scale(1.01);
      }

      .amenity-card:hover .amenity-image {
        transform: scale(1.08);
      }
    }

    /* Payment Plan Section - Smooth & Beautiful Design */
    .payment-plan-section {
      padding: 80px 0;
    }

    .payment-plan-grid {
      margin-top: 40px;
    }

    .payment-card {
      position: relative;
      background: #ffffff;
      border-radius: 24px;
      padding: 35px 28px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      overflow: hidden;
      border: 1px solid rgba(200, 144, 106, 0.1);
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      will-change: transform;
    }

    .payment-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(135deg, rgba(200, 144, 106, 0.02) 0%, rgba(200, 144, 106, 0.05) 100%);
      opacity: 0;
      transition: opacity 0.5s ease;
      border-radius: 24px;
    }

    .payment-card:hover {
      transform: translateY(-10px) scale(1.02);
      box-shadow: 0 12px 40px rgba(200, 144, 106, 0.2);
      border-color: rgba(200, 144, 106, 0.3);
    }

    .payment-card:hover::before {
      opacity: 1;
    }

    .payment-card:not(:hover) {
      will-change: auto;
    }

    .payment-card-featured {
      background: linear-gradient(135deg, #ffffff 0%, #fef9f6 100%);
      border: 2px solid rgba(200, 144, 106, 0.2);
      box-shadow: 0 6px 25px rgba(200, 144, 106, 0.15);
    }

    .payment-card-featured:hover {
      box-shadow: 0 15px 45px rgba(200, 144, 106, 0.25);
      border-color: rgba(200, 144, 106, 0.4);
    }

    .payment-badge {
      position: relative;
      width: 90px;
      height: 90px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 25px;
      box-shadow: 0 8px 20px rgba(45, 55, 72, 0.25);
      transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      z-index: 2;
    }

    .payment-card:hover .payment-badge {
      transform: scale(1.1) rotate(5deg);
      box-shadow: 0 12px 30px rgba(45, 55, 72, 0.35);
    }

    .payment-card-featured .payment-badge {
      box-shadow: 0 8px 20px rgba(200, 144, 106, 0.3);
    }

    .payment-card-featured:hover .payment-badge {
      box-shadow: 0 12px 30px rgba(200, 144, 106, 0.4);
    }

    .badge-percentage {
      color: #ffffff;
      font-size: 28px;
      font-weight: 700;
      letter-spacing: -1px;
      text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }

    .payment-content {
      position: relative;
      z-index: 2;
      width: 100%;
    }

    .payment-type {
      transition: color 0.3s ease;
    }

    .payment-card:hover .payment-type {
      color: #b87a5a !important;
    }

    .payment-details {
      transition: color 0.3s ease;
    }

    .payment-shine {
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(255, 255, 255, 0.3) 50%,
        transparent 70%
      );
      transform: rotate(45deg);
      transition: all 0.6s ease;
      opacity: 0;
    }

    .payment-card:hover .payment-shine {
      animation: shine 1.2s ease-in-out;
    }

    @keyframes shine {
      0% {
        opacity: 0;
        transform: translateX(-100%) translateY(-100%) rotate(45deg);
      }
      50% {
        opacity: 1;
      }
      100% {
        opacity: 0;
        transform: translateX(100%) translateY(100%) rotate(45deg);
      }
    }

    .featured-indicator {
      position: absolute;
      top: 15px;
      right: 15px;
      width: 36px;
      height: 36px;
      background: linear-gradient(135deg, #c8906a 0%, #b87a5a 100%);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ffffff;
      font-size: 14px;
      box-shadow: 0 4px 12px rgba(200, 144, 106, 0.3);
      animation: pulse 2s ease-in-out infinite;
      z-index: 3;
    }

    @keyframes pulse {
      0%, 100% {
        transform: scale(1);
        box-shadow: 0 4px 12px rgba(200, 144, 106, 0.3);
      }
      50% {
        transform: scale(1.1);
        box-shadow: 0 6px 18px rgba(200, 144, 106, 0.4);
      }
    }

    /* Responsive Design */
    @media (max-width: 992px) {
      .payment-plan-grid {
        margin-top: 30px;
      }

      .payment-card {
        padding: 30px 24px;
        margin-bottom: 20px;
      }

      .payment-badge {
        width: 80px;
        height: 80px;
        margin-bottom: 20px;
      }

      .badge-percentage {
        font-size: 24px;
      }
    }

    @media (max-width: 768px) {
      .payment-plan-section {
        padding: 60px 0;
      }

      .payment-card {
        padding: 28px 20px;
        border-radius: 20px;
      }

      .payment-badge {
        width: 75px;
        height: 75px;
        margin-bottom: 18px;
      }

      .badge-percentage {
        font-size: 22px;
      }

      .payment-type {
        font-size: 16px !important;
      }

      .payment-details {
        font-size: 14px !important;
      }
    }
  

/* ============================================
   CSS Block Separator
   ============================================ */


      .location-item:hover {
        transform: translateX(5px);
        box-shadow: 0 6px 20px rgba(200, 144, 106, 0.2);
      }

      .map-wrapper {
        transition: all 0.5s ease;
      }

      .map-wrapper:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
      }

      .map-image {
        transition: transform 0.5s ease;
      }

      .map-wrapper:hover .map-image {
        transform: scale(1.02);
      }

      @media (max-width: 991px) {
        .map-wrapper {
          height: 450px !important;
        }

        .locations-list {
          padding-left: 0 !important;
          margin-top: 30px;
        }

        .location-item {
          padding: 15px !important;
        }

        .location-icon {
          width: 45px !important;
          height: 45px !important;
          margin-right: 15px !important;
        }

        .location-icon i {
          font-size: 20px !important;
        }

        .location-info h5 {
          font-size: 16px !important;
        }
      }

      @media (max-width: 576px) {
        .map-wrapper {
          height: 350px !important;
        }

        .location-item {
          margin-bottom: 15px !important;
          padding: 12px !important;
        }

        .location-icon {
          width: 40px !important;
          height: 40px !important;
        }

        .location-icon i {
          font-size: 18px !important;
        }

        .location-info h5 {
          font-size: 15px !important;
        }

        .location-info p {
          font-size: 13px !important;
        }
      }
    

/* ============================================
   CSS Block Separator
   ============================================ */


      .project-card {
        transition: all 0.3s ease !important;
        border: 1px solid rgba(0, 0, 0, 0.08);
      }
      
      .project-card:hover {
        transform: translateY(-5px) !important;
        box-shadow: 0 15px 35px rgba(0,0,0,0.15) !important;
        will-change: transform;
      }
      
      .project-card:not(:hover) {
        will-change: auto;
      }
      
      .project-image {
        transition: all 0.3s ease;
      }
      
      .project-card:hover .project-image {
        transform: scale(1.02);
      }
      
      .project-logo img {
        transition: all 0.3s ease;
      }
      
      .project-card:hover .project-logo img {
        transform: scale(1.05);
      }
      
      .stat-item {
        transition: all 0.3s ease;
      }
      
      .stat-item:hover {
        transform: translateY(-2px);
      }
      
      /* Price and Handover Overlays */
      .project-image-wrapper > div {
        transition: all 0.3s ease;
      }
      
      .project-card:hover .project-image-wrapper > div {
        transform: scale(1.05);
      }
      
      /* Read More Button Styles */
      .read-more-btn {
        box-shadow: 0 4px 15px rgb(0 0 0 / 30%) !important;
        z-index: 10;
        position: relative;
      }
      
      .read-more-btn:hover {
        text-decoration: none !important;
        color: white !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 8px 25px rgba(212, 175, 55, 0.4) !important;
      }
      
      .read-more-btn i {
        transition: transform 0.3s ease;
      }
      
      .read-more-btn:hover i {
        transform: translateX(3px);
      }
      
      .read-more-section {
        margin-top: 15px !important;
        padding: 0px 0 !important;
        display: block !important;
        visibility: visible !important;
      }
      
      @media (max-width: 991px) {
        .project-card {
          margin-bottom: 2rem;
        }
        
        .project-stats {
          flex-direction: column;
        }
        
        .stat-item {
          margin-bottom: 10px;
          margin-right: 0 !important;
        }
      }
      
      /* Smooth entrance animation */
      .project-card {
        will-change: transform, opacity;
      }
    

/* ============================================
   CSS Block Separator
   ============================================ */


    .floating-actions {
      animation: slideInRight 0.5s ease-out;
    }
    
    @keyframes slideInRight {
      from {
        opacity: 0;
        transform: translateY(-50%) translateX(100px);
      }
      to {
        opacity: 1;
        transform: translateY(-50%) translateX(0);
      }
    }
    
    .floating-btn {
      position: relative;
      z-index: 1;
    }
    
    .floating-btn:hover {
      transform: scale(1.1) !important;
    }
    
    .floating-btn:hover .tooltip {
      opacity: 1 !important;
      visibility: visible !important;
    }
    
    .floating-btn:active {
      transform: scale(0.95) !important;
    }
    
    /* Pulse Glow Animation for WhatsApp Button */
    .whatsapp-btn {
      animation: pulseGlowWhatsApp 2s ease-in-out infinite;
    }
    
    @keyframes pulseGlowWhatsApp {
      0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7),
                    0 0 0 0 rgba(37, 211, 102, 0.4);
      }
      50% {
        box-shadow: 0 0 0 10px rgba(37, 211, 102, 0),
                    0 0 0 20px rgba(37, 211, 102, 0);
      }
      100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0),
                    0 0 0 0 rgba(37, 211, 102, 0);
      }
    }
    
    /* Pulse Glow Animation for Phone Button */
    .phone-btn {
      animation: pulseGlowPhone 2s ease-in-out infinite;
    }
    
    @keyframes pulseGlowPhone {
      0% {
        box-shadow: 0 0 0 0 rgba(66, 133, 244, 0.7),
                    0 0 0 0 rgba(66, 133, 244, 0.4);
      }
      50% {
        box-shadow: 0 0 0 10px rgba(66, 133, 244, 0),
                    0 0 0 20px rgba(66, 133, 244, 0);
      }
      100% {
        box-shadow: 0 0 0 0 rgba(66, 133, 244, 0),
                    0 0 0 0 rgba(66, 133, 244, 0);
      }
    }
    
    /* Pulse Glow Animation for Scroll Top Button */
    .scroll-top-btn {
      animation: pulseGlowScrollTop 2s ease-in-out infinite;
    }
    
    @keyframes pulseGlowScrollTop {
      0% {
        box-shadow: 0 0 0 0 rgba(200, 144, 106, 0.7),
                    0 0 0 0 rgba(200, 144, 106, 0.4);
      }
      50% {
        box-shadow: 0 0 0 10px rgba(200, 144, 106, 0),
                    0 0 0 20px rgba(200, 144, 106, 0);
      }
      100% {
        box-shadow: 0 0 0 0 rgba(200, 144, 106, 0),
                    0 0 0 0 rgba(200, 144, 106, 0);
      }
    }
    
    /* Act Now Banner Styles */
    .act-now-section {
      position: relative;
    }
    
    .act-now-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background:linear-gradient(135deg, rgb(0 0 0 / 0%) 0%, rgb(0 0 0 / 47%) 50%, rgba(0, 0, 0, 0.5) 100%);
      z-index: 1;
    }
    
    .act-now-btn {
      position: relative;
      overflow: hidden;
    }
    
    .act-now-btn::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: rgba(255, 255, 255, 0.2);
      transition: left 0.5s ease;
    }
    
    .act-now-btn:hover::before {
      left: 100%;
    }
    
    .act-now-btn:hover {
      background: rgba(255, 255, 255, 0.1) !important;
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    }
    
    /* Mobile responsive */
    @media (max-width: 768px) {
      .floating-actions {
        right: 15px;
        gap: 12px;
      }
      
      .floating-btn {
        width: 50px !important;
        height: 50px !important;
      }
      
      .floating-btn i {
        font-size: 16px !important;
      }
      
      .tooltip {
        display: none !important;
      }
      
      /* Act Now Banner Mobile */
      .act-now-heading {
        font-size: 28px !important;
      }
      
      .act-now-subheading {
        font-size: 16px !important;
      }
      
      .act-now-buttons {
        flex-direction: column;
        align-items: center;
      }
      
      .act-now-btn {
        width: 100%;
        max-width: 300px;
      }
    }
  

/* ============================================
   CSS Block Separator
   ============================================ */


          .footer-bottom {
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;
            height: auto !important;
            overflow: visible !important;
            position: relative !important;
            z-index: 1 !important;
          }
          
          @media (max-width: 768px) {
            .footer-bottom {
              padding: 30px 15px !important;
              background: transparent !important;
              border-radius: 15px !important;
              margin: 0 15px 20px 15px !important;
              box-shadow: 0 8px 25px rgba(0,0,0,0.3) !important;
              display: block !important;
              min-height: auto !important;
              position: relative !important;
              z-index: 10 !important;
            }
            .footer-bottom .footer-divider {
              display: none !important;
            }
            .footer-bottom .row {
              justify-content: center !important;
              flex-direction: column !important;
              gap: 20px !important;
            }
            .footer-bottom .col-auto {
              flex: 0 0 auto !important;
              width: 100% !important;
              max-width: 320px !important;
              margin: 0 auto !important;
            }
            .footer-info {
              text-align: center !important;
              display: flex !important;
              flex-direction: column !important;
              align-items: center !important;
              padding: 20px 15px !important;
              background: rgba(255,255,255,0.95) !important;
              border-radius: 12px !important;
              margin: 0 !important;
              box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
              border: 2px solid rgba(255,255,255,0.1) !important;
              backdrop-filter: blur(10px) !important;
              transition: all 0.3s ease !important;
            }
            .footer-info:hover {
              transform: translateY(-2px) !important;
              box-shadow: 0 6px 20px rgba(0,0,0,0.15) !important;
              background: rgba(255,255,255,1) !important;
            }
            .footer-info_icon {
              margin-bottom: 10px !important;
              font-size: 24px !important;
              color: var(--theme-color) !important;
            }
            .footer-info_label {
              font-weight: 600 !important;
              font-size: 18px !important;
              color: #333 !important;
              margin-bottom: 5px !important;
              display: block !important;
            }
            .footer-info_link {
              font-size: 16px !important;
              color: #666 !important;
              line-height: 1.4 !important;
            }
            .footer-info_link a {
              color: var(--theme-color) !important;
              text-decoration: none !important;
              font-weight: 500 !important;
            }
            .footer-info_link a:hover {
              color: #1e3c72 !important;
              text-decoration: underline !important;
            }
            .media-body {
              text-align: center !important;
            }
          }
          
          @media (max-width: 480px) {
            .footer-bottom {
              margin: 0 10px !important;
              padding: 25px 10px !important;
            }
            .footer-bottom .col-auto {
              width: 95% !important;
              max-width: 280px !important;
            }
            .footer-info {
              padding: 18px 12px !important;
            }
            .footer-info_icon {
              font-size: 22px !important;
            }
            .footer-info_label {
              font-size: 18px !important;
            }
            .footer-info_link {
              font-size: 16px !important;
            }
          }
          
          @media (min-width: 769px) and (max-width: 990px) {
            .footer-bottom {
              padding: 30px 15px !important;
              background: transparent;
              border-radius: 15px !important;
              margin: 0 15px 20px 15px !important;
              box-shadow: 0 8px 25px rgba(0,0,0,0.3) !important;
              display: block !important;
              visibility: visible !important;
              opacity: 1 !important;
            }
            .footer-bottom .row {
              flex-direction: column !important;
              gap: 20px !important;
            }
            .footer-bottom .col-auto {
              flex: 0 0 auto !important;
              width: 100% !important;
              max-width: 400px !important;
              margin: 0 auto !important;
            }
            .footer-info {
              background: rgb(71 71 71 / 95%) !important;
              border-radius: 12px !important;
              padding: 20px 15px !important;
              margin: 0 !important;
              box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
              backdrop-filter: blur(10px) !important;
            }
            .footer-bottom .footer-divider {
              display: none !important;
            }
          }

          @media (min-width: 991px) {
            .footer-bottom .row {
              flex-direction: row !important;
            }
            .footer-bottom {
              background: transparent !important;
              box-shadow: none !important;
              border-radius: 0 !important;
              margin: 0 !important;
              padding: 20px 0 !important;
            }
            .footer-info {
              background: transparent !important;
              box-shadow: none !important;
              border: none !important;
              backdrop-filter: none !important;
              padding: 0 !important;
            }
          }
          
          /* Ensure footer is visible on all screen sizes */
          @media (max-width: 990px) {
            .footer-bottom {
              display: block !important;
              visibility: visible !important;
              opacity: 1 !important;
              height: auto !important;
              overflow: visible !important;
              position: relative !important;
              z-index: 1 !important;
            }
            
            /* Force footer columns to be visible */
            .footer-col {
              display: block !important;
              visibility: visible !important;
              opacity: 1 !important;
            }
            
            /* Ensure footer is always visible */
            .footer-bottom .col-auto {
              display: block !important;
              visibility: visible !important;
              opacity: 1 !important;
            }
          }

          /* Force mobile styles for smaller screens */
          @media screen and (max-width: 767px) {
            .footer-bottom {
              padding: 30px 15px !important;
              background: transparent !important;
              border-radius: 15px !important;
              margin: 0 15px 20px 15px !important;
              box-shadow: 0 8px 25px rgba(0,0,0,0.3) !important;
            }
            
            .footer-info {
              background: rgba(255,255,255,0.95) !important;
              border-radius: 12px !important;
              padding: 20px 15px !important;
              margin: 0 !important;
              box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
              backdrop-filter: blur(10px) !important;
            }
          }
        

/* ============================================
   CSS Block Separator
   ============================================ */


    /* Enhanced Smooth User Type Selection Styling */
    .user-type-option {
      position: relative;
      flex: 1;
      max-width: 165px;
    }
    
    .user-type-option .form-check-input {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }
    
    .user-type-label {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 8px 16px;
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.08));
      border: 1.5px solid rgba(255, 255, 255, 0.25);
      border-radius: 18px;
      cursor: pointer;
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      /* min-height: 110px; */
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
      position: relative;
      overflow: hidden;
    }
    
    /* Smooth gradient overlay effect */
    .user-type-label::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent);
      opacity: 0;
      transition: opacity 0.4s ease;
    }
    
    .user-type-label:hover::before {
      opacity: 1;
    }
    
    .user-type-label i {
      font-size: 36px;
      color: rgba(255, 255, 255, 0.95);
      margin-bottom: 12px;
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
    }
    
    .user-type-label span {
      color: rgba(255, 255, 255, 0.95);
      font-weight: 600;
      font-size: 16px;
      letter-spacing: 0.3px;
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    }
    
    .user-type-label:hover {
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.12));
      border-color: rgba(255, 255, 255, 0.4);
      transform: translateY(-2px) scale(1.02);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    }
    
    .user-type-label:hover i {
      transform: scale(1.08);
    }
    
    /* Checked state - smooth gradient */
    .user-type-option .form-check-input:checked + .user-type-label {
      background: linear-gradient(135deg, 
        rgba(200, 144, 106, 0.95) 0%, 
        rgba(210, 105, 30, 0.90) 50%,
        rgba(168, 104, 58, 0.95) 100%);
      border-color: rgba(200, 144, 106, 0.8);
      box-shadow: 
        0 6px 24px rgba(200, 144, 106, 0.35),
        0 2px 8px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
      transform: translateY(-2px) scale(1.02);
    }
    
    .user-type-option .form-check-input:checked + .user-type-label::before {
      opacity: 0.3;
    }
    
    .user-type-option .form-check-input:checked + .user-type-label i,
    .user-type-option .form-check-input:checked + .user-type-label span {
      color: #ffffff;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
    }
    
    .user-type-option .form-check-input:checked + .user-type-label i {
      transform: scale(1.12);
      filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.3));
    }
    
    /* Active state */
    .user-type-label:active {
      transform: translateY(-1px) scale(1.01);
    }
    
    /* Mobile responsive */
    @media (max-width: 576px) {
      .user-type-option {
        max-width: 145px;
      }
      
      .user-type-label {
        padding: 8px 16px;
        /* min-height: 100px; */
        border-radius: 16px;
      }
      
      .user-type-label i {
        font-size: 30px;
        margin-bottom: 10px;
      }
      
      .user-type-label span {
        font-size: 15px;
      }
    }
    
    @media (max-width: 400px) {
      .user-type-option {
        max-width: 135px;
      }
      
      .user-type-label {
        padding: 8px 16px;
        /* min-height: 95px; */
      }
      
      .user-type-label i {
        font-size: 28px;
      }
      
      .user-type-label span {
        font-size: 14px;
      }
    }
    
    /* Form Fields Animation */
    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(-10px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    
    .broker-fields, .client-fields, .broker-fields-2, .client-fields-2 {
      transition: all 0.3s ease;
    }
    
    /* Select Styling */
    .form-control select,
    select.form-control {
      background-color: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.2);
      color: white;
      padding: 12px 15px;
    }
    
    .form-control select option,
    select.form-control option {
      background-color: #2d3748;
      color: white;
    }

    /* Inquiry Modal - Luxury & Classic Design */
    .inquiry-modal-dialog {
      max-width: 650px;
      margin: 1.75rem auto;
      z-index: 10001;
      position: relative;
    }

    .inquiry-modal-content {
      border: none;
      border-radius: 24px;
      overflow: hidden;
      box-shadow: 0 25px 80px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(200, 144, 106, 0.1);
      background: #ffffff;
      animation: modalFadeIn 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      position: relative;
      z-index: 10001;
    }

    .inquiry-modal-content::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: linear-gradient(90deg, #d4af37 0%, #c8906a 50%, #d4af37 100%);
      z-index: 1;
    }

    @keyframes modalFadeIn {
      from {
        opacity: 0;
        transform: translateY(-30px) scale(0.96);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    /* Elegant Header */
    .inquiry-modal-header {
      background: linear-gradient(135deg, #faf8f3 0%, #ffffff 100%);
      border: none;
      padding: 0;
      position: relative;
      overflow: hidden;
    }

    .inquiry-modal-header::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: 
        radial-gradient(circle at 20% 30%, rgba(212, 175, 55, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(200, 144, 106, 0.06) 0%, transparent 50%);
      pointer-events: none;
    }

    .modal-header-content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 32px 40px 24px;
      position: relative;
      z-index: 1;
    }

    .modal-title-wrapper {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .modal-title-icon {
      width: 56px;
      height: 56px;
      background: linear-gradient(135deg, #d4af37 0%, #c8906a 100%);
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 8px 20px rgba(212, 175, 55, 0.3);
      position: relative;
    }

    .modal-title-icon::after {
      content: '';
      position: absolute;
      inset: -2px;
      border-radius: 18px;
      padding: 2px;
      background: linear-gradient(135deg, #d4af37, #c8906a, #d4af37);
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      opacity: 0.5;
    }

    .modal-title-icon i {
      font-size: 24px;
      color: #ffffff;
      text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }

    .modal-title {
      font-family: 'Playfair Display', serif;
      font-size: 32px;
      font-weight: 700;
      color: #1a1a1a;
      margin: 0;
      letter-spacing: -0.5px;
      line-height: 1.2;
    }

    .modal-subtitle {
      font-size: 14px;
      color: #666;
      margin: 4px 0 0 0;
      font-weight: 400;
      letter-spacing: 0.5px;
      text-transform: uppercase;
    }

    .inquiry-modal-close {
      position: absolute;
      top: 20px;
      right: 20px;
      width: 40px;
      height: 40px;
      border-radius: 12px;
      background: rgba(200, 144, 106, 0.1);
      border: 1px solid rgba(200, 144, 106, 0.2);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      padding: 0;
      margin: 0;
      opacity: 0.7;
      z-index: 10;
    }

    .inquiry-modal-close i {
      font-size: 18px;
      color: #333;
      transition: all 0.3s ease;
    }

    .inquiry-modal-close:hover {
      background: rgba(200, 144, 106, 0.2);
      border-color: rgba(200, 144, 106, 0.4);
      opacity: 1;
      transform: rotate(90deg) scale(1.05);
    }

    .inquiry-modal-close:hover i {
      color: #c8906a;
    }

    .modal-header-divider {
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(200, 144, 106, 0.3), transparent);
      margin: 0 40px;
    }

    /* Elegant Body */
    .inquiry-modal-body {
      padding: 40px;
      max-height: 75vh;
      overflow-y: auto;
      background: #ffffff;
      position: relative;
    }

    .inquiry-modal-body::-webkit-scrollbar {
      width: 6px;
    }

    .inquiry-modal-body::-webkit-scrollbar-track {
      background: #f5f5f5;
      border-radius: 10px;
    }

    .inquiry-modal-body::-webkit-scrollbar-thumb {
      background: linear-gradient(180deg, #d4af37, #c8906a);
      border-radius: 10px;
    }

    .inquiry-modal-body::-webkit-scrollbar-thumb:hover {
      background: linear-gradient(180deg, #c8906a, #a8704a);
    }

    /* Form Styling in Modal */
    #inquiryModal .form-style1 {
      position: relative;
    }

    #inquiryModal .form-group {
      margin-bottom: 24px;
    }

    #inquiryModal .form-label {
      font-size: 15px;
      font-weight: 600;
      color: #2c3e50;
      margin-bottom: 12px;
      letter-spacing: 0.3px;
    }

    #inquiryModal .form-control {
      border: 2px solid #e8e8e8;
      border-radius: 12px;
      padding: 14px 18px;
      font-size: 15px;
      transition: all 0.3s ease;
      background: #ffffff;
      color: #333;
    }

    #inquiryModal .form-control:focus {
      border-color: #c8906a;
      box-shadow: 0 0 0 4px rgba(200, 144, 106, 0.1);
      outline: none;
    }

    #inquiryModal .form-control::placeholder {
      color: #999;
      font-weight: 400;
    }

    #inquiryModal select.form-control {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23c8906a' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 18px center;
      padding-right: 45px;
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
    }

    #inquiryModal .vs-btn.style2 {
      background: linear-gradient(135deg, #4c4c4c 0%, #000000 100%);
      border: none;
      border-radius: 12px;
      padding: 16px 32px;
      font-size: 16px;
      font-weight: 600;
      color: #ffffff;
      text-transform: uppercase;
      letter-spacing: 1px;
      box-shadow: 0 8px 25px rgba(200, 144, 106, 0.3);
      transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      position: relative;
      overflow: hidden;
    }

    #inquiryModal .vs-btn.style2::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
      transition: left 0.5s ease;
    }

    #inquiryModal .vs-btn.style2:hover::before {
      left: 100%;
    }

    #inquiryModal .vs-btn.style2:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 35px rgba(200, 144, 106, 0.4);
      background: linear-gradient(135deg, #d4a574 0%, #c8906a 100%);
    }

    #inquiryModal .vs-btn.style2:active {
      transform: translateY(0);
    }

    /* Backdrop */
    #inquiryModal .modal-backdrop {
      background: linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.5) 100%);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      z-index: 10000 !important;
    }
    
    /* Ensure modal is above header */
    #inquiryModal.modal {
      z-index: 10001 !important;
    }
    
    .modal-backdrop.show {
      z-index: 10000 !important;
    }

    /* Responsive Design */
    @media (max-width: 991px) {
      .inquiry-modal-dialog {
        max-width: 90%;
        margin: 1rem auto;
      }
      
      .modal-header-content {
        padding: 28px 30px 20px;
      }
      
      .modal-title {
        font-size: 28px;
      }
      
      .modal-title-icon {
        width: 48px;
        height: 48px;
      }
      
      .modal-title-icon i {
        font-size: 20px;
      }
      
      .inquiry-modal-body {
        padding: 30px;
      }
    }

    @media (max-width: 768px) {
      .inquiry-modal-dialog {
        max-width: 95%;
        margin: 0.5rem auto;
      }
      
      .inquiry-modal-content {
        border-radius: 20px;
      }
      
      .modal-header-content {
        padding: 24px 20px 16px;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
      }
      
      .modal-title-wrapper {
        width: 100%;
      }
      
      .modal-title {
        font-size: 24px;
      }
      
      .modal-subtitle {
        font-size: 12px;
      }
      
      .inquiry-modal-body {
        padding: 24px 20px;
        max-height: 70vh;
      }
      
      #inquiryModal .form-control {
        padding: 12px 16px;
        font-size: 14px;
      }
      
      #inquiryModal .vs-btn.style2 {
        padding: 14px 24px;
        font-size: 14px;
      }
    }

    @media (max-width: 480px) {
      .modal-title-icon {
        width: 40px;
        height: 40px;
      }
      
      .modal-title-icon i {
        font-size: 18px;
      }
      
      .modal-title {
        font-size: 20px;
      }
      
      .inquiry-modal-body {
        padding: 20px 16px;
      }
    }