/* styles.css */
/* الخط العام */
:root{
  --primary:#061226; /* أزرق غامق جداً يميل للسواد */
  --accent:#0b5da7;  /* تدرج أزرق */
  --muted:#6f7b86;
  --light:#f6f8fb;
  --maxWidth:1200px;
  --radius:10px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Cairo', sans-serif;
  color:#eef2f7;
  background:linear-gradient(180deg,#031021 0%, #071728 100%);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.6;
  direction:rtl;
}

/* container */
.container{max-width:var(--maxWidth);margin:0 auto;padding:1rem}

/* NAV */
.site-header{background:linear-gradient(90deg,var(--primary), #04132a);position:sticky;top:0;z-index:60;box-shadow:0 2px 8px rgba(0,0,0,0.6)}
.nav-row{display:flex;align-items:center;justify-content:space-between;padding:0.7rem 1rem}
.brand{display:flex;align-items:center;gap:0.8rem}
.logo{height:52px;width:52px;object-fit:contain;border-radius:8px;background:#fff;padding:4px}
.brand-text h1{margin:0;font-size:1rem;color:#fff}
.brand-text p{margin:0;font-size:0.8rem;color:var(--muted)}

/* nav menu */
.nav ul{display:flex;gap:0.6rem;align-items:center;margin:0;padding:0;list-style: none ; }
.nav a{display:inline-block;padding:0.6rem 0.9rem;border-radius:8px;color:#cfe6ff;text-decoration:none;transition:all .2s ease;border:1px solid transparent}
.nav a:hover, .nav a:focus{transform:translateY(-3px);box-shadow:0 6px 18px rgba(11,93,167,0.12);border-color:rgba(11,93,167,0.12);color:#fff;background:linear-gradient(180deg, rgba(11,93,167,0.08), rgba(11,93,167,0.03))}
.nav ul, .nav li {
  list-style: none !important;
  margin: 0;
  padding: 0;
}
}
/* hamburger mobile */
.hamburger{display:none;background:none;border:0;cursor:pointer;padding:6px}
.hamburger span{display:block;height:3px;width:22px;background:#cfe6ff;margin:4px 0;border-radius:3px;transition:all .3s}

/* HERO */
.hero{padding:2.5rem 0;background:transparent}
.hero-inner{display:flex;gap:1.5rem;align-items:center;justify-content:space-between}
.hero-text h2{font-size:1.9rem;margin:0;color:#fff}
.hero-text p{color:#cbd7e6;margin:0.6rem 0 1rem}
.hero-image img{width:420px;max-width:40vw;border-radius:14px;box-shadow:0 8px 30px rgba(2,10,20,0.6);border:1px solid rgba(255,255,255,0.03)}

/* Sections */
.section{padding:2.2rem 0}
.section-title{color:#fff;margin-bottom:0.5rem;font-size:1.3rem}
.lead{color:#c0cddc;margin-bottom:1rem}

/* products grid */
.products-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.product-card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:1rem;border-radius:12px;text-align:center;transition:transform .25s, box-shadow .25s}
.product-card img{width:100%;height:160px;object-fit:cover;border-radius:8px;margin-bottom:0.6rem}
.product-card h4{margin:0.4rem 0;color:#fff}
.product-card p{color:var(--muted);font-size:0.95rem}
.card-btn{display:inline-block;margin-top:0.7rem;padding:0.5rem 0.8rem;border-radius:8px;text-decoration:none;border:1px solid transparent;transition:all .2s}
.product-card:hover{transform:translateY(-6px);box-shadow:0 14px 40px rgba(2,10,30,0.6)}
.product-card:hover .card-btn{background:var(--accent);color:#fff;box-shadow:0 8px 20px rgba(11,93,167,0.18)}

/* dark section (inverse) */
.dark{background:linear-gradient(180deg, rgba(2,8,15,0.35), rgba(3,7,12,0.6));padding:2.5rem 0;border-top:1px solid rgba(255,255,255,0.02);border-bottom:1px solid rgba(255,255,255,0.02)}

/* quality grid */
.quality-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1rem}
.quality-item{background:rgba(255,255,255,0.02);padding:1rem;border-radius:10px}

/* about grid */
.about-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-top:1rem}

/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;align-items:start}
.contact-info{padding:1rem}
.contact-info p, .contact-info a, .address{color:#d8e7ff}
.contact-actions{display:flex;gap:.6rem;margin:.7rem 0}
.btn{display:inline-block;padding:0.6rem 0.9rem;border-radius:10px;border:1px solid rgba(255,255,255,0.

06);text-decoration:none;background:transparent;color:#eaf4ff;cursor:pointer;transition:transform .15s, box-shadow .15s}
.btn:hover{transform:translateY(-4px)}
.btn.primary{background:linear-gradient(90deg,var(--accent), #0a7bd1);color:white;border:0;box-shadow:0 10px 30px rgba(11,93,167,0.12)}
.btn.whatsapp{background:linear-gradient(90deg,#25D366,#1DA851);color:#fff;border:0}

/* contact form */
.contact-form{background:rgba(255,255,255,0.02);padding:1rem;border-radius:12px}
.contact-form label{display:block;margin-bottom:0.6rem;color:#cfe6ff;font-size:0.95rem}
.contact-form input, .contact-form textarea{width:100%;padding:.6rem;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:#e8f3ff}
.form-actions{display:flex;gap:.6rem;margin-top:.6rem}

/* map iframe */
.map iframe{width:100%;height:220px;border:0;border-radius:8px;margin-top:0.8rem}

/* footer */
.site-footer{padding:1rem 0;background:linear-gradient(180deg,#02060b,#051323);color:#bfcfe2}
.footer-grid{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.footer-credit small{color:#9fb0c6;font-size:0.85rem}

/* small screens */
@media (max-width:980px){
  .products-grid{grid-template-columns:repeat(2,1fr)}
  .quality-grid{grid-template-columns:1fr}
  .about-grid{grid-template-columns:1fr}
  .hero-inner{flex-direction:column-reverse;text-align:center}
  .hero-image img{max-width:90%;height:auto}
  .nav ul{display:none;flex-direction:column;background:linear-gradient(180deg,#061226,#041528);position:absolute;right:10px;top:68px;padding:0.7rem;border-radius:10px;box-shadow:0 12px 40px rgba(2,10,20,0.6)}
  .nav.open ul{display:flex}
  .hamburger{display:block}
}

/* very small */
@media (max-width:520px){
  .products-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
}

/* small interactive focus */
a:focus, button:focus, input:focus, textarea:focus{outline:3px solid rgba(11,93,167,0.12);outline-offset:2px}

/* الزر مخفي افتراضياً على الكمبيوتر */
.hamburger {
  display: none !important;
}

/* يظهر فقط على الهواتف */
@media (max-width: 980px) {
  .hamburger {
    display: block !important;
  }
}

/* نص يحتوي أرقام يظهر بشكل صحيح */
.ltr-text {
  direction: ltr !important;
  unicode-bidi: embed !important;
  display: inline-block; /* يحافظ على ترتيب النص والأرقام */
  text-align: left;      /* اختيارياً لمحاذاة الرقم */
}

.ltr-text {
  direction: ltr !important;
  unicode-bidi: embed !important;
  display: inline-block;
  text-align: left; /* يمكنك تغييره center إذا تريد الرقم في الوسط */
}

.ltr-text {
  direction: ltr !important;
  unicode-bidi: embed !important;
  display: inline-block;
  text-align: left; /* يمكنك تغييره center إذا تريد الرقم في الوسط */
}