@charset "UTF-8";
/* ==========================================================================
   home2.css — أنماط قالب الصفحة الرئيسية الجديد
   ==========================================================================

   كل القواعد مُقيَّدة بالحاوية .h2 حتى لا تتسرّب إلى قوالب الموقع الأخرى
   ولا يتداخل معها main.css.

   الخطوط:  محلية بالكامل — لا اتصال بالإنترنت.
   الأيقونات: FontAwesome 6.2.1 الموجود أصلًا في المشروع.
   ========================================================================== */


/* --------------------------------------------------------------------------
   الخط العربي
   --------------------------------------------------------------------------
   خط Cairo اختياري: إن وضعت ملفاته في frontend/default/assets/fonts/cairo/
   سيُستخدم تلقائيًا، وإن لم توجد فالمتصفّح ينتقل بهدوء لخطوط النظام.
   -------------------------------------------------------------------------- */

@font-face {
    font-family: 'Cairo';
    src: url('../../fonts/cairo/Cairo-Light.woff2') format('woff2');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Cairo';
    src: url('../../fonts/cairo/Cairo-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Cairo';
    src: url('../../fonts/cairo/Cairo-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Cairo';
    src: url('../../fonts/cairo/Cairo-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Cairo';
    src: url('../../fonts/cairo/Cairo-Black.woff2') format('woff2');
    font-weight: 900;
    font-display: swap;
}


/* --------------------------------------------------------------------------
   المتغيّرات
   -------------------------------------------------------------------------- */

/*
 * تُعرَّف على الثلاثة لا على .h2 وحدها: الترويسة والتذييل صارا partials
 * مشتركين يُستدعيان من قوالب أخرى خارج حاوية .h2، وبدون ذلك تصبح كل
 * var(--…) غير معرّفة فيفقدان ألوانهما بالكامل.
 */
.h2,
.h2-header,
.h2-footer {
    --primary:   #1e3a8a;   /* كحلي ملكي عميق */
    --secondary: #0284c7;   /* أزرق حيوي */
    --accent:    #f97316;   /* برتقالي مشرق */
    --whatsapp:  #25d366;   /* أخضر واتساب */
    --dark:      #0f172a;   /* نص داكن */
    --light:     #f8fafc;   /* خلفية فاتحة */
    --card-bg:   #ffffff;
    --gradient:  linear-gradient(135deg, #1e3a8a 0%, #0284c7 100%);
    --h2-font:   'Cairo', 'Segoe UI', Tahoma, 'Noto Sans Arabic', 'Dubai', Arial, sans-serif;
}


/* --------------------------------------------------------------------------
   إخفاء ترويسة وتذييل القالب الأصلي
   --------------------------------------------------------------------------
   هذا التصميم يحمل ترويسة وتذييلًا خاصين به. لإعادة إظهار الأصلية
   احذف السطور الثلاثة التالية.
   -------------------------------------------------------------------------- */

body.has-home2 .header-part,
body.has-home2 .footer-part,
body.has-home2 .header-top-area {
    display: none !important;
}


/* --------------------------------------------------------------------------
   الأساسيات
   -------------------------------------------------------------------------- */

/*
 * تنبيه: لا تُضف font-family إلى هذا المحدّد الشامل.
 *
 * ‎.h2 * تطابق أيضًا وسوم <i> الخاصة بالأيقونات، وقواعد FontAwesome
 * مثل ‎.fa-solid { font-family: "Font Awesome 6 Free" } لها نفس درجة
 * التخصيص (0-1-0) وبلا ‎!important — وهذا الملف يُحمَّل بعدها، فيغلبها
 * وتختفي كل الأيقونات وتظهر مربّعات فارغة.
 *
 * الخطّ يُضبط على ‎.h2 وحدها ويُورَّث؛ والوراثة لا تتغلّب على قواعد
 * FontAwesome المطبَّقة مباشرة على الأيقونة.
 */
.h2,
.h2 *,
.h2-header,
.h2-header *,
.h2-footer,
.h2-footer * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/*
 * الخطّ على الحاويتين فقط لا على أبنائهما — للسبب المشروح أعلاه.
 * لازم لأن الترويسة والتذييل قد يقعان خارج .h2 في قوالب أخرى.
 */
.h2-header,
.h2-footer {
    font-family: var(--h2-font);
}

.h2 {
    font-family: var(--h2-font);
    background-color: var(--light);
    color: var(--dark);
    overflow-x: hidden;
    scroll-behavior: smooth;
    direction: rtl;
    text-align: right;
}

.h2 img {
    max-width: 100%;
}


/* --------------------------------------------------------------------------
   الترويسة
   -------------------------------------------------------------------------- */

.h2-header {
    /* position: fixed; */
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 8%;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.03);
    z-index: 1000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

.h2-logo {
    font-size: 24px;
    font-weight: 900;
    background: var(--gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.h2-logo img {
    height: 42px;
    width: auto;
    -webkit-text-fill-color: initial;
}

.h2-nav {
    display: flex;
    align-items: center;
}

.h2-nav a {
    margin: 0 20px;
    text-decoration: none;
    color: var(--dark);
    font-weight: 600;
    position: relative;
    transition: 0.3s;
    white-space: nowrap;
}

.h2-nav a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    right: 0;
    width: 0;
    height: 3px;
    background: var(--accent);
    transition: 0.3s;
    border-radius: 2px;
}

.h2-nav a:hover::after {
    width: 100%;
}

.h2-header .btn-dash {
    background: transparent;
    color: var(--primary);
    border: 2px solid var(--primary);
    padding: 10px 24px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: 0.4s ease;
    white-space: nowrap;
}

.h2-header .btn-dash:hover {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 8px 20px rgba(30, 58, 138, 0.2);
}

/* زر القائمة على الشاشات الصغيرة */
.h2-menu-toggle {
    display: none;
    background: transparent;
    border: 0;
    font-size: 26px;
    color: var(--primary);
    cursor: pointer;
}


/* --------------------------------------------------------------------------
   الهيرو
   -------------------------------------------------------------------------- */

.h2-hero {
    position: relative;
    min-height: 95vh;
    background-color: var(--dark);
    background-image: linear-gradient(rgba(15, 23, 42, 0.65), rgba(15, 23, 42, 0.8));
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 120px 20px 60px;
}

.h2-hero-content {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 50px 40px;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    max-width: 850px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    animation: h2FadeInUp 1s ease-out;
}

.h2-hero h1 {
    font-size: 3.5rem;
    font-weight: 900;
    color: #ffffff;
    line-height: 1.3;
    margin-bottom: 15px;
}

.h2-hero p {
    font-size: 1.5rem;
    color: #e2e8f0;
    margin-bottom: 30px;
    font-weight: 300;
    letter-spacing: 1px;
}

.h2 .btn-whatsapp {
    background: linear-gradient(135deg, var(--whatsapp) 0%, #1ebd52 100%);
    color: #fff;
    padding: 16px 45px;
    border-radius: 50px;
    text-decoration: none;
    font-size: 1.3rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 10px 25px rgba(37, 211, 102, 0.4);
    transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.h2 .btn-whatsapp:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(37, 211, 102, 0.6);
}


/* --------------------------------------------------------------------------
   الأقسام والعناوين
   -------------------------------------------------------------------------- */

.h2 section {
    padding: 100px 8%;
}

.h2 .section-title {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 15px;
    position: relative;
    color: var(--primary);
}

.h2 .section-title::after {
    content: '';
    display: block;
    width: 80px;
    height: 5px;
    background: var(--accent);
    margin: 10px auto 0;
    border-radius: 10px;
}

.h2 .section-subtitle {
    text-align: center;
    color: #64748b;
    margin-bottom: 60px;
    font-size: 1.1rem;
}


/* --------------------------------------------------------------------------
   الخدمات
   -------------------------------------------------------------------------- */

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

.h2 .service-card {
    background: var(--card-bg);
    padding: 40px 30px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
    text-align: center;
    transition: 0.4s ease;
    border: 1px solid #f1f5f9;
    position: relative;
    overflow: hidden;
}

.h2 .service-card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 5px;
    background: var(--gradient);
    opacity: 0;
    transition: 0.3s;
}

.h2 .service-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

.h2 .service-card:hover::before {
    opacity: 1;
}

.h2 .icon-box {
    width: 80px;
    height: 80px;
    background: #eff6ff;
    color: var(--secondary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin: 0 auto 25px;
    transition: 0.3s;
}

.h2 .service-card:hover .icon-box {
    background: var(--primary);
    color: #fff;
}

.h2 .service-card h3 {
    font-size: 1.4rem;
    margin-bottom: 12px;
    color: var(--dark);
}

.h2 .service-card p {
    color: #64748b;
    line-height: 1.7;
}


/* --------------------------------------------------------------------------
   لوحة الشرف
   -------------------------------------------------------------------------- */

.h2 .excellence-section {
    background: #f1f5f9;
}

.h2 .excellence-container {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 40px;
}

.h2 .showcase-box {
    background: #fff;
    border-radius: 24px;
    padding: 40px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.03);
    border: 1px solid #e2e8f0;
}

.h2 .badge-title {
    display: inline-block;
    background: rgba(249, 115, 22, 0.1);
    color: var(--accent);
    padding: 6px 16px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 25px;
}

.h2 .badge-title.is-blue {
    background: rgba(2, 132, 199, 0.1);
    color: var(--secondary);
}

.h2 .profile-flex {
    display: flex;
    align-items: center;
    gap: 25px;
}

.h2 .profile-img {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #fff;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.h2 .profile-info h3 {
    font-size: 1.6rem;
    color: var(--primary);
    margin-bottom: 5px;
}

.h2 .profile-info .sub {
    color: var(--secondary);
    font-weight: 600;
    margin-bottom: 15px;
    display: block;
}

.h2 .profile-info .quote {
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.7;
}

.h2 .students-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.h2 .student-small-card {
    background: #f8fafc;
    padding: 20px;
    border-radius: 16px;
    text-align: center;
    border: 1px solid #e2e8f0;
}

.h2 .student-small-card img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 10px;
}

.h2 .student-small-card h4 {
    color: var(--primary);
    margin-bottom: 4px;
}

.h2 .student-small-card p {
    color: #64748b;
    font-size: 0.85rem;
}


/* --------------------------------------------------------------------------
   الأنشطة
   -------------------------------------------------------------------------- */

.h2 .activities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
}

.h2 .activity-item {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    height: 300px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}

.h2 .activity-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.5s ease;
}

.h2 .activity-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(transparent, rgba(15, 23, 42, 0.95));
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 30px;
    opacity: 0;
    transition: 0.4s ease;
    transform: translateY(20px);
}

.h2 .activity-item:hover img {
    transform: scale(1.1);
}

.h2 .activity-item:hover .activity-overlay {
    opacity: 1;
    transform: translateY(0);
}

.h2 .activity-overlay h4 {
    color: #fff;
    font-size: 1.4rem;
    margin-bottom: 8px;
}

.h2 .activity-overlay p {
    color: #cbd5e1;
    font-size: 0.95rem;
    line-height: 1.6;
}


/* --------------------------------------------------------------------------
   الدروس المصوّرة
   -------------------------------------------------------------------------- */

.h2 .videos-section {
    background: #ffffff;
}

.h2 .videos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 35px;
}

