/* Sharif Group Multilingual & RTL Stylesheet */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800&family=Noto+Sans+SC:wght@300;400;500;700&family=Vazirmatn:wght@300;400;500;600;700;800&display=swap');

/* Anti-FOUC (Zero English Flicker) state for non-English page transitions */
html.i18n-pending [data-i18n],
html.i18n-pending [data-i18n-html] {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Font Family mappings for Arabic (preserving Font Awesome icons) */
html[lang="ar"],
html[lang="ar"] body,
body.lang-ar,
body.lang-ar *:not(i):not([class*="fa-"]):not([class*="fa"]) {
    font-family: 'Cairo', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* Font Family mappings for Persian (preserving Font Awesome icons) */
html[lang="fa"],
html[lang="fa"] body,
body.lang-fa,
body.lang-fa *:not(i):not([class*="fa-"]):not([class*="fa"]) {
    font-family: 'Vazirmatn', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* Font Family mappings for Chinese (preserving Font Awesome icons) */
html[lang="zh"],
html[lang="zh-Hans"],
html[lang="zh"] body,
body.lang-zh,
body.lang-zh *:not(i):not([class*="fa-"]):not([class*="fa"]) {
    font-family: 'Noto Sans SC', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* RTL Layout Adjustments */
[dir="rtl"] {
    direction: rtl;
    text-align: right;
}

[dir="rtl"] .text-left {
    text-align: right !important;
}

/* Swap timeline and process steps alignment in RTL without breaking explicit text-right */
[dir="rtl"] .timeline-step .text-right,
[dir="rtl"] .process-step .text-right,
[dir="rtl"] div[class*="timeline"] .text-right {
    text-align: left !important;
}

/* Flip directional icons in RTL */
[dir="rtl"] .rtl-flip,
[dir="rtl"] .fa-arrow-right,
[dir="rtl"] .fa-chevron-right {
    transform: scaleX(-1);
}

[dir="rtl"] .fa-arrow-left,
[dir="rtl"] .fa-chevron-left {
    transform: scaleX(-1);
}

/* Numeric & Counter Display in RTL */
[dir="rtl"] .counter-container,
[dir="rtl"] .counter-val,
[dir="rtl"] .counter-value,
[dir="rtl"] .counter-element,
[dir="rtl"] .stat-counter-wrap,
[dir="rtl"] h3>span[dir="ltr"] {
    direction: ltr !important;
    unicode-bidi: isolate !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

[dir="rtl"] .counter-suffix,
[dir="rtl"] .counter-plus {
    display: inline-block;
    unicode-bidi: isolate;
}

[dir="rtl"] a[href^="tel:"],
[dir="rtl"] [data-no-localize] {
    direction: ltr !important;
    unicode-bidi: isolate !important;
    display: inline-block !important;
}

/* Footer Contact Details Spacing in RTL */
[dir="rtl"] footer .space-y-3 p i,
[dir="rtl"] .footer .space-y-3 p i {
    margin-right: 0 !important;
    margin-left: 0.75rem !important;
}

/* ==========================================================================
   RTL SPACING & HORIZONTAL REVERSAL (Fixes SVG & Text Overlaps Across Entire Site)
   ========================================================================== */

/* 1. Reset and invert Tailwind space-x-* in RTL mode so elements never overlap */
html[dir="rtl"] [class*="space-x-"]> :not([hidden])~ :not([hidden]),
body[dir="rtl"] [class*="space-x-"]> :not([hidden])~ :not([hidden]),
[dir="rtl"] [class*="space-x-"]> :not([hidden])~ :not([hidden]) {
    --tw-space-x-reverse: 1 !important;
}

[dir="rtl"] .space-x-1> :not([hidden])~ :not([hidden]) {
    margin-right: 0.25rem !important;
    margin-left: 0 !important;
}

[dir="rtl"] .space-x-1\.5> :not([hidden])~ :not([hidden]) {
    margin-right: 0.375rem !important;
    margin-left: 0 !important;
}

[dir="rtl"] .space-x-2> :not([hidden])~ :not([hidden]) {
    margin-right: 0.5rem !important;
    margin-left: 0 !important;
}

[dir="rtl"] .space-x-2\.5> :not([hidden])~ :not([hidden]) {
    margin-right: 0.625rem !important;
    margin-left: 0 !important;
}

[dir="rtl"] .space-x-3> :not([hidden])~ :not([hidden]) {
    margin-right: 0.75rem !important;
    margin-left: 0 !important;
}

[dir="rtl"] .space-x-3\.5> :not([hidden])~ :not([hidden]) {
    margin-right: 0.875rem !important;
    margin-left: 0 !important;
}

[dir="rtl"] .space-x-4> :not([hidden])~ :not([hidden]) {
    margin-right: 1rem !important;
    margin-left: 0 !important;
}

[dir="rtl"] .space-x-5> :not([hidden])~ :not([hidden]) {
    margin-right: 1.25rem !important;
    margin-left: 0 !important;
}

[dir="rtl"] .space-x-6> :not([hidden])~ :not([hidden]) {
    margin-right: 1.5rem !important;
    margin-left: 0 !important;
}

[dir="rtl"] .space-x-8> :not([hidden])~ :not([hidden]) {
    margin-right: 2rem !important;
    margin-left: 0 !important;
}

/* 1.1 Header RTL Actions & Brand Alignment (Fixes CTAs getting clustered next to nav links) */
html[dir="rtl"] #main-header div.hidden.lg\:flex.shrink-0,
html[dir="rtl"] #main-header > div > div:last-child,
html[dir="rtl"] #main-header .sg-right-actions,
html[dir="rtl"] .sg-right-actions,
[dir="rtl"] #main-header div.hidden.lg\:flex.shrink-0,
[dir="rtl"] #main-header > div > div:last-child,
[dir="rtl"] #main-header .sg-right-actions,
[dir="rtl"] .sg-right-actions,
html[lang="ar"] #main-header div.hidden.lg\:flex.shrink-0,
html[lang="ar"] #main-header > div > div:last-child,
html[lang="ar"] #main-header .sg-right-actions,
html[lang="ar"] .sg-right-actions,
html[lang="fa"] #main-header div.hidden.lg\:flex.shrink-0,
html[lang="fa"] #main-header > div > div:last-child,
html[lang="fa"] #main-header .sg-right-actions,
html[lang="fa"] .sg-right-actions {
    margin-left: 0 !important;
    margin-right: auto !important;
    margin-inline-start: auto !important;
    margin-inline-end: 0 !important;
}

/* 2. Site-wide Footer Brand Mark & Column Alignment in RTL */
html[dir="rtl"] footer .lg\:col-span-1,
html[dir="rtl"] .footer .lg\:col-span-1,
[dir="rtl"] footer .lg\:col-span-1,
[dir="rtl"] .footer .lg\:col-span-1,
html[dir="rtl"] footer div:has(> a:has(img[src*="Group-427321463"])),
[dir="rtl"] footer div:has(> a:has(img[src*="Group-427321463"])),
html[dir="rtl"] footer div:has(> a:has(img[alt*="Sharif Group Logo"])),
[dir="rtl"] footer div:has(> a:has(img[alt*="Sharif Group Logo"])) {
    align-items: flex-start !important;
    text-align: right !important;
}

html[dir="rtl"] footer a.group,
html[dir="rtl"] .footer a.group,
html[dir="rtl"] footer a[href*="hero"],
html[dir="rtl"] footer a:has(img[src*="Group-427321463"]),
html[dir="rtl"] footer a:has(img[alt*="Sharif Group Logo"]),
[dir="rtl"] footer a.group,
[dir="rtl"] .footer a.group,
[dir="rtl"] footer a[href*="hero"],
[dir="rtl"] footer a:has(img[src*="Group-427321463"]),
[dir="rtl"] footer a:has(img[alt*="Sharif Group Logo"]) {
    display: inline-flex !important;
    flex-direction: row-reverse !important;
    align-items: center !important;
    gap: 0.75rem !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    align-self: flex-start !important;
}

html[dir="rtl"] footer a.group>*,
html[dir="rtl"] .footer a.group>*,
html[dir="rtl"] footer a[href*="hero"]>*,
html[dir="rtl"] footer a:has(img[src*="Group-427321463"])>*,
html[dir="rtl"] footer a:has(img[alt*="Sharif Group Logo"])>*,
[dir="rtl"] footer a.group>*,
[dir="rtl"] .footer a.group>*,
[dir="rtl"] footer a[href*="hero"]>*,
[dir="rtl"] footer a:has(img[src*="Group-427321463"])>*,
[dir="rtl"] footer a:has(img[alt*="Sharif Group Logo"])>* {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

html[dir="rtl"] footer a.group .translate-y-1\.5,
html[dir="rtl"] .footer a.group .translate-y-1\.5,
html[dir="rtl"] footer a[href*="hero"] .translate-y-1\.5,
html[dir="rtl"] footer a:has(img[src*="Group-427321463"]) .translate-y-1\.5,
html[dir="rtl"] footer a:has(img[alt*="Sharif Group Logo"]) .translate-y-1\.5,
[dir="rtl"] footer a.group .translate-y-1\.5,
[dir="rtl"] .footer a.group .translate-y-1\.5,
[dir="rtl"] footer a[href*="hero"] .translate-y-1\.5,
[dir="rtl"] footer a:has(img[src*="Group-427321463"]) .translate-y-1\.5,
[dir="rtl"] footer a:has(img[alt*="Sharif Group Logo"]) .translate-y-1\.5 {
    display: inline-flex !important;
    flex-direction: row-reverse !important;
    align-items: center !important;
    gap: 0.5rem !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

html[dir="rtl"] footer a.group .translate-y-1\.5>*,
html[dir="rtl"] .footer a.group .translate-y-1\.5>*,
html[dir="rtl"] footer a[href*="hero"] .translate-y-1\.5>*,
html[dir="rtl"] footer a:has(img[src*="Group-427321463"]) .translate-y-1\.5>*,
html[dir="rtl"] footer a:has(img[alt*="Sharif Group Logo"]) .translate-y-1\.5>*,
[dir="rtl"] footer a.group .translate-y-1\.5>*,
[dir="rtl"] .footer a.group .translate-y-1\.5>*,
[dir="rtl"] footer a[href*="hero"] .translate-y-1\.5>*,
[dir="rtl"] footer a:has(img[src*="Group-427321463"]) .translate-y-1\.5>*,
[dir="rtl"] footer a:has(img[alt*="Sharif Group Logo"]) .translate-y-1\.5>* {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

html[dir="rtl"] footer a.group span,
html[dir="rtl"] .footer a.group span,
[dir="rtl"] footer a.group span,
[dir="rtl"] .footer a.group span {
    direction: ltr !important;
    text-align: right !important;
    display: block !important;
}

html[dir="rtl"] footer img[alt*="Investment Migration Council"],
html[dir="rtl"] .footer img[alt*="Investment Migration Council"],
[dir="rtl"] footer img[alt*="Investment Migration Council"],
[dir="rtl"] .footer img[alt*="Investment Migration Council"] {
    margin-left: auto !important;
    margin-right: 0 !important;
    display: block !important;
}

/* 3. Site-wide Header Logo & Menu Spacing in RTL */
[dir="rtl"] header .min-w-0,
[dir="rtl"] header .flex.items-center:has(#nav-logo) {
    gap: 1.25rem !important;
}

[dir="rtl"] header .min-w-0>*,
[dir="rtl"] header .flex.items-center:has(#nav-logo)>* {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

[dir="rtl"] header nav.hidden.xl\:flex {
    gap: 1rem !important;
}

[dir="rtl"] header nav.hidden.xl\:flex>* {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* 4. Flip mr-* and ml-* margins in RTL mode across the site */
[dir="rtl"] .mr-1 {
    margin-right: 0 !important;
    margin-left: 0.25rem !important;
}

[dir="rtl"] .mr-1\.5 {
    margin-right: 0 !important;
    margin-left: 0.375rem !important;
}

[dir="rtl"] .mr-2 {
    margin-right: 0 !important;
    margin-left: 0.5rem !important;
}

[dir="rtl"] .mr-2\.5 {
    margin-right: 0 !important;
    margin-left: 0.625rem !important;
}

[dir="rtl"] .mr-3 {
    margin-right: 0 !important;
    margin-left: 0.75rem !important;
}

[dir="rtl"] .mr-3\.5 {
    margin-right: 0 !important;
    margin-left: 0.875rem !important;
}

[dir="rtl"] .mr-4 {
    margin-right: 0 !important;
    margin-left: 1rem !important;
}

[dir="rtl"] .mr-5 {
    margin-right: 0 !important;
    margin-left: 1.25rem !important;
}

[dir="rtl"] .mr-6 {
    margin-right: 0 !important;
    margin-left: 1.5rem !important;
}

[dir="rtl"] .mr-8 {
    margin-right: 0 !important;
    margin-left: 2rem !important;
}

[dir="rtl"] .ml-1 {
    margin-left: 0 !important;
    margin-right: 0.25rem !important;
}

[dir="rtl"] .ml-1\.5 {
    margin-left: 0 !important;
    margin-right: 0.375rem !important;
}

[dir="rtl"] .ml-2 {
    margin-left: 0 !important;
    margin-right: 0.5rem !important;
}

[dir="rtl"] .ml-2\.5 {
    margin-left: 0 !important;
    margin-right: 0.625rem !important;
}

[dir="rtl"] .ml-3 {
    margin-left: 0 !important;
    margin-right: 0.75rem !important;
}

[dir="rtl"] .ml-3\.5 {
    margin-left: 0 !important;
    margin-right: 0.875rem !important;
}

[dir="rtl"] .ml-4 {
    margin-left: 0 !important;
    margin-right: 1rem !important;
}

[dir="rtl"] .ml-5 {
    margin-left: 0 !important;
    margin-right: 1.25rem !important;
}

[dir="rtl"] .ml-6 {
    margin-left: 0 !important;
    margin-right: 1.5rem !important;
}

[dir="rtl"] .ml-8 {
    margin-left: 0 !important;
    margin-right: 2rem !important;
}

/* 5. Feature Boxes (Icon Pill + Text) across all pages */
[dir="rtl"] .about-feature-box,
[dir="rtl"] .feature-box,
[dir="rtl"] .feature-card {
    display: flex !important;
    align-items: center !important;
    gap: 1.25rem !important;
}

[dir="rtl"] .about-feature-box>*,
[dir="rtl"] .feature-box>*,
[dir="rtl"] .feature-card>* {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Switcher button & dropdown luxury styling */
.lang-switcher-wrapper {
    position: relative;
    display: inline-block;
}

#lang-dropdown-menu {
    min-width: 170px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

#lang-dropdown-menu.hidden {
    display: none;
}

/* Ensure desktop language dropdown opens inward in RTL mode without overflowing off-screen */
[dir="rtl"] #lang-dropdown-menu {
    right: auto !important;
    left: 0 !important;
}

[dir="rtl"] #lang-switcher-btn {
    gap: 6px;
}

[dir="rtl"] #lang-switcher-btn>* {
    margin: 0 !important;
}

.lang-option {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100% !important;
    padding: 9px 14px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: #262626;
    transition: all 0.2s ease;
    cursor: pointer;
    background: transparent;
    border: none;
    box-sizing: border-box;
}

.lang-option:hover {
    background-color: rgba(197, 168, 128, 0.12);
    color: #C5A880;
}

.lang-option.active-lang {
    background-color: rgba(197, 168, 128, 0.18);
    color: #A3845B;
    font-weight: 700;
}

/* Mobile Language Switcher styles */
.mobile-lang-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    padding: 4px;
    background: #f5f5f5;
    border-radius: 9999px;
    border: 1px solid #e5e5e5;
}

.mobile-lang-option {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 4px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 9999px;
    transition: all 0.2s ease;
    text-align: center;
    cursor: pointer;
    border: none;
    background: transparent;
    color: #555;
}

.mobile-lang-option.active-lang {
    background: #C5A880 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(197, 168, 128, 0.4);
}

/* ==========================================================================
   ARABIC & PERSIAN TYPOGRAPHY & HERO / ABOUT FOUNDER ENHANCEMENTS
   ========================================================================== */

/* 1. Prevent Letter-Spacing (Tracking) from breaking Arabic/Persian cursive script */
html[lang="ar"] [class*="tracking-"],
html[lang="fa"] [class*="tracking-"],
body.lang-ar [class*="tracking-"],
body.lang-fa [class*="tracking-"],
[dir="rtl"] [class*="tracking-"],
[dir="rtl"] .tracking-widest,
[dir="rtl"] .tracking-wider,
[dir="rtl"] .tracking-wide,
[dir="rtl"] .tracking-tight,
[dir="rtl"] .tracking-tighter {
    letter-spacing: normal !important;
}

/* 2. Prevent artificial oblique slanting (italic) in Arabic and Persian */
html[lang="ar"] .italic,
html[lang="fa"] .italic,
body.lang-ar .italic,
body.lang-fa .italic,
[dir="rtl"] .italic,
[dir="rtl"] em,
[dir="rtl"] i:not([class*="fa-"]):not([class*="fa"]) {
    font-style: normal !important;
}

/* 3. Hero Glow Heading: Native Arabic & Persian font override & descender protection (All Pages & Programs) */
html[lang="ar"] .contact-hero-glow,
html[lang="ar"] .dominica-hero-glow,
html[lang="ar"] .stlucia-hero-glow,
html[lang="ar"] [class*="-hero-glow"],
body.lang-ar .contact-hero-glow,
body.lang-ar .dominica-hero-glow,
body.lang-ar .stlucia-hero-glow,
body.lang-ar [class*="-hero-glow"],
html[dir="rtl"] .contact-hero-glow,
html[dir="rtl"] .dominica-hero-glow,
html[dir="rtl"] .stlucia-hero-glow,
html[dir="rtl"] [class*="-hero-glow"],
[dir="rtl"] .contact-hero-glow,
[dir="rtl"] .dominica-hero-glow,
[dir="rtl"] .stlucia-hero-glow,
[dir="rtl"] [class*="-hero-glow"] {
    font-family: 'Cairo', system-ui, -apple-system, sans-serif !important;
    letter-spacing: normal !important;
    line-height: 1.45 !important;
    padding-bottom: 0.85rem !important;
    display: inline-block !important;
}

html[lang="fa"] .contact-hero-glow,
html[lang="fa"] .dominica-hero-glow,
html[lang="fa"] .stlucia-hero-glow,
html[lang="fa"] [class*="-hero-glow"],
body.lang-fa .contact-hero-glow,
body.lang-fa .dominica-hero-glow,
body.lang-fa .stlucia-hero-glow,
body.lang-fa [class*="-hero-glow"],
html[lang="fa"] [dir="rtl"] [class*="-hero-glow"],
body.lang-fa [dir="rtl"] [class*="-hero-glow"] {
    font-family: 'Vazirmatn', system-ui, -apple-system, sans-serif !important;
    letter-spacing: normal !important;
    line-height: 1.45 !important;
    padding-bottom: 0.85rem !important;
    display: inline-block !important;
}

html[lang="zh"] .contact-hero-glow,
html[lang="zh"] .dominica-hero-glow,
html[lang="zh"] .stlucia-hero-glow,
html[lang="zh"] [class*="-hero-glow"],
body.lang-zh .contact-hero-glow,
body.lang-zh .dominica-hero-glow,
body.lang-zh .stlucia-hero-glow,
body.lang-zh [class*="-hero-glow"] {
    font-family: 'Noto Sans SC', system-ui, sans-serif !important;
    letter-spacing: normal !important;
}

/* Hero Stack & Subtitle Separation: Prevent low Arabic dots (e.g. yaa in 'وبرينسيبي') from overlapping text */
[dir="rtl"] h1.flex.flex-col,
html[dir="rtl"] h1.flex.flex-col,
body.lang-ar h1.flex.flex-col,
body.lang-fa h1.flex.flex-col {
    gap: 1.75rem !important;
}

[dir="rtl"] h1>span:nth-child(2),
[dir="rtl"] h1>span[data-i18n*="heroSubtitle"],
[dir="rtl"] h1>span[data-i18n*="Subtitle"],
html[lang="ar"] h1>span:nth-child(2),
body.lang-ar h1>span:nth-child(2) {
    font-family: 'Cairo', system-ui, sans-serif !important;
    letter-spacing: normal !important;
    margin-top: 0.75rem !important;
    line-height: 1.6 !important;
    display: block !important;
}

html[lang="fa"] h1>span:nth-child(2),
body.lang-fa h1>span:nth-child(2) {
    font-family: 'Vazirmatn', system-ui, sans-serif !important;
    letter-spacing: normal !important;
    margin-top: 0.75rem !important;
    line-height: 1.6 !important;
    display: block !important;
}

/* 4. Headings Line-height in RTL to prevent diacritic dots (e.g. yaa in 'علي') from overlapping text below */
html[lang="ar"] h1,
html[lang="fa"] h1,
body.lang-ar h1,
body.lang-fa h1,
[dir="rtl"] h1 {
    line-height: 1.35 !important;
    margin-bottom: 1rem !important;
}

html[lang="ar"] h2,
html[lang="fa"] h2,
body.lang-ar h2,
body.lang-fa h2,
[dir="rtl"] h2 {
    line-height: 1.35 !important;
}

html[lang="ar"] h3,
html[lang="fa"] h3,
body.lang-ar h3,
body.lang-fa h3,
[dir="rtl"] h3 {
    line-height: 1.4 !important;
}

/* 5. Founder & About Page Hero Subtitle & Description in RTL */
html[lang="ar"] .founder-hero-subtitle,
html[lang="fa"] .founder-hero-subtitle,
body.lang-ar .founder-hero-subtitle,
body.lang-fa .founder-hero-subtitle,
[dir="rtl"] .founder-hero-subtitle,
html[lang="ar"] .about-hero-subtitle,
html[lang="fa"] .about-hero-subtitle,
body.lang-ar .about-hero-subtitle,
body.lang-fa .about-hero-subtitle,
[dir="rtl"] .about-hero-subtitle {
    font-family: 'Cairo', system-ui, sans-serif !important;
    font-style: normal !important;
    line-height: 1.9 !important;
    margin-top: 0.85rem !important;
    letter-spacing: normal !important;
}

html[lang="fa"] .founder-hero-subtitle,
body.lang-fa .founder-hero-subtitle,
html[lang="fa"] .about-hero-subtitle,
body.lang-fa .about-hero-subtitle {
    font-family: 'Vazirmatn', system-ui, sans-serif !important;
}

html[lang="ar"] .founder-hero-desc,
html[lang="fa"] .founder-hero-desc,
body.lang-ar .founder-hero-desc,
body.lang-fa .founder-hero-desc,
[dir="rtl"] .founder-hero-desc {
    font-weight: 400 !important;
    line-height: 2 !important;
    margin-top: 0.75rem !important;
    max-width: 48rem !important;
    letter-spacing: normal !important;
}

/* 6. Executive Overview & Feature Boxes in RTL */
[dir="rtl"] #sec-founder-overview .text-left,
[dir="rtl"] #sec-about-overview .text-left,
[dir="rtl"] #sec-leadership-story .text-left,
[dir="rtl"] #sec-operational-scope .text-left,
[dir="rtl"] #sec-rera-broker .text-left,
[dir="rtl"] #sec-global-benchmarks .text-left,
[dir="rtl"] #sec-imc-certification .text-left {
    text-align: right !important;
}

[dir="rtl"] .about-feature-box {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 1.25rem !important;
    text-align: right !important;
}

[dir="rtl"] .about-feature-box .space-y-1,
[dir="rtl"] .about-feature-box p,
[dir="rtl"] .about-feature-box span {
    text-align: right !important;
    line-height: 1.6 !important;
}

[dir="rtl"] .about-feature-box .feature-icon-pill {
    margin-left: 0 !important;
    margin-right: 0 !important;
    flex-shrink: 0 !important;
}

/* 7. Story Cards & Accordion Boxes in RTL */
[dir="rtl"] #sec-leadership-story .flex.items-center.justify-between {
    flex-direction: row !important;
}

[dir="rtl"] .founder-service-item .service-details .text-left {
    text-align: right !important;
}

/* 8. Badge alignment and icon gap in RTL */
[dir="rtl"] .inline-flex.items-center.gap-2,
[dir="rtl"] .inline-flex.items-center.gap-3 {
    direction: rtl !important;
}

/* 9. Marquee Track RTL Continuous Loop Engine:
   Force physical LTR coordinates so infinite scroll marquees never empty out or stop in RTL */
[dir="rtl"] .marquee-container,
[dir="rtl"] .marquee-track,
[dir="rtl"] .marquee-group,
html[dir="rtl"] .marquee-container,
html[dir="rtl"] .marquee-track,
html[dir="rtl"] .marquee-group,
body.lang-ar .marquee-container,
body.lang-fa .marquee-container,
body.lang-ar .marquee-track,
body.lang-fa .marquee-track {
    direction: ltr !important;
}

/* 10. Program Shortcut Bar & Scrollbar Reset across all pages */
.scrollbar-none::-webkit-scrollbar,
nav.scrollbar-none::-webkit-scrollbar,
[class*="scrollbar-none"]::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

.scrollbar-none,
nav.scrollbar-none,
[class*="scrollbar-none"] {
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
}

/* RTL Program Shortcut Tabs Alignment & Overflow Fix (Nauru, Sao Tome & All Program Pages) */
[dir="rtl"] nav.scrollbar-none,
html[dir="rtl"] nav.scrollbar-none,
[dir="rtl"] nav[class*="scrollbar-none"],
html[dir="rtl"] nav[class*="scrollbar-none"],
body.lang-ar nav.scrollbar-none,
body.lang-fa nav.scrollbar-none {
    justify-content: flex-start !important;
    gap: 0.85rem !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    -webkit-overflow-scrolling: touch;
}

[dir="rtl"] nav.scrollbar-none>*,
html[dir="rtl"] nav.scrollbar-none>*,
[dir="rtl"] nav[class*="scrollbar-none"]>*,
html[dir="rtl"] nav[class*="scrollbar-none"]>* {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

[dir="rtl"] nav.scrollbar-none button span,
html[dir="rtl"] nav.scrollbar-none button span,
[dir="rtl"] nav[class*="scrollbar-none"] button span,
html[dir="rtl"] nav[class*="scrollbar-none"] button span {
    font-size: 8.5px !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
}

@media (min-width: 1400px) {

    [dir="rtl"] nav.scrollbar-none,
    html[dir="rtl"] nav.scrollbar-none,
    [dir="rtl"] nav[class*="scrollbar-none"],
    html[dir="rtl"] nav[class*="scrollbar-none"] {
        justify-content: center !important;
    }
}

/* ==========================================================================
   11. Force Standard LTR Phone Number & Country Code Field across all RTL pages (Arabic & Farsi)
   ========================================================================== */
[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="tel"],
body.lang-ar input[type="tel"],
body.lang-fa input[type="tel"] {
    direction: ltr !important;
    text-align: left !important;
    unicode-bidi: isolate !important;
}

[dir="rtl"] .custom-select-wrapper,
html[dir="rtl"] .custom-select-wrapper,
body.lang-ar .custom-select-wrapper,
body.lang-fa .custom-select-wrapper,
[dir="rtl"] .custom-select-wrapper button,
[dir="rtl"] .selected-country-span {
    direction: ltr !important;
    text-align: left !important;
}

[dir="rtl"] .selected-country-span,
html[dir="rtl"] .selected-country-span,
body.lang-ar .selected-country-span,
body.lang-fa .selected-country-span {
    direction: ltr !important;
    unicode-bidi: isolate !important;
    display: inline-flex !important;
    align-items: center !important;
    text-align: left !important;
}

[dir="rtl"] div.flex:has(> input[type="tel"]),
html[dir="rtl"] div.flex:has(> input[type="tel"]),
[dir="rtl"] div.flex:has(.custom-select-wrapper),
html[dir="rtl"] div.flex:has(.custom-select-wrapper),
[dir="rtl"] div.flex[dir="ltr"],
html[dir="rtl"] div.flex[dir="ltr"] {
    direction: ltr !important;
}

[dir="rtl"] .custom-select-wrapper button {
    border-top-left-radius: 0.75rem !important;
    border-bottom-left-radius: 0.75rem !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-right-width: 1px !important;
}

[dir="rtl"] input[type="tel"] {
    border-top-right-radius: 0.75rem !important;
    border-bottom-right-radius: 0.75rem !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-left-width: 0 !important;
}

/* ==========================================================================
   MEGA MENU RTL ADJUSTMENTS
   ========================================================================== */
html[dir="rtl"] .mega-dropdown h4,
body[dir="rtl"] .mega-dropdown h4,
[dir="rtl"] .mega-dropdown h4 {
    text-align: right !important;
}

html[dir="rtl"] .mega-dropdown .col-span-3.border-r,
body[dir="rtl"] .mega-dropdown .col-span-3.border-r,
[dir="rtl"] .mega-dropdown .col-span-3.border-r,
html[dir="rtl"] .mega-dropdown div[class*="border-r"],
body[dir="rtl"] .mega-dropdown div[class*="border-r"],
[dir="rtl"] .mega-dropdown div[class*="border-r"] {
    border-right: none !important;
    border-left: 1px solid #e5e5e5 !important;
    padding-right: 0 !important;
    padding-left: 1.5rem !important;
}

/* General responsive text alignment overrides for RTL */
html[dir="rtl"] .lg\:text-left,
html[dir="rtl"] .md\:text-left,
html[dir="rtl"] .sm\:text-left,
html[dir="rtl"] .xl\:text-left,
[dir="rtl"] .lg\:text-left,
[dir="rtl"] .md\:text-left,
[dir="rtl"] .sm\:text-left,
[dir="rtl"] .xl\:text-left {
    text-align: right !important;
}

/* ==========================================================================
   BLOG RTL STYLES (Persian & Arabic)
   ========================================================================== */
html[dir="rtl"] #blog-detail-view-container,
html[lang="fa"] #blog-detail-view-container,
html[lang="ar"] #blog-detail-view-container,
body.lang-fa #blog-detail-view-container,
body.lang-ar #blog-detail-view-container,
[dir="rtl"] #blog-detail-view-container {
    direction: rtl !important;
    text-align: right !important;
}

html[dir="rtl"] #detail-title,
html[lang="fa"] #detail-title,
html[lang="ar"] #detail-title,
body.lang-fa #detail-title,
body.lang-ar #detail-title,
[dir="rtl"] #detail-title {
    direction: rtl !important;
    text-align: right !important;
}

html[dir="rtl"] #blog-detail-view-container .space-y-4,
body.lang-fa #blog-detail-view-container .space-y-4,
body.lang-ar #blog-detail-view-container .space-y-4 {
    text-align: right !important;
}

html[dir="rtl"] #detail-category-badge,
body.lang-fa #detail-category-badge,
body.lang-ar #detail-category-badge {
    text-align: right !important;
}

html[dir="rtl"] #detail-breadcrumb-title,
body.lang-fa #detail-breadcrumb-title,
body.lang-ar #detail-breadcrumb-title {
    direction: rtl !important;
    text-align: right !important;
}

