:root {
    --primary-blue: #0253d4;
    --secondary-blue: #6995f8;
    --light-blue: #9db6f9;
    --gold: #fb8902;
    --gold-d: #cf6b02;
    --gold-l: #fc9d35;
    --bg-gray: #f4f7f9;
    --text: #1e293b;
    --text-dark: #1a2b3c;
    --text-muted: #a7adb4;
    --white: #ffffff;
    --border: #e2e8f0;
    --black: #000000;
    --dark-gray: #5f656fa6;
    --gold-xl: #fffbee;
    --blue: #0368bd;
    --blue-d: #024a8a;
    --blue-l: #ddeeff;
    --blue-xl: #f0f7ff;
    --navy: #021a3a;
    --navy-m: #0d2d52;
    --gray-50: #f8fafc;
    --gray-100: #f0f4f8;
    --gray-200: #e2e8f0;
    --gray-400: #94a3b8;
    --gray-600: #475569;
    --gray-800: #1e293b;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Tajawal', sans-serif;
}

body {
    background-color: var(--white);
    color: var(--text-dark);
    overflow-x: hidden;
    direction: rtl;
    text-align: right;
}

.container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Top Utility Bar */
.top-bar {
    background-color: var(--primary-blue);
    color: var(--white);
    font-size: 12px;
    padding: 10px 0;
    border-bottom: 2px solid var(--gold);

}

.top-bar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Grouping container that closes the gap */
.top-bar-right-group {
    display: flex;
    align-items: center;
    gap: 12px;
    /* Directly controls the spacing between logo and text */
}

.top-bar-logo {
    height: 55px;
    /* Perfectly scales the emblem within the top bar height */
    width: auto;
    object-fit: contain;
}

.top-bar-text {
    font-weight: 500;
    white-space: nowrap;
}

.top-links {
    display: flex;
    gap: 20px;
    align-items: center;
}

.top-links a {
    color: var(--white);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Main Navigation

/* ط´ط±ظٹط· ط§ظ„طھظ†ظ‚ظ„ ظپظٹ ط­ط§ظ„طھظ‡ ط§ظ„ط§ظپطھط±ط§ط¶ظٹط© (ط£ط¹ظ„ظ‰ ط§ظ„طµظپط­ط©) */
.navbar {
    background-color: var(--white);
    /* ط£ظˆ rgba(255, 255, 255, 0.9) ظ„ظ…ط¸ظ‡ط± ط²ط¬ط§ط¬ظٹ */
    padding: 15px 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    /* ط¥ط¶ط§ظپط© طھط£ط«ظٹط± ط§ظ„ط§ظ†طھظ‚ط§ظ„ ط§ظ„ط³ظ„ط³ ظ„ظ„ط­ط±ظƒط© */
    transition: background-color 0.3s ease, padding 0.3s ease, box-shadow 0.3s ease;
}

.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background-color: transparent;
    flex-direction: row;
}

.mobile-nav-toggle {
    display: none;
}

.nav-logo-side {
    display: flex;
    align-items: center;
    gap: 15px;
}

.nav-logo-side img {
    height: 70px;
    object-fit: contain;
}

.nav-logo-side-head img {
    height: 55px;
    padding: 0%;
    margin: 0%;
}

/* ط§ظ„ط­ط§ظ„ط© ط§ظ„ط¬ط¯ظٹط¯ط©: ط¹ظ†ط¯ ط§ظ„طھظ…ط±ظٹط± ظ„ط£ط³ظپظ„ ط§ظ„طµظپط­ط© (ط³ظٹطھظ… طھظپط¹ظٹظ„ظ‡ط§ ط¹ط¨ط± ط§ظ„ط¬ط§ظپط§ط³ظƒط±ظٹط¨طھ) */
.navbar.scrolled {
    background-color: var(--border);
    padding: 10px 0;
    /* طھظ‚ظ„ظٹطµ ط§ظ„ط­ط¬ظ… ظ‚ظ„ظٹظ„ط§ظ‹ ظ„ط¥ط¹ط·ط§ط، ط´ط¹ظˆط± ط¨ط§ظ„ط±ط´ط§ظ‚ط© ط£ط«ظ†ط§ط، ط§ظ„طھطµظپط­ */
    box-shadow: 0 4px 20px rgba(16, 42, 67, 0.15);
}

/* [ط¥ط®طھظٹط§ط±ظٹ] ط¥ط°ط§ طھط­ظˆظ„طھ ط§ظ„ط®ظ„ظپظٹط© ط¥ظ„ظ‰ ط¯ط§ظƒظ†ط©طŒ ظٹظ…ظƒظ†ظƒ طھط؛ظٹظٹط± ط£ظ„ظˆط§ظ† ظ†طµظˆطµ ط§ظ„ط±ظˆط§ط¨ط· ظ„طھط¸ظ„ ظˆط§ط¶ط­ط© */
.navbar.scrolled .nav-item-link {
    color: #ffffff;
}

/* ط§ظ„ظƒظˆط¯ ط§ظ„ظ…ط·ظˆط± ظ„ط¶ظ…ط§ظ† ط¸ظ‡ظˆط± ط§ظ„ظ‚ط§ط¦ظ…ط© ط§ظ„ط±ط¦ظٹط³ظٹط© ط¨ط´ظƒظ„ ط£ظپظ‚ظٹ ظ…طھظ†ط§ط³ظ‚ */
.nav-menu {
    display: flex !important;
    flex-direction: row !important;
    /* ظٹط¬ط¨ط± ط§ظ„ط¹ظ†ط§طµط± ط¹ظ„ظ‰ ط§ظ„ط§طµط·ظپط§ظپ ط£ظپظ‚ظٹط§ظ‹ */
    list-style: none !important;
    gap: 18px;
    /* ط§ظ„ظ…ط³ط§ظپط© ط¨ظٹظ† ط¹ظ†ط§طµط± ط§ظ„ظ‚ط§ط¦ظ…ط© ط§ظ„ط±ط¦ظٹط³ظٹط© */
    margin: 0;
    padding: 0;
    align-items: center;
}

/* ط§ط³طھظ‡ط¯ط§ظپ ط¹ظ†ط§طµط± ط§ظ„ظ‚ط§ط¦ظ…ط© ط§ظ„ط±ط¦ظٹط³ظٹط© ظپظ‚ط· (ط§ظ„ظ…ط³طھظˆظ‰ ط§ظ„ط£ظˆظ„) */
.nav-menu>li {
    display: block !important;
    position: relative;
    /* ظ†ظ‚ط·ط© ط§ط±طھظƒط§ط² ظ„ظ„ظ‚ط§ط¦ظ…ط© ط§ظ„ظ…ظ†ط³ط¯ظ„ط© */
}

/* طھظ†ط³ظٹظ‚ ط±ظˆط§ط¨ط· ط§ظ„ظ‚ط§ط¦ظ…ط© ط§ظ„ط±ط¦ظٹط³ظٹط© */
.nav-menu>li>a {
    color: #0b2240;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    padding: 8px 4px;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
}

/* طھط£ط«ظٹط± ط§ظ„طھظ…ط±ظٹط± ظˆط§ظ„ط®ط· ط§ظ„ط°ظ‡ط¨ظٹ ط£ط³ظپظ„ ط§ظ„ط¹ظ†طµط± ط§ظ„ظ†ط´ط· */
.nav-menu>li>a:hover,
.nav-menu>li>a.active {
    color: #0056b3;
    border-bottom: 3px solid #cfa132;
}

/* طھظ†ط³ظٹظ‚ ط§ظ„ط³ظ‡ظ… ط§ظ„طµط؛ظٹط± ط¨ط¬ط§ظ†ط¨ ط§ظ„ظ†طµظˆطµ */
.drop-icon {
    font-size: 11px;
    margin-left: 6px;
    margin-right: 0;
    color: #6c7a89;
    transition: color 0.3s;
}

.nav-menu>li:hover .drop-icon {
    color: #0056b3;
}

/* -----------------------------------------
آ  آ  آ  آ  طھظ†ط³ظٹظ‚ ط§ظ„ظ‚ط§ط¦ظ…ط© ط§ظ„ظ…ظ†ط³ط¯ظ„ط© (طھط¸ظ„ ط¹ظ…ظˆط¯ظٹط© ط¨ط§ظ„ط¯ط§ط®ظ„)
آ  آ  آ  آ  -------------------------------------------- */
.dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    /* ظ…ط­ط§ط°ط§ط© ط¬ظ‡ط© ط§ظ„ظٹظ…ظٹظ† ظ„طھطھظ†ط§ط³ط¨ ظ…ط¹ ط§ظ„ظ„ط؛ط© ط§ظ„ط¹ط±ط¨ظٹط© */
    background-color: #ffffff;
    border-top: 3px solid #cfa132;
    /* ط®ط· ط°ظ‡ط¨ظٹ ط£ط¹ظ„ظ‰ ط§ظ„ظ‚ط§ط¦ظ…ط© */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    list-style: none;
    min-width: 220px;
    padding: 10px 0;
    border-radius: 0 0 6px 6px;
    /* طھط£ط«ظٹط±ط§طھ ط§ظ„ط§ط®طھظپط§ط، ظˆط§ظ„ط¸ظ‡ظˆط± ط§ظ„ط§ظ†ط³ظٹط§ط¨ظٹ */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    z-index: 9999;
}

.dropdown-menu-side {
    position: absolute;
    top: 60%;
    right: 100%;
    background-color: #ffffff;
    border-top: 3px solid #cfa132;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    list-style: none;
    min-width: 220px;
    padding: 10px 0;
    border-radius: 0 0 6px 6px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    z-index: 9999;
}

/* ط¥ط¸ظ‡ط§ط± ط§ظ„ظ‚ط§ط¦ظ…ط© ط§ظ„ظ…ظ†ط³ط¯ظ„ط© ط¹ظ†ط¯ طھظ…ط±ظٹط± ط§ظ„ظ…ط§ظˆط³ */
.dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-side:hover .dropdown-menu-side {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* ط¹ظ†ط§طµط± ط§ظ„ظ‚ط§ط¦ظ…ط© ط§ظ„ظ…ظ†ط³ط¯ظ„ط© ط§ظ„ط¯ط§ط®ظ„ظٹط© طھطھط±طھط¨ ط¹ظ…ظˆط¯ظٹط§ظ‹ */
.dropdown-menu li {
    display: block !important;
    width: 100%;
    text-align: right;
}

.dropdown-menu-side li {
    display: block !important;
    width: 100%;
    text-align: right;
}

/* ط±ظˆط§ط¨ط· ط§ظ„ظ‚ط§ط¦ظ…ط© ط§ظ„ظ…ظ†ط³ط¯ظ„ط© ط§ظ„ط¯ط§ط®ظ„ظٹط© */
.dropdown-menu li a {
    color: #0b2240 !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    padding: 10px 20px !important;
    display: block !important;
    border-bottom: none !important;
    transition: all 0.2s ease;
}

.dropdown-menu-side li a {
    color: #0b2240 !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    padding: 10px 20px !important;
    display: block !important;
    border-bottom: none !important;
    transition: all 0.2s ease;
}

/* طھط£ط«ظٹط± طھظ…ط±ظٹط± ط§ظ„ظ…ط§ظˆط³ ط¹ظ„ظ‰ ط¹ظ†ط§طµط± ط§ظ„ظ‚ط§ط¦ظ…ط© ط§ظ„ط¯ط§ط®ظ„ظٹط© */
.dropdown-menu li a:hover {
    background-color: #f4f7f9;
    color: #0056b3 !important;
    padding-right: 25px !important;
    /* ط¥ط²ط§ط­ط© طھظپط§ط¹ظ„ظٹط© ط®ظپظٹظپط© */
}

.dropdown-menu-side li a:hover {
    background-color: #f4f7f9;
    color: #0056b3 !important;
    padding-right: 25px !important;
    /* ط¥ط²ط§ط­ط© طھظپط§ط¹ظ„ظٹط© ط®ظپظٹظپط© */
}

/* -------------------------------------------------------------
   Top Right Smartphone Floating Navigation Menu (Fixed On Scroll fo Mobile Only)
------------------------------------------------------------- */
/* -------------------------------------------------------------
   Top Right Floating Menu - True Hover Interaction (Mobile Only)
------------------------------------------------------------- */
@media (max-width: 768px) {

    /* Full-width top header bar on smart devices */
    .navbar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: auto !important;
        min-height: 65px !important;
        border-radius: 0 !important;
        background-color: #ffffff !important;
        padding: 8px 15px !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08) !important;
        overflow: visible !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        z-index: 999999 !important;
        transform: none !important;
        transition: background-color 0.3s ease, padding 0.3s ease !important;
    }

    .navbar.scrolled {
        background-color: #ffffff !important;
        padding: 8px 15px !important;
        top: 0 !important;
        right: 0 !important;
        left: 0 !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    }

    .navbar .container {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        height: auto !important;
        padding: 0 !important;
        background-color: transparent !important;
        flex-direction: row !important;
    }

    .navbar .container::before {
        display: none !important;
        content: "" !important;
    }

    /* Display logo on smart devices as shown in attached image */
    .nav-logo-side,
    .nav-logo-side-head {
        display: flex !important;
        align-items: center !important;
    }

    .nav-logo-side img,
    .nav-logo-side-head img {
        height: 48px !important;
        max-height: 52px !important;
        width: auto !important;
        max-width: 220px !important;
        object-fit: contain !important;
        display: block !important;
    }

    /* Mobile Hamburger Menu Toggle Button */
    .mobile-nav-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
        border: none !important;
        color: #d4af37 !important;
        /* Gold hamburger icon color */
        font-size: 26px !important;
        cursor: pointer !important;
        padding: 6px 10px !important;
        line-height: 1 !important;
        outline: none !important;
        transition: color 0.3s ease !important;
    }

    .mobile-nav-toggle:hover {
        color: #0b2240 !important;
    }

    /* Mobile Navigation Dropdown Box */
    .nav-menu {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        flex-direction: column !important;
        background-color: #ffffff !important;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
        border-radius: 0 0 12px 12px !important;
        border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
        padding: 15px 20px !important;
        gap: 10px !important;
        max-height: calc(100vh - 70px) !important;
        overflow-y: auto !important;

        /* Hidden by default */
        opacity: 0 !important;
        visibility: hidden !important;
        transform: translateY(-10px) !important;
        transition: all 0.3s ease !important;
        pointer-events: none !important;
    }

    .navbar.is-open .nav-menu {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
        pointer-events: auto !important;
    }

    /* Disable native hover height conflicts on touch screens */
    .navbar:hover .nav-menu {
        opacity: 0;
        visibility: hidden;
    }

    .navbar.is-open:hover .nav-menu {
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Main level menu list items */
    .nav-menu>li {
        width: 100% !important;
        text-align: right !important;
        position: relative !important;
    }

    /* Main labels */
    .nav-menu>li>a {
        color: #0b2240 !important;
        font-size: 15px !important;
        padding: 10px 12px !important;
        display: block !important;
        border-bottom: none !important;
    }

    .nav-menu>li>a:hover,
    .nav-menu>li>a.active {
        color: #0056b3 !important;
        background-color: #f4f7f9 !important;
        border-radius: 8px !important;
    }

    /* ---------------------------------------------------------
       NESTED SUB-DROPDOWNS
       --------------------------------------------------------- */
    .dropdown-menu,
    .dropdown-menu-side {
        position: relative !important;
        top: 0 !important;
        right: 0 !important;
        width: 100% !important;
        min-width: 100% !important;
        box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.05) !important;
        border-top: none !important;
        border-right: 3px solid #cfa132 !important;
        background-color: #f8fafc !important;
        border-radius: 6px !important;
        padding: 5px 0 !important;
        margin-top: 4px !important;
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }

    .nav-menu>li.dropdown.mobile-open>.dropdown-menu,
    .dropdown-side.mobile-open>.dropdown-menu-side {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Child link configurations */
    .dropdown-menu li a,
    .dropdown-menu-side li a {
        padding: 8px 25px !important;
        font-size: 14px !important;
        color: #0b2240 !important;
        display: block !important;
    }

    .dropdown-menu li a:hover,
    .dropdown-menu-side li a:hover {
        background-color: var(--white) !important;
        color: var(--primary-blue) !important;
    }
}

/* Hero Portal Section */
.hero-slider {
    position: relative;
    margin: 100px 0 80px;
    min-height: 650px;
    overflow: hidden;
    display: block;
    /* Removing flex as slides handle content now */
}

.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease-in-out, visibility 0.8s ease-in-out;
    display: flex;
    align-items: center;
    text-align: right;
    z-index: 0;
}

.hero-slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 1;
}

.hero-video-bg,
.hero-img-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.8) 10%, rgba(255, 255, 255, 0) 75%);
    z-index: 1;
}

.hero-indicators {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 10;
}

.hero-indicators .indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--white);
    background-color: transparent;
    cursor: pointer;
    transition: background-color 0.3s;
}

.hero-indicators .indicator.active {
    background-color: var(--gold);
    border-color: var(--gold);
}

.hero-slider .container {
    width: 100%;
    position: relative;
    z-index: 2;
}

.hero-slide h1,
.hero-slide h2,
.hero-slide p,
.hero-slide .hero-action-grid {
    max-width: 480px;
    margin-right: auto;
    margin-left: 0;
}

.hero-slide h1 {
    color: var(--gold);
    font-size: 38px;
    font-weight: 900;
    margin-bottom: 8px;
    /* -webkit-text-stroke-width: .3px;
        -webkit-text-stroke-color: var(--text-muted); */
    text-shadow: 5px 5px 4px #0b2240;
}

.hero-slide h2 {
    color: var(--secondary-blue);
    font-size: 38px;
    font-weight: 900;
    margin-bottom: 8px;
    text-shadow: 5px 5px 4px var(--white);
}

.hero-slide h2.city-title {
    color: var(--primary-blue);
    font-size: 28px;
    margin-bottom: 25px;
}

.hero-slide p {
    color: var(--text-muted);
    font-size: 16px;
    margin-bottom: 40px;
    line-height: 1.8;
    font-weight: 500;
}

.center-text-slide h1,
.center-text-slide h2,
.center-text-slide p {
    text-align: center;
}

.center-text-slide h1,
.center-text-slide h2,
.center-text-slide h2.city-title {
    color: #000000;
    text-shadow: none !important;
}

.hero-slide .hero-action-grid {
    display: flex;
    justify-content: flex-start;
    gap: 15px;
    flex-wrap: wrap;
}

.hero-btn {
    padding: 14px 28px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.hero-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
    background-color: var(--gold);
    color: var(--white);
}

.btn-blue {
    background-color: var(--primary-blue);
    color: var(--white);
}

.btn-gold {
    background-color: var(--gold);
    color: var(--white);
}

.btn-white {
    background-color: var(--white);
    color: var(--primary-blue);
    border: 1px solid var(--border);
}

/* Generic Section Header styling */
.main-section-title {
    text-align: center;
    color: var(--primary-blue);
    font-size: 32px;
    font-weight: 800;
    margin: 60px 0 35px;
    position: relative;
}

.main-section-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background-color: var(--gold);
    margin: 10px auto 0;
    border-radius: 2px;
}

/* Information Grid Systems */
.info-grid-5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}

.info-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.info-card {
    background-color: var(--white);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 30px 20px;
    text-align: center;
    transition: all 0.3s ease;
}

.info-card:hover {
    border-color: var(--gold);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
    transform: scale(1.05);
}

.info-card i {
    font-size: 36px;
    color: var(--primary-blue);
    margin-bottom: 20px;
}

.info-card h3 {
    font-size: 18px;
    color: var(--primary-blue);
    margin-bottom: 12px;
    font-weight: 800;
}

.info-card p {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.6;
}

/* Journey Timeline */
.timeline-container {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin: 50px 0;
    padding: 0 10px;
}

.timeline-container::before {
    content: '';
    position: absolute;
    top: 40px;
    left: 40px;
    right: 40px;
    height: 2px;
    background: repeating-linear-gradient(to right, transparent, transparent 4px, var(--border) 4px, var(--border) 12px);
    z-index: 1;
}

.timeline-step {
    text-align: center;
    position: relative;
    z-index: 2;
    flex: 1;
}

.step-num {
    font-size: 13px;
    font-weight: 800;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.step-circle {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background-color: var(--white);
    border: 2px solid var(--primary-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    color: var(--primary-blue);
    font-size: 16px;
    transition: all 0.3s;
}

.step-circle a {
    color: var(--primary-blue);
}

.timeline-step:hover .step-circle {
    background-color: var(--gold);
    color: var(--white);
    transform: scale(1.1);
    border-color: var(--border);
}

.step-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--primary-blue);
}

/* Priority Sectors Horizonal Bar */
.sectors-bar {
    display: flex;
    justify-content: space-between;
    background-color: var(--bg-gray);
    padding: 20px;
    border-radius: 10px;
    border: 1px solid var(--border);
    margin-bottom: 40px;
}

.sector-node {
    text-align: center;
    flex: 1;
}

.sector-node i {
    font-size: 24px;
    color: var(--primary-blue);
    margin-bottom: 8px;
}

.sector-node i:hover {
    font-size: 24px;
    color: var(--gold);
    transform: scale(1.1);
    margin-bottom: 8px;
}


.sector-node p {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-blue);
}

/* Investment Opportunities Grid */
.filters-row {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 25px;
}

.filters-row select,
.filters-btn {
    padding: 10px 15px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background-color: var(--white);
    font-size: 14px;
    color: var(--text-dark);
    font-weight: 500;
    flex: 1;
}

.filters-btn {
    background-color: var(--primary-blue);
    color: var(--white);
    text-align: center;
    max-width: 120px;
    cursor: pointer;
    border: none;
    font-weight: 700;
}

.filters-btn:hover {
    background-color: var(--gold);
    transform: scale(1.1);
}


.opportunity-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
    display: flex;
    flex-direction: column;
}

.opp-img-wrap {
    position: relative;
    height: 180px;
}

.opp-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.opp-badge {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background-color: var(--secondary-blue);
    color: var(--white);
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
}

.opp-content {
    padding: 20px;
    text-align: center;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.opp-content h4 {
    color: var(--gold);
    font-size: 16px;
    font-weight: 800;
    margin-bottom: 10px;
}

.opp-meta {
    font-size: 13px;
    color: var(--primary-blue);
    margin-bottom: 5px;
}

.opp-cost {
    font-size: 14px;
    color: var(--text-muted);
    font-weight: 700;
    margin-top: 5px;
    margin-bottom: 15px;
}

.opp-details-btn {
    background-color: var(--primary-blue);
    color: var(--white);
    text-decoration: none;
    padding: 10px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 700;
    display: block;
    transition: background 0.2s;
}

.opp-details-btn:hover {
    background-color: var(--gold);
    transform: scale(1.05);
}

/* Aden Free Zone Split Section */
.free-zone-banner {
    background-color: var(--bg-gray);
    border-radius: 12px;
    border: 1px solid var(--border);
    margin: 60px 0;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
}

.fz-info-panel {
    padding: 45px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.fz-badge {
    color: var(--gold);
    font-weight: 800;
    font-size: 16px;
    margin-bottom: 10px;
}

.fz-info-panel h3 {
    color: var(--primary-blue);
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 15px;
}

.fz-info-panel p {
    color: var(--secondary-blue);
    font-size: 14px;
    line-height: 1.8;
    margin-bottom: 20px;
}

.fz-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 25px;
    list-style: none;
}

.fz-features li {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-blue);
    display: flex;
    align-items: center;
    gap: 8px;
}

.fz-features li::before {
    content: '\2022';
    color: var(--gold);
    font-size: 18px;
}

.fz-btn {
    align-self: start;
    background-color: var(--primary-blue);
    color: var(--white);
    padding: 12px 30px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
}

.fz-btn:hover {
    background-color: var(--gold);
    transform: scale(1.1);
}

.fz-media-panel {
    position: relative;
    min-height: 320px;
}

.fz-media-panel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Combined Feed Section (Success Stories & Announcements) */
.feeds-layout {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 40px;
    margin-bottom: 60px;
}

.feed-column-title {
    color: var(--primary-blue);
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 20px;
    border-right: 4px solid var(--gold);
    padding-right: 12px;
}

.stories-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.story-card {
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
    text-align: center;
    background: var(--white);
}

.story-card img {
    width: 100%;
    height: 110px;
    object-fit: cover;
}

.story-card h5 {
    font-size: 12px;
    font-weight: 800;
    padding: 10px 5px;
    color: var(--primary-blue);
}

.story-location {
    font-size: 11px;
    color: var(--text-muted);
    padding-bottom: 10px;
}

.news-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.news-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px dashed var(--border);
}

.news-date {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
    white-space: nowrap;
}

.news-headline {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-blue);
    text-decoration: none;
    padding-right: 15px;
    padding-left: 0;
}

.news-headline:hover {
    color: var(--secondary-blue);
}

/* Footer Infrastructure */
.pre-footer-contacts {
    background-color: var(--white);
    padding: 30px 0;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.contact-nodes {
    display: flex;
    gap: 40px;
}

.node {
    display: flex;
    align-items: center;
    gap: 12px;
}

.node i {
    font-size: 24px;
    color: var(--primary-blue);
}

.node a {
    color: var(--gray);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
}

.node-text strong {
    display: block;
    font-size: 13px;
    color: var(--primary-blue);
}

.node-text span {
    font-size: 14px;
    color: var(--text-muted);
}

.social-cluster a {
    font-size: 20px;
    color: var(--primary-blue);
    margin-left: 12px;
    margin-right: 0;
    text-decoration: none;
}

.base-footer {
    background-color: var(--primary-blue);
    color: var(--white);
    padding: 50px 0 20px;
}

.footer-grid-structure {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
    gap: 40px;
    margin-bottom: 40px;
}

.footer-block h4 {
    color: var(--white);
    font-size: 16px;
    font-weight: 800;
    margin-bottom: 20px;
    position: relative;
}

.footer-block h4::after {
    content: '';
    display: block;
    width: 30px;
    height: 2px;
    background-color: var(--gold);
    margin-top: 8px;
}

.footer-block ul {
    list-style: none;
}

.footer-block ul li {
    margin-bottom: 10px;
}

.footer-block ul li a {
    color: #b0c4de;
    text-decoration: none;
    font-size: 13px;
    transition: color 0.2s;
}

.footer-block ul li a:hover {
    color: var(--white);
}

.footer-block p {
    font-size: 13px;
    color: #b0c4de;
    margin-bottom: 12px;
    align-content: 1.6;
}

.footer-map-block {
    display: flex;
    flex-direction: column;
}

.footer-map-card {
    position: relative;
    width: 100%;
    height: 210px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.18);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.footer-map-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.35);
}

.footer-map-card iframe {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 16px;
    display: block;
}

.map-overlay-btn {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 10;
    background: #ffffff;
    color: #0056cc !important;
    text-decoration: none !important;
    padding: 7px 14px;
    border-radius: 10px;
    font-size: 0.83rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    transition: all 0.25s ease;
}

html[dir="rtl"] .map-overlay-btn {
    left: 12px;
    right: auto;
}

.map-overlay-btn:hover {
    background: #f8fafc;
    color: #0b63a9 !important;
    transform: scale(1.04);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.map-overlay-btn i {
    font-size: 0.78rem;
}

.legal-row {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 12px;
    color: #b0c4de;
}

/* Responsive Breakpoints */
@media (max-width: 1024px) {

    .info-grid-5,
    .info-grid-4,
    .stories-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .sectors-bar {
        flex-wrap: wrap;
        gap: 15px;
    }

    .free-zone-banner,
    .feeds-layout,
    .footer-grid-structure {
        grid-template-columns: 1fr;
    }

    .timeline-container {
        flex-direction: column;
        gap: 25px;
    }

    .timeline-container::before {
        display: none;
    }
}

/* ظ…ظ† ظ‡ظ†ط§ ط¨ط¯ط§ظٹط© ط³طھط§ظٹظ„ ظ‚طµطµ ط§ظ„ظ†ط¬ط§ط­ */
/* success stories css */
/* ط§ظ„ط®ظ„ظپظٹط© ط§ظ„ط¯ط§ظƒظ†ط© ظˆطھظ†ط³ظٹظ‚ ط§ظ„ط­ط§ظˆظٹط© ظ„ظ‚ط³ظ… ط§ظ„ط³ظ„ط§ظٹط¯ط± ط§ظ„ظ…ط·ظˆط± */
/* .success-stories-slider-section {
    background: radial-gradient(circle at center, #072a30 0%, #031418 100%);
    padding: 80px 0;
    overflow: hidden;
    direction: rtl;
} */

.slider-section-title {
    text-align: center;
    color: #000000;
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 30px;
}

/* ظپظ„ط§طھط± ط§ظ„ط£ط²ط±ط§ط± ط§ظ„ط¯ط§ط¦ط±ظٹط© (Pills) */
.stories-filters-pills {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 50px;
}

.filter-pill {
    background: transparent;
    color: var(--primary-blue);
    border: 1px solid var(--primary-blue);
    padding: 8px 20px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.filter-pill:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--gold);
    color: var(--gold);
    box-shadow: 0 0 10px var(--gold);
}

