/*
Theme Name: Houzez Child
Theme URI: http://www.favethemes.com/
Author: Favethemes
Author URI: http://www.favethemes.com/
Description: Houzez is a premium WordPress theme for real estate agents where modern aesthetics are combined with tasteful simplicity, and where the ease of use is achieved without compromise in your ability to customise the design. Whether you are a real estate agent looking to build a website for your company or a web developer seeking a perfect WordPress theme for your next project, you are certain to appreciate the numerous features and benefits that our theme provides.
Version: 1.0
Tags: white, right-sidebar, left-sidebar, custom-colors, custom-menu, featured-images, post-formats, theme-options, translation-ready
License: GNU General Public License version 3.0
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Text Domain: houzez
Template: houzez
*/

@import url("../houzez/style.css");
/* Your CSS code goes here
-------------------------------------- */

html {
    scroll-behavior: auto !important;
}
body {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
	font-size: 14px !important;
}
img, video {
    transform: translateZ(0);
    backface-visibility: hidden;
}
.kallat-visual-slider {
    width: 100%;
    height: 100vh;
    padding: 0;
}
/* --- Core Slider Layout --- */

.kallat-hero-swiper {
    width: 100%;
    height: 100vh;
    /* Fullscreen cinematic */
    position: relative;
    background-color: #0a0a0a;
}
.slide-bg-media {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
/* Specific Gradient for typography readability */

.slide-dark-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(10, 10, 10, 0.8) 0%, rgba(10, 10, 10, 0.4) 40%, rgba(10, 10, 10, 0.1) 100%);
    z-index: 2;
}
/* --- Content Padding & Layout --- */

.kallat-slide-content {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 8%;
    /* Specific precise padding matching your mockup */
    transform: translateY(-50%);
    max-width: 600px;
}
/* --- Cinematic Text Reveal Animations --- */

.kallat-visual-slide .elementor-widget {
    opacity: 0;
    transform: translateY(30px);
    transition: all 1s cubic-bezier(0.25, 1, 0.5, 1);
    /* Ultra-smooth easing */
}
/* When the slide is active, bring the text up */

.kallat-visual-slide.swiper-slide-active .elementor-widget {
    opacity: 1;
    transform: translateY(0);
}
/* Stagger the animation so heading, text, and buttons come in one after another */

.kallat-visual-slide.swiper-slide-active .elementor-widget:nth-child(1) {
    transition-delay: 0.2s;
}
.kallat-visual-slide.swiper-slide-active .elementor-widget:nth-child(2) {
    transition-delay: 0.4s;
}
.kallat-visual-slide.swiper-slide-active .elementor-widget:nth-child(3) {
    transition-delay: 0.6s;
}
.kallat-visual-slide.swiper-slide-active .elementor-widget:nth-child(4) {
    transition-delay: 0.8s;
}
/* --- The Custom Pagination (01 ── 02) & Bottom Bar --- */

.kallat-hero-bottom-bar {
    position: absolute;
    bottom: 50px;
    left: 5%;
    right: 8%;
    z-index: 99 !important;
    pointer-events: auto !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 84%;
    /* Ensures it doesn't overflow */
}
.custom-swiper-pagination .page-num {
    cursor: pointer !important;
    position: relative;
    z-index: 100;
}
/* Add a slight hover effect to indicate they are clickable */

.custom-swiper-pagination .page-num:hover {
    color: #049c97;
    /* Your brand Teal */
    opacity: 1;
}
.custom-swiper-pagination {
    display: flex;
    align-items: center;
    gap: 15px;
    /* Spacing between numbers and lines */
}
.page-num {
    color: #ffffff;
    font-size: 14px;
    font-weight: 400;
    opacity: 0.5;
    cursor: pointer;
    transition: opacity 0.3s ease;
}
.page-num.is-active {
    opacity: 1;
    font-weight: 600;
}
/* The Connecting Line */

.page-line {
    width: 40px;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
}
/* The Animated Progress Fill */

.progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background-color: #ffffff;
    /* Or your champagne gold hex */
}
/* Animate the fill based on the Swiper autoplay delay (6000ms) */

.page-line.is-active .progress-fill {
    animation: fillProgress 6s linear forwards;
}
.page-line.is-passed .progress-fill {
    width: 100%;
    /* Keep solid if passed */
}
@keyframes fillProgress {
    from {
        width: 0%;
    }
    to {
        width: 100%;
    }
}
/* --- Bottom Bar & Play Button Styling --- */

/* Override Elementor's default link colors */

.kallat-hero-bottom-bar a.watch-story-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #ffffff !important;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.5px;
    transition: opacity 0.3s ease;
}
.kallat-hero-bottom-bar a.watch-story-btn:hover {
    opacity: 0.8;
}
/* The Teal Circular Play Button */

.watch-story-btn .play-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    background-color: #049c97;
    /* The Teal color from your target design */
    border-radius: 50%;
    color: #ffffff;
    font-size: 14px;
    padding-left: 3px;
    /* Optically centers the play triangle */
    box-shadow: 0 4px 15px rgba(4, 156, 151, 0.4);
    /* Soft premium glow */
}
@keyframes fillProgress {
    from {
        width: 0%;
    }
    to {
        width: 100%;
    }
}
/* --- Base Header Setup (Smooth Transitions) --- */

.kallat-main-header {
    transition: background-color 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    position: fixed !important;
    top: 0;
    width: 100%;
    z-index: 9999;
}
/* Ensure inner elements animate flawlessly */

.kallat-main-header .houzez-nav-menu-main .nav-link, .kallat-main-header .btn-create-listing, .kallat-main-header .elementor-icon-list-text, .kallat-main-header .elementor-icon-list-icon i, .kallat-main-header .elementor-widget-image img {
    transition: all 0.3s ease-in-out !important;
}
.kallat-main-header .houzez-nav-menu-main .nav-link, .kallat-main-header .btn-create-listing, .kallat-main-header .elementor-icon-list-text, .kallat-main-header .elementor-icon-list-icon i, .kallat-main-header .elementor-icon svg {
    color: #FFFFFF !important;
}
/* --- The Scrolled State (White Background) --- */

.kallat-main-header.header-scrolled {
    background-color: #ffffff !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
/* 1. Change Houzez Nav Links to Teal Logo Color */

.kallat-main-header.header-scrolled .houzez-nav-menu-main .nav-link {
    color: #049c97 !important;
}
.kallat-main-header.header-scrolled .houzez-nav-menu-main .nav-link:hover {
    color: #037a76 !important;
}
/* 2. Change the 'Create a Listing' Button to Teal */

.kallat-main-header.header-scrolled .elementor-button {
    background-color: #049c97 !important;
    border-color: #049c97 !important;
    color: #ffffff !important;
}
.kallat-main-header.header-scrolled .elementor-button:hover {
    background-color: #037a76 !important;
    border-color: #037a76 !important;
}
/* 3. Change Phone Icon & Text to Teal */

.kallat-main-header.header-scrolled .elementor-icon-list-text, .kallat-main-header.header-scrolled .elementor-icon-list-icon i {
    color: #049c97 !important;
}
.kallat-main-header.header-scrolled .elementor-icon-list-text, .kallat-main-header.header-scrolled .elementor-icon svg {
    color: #049c97 !important;
}
/* 4. The Logo Swap & Shrink Effect */

.kallat-main-header.header-scrolled .elementor-widget-image img {
    filter: brightness(0) !important;
    /* Turns the white PNG black */
    /* Shrink the logo by 20% and keep it aligned to the left */
    transform: scale(0.8);
    transform-origin: left center;
}

.kallat-main-header .houzez-menu-toggle-button .houzez-icon {
    color: #FFFFFF !important;
    transition: color 0.3s ease-in-out !important;
}

/* Scrolled state: icon turns teal (visible over white background) */
.kallat-main-header.header-scrolled .houzez-menu-toggle-button .houzez-icon {
    color: #049c97 !important;
}

/* Hover state for good UX */
.kallat-main-header.header-scrolled .houzez-menu-toggle-button:hover .houzez-icon {
    color: #037a76 !important;
}

/* ----------------------------------------------------------
   4. MOBILE OFF-CANVAS MENU — Full height, fully visible
   ---------------------------------------------------------- */

/* Full viewport height */
.offcanvas.offcanvas-start.offcanvas-mobile-menu {
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: none !important;
    overflow-y: auto !important;
    background-color: #ffffff !important;
}

/* Header row (MENU label + logo + × close) */
.offcanvas-header {
    background-color: #ffffff !important;
    padding: 16px 20px !important;
}
.offcanvas-header * {
    color: #1a1a1a !important;
}

/* Close button */
.offcanvas-header .btn-close {
    filter: none !important;
    opacity: 1 !important;
    color: #1a1a1a !important;
}

/* Menu body */
.offcanvas-mobile-menu-body {
    display: flex !important;
    flex-direction: column !important;
    padding: 20px !important;
    overflow-y: auto !important;
    background-color: #ffffff !important;
    height: calc(100vh - 80px) !important;
}

/* All nav links inside the drawer */
.offcanvas-mobile-menu-body a,
.offcanvas-mobile-menu-body .nav-link,
.offcanvas-mobile-menu-body .menu-item > a,
.offcanvas-mobile-menu-body li > a {
    color: #1a1a1a !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    padding: 12px 0 !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    text-decoration: none !important;
}

/* Hover state */
.offcanvas-mobile-menu-body a:hover,
.offcanvas-mobile-menu-body .nav-link:hover {
    color: #049c97 !important;
}

/* Sub-menu items */
.offcanvas-mobile-menu-body .sub-menu a,
.offcanvas-mobile-menu-body .children a {
    color: #555555 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    padding-left: 16px !important;
}

/* Dropdown toggle arrows */
.offcanvas-mobile-menu-body .dropdown-toggle,
.offcanvas-mobile-menu-body [class*="toggle"] {
    color: #1a1a1a !important;
}

/* Dividers between items */
.offcanvas-mobile-menu-body .menu-item {
    border-bottom: 1px solid #f0f0f0 !important;
}
.offcanvas-mobile-menu-body .menu-item:last-child {
    border-bottom: none !important;
}
/* =======================================================
   1. MAIN SLIDER TYPOGRAPHY & SPACING
======================================================= */

.slider-content {
    margin-top: 20%;
    max-width: 40%;
    color: #FFFFFF;
}
/* Subtitle (First Paragraph) */

.slider-content p:first-child {
    font-size: 13px !important;
    letter-spacing: 2.5px;
    font-weight: 400;
    color: #ffffff;
}
/* Main Heading (H3) */

.slider-content h3 {
    font-size: 44px !important;
    line-height: 1.15 !important;
    font-weight: 400;
    color: #E5BA6A;
    margin-bottom: 10px;
    position: relative;
    padding-bottom: 30px;
}
.slider-content h3 span {
    color: #5DD5BD;
}
/* The Teal Divider Line (Below Heading) */

.slider-content h3::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 3px;
    background-color: #049c97;
}
/* Description Text */

.slider-content .elementor-widget-text-editor p {
    font-size: 16px !important;
    line-height: 1.6 !important;
    color: #e0e0e0;
    /* Slightly off-white for depth */
    max-width: 550px;
    margin-bottom: 20px;
}
/* =======================================================
   2. SLIDER BUTTON STYLING
======================================================= */

/* Ensure buttons sit side-by-side cleanly */

.slider-content .elementor-button {
    padding: 15px 35px !important;
    border-radius: 4px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
}
/* Primary Button (Explore Projects) */

.slider-content .elementor-widget-button:nth-child(1) .elementor-button {
    background-color: #049c97 !important;
    border: 1px solid #049c97 !important;
    color: #ffffff !important;
}
.slider-content .elementor-widget-button:nth-child(1) .elementor-button:hover {
    background-color: #037a76 !important;
    border-color: #037a76 !important;
}
/* Secondary Button (Schedule a Visit) */

.slider-content .elementor-widget-button:nth-child(2) .elementor-button {
    background-color: transparent !important;
    border: 1px solid #ffffff !important;
    color: #ffffff !important;
}
.slider-content .elementor-widget-button:nth-child(2) .elementor-button:hover {
    background-color: #ffffff !important;
    color: #000000 !important;
}
/* =======================================================
   3. "WATCH OUR STORY" BUTTON & PULSE ANIMATION
======================================================= */

/* Pull the button out of the bottom bar and float it to the right */

.kallat-hero-bottom-bar a.watch-story-btn {
    position: absolute;
    right: 5%;
    /* Aligns it to the right side of the screen */
    bottom: 120px;
    /* Lifts it up to align with the text block */
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
    font-size: 14px;
    line-height: 1.4;
    color: #ffffff !important;
    text-transform: none;
    letter-spacing: 0.5px;
    z-index: 20;
}
/* Make the icon container larger to support the ripple */

.watch-story-btn .play-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 55px;
    height: 55px;
    background-color: #049c97;
    border-radius: 50%;
    color: #ffffff;
    font-size: 16px;
    padding-left: 4px;
    /* Optically centers the triangle */
    /* Attach the continuous pulse animation */
    box-shadow: 0 0 0 0 rgba(4, 156, 151, 0.7);
    animation: playPulse 2s infinite cubic-bezier(0.66, 0, 0, 1);
}
/* The Ripple Keyframes */

@keyframes playPulse {
    to {
        box-shadow: 0 0 0 25px rgba(4, 156, 151, 0);
    }
}
/* =======================================================
   4. MOBILE RESPONSIVENESS (Max Width: 767px)
======================================================= */

@media (max-width: 767px) {
    /* 1. Target the correct class and override Elementor's positioning */
    .slider-content {
        left: 5% !important;
        right: auto !important;
        width: 90% !important;
        max-width: 90% !important;
        top: 30% !important;
    }
    /* 2. Force Elementor's internal widgets to expand fully */
    .slider-content .elementor-widget, .slider-content .elementor-widget-container {
        width: 100% !important;
        max-width: 100% !important;
    }
    /* 3. Scale down Subtitle */
    .slider-content p:first-child {
        font-size: 10px !important;
        letter-spacing: 1.5px;
        margin-bottom: 10px;
    }
    /* 4. Scale down Main Heading so it fits better horizontally */
    .slider-content h3 {
        font-size: 34px !important;
        /* Slightly smaller to prevent awkward wrapping */
        line-height: 1.2 !important;
        margin-bottom: 15px;
        padding-bottom: 15px;
    }
    /* 5. Hide the description paragraph */
    .slider-content .elementor-widget-text-editor {
        display: none !important;
    }
    /* 6. Make primary buttons smaller and fit side-by-side */
    .slider-content .elementor-button {
        padding: 12px 20px !important;
        font-size: 12px !important;
    }
    .slider-content>.e-con, .slider-content>.elementor-container {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }
    /* 7. Clean up the 'Watch Our Story' Button */
    .kallat-hero-bottom-bar a.watch-story-btn {
        bottom: 80px;
        right: 5%;
        gap: 0;
    }
    .watch-story-btn .play-text {
        display: none !important;
    }
    .watch-story-btn .play-icon {
        width: 45px;
        height: 45px;
        font-size: 14px;
    }
    /* 8. Adjust the Pagination Bar */
    .kallat-hero-bottom-bar {
        bottom: 30px;
        left: 5%;
        width: 90%;
    }
    /* 9. Adjust the Dark Overlay Gradient for Mobile */
    .kallat-visual-slider::before {
        background: linear-gradient( 90deg, rgba(10, 10, 10, 0.95) 0%, rgba(10, 10, 10, 0.8) 40%, rgba(10, 10, 10, 0) 85%);
    }
}
/* =======================================================
   HEADER REFINEMENTS
======================================================= */

/* 1. Fix Navigation Typography (Remove All-Caps) */

.kallat-main-header .houzez-nav-menu-main .nav-link {
    text-transform: uppercase !important;
    font-weight: 500 !important;
    font-size: 12px !important;
    letter-spacing: 0.5px !important;
    padding: 10px 15px !important;
    /* Adds breathing room between links */
}
/* 2. Create the Active Menu Item Teal Underline */

.kallat-main-header .houzez-nav-menu-main .current-menu-item>a {
    color: #049c97 !important;
    position: relative;
}
.kallat-main-header .houzez-nav-menu-main .current-menu-item>a::after {
    content: '';
    position: absolute;
    bottom: 5px;
    /* Adjust based on your exact padding */
    left: 15px;
    right: 15px;
    height: 2px;
    background-color: #049c97;
}
/* 3. Align the new Icon List horizontally with the button */

.kallat-main-header .elementor-icon-list-item {
    display: flex;
    align-items: center;
    gap: 8px;
}
.kallat-main-header .elementor-icon-list-text {
    font-size: 15px;
    font-weight: 500;
}
/* =======================================================
   FLOATING SIDEBAR (DESKTOP)
======================================================= */

.kallat-floating-sidebar {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 60px;
    background-color: #070707;
    border-radius: 12px 0 0 12px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: -5px 5px 20px rgba(0, 0, 0, 0.3);
}

.float-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 4px; 
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 8.5px; 
    font-weight: 500;
    text-align: center;
    gap: 5px; 
    transition: all 0.3s ease;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.float-item:last-child {
    border-bottom: none;
}

.float-item i {
    font-size: 16px; 
    transition: all 0.3s ease;
}

/* --- Specific AI Button Styling --- */
.float-ai {
    background-color: #1EABA9; /* Updated Core Color */
}
.float-ai:hover {
    background-color: #178f8d;
}

/* --- WhatsApp & Call Icons --- */
.float-wa i, .float-call i {
    color: #1EABA9; /* Updated Core Color */
    border: 1.5px solid #1EABA9;
    border-radius: 50%;
    width: 28px; 
    height: 28px; 
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px; 
}

/* Hover effects */
.float-wa:hover i, .float-call:hover i {
    background-color: #1EABA9;
    color: #ffffff;
}
.float-wa:hover, .float-call:hover {
    background-color: #111111;
}

/* =======================================================
   MOBILE BOTTOM BAR (Minimalist Light Theme)
======================================================= */

@media (max-width: 767px) {
    .kallat-floating-sidebar {
        top: auto;
        bottom: 15px; /* Tighter to the bottom of the screen */
        right: 50%;
        transform: translateX(50%);
        flex-direction: row;
        width: 80%; /* Narrower footprint */
        max-width: 360px; 
        border-radius: 50px; 
        
        /* Light Theme Background */
        background-color: rgba(255, 255, 255, 0.75); 
        backdrop-filter: blur(10px); 
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); /* Softer shadow */
        border: 1px solid rgba(0, 0, 0, 0.05); /* Subtle definition */
    }

    .float-item {
        flex: 1; 
        border-bottom: none; 
        border-right: 1px solid rgba(0, 0, 0, 0.08); /* Darker dividers for light theme */
        padding: 4px 2px; /* Super compact padding reduces vertical height */
        gap: 3px;
        font-size: 9px;
        color: #333333 !important; /* Dark text for readability */
    }

    .float-item:last-child {
        border-right: none;
    }

    /* AI Button - Primary CTA Style inside light bar */
    .float-ai {
        background-color: #1EABA9;
        color: #ffffff !important; /* Keep text white against teal */
        border-radius: 50px 0 0 50px; /* Curves the left edge to match the pill shape */
        border-right: none;
    }

    .float-wa i, .float-call i {
        color: #1EABA9; 
        border: 1.5px solid #1EABA9;
        width: 24px; /* Scaled down for minimalist feel */
        height: 24px; 
        font-size: 12px;
    }

    /* Reset hover backgrounds for light theme */
    .float-wa:hover, .float-call:hover {
        background-color: rgba(30, 171, 169, 0.05);
    }
}
.transperent-header-bg {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
    background: rgba(20, 20, 20, 0.35);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}
