/* Cleaned CSS */

/*fixed icons start*/

.fixed-icons {
    position: fixed;
    bottom: 20px;
    left: 20px;
    flex-direction: column;
    display: flex;
    gap: 15px;
    z-index: 1000;
}

.icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.4s ease;
    animation: fadeIn 0.8s ease forwards;
    opacity: 0;
}

.icon svg {
    width: 28px;
    height: 28px;
    fill: #ffffff;
    transition: transform 0.3s ease, fill 0.3s ease;
}

.icon:hover {
    transform: scale(1.2) rotate(10deg);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
}

.icon:hover svg {
    fill: #f8f9fa;
}

.icon:hover::after {
    content: '';
    position: absolute;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.1);
    animation: pulse 1.5s infinite;
}

.phone-icon {
    background-color: #007bff;
    /* اللون الأزرق لاتصال */
}

.whatsapp-icon {
    background-color: #25d366;
    /* اللون الأخضر لواتساب */
}

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

@keyframes pulse {
    0%,
    100% {
        transform: scale(1);
        opacity: 0.6;
    }
    50% {
        transform: scale(1.5);
        opacity: 0;
    }
}


/*fixed icons end*/







/* nav start */

.aws1-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    padding: 10px 20px;
    border-bottom: 1px solid #ccc;
    position: relative;
    height: 100px;
    z-index: 1000;
  }
  
  .aws1-logo {
    font-size: 1.5rem;
    font-weight: bold;
margin: auto;
  }
  
  .aws1-menu-icon,
  .aws1-close-icon {
    font-size: 1.8rem;
    cursor: pointer;
    display: none;
  }
  
  .aws1-nav-links {
    list-style: none;
    display: flex;
    align-items: center;
    transition: 0.3s;
    
}
@media (min-width: 992px) {
    .aws1-nav-links{
        padding-left: 550px;
    }
  }

  
  .aws1-nav-links li {
    position: relative;
    margin-left: 20px;
    text-align: center;
  }
  
  .aws1-nav-links a {
    text-decoration: none;
    color: #000000;
    font-size: 1rem;
    display: block;
    padding: 8px 0;
  }
  
  /* Dropdown */
  .aws1-dropdown:hover .aws1-dropdown-menu {
    display: block;
  }
  
  .aws1-dropdown-menu {
    display: none;
    position: absolute;
    background-color: #fff;
    list-style: none;
    padding: 0;
    margin: 5px 0 0;
    border: 1px solid #ccc;
    min-width: 120px;
    top: 100%; /* يخلّيها تحت العنصر */
    right: 0;   /* تبدأ من اليمين */
    z-index: 999; /* فوق باقي العناصر */
  }
  
  
  .aws1-dropdown-menu li {
    margin: 0;
  }
  
  .aws1-dropdown-menu li a {
    padding: 10px;
    white-space: nowrap;
  }
  
  .aws1-dropdown-menu li a:hover {
    background-color: #f4f4f4;
  }
  
  /* Responsive */
  
  @media (max-width: 768px) {
    .aws1-menu-icon {
      display: block;
    }
  
    
  .aws1-logo {
 padding-left: 90px;
  }
    .aws1-nav-links {
      position: fixed;
      top: 0;
      left: -100%;
      flex-direction: column;
      width: 250px;
      height: 100vh;
      background-color: #fff;
      padding-top: 60px;
      transition: 0.3s;
      overflow-y: auto;
      z-index: 999;
    }
  
    .aws1-nav-links li {
      margin: 20px;
    }
  
    .aws1-nav-links li.aws1-dropdown:hover .aws1-dropdown-menu {
      display: none;
    }
  
    .aws1-close-icon {
      display: block;
      position: absolute;
      top: 10px;
      right: 20px;
      font-size: 2rem;
    }
  
    .aws1-dropdown-menu {
      position: static;
      border: none;
      margin: 0;
    }
  }
  
  .aws1-nav-links.aws1-open {
    left: 0;
  }

  :root {
  --nav-h: 80px;
  --border: #e6e6e6;
  --link: #000;
  --hover: #1E88E5;
}

  .aws1-nav-links a:hover, .aws1-dropbtn:hover{ color:var(--hover); }

  
/* nav end */












/* landig start */

.am1-hero-wrap {
    position: relative;
    width: 100%;
    height: 90vh;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}

.am1-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1;
}

.am1-container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1200px;
    padding: 0 15px;
}

.am1-row {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    flex-direction: column;
    text-align: center;
}

.am1-col {
    width: 100%;
}

.am1-text {
    color: #fff;
    text-align: right;
    font-family: cairo, sans-serif;
}

.am1-title {
    margin-bottom: 20px;
}

.am1-subtitle {
    font-size: 1.2rem;
    font-weight: 300;
    font-weight: bold;
    margin-bottom: 0;
}

.am1-btn {
    display: inline-block;
    margin-top: 20px;
    padding: 8px 13px;
    color: #FFFFFF;
    font-size: 5px;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
}

.am1-btn:hover {
    background-color: #005A99;
    /* لون عند التمرير */
    transform: translateY(-3px);
    /* تأثير الرفع */
    color: #FFFFFF;
}





/* Slider Container */
.am1-hero-slider{
  position:relative; width:100%; height:85vh; overflow:hidden;
}

/* Slides */
.am1-hero-wrap{
  position:absolute; inset:0; background-size:cover; background-position:center;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity 1s ease-in-out; /* سلاسة مناسبة */
}
.am1-hero-wrap.active{ opacity:1; }

