:root {
    /* Brand palette sampled from the image */
    --brand-900: #0b6cab; /* deep blue */
    --brand-700: #1395bf; /* teal-blue */
    --brand-600: #08b8c9; /* cyan-teal */
    --brand-500: #00cfc6; /* bright teal */
    --brand-300: #66e0d2; /* mint */
    --brand-100: #b9f0e8; /* pale mint */
    --brand-ink: #1e2a35; /* dark text */
    --brand-bg: #f7fbfc;

    /* Onest Font Integration */
    --brand-font-family: "Onest", -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, "Helvetica Neue", Arial, sans-serif;
    --brand-font-family-arabic: "Onest", "Noto Sans Arabic", "Segoe UI",
        system-ui, sans-serif;
}

/* ICON FONT PRESERVATION - Critical for preventing Onest from breaking icons */
/* This must come early to ensure proper specificity */
i.fa,
i.fas,
i.far,
i.fal,
i.fab,
i.fad,
.fa,
.fas,
.far,
.fal,
.fab,
.fad,
.bi,
[class^="fa-"],
[class*=" fa-"],
[class^="bi-"],
[class*=" bi-"] {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "Font Awesome 5 Free", "Font Awesome 5 Pro", "bootstrap-icons", "FontAwesome" !important;
    font-weight: 900 !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-transform: none !important;
    line-height: 1 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* Specific Font Awesome weight and family corrections */
.fas, .fa-solid { 
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "Font Awesome 5 Free", "FontAwesome" !important;
    font-weight: 900 !important; 
}
.far, .fa-regular { 
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "Font Awesome 5 Free", "FontAwesome" !important;
    font-weight: 400 !important; 
}
.fal, .fa-light { 
    font-family: "Font Awesome 6 Pro", "Font Awesome 5 Pro", "FontAwesome" !important;
    font-weight: 300 !important; 
}
.fab, .fa-brands { 
    font-family: "Font Awesome 6 Brands", "Font Awesome 6 Pro", "Font Awesome 5 Brands", "FontAwesome" !important;
    font-weight: 400 !important; 
}

/* Bootstrap Icons specific rules */
.bi {
    font-family: "bootstrap-icons" !important;
    font-weight: normal !important;
}

/* Apply Onest font to all brand elements */
.text-ink {
    color: var(--ink);
    font-family: var(--brand-font-family);
}
.bg-page {
    background: var(--bg);
}
.container {
    width: min(1200px, 92%);
    margin-inline: auto;
}
.btn {
    display: inline-block;
    padding: 12px 18px;
    border-radius: 12px;
    font-weight: 700;
    text-decoration: none;
    font-family: var(--brand-font-family);
}
.btn-primary {
    background: #fff;
    color: var(--brand-900);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12);
}
.btn-outline {
    border: 2px solid #fff;
    color: #fff;
}
.btn:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
}

/* Brand gradient like the identity */
.bg-brand {
    background: linear-gradient(
        90deg,
        var(--brand-900),
        var(--brand-600) 48%,
        var(--brand-500)
    );
}

