:root {
    /* ... ('-*A8 (CD 'DE*:J1'* 'D#.1I CE' GJ) ... */

    --primary-dark: #1B1B44;
    --secondary-dark: #191942;
    --medium-dark: #2C2D4D;
    --light-dark: #39375A;
    --dark-step-1: #1B1A44;
    --dark-step-2: #1E1D47;
    --dark-step-3: #27254C;
    --dark-step-4: #323055;
    --dark-step-5: #3C395C;
    --dark-step-6: #454363;
    --dark-step-7: #504C69;
    --primary-light: #FFFFFF;
    --secondary-light: #FDFDFD;
    --text-on-dark: #FFFFFF;
    --text-on-light: #1B1B44;
    --text-medium: #2C2D4D;
    --text-light-muted: rgba(255, 255, 255, 0.9);
    --accent-color: #56BB66;
    --accent-hover: #4E9460;
    --accent-light: #74C16F;
    --green-light-1: #93CC78;
    --green-light-2: #AFD482;
    --green-light-3: #BFDB89;
    --whatsapp-green: #25D366;
    --shadow-light: rgba(0, 0, 0, 0.08);
    --shadow-medium: rgba(0, 0, 0, 0.15);
    --shadow-dark: rgba(0, 0, 0, 0.25);
    --gold-gradient: linear-gradient(135deg, #FFD700 0%, #D4AF37 100%);
    --silver-gradient: linear-gradient(135deg, #C0C0C0 0%, #A9A9A9 100%);
    --gradient-primary: linear-gradient(135deg, var(--primary-dark) 0%, var(--accent-color) 100%);
    --gradient-accent: linear-gradient(135deg, var(--accent-color) 0%, var(--green-light-1) 100%);
    /* 3F:J1 G0G 'DE*:J1'* D'3*./'EG' AJ 'D*-1JC */
    --gradient-dark-original: linear-gradient(to bottom,
            var(--dark-step-1) 0%,
            var(--dark-step-2) 16.6%,
            var(--dark-step-3) 33.2%,
            var(--dark-step-4) 49.8%,
            var(--dark-step-5) 66.4%,
            var(--dark-step-6) 83%,
            var(--dark-step-7) 100%);
    --gradient-hero: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
    --box-bg: #93CC78;
    /* #H 'DDHF 'DDJ JF'3(C */
    --box-flip-bg: rgba(255, 255, 255, 0.08);
    --box-shadow-200: rgba(0, 0, 0, 0.3);
    --Num-clr: #FFFFFF;

    /* E*:J1'* ,/J/) D#-,'E 'D.7H7 ('3*./'E clamp */
    --h1-min: 2.5rem;
    --h1-preferred: 8vw;
    /* 8% EF 916 F'A0) 'D916 */
    --h1-max: 4.5rem;

    --p-min: 1.1rem;
    --p-preferred: 3.5vw;
    /* 3.5% EF 916 F'A0) 'D916 */
    --p-max: 1.6rem;

    --section-h2-min: 2rem;
    --section-h2-preferred: 6vw;
    --section-h2-max: 3.8rem;

    --section-p-min: 1rem;
    --section-p-preferred: 3vw;
    --section-p-max: 1.4rem;

    --conclusion-title-min: 2rem;
    --conclusion-title-preferred: 7vw;
    --conclusion-title-max: 2.8rem;

    --conclusion-text-min: 1.2rem;
    --conclusion-text-preferred: 4vw;
    --conclusion-text-max: 1.6rem;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Tajawal', 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
    /* Adjust if header height changes */
}

body {
    /* *:JJ1 'D.DAJ) D'3*./'E 'D13HE 'DE*-1C) */
    background: var(--gradient-dark-original);
    /* '3*./E 'DBJE) 'D#5DJ) C.DAJ) 'A*1'6J) */
    background-size: 300% 300%;
    /* ',9D 'D.DAJ) #C(1 DD3E'- ('D*-1JC */
    background-attachment: fixed;
    color: var(--text-on-dark);
    /* ,9D DHF 'DF5 J*F'3( E9 'D.DAJ) 'D/'CF) */
    line-height: 1.8;
    min-height: 100vh;
    direction: rtl;
    text-align: right;
    overflow-x: hidden;
    /* *7(JB 'D13HE 'DE*-1C) */
    animation: animateGradient 7s ease-out infinite alternate;
    /* 15 +'FJ) -1C) 3D3) **C11 DD#(/ H*F9C3 */
}

/* *91JA 'D13HE 'DE*-1C) */
@keyframes animateGradient {
    0% {
        background-position: 0% 0%;
        /* #9DI J3'1 */
    }

    25% {
        background-position: 100% 0%;
        /* #9DI JEJF */
    }

    50% {
        background-position: 100% 100%;
        /* #3AD JEJF */
    }

    75% {
        background-position: 0% 100%;
        /* #3AD J3'1 */
    }

    100% {
        background-position: 0% 0%;
        /* 9H/) %DI #9DI J3'1 */
    }
}





.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 clamp(15px, 5vw, 30px);
    /* *('9/ #ABJ E1F */
}

.container7 {
    max-width: 700px;
    margin: 0 auto;
    padding: 0 clamp(15px, 5vw, 30px);
    background-color: var(--primary-dark);
    padding: 50px;
    /* *('9/ #ABJ E1F */
    border-radius: 12px;
}

a {
    text-decoration: none;
    color: var(--accent-color);
    transition: all 0.3s ease;
}

a:hover {
    color: var(--accent-hover);
}

.btn {
    border: none;
    padding: 14px 30px;
    border-radius: 50px;
    cursor: pointer;
    font-size: 18px;
    font-weight: 700;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: var(--accent-color);
    transition: all 0.6s ease;
    z-index: -1;
}

.btn:hover::before {
    width: 100%;
}

.primary-btn {
    background: transparent;
    color: var(--text-on-dark);
    border: 2px solid var(--accent-color);
    box-shadow: 0 8px 25px rgba(86, 187, 102, 0.4);
}

.primary-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(86, 187, 102, 0.6);
    color: var(--text-on-dark);
}

.outline-btn {
    background-color: transparent;
    color: var(--accent-color);
    border: 3px solid var(--accent-color);
    box-shadow: none;

}

.outline-btn:hover {
    background-color: transparent;
    color: var(--text-on-dark);
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(86, 187, 102, 0.4);
}

/* Header Styles */
header {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    z-index: 1000;
    background: transparent;
    padding: clamp(20px, 4vw, 40px) clamp(15px, 5vw, 30px);
}

.navbar {
    box-shadow: none;
    position: relative;
    z-index: 1000;
    padding: 30px;
}

.navbar-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
}

.logo-nav {
    display: flex;
    align-items: center;
}

.logo-nav img {
    height: 50px;
    margin-left: 10px;
}

.nav-links {
    display: flex;
    list-style: none;
}

.nav-links li {
    position: relative;
    margin: 0 8px;
}