html[dir="rtl"] [data-i18n="blog.backToArticles"] i,
body.lang-fa [data-i18n="blog.backToArticles"] i,
body.lang-ar [data-i18n="blog.backToArticles"] i,
[dir="rtl"] [data-i18n="blog.backToArticles"] i {
    transform: scaleX(-1) !important;
}

/* Article Body Content & all inner elements in RTL */
html[dir="rtl"] #detail-content-body,
html[lang="fa"] #detail-content-body,
html[lang="ar"] #detail-content-body,
body.lang-fa #detail-content-body,
body.lang-ar #detail-content-body,
[dir="rtl"] #detail-content-body {
    direction: rtl !important;
    text-align: right !important;
}

html[dir="rtl"] #detail-content-body *,
html[lang="fa"] #detail-content-body *,
html[lang="ar"] #detail-content-body *,
body.lang-fa #detail-content-body *,
body.lang-ar #detail-content-body *,
[dir="rtl"] #detail-content-body * {
    direction: rtl !important;
    text-align: right !important;
}

html[dir="rtl"] #detail-content-body p,
body.lang-fa #detail-content-body p,
body.lang-ar #detail-content-body p,
[dir="rtl"] #detail-content-body p {
    direction: rtl !important;
    text-align: right !important;
    line-height: 1.9 !important;
}

