/* إعدادات عامة */
body, html {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}



/*fixed icons*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  .fixed-icons {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 1000;
  }
  
  .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  
  .icon svg {
    width: 24px;
    height: 24px;
    fill: #ffffff;
  }
  
  .icon:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
  }
  
  .phone-icon {
    background-color: #0d6efd; /* لون الاتصال */
    color: #fff;
  }
  
  .whatsapp-icon {
    background-color: #25d366; /* لون واتساب */
    color: #fff;
  }
  
/*fixed icons*/




/*start header*/
.slider {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.slide {
    position: relative;
    width: 100%;
    height: 100%;
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* شفافية اللون الأسود */
    z-index: 1;
}

.caption {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.7);
    z-index: 2;
    text-align: center;
}

.caption h1 {
    font-size: 60px;
    margin: 0;
}

.caption p {
    font-size: 40px;
    margin: 0.5rem 0 0;
}
  /*end*/







  /* who us */ 
  /* إعدادات عامة */
.content {
    padding: 20px;
    text-align: center;
    color: #000; /* لون النص */
  }
  
  .content h1 {
    font-size: 24px;
    color: #003399; /* لون أزرق غامق */
    margin-bottom: 15px;
    font-weight: bold;
  }
  
  .content h2 {
    font-size: 22px;
    color: #003399; /* لون أزرق غامق */
    margin: 20px 0;
    font-weight: bold;
  }
  
  .content p {
    font-size: 20px;
    line-height: 1.8;
    margin-bottom: 15px;
  }
  
  /* استجابة للتصميم */
  @media (max-width: 768px) {
    .content h1, .content h2 {
      font-size: 18px;
    }
  
    .content p {
      font-size: 14px;
    }
  }

    /* who us */ 








    .m1 {
        padding: 20px;
        background-color: #f9f9f9;
        text-align: center;
      }
      
      .m2 {
        font-size: 24px;
        color: #003399;
        margin-bottom: 20px;
      }
      
      .m3 {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 20px;
      }
      
      .m4 {
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 15px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s, box-shadow 0.3s;
      }
      
      .m4:hover {
        transform: translateY(-5px);
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
      }
      
      .m4 img {
        width: 100%;
        border-radius: 8px;
      }
      
      .m5 {
        font-size: 18px;
        color: #003399;
        margin: 15px 0 10px;
      }
      
      .m6 {
        font-size: 14px;
        line-height: 1.6;
        color: #555;
        margin-bottom: 15px;
      }
      
      .m7 {
        display: inline-block;
        padding: 10px 15px;
        font-size: 14px;
        color: #003399;
        border: 2px solid #003399;
        background: none;
        border-radius: 5px;
        text-decoration: none;
        transition: background 0.3s, color 0.3s;
      }
      
      .m7:hover {
        background: #003399;
        color: #fff;
      }











/* إعدادات القسم */
.works {
  text-align: center;
  padding: 20px;
  background-color: #f9f9f9;
}

.works-title {
  font-size: 24px;
  color: #003399;
  margin-bottom: 20px;
}

/* إعدادات الكاروسيل */
.carousel {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
}

.carousel-track-container {
  overflow: hidden;
  border-radius: 10px;
}

.carousel-track {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.carousel-slide {
  min-width: 100%;
  transition: opacity 0.5s ease-in-out;
}

.carousel-slide img {
  width: 100%;
  display: block;
  border-radius: 10px;
}

/* الأزرار */
.prev-btn,
.next-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: #003399;
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 20px;
  padding: 10px;
  border-radius: 50%;
}

.prev-btn {
  left: 10px;
}

.next-btn {
  right: 10px;
}

.prev-btn:hover,
.next-btn:hover {
  background-color: #0056cc;
}

/* زر مشاهدة الكل */
.works-button {
  margin-top: 20px;
}

.view-all-btn {
  display: inline-block;
  padding: 10px 20px;
  background-color: #003399;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s;
}

.view-all-btn:hover {
  background-color: #0056cc;
}