/* =======================================================
   FEATURED PROJECTS SECTION
======================================================= */

/* --- Top Header Typography --- */

.elementor-heading-title {
    color: #ffffff;
}
/* Make sure the main heading uses the serif font */

h2.spaces-title {
    font-size: 48px;
    font-weight: 400;
}
/* Subtitle and Location text */

.subtitle-text, .project-location {
    color: #049c97;
    /* Teal */
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 12px;
    font-weight: 600;
}
/* --- Project Card Styling --- */

.kallat-project-card {
    background-color: #053b39;
    /* Slightly lighter teal for the card */
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    border: 1px solid rgba(255, 255, 255, 0.05);
}
.kallat-project-card:hover {
    transform: translateY(-10px);
    /* Lifts the card on hover */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}
.kallat-project-card img {
    width: 100%;
    height: auto;
    object-fit: cover;
    transition: transform 0.7s ease;
}
.kallat-project-card:hover img {
    transform: scale(1.05);
    /* Gentle image zoom on hover */
}
/* --- The Gold Typography --- */

.kallat-project-card h4 {
    color: #1EABA9 !important;
    font-size: 24px;
    margin-bottom: 5px;
}
.kallat-project-card p {
    color: #b0c4c4;
    /* Soft readable grayish-teal */
    font-size: 14px;
    line-height: 1.6;
    margin-top: 15px;
}
.kallat-project-card .explore-link {
    color: #c5a365;
    font-size: 14px;
    font-weight: 500;
    margin-top: 20px;
    display: inline-block;
    transition: opacity 0.3s ease;
}
.kallat-project-card .explore-link:hover {
    opacity: 0.7;
}
/* --- The Status Badge --- */

.project-badge {
    background-color: #111111;
    color: #c5a365;
    padding: 6px 16px;
    border-radius: 30px;
    /* Pill shape */
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 1px solid #c5a365;
    z-index: 10;
}
/* --- Navigation Arrows --- */

.project-prev, .project-next {
    width: 45px !important;
    height: 45px !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0 !important;
    /* Strips out bad button padding */
}
/* --- Force the Nested Elementor Wrappers to fill nicely --- */

.project-prev .elementor-icon, .project-next .elementor-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
}
/* --- Precision Control over the Custom SVG Graphic --- */

.project-prev svg, .project-next svg {
    width: 26px !important;
    /* Controls the actual arrow visual thickness size */
    height: 26px !important;
    max-width: 26px !important;
    max-height: 26px !important;
    fill: none !important;
    /* Prevents weird layout bleeding box fills */
    display: block !important;
    margin: 0 auto !important;
    /* Mathematically pinpoints true axis center */
}
/* --- Clean Hover Transition --- */

.project-prev:hover, .project-next:hover {
    border-color: #c5a365 !important;
    background: rgba(197, 163, 101, 0.1) !important;
}
.project-prev:hover svg path, .project-next:hover svg path {
    stroke: #c5a365 !important;
    /* Turns graphic golden if your SVG is using stroke lines */
    fill: #c5a365 !important;
    /* Turns graphic golden if your SVG is using shapes */
}
/* Position the badge absolutely over the image */

.kallat-project-card {
    position: relative;
    background-color: #053b39;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    border: 1px solid rgba(255, 255, 255, 0.05);
}
.project-badge {
    position: absolute;
    top: 20px;
    left: 20px;
    background-color: #111111;
    color: #c5a365;
    padding: 6px 16px;
    border-radius: 30px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 1px solid #c5a365;
    z-index: 10;
}
/* Pad the content area evenly */

.card-content-wrap {
    padding: 30px;
}
.kallat-projects-slider .swiper-pagination, .kallat-projects-slider .swiper-pagination-bullet {
    display: none !important;
}
/* =======================================================
   KILL PHANTOM BULLETS IN SLIDER
======================================================= */

.kallat-projects-slider, .kallat-projects-slider .swiper-wrapper, .kallat-projects-slider .swiper-slide {
    list-style: none !important;
    list-style-type: none !important;
    margin: 0 !important;
}
.kallat-projects-slider .swiper-slide::before, .kallat-projects-slider .swiper-slide::marker {
    display: none !important;
    content: none !important;
}
/* =======================================================
   WHY CHOOSE KALLAT & AI BANNER SECTION
======================================================= */

.kallat-why-choose-section h2.spaces-title {
    color: #FFFFFF !important;
}
/* --- Left Column Styling --- */

.kallat-outline-btn .elementor-button {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    padding: 12px 30px !important;
    transition: all 0.3s ease;
}
.kallat-outline-btn .elementor-button:hover {
    border-color: #049c97 !important;
    background: rgba(4, 156, 151, 0.1) !important;
}
/* --- Right Column Media Wrapper (CRITICAL FOR OVERLAYS) --- */

.kallat-media-wrapper {
    position: relative;
    /* Contains the absolute elements */
    border-radius: 16px;
}
.kallat-media-wrapper>.elementor-widget-image img {
    border-radius: 16px;
    width: 100%;
    height: 450px;
    object-fit: cover;
}
/* Floating Play Button (Centered over image) */

.kallat-floating-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 5;
    cursor: pointer;
}
.kallat-floating-play .elementor-icon-box-icon {
    margin-bottom: 15px !important;
}
.kallat-floating-play .elementor-icon {
    width: 70px !important;
    height: 70px !important;
    border: 1px solid #c5a365 !important;
    border-radius: 50% !important;
    color: #ffffff !important;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}
.kallat-floating-play:hover .elementor-icon {
    background: #c5a365;
}
/* Floating Brochure Card (Bottom Left) */

.kallat-brochure-card {
    position: absolute;
    bottom: -30px;
    /* Breaks out of the bottom */
    left: -40px;
    /* Breaks out to the left */
    background: #fdfdfd !important;
    padding: 20px !important;
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    width: 380px;
    z-index: 10;
}
.kallat-brochure-card * {
    color: #111111 !important;
    /* Forces dark text inside the white card */
}
/* --- AI Assistant Banner --- */

.kallat-ai-banner {
    margin-top: 80px !important;
    background: linear-gradient(135deg, #054c4a 0%, #033230 100%) !important;
    border: 1px solid rgba(4, 156, 151, 0.3);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}
.ai-glow-logo img {
    width: 80px;
    border-radius: 12px;
    box-shadow: 0 0 25px rgba(4, 156, 151, 0.6);
    /* Creates the glowing effect */
}
/* The Pill Suggestion Buttons */

.ai-pill-btn .elementor-button {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #a0c2c1 !important;
    border-radius: 30px !important;
    /* Pill shape */
    padding: 8px 16px !important;
    font-size: 11px !important;
    transition: all 0.3s ease;
}
.ai-pill-btn .elementor-button:hover {
    border-color: #049c97 !important;
    color: #ffffff !important;
    background: rgba(4, 156, 151, 0.15) !important;
}
/* Start Chatting Button */

.ai-start-btn .elementor-button {
    background: #ffffff !important;
    color: #049c97 !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    padding: 15px 30px !important;
}
.ai-pill-btn:hover {
    border-color: #049c97 !important;
    color: #ffffff !important;
    background: rgba(4, 156, 151, 0.15) !important;
}
.ai-start-btn:hover {
    background: #f0f0f0 !important;
}
@media (max-width: 768px) {
    .kallat-ai-banner {
        flex-direction: column;
        padding: 30px 20px !important;
    }
    .kallat-ai-banner>div:last-child {
        border-left: none !important;
        padding-left: 0 !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        padding-top: 25px;
    }
}
/* =======================================================
   CUSTOM AI CONCIERGE MODAL LIGHTBOX
======================================================= */

.kallat-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    /* Beautiful cinematic background glass blur */
    z-index: 99999;
    /* Forces it over headers and sticky buttons */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}
/* Open Animation Trigger State */

.kallat-popup-overlay.popup-active {
    opacity: 1;
    pointer-events: auto;
}
.kallat-popup-content {
    background: #032523;
    width: 100%;
    max-width: 480px;
    height: 600px;
    border-radius: 16px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(4, 156, 151, 0.3);
    position: relative;
    overflow: hidden;
    transform: translateY(30px);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.kallat-popup-overlay.popup-active .kallat-popup-content {
    transform: translateY(0);
}
/* Close Window 'X' Button styling */

.kallat-popup-close-btn {
    position: absolute;
    top: 15px;
    right: 20px;
    background: transparent;
    border: none;
    color: #a0c2c1;
    font-size: 32px;
    cursor: pointer;
    z-index: 99;
    line-height: 1;
    transition: color 0.3s ease;
}
.kallat-popup-close-btn:hover {
    color: #c5a365;
}
@media (max-width: 480px) {
    .kallat-popup-content {
        width: 100%;
        height: 100%;
        border-radius: 0;
    }
}
/* =======================================================
   AI BANNER ANIMATIONS
======================================================= */

/* 1. Continuous Breathing Glow for the Banner */

@keyframes premiumGlow {
    0% {
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15), 0 0 10px rgba(4, 156, 151, 0.1);
    }
    50% {
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15), 0 0 35px rgba(4, 156, 151, 0.5);
    }
    100% {
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15), 0 0 10px rgba(4, 156, 151, 0.1);
    }
}
.kallat-ai-banner {
    animation: premiumGlow 4s infinite ease-in-out;
}
/* 2. Continuous Pulse for the Start Chatting Button */

@keyframes buttonPulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
    }
    70% {
        transform: scale(1.03);
        box-shadow: 0 0 0 15px rgba(255, 255, 255, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
}
.ai-start-btn {
    animation: buttonPulse 2.5s infinite;
    /* Ensure the inline flex doesn't distort during scale */
    transform-origin: center center;
}
/* TESTIMAONIAL EXPERIENCE SECTION */

.kallat-experience-container {
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
    align-items: center;
    width: 100%;
    background: transparent;
}
.kallat-exp-title-col {
    flex: 1;
    min-width: 280px;
}
.kallat-exp-stats-col {
    flex: 1.5;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    min-width: 300px;
}
.kallat-exp-slider-col {
    flex: 1;
    min-width: 300px;
}
/* Typography & Title Col */

.kallat-exp-subtitle {
    color: #049c97;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 10px;
    font-weight: 600;
}
.kallat-exp-title {
    color: #fff;
    font-size: 34px;
    line-height: 1.2;
    margin-bottom: 25px;
    font-weight: 400;
}
.kallat-exp-divider {
    width: 40px;
    height: 2px;
    background: #049c97;
}
/* Stats Col */

.kallat-stat-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.kallat-stat-val {
    color: #fff;
    font-size: 38px;
    margin-bottom: 5px;
    line-height: 1;
}
.kallat-stat-stars {
    color: #c5a365;
    font-size: 14px;
    margin-bottom: 8px;
    letter-spacing: 2px;
}
.kallat-stat-lbl {
    color: #e0e0e0;
    font-size: 13px;
    line-height: 1.5;
    font-weight: 400;
}
/* Testimonial Card */

.kallat-testi-card {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
    border: 1px solid rgba(4, 156, 151, 0.3);
    border-radius: 12px;
    padding: 35px 30px;
    position: relative;
    min-height: 220px;
    display: flex;
    flex-direction: column;
}
.kallat-quote-icon {
    color: #049c97;
    font-family: serif;
    font-size: 50px;
    line-height: 0;
    position: absolute;
    top: 40px;
    left: 30px;
}
/* Slider Logic */

.kallat-slides-wrapper {
    position: relative;
    flex: 1;
    margin-top: 25px;
}
.kallat-slide {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease;
    width: 100%;
}
.kallat-slide.active {
    opacity: 1;
    visibility: visible;
    position: relative;
}
.kallat-testi-text {
    color: #fff;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 20px;
    font-weight: 300;
}
.kallat-testi-author {
    display: flex;
    align-items: center;
    gap: 10px;
}
.kallat-testi-author img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
}
.kallat-testi-author span {
    color: #c5a365;
    font-size: 13px;
    font-weight: 500;
}
/* Dots */

.kallat-slider-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
}
.kallat-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #444;
    cursor: pointer;
    transition: 0.3s;
}
.kallat-dot.active {
    background: #049c97;
}
/* Responsive */

@media (max-width: 1024px) {
    .kallat-experience-container {
        flex-direction: column;
        align-items: flex-start;
    }
    .kallat-exp-stats-col {
        width: 100%;
        justify-content: flex-start;
        gap: 50px;
    }
    .kallat-exp-slider-col {
        width: 100%;
    }
}
/* =========================================================================
   KALLAT ELEMENTOR FOOTER SYSTEM
   Theme: Dark Premium Corporate
========================================================================= */

/* --- GLOBAL FOOTER WRAPPER SETUP --- */

.elementor-widget-kallat_footer_top, .elementor-widget-kallat_footer_matrix, .elementor-widget-kallat_footer_bottom {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #ffffff;
    padding: 0 5vw;
}
/* =======================================
   WIDGET 1: TOP BAR
======================================= */

.kallat-ftr-top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 30px 0 20px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    gap: 30px;
}
.kallat-ftr-logo img {
    max-height: 40px;
    width: auto;
}
.kallat-ftr-socials {
    display: flex;
    gap: 25px;
    align-items: center;
    justify-content: center;
}
.kallat-ftr-socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    transition: color 0.3s ease;
    line-height: 1;
    /* Prevents awkward vertical spacing */
}
/* 1. Force Icon Fonts (like FontAwesome) to size correctly */

.kallat-ftr-socials a i {
    font-size: 24px !important;
}
/* 2. Force SVGs to strict dimensions so they never break the backend */

.kallat-ftr-socials a svg {
    width: 24px !important;
    height: 24px !important;
    max-width: 24px !important;
    fill: currentColor !important;
    /* Forces the SVG to match the text color */
}
.kallat-ftr-socials a:hover {
    color: #c5a365;
}
.kallat-ftr-newsletter h4 {
    font-size: 14px;
    font-weight: 500;
    margin: 0 0 15px 0;
    color: #ffffff;
}
.kallat-nl-form {
    display: flex;
    width: 100%;
    max-width: 400px;
}
.kallat-nl-form input {
    flex: 1;
    background: #000000;
    border: 1px solid #333;
    color: #fff;
    padding: 12px 20px;
    font-size: 14px;
    border-radius: 4px 0 0 4px;
    outline: none;
}
.kallat-nl-form button {
    background: #ffffff;
    color: #000000;
    border: none;
    padding: 0 25px;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 1px;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
    transition: background 0.3s ease;
}
.kallat-nl-form button:hover {
    background: #e0e0e0;
}
.kallat-nl-disc {
    font-size: 10px;
    color: #888;
    margin-top: 8px;
}
/* =======================================
   WIDGET 2: MATRIX LINKS
======================================= */

.kallat-ftr-matrix {
    display: grid;
    grid-template-columns: 3fr 1fr;
    /* 3 parts for links, 1 part for App Store */
    gap: 40px;
    padding: 60px 0;
}
/* Internal Grid for the Link Lists */

.kallat-matrix-links {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* 4 Columns on Desktop */
    gap: 30px;
}
.kallat-matrix-col h4 {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 20px 0;
    color: #ffffff;
    font-weight: 600;
}
/* Overriding Elementor's default WYSIWYG styling for the link lists */

.kallat-matrix-list ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.kallat-matrix-list li {
    margin-bottom: 12px !important;
}
.kallat-matrix-list a {
    color: #a0a0a0 !important;
    text-decoration: none !important;
    font-size: 13px;
    transition: color 0.3s ease;
}
.kallat-matrix-list a:hover {
    color: #ffffff !important;
}
/* App Store Section */

.kallat-matrix-app {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.kallat-matrix-app .app-title-img {
    max-width: 140px;
    margin-bottom: 25px;
}
.kallat-matrix-app .app-buttons {
    display: flex;
    gap: 10px;
}
.kallat-matrix-app .app-buttons img {
    height: 40px;
    width: auto;
    border-radius: 6px;
}
/* =======================================
   WIDGET 3: SUB FOOTER (LEGAL)
======================================= */

.kallat-ftr-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 12px;
    color: #a0a0a0;
}
.kallat-legal-links {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.kallat-legal-links a {
    color: #a0a0a0;
    text-decoration: none;
    transition: color 0.3s ease;
}
.kallat-legal-links a:hover {
    color: #ffffff;
}
/* =======================================
   RESPONSIVE MOBILE LOGIC
======================================= */

@media (max-width: 1024px) {
    .kallat-ftr-matrix {
        grid-template-columns: 1fr;
        /* Stack App section under matrix */
    }
    .kallat-matrix-app {
        align-items: flex-start;
        padding-top: 30px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }
}
@media (max-width: 768px) {
    .kallat-ftr-top {
        flex-direction: column;
        align-items: flex-start;
    }
    .kallat-nl-form {
        max-width: 100%;
    }
    /* Crucial: Forces exactly 2 columns on Mobile for the Links Grid */
    .kallat-matrix-links {
        grid-template-columns: repeat(2, 1fr) !important;
        column-gap: 15px;
        row-gap: 40px;
    }
    .kallat-ftr-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
}
/* =======================================================
   FIX HEADER OVERLAP ON INNER PAGES & PROPERTIES
======================================================= */

/* Target all pages EXCEPT the homepage */

.property-header-wrap, .htb-single-agency-wrapper {
    margin-top: 90px !important;
}
.kallat-feature-grid-wrapper {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 60px;
    padding: 80px 5vw;
    background: #fdfdfd;
}
/* Left Side Typography */

.kallat-fg-content h6 {
    font-size: 11px;
    letter-spacing: 1.5px;
    color: #4a5568;
    margin-bottom: 20px;
    font-weight: 600;
}
.kallat-fg-content h2 {
    font-size: 42px;
    color: #1a202c;
    line-height: 1.2;
    margin-bottom: 25px;
}
.kallat-fg-desc {
    font-size: 15px;
    color: #718096;
    line-height: 1.7;
    margin-bottom: 40px;
}
.kallat-fg-btn {
    display: inline-block;
    padding: 12px 28px;
    border: 1px solid #1a202c;
    color: #1a202c;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-decoration: none;
    transition: all 0.3s ease;
}
.kallat-fg-btn:hover {
    background: #1a202c;
    color: #ffffff;
}
/* Right Side CSS Grid */

.kallat-fg-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.kallat-fg-card {
    background: #e6f0f0;
    /* The light teal tint from the mockup */
    border: 1px solid #c9e0e0;
    padding: 30px 25px;
    border-radius: 4px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.kallat-fg-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}
.kallat-fg-icon {
    font-size: 28px;
    color: #049c97;
    margin-bottom: 20px;
}
.kallat-fg-icon svg {
    width: 28px;
    height: 28px;
    fill: currentColor;
}
.kallat-fg-text h4 {
    font-size: 13px;
    color: #1a202c;
    font-weight: 700;
    margin-bottom: 10px;
    line-height: 1.4;
}
.kallat-fg-text p {
    font-size: 13px;
    color: #4a5568;
    line-height: 1.5;
    margin: 0;
}
/* Responsive */

@media (max-width: 1024px) {
    .kallat-feature-grid-wrapper {
        grid-template-columns: 1fr;
    }
    .kallat-fg-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 768px) {
    /* Force 2 columns on mobile */
    .kallat-fg-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        /* Tighter gap for mobile */
    }
    /* Scale down the cards to fit nicely side-by-side */
    .kallat-fg-card {
        padding: 20px 15px;
    }
    .kallat-fg-icon {
        font-size: 24px;
        margin-bottom: 15px;
    }
    .kallat-fg-icon svg {
        width: 24px;
        height: 24px;
    }
    .kallat-fg-text h4 {
        font-size: 11px;
        /* Smaller title */
        margin-bottom: 8px;
    }
    .kallat-fg-text p {
        font-size: 11px;
        /* Smaller description */
        line-height: 1.4;
    }
}
.kallat-hero-master-wrapper {
    width: 100%;
    position: relative;
}
/* Hero Banner */