/* CTA background (arcs + rounded stripe) */
.cta-theme {
    position: relative;
    isolation: isolate;
    color: #fff;
    overflow: hidden;
}
.cta-theme::before {
    content: "";
    position: absolute;
    left: 2%;
    bottom: 0;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.35),
        rgba(255, 255, 255, 0.18) 60%,
        transparent 62%
    );
    transform: translateY(55%);
}
.cta-theme::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin-inline: auto;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.33),
        rgba(255, 255, 255, 0.15) 60%,
        transparent 62%
    );
    transform: translateY(50%);
}
.cta-stripe {
    position: absolute;
    right: 4%;
    top: 12%;
    width: min(34vw, 420px);
    height: 86px;
    border-radius: 48px;
    background: rgba(255, 255, 255, 0.42);
}
.cta-inner {
    position: relative;
    z-index: 1;
    padding: 48px 24px;
    max-width: 1120px;
    margin-inline: auto;
    display: grid;
    gap: 18px;
    align-items: center;
    grid-template-columns: 1.2fr auto;
}
@media (max-width: 820px) {
    .cta-inner {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .cta-stripe {
        display: none;
    }
}

/* Section title with Onest font */
.section-title {
    font-weight: 800;
    letter-spacing: 0.2px;
    font-family: var(--brand-font-family);
}

/* RTL helpers with Arabic font support */
[dir="rtl"] .btn-primary {
    letter-spacing: 0.1px;
}
[dir="rtl"],
[dir="rtl"] .btn,
[dir="rtl"] .section-title {
    font-family: var(--brand-font-family-arabic);
}
:root {
    /* Brand palette sampled from the image */
    --brand-900: #0b6cab; /* deep blue */
    --brand-700: #1395bf; /* teal-blue */
    --brand-600: #08b8c9; /* cyan-teal */
    --brand-500: #00cfc6; /* bright teal */
    --brand-300: #66e0d2; /* mint */
    --brand-100: #b9f0e8; /* pale mint */
    --brand-ink: #1e2a35; /* dark text */
    --brand-bg: #f7fbfc;
}

/* Utility gradient (left→right like the screenshot) */
.bg-brand-gradient {
    background: linear-gradient(
        90deg,
        var(--brand-900),
        var(--brand-600) 45%,
        var(--brand-500)
    );
}

/* CTA section background with arcs & a rounded stripe (pure CSS, no images) */
.cta-theme {
    position: relative;
    isolation: isolate;
    color: #fff;
    background: linear-gradient(
        90deg,
        var(--brand-900),
        var(--brand-600) 48%,
        var(--brand-500)
    );
    overflow: hidden;
}
/* bottom semicircle left */
.cta-theme::before {
    content: "";
    position: absolute;
    inset: auto auto 0 2%;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(
        circle at 50% 50%,
        rgba(255, 255, 255, 0.35),
        rgba(255, 255, 255, 0.18) 60%,
        transparent 62%
    );
    transform: translateY(55%);
    z-index: 0;
}
/* bottom semicircle center */
.cta-theme::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    margin-inline: auto;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(
        circle at 50% 50%,
        rgba(255, 255, 255, 0.33),
        rgba(255, 255, 255, 0.15) 60%,
        transparent 62%
    );
    transform: translateY(50%);
    z-index: 0;
}

/* rounded stripe on the right */
.cta-stripe {
    position: absolute;
    right: 4%;
    top: 12%;
    width: min(34vw, 420px);
    height: 86px;
    border-radius: 48px;
    background: rgba(255, 255, 255, 0.42);
    z-index: 0;
}

.cta-inner {
    position: relative;
    z-index: 1;
    padding: 48px 24px;
    max-width: 1120px;
    margin-inline: auto;
    display: grid;
    gap: 18px;
    align-items: center;
    grid-template-columns: 1.2fr auto;
}
@media (max-width: 820px) {
    .cta-inner {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .cta-stripe {
        display: none;
    }
}

.btn-cta {
    display: inline-block;
    padding: 12px 20px;
    border-radius: 12px;
    background: #fff;
    color: var(--brand-900);
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.15);
}
.btn-cta:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
}

/* optional light section bg somewhere else */
.section-bg {
    background: var(--brand-bg);
}