/* ط­ط§ظˆظٹط© ط§ظ„طھط±ط§ظƒظ… ظˆط¹ط±ط¶ ط§ظ„ظƒط±ظˆطھ ط§ظ„ظ‡ظٹظƒظ„ظٹ */
.stories-stacked-slider-container {
    position: relative;
    max-width: 1050px;
    height: 420px;
    margin: 0 auto;
}

.stories-slider-viewport {
    position: relative;
    width: 100%;
    height: 100%;
}

/* ط§ظ„ظƒط§ط±طھ ط§ظ„ط£ط³ط§ط³ظٹ ط¨طھطµظ…ظٹظ… ظ…ط¯ظ…ط¬ (ظپظٹط¯ظٹظˆ ظٹط³ط§ط± / ظ†طµ ظٹظ…ظٹظ†) */
.story-slider-card {
    position: absolute;
    top: 0;
    left: 0;
    /* ظ…ط±طھظƒط¨ ظ…ظ† ط§ظ„ظٹط³ط§ط± ظ„طھطھط±ظƒ ظ…ط³ط§ط­ط© ظ„ظ„ط¨ط·ط§ظ‚ط§طھ ط§ظ„ظ…طھط±ط§ظƒظ…ط© ط¹ظ„ظ‰ ط§ظ„ظٹظ…ظٹظ† ط®ظ„ظپظ‡ */
    width: 82%;
    height: 100%;
    background: var(--primary-blue);
    /* linear-gradient(135deg, var(--light-blue) 0%, var(--primary-blue) 100%); */
    border: 2px solid var(--border);
    border-radius: 20px;
    display: flex;
    flex-direction: row;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);

    /* ط¥ط¹ط¯ط§ط¯ط§طھ ط­ط±ظƒط© ط§ظ„ط§ظ†طھظ‚ط§ظ„ ط§ظ„ط³ظ„ط³ط© ظ„ظ„ط·ط¨ظ‚ط§طھ */
    opacity: 0;
    pointer-events: none;
    transform: scale(0.85) translateX(150px);
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.6s ease, z-index 0.6s ease;
    z-index: 1;
}

/* ط§ظ„طھظˆط²ظٹط¹ ط§ظ„ط¯ط§ط®ظ„ظٹ ظ„ظ„ظƒط§ط±طھ (ظپظٹط¯ظٹظˆ ظٹظ…ظٹظ†طŒ ظ†طµ ظٹط³ط§ط±طŒ ط£ظˆ ط§ظ„ط¹ظƒط³ ط­ط³ط¨ ط§ظ„طµظˆط±ط©) */
.story-card-media-side {
    width: 48%;
    height: 100%;
    position: relative;
}

.story-card-media-side img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 65px;
    color: #ffffff;
    cursor: pointer;
    transition: transform 0.3s ease, color 0.3s ease;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

.video-play-overlay:hover {
    transform: translate(-50%, -50%) scale(1.1);
    color: var(--gold);
}

.media-corner-tag {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(0, 0, 0, 0.6);
    color: #ffffff;
    padding: 6px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    backdrop-filter: blur(5px);
    border: 1px solid var(--border);
}

.story-card-info-side {
    width: 52%;
    padding: 45px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #ffffff;
    text-align: right;
}

.story-card-info-side h3 {
    font-size: 26px;
    font-weight: 800;
    color: var(--gold);
    margin-bottom: 10px;
}

.story-card-info-side h4 {
    font-size: 15px;
    font-weight: 500;
    color: var(--light-blue);
    margin-bottom: 20px;
}

.story-card-info-side p {
    font-size: 14px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.85);
}

/* ط§ظ„طھط­ظƒظ… ط¨ط§ظ„ط·ط¨ظ‚ط§طھ ط§ظ„ظ…طھط±ط§ظƒظ…ط© ط¹ط¨ط± ط­ط§ظ„ط§طھ ط§ظ„ظƒظ„ط§ط³ط§طھ ط§ظ„ط¯ظٹظ†ط§ظ…ظٹظƒظٹط© (ط§ظ„ط³ط± ط§ظ„ط¨طµط±ظٹ ظ„ظ„طµظˆط±ط©) */
.story-slider-card.active {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1) translateX(0);
    z-index: 10;
}

.story-slider-card.next-1 {
    opacity: 0.85;
    transform: scale(0.95) translateX(7%) translateY(0);
    z-index: 9;
}

.story-slider-card.next-2 {
    opacity: 0.65;
    transform: scale(0.90) translateX(14%) translateY(0);
    z-index: 8;
}

.story-slider-card.next-3 {
    opacity: 0.35;
    transform: scale(0.85) translateX(21%) translateY(0);
    z-index: 7;
}

/* ط´ط±ظٹط· ط§ظ„طھط­ظƒظ… ط§ظ„ط³ظپظ„ظٹ ظˆط§ظ„ظ…ط¤ط´ط±ط§طھ (Progress Bar Grid) */
.slider-navigation-control-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    margin-top: 45px;
    padding-bottom: 50px;
}

.nav-arrow-link {
    background: transparent;
    border: none;
    color: var(--primary-blue);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: color 0.3s ease;
}

.nav-arrow-link:hover {
    color: var(--gold);
}

.slider-linear-progress-indicator {
    display: flex;
    gap: 8px;
}

.slider-linear-progress-indicator .dash-segment {
    width: 35px;
    height: 3px;
    background: var(--primary-blue);
    border-radius: 2px;
    transition: background-color 0.4s ease;
}

.slider-linear-progress-indicator .dash-segment.active {
    background: var(--light-blue);
    box-shadow: 0 0 8px var(--light-blue);
}

/* ط²ط± ط¹ط±ط¶ ط¬ظ…ظٹط¹ ط§ظ„ظ‚طµطµ */
.view-all-stories-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 35px;
}

.view-all-stories-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #ffffff;
    padding: 12px 35px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
}

.view-all-stories-btn:hover {
    border-color: var(--border);
    background: rgba(0, 188, 188, 0.1);
    color: #00f3f3;
}

/* ط§ظ„طھط¬ط§ظˆط¨ ط§ظ„ط¨ط±ظ…ط¬ظٹ ظ„ظ„ط´ط§ط´ط§طھ ط§ظ„طµط؛ظٹط±ط© */
@media (max-width: 992px) {
    .stories-stacked-slider-container {
        height: auto;
    }

    .story-slider-card {
        position: relative;
        width: 100%;
        flex-direction: column;
        height: auto;
        margin-bottom: 20px;
        opacity: 1;
        display: none;
        transform: none !important;
    }

    .story-slider-card.active {
        display: flex;
    }

    .story-card-media-side,
    .story-card-info-side {
        width: 100%;
    }

    .story-card-media-side {
        height: 240px;
    }

    .story-card-info-side {
        padding: 25px;
    }
}

/* ط§ظ„ظ‰ ظ‡ظ†ط§ ط³طھط§ظٹظ„ ظ‚طµطµ ط§ظ„ظ†ط¬ط§ط­ */

/* slider from chatgpt */
/* * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Cairo', sans-serif;
    background: #edf3f4;
    overflow-x: hidden;
} */

.news-swiper-slider {
    background-color: var(--bg-gray);
    border-radius: 12px;
    border: 1px solid var(--border);
    margin: 60px 0;
    overflow: hidden;
    /* display: grid; */
    /* grid-template-columns: 1.2fr 1fr; */
    align-items: center;
    justify-content: center;
}

/* .news-swiper-slider * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
} */

.news-swiper-slider body {
    font-family: 'Cairo', sans-serif;
    background: #edf3f4;
    overflow-x: hidden;
}

/* SECTION */

.news-section {
    width: 100%;
    /* min-height: 100vh; */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px;
    gap: 60px;
}

/* RIGHT CONTENT */

.news-content {
    width: 90%;
}

.news-content h1 {
    font-size: 58px;
    line-height: 1.2;
    margin-bottom: 20px;
    font-weight: 700;
    color: var(--primary-blue);
}

.news-content p {
    font-size: 28px;
    color: #000000;
    line-height: 1.8;
    margin-bottom: 40px;
}

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 40px;
}

.tags span {
    background: #fff;
    padding: 12px 22px;
    border-radius: 30px;
    font-size: 16px;
    color: #555;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 360px;
    height: 62px;
    border-radius: 50px;
    background: var(--primary-blue);
    color: #fff;
    text-decoration: none;
    font-size: 20px;
    font-weight: 600;
    transition: 0.3s;
}

.btn:hover {
    background: var(--gold);
    transform: translateY(-2px);
}

/* SLIDER */

.slider-wrapper {
    width: 420px;
    height: 650px;
    overflow: hidden;
    position: relative;
    mask-image: linear-gradient(to bottom,
            transparent,
            black 10%,
            black 90%,
            transparent);
}

.slider-track {
    display: flex;
    flex-direction: column;
    gap: 22px;
    animation: scrollUp 20s linear infinite;
}

.slider-wrapper:hover .slider-track {
    animation-play-state: paused;
}



@keyframes scrollUp {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-50%);
    }
}

/* CARD IN NEWS SLIDER */

.news-section .news-card {
    position: relative;
    display: block;
    width: 100%;
    height: 330px;
    border-radius: 22px;
    overflow: hidden;
    flex-shrink: 0;
    cursor: pointer;
    border: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.news-section .news-card img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.news-section .news-card:hover img {
    transform: scale(1.08);
}

.news-section .news-card .overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
            rgba(0, 0, 0, 0.95) 0%,
            rgba(0, 0, 0, 0.55) 55%,
            rgba(0, 0, 0, 0.15) 100%);
    z-index: 1;
    pointer-events: none;
}

.news-section .news-card .card-content {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 2;
    padding: 22px 24px;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: #fff;
    text-align: inherit;
    background: transparent;
}

.news-section .news-card .card-content h3 {
    font-size: 20px;
    line-height: 1.35;
    margin-top: 0;
    margin-bottom: 8px;
    color: #F6A400;
    font-weight: 700;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.news-section .news-card .card-content p {
    font-size: 13.5px;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.5;
    margin-bottom: 10px;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    width: 100%;
    max-height: 3.1em;
}

.news-section .news-card .card-content .card-date {
    margin-top: 2px;
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.75);
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
}

/* RESPONSIVE */

@media(max-width:1200px) {

    .news-section {
        flex-direction: column;
    }

    .news-content {
        width: 100%;
        text-align: center;
    }

    .tags {
        justify-content: center;
    }

}

@media(max-width:600px) {

    .news-content h1 {
        font-size: 42px;
    }

    .news-content p {
        font-size: 20px;
    }

    .slider-wrapper {
        width: 100%;
        height: 550px;
    }

    .btn {
        width: 100%;
    }

}

/* Statistics Cards */
/* ط­ط§ظˆظٹط© ط´ط¨ظƒط© ط§ظ„ط¨ط·ط§ظ‚ط§طھ ط§ظ„ط¥ط­طµط§ط¦ظٹط© ط§ظ„ط±ط¦ظٹط³ظٹط© */
.investment-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    /* طھظˆط²ظٹط¹ ظ…ط±ظ† ظ…ط±ظƒط¨ ظٹطھظƒظٹظپ ظ…ط¹ ظƒط§ظپط© ط§ظ„ط£ط¬ظ‡ط²ط© */
    gap: 20px;
    max-width: 1400px;
    margin: 0 auto 25px auto;
    direction: rtl;
    /* ظ…ط­ط§ط°ط§ط© ط¹ط±ط¨ظٹط© ظƒط§ظ…ظ„ط© */
    box-sizing: border-box;
    margin-top: 20px;
}