.kallat-hero-banner {
    position: relative;
    width: 100%;
    min-height: 85vh;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
}
.kallat-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0) 100%);
    z-index: 1;
}
.kallat-hero-container {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 0 5vw;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-bottom: 80px;
}
/* Left Content */

.kallat-hero-left {
    max-width: 800px;
}
.kh-subtitle {
    color: #ffffff;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 15px;
}
.kh-title {
    color: #ffffff;
    font-size: 72px;
    font-weight: 500;
    line-height: 1.1;
    margin-bottom: 20px;
    letter-spacing: 1px;
}
.kh-tagline {
    color: #d8bc8a;
    /* The Kallat Gold */
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 25px;
}
.kh-bullets {
    color: #ffffff;
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 40px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}
.kh-bullet-dot {
    color: #d8bc8a;
    font-size: 20px;
}
/* Buttons */

.kh-actions {
    display: flex;
    gap: 20px;
}
.kh-btn-primary {
    background: #c3e8e2;
    /* Light Teal */
    color: #021615;
    padding: 16px 32px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.3s ease;
}
.kh-btn-primary:hover {
    background: #ffffff;
    transform: translateY(-2px);
}
/* Right Video Button */

.kh-video-btn {
    display: flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
    color: #ffffff;
    transition: opacity 0.3s ease;
}
.kh-video-btn:hover {
    opacity: 0.8;
}
.kh-play-icon {
    width: 50px;
    height: 50px;
    border: 1px solid #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    padding-left: 3px;
    /* Optically center the play triangle */
}
.kh-video-text {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.5px;
    line-height: 1.4;
}
/* Stats Bar */

.kallat-stats-bar {
    background: #f4f8f8;
    width: 100%;
    border-bottom: 1px solid #e2e8f0;
}
.kh-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    max-width: 1400px;
    margin: 0 auto;
}
.kh-stat-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 30px 20px;
    border-right: 1px solid #dce4e4;
}
.kh-stat-item:last-child {
    border-right: none;
}
.kh-stat-icon {
    color: #049c97;
    font-size: 35px;
    display: flex;
}
.kh-stat-icon svg {
    width: 35px;
    height: 35px;
    fill: currentColor;
}
.kh-stat-val {
    color: #021615;
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 4px;
}
.kh-stat-lbl {
    color: #4a5568;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    line-height: 1.3;
}
/* Responsive Design */

@media (max-width: 1024px) {
    .kallat-hero-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 40px;
    }
    .kh-title {
        font-size: 54px;
    }
    .kh-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .kh-stat-item:nth-child(2) {
        border-right: none;
    }
    .kh-stat-item:nth-child(1), .kh-stat-item:nth-child(2) {
        border-bottom: 1px solid #dce4e4;
    }
}
@media (max-width: 768px) {
    .kh-title {
        font-size: 42px;
    }
    .kh-tagline {
        font-size: 16px;
    }
    .kh-actions {
        flex-direction: column;
    }
    .kh-btn-primary {
        text-align: center;
    }
    /* --- 2 Column Mobile Update --- */
    .kh-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .kh-stat-item {
        padding: 20px 10px;
        /* Reduced padding to fit screens */
        justify-content: center;
        text-align: left;
        border-bottom: 1px solid #dce4e4;
    }
    /* Adjust fonts so 2 columns fit without overlapping */
    .kh-stat-val {
        font-size: 22px;
    }
    .kh-stat-lbl {
        font-size: 9px;
    }
    .kh-stat-icon {
        font-size: 26px;
    }
    .kh-stat-icon svg {
        width: 26px;
        height: 26px;
    }
    /* Fix the border lines for a 2x2 layout */
    .kh-stat-item:nth-child(odd) {
        border-right: 1px solid #dce4e4;
    }
    .kh-stat-item:nth-child(even) {
        border-right: none;
    }
    .kh-stat-item:nth-child(3), .kh-stat-item:nth-child(4) {
        border-bottom: none;
    }
}
.kallat-loc-amenities-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
}
.kla-row {
    display: flex;
    width: 100%;
}
.kla-img-col {
    flex: 1;
    overflow: hidden;
    position: relative;
}
.kla-img-col img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Advanced Video Core Layouts */

.kla-media-container {
    display: flex;
    align-items: stretch;
}
.kla-video-aspect-ratio {
    position: relative;
    width: 100%;
    min-height: 100%;
    overflow: hidden;
}
.kla-video-aspect-ratio iframe, .kla-video-aspect-ratio video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 56.25vw;
    /* 16:9 Aspect Ratio */
    min-height: 100%;
    min-width: 100%;
    transform: translate(-50%, -50%);
    object-fit: cover;
    background: #000;
}
.kla-content-col {
    flex: 1;
    padding: 8% 6%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.kla-subtitle {
    color: #c5a365;
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 25px;
    font-weight: 500;
}
.kla-title {
    color: #ffffff;
    font-family: 'Playfair Display', serif;
    font-size: 42px;
    line-height: 1.2;
    margin-bottom: 40px;
    font-weight: 400;
}
.kla-amenities-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px 40px;
    margin-bottom: 45px;
}
.kla-amenity-item {
    display: flex;
    align-items: center;
    gap: 15px;
}
.kla-am-icon {
    color: #c5a365;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25px;
}
.kla-am-icon svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
}
.kla-am-label {
    color: #e0e0e0;
    font-size: 14px;
    font-weight: 300;
}
.kla-btn-outline {
    display: inline-block;
    align-self: flex-start;
    padding: 12px 30px;
    border: 1px solid #c5a365;
    color: #c5a365;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.3s ease;
}
.kla-btn-outline:hover {
    background: #c5a365;
    color: #021615;
}
.kla-distances-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 100%;
    max-width: 500px;
}
.kla-dist-item {
    display: flex;
    align-items: flex-end;
    width: 100%;
    color: #e0e0e0;
    font-size: 14px;
    font-weight: 300;
}
.kla-dist-loc {
    flex-shrink: 0;
}
.kla-dist-dots {
    flex-grow: 1;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.15);
    margin: 0 15px;
    position: relative;
    top: -5px;
}
.kla-dist-time {
    flex-shrink: 0;
    font-weight: 500;
}
@media (max-width: 1024px) {
    .kla-content-col {
        padding: 6% 4%;
    }
    .kla-title {
        font-size: 34px;
    }
}
@media (max-width: 768px) {
    .kla-row {
        flex-direction: column;
    }
    .kla-bottom-row {
        flex-direction: column;
    }
    .kla-img-col {
        height: 350px;
    }
    .kla-video-aspect-ratio iframe, .kla-video-aspect-ratio video {
        width: 100%;
        height: 100%;
        transform: none;
        top: 0;
        left: 0;
    }
    .kla-content-col {
        padding: 40px 20px;
    }
    .kla-amenities-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .kla-title {
        font-size: 32px;
    }
    .kla-distances-list {
        gap: 15px;
    }
}
.kallat-masterplan-wrapper {
    position: relative;
    width: 100%;
    min-height: 80vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 80px 5vw;
}
/* Background Map Viewer */