/* ===== LUX LIGHT THEME ===== */
.lux-light {
    --page-bg: #f7f5f2; /* عاجي فخم */
    --ink: #1c2430; /* نص داكن */
    --muted: #5c6976;
    --panel: #ffffff;
    --line: rgba(18, 22, 28, 0.1);
    --accent: var(--brand-700, #1395bf);
    --lux-gold: #bfa66b;
    background: radial-gradient(
            800px 400px at 10% 0%,
            #ffffff 0,
            transparent 60%
        ),
        var(--page-bg);
    color: var(--ink);
    margin-top: 0;
    padding-top: 60px;
}
.lux-light .section-title {
    color: #0b2838;
}
.lux-light .card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}
.lux-light .text-muted {
    color: var(--muted) !important;
}
.lux-light a {
    color: var(--accent);
}
.lux-light .btn-primary {
    background: linear-gradient(90deg, #0b6cab, #08b8c9);
    color: #fff;
    border: 0;
}

/* Navbar (فاتح راقٍ) */
.nav-lux-light {
    position: fixed;
    top: 0;
    z-index: 50;
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(18, 22, 28, 0.1);
    color: #0b2838;
    width: 100%;
}
.nav-lux-light .nav-link {
    color: inherit;
    opacity: 0.9;
    padding: 12px 10px;
}
.nav-lux-light .nav-link.is-active {
    box-shadow: inset 0 -2px 0 var(--lux-gold);
}
.nav-lux-light .btn-cta {
    background: linear-gradient(90deg, #0b6cab, #08b8c9);
    color: #fff;
    border-radius: 12px;
    padding: 10px 16px;
    font-weight: 700;
}

/* CTA على الفاتح */
.cta-theme.lux {
    background: linear-gradient(90deg, #0b6cab, #08b8c9 48%, #00cfc6);
    color: #fff;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid rgba(18, 22, 28, 0.08);
}
.cta-theme.lux::before {
    content: "";
    position: absolute;
    left: 3%;
    bottom: -18%;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.5),
        transparent 62%
    );
}
.cta-theme.lux::after {
    content: "";
    position: absolute;
    right: 6%;
    top: 10%;
    width: 420px;
    height: 86px;
    border-radius: 48px;
    background: rgba(255, 255, 255, 0.6);
}

/* لمسات ختامية سريعة (اختيارية—CSS فقط) */

/* عناوين أقسام أكثر حضورًا */
.section-title {
    font-weight: 800;
    letter-spacing: 0.2px;
}

/* فواصل رفيعة بالذهبي للنقاط النشطة/الأقسام */
.hr-gold {
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--lux-gold),
        transparent
    );
}

/* أزرار */
.btn {
    transition: transform 0.15s ease, filter 0.15s ease;
}
.btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
}

/* ===== Overrides: CTA and Testimonials (loaded last via brand.css) ===== */
/* CTA: elevated, rounded, and refined */
#home-quote-cta,
#home-newsletter-cta {
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.98) 0%,
        rgba(250, 251, 252, 1) 100%
    );
    border-radius: 14px;
    padding: 24px 0;
    margin: 28px 0;
    box-shadow: 0 18px 50px rgba(8, 20, 40, 0.08),
        0 6px 18px rgba(12, 186, 164, 0.04);
    border: 1px solid rgba(11, 26, 43, 0.04);
    backdrop-filter: blur(6px);
    overflow: hidden;
}
#home-quote-cta .container,
#home-newsletter-cta .container {
    max-width: 1188px;
}
#home-quote-cta .cta-inner h3,
#home-newsletter-cta .cta-inner h3 {
    font-size: 1.375rem;
    font-weight: 900;
    color: #08202a;
}
#home-quote-cta .cta-inner p,
#home-newsletter-cta .cta-inner p {
    color: rgba(8, 32, 42, 0.7);
    font-weight: 600;
}
#home-quote-cta .btn-theme,
#home-newsletter-cta .btn-theme {
    padding: 14px 26px;
    font-weight: 800;
    border-radius: 12px;
    background: linear-gradient(90deg, #0dbdaa 0%, #0aa895 100%);
    box-shadow: 0 12px 34px rgba(12, 186, 164, 0.12),
        0 4px 12px rgba(8, 20, 40, 0.06);
}
#home-quote-cta .btn-theme:hover,
#home-newsletter-cta .btn-theme:hover {
    transform: translateY(-4px);
}
#home-newsletter-cta .nl-input {
    border-radius: 12px;
    padding: 12px 14px;
    border: 1px solid rgba(11, 26, 43, 0.06);
    background: #fff;
    min-width: 320px;
}