/* Overlay & content */
.am1-overlay{ position:absolute; inset:0; background:rgba(0,0,0,.6); z-index:1; }
.am1-container{ position:relative; z-index:2; width:100%; max-width:1200px; padding:0 15px; }
.am1-row{ display:flex; align-items:center; justify-content:center; height:100%; flex-direction:column; text-align:center; }
.am1-col{ width:100%; }
.am1-text{ color:#fff; text-align:center; font-family:cairo, sans-serif; }
.am1-title{ font-size: 25px; font-weight:bold; margin-bottom:20px; }
.am1-subtitle{ font-size:50px; font-weight:bold; margin-bottom:20px; }
.am1-btn{ display:inline-block; margin-bottom:160px; margin-top:20px;  background:#e9f4f7; color:#000000; font-size:14px; font-weight:bold; text-decoration:none; border-radius:8px; transition:all .3s; }
.am1-btn:hover{ background:#103149; transform:translateY(-3px);  }

/* Controls (arrows) */
.am1-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border:0; border-radius:50%;
 color:#0a3d66; font-size:28px; line-height:44px;
  box-shadow:0 4px 12px rgba(0,0,0,.15); cursor:pointer; z-index:3;
}
.am1-prev{ inset-inline-start:16px; }
.am1-next{ inset-inline-end:16px; }
.am1-arrow:hover{ background:#fff; }

/* Dots */
.am1-dots{
  position:absolute; bottom:10px; inset-inline:0; display:flex; gap:4px;
  justify-content:center; z-index:3;
}
.am1-dots button{
  width:20px; height:2px;  border:0; background:#ffffff80; cursor:pointer;
}
.am1-dots button[aria-current="true"]{ background:#fff; width:20px; height:4px; }

/* Responsive typography */
@media (max-width:768px){ .am1-title{ font-size:2.2rem; } .am1-subtitle{ font-size:1rem; } }
@media (max-width:480px){ .am1-title{ font-size:2rem; } .am1-subtitle{ font-size:.9rem; } }


/* Responsiveness */

@media (max-width: 768px) {
    .am1-title {
        font-size: 2.2rem;
    }
    .am1-subtitle {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .am1-title {
        font-size: 2rem;
    }
    .am1-subtitle {
        font-size: 0.9rem;
    }
    .am1-hero-wrap {
        background-position: left;
    }
}

.animate-slide-up {
    transform: translateY(100vh);
    /* يبدأ السكشن من خارج الشاشة (الأسفل) */
    opacity: 0;
    transition: transform 1s ease-out, opacity 1s ease-out;
}

.animate-slide-up.show {
    transform: translateY(0);
    /* يعود إلى مكانه الطبيعي */
    opacity: 1;
}


/* landig end */


/*Start Features */


/* Start Features */

.x1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 50px 5%;
    background-color: #ffffff;
    direction: rtl;
    /* لجعل الاتجاه من اليمين إلى اليسار */
}

.x2 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.x3 {
    flex: 1;
    padding: 10px;
}

.x3 img {
    max-width: 100%;
    border-radius: 10px;
}

.x4 {
    flex: 1;
    padding: 10px;
    text-align: right;
    /* النصوص تكون بمحاذاة اليمين */
    font-family: "Cairo", "Arial", sans-serif;
    /* خطوط تدعم العربية */
}

.x4 h2 {
    font-size: 2rem;
    color: #202020;
    margin-bottom: 10px;
}

.x5 {
    width: 80px;
    height: 4px;
    background-color: #3326dd;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
}

.x4 p {
    font-size: 1rem;
    color: #333;
    line-height: 1.6;
    margin-bottom: 15px;
}

.x6 {
    display: inline-block;
    background-color: #3326dd;
    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.x6:hover {
    background-color: #1c1394;
}


/* تصميم متجاوب للشاشات الصغيرة */

@media screen and (max-width: 768px) {
    .x2 {
        flex-direction: column;
        /* النص والصورة عموديين بدلاً من صف */
    }
    .x4 {
        text-align: center;
        /* النص يكون بمحاذاة الوسط */
    }
    .x3 {
        margin-top: 20px;
        /* إضافة مسافة بين النص والصورة */
    }
    .x5 {
        margin-right: 166px;
    }
}


/* End Features */


/* سيكشن الخدمات */

.service-btn {
    background-color: #FFFFFF;
    /* خلفية بيضاء */
    color: #007ACC;
    /* لون النص أزرق متناسق مع العلامة التجارية */
    border: 2px solid #007ACC;
    /* حدود زرقاء */
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    text-align: center;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
    /* ظل خفيف */
    margin-top: 20px;
}

.service-btn:hover {
    background-color: #007ACC;
    /* يصبح الزر أزرق عند التحويم */
    color: #FFFFFF;
    /* النص يتحول إلى الأبيض */
    border-color: #007ACC;
    box-shadow: 0px 4px 10px rgba(0, 122, 204, 0.2);
    /* تعزيز تأثير الظل */
    transform: translateY(-2px);
    /* تأثير رفع خفيف */
}

.mx1-row {
    display: flex;
    gap: 20px;
    /* مسافة بين الأعمدة */
    justify-content: center;
    /* محاذاة الكروت في الوسط */
}

.mx1-col {
    flex: 1 1 calc(33.33% - 20px);
    /* يجعل كل كارت يأخذ ثلث العرض */
    max-width: calc(33.33% - 20px);
}

.mx1-card {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 20px;
    text-align: right;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.mx1-services {
    padding: 60px 15px;
    text-align: center;
    background-color: #fff;
}

.mx1-section-title {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 10px;
}

.mx1-section-subtitle {
    font-size: 1rem;
    color: #777;
    margin-bottom: 30px;
}

.mx1-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
}

.mx1-card {
    flex: 1;
    max-width: 30%;
    min-width: 250px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.mx1-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.mx1-card-number {
    display: block;
    font-size: 1.5rem;
    font-weight: bold;
    color: #f25d27;
    margin-bottom: 10px;
}

.mx1-card-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
}

.mx1-card-text {
    font-size: 14px;
    line-height: 25px;
    color: #555;
    font-family: tajawal, sans-serif;
    font-weight: 400;
}


/* Responsiveness */

@media (max-width: 768px) {
    .mx1-card {
        max-width: 100%;
    }
}

.mx1-card-image {
    width: 100%;
    height: auto;
    border-radius: 10px;
    margin-bottom: 15px;
    object-fit: cover;
    max-height: auto;
    /* التحكم في ارتفاع الصورة */
    display: block;
}

.mx1-row {
    display: flex;
    gap: 20px;
    /* مسافة بين الأعمدة */
    justify-content: center;
    /* محاذاة الكروت في الوسط */
    margin-bottom: 30px;
    /* فاصل بين الصفوف */
}

.mx1-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mx1-card {
    opacity: 0;
    /* اجعل العنصر غير مرئي */
    transform: translateY(50px);
    /* تحريكه لأسفل */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}


/* عند ظهور العنصر في الشاشة */

.mx1-card.show {
    opacity: 1;
    transform: translateY(0);
}


/* ABOUT SECTION START */

.I1-title {
    text-align: center;
    font-size: 1.5rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 30px;
}


/* الحاوية الرئيسية */

.I1-container {
    font-family: Arial, sans-serif;
    text-align: center;
    padding: 20px;
    background-color: #fff;
}


/* الحاوية الداخلية */

.I1-items {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}


/* العناصر */

.I1-item {
    background-color: #f9fffb;
    border-radius: 12px;
    padding: 20px;
    width: 30%;
    max-width: 300px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.I1-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}


/* الأيقونات */

.I1-icon {
    font-size: 2rem;
    color: #6cc9a1;
    margin-bottom: 15px;
}


/* عناوين العناصر */

.I1-item-title {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 10px;
    color: #333;
}


/* النصوص */

.I1-description {
    font-size: 0.9rem;
    color: #555;
}


/* تصميم متجاوب */

@media (max-width: 768px) {
    .I1-item {
        width: 45%;
    }
}

@media (max-width: 480px) {
    .I1-item {
        width: 100%;
    }
}


/* ABOUT SECTION END */


/* contact section start */

.oo1-container {
    max-width: 1200px;
    margin: auto;
    padding: 40px 20px;
    text-align: center;
}

.oo1-title {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 10px;
    color: #333333;
    /* لون داكن قليلاً للعناوين */
}

.oo1-title span {
    color: #007ACC;
    /* أزرق رئيسي */
}

.oo1-subtitle {
    color: #555555;
    /* رمادي متوسط */
    margin-bottom: 30px;
}

.oo1-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.oo1-card {
    background: #F8F9FA;
    /* رمادي فاتح ناعم بدلاً من الأبيض النقي */
    border: 2px solid #D1D5DB;
    /* لون حدودي رمادي هادئ */
    border-radius: 15px;
    padding: 20px;
    text-align: center;
    width: calc(33.333% - 20px);
    min-width: 280px;
    transition: 0.3s ease-in-out;
}

.oo1-card:hover {
    background: #E3F2FD;
    /* أزرق فاتح عند التحويم */
    border-color: #007ACC;
    /* تغيير لون الحدود للأزرق */
    box-shadow: 0 4px 10px rgba(0, 122, 204, 0.2);
    /* ظل خفيف */
}

.oo1-card svg {
    width: 50px;
    height: 50px;
    fill: #007ACC;
    /* تغيير لون الأيقونات إلى الأزرق */
    margin-bottom: 15px;
}

.oo1-card-title {
    font-size: 1.25rem;
    margin-bottom: 10px;
    color: #333333;
    /* لون عنوان البطاقة */
}

.oo1-card-text {
    font-size: 0.9rem;
    color: #555555;
    /* لون النص داخل البطاقات */
}

.oo1-card-link {
    display: inline-block;
    margin-top: 10px;
    padding: 8px 16px;
    border: 2px solid #007ACC;
    color: #007ACC;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    transition: 0.3s ease-in-out;
}

.oo1-card-link:hover {
    background: #007ACC;
    color: white;
    box-shadow: 0px 4px 10px rgba(0, 122, 204, 0.3);
}

@media (max-width: 768px) {
    .oo1-card {
        width: 80%;
        max-width: 400px;
        margin: 0 auto;
    }
}

@media (max-width: 480px) {
    .oo1-card {
        width: 90%;
        max-width: 420px;
    }
}


/* contact section end */


/*ABOUT US SECTION */

.responsive-container-block {
    min-height: 75px;
    height: fit-content;
    width: 100%;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    display: flex;
    flex-wrap: wrap;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    justify-content: flex-start;
    text-align: center;
}

.text-blk {
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    line-height: 25px;
}

.responsive-container-block.bigContainer {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 10px;
    padding-right: 50px;
    padding-bottom: 10px;
    padding-left: 50px;
}

.text-blk.headingText {
    font-size: 23px;
    font-weight: 700;
    line-height: 28px;
    color: rgb(0, 135, 177);
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 10px;
    margin-left: 0px;
    padding-top: 0px;
    padding-right: 10px;
    padding-bottom: 0px;
    padding-left: 0px;
}

.allText {
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    width: 50%;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
}

.text-blk.subHeadingText {
    color: rgb(0, 0, 0);
    font-size: 32px;
    line-height: 40px;
    font-weight: 700;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 15px;
    margin-left: 0px;
    padding-top: 0px;
    padding-right: 10px;
    padding-bottom: 0px;
    padding-left: 0px;
}

.text-blk.description {
    font-size: 18px;
    line-height: 28px;
    color: rgb(0, 0, 0);
    padding-top: 0px;
    padding-right: 10px;
    padding-bottom: 0px;
    padding-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 40px;
    margin-left: 0px;
}

.explore {
    font-size: 18px;
    line-height: 28px;
    color: #FFFFFF;
    background-color: #007ACC;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-top-style: outset;
    border-right-style: outset;
    border-bottom-style: outset;
    border-left-style: outset;
    border-top-color: rgb(244, 152, 146);
    border-right-color: rgb(244, 152, 146);
    border-bottom-color: rgb(244, 152, 146);
    border-left-color: rgb(244, 152, 146);
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
    cursor: pointer;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    padding-top: 9px;
    padding-right: 45px;
    padding-bottom: 9px;
    padding-left: 45px;
}

.explore:hover {
    background-image: initial;
    background-position-x: initial;
    background-position-y: initial;
    background-size: initial;
    background-repeat-x: initial;
    background-repeat-y: initial;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    background-color: #005A99;
    color: #FFFFFF;
    box-shadow: 0px 4px 10px rgba(0, 122, 204, 0.3);
    transition: 0.4s ease;
    transform: translateY(-3px);
    /* تأثير الرفع */
}

.responsive-container-block.Container {
    margin-top: 80px;
    margin-right: auto;
    margin-bottom: 50px;
    margin-left: auto;
    justify-content: center;
    align-items: center;
    max-width: 1320px;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
}

.responsive-container-block.Container.bottomContainer {
    flex-direction: row;
    margin-top: 50px;
    margin-right: auto;
    margin-bottom: 50px;
    margin-left: auto;
}

.allText.aboveText {
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 40px;
}

.allText.bottomText {
    margin-top: 0px;
    margin-right: 10px;
    margin-bottom: 0px;
    margin-left: 0px;
}

.mainVideo {
    width: 85%;
    height: 450px;
    margin-top: -30px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}

.videoContainer {
    width: 46%;
    height: 600px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 10px;
}

.mainVideo {
    z-index: 10;
}

.dotsImg {
    position: absolute;
    width: 80%;
    height: 600px;
    top: 0px;
    right: 0px;
    object-fit: cover;
}

@media (max-width: 1024px) {
    .responsive-container-block.Container {
        max-width: 850px;
    }
    .text-blk.description {
        font-size: 18px;
    }
    .allText {
        width: 40%;
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
        margin-left: 20px;
    }
    .responsive-container-block.bigContainer {
        padding-top: 10px;
        padding-right: 10px;
        padding-bottom: 10px;
        padding-left: 10px;
    }
    .text-blk.subHeadingText {
        font-size: 30px;
    }
    .responsive-container-block.Container.bottomContainer {
        margin-top: 80px;
        margin-right: auto;
        margin-bottom: 50px;
        margin-left: auto;
    }
    .responsive-container-block.Container {
        max-width: 830px;
    }
    .allText.aboveText {
        margin-top: 30px;
        margin-right: 0px;
        margin-bottom: 0px;
        margin-left: 40px;
    }
    .allText.bottomText {
        margin-top: 30px;
        margin-right: 40px;
        margin-bottom: 0px;
        margin-left: 0px;
    }
    .allText.bottomText {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: 30px;
        margin-right: 0px;
        margin-bottom: 30px;
        margin-left: 0px;
    }
    .responsive-container-block.Container.bottomContainer {
        flex-direction: column;
    }
    .text-blk.headingText {
        text-align: center;
        font-size: 22px;
    }
    .text-blk.subHeadingText {
        text-align: center;
    }
    .text-blk.description {
        text-align: center;
    }
    .explore {
        margin-top: 0px;
        margin-right: auto;
        margin-bottom: 0px;
        margin-left: auto;
    }
    #inc0s {
        margin-top: 0px;
        margin-right: auto;
        margin-bottom: 0px;
        margin-left: auto;
    }
    .dotsImg {
        width: 50%;
        left: 50%;
        transform: translateX(-50%);
    }
    .videoContainer {
        width: 100%;
        padding-top: 0px;
        padding-right: 0px;
        padding-bottom: 0px;
        padding-left: 0px;
    }
    .mainVideo {
        width: 100%;
    }
    .allText.bottomText {
        margin-top: 30px;
        margin-right: 0px;
        margin-bottom: 60px;
        margin-left: 0px;
    }
    .text-blk.description {
        padding-top: 0px;
        padding-right: 0px;
        padding-bottom: 0px;
        padding-left: 0px;
    }
    .text-blk.headingText {
        padding-top: 0px;
        padding-right: 0px;
        padding-bottom: 0px;
        padding-left: 0px;
    }
    .text-blk.subHeadingText {
        padding-top: 0px;
        padding-right: 0px;
        padding-bottom: 0px;
        padding-left: 0px;
    }
    .mainVideo {
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
        margin-left: 0px;
    }
}

@media (max-width: 768px) {
    .allText {
        width: 100%;
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
        margin-left: 0px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-top: 0px;
        padding-right: 0px;
        padding-bottom: 0px;
        padding-left: 0px;
    }
    .responsive-container-block.Container {
        flex-direction: column;
        height: auto;
    }
    .text-blk.headingText {
        text-align: center;
    }
    .text-blk.subHeadingText {
        text-align: center;
        font-size: 28px;
        line-height: 38px;
    }
    .text-blk.description {
        text-align: center;
        font-size: 18px;
        line-height: 27px;
    }
    .allText {
        margin-top: 40px;
        margin-right: 0px;
        margin-bottom: 0px;
        margin-left: 0px;
    }
    .allText.aboveText {
        margin-top: 40px;
        margin-right: 0px;
        margin-bottom: 0px;
        margin-left: 0px;
    }
    .responsive-container-block.Container {
        margin-top: 80px;
        margin-right: auto;
        margin-bottom: 50px;
        margin-left: auto;
    }
    .responsive-container-block.Container.bottomContainer {
        margin-top: 50px;
        margin-right: auto;
        margin-bottom: 50px;
        margin-left: auto;
        padding-top: 0px;
        padding-right: 0px;
        padding-bottom: 0px;
        padding-left: 10px;
    }
    .allText.bottomText {
        margin-top: 40px;
        margin-right: 0px;
        margin-bottom: 0px;
        margin-left: 0px;
    }
    .allText.bottomText {
        margin-top: 40px;
        margin-right: 0px;
        margin-bottom: 60px;
        margin-left: 0px;
    }
    .mainVideo {
        height: 400px;
    }
    .videoContainer {
        height: 550px;
    }
    .explore {
        font-size: 16px;
        padding-top: 8px;
        padding-right: 40px;
        padding-bottom: 8px;
        padding-left: 40px;
    }
    .responsive-container-block.bigContainer {
        padding-top: 0px;
        padding-right: 50px;
        padding-bottom: 0px;
        padding-left: 50px;
    }
}

@media (max-width: 500px) {
    .responsive-container-block.Container {
        padding-top: 10px;
        padding-right: 0px;
        padding-bottom: 10px;
        padding-left: 0px;
        width: 100%;
        max-width: 100%;
    }
    .responsive-container-block.bigContainer {
        padding-top: 10px;
        padding-right: 25px;
        padding-bottom: 10px;
        padding-left: 25px;
    }
    .allText {
        padding-top: 0px;
        padding-right: 0px;
        padding-bottom: 0px;
        padding-left: 0px;
        width: 100%;
    }
    .responsive-container-block.bigContainer {
        padding-top: 10px;
        padding-right: 20px;
        padding-bottom: 10px;
        padding-left: 20px;
    }
    .explore {
        font-size: 16px;
        line-height: 25px;
        padding: 8px 35px 8px 35px;
    }
    .dotsImg {
        width: 80%;
        height: 100%;
    }
    .mainVideo {
        height: 260px;
    }
    .videoContainer {
        height: 320px;
    }
    .responsive-container-block.Container.bottomContainer {
        padding: 0 0 0 0;
    }
    .text-blk.description {
        font-size: 16px;
        line-height: 23px;
        margin: 0 0 30px 0;
    }
    .text-blk.subHeadingText {
        font-size: 24px;
    }
}


/* يبدأ العنصر مخفيًا */

.responsive-container-block.bigContainer {
    transform: translateY(60px);
    /* يبدأ من 60px أسفل */
    opacity: 0;
    visibility: hidden;
    transition: transform 1s ease-out, opacity 1s ease-out, visibility 1s;
}


/* عند ظهور العنصر في الشاشة */

.responsive-container-block.bigContainer.show {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}


/*ABOUT US SECTION */


/*clints section */


/* قسم العملاء */

.clients-section {
    background-color: #ffffff;
    /* لون الخلفية */
    padding: 60px 20px;
    /* تباعد داخلي */
    position: relative;
}


/* أيقونة الخلفية */

.clients-section::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 20px;
    width: 80px;
    height: 80px;
    background-image: url('');
    /* استبدل بمسار الأيقونة */
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.3;
    /* شفافية الأيقونة */
    z-index: 1;
    /* خلف النص */
}


/* العناوين */

.bl {
    position: relative;
    z-index: 2;
    /* فوق الخلفية */
    text-align: center;
}

.section-title {
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #333;
}

.section-subtitle {
    font-size: 18px;
    color: #777;
    margin-bottom: 40px;
}


/* الشعارات */

.clients-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
}

.clients-logos img {
    max-width: 120px;
    height: auto;
    transition: transform 0.3s ease;
    /* تأثير عند المرور */
}

.clients-logos img:hover {
    transform: scale(1.1);
    /* تكبير عند التمرير */
}


/* تحسين العرض على الشاشات الصغيرة */

@media screen and (max-width: 768px) {
    .clients-logos img {
        max-width: 100px;
    }
}


/*clints section end */

.dropdown-toggle::after {
    display: none !important;
}


/* صفحة تواصل معنا */


/* إخفاء العنصر مبدئيًا */

.t1 {
    opacity: 0;
    transform: translateY(50px);
    /* تحريكه لأسفل */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}


/* عند تحميل الصفحة يظهر */

.t1.show {
    opacity: 1;
    transform: translateY(0);
}

.t1 {
    position: relative;
    width: 100%;
    height: 350px;
    /* يمكن تعديل الارتفاع حسب الحاجة */
    display: flex;
    justify-content: center;
    align-items: center;
}


/* تصميم الصورة */

.t1 img {
    position: absolute;
    top: 0;
    left: 0;
    width: 18%;
    height: 0;
    object-fit: cover;
}


/* طبقة التعتيم */

.t2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 60%;
background-color: #03588a;    /* تأثير التعتيم */
    display: flex;
    justify-content: center;
    align-items: center;
}


/* تصميم النص */

.t3 {
    font-size: 2.5rem;
    color: #ffffff;
    font-family: "Cairo","Tajawal",  sans-serif;
    text-align: center;
    font-weight: 500;
}

/* عنا */

.X12A-box {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    background: #fff;
    text-align: right;
}

.X12A-title {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    text-align: center;
    margin-bottom: 20px;
}

.X12A-text {
    font-size: 18px;
    color: #555;
    text-align: justify;
    line-height: 1.8;
}

.X12A-list {
    list-style: none;
    padding: 0;
}

.X12A-list li {
    font-size: 18px;
    color: #444;
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

.X12A-list li strong {
    color: #007bff;
}


/* Responsive Design */

@media (max-width: 768px) {
    .X12A-box {
        width: 95%;
        padding: 15px;
    }
    .X12A-title {
        font-size: 22px;
    }
    .X12A-text,
    .X12A-list li {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .X12A-box {
        width: 100%;
        padding: 10px;
    }
    .X12A-title {
        font-size: 20px;
    }
    .X12A-text,
    .X12A-list li {
        font-size: 14px;
    }
}


/* عنا */


/* صفحة تواصل معنا */


/* الحاوية العامة */

.X99-container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    background: #fff;
    border-radius: 8px;
    text-align: center;
}


/* العناوين */

.X99-title {
    font-size: 26px;
    font-weight: bold;
    color: #333;
    margin-bottom: 20px;
}


/* تحسين "لماذا تتواصل معنا؟" */

.X99-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    text-align: center;
}

.X99-feature {
    background: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    transition: 0.3s;
}

.X99-feature:hover {
    background: #007bff;
    color: white;
}

.X99-feature i {
    font-size: 40px;
    color: #007bff;
    margin-bottom: 10px;
}


/* طرق التواصل */

.X99-contact-box {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 15px;
    justify-content: center;
    align-items: center;
}

.X99-contact-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    color: #444;
    background: #f9f9f9;
    padding: 15px;
    border-radius: 8px;
    transition: 0.3s ease-in-out;
    justify-content: center;
}

