:root{
  --bg:#f6f8fb;          /* fixed: subtle light background (pehle #6f9ee4 tha) */
  --surface:#ffffff;     /* surfaces */
  --card:#ffffff;        /* cards */
  --primary:#2563eb;     /* blue */
  --accent:#14b8a6;      /* teal */
  --text:#151618;        /* slate-900 */
  --muted:#55607a;       /* desaturated slate */
  --ring:rgba(37,99,235,.25);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial}
img{max-width:100%;height:auto}
.container{max-width:1120px;margin:auto;padding:0 16px}

/* Header - light */
.site-header{
  position:sticky;top:0;z-index:1000;
  background:rgba(255,255,255,.9);
  backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid #e6eaef;
  box-shadow:0 4px 14px rgba(15,23,42,.06)
}

/* ===== HERO — WebMesh (particles + lines, animated) ===== */
.hero.mk-webmesh{
  position:relative;
  min-height:68vh;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-bottom:1px solid #10162a;
  color:#fff;
  background:#0b1020;   /* fallback in case SVG fails */
}

.hero.mk-webmesh .mesh{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:1; pointer-events:none;
}

/* line animation: dash flows + slow pan to add life */
.hero.mk-webmesh .layer polyline{
  stroke-dasharray:6 10;
  animation:dash 10s linear infinite;
}
.hero.mk-webmesh .layer.l2 polyline{ stroke-dasharray:8 14; animation-duration:14s }
.hero.mk-webmesh .layer.l3 polyline{ stroke-dasharray:10 16; animation-duration:18s }

@keyframes dash{
  0%{ stroke-dashoffset:0; transform:translateX(0) }
  50%{ stroke-dashoffset:-140; transform:translateX(-10px) }
  100%{ stroke-dashoffset:-280; transform:translateX(0) }
}

/* nodes twinkle */
.hero.mk-webmesh .node{
  animation:twinkle 4.2s ease-in-out infinite;
  transform-origin:center;
}
.hero.mk-webmesh .node.n2,
.hero.mk-webmesh .node.n7,
.hero.mk-webmesh .node.n11{ animation-duration:5.2s }
.hero.mk-webmesh .node.n4,
.hero.mk-webmesh .node.n8,
.hero.mk-webmesh .node.n12{ animation-duration:3.6s }

@keyframes twinkle{
  0%,100%{ opacity:.25; r:1.6 }
  50%{ opacity:.95; r:2.6 }
}

