/* ============================================================
   EL ATHAR — styles.css
   Hover effects, responsive layout, image fallbacks, chips.
   Brand accent is set on #root as --accent (#2540DB).
   ============================================================ */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0}
a{color:inherit}

/* Image placeholders: show a soft grey if the photo is missing/replaced */
.img-slot{
  background-color:#E7E9EE;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

/* ---------- NAV ---------- */
.navpill{transition:background .3s ease,box-shadow .3s ease,backdrop-filter .3s ease,-webkit-backdrop-filter .3s ease}
.navpill:hover{
  background:linear-gradient(180deg,rgba(255,255,255,0.62),rgba(255,255,255,0.44));
  -webkit-backdrop-filter:blur(34px) saturate(210%);backdrop-filter:blur(34px) saturate(210%);
  box-shadow:0 18px 50px rgba(20,23,28,0.18),inset 0 1px 1px rgba(255,255,255,1),inset 0 -1px 1px rgba(255,255,255,0.3);
}
.navlinks a{
  text-decoration:none;color:inherit;padding:8px 12px;display:inline-block;
  transform-origin:center;transition:transform .2s ease,color .2s ease;
}
.navlinks a:hover{transform:scale(1.16);color:#0E1116}

.btn-accent{transition:transform .2s ease,box-shadow .2s ease,filter .2s ease}
.btn-accent:hover{transform:translateY(-1px);filter:brightness(1.05);box-shadow:0 8px 22px rgba(37,64,219,0.4)}

.wa-float{transition:transform .18s ease,box-shadow .18s ease}
.wa-float:hover{transform:scale(1.08);box-shadow:0 12px 30px rgba(37,211,102,0.5),0 3px 10px rgba(0,0,0,0.22)}

.svc-card{transition:transform .25s ease,box-shadow .25s ease}
.svc-card:hover{transform:translateY(-4px);box-shadow:0 18px 46px rgba(20,23,28,0.12)}

/* ---------- Hamburger (mobile only) ---------- */
.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:0;padding:8px;margin-left:2px}
.burger span{width:22px;height:2px;background:#14171C;display:block}

/* ---------- Service chips (contact) ---------- */
.chip{
  font-family:'Archivo',sans-serif;font-size:12.5px;font-weight:600;letter-spacing:0.01em;
  padding:9px 16px;border-radius:999px;cursor:pointer;
  border:1px solid #DDDFE3;background:#fff;color:#3A3F47;
  transition:background .15s,color .15s,border-color .15s;
}
.chip:hover{border-color:var(--accent,#2540DB);color:var(--accent,#2540DB)}
.chip.active{background:var(--accent,#2540DB);border-color:var(--accent,#2540DB);color:#fff}

/* Hide scrollbar on the projects rail */
.projects-scroll{scrollbar-width:none;-ms-overflow-style:none}
.projects-scroll::-webkit-scrollbar{display:none}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1000px){
  .hero-h1{font-size:54px !important;white-space:normal !important}
  .features-grid{grid-template-columns:1fr 1fr !important}
  .cards-grid{grid-template-columns:1fr 1fr !important}
  .about-row{flex-direction:column !important;gap:32px !important}
  .about-row .img-slot{min-height:300px !important}
  .why-row{flex-direction:column !important;gap:28px !important}
}

@media(max-width:680px){
  /* Nav: collapse links into a dropdown */
  .navlinks{
    display:none;position:absolute;top:72px;left:0;right:0;
    flex-direction:column;align-items:flex-start;gap:4px;
    background:#fff;border:1px solid #E7E8EA;border-radius:18px;
    padding:14px 18px;box-shadow:0 18px 40px rgba(20,23,28,0.14);
  }
  .navlinks.open{display:flex}
  .burger{display:flex}
  .navpill{padding:8px 14px 8px 18px}

  .hero-h1{font-size:42px !important}
  section{}
  .features-grid{grid-template-columns:1fr !important}
  .cards-grid{grid-template-columns:1fr !important}
  .contact-info{gap:28px !important}

  /* The animated road is desktop-flourish; simplify on phones */
  #road{height:auto !important}
  #road > div{position:static !important;height:auto !important;display:block !important;padding:64px 0}
  #road svg{display:none !important}
  #road [data-step]{opacity:1 !important;transform:none !important;position:static !important;margin-bottom:22px}
  #road [data-step]{}
  .road-steps-fallback{display:block}

  /* Why-choose circle becomes a simple stacked list on phones */
  .why-circle{height:auto !important}
  .why-circle > div{position:static !important;transform:none !important;width:auto !important;
    text-align:left !important;margin-bottom:18px;left:auto !important;right:auto !important;top:auto !important;bottom:auto !important;}
  .why-circle > div:first-child{display:none !important} /* hide center logo circle on mobile */
}