/* طھطµظ…ظٹظ… ظƒط±طھ ط§ظ„ط¥ط­طµط§ط، ط§ظ„ظ…ظپط±ط¯ ظˆط§ظ„ظ…ط·ظˆط± */
.stat-display-card {
    background-color: var(--primary-blue);
    border: 1px solid #edf2f7;
    border-radius: 16px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: 0 4px 12px var(--shadow-color);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

/* طھط£ط«ظٹط± ط§ظ„طµط¹ظˆط¯ ظˆط§ظ„ط¸ظ„ط§ظ„ ط§ظ„ظپط§ط®ط±ط© ط¹ظ†ط¯ طھظ…ط±ظٹط± ط§ظ„ظ…ط§ظˆط³ */
.stat-display-card:hover {
    background-color: var(--gold);
    transform: translateY(-4px);
    box-shadow: 0 12px 20px rgba(16, 42, 67, 0.06);
    border-color: #e2e8f0;
}

/* طھطµظ…ظٹظ… ط¯ط§ط¦ط±ط© ط§ظ„ط£ظٹظ‚ظˆظ†ط© ط§ظ„ظ…ط²ظˆط¯ط© ط¨ظ„ظ…ط³ط© طھط¯ط±ط¬ ظ†ط§ط¹ظ…ط© ظ…طھظˆط§ظپظ‚ط© ظ…ط¹ ط§ظ„ظ‡ظˆظٹط© */
.card-icon-container {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    /* ط²ظˆط§ظٹط§ ط¯ط§ط¦ط±ظٹط© ظ†ط§ط¹ظ…ط© طھط­ط§ظƒظٹ ط§ظ„ط·ط§ط¨ط¹ ط§ظ„ط¹طµط±ظٹ ظ„ظ„ظ…ظ†طµط§طھ ط§ظ„ط§ط³طھط«ظ…ط§ط±ظٹط© */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}

/* ط§ظ„طھظ†ط§ط؛ظ… ط§ظ„ظ„ظˆظ†ظٹ ظ„ط®ظ„ظپظٹط§طھ ط§ظ„ط£ظٹظ‚ظˆظ†ط§طھ ط§ظ„ظ…ط£ط®ظˆط°ط© ظ…ط¨ط§ط´ط±ط© ظ…ظ† ظ‡ظˆظٹط© ظ…ظˆظ‚ط¹ ط§ط³طھط«ظ…ط± */
.teal-gradient-bg {
    background: linear-gradient(135deg, #e0f7f8 0%, #b2ebec 100%);
    color: #009da1;
    /* ط§ظ„ظپظٹط±ظˆط²ظٹ ظ„ظ„ظ…ظ†ط§ط·ظ‚ ظˆط§ظ„ظ…ط´ط§ط±ظٹط¹ ط§ظ„ظ†ط´ط·ط© */
}

.blue-gradient-bg {
    background: linear-gradient(135deg, #e6f0fa 0%, #bcd6f2 100%);
    color: #102a43;
    /* ط§ظ„ظƒط­ظ„ظٹ ط§ظ„ط¯ط§ظƒظ† ظ„ظ„ط®ظ„ظپظٹط§طھ ظˆط§ظ„ط®ط±ظٹط·ط© ط§ظ„ط±ط³ظ…ظٹط© */
}

.gold-gradient-bg {
    background: linear-gradient(135deg, #fef6e7 0%, #fbe3b5 100%);
    color: #d9a74a;
    /* ط§ظ„ط°ظ‡ط¨ظٹ ط§ظ„ط§ط³طھط«ظ…ط§ط±ظٹ ط§ظ„ط£ظ†ظٹظ‚ ظ„ظ„ط´ط§ط±ط§طھ ظˆط§ظ„ط£ط±ظ‚ط§ظ… */
}

.purple-gradient-bg {
    background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%);
    color: #7c3aed;
    /* ط§ظ„ط¨ظ†ظپط³ط¬ظٹ ط§ظ„ظ…ظƒظ…ظ„ ظ„ظ„ظ…ط¤ط´ط±ط§طھ ط§ظ„ط¹ط§ظ…ط© */
}

/* ط§ظ„طھظ†ط³ظٹظ‚ ط§ظ„ط¯ط§ط®ظ„ظٹ ظ„ظ„ظ†طµظˆطµ ظˆط§ظ„ط£ط±ظ‚ط§ظ… */
.card-stat-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* ط§ظ„ط£ط±ظ‚ط§ظ… ط§ظ„ط¶ط®ظ…ط© ط§ظ„ط¬ط§ط°ط¨ط© ظ„ط¹ظٹظ† ط§ظ„ظ…ط³طھط«ظ…ط± */
.card-main-number {
    font-size: 32px;
    font-weight: 800;
    color: #ffffff;
    /* ظƒط­ظ„ظٹ ط§ظ„ظ‡ظˆظٹط© ط§ظ„ط¯ط§ظƒظ† ظ„ط±ظپط¹ ظ…ط³طھظˆظ‰ ط§ظ„طھط¨ط§ظٹظ† ظˆط§ظ„ظ‚ط±ط§ط،ط© */
    font-family: 'Cairo', sans-serif;
    margin: 0;
    line-height: 1;
    letter-spacing: -0.5px;
    align-self: right;
    margin-left: auto;
    text-align: right;
}

/* ط§ظ„ط¹ظ†ط§ظˆظٹظ† ظˆط§ظ„طھظˆطµظٹظپط§طھ ط§ظ„طھظˆط¶ظٹط­ظٹط© ط£ط³ظپظ„ ط§ظ„ط£ط±ظ‚ط§ظ… */
.card-secondary-label {
    font-size: 14px;
    color: #e2e3e4;
    /* ط±ظ…ط§ط¯ظٹ ظ†ط§ط¹ظ… ظ…ط±ظٹط­ ظ„ظ„ط¹ظٹظ† */
    font-weight: 600;
    margin: 0;
    line-height: 1.4;
}

/* ظ…طھط¬ط§ظˆط¨ ط¨ط§ظ„ظƒط§ظ…ظ„ ظ…ط¹ ط§ظ„ط£ط¬ظ‡ط²ط© ط§ظ„ظ„ظˆط­ظٹط© ظˆط§ظ„ظ…ط­ظ…ظˆظ„ */
@media (max-width: 640px) {
    .investment-stats-grid {
        grid-template-columns: 1fr;
        /* طھط­ظˆظٹظ„ ط§ظ„ط´ط¨ظƒط© ظ„ط¹ظ…ظˆط¯ ظˆط§ط­ط¯ ط¹ظ†ط¯ ط§ظ„ط¹ط±ط¶ ط¹ظ„ظ‰ ط§ظ„ظ‡ظˆط§طھظپ */
        padding: 0 15px;
    }

    .stat-display-card {
        padding: 20px;
    }

    .card-main-number {
        font-size: 28px;
    }
}

/* end Statistics Cards */

/* soical_media _icons */
.wrapper .icon {
    position: relative;
    background-color: var(--primary-blue);
    border-radius: 50%;
    margin: 10px;
    width: 50px;
    height: 50px;
    font-size: 22px;

    /* ط§ظ„طھط¹ط¯ظٹظ„ ط§ظ„ط³ط­ط±ظٹ ظ„ظ„طھظ…ط±ظƒط² ط§ظ„ط¯ظ‚ظٹظ‚ */
    display: inline-flex;
    /* طھط­ظˆظٹظ„ ط§ظ„ط­ط§ظˆظٹط© ط¥ظ„ظ‰ inline-flex ط¨ط¯ظ„ط§ظ‹ ظ…ظ† inline-block */
    align-items: center;
    /* ط³ظ†طھط± ط¹ظ…ظˆط¯ظٹ ط­ظ‚ظٹظ‚ظٹ */
    justify-content: center;
    /* ط³ظ†طھط± ط£ظپظ‚ظٹ ط­ظ‚ظٹظ‚ظٹ */

    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    color: #ffffff;
    text-decoration: none;
    padding: 0;
    /* ط¥ظ„ط؛ط§ط، ط£ظٹ ط­ط´ظˆ ط¯ط§ط®ظ„ظٹ ظ‚ط¯ ظٹط³ط¨ط¨ ط§ظ†ط²ظٹط§ط­ */
    box-sizing: border-box;
}

/* ط¥ط¶ط§ظپط© ظ‡ط°ط§ ط§ظ„ظ…ط­ط¯ط¯ ظ„ط¶ظ…ط§ظ† ط¥ظ„ط؛ط§ط، ط£ظٹ ط§ط±طھظپط§ط¹ ط³ط·ط± ط§ظپطھط±ط§ط¶ظٹ ظ„ظ„ط£ظٹظ‚ظˆظ†ط© ظ†ظپط³ظ‡ط§ */
.wrapper .icon i {
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wrapper .tooltip {
    position: absolute;
    top: 0;
    line-height: 1.5;
    font-size: 14px;
    background-color: #ffffff;
    color: #ffffff;
    padding: 5px 8px;
    border-radius: 5px;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* ظ…ظٹط²ط§ظ† ظ„طھظˆط³ظٹط· ط§ظ„طھظˆظ„ طھظٹط¨ ط¨ط¯ظ‚ط© ظپظˆظ‚ ط§ظ„ط¯ط§ط¦ط±ط© */
    left: 50%;
    transform: translateX(-50%);
}

.wrapper .tooltip::before {
    position: absolute;
    content: "";
    height: 8px;
    width: 8px;
    background-color: #ffffff;
    bottom: -3px;
    left: 50%;
    transform: translate(-50%) rotate(45deg);
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.wrapper .icon:hover .tooltip {
    top: -45px;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.wrapper .icon:hover span,
.wrapper .icon:hover .tooltip {
    text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1);
}

.wrapper .facebook:hover,
.wrapper .facebook:hover .tooltip,
.wrapper .facebook:hover .tooltip::before {
    background-color: #3b5999;
    color: #ffffff;
}

.wrapper .x-twitter:hover,
.wrapper .x-twitter:hover .tooltip,
.wrapper .x-twitter:hover .tooltip::before {
    background-color: #000000;
    color: #ffffff;
}

.wrapper .instagram:hover,
.wrapper .instagram:hover .tooltip,
.wrapper .instagram:hover .tooltip::before {
    background-color: #e1306c;
    color: #ffffff;
}

.wrapper .linkedin:hover,
.wrapper .linkedin:hover .tooltip,
.wrapper .linkedin:hover .tooltip::before {
    background-color: #0A66C2;
    color: #ffffff;
}

.wrapper .youtube:hover,
.wrapper .youtube:hover .tooltip,
.wrapper .youtube:hover .tooltip::before {
    background-color: #de463b;
    color: #ffffff;
}

/* --------------------------------------------------
           طھظ†ط³ظٹظ‚ ظ‚ط³ظ… ط§ظ„ط®ط¯ظ…ط§طھ ط§ظ„ط§ط³طھط«ظ…ط§ط±ظٹط© (Services Grid)
           -------------------------------------------------- */
/* --------------------------------------------------
           طھظ†ط³ظٹظ‚ ظƒط±ظˆطھ ط§ظ„ط®ط¯ظ…ط§طھ ط§ظ„ط§ط³طھط«ظ…ط§ط±ظٹط© ط§ظ„ظ…طھط·ظˆط±ط© (Shape Shifting)
           -------------------------------------------------- */
/* --------------------------------------------------
           طھظ†ط³ظٹظ‚ ظƒط±ظˆطھ ط§ظ„ط®ط¯ظ…ط§طھ ط§ظ„ط§ط³طھط«ظ…ط§ط±ظٹط© ط§ظ„ظ…طھط·ظˆط±ط© (ط§ظ„ط­ط±ظƒظٹط© ط§ظ„ظ…ط±ظ†ط©)
           -------------------------------------------------- */
/* --------------------------------------------------
           طھظ†ط³ظٹظ‚ ظƒط±ظˆطھ ط§ظ„ط®ط¯ظ…ط§طھ ط§ظ„ط§ط³طھط«ظ…ط§ط±ظٹط© (ط¥ط®ظپط§ط، ط§ظ„ظ†طµ ظˆط¥ط¸ظ‡ط§ط±ظ‡ ط¹ظ†ط¯ ط§ظ„ظ€ Hover)
           -------------------------------------------------- */
.invest-services-section {
    background-color: #f8fafc;
    padding: 80px 6%;
    width: 100%;
}

.invest-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 40px;
    direction: rtl;
}

/* ط§ظ„ظƒط±طھ ظپظٹ ط§ظ„ط­ط§ظ„ط© ط§ظ„ط§ظپطھط±ط§ط¶ظٹط© */
.invest-card {
    background-color: var(--primary-blue);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 30px 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* ًںŒں طھط¹ط¯ظٹظ„: طھظˆط³ظٹط· ط§ظ„ظ…ط­طھظˆظ‰ ط¹ظ…ظˆط¯ظٹط§ظ‹ طھظ…ط§ظ…ط§ظ‹ ظ„ط£ظ† ط§ظ„ظ†طµ ظ…ط®ظپظٹ ط§ظ„ط¢ظ† */
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    min-height: 260px;
    /* طھظ… طھظ‚ظ„ظٹظ„ ط§ظ„ط§ط±طھظپط§ط¹ ظ‚ظ„ظٹظ„ط§ظ‹ ظ„ظٹظ†ط§ط³ط¨ ط§ظ„ظ…ط¸ظ‡ط± ط§ظ„ظ…ط±ط¨ط¹ ط§ظ„ظ†ط¸ظٹظپ */
    transition: flex 0.45s cubic-bezier(0.4, 0, 0.2, 1),
        background-color 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}


/* طھط­ظˆظٹظ„ ط§ظ„طھظˆط²ظٹط¹ ط¥ظ„ظ‰ ط£ظپظ‚ظٹ ظ…ط±ظ† ظپظٹ ط§ظ„ط´ط§ط´ط§طھ ط§ظ„ظƒط¨ظٹط±ط© */
@media (min-width: 1200px) {
    .invest-grid {
        flex-direction: row;
        align-items: stretch;
    }

    .invest-card {
        flex: 1;
        /* ط§ظ„ظƒط±ظˆطھ طھط¨ط¯ط£ ط¨ط­ط¬ظ… ظ…ط±ط¨ط¹ ظ…طھط³ط§ظˆظچ */
    }

    /* طھظ…ط¯ط¯ ط§ظ„ظƒط±طھ ط¥ظ„ظ‰ ظ…ط³طھط·ظٹظ„ ط¹ظ†ط¯ طھظ…ط±ظٹط± ط§ظ„ظ…ط§ظˆط³ */
    .invest-card:hover {
        flex: 2.5;
        background-color: var(--gold-l) !important;
        border-color: var(--light-blue) !important;
        box-shadow: 0 20px 40px rgba(29, 99, 184, 0.2);
        justify-content: flex-start;
        /* ط¯ظپط¹ ط§ظ„ظ…ط­طھظˆظ‰ ظ„ط£ط¹ظ„ظ‰ ظ„ظٹط³ظ…ط­ ط¨ظ†ط²ظˆظ„ ط§ظ„ظ†طµ */
        padding-top: 40px;
    }
}

/* ط²ط± ط§ظ„طھظˆط³ظٹط¹ ط§ظ„ط±ظ…ط§ط¯ظٹ ط§ظ„طµط؛ظٹط± */
.invest-card .expand-btn {
    position: absolute;
    top: 15px;
    left: 15px;
    width: 24px;
    height: 24px;
    background-color: #f2f4f7;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #98a2b3;
    font-size: 11px;
    transition: all 0.3s ease;
}

/* ط§ظ„ظ‡ظٹط¯ط± ط§ظ„ط§ظپطھط±ط§ط¶ظٹ */
.invest-card-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    width: 100%;
    transition: all 0.35s ease;
}

.invest-card .icon-box {
    font-size: 36px;
    color: var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.invest-card h3 {
    font-size: 18px;
    color: var(--gold);
    font-weight: 700;
    margin: 0;
    line-height: 1.4;
    transition: all 0.3s ease;
}

/* ًںŒں طھط¹ط¯ظٹظ„ ط§ظ„ظ‚ط§ط¦ظ…ط©: ظ…ط®ظپظٹط© طھظ…ط§ظ…ط§ظ‹ ظˆط¨ط¯ظˆظ† ط£ط¨ط¹ط§ط¯ ظپظٹ ط§ظ„ط­ط§ظ„ط© ط§ظ„ط§ظپطھط±ط§ط¶ظٹط© ًںŒں */
.invest-card .bullet-list {
    list-style-type: disc;
    padding-right: 20px;
    margin: 0;
    text-align: right;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;

    /* ط§ظ„طھط¹ط¯ظٹظ„ ط§ظ„ط³ط­ط±ظٹ ظ„ظ„ط¥ط®ظپط§ط، ط§ظ„طھط§ظ… */
    max-height: 0;
    /* طھط¬ط¹ظ„ ط§ظ„ط§ط±طھظپط§ط¹ طµظپط± ظپظ„ط§ طھط£ط®ط° ط£ظٹ ظ…ط³ط§ط­ط© */
    opacity: 0;
    /* ط§ط®طھظپط§ط، ظ„ظˆظ†ظٹ ظƒط§ظ…ظ„ */
    visibility: hidden;
    /* طھظ…ظ†ط¹ ط§ظ„ظ…طھطµظپط­ ظˆظ‚ط§ط±ط¦ط§طھ ط§ظ„ط´ط§ط´ط© ظ…ظ† ط±طµط¯ظ‡ط§ ظˆظ‡ظٹ ظ…ط®ظپظٹط© */
    overflow: hidden;
    /* ط¥ط®ظپط§ط، ط£ظٹ ط£ط­ط±ظپ طھطھط³ط±ط¨ ط®ط§ط±ط¬ ط§ظ„ط§ط±طھظپط§ط¹ طµظپط± */
    transition: max-height 0.4s ease, opacity 0.35s ease;
    /* طھط£ط«ظٹط± ط§ظ„ط¸ظ‡ظˆط± ط§ظ„ظ…طھط¯ط±ط¬ */
}

.invest-card .bullet-list li {
    font-size: 13.5px;
    /* color: #475467; */
    line-height: 1.6;
}

/* ًںŒں طھط£ط«ظٹط±ط§طھ ط§ظ„ظ…ط­طھظˆظ‰ ط¹ظ†ط¯ ط§ظ„ظ€ Hover (ط¸ظ‡ظˆط± ط§ظ„ظ†طµ ظˆط§ظ†ط²ظ„ط§ظ‚ظ‡) ًںŒں */
.invest-card:hover .bullet-list {
    max-height: 200px;
    /* ظٹط³ظ…ط­ ظ„ظ„ظ†طµ ط¨ط§ظ„ط§ظ†ط²ظ„ط§ظ‚ ظ„ط£ط³ظپظ„ ظˆط§ظ„ظ†ظ…ظˆ ط§ظ„ظپظˆط±ظٹ */
    opacity: 1;
    /* ظٹط¸ظ‡ط± ط§ظ„ظ†طµ ط¨ط´ظƒظ„ ظ†ط§طµط¹ */
    visibility: visible;
    /* ظٹطµط¨ط­ ظ…ط±ط¦ظٹط§ظ‹ ط¨ط§ظ„ظƒط§ظ…ظ„ */
    margin-top: 15px;
}

.invest-card:hover .expand-btn {
    opacity: 0;
    transform: scale(0.8);
}

/* طھط­ظˆظٹظ„ ط§ظ„ظ‡ظٹط¯ط± ط¥ظ„ظ‰ ط£ظپظ‚ظٹ ظ„ظٹظ†ط§ط³ط¨ ط§ظ„ظ…ط³طھط·ظٹظ„ */
.invest-card:hover .invest-card-header {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    padding-bottom: 15px;
    margin-bottom: 5px;
}

.invest-card:hover .icon-box {
    color: #ffffff !important;
    font-size: 26px;
}

.invest-card:hover h3 {
    color: #ffffff !important;
    font-size: 18px;
}

.invest-card:hover .bullet-list li {
    color: #ffffff !important;
}

/* floating button for contact us */


@-webkit-keyframes come-in {
    0% {
        -webkit-transform: translatey(100px);
        transform: translatey(100px);
        opacity: 0;
    }

    30% {
        -webkit-transform: translateX(-50px) scale(0.4);
        transform: translateX(-50px) scale(0.4);
    }

    70% {
        -webkit-transform: translateX(0px) scale(1.2);
        transform: translateX(0px) scale(1.2);
    }

    100% {
        -webkit-transform: translatey(0px) scale(1);
        transform: translatey(0px) scale(1);
        opacity: 1;
    }
}

@keyframes come-in {
    0% {
        -webkit-transform: translatey(100px);
        transform: translatey(100px);
        opacity: 0;
    }

    30% {
        -webkit-transform: translateX(-50px) scale(0.4);
        transform: translateX(-50px) scale(0.4);
    }

    70% {
        -webkit-transform: translateX(0px) scale(1.2);
        transform: translateX(0px) scale(1.2);
    }

    100% {
        -webkit-transform: translatey(0px) scale(1);
        transform: translatey(0px) scale(1);
        opacity: 1;
    }
}

.floating-container {
    position: fixed;
    width: 100px;
    height: 100px;
    bottom: 0;
    left: 0;
    margin: 35px 25px;
    z-index: 1000;
    transition: height 0.3s;
    direction: ltr;
}

/* Override to kill stuck hover states on smartphones immediately after a link click */
/* .floating-container.force-close {
    height: 100px !important;
    Forces container back to its original small height
} */

/* .floating-container.force-close .float-element {
    opacity: 0 !important;
    -webkit-transform: translateY(20px) !important;
    transform: translateY(20px) !important;
    -webkit-animation: none !important;
    animation: none !important;
    transition: all 0.2s ease !important;
} */

/* .floating-container.force-close .floating-button {
    -webkit-transform: translateY(0px) !important;
    transform: translateY(0px) !important;
    box-shadow: 0 10px 25px -5px rgba(44, 179, 240, 0.6) !important;
} */

/* Triggers when hovered on desktop OR opened via JavaScript on mobile */
.floating-container.is-open {
    height: 340px;
}

.floating-container:hover .floating-button {
    box-shadow: 0 10px 25px rgba(44, 179, 240, 0.6);
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
}

/* 1. Added container layout to push elements ABOVE the button */
.element-container {
    position: absolute;
    bottom: 80px;
    /* Positions the entire stack right above the main button */
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column-reverse;
    /* Stacks 1st child at the bottom, 3rd at the top */
    align-items: center;
}

.floating-container:hover .element-container .float-element:nth-child(1) {
    -webkit-animation: come-in 0.4s forwards 0.1s;
    animation: come-in 0.4s forwards 0.1s;
}

.floating-container:hover .element-container .float-element:nth-child(2) {
    -webkit-animation: come-in 0.4s forwards 0.2s;
    animation: come-in 0.4s forwards 0.2s;
}

.floating-container:hover .element-container .float-element:nth-child(3) {
    -webkit-animation: come-in 0.4s forwards 0.3s;
    animation: come-in 0.4s forwards 0.3s;
}

.floating-container .floating-button {
    position: absolute;
    width: 65px;
    height: 65px;
    background: var(--gold);
    bottom: 0;
    border-radius: 50%;
    left: 0;
    right: 0;
    margin: auto;
    color: white;
    line-height: 65px;
    text-align: center;
    font-size: 23px;
    z-index: 100;
    box-shadow: 0 10px 25px -5px rgba(44, 179, 240, 0.6);
    cursor: pointer;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.floating-container .float-element {
    position: relative;
    display: block;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    margin: 10px auto;
    /* Cleaned up spacing */
    color: white;
    font-weight: 500;
    text-align: center;
    line-height: 50px;
    z-index: 99;
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
}

.floating-container .float-element .material-icons {
    vertical-align: middle;
    font-size: 16px;
}

.floating-container .float-element:nth-child(1) {
    background: var(--gold);
    box-shadow: 0 10px 20px -5px rgba(66, 165, 245, 0.5);
}

.floating-container .float-element:nth-child(2) {
    background: #4CAF50;
    box-shadow: 0 10px 20px -5px rgba(76, 175, 80, 0.5);
}

.floating-container .float-element:nth-child(3) {
    background: #FF9800;
    box-shadow: 0 10px 20px -5px rgba(255, 152, 0, 0.5);
}


/* about-us-section page */
/* --------------------------------------------------
           ظ‚ط³ظ… ط§ظ„ظ‡ظٹط±ظˆ ط§ظ„ط¹ظ„ظˆظ‰ ظ„ظ„ظ…ظ‚ط¯ظ…ط© (about-us-section)
           -------------------------------------------------- */
.about-us-section {
    background: linear-gradient(135deg, var(--navy), var(--navy-m)), url('https://images.unsplash.com/photo-1579546929518-9e396f3cc809?q=80&w=1200') no-repeat center center/cover;
    padding: 80px 5% 100px 5%;
    text-align: center;
    color: var(--white);
    position: relative;
}

.about-us-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 15px;
    background: var(--white);
    clip-path: polygon(0 100%, 100% 100%, 100% 0);
}

.about-us-section h1 {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 15px;
    letter-spacing: -0.5px;
}

.about-us-section p {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8);
    max-width: 700px;
    margin: 0 auto;
}

/* --------------------------------------------------
           ظ‚ط³ظ… ظ†ط¸ط±ط© ط¹ط§ظ…ط© ظˆط±ط³ط§ظ„ط© ط§ظ„ط±ط¦ظٹط³ (Chairman Message Section)
           -------------------------------------------------- */
.about-overview-container {
    padding: 80px 8%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 50px;
    align-items: center;
    direction: rtl;
}

@media (min-width: 992px) {
    .about-overview-container {
        grid-template-columns: 1.2fr 0.8fr;
    }
}

.overview-content h2 {
    font-size: 28px;
    color: var(--primary-color);
    font-weight: 800;
    margin-bottom: 20px;
    position: relative;
    display: inline-block;
}

.overview-content h2::after {
    content: '';
    position: absolute;
    bottom: -5px;
    right: 0;
    width: 60px;
    height: 3px;
    background-color: var(--accent-color);
}

.overview-content p {
    color: var(--text-dark);
    font-size: 15.5px;
    margin-bottom: 20px;
    text-align: right;
}

.overview-quote-box {
    background-color: var(--primary-blue);
    border-right: 4px solid var(--border);
    padding: 20px;
    border-radius: 4px 12px 12px 4px;
    margin-top: 25px;
}

.overview-quote-box p {
    font-style: italic;
    color: var(--gold);
    font-weight: 600;
    margin-bottom: 5px;
}

.overview-quote-box span {
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 700;
}

.overview-image-frame {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

.overview-image-frame img {
    width: 100%;
    height: auto;
    display: block;
}

/* --------------------------------------------------
           ظ‚ط³ظ… ط§ظ„ط±ط¤ظٹط©طŒ ط§ظ„ط±ط³ط§ظ„ط© ظˆط§ظ„ط£ظ‡ط¯ط§ظپ (Vision & Mission)
           -------------------------------------------------- */
.vision-mission-section {
    background-color: var(--bg-light);
    padding: 80px 8%;
    direction: rtl;
}


/* test flip cards */
/* --------------------------------------------------
           طھظ†ط³ظٹظ‚ ظƒط±ظˆطھ ط§ظ„ط±ط¤ظٹط© ظˆط§ظ„ط±ط³ط§ظ„ط© ط§ظ„ظ‡ظ†ط¯ط³ظٹط© ط«ظ„ط§ط«ظٹط© ط§ظ„ط£ط¨ط¹ط§ط¯ (3D Flip)
           -------------------------------------------------- */
.vision-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}

@media (min-width: 768px) {
    .vision-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ط§ظ„ط­ط§ظˆظٹط© ط§ظ„ط£ط¨: طھط­ط¯ط¯ ط§ظ„ط§ط±طھظپط§ط¹ ظˆطھظ‡ظٹط¦ ظ…ظ†ط¸ظˆط± ط§ظ„ط¨ط¹ط¯ ط§ظ„ط«ط§ظ„ط« ط§ظ„ط¨طµط±ظٹ */
.vision-card {
    background-color: transparent;
    height: 280px;
    /* ط·ظˆظ„ ط«ط§ط¨طھ ظˆظ…ظ†ط§ط³ط¨ ظ„ظ…ظ†ط¹ ط§ظ†ظ‡ظٹط§ط± ط§ظ„ظƒط±طھ ط£ط«ظ†ط§ط، ط§ظ„ط¯ظˆط±ط§ظ† */
    perspective: 1000px;
    /* ظٹط¹ط·ظٹ ط¹ظ…ظ‚ط§ظ‹ ظˆطھط£ط«ظٹط±ط§ظ‹ ظˆط§ظ‚ط¹ظٹط§ظ‹ ظ„ظ„ظ‚ظ„ط¨ ط«ظ„ط§ط«ظٹ ط§ظ„ط£ط¨ط¹ط§ط¯ */
}

/* ط§ظ„ط­ط§ظˆظٹط© ط§ظ„ط¯ط§ط®ظ„ظٹط©: طھط¯ظٹط± ط¹ظ…ظ„ظٹط© ط§ظ„ط¯ظˆط±ط§ظ† ظˆط§ظ„ط­ظپط§ط¸ ط¹ظ„ظ‰ ظ…ط¸ظ‡ط± ط§ظ„ط£ط¨ظ†ط§ط، */
.vision-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    /* ط­ط±ظƒط© ظ†ط§ط¹ظ…ط© ظˆظ…ط­طھط±ظپط© */
    transform-style: preserve-3d;
    /* ط§ظ„ط­ظپط§ط¸ ط¹ظ„ظ‰ طھط¬ط³ظٹظ… ط§ظ„ط¹ظ†ط§طµط± ط§ظ„ظپط±ط¹ظٹط© */
}

/* طھظپط¹ظٹظ„ ظ‚ظ„ط¨ ط§ظ„ظƒط±طھ ط¨ظ…ظ‚ط¯ط§ط± 180 ط¯ط±ط¬ط© ط¹ظ†ط¯ طھظ…ط±ظٹط± ط§ظ„ظ…ط§ظˆط³ */
.vision-card:hover .vision-card-inner {
    transform: rotateY(180deg);
}

/* ط§ظ„ط®طµط§ط¦طµ ط§ظ„ظ…ط´طھط±ظƒط© ظ„ظ„ظˆط¬ظ‡ظٹظ† ط§ظ„ط£ظ…ط§ظ…ظٹ ظˆط§ظ„ط®ظ„ظپظٹ ظ„ط¶ظ…ط§ظ† ط§ظ„طھط·ط§ط¨ظ‚ ط§ظ„ط¨طµط±ظٹ */
.vision-card-front,
.vision-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* ط¥ط®ظپط§ط، ط§ظ„ظƒظˆط§ظ„ظٹط³ ظˆط§ظ„ط¸ظ‡ط± ظ„ظ„ط·ط¨ظ‚ط© ط§ظ„ظ…ظ‚ط§ط¨ظ„ط© ط£ط«ظ†ط§ط، ط§ظ„ط¯ظˆط±ط§ظ† */
    border-radius: 16px;
    padding: 35px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    /* box-shadow: 0 1px 12px var(--gold); */
}

/* --- 1. ط¥ط¹ط¯ط§ط¯ط§طھ ظ…ط¸ظ‡ط± ط§ظ„ظˆط¬ظ‡ ط§ظ„ط£ظ…ط§ظ…ظٹ (ط§ظ„ط£ظٹظ‚ظˆظ†ط© + ط§ظ„ط¹ظ†ظˆط§ظ†) --- */
.vision-card-front {
    background-color: var(--primary-blue);
    color: var(--primary-color);
}

.card-icon-circle {
    width: 65px;
    height: 65px;
    background-color: #ffffff;
    color: var(--gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin-bottom: 20px;
}

.vision-card-front h3 {
    font-size: 22px;
    color: var(--white);
    font-weight: 700;
}

/* --- 2. ط¥ط¹ط¯ط§ط¯ط§طھ ظ…ط¸ظ‡ط± ط§ظ„ظˆط¬ظ‡ ط§ظ„ط®ظ„ظپظٹ ط§ظ„ط´ط§ط±ط­ (ط§ظ„ظ†طµ ظˆط§ظ„ظپظ‚ط±ط©) --- */
.vision-card-back {
    background-color: var(--gold-l);
    /* ط®ظ„ظپظٹط© ظ†ط§ط¹ظ…ط© ظˆظ…ط±ظٹط­ط© ظ„ط¹ظٹظ† ط§ظ„ظ…ط³طھط«ظ…ط± ط¹ظ†ط¯ ط§ظ„ظ‚ط±ط§ط،ط© */
    border-color: var(--border);
    color: var(--primary-color);
    transform: rotateY(180deg);
    /* ظ‚ظ„ط¨ ط§ظ„ظˆط¬ظ‡ ط§ظ„ط®ظ„ظپظٹ ظ…ط³ط¨ظ‚ط§ظ‹ ظ„ظٹظƒظˆظ† ط¬ط§ظ‡ط²ط§ظ‹ ظ„ظ„ط¸ظ‡ظˆط± ط§ظ„طµط­ظٹط­ */
}

.vision-card-back p {
    font-size: 14.5px;
    color: var(--bg-gray);
    line-height: 1.8;
    text-align: center;
    max-width: 95%;
}

/* --------------------------------------------------
                   ظ‚ط³ظ… ط§ظ„ظ‚ظٹظ… ط§ظ„ط¬ظˆظ‡ط±ظٹط© (Core Values Grid)
                   -------------------------------------------------- */
.values-section {
    padding: 80px 8%;
    direction: rtl;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

@media (min-width: 992px) {
    .values-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.value-item-box {
    text-align: center;
    padding: 30px 20px;
    border-radius: 12px;
    background: var(--primary-blue);
    border: 1px solid var(--border);
    transition: all 0.3s ease;
}

.value-item-box:hover {
    background-color: var(--gold);
    color: var(--white);
}

.value-item-box i {
    font-size: 32px;
    color: var(--gold);
    margin-bottom: 15px;
    transition: color 0.3s ease;
}

.value-item-box:hover i {
    color: var(--white);
}

.value-item-box h4 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--bg-gray);
}

.value-item-box p {
    font-size: 13px;
    color: var(--text-muted);
    transition: color 0.3s ease;
}

.value-item-box:hover h4 {
    color: var(--white);
}

.value-item-box:hover p {
    color: var(--white);
}

/* --------------------------------------------------
           طھظ†ط³ظٹظ‚ ظ‚ط³ظ… ظپط±ظˆط¹ ظˆظ…ظƒط§طھط¨ ط§ظ„ظ‡ظٹط¦ط© ط§ظ„ظ…ط·ظˆط± (Branches CSS)
           -------------------------------------------------- */
.branches-section {
    background-color: var(--bg-light);
    /* ط®ظ„ظپظٹط© ظپط§طھط­ط© ظ„ظ„طھظ…ظٹظٹط² ط¨ظٹظ† ط§ظ„ط£ظ‚ط³ط§ظ… */
    padding: 80px 8%;
    direction: rtl;
}

.branches-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    margin-top: 20px;
}

/* طھظˆط²ظٹط¹ ط§ظ„ظƒط±ظˆطھ ط¥ظ„ظ‰ 3 ط£ط¹ظ…ط¯ط© ظپظٹ ط§ظ„ط´ط§ط´ط§طھ ط§ظ„ظƒط¨ظٹط±ط© */
@media (min-width: 992px) {
    .branches-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* طھطµظ…ظٹظ… ظƒط±طھ ط§ظ„ظپط±ط¹ */
.branch-card {
    background-color: var(--white);
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 30px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* ظٹط¶ظ…ظ† ط¨ظ‚ط§ط، ط²ط± ط§ظ„ط®ط±ظٹط·ط© ظپظٹ ط§ظ„ط£ط³ظپظ„ ط¯ط§ط¦ظ…ط§ظ‹ */
    transition: all 0.3s ease;
}

/* ط®ط· ط¬ظ…ط§ظ„ظٹ ط¹ظ„ظˆظٹ ظٹطھظ„ظˆظ† ط¹ظ†ط¯ ظ…ط±ظˆط± ط§ظ„ظ…ط§ظˆط³ */
.branch-accent-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: #e2e8f0;
    transition: background-color 0.3s ease;
}

.branch-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(11, 34, 64, 0.06);
    border-color: rgba(0, 157, 161, 0.2);
}

.branch-card:hover .branch-accent-line {
    background-color: var(--secondary-color);
    /* ظٹطھط­ظˆظ„ ظ„ظ„ظˆظ† ط§ظ„طھظٹظ„ ط¹ظ†ط¯ ط§ظ„طھظ…ط±ظٹط± */
}

/* ط§ظ„ظ‡ظٹط¯ط± ط§ظ„ط®ط§طµ ط¨ط§ظ„ظƒط±طھ */
.branch-header {
    text-align: center;
    margin-bottom: 25px;
    position: relative;
}

.branch-icon-box {
    width: 55px;
    height: 55px;
    background-color: #f1f5f9;
    color: var(--primary-color);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin: 0 auto 15px auto;
    transition: all 0.3s ease;
}

.branch-card:hover .branch-icon-box {
    background-color: #f0fdfa;
    color: var(--secondary-color);
}

.branch-header h3 {
    font-size: 18px;
    color: var(--primary-color);
    font-weight: 700;
    margin-bottom: 8px;
}

/* ط´ط§ط±ط§طھ ط§ظ„طھظ…ظٹظٹط² (Badges) */
.branch-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 20px;
    background-color: #fef3c7;
    /* ط®ظ„ظپظٹط© ط°ظ‡ط¨ظٹط© ط®ظپظٹظپط© */
    color: #d97706;
}

.branch-badge.standard {
    background-color: #e0f2fe;
    /* ط®ظ„ظپظٹط© ط²ط±ظ‚ط§ط، ط®ظپظٹظپط© ظ„ظ„ظ…ظƒط§طھط¨ ط§ظ„ظپط±ط¹ظٹط© */
    color: #0369a1;
}

/* طھظپط§طµظٹظ„ ظˆظ…ط¹ظ„ظˆظ…ط§طھ ط§ظ„ط§طھطµط§ظ„ */
.branch-details {
    border-top: 1px dashed #e2e8f0;
    padding-top: 20px;
    margin-bottom: 25px;
    flex-grow: 1;
    /* ظٹط¬ط¹ظ„ ط§ظ„ظ…ط³ط§ط­ط© ط§ظ„ط¯ط§ط®ظ„ظٹط© ظ…ط±ظ†ط© ظˆظ…ظˆط­ط¯ط© ط§ظ„ط§ط±طھظپط§ط¹ */
}

.branch-info-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}

.branch-info-item i {
    color: var(--secondary-color);
    font-size: 14px;
    margin-top: 5px;
    /* ظ…ظˆط§ط²ظ†ط© ط§ظ„ط£ظٹظ‚ظˆظ†ط© ظ…ط¹ ط¨ط¯ط§ظٹط© ط§ظ„ط³ط·ط± ط§ظ„ط£ظˆظ„ ظ„ظ„ظ†طµ */
    width: 16px;
    text-align: center;
}

.branch-info-item p {
    font-size: 13.5px;
    color: var(--text-dark);
    margin: 0;
    line-height: 1.6;
}

/* ط±ط§ط¨ط· ط§ظ„ط®ط±ظٹط·ط© ط§ظ„طھظپط§ط¹ظ„ظٹ ط§ظ„ظپط§ط®ط± */
.branch-map-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background-color: #f8fafc;
    color: var(--primary-blue);
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    transition: all 0.2s ease;
}

.branch-map-link:hover {
    background-color: var(--gold);
    color: var(--white);
    border-color: var(--primary-blue);
}

/* ===============================
   Global Responsive Enhancements
   =============================== */

img,
video,
iframe {
    max-width: 100%;
    height: auto;
}

.container {
    width: 100%;
}

/* Tablets */
@media (max-width: 992px) {

    .top-bar .container,
    .navbar .container,
    .pre-footer-contacts,
    .contact-nodes,
    .news-item,
    .news-section,
    .feeds-layout,
    .free-zone-banner,
    .footer-grid-structure {
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
        gap: 20px;
        text-align: center;
    }

    .nav-menu {
        flex-wrap: wrap;
        justify-content: center;
    }

    .hero h1 {
        font-size: 36px;
    }

    .hero h2 {
        font-size: 30px;
    }

    .hero p {
        font-size: 16px;
    }

    .info-grid-5,
    .info-grid-4,
    .stories-grid,
    .values-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Smartphones */
@media (max-width: 768px) {

    .container {
        padding: 0 15px;
    }

    .hero {
        margin-top: 120px;
        padding: 40px 0;
    }

    .hero h1 {
        font-size: 28px;
    }

    .hero h2 {
        font-size: 24px;
    }

    .hero p {
        font-size: 15px;
    }

    .hero-action-grid,
    .filters-row,
    .sectors-bar,
    .timeline-container,
    .contact-nodes {
        flex-direction: column !important;
    }

    .info-grid-5,
    .info-grid-4,
    .stories-grid,
    .values-grid,
    .investment-stats-grid {
        grid-template-columns: 1fr !important;
    }

    .story-card,
    .info-card,
    .opportunity-card,
    .branch-card {
        width: 100%;
    }

    .btn {
        width: 100%;
    }

    .nav-logo-side img {
        height: 55px;
    }
}

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

    body {
        font-size: 14px;
    }

    .hero h1 {
        font-size: 24px;
    }

    .hero h2 {
        font-size: 20px;
    }

    .main-section-title {
        font-size: 24px;
    }

    .news-content h1 {
        font-size: 30px;
    }

    .news-content p {
        font-size: 16px;
    }
}


/* ==========================================
   AFTERCARE PAGE STYLES
   ========================================== */

/* â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ
   DESIGN TOKENS
â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ */
.aftercare-page-wrapper {
    --r: 10px;
    --r-lg: 16px;
    --sh: 0 2px 16px rgba(3, 104, 189, .09);
    --sh-lg: 0 8px 40px rgba(3, 104, 189, .14);
    --max: 1240px;
    --font: 'Cairo', system-ui, sans-serif;
}


/* â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ
   BREADCRUMB
â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ */
.breadcrumb {
    background: var(--white);
    border-bottom: 1px solid var(--gray-200)
}

.breadcrumb-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 0;
    font-size: 12.5px;
    color: var(--gray-400);
    flex-wrap: wrap
}

.breadcrumb-inner a {
    color: var(--primary-blue)
}

.breadcrumb-inner a:hover {
    text-decoration: underline
}

.breadcrumb-inner .sep {
    color: var(--gray-200)
}

.breadcrumb-inner .cur {
    color: var(--gold-d);
    font-weight: 600
}

/* â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ
   HERO
â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ */
.ac-hero {
    background: linear-gradient(145deg, var(--navy) 0%, var(--navy-m) 40%, #044d96 100%);
    padding: 72px 0 88px;
    position: relative;
    overflow: hidden
}

.ac-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 55% 70% at 15% 60%, rgba(249, 171, 3, .07) 0%, transparent 55%),
        radial-gradient(ellipse 40% 50% at 85% 20%, rgba(3, 104, 189, .12) 0%, transparent 50%);
}

/* subtle grid pattern */
.ac-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, .022) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .022) 1px, transparent 1px);
    background-size: 48px 48px;
}

.ac-hero-inner {
    display: grid;
    grid-template-columns: 1fr 390px;
    gap: 52px;
    align-items: center;
    position: relative;
    z-index: 1
}

.ac-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(249, 171, 3, .14);
    border: 1px solid rgba(249, 171, 3, .28);
    color: var(--gold);
    font-size: 12px;
    font-weight: 600;
    padding: 5px 14px;
    border-radius: 20px;
    margin-bottom: 20px
}

.ac-hero-eyebrow::before {
    content: 'â—ڈ';
    font-size: 7px;
    animation: blink 2s infinite
}

@keyframes blink {

    0%,
    100% {
        opacity: 1
    }

    50% {
        opacity: .25
    }
}

