/* ===== Across Engitech — Static CSS ===== */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --primary: #0e2a5c;
  /* hsl(218 78% 20%) */
  --primary-2: #1d4798;
  /* hsl(218 70% 35%) */
  --secondary: #f59c2a;
  /* hsl(32 95% 55%) */
  --secondary-2: #e08a1e;
  --bg: #ffffff;
  --fg: #1f2733;
  --muted: #f3f5f8;
  --muted-fg: #5e6b7a;
  --border: #e3e7ee;
  --foreground-dark: #1f2733;
  /* hsl(218,78%,20%) navy */
  --primary-rgb: 13, 43, 107;
  /* hsl(32,95%,55%) orange */
  --secondary-rgb: 244, 139, 34;
  --foreground: #1d2733;
  --muted-foreground: #6b7280;

  --navy:#1b2542;
  --navy-deep:#0f1830;
  --orange:#f37021;
  --orange-deep:#d85e15;
  --soft:#f5f6fa;
  --border:#e4e8ef;
  --muted-dark:#6b7488;
}
*, 
*::before,
*::after {
  box-sizing: border-box
}
html,
body {
  margin: 0;
  padding: 0
}
body {
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5; 
}
img {
  max-width: 100%;
  display: block
}
a {
  color: inherit;
  text-decoration: none; outline: none; border: none !important;
}
a:focus, button:focus{ outline: none;}
button {
  font-family: inherit;
  cursor: pointer;
  border: 0;
  background: none; border: none !important;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Montserrat', sans-serif;
  margin: 0;
  background: linear-gradient(135deg, #0e2a5c, #2a5cb0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.heading-light h1,
.heading-light h2,
.heading-light h3,
.heading-light h4,
h1.heading-light,
h2.heading-light,
h3.heading-light {
  background: none;
  -webkit-text-fill-color: #fff;
  color: #fff
}
/* Color helpers */
.bg-primary-c {
  background-color: var(--primary) !important
}
.bg-secondary-c {
  background-color: var(--secondary) !important
}
.bg-muted {
  background-color: var(--muted) !important
}
.text-primary-c {
  color: var(--primary) !important
}
.text-secondary-c {
  color: var(--secondary) !important
}
.text-muted-c {
  color: var(--muted-foreground) !important
}
.btn-secondary-c {
  background: var(--secondary);
  color: #fff;
  border: none;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: .75rem 1.75rem;
  border-radius: .4rem;
  font-size: .85rem;
  transition: all .3s;
}
.btn-secondary-c:hover {
  background: #dd7a18;
  color: #fff;
  box-shadow: 0 8px 24px rgba(244, 139, 34, .35)
}
.btn-outline-light-c {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .4);
  color: #fff;
  padding: .75rem 1.75rem;
  border-radius: .4rem;
  font-weight: 600;
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  transition: all .3s;
}
.btn-outline-light-c:hover {
  background: #fff;
  color: var(--primary)
}
.eyebrow {
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--secondary);
  display: inline-block;
}
.divider-bar {
  width: 56px;
  height: 2px;
  background: var(--secondary);
  margin: 14px 0
}
.divider-bar.center {
  margin: 14px auto
}
.section-title {
  font-size: 1.875rem;
  font-weight: 700;
  margin: .5rem 0
}
.section-subtitle {
  font-size: 1.5rem
}
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px
}
.section {
  padding: 80px 16px
}
.section-muted {
  background: #f6f8fb
}
.section-primary {
  background: var(--primary);
  color: #fff
}
.eyebrow {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--secondary)
}
.section-title {
  font-size: 28px;
  font-weight: 700;
  margin-top: 0;
  color: #1f2733
}
.title-rule {
  width: 56px;
  height: 2px;
  background: var(--secondary);
  margin: 10px auto 0
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 13px;
  padding: 12px 26px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: .06em;
  transition: all .25s
}
.btn-primary {
  background: var(--secondary);
  color: #fff
}
.btn-primary:hover {
  background: var(--secondary-2);
  box-shadow: 0 6px 18px rgba(245, 156, 42, .35)
}
.btn-outline {
  border: 1px solid rgba(255, 255, 255, .35);
  color: #fff
}
.btn-outline:hover {
  background: #fff;
  color: var(--primary)
}
/* ===== Top bar / Header ===== */
.topbar {
  background: var(--primary);
  color: rgba(255, 255, 255, .78);
  font-size: 12px;
  padding: 8px 16px
}
.topbar .row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  gap: 12px;
  flex-wrap: wrap
}
.topbar a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, .78)
}
.topbar a:hover {
  color: var(--secondary)
}
.topbar .left {
  display: flex;
  gap: 20px;
  flex-wrap: wrap
}
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  border-bottom: 1px solid #ecf0f5;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
  padding: 18px 0;
}
.header .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  max-width: 1200px;
  margin: 0 auto;
  gap: 12px
}
.logo img {
  height: 44px;
  width: auto
}
.nav {
  display: none;
  align-items: center;
  gap: 4px
}
.nav-item {
  position: relative
}
.nav-link {
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(31, 39, 51, .75);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color .2s
}
.nav-link:focus{  color: rgba(31, 39, 51, .75);}
.nav-link:hover,
.nav-link.active-page {
  color: var(--secondary)
}
.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  min-width: 260px;
  border: 1px solid #e7ebf2;
  border-radius: 6px;
  padding: 6px 0;
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .15);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: all .2s;
  z-index: 60
}
.nav-item:hover .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0)
}
.dropdown a {
  display: block;
  padding: 10px 18px;
  font-size: 13px;
  color: rgba(31, 39, 51, .75)
}
.dropdown a:hover {
  background: var(--secondary);
  color: #fff
}
.header .quote-btn {
  display: none
}
.header .quote-btn {
  background: var(--secondary);
  color: #fff;
  font-weight: 600;
  font-size: 12px;
  padding: 10px 22px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: .08em;  align-items: center;
}
.menu-toggle {
  display: inline-flex;
  color: #1f2733
}
.mobile-nav {
  display: none;
  background: #fff;
  border-top: 1px solid #ecf0f5
}
.mobile-nav.open {
  display: block
}
.mobile-nav a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 24px;
  font-size: 14px;
  color: rgba(31, 39, 51, .85);
  border-bottom: 1px solid #f1f3f7
}
.mobile-nav .sub {
  background: #f6f8fb
}
.mobile-nav .sub a {
  padding-left: 40px;
  font-size: 13px
}
/* ===== Hero carousel ===== */
.hero {
  position: relative;
  height: 50vw;
  min-height: 350px;
  max-height: 540px;
  overflow: hidden;
  background: #0a1228; /* vh (Viewport Height) se header minus karein */
    height: calc(100vh - var(--wp-header-height, 0px));
    
    /* Agar Admin Bar login hai toh use bhi adjust karein */
    min-height: calc(100vh - var(--wp-header-height, 0px) - 32px);
}
.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s ease-in-out
}
.slide.active {
  opacity: 1
}
.slide img.bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center
}
.slide .overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(5, 10, 25, .97) 0%, rgba(8, 15, 35, .92) 25%, rgba(12, 20, 45, .75) 45%, rgba(20, 30, 55, .45) 65%, rgba(40, 30, 20, .2) 85%, rgba(60, 35, 15, .1) 100%),
    radial-gradient(ellipse 60% 80% at 85% 50%, rgba(220, 120, 40, .35) 0%, rgba(200, 90, 30, .15) 40%, transparent 70%),
    radial-gradient(ellipse 40% 50% at 90% 15%, rgba(255, 160, 50, .2) 0%, transparent 60%);
}
/* .slide.is-main .overlay{display:none} */
.hero-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 150px 50px rgba(0, 0, 0, .5), inset 0 0 60px 20px rgba(0, 0, 0, .25);
  z-index: 5
}
.hero-content {
  position: relative;
  z-index: 10;
  height: 100%;
  display: flex;
  align-items: center;
  color: #fff
}
.hero-content .container {
  padding: 0 24px
}
.hero-content .max {
  max-width: 640px
}
.hero-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--secondary);
  background: rgba(245, 156, 42, .15);
  padding: 6px 16px;
  border-radius: 3px;
  margin-bottom: 18px
}
.hero-title {
  font-size: 24px;
  line-height: 1.18;
  font-weight: 700;
  color: #fff;
  margin-bottom: 18px;
  background: none;
  -webkit-text-fill-color: #fff
}
.hero-sub {
  color: rgba(255, 255, 255, .72);
  font-size: 14px;
  line-height: 1.6;
  max-width: 560px;
  margin-bottom: 28px
}
.hero-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px
}
.hero-side {
  display: none;
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 28%;
  max-width: 320px;
  aspect-ratio: 3/4
}
.hero-side .frame {
  position: absolute;
  inset: -3px;
  border-radius: 22px;
  background: linear-gradient(160deg, #2461d4 0%, #0e2a5c 40%, var(--secondary) 70%, #dd8b1e 100%)
}
.hero-side .img {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  overflow: hidden
}
.hero-side .img figure {
  height: 100%;
}
.hero-side img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.1) saturate(1.15) brightness(.9)
}
.hero-side .glow {
  position: absolute;
  inset: -16px;
  border-radius: 28px;
  background: linear-gradient(160deg, #1d4798, var(--secondary));
  filter: blur(20px);
  opacity: .4
}
.hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  backdrop-filter: blur(4px);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .25s
}
.hero-arrow:hover {
  background: rgba(255, 255, 255, .25)
}
.hero-arrow.prev {
  left: 16px
}
.hero-arrow.next {
  right: 16px
}
.hero-dots {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  gap: 8px
}
.hero-dots button {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .4);
  transition: all .25s
}
.hero-dots button.active {
  background: var(--secondary);
  width: 32px
}
.hero-bottom-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--secondary)
}
/* ===== Intro ===== */
.intro-grid {
  display: grid;
  gap: 40px
}
.intro-grid img {
  border-radius: 10px;
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .18);
  max-height: 520px;
  object-fit: cover;
  width: 100%
}
.intro-h2 {
  font-size: 24px;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 8px;
  background: linear-gradient(135deg, #0e2a5c, #2a5cb0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}
.intro-rule {
  width: 100%;
  height: 2px;
  background: rgba(14, 42, 92, .18);
  margin-bottom: 20px
}
.intro-h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--secondary);
  text-transform: uppercase;
  line-height: 1.4;
  margin: 18px 0 8px;
  background: none;
  -webkit-text-fill-color: var(--secondary)
}
.intro-rule-2 {
  height: 2px;
  background: rgba(245, 156, 42, .3);
  margin-bottom: 14px
}
.bullets {
  display: flex;
  flex-direction: column;
  gap: 12px
}
.bullets li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
  color: var(--muted-fg);
  line-height: 1.6
}
.bullets svg {
  color: var(--secondary);
  flex-shrink: 0;
  margin-top: 3px
}
/* ===== Services ===== */
.services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 40px
}
.service-card {
  background: #fff;
  border-radius: 12px;
  padding: 28px 22px;
  text-align: center;
  border: 1px solid rgba(227, 231, 238, .6);
  transition: all .3s;
  cursor: pointer
}
.service-card:hover {
  transform: translateY(-6px);
  border-color: rgba(245, 156, 42, .3);
  box-shadow: 0 22px 50px -20px rgba(14, 42, 92, .25)
}
.svc-ico {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 8px 18px -6px rgba(0, 0, 0, .25);
  transition: transform .3s
}
.service-card:hover .svc-ico {
  transform: scale(1.1)
}
.service-card h3 {
  font-size: 14px;
  color: #1f2733;
  margin-bottom: 10px;
  background: none;
  -webkit-text-fill-color: #1f2733;
  font-weight: 700
}
.service-card p {
  font-size: 12px;
  color: var(--muted-fg);
  line-height: 1.6;
  margin: 0 0 14px
}
.svc-learn {
  font-size: 11px;
  font-weight: 600;
  color: var(--secondary);
  opacity: 0;
  transition: opacity .25s;
  display: inline-flex;
  align-items: center;
  gap: 4px
}
.service-card:hover .svc-learn {
  opacity: 1
}
/* ===== About Us banner ===== */
.about-banner {
  position: relative;
  padding: 56px 16px;
  overflow: hidden;
  color: #fff
}
.about-banner .bg {
  position: absolute;
  inset: 0;
  background: url('https://www.acrossengitech.com/assets/aboutbg.jpg') center/cover
}
.about-banner figure {
  margin: 0;
}
#about p {
  font-size: 14px;
  color: var(--muted-fg);
  line-height: 1.8;
  margin-bottom: 24px;
}
.about-banner .grad {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(14, 42, 92, .95), rgba(14, 42, 92, .85), rgba(14, 42, 92, .9))
}
.about-banner .top-line,
.about-banner .bot-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(to right, var(--secondary), var(--secondary), rgba(245, 156, 42, .6))
}
.about-banner .top-line {
  top: 0
}
.about-banner .bot-line {
  bottom: 0;
  background: linear-gradient(to right, rgba(245, 156, 42, .6), var(--secondary), var(--secondary))
}
.about-banner .row {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center
}
.about-banner .video {
  flex-shrink: 0;
  width: 100%;
  max-width: 280px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 22px 50px rgba(0, 0, 0, .4);
  border: 1px solid rgba(245, 156, 42, .3)
}
.about-banner .video img {
  width: 100%;
  height: auto
}
.about-banner .content {
  flex: 1
}
.about-banner h2 {
  font-size: 24px;
  color: #fff;
  margin-bottom: 12px;
  background: none;
  -webkit-text-fill-color: #fff
}
.about-banner p {
  font-size: 14px;
  color: rgba(255, 255, 255, .78);
  line-height: 1.6;
  max-width: 640px;
  margin: 0 auto
}
.about-banner .certs {
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: center;
  flex-shrink: 0
}
.about-banner .certs img {
  height: 64px;
  width: auto;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .4))
}
/*  */
#overview-sec h2 {
  text-align: left;
  font-size: 30px
}
#overview-sec .heading-line {
  width: 56px;
  height: 2px;
  background: var(--secondary);
  margin: 14px 0 22px
}
#overview-sec p {
  color: var(--muted-fg);
  line-height: 1.7;
  font-size: 15px;
  margin-bottom: 18px
}
#overview-sec .right-dv {
  display: flex;
  justify-content: center
}
#overview-sec .overview-video {
  width: 100%;
  max-width: 480px;
  border-radius: 14px;
  overflow: hidden;
  border: 3px solid var(--secondary);
  box-shadow: 0 22px 50px -16px rgba(0, 0, 0, .25)
}
#overview-sec .video-ratio {
  aspect-ratio: 16/9
}
/* ===== Evaporative ===== */
.evap-grid {
  display: grid;
  gap: 48px;
  align-items: center
}
.evap-grid img {
  border-radius: 10px;
  box-shadow: 0 22px 50px -18px rgba(0, 0, 0, .25)
}
.evap h2 {
  font-size: 30px;
  color: #1f2733;
  margin: 8px 0 18px
}
.evap h2 span {
  color: var(--secondary);
  background: none;
  -webkit-text-fill-color: var(--secondary)
}
.evap p {
  color: var(--muted-fg);
  line-height: 1.65;
  margin-bottom: 24px
}
.evap-list {
  margin-bottom: 30px;
  display: flex;
  flex-direction: column;
  gap: 12px
}
.evap-list li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  color: #1f2733; position: relative;
}
.evap-list li::before{ content: '\f26a';     font-family: bootstrap-icons !important; color: var(--secondary) !important; display: inline-block; position: relative; bottom: -1px;}
.evap-list li svg {
  color: var(--secondary);
  flex-shrink: 0
}
/* .evap-list li:before{} */
.cooling-sec .heading-border {
  width: 56px;
  height: 2px;
  background: var(--secondary);
  margin: 14px 0 22px
}
/* ===== Marquee (Associated/Clients) ===== */
.marquee {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)
}
.marquee-track {
  display: flex;
  animation: slide-left 30s linear infinite;
  align-items: center;
  width: max-content
}
@keyframes slide-left {
  from {
    transform: translateX(0)
  }
  to {
    transform: translateX(-50%)
  }
}
/* .assoc-card{} */
.assoc-card figure {
  background: #fff;
  border: 1px solid #e7ebf2;
  border-radius: 10px;
  padding: 18px;
  transition: all .25s;
  flex-shrink: 0;
  width: 200px;
  height: 90px;
  margin: 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.assoc-card figure:hover {
  border-color: rgba(245, 156, 42, .35);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .06)
}
.assoc-card img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain
}
.client-card {
  flex-shrink: 0;
  width: 160px;
  height: 80px;
  margin: 0 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 10px;
  padding: 14px;
  transition: transform .3s
}
.client-card:hover {
  transform: scale(1.05)
}
.client-card img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain
}
/* Container jo content ko hide rakhega */
/* Container jo extra content ko chhupayega */
.marquee {
  overflow: hidden;
  width: 100%;
  padding: 20px 0;
  background: transparent;
  position: relative;
  display: flex;
}
/* Track jo move karega */
.marquee-track {
  display: flex;
  width: max-content;
  will-change: transform;
  /* Smooth performance ke liye */
  animation: scroll-linear 20s linear infinite;
}
/* Logos ke beech gap */
/* .assoc-card {
    flex-shrink: 0;
    padding: 0 30px;
} */
.assoc-card img {
  height: 80px;
  /* Aap height fix kar sakte hain */
  width: auto;
}
/* Animation */
@keyframes scroll-linear {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
  /* Half track move hoga */
}
/* Hover karne par animation ruk jayegi */
.marquee:hover .marquee-track {
  animation-play-state: paused;
}
/* ===== Process steps ===== */
.process {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  row-gap: 24px;
  margin-top: 36px
}
.process .step:last-child .step-link{ display: none !important;}
.step {
  display: flex;
  align-items: center
}
.step-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 90px;
  cursor: default;
  transition: transform .35s ease
}
.step-card:hover {
  transform: translateY(-8px) scale(1.08)
}
.step-circle {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 40% 35%, #fff 0%, rgba(0, 0, 0, .04) 58%, rgba(0, 0, 0, .08) 100%);
  transition: box-shadow .35s;
  border-color: #2461d4;
  background: radial-gradient(circle at 40% 35%, #fff 0%, #2461d414 58%, #2461d426 100%)
}
.step-card:hover .step-circle {
  box-shadow: 0 12px 24px rgba(0, 0, 0, .15)
}
.step-num {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 800;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .18)
}
.step-title {
  margin-top: 8px;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  color: #1f2733;
  background: none;
  -webkit-text-fill-color: #1f2733
}
.step-card:hover .step-title {
  color: var(--secondary);
  -webkit-text-fill-color: var(--secondary)
}
.step-link {
  display: block !important;
  width: 24px;
  height: 2px;
  background: rgba(245, 156, 42, .5);
  margin: 0 4px
}
.step-icon-wrap {
  transform: scale(.55)
}
/* ===== Presence ===== */
.presence-grid {
  display: grid;
  gap: 40px;
  align-items: center
}
.map-card {
  background: #fff;
  border: 1px solid #e7ebf2;
  border-radius: 12px;
  box-shadow: 0 18px 40px -16px rgba(14, 42, 92, .18);
  padding: 24px
}
.map-wrap {
  position: relative;
  max-width: 520px;
  margin: 0 auto
}
.pin {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--secondary);
  border: 1px solid #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
  transform: translate(-50%, -50%)
}
.office-list {
  display: flex;
  flex-direction: column;
  gap: 16px
}
.office {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: #fff;
  border: 1px solid #e7ebf2;
  border-radius: 10px;
  padding: 24px;
  transition: all .25s
}
#contact-pg-sec .office{ margin-bottom: 12px;}
#contact-pg-sec  .contact-pg-frm{    background-color: var(--muted) !important; border-radius: 12px; padding: 12px;}
#contact-pg-sec  .contact-pg-frm .form-control{border-radius: 8px;
    border: 1px solid var(--border);
    font-size: .9rem;
    padding: .7rem .9rem;
}
#contact-pg-sec  .contact-pg-frm .form-control:focus{border-color: var(--secondary);
    box-shadow: 0 0 0 .15rem rgba(244, 139, 34, .15);}
    textarea{resize: none;}