.h2 .video-card {
    background: var(--light);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
    border: 1px solid #e2e8f0;
    transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.h2 .video-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(30, 58, 138, 0.08);
    border-color: rgba(2, 132, 199, 0.2);
}

/* نسبة 16:9 ثابتة لإطار الفيديو */
.h2 .video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    background: #000;
}

.h2 .video-container iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.h2 .video-body {
    padding: 25px;
}

.h2 .video-tag {
    display: inline-block;
    background: rgba(2, 132, 199, 0.1);
    color: var(--secondary);
    padding: 4px 14px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 12px;
}

.h2 .video-body h3 {
    font-size: 1.3rem;
    color: var(--primary);
    margin-bottom: 10px;
    font-weight: 700;
}

.h2 .video-body p {
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.6;
}

.h2 .video-footer {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px dashed #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    color: #94a3b8;
}

.h2 .video-footer span i {
    margin-left: 5px;
    color: var(--accent);
}


/* --------------------------------------------------------------------------
   التذييل
   -------------------------------------------------------------------------- */

.h2-footer {
    background: var(--dark);
    color: #94a3b8;
    padding: 70px 8% 20px;
}

.h2-footer .footer-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 40px;
    border-bottom: 1px solid #334155;
    padding-bottom: 50px;
}

.h2-footer .footer-col h4 {
    color: #fff;
    font-size: 1.2rem;
    margin-bottom: 25px;
    position: relative;
}

