/* ──────────────────────────────────────────
   1. CSS TOKENS
────────────────────────────────────────── */
:root {
    /* brand */
    --gold: #c9a435;
    --gold-lt: #e0bb55;
    --gold-dk: #a07a20;
    --gold-bg: rgba(201, 164, 53, 0.1);
    --gold-sh: 0 8px 32px rgba(201, 164, 53, 0.3);

    /* neutrals */
    --navy: #1a2e4a;
    --navy-dk: #0f1925;
    --white: #ffffff;
    --off-white: #f8f5ec;
    --light-bg: #faf8f2;
    --gray-100: #f5f5f5;
    --gray-200: #e5e3dc;
    --gray-300: #d0cec6;
    --gray-400: #aaa9a2;
    --gray-500: #888882;
    --gray-600: #666660;
    --gray-700: #444440;
    --gray-800: #333330;
    --text: #1e1e1c;

    /* spacing & shape */
    --radius: 8px;
    --radius-lg: 14px;
    --radius-xl: 20px;

    /* shadows */
    --sh-sm: 0 2px 10px rgba(0, 0, 0, 0.07);
    --sh: 0 6px 24px rgba(0, 0, 0, 0.11);
    --sh-lg: 0 16px 52px rgba(0, 0, 0, 0.17);
    --shadow: 0 6px 24px rgba(0, 0, 0, 0.11);
    --shadow-lg: 0 16px 52px rgba(0, 0, 0, 0.17);

    /* accent */
    --green: #2d7a4f;

    /* transitions */
    --ease: 0.26s ease;
}

/* ──────────────────────────────────────────
   2. RESET & BASE
────────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: "Poppins", "Segoe UI", Arial, sans-serif;
    line-height: 1.7;
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--ease);
}
a:hover {
    text-decoration: none;
}

img {
    max-width: 100%;
    display: block;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

p {
    margin-bottom: 1rem;
}
p:last-child {
    margin-bottom: 0;
}

/* ──────────────────────────────────────────
   3. TYPOGRAPHY
────────────────────────────────────────── */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Lato", Arial, sans-serif;
    font-weight: 800;
    line-height: 1.2;
    color: var(--navy);
}

h1 {
    font-size: clamp(2.2rem, 5vw, 3.8rem);
}
h2 {
    font-size: clamp(1.7rem, 3.5vw, 2.6rem);
}
h3 {
    font-size: clamp(1.2rem, 2.5vw, 1.7rem);
}
h4 {
    font-size: 1.1rem;
    font-weight: 700;
}
h5 {
    font-size: 0.95rem;
    font-weight: 700;
}

.text-gold {
    color: var(--gold) !important;
}
.text-white {
    color: var(--white) !important;
}
.text-navy {
    color: var(--navy) !important;
}

/* ──────────────────────────────────────────
   4. SHARED SECTION UTILITIES
────────────────────────────────────────── */
.section {
    padding: 2.5rem 0;
}
.section-alt {
    background: var(--off-white);
}
.section-dark {
    background: #f0f3f8;
    color: var(--text);
}

/* gold divider bar */
.gold-divider,
.divider {
    width: 56px;
    height: 4px;
    background: linear-gradient(90deg, var(--gold), var(--gold-lt));
    border-radius: 2px;
    margin: 0.8rem auto;
}
.divider-left,
.gold-divider-left {
    margin-left: 0;
}

/* section heading / subtitle */
.section-title {
    color: var(--navy);
    margin-bottom: 0.4rem;
}
.section-subtitle {
    color: var(--gray-400);
    font-size: 1rem;
    max-width: 640px;
    margin: 0 auto !important;
}

/* ──────────────────────────────────────────
   5. SHARED BUTTON CLASSES
────────────────────────────────────────── */

.btn-outline-navy {
    display: inline-flex;
    background: transparent;
    color: var(--navy);
    padding: 0.2rem 2rem;
    border-radius: var(--radius);
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    border: 2px solid var(--navy);
    transition: all var(--ease);
    white-space: nowrap;
    justify-content:center;
    align-items:center;
}
.btn-outline-navy:hover {
    background: var(--navy);
    color: var(--white);
}

/* ── Inner page button aliases (used in sector pages) ── */

.btn-primary {
    background: linear-gradient(135deg, var(--gold), var(--gold-dk));
    color: #fff;
    border-color: transparent;
    display:inline-flex;
    justify-content:center;
    align-items:center;
}
.btn-primary:hover {
    background: linear-gradient(135deg, var(--gold-lt), var(--gold));
    transform: translateY(-2px);
    box-shadow: var(--gold-sh);
    color: var(--navy-dk);
}
.btn-outline {
    background: transparent;
    color: var(--white);
    border-color: rgba(255, 255, 255, 0.7);
}
.btn-outline:hover {
    background: var(--white);
    color: var(--navy);
}
.btn-sm {
    padding: 0.45rem 1.2rem;
    font-size: 0.82rem;
}

/* ──────────────────────────────────────────
   6. NAVBAR — modern 2026
────────────────────────────────────────── */
.ddk-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 0;
    background: #000;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 2px 16px rgba(0,0,0,0.5);
}

/* Push content below fixed header — applied to first section so hero bg covers the gap */
#main-content > section:first-child {
    padding-top: 108px;
}
.ddk-navbar.ddk-nav-scrolled {
    box-shadow: 0 4px 32px rgba(0, 0, 0, 0.7);
}

.ddk-navbar {
    width: 100%;
}

.ddk-nav-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.75rem;
    height: 108px;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    position: relative;
}

/* Logo — left */
.ddk-brand {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    z-index: 1;
}
.ddk-logo {
    height: 100px;
    width: auto;
    object-fit: contain;
    border-radius: 6px;
}

/* Desktop nav links — flex-centered between logo and Get in Touch/burger, so long
   translated labels shrink instead of overlapping the right-side controls */
.ddk-nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1 1 auto;
    min-width: 0;
}
/* Each <li> is the actual flex item — it must be allowed to shrink below its
   text's natural width, otherwise long translated labels overflow the list
   and get visually covered by the "Get in Touch" button on the right. */
.ddk-nav-links > li {
    min-width: 0;
    flex-shrink: 1;
}

/* Individual nav link */
.ddk-nl {
    font-family: "Poppins", sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.78);
    padding: 0.4rem 0.6rem;
    border-radius: 10px;
    border: none;
    background: none;
    cursor: pointer;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition:
        color 0.18s,
        background 0.18s;
    white-space: nowrap;
    line-height: 1;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ddk-nl:hover {
    color: var(--gold);
    background: rgba(201, 164, 53, 0.1);
}
.ddk-nl--active {
    color: var(--gold);
    font-weight: 700;
    background: rgba(201, 164, 53, 0.12);
}
.ddk-nl--active:hover {
    background: rgba(201, 164, 53, 0.18);
}

/* Dropdown arrow */
.ddk-drop-arrow {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.4);
    transition: transform 0.22s;
}
.ddk-has-drop:hover .ddk-drop-arrow,
.ddk-has-drop .ddk-nl--active .ddk-drop-arrow {
    transform: rotate(180deg);
}

/* Dropdown panel */
.ddk-has-drop {
    position: relative;
}
.ddk-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    border-radius: 16px;
    box-shadow:
        0 12px 48px rgba(0, 0, 0, 0.12),
        0 2px 8px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(26, 46, 74, 0.07);
    min-width: 230px;
    padding: 0.5rem;
    padding-top: 0.75rem;
    margin-top: 0;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px) scale(0.97);
    transition:
        opacity 0.22s ease,
        transform 0.22s ease;
}
.ddk-dropdown.ddk-drop-open {
    opacity: 1;
    pointer-events: all;
    transform: translateY(0) scale(1);
}
.ddk-drop-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 0.85rem;
    border-radius: 10px;
    font-size: 0.84rem;
    font-weight: 500;
    color: var(--gray-800);
    text-decoration: none;
    transition:
        background 0.16s,
        color 0.16s;
}
.ddk-drop-item:hover {
    background: rgba(201, 164, 53, 0.1);
    color: var(--navy);
}
.ddk-drop-ico {
    width: 30px;
    height: 30px;
    background: rgba(201, 164, 53, 0.12);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c9a435;
    font-size: 0.8rem;
    flex-shrink: 0;
}

/* Right side: shop + burger — pushed to far right */
.ddk-nav-right {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-shrink: 0;
    margin-left: auto;
    z-index: 1;
}

/* Shop icon */
.ddk-shop-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    border: 1.5px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.95rem;
    text-decoration: none;
    transition: all 0.2s ease;
    position: relative;
}
.ddk-shop-icon:hover {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--navy);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(201, 164, 53, 0.35);
}
.ddk-shop-icon::after {
    content: "Coming Soon";
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--navy);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    white-space: nowrap;
    padding: 0.22rem 0.55rem;
    border-radius: 6px;
    letter-spacing: 0.04em;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s;
}
.ddk-shop-icon:hover::after {
    opacity: 1;
}

/* CTA button */
.ddk-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-family: "Poppins", sans-serif;
    font-size: 0.83rem;
    font-weight: 700;
    background: var(--navy);
    color: var(--gold);
    padding: 0.52rem 1.25rem;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.22s ease;
    white-space: nowrap;
    letter-spacing: 0.01em;
}
.ddk-cta-btn:hover {
    background: var(--gold);
    color: var(--navy);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(201, 164, 53, 0.32);
    color: var(--navy);
}
.ddk-cta-btn i {
    font-size: 0.72rem;
    transition: transform 0.2s;
}
.ddk-cta-btn:hover i {
    transform: translateX(3px);
}

/* Burger button */
.ddk-burger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
    transition: background 0.18s;
}
.ddk-burger:hover {
    background: rgba(255, 255, 255, 0.08);
}
.ddk-burger span {
    display: block;
    width: 22px;
    height: 2px;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 2px;
    transition: all 0.28s ease;
    transform-origin: center;
}
.ddk-burger--open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.ddk-burger--open span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}
.ddk-burger--open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Mobile menu */
.ddk-mobile-menu {
    display: none;
    flex-direction: column;
    padding: 0.75rem 1.5rem 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    gap: 0.2rem;
}
.ddk-mobile-menu.ddk-mob-open {
    display: flex;
}
.ddk-m-link,
.ddk-m-sector-toggle {
    font-size: 0.9rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.78);
    padding: 0.55rem 0.75rem;
    border-radius: 10px;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: none;
    background: none;
    cursor: pointer;
    font-family: inherit;
    transition:
        background 0.16s,
        color 0.16s;
    width: 100%;
}
.ddk-m-link:hover,
.ddk-m-sector-toggle:hover {
    background: rgba(255, 255, 255, 0.07);
    color: var(--gold);
}
.ddk-m-active {
    color: var(--gold);
    font-weight: 700;
    background: rgba(201, 164, 53, 0.1);
}
.ddk-m-sector-sub {
    display: none;
    padding-left: 0.75rem;
}
.ddk-m-sector-sub.ddk-m-sub-open {
    display: flex;
    flex-direction: column;
}
.ddk-m-sub-link {
    font-size: 0.84rem;
    color: rgba(255, 255, 255, 0.55);
    padding: 0.45rem 0.75rem;
    border-radius: 8px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    transition:
        background 0.15s,
        color 0.15s;
}
.ddk-m-sub-link i {
    color: var(--gold);
    width: 14px;
    text-align: center;
}
.ddk-m-sub-link:hover {
    background: rgba(201, 164, 53, 0.1);
    color: var(--gold);
}

/* Responsive */

/* Mobile collapse */

/* ══════════════════════════════════════════════════════════════
   NEW HOME PAGE  (nh-* prefix)
   Trending 2025 design — dark hero, bento grid, marquee, glass
   ══════════════════════════════════════════════════════════════ */

/* ─── NH HERO ─────────────────────────────────────────────── */
.nh-hero {
    position: relative;
    background: #000000;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.nh-hero__dots {
    display: none;
}
.nh-hero__glow {
    display: none;
}

.nh-hero__container {
    position: relative;
    z-index: 2;
}

.nh-hero__row {
    min-height: auto;
    padding: 0 0 3.5rem;
    align-items: center;
}

/* hero image column */
.nh-hero__img {
    width: 100%;
    height: 640px;
    object-fit: cover;
    border-radius: 1.25rem;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
    border: 3px solid rgba(201, 164, 53, 0.3);
    display: block;
}

/* badge pill */
.nh-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    background: rgba(201, 164, 53, 0.18);
    border: 1px solid rgba(201, 164, 53, 0.5);
    color: var(--gold);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    padding: 0.4rem 1.1rem;
    border-radius: 100px;
    margin-bottom: 1.75rem;
}
.nh-pill__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gold);
    animation: nh-blink 2s ease-in-out infinite;
}
@keyframes nh-blink {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.55;
        transform: scale(0.8);
    }
}

/* hero heading */
.nh-hero__h1 {
    font-family: "Lato", sans-serif;
    font-size: clamp(2.2rem, 5vw, 2.5rem);
    font-weight: 900;
    color:var(--white);
    line-height: 1.1;
    margin-bottom: 1.5rem;
    letter-spacing: -0.02em;
}
.nh-gold-grad {
    background: linear-gradient(90deg, #c9a435 0%, #f0c84a 50%, #c9a435 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* hero sub */
.nh-hero__sub {
    color: var(--white);
    font-size: 1rem;
    line-height: 1.8;
    max-width: 480px;
    margin: 0 0 2.5rem;
}

/* hero CTAs */
.nh-hero__ctas {
    display: flex;
    gap: 1.25rem;
    align-items: center;
    flex-wrap: wrap;
}

.nh-cta-gold {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--gold);
    color: #202020;
    font-family: "Lato", sans-serif;
    font-weight: 800;
    font-size: 0.88rem;
    letter-spacing: 0.3px;
    padding: 0.85rem 2rem;
    border-radius: 100px;
    transition: all 0.25s ease;
    white-space: nowrap;
}
.nh-cta-gold:hover {
    background: #d4af3d;
    color: #07121f;
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(201, 164, 53, 0.45);
}
.nh-arr {
    transition: transform 0.25s;
    font-size: 0.8rem;
}
.nh-cta-gold:hover .nh-arr {
    transform: translateX(4px);
}

.nh-cta-ghost {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--white);
    font-weight: 600;
    font-size: 0.88rem;
    border: 1px solid #fff;
    padding: 0.82rem 1.75rem;
    border-radius: 100px;
    transition: all 0.25s;
    text-decoration: none;
}
.nh-cta-ghost:hover {
    border-color: var(--gold);
    color: var(--gold);
    background: rgba(201, 164, 53, 0.15);
}

/* shop button */
.nh-cta-shop {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--green);
    color: var(--white);
    font-family: "Lato", sans-serif;
    font-weight: 800;
    font-size: 0.88rem;
    letter-spacing: 0.3px;
    padding: 0.85rem 2rem;
    border-radius: 100px;
    transition: all 0.25s ease;
    white-space: nowrap;
    text-decoration: none;
}
.nh-cta-shop:hover {
    background: #236040;
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(45, 122, 79, 0.4);
}

/* stats bar inside hero */
.nh-hero__statsbar {
    position: relative;
    background: var(--navy);
    border-top: 3px solid var(--gold);
    padding: 1.4rem 0;
    z-index: 3;
}
.nh-statsbar__row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}
.nh-sbar {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 2.8rem;
}
.nh-sbar strong {
    font-family: "Lato", sans-serif;
    font-size: 2rem;
    font-weight: 900;
    color: var(--gold);
    line-height: 1;
}
.nh-sbar strong sup {
    font-size: 1rem;
    vertical-align: super;
}
.nh-sbar span {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.65);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-top: 0.3rem;
    white-space: nowrap;
}
.nh-sbar-sep {
    width: 1px;
    height: 36px;
    background: rgba(255, 255, 255, 0.18);
    flex-shrink: 0;
}

/* ─── NH MARQUEE ───────────────────────────────────────────── */
.nh-marquee {
    background: var(--gold);
    overflow: hidden;
    padding: 0.8rem 0;
}
.nh-marquee__track {
    display: flex;
    width: max-content;
    animation: nh-scroll 28s linear infinite;
}
@keyframes nh-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}
.nh-marquee__group {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.nh-marquee__group span {
    font-family: "Lato", sans-serif;
    font-weight: 800;
    font-size: 0.78rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #07121f;
    padding: 0 2.2rem;
    white-space: nowrap;
}
.nh-msep {
    color: rgba(7, 18, 31, 0.35);
    font-size: 0.45rem;
    flex-shrink: 0;
}

/* ─── NH SECTORS (bento) ────────────────────────────────────── */
.nh-sectors {
    padding: 4rem 0;
    background: #fff;
}

.nh-sec-head {
    margin-bottom: 3rem;
}

.nh-sec-label {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 2.8px;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 0.7rem;
}
.nh-sec-title {
    font-family: "Lato", sans-serif;
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 900;
    color: var(--navy);
    line-height: 1.1;
    margin-bottom: 1rem;
}
.nh-text-gold {
    color: var(--gold);
}
.nh-sec-sub {
    font-size: 0.96rem;
    color: var(--gray-600);
   
    line-height: 1.75;
}

/* bento grid */
.nh-bento {
    display: grid;
    grid-template-columns: 1.35fr 1fr 1fr;
    grid-template-rows: 380px 270px;
    gap: 1rem;
}

/* card positions */
.nh-bc:nth-child(1) {
    grid-column: 1 / span 2;
    grid-row: 1;
} /* Africuisine wide */
.nh-bc:nth-child(2) {
    grid-column: 3;
    grid-row: 1;
} /* Beauty tall right */
.nh-bc:nth-child(3) {
    grid-column: 1;
    grid-row: 2;
} /* Automobile */
.nh-bc:nth-child(4) {
    grid-column: 2;
    grid-row: 2;
} /* Hospitality */
.nh-bc:nth-child(5) {
    grid-column: 3;
    grid-row: 2;
} /* Pharma */

.nh-bc {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    display: block;
    text-decoration: none;
    background: #0b1929;
    cursor: pointer;
}
.nh-bc img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition:
        transform 0.6s ease,
        filter 0.4s ease;
    filter: brightness(0.82) saturate(1.15) contrast(1.05);
}
.nh-bc:hover img {
    transform: scale(1.07);
    filter: brightness(0.6) saturate(1.2);
}
.nh-bc__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(7, 14, 27, 0.96) 0%,
        rgba(7, 14, 27, 0.35) 55%,
        transparent 100%
    );
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.5rem;
}
.nh-bc__tag {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: rgba(201, 164, 53, 0.18);
    border: 1px solid rgba(201, 164, 53, 0.38);
    color: var(--gold);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.7px;
    padding: 0.28rem 0.8rem;
    border-radius: 100px;
    text-transform: uppercase;
    backdrop-filter: blur(6px);
    width: fit-content;
}
.nh-bc__bot h3 {
    font-family: "Lato", sans-serif;
    font-size: 1.2rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 0.4rem;
}
.nh-bc__bot p {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 0.7rem;
    line-height: 1.55;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition:
        opacity 0.35s ease,
        max-height 0.4s ease;
}
.nh-bc:hover .nh-bc__bot p {
    opacity: 1;
    max-height: 80px;
}
.nh-bc__link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--gold);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.nh-bc__link i {
    transition: transform 0.25s;
    font-size: 0.7rem;
}
.nh-bc:hover .nh-bc__link i {
    transform: translateX(5px);
}