.office:hover {
  border-color: rgba(245, 156, 42, .3);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .06)
}
.office .num {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(245, 156, 42, .1);
  color: var(--secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0
}
.office h3 {
  font-size: 14px;
  font-weight: 700;
  color: #1f2733;
  margin-bottom: 4px;
  background: none;
  -webkit-text-fill-color: #1f2733
}
.office p {
  font-size: 14px;
  color: var(--muted-fg);
  line-height: 1.6;
  margin: 0
}
.office .phone {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 14px;
  color: var(--muted-fg)
}
.office .phone svg {
  color: var(--secondary)
}
/* ===== Testimonials ===== */
.testi {
  background: var(--primary);
  color: #fff;
  padding: 40px 16px
}
.testi .ti-widget.ti-wp-testimonial-1 .ti-review-item>.ti-inner {
  background: rgba(255, 255, 255, .1) !important;
  backdrop-filter: blur(4px) !important;
  border: 1px solid rgba(255, 255, 255, .1) !important;
  border-radius: 10px !important;
  padding: 24px !important;
  text-align: center !important;
  max-width: 560px !important;
  margin: 0 auto !important;
  position: relative !important;
}
.testi .ti-inner:after {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='rgba(245,156,42,.5)'%3E%3Cpath d='M3 21c3 0 7-1 7-8V5c0-1.25-.75-2-2-2H4c-1.25 0-2 .75-2 2v6c0 1.25.75 2 2 2h2c0 5-2 6-3 6v2zm12 0c3 0 7-1 7-8V5c0-1.25-.75-2-2-2h-4c-1.25 0-2 .75-2 2v6c0 1.25.75 2 2 2h2c0 5-2 6-3 6v2z'%3E%3C/path%3E%3C/svg%3E");
  display: inline-block;
  position: absolute;
  left: 50%;
  top: 10px;
  z-index: 99;
  transform: translateX(-50%);
  width: 22px;
  /* Size specify karna zaroori hai */
  height: 22px;
}
.ti-stars {
  display: none !important;
}
.ti-profile-details {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
}
.testi .ti-widget.ti-wp-testimonial-1 .ti-review-header {
  position: static;
  justify-content: center;
}
.testi h2 {
  color: #fff;
  background: none;
  -webkit-text-fill-color: #fff;
  margin-top: 6px
}
.testi .ti-profile-img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  margin: 8px auto 12px !important;
  border: 2px solid rgba(245, 156, 42, .4);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .25);
  display: flex;
  justify-content: center;
  align-items: center;
}
.testi .ti-widget.ti-wp-testimonial-1 .ti-profile-img {
  margin: 20px auto 12px !important;
}
.testi .ti-profile-img img {
  width: 100%;
  height: 100%;
  object-fit: cover
}
.testi .ti-widget.ti-wp-testimonial-1 .ti-review-content {
  color: rgba(255, 255, 255, .85);
  font-size: 14px;
  font-style: italic;
  line-height: 1.6;
  margin-bottom: 12px;
  text-align: center;
}
.testi .ti-widget.ti-wp-testimonial-1 .ti-widget-container .ti-name {
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  color: #fff;
  text-align: center;
  padding: 0;
}
.ti-widget.ti-wp-testimonial-1 .ti-widget-container .ti-date {
  font-size: 12px;
  color: rgba(255, 255, 255, .5);
  margin-top: 2px
}
.testi-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .2);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  transition: background .25s
}
.testi-arrow:hover {
  background: rgba(255, 255, 255, .1)
}
.testi-arrow.prev {
  left: -8px
}
.testi-arrow.next {
  right: -8px
}
.testi-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 16px
}
.testi-dots button {
  height: 6px;
  width: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .3);
  transition: all .25s
}
.testi-dots button.active {
  background: var(--secondary);
  width: 20px
}
.testi .ti-wp-testimonial-1 {
  max-width: 700px;
  margin: auto;
}
.ti-review-item {
  display: flex;
  justify-content: center;
}
/* ===== Footer ===== */
.footer {
  background: #1f2733;
  color: #fff
}
.footer .top-line {
  height: 4px;
  background: var(--secondary)
}
.footer .grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  padding: 60px 16px
}
.footer h3 {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255, 255, 255, .9);
  margin-bottom: 18px;
  background: none;
  -webkit-text-fill-color: rgba(255, 255, 255, .9)
}
.footer ul {
  display: flex;
  flex-direction: column;
  gap: 10px
}
.footer a,
.footer p {
  font-size: 14px;
  color: rgba(255, 255, 255, .9);
  transition: color .2s
}
.footer a:hover {
  color: var(--secondary)
}
.footer .desc {
  line-height: 1.6;
  margin: 14px 0 18px
}
.footer .logo-img {
  width:  130px;
  /* width: auto; */
  background: #fff;
  border-radius: 6px;
  padding: 6px
}
.footer .contact-list p svg{ width: 30px;}
.socials {
  display: flex;
  gap: 12px;
  margin-top: 14px
}
.socials a {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: transform .25s
}
.socials a:hover {
  transform: scale(1.1)
}
.s-fb {
  background: #1877F2
}
.s-ig {
  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888)
}
.s-li {
  background: #0A66C2
}
.s-x {
  background: #000
}
.s-yt {
  background: #FF0000
}
.contact-list {
  display: flex;
  flex-direction: column;
  gap: 12px
}
.contact-list a,
.contact-list p {
  display: inline-flex;
  gap: 10px;
  align-items: center
}
.contact-list p{ align-items: start;}
.copy {
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding: 16px;
  text-align: center;
  font-size: 12px;
  color: rgba(255, 255, 255, .3)
}
#about-pg-sec p {
  color: var(--muted-fg);
  line-height: 1.7;
  margin-top: 12px
}
#about-overview-sec img {
  max-height: 420px;
  object-fit: contain
}
/* ===== Page hero (inner pages) ===== */
.page-hero {
  position: relative;
  height: 400px;
  overflow: hidden;
  background: #0a1228;
  color: #fff;
  display: flex;
  align-items: center
}
.page-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .5
}
.page-hero .grad {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to right,
      rgba(2, 6, 23, 0.9) 0%,
      /* from-primary/90 */
      rgba(2, 6, 23, 0.7) 50%,
      /* via-primary/70 */
      rgba(2, 6, 23, 0.4) 100%
      /* to-primary/40 */
    );
}
.page-hero .container {
  position: relative;
  z-index: 2
}
.page-hero h1 {
  color: #fff;
  background: none;
  -webkit-text-fill-color: #fff;
  font-size: 34px;
  margin-bottom: 8px
}
.page-hero .crumbs {
  font-size: 13px;
  color: rgba(255, 255, 255, .7)
}
.page-hero .crumbs a {
  color: var(--secondary)
}
/* ===== Modal ===== */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .55);
  z-index: 100;
  align-items: center;
  justify-content: center;
  padding: 16px
}
.modal-overlay.open {
  display: flex
}
.modal {
  background: #fff;
  border-radius: 12px;
  max-width: 480px;
  width: 100%;
  padding: 28px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .3)
}
.modal h3 {
  font-size: 20px;
  color: #1f2733;
  margin-bottom: 18px;
  background: none;
  -webkit-text-fill-color: #1f2733
}
.modal label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #1f2733;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: .05em
}
.modal input,
.modal textarea {
  width: 100%;
  padding: 10px 14px;
  font-size: 14px;
  font-family: inherit;
  border: 1px solid #d8dee7;
  border-radius: 6px;
  margin-bottom: 14px;
  outline: none;
  transition: border-color .2s
}
.modal input:focus,
.modal textarea:focus {
  border-color: var(--secondary)
}
.modal textarea {
  min-height: 90px;
  resize: vertical
}
.modal .actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px
}
.modal .btn-secondary {
  padding: 10px 20px;
  border-radius: 6px;
  background: #eef1f5;
  color: #1f2733;
  font-weight: 600;
  font-size: 13px
}
/* utilities */
.text-center {
  text-align: center
}
.mt-12 {
  margin-top: 48px
}
.hide {
  display: none !important
}
/* projects */
.other-projects-sec ul li {
  width: 20%;
  padding: 0 15px;
}
.other-projects-sec ul {
  display: flex;
  flex-wrap: wrap;
  row-gap: 30px;
  margin: 0 -15px;
}
.other-projects-sec h4 {
  font-size: .75rem;
  margin: 0;
  font-weight: 700;
}
.other-projects-sec p {
  font-size: .65rem;
  margin-bottom: 5px;
}
.other-projects-sec .card-clean {
  background: #fff;
  border-radius: 14px;
  border: 1px solid var(--border);
  transition: all .3s;
  height: 100%;
}
.other-projects-sec .img-tile figure {
  height: 100%;
}
.other-projects-sec .img-tile {
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: all .35s;
  height: 140px;
}
.other-projects-sec .img-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s;
}
.other-projects-sec .card-clean:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .1);
  border-color: rgba(244, 139, 34, .3);
}
.other-projects-sec .img-tile:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, .15);
}
.other-projects-sec .img-tile:hover img {
  transform: scale(1.1);
}
 .heading-group {
  margin-bottom: 30px;
}
/* products */
#our-products-sec ul li {
  width: 25%;
  padding: 0 15px;
}
#our-products-sec ul {
  display: flex;
  row-gap: 30px;
  flex-wrap: wrap;
}
#our-products-sec .card-clean {
  background: #fff;
  border-radius: 14px;
  border: 1px solid var(--border);
  transition: all .3s;
}
#our-products-sec .bg-muted {
  background-color: var(--muted) !important;
}
#our-products-sec .card-clean img {
  width: 100%;
  height: 208px;
  object-fit: contain;
  padding: .5rem;
}
#our-products-sec h3 {
  font-size: .85rem;
  margin: 0;
}
#our-products-sec figure {
  margin: 0;
  font-weight: 600;
}
/*  */
#services ul li {
  width: 25%;
  padding: 0 15px;
}
#services ul {
  display: flex;
  row-gap: 30px;
  flex-wrap: wrap;
  margin: 0 -15px;
}
#services .service-card {
  background: #fff;
  border-radius: 14px;
  padding: 2rem 1.75rem;
  text-align: center;
  border: 1px solid var(--border);
  transition: all .3s;
  cursor: pointer;
  height: 100%; position: relative; padding-bottom: 55px;
}
#services .service-card .icon-box {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
  color: #fff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .1);
  transition: transform .3s;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
}
#services ul li:nth-child(2) .service-card .icon-box {
  background: linear-gradient(135deg, #38bdf8, #0ea5e9);
}
#services ul li:nth-child(3) .service-card .icon-box {
  background: linear-gradient(135deg, #22d3ee, #06b6d4);
}
#services ul li:nth-child(4) .service-card .icon-box {
  background: linear-gradient(135deg, #f87171, #f97316);
}
#services ul li:nth-child(5) .service-card .icon-box {
  background: linear-gradient(135deg, #2dd4bf, #14b8a6);
}
#services ul li:nth-child(6) .service-card .icon-box {
  background: linear-gradient(135deg, #818cf8, #6366f1);
}
#services ul li:nth-child(7) .service-card .icon-box {
  background: linear-gradient(135deg, #34d399, #10b981);
}
#services ul li:nth-child(8) .service-card .icon-box {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
}
.title-group-dv{ margin-bottom: 30px;}
#services .service-card .icon-box i {
  font-size: 1.5rem;
  color: #fff;
}
#services .service-card .icon-box p {
  margin: 0;
}
#services .service-card h3 {
  font-size: .95rem;
  margin-bottom: .75rem;
}
#services .service-card .field-service_content {
  font-size: .8rem;
  color: var(--muted-foreground);
  line-height: 1.6;
  margin-bottom: .75rem;
}
#services .service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .12);
  border-color: rgba(244, 139, 34, .3);
}
#services .service-card:hover .icon-box {
  transform: scale(1.1);
}
#services a{     color: var(--secondary) !important; font-weight: 500;}
#services a:after{ content: "\f138";     display: inline-block;
    font-family: bootstrap-icons !important;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: -.125em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;}

   #services .service-bx-anchor{ position: absolute; left: 0; right: 0; bottom: 22px; text-align: center;} 

/* service-pages */
.svc-hero {
    position: relative;
    height: 50vh;
    min-height: 340px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.svc-hero img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.svc-hero .ovl {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(13, 43, 107, .9), rgba(13, 43, 107, .7));
}

.svc-hero .content {
    position: relative;
    z-index: 5;
    text-align: center;
    padding: 0 1rem;
    color: #fff;
}

.svc-hero h1 {
    color: #fff;
    font-size: 3rem;
    margin-bottom: 1rem;
}

.svc-hero p {
    color: rgba(255, 255, 255, .8);
    max-width: 560px;
    margin: 0 auto;
}

.img-tile {
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: all .35s;
}
.img-tile  figure{ margin: 0;}
 
#exhaust-service-sec .img-tile  img{width: 100%;
    height: 100%;
    object-fit: cover; 
    transition: transform .35s;}
#exhaust-service-sec .img-tile{ height: 382px;}

#service-pg-dtl .pfg-item{ box-shadow: 2px 2px 5px 0 rgba(0,0,0,.2); border-radius: 12px; overflow: hidden; padding: 12px; background-color: #fff;}

#service-pg-dtl h2{    font-size: 1.5rem;
    margin-bottom: 1.5rem;}
  #service-pg-dtl  .key-hvc-box{    background: rgba(13, 43, 107, .05);
    border-left: 4px solid var(--secondary);}
    #service-pg-dtl  .key-hvc-box h3  {    font-size: 1.1rem; margin-bottom: 12px;}
    .double-skin-gal .pfg-grid--grid .pfg-item-link, .double-skin-gal .pfg-grid--fixed-height .pfg-item{aspect-ratio:4/1;}
    #service-pg-dtl  h3{font-size: 18px;}
    #service-pg-dtl .air-service-bx{    background: rgba(13, 43, 107, .05);}
    #service-pg-dtl .air-service-bx h2{ margin-bottom: 8px;}
    .height-240, .height-240 figure{ height: 240px; margin-top: 10px;}
    .height-240 img{ object-position: bottom; object-fit: cover; height: 100%;}
    .cold-room-service-logos .img-tile{ height: 120px;}
        .cold-room-service-logos .img-tile img{ height: 80px; width: auto;}
      #service-pg-dtl   .cooling-twr-box>div{background: rgba(13, 43, 107, .05);}
      #service-pg-dtl   .cooling-twr-box h3{font-size: 1.1rem;}
#service-pg-dtl  .icon-wrapper{ margin:auto; margin-bottom:10px;}
      .spec-table thead {
    background: var(--primary);
    color: #fff;}

    .spec-table th, .spec-table td {
    padding: .75rem 1rem;
    text-align: left;
    font-size: .85rem;
    white-space: nowrap;
}
.spec-table tbody td {
    color: var(--muted-foreground);}
    .spec-table{ width: 100%;}

    .exaust-service-sec#service-pg-dtl h2{ margin-bottom: 10px;}
        .exaust-service-sec figure img{ aspect-ratio: 3/2; object-fit: cover; width: 100%;}
.evaporative-section h2{ margin-bottom: 22px;}
/* .evaporative-section  .pfg-gallery-wrapper{ max-width: 900px ; margin: auto;} */
.evaporative-section p{ text-align: center; margin-top: 12px;}
.evaporative-sinngle-img-gal .pfg-grid--fixed-height .pfg-item, .evaporative-sinngle-img-gal .pfg-grid--grid .pfg-item-link{ aspect-ratio: 4/1.5;}

.why-choose-bx{background: rgba(255, 255, 255, .1); height: 100%;}
.why-choose-bx h3{    font-size: 1.15rem;}

.why-choose-sec .row{ width: 90%; margin: auto; margin-top: 12px;}
.ti-widget.ti-wp-testimonial-1 .ti-review-content{ height: auto;     -webkit-line-clamp: inherit;}
  .testi .ti-widget.ti-wp-testimonial-1 .ti-review-item>.ti-inner{ padding-bottom: 60px !important;}

/* ============ */

.vertical-card {
    position: relative;
    overflow: hidden;
    background: var(--primary);
    color: #fff;
    height: 100%;}
.vertical-card.light {
    background: var(--muted);}
.vertical-img {
    aspect-ratio: 4 / 3;
    overflow: hidden;}
    .vertical-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s;}

    .vertical-tag {
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    padding: .4rem .9rem;
    background: var(--secondary);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    z-index: 2;}

    .vertical-card.light .vertical-tag {
    background: var(--primary);}

    .vertical-body {
    padding: 2.5rem;}

    .vertical-body h3 {
    font-size: 1.8rem;
    margin-bottom: 1rem; color: #fff;}

    .vertical-card.light h3 {
    color: var(--primary);}

    .vertical-card.light p {
    color: #5a6a7f;}

    .feature-list-dot {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .7rem;
    margin: 1.5rem 0;}

    .feature-list-dot li {
    font-size: .9rem;
    display: flex;
    align-items: center;
    gap: .6rem; color: #1a2437 ;}
    .feature-list-dot li::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--secondary);
    flex-shrink: 0;}

    #two-verticals-sec .btn {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    border-radius: 2px;
    padding: .75rem 1.6rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: .85rem;
    transition: all .25s;
    border: 0;
    display: inline-flex;
    align-items: center;
    gap: .5rem; background-color: var(--secondary);; color: #fff;
}


