/*
 * home.css — Home Page Only Bundle
 * ─────────────────────────────────────────────────────────────
 * Replaces bundle.css + core.css on Home/Index only.
 * All other pages continue loading those files unchanged.
 *
 * Sources extracted from:
 *   - bootstrap.rtl.min.css (grid, flex, spacing, display utilities)
 *   - DGAcustoms.css        (full — footer, header, cards, review)
 *   - site.css              (full — custom component styles)
 *   - core.css              (typography + button + card classes only)
 *   - _CookieConsentPartial (already self-contained inline styles)
 *
 * Target size: ~45 KB (vs 3,023 KB before)
 */

/* ─── 1. CSS CUSTOM PROPERTIES ──────────────────────────────────────── */
:root {
    /* DGA Brand */
    --colors-primary-sa-flag-600-primary: #1B8354;
    --button-background-primary-default:  #1B8354;
    --button-background-primary-hovered:  #166a45;
    --button-background-primary-pressed:  #14573a;
    --text-oncolor-primary:               #ffffff;
    --colors-secondary-gold-600-primary:  #DBA102;
    --colors-tertiary-lavendar-500-primary: #80519F;

    /* SHC greens */
    --shc-green-dark:  #007044;
    --shc-green-light: #0d8a56;
    --shc-nav-hover:   #f8f9fa;
    --shc-border:      #e9ecef;
    --hrsd-green:      #1b8354;
    --hrsd-green-dark: #14603d;
    --hrsd-active-bg:  #1b8354;
    --hrsd-white:      #ffffff;
    --hrsd-nav-height: 72px;

    /* Core.css design tokens */
    --background-card:         #ffffff;
    --background-primary:      #1b8354;
    --background-neutral-50:   #f9fafb;
    --background-neutral-100:  #f3f4f6;
    --border-neutral-primary:  #e5e7eb;
    --radius-sm:    4px;
    --radius-md:    6px;
    --radius-lg:    12px;
    --radius-xl:    16px;
    --shadow-sm:    0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
    --shadow-md:    0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -1px rgba(0,0,0,.06);
    --shadow-lg:    0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -2px rgba(0,0,0,.05);
    --shadow-xl:    0 20px 25px -5px rgba(0,0,0,.1), 0 10px 10px -5px rgba(0,0,0,.04);
    --spacing-xs:   4px;
    --spacing-sm:   8px;
    --spacing-md:   12px;
    --spacing-lg:   16px;
    --spacing-xl:   20px;
    --spacing-2xl:  24px;
    --spacing-3xl:  32px;
    --spacing-4:    16px;
    --spacing-6:    24px;
    --spacing-8:    32px;
    --buttons-lg-padding: 16px;
    --buttons-md-padding: 12px;
    --buttons-sm-padding: 8px;
    --buttons-lg-gap: 8px;
    --card-lg-gap:  24px;
    --colors-neutral-25: #fcfcfd;

    /* Site custom */
    --dga-primary-color:   #4facfe;
    --secondary-gradient:  linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --bg-color:  #f8f9fa;
    --text-main: #1F2A37;
}

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

html {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /* 62.5% = 10px base — matches core.css so Bootstrap rem utilities
       (mb-5, gap-4, p-4 …) compute to the same px values */
    font-size: 62.5%;
    overflow-x: clip;
    background: #f9fafb;
    line-height: 1.4 !important;
}

body {
    margin: 0 !important;
    margin-bottom: 0 !important;
    background-color: var(--bg-color);
    color: var(--text-main);
    font-family: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    font-size: 1.6rem; /* 1.6rem × 10px base = 16px body text */
    text-align: right;
    min-height: 100vh;
    overflow-x: clip;
    line-height: 1.4 !important;
}

html, body, body * {
    font-family: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}

img, iframe, video { max-width: 100% !important; }

/* Global link underline reset */
a, a:hover, a:focus, a:active, a:visited {
    text-decoration: none !important;
}

li { font-size: 16px !important; }

p.mb-0 { line-height: 28px !important; }

span.d-block { line-height: 14px !important; }

div.container-fluid,
header.shc-header-wrapper { line-height: 14px !important; }

html, body { overflow-x: clip; }