/* ─── NH ABOUT ──────────────────────────────────────────────── */
.nh-about {
    padding: 4rem 0;
    background: var(--off-white);
}
.nh-about__imgwrap {
    position: relative;
    border-radius: 20px;
    padding-bottom: 1.5rem;
    padding-right: 1.5rem;
}
.nh-about__img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.16);
    display: block;
}
.nh-about__badge {
    position: absolute;
    bottom: 0;
    right: 0;
    background: var(--gold);
    color: #07121f;
    padding: 1.25rem 1.6rem;
    border-radius: 14px;
    text-align: center;
    box-shadow: 0 12px 32px rgba(201, 164, 53, 0.42);
}
.nh-about__badge strong {
    display: block;
    font-family: "Lato", sans-serif;
    font-size: 2.1rem;
    font-weight: 900;
    line-height: 1;
}
.nh-about__badge span {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    opacity: 0.8;
    line-height: 1.4;
}
.nh-about__deco {
    position: absolute;
    top: -16px;
    left: -16px;
    width: 100px;
    height: 100px;
    border: 3px solid var(--gold);
    border-radius: 14px;
    opacity: 0.2;
    z-index: -1;
}
.nh-about__desc {
    font-size: 0.95rem;
    color: var(--gray-600);
    line-height: 1.8;
    margin-bottom: 1rem;
}
.nh-feat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem;
    margin: 1.75rem 0;
}
.nh-feat {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
}
.nh-feat__ico {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(201, 164, 53, 0.1);
    border: 1px solid rgba(201, 164, 53, 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold);
    font-size: 0.92rem;
    flex-shrink: 0;
}
.nh-feat strong {
    display: block;
    font-size: 0.87rem;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 0.2rem;
}
.nh-feat p {
    font-size: 0.78rem;
    color: var(--gray-500);
    margin: 0;
}

/* ─── ABOUT PILLARS STRIP ───────────────────────────────── */
.nh-pillars {
    background: var(--navy);
    padding: 2.5rem 0;
}
.nh-pillars__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}
.nh-pillar {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2rem 1.5rem;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.nh-pillar:last-child { border-right: none; }
.nh-pillar__ico {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(201, 164, 53, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--gold);
    margin-bottom: 1rem;
    flex-shrink: 0;
}
.nh-pillar__title {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.4rem;
}
.nh-pillar__desc {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.55);
    margin: 0;
    line-height: 1.6;
}
@media (max-width: 768px) {
    .nh-pillars__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .nh-pillar:nth-child(2) { border-right: none; }
    .nh-pillar:nth-child(1),
    .nh-pillar:nth-child(2) {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
}
@media (max-width: 480px) {
    .nh-pillars__grid { grid-template-columns: 1fr; }
    .nh-pillar { border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
    .nh-pillar:last-child { border-bottom: none; }
}

.nh-btn-navy {
    display: inline-flex;
    align-items: center;
    background: var(--navy);
    color: #fff;
    font-family: "Lato", sans-serif;
    font-weight: 700;
    font-size: 0.88rem;
    padding: 0.78rem 1.9rem;
    border-radius: 100px;
    transition: all 0.25s;
    margin-top: 0.5rem;
}
.nh-btn-navy:hover {
    background: var(--gold);
    color: #07121f;
    transform: translateY(-2px);
}

/* ─── NH WHY CHOOSE ─────────────────────────────────────────── */
.nh-why {
    padding: 4rem 0;
    background: var(--off-white);
}
.nh-why .nh-sec-title {
    max-width: 100%;
}
.nh-why .nh-sec-sub {
    color: var(--gray-500);
    margin-left: auto;
    margin-right: auto;
}
.nh-why__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 3rem;
}
.nh-why__card {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 16px;
    padding: 2rem 1.75rem;
    box-shadow: var(--sh-sm);
    transition:
        background 0.3s,
        border-color 0.3s,
        transform 0.3s,
        box-shadow 0.3s;
}
.nh-why__card:hover {
    background: rgba(201, 164, 53, 0.04);
    border-color: rgba(201, 164, 53, 0.35);
    transform: translateY(-4px);
    box-shadow: var(--sh);
}
.nh-why__icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(201, 164, 53, 0.1);
    border: 1.5px solid rgba(201, 164, 53, 0.28);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold);
    font-size: 1.15rem;
    margin-bottom: 1.2rem;
}
.nh-why__card h4 {
    font-family: "Lato", sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 0.6rem;
}
.nh-why__card p {
    font-size: 0.83rem;
    color: var(--gray-500);
    line-height: 1.65;
    margin: 0;
}

/* ─── NH PRESENCE ───────────────────────────────────────────── */
.nh-presence {
    padding: 4rem 0;
    background: var(--light-bg);
}
.nh-presence__title {
    font-family: "Lato", sans-serif;
    font-size: clamp(1.9rem, 3vw, 2.6rem);
    font-weight: 900;
    color: var(--navy);
    line-height: 1.15;
    margin-bottom: 1rem;
}
.nh-presence__bar {
    width: 42px;
    height: 3px;
    background: var(--gold);
    border-radius: 2px;
}
.nh-dotmap {
    width: 100%;
    height: auto;
}
.nh-loc {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.6rem;
}
.nh-loc__pin {
    width: 38px;
    height: 38px;
    background: rgba(201, 164, 53, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold);
    font-size: 0.88rem;
    flex-shrink: 0;
}
.nh-loc strong {
    display: block;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 0.2rem;
}
.nh-loc p {
    font-size: 0.78rem;
    color: var(--gray-600);
    margin: 0;
    line-height: 1.5;
}

.nh-presence__desc {
    font-size: 0.88rem;
    color: var(--gray-600);
    margin-top: 1rem;
    line-height: 1.7;
}
.nh-btn-arr {
    margin-left: 0.5rem;
    font-size: 0.8rem;
}

/* ─── NH CAREERS SECTION ───────────────────────────────────── */
.nh-careers {
    padding: 4.5rem 0;
    background: #f8fafc;
    border-top: 1px solid #e8edf4;
}
.nh-careers__label {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #16a34a;
    background: rgba(22,163,74,0.09);
    border: 1px solid rgba(22,163,74,0.22);
    padding: 0.28rem 0.75rem;
    border-radius: 20px;
    margin-bottom: 0.85rem;
}
.nh-careers__head { text-align: center; margin-bottom: 2.5rem; }
.nh-careers__sub {
    font-size: 0.95rem;
    color: var(--gray-500, #64748b);
    max-width: 520px;
    margin: 0.6rem auto 0;
}
.nh-job-card {
    background: #fff;
    border-radius: 16px;
    border: 1.5px solid #e2e8f0;
    border-left: 5px solid var(--gold, #c9a435);
    padding: 2rem 2.25rem;
    max-width: 860px;
    margin: 0 auto;
    box-shadow: 0 4px 24px rgba(15,37,69,0.06);
}
.nh-job-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.nh-job-card__title {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--navy, #0f2545);
    margin-bottom: 0.3rem;
    font-family: "Lato", sans-serif;
}
.nh-job-card__dept {
    font-size: 0.8rem;
    color: #64748b;
}
.nh-job-badges { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.5rem; }
.nh-job-badge {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    padding: 0.25rem 0.7rem;
    border-radius: 20px;
    border: 1px solid;
}
.nh-job-badge--zzp   { color: #7c3aed; background: rgba(124,58,237,0.08); border-color: rgba(124,58,237,0.22); }
.nh-job-badge--loc   { color: #0284c7; background: rgba(2,132,199,0.08);  border-color: rgba(2,132,199,0.22); }
.nh-job-badge--dept  { color: #0f2545; background: rgba(15,37,69,0.07);   border-color: rgba(15,37,69,0.18); }
.nh-job-card__divider { border: none; border-top: 1px solid #e8edf4; margin: 1.25rem 0; }
.nh-job-card__desc {
    font-size: 0.9rem;
    color: #475569;
    line-height: 1.7;
    margin-bottom: 1.25rem;
}
.nh-job-areas {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
    margin-bottom: 1.5rem;
}
.nh-job-area {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--navy, #0f2545);
}
.nh-job-area i {
    width: 28px; height: 28px;
    border-radius: 7px;
    background: rgba(201,164,53,0.1);
    color: var(--gold, #c9a435);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.75rem;
    flex-shrink: 0;
}
.nh-job-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding-top: 1.1rem;
    border-top: 1px solid #e8edf4;
}
.nh-job-card__note {
    font-size: 0.78rem;
    color: #94a3b8;
}
@media (max-width: 767px) {
    .nh-job-areas { grid-template-columns: repeat(2, 1fr); }
    .nh-job-card  { padding: 1.5rem 1.25rem; }
    .nh-job-card__top { flex-direction: column; }
}
@media (max-width: 479px) {
    .nh-job-areas { grid-template-columns: 1fr; }
}

/* ─── NH CTA SECTION ────────────────────────────────────────── */
.nh-cta-section {
    padding: 4.5rem 0;
    background: linear-gradient(135deg, #fffbf0 0%, #fdf5e0 100%);
    border-top: 3px solid rgba(201, 164, 53, 0.25);
    text-align: center;
    position: relative;
    overflow: hidden;
}
.nh-cta-section__glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse at 50% 50%,
        rgba(201, 164, 53, 0.12) 0%,
        transparent 65%
    );
    pointer-events: none;
}
.nh-cta-section__inner {
    max-width: 620px;
    margin: 0 auto;
}
.nh-cta-section__title {
    font-family: "Lato", sans-serif;
    font-size: clamp(2.2rem, 4.5vw, 3.5rem);
    font-weight: 900;
    color: var(--navy);
    line-height: 1.12;
    margin: 0.5rem 0 1.25rem;
}
.nh-cta-section__sub {
    color: var(--gray-600);
    font-size: 1rem;
    line-height: 1.75;
    margin-bottom: 2.5rem;
}

/* ─── RESPONSIVE ────────────────────────────────────────────── */

/* ──────────────────────────────────────────
   12. INNER PAGES — BREADCRUMB
────────────────────────────────────────── */
.breadcrumb,
.ddk-breadcrumb {
    background: var(--gray-100);
    padding: 0.65rem 0;
    font-size: 0.82rem;
    color: var(--gray-400);
    border-bottom: 1px solid var(--gray-200);
    display: block;
}
.breadcrumb a,
.ddk-breadcrumb a {
    color: var(--navy);
}
.breadcrumb a:hover,
.ddk-breadcrumb a:hover {
    color: var(--gold);
}
.breadcrumb span {
    margin: 0 0.45rem;
}

/* ──────────────────────────────────────────
   13. INNER PAGES — SECTOR HERO BANNERS
────────────────────────────────────────── */
.sector-hero,
.hero {
    padding: 4rem 0 3.5rem;
    color: var(--navy);
    text-align: center;
    position: relative;
    overflow: hidden;
}
.sector-hero h1,
.hero h1 {
    color: var(--navy);
    margin-bottom: 1.1rem;
}
.sector-hero p,
.hero p {
    color: var(--gray-600);
    max-width: 620px;
    margin: 0.75rem auto 0;
    font-size: 1.05rem;
}
.hero-content {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
}
.hero-btns {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

/* Per-sector image hero backgrounds */
.hero-africuisine {
    background:
        linear-gradient(rgba(7, 18, 31, 0.62), rgba(7, 18, 31, 0.72)),
        url("../images/hero-africuisine.jpg") center/cover no-repeat;
    border-bottom: none;
   padding-top:11rem !important; 
}
.hero-automobile {
    background:
        linear-gradient(rgba(7, 18, 31, 0.6), rgba(7, 18, 31, 0.7)),
        url("../images/automobile.jpg") center/cover no-repeat;
    border-bottom: none;
    padding-top:11rem !important; 
}
.hero-beauty {
    background:
        linear-gradient(rgba(7, 18, 31, 0.58), rgba(7, 18, 31, 0.68)),
        url("../images/beauty.jpg") center/cover no-repeat;
    border-bottom: none;
     padding-top:11rem !important; 
}
.hero-hospitality {
    background:
        linear-gradient(rgba(7, 18, 31, 0.6), rgba(7, 18, 31, 0.72)),
        url("../images/hospitality.jpg") center/cover no-repeat;
    border-bottom: none;
     padding-top:11rem !important; 
}
.hero-pharma {
    background:
        linear-gradient(rgba(7, 18, 31, 0.65), rgba(7, 18, 31, 0.75)),
        url("../images/pharma.jpg") center/cover no-repeat;
    border-bottom: none;
   padding-top:11rem !important; 

}
.hero-about {
    background:
        linear-gradient(rgba(7, 18, 31, 0.6), rgba(7, 18, 31, 0.7)),
        url("../images/startup.jpg") center/cover no-repeat;
    border-bottom: none;
     padding-top:11rem !important;  
}
.hero-shop {
    background:
        linear-gradient(rgba(7, 18, 31, 0.62), rgba(7, 18, 31, 0.72)),
        url("https://cdn.pixabay.com/photo/2017/07/31/11/21/people-2557399_1280.jpg")
            center/cover no-repeat;
    border-bottom: none;
     padding-top:11rem !important;
}
/* White text for all image heroes */
.hero-africuisine h1,
.hero-africuisine p,
.hero-automobile h1,
.hero-automobile p,
.hero-beauty h1,
.hero-beauty p,
.hero-hospitality h1,
.hero-hospitality p,
.hero-pharma h1,
.hero-pharma p,
.hero-about h1,
.hero-about p,
.hero-shop h1,
.hero-shop p {
    color: var(--white);
}

/* Inner hero badge */
.hero-badge {
    display: inline-block;
    background: rgba(201, 164, 53, 0.12);
    color: var(--gold-dk);
    border: 1px solid rgba(201, 164, 53, 0.35);
    padding: 0.32rem 0.9rem;
    border-radius: 50px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 1.1rem;
}
/* Per-sector badge colour variants */
.hero-badge--auto {
    background: rgba(201, 164, 53, 0.12);
    color: var(--gold-dk);
    border-color: rgba(201, 164, 53, 0.35);
}
.hero-badge--beauty {
    background: rgba(201, 164, 53, 0.12);
    color: var(--gold-dk);
    border-color: rgba(201, 164, 53, 0.35);
}
.hero-badge--hosp {
    background: rgba(201, 164, 53, 0.12);
    color: var(--gold-dk);
    border-color: rgba(201, 164, 53, 0.35);
}
.hero-badge--amber {
    background: rgba(201, 164, 53, 0.12);
    color: var(--gold-dk);
    border-color: rgba(201, 164, 53, 0.35);
}

/* ──────────────────────────────────────────
   14. INNER PAGES — SECTION LAYOUTS
────────────────────────────────────────── */
.two-col,
.two-col-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}
.two-col.reverse,
.two-col-wrap.reverse {
    direction: rtl;
}
.two-col.reverse > *,
.two-col-wrap.reverse > * {
    direction: ltr;
}

.content-img-block,
.content-image {
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.content-img-block img,
.content-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ──────────────────────────────────────────
   15. INNER PAGES — FEATURE CARDS
────────────────────────────────────────── */
.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.hospitality-features-grid {
    grid-template-columns: repeat(4, 1fr);
}

.ic-srv-block .features-grid {
     grid-template-columns: repeat(4, 1fr);
}
.ic-ecom-grid .features-grid{
    grid-template-columns: repeat(3, 1fr);
}

.feature-item {
    display: flex;
    gap: 1.2rem;
    align-items: flex-start;
}
.feature-icon {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    background: var(--gold-bg);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: var(--gold);
}
.feature-item h4 {
    color: var(--navy);
    margin-bottom: 0.3rem;
    font-size: 1rem;
}
.feature-item p {
    color: var(--gray-600);
    font-size: 0.88rem;
    margin: 0;
}

/* Feature cards — 4-column compact premium */
.feature-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 1.6rem 1.4rem 1.5rem;
    border: 1px solid var(--gray-200);
    border-top: 3px solid var(--gold);
    box-shadow: var(--sh-sm);
    transition:
        transform 0.28s ease,
        box-shadow 0.28s ease,
        border-top-color 0.28s ease;
    display: flex;
    flex-direction: column;
}
.feature-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.1);
    border-top-color: var(--navy);
}
.feature-icon-wrap {
    width: 46px;
    height: 46px;
    background: var(--navy);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: var(--gold);
    margin-bottom: 1rem;
    flex-shrink: 0;
    transition:
        background 0.28s ease,
        color 0.28s ease,
        transform 0.28s ease;
}
.feature-card:hover .feature-icon-wrap {
    background: var(--gold);
    color: var(--navy-dk);
    transform: scale(1.07);
}
.feature-title {
    color: var(--navy);
    font-size: 0.92rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    line-height: 1.35;
}
.feature-desc {
    font-size: 0.82rem;
    color: var(--gray-600);
    margin: 0;
    line-height: 1.6;
    flex: 1;
}

/* ──────────────────────────────────────────
   16. INNER PAGES — SERVICE CARDS
────────────────────────────────────────── */
.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.service-card-old {
    background: var(--white);
    border-radius: var(--radius);
    padding: 1.75rem 1.5rem;
    border: 1px solid var(--gray-200);
    box-shadow: var(--sh-sm);
    transition: all var(--ease);
}
.service-card-old:hover {
    border-color: rgba(201, 164, 53, 0.4);
    transform: translateY(-4px);
    box-shadow: var(--sh);
}
.service-card-old .s-icon {
    font-size: 2rem;
    color: var(--gold);
    margin-bottom: 1rem;
}
.service-card-old h4 {
    color: var(--navy);
    margin-bottom: 0.5rem;
}
.service-card-old p {
    font-size: 0.88rem;
    color: var(--gray-600);
    margin: 0;
}

/* Service cards — icon + title + description pattern */
.service-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 2rem 1.75rem;
    border: 1.5px solid var(--gray-100);
    box-shadow: var(--sh-sm);
    transition: all var(--ease);
    height: 100%;
    display: flex;
    flex-direction: column;
}
.service-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--sh);
    border-color: rgba(201, 164, 53, 0.4);
}
.service-card .s-icon {
    width: 54px;
    height: 54px;
    background: var(--gold-bg);
    color: var(--gold);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    margin-bottom: 1.1rem;
    transition: all var(--ease);
    flex-shrink: 0;
}
.service-card:hover .s-icon {
    background: linear-gradient(135deg, var(--gold), var(--gold-dk));
    color: var(--white);
}
.service-card h4 {
    color: var(--navy);
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
}
.service-card p {
    font-size: 0.88rem;
    color: var(--gray-600);
    margin: 0;
    line-height: 1.65;
    flex: 1;
}
.service-link {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--gold);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: gap var(--ease);
}
.service-link:hover {
    color: var(--gold-lt);
    gap: 0.8rem;
}

