/* =======================
Fonts
======================= */
@font-face {
    font-family: 'Bright Starla';
    src: url('/Fonts/Bright\ Starla.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'BricolageGrotesque-Light';
    src: url('/Fonts/FunnelDisplay-Light.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('/Fonts/Montserrat-VariableFont_wght.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Myriad Pro';
    src: url('/Fonts/MyriadPro-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* =======================
Root & Global — ZNITRA Medical Supplies brand palette
(sampled directly from the official logo)
======================= */
:root {
    --navy: #0d2547;
    --navy-dark: #071428;
    --navy-darker: #040c1a;
    --teal: #ab8a57;
    --teal-light: #c8ac7a;
    --gold: #ab8a57;
    --gold-light: #c8ac7a;

    --bg-color: #0d2547;
    --text-white: #fff;
    --hero-color: #0d2547;
    --p-color: #040c1a;
    --p-slider: #d9e8ee;

    /* Main page background */
    --page-bg: #fff;

    /* Card / surface background — white gold (champagne) (kept separate from text-white
       so body/heading text stays crisp white on dark sections) */
    --surface-color: #F5EDDB;

    /* Sync Bootstrap's own background variable so utilities like .bg-body match */
    --bs-body-bg: #F5EDDB;
}

*,

*::before,
*::after {
    margin: 0;
    padding: 0;
    outline: 0;
    border: none;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none !important;
    transition: all 0.3s ease-in-out;
}

body {
    font-family: "Montserrat", "Tajawal", sans-serif;
    background-color: var(--page-bg);
}

html[lang="ar"] body,
html[lang="ar"] * {
    font-family: "Tajawal", "Montserrat", sans-serif;
}

/* =======================
Brand utility helpers
======================= */
.text-teal { color: var(--teal) !important; }
.text-gold { color: var(--gold) !important; }
.bg-navy { background-color: var(--navy) !important; }
.bg-navy-dark { background-color: var(--navy-dark) !important; }
.bg-soft { background-color: var(--surface-color) !important; }

.custom-btn {
    background-color: transparent;
    color: var(--navy);
}
.custom-btn:hover {
    background-color: var(--navy);
    color: var(--text-white) !important;
}

.btn-gold {
    display: inline-block;
    padding: 12px 40px;
    background-color: var(--gold);
    color: var(--text-white) !important;
    border-radius: 2px;
    font-size: clamp(12px, 1.4vw, 16px);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.btn-gold:hover {
    background-color: var(--navy);
    color: var(--text-white) !important;
}

/* Language switch pill */
.lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    border: 1px solid var(--navy) !important;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .5px;
    color: var(--navy) !important;
}
.lang-switch:hover {
    background-color: var(--navy);
    color: var(--text-white) !important;
}
.lang-switch i { font-size: 15px; }

/* Section eyebrow / kicker */
.eyebrow {
    display: inline-block;
    color: var(--gold);
    font-size: clamp(12px, 1.2vw, 15px);
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: 600;
}

/* Stats strip */
.stat-box h3 {
    font-size: clamp(30px, 4vw, 54px);
    font-weight: 800;
    color: var(--navy);
    margin-bottom: 4px;
}
.stat-box p {
    color: var(--p-color);
    font-size: clamp(12px, 1.1vw, 15px);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0;
}

/* Service card caption text (kept for overlay-slider blocks) */
.overlay-slider h2 { color: var(--text-white); }

/* Contact / info cards — clickable (map / phone / email) */
.info-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    padding: 34px 24px 30px;
    color: var(--navy) !important;
    background: linear-gradient(160deg, #ffffff 0%, var(--surface-color) 100%);
    border: 1px solid rgba(171, 138, 87, 0.28);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(13, 37, 71, 0.06);
    cursor: pointer;
    overflow: hidden;
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease !important;
}
.info-card::after {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--gold), var(--gold-light), var(--gold));
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .4s ease;
}
.info-card:hover,
.info-card:focus-visible {
    transform: translateY(-8px);
    border-color: rgba(171, 138, 87, 0.7);
    box-shadow: 0 22px 44px rgba(13, 37, 71, 0.14);
}
.info-card:hover::after,
.info-card:focus-visible::after { transform: scaleX(1); }
.info-card:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }

.info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 18px;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--gold-light), var(--gold));
    box-shadow: 0 8px 20px rgba(171, 138, 87, 0.4), inset 0 0 0 4px rgba(255, 255, 255, 0.35);
    transition: transform .35s ease, box-shadow .35s ease !important;
}
.info-icon i {
    font-size: 26px;
    line-height: 1;
    color: #fff;
}
.info-card:hover .info-icon {
    transform: scale(1.08) rotate(-6deg);
    box-shadow: 0 12px 26px rgba(171, 138, 87, 0.55), inset 0 0 0 4px rgba(255, 255, 255, 0.45);
}
.info-card p { color: var(--navy); }
.info-card p.p-color { color: #4a5668 !important; line-height: 1.7; word-break: break-word; }

.info-arrow {
    position: absolute;
    top: 14px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: var(--gold);
    background: rgba(171, 138, 87, 0.12);
    opacity: 0;
    transform: translate(-6px, 6px);
    transition: opacity .3s ease, transform .3s ease, background-color .3s ease, color .3s ease !important;
}
.info-arrow i { font-size: 13px; }
.info-card:hover .info-arrow,
.info-card:focus-visible .info-arrow { opacity: 1; transform: translate(0, 0); }
.info-card:hover .info-arrow { background: var(--gold); color: #fff; }
html[dir="rtl"] .info-arrow { right: auto; left: 14px; }
html[dir="rtl"] .info-arrow i { transform: scaleX(-1); }
@media (hover: none) { .info-arrow { opacity: 1; transform: none; } }

/* Stats counter — stable digits, no layout jump while counting */
.stat-num {
    display: inline-block;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    text-align: center;
    white-space: nowrap;
}

/* =======================
Scrollbar
======================= */
::-webkit-scrollbar {
    width: 8px !important;
}

::-webkit-scrollbar-thumb {
    background: var(--bg-color);
    border-radius: 150px;
}

/* =======================
Inputs Reset
======================= */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

input[type="number"] {
    appearance: textfield;
    -moz-appearance: textfield;
}

/* =======================
Font Sizes
======================= */
.fs-11 {
    font-size: clamp(10px, 1vw, 11px);
}

.fs-14 {
    font-size: clamp(10px, 1vw, 14px);
}

.fs-17 {
    font-size: clamp(12px, 1.2vw, 17px);
}

.fs-18 {
    font-size: clamp(12px, 1.3vw, 18px);
}

.fs-20 {
    font-size: clamp(10px, 1.5vw, 20px);
}

.fs-18 {
    font-size: clamp(12px, 1.2vw, 15px);
}

.fs-25 {
    font-size: clamp(14px, 1.8vw, 25px);
}

.fs-28 {
    font-size: clamp(10px, 3vw, 28px);
}

.fs-60 {
    font-size: clamp(22px, 5vw, 60px);
}

.fs-68 {
    font-size: clamp(22px, 5vw, 68px);
}

/* =======================
Colors & Text
======================= */
.text-white {
    color: var(--text-white) !important;
}

.p-slider {
    color: var(--p-slider);
}

.hero-color {
    color: var(--hero-color);
}

.p-color {
    color: var(--p-color);
}

.text-justify {
    text-align: justify;
}

.text-bold {
    font-weight: 700;
}

.text-custom {
    color: var(--hero-color);
    opacity: 0.5;
}

.letter-spacing-3 {
    letter-spacing: 3px;
}

/* =======================
Fonts Classes
======================= */
.Bright-Starla {
    font-family: "Bright Starla", sans-serif;
}

/* =======================
Navbar
======================= */
.navbar-brand {
    max-width: 230px;
}

@media (max-width: 576px) {
    .navbar-brand {
        max-width: 170px;
    }
}

/* =======================
Floating nav — "Conic Spotlight" (pill with a light that follows the cursor)
======================= */
.nv-spacer { height: 104px; }
@media (max-width: 991.98px) { .nv-spacer { height: 92px; } }

.nv-cs {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1030;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    width: min(1180px, calc(100% - 32px));
    padding: 10px 14px 10px 22px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.78);
    -webkit-backdrop-filter: saturate(170%) blur(16px);
    backdrop-filter: saturate(170%) blur(16px);
    border: 1px solid rgba(171, 138, 87, 0.3);
    box-shadow: 0 14px 40px rgba(13, 37, 71, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    overflow: hidden;
    isolation: isolate;
    transition: padding .35s ease, box-shadow .35s ease, background-color .35s ease, border-radius .35s ease !important;
}
html[dir="rtl"] .nv-cs { padding: 10px 22px 10px 14px; }
.nv-cs.navbar-shrink {
    padding-top: 6px;
    padding-bottom: 6px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 18px 46px rgba(13, 37, 71, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* the light that follows the pointer */
.nv-cs-light {
    position: absolute;
    left: 0;
    top: 0;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(255, 233, 180, 0.85),
        rgba(171, 138, 87, 0.22) 42%,
        transparent 70%);
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: 0;
    transition: opacity .35s ease !important;
    z-index: 0;
}
.nv-cs:hover .nv-cs-light { opacity: 1; }

/* logo */
.nv-cs-brand {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    padding: 2px 0;
}
.nv-cs-brand img {
    display: block;
    height: 44px;
    width: auto;
    filter: drop-shadow(0 3px 8px rgba(13, 37, 71, 0.12));
    transition: height .35s ease, transform .35s ease !important;
}
.nv-cs.navbar-shrink .nv-cs-brand img { height: 38px; }
.nv-cs-brand:hover img { transform: scale(1.04); }

/* menu (links + actions) */
.nv-cs-menu {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1 1 auto;
    gap: 16px;
    margin-inline-start: 28px;
}
.nv-cs-links {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}
.nv-cs-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nv-cs-i {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 16px;
    color: rgba(13, 37, 71, 0.72);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .02em;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    border-radius: 12px;
    transition: color .3s ease, background-color .3s ease !important;
}
.nv-cs-i::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 3px;
    width: 5px;
    height: 5px;
    margin-left: -2.5px;
    border-radius: 50%;
    background: var(--gold);
    opacity: 0;
    transform: scale(.2);
    transition: opacity .3s ease, transform .35s cubic-bezier(.34, 1.56, .64, 1) !important;
}
.nv-cs-i:hover,
.nv-cs-i:focus-visible {
    color: var(--navy);
    background: rgba(171, 138, 87, 0.14);
    text-decoration: none;
}
.nv-cs-i:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.nv-cs-i.active {
    color: var(--navy);
    background: rgba(171, 138, 87, 0.18);
}
.nv-cs-i.active::after {
    opacity: 1;
    transform: scale(1);
    animation: navDotPulse 2.4s ease-out infinite;
}
@keyframes navDotPulse {
    0%   { box-shadow: 0 0 0 0 rgba(171, 138, 87, .55); }
    70%  { box-shadow: 0 0 0 7px rgba(171, 138, 87, 0); }
    100% { box-shadow: 0 0 0 0 rgba(171, 138, 87, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .nv-cs-i.active::after { animation: none; }
}

/* language pill inside the floating nav */
.nv-cs .lang-switch {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 5px 16px 5px 5px;
    background: #fff;
    border: 1px solid rgba(171, 138, 87, .55) !important;
    border-radius: 999px;
    color: var(--navy) !important;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(13, 37, 71, .06);
    transition: background-color .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease !important;
}
html[dir="rtl"] .nv-cs .lang-switch { padding: 5px 5px 5px 16px; }
.nv-cs .lang-switch i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--gold-light), var(--gold));
    color: #fff;
    font-size: 14px;
    transition: transform .5s ease !important;
}
.nv-cs .lang-switch:hover,
.nv-cs .lang-switch:focus-visible {
    background: var(--navy);
    border-color: var(--navy) !important;
    color: #fff !important;
    box-shadow: 0 10px 22px rgba(13, 37, 71, .22);
}
.nv-cs .lang-switch:hover i { transform: rotate(360deg); }
.nv-cs .lang-switch:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* burger (mobile only) */
.nv-cs-toggle {
    position: relative;
    z-index: 1;
    display: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(171, 138, 87, .4);
    border-radius: 14px;
    background: rgba(255, 255, 255, .8);
    cursor: pointer;
    transition: background-color .3s ease !important;
}
.nv-cs-toggle span {
    position: absolute;
    left: 12px;
    right: 12px;
    height: 2px;
    border-radius: 2px;
    background: var(--navy);
    transition: transform .35s ease, opacity .25s ease, top .35s ease !important;
}
.nv-cs-toggle span:nth-child(1) { top: 15px; }
.nv-cs-toggle span:nth-child(2) { top: 21px; }
.nv-cs-toggle span:nth-child(3) { top: 27px; }
.nv-cs.is-open .nv-cs-toggle span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.nv-cs.is-open .nv-cs-toggle span:nth-child(2) { opacity: 0; }
.nv-cs.is-open .nv-cs-toggle span:nth-child(3) { top: 21px; transform: rotate(-45deg); }
.nv-cs-toggle:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* Mobile: the pill grows downward to reveal the menu */
@media (max-width: 991.98px) {
    .nv-cs { padding: 8px 10px 8px 16px; border-radius: 24px; }
    html[dir="rtl"] .nv-cs { padding: 8px 16px 8px 10px; }
    .nv-cs-toggle { display: block; }
    .nv-cs-brand img { height: 36px; }
    .nv-cs-menu {
        flex: 0 0 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin-inline-start: 0;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        visibility: hidden;
        transition: max-height .45s ease, opacity .3s ease, visibility 0s linear .45s !important;
    }
    .nv-cs.is-open .nv-cs-menu {
        max-height: 520px;
        opacity: 1;
        visibility: visible;
        padding-top: 10px;
        transition: max-height .45s ease, opacity .3s ease .05s, visibility 0s !important;
    }
    .nv-cs-links { flex-direction: column; align-items: stretch; gap: 2px; margin: 0; }
    .nv-cs-i { display: flex; align-items: center; padding: 10px 14px; font-size: 15px; }
    .nv-cs-i::after { left: auto; right: 16px; top: 50%; bottom: auto; margin: -2.5px 0 0 0; }
    html[dir="rtl"] .nv-cs-i::after { right: auto; left: 16px; }
    .nv-cs-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 10px 0 6px;
        border-top: 1px solid rgba(171, 138, 87, .25);
        margin-top: 8px;
    }
    .nv-cs-actions .lang-switch { justify-content: center; }
}

