/* assets/css/style.css */

/* ===== Variables ===== */
:root {
  --primary: #0099CC;
  --secondary: #33CCFF;
  --neutral: #666666;
  --background: #f5f7fa;
  --text: #333333;
  --shadow-light: rgba(0, 0, 0, 0.1);
  --shadow-dark: rgba(0, 0, 0, 0.15);
}

/* Smooth scroll */
html { scroll-behavior: smooth; overflow-x: hidden; }

/* Reset */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
  color:var(--neutral);
  background:var(--background);
  line-height:1.6;
  overflow-x:hidden;
}

/* Container */
.container {
  width:90%; max-width:1200px; margin:0 auto;
}

/* Navbar */
.navbar {
  position:absolute; top:0; left:0; width:100%;
  background:var(--primary); color:#fff;
  transition:background .3s, padding .3s; z-index:1000;
}
.navbar.sticky {
  position:fixed; padding:0.4rem 5%;
  box-shadow:0 2px 8px rgba(0,0,0,.2);
}
.nav-container {
  display:flex; justify-content:space-between; align-items:center;
  padding:0.4rem 5%;
  flex-wrap:wrap;
}
.logo img { max-height:40px; }
.menu-toggle { display:none; background:transparent; border:none;color:#fff;font-size:1.5rem;cursor:pointer; }
.nav-links {
  list-style:none; display:flex; gap:2rem;
}
.nav-links.open { max-height:300px; }
.nav-links a { color:#fff; text-decoration:none; font-weight:500; transition:color .3s; }
.nav-links a:hover { color:var(--secondary); }
.language-switcher { display:flex; gap:.5rem; }
.language-switcher button {
  background:transparent;border:1px solid #fff;color:#fff;
  padding:.25rem .5rem;cursor:pointer;transition:.3s;
}
.language-switcher button:hover { background:#fff;color:var(--primary); }

/* Hero */
.hero {
  position:relative; height:100vh;
  margin-top:0;
  background-size:cover; background-position:center;
  display:grid; place-items:center; text-align:center; color:#fff;
}
.hero-overlay {
  position:absolute; inset:0; background:rgba(63,76,79,.3);
}
.hero-content { position:relative; z-index:2; max-width:600px; padding:1rem; }
.hero-content h1 { font-size:2.5rem; margin-bottom:1rem; }
.hero-content p { font-size:1.25rem; margin-bottom:2rem; }
.hero-content .btn {
  background:var(--secondary); color:#fff;
  padding:.75rem 2rem; border-radius:.5rem;
  font-weight:bold; text-decoration:none; transition:.3s;
}
.hero-content .btn:hover {
  background:#fff; color:var(--primary);
}

/* ===== Services full-width (fixed) ===== */
.services {
  /* بدّل width:100vw hack بــ width:100% عادي */
  width: 100%;
  padding: 6rem 0;
  background: #fff;
  text-align: center;
  /* لا تحتاج left/margin trick بعد الآن */
}

.services .container {
  /* أعد الحاوية لعرض كامل مع حد أقصى */
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;     /* مسافة جانبية متناسبة */
  box-sizing: border-box;
}

.services h2 {
  font-size: 2rem;
  margin-bottom: 3rem;
  color: var(--primary);
}

/* غيّر هذه الحشوة الثابتة */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2rem;
  padding: 0;          /* أزل padding: 0 11rem; */
  width: 100%;
}

.service-card {
  background: #f8f9fa;
  border-radius: .75rem;
  /* نجعل البطاقات مربعة بنسبة 1:1 */
  aspect-ratio:1:1;
  /* نستخدم Flex لمحاذاة المحتوى في الوسط */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* padding داخلي لتباعد مريح للنص والأيقونة */
  padding: 1.5rem;
  box-shadow: 0 4px 12px rgba(0,0,0,.1);
  transition: transform .4s, box-shadow .4s;
  cursor: pointer;
}
.service-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 8px 20px rgba(0,0,0,.15);
}
/* الأيقونة والعنوان والفقرات تبقى كما هي */
.service-card i {
  font-size: 3rem;
  color: var(--primary);
  margin-bottom: 1rem;
}
.service-card h3 {
  font-size: 1.25rem;
  margin-bottom: .5rem;
  color: var(--primary);
  text-align: center;
}
.service-card p {
  font-size: 0.95rem;
  color: var(--neutral);
  text-align: center;
}
/* Why Us */
.why-us {
  padding:6rem 0; background:#fff; text-align:center;
}
.why-us h2 { font-size:2.5rem; color:var(--primary); margin-bottom:.5rem; }
.why-us .section-description {
  font-size:1.1rem; color:var(--neutral);
  max-width:700px; margin:0 auto 3rem; line-height:1.6;
}
.why-us-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
  gap:2.5rem; padding:0 2rem;
}
.why-us-card {
  background:#f8f9fa; border-radius:.75rem; overflow:hidden;
  box-shadow:0 4px 12px rgba(0,0,0,.1); transition:transform .4s;
}
.why-us-card:hover { transform:translateY(-8px); }
.card-image-wrapper {
  position:relative; height:180px; overflow:hidden;
}
.card-image-wrapper img {
  width:100%; height:100%; object-fit:cover;
  filter:brightness(0.75); transition:filter .4s;
}
.why-us-card:hover .card-image-wrapper img {
  filter:brightness(0.6);
}
.card-overlay {
  position:absolute; inset:0; background:rgba(0,0,0,.3);
}
.why-us-card h3 { font-size:1.5rem; color:var(--primary); margin:1rem; }
.why-us-card p { font-size:1rem; color:var(--neutral); margin:0 1rem 1.5rem; }

