/* ------------------------------------------------------
           1. التغيرات الأساسية والألوان (قيمة تك ستايل)
        ------------------------------------------------------ */
      :root {
        --main-color: #0056b3; /* الأزرق العميق */
        --accent-color: #ff6b00; /* البرتقالي الحيوي */
        --dark-color: #0d1b2a;
        --light-bg: #f8fbff;
        --white: #ffffff;
        --text-main: #333333;
        --text-muted: #666666;
        --transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        --shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
      }

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

      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
        font-family: "Cairo", sans-serif;
        font-weight: 800;
      }

    
      .btn-order {
        background: var(--accent-color);
        color: white !important;
        border-radius: 50px;
        padding: 10px 25px;
        font-weight: 700;
        border: 2px solid var(--accent-color);
        transition: var(--transition);
      }

      .btn-order:hover {
        background: transparent;
        border: 2px solid var(--main-color);
        color: rgb(0, 0, 0) !important;
      }
      .btn-order1 {
        background: var(--main-color);

        color: white !important;
        border-radius: 50px;
        padding: 10px 25px;
        font-weight: 700;

        transition: var(--transition);
      }

      .btn-order1:hover {
        background: transparent;
        border: 2px solid var(--accent-color);
        color: rgb(0, 0, 0) !important;
      }
      .btn-order2 {
        background: var(--accent-color);
        color: white !important;
        border-radius: 50px;
        padding: 10px 25px;
        font-weight: 700;
        border: 2px solid var(--accent-color);
        transition: var(--transition);
      }

      .btn-order2:hover {
        background: transparent;
        border: 2px solid var(--main-color);
        color: rgb(255, 255, 255) !important;
      }
      /* ------------------------------------------------------
    3. الإنترو (Hero Section) - التعديل النهائي لحل قص الأزرار
------------------------------------------------------ */
      .hero {
        position: relative;
        /* غيرنا min-height لـ auto عشان القسم يتمدد مع محتواه وما يقصش الزراير */
        min-height: 70vh;
        display: flex;
        align-items: center;
        background: linear-gradient(135deg, #fff 0%, #f0f7ff 100%);
        padding-top: 100px; /* مساحة للهيدر */
        padding-bottom: 100px; /* مساحة أمان تحت الزراير */
        overflow: hidden;
      }

      .hero::before {
        content: "";
        position: absolute;
        top: -10%;
        left: -10%;
        width: 400px;
        height: 400px;
        background: rgba(0, 86, 179, 0.03);
        border-radius: 50%;
        z-index: 0;
      }

      .hero-content {
        position: relative;
        z-index: 2;
      }

      .hero-content h1 {
        font-size: 3.8rem;
        line-height: 1.3;
        margin-bottom: 25px;
        color: var(--main-color);
      }

      .hero-content h1 span {
        color: var(--accent-color);
      }

      .hero-content p {
        font-size: 1.2rem;
        color: var(--text-muted);
        margin-bottom: 35px;
        max-width: 600px;
      }

      .hero-image {
        position: relative;
        z-index: 2;
        text-align: center;
      }

      .hero-image img {
        max-width: 100%;
        height: auto;
        animation: upDown 4s ease-in-out infinite;
      }

      @keyframes upDown {
        0%,
        100% {
          transform: translateY(0);
        }
        50% {
          transform: translateY(-20px);
        }
      }

      /* ------------------------------------------------------
   تعديلات الموبايل (حل مشكلة اختفاء الزراير)
------------------------------------------------------ */
      @media (max-width: 991px) {
        .hero {
          padding-top: 80px;
          padding-bottom: 50px;
          text-align: center; /* سنترة النص للكل في الموبايل */
        }

        .hero-image {
          margin-bottom: 30px; /* مسافة تحت الصورة اللي بقت فوق */
        }

        .hero-image img {
          max-width: 90%; /* تصغير بسيط للصورة عشان تظهر كاملة */
        }

        .hero-content h1 {
          font-size: 2.5rem;
        }

        .hero-content p {
          margin-left: auto;
          margin-right: auto;
        }

        .hero-content .d-flex {
          justify-content: center !important; /* سنترة الزراير في الموبايل */
        }
      }
      /* ------------------------------------------------------
           4. شريط المميزات السريع (Quick Features)
        ------------------------------------------------------ */
      .quick-features {
        background: var(--white);
        padding: 40px 0;
        margin-top: -50px;
        position: relative;
        z-index: 10;
      }

      .feature-box-mini {
        background: var(--white);
        padding: 30px;
        border-radius: 15px;
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
        display: flex;
        align-items: center;
        transition: var(--transition);
        border-bottom: 4px solid transparent;
      }

      .feature-box-mini:hover {
        transform: translateY(-10px);
        border-color: var(--accent-color);
      }

      .feature-box-mini i {
        font-size: 2.5rem;
        color: var(--main-color);
        margin-left: 20px;
      }

      .feature-box-mini h5 {
        margin-bottom: 5px;
        font-size: 1.1rem;
      }

      .feature-box-mini p {
        margin: 0;
        font-size: 0.9rem;
        color: var(--text-muted);
      }

      /* ------------------------------------------------------
           5. قسم الخدمات (Services)
        ------------------------------------------------------ */
      .services {
        padding: 100px 0;
        background: var(--light-bg);
      }

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

      .section-header h6 {
        color: var(--accent-color);
        text-transform: uppercase;
        letter-spacing: 2px;
        margin-bottom: 15px;
      }

      .section-header h2 {
        font-size: 2.8rem;
        color: var(--main-color);
        position: relative;
        display: inline-block;
        padding-bottom: 15px;
      }

      .section-header h2::after {
        content: "";
        position: absolute;
        bottom: 0;
        right: 25%;
        width: 50%;
        height: 3px;
        background: var(--accent-color);
      }

      .service-card {
        background: var(--white);
        padding: 45px 30px;
        border-radius: 20px;
        text-align: center;
        transition: var(--transition);
        height: 100%;
        border: 1px solid #eee;
        position: relative;
        overflow: hidden;
      }

      .service-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 0;
        background: var(--main-color);
        transition: var(--transition);
        z-index: 0;
      }

      .service-card:hover::before {
        height: 100%;
      }

      .service-card:hover {
        transform: translateY(-15px);
      }

      .service-card:hover h4,
      .service-card:hover p {
        color: white;
        position: relative;
        z-index: 2;
      }

      .icon-wrapper {
        width: 90px;
        height: 90px;
        background: #f0f7ff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 30px;
        font-size: 2.2rem;
        color: var(--main-color);
        transition: var(--transition);
        position: relative;
        z-index: 2;
      }

      .service-card:hover .icon-wrapper {
        background: var(--accent-color);
        color: white;
        transform: rotateY(360deg);
      }

      /* ------------------------------------------------------
           6. قسم "لماذا نحن" (Why Us)
        ------------------------------------------------------ */
      .about-extra {
        padding: 100px 0;
      }

      .about-img {
        position: relative;
      }

      .about-img img {
        border-radius: 20px;
        box-shadow: var(--shadow);
      }

      .experience-badge {
        position: absolute;
        bottom: -30px;
        right: -30px;
        background: var(--accent-color);
        color: white;
        padding: 30px;
        border-radius: 20px;
        text-align: center;
        box-shadow: 0 10px 30px rgba(255, 107, 0, 0.3);
      }

      .experience-badge h2 {
        font-size: 3rem;
        margin: 0;
      }

      .about-list {
        list-style: none;
        padding: 0;
        margin-top: 30px;
      }

      .about-list li {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        font-weight: 700;
      }

      .about-list li i {
        width: 35px;
        height: 35px;
        background: var(--main-color);
        color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 15px;
        font-size: 0.9rem;
      }

      /* ------------------------------------------------------
           7. قسم الإحصائيات (Counter)
        ------------------------------------------------------ */
  .counters {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap; /* يضمن بقاءهم في صف واحد على الكمبيوتر */
  
  background:
    linear-gradient(rgba(0, 86, 179, 0.9), rgba(0, 86, 179, 0.9)),
    url("/img/photo-1519389950473-47ba0277781c.avif");
  background-attachment: fixed;
  background-size: cover;
  padding: 80px 0;
  color: white;
  text-align: center;
  width: 100%;
}