.ac-hero h1 {
    font-size: 44px;
    font-weight: 900;
    color: var(--white);
    line-height: 1.22;
    margin-bottom: 18px
}

.ac-hero h1 .accent {
    color: var(--gold)
}

.ac-hero-desc {
    font-size: 16px;
    color: rgba(255, 255, 255, .72);
    line-height: 1.8;
    margin-bottom: 32px;
    max-width: 500px
}

.ac-hero-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap
}

.btn-hero-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--gold);
    color: var(--navy);
    font-weight: 800;
    font-size: 15px;
    padding: 13px 28px;
    border-radius: 10px;
    transition: all .22s;
    box-shadow: 0 4px 20px rgba(249, 171, 3, .38)
}

.btn-hero-primary:hover {
    background: var(--gold-d);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(249, 171, 3, .46)
}

.btn-hero-outline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: var(--white);
    font-weight: 600;
    font-size: 15px;
    padding: 13px 28px;
    border-radius: 10px;
    border: 2px solid rgba(255, 255, 255, .3);
    transition: all .22s
}

.btn-hero-outline:hover {
    border-color: rgba(255, 255, 255, .7);
    background: rgba(255, 255, 255, .06)
}

/* Track Card */
.track-card {
    background: rgba(255, 255, 255, .08);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--r-lg);
    padding: 28px
}

.track-card h3 {
    font-size: 16px;
    font-weight: 800;
    color: var(--white);
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 8px
}

.track-group {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.track-input {
    background: rgba(255, 255, 255, .11);
    border: 1.5px solid rgba(255, 255, 255, .18);
    border-radius: 8px;
    padding: 11px 15px;
    color: var(--white);
    font-size: 13.5px;
    font-family: inherit;
    direction: rtl;
    transition: border-color .2s;
    width: 100%
}

.track-input::placeholder {
    color: rgba(255, 255, 255, .38)
}

.track-input:focus {
    outline: none;
    border-color: var(--gold);
    background: rgba(255, 255, 255, .15)
}

.btn-track {
    background: var(--gold);
    color: var(--navy);
    font-weight: 800;
    font-size: 14px;
    padding: 12px;
    border-radius: 8px;
    border: none;
    width: 100%;
    transition: all .2s;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px
}

.btn-track:hover {
    background: var(--gold-d)
}

.track-sep {
    text-align: center;
    color: rgba(255, 255, 255, .3);
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 10px
}

.track-sep::before,
.track-sep::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, .12)
}

.btn-newcase {
    background: transparent;
    border: 1.5px solid rgba(249, 171, 3, .35);
    color: var(--gold);
    font-size: 13.5px;
    font-weight: 700;
    padding: 10px;
    border-radius: 8px;
    width: 100%;
    font-family: inherit;
    transition: all .2s;
    display: block;
    text-align: center
}

.btn-newcase:hover {
    border-color: var(--gold);
    background: rgba(249, 171, 3, .08)
}

/* â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ
   STATS BAR
â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ */
.statsbar {
    background: var(--white);
    border-bottom: 1px solid var(--gray-200)
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr)
}

.stat {
    padding: 22px 16px;
    text-align: center;
    border-left: 1px solid var(--gray-200);
    position: relative;
    transition: background .2s
}

.stat:last-child {
    border-left: none
}

.stat:hover {
    background: var(--gray-50)
}

.stat::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    height: 3px;
    background: var(--gold);
    transform: scaleX(0);
    transition: transform .3s;
    transform-origin: center
}

.stat:hover::after {
    transform: scaleX(1)
}

.stat-n {
    font-size: 34px;
    font-weight: 900;
    color: var(--primary-blue);
    line-height: 1;
    display: block
}

.stat-n.gold {
    color: var(--gold-d)
}

.stat-l {
    font-size: 12.5px;
    color: var(--gray-600);
    margin-top: 4px;
    display: block
}

/* â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ
   SECTIONS
â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ */
.ac-section {
    padding: 76px 0
}

.ac-section-white {
    background: var(--white)
}

.sec-label {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 700;
    padding: 4px 13px;
    border-radius: 20px;
    margin-bottom: 12px;
    letter-spacing: .4px
}

.sec-label.blue {
    background: var(--secondary-blue);
    color: var(--primary-blue)
}

.sec-label.gold {
    background: var(--gold-l);
    color: var(--gold-d)
}

.sec-title {
    font-size: 30px;
    font-weight: 900;
    color: var(--navy);
    line-height: 1.3;
    margin-bottom: 12px
}

.sec-sub {
    font-size: 15px;
    color: var(--gray-600);
    line-height: 1.75
}

.sec-head {
    text-align: center;
    margin-bottom: 52px
}

.sec-head .sec-sub {
    max-width: 520px;
    margin: 0 auto
}

/* â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ
   WHAT IS SECTION
â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ */
.what-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center
}

.what-text h2 {
    font-size: 29px;
    font-weight: 900;
    color: var(--navy);
    margin-bottom: 15px
}

.what-text p {
    font-size: 15px;
    color: var(--gray-600);
    line-height: 1.82;
    margin-bottom: 18px
}

.callout {
    background: linear-gradient(135deg, var(--primary-bluel), rgba(249, 171, 3, .06));
    border-right: 4px solid var(--gold);
    padding: 14px 18px;
    border-radius: 0 var(--r) var(--r) 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 22px;
    line-height: 1.65
}

.services-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px
}

.svc-card {
    background: var(--white);
    border: 1.5px solid var(--gray-200);
    border-radius: var(--r);
    padding: 18px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    transition: all .25s;
    cursor: default
}

.svc-card:hover {
    border-color: var(--blue);
    box-shadow: var(--sh);
    transform: translateY(-2px)
}

.svc-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0
}

.svc-icon.blue {
    background: var(--blue-l)
}

.svc-icon.gold {
    background: var(--gold-l)
}

.svc-card h4 {
    font-size: 14px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 5px
}

.svc-card p {
    font-size: 12.5px;
    color: var(--gray-600);
    line-height: 1.65
}

/* â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ
   PROCESS STEPS
â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ */
.steps-wrap {
    position: relative
}

.steps-connector {
    position: absolute;
    top: 35px;
    right: 60px;
    left: 60px;
    height: 2px;
    background: linear-gradient(90deg, var(--gold) 0%, var(--blue) 100%);
    z-index: 0
}

.steps-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    position: relative;
    z-index: 1
}

.step {
    text-align: center;
    padding: 0 6px;
    cursor: pointer;
    transition: all .2s
}

.step-circle {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
    border: 3px solid var(--white);
    box-shadow: 0 0 0 3px var(--gray-200);
    background: var(--white);
    transition: all .3s
}

.step-num-inner {
    font-size: 20px;
    font-weight: 900;
    color: var(--gray-400);
    transition: color .3s
}

.step.active .step-circle,
.step:hover .step-circle {
    box-shadow: 0 0 0 3px var(--blue-l), 0 6px 22px rgba(3, 104, 189, .22);
    background: var(--blue)
}

.step.active .step-num-inner,
.step:hover .step-num-inner {
    color: var(--white)
}

.step:first-child .step-circle {
    box-shadow: 0 0 0 3px var(--gold-l), 0 6px 22px rgba(249, 171, 3, .26);
    background: var(--gold)
}

.step:first-child .step-num-inner {
    color: var(--navy)
}

.step-ico {
    font-size: 22px;
    display: block;
    margin-bottom: 3px
}

.step-lbl {
    font-size: 13px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 5px
}

.step-hint {
    font-size: 11.5px;
    color: var(--gray-600);
    line-height: 1.55
}

.step-detail {
    margin-top: 36px;
    background: var(--white);
    border: 1.5px solid var(--gray-200);
    border-radius: var(--r-lg);
    padding: 24px 28px;
    animation: fadeUp .3s ease;
    display: none
}

.step-detail.show {
    display: block
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(8px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.step-detail h4 {
    font-size: 16px;
    font-weight: 800;
    color: var(--navy);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px
}

.step-detail p {
    font-size: 14px;
    color: var(--gray-600);
    line-height: 1.82
}

/* â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ
   CTA CARDS
â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ */
.cta-trio {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px
}

.cta-card {
    border-radius: var(--r-lg);
    padding: 32px 26px;
    position: relative;
    overflow: hidden;
    transition: transform .28s
}

.cta-card:hover {
    transform: translateY(-4px)
}

.cta-card::before {
    content: '';
    position: absolute;
    top: -32px;
    left: -32px;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08)
}

.cta-card.c-gold {
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-d) 100%);
    box-shadow: 0 8px 32px rgba(249, 171, 3, .3)
}

.cta-card.c-blue {
    background: linear-gradient(135deg, var(--blue) 0%, var(--blue-d) 100%);
    box-shadow: 0 8px 32px rgba(3, 104, 189, .28)
}

.cta-card.c-white {
    background: var(--white);
    border: 1.5px solid var(--gray-200);
    box-shadow: var(--sh)
}

.cta-ico {
    font-size: 38px;
    display: block;
    margin-bottom: 16px
}

.cta-card h3 {
    font-size: 19px;
    font-weight: 800;
    margin-bottom: 10px
}

.cta-card.c-gold h3,
.cta-card.c-gold p {
    color: var(--navy)
}

.cta-card.c-blue h3,
.cta-card.c-blue p {
    color: var(--white)
}

.cta-card.c-white h3 {
    color: var(--navy)
}

.cta-card p {
    font-size: 13.5px;
    line-height: 1.7;
    margin-bottom: 22px;
    opacity: .85
}

.cta-card.c-white p {
    color: var(--gray-600);
    opacity: 1
}

.cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 700;
    padding: 10px 20px;
    border-radius: 8px;
    transition: all .2s
}

.cta-card.c-gold .cta-btn {
    background: var(--navy);
    color: var(--gold)
}

.cta-card.c-gold .cta-btn:hover {
    background: #000
}

.cta-card.c-blue .cta-btn {
    background: rgba(255, 255, 255, .15);
    color: var(--white);
    border: 1.5px solid rgba(255, 255, 255, .28)
}

.cta-card.c-blue .cta-btn:hover {
    background: rgba(255, 255, 255, .25)
}

.cta-card.c-white .cta-btn {
    background: var(--blue);
    color: var(--white)
}

.cta-card.c-white .cta-btn:hover {
    background: var(--blue-d)
}

/* â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ
   TABS — OBSTACLE TYPES
â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ */
.tabs-bar {
    display: flex;
    gap: 8px;
    margin-bottom: 22px;
    flex-wrap: wrap
}

.tab-btn {
    padding: 9px 20px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 600;
    border: 1.5px solid var(--gray-200);
    background: var(--white);
    color: var(--gray-600);
    cursor: pointer;
    font-family: inherit;
    transition: all .2s
}

.tab-btn.on {
    background: var(--blue);
    color: var(--white);
    border-color: var(--blue)
}

.tab-btn:hover:not(.on) {
    border-color: var(--blue);
    color: var(--blue)
}

.tab-panel {
    display: none
}

.tab-panel.on {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px;
    animation: fadeUp .3s ease
}

.obs-card {
    background: var(--white);
    border: 1.5px solid var(--gray-200);
    border-radius: var(--r);
    padding: 18px 20px;
    display: flex;
    gap: 13px;
    align-items: flex-start;
    transition: all .22s
}

.obs-card:hover {
    border-color: var(--gold);
    box-shadow: 0 4px 16px rgba(249, 171, 3, .1)
}

.obs-num {
    width: 32px;
    height: 32px;
    min-width: 32px;
    background: var(--blue-l);
    color: var(--blue);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800
}

.obs-card h4 {
    font-size: 14px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 5px
}

.obs-card p {
    font-size: 12.5px;
    color: var(--gray-600);
    line-height: 1.65
}

/* â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ
   PRIORITY
â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ */
.prio-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px
}

.prio {
    border-radius: var(--r-lg);
    padding: 26px 20px;
    text-align: center;
    transition: transform .22s;
    position: relative;
    overflow: hidden
}

.prio:hover {
    transform: translateY(-4px)
}

.prio-ghost {
    position: absolute;
    bottom: -12px;
    left: -12px;
    font-size: 70px;
    font-weight: 900;
    opacity: .06;
    line-height: 1
}

.prio-ico {
    font-size: 34px;
    display: block;
    margin-bottom: 10px
}

.prio-title {
    font-size: 18px;
    font-weight: 900;
    margin-bottom: 6px
}

.prio-sub {
    font-size: 12.5px;
    color: var(--gray-600);
    margin-bottom: 14px
}

.prio-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 11px;
    border-radius: 12px;
    background: rgba(0, 0, 0, .07)
}

.p-green {
    background: #ecfdf5;
    border: 2px solid #4ade80
}

.p-green .prio-title {
    color: #15803d
}

.p-amber {
    background: #fffbeb;
    border: 2px solid #fbbf24
}

.p-amber .prio-title {
    color: #b45309
}

.p-orange {
    background: #fff7ed;
    border: 2px solid #fb923c
}

.p-orange .prio-title {
    color: #c2410c
}

.p-red {
    background: #fff1f2;
    border: 2px solid #f87171
}

.p-red .prio-title {
    color: #b91c1c
}

/* â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ
   FORMS
â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ */
.forms-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px
}

.form-card {
    background: var(--white);
    border: 1.5px solid var(--gray-200);
    border-radius: var(--r);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: all .25s
}

.form-card:hover {
    border-color: var(--blue);
    box-shadow: var(--sh);
    transform: translateY(-2px)
}

.form-code {
    display: inline-block;
    background: var(--navy);
    color: var(--gold);
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
    direction: ltr;
    letter-spacing: .3px
}

.form-card h4 {
    font-size: 14px;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.4
}

.form-card p {
    font-size: 12.5px;
    color: var(--gray-600);
    line-height: 1.65;
    flex: 1
}

.form-btns {
    display: flex;
    gap: 8px
}

.btn-dl {
    flex: 1;
    padding: 8px;
    border-radius: 7px;
    font-size: 12.5px;
    font-weight: 700;
    text-align: center;
    transition: all .2s;
    font-family: inherit;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px
}

.btn-dl.primary {
    background: var(--blue);
    color: var(--white)
}

.btn-dl.primary:hover {
    background: var(--blue-d)
}

.btn-dl.sec {
    background: var(--gray-100);
    color: var(--gray-600);
    border: 1px solid var(--gray-200)
}

.btn-dl.sec:hover {
    background: var(--gray-200)
}

/* â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ
   FAQ
â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ */
.faq-wrap {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 10px
}

.faq-item {
    background: var(--white);
    border: 1.5px solid var(--gray-200);
    border-radius: var(--r);
    overflow: hidden;
    transition: border-color .2s
}

.faq-item.open {
    border-color: var(--blue)
}

.faq-q {
    padding: 17px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    user-select: none
}

.faq-q:hover {
    background: var(--gray-50)
}

.faq-q-text {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--navy)
}

.faq-chevron {
    width: 28px;
    height: 28px;
    min-width: 28px;
    background: var(--gray-100);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--blue);
    transition: all .3s
}

.faq-item.open .faq-chevron {
    transform: rotate(180deg);
    background: var(--blue-l)
}

.faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height .38s ease, padding .38s;
    font-size: 14px;
    color: var(--gray-600);
    line-height: 1.8
}

.faq-item.open .faq-a {
    max-height: 280px;
    padding: 0 20px 18px
}

/* â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ
   CONTACT
â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ */
.contact-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px
}

.con-card {
    background: var(--white);
    border: 1.5px solid var(--gray-200);
    border-radius: var(--r-lg);
    padding: 28px 22px;
    text-align: center;
    transition: all .25s
}

.con-card:hover {
    border-color: var(--gold);
    box-shadow: 0 4px 22px rgba(249, 171, 3, .12);
    transform: translateY(-2px)
}

.con-icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--blue), var(--blue-d));
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin: 0 auto 16px;
    box-shadow: 0 4px 16px rgba(3, 104, 189, .22)
}

.con-card h4 {
    font-size: 15px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 8px
}

.con-card p {
    font-size: 13px;
    color: var(--gray-600);
    margin-bottom: 14px;
    line-height: 1.65
}

.con-val {
    font-size: 16px;
    font-weight: 800;
    color: var(--blue);
    direction: ltr;
    display: block
}

.con-badge {
    display: inline-block;
    background: var(--blue-l);
    color: var(--blue);
    font-size: 11.5px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 6px;
    margin-top: 10px
}

/* â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ
   BANNER CTA
â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ */
.banner {
    background: linear-gradient(145deg, var(--navy) 0%, var(--blue-d) 100%);
    padding: 72px 0;
    text-align: center;
    position: relative;
    overflow: hidden
}

.banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 55% 80% at 50% 50%, rgba(249, 171, 3, .09) 0%, transparent 60%)
}

.banner-inner {
    position: relative;
    max-width: 620px;
    margin: 0 auto
}

.banner h2 {
    font-size: 34px;
    font-weight: 900;
    color: var(--white);
    margin-bottom: 14px;
    line-height: 1.3
}

.banner h2 .accent {
    color: var(--gold)
}

.banner p {
    font-size: 16px;
    color: rgba(255, 255, 255, .7);
    margin-bottom: 34px;
    line-height: 1.75
}

.banner-acts {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap
}

/* â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ
   RESPONSIVE
â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ */
@media(max-width:1060px) {
    .ac-hero-inner {
        grid-template-columns: 1fr
    }

    .track-card {
        max-width: 420px
    }

    .steps-connector {
        display: none
    }

    .steps-row {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px
    }

    .cta-trio {
        grid-template-columns: 1fr 1fr
    }

    .prio-grid {
        grid-template-columns: 1fr 1fr
    }

    .forms-grid {
        grid-template-columns: 1fr 1fr
    }
}

@media(max-width:768px) {
    .ac-hero h1 {
        font-size: 30px
    }

    .ac-hero-inner {
        gap: 32px
    }

    .ac-hero-actions {
        flex-direction: column
    }

    .what-grid {
        grid-template-columns: 1fr
    }

    .stats-grid {
        grid-template-columns: 1fr 1fr
    }

    .steps-row {
        grid-template-columns: 1fr 1fr
    }

    .cta-trio {
        grid-template-columns: 1fr
    }

    .contact-grid {
        grid-template-columns: 1fr
    }

    .forms-grid {
        grid-template-columns: 1fr
    }

    .tab-panel.on {
        grid-template-columns: 1fr
    }

    .banner h2 {
        font-size: 26px
    }
}

@media(max-width:480px) {
    .prio-grid {
        grid-template-columns: 1fr 1fr
    }

    .stats-grid {
        grid-template-columns: 1fr 1fr
    }
}




/* why yemen page map  */
/* chatgpt map */
.svg-map-wrapper {
    width: 100%;
    max-width: 1200px;
    margin: auto;
}

.region-path {
    fill: #d7e3f4;
    stroke: #ffffff;
    stroke-width: 1.5;
    transition: all .3s ease;
    cursor: pointer;
}

.region-path:hover {

    fill: var(--primary-blue);
    /* ط§ظ„طھط­ظˆظ„ ظ„ظ„ظƒط­ظ„ظٹ ط§ظ„ط¹ظ…ظٹظ‚ ظ„ظ„ظ‡ظˆظٹط© ط§ظ„ط§ط³طھط«ظ…ط§ط±ظٹط© */
    stroke: var(--border);
    /* ط­ط¯ظˆط¯ ظپظٹط±ظˆط²ظٹط© ظ…ط¶ظٹط¦ط© */
    filter: drop-shadow(0px 4px 12px rgba(16, 42, 67, 0.2));
}

.map-region-group.active .region-path {
    fill: var(--gold);
}

.active-path {
    fill: var(--gold) !important;
}

/* Map and Info Card Layout */
.map-and-info-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: stretch;
    justify-content: center;
    margin-bottom: 40px;
}

.map-and-info-container .svg-map-wrapper {
    flex: 2;
    min-width: 300px;
    display: flex;
}

.map-and-info-container .svg-map-wrapper svg {
    flex: 1;
}

.province-info-card {
    flex: 1;
    min-width: 300px;
    background: var(--primary-blue);
    color: var(--white);
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.province-info-card h3 {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 10px;
    color: var(--gold);
}

.province-info-card p {
    font-size: 0.95rem;
    color: var(--white);
    line-height: 1.6;
    margin-bottom: 20px;
}

.pi-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.pi-stat-box {
    background: var(--secondary-blue);
    border-radius: 8px;
    padding: 15px;
    display: flex;
    flex-direction: column;
}

.pi-stat-value {
    font-size: 1.3rem;
    font-weight: bold;
    margin-bottom: 5px;
    color: var(--white);
}

.pi-stat-label {
    font-size: 0.8rem;
    color: var(--white);
}

.pi-full-width {
    grid-column: span 2;
}

/* Investor Journey Timeline */
.timeline-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    max-width: 1000px;
    margin: 40px auto 60px;
    padding: 0 20px;
}

.timeline-container::before {
    content: '';
    position: absolute;
    top: 55px;
    /* Adjust based on circle position */
    left: 40px;
    right: 40px;
    height: 2px;
    background-image: repeating-linear-gradient(to right, #cbd5e1 0, #cbd5e1 8px, transparent 8px, transparent 16px);
    z-index: 1;
}

.timeline-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
    flex: 1;
}

.timeline-step .step-num {
    font-size: 1rem;
    font-weight: bold;
    color: #94a3b8;
    margin-bottom: 12px;
    font-family: Arial, sans-serif;
}

.timeline-step .step-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #ffffff;
    border: 2px solid var(--primary-blue);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
}

.timeline-step .step-circle i {
    font-size: 1.2rem;
    color: var(--primary-blue);
}

.timeline-step .step-circle a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

.timeline-step .step-circle a i {
    color: var(--primary-blue);
}

.timeline-step .step-title {
    font-size: 0.95rem;
    font-weight: bold;
    color: var(--primary-blue);
    text-align: center;
}

/* Core Values Section */
.values-section {
    padding: 60px 0;
    background-color: var(--bg-gray);
}

.values-section {
    padding: 80px 0;
    background: linear-gradient(180deg, var(--bg-gray) 0%, #ffffff 100%);
    position: relative;
    overflow: hidden;
}

.section-subtitle-centered {
    text-align: center;
    color: var(--text-muted);
    font-size: 1.2rem;
    max-width: 700px;
    margin: -15px auto 40px auto;
    line-height: 1.6;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 40px;
    margin-top: 50px;
}

.value-item-box {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 50px 30px;
    border-radius: 24px;
    box-shadow: 0 10px 30px rgba(0, 105, 179, 0.08);
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-bottom: 5px solid var(--primary-blue);
    z-index: 1;
}

.value-item-box::before {
    content: '';
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--primary-blue) 0%, var(--secondary-blue) 100%);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: -1;
    border-radius: 24px 24px 0 0;
}

.value-item-box:hover {
    transform: translateY(-15px);
    box-shadow: 0 20px 40px rgba(0, 105, 179, 0.15);
    border-bottom: 5px solid var(--gold);
}

.value-item-box:hover::before {
    top: 0;
}

.value-item-box i {
    font-size: 4rem;
    color: var(--primary-blue);
    margin-bottom: 30px;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-block;
    filter: drop-shadow(0 4px 6px rgba(0, 105, 179, 0.2));
}

.value-item-box:hover i {
    color: var(--gold);
    transform: scale(1.15) rotateY(15deg);
    filter: drop-shadow(0 8px 12px rgba(246, 164, 0, 0.3));
}

.value-item-box h4 {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 20px;
    transition: all 0.5s ease;
}

.value-item-box:hover h4 {
    color: var(--white);
}

.value-item-box p {
    font-size: 1.05rem;
    color: var(--text-muted);
    line-height: 1.8;
    transition: all 0.5s ease;
}

.value-item-box:hover p {
    color: rgba(255, 255, 255, 0.95);
}

/* Language Toggle Switcher */
ul.nav-menu>li.lang-toggle-container {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    background-color: #1a1a1a !important;
    /* Very dark background to match image */
    border: 1px solid #333 !important;
    border-radius: 40px !important;
    padding: 4px !important;
    margin: 0 10px !important;
    position: relative;
    overflow: hidden;
}

ul.nav-menu>li.lang-toggle-container>a.lang-toggle-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px 18px !important;
    border-radius: 30px !important;
    color: #888 !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    letter-spacing: 1px !important;
    background: transparent !important;
    border: none !important;
    z-index: 2;
    min-width: 50px;
    margin: 0 !important;
}

ul.nav-menu>li.lang-toggle-container>a.lang-toggle-btn:hover {
    color: #fff !important;
}

ul.nav-menu>li.lang-toggle-container>a.lang-toggle-btn.active {
    background-color: var(--gold) !important;
    /* light cream */
    color: var(--white) !important;
    /* dark brown text */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
}

/* Welcome Modal */
.welcome-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.welcome-modal-overlay.show {
    opacity: 1;
    visibility: visible;
}

.welcome-modal-box {
    background: linear-gradient(135deg, var(--primary-blue), var(--secondary-blue));
    width: 90%;
    max-width: 500px;
    border-radius: 15px;
    padding: 40px 30px;
    position: relative;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    transform: translateY(20px);
    transition: transform 0.3s ease;
    color: white;
}

.welcome-modal-overlay.show .welcome-modal-box {
    transform: translateY(0);
}

.welcome-modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background 0.3s ease;
}

.welcome-modal-close:hover {
    background: rgba(255, 255, 255, 0.4);
}

.welcome-modal-icon {
    width: 60px;
    height: 60px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    margin-bottom: 20px;
}

.welcome-modal-title {
    font-size: 1.2rem;
    line-height: 1.8;
    font-weight: 500;
    margin: 0;
}

/* Specializations & Trends Section */
.specializations-trends-section {
    padding: 80px 30px;
    /* background: linear-gradient(135deg, var(--dark-gray) 0%, var(--dark-gray) 50%, var(--dark-gray) 100%); */
    background: var(--white);
    color: var(--white);
    margin: 80px 0;
    border-radius: 25px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
}

.specializations-trends-section::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    /* background: radial-gradient(circle, rgba(var(--gold-rgb, 218, 165, 32), 0.15) 0%, transparent 60%); */
    z-index: 1;
    pointer-events: none;
}

.st-container {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
}

.st-header {
    text-align: center;
    max-width: 850px;
    margin: 0 auto 60px;
    background: rgba(255, 255, 255, 0.03);
    padding: 40px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
}

.st-header h2 {
    font-size: 2.2rem;
    color: var(--primary-blue);
    margin-bottom: 25px;
    position: relative;
    display: inline-block;
}

.st-header h2::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: var(--gold);
    border-radius: 2px;
}

.st-header p {
    font-size: 1.15rem;
    line-height: 1.9;
    color: var(--black);
    margin-top: 20px;
}

.trends-wrapper {
    margin-top: 50px;
}

.trends-title {
    font-size: 2rem;
    color: var(--gold);
    text-align: center;
    margin-bottom: 15px;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.trends-subtitle {
    text-align: center;
    color: var(--black);
    margin-bottom: 50px;
    font-size: 1.1rem;
}

.trends-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 30px;
}

.trend-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    padding: 40px 25px;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
}

.trend-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.05), transparent);
    transform: translateX(-100%);
    transition: transform 0.6s;
}

.trend-card:hover {
    transform: translateY(-12px);
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--gold);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
}

.trend-card:hover::before {
    transform: translateX(100%);
}

.trend-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 25px;
    background: var(--gold);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.8rem;
    color: #fff;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.trend-card:hover .trend-icon {
    transform: scale(1.15) rotate(10deg);
    box-shadow: 0 12px 25px rgba(218, 165, 32, 0.4);
}

.trend-card p {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--black);
    margin: 0;
    font-weight: 500;
}

/* FAQ Accordion Styles */
.faq-section {
    max-width: 900px;
    margin: 40px auto;
    padding: 0 20px;
}

.faq-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.faq-item {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
}

.faq-item:hover {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.05);
    border-color: #cbd5e1;
}

.faq-question {
    padding: 20px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f8fafc;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--primary-blue, #0f172a);
    transition: background 0.3s ease;
}

.faq-question:hover {
    background: #f1f5f9;
}