/* ──────────────────────────────────────────
   17. INNER PAGES — SECTOR GRID (home-style cards)
────────────────────────────────────────── */
.sectors-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
}
.sector-card {
    display: block;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--sh-sm);
    background: var(--white);
    border: 1px solid var(--gray-200);
    color: inherit;
    text-decoration: none;
    transition: all var(--ease);
}
.sector-card:hover {
    transform: translateY(-7px);
    box-shadow: var(--sh-lg);
    color: inherit;
}
.sector-card-img {
    position: relative;
    height: 195px;
    overflow: hidden;
}
.sector-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}
.sector-card:hover .sector-card-img img {
    transform: scale(1.07);
}
.sector-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 40%,
        rgba(0, 0, 0, 0.5) 100%
    );
}
.sector-card-body {
    padding: 1.4rem;
}
.sector-icon-wrap {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--gold), var(--gold-dk));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.9rem;
    font-size: 1.1rem;
    color: var(--white);
    box-shadow: var(--gold-sh);
}
.sector-card-title {
    font-size: 1.1rem;
    color: var(--navy);
    margin-bottom: 0.45rem;
}
.sector-card-desc {
    font-size: 0.85rem;
    color: var(--gray-600);
    margin-bottom: 0.9rem;
    line-height: 1.55;
}
.sector-card-link {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 0.7px;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    transition: gap var(--ease);
}
.sector-card:hover .sector-card-link {
    gap: 0.8rem;
}

/* ──────────────────────────────────────────
   18. INNER PAGES — MENU CARDS (Africuisine)
────────────────────────────────────────── */
.menu-categories {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}
.menu-cat-btn {
    padding: 0.42rem 1.1rem;
    border-radius: 50px;
    border: 1.5px solid var(--navy);
    background: transparent;
    color: var(--navy);
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--ease);
}
.menu-cat-btn:hover,
.menu-cat-btn.active {
    background: var(--navy);
    color: var(--white);
}
.menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.5rem;
}
.menu-card {
    background: var(--white);
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--gray-200);
    box-shadow: var(--sh-sm);
    transition: all var(--ease);
}
.menu-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--sh);
}
.menu-img {
    height: 155px;
    overflow: hidden;
}
.menu-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.menu-card-body {
    padding: 1rem;
}
.menu-card-body h4 {
    color: var(--navy);
    margin-bottom: 0.22rem;
    font-size: 0.97rem;
}
.menu-card-body p {
    font-size: 0.8rem;
    color: var(--gray-600);
    margin-bottom: 0.45rem;
}
.menu-price {
    font-weight: 700;
    color: var(--gold);
    font-size: 0.92rem;
}

/* ──────────────────────────────────────────
   18b. RESTAURANT MENU — TABBED LAYOUT
────────────────────────────────────────── */
.rmenu-tabs-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 0;
    border-bottom: 2px solid var(--gray-200);
}
.rmenu-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    min-width: max-content;
}
.rmenu-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.85rem 1.3rem;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--gray-600);
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--ease);
    margin-bottom: -2px;
}
.rmenu-tab:hover {
    color: var(--navy);
    background: var(--off-white);
}
.rmenu-tab.active {
    color: var(--gold);
    border-bottom-color: var(--gold);
    background: transparent;
}

.rmenu-content {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-top: none;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    padding: 2rem;
}

.rmenu-note {
    background: rgba(201, 164, 53, 0.08);
    border: 1px solid rgba(201, 164, 53, 0.25);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
    color: var(--gray-700);
    margin-bottom: 1.5rem;
}

.rmenu-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.rmenu-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0.5rem;
    border-bottom: 1px solid var(--gray-100);
    transition: background var(--ease);
}
.rmenu-item:last-child {
    border-bottom: none;
}
.rmenu-item:hover {
    background: var(--off-white);
    border-radius: var(--radius);
}

.rmenu-emoji {
    font-size: 1.9rem;
    width: 2.6rem;
    text-align: center;
    flex-shrink: 0;
}

.rmenu-info {
    flex: 1;
    min-width: 0;
}

.rmenu-name {
    font-size: 0.97rem;
    font-weight: 700;
    color: var(--navy);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.2rem;
}

.rmenu-badge {
    font-size: 0.69rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: rgba(201, 164, 53, 0.15);
    color: var(--gold-dk);
    border: 1px solid rgba(201, 164, 53, 0.3);
    padding: 0.15rem 0.55rem;
    border-radius: 20px;
    white-space: nowrap;
}

.rmenu-desc {
    font-size: 0.82rem;
    color: var(--gray-500);
    line-height: 1.45;
}

.rmenu-price {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--gray-400);
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: 0.75rem;
    font-style: italic;
}

/* ──────────────────────────────────────────
   19. INNER PAGES — FAQ ACCORDION
────────────────────────────────────────── */
.faq-list {
    max-width: 780px;
    margin: 0 auto;
}
.faq-item {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    margin-bottom: 0.9rem;
    overflow: hidden;
}
.faq-q {
    background: var(--white);
    padding: 1.05rem 1.35rem;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--navy);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.faq-q::after {
    content: "+";
    font-size: 1.2rem;
    color: var(--gold);
    font-weight: 700;
}
.faq-a {
    padding: 0 1.35rem 1.05rem;
    font-size: 0.9rem;
    color: var(--gray-800);
    display: none;
}
.faq-item.open .faq-a {
    display: block;
}
.faq-item.open .faq-q::after {
    content: "–";
}

/* ──────────────────────────────────────────
   20. INNER PAGES — CONTACT FORM
────────────────────────────────────────── */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 3.5rem;
    align-items: start;
}

.contact-info h3 {
    color: var(--navy);
    margin-bottom: 1.4rem;
}
.contact-detail {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    margin-bottom: 1.2rem;
}
.contact-detail .cd-icon {
    width: 40px;
    height: 40px;
    background: var(--gold-bg);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    color: var(--gold);
    flex-shrink: 0;
}
.contact-detail .cd-text strong {
    display: block;
    color: var(--navy);
    font-size: 0.86rem;
    margin-bottom: 0.12rem;
}
.contact-detail .cd-text span {
    font-size: 0.86rem;
    color: var(--gray-600);
}
.contact-icon-box {
    width: 44px;
    height: 44px;
    background: var(--gold-bg);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    color: var(--gold);
    flex-shrink: 0;
}

/* Form inputs */
.form-group {
    margin-bottom: 1.2rem;
}
.form-group label,
.form-label {
    display: block;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 0.38rem;
}
.form-group input,
.form-group select,
.form-group textarea,
.form-control,
.form-select {
    width: 100%;
    padding: 0.68rem 1rem;
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius);
    font-size: 0.92rem;
    font-family: "Poppins", sans-serif;
    color: var(--text);
    background: var(--white);
    transition:
        border-color var(--ease),
        box-shadow var(--ease);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.form-control:focus,
.form-select:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(201, 164, 53, 0.12);
}
.form-group textarea {
    resize: vertical;
    min-height: 120px;
}
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* ──────────────────────────────────────────
   21. INNER PAGES — STATS
────────────────────────────────────────── */
.stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 2rem;
    text-align: center;
}
.stat-item .big-num,
.stat-item .stat-num {
    display: block;
    font-family: "Lato", sans-serif;
    font-size: 2.8rem;
    font-weight: 900;
    color: var(--gold);
    line-height: 1;
}
.stat-item .big-label,
.stat-item .stat-label {
    display: block;
    font-size: 0.83rem;
    color: rgba(255, 255, 255, 0.62);
    margin-top: 0.4rem;
}

/* ──────────────────────────────────────────
   22. INNER PAGES — TIMELINE
────────────────────────────────────────── */
/* Horizontal timeline — 4 items in one row */
.ddk-timeline,
.timeline {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    position: relative;
    max-width: 100%;
    padding-left: 0;
}
/* horizontal connector line across top */
.ddk-timeline::before,
.timeline::before {
    content: "";
    position: absolute;
    top: 11px;
    left: calc(12.5% + 7px);
    right: calc(12.5% + 7px);
    height: 2px;
    width: auto;
    background: var(--gold);
    opacity: 0.4;
}
.timeline-item {
    position: relative;
    padding: 2rem 1.25rem 1.25rem;
    margin-bottom: 0;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    border-top: 3px solid var(--gold);
    box-shadow: var(--sh-sm);
    margin: 0 0.4rem;
}
.timeline-item:first-child {
    margin-left: 0;
}
.timeline-item:last-child {
    margin-right: 0;
}
.timeline-dot {
    position: absolute;
    top: -9px;
    left: 1.25rem;
    width: 16px;
    height: 16px;
    background: var(--gold);
    border-radius: 50%;
    border: 3px solid var(--white);
    box-shadow: 0 0 0 2px var(--gold);
}
.timeline-item h4 {
    color: var(--navy);
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
    line-height: 1.35;
}
.timeline-item p {
    font-size: 0.82rem;
    color: var(--gray-600);
    margin: 0;
    line-height: 1.6;
}

/* ──────────────────────────────────────────
   23. INNER PAGES — NOTICES
────────────────────────────────────────── */
.notice,
.ddk-notice {
    background: var(--gold-bg);
    border-left: 4px solid var(--gold);
    padding: 0.95rem 1.2rem;
    border-radius: 0 var(--radius) var(--radius) 0;
    font-size: 0.89rem;
    color: var(--gray-800);
    margin-bottom: 1.4rem;
}

/* ──────────────────────────────────────────
   24. INNER PAGES — VALUES / MISC GRIDS
────────────────────────────────────────── */
.values-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 10px;
    margin-top: 1.2rem;
}
.value-chip {
    background: var(--white);
    border: 1.5px solid var(--gray-200);
    color: var(--navy);
    text-align: center;
    padding: 0.65rem 0.6rem;
    border-radius: var(--radius);
    font-weight: 600;
    font-size: 0.78rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    transition: all var(--ease);
    box-shadow: var(--sh-sm);
    line-height: 1.3;
}
.value-chip i {
    color: var(--gold);
    font-size: 0.8rem;
    flex-shrink: 0;
}
.value-chip:hover {
    background: var(--gold-bg);
    border-color: var(--gold);
    color: var(--navy);
}

.placeholder-img {
    width: 100%;
    aspect-ratio: 4/3;
    background: linear-gradient(135deg, var(--navy-dk) 0%, var(--navy) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.84rem;
    gap: 0.75rem;
    border-radius: var(--radius-lg);
}
.placeholder-img .ph-icon {
    font-size: 3rem;
    opacity: 0.35;
}

/* ──────────────────────────────────────────
   24b. IC-* COMPONENT UTILITY CLASSES
   Replace inline styles on all inner pages
────────────────────────────────────────── */

/* ── Cards ── */
.ic-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--gray-200);
}
.ic-card__body {
    padding: 1.5rem;
}
.ic-card__hd-navy {
    background: var(--navy);
    padding: 1.5rem 2rem;
}
.ic-card__hd-navy h3 {
    color: var(--gold);
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}
.ic-card__hd-navy p {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.88rem;
    margin-bottom: 1.25rem;
}

.ic-panel {
    background: var(--white);
    padding: 1.5rem;
    border-radius: var(--radius);
    border: 1px solid var(--gray-200);
}
.ic-panel-off {
    background: var(--off-white);
    padding: 1.5rem;
    border-radius: var(--radius);
    border: 1px solid var(--gray-200);
}
.ic-panel-gl {
    background: var(--white);
    padding: 1.5rem;
    border-radius: var(--radius);
    border: 1px solid var(--gray-200);
    border-left: 4px solid var(--gold);
}
.ic-panel-gr {
    background: var(--off-white);
    padding: 1.5rem;
    border-radius: var(--radius);
    border-right: 4px solid var(--green);
}
.ic-panel-navy {
    background: var(--navy);
    padding: 2rem;
    border-radius: var(--radius);
    color: #fff;
}
.ic-panel-center {
    background: var(--white);
    padding: 2rem;
    border-radius: var(--radius);
    border: 1px solid var(--gray-200);
    text-align: center;
}
.ic-card-top-gold {
    background: var(--white);
    padding: 2.5rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border-top: 4px solid var(--gold);
}
.ic-card-top-green {
    background: var(--white);
    padding: 2.5rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border-top: 4px solid var(--green);
}
.ic-form-wrap {
    max-width: 700px;
    margin: 0 auto;
    background: var(--white);
    padding: 2.5rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--gray-200);
}

/* ── Grids ── */
.ic-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
}
.ic-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
}
.ic-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
}

/* ── Flex helpers ── */
.ic-fcol {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.ic-frow {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}
.ic-frow-mt {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}
.ic-step {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}
.ic-step__ico {
    font-size: 1.5rem;
    flex-shrink: 0;
}

/* ── Typography ── */
.ic-h3 {
    color: var(--navy);
    margin-bottom: 1rem;
}
.ic-h4 {
    color: var(--navy);
    margin-bottom: 0.5rem;
}
.ic-p {
    font-size: 0.88rem;
    color: var(--gray-700);
    margin: 0;
}
.ic-p-lead {
    font-size: 0.9rem;
    color: var(--gray-700);
}
.ic-p-muted {
    font-size: 0.88rem;
    color: var(--gray-500);
}
.ic-p-note {
    font-size: 0.82rem;
    color: var(--gray-500);
}
.ic-p-card {
    font-size: 0.8rem;
    color: var(--gray-600);
    text-align: center;
}
.ic-ico {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    display: block;
    color: var(--gold);
}
.ic-ico-lg {
    font-size: 4rem;
    margin-bottom: 1rem;
    display: block;
    color: var(--gold);
}
.ic-card-top-green .ic-ico {
    color: var(--green);
}
.ic-card-top-navy .ic-ico {
    color: var(--white);
}

/* ── Badges ── */
.ic-badge-soon {
    font-size: 0.8rem;
    background: rgba(201, 164, 53, 0.13);
    color: var(--gold-dk);
    border: 1px solid rgba(201, 164, 53, 0.28);
    padding: 0.22rem 0.75rem;
    border-radius: 20px;
    font-weight: 700;
    display: inline-block;
}
.ic-badge-coming {
    font-size: 0.8rem;
    background: var(--gold);
    color: var(--navy);
    padding: 0.22rem 0.75rem;
    border-radius: 20px;
    font-weight: 700;
    display: inline-block;
}
.ic-badge-live {
    font-size: 0.8rem;
    background: rgba(45, 122, 79, 0.12);
    color: var(--green);
    border: 1px solid rgba(45, 122, 79, 0.28);
    padding: 0.22rem 0.75rem;
    border-radius: 20px;
    font-weight: 700;
    display: inline-block;
}

/* ── Checklist (no-bullet feature list) ── */
.ic-checklist {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin: 1rem 0;
    padding: 0;
}
.ic-checklist li {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    font-size: 0.92rem;
    color: var(--gray-700);
}
.ic-check {
    color: var(--gold);
    font-weight: 700;
    flex-shrink: 0;
}

/* ── Info box (dark notice) ── */
.ic-notice-navy {
    background: var(--navy);
    color: #fff;
    border-radius: var(--radius);
    padding: 1.5rem 2rem;
    margin-bottom: 2rem;
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    flex-wrap: wrap;
}
.ic-notice-navy strong {
    color: var(--gold);
}
.ic-notice-navy p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    margin: 0.5rem 0 0;
}

/* ── Filter/tag bar ── */
.ic-filter-bar {
    padding: 1.5rem 2rem;
    border-bottom: 1px solid var(--gray-200);
    background: var(--gray-100);
}
.ic-filter-label {
    font-size: 0.82rem;
    color: var(--gray-500);
    margin-bottom: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.ic-tag-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 1rem;
    background: var(--white);
    border: 1.5px solid var(--navy);
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--navy);
    text-decoration: none;
    transition: all 0.2s;
}
.ic-tag-btn:hover {
    background: var(--navy);
    color: var(--white);
}

/* ── Section-head badge for inner sections ── */
.ic-sec-badge {
    display: inline-block;
    padding: 0.3rem 1rem;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin-bottom: 0.75rem;
}
.ic-sec-badge-gold {
    background: rgba(201, 164, 53, 0.12);
    color: var(--gold-dk);
    border: 1px solid rgba(201, 164, 53, 0.28);
}
.ic-sec-badge-green {
    background: rgba(45, 122, 79, 0.1);
    color: var(--green);
    border: 1px solid rgba(45, 122, 79, 0.28);
}

