/* ==========================================================================
   ACL - Arabian Culinary Logistics
   Precision Dark Luxury Design System
   Meticulously matched to Figma Desktop - 1 (Node 3-2)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Tajawal:wght@300;400;500;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600;700&display=swap');

:root {
    --acl-bg-darkest: #1F1F1E;
    --acl-bg-dark: #1F1F1E;
    --acl-bg-card: #111114;
    --acl-gold: #938C54;
    --acl-gold-light: #dfc085;
    --acl-gold-dark: #a88540;
    --acl-text-white: #ffffff;
    --acl-text-gray: #8c8a82;
    --acl-text-light: #d6d3cb;
    --acl-border: rgba(197, 160, 89, 0.18);
    --acl-border-subtle: rgba(255, 255, 255, 0.08);
}

/* Global Reset & Base */
html, body, main.wrap {
    background-color: var(--acl-bg-darkest) !important;
    color: var(--acl-text-light) !important;
    font-family: 'Tajawal', 'Plus Jakarta Sans', sans-serif !important;
    overflow-x: hidden;
}

/* Hide ALL old Safe Pools wave/divider graphics */
.sp-intro-wave,
.sp-intro .sp-intro-wave,
.sp-services-wave,
.sp-about-wave,
.sp-wave,
.sp-intro-btn::before,
.sp-about-media::before,
.sp-about-media::after,
.sp-services::after,
.sp-section-head::after,
.sp-section-title::after {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    opacity: 0 !important;
}

/* ==========================================================================
   HEADER / NAVBAR (Figma Desktop - 1)
   ========================================================================== */
.sp-header {
    background: rgba(7, 7, 8, 0.75) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-bottom: 1px solid var(--acl-border-subtle) !important;
    position: sticky !important;
    top: 0;
    z-index: 1000;
    padding: 12px 0 !important;
    box-shadow: none !important;
}

.sp-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sp-header-brand .sp-logo img {
    height: 50px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
}

.sp-nav {
    flex-grow: 1;
    display: flex;
    justify-content: center;
}

.sp-nav-list {
    display: flex;
    align-items: center;
    gap: 36px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.sp-header .is-open .container{
    display: flex;
    align-items: center;
}
.sp-nav-list > li {
    position: relative;
    padding: 6px 0;
}

.sp-nav-list > li > a {
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    font-family: 'Jost', 'Plus Jakarta Sans', sans-serif !important;
    text-decoration: none !important;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 2px !important;
    letter-spacing: 0.01em;
    transition: color 0.25s ease;
}

/* The small gold dot underneath */
.sp-nav-list > li > a::after {
    content: '' !important;
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%) scale(0);
    width: 5px;
    height: 5px;
    background: var(--acl-gold) !important;
    border-radius: 50%;
    opacity: 0;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
    box-shadow: 0 0 6px rgba(197, 160, 89, 0.6);
    pointer-events: none;
}

/* Hover state: text turns gold, dot pops in */
.sp-nav-list > li > a:hover {
    color: var(--acl-gold) !important;
}

.sp-nav-list > li > a:hover::after {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}

/* Active / Current page item matching screenshot */
.sp-nav-list > li.current-menu-item > a,
.sp-nav-list > li.current_page_item > a,
.sp-nav-list > li.active > a,
.sp-nav-list > li > a.active {
    color: var(--acl-gold) !important;
}

.sp-nav-list > li.current-menu-item > a::after,
.sp-nav-list > li.current_page_item > a::after,
.sp-nav-list > li.active > a::after,
.sp-nav-list > li > a.active::after {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}

.acl-header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.acl-lang-toggle {
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    letter-spacing: 0.05em;
    transition: color 0.25s ease;
}

.acl-lang-toggle:hover {
    color: var(--acl-gold) !important;
}

.acl-nav-divider {
    color: rgba(255, 255, 255, 0.35);
    font-size: 13px;
}

.acl-search-btn {
    color: #ffffff !important;
    background: transparent !important;
    border: none !important;
    font-size: 16px !important;
    padding: 6px 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.25s ease, transform 0.25s ease;
}

.acl-search-btn:hover {
    color: var(--acl-gold) !important;
    transform: scale(1.18);
}

/* ==========================================================================
   LUXURY HEADER SEARCH BAR OVERLAY
   ========================================================================== */
.acl-header-search-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(14, 14, 18, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(197, 160, 89, 0.35);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.85);
    z-index: 1050;
    display: flex;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-100%);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

.acl-header-search-bar.is-open {
    opacity: 1;
    pointer-events: all;
    transform: translateY(0);
}

.acl-search-bar-form {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 16px;
}

.acl-search-bar-icon {
    color: var(--acl-gold);
    font-size: 20px;
    flex-shrink: 0;
}

.acl-search-bar-input {
    flex: 1;
    background: transparent !important;
    border: none !important;
    color: #ffffff !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    font-family: 'Jost', 'Plus Jakarta Sans', sans-serif !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 8px 0 !important;
}

.acl-search-bar-input::placeholder {
    color: rgba(255, 255, 255, 0.42);
    font-weight: 400;
}

.acl-search-bar-submit {
    background: var(--acl-gold) !important;
    color: #070708 !important;
    border: none !important;
    border-radius: 3px !important;
    padding: 8px 20px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.25s ease;
}

.acl-search-bar-submit:hover {
    background: #ffffff !important;
    color: #070708 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2);
}

.acl-search-bar-close {
    background: transparent !important;
    border: none !important;
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 22px !important;
    padding: 6px 10px !important;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
}

.acl-search-bar-close:hover {
    color: var(--acl-gold) !important;
    transform: rotate(90deg);
}

@media (max-width: 767px) {
    .acl-search-bar-input {
        font-size: 15px !important;
    }
    .acl-search-bar-submit {
        padding: 6px 14px !important;
        font-size: 12px !important;
    }
}

.sp-burger {
    color: #ffffff !important;
    background: none !important;
    border: none !important;
    font-size: 20px !important;
    display: none;
}

/* ==========================================================================
   HERO SLIDER (Figma Desktop - 1)
   ========================================================================== */
.acl-hero-section {
    position: relative;
    background-color: var(--acl-bg-darkest);
}

.acl-hero-slide {
    min-height: 86vh !important;
    background-size: cover !important;
    background-position: center center !important;
    display: flex;
    align-items: center;
    position: relative;
}

.acl-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(7, 7, 8, 0.94) 0%, rgba(7, 7, 8, 0.72) 55%, rgba(7, 7, 8, 0.88) 100%);
    z-index: 1;
}

[dir="ltr"] .acl-hero-overlay {
    /* background: linear-gradient(90deg, rgba(7, 7, 8, 0.94) 0%, rgba(7, 7, 8, 0.72) 55%, rgba(7, 7, 8, 0.88) 100%); */
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 31%, rgba(21, 21, 21, 0.232) 100%);

}

.acl-hero-slide .container {
    z-index: 2;
}

.acl-hero-content {
    max-width: 720px;
    padding: 60px 0;
}

.acl-hero-title {
    font-size: 58px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    margin-bottom: 22px !important;
    color: var(--acl-gold) !important;
    letter-spacing: -0.02em;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.8);
}

.acl-hero-text {
    font-size: 18px !important;
    line-height: 1.8 !important;
    color: var(--acl-text-light) !important;
    margin-bottom: 34px !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
}

.acl-hero-actions {
    display: flex;
    align-items: center;
    gap: 18px;
}

.acl-btn-primary {
    background: var(--acl-gold) !important;
    color: #070708 !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    padding: 13px 34px !important;
    border-radius: 0 !important;
    text-decoration: none !important;
    border: 1px solid var(--acl-gold) !important;
    outline: 1px solid rgba(197, 160, 89, 0.7);
    outline-offset: 4px;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 18px rgba(197, 160, 89, 0.25);
}

.acl-btn-primary:hover {
    background: var(--acl-gold-light) !important;
    border-color: var(--acl-gold-light) !important;
    color: #000000 !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(197, 160, 89, 0.4);
}

.acl-btn-outline {
    background: #e3d9cd !important;
    color: #070708 !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    padding: 13px 34px !important;
    border-radius: 0 !important;
    text-decoration: none !important;
    border: 1px solid #ffffff !important;
    outline: 1px solid rgba(255, 255, 255, 0.75);
    outline-offset: 4px;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 18px rgba(227, 217, 205, 0.2);
}

.acl-btn-outline:hover {
    background: #f0ece1 !important;
    border-color: var(--acl-gold-light) !important;
    color: #000000 !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(197, 160, 89, 0.3);
}

/* Right vertical pager (Dynamic & Animated) */
.sp-intro .owl-nav {
    display: none !important;
}

.acl-hero-pager-wrap {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 20;
}

.acl-hero-pager-wrap .container {
    height: 100%;
    max-width: 100%;
    position: relative;
}

.acl-hero-pager {
    position: absolute;
    top: 50%;
    inset-inline-end: 20px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    pointer-events: auto;
    z-index: 25;
}

.acl-pager-num {
    background: transparent;
    border: none;
    outline: none;
    padding: 2px 4px;
    margin: 0;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.4);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.3s ease, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    user-select: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.acl-pager-num:hover {
    color: var(--acl-gold-light, #deb96f);
    transform: scale(1.12);
}

.acl-pager-num.active {
    color: var(--acl-gold, #c5a059) !important;
    font-weight: 700;
    transform: scale(1.18);
    text-shadow: 0 0 10px rgba(197, 160, 89, 0.5);
}

/* Line after the dot: appears ONLY after the active dot with a simple animation */
.acl-pager-line {
    width: 1px;
    height: 0;
    opacity: 0;
    background: var(--acl-gold, #c5a059);
    box-shadow: 0 0 8px rgba(197, 160, 89, 0.4);
    transform-origin: top center;
    transform: scaleY(0);
    transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.25s ease,
                transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                margin 0.35s ease;
    margin: -6px 0;
    pointer-events: none;
    border-radius: 1px;
}

.acl-pager-line.active {
    height: 36px;
    opacity: 1;
    transform: scaleY(1);
    margin: 0;
}

/* Smooth Fade in support for Owl Carousel */
.owl-carousel .fadeIn {
    animation-name: owlFadeIn;
}

@keyframes owlFadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@media (max-width: 576px) {
    .acl-hero-pager {
        inset-inline-end: 10px;
        transform: translateY(-50%) scale(0.9);
    }
    .acl-pager-line {
        height: 28px;
    }
}

/* ==========================================================================
   ABOUT SECTION (Figma Image 1 Composite - Full Width, Overlapping Chef Photo)
   ========================================================================== */
.acl-about-composite {
    /* pulled up over the bottom of the hero slider; dark bg only starts below the overlap */
    margin: -90px 0 0 !important;
    padding: 0 !important;
    background: linear-gradient(to bottom, transparent 90px, #18181a 90px) !important;
    position: relative;
    z-index: 6;
    overflow: visible !important;
    width: 100%;
}

/* Truly full width: no container, margin or padding */
.acl-about-fluid-wrap {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    position: relative;
}

/* Dark text card: flush with the left edge, ~87% width */
.acl-about-card-wrap {
    position: relative;
    z-index: 1;
    width: 87%;
    max-width: none;
    margin: 0;
    margin-bottom: -60px; /* photo starts slightly above the card's bottom edge */
}

@media (max-width: 991px) {
    .acl-about-card-wrap {
        width: 100%;
        margin-bottom: -30px;
    }
}

.acl-about-card {
    background: #232325 !important;
    border: 0;
    border-radius: 0;
    padding: 56px 60px 110px 84px;
    position: relative;
    box-shadow: none;
}

@media (max-width: 768px) {
    .acl-about-card {
        padding: 40px 24px 80px 24px;
    }
}

/* Left Vertical Badge - Clean vertical-rl layout with no overlap */
.acl-about-card-badge {
    position: absolute;
    inset-inline-start: 24px;
    top: 40%;
    transform: translateY(-50%) rotate(180deg);
    writing-mode: vertical-rl;
    color: var(--acl-gold);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0.9;
    user-select: none;
    z-index: 2;
}

.acl-about-card-inner {
    position: relative;
    margin-inline-start: 54px; /* Perfectly clears the vertical badge with clean luxury spacing */
}

.acl-about-card-title {
    color: #ffffff !important;
    font-size: 38px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    margin-bottom: 18px !important;
    letter-spacing: -0.01em;
}

@media (max-width: 768px) {
    .acl-about-card-title {
        font-size: 28px !important;
    }
}

.acl-about-card-text {
    color: #9d9a92 !important;
    font-size: 15px !important;
    line-height: 1.85 !important;
    margin-bottom: 24px !important;
    max-width: 540px;
}

/* Square Arrow Button on bottom-right of visible card space */
.acl-about-card-action {
    position: absolute;
    inset-inline-end: 20px;
    bottom: 120px; /* Above the chef photo overlap line */
    z-index: 4;
}

@media (max-width: 991px) {
    .acl-about-card-action {
        bottom: 70px;
    }
}

.acl-about-arrow-btn {
    width: 48px;
    height: 48px;
    background: #e3d9cd;
    color: #070708;
    border: 1px solid #ffffff;
    outline: 1px solid rgba(255, 255, 255, 0.75);
    outline-offset: 4px;
    border-radius: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.25s ease;
}

.acl-about-arrow-btn:hover {
    background: var(--acl-gold);
    color: #ffffff;
    transform: translate(2px, -2px);
}

/* Chef's Visual Banner with HIGHER z-index as requested:
   "صورة الطباخ تبقي واخده z-index اعلي زي ما هو واضح في التصميم" */
.acl-kitchen-visual-wrap {
    position: relative;
    z-index: 10; /* sits ON TOP of the dark card */
    width: 85%;
    margin: 0 0 0 auto; /* flush with the right edge */
    padding: 0;
}

@media (max-width: 991px) {
    .acl-kitchen-visual-wrap {
        width: 100%;
    }
}

.acl-floating-produce {
    position: absolute;
    left: -17%;
    right: auto;
    top: 18%;
    transform: none;
    width: 15%;
    height: auto;
    z-index: 15; /* Floats above everything */
    pointer-events: none;
    filter: drop-shadow(0 15px 35px rgba(0, 0, 0, 0.85));
}

@media (max-width: 768px) {
    .acl-floating-produce {
        display: none;
    }
}

.acl-kitchen-photo {
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 25px 65px rgba(0, 0, 0, 0.85);
    background: #111;
}

.acl-kitchen-photo img {
    width: 100%;
    height: 480px;
    object-fit: cover;
    display: block;
}

@media (max-width: 768px) {
    .acl-kitchen-photo img {
        height: 280px;
    }
}

/* ==========================================================================
   COUNTERS SECTION (Figma Image 1 - Intertwined SVGs with numbers)
   "سيكشن العداد .. الصور تبقي متداخلة مع الارقام زي التصميم"
   ========================================================================== */
.acl-counters-section {
    background: #18181a !important;
    padding: 70px 0 110px !important;
    border-top: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
}

.acl-counters-row {
    direction: ltr !important; /* Always keeps 420 -> 320 -> 30+ -> 500+ sequence as in Image 1 */
}

.acl-counter-card {
    position: relative;
    padding: 35px 15px;
    min-height: 185px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Watermark SVG intertwined directly behind the number and label */
.acl-counter-faint-icon {
    position: absolute;
    top: 80%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--acl-gold);
    opacity: 0.1; /* Rich gold watermark */
    z-index: 1; /* BEHIND number and label */
    pointer-events: none;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.35s ease;
}

.acl-counter-faint-icon svg {
    width: 100%;
    height: 100%;
}

.acl-counter-card:hover .acl-counter-faint-icon {
    opacity: 0.65;
    transform: translate(-50%, -50%) scale(1.1);
}

.acl-counter-val {
    position: relative;
    z-index: 2; /* In front of watermark */
    font-size: 60px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    font-family: 'Plus Jakarta Sans', sans-serif;
    line-height: 1.05 !important;
    margin-bottom: 8px;
    direction: ltr !important;
    display: flex;
    align-items: baseline;
    justify-content: center;
    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.6);
}

.acl-counter-figure {
    letter-spacing: -0.02em;
}

.acl-counter-sign {
    font-size: 44px;
    margin-left: 2px;
    font-weight: 700;
}

.acl-counter-text {
    position: relative;
    z-index: 2; /* In front of watermark */
    color: #8c8a82;
    font-size: 15px;
    font-weight: 500;
    text-transform: capitalize;
    margin-bottom: 0;
    white-space: nowrap;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}

/* ==========================================================================
   SERVICES SECTION (Figma Desktop - 1)
   ========================================================================== */
.acl-services-wrap {
    background: #1F1F1E !important;
    padding: 110px 0 !important;
    position: relative;
    overflow: hidden;
}

/* Figma: h2-regular-items-bg image layer at 5% opacity over the dark base */
.acl-services-wrap::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    background: url('../images/acl/services-bg.png') right center / cover no-repeat;
    opacity: 0.14;
    z-index: 1;
    pointer-events: none;
}

.acl-services-wrap .container {
    position: relative;
    z-index: 2;
}

.acl-section-gold-head {
    margin-bottom: 60px;
}

.acl-gold-title {
    color: var(--acl-gold) !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    margin: 0 !important;
    font-family: 'Tajawal', 'Plus Jakarta Sans', sans-serif;
}

.acl-service-item {
    padding: 10px 15px;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.acl-service-item:hover {
    transform: translateY(-8px);
}

.acl-service-offset {
    margin-top: 60px; /* Staggered center card exactly matching Figma */
}

@media (max-width: 767px) {
    .acl-service-offset {
        margin-top: 0;
    }
}

.acl-service-outline-num {
    font-size: 78px;
    font-weight: 300;
    font-family: 'Plus Jakarta Sans', sans-serif;
    line-height: 1;
    margin-bottom: 18px;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--acl-gold);
    opacity: 0.95;
    transition: all 0.4s ease;
}

.acl-service-item:hover .acl-service-outline-num {
    filter: drop-shadow(0 0 20px rgba(197, 160, 89, 0.5));
    -webkit-text-stroke: 2px var(--acl-gold-light);
    transform: scale(1.04);
}

.acl-service-heading {
    font-size: 22px !important;
    font-weight: 700 !important;
    margin-bottom: 16px !important;
}

.acl-service-heading a {
    color: #ffffff !important;
    text-decoration: none !important;
    transition: color 0.25s ease;
}

.acl-service-item:hover .acl-service-heading a {
    color: var(--acl-gold) !important;
}

.acl-service-paragraph {
    color: var(--acl-text-gray) !important;
    font-size: 15px !important;
    line-height: 1.8 !important;
    margin: 0;
}

/* ==========================================================================
   CONCEPTS SECTION (Figma Desktop - 1)
   ========================================================================== */
.acl-concepts-wrap {
    background: var(--acl-bg-darkest) !important;
    padding: 120px 0 !important;
}

.acl-concepts-row {
    display: flex;
    gap: 24px;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 10px 0 20px;
    scrollbar-width: none;
}

.acl-concepts-row::-webkit-scrollbar {
    display: none;
}

.acl-concept-card {
    flex: 0 0 230px;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    aspect-ratio: 3/4;
    transition: all 0.45s cubic-bezier(0.25, 1, 0.5, 1);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7);
}

.acl-concept-card.is-featured {
    flex: 0 0 460px;
    aspect-ratio: 16/10;
}

.acl-concept-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.9);
}