/* Partners */
.partners {
  padding:6rem 0; background:#f8f9fa; text-align:center;
}
.partners h2 { font-size:2rem; margin-bottom:2rem; color:var(--primary); }
.partners-grid {
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:2rem; max-width:1000px; margin:0 auto; padding:0 1rem;
}
.partner-card {
  width:120px; height:60px; background:#fff; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 6px var(--shadow-light); overflow:hidden;
}
.partner-card img {
  width:100%; height:100%; object-fit:contain;
  filter:grayscale(100%); transition:filter .4s;
}
.partner-card img:hover { filter:grayscale(0); }

/* Footer */
.footer {
  background:linear-gradient(135deg,var(--primary) 0%,var(--secondary) 100%);
  color:#f0faff; padding:3rem 1rem 1.5rem; font-size:.95rem;
}
.footer-container {
  display:flex; flex-wrap:wrap; justify-content:space-between;
  gap:2rem; max-width:1200px; margin:0 auto;
}
.footer-col { flex:1 1 250px; }
.footer-logo {
  display:inline-block; font-size:1.8rem; font-weight:bold;
  color:#fff; text-decoration:none; margin-bottom:.5rem;
}
.footer-desc { opacity:.85; line-height:1.5; }
.footer-title {
  font-size:1.2rem; margin-bottom:.75rem; position:relative;
}
.footer-title::after {
  content:''; position:absolute; left:0; bottom:-4px;
  width:40px; height:3px; background:#fff; border-radius:2px;
}
.social-links {
  list-style:none; display:flex; gap:.75rem; padding:0;
}
.social-links a {
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; background:rgba(255,255,255,.2);
  color:#fff; border-radius:50%; font-size:1.1rem;
  transition:background .3s,transform .3s;
}
.social-links a:hover {
  background:#fff; color:var(--primary); transform:translateY(-3px);
}
.footer-col p { display:flex; align-items:center; gap:.5rem; margin-bottom:.5rem; }
.footer-col i { width:24px; text-align:center; font-size:1.1rem; }
.footer-bottom {
  text-align:center; margin-top:2rem; padding-top:1rem;
  border-top:1px solid rgba(255,255,255,.3); opacity:.8;
}

/* Back to top */
.back-to-top {
  position:fixed; bottom:30px; left:30px;
  width:50px; height:50px; background:var(--primary);
  color:#fff; border:none; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.25rem; cursor:pointer; box-shadow:0 4px 12px rgba(0,0,0,.3);
  opacity:0; visibility:hidden; transition:opacity .3s,visibility .3s,transform .3s;
  z-index:1000;
}
.back-to-top.show { opacity:1; visibility:visible; }
.back-to-top:hover { transform:translateY(-3px); }
/* ===== Floating WhatsApp ===== */
.floating-contact {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #25d366;        /* اللون الأخضر الافتراضي */
  color: white;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  z-index: 1000;
  transition: transform 0.3s;
}
.floating-contact:hover {
  transform: scale(1.1);
}

/* Language switch */
[data-lang-ar],[data-lang-en],[data-lang-ku] { display:none; }
html[lang="ar"] [data-lang-ar],
html[lang="en"] [data-lang-en],
html[lang="ku"] [data-lang-ku] { display:block; }

/* Responsive */
@media (max-width:992px){
  .container{width:95%;padding:0 1rem;}
  .hero{height:70vh;}
  .hero-content h1{font-size:2.2rem;}
  .hero-content p{font-size:1.1rem;}
  .services-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem;}
  .service-card i{font-size:2.5rem;}
}
@media (max-width:768px){
  .menu-toggle{display:block;}
  .nav-links{position:absolute;top:100%;left:0;width:100%;background:var(--primary);
    flex-direction:column;align-items:center;max-height:0;overflow:hidden;transition:max-height .3s;}
  .nav-links.open{max-height:300px;}
  .language-switcher{display:none;}
  .hero{height:60vh;}
  .why-us-grid{grid-template-columns:1fr;}
  .footer-container{flex-direction:column;align-items:center;text-align:center;}
}
@media (max-width:576px){
  .nav-links{gap:.75rem;}
  .hero-content h1{font-size:1.75rem;}
  .hero-content p{font-size:1rem;}
  .hero-content .btn{padding:.5rem 1.5rem;font-size:.9rem;}
  .services-grid{grid-template-columns:1fr;padding:0 1rem;}
  .partners-grid{gap:1rem;}
  .footer-col{flex:1 1 100%;}
  .footer-title::after{left:50%;transform:translateX(-50%);}
}