/* ── Order platform card ── */
.ic-order-card {
    background: var(--off-white);
    border-radius: var(--radius);
    padding: 2rem;
    border: 1px solid var(--gray-200);
    text-align: center;
}
.ic-order-card-navy {
    background: var(--navy);
    border-radius: var(--radius);
    padding: 2rem;
    text-align: center;
}

/* Card with navy top border (pharma vision) */
.ic-card-top-navy {
    background: var(--white);
    padding: 2.5rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border-top: 4px solid var(--navy);
}

/* Pharma product category card */
.ic-prod-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 2rem 2rem 1.75rem;
    border: 1px solid var(--gray-200);
    box-shadow: var(--sh-sm);
    border-top: 4px solid var(--navy);
    display: flex;
    flex-direction: column;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-top-color 0.25s ease;
}
.ic-prod-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--sh-lg);
    border-top-color: var(--gold);
}
.ic-prod-card__ico {
    width: 52px;
    height: 52px;
    background: var(--gold-bg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    color: var(--gold);
    margin-bottom: 1.1rem;
    transition:
        background 0.25s,
        color 0.25s;
}
.ic-prod-card:hover .ic-prod-card__ico {
    background: var(--navy);
    color: var(--white);
}
.ic-prod-card h4 {
    color: var(--navy);
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 0.6rem;
    line-height: 1.3;
}
.ic-prod-card__desc {
    font-size: 0.85rem;
    color: var(--gray-600);
    line-height: 1.65;
    margin-bottom: 1.25rem;
    flex: 1;
}
.ic-prod-card__list {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid var(--gray-200);
    padding-top: 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.ic-prod-card__list li {
    font-size: 0.8rem;
    color: var(--gray-700);
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    line-height: 1.4;
}
.ic-prod-card__dot {
    color: var(--gold);
    font-weight: 900;
    font-size: 1rem;
    line-height: 1.4;
    flex-shrink: 0;
}

/* Pharma compliance strip */
.ic-comp-bar {
    background: var(--navy);
    color: #fff;
    padding: 0.8rem 1.5rem;
}
.ic-comp-bar .container {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 500;
}

/* Stats section (used in pharma) */
.ic-section-stats {
    background: var(--navy);
    padding: 3rem 0;
}

/* Regulatory compliance list in pharma */
.ic-reg-list {
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.ic-reg-list__item {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    font-size: 0.9rem;
    color: var(--gray-700);
}
.ic-reg-list__check {
    color: var(--gold);
    font-size: 1.1rem;
    flex-shrink: 0;
}

/* Regulatory section two-col */
.ic-reg-wrap {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 3rem;
    align-items: center;
}

/* Regulatory stat cards (2×2 grid) */
.ic-reg-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}
.ic-reg-stat {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 1.75rem 1rem;
    text-align: center;
    box-shadow: var(--sh-sm);
    border: 1.5px solid var(--gray-100);
    transition: all var(--ease);
}
.ic-reg-stat:hover {
    transform: translateY(-3px);
    box-shadow: var(--sh);
    border-color: rgba(201, 164, 53, 0.35);
}
.ic-reg-stat__num {
    font-family: "Lato", sans-serif;
    font-size: 2.4rem;
    font-weight: 900;
    color: var(--gold);
    line-height: 1;
    margin-bottom: 0.5rem;
    display: block;
}
.ic-reg-stat__ico {
    font-size: 2rem;
    color: var(--gold);
    margin-bottom: 0.5rem;
    display: block;
}
.ic-reg-stat__label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--navy);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: block;
}

/* Disclaimer strip */
.ic-disclaimer {
    padding: 1.5rem 0;
    background: var(--gray-100);
}

/* White outline button for use on dark/navy backgrounds */
.btn-outline-white {
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.65) !important;
}
.btn-outline-white:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff !important;
}

/* Icon slot inside ic-notice-navy */
.ic-notice-navy__ico {
    font-size: 2rem;
    flex-shrink: 0;
}

/* Video container wrappers */
.ic-video-wrap {
    position: relative;
    border-radius: 12px 12px 0 0;
    overflow: hidden;
}
.ic-video-wrap--food {
    background: #1a0a00;
}
.ic-video-wrap--green {
    background: #0a2a1a;
}
.ic-video-wrap video {
    width: 100%;
    display: block;
    max-height: 320px;
    object-fit: cover;
}

/* Video placeholder */
.ic-video-ph {
    width: 100%;
    height: 280px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.6);
    gap: 1rem;
    text-align: center;
}
.ic-video-ph__ico {
    font-size: 4rem;
}
.ic-video-ph__title {
    font-weight: 600;
    font-size: 1rem;
    color: var(--gold);
}
.ic-video-ph__gold {
    color: #f5c842;
}
.ic-video-ph__green {
    color: #5dc68c;
}
.ic-video-ph__sub {
    font-size: 0.8rem;
    margin-top: 0.25rem;
}

/* order-card inner text */
.ic-order-card h4 {
    color: var(--navy);
    margin-bottom: 0.5rem;
}
.ic-order-card-navy h4 {
    color: var(--gold);
    margin-bottom: 0.5rem;
}

/* ── Placeholder image themes ── */
.ph-auto {
    background: linear-gradient(135deg, #1a3a6a 0%, #0f2040 100%) !important;
}
.ph-beauty {
    background: linear-gradient(135deg, #5a0a38 0%, #2e051c 100%) !important;
}
.ph-hosp {
    background: linear-gradient(135deg, #0a3a1f 0%, #05200f 100%) !important;
}
.ph-pharma {
    background: linear-gradient(135deg, #0a2050 0%, #05122e 100%) !important;
}
.ph-food {
    background: linear-gradient(135deg, #7a3200 0%, #3a1800 100%) !important;
}

/* CTA Banner (inner pages) */
.cta-banner {
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dk) 100%);
    color: var(--navy-dk);
    padding: 4rem 1.5rem;
    text-align: center;
}
.cta-banner h2 {
    color: var(--navy-dk);
    margin-bottom: 0.75rem;
}
.cta-banner p {
    opacity: 0.8;
    margin-bottom: 2rem;
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
}

/* ──────────────────────────────────────────
   25. FOOTER
────────────────────────────────────────── */
.ddk-footer {
    background: #000000;
    color: rgba(255, 255, 255, 0.68);
    border-top: 1px solid rgba(201, 164, 53, 0.12);
}

.footer-logo {
    width: 100%;
    max-width: 220px;
    height: auto;
    object-fit: contain;
    border-radius: 4px;
    display: block;
}

.footer-desc {
    font-size: 0.86rem;
    line-height: 1.72;
    max-width: 310px;
    color: rgba(255, 255, 255, 0.55);
}

/* Social icons */
.footer-socials {
    display: flex;
    gap: 0.55rem;
    margin-top: 1.2rem;
}
.footer-soc-btn {
    width: 36px;
    height: 36px;
    border: 1px solid rgba(201, 164, 53, 0.28);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    transition: all var(--ease);
}
.footer-soc-btn:hover {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--navy-dk);
}

/* Column heading */
.footer-col-heading,
.footer-heading {
    font-family: "Poppins", sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--white);
    margin-bottom: 1.1rem;
}

/* Nav links list */
.footer-nav-list,
.footer-links {
    list-style: none;
    padding: 0;
}
.footer-nav-list li,
.footer-links li {
    margin-bottom: 0.5rem;
}
.footer-nav-list a,
.footer-links a {
    font-size: 0.86rem;
    color: rgba(255, 255, 255, 0.55);
    transition: color var(--ease);
}
.footer-nav-list a:hover,
.footer-links a:hover {
    color: var(--gold);
}
.footer-nav-list li {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.footer-domain-ico {
    color: var(--gold);
    font-size: 0.7rem;
    flex-shrink: 0;
    opacity: 0.8;
}

/* Contact list */
.footer-contact-items,
.footer-contact-list {
    list-style: none;
    padding: 0;
}
.footer-contact-items li,
.footer-contact-list li {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 0.86rem;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 0.65rem;
}
.footer-contact-items i,
.footer-contact-list i {
    color: var(--gold);
    width: 14px;
    flex-shrink: 0;
}
.footer-contact-items a,
.footer-contact-list a {
    color: rgba(255, 255, 255, 0.55);
}
.footer-contact-items a:hover,
.footer-contact-list a:hover {
    color: var(--gold);
}

/* Bottom bar */
.footer-bottom-bar,
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    padding: 1.2rem 0;
    font-size: 0.79rem;
    color: rgba(255, 255, 255, 0.32);
}
.footer-bottom-links {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.footer-bottom-links a {
    color: rgba(255, 255, 255, 0.45);
    transition: color var(--ease);
}
.footer-bottom-links a:hover {
    color: var(--gold);
}
.footer-bottom-links span {
    color: rgba(255, 255, 255, 0.2);
}

/* Old footer aliases */
.footer-social-icon {
    width: 36px;
    height: 36px;
    border: 1px solid rgba(201, 164, 53, 0.28);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    transition: all var(--ease);
}
.footer-social-icon:hover {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--navy-dk);
}

/* ──────────────────────────────────────────
   26. RESPONSIVE
────────────────────────────────────────── */

/* Mobile */

/* Small mobile */

/* ──────────────────────────────────────────
   CONTACT PAGE
────────────────────────────────────────── */
.hero-contact {
    background:
        linear-gradient(rgba(7, 18, 31, 0.65), rgba(7, 18, 31, 0.75)),
        url("../images/contactus.jpg") center/cover no-repeat;
}
.hero-contact h1,
.hero-contact p {
    color: var(--white);
}

.ic-contact-info {
    margin-top: 2rem;
    padding: 1.5rem;
    background: var(--off-white);
    border-radius: var(--radius);
}
.ic-contact-info h4 {
    color: var(--navy);
    margin-bottom: 1rem;
}
.ic-contact-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0;
}
.ic-contact-links a {
    color: var(--navy);
    font-size: 0.88rem;
    text-decoration: none;
}
.ic-contact-links a:hover {
    color: var(--gold);
}

.ic-contact-form {
    background: var(--white);
    padding: 2.5rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--gray-200);
}
.ic-contact-form h3 {
    color: var(--navy);
    margin-bottom: 1.5rem;
}
.ic-success-msg {
    background: rgba(45, 122, 79, 0.1);
    border-left: 4px solid var(--green);
    padding: 1rem;
    border-radius: 4px;
    margin-bottom: 1.5rem;
    color: var(--green);
}
.ic-form-note {
    font-size: 0.8rem;
    color: var(--gray-500);
    margin-bottom: 1.25rem;
}
.ic-form-note a {
    color: var(--gold);
}

/* ──────────────────────────────────────────
   SERVICES PAGE
────────────────────────────────────────── */
.hero-services {
    background:
        linear-gradient(rgba(7, 18, 31, 0.63), rgba(7, 18, 31, 0.73)),
        url("../images/service-hero.jpg") center/cover no-repeat;
}
.hero-services h1,
.hero-services p {
    color: var(--white);
}

.ic-srv-block {
    margin-bottom: 3rem;
    padding: 2.5rem;
    border-radius: var(--radius-lg);
    background: var(--white);
    border: 1px solid var(--gray-200);
    box-shadow: var(--sh-sm);
}
.ic-srv-block--alt {
    background: var(--off-white);
}
.ic-srv-hd {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.75rem;
    padding-bottom: 1.25rem;
    border-bottom: 2px solid var(--gray-200);
}
.ic-srv-hd__ico {
    width: 52px;
    height: 52px;
    background: var(--navy);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--gold);
    flex-shrink: 0;
}
.ic-srv-hd h2 {
    margin-bottom: 0.2rem;
    font-size: 1.3rem;
}
.ic-srv-hd a {
    font-size: 0.82rem;
    color: var(--gold);
    text-decoration: none;
    font-weight: 600;
}
.ic-srv-hd a:hover {
    color: var(--navy);
    text-decoration: underline;
}

/* Payment chips */
.ic-pay-methods {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 1rem;
}
.ic-pay-chip {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--navy);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition:
        border-color 0.2s,
        box-shadow 0.2s;
}
.ic-pay-chip:hover {
    border-color: var(--gold);
    box-shadow: 0 4px 12px rgba(201, 164, 53, 0.2);
}
.ic-pay-chip i {
    color: var(--gold);
    font-size: 1rem;
}

/* Legal page (privacy/terms) */
.legal-content {
    max-width: 840px;
}
.legal-content h3 {
    color: var(--navy);
    margin: 1.5rem 0 0.5rem;
}

/* How-to-order step grid */
.ic-step-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1.5rem;
    text-align: center;
}
.ic-step-card {
    padding: 1.75rem 1.25rem 1.5rem;
    background: var(--white);
    border-radius: var(--radius);
    border-top: 4px solid var(--gold);
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
    transition:
        transform 0.25s,
        box-shadow 0.25s;
}
.ic-step-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}
.ic-step-card__num {
    position: absolute;
    top: 0.6rem;
    right: 0.75rem;
    font-size: 2.2rem;
    font-weight: 900;
    color: rgba(201, 164, 53, 0.13);
    line-height: 1;
    font-family: "Lato", sans-serif;
}
.ic-step-card__fa {
    width: 54px;
    height: 54px;
    background: rgba(201, 164, 53, 0.12);
    border: 2px solid rgba(201, 164, 53, 0.28);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    color: var(--gold);
    font-size: 1.3rem;
    transition: all 0.25s;
}
.ic-step-card:hover .ic-step-card__fa {
    background: var(--gold);
    border-color: var(--gold);
    color: #fff;
}
.ic-step-card__title {
    font-weight: 700;
    color: var(--navy);
    font-size: 0.95rem;
    margin-bottom: 0.4rem;
}

/* ──────────────────────────────────────────
   ABOUT PAGE — SECTOR LINKS LIST
────────────────────────────────────────── */
.ic-sector-links-list {
    list-style: none;
    padding: 0;
    margin: 0.75rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}
.ic-sector-links-list li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.ic-sector-links-list li i {
    color: var(--gold);
    font-size: 0.9rem;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}
.ic-sector-links-list li a {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--navy);
    text-decoration: none;
    border-bottom: 1.5px solid transparent;
    transition:
        color var(--ease),
        border-color var(--ease);
}
.ic-sector-links-list li a:hover {
    color: var(--gold);
    border-bottom-color: var(--gold);
}

/* ──────────────────────────────────────────
   LANGUAGE SWITCHER  (EN / NL / FR)
────────────────────────────────────────── */
.ddk-lang-switch {
    display: flex;
    align-items: center;
    gap: 2px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 100px;
    padding: 3px 5px;
}

.ddk-lang-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 9px;
    border-radius: 100px;
    font-size: 0.72rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: all 0.22s ease;
    white-space: nowrap;
    letter-spacing: 0.3px;
    line-height: 1;
}
.ddk-lang-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}
.ddk-lang-btn.ddk-lang-active {
    background: var(--gold);
    color: #07121f;
}
.ddk-lang-label {
    font-size: 0.7rem;
    font-weight: 700;
}

/* Mobile: slightly larger tap targets */

/* ──────────────────────────────────────────
   DDK FASHION & BEAUTY  (dfb-* components)
────────────────────────────────────────── */

/* Intro section btn row */
.dfb-btn-row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1.75rem;
    align-items: center;
}

/* Hero / about images */
.dfb-hero-img,
.dfb-about-img {
    border-radius: var(--radius-lg);
    overflow: hidden;
    min-height: 340px;
}
.dfb-hero-img img,
.dfb-about-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Collections grid — 3 equal cols in one row */
.dfb-collections-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    align-items: stretch;
}
.dfb-col-card {
    background: var(--white);
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: 2rem 1.75rem;
    box-shadow: var(--sh-sm);
    transition: all var(--ease);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.dfb-col-card:hover {
    border-color: rgba(201, 164, 53, 0.4);
    transform: translateY(-5px);
    box-shadow: var(--sh);
}
.dfb-col-card--wide {
    grid-column: span 2;
}
.dfb-col-icon {
    font-size: 2.4rem;
    margin-bottom: 0.4rem;
}
.dfb-col-card h3 {
    color: var(--navy);
    font-size: 1.1rem;
    margin: 0;
}
.dfb-col-card p {
    font-size: 0.88rem;
    color: var(--gray-600);
    margin: 0;
    line-height: 1.6;
    flex: 1;
}
@media (max-width: 820px) {
    .dfb-collections-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
    .dfb-collections-grid { grid-template-columns: 1fr; }
}
.dfb-badge-soon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 130px;
    background: rgba(201, 164, 53, 0.12);
    color: var(--gold-dk);
    border: 1px solid rgba(201, 164, 53, 0.32);
    padding: 0.35rem 1rem;
    border-radius: 50px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    text-decoration: none;
    width: fit-content;
    margin-top: 0.4rem;
    transition: background 0.2s, color 0.2s;
}

/* Why Choose section */
.dfb-why-section {
    background: var(--navy);
}
.dfb-why-section .section-title {
    color: var(--white);
}
.dfb-why-section .divider {
    background: var(--gold);
}

.dfb-why-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    max-width: 860px;
    margin: 0 auto;
}
.dfb-why-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    transition: all var(--ease);
}
.dfb-why-item:hover {
    background: rgba(201, 164, 53, 0.1);
    border-color: rgba(201, 164, 53, 0.3);
}
.dfb-check {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    background: rgba(201, 164, 53, 0.18);
    border: 1.5px solid rgba(201, 164, 53, 0.4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold);
    font-size: 0.85rem;
    margin-top: 0.1rem;
}
.dfb-why-item h4 {
    color: var(--white);
    font-size: 0.97rem;
    margin-bottom: 0.3rem;
}
.dfb-why-item p {
    font-size: 0.83rem;
    color: rgba(255, 255, 255, 0.62);
    margin: 0;
    line-height: 1.55;
}

/* Our Promise */
.dfb-promise-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}
.dfb-promise-values {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.9rem;
}
.dfb-val-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 0.85rem 1.1rem;
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--navy);
    box-shadow: var(--sh-sm);
    transition: all var(--ease);
}
.dfb-val-item:hover {
    border-color: rgba(201, 164, 53, 0.38);
    background: var(--gold-bg);
}
.dfb-val-item i {
    color: var(--gold);
    font-size: 1rem;
    width: 18px;
    text-align: center;
}