.acl-concept-link {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

.acl-concept-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.7s cubic-bezier(0.25, 1, 0.5, 1);
}

.acl-concept-card:hover img {
    transform: scale(1.08);
}

.acl-concept-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 24px 26px;
    background: linear-gradient(180deg, transparent 0%, rgba(10, 10, 12, 0.95) 100%);
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.4s ease;
}

.acl-concept-card.is-featured .acl-concept-info,
.acl-concept-card:hover .acl-concept-info {
    opacity: 1;
    transform: translateY(0);
}

.acl-concept-name {
    color: #ffffff !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    margin-bottom: 4px !important;
}

.acl-concept-more {
    color: var(--acl-gold);
    font-size: 14px;
    font-weight: 600;
}

.acl-arrow-diag {
    display: inline-block;
    transition: transform 0.3s ease;
}

.acl-concept-card:hover .acl-arrow-diag {
    transform: translate(3px, -3px);
}

.acl-concepts-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 36px;
}

.acl-dot-line {
    width: 26px;
    height: 4px;
    background: var(--acl-gold);
    border-radius: 2px;
    transition: all 0.3s ease;
}

.acl-dot-circle {
    width: 6px;
    height: 6px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    transition: all 0.3s ease;
    cursor: pointer;
}

.acl-dot-circle:hover {
    background: var(--acl-gold);
    transform: scale(1.3);
}

/* ==========================================================================
   THE IMPACT SECTION (Figma Desktop - 1)
   2-Column Staggered Editorial Layout
   ========================================================================== */
.acl-impact-wrap {
    background: var(--acl-bg-dark) !important;
    padding: 130px 0 !important;
    border-top: 1px solid var(--acl-border-subtle);
}

.acl-gold-badge {
    color: var(--acl-gold);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.acl-impact-title {
    color: #ffffff !important;
    font-size: 44px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    letter-spacing: -0.01em;
}

.acl-impact-lead {
    color: var(--acl-text-gray) !important;
    font-size: 17px !important;
    line-height: 1.85 !important;
    margin: 0 !important;
}

.acl-impact-grid {
    margin-top: 60px;
}

.acl-impact-col-staggered {
    margin-top: 70px; /* Offset right column downwards matching Figma */
}

@media (max-width: 767px) {
    .acl-impact-col-staggered {
        margin-top: 0;
    }
}

.acl-impact-item {
    padding: 10px 15px;
    margin-bottom: 50px;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.acl-impact-item:hover {
    transform: translateY(-4px);
}

.acl-impact-item-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 14px;
}

[dir="rtl"] .acl-impact-item-header {
    gap: 15px;
}

.acl-impact-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.acl-impact-item:hover .acl-impact-icon {
    /*transform: scale(1.18) rotate(5deg);*/
}

.acl-impact-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 4px 14px rgba(197, 160, 89, 0.4));
}
.acl-impact-item:hover .acl-impact-icon img {
    filter: brightness(0.54) contrast(1.10) saturate(1.40) sepia(1.00) hue-rotate(15deg) drop-shadow(0 4px 14px rgba(147, 140, 84, 0.45));
}
.acl-impact-item-title {
    color: #ffffff !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    margin: 0 !important;
    letter-spacing: -0.01em;
    /*transition: color 0.3s ease;*/
}

.acl-impact-item:hover .acl-impact-item-title {
    color: var(--acl-gold) !important;
}

.acl-impact-item-desc {
    color: #8c8a82 !important;
    font-size: 14px !important;
    line-height: 1.85 !important;
    max-width: 460px;
    margin: 0;
}

/* ==========================================================================
   CTA INTRODUCTION BAR (Figma Desktop - 1)
   ========================================================================== */
.acl-cta-intro-section {
    background: var(--acl-bg-darkest);
    padding: 80px 0;
}

.acl-cta-intro-inner {
    background: var(--acl-bg-card);
    border: 1px solid var(--acl-border);
    border-radius: 8px;
    padding: 48px 56px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
    transition: border-color 0.4s ease;
}

.acl-cta-intro-inner:hover {
    border-color: rgba(197, 160, 89, 0.4);
}

.acl-cta-main-title {
    color: #ffffff !important;
    font-size: 34px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    margin: 0 !important;
}

.acl-cta-newsletter-hint {
    display: block;
    color: var(--acl-text-gray);
    font-size: 13px;
    margin-bottom: 12px;
}

.acl-cta-input-group {
    display: flex;
    position: relative;
    max-width: 460px;
}

/* Email Subscribers (Icegram Express) Form in CTA */
.acl-cta-form-box .emaillist {
    position: relative;
}
.acl-cta-form-box .es_subscription_form {
    display: flex;
    position: relative;
    width: 100%;
    margin: 0;
}
.acl-cta-form-box .es-field-wrap,
.acl-cta-form-box .ig-es-form-field {
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
}
.acl-cta-form-box .es-field-label {
    display: block;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    position: relative;
}
.acl-cta-form-box .es-field-label br {
    display: none !important;
}
.acl-cta-form-box input.ig-es-form-input,
.acl-cta-form-box input.es_txt_email,
.acl-newsletter-input {
        width: 100% !important;
    height: 58px !important;
    border: 0;
    border-radius: 0px !important;
    padding: 13px 48px 13px 18px !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-family: 'Jost', 'Plus Jakarta Sans', 'Tajawal', sans-serif !important;
    box-sizing: border-box !important;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.2);
}
[dir="rtl"] .acl-cta-form-box input.ig-es-form-input,
[dir="rtl"] .acl-cta-form-box input.es_txt_email,
[dir="rtl"] .acl-newsletter-input {
    padding: 13px 18px 13px 48px !important;
}
.acl-cta-form-box input.ig-es-form-input:focus,
.acl-cta-form-box input.es_txt_email:focus,
.acl-newsletter-input:focus {
    outline: none !important;
    border-color: var(--acl-gold) !important;
    box-shadow: 0 0 15px rgba(197, 160, 89, 0.25) !important;
}
.acl-cta-form-box .es_submit_button {
    position: absolute !important;
    inset-inline-end: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 38px !important;
    height: 38px !important;
    background: transparent !important;
    border: none !important;
    font-size: 0 !important;
    color: transparent !important;
    cursor: pointer !important;
    z-index: 10 !important;
    padding: 0 !important;
}
.acl-cta-form-box .es-submit-icon-overlay,
.acl-newsletter-btn {
    position: absolute;
    inset-inline-end: 14px;
    top: 50%;
    transform: translateY(-50%);
    background: none !important;
    border: none !important;
    color: var(--acl-gold) !important;
    font-size: 18px !important;
    cursor: pointer;
    padding: 0;
    pointer-events: none;
    z-index: 5;
    transition: all 0.3s ease;
}
.acl-cta-form-box .es_submit_button:hover ~ .es-submit-icon-overlay,
.acl-newsletter-btn:hover {
    color: #ffffff !important;
    transform: translateY(-50%) scale(1.15);
}
.acl-cta-form-box .es_spinner_image {
    position: absolute;
    inset-inline-end: 48px;
    top: 50%;
    transform: translateY(-50%);
}
.acl-cta-form-box .es_subscription_message {
    display: block;
    margin-top: 10px;
    font-size: 13.5px;
    font-weight: 500;
}
.acl-cta-form-box .es_subscription_message.success {
    color: #2ecc71;
}
.acl-cta-form-box .es_subscription_message.error {
    color: #e74c3c;
}

/* ==========================================================================
   FOOTER (Figma Desktop - 1)
   ========================================================================== */
.acl-footer-wrap {
    background: #050507 !important;
    padding: 0 !important;
}

.acl-footer-backdrop {
    background-size: cover;
    background-position: center;
    position: relative;
    padding: 90px 0 35px;
}

.acl-footer-backdrop::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(5, 5, 7, 0.88);
    z-index: 1;
}

.acl-footer-backdrop .container {
    position: relative;
    z-index: 2;
}

.acl-footer-logo-link img {
    height: 48px;
    width: auto;
    object-fit: contain;
    margin-bottom: 22px;
}

.acl-footer-desc {
    color: var(--acl-text-gray) !important;
    font-size: 14px !important;
    line-height: 1.8 !important;
    max-width: 320px;
    margin: 0;
}

.acl-footer-gold-title {
    color: var(--acl-gold) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    margin-bottom: 24px !important;
}

.acl-quick-links-grid {
    display: flex;
    gap: 40px;
}

.acl-quick-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.acl-quick-list li {
    margin-bottom: 12px;
}

.acl-quick-list li a {
    color: #b5b3ab !important;
    font-size: 14px !important;
    text-decoration: none !important;
    display: inline-block;
    transition: all 0.25s ease;
}

.acl-quick-list li a:hover {
    color: var(--acl-gold) !important;
    transform: translateX(4px);
}

.acl-contact-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.acl-contact-list li {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
    color: #b5b3ab;
    font-size: 14px;
}

.acl-contact-list li i {
    color: var(--acl-gold);
    font-size: 16px;
    width: 18px;
    text-align: center;
}

.acl-contact-list li a {
    color: #b5b3ab !important;
    text-decoration: none !important;
    transition: color 0.25s ease;
}

.acl-contact-list li a:hover {
    color: var(--acl-gold) !important;
}