.nav-links li a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    font-weight: 500;
    padding: 10px 15px;
    border-radius: 30px;
    transition: var(--transition);
    display: flex;
    align-items: center;
}

.nav-links li a i {
    margin-left: 8px;
    font-size: 0.9rem;
}

.nav-links li a:hover {
    background-color: var(--accent-light);
    color: white;
}

.nav-links li a.active {
    background: var(--secondary);
    color: white;
    box-shadow: 0 4px 15px rgba(204, 165, 86, 0.4);
}

.nav-links li a.active:hover {
    background: var(--accent-light);
}

.nav-btn {
    background: var(--secondary);
    padding: 10px 25px !important;
    box-shadow: 0 4px 15px rgba(204, 165, 86, 0.4);
}

.nav-btn:hover {

    transform: translateY(-3px);
}

.mobile-menu {
    display: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;

}

header {
    color: white;
    padding: 0;
    position: relative;
    overflow: hidden;
    box-shadow: none;
    margin-top: 0;
}

/* شاشات كبيرة - أقل من 1200px */
@media (max-width: 1199px) {
    header img {
        height: 55px;
    }
}

/* شاشات متوسطة - أقل من 992px */
@media (max-width: 991px) {
    header img {
        height: 50px;
    }
}

/* شاشات صغيرة - أقل من 768px */
@media (max-width: 767px) {
    header img {
        height: 45px;
    }
}

/* شاشات أصغر جداً - أقل من 480px */
@media (max-width: 479px) {
    header img {
        height: 40px;
    }
}


/* Spacer for fixed header */
.hero-spacer {
    height: clamp(100px, 15vw, 160px);
    /* Adjust based on header height */
    margin-bottom: 0;
    /* Remove original margin */
}


.hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    color: var(--text-on-dark);
    /* min-height: 100vh; */
    position: relative;
    overflow: hidden;
    text-align: right;
    background: transparent;
    /* padding: 60px 0; */
    /* *'9/ 'A*1'6J D,EJ9 'D4'4'* */
}

/* .hero::before,
.hero::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    z-index: 0;
} */

/* .hero::before {
    top: -50px;
    right: -50px;
    width: 300px;
    height: 300px;
    animation: float1 12s infinite ease-in-out;
    background-color: rgba(86, 187, 102, 0.2); /* %6'A) DHF D,9DG' E1&J)
 } */

.hero::after {
    bottom: -70px;
    left: -70px;
    width: 350px;
    height: 350px;
    animation: float2 15s infinite ease-in-out;
    background-color: rgba(60, 179, 113, 0.2);
    /* %6'A) DHF D,9DG' E1&J) */
}

*/ .hero-content {
    flex: 1;
    min-width: 300px;
    /* 'D-/ 'D#/FI DD916 DD9F51 flex */
    padding: 20px;
    position: relative;
    z-index: 1;
    text-align: right;
    /* 'A*1'6J D@ RTL */
}

.hero-content h1 {
    font-size: clamp(var(--h1-min), var(--h1-preferred), var(--h1-max));
    /* '3*./'E clamp */
    margin-bottom: 25px;
    line-height: 1.1;
    color: var(--text-on-dark);
    text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
    font-weight: 800;
}

.hero-content .highlight {
    background: linear-gradient(to right, var(--accent-color), var(--green-light-1));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 800;
}

.hero-description {
    /* New class for hero content p */
    font-size: clamp(1.1rem, 3vw, 1.4rem);
    /* Refined clamp range */
    margin-bottom: 30px;
    max-width: 709px;
    color: var(--text-light-muted);
    line-height: 1.8;
    text-align: justify;
}

.sahm-logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
    /* Adjust as needed */
}

.sahm-logo {
    height: clamp(80px, 15vw, 120px);
    /* Responsive height */
    max-width: 100%;
    object-fit: contain;
}

.standard-icon i {
    color: var(--accent-light);
    min-width: 30px;
    /* #21B ,0'( E+D'K */
    font-size: 30px;
}

.hero-buttons {
    display: flex;
    gap: 25px;
    flex-wrap: wrap;
    /* DD3E'- DD#21'1 ('D'F*B'D %DI 371 ,/J/ */
    justify-content: center;
    /* E-'0') DDJEJF AJ RTL */
}

.section-header {
    text-align: center;
    max-width: 1000px;
    margin: 0 auto 50px;
    animation: slideInUp 0.8s ease-out forwards;
    position: relative;
    padding: 0 15px;
    /* *('9/ /'.DJ .AJA D6E'F 9/E 'D*5'B 'DF5 ('D-H'A 9DI 'D4'4'* 'D5:J1) */
}

.section-header h2 {
    color: var(--text-on-dark);
    font-size: clamp(var(--section-h2-min), var(--section-h2-preferred), var(--section-h2-max));
    /* '3*./'E clamp */
    background: linear-gradient(to right, var(--accent-color), var(--green-light-1));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 25px;
    font-weight: 800;
    position: relative;
    display: inline-block;
}

.section-header h2::after {
    content: '';
    position: absolute;
    bottom: -15px;
    right: 50%;
    /* DDE-'0') 'DE1C2J) AJ RTL */
    transform: translateX(50%);
    width: 120px;
    height: 5px;
    background: var(--gradient-accent);
    border-radius: 10px;
}

.section-header p {
    color: var(--text-light-muted);
    font-size: clamp(1.1rem, 3vw, 1.4rem);
    /* '3*./'E clamp */
    line-height: 1.8;
    margin-top: 30px;
}



/***************************************************************/
/**************************************************/
.partners-section {
    padding: 40px 20px;
    background: transparent;
    text-align: center;
}

.registration-section .partners-section-title {
    font-size: clamp(2.1rem, 3vw, 3.4rem);
    margin-bottom: 40px;
    background: var(--accent-color);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: bold;
}

.partners-section .partners-section-title {
    font-size: clamp(var(--section-h2-min), var(--section-h2-preferred), var(--section-h2-max));
    margin-bottom: 40px;
    background: var(--accent-color);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: bold;
}

.partners-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 30px;
    align-items: center;
    justify-items: center;
}

