/* ============================================================
   1. كود الشاشة الافتتاحية (Splash Screen)
   ============================================================ */
#splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    z-index: 99999; /* أعلى طبقة فوق كل شيء */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.8s ease-out, visibility 0.8s;
}

.splash-content {
    text-align: center;
    animation: scaleUp 0.8s ease-out;
}

.logo-box {
    width: 90px; /* حجم أيقونة التطبيق */
    height: 90px;
    background: #fff;
    border-radius: 22px; /* حواف ناعمة (Squircle) */
    box-shadow: 0 10px 30px rgba(0,0,0,0.08); /* ظل ناعم جداً */
    padding: 10px;
    margin: 0 auto 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 12px;
}

.app-name {
    font-size: 1.4rem;
    color: var(--brand-navy);
    font-weight: 800;
    letter-spacing: 0.5px;
}
.app-name span { color: var(--brand-teal); }

@keyframes scaleUp {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* ============================================================
   2. تنسيقات الجوال "Micro UI" (صغير، ناعم، مثل التطبيقات)
   ============================================================ */
@media (max-width: 768px) {
    
    /* === 1. تحسين الصورة العلوية (Header Image) === */
    .swiper {
        height: 300px !important; /* ارتفاع متوسط ومناسب */
        border-radius: 0 0 30px 30px; /* تدوير ناعم من الأسفل فقط */
        margin-bottom: 0;
        box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    }
    
    .swiper-slide img {
        border-radius: 0 0 30px 30px;
    }

    /* === 2. إزالة حواف البطاقة لملء الشاشة === */
    .event-detail-container { padding: 0; display: block; }
    .main-event-card { 
        padding: 0; 
        background: transparent; 
        box-shadow: none; 
        width: 100%; 
    }

    /* === 3. شبكة الأزرار (3 بجانب بعض) === */
    .details-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* 3 أعمدة متساوية */
        gap: 8px; /* مسافة صغيرة جداً بين العناصر */
        
        /* حركة التداخل مع الصورة */
        margin-top: -50px; 
        position: relative;
        z-index: 20;
        padding: 0 15px; /* هوامش جانبية للشاشة */
    }

    /* === 4. تصميم الزر (المربع الصغير) === */
    .detail-item {
        background: rgba(255, 255, 255, 0.95); /* أبيض شبه شفاف */
        backdrop-filter: blur(10px); /* تأثير الزجاج */
        -webkit-backdrop-filter: blur(10px);
        
        border-radius: 18px; /* حواف ناعمة جداً */
        padding: 5px;
        height: 75px; /* ارتفاع صغير وثابت */
        min-height: auto;
        
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        
        box-shadow: 0 5px 15px rgba(0,0,0,0.05); /* ظل خفيف */
        border: 1px solid rgba(255,255,255,0.6);
    }

    /* === 5. الأيقونة المصغرة === */
    .detail-item i {
        font-size: 0.85rem; /* حجم أيقونة صغير */
        color: var(--brand-teal);
        
        /* الدائرة خلف الأيقونة */
        background: rgba(0, 191, 165, 0.08);
        width: 26px;
        height: 26px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 4px;
    }

    /* === 6. النصوص المصغرة (Micro Typography) === */
    .detail-item p { margin: 0; line-height: 1.1; text-align: center; }

    /* تسمية الحقل (التاريخ، المكان...) */
    .detail-item p:first-of-type {
        font-size: 0.55rem; /* خط دقيق جداً */
        color: #999;
        font-weight: 600;
        margin-bottom: 2px;
    }

    /* القيمة (2025، ISCAE...) */
    .detail-item p:last-child {
        font-size: 0.65rem; /* خط القيمة صغير وواضح */
        font-weight: 800;
        color: var(--brand-navy);
        width: 100%;
        white-space: nowrap;      /* سطر واحد فقط */
        overflow: hidden;         /* إخفاء الزائد */
        text-overflow: ellipsis;  /* وضع (...) إذا كان طويلاً */
    }

    /* === 7. العنوان الرئيسي والوصف === */
    .event-title-header {
        margin-top: 15px;
        margin-bottom: 10px;
        padding: 0 20px;
        text-align: center;
    }
    
    .event-title-header h1 {
        font-size: 1.2rem; /* تصغير عنوان الفعالية */
        font-weight: 800;
        color: var(--brand-navy);
    }
    
    /* تنسيق الوصف */
    #detailDesc {
        font-size: 0.9rem;
        padding: 0 20px;
        color: #555;
        line-height: 1.6;
        text-align: justify;
    }
    
    /* زر العودة */
    .neu-btn.secondary-btn {
        font-size: 0.8rem;
        padding: 10px 25px;
        border-radius: 50px; /* زر دائري بالكامل */
        margin-bottom: 30px;
    }
}