.faq-question i {
    color: var(--accent-gold, #d4af37);
    font-size: 1.2rem;
    transition: transform 0.4s ease;
}

.faq-item.active .faq-question {
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
}

.faq-item.active .faq-question i {
    transform: rotate(180deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out, padding 0.4s ease-in-out;
    background: #ffffff;
    color: #475569;
    line-height: 1.8;
}

.faq-item.active .faq-answer {
    max-height: 1000px;
    /* arbitrary max height large enough to fit content */
    padding: 20px;
}

.faq-header {
    margin-top: 60px;
    margin-bottom: 20px;
    text-align: center;
}

.faq-empty-state {
    text-align: center;
    padding: 40px;
    color: #64748b;
}

/* Chatbot Styles */
.chatbot-widget {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1000;
    font-family: 'Tajawal', sans-serif;
}

[dir="ltr"] .chatbot-widget {
    right: auto;
    left: 30px;
}

.chatbot-button {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: var(--primary-blue, #0f172a);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.chatbot-button:hover {
    transform: scale(1.1);
    background-color: var(--accent-gold, #d4af37);
}

.chatbot-window {
    position: absolute;
    bottom: 80px;
    right: 0;
    width: 350px;
    height: 500px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px) scale(0.95);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    border: 1px solid #e2e8f0;
}

[dir="ltr"] .chatbot-window {
    right: auto;
    left: 0;
}

.chatbot-window.open {
    opacity: 1;
    pointer-events: all;
    transform: translateY(0) scale(1);
}

.chatbot-header {
    background: var(--primary-blue, #0f172a);
    color: white;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
}

.chatbot-header .close-btn {
    cursor: pointer;
    font-size: 18px;
    transition: color 0.3s ease;
}

.chatbot-header .close-btn:hover {
    color: var(--accent-gold, #d4af37);
}

.chatbot-messages {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: #f8fafc;
}

.chat-msg {
    max-width: 80%;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 0.95rem;
    line-height: 1.5;
    animation: fadeIn 0.3s ease;
}

.chat-msg.bot {
    align-self: flex-start;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #334155;
    border-bottom-right-radius: 2px;
}

[dir="ltr"] .chat-msg.bot {
    border-bottom-right-radius: 12px;
    border-bottom-left-radius: 2px;
}

.chat-msg.user {
    align-self: flex-end;
    background: var(--primary-blue, #0f172a);
    color: white;
    border-bottom-left-radius: 2px;
}

[dir="ltr"] .chat-msg.user {
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 2px;
}

.chatbot-input {
    display: flex;
    padding: 15px;
    background: white;
    border-top: 1px solid #e2e8f0;
}

.chatbot-input input {
    flex: 1;
    padding: 10px 15px;
    border: 1px solid #cbd5e1;
    border-radius: 20px;
    outline: none;
    font-family: 'Tajawal', sans-serif;
    transition: border-color 0.3s ease;
}

.chatbot-input input:focus {
    border-color: var(--accent-gold, var(--gold));
}

.chatbot-input button {
    background: var(--accent-gold, var(--gold));
    color: white;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    margin-right: 10px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background 0.3s ease;
}

[dir="ltr"] .chatbot-input button {
    margin-right: 0;
    margin-left: 10px;
}

.chatbot-input button:hover {
    background: #b5952f;
}

.quick-replies {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 5px;
}

.quick-reply-btn {
    background: #e2e8f0;
    border: none;
    padding: 6px 12px;
    border-radius: 15px;
    font-size: 0.85rem;
    cursor: pointer;
    color: #475569;
    font-family: 'Tajawal', sans-serif;
    transition: all 0.2s ease;
}

.quick-reply-btn:hover {
    background: var(--primary-blue, #0f172a);
    color: white;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Why Yemen Premium Section Styles */
.wy-premium-intro {
    background: linear-gradient(135deg, var(--navy, var(--navy-m)));
    color: white;
    padding: 60px 40px;
    border-radius: 20px;
    text-align: center;
    margin-bottom: 50px;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.15);
    position: relative;
    overflow: hidden;
}

.wy-premium-intro::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.1) 0%, transparent 60%);
    z-index: 0;
}

.wy-premium-intro h2 {
    position: relative;
    z-index: 1;
    font-size: 2.2rem;
    color: var(--gold);
    margin-bottom: 20px;
}

.wy-premium-intro p {
    position: relative;
    z-index: 1;
    font-size: 1.2rem;
    line-height: 1.8;
    max-width: 800px;
    margin: 0 auto;
    color: var(--white);
}

.wy-adv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-bottom: 60px;
}

.wy-adv-card {
    background: white;
    padding: 30px;
    border-radius: 16px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-top: 4px solid transparent;
}

.wy-adv-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    border-top-color: var(--accent-gold, #d4af37);
}

.wy-adv-card i {
    font-size: 2.5rem;
    color: var(--primary-blue, #0f172a);
    margin-bottom: 20px;
    display: block;
}

.wy-adv-card h3 {
    font-size: 1.3rem;
    margin-bottom: 15px;
    color: #1e293b;
}

.wy-adv-card p {
    color: #475569;
    line-height: 1.7;
    font-size: 0.95rem;
}

.wy-stats-table-wrapper {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    margin-bottom: 60px;
}

.wy-premium-table {
    width: 100%;
    border-collapse: collapse;
}

.wy-premium-table th {
    background: var(--primary-blue, #0f172a);
    color: white;
    padding: 20px;
    text-align: right;
    font-size: 1.1rem;
}

[dir="ltr"] .wy-premium-table th {
    text-align: left;
}

.wy-premium-table td {
    padding: 20px;
    border-bottom: 1px solid #e2e8f0;
    color: #334155;
    font-size: 1.05rem;
}

.wy-premium-table tr:last-child td {
    border-bottom: none;
}

.wy-premium-table tr:nth-child(even) td {
    background: #f8fafc;
}

.wy-premium-table tr:hover td {
    background: #f1f5f9;
}

.wy-premium-table td strong {
    color: var(--accent-gold, #d4af37);
    font-size: 1.15rem;
}

.wy-sectors-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    margin-bottom: 70px;
}

.wy-sector-card {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    background: #f8fafc;
    padding: 25px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
}

.wy-sector-card:hover {
    background: white;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
    border-color: #cbd5e1;
}

.wy-sector-icon {
    width: 60px;
    height: 60px;
    background: rgba(212, 175, 55, 0.1);
    color: var(--accent-gold, #d4af37);
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.8rem;
    flex-shrink: 0;
}

.wy-sector-info h4 {
    margin: 0 0 10px 0;
    font-size: 1.2rem;
    color: var(--primary-blue, #0f172a);
}

.wy-sector-info p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #64748b;
}

/* Vertical Tabs Component (Why Invest in Yemen) */
.wy-vtabs-container {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-bottom: 60px;
}

@media (min-width: 992px) {
    .wy-vtabs-container {
        flex-direction: row-reverse;
        align-items: stretch;
    }
}

[dir="ltr"] .wy-vtabs-container {
    flex-direction: row;
}

/* Tabs List */
.wy-vtabs-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
    min-width: 300px;
}

.wy-vtab-item {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 15px;
    padding: 15px 25px;
    background: transparent;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

[dir="ltr"] .wy-vtab-item {
    justify-content: flex-start;
}

.wy-vtab-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.wy-vtab-item.active {
    background: var(--primary-blue);
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.wy-vtab-item span {
    font-size: 1.1rem;
    font-weight: 600;
    color: #334155;
    transition: color 0.3s;
}

.wy-vtab-item.active span {
    color: white;
}

.wy-vtab-icon {
    width: 45px;
    height: 45px;
    background: rgba(15, 23, 42, 0.05);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold);
    font-size: 1.2rem;
    transition: all 0.3s ease;
    clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
    /* Star-like shape from image */
}

.wy-vtab-item.active .wy-vtab-icon {
    background: var(--gold);
    color: white;
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.4);
}

/* Tab Content Box */
.wy-vtabs-content {
    flex: 2;
    background: var(--primary-blue, #0f172a);
    border-radius: 20px;
    padding: 40px;
    color: white;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.05);
    min-height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.wy-vtabs-content::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.15) 0%, transparent 70%);
    z-index: 0;
}

.wy-tab-pane {
    display: none;
    position: relative;
    z-index: 1;
    animation: fadeIn 0.4s ease forwards;
}

.wy-tab-pane.active {
    display: block;
}

.wy-tab-pane p.main-desc {
    font-size: 1.15rem;
    line-height: 1.8;
    color: #cbd5e1;
    margin-bottom: 30px;
}

/* Inner Box (like the image) */
.wy-tab-inner-box {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 16px;
    padding: 25px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.wy-tab-inner-box h4 {
    color: var(--gold);
    margin-bottom: 20px;
    font-size: 1.1rem;
    text-align: right;
}

[dir="ltr"] .wy-tab-inner-box h4 {
    text-align: left;
}

.wy-tab-inner-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.wy-tab-inner-box li {
    position: relative;
    padding-right: 20px;
    margin-bottom: 15px;
    color: #e2e8f0;
    font-size: 1.05rem;
    line-height: 1.6;
}

[dir="ltr"] .wy-tab-inner-box li {
    padding-right: 0;
    padding-left: 20px;
}

.wy-tab-inner-box li::before {
    content: '•';
    position: absolute;
    right: 0;
    color: var(--accent-gold, #d4af37);
}

[dir="ltr"] .wy-tab-inner-box li::before {
    right: auto;
    left: 0;
}

/* --- Statistics Page Styles --- */

.stats-page-header {
    text-align: center;
    padding: 60px 20px 40px;
    background: linear-gradient(to right, #0f172a, #1e293b);
    color: white;
    margin-bottom: 40px;
    border-radius: 0 0 20px 20px;
}

.stats-page-header h1 {
    font-size: 2.5rem;
    margin-bottom: 15px;
    color: #eab308;
}

.stats-page-header p {
    font-size: 1.1rem;
    color: #cbd5e1;
    max-width: 600px;
    margin: 0 auto;
}

/* Section Title */
.stats-section-title {
    text-align: center;
    margin: 40px 0 30px;
    color: #0f172a;
    position: relative;
    padding-bottom: 15px;
}

.stats-section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: #eab308;
    border-radius: 2px;
}

/* Cards Grid (reusing some concepts from index, but more refined) */
.indicators-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
    margin-bottom: 50px;
}

.indicator-card {
    background: white;
    border-radius: 12px;
    padding: 30px 20px;
    text-align: center;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s, box-shadow 0.3s;
    border-top: 4px solid var(--card-color, #eab308);
}

.indicator-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.indicator-card i {
    font-size: 40px;
    color: var(--card-color, #eab308);
    margin-bottom: 15px;
}

.indicator-card h3 {
    font-size: 2rem;
    font-weight: bold;
    color: #0f172a;
    margin-bottom: 10px;
}

.indicator-card h4 {
    font-size: 1.1rem;
    color: #334155;
    margin-bottom: 5px;
}

.indicator-card p {
    font-size: 0.9rem;
    color: #64748b;
}

/* Progress Bars Grid */
.indicators-progress-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-bottom: 50px;
    background: #f8fafc;
    padding: 40px;
    border-radius: 12px;
}

.progress-item {
    margin-bottom: 20px;
}

.progress-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    align-items: center;
}

.progress-header h4 {
    font-size: 1.1rem;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 10px;
}

.progress-header span {
    font-weight: bold;
    color: var(--card-color, #eab308);
}

.progress-header p {
    font-size: 0.85rem;
    color: #64748b;
    margin-top: 5px;
}

.progress-bar-bg {
    background: #e2e8f0;
    height: 12px;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}

.progress-bar-fill {
    height: 100%;
    background: var(--card-color, #eab308);
    border-radius: 6px;
    transition: width 1.5s ease-in-out;
    width: 0;
}

/* Charts Grid */
.indicators-charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 40px;
    margin-bottom: 50px;
}

.chart-container {
    background: white;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.chart-container h3 {
    text-align: center;
    color: #0f172a;
    margin-bottom: 5px;
}

.chart-container p {
    text-align: center;
    color: #64748b;
    margin-bottom: 20px;
    font-size: 0.9rem;
}

.canvas-wrapper {
    position: relative;
    height: 300px;
    width: 100%;
}


/* --- Contact Us Page Styles --- */

/* Hero Section like the reference image */
.contact-hero {
    position: relative;
    width: 100%;
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: url('assets/img/economy_gathering_aden.webp') no-repeat center center/cover;
    text-align: center;
    padding: 100px 20px;
    z-index: 1;
}

.contact-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(3, 14, 28, 0.7) 0%, rgba(3, 14, 28, 0.95) 100%);
    z-index: -1;
}

.contact-hero-content {
    max-width: 800px;
    margin-bottom: 50px;
}

.contact-hero-content h1 {
    font-size: 3.5rem;
    color: #ffffff;
    margin-bottom: 20px;
    font-weight: 800;
}

.contact-hero-content p {
    font-size: 1.2rem;
    color: #cbd5e1;
    line-height: 1.8;
}

/* Floating Contact Info Box */
.contact-info-box {
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 40px;
    width: 90%;
    max-width: 1000px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    gap: 30px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    transform: translateY(0);
    animation: float-up 1s ease-out forwards;
}

@keyframes float-up {
    0% {
        opacity: 0;
        transform: translateY(50px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.contact-info-item {
    text-align: center;
    color: white;
    flex: 1;
    min-width: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.contact-info-item i {
    font-size: 2rem;
    color: #eab308;
    background: rgba(255, 255, 255, 0.1);
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.contact-info-item:hover i {
    background: #eab308;
    color: #0f172a;
    transform: scale(1.1);
}

.contact-info-item h4 {
    font-size: 1.1rem;
    margin: 0;
    font-weight: 600;
}

.contact-info-item p {
    font-size: 0.95rem;
    color: #94a3b8;
    margin: 0;
    direction: ltr;
}

/* Employee Cards Section */
.employee-section {
    padding: 80px 0;
    background-color: #f8fafc;
}

.employee-section h2 {
    text-align: center;
    font-size: 2.5rem;
    color: #0f172a;
    margin-bottom: 60px;
    position: relative;
    padding-bottom: 15px;
}

.employee-section h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: #eab308;
    border-radius: 2px;
}

.emp-cards-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    perspective: 1000px;
    /* For 3D effect */
}

.emp-card {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    width: 320px;
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.1);
    position: relative;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
    opacity: 0;
    transform: translateY(30px);
}

.emp-card.show {
    opacity: 1;
    transform: translateY(0);
}

.emp-card:hover {
    transform: translateY(-15px) scale(1.03);
    box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.2);
}

/* Decorative glow on hover */
.emp-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(to bottom right,
            rgba(234, 179, 8, 0) 0%,
            rgba(234, 179, 8, 0.1) 50%,
            rgba(234, 179, 8, 0) 100%);
    transform: rotate(45deg);
    transition: all 0.5s ease;
    z-index: 1;
    opacity: 0;
    pointer-events: none;
}

.emp-card:hover::before {
    opacity: 1;
    animation: shine 1.5s infinite;
}

@keyframes shine {
    0% {
        transform: translateX(-100%) rotate(45deg);
    }

    100% {
        transform: translateX(100%) rotate(45deg);
    }
}

.emp-img-wrapper {
    width: 100%;
    height: 350px;
    overflow: hidden;
    position: relative;
}

.emp-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.emp-card:hover .emp-img-wrapper img {
    transform: scale(1.1);
}

/* Branch Badge */
.emp-branch {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(15, 23, 42, 0.85);
    color: #eab308;
    padding: 6px 15px;
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: bold;
    backdrop-filter: blur(5px);
    z-index: 2;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.emp-info {
    padding: 30px 25px;
    text-align: center;
    position: relative;
    z-index: 2;
    background: white;
}

.emp-info h3 {
    font-size: 1.5rem;
    color: #0f172a;
    margin-bottom: 5px;
    font-weight: 800;
}

.emp-info .position {
    color: #eab308;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 20px;
    display: block;
}

.emp-contact-list {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: right;
}

.emp-contact-list li {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 0.95rem;
    color: #475569;
}

.emp-contact-list li i {
    color: #64748b;
    width: 25px;
    text-align: center;
    font-size: 1.1rem;
    transition: color 0.3s;
}

.emp-card:hover .emp-contact-list li i {
    color: #0f172a;
}

.emp-contact-list li span {
    direction: ltr;
    display: inline-block;
}

.emp-action-btn {
    display: block;
    width: 100%;
    padding: 12px;
    background: #0f172a;
    color: white;
    text-align: center;
    text-decoration: none;
    border-radius: 8px;
    margin-top: 20px;
    font-weight: 600;
    transition: background 0.3s;
}

.emp-action-btn:hover {
    background: #eab308;
    color: #0f172a;
}

/* Stagger animation delays for cards */
.emp-card:nth-child(1) {
    transition-delay: 0.1s;
}

.emp-card:nth-child(2) {
    transition-delay: 0.2s;
}

.emp-card:nth-child(3) {
    transition-delay: 0.3s;
}

.emp-card:nth-child(4) {
    transition-delay: 0.4s;
}

.emp-card:nth-child(5) {
    transition-delay: 0.5s;
}



/* Fix for contact info links */
.contact-info-item p a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}

.contact-info-item p a:hover {
    color: #eab308;
}

/* President Section Styles */
.president-section {
    display: flex;
    align-items: center;
    gap: 40px;
    background: #fff;
    margin: 40px 0;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.president-image {
    flex: 1;
    border-radius: 16px;
    overflow: hidden;
}

.president-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 16px;
    max-height: 700px;
}

.president-content {
    flex: 1.2;
}

.president-badge {
    display: inline-block;
    background: rgba(26, 115, 232, 0.1);
    color: #1a73e8;
    padding: 6px 15px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 15px;
}

.president-content h2 {
    color: #2c3e50;
    font-size: 28px;
    margin-bottom: 25px;
    font-weight: 700;
    line-height: 1.4;
}

/* Index page extracted styles */
.hero-video-bg-full {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.opportunities-grid-container {
    margin-bottom: 50px;
}

.opportunity-card-clickable {
    cursor: pointer;
}

.empty-opportunities-msg {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px;
    background: #f8fafc;
    border-radius: 8px;
    color: #64748b;
}

.explore-opps-container {
    text-align: center;
    margin-bottom: 50px;
}

.explore-opps-btn {
    display: inline-block;
    padding: 12px 30px;
    font-size: 1.1rem;
    border-radius: 8px;
    background: var(--primary-blue, #0f172a);
    color: white;
    text-decoration: none;
    transition: background 0.3s;
}

.explore-opps-btn:hover {
    background: var(--gold);
}

[dir="ltr"] .slider-nav-btn {
    flex-direction: row-reverse;
}

[dir="rtl"] .slider-nav-btn {
    flex-direction: row;
}

.news-card-clickable {
    cursor: pointer;
}

.president-text {
    max-height: 500px;
    overflow-y: auto;
    padding-right: 15px;
    margin-bottom: 20px;
}

/* Custom Scrollbar for text area */
.president-text::-webkit-scrollbar {
    width: 6px;
}

.president-text::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.president-text::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
}

.president-text p {
    font-size: 16px;
    color: #555;
    line-height: 1.8;
    margin-bottom: 15px;
    text-align: justify;
}

.president-signature {
    margin-top: 25px;
    border-top: 1px solid #eee;
    padding-top: 20px;
}

.president-signature h4 {
    color: #2c3e50;
    margin: 0 0 5px 0;
    font-size: 18px;
    font-weight: bold;
}

.president-signature p {
    color: #777;
    margin: 0;
    font-size: 15px;
}

@media (max-width: 992px) {
    .president-section {
        flex-direction: column;
    }

    .president-image,
    .president-content {
        flex: unset;
        width: 100%;
    }

    .president-text {
        max-height: none;
        overflow-y: visible;
        padding-right: 0;
    }
}

/* President Word Section */
.president-word-section {
    padding: 60px 0;
    background-color: #fcfcfc;
}

.president-container {
    display: flex;
    gap: 50px;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.president-content {
    flex: 1;
}

.president-intro {
    font-size: 1.1rem;
    color: #555;
    margin-bottom: 25px;
    line-height: 1.8;
}

.president-features-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.president-features-list li {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 20px;
}

.president-features-list li i {
    color: #5fbdb2;
    /* Matching the teal from the image */
    font-size: 26px;
    margin-top: 4px;
    background: #e6f6f5;
    border-radius: 50%;
    padding: 4px;
}

.president-features-list .feature-text {
    font-size: 1.05rem;
    line-height: 1.6;
    color: #444;
}

.president-features-list .feature-text strong {
    color: #333;
    display: block;
    margin-bottom: 4px;
}

.president-image {
    flex: 1;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.president-image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.image-overlay-shape {
    position: absolute;
    bottom: -20px;
    left: -20px;
    width: 250px;
    height: 250px;
    background: linear-gradient(135deg, rgba(95, 189, 178, 0.7), rgba(4, 77, 150, 0.6));
    border-radius: 50%;
    z-index: 1;
    pointer-events: none;
}

@media (max-width: 992px) {
    .president-container {
        flex-direction: column;
    }

    .president-image {
        width: 100%;
    }
}

/* Explore Aden Button Styles */
.stunning-aden-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
    padding: 12px 20px;
    background: var(--gold);
    color: #fff !important;
    font-size: 1.1rem;
    font-weight: bold;
    text-decoration: none;
    border-radius: 8px;
    box-shadow: 0 4px 15px var(--gold-d);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    text-align: center;
    border: 2px solid transparent;
}

.stunning-aden-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px var(--gold-d);
    background: var(--secondary-blue);
    color: #fff !important;
}

.stunning-aden-btn:active {
    transform: translateY(0);
}

.stunning-aden-btn i {
    font-size: 1.3rem;
    transition: transform 0.3s;
}

.stunning-aden-btn:hover i {
    transform: rotate(20deg) scale(1.1);
}

/* Pulse animation for the button */
@keyframes pulse-aden {
    0% {
        box-shadow: 0 0 0 0 rgba(234, 88, 12, 0.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(234, 88, 12, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(234, 88, 12, 0);
    }
}

.stunning-aden-btn {
    animation: pulse-aden 2.5s infinite;
}

/* ========================================= */
/* News & Reports Page Styles                */
/* ========================================= */
.news-page-header {
    background: linear-gradient(to right, var(--bg-gray), #ffffff, var(--bg-gray));
    padding: 60px 0;
    text-align: center;
    border-bottom: 1px solid var(--border);
    margin-bottom: 50px;
}

.news-page-title {
    color: var(--primary-blue);
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 15px;
}

.news-page-subtitle {
    color: var(--text-muted);
    font-size: 18px;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

.news-empty-state {
    text-align: center;
    padding: 60px 20px;
    background: var(--bg-gray);
    border-radius: 12px;
    border: 1px dashed var(--border);
}

.news-empty-icon {
    font-size: 54px;
    color: var(--text-muted);
    margin-bottom: 20px;
}

.news-empty-text {
    font-size: 20px;
    color: var(--text-muted);
    font-weight: 500;
    margin: 0;
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 30px;
}

.news-card {
    background: var(--white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--border);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    text-decoration: none;
}

.news-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.news-img {
    height: 200px;
    overflow: hidden;
    position: relative;
}

.news-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.news-card:hover .news-img img {
    transform: scale(1.05);
}

.news-date-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: var(--gold);
    color: var(--white);
    padding: 5px 12px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 2;
}

html[dir="ltr"] .news-date-badge {
    right: auto;
    left: 15px;
}

.news-content {
    padding: 25px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.news-title {
    font-size: 18px;
    color: var(--primary-blue);
    margin: 0 0 15px 0;
    font-weight: 700;
    line-height: 1.5;
}

.news-excerpt {
    color: var(--text-dark);
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 25px;
    flex: 1;
}

.news-read-more {
    align-self: flex-start;
    padding: 8px 20px;
    background: transparent;
    color: var(--secondary-blue);
    border: 1px solid var(--secondary-blue);
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.news-read-more:hover {
    background: var(--secondary-blue);
    color: var(--white);
}

.news-read-more i {
    font-size: 12px;
    transition: transform 0.3s ease;
}

.news-card:hover .news-read-more i {
    transform: translateX(-4px);
}

html[dir="ltr"] .news-card:hover .news-read-more i {
    transform: translateX(4px);
}

/* ========================================= */
/* News Reports Page Styles                  */
/* ========================================= */
.news-page-container {
    margin-top: 100px;
    margin-bottom: 40px;
}

.news-page-header {
    background-image: url('../img/newsroom_banner.jpeg');
    background-size: cover;
    background-position: center;
    position: relative;
    padding: 100px 0;
    border: none;
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 40px;
}

.news-header-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
}

.news-header-content {
    position: relative;
    z-index: 1;
    text-align: right;
}

html[dir="ltr"] .news-header-content {
    text-align: left;
}

.news-page-title {
    color: #ffffff;
    font-size: 48px;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6);
    margin-bottom: 10px;
}

.news-page-subtitle {
    color: #f0fdfa;
    font-size: 20px;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
    margin: 0;
    max-width: 100%;
}

.news-filter-container {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 30px;
    gap: 15px;
    align-items: center;
    flex-wrap: wrap;
}

html[dir="ltr"] .news-filter-container {
    justify-content: flex-start;
}

.news-filter-form {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: row-reverse;
}

html[dir="ltr"] .news-filter-form {
    flex-direction: row;
}

.news-empty-state {
    text-align: center;
    padding: 50px 0;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px dashed #cbd5e1;
}

.news-empty-icon {
    font-size: 48px;
    color: #94a3b8;
    margin-bottom: 15px;
}

.news-empty-text {
    color: #64748b;
    font-size: 18px;
    margin: 0;
}

/* Organic Blob News Card Layout (Custom Shape) */
.bean-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 55px 30px;
    max-width: 1200px;
    margin: 40px auto 60px;
    padding: 20px 15px;
    justify-items: center;
}

/* Framing News Card Layout (Custom Double-Layered Wings Shape from Image) */
.news-framed-card {
    position: relative;
    width: 330px;
    height: 310px;
    cursor: pointer;
    margin: 15px 0;
    flex-shrink: 0;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.news-framed-card:hover {
    transform: translateY(-8px) scale(1.02);
}

/* Background Gold Accent Layer (Wings) */
.card-wing-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 20px 65px 20px 65px;
    background: var(--gold);
    box-shadow: 0 10px 25px rgba(246, 164, 0, 0.35);
    z-index: 1;
    transition: transform 0.4s ease, box-shadow 0.4s ease, background 0.4s ease;
}

html[dir="ltr"] .card-wing-layer {
    border-radius: 65px 20px 65px 20px;
}

.news-framed-card:hover .card-wing-layer {
    box-shadow: 0 16px 35px rgba(246, 164, 0, 0.5);
    background: linear-gradient(135deg, #ffb703 0%, var(--gold) 100%);
}

/* Main Inner Card Body */
.card-main-body {
    position: absolute;
    top: 8px;
    left: 8px;
    width: calc(100% - 16px);
    height: calc(100% - 16px);
    border-radius: 40px;
    border: 4px solid var(--white);
    z-index: 2;
    overflow: hidden;
    background-color: var(--primary-blue);
    box-shadow: 0 12px 30px rgba(0, 105, 179, 0.22);
    transition: all 0.4s ease;
}

.news-framed-card:hover .card-main-body {
    box-shadow: 0 18px 40px rgba(0, 105, 179, 0.38);
}

/* Background Image inside Main Body */
.card-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s ease;
}

.news-framed-card:hover .card-bg {
    transform: scale(1.12);
}

/* Gradient Overlay inside Main Body */
.card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(160deg,
            rgba(0, 105, 179, 0.8) 0%,
            rgba(26, 43, 60, 0.92) 75%,
            rgba(15, 23, 42, 0.96) 100%);
    transition: background 0.4s ease;
}

.news-framed-card:hover .card-overlay {
    background: linear-gradient(160deg,
            rgba(0, 105, 179, 0.7) 0%,
            rgba(26, 43, 60, 0.86) 75%,
            rgba(15, 23, 42, 0.93) 100%);
}

/* Content inside Main Body */
.card-content {
    position: relative;
    z-index: 3;
    height: 100%;
    padding: 30px 25px 30px 25px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: var(--white);
    text-align: right;
}

html[dir="ltr"] .card-content {
    text-align: left;
}

.card-date {
    font-size: 12px;
    color: var(--gold);
    font-weight: 600;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.card-title {
    font-size: 18px;
    font-weight: 800;
    line-height: 1.4;
    color: var(--white);
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.card-excerpt {
    font-size: 13px;
    color: #e2e8f0;
    line-height: 1.5;
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    opacity: 0.9;
}

.card-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--gold);
    transition: gap 0.3s ease, color 0.3s ease;
}

.news-framed-card:hover .card-action {
    color: #ffc107;
    gap: 12px;
}

@media (max-width: 768px) {
    .bean-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .news-framed-card {
        width: 100%;
        max-width: 330px;
        height: 300px;
    }
}

/* Modal Styles */
.news-modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.news-modal.show {
    display: flex;
    opacity: 1;
}

.news-modal-content {
    background-color: #1a1a1a;
    color: #fff;
    padding: 30px;
    border-radius: 20px;
    width: 90%;
    max-width: 600px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    transform: translateY(20px);
    transition: transform 0.3s ease;
    border: 1px solid #333;
}

.news-modal.show .news-modal-content {
    transform: translateY(0);
}

.news-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    color: #aaa;
    font-size: 20px;
    cursor: pointer;
    background: #2a2a2a;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 2;
}

[dir="rtl"] .news-modal-close {
    right: auto;
    left: 20px;
}

.news-modal-close:hover {
    color: #fff;
    background: #444;
}

.news-modal-title {
    font-size: 24px;
    font-weight: 800;
    margin: 0 0 5px 0;
    text-align: center;
    padding: 0 30px;
    line-height: 1.3;
}

.news-modal-date {
    font-size: 14px;
    color: #aaa;
    text-align: center;
    margin-bottom: 20px;
}

.news-modal-image {
    width: 100%;
    height: auto;
    max-height: 250px;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 25px;
}

.news-modal-body-container {
    flex-grow: 1;
    overflow-y: auto;
    padding-right: 15px;
    margin-bottom: 10px;
}

[dir="rtl"] .news-modal-body-container {
    padding-right: 0;
    padding-left: 15px;
}

/* Custom Scrollbar for Modal Text */
.news-modal-body-container::-webkit-scrollbar {
    width: 12px;
}

.news-modal-body-container::-webkit-scrollbar-track {
    background: transparent;
}

.news-modal-body-container::-webkit-scrollbar-thumb {
    background: #00b894;
    border-radius: 6px;
    border: 3px solid #1a1a1a;
}

.news-modal-body-container::-webkit-scrollbar-button:single-button:vertical:decrement {
    height: 16px;
    width: 12px;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2300b894'><path d='M12 4l-8 12h16z'/></svg>");
}

.news-modal-body-container::-webkit-scrollbar-button:single-button:vertical:increment {
    height: 16px;
    width: 12px;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230984e3'><path d='M12 20l8-12H4z'/></svg>");
}

.news-modal-body {
    font-size: 15px;
    line-height: 1.8;
    color: #eee;
    text-align: center;
}

/* News Filters */
.news-filters-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 40px;
    padding: 0 20px;
}

.news-filter-form {
    display: flex;
    align-items: center;
    gap: 15px;
    background-color: transparent;
    flex-wrap: wrap;
    justify-content: center;
    flex-direction: row-reverse;
    /* Put 'All' on the right if ltr, let's just keep it visually matching */
}

[dir="rtl"] .news-filter-form {
    flex-direction: row;
    /* In RTL, row makes 'All' on the right */
}

.news-filter-btn.news-filter-all {
    background-color: #fff;
    color: #1a1a1a;
    border: none;
    padding: 8px 30px;
    border-radius: 20px;
    font-weight: bold;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    font-size: 15px;
}

.news-filter-btn.news-filter-all:hover {
    background-color: #eee;
    transform: translateY(-2px);
}

.news-filter-select {
    background-color: var(--primary-blue);
    color: #fff;
    border: 1px solid var(--secondary-blue);
    padding: 8px 15px 8px 35px;
    border-radius: 20px;
    font-size: 14px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg fill='white' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
    background-repeat: no-repeat;
    background-position: left 10px center;
    transition: all 0.3s ease;
    outline: none;
    min-width: 100px;
}

[dir="ltr"] .news-filter-select {
    padding: 8px 35px 8px 15px;
    background-position: right 10px center;
}

.news-filter-select:hover,
.news-filter-select:focus {
    border-color: var(--secondary-blue);
}

.news-filter-btn {
    background-color: var(--primary-blue);
    color: #fff;
    border: 1px solid var(--secondary-blue);
    padding: 8px 30px;
    border-radius: 20px;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.news-filter-btn:hover,
.news-filter-btn:focus {
    background-color: var(--secondary-blue);
    color: #fff;
}

.news-filter-select.active-filter {
    background-color: var(--gold);
    border-color: var(--gold);
    color: var(--white);
}

.news-filter-btn.active-filter {
    background-color: var(--gold);
    color: var(--white);
    border-color: var(--gold);
    box-shadow: 0 4px 10px rgba(246, 164, 0, 0.4);
}

/* News Pagination Slider */
.news-pagination {
    display: flex;
    justify-content: center;
    margin: 50px 0;
    width: 100%;
}

.pagination-slider {
    display: flex;
    justify-content: center;
    background: var(--primary-blue);
    padding: 12px 30px;
    border-radius: 50px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 1000px;
}

.page-link {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: var(--white, #ffffff);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.page-link:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    transform: scale(1.1);
}

.page-link.active {
    background: var(--gold);
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(246, 164, 0, 0.4);
    transform: scale(1.15);
}

.page-link.prev,
.page-link.next {
    background: rgba(255, 255, 255, 0.15);
}

.page-link.prev:hover,
.page-link.next:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Custom Animated Dropdown Styles */
.custom-select-wrapper {
    position: relative;
    user-select: none;
    min-width: 140px;
}

.custom-select-trigger {
    background-color: var(--primary-blue);
    color: #fff;
    border: 1px solid var(--secondary-blue);
    padding: 8px 15px 8px 35px;
    border-radius: 20px;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease;
}

[dir="rtl"] .custom-select-trigger {
    padding: 8px 35px 8px 15px;
}

.custom-select-trigger:hover,
.custom-select-wrapper.open .custom-select-trigger {
    border-color: var(--secondary-blue);
}

.custom-select-wrapper.active-filter .custom-select-trigger {
    background-color: var(--gold);
    border-color: var(--gold);
    color: var(--white);
}

.custom-select-trigger .arrow {
    font-size: 12px;
    transition: transform 0.3s ease;
}

.custom-select-wrapper.open .custom-select-trigger .arrow {
    transform: rotate(180deg);
}

.custom-options {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 5px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 99;
}

.custom-select-wrapper.open .custom-options {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.custom-option {
    padding: 10px 15px;
    color: var(--text-dark);
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
}

.custom-option:last-child {
    border-bottom: none;
}

.custom-option:hover {
    background-color: var(--bg-gray);
    color: var(--primary-blue);
    padding-left: 20px;
}

[dir="rtl"] .custom-option:hover {
    padding-left: 15px;
    padding-right: 20px;
}

.custom-option.selected {
    background-color: var(--light-blue);
    font-weight: bold;
    color: var(--primary-blue);
}

/* News Excerpt Truncation */
.bean-excerpt,
.news-card .card-content p {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin-bottom: 10px !important;
    line-height: 1.5 !important;
    max-height: 3em !important;
    /* Fallback for browsers not supporting line-clamp */
    width: 100%;
}

/* ========================================= */
/* Lahj Investment Page Styles               */
/* ========================================= */

.lahj-container {
    width: 100%;
    max-width: 1320px;
    margin-right: auto;
    margin-left: auto;
    padding-right: 15px;
    padding-left: 15px;
}

.lahj-matrix-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.lahj-hub-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.lahj-hero {
    padding: 50px 0 40px;
    background: linear-gradient(135deg, rgba(0, 105, 179, 0.04) 0%, rgba(246, 164, 0, 0.06) 100%);
    border-bottom: 1px solid var(--border);
    margin-bottom: 40px;
}

.lahj-hero-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 30px;
    align-items: start;
}

.lahj-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-gray);
    padding: 6px 16px;
    border: 1px solid var(--border);
    border-radius: 50px;
    color: var(--primary-blue);
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 16px;
}

.lahj-hero h1 {
    font-size: 2.2rem;
    color: var(--primary-blue);
    margin-bottom: 16px;
    line-height: 1.3;
}

.lahj-hero p {
    color: #4a5568;
    line-height: 1.8;
    margin-bottom: 24px;
    font-size: 1.05rem;
}

.lahj-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 30px;
}

.lahj-btn-primary {
    background: var(--primary-blue);
    color: var(--white) !important;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 105, 179, 0.2);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.lahj-btn-primary:hover {
    background: var(--secondary-blue);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 105, 179, 0.3);
}

.lahj-btn-gold {
    background: var(--gold);
    color: var(--white) !important;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(246, 164, 0, 0.3);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.lahj-btn-gold:hover {
    background: #e09400;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(246, 164, 0, 0.4);
}

.lahj-btn-ghost {
    background: transparent;
    color: var(--primary-blue) !important;
    border: 2px solid var(--primary-blue);
    padding: 10px 22px;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.lahj-btn-ghost:hover {
    background: var(--primary-blue);
    color: var(--white) !important;
    transform: translateY(-2px);
}

.lahj-stats-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.lahj-stat-card {
    background: var(--white);
    border: 1px solid var(--border);
    padding: 16px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    text-align: center;
    border-top: 3px solid var(--gold);
}

.lahj-stat-card b {
    display: block;
    font-size: 1.35rem;
    color: var(--primary-blue);
    margin-bottom: 4px;
}

.lahj-stat-card span {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.lahj-hero-panel {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 8px 30px rgba(0, 105, 179, 0.08);
    position: relative;
    border-top: 4px solid var(--primary-blue);
}

.lahj-hero-panel h3 {
    margin-bottom: 16px;
    font-size: 1.2rem;
    color: var(--primary-blue);
    border-bottom: 2px solid var(--bg-gray);
    padding-bottom: 10px;
}

.lahj-panel-list {
    display: grid;
    gap: 12px;
}

.lahj-panel-item {
    padding-bottom: 12px;
    border-bottom: 1px dashed var(--border);
}

.lahj-panel-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.lahj-panel-item strong {
    display: block;
    color: var(--text-dark);
    font-size: 0.95rem;
    margin-bottom: 4px;
}

.lahj-panel-item div {
    font-size: 0.85rem;
    color: #64748b;
}

/* Sections & Cards */
.lahj-section {
    padding: 35px 0;
}

.lahj-section-head {
    margin-bottom: 24px;
}

.lahj-section-head h2 {
    font-size: 1.75rem;
    color: var(--primary-blue);
    margin-bottom: 8px;
    position: relative;
    display: inline-block;
}

.lahj-section-head h2::after {
    content: '';
    display: block;
    width: 50px;
    height: 3px;
    background: var(--gold);
    margin-top: 6px;
    border-radius: 2px;
}

.lahj-section-head p {
    color: #64748b;
    font-size: 0.95rem;
}

.lahj-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.lahj-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 105, 179, 0.1);
}

.lahj-card-matrix {
    border-top: none;
    position: relative;
    padding: 30px;
    text-align: right;
    min-height: 280px;
    display: flex;
    flex-direction: column;
}

[dir="rtl"] .lahj-card-matrix {
    padding-left: 80px;
}

[dir="ltr"] .lahj-card-matrix {
    text-align: left;
    padding-right: 80px;
}

.lahj-card-badge {
    position: absolute;
    top: 30px;
    left: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0, 105, 179, 0.1);
    color: var(--primary-blue);
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 0;
}

[dir="rtl"] .lahj-card-badge {
    left: 30px;
    right: auto;
}

[dir="ltr"] .lahj-card-badge {
    right: 30px;
    left: auto;
}

.lahj-card h3,
.lahj-card h4 {
    color: var(--primary-blue);
    margin-bottom: 10px;
    font-size: 1.15rem;
}

.lahj-card p {
    color: #4a5568;
    line-height: 1.7;
    font-size: 0.95rem;
}

.lahj-hub-list {
    display: grid;
    gap: 16px;
    margin-top: 12px;
}

.lahj-hub-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding-bottom: 14px;
    border-bottom: 1px dashed var(--border);
}

.lahj-hub-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.lahj-hub-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 10px;
    background: rgba(0, 105, 179, 0.08);
    display: grid;
    place-items: center;
    color: var(--primary-blue);
    font-weight: 700;
    font-size: 1.1rem;
}