.partner-card {
    background: transparent;
    padding: 15px;
    border-radius: 12px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.partner-card img {
    max-width: 261px;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

.partner-card:hover img {
    transform: scale(1.1);
}

/***************************************/
.registration-section {
    padding: 50px 20px;
    background: transparent;
    text-align: center;
    border-radius: 16px;


}



.registration-section p {
    font-size: 18px;
    color: var(--primary-light);
    margin-bottom: 30px;
}

.registration-btn {
    display: inline-block;
    padding: 15px 40px;
    background: var(--primary-light);
    color: var(--accent-color);
    font-weight: bold;
    font-size: 16px;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.3s ease, transform 0.3s ease;
}

.registration-btn:hover {
    background: var(--accent-light);
    color: var(--primary-light);
    transform: scale(1.05);
}


/*****************************************************/

.goals-section {
    padding: 60px 20px;
    background: transparent;
    /* خلفية شفافة */
    text-align: center;
}

.section-header h2 {
    font-size: clamp(var(--section-h2-min), var(--section-h2-preferred), var(--section-h2-max));
    margin-bottom: 40px;
    color: var(--primary-light);
    position: relative;
}

.section-header h2::after {
    content: "";
    display: block;
    width: 80px;
    height: 3px;
    background: var(--accent-color);
    margin: 12px auto 0;
    border-radius: 2px;
}

.goals-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.goal-card {
    background: transparent;
    /* شفافة */
    padding: 25px 20px;
    border-radius: 16px;
    box-shadow: 0 4px 10px var(--shadow-light);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid var(--box-flip-bg);
    /* خط خفيف شبه شفاف */
}

.goal-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 20px var(--shadow-medium);
}

.icon-circle {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: var(--accent-color);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    color: var(--primary-light);
    font-size: 28px;
    box-shadow: 0 4px 8px var(--shadow-dark);
}

.goal-card h3 {
    font-size: 20px;
    margin: 10px 0;
    color: var(--primary-light);
}

.goal-card p {
    font-size: clamp(1.1rem, 3vw, 1.4rem);
    line-height: 1.7;
    color: var(--text-light-muted);
}




/*********************************************/
.audience-section {
    padding: 60px 20px;
    background: transparent;
    /* القسم شفاف */
    text-align: center;
}

.audience-section .section-header h2 {
    font-size: clamp(var(--section-h2-min), var(--section-h2-preferred), var(--section-h2-max));
    margin-bottom: 40px;
    color: var(--primary-light);
    position: relative;
}

.audience-section .section-header h2::after {
    content: "";
    display: block;
    width: 80px;
    height: 3px;
    background: var(--accent-color);
    margin: 12px auto 0;
    border-radius: 2px;
}

.audience-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 25px;
    margin-top: 30px;
}

.audience-item {
    background: transparent;
    /* شفافة */
    padding: 20px;
    border-radius: 12px;
    border: 1px solid var(--box-flip-bg);
    box-shadow: 0 4px 10px var(--shadow-light);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.audience-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 18px var(--shadow-medium);
}

.audience-item i {
    font-size: 32px;
    color: var(--accent-color);
    margin-bottom: 12px;
}

.audience-item p {
    font-size: clamp(1.1rem, 3vw, 1.4rem);
    color: var(--text-light-muted);
    line-height: 1.6;
}


/*****************************************/
.training-method-section {
    padding: 60px 20px;
    background: transparent;
    /* القسم شفاف */
    text-align: center;
}

.training-method-section .section-header h2 {
    font-size: clamp(var(--section-h2-min), var(--section-h2-preferred), var(--section-h2-max));
    margin-bottom: 40px;
    color: var(--primary-light);
    position: relative;
}

.training-method-section .section-header h2::after {
    content: "";
    display: block;
    width: 80px;
    height: 3px;
    background: var(--accent-color);
    margin: 12px auto 0;
    border-radius: 2px;
}

.training-method-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 25px;
    margin-top: 30px;
}

.training-method-item {
    background: transparent;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid var(--box-flip-bg);
    box-shadow: 0 4px 10px var(--shadow-light);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.training-method-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 18px var(--shadow-medium);
}

.training-method-item i {
    font-size: 32px;
    color: var(--accent-color);
    margin-bottom: 12px;
}

.training-method-item p {
    font-size: clamp(1.1rem, 3vw, 1.4rem);
    color: var(--text-light-muted);
    line-height: 1.6;
}


/*****************************************/
.news-ticker-section {
    padding: 10px 0;
    padding-top: 50px;
    background: transparent;
}

.news-ticker {
    display: flex;
    align-items: center;
    overflow: hidden;
    border: 1px solid var(--box-flip-bg);
    border-radius: 30px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    background: #ffffff;
    max-width: 100%;
}

.ticker-title {
    background: linear-gradient(to right,
            var(--accent-color),
            var(--accent-light),
            var(--green-light-1));
    color: #fff;
    padding: 10px 15px;
    font-weight: bold;
    white-space: nowrap;
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
    flex-shrink: 0;
    font-size: 16px;
}

/* الحاوية */
.ticker-wrapper {
    overflow: hidden;
    position: relative;
    flex: 1;
}

/* المحتوى يكرر نفسه عشان ما يختفيش */
.ticker-content {
    display: inline-block;
    white-space: nowrap;
    animation: ticker 4000s linear infinite;
}

.ticker-content span {
    display: inline-block;
    margin: 0 30px;
    color: #0f0c29;
    font-size: 18px;
}

/* الحركة */
@keyframes ticker {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(-100%);
    }
}

/* نسخة للموبايل */
@media (max-width: 768px) {
    .ticker-title {
        padding: 11px 10px;
        font-size: 8px;
        flex: 0 0 auto;
    }

    .ticker-content span {
        font-size: 14px;
        margin: 0 15px;
    }
}



/*****************************************************/
.training-duration-section {
    padding: 60px 20px;
    background: transparent;
    text-align: center;
}

.training-duration-section .section-header h2 {
    font-size: clamp(var(--section-h2-min), var(--section-h2-preferred), var(--section-h2-max));
    margin-bottom: 30px;
    color: var(--primary-light);
    position: relative;
}

.training-duration-section .section-header h2::after {
    content: "";
    display: block;
    width: 80px;
    height: 3px;
    background: var(--accent-color);
    margin: 12px auto 0;
    border-radius: 2px;
}

.duration-summary {
    margin-bottom: 40px;
}

.duration-summary p {
    font-size: clamp(1.1rem, 3vw, 1.4rem);
    color: var(--text-light-muted);
    margin: 10px 0;
}

.duration-summary i {
    color: var(--accent-color);
    margin-left: 8px;
}

.weeks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 25px;
}

.week-card {
    background: transparent;
    padding: 25px 20px;
    border-radius: 12px;
    border: 1px solid var(--box-flip-bg);
    box-shadow: 0 4px 10px var(--shadow-light);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.week-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 18px var(--shadow-medium);
}

.week-card i {
    font-size: 32px;
    color: var(--accent-color);
    margin-bottom: 12px;
}

.week-card h3 {
    font-size: 20px;
    color: var(--primary-light);
    margin-bottom: 8px;
}

.week-card p {
    font-size: clamp(1.1rem, 3vw, 1.4rem);
    color: var(--text-light-muted);
    line-height: 1.6;
}

/**************************************************/
.skills-section {
    padding: 60px 20px;
    background: transparent;
    text-align: right;
    /* لأن اللغة عربية */
}

.skills-section .section-header h2 {
    font-size: clamp(var(--section-h2-min), var(--section-h2-preferred), var(--section-h2-max));
    margin-bottom: 30px;
    background: linear-gradient(to left,
            var(--accent-color),
            var(--accent-light),
            var(--green-light-1),
            var(--green-light-2),
            var(--green-light-3));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: bold;
}

.skills-list {
    list-style: none;
    /* نلغي النقاط الإفتراضية */
    padding: 0;
    margin: 0;
}

