/*
Theme Name: S&P Elec Infra
Theme URI: https://snp-eipl.com
Author: S&P Elec Infra Private Limited
Author URI: https://snp-eipl.com
Description: Custom WordPress theme for S&P Elec Infra Private Limited (S&P EIPL) - High Voltage Panels and Switchgear Components distributor. Built from scratch with a mega-menu product navigation, hero slider, and full home page layout.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: snp-eipl
*/

/* =====================================================
   0. SELF-HOSTED FONT (works with no internet connection
      / behind firewalls that block fonts.googleapis.com)
===================================================== */
@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('assets/fonts/poppins-latin-400-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('assets/fonts/poppins-latin-500-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('assets/fonts/poppins-latin-600-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('assets/fonts/poppins-latin-700-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:800;
  font-display:swap;
  src:url('assets/fonts/poppins-latin-800-normal.woff2') format('woff2');
}

/* =====================================================
   1. DESIGN TOKENS
===================================================== */
:root{
  --color-primary: #264b64;
  --color-primary-dark: #1a3547;
  --color-primary-light: #35678a;
  --color-secondary: #ececed;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-text: #3c4a53;
  --font-main: 'Poppins', Arial, Helvetica, sans-serif;
  --container-width: 1200px;
  --container-pad: 20px;
  --radius: 6px;
  --transition: all .25s ease;
  --shadow-sm: 0 2px 10px rgba(38,75,100,.08);
  --shadow-md: 0 10px 30px rgba(38,75,100,.12);
}

/* =====================================================
   2. RESET
===================================================== */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family: var(--font-main);
  color: var(--color-text);
  background: var(--color-white);
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; height:auto; }
a{ text-decoration:none; color:inherit; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:var(--font-main); cursor:pointer; }
h1,h2,h3,h4,h5,h6{
  font-family: var(--font-main);
  color: var(--color-primary);
  font-weight:600;
  margin:0 0 15px;
  line-height:1.3;
}
p{ margin:0 0 15px; }
.container{
  max-width: var(--container-width);
  margin:0 auto;
  padding:0 var(--container-pad);
}
section{ padding: 80px 0; }
.section-tag{
  display:inline-block;
  text-transform:uppercase;
  letter-spacing:2px;
  font-size:13px;
  font-weight:600;
  color: var(--color-primary-light);
  background: rgba(38,75,100,.08);
  padding:6px 16px;
  border-radius:30px;
  margin-bottom:14px;
}
.section-head{ max-width:740px; margin:0 auto 50px; text-align:center; }
.section-head h2{ font-size:36px; }
.section-head p{ color:#6b7a83; }
.section-head.align-left{ margin:0 0 40px; text-align:left; }

.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:14px 30px;
  border-radius:var(--radius);
  font-weight:600;
  font-size:15px;
  border:2px solid transparent;
  transition: var(--transition);
}
.btn-primary{ background: var(--color-primary); color:var(--color-white); }
.btn-primary:hover{ background: var(--color-primary-dark); transform:translateY(-2px); }
.btn-outline{ border-color: var(--color-white); color:var(--color-white); }
.btn-outline:hover{ background: var(--color-white); color:var(--color-primary); }
.btn-outline-dark{ border-color: var(--color-primary); color:var(--color-primary); }
.btn-outline-dark:hover{ background: var(--color-primary); color:var(--color-white); }

/* =====================================================
   3. TOP BAR
===================================================== */
.top-bar{
  background: var(--color-primary-dark);
  color: var(--color-secondary);
  font-size:13px;
}
.top-bar .container{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  padding-top:8px;
  padding-bottom:8px;
  gap:10px;
}
.top-bar-info{ display:flex; gap:24px; flex-wrap:wrap; }
.top-bar-info span{ display:inline-flex; align-items:center; gap:6px; }
.top-bar-social{ display:flex; gap:14px; }
.top-bar-social a{
  width:26px; height:26px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.1);
  border-radius:50%;
  transition: var(--transition);
}
.top-bar-social a:hover{ background: var(--color-white); color:var(--color-primary); }

/* =====================================================
   4. HEADER + MEGA MENU
===================================================== */
.site-header{
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
  position: sticky;
  top:0;
  z-index:999;
}
.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding-top:14px;
  padding-bottom:14px;
  position:relative; /* mega menu width reference */
}
.site-logo{ flex-shrink:0; }
.site-logo img{ max-height:60px; width:auto; }