/* === المتغيرات العامة === */
:root {
    --bg-color: #e0e5ec;
    --text-main: #333;
    --text-light: #666;
    --brand-teal: #00BFA5;  /* لون الشعار التيركواز */
    --brand-navy: #1A237E;  /* لون الشعار الكحلي */
    
    /* الظلال الناعمة (Neumorphism) */
    --shadow-out: 9px 9px 16px rgb(163,177,198,0.6), -9px -9px 16px rgba(255,255,255, 0.5);
    --shadow-in: inset 6px 6px 10px 0 rgba(163,177,198, 0.7), inset -6px -6px 10px 0 rgba(255,255,255, 0.8);
    
    /* متغيرات خاصة بـ Neumorphism للوضع الليلي */
    --dark-bg: #1c1c1c;
    --dark-text-main: #f0f0f0;
    --dark-text-light: #b0b0b0;
    --dark-shadow-out: 8px 8px 16px rgba(0,0,0,0.5), -8px -8px 16px rgba(44,44,44,0.5);
    --dark-shadow-in: inset 6px 6px 10px rgba(0,0,0,0.5), inset -6px -6px 10px rgba(44,44,44,0.5);
}

/* === أنماط الوضع الليلي (Dark Mode) === */
body.dark-mode {
    --bg-color: var(--dark-bg);
    --text-main: var(--dark-text-main);
    --text-light: var(--dark-text-light);
    --shadow-out: var(--dark-shadow-out);
    --shadow-in: var(--dark-shadow-in);
    
    /* تعديل ظلال الأزرار الأساسية في الوضع الليلي */
    .primary-btn {
        box-shadow: 6px 6px 10px 0 rgba(0, 191, 165, 0.4), -6px -6px 10px 0 rgba(0,0,0, 0.3);
    }
    .primary-btn:hover {
        box-shadow: 3px 3px 6px 0 rgba(0, 191, 165, 0.4), -3px -3px 6px 0 rgba(0,0,0, 0.3);
    }
    
    /* تعديل ظلال العناصر غير المعرّفة بمتغيرات الظل */
    .about-item .icon-box {
        box-shadow: 5px 5px 10px rgba(0, 191, 165, 0.6);
    }
    .member-image-placeholder {
        box-shadow: var(--dark-shadow-in);
    }
    .contact-item .icon-box {
        box-shadow: 5px 5px 10px rgba(26, 35, 126, 0.6);
    }
    .fab-btn {
        box-shadow: 9px 9px 16px rgba(0, 191, 165, 0.6), -9px -9px 16px rgba(0,0,0, 0.5);
    }
    .neu-header {
        box-shadow: none !important; /* لإزالة الظل الأبيض القديم */
    }
    
}

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

body {
    background-color: var(--bg-color);
    color: var(--text-main);
    overflow-x: hidden;
}

a { text-decoration: none; }

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

section {
    padding: 80px 0;
}

/* === عناصر Neuromorphic الأساسية === */

.neu-card {
    background-color: var(--bg-color);
    border-radius: 25px;
    box-shadow: var(--shadow-out);
    padding: 30px;
    transition: all 0.3s;
    position: relative;
}

