/* Zeel Tech — shared stylesheet */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Tajawal:wght@400;500;700;800&display=swap');

:root{
  --navy-950:#071a2c;
  --navy-900:#0b2540;
  --navy-800:#0f3157;
  --navy-700:#14406e;
  --steel-500:#2f6690;
  --steel-300:#6fa3c9;
  --steel-100:#e8f1f8;
  --orange-500:#f2882e;
  --orange-600:#e07316;
  --orange-100:#fdecd8;
  --grey-50:#f7f8fa;
  --grey-100:#eef1f4;
  --grey-300:#cdd4db;
  --grey-500:#6b7684;
  --grey-700:#3a4552;
  --grey-900:#1b232c;
  --white:#ffffff;
  --radius:10px;
  --shadow-sm:0 1px 3px rgba(7,26,44,.08);
  --shadow-md:0 8px 24px rgba(7,26,44,.12);
  --font-en:'Inter', system-ui, sans-serif;
  --font-ar:'Tajawal', system-ui, sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0;}

html{scroll-behavior:smooth;}

body{
  font-family:var(--font-en);
  color:var(--grey-900);
  background:var(--white);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

html.lang-ar body{
  font-family:var(--font-ar);
  direction:rtl;
}

img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
button{font-family:inherit;cursor:pointer;}

.container{
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:0 24px;
}

/* ---------- Language visibility ---------- */
.ar-text{display:none;}
html.lang-ar .en-text{display:none;}
html.lang-ar .ar-text{display:block;}
html.lang-ar span.ar-text,
html.lang-ar strong.ar-text,
html.lang-ar em.ar-text{display:inline;}

/* ---------- Top bar ---------- */
.topbar{
  background:var(--navy-950);
  color:var(--steel-100);
  font-size:13px;
}
.topbar .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px;
  padding-top:8px;
  padding-bottom:8px;
}
.topbar-info{display:flex;gap:22px;flex-wrap:wrap;}
.topbar-info a{opacity:.9;}
.topbar-info a:hover{opacity:1;color:var(--orange-500);}
.topbar-info span{display:inline-flex;align-items:center;gap:6px;}

/* ---------- Header / nav ---------- */
header.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:var(--white);
  border-bottom:1px solid var(--grey-100);
  box-shadow:var(--shadow-sm);
}
.nav-wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 0;
  gap:16px;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  font-size:22px;
  color:var(--navy-900);
  white-space:nowrap;
}
.brand .mark{
  width:42px;
  height:42px;
  border-radius:8px;
  object-fit:contain;
  display:block;
  flex-shrink:0;
}
.brand .name-ar{font-family:var(--font-ar);}

nav.main-nav ul{
  display:flex;
  align-items:center;
  gap:30px;
}
nav.main-nav a{
  font-weight:600;
  font-size:15px;
  color:var(--grey-700);
  padding:6px 2px;
  border-bottom:2px solid transparent;
  transition:.15s;
}
nav.main-nav a:hover,
nav.main-nav a.active{
  color:var(--navy-900);
  border-bottom-color:var(--orange-500);
}

.nav-right{display:flex;align-items:center;gap:14px;}

.lang-toggle{
  display:flex;
  border:1px solid var(--grey-300);
  border-radius:999px;
  overflow:hidden;
  font-size:13px;
  font-weight:700;
}
.lang-toggle button{
  border:none;
  background:var(--white);
  color:var(--grey-700);
  padding:7px 14px;
}
.lang-toggle button.active{
  background:var(--navy-900);
  color:var(--white);
}

.nav-toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;
  border:none;
  padding:6px;
}
.nav-toggle span{
  width:24px;height:2px;background:var(--navy-900);display:block;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 24px;
  border-radius:999px;
  font-weight:700;
  font-size:15px;
  border:2px solid transparent;
  transition:.15s;
}
.btn-primary{
  background:var(--orange-500);
  color:var(--white);
}
.btn-primary:hover{background:var(--orange-600);}
.btn-outline{
  background:transparent;
  border-color:var(--white);
  color:var(--white);
}
.btn-outline:hover{background:rgba(255,255,255,.12);}
.btn-navy{
  background:var(--navy-900);
  color:var(--white);
}
.btn-navy:hover{background:var(--navy-800);}
.btn-sm{padding:9px 18px;font-size:14px;}

/* mobile-only nav CTA, hidden on desktop — shown again in the 720px media query */
nav.main-nav li.mobile-cta{display:none;}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  color:var(--white);
  padding:90px 0 100px;
  overflow:hidden;
  background:var(--navy-950); /* fallback while slides load */
}