.main-nav{ flex:1; display:flex; justify-content:center; min-width:0; }
.main-nav > ul{ display:flex; align-items:center; gap:2px; flex-wrap:nowrap; }
.main-nav > ul > li{ position:relative; flex-shrink:0; }
.main-nav > ul > li.menu-item-mega{ position:static; } /* let .mega-menu position off the header .container, not this link */
.main-nav > ul > li > a{
  display:flex;
  align-items:center;
  gap:6px;
  padding:16px 14px;
  font-weight:600;
  font-size:15px;
  color: var(--color-primary);
  transition: var(--transition);
  white-space:nowrap;
}
.main-nav > ul > li > a::after{
  content:"";
  width:7px; height:7px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg);
  margin-left:2px;
  opacity:.55;
}
.main-nav > ul > li.menu-item-no-children > a::after{ display:none; }
.main-nav > ul > li:hover > a,
.main-nav > ul > li.active > a{ color: var(--color-primary-light); }
.main-nav > ul > li:hover > a{ background: var(--color-secondary); border-radius:var(--radius); }

.header-cta{ display:flex; align-items:center; gap:14px; flex-shrink:0; }
.header-cta .btn{ padding:12px 24px; white-space:nowrap; }


/* --- Simple dropdown (2-level, no grandchildren) --- */
.simple-dropdown{
  position:absolute;
  top:100%; left:0;
  min-width:240px;
  background: var(--color-white);
  box-shadow: var(--shadow-md);
  border-radius:var(--radius);
  padding:10px;
  opacity:0; visibility:hidden;
  transform:translateY(8px);
  transition: var(--transition);
}
.main-nav li:hover > .simple-dropdown{ opacity:1; visibility:visible; transform:translateY(0); }
.simple-dropdown li a{
  display:block; padding:10px 14px; border-radius:4px; font-size:14px; color:var(--color-text);
}
.simple-dropdown li a:hover{ background:var(--color-secondary); color:var(--color-primary); }