html[dir="rtl"] #detail-content-body h1,
html[dir="rtl"] #detail-content-body h2,
html[dir="rtl"] #detail-content-body h3,
html[dir="rtl"] #detail-content-body h4,
body.lang-fa #detail-content-body h1,
body.lang-fa #detail-content-body h2,
body.lang-fa #detail-content-body h3,
body.lang-fa #detail-content-body h4,
body.lang-ar #detail-content-body h1,
body.lang-ar #detail-content-body h2,
body.lang-ar #detail-content-body h3,
body.lang-ar #detail-content-body h4,
[dir="rtl"] #detail-content-body h1,
[dir="rtl"] #detail-content-body h2,
[dir="rtl"] #detail-content-body h3,
[dir="rtl"] #detail-content-body h4 {
    direction: rtl !important;
    text-align: right !important;
    font-weight: 700 !important;
}

html[dir="rtl"] #detail-content-body ul,
html[dir="rtl"] #detail-content-body ol,
body.lang-fa #detail-content-body ul,
body.lang-fa #detail-content-body ol,
body.lang-ar #detail-content-body ul,
body.lang-ar #detail-content-body ol,
[dir="rtl"] #detail-content-body ul,
[dir="rtl"] #detail-content-body ol {
    direction: rtl !important;
    text-align: right !important;
    padding-right: 1.5rem !important;
    padding-left: 0 !important;
}

