/* ==================================================
   AL FIRDAWS MEDIA
   FINAL TYPOGRAPHY LAYER
================================================== */


/* =========================================
   ARABIC — ALMARAI GLOBAL
========================================= */

html[lang="ar"] body {
    font-family: "Almarai", "IBM Plex Sans Arabic", sans-serif !important;
}


/* All Arabic textual elements */

html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4,
html[lang="ar"] h5,
html[lang="ar"] h6,
html[lang="ar"] p,
html[lang="ar"] a,
html[lang="ar"] span,
html[lang="ar"] li,
html[lang="ar"] label,
html[lang="ar"] button,
html[lang="ar"] input,
html[lang="ar"] textarea,
html[lang="ar"] select,
html[lang="ar"] strong,
html[lang="ar"] small {
    font-family: "Almarai", "IBM Plex Sans Arabic", sans-serif !important;
}


/* =========================================
   HEADINGS
========================================= */

html[lang="ar"] h1 {
    font-weight: 800 !important;
    letter-spacing: 0 !important;
}

html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4 {
    font-weight: 700 !important;
    letter-spacing: 0 !important;
}


/* =========================================
   NORMAL TEXT
========================================= */

html[lang="ar"] p,
html[lang="ar"] li {
    font-weight: 400;
}


/* =========================================
   NAVIGATION / BUTTONS
========================================= */

html[lang="ar"] a,
html[lang="ar"] button {
    font-weight: 700;
}


/* =========================================
   HOME PAGE
========================================= */

html[lang="ar"] .home-page,
html[lang="ar"] .home-page h1,
html[lang="ar"] .home-page h2,
html[lang="ar"] .home-page h3,
html[lang="ar"] .home-page p,
html[lang="ar"] .home-page span,
html[lang="ar"] .home-page a {
    font-family: "Almarai", "IBM Plex Sans Arabic", sans-serif !important;
}


/* =========================================
   ABOUT PAGE
========================================= */

html[lang="ar"] .about-page,
html[lang="ar"] .about-page h1,
html[lang="ar"] .about-page h2,
html[lang="ar"] .about-page h3,
html[lang="ar"] .about-page h4,
html[lang="ar"] .about-page p,
html[lang="ar"] .about-page span,
html[lang="ar"] .about-page a,
html[lang="ar"] .about-page li {
    font-family: "Almarai", "IBM Plex Sans Arabic", sans-serif !important;
}


/* =========================================
   SERVICES PAGE
========================================= */

html[lang="ar"] .services-page,
html[lang="ar"] .services-page h1,
html[lang="ar"] .services-page h2,
html[lang="ar"] .services-page h3,
html[lang="ar"] .services-page p,
html[lang="ar"] .services-page span,
html[lang="ar"] .services-page a {
    font-family: "Almarai", "IBM Plex Sans Arabic", sans-serif !important;
}


/* =========================================
   CONTACT PAGE
========================================= */

html[lang="ar"] .contact-page,
html[lang="ar"] .contact-page h1,
html[lang="ar"] .contact-page h2,
html[lang="ar"] .contact-page h3,
html[lang="ar"] .contact-page p,
html[lang="ar"] .contact-page span,
html[lang="ar"] .contact-page label,
html[lang="ar"] .contact-page input,
html[lang="ar"] .contact-page textarea,
html[lang="ar"] .contact-page button {
    font-family: "Almarai", "IBM Plex Sans Arabic", sans-serif !important;
}


/* =========================================
   FOOTER / HEADER
========================================= */

html[lang="ar"] header,
html[lang="ar"] header a,
html[lang="ar"] header span,
html[lang="ar"] footer,
html[lang="ar"] footer h2,
html[lang="ar"] footer h3,
html[lang="ar"] footer p,
html[lang="ar"] footer a,
html[lang="ar"] footer span {
    font-family: "Almarai", "IBM Plex Sans Arabic", sans-serif !important;
}


/* =========================================
   ENGLISH
========================================= */

html[lang="en"] body {
    font-family: "IBM Plex Sans", Arial, sans-serif;
}


/* English words inside Arabic text */

.ltr-token {
    display: inline-block;
    direction: ltr;
    unicode-bidi: isolate;
    font-family: "IBM Plex Sans", Arial, sans-serif !important;
}


/* =========================================
   MOBILE TYPOGRAPHY
========================================= */

@media (max-width: 768px) {

    html[lang="ar"] h1 {
        line-height: 1.3;
    }

    html[lang="ar"] h2,
    html[lang="ar"] h3,
    html[lang="ar"] h4 {
        line-height: 1.45;
    }

    html[lang="ar"] p {
        line-height: 1.95;
    }
}

/* ==================================================
   FINAL UI FIXES - HEADER / CARDS / MOBILE / FOOTER
   Scoped overrides only. site.css remains untouched.
================================================== */

/* ---------- Header ---------- */
.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.header-language-form {
    display: flex;
    align-items: center;
}

.header-language-form .language-switch {
    width: auto;
    min-width: 48px;
}

/* ---------- Homepage service numbers ---------- */
.services-preview .services-grid article::before {
    content: none !important;
    display: none !important;
}

.services-preview .services-grid article {
    position: relative;
}

.home-service-number {
    display: block;
    margin-bottom: 28px;
    color: #6f96ff;
    font-family: "IBM Plex Sans", Arial, sans-serif !important;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.12em;
    direction: ltr;
    unicode-bidi: isolate;
}

/* ---------- Services page: isolate it from homepage .services-grid rules ---------- */
.services-page .services-grid .service-card {
    min-height: 280px;
    padding: 32px 24px 26px;
    box-sizing: border-box;
}

