/* ============================================================
   Compare Tech Solutions — Main Stylesheet
   Corporate 3 Theme Implementation
   ============================================================ */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=Roboto:wght@300;400;500&display=swap');

/* ============================================================
   CSS Variables
   ============================================================ */
:root {
  /* ── Brand palette ── */
  --primary-dark:   #0B1D3A;
  --primary:        #1565FF;
  --primary-hover:  #2C7BFF;
  --accent:         #00B4DB;
  --bg-light:       #E6F0FF;
  --bg-page:        #F5F9FF;

  /* ── Aliases kept for backward compat ── */
  --primary-dark-alias: #0B1D3A;
  --secondary:    #0B1D3A;
  --green:        #27ae60;
  --gradient:     linear-gradient(135deg, #1565FF 0%, #0B1D3A 100%);
  --white:        #ffffff;
  --light:        #F5F9FF;
  --light2:       #E6F0FF;
  --text:         #4a5568;
  --heading:      #1A202C;
  --border:       #d0dff8;
  --shadow:       0 8px 40px rgba(11,29,58,0.10);
  --shadow-sm:    0 2px 16px rgba(11,29,58,0.07);
  --radius:       6px;
  --radius-lg:    12px;
  --transition:   all 0.3s ease;
  --font-main:    'Roboto', sans-serif;
  --font-heading: 'Poppins', sans-serif;
}

/* ============================================================
   Reset & Base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-main);
  font-size: 16px;
  line-height: 1.7;
  color: var(--text);
  background: var(--white);
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; }
a { color: var(--primary); text-decoration: none; transition: var(--transition); }
a:hover { color: var(--primary-dark); }
h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-heading);
  color: var(--heading);
  line-height: 1.25;
  font-weight: 700;
}
ul { list-style: none; }
.container { max-width: 1220px; margin: 0 auto; padding: 0 20px; }

/* ============================================================
   Utilities
   ============================================================ */
.section-pad { padding: 90px 0; }
.section-pad-sm { padding: 60px 0; }
.bg-light { background: var(--light); }
.bg-dark { background: var(--secondary); }
.bg-gradient { background: var(--gradient); }
.text-center { text-align: center; }
.text-white { color: var(--white) !important; }
.text-primary { color: var(--primary) !important; }
.fw-600 { font-weight: 600; }
.mt-4 { margin-top: 1.5rem; }
.mb-4 { margin-bottom: 1.5rem; }
.d-flex { display: flex; }
.align-center { align-items: center; }
.justify-center { justify-content: center; }
.gap-3 { gap: 1rem; }

/* Section Heading */
.section-heading { margin-bottom: 50px; }
.section-heading .sub-title {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 12px;
  position: relative;
  padding-left: 30px;
}
.section-heading .sub-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 2px;
  background: var(--primary);
}
.section-heading h2 {
  font-size: clamp(26px, 3vw, 42px);
  margin-bottom: 16px;
  color: var(--heading);
}
.section-heading p { font-size: 17px; color: var(--text); max-width: 600px; }
.section-heading.center p { margin: 0 auto; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 32px;
  border-radius: var(--radius);
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 600;
  border: 2px solid transparent;
  cursor: pointer;
  transition: var(--transition);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap; /* never allow button text to wrap */
}
.btn-primary {
  background: var(--gradient);
  color: var(--white);
  border: none;
}
.btn-primary:hover {
  background: var(--primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(21,101,255,0.35);
  color: var(--white);
}
.btn-outline {
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,0.6);
}
.btn-outline:hover {
  background: var(--white);
  color: var(--primary);
  border-color: var(--white);
}
.btn-outline-dark {
  background: transparent;
  color: var(--primary);
  border-color: var(--primary);
}
.btn-outline-dark:hover {
  background: var(--primary);
  color: var(--white);
}
/* Hero outline button on light bg */
.btn-outline-navy {
  background: transparent;
  color: var(--secondary);
  border: 2px solid var(--secondary);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 32px;
  border-radius: var(--radius);
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.btn-outline-navy:hover {
  background: var(--secondary);
  color: var(--white);
  transform: translateY(-2px);
}
.btn-whatsapp {
  background: #25D366;
  color: var(--white);
  border: none;
}
.btn-whatsapp:hover {
  background: #1ebe5c;
  color: var(--white);
  transform: translateY(-2px);
}

/* ============================================================
   Sticky Header Group
   Both the topbar and main nav are wrapped in this element.
   Making only the wrapper sticky keeps both bars pinned together
   without removing them from document flow (no body padding needed).
   ============================================================ */
.site-header-group {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  isolation: isolate;
}

/*
 * Body offset — compensates for the fixed header so page content
 * isn't hidden behind it.
 *
 * Heights:
 *   Desktop  (≥1024px): topbar ~37px + header 80px = 117px
 *   Tablet   (768-1023): topbar ~37px + header 70px = 107px
 *   Phone    (≤767px):  topbar hidden  + header 60px =  60px
 *   XS phone (≤479px):  topbar hidden  + header 54px =  54px
 */
body {
  padding-top: 117px;
}

/* ============================================================
   Top Bar
   ============================================================ */
.topbar {
  background: var(--secondary);
  padding: 8px 0;
  font-size: 13px;
  color: rgba(255,255,255,0.75);
}
.topbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.topbar-left, .topbar-right { display: flex; align-items: center; gap: 20px; }
.topbar a { color: rgba(255,255,255,0.75); font-size: 13px; }
.topbar a:hover { color: var(--primary); }
.topbar-item { display: flex; align-items: center; gap: 6px; }
.topbar-item i { color: var(--primary); font-size: 12px; }
.topbar .social-links { display: flex; gap: 10px; }
.topbar .social-links a {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  color: rgba(255,255,255,0.7);
}
.topbar .social-links a:hover { background: var(--primary); color: var(--white); }

/* ============================================================
   Header / Navigation
   ============================================================ */
.site-header {
  background: var(--white);
  box-shadow: 0 2px 20px rgba(11,29,58,0.08);
  /* Sticky behaviour is now handled by .site-header-group wrapper */
  position: relative;
  z-index: 1;
  transition: var(--transition);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
  min-height: 0;
}
.site-logo { display: flex; align-items: center; gap: 12px; }
.site-logo img { height: 50px; width: auto; }
.logo-text { line-height: 1.2; }
.logo-text .logo-name {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 800;
  color: var(--secondary);
  display: block;
}
.logo-text .logo-name span { color: var(--primary); }
.logo-text .logo-tagline {
  font-size: 11px;
  color: var(--text);
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Main Nav */
.main-nav ul { display: flex; gap: 0; }
.main-nav ul li { position: relative; }
.main-nav ul li a {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 28px 18px;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  color: var(--heading);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: var(--transition);
  white-space: nowrap;
}
.main-nav ul li a:hover,
.main-nav ul li a.active { color: var(--primary); }
.main-nav ul li a .arrow { font-size: 10px; transition: var(--transition); }
.main-nav ul li:hover > a .arrow { transform: rotate(180deg); }

/* Dropdown */
.main-nav .dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--white);
  min-width: 240px;
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  border-top: 3px solid var(--primary);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: var(--transition);
  z-index: 100;
}
.main-nav li:hover > .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.main-nav .dropdown li a {
  padding: 12px 20px;
  font-size: 13px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.main-nav .dropdown li:last-child a { border-bottom: none; }
.main-nav .dropdown li a:hover { color: var(--primary); padding-left: 28px; background: var(--light); }

/* Header CTA */
.header-cta { display: flex; align-items: center; gap: 16px; }
.header-cta .phone { font-family: var(--font-heading); font-size: 15px; font-weight: 700; color: var(--secondary); }
.header-cta .phone i { color: var(--primary); margin-right: 6px; }

/* Mobile Toggle */
.mobile-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
  padding: 5px;
}
.mobile-toggle span {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--heading);
  transition: var(--transition);
}

/* ============================================================
   Hero Section — redesigned light layout
   ============================================================ */
.hero {
  position: relative;
  background: #ffffff;
  overflow: hidden;
  padding: 0 0 0 0;
}

/* Large blue arc decoration top-right */
.hero-arc {
  position: absolute;
  top: -120px;
  right: -120px;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(21,101,255,0.12) 0%, rgba(0,180,219,0.08) 100%);
  pointer-events: none;
  z-index: 0;
}
.hero-arc-2 {
  position: absolute;
  bottom: -80px;
  right: 30%;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: rgba(21,101,255,0.05);
  pointer-events: none;
  z-index: 0;
}