.hero-slideshow{
  position:absolute;
  inset:0;
  z-index:0;
}
.hero-slideshow .slide{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  opacity:0;
  animation:heroSlide 24s infinite;
}
.hero-slideshow .slide:nth-child(1){animation-delay:0s;}
.hero-slideshow .slide:nth-child(2){animation-delay:6s;}
.hero-slideshow .slide:nth-child(3){animation-delay:12s;}
.hero-slideshow .slide:nth-child(4){animation-delay:18s;}

@keyframes heroSlide{
  0%{opacity:0;}
  4%{opacity:1;}
  21%{opacity:1;}
  27%{opacity:0;}
  100%{opacity:0;}
}

@media (prefers-reduced-motion: reduce){
  .hero-slideshow .slide{animation:none;opacity:0;}
  .hero-slideshow .slide:first-child{opacity:1;}
}

.hero-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(120deg, rgba(7,26,44,.92) 0%, rgba(15,49,87,.85) 55%, rgba(47,102,144,.75) 100%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 2px, transparent 2px 40px);
}

.hero-grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:48px;
  align-items:center;
}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:rgba(242,136,46,.15);
  border:1px solid rgba(242,136,46,.4);
  color:var(--orange-500);
  font-size:13px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  padding:6px 14px;
  border-radius:999px;
  margin-bottom:20px;
}
.hero h1{
  font-size:44px;
  line-height:1.15;
  font-weight:800;
  margin-bottom:18px;
}
.hero p.lead{
  font-size:17px;
  color:var(--steel-100);
  max-width:520px;
  margin-bottom:30px;
}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:36px;}
.hero-stats{
  display:flex;
  gap:32px;
  flex-wrap:wrap;
}
.hero-stats div strong{
  display:block;
  font-size:26px;
  font-weight:800;
  color:var(--orange-500);
}
.hero-stats div span{font-size:13px;color:var(--steel-100);}

.hero-panel{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius);
  padding:28px;
  backdrop-filter:blur(4px);
}
.hero-panel h3{font-size:16px;margin-bottom:16px;color:var(--white);}
.hero-panel ul li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:14px;
  color:var(--steel-100);
  padding:9px 0;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.hero-panel ul li:last-child{border-bottom:none;}
.chip-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--orange-500);
  margin-top:6px;
  flex-shrink:0;
}

/* ---------- Sections ---------- */
section{padding:80px 0;}
section.tight{padding:60px 0;}
.section-head{
  max-width:680px;
  margin-bottom:44px;
}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
.kicker{
  color:var(--orange-600);
  font-weight:700;
  font-size:13px;
  letter-spacing:.06em;
  text-transform:uppercase;
  margin-bottom:10px;
  display:block;
}
.section-head h2{
  font-size:32px;
  font-weight:800;
  color:var(--navy-900);
  margin-bottom:14px;
}
.section-head p{color:var(--grey-500);font-size:16px;}

.bg-grey{background:var(--grey-50);}
.bg-navy{background:var(--navy-950);color:var(--white);}
.bg-navy .section-head h2{color:var(--white);}
.bg-navy .section-head p{color:var(--steel-100);}

/* ---------- Cards ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}

.card{
  background:var(--white);
  border:1px solid var(--grey-100);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:.2s;
}
.card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px);}

.card-image{
  width:100%;
  height:190px;
  object-fit:cover;
  object-position:center;
  display:block;
}

.card-body{padding:24px 30px 30px;}

.card .icon{
  width:52px;height:52px;
  border-radius:10px;
  background:var(--steel-100);
  color:var(--navy-800);
  display:flex;align-items:center;justify-content:center;
  font-size:24px;
  margin-bottom:18px;
}
.card h3{font-size:19px;font-weight:700;color:var(--navy-900);margin-bottom:10px;}
.card p{color:var(--grey-500);font-size:14.5px;margin-bottom:16px;}
.card a.link{
  color:var(--orange-600);
  font-weight:700;
  font-size:14px;
}

.badge{
  display:inline-block;
  background:var(--orange-100);
  color:var(--orange-600);
  font-size:12px;
  font-weight:700;
  padding:4px 10px;
  border-radius:6px;
  margin-bottom:14px;
}

/* Product category block on Products page */
.category-block{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:44px;
  align-items:start;
  padding:56px 0;
  border-bottom:1px solid var(--grey-100);
}
.category-block:last-child{border-bottom:none;}
.category-block .code{
  font-size:14px;
  font-weight:800;
  color:var(--orange-600);
  letter-spacing:.04em;
}
.category-block h2{
  font-size:28px;
  font-weight:800;
  color:var(--navy-900);
  margin:8px 0 14px;
}
.category-block > div:first-child p{color:var(--grey-500);font-size:15.5px;}