/* Detail FAQs Accordion */
html[dir="rtl"] #detail-faq-wrapper,
body.lang-fa #detail-faq-wrapper,
body.lang-ar #detail-faq-wrapper,
[dir="rtl"] #detail-faq-wrapper {
    direction: rtl !important;
    text-align: right !important;
}

html[dir="rtl"] #detail-faq-wrapper .grid,
body.lang-fa #detail-faq-wrapper .grid,
body.lang-ar #detail-faq-wrapper .grid,
[dir="rtl"] #detail-faq-wrapper .grid {
    direction: rtl !important;
    text-align: right !important;
}

html[dir="rtl"] #detail-faq-wrapper button,
body.lang-fa #detail-faq-wrapper button,
body.lang-ar #detail-faq-wrapper button,
[dir="rtl"] #detail-faq-wrapper button {
    direction: rtl !important;
    text-align: right !important;
}

html[dir="rtl"] #detail-faq-wrapper p,
body.lang-fa #detail-faq-wrapper p,
body.lang-ar #detail-faq-wrapper p,
[dir="rtl"] #detail-faq-wrapper p {
    direction: rtl !important;
    text-align: right !important;
}

/* Blog Listing Page */
html[dir="rtl"] #blog-listing-main,
body.lang-fa #blog-listing-main,
body.lang-ar #blog-listing-main,
[dir="rtl"] #blog-listing-main {
    direction: rtl !important;
}