.neu-card:hover {
    /* تغيير الظل ليناسب الوضع الليلي أيضاً */
    box-shadow: 12px 12px 20px rgb(163,177,198,0.7), -12px -12px 20px rgba(255,255,255, 0.6);
    transform: translateY(-3px);
}
body.dark-mode .neu-card:hover {
    box-shadow: 12px 12px 20px rgba(0,0,0,0.7), -12px -12px 20px rgba(44,44,44,0.6);
}


.neu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 25px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    text-align: center;
    border: none;
}

.primary-btn {
    background-color: var(--brand-teal);
    color: white;
    box-shadow: 6px 6px 10px 0 rgba(0, 191, 165, 0.4), -6px -6px 10px 0 rgba(255,255,255, 0.3);
}

.primary-btn:hover {
    box-shadow: 3px 3px 6px 0 rgba(0, 191, 165, 0.4), -3px -3px 6px 0 rgba(255,255,255, 0.3);
    transform: scale(0.98);
}

.secondary-btn {
    background-color: var(--bg-color);
    color: var(--brand-navy);
    box-shadow: var(--shadow-out);
}

.secondary-btn:hover {
    box-shadow: var(--shadow-in);
    color: var(--brand-teal);
}

.large-btn {
    padding: 15px 30px;
    font-size: 1.1rem;
}

.sm-btn {
    padding: 8px 15px;
    font-size: 0.9rem;
}

/* === الصورة الثابتة القابلة للتغيير === */
.placeholder-img {
    /* يضمن تغطية الصورة للمساحة المخصصة */
    width: 100%;
    height: 100%;
    object-fit: cover; 
    position: absolute; /* ليتم وضعها داخل البطاقة بشكل مطلق */
    top: 0;
    left: 0;
    border-radius: inherit; /* لتأخذ شكل البطاقة الأم */
}

/* === الهيدر والتنقل (Header & Nav) === */

.neu-header {
    background-color: var(--bg-color);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    transition: box-shadow 0.3s ease-in-out;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
}

.logo {
    display: flex;
    align-items: center;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--brand-navy);
}

.logo span {
    color: var(--brand-teal);
}

.logo-icon {
    color: var(--brand-teal);
    margin-left: 10px;
}

.desktop-nav a {
    color: var(--text-main);
    margin: 0 15px;
    padding: 8px 0;
    font-weight: 600;
    transition: color 0.3s;
    position: relative;
}

.desktop-nav a:hover,
.desktop-nav a.active {
    color: var(--brand-teal);
}

.desktop-nav a.active::after {
    content: '';
    position: absolute;
    bottom: -5px;
    right: 0;
    width: 100%;
    height: 3px;
    background-color: var(--brand-teal);
    border-radius: 5px;
}

.header-actions {
    display: flex; /* لترتيب زر العضوية والوضع الليلي */
    align-items: center;
    margin-left: 20px;
}

/* === زر الوضع الليلي (Dark Mode Toggle) === */
#darkModeToggle {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    font-size: 1.1rem;
    color: var(--brand-navy);
    cursor: pointer;
    margin-right: 15px; /* مسافة عن زر طلب عضوية */
}

/* === القائمة السفلية (Bottom Nav) للجوال === */

.bottom-nav {
    display: none; /* يتم إظهارها في شاشات الجوال فقط */
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background-color: var(--bg-color);
    box-shadow: 0 -4px 15px rgba(0,0,0,0.1);
    z-index: 90;
    justify-content: space-around;
    align-items: center;
    padding: 0 10px;
}
body.dark-mode .bottom-nav {
    box-shadow: 0 -4px 15px rgba(255,255,255,0.05);
}

.bottom-nav .nav-item {
    color: var(--text-light);
    font-size: 1.2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 20%;
    height: 100%;
    transition: color 0.3s;
}

.bottom-nav .nav-item.active {
    color: var(--brand-teal);
}

.center-fab {
    position: relative;
    top: -20px; /* لرفع الزر قليلاً */
    z-index: 91;
}