.skills-list li {
    position: relative;
    padding-right: 25px;
    /* مساحة للمثلث على اليمين */
    margin-bottom: 15px;
    font-size: clamp(1.1rem, 3vw, 1.5rem);
    color: var(--text-light-muted);
    line-height: 1.7;
}


.skills-list li::before {
    content: '';
    position: absolute;
    right: 0;
    top: 12px;
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    /* زيادة الارتفاع */
    border-bottom: 8px solid transparent;
    /* زيادة الارتفاع */
    border-left: 16px solid var(--accent-color);
    /* زيادة عرض المثلث */
}


/************************************************************/






.visit-counter-card {
    display: flex;
    align-items: center;
    gap: 20px;
    max-width: 320px;
    margin: 40px auto;
    padding: 20px 25px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
    animation: floatCard 1.3s ease forwards;

    opacity: 0;
}

.visit-icon {
    background: linear-gradient(135deg, #00bfa5, #1de9b6);
    color: #fff;
    padding: 15px;
    border-radius: 50%;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 15px rgba(0, 191, 165, 0.4);
}

.visit-details {
    display: flex;
    flex-direction: column;
}

.visit-label {
    font-size: 30px;
    color: #ffffff;
    margin-bottom: 4px;
}

.visit-number {
    font-size: 28px;
    font-weight: bold;
    color: #fff;
}

/* Animation */
@keyframes floatCard {
    to {
        transform: translateY(0);
        opacity: 1;
    }
}


.trainee-message-section2 {
    /* Using a specific dark step for a slightly lighter background than the body's gradient start */
    background: var(--dark-step-2);
    /* JECF #F JCHF G0' 'D,2! +'(*K' #H E*-1CK' */
    color: var(--text-on-dark);

    /* *('9/ 9EH/J E1F */
    position: relative;
    overflow: hidden;
}



/* *F3JB'* E.55) DD5A-) */
.trainee-message-section {
    background: var(--gradient-dark);
    /* JECF #F JCHF G0' 'D,2! +'(*K' #H E*-1CK' */
    color: var(--text-on-dark);
    padding: clamp(60px, 12vw, 80px) 20px;
    /* *('9/ 9EH/J E1F */
    position: relative;
    overflow: hidden;
}

.message-card {
    max-width: 900px;
    margin: auto;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--accent-light);
    border-radius: 20px;
    padding: clamp(30px, 6vw, 40px) clamp(20px, 5vw, 30px);
    /* *('9/ /'.DJ E1F */
    box-shadow: 0 10px 30px var(--shadow-dark);
    backdrop-filter: blur(6px);
    animation: slideFadeIn 1.4s ease-out forwards;
    opacity: 0;
    transform: translateY(50px);
}

.message-content {
    text-align: center;
}

.message-card-title {
    font-size: clamp(2rem, 5vw, 2.4rem);
    margin-bottom: 20px;
    color: var(--accent-light);
    text-align: center;
    /* محاذاة بداية السطر */
}

.message-card-text {
    font-size: clamp(1rem, 2.5vw, 1.2rem);
    line-height: 1.9;
    color: var(--text-light-muted);
    text-align: justify;
}

.highlight-text {
    color: var(--accent-light);
}

.highlight-text-white {
    color: var(--primary-light);
}