html[dir="rtl"] .blog-item,
body.lang-fa .blog-item,
body.lang-ar .blog-item,
[dir="rtl"] .blog-item {
    direction: rtl !important;
    text-align: right !important;
}

html[dir="rtl"] .blog-item h4,
html[dir="rtl"] .blog-item p,
body.lang-fa .blog-item h4,
body.lang-fa .blog-item p,
body.lang-ar .blog-item h4,
body.lang-ar .blog-item p,
[dir="rtl"] .blog-item h4,
[dir="rtl"] .blog-item p {
    text-align: right !important;
    direction: rtl !important;
}

html[dir="rtl"] .blog-item a[data-i18n="blog.readMore"],
body.lang-fa .blog-item a[data-i18n="blog.readMore"],
body.lang-ar .blog-item a[data-i18n="blog.readMore"],
[dir="rtl"] .blog-item a[data-i18n="blog.readMore"] {
    align-self: flex-start !important;
    text-align: right !important;
    direction: rtl !important;
}

/* Detail Consultation Form in RTL */
html[dir="rtl"] #detail-consultation-section,
body.lang-fa #detail-consultation-section,
body.lang-ar #detail-consultation-section,
[dir="rtl"] #detail-consultation-section {
    direction: rtl !important;
}

html[dir="rtl"] #standalone-contact-form,
body.lang-fa #standalone-contact-form,
body.lang-ar #standalone-contact-form,
[dir="rtl"] #standalone-contact-form {
    direction: rtl !important;
    text-align: right !important;
}