.fab-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: var(--brand-teal);
    color: white;
    box-shadow: var(--shadow-out);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    box-shadow: 9px 9px 16px rgba(0, 191, 165, 0.6), -9px -9px 16px rgba(255,255,255, 0.5);
    transition: all 0.3s;
}
body.dark-mode .fab-btn {
    box-shadow: 9px 9px 16px rgba(0, 191, 165, 0.6), -9px -9px 16px rgba(0,0,0, 0.5);
}

.fab-btn:hover {
    box-shadow: var(--shadow-in);
    transform: scale(0.95);
}


/* === أقسام الصفحة الرئيسية (Main Content Sections) === */

.section-header {
    text-align: center;
    margin-bottom: 50px;
}

.section-header h2 {
    font-size: 2.5rem;
    color: var(--brand-navy);
    font-weight: 800;
}

.section-header p {
    color: var(--text-light);
    margin-top: 10px;
}

/* Hero Section */
.hero-section {
    padding-top: 150px; /* تعويض الهيدر الثابت */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.hero-content {
    flex: 1;
    max-width: 50%;
}

.hero-content h1 {
    font-size: 3.5rem;
    color: var(--brand-navy);
    line-height: 1.2;
}

.hero-content .subtitle {
    font-size: 1.2rem;
    color: var(--text-light);
    margin: 20px 0 30px;
}

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

.hero-image-placeholder {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 50%;
}

.large-card {
    min-height: 400px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    color: var(--text-light);
    overflow: hidden; /* لمنع الصورة من الخروج عن حدود البطاقة */
}
/* تعديل لجعل الأيقونة تظهر فوق الصورة في الهيرو */
#heroImageContainer .icon-placeholder {
    position: relative; 
    z-index: 2;
}
#heroImageContainer .placeholder-img {
    opacity: 1; 
    border-radius: 20px;
}


.icon-placeholder {
    font-size: 4rem;
    color: var(--brand-teal);
    opacity: 0.5;
}

/* About Section */
.about-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    text-align: center;
}

.about-item .icon-box {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: var(--brand-teal);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    margin: 0 auto 20px;
    box-shadow: 5px 5px 10px rgba(0, 191, 165, 0.4);
}

.about-item h3 {
    color: var(--brand-navy);
    margin-bottom: 10px;
}

/* Events Section */
.events-list {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.event-wide {
    display: flex;
    align-items: center;
    padding: 20px;
    text-align: right;
}

.event-wide .event-image-placeholder {
    min-width: 200px;
    max-width: 200px;
    height: 150px;
    border-radius: 15px;
    background-color: var(--bg-color);
    box-shadow: var(--shadow-in);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 20px;
    position: relative;
    overflow: hidden;
}

.event-wide h3 {
    color: var(--brand-navy);
    margin-bottom: 10px;
}

.event-meta {
    font-size: 0.9rem;
    color: var(--text-light);
    margin-bottom: 10px;
}

.event-meta span {
    margin-left: 20px;
}

.event-meta i {
    color: var(--brand-teal);
    margin-left: 5px;
}

.event-tags {
    margin-top: 15px;
}

.event-tags span {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-left: 10px;
}

.tag-teal {
    background-color: rgba(0, 191, 165, 0.2);
    color: var(--brand-teal);
}

.tag-navy {
    background-color: rgba(26, 35, 126, 0.1);
    color: var(--brand-navy);
}

/* Upcoming Section */
.opacity-50 {
    opacity: 0.5;
    pointer-events: none; /* لجعلها غير قابلة للنقر */
}


/* Members Section */
.members-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 30px;
    text-align: center;
}

.member-card {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.member-image-placeholder {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background-color: var(--bg-color);
    box-shadow: var(--shadow-in);
    margin-bottom: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3rem;
    color: var(--text-light);
    position: relative;
    overflow: hidden; /* لضمان أن الصورة ذات الحدود الدائرية */
}

.member-image-placeholder .placeholder-img {
    border-radius: 50%;
}

.member-card h3 {
    color: var(--brand-navy);
}

.member-card .role {
    color: var(--brand-teal);
    font-weight: 600;
    margin-bottom: 15px;
}

.member-card .social-links a {
    color: var(--text-light);
    font-size: 1.2rem;
    margin: 0 5px;
    transition: color 0.3s;
}

.member-card .social-links a:hover {
    color: var(--brand-navy);
}

/* Contact Section */
.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    text-align: center;
}

