/* --- 1. قسم الهيرو (Hero Section) --- */
#teacher-hero {
    height: 50vh; /* ارتفاع نصف الشاشة */
    min-height: 400px;
    position: relative;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed; /* (جمدان) تأثير بارالاكس */
}

/* طبقة الغطاء الداكنة (لإظهار النص) */
#teacher-hero .hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
}

#teacher-hero h1,
#teacher-hero p {
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
}

/* --- 2. قسم الفلتر التفاعلي (Pills) --- */
#teachers-filter-pills .nav-link {
    font-size: 1.1rem;
    font-weight: 600;
    color: #333; /* لون النص العادي */
    background-color: #f4f4f4; /* خلفية الزرار العادي */
    border-radius: 50px; /* (جمدان) حواف دائرية */
    margin: 0 5px; /* مسافات بين الأزرار */
    padding: 0.75rem 1.5rem;
    border: 2px solid transparent; /* إطار شفاف للتحضير */
    transition: all 0.3s ease;
}

/* (جمدان) عند الـ Hover */
#teachers-filter-pills .nav-link:hover:not(.active) {
    background-color: #e9e9e9;
    color: #000;
}

/* (الأهم) الزرار النشط (Active) */
#teachers-filter-pills .nav-link.active {
    color: #2a8f99; /* <-- تم تغيير اللون هنا */
    background-color: #fff; /* خلفية بيضاء */
    border-color: #2a8f99; /* <-- تم تغيير اللون هنا */
    box-shadow: 0 5px 15px rgba(42, 143, 153, 0.15); /* <-- تم تغيير اللون هنا */
}

/* --- 3. قسم كروت المعلمين (Grid) --- */
/* (استخدمنا نفس تصميم كروت "فريق العمل" من صفحة "من نحن" للفخامة) */

.team-card {
    border-radius: 15px !important; /* حواف دائرية */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden; 
}

.team-card:hover {
    transform: translateY(-10px); /* تأثير الرفع */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1) !important;
}

.team-img {
    width: 150px;
    height: 150px;
    border-radius: 50%; /* دائري */
    object-fit: cover; 
    margin: 25px auto 0 auto; 
    border: 5px solid #fff; 
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1); 
}

.team-card .card-body {
    padding: 1rem 1.5rem 1.5rem 1.5rem; 
}

.team-card .fw-medium {
    font-size: 0.95rem; 
}

.teacher-socials a {
    font-size: 1.2rem;
    transition: color 0.3s ease;
}
.teacher-socials a:hover {
    color: #2a8f99 !important; /* <-- تم تغيير اللون هنا */
}

/* --- 4. قسم الـ CTA (تواصل معانا) --- */
/* (هذا الكود منسوخ من home.css لضمان عمله هنا) */
#cta-contact {
    background: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)), 
                 url('https://via.placeholder.com/1920x500?text=Join+Us'); /* <-- يمكنك تغيير هذه الصورة */
    
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* تأثير البارالاكس */
    padding: 100px 0;
}
/* (باقي تنسيقات الـ CTA كما هي) */
#cta-contact h2,
#cta-contact p {
    text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
}
#cta-contact .btn-primary {
    font-size: 1.1rem;
    border-radius: 50px;
    transition: all 0.3s ease;
    /* (جديد) إضافة اللون الأساسي */
    background-color: #2a8f99;
    border-color: #2a8f99;
}
#cta-contact .btn-primary:hover {
     transform: scale(1.05);
     /* (جديد) إضافة لون الهوفر */
     background-color: #247c87;
     border-color: #247c87;
     box-shadow: 0 10px 25px rgba(42, 143, 153, 0.4) !important;
}


/* ================================
  تعديل شريط الفلاتر للموبايل
================================
*/

@media (max-width: 767.98px) {

    #teachers-filter-pills {
        /* 1. يمنع الأزرار من النزول لسطر جديد */
        flex-wrap: nowrap;
        
        /* 2. يضيف "سكرول" أفقي (تحريك) عند الحاجة */
        overflow-x: auto;

        /* 3. يلغي التوسيط ويبدأ العرض من أول الشريط (مهم للسكرول) */
        justify-content: flex-start !important; 
    }

    #teachers-filter-pills .nav-item {
        /* 4. يضمن أن كل زر يحتفظ بحجمه الطبيعي ولا ينكمش */
        flex-shrink: 0;
    }

    /* 5. (اختياري) لإخفاء شريط السكرول نفسه وجعل الشكل أنظف */
    #teachers-filter-pills::-webkit-scrollbar {
        display: none; /* إخفاء الشريط في متصفحات WebKit (زي كروم وسفاري) */
    }
    #teachers-filter-pills {
        -ms-overflow-style: none;  /* إخفاء الشريط في (IE و Edge) */
        scrollbar-width: none;  /* إخفاء الشريط في (Firefox) */
    }
}