/* NAV SPACING OVERRIDES */
.main-header .main-menu .navigation > li { padding-right: 25px; } /* adjust to taste */

/*.slider-home2 > video { display:block; width:100%; height:100%; }*/
/*.flat-slider .slide-video {*/
/*    position: absolute;*/
/*    top: 0;*/
/*    left: 50%;*/
/*    min-width: 100%;*/
/*    min-height: 100%;*/
/*    width: auto;*/
/*    height: 100%;*/
/*    transform: translate(-50%, -50%);*/
/*    object-fit: cover;       !* fills without distortion *!*/
/*    z-index: 0;*/
/*    pointer-events: none;    !* clicks go to your form, not the video *!*/
/*}*/

.flat-slider .slide-video {
    position: absolute;
    inset: 0;            /* top:0 right:0 bottom:0 left:0 */
    width: 100%;
    height: 100%;
    object-fit: cover;   /* fills; may crop edges or contain if you prefer no crop */
    z-index: 0;
    pointer-events: none;   /* never capture scroll/touch */

    /* smooth scrolling help */
    transform: translateZ(0);      /* promote to its own layer */
    will-change: transform, opacity;
    backface-visibility: hidden;
    /*contain: paint;                !* isolate repaints *!*/
}
/* Fallback so it never collapses */
.flat-slider.home-5 .wrap-slider-swiper .thumbs-swiper-column {
    height: 100vh;
}

/* Use the computed safe height (minus optional header) */
.flat-slider.home-5,
.flat-slider.home-5 .wrap-slider-swiper,
.flat-slider.home-5 .thumbs-swiper-column,
.flat-slider.home-5 .thumbs-swiper-column .swiper-wrapper,
.flat-slider.home-5 .thumbs-swiper-column .swiper-slide {
    height: calc(var(--app-vh, 1vh) * 100 - var(--header-h, 0px));
}

/* Make media fill the slide */
.flat-slider.home-5 .swiper-slide .box-img {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.flat-slider.home-5 .box-img > img,
.flat-slider.home-5 .box-img > video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Optional: respect iOS safe areas */
.flat-slider.home-5 {
    padding-top: env(safe-area-inset-top, 0);
    padding-bottom: env(safe-area-inset-bottom, 0);
}


/* Status List */
.status-wrapper {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding: 10px 0;
    scrollbar-width: none;
}
.status-wrapper::-webkit-scrollbar { display: none; }
.status-card {
    position: relative;
    top: 0;
    left: 0;
    width: 88%;
    height: 91%;
    border-radius: 16px;
    background: rgba(0,0,0,0);
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
}
.status-name { color: #fff; font-size: 16px; font-weight: 500; text-shadow: 0 2px 4px rgba(0,0,0,0.6); }

/* Overlay for dark gradient effect */
.status-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.2), transparent);
    border-radius: inherit;
    z-index: 2;
}

/* Avatar ring container */
.status-header {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 3;
}

.status-avatar {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    padding:3px;
}