/* =======================
Hero Section
======================= */



/* =======================
TM placement in Header
======================= */

/* =======================
Video Section
======================= */
.video-wrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 16 / 9;
}

.video-wrapper video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    background-color: var(--page-bg);
}

/* Hero "Our Journey" interactive embed (replaces the hero video) */
.video-wrapper iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background-color: var(--page-bg);
}

/* Mobile: keep the video at its native 16:9 ratio so nothing gets
   zoomed/cropped (a forced taller box + object-fit:cover was cutting into
   the frame and blowing up the logo on the right side of the video) */
@media (max-width: 768px) {
    .video-wrapper {
        aspect-ratio: 16 / 9;
        height: auto;
        min-height: 0;
        max-height: none;
    }

    .video-wrapper video {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .video-overlay {
        bottom: 6%;
        width: 100%;
        padding: 0 12px;
    }

    .video-overlay h3 {
        font-size: clamp(13px, 3.6vw, 18px);
    }

    .video-icon-wrapper {
        display: none;
    }
}

.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
    top: 96% !important;
    z-index: 81;
    position: relative;
}

.navbar-toggler:focus {
    border: none !important;

}

.navbar-toggler:focus-visible {
    border: none !important;
    box-shadow: none !important;
}

.icon-container {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 2;

}