.contact-item .icon-box {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-color: var(--brand-navy);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.8rem;
    margin: 0 auto 20px;
    box-shadow: 5px 5px 10px rgba(26, 35, 126, 0.4);
}

.contact-item h3 {
    color: var(--brand-navy);
    margin-bottom: 5px;
}

.contact-item p {
    color: var(--text-light);
}


/* === أنماط صفحات الدخول/الانضمام === */

.circles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}

.circle {
    position: absolute;
    border-radius: 50%;
    background-color: rgba(0, 191, 165, 0.1);
    box-shadow: var(--shadow-out);
}
body.dark-mode .circle {
    box-shadow: var(--dark-shadow-out);
}


.circle-1 {
    width: 300px;
    height: 300px;
    top: 10%;
    left: -5%;
}

.circle-2 {
    width: 450px;
    height: 450px;
    bottom: -10%;
    right: -10%;
    background-color: rgba(26, 35, 126, 0.1);
}

.login-container {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 50px 20px;
    position: relative;
    z-index: 10;
}

.neumorphic-card {
    max-width: 450px;
    width: 100%;
    padding: 40px;
    text-align: center;
    background-color: var(--bg-color);
    border-radius: 30px;
    box-shadow: var(--shadow-out);
    position: relative;
}

.login-title {
    color: var(--brand-navy);
    font-weight: 800;
    margin-bottom: 10px;
}

.login-form {
    margin-top: 30px;
}

.input-group {
    position: relative;
    margin-bottom: 25px;
}

.input-group input, .neu-select {
    width: 100%;
    padding: 15px 15px 15px 45px;
    border: none;
    border-radius: 10px;
    background: var(--bg-color);
    /* ** تطبيق الظل الداخلي (var(--shadow-in)) ** */
    box-shadow: var(--shadow-in); 
    color: var(--text-main);
    font-size: 1rem;
    outline: none;
    transition: box-shadow 0.3s;
    appearance: none;
}

.input-group input:focus, .neu-select:focus {
    box-shadow: inset 2px 2px 5px rgba(163,177,198,0.7), inset -2px -2px 5px rgba(255,255,255,0.8);
}
body.dark-mode .input-group input:focus, body.dark-mode .neu-select:focus {
    box-shadow: inset 2px 2px 5px rgba(0,0,0,0.7), inset -2px -2px 5px rgba(44,44,44,0.8);
}


.input-icon {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    color: var(--brand-teal);
    font-size: 1.1rem;
    z-index: 5;
}

.neu-select {
    padding-right: 45px; /* مسافة للآيقونة في اليمين */
}

.forgot-pass {
    margin-top: 15px;
    display: block;
    color: var(--text-light);
    font-size: 0.9rem;
    transition: color 0.3s;
}

.forgot-pass:hover {
    color: var(--brand-teal);
}

/* Success Message */
.success-card {
    border: 3px solid var(--brand-teal);
    box-shadow: 0 0 20px rgba(0, 191, 165, 0.3);
}

.success-icon {
    color: var(--brand-teal);
    font-size: 3rem;
}


/* === أنماط صفحة تفاصيل الفعالية (Event Detail) === */

.event-detail-container {
    padding: 80px 20px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
}
.main-event-card {
    max-width: 900px;
    width: 100%;
    padding: 40px;
    text-align: right;
    position: relative; 
    z-index: 10;
}
.event-title-header {
    text-align: center;
    margin-bottom: 40px;
}
.event-title-header h1 {
    font-size: 2.5rem;
    color: var(--brand-navy);
}


/* === فوتر (Footer) === */