.X99-contact-item:hover {
    background: #007bff;
    color: white;
    transform: translateY(-3px);
}

.X99-contact-item i {
    font-size: 22px;
    color: #007bff;
    transition: 0.3s ease-in-out;
}

.X99-contact-item:hover i {
    color: white;
}

.X99-contact-item a {
    text-decoration: none;
    color: #007bff;
    font-weight: bold;
    transition: 0.3s ease-in-out;
}

.X99-contact-item:hover a {
    color: white;
}


/* الأسئلة الشائعة */

.X99-faq-item {
    background: #f9f9f9;
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s ease-in-out;
}

.X99-faq-item:hover {
    background: #007bff;
    color: white;
}

.X99-question {
    font-weight: bold;
    font-size: 18px;
}

.X99-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out;
    padding: 0 10px;
    font-size: 16px;
    color: #333;
}

.X99-faq-item.active .X99-answer {
    max-height: 100px;
    padding: 10px;
}


/* نموذج استفسار سريع */

.X99-inquiry-form {
    text-align: center;
}

.X99-inquiry-form input {
    width: 80%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
}

.X99-inquiry-form button {
    background: #007bff;
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
}


/* آراء العملاء */

.X99-testimonial {
    text-align: center;
    background: #f1f1f1;
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 5px;
}


