:root{
  --navy:#0d1b2a;
  --navy-2:#14263a;
  --gold:#f0b429;
  --soft:#f6f8fb;
  --text:#1b2430;
  --muted:#6b7380;
  --white:#fff;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:#fff;
}

/* Header */
.site-header{
  position:sticky; top:0; z-index:1000;
  background:rgba(13,27,42,.96);
  backdrop-filter:saturate(120%) blur(6px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.container{
  width:min(1200px, 92%);
  margin-inline:auto;
}
.nav-container{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
}
.brand{display:flex; align-items:center; gap:10px; color:#fff; text-decoration:none; font-weight:700}
.logo{height:38px; width:auto}
.main-nav{display:flex; align-items:center; gap:22px}
.main-nav a{color:#dbe4f0; text-decoration:none; font-weight:500}
.main-nav a:hover{color:#fff}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 18px; border-radius:10px; text-decoration:none; font-weight:600; cursor:pointer}
.btn-primary{background:var(--gold); color:#000}
.btn-primary:hover{filter:brightness(.95)}
.btn-outline{border:1px solid #31465d; color:#e5edf6; padding:10px 16px; border-radius:10px}
.btn-outline:hover{border-color:#6b86a3; color:#fff}
.btn-light{background:#e8eef6; color:#0d1b2a}
.btn-light:hover{filter:brightness(.97)}
.w-100{width:100%}

.nav-toggle{display:none; background:transparent; border:none; cursor:pointer}
.nav-toggle span{display:block; width:26px; height:2px; background:#fff; margin:6px 0}

@media (max-width:920px){
  .main-nav{position:fixed; inset:62px 0 auto; background:var(--navy); padding:18px; transform:translateY(-120%); transition:.3s; flex-direction:column; gap:14px; border-bottom:1px solid #294058}
  .main-nav.open{transform:translateY(0)}
  .nav-toggle{display:block}
}

/* Hero */
.hero{
  position:relative; min-height:68vh; display:grid; place-items:center; color:#fff;
  background: no-repeat center/cover var(--navy-2);
}
.hero::before{
  content:""; position:absolute; inset:0; background:var(--navy-2) center/cover;
  background-image:var(--bg);
  opacity:.35;
}
.overlay{position:absolute; inset:0; background:radial-gradient(60% 60% at 50% 30%, rgba(13,27,42,.15), rgba(13,27,42,.85))}
.hero-content{position:relative; text-align:center; padding:80px 0}
.hero h1{font-size:clamp(28px,4vw,48px); margin:0 0 10px}
.hero p{max-width:850px; margin:0 auto 22px; color:#dfe7f2}
.hero-actions{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}
.contact-line{margin-top:14px; color:#c8d5e5}
.contact-line a{color:#fff}

/* Sections */
.section{padding:70px 0}
.section-title{font-size:clamp(24px,3.2vw,34px); margin:0 0 18px}
.bg-soft{background:var(--soft)}

/* Services */
.grid{display:grid; gap:18px}
.services-grid{grid-template-columns:repeat(5,1fr)}
@media (max-width:1200px){.services-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:780px){.services-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.services-grid{grid-template-columns:1fr}}

.card{border:1px solid #e8edf3; border-radius:14px; overflow:hidden; background:#fff; display:flex; flex-direction:column; box-shadow:0 4px 16px rgba(0,0,0,.04)}
.card-img{aspect-ratio:16/10; background:#eee center/cover}
.card-body{padding:14px 16px}
.card-body h3{margin:4px 0 6px; font-size:18px}
.card-body p{margin:0; color:var(--muted); font-size:14px}

/* About */
.about-grid{display:grid; grid-template-columns:2fr 1fr; gap:28px; align-items:start}
@media (max-width:900px){.about-grid{grid-template-columns:1fr}}
.muted{color:var(--muted)}
.bullets{margin:0; padding-left:18px; line-height:1.9}
.about-cta{margin-top:14px; display:flex; gap:12px; flex-wrap:wrap}

/* Kontakt */
.contact-grid{display:grid; grid-template-columns:1.5fr 1fr; gap:28px}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}
.contact-form{border:1px solid #e8edf3; padding:18px; border-radius:14px; background:#fff}
.form-row{display:flex; flex-direction:column; margin-bottom:12px}
.form-row label{font-weight:600; margin-bottom:6px}
.form-row input,.form-row textarea{
  border:1px solid #cfd9e6; border-radius:10px; padding:12px 12px; font:inherit; resize:vertical;
}
.form-row input:focus,.form-row textarea:focus{outline:2px solid #b8cbe2; border-color:#8fb1d4}
.form-row.chk{margin-top:-4px}
.contact-info{border:1px solid #e8edf3; padding:18px; border-radius:14px; background:#fefefe}
.info-item{margin-bottom:12px}
.info-note{color:var(--muted); font-size:14px}

/* Toast */
.toast{
  display:none; margin-bottom:14px; padding:12px 14px; border-radius:10px; background:#e7f8ec; color:#0b6c2e; border:1px solid #c9f0d7;
}
.toast.show{display:block}
.toast.error{background:#fdecea; color:#8f1d1d; border-color:#f5c3c0}

/* Footer */
.site-footer{background:var(--navy); color:#cdd7e6; padding:18px 0; margin-top:20px}
.footer-flex{display:flex; align-items:center; justify-content:space-between; gap:16px}
.footer-links{display:flex; align-items:center; gap:8px}
.footer-links a{color:#fff; text-decoration:none}
/* --- fixes: mobile horizontal scroll / white stripe --- */
html, body { overflow-x: hidden; }

img, svg, video, canvas { max-width: 100%; height: auto; }

/* زر الهامبرغر يبقى فوق لوحة القائمة */
.nav-toggle { position: relative; z-index: 1101; }

@media (max-width:920px){
  /* اجعل لوحة القائمة تحت الزر بقليل، ولن تغطيه */
  .main-nav { z-index: 1100; }
}

/* اختياري: منع تمرير الخلفية أثناء فتح القائمة */
body.nav-open { 
  overflow: hidden; 
}
/* === Fix mobile contact form alignment === */
.contact-form {
  max-width: 100%;
  box-sizing: border-box;
  padding: 16px;
}

.contact-form .form-row input,
.contact-form .form-row textarea {
  width: 100%;
  box-sizing: border-box;
}

.contact-form button {
  width: 100%;
  text-align: center;
}

/* إزالة أي تحريك داخلي غير ضروري */
.container {
  overflow-x: hidden;
}

/* تصغير النص قليلاً على الشاشات الصغيرة */
@media (max-width: 480px) {
  .form-row label {
    font-size: 15px;
  }
  .form-row input,
  .form-row textarea {
    font-size: 15px;
    padding: 10px 12px;
  }
  .contact-form {
    padding: 12px;
  }
}