.hero .container { position: relative; z-index: 1; padding-top: 64px; padding-bottom: 20px; }

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  min-height: 560px;
}

/* ── Left: content ── */
.hero-content { color: var(--heading); }

.hero-content h1 {
  font-size: clamp(30px, 3.8vw, 54px);
  line-height: 1.15;
  color: var(--heading);
  margin-bottom: 20px;
  font-weight: 800;
}
.hero-content h1 .hl-blue { color: var(--primary); }

.hero-content > p {
  font-size: 17px;
  color: var(--text);
  margin-bottom: 36px;
  line-height: 1.75;
  max-width: 480px;
}

.hero-btns { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 44px; }

/* Three service feature blocks */
.hero-features {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}
.hero-feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.hf-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--primary);
  background: var(--bg-light);
  transition: var(--transition);
}
.hero-feature:hover .hf-icon {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.hf-label {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--heading);
}
.hf-desc {
  font-size: 12px;
  color: var(--text);
  line-height: 1.4;
  max-width: 90px;
}

/* ── Right: visual panel ── */
.hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 480px;
}

.hero-device-wrap {
  position: relative;
  width: 100%;
  max-width: 520px;
}

/* Main device image (EPOS + card machine) */
.hero-device-img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  display: block;
  filter: drop-shadow(0 20px 60px rgba(11,29,58,0.18));
}

/* Floating "WHY COMPARE?" card — top right */
.hero-float-card {
  position: absolute;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(11,29,58,0.14);
  padding: 18px 22px;
  animation: floatCard 4s ease-in-out infinite;
}
@keyframes floatCard {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

.why-card {
  top: -80px;
  right: -24px;
  min-width: 210px;
  animation-delay: 0s;
}
.why-card h5 {
  font-size: 13px;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 12px;
}
.why-card ul { list-style: none; display: flex; flex-direction: column; gap: 7px; }
.why-card ul li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--heading);
  font-weight: 500;
}
.why-card ul li i { color: var(--primary); font-size: 12px; }

/* Floating "BUSINESS FUNDING" card — bottom left */
.funding-card {
  bottom: 20px;
  right: -16px;
  min-width: 200px;
  background: var(--secondary);
  animation-delay: 1.5s;
}
.funding-card .fc-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.funding-card .fc-pound {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #fff;
  flex-shrink: 0;
}
.funding-card h5 {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.funding-card p { font-size: 12px; color: rgba(255,255,255,0.7); margin-bottom: 10px; }
.funding-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 36px;
  margin-bottom: 8px;
}
.funding-bars span {
  flex: 1;
  background: rgba(255,255,255,0.25);
  border-radius: 3px;
  transition: var(--transition);
}
.funding-bars span:nth-child(1) { height: 40%; }
.funding-bars span:nth-child(2) { height: 60%; }
.funding-bars span:nth-child(3) { height: 80%; background: var(--primary); }
.funding-bars span:nth-child(4) { height: 100%; background: #fff; }
.funding-tagline { font-size: 11px; color: var(--accent); font-weight: 600; text-align: center; }

/* ── Trust bar at bottom of hero ── */
.hero-trust-bar {
  background: var(--secondary);
  padding: 16px 0;
  margin-top: 36px;
}
.hero-trust-bar .container { padding-top: 0; padding-bottom: 0; }
.htb-grid {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 20px;
  flex-wrap: wrap;
}
.htb-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.88);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.htb-item i { color: var(--accent); font-size: 16px; }
.htb-sep {
  width: 1px;
  height: 24px;
  background: rgba(255,255,255,0.15);
}

/* legacy classes no longer used in hero but kept for other pages */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(21,101,255,0.1);
  border: 1px solid rgba(21,101,255,0.3);
  border-radius: 50px;
  padding: 6px 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 24px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.hero-badge i { color: var(--accent); }
.hero-stat .num {
  font-family: var(--font-heading);
  font-size: 36px;
  font-weight: 800;
  color: var(--primary);
  display: block;
  line-height: 1;
}
.hero-stats { display: flex; gap: 32px; margin-top: 50px; }
.hero-stat .label { font-size: 13px; color: var(--text); margin-top: 4px; }

/* old hero-card kept for possible other usage */
.hero-cards { display: flex; flex-direction: column; gap: 20px; }
.hero-card {
  background: var(--bg-light);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 26px;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  transition: var(--transition);
}
.hero-card:hover { box-shadow: var(--shadow-sm); transform: translateX(-5px); }
.hero-card-icon {
  width: 48px;
  height: 48px;
  background: var(--gradient);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--white);
  flex-shrink: 0;
}
.hero-card-text h4 { color: var(--heading); font-size: 16px; margin-bottom: 4px; }
.hero-card-text p { color: var(--text); font-size: 14px; }

/* ============================================================
   Features Strip
   ============================================================ */
.features-strip { background: var(--secondary); padding: 0; }
.features-strip-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.feature-strip-item {
  padding: 40px 36px;
  border-right: 1px solid rgba(255,255,255,0.08);
  position: relative;
  overflow: hidden;
}
.feature-strip-item:last-child { border-right: none; }
.feature-strip-item::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gradient);
  transform: scaleX(0);
  transition: var(--transition);
}
.feature-strip-item:hover::before { transform: scaleX(1); }
.feature-strip-item:first-child { background: var(--primary); color: #fff; }
.feature-strip-item:first-child::before { display: none; }
.fsi-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: var(--radius);
  margin-bottom: 16px;
}
.fsi-icon { font-size: 40px; color: var(--primary); margin-bottom: 14px; }
.feature-strip-item:first-child .fsi-icon { color: var(--white); }
.fsi-title {
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 8px;
}
.fsi-desc { font-size: 14px; color: rgba(255,255,255,0.6); }
.fsi-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.feature-strip-item:first-child .fsi-link { color: var(--white); }
.fsi-link:hover { color: var(--accent); }

/* ============================================================
   About Section
   ============================================================ */
.about-section { padding: 90px 0; }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
.about-image { position: relative; }
.about-image .main-img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.about-badge {
  position: absolute;
  bottom: -30px;
  right: -30px;
  background: var(--gradient);
  color: var(--white);
  padding: 24px 30px;
  border-radius: var(--radius-lg);
  text-align: center;
  box-shadow: var(--shadow);
}
.about-badge .years { font-size: 42px; font-weight: 800; line-height: 1; display: block; }
.about-badge .label { font-size: 13px; opacity: 0.9; }
.about-content .section-heading { margin-bottom: 30px; }
.about-features { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 30px 0; }
.about-feature {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.about-feature i {
  width: 36px;
  height: 36px;
  background: rgba(21,101,255,0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 2px;
}
.about-feature h5 { font-size: 15px; margin-bottom: 2px; color: var(--heading); }
.about-feature p { font-size: 13px; color: var(--text); }

/* ============================================================
   Services Section
   ============================================================ */
.services-section { padding: 90px 0; background: var(--light); }
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.service-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 36px 30px;
  border: 1px solid var(--border);
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}
.service-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--gradient);
  transform: scaleX(0);
  transition: var(--transition);
}
.service-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-6px);
  border-color: transparent;
}
.service-card:hover::before { transform: scaleX(1); }
.service-icon {
  width: 70px;
  height: 70px;
  border-radius: var(--radius-lg);
  background: rgba(21,101,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: var(--primary);
  margin-bottom: 24px;
  transition: var(--transition);
}
.service-card:hover .service-icon {
  background: var(--gradient);
  color: var(--white);
}
.service-card h3 { font-size: 20px; margin-bottom: 12px; color: var(--heading); }
.service-card p { font-size: 14px; color: var(--text); line-height: 1.7; margin-bottom: 20px; }
.service-features { margin-bottom: 24px; }
.service-features li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text);
  padding: 4px 0;
}
.service-features li i { color: var(--green); font-size: 11px; }
.service-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--primary);
}
.service-link:hover { color: var(--secondary); gap: 10px; }

/* ============================================================
   Why Choose Us
   ============================================================ */