#two-verticals-sec .btn-primary-ind {
    background: var(--primary);
    color: #fff;
}

.feature-list {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
}

.feature-list li {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin-bottom: .7rem;
    font-size: .95rem;
}
.feature-list li::before {
    content: "✓";
    color: var(--secondary);
    font-weight: 700;
    font-size: 1.1rem;}

    /* ================= */
.career-sec{ padding: 50px 0;}
.career-sec p{color: var(--muted-fg);}
.career-sec .col-lg-7>div.p-4{border: 1px solid var(--border);}
.career-sec .col-lg-7>div.p-4 h3{ font-size: 1.4rem;}
.career-sec .career-dv p{ margin-bottom: 0;}
.career-sec  textarea{ height: 120px; margin-bottom: 12px;}
.career-sec  input[type="submit"]{background: var(--secondary);
    color: #fff; border: none; transition: .5s; height: 45px;}
    .career-sec{background-color: #F2F5F7;}
    .career-sec  input[type="submit"]:hover{    background: var(--secondary);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -8px rgba(245, 112, 33, .5);}
   .career-sec .career-bx{ background-color: #fff; padding: 1.25rem; }
    .career-sec .career-bx svg { color: var(--secondary);}
    .career-sec .career-bx h4{  margin-top: 0.75rem;          /* mt-3 */
    font-family: 'Poppins', sans-serif; /* font-display (change if needed) */
    font-weight: 600;             /* font-semibold */
    font-size: 0.875rem;          /* text-sm */
    color: var(--primary);               /* text-primary */} 

#contact-pg-sec.career-sec .contact-pg-frm{ padding: 22px; box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1); background-color: #fff !important;}
#contact-pg-sec.career-sec .contact-pg-frm h3{ margin-bottom: 12px;} 


    /* ========= */
       .what-we-do-sec { padding-bottom: 50px;}
   .what-we-do-sec .service-card {
    background: #fff;
    padding: 2.5rem;
    border: 1px solid var(--border);
    transition: all .25s;
    height: 100%; text-align: left;}

   .what-we-do-sec .service-card .num {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--secondary);
    line-height: 1;
    margin-bottom: 1rem;}
 
   .what-we-do-sec .service-card h3 {
    font-size: 1.3rem;
    margin-bottom: .7rem;}

   .what-we-do-sec .service-card p {
    color: var(--text-muted);
    font-size: .95rem;
    margin: 0;}

    /* ================ */
.cta-section {
    background: var(--primary);
    color: #fff;
    padding: 5rem 0;
    position: relative;
    overflow: hidden;}
    .cta-section h2 {
    color: #fff;
    font-size: clamp(1.8rem, 3vw, 2.8rem);}
    .cta-section p {
    color: rgba(255, 255, 255, .75);
}

/* ============== */
.hvac-products-sec{ padding: 40px 0;}
.hvac-products-sec h3{ margin-bottom: 22px;} 
.hvac-products-sec ul:has(.product-row){ margin-bottom: -30px;}
.hvac-products-sec.gray-light-bg{ background-color: #eeeeee60;}
.hvac-products-sec .product-row {
    background: #fff;
    display: flex; flex-direction: column;
    gap: 0;
    margin-bottom: 30px; border: 1px solid #D9E0E8; transition: .5s;}
    .hvac-products-sec .product-row:hover{ border-color: var(--secondary); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);}
    .hvac-products-sec .wp-block-post-template{ display: flex; flex-wrap: wrap; row-gap: 30px; margin: 0 -15px;}
.hvac-products-sec .wp-block-post-template li{ width: 33.333%; padding: 0 15px;}

/* .hvac-products-sec ul.wp-block-post-template li:nth-child(even) .product-row .img { order: 2;}
.hvac-products-sec ul.wp-block-post-template li:nth-child(even) .product-row .body { order: 1;}
.hvac-products-sec ul.wp-block-post-template li:nth-child(even) .product-row{    grid-template-columns:  1.5fr 1fr;} */

.product-row .img {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #F2F5F7;  transition: .5s;}
    .product-row .img figure{ height: 100%; width: 100%; background-color: #fff;}
    .product-row .img img {
    width: 100%;
    height: 100%;
    object-fit: cover; transition-property: transform;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s; transition: .5s;     object-fit: contain !important;
    object-position: center;}
    .product-row:hover .img img {transform: scale(1.05);}
    .product-row .body {
    padding: 24px;}

    .product-row h3 {
    font-size: 1.25rem;
    line-height: 1.75rem;     color: hsl(var(--primary)); margin-bottom: 12px;}


 .text-muted-ind p{ margin: 0 ;     font-size: .875rem;
    line-height: 1.25rem;
 color: #5f6b7a;}

  .product-row h5 { 
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--secondary); margin-top: 28px !important;}

    .hvac-products-sec .feature-list li::before {
    content: "";
    color: var(--secondary);
    font-weight: 700;
    font-size: 1.1rem;
   display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 0;
    margin-top: 1px;

    background-color: var(--secondary); /* icon color (change kar sakte ho) */

    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;

    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-size: contain;}

    /* =============== */
    #director-sec figure img{ object-fit: cover; width: 100%;}

    /* =============== */
   .feedback-sec input:focus-visible, .feedback-sec textarea:focus-visible{    border-color: var(--uacf7-global-button-color) !important;}
   .feedback-sec .grid-bg {
    position: absolute;
    inset: 0;
    opacity: .04;
    background-image: linear-gradient(var(--navy) 1px, transparent 1px), linear-gradient(90deg, var(--navy) 1px, transparent 1px);
    background-size: 40px 40px;}
    .feedback-sec{ padding: 50px 0;}
    .feedback-sec .feedback-card {
    position: relative;
    display: flex;
    grid-template-columns: 1fr;
    border-radius: 32px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--border);
    box-shadow: 0 30px 80px -30px rgba(15, 30, 60, .3); }

     .feedback-sec .side { width: 40%;
    background: linear-gradient(135deg, var(--orange), var(--orange-deep));
    color: #fff;
    padding: 35px;
    position: relative;
    overflow: hidden;}

.feedback-sec .side::before {
    content: "";
    position: absolute;
    bottom: -120px;
    left: -80px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    filter: blur(40px);}

   .feedback-sec .side .quote-mark {
    position: absolute;
    top: 30px;
    right: 40px;
    font-size: 180px;
    font-weight: 900;
    line-height: .7;
    color: rgba(255, 255, 255, .15);
    user-select: none;}

    .feedback-sec .side .pillw {
    display: inline-block;
    background: rgba(255, 255, 255, .18);
    backdrop-filter: blur(8px);
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 11px;
    letter-spacing: .25em;
    font-weight: 600;
    margin-bottom: 24px;}

   .feedback-sec .side h2 {
    font-size: 34px;
    line-height: 1.15;
    margin: 0 0 20px;
    position: relative; color: #fff;}

   .feedback-sec .side .lead {
    color: rgba(255, 255, 255, .85);
    font-size: 14px;
    line-height: 1.6;
    margin: 0 0 36px;
    position: relative;}

   .feedback-sec .side ul {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;}
.feedback-sec .side ul li{display: flex; gap: 12px; margin-bottom: 18px;}
.feedback-sec .side ul li b, .feedback-sec .side ul li strong{ display: block;}
    .feedback-sec.side li {
    display: flex;
    gap: 12px;
    margin-bottom: 18px;}

   .feedback-sec .side .ck {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .2);
    display: grid;
    place-items: center;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;}

    .feedback-sec.side li b {
    display: block;
    font-size: 14px;}

   .feedback-sec .side li span {
    font-size: 12px;
    color: rgba(255, 255, 255, .7);}

    .feedback-sec .pad { width: 60%;
    padding: 35px;}
input:focus, textarea:focus{ outline: none; box-shadow: none !important;}
    .feedback-sec .row2g {
    display: flex; flex-wrap: wrap;
    grid-template-columns: 1fr;
    row-gap: 18px; margin: 0 -15px;
}

.feedback-sec .group-title {
    font-size: 11px;
    letter-spacing: .2em;
    font-weight: 700;
    color: var(--navy);
    margin: 24px 0 12px;}

   .feedback-sec .chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;}

   .feedback-sec .chip {
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid var(--border) !important;
    background: #fff;
    color: var(--navy);
    font-size: 13px;
    cursor: pointer;
    transition: .15s;}
     .feedback-sec  .chip:hover {
    border-color: var(--orange) !important;
}
    .feedback-sec .chip.on {
    background: var(--navy);
    color: #fff;
    border-color: var(--navy);
}

    .feedback-sec .stars3 {
    display: flex;
    gap: 6px;
    align-items: center;
}

.feedback-sec .float {
    position: relative; width: 50%; padding: 0 15px;
}
.feedback-sec .float.float-full{ width: 100%; padding: 0;}
.feedback-sec .float.float-full label{ left: 0;} 

.feedback-sec .float input, .float textarea {
    width: 100%;
    border: 0;
    border-bottom: 2px solid var(--border);
    background: transparent;
    padding: 14px 0 10px;
    font: inherit;
    font-size: 14px;
    color: var(--navy);
    outline: none;
    transition: .2s; border-radius: 0;}
.feedback-sec input[type="submit"]{ border: none;}
   .feedback-sec .float textarea {
    min-height: 140px; margin-bottom: 12px;
    resize: none;
}

.feedback-sec .float label {
    position: absolute;
    left: 15px;
    top: 14px;
    font-size: 14px;
    color: var(--muted-dark);
    pointer-events: none;
    transition: .2s; display: none;
}

.feedback-sec .agree3 {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    color: var(--muted-dark);
    font-size: 13px;
    margin: 24px 0;
}

.feedback-sec .agree3 input {
    margin-top: 3px;
    accent-color: var(--orange);
}

.feedback-sec .submit3 {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: var(--navy);
    color: #fff;
    padding: 14px 32px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 14px;
    box-shadow: 0 18px 30px -15px rgba(15, 30, 60, .5);
    transition: .2s;
}

.feedback-sec .submit3 .arr {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--orange);
    display: grid;
    place-items: center;
    transition: .2s;
}

/* ====================== */
.our-mission-vision-sec{ padding: 0 0 40px; background-color: var(--muted);}
.our-mission-vision-sec .our-v-mision-bx{ box-shadow: 0 0 #0000, 0 0 #0000, 0 4px 10px rgba(0, 0, 0, 0.1); padding: 25px; background-color: #fff; border-top: 4px solid var(--secondary);}
.our-mission-vision-sec .our-v-mision-bx svg{ color: var(--secondary); margin-bottom: 20px; width: 40px; height: 40px;}
.our-mission-vision-sec .our-v-mision-bx h3{ color: var(--primary); margin-bottom: 12px;}
 



/* ============= */
.current-openings-sec{ padding: 40px 0;}
.current-openings-sec .openings-bx{ background-color: #ffffff;
    border: 1px solid #e5e7eb;
    padding: 24px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    transition: border-color 0.3s ease; margin-bottom: 12px;}
    .current-openings-sec .openings-bx:hover{    border-color: #f59e0b; /* accent color */}
    .current-openings-sec  .openings-left{   display: flex;
    gap: 16px;
    align-items: flex-start;}
        .current-openings-sec  .openings-left svg{ height: 24px; width: 24px; color: var(--secondary); margin-top: 4px;}
        .current-openings-sec  .openings-left .openings-content h2{text-transform: uppercase;
    font-size: 20px; color: #000;}
    .current-openings-sec  .openings-left .openings-content .openings-position{  font-size: 14px;
    color: #6b7280;
    margin-top: 4px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;}
        .current-openings-sec  .openings-left .openings-content .openings-position p{ margin: 0;}
        .current-openings-sec  a.apply-now-btn{    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
    border-radius: 6px;
    font-size: 14px;
    background-color: #f59e0b; /* accent */
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    height: 40px;
    padding: 8px 16px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35);}
    .current-openings-sec  a.apply-now-btn:hover{  background-color: #d97706;}

#custom-solution-sec{ display: none;}



/*  */

/* Sabhi properties ko custom-ahu-section ke relational hierarchy me rakha gaya hai bina kisi variable ke */

.custom-ahu-section{background: radial-gradient(at 20% 0%, color-mix(in oklab, #ff6b00 12%, transparent) 0, transparent 50%), 
            radial-gradient(at 80% 100%, color-mix(in oklab, #0a192f 15%, transparent) 0, transparent 50%), 
            #f4f6f9; height: calc(100vh - 115px);}
            .custom-ahu-section>.container, .custom-ahu-section>.container>.row{ height: 100%;}
   
           .custom-ahu-section .inline-badge p{ margin: 0;} 
           .custom-ahu-section .inline-badge{ padding: 8px;}
          .custom-ahu-section .left-slide-boxes .d-flex p:first-child span{ font-size: 24px !important;}
           .custom-ahu-section .left-slide-boxes p{ margin: 0;}
.custom-ahu-section .text-navy { color: #0a192f !important; }
.custom-ahu-section .text-orange { color: #ff6b00 !important; }
.custom-ahu-section .text-steel { color: #718096 !important; }
.custom-ahu-section .text-ink-75 { color: rgba(15, 23, 42, 0.75) !important; }

.custom-ahu-section .bg-navy { background-color: #0a192f !important; }
.custom-ahu-section .bg-orange { background-color: #ff6b00 !important; }
.custom-ahu-section .bg-mist { background-color: #f4f6f9 !important; }
.custom-ahu-section .bg-white-70 { background-color: rgba(255, 255, 255, 0.7) !important; }
.custom-ahu-section .bg-white-80 { background-color: rgba(255, 255, 255, 0.8) !important; }

.custom-ahu-section .fw-extrabold { font-weight: 800 !important; }
.custom-ahu-section .max-w-xl { max-width: 36rem; }

/* Tailwind style heading responsiveness and exact leading */
.custom-ahu-section .main-heading {
  font-size: 2.25rem;
  line-height: 1.02;
}

@media (min-width: 768px) {
  .custom-ahu-section .main-heading {
    font-size: 3.75rem;
  }
}

/* Glassmorphism blur */
.custom-ahu-section .backdrop-blur { 
  backdrop-filter: blur(8px); 
  -webkit-backdrop-filter: blur(8px); 
}

/* Exact border styling matching border-navy/10 and 15 */
.custom-ahu-section .border { 
  border-color: rgba(10, 25, 47, 0.1) !important; 
}
.custom-ahu-section .inline-badge.border {
  border-color: rgba(10, 25, 47, 0.15) !important;
}

/* Tracking and sizing utilities */
.custom-ahu-section .inline-badge {
  font-size: 11px;
  letter-spacing: 0.25em;
}
.custom-ahu-section .font-xs { font-size: 0.75rem; }
.custom-ahu-section .font-xxs { font-size: 0.625rem; }
.custom-ahu-section .tracking-wider { letter-spacing: 0.05em; }

/* Elegant Shadow matching tailwind design */
.custom-ahu-section .shadow-elegant {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
}

/* Buttons and Hovers */
.custom-ahu-section .btn-navy {
  background-color: #0a192f;
  color: #ffffff;
  border: none;
  border-radius: 0.375rem;
  transition: transform 0.2s ease;
}
.custom-ahu-section .btn-hover-up:hover {
  transform: translateY(-2px);
  color: #ffffff !important;
}

.custom-ahu-section .btn-outline-custom {
  border: 1px solid rgba(10, 25, 47, 0.2);
  background-color: #ffffff;
  border-radius: 0.375rem;
  transition: all 0.2s ease;
}
.custom-ahu-section .btn-outline-custom:hover {
  border-color: #ff6b00 !important;
  color: #ff6b00 !important;
}

/* Live Preview Badge Pulse */
.custom-ahu-section .live-pulse {
  display: inline-block;
  width: 8px;
  height: 8px;
  animation: pulse-effect 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse-effect {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ==================== */
.product-detail-pg-sec{background-color: #ffffff;
padding-top: 4rem;      /* 16 * 0.25rem = 4rem (yaani 64px) */
padding-bottom: 4rem;}
.product-detail-pg-sec p{ margin: 0;}
.product-detail-pg-sec .product-detail-pg-flex{margin-left: auto;
margin-right: auto;
display: flex;
gap: 2.5rem; /* 10 * 0.25rem = 2.5rem (yaani 40px) */

box-sizing: border-box;

/* Large screens (1024px and up) ke liye responsive grid */
}
@media (min-width: 1024px) {
 .product-detail-pg-sec .product-detail-pg-flex{ grid-template-cols: 240px 1fr;}
}

/* --- SIDEBAR CONTAINER WRAPPER --- */
.custom-sidebar-wrapper{ width: 20%;}
.custom-sidebar-wrapper .sticky-sidebar {
  position: sticky;
  top: 11rem; /* sticky top-44 -> 44 * 0.25rem = 11rem (176px) */
  border-color: rgba(10, 25, 47, 0.1) !important; /* border-border/navy equivalent */
}
.custom-sidebar-wrapper .sticky-sidebar p{ margin: 0;}
/* Custom Spacing Scale matching Tailwind's space-y-1 */
.custom-sidebar-wrapper .space-y-1 > * + * {
  margin-top: 0.25rem !important;
}

/* Colors Utilities Mapping */
.custom-sidebar-wrapper .bg-mist { background-color: #f4f6f9 !important; }
.custom-sidebar-wrapper .bg-navy { background-color: #0a192f !important; }
.custom-sidebar-wrapper .bg-orange { background-color: #ff6b00 !important; }
.custom-sidebar-wrapper .text-navy { color: #0a192f !important; }
.custom-sidebar-wrapper .text-orange { color: #ff6b00 !important; }

/* --- NAVIGATION LINKS & HOVER EFFECT --- */
.custom-sidebar-wrapper .sidebar-link {
  color: #0a192f !important;
  text-decoration: none !important;
  transition: color 0.2s ease, background-color 0.2s ease; padding: 6px;
}

/* Exact Tailwind matching hover styles (bg-white text-orange) */
.custom-sidebar-wrapper .sidebar-link:hover {
  background-color: #ffffff !important;
  color: #ff6b00 !important;
}

.custom-sidebar-wrapper .sidebar-icon {
  width: 1rem; /* h-4 */
  height: 1rem; /* w-4 */
}

/* --- HELP BOX EXTRA DETAILS --- */
.custom-sidebar-wrapper .help-box {
  box-sizing: border-box;
}

.custom-sidebar-wrapper .help-tagline {
  font-size: 10px;
  letter-spacing: 0.05em; /* tracking-wider */
}

.custom-sidebar-wrapper .call-btn {
  transition: opacity 0.2s ease;
}

.custom-sidebar-wrapper .call-btn:hover {
  opacity: 0.9;
  color: #ffffff !important;
}

/* Optional helper text class utility */
.custom-sidebar-wrapper .text-xs { font-size: 0.75rem !important; }
.product-detail-right-pan{ margin-top: 30px; width: 75%;}

/* overview */
/* --- OVERVIEW SECTION SCOPED CSS --- */
.custom-overview-section{ padding: 40px 0;}
.custom-overview-section .text-navy { color: #0a192f !important; }
.custom-overview-section .text-orange { color: #ff6b00 !important; }
.custom-overview-section .text-ink-75 { color: rgba(15, 23, 42, 0.75) !important; }
.custom-overview-section .text-ink-70 { color: rgba(15, 23, 42, 0.70) !important; }
.custom-overview-section .bg-orange { background-color: #ff6b00 !important; }

/* Max Width Limiters */
.custom-overview-section .max-w-3xl { max-width: 48rem; } /* max-w-3xl equivalent */

/* Badge Styling */
.custom-overview-section .title-badge {
  letter-spacing: 0.3em;
}
.custom-overview-section .badge-line {
  display: inline-block;
  height: 1px;
  width: 2rem; /* w-8 */
}

/* Headings Responsiveness */
.custom-overview-section .main-heading {
  font-size: 1.875rem; /* text-3xl */
}
@media (min-width: 768px) {
  .custom-overview-section .main-heading {
    font-size: 2.25rem; /* md:text-4xl */
  }
}

/* --- FEATURE CARDS & HOVER EFFECTS --- */
.custom-overview-section .feature-card {
  border-color: rgba(10, 25, 47, 0.1) !important; /* Tailwind border-border proxy */
  background: linear-gradient(135deg, #ffffff, #f4f6f9); /* bg-gradient-to-br from-white to-mist */
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), 
              border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), 
              box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Exact Tailwind matching Hover States (hover:-translate-y-1 hover:border-orange) */
.custom-overview-section .feature-card:hover {
  transform: translateY(-4px); /* -translate-y-1 */
  border-color: #ff6b00 !important; /* hover:border-orange */
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.05); /* hover:shadow-card */
}

/* Font Sizing Utilities */
.custom-overview-section .text-xs { font-size: 0.75rem !important; }
.custom-overview-section .text-sm { font-size: 0.875rem !important; }

/* ===============mattrix-sec================ */
/* --- METRICS SECTION RELATIONAL CSS --- */
.custom-metrics-section{ padding: 40px 0;}
.custom-metrics-section .text-navy { color: #0a192f ; }
.custom-metrics-section .text-orange { color: #ff6b00 ; }
.custom-metrics-section .text-steel { color: #718096 ; }
.custom-metrics-section .bg-orange { background-color: #ff6b00 ; }
.custom-metrics-section .bg-mist { background-color: #f4f6f9 ; }

.custom-metrics-section .fw-extrabold { font-weight: 800 ; }

/* Badge Top Line Elements */
.custom-metrics-section .title-badge {
  letter-spacing: 0.3em;
}
.custom-metrics-section .badge-line {
  display: inline-block;
  height: 1px;
  width: 2rem; /* w-8 */
}

/* Heading Sizes */
.custom-metrics-section .main-heading {
  font-size: 1.875rem; /* text-3xl */
}
@media (min-width: 768px) {
  .custom-metrics-section .main-heading {
    font-size: 2.25rem; /* md:text-4xl */
  }
}

/* Metric Cards Layout */
.custom-metrics-section .metric-icon {
  width: 1.25rem; /* h-5 */
  height: 1.25rem; /* w-5 */
}

.custom-metrics-section .shadow-card {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03) ;
}

.custom-metrics-section .border {
  border-color: rgba(10, 25, 47, 0.1) ; /* border-border hook */
}

/* --- CUSTOM GRADIENT PROGRESS BAR --- */
.custom-metrics-section .progress-bar-container {
  height: 0.375rem; /* h-1.5 -> 6px */
  width: 100%;
  overflow: hidden;
}

.custom-metrics-section .progress-fill {
  height: 100%;
  /* Gradient matching Tailwind's from-orange to-[oklch(0.82_0.16_55)] */
  background: linear-gradient(90deg, #ff6b00, #ffb366); 
}

/* Font Sizing Helpers */
.custom-metrics-section .text-xs { font-size: 0.75rem ; }
.custom-metrics-section .font-xxs { font-size: 0.625rem ; }
.custom-metrics-section .tracking-wider { letter-spacing: 0.05em; }


/* ===============specs=============== */
/* --- SPECIFICATIONS SECTION SCOPED CSS --- */
.custom-specs-section{ padding: 40px 0;}
.custom-specs-section .text-navy { color: #0a192f !important; }
.custom-specs-section .text-orange { color: #ff6b00 !important; }
.custom-specs-section .text-ink-80 { color: rgba(15, 23, 42, 0.8) !important; }
.custom-specs-section .bg-orange { background-color: #ff6b00 !important; }
.custom-specs-section .bg-navy { background-color: #0a192f !important; }
.custom-specs-section .bg-mist { background-color: #f4f6f9 !important; }

/* Section Header Styles */
.custom-specs-section .title-badge {
  letter-spacing: 0.3em;
}
.custom-specs-section .badge-line {
  display: inline-block;
  height: 1px;
  width: 2rem; /* w-8 */
}

.custom-specs-section .main-heading {
  font-size: 1.875rem; /* text-3xl */
}
@media (min-width: 768px) {
  .custom-specs-section .main-heading {
    font-size: 2.25rem; /* md:text-4xl */
  }
}

/* Outer Table Wrapper & Borders */
.custom-specs-section .table-card-wrapper {
  background-color: #ffffff;
  border-color: rgba(10, 25, 47, 0.1) !important; /* border-border core styling */
}

/* Base resets for Bootstrap table styling to match design */
.custom-specs-section .custom-specs-table {
  border-collapse: collapse !important;
}

.custom-specs-section .custom-specs-table thead th {
  background-color: #0a192f !important;
  color: #ffffff !important;
  border: none !important;
  font-weight: 600;
}

.custom-specs-section .custom-specs-table tbody tr {
  border-bottom: 1px solid rgba(10, 25, 47, 0.05) !important;
}

.custom-specs-section .custom-specs-table tbody tr:last-child {
  border-bottom: none !important;
}

.custom-specs-section .custom-specs-table tbody td {
  border: none !important;
  white-space: nowrap; /* Prevent data wrapping on small tables */
}

/* Row-wise colors proxies */
.custom-specs-section .custom-specs-table tr.bg-mist {
  background-color: #f4f6f9 !important;
}

/* Helper spacing utilities */
.custom-specs-section .text-xs { font-size: 0.75rem !important; }


/* ============components=========== */
/* --- COMPONENTS SECTION SCOPED CSS --- */
.custom-components-section{ padding: 40px 0;}
.custom-components-section .text-navy { color: #0a192f !important; }
.custom-components-section .text-orange { color: #ff6b00 !important; }
.custom-components-section .text-ink-70 { color: rgba(15, 23, 42, 0.7) !important; }
.custom-components-section .bg-orange { background-color: #ff6b00 !important; }
.custom-components-section .bg-navy { background-color: #0a192f !important; }

/* Section Badges Style */
.custom-components-section .title-badge {
  letter-spacing: 0.3em;
}
.custom-components-section .badge-line {
  display: inline-block;
  height: 1px;
  width: 2rem; /* w-8 */
}

.custom-components-section .main-heading {
  font-size: 1.875rem; /* text-3xl */
}
@media (min-width: 768px) {
  .custom-components-section .main-heading {
    font-size: 2.25rem; /* md:text-4xl */
  }
}

/* Image Wrapper Casing */
.custom-components-section .image-card-wrapper {
  border-color: rgba(10, 25, 47, 0.1) !important; /* border-border definition */
}

/* --- COMPONENT ITEM CARDS --- */
.custom-components-section .component-card {
  border-color: rgba(10, 25, 47, 0.1) !important;
  transition: border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Exact Tailwind hover transition effect (hover:border-orange) */
.custom-components-section .component-card:hover {
  border-color: #ff6b00 !important;
}

/* 01, 02 Number Badges Casing Layout */
.custom-components-section .circle-number {
  width: 2.5rem; /* h-10 -> 40px */
  height: 2.5rem; /* w-10 -> 40px */
}

/* Utility Flex Box Helpers for Older Browsers support */
.custom-components-section .place-items-center {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Typography Helpers */
.custom-components-section .text-xs { font-size: 0.75rem !important; }
.custom-components-section .text-sm { font-size: 0.875rem !important; }

/* ===========performance========== */
/* --- PERFORMANCE SECTION SCOPED CSS --- */
.custom-performance-section{ padding: 40px 0;}
.custom-performance-section .text-navy { color: #0a192f !important; }
.custom-performance-section .text-orange { color: #ff6b00 !important; }
.custom-performance-section .text-ink-70 { color: rgba(15, 23, 42, 0.7) !important; }
.custom-performance-section .bg-orange { background-color: #ff6b00 !important; }

/* Upper Header Badges Layout */
.custom-performance-section .title-badge {
  letter-spacing: 0.3em;
}
.custom-performance-section .badge-line {
  display: inline-block;
  height: 1px;
  width: 2rem; /* w-8 */
}

.custom-performance-section .main-heading {
  font-size: 1.875rem; /* text-3xl */
}
@media (min-width: 768px) {
  .custom-performance-section .main-heading {
    font-size: 2.25rem; /* md:text-4xl */
  }
}

/* --- GRID ITEM CARDS & HOVER EFFECTS --- */
.custom-performance-section .highlight-card {
  border-color: rgba(10, 25, 47, 0.1) !important; /* border-border hook */
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Perfect proxy for group-hover interactions */
.custom-performance-section .highlight-card:hover {
  transform: translateY(-4px); /* -translate-y-1 */
  border-color: #ff6b00 !important; /* hover:border-orange */
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.05) !important; /* hover:shadow-card */
}

/* --- COMPONENT ICON BOX GRADIENT --- */
.custom-performance-section .icon-box {
  width: 3rem; /* h-12 -> 48px */
  height: 3rem; /* w-12 -> 48px */
  /* Gradient replacing Tailwind's from-orange to-[oklch(0.82_0.16_55)] */
  background: linear-gradient(135deg, #ff6b00, #ffb366) !important;
}

.custom-performance-section .shadow-glow {
  box-shadow: 0 4px 14px 0 rgba(255, 107, 0, 0.3) !important;
}

.custom-performance-section .svg-icon {
  width: 1.5rem; /* h-6 */
  height: 1.5rem; /* w-6 */
}

/* Flexbox Grid Centering Utility */
.custom-performance-section .place-items-center {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Micro Typography Layout Utilities */
.custom-performance-section .text-xs { font-size: 0.75rem !important; }
.custom-performance-section .text-sm { font-size: 0.875rem !important; }
.custom-performance-section .lh-relaxed { line-height: 1.625; }

/* =============applications============ */
/* --- APPLICATIONS SECTION SCOPED CSS --- */
.custom-apps-section{ padding: 40px 0;}
.custom-apps-section .text-navy { color: #0a192f !important; }
.custom-apps-section .text-orange { color: #ff6b00 !important; }
.custom-apps-section .bg-orange { background-color: #ff6b00 !important; }
.custom-apps-section .bg-mist { background-color: #f4f6f9 !important; }

/* Upper Badge Header Elements */
.custom-apps-section .title-badge {
  letter-spacing: 0.3em;
}
.custom-apps-section .badge-line {
  display: inline-block;
  height: 1px;
  width: 2rem; /* w-8 -> 32px */
}

.custom-apps-section .main-heading {
  font-size: 1.875rem; /* text-3xl */
}
@media (min-width: 768px) {
  .custom-apps-section .main-heading {
    font-size: 2.25rem; /* md:text-4xl */
  }
}

/* --- CARD HOVER STATES & CHILDS INTERACTIONS --- */
.custom-apps-section .app-card {
  border-color: rgba(10, 25, 47, 0.1) !important; /* border-border definition */
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1); flex-direction: column; gap: 10px !important; text-align: center; justify-content: center;
}

.custom-apps-section .icon-container {
  width: 2.75rem; /* h-11 -> 44px */
  height: 2.75rem; /* w-11 -> 44px */
  transition: background-color 0.2s ease, color 0.2s ease;
}

.custom-apps-section .app-svg {
  width: 1.25rem; /* h-5 */
  height: 1.25rem; /* w-5 */
}

/* Perfect Proxy for Tailwind's .group:hover interactions */
.custom-apps-section .app-card:hover {
  transform: translateY(-4px); /* -translate-y-1 */
  border-color: #ff6b00 !important; /* hover:border-orange */
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.05) !important; /* hover:shadow-card */
}

/* group-hover:bg-orange & group-hover:text-white triggers */
.custom-apps-section .app-card:hover .icon-container {
  background-color: #ff6b00 !important;
  color: #ffffff !important;
}

/* Extra Helper Utilities */
.custom-apps-section .place-items-center {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.custom-apps-section .text-xs { font-size: 0.75rem !important; }
.custom-apps-section .text-sm { font-size: 0.875rem !important; }


/* =========technical document */
/* --- TECHNICAL DOCUMENTATION BROCHURE SCOPED CSS --- */

/* Direct Color Rules Mapping */
.technical-doc-sec h3{ color: #fff;}
.technical-doc-sec .text-orange { color: #ff6b00 !important; }
.technical-doc-sec .bg-orange { background-color: #ff6b00 !important; }
.technical-doc-sec .text-white-75 { color: rgba(255, 255, 255, 0.75) !important; }

/* Max Width Constraint Helper */
.technical-doc-sec .max-w-xl { max-width: 36rem; }

/* Dynamic Background Gradient (bg-gradient-brand) */
.technical-doc-sec .brand-gradient-card {
  background: linear-gradient(135deg, #0a192f 0%, #112240 100%) !important;
}

/* Elegant Shadow Definition */
.technical-doc-sec .shadow-elegant {
  box-shadow: 0 20px 40px -15px rgba(10, 25, 47, 0.3) !important;
}

/* --- DECORATIVE BLUR CIRCLES LAYOUT --- */
.technical-doc-sec .absolute-circle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.technical-doc-sec .circle-top-right {
  top: -2.5rem;   /* -top-10 */
  right: -2.5rem; /* -right-10 */
  width: 12rem;   /* w-48 */
  height: 12rem;  /* h-48 */
}

.technical-doc-sec .circle-bottom-left {
  bottom: -5rem;  /* -bottom-20 */
  left: -2.5rem;  /* -left-10 */
  width: 14rem;   /* w-56 */
  height: 14rem;  /* h-56 */
}

/* Opacity Blur Core Proxies */
.technical-doc-sec .bg-orange-30 { background-color: rgba(255, 107, 0, 0.3); }
.technical-doc-sec .bg-orange-20 { background-color: rgba(255, 107, 0, 0.2); }
.technical-doc-sec .blur-3xl { filter: blur(64px); }

/* --- RESPONSIVE TYPOGRAPHY --- */
.technical-doc-sec .tracking-wider {
  letter-spacing: 0.25em;
}

.technical-doc-sec .main-title {
  font-size: 1.5rem; /* text-2xl */
}
@media (min-width: 768px) {
  .technical-doc-sec .main-title {
    font-size: 1.875rem; /* md:text-3xl */
  }
}

/* --- DOWNLOAD BUTTON INTERACTION --- */
.technical-doc-sec .download-btn {
  white-space: nowrap;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), 
              box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Matching Tailwind's hover:-translate-y-0.5 and shadow glow */
.technical-doc-sec .download-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px 0 rgba(255, 107, 0, 0.4) !important;
}

.technical-doc-sec .svg-icon {
  width: 1rem;  /* h-4 */
  height: 1rem; /* w-4 */
}

/* Micro Font Helpers */
.technical-doc-sec .text-xs { font-size: 0.75rem !important; }
.technical-doc-sec .text-sm { font-size: 0.875rem !important; }

/* ==============certificated =============*/
/* --- CERTIFICATIONS SECTION RELATIONAL CSS --- */

/* Direct Custom Colors Mapping */
.certificated-sec{ padding: 40px 0; text-align: center;}
.certificated-sec p{ margin: 0;}
.certificated-sec .text-navy { color: #0a192f !important; }
.certificated-sec .text-orange { color: #ff6b00 !important; }
.certificated-sec .bg-orange { background-color: #ff6b00 !important; }
.certificated-sec .include-serv-flex{ width: 85%; margin: auto;}
/* Upper Info Title Layout */
.certificated-sec .title-badge {
  letter-spacing: 0.3em;
}
.certificated-sec .badge-line {
  display: inline-block;
  height: 1px;
  width: 2rem; /* w-8 proxy -> 32px */
}

/* Headings Responsiveness Rules */
.certificated-sec .main-heading {
  font-size: 1.875rem; /* text-3xl */
}
@media (min-width: 768px) {
  .certificated-sec .main-heading {
    font-size: 2.25rem; /* md:text-4xl */
  }
}

/* --- BADGES CARD DESIGN SYSTEM --- */
.certificated-sec .border {
  border-color: rgba(10, 25, 47, 0.1) !important; /* Tailwind border-border styling */
}

.certificated-sec .shadow-card {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03) !important;
}

.certificated-sec .badge-icon {
  width: 1rem;  /* h-4 */
  height: 1rem; /* w-4 */
}

/* Micro Font Utilities */
.certificated-sec .text-xs { font-size: 0.75rem !important; }
.certificated-sec .text-sm { font-size: 0.875rem !important; }

/* =============product-faq============ */
/* --- FAQ ACCORDION SECTION SCOPED CSS --- */

/* Direct Custom Colors Mapping */
.product-faq .text-navy { color: #0a192f !important; }
.product-faq .text-orange { color: #ff6b00 !important; }
.product-faq .bg-orange { background-color: #ff6b00 !important; }
.product-faq .text-ink-75 { color: rgba(15, 23, 42, 0.75) !important; }

/* Upper Info Badge Elements */
.product-faq .title-badge {
  letter-spacing: 0.3em;
}
.product-faq .badge-line {
  display: inline-block;
  height: 1px;
  width: 2rem; /* w-8 proxy -> 32px */
}

/* Headings Responsiveness Engine */
.product-faq .main-heading {
  font-size: 1.875rem; /* text-3xl */
}
@media (min-width: 768px) {
  .product-faq .main-heading {
    font-size: 2.25rem; /* md:text-4xl */
  }
}

/* --- ACCORDION INTERACTION DESIGNS --- */
.product-faq .faq-item-card {
  border-color: rgba(10, 25, 47, 0.1) !important; /* Tailwind border-border component */
}

.product-faq .btn-accordion {
  outline: none !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

/* Chevron Transition Mechanics */
.product-faq .chevron-icon {
  width: 1.25rem;  /* h-5 */
  height: 1.25rem; /* w-5 */
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Exact Proxy for rotate-180 class on open tab */
.product-faq .icon-rotate {
  transform: rotate(180deg);
}

/* Additional Typography Utilities */
.product-faq .text-xs { font-size: 0.75rem !important; }
.product-faq .text-sm { font-size: 0.875rem !important; }

/* =========enquiry-sec========= */
/* --- INQUIRY FORM SECTION SCOPED CSS --- */

/* Direct Color Theme Mappings */
.ahu-inquiry-sec{ margin-top: 50px;}
.ahu-inquiry-sec h2{ color: #fff;}
.ahu-inquiry-sec .text-navy { color: #0a192f !important; }
.ahu-inquiry-sec .text-orange { color: #ff6b00 !important; }
.ahu-inquiry-sec .bg-orange { background-color: #ff6b00 !important; }
.ahu-inquiry-sec .bg-mist { background-color: #f4f6f9 !important; }
.ahu-inquiry-sec .text-white-75 { color: rgba(255, 255, 255, 0.75) !important; }

/* Upper Typography Layout Details */
.ahu-inquiry-sec .tracking-wider {
  letter-spacing: 0.25em;
}
.ahu-inquiry-sec .max-w-xl { 
  max-width: 36rem; 
}

.ahu-inquiry-sec .main-heading {
  font-size: 1.875rem; /* text-3xl */
}
@media (min-width: 768px) {
  .ahu-inquiry-sec .main-heading {
    font-size: 2.25rem; /* md:text-4xl */
  }
}

/* Base Card Background Brand Gradient & Shadows */
.ahu-inquiry-sec .brand-gradient-card {
  background: linear-gradient(135deg, #0a192f 0%, #112240 100%) !important;
}
.ahu-inquiry-sec .shadow-elegant {
  box-shadow: 0 20px 40px -15px rgba(10, 25, 47, 0.3) !important;
}

/* Inner Layout Elements Container */
.ahu-inquiry-sec .inner-form-card {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
}

/* --- FORM INPUT FIELDS & FOCUS MECHANICS --- */
.ahu-inquiry-sec .form-input {
  font-size: 0.875rem !important; /* text-sm */
  padding: 0.75rem 1rem !important; /* py-3 px-4 */
  background-color: #ffffff;
  border: 1px solid rgba(10, 25, 47, 0.15) !important; /* border-border core hook */
  border-radius: 0.375rem !important; /* rounded-md */
  color: #0a192f !important;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color 0.15s ease-in-out;
}

/* Focus Border Switch to Brand Orange */
.ahu-inquiry-sec .form-input:focus {
  border-color: #ff6b00 !important;
  background-color: #ffffff !important;
}

/* Placeholder Utility Reset */
.ahu-inquiry-sec .form-input::placeholder {
  color: rgba(15, 23, 42, 0.4) !important;
}

.ahu-inquiry-sec .textarea-field {
height: 150px;
}
.ahu-inquiry-sec .aiowps-captcha-equation{ color: #000;}

textarea{ resize: none;}

/* --- INTERACTIVE BUTTON HOVER EFFECTS --- */
.ahu-inquiry-sec .submit-btn {
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), 
              box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Tailwind's hover:-translate-y-0.5 + shadow-glow replication */
.ahu-inquiry-sec .submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px 0 rgba(255, 107, 0, 0.4) !important;
}

.ahu-inquiry-sec .svg-icon {
  width: 1rem;  /* h-4 */
  height: 1rem; /* w-4 */
}

/* Font Sizing Micro Utilities */
.ahu-inquiry-sec .text-xs { font-size: 0.75rem !important; }
.ahu-inquiry-sec .text-sm { font-size: 0.875rem !important; }

/* ===========assembly============= */
/* --- CORE ASSEMBLY FAN & MOTOR SECTION SCOPED CSS --- */

.custom-assembly-section .text-navy { color: #0a192f !important; }
.custom-assembly-section .text-orange { color: #ff6b00 !important; }
.custom-assembly-section .text-cyan { color: #00b4d8 !important; }
.custom-assembly-section .text-ink-70 { color: rgba(15, 23, 42, 0.7) !important; }
.custom-assembly-section .bg-navy { background-color: #0a192f !important; }
.custom-assembly-section .bg-mist { background-color: #f4f6f9 !important; }

/* Micro Sizing & Typography Utilities */
.custom-assembly-section .text-xs { font-size: 0.75rem !important; }
.custom-assembly-section .text-sm { font-size: 0.875rem !important; }
.custom-assembly-section .tracking-wider { letter-spacing: 0.25em; }

.custom-assembly-section .main-heading {
  font-size: 1.875rem; /* text-3xl */
}
@media (min-width: 768px) {
  .custom-assembly-section .main-heading {
    font-size: 2.25rem; /* md:text-4xl */
  }
}

/* --- LEFT IMAGE PREVIEW CARD --- */
.custom-assembly-section .img-card-wrapper {
  border-color: rgba(10, 25, 47, 0.1) !important;
}

.custom-assembly-section .image-container img {
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); height: 200px;
}

.custom-assembly-section .img-card-wrapper:hover .image-container img {
  transform: scale(1.03);
}

/* Floating Diagram Absolute Version Badge */
.custom-assembly-section .tag-mono {
  top: 1.5rem;
  left: 1.5rem;
  box-shadow: 0 4px 12px rgba(10, 25, 47, 0.15);
  letter-spacing: 0.05em;
}

.custom-assembly-section .dot-cyan {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  background-color: #00b4d8;
  box-shadow: 0 0 8px #00b4d8;
}

/* --- RIGHT FEATURES INFOGRAPHIC MATRIX --- */
.custom-assembly-section .feat-card {
  border-color: rgba(10, 25, 47, 0.1) !important;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dynamic Interactive Hover Glow Proxy */
.custom-assembly-section .feat-card:hover {
  transform: translateY(-4px);
  border-color: #ff6b00 !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.05) !important;
}

/* Custom Icon Shell Box Dimensions */
.custom-assembly-section .ic-cyan {
  width: 3rem;  /* 48px */
  height: 3rem; /* 48px */
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Subtle icon block transition on parent grid item hover */
.custom-assembly-section .feat-card:hover .ic-cyan {
  background-color: rgba(255, 107, 0, 0.1) !important;
  color: #ff6b00 !important;
}


/* =============double-skin-sec========= */
/* --- DOUBLE SKIN PANEL SECTION RELATIONAL CSS --- */

.double-skin-sec {
  position: relative;
  background-color: #fafbfc;
}

/* Direct Color Theme Tokens */
.double-skin-sec .text-navy { color: #0a192f !important; }
.double-skin-sec .text-orange { color: #ff6b00 !important; }
.double-skin-sec .text-cyan { color: #00b4d8 !important; }
.double-skin-sec .text-ink-70 { color: rgba(15, 23, 42, 0.7) !important; }
.double-skin-sec .bg-mist { background-color: #f4f6f9 !important; }

/* Micro Sizing & Matrix Typography Consistency */
.double-skin-sec .text-xs { font-size: 0.75rem !important; }
.double-skin-sec .text-sm { font-size: 0.875rem !important; }
.double-skin-sec .tracking-wider { letter-spacing: 0.25em; }

/* Section Heading Responsiveness Engine matching Matrix Block */
.double-skin-sec .main-heading {
  font-size: 1.875rem; /* text-3xl standard */
}
@media (min-width: 768px) {
  .double-skin-sec .main-heading {
    font-size: 2.25rem; /* md:text-4xl */
  }
}

/* Optional Grid Background Blueprint Effect Overlay */
.double-skin-sec .blueprint-bg-pattern {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background-image: linear-gradient(rgba(10,25,47,0.02) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(10,25,47,0.02) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
}

/* --- MATERIAL STRIP COMPONENTS & LAYOUTS --- */
.double-skin-sec .layer-strip {
  border-color: rgba(10, 25, 47, 0.1) !important;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.double-skin-sec .layer-strip:hover {
  transform: translateX(4px);
  border-color: #00b4d8 !important;
}

/* Colored Coding Structural Indicator Bars */
.double-skin-sec .color-bar {
  display: inline-block;
  width: 6px;
  height: 2.25rem;
  border-radius: 4px;
  flex-shrink: 0;
}
.double-skin-sec .bg-steel { background-color: #7e8a9a !important; }
.double-skin-sec .bg-amber { background-color: #ffb703 !important; }
.double-skin-sec .bg-cyan { background-color: #00b4d8 !important; }
.double-skin-sec .bg-dark-frame { background-color: #3d4654 !important; }

/* --- PERFORMANCE STATS CARD MATRIX --- */
.double-skin-sec .mini-stat-box {
  border-color: rgba(10, 25, 47, 0.1) !important;
}

.double-skin-sec .text-cyan-gradient {
  background: linear-gradient(135deg, #00b4d8, #0077b6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* --- MEDIA CARDS --- */
.double-skin-sec .panel-image-card {
  border-color: rgba(10, 25, 47, 0.1) !important;
}
.double-skin-sec .panel-image-card img {
  max-height: 400px;
  object-position: center;
}
 

 .badge-line{ display: none !important;}

/* ===========menu================ */
/* Main Dropdown Container */
.dropdown {
    position: absolute;
    background: #ffffff;
    min-width: 290px;
    box-shadow: 0px 8px 16px rgba(0,0,0,0.1);
    padding: 10px 0;
    display: none; /* Controlled by toggle class or JS */
    z-index: 999;
}

/* Parent class active/open hone par dropdown dikhane ke liye */
.nav-item.is-open .dropdown {
    display: block;
}

/* Submenu Wrapper Category */
.dropdown-category {
    position: relative;
}

/* Submenu Trigger aur Direct Links dono ka common style */
.dropdown-category .category-trigger,
.dropdown .direct-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    color: #333333;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.3s, color 0.3s;
}

/* Hover Effect for all links in main menu */
.dropdown-category .category-trigger:hover,
.dropdown .direct-link:hover {
    background-color: #f8f9fa;
    color: var(--secondary); /* Aapka theme/brand color */
}

/* Arrow indicator for items with submenu */
.dropdown-category .arrow {
    font-size: 14px;
    color: #888888;
}

/* --- Right Side Submenu (Only for first 2 items) --- */
.dropdown-category .submenu {
    position: absolute;
    top: 0;
    left: 100%; /* Menu ko bilkul right side me push karega */
    background: #ffffff;
    min-width: 270px;
    box-shadow: 4px 4px 16px rgba(0,0,0,0.1);
    padding: 10px 0;
    display: none; /* Shuruat me hidden rahega */
    border-left: 2px solid #ff9900; /* Orange Accent Line */
}

/* Hover karne par hi inner menu open hoga */
.dropdown-category:hover .submenu {
    display: block;
}

/* Inner Submenu ke items ki styling */
.dropdown-category .submenu a {
    display: block;
    padding: 10px 20px;
    color: #555555;
    text-decoration: none;
    font-size: 13px;
    transition: background 0.2s, color 0.2s;
}

.dropdown-category .submenu a:hover {
    background-color: #f1f3f5;
    color: var(--secondary);
}
.dropdown{ overflow: visible !important;}



/* ============enginerirg-page========== */
/* --- Cleanroom Hero Section Custom CSS (No Variables, Pure Hex/RGBA) --- */

/* Left Column Background (Light Grayish Blue Gradient) */
.cleanroom-hero-section{ height: calc(100vh - 115px) !important;}
.cleanroom-hero-section .hero-left-pane {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}
.cleanroom-hero-section figure{ height: 100%; margin: 0;}
.cleanroom-hero-section .wp-block-image img{ height: 100%; object-fit: cover;}

/* Right Column Background (Deep Navy Blue) */
.cleanroom-hero-section .hero-right-pane {
    background-color: #0f172a;
}

/* Blueprint Grid Background Line Colors */
.cleanroom-hero-section .grid-blueprint {
    background-image: 
        linear-gradient(rgba(100, 116, 139, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(100, 116, 139, 0.1) 1px, transparent 1px);
    background-size: 20px 20px;
    pointer-events: none;
}

/* Typography Overrides (Deep Navy Blue for Heading) */
.cleanroom-hero-section .font-heading {
    color: #0f172a;
    line-height: 1.05;
    letter-spacing: -0.02em;
}

/* Badge Styling */
.cleanroom-hero-section .badge-custom {
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    color: #64748b;
    background-color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(100, 116, 139, 0.3);
    backdrop-filter: blur(4px);
}

.cleanroom-hero-section .icon-badge {
    width: 14px;
    height: 14px;
}

/* Primary Button (Blue Gradient) */
.cleanroom-hero-section .btn-brand-gradient {
    background-color: var(--secondary);
    color: #ffffff !important;
    border: none;
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.4);
    transition: transform 0.2s ease;
} 

.cleanroom-hero-section .btn-brand-gradient:hover {
    transform: scale(1.02);
}

/* Outline Button */
.cleanroom-hero-section .btn-outline-custom {
    border: 1px solid rgba(100, 116, 139, 0.4);
    color: #0f172a;
    font-weight: 600;
}

/* Image Blend Mode */
.cleanroom-hero-section .img-blueprint {
    mix-blend-mode: screen;
    opacity: 0.9;
}

/* Right Pane Overlay Gradient */
.cleanroom-hero-section .overlay-shadow {
    background: linear-gradient(135deg, transparent, rgba(15, 23, 42, 0.8));
    pointer-events: none;
}

/* Glassmorphism Cards */
.cleanroom-hero-section .glass-dark {
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.cleanroom-hero-section .card-differential {
    width: 224px;
}

.cleanroom-hero-section .card-particle {
    width: 240px;
    animation-delay: 1.2s;
}

.cleanroom-hero-section .card-label {
    font-size: 10px;
    letter-spacing: 0.15em;
}

/* Mini Bar Chart Container */
.cleanroom-hero-section .chart-container {
    height: 48px;
}

/* Mini Bar Chart Bars (Teal/Cyan Gradient) */
.cleanroom-hero-section .chart-bar {
    flex: 1;
    border-radius: 2px;
    background: linear-gradient(to top, #06b6d4, #22d3ee);
}

/* --- Animations --- */
@keyframes heroFadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes heroFloat {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

.cleanroom-hero-section .animate-fade-up {
    animation: heroFadeUp 0.8s ease-out forwards;
}

.cleanroom-hero-section .animate-float {
    animation: heroFloat 4s ease-in-out infinite;
}
.cleanroom-hero-section .animate-float p{ margin: 0;}
/* ======================= */
/* --- Cleanroom Hero Section Custom CSS (No Variables, Pure Hex/RGBA) --- */

/* Left Column Background (Light Grayish Blue Gradient) */
.cleanroom-hero-section .hero-left-pane {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}

/* Right Column Background (Deep Navy Blue) */
.cleanroom-hero-section .hero-right-pane {
    background-color: #0f172a;
}

/* Blueprint Grid Background Line Colors */
.cleanroom-hero-section .grid-blueprint {
    background-image: 
        linear-gradient(rgba(100, 116, 139, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(100, 116, 139, 0.1) 1px, transparent 1px);
    background-size: 20px 20px;
    pointer-events: none;
}

/* Typography Overrides (Deep Navy Blue for Heading) */
.cleanroom-hero-section .font-heading {
    color: #0f172a;
    line-height: 1.05;
    letter-spacing: -0.02em;
}

/* Badge Styling */
.cleanroom-hero-section .badge-custom {
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    color: #64748b;
    background-color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(100, 116, 139, 0.3);
    backdrop-filter: blur(4px);
}

.cleanroom-hero-section .icon-badge {
    width: 14px;
    height: 14px;
}

/* Primary Button (Blue Gradient) */
.cleanroom-hero-section .btn-brand-gradient {
    background-color: var(--secondary);
    color: #ffffff !important;
    border: none;
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.4);
    transition: transform 0.2s ease;
}

.cleanroom-hero-section .btn-brand-gradient:hover {
    transform: scale(1.02);
}

/* Outline Button */
.cleanroom-hero-section .btn-outline-custom {
    border: 1px solid rgba(100, 116, 139, 0.4);
    color: #0f172a;
    font-weight: 600;
}

/* Image Blend Mode */
.cleanroom-hero-section .img-blueprint {
    mix-blend-mode: screen;
    opacity: 0.9;
}

/* Right Pane Overlay Gradient */
.cleanroom-hero-section .overlay-shadow {
    background: linear-gradient(135deg, transparent, rgba(15, 23, 42, 0.8));
    pointer-events: none;
}

/* Glassmorphism Cards */
.cleanroom-hero-section .glass-dark {
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.cleanroom-hero-section .card-differential {
    width: 224px;
}

.cleanroom-hero-section .card-particle {
    width: 240px;
    animation-delay: 1.2s;
}

.cleanroom-hero-section .card-label {
    font-size: 10px;
    letter-spacing: 0.15em;
}

/* Mini Bar Chart Container */
.cleanroom-hero-section .chart-container {
    height: 48px;
}

/* Mini Bar Chart Bars (Teal/Cyan Gradient) */
.cleanroom-hero-section .chart-bar {
    flex: 1;
    border-radius: 2px;
    background: linear-gradient(to top, #06b6d4, #22d3ee);
}

/* --- Animations --- */
@keyframes heroFadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes heroFloat {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

.cleanroom-hero-section .animate-fade-up {
    animation: heroFadeUp 0.8s ease-out forwards;
}

.cleanroom-hero-section .animate-float {
    animation: heroFloat 4s ease-in-out infinite;
}

/* ========================================== */
/* --- Cleanroom Specs Section - 100% Exact Image Replica --- */

.cleanroom-specs-section {
    background-color: #002253; /* Image ka exact dark blue background */
    padding-top: 6rem;         /* py-24 equivalent */
    padding-bottom: 6rem;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Container spacing alignment */
.cleanroom-specs-section .container-custom {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* Background Blueprint Grid Effect (Subtle overlay lines) */
.cleanroom-specs-section .grid-blueprint {
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 24px 24px;
    pointer-events: none;
    opacity: 0.5;
}

/* Subheading Styling (Exact Light Blue Color & Letter Spacing from Image) */
.cleanroom-specs-section .section-subtitle {
    font-size: 0.75rem;
    font-weight: 600;
    color: #4facfe; 
    letter-spacing: 0.22em;
}

/* Main Title styling */
.cleanroom-specs-section .section-title {
    margin-top: 0.75rem;
    font-size: 2.5rem;
    font-weight: 700;
    color: #ffffff;
    max-width: 768px;
    letter-spacing: -0.01em;
}

/* Responsive Table Wrapper with Glassmorphism Look */
.cleanroom-specs-section .table-glass-container {
    margin-top: 3rem;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1rem; /* rounded-2xl */
    overflow-x: auto; /* For mobile responsiveness */
}

/* Pure Native Table Layout */
.cleanroom-specs-section .specs-pure-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 0.875rem; /* text-sm */
    color: rgba(255, 255, 255, 0.8);
}

/* Table Header Row Styling */
.cleanroom-specs-section .specs-pure-table thead tr {
    background-color: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Table Header Typography */
.cleanroom-specs-section .specs-pure-table th {
    padding: 1rem 1.5rem; /* px-6 py-4 */
    font-size: 0.75rem; /* text-xs */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.5); /* Dim white text for header */
    border: none;
}
.cleanroom-specs-section .specs-pure-table thead{ border: none !important;}
/* Table Body Rows Base Border */
.cleanroom-specs-section .specs-pure-table tbody tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    transition: background-color 0.2s ease;
}

/* Hiding border on the very last row */
.cleanroom-specs-section .specs-pure-table tbody tr:last-child {
    border-bottom: none;
}

/* Table Cell Spacing */
.cleanroom-specs-section .specs-pure-table td {
    padding: 1.25rem 1.5rem; /* Soft padding matching image */
    vertical-align: middle; border: none;
}

/* Parameter Column (Bold & Bright White text as in image) */
.cleanroom-specs-section .specs-pure-table td.td-highlight {
    font-weight: 600;
    color: #ffffff;
}

/* Row Hover Glow Effect */
.cleanroom-specs-section .specs-pure-table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.03);
}

/* ===================================== */
/* --- Cleanroom Airflow Section Custom CSS (Pure Hex/RGBA) --- */

.cleanroom-airflow-section {
background-color: #002253;
    padding-top: 50px;
    padding-bottom: 50px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.cleanroom-airflow-section .grid-blueprint {
    background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 24px 24px;
    pointer-events: none;
    opacity: 0.5;}
/* Image Premium Shadow */
.cleanroom-airflow-section .img-shadow-custom {
    box-shadow: 0 20px 40px -15px rgba(15, 23, 42, 0.15);
}

/* Subheading Styling */
.cleanroom-airflow-section .section-subtitle {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--secondary); /* Steel Gray */
    letter-spacing: 0.22em;
}

/* Main Heading (Deep Navy Blue) */
.cleanroom-airflow-section .section-title {
    font-size: 2.5rem;
    color: #fff;
    letter-spacing: -0.01em; margin-top: 0;
}

/* Description text color */
.cleanroom-airflow-section .section-desc {
    color: #fff;
    font-size: 1rem;
    line-height: 1.6;
}
.cleanroom-airflow-section  ul li{ color: #fff; margin-bottom: 8px; position: relative;}
.cleanroom-airflow-section  ul li:before{ content: ''; display: inline-block; background-color: var(--secondary); height: 8px; width: 8px; margin-right: 8px; margin-top: -1px;}

/* Feature Box Styling (Glassmorphism Light version) */
.cleanroom-airflow-section .feature-box {
    background-color: rgba(241, 245, 249, 0.6); /* Soft mist background */
    border: 1px solid rgba(226, 232, 240, 1);     /* Border color */
    border-radius: 0.75rem;                       /* rounded-xl */
    padding: 1.25rem;
}

/* Numeric Metric Value */
.cleanroom-airflow-section .metric-value {
    font-size: 1.875rem; /* text-3xl */
    font-weight: 700;
    color: #0f172a;
    line-height: 1;
}

/* Metric Label Typography */
.cleanroom-airflow-section .metric-label {
    margin-top: 0.35rem;
    font-size: 0.75rem; /* text-xs */
    font-weight: 600;
    color: #64748b;
    letter-spacing: 0.1em;
}

/* Responsive Overrides for smaller devices */
@media (max-width: 768px) {
    .cleanroom-airflow-section .section-title {
        font-size: 2rem;
    }
}

/* ==================================== */
/* --- Cleanroom Validation Section Custom CSS (Pure Hex/RGBA) --- */

.cleanroom-validation-section {
    background-color: rgba(241, 245, 249, 0.5); /* bg-brand-mist/50 equivalent */
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Subheading Styling */
.cleanroom-validation-section .section-subtitle {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--secondary); /* Steel Gray */
    letter-spacing: 0.22em;
}

/* Main Heading (Deep Navy Blue) */
.cleanroom-validation-section .section-title {
    font-size: 2.5rem;
    color: #0f172a;
    letter-spacing: -0.01em;
}

/* Individual Stage Card Styling */
.cleanroom-validation-section .stage-card {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem; /* rounded-xl */
    padding: 1.5rem;
    height: 100%;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03); /* shadow-card */
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* hover-lift effect */
}

/* Hover-Lift Animation on Card */
.cleanroom-validation-section .stage-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -2px rgba(15, 23, 42, 0.04);
}

/* Stage Number Typography */
.cleanroom-validation-section .stage-number {
    font-size: 0.75rem; /* text-xs */
    font-weight: 600;
    color: #64748b;
    letter-spacing: 0.1em;
}

/* Stage Main Acronym Name (URS, DQ, IQ, etc.) */
.cleanroom-validation-section .stage-name {
    font-size: 1.875rem; /* text-3xl */
    font-weight: 700;
    color: #0f172a;
    margin-top: 0.5rem;
    line-height: 1;
}

/* Stage Small Description Text */
.cleanroom-validation-section .stage-desc {
    font-size: 0.75rem; /* text-xs */
    color: #64748b; /* text-muted-foreground */
    margin-top: 0.5rem;
    line-height: 1.4;
}

/* Responsive Font Adjustment */
@media (max-width: 768px) {
    .cleanroom-validation-section .section-title {
        font-size: 2rem;
    }
}

/* =================================== */
/* --- Cleanroom Advantages Section Custom CSS (Pure Hex/RGBA) --- */

.cleanroom-advantages-section {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Subheading Typography */
.cleanroom-advantages-section .section-subtitle {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--secondary); /* Steel Gray */
    letter-spacing: 0.22em;
}

/* Main Heading Typography */
.cleanroom-advantages-section .section-title {
    font-size: 2.5rem;
    color: #0f172a; /* Deep Navy Blue */
    letter-spacing: -0.01em;
}

/* SVG Icon Custom Sizing & Color */
.cleanroom-advantages-section .icon-style {
    width: 2rem;  /* h-8 equivalent */
    height: 2rem; /* w-8 equivalent */
    color: #64748b;
}

/* Individual Feature Card Design with Premium Gradient & Border */
.cleanroom-advantages-section .advantage-card {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); /* bg-gradient-hero */
    border: 1px solid #e2e8f0;
    border-radius: 1rem; /* rounded-2xl */
    padding: 1.75rem;    /* p-7 equivalent */
    height: 100%;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03); /* shadow-card */
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* hover-lift effect */
}

/* Card Hover Elevation Effect */
.cleanroom-advantages-section .advantage-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -2px rgba(15, 23, 42, 0.04);
}

/* Card Heading Text */
.cleanroom-advantages-section .card-heading {
    margin-top: 1rem;
    font-size: 1.125rem; /* text-lg */
    font-weight: 600;
    color: #0f172a;
}

/* Card Description Text */
.cleanroom-advantages-section .card-desc {
    margin-top: 0.5rem;
    font-size: 0.875rem; /* text-sm */
    color: #64748b;     /* text-muted-foreground */
    margin-bottom: 0;
    line-height: 1.5;
}

/* Mobile Responsive Typography Adjustments */
@media (max-width: 768px) {
    .cleanroom-advantages-section .section-title {
        font-size: 2rem;
    }
}

/* ======================================= */

/* --- Cleanroom CTA Section Custom CSS (Pure Hex/RGBA) --- */

.cleanroom-cta-section {
    background-color: #002253; /* Deep Brand Navy */

    padding-top: 5rem !important;    /* py-20 equivalent */
    padding-bottom: 5rem !important;
}

/* Background Blueprint Grid Effect */
.cleanroom-cta-section .grid-blueprint {
    background-image: 
        linear-gradient(rgba(100, 116, 139, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(100, 116, 139, 0.1) 1px, transparent 1px);
    background-size: 20px 20px;
    pointer-events: none;
    opacity: 0.2;
}

/* Main Heading Typography */
.cleanroom-cta-section .section-title {
    font-size: 2.25rem; /* text-3xl to text-4xl equivalent */
    letter-spacing: -0.01em;
}

/* Description Text with subtle transparency */
.cleanroom-cta-section .section-desc {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.8); /* text-primary-foreground/80 */
    max-width: 650px;
    line-height: 1.6;
}

/* Premium White CTA Button with scale transition */
.cleanroom-cta-section .btn-cta {
    background-color: #ffffff;
    color: #0f172a; /* Deep Brand Navy text */
    font-weight: 600;
    font-size: 0.875rem; /* text-sm */
    padding: 0.75rem 1.75rem; /* px-7 py-3 equivalent */
    display: inline-flex;
    align-items: center;
    transition: transform 0.2s ease, background-color 0.2s ease;
    border: none;
}

/* Button Hover State */
.cleanroom-cta-section .btn-cta:hover {
    transform: scale(1.02);
    background-color: #f8fafc; /* Slight off-white on hover */
    color: #0f172a;
}

/* Arrow Icon inside Button */
.cleanroom-cta-section .icon-arrow {
    width: 1rem;  /* h-4 equivalent */
    height: 1rem; /* w-4 equivalent */
}

/* Mobile Responsive Typography */
@media (max-width: 768px) {
    .cleanroom-cta-section .section-title {
        font-size: 1.875rem;
    }
}


/* ========================================= */
/* Section & Container Setup (Standard Bootstrap Equivalent) */
.hvac-section {
    width: 100%;
    padding: 48px 0;
    background-color: #f8fafc;
    font-family: system-ui, -apple-system, sans-serif;
}

.hvac-section .hvac-container {
    width: 100%;
    max-width: 1140px;
    margin-right: auto;
    margin-left: auto;
    padding-right: 15px;
    padding-left: 15px;
    box-sizing: border-box;
}

/* 2-Column Responsive Grid Layout */
.hvac-section .hvac-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    box-sizing: border-box;
}

/* Left Column Styling */
.hvac-section .hvac-diagram-card {
    flex: 1 1 35%;
    min-width: 320px;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #e2e8f0;
    border-radius: 24px;
    padding: 32px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.03);
    position: relative;
    overflow: hidden;
 
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.hvac-section .hvac-model-badge {
    position: absolute;
    top: 24px;
    right: 24px;
    font-size: 12px;
    font-family: monospace;
    color: #94a3b8;
    letter-spacing: 0.5px;
}

.hvac-section .hvac-diagram-svg {
    width: 100%;
    height: auto;
    max-height: 100%;
    display: block;
}

/* Right Column Layout */
.hvac-section .hvac-info-column {
    flex: 1 1 38%;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-sizing: border-box;
}

/* Blue Dashboard Card Styling */
.hvac-section .hvac-stats-card {
    background: linear-gradient(135deg, #0284c7 0%, #0d9488 100%);
    border-radius: 24px;
    padding: 32px;
    color: #ffffff;
    box-shadow: 0 10px 25px rgba(13, 148, 136, 0.25);
    box-sizing: border-box;
}

.hvac-section .hvac-tag {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    opacity: 0.8;
    font-weight: 600;
}

.hvac-section .hvac-temp {
    font-size: 48px;
    font-weight: 700;
    margin: 8px 0 4px 0;
    line-height: 1;
}

.hvac-section .hvac-desc {
    font-size: 14px;
    opacity: 0.85;
}

/* Card Bottom Metrics Row */
.hvac-section .hvac-stats-grid {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}

.hvac-section .hvac-stat-box {
    flex: 1;
    background-color: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 12px;
    padding: 12px;
    text-align: center;
}

.hvac-section .hvac-stat-value {
    font-size: 20px;
    font-weight: 700;
}

.hvac-section .hvac-stat-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.8;
    margin-top: 2px;
}

/* Feature List Rows */
.hvac-section .hvac-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background-color: #ffffff;
    border: 1px solid #f1f5f9;
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px -1px rgba(0, 0, 0, 0.01);
    box-sizing: border-box;
}

.hvac-section .hvac-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 2px;
}

.hvac-section .hvac-feature-text {
    margin: 0;
    font-size: 14px;
    color: #334155;
    line-height: 1.4;
}

/* Responsive Breakdown for Tablets/Mobile */
@media (max-width: 991px) {
    .hvac-section .hvac-diagram-card,
    .hvac-section .hvac-info-column {
        flex: 1 1 100%;
    }
    .hvac-section .hvac-diagram-card {
        min-height: auto;
    }
}


/* ============================================= */
.features-section{

padding: 40px 0;
  position:relative;
  overflow:hidden;
}



/* =========================
   SECTION HEADER
========================= */

.features-section .section-header{
  text-align:left;
  margin-bottom:30px;
  position:relative;
  z-index:2;
}

.features-section .section-header span{
  color:var(--secondary);
  font-size:12px;
  font-weight:600;
  letter-spacing:5px;
  text-transform:uppercase;
}

.features-section .section-header h2{
  font-size:36px;
  color:#0b1c3d;
  margin-top:15px;
  font-weight:700;
}

.features-section .section-header p{
  max-width:800px;

  color:#5b6475;
  font-size:22px;

}

.features-section .divider{
  width:120px;
  height:5px;
  background:#2563eb;
  border-radius:10px;
  margin:25px auto; display: none;
}

/* =========================
   FEATURES GRID
========================= */

.features-section .features-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:28px;
  position:relative;
  z-index:2;
}

/* =========================
   FEATURE CARD
========================= */

.features-section .feature-card{
  background:#fff;
  border-radius:16px;
  padding:16px;
  display:flex;
  align-items:flex-start;
  gap:24px;
  box-shadow:0 10px 15px rgba(0,0,0,0.05);
  transition:0.3s ease; border: 1px solid #00000010;
}
.features-section  svg{ color: var(--secondary);}

.features-section .feature-card:hover{
  transform:translateY(-8px);
  box-shadow:0 18px 45px rgba(0,0,0,0.08);
}

/* =========================
   ICON BOX
========================= */

.features-section .icon-box{
  min-width:45px;
  height:45px;
  border-radius:50%;
  background:#edf4ff;
  display:flex;
  align-items:center;
  justify-content:center;
}

.features-section .icon-box i{
  font-size:42px;
  color:#2563eb;
}

/* =========================
   FEATURE CONTENT
========================= */

.features-section .feature-content h3{
  font-size:15px;
  color:#111827;
  font-weight:500;
  line-height:1.5;
}

/* =========================
   TABLET RESPONSIVE
========================= */

@media(max-width:992px){

  .features-section .features-grid{
    grid-template-columns:1fr;
  }

  .features-section .section-header h2{
    font-size:42px;
  }

  .features-section .section-header p{
    font-size:18px;
  }

  .features-section .feature-content h3{
    font-size:24px;
  }
}

/* =========================
   MOBILE RESPONSIVE
========================= */

@media(max-width:600px){

  .features-section{
    padding:70px 20px;
  }

  .features-section .section-header h2{
    font-size:34px;
  }

  .features-section .feature-card{
    flex-direction:column;
  }

  .features-section .icon-box{
    width:80px;
    height:80px;
  }

  .features-section .icon-box i{
    font-size:34px;
  }

  .features-section .feature-content h3{
    font-size:20px;
  }
}
/* ====================================== */
  /* ===== SECTION ===== */

.ae-airflow-process-section{
    padding: 40px 0;
    overflow: hidden;
    position: relative;

}

.ae-airflow-container{
    max-width: 1200px;
    margin: auto;
}

/* ===== HEADING ===== */

.ae-airflow-heading{
    margin-bottom: 28px;
}

.ae-airflow-tag{
    color: var(--secondary);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 5px;
    text-transform: uppercase;
}

.ae-airflow-heading h2{
    font-size: 36px;
    color: #0b1c3d;
    margin-top: 8px;
    font-weight: 700;
}

.ae-airflow-heading h2 span{
    color: #0b74ff;
}

.ae-airflow-heading p{
    max-width: 700px;
    font-size: 20px;
    line-height: 1.7;
    color: #5f6c7b;
}

/* ===== STEP CARD ===== */

.ae-airflow-step-card{
    display: flex;
    align-items: flex-start;
    gap: 30px;
    background: rgba(255,255,255,0.75);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.7);
    border-radius: 28px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.06);
    transition: 0.35s ease;
    position: relative;
}

.ae-airflow-step-card:hover{
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.10);
}

/* ===== STEP NUMBER ===== */

.ae-airflow-step-number{
    min-width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg,#0b74ff,#0057d9);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    box-shadow: 0 10px 25px rgba(11,116,255,0.25);
}

.ae-airflow-green{
    background: linear-gradient(135deg,#84c441,#5ea71f);
    box-shadow: 0 10px 25px rgba(94,167,31,0.25);
}

/* ===== CONTENT ===== */

.ae-airflow-step-content{
    flex: 1;
}

.ae-airflow-step-label{
    display: inline-block;
    padding: 0 24px;
    background: linear-gradient(135deg,#0b74ff,#0057d9);
    color: #ffffff;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 0;
}

.ae-airflow-green-bg{
    background: linear-gradient(135deg,#84c441,#5ea71f);
}

.ae-airflow-step-content p{
    font-size: 16px; margin-top: 8px !important;
    line-height: 1.9;
    color: #445164;
    margin: 0;
    max-width: 850px;
}


/* Unique parent class scope */
  .hvac-services-section {
    --brand-orange: #ff6b00; /* Agar aapka color alag hai to yahan change kar sakte hain */
    --brand-navy-deep: #0a192f;
    --gradient-hero: linear-gradient(135deg, #ff6b00 0%, #ff8c42 100%);
    --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.05);
    background-color: #ffffff;
  }

  .hvac-services-section .section-title-sub {
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--brand-orange);
  }

  .hvac-services-section .section-title-main {
    font-weight: 700;
    color: var(--brand-navy-deep);
    margin-top: 0.5rem;
  }

  .hvac-services-section .section-desc {
    color: #6c757d;
    max-width: 448px;
  }

  /* Grid Card Styles */
  .hvac-services-section .service-card {
    padding: 1.5rem;
    border-radius: 0.75rem;
    border: 1px solid #dee2e6;
    background-color: #ffffff;
    box-shadow: var(--shadow-soft);
    transition: all 0.3s ease;
    height: 100%;
    text-decoration: none;
    display: block;
  }

  /* Hover Effects */
  .hvac-services-section .service-card:hover {
    border-color: var(--brand-orange);
    transform: translateY(-4px);
  }

  /* Icon Wrapper */
  .hvac-services-section .icon-wrapper {
    width: 3rem;
    height: 3rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    background: var(--gradient-hero);
  }

  .hvac-services-section .icon-wrapper svg {
    width: 1.5rem;
    height: 1.5rem;
    color: #ffffff;
  }

  .hvac-services-section .card-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--brand-navy-deep);
    margin-bottom: 0;
  }

/* ===== RESPONSIVE ===== */

@media(max-width: 991px){

    .ae-airflow-heading h2{
        font-size: 48px;
    }

    .ae-airflow-step-content p{
        font-size: 18px;
    }
}

@media(max-width: 767px){

    .ae-airflow-process-section{
        padding: 70px 16px;
    }

    .ae-airflow-heading h2{
        font-size: 38px;
    }

    .ae-airflow-heading p{
        font-size: 17px;
    }

    .ae-airflow-step-card{
        flex-direction: column;
        padding: 28px;
        gap: 22px;
    }

    .ae-airflow-step-number{
        width: 70px;
        height: 70px;
        font-size: 24px;
    }

    .ae-airflow-step-content p{
        font-size: 16px;
        line-height: 1.8;
    }

    .ae-airflow-step-label{
        font-size: 16px;
    }
}

/* ============================================== */
/* --- Base Styling & Backgrounds --- */
.automotive-hvac-section {
  background: linear-gradient(to bottom, #030712, #0b1528);
  font-family: system-ui, -apple-system, sans-serif;
}

.automotive-hvac-section .max-w-7xl { max-width: 1280px; margin: 0 auto; }
.automotive-hvac-section .max-w-3xl { max-width: 768px; }
.automotive-hvac-section .text-xs { font-size: 0.75rem; }
.automotive-hvac-section .font-weight-semibold { font-weight: 600; }
.automotive-hvac-section h3.font-weight-semibold{ margin-bottom: 0 !important;}
.automotive-hvac-section .font-weight-bold { font-weight: 700; }
.automotive-hvac-section .border-white-10 { border-color: rgba(255, 255, 255, 0.1) !important; border: none !important;}
.automotive-hvac-section .text-primary-glow { color: #38bdf8; }
.automotive-hvac-section .inset-0 { top: 0; right: 0; bottom: 0; left: 0; }

/* Grid Background Effect */
.automotive-hvac-section .bg-grid-faint {
  background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* Glowing Orb Background Effect */
.automotive-hvac-section .glow-orb {
  top: -10rem;
  left: -10rem;
  height: 500px;
  width: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.3) 0%, transparent 70%);
  filter: blur(64px);
}

/* --- Header Section Styling --- */
.automotive-hvac-section .badge-tag {
  font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .2em; 
    color: var(--secondary); padding: 0 !important;
}
.automotive-hvac-section h2{ font-size: 32px; color: #fff; margin: 0;}
.automotive-hvac-section .btn-slider {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.7);
  width: 40px;
  height: 40px;
  transition: all 0.2s ease;
}
.automotive-hvac-section .btn-slider:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

/* --- Horizontal Slider Configuration --- */
.automotive-hvac-section .cards-scroll-container::-webkit-scrollbar {
  height: 6px;
}
.automotive-hvac-section .cards-scroll-container::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}
.automotive-hvac-section .floating-wrapper {
  min-width: max-content;
}

/* --- HVAC Component Cards Styling --- */
.automotive-hvac-section .hvac-card-border {
  width: 100%;
  flex-shrink: 0;
  padding: 1px;
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.4), rgba(4, 10, 23, 0.2) 60%, rgba(56, 189, 248, 0.2));
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (max-width: 480px) {
  .automotive-hvac-section .hvac-card-border { width: 310px; }
}
.automotive-hvac-section .hvac-card-border:hover {
  transform: translateY(-4px);
}
.automotive-hvac-section .hvac-card-inner {
  background: #1e3568;
}
.automotive-hvac-section .card-img-height {
  height: 13rem;
}
.automotive-hvac-section .card-img-height figure{ height: 100%;}
.automotive-hvac-section .card-img-height img{ height: 100%; object-fit: cover; object-position: center;}
.automotive-hvac-section .card-img-zoom {
  transition: transform 0.7s ease;
}
.automotive-hvac-section .hvac-card-border:hover .card-img-zoom {
  transform: scale(1.05);
}
.automotive-hvac-section .img-overlay {
  background: linear-gradient(to top, #040a17, rgba(4, 10, 23, 0.4) 40%, transparent);
}
.automotive-hvac-section .card-badge-number {
  left: 1.25rem;
  top: 1.25rem;
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
  font-size: 10px;
  color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
}

/* Card Body Equalization Class */
.automotive-hvac-section .card-fixed-body-height {
  min-height: 196px; /* Yeh sabhi cards ke inner content height ko barabar rakhega */
}

/* Icons & Labels Inside Card */
.automotive-hvac-section .icon-wrapper {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  width: 2rem;
  height: 2rem;
  box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.3);
}

.automotive-hvac-section .d-flex:has(.icon-wrapper) .wp-block-group:last-child{ width: calc(100% - 2rem);}
.automotive-hvac-section .d-flex:has(.icon-wrapper) .wp-block-group:last-child p{ margin-bottom: 0;}

.automotive-hvac-section .stat-label {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.5);
}

/* --- Footer Action CTA Banner --- */
.automotive-hvac-section .cta-banner {
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
}
.automotive-hvac-section .backdrop-blur {
  backdrop-filter: blur(8px);
}
.automotive-hvac-section .btn-cta {
  background: #ffffff;
  color: #040a17;
  transition: all 0.3s ease;
  border: none;
}
.automotive-hvac-section .btn-cta:hover {
  background: #38bdf8;
  color: #ffffff;
}
.automotive-hvac-section .btn-arrow-transition {
  transition: transform 0.2s ease;
}
.automotive-hvac-section .btn-cta:hover .btn-arrow-transition {
  transform: translateX(3px);
}



/* responsive */
@media(min-width:600px) { 
  .services-grid {
    grid-template-columns: 1fr 1fr
  } 
}
@media(min-width:640px) {
  .testi-arrow.prev {
    left: -40px
  } 
  .testi-arrow.next {
    right: -40px
  }
    .hero-title {
    font-size: 46px
  }
}
@media(min-width:768px) {
  .page-hero h1 {
    font-size: 46px
  }
    .footer .grid {
    grid-template-columns: 1fr 1fr
  }
    .step-icon-wrap {
    transform: scale(.65)
  }
  .step-link {
    display: block
  }
    .step-title {
    font-size: 12px
  }
  .step-circle {
    width: 64px;
    height: 64px
  }
  .step-card {
    width: 110px
  }
  .evap h2 {
    font-size: 36px
  }
    .about-banner .certs img {
    height: 64px
  }
    .hero-side {
    display: block
  }
  .hero-sub {
    font-size: 16px
  }
  .hero-title {
    font-size: 38px
  }
    .hero-content .max {
    max-width: 55%
  }
    .section-title {
    font-size: 34px
  }
  .section {
    padding: 80px 32px
  }
  .container {
    padding: 0 32px
  }
}
@media(min-width:1024px) {

  .footer .grid {
    grid-template-columns: repeat(4, 1fr);
    padding: 60px 32px
  }
   .presence-grid {
    grid-template-columns: 1fr 1fr
  }
    .step-link {
    width: 22px
  }
    .evap-grid {
    grid-template-columns: 1fr 1fr
  }
  .about-banner .certs {
    flex-direction: column
  }
  .about-banner p {
    margin: 0
  }
  .about-banner .row {
    flex-direction: row;
    text-align: left;
    gap: 40px
  }
    .services-grid {
    grid-template-columns: repeat(4, 1fr)
  }
  .intro-grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start
  }
    .menu-toggle {
    display: none
  }
  .header .quote-btn {
    display: inline-flex
  }
  .nav {
    display: flex
  }
}

/* ===== ADDITIONAL RESPONSIVE FIXES ===== */
body{ overflow-x: hidden;}
.nav-close-icon{ display: none;}
@media(max-width:1024px){
  header .nav{ display: block; position: fixed; right: -240px; top: 0; background-color: #fff; width: 240px; height: 100%; transition: .5s; overflow-y: scroll;}
    header .nav.open-menu{ right: 0;}
    .nav-close-icon{ display: block; }
    .nav-close-icon a{ background-color: #f59c2a; padding: 10px; display: inline-flex; align-items: center; justify-content: center; height: 35px; width: 35px;}
    .nav-close-icon a i{display: flex;
    font-size: 20px;
    color: #fff;}
    .nav-item .dropdown{ position: static; width: 100%; min-width: 100%; opacity: 1;     visibility: visible;
    transform: translateY(0);         box-shadow: none;
        border: none; display: none; padding: 0; }
    /* .nav-close-icon{ display: inline-block;} */
}

@media(max-width:767px){
  .step-link{ display: none !important;}
  #process .step{ width: 25%;}
  .step-card{ margin: auto;}
}
/* 2. Tablets & Small Laptops (Max-width: 992px) */
@media (max-width: 992px) {
    /* Header/Nav Fix */
  

    /* Products & Services Grid Fix */
    #our-products-sec ul li,
    #services ul li {
        width: 50% !important; /* Tablet par 2 columns */
    }

    .other-projects-sec ul li {
        width: 33.33% !important; /* Projects 3 columns mein */
    }

    /* Intro Grid */
    .intro-grid {
        grid-template-columns: 1fr; /* Image upar, text niche */
        gap: 30px;
    }

    /* Presence/Map Fix */
    .presence-grid {
        grid-template-columns: 1fr;
    }

    /* About Banner Fix */
    .about-banner .row {
        flex-direction: column;
        text-align: center;
    }
}

/* 1. Mobile Devices (Max-width: 576px) */
@media (max-width: 576px) {
  .office .num{ display: none;}
  .topbar{ display: none ;}
  .footer .logo-img{ margin: auto;}
    /* Hero Section Adjustments */
    .hero-title {
        font-size: 22px !important;
        line-height: 1.2;
    }
    #overview-sec p{ text-align: justify;}
    .slide img{ object-fit: cover; height: 100%;}
    .slide figure{ height: 100%;}
    .hero-btns .btn.btn-outline{ display: none;}
    
    .hero-btns {
        flex-direction: column;
        width: 100%;
    }
    
    .hero-btns .btn {
        width: 100%;
        justify-content: center;
    }

    /* Grid Resets for Mobile */
    #our-products-sec ul li,
    #services ul li,
    .other-projects-sec ul li {
        width: 100% !important; /* Mobile pe ek column */
        padding: 0 10px;
    }

    .section {
        padding: 50px 15px !important; /* Spacing kam mobile ke liye */
    }

    /* Process Steps Mobile Fix */
    .process {
        justify-content: center;
        gap: 0; row-gap: 20px;
    } 
    
    .step-link {
        display: none !important; /* Mobile par arrows/lines hata dein */
    }

    .step-card {
        width: 90px; /* Ek line mein 2 steps */
    }

    /* Footer adjustments */
    .footer .grid {
        text-align: center;
    }
    
    .footer .contact-list a, 
    .footer .contact-list p {
        justify-content: center;
    }
    #process .step{ padding: 0 12px; width: 33.333%;}
#process{ margin: 0 -15px;}
    .socials {
        justify-content: center;
    }

}

/* 3. Landscape Phones (Max-height: 500px) */
@media (max-height: 500px) and (orientation: landscape) {

    .hero {
        height: 100vh; /* Landscape mobile mein screen cover kare */
    }
}

/* 4. Table/Container Global Fix */
.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    /* overflow: hidden;  */
}



/* ============================================================
   ADDITIONAL RESPONSIVE CSS (FOR ABOUT BANNER & OVERALL SITE)
   ============================================================ */

/* Mobile Devices (Extra Small to Small - 0px to 767px) */
@media screen and (max-width: 767px) {
    /* About Banner Main Container */
    .about-banner .container > div {
        flex-direction: column !important; /* Stack elements vertically */
        text-align: center;
        gap: 2rem !important;
        padding-left: 15px;
        padding-right: 15px;
    }

    /* Video/Image Adjustment */
    .about-banner .video {
        width: 100% !important;
        max-width: 100%;
        order: 2; /* Text ke baad image aaye */
    }

    .about-banner .video img {
        width: 100%;
        height: auto;
        border-radius: 10px;
    }

    /* Content Adjustment */
    .about-banner .content {
        width: 100% !important;
        order: 1; /* Text pehle dikhe */
    }

    .about-banner .content h2 {
        font-size: 28px !important;
        margin-bottom: 15px;
    }

    /* Certificates (ISO/IGBC) Adjustment */
    .about-banner .certs {
        width: 100% !important;
        order: 3;
        display: flex !important;
        flex-direction: row !important; /* Side by side on mobile */
        justify-content: center !important;
        gap: 20px !important;
        margin-top: 10px;
    }

    .about-banner .certs figure {
        width: 80px !important; /* Smaller certs for mobile */
        margin: 0 !important;
    }

    /* Global padding for sections on mobile */
    .section, section {
        padding: 40px 20px !important;
    }
}

/* Tablets (Medium Screens - 768px to 1023px) */
@media screen and (min-width: 768px) and (max-width: 1023px) {
    .about-banner .container > div {
        flex-wrap: wrap !important;
        justify-content: center !important;
    }

    .about-banner .video {
        width: 45% !important;
    }

    .about-banner .content {
        width: 50% !important;
    }

    .about-banner .certs {
        width: 100% !important;
        flex-direction: row !important;
        margin-top: 30px;     position: absolute;
    right: 0;
    display: inline-flex;
    justify-content: flex-end !important; 
    top: 0;
    }
}


/*  */
/* Unique parent class scope */
  .hvac-equipment-section {
    --brand-navy-deep: #0a192f; /* Dark background color */
    --brand-orange-soft: #ff8c42; /* Soft orange accents */
    background-color: var(--brand-navy-deep);
    color: #ffffff;
  }

  .hvac-equipment-section .section-title-sub {
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--brand-orange-soft);
  }

  .hvac-equipment-section .section-title-main {
    font-weight: 700;
    color: #ffffff;
    margin-top: 0.5rem;
  }

  /* Grid Card Custom Styles */
  .hvac-equipment-section .equipment-card {
    padding: 1.25rem;
    border-radius: 0.5rem;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: background-color 0.2s ease, border-color 0.2s ease;
    height: 100%;
  }

  /* Hover State */
  .hvac-equipment-section .equipment-card:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
  }

  /* SVG Icon Color & Sizing */
  .hvac-equipment-section .equipment-card svg {
    width: 1.75rem;
    height: 1.75rem;
    margin-bottom: 0.75rem;
    color: var(--brand-orange-soft);
    display: block;
  }

  /* Card Text */
  .hvac-equipment-section .equipment-name {
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0;
    color: #ffffff;
  }

/*  */

/* Unique parent class scope */
  .hvac-sectors-section {
    --brand-orange: #ff6b00;
    --brand-navy-deep: #0a192f;
    --gradient-accent: linear-gradient(135deg, #e0e0e0 0%, #f5f5f5 100%); /* Tailwind bg-secondary / accent mix */
    background-color: #ffffff;
  }

  .hvac-sectors-section .section-title-sub {
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--brand-orange);
  }

  .hvac-sectors-section .section-title-main {
    font-weight: 700;
    color: var(--brand-navy-deep);
    margin-top: 0.5rem;
  }

  /* Flex Sector Item Custom Box */
  .hvac-sectors-section .sector-box {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    border-radius: 0.75rem;
    background-color: #f8f9fa; /* Bootstrap secondary variable background alternative */
    border: 1px solid #dee2e6;
    height: 100%;
  }

  /* Custom Rounded Icon Space */
  .hvac-sectors-section .icon-box {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--secondary);
  }

  .hvac-sectors-section .icon-box svg {
    width: 1.25rem;
    height: 1.25rem;
    color: #fff;
  }

  /* Text Label */
  .hvac-sectors-section .sector-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--brand-navy-deep);
    margin-bottom: 0;
  }

/*  */
/* Unique parent class scope */
  .hvac-process-timeline-section {
    background-color: #eef3fb !important;
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  }

  /* Header Styles */
  .hvac-process-timeline-section .variant-badge {
    background-color: #ff6b1a !important;
    color: #ffffff !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.15em !important;
    padding: 0.25rem 0.75rem !important;
    border-radius: 50rem !important;
  }

  .hvac-process-timeline-section .variant-text {
    font-size: 0.875rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.15em !important;
    color: #64748b !important;
  }

  .hvac-process-timeline-section .focus-tag {
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.2em !important;
    color: #ff6b1a !important;
    margin-bottom: 0.75rem !important;
  }

  .hvac-process-timeline-section .main-heading {
    font-weight: 800 !important;
    line-height: 1.2 !important;
    color: #0b1c3a !important;
  }

  .hvac-process-timeline-section .description-text {
    font-size: 1rem !important;
    line-height: 1.6 !important;
    color: #475569 !important;
    margin-top: 1.5rem !important;
  }

  .hvac-process-timeline-section .explore-link {
    margin-top: 2rem !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: #ff6b1a !important;
    text-decoration: none !important;
  }

  /* Right Side Timeline Container Fixed */
  .hvac-process-timeline-section .timeline-wrapper {
    position: relative !important;
    padding-left: 1.5rem !important;
    margin: 0 !important;
  }

  /* Left Vertical Dashed Line */
  .hvac-process-timeline-section .timeline-wrapper::before {
    content: "" !important;
    position: absolute !important;
    left: 35px !important; /* Perfect line alignment center with the numbers */
    top: 20px !important;
    bottom: 20px !important;
    width: 2px !important;
    border-left: 2px dashed rgba(255, 107, 26, 0.3) !important;
    z-index: 1 !important;
  }

  /* Timeline Row Single Item Block */
  .hvac-process-timeline-section .timeline-row-item {
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    margin-bottom: 1rem !important;
    z-index: 2 !important;
  }

  .hvac-process-timeline-section .timeline-row-item:last-child {
    margin-bottom: 0 !important;
  }

  /* Circle Number - Fixed alignment using pure flex margins */
  .hvac-process-timeline-section .timeline-num-badge {
    width: 26px !important;
    height: 26px !important;
    background-color: #0b1c3a !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    margin-right: 1.5rem !important; /* Box space separating card and number */
    box-shadow: 0 0 0 4px #eef3fb !important; /* Ring mockup matching bg */
  }

.hvac-process-timeline-section .timeline-num-badge p{ margin:0;}

  /* White Card Box Content */
  .hvac-process-timeline-section .timeline-card-content {
    background-color: #ffffff !important;
    padding: 1rem 1.25rem !important;
    border-radius: 0.75rem !important;
    box-shadow: 0 4px 18px -8px rgba(11, 28, 58, 0.18) !important;
    flex-grow: 1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  }

  /* Hover Effects on Full Width Card */
  .hvac-process-timeline-section .timeline-row-item:hover .timeline-card-content {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 28px -10px rgba(255, 107, 26, 0.4) !important;
  }

  /* Inner elements */
  .hvac-process-timeline-section .timeline-card-content svg {
    width: 1.25rem !important;
    height: 1.25rem !important;
    color: #ff6b1a !important;
    flex-shrink: 0 !important;
  }

  .hvac-process-timeline-section .timeline-card-content .item-text {
    font-weight: 600 !important;
    color: #0b1c3a !important;
    font-size: 0.95rem !important;
    margin: 0 !important;
  }

/*  */
.hvac-analysis-section {
    background-color: #ffffff !important;
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  }

  /* Left Paragraph (Main Text Color) */
  .hvac-analysis-section .text-main {
    font-size: 1rem !important;
    line-height: 1.6 !important;
    color: #0b1c3a !important; /* Deep Navy Dark Text */
    margin-bottom: 0 !important;
  }

  /* Right Paragraph (Muted/Subtle Text Color) */
  .hvac-analysis-section .text-subtle {
    font-size: 1rem !important;
    line-height: 1.6 !important;
    color: #64748b !important; /* Muted Slate Text */
    margin-bottom: 0 !important;
  }

  /* Responsive font adjustments for tablet and desktop */
  @media (min-width: 768px) {
    .hvac-analysis-section .text-main,
    .hvac-analysis-section .text-subtle {
      font-size: 1.125rem !important; /* Equivalent to md:text-lg */
    }
  }

/*  */
/* Unique parent class scope */
  .hvac-evaluation-grid-section {
    background-color: #f1f5f9 !important; /* Muted light tint background */
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  }

  /* Header Section Typography */
  .hvac-evaluation-grid-section .eval-tag {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.2em !important;
    color: #ff6b1a !important; /* Brand Accent Orange */
    margin-bottom: 0.5rem !important;
  }

  .hvac-evaluation-grid-section .eval-heading {
    font-weight: 700 !important;
    color: #0b1c3a !important; /* Primary Deep Navy */
  }

  /* Evaluation Cards Base Structuring */
  .hvac-evaluation-grid-section .eval-card {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.75rem !important;
    padding: 1.5rem !important;
    height: 100% !important; /* Forces all grid cards to match height equally */
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important;
  }

  /* Interaction/Hover state */
  .hvac-evaluation-grid-section .eval-card:hover {
    border-color: #ff6b1a !important;
    box-shadow: 0 10px 20px -10px rgba(11, 28, 58, 0.15) !important;
    transform: translateY(-2px) !important;
  }

  /* Round Square Number Block */
  .hvac-evaluation-grid-section .num-index {
    width: 2.25rem !important;
    height: 2.25rem !important;
    background-color: #0b1c3a !important;
    color: #ffffff !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    border-radius: 0.5rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }

  /* Card inner title */
  .hvac-evaluation-grid-section .card-title {
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #0b1c3a !important;
    margin: 0 !important;
    padding-top: 0.25rem !important;
  }

/*  */
/* Unique parent class scope */
  .hvac-recommendations-section {
    background-color: #0b1c3a !important; /* Main Dark Navy Background */
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  }

  /* Header Styles */
  .hvac-recommendations-section .rec-tag {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.2em !important;
    color: #ff6b1a !important; /* Brand Accent Orange */
    margin-bottom: 0.5rem !important;
  }

  .hvac-recommendations-section .rec-heading {
    font-weight: 700 !important;
    color: #ffffff !important;
    line-height: 1.3 !important;
  }

  /* Thin Grid Outer Wrapper Box */
  .hvac-recommendations-section .grid-table-container {
    background-color: rgba(255, 255, 255, 0.1) !important; /* 1px borderline layout effect */
    border-radius: 0.75rem !important;
    overflow: hidden !important;
    display: flex !important;
    flex-wrap: wrap !important;
    padding: 0 !important;
    gap: 1px !important; /* Native gap-px alternative */
  }

  /* Single Grid Cell Block */
  .hvac-recommendations-section .grid-cell-item {
    background-color: #0b1c3a !important; /* Matches main bg */
    padding: 1.5rem !important;
    width: 100% !important; /* Mobile view defaults to full-width */
    display: flex !important;
    align-items: center !important;
    transition: background-color 0.2s ease !important;
  }

  /* Hover Overlay Effect */
  .hvac-recommendations-section .grid-cell-item:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
  }

  /* Orange Dot Bullet Indicator */
  .hvac-recommendations-section .bullet-dot {
    width: 0.5rem !important;
    height: 0.5rem !important;
    background-color: #ff6b1a !important; /* Solid Orange Dot */
    border-radius: 50% !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
  }

  /* Text Title Inside Grid */
  .hvac-recommendations-section .cell-title {
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    margin: 0 !important;
  }

  /* Responsive Width Calculations for 2 Columns Layout */
  @media (min-width: 576px) {
    .hvac-recommendations-section .grid-cell-item {
      /* Subtracting 0.5px to leave perfect room for the 1px center gap gridline */
      width: calc(50% - 0.5px) !important; 
    }
  }

/*  */
/* Unique parent class scope */
  .hvac-quote-section {
    background-color: #ffffff !important;
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  }

  /* Main Quote Text Wrapper */
  .hvac-quote-section .quote-text {
    font-size: 1.25rem !important; /* Mobile view base size */
    line-height: 1.6 !important;
    color: #0b1c3a !important; /* Primary Deep Navy */
    margin: 0 auto !important;
    max-width: 56rem !important; /* Equivalent to max-w-4xl */
    text-align: left !important;
  }

  /* Large Decorative Orange Quotes */
  .hvac-quote-section .quote-mark {
    color: #ff6b1a !important; /* Brand Accent Orange */
    font-weight: 700 !important;
  }

  /* Responsive styling for tablet and desktop */
  @media (min-width: 768px) {
    .hvac-quote-section .quote-text {
      font-size: 1.5rem !important; /* Equivalent to md:text-2xl */
    }
  }

  /*  */
  .pfg-grid{ display: flex !important; flex-wrap: wrap !important; gap: 0 !important; row-gap: 30px !important;}
  .pfg-grid .pfg-item{ position: static !important; width: 33.333% !important; padding: 0 15px;}
    .pfg-grid .pfg-item .pfg-item-link,     .pfg-grid .pfg-item .pfg-item-link img{ height: 100% !important;}
  /* .pfg-grid--masonry .pfg-item.pfg-item--positioned{ height: 160px !important; overflow: hidden !important;}
  .pfg-item-link{ height: 100% !important;}
  .pfg-item-link img{ width: 100%;
  height: 100% !important;

  display: block;} */

  /* ================================== */
  
/* ===== Buttons ===== */
.ae-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px; font-size: 14px; font-weight: 600;
  border-radius: 6px; border: 1px solid transparent;
  transition: all 160ms ease; cursor: pointer;
  text-decoration: none;
}
.ae-btn-primary { background: #1e5fbf; color: #ffffff; }
.ae-btn-primary:hover { background: #1a52a6; color: #ffffff; }
.ae-btn-outline {
  background: #ffffff; color: #0f172a; border-color: #e2e8f0;
}
.ae-btn-outline:hover { border-color: #1e5fbf; color: #1e5fbf; }

/* ===== Hero / Page header ===== */
.ae-page-hero {
  background: #f1f5f9;
  border-bottom: 1px solid #e2e8f0;
  padding: 64px 0;
}
.detail-pg-ae-page-hero{ padding-bottom: 120px;}
.ae-back-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: #475569; font-size: 14px; font-weight: 500;
}
.ae-back-link:hover { color: #0f172a; }

.ae-page-title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700; margin: 1.25rem 0 0.75rem;
  line-height: 1.1;
}
.ae-page-lede { font-size: 1.125rem; color: #475569; max-width: 640px; }

/* ===== Tag chip ===== */
.ae-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(30,95,191,0.08); color: #1e5fbf;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
}

/* ===== Card ===== */
.home-blog-sec{ padding: 40px 0px;}
.blog-grid-mn-card ul li{ width: 50%; padding: 0 15px;}
.home-blog-sec .blog-grid-mn-card ul li{ width: 33.333%;}
.blog-grid-mn-card ul { display: flex; row-gap: 30px; margin: 0 -15px; flex-wrap: wrap;}
.blog-grid-mn-card .wp-block-post-date{ display: inline-block !important;}
.blog-ftl-feature-dv figure{aspect-ratio:3/1 !important;}
.blog-ftl-feature-dv{ margin-top: -90px; position: relative; z-index: 9;}
.ae-card {
  background: #ffffff; border: 1px solid #e2e8f0;
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04);
  transition: transform 200ms ease, box-shadow 200ms ease;
  height: 100%; 
}
.ae-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(15,23,42,0.08); }
.ae-card-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.ae-card-img-wide { aspect-ratio: 16 / 9; }
.ae-card-body { padding: 20px; }
.ae-card-meta {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: #64748b;
}
.ae-card-title {
  font-size: 1rem; font-weight: 600; line-height: 1.35;
  margin: 8px 0 6px; color: #0f172a;
}
.ae-card:hover .ae-card-title { color: #1e5fbf; }
.ae-card-excerpt { font-size: 14px; color: #475569; margin: 0; }

/* ===== Featured ===== */
.ae-featured {
  display: grid; grid-template-columns: 1fr; gap: 0;
  background: #ffffff; border: 1px solid #e2e8f0;
  border-radius: 24px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
@media (min-width: 768px) {
  .ae-featured { grid-template-columns: 1fr 1fr; }
}
.ae-featured-img { width: 100%; height: 100%; min-height: 280px; object-fit: cover; }
.ae-featured-body {
  padding: 40px; display: flex; flex-direction: column;
  justify-content: center; gap: 16px;
}
@media (min-width: 992px) { .ae-featured-body { padding: 56px; } }
.ae-featured-title { font-size: clamp(1.5rem, 2.5vw, 2rem); line-height: 1.2; }

/* ===== Sidebar widget ===== */
.ae-widget {
  background: #ffffff; border: 1px solid #e2e8f0;
  border-radius: 16px; padding: 20px;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
.ae-widget + .ae-widget { margin-top: 20px; }
.ae-widget-title { font-size: 14px; font-weight: 600; margin: 0 0 12px; }
.ae-widget-eyebrow {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: #64748b;
}
.ae-cat-list { list-style: none; padding: 0; margin: 12px 0 0; }
.ae-cat-list a {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 10px; border-radius: 6px;
  font-size: 14px; color: #475569;
}
.ae-cat-list a:hover { background: #f1f5f9; color: #0f172a; }

.ae-search {
  position: relative;
}
.ae-search input {
  width: 100%; padding: 10px 12px 10px 36px;
  border: 1px solid #e2e8f0; border-radius: 6px;
  font-size: 14px; background: #ffffff;
}
.ae-search input:focus {
  outline: none; border-color: #1e5fbf;
  box-shadow: 0 0 0 3px rgba(30,95,191,0.15);
}
.ae-search svg {
  position: absolute; top: 50%; left: 12px;
  transform: translateY(-50%); color: #94a3b8;
}

.ae-popular { list-style: none; padding: 0; margin: 12px 0 0; }
.ae-popular li { display: flex; gap: 12px; padding: 8px 0; }
.ae-popular .ae-pop-num {
  font-size: 1.25rem; font-weight: 700; color: rgba(30,95,191,0.45);
}
.ae-popular a { font-size: 14px; font-weight: 500; color: #0f172a; line-height: 1.35; }
.ae-popular a:hover { color: #1e5fbf; }

.ae-cta-widget {
  background: rgba(30,95,191,0.05);
  border: 1px solid rgba(30,95,191,0.2);
  border-radius: 16px; padding: 20px; margin-top: 20px;
}
.ae-cta-widget .ae-icon { color: #1e5fbf; }

/* ===== Article body ===== */
.ae-article { max-width: 100%; }
.ae-article p { color: #475569; line-height: 1.75; margin: 1rem 0; }
.ae-article .ae-lead { font-size: 1.125rem; color: #0f172a; }
.ae-article h2 {
  font-size: 1.5rem; margin: 3rem 0 1rem; font-weight: 700;
}
.ae-article table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ae-table-wrap {
  border: 1px solid #e2e8f0; border-radius: 16px;
  overflow: hidden; margin: 2rem 0;
}
.ae-article thead {
  background: #f1f5f9; text-transform: uppercase;
  letter-spacing: 0.06em; font-size: 11px; color: #64748b;
}
.ae-article th, .ae-article td {
  padding: 12px 16px; text-align: left;
}
.ae-article tbody tr + tr { border-top: 1px solid #e2e8f0; }

.ae-stat-grid { display: grid; gap: 16px; grid-template-columns: 1fr; margin: 2rem 0; }
@media (min-width: 576px) { .ae-stat-grid { grid-template-columns: repeat(3, 1fr); } }
.ae-stat {
  background: #f1f5f9; border: 1px solid #e2e8f0;
  border-radius: 16px; padding: 18px;
}
.ae-stat-value { font-size: 1.5rem; font-weight: 700; color: #1e5fbf; }
.ae-stat-label {
  margin-top: 4px; font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.08em; color: #64748b;
}

.ae-quote {
  margin: 2.5rem 0; padding: 24px;
  background: #f1f5f9; border-left: 4px solid #1e5fbf;
  border-radius: 16px;
}
.ae-quote p { font-size: 1.125rem; font-weight: 500; color: #0f172a; margin: 12px 0; }
.ae-quote footer { font-size: 13px; color: #64748b; }

.ae-inline-cta {
  margin: 3rem 0; padding: 24px 28px;
  background: rgba(30,95,191,0.05);
  border: 1px solid rgba(30,95,191,0.2);
  border-radius: 16px;
  display: flex; flex-wrap: wrap; gap: 16px;
  align-items: center; justify-content: space-between;
}

/* ===== Crumb ===== */
.ae-crumb {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: #64748b;
}
.ae-crumb a:hover { color: #0f172a; }

.ae-meta-row {
  display: flex; flex-wrap: wrap; gap: 8px 24px;
  margin-top: 24px; font-size: 14px; color: #64748b;
}
.ae-meta-row span { display: inline-flex; align-items: center; gap: 6px; }

.ae-hero-img {
  width: 100%; max-width: 1280px; aspect-ratio: 16 / 6;
  object-fit: cover; display: block; margin: 32px auto 0;
  border-radius: 24px;
}
@media (max-width: 575px) { .ae-hero-img { border-radius: 0; } }

/* ===== Author / form / newsletter / footer ===== */
.ae-author {
  margin-top: 4rem;
  display: flex; flex-wrap: wrap; gap: 24px;
  align-items: center;
  background: #f1f5f9; border: 1px solid #e2e8f0;
  border-radius: 24px; padding: 32px;
}
.ae-avatar {
  width: 64px; height: 64px; border-radius: 50%;
  background: #1e5fbf; color: #ffffff;
  display: grid; place-items: center;
  font-weight: 700; font-size: 1.25rem;
}

.ae-form-card {
  background: #ffffff; border: 1px solid #e2e8f0;
  border-radius: 24px; padding: 32px;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04);
  margin: 4rem auto; max-width: 720px;
}
.ae-form-card input, .ae-form-card textarea {
  width: 100%; padding: 12px 16px; font-size: 14px;
  border: 1px solid #e2e8f0; border-radius: 6px; background: #ffffff;
}
.ae-form-card input:focus, .ae-form-card textarea:focus {
  outline: none; border-color: #1e5fbf;
  box-shadow: 0 0 0 3px rgba(30,95,191,0.15);
}

.ae-newsletter {
  margin: 5rem 0 0;
  background: #0f172a; color: #ffffff;
  border-radius: 24px; padding: 48px;
  text-align: center;
}
.ae-newsletter h3 { color: #ffffff; font-size: 1.75rem; }
.ae-newsletter p { color: #cbd5e1; margin: 8px auto 24px; max-width: 480px; }
.ae-newsletter form {
  display: flex; flex-wrap: wrap; gap: 8px;
  max-width: 480px; margin: 0 auto;
}
.ae-newsletter input {
  flex: 1; min-width: 220px; padding: 12px 16px;
  border: 1px solid #334155; background: #1e293b; color: #ffffff;
  border-radius: 6px; font-size: 14px;
}
.ae-newsletter input::placeholder { color: #94a3b8; }

/* ===== Sticky aside ===== */
@media (min-width: 992px) {
  .ae-sticky { position: sticky; top: 96px; }
}

/* ===== Related grid ===== */
.ae-related-grid { display: grid; gap: 24px; grid-template-columns: 1fr; margin-top: 32px; }
@media (min-width: 768px) { .ae-related-grid { grid-template-columns: repeat(3, 1fr); } }

/* ===== TOC ===== */
.ae-toc { list-style: none; padding: 0; margin: 12px 0 0; }
.ae-toc a {
  display: block; padding: 6px 8px; border-radius: 6px;
  font-size: 14px; color: #475569;
}
.ae-toc a:hover { background: #f1f5f9; color: #0f172a; }

/* ===== Utility ===== */
.ae-section { padding: 64px 0; }
.ae-mt-12 { margin-top: 64px; }
.ae-icon { width: 18px; height: 18px; }
.ae-icon-sm { width: 14px; height: 14px; }
/* blog-clsoe */