/* ─── 3. FONT-FACE ───────────────────────────────────────────────────── */
@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal; font-weight: 400; font-display: swap;
    src: url('/assets/fonts/IBM-Plex-Sans-Arabic/IBMPlexSansArabic-Regular.woff2') format('woff2');
}
@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal; font-weight: 500; font-display: swap;
    src: url('/assets/fonts/IBM-Plex-Sans-Arabic/IBMPlexSansArabic-Medium.woff2') format('woff2');
}
@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal; font-weight: 600; font-display: swap;
    src: url('/assets/fonts/IBM-Plex-Sans-Arabic/IBMPlexSansArabic-SemiBold.woff2') format('woff2');
}
@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal; font-weight: 700; font-display: swap;
    src: url('/assets/fonts/IBM-Plex-Sans-Arabic/IBMPlexSansArabic-Bold.woff2') format('woff2');
}

/* ─── 4. BOOTSTRAP GRID (RTL-compatible subset) ──────────────────────── */
.container, .container-fluid {
    width: 100%; padding-right: 12px; padding-left: 12px; margin-right: auto; margin-left: auto;
}
@media (min-width: 576px)  { .container { max-width: 540px; } }
@media (min-width: 768px)  { .container { max-width: 720px; } }
@media (min-width: 992px)  { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }
@media (min-width: 1400px) { .container { max-width: 1320px; } }

.row { --bs-gutter-x: 1.5rem; --bs-gutter-y: 0; display: flex; flex-wrap: wrap;
    margin-top: calc(-1 * var(--bs-gutter-y));
    margin-right: calc(-0.5 * var(--bs-gutter-x));
    margin-left:  calc(-0.5 * var(--bs-gutter-x)); }
.row > * { flex-shrink: 0; width: 100%; max-width: 100%;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left:  calc(var(--bs-gutter-x) * .5);
    margin-top: var(--bs-gutter-y); }

.g-4, .gx-4 { --bs-gutter-x: 1.5rem; }
.g-4, .gy-4 { --bs-gutter-y: 1.5rem; }
.g-5, .gx-5 { --bs-gutter-x: 3rem; }
.g-5, .gy-5 { --bs-gutter-y: 3rem; }

.col { flex: 1 0 0%; }
.col-12 { flex: 0 0 auto; width: 100%; }
.col-lg-3, .col-lg-4, .col-lg-8, .col-md-3, .col-md-4, .col-md-6 { width: 100%; }
@media (min-width: 768px) {
    .col-md-3 { flex: 0 0 auto !important; width: 25% !important; }
    .col-md-4 { flex: 0 0 auto !important; width: 33.3333% !important; }
    .col-md-6 { flex: 0 0 auto !important; width: 50% !important; }
}
@media (min-width: 992px) {
    .col-lg-3 { flex: 0 0 auto !important; width: 25% !important; }
    .col-lg-4 { flex: 0 0 auto !important; width: 33.3333% !important; }
    .col-lg-8 { flex: 0 0 auto !important; width: 66.6667% !important; }
}

/* ─── 5. BOOTSTRAP DISPLAY UTILITIES ────────────────────────────────── */
.d-none    { display: none !important; }
.d-block   { display: block !important; }
.d-flex    { display: flex !important; }
.d-inline  { display: inline !important; }
@media (min-width: 768px) {
    .d-md-none    { display: none !important; }
    .d-md-block   { display: block !important; }
    .d-md-flex    { display: flex !important; }
    .d-md-inline  { display: inline !important; }
    .d-md-row     { flex-direction: row !important; }
}
.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;
}

/* ─── 6. BOOTSTRAP FLEX ──────────────────────────────────────────────── */
.flex-column    { flex-direction: column !important; }
.flex-shrink-0  { flex-shrink: 0 !important; }
.flex-wrap      { flex-wrap: wrap !important; }
.flex-col       { flex-direction: column !important; }
.align-items-center  { align-items: center !important; }
.align-items-start   { align-items: flex-start !important; }
.align-items-stretch { align-items: stretch !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-center  { justify-content: center !important; }
.justify-content-start   { justify-content: flex-start !important; }
.justify-content-end     { justify-content: flex-end !important; }
@media (min-width: 768px) {
    .justify-content-md-start  { justify-content: flex-start !important; }
    .flex-md-row               { flex-direction: row !important; }
    .align-items-md-center     { align-items: center !important; }
    .flex-md-column            { flex-direction: column !important; }
}
@media (min-width: 992px) {
    .justify-content-lg-start  { justify-content: flex-start !important; }
}

/* ─── 7. BOOTSTRAP SPACING ───────────────────────────────────────────── */
.m-0  { margin: 0 !important; }          .m-3  { margin: 1rem !important; }
.mt-0 { margin-top: 0 !important; }      .mt-4 { margin-top: 1.5rem !important; }
.mt-5 { margin-top: 3rem !important; }   .mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: .25rem !important; } .mb-2 { margin-bottom: .5rem !important; }
.mb-3 { margin-bottom: 1rem !important; } .mb-4 { margin-bottom: 1.5rem !important; }
.mb-5 { margin-bottom: 3rem !important; } .ms-1 { margin-inline-start: .25rem !important; }
.ms-2 { margin-inline-start: .5rem !important; }
.ms-auto { margin-inline-start: auto !important; }
.me-1 { margin-inline-end: .25rem !important; }
.me-2 { margin-inline-end: .5rem !important; }
.mx-1 { margin-inline: .25rem !important; }
@media (min-width: 768px) {
    .mb-md-0 { margin-bottom: 0 !important; }
}