/* Content */
.hero.mk-webmesh .hero-inner{
  position:relative; z-index:2;
  text-align:center; padding:90px 16px; max-width:900px;
}
.hero.mk-webmesh h1{font-size:52px;line-height:1.2;margin:0 0 12px;font-weight:800;color:#fff}
.grad{background:linear-gradient(90deg,#f97316,#facc15);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero.mk-webmesh p{color:#dbeafe;margin:0 0 24px;font-size:18px}
.cta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-block;background:linear-gradient(90deg,#f97316,#facc15);color:#fff;text-decoration:none;padding:14px 20px;border-radius:14px;font-weight:600;box-shadow:0 10px 24px rgba(0,0,0,.25);transition:.3s}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.35)}
.btn.ghost{background:transparent;border:2px solid rgba(255,255,255,.85);color:#fff}
.btn.ghost:hover{background:rgba(12, 12, 12, 0.12)}

/* Responsive */
@media (max-width:960px){ .hero.mk-webmesh h1{font-size:40px} }
@media (max-width:640px){ .hero.mk-webmesh h1{font-size:32px} }

.about-owner{
  padding:48px 0;
  background:linear-gradient(180deg, rgba(20,184,166,.04), rgba(20,184,166,0));
}
.about-grid2{
  display:grid;
  grid-template-columns: 360px 1fr;
  gap:24px;
  align-items:center;
}
.about-card{
  background:var(--card);
  border:1px solid #e8eef7;
  border-radius:18px;
  padding:22px;
  box-shadow:0 10px 28px rgba(15,23,42,.06);
  text-align:center;
}
.avatar-wrap{
  position:relative;
  width:160px; height:160px;
  margin:0 auto 14px;
  display:grid; place-items:center;
  border-radius:50%;
  background:conic-gradient(from 210deg, var(--primary), var(--accent), var(--primary));
  padding:3px;
}
.avatar{
  width:100%; height:100%; object-fit:cover;
  border-radius:50%;
  border:4px solid #fff;
}
.pulse{
  position:absolute; inset:-6px; border-radius:50%; pointer-events:none;
  box-shadow:0 0 0 0 rgba(37,99,235,.35);
  animation:pulseRing 2.6s ease-out infinite;
}
@keyframes pulseRing{
  0%{box-shadow:0 0 0 0 rgba(37,99,235,.35)}
  70%{box-shadow:0 0 0 16px rgba(37,99,235,0)}
  100%{box-shadow:0 0 0 0 rgba(37,99,235,0)}
}
.owner-name{margin:0;font-size:22px;font-weight:700}
.owner-role{
  display:inline-block; margin-top:6px;
  background:rgba(37,99,235,.10);
  color:var(--primary);
  border:1px solid rgba(37,99,235,.25);
  padding:6px 12px; border-radius:999px;
  font-weight:600; font-size:13px;
}
.owner-tag{margin-top:8px; color:var(--muted); font-size:14px}

/* Right */
.about-copy{
  background:var(--card);
  border:1px solid #e8eef7;
  border-radius:18px;
  padding:24px;
  box-shadow:0 10px 28px rgba(15,23,42,.05);
}
.about-title{margin:0 0 10px}
.about-copy p{margin:10px 0;color:#334155}
.about-bullets{margin:14px 0;padding-left:18px;color:#475569}
.about-bullets li{margin:6px 0}
.about-cta{
  display:flex; gap:14px; margin-top:20px;
  flex-wrap:wrap; justify-content:flex-start;
}
.about-cta .btn{min-width:150px;text-align:center}

/* Responsive */
@media (max-width: 960px){
  .about-grid2{grid-template-columns:1fr; gap:18px}
  .about-card, .about-copy{text-align:center}
  .about-cta{justify-content:center}
}


/* ===== What We Do (modern feature cards) ===== */
.what-we-do .sec-head.mw{ text-align:left; max-width:740px; }
.what-we-do{ padding-top:40px; padding-bottom:12px; }

.features3{
  display:grid; gap:18px;
  grid-template-columns:repeat(3,1fr);
  margin-top:18px;
}
@media (max-width: 960px){ .features3{ grid-template-columns:1fr 1fr } }
@media (max-width: 640px){ .features3{ grid-template-columns:1fr } }

.fcard{
  position:relative;
  background:linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.96));
  border:1px solid #e8eef7;
  border-radius:18px;
  padding:18px 18px 16px;
  box-shadow:0 10px 28px rgba(15,23,42,.06);
  overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.fcard:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 40px rgba(15,23,42,.12);
  border-color:rgba(37,99,235,.35);
}

/* gradient ring accent */
.fcard .ring{
  position:absolute; inset:-1px; border-radius:20px; z-index:0; pointer-events:none;
  background:linear-gradient(120deg, rgba(37,99,235,.38), rgba(20,184,166,.32));
  opacity:.0; transition:opacity .25s;
}
.fcard:hover .ring{ opacity:.25; }

/* icon badge */
.ibadge{
  width:44px;height:44px;border-radius:12px;
  display:grid;place-items:center;
  background:linear-gradient(135deg, rgba(37,99,235,.12), rgba(20,184,166,.12));
  border:1px solid rgba(37,99,235,.25);
  color:var(--primary);
  box-shadow:0 6px 18px rgba(15,23,42,.06);
  margin-bottom:10px;
  position:relative; z-index:1;
}
.ibadge svg{ width:24px;height:24px }

.fcard h3{ margin:2px 0 6px; font-size:18px }
.fcard p{ margin:0 0 12px; color:#475569 }

.tags{ display:flex; gap:8px; flex-wrap:wrap; margin:0 0 10px; padding:0; list-style:none }
.tags li{
  font-size:12px; font-weight:600;
  padding:6px 10px; border-radius:999px;
  color:#0f172a;
  background:linear-gradient(180deg,#f8fbff,#eef4ff);
  border:1px solid #dbe6fd;
}

/* link as subtle CTA */
.mlink{
  position:relative; display:inline-block; font-weight:600;
  color:var(--primary); text-decoration:none; padding-right:2px;
}
.mlink::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background:linear-gradient(90deg,var(--primary),var(--accent));
  opacity:.35; transform:scaleX(.4); transform-origin:left; transition:.25s;
}
.mlink:hover::after{ opacity:.9; transform:scaleX(1) }

/* sheen highlight on hover */
.fcard::before{
  content:""; position:absolute; inset:-120% -40%; transform:rotate(20deg);
  background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.35) 50%, rgba(255,255,255,0) 100%);
  transition:transform .8s ease; pointer-events:none; z-index:0;
}
.fcard:hover::before{ transform:translateX(40%) rotate(20deg) }

/* keep spacing harmony with your existing .cards */
.what-we-do .features3 .fcard{ padding-bottom:18px }


/* Cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:18px}
.card{
  background:var(--card);
  border:1px solid #e8eef7;
  border-radius:16px;
  padding:18px;
  box-shadow:0 8px 28px rgba(15,23,42,.05)
}
.card h3{margin:0 0 6px}

/* Bullets */
.bullets{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:14px 0 0;padding:0;list-style:none}
.bullets li{
  background:var(--card);
  border:1px solid #e8eef7;
  border-radius:14px;
  padding:12px;
  box-shadow:0 6px 18px rgba(15,23,42,.04)
}

/* Page sections */
.page-hero{padding:60px 0 0}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}

/* ===== Pro Footer (modern) ===== */
.pro-footer{
  background:#0f172a;
  color:#e5e7eb;
  border-top:1px solid rgba(148,163,184,.25);
}
.pro-footer .ftop{
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr;
  gap:28px;
  padding:34px 0;
}
@media (max-width:960px){ .pro-footer .ftop{ grid-template-columns:1fr 1fr } }
@media (max-width:640px){ .pro-footer .ftop{ grid-template-columns:1fr } }

.pro-footer h4{ margin:0 0 10px; color:#fff; font-size:16px }
.pro-footer .list-plain{ margin:0; padding:0; list-style:none }
.pro-footer .list-plain li{ margin:6px 0 }
.pro-footer a{ color:#fdfffe; text-decoration:none }
.pro-footer a:hover{ color:#fff }

/* brand block */
.f-logo{
  display:flex; align-items:center; gap:10px; text-decoration:none; color:#fff;
}
.f-logo img{ width:42px; height:42px; display:block }
.fname{ font-weight:800; letter-spacing:.3px }
.ftag{ margin:8px 0 12px; color:#cbd5e1; font-size:14px }

/* socials */
.fsocial{ display:flex; gap:10px }
.fsocial a{
  width:36px; height:36px; border-radius:10px; display:grid; place-items:center;
  background:rgba(255,255,255,.06); color:#22c55e;
  border:1px solid rgba(148,163,184,.2);
  transition:.25s;
}
.fsocial a:hover{ background:rgba(255,255,255,.12); color:#fff; transform:translateY(-2px) }

/* gradient copyright strip */
.pro-mini{
  margin-top:10px;
  background:linear-gradient(90deg,#22c55e,#16a34a);
  color:#fff;
  text-align:center;
  padding:14px;
  font-size:14px;
  border-top:1px solid rgba(255,255,255,.18);
}

/* Footer (already present styles stay) */

/* --- White box + 'A' letter badge --- */
.logo-badge{
  width:36px;height:36px;
  border-radius:10px;
  background:#ffffff;
  display:grid;place-items:center;
  border:1px solid rgba(148,163,184,.25);
  box-shadow:0 6px 16px rgba(255,255,255,.12);
}
.logo-letter{
  font-weight:800;
  font-size:18px;
  line-height:1;
  color:#f9f9fa; /* dark letter so it pops on white box */
}

/* keep brand text next to badge */
.f-logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff}
.f-logo .fname{font-weight:800;color:#fff}

/* (optional) tiny hover lift on badge */
.f-logo:hover .logo-badge{transform:translateY(-1px)}



/* Contact cards */
.contact-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}

/* Focus styles */
:where(a,button){outline:none}
:where(a,button):focus-visible{box-shadow:0 0 0 3px var(--ring);border-radius:12px}

/* Responsive */
@media (max-width: 960px){
  .cards{grid-template-columns:1fr 1fr}
  .bullets{grid-template-columns:1fr 1fr}
  .grid-3{grid-template-columns:1fr 1fr}
  .about-grid{grid-template-columns:1fr}
  .contact-cards{grid-template-columns:1fr 1fr}
}
@media (max-width: 640px){
  .nav{
    display:none;position:absolute;right:16px;top:58px;
    background:#ffffff;border:1px solid #e7edf7;border-radius:12px;
    padding:8px;flex-direction:column;width:210px
  }
  .nav.show{display:flex}
  .nav-toggle{display:inline-block}
  .hero h1{font-size:30px}
  .cards{grid-template-columns:1fr}
  .bullets{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .contact-cards{grid-template-columns:1fr}
}

/* ===== Why Choose Section ===== */
.why-choose{
  background:linear-gradient(180deg, rgba(37,99,235,.04), rgba(20,184,166,.06));
  padding:56px 0;
}
.sec-head.center{text-align:center; max-width:700px; margin:auto}
.why-choose .grad{background:linear-gradient(90deg,var(--primary),var(--accent));
  -webkit-background-clip:text; background-clip:text; color:transparent}

.choose-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin-top:28px;
}
@media(max-width:960px){.choose-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.choose-grid{grid-template-columns:1fr}}

.choose-card{
  background:linear-gradient(180deg,rgba(255,255,255,.92),#fff);
  border:1px solid #e8eef7;
  border-radius:18px;
  padding:24px 20px;
  box-shadow:0 8px 26px rgba(15,23,42,.05);
  transition:all .25s ease;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.choose-card:hover{
  transform:translateY(-6px);
  box-shadow:0 14px 36px rgba(15,23,42,.12);
  border-color:rgba(37,99,235,.35);
}
.c-icon{
  width:60px;height:60px;
  display:grid;place-items:center;
  border-radius:14px;
  margin:0 auto 14px;
  background:linear-gradient(135deg, var(--primary), var(--accent));
  color:#fff;
  box-shadow:0 6px 18px rgba(15,23,42,.25);
}
.c-icon svg{width:28px;height:28px}
.choose-card h3{margin:0 0 8px;font-size:18px;font-weight:700;color:var(--text)}
.choose-card p{margin:0;color:#475569;font-size:15px;line-height:1.5}

/* sheen effect on hover */
.choose-card::before{
  content:""; position:absolute; inset:-120% -40%; transform:rotate(25deg);
  background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.35) 50%, rgba(255,255,255,0) 100%);
  transition:transform .8s ease;
}
.choose-card:hover::before{transform:translateX(40%) rotate(25deg)}

/* ===== Featured Work (Case studies) ===== */
.featured-work{ padding-top:44px; padding-bottom:18px }
.featured-work .sec-head.center{ text-align:center; max-width:720px; margin:auto }
.featured-work .grad{
  background:linear-gradient(90deg,var(--primary),var(--accent));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

.cases{
  display:grid; gap:18px; margin-top:22px;
  grid-template-columns:repeat(3,1fr);
}
@media (max-width: 960px){ .cases{ grid-template-columns:1fr 1fr } }
@media (max-width: 640px){ .cases{ grid-template-columns:1fr } }

.case{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.90), #fff);
  border:1px solid #e8eef7; border-radius:18px;
  padding:18px; box-shadow:0 10px 28px rgba(15,23,42,.06);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.case:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 40px rgba(15,23,42,.12);
  border-color:rgba(37,99,235,.35);
}
/* gradient ring frame */
.case .ring{
  position:absolute; inset:-1px; border-radius:20px; z-index:0; pointer-events:none;
  background:linear-gradient(120deg, rgba(37,99,235,.38), rgba(20,184,166,.32));
  opacity:0; transition:opacity .25s;
}
.case:hover .ring{ opacity:.25 }

/* sheen pass */
.case::before{
  content:""; position:absolute; inset:-120% -40%; transform:rotate(22deg);
  background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.35) 50%, rgba(255,255,255,0) 100%);
  transition:transform .8s ease; pointer-events:none; z-index:0;
}
.case:hover::before{ transform:translateX(40%) rotate(22deg) }

.case h3{ margin:8px 0 6px; font-size:18px }
.case p{ margin:0 0 12px; color:#475569 }

.meta{ display:flex; align-items:center; justify-content:space-between; gap:8px }
.badge{
  display:inline-block; font-weight:700; font-size:12px; letter-spacing:.2px;
  padding:6px 10px; border-radius:999px; color:#0f172a; background:#f1f5ff; border:1px solid #dbe6fd;
}
.badge.up{ background:linear-gradient(180deg,#f8fbff,#eef4ff); color:#0f172a; border-color:#dbe6fd }
.badge.down{ background:linear-gradient(180deg,#fff7ed,#ffedd5); color:#9a3412; border-color:#fed7aa }

.tags{ display:flex; gap:8px; flex-wrap:wrap; margin:0; padding:0; list-style:none }
.tags li{
  font-size:11.5px; font-weight:600; padding:5px 8px; border-radius:999px;
  color:#0f172a; background:#f8fafc; border:1px solid #e5eaf4;
}

/* link CTA */
.mlink{
  position:relative; display:inline-block; font-weight:600;
  color:var(--primary); text-decoration:none; padding-right:2px;
}
.mlink::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background:linear-gradient(90deg,var(--primary),var(--accent));
  opacity:.35; transform:scaleX(.4); transform-origin:left; transition:.25s;
}
.case:hover .mlink::after{ opacity:.9; transform:scaleX(1) }


/* ===== Newsletter Section ===== */
.newsletter{ padding:64px 0; background:linear-gradient(180deg,#f9fbfd 0%,#f5f7fb 100%) }
.nl-card{
  background:rgba(255,255,255,.9);
  border-radius:20px;
  padding:38px;
  box-shadow:0 12px 32px rgba(15,23,42,.08);
  border:1px solid rgba(226,232,240,.6);
  backdrop-filter:blur(10px);
  display:flex; align-items:center; justify-content:space-between;
  gap:32px; flex-wrap:wrap;
}
.nl-text{ flex:1; min-width:260px }
.nl-text h2{ margin:0 0 8px; font-size:28px; background:linear-gradient(90deg,var(--primary),var(--accent));-webkit-background-clip:text;color:transparent }
.nl-text p{ margin:0; color:#475569; max-width:520px }

.nl-form{ display:flex; flex:1; min-width:260px; gap:12px }
.nl-form input{
  flex:1; padding:14px 16px;
  border-radius:14px; border:1px solid #dbe6fd;
  font-size:15px; outline:none;
  background:#fff; color:#0f172a;
  transition:border-color .25s;
}
.nl-form input:focus{ border-color:var(--primary) }
.nl-form button{
  padding:14px 20px; border-radius:14px;
  border:none; cursor:pointer;
  font-weight:600; font-size:15px;
  background:linear-gradient(90deg,var(--primary),var(--accent));
  color:#fff; box-shadow:0 8px 18px rgba(37,99,235,.25);
  transition:transform .2s ease, box-shadow .2s ease;
}
.nl-form button:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 24px rgba(37,99,235,.35);
}

@media (max-width:768px){
  .nl-card{ flex-direction:column; text-align:center; gap:20px }
  .nl-form{ flex-direction:column }
  .nl-form button{ width:100% }
}

/*service.php page=====

/* Hero */
.page-hero{
  text-align:center;
  padding:80px 20px 40px;
  background:linear-gradient(135deg,var(--primary)10%,var(--accent)90%);
  border-radius:18px;
  color:#fff;
  margin-bottom:60px;
}
.page-hero h1{
  font-size:42px;
  margin:0 0 12px;
  font-weight:700;
}
.page-hero p{
  font-size:18px;
  opacity:.9;
  margin:0;
}

/* Services Grid */
.services .cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:28px;
}
.service-card{
  background:rgba(255,255,255,.9);
  border-radius:20px;
  padding:28px 26px;
  box-shadow:0 8px 24px rgba(15,23,42,.08);
  border:1px solid rgba(226,232,240,.6);
  backdrop-filter:blur(12px);
  transition:all .3s ease;
  position:relative;
}
.service-card:hover{
  transform:translateY(-6px);
  box-shadow:0 16px 32px rgba(15,23,42,.15);
  border-color:var(--primary);
}
.service-card .icon{
  font-size:32px;
  margin-bottom:12px;
}
.service-card h3{
  font-size:20px;
  margin:0 0 12px;
  background:linear-gradient(90deg,var(--primary),var(--accent));
  -webkit-background-clip:text;
  color:transparent;
}
.service-card ul{
  list-style:none;
  padding:0;
  margin:0;
}
.service-card li{
  margin:6px 0;
  color:#475569;
  font-size:15px;
  display:flex; align-items:center;
}
.service-card li::before{
  content:"✔";
  color:var(--primary);
  font-size:14px;
  margin-right:8px;
}


.contact-section {
  text-align: center;
}

.contact-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}

.contact-card {
  background: #fff;
  padding: 2rem 1.5rem;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.contact-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 25px rgba(0,0,0,0.12);
}

.contact-card .icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.contact-card h3 {
  margin-bottom: 0.3rem;
  font-size: 1.2rem;
  color: #222;
}

.contact-card p a {
  color: #007bff;
  text-decoration: none;
  font-weight: 500;
}

.contact-cta {
  margin-top: 2rem;
}

.btn-primary {
  display: inline-block;
  background: linear-gradient(135deg, #ff7b00, #ffb347);
  color: #fff;
  padding: 0.8rem 1.6rem;
  border-radius: 30px;
  font-weight: 600;
  text-decoration: none;
  transition: 0.3s ease;
}

.btn-primary:hover {
  opacity: 0.9;
}


/* Footer: mobile alignment fix */
.pro-footer .ftop{ padding:34px 16px; }              /* a little side padding */

@media (max-width: 640px){
  .pro-footer .ftop{
    grid-template-columns: 1fr;                      /* single column grid */
    text-align: left;
    row-gap: 22px;
  }
  .pro-footer .ftop > *{ justify-self: left; }     /* center each block */
  .pro-footer .f-logo{ justify-content: left; }    /* brand row center */
  .pro-footer .fsocial{ justify-content: left; }   /* icons center */
}

/* Header */
.site-header{
  position: sticky; top: 0;
  z-index: 9999;
  background:#fff;
  border-bottom:1px solid #e5e7eb;
  box-shadow:0 2px 6px rgba(0,0,0,.05);
}

.nav-wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px;
}

/* Brand */
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:#111}
.logo-badge{width:32px;height:32px;border-radius:6px;display:grid;place-items:center;background:#111;color:#fff;font-weight:700}

/* Menu */
.nav{display:flex; gap:16px;}
.nav-link{
  text-decoration:none;
  color:#111827;
  font-weight:500;
  padding:8px 10px;
  border-radius:6px;
}
.nav-link:hover{background:#f3f4f6}

/* Responsive adjustment */
@media(max-width:768px){
  .nav{gap:10px;}
  .nav-link{padding:6px 8px; font-size:14px;}
}


/* ---- Force nav to always show on all screens ---- */
.nav {
  display:flex !important;
  position:static !important;
  background:none !important;
  border:0 !important;
  flex-direction:row !important;
  width:auto !important;
  padding:0 !important;
}

.nav-link {
  color:#111 !important;
  font-weight:500;
  text-decoration:none;
  padding:8px 10px;
}

.nav-link:hover {
  background:#f3f4f6;
  border-radius:6px;
}

/* === GREEN THEME PACK (logo-match) === */
:root{
  /* Emerald palette */
  --primary:#22c55e;   /* emerald-500 */
  --accent:#16a34a;    /* emerald-600 */
  --ring:rgba(34,197,94,.25);
}

/* Heading gradient words like "Plan" & "Build" */
.grad{
  background:linear-gradient(90deg,#22c55e,#86efac);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* Primary buttons */
.btn{
  background:linear-gradient(90deg,#22c55e,#16a34a);
  color:#fff;border:none;
  box-shadow:0 10px 24px rgba(22,163,74,.28);
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(22,163,74,.38) }

/* Ghost buttons stay white outline on dark hero – ok */

/* Chips/badges that used primary */
.owner-role{
  background:rgba(34,197,94,.10);
  color:#16a34a;
  border:1px solid rgba(34,197,94,.25);
}

/* Feature cards ring & icon tint */
.ibadge{
  background:linear-gradient(135deg, rgba(34,197,94,.12), rgba(22,163,74,.12));
  border:1px solid rgba(34,197,94,.25);
  color:#16a34a;
}
.fcard .ring{
  background:linear-gradient(120deg, rgba(34,197,94,.38), rgba(22,163,74,.32));
}

/* Why-choose section heading gradient */
.why-choose .grad{
  background:linear-gradient(90deg,#22c55e,#16a34a);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* Featured Work heading gradient */
.featured-work .grad{
  background:linear-gradient(90deg,#22c55e,#16a34a);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* Newsletter CTA button */
.nl-form button{
  background:linear-gradient(90deg,#22c55e,#16a34a);
  box-shadow:0 8px 18px rgba(22,163,74,.28);
}
.nl-form button:hover{ box-shadow:0 12px 24px rgba(22,163,74,.38) }

/* Services page hero already uses var(--primary/--accent) → turns green automatically */

/* Small links & focus */
.mlink::after{ background:linear-gradient(90deg,#22c55e,#16a34a); }

/* Footer social hover slight green tint (subtle) */
.fsocial a:hover{ color:#22c55e; }


.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.brand-logo {
  height: 40px; /* size adjust kar sakte ho */
  width: auto;
  display: block;
}

.brand-name {
  font-size: 20px;
  font-weight: 600;
  color: #111;
}