/* ========================================== */
   /*        LIGHT CINEMATIC TEAM SECTION        */
   /* ========================================== */

   .team-section {
       padding: 120px 5vw 120px calc(var(--sidebar-width) + 5vw);
       /* الخلفية الفاتحة اللي طلبتيها */
       background-color: var(--text-primary);
       /* خط فاصل غامق من فوق */
       border-top: 1px solid rgba(5, 5, 5, 0.1);
   }

   .team-container {
       max-width: 1200px;
       margin: 0 auto;
       width: 100%;
   }

   /* --- تعديل ألوان العناوين للخلفية الفاتحة --- */
   .team-header {
       text-align: center;
       margin-bottom: 4rem;
   }

   .team-header .section-title {
       font-size: clamp(2.5rem, 5vw, 3.5rem);
       color: var(--accent-color);
       margin-bottom: 1rem;
       font-family: var(--font-headline);
       text-align: center;
       width: 100%;
       display: block;
   }

   .team-header .subtitle {
       font-size: 1.2rem;
       color: #555;
       /* رمادي غامق عشان يتقرأ براحة */
       font-family: var(--font-body);
   }

   .team-header .red-dot {
       color: var(--accent-color);
   }

   /* --- الـ Grid --- */
   .custom-row {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
       gap: 30px;
       align-items: center;
       justify-items: center;
   }

   /* --- تصميم الكارت نفسه في الوضع الفاتح --- */
   .our-team {
       width: 100%;
       padding: 80px 0;
       background-color: rgba(5, 5, 5, 0.03);
       border: 1px solid rgba(5, 5, 5, 0.08);
       /* بوردر غامق شفاف */
       text-align: center;
       overflow: hidden;
       position: relative;
       border-radius: 8px;
       transition: all 0.4s var(--easing-smooth);

       /* للأنيميشن بتاع GSAP (Blur Reveal) */
       opacity: 0;
       filter: blur(10px);
       transform: translateY(30px);
   }

   .our-team:hover {
       background-color: rgba(132, 24, 22, 0.03);
       /* لون أحمر خفيف جداً في الخلفية */
       border-color: rgba(132, 24, 22, 0.2);
   }

   .our-team .picture {
       display: inline-block;
       height: 130px;
       width: 130px;
       margin-bottom: 30px;
       z-index: 1;
       position: relative;
   }

   /* التأثير الدائري الخلفي للصورة (نفس اللون الأحمر السينمائي) */
   .our-team .picture::before,
   .our-team .picture::after {
       content: "";
       width: 100%;
       height: 100%;
       border-radius: 50%;
       background-color: var(--accent-color);
       position: absolute;
       left: 0;
   }

   .our-team .picture::after {
       top: 0;
       z-index: -1;
   }

   .our-team .picture::before {
       height: 0;
       bottom: 135%;
       opacity: 0.9;
       transform: scale(3);
       transition: all 0.3s linear 0s;
   }

   .our-team:hover .picture::before {
       height: 100%;
   }

   .our-team .picture img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       border-radius: 50%;
       transform: scale(1);
       transition: all 0.9s ease 0s;
       filter: grayscale(100%);
   }

   .our-team:hover .picture img {
       /* الإطار اللي بيفصل الصورة عن الدائرة الحمرا بياخد نفس لون الخلفية الفاتحة */
       box-shadow: 0 0 0 10px var(--text-primary);
       transform: scale(0.7);
       filter: grayscale(0%);
   }

   /* --- ألوان النصوص جوه الكارت --- */
   .our-team .name {
       font-family: var(--font-headline);
       font-size: 1.5rem;
       color: var(--bg-color);
       /* الاسم لونه أسود */
       margin-bottom: 5px;
       transition: color 0.3s ease;
   }

   .our-team .title {
       display: block;
       font-family: monospace;
       font-size: 15px;
       color: var(--accent-color);
       /* البوزيشن لونه أحمر عشان يبرز */
       text-transform: uppercase;
       letter-spacing: 1px;
   }

   /* --- السوشيال ميديا --- */
   .our-team .social {
       width: 100%;
       padding: 0;
       margin: 0;
       background-color: var(--accent-color);
       position: absolute;
       bottom: -100px;
       left: 0;
       transition: all 0.5s ease 0s;
       display: flex;
       justify-content: center;
       list-style: none;
   }

   .our-team:hover .social {
       bottom: 0;
   }

   .our-team .social li a {
       display: flex;
       align-items: center;
       justify-content: center;
       padding: 15px;
       color: #fff;
       transition: all 0.3s ease 0s;
       text-decoration: none;
   }

   .our-team .social li a:hover {
       color: var(--text-primary);
       /* الأيقونة تبقى فاتحة */
       background-color: var(--bg-color);
       /* الخلفية تبقى سودة */
   }

   @media (max-width: 768px) {

       .our-team {
           background-color: rgba(132, 24, 22, 0.03);
           border-color: rgba(132, 24, 22, 0.2);
       }


       .our-team .picture::before {
           height: 100%;
       }

       .our-team .picture img {
           box-shadow: 0 0 0 10px var(--text-primary);
           transform: scale(0.7);
           filter: grayscale(0%);
       }

       .our-team .social {
           bottom: 0;
       }
   }