/* Testimonials: polished card design */
.testimonials {
    padding: 36px 0 18px;
}
.testimonials .testimonial-wrap {
    padding-left: 20px;
}
.testimonials .testimonial-item {
    box-sizing: border-box;
    padding: 28px 28px 28px 92px;
    margin: 18px 12px;
    min-height: 180px;
    background: linear-gradient(180deg, #ffffff, #fbfcfd);
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(8, 20, 40, 0.06),
        0 6px 18px rgba(12, 186, 164, 0.03);
    position: relative;
    transition: transform 260ms cubic-bezier(0.2, 0.9, 0.3, 1),
        box-shadow 260ms cubic-bezier(0.2, 0.9, 0.3, 1);
}
.testimonials .testimonial-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 28px 70px rgba(8, 20, 40, 0.08);
}
.testimonials .testimonial-img {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    object-fit: cover;
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    border: 4px solid #fff;
    box-shadow: 0 8px 20px rgba(8, 20, 40, 0.08);
}
.testimonials .testimonial-item p {
    font-style: normal;
    color: #33414a;
    line-height: 1.6;
    margin: 12px 0 0;
    font-size: 1rem;
}
.testimonials .testimonial-item h3 {
    font-size: 1.05rem;
    margin: 0 0 4px;
    font-weight: 800;
    color: #08202a;
}
.testimonials .quote-icon-left,
.testimonials .quote-icon-right {
    color: rgba(191, 166, 107, 0.28);
    font-size: 28px;
}
.testimonials .swiper-pagination .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background-color: #fff;
    opacity: 0.9;
    border: 2px solid rgba(12, 186, 164, 0.12);
}
.testimonials .swiper-pagination .swiper-pagination-bullet-active {
    background-color: #0cbaa4;
    border-color: #0cbaa4;
    transform: scale(1.16);
}

@media (max-width: 820px) {
    #home-quote-cta .cta-inner,
    #home-newsletter-cta .cta-inner {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 12px;
    }
    #home-newsletter-cta .nl-input {
        min-width: 100%;
    }
    .testimonials .testimonial-item {
        padding: 18px;
        padding-left: 86px;
        margin: 12px 8px;
    }
    .testimonials .testimonial-img {
        left: 12px;
        width: 72px;
        height: 72px;
    }
}

/* Debug / fix: ensure mobile burger toggle is visible and accessible
   This enforces display, contrast, and stacking order. Loaded last in master layout.
   If you prefer a subtler color, adjust --lux-gold or replace the color value. */
@media (max-width: 991px) {
    .mobile-nav-toggle {
        display: block !important;
        color: var(--lux-gold) !important;
        font-size: 28px !important;
        line-height: 1 !important;
        z-index: 2000 !important;
        /* Add a subtle text-shadow so white/bright backgrounds won't hide the glyph */
        text-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
    }
    /* Ensure the toggle sits above other header elements */
    .nav-lux-light .mobile-nav-toggle {
        position: relative;
        z-index: 2000;
    }
}

/* Emergency fallback: force navbar UL visible and interactive when .navbar-mobile is present */
@media (max-width: 991px) {
    #navbar.navbar-mobile ul {
        display: block !important;
        position: fixed !important;
        top: 64px !important;
        left: 0 !important;
        right: 0 !important;
        height: calc(100vh - 64px) !important;
        overflow-y: auto !important;
        background: #ffffff !important;
        z-index: 1998 !important;
        padding-top: 8px !important;
        -webkit-overflow-scrolling: touch !important;
    }
    #navbar.navbar-mobile ul li {
        display: block !important;
    }
    #navbar.navbar-mobile ul a {
        display: block !important;
        padding: 12px 18px !important;
        color: #08202a !important;
    }
    #navbar.navbar-mobile .mobile-nav-toggle {
        position: fixed !important;
        top: 18px !important;
        right: 18px !important;
        z-index: 2001 !important;
    }
}

/* Ensure the toggle can receive pointer events and looks clickable */
.mobile-nav-toggle {
    pointer-events: auto !important;
    cursor: pointer !important;
}
#navbar {
    pointer-events: auto !important;
}