/* Phase 2-7 landing performance and SEO UI patches */
#preloader.preloader-hidden {
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
}

.service-detail-page .badge {
    color: #5f43dc;
    background: rgba(123, 96, 251, .08) !important;
    border-color: rgba(123, 96, 251, .18) !important;
}

.service-detail-page .box-service,
.blog-theme-card,
.blog-entry-single,
.blog-sidebar {
    content-visibility: auto;
    contain-intrinsic-size: 1px 420px;
}

.blog-card-image,
.blog-details-main-image,
.blog-details-recent-image,
.logo {
    object-fit: cover;
}

.final-cta-card {
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(123, 96, 251, .12), rgba(123, 96, 251, .04));
}

@media (max-width: 767.98px) {
    [data-aos-delay] {
        transition-delay: 0s !important;
    }

    .hero .title,
    .breadcrumbs .title {
        line-height: 1.25;
    }
}

/* Direction hardening for bilingual UI */
html[dir="ltr"] .pricing,
html[dir="ltr"] .blog,
html[dir="ltr"] .faq,
html[dir="ltr"] .testimonials {
    direction: ltr;
    text-align: left;
}

html[dir="rtl"] .pricing,
html[dir="rtl"] .blog,
html[dir="rtl"] .faq,
html[dir="rtl"] .testimonials {
    direction: rtl;
    text-align: right;
}

.blog-details-tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.blog-details-tag {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: .35rem .75rem;
    background: rgba(123, 96, 251, .08);
    color: var(--brand-color, #7b60fb);
    font-size: .875rem;
}

.blog-details-main-image {
    aspect-ratio: 16 / 9;
    width: 100%;
    height: auto;
}

.blog-details-recent-image {
    object-fit: cover;
    flex: 0 0 96px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}

/* Patch 18: logo/header hardening after blog-detail style fixes. */
.header .navbar-brand {
    display: inline-flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
}

.header .navbar-brand .logo,
.header .logo {
    object-fit: contain !important;
    object-position: center center !important;
    max-width: 180px !important;
    height: auto !important;
}

html[dir="rtl"] .header .navbar,
html[dir="rtl"] .header .navbar .container,
html[dir="rtl"] .header .navbar-collapse,
html[dir="rtl"] .header .navbar-nav {
    direction: rtl !important;
}

html[dir="rtl"] .header .navbar-nav .nav-link {
    text-align: right !important;
}

@media (min-width: 992px) {
    html[dir="rtl"] .header .navbar .container {
        flex-direction: row !important;
    }

    html[dir="rtl"] .header .navbar-brand {
        margin-inline-start: 0 !important;
        margin-inline-end: 1rem !important;
    }
}


/* Lighthouse 13 mobile: never hide first-screen content behind animation CSS. */
.hero [data-aos],
.hero[data-aos] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

/* Skip below-the-fold layout/paint work until it approaches the viewport. */
body.home-rtl > section:not(.hero),
body.home-1 > section:not(.hero) {
    content-visibility: auto;
    contain-intrinsic-size: auto 820px;
}

.contact-map {
    display: block;
    width: 100%;
    min-height: 450px;
    border: 0;
}

@media (max-width: 767.98px), (prefers-reduced-motion: reduce) {
    [data-aos],
    [data-aos].aos-animate {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    #particles-js {
        pointer-events: none;
    }
}


/* Carousel stability and agent accessibility. Keep this in critical CSS. */
.owl-carousel:not(.owl-loaded) {
    display: block !important;
    position: relative;
    width: 100%;
    overflow: hidden;
}
.owl-carousel:not(.owl-loaded) > .item {
    display: none !important;
}
.owl-carousel:not(.owl-loaded) > .item:first-child {
    display: block !important;
    width: 100%;
}
.industries-carousel { min-height: 410px; }
.owl-carousel.client { min-height: 120px; }
.owl-carousel.testimonial { min-height: 190px; }
.owl-carousel.home-blog-carousel { min-height: 620px; }
.owl-carousel .owl-stage-outer { min-height: inherit; }
.owl-carousel .owl-dots { min-height: 30px; }
.owl-carousel .owl-dot { min-width: 24px; min-height: 24px; }
.owl-height { transition: none !important; }
@media (max-width: 767.98px) {
    .industries-carousel { min-height: 430px; }
    .owl-carousel.testimonial { min-height: 220px; }
    .owl-carousel.home-blog-carousel { min-height: 650px; }
}

/* Reserve late icon-font and animated headline space to prevent layout shifts. */
.bi {
    display: inline-block;
    inline-size: 1em;
    block-size: 1em;
    line-height: 1;
    flex: 0 0 1em;
    vertical-align: -0.125em;
}
#typed-text {
    display: inline-block;
    min-inline-size: 6.5ch;
    text-align: center;
}
html[lang="en"] #typed-text { min-inline-size: 9ch; }