.kallat-mp-viewer {
    position: absolute;
    top: 0;
    right: 0;
    width: 75%;
    height: 100%;
    z-index: 1;
    /* Fades the map out on the left side so text is readable */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 35%);
    mask-image: linear-gradient(to right, transparent 0%, black 35%);
}
.kallat-mp-canvas {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.kallat-mp-canvas img {
    max-width: 100%;
    max-height: 90%;
    object-fit: contain;
    transition: transform 0.2s ease-out;
    /* Smooth zooming */
    transform-origin: center center;
    cursor: grab;
}
.kallat-mp-canvas img:active {
    cursor: grabbing;
    transition: none;
    /* Removes lag while dragging */
}
/* Top Filters */

.kallat-mp-filters {
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    gap: 10px;
    background: rgba(0, 0, 0, 0.4);
    padding: 8px;
    border-radius: 6px;
    backdrop-filter: blur(5px);
}
.kallat-filter-btn {
    background: transparent;
    color: #a0a0a0;
    border: 1px solid transparent;
    padding: 8px 20px;
    font-size: 11px;
    letter-spacing: 1px;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.kallat-filter-btn:hover {
    color: #ffffff;
}
.kallat-filter-btn.active {
    background: #d8bc8a;
    /* Kallat Gold */
    color: #021615;
    border-color: #d8bc8a;
}
/* Right Zoom Controls */

.kallat-mp-controls {
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.kallat-mp-controls button {
    width: 40px;
    height: 40px;
    background: #d8bc8a;
    color: #021615;
    border: none;
    border-radius: 6px;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease;
}
.kallat-mp-controls button:hover {
    background: #ffffff;
    transform: scale(1.05);
}
/* Left Content Panel */

.kallat-mp-content {
    position: relative;
    z-index: 10;
    width: 40%;
    max-width: 500px;
    pointer-events: auto;
    /* Allows clicking buttons */
}
.kmp-subtitle {
    color: #d8bc8a;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 20px;
    font-weight: 600;
}
.kmp-title {
    color: #ffffff;
    font-family: 'Playfair Display', serif;
    font-size: 48px;
    line-height: 1.1;
    margin-bottom: 25px;
    font-weight: 400;
}
.kmp-desc {
    color: #d1d1d1;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 40px;
    font-weight: 300;
}
.kmp-btn {
    display: inline-block;
    padding: 15px 35px;
    background: #d8bc8a;
    color: #021615;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.3s ease;
}
.kmp-btn:hover {
    background: #ffffff;
    transform: translateY(-2px);
}
/* Responsive */

@media (max-width: 1024px) {
    .kallat-mp-viewer {
        width: 100%;
        -webkit-mask-image: linear-gradient(to right, transparent 0%, black 50%);
    }
    .kallat-mp-content {
        width: 50%;
    }
    .kmp-title {
        font-size: 40px;
    }
}
@media (max-width: 768px) {
    .kallat-masterplan-wrapper {
        flex-direction: column;
        padding: 120px 5vw 40px 5vw;
    }
    /* Map goes below text on mobile */
    .kallat-mp-viewer {
        position: relative;
        width: 100%;
        height: 400px;
        order: 2;
        -webkit-mask-image: none;
        /* Remove fade on mobile */
        mask-image: none;
    }
    .kallat-mp-content {
        width: 100%;
        max-width: 100%;
        order: 1;
        margin-bottom: 30px;
    }
    /* Adjust Controls */
    .kallat-mp-filters {
        top: 20px;
        width: 90%;
        overflow-x: auto;
        justify-content: flex-start;
    }
    .kallat-filter-btn {
        flex-shrink: 0;
    }
    .kallat-mp-controls {
        right: 10px;
        top: 70%;
    }
}
.kallat-cta-wrapper {
    width: 100%;
    display: flex;
    flex-direction: row !important;
    /* Forces side-by-side layout */
    flex-wrap: nowrap !important;
    /* Prevents wrapping to next line */
    justify-content: space-between;
    align-items: center;
    gap: 60px;
    padding: 40px 0;
}
.kcta-left {
    flex: 1;
    /* Allows text to take up remaining space */
    min-width: 0;
    /* Prevents flexbox blowout */
}
.kcta-left h2 {
    color: #021615;
    font-family: 'Playfair Display', serif;
    font-size: 38px;
    line-height: 1.1;
    margin: 0 0 12px 0;
    font-weight: 500;
}
.kcta-left p {
    color: #2d3748;
    font-size: 16px;
    font-weight: 400;
    margin: 0;
}
/* 2x2 Button Grid */

.kcta-right {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    flex: 0 0 500px;
    /* STRICTLY locks the button grid width so they never over-stretch */
}
.kcta-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-decoration: none;
    transition: all 0.3s ease;
}
.kcta-btn i {
    font-size: 16px;
}
/* Dark Green Buttons */

.kcta-btn-dark {
    background: #022422;
    color: #ffffff;
    border: 1px solid #022422;
}
.kcta-btn-dark:hover {
    background: #043a37;
    color: #ffffff;
}
/* Outline Button (Transparent) */

.kcta-btn-outline {
    background: transparent;
    color: #022422;
    border: 1px solid rgba(2, 36, 34, 0.4);
}
.kcta-btn-outline:hover {
    background: rgba(2, 36, 34, 0.08);
    border-color: #022422;
}
/* Teal WhatsApp Button */

.kcta-btn-teal {
    background: #00bfa5;
    color: #ffffff;
    border: 1px solid #00bfa5;
}
.kcta-btn-teal:hover {
    background: #00a68f;
    color: #ffffff;
}
/* Responsive Styling */

@media (max-width: 992px) {
    /* Only stack on actual small tablets/phones, not in Elementor editor */
    .kallat-cta-wrapper {
        flex-direction: column !important;
        align-items: flex-start;
        gap: 30px;
    }
    .kcta-right {
        flex: 1;
        width: 100%;
    }
}
@media (max-width: 768px) {
    .kcta-left h2 {
        font-size: 28px;
    }
    .kcta-left p {
        font-size: 14px;
    }
    /* Force 2 columns on mobile */
    .kcta-right {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    /* Scale down button text and padding to fit mobile screens side-by-side */
    .kcta-btn {
        padding: 12px 10px;
        font-size: 10px;
        gap: 8px;
    }
    .kcta-btn i {
        font-size: 14px;
    }
}
.investor-section-bg {
    background: radial-gradient( ellipse at center, rgba(180, 145, 85, 0.08) 0%, rgba(180, 145, 85, 0.04) 30%, rgba(0, 0, 0, 0) 60%), radial-gradient( ellipse at center, #2a2621 0%, #22201d 35%, #191919 70%, #111111 100%);
}
@media (max-width: 768px) {
    .kallat-dev-title {
        font-size: 26px;
    }
    /* Force 2 columns using CSS Grid on mobile */
    .kallat-dev-stats {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 25px 15px;
        width: 100%;
    }
    .kallat-dev-stat {
        width: 100%;
        /* Resets the tablet width rule */
        gap: 10px;
    }
    /* Scale down icons and text slightly to fit */
    .kdev-icon {
        font-size: 24px;
    }
    .kdev-icon svg {
        width: 24px;
        height: 24px;
    }
    .kdev-val {
        font-size: 15px;
    }
    .kdev-lbl {
        font-size: 10px;
        line-height: 1.3;
    }
}
/* ================== PERL HERO ========== */

                .kp-hero-wrapper {
                    position: relative;
                    width: 100%;
                    min-height: 100vh;
                    background-size: cover;
                    background-position: center bottom;
                    display: flex;
                    flex-direction: column;
                    justify-content: flex-end;
                    padding-bottom: 80px; /* Space for the floating pill */
                    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
                }
                
                .kp-hero-overlay {
                    position: absolute;
                    inset: 0;
                    background: linear-gradient(to right, rgba(0, 15, 10, 0.9) 0%, rgba(0, 15, 10, 0.5) 40%, rgba(0, 15, 10, 0.1) 100%);
                    z-index: 1;
                }

                .kp-hero-container {
                    position: relative;
                    z-index: 2;
                    width: 100%;
                    max-width: 1200px;
                    margin: 0 auto;
                    padding: 0 5vw;
                }

                /* Text Content */
                .kp-sub {
                    font-size: 24px;
                    color: #ffffff;
                    letter-spacing: 2px;
                    font-weight: 300;
                    margin: 0 0 -5px 0;
                }
                .kp-title {
                    font-family: 'Playfair Display', serif;
                    font-size: 80px;
                    color: #ffffff;
                    line-height: 1.1;
                    margin: 0 0 15px 0;
                    letter-spacing: 2px;
                }
                .kp-tagline {
                    font-size: 20px;
                    color: #00bfa5; /* Kallat Pearl Teal */
                    font-weight: 400;
                    margin: 0 0 25px 0;
                }
                .kp-features {
                    font-size: 14px;
                    color: #e2e8f0;
                    line-height: 1.8;
                    margin-bottom: 35px;
                    letter-spacing: 0.5px;
                }

                /* Buttons */
                .kp-actions {
                    display: flex;
                    gap: 15px;
                    margin-bottom: 40px;
                }
                .kp-btn {
                    display: flex;
                    align-items: center;
                    gap: 10px;
                    padding: 12px 25px;
                    font-size: 13px;
                    font-weight: 500;
                    border-radius: 4px;
                    text-decoration: none;
                    transition: all 0.3s ease;
                }
                .kp-btn-icon {
                    font-size: 16px;
                    display: flex;
                }
                .kp-btn-icon svg {
                    width: 16px; height: 16px; fill: currentColor;
                }
                
                .kp-btn-teal {
                    background: #00bfa5;
                    color: #ffffff;
                    border: 1px solid #00bfa5;
                }
                .kp-btn-teal:hover {
                    background: #009984;
                    border-color: #009984;
                    color: #ffffff;
                }
                
                .kp-btn-outline {
                    background: transparent;
                    color: #ffffff;
                    border: 1px solid rgba(255, 255, 255, 0.4);
                }
                .kp-btn-outline:hover {
                    background: rgba(255, 255, 255, 0.1);
                    border-color: #ffffff;
                    color: #ffffff;
                }

                /* Stats Row */
                .kp-stats-divider {
                    width: 100%;
                    height: 1px;
                    background: rgba(255, 255, 255, 0.15);
                    margin-bottom: 25px;
                }
                .kp-stats-row {
                    display: flex;
                    gap: 40px;
                    align-items: center;
                }
                .kp-stat-item {
                    display: flex;
                    align-items: center;
                    gap: 12px;
                    position: relative;
                }
                /* Add divider line between stats */
                .kp-stat-item:not(:last-child)::after {
                    content: '';
                    position: absolute;
                    right: -20px;
                    top: 10%;
                    height: 80%;
                    width: 1px;
                    background: rgba(255, 255, 255, 0.2);
                }
                
                .kp-stat-icon {
                    color: #ffffff;
                    font-size: 24px;
                    opacity: 0.9;
                }
                .kp-stat-icon svg {
                    width: 24px; height: 24px; fill: currentColor;
                }
                .kp-stat-text {
                    display: flex;
                    flex-direction: column;
                }
                .kp-stat-val {
                    color: #ffffff;
                    font-size: 16px;
                    font-weight: 700;
                    line-height: 1.2;
                }
                .kp-stat-lbl {
                    color: #cbd5e1;
                    font-size: 11px;
                    font-weight: 400;
                }

                /* Floating Bottom Menu Pill */
                .kp-bottom-nav-wrap {
                    position: absolute;
                    bottom: 0;
                    left: 50%;
                    transform: translate(-50%, 50%); /* Forces it to overlap the section below */
                    z-index: 10;
                    width: 90%;
                    max-width: 1100px;
                }
                .kp-bottom-nav {
                    background: #ffffff;
                    border-radius: 50px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    padding: 10px 40px;
                    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
                }
                .kp-nav-item {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    gap: 6px;
                    text-decoration: none;
                    color: #64748b;
                    padding: 10px;
                    transition: color 0.3s ease;
                }
                .kp-nav-item:hover, .kp-nav-active {
                    color: #00bfa5;
                }
                .kp-nav-icon {
                    font-size: 18px;
                }
                .kp-nav-icon svg {
                    width: 18px; height: 18px; fill: currentColor;
                }
                .kp-nav-label {
                    font-size: 11px;
                    font-weight: 500;
                }

                /* Responsive Logic */
                @media (max-width: 1024px) {
                    .kp-title { font-size: 60px; }
                    .kp-bottom-nav-wrap { width: 95%; }
                    .kp-bottom-nav { padding: 10px 20px; }
                    .kp-stats-row { flex-wrap: wrap; gap: 20px 40px; }
                    .kp-stat-item:not(:last-child)::after { display: none; } /* Hide vertical lines on wrap */
                }

                @media (max-width: 768px) {
                    .kp-hero-wrapper { padding-bottom: 100px; justify-content: center; }
                    .kp-hero-overlay { background: linear-gradient(to top, rgba(0, 15, 10, 0.9) 0%, rgba(0, 15, 10, 0.4) 100%); }
                    
                    .kp-sub { font-size: 18px; }
                    .kp-title { font-size: 50px; }
                    .kp-tagline { font-size: 16px; }
                    
                    .kp-actions { flex-direction: column; }
                    .kp-btn { justify-content: center; }
                    
                    .kp-stats-row { grid-template-columns: 1fr 1fr; display: grid; }
                    
                    /* Make Pill Menu Scrollable on Mobile */
                    .kp-bottom-nav-wrap {
                        width: 100%;
                        border-radius: 0;
                        transform: none; /* Stops it from overlapping on mobile */
                        bottom: 0;
                        left: 0;
                    }
                    .kp-bottom-nav {
                        border-radius: 0;
                        overflow-x: auto; /* Allows swiping left/right */
                        justify-content: flex-start;
                        gap: 30px;
                        padding: 15px 20px;
                        -webkit-overflow-scrolling: touch; /* Smooth iOS scroll */
                        scrollbar-width: none; /* Hide scrollbar Firefox */
                    }
                    .kp-bottom-nav::-webkit-scrollbar {
                        display: none; /* Hide scrollbar Chrome/Safari */
                    }
                    .kp-nav-item {
                        flex-shrink: 0; /* Prevents text from wrapping */
                    }
                }
/* ======== PEARL HIGHLIGHT SEC ========= */

                .kp-township-wrapper {
                    display: grid;
                    grid-template-columns: 1.1fr 0.9fr; /* Map gets slightly more width weight */
                    gap: 50px;
                    align-items: center;
                    width: 100%;
                    max-width: 1400px;
                    margin: 0 auto;
                    padding: 60px 4vw;
                    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
                }

                /* Map Column Scaling */
                .kp-ts-map-col {
                    width: 100%;
                }
                .kp-ts-map-col img {
                    width: 100%;
                    height: auto;
                    display: block;
                    object-fit: contain;
                }

                /* Header Typography */
                .kp-ts-header {
                    margin-bottom: 35px;
                }
                .kp-ts-sub {
                    color: #00bfa5; /* Kallat Pearl Brand Teal */
                    font-size: 11px;
                    letter-spacing: 1.5px;
                    text-transform: uppercase;
                    margin: 0 0 8px 0;
                    font-weight: 600;
                }
                .kp-ts-title {
                    font-family: 'Playfair Display', serif;
                    font-size: 38px;
                    color: #021615;
                    font-weight: 500;
                    margin: 0 0 15px 0;
                }
                .kp-ts-accent-line {
                    width: 45px;
                    height: 2px;
                    background: #00bfa5;
                }

                /* Right Side Highlights Matrix */
                .kp-ts-grid {
                    display: grid;
                    grid-template-columns: repeat(2, 1fr); /* 2 balanced columns on desktop */
                    gap: 30px 20px;
                }
                .kp-ts-card {
                    display: flex;
                    align-items: center;
                    gap: 15px;
                }

                /* Dynamic Circular Counter Badge */
                .kp-ts-number {
                    width: 28px;
                    height: 28px;
                    background: #00bfa5;
                    color: #ffffff;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 12px;
                    font-weight: 700;
                    flex-shrink: 0;
                }

                /* Outlined Frame For Asset Icons */
                .kp-ts-icon-box {
                    width: 48px;
                    height: 48px;
                    border: 1px solid #cbd5e1;
                    border-radius: 8px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: #475569;
                    font-size: 20px;
                    flex-shrink: 0;
                }
                .kp-ts-icon-box svg {
                    width: 22px;
                    height: 22px;
                    fill: currentColor;
                }

                /* Content Label Settings */
                .kp-ts-text-box h4 {
                    font-size: 14px;
                    color: #021615;
                    font-weight: 700;
                    margin: 0 0 4px 0;
                    line-height: 1.3;
                }
                .kp-ts-text-box p {
                    font-size: 11px;
                    color: #64748b;
                    margin: 0;
                    line-height: 1.4;
                    font-weight: 400;
                }

                /* Clean Breakpoints For Responsive Views */
                @media (max-width: 1024px) {
                    .kp-township-wrapper {
                        grid-template-columns: 1fr; /* Stack columns on tablets */
                        gap: 40px;
                        padding: 40px 20px;
                    }
                    .kp-ts-map-col {
                        max-width: 700px;
                        margin: 0 auto;
                    }
                }

                @media (max-width: 768px) {
                    .kp-ts-title { font-size: 32px; }
                    
                    /* STRICTLY maintain the 2-column list view layout on mobile devices */
                    .kp-ts-grid {
                        grid-template-columns: repeat(2, 1fr) !important;
                        gap: 25px 12px;
                    }
                    
                    /* Tighter, balanced adjustments for space optimization on phone views */
                    .kp-ts-card {
                        gap: 8px;
                    }
                    .kp-ts-number {
                        width: 22px;
                        height: 22px;
                        font-size: 10px;
                    }
                    .kp-ts-icon-box {
                        width: 40px;
                        height: 40px;
                        font-size: 16px;
                        border-radius: 6px;
                    }
                    .kp-ts-icon-box svg {
                        width: 18px;
                        height: 18px;
                    }
                    .kp-ts-text-box h4 {
                        font-size: 12px;
                    }
                    .kp-ts-text-box p {
                        font-size: 10px;
                    }
                }
/* Lightbox Trigger Container */
                .kp-map-lightbox-trigger {
                    position: relative;
                    display: block;
                    width: 100%;
                    overflow: hidden;
                    border-radius: 8px;
                }

                /* Zoom Cue Overlay styling */
                .kp-map-zoom-overlay {
                    position: absolute;
                    inset: 0;
                    background: rgba(0, 191, 165, 0.15); /* Tint with brand teal */
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    gap: 10px;
                    color: #ffffff;
                    opacity: 0;
                    transition: opacity 0.3s ease;
                }

                .kp-map-zoom-overlay i {
                    font-size: 28px;
                    background: #021615;
                    padding: 12px;
                    border-radius: 50%;
                    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
                }

                .kp-map-zoom-overlay span {
                    font-size: 12px;
                    font-weight: 600;
                    letter-spacing: 0.5px;
                    background: #021615;
                    padding: 4px 12px;
                    border-radius: 20px;
                }

                /* Show cue on desktop hover */
                .kp-map-lightbox-trigger:hover .kp-map-zoom-overlay {
                    opacity: 1;
                }
                .kp-map-lightbox-trigger:hover img {
                    transform: scale(1.02);
                }
                .kp-ts-map-col img {
                    transition: transform 0.4s ease;
                }

                .kpl-locterm-wrapper { display: flex; gap: 60px; padding: 60px 2vw; font-family: -apple-system, sans-serif; max-width: 1400px; margin: 0 auto; }
                .kpl-lt-col { flex: 1; }
                .kpl-lt-sub { color: #00bfa5; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; margin: 0 0 10px 0; font-weight: 600; }
                .kpl-lt-title { color: #021615; font-family: 'Playfair Display', serif; font-size: 32px; font-weight: 400; margin: 0 0 30px 0; line-height: 1.2; }
                
                /* Left Map & List */
                .kpl-loc-content { display: flex; gap: 30px; align-items: stretch; } /* Stretch aligns map height to list height */
                
                /* Live Map Styling */
                .kpl-loc-map { flex: 1; min-height: 250px; border-radius: 8px; overflow: hidden; border: 1px solid #e2e8f0; position: relative; }
                .kpl-loc-map iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }
                
                .kpl-loc-list { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 15px; }
                .kpl-loc-item { display: flex; align-items: center; width: 100%; font-size: 12px; font-weight: 500; color: #021615; }
                .kpl-loc-icon { width: 24px; height: 24px; border: 1px solid #cbd5e1; border-radius: 4px; display: flex; align-items: center; justify-content: center; color: #64748b; margin-right: 12px; flex-shrink: 0; }
                .kpl-loc-icon svg { width: 12px; height: 12px; fill: currentColor; }
                .kpl-loc-dots { flex-grow: 1; border-bottom: 1px dashed #cbd5e1; margin: 0 10px; position: relative; top: -3px; }
                .kpl-loc-time { color: #64748b; font-weight: 400; flex-shrink: 0; }
                
                /* Right Payment & Trust */
                .kpl-pay-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 30px; }
                .kpl-pay-card { border: 1px solid #e2e8f0; border-radius: 8px; padding: 20px 10px; text-align: center; }
                .kpl-pay-step { color: #00bfa5; font-size: 18px; font-weight: 700; margin-bottom: 10px; }
                .kpl-pay-card h4 { font-size: 10px; color: #021615; font-weight: 700; margin: 0 0 8px 0; letter-spacing: 0.5px; }
                .kpl-pay-val { font-size: 13px; font-weight: 600; color: #334155; margin-bottom: 4px; }
                .kpl-pay-desc { font-size: 10px; color: #64748b; }
                
                .kpl-trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
                .kpl-trust-item { display: flex; align-items: center; gap: 10px; font-size: 10px; color: #475569; font-weight: 500; line-height: 1.3; }
                .kpl-trust-icon { color: #00bfa5; font-size: 20px; }
                .kpl-trust-icon svg { width: 20px; height: 20px; fill: currentColor; }

                /* Responsive Layouts */
                @media (max-width: 1024px) {
                    .kpl-locterm-wrapper { flex-direction: column; gap: 50px; }
                    .kpl-loc-content { flex-direction: column; align-items: stretch; }
                    .kpl-loc-map { min-height: 350px; } /* taller map on tablet/mobile */
                }
                
                @media (max-width: 768px) {
                    .kpl-pay-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 15px; }
                    .kpl-trust-grid { grid-template-columns: repeat(2, 1fr); }
                    .kpl-lt-title { font-size: 28px; }
                    .kpl-loc-map { min-height: 300px; }
                }

                .kpl-feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; min-height: 400px; }
                .kpl-feat-card { position: relative; background-size: cover; background-position: center; padding: 50px 40px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; min-height: 350px; }
                .kpl-feat-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.2) 100%); z-index: 1; transition: opacity 0.3s ease; }
                .kpl-feat-card:hover .kpl-feat-overlay { opacity: 0.95; }
                
                .kpl-feat-content { position: relative; z-index: 2; transform: translateY(20px); transition: transform 0.3s ease; }
                .kpl-feat-card:hover .kpl-feat-content { transform: translateY(0); }
                
                .kpl-feat-icon { width: 40px; height: 40px; border-radius: 50%; background: #00bfa5; color: #ffffff; display: flex; align-items: center; justify-content: center; font-size: 16px; margin-bottom: 20px; }
                .kpl-feat-icon svg { width: 16px; height: 16px; fill: currentColor; }
                .kpl-feat-content h3 { color: #ffffff; font-size: 24px; font-weight: 500; margin: 0 0 15px 0; }
                .kpl-feat-content p { color: #cbd5e1; font-size: 13px; line-height: 1.6; margin: 0 0 20px 0; opacity: 0; transition: opacity 0.3s ease; }
                .kpl-feat-card:hover .kpl-feat-content p { opacity: 1; }
                
                .kpl-feat-link { color: #ffffff; font-size: 12px; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; }
                .kpl-feat-link:hover { color: #00bfa5; }
                
                @media (max-width: 1024px) { .kpl-feat-grid { grid-template-columns: 1fr; } .kpl-feat-content p { opacity: 1; } .kpl-feat-content { transform: none; } }

                .kpl-prog-wrapper { padding: 60px 0; width: 100%; overflow: hidden; }
                .kpl-prog-scroll { width: 100%; max-width: 1200px; margin: 0 auto; overflow-x: auto; padding-bottom: 20px; scrollbar-width: none; }
                .kpl-prog-scroll::-webkit-scrollbar { display: none; }
                .kpl-prog-track { display: flex; justify-content: space-between; position: relative; min-width: 800px; padding-top: 15px; }
                .kpl-prog-line { position: absolute; top: 30px; left: 5%; right: 5%; height: 1px; border-top: 1px dashed #00bfa5; z-index: 1; }
                
                .kpl-prog-step { flex: 1; display: flex; flex-direction: column; align-items: center; position: relative; z-index: 2; text-align: center; padding: 0 10px; }
                .kpl-prog-node { width: 32px; height: 32px; background: #00bfa5; color: #ffffff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; margin-bottom: 15px; border: 4px solid #ffffff; }
                .kpl-prog-t1 { color: #021615; font-size: 14px; font-weight: 600; margin-bottom: 3px; }
                .kpl-prog-t2 { color: #64748b; font-size: 12px; margin-bottom: 20px; }
                .kpl-prog-img { width: 100%; max-width: 160px; height: 90px; object-fit: cover; border-radius: 6px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); border-radius: 15px; }
                
                @media (max-width: 768px) {
                    .kpl-prog-scroll { scroll-snap-type: x mandatory; padding: 0 20px 20px 20px; }
                    .kpl-prog-step { scroll-snap-align: center; flex: 0 0 220px; }
                }

                .kpl-am-wrapper { width: 100%; padding: 60px 0; font-family: -apple-system, sans-serif; text-align: center; }
                .kpl-section-header { margin-bottom: 40px; display: flex; flex-direction: column; align-items: center; }
                .kpl-section-header h6 { color: #00bfa5; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; margin: 0 0 10px 0; font-weight: 600; }
                .kpl-section-header h2 { color: #ffffff; font-family: 'Playfair Display', serif; font-size: 36px; font-weight: 400; margin: 0 0 15px 0; }
                .kpl-accent-line { width: 40px; height: 2px; background: #00bfa5; }
                
                .kpl-am-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 15px; max-width: 1200px; margin: 0 auto; }
                .kpl-am-card { border: 1px solid rgba(255,255,255,0.2); border-radius: 8px; padding: 25px 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: all 0.3s ease; }
                .kpl-am-card:hover { border-color: #00bfa5; background: rgba(0, 191, 165, 0.05); transform: translateY(-3px); }
                .kpl-am-icon { color: #00bfa5; font-size: 32px; margin-bottom: 12px; }
                .kpl-am-icon svg { width: 32px; height: 32px; fill: currentColor; }
                .kpl-am-text { color: #ffffff; font-size: 12px; font-weight: 400; line-height: 1.4; }
                
                @media (max-width: 1024px) { .kpl-am-grid { grid-template-columns: repeat(4, 1fr); } }
                @media (max-width: 768px) { 
                    .kpl-am-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; } 
                    .kpl-section-header h2 { font-size: 28px; }
                }

/* ========== FLOOR PLAN =========== */

                .kpl-floorplan-wrapper { width: 100%; max-width: 1200px; margin: 0 auto; font-family: -apple-system, sans-serif; padding: 40px 0; }
                .kpl-section-heading { color: #00bfa5; font-size: 14px; font-weight: 700; letter-spacing: 1px; margin: 0 0 20px 0; display: flex; align-items: center; gap: 8px; }
                
                /* TABS (Horizontally scrollable on mobile) */
                .kpl-tabs-nav { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 6px; gap: 6px; margin-bottom: 25px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
                .kpl-tabs-nav::-webkit-scrollbar { display: none; }
                .kpl-tab-btn { flex: 1 0 auto; padding: 14px 20px; text-align: center; border-radius: 6px; cursor: pointer; border: none; background: transparent; color: #475569; font-weight: 600; font-size: 13px; scroll-snap-align: center; transition: 0.3s; white-space: nowrap; }
                .kpl-tab-btn.active { background: #00bfa5; color: #ffffff; }

                /* PANELS */
                .kpl-plan-panel { display: none; background: #fafafa; border-radius: 12px; border: 1px solid #f1f5f9; padding: 40px; gap: 40px; }
                .kpl-plan-panel.active { display: grid; grid-template-columns: 1fr 1fr; }

                /* LEFT: Media */
                .kpl-plan-media { display: flex; flex-direction: column; gap: 15px; }
                .kpl-main-img-wrap { position: relative; border-radius: 8px; overflow: hidden; border: 1px solid #e2e8f0; background: #fff; display: flex; align-items: center; justify-content: center; padding: 20px; aspect-ratio: 4/3; }
                .kpl-active-img { max-width: 100%; max-height: 100%; object-fit: contain; }
                .kpl-expand-icon { position: absolute; top: 15px; right: 15px; width: 32px; height: 32px; background: #021615; color: #fff; display: flex; align-items: center; justify-content: center; border-radius: 4px; cursor: pointer; opacity: 0.8; transition: 0.3s; }
                .kpl-expand-icon:hover { opacity: 1; transform: scale(1.05); }
                
                /* Thumbnails */
                .kpl-thumbs-wrap { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 5px; }
                .kpl-thumb { width: 70px; height: 50px; object-fit: cover; border-radius: 4px; border: 2px solid transparent; cursor: pointer; opacity: 0.6; transition: 0.3s; }
                .kpl-thumb.active, .kpl-thumb:hover { border-color: #00bfa5; opacity: 1; }

                /* RIGHT: Content */
                .kpl-p-sub { color: #00bfa5; font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; margin: 0 0 10px 0; }
                .kpl-p-title { color: #021615; font-family: 'Playfair Display', serif; font-size: 32px; font-weight: 400; margin: 0 0 30px 0; line-height: 1.2; }
                
                .kpl-p-areas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-bottom: 30px; }
                .kpl-p-area { display: flex; flex-direction: column; gap: 5px; }
                .kpl-p-area span { color: #64748b; font-size: 11px; }
                .kpl-p-area strong { color: #021615; font-size: 16px; font-weight: 700; }
                
                .kpl-p-features { list-style: none; padding: 0; margin: 0 0 40px 0; display: flex; flex-direction: column; gap: 12px; }
                .kpl-p-features li { color: #475569; font-size: 13px; display: flex; align-items: center; gap: 10px; font-weight: 500; }
                .kpl-p-features i { color: #00bfa5; font-size: 16px; }

                /* Buttons */
                .kpl-p-actions { display: flex; flex-direction: column; gap: 12px; max-width: 300px; }
                .kpl-btn { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 20px; font-size: 13px; font-weight: 600; border-radius: 6px; text-decoration: none; transition: 0.3s; }
                .kpl-btn-teal { background: #00bfa5; color: #fff; border: 1px solid #00bfa5; }
                .kpl-btn-teal:hover { background: #009984; color: #fff; }
                .kpl-btn-outline { background: transparent; color: #475569; border: 1px solid #cbd5e1; }
                .kpl-btn-outline:hover { border-color: #00bfa5; color: #00bfa5; }

                /* Responsive */
                @media (max-width: 992px) {
                    .kpl-plan-panel.active { grid-template-columns: 1fr; }
                    .kpl-p-actions { max-width: 100%; }
                }
                @media (max-width: 768px) {
                    .kpl-plan-panel { padding: 25px; }
                    .kpl-p-title { font-size: 26px; }
                    .kpl-p-areas { grid-template-columns: 1fr; }
                }
/* ============= COMBARISON TABLE ========= */

                .kpl-compare-wrapper { width: 100%; max-width: 1200px; margin: 40px auto; font-family: -apple-system, sans-serif; }
                
                /* Responsive Table Scroll */
                .kpl-table-responsive { width: 100%; overflow-x: auto; background: #fafafa; border: 1px solid #e2e8f0; border-radius: 8px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
                
                .kpl-table { width: 100%; min-width: 800px; border-collapse: collapse; text-align: center; }
                .kpl-table th { padding: 25px 15px; font-size: 11px; font-weight: 700; color: #475569; letter-spacing: 0.5px; border-bottom: 1px solid #e2e8f0; }
                .kpl-table td { padding: 20px 15px; font-size: 13px; color: #021615; font-weight: 600; border-bottom: 1px solid #f1f5f9; }
                
                /* Sticky First Column (Locks "Features" on mobile horizontal scroll) */
                .kpl-table th:first-child { position: sticky; left: 0; background: #fafafa; text-align: left; z-index: 2; border-right: 1px solid #e2e8f0; }
                .kpl-table td:first-child { position: sticky; left: 0; background: #fafafa; text-align: left; z-index: 2; border-right: 1px solid #e2e8f0; color: #475569; }
                
                .kpl-table tbody tr:last-child td { border-bottom: none; }
                .kpl-table tbody tr:hover td { background: #f8fafc; }

/* ========= SPECIFICATIONS */
                .kpl-specs-wrapper {
                    width: 100%;
                    max-width: 1400px;
                    margin: 0 auto;
                    padding: 40px 20px;
                    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
                }
                
                /* Title */
                .kpl-specs-title {
                    color: #00bfa5; /* Kallat Pearl Teal */
                    font-size: 12px;
                    font-weight: 600;
                    letter-spacing: 1.5px;
                    text-transform: uppercase;
                    margin: 0 0 25px 0;
                }

                /* Grid Layout (Desktop: 5 Columns) */
                .kpl-specs-grid {
                    display: grid;
                    grid-template-columns: repeat(5, 1fr);
                    gap: 15px;
                }

                /* Individual Card */
                .kpl-specs-card {
                    border: 1px solid rgba(255, 255, 255, 0.15);
                    border-radius: 8px;
                    padding: 22px 18px;
                    display: flex;
                    align-items: flex-start;
                    gap: 15px;
                    transition: all 0.3s ease;
                    background: transparent;
                }
                .kpl-specs-card:hover {
                    border-color: #00bfa5;
                    background: rgba(0, 191, 165, 0.05);
                }

                /* Icon Styling */
                .kpl-specs-icon {
                    color: #00bfa5;
                    font-size: 26px;
                    flex-shrink: 0;
                    display: flex;
                }
                .kpl-specs-icon svg {
                    width: 26px;
                    height: 26px;
                    fill: currentColor;
                }

                /* Typography inside card */
                .kpl-specs-text h4 {
                    color: #ffffff;
                    font-size: 14px;
                    font-weight: 600;
                    margin: 0 0 6px 0;
                    letter-spacing: 0.5px;
                }
                .kpl-specs-text p {
                    color: #cbd5e1;
                    font-size: 11px;
                    line-height: 1.45;
                    margin: 0;
                    font-weight: 400;
                }

                /* --- Responsive Breakpoints --- */
                
                /* Tablets */
                @media (max-width: 1200px) {
                    .kpl-specs-grid {
                        grid-template-columns: repeat(3, 1fr);
                    }
                }

                /* Mobile (Strict 2 Column Layout) */
                @media (max-width: 768px) {
                    .kpl-specs-wrapper { padding: 30px 15px; }
                    .kpl-specs-title { text-align: center; }
                    
                    /* Force 2 columns */
                    .kpl-specs-grid {
                        grid-template-columns: repeat(2, 1fr) !important;
                        gap: 10px;
                    }
                    
                    /* Stack content vertically on mobile for better fit inside tight columns */
                    .kpl-specs-card {
                        flex-direction: column;
                        align-items: center;
                        text-align: center;
                        padding: 20px 12px;
                        gap: 12px;
                    }
                    
                    /* Resize text slightly for mobile */
                    .kpl-specs-icon { font-size: 24px; }
                    .kpl-specs-icon svg { width: 24px; height: 24px; }
                    .kpl-specs-text h4 { font-size: 13px; }
                    .kpl-specs-text p { font-size: 10px; }
                }
/* ======= FILTERABLE AMENITIES */
.kpl-amf-wrapper { width: 100%; max-width: 1200px; margin: 40px auto; font-family: -apple-system, sans-serif; }
                .kpl-section-title { color: #00bfa5; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; margin: 0; }
                
                .kpl-amf-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; flex-wrap: wrap; gap: 20px; }
                .kpl-amf-filters { display: flex; gap: 8px; flex-wrap: wrap; }
                .kpl-amf-btn { background: #fff; border: 1px solid #e2e8f0; padding: 8px 20px; border-radius: 20px; font-size: 11px; font-weight: 600; color: #64748b; cursor: pointer; transition: 0.3s; }
                .kpl-amf-btn.active, .kpl-amf-btn:hover { background: #00bfa5; color: #fff; border-color: #00bfa5; }
                
                .kpl-amf-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 15px; }
                .kpl-amf-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 25px 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; transition: 0.3s; }
                .kpl-amf-card:hover { border-color: #00bfa5; box-shadow: 0 4px 15px rgba(0,191,165,0.1); transform: translateY(-3px); }
                .kpl-amf-icon { color: #00bfa5; font-size: 32px; margin-bottom: 12px; }
                .kpl-amf-icon svg { width: 32px; height: 32px; fill: currentColor; }
                .kpl-amf-card span { color: #021615; font-size: 11px; font-weight: 600; }
                
                @media (max-width: 1024px) { .kpl-amf-grid { grid-template-columns: repeat(4, 1fr); } }
                @media (max-width: 768px) {
                    .kpl-amf-header { flex-direction: column; align-items: flex-start; }
                    .kpl-amf-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; } /* 2 Column Strict */
                    .kpl-amf-card { padding: 15px 10px; }
                    .kpl-amf-icon { font-size: 24px; }
                    .kpl-amf-icon svg { width: 24px; height: 24px; }
                }
/* WIDGET 2: BOOKING JOURNEY ========== */
.kpl-jr-wrapper { width: 100%; max-width: 1200px; margin: 40px auto; font-family: -apple-system, sans-serif; background: #fafafa; padding: 40px; border-radius: 12px; }
                .kpl-jr-scroll { width: 100%; overflow-x: auto; padding-bottom: 20px; scrollbar-width: none; }
                .kpl-jr-scroll::-webkit-scrollbar { display: none; }
                .kpl-jr-track { display: flex; justify-content: space-between; position: relative; min-width: 900px; }
                .kpl-jr-line { position: absolute; top: 22px; left: 5%; right: 5%; height: 1px; border-top: 1px dashed #00bfa5; z-index: 1; }
                
                .kpl-jr-step { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; z-index: 2; padding: 0 15px; }
                .kpl-jr-icon-wrap { background: #fafafa; padding: 0 10px; margin-bottom: 15px; }
                .kpl-jr-icon { width: 45px; height: 45px; background: #00bfa5; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; box-shadow: 0 0 0 4px #e0f2f1; }
                .kpl-jr-icon svg { width: 18px; height: 18px; fill: currentColor; }
                .kpl-jr-num { color: #00bfa5; font-size: 11px; font-weight: 700; margin-bottom: 5px; }
                .kpl-jr-step h4 { color: #021615; font-size: 13px; font-weight: 700; margin: 0 0 10px 0; }
                .kpl-jr-step p { color: #64748b; font-size: 11px; line-height: 1.5; margin: 0; }
                
                @media (max-width: 768px) {
                    .kpl-jr-wrapper { padding: 30px 15px; }
                    .kpl-jr-scroll { scroll-snap-type: x mandatory; }
                    .kpl-jr-step { scroll-snap-align: center; flex: 0 0 250px; }
                }
/* ERMS & CONDITIONS (ACCORDION) =============== */
.kpl-tc-wrapper { width: 100%; max-width: 1200px; margin: 40px auto; font-family: -apple-system, sans-serif; }
                .kpl-tc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px 30px; }
                .kpl-tc-item { background: #fafafa; border: 1px solid #e2e8f0; border-radius: 6px; overflow: hidden; }
                .kpl-tc-header { padding: 18px 20px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; color: #021615; font-size: 13px; font-weight: 600; transition: 0.3s; }
                .kpl-tc-header:hover { background: #f1f5f9; }
                .kpl-tc-header i { color: #64748b; font-size: 12px; }
                .kpl-tc-body { display: none; background: #fff; border-top: 1px solid #e2e8f0; }
                .kpl-tc-inner { padding: 20px; color: #64748b; font-size: 12px; line-height: 1.6; }
                
                @media (max-width: 768px) { .kpl-tc-grid { grid-template-columns: 1fr; gap: 10px; } }
/* =========== DOWNLOAD CENTRE =========== */
.kpl-dl-wrapper { width: 100%; max-width: 1200px; margin: 40px auto; font-family: -apple-system, sans-serif; }
                .kpl-dl-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 15px; }
                .kpl-dl-card { background: #fafafa; border: 1px solid #e2e8f0; border-radius: 8px; padding: 20px 15px; display: flex; align-items: center; text-decoration: none; transition: 0.3s; }
                .kpl-dl-card:hover { border-color: #00bfa5; background: #fff; box-shadow: 0 4px 15px rgba(0,0,0,0.05); transform: translateY(-2px); }
                .kpl-dl-icon { color: #00bfa5; font-size: 24px; margin-right: 12px; }
                .kpl-dl-icon svg { width: 24px; height: 24px; fill: currentColor; }
                .kpl-dl-text { flex-grow: 1; }
                .kpl-dl-text h5 { color: #021615; font-size: 12px; font-weight: 600; margin: 0 0 2px 0; line-height: 1.2; }
                .kpl-dl-text span { color: #64748b; font-size: 10px; font-weight: 700; }
                .kpl-dl-action { color: #cbd5e1; font-size: 14px; transition: 0.3s; }
                .kpl-dl-card:hover .kpl-dl-action { color: #021615; }
                
                @media (max-width: 1024px) { .kpl-dl-grid { grid-template-columns: repeat(3, 1fr); } }
                @media (max-width: 768px) { 
                    .kpl-dl-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; } /* 2 Column Strict */
                    .kpl-dl-card { padding: 15px 10px; }
                }
/* =========== FINAL CTA FOOTER ======== */
.kpl-fcta-wrapper { width: 100%; position: relative; background-size: cover; background-position: center; font-family: -apple-system, sans-serif; margin-top: 60px; border-radius: 12px; overflow: hidden; }
                .kpl-fcta-overlay { position: absolute; inset: 0; background: linear-gradient(to right, rgba(2,22,21,0.9) 0%, rgba(2,22,21,0.7) 100%); z-index: 1; }
                .kpl-fcta-content { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; padding: 60px; max-width: 1400px; margin: 0 auto; gap: 40px; }
                
                .kpl-fcta-left h2 { color: #fff; font-family: 'Playfair Display', serif; font-size: 38px; font-weight: 400; line-height: 1.2; margin: 0; }
                
                .kpl-fcta-right { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; flex-shrink: 0; }
                .kpl-fcta-card { display: flex; align-items: flex-start; gap: 15px; background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.2); padding: 25px 20px; border-radius: 8px; text-decoration: none; backdrop-filter: blur(5px); transition: 0.3s; }
                .kpl-fcta-card:hover { background: rgba(0,191,165,0.2); border-color: #00bfa5; transform: translateY(-3px); }
                
                .kpl-fcta-icon { color: #00bfa5; font-size: 24px; }
                .kpl-fcta-icon svg { width: 24px; height: 24px; fill: currentColor; }
                .kpl-fcta-text h4 { color: #fff; font-size: 13px; font-weight: 600; margin: 0 0 5px 0; }
                .kpl-fcta-text p { color: #cbd5e1; font-size: 11px; margin: 0; line-height: 1.4; }
                
                @media (max-width: 1024px) {
                    .kpl-fcta-content { flex-direction: column; align-items: flex-start; }
                    .kpl-fcta-right { width: 100%; }
                }
                @media (max-width: 768px) {
                    .kpl-fcta-content { padding: 40px 20px; }
                    .kpl-fcta-left h2 { font-size: 32px; text-align: center; width: 100%; }
                    .kpl-fcta-right { grid-template-columns: 1fr; } /* Stacks cards on mobile */
                }
/* PROGRESSSION CARD */
.kpl-pg-cards-wrap { width: 100%; max-width: 1400px; margin: 0 auto; padding: 40px 20px; font-family: -apple-system, sans-serif; }
                .kpl-pg-cards-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
                
                .kpl-pg-card { background: #ffffff; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.04); padding: 25px 20px; display: flex; flex-direction: column; gap: 15px; border: 1px solid #f1f5f9; }
                .kpl-pg-card-top { display: flex; align-items: center; gap: 15px; }
                
                .kpl-pg-icon { color: #00bfa5; font-size: 28px; display: flex; align-items: center; justify-content: center; }
                .kpl-pg-icon svg { width: 28px; height: 28px; fill: currentColor; }
                
                .kpl-pg-text h4 { color: #021615; font-size: 11px; font-weight: 700; margin: 0 0 5px 0; }
                .kpl-pg-text h2 { color: #475569; font-size: 24px; font-weight: 400; margin: 0; }
                
                .kpl-pg-bar-bg { width: 100%; height: 6px; background: #e2e8f0; border-radius: 3px; overflow: hidden; }
                .kpl-pg-bar-fill { height: 100%; background: #00bfa5; border-radius: 3px; transition: width 1s ease-in-out; }
                
                @media (max-width: 1200px) { .kpl-pg-cards-grid { grid-template-columns: repeat(3, 1fr); } }
                @media (max-width: 768px) { 
                    /* STRICT 2 COLUMN MOBILE VIEW */
                    .kpl-pg-cards-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
                    .kpl-pg-card { padding: 15px 12px; gap: 12px; }
                    .kpl-pg-card-top { flex-direction: column; align-items: flex-start; gap: 8px; }
                    .kpl-pg-icon { font-size: 22px; }
                    .kpl-pg-icon svg { width: 22px; height: 22px; }
                    .kpl-pg-text h2 { font-size: 20px; }
                }
/* ========= PROJECT TIMELINE */
.kpl-tl-wrapper { width: 100%; max-width: 1200px; margin: 40px auto; font-family: -apple-system, sans-serif; padding: 20px; }
                .kpl-tl-heading { color: #00bfa5; font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 40px; }
                
                .kpl-tl-scroll { width: 100%; overflow-x: auto; scrollbar-width: none; padding-bottom: 20px; }
                .kpl-tl-scroll::-webkit-scrollbar { display: none; }
                .kpl-tl-track { display: flex; justify-content: space-between; min-width: 900px; }
                
                .kpl-tl-node-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; }
                
                .kpl-tl-year { color: #021615; font-size: 13px; font-weight: 700; margin-bottom: 15px; }
                
                .kpl-tl-dot-wrap { width: 100%; display: flex; align-items: center; justify-content: center; position: relative; height: 16px; margin-bottom: 15px; }
                .kpl-tl-dot { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid #cbd5e1; position: relative; z-index: 2; }
                .kpl-tl-dot.completed { background: #00bfa5; border-color: #00bfa5; box-shadow: inset 0 0 0 3px #fff; }
                
                .kpl-tl-line { position: absolute; left: 50%; width: 100%; height: 2px; top: 50%; transform: translateY(-50%); z-index: 1; }
                .kpl-tl-line.solid { background: #00bfa5; }
                .kpl-tl-line.dashed { border-top: 2px dashed #94a3b8; }
                
                .kpl-tl-title { color: #475569; font-size: 12px; font-weight: 500; line-height: 1.4; margin-bottom: 15px; min-height: 35px; }
                .kpl-tl-status-icon { color: #cbd5e1; font-size: 18px; }
                .kpl-tl-status-icon.completed { color: #00bfa5; }
                
                @media (max-width: 768px) {
                    .kpl-tl-scroll { scroll-snap-type: x mandatory; padding: 0 10px 20px; }
                    .kpl-tl-node-wrap { scroll-snap-align: center; flex: 0 0 180px; }
                }
/* =============== BEFORE/AFTER PROGRESS DETAILS */
.kpl-ba-container { display: flex; width: 100%; max-width: 1400px; margin: 40px auto; font-family: -apple-system, sans-serif; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; }
                
                /* Left Slider Area */
                .kpl-ba-slider-wrap { flex: 1; position: relative; overflow: hidden; min-height: 400px; display: flex; }
                .kpl-ba-slider-wrap img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
                
                /* Clip Path magic for Before image */
                .kpl-ba-img-before { clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%); }
                
                /* Range Input (Invisible but functional) */
                .kpl-ba-range { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; z-index: 10; margin: 0; }
                
                /* Custom Drag Line/Button */
                .kpl-ba-drag-line { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: #fff; z-index: 5; transform: translateX(-50%); pointer-events: none; }
                .kpl-ba-drag-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; background: #1e293b; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; box-shadow: 0 4px 10px rgba(0,0,0,0.3); }
                
                .kpl-ba-labels { position: absolute; top: 20px; left: 20px; right: 20px; display: flex; justify-content: space-between; z-index: 4; pointer-events: none; }
                .kpl-ba-labels span { background: rgba(30,41,59,0.8); color: #fff; padding: 6px 15px; border-radius: 20px; font-size: 11px; font-weight: 700; letter-spacing: 1px; }
                .label-after { background: #00bfa5 !important; }

                /* Right Details Area */
                .kpl-ba-details { flex: 1; padding: 50px 40px; display: flex; flex-direction: column; justify-content: space-between; }
                .kpl-ba-top-row { display: flex; justify-content: space-between; gap: 30px; margin-bottom: 40px; }
                
                .kpl-ba-text-block { flex: 1; }
                .kpl-ba-sub { color: #00bfa5; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; margin: 0 0 15px 0; }
                .kpl-ba-title { color: #021615; font-family: 'Playfair Display', serif; font-size: 32px; font-weight: 400; line-height: 1.2; margin: 0 0 20px 0; }
                .kpl-ba-status { color: #00bfa5; font-size: 16px; font-weight: 600; display: flex; align-items: center; gap: 8px; margin-bottom: 20px; }
                .kpl-ba-desc { color: #475569; font-size: 13px; line-height: 1.6; margin: 0; }
                
                /* CSS Native Circle Chart */
                .kpl-ba-circle-wrap { flex-shrink: 0; }
                .kpl-ba-circle { width: 140px; height: 140px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
                .kpl-ba-circle-inner { width: 116px; height: 116px; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
                .kpl-ba-circle-inner span { color: #021615; font-size: 32px; font-weight: 700; }
                
                .kpl-ba-meta-row { display: flex; gap: 30px; border-top: 1px solid #e2e8f0; padding-top: 30px; }
                .kpl-ba-meta-item { display: flex; align-items: center; gap: 12px; }
                .kpl-ba-meta-icon { color: #00bfa5; font-size: 24px; }
                .kpl-ba-meta-text { display: flex; flex-direction: column; gap: 2px; }
                .kpl-ba-meta-text span { color: #64748b; font-size: 11px; font-weight: 500; }
                .kpl-ba-meta-text strong { color: #021615; font-size: 12px; font-weight: 700; }
                
                @media (max-width: 1024px) {
                    .kpl-ba-container { flex-direction: column; }
                    .kpl-ba-top-row { flex-direction: column; }
                    .kpl-ba-circle-wrap { align-self: flex-start; }
                }
                @media (max-width: 768px) {
                    .kpl-ba-slider-wrap { min-height: 250px; }
                    .kpl-ba-details { padding: 30px 20px; }
                    .kpl-ba-title { font-size: 26px; }
                    .kpl-ba-meta-row { flex-direction: column; gap: 20px; }
                }
/* ======== WORK PROGRESS ALBUMS */


                .kpl-mpg-wrapper { width: 100%; max-width: 1400px; margin: 40px auto; padding: 20px 1vw; font-family: -apple-system, sans-serif; position: relative; }
                
                /* Header & Filters */
                .kpl-mpg-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; flex-wrap: wrap; gap: 20px; }
                .kpl-mpg-title { color: #00bfa5; font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; margin: 0; flex-shrink: 0; }
                .kpl-mpg-filters { display: flex; gap: 10px; flex-wrap: wrap; }
                .kpl-mpg-filter-btn { background: #ffffff; border: 1px solid #e2e8f0; padding: 8px 20px; border-radius: 20px; font-size: 11px; font-weight: 600; color: #475569; cursor: pointer; transition: all 0.3s ease; }
                .kpl-mpg-filter-btn.active, .kpl-mpg-filter-btn:hover { background: #00bfa5; color: #ffffff; border-color: #00bfa5; }

                /* Carousel System */
                .kpl-mpg-carousel-wrap { position: relative; width: 100%; }
                .kpl-mpg-track { display: flex; gap: 20px; overflow-x: auto; padding-bottom: 20px; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; }
                .kpl-mpg-track::-webkit-scrollbar { display: none; }
                
                /* Cards */
                .kpl-mpg-card { flex: 0 0 340px; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 20px; scroll-snap-align: start; transition: opacity 0.3s ease; }
                
                .kpl-mpg-card-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 15px; }
                .kpl-mpg-card-head h5 { color: #021615; font-size: 16px; font-weight: 700; margin: 0; }
                .kpl-mpg-card-head span { color: #94a3b8; font-size: 11px; font-weight: 500; }
                
                /* Dynamic Image Grid Layout */
                .kpl-mpg-grid { display: grid; grid-template-columns: 1.5fr 1fr; grid-template-rows: 110px 110px; gap: 8px; width: 100%; }
                .kpl-mpg-img-link { position: relative; border-radius: 6px; overflow: hidden; display: block; background: #f8fafc; }
                .kpl-mpg-img-link img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
                .kpl-mpg-img-link:hover img { transform: scale(1.05); }
                
                /* Position 1 (Large Left) */
                .kpl-mpg-grid > a:nth-child(1) { grid-column: 1 / 2; grid-row: 1 / 3; }
                /* Position 2 (Top Right) */
                .kpl-mpg-grid > a:nth-child(2) { grid-column: 2 / 3; grid-row: 1 / 2; }
                /* Position 3 (Bottom Right) */
                .kpl-mpg-grid > a:nth-child(3) { grid-column: 2 / 3; grid-row: 2 / 3; }
                
                /* Hidden Anchors (For loading entire album into Lightbox) */
                .kpl-mpg-hidden { display: none !important; }
                
                /* Overlay for "+X Photos" */
                .kpl-mpg-more-overlay { position: absolute; inset: 0; background: rgba(2, 22, 21, 0.6); color: #ffffff; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; pointer-events: none; }

                /* Scroll Arrow Button */
                .kpl-mpg-next-btn { position: absolute; right: -25px; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; border-radius: 50%; background: #ffffff; border: 1px solid #e2e8f0; color: #00bfa5; display: flex; align-items: center; justify-content: center; font-size: 16px; cursor: pointer; box-shadow: 0 4px 15px rgba(0,0,0,0.05); z-index: 5; transition: 0.3s; }
                .kpl-mpg-next-btn:hover { background: #00bfa5; color: #ffffff; border-color: #00bfa5; }

                /* Mobile Optimization */
                @media (max-width: 1024px) {
                    .kpl-mpg-next-btn { right: 0; }
                }

                @media (max-width: 768px) {
                    .kpl-mpg-header { flex-direction: column; align-items: flex-start; gap: 15px; }
                    /* Make card 85% of screen width so the next card peeks out, hinting at swipeability */
                    .kpl-mpg-card { flex: 0 0 85vw; max-width: 320px; }
                    /* Hide arrow on mobile, rely on touch scrolling */
                    .kpl-mpg-next-btn { display: none; }
                }
/* ======== TOWNSHIP DEVELOPMENT MAP */
.kpl-devmap-wrapper { position: relative; width: 100%; max-width: 1400px; margin: 0 auto; font-family: -apple-system, sans-serif; }
                
                /* Map Container */
                .kpl-devmap-container { position: relative; width: 100%; display: block; overflow: hidden; border-radius: 12px; }
                .kpl-devmap-img { width: 100%; height: auto; display: block; object-fit: contain; }
                
                /* Pins */
                .kpl-map-pin { position: absolute; transform: translate(-50%, -100%); z-index: 5; display: flex; flex-direction: column; align-items: center; cursor: pointer; }
                .kpl-map-pin i { font-size: 28px; text-shadow: 0 4px 8px rgba(0,0,0,0.4); z-index: 2; position: relative; }
                .kpl-pin-pulse { position: absolute; bottom: -4px; width: 12px; height: 12px; border-radius: 50%; z-index: 1; opacity: 0.7; animation: kplPulse 2s infinite; }
                @keyframes kplPulse { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(3); opacity: 0; } }
                
                /* Floating Legend */
                .kpl-devmap-legend { position: absolute; top: 40px; left: 40px; background: rgba(10, 25, 41, 0.85); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.15); border-radius: 12px; padding: 25px 30px; min-width: 300px; z-index: 10; box-shadow: 0 10px 30px rgba(0,0,0,0.3); }
                .kpl-devmap-legend h4 { color: #00bfa5; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; margin: 0 0 20px 0; }
                
                .kpl-legend-grid { display: flex; flex-direction: column; gap: 15px; }
                .kpl-legend-item { display: flex; justify-content: space-between; align-items: center; font-size: 13px; gap: 20px; }
                .kpl-li-left { display: flex; align-items: center; gap: 12px; }
                .kpl-li-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
                .kpl-li-title { color: #ffffff; font-weight: 500; }
                .kpl-li-status { font-weight: 600; font-size: 12px; text-align: right; }
                
                @media (max-width: 992px) {
                    /* On tablets, make the legend relatively positioned below the map */
                    .kpl-devmap-legend { position: relative; top: 0; left: 0; margin-top: 20px; width: 100%; }
                    .kpl-legend-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px 30px; }
                }

                @media (max-width: 768px) {
                    .kpl-map-pin i { font-size: 22px; }
                    .kpl-legend-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 15px; }
                    .kpl-legend-item { flex-direction: column; align-items: flex-start; gap: 4px; }
                    .kpl-li-status { padding-left: 22px; font-size: 11px; }
                }
/* ========== MILESTONES & WHAT'S NEXT */
.kpl-msnx-wrapper { display: flex; gap: 50px; width: 100%; max-width: 1400px; margin: 40px auto; font-family: -apple-system, sans-serif; padding: 20px; }
                .kpl-msnx-left { flex: 1.2; }
                .kpl-msnx-right { flex: 0.8; }
                
                .kpl-msnx-heading { color: #00bfa5; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; margin: 0 0 30px 0; }
                
                /* Left Grid (Circles) */
                .kpl-ms-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 20px; }
                .kpl-ms-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 15px; }
                
                .kpl-ms-circle { width: 85px; height: 85px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
                .kpl-ms-circle-inner { width: 71px; height: 71px; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
                .kpl-ms-circle-inner span { color: #021615; font-size: 18px; font-weight: 700; }
                .kpl-ms-item h5 { color: #475569; font-size: 11px; font-weight: 600; margin: 0; line-height: 1.3; }

                /* Right Track (Cards) */
                .kpl-nx-track { display: flex; gap: 20px; position: relative; }
                .kpl-nx-card { flex: 1; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 25px 15px; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; box-shadow: 0 4px 15px rgba(0,0,0,0.02); }
                
                .kpl-nx-icon { color: #00bfa5; font-size: 24px; margin-bottom: 15px; }
                .kpl-nx-icon svg { width: 24px; height: 24px; fill: currentColor; }
                .kpl-nx-date { color: #00bfa5; font-size: 10px; font-weight: 700; margin-bottom: 5px; }
                .kpl-nx-card h6 { color: #021615; font-size: 12px; font-weight: 600; line-height: 1.3; margin: 0 0 10px 0; }
                .kpl-nx-status { color: #94a3b8; font-size: 10px; font-weight: 600; }
                .kpl-nx-status.kpl-nx-highlight { color: #00bfa5; }

                /* Connector Line between cards */
                .kpl-nx-connector { position: absolute; right: -22px; top: 50%; width: 24px; height: 1px; border-top: 2px dotted #00bfa5; z-index: -1; pointer-events: none; }

                /* Responsive */
                @media (max-width: 1024px) {
                    .kpl-msnx-wrapper { flex-direction: column; gap: 50px; }
                    .kpl-ms-grid { grid-template-columns: repeat(5, 1fr); }
                }

                @media (max-width: 768px) {
                    /* Strict 2-column mobile for milestones */
                    .kpl-ms-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 25px 15px; }
                    
                    /* Swipeable timeline on mobile to preserve space */
                    .kpl-nx-track { overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 15px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
                    .kpl-nx-track::-webkit-scrollbar { display: none; }
                    .kpl-nx-card { flex: 0 0 160px; scroll-snap-align: start; }
                }


        .kp-minimal-specs-container { width: 100%; font-family: -apple-system, sans-serif; }
        .kp-min-spec-row { display: flex; align-items: stretch; border-bottom: 1px solid #eaeaea; transition: background 0.2s ease; }
        .kp-min-spec-row:hover { background: #fdfdfd; }
        .kp-min-spec-label { width: 25%; max-width: 280px; padding: 22px 24px; font-size: 13px; font-weight: 600; text-transform: uppercase; color: #111111; letter-spacing: 0.5px; display: flex; align-items: center; }
        .kp-min-spec-value { flex: 1; padding: 22px 24px; font-size: 14px; color: #444444; line-height: 1.6; display: flex; align-items: center; }
        .kp-minimal-specs-container .kp-min-spec-row:first-child { background: #f5f5f5; border-top: 1px solid #eaeaea; }
        .kp-minimal-specs-container .kp-min-spec-row:first-child .kp-min-spec-value { color: #111111; font-weight: 600; }
        
        .kpl-mpg-grid { display: grid; grid-template-columns: 1.5fr 1fr; grid-template-rows: 200px 200px; gap: 15px; width: 100%; max-width: 800px; }
        .kpl-mpg-grid > a:nth-child(1) { grid-column: 1 / 2; grid-row: 1 / 3; }
        .kpl-mpg-grid > a:nth-child(2) { grid-column: 2 / 3; grid-row: 1 / 2; }
        .kpl-mpg-grid > a:nth-child(3) { grid-column: 2 / 3; grid-row: 2 / 3; }

        /* Floor Plan Grid - Desktop */
        .kp-floor-plan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }

        @media (max-width: 768px) {
            .kp-min-spec-row { flex-direction: column; padding: 15px 5px; }
            .kp-min-spec-label { width: 100%; max-width: 100%; padding: 0 0 6px 0; font-size: 12px; }
            .kp-min-spec-value { width: 100%; padding: 0; font-size: 13px; }
            .kp-minimal-specs-container .kp-min-spec-row:first-child { background: transparent; }
            
            .kpl-mpg-grid { grid-template-rows: 150px 150px; }
            
            /* Floor Plan Grid - Strict 2 Column on Mobile */
            .kp-floor-plan-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
        }
.product-detail_amenities,
.product-detail_overview {
    font-size: 14px;
    font-weight: 400;
    color: #333;
}

.product-detail_amenities h5,
.product-detail_overview h5 {
    font-size: 18px;
    font-weight: bold;
    line-height: 25px;
    color: #28b2b9;
}

@media (max-width: 480px) {

    .product-detail_amenities h5,
    .product-detail_overview h5 {
        font-size: 14px;
    }
}

.product-detail_amenities p,
.product-detail_overview p {
    font-size: 14px;
    margin-bottom: 0;
}

.product-detail_amenities h6,
.product-detail_overview h6 {
    text-transform: uppercase;
    color: #333;
    font-weight: bold;
    font-size: 14px;
    margin-top: 37px;
}

.product-detail_amenities ul,
.product-detail_overview ul {
    padding-left: 17px;
    margin-bottom: 0;
    margin-top: 5px;
}

.product-detail_amenities ul li,
.product-detail_overview ul li {
    padding: 4px 0;
    padding-left: 5px;
    list-style-image: url('https://beta.kallatgroup.com/wp-content/uploads/2026/06/kallat-icon-sml.png');
}
/* =========== ABOUT PAGE */

                /* Wrapper & Backgrounds */
                .kpl-about-hero-wrapper {
                    position: relative;
                    width: 100%;
                    padding: 120px 0 160px 0; /* Extra bottom padding for overlapping stats */
                    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
                }
                .kpl-ah-bg {
                    position: absolute;
                    inset: 0;
                    background-size: cover;
                    background-position: center;
                    background-repeat: no-repeat;
                    z-index: 1;
                }
                .kpl-ah-overlay {
                    position: absolute;
                    inset: 0;
                    z-index: 2;
                }

                /* Content Container */
                .kpl-ah-container {
                    position: relative;
                    z-index: 3;
                    max-width: 1300px;
                    margin: 0 auto;
                    padding: 0 20px;
                }
                .kpl-ah-content {
                    max-width: 700px;
                }
                .kpl-ah-subtitle {
                    font-size: 13px;
                    font-weight: 700;
                    letter-spacing: 2px;
                    text-transform: uppercase;
                    display: block;
                    margin-bottom: 20px;
                }
                .kpl-ah-title {
                    font-size: 54px;
                    font-weight: 400;
                    color: #ffffff;
                    line-height: 1.15;
                    margin: 0 0 25px 0;
                }
                /* Handles the accent word injected via the setting instructions */
                .kpl-ah-title .kpl-accent {
                    color: #049c97;
                }
                .kpl-ah-desc {
                    font-size: 17px;
                    color: rgba(255, 255, 255, 0.9);
                    line-height: 1.6;
                    margin: 0 0 40px 0;
                    max-width: 550px;
                }

                /* Buttons */
                .kpl-ah-buttons {
                    display: flex;
                    gap: 20px;
                    align-items: center;
                    flex-wrap: wrap;
                }
                .kpl-btn-primary, .kpl-btn-outline {
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    padding: 15px 30px;
                    border-radius: 6px;
                    font-size: 14px;
                    font-weight: 600;
                    text-decoration: none;
                    transition: 0.3s ease;
                }
                .kpl-btn-primary {
                    color: #ffffff;
                    border: 1px solid transparent;
                }
                .kpl-btn-primary:hover {
                    opacity: 0.9;
                    color: #ffffff;
                }
                .kpl-btn-outline {
                    background: transparent;
                    color: #ffffff;
                    border: 1px solid rgba(255,255,255,0.4);
                }
                .kpl-btn-outline:hover {
                    background: rgba(255,255,255,0.1);
                    border-color: #ffffff;
                    color: #ffffff;
                }
                .kpl-btn-icon {
                    margin-right: 10px;
                    font-size: 14px;
                }
                .kpl-btn-icon svg {
                    width: 14px; height: 14px; fill: currentColor;
                }

                /* Floating Stats Bar */
                .kpl-ah-stats-wrapper {
                    position: absolute;
                    bottom: -50px; /* Pulls it down to overlap the next section */
                    left: 0; right: 0;
                    z-index: 10;
                    padding: 0 20px;
                }
                .kpl-ah-stats-inner {
                    max-width: 1300px;
                    margin: 0 auto;
                    background: #ffffff;
                    border-radius: 20px;
                    padding: 35px 40px;
                    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                }
                .kpl-ah-stat-item {
                    display: flex;
                    align-items: center;
                    gap: 15px;
                    flex: 1;
                    justify-content: center;
                }
                .kpl-ah-stat-icon {
                    width: 45px;
                    height: 45px;
                    flex-shrink: 0;
                }
                .kpl-ah-stat-icon img {
                    width: 100%; height: 100%; object-fit: contain;
                }
                .kpl-ah-stat-text {
                    display: flex;
                    flex-direction: column;
                }
                .kpl-ah-stat-text h4 {
                    font-size: 26px;
                    font-weight: 700;
                    margin: 0 0 2px 0;
                    line-height: 1;
                }
                .kpl-ah-stat-text span {
                    color: #64748b;
                    font-size: 13px;
                    line-height: 1.3;
                    font-weight: 500;
                }
                .kpl-ah-stat-divider {
                    width: 1px;
                    height: 50px;
                    background: #e2e8f0;
                    margin: 0 15px;
                }

                /* STRICT MOBILE RESPONSIVENESS */
                @media (max-width: 1024px) {
                    .kpl-ah-title { font-size: 44px; }
                    
                    /* Grid break for stats on tablet */
                    .kpl-ah-stats-inner {
                        flex-wrap: wrap;
                        gap: 30px;
                        justify-content: center;
                    }
                    .kpl-ah-stat-item { flex: 0 0 calc(33.333% - 30px); }
                    .kpl-ah-stat-divider { display: none; }
                }

                @media (max-width: 768px) {
                    .kpl-about-hero-wrapper {
                        padding: 100px 0 80px 0; 
                    }
                    .kpl-ah-stats-wrapper {
                        position: relative;
                        bottom: 0;
                        margin-top: 40px;
                        padding: 0 15px;
                    }
                    .kpl-ah-title {
                        font-size: 34px;
                    }
                    .kpl-ah-desc {
                        font-size: 15px;
                    }
                    .kpl-ah-buttons {
                        flex-direction: column;
                        align-items: stretch;
                    }
                    .kpl-btn-primary, .kpl-btn-outline {
                        width: 100%;
                        text-align: center;
                    }

                    /* 2-Column Strict Grid for Stats on Mobile */
                    .kpl-ah-stats-inner {
                        padding: 25px 20px;
                        display: grid;
                        grid-template-columns: repeat(2, 1fr);
                        gap: 25px 15px;
                        border-radius: 12px;
                    }
                    .kpl-ah-stat-item {
                        flex: unset;
                        justify-content: flex-start;
                        gap: 12px;
                    }
                    /* If odd number of stats, span the last one full width to look clean */
                    .kpl-ah-stat-item:last-child:nth-child(odd) {
                        grid-column: span 2;
                        justify-content: center;
                        text-align: center;
                    }
                    .kpl-ah-stat-icon { width: 35px; height: 35px; }
                    .kpl-ah-stat-text h4 { font-size: 22px; }
                    .kpl-ah-stat-text span { font-size: 11px; br { display: none; } }
                }

                .kpl-timeline-wrapper {
                    width: 100%;
                    max-width: 800px;
                    margin: 0 auto;
                    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
                }
                
                .kpl-timeline-container {
                    display: flex;
                    flex-direction: column;
                }

                .kpl-timeline-item {
                    display: flex;
                    align-items: stretch;
                    position: relative;
                    /* Padding bottom creates the spacing between items */
                    padding-bottom: 30px; 
                }

                /* Remove bottom padding and connecting line from the very last item */
                .kpl-timeline-item:last-child {
                    padding-bottom: 0;
                }
                .kpl-timeline-item:last-child .kpl-timeline-line {
                    display: none;
                }

                /* Marker Column (Dot & Line) */
                .kpl-timeline-marker-col {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    width: 20px;
                    flex-shrink: 0;
                    position: relative;
                }

                .kpl-timeline-dot {
                    width: 12px;
                    height: 12px;
                    background-color: var(--tl-accent);
                    border-radius: 50%;
                    position: relative;
                    z-index: 2;
                    /* Adjust top margin to visually align dot with the text baseline */
                    margin-top: 6px; 
                }

                .kpl-timeline-line {
                    position: absolute;
                    top: 18px; /* Starts just below the dot */
                    bottom: 0; /* Stretches to the bottom of the padding area */
                    width: 2px;
                    background-color: var(--tl-accent);
                    opacity: var(--tl-line-opacity);
                    z-index: 1;
                }

                /* Year Column */
                .kpl-timeline-year-col {
                    width: 70px;
                    flex-shrink: 0;
                    margin-left: 20px;
                    color: var(--tl-accent);
                    font-size: 16px;
                    font-weight: 700;
                    line-height: 1.5;
                }

                /* Description Column */
                .kpl-timeline-desc-col {
                    flex-grow: 1;
                    margin-left: 15px;
                    color: var(--tl-text);
                    font-size: 15px;
                    line-height: 1.5;
                    font-weight: 400;
                }

                /* Mobile Adjustments */
                @media (max-width: 768px) {
                    .kpl-timeline-year-col {
                        width: 55px;
                        margin-left: 15px;
                        font-size: 15px;
                    }
                    .kpl-timeline-desc-col {
                        margin-left: 10px;
                        font-size: 14px;
                    }
                }
/* ==========================================================================
   WIDGET 1: BUSINESS VERTICALS
   ========================================================================== */

.kpl-verticals-section {
    width: 100%;
    padding: 60px 0;
}

/* Heading Styling */
.kpl-section-heading {
    text-align: center;
    margin-bottom: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.kpl-sub-heading {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.kpl-heading-line {
    width: 40px;
    height: 2px;
    margin-top: 10px;
}

/* Grid Layout - Defaults to 4 via Elementor, scalable */
.kpl-verticals-grid {
    display: grid;
    gap: 25px;
    max-width: 1300px;
    margin: 0 auto;
}

/* Card Styling */
.kpl-vertical-card {
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
    transition: transform 0.3s ease;
    border: 1px solid #f0f0f0;
}
.kpl-vertical-card:hover {
    transform: translateY(-5px);
}
.kpl-vert-img {
    width: 100%;
    height: 200px;
}
.kpl-vert-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The Overlapping Icon */
.kpl-vert-content {
    padding: 0 25px 30px 25px;
    position: relative;
}
.kpl-vert-icon {
    width: 45px;
    height: 45px;
	padding: 5px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 20px;
    border: 4px solid #ffffff;
    margin-top: -25px; 
    margin-bottom: 15px;
    position: relative;
    z-index: 2;
}
.kpl-vert-icon svg{
	color: #FFFFFF !important;
}

.kpl-vert-content h3 {
    font-size: 22px;
    color: #021615;
    margin: 0 0 15px 0;
}
.kpl-vert-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.kpl-vert-list li {
    font-size: 14px;
    color: #64748b;
    margin-bottom: 8px;
    line-height: 1.4;
}


/* ==========================================================================
   WIDGET 2: FLAGSHIP DEVELOPMENTS
   ========================================================================== */

/* Dark Section Wrap */
.kpl-flagship-section {
    padding: 80px 20px;
    border-radius: 16px;
    margin-top: 40px;
}

/* Scalable Grid Architecture 
   We use a 4-column base. Main card spans 2 columns, standard cards span 1. 
   This perfectly creates the 1-large, 2-small layout in the design, and scales infinitely. */
.kpl-flagship-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 260px; /* Forces uniform heights for rows */
    gap: 20px;
    max-width: 1300px;
    margin: 0 auto;
}

/* Base Card Styling */
.kpl-flag-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    transition: 0.3s ease;
}
.kpl-flag-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.4);
}
.kpl-flag-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(2, 22, 21, 0.95) 0%, rgba(2, 22, 21, 0.1) 100%);
    z-index: 1;
}
.kpl-flag-content {
    position: relative;
    z-index: 2;
    padding: 25px;
    color: #ffffff;
}

/* Typography */
.kpl-flag-tag {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 8px;
}
.kpl-flag-title {
    margin: 0 0 5px 0;
    color: #ffffff;
}
.kpl-flag-loc {
    font-size: 13px;
    color: rgba(255,255,255,0.7);
    display: block;
    margin-bottom: 15px;
}
.kpl-flag-link {
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* --- The Main Card Specifics --- */
.kpl-flag-main {
    grid-column: span 2;
    grid-row: span 2; 
}
.kpl-flag-main .kpl-flag-content {
    padding: 40px;
}
.kpl-flag-main .kpl-flag-title {
    font-size: 36px;
}
.kpl-flag-desc {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255,255,255,0.85);
    margin: 0 0 25px 0;
    max-width: 90%;
}

/* --- The Standard Card Specifics --- */
.kpl-flag-standard {
    grid-column: span 1; /* Takes up 1 column on right */
    grid-row: span 1;
}
.kpl-flag-standard .kpl-flag-title {
    font-size: 22px;
}


/* ==========================================================================
   STRICT MOBILE RESPONSIVENESS (AS REQUESTED)
   ========================================================================== */

/* Tablet Adjustments */
@media (max-width: 1024px) {
    /* Flagship shifts to 2 columns total */
    .kpl-flagship-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .kpl-flag-main {
        grid-column: span 2; /* Main card stays full width on tablet */
        grid-row: span 1;
        min-height: 400px;
    }
    .kpl-flag-standard {
        grid-column: span 1; /* Standard cards sit 2 side-by-side underneath */
        min-height: 250px;
    }
}

/* Mobile Strict Rules */
@media (max-width: 768px) {
    
    /* 1. Verticals Grid: STRICTLY 2 COLUMNS */
    .kpl-verticals-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px;
        padding: 0 10px;
    }
    .kpl-vert-img { height: 120px; }
    .kpl-vert-icon { width: 40px; height: 40px; font-size: 16px; margin-top: -20px; }
    .kpl-vert-content { padding: 0 15px 20px 15px; }
    .kpl-vert-content h3 { font-size: 16px; margin-bottom: 10px; }
    .kpl-vert-list li { font-size: 12px; }

    /* 2. Flagship Grid: Main is 1 Col, Standards are 2 Col side-by-side */
    .kpl-flagship-section {
        padding: 40px 10px;
    }
    .kpl-flagship-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        grid-auto-rows: auto;
    }
    .kpl-flag-main {
        grid-column: span 2; /* STRICTLY 1 full-width column for main */
        min-height: 350px;
    }
    .kpl-flag-main .kpl-flag-content { padding: 20px; }
    .kpl-flag-main .kpl-flag-title { font-size: 26px; }
    
    .kpl-flag-standard {
        grid-column: span 1; /* STRICTLY 2 columns side-by-side for rest */
        min-height: 220px;
    }
    .kpl-flag-standard .kpl-flag-content { padding: 15px; }
    .kpl-flag-standard .kpl-flag-title { font-size: 16px; }
    .kpl-flag-tag { font-size: 9px; margin-bottom: 4px; }
    .kpl-flag-loc { font-size: 11px; margin-bottom: 10px; }
    .kpl-flag-link { font-size: 12px; }
}


                .kpl-widget-divider { padding-left: 30px; border-left: 1px solid #e2e8f0; }
                .kpl-awards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-bottom: 20px; }
                .kpl-award-card { border: 1px solid #e2e8f0; border-radius: 8px; padding: 25px 15px; text-align: center; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: 0.3s; }
                .kpl-award-card:hover { border-color: <?php echo $accent; ?>; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
                .kpl-aw-img { width: 50px; height: 50px; margin-bottom: 15px; }
                .kpl-aw-img img { width: 100%; height: 100%; object-fit: contain; }
                .kpl-aw-text { font-size: 11px; font-weight: 500; color: #64748b; line-height: 1.4; }
                .kpl-bottom-link { display: block; text-align: center; font-size: 13px; font-weight: 600; text-decoration: none; transition: 0.3s; }
                .kpl-bottom-link:hover { opacity: 0.8; }
                @media (max-width: 1024px) { .kpl-widget-divider { padding-left: 0; border-left: none; margin-top: 40px; } }
                /* STRICT 2-COLUMN MOBILE */
                @media (max-width: 768px) { .kpl-awards-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; } }

                .kpl-trust-widget { font-family: -apple-system, sans-serif; width: 100%; }
                .kpl-trust-title { font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 25px; }
                .kpl-features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
                .kpl-feature-card { border: 1px solid #e2e8f0; border-radius: 8px; padding: 20px 10px; text-align: center; background: #fff; transition: 0.3s; }
                .kpl-feature-card:hover { border-color: <?php echo $accent; ?>; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
                .kpl-fc-icon { font-size: 28px; margin-bottom: 12px; }
                .kpl-fc-icon svg { width: 28px; height: 28px; fill: currentColor; }
                .kpl-fc-text { font-size: 12px; font-weight: 600; color: #475569; line-height: 1.3; }
                /* STRICT 2-COLUMN MOBILE */
                @media (max-width: 768px) { .kpl-features-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; } }
.experience_column{
	border: 1px #1EABA9 solid;
	border-radius: 10px;
}
.experience_column h3{
	color: #1EABA9;
}

                .kpl-leader-slider-wrap { position: relative; padding: 0 25px; }
                
                /* EXPLICIT FALLBACK: Forces the 2-column layout even before Swiper executes */
                .kpl-leader-slider-wrap .swiper-wrapper { display: flex; flex-wrap: nowrap; box-sizing: border-box; }
                .kpl-leader-slider-wrap .swiper-slide { flex-shrink: 0; width: 50%; box-sizing: border-box; padding: 0 5px; }
                @media (min-width: 769px) { .kpl-leader-slider-wrap .swiper-slide { width: 33.333%; } }

                /* Flex properties to keep text perfectly centered under image */
                .kpl-leader-card { text-align: center; padding: 10px 5px; display: flex; flex-direction: column; align-items: center; height: 100%; }
                
                /* Prevents images from ever overlapping by using max-width and aspect ratio */
                .kpl-ld-img { width: 100px; height: 100px; max-width: 100%; margin: 0 auto 12px auto; border-radius: 50%; overflow: hidden; background: #f1f5f9; flex-shrink: 0; aspect-ratio: 1/1; }
                .kpl-ld-img img { width: 100%; height: 100%; object-fit: cover; }
                
                /* Tighter line-heights for clean text wrapping */
                .kpl-ld-name { font-size: 15px; font-weight: 700; color: #1e293b; margin-bottom: 4px; line-height: 1.3; width: 100%; }
                .kpl-ld-pos { font-size: 13px; color: #64748b; font-style: italic; line-height: 1.3; width: 100%; }
                
                /* Custom Arrows */
                .kpl-swiper-btn { position: absolute; top: 35%; transform: translateY(-50%); width: 28px; height: 28px; background: #fff; border: 1px solid #e2e8f0; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; color: <?php echo $accent; ?>; z-index: 10; box-shadow: 0 2px 5px rgba(0,0,0,0.1); transition: 0.3s; }
                .kpl-swiper-btn:hover { background: <?php echo $accent; ?>; color: #fff; }
                .kpl-prev-<?php echo esc_attr($this->get_id()); ?> { left: -5px; }
                .kpl-next-<?php echo esc_attr($this->get_id()); ?> { right: -5px; }
                .kpl-swiper-btn.swiper-button-disabled { opacity: 0.3; cursor: not-allowed; pointer-events: none; }
                
                /* Mobile specific tweaks */
                @media (max-width: 768px) {
                    .kpl-leader-slider-wrap { padding: 0 15px; } /* Less padding on mobile for more image space */
                    .kpl-ld-img { width: 75px; height: 75px; } /* Scaled down proportionally to avoid touching */
                    .kpl-ld-name { font-size: 14px; }
                    .kpl-ld-pos { font-size: 12px; }
                    .kpl-swiper-btn { width: 24px; height: 24px; font-size: 10px; top: 40px; }
                }
/* ============= CONTACT PAGE ====== */

                .kpl-contact-hero-wrapper {
                    width: 100%;
                    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
                    position: relative;
                    /* Padding bottom ensures the section below this widget doesn't hide behind the overlapping cards */
                    padding-bottom: 80px; 
                }

                /* --- BANNER --- */
                .kpl-ch-banner {
                    position: relative;
                    width: 100%;
                    background-size: cover;
                    background-position: center;
                    background-repeat: no-repeat;
                    /* Generous top padding, and extra bottom padding to accommodate the negative margin of cards */
                    padding: 120px 0 200px 0; 
                }
                .kpl-ch-overlay {
                    position: absolute;
                    inset: 0;
                    z-index: 1;
                }
                .kpl-ch-container {
                    position: relative;
                    z-index: 2;
                    max-width: 1300px;
                    margin: 0 auto;
                    padding: 0 20px;
                }
                .kpl-ch-content {
                    max-width: 800px;
                }

                /* --- TYPOGRAPHY --- */
                .kpl-ch-title {
                    font-size: 56px;
                    font-weight: 700;
                    color: #ffffff;
                    line-height: 1.2;
                    margin: 0 0 20px 0;
                    letter-spacing: -0.5px;
                }
                .kpl-ch-title .kpl-accent {
                    color: var(--kpl-accent);
                }
                .kpl-ch-desc {
                    font-size: 18px;
                    color: rgba(255, 255, 255, 0.9);
                    line-height: 1.6;
                    margin: 0 0 40px 0;
                    max-width: 700px;
                }

                /* --- BUTTONS --- */
                .kpl-ch-buttons {
                    display: flex;
                    gap: 15px;
                    flex-wrap: wrap;
                }
                .kpl-btn {
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    padding: 14px 28px;
                    border-radius: 8px;
                    font-size: 15px;
                    font-weight: 600;
                    text-decoration: none;
                    transition: 0.3s ease;
                }
                .kpl-btn-icon {
                    margin-right: 10px;
                    display: flex;
                    align-items: center;
                }
                .kpl-btn-icon svg {
                    width: 16px; height: 16px; fill: currentColor;
                }
                
                .kpl-btn-solid {
                    background-color: var(--kpl-accent);
                    color: #ffffff;
                    border: 1px solid var(--kpl-accent);
                }
                .kpl-btn-solid:hover {
                    background-color: transparent;
                    color: var(--kpl-accent);
                }
                
                .kpl-btn-outline {
                    background-color: transparent;
                    color: #ffffff;
                    border: 1px solid rgba(255,255,255,0.4);
                }
                .kpl-btn-outline:hover {
                    background-color: rgba(255,255,255,0.1);
                    border-color: #ffffff;
                }

                /* --- OVERLAPPING CARDS --- */
                .kpl-ch-cards-container {
                    position: relative;
                    z-index: 10;
                    max-width: 1300px;
                    margin: -100px auto 0 auto; /* This pulls the grid up over the banner */
                    padding: 0 20px;
                }
                .kpl-ch-cards-grid {
                    display: grid;
                    grid-template-columns: repeat(4, 1fr);
                    gap: 25px;
                }
                .kpl-ch-card {
                    background: #ffffff;
                    border-radius: 20px;
                    padding: 40px 30px;
                    text-align: center;
                    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    transition: transform 0.3s ease;
                }
                .kpl-ch-card:hover {
                    transform: translateY(-5px);
                }
                .kpl-ch-card-icon {
                    width: 60px;
                    height: 60px;
                    background-color: var(--kpl-accent);
                    color: #ffffff;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 24px;
                    margin-bottom: 20px;
                }
                .kpl-ch-card-icon svg {
                    width: 28px; height: 28px; fill: currentColor;
                }
                .kpl-ch-card-title {
                    font-size: 20px;
                    font-weight: 700;
                    color: #0b111e;
                    margin: 0 0 10px 0;
                }
                .kpl-ch-card-desc {
                    font-size: 14px;
                    color: #64748b;
                    line-height: 1.5;
                    margin: 0 0 20px 0;
                    flex-grow: 1;
                }
                .kpl-ch-card-link {
                    font-size: 14px;
                    font-weight: 600;
                    color: var(--kpl-accent);
                    text-decoration: none;
                    transition: 0.3s;
                }
                .kpl-ch-card-link:hover {
                    opacity: 0.8;
                }

                /* --- RESPONSIVE DESIGN --- */
                @media (max-width: 1024px) {
                    .kpl-ch-title { font-size: 46px; }
                    .kpl-ch-cards-grid {
                        grid-template-columns: repeat(2, 1fr);
                        gap: 20px;
                    }
                    /* Adjust bottom padding to account for taller grid */
                    .kpl-contact-hero-wrapper { padding-bottom: 40px; } 
                }

                @media (max-width: 768px) {
                    .kpl-ch-banner {
                        padding: 80px 0 150px 0;
                    }
                    .kpl-ch-title {
                        font-size: 36px;
                    }
                    .kpl-ch-desc {
                        font-size: 15px;
                    }
                    .kpl-ch-buttons {
                        flex-direction: column;
                        align-items: stretch;
                        width: 100%;
                    }
                    .kpl-btn {
                        width: 100%;
                    }
                    
                    /* STRICT MOBILE 1-COLUMN GRID FOR READABILITY */
                    .kpl-ch-cards-container {
                        margin-top: -60px; /* Less overlap on mobile to prevent squishing */
                    }
                    .kpl-ch-cards-grid {
                        grid-template-columns: repeat(2, 1fr) !important; 
                        gap: 10px;
                    }
                    .kpl-ch-card {
                        padding: 30px 20px;
                    }
                }


                .kpl-cc-wrapper {
                    background-color: var(--cc-bg);
                    border-radius: 16px;
                    overflow: hidden;
                    border: 1px solid rgba(255, 255, 255, 0.08);
                    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
                    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
                    width: 100%;
                    max-width: 400px;
                    margin: 0 auto;
                }

                .kpl-cc-img {
                    width: 100%;
                    height: 160px;
                }

                .kpl-cc-img img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }

                .kpl-cc-content {
                    padding: 30px;
                }

                .kpl-cc-title {
                    color: #ffffff;
                    font-size: 22px;
                    font-weight: 700;
                    margin: 0;
                    line-height: 1.2;
                }

                .kpl-cc-divider {
                    width: 40px;
                    height: 3px;
                    background-color: var(--cc-accent);
                    margin: 12px 0 25px 0;
                    border-radius: 2px;
                }

                .kpl-cc-details {
                    list-style: none;
                    padding: 0;
                    margin: 0 0 30px 0;
                }

                .kpl-cc-details li {
                    display: flex;
                    align-items: flex-start;
                    gap: 15px;
                    margin-bottom: 15px;
                }

                .kpl-cc-details li:last-child {
                    margin-bottom: 0;
                }

                .kpl-cc-icon {
                    color: var(--cc-accent);
                    font-size: 18px;
                    margin-top: 2px;
                    flex-shrink: 0;
                }

                .kpl-cc-icon svg {
                    width: 18px;
                    height: 18px;
                    fill: currentColor;
                }

                .kpl-cc-text {
                    color: rgba(255, 255, 255, 0.85);
                    font-size: 14px;
                    line-height: 1.6;
                    font-weight: 500;
                }

                .kpl-cc-actions {
                    display: flex;
                    gap: 12px;
                    flex-wrap: wrap;
                }

                .kpl-cc-btn {
                    width: 42px;
                    height: 42px;
                    border-radius: 50%;
                    background-color: var(--cc-accent);
                    color: #ffffff;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 16px;
                    text-decoration: none;
                    transition: all 0.3s ease;
                }

                .kpl-cc-btn svg {
                    width: 18px;
                    height: 18px;
                    fill: currentColor;
                }

                .kpl-cc-btn:hover {
                    background-color: #ffffff;
                    color: var(--cc-bg);
                    transform: translateY(-3px);
                    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
                }

                /* Mobile Adjustments */
                @media (max-width: 768px) {
                    .kpl-cc-content {
                        padding: 25px 20px;
                    }
                    .kpl-cc-img {
                        height: 140px;
                    }
                }

                /* CORE LAYOUT */
                .kpl-go-section {
                    width: 100%;
                    padding: 80px 20px;
                    overflow: hidden;
                }
                .kpl-go-container {
                    max-width: 1400px;
                    margin: 0 auto;
                    display: flex;
                    align-items: center;
                    gap: 40px;
                }

                /* LEFT CONTENT */
                .kpl-go-left {
                    flex: 0 0 25%;
                    max-width: 350px;
                }
                .kpl-go-subtitle {
                    font-size: 11px;
                    font-weight: 700;
                    letter-spacing: 2px;
                    text-transform: uppercase;
                    display: block;
                    margin-bottom: 15px;
                }
                .kpl-go-title {
                    font-size: 38px;
                    color: #ffffff;
                    line-height: 1.1;
                    margin: 0 0 20px 0;
                }
                .kpl-go-desc {
                    color: rgba(255,255,255,0.7);
                    font-size: 15px;
                    line-height: 1.6;
                    margin: 0 0 30px 0;
                }
                .kpl-go-btn {
                    display: inline-block;
                    padding: 12px 24px;
                    border: 1px solid;
                    border-radius: 6px;
                    font-size: 14px;
                    font-weight: 600;
                    text-decoration: none;
                    transition: 0.3s;
                    background: transparent;
                }
                .kpl-go-btn:hover {
                    background: rgba(255,255,255,0.1);
                    color: #ffffff !important;
                    border-color: #ffffff !important;
                }

                /* RIGHT CONTENT & GRID */
                .kpl-go-right {
                    flex: 1;
                    position: relative;
                }
                .kpl-go-map-bg {
                    position: absolute;
                    top: -50px; left: 0; right: 0; bottom: 0;
                    background-size: contain;
                    background-position: top center;
                    background-repeat: no-repeat;
                    opacity: 0.3;
                    z-index: 1;
                    pointer-events: none;
                }
                .kpl-go-grid {
                    position: relative;
                    z-index: 2;
                    display: grid;
                    grid-template-columns: repeat(4, 1fr);
                    gap: 20px;
                }

                /* INDIVIDUAL CARDS */
                .kpl-go-card {
                    background-color: #081a1c;
                    border: 1px solid rgba(255,255,255,0.05);
                    border-radius: 12px;
                    overflow: hidden;
                    display: flex;
                    flex-direction: column;
                    transition: 0.3s;
                }
                .kpl-go-card:hover {
                    transform: translateY(-5px);
                    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
                }
                .kpl-go-card-img {
                    width: 100%;
                    height: 120px;
                }
                .kpl-go-card-img img {
                    width: 100%; height: 100%; object-fit: cover;
                }
                .kpl-go-card-body {
                    padding: 20px;
                    display: flex;
                    flex-direction: column;
                    flex-grow: 1;
                }
                .kpl-go-card-title {
                    color: #ffffff;
                    font-size: 18px;
                    font-weight: 600;
                    margin: 0;
                }
                .kpl-go-divider {
                    width: 30px; height: 2px;
                    margin: 10px 0 15px 0;
                }
                
                .kpl-go-details {
                    list-style: none; padding: 0; margin: 0 0 20px 0;
                    flex-grow: 1;
                }
                .kpl-go-details li {
                    display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px;
                }
                .kpl-go-icon {
                    flex-shrink: 0; margin-top: 3px; font-size: 14px;
                }
                .kpl-go-icon svg { width: 14px; height: 14px; fill: currentColor; }
                .kpl-go-text {
                    color: rgba(255,255,255,0.8); font-size: 12px; line-height: 1.4;
                }

                /* ACTION BUTTONS */
                .kpl-go-actions {
                    display: flex; justify-content: space-between; gap: 5px;
                }
                .kpl-go-action-btn {
                    width: 32px; height: 32px; border-radius: 50%;
                    color: #ffffff;
                    display: flex; align-items: center; justify-content: center;
                    font-size: 14px; text-decoration: none; transition: 0.3s;
                }
                .kpl-go-action-btn svg { width: 14px; height: 14px; fill: currentColor; }
                .kpl-go-action-btn:hover {
                    background-color: #ffffff !important; color: #081a1c;
                }

                /* RESPONSIVE DESIGN */
                @media (max-width: 1200px) {
                    .kpl-go-container { flex-direction: column; align-items: flex-start; }
                    .kpl-go-left { max-width: 100%; text-align: center; margin-bottom: 30px; }
                    .kpl-go-right { width: 100%; }
                }

                @media (max-width: 992px) {
                    .kpl-go-grid { grid-template-columns: repeat(2, 1fr); }
                }

                /* STRICT MOBILE VIEWS */
                @media (max-width: 768px) {
                    .kpl-go-section { padding: 50px 15px; }
                    .kpl-go-title { font-size: 32px; }
                    
                    /* Forces cards to strictly be 2 columns side-by-side */
                    .kpl-go-grid { 
                        grid-template-columns: repeat(2, 1fr) !important; 
                        gap: 10px; 
                    }
                    
                    /* Shrink card internals to fit 2-column mobile layout perfectly */
                    .kpl-go-card-body { padding: 12px; }
                    .kpl-go-card-img { height: 90px; }
                    .kpl-go-card-title { font-size: 14px; }
                    .kpl-go-text { font-size: 10px; }
                    .kpl-go-icon { font-size: 11px; margin-top: 1px; }
                    .kpl-go-icon svg { width: 11px; height: 11px; }
                    
                    .kpl-go-action-btn { width: 26px; height: 26px; font-size: 11px; }
                    .kpl-go-action-btn svg { width: 11px; height: 11px; }
                }
.contact-info-box{
    background: #fff;
    border-radius: 15px;
    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.05),
        0 2px 10px rgba(0, 0, 0, 0.03);
}
.contact-info-box h6{
	color: #1EABA9;
}
.contact-info-box h3{
	color: #000000;
}
.contact-info-box h3 span{
	color: #1EABA9;
}
.elementor-3573 .elementor-element.elementor-element-8326b52{
	margin-top: 80px;
	padding-left: 20px;
}
.elementor-heading-title{
	color: #1EABA9 !important;
}
/* ==========================================================================
   WIDGET: VLOGS & VIDEOS HERO
   ========================================================================== */

.kpl-vhero-wrapper {
    width: 100%;
    position: relative;
    padding-bottom: 60px; /* Space for overlapping card */
}

/* --- BANNER --- */
.kpl-vhero-banner {
    position: relative;
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 100px 0 220px 0; /* Huge bottom padding to hold the overlapping card */
}
.kpl-vhero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(11, 17, 30, 0.9) 0%, rgba(11, 17, 30, 0.6) 50%, rgba(11, 17, 30, 0.3) 100%);
    z-index: 1;
}
.kpl-vhero-container {
    position: relative;
    z-index: 2;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Left Content */
.kpl-vhero-left {
    max-width: 600px;
}
.kpl-vhero-title {
    font-size: 64px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 15px 0;
    line-height: 1.1;
}
.kpl-vhero-line {
    width: 60px;
    height: 3px;
    background-color: var(--vhero-accent);
    margin-bottom: 25px;
}
.kpl-vhero-desc {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
    margin: 0 0 40px 0;
}

/* Buttons */
.kpl-vhero-buttons {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}
.kpl-vhero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s;
}
.kpl-vhero-btn i { margin-right: 8px; font-size: 16px; }

.kpl-vhero-btn-solid {
    background-color: var(--vhero-accent);
    color: #ffffff;
    border: 1px solid var(--vhero-accent);
}
.kpl-vhero-btn-solid:hover {
    background-color: transparent; color: var(--vhero-accent);
}
.kpl-vhero-btn-outline {
    background-color: transparent;
    color: #ffffff;
    border: 1px solid rgba(255,255,255,0.4);
}
.kpl-vhero-btn-outline:hover {
    background-color: rgba(255,255,255,0.1); border-color: #ffffff;
}

/* Right Content (Showreel Circle) */
.kpl-vhero-showreel {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #ffffff;
    transition: 0.3s;
}
.kpl-vhero-showreel:hover { transform: scale(1.05); }
.kpl-showreel-circle {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.05);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    position: relative;
}
/* The teal play triangle */
.kpl-showreel-circle i {
    font-size: 35px;
    color: var(--vhero-accent);
    margin-left: 5px; /* Visual center adjustment */
}
.kpl-vhero-showreel span {
    font-size: 14px; font-weight: 500; letter-spacing: 1px;
}


/* --- OVERLAPPING FEATURED CARD --- */
.kpl-vhero-feat-container {
    position: relative;
    z-index: 10;
    max-width: 1300px;
    margin: -140px auto 0 auto; /* Pulls the card up over the banner */
    padding: 0 20px;
}
.kpl-vhero-feat-card {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.1);
    display: grid;
    grid-template-columns: 1.3fr 1fr; /* Image takes up slightly more space */
    gap: 40px;
    padding: 20px;
    align-items: center;
}

/* Card Thumbnail */
.kpl-vhero-feat-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    overflow: hidden;
}
.kpl-vhero-feat-thumb img {
    width: 100%; height: 100%; object-fit: cover;
}
.kpl-feat-play-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: 0.3s;
}
.kpl-feat-play-overlay:hover { background: rgba(0,0,0,0.4); }
.kpl-feat-play-btn {
    width: 60px; height: 60px;
    background-color: var(--vhero-accent);
    color: #ffffff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; padding-left: 4px;
    box-shadow: 0 0 0 10px rgba(0, 131, 123, 0.3);
}

/* Card Text Details */
.kpl-vhero-feat-details {
    padding-right: 20px;
}
.kpl-feat-tag {
    font-size: 11px; font-weight: 700; letter-spacing: 1.5px;
    color: var(--vhero-accent); text-transform: uppercase;
    display: block; margin-bottom: 10px;
}
.kpl-feat-title {
    font-family: 'Playfair Display', serif; font-size: 32px;
    color: #0b111e; margin: 0 0 5px 0; line-height: 1.2;
}
.kpl-feat-subtitle {
    font-size: 18px; font-weight: 400; color: #475569;
    margin: 0 0 20px 0;
}
.kpl-feat-meta {
    display: flex; gap: 20px; margin-bottom: 20px;
    font-size: 13px; color: #64748b; font-weight: 500;
}
.kpl-feat-meta i { margin-right: 6px; }
.kpl-feat-desc {
    font-size: 14px; line-height: 1.6; color: #475569;
    margin: 0 0 25px 0;
}
.kpl-feat-btn {
    display: inline-block;
    padding: 10px 24px; border-radius: 6px;
    background-color: var(--vhero-accent); color: #ffffff;
    font-size: 13px; font-weight: 600; text-decoration: none; transition: 0.3s;
}
.kpl-feat-btn i { margin-left: 6px; }
.kpl-feat-btn:hover { background-color: #0b111e; color: #ffffff; }

/* ==========================================================================
   MOBILE RESPONSIVENESS
   ========================================================================== */

@media (max-width: 1024px) {
    .kpl-vhero-container { flex-direction: column; text-align: center; }
    .kpl-vhero-left { margin-bottom: 50px; }
    .kpl-vhero-line { margin: 0 auto 25px auto; }
    .kpl-vhero-buttons { justify-content: center; }
    .kpl-vhero-feat-card { gap: 20px; }
}

@media (max-width: 768px) {
    .kpl-vhero-banner { padding: 60px 0 120px 0; }
    .kpl-vhero-title { font-size: 42px; }
    
    /* Strict 1-column stack for the featured card on mobile */
    .kpl-vhero-feat-container { margin-top: -60px; }
    .kpl-vhero-feat-card {
        grid-template-columns: 1fr; /* STACKS IMAGE ON TOP OF TEXT */
        padding: 15px;
    }
    
    .kpl-vhero-feat-details { padding: 10px 5px 20px 5px; }
    .kpl-feat-title { font-size: 24px; }
    .kpl-feat-subtitle { font-size: 16px; }
    .kpl-feat-meta { flex-direction: column; gap: 8px; }
    
    .kpl-vhero-buttons { flex-direction: column; }
    .kpl-vhero-btn { width: 100%; text-align: center; }
}
/* ==========================================================================
   WIDGET: VLOGS & MEDIA GRID
   ========================================================================== */

.kpl-media-grid-wrapper {
    width: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    padding: 40px 0;
}

/* --- FILTERS --- */
.kpl-mg-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-bottom: 40px;
}
.kpl-mg-filter-btn {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 30px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: 0.3s;
}
.kpl-mg-filter-btn i, .kpl-mg-filter-btn svg {
    width: 16px; height: 16px; fill: currentColor;
}
.kpl-mg-filter-btn:hover {
    border-color: var(--mg-accent);
    color: var(--mg-accent);
}
.kpl-mg-filter-btn.active {
    background-color: var(--mg-accent);
    border-color: var(--mg-accent);
    color: #ffffff;
}

/* --- GRID --- */
.kpl-mg-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    max-width: 1400px;
    margin: 0 auto;
}

/* --- VIDEO CARDS --- */
.kpl-mg-item {
    /* JS controls display property for filtering */
    animation: kplFadeIn 0.5s ease;
}
@keyframes kplFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.kpl-mg-card {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    height: 100%;
    transition: 0.3s ease;
}
.kpl-mg-card:hover {
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    border-color: #cbd5e1;
}

/* Thumbnail Area */
.kpl-mg-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}
.kpl-mg-thumb img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.5s ease;
}
.kpl-mg-card:hover .kpl-mg-thumb img {
    transform: scale(1.05);
}
.kpl-mg-overlay {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.2);
    display: flex; align-items: center; justify-content: center;
    transition: 0.3s;
}
.kpl-mg-card:hover .kpl-mg-overlay { background: rgba(0,0,0,0.4); }

/* Play Button */
.kpl-mg-play {
    width: 50px; height: 50px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(4px);
    color: #ffffff;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; padding-left: 3px;
    transition: 0.3s;
}
.kpl-mg-card:hover .kpl-mg-play { background: #ffffff; color: var(--mg-accent); transform: scale(1.1); }

/* Duration Badge */
.kpl-mg-duration {
    position: absolute;
    bottom: 10px; right: 10px;
    background: rgba(0,0,0,0.7);
    color: #ffffff;
    font-size: 11px; font-weight: 600;
    padding: 4px 8px; border-radius: 4px;
}

/* Card Content */
.kpl-mg-content {
    padding: 20px;
    display: flex; flex-direction: column; flex-grow: 1;
}
.kpl-mg-title-row {
    display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px;
}
.kpl-mg-plat-icon {
    font-size: 18px; flex-shrink: 0; margin-top: 2px;
}
.kpl-mg-plat-icon svg { width: 18px; height: 18px; fill: currentColor; }
.kpl-mg-title {
    font-size: 15px; font-weight: 700; color: #1e293b;
    margin: 0; line-height: 1.4;
}
.kpl-mg-date {
    font-size: 12px; color: #64748b; font-weight: 500;
    margin-top: auto; padding-left: 28px; /* aligns with text, not icon */
}

/* --- LOAD MORE BUTTON --- */
.kpl-mg-load-more-wrap {
    text-align: center;
    margin-top: 40px;
}
.kpl-mg-load-more-btn {
    background: transparent;
    border: 1px solid var(--mg-accent);
    color: var(--mg-accent);
    padding: 12px 30px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: 0.3s;
}
.kpl-mg-load-more-btn:hover {
    background: var(--mg-accent);
    color: #ffffff;
}

/* ==========================================================================
   MOBILE RESPONSIVENESS
   ========================================================================== */

@media (max-width: 1024px) {
    .kpl-mg-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    /* STRICT 2-COLUMN ON MOBILE */
    .kpl-mg-grid { 
        grid-template-columns: repeat(2, 1fr) !important; 
        gap: 12px; 
    }
    
    .kpl-mg-filters { gap: 8px; margin-bottom: 25px; }
    .kpl-mg-filter-btn { padding: 8px 15px; font-size: 12px; }
    
    .kpl-mg-content { padding: 15px 12px; }
    .kpl-mg-plat-icon { font-size: 14px; }
    .kpl-mg-plat-icon svg { width: 14px; height: 14px; }
    .kpl-mg-title { font-size: 13px; }
    .kpl-mg-date { font-size: 11px; padding-left: 24px; }
    
    .kpl-mg-play { width: 36px; height: 36px; font-size: 12px; padding-left: 2px; }
    .kpl-mg-duration { font-size: 9px; padding: 2px 5px; }
}
/* ==========================================================================
   WIDGET: LATEST INSTAGRAM REELS
   ========================================================================== */

.kpl-reels-wrapper {
    width: 100%;
    padding: 40px 0;
    max-width: 1400px;
    margin: 0 auto;
}

/* Header */
.kpl-reels-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding: 0 40px; /* Aligns with inner slider */
}
.kpl-reels-title {
    font-size: 28px;
    font-weight: 700;
    color: #0b111e;
    margin: 0;
}
.kpl-reels-follow {
    color: var(--reels-accent);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: 0.3s;
}
.kpl-reels-follow i { font-size: 18px; }
.kpl-reels-follow:hover { opacity: 0.7; }

/* Slider Container & Fallback */
.kpl-reels-slider-container {
    position: relative;
    padding: 0 50px; /* Space for outside arrows */
}

/* Fallback before Swiper loads */
.kpl-reels-slider-container .swiper-wrapper {
    display: flex; flex-wrap: nowrap;
}
.kpl-reels-slider-container .swiper-slide {
    flex-shrink: 0;
}

/* Reel Card */
.kpl-reel-card {
    display: block;
    text-decoration: none;
    transition: transform 0.3s ease;
}
.kpl-reel-card:hover {
    transform: translateY(-5px);
}
.kpl-reel-thumb {
    width: 100%;
    aspect-ratio: 4 / 5; /* Instagram Reel display ratio */
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}
.kpl-reel-thumb img, .kpl-reel-placeholder {
    width: 100%; height: 100%; object-fit: cover;
}
.kpl-reel-placeholder {
    background: #e2e8f0;
}

/* The Reels Icon Overlay */
.kpl-reel-icon {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}
.kpl-reel-icon svg { width: 22px; height: 22px; }

/* Caption */
.kpl-reel-caption {
    font-size: 13px;
    font-weight: 500;
    color: #475569;
    text-align: center;
    margin-top: 15px;
    line-height: 1.4;
}

/* Navigation Arrows (Outside) */
.kpl-reels-arrow {
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    color: #0b111e;
    transition: 0.3s;
}
.kpl-reels-arrow:hover {
    background: var(--reels-accent);
    color: #ffffff;
}
/* Positioned outside the grid */
.kpl-reels-arrow[class*="prev"] { left: 0; }
.kpl-reels-arrow[class*="next"] { right: 0; }
.kpl-reels-arrow.swiper-button-disabled { opacity: 0; pointer-events: none; }

/* ==========================================================================
   MOBILE RESPONSIVENESS
   ========================================================================== */

@media (max-width: 768px) {
    .kpl-reels-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
        padding: 0 15px;
        margin-bottom: 20px;
    }
    .kpl-reels-title { font-size: 22px; }
    .kpl-reels-follow { font-size: 13px; }
    
    /* Hide arrows on mobile, rely on swipe */
    .kpl-reels-arrow { display: none; }
    .kpl-reels-slider-container { padding: 0 0 0 15px; } /* Only left padding so right side peeks */
    
    .kpl-reel-caption { font-size: 12px; margin-top: 10px; }
}