/* أساسيات */
:root{
  --blue-900:#001a35; --blue-800:#2c455c; --blue-600:#1d5ca1; --blue-400:#4a90e2;
  --silver:#eef2f7; --gray:#f6f8fb; --white:#ffffff; --text:#1a1a1a; --muted:#015cfa;
  --radius:16px; --shadow:0 12px 32px rgba(0,0,0,.08);
  --glass:rgba(255,255,255,.92);
}
*{box-sizing:border-box}
html,body{scroll-behavior:smooth}
body{font-family:'Tajawal',sans-serif;margin:0;background:var(--white);color:var(--text);overflow-x:hidden}

/* حاويات */
.container{width:min(1180px,92%);margin-inline:auto}
.container-narrow{width:min(900px,92%);margin-inline:auto}

/* الهيدر بخلفية صورة + تدرج شفاف متحرك */
.navbar{
  position:fixed;top:0;inset-inline:0;z-index:1000;
  background:transparent;border-bottom:1px solid rgba(255,255,255,.12)
}
.navbar::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:url("/mnt/data/14ff9176-8038-4846-be56-c9c3f0f4419e.png") center/cover no-repeat;
  filter:brightness(.8);
}
.navbar::after{
  content:"";position:absolute;inset:0;z-index:-1;opacity:.8;
  background:linear-gradient(120deg, rgba(6, 44, 80, 0.863), rgba(14, 80, 150, 0.74), rgba(79, 149, 230, 0.637));
  background-size:200% 200%;animation:navGrad 10s ease infinite;
  backdrop-filter:saturate(120%) blur(4px);
}
@keyframes navGrad{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
.nav-inner{min-height:78px;display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:12px}
.logo img{width:52px;height:52px;border-radius:12px;object-fit:cover}
.logo .brand h1{color:#fff;font-size:20px;margin:0}
.logo .brand small{color:#d9e6ff;display:block;margin-top:-2px}
.desktop-nav{display:flex;gap:24px}
.desktop-nav a{color:#fff;text-decoration:none;font-weight:700;transition:.25s}
.desktop-nav a:hover{color:#bcd6ff}
.menu-toggle{display:none;background:rgba(255,255,255,.9);border:1px solid #e8eef6;border-radius:12px;width:44px;height:44px}
.menu-toggle i{font-style:normal;font-weight:800}
.mobile-nav{display:none;flex-direction:column;padding:10px 16px;border-top:1px solid rgba(255,255,255,.2);background:rgba(13,59,102,.96)}
.mobile-nav a{padding:10px;border-radius:10px;color:#fff;text-decoration:none}
.mobile-nav a:hover{background:rgba(255,255,255,.08)}

/* مسافة أعلى الصفحة لأن الهيدر ثابت */

/* الهيدر العلوي */
/* الهيدر العلوي البسيط */
/* الهيدر العلوي */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 44px;
  background-color: #0b1d3a;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.topbar .social-icons {
  display: flex;
  gap: 20;
}
.topbar .social-icons a {
  color: #ffffff;
  font-size: 18px;
  transition: color 0.3s ease, transform 0.3s ease;
}
.topbar .social-icons a:hover {
  color: #4a90e2;
  transform: translateY(-3px);
}
.navbar {
  top: 44px;
}


/* الهيدر الأساسي تحته مباشرة */
.navbar {
  top: 44px;
}

/* تعديل المسافة في القسم الرئيسي */
.hero {
  padding-top: 160px; /* بدل 110px */
}

/* لتعديل موضع الهيدر الأساسي تحته */
.navbar {
  top: 42px;
}

/* ضبط الهيدر الأساسي لينزل تحت الشريط */
.navbar {
  top: 42px;
}

.hero{padding-top:110px;min-height:48vh;display:flex;align-items:center;justify-content:center;text-align:center}
.title{font-size:"80";margin:6px 0 8px;margin-top: 90px;color:var(--blue-800)}
.subtitle{font-size:15px;color:#183972;margin:0}
.btn{
  display:inline-block;background:var(--blue-600);color:#fff;padding:12px 26px;border:none;border-radius:var(--radius);
  font-weight:700;margin-top:60px;text-decoration:none;transition:.25s
}
.btn:hover{background:var(--blue-400);transform:translateY(-2px)}

/* أقسام عامة */
.section{padding:100px 20px}
.section.light{background:var(--gray)}
.section-title{text-align:center;font-size:20px;color:var(--blue-800);position:relative;margin:0 auto 24px}
.section-title::after{content:"";position:absolute;width:72px;height:3px;background:var(--blue-600);bottom:-12px;left:50%;transform:translateX(-50%)}
.lead{font-size:18px;line-height:1.9;color:var(--muted);text-align:center}

/* مجالاتنا */
.services-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:26px;margin-top:38px
}
.service-card{
  background:linear-gradient(180deg,#ffffff70 0%, #e2e2e2f1 100%);
  border:1px solid #e7edf7;border-radius:20px;box-shadow:var(--shadow);overflow:hidden;transition:.35s;transform:translateY(0)
}
.service-card:hover{transform:translateY(-10px);box-shadow:0 24px 48px rgba(35, 35, 37, 0.541)}
.service-card .cover{position:relative;overflow:hidden}
.service-card img{width:100%;height:210px;object-fit:cover;transition:transform .5s ease}
.service-card:hover img{transform:scale(1.07)}
.service-body{padding:16px 18px}
.service-body h3{font-size:20px;color:var(--blue-800);margin:0 0 6px}
.service-body p{color:#434c5a;font-size:15px;margin:0}

/* الخامات: بطاقتان في الصف + هوفر تكبير */
.materials-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:30px
}
@media (max-width: 700px){.materials-grid{grid-template-columns:1fr}}
.mat-card{
  border:1px solid #3e4044;border-radius:16px;background:#fff;box-shadow:var(--shadow);
  overflow:hidden;transition:.3s;transform:translateZ(0)
}
.mat-card:hover{transform:scale(1.03)}
.mat-card img{width:100%;height:170px;object-fit:cover}
.mat-body{padding:14px}
.mat-body h4{font-size:18px;color:var(--blue-800);margin:0 0 6px}
.mat-body p{font-size:14px;color:#5b6c86;margin:0}

/* المشاريع: بطاقة تحتوي معرض داخلي قابل للتمرير */
.project-card{
  background:linear-gradient(145deg,#f3f6fb,#ffffff);
  border:1px solid #e7edf7;border-radius:18px;box-shadow:var(--shadow);padding:18px 18px 12px;margin:26px 0
}
.project-header h3{color:var(--blue-600);font-size:22px;margin:0 0 6px;font-weight:600}
.project-desc{color:var(--muted);margin:0 0 12px}
.project-gallery{
  display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px
}
.project-gallery::-webkit-scrollbar{height:10px}
.project-gallery::-webkit-scrollbar-thumb{background:#c9d7ee;border-radius:999px}
.project-gallery img{
  height:280px;aspect-ratio:16/9;object-fit:cover;border-radius:14px;flex:0 0 auto;scroll-snap-align:center;cursor:zoom-in;
  box-shadow:0 10px 28px #06002948;transition:transform .25s
}
.project-gallery img:hover{transform:translateY(-3px)}

/* بطاقات المشاريع المميزة */
.project-card.featured {
  border: 2px solid var(--blue-600);
  background: linear-gradient(160deg, #ececec, #ffffff);
  box-shadow: 0 10px 30px #06002948(0, 0, 0, .15);
  padding: 24px;
}

.project-card.featured .project-gallery img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  border-radius: 14px;
}

footer {
  text-align: center;
  font-weight: 500;
  color: var(--muted);
}



/* تواصل */
/* ===== Contact Section ===== */
.contact-section {
  background: #0b2545;
  color: #fff;
  padding: 80px 20px 40px;
}

.contact-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 40px;
  align-items: start;
}

.contact-form-box {
  background: rgba(255, 255, 255, 0.08);
  padding: 30px;
  border-radius: 16px;
  box-shadow: 0 8px 24px #06002948(0,0,0,.2);
  
}

.contact-title {
  font-size: 26px;
  margin-bottom: 20px;
  border-bottom: 2px solid #4a90e2;
  display: inline-block;
  padding-bottom: 5px;
   color: #fff !important;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 12px 14px;
  margin-bottom: 14px;
  border: none;
  border-radius: 12px;
  font-family: 'Tajawal', sans-serif;
  background: #06002948(255,255,255,0.15);
  color: #fff;
  outline: none;
 
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
color: #999; ;
}


.contact-form input:focus,
.contact-form textarea:focus {
  color: #007bff; 
}


.contact-form button {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 12px;
  background: #4a90e2;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  transition: .25s;
}

.contact-form button:hover {
  background: #1d5ca1;
}

.contact-info-box h3 {
  font-size: 22px;
  margin-bottom: 16px;
  color: #e6f0ff;
}

.contact-info-box p {
  margin: 8px 0;
  font-size: 15px;
}


/* تلوين وتكبير أيقونات التواصل */
.social-icons.top-icons a i {
  color: #fff !important;
  font-size: 24px; /* تكبير الحجم */
  margin: 0 10px; /* مسافة بسيطة بين الأيقونات */
  transition: color 0.3s ease, transform 0.3s ease;
}

/* تأثير الهوفر بالأزرق الفاتح */
.social-icons.top-icons a:hover i {
  color: #4a90e2 !important; /* أزرق فاتح عند الهوفر */
  transform: translateY(-3px); /* حركة خفيفة للأعلى */
}


.fb-btn {
  display: inline-block;
  margin-top: 18px;
  background: #1877f2;
  color: #fff;
  padding: 12px 20px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 700;
  transition: background .3s;
}

.fb-btn:hover {
  background: #1457b3;
}

.footer {
  width: 100%;
  text-align: center;
  margin-top: 100px;
  padding: 20px 0;
  border-top: 1px solid rgba(255,255,255,0.15);
  background: #0b2545;
  color: #aebcd2;
  font-size: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
}


/* استجابة */
@media (max-width: 992px){
  .desktop-nav{display:none}
  .menu-toggle{display:block}
  .title{font-size:34px}
  .project-gallery img{height:240px}
}
@media (max-width: 768px){
  .title{font-size:28px}
}

/* === الوضع الليلي التلقائي === */
@media (prefers-color-scheme: dark) {
  :root {
    --blue-900:#e0ecff;
    --blue-800:#aac9ff;
    --blue-600:#7fb1ff;
    --blue-400:#5296ff;
    --silver:#121820;
    --gray:#0e141d;
    --white:#090c12;
    --text:#f2f6fc;
    --muted:#9ca8ba;
    --shadow:0 12px 32px rgba(255,255,255,.05);
    --glass:rgba(20,25,35,.85);
  }

  body {
    background: var(--white);
    color: var(--text);
  }

  .section.light {
    background: var(--gray);
  }

  .navbar::after {
    background: linear-gradient(120deg, rgba(0,50,110,0.85), rgba(0,90,180,0.7), rgba(60,120,220,0.5));
  }

  .service-card,
  .mat-card,
  .project-card {
    background: linear-gradient(145deg,#0e141d,#101621);
    border-color: #263046;
  }

  .section-title,
  .service-body h3,
  .mat-body h4,
  .project-header h3 {
    color: var(--blue-400);
  }

  .lead,
  .project-desc,
  .mat-body p,
  .service-body p {
    color: var(--muted);
  }

  .btn {
    background: var(--blue-600);
  }

  .btn:hover {
    background: var(--blue-400);
  }

  footer {
    background: #0b0f17;
    color: #aebcd2;
  }

  .info p {
    color: #d0d6e2;
  }

  .form input,
  .form textarea {
    background: #141b26;
    color: var(--text);
    border-color: #2c3a53;
  }

  .lightbox {
    background: rgba(0,0,0,.9);
  }
}

/* قسم الكتالوجات */
/* الكاتالوجات (عرض صغير وطول أكبر في صف واحد) */
/* الكاتالوجات: تعديل الارتفاع ليظهر النص بالكامل */
.materials-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.mat-card {
  width: 190px;
  height: 350px; 
  border: 1px solid #e7edf7;
  border-radius: 14px;
  overflow: hidden;
  background: #03377ae1;
  box-shadow: var(--shadow);
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.mat-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.445);
}

.mat-card embed {
  width: 100%;
  height: 210px; /* زيادة عرض PDF داخل البطاقة */
  border: none;
}

.mat-body {
  padding: 10px;
}

.mat-body h4 {
  font-size: 15px;
  color: var(#ffffff);
  margin: 6px 0 4px;
  line-height: 1.3;
}

.mat-body p {
  font-size: 13px;
  color: #ffffff;
  margin: 0;
  line-height: 1.4;
}


/* Lightbox PDF */
#pdfLightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 3000;
  padding: 20px;
}
#pdfLightbox.show {
  display: flex;
}
#pdfLightbox iframe {
  max-width: 90vw;
  max-height: 85vh;
  border-radius: 12px;
  background: #fff;
}
#pdfLightbox .lightbox-close {
  position: absolute;
  top: 20px;
  left: 20px;
  border: none;
  background: rgba(255, 255, 255, 0.92);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
  color: #111111;
  font-weight: bold;
}

/* دعم الوضع الليلي */
@media (prefers-color-scheme: dark) {
  .mat-card {
    background: #101621;
    border-color: #263046;
  }
  .mat-body h4 {
    color: var(--blue-400);
  }
  .mat-body p {
    color: var(--muted);
  }
  #pdfLightbox {
    background:  rgba(9, 2, 39, 0.92);
  }
  #pdfLightbox iframe {
    background: #171e2c;
  }
  #pdfLightbox .lightbox-close {
    background: rgba(255, 255, 255, 0.85);
    color: #000;
  }
}