.h2-footer .footer-col h4::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: -8px;
    width: 35px;
    height: 3px;
    background: var(--accent);
}

.h2-footer .footer-col p {
    line-height: 1.8;
}

.h2-footer .footer-col ul {
    list-style: none;
}

.h2-footer .footer-col ul li {
    margin-bottom: 15px;
}

.h2-footer .footer-col ul li a {
    color: #94a3b8;
    text-decoration: none;
    transition: 0.3s;
}

.h2-footer .footer-col ul li a:hover {
    color: #fff;
    padding-right: 8px;
}

.h2-footer .social-icons {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.h2-footer .social-icons a {
    width: 40px;
    height: 40px;
    background: #1e293b;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
    text-decoration: none;
}

.h2-footer .social-icons a:hover {
    background: var(--secondary);
    transform: translateY(-3px);
}

.h2-footer .footer-bottom {
    text-align: center;
    padding-top: 30px;
    font-size: 0.9rem;
}

.h2-footer .footer-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 24px;
    font-weight: 900;
    color: #fff;
    margin-bottom: 20px;
}

.h2-footer .footer-logo img {
    height: 40px;
    width: auto;
}


/* --------------------------------------------------------------------------
   الحركات
   -------------------------------------------------------------------------- */

@keyframes h2FadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* --------------------------------------------------------------------------
   الاستجابة للشاشات
   -------------------------------------------------------------------------- */