/* تحسين التناسق مع جميع الأجهزة */

@media (max-width: 1024px) {
    .X99-container {
        width: 95%;
        padding: 20px;
    }
    .X99-title {
        font-size: 24px;
    }
}

@media (max-width: 768px) {
    .X99-contact-box {
        grid-template-columns: 1fr;
    }
    .X99-contact-item {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .X99-title {
        font-size: 22px;
    }
    .X99-contact-item {
        font-size: 14px;
        padding: 12px;
    }
}


/* الحاوية الأساسية */

.X99-container {
    width: 90%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 30px 20px;
    background: #fff;
    border-radius: 8px;
    text-align: center;
}


/* العنوان */

.X99-title {
    font-size: 26px;
    font-weight: bold;
    color: #333;
    margin-bottom: 20px;
}


/* تصميم القائمة */

.X99-contact-box {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
    justify-content: center;
    align-items: center;
}


/* كل عنصر في القائمة */

.X99-contact-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 18px;
    color: #444;
    background: #f9f9f9;
    padding: 15px;
    border-radius: 10px;
    transition: 0.3s ease-in-out;
    justify-content: start;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

.X99-contact-item:hover {
    background: #007bff;
    color: white;
    transform: translateY(-3px);
}


/* الأيقونات */

.X99-contact-item i {
    font-size: 24px;
    color: #007bff;
    transition: 0.3s ease-in-out;
}

.X99-contact-item:hover i {
    color: white;
}


/* النصوص */

.X99-label {
    font-weight: bold;
    display: block;
    color: #333;
}

.X99-contact-item a {
    text-decoration: none;
    color: #007bff;
    font-weight: bold;
    transition: 0.3s ease-in-out;
}

.X99-contact-item:hover a {
    color: white;
}


/* تحسين التوافق مع جميع الشاشات */

@media (max-width: 1024px) {
    .X99-container {
        width: 95%;
        padding: 20px;
    }
    .X99-title {
        font-size: 24px;
    }
}

@media (max-width: 768px) {
    .X99-contact-box {
        grid-template-columns: 1fr;
    }
    .X99-contact-item {
        font-size: 16px;
        justify-content: center;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .X99-title {
        font-size: 22px;
    }
    .X99-contact-item {
        font-size: 14px;
        padding: 12px;
    }
}




/*تنسيق المقالات كلها */
.c-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 80%;
    margin: 0 10%;
    text-align: right;
    font-family: 'Cairo', sans-serif;
    line-height: 1.8;
}

.c-image {
    height: auto;
    width: 70%;
    margin: 0 auto;
}

.c-text {
    line-height: 1.8;
    text-align: right;
    font-family: 'Cairo', sans-serif;
}

/* تخصيص الـ h2 داخل .c-container فقط */
.c-container h2 {
    font-size: 27px; /* تحديد حجم الخط للـ h2 */
    text-align: right; /* بداية h2 من اليمين */
    width: 100%; /* التأكد من أن h2 يأخذ عرض الحاوية بالكامل */
    margin: 0; /* إزالة الهوامش الخارجية */
}

.c-container p {
    font-size: 18px; /* تحديد حجم الخط للنصوص */
    text-align: right; /* جعل النص يبدأ من المنتصف */
    width: 100%; /* التأكد من أن النص يأخذ عرض الحاوية بالكامل */
    margin: 10px 0; /* إضافة مسافة بين الفقرات */
}

.abc123 {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 16px;
    text-align: left;
    background-color: #ffffff;
}

.xyz456 th,
.xyz456 td {
    padding: 12px;
    border: 1px solid #ddd;
}

.pqr789 th {
    background-color: #333;
    color: white;
    text-transform: uppercase;
}

.lmn234 tbody tr:nth-child(even) {
    background-color: #f2f2f2;
}

.uvw567 {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}


/* جعل الجدول متجاوبًا مع جميع الأجهزة */

@media screen and (max-width: 768px) {
    .uvw567 {
        width: 100%;
        overflow-x: scroll;
    }
    .xyz456 th,
    .xyz456 td {
        font-size: 14px;
        padding: 10px;
    }
}


/*تنسيق المقالات كلها */








/* ===== About Section ===== */
.about-section{
  padding: 70px 0;
  background: linear-gradient(180deg,#f8fbff 0%, #ffffff 40%);
}

/* الصورة + شارة الخبرة */
.about-image{
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  background: #fff;
}
.about-image img{ display:block; width:100%; height:auto; }

/* لمسة زخرفية بسيطة */
.about-image::after{
  content:""; position:absolute; inset:auto -30% -30% auto; width:220px; height:220px;
  background: radial-gradient(closest-side, rgba(30,136,229,.15), transparent 70%);
  transform: rotate(25deg);
}

/* شارة */
.about-badge{
  position:absolute; inset-inline-start:14px; inset-block-end:14px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:110px; height:110px; border-radius:14px;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(4px);
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
  text-align:center;
}
.about-badge strong{ font-size:28px; color:#0A3D66; line-height:1; }
.about-badge span{ font-size:12px; color:#1d2b3a; }

/* الكارت النصي */
.about-content{
  background:#fff;
  border:1px solid #eef2f7;
  border-radius:16px;
  padding:32px 28px;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  position: relative;
}
.about-content::before{
  content:""; position:absolute; inset-inline-end:0; top:0; height:100%; width:6px;
  background: linear-gradient(180deg,#1E88E5,#34D399);
  border-top-right-radius:16px; border-bottom-right-radius:16px;
}
.about-title{
  font-size:28px; margin:0 0 12px; text-align:right; color:#0a3d66;
}
.about-lead{
  font-size:16px; line-height:1.8; margin-bottom:14px; text-align:right; color:#2b2b2b;
}

/* نقاط التميز */
.about-list{
  list-style:none; padding:0; margin:10px 0 18px; display:grid; gap:8px; text-align:right;

}
.about-list li{
  position:relative; padding-inline-start:28px; font-size:15px;
}
.about-list li::before{
  content:"✓";
  position:absolute; inset-inline-start:0; top:0; color:#1E88E5;
  font-weight:700;
}

/* KPIs */
.about-kpis{
  display:flex; gap:16px; flex-wrap:wrap;
}
.kpi{
  flex: 0 0 auto;
  min-width: 110px;
  background:#f6f9ff;
  border:1px solid #e6eefb;
  border-radius:12px;
  padding:10px 12px;
  text-align:center;
}
.kpi b{ display:block; font-size:20px; color:#0a3d66; line-height:1.1; }
.kpi span{ font-size:12px; color:#44515e; }

/* Responsive */
@media (max-width: 991px){
  .about-section{ padding: 56px 0; }
  .about-content{ padding:28px; }
}
@media (max-width: 767px){
  .about-badge{ width:96px; height:96px; }
  .about-title{ font-size:24px; }
  .about-kpis{ gap:12px; }
}




  @keyframes fadeInUp {
    0% {
      transform: translateY(40px); /* يبدأ تحت */
      opacity: 0;                  /* مخفي */
    }
    100% {
      transform: translateY(0);    /* يرجع للمكان الأصلي */
      opacity: 1;                  /* يصبح مرئي */
    }
  }
  
  .animate-fadeInUp {
    animation: fadeInUp 0.8s ease forwards; 
    /* 
      مدة الحركة 0.8 ثانية، 
      يمكنك تعديلها مثلاً إلى 1s أو 1.2s. 
      ease: نوع التسارع. 
      forwards: لكي يحتفظ بالحالة النهائية بعد انتهاء الحركة.
    */
  }


  .js-scroll-animation {
    opacity: 0;            /* البداية: مخفي */
    transform: translateY(40px); /* اسفل بقليل */
    transition: opacity 0.5s, transform 0.5s; 
    /* إن أردت حركة بسيطة بدون keyframes */
  }
  .js-scroll-animation.animate-fadeInUp {
    opacity: 1;                /* يصبح مرئي */
    transform: translateY(0);   /* يعود لمكانه */
  }
    

  /* about section end */

/* feature section */

/* ================= Feature Section (Why Us) ================ */
:root{
  --feat-accent: #1E88E5;   /* أزرق الهوية */
  --feat-accent2:#34D399;   /* أخضر مساعد */
  --feat-border:#eef2f7;
  --feat-text:#111827;
  --feat-muted:#6b7280;
}

/* سكشن كامل */
.l1{
  padding:60px 0;
  background: linear-gradient(180deg,#ffffff 0%, #f8fbff 100%);
}

/* رأس القسم */
.l3{ margin-bottom:34px; text-align:center; }
.l7{
  font-size:32px; font-weight:800; color:#0a3d66; margin:0 0 8px;
  position:relative; display:inline-block;
}
.l7::after{
  content:""; display:block; height:4px; width:72px; margin:10px auto 0;
  background: linear-gradient(90deg,var(--feat-accent),var(--feat-accent2));
  border-radius:4px;
}
.l8{ font-size:16px; color:var(--feat-muted); margin:0; }

/* شبكة الميزات */
.l4{ row-gap:24px; }

/* عمود */
.l5{ margin-bottom:0; }

/* بطاقة الميزة */
.l6{
  background:#fff;
  border:1px solid var(--feat-border);
  border-radius:16px;
  padding:24px 20px;
  max-width: 340px;
  margin-inline:auto;
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  transition: transform .25s ease, box-shadow .25s ease;
  position:relative;
}
.l6::before{
  content:""; position:absolute; inset:0 0 auto 0; height:4px; border-radius:16px 16px 0 0;
  background: linear-gradient(90deg,var(--feat-accent),var(--feat-accent2));
}

/* أيقونة */
.l9{
  width:72px; height:72px; border-radius:16px; margin:0 auto 14px;
  display:grid; place-items:center;
  background: radial-gradient(closest-side, rgba(30,136,229,.12), transparent 72%);
  color: var(--feat-accent); /* تضبط stroke عبر currentColor */
}

/* عناوين ونص */
.l10{ font-size:20px; margin:8px 0 8px; color:var(--feat-text); font-weight:700; }
.l11{ font-size:14px; color:#374151; line-height:1.7; margin:0; }

/* تفاعل */
.l6:hover{
  transform: translateY(-6px);
  box-shadow:0 16px 36px rgba(0,0,0,.10);
}
.l6:hover .l9{ color:#0f5fb9; }

/* شاشات كبيرة قليلاً */
@media (min-width: 992px){
  /* إزالة الهامش الجانبي القديم حتى ما يبوظ الاتساق */
  .l1{ padding:70px 0; }
}

/* موبايل */
@media (max-width: 767.98px){
  .l7{ font-size:26px; }
  .l8{ font-size:15px; }
  .l10{ font-size:18px; }
  .l11{ font-size:14px; }
}






  /* سكشن الخدمات */
.z1 {
    padding: 60px 0;
    background-color: #ffffff;
  }
  
  /* الحاوية الرئيسية */
  .z2 {
    /* يمكنك تركها كما هي أو إضافة أي تنسيقات */
  }
  
  /* العنوان العام */
  .z3 {
    margin-bottom: 40px;
  }
  
  /* عنوان القسم */
  .z4 {
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 10px;
  }
  
  /* وصف القسم */
  .z5 {
    font-size: 16px;
    color: #000000;
  }
  
  /* صف الخدمات */
  .z6 {
    /* تنسيقات إضافية للصف إذا لزم الأمر */
  }
  
  /* كل عمود (خدمة واحدة) */
  .z7 {
    margin-bottom: 30px; 
  }
  
  /* الصندوق الداخلي لكل خدمة */
  .z8 {
    background-color: #ffffff;
    border-radius: 8px;
    padding: 20px;
  }
  
 
  
  /* الصورة */
  .z9 {
    position: relative;
    width: auto;
    height: auto;
    margin: 0 auto 20px auto;
    overflow: hidden;
  }
  
  .z9 img {
    width: 100%;
    height: 80%;
    display: block;
  }
  
  /* عنوان الخدمة */
  .za {
    font-size: 1.5rem;
    margin-bottom: 20px;
    margin-top: 20px;
    color: #000000;
    text-align: right;


  }
  
  /* وصف الخدمة */
  .zb {
    font-size: 14px;
    color: #000000;
    line-height: 1.6;
    margin-bottom: 15px;
    text-align: right;
  }
  
  /* رابط "اقرأ المزيد" */
  .zc {
    margin-top: 50px;
    display: inline-block;
    color: #2787ee94; /* أزرق */
    text-decoration: none;
    float: right;
    font-size: 16px;

  }
  
  .zc:hover {
    color: #0056b3;
  }
  


  @media (min-width: 992px) {
    .z1 {
      margin: 0 160px; /* من اليمين واليسار */
    }
  }
 
  
  /* ميديا كويري للشاشات الأصغر */
  @media (max-width: 767.98px) {
    .z4 {
      font-size: 26px;
    }
    .z5 {
      font-size: 14px;
    }
    .za {
      font-size: 18px;
    }
    .zb {
      font-size: 13px;
    }
    .z9 {
      width: auto;
      height: auto%;
      margin-bottom: 15px;
    }
  }
  
  
  /* سكشن الخدمات */







/* سكشن آراء العملاء - شكل جديد متناسق */
:root{
  --rev-accent: #1E88E5;
  --rev-accent2:#34D399;
  --rev-border:#eef2f7;
  --rev-text:#111827;
  --rev-muted:#6b7280;
}

.k1{ padding:60px 0; background-color: #fff;}

/* رأس السكشن */
.k3{ margin-bottom:34px; text-align:center; }
.k4{
  font-size:32px; font-weight:800; color:#0a3d66; margin:0 0 8px;
  position:relative; display:inline-block;
}
.k4::after{
  content:""; display:block; height:4px; width:72px; margin:10px auto 0;
  background: linear-gradient(90deg,var(--rev-accent),var(--rev-accent2));
  border-radius:4px;
}
.k5{ font-size:16px; color:var(--rev-muted); margin:8px auto 0; max-width:760px; }

/* الشبكة */
.k6{ row-gap:24px; }
.k7{ margin-bottom:0; }

/* بطاقة الرأي */
.k8{
  background:#fff;
  border:1px solid var(--rev-border);
  border-radius:16px;
  padding:24px;
  min-height: 260px;
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  position:relative;
  display:flex; flex-direction:column; justify-content:center; text-align:right;
  transition: transform .25s ease, box-shadow .25s ease;
}
.k8::before{
  content:""; position:absolute; inset:0 0 auto 0; height:4px;
  background: linear-gradient(90deg,var(--rev-accent),var(--rev-accent2));
  border-radius:16px 16px 0 0;
}
.k8:hover{ transform: translateY(-6px); box-shadow:0 16px 36px rgba(0,0,0,.10); }

/* نسخة متدرّجة للألوان الداكنة */
.k9{
  background: linear-gradient(135deg,#000000 0%, #1E88E5 50%, #000000 100%);

    color:#fff;
  border-color: transparent;
}
.k9::before{ background: rgba(255,255,255,.35); }

/* نسخة بيضاء */
.k10{ background:#fff; color:#333; }

/* علامة الاقتباس */
.ka{
  font-size:44px; font-weight:800; line-height:1; margin:0 0 10px;
  background: linear-gradient(90deg,#ffffff,#dff3ff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.k9 .ka{ background: none; color:#fff; opacity:.9; }

/* النص والاسم */
.kb{ font-size:15px; line-height:1.8; margin:0 0 14px; color:#374151; }
.k9 .kb{ color:#f7fafc; }
.kc{ font-size:18px; font-weight:800; margin:0 0 4px; color:var(--rev-text); }
.k9 .kc{ color:#fff; }
.kd{ font-size:14px; color:var(--rev-muted); }
.k9 .kd{ color:#e8f4ff; }

/* ريسبونسيف */
@media (max-width: 991.98px){
  .k4{ font-size:28px; }
}
@media (max-width: 767.98px){
  .k4{ font-size:24px; }
  .k5{ font-size:14px; }
  .kb{ font-size:14px; }
  .kc{ font-size:16px; }
  .ka{ font-size:34px; }
}





/* contact us section */
/* القسم العام */
.m1{
  padding: 60px 0;
  background-color: #ffffff;
  direction: rtl;
}
@media (min-width: 992px){
  .m1{ margin: 0 160px; } /* يمين/يسار كما وضعت */
}

/* الحاوية */
.m2{}

/* تخطيط الأسطر */
.m3{
  margin-bottom: 30px;
  row-gap: 24px;               /* تقارب مناسب بين الأعمدة */
}

/* عمود النموذج */
.m4{ margin-bottom: 20px; }

/* بطاقات داخلية */
.m5, .m12{
  background-color: #fff;
  border-radius: 10px;
  padding: 24px 24px;
  border: 1px solid #eef2f7;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
}
@media (min-width: 992px){
  .m5, .m12{ height: 100%; }   /* توازن الارتفاع */
}

/* عناوين */
.m6{
  font-size: 24px; font-weight: 700; margin-bottom: 10px; text-align: right;
}
.m7{
  font-size: 14px; color: #666; margin-bottom: 20px; text-align: right;
}

/* الحقول */
.m9{ margin-bottom: 14px; 
text-align: right;
}
.form-control{
  border-radius: 8px;
  min-height: 46px;
  
}
.form-control:focus{
  box-shadow: 0 0 0 .2rem rgba(30,136,229,.15);
  border-color: #1E88E5;
}

/* زر الإرسال */
.m10{
  background-color: #1E88E5;
  color:#fff; padding: 10px 24px;
  border: none; border-radius: 6px; cursor: pointer;
}
.m10:hover{ background-color:#1565C0; }
.m10:focus-visible{ outline:2px solid #1E88E5; outline-offset:2px; }

/* عمود معلومات التواصل */
.m11{
  display:flex; align-items:center; justify-content:center;
  text-align:right;
}
.m12{ width:100%; max-width: 420px; } /* عرض مريح */

/* عناوين فرعية ونصوص */
.m13{ font-size: 20px; font-weight:700; margin-bottom:10px; }
.m14{ font-size:14px; color:#666; margin-bottom:20px; text-align:right; }
.m15{ font-size:16px; font-weight:700; margin-bottom:5px; }
.m16{ font-size:14px; color:#333; margin-bottom:15px; }

/* الخريطة */
.m17{
  margin-top: 20px; border-radius: 8px; overflow: hidden;
}

/* الشاشات الأصغر */
@media (max-width: 767.98px){
  .m6{ font-size: 20px; }
  .m8{ margin-bottom: 20px; }
  .m12{ margin-top: 20px; max-width: 100%; }
}
/* contact us section */






  /* fotter start */

/* حاوية العناصر */
.a1 {
    text-align: center; /* توسيط المحتوى */
    margin: 40px 0;     /* مسافة علوية وسفلية */

  }
  
  /* النص العلوي */
  .a2 {
    font-size: 16px;
    color: #333;
    margin-bottom: 20px; /* مسافة قبل الخط */
  }
  
  /* الخط الفاصل */
  .a3 {
    border: 0;
    height: 1px;
    margin: 20px auto;      /* مسافة قبل وبعد الخط */
    width: 60%;             /* عرض الخط: 60% من الصفحة */
  }
  
  /* النص السفلي */
  .a4 {
    font-size: 14px;
    color: #000000;
    margin-top: 20px; /* مسافة بعد الخط */
    background-color: transparent !important; /* أو لون آخر */

  }
  
    /* fotter end */





/* company description */
.company-description{
  /* حجم مرن بين الموبايل والديسكتوب */
  font-size: clamp(20px, 3vw, 30px);
  font-weight: 800;
  line-height: 1.9;
  text-align: center;

  /* بدل padding الضخم استخدم حاوية بعرض أقصى */
  max-width: 1100px;
  margin: 0 auto 24px;
  padding: 0 20px;

  color: #0B2239;
  position: relative;
}

/* شريط تزييني صغير تحت العنوان */
.company-description::after{
  content: "";
  display: block;
  width: 80px; height: 3px;
  margin: 12px auto 0;
  background: linear-gradient(90deg,#1E88E5,#34D399);
  border-radius: 2px;
}

/* إبراز اسم العلامة */
.company-description .cd-brand{
  color: #1E88E5;
  white-space: nowrap;
}

/* سطر ختامي أخف وزنًا */
.company-description .cd-sub{
  display: block;
  margin-top: 6px;
  font-weight: 600;
  color: #334155;
}

/* الشاشات الصغيرة: لا حاجة لتعديلات إضافية بفضل clamp */
@media (max-width: 767px){
  .company-description{ padding: 0 16px; }
}


/* السكشن مع الخلفية */
.abcd{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  direction: rtl;
  text-align: center;
  color: #fff;

  /* خلفية وصورة متجاوبة */
  background: url("/images/شركة-النظافة-الأولى-في-مصر-وان-كلين\ \(1\).webp") center/cover no-repeat;
  width: 100%;
  min-height: clamp(300px, 42vw, 580px);       /* ارتفاع مرن بدل fixed */
  padding: clamp(24px, 6vw, 56px) 16px;        /* مسافات داخلية مرنة */
}

/* طبقة تعتيم على الصورة (بدون تعديل HTML) */
.abcd::before{
  content:"";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);                 /* درجة التعتيم */
}

/* الحاوية الداخلية للنص */
.efgh{
  position: relative;
  z-index: 1;                                  /* فوق التعتيم */
  width: 100%;
  max-width: 1100px;                           /* عرض أقصى */
  margin: 0 auto;
  padding: clamp(16px, 3vw, 36px) clamp(16px, 4vw, 48px);
  border-radius: 12px;
  background: rgba(0,0,0,.30);                 /* تظليل خفيف حول النص */
  backdrop-filter: blur(2px);                  /* لمسة نعومة (اختياري) */
}

/* العنوان */
.ijkl{
  font-size: clamp(22px, 3.2vw, 32px);
  line-height: 1.4;
  font-weight: 800;
  margin: 0 0 10px;
}

/* الفقرة */
.mnop{
  font-size: clamp(14px, 1.6vw, 18px);
  line-height: 2;
  margin: 0 auto;                              /* توسيط */
  max-width: 900px;                            /* سطر طويل مريح للقراءة */
  color: #fff;                                 /* وضوح على الخلفية */
}

/* تحسينات للجوال */
@media (max-width: 480px){
  .efgh{ padding: 18px 16px; border-radius: 10px; }
}





  /* ======= Footer styles ======= */
:root{
  --ocf-bg:#0B2239;         /* خلفية غامقة أنيقة */
  --ocf-fg:#E6EEF6;         /* نص فاتح */
  --ocf-muted:#A8B6C6;      /* نص أخف */
  --ocf-accent:#20B8E6;     /* أزرق براند */
  --ocf-green:#34D399;      /* أخضر براند */
  --ocf-max:1200px;
}

.oc-footer{
  background: var(--ocf-bg);
  color: var(--ocf-fg);
  padding-top: 48px;
  padding-bottom: 24px;
}
.ocf-container{
  max-width: var(--ocf-max);
  margin: 0 auto;
  padding: 0 16px;
}
.ocf-cols{
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}
@media (min-width: 576px){
  .ocf-cols{ grid-template-columns: repeat(2,1fr); }
}
@media (min-width: 992px){
  .ocf-cols{ grid-template-columns: repeat(4,1fr); }
}

.ocf-col{ text-align: right; }

.ocf-logo img{ display:block; height:auto; }
.ocf-desc{
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--ocf-muted);
}

.ocf-title{
  font-size: 18px; margin: 0 0 12px;
  color: #fff; font-weight: 700;
}

.ocf-list{ list-style: none; margin: 0; padding: 0; }
.ocf-list li{ margin: 6px 0; }
.ocf-list a{
  color: var(--ocf-fg); text-decoration: none; font-size: 15px;
}
.ocf-list a:hover{ color: var(--ocf-accent); text-decoration: underline; }

/* تواصل */
.ocf-contact{ list-style:none; margin:0; padding:0; }
.ocf-contact li{ margin: 8px 0; display:flex; align-items:center; gap:8px; }
.ocf-contact i{ width:18px; text-align:center; color: var(--ocf-accent); }
.ocf-contact a{ color: var(--ocf-fg); text-decoration:none; }
.ocf-contact a:hover{ color: var(--ocf-accent); text-decoration: underline; }

/* السوشيال */
.ocf-social{ display:flex; align-items:center; gap:10px; }
.ocf-social-link{
  width:38px; height:38px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.06);
  color:#fff; text-decoration:none; transition:.2s ease;
  border:1px solid rgba(255,255,255,.12);
}
.ocf-social-link:hover{ transform: translateY(-2px); background: rgba(255,255,255,.12); }
.ocf-fb{ color:#fff; }
.ocf-ig{ color:#fff; }
.ocf-tt{ color:#fff; }

/* الأسفل */
.ocf-bottom{
  border-top: 1px solid rgba(255,255,255,.08);
  margin-top: 28px; padding-top: 16px;
  text-align: center;
  color: var(--ocf-muted);
  font-size: 14px;
}

/* مساعد وصول لعنونة مخفية */
.visually-hidden{
  position:absolute !important; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}




/* ======= Previous Works styles ======= */
:root{
  --gpt-primary:#04025a;
  --gpt-shadow:rgba(0,0,0,.08);
  --gpt-max:1200px;
}

/* القسم العام */
.gpt1{ padding:50px 0; background:#fff; }
.gpt-wrap{ max-width:var(--gpt-max); margin:0 auto; padding:0 20px; }

/* العنوان */
.company-description{ margin:0 0 18px; font-weight:800; font-size:28px; text-align:center; }

/* الشبكة */
.gpt3{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap:16px;
}
.gpt4{
  border-radius:12px;
  overflow:hidden;
  background:#f6f8fb;
  border:1px solid #eef2f7;
  box-shadow:0 10px 24px var(--gpt-shadow);
}
.gpt5{
  width:100%; display:block;
  aspect-ratio: 4 / 3;        /* ثبات الارتفاع */
  object-fit: cover;
  transition: transform .25s ease;
}
.gpt4:hover .gpt5{ transform: scale(1.04); }

/* زر اكتشف أكثر */
.gpt-cta{ text-align:center; margin-top:22px; }
.gpt-btn{
  display:inline-block; padding:12px 24px; border-radius:8px;
  background:var(--gpt-primary); color:#fff; text-decoration:none; font-size:16px;
  box-shadow:0 6px 18px rgba(4,2,90,.25);
}
.gpt-btn:hover{ filter:brightness(.95); }

/* لايت بوكس */
.gpt-lightbox{
  position:fixed; inset:0; background:rgba(0,0,0,.6);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:.2s ease;
  z-index: 1100;
}
.gpt-lightbox.is-open{ opacity:1; pointer-events:auto; }
.gpt-lightbox img{
  max-width:92vw; max-height:86vh; border-radius:10px; box-shadow:0 12px 36px rgba(0,0,0,.35);
}
.gpt-lightbox-close{
  position:absolute; top:14px; left:18px;   /* RTL: زر الإغلاق يسار */
  background:rgba(255,255,255,.9); border:0; width:40px; height:40px; border-radius:8px;
  font-size:26px; line-height:1; cursor:pointer;
}

/* موبايل */
@media (max-width:575.98px){
  .company-description{ font-size:22px; }
}



/*
محتوى صفحات الخدمات 
*/

  .c-hero-title{ font-size: clamp(22px,3.2vw,34px); font-weight:800; margin:0 0 8px; color:#0B2239; }
.c-hero-intro{ font-size: clamp(14px,1.6vw,18px); line-height:2; color:#334155; margin:0 0 10px; }
.c-hero-highlights{ display:flex; flex-wrap:wrap; gap:8px 14px; padding:0; margin:8px 0 0; list-style:none; }
.c-hero-highlights li{ background:#F1F5F9; border:1px solid #E2E8F0; border-radius:999px; padding:6px 12px; font-size:14px; }

.c-details, .c-steps, .c-portfolio{ margin-top:24px; }
.c-details h2, .c-steps h2, .c-portfolio h2, .c-cta-title{ font-size: clamp(18px,2.6vw,26px); margin:0 0 8px; color:#0B2239; }
.c-bullets{ padding-inline-start:18px; margin:8px 0; }
.c-steps ol{ padding-inline-start:22px; line-height:2; }

.c-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; }
.c-grid figure{ margin:0; border:1px solid #eef2f7; border-radius:10px; overflow:hidden; background:#fff; }
.c-grid img{ width:100%; display:block; aspect-ratio:4/3; object-fit:cover; }
.c-grid figcaption{ font-size:13px; padding:8px 10px; color:#475569; }

.c-cta{ text-align:center; margin-top:26px; }
.c-btn{ display:inline-block; padding:12px 22px; border-radius:10px; background:#04025a; color:#fff; text-decoration:none; }
.c-btn:hover{ filter:brightness(.95); }
.c-cta-note{ font-size:14px; color:#475569; margin-top:8px; }

.c-related a{ color:#0B2239; text-decoration:none;  }
.c-related a:hover{ text-decoration:underline; }

.c-image{ width:100%; height:auto; display:block; border-radius:10px; }


.c-details h2,
.c-steps h2,
.c-portfolio h2,
.c-cta .c-cta-title{
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 800;
}


/*
محتوى صفحات الخدمات 
*/