footer {
    background-color: var(--brand-navy);
    color: white;
    padding: 20px 0;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-content p {
    font-size: 0.9rem;
}

.footer-content .social-links a {
    color: white;
    font-size: 1.2rem;
    margin-left: 15px;
    transition: color 0.3s;
}

.footer-content .social-links a:hover {
    color: var(--brand-teal);
}

/* === ميديا كويري (Media Queries) للتجاوبية === */

/* شاشات اللوحيات والجوال (أصغر من 992px) */
@media (max-width: 992px) {
    .hero-section {
        flex-direction: column;
        text-align: center;
        padding-top: 100px;
    }
    
    .hero-content {
        max-width: 100%;
    }
    
    .hero-content h1 {
        font-size: 2.5rem;
    }
    
    .hero-image-placeholder {
        max-width: 80%;
        margin-top: 30px;
    }
    
    .desktop-nav {
        display: none;
    }
    
    .header-actions {
        /* إظهار زر الوضع الليلي على اللوحيات */
        display: flex; 
        /* إخفاء زر طلب العضوية في الهيدر العلوي على شاشات اللوحيات/الجوال */
        .primary-btn { display: none; }
    }

    .event-wide {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .event-wide .event-image-placeholder {
        min-width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-bottom: 20px;
        height: 200px;
    }

    .event-meta {
        justify-content: center;
        display: flex;
        flex-wrap: wrap;
    }

    .footer-content {
        flex-direction: column;
        gap: 10px;
    }
}

/* شاشات الجوال الأصغر (أصغر من 768px) */
@media (max-width: 768px) {
    section {
        padding: 50px 0;
    }

    .bottom-nav {
        display: flex; /* إظهار شريط التنقل السفلي في الجوال */
    }

    .neu-header {
        height: 60px; /* لتقليل ارتفاع الهيدر في الجوال */
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    body.dark-mode .neu-header {
        box-shadow: 0 2px 10px rgba(255,255,255,0.05);
    }
    
    .hero-content h1 {
        font-size: 2rem;
    }

    /* إخفاء زر طلب العضوية في الهيدر المكتبي */
    .header-actions .primary-btn {
        display: none;
    }

    /* === أنماط القائمة الجوالة (Hamburger Menu) === */
    .menu-toggle {
        display: block; /* إظهار زر التبديل (الهمبرغر) */
        font-size: 1.5rem;
        color: var(--brand-navy);
        cursor: pointer;
    }

    .mobile-menu {
        position: fixed;
        top: 0;
        right: 0; 
        width: 80%;
        max-width: 300px;
        height: 100%;
        background: var(--bg-color);
        z-index: 99; 
        padding-top: 80px;
        display: none; 
        flex-direction: column;
        align-items: center;
        text-align: center;
        box-shadow: var(--shadow-out);
        transition: transform 0.3s ease-in-out;
        transform: translateX(100%); 
    }

    .mobile-menu.active {
        display: flex;
        transform: translateX(0); 
    }

    .mobile-menu a {
        color: var(--brand-navy);
        font-size: 1.2rem;
        padding: 15px 0;
        width: 80%;
        margin: 5px 0;
        border-radius: 10px;
        transition: background 0.2s;
    }

    .mobile-menu a:hover {
        background: rgba(0, 191, 165, 0.1);
  
  }



/* في ملف style.css - اذهب إلى قسم @media (max-width: 992px) */

@media (max-width: 992px) {
    /* ... الأكواد السابقة ... */

    .hero-image-placeholder {
        max-width: 100%; /* اجعلها تأخذ عرض الشاشة */
        width: 100%;
        height: 300px; /* ارتفاع ثابت مناسب للجوال */
        margin-top: 30px;
    }

    .large-card {
        min-height: auto; /* إلغاء الحد الأدنى للارتفاع القديم */
        height: 100%;
        width: 100%;
        border-radius: 20px;
    }
    
    /* تأكد أن الصورة تملأ البطاقة */
    .placeholder-img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* يضمن قص الصورة لتملأ المكان دون مط */
        position: relative; /* تغيير من absolute لضمان ظهورها */
        border-radius: 20px;
    }
}


}