/* ==================================================================
   EMPIREBOOST — FAMOUS CONTRACTORS / VIDEOS / CATEGORIES PAGE
   Shown right after "List Your Business" is submitted.
   Brand-matched to partner.css / indexcss.css. Fully responsive:
   laptop / desktop, tablet, and mobile (with bottom nav on mobile).
================================================================== */

:root{
  --blue:#1976d2;
  --blue-deep:#0d47a1;
  --blue-light:#42a5f5;
  --orange:#ff5a1f;
  --orange-deep:#ff5722;
  --red:#e53935;
  --green:#2e7d32;
  --text:#222;
  --muted:#777;
  --bg:#f3f4f6;
  --radius:16px;
  --nav-h:66px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Poppins',sans-serif;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  /* room for fixed bottom nav on mobile */
  padding-bottom:var(--nav-h);
}
a{text-decoration:none;color:inherit;}
button{font-family:inherit;border:none;cursor:pointer;}
img{display:block;max-width:100%;}

.wrap{max-width:1600px;margin:0 auto;padding:0 18px;}

/* ============ TOP STRIP (same language as partner.css) ============ */
.fc-topbar{
  background:#fff;
  border-bottom:1px solid #ececec;
  position:sticky;top:0;z-index:60;
}
.fc-topbar-inner{
  max-width:1240px;margin:0 auto;padding:14px 18px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.fc-back{
  display:flex;align-items:center;gap:6px;
  font-size:13.5px;font-weight:600;color:#555;cursor:pointer;flex-shrink:0;
}
.fc-back .material-icons-outlined{font-size:19px;}
.fc-logo{font-size:20px;font-weight:800;color:var(--red);flex-shrink:0;}
.fc-logo span{color:var(--blue);}
.fc-call{
  display:flex;align-items:center;gap:6px;
  font-size:12.5px;font-weight:600;color:var(--blue);
  border:1.5px solid #dce6f5;background:#f3f8ff;
  padding:8px 14px;border-radius:30px;white-space:nowrap;
}
.fc-call .material-icons-outlined{font-size:17px;}

/* ============ SECTION HEAD ============ */
.section{padding:36px 0;}
.section.tight{padding:22px 0;}
.section-head{margin-bottom:20px;text-align:center;}
.section-head .eyebrow{
  display:inline-block;font-size:12px;font-weight:700;letter-spacing:.4px;
  color:var(--blue);background:#eaf3ff;padding:5px 14px;border-radius:20px;margin-bottom:8px;
}
.section-head h2{font-size:24px;font-weight:800;color:var(--text);}
.section-head p{font-size:13.5px;color:var(--muted);margin-top:4px;}
.section-head .view-all{
  display:inline-block;margin-top:10px;font-size:13px;font-weight:700;color:var(--orange-deep);
}

/* divder   */
.divider{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    margin-top: 40px;
    margin-bottom: 30px;
    width:100%;
}

.lineicon{
    width:100%;
    height:2px;
    background:#16388f;
}

.icon{
    font-size:20px;
    color:#16388f;
} 


/* ==================================================================
   1) FAMOUS CONTRACTORS — 5 in a row (columns), scrolls on mobile
================================================================== */

.fc-avatar{
  width:64px;height:64px;
  margin:0 auto 14px;
  border-radius:22px;
  display:flex;align-items:center;justify-content:center;
  color:#fff;
  background:var(--fc-grad, linear-gradient(150deg,#42a5f5,#1565c0));
  box-shadow:0 10px 22px var(--fc-shadow, rgba(21,101,192,.35)),
             inset 0 1px 0 rgba(255,255,255,.28);
  transition:transform .3s ease, box-shadow .3s ease;
}
.fc-avatar .material-icons-outlined{
  font-size:30px;
  line-height:1;
}

.fc-card:hover .fc-avatar{
  transform:translateY(-3px) rotate(-4deg);
  box-shadow:0 16px 30px var(--fc-shadow, rgba(21,101,192,.45));
}

/* small phones ≤380px */
.fc-avatar .material-icons-outlined{ font-size:22px; }

/* tablet 600–991px */
.fc-avatar .material-icons-outlined{ font-size:30px; }

/* laptop ≥992px */
.fc-avatar .material-icons-outlined{ font-size:32px; }

/* wide ≥1280px */
.fc-avatar .material-icons-outlined{ font-size:36px; }

/* ultra-wide ≥1600px */
.fc-avatar .material-icons-outlined{ font-size:40px; }


/* ==================================================================
   1) FAMOUS CONTRACTORS — colour cards, ratings, verified badge
================================================================== */
.fc-row{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:16px;
}
.fc-card{
  position:relative;background:#fff;border-radius:18px;
  padding:20px 14px 16px;text-align:center;
  box-shadow:0 6px 20px rgba(0,0,0,.06);
  border:1px solid #eef0f4;border-top:4px solid var(--acc,#1976d2);
  cursor:pointer;transition:transform .3s, box-shadow .3s;
  /* Ab <a> link hai (SEO-crawlable) — link ka underline/blue color hatao,
     block layout rakho taaki card content pehle jaisa stack rahe. */
  display:block;text-decoration:none;color:inherit;
}
.fc-card:hover{transform:translateY(-6px);box-shadow:0 14px 30px rgba(0,0,0,.12);}

.fc-verified{
  position:absolute;top:10px;right:10px;
  display:inline-flex;align-items:center;gap:3px;
  font-size:9.5px;font-weight:700;color:#37a166;
  background:#e7f8ee;padding:3px 8px 3px 6px;border-radius:20px;
}
.fc-verified .material-icons-outlined{font-size:12px;}

.fc-avatar{
  width:64px;height:64px;margin:6px auto 14px;
  border-radius:20px;
  display:flex;align-items:center;justify-content:center;
  color:var(--acc,#1565c0);background:var(--soft,#eaf3ff);
  transition:transform .3s ease;
}
.fc-avatar .material-icons-outlined{font-size:30px;line-height:1;}
.fc-card:hover .fc-avatar{transform:translateY(-3px) rotate(-4deg);}

.fc-card h4{font-size:14px;font-weight:700;margin-bottom:1px;}
.fc-sub{font-size:11px;color:var(--muted);margin-bottom:9px;}

.fc-rating{display:flex;align-items:center;justify-content:center;gap:3px;margin-bottom:5px;}
.fc-rating .star{font-size:16px;color:#ffb300;}
.fc-rating b{font-size:14px;font-weight:700;color:var(--text);}
.fc-reviews{font-size:11px;color:var(--muted);}

.fc-projects{
  display:inline-block;font-size:10.5px;font-weight:600;color:var(--acc);
  background:var(--soft);padding:3px 10px;border-radius:20px;margin-bottom:12px;
}

.fc-view-btn{
  width:100%;padding:9px 0;border-radius:9px;font-size:12.5px;font-weight:700;
  background:var(--soft);color:var(--acc);transition:.2s;
  /* Ab <span> hai (<button> nahi, kyunki wo <a> ke andar invalid tha) —
     full-width + centered dikhne ke liye block. */
  display:block;text-align:center;
}
.fc-view-btn:hover{background:var(--acc);color:#fff;}
/* ==================================================================
   2) VIDEOS — 5 in a row (columns)
================================================================== */
.vid-row{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:16px;
}
.vid-card{
  background:#fff;border-radius:var(--radius);overflow:hidden;
  box-shadow:0 6px 20px rgba(0,0,0,.06);cursor:pointer;
  transition:transform .3s, box-shadow .3s;
}
.vid-card:hover{transform:translateY(-6px);box-shadow:0 12px 28px rgba(0,0,0,.1);}
.vid-thumb{
  position:relative;height:110px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--blue-deep),var(--blue) 60%,var(--blue-light));
}
.vid-thumb .material-icons-outlined{font-size:20px;color:#fff;opacity:.85;}
.vid-play{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
}
.vid-play span{
  width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.92);
  display:flex;align-items:center;justify-content:center;color:var(--blue-deep);
  font-size:20px;
}
.vid-duration{
  position:absolute;bottom:6px;right:6px;background:rgba(0,0,0,.65);color:#fff;
  font-size:10px;font-weight:600;padding:2px 6px;border-radius:5px;
}
.vid-info{padding:10px 12px 14px;}
.vid-info h4{font-size:12.5px;font-weight:700;line-height:1.35;margin-bottom:3px;}
.vid-info .trade{font-size:11px;color:var(--muted);}

/* ==================================================================
   3) CATEGORIES — name + sub-types, one row per category
================================================================== */
.cat-block{margin-bottom:14px;}
.cat-row{
  display:flex;align-items:center;gap:14px;
  background:#fff;border-radius:14px;padding:12px 16px;
  box-shadow:0 4px 14px rgba(0,0,0,.05);
}
.cat-name{
  flex-shrink:0;width:150px;font-size:14px;font-weight:700;color:var(--text);
  display:flex;align-items:center;gap:8px;
}
.cat-name .ic{font-size:18px;}
.cat-subs{
  display:flex;gap:8px;overflow-x:auto;scroll-behavior:smooth;
  padding-bottom:2px;
}
.cat-subs::-webkit-scrollbar{display:none;}
.cat-chip{
  flex-shrink:0;white-space:nowrap;font-size:12px;font-weight:600;color:var(--blue);
  background:#eaf3ff;border:1px solid #dce6f5;padding:7px 14px;border-radius:20px;
}
.cat-chip:hover{background:var(--blue);color:#fff;border-color:var(--blue);}

/* ==================================================================
   BOTTOM NAV — mobile only (Home / More / Partner), matches indexcss.css
================================================================== */
nav.bottom-nav{
  position:fixed;left:0;right:0;bottom:0;
  background:#fff;height:var(--nav-h);
  display:flex;justify-content:space-around;align-items:center;
  border-top:1px solid #ececec;
  box-shadow:0 -5px 20px rgba(0,0,0,.08);
  z-index:100;
}
.nav{
  display:flex;flex-direction:column;align-items:center;
  font-size:11px;color:#777;cursor:pointer;transition:.3s;position:relative;
}
.nav span.material-icons-outlined{font-size:24px;margin-bottom:2px;}
.nav.active{color:var(--blue-deep);}
.nav:hover{color:var(--blue-deep);}
.nav-badge{
  position:absolute;top:-4px;right:6px;background:var(--orange-deep);color:#fff;
  font-size:9px;font-weight:700;width:16px;height:16px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}

/* ==================================================================
   RESPONSIVE — TABLET (600–991px): 3 columns
================================================================== */
@media (min-width:600px) and (max-width:991px){
  .fc-row{grid-template-columns:repeat(3,1fr);}
  .vid-row{grid-template-columns:repeat(3,1fr);}
  .cat-name{width:120px;font-size:13px;}
}

/* ==================================================================
   RESPONSIVE — LAPTOP / DESKTOP (≥992px)
================================================================== */
@media (min-width:992px){
  body{padding-bottom:0;}          /* no bottom nav space needed */
  nav.bottom-nav{display:none;}    /* bottom nav is mobile-only */

  /* .wrap lives inside .desktop-inner (already centred + padded),
     so drop its own max-width/padding to avoid double margins and
     let contractor sections fill the full laptop width. */
  .wrap{max-width:100%;padding:0;}

  .section{padding:34px 0;}        /* was 52px — trimmed vertical space */
  .section-head h2{font-size:28px;}
  .fc-row{gap:22px;}
  .vid-row{gap:22px;}
  .vid-thumb{height:130px;}

  /* ---- Famous Contractors: larger text / icons on laptop+ ---- */
  .fc-card{padding:26px 20px 22px;border-radius:20px;}
  .fc-avatar{width:88px;height:88px;border-radius:26px;margin-bottom:18px;}
  .fc-avatar .material-icons-outlined{font-size:44px;}
  .fc-card h4{font-size:19px;margin-bottom:4px;}
  .fc-card .trade{font-size:13.5px;min-height:auto;}
  .fc-card .stars{font-size:17px;margin-bottom:14px;}
  .fc-view-btn{font-size:15px;padding:12px 0;border-radius:10px;}

  /* ---- Categories & Sub-Types: larger on laptop only ---- */
  .cat-block{margin-bottom:20px;}
  .cat-row{gap:22px;padding:20px 26px;border-radius:18px;}
  .cat-name{
    width:230px;
    font-size:20px;
    gap:12px;
  }
  .cat-name .ic{font-size:26px;}
  .cat-subs{gap:12px;}
  .cat-chip{
    font-size:16px;
    font-weight:600;
    padding:11px 22px;
    border-radius:26px;
  }
}

/* ==================================================================
   RESPONSIVE — MOBILE (≤599px): horizontal scroll rows, single-col cats
================================================================== */
@media (max-width:599px){
  .wrap{padding:0 14px;}
  .section{padding:26px 0;}
  .section-head h2{font-size:19px;}
  .section-head p{font-size:12.5px;}

  /* keep the "5 in a row" feel by scrolling instead of squeezing */
  .fc-row, .vid-row{
    display:flex;
    /*overflow-x:auto;*/
    /*scroll-snap-type:x mandatory;*/
    gap:12px;
    padding-bottom:6px;
  }
  .fc-row::-webkit-scrollbar, .vid-row::-webkit-scrollbar{display:none;}
  .fc-card{min-width:135px;scroll-snap-align:start;}
  .vid-card{min-width:150px;scroll-snap-align:start;}
  .vid-thumb{height:90px;}

  .cat-row{flex-direction:column;align-items:flex-start;gap:8px;}
  .cat-name{width:auto;}
  .cat-subs{width:100%;}
}
/* ==================================================================
   CLICKABLE FAMOUS CARDS + SEARCH EMPTY STATE
================================================================== */
.fc-card{cursor:pointer;}
.fc-empty{
  text-align:center;color:var(--muted);font-size:14px;font-weight:500;
  padding:14px 0 2px;
}

/* ==================================================================
   SITE FOOTER — contractor / construction themed (all screens)
================================================================== */
.site-footer{
  background:#0d47a1;
  color:#ffffff;
  margin-top:30px;
  border-top:3px solid var(--orange);
  position:relative;
}
/* faint blueprint-grid texture */
.site-footer::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:26px 26px;
}
.site-footer > *{position:relative;z-index:1;padding: 10px 50px 30px 60px; /* top | right | bottom | left */}

.sf-cta{
  max-width:1600px;margin:0 auto;padding:26px 22px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.sf-cta-text h3{color:#fff;font-size:19px;font-weight:700;line-height:1.3;}
.sf-cta-text p{font-size:13.5px;margin-top:4px;color:#9aa6ba;}
.sf-cta-btn{
  display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(135deg,var(--orange),var(--orange-deep));
  color:#fff;font-weight:700;font-size:14px;
  padding:13px 22px;border-radius:30px;white-space:nowrap;
  box-shadow:0 8px 20px rgba(255,90,31,.30);transition:transform .2s;
}
.sf-cta-btn .material-icons-outlined{font-size:19px;}
.sf-cta-btn:hover{transform:translateY(-2px);}

.sf-main{
  max-width:1600px;margin:0 auto;padding:34px 22px 10px;
  display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:30px;
}
.sf-brand p{font-size:13px;line-height:1.7;margin:12px 0 16px;max-width:330px;}
.footer-logo{font-size:24px;font-weight:800;color:#fff;letter-spacing:.3px;}
.footer-logo span{color:var(--blue);}
.sf-social{display:flex;gap:10px;align-items:center;}
.sf-social a, .sf-insta-btn{
  width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.08);color:#cfd6e2;font-size:15px;transition:.2s;
  border:none;cursor:pointer;font-family:inherit;
}
.sf-social a:hover, .sf-insta-btn:hover,
.sf-social a:active, .sf-insta-btn:active,
.sf-social a:focus-visible, .sf-insta-btn:focus-visible{
  background:var(--blue);color:#fff;transform:translateY(-2px);
}
/* Tapped icon (mobile) stays visibly highlighted, not just a flash on touch */
.sf-social a.tapped, .sf-insta-btn.tapped{background:var(--blue);color:#fff;}

/* Instagram icon -> "Partner / Customer" link menu */
.sf-insta-wrap{position:relative;}
.sf-insta-menu{
  display:none;position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);
  background:#fff;border-radius:12px;box-shadow:0 10px 26px rgba(0,0,0,.25);
  padding:6px;min-width:150px;z-index:20;
}
.sf-insta-menu.open{display:block;}
.sf-insta-menu::after{
  content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:6px solid transparent;border-top-color:#fff;
}
.sf-insta-menu a{
  display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:8px;
  font-size:13px;font-weight:600;color:#1f2430;text-decoration:none;white-space:nowrap;transition:.15s;
}
.sf-insta-menu a:hover{background:#f0f4fa;color:var(--blue);}
.sf-insta-menu a i{font-size:14px;color:#8a93a3;width:16px;text-align:center;}
.sf-col h4{color:#fff;font-size:14.5px;font-weight:600;margin-bottom:14px;}
.sf-col ul{list-style:none;}
.sf-col li{
  font-size:13px;margin-bottom:11px;color:#ffffff;cursor:pointer;transition:.2s;
  display:flex;align-items:center;gap:8px;
}
.sf-col li:hover{color:#fff;}
.sf-contact li{cursor:default;}
.sf-contact i{color:var(--orange);width:16px;text-align:center;}

.sf-bottom{
  max-width:1600px;margin:0 auto;padding:16px 22px 22px;
  border-top:1px solid rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;
  font-size:12.5px;color:#8592a8;
}
.sf-verified{display:inline-flex;align-items:center;gap:7px;color:#8bd4a5;}
.sf-verified i{color:#37c871;}

/* footer — tablet */
@media(max-width:991px){
  .sf-main{grid-template-columns:repeat(2,1fr);gap:26px 30px;}
  .sf-brand{grid-column:1 / -1;}
}
/* footer — mobile */
@media(max-width:599px){
  .sf-cta{flex-direction:column;align-items:flex-start;padding:22px 18px;}
  .sf-cta-btn{width:100%;justify-content:center;}
  .sf-main{grid-template-columns:1fr 1fr;padding:26px 18px 6px;gap:22px 24px;}
  .sf-brand{grid-column:1 / -1;}
  .sf-bottom{padding:16px 18px 24px;}
  .sf-cta-text h3{font-size:17px;}
}


/* ==================================================================
   3) CATEGORIES — redesigned tappable cards + native promo
================================================================== */
.cat-card{
  display:block;background:#fff;border-radius:18px;
  padding:16px 16px 14px;margin-bottom:14px;
  box-shadow:0 4px 16px rgba(0,0,0,.05);
  border:1px solid #eef0f4;border-left:5px solid var(--acc,#1976d2);
  cursor:pointer;transition:transform .25s ease, box-shadow .25s ease;
}
.cat-card:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(0,0,0,.10);}

.cat-head{display:flex;align-items:center;gap:14px;margin-bottom:12px;}
.cat-ic{
  flex-shrink:0;width:50px;height:50px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;font-size:24px;
  background:var(--soft,#eaf3ff);
}
.cat-meta{flex:1;min-width:0;}
.cat-title{font-size:15.5px;font-weight:700;color:var(--text);}
.cat-stat{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--muted);margin-top:2px;}
.cat-stat .dot{width:7px;height:7px;border-radius:50%;background:#37c871;box-shadow:0 0 0 3px rgba(55,200,113,.18);}
.cat-go{
  flex-shrink:0;font-size:20px;color:var(--acc);background:var(--soft);
  width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;transition:transform .25s;
}
.cat-card:hover .cat-go{transform:translateX(3px);}

.cc-subs{display:flex;gap:8px;overflow-x:auto;scroll-behavior:smooth;padding-bottom:2px;}
.cc-subs::-webkit-scrollbar{display:none;}
.cc-chip{
  flex-shrink:0;white-space:nowrap;font-size:12.5px;font-weight:600;color:var(--acc);
  background:var(--soft);border:1px solid transparent;
  padding:8px 15px;border-radius:20px;transition:.2s;
}
.cc-chip.top{background:var(--acc);color:#fff;}
.cc-chip:hover{background:var(--acc);color:#fff;transform:translateY(-1px);}

/* ---- native promo / featured card ---- */
.cat-promo{
  position:relative;display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap;margin-bottom:14px;padding:18px;border-radius:18px;
  background:linear-gradient(120deg,#0d47a1,#1976d2 55%,#ff5a1f);
  color:#fff;overflow:hidden;cursor:pointer;
  box-shadow:0 10px 26px rgba(13,71,161,.28);transition:transform .25s;
}
.cat-promo:hover{transform:translateY(-3px);}
.cat-promo::after{content:"";position:absolute;right:-40px;top:-40px;width:160px;height:160px;border-radius:50%;background:rgba(255,255,255,.08);}
.promo-badge{position:absolute;top:10px;right:12px;font-size:9.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;background:rgba(255,255,255,.20);padding:3px 9px;border-radius:20px;}
.promo-left{display:flex;align-items:center;gap:14px;z-index:1;}
.promo-emoji{flex-shrink:0;width:48px;height:48px;border-radius:14px;font-size:26px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.18);}
.promo-title{font-size:16px;font-weight:700;line-height:1.25;}
.promo-sub{font-size:12.5px;opacity:.9;margin-top:3px;}
.promo-btn{display:inline-flex;align-items:center;gap:2px;z-index:1;background:#fff;color:#0d47a1;font-weight:700;font-size:13.5px;padding:10px 16px;border-radius:26px;white-space:nowrap;}
.promo-btn .material-icons-outlined{font-size:18px;}

/* laptop+ */
@media (min-width:992px){
  .cat-card{padding:20px 22px 18px;border-radius:20px;margin-bottom:18px;}
  .cat-ic{width:60px;height:60px;border-radius:16px;font-size:30px;}
  .cat-title{font-size:19px;}
  .cat-stat{font-size:13px;}
  .cat-go{width:40px;height:40px;font-size:24px;}
  .cc-chip{font-size:15px;padding:11px 22px;border-radius:26px;}
  .cc-subs{gap:12px;}
  .cat-promo{padding:24px 26px;}
  .promo-title{font-size:20px;}
  .promo-sub{font-size:14px;}
  .promo-btn{font-size:15px;padding:12px 20px;}
}

.nav#partner {
  position: relative;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  border-radius: 12px;
  padding: 6px 10px;
  color: #ffffff !important;
  font-weight: 600;
  box-shadow: 0 3px 10px rgba(37, 99, 235, 0.35);
  transform: translateY(-3px);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.nav#partner .material-icons-outlined {
  color: #ffffff !important;
}

.nav#partner:active {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3);
}


.footer-section2 {
    background: #001bb3;
    color: #fff;
    padding: 50px 20px 20px;
    font-family: Arial, sans-serif;
    border-top: 2px solid rgba(255,255,255,.35);
}

/* TITLE */
#footerh2 {
    text-align: center;
    font-size: 28px;
    margin-bottom: 25px;
    color: #fff;
    line-height: 1.3;
    padding: 0 10px;   /* breathing room so it never touches the screen edge */
}

@media (max-width:599px){
  .footer-section2{padding:32px 16px 16px;}
  #footerh2{font-size:21px;margin-bottom:16px;}
}

/* CITY GRID */
.city-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    max-height: 320px;
    overflow-y: auto;
    padding: 10px;
    /* Firefox: a visible thin scrollbar instead of relying on the
       browser's auto-hide overlay (which many phones hide entirely). */
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.55) rgba(255,255,255,.12);
}
/* Chrome/Safari/mobile WebKit — same idea, always visible, not just on hover */
.city-grid::-webkit-scrollbar{ width: 6px; }
.city-grid::-webkit-scrollbar-track{ background: rgba(255,255,255,.12); border-radius: 6px; }
.city-grid::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.55); border-radius: 6px; }
.city-grid::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,.75); }

/* CITY TAG STYLE — light glass pill so it stays visible on the blue footer */
.city-grid span,
.city-grid a {
    display: inline-block;
    background: rgba(255,255,255,.12);
    padding: 6px 12px;
    font-size: 13px;
    border-radius: 20px;
    color: #fff;
    text-decoration: none;
    border: 1px solid rgba(255,255,255,.3);
    cursor: pointer;
    transition: 0.3s;
}

/* Hover sirf MOUSE wale devices par — mobile par chipakta nahi */
@media (hover: hover) and (pointer: fine) {
    .city-grid span:hover,
    .city-grid a:hover {
        background: #fff;
        color: #001bb3;
        border-color: #fff;
        transform: scale(1.05);
    }
}

/* Touch par: dabao to pop, ungli uthao to wapas — instant */
.city-grid span:active,
.city-grid a:active {
    background: #fff;
    color: #001bb3;
    border-color: #fff;
    transform: scale(1.05);
}

/* FOOTER BOTTOM — single rule (was accidentally duplicated), with
   flex-wrap so it never overflows regardless of exact screen width
   instead of relying only on the breakpoint below. */
.lfooter{
  display: flex; flex-wrap: wrap; flex-direction: row;
  justify-content: space-between; align-items: center; gap: 12px;
  margin-top: 25px; padding: 10px 20px 30px;
}

.lfooter img {
    width: 140px;
    max-width: 40vw;
    margin-bottom: 10px;
}

.lfooter p {
    font-size: 13px;
    color: #fff;
}

/* LINE — clear white divider between the city grid and the bottom bar */
.line2 {
    height: 1px;
    background: rgba(255,255,255,0.35);
    margin-top: 20px;
}

/* Logo + "Verified contractor network" badge, side by side */
.lfooter-brand{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.sf-verified2{display:inline-flex;align-items:center;gap:7px;color:#8bd4a5;font-size:12.5px;font-weight:600;white-space:nowrap;}
.sf-verified2 i{color:#37c871;}

@media (max-width:599px){
  /* Logo + badge + copyright stay together on one row (wrapping only
     on the very narrowest phones as a safety net), instead of being
     forced onto three separate stacked lines. */
  .lfooter{flex-wrap:wrap;justify-content:space-between;gap:8px 14px;padding:0px 2px 2px; width: 100%;}
  .lfooter-brand{gap:8px;}
  .lfooter img{width:50px;max-width:50px;margin-bottom:0;}
  .sf-verified2{font-size:6px;}
  .lfooter p{font-size:6px;}
}

/* ---- Copyright text: hover sirf mouse par, warna touch par chipak jaata tha ---- */
.act {
    transition: color .3s, font-size .3s;
    margin-top: 1%;
    

}
@media (hover: hover) and (pointer: fine) {
    .act:hover {
        color: rgb(128, 152, 228);
        font-size: 12px;
    }
}
.act:active {
    color: rgb(58, 84, 186);
}

/* ---- Bottom logo: transition + hover(mouse only) + tap-and-return(touch) ---- */
.footerlogo {
    transition: transform .3s ease;
}
@media (hover: hover) and (pointer: fine) {
    .footerlogo:hover {
        transform: scale(1.2);
    }
}
/* Touch par: dabate hi bada, chhodte hi wapas apni jagah */
.footerlogo:active {
    transform: scale(1.2);
}


.footer-section {
    background: #001bb3 !important;
    color: #fff;
    padding: 50px 20px 53px;
    font-family: Arial, sans-serif;
    border-radius: 10px;
    
}

/* GRID LAYOUT */
.footer-section {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.footer-column{
    margin-top: 20px;
    margin-left: 10px;
    color: white;
}

/* FOOTER HEADINGS */
.footer-column h3 {
    font-size: 16px;
    margin-bottom: 12px;
    color: #f5c542;
    /* letter-spacing: 1px; */
}

/* LINKS */
.footer-column .a {
    display: block;
    color: #ffffff;
    text-decoration: none;
    margin: 8px 0;
    font-size: 14px;
    transition: 0.3s;
}

.footer-column .a:hover {
    color: #fff;
    padding-left: 5px;
}

/* OUR SERVICES — scrolls up/down within its own box instead of making
   the footer very tall, and its links are plain white (not the grey
   used by the other footer column). Height is tuned so exactly ~6
   categories are visible before you need to scroll for the rest. */
.services-scroll{
    max-height: 164px;   /* ~6 links (18px line-height + 8px gap each) */
    overflow-y: auto;
    padding-right: 6px;
}
.services-scroll .a{
    color: #fff;
    line-height: 18px;
}
.services-scroll .a:hover{
    color: #f5c542;
}
.services-scroll::-webkit-scrollbar{ width: 6px; }
.services-scroll::-webkit-scrollbar-track{ background: rgba(255,255,255,.08); border-radius: 6px; }
.services-scroll::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.35); border-radius: 6px; }
.services-scroll::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,.55); }

/* OFFICE BOXES */
.headoffice,
.techoffice {
    font-size: 13px;
    line-height: 1.6;
    color: #ccc;
    padding: 10px;
    border-left: 2px solid #f5c542;
    margin-top: 20px;
}

/* LINE */
.line2 {
    grid-column: 1 / -1;
    height: 1px;
    background: rgba(255,255,255,0.2);
    margin-top: 15px;
}


@media (max-width:500px) {
  /* FOOTER 1 */
    .footer-section{
        grid-template-columns:1fr;
        gap:18px;
        padding:30px 15px;
    }

    .footer-column{
        margin:0;
    }

    .footer-column h3{
        font-size:15px;
    }

    .footer-column .a{
        font-size:13px;
    }

    .services-scroll{
        max-height: 170px;
    }

    .headoffice,
    .techoffice{
        font-size:12px;
        margin-top:10px;
        border-left:3px solid #f5c542;
    }

  
}