.acl-footer-bottom-bar {
    margin-top: 60px;
    padding-top: 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.acl-copyright-text {
    color: rgba(255, 255, 255, 0.45);
    font-size: 13px;
}

.acl-gold-highlight {
    color: var(--acl-gold);
    font-weight: 700;
}

.acl-footer-social-icons {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
}

@media (max-width: 767px) {
    .acl-footer-social-icons {
        justify-content: center;
    }
}

.acl-footer-social-icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: #ffffff;
    font-size: 16px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.acl-footer-social-icons a:hover {
    color: var(--acl-gold);
    transform: translateY(-3px) scale(1.2);
}


/* Responsive adjustments */
@media (max-width: 991px) {
    .sp-nav {
        display: none;
    }
    .sp-burger {
        display: block;
    }
    .acl-hero-title {
        font-size: 38px !important;
    }
    .acl-service-offset {
        margin-top: 0;
    }
    .acl-side-badge {
        display: none;
    }
    .acl-concepts-row {
        justify-content: flex-start;
    }
    .acl-cta-intro-inner {
        padding: 35px 25px;
    }
    .acl-footer-social-icons {
        justify-content: center;
        margin-top: 15px;
    }
}
 
/* ==========================================================================
   CONCEPTS CAROUSEL (centered active slide expands)
   ========================================================================== */
.acl-concepts-wrap { overflow: hidden; }
.acl-carousel {
    --side: 288px; --active: 575px; --gap: 30px;
    position: relative; width: 100%; overflow: hidden; padding: 10px 0 20px; cursor: grab;
}
.acl-carousel-track {
    display: flex; align-items: center; gap: var(--gap);
    transition: transform .7s cubic-bezier(.25,1,.5,1); will-change: transform;
}
.acl-carousel .acl-concept-card {
    flex: 0 0 var(--side); width: var(--side); height: 380px; aspect-ratio: auto;
    transition: width .65s cubic-bezier(.25,1,.5,1), flex-basis .65s cubic-bezier(.25,1,.5,1), height .65s cubic-bezier(.25,1,.5,1), opacity .5s;
    opacity: .9;
}
.acl-carousel .acl-concept-card:hover { opacity: 1; }
.acl-carousel .acl-concept-card:hover {
    flex-basis: var(--active);
    width: var(--active);
    opacity: 1;
    z-index: 5;
}
.acl-carousel .acl-concept-card .acl-concept-info { opacity: 0; transform: translateY(10px); }
.acl-carousel .acl-concept-card:hover .acl-concept-info { opacity: 1; max-height: 90px; visibility: visible; transform: translateY(0); }
.acl-carousel .acl-concept-card:hover { transform: none; }
.acl-concepts-dots { gap: 8px; }
.acl-concepts-dots .acl-dot {
    width: 14px; height: 14px; padding: 0; border: 0; border-radius: 50%;
    background: rgba(255,255,255,.28); cursor: pointer; transition: all .35s ease;
}
.acl-concepts-dots .acl-dot.active { width: 49px; border-radius: 10px; background: var(--acl-gold); }
@media (max-width: 767px) {
    .acl-carousel { --side: 200px; --active: 300px; --gap: 16px; }
    .acl-carousel .acl-concept-card { height: 300px; }
    .acl-carousel .acl-concept-card.is-active { height: 260px; }
}

/* ==========================================================================
   NEWSLETTER (flat, matches Figma)
   ========================================================================== */
.acl-cta-intro-section { background: #1b1b1c; padding: 90px 0 40px; }
.acl-cta-intro-inner {
    background: transparent !important; border: 0 !important; box-shadow: none !important;
    border-radius: 0; padding: 0 !important;
}
.acl-cta-main-title { font-size: 36px !important; font-weight: 700 !important; line-height: 1.25 !important; }
.acl-cta-newsletter-hint { color: #fff; font-size: 13px; font-weight: 600; margin-bottom: 14px; }
.acl-cta-input-group { max-width: 100%; }
.acl-newsletter-input {
    background: #3a3b3d !important; border: 0 !important; border-radius: 2px !important;
    padding: 14px 52px 14px 16px !important; color: #fff !important;
}
.acl-newsletter-input::placeholder { color: #b9b9b9; }
.acl-newsletter-btn { color: #fff !important; }
.acl-newsletter-btn:hover { color: var(--acl-gold) !important; }

/* ==========================================================================
   FOOTER with background image
   ========================================================================== */
.acl-footer-wrap { background: #1b1b1c !important; }
.acl-footer-backdrop { background-size: cover !important; background-position: center bottom !important; background-repeat: no-repeat; padding: 70px 0 35px; }
.acl-footer-backdrop::before {
    background: linear-gradient(180deg, #1b1b1c 0%, rgba(27,27,28,.88) 35%, rgba(27,27,28,.45) 100%) !important;
}

.acl-footer-backdrop::before {
    background: linear-gradient(180deg, #1b1b1c 0%, rgba(27,27,28,.78) 30%, rgba(27,27,28,.18) 70%, rgba(27,27,28,.05) 100%) !important;
}
.acl-footer-backdrop { padding-top: 0 !important; min-height: 640px; background-position: center bottom !important; }
.acl-footer-main-row { padding-top: 60px; }
.acl-cta-main-title { max-width: 380px; }
.acl-cta-intro-section { padding-bottom: 20px; }

/* ===== Newsletter + Footer precise pass (Figma) ===== */
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600&display=swap');
.acl-cta-intro-section, .acl-footer-wrap, .acl-footer-wrap * { font-family: 'Jost', 'Plus Jakarta Sans', sans-serif; }
.acl-footer-wrap .fa-brands, .acl-footer-wrap .fa-solid, .acl-footer-wrap .fa-regular { font-family: 'Font Awesome 6 Free', 'Font Awesome 6 Brands', 'Font Awesome 5 Free', 'Font Awesome 5 Brands', FontAwesome; }
.acl-footer-wrap .fa-brands { font-family: 'Font Awesome 6 Brands', 'Font Awesome 5 Brands'; }

.acl-cta-intro-section { background: #1F1F1E; padding: 100px 0 30px; }
.acl-cta-main-title { font-size: 40px !important; font-weight: 500 !important; line-height: 1.3 !important; max-width: 400px; color: #fff !important; }
.acl-cta-newsletter-hint { color: #e6dfc6 !important; font-size: 15px !important; font-weight: 500 !important; letter-spacing: .01em; margin-bottom: 14px; }
.acl-newsletter-input { background: rgba(255,255,255,.2) !important; height: 42px; padding: 0 52px 0 12px !important; font-size: 14px !important; color: #e6e6e6 !important; border-radius: 0 !important; }
.acl-newsletter-input::placeholder { color: #cfcfcf; }
.acl-newsletter-btn { color: #d9d9d9 !important; right: 10px; }

.acl-footer-backdrop { min-height: 0 !important; padding: 0 0 22px !important; background-position: center bottom !important; background-size: cover !important; }
.acl-footer-backdrop::before {background: linear-gradient(180deg, #1f1f1e 0%, #1b1b1c 45%, rgba(27, 27, 28, .7) 75%, rgba(27, 27, 28, .45) 100%) !important;}
.acl-footer-main-row { padding-top: 50px; }
.acl-footer-logo-link img { height: 90px; margin-bottom: 14px; }
.acl-footer-desc { font-size: 18px !important; line-height: 1.35 !important; color: #8f8f93 !important; max-width: 230px !important; font-weight: 400; }
.acl-footer-gold-title { color: #a39b62 !important; font-size: 28px !important; font-weight: 500 !important; margin-bottom: 14px !important; }
.acl-quick-links-grid { gap: 28px; }
.acl-quick-list li { margin-bottom: 10px; }
.acl-quick-list li a { color: #fff !important; font-size: 18px !important; font-weight: 500; letter-spacing: .02em; }
.acl-contact-list li { margin-bottom: 14px; font-size: 18px; color: #fff; gap: 10px; }
.acl-contact-list li span, .acl-contact-list li a { color: #fff !important; font-size: 18px; }
.acl-contact-list li:nth-child(n+2) span, .acl-contact-list li:nth-child(n+2) a { font-size: 18px; }
.acl-contact-list li i { color: #fff !important; font-size: 17px; width: 22px; }
.acl-footer-bottom-bar { margin-top: 28px; padding-top: 0; border-top: 0; position: relative; }
.acl-footer-bottom-bar::before { content: ''; display: block; width: 100%; height: 1px; background: rgba(255,255,255,.75); margin-bottom: 18px; }
.acl-copyright-text { color: #fff; font-size: 18px; font-weight: 500; }
.acl-gold-highlight { color: #a39b62; font-weight: 500; }
.acl-footer-social-icons { gap: 10px; }
.acl-footer-social-icons a { width: 22px; height: 22px; font-size: 19px; }
.acl-footer-social-icons a:nth-child(4) i { background: linear-gradient(90deg,#25f4ee,#fff 50%,#fe2c55); -webkit-background-clip: text; background-clip: text; color: transparent; }

.acl-footer-desc { font-size: 25px !important; max-width: 270px !important; }
.acl-impact-wrap { padding-bottom: 70px !important; }
.acl-cta-intro-section { padding-top: 60px; z-index: 9; position: relative; }
.acl-footer-main-row { padding-top: 40px; }

/* ==========================================================================
   DROPDOWN MENUS (About The Company, Concepts)
   ========================================================================== */
.sp-nav-list li.menu-item-has-children {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.sp-nav-list .dd-trigger {
    font-size: 10px;
    margin-inline-start: 6px;
    color: rgba(255, 255, 255, 0.75);
    transition: transform 0.25s ease, color 0.25s ease;
    vertical-align: middle;
    display: inline-block;
    cursor: pointer;
    line-height: 1;
}
.sp-nav-list li.menu-item-has-children:hover .dd-trigger {
    transform: rotate(180deg);
    color: var(--acl-gold, #c5a059);
}
.sp-nav-list ul.sub-menu,
.sp-nav-list .sub-menu {
    position: absolute;
    top: 100%;
    inset-inline-start: 0;
    min-width: 220px;
    background: #19191b !important;
    border: 1px solid rgba(163, 155, 98, 0.3) !important;
    box-shadow: 0 18px 45px rgba(0,0,0,0.8) !important;
    padding: 10px 0;
    margin: 8px 0 0 0;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1000;
    border-radius: 4px;
}
.sp-nav-list li.menu-item-has-children:hover > ul.sub-menu,
.sp-nav-list li.menu-item-has-children:hover > .sub-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}
.sp-nav-list ul.sub-menu li,
.sp-nav-list .sub-menu li {
    margin: 0;
    padding: 0;
    border: none;
}
.sp-nav-list ul.sub-menu li a,
.sp-nav-list .sub-menu li a {
    display: block;
    padding: 10px 20px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #e5e5e5 !important;
    background: transparent !important;
    text-decoration: none;
    transition: all 0.2s ease;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.sp-nav-list ul.sub-menu li:last-child a,
.sp-nav-list .sub-menu li:last-child a {
    border-bottom: none;
}
.sp-nav-list ul.sub-menu li a:hover,
.sp-nav-list .sub-menu li a:hover {
    background: rgba(163, 155, 98, 0.15) !important;
    color: #a39b62 !important;
    padding-inline-start: 24px !important;
}

/* ==========================================================================
   CONCEPTS MEGA MENU (Option 1: Luxury 3-Column Grid)
   ========================================================================== */
.sp-nav-list li.menu-item-concepts {
    position: relative;
}
.sp-nav-list li.menu-item-concepts > ul.sub-menu--mega,
.sp-nav-list li.mega-menu > ul.sub-menu--mega {
    position: absolute;
    top: 100%;
    inset-inline-start: 50% !important;
    transform: translateX(-50%) translateY(12px) !important;
    width: 720px !important;
    min-width: 680px !important;
    max-width: 90vw !important;
    background: #171718 !important;
    border: 1px solid rgba(163, 155, 98, 0.35) !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.9) !important;
    padding: 22px 24px !important;
    margin: 8px 0 0 0;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1000;
    border-radius: 6px;
    display: flex !important;
    flex-direction: column;
}
.sp-nav-list li.menu-item-concepts:hover > ul.sub-menu--mega,
.sp-nav-list li.mega-menu:hover > ul.sub-menu--mega {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) translateY(0) !important;
}

/* 3-Column Grid */
.acl-mega-concepts-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px 18px !important;
    width: 100%;
    margin-bottom: 0 !important;
}
.mega-concept-item {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
}
.mega-concept-item a {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 10px 14px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #e2dfd7 !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.22s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mega-concept-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #a39b62;
    opacity: 0.6;
    transition: all 0.22s ease;
    flex-shrink: 0;
}
.mega-concept-item a:hover {
    background: rgba(163, 155, 98, 0.16) !important;
    border-color: rgba(163, 155, 98, 0.45) !important;
    color: #ffffff !important;
    transform: translateX(4px);
}
.mega-concept-item a:hover .mega-concept-dot {
    opacity: 1;
    transform: scale(1.3);
    box-shadow: 0 0 8px #a39b62;
}
.mega-concept-item.active a {
    background: rgba(163, 155, 98, 0.2) !important;
    border-color: #a39b62 !important;
    color: #a39b62 !important;
}

/* Footer full-width bar */
.mega-concept-footer {
    width: 100%;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 14px !important;
    margin-top: 2px;
    list-style: none;
}
.mega-concept-all-link {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 11px 20px !important;
    background: rgba(163, 155, 98, 0.12) !important;
    border: 1px solid rgba(163, 155, 98, 0.35) !important;
    border-radius: 4px;
    color: #e5ded0 !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.03em;
    text-decoration: none;
    transition: all 0.25s ease;
}
.mega-concept-all-link:hover {
    background: #a39b62 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(163, 155, 98, 0.35);
}

@media (max-width: 991.98px) {
    .sp-nav-list li.menu-item-concepts > ul.sub-menu--mega,
    .sp-nav-list li.mega-menu > ul.sub-menu--mega {
        position: static;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        box-shadow: none !important;
        padding: 10px !important;
    }
    .acl-mega-concepts-grid {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }
}

/* ==========================================================================
   INNER HERO BANNER & BREADCRUMB (All inner pages matching Figma)
   ========================================================================== */
.acl-inner-hero {
    position: relative;
    padding: 130px 0 40px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    margin-top: -100px;
}
.acl-inner-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 31%, rgba(21, 21, 21, 0.552) 100%);
    z-index: 1;
}
.acl-inner-hero .container {
    z-index: 2;
}
.acl-inner-hero-title {
    color: #a39b62 !important;
    font-size: 38px !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em;
    margin-bottom: 8px !important;
    text-transform: capitalize;
}
.acl-inner-breadcrumb {
    font-size: 14px;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 400;
}
.acl-inner-breadcrumb a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color 0.2s ease;
}
.acl-inner-breadcrumb a:hover {
    color: #a39b62;
}
.acl-inner-breadcrumb-sep {
    color: #a39b62;
    font-size: 13px;
}
.acl-inner-breadcrumb-current {
    color: #ffffff;
    font-weight: 600;
}

/* Hide old breadcrumb bar */
.sp-breadcrumb {
    display: none !important;
}

/* ==========================================================================
   SERVICES ARCHIVE (Image 1)
   ========================================================================== */
.acl-services-archive-section {
    background: #171718;
    padding: 70px 0 40px;
}
.acl-services-grid-wrapper {
    width: 100%;
    margin: 0 auto;
}
.acl-services-archive-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    /* border-top: 1px solid rgba(255, 255, 255, 0.1); */
}
.acl-services-grid-col {
    display: flex;
    flex-direction: column;
    padding: 0 !important;
    margin: 0 !important;
    border-inline-end: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    min-height: 310px;
}
.acl-services-grid-col:nth-child(3n) {
    border-inline-end: none;
}
@media (min-width: 992px) {
    .acl-services-grid-col:nth-last-child(-n+3) {
        border-bottom: none;
    }
}
@media (min-width: 768px) and (max-width: 991.98px) {
    .acl-services-archive-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .acl-services-grid-col:nth-child(3n) {
        border-inline-end: 1px solid rgba(255, 255, 255, 0.1);
    }
    .acl-services-grid-col:nth-child(2n) {
        border-inline-end: none;
    }
    .acl-services-grid-col:nth-last-child(-n+2) {
        border-bottom: none;
    }
}
@media (max-width: 767.98px) {
    .acl-services-archive-grid {
        grid-template-columns: 1fr !important;
    }
    .acl-services-grid-col {
        border-inline-end: none !important;
    }
    .acl-services-grid-col:last-child {
        border-bottom: none;
    }
}
.acl-service-archive-card {
    padding: 48px 40px;
    height: 100%;
    width: 100%;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    background: transparent;
    box-sizing: border-box;
}
.acl-service-archive-card:hover {
    background: rgba(255, 255, 255, 0.04);
    /* box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); */
    z-index: 2;
}
.acl-service-card-num {
    font-size: 46px;
    line-height: 1;
    font-weight: 300;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.35);
    margin-bottom: 22px;
    letter-spacing: 0.05em;
    transition: all 0.25s ease;
}
.acl-service-archive-card:hover .acl-service-card-num {
    -webkit-text-stroke: 1px #a39b62;
    color: transparent;
}
.acl-service-archive-card:hover .acl-service-card-link {
    color: #a39b62 !important;
}
.acl-service-card-title {
    font-size: 21px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    margin-bottom: 14px !important;
}
.acl-service-card-title a {
    color: #ffffff !important;
    text-decoration: none;
    transition: color 0.2s ease;
}
.acl-service-card-title a:hover {
    color: #a39b62 !important;
}
.acl-service-card-desc {
    font-size: 13.5px;
    line-height: 1.7;
    color: #8c8c90;
    margin-bottom: 24px;
    flex-grow: 1;
}
.acl-service-card-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
    color: #e5ded0 !important;
    text-decoration: none;
    transition: all 0.2s ease;
    margin-top: auto;
}
.acl-service-card-link:hover {
    color: #a39b62 !important;
    transform: translateX(4px);
}
.acl-service-card-link .acl-arrow-diag {
    font-size: 15px;
    color: #a39b62;
}

/* ==========================================================================
   SERVICE DETAILS PAGE & PROCESS TIMELINE (Image 3)
   ========================================================================== */
.acl-service-details-page {
    background: #1F1F1E;
    padding: 70px 0 50px;
}
.acl-service-scope-head {
    margin-bottom: 30px;
}
.acl-service-scope-title {
    color: #ffffff !important;
    font-size: 38px !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}
.acl-service-details-banner {
    width: 100%;
    height: 340px;
    overflow: hidden;
    margin-bottom: 32px;
}
.acl-service-details-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.acl-service-details-desc {
    color: #9d9a92;
    font-size: 18px;
    line-height: 1.7;
    margin-bottom: 50px;
}
.acl-service-details-desc p {
    color: #9d9a92;
    margin-bottom: 0;
}

/* Process Timeline (Figma: 100x100 boxes, 1px #D8CFBC @75%, #1F1F1E fill) */
.acl-process-timeline-wrap {
    padding: 60px 0 40px;
    overflow: visible;
    position: relative;
    width: 100%;
}
.acl-process-timeline {
    position: relative;
    width: 100%;
    min-width: 0;
}
.acl-process-line {
    position: absolute;
    top: 50%;
    left: 8.33%;
    right: 8.33%;
    height: 1px;
    background: rgba(216, 207, 188, 0.45);
    transform: translateY(-50%);
    z-index: 1;
    pointer-events: none;
}
.acl-process-steps-row {
    position: relative;
    z-index: 2;
    margin: 0;
    width: 100%;
}
.acl-process-col {
    text-align: center;
    padding: 0 4px;
    position: relative;
    flex: 1 1 0;
    min-width: 0;
}
.acl-process-step-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 300px;
    position: relative;
    width: 100%;
}
.acl-process-num-box {
    width: clamp(65px, 6vw, 100px);
    height: clamp(65px, 6vw, 100px);
    border: 1px solid rgba(216, 207, 188, 0.75);
    background: #1F1F1E;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(32px, 3.2vw, 54px);
    font-weight: 700;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px rgba(216, 207, 188, 0.75);
    position: relative;
    z-index: 3;
    transition: all 0.3s ease;
}
/* first step is the highlighted one in the design */

.acl-process-col:hover .acl-process-num-box {
    border-color: #a39b62;
    -webkit-text-stroke-color: #a39b62;
    box-shadow: 0 0 20px rgba(163, 155, 98, 0.25);
}
.acl-process-label {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 165px;
    font-size: clamp(12px, 1.05vw, 16px);
    font-weight: 400;
    color: #ffffff;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0;
    line-height: 1.35;
    word-break: break-word;
    pointer-events: none;
}
.acl-process-label--top {
    bottom: calc(50% + clamp(45px, 4.2vw, 66px));
}
.acl-process-label--bottom {
    top: calc(50% + clamp(45px, 4.2vw, 66px));
}

@media (max-width: 767.98px) {
    .acl-process-timeline-wrap {
        padding: 30px 0;
    }
    .acl-process-steps-row {
        flex-direction: column !important;
        gap: 24px;
    }
    .acl-process-line {
        top: 35px;
        bottom: 35px;
        left: 35px;
        right: auto;
        width: 1px;
        height: auto;
        transform: none;
    }
    html[dir="rtl"] .acl-process-line {
        left: auto;
        right: 35px;
    }
    .acl-process-col {
        text-align: start;
        padding: 0;
        width: 100%;
        flex: none;
    }
    .acl-process-step-inner {
        flex-direction: row;
        height: auto;
        gap: 20px;
        justify-content: flex-start;
        align-items: center;
    }
    .acl-process-num-box {
        width: 70px;
        height: 70px;
        font-size: 34px;
        flex-shrink: 0;
    }
    .acl-process-label {
        position: static;
        transform: none;
        max-width: none;
        width: auto;
        text-align: start;
        font-size: 15px;
    }
    html[dir="rtl"] .acl-process-label {
        text-align: right;
    }
    .acl-process-label--top,
    .acl-process-label--bottom {
        top: auto;
        bottom: auto;
    }
}

/* ==========================================================================
   CONCEPTS SINGLE (Image 2)
   ========================================================================== */
.acl-concept-single-page {
    background: #171718;
    padding: 60px 0;
}
.acl-concept-main-head {
    margin-bottom: 45px;
}
.acl-concept-single-name {
    color: #ffffff !important;
    font-size: 42px !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em;
}
.acl-concept-section-block {
    margin-bottom: 55px;
    
}
.acl-concept-cuisine-block{
    position: relative;
        display: flex;
    justify-content: center;
        padding: 75px 0;
}
.acl-concept-cuisine-block:before {
    content: " ";
    width: 150%;
    height: 100%;
    z-index: 0;
    position: absolute;
    top: 0;
    pointer-events: none;
    background: #272725;
}
.acl-concept-block-title {
    color: #ffffff !important;
    font-size: 26px !important;
    font-weight: 700 !important;
    margin-bottom: 18px !important;
}
.acl-concept-block-text {
    color: #9d9a92;
    font-size: 18px;
    line-height: 1.85;
}
.acl-concept-block-text p {
    color: #9d9a92;
    margin-bottom: 0;
}


.acl-concept-map-container {
    position: relative;
    border-radius: 4px;
    overflow: hidden;
}

.acl-concept-map-overlay {
    position: absolute;
    inset: 0;
    /* تعتيم الخريطة بدرجة تناسب الثيم الداكن */
        background: rgba(0, 0, 0, 0.26);
    mix-blend-mode: multiply; /* يدمج الألوان لتصبح متناسقة وفخمة */
    pointer-events: none;    /* السطر السحري: يسمح بالتحكم الكامل في الخريطة */
    z-index: 2;
    transition: opacity 0.3s ease;
}



/* Cuisine Collage */
.acl-concept-collage {
    position: relative;
    height: 300px;
}
.acl-collage-img {
    position: absolute;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    overflow: hidden;
}
.acl-collage-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.acl-collage-img--left {
    width: 200px;
    /* height: 250px; */
    inset-inline-start: 10px;
    top: 0;
    z-index: 1;
}
.acl-collage-img--right {
    width: 200px;
    height: 250px;
    inset-inline-start: 130px;
    top: 40px;
    z-index: 2;
    border: 3px solid #171718;
}

/* Location Map */
.acl-concept-map-container {
    width: 100%;
    border-radius: 4px;
    overflow: hidden;
    margin-top: 25px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.acl-concept-map-iframe iframe {
    width: 100%;
    height: 420px;
    display: block;
    border: 0;
}

/* ==========================================================================
   CONCEPTS ARCHIVE (Static Cards matching Figma Image 2)
   ========================================================================== */
.acl-concepts-archive-section {
    background: #171718;
    padding: 70px 0 80px;
}
.acl-concept-archive-card {
    aspect-ratio: auto !important;
    height: auto !important;
    min-height: 0 !important;
    width: 100% !important;
    flex: none !important;
    position: relative;
    border-radius: 0;
    overflow: visible !important;
    box-shadow: none !important;
    background: transparent !important;
    transition: transform 0.35s ease;
}
.acl-concept-archive-card:hover {
    transform: translateY(-4px);
}
.acl-concept-archive-card .acl-concept-link {
    display: block;
    text-decoration: none;
    width: 100%;
    height: auto !important;
}
.acl-concept-archive-card .acl-concept-img-holder {
    position: relative !important;
    inset: auto !important;
    width: 100%;
    height: 350px;
    overflow: hidden;
    background: #161616;
    border-radius: 4px;
}
.acl-concept-archive-card .acl-concept-img-holder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}
.acl-concept-archive-card:hover .acl-concept-img-holder img {
    transform: scale(1.05);
}
.acl-concept-archive-card .acl-concept-info {
    position: static !important;
    background: transparent !important;
    padding: 16px 0 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    max-height: none !important;
    transform: none !important;
    pointer-events: auto !important;
}
.acl-concept-archive-card .acl-concept-name {
    font-family: 'Jost', 'Tajawal', sans-serif !important;
    font-size: 20px !important;
    font-weight: 500 !important;
    color: #ffffff !important;
    margin-bottom: 6px !important;
    line-height: 1.35 !important;
    transition: color 0.3s ease;
}
.acl-concept-archive-card:hover .acl-concept-name {
    color: var(--acl-gold, #938C54) !important;
}
.acl-concept-archive-card .acl-concept-more {
    font-family: 'Jost', 'Tajawal', sans-serif !important;
    font-size: 14.5px !important;
    font-weight: 400 !important;
    color: #938C54 !important;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.acl-concept-archive-card .acl-arrow-diag {
    display: inline-block;
    transition: transform 0.3s ease;
}
.acl-concept-archive-card:hover .acl-arrow-diag {
    transform: translate(3px, -3px);
}
[dir="rtl"] .acl-concept-archive-card:hover .acl-arrow-diag {
    transform: scaleX(-1) translate(3px, -3px);
}
@media (max-width: 991.98px) {
    .acl-concept-archive-card .acl-concept-img-holder {
        height: 300px;
    }
}
@media (max-width: 767.98px) {
    .acl-concept-archive-card .acl-concept-img-holder {
        height: 230px;
    }
    .acl-concept-archive-card .acl-concept-name {
        font-size: 17px !important;
    }
}

/* ==========================================================================
   ABOUT THE COMPANY PAGE (Figma Node 109-223 / ACL-3)
   ========================================================================== */
.acl-about-page {
    background: #1F1F1E;
    font-family: 'Jost', 'Tajawal', sans-serif;
}

/* Section 1: Empowering Culinary Through Smart Logistics */
.acl-about-empower-section {
    padding: 60px 0 92px;
    background: #1F1F1E;
}
.acl-about-heading {
    font-family: 'Jost', 'Tajawal', sans-serif !important;
    color: #ffffff !important;
    font-size: 40px !important;
    font-weight: 600 !important;
    line-height: 1.32 !important;
    margin-bottom: 28px !important;
    letter-spacing: 0;
}
.acl-about-paragraph,
.acl-about-paragraph p {
    font-family: 'Jost', 'Tajawal', sans-serif !important;
    color: #a3a3a2 !important;
    font-size: 20px !important;
    font-weight: 300 !important;
    line-height: 1.55 !important;
    max-width: 685px;
    margin-bottom: 0;
}
.acl-about-collage {
    position: relative;
    width: 394px;
    max-width: 100%;
    height: 378px;
    margin-inline-start: auto;
}
.acl-about-collage-item {
    position: absolute;
    overflow: hidden;
}
.acl-about-collage-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.acl-about-collage--1 {
    width: 241px;
    height: 377px;
    inset-inline-end: 0;
    inset-inline-start: auto;
    top: 0;
    z-index: 1;
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.45);
}
.acl-about-collage--2 {
    width: 260px;
    height: 229px;
    inset-inline-start: 0;
    bottom: 0;
    top: auto;
    z-index: 2;
    border: none;
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.55);
}

@media (max-width: 991.98px) {
    .acl-about-collage {
        margin: 0 auto;
    }
    .acl-about-heading {
        font-size: 32px !important;
    }
    .acl-about-paragraph,
    .acl-about-paragraph p {
        font-size: 17px !important;
    }
}
@media (max-width: 480px) {
    .acl-about-collage {
        width: 310px;
        height: 310px;
    }
    .acl-about-collage--1 {
        width: 195px;
        height: 305px;
    }
    .acl-about-collage--2 {
        width: 210px;
        height: 185px;
    }
}

/* Section 2: CEO Full-Width Band */
.acl-about-ceo-section {
    padding: 0;
    background: #262624;
    position: relative;
    width: 100%;
}
.acl-ceo-full-layout {
    display: flex;
    align-items: stretch;
    width: 100%;
    min-height: 552px;
}
.acl-ceo-photo-wrap {
    flex: 0 0 31.875%;
    max-width: 459px;
    width: 459px;
    min-height: 552px;
    overflow: hidden;
    box-shadow: none;
}
.acl-ceo-photo-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}
.acl-ceo-content-col {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    padding: 40px max(20px, calc((100vw - 1140px) / 2 + 12px)) 40px 26px;
}
[dir="rtl"] .acl-ceo-content-col {
    padding: 40px 26px 40px max(20px, calc((100vw - 1140px) / 2 + 12px));
}
.acl-ceo-card {
    background: transparent;
    border: none;
    padding: 0;
    width: 100%;
    max-width: 790px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.acl-ceo-name {
    font-family: 'Jost', 'Tajawal', sans-serif !important;
    color: #ffffff !important;
    font-size: 38px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    margin-bottom: 6px !important;
}
.acl-ceo-role {
    font-family: 'Jost', 'Tajawal', sans-serif !important;
    color: #938C54;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.3;
    margin-bottom: 14px;
    display: block;
}
.acl-ceo-quote {
    font-family: 'Jost', 'Tajawal', sans-serif !important;
    color: #a3a3a2;
    font-size: 19px;
    font-weight: 300;
    font-style: normal;
    line-height: 1.55;
    margin-bottom: 24px;
    padding: 0;
    border: none;
}
.acl-ceo-bio,
.acl-ceo-bio p {
    font-family: 'Jost', 'Tajawal', sans-serif !important;
    color: #a3a3a2;
    font-size: 19px;
    font-weight: 300;
    line-height: 1.62;
    margin-bottom: 0;
}

@media (max-width: 991.98px) {
    .acl-ceo-full-layout {
        flex-direction: column;
        min-height: 0;
    }
    .acl-ceo-photo-wrap {
        flex: none;
        width: 100%;
        max-width: 100%;
        height: 440px;
        min-height: 0;
    }
    .acl-ceo-content-col,
    [dir="rtl"] .acl-ceo-content-col {
        padding: 36px 20px 44px;
    }
    .acl-ceo-name {
        font-size: 30px !important;
    }
    .acl-ceo-role {
        font-size: 20px;
    }
    .acl-ceo-quote,
    .acl-ceo-bio,
    .acl-ceo-bio p {
        font-size: 16.5px;
    }
}

/* Section 3: The Impact inside About Page */
.acl-about-impact-wrap .acl-impact-wrap {
    background: #1F1F1E !important;
    border-top: none !important;
    padding: 105px 0 55px !important;
}
.acl-impact-wrap .acl-gold-badge {
    font-family: 'Jost', 'Tajawal', sans-serif !important;
    color: #938C54;
    font-size: 28px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}
.acl-impact-wrap .acl-impact-title {
    font-family: 'Jost', 'Tajawal', sans-serif !important;
    font-size: 52px !important;
    font-weight: 600 !important;
    line-height: 1.22 !important;
}
.acl-impact-wrap .acl-impact-lead {
    font-family: 'Jost', 'Tajawal', sans-serif !important;
    color: #a3a3a2 !important;
    font-size: 21px !important;
    font-weight: 300 !important;
    line-height: 1.48 !important;
}
.acl-impact-wrap .acl-impact-grid {
    margin-top: 55px !important;
}
.acl-impact-wrap .acl-impact-item {
    padding: 0;
    margin-bottom: 80px;
}
.acl-impact-wrap .acl-impact-col-staggered {
    margin-top: 85px;
}
.acl-impact-wrap .acl-impact-icon {
    width: 40px;
    height: 40px;
}
.acl-impact-wrap .acl-impact-item-title {
    font-family: 'Jost', 'Tajawal', sans-serif !important;
    font-size: 20px !important;
    font-weight: 600 !important;
}
.acl-impact-wrap .acl-impact-item-desc {
    font-family: 'Jost', 'Tajawal', sans-serif !important;
    color: #8c8a82 !important;
    font-size: 16px !important;
    font-weight: 300 !important;
    line-height: 1.48 !important;
    max-width: 490px;
}

@media (max-width: 991.98px) {
    .acl-impact-wrap .acl-impact-title {
        font-size: 36px !important;
    }
    .acl-impact-wrap .acl-impact-lead {
        font-size: 17px !important;
    }
    .acl-impact-wrap .acl-impact-col-staggered {
        margin-top: 0;
    }
    .acl-impact-wrap .acl-impact-item {
        margin-bottom: 45px;
    }
}

/* Section 4: Strategic Pillars Carousel */
.acl-about-strategic-section {
    padding: 40px 0 90px;
    border-top: none;
    background: #1F1F1E;
}
.acl-strategic-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 52px;
}
.acl-strategic-left-col {
    flex: 1 1 615px;
    max-width: 615px;
    position: relative;
}
.acl-strategic-header {
    text-align: end;
    margin-bottom: 42px;
}
.acl-strategic-title {
    font-family: 'Jost', 'Tajawal', sans-serif !important;
    color: #ffffff !important;
    font-size: 50px !important;
    font-weight: 600 !important;
    line-height: 1.15 !important;
    margin-bottom: 10px !important;
}
.acl-strategic-sub-stage {
    display: grid;
    grid-template-columns: 1fr;
    overflow: hidden;
    position: relative;
}
.acl-strategic-sub {
    grid-area: 1 / 1;
    font-family: 'Jost', 'Tajawal', sans-serif !important;
    color: #938C54;
    font-size: 36px;
    font-weight: 300;
    letter-spacing: 0.02em;
    line-height: 1.2;
    display: block;
    text-transform: uppercase;
    opacity: 0;
    visibility: hidden;
    transform: translateY(22px);
    transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                visibility 0.45s;
    pointer-events: none;
}
.acl-strategic-sub.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}
.acl-strategic-sub.is-leaving-up {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-22px);
}
.acl-strategic-sub.is-leaving-down {
    opacity: 0;
    visibility: hidden;
    transform: translateY(22px);
}
.acl-strategic-sub.is-entering-from-bottom {
    opacity: 0;
    transform: translateY(22px);
    transition: none !important;
}
.acl-strategic-sub.is-entering-from-top {
    opacity: 0;
    transform: translateY(-22px);
    transition: none !important;
}

.acl-strategic-body {
    position: relative;
    display: flex;
    align-items: center;
}
.acl-strategic-nav-arrows {
    position: absolute;
    inset-inline-start: -102px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 34px;
    z-index: 5;
}
.acl-arrow-nav-btn {
    width: auto;
    height: auto;
    padding: 4px;
    background: transparent !important;
    border: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.25s ease, color 0.25s ease;
}
.acl-arrow-up {
    color: #D8CFBC;
}
.acl-arrow-down {
    color: #D8CFBC;
}
.acl-arrow-nav-btn:hover {
    color: #938C54;
    transform: scale(1.08);
}
.acl-arrow-up.is-triggered {
    transform: translateY(-5px);
    color: #938C54;
}
.acl-arrow-down.is-triggered {
    transform: translateY(5px);
    color: #938C54;
}

.acl-strategic-text-stage {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    overflow: hidden;
    position: relative;
}
.acl-strategic-text-slide {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    transform: translateY(26px);
    transition: opacity 0.48s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.48s cubic-bezier(0.22, 1, 0.36, 1),
                visibility 0.48s;
    pointer-events: none;
}
.acl-strategic-text-slide.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}
.acl-strategic-text-slide.is-leaving-up {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-26px);
}
.acl-strategic-text-slide.is-leaving-down {
    opacity: 0;
    visibility: hidden;
    transform: translateY(26px);
}
.acl-strategic-text-slide.is-entering-from-bottom {
    opacity: 0;
    transform: translateY(26px);
    transition: none !important;
}
.acl-strategic-text-slide.is-entering-from-top {
    opacity: 0;
    transform: translateY(-26px);
    transition: none !important;
}

.acl-strategic-text,
.acl-strategic-text p {
    font-family: 'Jost', 'Tajawal', sans-serif !important;
    color: #a3a3a2;
    font-size: 22px;
    font-weight: 300;
    line-height: 1.48;
    margin-bottom: 0;
}
.acl-strategic-right-col {
    flex: 0 0 441px;
    max-width: 441px;
    width: 441px;
}
.acl-strategic-image-wrap {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 571px;
    box-shadow: none;
    background: #181817;
}
.acl-strategic-image-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transform: scale(1.05);
    transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.65s cubic-bezier(0.22, 1, 0.36, 1),
                visibility 0.55s;
}
.acl-strategic-image-slide.is-active {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    z-index: 2;
}
.acl-strategic-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 1360px) {
    .acl-strategic-nav-arrows {
        position: static;
        transform: none;
        margin-inline-end: 24px;
        flex-shrink: 0;
    }
}
@media (max-width: 991.98px) {
    .acl-strategic-row {
        flex-direction: column;
        gap: 36px;
    }
    .acl-strategic-left-col,
    .acl-strategic-right-col {
        flex: none;
        width: 100%;
        max-width: 100%;
    }
    .acl-strategic-header {
        text-align: start;
        margin-bottom: 24px;
    }
    .acl-strategic-title {
        font-size: 36px !important;
    }
    .acl-strategic-sub {
        font-size: 24px;
    }
    .acl-strategic-text,
    .acl-strategic-text p {
        font-size: 17px;
    }
    .acl-strategic-image-wrap {
        height: 420px;
    }
}

/* ==========================================================================
   CONTACT US PAGE (Image 5)
   ========================================================================== */
.acl-contact-page {
    background: #171718;
    padding-top: 60px;
}
.acl-contact-main-heading {
    color: #ffffff !important;
    font-size: 34px !important;
    font-weight: 700 !important;
    margin-bottom: 50px !important;
}
.acl-contact-top-row {
    margin-bottom: 120px;
}
.acl-enquiries-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border-top: 1px solid rgba(255, 255, 255, 0.22);
    border-bottom: 1px solid rgba(255, 255, 255, 0.22);
    margin-bottom: 0;
}
.acl-enquiry-col {
    padding: 34px 28px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.acl-enquiry-col:nth-child(odd) {
    border-inline-end: 1px solid rgba(255, 255, 255, 0.22);
}
.acl-enquiry-col:nth-child(1),
.acl-enquiry-col:nth-child(2) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}
.acl-enquiry-item {
    margin-bottom: 0;
}
.acl-enquiry-title {
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em;
    margin-bottom: 14px !important;
    text-transform: uppercase;
    line-height: 1.45;
}
.acl-enquiry-link {
    color: #8c8c90;
    font-size: 13.5px;
    text-decoration: none !important;
    transition: all 0.25s ease;
    word-break: break-all;
    display: inline-block;
}
.acl-enquiry-link:hover {
    color: #ffffff;
}

@media (max-width: 767.98px) {
    .acl-enquiries-grid {
        grid-template-columns: 1fr;
    }
    .acl-enquiry-col {
        padding: 24px 16px;
    }
    .acl-enquiry-col:nth-child(odd) {
        border-inline-end: none;
    }
    .acl-enquiry-col:not(:last-child) {
        border-bottom: 1px solid rgba(255, 255, 255, 0.22);
    }
}

/* Contact Image Frame with Offset Backdrop */
.acl-contact-image-frame-wrap {
    position: relative;
        padding: 0 50px 50px 0;
    width: 339px;
    float: right;
    margin-bottom: -50px;
}
.acl-contact-image-backdrop {
    position: absolute;
    inset-inline-end: 0;
    bottom: 0;
    width: 80%;
    height: 80%;
    background: #232325;
    z-index: 1;
}
.acl-contact-image-box {
    position: relative;
    z-index: 2;
    height: 306px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.acl-contact-image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 3 Contact Info Cards (01, 02, 03) matching Figma Node 145-1127 */
.acl-contact-cards-row {
    margin-bottom: 70px;
}
.acl-contact-info-card {
    background: #222221;
    border: 0;
    border-radius: 4px;
    padding: 28px 30px 32px;
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.acl-contact-info-card:hover {
    background: #262625;
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
}
.acl-contact-card-num {
    position: absolute;
    top: 18px;
    inset-inline-end: 28px;
    font-family: 'Jost', 'Plus Jakarta Sans', sans-serif;
    font-size: 56px;
    font-weight: 600;
    color: rgba(78, 78, 78, 0.64);
    opacity: 1;
    letter-spacing: 0.02em;
    line-height: 1;
    transition: opacity 0.3s ease, color 0.3s ease;
}
.acl-contact-info-card:hover .acl-contact-card-num{
    color: var(--acl-gold, #938c54);
}
.acl-contact-card-icon {
    width: 75px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #3A3A3A !important;
    border-radius: 4px;
    border: 0 !important;
    margin-top: 36px;
    margin-bottom: 18px;
}
.acl-contact-card-icon-svg {
    width: 44px;
    height: 44px;
    max-width: 44px;
    max-height: 44px;
    display: block;
    transition: transform 0.3s ease;
}
.acl-contact-info-card:hover .acl-contact-card-icon-svg {
    transform: scale(1.06);
}
.acl-contact-card-title {
    color: #ffffff !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em;
    margin-top: 0 !important;
    margin-bottom: 8px !important;
}
.acl-contact-card-value {
    color: #e0e0e0;
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 0;
    margin-top: 0 !important;
    word-break: break-word;
}
.acl-contact-card-link {
    text-decoration: none;
    display: inline-block;
    transition: color 0.25s ease;
}
.acl-contact-card-link:hover {
    color: var(--acl-gold, #938c54) !important;
}

/* Bottom Map + Form Overlap */
.acl-contact-map-form-section {
    position: relative;
    padding-bottom: 80px;
}
.acl-contact-map-bg {
    position: relative;
    width: 100%;
    height: 620px;
    overflow: hidden;
}
.acl-contact-map-bg iframe { display: block; }
.acl-contact-info-card { display: flex; flex-direction: column; }
.acl-contact-card-value { margin-top: 0; line-height: 1.5; }
.acl-contact-card-title + .acl-contact-card-value { margin-top: 0 !important; }
.acl-contact-info-card { border: 0; background: #1c1c1e; }
.acl-contact-card-icon { background: #2a2a2d; border: 0; }
.acl-contact-form .row { --bs-gutter-x: 16px; --bs-gutter-y: 16px; row-gap: 16px; }
.acl-contact-form .acl-form-control { background: transparent !important; display: block; }
.acl-contact-form-container {
    position: relative;
    margin-top: -140px;
    z-index: 10;
}
.acl-contact-form-card {
    max-width: 780px;
    margin: 0 auto;
    background: #1b1b1c;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 50px rgba(0,0,0,0.7);
    padding: 45px 50px;
}
.acl-contact-form-title {
    color: #ffffff !important;
    font-size: 26px !important;
    font-weight: 700 !important;
    text-align: center;
    margin-bottom: 30px !important;
}
.acl-form-control,
.acl-contact-form .acl-form-control {
    width: 100%;
    background: #141415 !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    border-radius: 0 !important;
    margin-bottom: 0 !important;
    box-shadow: none !important;
    outline: none;
    transition: border-color 0.2s ease;
}
.acl-form-control:focus,
.acl-contact-form .acl-form-control:focus {
    border-color: #a39b62 !important;
    box-shadow: none !important;
}
.acl-form-control::placeholder {
    color: #6c6c70;
}
.acl-form-textarea,
.acl-contact-form .acl-form-textarea {
    resize: vertical;
    min-height: 0;
}
.acl-contact-submit-btn {
    background: #a39b62;
    color: #ffffff;
    border: none;
    padding: 12px 55px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 0;
    transition: all 0.25s ease;
}
.acl-contact-submit-btn:hover {
    background: #b5ac72;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(163, 155, 98, 0.35);
}

/* ==========================================================================
   WOOCOMMERCE DARK LUXURY STYLES (Matching ACL Aesthetic)
   ========================================================================== */
.woocommerce,
.woocommerce-page,
.sp-shop,
.sp-product-single,
.acl-page-section {
    background: #1F1F1E !important;
    color: #b5b5b4;
}

/* --- Shop Section Header --- */
.acl-shop-section {
    padding: 72px 0 90px;
}
.acl-shop-head {
    max-width: 720px;
    margin: 0 auto 48px;
}
.acl-shop-badge {
    display: inline-block;
    color: #938C54;
    font-family: 'Jost', 'Tajawal', sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.acl-shop-title {
    color: #ffffff !important;
    font-family: 'Jost', 'Tajawal', sans-serif !important;
    font-size: 38px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    margin: 0 0 16px !important;
}
.acl-shop-sub {
    color: #a3a3a2;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.7;
    margin: 0;
}

/* --- Shop Toolbar (Result count + Sort select) --- */
.sp-shop .sp-shop-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 36px;
    padding: 16px 22px;
    background: #181818;
    border: 1px solid rgba(255, 255, 255, 0.07);
}
.sp-shop .sp-shop-toolbar .woocommerce-result-count {
    margin: 0;
    float: none;
    color: #a3a3a2;
    font-size: 14.5px;
    letter-spacing: 0.02em;
}
.sp-shop .sp-shop-toolbar .woocommerce-ordering {
    margin: 0;
    float: none;
}
.sp-shop .sp-shop-toolbar .woocommerce-ordering select {
    background-color: #242423 !important;
    color: #ffffff !important;
    border: 1px solid rgba(147, 140, 84, 0.35) !important;
    border-radius: 0 !important;
    padding: 10px 38px 10px 16px;
    font-family: 'Jost', 'Tajawal', sans-serif;
    font-size: 14px;
    min-width: 220px;
    cursor: pointer;
    outline: none;
    transition: border-color 0.25s ease;
}
[dir="rtl"] .sp-shop .sp-shop-toolbar .woocommerce-ordering select {
    padding: 10px 16px 10px 38px;
}
.sp-shop .sp-shop-toolbar .woocommerce-ordering select:focus,
.sp-shop .sp-shop-toolbar .woocommerce-ordering select:hover {
    border-color: #938C54 !important;
}

/* --- Products Grid & ACL Luxury Product Card --- */
.sp-products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}
.sp-product-card.acl-product-card {
    background: #181818;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 0;
    overflow: hidden;
    text-align: start;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                border-color 0.35s ease,
                box-shadow 0.35s ease;
}
.sp-product-card.acl-product-card:hover {
    transform: translateY(-6px);
    border-color: rgba(147, 140, 84, 0.55);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
}
.sp-product-card.acl-product-card .sp-product-media {
    position: relative;
    display: block;
    border-radius: 0;
    overflow: hidden;
    margin-bottom: 0;
    height: 240px;
    background: #121212;
}
.sp-product-card.acl-product-card .sp-product-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(24, 24, 24, 0.65) 0%, rgba(24, 24, 24, 0) 45%);
    pointer-events: none;
}
.sp-product-card.acl-product-card .sp-product-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.sp-product-card.acl-product-card:hover .sp-product-media img {
    transform: scale(1.07);
}
.acl-product-cat-badge {
    position: absolute;
    top: 14px;
    inset-inline-start: 14px;
    z-index: 2;
    background: rgba(24, 24, 24, 0.85);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(147, 140, 84, 0.45);
    color: #c2ba82;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 11px;
}
.acl-product-body {
    padding: 22px 20px 20px;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
.sp-product-card.acl-product-card .sp-product-title {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    margin: 0 0 10px;
}
.sp-product-card.acl-product-card .sp-product-title a {
    color: #ffffff !important;
    text-decoration: none;
    transition: color 0.25s ease;
}
.sp-product-card.acl-product-card:hover .sp-product-title a {
    color: #b5ac72 !important;
}
.acl-product-excerpt {
    color: #969695;
    font-size: 13.5px;
    font-weight: 300;
    line-height: 1.6;
    margin: 0 0 18px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.acl-product-footer {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.sp-product-card.acl-product-card .sp-product-price {
    color: #938C54 !important;
    font-size: 19px;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
}
.sp-product-card.acl-product-card .sp-product-price del {
    color: #6e6e6d;
    font-size: 14px;
    font-weight: 400;
    margin-inline-end: 6px;
}
.sp-product-card.acl-product-card .sp-product-price ins {
    text-decoration: none;
    color: #b5ac72;
}
.acl-product-action {
    display: flex;
    align-items: center;
    gap: 8px;
}
.sp-product-card.acl-product-card .add_to_cart_button,
.sp-product-card.acl-product-card .sp-product-btn {
    background: transparent !important;
    border: 1px solid #938C54 !important;
    color: #ffffff !important;
    padding: 8px 15px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 0.03em;
    border-radius: 0 !important;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: all 0.25s ease;
    text-decoration: none;
}
.sp-product-card.acl-product-card .add_to_cart_button::before {
    display: none !important;
}
.sp-product-card.acl-product-card .add_to_cart_button:hover,
.sp-product-card.acl-product-card .sp-product-btn:hover {
    background: #938C54 !important;
    border-color: #938C54 !important;
    color: #ffffff !important;
}
.sp-product-card.acl-product-card .added_to_cart {
    color: #b5ac72 !important;
    font-size: 12.5px;
    font-weight: 500;
    text-decoration: underline;
    padding: 4px 6px;
}

/* --- Pagination --- */
.sp-pagination nav.woocommerce-pagination ul.page-numbers li a,
.sp-pagination nav.woocommerce-pagination ul.page-numbers li span {
    background: #181818;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0;
    color: #ffffff;
}
.sp-pagination nav.woocommerce-pagination ul.page-numbers li span.current,
.sp-pagination nav.woocommerce-pagination ul.page-numbers li a:hover {
    background: #938C54;
    border-color: #938C54;
    color: #ffffff;
}

/* --- Single Product Page --- */
.sp-product-single {
    padding: 70px 0 90px;
}
@media (min-width: 992px) {
    .sp-product-single .product {
        grid-template-columns: 460px 1fr !important;
        gap: 56px !important;
    }
}
.sp-product-single div.product div.images {
    max-width: 460px !important;
    width: 100%;
}
.sp-product-single div.product div.images .flex-viewport,
.sp-product-single .woocommerce-product-gallery__wrapper {
    background: #181818 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 0 !important;
}
.sp-product-single div.product div.images .woocommerce-product-gallery__image {
    padding: 0 !important;
    height: 440px !important;
    background: #181818 !important;
}
.sp-product-single div.product div.images .woocommerce-product-gallery__image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 0 !important;
}
.sp-product-single div.product div.images .flex-control-thumbs li img {
    background: #181818 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 0 !important;
    padding: 0 !important;
    object-fit: cover !important;
}
.sp-product-single div.product div.images .flex-control-thumbs li img.flex-active,
.sp-product-single div.product div.images .flex-control-thumbs li img:hover {
    border-color: #938C54 !important;
}
.sp-product-single .summary .product_title {
    color: #ffffff !important;
    font-family: 'Jost', 'Tajawal', sans-serif !important;
    font-size: 32px !important;
    font-weight: 600 !important;
    margin-bottom: 18px !important;
}
.sp-stock-badge.is-in {
    background: rgba(147, 140, 84, 0.16) !important;
    border: 1px solid rgba(147, 140, 84, 0.4);
    color: #c7bf86 !important;
    border-radius: 0 !important;
}
.sp-stock-badge.is-out {
    background: rgba(192, 57, 43, 0.18) !important;
    border: 1px solid rgba(192, 57, 43, 0.4);
    color: #e57368 !important;
    border-radius: 0 !important;
}
.sp-product-single div.product .summary .price,
.sp-product-single div.product .summary p.price {
    color: #938C54 !important;
    font-size: 30px !important;
    font-weight: 700 !important;
}
.sp-product-single .summary .woocommerce-product-details__short-description {
    color: #b5b5b4 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 20px 0 !important;
    margin: 22px 0 26px !important;
    line-height: 1.85;
}
.sp-qty {
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 0 !important;
    background: #181818 !important;
}
.sp-qty .sp-qty-btn {
    background: #181818 !important;
    color: #ffffff !important;
}
.sp-qty .sp-qty-btn:hover {
    background: #938C54 !important;
    color: #ffffff !important;
}
.sp-qty input.qty,
.woocommerce .quantity .qty {
    background: #181818 !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}
.sp-product-single form.cart .single_add_to_cart_button {
    background: #938C54 !important;
    color: #ffffff !important;
    border-radius: 0 !important;
    border: 1px solid #938C54 !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em;
}
.sp-product-single form.cart .single_add_to_cart_button:hover {
    background: #a8a065 !important;
    border-color: #a8a065 !important;
}
.sp-product-single .product_meta {
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #969695 !important;
}
.sp-product-single .product_meta > span strong,
.sp-product-single .product_meta a {
    color: #ffffff !important;
}
.sp-product-single .product_meta a:hover {
    color: #938C54 !important;
}

/* --- Single Product Tabs & Reviews --- */
.sp-product-single div.product .woocommerce-tabs ul.tabs {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.sp-product-single div.product .woocommerce-tabs ul.tabs li {
    background: transparent !important;
    border-radius: 0 !important;
}
.sp-product-single div.product .woocommerce-tabs ul.tabs li a {
    color: #969695 !important;
    font-weight: 500;
}
.sp-product-single div.product .woocommerce-tabs ul.tabs li.active {
    background: #181818 !important;
    border-bottom: 2px solid #938C54 !important;
}
.sp-product-single div.product .woocommerce-tabs ul.tabs li.active a {
    color: #ffffff !important;
}
.sp-product-single div.product .woocommerce-tabs .panel {
    background: #181818 !important;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-top: 0;
    border-radius: 0 !important;
    color: #b5b5b4 !important;
}
.sp-product-single .woocommerce-tabs .panel h2,
.sp-product-single #reviews .woocommerce-Reviews-title,
.sp-product-single #reviews #reply-title {
    color: #ffffff !important;
}
.sp-product-single #reviews .woocommerce-noreviews,
.sp-product-single #reviews ol.commentlist li .comment_container,
.sp-product-single #review_form_wrapper {
    background: #202020 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 0 !important;
    color: #b5b5b4 !important;
}
.sp-product-single #reviews .comment-text p.meta strong,
.sp-product-single #reviews .comment-form label {
    color: #ffffff !important;
}
.sp-product-single #reviews .comment-text .description {
    color: #b5b5b4 !important;
}
.sp-product-single #reviews .comment-form input[type="text"],
.sp-product-single #reviews .comment-form input[type="email"],
.sp-product-single #reviews .comment-form textarea {
    background: #141414 !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 0 !important;
    color: #ffffff !important;
}
.sp-product-single .related > h2,
.sp-product-single .upsells > h2 {
    color: #ffffff !important;
    font-family: 'Jost', 'Tajawal', sans-serif !important;
    font-size: 28px !important;
    margin-bottom: 36px !important;
}
.sp-product-single .related > h2::before,
.sp-product-single .upsells > h2::before {
    background: rgba(147, 140, 84, 0.35) !important;
}

/* --- Global WooCommerce Buttons, Tables, Inputs, Notices (Cart / Checkout / Account) --- */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
    background: #938C54 !important;
    color: #ffffff !important;
    border-radius: 0 !important;
    border: 1px solid #938C54 !important;
    font-weight: 600 !important;
    padding: 12px 26px !important;
    transition: all 0.25s ease;
}
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
    background: #a8a065 !important;
    border-color: #a8a065 !important;
    color: #ffffff !important;
}
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled],
.woocommerce button.button.disabled {
    background: #2a2a29 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #6e6e6d !important;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    background: #181818 !important;
    color: #e0e0df !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-inline-start: 4px solid #938C54 !important;
    border-radius: 0 !important;
}
.woocommerce-info a,
.woocommerce-message a:not(.button),
.woocommerce-error a,
.woocommerce-privacy-policy-text a,
.woocommerce-terms-and-conditions-wrapper a {
    color: #b5ac72 !important;
}

.woocommerce table.shop_table {
    background: #181818 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 0 !important;
}
.woocommerce table.shop_table thead th {
    background: #141414 !important;
    color: #ffffff !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.woocommerce table.shop_table td,
.woocommerce table.shop_table th {
    border-top-color: rgba(255, 255, 255, 0.07) !important;
    color: #d0d0cf !important;
}
.woocommerce-cart table.cart td.product-name a {
    color: #ffffff !important;
}
.woocommerce-cart table.cart td.product-name a:hover {
    color: #938C54 !important;
}
.woocommerce-cart table.cart td.product-price,
.woocommerce-cart table.cart td.product-subtotal,
.woocommerce-cart .cart_totals .order-total td,
.woocommerce-checkout #order_review tfoot .order-total th,
.woocommerce-checkout #order_review tfoot .order-total td {
    color: #938C54 !important;
    font-weight: 700;
}
.woocommerce-cart .cart_totals,
.woocommerce-checkout #order_review,
.woocommerce-order .woocommerce-thankyou-order-received {
    background: #181818 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 0 !important;
    color: #ffffff !important;
}
.woocommerce-cart .cart_totals h2,
.woocommerce-billing-fields > h3,
.woocommerce-shipping-fields > h3,
.woocommerce-additional-fields > h3,
#order_review_heading {
    color: #ffffff !important;
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}
.woocommerce form .form-row label {
    color: #d0d0cf !important;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text,
.woocommerce-page form .form-row textarea,
.woocommerce-page form .form-row select,
.woocommerce-cart table.cart td.actions .coupon input.input-text,
.select2-container--default .select2-selection--single {
    background: #141414 !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 0 !important;
    color: #ffffff !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #ffffff !important;
}
.select2-dropdown {
    background: #181818 !important;
    border-color: rgba(147, 140, 84, 0.4) !important;
    color: #ffffff !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
    background: #121212 !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}
.select2-container--default .select2-results__option[aria-selected=true],
.select2-container--default .select2-results__option[data-selected=true] {
    background: #282827 !important;
    color: #b5ac72 !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
    background: #938C54 !important;
    color: #ffffff !important;
}
.woocommerce-checkout #payment ul.payment_methods li label {
    color: #ffffff !important;
}
.woocommerce-checkout #payment div.payment_box {
    background: #222221 !important;
    color: #b5b5b4 !important;
    border-radius: 0 !important;
}
.woocommerce ul.order_details li {
    background: #181818 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    border-radius: 0 !important;
    color: #a3a3a2 !important;
}
.woocommerce ul.order_details li strong {
    color: #ffffff !important;
}

/* --- My Account --- */
.sp-account-menu,
.woocommerce-account .woocommerce-MyAccount-content,
.woocommerce-account .col2-set .col-1,
.woocommerce-account .col2-set .col-2 {
    background: #181818 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 0 !important;
    color: #b5b5b4 !important;
}
.sp-account-menu-head {
    background: #121212 !important;
    border-bottom: 1px solid rgba(147, 140, 84, 0.3);
}
.sp-account-menu-list a {
    color: #d0d0cf !important;
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}
.sp-account-menu-list a:hover {
    background: #222221 !important;
    color: #b5ac72 !important;
}
.sp-account-menu-list li.is-active a {
    background: rgba(147, 140, 84, 0.15) !important;
    color: #b5ac72 !important;
    border-inline-start: 3px solid #938C54;
}
.woocommerce-account .col2-set h2,
.woocommerce-Address-title h3 {
    color: #ffffff !important;
}
.woocommerce-Address {
    background: #202020 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    border-radius: 0 !important;
}

/* Efada Link in Footer */
.acl-efada-link {
    color: #a39b62;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease;
}
.acl-efada-link:hover {
    color: #ffffff;
    text-decoration: underline;
}

/* ==========================================================================
   OUR TEAM PAGE (Figma Design)
   ========================================================================== */
.acl-team-page {
    background: #171718;
    padding: 75px 0 55px;
}
.acl-team-col {
    margin-bottom: 24px;
}
.acl-team-card {
    transition: transform 0.3s ease;
}
.acl-team-card:hover {
    transform: translateY(-4px);
}
.acl-team-card-media {
    width: 100%;
    height: 310px;
    overflow: hidden;
    background: #202022;
}
.acl-team-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.acl-team-card:hover .acl-team-card-media img {
    transform: scale(1.04);
}
.acl-team-card-info {
    padding: 16px 0 0;
}
.acl-team-card-name {
    color: #ffffff !important;
    font-size: 19px !important;
    font-weight: 600 !important;
    margin-bottom: 4px !important;
    transition: color 0.2s ease;
}
.acl-team-card-name.is-highlight,
.acl-team-card:hover .acl-team-card-name {
    color: #a39b62 !important;
}
.acl-team-card-role {
    color: #8c8c90;
    font-size: 14px;
    font-weight: 400;
    display: block;
}

/* ==========================================================================
   HOMEPAGE FIGMA PRECISION PASS (Node 35-234 / ACL-1) & MOBILE RESPONSIVE
   ========================================================================== */

/* 1. Global Typography & Header Alignment */
html, body, main.wrap {
    font-family: 'Jost', 'Tajawal', sans-serif !important;
}

.sp-header {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: none !important;
    padding: 16px 0 !important;
    transition: background-color 0.3s ease, backdrop-filter 0.3s ease, padding 0.3s ease;
}
.sp-header.is-scrolled {
    background: rgba(18, 18, 18, 0.88) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    padding: 12px 0 !important;
}
.sp-header-inner {
    min-height: 60px !important;
}
.sp-header-brand .sp-logo img {
    height: 75px;
}
.sp-nav-list {
    gap: 32px;
}
.sp-nav-list > li > a {
    font-family: 'Jost', 'Tajawal', sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    letter-spacing: 0.01em;
}
.acl-lang-toggle {
    font-family: 'Jost', 'Tajawal', sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
}

/* 2. Hero Section (Figma Node 35-234) */
.acl-hero-section {
    margin-top: -107px; /* Seamless hero behind transparent header */
}
.acl-hero-slide {
    min-height: 92vh !important;
    padding-top: 92px;
}

/* Luxury Staggered Entrance Animation for Hero Title, Subtitle & Buttons */
.sp-intro-carousel.owl-loaded .owl-item .acl-hero-title {
    opacity: 0;
    transform: translate3d(0, -38px, 0) scale(0.97);
    filter: blur(5px);
    transition: none;
    will-change: opacity, transform, filter;
}

.sp-intro-carousel.owl-loaded .owl-item .acl-hero-text,
.sp-intro-carousel.owl-loaded .owl-item .acl-hero-actions {
    opacity: 0;
    transform: translate3d(0, 36px, 0);
    filter: blur(4px);
    transition: none;
    will-change: opacity, transform, filter;
}

.sp-intro-carousel.owl-loaded .owl-item.acl-slide-enter .acl-hero-title {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.05s,
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.05s,
                filter 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.05s;
}

.sp-intro-carousel.owl-loaded .owl-item.acl-slide-enter .acl-hero-text {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.25s,
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.25s,
                filter 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.25s;
}

.sp-intro-carousel.owl-loaded .owl-item.acl-slide-enter .acl-hero-actions {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.42s,
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.42s,
                filter 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.42s;
}

.acl-hero-content {
    max-width: 780px;
    padding: 70px 0 90px;
}
.acl-hero-title {
    font-family: 'Jost', 'Tajawal', sans-serif !important;
    font-size: 64px !important;
    font-weight: 600 !important;
    line-height: 1.18 !important;
    letter-spacing: 0 !important;
    color: #938C54 !important;
    margin-bottom: 20px !important;
}
.acl-hero-text,
.acl-hero-text p {
    font-family: 'Jost', 'Tajawal', sans-serif !important;
    font-size: 26px !important;
    font-weight: 300 !important;
    line-height: 1.42 !important;
    color: #ffffff !important;
    max-width: 650px;
    margin-bottom: 36px !important;
}
.acl-hero-actions {
    gap: 20px;
    flex-wrap: wrap;
}
.acl-btn-primary,
.acl-btn-outline {
    font-family: 'Jost', 'Tajawal', sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    min-width: 184px;
    height: 48px;
    padding: 0 28px !important;
    outline-offset: 3px !important;
}
.acl-btn-primary {
    background: #938C54 !important;
    color: #070708 !important;
    border: none !important;
    outline: 1px solid rgba(255, 255, 255, 0.7) !important;
}
.acl-btn-outline {
    background: #DED4C6 !important;
    color: #070708 !important;
    border: none !important;
    outline: 1px solid rgba(255, 255, 255, 0.7) !important;
}
.acl-pager-num {
    font-family: 'Jost', sans-serif !important;
    font-size: 16px !important;
    font-weight: 300 !important;
    color: rgba(255, 255, 255, 0.75);
}
.acl-pager-num.active {
    color: #938C54 !important;
    font-weight: 400 !important;
    transform: none;
    text-shadow: none;
}
.acl-pager-line.active {
    height: 44px;
    background: #938C54;
}

/* 3. About Section (Figma Node 35-234) */
.acl-about-composite {
    background: linear-gradient(to bottom, transparent 90px, #1F1F1E 90px) !important;
}
.acl-about-card {
    background: #272727 !important;
    padding: 64px 70px 115px 96px;
}
.acl-about-card-badge {
    inset-inline-start: 42px;
    top: 72px;
    transform: none !important;
    writing-mode: vertical-rl;
    font-family: 'Jost', 'Tajawal', sans-serif;
    font-size: 21px;
    font-weight: 400;
    letter-spacing: 0.03em;
    text-transform: capitalize;
    color: #938C54;
}
.acl-about-card-inner {
    margin-inline-start: 44px;
    padding-inline-end: 90px;
}
.acl-about-card-title {
    font-family: 'Jost', 'Tajawal', sans-serif !important;
    font-size: 46px !important;
    font-weight: 600 !important;
    line-height: 1.24 !important;
    letter-spacing: 0 !important;
    margin-bottom: 20px !important;
    color: #ffffff !important;
}
.acl-about-card-text,
.acl-about-card-text p {
    font-family: 'Jost', 'Tajawal', sans-serif !important;
    font-size: 24px !important;
    font-weight: 300 !important;
    line-height: 1.55 !important;
    color: #a3a3a2 !important;
    max-width: 100%;
    margin-bottom: 0 !important;
}
.acl-about-card-action {
    inset-inline-end: 0;
    bottom: 4px;
}
.acl-about-arrow-btn {
    width: 48px;
    height: 48px;
    background: #DED4C6;
    border: none;
    outline: 1px solid rgba(255, 255, 255, 0.75);
    outline-offset: 3px;
}
.acl-kitchen-photo {
    border-radius: 0 !important;
    box-shadow: none !important;
}
.acl-kitchen-photo img {
    height: 500px;
}
.acl-floating-produce {
    left: -17.6%;
    top: auto;
    bottom: 10%;
    width: 15.5%;
}

/* 4. Counters Section (Figma Node 35-234) */
.acl-counters-section {
    background: #1F1F1E !important;
    padding: 85px 0 90px !important;
    border-bottom: none !important;
}
.acl-counter-faint-icon {
    top: 67%;
    width: 108px;
    height: 120px;
    color: #938C54;
    opacity: 0.12;
    transition: opacity 0.35s ease, transform 0.35s ease, color 0.35s ease;
}
.acl-counter-faint-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}
.acl-counter-faint-icon .acl-counter-icon-mask {
    display: block;
    width: 100%;
    height: 100%;
    background-color: currentColor;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}
.acl-counter-card:hover .acl-counter-faint-icon {
    opacity: 0.65 !important;
    color: #938C54 !important;
    transform: translate(-50%, -50%) scale(1.1);
}
.acl-counter-val {
    font-family: 'Jost', sans-serif !important;
    font-size: 56px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    margin-bottom: 10px;
    text-shadow: none;
}
.acl-counter-sign {
    font-size: 50px;
    font-weight: 700;
}
.acl-counter-text {
    font-family: 'Jost', 'Tajawal', sans-serif !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    color: #a3a3a2 !important;
    text-shadow: none;
}

/* 5. Services Section (Figma Node 35-234) */
.acl-services-wrap {
    background: #1F1F1E !important;
    padding: 95px 0 105px !important;
}
.acl-gold-title {
    font-family: 'Jost', 'Tajawal', sans-serif !important;
    font-size: 32px !important;
    font-weight: 500 !important;
    color: #938C54 !important;
}
.acl-service-outline-num {
    font-family: 'Jost', sans-serif !important;
    font-size: 64px !important;
    font-weight: 700 !important;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.42) !important;
    color: transparent !important;
    margin-bottom: 16px;
}
.acl-service-item:hover .acl-service-outline-num {
    -webkit-text-stroke: 1.5px #938C54 !important;
    filter: none;
}
.acl-service-heading {
    font-family: 'Jost', 'Tajawal', sans-serif !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    margin-bottom: 14px !important;
}
.acl-service-paragraph {
    font-family: 'Jost', 'Tajawal', sans-serif !important;
    font-size: 15px !important;
    font-weight: 300 !important;
    line-height: 1.75 !important;
    color: #8c8a82 !important;
    max-width: 310px;
}

/* 6. Concepts Carousel (Figma Node 35-234 - Caption Below Active Card) */
.acl-concepts-wrap {
    background: #1F1F1E !important;
    padding: 95px 0 90px !important;
}
.acl-carousel {
    --side: 270px;
    --active: 545px;
    --gap: 28px;
    padding: 0 0 10px;
}
.acl-carousel-track {
    align-items: flex-start !important;
}
.acl-carousel-track.is-jumping,
.acl-carousel-track.is-jumping .acl-concept-card,
.acl-carousel-track.is-jumping .acl-concept-img-box,
.acl-carousel-track.is-jumping .acl-concept-info {
    transition: none !important;
}
.acl-carousel .acl-concept-card {
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    height: auto !important;
    overflow: visible !important;
    opacity: 1 !important;
}
.acl-carousel .acl-concept-card .acl-concept-img-box {
    width: 100%;
    height: 410px;
    overflow: hidden;
    background: #161616;
    transition: height 0.65s cubic-bezier(0.25, 1, 0.5, 1);
}
.acl-carousel .acl-concept-card:hover .acl-concept-img-box {
    height: 335px;
}
.acl-carousel .acl-concept-card .acl-concept-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.acl-carousel .acl-concept-card .acl-concept-info {
    position: static !important;
    background: transparent !important;
    padding: 14px 0 0 !important;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.4s ease, transform 0.4s ease, max-height 0.4s ease;
}
.acl-carousel .acl-concept-card.is-hover .acl-concept-info {
    opacity: 1 !important;
    max-height: 90px;
    transform: translateY(0) !important;
}
.acl-concept-name {
    font-family: 'Jost', 'Tajawal', sans-serif !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    color: #ffffff !important;
    margin-bottom: 4px !important;
}
.acl-concept-more {
    font-family: 'Jost', 'Tajawal', sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #938C54 !important;
}

/* 7. The Impact Section (Figma Node 35-234) */
.acl-impact-wrap {
    background: #1F1F1E !important;
    padding: 90px 0 70px !important;
    border-top: none !important;
}
.acl-gold-badge {
    font-family: 'Jost', 'Tajawal', sans-serif !important;
    font-size: 22px !important;
    font-weight: 400 !important;
    text-transform: capitalize !important;
    letter-spacing: 0 !important;
    color: #938C54 !important;
}
.acl-impact-title {
    font-family: 'Jost', 'Tajawal', sans-serif !important;
    font-size: 46px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    letter-spacing: 0 !important;
}
.acl-impact-lead {
    font-family: 'Jost', 'Tajawal', sans-serif !important;
    font-size: 20px !important;
    font-weight: 300 !important;
    line-height: 1.48 !important;
    color: #a3a3a2 !important;
}
.acl-impact-item-title {
    font-family: 'Jost', 'Tajawal', sans-serif !important;
    font-size: 18px !important;
    font-weight: 600 !important;
}
.acl-impact-item-desc {
    font-family: 'Jost', 'Tajawal', sans-serif !important;
    font-size: 14px !important;
    font-weight: 300 !important;
    line-height: 1.55 !important;
    color: #8c8a82 !important;
}

/* 8. Newsletter CTA & Footer Typography Refinement (Figma Node 35-234) */
.acl-cta-main-title {
    font-family: 'Jost', 'Tajawal', sans-serif !important;
    font-size: 42px !important;
    font-weight: 600 !important;
    line-height: 1.28 !important;
    max-width: 420px;
}
.acl-cta-newsletter-hint {
        font-family: 'Jost', 'Tajawal', sans-serif !important;
    font-size: 20px !important;
    font-weight: 500 !important;
    color: #D8CFBC !important;
}
.acl-footer-logo-link img {
    height: 64px !important;
    margin-bottom: 16px !important;
}
.acl-footer-desc {
    font-family: 'Jost', 'Tajawal', sans-serif !important;
    font-size: 16px !important;
    font-weight: 300 !important;
    line-height: 1.5 !important;
    color: #969695 !important;
    max-width: 265px !important;
}
.acl-footer-gold-title {
    font-family: 'Jost', 'Tajawal', sans-serif !important;
    font-size: 20px !important;
    font-weight: 500 !important;
    color: #938C54 !important;
    margin-bottom: 18px !important;
}
.acl-quick-list li a,
.acl-contact-list li,
.acl-contact-list li span,
.acl-contact-list li a {
    font-family: 'Jost', 'Tajawal', sans-serif !important;
    font-size: 14.5px !important;
    font-weight: 400 !important;
}
.acl-copyright-text {
    font-family: 'Jost', 'Tajawal', sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
}

/* ==========================================================================
   9. DARK LUXURY MOBILE DRAWER & FULL MOBILE RESPONSIVE SYSTEM
   ========================================================================== */
.sp-nav-overlay {
    background: rgba(0, 0, 0, 0.75) !important;
    backdrop-filter: blur(4px);
}
.sp-mobile-nav.acl-mobile-drawer {
    background: #161616 !important;
    border-inline-start: 1px solid rgba(147, 140, 84, 0.3);
    padding: 24px 22px !important;
    display: flex;
    flex-direction: column;
    color: #ffffff;
        z-index: 9999;
}
.acl-mobile-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 20px;
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.acl-mobile-drawer-head .sp-mobile-logo {
    margin: 0 !important;
}
.acl-mobile-drawer-head .sp-mobile-logo img {
    width: auto !important;
    height: 44px !important;
    object-fit: contain;
}
.acl-mobile-drawer-head .sp-mobile-close {
    position: static !important;
    width: 38px;
    height: 38px;
    border-radius: 0 !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: all 0.25s ease;
}
.acl-mobile-drawer-head .sp-mobile-close:hover {
    background: #938C54 !important;
    border-color: #938C54 !important;
}
.acl-mobile-menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1 1 auto;
}
.acl-mobile-menu-list li {
    position: relative;
}
.acl-mobile-menu-list > li > a {
    color: #ffffff !important;
    font-family: 'Jost', 'Tajawal', sans-serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    padding: 13px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
}
.acl-mobile-menu-list > li.current-menu-item > a,
.acl-mobile-menu-list > li > a:hover {
    color: #938C54 !important;
}
.acl-mobile-menu-list .dd-trigger {
    color: #938C54 !important;
    font-size: 12px;
    padding: 4px 8px;
}
.acl-mobile-menu-list .sub-menu,
.acl-mobile-menu-list .sub-menu--mega {
    background: #1e1e1e !important;
    padding: 6px 14px !important;
    margin: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.acl-mobile-menu-list .sub-menu a,
.acl-mobile-menu-list .mega-concept-item a {
    color: #d0d0cf !important;
    font-size: 14.5px !important;
    padding: 10px 4px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
    background: transparent !important;
}
.acl-mobile-menu-list .sub-menu li:last-child a {
    border-bottom: 0 !important;
}
.acl-mobile-drawer-footer {
    padding-top: 18px;
    margin-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.acl-mobile-lang-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 11px 16px;
    background: rgba(147, 140, 84, 0.15);
    border: 1px solid #938C54;
    color: #ffffff !important;
    font-size: 14.5px;
    font-weight: 500;
}

/* --- Tablet & Mobile Breakpoints (<= 991.98px) --- */
@media (max-width: 991.98px) {
    .sp-header {
        padding: 12px 0 !important;
        background: rgba(18, 18, 18, 0.92) !important;
    }
    .sp-header-inner {
        min-height: 52px !important;
    }
    .sp-header-brand .sp-logo img {
        height: 44px;
    }
    .sp-burger {
        width: 40px;
        height: 40px;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(255, 255, 255, 0.18) !important;
        border-radius: 0 !important;
    }
    .acl-hero-section {
        margin-top: -76px;
    }
    .acl-hero-slide {
        min-height: 78vh !important;
        padding-top: 76px;
    }
    .acl-hero-title {
        font-size: 44px !important;
    }
    .acl-hero-text,
    .acl-hero-text p {
        font-size: 20px !important;
    }
    .acl-about-card {
        padding: 48px 36px 90px 72px;
    }
    .acl-about-card-badge {
        inset-inline-start: 24px;
        top: 52px;
    }
    .acl-about-card-inner {
        margin-inline-start: 28px;
        padding-inline-end: 70px;
    }
    .acl-about-card-title {
        font-size: 34px !important;
    }
    .acl-impact-title {
        font-size: 36px !important;
    }
}

/* --- Mobile Phones Breakpoint (<= 767.98px) --- */
@media (max-width: 767.98px) {
    /* Hero */
    .acl-hero-slide {
        min-height: 72vh !important;
    }
    .acl-hero-content {
        padding: 45px 28px 65px 0;
    }
    [dir="rtl"] .acl-hero-content {
        padding: 45px 0 65px 28px;
    }
    .acl-hero-title {
        font-size: 32px !important;
        line-height: 1.24 !important;
        margin-bottom: 14px !important;
    }
    .acl-hero-text,
    .acl-hero-text p {
        font-size: 16.5px !important;
        line-height: 1.55 !important;
        margin-bottom: 26px !important;
    }
    .acl-hero-actions {
        gap: 14px;
    }
    .acl-btn-primary,
    .acl-btn-outline {
        min-width: 140px;
        height: 44px;
        font-size: 14.5px !important;
        padding: 0 20px !important;
    }
    .acl-hero-pager {
        inset-inline-end: 8px;
    }

    /* About Section on Mobile: clean badge + non-overlapping arrow button */
    .acl-about-composite {
        margin-top: -40px !important;
        background: #1F1F1E !important;
    }
    .acl-about-card-wrap {
        width: 100%;
        margin-bottom: 0;
    }
    .acl-about-card {
        padding: 32px 20px 32px !important;
    }
    .acl-about-card-badge {
        position: static !important;
        writing-mode: horizontal-tb !important;
        transform: none !important;
        display: block;
        margin-bottom: 10px;
        font-size: 13.5px;
    }
    .acl-about-card-inner {
        margin-inline-start: 0 !important;
        padding-inline-end: 0 !important;
    }
    .acl-about-card-title {
        font-size: 26px !important;
        line-height: 1.3 !important;
        margin-bottom: 14px !important;
    }
    .acl-about-card-text,
    .acl-about-card-text p {
        font-size: 15px !important;
        line-height: 1.65 !important;
    }
    .acl-about-card-action {
        position: static !important;
        margin-top: 22px;
        display: flex;
        justify-content: flex-start;
    }
    .acl-kitchen-photo img {
        height: 250px !important;
    }

    /* Counters on Mobile (2x2 clean grid) */
    .acl-counters-section {
        padding: 50px 0 !important;
    }
    .acl-counter-card {
        padding: 20px 8px;
        min-height: 135px;
    }
    .acl-counter-faint-icon {
        width: 90px;
        height: 90px;
    }
    .acl-counter-val {
        font-size: 38px !important;
    }
    .acl-counter-sign {
        font-size: 32px;
    }
    .acl-counter-text {
        font-size: 14px !important;
        white-space: normal !important;
        line-height: 1.35;
    }

    /* Services on Mobile */
    .acl-services-wrap {
        padding: 55px 0 35px !important;
    }
    .acl-section-gold-head {
        margin-bottom: 32px;
    }
    .acl-gold-title {
        font-size: 26px !important;
    }
    .acl-service-outline-num {
        font-size: 50px !important;
        margin-bottom: 10px;
    }
    .acl-service-heading {
        font-size: 19px !important;
        margin-bottom: 10px !important;
    }
    .acl-service-paragraph {
        max-width: 100%;
        font-size: 14.5px !important;
    }

    /* Concepts Carousel on Mobile */
    .acl-concepts-wrap {
        padding: 50px 0 60px !important;
    }
    .acl-carousel {
        --side: 190px;
        --active: 290px;
        --gap: 16px;
    }
    .acl-carousel .acl-concept-card .acl-concept-img-box {
        height: 280px;
    }
    .acl-carousel .acl-concept-card:hover .acl-concept-img-box {
        height: 225px;
    }
    .acl-concept-name {
        font-size: 16px !important;
    }
    .acl-concepts-dots {
        margin-top: 22px;
    }

    /* The Impact on Mobile */
    .acl-impact-wrap {
        padding: 55px 0 40px !important;
    }
    .acl-gold-badge {
        font-size: 17px !important;
    }
    .acl-impact-title {
        font-size: 28px !important;
        line-height: 1.3 !important;
    }
    .acl-impact-lead {
        font-size: 15.5px !important;
        line-height: 1.6 !important;
    }
    .acl-impact-grid {
        margin-top: 32px !important;
    }
    .acl-impact-item {
        padding: 0;
        margin-bottom: 32px;
    }
    .acl-impact-item-title {
        font-size: 17px !important;
    }

    /* Newsletter CTA & Footer on Mobile */
    .acl-cta-intro-section {
        padding: 45px 0 25px !important;
    }
    .acl-cta-main-title {
        font-size: 26px !important;
        max-width: 100%;
    }
    .acl-footer-main-row {
        padding-top: 30px;
    }
    .acl-footer-logo-link img {
        height: 54px !important;
    }
    .acl-footer-desc {
        font-size: 14.5px !important;
        max-width: 100% !important;
    }
    .acl-footer-gold-title {
        font-size: 18px !important;
        margin-bottom: 14px !important;
    }
    .acl-footer-bottom-bar {
        text-align: center;
    }
}

/* ==========================================================================
   10. ARABIC (RTL) PRECISION LAYOUT & MIRRORING FIXES
   ========================================================================== */
[dir="rtl"] .sp-nav-list li.menu-item-concepts > ul.sub-menu--mega,
[dir="rtl"] .sp-nav-list li.mega-menu > ul.sub-menu--mega {
    left: auto !important;
    right: 50% !important;
    transform: translateX(50%) translateY(12px) !important;
}
[dir="rtl"] .sp-nav-list li.menu-item-concepts:hover > ul.sub-menu--mega,
[dir="rtl"] .sp-nav-list li.mega-menu:hover > ul.sub-menu--mega {
    transform: translateX(50%) translateY(0) !important;
}
[dir="rtl"] .mega-concept-item a:hover {
    transform: translateX(-4px) !important;
}
[dir="rtl"] .sp-nav-list ul.sub-menu li a:hover,
[dir="rtl"] .sp-nav-list .sub-menu li a:hover {
    padding-inline-start: 24px !important;
}

/* Hero Overlay & Content Alignment in RTL */
[dir="rtl"] .acl-hero-overlay {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 31%, rgba(21, 21, 21, 0.25) 100%) !important;
}
[dir="rtl"] .acl-hero-content {
    text-align: right;
}
[dir="rtl"] .acl-hero-title {
    line-height: 1.3 !important;
}
[dir="rtl"] .acl-hero-text,
[dir="rtl"] .acl-hero-text p {
    line-height: 1.65 !important;
}

/* About Section Full Mirroring in RTL */
[dir="rtl"] .acl-about-card-wrap {
    margin: 0 0 -60px auto;
}
[dir="rtl"] .acl-about-card {
    padding: 64px 96px 115px 70px;
    text-align: right;
}
[dir="rtl"] .acl-about-card-badge {
    letter-spacing: 0 !important;
    font-size: 16px;
        inset-inline-start: 60%;
    font-weight: 500;
}
[dir="rtl"] .acl-about-card-title {
    line-height: 1.35 !important;
}
[dir="rtl"] .acl-about-card-text,
[dir="rtl"] .acl-about-card-text p {
    line-height: 1.75 !important;
}
[dir="rtl"] .acl-about-arrow-btn svg {
    transform: scaleX(-1);
}
[dir="rtl"] .acl-about-arrow-btn:hover {
    transform: translate(-2px, -2px);
}
[dir="rtl"] .acl-kitchen-visual-wrap {
    margin: 0 auto 0 0; /* Flush with the left edge in RTL */
}
[dir="rtl"] .acl-floating-produce {
    left: auto;
    right: -17.6%;
        transform: scale(-1, 1);
}

/* Services, Concepts, Impact & Footer RTL Refinements */
[dir="rtl"] .acl-services-wrap,
[dir="rtl"] .acl-impact-wrap,
[dir="rtl"] .acl-cta-intro-section,
[dir="rtl"] .acl-footer-wrap {
    text-align: right;
}
[dir="rtl"] .acl-carousel .acl-concept-card .acl-concept-info {
    text-align: right;
}
[dir="rtl"] .acl-arrow-diag {
    transform: scaleX(-1);
}
[dir="rtl"] .acl-concept-card:hover .acl-arrow-diag {
    transform: scaleX(-1) translate(3px, -3px);
}
[dir="rtl"] .acl-quick-list li a:hover {
    transform: translateX(-4px);
}

@media (max-width: 991.98px) {
    [dir="rtl"] .acl-about-card-wrap {
        width: 100%;
        margin: 0 0 -30px 0;
    }
    [dir="rtl"] .acl-about-card {
        padding: 48px 72px 90px 36px;
    }
    [dir="rtl"] .acl-kitchen-visual-wrap {
        width: 100%;
    }
}

@media (max-width: 767.98px) {
    [dir="rtl"] .acl-about-card-wrap {
        margin-bottom: 0;
    }
    [dir="rtl"] .acl-about-card {
        padding: 32px 20px !important;
    }
}



/* ==========================================================================
   SEARCH RESULTS PAGE - ACL DARK LUXURY STYLE
   ========================================================================== */
.acl-search-page-section {
    padding: 70px 0 100px;
    background-color: var(--acl-bg-darkest, #1F1F1E);
    min-height: 60vh;
}

.acl-search-header-box {
    margin-bottom: 50px;
}

.acl-search-form-centered {
    max-width: 680px;
    margin: 0 auto;
}

.acl-search-form {
    width: 100%;
}

.acl-search-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.acl-search-input-wrap .acl-search-icon {
    position: absolute;
    inset-inline-start: 22px;
    color: var(--acl-gold, #938c54);
    font-size: 18px;
    pointer-events: none;
    z-index: 2;
}

.acl-search-input-wrap .acl-search-input {
    width: 100%;
    height: 56px;
    background: #18181a !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 4px;
    padding-inline-start: 56px !important;
    padding-inline-end: 120px !important;
    color: #ffffff !important;
    font-family: 'Jost', 'Plus Jakarta Sans', 'Tajawal', sans-serif;
    font-size: 15px;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.acl-search-input-wrap .acl-search-input:focus {
    outline: none !important;
    border-color: var(--acl-gold, #938c54) !important;
    box-shadow: 0 0 15px rgba(147, 140, 84, 0.25) !important;
}

.acl-search-input-wrap .acl-search-submit-btn {
    position: absolute;
    inset-inline-end: 8px;
    height: 42px;
    padding: 0 24px;
    background: var(--acl-gold, #938c54);
    color: #ffffff;
    border: none;
    border-radius: 3px;
    font-family: 'Jost', 'Plus Jakarta Sans', 'Tajawal', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    z-index: 2;
}

.acl-search-input-wrap .acl-search-submit-btn:hover {
    background: #b5ac72;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(147, 140, 84, 0.35);
}

.acl-search-status-bar {
    margin-top: 24px;
}

.acl-search-query-info {
    color: #8c8a82;
    font-family: 'Jost', 'Plus Jakarta Sans', 'Tajawal', sans-serif;
    font-size: 16px;
    margin: 0;
}

.acl-search-query-term {
    color: var(--acl-gold, #938c54);
    font-weight: 600;
}

/* Result Cards */
.acl-search-card {
    background: #18181a;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.acl-search-card:hover {
    border-color: rgba(147, 140, 84, 0.45);
    transform: translateY(-5px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
}

.acl-search-card-thumb {
    display: block;
    position: relative;
    width: 100%;
    height: 220px;
    overflow: hidden;
    background: #121214;
}

.acl-search-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.acl-search-card:hover .acl-search-card-thumb img {
    transform: scale(1.08);
}

.acl-search-card-no-thumb {
    position: relative;
    width: 100%;
    height: 80px;
    background: #151517;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.acl-search-card-badge {
    position: absolute;
    top: 14px;
    inset-inline-start: 14px;
    background: rgba(24, 24, 26, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(147, 140, 84, 0.35);
    color: var(--acl-gold, #938c54);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 3px;
    z-index: 3;
}

.acl-search-card-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.acl-search-card-title {
    font-family: 'Jost', 'Plus Jakarta Sans', 'Tajawal', sans-serif;
    font-size: 20px !important;
    font-weight: 600 !important;
    margin: 0 0 12px 0 !important;
    line-height: 1.35 !important;
}

.acl-search-card-title a {
    color: #ffffff !important;
    text-decoration: none !important;
    transition: color 0.25s ease;
}

.acl-search-card-title a:hover {
    color: var(--acl-gold, #938c54) !important;
}

.acl-search-card-desc {
    color: #9d9a92;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 20px;
    flex-grow: 1;
}

.acl-search-card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--acl-gold, #938c54);
    font-family: 'Jost', 'Plus Jakarta Sans', 'Tajawal', sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none !important;
    transition: color 0.25s ease, transform 0.25s ease;
    margin-top: auto;
}

.acl-search-card-link .acl-arrow-diag {
    font-size: 15px;
    transition: transform 0.25s ease;
}

.acl-search-card-link:hover {
    color: #ffffff;
}

.acl-search-card-link:hover .acl-arrow-diag {
    transform: translate(3px, -3px);
}

[dir="rtl"] .acl-search-card-link:hover .acl-arrow-diag {
    transform: translate(-3px, -3px);
}

/* Empty State */
.acl-search-empty-box {
    max-width: 600px;
    margin: 40px auto 20px;
    padding: 50px 30px;
    background: #18181a;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
}

.acl-search-empty-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 24px;
    background: rgba(147, 140, 84, 0.12);
    border: 1px solid rgba(147, 140, 84, 0.25);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--acl-gold, #938c54);
    font-size: 28px;
}

.acl-search-empty-title {
    color: #ffffff !important;
    font-family: 'Jost', 'Plus Jakarta Sans', 'Tajawal', sans-serif;
    font-size: 24px !important;
    font-weight: 600 !important;
    margin-bottom: 12px !important;
}

.acl-search-empty-desc {
    color: #8c8a82;
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 30px;
}

.acl-search-empty-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.acl-search-btn-gold {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 28px;
    background: var(--acl-gold, #938c54);
    color: #ffffff !important;
    font-family: 'Jost', 'Plus Jakarta Sans', 'Tajawal', sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none !important;
    border-radius: 3px;
    transition: all 0.25s ease;
}

.acl-search-btn-gold:hover {
    background: #b5ac72;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(147, 140, 84, 0.35);
}

.acl-search-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 28px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff !important;
    font-family: 'Jost', 'Plus Jakarta Sans', 'Tajawal', sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none !important;
    border-radius: 3px;
    transition: all 0.25s ease;
}

.acl-search-btn-outline:hover {
    border-color: var(--acl-gold, #938c54);
    color: var(--acl-gold, #938c54) !important;
    transform: translateY(-2px);
}