/* --- Mega menu panel: width = header container width --- */
.mega-menu{
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%) translateY(8px);
  width: min(var(--container-width), calc(100vw - (var(--container-pad) * 2)));
  background: var(--color-white);
  box-shadow: var(--shadow-md);
  border-top:3px solid var(--color-primary);
  border-radius: 0 0 var(--radius) var(--radius);
  padding: 30px;
  display:flex;
  gap:30px;
  opacity:0;
  visibility:hidden;
  transition: var(--transition);
  z-index: 10;
}
.main-nav li:hover > .mega-menu{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.mega-col{ flex:1; min-width:0; }
.mega-col-title{
  font-size:14px;
  font-weight:700;
  color: var(--color-primary);
  text-transform:uppercase;
  letter-spacing:.5px;
  padding-bottom:10px;
  margin-bottom:10px;
  border-bottom:2px solid var(--color-secondary);
}
.mega-col-title a{ color:inherit; }
.mega-col ul li a{
  display:flex; align-items:center; gap:8px;
  padding:8px 4px;
  font-size:14px;
  color: var(--color-text);
  border-radius:4px;
  transition: var(--transition);
}
.mega-col ul li a::before{
  content:"";
  width:5px; height:5px;
  border-radius:50%;
  background: var(--color-primary-light);
  flex-shrink:0;
  opacity:.6;
}
.mega-col ul li a:hover{ color: var(--color-primary); padding-left:8px; background:var(--color-secondary); }
.mega-menu-feature{
  flex:0 0 260px;
  background: var(--color-primary);
  color: var(--color-white);
  border-radius: var(--radius);
  padding:24px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.mega-menu-feature h4{ color:var(--color-white); font-size:19px; }
.mega-menu-feature p{ color:rgba(255,255,255,.8); font-size:14px; }

/* --- Flyout submenu (Services): a single-column list where some items
   reveal a second-level panel flying out to the right on hover --- */
.flyout-menu{
  position:absolute;
  top:126%; left:0;
  width:350px;
  background: var(--color-white);
  box-shadow: var(--shadow-md);
  border-top:3px solid var(--color-primary);
  border-radius: 0 0 var(--radius) var(--radius);
  padding:8px 0;
  opacity:0; visibility:hidden;
  transform:translateY(8px);
  transition: var(--transition);
  z-index:10;
  overflow:visible;
}
.main-nav li:hover > .flyout-menu{ opacity:1; visibility:visible; transform:translateY(0); }
.flyout-list li{ position:relative; border-bottom:1px solid var(--color-secondary); }
.flyout-list li:last-child{ border-bottom:none; }
.flyout-list li > a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:15px 24px;
  font-weight:600;
  font-size:14.5px;
  color: var(--color-primary);
  transition: var(--transition);
}
.flyout-list li.has-flyout > a::after{
  content:"›";
  font-size:18px;
  line-height:1;
  opacity:.55;
}
.flyout-list li:hover > a{ background: var(--color-primary); color: var(--color-white); }
.flyout-list li.has-flyout:hover > a::after{ opacity:1; }

.flyout-panel{
  position:absolute;
  top:0; left:100%;
  width:340px;
  min-height:100%;
  background: var(--color-primary);
  padding:14px 24px;
  opacity:0; visibility:hidden;
  transition: var(--transition);
  box-shadow: var(--shadow-md);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.flyout-list li.has-flyout:hover > .flyout-panel{ opacity:1; visibility:visible; }
.flyout-panel ul li{ border-bottom:1px solid rgba(255,255,255,.15); }
.flyout-panel ul li:last-child{ border-bottom:none; }
.flyout-panel ul li a{
  display:block;
  padding:14px 0;
  color: var(--color-white);
  font-weight:600;
  font-size:14.5px;
}
.flyout-panel ul li:hover > a{ color: rgba(255,255,255,.75); background:transparent; }

/* mobile nav toggle */
.nav-toggle{
  display:none;
  width:44px;height:44px;
  border:none; background:var(--color-secondary);
  border-radius:var(--radius);
  align-items:center; justify-content:center;
  flex-direction:column; gap:5px;
}
.nav-toggle span{ width:22px; height:2px; background:var(--color-primary); display:block; }

/* =====================================================
   5. HERO / SLIDER
===================================================== */
.hero-slider{ position:relative; overflow:hidden; height:660px; }
.hero-slide{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:flex-start;
  background-size:cover; background-position:center;
  opacity:0; transition:opacity 1s ease;
  pointer-events:none;
}
.hero-slide.is-active{ opacity:1; pointer-events:auto; z-index:1; }
.hero-slide::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(20,38,50,.88) 0%, rgba(20,38,50,.55) 55%, rgba(20,38,50,.35) 100%);
}
.hero-slide .container{ position:relative; z-index:2; display:block; width:100%; margin:0 auto; }
.hero-content{ max-width:640px; width:100%; margin:0; color:var(--color-white); text-align:left; }
.hero-content .section-tag{ background:rgba(255,255,255,.15); color:var(--color-white); }
.hero-content h1{ color:var(--color-white); font-size:48px; margin-bottom:20px; text-align:left; }
.hero-content p{ color:rgba(255,255,255,.85); font-size:17px; margin-bottom:30px; text-align:left; }
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; justify-content:flex-start; }
.hero-dots{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  display:flex; gap:10px; z-index:3;
}
.hero-dots button{
  width:11px;height:11px;border-radius:50%;
  background:rgba(255,255,255,.45); border:none;
}
.hero-dots button.is-active{ background:var(--color-white); }