.lahj-gaps-wrapper {
    background: linear-gradient(135deg, var(--bg-gray) 0%, rgba(0, 105, 179, 0.03) 100%);
    border-radius: 16px;
    padding: 32px;
    border: 1px solid var(--border);
}

.lahj-gaps-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 12px;
}

.lahj-gaps-list li {
    position: relative;
    padding-right: 24px;
    color: #4a5568;
    line-height: 1.7;
}

[dir="ltr"] .lahj-gaps-list li {
    padding-right: 0;
    padding-left: 24px;
}

.lahj-gaps-list li::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    right: 0;
    top: 2px;
    color: var(--gold);
    font-size: 0.85rem;
}

[dir="ltr"] .lahj-gaps-list li::before {
    right: auto;
    left: 0;
}

.lahj-kpi-card {
    text-align: center;
    border-top: 3px solid var(--primary-blue);
}

.lahj-kpi-num {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-blue);
    margin-bottom: 6px;
    display: block;
}

/* Source Table */
.lahj-table-wrapper {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--white);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.lahj-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 700px;
}

.lahj-table th {
    background: var(--primary-blue);
    color: var(--white);
    padding: 14px 16px;
    text-align: right;
    font-size: 0.95rem;
}

[dir="ltr"] .lahj-table th {
    text-align: left;
}

.lahj-table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    color: #334155;
    font-size: 0.9rem;
    vertical-align: top;
}

.lahj-table tr:last-child td {
    border-bottom: none;
}

.lahj-table tr:nth-child(even) {
    background-color: var(--bg-gray);
}

@media (max-width: 992px) {
    .lahj-matrix-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .lahj-hero-grid {
        grid-template-columns: 1fr;
    }

    .lahj-stats-strip {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {

    .lahj-matrix-grid,
    .lahj-hub-grid {
        grid-template-columns: 1fr;
    }

    .lahj-stats-strip {
        grid-template-columns: 1fr;
    }

    .lahj-hero h1 {
        font-size: 1.7rem;
    }

    .lahj-hero-actions {
        flex-direction: column;
    }
}

/* ========================================= */
/* 3D Sector Carousel Styles                 */
/* ========================================= */
.sectors-3d-container {
    perspective: 1200px;
    width: 100%;
    height: 700px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background: var(--white);
    border-radius: 20px;
    margin-bottom: 60px;
    position: relative;
}

.carousel-ring {
    position: relative;
    width: 600px;
    height: 600px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform-style: preserve-3d;
    transform: rotateX(70deg);
    animation: rotateRing 40s linear infinite;
}

@keyframes rotateRing {
    0% {
        transform: rotateX(70deg) rotateZ(0deg);
    }

    100% {
        transform: rotateX(70deg) rotateZ(360deg);
    }
}

.item-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    transform-style: preserve-3d;
    transform: rotateZ(var(--angle)) translateY(-300px);
}

.carousel-item {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150px;
    height: 200px;
    margin-top: -100px;
    margin-left: -75px;
    background: var(--primary-blue);
    border-radius: 75px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
    transform-style: preserve-3d;
    animation: counterRotate 40s linear infinite;
    color: var(--white);
    border: 3px solid var(--gold);
    transition: transform 0.3s, box-shadow 0.3s;
    cursor: pointer;
}

.sectors-3d-container:hover .carousel-ring,
.sectors-3d-container:hover .carousel-item {
    animation-play-state: paused;
}

.carousel-item:hover {
    box-shadow: 0 20px 40px rgba(246, 164, 0, 0.4);
}

@keyframes counterRotate {
    0% {
        transform: rotateZ(calc(-1 * var(--angle) - 0deg)) rotateX(-70deg);
    }

    100% {
        transform: rotateZ(calc(-1 * var(--angle) - 360deg)) rotateX(-70deg);
    }
}

.carousel-item i {
    font-size: 2.5rem;
    margin-bottom: 15px;
    color: var(--gold);
}

.carousel-item h3 {
    font-size: 1rem;
    margin: 0;
    font-weight: 700;
    line-height: 1.4;
}

@media (max-width: 768px) {
    .sectors-3d-container {
        height: 500px;
    }

    .carousel-ring {
        width: 320px;
        height: 320px;
    }

    .item-wrapper {
        transform: rotateZ(var(--angle)) translateY(-160px);
    }

    .carousel-item {
        width: 120px;
        height: 160px;
        margin-top: -80px;
        margin-left: -60px;
        border-radius: 60px;
        padding: 10px;
    }

    .carousel-item i {
        font-size: 1.8rem;
        margin-bottom: 8px;
    }

    .carousel-item h3 {
        font-size: 0.85rem;
    }
}


/* ========================================= */
/* Digital Library Preview Fallback Styles   */
/* ========================================= */
.pdf-fallback-container,
.file-fallback-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 20px;
    text-align: center;
}

.pdf-fallback-icon {
    font-size: 64px;
    color: #dc3545;
    margin-bottom: 20px;
}

.file-fallback-icon {
    font-size: 64px;
    color: #6c757d;
    margin-bottom: 20px;
}

.pdf-fallback-text,
.file-fallback-title {
    font-size: 18px;
    color: #333;
    margin-bottom: 10px;
}

.file-fallback-desc {
    font-size: 16px;
    color: #666;
    margin-bottom: 25px;
}

.pdf-fallback-btn,
.file-fallback-btn {
    background: var(--primary-blue);
    color: white;
    padding: 10px 20px;
    border-radius: 6px;
    text-decoration: none;
    margin-top: 15px;
}

.ext-upper {
    text-transform: uppercase;
}

/* ========================================= */
/* Wireframe Helper Styles                   */
/* ========================================= */
.wf-box {
    background: #ddd;
    border: 2px dashed #aaa;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    font-size: 13px;
    text-align: center;
}

.wf-solid {
    background: #bbb;
    border: 2px solid #999;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #444;
    font-size: 13px;
    font-weight: bold;
}

.wf-accent {
    background: #f9ab03;
    opacity: 0.5;
    border: 2px solid #c88a00;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    font-size: 13px;
    font-weight: bold;
}

.wf-blue {
    background: #0368bd;
    opacity: 0.4;
    border: 2px solid #024a8a;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 13px;
    font-weight: bold;
}

.wf-section {
    background: white;
    margin: 16px;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.wf-section h3 {
    font-size: 13px;
    color: #0368bd;
    border-bottom: 2px solid #0368bd;
    padding-bottom: 6px;
    margin-bottom: 12px;
}

.annotation {
    font-size: 10px;
    color: #e74c3c;
    background: #ffeaea;
    border: 1px solid #e74c3c;
    border-radius: 3px;
    padding: 2px 6px;
    display: inline-block;
    margin-top: 4px;
}

.screen-label {
    background: #0368bd;
    color: white;
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 4px 4px 0 0;
    display: inline-block;
    margin-bottom: 0;
}

/* ========================================= */
/* Mining Sector Landing Page Styles         */
/* ========================================= */
.mining-landing-wrapper {
    --color-bg: #f4f8fc;
    --color-surface: #ffffff;
    --color-surface-2: #edf4fb;
    --color-surface-offset: #e4eef8;
    --color-border: rgba(18, 71, 126, 0.14);
    --color-divider: rgba(18, 71, 126, 0.09);
    --color-text: #0d2742;
    --color-text-muted: #5f748a;
    --color-text-faint: #97a7b8;
    --color-text-inverse: #ffffff;
    --color-primary: #0b63a9;
    --color-primary-hover: #084d85;
    --color-primary-highlight: #d9eaf8;
    --color-orange: #f28c28;
    --color-orange-deep: #d97210;
    --color-orange-soft: #fff1e1;
    --radius-sm: 0.5rem;
    --radius-md: 0.9rem;
    --radius-lg: 1.25rem;
    --radius-xl: 1.75rem;
    --radius-full: 9999px;
    --shadow-sm: 0 10px 24px rgba(12, 52, 92, 0.06);
    --shadow-md: 0 18px 45px rgba(12, 52, 92, 0.09);
    --shadow-lg: 0 28px 80px rgba(12, 52, 92, 0.12);
    --content: 1180px;
    --transition: 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="dark"] .mining-landing-wrapper {
    --color-bg: #0b1624;
    --color-surface: #102033;
    --color-surface-2: #14283d;
    --color-surface-offset: #183149;
    --color-border: rgba(255, 255, 255, 0.10);
    --color-divider: rgba(255, 255, 255, 0.07);
    --color-text: #eef5fb;
    --color-text-muted: #b2c0cf;
    --color-text-faint: #7d90a3;
    --color-text-inverse: #07121e;
    --color-primary: #53a4e2;
    --color-primary-hover: #7bb8ea;
    --color-primary-highlight: rgba(83, 164, 226, 0.18);
    --color-orange: #ffab4e;
    --color-orange-deep: #f28c28;
    --color-orange-soft: rgba(255, 171, 78, 0.12);
    --shadow-sm: 0 10px 24px rgba(0, 0, 0, 0.22);
    --shadow-md: 0 18px 45px rgba(0, 0, 0, 0.28);
    --shadow-lg: 0 28px 80px rgba(0, 0, 0, 0.34);
}

.mining-landing-wrapper {
    font-family: inherit;
    color: var(--color-text);
    background:
        radial-gradient(circle at top right, rgba(11, 99, 169, 0.10), transparent 25%),
        radial-gradient(circle at bottom left, rgba(242, 140, 40, 0.08), transparent 22%),
        var(--color-bg);
    padding-bottom: 3rem;
    margin-top: 60px;
    margin-bottom: 40px;
}

.mining-landing-wrapper .mining-container {
    width: min(calc(100% - 2rem), var(--content));
    margin-inline: auto;
}

.mining-landing-wrapper .section {
    padding: clamp(3.5rem, 6vw, 5rem) 0;
}

.mining-landing-wrapper .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .45rem .9rem;
    border-radius: var(--radius-full);
    background: var(--color-primary-highlight);
    color: var(--color-primary);
    font-size: 0.875rem;
    font-weight: 700;
}

.mining-landing-wrapper .eyebrow::before {
    content: "";
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: var(--color-orange);
    box-shadow: 0 0 0 6px rgba(242, 140, 40, 0.12);
}

/* Eye-Catching Mining Sector Header Bar */
.mining-header-bar {
    position: relative;
    z-index: 99;
    margin-bottom: 2rem;
    padding: 1.2rem 1.5rem;
    background: linear-gradient(135deg, rgba(11, 99, 169, 0.94) 0%, rgba(6, 45, 79, 0.98) 100%);
    border-radius: 20px;
    border: 1.5px solid rgba(242, 140, 40, 0.4);
    box-shadow: 0 12px 35px rgba(11, 99, 169, 0.22), 0 0 25px rgba(242, 140, 40, 0.15);
    overflow: hidden;
    backdrop-filter: blur(16px);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.mining-header-bar:hover {
    border-color: rgba(242, 140, 40, 0.7);
    box-shadow: 0 16px 40px rgba(11, 99, 169, 0.3), 0 0 35px rgba(242, 140, 40, 0.25);
    transform: translateY(-2px);
}

.mining-header-bar::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 280px;
    height: 100%;
    background: radial-gradient(circle at top right, rgba(242, 140, 40, 0.28), transparent 70%);
    pointer-events: none;
}

.mining-header-bar-inner {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.mining-gem-badge {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    background: linear-gradient(135deg, #f28c28 0%, #d97210 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1.65rem;
    box-shadow: 0 8px 22px rgba(242, 140, 40, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.4);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    flex-shrink: 0;
}

.mining-header-bar:hover .mining-gem-badge {
    transform: scale(1.08) rotate(6deg);
    box-shadow: 0 12px 28px rgba(242, 140, 40, 0.65);
}

.mining-header-titles {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.mining-header-subtitle {
    font-size: 0.82rem;
    font-weight: 700;
    color: #ffab4e;
    letter-spacing: 0.5px;
}

.mining-header-main-title {
    font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.95rem);
    font-weight: 900;
    color: #ffffff;
    margin: 0;
    line-height: 1.2;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.mining-hero {
    padding: clamp(3rem, 6vw, 5rem) 0 2rem;
}

.mining-hero-grid {
    display: grid;
    grid-template-columns: 1.18fr .82fr;
    gap: 2rem;
    align-items: center;
}

.mining-hero h1 {
    margin: 1rem 0 1.25rem;
    font-size: clamp(1.8rem, 1.35rem + 1.8vw, 3.2rem);
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--color-text);
}

.mining-hero p {
    margin: 0 0 1.4rem;
    color: var(--color-text-muted);
    max-width: 60ch;
    font-size: 1.05rem;
}

.mining-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
    margin-top: 1.7rem;
}

.mining-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    min-height: 48px;
    padding: .9rem 1.4rem;
    border-radius: var(--radius-full);
    border: 1px solid transparent;
    transition: transform var(--transition), background var(--transition), border-color var(--transition), color var(--transition);
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none;
}

.mining-btn:hover {
    transform: translateY(-2px);
}

.mining-btn-primary {
    background: linear-gradient(135deg, var(--color-primary), #1d78be);
    color: #ffffff !important;
    box-shadow: var(--shadow-md);
}

.mining-btn-secondary {
    border-color: var(--color-border);
    background: var(--color-surface);
    color: var(--color-primary) !important;
}

.mining-hero-card {
    position: relative;
    min-height: 500px;
    border-radius: 30px;
    background: linear-gradient(180deg, #0d5f9f, #0f2d49 78%);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    padding: 2rem;
    color: #fff;
    isolation: isolate;
}

.mining-hero-card::before {
    content: "";
    position: absolute;
    inset: auto auto -60px -60px;
    width: 230px;
    height: 230px;
    border-radius: 50%;
    background: rgba(242, 140, 40, 0.22);
    filter: blur(8px);
    z-index: -1;
}

.mining-hero-card::after {
    content: "";
    position: absolute;
    top: -40px;
    left: -30px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    z-index: -1;
}

.mining-visual {
    position: absolute;
    inset: 0;
    opacity: .95;
}

.mining-hero-panel {
    position: absolute;
    inset: auto 1.4rem 1.4rem 1.4rem;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(8px);
    border-radius: 24px;
    padding: 1.2rem;
    color: #ffffff;
}

.mining-hero-panel strong {
    display: block;
    font-size: 1.1rem;
    margin-bottom: .3rem;
}

.mining-hero-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 1.8rem;
}

.mining-stat-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    padding: 1.4rem;
}

.mining-stat-card .value {
    display: block;
    font-size: clamp(1.8rem, 2vw, 2.3rem);
    line-height: 1.1;
    font-weight: 800;
    color: var(--color-primary);
    margin-bottom: .4rem;
}

.mining-stat-card small {
    color: var(--color-text-muted);
    font-size: 0.825rem;
}

.mining-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.8rem;
    flex-wrap: wrap;
}

.mining-section-head h2 {
    margin: .8rem 0 0;
    font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem);
    line-height: 1.2;
    color: var(--color-text);
}

.mining-section-head p {
    margin: 0;
    color: var(--color-text-muted);
    max-width: 58ch;
}

.mining-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
}

.mining-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
}

.mining-feature-card,
.mining-opportunity-card,
.mining-program-card,
.mining-province-card,
.mining-reason-card {
    padding: 1.5rem;
    height: 100%;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.mining-feature-card:hover,
.mining-opportunity-card:hover,
.mining-program-card:hover,
.mining-province-card:hover,
.mining-reason-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
}

.mining-icon-badge {
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 1rem;
    display: grid;
    place-items: center;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, var(--color-primary-highlight), var(--color-orange-soft));
    color: var(--color-primary);
    font-size: 1.4rem;
}