.video-icon-wrapper {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 2;
    pointer-events: none;

}

.video-icon-wrapper .overlay-icon {
    width: auto;
    height: auto;
    max-width: 115px;
    opacity: 0.95;
}

.overlay-icon {
    max-width: 70px;
}

.video-overlay {
    position: absolute;
    color: var(--text-white);
    z-index: 1;
    bottom: 8%;
    left: 50%;
    transform: translateX(-50%);
}


/* =======================
Buttons & UI
======================= */
.custom-btn {
    padding: 12px 122px;
    border: 1px solid var(--bg-color);
    border-radius: 0 !important;
    font-size: clamp(12px, 1.6vw, 20px);
    text-transform: uppercase;

}

.custom-c {
    padding: 1px 5px;
    border: 1px solid var(--text-white);
    border-radius: 50%;
    color: var(--text-white);

}

/* =======================
About Section
======================= */
.about-divider {
    width: 10px;
    min-height: 100%;
    height: auto;
    background-color: var(--bg-color);

}

.aboutSwiper {
    overflow: hidden;
    min-height: clamp(220px, 22vw, 260px);
}

.aboutSwiper .swiper-wrapper {
    align-items: stretch;
}

.aboutSwiper .swiper-slide {
    height: clamp(220px, 22vw, 260px);

}



/* =======================
Collections
======================= */
.title-Collections {
    margin-top: 120px;
}