html[dir="rtl"] #standalone-contact-form label,
body.lang-fa #standalone-contact-form label,
body.lang-ar #standalone-contact-form label,
[dir="rtl"] #standalone-contact-form label {
    text-align: right !important;
    direction: rtl !important;
}

html[dir="rtl"] #standalone-contact-form input:not([type="tel"]),
html[dir="rtl"] #standalone-contact-form select,
html[dir="rtl"] #standalone-contact-form textarea,
body.lang-fa #standalone-contact-form input:not([type="tel"]),
body.lang-fa #standalone-contact-form select,
body.lang-fa #standalone-contact-form textarea,
body.lang-ar #standalone-contact-form input:not([type="tel"]),
body.lang-ar #standalone-contact-form select,
body.lang-ar #standalone-contact-form textarea,
[dir="rtl"] #standalone-contact-form input:not([type="tel"]),
[dir="rtl"] #standalone-contact-form select,
[dir="rtl"] #standalone-contact-form textarea {
    direction: rtl !important;
    text-align: right !important;
}

/* WhatsApp Widget - Fixed on right side regardless of active language or RTL direction */
.sg-wa-widget-container,
html[dir="rtl"] .sg-wa-widget-container,
html[lang="fa"] .sg-wa-widget-container,
html[lang="ar"] .sg-wa-widget-container,
body.lang-fa .sg-wa-widget-container,
body.lang-ar .sg-wa-widget-container,
[dir="rtl"] .sg-wa-widget-container {
    right: 24px !important;
    left: auto !important;
    right: max(24px, env(safe-area-inset-right, 24px)) !important;
    align-items: flex-end !important;
}