@media (max-width: 968px) {
    .h2 .excellence-container {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .h2-menu-toggle {
        display: block;
        order: 3;
    }

    .h2-header {
        flex-wrap: wrap;
        padding: 15px 5%;
    }

    .h2-nav {
        display: none;
        order: 4;
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        padding-top: 15px;
        gap: 6px;
    }

    .h2-nav.is-open {
        display: flex;
    }

    .h2-nav a {
        margin: 6px 0;
    }

    .h2-header .btn-dash {
        padding: 8px 16px;
        font-size: 0.9rem;
    }

    .h2 section {
        padding: 70px 5%;
    }

    .h2-footer {
        padding: 50px 5% 20px;
    }
}

@media (max-width: 768px) {
    .h2-hero h1 {
        font-size: 2.2rem;
    }

    .h2-hero p {
        font-size: 1.15rem;
    }

    .h2-hero-content {
        padding: 35px 22px;
    }

    .h2 .section-title {
        font-size: 1.9rem;
    }

    .h2 .btn-whatsapp {
        font-size: 1.05rem;
        padding: 14px 28px;
    }

    /* background-attachment: fixed لا يعمل على أغلب المتصفّحات المحمولة */
    .h2-hero {
        background-attachment: scroll;
    }
}

@media (max-width: 480px) {
    .h2 .profile-flex {
        flex-direction: column;
        text-align: center;
    }

    .h2 .students-grid {
        grid-template-columns: 1fr;
    }

    .h2 .showcase-box {
        padding: 25px;
    }
}


/* ============================================================================
   الأقسام المضافة
   ============================================================================
   كلها مقيّدة داخل .h2 فلا تتسرّب إلى بقية قوالب الواجهة.
   ولا يوجد هنا أي محدّد شامل يضبط font-family — محدّد كهذا يزن 0-1-0
   وهو وزن ‎.fa-solid‎ نفسه، فيطيح بالأيقونات إن حُمّل بعدها.
   ========================================================================= */


/* ------------------------------------------------------- كلمة المدير */
.h2 .principal-section {
    padding: 70px 20px;
    background: #f8fafc;
}

.h2 .principal-card {
    display: flex;
    align-items: center;
    gap: 34px;
    max-width: 1000px;
    margin: 0 auto;
    padding: 34px;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 6px 30px rgba(15, 23, 42, .08);
}

.h2 .principal-img-box {
    flex: 0 0 190px;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    overflow: hidden;
    border: 5px solid var(--secondary, #38bdf8);
}

.h2 .principal-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.h2 .principal-info h3 {
    margin: 0 0 4px;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--primary, #0f172a);
}

.h2 .principal-info .title {
    display: block;
    margin-bottom: 14px;
    font-size: .92rem;
    color: var(--secondary, #0284c7);
    font-weight: 600;
}

.h2 .principal-info p {
    margin: 0 0 14px;
    font-size: 1rem;
    line-height: 2;
    color: #475569;
}

.h2 .principal-signature {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--primary, #0f172a);
    padding-top: 12px;
    border-top: 2px dashed #e2e8f0;
}


/* ---------------------------------------------------------- العدّاد */
/*
   بطاقة بزوايا دائرية وهوامش جانبية — لا شريط ممتدّ من حافة إلى حافة.
   منقول حرفيًا عن ‎.countdown-banner‎ في التصميم المرفوع.
*/
.h2 .countdown-banner {
    padding: 50px 8%;
    margin: 40px 8%;
    text-align: center;
    color: #fff;
    background: var(--gradient, linear-gradient(135deg, #1e3a8a 0%, #0284c7 100%));
    border-radius: 24px;
    box-shadow: 0 15px 35px rgba(30, 58, 138, .2);
}

.h2 .countdown-banner h2 {
    margin: 0 0 8px;
    font-size: 2rem;
    font-weight: 900;
}

.h2 .countdown-banner > p {
    margin: 0;
    font-size: 1rem;
    color: #e0f2fe;
}

.h2 .countdown-grid {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 25px;
}

.h2 .time-box {
    min-width: 90px;
    padding: 15px 22px;
    background: rgba(255, 255, 255, .15);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 16px;
    backdrop-filter: blur(10px);
}

.h2 .time-box .num {
    font-size: 2rem;
    font-weight: 900;
    line-height: 1;
}

.h2 .time-box .label {
    margin-top: 4px;
    font-size: .8rem;
    color: #e0f2fe;
}


/* ---------------------------------------------------------- الأندية */
.h2 .clubs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 22px;
    max-width: 1200px;
    margin: 0 auto;
}

.h2 .club-card {
    padding: 28px 22px;
    text-align: center;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    transition: transform .2s, box-shadow .2s;
}

.h2 .club-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 28px rgba(15, 23, 42, .1);
}

.h2 .club-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 66px;
    height: 66px;
    margin-bottom: 15px;
    font-size: 1.7rem;
    color: #fff;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--secondary, #0ea5e9), var(--primary, #0f172a));
}

.h2 .club-card h4 {
    margin: 0 0 8px;
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--primary, #0f172a);
}

.h2 .club-card p {
    margin: 0;
    font-size: .9rem;
    line-height: 1.9;
    color: #64748b;
}


/* -------------------------------------------------------- الفعاليات */
.h2 .events-section { background: #f8fafc; }

.h2 .events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.h2 .event-card {
    display: flex;
    gap: 18px;
    padding: 20px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    text-decoration: none;
    transition: transform .2s, box-shadow .2s;
}

.h2 .event-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 26px rgba(15, 23, 42, .1);
    text-decoration: none;
}

.h2 .event-date-badge {
    flex: 0 0 72px;
    height: 78px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--secondary, #0ea5e9), var(--primary, #0f172a));
}

.h2 .event-date-badge .day {
    font-size: 1.7rem;
    font-weight: 900;
    line-height: 1;
}

.h2 .event-date-badge .month {
    font-size: .78rem;
    opacity: .9;
}

.h2 .event-info h4 {
    margin: 0 0 6px;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--primary, #0f172a);
}

.h2 .event-info p {
    margin: 0 0 8px;
    font-size: .88rem;
    line-height: 1.8;
    color: #64748b;
}

.h2 .event-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    font-size: .8rem;
    color: #94a3b8;
}


/* -------------------------------------------- الجولة الافتراضية */
/*
   مطابق لـ‎.virtual-tour-banner‎ في التصميم الأصلي.
   نقطتان تستحقّان الشرح:

   1) background-attachment: fixed هو ما يعطي أثر الـparallax — الصورة
      تثبت والمحتوى ينزلق فوقها. لكنه معطَّل في متصفّحات الجوال (iOS
      Safari تحديدًا تتجاهله وقد تُظهر الصورة مقصوصة أو ممطوطة)، لذلك
      يُعاد إلى scroll دون 900px في آخر الملف.

   2) الظلّ المتمدّد في pulse يُرسم بـbox-shadow لا بعنصر إضافي، فلا
      يعترض النقر ولا يحتاج ترميزًا زائدًا.
*/
.h2 .virtual-tour-banner {
    position: relative;
    margin: 0 8%;
    padding: 100px 8%;
    text-align: center;
    color: #fff;
    background-color: var(--dark, #0f172a);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;   /* أثر الـparallax */
    border-radius: 24px;
}

.h2 .virtual-tour-banner h2 {
    margin: 0 0 10px;
    font-size: 2.2rem;
    font-weight: 800;
}

.h2 .virtual-tour-banner p {
    max-width: 600px;
    margin: 0 auto;
    font-size: 1.05rem;
    line-height: 1.9;
    color: #e2e8f0;
}

/* زرّ التشغيل — دائري برتقالي بنبضة مستمرّة */
.h2 .play-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    margin-bottom: 20px;
    padding: 0;
    font-size: 1.8rem;
    color: #fff;
    background: var(--accent, #f97316);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    animation: h2Pulse 1.8s infinite;
    transition: transform .18s, background .18s;
}

.h2 .play-btn:hover {
    transform: scale(1.08);
    background: #ea580c;
}

.h2 .play-btn:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 4px;
}

/* أيقونة التشغيل تميل يمينًا بصريًا — تُزاح قليلًا لتستقرّ في المركز */
.h2 .play-btn .fa-play {
    margin-right: -4px;
}

@keyframes h2Pulse {
    0%   { box-shadow: 0 0 0 0    rgba(249, 115, 22, .6); }
    70%  { box-shadow: 0 0 0 22px rgba(249, 115, 22, 0);  }
    100% { box-shadow: 0 0 0 0    rgba(249, 115, 22, 0);  }
}

/* من يفضّل تقليل الحركة لا تُعرض له النبضة */
@media (prefers-reduced-motion: reduce) {
    .h2 .play-btn { animation: none; }
}

.h2 .tour-label {
    display: block;
    margin-top: 18px;
    font-size: .92rem;
    font-weight: 600;
    letter-spacing: .3px;
    color: #cbd5e1;
}

.h2 .tour-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(2, 6, 23, .9);
}

