body {
             font-family: 'Inter', sans-serif;
             overflow-x: hidden;
             background-color: #f9fafb;
   }

   h1,
   h2,
   h3 {
             font-family: 'Poppins', sans-serif;
   }

   /* Glassmorphism Utilities */
   .glass-nav {
             background: rgba(255, 255, 255, 0.1);
             backdrop-filter: blur(12px);
             -webkit-backdrop-filter: blur(12px);
             border-bottom: 1px solid rgba(255, 255, 255, 0.2);
             transition: all 0.4s ease;
   }

   .glass-nav.scrolled {
             background: rgba(15, 143, 148, 0.95);
             border-bottom: none;
             box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
   }

   .glass-panel {
             background: rgba(255, 255, 255, 0.85);
             backdrop-filter: blur(16px);
             border: 1px solid rgba(255, 255, 255, 0.5);
   }

   /* Hero Image */
   .hero-bg {
             background: url('https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?ixlib=rb-4.0.3&auto=format&fit=crop&w=2000&q=80') center/cover no-repeat;
   }

   .hero-overlay {
             background: linear-gradient(to right, rgba(15, 143, 148, 0.85), rgba(42, 187, 199, 0.4));
   }

   /* Nav Hover Animation */
   .nav-link {
             position: relative;
   }

   .nav-link::after {
             content: '';
             position: absolute;
             width: 0;
             height: 2px;
             bottom: -4px;
             left: 0;
             background-color: #2ABBC7;
             transition: width 0.3s ease;
   }

   .nav-link:hover::after {
             width: 100%;
   }

   .mobile-menu-toggle {
             width: 2.85rem;
             height: 2.85rem;
             display: inline-grid;
             place-items: center;
             border: 1px solid rgba(255, 255, 255, 0.35);
             background: rgba(255, 255, 255, 0.14);
             color: #ffffff;
             border-radius: 10px;
             backdrop-filter: blur(14px);
             -webkit-backdrop-filter: blur(14px);
             transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
   }

   .mobile-menu-toggle:hover {
             transform: translateY(-1px);
             background: rgba(255, 255, 255, 0.22);
             border-color: rgba(255, 255, 255, 0.55);
   }

   .mobile-menu-panel {
             position: absolute;
             left: 1rem;
             right: 1rem;
             top: calc(100% + 0.75rem);
             display: grid;
             gap: 0.35rem;
             padding: 0.9rem;
             background: rgba(7, 11, 19, 0.96);
             border: 1px solid rgba(255, 255, 255, 0.12);
             border-radius: 14px;
             box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
             opacity: 0;
             pointer-events: none;
             transform: translateY(-8px);
             transition: opacity 0.25s ease, transform 0.25s ease;
   }

   .mobile-menu-panel.is-open {
             opacity: 1;
             pointer-events: auto;
             transform: translateY(0);
   }

   .mobile-menu-panel a {
             display: flex;
             align-items: center;
             min-height: 2.85rem;
             padding: 0 0.9rem;
             color: rgba(255, 255, 255, 0.78);
             font-family: 'Poppins', sans-serif;
             font-size: 0.86rem;
             font-weight: 600;
             transition: color 0.2s ease, background 0.2s ease;
             border-radius: 10px;
   }

   .mobile-menu-panel a:hover,
   .mobile-menu-panel a.is-active {
             color: #ffffff;
             background: rgba(42, 187, 199, 0.14);
   }

   .mobile-menu-panel .mobile-menu-cta {
             justify-content: center;
             margin-top: 0.4rem;
             background: #E69122;
             color: #ffffff;
   }

   /* Card Hover Effects */
   .property-card {
             transition: transform 0.4s ease, box-shadow 0.4s ease;
   }

   .property-card:hover {
             transform: translateY(-8px);
             box-shadow: 0 20px 25px -5px rgba(15, 143, 148, 0.1), 0 10px 10px -5px rgba(15, 143, 148, 0.04);
   }

   .property-card img {
             transition: transform 0.6s ease;
   }

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

   /* STRICTLY SCOPED SWIPER CSS (Keeps arrows off the Hero section) */
   .recent-projects-swiper .swiper-pagination-bullet-active {
             background-color: #0F8F94 !important;
   }

   .recent-projects-swiper .swiper-button-next,
   .recent-projects-swiper .swiper-button-prev {
             color: #0F8F94 !important;
             background: white;
             width: 45px;
             height: 45px;
             border-radius: 50%;
             box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
             top: 45%;
   }

   .recent-projects-swiper .swiper-button-next:after,
   .recent-projects-swiper .swiper-button-prev:after {
             font-size: 18px !important;
             font-weight: 900;
   }

   .recent-projects-swiper .swiper-wrapper {
             flex-wrap: nowrap !important;
   }

   .recent-projects-swiper.is-fallback-carousel,
   .categories-swiper.is-fallback-carousel {
             overflow: hidden;
   }

   .recent-projects-swiper.is-fallback-carousel .swiper-wrapper,
   .categories-swiper.is-fallback-carousel .swiper-wrapper {
             display: flex;
             gap: 16px;
             overflow-x: auto;
             scroll-behavior: smooth;
             scroll-snap-type: x mandatory;
             scrollbar-width: none;
   }

   .recent-projects-swiper.is-fallback-carousel .swiper-wrapper::-webkit-scrollbar,
   .categories-swiper.is-fallback-carousel .swiper-wrapper::-webkit-scrollbar {
             display: none;
   }

   .recent-projects-swiper.is-fallback-carousel .swiper-slide,
   .categories-swiper.is-fallback-carousel .swiper-slide {
             flex: 0 0 calc(100% - 32px);
             scroll-snap-align: start;
   }

   @media (min-width: 640px) {
             .recent-projects-swiper.is-fallback-carousel .swiper-slide {
                       flex-basis: calc(50% - 16px);
             }

             .categories-swiper.is-fallback-carousel .swiper-slide {
                       flex-basis: calc(33.333% - 16px);
             }
   }

   @media (min-width: 1024px) {
             .recent-projects-swiper.is-fallback-carousel .swiper-slide {
                       flex-basis: calc(33.333% - 16px);
             }

             .categories-swiper.is-fallback-carousel .swiper-slide {
                       flex-basis: calc(25% - 18px);
             }
   }

   @media (min-width: 1280px) {
             .recent-projects-swiper.is-fallback-carousel .swiper-slide {
                       flex-basis: calc(25% - 24px);
             }

             .categories-swiper.is-fallback-carousel .swiper-slide {
                       flex-basis: calc(20% - 26px);
             }
   }

   @media (max-width: 768px) {

             .recent-projects-swiper .swiper-button-next,
             .recent-projects-swiper .swiper-button-prev {
                       display: none !important;
             }
   }

   /* Categories Swiper Dots */
   .categories-swiper .swiper-pagination-bullet {
             background-color: #cbd5e1;
             opacity: 1;
             transition: all 0.3s ease;
   }

   .categories-swiper .swiper-pagination-bullet-active {
             background-color: #0F8F94 !important;
             width: 24px;
             border-radius: 8px;
   }

   .categories-swiper .swiper-wrapper {
             flex-wrap: nowrap !important;
   }


   /* Premium custom vertical track thumb definitions */
   .custom-scrollbar::-webkit-scrollbar {
             width: 6px;
   }

   .custom-scrollbar::-webkit-scrollbar-track {
             background: #f3f4f6;
             border-radius: 8px;
   }

   .custom-scrollbar::-webkit-scrollbar-thumb {
             background: #2ABBC7;
             border-radius: 8px;
             transition: background 0.3s ease;
   }

   .custom-scrollbar::-webkit-scrollbar-thumb:hover {
             background: #0F8F94;
   }

   /* Active dynamic toggle states matching luxury architecture guidelines */
   .locality-btn.active-locality {
             background-color: #EAF4F5 !important;
             border-color: #0F8F94 !important;
             box-shadow: 0 10px 15px -3px rgba(15, 143, 148, 0.1);
   }

   .locality-btn.active-locality span {
             color: #0F8F94 !important;
             font-weight: 600;
   }

   

   /* Styling rules to establish the responsive tab interface architecture */
   .review-tab-btn.active-review-tab {
             background-color: #0F8F94 !important;
             border-color: #0F8F94 !important;
             transform: scale(1.02);
             box-shadow: 0 10px 25px -5px rgba(15, 143, 148, 0.25);
   }

   .review-tab-btn.active-review-tab h4 {
             color: white !important;
   }

   .review-tab-btn.active-review-tab p {
             color: rgba(255, 255, 255, 0.7) !important;
   }

   .review-tab-btn.active-review-tab .icon-box {
             background-color: rgba(255, 255, 255, 0.15) !important;
             border-color: rgba(255, 255, 255, 0.1) !important;
   }

   .review-tab-btn.active-review-tab .icon-box i {
             color: white !important;
   }

   /* Micro-interactive continuous floating loop animation for illustration graphics */
   @keyframes floatingGraphicsLoop {
             0% {
                       transform: translateY(0px);
             }

             50% {
                       transform: translateY(-10px);
             }

             100% {
                       transform: translateY(0px);
             }
   }

   .animate-float {
             animation: floatingGraphicsLoop 4s ease-in-out infinite;
   }


   /* Next-Gen Interactive Typography Mapping Styles */
   .footer-interactive-link {
             position: relative;
             transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
   }

   .footer-interactive-link span {
             position: relative;
             z-index: 2;
   }

   .footer-interactive-link:hover {
             color: #ffffff !important;
             padding-left: 6px;
   }

   /* Premium dark theme custom background adjustments */
   footer input:focus {
             box-shadow: 0 0 25px rgba(42, 187, 199, 0.15) !important;
   }

    /* Strictly scoped swiper controls to prevent clashing with other sliders */
    .testimonial-swiper-deck .swiper-pagination-bullet-active {
              background-color: #0F8F94 !important;
              width: 24px;
              border-radius: 8px;
    }

    .testimonial-swiper-deck .swiper-wrapper {
              flex-wrap: nowrap !important;
    }

    .testimonial-swiper-deck.is-fallback-carousel {
              overflow: hidden;
    }

    .testimonial-swiper-deck.is-fallback-carousel .swiper-wrapper {
              display: flex;
              gap: 16px;
              overflow-x: auto;
              scroll-behavior: smooth;
              scroll-snap-type: x mandatory;
              scrollbar-width: none;
    }

    .testimonial-swiper-deck.is-fallback-carousel .swiper-wrapper::-webkit-scrollbar {
              display: none;
    }

    .testimonial-swiper-deck.is-fallback-carousel .swiper-slide {
              flex: 0 0 calc(100% - 32px);
              scroll-snap-align: start;
    }

    /* Fixed equal height strategy for layout uniformity */
    .testimonial-swiper-deck .swiper-slide {
              height: auto !important;
    }

    /* Custom Continuous Linear Motion Engine Rules for Partners */
    .partner-marquee-swiper .swiper-wrapper {
              -webkit-transition-timing-function: linear !important;
              -o-transition-timing-function: linear !important;
              transition-timing-function: linear !important;
              flex-wrap: nowrap !important;
    }

    .partner-capsule img {
              will-change: transform, filter;
              backface-visibility: hidden;
    }

 

    /* Force navbar contents to align without standard left padding limits */
    .glass-nav {
              padding-left: 0px !important;
              overflow: visible !important;
    }

    .glass-nav .max-w-7xl {
              padding-left: 0px !important;
              overflow: visible !important;
    }

    /* Architectural Angled White Logo Block as seen in image_684165.png */
    .nav-logo-trapezoid {
              background-color: #ffffff;
              /* Slices the block on a sharp angle from top-right down to bottom-left */
              clip-path: polygon(0 0, 100% 0, 82% 100%, 0 100%);
              box-shadow: 10px 0 30px rgba(0, 0, 0, 0.15);
              height: 100%;
              display: flex;
              align-items: center;
              /* Padding configured to push layout away from the slice edge */
              padding-left: 2rem;
              padding-right: 3.5rem;
    }

    /* Custom Continuous Linear Motion Engine Rules */
    .developer-marquee-swiper .swiper-wrapper {
              -webkit-transition-timing-function: linear !important;
              -o-transition-timing-function: linear !important;
              transition-timing-function: linear !important;
              flex-wrap: nowrap !important;
    }

    /* Clear focus styles to prevent unwanted visual blinking during loop jumps */
    .developer-capsule img {
              will-change: transform, filter;
              backface-visibility: hidden;
    }

    /* Custom Design Token Overrides for the Link Module Directory Box */
    .directory-tab-btn.active-directory-tab {
              background-color: #0F8F94 !important;
              border-color: #0F8F94 !important;
              color: #ffffff !important;
              box-shadow: 0 10px 15px -3px rgba(15, 143, 148, 0.2);
    }

    .seo-link-item {
              transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .seo-link-item:hover {
              padding-left: 6px;
              border-bottom-color: rgba(42, 187, 199, 0.3) !important;
    }

    /* Hide navigation track scrollbar elements cleanly on touch views */
    .scrollbar-none::-webkit-scrollbar {
              display: none;
    }

    .scrollbar-none {
              -ms-overflow-style: none;
              scrollbar-width: none;
    }

       /* Premium Smart Scroll CSS Engine (Replaces broken carousels) */
       .premium-scroll-track {
          display: flex !important;
          overflow-x: auto !important;
          overflow-y: hidden !important;
          scroll-snap-type: x mandatory !important;
          scroll-behavior: smooth !important;
          -webkit-overflow-scrolling: touch !important;
       }
   
       /* Clear vertical display block conflicts */
       .premium-scroll-track .scroll-card-slide {
          flex: 0 0 100% !important;
          scroll-snap-align: start !important;
          display: flex !important;
       }
   
       /* Hide scrollbars completely to keep your visual layouts looking expensive */
       .premium-scroll-track::-webkit-scrollbar {
          display: none !important;
       }
   
       .premium-scroll-track {
          -ms-overflow-style: none !important;
          scrollbar-width: none !important;
       }
   
       /* Desktop Responsive Layout Breakpoints Grid Expansion Matrix */
       @media (min-width: 640px) {
          .premium-scroll-track .scroll-card-slide {
             flex: 0 0 50% !important;
          }
       }
   
       @media (min-width: 1024px) {
          .premium-scroll-track .scroll-card-slide {
             flex: 0 0 33.333% !important;
          }
       }
   
       @media (min-width: 1280px) {
          .recent-project-scroll-override .scroll-card-slide {
             flex: 0 0 25% !important;
          }
       }


             /* Core Structural Fix for Fixed Navigation Overlaps */
             html {
                scroll-behavior: smooth;
             }
      
             /* 
         Applies a protective 100px buffer to the target section when jumped to via anchor link.
         This accounts for the 80px (h-20) navbar height plus a clean 20px breathing space.
      */
             #service-suite,
             section[id] {
                scroll-margin-top: 100px !important;
             }

                         /* Clean scrollbar suppression across touch viewports */
                         .scrollbar-none::-webkit-scrollbar {
                            display: none !important;
                         }
            
                         .scrollbar-none {
                            -ms-overflow-style: none !important;
                            scrollbar-width: none !important;
                         }
            
                         /* Maintain crisp text limits on matching layout cards */
                         .line-clamp-5 {
                            display: -webkit-box;
                            -webkit-line-clamp: 5;
                            -webkit-box-orient: vertical;
                            overflow: hidden;
                         }



                                                 /* Premium Infinite Marquee Scrolling Vector Core */
                                                 .partner-marquee-swiper .swiper-wrapper {
                                                    transition-timing-function: linear !important;
                                                 }
                        
                                                 /* Crisp rendering fixes for dynamic brand assets */
                                                 .partner-brand-capsule img {
                                                    image-rendering: -webkit-optimize-contrast;
                                                    image-rendering: crisp-edges;
                                                    backface-visibility: hidden;
                                                    transform: translateZ(0);
                                                 }

                                                                                                 /* ==========================================================================
                                                   ULTRA-PREMIUM MODAL IMAGE CAROUSEL SYSTEM - COVER IMPLEMENTATION
                                                   ========================================================================== */
                                                
                                                                                                 /* 1. Fixed Aspect Ratio Bounding Box for the Slider Window */
                                                                                                    #projectDetailModal .relative.h-48.sm:h-64 {
                                                                                                    position: relative !important;
                                                                                                    width: 100% !important;
                                                                                                    /* Responsive dynamic height based on screen height */
                                                                                                    height: 30vh !important;
                                                                                                    min-height: 160px !important;
                                                                                                    max-height: 340px !important;
                                                                                                    overflow: hidden !important;
                                                                                                    background-color: #070b13 !important;
                                                                                                    /* Neutral dark backdrop while image threads lazy-load */
                                                                                                 }
                                                
                                                                                                 /* 2. Hardware-Accelerated Dynamic Sliding Ribbon Track */
                                                                                                 #modalSliderWrapper {
                                                                                                    display: flex !important;
                                                                                                    height: 100% !important;
                                                                                                    width: 100% !important;
                                                                                                    will-change: transform !important;
                                                                                                    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
                                                                                                    /* Premium ultra-smooth ease-out physics curve */
                                                                                                 }
                                                
                                                                                                 /* 3. Individual Slide Cells Inside the Track Ribbon */
                                                                                                 #modalSliderWrapper>div {
                                                                                                    flex: 0 0 100% !important;
                                                                                                    width: 100% !important;
                                                                                                    height: 100% !important;
                                                                                                    overflow: hidden !important;
                                                                                                    position: relative !important;
                                                                                                 }
                                                
                                                                                                 /* 4. Core Cover Image Rules Engine - Guarantees Zero Aspect Distortion */
                                                                                                 #modalSliderWrapper img,
                                                                                                 #modalImage {
                                                                                                    width: 100% !important;
                                                                                                    height: 100% !important;
                                                                                                    /* CRITICAL: Changed from cover to contain to display full image without cropping */
                                                                                                    object-fit: contain !important;
                                                                                                    object-position: center !important;
                                                                                                    /* Pins focus focal coordinates tightly to the center structure */
                                                                                                    transform: translateZ(0) !important;
                                                                                                    /* Invokes GPU processing matrix rendering engines to maximize click speed performance */
                                                                                                    pointer-events: none !important;
                                                                                                    user-select: none !important;
                                                                                                 }
                                                
                                                                                                 /* ==========================================================================
                                                   OPTIONAL: DYNAMIC OVERLAY GRADIENT LINK MASK 
                                                   ========================================================================== */
                                                                                                 /* Ensures high-contrast legibility for your absolute status badges (e.g., "New Launch") over light image assets */
                                                                                                 #modalSliderWrapper>div::after {
                                                                                                    content: '';
                                                                                                    position: absolute;
                                                                                                    inset: 0;
                                                                                                    background: linear-gradient(to bottom, rgba(4, 7, 17, 0.3) 0%, transparent 25%, transparent 75%, rgba(4, 7, 17, 0.4) 100%);
                                                                                                    pointer-events: none;
                                                                                                    z-index: 10;
                                                                                                 }
 
    @keyframes marqueeGlideLeft {
        0% { transform: translate3d(0, 0, 0); }
        100% { transform: translate3d(-50%, 0, 0); }
    }
    @keyframes marqueeGlideRight {
        0% { transform: translate3d(-50%, 0, 0); }
        100% { transform: translate3d(0, 0, 0); }
    }
    .animate-marquee-glide-left {
        display: flex !important;
        width: max-content !important;
        animation: marqueeGlideLeft 30s linear infinite !important;
    }
    .animate-marquee-glide-right {
        display: flex !important;
        width: max-content !important;
        animation: marqueeGlideRight 35s linear infinite !important;
    }
    .hover\:pause-marquee:hover {
        animation-play-state: paused !important;
    }

    /* Preloader Styles */
    #preloader {
        transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.6s ease;
    }
    #preloader.opacity-0 {
        transform: scale(1.05);
        visibility: hidden;
    }

    /* Premium Developer Spotlight Transitions */
    .developer-spotlight-panel {
        transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .developer-spotlight-panel.transitioning {
        opacity: 0 !important;
        transform: translateY(12px) !important;
    }

    /* Luxury Active Card Glow */
    .developer-active-card {
        border-color: #0F8F94 !important;
        background-color: rgba(15, 143, 148, 0.03) !important;
        box-shadow: 0 15px 30px rgba(15, 143, 148, 0.08) !important;
        transform: translateY(-4px) scale(1.02) !important;
    }
    
    /* Interactive Card Scale adjustments */
    .developer-grid-card img, .partner-grid-card img {
        transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        filter: drop-shadow(0 2px 5px rgba(0,0,0,0.03));
    }
    .developer-grid-card:hover img, .partner-grid-card:hover img {
        transform: scale(1.05);
    }

    /* Lenis Smooth Scroll Core Rules */
    html.lenis, html.lenis body {
        height: auto;
    }
    .lenis-smooth {
        scroll-behavior: auto !important;
    }
    .lenis-smooth [data-lenis-prevent] {
        overscroll-behavior: contain;
    }
    .lenis-stopped {
        overflow: hidden;
    }
    .lenis-scrolling iframe {
        pointer-events: none;
    }