.why-us { padding: 90px 0; }
.why-us-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
.why-us-content .section-heading { margin-bottom: 30px; }
.why-items { display: flex; flex-direction: column; gap: 20px; }
.why-item {
  display: flex;
  gap: 20px;
  padding: 20px;
  background: var(--light);
  border-radius: var(--radius);
  border-left: 4px solid transparent;
  transition: var(--transition);
}
.why-item:hover { border-left-color: var(--primary); background: var(--white); box-shadow: var(--shadow-sm); }
.why-item-num {
  font-family: var(--font-heading);
  font-size: 36px;
  font-weight: 800;
  color: rgba(21,101,255,0.15);
  line-height: 1;
  min-width: 50px;
}
.why-item-content h4 { font-size: 17px; margin-bottom: 6px; }
.why-item-content p { font-size: 14px; color: var(--text); }
.why-us-visual { position: relative; }
.why-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.why-stat-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 24px;
  text-align: center;
  transition: var(--transition);
}
.why-stat-card:hover { box-shadow: var(--shadow); transform: translateY(-4px); }
.why-stat-card:first-child { background: var(--gradient); border-color: transparent; }
.why-stat-card .stat-num {
  font-family: var(--font-heading);
  font-size: 44px;
  font-weight: 800;
  color: var(--primary);
  display: block;
  line-height: 1;
}
.why-stat-card:first-child .stat-num { color: var(--white); }
.why-stat-card .stat-label { font-size: 14px; color: var(--text); margin-top: 8px; font-weight: 500; }
.why-stat-card:first-child .stat-label { color: rgba(255,255,255,0.85); }

/* ============================================================
   Partners Section
   ============================================================ */
.partners-section { padding: 70px 0; background: var(--light); }
.partners-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}
.partner-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: var(--transition);
  cursor: pointer;
}
.partner-card:hover {
  box-shadow: var(--shadow);
  border-color: var(--primary);
  transform: translateY(-3px);
}
.partner-logo-box {
  width: 80px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}
.partner-logo-box span {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 800;
  color: var(--secondary);
}
.partner-card .partner-name { font-size: 13px; font-weight: 600; color: var(--heading); }
.partner-card .partner-cat { font-size: 11px; color: var(--text); margin-top: 2px; }

/* ============================================================
   Testimonials
   ============================================================ */
.testimonials-section { padding: 90px 0; }

/* Carousel wrapper holds the prev/next arrows and the scroll track */
.testimonials-carousel { position: relative; }

/* Track: horizontal scroller with snap, 3 cards visible on desktop */
.testimonials-grid {
  display: flex;
  gap: 28px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;             /* Firefox */
  -ms-overflow-style: none;          /* IE/old Edge */
  padding: 6px 4px 16px;             /* breathing room so card hover/lift isn't clipped */
  cursor: grab;                      /* hint that the track is draggable */
  user-select: none;                 /* prevent text-selection during drag */
}
.testimonials-grid::-webkit-scrollbar { display: none; }

/* While the user is actively dragging */
.testimonials-grid.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;             /* 1:1 motion, no smooth lag during drag */
}
.testimonials-grid.is-dragging .testimonial-card { pointer-events: none; }

.testimonials-grid .testimonial-card {
  flex: 0 0 calc((100% - 56px) / 3); /* 3 cards visible: 100% - (2 * 28px gap) / 3 */
  scroll-snap-align: start;
}

/* Arrow buttons */
.tc-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  box-shadow: 0 4px 14px rgba(11,29,58,0.08);
  transition: var(--transition);
}
.tc-arrow:hover { background: var(--primary); color: var(--white); border-color: var(--primary); }
.tc-arrow.is-disabled { opacity: 0.35; pointer-events: none; }
.tc-arrow-prev { left: -22px; }
.tc-arrow-next { right: -22px; }

/* Pagination dots */
.tc-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
}
.tc-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: var(--border);
  cursor: pointer;
  transition: var(--transition);
}
.tc-dot.is-active { background: var(--primary); transform: scale(1.25); }
.tc-dot:hover { background: var(--primary); }

/* Tablet — 2 cards visible */
@media (max-width: 1023px) {
  .testimonials-grid .testimonial-card { flex: 0 0 calc((100% - 28px) / 2); }
  .tc-arrow-prev { left: -8px; }
  .tc-arrow-next { right: -8px; }
}
/* Mobile — 1 card visible */
@media (max-width: 767px) {
  .testimonials-grid { gap: 18px; }
  .testimonials-grid .testimonial-card { flex: 0 0 100%; }
  /* Arrows stay below the cards on mobile so they don't cover content */
  .tc-arrow { top: auto; bottom: -56px; transform: none; }
  .tc-arrow-prev { left: calc(50% - 56px); }
  .tc-arrow-next { right: calc(50% - 56px); }
  .tc-dots { margin-top: 60px; }
}
.testimonial-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  transition: var(--transition);
  position: relative;
}
.testimonial-card::before {
  content: '\201C';
  position: absolute;
  top: 20px;
  right: 28px;
  font-size: 80px;
  font-family: Georgia, serif;
  color: rgba(21,101,255,0.1);
  line-height: 1;
}
.testimonial-card:hover { box-shadow: var(--shadow); transform: translateY(-4px); }
.stars { display: flex; gap: 3px; margin-bottom: 16px; }
.stars i { color: var(--accent); font-size: 14px; }
.testimonial-text {
  font-size: 15px;
  color: var(--text);
  line-height: 1.8;
  margin-bottom: 24px;
  font-style: italic;
}
.testimonial-author { display: flex; align-items: center; gap: 14px; }
.author-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  color: var(--white);
  flex-shrink: 0;
}
.author-info h5 { font-size: 15px; margin-bottom: 2px; }
.author-info span { font-size: 13px; color: var(--text); }

/* ============================================================
   Industries
   ============================================================ */
.industries-section { padding: 90px 0; background: var(--secondary); }
.industries-section .section-heading .sub-title { color: var(--primary); }
.industries-section .section-heading h2 { color: var(--white); }
.industries-section .section-heading p { color: rgba(255,255,255,0.7); }
.industries-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.industry-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-lg);
  padding: 28px 22px;
  text-align: center;
  transition: var(--transition);
}
.industry-card:hover {
  background: rgba(21,101,255,0.15);
  border-color: var(--primary);
  transform: translateY(-4px);
}
.industry-card i { font-size: 36px; color: var(--primary); margin-bottom: 16px; display: block; }
.industry-card h4 { font-size: 16px; color: var(--white); margin-bottom: 8px; }
.industry-card p { font-size: 13px; color: rgba(255,255,255,0.6); line-height: 1.6; }

/* ============================================================
   FAQ Section
   ============================================================ */
.faq-section { padding: 90px 0; background: var(--light); }
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 50px; }
.faq-item {
  border-bottom: 1px solid var(--border);
  padding-bottom: 24px;
}
.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  cursor: pointer;
  gap: 16px;
}
.faq-question h4 {
  font-size: 16px;
  color: var(--heading);
  font-weight: 600;
  flex: 1;
  transition: var(--transition);
}
.faq-question:hover h4 { color: var(--primary); }
.faq-toggle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 12px;
  flex-shrink: 0;
  transition: var(--transition);
}
.faq-item.open .faq-toggle { background: var(--secondary); transform: rotate(45deg); }
.faq-answer {
  font-size: 14px;
  color: var(--text);
  line-height: 1.8;
  margin-top: 14px;
  display: none;
}
.faq-item.open .faq-answer { display: block; }

/* ============================================================
   CTA Banner
   ============================================================ */
.cta-banner {
  background: var(--gradient);
  padding: 80px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-banner::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -10%;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: rgba(255,255,255,0.05);
}
.cta-banner::after {
  content: '';
  position: absolute;
  bottom: -60%;
  right: -5%;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
}
.cta-banner .container { position: relative; z-index: 1; }
.cta-banner h2 { color: var(--white); font-size: clamp(26px, 3.5vw, 44px); margin-bottom: 16px; }
.cta-banner p { color: rgba(255,255,255,0.85); font-size: 18px; margin-bottom: 36px; }
.cta-btns { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.btn-white { background: var(--white); color: var(--primary); border: none; }
.btn-white:hover { background: var(--primary-dark); color: var(--white); transform: translateY(-2px); }

/* ============================================================
   Contact Section
   ============================================================ */
.contact-section { padding: 90px 0; }
.contact-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 70px; }
.contact-info .section-heading { margin-bottom: 30px; }
.contact-details { display: flex; flex-direction: column; gap: 20px; margin-bottom: 32px; }
.contact-detail {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.cd-icon {
  width: 50px;
  height: 50px;
  background: rgba(21,101,255,0.1);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--primary);
  flex-shrink: 0;
}
.cd-text h5 { font-size: 15px; color: var(--heading); margin-bottom: 4px; }
.cd-text p, .cd-text a { font-size: 14px; color: var(--text); }
.cd-text a:hover { color: var(--primary); }
.contact-map iframe {
  width: 100%;
  height: 250px;
  border-radius: var(--radius-lg);
  border: none;
  margin-top: 24px;
}