@media (max-width: 480px) {
    .sg-wa-widget-container,
    html[dir="rtl"] .sg-wa-widget-container,
    html[lang="fa"] .sg-wa-widget-container,
    html[lang="ar"] .sg-wa-widget-container,
    body.lang-fa .sg-wa-widget-container,
    body.lang-ar .sg-wa-widget-container,
    [dir="rtl"] .sg-wa-widget-container {
        right: 16px !important;
        left: auto !important;
        right: max(16px, env(safe-area-inset-right, 16px)) !important;
        align-items: flex-end !important;
    }
}

.sg-wa-modal,
html[dir="rtl"] .sg-wa-modal,
html[lang="fa"] .sg-wa-modal,
html[lang="ar"] .sg-wa-modal,
body.lang-fa .sg-wa-modal,
body.lang-ar .sg-wa-modal,
[dir="rtl"] .sg-wa-modal {
    right: 0 !important;
    left: auto !important;
}

.sg-wa-status-dot,
html[dir="rtl"] .sg-wa-status-dot,
html[lang="fa"] .sg-wa-status-dot,
html[lang="ar"] .sg-wa-status-dot,
body.lang-fa .sg-wa-status-dot,
body.lang-ar .sg-wa-status-dot,
[dir="rtl"] .sg-wa-status-dot {
    right: 2px !important;
    left: auto !important;
}

/* ==========================================================================
   FIX: Prevent fixed header / navbar from overlapping blog content
   ========================================================================== */
main.blog-article-layout,
main[class*="pt-28"],
.blog-article-main,
#blog-detail-view-container {
    padding-top: 7rem !important; /* 112px on mobile: 80px navbar + 32px space */
    scroll-margin-top: 90px !important;
}

@media (min-width: 640px) {
    main.blog-article-layout,
    main[class*="pt-28"],
    .blog-article-main,
    #blog-detail-view-container {
        padding-top: 8rem !important; /* 128px on tablet/desktop: 80px navbar + 48px space */
        scroll-margin-top: 100px !important;
    }
}

/* ==========================================================================
   FIX: Footer Background Video Canvas Decoding (Fix display:none compositor block)
   ========================================================================== */
#footer-hidden-video,
#footer-hidden-video-2 {
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0.001 !important;
    pointer-events: none !important;
    z-index: -100 !important;
}

/* ==========================================================================
   HEADER UNIVERSAL ANTI-COLLISION & PROPORTIONAL LUXURY NAVIGATION
   Mirrors the collision-free, elegant layout of /webinars/ across all screen sizes
   ========================================================================== */

/* Universal styling for the Webinars "New" badge */
.nav-new-badge,
#main-header [data-i18n="nav.newBadge"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 7px !important;
    line-height: 1 !important;
    padding: 2px 4.5px !important;
    border-radius: 9999px !important;
    background-color: #786142 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    margin-left: 3.5px !important;
    margin-right: 0 !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
}

[dir="rtl"] .nav-new-badge,
[dir="rtl"] #main-header [data-i18n="nav.newBadge"] {
    margin-left: 0 !important;
    margin-right: 3.5px !important;
}

/* Ensure header container scales properly and does not overflow */
#main-header {
    width: 100% !important;
}

#main-header > div {
    max-width: 1600px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: clamp(12px, 2vw, 32px) !important;
    padding-right: clamp(12px, 2vw, 32px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
}

/* Left Brand + Nav Group */
#main-header > div > div:first-child {
    display: flex !important;
    align-items: center !important;
    gap: clamp(8px, 1.2vw, 18px) !important;
    min-width: 0 !important;
    flex-shrink: 1 !important;
}

/* Reset Tailwind space-x negative margins that cause horizontal bloat */
#main-header > div > div:first-child > :not([hidden]) ~ :not([hidden]),
#main-header nav > :not([hidden]) ~ :not([hidden]),
#main-header nav > * {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Logo Sizing */
#main-header #nav-logo {
    height: 42px !important;
    width: auto !important;
    flex-shrink: 0 !important;
}

/* Navigation Bar (<nav>) - Always crisp, elegant, and collision-free */
#main-header nav {
    display: flex !important;
    align-items: center !important;
    gap: clamp(4px, 0.6vw, 10px) !important;
    white-space: nowrap !important;
    flex-wrap: nowrap !important;
}