.services-page .services-grid .service-card::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    letter-spacing: 0 !important;
    color: transparent !important;
    border-radius: inherit !important;
    background:
        radial-gradient(circle at bottom left, rgba(0, 74, 173, 0.13), transparent 38%) !important;
    pointer-events: none;
}

.services-page .services-grid .service-card::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 1px !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    border-radius: 23px !important;
    border: 1px solid rgba(255, 255, 255, 0.03) !important;
    background: none !important;
    pointer-events: none;
}

.services-page .service-number {
    z-index: 4;
}

.services-page .service-icon {
    position: relative;
    z-index: 3;
    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.25),
        0 0 26px rgba(0, 74, 173, 0.10),
        0 0 18px rgba(254, 40, 40, 0.07);
}

/* ---------- About: mobile card density ---------- */
.about-strengths,
.about-process,
.about-ecosystem {
    scroll-margin-top: 88px;
}

/* ---------- Footer spacing ---------- */
.footer-company {
    padding-top: 18px;
}

/* ---------- Mobile ---------- */
@media (max-width: 900px) {

    .header-container {
        min-height: 72px !important;
        gap: 12px !important;
    }

    .brand-logo {
        width: 185px !important;
        height: 44px !important;
    }

    .header-actions {
        gap: 8px;
    }

    .menu-toggle {
        display: block;
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
    }

    .header-language-form .language-switch {
        width: 46px !important;
        min-width: 46px;
        height: 44px;
        padding: 0;
        border-radius: 12px;
    }

    .main-nav {
        top: 66px !important;
    }

    .services-preview .services-grid article {
        min-height: 0 !important;
        padding: 26px 24px !important;
    }

    .services-preview .services-grid article h3 {
        margin-bottom: 12px;
    }

    .home-service-number {
        margin-bottom: 22px;
    }

    .services-page .services-grid .service-card {
        min-height: 0 !important;
        padding: 24px 20px 22px !important;
    }

    .services-page .service-icon {
        width: 64px;
        height: 64px;
        margin-bottom: 18px;
    }

    .services-page .service-card h3 {
        margin-bottom: 10px;
    }

    .services-page .service-card p {
        line-height: 1.8;
    }

    .ecosystem-step {
        min-height: 100px !important;
        padding: 20px 22px !important;
        box-sizing: border-box;
    }

    .ecosystem-step span {
        margin-bottom: 12px !important;
    }

    .process-step {
        min-height: 112px !important;
        padding: 56px 20px 18px !important;
        box-sizing: border-box;
    }

    .strength-item {
        min-height: 0 !important;
        padding: 28px 24px !important;
        box-sizing: border-box;
    }

    .strength-index {
        margin-bottom: 22px !important;
    }

    .footer-content {
        gap: 54px !important;
    }

    .footer-company {
        padding-top: 0;
    }
}

@media (max-width: 560px) {

    .brand-logo {
        width: 165px !important;
        height: 42px !important;
    }

    .header-container {
        width: min(calc(100% - 24px), var(--container)) !important;
    }

    .header-actions {
        gap: 7px;
    }

    .header-language-form .language-switch,
    .menu-toggle {
        width: 42px !important;
        min-width: 42px !important;
        height: 42px !important;
        flex-basis: 42px;
    }

    .main-nav {
        top: 64px !important;
        inset-inline: 12px !important;
    }

    .services-page {
        padding-top: 78px !important;
    }

    .services-page .services-hero {
        margin-bottom: 30px !important;
    }

    .about-hero,
    .about-ecosystem,
    .about-direction,
    .about-strengths,
    .about-process {
        padding-top: 64px !important;
        padding-bottom: 64px !important;
    }
}
/* =========================================
   FOOTER FINAL SPACING FIX
========================================= */

.footer-brand,
.footer-company {
    min-width: 0;
}

.footer-company {
    align-self: start;
}

/* Mobile / tablet */
@media (max-width: 900px) {

    .footer-content {
        row-gap: 64px !important;
    }

    .footer-company {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .footer-company h3 {
        margin-bottom: 20px !important;
    }
}

/* Small phones */
@media (max-width: 560px) {

    .footer-content {
        row-gap: 58px !important;
    }
}
/* =========================================
   HOME STATS BADGE
========================================= */

.stats-heading {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 34px;
}

.stats-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 52px;
    padding: 0 26px;

    border-radius: 999px;
    background: linear-gradient(135deg, #ff2d32 0%, #d91f2a 100%);
    color: #ffffff !important;

    font-weight: 800;
    font-size: 0.98rem;
    line-height: 1;

    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow:
        0 14px 34px rgba(255, 45, 50, 0.22),
        0 0 18px rgba(255, 45, 50, 0.14);

    overflow: hidden;
    white-space: nowrap;
}

.stats-badge::after {
    content: "";
    position: absolute;
    top: -40%;
    left: -35%;

    width: 18%;
    height: 190%;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.28),
        transparent
    );

    transform: rotate(18deg);
    animation: statsBadgeShine 4.8s ease-in-out infinite;
}

@keyframes statsBadgeShine {
    0%, 70% {
        left: -35%;
    }

    100% {
        left: 125%;
    }
}

.stats-grid {
    gap: 24px;
}

.stat-card {
    position: relative;
}

.stat-number {
    font-weight: 800;
}

@media (max-width: 768px) {
    .stats-heading {
        margin-bottom: 28px;
    }

    .stats-badge {
        min-height: 48px;
        padding: 0 22px;
        font-size: 0.90rem;
    }
}