.mining-feature-card h3,
.mining-opportunity-card h3,
.mining-program-card h3,
.mining-province-card h3,
.mining-reason-card h3 {
    margin: 0 0 .65rem;
    font-size: 1.1rem;
    color: var(--color-text);
}

.mining-feature-card p,
.mining-opportunity-card p,
.mining-program-card p,
.mining-province-card p,
.mining-reason-card p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.95rem;
}

.mining-value-band {
    background: linear-gradient(135deg, #0c4f86, #0f2d49);
    color: #fff;
    border-radius: 32px;
    padding: clamp(1.8rem, 4vw, 2.8rem);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.mining-value-band::after {
    content: "";
    position: absolute;
    inset: auto -40px -60px auto;
    width: 220px;
    height: 220px;
    background: rgba(242, 140, 40, .18);
    border-radius: 50%;
    filter: blur(12px);
}

.mining-value-band-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 1.5rem;
    align-items: center;
}

.mining-value-band ul {
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: .8rem;
}

.mining-value-band li {
    position: relative;
    padding-inline-start: 1.5rem;
    color: rgba(255, 255, 255, .9);
    font-size: 0.95rem;
}

.mining-value-band li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: .6rem;
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: var(--color-orange);
    box-shadow: 0 0 0 5px rgba(242, 140, 40, .16);
}

.mining-value-boxes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.mining-value-box {
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 22px;
    padding: 1.1rem;
}

.mining-value-box strong {
    display: block;
    margin-bottom: .35rem;
    color: #fff;
    font-size: 1.05rem;
}

.mining-value-box span {
    color: rgba(255, 255, 255, .8);
    font-size: 0.9rem;
}

.mining-table-wrap {
    overflow-x: auto;
    border-radius: 24px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}

.mining-table-wrap table {
    width: 100%;
    border-collapse: collapse;
    min-width: 780px;
}

.mining-table-wrap th,
.mining-table-wrap td {
    padding: 1.1rem 1.2rem;
    text-align: right;
    border-bottom: 1px solid var(--color-divider);
    vertical-align: top;
    font-size: 0.95rem;
}

html[dir="ltr"] .mining-table-wrap th,
html[dir="ltr"] .mining-table-wrap td {
    text-align: left;
}

.mining-table-wrap th {
    background: linear-gradient(180deg, var(--color-surface-2), var(--color-surface));
    color: var(--color-primary);
    font-size: 0.9rem;
    font-weight: 700;
}

.mining-table-wrap tbody tr:last-child td {
    border-bottom: none;
}

.mining-list-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
}

.mining-tagline {
    display: inline-flex;
    margin-bottom: .7rem;
    padding: .35rem .75rem;
    border-radius: var(--radius-full);
    background: var(--color-orange-soft);
    color: var(--color-orange-deep);
    font-size: 0.85rem;
    font-weight: 700;
}

.mining-message-card {
    padding: clamp(1.8rem, 4vw, 2.8rem);
    background: linear-gradient(135deg, var(--color-surface), var(--color-surface-2));
    border: 1px solid var(--color-border);
    border-radius: 28px;
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
}

.mining-message-card::before {
    content: "";
    position: absolute;
    top: -40px;
    left: -30px;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: rgba(11, 99, 169, 0.08);
}

.mining-message-card::after {
    content: "";
    position: absolute;
    bottom: -60px;
    right: -30px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: rgba(242, 140, 40, 0.10);
}

.mining-message-card>* {
    position: relative;
    z-index: 1;
}

@media (max-width: 980px) {

    .mining-hero-grid,
    .mining-value-band-grid,
    .mining-grid-3,
    .mining-grid-2,
    .mining-list-grid {
        grid-template-columns: 1fr;
    }

    .mining-hero-card {
        min-height: 420px;
    }

    .mining-hero-stats {
        grid-template-columns: 1fr;
    }

    .mining-nav-links {
        display: none;
    }

    .mining-value-boxes {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .mining-hero-card {
        padding: 1.25rem;
        border-radius: 24px;
    }

    .mining-landing-wrapper .section {
        padding: 3.2rem 0;
    }
}

/* Mining Bottom Grid (Side-by-Side Cards) */
.mining-bottom-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    align-items: stretch;
}

.mining-message-card {
    height: 100%;
    margin-top: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* Mining Sector Opportunities CTA Transition Box */
.mining-cta-card {
    margin-top: 0;
    height: 100%;
    background: var(--color-surface);
    border: 1.5px solid var(--color-border);
    border-radius: 28px;
    padding: clamp(1.8rem, 3.5vw, 2.5rem);
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.mining-cta-card:hover {
    box-shadow: var(--shadow-lg);
    border-color: color-mix(in srgb, var(--color-orange) 45%, var(--color-border));
}

.mining-cta-title {
    font-size: clamp(1.3rem, 1rem + 0.8vw, 1.8rem);
    font-weight: 800;
    color: var(--color-primary);
    margin-bottom: 0.6rem;
    line-height: 1.25;
}

.mining-cta-desc {
    color: var(--color-text-muted);
    font-size: 0.98rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.mining-cta-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.2rem;
}

.mining-cta-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0.85rem 1.8rem;
    background: linear-gradient(135deg, var(--color-orange) 0%, var(--color-orange-deep) 100%);
    color: #ffffff !important;
    text-decoration: none !important;
    border-radius: 14px;
    font-size: 1rem;
    font-weight: 800;
    box-shadow: 0 10px 24px rgba(242, 140, 40, 0.4);
    transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
    border: none;
}

.mining-cta-btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(242, 140, 40, 0.55);
    background: linear-gradient(135deg, #ff9d3b 0%, var(--color-orange-deep) 100%);
}

.mining-cta-btn-primary i {
    font-size: 1rem;
}

.mining-cta-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0.75rem 1.6rem;
    background: var(--color-surface);
    border: 2px solid var(--color-primary);
    color: var(--color-primary) !important;
    text-decoration: none !important;
    border-radius: 14px;
    font-size: 0.95rem;
    font-weight: 800;
    transition: transform var(--transition), background var(--transition), border-color var(--transition), color var(--transition);
}

.mining-cta-btn-secondary:hover {
    transform: translateY(-2px);
    background: var(--color-primary-highlight);
    border-color: var(--color-primary-hover);
}

.mining-cta-note {
    font-size: 0.88rem;
    color: var(--color-text-faint);
    margin: 0;
    font-weight: 500;
}

@media (max-width: 980px) {
    .mining-bottom-grid {
        grid-template-columns: 1fr;
    }
}

/* ========================================================= */
/* Investor Services Guide (س-01) - Gold & Primary Blue     */
/* ========================================================= */
.investor-service-landing {
    --gold: #f28c28;
    --gold-deep: #d97210;
    --gold-soft: rgba(242, 140, 40, 0.12);
    --primary-navy: #0b63a9;
    --primary-blue: #0056cc;
    --primary-soft: rgba(11, 99, 169, 0.10);
    --dark-blue: #072b4a;
}

/* Service Hero Banner */
.service-hero-card {
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy) 100%);
    border-radius: 28px;
    padding: clamp(2rem, 5vw, 3.5rem);
    position: relative;
    overflow: hidden;
    box-shadow: 0 16px 45px rgba(7, 43, 74, 0.35);
    border: 1.5px solid rgba(242, 140, 40, 0.4);
    margin-bottom: 2.5rem;
}

.service-hero-card::before {
    content: '';
    position: absolute;
    top: -50px;
    left: -50px;
    width: 250px;
    height: 250px;
    /* background: radial-gradient(circle, rgba(242, 140, 40, 0.35), transparent 70%); */
    pointer-events: none;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    padding: 6px 16px;
    border-radius: 30px;
    font-size: 0.88rem;
    font-weight: 700;
    color: #ffab4e;
    margin-bottom: 1.2rem;
    backdrop-filter: blur(10px);
}

.service-hero-title {
    font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.7rem);
    font-weight: 900;
    line-height: 1.25;
    margin-bottom: 1rem;
    color: #ffffff;
}

.gold-code {
    color: #f28c28;
    background: rgba(242, 140, 40, 0.15);
    padding: 2px 14px;
    border-radius: 12px;
    border: 1px solid rgba(242, 140, 40, 0.5);
    display: inline-block;
}

.service-hero-desc {
    font-size: 1.1rem;
    color: #d0e4f7;
    max-width: 75ch;
    line-height: 1.7;
    margin-bottom: 2rem;
}

.service-stats-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.stat-pill {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 8px 18px;
    border-radius: 12px;
    font-size: 0.92rem;
    font-weight: 700;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 8px;
}

.stat-pill i {
    color: #f28c28;
}

/* Quick Navigation Bar */
.service-subnav-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    overflow-x: auto;
    padding: 8px;
    background: #ffffff;
    border: 1px solid rgba(11, 99, 169, 0.14);
    border-radius: 20px;
    box-shadow: 0 8px 25px rgba(11, 99, 169, 0.08);
    margin-bottom: 3rem;
}

.subnav-item {
    padding: 10px 20px;
    border-radius: 14px;
    color: #0b63a9 !important;
    text-decoration: none !important;
    font-weight: 700;
    font-size: 0.92rem;
    white-space: nowrap;
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.subnav-item:hover,
.subnav-item.active {
    background: linear-gradient(135deg, #0b63a9 0%, #0056cc 100%);
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(11, 99, 169, 0.25);
}

.subnav-item i {
    color: #f28c28;
}

.subnav-item:hover i,
.subnav-item.active i {
    color: #ffab4e;
}

/* Service Section Title */
.service-section {
    margin-bottom: 4rem;
}

.section-title-wrap {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.section-num {
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, #f28c28 0%, #d97210 100%);
    color: #ffffff;
    font-weight: 900;
    font-size: 1.4rem;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(242, 140, 40, 0.35);
    flex-shrink: 0;
}

.section-title-wrap h2 {
    font-size: 1.6rem;
    font-weight: 800;
    color: #072b4a;
    margin: 0 0 4px;
}

.section-title-wrap p {
    margin: 0;
    color: #5f748a;
    font-size: 0.98rem;
}

/* Documents Grid */
.docs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 1.5rem;
}

.doc-card {
    background: #ffffff;
    border: 1.5px solid rgba(11, 99, 169, 0.12);
    border-radius: 20px;
    padding: 1.6rem;
    position: relative;
    box-shadow: 0 10px 25px rgba(11, 99, 169, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.doc-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 35px rgba(11, 99, 169, 0.14);
    border-color: #f28c28;
}

.doc-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: rgba(11, 99, 169, 0.08);
    color: #0b63a9;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.doc-number {
    position: absolute;
    top: 1.4rem;
    left: 1.4rem;
    font-size: 1.2rem;
    font-weight: 900;
    color: rgba(11, 99, 169, 0.15);
}

.doc-card h3 {
    font-size: 1.12rem;
    font-weight: 800;
    color: #072b4a;
    margin-bottom: 0.6rem;
}

.doc-card p {
    font-size: 0.92rem;
    color: #5f748a;
    line-height: 1.6;
    margin-bottom: 1.2rem;
}

.doc-tag {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    align-self: flex-start;
}

.doc-tag.mandatory {
    background: rgba(242, 140, 40, 0.12);
    color: #d97210;
    border: 1px solid rgba(242, 140, 40, 0.3);
}

.doc-tag.conditional {
    background: rgba(11, 99, 169, 0.08);
    color: #0b63a9;
    border: 1px solid rgba(11, 99, 169, 0.2);
}

/* Timeline Phase Steps */
.steps-timeline {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.timeline-phase {
    background: #ffffff;
    border: 1.5px solid rgba(11, 99, 169, 0.12);
    border-radius: 24px;
    padding: 1.8rem;
    box-shadow: 0 10px 30px rgba(11, 99, 169, 0.06);
}

.phase-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
    border-bottom: 2px dashed rgba(11, 99, 169, 0.12);
}

.phase-header i {
    font-size: 1.3rem;
    color: #f28c28;
}

.phase-header h3 {
    font-size: 1.25rem;
    font-weight: 800;
    color: #0b63a9;
    margin: 0;
}

.phase-steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
}

.step-card {
    background: #f8fafc;
    border: 1px solid rgba(11, 99, 169, 0.12);
    border-radius: 16px;
    padding: 1.25rem;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.step-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(11, 99, 169, 0.1);
    border-color: #0b63a9;
}

.step-badge {
    display: inline-block;
    background: #0b63a9;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 8px;
    margin-bottom: 0.75rem;
}

.step-card h4 {
    font-size: 1.05rem;
    font-weight: 800;
    color: #072b4a;
    margin-bottom: 0.5rem;
}

.step-card p {
    font-size: 0.88rem;
    color: #5f748a;
    line-height: 1.55;
    margin-bottom: 0.85rem;
}

.step-output {
    font-size: 0.8rem;
    font-weight: 700;
    color: #0b63a9;
    background: rgba(11, 99, 169, 0.08);
    padding: 6px 10px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.step-card.gold-card {
    background: linear-gradient(135deg, #fffbf5 0%, #fff6ea 100%);
    border-color: rgba(242, 140, 40, 0.4);
}

.step-card.gold-card .step-badge {
    background: linear-gradient(135deg, #f28c28 0%, #d97210 100%);
}

.step-card.gold-card .step-output {
    color: #d97210;
    background: rgba(242, 140, 40, 0.12);
}

/* Interactive Flowchart Roadmap */
.flowchart-container {
    background: linear-gradient(135deg, #072b4a 0%, #0b63a9 100%);
    border-radius: 28px;
    padding: clamp(2rem, 4vw, 3.5rem);
    color: #ffffff;
    box-shadow: 0 16px 45px rgba(7, 43, 74, 0.3);
    border: 1.5px solid rgba(242, 140, 40, 0.4);
}

.flow-tree {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
    max-width: 800px;
    margin: 0 auto;
}

.flow-node {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(12px);
    border-radius: 20px;
    padding: 1.1rem 2rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    width: 100%;
    max-width: 520px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
}

.flow-node:hover {
    transform: scale(1.03);
    border-color: #f28c28;
}

.flow-node.gold-node {
    background: linear-gradient(135deg, rgba(242, 140, 40, 0.25) 0%, rgba(217, 114, 16, 0.35) 100%);
    border-color: #f28c28;
}

.flow-node.node-start {
    border-color: #ffab4e;
}

.flow-node.node-end {
    background: linear-gradient(135deg, #f28c28 0%, #d97210 100%);
    border-color: #ffffff;
}

.node-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: #ffab4e;
    flex-shrink: 0;
}

.node-end .node-icon {
    color: #ffffff;
}

.node-content strong {
    display: block;
    font-size: 1.1rem;
    font-weight: 800;
    color: #ffffff;
}

.node-content span {
    font-size: 0.88rem;
    color: #d0e4f7;
}

.flow-arrow {
    color: #f28c28;
    font-size: 1.4rem;
    animation: bounceDown 2s infinite;
}

@keyframes bounceDown {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(6px);
    }

    60% {
        transform: translateY(3px);
    }
}

.flow-decision {
    width: 100%;
    max-width: 680px;
}

.decision-box {
    background: linear-gradient(135deg, #f28c28 0%, #d97210 100%);
    color: #ffffff;
    padding: 1rem 1.8rem;
    border-radius: 18px;
    text-align: center;
    font-weight: 800;
    font-size: 1.05rem;
    box-shadow: 0 8px 20px rgba(242, 140, 40, 0.4);
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.decision-box.blue-box {
    background: linear-gradient(135deg, #0b63a9 0%, #072b4a 100%);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.decision-branches {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}

.branch {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.badge-no {
    background: #ef4444;
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 800;
    padding: 3px 12px;
    border-radius: 12px;
    margin-bottom: 8px;
}

.badge-yes {
    background: #10b981;
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 800;
    padding: 3px 12px;
    border-radius: 12px;
    margin-bottom: 8px;
}

.badge-route {
    background: rgba(255, 255, 255, 0.2);
    color: #ffab4e;
    font-size: 0.78rem;
    font-weight: 800;
    padding: 3px 12px;
    border-radius: 12px;
    margin-bottom: 8px;
}

.branch-card {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 1rem;
    border-radius: 16px;
    text-align: center;
    width: 100%;
}

.branch-card.gold-border {
    border-color: #f28c28;
}

.branch-card i {
    font-size: 1.4rem;
    color: #f28c28;
    margin-bottom: 6px;
    display: block;
}

.branch-card strong {
    display: block;
    color: #ffffff;
    font-size: 0.95rem;
    margin-bottom: 4px;
}

.branch-card span {
    font-size: 0.82rem;
    color: #d0e4f7;
}

/* Service Action CTA Box */
.service-action-cta {
    background: #ffffff;
    border: 2px solid #0b63a9;
    border-radius: 28px;
    padding: clamp(2rem, 4vw, 3rem);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    box-shadow: 0 16px 40px rgba(11, 99, 169, 0.12);
}

.cta-eyebrow {
    color: #f28c28;
    font-weight: 800;
    font-size: 0.92rem;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 0.5rem;
}

.cta-content h2 {
    font-size: 1.6rem;
    font-weight: 900;
    color: #072b4a;
    margin-bottom: 0.6rem;
}

.cta-content p {
    color: #5f748a;
    font-size: 1rem;
    margin: 0;
    max-width: 60ch;
}

.cta-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-shrink: 0;
}

.btn-primary-gold {
    background: linear-gradient(135deg, #f28c28 0%, #d97210 100%);
    color: #ffffff !important;
    text-decoration: none !important;
    padding: 12px 28px;
    border-radius: 14px;
    font-weight: 800;
    font-size: 1.02rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 8px 20px rgba(242, 140, 40, 0.4);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.btn-primary-gold:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(242, 140, 40, 0.55);
}

.btn-secondary-blue {
    background: #ffffff;
    border: 2px solid #0b63a9;
    color: #0b63a9 !important;
    text-decoration: none !important;
    padding: 10px 24px;
    border-radius: 14px;
    font-weight: 800;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: transform 0.25s ease, background 0.25s ease;
}

.btn-secondary-blue:hover {
    transform: translateY(-2px);
    background: rgba(11, 99, 169, 0.08);
}

@media (max-width: 900px) {
    .service-action-cta {
        flex-direction: column;
        align-items: flex-start;
    }

    .cta-buttons {
        width: 100%;
    }

    .btn-primary-gold,
    .btn-secondary-blue {
        width: 100%;
    }

    .decision-branches {
        grid-template-columns: 1fr;
    }
}

/* ========================================================= */
/* Modern Aftercare Page Styles (Using :root variables only) */
/* ========================================================= */
.aftercare-landing-wrapper {
    margin-top: 100px;
    margin-bottom: 50px;
}

/* Hero Section */
.ac-hero-card {
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-m) 50%, var(--primary-blue) 100%);
    border-radius: 28px;
    padding: clamp(2rem, 4vw, 3.5rem);
    color: var(--white);
    position: relative;
    overflow: hidden;
    box-shadow: 0 16px 45px rgba(2, 26, 58, 0.35);
    border: 1.5px solid var(--gold-l);
    margin-bottom: 2.5rem;
}

.ac-hero-card::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -60px;
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, rgba(251, 137, 2, 0.3), transparent 70%);
    pointer-events: none;
}

.ac-hero-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 2.5rem;
    align-items: center;
}

.ac-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    padding: 6px 16px;
    border-radius: 30px;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--gold-l);
    margin-bottom: 1.2rem;
    backdrop-filter: blur(10px);
}

.ac-hero-title {
    font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.7rem);
    font-weight: 900;
    line-height: 1.25;
    margin-bottom: 1rem;
    color: var(--white);
}

.gold-accent {
    color: var(--gold);
    /* background: rgba(251, 137, 2, 0.15); */
    padding: 2px 12px;
    border-radius: 12px;
    /* border: 1px solid var(--gold); */
    display: inline-block;
}

.ac-hero-desc {
    font-size: 1.05rem;
    color: var(--blue-l);
    line-height: 1.7;
    margin-bottom: 2rem;
}

.ac-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.ac-btn-primary-gold {
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-d) 100%);
    color: var(--white) !important;
    text-decoration: none !important;
    padding: 12px 28px;
    border-radius: 14px;
    font-weight: 800;
    font-size: 1.02rem;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 8px 22px rgba(251, 137, 2, 0.45);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.ac-btn-primary-gold:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(251, 137, 2, 0.6);
}

.ac-btn-secondary-blue {
    background: rgba(255, 255, 255, 0.12);
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    color: var(--white) !important;
    text-decoration: none !important;
    padding: 11px 24px;
    border-radius: 14px;
    font-weight: 800;
    font-size: 0.98rem;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: transform 0.25s ease, background 0.25s ease;
}

.ac-btn-secondary-blue:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.22);
}

/* Tracking Card - Matching Reference Image */
.ac-track-card {
    background: rgba(18, 43, 76, 0.85);
    color: var(--white);
    border-radius: 20px;
    padding: 1.8rem;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px);
}

.track-card-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    margin-bottom: 1.5rem;
}

.track-card-header h3 {
    font-size: 1.35rem;
    font-weight: 900;
    color: var(--white);
    margin: 0;
}

.track-form-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 1rem;
}

.track-input {
    width: 100%;
    padding: 13px 16px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.08);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--white);
    outline: none;
    transition: border-color 0.25s ease, background 0.25s ease;
}

.track-input::placeholder {
    color: #8da4be;
}

.track-input:focus {
    border-color: #ffaa00;
    background: rgba(255, 255, 255, 0.14);
}

.btn-track-submit {
    width: 100%;
    padding: 14px;
    background: var(--gold);
    color: #07192e;
    border: none;
    border-radius: 12px;
    font-weight: 900;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(255, 170, 0, 0.4);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-track-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px var(--blue);
    background: var(--primary-blue);
}

.track-divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: #6c88a8;
    font-size: 0.88rem;
    font-weight: 700;
    margin: 1.2rem 0;
}

.track-divider::before,
.track-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.track-divider span {
    padding: 0 12px;
}

.btn-newcase-outline {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid #ffaa00;
    background: transparent;
    color: #ffaa00 !important;
    font-weight: 800;
    font-size: 0.98rem;
    text-decoration: none !important;
    transition: all 0.25s ease;
}

.btn-newcase-outline:hover {
    background: rgba(255, 170, 0, 0.12);
    transform: translateY(-2px);
}

/* Stats Bar */
.ac-stats-bar {
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: 24px;
    padding: 1.5rem 2rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
    margin-bottom: 3.5rem;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
}

.ac-stat-item {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--blue-xl);
    color: var(--primary-blue);
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ac-stat-item.gold-stat .stat-icon {
    background: var(--gold-xl);
    color: var(--gold-d);
}

.stat-number {
    display: block;
    font-size: 1.6rem;
    font-weight: 900;
    color: var(--text-dark);
    line-height: 1.2;
}

.ac-stat-item.gold-stat .stat-number {
    color: var(--gold-d);
}

.stat-label {
    font-size: 0.88rem;
    color: var(--text-muted);
    font-weight: 600;
}

/* Section Common */
.ac-section {
    margin-bottom: 4rem;
}

.ac-sec-header {
    margin-bottom: 2rem;
}

.ac-sec-header.text-center {
    text-align: center;
}

.sec-eyebrow {
    display: inline-block;
    color: var(--gold);
    font-weight: 800;
    font-size: 0.88rem;
    background: var(--gold-xl);
    padding: 4px 14px;
    border-radius: 10px;
    border: 1px solid var(--gold-l);
    margin-bottom: 0.6rem;
}

.ac-sec-header h2 {
    font-size: clamp(1.5rem, 1.2rem + 1vw, 2.2rem);
    font-weight: 900;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}

.ac-sec-header p {
    color: var(--text-muted);
    font-size: 1rem;
    margin: 0;
}

/* What is Grid */
.ac-what-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    align-items: center;
}

.lead-text {
    font-size: 1.05rem;
    color: var(--text-dark);
    line-height: 1.7;
    margin-bottom: 1.2rem;
}

.ac-callout-box {
    background: var(--gold-xl);
    border: 1.5px solid var(--gold-l);
    border-radius: 16px;
    padding: 1.2rem;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 1.2rem;
    color: var(--text-dark);
}

.ac-callout-box i {
    font-size: 1.3rem;
    color: var(--gold-d);
    margin-top: 2px;
}

.sub-text {
    font-size: 0.92rem;
    color: var(--text-muted);
    line-height: 1.6;
}

.ac-services-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}

.ac-svc-card {
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: 20px;
    padding: 1.4rem;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.05);
    transition: transform 0.25s ease, border-color 0.25s ease;
}

.ac-svc-card:hover {
    transform: translateY(-4px);
    border-color: var(--gold);
}

.svc-icon-badge {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    margin-bottom: 0.85rem;
}

.svc-icon-badge.blue-bg {
    background: var(--blue-xl);
    color: var(--primary-blue);
}

.svc-icon-badge.gold-bg {
    background: var(--gold-xl);
    color: var(--gold-d);
}

.ac-svc-card h4 {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 0.4rem;
}

.ac-svc-card p {
    font-size: 0.88rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0;
}

/* Steps Timeline */
.ac-steps-timeline {
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: 28px;
    padding: 2rem;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.06);
}

.timeline-nav-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-bottom: 2rem;
}

.ac-step-item {
    background: var(--gray-50);
    border: 1.5px solid var(--border);
    border-radius: 18px;
    padding: 1rem 8px;
    text-align: center;
    cursor: pointer;
    position: relative;
    transition: all 0.25s ease;
}

.ac-step-item.active,
.ac-step-item:hover {
    background: var(--primary-blue);
    color: var(--white) !important;
    border-color: var(--border);
    box-shadow: 0 8px 22px rgba(2, 83, 212, 0.25);
}

.step-num {
    position: absolute;
    top: 8px;
    right: 12px;
    font-size: 0.8rem;
    font-weight: 900;
    color: var(--gold);
}

.ac-step-item.active .step-num {
    color: var(--gold-l);
}

.step-icon {
    font-size: 1.3rem;
    margin-bottom: 6px;
    color: var(--primary-blue);
}

.ac-step-item.active .step-icon {
    color: var(--white);
}

.step-info strong {
    display: block;
    font-size: 0.9rem;
    font-weight: 800;
    margin-bottom: 2px;
}

.step-info span {
    display: block;
    font-size: 0.76rem;
    opacity: 0.8;
}

.ac-step-detail-card {
    background: linear-gradient(135deg, var(--navy) 0%, var(--primary-blue) 100%);
    color: var(--white);
    border-radius: 20px;
    padding: 1.8rem;
    border: 1.5px solid var(--gold-l);
    box-shadow: 0 10px 28px rgba(2, 26, 58, 0.25);
}

.detail-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 0.75rem;
}

.detail-header i {
    font-size: 1.3rem;
    color: var(--gold);
}

.detail-header h4 {
    font-size: 1.15rem;
    font-weight: 800;
    margin: 0;
}

.ac-step-detail-card p {
    font-size: 0.98rem;
    color: var(--blue-l);
    line-height: 1.7;
    margin: 0;
}

/* Obstacle Tabs */
.ac-tabs-bar {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 6px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 18px;
    margin-bottom: 2rem;
}

.ac-tab-btn {
    padding: 10px 22px;
    border-radius: 14px;
    border: none;
    background: transparent;
    color: var(--primary-blue);
    font-weight: 800;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ac-tab-btn.active,
.ac-tab-btn:hover {
    background: linear-gradient(135deg, var(--primary-blue) 0%, var(--blue-d) 100%);
    color: var(--white);
    box-shadow: 0 6px 18px rgba(2, 83, 212, 0.22);
}

.ac-tab-panel {
    display: none;
}

.ac-tab-panel.active {
    display: block;
}

.obs-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.25rem;
}

.obs-item-card {
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: 20px;
    padding: 1.4rem;
    position: relative;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.05);
    transition: transform 0.25s ease, border-color 0.25s ease;
}

.obs-item-card:hover {
    transform: translateY(-4px);
    border-color: var(--gold);
}

.obs-badge {
    position: absolute;
    top: 1.2rem;
    left: 1.2rem;
    font-size: 1rem;
    font-weight: 900;
    color: var(--gray-400);
}

.obs-item-card h4 {
    font-size: 1.08rem;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}

.obs-item-card p {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0;
}

/* Priority Cards */
.prio-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
}

.prio-card {
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: 22px;
    padding: 1.5rem;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.25s ease;
}