.icon-circle {
    width: 80px;
    height: 80px;
    background: var(--accent-color);
    color: var(--primary-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 32px;
    box-shadow: 0 0 15px var(--accent-color);
}

.trainee-guidelines {
    /* background: linear-gradient(to bottom right, #0f0c29, #302b63, #24243e); */
    color: var(--text-on-dark);
    padding: clamp(60px, 12vw, 80px) 20px;
    /* *('9/ 9EH/J E1F */
}

.guidelines-content-wrapper {
    max-width: 1000px;
    margin: auto;
}

.guidelines-section-title {
    text-align: center;
    font-size: clamp(2rem, 5vw, 2.5rem);
    color: var(--accent-color);
    margin-bottom: 40px;
    position: relative;
}

.guidelines-container {
    /* -'HJ) ,/J/) D*7(JB CSS Grid */
    display: grid;
    /* J*CJA *DB'&J': 9EH/ H'-/ 9DI 'D4'4'* 'D5:J1) +E 9EH/JF 9DI 'D#C(1 */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    /* Adjusted min-width for better fit */
    gap: 30px;
    /* 'DE3'A) (JF 'D(7'B'* */
    margin-top: 50px;
}

.guideline-card {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    background: rgba(255, 255, 255, 0.05);
    padding: clamp(15px, 4vw, 25px);
    /* Responsive padding */
    border-left: 5px solid var(--accent-color);
    border-radius: 15px;
    box-shadow: 0 5px 15px var(--shadow-dark);
}

.guideline-card i {
    color: var(--accent-light);
    min-width: 30px;
    font-size: clamp(1.5rem, 4vw, 2rem);
    /* Responsive icon size */
}

.guideline-card-text {
    margin: 0;
    font-size: clamp(0.95rem, 2.5vw, 1.1rem);
}

.attendance-policy {
    /* background: var(--primary-dark); */
    color: var(--text-on-dark);
    padding: clamp(50px, 10vw, 70px) 20px;
    /* *('9/ 9EH/J E1F */
}

.policy-box {
    max-width: 850px;
    margin: auto;
    background: rgba(255, 255, 255, 0.04);
    border-left: 6px solid var(--accent-color);
    padding: clamp(30px, 6vw, 40px) clamp(20px, 5vw, 30px);
    /* *('9/ /'.DJ E1F */
    border-radius: 15px;
    box-shadow: 0 8px 25px var(--shadow-dark);
    animation: bounceFade 1s ease;
}

.policy-content {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.policy-title {
    margin: 0 0 15px;
    font-size: clamp(1.8rem, 4.5vw, 2rem);
    color: var(--accent-color);
}

.policy-text {
    font-size: clamp(1rem, 2.5vw, 1.15rem);
    line-height: 1.9;
    color: var(--text-light-muted);
}

.warning-icon {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    background: var(--gradient-accent);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
}

.attendance-standard {
    /* background: var(--secondary-dark); */
    color: var(--text-on-dark);
    padding: clamp(60px, 12vw, 80px) 20px;
    /* *('9/ 9EH/J E1F */
}

.standards-content-wrapper {
    max-width: 1100px;
    margin: auto;
    text-align: center;
}

.standards-section-title {
    font-size: 2.4rem;
    /* الحجم الافتراضي الكبير */
    margin-bottom: 40px;
    color: var(--accent-color);
}

/* شاشات متوسطة (أقل من 992px) */
@media (max-width: 991px) {
    .standards-section-title {
        font-size: 2rem;
    }
}

/* شاشات صغيرة (أقل من 768px) */
@media (max-width: 767px) {
    .standards-section-title {
        font-size: 1.5rem;
    }
}

/* شاشات أصغر جداً (أقل من 480px) */
@media (max-width: 479px) {
    .standards-section-title {
        font-size: 1.3rem;
    }
}


.standards-grid {
    /* New class for the grid div */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    /* More flexible min-width */
    gap: 20px;
    margin-bottom: 50px;
    max-width: 100%;
}

.standard-card {
    background: var(--medium-dark);
    padding: clamp(15px, 3vw, 20px);
    /* Responsive padding */
    border-radius: 12px;
    color: white;
    text-align: center;
    border-left: 5px solid var(--accent-light);
    /* Added for consistency */
    box-shadow: 0 4px 15px var(--shadow-dark);
    /* Added for consistency */
}

.standard-card-title {
    color: var(--accent-light);
    margin-bottom: 10px;
    font-size: clamp(1rem, 2.5vw, 1.1rem);
}

.standard-card-text {
    font-size: clamp(0.9rem, 2.2vw, 1.1rem);
}

.progress-summary-text {
    margin-bottom: 15px;
    font-size: clamp(1rem, 2.5vw, 1.1rem);
}

.inspiring-text {
    font-size: clamp(1.1rem, 3vw, 1.3rem);
    color: var(--green-light-2);
    font-weight: 500;
}

.progress-dots {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 40px;
}

.progress-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

.dot-achieved {
    background-color: var(--accent-color);
}

.dot-remaining {
    background-color: rgba(255, 255, 255, 0.2);
}

.program-schedule {
    padding: clamp(40px, 8vw, 60px) 20px;
    /* *('9/ 9EH/J E1F */
    background: transparent;
    color: var(--primary-light);
}

.program-schedule .container {
    max-width: 1000px;
    margin: auto;
}

.schedule-section-title {
    text-align: center;
    margin-bottom: 40px;
    color: var(--secondary-light);
    font-size: clamp(1.7rem, 4vw, 2rem);
}

.week-schedule {
    margin-bottom: 60px;
}

.week-header {
    padding: 10px 15px;
    border-radius: 8px;
    font-size: clamp(1.3rem, 3.5vw, 1.7rem);
    /* Responsive font size */
    color: white;
}

.week-header.financial {
    background: var(--gradient-accent);
}

.week-header.technical {
    background-color: #7a8b5f;
}

/* *:DJA 'D,/HD D,9DG B'(D'K DD*E1J1 9DI 'D4'4'* 'D5:J1) */
.table-responsive {
    overflow-x: auto;
    /* J,9D 'DE-*HI B'(D'K DD*E1J1 #ABJK' %0' C'F #C(1 EF 'D-'HJ) */
    -webkit-overflow-scrolling: touch;
    /* D*-3JF 'D*E1J1 9DI iOS */
}

.schedule-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    border-radius: 8px;
    overflow: hidden;
    min-width: 600px;
    /* %6'A) 916 #/FI D6E'F 9/E *BD5 'D,/HD C+J1'K */
}

.schedule-table thead tr {
    background: var(--gradient-accent);
    color: white;
    text-align: center;
}

.schedule-table th,
.schedule-table td {
    padding: 10px;
    border: 1px solid #c0c0c0;
    text-align: center;
    white-space: nowrap;
    /* DEF9 'D*A'A 'DF5 AJ 'D.D'J' */
    font-size: clamp(0.8rem, 2vw, 1rem);
    /* Responsive font size for table cells */
}

.schedule-table tbody tr {
    background: rgba(255, 255, 255, 0.05);
}

.schedule-table tbody tr:nth-child(odd) td {
    background-color: rgba(255, 255, 255, 0.08);
}

.schedule-table tbody tr:nth-child(even) td {
    background-color: rgba(255, 255, 255, 0.03);
}

.download-title {
    font-size: 2.4rem;
    /* الحجم الافتراضي */
    margin-bottom: 25px;
    color: var(--accent-light);
}

/* شاشات متوسطة (أقل من 992px) */
@media (max-width: 991px) {
    .download-title {
        font-size: 2rem;
    }
}

/* شاشات صغيرة (أقل من 768px) */
@media (max-width: 767px) {
    .download-title {
        font-size: 1.5rem;
    }
}

/* شاشات أصغر جداً (أقل من 480px) */
@media (max-width: 479px) {
    .download-title {
        font-size: 1.3rem;
    }
}


.download-text {
    font-size: clamp(1rem, 2.5vw, 1.2rem);
    line-height: 1.9;
    color: var(--text-light-muted);
}

.download-button-container {
    margin-top: 30px;
}

.download-btn {
    /* New class for the download button */
    background-color: transparent;
    color: white;
    padding: clamp(12px, 3vw, 15px) clamp(20px, 5vw, 30px);
    border-radius: 8px;
    border: solid 1px var(--accent-light);
    font-size: clamp(1rem, 2.5vw, 1.1rem);
    text-decoration: none;
    display: inline-flex;
    /* Ensure it behaves like a button */
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.download-btn:hover {
    background-color: var(--accent-hover);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(86, 187, 102, 0.4);
}


.scroll-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--gradient-accent);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    z-index: 999;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease;
}

.scroll-top.show {
    opacity: 1;
    transform: translateY(0);
}

.scroll-top:hover {
    transform: translateY(-5px);
}

.conclusion-section {
    /* background: var(--gradient-dark); JECF #F JCHF G0' 'D,2! +'(*K' #H E*-1CK' */
    padding: clamp(70px, 15vw, 100px) 20px;
    /* *('9/ 9EH/J E1F */
    text-align: center;
    position: relative;
    overflow: hidden;
}

.conclusion-container {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.conclusion-content {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-radius: 25px;
    padding: clamp(40px, 8vw, 60px) clamp(30px, 6vw, 40px);
    /* *('9/ /'.DJ E1F */
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(86, 187, 102, 0.3);
    position: relative;
    overflow: hidden;
}

.conclusion-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: var(--gradient-accent);
    z-index: -1;
}

.conclusion-icon {
    font-size: clamp(3rem, 8vw, 4rem);
    /* '3*./'E clamp DD-,E */
    color: var(--accent-light);
    margin-bottom: 30px;
    display: inline-block;
    animation: pulse 2s infinite;
}

.conclusion-title {
    font-size: clamp(var(--conclusion-title-min), var(--conclusion-title-preferred), var(--conclusion-title-max));
    /* '3*./'E clamp */
    color: var(--text-on-dark);
    margin-bottom: 30px;
    font-weight: 700;
    position: relative;
    display: inline-block;
}

.conclusion-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    right: 50%;
    transform: translateX(50%);
    width: 100px;
    height: 4px;
    background: var(--gradient-accent);
    border-radius: 10px;
}

.count-down-con {
    margin-top: 3rem;
}

.container .count-parent {
    display: flex;
    justify-content: space-between;
    text-align: center;
    gap: .6rem;
    flex-wrap: wrap;
    /* Allow countdown boxes to wrap */
    justify-content: center;
    /* Center them when wrapped */
}

.count-parent>.box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    flex-basis: calc(25% - 0.6rem);
    /* Distribute space for 4 boxes */
    max-width: 150px;
    /* Max width for each box */
    min-width: 70px;
    /* Min width for each box */
}