/* Avatar Ring */
.status-ring { position: relative; width: 56px; height: 56px; }
.status-ring-svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.status-ring-svg circle { fill: none; stroke-width: 1.5; }
.status-ring-svg .bg { stroke: #ddd; }
.status-ring-svg .progress { stroke: #0e939c; stroke-dasharray: 100; stroke-dashoffset: 0; }
.status-avatar { position: absolute; top: 4px; left: 4px; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.status-card[data-viewed="true"] .progress { stroke: #bfa35e; }

/* Story Viewer */
#story-viewer { position: fixed; inset: 0; background: rgba(0,0,0,0.95); display: flex; flex-direction: column; justify-content: space-between; z-index: 9999; }
#story-viewer.hidden { display: none; }

/* Progress bars */

.story-progress-container { position: absolute; top: 10px; left: 0; width: 100%; height: 4px; display: flex; gap: 4px; padding: 0 10px; z-index: 10000; }

.story-progress { flex: 1; background: rgba(255,255,255,0.3); border-radius: 2px; overflow: hidden; }
.story-progress span { display: block; height: 100%; width: 0%; background: #fff; }

/* Top bar */
.story-topbar { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; padding-top:30px; color: #fff; font-size: 14px; z-index: 10001; }
.story-user { display: flex; align-items: center; gap: 10px; }
.story-avatar { width: 40px; height: 40px; border-radius: 50%; border: 2px solid #0e939c; object-fit: cover; }
.story-username { font-weight: 600; }
.story-time { font-size: 12px; opacity: 0.7; }
.icon-btn { background: none; border: none; color: #fff; font-size: 20px; cursor: pointer; margin-left: 8px; }

/* Story body */
.story-body { flex: 1; display: flex; justify-content: center; align-items: center; position: relative; }
.story-content img { max-width: 100%; max-height: 70vh; object-fit: contain; border-radius: 8px; }
.nav-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.4); border: none; color: #fff; font-size: 32px; padding: 8px 12px; border-radius: 50%; cursor: pointer; z-index: 10001; }
.nav-btn.prev { left: 10px; } .nav-btn.next { right: 10px; }

/* Caption */
.story-caption-container { text-align: center; color: #fff; font-size: 15px; line-height: 1.5; max-height: 60px; overflow: hidden; transition: max-height 0.3s ease; padding: 6px 16px; }
.story-caption-container.expanded { max-height: 200px; overflow-y: auto; }
.caption-toggle { display: inline-block; margin-top: 6px; background: none; border: none; color: #0e939c; font-size: 14px; cursor: pointer; }
.caption-toggle.hidden { display: none; }
/* Caption bubble */
.story-caption-bubble { display: inline-block; margin: 10px auto; padding: 10px 14px; max-width: 90%; background: rgba(0,0,0,0.75); border-radius: 20px; color: #fff; font-size: 14px; line-height: 1.4; text-align: left; overflow: hidden; max-height: 60px; transition: max-height 0.3s ease;}
.story-caption-bubble.expanded { max-height: 200px; overflow-y: auto; }
.caption-toggle { display: block; margin-top: 6px; background: none; border: none; color: #0e939c; font-size: 13px; cursor: pointer; }
.caption-toggle.hidden { display: none; }


/* Input */
/* Input container (sticks bottom) */
.story-input {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    background: transparent;
    position: sticky;
    bottom: 0;
    width: 100%;
    z-index: 1000;
}

/* Bubble styling */
.story-input .input-bubble {
    display: flex;
    align-items: center;
    background: rgba(0,0,0,0.85);
    border-radius: 30px;
    padding: 8px 12px;
    width: 100%;
    max-width: 600px;
}

/* Emoji button inside bubble */
.input-bubble .emoji-btn {
    font-size: 18px;
    background: none;
    border: none;
    color: #fff;
    margin-right: 8px;
    cursor: pointer;
}

/* Input field */
.input-bubble input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    color: #fff;
    font-size: 14px;
    padding: 6px 4px;
}

/* Send button inside bubble */
.input-bubble .send-btn {
    font-size: 18px;
    background: none;
    border: none;
    color: #0e939c;
    margin-left: 8px;
    cursor: pointer;
}

/* Mobile: full width */
@media (max-width: 768px) {
    .story-input .input-bubble {
        max-width: 100%;
    }
}
/* Loader */
.loader { border: 4px solid rgba(255,255,255,0.2); border-top: 4px solid #0e939c; border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; }
@keyframes spin { 100% { transform: rotate(360deg); } }



/* Make sure .box-location is positioned relative */
.box-location {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
}


.responsive-text {
    text-align: center;   /* Default for small screens */
}

@media (min-width: 992px) { /* Bootstrap's lg breakpoint */
    .responsive-text {
        text-align: left;
        margin-left: 0;
    }
}

.homelengo-categories .icon-box.small-icon .icon {
    font-size: 45px;
}

.big-icon .icon {
    font-size: 35px;
}

.box-faq.white-back-trans .faq-item {
    background: rgba(255, 255, 255, 0.3);
}

.modern-text{
    font-weight: 600;
    text-rendering: optimizeLegibility;
    color: #161e2d;
}

.box-faq .faq-body{

}

/* Stats */
.km-stats{
    max-width:100%;
    margin:22px auto 40px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px;
}
.km-stat{
    border:1px solid rgba(255,255,255,.08);
    border-radius:22px;
    padding:18px 16px;
    background: #ffffff;
    text-align:center;
}

.km-stat-num{
    display:block;
    font-weight:700;
    font-size:clamp(20px, 2.6vw, 28px);
    letter-spacing:.3px;
    padding-bottom: 10px;
    color: #1c1c1e;
}
.km-sup{ font-size:.65em; vertical-align:super; }

.km-stat-label{
    display:block;
    color: #464646;
    font-size:15px;
    margin-top:4px;
}

/* Two-column grid */
.km-grid{
    max-width:var(--km-max);
    margin:0 auto;
    display:grid;
    grid-template-columns:2fr 1.2fr;
    gap:var(--km-gap);
}
.km-col{
    border:1px solid var(--km-line);
    border-radius:var(--km-radius);
    padding:24px 22px;
}
.km-card{
    background:
        radial-gradient(400px 160px at 80% -10%, rgba(186,159,94,.2), transparent 60%),
        linear-gradient(180deg, #101720, #0c131b);
}
.km-col h2, .km-col h3{
    margin:0 0 10px;
    font-size:clamp(20px, 2vw, 26px);
    line-height:1.25;
}
.km-col p{
    margin:0 0 12px;
    color:#d7e2ef;
}


/* CEO */
.km-ceo{
    display:grid;
    grid-template-columns:84px 1fr;
    gap:16px;
    align-items:start;
}
.km-ceo-photo{
    width:84px; height:84px; object-fit:cover;
    border-radius:50%;
    border:2px solid var(--km-accent);
    box-shadow:0 0 0 4px rgba(186,159,94,.15);
    background:#222;
}
.km-ceo-name{ margin:.25rem 0 .5rem; font-weight:600; }
.km-muted{ color:var(--km-muted); }
.km-quote{ font-style:italic; }
.km-signoff{ color:var(--km-muted); }

/* Mission / Vision */
.km-mv{
    max-width:var(--km-max);
    margin:var(--km-gap) auto 0;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:var(--km-gap);
}
.km-mv-card{
    border:1px solid var(--km-line);
    border-radius:var(--km-radius);
    padding:22px 22px;
    background:var(--km-card);
}
.km-mv-card h3{ margin:0 0 8px; }

/* Brand block */
.km-brand{
    max-width:var(--km-max);
    margin:var(--km-gap) auto 0;
}

/* Mobile breakpoint: 600px and below */
@media (max-width: 600px){
    .km-wrap{ padding:28px 14px 40px; }
    .km-stats{ grid-template-columns:1fr; }
    .km-grid{ grid-template-columns:1fr; }
    .km-mv{ grid-template-columns:1fr; }
    .km-hero{ padding:20px 16px; }
}


.play-btn {
    width: 90px;
    height: 90px;
    border: none;
    border-radius: 50%;
    background: #ba9f5e; /* Kate Mall Gold */
    color: #fff;
    font-size: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    z-index: 1;
    box-shadow: 0 0 20px rgba(186,159,94,0.5);
    overflow: visible;
    z-index: 99;
}

/* Wave circles */
.play-btn::before,
.play-btn::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    border: 2px solid #ba9f5e;
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
    z-index: -1;
    animation: waves 2.5s infinite;
}

.play-btn::after {
    animation-delay: 1.2s; /* offset second wave */
}

@keyframes waves {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.7;
    }
    70% {
        transform: translate(-50%, -50%) scale(2.8);
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

/* Modal Background */
.video-modal-content {
    background: #000;
    border-radius: 12px;
    border: 2px solid #ba9f5e; /* Kate Mall gold */
    overflow: hidden;
    position: relative;
    box-shadow: 0 0 40px rgba(0,0,0,0.8);
}

/* Header overlay (logo + close) */
.video-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.7), transparent);
    z-index: 2;
}

/* Logo */
.video-logo {
    margin-top:10px;
    height: 70px;
    object-fit: contain;
}

/* Close Button */
.btn-close-white {
    margin-top:-40px;
    filter: invert(1) brightness(2);
    opacity: 0.3;
    transition: opacity 0.3s ease;
}
.btn-close-white:hover {
    opacity: 1;
}


/* Pillars */
.icon-box i {
    padding: 16px;
    background: rgba(186,159,94,0.1);
    border-radius: 50%;
}

/* Facts */
.fact-box {
    background: #fff;
    border-top: 3px solid #ba9f5e;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.fact-box:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

.box-faq.flat-action .faq-item{
    cursor: pointer;
}

.modern-benefit{
    gap: 20px;
    padding: 20px;
    background-color: #ffffff;
    border: 1px solid #e4e4e4;
    border-radius: 16px;
    box-shadow: 0px 30px 60px 0px rgba(0, 0, 0, 0.1019607843);
}

.benefit-header{
    font-size: 20px;
    color: #161e2d;
}
.box-faq.flat-action .faq-item .faq-header::after {
    content: "";
}
.box-faq.flat-action .faq-item .faq-header:not(.collapsed)::after {
    content: "";
}

.content-top.remove-border{
    border-bottom: none;
    padding-bottom: 10px;
    margin-bottom: 0;
}

.km-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 150px;
}

.dot-pulse {
    position: relative;
    left: -9999px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #93804c; /* Kate Gold */
    color: #93804c;
    box-shadow: 9999px 0 0 -5px;
    animation: dotPulse 1.5s infinite linear;
    animation-delay: .25s;
}
.dot-pulse::before, .dot-pulse::after {
    content: '';
    display: inline-block;
    position: absolute;
    top: 0;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #93804c;
    color: #93804c;
}
.dot-pulse::before {
    box-shadow: 9984px 0 0 -5px;
    animation: dotPulseBefore 1.5s infinite linear;
    animation-delay: 0s;
}
.dot-pulse::after {
    box-shadow: 10014px 0 0 -5px;
    animation: dotPulseAfter 1.5s infinite linear;
    animation-delay: .5s;
}
@keyframes dotPulseBefore {
    0% { box-shadow: 9984px 0 0 -5px; }
    30% { box-shadow: 9984px 0 0 2px; }
    60%, 100% { box-shadow: 9984px 0 0 -5px; }
}
@keyframes dotPulse {
    0% { box-shadow: 9999px 0 0 -5px; }
    30% { box-shadow: 9999px 0 0 2px; }
    60%, 100% { box-shadow: 9999px 0 0 -5px; }
}
@keyframes dotPulseAfter {
    0% { box-shadow: 10014px 0 0 -5px; }
    30% { box-shadow: 10014px 0 0 2px; }
    60%, 100% { box-shadow: 10014px 0 0 -5px; }
}

.md-border {
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    padding: 5px;
    background: rgba(255, 255, 255, 0.3);

    /* 🔹 Add centering */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 120px; /* Adjust height for logo box */
}

.md-border img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.md-border:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12); /* Slightly deeper shadow on hover */
    border-color: rgba(147, 128, 76, 0.4);      /* Kate gold accent (#93804c) */
}

.text-theme { color: #0e939c !important; }
.bg-theme { background: linear-gradient(135deg, #0e939c, #0c7f86); }

.step-circle {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.form-control-lg, .form-select-lg {
    border-radius: 12px;
    padding: 0.9rem 1.2rem;
    font-size: 1rem;
    border: 1px solid #d1d5db;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
    transition: border 0.2s ease-in-out, box-shadow 0.2s;
}

.form-control-lg:focus, .form-select-lg:focus {
    border-color: #0e939c;
    box-shadow: 0 0 0 0.25rem rgba(14, 147, 156, 0.25);
    outline: none;
}

.btn-theme {
    background: linear-gradient(90deg, #0e939c, #13b5a2);
    border: none;
    border-radius: 50px;
    padding: 0.6rem 1.6rem;
    color: #fff;
    font-weight: 500;
    transition: all 0.3s ease;
}
.btn-theme:hover {
    background: linear-gradient(90deg, #0c7f86, #0f9a8b);
}




/* ================= MENU SPACING OVERRIDES ================= */
/* ========== Mega Header & Menu — Fixed Panel, No Clipping, Clean ========== */
:root{
    /* layout */
    --mega-gap: 12px;
    --header-h: 72px;                     /* your JS updates this */
    --panel-x: 16px;                      /* left/right inset from edges */
    --panel-max-h: calc(100vh - var(--header-h) - 32px);

    /* header compactness */
    --header-pad-y: 10px;
    --logo-nav-gap: 10px;                 /* <<< tiny space between logo and menu */

    /* cards + colors */
    --card-bg:#fff; --card-bd:#e7edf3;
    --card-radius:16px; --card-shadow:0 8px 24px rgba(0,0,0,.06);
    --text-900:#111827; --text-700:#374151; --text-600:#4b5563;
}

/* ---- Layout: nav starts right after the logo ---- */
.k-header{display:flex;align-items:center;justify-content:space-between;gap:16px}
.k-left{display:flex;align-items:center;gap:15px !important;;flex:1 1 auto;min-width:0}
.k-nav{flex:1 1 auto;min-width:0}
/* menu itself: left-aligned, no auto-centering */
.k-navigation{display:flex;align-items:center;gap:2px;justify-content:flex-start;flex-wrap:nowrap; }
.k-navigation > li > a{white-space:nowrap}

.main-header .main-menu .navigation > li { padding-right: 30px; } /* adjust to taste */

/* ---- Kill ancestor clipping that was squashing the panel ---- */
.header-lower,
.inner-header,
.inner-header-left,
.nav-outer,
.main-menu,
.main-menu .navbar-collapse,
.navigation{overflow:visible !important}

/* logo block: no stray spacing */
.main-header .logo{line-height:0}
.main-header .logo img{display:block;height:44px;width:auto}
.main-header .logo-box{margin:0 !important;padding:0 !important;gap:2px;justify-content:flex-start;flex-wrap:nowrap; }

/* ---- Mega trigger ---- */
.navigation > li.has-mega{position:static}
.mega-trigger{display:inline-flex;align-items:center;gap:.5rem}


/* ===== MEGA PANEL (fixed, full width) ===== */
.mega-panel{
    position: fixed;
    left: max(var(--panel-x), env(safe-area-inset-left));
    right: max(var(--panel-x), env(safe-area-inset-right));
    top: calc(var(--header-h) + var(--mega-gap));
    z-index: 1000;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(0,0,0,.14);
    padding: 18px 22px;
    display: none;
    max-height: var(--panel-max-h);
    overflow: hidden; /* desktop: only right column scrolls */
}
/* anti-flicker bridge */
.mega-panel::before{
    content:"";
    position: fixed;
    left: 0; right: 0; top: var(--header-h);
    height: var(--mega-gap);
}

/* open states (click or keyboard) */
.navigation > li.has-mega.open .mega-panel,
.navigation > li.has-mega:focus-within .mega-panel{
    display:block;
}

/* hover open — desktop only */
@media (min-width: 993px){
    .navigation > li.has-mega:hover .mega-panel{ display:block; }
}

/* ===== DESKTOP LAYOUT ===== */
@media (min-width: 993px){

    /* extra inner space */
    .mega-panel{ padding-bottom: 12px; }

    .mega-inner{
        display: grid;
        grid-template-columns: 340px minmax(0,1fr);
        gap: 20px;
        align-items: start;
    }

    /* left column: search card */
    .mega-search-panel{
        padding: 14px;
        border: 1px solid var(--card-bd);
        border-radius: var(--card-radius);
        background: var(--card-bg);
        box-shadow: var(--card-shadow);
        margin-bottom: 16px;
    }

    /* --- desktop-only logo card --- */
    .mega-logo-card{
        display: flex;                 /* visible on desktop */
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;

        border: 1px solid var(--card-bd);
        border-radius: var(--card-radius);
        background: #fff;
        padding: 32px 20px;
        box-shadow: var(--card-shadow);
        margin-top: 16px;
    }

    .mega-logo-card img.mega-logo{
        display: block;
        margin: 0 auto 18px auto;      /* perfectly centered */
        max-width: 260px;              /* bigger, but responsive */
        width: 100%;
        height: auto;
        object-fit: contain;
    }

    .mega-logo-card .mega-logo-content{
        display: flex; flex-direction: column; align-items: center; gap: 10px;
    }

    .mega-logo-card .mega-logo-title{
        font-size: 1.1rem; font-weight: 700; margin: 0; color: #222;
    }

    .mega-logo-card .mega-logo-desc{
        font-size: .9rem; color: #555; line-height: 1.45; margin: 0; max-width: 280px;
    }

    .mega-logo-card .lease-btn{
        display: inline-block; padding: 10px 22px; border-radius: 999px;
        font-weight: 600; font-size: .95rem;
    }

    /* right: scrollable grid area */
    .mega-right{
        padding-left: 6px;
        max-height: calc(var(--panel-max-h) - 2px);
        overflow: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: #cfd7df transparent;
        padding-bottom: 32px;          /* last row safe area */
        scroll-padding-bottom: 32px;
    }
    .mega-right::-webkit-scrollbar{ width: 10px; }
    .mega-right::-webkit-scrollbar-thumb{ background:#cfd7df; border-radius: 8px; }
}

/* ===== MOBILE/TABLET LAYOUT ===== */
@media (max-width: 992.98px){

    /* panel acts like a sheet */
    .mega-panel{
        bottom: 16px;
        overflow: auto;               /* allow content to scroll */
        border-radius: 16px;
        padding: 16px;
    }

    .mega-inner{
        display: grid;
        grid-template-columns: 1fr;
        gap: 16px;
        align-items: start;
    }

    .mega-search-panel{
        padding: 12px;
        border: 1px solid var(--card-bd);
        border-radius: var(--card-radius);
        background: var(--card-bg);
        box-shadow: var(--card-shadow);
        margin-bottom: 0;
    }

    /* hide the logo card on small screens */
    .mega-logo-card{ display: none !important; }

    /* right grid just flows; no forced scrolling */
    .mega-right{
        padding-left: 0;
        max-height: none;
        overflow: visible;
        padding-bottom: 0;
    }
}

/* Optional (nice on Windows/Chrome): keep text clear of the scrollbar */
@supports (scrollbar-gutter: stable) {
    .mega-right{ scrollbar-gutter: stable both-edges; }
}

/* --------- Tablet/Mobile sheet --------- */
@media (max-width: 992px){
    .mega-panel{bottom:16px;overflow:auto;border-radius:16px;padding:16px}
    .mega-inner{display:grid;grid-template-columns:1fr;gap:16px}
    .mega-left{border:1px solid var(--card-bd);border-radius:var(--card-radius);background:#fff;padding:12px;box-shadow:var(--card-shadow)}
    .mega-right{max-height:none;overflow:visible}
}

/* --------- Left rail: search + quick link --------- */
.mega-search{
    display:flex;align-items:center;gap:10px;border:1px solid #e6e6e6;border-radius:999px;
    padding:10px 14px;background:#fff; box-shadow:inset 0 0 0 1px #eef2f7;
}
.mega-search input{border:0;outline:0;width:100%;font:inherit;color:var(--text-900)}
.mega-search:focus-within{box-shadow:0 0 0 3px rgba(16,185,129,.2), inset 0 0 0 1px #0e939c}
.mega-left .tf-btn.btn-line{
    display:inline-flex;              /* turn it into a flex pill */
    align-items:center;               /* vertical centering */
    justify-content:center;           /* horizontal centering */
    gap:.5rem;                        /* space between icon/text (if any) */
    padding:10px 18px;
    border:2px solid #0e939c;
    border-radius:999px;
    line-height:1;                    /* avoid extra top/bottom */
    white-space:nowrap;               /* keep it on one line */
}

/* Icons sometimes sit off the baseline—nudge them */
.mega-left .tf-btn.btn-line i,
.mega-left .tf-btn.btn-line svg{
    line-height:1;
    vertical-align:middle;
}

/* Optional: consistent height if you want tighter pills */
.mega-left .tf-btn.btn-line{ min-height:40px; }


/* --------- Right grid: clean cards 4→3→2→1 --------- */
.mega-groups{display:grid !important;grid-template-columns:repeat(4,minmax(240px,1fr)) !important;gap:16px !important;align-content:start}
@media (max-width:1400px){.mega-groups{grid-template-columns:repeat(3,minmax(220px,1fr)) !important}}
@media (max-width:1200px){.mega-groups{grid-template-columns:repeat(2,minmax(220px,1fr)) !important}}
@media (max-width:640px){ .mega-groups{grid-template-columns:1fr !important} }

.mega-group{
    background:var(--card-bg); border:1px solid var(--card-bd);
    border-radius:var(--card-radius); padding:14px 16px; box-shadow:var(--card-shadow)
}
.mega-group h6{margin:0 0 10px;font-weight:800;font-size:15px;color:var(--text-900)}
.mega-group ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.mega-group a{
    display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text-700);
    font-size:14px;line-height:1.35;padding:6px 6px;border-radius:10px
}
.mega-group a:hover{color:#0e939c;background:#effcf7}
.mega-icon{width:22px;min-width:22px;text-align:center;line-height:1;opacity:.9}
.mega-icon i{font-size:16px;line-height:1;vertical-align:middle}

/* --------- Subtle hover lift on cards --------- */
@media (hover:hover){
    .mega-group{transition:transform .15s ease, box-shadow .15s ease}
    .mega-group:hover{transform:translateY(-1px); box-shadow:0 12px 28px rgba(0,0,0,.08)}
}

/* Desktop: hover works */
@media (min-width: 993px){
    .navigation > li.has-mega:hover .mega-panel,
    .navigation > li.has-mega:focus-within .mega-panel {
        display:block;
    }
}

/* Mobile/Tablet: disable hover-open */
@media (max-width: 992px){
    .navigation > li.has-mega:hover .mega-panel,
    .navigation > li.has-mega:focus-within .mega-panel {
        display:block;
    }
}

/* --------- Backdrop for mobile/tablet --------- */
.mega-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.35);backdrop-filter:saturate(120%) blur(1px);z-index:999;opacity:0;transition:opacity .2s ease}
.mega-backdrop.show{opacity:1}

/* --------- RTL --------- */
[dir="rtl"] .k-navigation{justify-content:flex-start}
[dir="rtl"] .mega-inner{direction:rtl}

/* Loader + no results wrapper */
.mega-loader,
.mega-no-results {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 100%;
    text-align: center;
    padding: 20px;
    color: #555;
    font-size: 14px;
}

.mega-no-results p { margin: 0; font-weight: 500; color: #666; }


.mega-force-close .has-mega:hover .mega-panel {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}









:root{
    --brand-gold: #ba9f5e; /* fallback if your --primary-color differs */
}

/* container */
.hero-brandline{
    position: relative;
    display: inline-block;
    padding: 6px 2px;           /* breathing room for the sweep */
    border-radius: 12px;        /* subtle luxury radius */
    isolation: isolate;         /* keeps effects contained */
}

/* text */
.hero-brandline__text{
    color:#fff;
    font-weight: 600;
    letter-spacing:.4px;
    font-size: clamp(20px, 1.6vw + 10px, 28px);
    line-height: 1.25;
    position: relative;
    z-index: 1;
}

/* elegant highlight sweep behind the text (one-time) */
.hero-brandline::before{
    content:"";
    position:absolute;
    inset: 0 -6px;              /* tiny horizontal bleed for nicer sweep */
    background: linear-gradient(90deg,
    rgba(186,159,94,.18) 0%,
    rgba(255,255,255,.10) 50%,
    rgba(186,159,94,.18) 100%);
    border-radius:12px;
    transform: translateX(-110%);
    opacity:.0;
    animation: sweepIn .85s cubic-bezier(.2,.6,.2,1) forwards .15s;
    pointer-events:none;
    z-index:0;
}

/* gold underline that grows */
.hero-brandline__underline{
    position:absolute;
    left:0; right:0;
    bottom:-6px;
    height:3px;
    background: linear-gradient(90deg, var(--brand-gold), #e9d59a);
    border-radius: 3px;
    transform-origin: left;
    transform: scaleX(0);
    animation: underlineGrow .9s ease-out forwards .35s;
    overflow: visible;
}

/* tiny spark that travels once */
.hero-brandline__underline::after{
    content:"";
    position:absolute;
    top:50%;
    left:0;
    width:8px; height:8px;
    border-radius:50%;
    background:#fff;
    box-shadow: 0 0 10px rgba(255,255,255,.9), 0 0 18px rgba(186,159,94,.9);
    transform: translate(-50%, -50%);
    opacity:0;
    animation: sparkRun 1.2s ease-out forwards .38s;
}

/* keyframes */
@keyframes sweepIn{
    0%   { transform: translateX(-110%); opacity: .0; }
    30%  { opacity: .8; }
    100% { transform: translateX(0%);   opacity: .0; }
}

@keyframes underlineGrow{
    to { transform: scaleX(1); }
}

@keyframes sparkRun{
    0%   { opacity:0; transform: translate(-50%, -50%); }
    10%  { opacity:1; }
    100% { opacity:0; transform: translate(calc(100% - 50%), -50%); }
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce){
    .hero-brandline::before,
    .hero-brandline__underline,
    .hero-brandline__underline::after{
        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}


.tf-btn.btn-line.primary {
    background: transparent;
    color: white;
    border: 2px solid #93804c;
    font-weight: 600;
    transition: all 0.3s ease;
}

/* hover = filled background */
.tf-btn.btn-line.primary:hover {
    background: #93804c;
    color: #fff;
}







/* Shared CTA button base */
.cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    border-radius: 10px;         /* reduced from 30px */
    padding: 14px 36px;          /* bigger padding */
    font-size: 1.125rem;         /* ~18px */
    transition: all .35s ease;
    text-decoration: none;
}

/* Primary (filled gold) */
.cta-btn-primary {
    background: var(--primary-color, #0e939c);
    color: #fff;
    border: 2px solid var(--primary-color, #0e939c);
    box-shadow: 0 6px 18px rgb(14, 146, 155,0.35);
}
.cta-btn-primary:hover {
    background: #fff;
    color: var(--primary-color, #ba9f5e);
    transform: translateY(-3px);
}

/* Secondary (outline) */
.cta-btn-outline {
    background: transparent;
    border: 2px solid var(--primary-color, #ba9f5e);
    color: var(--primary-color, #ba9f5e);
}
.cta-btn-outline:hover {
    background: var(--primary-color, #ba9f5e);
    color: #fff;
    transform: translateY(-3px);
}

/* Icon animation */
.cta-btn i {
    transition: transform .35s ease;
}
.cta-btn:hover i {
    transform: translateX(4px);
}












/* Footer logo + text */
.footer-logo-block {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.footer-logo-block .footer-logo-img {
    height: 100px;
    width: auto;
    flex-shrink: 0;
}

.footer-logo-block .footer-logo-text {
    margin: 0;
    line-height: 1.5;
    max-width: 420px;
    flex: 1;
}


/* Desktop default: left align */
.social-block {
    text-align: left;
}

.social-block .social-title {
    font-weight: 600;
    margin-bottom: 12px;
    display: block;
    color: #fff; /* adjust to your footer bg */
}

.social-block .list-social {
    display: flex;
    gap: 12px;
    padding: 0;
    margin: 0;
    list-style: none;
}

/* Responsive */
@media (max-width: 600px) {
    .footer-logo-block {
        flex-direction: column;
        text-align: center;
    }
    .footer-logo-block .footer-logo-img {
        margin-bottom: 12px;
    }
    .footer-logo-block .footer-logo-text {
        max-width: 100%;
    }
    .social-block {
        text-align: center; /* center the "Follow Us:" text */
    }

    .social-block .list-social {
        width: 100%;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        flex-wrap: wrap;
        gap: 20px !important;
        margin: 0 auto;
        padding: 0 !important;
        list-style: none;
        text-align: center;
        margin-left: 12px;
        margin-top: 10px;
    }
}







/* Font families */
:root {
    --font-heading: 'Manrope', sans-serif;
    --font-body: 'Poppins', sans-serif;
    --font-arabic: 'Rubik', sans-serif;
}

.contact-link {
    position: relative;
    transition: color 0.3s ease;
}

/* Animated underline */
.contact-link::after {
    content: "";
    width: 0;
    height: 1px;
    bottom: -2px; /* little space below text */
    position: absolute;
    left: auto;
    right: 0;
    background: #0e939c; /* Kate Gold */
    transition: width 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Hover effect */
.contact-link:hover {
    color: #ba9f5e !important;
}

.contact-link:hover::after {
    width: 100%;
    left: 0;
    right: auto;
}

/* Modal */
.contact-modal {
    font-family: var(--font-body);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 12px 40px rgba(0,0,0,0.15);
    overflow: hidden;
    animation: zoomIn 0.3s ease;
}

.contact-modal .modal-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.4rem;
    color: #222;
    border-left: 4px solid #ba9f5e;
    padding-left: 10px;
}

.contact-modal h6 {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1.1rem;
    color: #000;
    margin-bottom: .5rem;
}

.contact-modal p {
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.6;
    color: #444;
}

/* Arabic support */
.contact-modal .arabic {
    font-family: var(--font-arabic);
    direction: rtl;
    text-align: right;
}

/* Buttons */
.contact-modal .btn {
    border-radius: 30px;
    font-family: var(--font-heading);
    font-weight: 500;
    letter-spacing: 0.3px;
    transition: all 0.3s ease;
}

.contact-modal .btn-primary {
    background: #ba9f5e;
    border: none;
}
.contact-modal .btn-primary:hover {
    background: #9a844c;
}

.contact-modal .btn-success {
    background: #25D366;
    border: none;
}
.contact-modal .btn-success:hover {
    background: #1ebe5c;
}

@keyframes zoomIn {
    from { transform: scale(0.9); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}




/* ================= Footer Facilities (scoped) ================= */
/* ================= Footer Facilities Icons ================= */
.footer-facilities {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 icons in one row */
    gap: 10px;
    margin-top: 30px;
    text-align: center;
    padding: 0;
}

.facility i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;   /* smaller circle */
    height: 50px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08); /* soft background */
    color: #ba9f5e;   /* Kate Gold */
    font-size: 20px;  /* icon size */
    margin: 0 auto 6px auto;
    transition: all 0.3s ease;
    border: 1px solid rgba(186, 159, 94, 0.4); /* subtle gold border */
    cursor: pointer;
}

.facility span {
    display: block;
    color: #fff;
    font-size: 10px;   /* smaller label text */
    font-weight: 500;
    letter-spacing: 0.3px;
}

/* Hover effect */
.facility:hover i {
    background: rgba(186, 159, 94, 0.2); /* glow effect */
    transform: scale(1.1);
    box-shadow: 0 4px 10px rgba(186, 159, 94, 0.3);
}

/* Tablet layout */
/* Mobile layout */
/* Tablet: keep 4 in a row but increase gap for spacing */
@media (max-width: 768px) {
    .footer-facilities {
        margin-top:30px;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
    }
}

/* Mobile: still 4 in a row but smaller icons if needed */
@media (max-width: 480px) {
    .footer-facilities {
        margin-top:30px !important;
        grid-template-columns: repeat(4, 1fr); /* keep horizontal */
        gap: 10px;
    }

    .facility i {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

    .facility span {
        font-size: 9px;
    }
}

.credit {
    font-size: 13px;
    color: #9ca3af; /* subtle gray */
    margin: 0;
}
.credit .it-brand {
    color: #0e939c; /* Kate teal */
    font-weight: 500;
    text-decoration: none;
    transition: color 0.3s ease;
}






/* WhatsApp Floating Button */
.whatsapp-wrap {
    position: fixed;
    bottom: 30px;
    right: 30px;
    height: 44px;
    width: 44px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 0px 10px 25px rgba(54,95,104,0.1);
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 400ms linear;
    background: #25d366; /* WhatsApp green */
    color: #fff;
    font-size: 20px;
}

.whatsapp-wrap.active-progress {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    animation: pulse-ring 2s infinite ease-in-out;
}

.whatsapp-wrap i {
    font-size: 18px;
    line-height: 1;
}

/* Pulse / waving effect */
@keyframes pulse-ring {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 0 12px rgba(37, 211, 102, 0);
        transform: scale(1.05);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
        transform: scale(1);
    }
}




.ai-chatbox {
    position: fixed;
    bottom: 90px;
    right: 30px;
    width: 320px;
    max-height: 500px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
    display: none;
    flex-direction: column;
    overflow: hidden;
    z-index: 9999;
}

.ai-chat-header {
    background: #0e939c;
    color: #fff;
    padding: 10px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ai-chat-messages {
    flex: 1;
    padding: 10px;
    overflow-y: auto;
    font-size: 14px;
}

.ai-user {
    text-align: right;
    color: #0e939c;
    margin: 5px 0;
}

.ai-bot {
    text-align: left;
    color: #333;
    margin: 5px 0;
}

.ai-chat-suggestions {
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ai-chat-suggestions button {
    flex: 1 1 45%;
    padding: 6px 10px;
    border: 1px solid #0e939c;
    border-radius: 20px;
    background: #fff;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s ease;
}

.ai-chat-suggestions button:hover {
    background: #0e939c;
    color: #fff;
}

.ai-chat-input {
    display: flex;
    border-top: 1px solid #eee;
}

.ai-chat-input input {
    flex: 1;
    border: none;
    padding: 10px;
    font-size: 14px;
    outline: none;
}

.ai-chat-input button {
    background: #ba9f5e;
    border: none;
    color: #fff;
    padding: 0 15px;
    cursor: pointer;
}

.ai-chat-toggle {
    position: fixed;
    bottom: 20px;
    right: 30px;
    background: #0e939c;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 22px;
    cursor: pointer;
    box-shadow: 0 8px 15px rgba(0,0,0,0.2);
    z-index: 9999;
}



/* Row: locks vertical centering regardless of line-height elsewhere */
.consent-row{
    display:flex;
    align-items:center;
    gap:.6rem;
    line-height:1.35;
}

/* Polished custom checkbox (24px) */
.kate-checkbox{
    appearance:none; -webkit-appearance:none; -moz-appearance:none;
    inline-size:24px; block-size:24px;            /* 24×24 */
    border:2px solid #ba9f5e; border-radius:6px;
    background:#fff; margin:0; cursor:pointer;
    display:inline-grid; place-content:center;     /* perfect centering */
    transition:background-color .2s,border-color .2s,box-shadow .2s;
}
.kate-checkbox:focus-visible{ outline:2px solid #ba9f5e; outline-offset:2px; }
.kate-checkbox:checked{ background:#ba9f5e; }

/* Crisp checkmark (no font baseline issues) */
.kate-checkbox::before{
    content:"";
    width:12px; height:12px;
    clip-path:polygon(14% 44%,0 65%,48% 100%,100% 16%,82% 0,43% 62%);
    transform:scale(0); transform-origin:center;
}
.kate-checkbox:checked::before{ background:#fff; transform:scale(1); }

/* Text */
.consent-text{ font-size:.95rem; color:#1f2937; margin-top: 8px;}
.consent-text .brand{ font-weight:600; color:#ba9f5e; }
.consent-text .muted{ color:#6b7280; }


/*!* Background layers *!*/
/*.flat-slider .hero-poster,*/
/*.flat-slider .slide-video {*/
/*    position: absolute;*/
/*    inset: 0;*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    object-fit: cover;      !* use contain if you don’t want cropping *!*/
/*}*/

/*!* Start with poster visible, video hidden *!*/
/*.flat-slider .hero-poster {*/
/*    opacity: 1;*/
/*    transition: opacity .4s ease;*/
/*    z-index: 0;*/
/*}*/
/*.flat-slider .slide-video {*/
/*    opacity: 0;*/
/*    visibility: hidden;*/
/*    transition: opacity .4s ease;*/
/*    z-index: 0;*/
/*    pointer-events: none;   !* never block scrolling/touches *!*/
/*    transform: translateZ(0);*/
/*    will-change: opacity;*/
/*    contain: paint;*/
/*}*/

/*!* Once ready, reveal video and fade poster *!*/
/*.flat-slider.is-ready .slide-video {*/
/*    opacity: 1;*/
/*    visibility: visible;*/
/*}*/
/*.flat-slider.is-ready .hero-poster {*/
/*    opacity: 0;*/
/*    visibility: hidden;*/
/*}*/

/*!* Keep foreground above background *!*/
/*.flat-slider .overlay,*/
/*.flat-slider .container,*/
/*.flat-slider .slider-content { position: relative; z-index: 1; }*/

/*!* Optional: disable video on small screens (keeps poster only) *!*/
/*@media (max-width: 768px){*/
/*    .flat-slider .slide-video { display: none; }*/
/*}*/



/*.flat-slider .slide-video {*/
/*    position: absolute;*/
/*    inset: 0;*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    object-fit: contain; !* no crop; black/empty bars possible *!*/
/*    background: #000;    !* optional: behind the letterbox *!*/
/*    z-index: 0;*/
/*    pointer-events: none;*/
/*}*/