.collection-item {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.collection-card {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    border: 2px solid var(--bg-color);
    background: var(--surface-color);

}

.collection-card-img {
    width: 100%;
    max-width: 316px;
    max-height: 100%;
    object-fit: contain;

}

.collection-logo {
    max-width: 230px;
}

/* =======================
Slider
======================= */
.overlay-slider {
    background: rgba(0, 0, 0, 0.5);
}

.swiper-button-next,
.swiper-button-prev {
    color: var(--hero-color) !important;
}

.swiper-pagination-bullet {
    background: var(--hero-color) !important;
}

/* =======================
Badge
======================= */
.hero-badge-wrapper {
    flex: 0 0 auto;
}

.handcrafted-text {
    flex: 1 1 320px;
}

.fs-badge-text {
    font-size: clamp(11px, 1.2vw, 16px);
}

.fs-badge-text textPath {
    fill: var(--hero-color);
}

.fs-badge-symbol {
    font-size: clamp(18px, 3vw, 28px);
}

/* Rotate only the ring (text) continuously */
.hero-badge-svg {
    animation: hero-badge-spin 14s linear infinite;
    transform-origin: 50% 50%;
    will-change: transform;
    backface-visibility: hidden;
}

@keyframes hero-badge-spin {
    from {
        transform: rotate(0deg) translateZ(0);
    }

    to {
        transform: rotate(360deg) translateZ(0);
    }
}

/* Static company logo centered inside the badge (does not rotate) */
.hero-badge-logo {
    width: 42%;
    height: auto;
    pointer-events: none;
}

/* =======================
Contact Modal
======================= */
.contact-modal .modal-content {
    border: none;
    border-radius: 18px;
    overflow: hidden;
}

.contact-modal .modal-header {
    background: var(--bg-color);
    padding: 30px 32px 22px;
    border: none;
    align-items: flex-start;
}

.contact-modal .modal-header .eyebrow { color: var(--gold); }

.contact-modal .modal-header .modal-title {
    color: var(--text-white);
    font-weight: 700;
    margin: 6px 0 4px;
    font-size: clamp(20px, 3vw, 28px);
}

.contact-modal .modal-header p {
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 0;
    font-size: 14px;
}

.contact-modal .modal-header .btn-close {
    filter: invert(1) grayscale(1) brightness(2);
}

.contact-modal .modal-body {
    padding: 30px 32px 32px;
}

.contact-modal .form-label {
    font-weight: 600;
    color: var(--bg-color);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.contact-modal .form-control {
    border-radius: 10px;
    border: 1px solid rgba(13, 37, 71, 0.15);
    padding: 10px 14px;
    font-size: 15px;
}

.contact-modal .form-control:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 0.2rem rgba(171, 138, 87, 0.25);
}

.contact-modal .modal-footer {
    border: none;
    padding: 0;
    gap: 10px;
}

.contact-form-status {
    min-height: 1.4em;
    font-size: 14px;
}

.contact-modal .btn-gold {
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.contact-modal .btn-gold:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* =======================
Footer
======================= */
.arrow-footer {
    max-width: 80px;
}

/* Footer logo — was missing a default size, so it rendered at its native
   701x230px on desktop/tablet (only phones under 576px had a max-width). */
.logo-foote {
    max-width: 220px;
    width: 100%;
    height: auto;
}

.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-horizontal.swiper-pagination-bullets {
    top: 91% !important;
}

/* =======================
Spacing
======================= */
.margin-custom {
    margin-top: 140px !important;
}

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

    .about-columns {
        display: flex;
        flex-direction: column !important;
        align-items: center !important;
        gap: 30px !important;
    }

    .about-divider {
        width: 60% !important;
        height: 1px !important;
    }


}

@media (max-width: 576px) {

    .arrow-footer {
        max-width: 50px;
    }

    .logo-foote {
        max-width: 150px;
    }

    footer ul {
        display: flex;
        justify-content: space-around;
        padding: 0;
    }

    .collection-logo {
        max-width: 130px !important;
    }

    .title-Collections,
    .margin-custom {
        margin-top: 0px !important;
    }
}
/* Responsive interactive journey embed: preserve the native 16:9 video ratio
   on phones, tablets and desktops, including the iframe used on the homepage. */
.video-wrapper {
    width: 100%;
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
}

.video-wrapper > iframe#heroJourney {
    display: block;
    width: 100%;
    height: 100% !important;
    min-height: 0;
    border: 0;
    vertical-align: top;
}

/* Remove the Runable watermark from the exported journey application. */
[data-runable-badge],
[data-runable-root] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}


/* Product cards and details modal */
.product-grid{row-gap:3.25rem!important}.product-card{position:relative}.product-card-button{display:block;width:100%;padding:0;border:0;background:transparent;text-align:inherit;cursor:pointer}.product-card-media{position:relative;display:block;overflow:hidden;aspect-ratio:1/1.08;border:1px solid rgba(13,37,71,.14);background:linear-gradient(145deg,#f7f8f7,#e9eeec);box-shadow:0 12px 28px rgba(13,37,71,.08);transition:transform .25s ease,box-shadow .25s ease}.product-card-button:hover .product-card-media,.product-card-button:focus-visible .product-card-media{transform:translateY(-6px);box-shadow:0 20px 38px rgba(13,37,71,.16)}.product-card-button:focus-visible{outline:3px solid var(--gold);outline-offset:5px}.product-card-media:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 48%,rgba(13,37,71,.55));opacity:.35;transition:opacity .25s ease}.product-card-button:hover .product-card-media:after,.product-card-button:focus-visible .product-card-media:after{opacity:.85}.collection-card-img{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;transition:transform .45s ease}.product-card-button:hover .collection-card-img,.product-card-button:focus-visible .collection-card-img{transform:scale(1.05)}.product-card-overlay{position:absolute;z-index:1;inset:auto 18px 18px;display:flex;align-items:center;justify-content:space-between;color:#fff;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;opacity:0;transform:translateY(8px);transition:opacity .25s ease,transform .25s ease}.product-card-button:hover .product-card-overlay,.product-card-button:focus-visible .product-card-overlay{opacity:1;transform:translateY(0)}.product-card-overlay i{font-size:18px}.collection-meta{padding:0 4px}.product-card-kicker{color:var(--gold);font-size:11px;font-weight:700;letter-spacing:.14em;margin-bottom:7px}.collection-meta h3{color:var(--bg-color);letter-spacing:.03em}.product-details-modal .modal-content{border:0;border-radius:0;overflow:hidden;box-shadow:0 24px 70px rgba(13,37,71,.28)}.product-modal-layout{display:grid;grid-template-columns:minmax(260px,43%) 1fr;min-height:410px}.product-modal-image-wrap{background:#edf1ef;min-height:410px}.product-modal-image-wrap img{width:100%;height:100%;object-fit:cover;display:block}.product-modal-copy{position:relative;display:flex;flex-direction:column;justify-content:center;padding:52px clamp(24px,5vw,58px)}.product-modal-copy .eyebrow{color:var(--gold);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}.product-modal-copy h2{color:var(--bg-color);font-size:clamp(25px,3vw,38px);line-height:1.08;margin:13px 0 12px}.product-modal-subtitle{color:var(--gold);font-size:16px;font-weight:600;line-height:1.5;margin-bottom:14px}.product-modal-detail{color:#596574;font-size:15px;line-height:1.8;margin-bottom:20px}.product-modal-rule{width:54px;height:3px;background:var(--gold);margin-bottom:17px}.product-modal-note{color:#7a8490;font-size:12px;margin:0}.product-modal-close{position:absolute;z-index:3;top:18px;right:18px;padding:10px;background-color:rgba(255,255,255,.8);border-radius:50%;opacity:.85}.product-details-modal[dir=rtl] .product-modal-close{right:auto;left:18px}.product-details-modal[dir=rtl] .product-modal-copy{text-align:right}@media(max-width:767.98px){.product-grid{row-gap:2.1rem!important}.product-card-media{aspect-ratio:1/1.12}.product-card-overlay{inset:auto 10px 10px;font-size:9px}.product-modal-layout{grid-template-columns:1fr}.product-modal-image-wrap{min-height:230px;max-height:280px}.product-modal-copy{padding:30px 24px 34px}}

/* ===== Zintra footer social dock (flip icons) ===== */
.zintra-social-dock {
    direction: ltr;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 16px 20px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 18px;
    backdrop-filter: blur(10px);
}

.zintra-letter {
    position: relative;
    display: block;
    width: 54px;
    height: 54px;
    perspective: 800px;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

.zintra-flip,
.zintra-front,
.zintra-back,
.zintra-tooltip {
    pointer-events: none;
}

.zintra-flip {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform .65s cubic-bezier(.2, .8, .2, 1);
}

.zintra-letter:hover .zintra-flip {
    transform: rotateY(180deg);
}

.zintra-front,
.zintra-back {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    backface-visibility: hidden;
}

.zintra-front {
    color: var(--text-white);
    font-size: 20px;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(200, 172, 122, .35);
}

.zintra-back {
    transform: rotateY(180deg);
    background: rgba(171, 138, 87, .18);
    border: 1px solid var(--gold);
    color: var(--gold-light);
    font-size: 20px;
}

.zintra-letter:hover .zintra-back {
    box-shadow: 0 0 18px rgba(171, 138, 87, .5);
}

.zintra-tooltip {
    position: absolute;
    left: 50%;
    bottom: -40px;
    transform: translateX(-50%) translateY(-8px);
    padding: 6px 12px;
    background: var(--text-white);
    color: var(--navy-dark);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: .3s ease;
    z-index: 20;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .3);
}

.zintra-letter:hover .zintra-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

@media (max-width: 767.98px) {
    .zintra-social-dock {
        gap: 6px;
        padding: 12px;
    }

    .zintra-letter {
        width: 44px;
        height: 44px;
    }

    .zintra-front,
    .zintra-back {
        font-size: 16px;
    }
}


/* =======================
Buttons — pill shape with a rising fill on hover
======================= */
.btn.btn-gold,
.btn.custom-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    overflow: hidden;
    isolation: isolate;
    border-radius: 999px !important;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: transform .3s ease, box-shadow .3s ease, color .3s ease, border-color .3s ease !important;
}
.btn.btn-gold::before,
.btn.custom-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--navy);
    transform: translateY(101%);
    border-radius: inherit;
    transition: transform .4s cubic-bezier(.4, 0, .2, 1) !important;
}
.btn.btn-gold:hover::before,
.btn.btn-gold:focus-visible::before,
.btn.custom-btn:hover::before,
.btn.custom-btn:focus-visible::before { transform: translateY(0); }