/* Contact Form */
.contact-form-wrap {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 40px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  /* Enables container queries so the form's layout responds to its own width
     (e.g. narrow service.php sidebar) — not just the viewport width. */
  container-type: inline-size;
  container-name: enqForm;
}
.contact-form-wrap h3 {
  font-size: 24px;
  margin-bottom: 8px;
  color: var(--heading);
}
.contact-form-wrap > p { font-size: 15px; color: var(--text); margin-bottom: 28px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* When the form's own container is narrow (e.g. sidebar), stack everything
   into a single column and tighten paddings — independent of viewport size. */
@container enqForm (max-width: 460px) {
  .contact-form-wrap            { padding: 22px 18px; }
  .contact-form-wrap h3         { font-size: 20px; }
  .contact-form-wrap > p        { font-size: 14px; margin-bottom: 20px; }
  .form-row                     { grid-template-columns: 1fr; gap: 0; }
  .form-group label             { font-size: 13px; }
  .form-control                 { padding: 10px 12px; font-size: 14px; }
  .enq-qty-btn span             { padding: 10px 6px; font-size: 14px; }

  /* Step nav rows (Back + Next/Submit) — stop the Submit button
     overflowing the box: shrink padding, allow wrap, equal-share buttons. */
  .contact-form-wrap .enq-step-nav {
    flex-wrap: wrap;
    gap: 10px;
  }
  .contact-form-wrap .enq-step-nav > .btn {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
    padding: 11px 14px !important;  /* override inline 13px 32px on Submit */
    font-size: 14px;
    white-space: nowrap;
  }
}
.form-group { margin-bottom: 20px; }
.form-group label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--heading);
  margin-bottom: 8px;
}
.form-group label span { color: var(--primary); }
.form-control {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px;
  font-family: var(--font-main);
  color: var(--heading);
  background: var(--white);
  transition: var(--transition);
  outline: none;
}
.form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(21,101,255,0.12); }
.form-control::placeholder { color: #aab4c4; }
textarea.form-control { resize: vertical; min-height: 120px; }
.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235a6a7e' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}
.alert {
  padding: 14px 18px;
  border-radius: var(--radius);
  margin-bottom: 20px;
  font-size: 14px;
  font-weight: 500;
}
/* Standardised 4-category alert palette — used by inquiry feedback messages.
   Colours meet WCAG AA contrast against their backgrounds.                 */
.alert-success { background: #e7f7ee; color: #1a7a3e; border-left: 4px solid #1a7a3e; }
.alert-info    { background: #e6f0ff; color: #1149a8; border-left: 4px solid #1565ff; }
.alert-warning { background: #fff4e0; color: #8a4a00; border-left: 4px solid #e67e22; }
.alert-error   { background: #fde8e8; color: #c0392b; border-left: 4px solid #c0392b; }
.alert-danger  { background: #fde8e8; color: #c0392b; border-left: 4px solid #c0392b; } /* legacy alias */

/* ============================================================
   Blog Section
   ============================================================ */
.blog-section { padding: 90px 0; background: var(--light); }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.blog-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  transition: var(--transition);
}
.blog-card:hover { box-shadow: var(--shadow); transform: translateY(-5px); }
.blog-card-img {
  height: 200px;
  background: var(--gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.blog-card-img img { width: 100%; height: 100%; object-fit: cover; }
.blog-card-img .blog-icon { font-size: 50px; color: rgba(255,255,255,0.4); }
.blog-card-body { padding: 24px; }
.blog-cat {
  display: inline-block;
  background: rgba(21,101,255,0.1);
  color: var(--primary);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 50px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}
.blog-card h4 { font-size: 17px; margin-bottom: 10px; color: var(--heading); line-height: 1.4; }
.blog-card h4 a { color: inherit; }
.blog-card h4 a:hover { color: var(--primary); }
.blog-card p { font-size: 14px; color: var(--text); margin-bottom: 16px; }
.blog-meta { display: flex; gap: 16px; font-size: 13px; color: var(--text); }
.blog-meta i { color: var(--primary); }

/* ============================================================
   Footer
   ============================================================ */
.site-footer { background: var(--secondary); padding: 70px 0 0; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 50px; padding-bottom: 50px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.footer-brand .footer-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.footer-brand .logo-name { font-family: var(--font-heading); font-size: 22px; font-weight: 800; color: var(--white); }
.footer-brand .logo-name span { color: var(--primary); }
.footer-brand p { font-size: 14px; color: rgba(255,255,255,0.6); line-height: 1.8; margin-bottom: 24px; }
.footer-social { display: flex; gap: 10px; }
.footer-social a {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.6);
  font-size: 14px;
  transition: var(--transition);
}
.footer-social a:hover { background: var(--primary); color: var(--white); }
.footer-widget h4 {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 22px;
  position: relative;
  padding-bottom: 12px;
}
.footer-widget h4::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 30px;
  height: 2px;
  background: var(--primary);
}
.footer-links li { margin-bottom: 10px; }
.footer-links a {
  font-size: 14px;
  color: rgba(255,255,255,0.6);
  transition: var(--transition);
  display: flex;
  align-items: center;
  gap: 8px;
}
.footer-links a:hover { color: var(--primary); padding-left: 6px; }
.footer-links a i { font-size: 10px; color: var(--primary); }
.footer-contact-item { display: flex; gap: 14px; margin-bottom: 16px; }
.footer-contact-item i { color: var(--primary); font-size: 16px; margin-top: 2px; }
.footer-contact-item span { font-size: 14px; color: rgba(255,255,255,0.6); line-height: 1.5; }
.footer-contact-item a { color: rgba(255,255,255,0.6); }
.footer-contact-item a:hover { color: var(--primary); }
.footer-bottom {
  padding: 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.footer-bottom p { font-size: 13px; color: rgba(255,255,255,0.5); }
.footer-bottom-links { display: flex; gap: 20px; }
.footer-bottom-links a { font-size: 13px; color: rgba(255,255,255,0.5); }
.footer-bottom-links a:hover { color: var(--primary); }

/* ============================================================
   WhatsApp Float Button
   ============================================================ */
.whatsapp-float {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 58px;
  height: 58px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: var(--white);
  box-shadow: 0 6px 25px rgba(37,211,102,0.5);
  z-index: 999;
  transition: var(--transition);
  animation: wa-pulse 2.5s infinite;
}
.whatsapp-float:hover { transform: scale(1.1); color: var(--white); }
@keyframes wa-pulse {
  0%, 100% { box-shadow: 0 6px 25px rgba(37,211,102,0.5); }
  50% { box-shadow: 0 6px 40px rgba(37,211,102,0.8); }
}

/* Back to top */
.back-to-top {
  position: fixed;
  bottom: 30px;
  left: 30px;
  width: 44px;
  height: 44px;
  background: var(--secondary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--white);
  box-shadow: var(--shadow-sm);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition);
}
.back-to-top.show { opacity: 1; visibility: visible; }
.back-to-top:hover { background: var(--primary); color: var(--white); }

/* ============================================================
   Page Title Banner
   ============================================================ */
.page-banner {
  background: var(--secondary);
  padding: 70px 0;
  position: relative;
  overflow: hidden;
}
.page-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(11,29,58,0.95), rgba(21,101,255,0.3));
}
.page-banner .container { position: relative; z-index: 1; }
.page-banner h1 { font-size: clamp(28px, 4vw, 48px); color: var(--white); margin-bottom: 12px; }
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 14px; color: rgba(255,255,255,0.7); }
.breadcrumb a { color: var(--primary); }
.breadcrumb i { font-size: 10px; }

/* ============================================================
   RESPONSIVE & ADAPTIVE LAYOUT
   Breakpoints:
     xs  — 0–479px      (small phones)
     sm  — 480–767px    (phones)
     md  — 768–1023px   (tablets)
     lg  — 1024–1279px  (small laptops)
     xl  — 1280px+      (desktops/monitors)
   ============================================================ */

/* ── 0. Global guards — prevent any horizontal overflow ────── */
/*
 * IMPORTANT: Neither <html> nor <body> may have overflow set.
 * When either has overflow:hidden the browser makes that element the
 * scroll container, which breaks position:fixed for the sticky header.
 * Horizontal overflow is instead controlled on .page-content-wrapper,
 * which is a sibling of (not a parent of) .site-header-group.
 */
html, body { overflow: visible; }

/* Content wrapper — all public page content sits here.
   Handles overflow-x so nothing scrolls horizontally,
   without interfering with the fixed header above it. */
.page-content-wrapper {
  overflow-x: hidden;
  max-width: 100vw;
}
*, *::before, *::after { box-sizing: border-box; }
img, video, iframe, embed, object, svg { max-width: 100%; height: auto; }
p, h1, h2, h3, h4, h5, h6, a, span, li, td, th {
  word-break: break-word;
  overflow-wrap: break-word;
}
.container {
  width: 100%;
  max-width: 1220px;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(14px, 4vw, 24px);
  padding-right: clamp(14px, 4vw, 24px);
}

/* ── Utility grid classes (used on all pages) ─────────────── */
/* 4-column grids */
.g-4col         { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
.g-4col.g-gap-6 { gap: 6px; }
.g-4col.g-gap-10{ gap: 10px; }
.g-4col.g-gap-28{ gap: 28px; }

/* 2-column grids */
.g-2col          { display: grid; grid-template-columns: 1fr 1fr; }
.g-2col.g-gap-14 { gap: 14px; }
.g-2col.g-gap-20 { gap: 20px; }
.g-2col.g-gap-24 { gap: 24px; }
.g-2col.g-gap-40 { gap: 40px; }
.g-2col.g-gap-50 { gap: 50px; }
.g-ai-center     { align-items: center; }
.g-mw900         { max-width: 900px; margin-left: auto; margin-right: auto; }

/* Sidebar grids */
.g-sidebar-360 { display: grid; grid-template-columns: 1fr 360px; gap: 50px; align-items: start; }
.g-sidebar-320 { display: grid; grid-template-columns: 1fr 320px; gap: 50px; align-items: start; }
.g-sidebar-300 { display: grid; grid-template-columns: 1fr 300px; gap: 50px; align-items: start; }

/* Service page layout */
.service-layout  { display: grid; grid-template-columns: 1fr 360px; gap: 50px; align-items: start; }

/* Partners auto-fill */
.g-autofill-260 { display: grid; grid-template-columns: repeat(auto-fill,minmax(260px,1fr)); gap: 22px; }

/* Related posts (blog) */
.g-related-posts { display: grid; gap: 20px; }

/* Quick contact strip */
.quick-contact-strip { display: grid; grid-template-columns: repeat(4,1fr); }
.qs-item { border-right: 1px solid rgba(255,255,255,0.08); }

/* ── 1. XL Desktop 1280px+ — nothing to override, base is desktop ─ */

/* ── 2. LG Laptop 1024–1279px ─────────────────────────────── */
@media (max-width: 1279px) {
  .hero-grid    { gap: 40px; }
  .about-grid   { gap: 50px; }
  .why-us-grid  { gap: 50px; }
  .footer-grid  { gap: 40px; }

  .g-sidebar-360 { grid-template-columns: 1fr 320px; gap: 40px; }
  .service-layout { grid-template-columns: 1fr 320px; gap: 40px; }

  /* ── Header: scale down CTA button and hide phone to free space ── */
  .header-cta .phone { display: none; }          /* hide inline phone — saves ~180px */
  .header-cta .btn {
    padding: 9px 14px;
    font-size: 12px;
    letter-spacing: 0;
    white-space: nowrap;
  }

  /* Tighten nav link spacing so everything fits */
  .main-nav ul li a {
    padding: 28px 13px;
    font-size: 13px;
  }
}

/* ── 3. MD Tablet 768–1023px ──────────────────────────────── */
@media (max-width: 1023px) {
  /* Typography scale down */
  h1 { font-size: clamp(26px, 4vw, 44px) !important; }
  h2 { font-size: clamp(22px, 3.5vw, 36px) !important; }
  h3 { font-size: clamp(18px, 2.5vw, 28px) !important; }

  /* Section padding */
  .section-pad    { padding: 70px 0; }
  .section-pad-sm { padding: 44px 0; }

  /* Top bar: hide address/hours, keep phone+email */
  .topbar .topbar-item:nth-child(3) { display: none; }
  .social-links { display: none !important; }

  /* Header */
  .header-cta .btn { padding: 10px 18px; font-size: 13px; }
  .main-nav { display: none; position: fixed; top: 80px; left: 0; right: 0; bottom: 0;
    background: var(--white); overflow-y: auto; z-index: 999; padding: 20px;
    box-shadow: var(--shadow); }
  .main-nav.open { display: block; }
  .main-nav ul { flex-direction: column; gap: 0; }
  .main-nav ul li a { padding: 14px 10px; border-bottom: 1px solid var(--border);
    font-size: 15px; }
  .main-nav .dropdown { position: static; box-shadow: none; border: none;
    opacity: 1; visibility: visible; transform: none; display: none; background: var(--light); }
  .main-nav li.open > .dropdown { display: block; }
  .mobile-toggle { display: flex; }
  .header-cta .phone { display: none; }

  /* Hero: single column */
  .hero .container { padding-top: 40px; }
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .hero-content > p { font-size: 16px; }
  .hero-btns { flex-wrap: wrap; gap: 12px; }
  .hero-stats { gap: 24px; flex-wrap: wrap; }
  .hero-stat .num { font-size: 30px; }
  .hero-visual { min-height: 320px; }
  .why-card { right: 0; top: 0; }
  .funding-card { right: 0; }

  /* Features strip: 1 col */
  .features-strip-grid { grid-template-columns: 1fr !important; }

  /* Hero feature cards: distribute full width, centered */
  .hero-features {
    width: 100%;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: nowrap;
  }
  .hero-feature {
    flex: 1 1 0;
    min-width: 0;
  }
  .hero-feature .hf-desc { max-width: none; }

  /* About: 1 col */
  .about-grid { grid-template-columns: 1fr !important; gap: 50px; }
  .about-badge { right: 0; bottom: -16px; }

  /* Services: 2 col */
  .services-grid { grid-template-columns: repeat(2,1fr) !important; }

  /* Why us: 1 col */
  .why-us-grid { grid-template-columns: 1fr !important; gap: 40px; }
  .why-stats-grid { grid-template-columns: repeat(2,1fr); }

  /* Partners: 3 col */
  .partners-grid { grid-template-columns: repeat(3,1fr) !important; }

  /* Testimonials: 1 col */
  .testimonials-grid { grid-template-columns: 1fr !important; }

  /* Industries: 2 col */
  .industries-grid { grid-template-columns: repeat(2,1fr) !important; }

  /* Blog: 2 col */
  .blog-grid { grid-template-columns: repeat(2,1fr) !important; }

  /* FAQ: 1 col */
  .faq-grid { grid-template-columns: 1fr !important; }

  /* Contact grid: 1 col */
  .contact-grid { grid-template-columns: 1fr !important; gap: 36px; }

  /* Footer: 2 col */
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 36px; }

  /* Utility grids */
  .g-4col         { grid-template-columns: repeat(2,1fr) !important; }
  .g-sidebar-360,
  .g-sidebar-320,
  .g-sidebar-300  { grid-template-columns: 1fr !important; gap: 32px !important; }
  .service-layout { grid-template-columns: 1fr !important; gap: 32px !important; }
  .g-sidebar-360 > *:last-child,
  .g-sidebar-320 > *:last-child,
  .g-sidebar-300 > *:last-child,
  .service-layout > .service-sidebar { position: static !important; top: auto !important; }
  .g-sidebar-320, .g-sidebar-300 { grid-template-columns: 1fr !important; }
  .g-2col.g-gap-50 { gap: 32px; }
  .g-2col.g-gap-40 { gap: 24px; }

  /* Quick contact strip: 2 col */
  .quick-contact-strip { grid-template-columns: repeat(2,1fr) !important; }
  .qs-item:nth-child(even) { border-right: none !important; }
  .qs-item { border-bottom: 1px solid rgba(255,255,255,0.08); }

  /* Blog/service sidebars */
  .g-sidebar-320, .g-sidebar-300 { grid-template-columns: 1fr !important; gap: 32px !important; }
}

/* ── 4. SM Phone 480–767px ────────────────────────────────── */
@media (max-width: 767px) {
  /* Section padding */
  .section-pad    { padding: 52px 0; }
  .section-pad-sm { padding: 32px 0; }
  .section-heading { margin-bottom: 28px; }
  .section-heading p { font-size: 15px; }

  /* Top bar: hide completely */
  .topbar { display: none; }

  /* Header */
  .site-header .container { height: 68px; }
  .main-nav { top: 68px; }
  .site-logo img { height: 56px; }

  /* Page banner */
  .page-banner { padding: 44px 0; }

  /* Hero */
  .hero .container { padding-top: 36px; }
  .hero-content h1 { font-size: clamp(24px, 6.5vw, 38px); }
  .hero-content > p { font-size: 15px; margin-bottom: 22px; }
  .hero-btns { flex-direction: column; gap: 10px; }
  .hero-btns .btn,
  .hero-btns .btn-outline-navy { width: 100%; justify-content: center; }
  .hero-features {
    flex-direction: column;
    gap: 14px;
    width: 100%;
  }
  .hero-feature {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 14px;
    row-gap: 4px;
    align-items: center;
    text-align: left;
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
  }
  .hero-feature .hf-icon {
    grid-row: 1 / span 2;
    align-self: center;
    flex-shrink: 0;
  }
  .hero-feature .hf-label { grid-column: 2; align-self: end; }
  .hero-feature .hf-desc {
    grid-column: 2;
    align-self: start;
    max-width: none;
  }
  .hero-stats { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; margin-top: 32px; }
  .hero-stat .num { font-size: 28px; }
  .hero-cards { grid-template-columns: 1fr !important; gap: 12px; }
  .why-card { position: static; margin-bottom: 14px; animation: none; }
  .funding-card { position: static; animation: none; }
  .hero-device-wrap { max-width: 100%; }
  .htb-sep { display: none; }
  .htb-grid { gap: 12px; justify-content: center; }

  /* About */
  .about-features { grid-template-columns: 1fr !important; }
  /* "12+ Years" badge — full width on mobile (no awkward right-side gap) */
  .about-badge {
    position: static;
    margin-top: 20px;
    display: block;
    width: 100%;
    box-sizing: border-box;
  }
  /* CTA buttons inside about content ("Read More About Us", "Book a Free Consultation")
     also stretch to full width on mobile */
  .about-content .btn,
  .about-content > a.btn {
    display: flex;
    width: 100%;
    justify-content: center;
  }

  /* When the funding-card is being hidden inline (visibility:hidden), also take it
     out of layout flow so it doesn't leave empty space below the WHY COMPARE? card. */
  .funding-card[style*="visibility:hidden"],
  .funding-card[style*="visibility: hidden"] { display: none !important; }

  /* Services: 1 col on phones */
  .services-grid { grid-template-columns: 1fr !important; }

  /* Why us stats: 2 col */
  .why-stats-grid { grid-template-columns: repeat(2,1fr); gap: 14px; }

  /* Partners: 2 col */
  .partners-grid { grid-template-columns: repeat(2,1fr) !important; gap: 12px; }

  /* Industries: 2 col */
  .industries-grid { grid-template-columns: repeat(2,1fr) !important; gap: 12px; }

  /* Blog: 1 col */
  .blog-grid { grid-template-columns: 1fr !important; }

  /* Footer: 1 col */
  .footer-grid { grid-template-columns: 1fr !important; gap: 28px; }
  .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
  .footer-bottom-links { flex-wrap: wrap; justify-content: center; gap: 12px; }
  .site-footer { padding: 44px 0 0; }

  /* CTA */
  .cta-btns { flex-direction: column; align-items: stretch; }
  .cta-btns .btn { justify-content: center; }

  /* Contact form */
  .contact-form-wrap { padding: 22px 16px; }
  .form-row { grid-template-columns: 1fr !important; gap: 0; }

  /* Utility grids */
  .g-2col { grid-template-columns: 1fr !important; gap: 14px !important; }
  .g-4col { grid-template-columns: repeat(2,1fr) !important; }

  /* Quick contact strip: 1 col on phones */
  .quick-contact-strip { grid-template-columns: 1fr !important; }
  .qs-item { border-right: none !important; }

  /* WhatsApp float */
  .whatsapp-float { width: 50px; height: 50px; font-size: 22px; bottom: 18px; right: 14px; }
  .back-to-top    { bottom: 18px; left: 14px; }

  /* Related posts */
  .g-related-posts { grid-template-columns: 1fr !important; }

  /* Service page features 2-col grid */
  .service-layout .g-2col { grid-template-columns: 1fr !important; }

  /* Enquiry form qty buttons */
  .g-4col.g-gap-6,
  .g-4col.g-gap-10 { grid-template-columns: repeat(4,1fr) !important; }
}

/* ── 5. XS Small phones ≤479px ───────────────────────────── */
@media (max-width: 479px) {
  /* Header: compact */
  .site-header .container { height: 60px; }
  .main-nav { top: 60px; }
  .site-logo img { height: 48px; }
  .header-cta .btn { padding: 8px 12px; font-size: 12px; }
  .header-cta .btn i { display: none; }

  /* Hero */
  .hero { padding: 40px 0; }
  .hero-content h1 { font-size: clamp(22px, 7vw, 32px); }
  .hero-badge { font-size: 11px; padding: 5px 12px; }

  /* Stats: 2 col compact */
  .hero-stats { gap: 10px; }
  .hero-stat .num { font-size: 24px; }
  .hero-stat .label { font-size: 11px; }

  /* Section headings */
  .section-heading h2 { font-size: clamp(20px, 6.5vw, 28px) !important; }
  .sub-title { font-size: 12px; }

  /* Why stats: 1 col */
  .why-stats-grid { grid-template-columns: 1fr !important; }
  .why-stat-card .stat-num { font-size: 36px; }

  /* Partners: 2 col */
  .partners-grid { grid-template-columns: repeat(2,1fr) !important; }

  /* Industries: 2 col */
  .industries-grid { grid-template-columns: repeat(2,1fr) !important; }

  /* Buttons */
  .btn { font-size: 13px; padding: 11px 20px; }
  .btn i { font-size: 12px; }

  /* Footer bottom links */
  .footer-bottom-links { flex-direction: column; align-items: center; gap: 8px; }

  /* Testimonial card */
  .testimonial-card { padding: 22px 18px; }

  /* FAQ */
  .faq-question h4 { font-size: 14px; }

  /* Contact form */
  .contact-form-wrap { padding: 18px 14px; }

  /* 4-col qty tiles: keep 4 across even on tiny screens */
  .g-4col.g-gap-6  { grid-template-columns: repeat(4,1fr) !important; gap: 5px !important; }
  .g-4col.g-gap-10 { grid-template-columns: repeat(4,1fr) !important; gap: 6px !important; }

  /* Enquiry form */
  .eq-qty-btn span,
  .sq-qty-btn span { padding: 8px 2px !important; font-size: 12px !important; }
}

/* ── 6. Print / misc fixes ───────────────────────────────── */
/* Sections must not overflow horizontally */
section, header, footer, main, nav, aside, article, div {
  max-width: 100%;
}
/* Remove stray right-side whitespace caused by animations/transforms */
.service-card, .testimonial-card, .blog-card,
.why-stat-card, .industry-card, .partner-card,
.hero-card {
  contain: content;
}

/* ── Logo responsive sizing ──────────────────────────────── */
.site-logo-img {
  height: 62px;       /* desktop */
  max-height: 62px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  display: block;
  transition: height 0.2s;
}
@media (max-width: 1023px) { .site-logo-img { height: 50px; max-height: 50px; max-width: 140px; } }
@media (max-width: 767px)  { .site-logo-img { height: 42px; max-height: 42px; max-width: 120px; } }
@media (max-width: 479px)  { .site-logo-img { height: 36px; max-height: 36px; max-width: 100px; } }

/* Header must clip oversized logos */
.site-header .container { overflow: visible; }
.site-logo { overflow: hidden; max-height: 80px; }

/* ── Mobile toggle always available ─────────────────────── */
.mobile-toggle { display: none; }
@media (max-width: 1023px) { .mobile-toggle { display: flex; } }

/* ── Header CTA — hide Free Consultation on xs ──────────── */
@media (max-width: 479px) {
  .header-cta .btn span,
  .header-cta .btn { display: none; }
  .mobile-toggle { display: flex !important; }
}

/* ── Features strip — tablet: 2 col, phone: 1 col ───────── */
@media (max-width: 1023px) {
  .features-strip-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
  .features-strip-grid { grid-template-columns: 1fr; }
}

/* ── Hero cards on tablet — horizontal row ───────────────── */
@media (min-width: 768px) and (max-width: 1023px) {
  .hero-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
}

/* ── About section image badge: don't overflow ───────────── */
@media (max-width: 767px) {
  .about-image { padding-bottom: 0; }
  .about-badge { position: static; margin-top: 16px; display: block; width: 100%; box-sizing: border-box; border-radius: 12px; }
}
@media (min-width: 768px) {
  .about-image { position: relative; padding-bottom: 30px; }
}

/* ── Service page sidebar: sticky only on desktop ────────── */
@media (min-width: 1024px) {
  .service-sidebar { position: sticky; top: 125px; }
}
@media (max-width: 1023px) {
  .service-sidebar { position: static !important; }
}

/* ── Blog / blog-post sidebars ───────────────────────────── */
@media (min-width: 1024px) {
  .g-sidebar-320 > *:last-child,
  .g-sidebar-300 > *:last-child { position: sticky; top: 125px; }
}
@media (max-width: 1023px) {
  .g-sidebar-320, .g-sidebar-300 { grid-template-columns: 1fr !important; gap: 32px !important; }
}

/* ── Partners grid: 5→4→3→2→2 ───────────────────────────── */
.partners-grid { grid-template-columns: repeat(5,1fr); }
@media (max-width: 1279px) { .partners-grid { grid-template-columns: repeat(4,1fr) !important; } }
@media (max-width: 1023px) { .partners-grid { grid-template-columns: repeat(3,1fr) !important; } }
@media (max-width: 767px)  { .partners-grid { grid-template-columns: repeat(2,1fr) !important; } }

/* ── Industries: 4→2→2 ──────────────────────────────────── */
@media (max-width: 1023px) { .industries-grid { grid-template-columns: repeat(2,1fr) !important; } }

/* ── Testimonials: 3→2→1 ────────────────────────────────── */
@media (max-width: 1023px) { .testimonials-grid { grid-template-columns: repeat(2,1fr) !important; } }
@media (max-width: 767px)  { .testimonials-grid { grid-template-columns: 1fr !important; } }

/* ── Blog: 3→2→1 ─────────────────────────────────────────── */
@media (max-width: 1023px) { .blog-grid { grid-template-columns: repeat(2,1fr) !important; } }
@media (max-width: 767px)  { .blog-grid { grid-template-columns: 1fr !important; } }

/* ── Services: 3→2→1 ─────────────────────────────────────── */
@media (max-width: 1023px) { .services-grid { grid-template-columns: repeat(2,1fr) !important; } }
@media (max-width: 767px)  { .services-grid { grid-template-columns: 1fr !important; } }

/* ── Footer: 4→2→1 ───────────────────────────────────────── */
@media (max-width: 1023px) { .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 32px; } }
@media (max-width: 767px)  { .footer-grid { grid-template-columns: 1fr !important; gap: 24px; } }

/* ── Why-us stat cards: 2→2→1 ───────────────────────────── */
@media (max-width: 479px) { .why-stats-grid { grid-template-columns: 1fr !important; } }

/* ── Contact quick-strip: 4→2→1 ─────────────────────────── */
@media (max-width: 1023px) {
  .quick-contact-strip { grid-template-columns: repeat(2,1fr) !important; }
  .qs-item:nth-child(even) { border-right: none !important; }
}
@media (max-width: 767px) {
  .quick-contact-strip { grid-template-columns: 1fr !important; }
  .qs-item { border-right: none !important; }
}

/* ── g-4col (services.php 4-col, about stats): 4→2→2 ────── */
@media (max-width: 1023px) { .g-4col { grid-template-columns: repeat(2,1fr) !important; } }
@media (max-width: 479px)  {
  .g-4col { grid-template-columns: repeat(2,1fr) !important; }
  /* exception: qty tile buttons always 4-across */
  .g-4col.g-gap-6,
  .g-4col.g-gap-10 { grid-template-columns: repeat(4,1fr) !important; }
}

/* ── g-2col: 2→1 ─────────────────────────────────────────── */
@media (max-width: 767px) {
  .g-2col { grid-template-columns: 1fr !important; }
}

/* ── About features: 2→2→1 ───────────────────────────────── */
@media (max-width: 767px) { .about-features { grid-template-columns: 1fr !important; } }

/* ── Service page feature & testimonial 2-col: →1 ─────────── */
@media (max-width: 767px) {
  .service-layout .g-2col { grid-template-columns: 1fr !important; }
}

/* ── Enquiry forms responsive ────────────────────────────── */
@media (max-width: 479px) {
  .eq-qty-btn span, .sq-qty-btn span {
    padding: 8px 2px !important;
    font-size: 12px !important;
  }
}

/* ── Contact form rows: 2→1 ──────────────────────────────── */
@media (max-width: 767px) {
  .form-row { grid-template-columns: 1fr !important; }
}

/* ── Table horizontal scroll ─────────────────────────────── */
.table-responsive, .admin-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── CTA banner buttons ───────────────────────────────────── */
@media (max-width: 479px) {
  .cta-btns { flex-direction: column; align-items: stretch; }
  .cta-btns .btn { justify-content: center; }
}

/* ── Related posts (blog-post.php): 3→2→1 ───────────────── */
@media (max-width: 1023px) { .g-related-posts { grid-template-columns: repeat(2,1fr) !important; } }
@media (max-width: 767px)  { .g-related-posts { grid-template-columns: 1fr !important; } }

/* ── auto-fill partners: always responsive ───────────────── */
@media (max-width: 479px)  { .g-autofill-260 { grid-template-columns: 1fr !important; } }

/* ── Hero card: always 3-col on tablet, 1-col on phone ────── */
@media (max-width: 767px) {
  .hero-cards { grid-template-columns: 1fr !important; }
}

/* ============================================================
   COMPONENT FIXES — contact strip, about, partners, nav
   ============================================================ */

/* ── Quick Contact Strip (contact page) ──────────────────── */
.qs-strip-wrap { background: var(--secondary); padding: 0; }
.qs-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.qs-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 20px;
  border-right: 1px solid rgba(255,255,255,0.08);
  min-width: 0; /* prevent overflow */
}
.qs-item:last-child { border-right: none; }
.qs-icon {
  width: 44px;
  height: 44px;
  background: rgba(21,101,255,0.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--primary);
  flex-shrink: 0;
}
.qs-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}
.qs-label {
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  letter-spacing: 1px;
  white-space: nowrap;
}
.qs-val {
  font-size: 14px;
  font-weight: 600;
  color: white;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
a.qs-val:hover { color: var(--primary); }

/* Tablet: 2 col */
@media (max-width: 1023px) {
  .qs-strip { grid-template-columns: repeat(2, 1fr); }
  .qs-item:nth-child(2) { border-right: none; }
  .qs-item:nth-child(1),
  .qs-item:nth-child(2) { border-bottom: 1px solid rgba(255,255,255,0.08); }
}
/* Phone: 1 col */
@media (max-width: 599px) {
  .qs-strip { grid-template-columns: 1fr; }
  .qs-item { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,0.08); padding: 16px 14px; }
  .qs-item:last-child { border-bottom: none; }
  .qs-val { font-size: 13px; white-space: normal; }
}