.item-list{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
}
.item-list li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  background:var(--grey-50);
  border:1px solid var(--grey-100);
  border-radius:8px;
  padding:12px 14px;
  font-size:14.5px;
  color:var(--grey-700);
}
.item-list li .dot{
  color:var(--orange-500);
  font-weight:800;
  flex-shrink:0;
}

/* Full parts / stock list under each category */
.parts-panel{
  grid-column:1 / -1;
  margin-top:8px;
  padding-top:32px;
  border-top:1px dashed var(--grey-300);
}
.parts-panel h4{
  font-size:13px;
  font-weight:800;
  color:var(--navy-900);
  text-transform:uppercase;
  letter-spacing:.05em;
  margin-bottom:16px;
}
.parts-grid{column-count:1;}
@media (min-width:640px){.parts-grid{column-count:2; column-gap:32px;}}
@media (min-width:960px){.parts-grid{column-count:3; column-gap:32px;}}
.part-row{
  display:flex;
  gap:10px;
  align-items:baseline;
  padding:7px 0;
  border-bottom:1px solid var(--grey-100);
  break-inside:avoid;
  font-size:13.5px;
}
.part-code{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color:var(--steel-500);
  font-weight:700;
  flex-shrink:0;
  min-width:56px;
}
.part-desc{color:var(--grey-700);}

/* ---------- Why choose us / features ---------- */
.feature-row{display:flex;gap:18px;align-items:flex-start;margin-bottom:26px;}
.feature-row .num{
  width:40px;height:40px;flex-shrink:0;
  border-radius:8px;
  background:var(--navy-900);
  color:var(--white);
  display:flex;align-items:center;justify-content:center;
  font-weight:800;
}
.feature-row h4{font-size:16.5px;color:var(--navy-900);margin-bottom:4px;}
.feature-row p{font-size:14.5px;color:var(--grey-500);}

/* ---------- CTA band ---------- */
.cta-band{
  background:linear-gradient(120deg,var(--navy-900),var(--steel-500));
  color:var(--white);
  border-radius:16px;
  padding:52px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
}
.cta-band h3{font-size:26px;font-weight:800;margin-bottom:8px;}
.cta-band p{color:var(--steel-100);font-size:15px;}

