/* ============================================================
   ESHWA ENGINEERING — Master Style Sheet v2 (Performance Fixed)
   ============================================================ */

/* Fonts loaded async via HTML link tag — NOT here to avoid render blocking */

:root {
  --brand-blue: #1a3a8f;
  --brand-blue-dark: #0f2460;
  --brand-blue-light: #e8eeff;
  --text-dark: #0f172a;
  --text-mid: #374151;
  --text-light: #6b7280;
  --border-color: #e2e8f0;
  --white: #ffffff;
  --bg-light: #f8fafc;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.10);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --font-heading: 'Barlow Condensed', sans-serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;
}

body.u-body {
  font-family: var(--font-body) !important;
  background-color: var(--white) !important;
  color: var(--text-dark) !important;
}

/* HEADER */
.u-header {
  background: var(--white) !important;
  border-bottom: 2px solid var(--brand-blue) !important;
  box-shadow: 0 2px 12px rgba(26,58,143,0.08) !important;
}
.u-text-1 a, .u-text-1 {
  font-family: var(--font-heading) !important;
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  color: var(--brand-blue-dark) !important;
}
.u-nav-1 .u-nav-link, .u-nav-2 .u-nav-link {
  font-family: var(--font-body) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: var(--text-mid) !important;
}
.u-nav-1 .u-nav-link:hover, .u-nav-2 .u-nav-link:hover {
  color: var(--brand-blue) !important;
}
.u-btn-2, .u-btn-3 {
  font-family: var(--font-body) !important;
  font-size: 0.8rem !important;
  color: var(--text-mid) !important;
}

/* CAROUSEL */
#carousel_b22e {
  border-bottom: 3px solid var(--brand-blue) !important;
}

/* STATS BAR */
.stats-bar {
  display: flex;
  justify-content: center;
  background: var(--brand-blue);
}
.stats-bar .stat-item {
  flex: 1;
  max-width: 200px;
  text-align: center;
  padding: 16px 12px;
  border-right: 1px solid rgba(255,255,255,0.2);
  color: #fff;
}
.stats-bar .stat-item:last-child { border-right: none; }
.stats-bar .stat-num {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}
.stats-bar .stat-num span { color: #93c5fd; }
.stats-bar .stat-label {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: rgba(255,255,255,0.8);
  margin-top: 3px;
}
@media (max-width: 767px) {
  .stats-bar { flex-wrap: wrap; }
  .stats-bar .stat-item {
    flex: 0 0 50%;
    max-width: 50%;
    border-bottom: 1px solid rgba(255,255,255,0.2);
  }
}

/* MAIN SECTION */
.u-section-2 {
  background: var(--bg-light) !important;
  padding: 48px 0 !important;
}

section.hero {
  text-align: center !important;
  max-width: 860px !important;
  margin: 0 auto 32px auto !important;
  padding: 40px 24px 24px !important;
  background: var(--white) !important;
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow-sm) !important;
}
section.hero h1 {
  font-family: var(--font-heading) !important;
  font-size: 2.4rem !important;
  font-weight: 700 !important;
  color: var(--brand-blue-dark) !important;
  line-height: 1.15 !important;
  margin-bottom: 16px !important;
}
section.hero p {
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  color: var(--text-mid) !important;
  line-height: 1.75 !important;
}

section.about {
  max-width: 860px !important;
  margin: 0 auto 40px auto !important;
  padding: 32px !important;
  background: var(--white) !important;
  border-radius: var(--radius-lg) !important;
  border-left: 4px solid var(--brand-blue) !important;
  box-shadow: var(--shadow-sm) !important;
}
section.about h2 {
  font-family: var(--font-heading) !important;
  font-size: 1.75rem !important;
  font-weight: 700 !important;
  color: var(--brand-blue-dark) !important;
  margin-bottom: 16px !important;
}
section.about p {
  font-family: var(--font-body) !important;
  font-size: 0.95rem !important;
  color: var(--text-mid) !important;
  line-height: 1.75 !important;
  margin-bottom: 12px !important;
}
section.about strong { color: var(--brand-blue-dark) !important; font-weight: 600 !important; }

/* SECTION HEADING */
.section-heading { text-align: center; margin: 0 auto 8px auto; max-width: 700px; }
.section-heading .tag {
  display: inline-block;
  background: var(--brand-blue-light);
  color: var(--brand-blue-dark);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 4px 14px;
  border-radius: 20px;
  margin-bottom: 10px;
}
.section-heading h2 {
  font-family: var(--font-heading) !important;
  font-size: 2rem !important;
  font-weight: 700 !important;
  color: var(--brand-blue-dark) !important;
  margin-bottom: 8px !important;
}

/* PRODUCT CARDS — no transform animation to avoid non-composited warning */
.u-repeater-item {
  background: var(--white) !important;
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow-sm) !important;
  overflow: hidden !important;
  will-change: border-color, box-shadow;
  transition: box-shadow 0.2s, border-color 0.2s !important;
}
.u-repeater-item:hover {
  box-shadow: var(--shadow-md) !important;
  border-color: var(--brand-blue) !important;
}

.u-section-2 .u-image-1, .u-section-2 .u-image-2,
.u-section-2 .u-image-3, .u-section-2 .u-image-4,
.u-section-2 .u-image-5, .u-section-2 .u-image-6,
.u-section-2 .u-image-7, .u-section-2 .u-image-8,
.u-section-2 .u-image-9 {
  width: 100% !important;
  height: 180px !important;
  object-fit: cover !important;
  border-radius: var(--radius-sm) !important;
  margin: 0 0 12px 0 !important;
}

