/* ===== Design Tokens ===== */
:root{
  --bg:#0b0b0b;
  --panel:#141414;
  --ink:#f2f2f2;
  --muted:#cfcfcf;
  --brand:#d0dd26; /* brand green */
  --gutter: 5%;     /* consistent left edge for logo & hero copy */
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Montserrat',sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.6;
}
img{max-width:100%;display:block}

/* Container centers the page; .align-edge lets child align to left gutter */
.container{width:min(92%,1200px);margin-inline:auto}
.align-edge{padding-left:var(--gutter)}

/* ===== Header / Hero ===== */
.hero{
  position:relative; min-height:92vh;
  background:url('../assets/hero-bg.png') center/cover no-repeat;
  display:flex; flex-direction:column;
}
.hero::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.68),rgba(0,0,0,.82) 60%,rgba(0,0,0,.9));
  pointer-events:none;
}

/* Topbar */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:22px 0;position:relative;z-index:2}
.brand{margin-left:var(--gutter)}
.brand img{height:64px;width:auto}
.nav{display:flex;align-items:center;gap:16px;margin-right:var(--gutter)}
.nav-links{list-style:none;display:flex;gap:30px}
.nav-links a{color:#e0e0e0;text-decoration:none;font-weight:600}
.nav-links a:hover{color:var(--brand)}
.menu-toggle{display:none;background:none;border:0;color:#fff;font-size:26px;cursor:pointer}

/* Hero copy */
.hero-content{position:relative;z-index:1;margin:auto 0 10vh;text-align:left;max-width:980px}
.hero-content h1{
  font-weight:800;
  font-size:clamp(2.4rem, 4vw + 1rem, 4.3rem);
  line-height:1.08; letter-spacing:-.4px;
}
.highlight{color:var(--brand)}
.lead{
  margin-top:16px;margin-bottom:28px;color:var(--muted);
  font-size:clamp(1.05rem,.6vw + .9rem,1.25rem); max-width:760px;
}
.btn{
  display:inline-block; background:var(--brand); color:#0b0b0b;
  padding:14px 26px; border-radius:28px; font-weight:800; text-decoration:none;
  transition:.25s transform,.25s background;
}
.btn:hover{transform:translateY(-2px); background:#e6f57b}

/* ===== Sections ===== */
section{padding:88px 0}
h2{
  font-size:clamp(1.9rem,1.2vw + 1.4rem,2.4rem);
  text-align:center; margin-bottom:34px; color:var(--brand); font-weight:800;
}

/* ===== About (Zahid) ===== */
.zahid{
  display:grid; grid-template-columns:220px 1fr; gap:28px; align-items:start;
}
.zahid-photo{
  width:220px;height:220px;object-fit:cover;border-radius:14px;
  box-shadow:0 12px 26px rgba(0,0,0,.35);
}
.zahid-copy h3{font-size:1.7rem;margin-bottom:6px}
.role{color:#b6b6b6;font-style:italic;margin-bottom:10px}
.zahid-copy p{color:#e1e1e1;margin-bottom:10px}
.pill-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.pill-list li{
  list-style:none;background:#1b1b1b;border:1px solid #262626;
  color:#e4e4e4;padding:8px 12px;border-radius:999px;font-size:.9rem;
}

/* ===== Services ===== */
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:26px}
.service-card{
  background:var(--panel); border:1px solid #1f1f1f; border-radius:12px;
  padding:28px; text-align:left; position:relative; overflow:hidden;
  transition:.25s transform,.25s box-shadow;
}
.service-card::after{
  content:''; position:absolute; inset:auto -20% -40% -20%;
  height:120px; background:radial-gradient(circle at 50% 50%, rgba(208,221,38,.18), transparent 60%);
  transform:translateY(40px); transition:.35s transform;
}
.service-card:hover{transform:translateY(-4px); box-shadow:0 20px 40px rgba(0,0,0,.35)}
.service-card:hover::after{transform:translateY(0)}
.service-card i{font-size:30px;color:var(--brand);margin-bottom:12px}
.service-card h3{font-size:1.15rem;margin-bottom:8px}
.service-card p{color:#dcdcdc}

/* ===== Clients ===== */
.clients p{max-width:760px;margin:0 auto 26px;color:#d1d1d1;text-align:center}
.client-logos{display:flex;flex-wrap:wrap;justify-content:center;gap:34px}
.client-logos img{filter:grayscale(100%);opacity:.85;transition:.25s}
.client-logos img:hover{filter:none;opacity:1}

/* ===== Values (animated) ===== */
.values-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px}
.value{
  background:linear-gradient(180deg,#141414,#0f0f0f);
  border:1px solid #1f1f1f;border-radius:12px;padding:26px;text-align:center;position:relative;overflow:hidden;
}
.value i{font-size:28px;color:var(--brand)}
.value h4{margin:10px 0 6px}
.value p{color:#d0d0d0}
.value::before{
  content:''; position:absolute; width:120%; height:140%;
  top:-80%; left:-10%;
  background:radial-gradient(circle at 50% 50%, rgba(208,221,38,.12), transparent 60%);
  animation:drift 8s linear infinite;
}
@keyframes drift{0%{transform:translateY(0)}50%{transform:translateY(12px)}100%{transform:translateY(0)}}

/* ===== Contact CTA ===== */
.contact p{max-width:640px;margin:0 auto 22px;color:#d3d3d3;text-align:center}
.center-btn{display:flex;justify-content:center}

/* ===== Contact Info Block ===== */
.contact-block{background:#0f0f0f;border-top:1px solid #1c1c1c;padding:56px 0}
.contact-grid{
  display:grid;gap:28px;align-items:start;
  grid-template-columns:1.2fr 1.6fr 1.2fr;
}
.contact-col h5{color:var(--brand);letter-spacing:.6px;margin-bottom:6px}
.contact-col p{color:#e1e1e1}
.contact-col a{color:#e7e7e7;text-decoration:none}
.contact-col a:hover{color:var(--brand)}
.contact-col.divider{border-left:2px solid rgba(208,221,38,.35);border-right:2px solid rgba(208,221,38,.35);padding:0 28px}
.contact-logos{grid-column:1/-1;display:flex;gap:18px;align-items:center;margin-top:8px}
.contact-logos img{height:50px}

/* ===== Footer ===== */
.footer{background:#111;text-align:center;padding:20px 0;color:#8a8a8a;font-size:.95rem}

/* ===== Responsive ===== */
@media (max-width:980px){
  .zahid{grid-template-columns:1fr; gap:18px}   /* 2 rows on mobile: image then copy */
  .zahid-photo{width:200px;height:200px; margin-inline:auto}
  .zahid-copy{text-align:center}
  .pill-list{justify-content:center}
}

@media (max-width:860px){
  .nav-links{
    position:absolute; right:var(--gutter); top:72px; background:#121212;
    border:1px solid #222; border-radius:10px; width:220px; padding:12px 0;
    flex-direction:column; gap:0; transform:translateX(120%); transition:.25s;
  }
  .nav-links.show{transform:translateX(0)}
  .nav-links li{padding:12px 16px; text-align:right}
  .menu-toggle{display:inline-block}
  .contact-grid{grid-template-columns:1fr;gap:22px}
  .contact-col.divider{border:0;padding:0}
}

@media (max-width:600px){
  .brand img{height:54px}
  .hero-content{padding-right:6%}
  .hero-content h1{font-size:2.25rem}
  .lead{font-size:1rem}
  .btn{padding:12px 22px}
}

/* Center-align Hero Section Content */
.hero-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 100px 20px;
  min-height: 100vh;
  max-width: 900px;
  margin: 0 auto;
}

.hero-content h1 {
  font-size: 3.5rem;
  line-height: 1.2;
}

.hero-content p {
  margin-top: 1rem;
  font-size: 1.125rem;
  color: #ccc;
}

.hero-content .cta-button {
  margin-top: 2rem;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .hero-content h1 {
    font-size: 2.5rem;
  }

  .hero-content {
    padding: 80px 16px;
  }
}

/* Target the about section in mobile view */
@media (max-width: 768px) {
  .about h2 {
    text-align: center;
  }

  .about p {
    text-align: center;
  }

  .zahid {
    flex-direction: column;
    align-items: center;
  }

  .zahid-copy {
    text-align: center;
    margin-top: 1.5rem; /* Adds gap between intro paragraph and photo */
  }

  .zahid-photo {
    margin-top: 1.5rem; /* Adds gap between Zahid image and top content */
    max-width: 100%;
    height: auto;
    border-radius: 1rem;
  }

  .pill-list {
    justify-content: center;
    padding: 0;
    gap: 0.5rem;
  }
}