.cta-band-photo{
  background-image:
    linear-gradient(120deg, rgba(7,26,44,.88) 0%, rgba(15,49,87,.82) 55%, rgba(47,102,144,.72) 100%),
    url('Contact.jpg');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

/* ---------- About page ---------- */
.about-hero{
  background:var(--navy-950);
  color:var(--white);
  padding:70px 0;
}
.about-hero h1{font-size:36px;font-weight:800;margin-bottom:12px;}
.about-hero p{color:var(--steel-100);max-width:640px;}

.about-hero-photo{
  background-image:
    linear-gradient(120deg, rgba(7,26,44,.90) 0%, rgba(15,49,87,.84) 55%, rgba(47,102,144,.72) 100%),
    url('Products.jpg');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

.about-hero-photo-2{
  background-image:
    linear-gradient(120deg, rgba(7,26,44,.90) 0%, rgba(15,49,87,.84) 55%, rgba(47,102,144,.72) 100%),
    url('About.jpg');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

.about-hero-photo-3{
  background-image:
    linear-gradient(120deg, rgba(7,26,44,.90) 0%, rgba(15,49,87,.84) 55%, rgba(47,102,144,.72) 100%),
    url('Contact-us.jpg');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

.timeline-item{
  display:flex;
  gap:16px;
  padding-bottom:26px;
  position:relative;
}
.timeline-item .tick{
  width:14px;height:14px;
  border-radius:50%;
  background:var(--orange-500);
  margin-top:4px;
  flex-shrink:0;
}
.value-card{
  border:1px solid var(--grey-100);
  border-radius:var(--radius);
  padding:24px;
  background:var(--white);
}
.value-card h4{color:var(--navy-900);font-size:16px;margin-bottom:8px;}
.value-card p{color:var(--grey-500);font-size:14px;}

/* ---------- Contact page ---------- */
.contact-grid{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:40px;
}
.info-card{
  background:var(--navy-950);
  color:var(--white);
  border-radius:var(--radius);
  padding:32px;
}
.info-card h3{font-size:18px;margin-bottom:22px;}
.info-row{
  display:flex;
  gap:14px;
  padding:16px 0;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.info-row:last-child{border-bottom:none;}
.info-row .ic{
  width:40px;height:40px;flex-shrink:0;
  border-radius:8px;
  background:rgba(242,136,46,.18);
  color:var(--orange-500);
  display:flex;align-items:center;justify-content:center;
  font-size:18px;
}
.info-row strong{display:block;font-size:14px;color:var(--white);margin-bottom:3px;}
.info-row span, .info-row a{font-size:14px;color:var(--steel-100);}

.form-card{
  background:var(--white);
  border:1px solid var(--grey-100);
  border-radius:var(--radius);
  padding:32px;
  box-shadow:var(--shadow-sm);
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;}
.field{display:flex;flex-direction:column;gap:6px;}
.field.full{grid-column:1/-1;}
.field label{font-size:13px;font-weight:700;color:var(--grey-700);}
.field input, .field select, .field textarea{
  border:1px solid var(--grey-300);
  border-radius:8px;
  padding:11px 13px;
  font-size:14.5px;
  font-family:inherit;
  color:var(--grey-900);
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none;
  border-color:var(--steel-500);
}
.map-note{
  margin-top:20px;
  border:1px dashed var(--grey-300);
  border-radius:8px;
  padding:18px;
  font-size:13.5px;
  color:var(--grey-500);
  text-align:center;
}

.btn:disabled{
  opacity:.65;
  cursor:not-allowed;
}

.form-status{
  display:none;
  margin-top:14px;
  padding:12px 14px;
  border-radius:8px;
  font-size:13.5px;
  line-height:1.5;
  text-align:center;
}
.form-status.visible{display:block;}
.form-status.success{
  background:var(--orange-100);
  color:var(--orange-600);
  border:1px solid rgba(224,115,22,.25);
}
.form-status.error{
  background:#fdeaea;
  color:#c23b3b;
  border:1px solid rgba(194,59,59,.25);
}
.form-status a{text-decoration:underline;}

/* ---------- Footer ---------- */
footer.site-footer{
  background:var(--navy-950);
  color:var(--steel-100);
  padding:56px 0 0;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1.2fr;
  gap:36px;
  padding-bottom:40px;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.footer-grid h4{color:var(--white);font-size:15px;margin-bottom:16px;}
.footer-grid p{font-size:14px;color:var(--steel-100);margin-bottom:14px;}
.footer-grid ul li{margin-bottom:10px;}
.footer-grid ul li a{font-size:14px;color:var(--steel-100);}
.footer-grid ul li a:hover{color:var(--orange-500);}
.footer-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  padding:20px 0;
  font-size:13px;
  color:var(--grey-500);
}

/* ---------- Scroll / load-in reveal ---------- */
.reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.21,.6,.35,1), transform .7s cubic-bezier(.21,.6,.35,1);
}
.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none;}
}

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-panel{order:-1;}
  .grid-3{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .category-block{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr;}
}

@media (max-width:720px){
  .topbar{display:none;}

  /* keep header row compact so brand + lang toggle + hamburger never overflow */
  .nav-wrap{gap:8px;flex-wrap:nowrap;padding:10px 0;}
  .brand{font-size:17px;gap:8px;white-space:nowrap;}
  .brand .mark{width:34px;height:34px;}
  .nav-right{gap:6px;flex-shrink:0;}
  .lang-toggle button{padding:6px 9px;font-size:11.5px;}
  /* the header "Get a Quote" pill is dropped on mobile to avoid crowding;
     it reappears as a full-width item inside the slide-down menu */
  .nav-right > a.btn{display:none;}

  nav.main-nav{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:var(--white);
    display:none;
    padding:12px 24px 24px;
    max-height:calc(100vh - 56px);
    overflow-y:auto;
    box-shadow:var(--shadow-md);
    border-top:1px solid var(--grey-100);
    z-index:99;
  }
  nav.main-nav.open{display:block;}
  nav.main-nav ul{flex-direction:column;align-items:stretch;gap:0;}
  nav.main-nav ul li{width:100%;}
  nav.main-nav a{display:block;padding:14px 0;border-bottom:1px solid var(--grey-100);width:100%;}
  nav.main-nav li.mobile-cta{display:block;margin-top:14px;}
  nav.main-nav li.mobile-cta a{border-bottom:none;padding:0;}
  nav.main-nav li.mobile-cta .btn{width:100%;}
  .nav-toggle{display:flex;}
  .hero h1{font-size:32px;}
  .grid-3, .grid-2{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .item-list{grid-template-columns:1fr;}
  .form-row{grid-template-columns:1fr;}
  .cta-band{flex-direction:column;align-items:flex-start;}
  section{padding:56px 0;}
}

@media (max-width:380px){
  .brand{font-size:15px;}
  .brand .mark{width:30px;height:30px;}
  .lang-toggle button{padding:5px 7px;font-size:11px;}
}