#main-header nav a,
#main-header nav > div > a {
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
    color: #404040 !important;
    padding: 6px clamp(3px, 0.4vw, 8px) !important;
    transition: color 0.2s ease !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
}

#main-header nav a:hover,
#main-header nav > div > a:hover {
    color: #c5a880 !important;
}

/* Vertical Dividers (|) between nav items */
#main-header .nav-sep,
#main-header nav span.text-neutral-300 {
    font-size: 10px !important;
    color: #d4d4d4 !important;
    opacity: 0.65 !important;
    padding: 0 1px !important;
    margin: 0 !important;
    user-select: none !important;
}

/* Right Action Pill Buttons & Language Switcher - Matches /webinars/ compact sizing */
#main-header div.hidden.lg\:flex.shrink-0,
#main-header > div > div:last-child {
    display: flex !important;
    align-items: center !important;
    gap: clamp(6px, 0.8vw, 12px) !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
}
#main-header div.hidden.lg\:flex.shrink-0 > :not([hidden]) ~ :not([hidden]) {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

#main-header a[data-i18n="nav.eligibilityChecker"],
#main-header a[data-i18n="nav.bookConsultation"],
#main-header a[href*="eligibilitychecker"],
#main-header a[href*="contact"] {
    height: 34px !important;
    padding: 0 clamp(10px, 1vw, 16px) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
    border-radius: 9999px !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.25s ease !important;
}

#main-header .lang-switcher-wrapper button,
#main-header #lang-switcher-btn {
    height: 32px !important;
    padding: 0 10px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    border-radius: 9999px !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

/* ==========================================================================
   ADAPTIVE RESPONSIVE MEDIA QUERIES
   ========================================================================== */

/* From 1480px down: Hide dividers & reduce button padding to free extra space */
@media (max-width: 1480px) {
    #main-header .nav-sep,
    #main-header nav span.text-neutral-300,
    #main-header > div > div:first-child > span.text-neutral-300 {
        display: none !important;
    }
    #main-header nav {
        gap: 0.25rem 0.45rem !important;
    }
    #main-header nav a,
    #main-header nav > div > a {
        font-size: 9.5px !important;
        letter-spacing: 0.05em !important;
        padding: 4px 5px !important;
    }
    #main-header a[data-i18n="nav.eligibilityChecker"],
    #main-header a[data-i18n="nav.bookConsultation"],
    #main-header a[href*="eligibilitychecker"],
    #main-header a[href*="contact"] {
        height: 32px !important;
        padding: 0 10px !important;
        font-size: 9.5px !important;
        letter-spacing: 0.05em !important;
    }
}

/* Compact Laptop Viewports (1140px - 1280px) */
@media (max-width: 1280px) {
    #main-header nav {
        gap: 0.2rem 0.35rem !important;
    }
    #main-header nav a,
    #main-header nav > div > a {
        font-size: 9px !important;
        letter-spacing: 0.03em !important;
        padding: 4px 4px !important;
    }
    #main-header a[data-i18n="nav.eligibilityChecker"],
    #main-header a[data-i18n="nav.bookConsultation"],
    #main-header a[href*="eligibilitychecker"],
    #main-header a[href*="contact"] {
        height: 30px !important;
        padding: 0 8px !important;
        font-size: 9px !important;
        letter-spacing: 0.03em !important;
    }
}

/* Clean Switch to Mobile Drawer at 1140px (Matches /webinars/ breakpoint) */
@media (max-width: 1140px) {
    #main-header nav,
    #main-header div.hidden.lg\:flex.shrink-0 > a,
    #main-header > div > div:last-child > a,
    #main-header > div > div:first-child > span {
        display: none !important;
    }
    #main-header button[onclick*="toggleMobileMenu"],
    #main-header button[aria-label="Toggle Navigation Menu"],
    #main-header button[aria-label="Toggle Menu"],
    #main-header .lg\:hidden,
    #main-header .xl\:hidden {
        display: flex !important;
    }
}

/* RTL Script Preservations */
html[lang="ar"] #main-header nav a,
html[lang="fa"] #main-header nav a,
[dir="rtl"] #main-header nav a,
[dir="rtl"] #main-header a[data-i18n="nav.eligibilityChecker"],
[dir="rtl"] #main-header a[data-i18n="nav.bookConsultation"] {
    letter-spacing: 0 !important;
}

/* ==========================================================================
   WEBINAR COUNTDOWN & TIMEZONE COMPONENT (MATCHES WEBINAR PAGE)
   ========================================================================== */
.side-label {
    font-size: 11px !important;
    color: #C5A880 !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
}
html[lang="fa"] .side-label,
html[lang="ar"] .side-label {
    font-size: 12.5px !important;
    letter-spacing: 0 !important;
}
.date-line {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    line-height: 1.3 !important;
}
.countdown {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
}
.cd-cell {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 14px !important;
    padding: 13px 4px 9px !important;
    text-align: center !important;
    min-width: 0 !important;
}
.cd-num {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: 30px !important;
    font-weight: 700 !important;
    color: #C5A880 !important;
    line-height: 1.1 !important;
    font-variant-numeric: tabular-nums !important;
}
@media (max-width: 480px) {
    .cd-num {
        font-size: 22px !important;
    }
    .countdown {
        gap: 5px !important;
    }
    .cd-cell {
        padding: 10px 2px 7px !important;
    }
}
.cd-lbl {
    font-size: 10px !important;
    color: #a3a3a3 !important;
    margin-top: 4px !important;
}
html[lang="fa"] .cd-lbl,
html[lang="ar"] .cd-lbl {
    font-size: 11.5px !important;
}
.tz-list {
    display: grid !important;
    gap: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
    width: 100% !important;
}
.tz-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    gap: 12px !important;
    padding: 11px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    font-size: 13.5px !important;
}
.tz-row .tz-city {
    color: #bdbdbd !important;
}
.tz-row .tz-time {
    font-weight: 700 !important;
    color: #ffffff !important;
    font-variant-numeric: tabular-nums !important;
}
.tz-row.is-you .tz-city {
    color: #C5A880 !important;
    font-weight: 600 !important;
}