/* Start About */
.projects-section {
    background-color: #fff;
    padding: 50px 5%;
    text-align: center;
  }
  
  .section-title {
    font-size: 2rem;
    color: #4a4a4a;
    margin-bottom: 30px;
    font-family: "Tajawal", sans-serif;
  }
  
  .projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
  }
  
  .project-card {
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out;
  }
  
  .project-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  
  .project-card:hover {
    transform: scale(1.05);
  }
  
  .view-more-btn {
    display: inline-block;
    margin-top: 30px;
    padding: 10px 20px;
    background-color: #0427c2;
    color: #fff;
    border-radius: 5px;
    text-decoration: none;
    font-size: 1rem;
    transition: background-color 0.3s;
  }
  
  .view-more-btn:hover {
    background-color: #0c1e5a;
  }
  
  /* تصميم متجاوب */
  @media screen and (max-width: 768px) {
    .projects-grid {
      grid-template-columns: 1fr;
    }
  }
  /* End About */








  /* إعدادات قسم الإحصائيات */
.statistics {
    position: relative;
    text-align: center;
    padding: 50px 20px;
    background: url('images/2.jpg') no-repeat center center/cover;
    color: white;
  }
  
  .statistics-overlay {
    background-color: rgba(0, 0, 0, 0.7); /* طبقة شفافة */
    padding: 40px;
    border-radius: 10px;
  }
  
  .statistics-title {
    font-size: 28px;
    margin-bottom: 20px;
    color: #00aaff;
  }
  
  .statistics-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
  }
  
  .stat-item {
    background-color: #003366;
    padding: 20px 30px;
    border-radius: 10px;
    flex: 1;
    min-width: 150px;
    max-width: 250px;
  }
  
  .stat-number {
    font-size: 36px;
    font-weight: bold;
    color: #00c0ff;
  }
  
  .stat-label {
    margin-top: 10px;
    font-size: 16px;
    color: #e0e0e0;
  }







  /* إعدادات قسم التواصل */
.contact-us {
    background-color: #000; /* خلفية سوداء */
    color: #fff;
    text-align: center;
    padding: 50px 20px;
  }
  
  .contact-container {
    max-width: 800px;
    margin: 0 auto;
  }
  
  .contact-description {
    font-size: 18px;
    margin-bottom: 30px;
    line-height: 1.8;
  }
  
  .contact-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
  }
  
  .contact-button {
    padding: 10px 20px;
    border-radius: 30px;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    transition: background-color 0.3s;
  }
  
  .contact-button.whatsapp {
    background-color: #25d366; /* لون واتساب */
  }
  
  .contact-button.whatsapp:hover {
    background-color: #1ebd5a;
  }
  
  .contact-button.call {
    background-color: #0056b3; /* لون الاتصال */
  }
  
  .contact-button.call:hover {
    background-color: #00408a;
  }
  
  .contact-address {
    font-size: 16px;
    margin-top: 20px;
  }
  
  .contact-logo {
    display: flex;
    justify-content: center;
    margin-top: 30px;
  }
  
  .contact-logo img {
    width: 150px;
  }

















  /* who usssss page start*/