.p-0  { padding: 0 !important; }         .p-4  { padding: 1.5rem !important; }
.px-2 { padding-inline: .5rem !important; } .px-3 { padding-inline: 1rem !important; }
.px-4 { padding-inline: 1.5rem !important; } .py-1 { padding-block: .25rem !important; }
.py-4 { padding-block: 1.5rem !important; } .pe-4 { padding-inline-end: 1.5rem !important; }
.ps-4 { padding-inline-start: 1.5rem !important; }

/* gap utilities */
.gap-1 { gap: .25rem !important; } .gap-2 { gap: .5rem !important; }
.gap-3 { gap: .75rem !important; } .gap-4 { gap: 1rem !important; }
.gap-5 { gap: 3rem !important; }   .gap-8 { gap: 2rem !important; }

/* ─── 8. BOOTSTRAP SIZING ────────────────────────────────────────────── */
.w-100 { width: 100% !important; }   .h-100 { height: 100% !important; }
.mw-100 { max-width: 100% !important; }

/* ─── 9. BOOTSTRAP POSITION ──────────────────────────────────────────── */
.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }
.position-fixed    { position: fixed !important; }
.position-sticky   { position: sticky !important; }

.top-0   { top: 0 !important; }     .top-50  { top: 50% !important; }
.end-0   { inset-inline-end: 0 !important; }
.start-0 { inset-inline-start: 0 !important; }
.translate-middle-y { transform: translateY(-50%) !important; }
.z-3 { z-index: 3 !important; }