/* ── About page grids ─────────────────────────────────────── */
/* Mission/Vision: 2 col → 1 col */
.about-mv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  max-width: 900px;
  margin: 0 auto;
}
@media (max-width: 767px) {
  .about-mv-grid { grid-template-columns: 1fr !important; gap: 20px; }
}

/* Credentials: 4 col → 2 col → 1 col */
.about-creds-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
@media (max-width: 1023px) { .about-creds-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
@media (max-width: 479px)  { .about-creds-grid { grid-template-columns: 1fr; gap: 14px; } }

/* Expertise bars + image: 2 col → 1 col */
.about-expertise-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}
@media (max-width: 767px) {
  .about-expertise-grid { grid-template-columns: 1fr !important; gap: 28px; }
  /* Image goes below the bars on mobile */
  .about-expertise-grid > div:last-child { order: -1; }
}

/* ── Partners page ────────────────────────────────────────── */
/* Category grid: 3 col → 2 col → 1 col */
.partners-cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
@media (max-width: 1023px) { .partners-cat-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
@media (max-width: 599px)  { .partners-cat-grid { grid-template-columns: 1fr; gap: 16px; } }

/* Partner card header: logo + name + featured badge */
.partner-card-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap; /* badge wraps on narrow cards */
}
.partner-card-header h4 { font-size: 17px; margin-bottom: 2px; }
.partner-card-header .partner-cat-badge {
  margin-left: auto;
  flex-shrink: 0;
}
@media (max-width: 599px) {
  .partner-card-header { gap: 10px; }
  .partner-card-header h4 { font-size: 15px; }
}