.countdown-label {
    /* New class for countdown text */
    color: var(--box-bg);
    font-size: clamp(0.7rem, 2vw, 0.9rem);
    letter-spacing: 1px;
    font-weight: 600;
}

.upper>span {
    color: var(--Num-clr);
    font-size: clamp(2.3rem, 7vw, 4rem);
    /* '3*./'E clamp */
    font-weight: bold;
    font-family: 'Tajawal', sans-serif;
}

.upper {
    background-color: var(--box-flip-bg);
    padding-inline: .7rem;
    padding-block: .5rem;
    border-radius: .2rem;
    box-shadow: 0 6px 2px -1px var(--box-shadow-200);
    position: relative;
    overflow: hidden;
    z-index: 999;
    /* Removed min-width as it's handled by .box flex-basis */
}

.days-box {
    /* Specific style for days box */
    background-color: var(--accent-color);
}

.flip {
    background-color: hsl(234, 17%, 12%, 35%);
    width: 100%;
    position: absolute;
    height: 50%;
    top: 0;
    left: 0;

}

.upper::before {
    content: '';
    position: absolute;
    height: 10px;
    width: 10px;
    border-radius: 50%;
    left: -6px;
    top: 42%;
    background-color: var(--box-shadow-200);
}

.upper::after {
    content: '';
    position: absolute;
    height: 10px;
    width: 10px;
    border-radius: 50%;
    right: -6px;
    top: 42%;
    background-color: var(--box-shadow-200);
}

.icon-links {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    position: absolute;
    bottom: 7%;
    left: 0;
    right: 0;
    /* transform: translate(-50% -50%); G0' 'D*-HJD D' J9ED (4CD 5-J- GF' */
}

.icon-links>svg {
    cursor: pointer;
}

.icon-links>svg:hover path {
    fill: var(--Num-clr)
}

.hills {
    background-image: url(images/pattern-hills.svg);
    background-size: cover;
    position: absolute;
    height: 30vh;
    width: 100%;
    bottom: 0;
    left: 0;
}

.attribution {
    font-size: 11px;
    text-align: center;
    color: var(--text-light-muted);
    /* D6E'F 1$J*G 9DI 'D.DAJ) 'D/'CF) */
    margin-top: 20px;
    /* *('9/ %6'AJ */
}

.attribution a {
    color: hsl(228, 45%, 44%);
}

.conclusion-text {
    font-size: clamp(var(--conclusion-text-min), var(--conclusion-text-preferred), var(--conclusion-text-max));
    /* '3*./'E clamp */
    color: var(--text-light-muted);
    line-height: 1.9;
    max-width: 800px;
    margin: 0 auto;
}

.signature {
    margin-top: 40px;
    font-weight: bold;
    font-size: 1.7rem;
    color: var(--accent-color);
}

.floating-icons {
    position: absolute;
    opacity: 0.1;
    color: var(--accent-color);
    font-size: 2rem;
    z-index: 1;
}

.floating-icons i {
    position: absolute;
    animation: float 15s infinite linear;
}

.floating-icons i:nth-child(1) {
    top: 10%;
    left: 15%;
    animation-duration: 18s;
}

.floating-icons i:nth-child(2) {
    top: 30%;
    right: 20%;
    animation-duration: 22s;
}

.floating-icons i:nth-child(3) {
    bottom: 25%;
    left: 25%;
    animation-duration: 16s;
}

.floating-icons i:nth-child(4) {
    bottom: 15%;
    right: 30%;
    animation-duration: 20s;
}


/* Trainers Section */
.trainers-section {
    background: var(--dark-step-2);
    color: var(--text-on-dark);
    padding: clamp(60px, 12vw, 80px) 20px;
    text-align: center;
}

.trainers-section-title {
    font-size: 2.5rem;
    /* حجم افتراضي كبير */
    margin-bottom: 50px;
    color: var(--accent-color);
    position: relative;
    display: inline-block;
}

.trainers-section-title::after {
    content: '';
    position: absolute;
    bottom: -15px;
    right: 50%;
    transform: translateX(50%);
    width: 150px;
    height: 5px;
    background: var(--gradient-accent);
    border-radius: 10px;
}

.trainer-socials {
    margin-top: 12px;
    display: flex;
    justify-content: center;
    gap: 15px;
}

.trainer-socials a {
    color: var(--accent-color);
    font-size: 20px;
    transition: color 0.3s ease, transform 0.3s ease;
}

.trainer-socials a:hover {
    color: var(--accent-light);
    transform: scale(1.2);
}

.form-footer {
    margin-top: 30px;
    text-align: center;
}

.form-footer p {
    margin-bottom: 10px;
    color: var(--mid);
}

.form-footer a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
    transition: var(--transition);
}

.form-footer a:hover {
    color: var(--secondary);
    text-decoration: underline;
}

footer {
    color: white;
    text-align: center;
    padding: 30px 0;

}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.footer-content p {
    margin: 10px 0;
}

.social-icons {
    margin: 20px 0;
}

.social-icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: white;
    margin: 0 8px;
    font-size: 1.2rem;
    transition: var(--transition);
}

.social-icons a:hover {
    background: var(--secondary);
    transform: translateY(-5px);
}


/* شاشات متوسطة (أقل من 992px) */
@media (max-width: 991px) {
    .trainers-section-title {
        font-size: 2.2rem;
    }
}

/* شاشات صغيرة (أقل من 768px) */
@media (max-width: 767px) {
    .trainers-section-title {
        font-size: 1.5rem;
    }
}

/* شاشات أصغر جداً (أقل من 480px) */
@media (max-width: 479px) {
    .trainers-section-title {
        font-size: 1.3rem;
    }
}


/* Grid Layout */
.trainers-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto;
}

/* Third card centered on its own row */
.trainers-grid .trainer-card:nth-child(3) {
    grid-column: 1 / -1;
    /* *#.0 C'ED 'D#9E/) */
    justify-self: center;
    /* **E1C2 #ABJ'K */
    max-width: 320px;
    /* 916 #B5I E9BHD */
}

.trainer-card {
    background: var(--medium-dark);
    padding: clamp(20px, 4vw, 30px);
    border-radius: 15px;
    box-shadow: 0 8px 25px var(--shadow-dark);
    text-align: center;
    border: 1px solid var(--light-dark);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}

.trainer-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 35px var(--shadow-dark);
}

.trainer-img {
    width: clamp(120px, 20vw, 180px);
    height: clamp(120px, 20vw, 180px);
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 20px;
    display: block;
}

.trainer-name {
    font-size: clamp(1.4rem, 3.5vw, 1.8rem);
    color: var(--accent-light);
    margin-bottom: 10px;
}

.trainer-bio {
    font-size: clamp(0.95rem, 2.5vw, 1.1rem);
    color: var(--text-light-muted);
    line-height: 1.7;
}