/* July 2026 theme, partner-media, and accessibility hardening. */
.skip-link {
    position: fixed;
    inset-block-start: .5rem;
    inset-inline-start: .5rem;
    z-index: 99999;
    padding: .75rem 1rem;
    border-radius: .5rem;
    background: #ffffff;
    color: #25164f;
    font-weight: 800;
    transform: translateY(-160%);
    transition: transform .15s ease;
}
.skip-link:focus { transform: translateY(0); }
main { display: block; }

/* Page headers stay readable in both themes. */
body:not(.light-mode) .breadcrumbs {
    background: radial-gradient(circle at top right, #251a4b, #0b071a) !important;
    border-bottom-color: rgba(167, 139, 250, .42) !important;
}
body:not(.light-mode) .breadcrumbs h1,
body:not(.light-mode) .breadcrumbs h2,
body:not(.light-mode) .breadcrumbs .title { color: #ffffff !important; }
body.light-mode .breadcrumbs {
    background: linear-gradient(135deg, #f8f6ff 0%, #eee9ff 100%) !important;
    border-bottom: 1px solid rgba(91, 60, 196, .22) !important;
}
body.light-mode .breadcrumbs h1,
body.light-mode .breadcrumbs h2,
body.light-mode .breadcrumbs .title {
    color: #21163f !important;
    text-shadow: none !important;
}
body.light-mode .breadcrumbs ol a { color: #40345f !important; }
body.light-mode .breadcrumbs ol li { color: #5b3cc4 !important; }
body.light-mode .breadcrumbs ol li:first-child a { color: #40345f !important; }
body.light-mode .breadcrumbs ol li + li::before { color: #766b92 !important; }

/* Partner logos must fit inside the card without cropping or zooming. */
.clients .owl-stage { display: flex; align-items: stretch; }
.clients .owl-item { display: flex; align-items: stretch; }
.clients .partner-logo-card {
    width: 100%;
    min-height: 140px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(123, 96, 251, .16);
    border-radius: 16px;
    background: #ffffff;
    overflow: hidden;
}
.clients .partner-logo-card .partner-logo {
    display: block !important;
    width: 100% !important;
    max-width: 240px !important;
    height: 100px !important;
    max-height: 100px !important;
    margin: 0 auto !important;
    padding: 4px !important;
    object-fit: contain !important;
    object-position: center !important;
    filter: none !important;
    opacity: 1 !important;
    transform: none !important;
}
.clients .partner-logo-card:hover .partner-logo { transform: none !important; }
body:not(.light-mode) .clients .partner-logo-card {
    background: #ffffff;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .16);
}
@media (max-width: 767.98px) {
    .clients .partner-logo-card { min-height: 120px; padding: 14px 16px; }
    .clients .partner-logo-card .partner-logo { height: 82px !important; max-height: 82px !important; }
}

/* High-contrast controls and contact links. */
.blog .btn,
.btn-consultation,
.btn-consultation-hero {
    background: #5b3cc4 !important;
    border-color: #5b3cc4 !important;
    color: #ffffff !important;
}
.blog .btn:hover,
.blog .btn:focus,
.btn-consultation:hover,
.btn-consultation:focus,
.btn-consultation-hero:hover,
.btn-consultation-hero:focus { background: #472b9f !important; color: #ffffff !important; }
.btn-cta-whatsapp,
.btn-cta-whatsapp:hover,
.btn-cta-whatsapp:focus,
.btn-cta-whatsapp:active {
    background: #08783e !important;
    border-color: #08783e !important;
    color: #ffffff !important;
    border-radius: 30px !important;
    font-size: 18px;
    box-shadow: 0 8px 25px rgba(8, 120, 62, .28);
}
.btn-cta-whatsapp:hover,
.btn-cta-whatsapp:focus { background: #056331 !important; }
.whatsapp-float { background-color: #08783e !important; color: #ffffff !important; }
.learn-more,
.btn-cta-whatsapp,
.contact .info a {
    min-height: 44px;
}
.learn-more { padding: .65rem .35rem; }
.contact .info { align-items: center; }
.contact .contact-detail { margin: 0; font-size: 1.05rem; font-weight: 600; line-height: 1.6; }
.contact .info a {
    display: inline-flex;
    align-items: center;
    color: #c4b5fd !important;
    font-weight: 800;
    text-decoration: underline !important;
    text-underline-offset: .2em;
}
body.light-mode .contact .info a { color: #5132b1 !important; }

/* Footer contrast and link affordance. */
.footer {
    background: #0f0c1b !important;
    color: #ebe7f5 !important;
    border-top: 1px solid rgba(167, 139, 250, .3) !important;
}
.footer .box { background: transparent !important; }
.footer .footer-title {
    color: #ffffff !important;
    font-size: 18px !important;
    border-bottom: 2px solid #8b6df2;
    padding-bottom: 8px;
    width: fit-content;
}
.footer .footer-copy,
.footer .footer-contact-list,
.footer .footer-contact-list span,
.footer .copyrights,
.footer .creadits { color: #d8d2e6 !important; }
.footer .footer-link,
.footer .footer-link-en,
.footer .footer-contact-link,
.footer .footer-credit-link,
.footer .copyrights a {
    color: #f1edfb !important;
    text-decoration: underline !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: .2em;
}
.footer .footer-link:hover,
.footer .footer-link-en:hover,
.footer .footer-contact-link:hover,
.footer .footer-credit-link:hover,
.footer .copyrights a:hover { color: #c8b9ff !important; }
body.light-mode .footer {
    background: #f4f1fb !important;
    color: #2c2147 !important;
    border-top-color: rgba(81, 50, 177, .2) !important;
}
body.light-mode .footer .footer-title { color: #21163f !important; }
body.light-mode .footer .footer-copy,
body.light-mode .footer .footer-contact-list,
body.light-mode .footer .footer-contact-list span,
body.light-mode .footer .copyrights,
body.light-mode .footer .creadits { color: #40345f !important; }
body.light-mode .footer .footer-link,
body.light-mode .footer .footer-link-en,
body.light-mode .footer .footer-contact-link,
body.light-mode .footer .footer-credit-link,
body.light-mode .footer .copyrights a { color: #3d286f !important; }

/* Prevent decorative icon fonts from becoming accessible names. */
.whatsapp-float .bi[aria-hidden="true"] { pointer-events: none; }


/* July 2026 complete theme-text and active-navigation pass. */
body.light-mode {
    --theme-page-bg: #ffffff;
    --theme-surface: #ffffff;
    --theme-surface-alt: #f7f5fc;
    --theme-heading: #21163f;
    --theme-text: #342a4d;
    --theme-muted: #625873;
    --theme-border: rgba(71, 43, 159, .18);
    --theme-link: #5132b1;
}
body:not(.light-mode) {
    --theme-page-bg: #09090b;
    --theme-surface: #161321;
    --theme-surface-alt: #1d182b;
    --theme-heading: #f7f4ff;
    --theme-text: #e8e3f2;
    --theme-muted: #c4bdd3;
    --theme-border: rgba(196, 181, 253, .24);
    --theme-link: #c4b5fd;
}
body { background: var(--theme-page-bg); color: var(--theme-text); }
main section:not(.hero):not(.breadcrumbs):not(.cta-banner),
main .service-detail-page,
main .blog-public-page { color: var(--theme-text); }
main section:not(.hero):not(.breadcrumbs) :where(h1,h2,h3,h4,h5,h6,.title,.title-2) { color: var(--theme-heading); }
main section:not(.hero):not(.breadcrumbs) :where(p,li,.lead,.text-muted,.description,.content) { color: var(--theme-muted) !important; }
main :where(.box,.card,.entry,.sidebar,.blog-empty-box,.contact-form,.service-card) {
    background-color: var(--theme-surface);
    border-color: var(--theme-border) !important;
    color: var(--theme-text);
}
main a:not(.btn):not(.nav-link):not(.footer-link):not(.footer-link-en) { color: var(--theme-link); }
main .text-white, main .text-white * { color: #ffffff !important; }
main .cta-banner p, main .journey-infographic, main .journey-infographic * { color: rgba(255,255,255,.9) !important; }
body:not(.light-mode) .badge.text-bg-light { background: #2a2338 !important; color: #f4efff !important; border-color: rgba(196,181,253,.3) !important; }
body.light-mode .badge.text-bg-light { background: #f4f1fb !important; color: #33234f !important; }

.navbar .nav-link {
    border-radius: 999px;
    padding-inline: .8rem !important;
    transition: color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.navbar .nav-link.active,
.navbar .nav-link[aria-current="page"] {
    color: #ffffff !important;
    background: linear-gradient(135deg, #5b3cc4, #7b60fb) !important;
    box-shadow: 0 5px 16px rgba(91, 60, 196, .28);
}
.custom-fullscreen-menu .menu-links a.active,
.custom-fullscreen-menu .menu-links a[aria-current="page"] {
    color: #ffffff !important;
    background: linear-gradient(135deg, #5b3cc4, #7b60fb);
    border-radius: 14px;
    padding: .65rem 1rem;
}
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
.blog-section-title { font-size: clamp(1.5rem, 2vw, 2rem); }


/* July 2026 compact active header and mobile navigation spacing. */
.navbar .nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: .32rem .62rem !important;
    line-height: 1.1;
    border-radius: 999px;
}
.navbar .nav-link.active,
.navbar .nav-link[aria-current="page"],
body.light-mode .navbar .nav-link.active,
body.light-mode .navbar .nav-link[aria-current="page"],
body.light-mode .navbar.sticky .nav-link.active,
body.light-mode .navbar.sticky .nav-link[aria-current="page"] {
    color: #ffffff !important;
    background: linear-gradient(135deg, #5b3cc4, #7b60fb) !important;
    box-shadow: 0 3px 10px rgba(91, 60, 196, .24);
}
.navbar .nav-link.active:hover,
.navbar .nav-link.active:focus-visible,
.navbar .nav-link[aria-current="page"]:hover,
.navbar .nav-link[aria-current="page"]:focus-visible {
    color: #ffffff !important;
}
@media (max-width: 991.98px) {
    .custom-fullscreen-menu.active {
        justify-content: flex-start;
        padding-block: 68px 14px;
    }
    .custom-fullscreen-menu .menu-close-btn {
        top: 16px;
        inset-inline-end: 16px;
        inset-inline-start: auto;
        font-size: 26px;
        line-height: 1;
    }
    .custom-fullscreen-menu .menu-content {
        width: min(100%, 420px);
        max-height: calc(100dvh - 82px);
        overflow-y: auto;
        padding: .5rem 1rem 1rem;
        scrollbar-width: thin;
    }
    .custom-fullscreen-menu .menu-links {
        display: grid;
        gap: .22rem;
    }
    .custom-fullscreen-menu .menu-links li {
        margin: 0;
    }
    .custom-fullscreen-menu .menu-links li a,
    .custom-fullscreen-menu .menu-links a.active,
    .custom-fullscreen-menu .menu-links a[aria-current="page"] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 38px;
        padding: .42rem .78rem;
        border-radius: 10px;
        font-size: 18px;
        line-height: 1.18;
        letter-spacing: 0;
        color: #ffffff !important;
    }
    .custom-fullscreen-menu .menu-links li a:hover,
    .custom-fullscreen-menu .menu-links li a:focus-visible {
        color: #ffffff !important;
        letter-spacing: 0;
        background: rgba(123, 96, 251, .28);
    }
    .custom-fullscreen-menu .menu-links a.active,
    .custom-fullscreen-menu .menu-links a[aria-current="page"] {
        background: linear-gradient(135deg, #5b3cc4, #7b60fb);
        box-shadow: 0 3px 10px rgba(0, 0, 0, .2);
    }
}
@media (max-width: 374.98px) {
    .custom-fullscreen-menu.active { padding-block-start: 62px; }
    .custom-fullscreen-menu .menu-content { max-height: calc(100dvh - 72px); padding-inline: .75rem; }
    .custom-fullscreen-menu .menu-links { gap: .12rem; }
    .custom-fullscreen-menu .menu-links li a,
    .custom-fullscreen-menu .menu-links a.active,
    .custom-fullscreen-menu .menu-links a[aria-current="page"] {
        min-height: 35px;
        padding: .34rem .65rem;
        font-size: 16.5px;
    }
}

/* July 2026 mobile direction hardening.
   Keep Arabic pages RTL and English pages LTR on phone/tablet layouts. */
@media (max-width: 991.98px) {
    html[dir="rtl"],
    html[dir="rtl"] body {
        direction: rtl !important;
        text-align: right;
    }

    html[dir="ltr"],
    html[dir="ltr"] body {
        direction: ltr !important;
        text-align: left;
    }

    html[dir="rtl"] .header,
    html[dir="rtl"] .header .navbar,
    html[dir="rtl"] .header .navbar .container,
    html[dir="rtl"] .navbar-collapse,
    html[dir="rtl"] .custom-fullscreen-menu,
    html[dir="rtl"] .custom-fullscreen-menu .menu-content,
    html[dir="rtl"] .custom-fullscreen-menu .menu-links,
    html[dir="rtl"] main,
    html[dir="rtl"] main > section,
    html[dir="rtl"] .footer {
        direction: rtl !important;
    }

    html[dir="ltr"] .header,
    html[dir="ltr"] .header .navbar,
    html[dir="ltr"] .header .navbar .container,
    html[dir="ltr"] .navbar-collapse,
    html[dir="ltr"] .custom-fullscreen-menu,
    html[dir="ltr"] .custom-fullscreen-menu .menu-content,
    html[dir="ltr"] .custom-fullscreen-menu .menu-links,
    html[dir="ltr"] main,
    html[dir="ltr"] main > section,
    html[dir="ltr"] .footer {
        direction: ltr !important;
    }

    html[dir="rtl"] .header .navbar .container,
    html[dir="ltr"] .header .navbar .container {
        flex-direction: row !important;
    }

    html[dir="rtl"] .custom-fullscreen-menu .menu-links li,
    html[dir="rtl"] .custom-fullscreen-menu .menu-links li a {
        direction: rtl !important;
        text-align: right !important;
    }

    html[dir="ltr"] .custom-fullscreen-menu .menu-links li,
    html[dir="ltr"] .custom-fullscreen-menu .menu-links li a {
        direction: ltr !important;
        text-align: left !important;
    }

    html[dir="rtl"] .custom-fullscreen-menu .menu-links li a,
    html[dir="ltr"] .custom-fullscreen-menu .menu-links li a {
        justify-content: flex-start;
        width: 100%;
    }

    html[dir="rtl"] [dir="ltr"] {
        direction: ltr !important;
        unicode-bidi: isolate;
    }

    html[dir="ltr"] [dir="rtl"] {
        direction: rtl !important;
        unicode-bidi: isolate;
    }
}

/* Arabic landing-page layout and contrast corrections. */
.ar-presence-section {
    background: var(--theme-surface-alt) !important;
    color: var(--theme-text) !important;
    border-bottom: 1px solid var(--theme-border) !important;
}
.ar-presence-title {
    color: var(--theme-heading) !important;
    font-size: clamp(1.75rem, 3vw, 2rem);
    font-weight: 800;
    line-height: 1.45;
}
.ar-presence-lead,
.ar-presence-note {
    color: var(--theme-muted) !important;
    font-size: 1.0625rem;
    line-height: 1.9;
}
.ar-presence-note {
    border-right: 4px solid #7b60fb;
    padding-right: 15px;
}
.ar-presence-item {
    min-height: 58px;
    padding: .75rem .9rem;
    border: 1px solid var(--theme-border);
    border-radius: 14px;
    background: var(--theme-surface);
    color: var(--theme-text);
    box-shadow: 0 8px 22px rgba(20, 13, 46, .06);
}
.ar-presence-item span {
    color: var(--theme-text) !important;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.65;
}

.ar-growth-image picture,
.ar-growth-image img {
    display: block;
    width: 100%;
    max-width: 640px;
    height: auto;
    margin-inline: auto;
}
.ar-growth-content > .title { color: var(--theme-heading) !important; }
.ar-growth-content > p { color: var(--theme-muted) !important; }
.ar-growth-step {
    min-height: 52px;
    padding: .68rem .8rem;
    border: 1px solid var(--theme-border);
    border-radius: 12px;
    background: var(--theme-surface);
}
.ar-growth-step span {
    color: var(--theme-text) !important;
    font-family: "Tajawal", "Noto Sans Arabic", Tahoma, Arial, sans-serif;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.7;
}
.ar-growth-step .bi { flex: 0 0 auto; }

.ar-journey-panel {
    padding: 1.5rem 1.25rem;
    border: 1px solid rgba(196, 181, 253, .35);
    border-radius: 20px;
    background: linear-gradient(135deg, #24164f 0%, #5b3cc4 55%, #7b60fb 100%) !important;
    box-shadow: 0 16px 36px rgba(42, 25, 96, .24);
}
.ar-journey-panel .journey-title {
    color: #ffffff !important;
    font-family: "Tajawal", "Noto Sans Arabic", Tahoma, Arial, sans-serif;
    font-size: clamp(1.2rem, 2.2vw, 1.5rem) !important;
    font-weight: 800 !important;
    line-height: 1.55;
    letter-spacing: 0 !important;
}
.ar-journey-panel .journey-step {
    min-width: 92px;
    padding: .7rem .8rem;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 14px;
    background: rgba(255, 255, 255, .11);
}
.ar-journey-panel .step-num {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    margin: 0 auto .45rem;
    border-radius: 50%;
    background: #ffffff;
    color: #5132b1 !important;
    font-family: "Tajawal", Arial, sans-serif;
    font-size: 1rem;
    font-weight: 800;
}
.ar-journey-panel .step-text {
    color: #ffffff !important;
    font-family: "Tajawal", "Noto Sans Arabic", Tahoma, Arial, sans-serif;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5;
}
.ar-journey-panel .journey-arrow { color: #ffffff !important; }

.ar-linktree-section {
    position: relative;
    isolation: isolate;
    background: #130d2d !important;
}
.ar-linktree-section::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(8, 5, 24, .88), rgba(31, 18, 76, .78));
}
.ar-linktree-section .ar-linktree-title,
.ar-linktree-section .ar-linktree-title b,
.ar-linktree-section .ar-linktree-copy,
.ar-linktree-section .testimonial-item p,
.ar-linktree-section .quote-icon-left,
.ar-linktree-section .quote-icon-right {
    color: #ffffff !important;
}
.ar-linktree-section .ar-linktree-title {
    font-family: "Tajawal", "Noto Sans Arabic", Tahoma, Arial, sans-serif;
    font-size: clamp(1.35rem, 2.8vw, 2rem);
    font-weight: 700;
    line-height: 1.7;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}
.ar-linktree-section .ar-linktree-copy {
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.8;
}

.ar-stats-section {
    padding-block: 3.5rem;
    background: var(--theme-surface-alt) !important;
}
.ar-stats-section .row { row-gap: 1rem; }
.ar-stats-section .stat-card {
    margin-top: 0 !important;
    padding: 1.35rem 1rem;
    border: 1px solid var(--theme-border);
    border-radius: 18px;
    background: var(--theme-surface);
    text-align: center;
    box-shadow: 0 12px 28px rgba(20, 13, 46, .08);
}
.ar-stats-section .stat-number {
    color: #6a49db !important;
    font-family: "Tajawal", Arial, sans-serif;
    font-size: clamp(1.85rem, 4vw, 2.5rem);
    font-weight: 800;
    line-height: 1.25;
}
.ar-stats-section .stat-label {
    color: var(--theme-heading) !important;
    font-family: "Tajawal", "Noto Sans Arabic", Tahoma, Arial, sans-serif;
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.6;
}
.ar-stats-section .icon { color: #7b60fb !important; }
body:not(.light-mode) .ar-stats-section .stat-number { color: #c4b5fd !important; }
body:not(.light-mode) .ar-stats-section .stat-card { box-shadow: 0 12px 28px rgba(0, 0, 0, .22); }

@media (min-width: 992px) {
    /* Text/list on the left, illustration on the right. */
    .ar-presence-layout { direction: ltr; }
    .ar-presence-layout > * { direction: rtl; }
    /* Illustration on the right, content on the left. */
    .ar-growth-layout { direction: rtl; }
    .ar-growth-layout > * { direction: rtl; }
}

@media (max-width: 991.98px) {
    .ar-presence-content { order: 1; }
    .ar-presence-layout > .col-lg-5 { order: 2; }
    .ar-growth-content { order: 1; }
    .ar-growth-image { order: 2; margin-top: 1rem; }
    .ar-growth-step { justify-content: flex-start !important; }
}

@media (max-width: 575.98px) {
    .ar-presence-item,
    .ar-growth-step { min-height: 50px; }
    .ar-journey-panel { padding: 1.2rem .8rem; }
    .ar-journey-panel .journey-step { min-width: 78px; }
    .ar-journey-panel .journey-arrow { transform: rotate(-90deg); }
    .ar-stats-section { padding-block: 2.5rem; }
}
.ar-linktree-section::after { z-index: 0; pointer-events: none; }
.ar-linktree-section > picture,
.ar-linktree-section > .linktree-bg { position: absolute; inset: 0; z-index: -1; }
.ar-linktree-section > .container { position: relative; z-index: 1; }

/* July 2026 icon, compact controls, FAQ, CTA and form-direction fixes. */
.navbar .btn-consultation {
    padding: .42rem .72rem !important;
    gap: .3rem !important;
    font-size: .75rem !important;
    line-height: 1.2 !important;
    white-space: nowrap;
}
.navbar .btn-consultation .critical-svg-icon {
    width: 17px;
    height: 17px;
    flex-basis: 17px;
}

.cta-banner .journey-start-btn {
    min-height: 44px;
    padding: .7rem 1.35rem !important;
    border: 1px solid transparent !important;
    border-radius: 999px !important;
    font-size: .9rem !important;
    line-height: 1.25;
    text-decoration: none !important;
    box-shadow: none !important;
    transition: none !important;
    transform: none !important;
}
body.light-mode .cta-banner .journey-start-btn {
    background: #ffffff !important;
    border-color: rgba(255,255,255,.75) !important;
    color: #5132b1 !important;
}
body:not(.light-mode) .cta-banner .journey-start-btn {
    background: #f5f1ff !important;
    border-color: #d8ccff !important;
    color: #3f257f !important;
}
.cta-banner .journey-start-btn:hover,
.cta-banner .journey-start-btn:focus-visible,
.cta-banner .journey-start-btn:active {
    background: #21163f !important;
    border-color: #21163f !important;
    color: #ffffff !important;
    transform: none !important;
    box-shadow: none !important;
}
body:not(.light-mode) .cta-banner .journey-start-btn:hover,
body:not(.light-mode) .cta-banner .journey-start-btn:focus-visible,
body:not(.light-mode) .cta-banner .journey-start-btn:active {
    background: #ffffff !important;
    border-color: #ffffff !important;
    color: #3f257f !important;
}

.portfolio .filters .portfolio-btn,
.portfolio .filters .portfolio-btn .nav-link {
    font-size: .78rem !important;
    line-height: 1.25 !important;
}
.portfolio .filters .portfolio-btn .nav-link {
    min-height: 34px;
    padding: .42rem .68rem !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.custom-faq-accordion .faq-item,
.custom-faq-accordion .faq-item:hover,
.custom-faq-accordion .faq-item:focus-within,
.custom-faq-accordion .faq-item:has(.btn-faq-trigger:not(.collapsed)) {
    transform: none !important;
    transition: none !important;
    animation: none !important;
    box-shadow: none !important;
}
.custom-faq-accordion .faq-item:hover {
    border-color: rgba(123,96,251,.15) !important;
}
.custom-faq-accordion .btn-faq-trigger,
.custom-faq-accordion .btn-faq-trigger:hover,
.custom-faq-accordion .btn-faq-trigger:focus,
.custom-faq-accordion .btn-faq-trigger:active {
    min-height: 44px;
    padding: .78rem 1rem !important;
    color: var(--theme-heading) !important;
    background: transparent !important;
    border: 0 !important;
    font-size: .875rem !important;
    line-height: 1.55 !important;
    text-decoration: none !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
    box-shadow: none !important;
}
.custom-faq-accordion .faq-body {
    padding: 0 1rem .9rem !important;
    color: var(--theme-muted) !important;
    font-size: .84rem !important;
    line-height: 1.7 !important;
}
.custom-faq-accordion .faq-arrow,
.custom-faq-accordion .btn-faq-trigger:not(.collapsed) .faq-arrow {
    flex: 0 0 auto;
    font-size: .8rem !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
}
.custom-faq-accordion .collapse,
.custom-faq-accordion .collapsing {
    transition: none !important;
    animation: none !important;
}

html[dir="rtl"] form,
html[dir="rtl"] form .form-group,
html[dir="rtl"] form .mb-3,
html[dir="rtl"] form .input-group {
    text-align: right;
}
html[dir="rtl"] form label,
html[dir="rtl"] form .form-label,
html[dir="rtl"] form .custom-form-label,
html[dir="rtl"] form legend {
    display: block;
    width: 100%;
    direction: rtl;
    text-align: right !important;
}
input[type="email"],
input[type="tel"],
input[name*="email" i],
input[id*="email" i],
input[name*="phone" i],
input[id*="phone" i],
input[name*="mobile" i],
input[id*="mobile" i] {
    direction: ltr !important;
    text-align: left !important;
    unicode-bidi: plaintext;
}

@media (max-width: 575.98px) {
    .portfolio .filters {
        gap: .35rem !important;
    }
    .portfolio .filters .portfolio-btn .nav-link {
        min-height: 32px;
        padding: .36rem .58rem !important;
        font-size: .73rem !important;
    }
    .custom-faq-accordion .btn-faq-trigger {
        padding: .7rem .8rem !important;
        font-size: .82rem !important;
    }
    .custom-faq-accordion .faq-body {
        padding: 0 .8rem .8rem !important;
        font-size: .8rem !important;
    }
}

/* July 2026 compact footer and scroll-to-top controls. */
#progress {
    width: 52px !important;
    height: 52px !important;
    bottom: 14px !important;
    left: 10px !important;
}
#progress-value {
    width: calc(100% - 10px) !important;
    height: calc(100% - 10px) !important;
    font-size: 26px !important;
}
.footer.py-5 {
    padding-bottom: 0 !important;
}
.footer hr {
    margin: 1.25rem 0 0 !important;
}
.footer .copyrights {
    padding-block: .85rem .65rem !important;
}
.footer .copyrights p,
.footer .copyrights .creadits {
    margin-bottom: 0 !important;
}
.footer .social a {
    color: var(--brand-color, #7b60fb) !important;
    background: rgba(123, 96, 251, .10) !important;
    border-color: var(--brand-color, #7b60fb) !important;
    box-shadow: none !important;
}
.footer .social a i {
    color: inherit !important;
}
.footer .social a:hover,
.footer .social a:focus-visible {
    color: #ffffff !important;
    background: var(--brand-color, #7b60fb) !important;
    border-color: var(--brand-color, #7b60fb) !important;
    transform: none !important;
}
@media (max-width: 575.98px) {
    #progress {
        width: 46px !important;
        height: 46px !important;
        bottom: 10px !important;
        left: 8px !important;
    }
    #progress-value {
        width: calc(100% - 8px) !important;
        height: calc(100% - 8px) !important;
        font-size: 23px !important;
    }
    .footer .copyrights {
        padding-block: .7rem .45rem !important;
    }
}

/* Restore full-width RTL service cards on phones and prevent tag overflow. */
@media (max-width: 767.98px) {
    html[dir="rtl"] .services {
        width: 100%;
        max-width: 100%;
        padding-inline: 14px !important;
        overflow: hidden;
    }

    html[dir="rtl"] .services > .row {
        --bs-gutter-x: 0;
        margin-inline: 0 !important;
        width: 100%;
    }

    html[dir="rtl"] .services > .row > [class*="col-"] {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding-inline: 0 !important;
    }

    html[dir="rtl"] .services .box-service {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        min-height: 0 !important;
        height: auto !important;
        padding: 1.25rem !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        text-align: right !important;
        overflow: hidden;
    }

    html[dir="rtl"] .services .service-content,
    html[dir="rtl"] .services .box-icon,
    html[dir="rtl"] .services .service-tags {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        align-self: stretch !important;
        text-align: right !important;
    }

    html[dir="rtl"] .services .service-content p {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    html[dir="rtl"] .services .service-tags {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        align-items: flex-start !important;
        align-content: flex-start !important;
        gap: .45rem !important;
        margin-top: 1rem !important;
        padding-top: 1rem !important;
        direction: rtl !important;
        overflow: visible;
    }

    html[dir="rtl"] .services .service-tags .badge {
        display: inline-flex !important;
        flex: 0 1 auto;
        max-width: 100%;
        min-width: 0;
        padding: .45rem .65rem !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
        word-break: normal;
        text-align: right !important;
        line-height: 1.35;
    }

    html[dir="rtl"] .services .service-tags .badge span {
        min-width: 0;
    }
}