/* About — Vision & Mission */
.dfb-mission-grid {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    margin-top: 1.75rem;
}
.dfb-mission-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    background: var(--gold-bg);
    border: 1px solid rgba(201, 164, 53, 0.22);
    border-radius: var(--radius);
}
.dfb-mission-icon {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--gold), var(--gold-dk));
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 1rem;
}
.dfb-mission-item h5 {
    color: var(--navy);
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 0.3rem;
}
.dfb-mission-item p {
    font-size: 0.84rem;
    color: var(--gray-600);
    margin: 0;
    line-height: 1.6;
}

/* What We Offer */
.dfb-offer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}
.dfb-offer-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.65rem;
    background: var(--white);
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: 1.5rem 1rem;
    text-align: center;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--navy);
    box-shadow: var(--sh-sm);
    transition: all var(--ease);
}
.dfb-offer-item:hover {
    border-color: rgba(201, 164, 53, 0.4);
    transform: translateY(-4px);
    box-shadow: var(--sh);
}
.dfb-offer-item i {
    font-size: 1.5rem;
    color: var(--gold);
    width: 48px;
    height: 48px;
    background: var(--gold-bg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Global Reach */
.dfb-global-section {
    background: var(--light-bg);
}
.dfb-global-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}
.dfb-global-regions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.dfb-region {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    background: var(--white);
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.5rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--navy);
    box-shadow: var(--sh-sm);
    transition: all var(--ease);
}
.dfb-region:hover {
    border-color: rgba(201, 164, 53, 0.4);
    box-shadow: var(--sh);
}
.dfb-region i {
    color: var(--gold);
    font-size: 1.15rem;
}

/* Community / Join DDK */
.dfb-tagline {
    display: inline-block;
    font-size: 1.15rem;
    color: var(--navy);
    font-style: italic;
    background: var(--gold-bg);
    border: 1px solid rgba(201, 164, 53, 0.28);
    border-radius: var(--radius);
    padding: 1rem 2rem;
    margin: 1.5rem 0 2rem;
}
.dfb-community-btns {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* ──────────────────────────────────────────
   GLOBAL SPACING OVERRIDES (tighter layout)
────────────────────────────────────────── */
.mb-5 {
    margin-bottom: 1.25rem !important;
}
.mt-4 {
    margin-top: 1.5rem !important;
}
.mb-4 {
    margin-bottom: 1.5rem !important;
}

/* ──────────────────────────────────────────
   LEFT FLOATING SIDEBAR — modern 2025
────────────────────────────────────────── */
.lf-sidebar {
    position: fixed;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1050;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lf-item {
    position: relative;
}

/* Icon trigger button */
.lf-icon-btn {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: rgba(26, 46, 74, 0.88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(201, 164, 53, 0.22);
    color: #c9a435;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.26s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow:
        0 4px 18px rgba(0, 0, 0, 0.22),
        0 1px 4px rgba(0, 0, 0, 0.12);
    position: relative;
    overflow: hidden;
}
.lf-icon-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(201, 164, 53, 0.15) 0%,
        transparent 60%
    );
    border-radius: inherit;
}
.lf-icon-btn:hover {
    background: #c9a435;
    color: #1a2e4a;
    border-color: transparent;
    transform: scale(1.1) translateX(3px);
    box-shadow: 0 6px 24px rgba(201, 164, 53, 0.4);
}
.lf-icon-btn.lf-active {
    background: #c9a435;
    color: #1a2e4a;
    border-color: transparent;
    transform: scale(1.05) translateX(3px);
    box-shadow: 0 6px 24px rgba(201, 164, 53, 0.38);
}

/* Tooltip label on hover (hidden when drawer is open) */
.lf-icon-btn[title]:hover::after {
    content: attr(title);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    background: rgba(26, 46, 74, 0.92);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
    padding: 0.3rem 0.65rem;
    border-radius: 6px;
    letter-spacing: 0.04em;
    pointer-events: none;
    z-index: 2;
}
.lf-icon-btn.lf-active::after {
    display: none;
}

/* Slide-out drawer panel */
.lf-drawer {
    position: absolute;
    left: calc(46px + 14px);
    top: 50%;
    transform: translateY(-50%) translateX(-12px) scale(0.93);
    opacity: 0;
    pointer-events: none;
    transition: all 0.32s cubic-bezier(0.34, 1.4, 0.64, 1);
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 18px;
    box-shadow:
        0 12px 48px rgba(0, 0, 0, 0.13),
        0 2px 8px rgba(0, 0, 0, 0.06),
        0 0 0 1px rgba(255, 255, 255, 0.6) inset;
    border: 1px solid rgba(201, 164, 53, 0.18);
    padding: 1.1rem 1.25rem 1.2rem;
    min-width: 220px;
}
.lf-drawer.lf-open {
    transform: translateY(-50%) translateX(0) scale(1);
    opacity: 1;
    pointer-events: all;
}

/* Drawer title */
.lf-drawer-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #1a2e4a;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.8rem;
    padding-bottom: 0.6rem;
    border-bottom: 1.5px solid rgba(201, 164, 53, 0.25);
}
.lf-drawer-title::before {
    content: "";
    width: 14px;
    height: 3px;
    background: #c9a435;
    border-radius: 2px;
    flex-shrink: 0;
}

/* ── Language ── */
.lf-lang-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.lf-lang-pill {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.55rem 0.75rem;
    border-radius: 12px;
    border: 1.5px solid rgba(26, 46, 74, 0.08);
    background: transparent;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
}
.lf-lang-pill:hover {
    background: rgba(201, 164, 53, 0.07);
    border-color: rgba(201, 164, 53, 0.35);
}
.lf-lang-pill.lf-active-lang {
    background: #1a2e4a;
    border-color: #1a2e4a;
    box-shadow: 0 4px 14px rgba(26, 46, 74, 0.2);
}
/* language code badge */
.lf-lc {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: #c9a435;
    background: rgba(201, 164, 53, 0.14);
    padding: 0.18rem 0.45rem;
    border-radius: 6px;
    min-width: 30px;
    text-align: center;
    flex-shrink: 0;
}
.lf-lang-pill.lf-active-lang .lf-lc {
    background: rgba(201, 164, 53, 0.22);
    color: #e8c252;
}
/* language full name */
.lf-ln {
    font-size: 0.83rem;
    font-weight: 600;
    color: #1a2e4a;
    flex: 1;
}
.lf-lang-pill.lf-active-lang .lf-ln {
    color: #fff;
}
/* check icon */
.lf-lcheck {
    font-size: 0.72rem;
    color: #c9a435;
    opacity: 0;
    transition: opacity 0.18s;
    flex-shrink: 0;
}
.lf-lang-pill.lf-active-lang .lf-lcheck {
    opacity: 1;
}

/* ── Social ── */
.lf-social-row {
    display: flex;
    gap: 0.6rem;
}
.lf-soc-btn {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.95rem;
    text-decoration: none;
    transition:
        transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.2s;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
}
.lf-soc-btn:hover {
    transform: translateY(-4px) scale(1.08);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    color: #fff;
}
.lf-soc-fb {
    background: #1877f2;
}
.lf-soc-ig {
    background: linear-gradient(135deg, #f09433 0%, #dc2743 50%, #bc1888 100%);
}
.lf-soc-wa {
    background: #25d366;
}
.lf-soc-li {
    background: #0a66c2;
}
.lf-soc-yt {
    background: #ff0000;
}

/* ── Contact form ── */
.lf-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 230px;
}
.lf-inp {
    width: 100%;
    padding: 0.5rem 0.7rem;
    border: 1.5px solid rgba(26, 46, 74, 0.12);
    border-radius: 10px;
    font-size: 0.81rem;
    color: #1a2e4a;
    font-family: inherit;
    outline: none;
    background: rgba(26, 46, 74, 0.04);
    transition:
        border-color 0.2s,
        background 0.2s,
        box-shadow 0.2s;
    resize: none;
}
.lf-inp:focus {
    border-color: #c9a435;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(201, 164, 53, 0.12);
}
.lf-inp::placeholder {
    color: rgba(26, 46, 74, 0.35);
}
.lf-submit {
    background: #1a2e4a;
    color: #c9a435;
    border: none;
    padding: 0.55rem;
    border-radius: 10px;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    transition: all 0.22s ease;
    font-family: inherit;
    letter-spacing: 0.03em;
}
.lf-submit:hover {
    background: #c9a435;
    color: #1a2e4a;
    box-shadow: 0 4px 16px rgba(201, 164, 53, 0.35);
}
.lf-msg-ok {
    display: none;
    color: #2d7a4f;
    font-size: 0.8rem;
    font-weight: 600;
    text-align: center;
    margin-top: 0.25rem;
}

/* ──────────────────────────────────────────
   DDK AUTOS – AUTOMOBILE PAGE (auto-* classes)
────────────────────────────────────────── */

/* Hero focus strip */
.auto-focus-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 1.5rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
}
.auto-focus-strip span {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.auto-focus-strip i {
    color: var(--gold);
}
.auto-sep {
    color: rgba(255, 255, 255, 0.35);
    margin: 0 0.3rem;
}

/* About image */
.auto-about-img {
    border-radius: var(--radius-lg);
    overflow: hidden;
    min-height: 320px;
}
.auto-about-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Mission / Vision */
.auto-mission-vision {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin-top: 1.25rem;
}
.auto-mv-item {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    background: var(--gold-bg);
    border: 1px solid rgba(201, 164, 53, 0.22);
    border-radius: var(--radius);
    padding: 0.9rem 1.1rem;
}
.auto-mv-item > i {
    font-size: 1.1rem;
    color: var(--gold);
    margin-top: 0.15rem;
    flex-shrink: 0;
    width: 18px;
    text-align: center;
}
.auto-mv-item h5 {
    color: var(--navy);
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 0.2rem;
}
.auto-mv-item p {
    font-size: 0.82rem;
    color: var(--gray-600);
    margin: 0;
    line-height: 1.5;
}

/* How It Works steps */
.auto-steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    padding-top: 1rem;
}
.auto-step-card {
    background: var(--white);
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: 1.4rem 1.1rem 1.2rem;
    text-align: center;
    box-shadow: var(--sh-sm);
    transition: all var(--ease);
    position: relative;
}
.auto-step-card:hover {
    border-color: rgba(201, 164, 53, 0.4);
    transform: translateY(-4px);
    box-shadow: var(--sh);
}
.auto-step-highlight {
    border-color: rgba(201, 164, 53, 0.35);
    background: #fffdf5;
}
.auto-step-num {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    width: 26px;
    height: 26px;
    background: var(--gold);
    color: #07121f;
    border-radius: 50%;
    font-size: 0.78rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}
.auto-step-icon {
    width: 50px;
    height: 50px;
    background: var(--gold-bg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--gold);
    margin: 0.5rem auto 0.8rem;
}
.auto-step-card h4 {
    color: var(--navy);
    font-size: 0.92rem;
    font-weight: 700;
    margin-bottom: 0.4rem;
}
.auto-step-card p {
    font-size: 0.81rem;
    color: var(--gray-600);
    margin: 0;
    line-height: 1.5;
}

/* Services grid */
.auto-services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}
.auto-service-card {
    background: var(--white);
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: 1.4rem 1.25rem;
    box-shadow: var(--sh-sm);
    transition: all var(--ease);
}
.auto-service-card:hover {
    border-color: rgba(201, 164, 53, 0.4);
    transform: translateY(-4px);
    box-shadow: var(--sh);
}
.auto-svc-icon {
    width: 48px;
    height: 48px;
    background: var(--gold-bg);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: var(--gold);
    margin-bottom: 0.85rem;
    transition: all var(--ease);
}
.auto-service-card:hover .auto-svc-icon {
    background: linear-gradient(135deg, var(--gold), var(--gold-dk));
    color: var(--white);
}
.auto-service-card h4 {
    color: var(--navy);
    font-size: 0.93rem;
    font-weight: 700;
    margin-bottom: 0.45rem;
}
.auto-service-card p {
    font-size: 0.83rem;
    color: var(--gray-600);
    margin-bottom: 0.55rem;
    line-height: 1.5;
}
.auto-svc-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
}
.auto-svc-list li {
    font-size: 0.79rem;
    color: var(--gray-600);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.auto-svc-list li::before {
    content: "•";
    color: var(--gold);
    font-size: 1rem;
    flex-shrink: 0;
}

/* Vehicle categories */
.auto-cat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}
.auto-cat-card {
    background: var(--white);
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: 1.4rem 1.25rem;
    text-align: center;
    box-shadow: var(--sh-sm);
    transition: all var(--ease);
}
.auto-cat-card:hover {
    border-color: rgba(201, 164, 53, 0.4);
    transform: translateY(-4px);
    box-shadow: var(--sh);
}
.auto-cat-icon {
    width: 52px;
    height: 52px;
    background: var(--gold-bg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--gold);
    margin: 0 auto 0.85rem;
    transition: all var(--ease);
}
.auto-cat-card:hover .auto-cat-icon {
    background: var(--gold);
    color: var(--white);
}
.auto-cat-card h4 {
    color: var(--navy);
    font-size: 0.93rem;
    font-weight: 700;
    margin-bottom: 0.35rem;
}
.auto-cat-card p {
    font-size: 0.81rem;
    color: var(--gray-600);
    margin: 0;
    line-height: 1.5;
}

/* Target markets + Why choose */
.auto-tw-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem;
}
.auto-markets-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
    margin-top: 0.9rem;
}
.auto-market-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 0.55rem 0.85rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--navy);
    transition: all var(--ease);
}
.auto-market-item:hover {
    border-color: rgba(201, 164, 53, 0.38);
    background: var(--gold-bg);
}
.auto-market-item i {
    color: var(--gold);
    font-size: 0.78rem;
}
.auto-why-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 0.9rem;
}
.auto-why-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.7rem 0.95rem;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    font-size: 0.86rem;
    font-weight: 500;
    color: var(--navy);
    transition: all var(--ease);
}
.auto-why-item:hover {
    border-color: rgba(201, 164, 53, 0.38);
    background: var(--gold-bg);
}
.auto-why-item i {
    color: var(--gold);
    font-size: 0.9rem;
    flex-shrink: 0;
}

/* Global Platform */
.auto-platform-section {
    background: var(--navy);
}
.auto-platform-section .section-title {
    color: var(--white);
}
.auto-platform-section .divider {
    background: var(--gold);
}
.auto-platform-section .section-subtitle {
    color: rgba(255, 255, 255, 0.65);
}
.auto-platform-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
.auto-plat-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius);
    padding: 0.9rem 1.1rem;
    font-size: 0.86rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.88);
    transition: all var(--ease);
}
.auto-plat-item:hover {
    background: rgba(201, 164, 53, 0.12);
    border-color: rgba(201, 164, 53, 0.3);
}
.auto-plat-item i {
    color: var(--gold);
    font-size: 1.05rem;
    flex-shrink: 0;
}

/* Contact info & form tips */
.auto-contact-info {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin: 1rem 0 1.2rem;
}
.auto-ci-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-size: 0.87rem;
    color: var(--gray-700);
}
.auto-ci-item i {
    color: var(--gold);
    width: 16px;
    text-align: center;
}
.auto-ci-item a {
    color: var(--navy);
    font-weight: 600;
}
.auto-ci-item a:hover {
    color: var(--gold);
}
.auto-form-tips {
    background: var(--gold-bg);
    border: 1px solid rgba(201, 164, 53, 0.22);
    border-radius: var(--radius);
    padding: 0.9rem 1.1rem;
}
.auto-tip-title {
    font-size: 0.86rem;
    margin-bottom: 0.5rem;
}
.auto-form-tips ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
}
.auto-form-tips ul li {
    font-size: 0.81rem;
    color: var(--gray-700);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.auto-form-tips ul li::before {
    content: "✓";
    color: var(--gold);
    font-weight: 700;
    flex-shrink: 0;
}

/* ──────────────────────────────────────────
   WORLD MAP — Home page global presence
────────────────────────────────────────── */
.worldmap-wrap {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.35);
    background: #0a1a2e;
}
.worldmap-svg {
    width: 100%;
    height: auto;
    display: block;
}

/* ──────────────────────────────────────────
   SECTOR CONTACT STRIP
────────────────────────────────────────── */
.sector-contact-strip {
    background: #f4f7fb;
    border-top: 3px solid var(--gold);
    padding: 2rem 0;
}
.scs-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}
.scs-item {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
}
.scs-item > i {
    font-size: 1.3rem;
    color: var(--gold);
    margin-top: 2px;
    flex-shrink: 0;
}
.scs-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--navy);
    margin-bottom: 2px;
}
.scs-item a,
.scs-item span {
    font-size: 0.88rem;
    color: var(--gray-700);
    font-weight: 500;
    word-break: break-word;
}
.scs-item a:hover {
    color: var(--gold);
}

/* ──────────────────────────────────────────
   CTA BUTTON ROW
────────────────────────────────────────── */
.cta-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    justify-content: center;
    margin-top: 1rem;
}
.btn-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: #25d366;
    color: #fff;
    border: none;
    padding: 0.55rem 1.3rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.92rem;
    text-decoration: none;
    transition: background 0.2s;
}
.btn-whatsapp:hover {
    background: #1aad52;
    color: #fff;
}

