/* ========================================
        MOQYSITE CUSTOM STYLE GUIDE (2023-2026)
        ========================================
        */
      :root {
        --main-color: #0056b3; /* الأزرق العميق */
        --accent-color: #ff6b00; /* البرتقالي الحيوي */
        --dark-color: #0d1b2a;
        --light-bg: #f8fbff;
        --white: #ffffff;
        --text-main: #333333;
        --text-muted: #666666;
        --transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
        --shadow-sm: 0 5px 15px rgba(0, 0, 0, 0.05);
        --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.08);
        --shadow-lg: 0 15px 45px rgba(0, 0, 0, 0.1);
      }

      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        font-family: "Cairo", sans-serif;
        background-color: var(--light-bg);
        color: var(--text-main);
        line-height: 1.8;
        overflow-x: hidden;
        
      }

      /* Intro Section - Light Mode Custom */
      .about-intro-section {
        background: linear-gradient(135deg, var(--light-bg) 0%, #eef5ff 100%);
        min-height: 60vh;
        
        display: flex;
        align-items: center;
        position: relative;
        color: var(--text-main);
        /* التعديل هنا: استخدام ellipse لعمل شكل القوس */
        clip-path: ellipse(150% 100% at 50% 0%);
        overflow: hidden;
        padding: 80px 0 120px; /* زدت الـ padding السفلي عشان القوس مياكلش المحتوى */
      }
      /* النقاط الخلفية خفيفة جداً */
      .intro-pattern {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: radial-gradient(
          circle at 2px 2px,
          var(--main-color) 0.5px,
          transparent 0
        );
        background-size: 40px 40px;
        opacity: 0.1;
        z-index: 0;
      }

      /* حركة الصورة (Floating) */
      @keyframes introFloat {
        0% {
          transform: translateY(0px);
        }
        50% {
          transform: translateY(-15px);
        }
        100% {
          transform: translateY(0px);
        }
      }

      .intro-floating-img {
        animation: introFloat 5s ease-in-out infinite;
        max-width: 90%;
        filter: drop-shadow(0 15px 25px rgba(0, 86, 179, 0.15));
        z-index: 1;
      }

      .intro-breadcrumb {
        background: rgba(0, 86, 179, 0.08);
        display: inline-block;
        padding: 6px 20px;
        border-radius: 50px;
        margin-bottom: 25px;
        color: var(--main-color);
        font-weight: 600;
      }

      .intro-title {
        font-weight: 900;
        color: var(--dark-color);
        font-size: clamp(2rem, 5vw, 3.5rem); /* حجم خط مرن */
        margin-bottom: 20px;
      }

      .intro-text {
        color: var(--text-muted);
        line-height: 1.8;
        font-size: 1.15rem;
      }

      @media (max-width: 991px) {
        .about-intro-section {
          text-align: center;
          padding-top: 40px; /* تقليل المسافة العلوية */
          clip-path: none;
        }
        .intro-floating-img {
          margin-bottom: 20px; /* مسافة بسيطة تحت الصورة قبل النص */
          max-width: 60%; /* تصغير حجم الصورة قليلاً لتبدو أفضل */
        }
      }
      /* Stats Section */
.stats-wrapper {
  margin-top: -80px;
  position: relative;
  z-index: 10;
  /* اضمن إن أي حركة بره الحدود تبان */
  overflow: visible !important; 
}

      .stat-card {
        background: var(--white);
        border-radius: 20px;
        padding: 30px;
        text-align: center;
        box-shadow: var(--shadow-md);
        border-bottom: 4px solid transparent;
        transition: var(--transition);
      }

      .stat-card:hover {
        transform: translateY(-10px);
        border-bottom: 4px solid var(--accent-color);
      }

      .stat-number {
        font-size: 2.5rem;
        font-weight: 900;
        color: var(--main-color);
        display: block;
      }

      /* Content Blocks */
      .story-section {
        padding: 100px 0;
      }

      .image-stack {
        position: relative;
        width: 100%;
        height: 450px;
      }

      .image-stack-top {
        position: absolute;
        top: 0;
        left: 0;
        width: 80%;
        z-index: 2;
        border-radius: 20px;
        box-shadow: var(--shadow-lg);
      }

      .image-stack-bottom {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 70%;
        z-index: 1;
        border-radius: 20px;
        opacity: 0.6;
      }

      /* Custom Section Headers */
      .section-title {
        margin-bottom: 50px;
        position: relative;
      }

      .section-title h2 {
        font-weight: 800;
        color: var(--dark-color);
        font-size: 2.5rem;
      }

      .section-title .divider {
        width: 80px;
        height: 5px;
        background: var(--accent-color);
        display: block;
        margin-top: 15px;
        border-radius: 5px;
      }

      /* Cards Style */
      .value-card {
        background: var(--white);
        padding: 40px;
        border-radius: 25px;
        height: 100%;
        transition: var(--transition);
        border: 1px solid rgba(0, 0, 0, 0.02);
      }

      .value-card:hover {
        box-shadow: var(--shadow-lg);
        transform: scale(1.02);
      }

      .icon-circle {
        width: 80px;
        height: 80px;
        background: var(--light-bg);
        border-radius: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 35px;
        color: var(--main-color);
        margin-bottom: 25px;
        transition: var(--transition);
      }

      .value-card:hover .icon-circle {
        background: var(--main-color);
        color: var(--white);
        transform: rotate(-10deg);
      }

      /* --- Team Section (Fixed Original Code) --- */
      .member-card {
        background: var(--white);
        padding: 45px 35px;
        border-radius: 30px;
        text-align: center;
        transition: var(--transition);
        border: 1px solid #f0f0f0;
        height: 100%;
        position: relative;
        overflow: hidden;
      }

      .member-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 5px;
        background: var(--main-color);
        transform: scaleX(0);
        transition: var(--transition);
      }

      .member-card:hover::before {
        transform: scaleX(1);
      }

      .member-icon {
        width: 100px;
        height: 100px;
        background: var(--light-bg);
        color: var(--main-color);
        line-height: 100px;
        font-size: 40px;
        border-radius: 50%;
        margin: 0 auto 30px;
        transition: var(--transition);
        box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.05);
      }

      .member-card:hover .member-icon {
        background: var(--main-color);
        color: white;
        transform: scale(1.1);
      }

      /* CTA Section */
      .cta-box {
        background: linear-gradient(
          135deg,
          var(--accent-color) 0%,
          #ff8c00 100%
        );
        border-radius: 35px;
        padding: 80px 40px;
        color: white;
        text-align: center;
        box-shadow: 0 25px 50px rgba(255, 107, 0, 0.2);
      }

      .btn-white {
        background: white;
        color: var(--accent-color);
        font-weight: 700;
        padding: 15px 40px;
        border-radius: 50px;
        text-decoration: none;
        transition: var(--transition);
        display: inline-block;
      }

      .btn-white:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        color: var(--dark-color);
      }

      /* Custom Animation Delays */
      .d-1 {
        animation-delay: 0.1s;
      }
      .d-2 {
        animation-delay: 0.2s;
      }
      .d-3 {
        animation-delay: 0.3s;
      }
      .d-4 {
        animation-delay: 0.4s;
      }

      @media (max-width: 768px) {
        .about-header h1 {
          font-size: 2.5rem;
        }
        .image-stack {
          height: 300px;
        }
        .stats-wrapper {
          margin-top: -40px;
        }
      }