.h2 .tour-modal.is-open { display: flex; }

.h2 .tour-modal-inner {
    position: relative;
    width: 100%;
    max-width: 900px;
}

.h2 .tour-frame {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: 12px;
    background: #000;
}

.h2 .tour-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.h2 .tour-close {
    position: absolute;
    top: -44px;
    left: 0;
    width: 36px;
    height: 36px;
    font-size: 1.6rem;
    line-height: 1;
    color: #fff;
    background: transparent;
    border: 0;
    cursor: pointer;
}


/* -------------------------------------------- آراء أولياء الأمور */
.h2 .testimonials-section { background: #f8fafc; }

.h2 .testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 22px;
    max-width: 1200px;
    margin: 0 auto;
}

.h2 .testimonial-card {
    padding: 26px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
}

.h2 .testimonial-card .stars {
    margin-bottom: 12px;
    color: #f59e0b;
    font-size: .95rem;
}

.h2 .testimonial-card > p {
    margin: 0 0 18px;
    font-size: .95rem;
    line-height: 2;
    color: #475569;
}

.h2 .parent-info {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 15px;
    border-top: 1px solid #f1f5f9;
}

.h2 .parent-info img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.h2 .parent-info h5 {
    margin: 0;
    font-size: .95rem;
    font-weight: 700;
    color: var(--primary, #0f172a);
}

.h2 .parent-info span {
    font-size: .8rem;
    color: #94a3b8;
}


/* --------------------------------------------------------- المقالات */
.h2 .blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 22px;
    max-width: 1200px;
    margin: 0 auto;
}