/* ──────────────────────────────────────────
   AFRICUISINE — Events menu tab styles
────────────────────────────────────────── */
.rmenu-tab--events {
    background: rgba(201, 164, 53, 0.12) !important;
    border-color: var(--gold) !important;
    color: var(--gold) !important;
}
.rmenu-tab--events.active,
.rmenu-tab--events:hover {
    background: var(--gold) !important;
    color: #fff !important;
}
.rmenu-events-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-top: 1.2rem;
}
.rmenu-event-card {
    background: #fff;
    border: 1px solid #e8e0d0;
    border-radius: 10px;
    padding: 1.4rem 1.4rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    transition:
        box-shadow 0.2s,
        border-color 0.2s;
}
.rmenu-event-card:hover {
    box-shadow: 0 6px 24px rgba(201, 164, 53, 0.15);
    border-color: var(--gold);
}
.rmenu-event-icon {
    font-size: 1.5rem;
    line-height: 1;
    color: var(--gold);
    width: 42px;
    height: 42px;
    background: rgba(201,164,53,0.1);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.rmenu-event-title {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--navy);
    font-family: "Lato", sans-serif;
}
.rmenu-event-desc {
    font-size: 0.85rem;
    color: var(--gray-700);
}
.rmenu-event-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
}
.rmenu-event-list li {
    font-size: 0.82rem;
    color: var(--gray-700);
    padding-left: 1.1rem;
    position: relative;
}
.rmenu-event-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--green);
    font-weight: 700;
}
.rmenu-event-price {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--gold);
    font-family: "Lato", sans-serif;
    margin-top: auto;
    padding-top: 0.5rem;
    border-top: 1px solid #f0e8d8;
}
.rmenu-event-unit {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--gray-700);
}
.rmenu-events-cta {
    background: var(--navy);
    color: #fff;
    border-radius: 10px;
    padding: 1.5rem 2rem;
    margin-top: 2rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}
.rmenu-events-cta p {
    margin: 0;
    font-size: 0.9rem;
    color: #c8d8e8;
    flex: 1;
    min-width: 200px;
}

/* ──────────────────────────────────────────
   AFRICUISINE — Restaurant Menu Board Style
────────────────────────────────────────── */
.mboard-wrap {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 1.5rem;
}
.mboard-cat {
    display: grid;
    grid-template-columns: 1fr 210px;
    gap: 2rem;
    align-items: start;
    background: #fff;
    border-radius: 14px;
    padding: 1.8rem 2rem;
    box-shadow: 0 2px 18px rgba(26, 46, 74, 0.07);
    border-left: 5px solid var(--gold);
}
.mboard-cat:nth-child(even) {
    border-left-color: var(--green);
}
.mboard-cat__heading {
    font-family: 'Lato', sans-serif;
    font-size: 1.4rem;
    font-weight: 900;
    color: var(--navy);
    margin: 0 0 0.2rem;
    line-height: 1.2;
    letter-spacing: 0.01em;
}
.mboard-cat:nth-child(even) .mboard-cat__heading {
    color: var(--green);
}
.mboard-cat__rule {
    width: 55px;
    height: 3px;
    background: var(--gold);
    border-radius: 2px;
    margin-bottom: 1rem;
}
.mboard-cat:nth-child(even) .mboard-cat__rule {
    background: var(--green);
}
.mboard-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.mboard-list li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.45rem 0;
    border-bottom: 1px dotted #e4ddd0;
}
.mboard-list li:last-child {
    border-bottom: none;
}
.mboard-item-left {
    flex: 1;
}
.mboard-item-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1a1a1a;
    display: block;
}
.mboard-item-sub {
    font-size: 0.8rem;
    color: var(--gray-700);
    display: block;
    margin-top: 0.1rem;
}
.mboard-item-price {
    font-size: 1rem;
    font-weight: 700;
    color: var(--gold);
    white-space: nowrap;
    text-align: right;
    min-width: 55px;
}
.mboard-item-price small {
    display: block;
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--gray-700);
}
.mboard-cat__img {
    width: 210px;
    height: 210px;
    object-fit: cover;
    border-radius: 10px;
    display: block;
    flex-shrink: 0;
}
@media (max-width: 820px) {
    .mboard-cat {
        grid-template-columns: 1fr;
        padding: 1.4rem;
        gap: 1.2rem;
    }
    .mboard-cat__img {
        width: 100%;
        height: 200px;
        order: -1;
    }
    .mboard-cat__heading { font-size: 1.7rem; }
}

/* ──────────────────────────────────────────
   AFRICUISINE — Category Scroll Menu Layout
────────────────────────────────────────── */
.menu-category {
    border-left: 4px solid var(--gold);
    padding-left: 1.2rem;
    margin-bottom: 2.5rem;
}
.menu-cat-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--navy);
    font-family: "Lato", sans-serif;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e8e0d0;
}
.rmenu-price small {
    display: block;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--gray-700);
    margin-top: 2px;
}

/* ── Header: Get in Touch Button ── */
.ddk-git-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.44rem 1.05rem;
    background: var(--gold);
    color: var(--navy);
    font-size: 0.8rem;
    font-weight: 700;
    border-radius: 8px;
    text-decoration: none;
    letter-spacing: 0.01em;
    transition: all 0.2s ease;
    white-space: nowrap;
    border: 2px solid transparent;
}
.ddk-git-btn:hover {
    background: transparent;
    border-color: var(--gold);
    color: var(--gold);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(201, 164, 53, 0.3);
}