/* =====================================================
   6. INTRO STRIP
===================================================== */
.intro-strip{
  background: var(--color-primary);
  padding:34px 0;
}
.intro-strip .container{
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.intro-strip p{ color:var(--color-white); margin:0; font-size:16px; max-width:780px; }
.intro-strip strong{ color:var(--color-white); }

/* =====================================================
   7. ABOUT SECTION
===================================================== */
.about-section .container{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:60px;
  align-items:center;
}
.about-media{ position:relative; }
.about-media img{ border-radius:var(--radius); box-shadow:var(--shadow-md); }
.about-media .experience-badge{
  position:absolute; bottom:-24px; right:-24px;
  background:var(--color-primary);
  color:var(--color-white);
  padding:20px 26px;
  border-radius:var(--radius);
  text-align:center;
  box-shadow:var(--shadow-md);
}
.about-media .experience-badge strong{ display:block; font-size:32px; line-height:1; }
.about-media .experience-badge span{ font-size:12px; text-transform:uppercase; letter-spacing:1px; }
.about-points{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:24px 0; }
.about-quote{
  margin:24px 0 0;
  padding:18px 24px;
  border-left:4px solid var(--color-primary);
  background: var(--color-secondary);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size:15px;
  font-style:italic;
  color: var(--color-primary);
}

/* About page — hero banner */
.about-hero{
  position:relative;
  height:360px;
  overflow:hidden;
  display:flex;
  align-items:center;
}
.about-hero-bg{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center;
}
.about-hero-inner{ position:relative; z-index:2; max-width:680px; margin:0 auto; text-align:center; }
.about-hero-inner h1{ color:var(--color-white); font-size:40px; margin:14px 0; }
.about-hero-inner p{ color:rgba(255,255,255,.9); font-size:16px; margin:0; }

/* About page — floating stats bar (overlaps hero bottom edge) */
.about-stats-float{
  display:flex;
  background: var(--color-white);
  box-shadow: var(--shadow-md);
  border-radius: var(--radius);
  margin-top:-50px;
  position:relative;
  z-index:3;
  padding:28px 10px;
}
.about-stat-item{ flex:1; text-align:center; border-right:1px solid var(--color-secondary); }
.about-stat-item:last-child{ border-right:none; }
.about-stat-item strong{ display:block; font-size:32px; color:var(--color-primary); line-height:1.2; }
.about-stat-item span{ font-size:12.5px; color:#7a8790; text-transform:uppercase; letter-spacing:.5px; }

/* About page — story timeline + quote card */
.about-story-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:60px; align-items:start; }
.about-story-timeline h2{ margin-top:8px; }
.timeline-item{ display:flex; gap:20px; margin-top:30px; position:relative; }
.timeline-item:first-of-type{ margin-top:24px; }
.timeline-icon{
  width:52px; height:52px; border-radius:50%;
  background: var(--color-secondary); color: var(--color-primary);
  display:flex; align-items:center; justify-content:center;
  font-size:22px; flex-shrink:0;
}
.timeline-item:not(:last-child)::after{
  content:"";
  position:absolute; left:25px; top:56px; bottom:-30px;
  width:2px; background: var(--color-secondary);
}
.timeline-item h4{ margin-bottom:6px; font-size:17px; }
.timeline-item p{ font-size:14.5px; color:#6b7a83; margin-bottom:0; }

.about-story-quote-card{
  background: var(--color-primary);
  color: var(--color-white);
  border-radius: var(--radius);
  padding:44px 36px;
}
.about-story-quote-card .quote-mark{
  font-size:64px; line-height:1;
  color:rgba(255,255,255,.3);
  font-family: Georgia, serif;
  margin-bottom:6px;
}
.about-story-quote-card p{ color: var(--color-white); font-size:17px; font-style:italic; }
.quote-divider{ display:block; width:40px; height:2px; background:rgba(255,255,255,.4); margin:20px 0; }
.quote-attribution{ font-style:normal; font-weight:700; font-size:14px; color:rgba(255,255,255,.8); }

@media (max-width: 860px){
  .about-story-grid{ grid-template-columns:1fr; }
  .about-hero{ height:auto; padding:60px 0; }
  .about-hero-inner h1{ font-size:30px; }
}
@media (max-width: 640px){
  .about-stats-float{ flex-wrap:wrap; }
  .about-stat-item{ flex:0 0 50%; border-right:none; margin-bottom:16px; }
}
.about-point{ display:flex; gap:10px; align-items:flex-start; font-size:12px; font-weight:600; color:var(--color-primary); }
.about-point .dot{
  width:22px;height:22px;border-radius:50%;
  background:var(--color-secondary); color:var(--color-primary);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0; font-size:12px;
}

/* =====================================================
   8. PRODUCTS / SERVICES GRID
===================================================== */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.card{
  background: var(--color-white);
  border:1px solid #e7ebee;
  border-radius: var(--radius);
  overflow:hidden;
  transition: var(--transition);
}
.card:hover{ box-shadow: var(--shadow-md); transform:translateY(-6px); border-color:transparent; }
.card-media{ height:200px; overflow:hidden; }
.card-media img{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.card:hover .card-media img{ transform:scale(1.08); }
.card-body{ padding:24px; }
.card-body h3{ font-size:18px; margin-bottom:10px; }
.card-body p{ font-size:14px; color:#7a8790; margin-bottom:14px; }
.card-link{ font-size:13px; font-weight:700; color:var(--color-primary); text-transform:uppercase; letter-spacing:.5px; }
.bg-light{ background: var(--color-secondary); }

.grid-3.services .card-body{ text-align:center; padding:34px 24px; }
.service-icon{
  width:64px;height:64px; margin:0 auto 18px;
  background: var(--color-secondary);
  color: var(--color-primary);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.grid-3.services .card:hover .service-icon{ background:var(--color-primary); color:var(--color-white); }

/* =====================================================
   9. STATS COUNTER
===================================================== */
.stats-section{
  position:relative;
  background: var(--color-primary);
  background-image:
    linear-gradient(120deg, rgba(38,75,100,.93) 0%, rgba(26,53,71,.93) 100%),
    url('assets/images/stats-bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.stats-section .container{
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px; text-align:center;
}
.stat strong{ display:block; font-size:44px; color:var(--color-white); }
.stat span{ color:rgba(255,255,255,.75); font-size:14px; text-transform:uppercase; letter-spacing:1px; }

/* =====================================================
   10. BRANDS / CLIENTS
===================================================== */
.logo-marquee{
  width:100%;
  overflow:hidden;
  padding:20px 0 10px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.logo-track{
  display:flex;
  align-items:center;
  gap:60px;
  width:max-content;
  animation: snpLogoScroll 38s linear infinite;
}
.logo-marquee:hover .logo-track{ animation-play-state:paused; }
.logo-item{
  flex:0 0 auto;
  height:140px;
  width:230px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.logo-item img{
  max-height:100%;
  max-width:100%;
  width:auto;
  object-fit:contain;
  filter:grayscale(100%);
  opacity:.65;
  transition:var(--transition);
}
.logo-item img:hover{ filter:none; opacity:1; }
@keyframes snpLogoScroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .logo-track{ animation:none; }
  .logo-marquee{ overflow-x:auto; }
}

/* Contact page — full-width map (no container, spans entire viewport) */
.full-width-map{
  padding:0;
  width:100%;
}
.full-width-map iframe{
  width:100%;
  height:480px;
  border:0;
  display:block;
}
@media (max-width: 640px){
  .full-width-map iframe{ height:320px; }
}

/* Product detail page */
.breadcrumb{ font-size:13px; color:#8a96a0; margin-bottom:18px; }
.breadcrumb a{ color:#8a96a0; }
.breadcrumb a:hover{ color: var(--color-primary); }
.breadcrumb span{ margin:0 8px; }
.breadcrumb .current{ color: var(--color-primary); font-weight:600; }

/* Product page banner — shared background/design across every product page */
.product-hero{
  position:relative;
  padding:64px 0 56px;
  overflow:hidden;
}
.product-hero-bg{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center;
}
.product-hero-inner{
  position:relative; z-index:2;
  max-width:720px;
  margin:0 auto;
  text-align:center;
}
.product-hero-inner .breadcrumb{ margin-bottom:18px; }
.product-hero-inner .breadcrumb,
.product-hero-inner .breadcrumb a{ color:rgba(255,255,255,.75); }
.product-hero-inner .breadcrumb a:hover{ color: var(--color-white); }
.product-hero-inner .breadcrumb .current{ color: var(--color-white); }
.product-hero-inner h1{ color: var(--color-white); font-size:38px; margin:14px 0; }
.product-hero-inner p{ color:rgba(255,255,255,.9); font-size:16px; margin:0; }
@media (max-width: 640px){
  .product-hero-inner h1{ font-size:28px; }
}

.product-page-grid{
  display:grid;
  grid-template-columns: 2fr 1fr;
  gap:50px;
  align-items:start;
}
.product-block{ margin-bottom:44px; }
.product-block:last-child{ margin-bottom:0; }
.product-block h2{ font-size:24px; margin-bottom:16px; padding-bottom:12px; border-bottom:2px solid var(--color-secondary); }
.product-block h4{ font-size:16px; margin:22px 0 10px; }
.product-spec-list{ margin:0 0 15px; padding-left:15px; }
.product-spec-list li{
  position:relative;
  padding-left:22px;
  margin-bottom:10px;
  font-size:14.5px;
  color:#5a6a73;
}
.product-spec-list li::before{
  content:"";
  position:absolute; left:0; top:8px;
  width:8px; height:8px;
  border-radius:50%;
  background: var(--color-primary-light);
}

.product-gallery{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:8px; }
.product-gallery figure{ margin:0; }
.product-gallery img{
  width:100%; height:200px; object-fit:contain;
  background: var(--color-secondary);
  border-radius: var(--radius);
  padding:16px;
}
.product-gallery figcaption{ margin-top:10px; font-size:13px; color:#6b7a83; text-align:center; }
@media (max-width: 560px){
  .product-gallery{ grid-template-columns:1fr; }
}

.industry-highlight-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
.industry-highlight{
  text-align:center;
  background: var(--color-secondary);
  border-radius: var(--radius);
  padding:28px 16px;
  transition: var(--transition);
}
.industry-highlight:hover{ background: var(--color-primary); }
.industry-highlight:hover h4{ color: var(--color-white); }
.industry-icon{ font-size:32px; display:block; margin-bottom:12px; }
.industry-highlight h4{ margin:0; font-size:14.5px; color: var(--color-primary); transition: var(--transition); }

.product-sidebar{ position:sticky; top:100px; }
.product-sidebar-image{
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow-sm);
  margin-bottom:24px;
}
.product-sidebar-image img{ width:100%; height:auto; display:block; }
.product-sidebar-form{
  background: var(--color-secondary);
  border-radius: var(--radius);
  padding:28px 24px;
}
.product-sidebar-form h3{ font-size:18px; margin-bottom:18px; }
.product-sidebar-form .checkbox-group{ margin-bottom:20px; }
.product-sidebar-form .checkbox-group-title{ font-size:12.5px; }
.product-sidebar-form .checkbox-item{ font-size:13px; margin-bottom:9px; }

@media (max-width: 960px){
  .product-page-grid{ grid-template-columns:1fr; }
  .product-sidebar{ position:static; }
  .industry-highlight-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 560px){
  .industry-highlight-grid{ grid-template-columns:1fr; }
}

/* Contact page — info cards */
.contact-info-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
  margin-top:40px;
}
.contact-info-card{
  background: var(--color-white);
  border:1px solid #e7ebee;
  border-radius: var(--radius);
  padding:32px 28px;
  transition: var(--transition);
}
.contact-info-card:hover{ box-shadow: var(--shadow-md); border-color:transparent; }
.contact-info-icon{
  width:56px; height:56px;
  border-radius:50%;
  background: var(--color-secondary);
  color: var(--color-primary);
  display:flex; align-items:center; justify-content:center;
  font-size:24px;
  margin-bottom:18px;
}
.contact-info-card h3{ font-size:19px; margin-bottom:14px; }
.contact-info-card p{ font-size:14px; margin-bottom:10px; color:#6b7a83; }
.contact-info-card p a{ color: var(--color-primary); font-weight:600; }
.contact-info-card p a:hover{ text-decoration:underline; }

/* Contact page — quote form with checkboxes */
.quote-form-wrap{
  max-width:950px;
  margin:0 auto;
  background: var(--color-white);
  border-radius: var(--radius);
  padding:44px;
  box-shadow: var(--shadow-sm);
}
.checkbox-columns{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px;
  margin:20px 0 24px;
}
.checkbox-group-title{
  display:block;
  font-weight:700;
  color: var(--color-primary);
  font-size:14px;
  text-transform:uppercase;
  letter-spacing:.5px;
  margin-bottom:14px;
  padding-bottom:10px;
  border-bottom:2px solid var(--color-secondary);
}
.checkbox-item{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:14px;
  color: var(--color-text);
  margin-bottom:12px;
  cursor:pointer;
}
.checkbox-item input{ margin-top:3px; flex-shrink:0; width:16px; height:16px; accent-color: var(--color-primary); cursor:pointer; }
@media (max-width: 860px){
  .contact-info-grid{ grid-template-columns:1fr; }
  .checkbox-columns{ grid-template-columns:1fr; gap:10px; }
  .quote-form-wrap{ padding:28px 22px; }
}

/* Static logo grid — dedicated Our Clients page (clients.php) */
.client-grid{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:24px;
}
.client-card{
  background: var(--color-white);
  border:1px solid #e7ebee;
  border-radius: var(--radius);
  height:150px;
  padding:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition: var(--transition);
}
.client-card:hover{ box-shadow: var(--shadow-md); border-color:transparent; transform:translateY(-4px); }
.client-card img{
  max-width:100%;
  max-height:100%;
  width:auto;
  object-fit:contain;
  filter:grayscale(100%);
  opacity:.75;
  transition: var(--transition);
}
.client-card:hover img{ filter:none; opacity:1; }
@media (max-width: 1080px){
  .client-grid{ grid-template-columns:repeat(4, 1fr); }
}
@media (max-width: 640px){
  .client-grid{ grid-template-columns:repeat(2, 1fr); gap:16px; }
  .client-card{ height:110px; padding:14px; }
}

/* =====================================================
   11. TESTIMONIALS
===================================================== */
.testimonial-card{
  background:var(--color-white);
  border:1px solid #e7ebee;
  border-radius:var(--radius);
  padding:30px;
  height:100%;
}
.testimonial-card .stars{ color:#f5a623; margin-bottom:12px; font-size:14px; letter-spacing:2px; }
.testimonial-author{ display:flex; align-items:center; gap:12px; margin-top:18px; }
.testimonial-author img{ width:48px;height:48px;border-radius:50%; object-fit:cover; }
.testimonial-author strong{ display:block; color:var(--color-primary); font-size:14px; }
.testimonial-author span{ font-size:12px; color:#8a96a0; }

/* =====================================================
   12. CTA BANNER
===================================================== */
.cta-banner{
  position:relative;
  background: var(--color-primary-dark);
  background-image:
    linear-gradient(rgba(26,53,71,.90), rgba(26,53,71,.90)),
    url('assets/images/cta-bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--color-white);
  text-align:center;
}
.cta-banner h2{ color:var(--color-white); }
.cta-banner p{ color:rgba(255,255,255,.75); max-width:600px; margin:0 auto 26px; }

/* =====================================================
   13. CONTACT / QUOTE FORM
===================================================== */
.contact-form-wrap{
  max-width:800px;
  margin:0 auto;
  background: var(--color-secondary);
  border-radius: var(--radius);
  padding:50px;
}
@media (max-width: 640px){
  .contact-form-wrap{ padding:30px 22px; }
}
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-group{ margin-bottom:16px; }
.form-group label{ display:block; font-size:13px; font-weight:600; color:var(--color-primary); margin-bottom:6px; }
.form-group input,
.form-group select,
.form-group textarea{
  width:100%;
  padding:12px 14px;
  border:1px solid #d7dde1;
  border-radius:4px;
  font-family:var(--font-main);
  font-size:14px;
  background:var(--color-white);
}
.form-group textarea{ min-height:100px; resize:vertical; }

/* =====================================================
   14. FOOTER
===================================================== */
.site-footer{ background: var(--color-primary-dark); color:rgba(255,255,255,.75); }
.footer-top{ padding:70px 0 40px; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap:40px; }
.footer-logo .logo-card{
  display:inline-block;
  background:var(--color-white);
  padding:10px 18px;
  border-radius:6px;
  margin-bottom:16px;
}
.footer-logo .logo-card img{ max-height:44px; }
.footer-col h4{ color:var(--color-white); font-size:16px; margin-bottom:20px; position:relative; padding-bottom:10px; }
.footer-col h4::after{ content:""; position:absolute; left:0; bottom:0; width:34px; height:2px; background:var(--color-primary-light); }
.footer-col ul li{ margin-bottom:10px; }
.footer-col ul li a{ font-size:14px; transition:var(--transition); }
.footer-col ul li a:hover{ color:var(--color-white); padding-left:4px; }
.footer-social{ display:flex; gap:10px; margin-top:18px; }
.footer-social a{
  width:36px;height:36px; border-radius:50%;
  background:rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;
  transition:var(--transition);
}
.footer-social a:hover{ background:var(--color-primary-light); }
.newsletter-form{ display:flex; margin-top:16px; }
.newsletter-form input{
  flex:1; padding:12px 14px; border:none; border-radius:4px 0 0 4px; font-family:var(--font-main);
}
.newsletter-form button{
  border:none; background:var(--color-primary-light); color:var(--color-white);
  padding:0 18px; border-radius:0 4px 4px 0; font-weight:600;
}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1);
  padding:20px 0;
  font-size:13px;
}
.footer-bottom .container{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.footer-bottom a{ color:rgba(255,255,255,.9); }

/* =====================================================
   15. RESPONSIVE
===================================================== */
@media (max-width: 1080px){
  .about-section .container{ grid-template-columns:1fr; }
  .grid-3{ grid-template-columns:repeat(2,1fr); }
  .stats-section .container{ grid-template-columns:repeat(2,1fr); row-gap:30px; }
  .logo-item{ height:100px; width:170px; }
  .footer-grid{ grid-template-columns:1fr 1fr; }

}
@media (max-width: 1180px){
  .main-nav > ul{ gap:0; }
  .main-nav > ul > li > a{ padding:16px 10px; font-size:14px; }
}
@media (max-width: 860px){
  .main-nav{ display:none; }
  .nav-toggle{ display:flex; }
  .hero-content h1{ font-size:34px; }
  .hero-slider{ height:auto; padding:80px 0; }
  .form-row{ grid-template-columns:1fr; }
}
@media (max-width: 640px){
  section{ padding:50px 0; }
  .grid-3{ grid-template-columns:1fr; }
  .about-points{ grid-template-columns:1fr; }
  .logo-track{ gap:36px; }
  .footer-grid{ grid-template-columns:1fr; }
  .top-bar-info span:not(:first-child){ display:none; }
  .site-header .container{ flex-wrap:wrap; }
  .mega-menu{ flex-direction:column; }
}

/* Mobile nav (slide-in panel) */
.mobile-nav{
  position:fixed; inset:0 0 0 auto;
  width:300px; max-width:85vw; height:100vh;
  background:var(--color-white);
  box-shadow:var(--shadow-md);
  transform:translateX(100%);
  transition: transform .3s ease;
  z-index:1001;
  overflow-y:auto;
  padding:20px;
}
.mobile-nav.is-open{ transform:translateX(0); }
.mobile-nav-close{ background:none; border:none; font-size:22px; color:var(--color-primary); float:right; }
.mobile-nav-menu > ul{ clear:both; margin-top:20px; }
.mobile-nav-menu li{ border-bottom:1px solid var(--color-secondary); }
.mobile-nav-menu > ul > li > a{ display:flex; justify-content:space-between; padding:14px 4px; font-weight:600; color:var(--color-primary); }
.mobile-nav-menu .mega-menu,
.mobile-nav-menu .simple-dropdown{
  position:static; display:none; opacity:1; visibility:visible; transform:none;
  box-shadow:none; border:none; width:auto; padding:0 0 10px 14px; flex-direction:column; gap:0;
}
.mobile-nav-menu li.is-open > .mega-menu,
.mobile-nav-menu li.is-open > .simple-dropdown{ display:flex; }
.mobile-nav-menu .mega-col-title{ border-bottom:none; padding-bottom:4px; margin-bottom:4px; font-size:13px; }
.mobile-nav-menu .mega-menu-feature{ display:none; }
.mobile-nav-menu .mega-col ul li a,
.mobile-nav-menu .simple-dropdown li a{ font-weight:400; font-size:14px; padding:8px 4px; }
.mobile-nav-menu li.menu-item-mega > a::after,
.mobile-nav-menu li.menu-item-dropdown > a::after,
.mobile-nav-menu li.menu-item-flyout > a::after{ content:"+"; font-weight:700; }
.mobile-nav-menu li.is-open > a::after{ content:"\2212"; }

/* Flyout (Services) accordion on mobile: two nested levels */
.mobile-nav-menu .flyout-menu{
  position:static; display:none; opacity:1; visibility:visible; transform:none;
  box-shadow:none; border:none; width:auto; padding:0;
}
.mobile-nav-menu li.is-open > .flyout-menu{ display:block; }
.mobile-nav-menu .flyout-list li{ border-bottom:none; }
.mobile-nav-menu .flyout-list li > a{
  padding:10px 4px 10px 14px; font-weight:500; font-size:14px; color:var(--color-primary); background:transparent;
}
.mobile-nav-menu .flyout-list li.has-flyout > a::after{ content:"+"; font-weight:700; opacity:1; font-size:14px; }
.mobile-nav-menu .flyout-list li.has-flyout.is-open > a::after{ content:"\2212"; }
.mobile-nav-menu .flyout-panel{
  position:static; display:none; opacity:1; visibility:visible; width:auto; min-height:0;
  background:transparent; box-shadow:none; padding:0 0 0 28px;
}
.mobile-nav-menu .flyout-list li.has-flyout.is-open > .flyout-panel{ display:block; }
.mobile-nav-menu .flyout-panel ul li{ border-bottom:none; }
.mobile-nav-menu .flyout-panel ul li a{ color:var(--color-primary); font-weight:400; font-size:13.5px; padding:8px 4px; }
.nav-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.5);
  opacity:0; visibility:hidden; transition:var(--transition); z-index:1000;
}
.nav-overlay.is-open{ opacity:1; visibility:visible; }