.u-section-2 .u-text-3, .u-section-2 .u-text-5,
.u-section-2 .u-text-7, .u-section-2 .u-text-9,
.u-section-2 .u-text-11, .u-section-2 .u-text-13,
.u-section-2 .u-text-15, .u-section-2 .u-text-17,
.u-section-2 .u-text-19 {
  font-family: var(--font-heading) !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: var(--text-dark) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin: 12px 0 8px 0 !important;
}

.u-section-2 .u-text-4, .u-section-2 .u-text-6,
.u-section-2 .u-text-8, .u-section-2 .u-text-10,
.u-section-2 .u-text-12, .u-section-2 .u-text-14,
.u-section-2 .u-text-16, .u-section-2 .u-text-18,
.u-section-2 .u-text-20, .u-text-grey-50 {
  font-family: var(--font-body) !important;
  font-size: 0.875rem !important;
  font-style: normal !important;
  color: var(--text-light) !important;
  line-height: 1.65 !important;
}

.u-repeater-item strong { color: var(--brand-blue-dark) !important; font-weight: 600 !important; }

.u-section-2 .u-btn-1, .u-section-2 .u-btn-2,
.u-section-2 .u-btn-3, .u-section-2 .u-btn-4,
.u-section-2 .u-btn-5, .u-section-2 .u-btn-6,
.u-section-2 .u-btn-7, .u-section-2 .u-btn-8,
.u-section-2 .u-btn-9 {
  font-family: var(--font-body) !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: var(--brand-blue) !important;
  border-bottom: 2px solid var(--brand-blue) !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  padding: 6px 0 !important;
  margin-top: 16px !important;
  background: transparent !important;
}

/* CTA BANNER */
.cta-banner {
  background: linear-gradient(135deg, var(--brand-blue-dark) 0%, var(--brand-blue) 100%);
  padding: 48px 40px;
  text-align: center;
  margin: 40px 0 0 0;
}
.cta-banner h2 {
  font-family: var(--font-heading);
  font-size: 2.2rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
}
.cta-banner p {
  font-family: var(--font-body);
  font-size: 1rem;
  color: rgba(255,255,255,0.85);
  margin-bottom: 24px;
}
.cta-banner a {
  display: inline-block;
  background: #fff;
  color: var(--brand-blue-dark) !important;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 13px 32px;
  border-radius: var(--radius-sm);
  text-decoration: none !important;
  margin: 0 8px 8px;
}
.cta-banner a.secondary {
  background: transparent;
  color: #fff !important;
  border: 2px solid rgba(255,255,255,0.6);
}

/* POPUP — fixed bottom right, original style */
.popup-box {
  position: fixed !important;
  bottom: 20px !important;
  right: 20px !important;
  left: auto !important;
  top: auto !important;
  width: 320px !important;
  background: #ffffff !important;
  padding: 20px 25px !important;
  border-radius: 10px !important;
  box-shadow: 0px 6px 16px rgba(0,0,0,0.25) !important;
  z-index: 99999 !important;
  box-sizing: border-box !important;
}

/* FOOTER */
.u-footer {
  background: #0f2460 !important;
  border-top: 4px solid var(--brand-blue) !important;
}
.u-footer p, .u-footer .copyright-text {
  font-family: var(--font-body) !important;
  font-size: 0.875rem !important;
  color: #c8d4f0 !important;
  line-height: 1.7 !important;
}
.u-footer strong {
  font-family: var(--font-heading) !important;
  font-size: 1.1rem !important;
  color: #fff !important;
}
.service-areas strong {
  font-family: var(--font-heading) !important;
  color: #fff !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
}
.service-areas a { color: #93c5fd !important; text-decoration: none !important; }
.service-areas a:hover { color: #fff !important; }

/* PAGE HERO for product/service pages */
.page-hero {
  background: linear-gradient(135deg, var(--brand-blue-dark) 0%, var(--brand-blue) 100%);
  padding: 56px 40px;
  text-align: center;
}
.page-hero h1 {
  font-family: var(--font-heading) !important;
  font-size: 2.6rem !important;
  font-weight: 700 !important;
  color: #fff !important;
  margin-bottom: 12px !important;
}
.page-hero p {
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  color: rgba(255,255,255,0.85) !important;
  max-width: 600px !important;
  margin: 0 auto !important;
  line-height: 1.7 !important;
}

/* WHATSAPP */
.whatsapp-float {
  position: fixed;
  bottom: 24px;
  left: 24px;
  width: 56px;
  height: 56px;
  background: #25d366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(37,211,102,0.4);
  z-index: 999;
  text-decoration: none;
}
.whatsapp-float svg { width: 30px; height: 30px; fill: white; }

/* GENERAL */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading) !important; }

/* RESPONSIVE */
@media (max-width: 767px) {
  section.hero h1 { font-size: 1.8rem !important; }
  section.about h2 { font-size: 1.4rem !important; }
  section.hero, section.about { padding: 24px 16px !important; }
  .page-hero { padding: 40px 20px; }
  .page-hero h1 { font-size: 2rem !important; }
  .cta-banner { padding: 32px 20px; }
  .cta-banner h2 { font-size: 1.7rem; }
}