/* Responsive Design for the new section */
@media (max-width: 768px) {
    .trainers-grid {
        grid-template-columns: 1fr;
        /* Single column on smaller screens */
        gap: 25px;
    }

    .trainers-grid .trainer-card:nth-child(3) {
        grid-column: auto;
        /* 'D9H/) DDH69 'D7(J9J */
        justify-self: auto;
        max-width: none;
    }

    .trainer-card {
        padding: clamp(15px, 5vw, 25px);
    }
}

@media (max-width: 576px) {


    .trainer-img {
        width: clamp(80px, 15vw, 120px);
        /* Adjusted for smaller screens */
        height: clamp(80px, 15vw, 120px);
        /* Adjusted for smaller screens */
    }

    .trainer-bio {
        font-size: clamp(0.9rem, 3vw, 1rem);
    }
}

/*********************************/



/* Section styling */
.nmo-leader-section {
    background: var(--dark-step-2);
    color: var(--text-on-dark);
    padding: clamp(60px, 12vw, 80px) 20px;
    text-align: center;
}

.nmo-leader-title {
    font-size: 2.5rem;
    /* الحجم الافتراضي */
    margin-bottom: 50px;
    color: var(--accent-color);
    position: relative;
    display: inline-block;
}

.nmo-leader-title::after {
    content: '';
    position: absolute;
    bottom: -15px;
    right: 50%;
    transform: translateX(50%);
    width: 150px;
    height: 5px;
    background: var(--gradient-accent);
    border-radius: 10px;
}

/* شاشات متوسطة (أقل من 992px) */
@media (max-width: 991px) {
    .nmo-leader-title {
        font-size: 2.2rem;
    }
}

/* شاشات صغيرة (أقل من 768px) */
@media (max-width: 767px) {
    .nmo-leader-title {
        font-size: 1.8rem;
    }
}

/* شاشات أصغر جداً (أقل من 480px) */
@media (max-width: 479px) {
    .nmo-leader-title {
        font-size: 1.6rem;
    }
}


/* Container for cards - flex column, centered */
.nmo-leader-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto;
}

/* Card styling */
.nmo-leader-card {
    background: var(--medium-dark);
    padding: clamp(20px, 4vw, 30px);
    border-radius: 15px;
    box-shadow: 0 8px 25px var(--shadow-dark);
    text-align: center;
    border: 1px solid var(--light-dark);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    max-width: 500px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.nmo-leader-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 35px var(--shadow-dark);
}

.nmo-leader-img {
    width: clamp(120px, 20vw, 180px);
    height: clamp(120px, 20vw, 180px);
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 20px;
    display: block;
}

.nmo-leader-name {
    font-size: clamp(1.4rem, 3.5vw, 1.8rem);
    color: var(--accent-light);
    margin-bottom: 10px;
}

.nmo-leader-bio {
    font-size: clamp(0.95rem, 2.5vw, 1.1rem);
    color: var(--text-light-muted);
    line-height: 1.7;
}

/* Responsive */
@media (max-width: 768px) {
    .nmo-leader-list {
        gap: 25px;
    }

    .nmo-leader-card {
        padding: clamp(15px, 5vw, 25px);
    }
}

@media (max-width: 576px) {


    .nmo-leader-img {
        width: clamp(80px, 15vw, 120px);
        height: clamp(80px, 15vw, 120px);
    }

    .nmo-leader-bio {
        font-size: clamp(0.9rem, 3vw, 1rem);
    }
}



.contact-image-container {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding-bottom: 30px;
}

.contact-image {
    height: 100px;
    /* الحجم الافتراضي للشاشات الكبيرة */
    border-radius: 12px;
    max-width: 100%;
    object-fit: contain;
}

/* شاشات كبيرة - أقل من 1200px */
@media (max-width: 1199px) {
    .contact-image {
        height: 90px;
    }
}

/* شاشات متوسطة - أقل من 992px */
@media (max-width: 991px) {
    .contact-image {
        height: 80px;
    }
}

/* شاشات صغيرة - أقل من 768px */
@media (max-width: 767px) {
    .contact-image {
        height: 70px;
    }
}

/* شاشات أصغر جداً - أقل من 480px */
@media (max-width: 479px) {
    .contact-image {
        height: 60px;
    }
}