.btn.btn-gold {
    padding: 14px 42px;
    border: 0;
    background: linear-gradient(135deg, var(--gold-light), var(--gold));
    color: #fff !important;
    box-shadow: 0 10px 24px rgba(171, 138, 87, 0.35);
}
.btn.btn-gold:hover,
.btn.btn-gold:focus-visible {
    background: linear-gradient(135deg, var(--gold-light), var(--gold));
    color: #fff !important;
    transform: translateY(-3px);
    box-shadow: 0 16px 32px rgba(13, 37, 71, 0.25);
}

.btn.custom-btn {
    padding: 14px clamp(32px, 5vw, 64px);
    border: 1.5px solid var(--navy);
    background: transparent;
    color: var(--navy);
}
.btn.custom-btn:hover,
.btn.custom-btn:focus-visible {
    background: transparent;
    color: #fff !important;
    border-color: var(--navy);
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(13, 37, 71, 0.2);
}
.btn.btn-gold:focus-visible,
.btn.custom-btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* product cards are buttons too: soften the square corners */
.product-card-media { border-radius: 20px; }

/* =======================
Animated "Send Message" button (contact modal)
======================= */
.contact-modal .modal-footer {
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    padding-top: 6px;
}

.send-stage {
    all: unset;
    box-sizing: border-box;
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns: 240px;
    grid-template-rows: 76px;
    place-items: center;
    direction: ltr;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
}
.send-stage > * { grid-area: 1 / 1; }
.send-stage:focus-visible .send-pill { outline: 3px solid var(--gold); outline-offset: 4px; }
.send-stage.is-sending,
.send-stage.is-playing { cursor: default; }

.send-body { display: grid; place-items: center; z-index: 2; }

.send-pill {
    position: relative;
    overflow: hidden;
    display: grid;
    place-items: center;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    width: 220px;
    height: 58px;
    border-radius: 29px;
    background: linear-gradient(135deg, var(--gold-light), var(--gold));
    box-shadow: 0 10px 24px rgba(171, 138, 87, 0.4);
    transition: box-shadow .3s ease, transform .3s ease;
}
.send-stage:not(.is-sending):not(.is-playing):hover .send-pill {
    box-shadow: 0 16px 32px rgba(13, 37, 71, 0.28);
    transform: translateY(-3px);
}