.h2 .blog-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    overflow: hidden;
    transition: transform .2s, box-shadow .2s;
}

.h2 .blog-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 28px rgba(15, 23, 42, .1);
}

.h2 .blog-img {
    height: 190px;
    overflow: hidden;
}

.h2 .blog-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s;
}

.h2 .blog-card:hover .blog-img img { transform: scale(1.06); }

.h2 .blog-content { padding: 20px; }

.h2 .blog-date {
    display: block;
    margin-bottom: 8px;
    font-size: .8rem;
    color: #94a3b8;
}

.h2 .blog-content h4 {
    margin: 0 0 10px;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.7;
}

.h2 .blog-content h4 a {
    color: var(--primary, #0f172a);
    text-decoration: none;
}

.h2 .blog-content h4 a:hover { color: var(--secondary, #0284c7); }

.h2 .blog-content p {
    margin: 0 0 14px;
    font-size: .88rem;
    line-height: 1.9;
    color: #64748b;
}

.h2 .blog-link {
    font-size: .88rem;
    font-weight: 700;
    color: var(--secondary, #0284c7);
    text-decoration: none;
}

.h2 .blog-link:hover { text-decoration: underline; }

.h2 .blog-more {
    margin-top: 30px;
    text-align: center;
}


/* ------------------------------------------------- الأسئلة الشائعة */
.h2 .faq-section { background: #fff; }

.h2 .faq-accordion {
    max-width: 820px;
    margin: 0 auto;
}

.h2 .faq-accordion details {
    margin-bottom: 12px;
    padding: 16px 20px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
}

.h2 .faq-accordion summary {
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary, #0f172a);
    cursor: pointer;
    list-style: none;
}

.h2 .faq-accordion summary::-webkit-details-marker { display: none; }

.h2 .faq-accordion summary::after {
    content: '+';
    float: left;
    font-size: 1.3rem;
    line-height: 1;
    color: var(--secondary, #0284c7);
}

.h2 .faq-accordion details[open] summary::after { content: '−'; }

.h2 .faq-accordion details p {
    margin: 12px 0 0;
    padding-top: 12px;
    border-top: 1px solid #e2e8f0;
    font-size: .92rem;
    line-height: 2;
    color: #475569;
}


/* ------------------------------------------------------- الشاشات الصغيرة */
@media (max-width: 768px) {
    .h2 .principal-card {
        flex-direction: column;
        text-align: center;
        padding: 24px;
    }

    .h2 .principal-img-box {
        flex-basis: 140px;
        width: 140px;
        height: 140px;
    }

    .h2 .countdown-banner {
        margin: 24px 16px;
        padding: 34px 20px;
        border-radius: 18px;
    }

    .h2 .countdown-banner h2 { font-size: 1.4rem; }
    .h2 .countdown-grid { gap: 10px; }
    .h2 .time-box { min-width: 72px; padding: 12px 14px; }
    .h2 .time-box .num { font-size: 1.6rem; }
    /*
     * الجوال: fixed معطَّل في iOS Safari ويُخرج الصورة مقصوصة أو ممطوطة،
     * فيُعاد إلى scroll. يُفقد أثر الـparallax على الجوال — وهو أثر لا
     * يظهر أصلًا في تلك المتصفّحات.
     */
    .h2 .virtual-tour-banner {
        margin: 0 4%;
        padding: 60px 22px;
        background-attachment: scroll;
        border-radius: 18px;
    }

    .h2 .virtual-tour-banner h2 { font-size: 1.5rem; }

    .h2 .play-btn {
        width: 66px;
        height: 66px;
        font-size: 1.45rem;
    }
}


/* ------------------------------------------------- تطبيق الجوال */
/*
   منقول حرفيًا عن التصميم المرفوع مع تقييده بـ‎.h2‎ فلا يتسرّب إلى بقية
   القوالب. ولا محدّد شامل هنا يضبط font-family — محدّد كهذا يزن 0-1-0
   وهو وزن ‎.fa-solid‎ نفسه فيُخفي الأيقونات إن حُمّل بعدها.
*/
.h2 .app-section {
    padding: 80px 8%;
    position: relative;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%);
}

.h2 .app-container {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 50px;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.h2 .app-info-box h2 {
    margin-bottom: 15px;
    font-size: 2.3rem;
    font-weight: 900;
    line-height: 1.3;
}

.h2 .app-info-box > p {
    margin-bottom: 25px;
    font-size: 1.05rem;
    line-height: 1.7;
    color: #cbd5e1;
}

.h2 .app-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin: 0 0 30px;
    padding: 0;
    list-style: none;
}

.h2 .app-features li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .95rem;
    color: #e2e8f0;
}

.h2 .app-features li i { color: var(--accent, #f97316); }

.h2 .download-btns-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.h2 .btn-download-store {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    color: #fff;
    text-decoration: none;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 14px;
    transition: .3s ease;
}

.h2 .btn-download-store:hover {
    color: #fff;
    text-decoration: none;
    background: rgba(255, 255, 255, .2);
    border-color: var(--secondary, #0284c7);
    transform: translateY(-3px);
}

/* زرّ التنزيل المباشر — يتميّز لأنه الأهمّ لمن لا متجر لديه */
.h2 .btn-apk {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    border-color: transparent;
}

.h2 .btn-apk:hover {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
}

.h2 .btn-store-icon { font-size: 1.7rem; }

.h2 .btn-store-text { text-align: right; }

.h2 .btn-store-text span {
    display: block;
    font-size: .72rem;
    color: #cbd5e1;
}

.h2 .btn-store-text strong {
    display: block;
    font-size: .95rem;
    font-weight: 700;
}

.h2 .app-mockup-box { text-align: center; }

.h2 .app-mockup-box img {
    width: 100%;
    max-width: 350px;
    height: auto;
    border-radius: 20px;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .5));
}

@media (max-width: 968px) {
    .h2 .app-container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .h2 .app-features {
        grid-template-columns: 1fr;
        text-align: right;
    }

    .h2 .download-btns-group { justify-content: center; }
}

@media (max-width: 600px) {
    .h2 .app-section { padding: 55px 20px; }
    .h2 .app-info-box h2 { font-size: 1.6rem; }
    .h2 .btn-download-store { width: 100%; justify-content: center; }
}