/* ── Navigation improvements ─────────────────────────────── */
/* Breadcrumb: wraps cleanly */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: rgba(255,255,255,0.7);
}
.breadcrumb a { color: var(--primary); white-space: nowrap; }
.breadcrumb span { color: rgba(255,255,255,0.7); }
@media (max-width: 479px) {
  .breadcrumb { font-size: 12px; gap: 4px; }
}

/* Mobile nav: better spacing and readability */
@media (max-width: 1023px) {
  .main-nav {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--white);
    overflow-y: auto;
    z-index: 9998; /* just below .site-header-group (9999) */
    /* 107px = topbar (~37px) + site-header (70px) at tablet */
    padding: 107px 0 20px;
  }
  .main-nav.open { display: block; }
  .main-nav ul { flex-direction: column; gap: 0; }
  .main-nav ul li a {
    padding: 16px 24px;
    border-bottom: 1px solid var(--border);
    font-size: 16px;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .main-nav .dropdown {
    position: static;
    box-shadow: none;
    border: none;
    border-top: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
    background: var(--light);
    padding: 0;
  }
  .main-nav .dropdown li a {
    padding: 12px 32px;
    font-size: 14px;
    font-weight: 400;
    color: var(--text);
  }
  .main-nav li.open > .dropdown { display: block; }

  /* Mobile toggle: animated hamburger */
  .mobile-toggle { display: flex; z-index: 999; position: relative; }
  .mobile-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
  .mobile-toggle.active span:nth-child(2) { opacity: 0; }
  .mobile-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

  /* Header CTA: show only menu toggle on mobile */
  .header-cta .btn { display: none; }
  .header-cta .phone { display: none; }
}