.t1 {
    position: relative;
    width: 100%;
    height: 400px; /* يمكن تعديل الارتفاع حسب الحاجة */
    background-image: url('images/2.jpg'); /* استبدل "your-image.jpg" بمسار الصورة */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  
  /* طبقة التعتيم */
  .t2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* تأثير التعتيم */
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  /* تصميم النص */
  .t3 {
    font-size: 2.5rem;
    color: #fff;
    font-family: "Tajawal", "Cairo", sans-serif;
    text-align: center;
  }






  .content-section {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 20px;
    padding: 20px;
}

.image-container {
    flex: 1;
    max-width: 500px;
}

.image-container img {
    width: 100%;
    height: auto;
    border: 2px solid #ddd;
    border-radius: 10px;
}

.text-container {
    flex: 2;
    color: #333;
    font-family: Arial, sans-serif;
    line-height: 1.8;
}

.text-container h2 {
    color: #0056b3;
    margin-bottom: 10px;
}

.text-container ul {
    list-style: disc inside;
    margin: 0;
    padding: 0;
}

.text-container ul li {
    margin-bottom: 10px;
}

.text-container ul li {
    margin-bottom: 20px; /* زيادة الفراغ بين عناصر القائمة */
}















.mx1 {
  max-width: 900px;
  margin: 50px auto;
  padding: 20px;
  background-color: white;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.mx1 h1 {
  font-size: 36px;
  color: #0d1770;
  margin-bottom: 20px;
  font-weight: bold;
}

.mx1 h2 {
  font-size: 28px;
  color: #0d1770;
  margin-bottom: 15px;
  font-weight: bold;

}

.mx1 h3 {
  font-size: 24px;
  color: #0d1770;
  margin-top: 20px;
}

.mx1 p {
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 15px;
}


















.mx2 {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: center;
  padding: 20px;
  background-color: #f9f9f9;
}

.card {
  width: 200px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  text-align: center;
  font-family: Arial, sans-serif;
}

.card img {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.card h4 {
  font-size: 16px;
  color: #0044cc;
  margin: 10px 0;
}

.card p {
  font-size: 14px;
  color: #333;
  margin-bottom: 10px;
}








.xx1 {
  display: flex;
  gap: 20px;
  max-width: 1200px;
  margin: 30px auto;
  font-family: Arial, sans-serif;
}

.image-section {
  flex: 1;
  text-align: center;
  background-color: #f9f9f9;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.image-section img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.image-section h2 {
  font-size: 20px;
  color: #333;
  margin: 15px 0;
}

.contacts {
  display: flex;
  justify-content: center;
  gap: 15px;
  font-size: 16px;
  color: #0044cc;
}

.text-section {
  flex: 2;
  background-color: #ffffff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.text-section h3 {
  font-size: 22px;
  color: #0044cc;
  margin-bottom: 15px;
}

.text-section ul {
  list-style-type: disc;
  padding-left: 20px;
  line-height: 1.8;
  font-size: 16px;
  color: #555;
}

.text-section ul li {
  margin-bottom: 10px;
}
/* =========================
   PREMIUM REDESIGN 2026
   ========================= */
:root{
  --navy:#071a36;--navy2:#0b2d5f;--blue:#0d6efd;--cyan:#31b8ff;--ink:#152238;
  --muted:#637083;--soft:#f5f8fc;--line:#e6edf5;--white:#fff;--radius:22px;
  --shadow:0 18px 50px rgba(7,26,54,.12);
}
html{scroll-behavior:smooth}
body,html{font-family:"Tajawal",Arial,sans-serif!important;background:#fff;color:var(--ink)}
a{text-decoration:none}
img{max-width:100%}
.site-shell{width:min(1180px,calc(100% - 36px));margin-inline:auto}
.top-strip{background:var(--navy);color:#dce9f8;font-size:14px}
.top-strip-inner{min-height:38px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.top-links{display:flex;align-items:center;gap:10px}.top-strip a{color:#fff;font-weight:700}.sep{opacity:.45}
.site-header{position:sticky;top:0;z-index:1500;box-shadow:0 8px 28px rgba(7,26,54,.08)}
.site-nav{background:rgba(255,255,255,.97);backdrop-filter:blur(12px)}
.nav-inner{height:84px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand img{height:62px;width:auto;object-fit:contain}
.nav-menu{display:flex;align-items:center;gap:7px}.nav-menu>a{color:#26364c;font-weight:700;padding:11px 12px;border-radius:12px;transition:.25s}
.nav-menu>a:hover,.nav-menu>a.active{color:var(--blue);background:#eef5ff}.nav-menu .nav-wa{color:#168a47}
.nav-menu .nav-cta{background:linear-gradient(135deg,var(--blue),#074bb6);color:#fff;padding-inline:19px;box-shadow:0 10px 22px rgba(13,110,253,.24)}
.nav-menu .nav-cta:hover{color:#fff;transform:translateY(-2px);background:linear-gradient(135deg,#0c63e4,#063d95)}
.menu-toggle{display:none;border:0;background:transparent;width:44px;height:44px;border-radius:12px;padding:10px;cursor:pointer}.menu-toggle span{display:block;height:2px;background:var(--navy);margin:5px 0;border-radius:9px}

.slider{height:min(78vh,720px);min-height:520px}.slide:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,19,42,.22),rgba(5,19,42,.72));z-index:1}.overlay{background:linear-gradient(180deg,rgba(5,18,38,.20),rgba(5,18,38,.50))!important}.caption{width:min(930px,90%);text-align:right;right:50%;left:auto;transform:translate(50%,-50%)}
.caption h1{font-size:clamp(52px,7vw,92px);font-weight:900;letter-spacing:-2px;line-height:.95}.caption p{font-size:clamp(24px,3vw,42px);font-weight:600;margin-top:18px}.hero-actions{display:flex;gap:14px;margin-top:30px}.hero-actions a{padding:14px 24px;border-radius:14px;font-weight:800;font-size:17px}.hero-primary{background:#fff;color:var(--navy);box-shadow:var(--shadow)}.hero-secondary{border:1px solid rgba(255,255,255,.58);color:#fff;background:rgba(255,255,255,.09);backdrop-filter:blur(8px)}

.content{max-width:1040px;margin:0 auto;padding:80px 24px!important}.content h1,.content h2{color:var(--navy)!important;line-height:1.35}.content h1{font-size:clamp(30px,4vw,46px)!important}.content h2{font-size:clamp(24px,3vw,32px)!important;margin-top:28px!important}.content p{color:#506074;font-size:18px!important;line-height:2!important}
.m1{padding:80px max(5%,20px)!important;background:var(--soft)!important}.m2,.section-title{font-size:clamp(32px,4vw,44px)!important;color:var(--navy)!important;font-weight:900!important;margin-bottom:34px!important}.m3{max-width:1180px;margin:auto;gap:22px!important}.m4{padding:0!important;overflow:hidden;border:1px solid var(--line)!important;border-radius:var(--radius)!important;box-shadow:0 14px 32px rgba(7,26,54,.07)!important;text-align:right}.m4:hover{transform:translateY(-8px)!important;box-shadow:var(--shadow)!important}.m4 img{height:230px;object-fit:cover;border-radius:0!important}.m5,.m6,.m7{margin-inline:20px!important}.m5{font-size:22px!important;color:var(--navy)!important;margin-top:20px!important}.m6{font-size:15.5px!important;color:var(--muted)!important;line-height:1.9!important}.m7{margin-bottom:22px!important;border:0!important;background:#eef5ff!important;color:var(--blue)!important;font-weight:800;padding:11px 16px!important;border-radius:11px!important}.m7:hover{background:var(--blue)!important;color:#fff!important}
.projects-section{padding:80px max(5%,20px)!important}.projects-grid{max-width:1180px;margin:auto;grid-template-columns:repeat(12,1fr)!important;grid-auto-rows:190px}.project-card{border-radius:18px!important;box-shadow:none!important}.project-card:nth-child(1){grid-column:span 7;grid-row:span 2}.project-card:nth-child(2){grid-column:span 5}.project-card:nth-child(3){grid-column:span 5}.project-card:nth-child(4),.project-card:nth-child(5){grid-column:span 6}.project-card img{transition:.45s}.project-card:hover img{transform:scale(1.06)}.view-more-btn{margin-top:34px!important;background:var(--navy)!important;border-radius:13px!important;padding:14px 23px!important;font-weight:800!important}
.statistics{padding:80px 20px!important;background-attachment:fixed}.statistics-overlay{max-width:1100px;margin:auto;padding:48px!important;border-radius:28px!important;background:rgba(4,17,37,.84)!important;backdrop-filter:blur(8px)}.statistics-title{font-size:36px!important;color:#fff!important;font-weight:900}.statistics-container{gap:16px!important}.stat-item{background:rgba(255,255,255,.08)!important;border:1px solid rgba(255,255,255,.12);padding:28px!important;border-radius:18px!important}.stat-number{color:#fff!important}.stat-label{color:#dbe8f6!important}

.contact-us{position:relative;overflow:hidden;background:linear-gradient(135deg,#06162f,#0b3671)!important;padding:84px 20px!important}.contact-us:before{content:"";position:absolute;width:380px;height:380px;border-radius:50%;background:rgba(49,184,255,.12);top:-190px;left:-110px}.contact-container{position:relative;z-index:1;max-width:930px!important}.cta-kicker{display:inline-block;color:#9edbff;font-weight:800;margin-bottom:10px}.cta-title{font-size:clamp(30px,4vw,48px);font-weight:900;line-height:1.35;margin:0 0 18px}.contact-description{color:#d9e8f6;font-size:18px!important;max-width:800px;margin-inline:auto}.contact-buttons{margin-top:28px!important}.contact-button{min-width:160px;padding:14px 22px!important;border-radius:13px!important}.contact-address{color:#bcd0e6}.contact-logo{display:none!important}
.site-footer{background:#030d1d;color:#b8c8db}.footer-grid{display:grid;grid-template-columns:1.4fr .8fr 1fr;gap:50px;padding:60px 0}.footer-brand img{width:150px;margin-bottom:18px;filter:brightness(0) invert(1)}.footer-brand p{max-width:470px;line-height:1.9}.site-footer h3{color:#fff;font-size:19px;margin-bottom:18px}.site-footer a,.site-footer p{display:block;color:#b8c8db;margin:9px 0;line-height:1.7}.site-footer a:hover{color:#fff}.footer-bottom{text-align:center;border-top:1px solid rgba(255,255,255,.08);padding:18px 20px;color:#8296ad;font-size:14px}

.fixed-icons{right:auto!important;left:18px!important;bottom:22px!important;gap:12px!important}.icon{width:54px!important;height:54px!important;box-shadow:0 12px 28px rgba(0,0,0,.2)!important}

/* inner pages */
.t1{height:360px!important}.t2{background:linear-gradient(90deg,rgba(5,18,38,.45),rgba(5,18,38,.76))!important}.t3{font-size:clamp(38px,5vw,58px)!important;font-weight:900}.content-section{max-width:1180px;margin:70px auto!important;padding:0 24px!important;gap:44px!important;align-items:center!important}.image-container img{border:0!important;border-radius:22px!important;box-shadow:var(--shadow)}.text-container{font-family:"Tajawal",sans-serif!important;color:var(--muted)!important}.text-container h2{color:var(--navy)!important;font-weight:900}.mx1{max-width:1080px!important;margin:70px auto!important;border-radius:22px;box-shadow:var(--shadow)!important;padding:38px!important}.mx1 h1,.mx1 h2,.mx1 h3{color:var(--navy)!important}.mx2{padding:60px 20px!important}.card{width:260px!important;border:1px solid var(--line)!important;border-radius:18px!important;box-shadow:0 10px 28px rgba(7,26,54,.07)!important;font-family:"Tajawal",sans-serif!important}.card img{height:190px!important}.card h4{font-size:18px!important;color:var(--navy)!important}.xx1{max-width:1180px!important;margin:70px auto!important;padding:0 20px}.image-section{border-radius:22px!important;box-shadow:var(--shadow)!important}

@media(max-width:900px){
 .top-strip{display:none}.site-header{top:0}.nav-inner{height:72px}.brand img{height:50px}.menu-toggle{display:block}.nav-menu{position:absolute;top:72px;right:18px;left:18px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);border-radius:18px;padding:14px;display:none;flex-direction:column;align-items:stretch}.nav-menu.is-open{display:flex}.nav-menu>a{text-align:right;padding:13px 14px}.nav-menu .nav-cta{text-align:center}.slider{min-height:500px;height:68vh}.caption{text-align:center}.hero-actions{justify-content:center;flex-wrap:wrap}.projects-grid{grid-template-columns:1fr 1fr!important;grid-auto-rows:200px}.project-card,.project-card:nth-child(n){grid-column:span 1!important;grid-row:span 1!important}.project-card:first-child{grid-column:span 2!important}.footer-grid{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}.content-section,.xx1{flex-direction:column!important}
}
@media(max-width:600px){
 .site-shell{width:min(100% - 24px,1180px)}.slider{min-height:460px}.caption h1{font-size:48px}.caption p{font-size:23px}.hero-actions a{width:100%}.content{padding:58px 18px!important}.m1,.projects-section{padding:58px 14px!important}.m3{grid-template-columns:1fr!important}.projects-grid{grid-template-columns:1fr!important;grid-auto-rows:220px}.project-card,.project-card:first-child,.project-card:nth-child(n){grid-column:span 1!important}.statistics-overlay{padding:28px 16px!important}.statistics-container{flex-direction:column}.stat-item{max-width:none!important;width:100%}.contact-buttons{flex-direction:column}.contact-button{width:100%}.footer-grid{grid-template-columns:1fr;gap:28px;padding:44px 0}.footer-brand{grid-column:auto}.fixed-icons{left:12px!important;bottom:14px!important}.icon{width:50px!important;height:50px!important}.mx1{margin:45px 12px!important;padding:24px!important}.t1{height:280px!important}
}


/* =========================
   GALLERY + SERVICES UPDATE 2026
   ========================= */
.section-head{max-width:850px;margin:0 auto 34px;text-align:center}
.section-kicker{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:#eaf4ff;color:var(--blue);font-weight:800;font-size:14px;margin-bottom:14px}
.section-lead{font-size:17px;line-height:1.95;color:var(--muted);margin:0 auto;max-width:840px}
.services-showcase .site-shell{width:min(1180px,calc(100% - 36px));margin-inline:auto}
.service-card-pro{position:relative;background:#fff}
.service-media-wrap{position:relative;overflow:hidden}
.service-media-wrap:after,.project-card:after,.gallery-photo-card:after{content:"اضغط للتكبير";position:absolute;inset:auto 16px 16px auto;background:rgba(7,26,54,.78);color:#fff;padding:8px 12px;border-radius:999px;font-size:13px;font-weight:700;opacity:0;transform:translateY(10px);transition:.3s;z-index:2}
.service-card-pro:hover .service-media-wrap:after,.project-card:hover:after,.gallery-photo-card:hover:after{opacity:1;transform:translateY(0)}
.service-badge{position:absolute;top:16px;right:16px;z-index:2;background:rgba(255,255,255,.94);color:var(--navy);font-size:13px;font-weight:800;padding:8px 12px;border-radius:999px;box-shadow:0 10px 24px rgba(7,26,54,.12)}
.service-card-body{padding-bottom:22px}
.service-list-mini,.detail-list{list-style:none;padding:0!important;margin:18px 20px 0!important}
.service-list-mini li,.detail-list li{position:relative;padding-right:24px;margin-bottom:12px;color:#4f5f73;line-height:1.85}
.service-list-mini li:before,.detail-list li:before{content:"➜";position:absolute;right:0;top:0;color:var(--blue);font-weight:900}
.fancy-arrow-link{display:inline-flex!important;align-items:center;gap:8px}
.fancy-arrow-link:after,.detail-action:after,.view-more-btn:after,.hero-primary:after,.hero-secondary:after{content:"←";font-size:18px;line-height:1;transition:transform .25s ease}
.fancy-arrow-link:hover:after,.detail-action:hover:after,.view-more-btn:hover:after,.hero-primary:hover:after,.hero-secondary:hover:after{transform:translateX(-5px)}
.fancy-arrow-link{margin-top:8px}
.project-card,.gallery-photo-card,.service-media-wrap img,.image-section img{position:relative;cursor:zoom-in}
.gallery-head{margin-bottom:30px}
.works-gallery-shell{padding:70px 0 30px;background:linear-gradient(180deg,#f7fbff 0%,#fff 100%)}
.works-only-images{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px!important;justify-content:stretch!important;padding:0!important;background:none!important}
.gallery-photo-card{width:auto!important;padding:0!important;overflow:hidden}
.gallery-photo-card img{height:220px!important;transition:transform .45s ease}
.gallery-photo-card:hover img{transform:scale(1.06)}
.image-only-card h4,.image-only-card p{display:none!important}
.service-detail-layout{align-items:start}
.service-detail-media{background:linear-gradient(180deg,#f7fbff,#ffffff)!important;border:1px solid var(--line)}
.service-preview-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:18px}
.service-preview-meta span{padding:8px 12px;border-radius:999px;background:#eef5ff;color:var(--blue);font-size:13px;font-weight:800}
.service-detail-copy{border:1px solid var(--line);border-radius:22px!important;box-shadow:var(--shadow)!important}
.detail-badge{display:inline-flex;padding:8px 14px;border-radius:999px;background:#eef5ff;color:var(--blue);font-weight:800;font-size:14px;margin-bottom:16px}
.detail-intro{font-size:17px;line-height:2;color:var(--muted);margin:0 0 18px}
.detail-highlights{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:26px}
.detail-mini-card{padding:18px;border:1px solid var(--line);border-radius:18px;background:#f9fbfe}
.detail-mini-card strong{display:block;color:var(--navy);font-size:17px;margin-bottom:10px}
.detail-mini-card span{display:block;color:var(--muted);line-height:1.85;font-size:14px}
.detail-action{display:inline-flex;align-items:center;gap:8px;margin-top:26px;padding:13px 18px;border-radius:14px;background:var(--navy);color:#fff;font-weight:800}
.detail-action:hover{background:var(--blue);color:#fff}
.lightbox-backdrop{position:fixed;inset:0;background:rgba(2,10,21,.88);backdrop-filter:blur(8px);z-index:4000;display:none;align-items:center;justify-content:center;padding:24px}
.lightbox-backdrop.is-open{display:flex}
.lightbox-panel{position:relative;max-width:min(1100px,94vw);max-height:90vh;display:flex;align-items:center;justify-content:center}
.lightbox-image{max-width:100%;max-height:82vh;border-radius:20px;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.lightbox-close,.lightbox-nav{position:absolute;border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:50%;color:#fff;background:rgba(255,255,255,.14);backdrop-filter:blur(8px);box-shadow:0 12px 32px rgba(0,0,0,.24)}
.lightbox-close{top:-10px;left:-10px;width:48px;height:48px;font-size:28px}
.lightbox-nav{top:50%;transform:translateY(-50%);width:54px;height:54px;font-size:32px}
.lightbox-prev{right:calc(100% + 18px)}
.lightbox-next{left:calc(100% + 18px)}
.lightbox-caption{position:absolute;bottom:-54px;right:50%;transform:translateX(50%);color:#fff;background:rgba(255,255,255,.12);padding:10px 16px;border-radius:999px;font-size:14px;max-width:90vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:900px){
  .detail-highlights{grid-template-columns:1fr}
  .works-only-images{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lightbox-prev{right:12px;top:auto;bottom:-68px;transform:none}
  .lightbox-next{left:12px;top:auto;bottom:-68px;transform:none}
  .lightbox-close{top:12px;left:12px}
  .lightbox-panel{padding-bottom:84px}
}
@media(max-width:600px){
  .section-lead{font-size:15px}
  .gallery-photo-card img{height:190px!important}
  .works-only-images{grid-template-columns:1fr}
  .lightbox-caption{position:static;transform:none;margin-top:14px;white-space:normal;text-align:center}
  .lightbox-panel{flex-direction:column}
}