/* #FJEJ4F */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(70px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideFadeIn {
    from {
        opacity: 0;
        transform: translateY(50px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bounceFade {
    0% {
        opacity: 0;
        transform: scale(0.95) translateY(30px);
    }

    60% {
        opacity: 1;
        transform: scale(1.03) translateY(-5px);
    }

    100% {
        transform: scale(1) translateY(0);
    }
}

@keyframes float1 {
    0% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(40px, 40px) scale(1.1);
    }

    100% {
        transform: translate(0, 0) scale(1);
    }
}

@keyframes float2 {
    0% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(-45px, -45px) scale(1.15);
    }

    100% {
        transform: translate(0, 0) scale(1);
    }
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}


/* Responsive Design - '3*./'E Mobile First (4CD #C+1 *1CJ2'K */

/* 'DBH'9/ 'D#3'3J) ('D*J *E 6(7G' ('DA9D D*CHF E*,'H() B/1 'D%EC'F ('3*./'E clamp) */

/* *-3JF'* 'D*,'H( */
/* DD4'4'* 'DC(J1): ',9D 'D(7'B'* AJ 5A #ABJ */
@media (min-width: 1200px) {
    .guidelines-container {
        /* On larger screens, revert to grid or adjust as needed */
        grid-template-columns: 1fr;
        /* Example for larger screens */
        display: grid;
        /* Ensure it's still a grid */
        gap: 30px;
        /* Maintain gap */
    }

    .guideline-card {
        width: auto;
        /* Allow auto width within grid */
        max-width: none;
        /* No max-width on individual cards within the grid */
        padding: 20px;
        border-radius: 10px;
        display: flex;
        gap: 1rem;
        align-items: flex-start;
    }

    .guideline-card i {
        color: var(--accent-light, #2c7be5);
        min-width: 30px;
    }

    .guideline-card-text {
        margin: 0;
        font-size: 1.1rem;
        line-height: 1.6;
    }
}


@media (max-width: 992px) {
    .container {
        max-width: 800px;
    }

    /* *-3JF 'D,/'HD */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -15px;
        padding: 0 15px;
    }

    .schedule-table {
        min-width: 700px;
    }

    /* *-3JF 1#3 'D,/HD */
    .week-header {
        font-size: clamp(1.2rem, 3vw, 1.5rem);
        /* Adjusted clamp */
        padding: 8px 12px;
    }

    /* *9/JD *F3JB 'D(7'B'* */
    .standard-card {
        padding: clamp(10px, 2.5vw, 15px);
        /* Adjusted clamp */
    }
}

@media (max-width: 768px) {
    .container {
        max-width: 100%;
    }

    /* *-3JF *F3JB 'D(7'B'* */
    .guideline-card,
    .standard-card {
        padding: clamp(10px, 3vw, 15px);
        /* Adjusted clamp */
        font-size: clamp(0.9rem, 2.2vw, 0.95rem);
        /* Adjusted clamp */
    }

    /* *-3JF *F3JB 'D9/ 'D*F'2DJ */
    .count-parent .box {
        gap: 0.3rem;
        flex-basis: calc(50% - 0.6rem);
        /* 2 boxes per row on smaller screens */
    }

    .upper {
        padding-inline: 0.5rem;
    }

    .upper span {
        font-size: clamp(1.8rem, 5vw, 2.3rem);
        /* Adjusted clamp */
    }

    .countdown-label {
        font-size: clamp(0.8rem, 2.5vw, 0.9rem);
        /* Adjusted clamp */
    }

    /* *9/JD *F3JB 'DFB'7 */
    .progress-dots {
        gap: 5px;
    }

    .progress-dot {
        width: 14px;
        height: 14px;
    }

    /* *-3JF *F3JB 'D#21'1 */
    .hero-buttons {
        display: flex;
        justify-content: center;
        align-items: center;

    }

    .btn {
        width: 100%;
        max-width: 300px;
        padding: 12px 20px;
        font-size: 16px;
    }

    /* *-3JF *F3JB 'DE-*HI 'D1&J3J */
    .hero-content h1 {
        font-size: clamp(2rem, 6vw, 2.5rem);
        /* Adjusted clamp */
    }

    .hero-description {
        font-size: clamp(1rem, 2.8vw, 1.1rem);
        /* Adjusted clamp */
    }

    /* *-3JF *F3JB 'D,/HD */
    .schedule-table th,
    .schedule-table td {
        padding: 8px;
        font-size: clamp(0.8rem, 2vw, 0.9rem);
        /* Adjusted clamp */
    }
}

@media (max-width: 576px) {

    /* *-3JF'* %6'AJ) DD4'4'* 'D5:J1) ,/K' */
    .hero-content h1 {
        font-size: clamp(1.8rem, 7vw, 2rem);
        /* Adjusted clamp */
    }

    .hero-description {
        font-size: clamp(0.9rem, 3vw, 1rem);
        /* Adjusted clamp */
    }

    .count-parent .box {
        flex-basis: calc(50% - 0.6rem);
        /* Keep 2 boxes per row */
        min-width: 60px;
        /* Adjusted min-width */
    }

    .upper span {
        font-size: clamp(1.5rem, 6vw, 1.8rem);
        /* Adjusted clamp */
    }

    .progress-dot {
        width: 10px;
        height: 10px;
    }

    .message-card,
    .policy-box,
    .conclusion-content {
        padding: clamp(20px, 5vw, 30px) clamp(15px, 4vw, 20px);
        /* Adjusted clamp */
    }

    .week-header {
        font-size: clamp(1.1rem, 4vw, 1.3rem);
        /* Adjusted clamp */
    }

    .schedule-table th,
    .schedule-table td {
        padding: 6px;
        font-size: clamp(0.75rem, 2vw, 0.8rem);
        /* Adjusted clamp */
    }

    /* %.A'! (96 'D5H1 AJ 'DGJ/1 9DI 'D4'4'* 'D5:J1) ,/K' */

}

.nav-links {
    display: flex;
    /* أو حسب تصميمك */
}

@media (max-width: 576px) {
    .policy-header {
        gap: 10px;
    }

    .warning-icon {
        font-size: 20px;
        /* تصغير الأيقونة */
        width: 40px;
        height: 40px;
    }

    .policy-title {
        font-size: clamp(1.2rem, 5vw, 1.5rem);
        /* تصغير العنوان */
    }
}


@media (max-width: 576px) {
    .schedule-section-title {
        font-size: clamp(1.2rem, 5vw, 1.7rem);
    }

    .title-sub {
        font-size: clamp(1rem, 4vw, 1.2rem);
        margin-top: 0.1em;
    }
}



@media (max-width: 992px) {

    /* للشاشات الصغيرة فقط */
    @media (max-width: 992px) {
        .nav-links {
            position: fixed;
            top: 0;
            right: -250px;
            /* Sidebar مخفية على اليمين */
            width: 250px;
            /* عرض الشريط */
            height: 100vh;
            /* طول الشاشة كامل */
            background-color: var(--primary-dark);
            flex-direction: column;
            align-items: center;
            padding: 20px 0;

            transition: right 0.3s ease-in-out;
            z-index: 999;
        }

        .nav-links.active {
            right: 0;
            /* يظهر من اليمين */
        }
    }
}



.nav-links li {
    margin: 10px 0;
}

.mobile-menu {
    display: none;
}

.main-content {
    flex-direction: column;
}

.image-section,
.login-section {
    flex: none;
    width: 100%;
}

.image-section {
    padding: 40px 20px;
}

.login-form {
    max-width: 600px;
}

.welcome-message h2 {
    font-size: 2rem;
}

.welcome-message p {
    font-size: 1.1rem;
}


@media (max-width: 768px) {
    .login-form {
        padding: 30px 20px;
    }

    .login-form h2 {
        font-size: 1.5rem;
    }

    .welcome-message h2 {
        font-size: 1.8rem;
    }

    .nav-links {
        position: fixed;
        top: 0;
        right: -250px;
        /* Sidebar مخفية على اليمين */
        width: 250px;
        /* عرض الشريط */
        height: 100vh;
        /* طول الشاشة كامل */
        background-color: var(--primary-dark);
        flex-direction: column;
        align-items: center;
        padding: 20px 0;

        transition: right 0.3s ease-in-out;
        z-index: 999;
    }

    .nav-links.active {
        right: 0;
        /* يظهر من اليمين */
    }

    .mobile-menu {
        display: block;
    }
}

@media (max-width: 480px) {
    .nav-links {
        position: fixed;
        top: 0;
        right: -250px;
        /* Sidebar مخفية على اليمين */
        width: 250px;
        /* عرض الشريط */
        height: 100vh;
        /* طول الشاشة كامل */
        background-color: var(--primary-dark);
        flex-direction: column;
        align-items: center;
        padding: 20px 0;

        transition: right 0.3s ease-in-out;
        z-index: 999;
    }

    .nav-links.active {
        right: 0;
        /* يظهر من اليمين */
    }

    .logo-nav img {
        height: 30px;

    }

    .navbar-container {
        display: flex;
        justify-content: space-around;
    }

    .mobile-menu {
        font-size: 1.5rem;
        display: block;
    }

    .nav-links {
        top: 60px;
    }

    .nav-links li a {
        font-size: 1rem;
        padding: 10px 15px;
    }

    .login-section,
    .image-section {
        padding: 20px 10px;

    }

    .welcome-message h2 {
        font-size: 1.5rem;
    }

    .welcome-message p {
        font-size: 0.9rem;
    }

    .login-form h2 {
        font-size: 1.3rem;
    }

    .form-group label,
    .form-group input,
    .form-footer a {
        font-size: 0.9rem;
    }

    .btn {
        padding: 10px 20px;
        font-size: 1rem;
    }
}