.counter-box {
  flex: 1;
  padding: 0 10px;
  box-sizing: border-box;
}

/* --- التعديل السحري للتليفون --- */
@media (max-width: 768px) {
  .counters {
    flex-wrap: wrap;       /* السماح بالنزول لسطر جديد */
    flex-direction: column; /* ترتيب العناصر تحت بعضها */
    gap: 40px;             /* مسافة بين العناصر وهي تحت بعضها */
  }

  .counter-box {
    flex: none;            /* إلغاء التوزيع المتساوي لضمان التمركز */
    width: 100%;           /* ملء عرض الشاشة */
  }
}

.counter-box h3 {
  font-size: 3.5rem;
  margin-bottom: 10px;
  color: var(--accent-color);
}

.counter-box p {
  font-size: 1.2rem;
  font-weight: 600;
}
      /* تحسين شكل الكارت */
      /* تعديل الكارت الأساسي لضمان تساوي الارتفاع */
      .testi-card {
        direction: rtl;
        text-align: right;
        padding: 25px;
        background: #fff;
        border-radius: 20px;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
        display: flex;
        flex-direction: column;
        height: 100%;

        /* التعديل المطلوب هنا */
        width: 100%;
        max-width: 380px; /* يمكنك تصغير هذا الرقم (مثلاً 320px) إذا أردت الكارت أصغر */
        margin: 0 auto;
      }

      /* صورة الشخص الرمادية الافتراضية */
      .client-avatar {
        width: 60px;
        height: 60px;
        background-color: #e9ecef;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #adb5bd;
        font-size: 24px;
        margin-left: 15px;
        flex-shrink: 0; /* لضمان عدم انضغاط الصورة */
      }

      .client-info-wrapper {
        display: flex;
        align-items: center;
        margin-bottom: 15px;
      }

      .client-name {
        font-size: 1.4rem;
        font-weight: 700;
        color: #333;
        margin: 0;
      }

      .client-job {
        color: #888;
        font-size: 0.95rem;
        display: block;
        direction: rtl;
      }

      /* الخط الفاصل المنقط */
      .separator {
        border-top: 1px dashed #ddd;
        margin: 15px 0;
      }

      .rating {
        display: flex;
        justify-content: center;
        gap: 5px;
        color: #ffc107;
        margin: 5px 0;
      }

      .testi-content {
        font-size: 1.1rem;
        color: #555;
        line-height: 1.6;
        unicode-bidi: plaintext;
        text-align: start;
        margin-top: 5px;

        /* التعديل الجديد لضمان توزيع المساحة */
        flex-grow: 1;
      }

      /* تنسيق الأسهم الاحترافي */
      .custom-arrow {
        background: #fff !important;
        width: 50px !important;
        height: 50px !important;
        border-radius: 50% !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
        color: #007bff !important;
      }

      .custom-arrow::after {
        font-size: 20px !important;
        font-weight: bold;
      }

      /* تحسين شكل النقاط بالأسفل */
      .mySwiper {
        padding-bottom: 70px !important;
        position: relative;
        /* تأكيد أن السلايدات داخل سويبر تأخذ نفس الارتفاع */
        display: flex;
      }

      .swiper-slide {
        height: auto !important; /* تجعل سويبر يضبط الارتفاع بناءً على أطول كارت */
        display: flex;
      }

      .swiper-pagination-bullet {
        width: 12px !important;
        height: 12px !important;
        background: #007bff !important;
        opacity: 0.3;
        cursor: pointer !important;
        pointer-events: auto !important;
      }

      .swiper-pagination-bullet-active {
        opacity: 1;
        width: 35px !important;
        border-radius: 6px !important;
      }

      .swiper-pagination {
        bottom: 10px !important;
      }

      /* ألوان النجوم */
      .rating i {
        color: #ffc107;
        margin: 0 2px;
      }

      .rating i.star-muted {
        color: #e0e0e0 !important;
        opacity: 0.8;
      }

      /* محاذاة النص لليمين */
      .client-info-wrapper .text-end {
        text-align: right !important;
        width: 100%;
      }
      /* ------------------------------------------------------
           10. تواصل معنا (Contact)
        ------------------------------------------------------ */
      .contact {
        padding: 100px 0;
      }

      .contact-info-card {
        background: var(--main-color);
        color: white;
        padding: 50px;
        border-radius: 20px;
        height: 100%;
      }

      .info-item {
        display: flex;
        margin-bottom: 30px;
      }

      .info-item i {
        font-size: 1.5rem;
        color: var(--accent-color);
        margin-left: 20px;
      }

      .contact-form {
        padding: 20px;
      }

      /* الأب اللي شايل الـ input والـ button */

      .form-control {
        padding: 15px 25px;
        border-radius: 50px 0 0 50px; /* دائرية من اليمين (للعربي) */
        margin-bottom: 0; /* شيلنا المارجن عشان يلزق في الزرار */
        border: 1px solid #ddd;
        border-left: none; /* شيل الحدود اللي بينه وبين الزرار */
        flex: 1; /* ياخد المساحة المتاحة */
        height: 55px; /* توحيد الطول */
      }

      .btn-submit {
        background: var(--main-color);
        color: white;
        padding: 0 40px; /* شيلنا البادينج الرأسي عشان الـ height */
        height: 55px; /* نفس طول الـ input */
        border-radius: 0 50px 50px 0; /* دائرية من اليسار (للعربي) */
        font-weight: 700;
        border: 1px solid var(--main-color);
        width: auto; /* بدل 100% عشان يجي جنبه */
        transition: var(--transition);
        cursor: pointer;
      }

      .btn-submit:hover {
        background: var(--accent-color);
      }

     
      /* ------------------------------------------------------
           Media Queries
        ------------------------------------------------------ */
      @media (max-width: 991px) {
        .hero-content {
          text-align: center;
          margin-bottom: 50px;
        }
        .hero-content h1 {
          font-size: 2.8rem;
        }
        .experience-badge {
          right: 0;
          bottom: 0;
          padding: 15px;
        }
        .navbar-collapse {
          background: white;
          padding: 20px;
          margin-top: 15px;
        }
      }
      /*كارت */
      .service-btn {
        display: inline-block;
        margin-top: 20px;
        padding: 10px 25px;
        border-radius: 50px;
        font-weight: 700;
        font-size: 0.95rem;
        text-decoration: none;
        background: transparent;
        color: var(--main-color);
        border: 2px solid var(--main-color);
        transition: 0.4s ease;
        position: relative;
        z-index: 2;
      }

      /* تأثير Hover احترافي */
      .service-btn:hover {
        background: var(--accent-color);
        border-color: var(--accent-color);
        color: #fff;
        transform: translateY(-3px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
      }

      /* لما الكارت يتحول أزرق */
      .service-card:hover .service-btn {
        border-color: white;
        color: white;
      }

      .service-card:hover .service-btn:hover {
        background: white;
        color: var(--main-color);
      }