.send-label {
    grid-area: 1 / 1;
    margin-left: 38px;
    white-space: nowrap;
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.send-check { grid-area: 1 / 1; width: 38px; height: 38px; opacity: 0; }
.send-check path {
    fill: none;
    stroke: #fff;
    stroke-width: 3.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.send-ripple {
    position: absolute;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    pointer-events: none;
    opacity: 0;
}

.send-plane,
.send-plane-back { z-index: 3; pointer-events: none; }
.send-plane { width: 28px; height: 28px; color: #fff; transform: translate(-84px, 0); }
.send-plane-back { width: 44px; height: 44px; color: var(--navy); opacity: 0; }
.send-plane path,
.send-plane-back path {
    fill: currentColor;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linejoin: round;
}
.send-plane-back .crease {
    fill: none;
    stroke: #fff;
    stroke-opacity: .6;
    stroke-width: 1.4;
    stroke-linecap: round;
}

.send-arc {
    width: 170px;
    height: 170px;
    fill: none;
    stroke: var(--gold);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 90 312;
    opacity: 0;
    z-index: 0;
    pointer-events: none;
}

.send-sent {
    display: grid;
    place-items: center;
    z-index: 1;
    width: 170px;
    height: 52px;
    border-radius: 26px;
    background: var(--surface-color);
    border: 1px solid rgba(171, 138, 87, 0.45);
    box-shadow: 0 8px 20px rgba(13, 37, 71, 0.1);
    transform-origin: left center;
    transform: translateX(19px) scale(0);
}
.send-sent span {
    opacity: 0;
    padding-left: 38px;
    color: var(--navy);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .5px;
    white-space: nowrap;
}

/* while the request is in flight the plane bobs, waiting for the server */
.send-stage.is-sending .send-plane { animation: sendBob .8s ease-in-out infinite; }
@keyframes sendBob {
    0%, 100% { transform: translate(-84px, 0); }
    50%      { transform: translate(-78px, -4px); }
}
@media (prefers-reduced-motion: reduce) {
    .send-stage.is-sending .send-plane { animation: none; }
}

@media (max-width: 575.98px) {
    .contact-modal .modal-body { padding: 24px 20px 26px; }
    .contact-modal .modal-footer { justify-content: center; }
    .contact-modal .modal-footer .btn.custom-btn { padding-left: 28px; padding-right: 28px; }
}


/* =======================
Mobile polish — readable type, no overlaps, tidy stacking
======================= */
.vision-copy .fs-20 { text-wrap: pretty; }

@media (max-width: 767.98px) {
    html, body { overflow-x: hidden; }
    .container { --bs-gutter-x: 2.25rem; }

    /* readable type: the fluid sizes were dropping to 10px on phones */
    .fs-11 { font-size: 13px; }
    .fs-14 { font-size: 14px; }
    .fs-17 { font-size: 16px; }
    .fs-18 { font-size: 15px; line-height: 1.7; }
    .fs-20 { font-size: 16px; line-height: 1.8; }
    .fs-25 { font-size: 18px; }
    .fs-28 { font-size: 20px; }
    .fs-60 { font-size: clamp(26px, 8vw, 34px); }
    .fs-68 { font-size: clamp(24px, 7vw, 32px); }
    .eyebrow { font-size: 12px; letter-spacing: 2.5px; }
    .stat-box p { font-size: 12px; line-height: 1.5; }
    .text-justify { text-align: start; }
    p { overflow-wrap: anywhere; }

    /* Vision: rotating-text badge sits above the copy, big enough to read */
    #vision { text-align: center; }
    #vision .eyebrow { margin-bottom: 12px !important; }
    #vision .hero-badge { width: min(190px, 54vw) !important; }
    .fs-badge-text { font-size: 14px; }
    .vision-copy { align-items: center; }
    #vision { margin-top: 2.5rem; margin-bottom: 1rem; }
    #products > .text-center { margin-top: 1.25rem; }

    /* Products */
    .title-Collections .d-flex { flex-wrap: nowrap; gap: 12px !important; }
    .title-Collections h1 { letter-spacing: 1px !important; }
    .collection-logo { max-width: 44px !important; height: auto; flex: 0 0 auto; }
    .collection-item.product-card { height: auto; }
    .collection-card.product-card-button { height: auto; }
    .product-card-kicker { font-size: 11px; }
    .collection-meta h3 { line-height: 1.35; }
    .collection-meta p { line-height: 1.5; }
    .product-grid { row-gap: 1.75rem !important; }
    .product-card-media { border-radius: 16px; }

    /* Services: caption sits under the picture instead of covering it */
    .mySwiper .overlay-slider {
        position: static !important;
        background: var(--navy);
        padding: 14px 16px !important;
    }
    .mySwiper .swiper-slide { height: auto; display: flex; flex-direction: column; }
    .mySwiper .swiper-slide img { flex: 0 0 auto; }
    .mySwiper .overlay-slider h2 { line-height: 1.35; }
    .mySwiper .overlay-slider p { line-height: 1.6; }

    /* Contact cards */
    .info-card { padding: 24px 20px; }
    .info-icon { width: 54px; height: 54px; margin-bottom: 12px; }
    .info-icon i { font-size: 22px; }
    #contact h1 { letter-spacing: 1px !important; }

    /* Footer */
    footer ul, FOOter ul { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 20px; padding: 0; margin: 0; }
    footer ul li:first-child, FOOter ul li:first-child { grid-column: 1 / -1; }
    footer ul li, FOOter ul li { line-height: 1.5; padding-top: 10px; padding-bottom: 10px; }
    footer ul .nav-link, FOOter ul .nav-link { padding: 0; display: block; margin-bottom: 4px !important; }
    footer small, FOOter small { display: inline-block; line-height: 1.55; }

    /* Contact modal */
    .contact-modal .modal-header { padding: 22px 20px 16px; }
    .contact-modal .modal-body { padding: 22px 20px; }
    .contact-modal .modal-footer { flex-direction: column-reverse; align-items: center; gap: 10px; }
}

@media (max-width: 380px) {
    .zintra-letter { width: 40px; height: 40px; }
    .zintra-social-dock { gap: 4px; padding: 10px; }
    .stat-box h3 { font-size: 28px; }
}

/* =======================
Hero "Our Journey" — native phone / tablet version (< 992px)
The 16:9 interactive embed is kept for desktop only.
======================= */
.jm { display: none; }

@media (max-width: 991.98px) {
    .video-wrapper { display: none !important; }

    .jm {
        display: block;
        position: relative;
        overflow: hidden;
        padding: 30px 0 30px;
        background: linear-gradient(180deg, #fcf8ee 0%, #f4ebd6 52%, #eadfc3 100%);
        color: var(--navy);
    }
    .jm *, .jm *::before, .jm *::after { transition: none; }
    /* double gold frame, like the desktop journey screen */
    .jm::before, .jm::after {
        content: "";
        position: absolute;
        pointer-events: none;
        border-radius: 8px;
    }
    .jm::before { inset: 10px; border: 1px solid rgba(171, 138, 87, .55); }
    .jm::after  { inset: 15px; border: 1px solid rgba(171, 138, 87, .2); }

    .jm-inner { position: relative; z-index: 1; max-width: 600px; margin: 0 auto; padding: 0 28px; }

    /* header */
    .jm-head { display: flex; flex-direction: column; align-items: center; gap: 10px; }
    .jm-tag {
        display: flex; align-items: center; justify-content: center; gap: 10px;
        font-size: clamp(9px, 2.6vw, 10.5px); font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
        color: #9c7a2c; text-align: center; white-space: nowrap;
    }
    html[dir="rtl"] .jm-tag { letter-spacing: 0; font-size: 13px; }
    .jm-line { flex: 0 1 22px; min-width: 8px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
    .jm-line:last-child { background: linear-gradient(270deg, transparent, var(--gold)); }

    /* intro */
    .jm-intro { margin-top: 22px; text-align: center; }
    .jm-title { margin: 0; line-height: 1.12; text-transform: uppercase; }
    .jm-kick {
        display: block;
        font-size: clamp(24px, 7.4vw, 36px);
        font-weight: 300;
        letter-spacing: .14em;
        color: var(--navy);
    }
    .jm-gold {
        display: block;
        margin-top: 2px;
        font-size: clamp(28px, 8.8vw, 42px);
        font-weight: 700;
        letter-spacing: .08em;
        background: linear-gradient(100deg, #8f6f3f 0%, #c9a24c 45%, #a98446 100%);
        -webkit-background-clip: text; background-clip: text;
        -webkit-text-fill-color: transparent; color: transparent;
    }
    html[dir="rtl"] .jm-kick, html[dir="rtl"] .jm-gold { letter-spacing: 0; }
    .jm-lead { margin: 14px auto 0; max-width: 36ch; font-size: 14.5px; line-height: 1.75; color: #566273; }
    .jm-accent { margin: 10px 0 0; font-size: 14px; font-weight: 600; color: #9c7a2c; }

    /* map + chapter card */
    .jm-stage { position: relative; margin-top: 22px; }
    .jm-map {
        position: relative;
        aspect-ratio: 900 / 702;
        overflow: hidden;
        border-radius: 22px;
        border: 1px solid rgba(171, 138, 87, .45);
        background: #efe4c9;
        box-shadow: 0 16px 34px rgba(13, 37, 71, .12);
    }
    .jm-map::after {
        content: ""; position: absolute; inset: 0; pointer-events: none;
        background: linear-gradient(180deg, rgba(252, 248, 238, .0) 55%, rgba(244, 235, 214, .9) 100%);
    }
    .jm-img {
        position: absolute; inset: 0; width: 100%; height: 100%;
        object-fit: cover; opacity: 0; transform: scale(1.02);
        transition: opacity .9s ease, transform 9s ease-out;
    }
    .jm-img.is-active { opacity: 1; transform: scale(1.08); }

    .jm-card {
        position: relative;
        z-index: 2;
        width: calc(100% - 28px);
        margin: -74px auto 0;
        padding: 18px 20px 20px;
        border-radius: 20px;
        background: rgba(255, 253, 247, .92);
        -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
        border: 1px solid rgba(171, 138, 87, .4);
        box-shadow: 0 18px 38px rgba(13, 37, 71, .16);
    }
    .jm-card.is-swap { animation: jmIn .55s cubic-bezier(.22, .61, .36, 1); }
    @keyframes jmIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

    .jm-card-top { display: flex; align-items: center; gap: 12px; }
    .jm-badge {
        flex: 0 0 auto; display: grid; place-items: center;
        width: 42px; height: 42px; border-radius: 50%;
        background: linear-gradient(145deg, var(--gold-light), var(--gold));
        box-shadow: 0 6px 14px rgba(171, 138, 87, .45), inset 0 0 0 3px rgba(255, 255, 255, .35);
        color: #fff; font-size: 19px;
    }
    .jm-count { font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: #9c7a2c; }
    html[dir="rtl"] .jm-count { letter-spacing: 0; font-size: 13px; }
    .jm-year { margin-top: 12px; font-size: 32px; line-height: 1.1; font-weight: 300; letter-spacing: .02em; color: var(--navy); }
    .jm-rule { display: block; width: 56px; height: 1px; margin: 10px 0 12px; background: linear-gradient(90deg, var(--gold), transparent); }
    html[dir="rtl"] .jm-rule { background: linear-gradient(270deg, var(--gold), transparent); }
    .jm-ctitle { margin: 0; font-size: 14.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #9c7a2c; line-height: 1.4; }
    html[dir="rtl"] .jm-ctitle { letter-spacing: 0; font-size: 17px; }
    .jm-body { margin: 8px 0 0; font-size: 14px; line-height: 1.75; color: #566273; }

    /* controls */
    .jm-controls { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
    .jm-btn {
        flex: 0 0 auto; display: grid; place-items: center;
        width: 42px; height: 42px; padding: 0; border-radius: 50%;
        background: #fff; border: 1px solid rgba(171, 138, 87, .55);
        color: var(--navy); font-size: 16px; cursor: pointer;
        box-shadow: 0 4px 12px rgba(13, 37, 71, .08);
        -webkit-tap-highlight-color: transparent;
    }
    .jm-btn:active { transform: scale(.94); }
    .jm-toggle {
        width: 46px; height: 46px; border: 0; color: #fff; font-size: 20px;
        background: linear-gradient(145deg, var(--gold-light), var(--gold));
        box-shadow: 0 8px 18px rgba(171, 138, 87, .45);
    }
    html[dir="rtl"] .jm-prev i, html[dir="rtl"] .jm-next i { transform: scaleX(-1); }
    .jm-btn:focus-visible, .jm-chip:focus-visible, .jm-seg:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

    .jm-progress { flex: 1 1 auto; display: flex; gap: 5px; min-width: 0; }
    .jm-seg {
        flex: 1 1 0; min-width: 0; height: 28px; padding: 12px 0; border: 0;
        background: none; cursor: pointer; position: relative;
    }
    .jm-seg span {
        display: block; width: 100%; height: 4px; border-radius: 4px;
        background: rgba(171, 138, 87, .28); position: relative; overflow: hidden;
    }
    .jm-seg span::after {
        content: ""; position: absolute; inset: 0; border-radius: inherit;
        background: linear-gradient(90deg, var(--gold-light), var(--gold));
        transform: scaleX(0); transform-origin: left center;
    }
    html[dir="rtl"] .jm-seg span::after { transform-origin: right center; }
    .jm-seg.is-done span::after { transform: scaleX(1); }
    .jm-seg.is-current span::after { animation: jmFill var(--dur, 7s) linear forwards; }
    @keyframes jmFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
    .jm.is-paused .jm-seg.is-current span::after,
    .jm.is-idle .jm-seg.is-current span::after { animation-play-state: paused; }

    /* timeline (scrolls sideways) */
    .jm-timeline {
        display: flex; gap: 8px; margin: 16px -28px 0; padding: 6px 28px 10px;
        list-style: none; overflow-x: auto; scroll-snap-type: x proximity;
        scrollbar-width: none; -webkit-overflow-scrolling: touch;
    }
    .jm-timeline::-webkit-scrollbar { display: none; }
    .jm-timeline li { flex: 0 0 92px; position: relative; scroll-snap-align: center; }
    .jm-timeline li::before {
        content: ""; position: absolute; top: 29px; left: -4px; right: -4px; height: 1px;
        background: rgba(171, 138, 87, .4);
    }
    .jm-chip {
        position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px;
        padding: 0; border: 0; background: none; cursor: pointer; text-align: center;
        font-family: inherit; -webkit-tap-highlight-color: transparent;
    }
    .jm-chip-ico {
        display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
        background: #fffdf7; border: 1px solid rgba(171, 138, 87, .55);
        color: #9c7a2c; font-size: 19px; box-shadow: 0 4px 12px rgba(13, 37, 71, .08);
        transition: background .3s ease, color .3s ease, transform .3s ease, box-shadow .3s ease;
    }
    .jm-chip.is-active .jm-chip-ico {
        background: linear-gradient(145deg, var(--gold-light), var(--gold));
        color: #fff; border-color: transparent; transform: scale(1.12);
        box-shadow: 0 10px 20px rgba(171, 138, 87, .5);
    }
    .jm-chip-year { margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--navy); line-height: 1.2; }
    .jm-chip-title {
        font-size: 9.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
        color: #a58a58; line-height: 1.35;
        display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    }
    html[dir="rtl"] .jm-chip-title { letter-spacing: 0; font-size: 11.5px; }
    .jm-chip:not(.is-active) .jm-chip-year { opacity: .75; }

    /* values */
    .jm-values {
        display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px;
        margin: 14px 0 0; padding: 16px 0 0; list-style: none;
        border-top: 1px solid rgba(171, 138, 87, .35);
    }
    .jm-values li { display: flex; align-items: center; gap: 9px; min-width: 0; }
    .jm-values i { flex: 0 0 auto; font-size: 18px; color: var(--gold); }
    .jm-values span { font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--navy); line-height: 1.35; }
    html[dir="rtl"] .jm-values span { letter-spacing: 0; font-size: 12.5px; }
}

/* tablets: a bit more air */
@media (min-width: 640px) and (max-width: 991.98px) {
    .jm-inner { padding: 0 40px; }
    .jm-lead { font-size: 16px; }
    .jm-body { font-size: 15px; }
    .jm-year { font-size: 38px; }
    .jm-values { grid-template-columns: repeat(4, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    .jm-img, .jm-img.is-active { transition: opacity .3s ease; transform: none; }
    .jm-card.is-swap { animation: none; }
}


/* =======================
Floating nav — icons beside each link
======================= */
.nv-cs-i i {
    flex: 0 0 auto;
    font-size: 15px;
    line-height: 1;
    color: rgba(171, 138, 87, .85);
    transition: color .3s ease, transform .35s cubic-bezier(.34, 1.56, .64, 1) !important;
}
.nv-cs-i:hover i,
.nv-cs-i:focus-visible i { color: var(--gold); transform: translateY(-2px) scale(1.18); }
.nv-cs-i.active i { color: #8f6f3f; transform: scale(1.12); }

/* medium screens: tighten so the pill never overflows */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .nv-cs-brand img { height: 38px; }
    .nv-cs-menu { margin-inline-start: 18px; gap: 10px; }
    .nv-cs-links { gap: 0; }
    .nv-cs-i { padding: 10px 9px; font-size: 12.5px; gap: 6px; }
    .nv-cs-i i { font-size: 14px; }
    .nv-cs-actions { gap: 4px; }
    .nv-cs .lang-switch { font-size: 12px; padding-right: 12px; }
    html[dir="rtl"] .nv-cs .lang-switch { padding-right: 5px; padding-left: 12px; }
}

/* phone menu: icon in a soft rounded tile */
@media (max-width: 991.98px) {
    .nv-cs-i { gap: 14px; }
    .nv-cs-i i {
        display: inline-grid; place-items: center;
        width: 34px; height: 34px; border-radius: 11px;
        background: rgba(171, 138, 87, .14);
        font-size: 17px; color: #9c7a2c;
    }
    .nv-cs-i:hover i, .nv-cs-i:focus-visible i { transform: none; background: rgba(171, 138, 87, .24); }
    .nv-cs-i.active i { transform: none; color: #fff; background: linear-gradient(145deg, var(--gold-light), var(--gold)); }
}

/* Floating navigation: keep the brand and desktop links on one balanced row. */
@media (min-width: 992px) {
    .nv-cs,
    html[dir="rtl"] .nv-cs {
        width: min(1440px, calc(100% - 32px));
        flex-wrap: nowrap;
        gap: clamp(10px, 1vw, 18px);
        padding-inline: clamp(12px, 1.3vw, 20px);
    }
    .nv-cs-brand { flex: 0 0 auto; }
    .nv-cs-brand img { height: clamp(32px, 2.6vw, 40px); width: auto; }
    .nv-cs.navbar-shrink .nv-cs-brand img { height: clamp(30px, 2.4vw, 36px); }
    .nv-cs-menu {
        flex: 1 1 0%;
        min-width: 0;
        margin-inline-start: 0;
        gap: clamp(6px, .7vw, 12px);
    }
    .nv-cs-links {
        flex: 1 1 auto;
        justify-content: center;
        margin: 0;
        gap: clamp(0px, .25vw, 4px);
    }
    .nv-cs-links > li { flex: 0 0 auto; }
    .nv-cs-i {
        padding: 11px clamp(6px, .7vw, 12px);
        font-size: clamp(12px, .88vw, 13.5px);
        letter-spacing: 0;
        gap: 6px;
    }
    .nv-cs-i i { font-size: 14px; }
    .nv-cs-actions { flex: 0 0 auto; gap: 6px; }
    .nv-cs .lang-switch { white-space: nowrap; font-size: 12px; gap: 6px; }
    .nv-spacer { height: 96px; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
    .nv-cs-links .nv-cs-i i { display: none; }
    .nv-cs-i { padding-inline: 5px; }
    .nv-cs-actions { gap: 4px; }
}
/* Keep mobile actions reachable when the menu opens on a short screen. */
@media (max-width: 991.98px) {
    .nv-cs.is-open .nv-cs-menu {
        max-height: min(620px, calc(100dvh - 112px));
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}