/* ── AFH: African Fashion Heritage Section ── */
.afh-section {
    padding: 5rem 0;
    background: linear-gradient(135deg, #fdfbf6 0%, #f9f4e8 100%);
    position: relative;
    overflow: hidden;
}
.afh-section::before {
    content: '';
    position: absolute;
    top: -80px;
    right: -80px;
    width: 360px;
    height: 360px;
    background: radial-gradient(circle, rgba(201, 164, 53, 0.08) 0%, transparent 70%);
    pointer-events: none;
}
.afh-section::after {
    content: '';
    position: absolute;
    bottom: -60px;
    left: -60px;
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, rgba(26, 46, 74, 0.05) 0%, transparent 70%);
    pointer-events: none;
}
.afh-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    position: relative;
    z-index: 1;
}
.afh-card {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.07);
    transition: transform 0.32s ease, box-shadow 0.32s ease;
    display: flex;
    flex-direction: column;
}
.afh-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.13);
}
.afh-card-accent {
    height: 5px;
    width: 100%;
    flex-shrink: 0;
}
.afh-card--ankara .afh-card-accent { background: linear-gradient(90deg, #e8720c, #f5a623); }
.afh-card--kente  .afh-card-accent { background: linear-gradient(90deg, #2d6a4f, #c9a435); }
.afh-card--adire  .afh-card-accent { background: linear-gradient(90deg, #1a237e, #5c6bc0); }
.afh-card--asoke  .afh-card-accent { background: linear-gradient(90deg, #6b2d6b, #c9a435); }
.afh-card-body {
    padding: 1.8rem 1.6rem 1.6rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.afh-icon-wrap {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    margin-bottom: 1rem;
    transition: transform 0.28s ease;
}
.afh-card:hover .afh-icon-wrap {
    transform: scale(1.08) rotate(-3deg);
}
.afh-card--ankara .afh-icon-wrap { background: rgba(232, 114, 12, 0.1); }
.afh-card--kente  .afh-icon-wrap { background: rgba(45, 106, 79, 0.1); }
.afh-card--adire  .afh-icon-wrap { background: rgba(26, 35, 126, 0.1); }
.afh-card--asoke  .afh-icon-wrap { background: rgba(107, 45, 107, 0.1); }
.afh-fabric-tag {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    padding: 0.22rem 0.65rem;
    border-radius: 20px;
    margin-bottom: 0.8rem;
}
.afh-card--ankara .afh-fabric-tag { background: rgba(232, 114, 12, 0.1);  color: #c85c00; }
.afh-card--kente  .afh-fabric-tag { background: rgba(45, 106, 79, 0.12);  color: #1e5c3a; }
.afh-card--adire  .afh-fabric-tag { background: rgba(26, 35, 126, 0.1);   color: #1a237e; }
.afh-card--asoke  .afh-fabric-tag { background: rgba(107, 45, 107, 0.1);  color: #6b2d6b; }
.afh-fabric-name {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 0.55rem;
    line-height: 1.2;
}
.afh-fabric-desc {
    font-size: 0.86rem;
    color: var(--gray-600);
    line-height: 1.65;
    margin-bottom: 1.4rem;
    flex: 1;
}
.afh-origin {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 0.3rem 0.75rem;
    border-radius: 20px;
    align-self: flex-start;
}
.afh-origin i { font-size: 0.7rem; }
.afh-card--ankara .afh-origin { background: rgba(232, 114, 12, 0.08); color: #c85c00; }
.afh-card--kente  .afh-origin { background: rgba(45, 106, 79, 0.1);   color: #1e5c3a; }
.afh-card--adire  .afh-origin { background: rgba(26, 35, 126, 0.08);  color: #1a237e; }
.afh-card--asoke  .afh-origin { background: rgba(107, 45, 107, 0.08); color: #6b2d6b; }

/* ──────────────────────────────────────────
   AREAS OF OPERATION SECTION
────────────────────────────────────────── */
.nh-areas {
    padding: 5rem 0;
    background: linear-gradient(135deg, #0d1f35 0%, #1a2e4a 50%, #0f2540 100%);
    position: relative;
    overflow: hidden;
}
.nh-areas::before {
    content: '';
    position: absolute;
    top: -80px; right: -80px;
    width: 350px; height: 350px;
    background: radial-gradient(circle, rgba(201,164,53,0.12) 0%, transparent 70%);
    pointer-events: none;
}
.nh-areas::after {
    content: '';
    position: absolute;
    bottom: -60px; left: -60px;
    width: 280px; height: 280px;
    background: radial-gradient(circle, rgba(45,122,79,0.1) 0%, transparent 70%);
    pointer-events: none;
}
.nh-areas .nh-sec-label {
    color: var(--gold);
    opacity: 0.9;
}
.nh-areas .nh-sec-title {
    color: #fff;
}
.nh-areas .nh-sec-sub {
    color: rgba(255,255,255,0.65);
}
.nh-areas__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 3rem;
    position: relative;
    z-index: 2;
}
.nh-areas__card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    padding: 2rem 1.75rem;
    text-align: center;
    backdrop-filter: blur(8px);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.nh-areas__card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.35);
}
.nh-areas__card--africa  { border-top: 3px solid #4db87d; }
.nh-areas__card--africa:hover { border-color: #4db87d; box-shadow: 0 20px 50px rgba(77,184,125,0.2); }
.nh-areas__card--asia    { border-top: 3px solid var(--gold); }
.nh-areas__card--asia:hover  { border-color: var(--gold); box-shadow: 0 20px 50px rgba(201,164,53,0.2); }
.nh-areas__card--europe  { border-top: 3px solid #5b9bd5; }
.nh-areas__card--europe:hover { border-color: #5b9bd5; box-shadow: 0 20px 50px rgba(91,155,213,0.2); }

.nh-areas__icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    margin: 0 auto 1rem;
}
.nh-areas__card--africa  .nh-areas__icon { background: rgba(77,184,125,0.15); color: #4db87d; }
.nh-areas__card--asia    .nh-areas__icon { background: rgba(201,164,53,0.15); color: var(--gold); }
.nh-areas__card--europe  .nh-areas__icon { background: rgba(91,155,213,0.15); color: #5b9bd5; }

.nh-areas__continent {
    font-size: 1.25rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 1.25rem;
    letter-spacing: 0.02em;
}
.nh-areas__list {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}
.nh-areas__list li {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    color: rgba(255,255,255,0.85);
    font-size: 0.95rem;
    font-weight: 500;
}
.nh-areas__list li:last-child { border-bottom: none; }
.nh-areas__flag {
    font-size: 1.3rem;
    line-height: 1;
}
.nh-areas__hq {
    margin-left: auto;
    background: var(--gold);
    color: #0d1f35;
    font-size: 0.65rem;
    font-weight: 800;
    padding: 0.15rem 0.5rem;
    border-radius: 20px;
    letter-spacing: 0.05em;
}

@media (max-width: 768px) {
    .nh-areas__grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
    .nh-areas__card {
        padding: 1.5rem 1.25rem;
    }
}

/* ──────────────────────────────────────────
   FEATURED DISH CARDS — AFRICUISINE MENU
────────────────────────────────────────── */
.fdish-filter-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    justify-content: center;
    margin-bottom: 2.5rem;
}
.fdish-filter-btn {
    border: 1.5px solid #e2e0d8;
    background: #fff;
    color: #444;
    padding: 0.45rem 1.1rem;
    border-radius: 100px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.22s ease;
    font-family: "Poppins", sans-serif;
}
.fdish-filter-btn:hover,
.fdish-filter-btn.active {
    background: var(--gold);
    border-color: var(--gold);
    color: #0d1f35;
}

.fdish-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
}

.fdish-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.09);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}
.fdish-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.15);
}
.fdish-card.hidden { display: none; }

.fdish-img-wrap {
    position: relative;
    height: 240px;
    overflow: hidden;
    background: #f0ede6;
}
.fdish-main-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
    display: block;
}
.fdish-card:hover .fdish-main-img {
    transform: scale(1.04);
}
.fdish-img-wrap--no-img {
    background: linear-gradient(135deg, #1a2e4a 0%, #2d4a6e 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}
.fdish-emoji-placeholder {
    font-size: 5rem;
    opacity: 0.7;
}
.fdish-gallery {
    position: absolute;
    bottom: 0.6rem;
    right: 0.6rem;
    display: flex;
    gap: 0.35rem;
}
.fdish-gallery img {
    width: 46px;
    height: 46px;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid rgba(255,255,255,0.8);
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease;
    display: block;
}
.fdish-gallery img:hover {
    transform: scale(1.08);
    border-color: var(--gold);
}
.fdish-cat-tag {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    background: rgba(201,164,53,0.92);
    color: #0d1f35;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.25rem 0.7rem;
    border-radius: 100px;
    letter-spacing: 0.03em;
    backdrop-filter: blur(4px);
}
.fdish-cat-tag--signature {
    background: rgba(201,164,53,0.95);
}
.fdish-cat-tag--spicy {
    background: rgba(220,50,30,0.88);
    color: #fff;
}

.fdish-body {
    padding: 1.3rem 1.4rem 1.4rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.fdish-name {
    font-size: 1.1rem;
    font-weight: 800;
    color: #1a2e4a;
    margin-bottom: 0.2rem;
    line-height: 1.3;
}
.fdish-name-alt {
    font-size: 0.85rem;
    font-weight: 500;
    color: #888;
}
.fdish-variants {
    font-size: 0.78rem;
    color: var(--gold);
    font-weight: 600;
    margin-bottom: 0.9rem;
    letter-spacing: 0.01em;
}
.fdish-highlights {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
    flex: 1;
}
.fdish-highlights li {
    font-size: 0.82rem;
    color: #555;
    padding: 0.28rem 0;
    border-bottom: 1px solid #f0ede6;
    padding-left: 1.2rem;
    position: relative;
    line-height: 1.4;
}
.fdish-highlights li:last-child { border-bottom: none; }
.fdish-highlights li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--gold);
    font-weight: 700;
    font-size: 0.75rem;
}

.fdish-pricing {
    background: #f8f6f0;
    border-radius: 10px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
}
.fdish-price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.fdish-price-row + .fdish-price-row {
    margin-top: 0.4rem;
    padding-top: 0.4rem;
    border-top: 1px dashed #ddd;
}
.fdish-price-label {
    font-size: 0.78rem;
    color: #666;
    font-weight: 500;
}
.fdish-price-val {
    font-size: 1.15rem;
    font-weight: 800;
    color: #1a2e4a;
}
.fdish-price-row--family .fdish-price-val {
    color: var(--gold);
}

.fdish-order-btn {
    display: block;
    text-align: center;
    background: #1a2e4a;
    color: #fff;
    padding: 0.65rem 1rem;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 700;
    transition: background 0.22s ease;
    text-decoration: none;
}
.fdish-order-btn:hover {
    background: var(--gold);
    color: #0d1f35;
}

@media (max-width: 992px) {
    .fdish-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }
}
@media (max-width: 576px) {
    .fdish-grid {
        grid-template-columns: 1fr;
    }
    .fdish-img-wrap { height: 220px; }
    .fdish-filter-wrap { gap: 0.4rem; }
    .fdish-filter-btn { font-size: 0.78rem; padding: 0.38rem 0.85rem; }
}

/* ══════════════════════════════════════════════════════
   HERO SWIPER — Homepage Full-Screen Slider
══════════════════════════════════════════════════════ */
.nh-hero-swiper {
    position: relative;
    overflow: hidden;
}

/* ── Swiper core wrapper ── */
.hero-swiper {
    width: 100%;
    height: 100vh;
    min-height: 620px;
    max-height: 900px;
}

/* ── Each slide ── */
.hswiper-slide {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
}

/* ── Dark gradient overlay (default) ── */
.hswiper-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        120deg,
        rgba(10, 20, 38, 0.82) 0%,
        rgba(10, 20, 38, 0.55) 55%,
        rgba(10, 20, 38, 0.30) 100%
    );
    z-index: 1;
}
.hswiper-overlay--amber {
    background: linear-gradient(
        120deg,
        rgba(10, 20, 38, 0.88) 0%,
        rgba(30, 15, 0, 0.60) 55%,
        rgba(10, 20, 38, 0.25) 100%
    );
}
.hswiper-overlay--navy {
    background: linear-gradient(
        120deg,
        rgba(10, 20, 50, 0.90) 0%,
        rgba(10, 20, 50, 0.60) 55%,
        rgba(10, 20, 50, 0.25) 100%
    );
}
.hswiper-overlay--dark {
    background: linear-gradient(
        120deg,
        rgba(5, 5, 10, 0.88) 0%,
        rgba(5, 5, 10, 0.60) 55%,
        rgba(5, 5, 10, 0.25) 100%
    );
}
.hswiper-overlay--green {
    background: linear-gradient(
        120deg,
        rgba(5, 30, 15, 0.88) 0%,
        rgba(5, 30, 15, 0.58) 55%,
        rgba(5, 30, 15, 0.25) 100%
    );
}

/* ── Slide content ── */
.hswiper-content {
    position: relative;
    z-index: 2;
    padding-top: 7rem;
    padding-bottom: 5rem;
    max-width: 720px;
    animation: hswiper-fade-up 0.8s ease both;
}
@keyframes hswiper-fade-up {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Pill label ── */
.hswiper-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(201,164,53,0.18);
    border: 1px solid rgba(201,164,53,0.45);
    color: #e0bb55;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 0.35rem 1rem;
    border-radius: 100px;
    margin-bottom: 1.4rem;
    backdrop-filter: blur(6px);
}
.hswiper-pill--amber { border-color: rgba(201,164,53,0.6); background: rgba(201,164,53,0.15); }
.hswiper-pill--gold  { border-color: rgba(201,164,53,0.7); background: rgba(201,164,53,0.20); }
.hswiper-pill--green { border-color: rgba(45,122,79,0.7);  background: rgba(45,122,79,0.18);  color: #6dd4a0; }
.hswiper-pill__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    animation: hsDot 1.5s ease-in-out infinite;
}
@keyframes hsDot {
    0%,100% { opacity:1; transform:scale(1); }
    50%      { opacity:0.4; transform:scale(0.7); }
}

/* ── Heading ── */
.hswiper-h1 {
    font-family: "Lato", sans-serif;
    font-size: clamp(2rem, 5vw, 3.8rem);
    font-weight: 900;
    color: #fff;
    line-height: 1.15;
    margin-bottom: 1.25rem;
    letter-spacing: -0.01em;
}
.hswiper-gold {
    background: linear-gradient(90deg, #e8c85a 0%, #c9a435 60%, #a07a20 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Subtitle ── */
.hswiper-sub {
    font-size: clamp(0.95rem, 1.8vw, 1.1rem);
    color: rgba(255,255,255,0.78);
    line-height: 1.75;
    margin-bottom: 2rem;
    max-width: 580px;
}

/* ── CTA Buttons ── */
.hswiper-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
.hswiper-btn-gold {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #c9a435, #a07a20);
    color: #0d1f35;
    font-size: 0.92rem;
    font-weight: 700;
    padding: 0.8rem 1.8rem;
    border-radius: 8px;
    text-decoration: none;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
    box-shadow: 0 4px 20px rgba(201,164,53,0.4);
}
.hswiper-btn-gold:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(201,164,53,0.55);
    color: #0d1f35;
}
.hswiper-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    border: 2px solid rgba(255,255,255,0.5);
    color: #fff;
    font-size: 0.92rem;
    font-weight: 600;
    padding: 0.78rem 1.8rem;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.22s ease;
    backdrop-filter: blur(4px);
}
.hswiper-btn-ghost:hover {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.8);
    color: #fff;
}

/* ── Navigation arrows ── */
.hswiper-next,
.hswiper-prev {
    width: 52px !important;
    height: 52px !important;
    background: rgba(255,255,255,0.1) !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
    border-radius: 50% !important;
    backdrop-filter: blur(8px);
    transition: all 0.22s ease !important;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hswiper-next::after,
.hswiper-prev::after { display: none !important; }
.hswiper-next i,
.hswiper-prev i { color: #fff; font-size: 1rem; }
.hswiper-next:hover,
.hswiper-prev:hover {
    background: rgba(201,164,53,0.8) !important;
    border-color: var(--gold) !important;
}
.hswiper-next:hover i,
.hswiper-prev:hover i { color: #0d1f35; }

/* ── Pagination dots ── */
.hswiper-pagination {
    bottom: 6rem !important;
}
.hswiper-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: rgba(255,255,255,0.45);
    opacity: 1;
    transition: all 0.3s ease;
}
.hswiper-pagination .swiper-pagination-bullet-active {
    background: var(--gold);
    width: 28px;
    border-radius: 4px;
}

/* ── Slide counter ── */
.hswiper-counter {
    position: absolute;
    bottom: 5.5rem;
    right: 2.5rem;
    z-index: 10;
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
    color: rgba(255,255,255,0.7);
    font-family: "Lato", sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}
.hswiper-cur { font-size: 1.6rem; color: var(--gold); font-weight: 900; line-height: 1; }
.hswiper-sep { font-size: 0.9rem; }

/* ── Responsive ── */
@media (max-width: 768px) {
    .hero-swiper {
        height: 88vh;
        min-height: 500px;
    }
    .hswiper-content { padding-top: 6rem; }
    .hswiper-next, .hswiper-prev { display: none !important; }
    .hswiper-counter { display: none; }
    .hswiper-pagination { bottom: 4.5rem !important; }
}
@media (max-width: 480px) {
    .hswiper-h1 { font-size: 1.8rem; }
    .hswiper-ctas { flex-direction: column; }
    .hswiper-btn-gold, .hswiper-btn-ghost { justify-content: center; }
}

/* ══════════════════════════════════════════════════════
   DISH SWIPER — Africuisine Signature Menu Showcase
══════════════════════════════════════════════════════ */
.dswiper-section {
    background: #0a0f1a;
    padding: 0 0 3rem;
    overflow: hidden;
}

.dswiper-header {
    padding: 4rem 1rem 2.5rem;
    background: linear-gradient(to bottom, #0d1525, #0a0f1a);
}
.dswiper-header .section-title { color: #fff; }
.dswiper-header .section-subtitle { color: rgba(255,255,255,0.65); }
.dswiper-header .divider {
    background: linear-gradient(90deg, transparent, #c9a84c, transparent);
    height: 2px;
    margin: 1rem auto;
    width: 120px;
    border: none;
}

/* ── Swiper container ── */
.dish-swiper {
    width: 100%;
    padding-bottom: 4rem !important;
}

/* ── Each slide ── */
.dswiper-slide {
    display: flex;
    align-items: stretch;
    min-height: 520px;
    background: #0d1525;
    overflow: hidden;
}

/* ── Image column (left 55%) ── */
.dswiper-img-col {
    width: 55%;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: #050a10;
    position: relative;
}

.dswiper-main-img-wrap {
    flex: 1;
    overflow: hidden;
}

.dswiper-main-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}
.dswiper-main-img:hover { transform: scale(1.03); }

/* No-image placeholder */
.dswiper-no-img {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0d1525, #1a2840);
}
.dswiper-emoji { font-size: 6rem; }
.dswiper-img-coming {
    color: rgba(255,255,255,0.4);
    font-size: 0.9rem;
    margin-top: 0.75rem;
}

/* ── Thumbnails ── */
.dswiper-thumbs {
    display: flex;
    gap: 0.4rem;
    padding: 0.6rem;
    background: rgba(0,0,0,0.5);
    overflow-x: auto;
    flex-shrink: 0;
    scrollbar-width: none;
}
.dswiper-thumbs::-webkit-scrollbar { display: none; }

.dswiper-thumb {
    width: 68px;
    height: 52px;
    object-fit: cover;
    border-radius: 5px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color 0.2s, opacity 0.2s;
    opacity: 0.65;
    flex-shrink: 0;
}
.dswiper-thumb:hover { opacity: 0.9; }
.dswiper-thumb.active {
    border-color: #c9a84c;
    opacity: 1;
}

/* ── Info column (right 45%) ── */
.dswiper-info-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3rem 3.5rem;
    background: linear-gradient(135deg, #0d1525 0%, #111d30 100%);
    color: #fff;
}

.dswiper-cat {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #c9a84c;
    background: rgba(201,168,76,0.12);
    border: 1px solid rgba(201,168,76,0.3);
    border-radius: 30px;
    padding: 0.3rem 1rem;
    margin-bottom: 1.1rem;
    width: fit-content;
}
.dswiper-cat--signature {
    color: #ffd700;
    background: rgba(255,215,0,0.12);
    border-color: rgba(255,215,0,0.35);
}
.dswiper-cat--spicy {
    color: #ff6b35;
    background: rgba(255,107,53,0.12);
    border-color: rgba(255,107,53,0.35);
}

.dswiper-name {
    font-family: 'Lato', sans-serif;
    font-size: 2.1rem;
    font-weight: 900;
    line-height: 1.15;
    color: #fff;
    margin-bottom: 0.4rem;
}

.dswiper-variants {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.5);
    margin-bottom: 1.4rem;
    font-style: italic;
}

.dswiper-highlights {
    list-style: none;
    padding: 0;
    margin: 0 0 1.6rem;
}
.dswiper-highlights li {
    font-size: 0.92rem;
    color: rgba(255,255,255,0.78);
    padding: 0.3rem 0;
    padding-left: 1.4rem;
    position: relative;
}
.dswiper-highlights li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #c9a84c;
}

/* ── Pricing ── */
.dswiper-pricing {
    display: flex;
    gap: 1.2rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}
.dswiper-price-item {
    display: flex;
    flex-direction: column;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 0.7rem 1.2rem;
    min-width: 110px;
}
.dswiper-price-item span {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.45);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.25rem;
}
.dswiper-price-item strong {
    font-size: 1.6rem;
    font-weight: 800;
    color: #c9a84c;
    line-height: 1;
}
.dswiper-price-item--family {
    border-color: rgba(201,168,76,0.3);
    background: rgba(201,168,76,0.07);
}

/* ── Order button ── */
.dswiper-order-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: linear-gradient(135deg, #c9a84c, #e8c96d);
    color: #0a0f1a;
    font-weight: 700;
    font-size: 0.95rem;
    padding: 0.85rem 2rem;
    border-radius: 50px;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
    width: fit-content;
}
.dswiper-order-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(201,168,76,0.35);
    color: #0a0f1a;
}

/* ── Navigation arrows ── */
.dswiper-next,
.dswiper-prev {
    width: 50px !important;
    height: 50px !important;
    background: rgba(201,168,76,0.15) !important;
    border: 2px solid rgba(201,168,76,0.4) !important;
    border-radius: 50% !important;
    color: #c9a84c !important;
    transition: background 0.2s, border-color 0.2s !important;
}
.dswiper-next::after,
.dswiper-prev::after { display: none !important; }
.dswiper-next i,
.dswiper-prev i {
    font-size: 1rem;
    color: #c9a84c;
}
.dswiper-next:hover,
.dswiper-prev:hover {
    background: rgba(201,168,76,0.3) !important;
    border-color: #c9a84c !important;
}

/* ── Fraction pagination ── */
.dswiper-pagination.swiper-pagination-fraction {
    bottom: 1.2rem !important;
    font-size: 1rem;
    font-weight: 600;
    color: rgba(255,255,255,0.55);
    letter-spacing: 0.04em;
}
.dswiper-pagination .swiper-pagination-current { color: #c9a84c; font-size: 1.3rem; }
.dswiper-pagination .swiper-pagination-total { color: rgba(255,255,255,0.4); }

/* ══════════════════════════════════════════════════════
   SIMPLE MENU GRID — Africuisine All Dishes List
══════════════════════════════════════════════════════ */
.smenu-section {
    background: #fff;
    padding: 5rem 0;
}

.smenu-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.smenu-card {
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.08);
    background: #fff;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    transition: transform 0.22s, box-shadow 0.22s;
}
.smenu-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(0,0,0,0.12);
}
.smenu-card--featured {
    border-color: #c9a84c;
    box-shadow: 0 4px 20px rgba(201,168,76,0.2);
}

/* Card image */
.smenu-card-img {
    height: 180px;
    overflow: hidden;
}
.smenu-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.smenu-card:hover .smenu-card-img img { transform: scale(1.06); }

.smenu-card-img--emoji {
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 5rem;
    background: linear-gradient(135deg, #f8f4e8, #f0e8cc);
}

/* Card body */
.smenu-card-body {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem 1.1rem;
}

.smenu-emoji {
    font-size: 1.5rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.smenu-info { flex: 1; }
.smenu-info h4 {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1a2e4a;
    margin: 0 0 0.25rem;
    line-height: 1.2;
}
.smenu-info p {
    font-size: 0.8rem;
    color: #666;
    margin: 0;
    line-height: 1.35;
}

.smenu-badge {
    font-size: 0.72rem;
    background: #fff8e1;
    color: #a07a10;
    border: 1px solid #e0c750;
    border-radius: 20px;
    padding: 0.1rem 0.5rem;
    vertical-align: middle;
    font-weight: 600;
}

.smenu-prices {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.2rem;
    flex-shrink: 0;
}
.smenu-p1 {
    font-size: 1.15rem;
    font-weight: 800;
    color: #c9a84c;
    line-height: 1;
}
.smenu-pfam {
    font-size: 0.75rem;
    color: #888;
    white-space: nowrap;
}
.smenu-pfam small {
    font-size: 0.68rem;
    color: #aaa;
}

/* ── Responsive: Dish Swiper ── */
@media (max-width: 900px) {
    .dswiper-slide { flex-direction: column; min-height: unset; }
    .dswiper-img-col { width: 100%; min-height: 280px; }
    .dswiper-main-img-wrap { min-height: 240px; }
    .dswiper-info-col { padding: 2rem 2rem; }
    .dswiper-name { font-size: 1.6rem; }
}
@media (max-width: 600px) {
    .dswiper-info-col { padding: 1.5rem; }
    .dswiper-name { font-size: 1.3rem; }
    .dswiper-pricing { gap: 0.75rem; }
    .dswiper-price-item strong { font-size: 1.3rem; }
    .dswiper-thumb { width: 54px; height: 42px; }
}

/* ── Responsive: Simple Menu Grid ── */
@media (max-width: 900px) {
    .smenu-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 550px) {
    .smenu-grid { grid-template-columns: 1fr; }
    .smenu-card-img { height: 160px; }
}

/* ══════════════════════════════════════════════════════
   SECTOR SWIPER — Homepage Sectors Carousel
══════════════════════════════════════════════════════ */
.sector-swiper {
    width: 100%;
    padding-bottom: 3.5rem !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}

/* Sector swiper: each slide contains nh-bc card */
.sector-swiper .swiper-slide {
    height: auto;
}

/* Use existing nh-bc styles — just make it fill 100% height */
.sector-swiper .nh-bc {
    display: block;
    height: 380px;
    border-radius: 1.2rem;
    overflow: hidden;
}

/* Navigation arrows */
.sec-swiper-next,
.sec-swiper-prev {
    width: 44px !important;
    height: 44px !important;
    background: var(--navy) !important;
    border-radius: 50% !important;
    color: #fff !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2) !important;
}
.sec-swiper-next::after,
.sec-swiper-prev::after { display: none !important; }
.sec-swiper-next i,
.sec-swiper-prev i { font-size: 0.95rem; }
.sec-swiper-next:hover,
.sec-swiper-prev:hover { background: var(--gold) !important; color: var(--navy) !important; }

/* Pagination */
.sec-swiper-pagination .swiper-pagination-bullet {
    background: var(--navy);
    opacity: 0.35;
    width: 8px; height: 8px;
}
.sec-swiper-pagination .swiper-pagination-bullet-active {
    background: var(--gold);
    opacity: 1;
    width: 24px;
    border-radius: 4px;
    transition: width 0.3s;
}

/* ══════════════════════════════════════════════════════
   COUNTRY SWIPER — Areas of Operation
══════════════════════════════════════════════════════ */
.country-swiper {
    width: 100%;
    padding-bottom: 3rem !important;
}

/* Country card */
.cty-card {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 16px;
    padding: 1.5rem 1rem;
    text-align: center;
    transition: transform 0.25s, background 0.25s;
    cursor: default;
}
.cty-card:hover {
    transform: translateY(-4px);
    background: rgba(255,255,255,0.1);
}

.cty-card__flag {
    font-size: 2.6rem;
    line-height: 1;
    margin-bottom: 0.65rem;
    text-align:center;
}
.cty-card__flag img {
    width: 60px;
    height: auto;
    border-radius: 3px;
    display: block;
    margin:0 auto;
}
.cty-card__name {
    font-size: 0.9rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 0.4rem;
    line-height: 1.2;
}
.cty-card__cont {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.45);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.cty-card__cont i { margin-right: 3px; }

/* Continent colour accents */
.cty-card--africa  { border-color: rgba(201,168,76,0.3); }
.cty-card--africa:hover  { border-color: rgba(201,168,76,0.6); }
.cty-card--asia    { border-color: rgba(99,179,237,0.3); }
.cty-card--asia:hover    { border-color: rgba(99,179,237,0.6); }
.cty-card--europe  { border-color: rgba(160,210,140,0.3); }
.cty-card--europe:hover  { border-color: rgba(160,210,140,0.6); }

.cty-hq {
    font-size: 0.62rem;
    background: var(--gold);
    color: var(--navy);
    border-radius: 4px;
    padding: 0.1rem 0.4rem;
    font-weight: 700;
    vertical-align: middle;
    margin-left: 3px;
}

/* Country swiper pagination */
.cty-swiper-pagination { bottom: 0.5rem !important; }
.cty-swiper-pagination .swiper-pagination-bullet { background: rgba(255,255,255,0.4); }
.cty-swiper-pagination .swiper-pagination-bullet-active { background: var(--gold); }

/* ══════════════════════════════════════════════════════
   UBER EATS STYLE MENU — Africuisine
══════════════════════════════════════════════════════ */
.ue-menu-section {
    background: #f8f8f8;
    padding: 5rem 0;
}

.ue-menu-head {
    margin-bottom: 2.5rem;
}

/* ── Category Filter Pills ── */
.ue-filters {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 2.8rem;
}
.ue-filter {
    border: 2px solid #e0e0e0;
    background: #fff;
    color: #555;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.5rem 1.2rem;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.2s;
    font-family: 'Poppins', sans-serif;
    white-space: nowrap;
    flex-shrink: 0;
}
.ue-filter:hover { border-color: #c9a84c; color: #c9a84c; }
.ue-filter.active {
    background: #1a2e4a;
    border-color: #1a2e4a;
    color: #fff;
}

/* Responsive filter pills — horizontal scroll on mobile */
@media (max-width: 640px) {
    .ue-filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        gap: 0.5rem;
        padding: 0.4rem 0 0.8rem;
        margin-bottom: 1.8rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .ue-filters::-webkit-scrollbar { display: none; }
    .ue-filter {
        font-size: 0.78rem;
        padding: 0.42rem 0.95rem;
    }
}

/* ── Dish Cards Grid ── */
.ue-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}

/* ── Individual Card ── */
.ue-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07);
    border: 1px solid #efefef;
    transition: transform 0.22s, box-shadow 0.22s;
    display: flex;
    flex-direction: column;
}
.ue-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.13);
}
.ue-card--featured {
    border-color: #c9a84c;
    box-shadow: 0 4px 20px rgba(201,168,76,0.18);
}

/* Card image area */
.ue-card__img-wrap {
    position: relative;
    height: 400px;
    overflow: hidden;
    background: #f0f0f0;
    flex-shrink: 0;
}
.ue-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.ue-card:hover .ue-card__img { transform: scale(1.06); }

/* Thumbnail strip */
.ue-card__thumbs {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    gap: 4px;
    padding: 6px 8px;
    background: linear-gradient(to top, rgba(0,0,0,0.5), transparent);
}
.ue-thumb {
    width: 36px;
    height: 28px;
    object-fit: cover;
    border-radius: 4px;
    border: 1.5px solid transparent;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s, border-color 0.2s;
}
.ue-thumb:hover { opacity: 1; }
.ue-thumb.active { border-color: #c9a84c; opacity: 1; }

/* Signature badge */
.ue-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 0.72rem;
    font-weight: 700;
    background: #fff8e1;
    color: #a07a10;
    border: 1px solid #e8c86a;
    border-radius: 20px;
    padding: 0.2rem 0.65rem;
    z-index: 2;
}

/* No-image placeholder */
.ue-card__img-wrap--noimg {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #fff8e8, #f5e9c8);
}
.ue-no-img { font-size: 4.5rem; }

/* Card body */
.ue-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1rem;
}

.ue-card__top { margin-bottom: 0.4rem; }

.ue-tag {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #1a2e4a;
    background: #eef2f7;
    border-radius: 4px;
    padding: 0.2rem 0.5rem;
}
.ue-tag--sig { background: #fff8e1; color: #a07a10; }
.ue-tag--spicy { background: #fff1ee; color: #c0392b; }

.ue-card__name {
    font-size: 1rem;
    font-weight: 700;
    color: #1a2e4a;
    margin: 0 0 0.3rem;
    line-height: 1.25;
}
.ue-alt { font-weight: 400; color: #999; font-size: 0.85rem; }

.ue-card__desc {
    font-size: 0.8rem;
    color: #777;
    margin: 0 0 auto;
    line-height: 1.4;
    padding-bottom: 0.8rem;
}

/* Footer: price + button */
.ue-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid #f0f0f0;
}
.ue-card__prices {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.ue-price {
    font-size: 1.15rem;
    font-weight: 800;
    color: #1a2e4a;
}
.ue-price-fam {
    font-size: 0.72rem;
    color: #888;
}
.ue-price-fam small { font-size: 0.65rem; }

.ue-order-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: #1a2e4a;
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 0.55rem 1rem;
    border-radius: 50px;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s, transform 0.2s;
}
.ue-order-btn:hover {
    background: #c9a84c;
    color: #1a2e4a;
    transform: scale(1.04);
}

/* ── Responsive ── */
@media (max-width: 1100px) {
    .ue-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    .ue-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
    .ue-card__img-wrap { height: 170px; }
    .sector-swiper .nh-bc { height: 320px; }
}
@media (max-width: 480px) {
    .ue-grid { grid-template-columns: 1fr; }
    .ue-card__img-wrap { height: 200px; }
}

/* ══════════════════════════════════════════════════════
   DOMINO'S STYLE MENU SLIDER — Africuisine
══════════════════════════════════════════════════════ */
.dom-menu-section {
    background: #fff;
    padding: 4.5rem 0 4rem;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
}

/* ── Section header ── */
.dom-menu-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2.5rem;
}
.dom-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #c9a84c;
    margin-bottom: 0.4rem;
}
.dom-title {
    font-family: 'Lato', sans-serif;
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    font-weight: 900;
    color: #1a2e4a;
    margin: 0;
    line-height: 1.1;
}
.dom-view-all {
    font-size: 0.85rem;
    font-weight: 700;
    color: #1a2e4a;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 2px solid #1a2e4a;
    padding: 0.5rem 1.2rem;
    border-radius: 50px;
    white-space: nowrap;
    transition: all 0.2s;
    flex-shrink: 0;
}
.dom-view-all:hover {
    background: #1a2e4a;
    color: #fff;
}
.dom-view-all i { font-size: 0.75rem; transition: transform 0.2s; }
.dom-view-all:hover i { transform: translateX(3px); }

/* ── Slider wrapper ── */
.dom-slider-wrap {
    position: relative;
    margin: 0 -0.5rem;
}
.dom-swiper {
    width: 100%;
    padding: 1rem 0.5rem 3.5rem !important;
}

/* ── Domino's Card ── */
.dom-card {
    background: #fff;
    border-radius: 18px;
    border: 1.5px solid #efefef;
    box-shadow: 0 3px 16px rgba(0,0,0,0.07);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform 0.25s, box-shadow 0.25s;
    position: relative;
}
.dom-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(0,0,0,0.13);
}
.dom-card--featured {
    border-color: #c9a84c;
    box-shadow: 0 4px 20px rgba(201,168,76,0.2);
}

/* Signature badge */
.dom-card__badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: #fff8e1;
    color: #a07a10;
    font-size: 0.7rem;
    font-weight: 700;
    border: 1px solid #e8c86a;
    border-radius: 20px;
    padding: 0.2rem 0.6rem;
    z-index: 3;
}

/* ── Image area — circular Domino's style ── */
.dom-card__img-wrap {
    background: linear-gradient(135deg, #fef9ec 0%, #fdf3d0 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1.5rem 0.8rem;
    position: relative;
}
.dom-card__img {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #fff;
    box-shadow: 0 6px 24px rgba(0,0,0,0.15);
    display: block;
    transition: transform 0.4s ease;
}
.dom-card:hover .dom-card__img {
    transform: scale(1.07) rotate(-2deg);
}

/* No image placeholder */
.dom-card__img-wrap--noimg {
    padding: 1.5rem;
    min-height: 200px;
    background: linear-gradient(135deg, #fff8e8, #f5e9c8);
}
.dom-emoji {
    font-size: 5rem;
    line-height: 1;
}

/* ── Card body ── */
.dom-card__body {
    padding: 1rem 1.2rem 1.2rem;
    display: flex;
    flex-direction: column;
    flex: 1;
    text-align: center;
}

/* Category tag */
.dom-card__tag {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #1a2e4a;
    background: #eef2f7;
    border-radius: 4px;
    padding: 0.18rem 0.55rem;
    margin-bottom: 0.55rem;
}
.dom-card__tag--sig  { background: #fff8e1; color: #a07a10; }
.dom-card__tag--spicy { background: #fff1ee; color: #c0392b; }

/* Dish name */
.dom-card__name {
    font-family: 'Lato', sans-serif;
    font-size: 1rem;
    font-weight: 800;
    color: #1a2e4a;
    margin: 0 0 0.4rem;
    line-height: 1.2;
}
.dom-alt { font-size: 0.82rem; font-weight: 400; color: #aaa; }

/* Description */
.dom-card__desc {
    font-size: 0.78rem;
    color: #888;
    margin: 0;
    line-height: 1.45;
    flex: 1;
}

/* Footer: price + button */
.dom-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1rem;
    padding-top: 0.9rem;
    border-top: 1px solid #f5f5f5;
    gap: 0.5rem;
}
.dom-price {
    font-size: 1.15rem;
    font-weight: 800;
    color: #1a2e4a;
    line-height: 1;
}
.dom-price small { font-size: 0.68rem; color: #aaa; font-weight: 400; }

.dom-order-btn {
    display: inline-flex;
    align-items: center;
    background: #c9a84c;
    color: #1a2e4a;
    font-size: 0.78rem;
    font-weight: 800;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s, transform 0.2s;
}
.dom-order-btn:hover {
    background: #1a2e4a;
    color: #fff;
    transform: scale(1.04);
}

/* ── Navigation arrows — Domino's style ── */
.dom-next,
.dom-prev {
    width: 46px !important;
    height: 46px !important;
    background: #1a2e4a !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 16px rgba(26,46,74,0.25) !important;
    top: 36% !important;
    transform: translateY(-50%) !important;
}
.dom-next { right: -0.5rem !important; }
.dom-prev { left: -0.5rem !important; }
.dom-next::after,
.dom-prev::after { display: none !important; }
.dom-next i,
.dom-prev i { font-size: 0.9rem; color: #fff; }
.dom-next:hover,
.dom-prev:hover { background: #c9a84c !important; }
.dom-next:hover i,
.dom-prev:hover i { color: #1a2e4a; }

/* ── Pagination ── */
.dom-pagination { bottom: 0.5rem !important; }
.dom-pagination .swiper-pagination-bullet { background: #d0d0d0; opacity: 1; width: 8px; height: 8px; }
.dom-pagination .swiper-pagination-bullet-active { background: #c9a84c; width: 26px; border-radius: 4px; }

/* ── Responsive ── */
@media (max-width: 768px) {
    .dom-menu-head { flex-direction: column; align-items: flex-start; }
    .dom-card__img { width: 130px; height: 130px; }
}
@media (max-width: 480px) {
    .dom-card__img { width: 110px; height: 110px; }
    .dom-card__img-wrap { padding: 1rem 1rem 0.6rem; }
}

/* ── Old dark strip (now removed, keeping selector safe) ── */
.af-slide-section { display: none; }

.af-slide-card {
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

.af-slide-card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}
.af-slide-card:hover img { transform: scale(1.06); }

.af-slide-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.6rem 0.8rem;
    background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, transparent 100%);
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 0.4rem;
}

.af-slide-name {
    font-size: 0.78rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    flex: 1;
}

.af-slide-price {
    font-size: 0.85rem;
    font-weight: 800;
    color: #c9a84c;
    white-space: nowrap;
    background: rgba(0,0,0,0.4);
    padding: 0.15rem 0.45rem;
    border-radius: 6px;
}

@media (max-width: 600px) {
    .af-slide-card img { height: 160px; }
}

/* ══════════════════════════════════════════════════════
   SECTOR HIGHLIGHT SLIDER — Amazon / Flipkart Style
══════════════════════════════════════════════════════ */

/* Section wrapper — white background */
.hl-section {
    background: #fff;
    padding: 4rem 0 3rem;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
}

/* Section heading area */
.hl-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2.5rem;
}
.hl-label {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #c9a84c;
    margin-bottom: 0.4rem;
}
.hl-title {
    font-family: 'Lato', sans-serif;
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 900;
    color: #1a2e4a;
    margin: 0;
    line-height: 1.1;
}
.hl-sub {
    font-size: 0.9rem;
    color: #777;
    margin: 0;
    max-width: 420px;
    line-height: 1.5;
}

/* Slider outer wrapper — full width with side padding for peek */
.hl-slider-wrap {
    position: relative;
    padding: 0 3rem;
}

/* Swiper base */
.sec-strip-swiper {
    width: 100%;
    padding-bottom: 3.2rem !important;
}

/* ── Individual Card — Amazon/Flipkart Style ── */
.hl-card {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 14px;
    padding: 1.8rem 1.4rem 1.4rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    min-height: 230px;
    cursor: default;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    transition: box-shadow 0.25s, transform 0.25s, border-color 0.25s;
    position: relative;
    overflow: hidden;
}
.hl-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #c9a84c, #f0d060);
    opacity: 0;
    transition: opacity 0.25s;
}
.hl-card:hover {
    box-shadow: 0 10px 32px rgba(0,0,0,0.13);
    transform: translateY(-5px);
    border-color: #d4b862;
}
.hl-card:hover::before {
    opacity: 1;
}

/* Icon circle */
.hl-card__icon-wrap {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.1rem;
    flex-shrink: 0;
}
.hl-card__icon-wrap i {
    font-size: 1.6rem;
}

/* Card title */
.hl-card__title {
    font-family: 'Lato', sans-serif;
    font-size: 0.97rem;
    font-weight: 800;
    color: #1a2e4a;
    margin: 0 0 0.5rem;
    line-height: 1.2;
}

/* Card description */
.hl-card__desc {
    font-size: 0.8rem;
    color: #777;
    line-height: 1.5;
    margin: 0;
    flex: 1;
}

/* Bottom link */
.hl-card__link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: #1a2e4a;
    margin-top: 1.1rem;
    text-decoration: none;
    border-top: 1px solid #f0f0f0;
    width: 100%;
    padding-top: 0.9rem;
    justify-content: center;
    transition: color 0.2s;
}
.hl-card:hover .hl-card__link {
    color: #c9a84c;
}
.hl-card__link i {
    font-size: 0.68rem;
    transition: transform 0.2s;
}
.hl-card:hover .hl-card__link i {
    transform: translateX(3px);
}

/* ── Navigation Arrows — Amazon style ── */
.hl-next,
.hl-prev {
    width: 42px !important;
    height: 42px !important;
    background: #fff !important;
    border: 1px solid #ddd !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12) !important;
    color: #333 !important;
    top: 38% !important;
    transform: translateY(-50%) !important;
    transition: all 0.2s !important;
}
.hl-next { right: 0.2rem !important; }
.hl-prev { left: 0.2rem !important; }
.hl-next::after,
.hl-prev::after { display: none !important; }
.hl-next i,
.hl-prev i { font-size: 0.85rem; color: #333; }
.hl-next:hover,
.hl-prev:hover {
    background: #1a2e4a !important;
    border-color: #1a2e4a !important;
    box-shadow: 0 4px 16px rgba(26,46,74,0.25) !important;
}
.hl-next:hover i,
.hl-prev:hover i { color: #fff; }

/* ── Pagination dots ── */
.hl-pagination {
    bottom: 0.4rem !important;
}
.hl-pagination .swiper-pagination-bullet {
    background: #ccc;
    opacity: 1;
    width: 7px;
    height: 7px;
    transition: all 0.3s;
}
.hl-pagination .swiper-pagination-bullet-active {
    background: #c9a84c;
    width: 22px;
    border-radius: 4px;
}

/* ══════════════════════════════════════════════════════
   SECTION SPACING — All Sector Pages
══════════════════════════════════════════════════════ */
.sector-hero { margin-bottom: 0; }
.hl-section + .section,
.hl-section + section { border-top: none; }

.ue-menu-section {
    padding-top: 6rem;
    padding-bottom: 6rem;
}
.section { padding-top: 5rem; padding-bottom: 5rem; }
.section.section-alt { padding-top: 5rem; padding-bottom: 5rem; }

/* ── Responsive ── */
@media (max-width: 900px) {
    .hl-slider-wrap { padding: 0 2.5rem; }
    .hl-head { flex-direction: column; align-items: flex-start; }
    .hl-sub { max-width: 100%; }
}
@media (max-width: 600px) {
    .hl-slider-wrap { padding: 0 2rem; }
    .hl-section { padding: 3rem 0 2.5rem; }
    .hl-card { min-height: 200px; padding: 1.4rem 1rem 1.1rem; }
    .hl-card__icon-wrap { width: 52px; height: 52px; }
    .hl-card__icon-wrap i { font-size: 1.3rem; }
    .section { padding-top: 3.5rem; padding-bottom: 3.5rem; }
    .ue-menu-section { padding-top: 4rem; padding-bottom: 4rem; }
}

/* ══════════════════════════════════════════════
   DESIGNER BAGS SLIDER (beauty-fashion sector)
══════════════════════════════════════════════ */
.dbags-section { background: #faf9f7 !important; }

.dbags-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.4rem;
}

.dbag-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07);
    border: 1px solid #ede8e0;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
    display: flex;
    flex-direction: column;
}
.dbag-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.13);
}

.dbag-img-wrap {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #f5f2ee;
}
.dbag-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0; left: 0;
    transition: opacity 0.38s ease;
}
.dbag-img--hover { opacity: 0; }
.dbag-img-wrap:hover .dbag-img--main  { opacity: 0; }
.dbag-img-wrap:hover .dbag-img--hover { opacity: 1; }

.dbag-badge {
    position: absolute;
    top: 10px; left: 10px;
    background: #1a2e4a;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 2;
}

.dbag-info {
    padding: 0.9rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.dbag-name {
    font-size: 0.8rem;
    font-weight: 700;
    color: #1a2e4a;
    margin: 0 0 0.25rem;
    line-height: 1.35;
}
.dbag-desc {
    font-size: 0.72rem;
    color: #64748b;
    margin: 0 0 0.8rem;
    line-height: 1.45;
    flex: 1;
}
.dbag-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    border-top: 1px solid #f0ebe3;
    padding-top: 0.7rem;
    margin-top: auto;
}
.dbag-price {
    font-size: 0.72rem;
    font-weight: 700;
    color: #c9a435;
}
.dbag-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.7rem;
    font-weight: 700;
    color: #fff;
    background: #1a2e4a;
    text-decoration: none;
    padding: 0.3rem 0.75rem;
    border-radius: 6px;
    transition: background 0.2s;
    white-space: nowrap;
}
.dbag-btn:hover { background: #c9a435; color: #fff; }

.dbags-view-all {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 2.5rem;
    background: #1a2e4a;
    color: #fff;
    padding: 0.75rem 2rem;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.88rem;
    text-decoration: none;
    transition: background 0.2s;
}
.dbags-view-all:hover { background: #c9a435; color: #fff; }

@media (max-width: 1100px) { .dbags-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 820px)  { .dbags-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px)  { .dbags-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; } }

/* ══════════════════════════════════════════════
   VISION & MISSION CARDS (beauty-fashion sector)
══════════════════════════════════════════════ */
.dfb-vm-card {
    background: #fff;
    border: 1px solid #e8e2d9;
    border-radius: 14px;
    padding: 2.2rem 2rem;
    box-shadow: 0 2px 16px rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
}
.dfb-vm-icon {
    width: 56px;
    height: 56px;
    background: var(--navy);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.2rem;
    flex-shrink: 0;
}
.dfb-vm-icon i {
    font-size: 1.3rem;
    color: var(--gold);
}
.dfb-vm-card h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--navy);
    margin: 0 0 0.5rem;
}
.dfb-vm-card p {
    color: var(--gray-600);
    line-height: 1.7;
    margin: 0;
    font-size: 0.95rem;
}

/* Equal buttons in collection cards */
.dfb-badge-soon,
a.dfb-badge-soon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 130px;
    background: rgba(201, 164, 53, 0.12);
    color: var(--gold-dk);
    border: 1px solid rgba(201, 164, 53, 0.32);
    padding: 0.35rem 1rem;
    border-radius: 50px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    text-decoration: none;
    width: fit-content;
    margin-top: 0.4rem;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
a.dfb-badge-soon:hover {
    background: var(--navy);
    color: #fff;
    border-color: var(--navy);
}