/* ─── 10. BOOTSTRAP TEXT / COLOR ─────────────────────────────────────── */
.text-center    { text-align: center !important; }
.text-start     { text-align: start !important; }
.text-end       { text-align: end !important; }
.text-muted     { color: #6c757d !important; }
.text-uppercase { text-transform: uppercase !important; }
.fw-bold        { font-weight: 700 !important; }
.bg-white       { background-color: #fff !important; }
.opacity-75     { opacity: 0.75 !important; }

/* ─── 11. BOOTSTRAP BORDERS / ROUNDED ───────────────────────────────── */
.border-start   { border-inline-start: 1px solid #dee2e6 !important; }
.border-end     { border-inline-end:   1px solid #dee2e6 !important; }
.border-0       { border: 0 !important; }
.rounded-4      { border-radius: 1rem !important; }
.rounded-circle { border-radius: 50% !important; }
.rounded-pill   { border-radius: 50rem !important; }

/* ─── 12. BOOTSTRAP SHADOW ───────────────────────────────────────────── */
.shadow-sm { box-shadow: 0 1px 2px rgba(0,0,0,.05) !important; }

/* ─── 13. BOOTSTRAP OBJECT-FIT / OVERFLOW ────────────────────────────── */
.object-fit-cover   { object-fit: cover !important; }
.overflow-hidden    { overflow: hidden !important; }

/* ─── 14. BOOTSTRAP BUTTONS ──────────────────────────────────────────── */
.btn {
    display: inline-block; font-weight: 400; line-height: 1.5;
    text-align: center; text-decoration: none; vertical-align: middle; cursor: pointer;
    user-select: none; background-color: transparent; border: 1px solid transparent;
    padding: .375rem .75rem; font-size: 14px !important; border-radius: 4px;
    transition: color .15s ease-in-out, background-color .15s ease-in-out,
                border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.btn-light {
    color: #000; background-color: #f8f9fa; border-color: #f8f9fa;
}
.btn-light:hover { background-color: #e2e6ea; }

/* ─── 15. BOOTSTRAP CAROUSEL ─────────────────────────────────────────── */
.carousel { position: relative; }
.carousel-inner { position: relative; width: 100%; overflow: hidden; }
.carousel-item {
    position: relative; display: none; float: left; width: 100%; margin-right: -100%;
    backface-visibility: hidden; transition: transform .6s ease-in-out;
}
.carousel-item.active, .carousel-item-next, .carousel-item-prev { display: block; }
.carousel-item-next:not(.carousel-item-start),
.active.carousel-item-end { transform: translateX(100%); }
.carousel-item-prev:not(.carousel-item-end),
.active.carousel-item-start { transform: translateX(-100%); }
.carousel-control-prev, .carousel-control-next {
    position: absolute; top: 0; bottom: 0; z-index: 1; display: flex;
    align-items: center; justify-content: center; width: 15%; padding: 0;
    color: #fff; text-align: center; background: none; border: 0; opacity: .5;
    transition: opacity .15s ease;
}
.carousel-control-prev-icon, .carousel-control-next-icon {
    display: inline-block; width: 2rem; height: 2rem; background-repeat: no-repeat;
    background-position: 50%; background-size: 100% 100%;
}
.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
}
.carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.carousel-indicators {
    position: absolute; right: 0; bottom: 0; left: 0; z-index: 2;
    display: flex; justify-content: center; padding: 0; margin: 0 15%;
    list-style: none;
}
.carousel-indicators [data-bs-target] {
    box-sizing: content-box; flex: 0 1 auto; width: 30px; height: 3px; padding: 0;
    margin-right: 3px; margin-left: 3px; text-indent: -999px; cursor: pointer;
    background-color: #fff; background-clip: padding-box; border: 0;
    border-top: 10px solid transparent; border-bottom: 10px solid transparent; opacity: .5;
    transition: opacity .6s ease;
}
.carousel-indicators .active { opacity: 1; }

/* ─── 16. CORE.CSS TYPOGRAPHY CLASSES (used on Home page) ───────────── */
/* Titles use dark charcoal #111827 matching original theme */
.display-md-bold  { font-size: 36px !important; line-height: 44px !important; font-weight: 700; color: #111827 !important; }
.display-sm-bold  { font-size: 30px !important; line-height: 38px !important; font-weight: 700; color: #111827 !important; }
.text-xl-regular  { font-size: 20px !important; line-height: 30px !important; font-weight: 400; }
.text-lg-regular  { font-size: 18px !important; line-height: 28px !important; font-weight: 400; }
.text-md-regular  { font-size: 16px !important; line-height: 24px !important; font-weight: 400; }
.text-sm-regular  { font-size: 14px !important; line-height: 20px !important; font-weight: 400; }
.text-xs-regular  { font-size: 12px !important; line-height: 18px !important; font-weight: 400; }
.text-xl-bold     { font-size: 20px !important; line-height: 30px !important; font-weight: 700; }
.text-lg-bold     { font-size: 18px !important; line-height: 28px !important; font-weight: 700; }
.text-md-bold     { font-size: 16px !important; line-height: 24px !important; font-weight: 700; }
.text-sm-bold     { font-size: 14px !important; line-height: 20px !important; font-weight: 700; }
.text-xs-bold     { font-size: 12px !important; line-height: 18px !important; font-weight: 700; }
.text-xl-medium   { font-size: 20px !important; line-height: 30px !important; font-weight: 500; }
.text-lg-medium   { font-size: 18px !important; line-height: 28px !important; font-weight: 500; }
.text-md-medium   { font-size: 16px !important; line-height: 24px !important; font-weight: 500; }
.text-sm-medium   { font-size: 14px !important; line-height: 20px !important; font-weight: 500; }

/* ─── 17. CORE.CSS DGA-BTN (used on Home page) ───────────────────────── */
.dga-btn {
    -webkit-appearance: none; appearance: none;
    border-radius: var(--radius-sm); cursor: pointer; border: 0; outline: none;
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px; box-sizing: border-box; overflow: hidden;
    text-decoration: none !important;
}
.dga-btn:focus-visible { outline: 2px solid #000; }
.dga-btn-icon { display: flex; width: 24px; height: 24px; font-size: 24px;
    justify-content: center; align-items: center; }
.dga-btn--lg {
    height: 40px; padding-inline: 16px;
    font-size: 16px; font-weight: 500; line-height: 24px;
}
.dga-btn--md {
    height: 32px; padding-inline: 12px;
    font-size: 14px; font-weight: 500; line-height: 20px;
}
.dga-btn--primary-brand {
    background-color: var(--button-background-primary-default);
    color: var(--text-oncolor-primary);
}
.dga-btn--primary-brand:hover { background: var(--button-background-primary-hovered); }

/* ─── 18. CORE.CSS CARD COMPONENT (used on Home page) ────────────────── */
.card--with-shadow {
    background: #fff;
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
    border: 1px solid rgba(0,0,0,.125);
    border-radius: var(--radius-xl);
}
.card__image-container {
    width: 100%; overflow: hidden; position: relative;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.card__image-container img { width: 100%; height: 100%; object-fit: cover; }
.card__content-text { padding: 16px; }
.card__action { display: flex; margin-top: auto; }
.card__action--default { justify-content: flex-start; }

/* ─── 19. CORE.CSS SPACING UTILITIES (used on Home page) ─────────────── */
.dga-py-16 { padding-block: 32px !important; } /* Balanced 32px section padding */
.dga-flex-column { display: flex; flex-direction: column; }
.dga-text-right { text-align: right; }
/* Tailwind leading-loose used on paragraphs in Initiatives section */
.leading-loose { line-height: 2 !important; }

/* ─── 20. DGACUSTOMS.CSS — FULL ──────────────────────────────────────── */

/* Type scale compliance */
.display-4 { font-size: 36px !important; line-height: 44px !important; }
footer.dga-footer { line-height: 14px !important; }

/* Skip nav */
.skip-nav-link {
    position: absolute; top: -100%; left: 50%;
    transform: translateX(-50%); background: #14573A; color: #fff;
    padding: 10px 24px; border-radius: 0 0 8px 8px; font-weight: 700;
    font-size: 14px; text-decoration: none; z-index: 9999;
    transition: top 0.2s ease; white-space: nowrap;
}
.skip-nav-link:focus { top: 0; outline: 3px solid #4ade80; outline-offset: 2px; }

/* Hero */
.hero-section { position: relative; }

/* Carousel indicators */
.carousel-indicators [data-bs-target] {
    width: 12px; height: 12px; border-radius: 50%;
    background-color: var(--colors-primary-sa-flag-600-primary) !important;
    margin: 0 6px; border: none; opacity: 0.5; transition: opacity 0.3s ease;
}
.carousel-indicators .active { opacity: 1; transform: scale(1.2); }

/* DGA Card */
.dga-card {
    background: var(--background-card); border-radius: var(--radius-xl);
    padding: var(--spacing-8); box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-neutral-primary);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%; display: flex; flex-direction: column;
    justify-content: space-between; contain: layout style;
}
.dga-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-xl); }

/* Fade in animation */
@media (prefers-reduced-motion: no-preference) {
    .fade-in-up { opacity: 0; transform: translateY(20px); will-change: transform, opacity; }
    .fade-in-up.visible { animation: fadeInUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Partner item */
.partner-item:hover { opacity: 1 !important; transform: scale(1.1); }

/* SHC header top/middle bars */
.shc-top-bar {
    background-color: var(--shc-green-dark); color: #fff; font-size: 13px;
    padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,0.1);
}
.shc-top-bar a { color: #fff; text-decoration: none; }

.shc-middle-bar { background-color: #14573A; color: #fff !important; padding: 12px 0; font-size: 14px; }
.shc-date-time-wrapper { font-size: 1.275rem; line-height: 1.25rem; }
.shc-middle-bar span, .shc-middle-bar i, .shc-middle-bar div { color: #fff !important; }

@media (max-width: 768px) {
    .shc-middle-bar { padding: 8px 0; }
    .shc-middle-bar .container-fluid { padding-left: 10px !important; padding-right: 10px !important; }
    .shc-date-time-wrapper { font-size: 0.9rem !important; gap: 0.5rem !important; }
    .shc-middle-bar .d-flex.gap-3 { gap: 0.5rem !important; }
    .dga-social-links a { width: 28px; height: 28px; font-size: 14px; margin-inline-end: 4px; }
    .hrsd-nav-collapse { z-index: 2147483647 !important; }
    .hrsd-overlay { z-index: 2147483646 !important; }
}

/* Social / access buttons */
.dga-social-links a, .dga-access-btn {
    background: transparent !important; color: white; border: none;
    border-radius: 6px; width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 16px; margin-inline-end: 12px; padding: 0;
    transition: all 0.2s ease; cursor: pointer; text-decoration: none;
}
.dga-social-links a:hover, .dga-access-btn:hover {
    border-color: #4ade80 !important; color: #4ade80 !important;
}

/* High contrast */
html.dga-high-contrast { filter: invert(1) hue-rotate(180deg); }
html.dga-high-contrast img, html.dga-high-contrast video, html.dga-high-contrast iframe {
    filter: invert(1) hue-rotate(180deg);
}

/* Footer */
.dga-footer {
    background-color: #14573A; color: white;
    padding-top: 4rem; padding-bottom: 2rem;
    font-family: 'IBM Plex Sans Arabic', sans-serif;
    font-size: medium;
}
.dga-footer-title { color: #fff; font-weight: 700; margin-bottom: 1.5rem; font-size: 14px !important; line-height: 20px !important; }
h1.dga-footer-title { font-size: 14px !important; line-height: 20px !important; }
.dga-footer-list { list-style: none; padding: 0; margin: 0; }
.dga-footer-list li { margin: .5em 8px 0; }
    .dga-footer-list li:hover {
        text-decoration: underline;
    }
.dga-footer-list a { color: rgba(255,255,255,.9); text-decoration: none; transition: color .3s; font-size: 14px; line-height: 24px; }
.dga-footer-list a:hover { text-decoration: underline; }
.dga-footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding-top: 2rem; }
.dga-footer-logo { height: 50px; width: auto; filter: brightness(0) invert(1); opacity: .9; }
.dga-footer-links-bottom a { color: rgba(255,255,255,.8); text-decoration: none; font-size: 1.3rem; }
.dga-footer-links-bottom a:hover { color: white; text-decoration: underline; }
.dga-text-right { text-align: right; }

/* Utility */
button.btn, .btn { font-size: 14px !important; }
.newFont-views-container, .newFont-views-container * {
    font-family: 'IBM Plex Sans Arabic'; font-size: 16px !important; line-height: 28px; text-align: start;
}

/* ShowAll button */
.ShowAll-btn {
    padding: 8px 24px; border-radius: 4px; font-weight: 600; transition: all 0.2s ease-in-out !important;
    border: none; cursor: pointer; background-color: #ffffff !important; color: #111827 !important;
    white-space: nowrap !important; flex-shrink: 0 !important; min-width: max-content !important;
}
.ShowAll-btn:hover {
    background-color: #e5e7eb !important;
    color: #111827 !important;

}

/* Review Area */
.review-area-wrapper { background-color: #fff; border-top: 1px solid #e5e7eb; padding: 20px 0; font-family: 'IBM Plex Sans Arabic'; }
.review-area-main { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; }
.review-stats { font-size: 14px; color: #4b5563; }
.review-question-actions { display: flex; align-items: center; gap: 15px; }
.review-question-text { font-weight: 600; color: #111827; }
.review-btn { padding: 8px 24px; border-radius: 4px; font-weight: 600; transition: background-color .2s ease; border: none; cursor: pointer; }
.review-btn-yes { background-color: #166A45; color: white; }
.review-btn-yes:hover, .review-btn-yes.active { background-color: #14573A; transform: none !important; box-shadow: none !important; }
.review-btn-no { background-color: #166A45; color: white; }
.review-btn-no:hover, .review-btn-no.active { background-color: #14573A; transform: none !important; box-shadow: none !important; }
.review-form-expanded { display: none; margin-top: 25px; border-top: 1px solid #f3f4f6; padding-top: 25px; animation: fadeIn .3s ease-out; }
.review-form-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; }
.review-close-btn { background: none; border: none; color: #6b7280; cursor: pointer; display: flex; align-items: center; gap: 5px; font-size: 14px; }
.review-form-content { display: flex; flex-wrap: wrap; gap: 40px; }
.review-form-reasons, .review-form-feedback { flex: 1; min-width: 300px; }
.review-reason-title { font-weight: 700; margin-bottom: 15px; color: #111827; }
.review-options-list { display: flex; flex-direction: column; gap: 12px; }
.review-option-item { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.review-option-item input[type="checkbox"],
.review-option-item input[type="radio"] {
    display: inline-block !important;
    position: static !important;
    width: 18px !important;
    height: 18px !important;
    clip: auto !important;
    opacity: 1 !important;
    accent-color: #166A45;
    cursor: pointer;
}
.review-gender-options { display: flex; align-items: center; gap: 20px; margin-top: 15px; }
.review-textarea { width: 100%; border: 1px solid #d1d5db; border-radius: 8px; padding: 12px; min-height: 120px; resize: vertical; }
.review-submit-btn { background-color: #166A45; color: white; padding: 10px 30px; border-radius: 4px; font-weight: 600; border: none; cursor: pointer; margin-top: 20px; transition: background-color .2s ease; }
.review-submit-btn:hover { background-color: #14573A; transform: none !important; box-shadow: none !important; }
.review-thank-you-view { display: none; text-align: center; padding: 20px 0; animation: fadeIn .3s ease-out; }
.review-thank-you-msg { font-size: 18px; font-weight: 700; color: #166A45; margin-bottom: 10px; }
.review-fade-out { animation: fadeOut .3s ease-in forwards; }
html[dir="rtl"] .review-area-main { flex-direction: row-reverse; }

/* News Custom Card */
.news-custom-card {
    width: 100%; padding: var(--spacing-xl, 24px); display: flex; flex-direction: column;
    align-items: flex-start; gap: var(--card-lg-gap, 24px); border-radius: var(--radius-lg, 16px);
    background: var(--background-card, #fff); border: 2px solid var(--background-card, #fff);
    position: relative; box-sizing: border-box; overflow: hidden; cursor: default !important;
    transition: none !important; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
}
.news-custom-card:hover { transform: none !important; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075) !important; }
.news-custom-card .card__image-container { width: 100%; height: 220px; border-radius: 8px; overflow: hidden; position: relative; }
.news-custom-card .card__image-container img { width: 100%; height: 100%; object-fit: cover; }
.news-custom-card .card__content-text { width: 100%; display: flex; flex-direction: column; gap: 12px; text-align: start; }
.news-custom-card .card__action { width: 100%; display: flex; margin-top: auto; }
.news-summary-clamp { display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; line-height: 1.6; }

/* Tab selector in About section */
.tabs-container {
    border-bottom: 2px solid #E5E7EB; display: flex; gap: 40px; position: relative;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none;
}
.tabs-container::-webkit-scrollbar { display: none; }
.tab-item,
.tabs-container .tab-item {
    color: #6B7280 !important; cursor: pointer; padding-bottom: 12px; position: relative;
    transition: all .3s; background: none; border: none; white-space: nowrap; flex-shrink: 0;
}
.tab-item:hover,
.tabs-container .tab-item:hover { color: #111827 !important; }
.tab-item.active,
.tabs-container .tab-item.active { color: #111827 !important; }
.tab-item.active::after,
.tabs-container .tab-item.active::after {
    background-color: #1B8354; bottom: -2px; content: ''; height: 4px;
    left: 0; position: absolute; width: 100%; border-radius: 2px;
}
[dir="rtl"] .tabs-container { flex-direction: row; }

/* Initiative tab */
.initiative-tab { cursor: pointer; transition: all 0.3s; }
.active-tab { border: 1px solid #d2d6db !important; }
.tab-content-item { }
.tab-content { transition: opacity 0.3s ease; }

/* Hover groups */
.group:hover .group-hover-opacity-100 { opacity: 1 !important; }
.group:hover .group-hover-scale { transform: scale(1.05); }

/* Scroll */
.scroll-smooth { scroll-behavior: smooth; }

/* Keyframes */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeOut {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-5px); }
}

/* ─── 21. SITE.CSS — RELEVANT RULES ─────────────────────────────────── */
.collapse { visibility: visible !important; }

.fade-in-up {
    opacity: 0; transform: translateY(30px);
    animation: fadeInUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.partner-item:hover { opacity: 1 !important; transform: scale(1.1); }
.news-card { transition: transform .3s ease, box-shadow .3s ease; }
.news-card:hover { transform: scale(1.05); box-shadow: 0 1rem 3rem rgba(0,0,0,.15) !important; z-index: 10; }

.hover-shadow:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0,0,0,.08) !important; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.opacity-90 { opacity: 0.9; }
.opacity-80 { opacity: 0.8; }

.landing-wrapper { background: transparent !important; min-height: 100vh; position: relative; padding-bottom: 5rem; }
#main-content { background: transparent !important; }

.bg-\[\#1B8354\] { background-color: #1B8354 !important; }
.bg-\[\#14573A\] { background-color: #14573A !important; }
.bg-\[\#F3FCF6\] { background-color: #F3FCF6 !important; }

/* Tailwind-like text color utility classes used in templates (without !important so component rules take precedence) */
.text-\[\#1b8354\]  { color: #1b8354; }
.text-\[\#4d5761\]  { color: #4d5761; }
.text-\[\#131826\]  { color: #131826; }
.text-\[\#384250\]  { color: #384250; }
.text-\[\#111827\]  { color: #111827; }

@media (max-width: 768px) { .display-3 { font-size: 2.5rem; } }

/* Dropdown */
.dropdown-toggle::after { display: none !important; }
.dropdown-toggle[aria-expanded="true"] .bi-chevron-down { transform: rotate(180deg); transition: transform .3s ease; }
.bi-chevron-down { transition: transform .3s ease; width: 1em; height: 1em; }

/* ─── 22. HERO SECTION (from Index.cshtml inline styles) ─────────────── */
.hero-section {
    height: clamp(240px, 65vh, 750px); width: 100%; padding: 0; margin-top: 0;
    background-color: transparent; color: transparent;
}
@media (max-width: 576px) {
    .hero-section { height: clamp(220px, 45vw, 320px); }
    .carousel-indicators { margin-bottom: 1.5rem !important; }
    .slider-overlay-text { bottom: 1rem; right: 0.75rem; }
    .slider-overlay-line:first-child { font-size: clamp(0.65rem, 3.5vw, 1rem); }
    .slider-overlay-line:last-child  { font-size: clamp(0.9rem, 5vw, 1.4rem); }
}
@media (min-width: 577px) and (max-width: 991px) {
    .hero-section { height: clamp(320px, 52vh, 520px); }
    .carousel-indicators { margin-bottom: 3rem !important; }
    .slider-overlay-line:first-child { font-size: clamp(1rem, 2.5vw, 1.6rem); }
    .slider-overlay-line:last-child  { font-size: clamp(1.4rem, 3.5vw, 2.4rem); }
}
@media (min-width: 992px) and (max-width: 1399px) { .hero-section { height: clamp(500px, 65vh, 700px); } }
@media (min-width: 1400px) { .hero-section { height: clamp(660px, 55vh, 900px); } }

.slider-overlay-text {
    position: absolute; bottom: clamp(2.5rem, 8vh, 5rem); right: clamp(1rem, 5vw, 5rem);
    z-index: 5; display: flex; flex-direction: column; align-items: flex-end;
    text-align: right; text-shadow: 0 1px 6px rgba(0,0,0,.5);
}
.slider-overlay-line:first-child { font-size: clamp(1rem, 1.8vw, 1.75rem); font-weight: 400; color: #fff; opacity: .9; letter-spacing: .02em; }
.slider-overlay-line:last-child  { font-size: clamp(1.5rem, 2.8vw, 3rem); font-weight: 700; color: #fff; line-height: 1.2; }
html[dir="ltr"] .slider-overlay-text { right: auto; left: clamp(1rem, 5vw, 5rem); align-items: flex-start; text-align: left; }

/* ─── 23. COUNTER / STATS SECTION ────────────────────────────────────── */
.counter-section { }
.counter-value { color: #0b4a2d; }
.stat-number {
    color: #0b4a2d;
    font-size: clamp(22px, 5vw, 42px) !important;
    line-height: 1.2 !important;
    text-align: center;
    margin-bottom: 0.5rem;
    font-family: system-ui, -apple-system, sans-serif;
    white-space: nowrap !important;
}

/* ─── STICKY RESPONSIVE BEHAVIOR ────────────────────────────────────── */
@media (max-width: 991px) {
    .sticky-lg-top {
        position: static !important;
    }
}
@media (min-width: 992px) {
    .sticky-lg-top {
        position: sticky !important;
        top: 100px;
    }
}

/* ─── 24. REVIEW BTN (also from DGAcustoms) ─────────────────────────── */
.review-btn-yes {
    background-color: #166A45 !important;
    color: white !important;
    transition: background-color 0.2s ease !important;
    transform: none !important;
    box-shadow: none !important;
}
.review-btn-yes:hover,
.review-btn-yes:focus {
    background-color: #14573A !important;
    color: white !important;
    transform: none !important;
    box-shadow: none !important;
}

.review-btn-no {
    background-color: #166A45 !important;
    color: white !important;
    transition: background-color 0.2s ease !important;
    transform: none !important;
    box-shadow: none !important;
}
.review-btn-no:hover,
.review-btn-no:focus {
    background-color: #14573A !important;
    color: white !important;
    transform: none !important;
    box-shadow: none !important;
}
.dga-btn {
    transition: background-color 0.2s ease !important;
    transform: none !important;
}
.dga-btn:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* ─── 25. COOKIE CONSENT BANNER ─────────────────────────────────────── */
/* (The banner has its own inline <style>; nothing extra needed here) */
/* These bootstrap classes used in the banner are already defined above:
   .container, .d-flex, .position-fixed, .text-start, .bg-white,
   .rounded-pill, .shadow-sm, .px-3, .py-1, .mb-3, .gap-2 */

/* ─── 26. PARTNER SECTION ────────────────────────────────────────────── */
.d-flex.overflow-hidden { overflow: hidden; }
.scroll-smooth { scroll-behavior: smooth; }

/* ─── 27. MISC BOOTSTRAP UTILITIES USED IN TEMPLATES ────────────────── */
.text-md { font-size: 1rem; }
.text-sm { font-size: .875rem; }
.fw-semibold { font-weight: 600 !important; }
.ms-auto { margin-inline-start: auto !important; }
.me-auto { margin-inline-end: auto !important; }
.w-20 { width: 5rem !important; }
.h-20 { height: 5rem !important; }