/* Show Consultation button on tablet (≥600px) */
@media (min-width: 600px) and (max-width: 1023px) {
  .header-cta .btn {
    display: inline-flex;
    padding: 9px 16px;
    font-size: 12px;
  }
  .header-cta .btn i { display: none; }
  /* Hide text, show icon only on narrow tablet */
}

/* ── Page banner: breadcrumb wrap fix ────────────────────── */
.page-banner { overflow: visible; }
@media (max-width: 479px) {
  .page-banner h1 { font-size: clamp(20px, 6vw, 30px); }
}

/* ── service.php PHP notice suppression note: ────────────── */
/* Fixed in PHP: !empty($svc['content']) */

/* ── Partners stats row (flex): wrap on mobile ───────────── */
.partners-stats-row {
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
  padding: 20px 0;
}
@media (max-width: 479px) {
  .partners-stats-row { gap: 24px; }
}


/* ============================================================
   FINAL COMPREHENSIVE MOBILE FIX
   Forces every 2-col / 4-col / sidebar grid to single column
   on mobile using !important to override inline styles
   ============================================================ */

/* ── Process steps (services.php) ────────────────────────── */
.process-steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
@media (max-width: 1023px) { .process-steps-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
@media (max-width: 599px)  { .process-steps-grid { grid-template-columns: 1fr !important; gap: 16px; } }

/* ── FAQ grid in contact page ─────────────────────────────── */
/* .g-2col.g-mw900 → 1 col on mobile */
@media (max-width: 767px) {
  .g-2col.g-mw900 { grid-template-columns: 1fr !important; }
}

/* ── Service page feature cards (1fr 1fr) ─────────────────── */
/* .g-2col.g-gap-14 and .g-2col.g-gap-20 in service.php */
@media (max-width: 599px) {
  .g-2col.g-gap-14 { grid-template-columns: 1fr !important; }
  .g-2col.g-gap-20 { grid-template-columns: 1fr !important; }
}

/* ── Blog / Blog-post sidebar ─────────────────────────────── */
@media (max-width: 1023px) {
  .g-sidebar-320,
  .g-sidebar-300 {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
}

/* ── Universal override: any element with inline 2-col style ─ */
/* This catches any grid not yet assigned a class */
@media (max-width: 767px) {
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}
@media (max-width: 1023px) {
  [style*="grid-template-columns:1fr 360px"],
  [style*="grid-template-columns:1fr 320px"],
  [style*="grid-template-columns:1fr 300px"],
  [style*="grid-template-columns:1fr 280px"],
  [style*="grid-template-columns:1fr 260px"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 599px) {
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
  /* Exception: qty tile buttons (gap:6px and gap:10px) stay 4-col */
  [style*="grid-template-columns:repeat(4,1fr);gap:6px"],
  [style*="grid-template-columns:repeat(4,1fr);gap:10px"] {
    grid-template-columns: repeat(4, 1fr) !important;
  }
  /* Exception: form-row grids */
  [style*="grid-template-columns:repeat(4,1fr)"] .eq-qty-btn,
  [style*="grid-template-columns:repeat(4,1fr)"] .sq-qty-btn {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* ── Qty tile buttons: ALWAYS 4 col regardless ───────────── */
.g-4col.g-gap-6,
.g-4col.g-gap-10 {
  grid-template-columns: repeat(4, 1fr) !important;
}

/* ── Flexbox items that overflow on mobile ───────────────── */
@media (max-width: 767px) {
  /* Any flex row with large gap that might overflow */
  [style*="display:flex"][style*="gap:40px"],
  [style*="display:flex"][style*="gap:50px"],
  [style*="display:flex"][style*="gap:60px"] {
    gap: 16px !important;
    flex-wrap: wrap !important;
  }
  /* Stats flex rows */
  [style*="display:flex"][style*="justify-content:space-between"] {
    flex-wrap: wrap !important;
    gap: 12px !important;
  }
}

/* ── Index page: inline flex grids ───────────────────────── */
@media (max-width: 599px) {
  /* hero stats */
  .hero-stats {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
}

/* ── Service page testimonial 2-col ──────────────────────── */
@media (max-width: 767px) {
  .service-layout [style*="grid-template-columns:1fr 1fr"],
  .service-layout [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── Any remaining min-width on buttons ──────────────────── */
@media (max-width: 479px) {
  .btn { min-width: 0 !important; }
}

/* ── Prevent images from overflowing on service pages ───── */
img { max-width: 100% !important; height: auto !important; }

/* ── Admin login logo ────────────────────────────────────── */
.login-logo img {
  max-height: 80px;
  width: auto;
  margin: 0 auto 10px;
  display: block;
}
.login-logo p { color: var(--text); font-size: 13px; margin: 0; }


/* ── Header height: consistent with logo size ────────────── */
/* Desktop: 80px header, 62px logo — fits */
.site-header {
  overflow: visible; /* allow dropdowns to show */
}
/* Tablet ≤1023px: 70px header, 50px logo */
@media (max-width: 1023px) {
  .site-header .container { height: 70px !important; }
  /* Hide "Free Consultation" button label, show icon only */
  .header-cta .btn { padding: 8px 12px; font-size: 0; gap: 0; }
  .header-cta .btn i { font-size: 16px; }
  .header-cta .btn::after { content: 'Enquire'; font-size: 12px; }
}
/* Phone ≤767px: 60px header, 42px logo (topbar hidden) */
@media (max-width: 767px) {
  .site-header .container { height: 60px !important; }
  /* Topbar hidden at this breakpoint → overlay only needs to clear 60px header */
  .main-nav { top: 0 !important; padding-top: 60px !important; }
  /* Hide the consultation button entirely — hamburger only */
  .header-cta .btn { display: none !important; }
  .mobile-toggle { display: flex !important; }
}
/* Small phone ≤479px: 54px header, 36px logo */
@media (max-width: 479px) {
  .site-header .container { height: 54px !important; }
  .main-nav { top: 0 !important; padding-top: 54px !important; }
}

/* ── Body padding overrides for fixed header ── */
@media (max-width: 1023px) { body { padding-top: 107px; } } /* tablet: topbar + 70px header */
@media (max-width: 767px)  { body { padding-top:  60px; } } /* phone:  no topbar + 60px header */
@media (max-width: 479px)  { body { padding-top:  54px; } } /* xs:     no topbar + 54px header */

/* ── Hero section responsive overrides ─ */
@media (max-width: 767px)  { .hero .container { padding-top: 36px; } }
@media (max-width: 479px)  { .hero .container { padding-top: 28px; } }

/* ── Page banner: ensure it doesn't clip under header ────── */
.page-banner { position: relative; z-index: 0; }
.service-content ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;

    background: var(--light);
    border-radius: 12px;
    padding: 32px;
    margin: 20px 0 36px;

    list-style: none;
}

.service-content ul li {
    display: flex;
    align-items: center;
    gap: 12px;

    background: white;
    padding: 14px 18px;
    border-radius: 8px;
    border: 1px solid var(--border);

    font-size: 14px;
    color: var(--heading);
    font-weight: 500;
}

.service-content ul li::before {
    content: "\f058";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: var(--green);
    font-size: 16px;
    flex-shrink: 0;
}

.service-content h3 {
    margin-bottom: 18px;
    font-size: 22px;
}