.prio-card:hover {
    transform: translateY(-4px);
}

.prio-level-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: 10px;
    margin-bottom: 0.85rem;
    align-self: flex-start;
}

.p-green .prio-level-badge {
    background: #ecfdf5;
    color: #047857;
}

.p-amber .prio-level-badge {
    background: #fffbeb;
    color: #b45309;
}

.p-orange .prio-level-badge {
    background: #fff7ed;
    color: #c2410c;
}

.p-red .prio-level-badge {
    background: #fef2f2;
    color: #b91c1c;
}

.prio-card h3 {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 0.4rem;
}

.prio-card p {
    font-size: 0.88rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 1.2rem;
}

.prio-time {
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--primary-blue);
    background: var(--blue-xl);
    padding: 6px 12px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}



/* FAQ Accordion - Matching Reference Image Styling & Full Height */
.ac-faq-accordion {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.ac-faq-item {
    background: var(--white);
    border: 1.5px solid var(--primary-blue);
    border-radius: 16px;
    transition: all 0.25s ease;
    box-shadow: 0 4px 15px rgba(2, 83, 212, 0.05);
    height: auto !important;
    max-height: none !important;
}

.ac-faq-item.open {
    border-color: var(--primary-blue);
    box-shadow: 0 8px 25px rgba(2, 83, 212, 0.12);
}

.faq-question {
    padding: 1.2rem 1.5rem;
    font-size: 1.15rem;
    font-weight: 900;
    color: var(--gray-600);
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    background: var(--white);
    border-radius: 14px;
    gap: 12px;
}

.faq-question span {
    flex: 1;
}

.faq-toggle-badge {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 10px;
    background: rgba(2, 83, 212, 0.1);
    color: var(--primary-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.ac-faq-item.open .faq-toggle-badge {
    background: var(--primary-blue);
    color: var(--white);
    transform: rotate(180deg);
}

.faq-answer {
    display: none;
    padding: 1.25rem 1.5rem 1.5rem;
    color: var(--text-dark);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.8;
    background: var(--white);
    border-top: 1.5px solid var(--text-dark);
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

.faq-answer p {
    margin: 0;
    padding: 0;
    color: var(--text-dark);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.8;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    white-space: normal !important;
    word-break: normal;
}

.ac-faq-item.open .faq-answer {
    display: block !important;
}

/* Bottom Banner */
.ac-bottom-banner {
    background: linear-gradient(135deg, var(--navy) 0%, var(--primary-blue) 100%);
    border-radius: 28px;
    padding: clamp(2rem, 5vw, 3.5rem);
    color: var(--white);
    text-align: center;
    border: 1.5px solid var(--gold-l);
    box-shadow: 0 16px 45px rgba(2, 26, 58, 0.3);
}

.banner-inner-content h2 {
    font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.5rem);
    font-weight: 900;
    margin-bottom: 0.75rem;
}

.gold-text {
    color: var(--gold);
}

.banner-inner-content p {
    font-size: 1.05rem;
    color: var(--blue-l);
    max-width: 65ch;
    margin: 0 auto 2rem;
    line-height: 1.6;
}

.banner-action-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Mini Priority Tags for Stage 3 Info Card */
.prio-mini-tag {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 800;
    margin: 5px 3px 0;
}

.prio-mini-tag.p-green {
    background: rgba(110, 231, 183, 0.15);
    color: #a7f3d0;
    border: 1px solid rgba(110, 231, 183, 0.35);
}

.prio-mini-tag.p-amber {
    background: rgba(253, 224, 71, 0.15);
    color: #fef08a;
    border: 1px solid rgba(253, 224, 71, 0.35);
}

.prio-mini-tag.p-orange {
    background: rgba(251, 146, 60, 0.15);
    color: #ffedd5;
    border: 1px solid rgba(251, 146, 60, 0.35);
}

.prio-mini-tag.p-red {
    background: rgba(248, 113, 113, 0.15);
    color: #fca5a5;
    border: 1px solid rgba(248, 113, 113, 0.35);
}

/* ========================================================= */
/* Aftercare Request Form Page Styles                        */
/* ========================================================= */

.ac-req-wrapper {
  padding: 20px 0 60px;
}

/* Page Hero Header */
.ac-req-hero {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-m) 55%, var(--primary-blue) 100%);
  padding: 36px 28px 42px;
  border-radius: 24px;
  position: relative;
  overflow: hidden;
  color: var(--white);
  box-shadow: 0 16px 45px rgba(2, 26, 58, 0.35);
  border: 1.5px solid var(--gold-l);
  margin-bottom: 24px;
}

.ac-req-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(249, 171, 3, 0.14);
  border: 1px solid rgba(249, 171, 3, 0.28);
  color: var(--gold);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 13px;
  border-radius: 20px;
  margin-bottom: 14px;
}

.ac-req-hero h1 {
  font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.3rem);
  font-weight: 900;
  color: var(--white);
  line-height: 1.3;
  margin-bottom: 10px;
}

.ac-req-hero p {
  font-size: 14.5px;
  color: var(--blue-l);
  max-width: 620px;
  line-height: 1.75;
}

/* Before You Begin Card */
.before-card {
  background: var(--blue-xl);
  border: 1.5px solid var(--blue-l);
  border-right: 4px solid var(--primary-blue);
  border-radius: 16px;
  padding: 22px 26px;
  margin-bottom: 28px;
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

html[dir="rtl"] .before-card {
  border-right: 4px solid var(--primary-blue);
  border-left: 1.5px solid var(--blue-l);
}

html[dir="ltr"] .before-card {
  border-left: 4px solid var(--primary-blue);
  border-right: 1.5px solid var(--blue-l);
}

.before-icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  background: var(--primary-blue);
  color: var(--white);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.before-card h3 {
  font-size: 15px;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 12px;
}

.checklist {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.checklist li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13.5px;
  color: var(--gray-800);
  line-height: 1.55;
}

.checklist li::before {
  content: '✓';
  color: var(--primary-blue);
  font-weight: 900;
  font-size: 13px;
  flex-shrink: 0;
  margin-top: 1px;
}

.before-note {
  margin-top: 12px;
  padding: 10px 14px;
  background: rgba(2, 83, 212, 0.07);
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--blue-d);
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

/* Two-column layout */
.req-layout {
  display: grid;
  grid-template-columns: 1fr 310px;
  gap: 28px;
  align-items: flex-start;
}

/* Stepper */
.req-stepper {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 22px 24px 18px;
  margin-bottom: 22px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.stepper-row {
  display: flex;
  align-items: flex-start;
  position: relative;
}

.stepper-row::before {
  content: '';
  position: absolute;
  top: 20px;
  right: 24px;
  left: 24px;
  height: 2px;
  background: var(--gray-200);
  z-index: 0;
}

.stepper-row::after {
  content: '';
  position: absolute;
  top: 20px;
  right: 24px;
  height: 2px;
  background: var(--primary-blue);
  z-index: 0;
  transition: width 0.45s ease;
  width: var(--progress, 0%);
}

.step-item {
  flex: 1;
  text-align: center;
  position: relative;
  z-index: 1;
  cursor: pointer;
}

.step-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 800;
  margin: 0 auto 8px;
  border: 2.5px solid var(--gray-200);
  background: var(--white);
  color: var(--gray-400);
  transition: all 0.3s;
  position: relative;
  z-index: 1;
}

.step-item.done .step-circle {
  background: var(--primary-blue);
  border-color: var(--primary-blue);
  color: var(--white);
}

.step-item.active .step-circle {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy);
  box-shadow: 0 0 0 4px rgba(249, 171, 3, 0.2);
}

.step-label {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--gray-400);
  line-height: 1.3;
}

.step-item.done .step-label {
  color: var(--primary-blue);
}

.step-item.active .step-label {
  color: var(--navy);
}

.step-sub {
  font-size: 10px;
  color: var(--gray-400);
  margin-top: 2px;
}

/* Form Card */
.req-form-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

.req-form-card-head {
  padding: 22px 28px 18px;
  border-bottom: 1.5px solid var(--gray-100);
  display: flex;
  align-items: center;
  gap: 14px;
}

.form-card-ico {
  width: 46px;
  height: 46px;
  min-width: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

.form-card-ico.blue {
  background: var(--blue-l);
  color: var(--primary-blue);
}

.form-card-ico.gold {
  background: var(--gold-l);
  color: var(--gold-d);
}

.form-card-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--navy);
}

.form-card-sub {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 3px;
}

.req-form-card-body {
  padding: 26px 28px;
}

/* Step Panels */
.step-panel {
  display: none;
}

.step-panel.active {
  display: block;
}

/* Form Fields */
.fields-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.field-full {
  grid-column: 1 / -1;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dark);
  display: flex;
  align-items: center;
  gap: 5px;
}

.field label .req {
  color: #dc2626;
  font-size: 14px;
  line-height: 1;
}

.field-hint {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-top: 2px;
}

.req-input,
.req-select,
.req-textarea {
  width: 100%;
  height: 46px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 0 14px;
  font-size: 14px;
  font-family: inherit;
  color: var(--text-dark);
  background: var(--white);
  transition: border-color 0.2s, box-shadow 0.2s;
  appearance: none;
  -webkit-appearance: none;
}

.req-input:focus,
.req-select:focus,
.req-textarea:focus {
  outline: none;
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 3px rgba(2, 83, 212, 0.12);
}

.req-input.error,
.req-select.error,
.req-textarea.error {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

.req-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 12px center;
  padding-left: 36px;
}

html[dir="ltr"] .req-select {
  background-position: right 12px center;
  padding-right: 36px;
  padding-left: 14px;
}

.req-textarea {
  height: auto;
  min-height: 108px;
  padding: 12px 14px;
  resize: vertical;
  line-height: 1.65;
}

.field-error {
  font-size: 11.5px;
  color: #dc2626;
  display: none;
  align-items: center;
  gap: 4px;
}

.field-error.show {
  display: flex;
}

/* Category Cards */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 4px;
}

.cat-card {
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 16px 14px;
  cursor: pointer;
  transition: all 0.22s;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  background: var(--white);
  position: relative;
}

.cat-card:hover {
  border-color: var(--primary-blue);
  box-shadow: 0 4px 16px rgba(2, 83, 212, 0.1);
}

.cat-card.selected {
  border-color: var(--gold);
  background: var(--gold-xl);
  box-shadow: 0 4px 18px rgba(249, 171, 3, 0.15);
}

.cat-card.selected::after {
  content: '✓';
  position: absolute;
  top: 8px;
  left: 10px;
  width: 20px;
  height: 20px;
  background: var(--gold);
  color: var(--navy);
  border-radius: 50%;
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

html[dir="ltr"] .cat-card.selected::after {
  right: 10px;
  left: auto;
}

.cat-ico {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  background: var(--blue-xl);
  flex-shrink: 0;
  transition: background 0.22s;
}

.cat-card.selected .cat-ico {
  background: rgba(249, 171, 3, 0.2);
}

.cat-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.35;
}

.cat-desc {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Priority Selector */
.priority-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.prio-btn {
  padding: 8px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  border: 1.5px solid var(--border);
  background: var(--white);
  color: var(--text-muted);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s;
}

.prio-btn:hover {
  border-color: var(--primary-blue);
  color: var(--primary-blue);
}

.prio-btn.on.green {
  border-color: #4ade80;
  background: #f0fdf4;
  color: #15803d;
}

.prio-btn.on.amber {
  border-color: #fbbf24;
  background: #fffbeb;
  color: #b45309;
}

.prio-btn.on.orange {
  border-color: #fb923c;
  background: #fff7ed;
  color: #c2410c;
}

.prio-btn.on.red {
  border-color: #f87171;
  background: #fff1f2;
  color: #b91c1c;
}

/* Upload Area */
.upload-zones {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.upload-zone {
  border: 2px dashed var(--gray-300);
  border-radius: 10px;
  padding: 24px 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.22s;
  background: var(--gray-50);
  position: relative;
}

.upload-zone:hover,
.upload-zone.dragover {
  border-color: var(--primary-blue);
  background: var(--blue-xl);
}

.upload-zone input[type=file] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.upload-ico {
  font-size: 28px;
  margin-bottom: 8px;
  display: block;
}

.upload-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 4px;
}

.upload-hint {
  font-size: 12px;
  color: var(--text-muted);
}

.upload-zone.has-file {
  border-color: #16a34a;
  background: #f0fdf4;
}

.file-name {
  font-size: 12px;
  color: #16a34a;
  font-weight: 600;
  margin-top: 6px;
  display: none;
}

.upload-zone.has-file .file-name {
  display: block;
}

/* Review Summary */
.review-block {
  background: var(--gray-50);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 22px;
}

.review-section {
  padding: 18px 22px;
  border-bottom: 1px solid var(--gray-200);
}

.review-section:last-child {
  border-bottom: none;
}

.review-section h4 {
  font-size: 13px;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.review-section h4::before {
  content: '';
  width: 3px;
  height: 14px;
  background: var(--gold);
  border-radius: 2px;
  display: inline-block;
}

.review-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  padding: 5px 0;
  border-bottom: 1px dashed var(--gray-200);
}

.review-row:last-child {
  border-bottom: none;
}

.review-key {
  color: var(--text-muted);
  font-weight: 500;
  flex-shrink: 0;
}

.review-val {
  color: var(--text-dark);
  font-weight: 600;
}

/* Declaration */
.declaration {
  background: var(--navy);
  border-radius: 10px;
  padding: 16px 20px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 20px;
}

.decl-check {
  width: 20px;
  height: 20px;
  min-width: 20px;
  accent-color: var(--gold);
  cursor: pointer;
  margin-top: 2px;
}

.declaration label {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.65;
  cursor: pointer;
}

.declaration label strong {
  color: var(--gold);
}

/* Step Actions */
.step-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 22px;
  border-top: 1.5px solid var(--gray-100);
  margin-top: 8px;
  flex-wrap: wrap;
}

.btn-next {
  background: var(--primary-blue);
  color: var(--white);
  font-size: 14px;
  font-weight: 800;
  padding: 12px 28px;
  border-radius: 10px;
  border: none;
  transition: all 0.22s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.btn-next:hover {
  background: var(--blue-d);
  transform: translateY(-1px);
}

.btn-prev {
  background: var(--gray-100);
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 600;
  padding: 12px 22px;
  border-radius: 10px;
  border: 1.5px solid var(--gray-200);
  transition: all 0.22s;
  cursor: pointer;
}

.btn-prev:hover {
  background: var(--gray-200);
}

.btn-submit {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-d) 100%);
  color: var(--navy);
  font-size: 14.5px;
  font-weight: 900;
  padding: 13px 32px;
  border-radius: 10px;
  border: none;
  transition: all 0.22s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(249, 171, 3, 0.35);
}

.btn-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(249, 171, 3, 0.45);
}

.btn-draft {
  background: transparent;
  color: var(--text-muted);
  font-size: 13.5px;
  font-weight: 600;
  padding: 12px 18px;
  border-radius: 10px;
  border: 1.5px solid var(--gray-300);
  transition: all 0.22s;
  cursor: pointer;
}

.btn-draft:hover {
  border-color: var(--primary-blue);
  color: var(--primary-blue);
}

.btn-back-link {
  margin-right: auto;
  font-size: 13px;
  color: var(--gray-400);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: color 0.2s;
  text-decoration: none;
}

html[dir="ltr"] .btn-back-link {
  margin-right: 0;
  margin-left: auto;
}

.btn-back-link:hover {
  color: var(--primary-blue);
}

/* Req Sidebar */
.req-sidebar {
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: sticky;
  top: 100px;
}

.side-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.side-head {
  padding: 14px 18px;
  background: var(--navy);
  display: flex;
  align-items: center;
  gap: 10px;
}

.side-head h3 {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--white);
}

.side-head-ico {
  font-size: 16px;
}

.side-body {
  padding: 16px 18px;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--gold-xl);
  border: 1px solid var(--gold-l);
  color: var(--gold-d);
  font-size: 12px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 12px;
}

.status-badge::before {
  content: '●';
  font-size: 8px;
  animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1 }
  50% { opacity: .3 }
}

.proc-time {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--gray-100);
  margin-bottom: 12px;
}

.proc-time-ico {
  width: 36px;
  height: 36px;
  min-width: 36px;
  background: var(--blue-l);
  color: var(--primary-blue);
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
}

.proc-time-label {
  font-size: 11.5px;
  color: var(--text-muted);
}

.proc-time-val {
  font-size: 15px;
  font-weight: 800;
  color: var(--navy);
}

.docs-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.docs-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-dark);
  line-height: 1.5;
}

.docs-list li::before {
  content: '📎';
  font-size: 12px;
  flex-shrink: 0;
  margin-top: 1px;
}

.help-block {
  background: var(--blue-xl);
  border-radius: 10px;
  padding: 14px 16px;
  text-align: center;
}

.help-block p {
  font-size: 12.5px;
  color: var(--text-dark);
  margin-bottom: 10px;
  line-height: 1.55;
}

.help-phone {
  font-size: 16px;
  font-weight: 900;
  color: var(--primary-blue);
  direction: ltr;
  display: block;
  margin-bottom: 4px;
}

.help-email {
  font-size: 12px;
  color: var(--text-muted);
}

.progress-mini {
  margin-top: 12px;
}

.progress-mini-label {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.progress-bar {
  height: 6px;
  background: var(--gray-200);
  border-radius: 3px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary-blue), var(--gold));
  border-radius: 3px;
  transition: width 0.4s ease;
  width: 25%;
}

/* Mini FAQ */
.faq-mini {
  margin-top: 4px;
}

.faq-mini-item {
  border-bottom: 1px solid var(--gray-100);
  overflow: hidden;
}

.faq-mini-item:last-child {
  border-bottom: none;
}

.faq-mini-q {
  width: 100%;
  background: none;
  border: none;
  text-align: inherit;
  padding: 13px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  font-family: inherit;
}

.faq-mini-q .chev {
  font-size: 12px;
  color: var(--primary-blue);
  transition: transform 0.3s;
  flex-shrink: 0;
}

.faq-mini-item.open .chev {
  transform: rotate(180deg);
}

.faq-mini-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.75;
}

.faq-mini-item.open .faq-mini-a {
  max-height: 200px;
  padding-bottom: 13px;
}

/* Toast Notification */
.req-toast {
  position: fixed;
  bottom: 28px;
  right: 28px;
  background: var(--navy);
  color: var(--white);
  padding: 14px 20px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 600;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  gap: 10px;
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.3s;
  z-index: 9999;
  max-width: 340px;
  border-right: 4px solid var(--gold);
}

html[dir="ltr"] .req-toast {
  right: auto;
  left: 28px;
  border-right: none;
  border-left: 4px solid var(--gold);
}

.req-toast.show {
  transform: translateY(0);
  opacity: 1;
}

@media(max-width: 1060px) {
  .req-layout {
    grid-template-columns: 1fr;
  }
  .req-sidebar {
    position: static;
  }
}

@media(max-width: 768px) {
  .cat-grid {
    grid-template-columns: 1fr 1fr;
  }
  .fields-grid {
    grid-template-columns: 1fr;
  }
  .field-full {
    grid-column: 1;
  }
  .stepper-row::before,
  .stepper-row::after {
    display: none;
  }
  .before-card {
    flex-direction: column;
  }
  .step-actions {
    justify-content: stretch;
  }
  .btn-next,
  .btn-submit {
    width: 100%;
    justify-content: center;
  }
  .btn-back-link {
    margin-right: 0;
    order: 3;
  }
}

@media(max-width: 480px) {
  .cat-grid {
    grid-template-columns: 1fr;
  }
  .req-form-card-body {
    padding: 18px;
  }
  .priority-row .prio-btn {
    font-size: 12px;
    padding: 7px 13px;
  }
}

/* ========================================================= */
/* Aftercare Tracking Page Styles                            */
/* ========================================================= */

.track-wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 20px 0 60px;
}

.track-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  margin-bottom: 24px;
}

.track-card-head {
  padding: 22px 28px 18px;
  border-bottom: 1.5px solid var(--gray-100);
  display: flex;
  align-items: center;
  gap: 14px;
}

.track-card-ico {
  width: 46px;
  height: 46px;
  min-width: 46px;
  border-radius: 12px;
  background: var(--blue-l);
  color: var(--primary-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

.track-card-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--navy);
}

.track-card-sub {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 3px;
}

.track-card-body {
  padding: 26px 28px;
}

.fields-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.btn-track {
  width: 100%;
  height: 50px;
  margin-top: 20px;
  background: var(--primary-blue);
  color: var(--white);
  font-size: 15px;
  font-weight: 800;
  border: none;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  transition: all 0.22s;
  cursor: pointer;
}

.btn-track:hover {
  background: var(--blue-d);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(3, 104, 189, 0.28);
}

.btn-track.loading {
  opacity: 0.72;
  pointer-events: none;
}

.track-note {
  margin-top: 14px;
  padding: 12px 16px;
  background: var(--gold-xl);
  border: 1px solid var(--gold-l);
  border-radius: 10px;
  font-size: 12.5px;
  color: var(--gold-d);
  display: flex;
  gap: 9px;
  align-items: flex-start;
  line-height: 1.6;
}

/* Result Section */
.result-section {
  display: none;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.result-section.show {
  display: block;
  opacity: 1;
  transform: none;
}

.req-header-card {
  background: var(--navy);
  border-radius: 16px;
  padding: 24px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  box-shadow: 0 8px 30px rgba(2, 26, 58, 0.25);
  border: 1px solid var(--gold-l);
}

.req-num-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.req-num-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 600;
  letter-spacing: 0.5px;
}

.req-num-value {
  font-size: 22px;
  font-weight: 900;
  color: var(--gold);
  direction: ltr;
  letter-spacing: 1.5px;
}

.req-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

html[dir="ltr"] .req-meta {
  align-items: flex-start;
}

.req-date {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

.track-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 800;
  padding: 7px 16px;
  border-radius: 20px;
}

.track-status-badge .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.status--new { background: rgba(3, 104, 189, 0.15); color: var(--primary-blue); }
.status--new .dot { background: var(--primary-blue); animation: blink 2s infinite; }
.status--review { background: rgba(249, 171, 3, 0.18); color: var(--gold-d); }
.status--review .dot { background: var(--gold); animation: blink 2s infinite; }
.status--processing { background: rgba(251, 146, 60, 0.18); color: #c2410c; }
.status--processing .dot { background: #fb923c; animation: blink 1.5s infinite; }
.status--resolved { background: rgba(22, 163, 74, 0.15); color: #15803d; }
.status--resolved .dot { background: #16a34a; }
.status--rejected { background: rgba(220, 38, 38, 0.12); color: #b91c1c; }
.status--rejected .dot { background: #dc2626; }

@keyframes blink { 0%, 100% { opacity: 1 } 50% { opacity: 0.3 } }

.status-msg-card {
  background: var(--blue-xl);
  border: 1.5px solid var(--blue-l);
  border-right: 4px solid var(--primary-blue);
  border-radius: 16px;
  padding: 18px 22px;
  margin-bottom: 20px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

html[dir="ltr"] .status-msg-card {
  border-left: 4px solid var(--primary-blue);
  border-right: 1.5px solid var(--blue-l);
}

.status-msg-ico {
  font-size: 22px;
  flex-shrink: 0;
  margin-top: 1px;
}

.status-msg-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 4px;
}

.status-msg-body {
  font-size: 13.5px;
  color: var(--text-dark);
  line-height: 1.7;
}

.status-update {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 6px;
}

/* Timeline */
.timeline-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  margin-bottom: 20px;
}

.timeline-head {
  padding: 16px 22px 14px;
  border-bottom: 1px solid var(--gray-100);
  display: flex;
  align-items: center;
  gap: 10px;
}

.timeline-head-ico {
  width: 34px;
  height: 34px;
  background: var(--blue-l);
  color: var(--primary-blue);
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.timeline-head-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--navy);
}

.timeline-body {
  padding: 8px 22px 20px;
}

.tl-item {
  display: flex;
  gap: 0;
  position: relative;
  padding: 16px 0;
}

.tl-item:last-child {
  padding-bottom: 4px;
}

.tl-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 18px;
  top: 44px;
  bottom: 0;
  width: 2px;
  background: var(--gray-200);
}

html[dir="ltr"] .tl-item:not(:last-child)::after {
  left: 18px;
  right: auto;
}

.tl-item.done:not(:last-child)::after {
  background: var(--primary-blue);
}

.tl-icon-wrap {
  width: 36px;
  min-width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  margin-left: 14px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  border: 2px solid var(--gray-200);
  background: var(--white);
  transition: all 0.3s;
}

html[dir="ltr"] .tl-icon-wrap {
  margin-left: 0;
  margin-right: 14px;
}

.tl-item.done .tl-icon-wrap {
  background: var(--primary-blue);
  border-color: var(--primary-blue);
  color: var(--white);
}

.tl-item.active .tl-icon-wrap {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy);
  box-shadow: 0 0 0 4px rgba(249, 171, 3, 0.2);
}

.tl-item.upcoming .tl-icon-wrap {
  background: var(--gray-100);
  color: var(--gray-400);
}

.tl-content {
  flex: 1;
  padding-top: 6px;
}

.tl-title {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 3px;
}

.tl-item.upcoming .tl-title {
  color: var(--gray-400);
}

.tl-desc {
  font-size: 12px;
  color: var(--text-dark);
  line-height: 1.6;
}

.tl-item.upcoming .tl-desc {
  color: var(--gray-400);
}

.tl-date {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.tl-tag {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 10px;
  margin-top: 5px;
}

.tl-tag.done {
  background: rgba(3, 104, 189, 0.1);
  color: var(--primary-blue);
}

.tl-tag.active {
  background: rgba(249, 171, 3, 0.18);
  color: var(--gold-d);
}

.tl-tag.upcoming {
  background: var(--gray-100);
  color: var(--gray-400);
}

/* Track Details Card */
.track-details-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  margin-bottom: 20px;
}

.track-details-head {
  padding: 16px 22px 14px;
  border-bottom: 1px solid var(--gray-100);
  display: flex;
  align-items: center;
  gap: 10px;
}

.track-details-head-ico {
  width: 34px;
  height: 34px;
  background: var(--gold-l);
  color: var(--gold-d);
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.track-details-head-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--navy);
}

.track-details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.track-detail-row {
  padding: 13px 22px;
  border-bottom: 1px solid var(--gray-100);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.track-detail-row:nth-child(even) {
  border-right: 1px solid var(--gray-100);
}

html[dir="ltr"] .track-detail-row:nth-child(even) {
  border-right: none;
  border-left: 1px solid var(--gray-100);
}

.track-detail-row:nth-last-child(-n+2) {
  border-bottom: none;
}

.track-detail-key {
  font-size: 11.5px;
  color: var(--text-muted);
  font-weight: 600;
}

.track-detail-val {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--navy);
}

/* Support Card */
.track-support-card {
  background: var(--navy);
  border-radius: 16px;
  padding: 20px 24px;
  margin-bottom: 20px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  border: 1px solid var(--gold-l);
}

.track-support-ico {
  width: 42px;
  height: 42px;
  min-width: 42px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--gold);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.track-support-text {
  flex: 1;
}

.track-support-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--white);
  margin-bottom: 6px;
}

.track-support-desc {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.65;
  margin-bottom: 12px;
}

.track-support-contacts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.track-support-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--gold);
  background: rgba(249, 171, 3, 0.1);
  border: 1px solid rgba(249, 171, 3, 0.2);
  padding: 7px 14px;
  border-radius: 8px;
  transition: all 0.22s;
  text-decoration: none;
}

.track-support-link:hover {
  background: rgba(249, 171, 3, 0.18);
}

.track-action-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

@media(max-width: 768px) {
  .fields-row {
    grid-template-columns: 1fr;
  }
  .track-details-grid {
    grid-template-columns: 1fr;
  }
  .track-detail-row:nth-child(even) {
    border-right: none;
  }
  .track-action-row {
    flex-direction: column;
  }
  .req-header-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

@media (max-width: 900px) {

    .ac-hero-grid,
    .ac-what-grid {
        grid-template-columns: 1fr;
    }

    .timeline-nav-row {
        grid-template-columns: repeat(2, 1fr);
    }
}