:root {
   --green-deep: #1a5c38;
   --green-mid: #24784a;
   --green-light: #2ea05f;
   --green-glow: rgba(36, 120, 74, 0.18);
   --charcoal: #1a1a1a;
   --charcoal-soft: #2d2d2d;
   --silver: #b8bcc8;
   --silver-light: #e8eaef;
   --white: #ffffff;
   --bg-light: #f7f8fa;
   --bg-section: #f2f4f7;
   --text-main: #1a1a1a;
   --text-muted: #5a6070;
   --radius-sm: 12px;
   --radius-md: 18px;
   --radius-lg: 24px;
   --radius-xl: 32px;
   --shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.06);
   --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.10);
   --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.13);
   --transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
 }

 *,
 *::before,
 *::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
 }

 html {
   scroll-behavior: smooth;
 }

 body {
   font-family: 'Plus Jakarta Sans', sans-serif;
   color: var(--text-main);
   background: var(--white);
   overflow-x: clip;
   font-size: 16px;
   line-height: 1.7;
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
   font-family: 'Manrope', sans-serif;
   font-weight: 800;
   line-height: 1.15;
 }

 main {
   width: 100%;
   overflow-x: clip;
 }

 /* ── SCROLL PROGRESS ── */
 #scroll-progress {
   position: fixed;
   top: 0;
   left: 0;
   height: 3px;
   background: linear-gradient(90deg, var(--green-deep), var(--green-light));
   width: 0%;
   z-index: 9999;
   transition: width 0.1s;
 }

 /* ── NAVBAR ── */
 #mainNav {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 1000;
   padding: 10px 0;
   transition: var(--transition);
   background: transparent;
 }

 #mainNav.scrolled {
   padding: 12px 0;
   background: rgba(255, 255, 255, 0.97);
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
   box-shadow: 0 2px 24px rgba(0, 0, 0, 0.09);
 }

 .navbar-brand {
   font-family: 'Manrope', sans-serif;
   font-weight: 900;
   font-size: 1.9rem;
   letter-spacing: -1px;
   color: var(--white) !important;
   transition: var(--transition);
 }

 .navbar-brand img {
   width: 200px;
 }

 #mainNav.scrolled .navbar-brand {
   color: var(--charcoal) !important;
 }

 .navbar-brand span {
   color: var(--green-light);
 }

 .nav-link {
   font-family: 'Manrope', sans-serif;
   font-weight: 600;
   font-size: 0.88rem;
   letter-spacing: 0.02em;
   color: #252525 !important;
   padding: 8px 10px !important;
   transition: var(--transition);
   position: relative;
 }

 #mainNav.scrolled .nav-link {
   color: var(--charcoal) !important;
 }

 .nav-cta {
   background: var(--green-deep);
   color: var(--white) !important;
   border-radius: 50px;
   padding: 9px 22px !important;
   font-size: 0.85rem !important;
   letter-spacing: 0.03em;
   border: 2px solid transparent;
 }

 .nav-cta:hover {
   background: transparent;
   border-color: var(--green-deep);
   color: var(--green-deep) !important;
 }

 #mainNav.scrolled .nav-cta {
   color: var(--white) !important;
 }

 #mainNav.scrolled .nav-cta:hover {
   color: var(--green-deep) !important;
 }

 /* ── HERO ── */
 #hero {
   min-height: 100vh;
   position: relative;
   display: flex;
   align-items: center;
   overflow: hidden;
   background: var(--charcoal);
 }

 .hero-bg {
   position: absolute;
   inset: 0;
   background-image: url('../images/banner.webp');
   background-size: cover;
   background-position: center;
   transform: scale(1.05);
   transition: transform 8s ease-out;
 }

 #hero.loaded .hero-bg {
   transform: scale(1);
 }

 .hero-overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(135deg,
       rgba(20, 22, 20, 0.88) 0%,
       rgba(26, 92, 56, 0.14) 50%,
       rgba(10, 15, 25, 0.0) 100%);
 }

 .hero-content {
   position: relative;
   z-index: 2;
 }

 .hero-eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   background: rgba(255, 255, 255, 0.1);
   border: 1px solid rgba(255, 255, 255, 0.2);
   backdrop-filter: blur(10px);
   padding: 7px 18px;
   border-radius: 50px;
   font-size: 0.6rem;
   font-weight: 700;
   letter-spacing: 0.12em;
   color: #fff;
   text-transform: uppercase;
   margin-bottom: 28px;
 }

 .hero-title {
   font-size: clamp(2.4rem, 5.5vw, 3.3rem);
   font-weight: 900;
   color: var(--white);
   letter-spacing: -1.5px;
   line-height: 1.08;
   margin-bottom: 24px;
 }

 .hero-title .accent {
   color: var(--green-light);
 }

 .hero-sub {
   font-size: 1.05rem;
   color: rgba(255, 255, 255, 0.72);
   max-width: 580px;
   margin-bottom: 36px;
   font-weight: 400;
   letter-spacing: 0.01em;
 }

 .hero-pills {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   margin-bottom: 40px;
 }

 .hero-pill {
   display: flex;
   align-items: center;
   gap: 7px;
   background: rgba(255, 255, 255, 0.08);
   border: 1px solid rgba(255, 255, 255, 0.15);
   color: rgba(255, 255, 255, 0.85);
   padding: 6px 16px;
   border-radius: 50px;
   font-size: 0.8rem;
   font-weight: 600;
 }

 .hero-pill i {
   color: var(--green-light);
   font-size: 0.9rem;
 }

 .btn-hero-primary {
   background: var(--charcoal-soft);
   color: var(--white);
   border: none;
   border-radius: 50px;
   padding: 16px 36px;
   font-family: 'Manrope', sans-serif;
   font-weight: 700;
   font-size: 0.95rem;
   letter-spacing: 0.02em;
   transition: var(--transition);
   box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
   text-decoration: none;
 }

 .btn-hero-primary:hover {
   transform: translateY(-3px);
   box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
   color: var(--white);
   background: var(--green-deep);
 }

 .btn-hero-outline {
   background: rgba(255, 255, 255, 0.08);
   color: var(--white);
   border: 1.5px solid rgba(255, 255, 255, 0.35);
   border-radius: 50px;
   padding: 15px 32px;
   font-family: 'Manrope', sans-serif;
   font-weight: 700;
   font-size: 0.95rem;
   transition: var(--transition);
   text-decoration: none;
   backdrop-filter: blur(8px);
 }

 .btn-hero-outline:hover {
   background: rgba(255, 255, 255, 0.18);
   color: var(--white);
   transform: translateY(-3px);
 }

 /* Hero Stats */
 .hero-stats {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   background: rgba(255, 255, 255, 0.06);
   backdrop-filter: blur(20px);
   border-top: 1px solid rgba(255, 255, 255, 0.1);
   z-index: 2;
   padding: 28px 0;
 }

 .stat-item {
   text-align: center;
 }

 .stat-number {
   font-family: 'Manrope', sans-serif;
   font-size: 2.2rem;
   font-weight: 900;
   color: var(--white);
   line-height: 1;
   display: block;
 }

 .stat-number .stat-unit {
   color: var(--green-light);
 }

 .stat-label {
   font-size: 0.78rem;
   color: rgba(255, 255, 255, 0.6);
   font-weight: 600;
   letter-spacing: 0.06em;
   text-transform: uppercase;
   margin-top: 4px;
   display: block;
 }

 .stat-divider {
   width: 1px;
   height: 48px;
   background: rgba(255, 255, 255, 0.15);
   margin: auto;
 }

 /* Scroll indicator */
 .scroll-indicator {
   position: absolute;
   bottom: 110px;
   left: 50%;
   transform: translateX(-50%);
   z-index: 3;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 6px;
   color: rgba(255, 255, 255, 0.5);
   font-size: 0.7rem;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   font-weight: 600;
 }

 .scroll-mouse {
   width: 24px;
   height: 38px;
   border: 2px solid rgba(255, 255, 255, 0.3);
   border-radius: 12px;
   display: flex;
   justify-content: center;
   padding-top: 6px;
 }

 .scroll-dot {
   width: 4px;
   height: 8px;
   background: var(--green-light);
   border-radius: 2px;
   animation: scrollBounce 1.8s ease-in-out infinite;
 }

 @keyframes scrollBounce {

   0%,
   100% {
     transform: translateY(0);
     opacity: 1;
   }

   50% {
     transform: translateY(8px);
     opacity: 0.3;
   }
 }

 /* ── SECTION UTILITIES ── */
 .section-label {
   font-family: 'Manrope', sans-serif;
   font-size: 0.72rem;
   font-weight: 800;
   letter-spacing: 0.16em;
   text-transform: uppercase;
   color: var(--green-mid);
   display: inline-block;
   margin-bottom: 14px;
 }

 .section-title {
   font-size: clamp(1.8rem, 3.5vw, 2.3rem);
   font-weight: 900;
   letter-spacing: -0.8px;
   line-height: 1.12;
   color: var(--charcoal);
 }

 .section-sub {
   font-size: 1.05rem;
   color: var(--text-muted);
   line-height: 1.75;
 }

 .green-line {
   display: inline-block;
   width: 44px;
   height: 4px;
   background: linear-gradient(90deg, var(--green-deep), var(--green-light));
   border-radius: 2px;
   margin-bottom: 16px;
 }

 /* ── TRUSTED BY ── */
 #trusted {
   background: var(--bg-light);
   padding: 60px 0;
   overflow: hidden;
 }

 .trusted-label {
   font-size: 0.75rem;
   font-weight: 700;
   letter-spacing: 0.12em;
   text-transform: uppercase;
   color: var(--text-muted);
   margin-bottom: 32px;
 }

 .marquee-wrapper {
   overflow: hidden;
   position: relative;
 }

 .marquee-wrapper::before,
 .marquee-wrapper::after {
   content: '';
   position: absolute;
   top: 0;
   bottom: 0;
   width: 120px;
   z-index: 2;
   pointer-events: none;
 }

 .marquee-wrapper::before {
   left: 0;
   background: linear-gradient(90deg, var(--bg-light), transparent);
 }

 .marquee-wrapper::after {
   right: 0;
   background: linear-gradient(-90deg, var(--bg-light), transparent);
 }

 .marquee-track {
   display: flex;
   gap: 48px;
   animation: marquee 28s linear infinite;
   width: max-content;
 }

 .marquee-track:hover {
   animation-play-state: paused;
 }

 @keyframes marquee {
   from {
     transform: translateX(0);
   }

   to {
     transform: translateX(-50%);
   }
 }

 .marquee-item {
   display: flex;
   align-items: center;
   gap: 10px;
   background: var(--white);
   border: 1px solid var(--silver-light);
   border-radius: var(--radius-md);
   padding: 14px 24px;
   font-family: 'Manrope', sans-serif;
   font-weight: 700;
   font-size: 0.88rem;
   color: var(--text-muted);
   white-space: nowrap;
   transition: var(--transition);
   box-shadow: var(--shadow-sm);
 }

 .marquee-item:hover {
   color: var(--green-deep);
   border-color: var(--green-light);
 }

 .marquee-item i {
   color: var(--green-mid);
   font-size: 1.1rem;
 }

 /* ── ABOUT ── */
 #about {
   padding: 80px 0;
 }

 .about-img-wrap {
   border-radius: var(--radius-xl);
   overflow: hidden;
   position: relative;
 }

 @media (min-width: 992px) {
   .about-sticky-col {
     position: sticky;
     top: 110px;
     align-self: flex-start;
     z-index: 1;
   }
 }

 .about-img-wrap img {
   width: 100%;
   height: 560px;
   object-fit: cover;
   display: block;
 }

 .about-badge {
   position: absolute;
   bottom: 28px;
   left: 28px;
   background: var(--white);
   border-radius: var(--radius-md);
   padding: 18px 24px;
   box-shadow: var(--shadow-lg);
   display: flex;
   align-items: center;
   gap: 14px;
 }

 .about-badge-icon {
   width: 52px;
   height: 52px;
   background: var(--charcoal-soft);
   border-radius: var(--radius-sm);
   display: flex;
   align-items: center;
   justify-content: center;
   color: white;
   font-size: 1.3rem;
   flex-shrink: 0;
 }

 .about-badge-text strong {
   font-family: 'Manrope', sans-serif;
   font-size: 1.4rem;
   font-weight: 900;
   display: block;
   line-height: 1;
 }

 .about-badge-text span {
   font-size: 0.78rem;
   color: var(--text-muted);
   font-weight: 600;
 }

 .about-highlight-card {
   background: var(--bg-light);
   border-radius: var(--radius-md);
   padding: 20px 22px;
   display: flex;
   align-items: center;
   gap: 16px;
   transition: var(--transition);
   border: 1.5px solid transparent;
 }

 .about-highlight-card:hover {
   background: var(--white);
   border-color: var(--silver);
   box-shadow: var(--shadow-md);
   transform: translateX(6px);
 }

 .ahc-icon {
   width: 44px;
   height: 44px;
   background: var(--bg-section);
   border-radius: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--green-deep);
   font-size: 1.1rem;
   flex-shrink: 0;
 }

 .ahc-text strong {
   font-family: 'Manrope', sans-serif;
   font-weight: 800;
   font-size: 0.92rem;
   display: block;
 }

 .ahc-text span {
   font-size: 0.78rem;
   color: var(--text-muted);
 }

 /* ── WHY BAYDEE ── */
 #why {
   background: var(--bg-section);
   padding: 80px 0;
 }

 .feature-card {
   background: #f1f1f1;
   border-radius: var(--radius-lg);
   padding: 36px 30px;
   text-align: center;
   transition: var(--transition);
   border: 1.5px solid transparent;
   height: 100%;
   position: relative;
   overflow: hidden;
 }

 .feature-card::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 3px;
   background: linear-gradient(90deg, var(--green-deep), var(--green-light));
   transform: scaleX(0);
   transition: var(--transition);
 }

 .feature-card:hover {
   border-color: var(--silver-light);
   box-shadow: var(--shadow-md);
   transform: translateY(-8px);
 }

 .feature-card:hover::before {
   transform: scaleX(1);
 }

 .feature-icon {
   width: 68px;
   height: 68px;
   background: var(--bg-section);
   border-radius: 18px;
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto 20px;
   font-size: 1.7rem;
   color: var(--green-deep);
   transition: var(--transition);
 }

 .feature-card:hover .feature-icon {
   background: var(--green-deep);
   color: white;
   transform: scale(1.1) rotate(-5deg);
 }

 .feature-card h5 {
   font-size: 0.98rem;
   font-weight: 800;
   margin-bottom: 10px;
   color: var(--charcoal);
 }

 .feature-card p {
   font-size: 0.82rem;
   color: var(--text-muted);
   line-height: 1.65;
   margin: 0;
 }

 /* ── PRODUCTS ── */
 #products {
   padding: 80px 0;
 }

 .product-tabs .nav-link {
   color: var(--text-muted) !important;
   font-family: 'Manrope', sans-serif;
   font-weight: 700;
   font-size: 0.88rem;
   border-radius: 50px !important;
   background: #f1f1f1;
   padding: 8px 16px !important;
   border: 1.5px solid transparent !important;
   transition: var(--transition);
 }

 .product-tabs .nav-link::after {
   display: none;
 }

 .product-tabs .nav-link.active {
   background: var(--charcoal) !important;
   color: var(--white) !important;
   border-color: transparent !important;
 }

 .product-tabs .nav-link:hover:not(.active) {
   border-color: var(--silver) !important;
   color: var(--green-deep) !important;
 }

 .product-card {
   background: var(--white);
   border-radius: var(--radius-lg);
   overflow: hidden;
   box-shadow: var(--shadow-sm);
   transition: var(--transition);
   border: 1.5px solid var(--silver-light);
   height: 100%;
 }

 .product-card:hover {
   box-shadow: var(--shadow-lg);
   border-color: var(--silver);
   transform: translateY(-6px);
 }

 .product-card-img {
   position: relative;
   height: 220px;
   overflow: hidden;
 }

 .product-card-img img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 0.6s ease;
 }

 .product-card:hover .product-card-img img {
   transform: scale(1.08);
 }

 .product-card-badge {
   position: absolute;
   top: 14px;
   left: 14px;
   background: var(--charcoal);
   color: white;
   font-size: 0.7rem;
   font-weight: 800;
   padding: 4px 12px;
   border-radius: 50px;
   letter-spacing: 0.06em;
   text-transform: uppercase;
 }

 .product-card-overlay {
   position: absolute;
   inset: 0;
   background: rgba(20, 20, 20, 0.55);
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   opacity: 0;
   transition: var(--transition);
 }

 .product-card:hover .product-card-overlay {
   opacity: 1;
 }

 .overlay-btn {
   background: white;
   color: var(--charcoal);
   border: none;
   border-radius: 50px;
   padding: 8px 18px;
   font-size: 0.78rem;
   font-weight: 700;
   font-family: 'Manrope', sans-serif;
   cursor: pointer;
   transition: var(--transition);
 }

 .overlay-btn:hover {
   background: var(--green-deep);
   color: white;
 }

 .product-card-body {
   padding: 22px;
 }

 .product-card-body h5 {
   font-size: 1rem;
   font-weight: 800;
   margin-bottom: 6px;
   color: var(--charcoal);
 }

 .product-card-body p {
   font-size: 0.82rem;
   color: var(--text-muted);
   margin-bottom: 16px;
 }

 .product-specs {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
 }

 .product-spec-tag {
   background: var(--bg-light);
   border: 1px solid var(--silver-light);
   border-radius: 50px;
   font-size: 0.72rem;
   font-weight: 700;
   padding: 4px 12px;
   color: var(--text-muted);
 }

 /* ── INDUSTRIES ── */
 #industries {
   background: var(--bg-section);
   padding: 80px 0;
 }

 .industry-card {
   background: #f1f1f1;
   border-radius: var(--radius-lg);
   padding: 40px 30px;
   text-align: center;
   transition: var(--transition);
   border: 1.5px solid transparent;
   height: 100%;
   cursor: pointer;
 }

 .industry-card:hover {
   background: var(--charcoal);
   border-color: transparent;
   box-shadow: var(--shadow-lg);
   transform: translateY(-8px);
 }

 .industry-icon {
   font-size: 2.4rem;
   color: var(--green-mid);
   margin-bottom: 20px;
   transition: var(--transition);
   display: block;
 }

 .industry-card:hover .industry-icon {
   color: var(--green-light);
   transform: scale(1.15);
 }

 .industry-card h5 {
   font-size: 1rem;
   font-weight: 800;
   color: var(--charcoal);
   margin-bottom: 12px;
   transition: var(--transition);
 }

 .industry-card:hover h5 {
   color: var(--white);
 }

 .industry-card p {
   font-size: 0.82rem;
   color: var(--text-muted);
   line-height: 1.65;
   margin-bottom: 20px;
   transition: var(--transition);
 }

 .industry-card:hover p {
   color: rgba(255, 255, 255, 0.7);
 }

 .industry-link {
   font-family: 'Manrope', sans-serif;
   font-size: 0.8rem;
   font-weight: 800;
   color: var(--green-mid);
   text-decoration: none;
   display: inline-flex;
   align-items: center;
   gap: 6px;
   transition: var(--transition);
 }

 .industry-card:hover .industry-link {
   color: var(--green-light);
 }

 /* ── MANUFACTURING ── */
 #manufacturing {
   background: var(--charcoal);
   padding: 80px 0;
   position: relative;
   overflow: hidden;
 }

 #manufacturing::before {
   content: '';
   position: absolute;
   inset: 0;
   background-image: url('../images/bg-img.webp');
   background-size: cover;
   background-position: center;
   opacity: 0.12;
 }

 .mfg-card {
   background: rgba(255, 255, 255, 0.06);
   border: 1px solid rgba(255, 255, 255, 0.12);
   border-radius: var(--radius-lg);
   padding: 14px;
   height: 100%;
   backdrop-filter: blur(10px);
   text-align: center;
   transition: var(--transition);
 }

 .mfg-card:hover {
   background: rgba(255, 255, 255, 0.1);
   border-color: rgba(46, 160, 95, 0.35);
   transform: translateY(-6px);
 }

 .mfg-icon {
   font-size: 2rem;
   color: var(--green-light);
   margin-bottom: 16px;
   display: block;
 }

 .mfg-card h5 {
   font-size: 0.95rem;
   font-weight: 800;
   color: var(--white);
   margin-bottom: 8px;
 }

 .mfg-card p {
   font-size: 0.8rem;
   color: rgba(255, 255, 255, 0.55);
   margin: 0;
 }

 /* Process Steps */
 .process-step {
   text-align: center;
   position: relative;
 }

 .process-step:not(:last-child)::after {
   content: '';
   position: absolute;
   top: 28px;
   left: calc(50% + 36px);
   right: calc(-50% + 36px);
   height: 2px;
   background: linear-gradient(90deg, rgba(255,255,255,0.2), rgba(255,255,255,0.05));
 }

 .process-number {
   width: 56px;
   height: 56px;
   background: var(--green-deep);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: 'Manrope', sans-serif;
   font-size: 1.1rem;
   font-weight: 900;
   color: white;
   margin: 0 auto 16px;
   position: relative;
   z-index: 1;
 }

 .process-step p {
   font-size: 0.8rem;
   font-weight: 700;
   color: rgba(255, 255, 255, 0.7);
   margin: 0;
 }

 /* ── INDIA MAP ── */
 #dealer-map {
   padding: 80px 0;
 }

 .india-map-visual {
   background: var(--bg-section);
   border-radius: var(--radius-xl);
   padding: 30px 20px;
   text-align: center;
   border: 2px solid var(--silver-light);
   position: relative;
   overflow: hidden;
 }

 .india-map-visual::before {
   content: 'INDIA';
   position: absolute;
   font-family: 'Manrope', sans-serif;
   font-size: 8rem;
   font-weight: 900;
   color: rgba(26, 26, 26, 0.04);
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   white-space: nowrap;
 }

 .state-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 12px;
   position: relative;
   z-index: 1;
 }
 .state-grid a{
     text-decoration:none;
 }

 .state-chip {
   background: var(--white);
   border-radius: 50px;
   padding: 6px 12px;
   font-size: 0.7rem;
   font-weight: 700;
   color: var(--charcoal);
   border: 1.5px solid var(--silver-light);
   display: flex;
   align-items: center;
   gap: 6px;
   transition: var(--transition);
   cursor: pointer;
 }

 .state-chip:hover {
   background: var(--green-deep);
   color: white;
   border-color: var(--green-deep);
   transform: scale(1.05);
 }

 .state-chip i {
   font-size: 0.7rem;
   color: var(--green-mid);
 }

 .state-chip:hover i {
   color: white;
 }

 .map-stat {
   background: white;
   border-radius: var(--radius-lg);
   padding: 28px;
   text-align: center;
   box-shadow: var(--shadow-md);
   border: 1.5px solid var(--silver-light);
   transition: var(--transition);
 }

 .map-stat:hover {
   box-shadow: var(--shadow-lg);
   transform: translateY(-4px);
 }

 .map-stat-num {
   font-family: 'Manrope', sans-serif;
   font-size: 2.2rem;
   font-weight: 900;
   color: var(--charcoal);
   display: block;
   line-height: 1;
 }

 .map-stat-label {
   font-size: 0.78rem;
   font-weight: 700;
   color: var(--text-muted);
   letter-spacing: 0.04em;
   margin-top: 6px;
   display: block;
 }

 /* ── DEALER ── */
 #dealer {
   background: var(--charcoal);
   padding: 80px 0;
   position: relative;
   overflow: hidden;
 }

 #dealer::before {
   content: '';
   position: absolute;
   top: -40%;
   right: -10%;
   width: 600px;
   height: 600px;
   background: radial-gradient(circle, rgba(46, 160, 95, 0.12) 0%, transparent 70%);
   border-radius: 50%;
 }

 .dealer-benefit {
   display: flex;
   align-items: center;
   gap: 14px;
   padding: 16px 0;
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 }

 .dealer-benefit:last-child {
   border-bottom: none;
 }

 .db-icon {
   width: 44px;
   height: 44px;
   background: rgba(255, 255, 255, 0.08);
   border-radius: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--green-light);
   font-size: 1.1rem;
   flex-shrink: 0;
 }

 .dealer-benefit strong {
   font-family: 'Manrope', sans-serif;
   font-weight: 800;
   color: var(--white);
   font-size: 0.92rem;
   display: block;
 }

 .dealer-benefit span {
   font-size: 0.8rem;
   color: rgba(255, 255, 255, 0.6);
 }

 .dealer-form {
   background: rgba(255, 255, 255, 0.06);
   border: 1px solid rgba(255, 255, 255, 0.15);
   border-radius: var(--radius-xl);
   padding: 44px;
   backdrop-filter: blur(20px);
 }

 .dealer-form .form-control,
 .dealer-form .form-select {
   background: rgba(255, 255, 255, 0.08);
   border: 1.5px solid rgba(255, 255, 255, 0.15);
   border-radius: var(--radius-sm);
   color: var(--white);
   padding: 13px 18px;
   font-size: 0.9rem;
   transition: var(--transition);
 }

 .dealer-form .form-control:focus,
 .dealer-form .form-select:focus {
   background: rgba(255, 255, 255, 0.12);
   border-color: var(--green-light);
   box-shadow: 0 0 0 3px rgba(46, 160, 95, 0.2);
   color: var(--white);
 }

 .dealer-form .form-control::placeholder {
   color: rgba(255, 255, 255, 0.4);
 }

 .dealer-form label {
   color: rgba(255, 255, 255, 0.75);
   font-size: 0.82rem;
   font-weight: 600;
   margin-bottom: 6px;
   display: block;
 }

 .dealer-form .form-select option {
   background: var(--charcoal);
 }

 /* ── TESTIMONIALS ── */
 #testimonials {
   padding: 80px 0;
   background: var(--bg-light);
 }

 .testimonial-card {
   background: var(--white);
   border-radius: var(--radius-xl);
   padding: 40px;
   box-shadow: var(--shadow-md);
   border: 1.5px solid var(--silver-light);
   height: 100%;
 }

 .stars {
   color: #f59e0b;
   font-size: 0.9rem;
   margin-bottom: 20px;
 }

 .testimonial-text {
   font-size: 0.95rem;
   color: var(--text-main);
   line-height: 1.75;
   margin-bottom: 28px;
   font-style: italic;
 }

 .testimonial-author {
   display: flex;
   align-items: center;
   gap: 14px;
 }

 .author-avatar {
   width: 52px;
   height: 52px;
   border-radius: 50%;
   object-fit: cover;
   border: 2px solid var(--silver-light);
 }

 .author-info strong {
   font-family: 'Manrope', sans-serif;
   font-weight: 800;
   font-size: 0.92rem;
   display: block;
 }

 .author-info span {
   font-size: 0.78rem;
   color: var(--text-muted);
 }

 /* ── CERTIFICATIONS ── */
 #certifications {
   padding: 80px 0;
 }

 .cert-card {
   text-align: center;
   padding: 36px 24px;
   background: var(--bg-light);
   border-radius: var(--radius-lg);
   border: 1.5px solid var(--silver-light);
   transition: var(--transition);
 }

 .cert-card:hover {
   border-color: var(--silver); 
   box-shadow: var(--shadow-md);
   transform: translateY(-4px);
 }

 .cert-icon {
   font-size: 2.8rem;
   color: var(--green-mid);
   margin-bottom: 14px;
   display: block;
 }

 .cert-card h6 {
   font-size: 0.88rem;
   font-weight: 800;
   margin-bottom: 6px;
   color: var(--charcoal);
 }

 .cert-card p {
   font-size: 0.78rem;
   color: var(--text-muted);
   margin: 0;
 }

 /* ── FAQ ── */
 #faq {
   padding: 100px 0;
   background: var(--bg-section);
 }

 .accordion-item {
   border: 1.5px solid var(--silver-light) !important;
   border-radius: var(--radius-md) !important;
   margin-bottom: 12px;
   overflow: hidden;
 }

 .accordion-button {
   font-family: 'Manrope', sans-serif;
   font-weight: 700;
   font-size: 0.95rem;
   color: var(--charcoal);
   background: var(--white);
   padding: 20px 24px;
   box-shadow: none !important;
 }

 .accordion-button:not(.collapsed) {
   color: var(--green-deep);
   background: var(--bg-light);
   border-bottom: 1px solid var(--silver-light);
 }

 .accordion-button::after {
   filter: invert(0.4) sepia(1) saturate(3) hue-rotate(110deg);
 }

 .accordion-body {
   padding: 20px 24px;
   font-size: 0.9rem;
   color: var(--text-muted);
   line-height: 1.75;
 }

 /* ── FINAL CTA ── */
 #cta-final {
   padding: 80px 0;
 }

 .cta-box {
   background: linear-gradient(135deg, var(--charcoal) 0%, #2a2a2a 100%);
   border-radius: var(--radius-xl);
   padding: 80px;
   position: relative;
   overflow: hidden;
   text-align: center;
 }

 .cta-box::before {
   content: '';
   position: absolute;
   top: -30%;
   left: -10%;
   width: 500px;
   height: 500px;
   background: radial-gradient(circle, rgba(36, 120, 74, 0.15) 0%, transparent 70%);
   border-radius: 50%;
 }

 .cta-box::after {
   content: '';
   position: absolute;
   bottom: -30%;
   right: -10%;
   width: 400px;
   height: 400px;
   background: radial-gradient(circle, rgba(46, 160, 95, 0.1) 0%, transparent 70%);
   border-radius: 50%;
 }

 .cta-box-inner {
   position: relative;
   z-index: 1;
 }

 .cta-box h2 {
   font-size: clamp(1.9rem, 3.5vw, 3rem);
   font-weight: 900;
   color: white;
   margin-bottom: 16px;
 }

 .cta-box p {
   font-size: 1.05rem;
   color: rgba(255, 255, 255, 0.65);
   margin-bottom: 44px;
 }

 /* ── FOOTER ── */
 footer {
   background: #14171b;
   padding: 80px 0 0;
   color: rgba(255, 255, 255, 0.7);
 }

 .footer-logo {
   font-family: 'Manrope', sans-serif;
   font-weight: 900;
   font-size: 2rem;
   color: var(--white);
   letter-spacing: -1px;
   margin-bottom: 16px;
   display: inline-block;
 }

 .footer-logo span {
   color: var(--green-light);
 }

 footer p {
   font-size: 0.86rem;
   line-height: 1.75;
   margin-bottom: 24px;
 }

 .footer-heading {
   font-family: 'Manrope', sans-serif;
   font-weight: 800;
   font-size: 0.82rem;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   color: var(--white);
   margin-bottom: 20px;
 }

 .footer-links {
   list-style: none;
   padding: 0;
   margin: 0;
 }

 .footer-links li {
   margin-bottom: 10px;
 }

 .footer-links a {
   color: rgba(255, 255, 255, 0.55);
   text-decoration: none;
   font-size: 0.86rem;
   transition: var(--transition);
   display: flex;
   align-items: center;
   gap: 8px;
 }

 .footer-links a i {
   color: var(--green-light);
   font-size: 0.75rem;
 }

 .footer-links a:hover {
   color: var(--green-light);
   padding-left: 4px;
 }

 .footer-contact-item {
   display: flex;
   align-items: flex-start;
   gap: 12px;
   margin-bottom: 16px;
   font-size: 0.86rem;
 }

 .footer-contact-item i {
   color: var(--green-light);
   margin-top: 3px;
   font-size: 1rem;
   flex-shrink: 0;
 }

 .social-icons {
   display: flex;
   gap: 12px;
   margin-top: 24px;
 }

 .social-icon {
   width: 40px;
   height: 40px;
   background: rgba(255, 255, 255, 0.06);
   border: 1px solid rgba(255, 255, 255, 0.12);
   border-radius: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: rgba(255, 255, 255, 0.6);
   font-size: 1rem;
   text-decoration: none;
   transition: var(--transition);
 }

 .social-icon:hover {
   background: var(--green-mid);
   border-color: var(--green-mid);
   color: white;
 }

 .footer-divider {
   border: none;
   border-top: 1px solid rgba(255, 255, 255, 0.08);
   margin: 60px 0 0;
 }

 .footer-bottom {
   padding: 22px 0;
   font-size: 0.8rem;
   color: rgba(255, 255, 255, 0.35);
 }

 .footer-bottom a {
   text-decoration: none;
   color: #fff;
 }

 .footer-certbadge {
   display: flex;
   align-items: center;
   gap: 8px;
   background: rgba(255, 255, 255, 0.06);
   border: 1px solid rgba(255, 255, 255, 0.15);
   border-radius: 50px;
   padding: 6px 16px;
   font-size: 0.76rem;
   font-weight: 700;
   color: var(--green-light);
 }

 /* ── FLOATING BUTTONS ── */
 .floating-wa {
   position: fixed;
   bottom: 28px;
   right: 28px;
   z-index: 999;
   width: 60px;
   height: 60px;
   background: #25d366;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   color: white;
   font-size: 1.7rem;
   box-shadow: 0 8px 30px rgba(37, 211, 102, 0.45);
   transition: var(--transition);
   text-decoration: none;
 }

 .floating-wa:hover {
   transform: scale(1.15) rotate(-5deg);
   color: white;
 }

 .back-to-top {
   position: fixed;
   bottom: 100px;
   right: 30px;
   z-index: 999;
   width: 44px;
   height: 44px;
   background: var(--charcoal);
   color: white;
   border: none;
   border-radius: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.1rem;
   cursor: pointer;
   box-shadow: var(--shadow-md);
   transition: var(--transition);
   opacity: 0;
   transform: translateY(20px);
 }

 .back-to-top.visible {
   opacity: 1;
   transform: translateY(0);
 }

 .back-to-top:hover {
   background: var(--green-deep);
   transform: translateY(-3px);
 }

 /* ── GENERAL BUTTONS ── */
 .btn-green {
   background: var(--charcoal);
   color: white;
   border: none;
   border-radius: 50px;
   padding: 14px 32px;
   font-family: 'Manrope', sans-serif;
   font-weight: 700;
   font-size: 0.92rem;
   text-decoration: none;
   display: inline-flex;
   align-items: center;
   gap: 8px;
   transition: var(--transition);
   box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2);
 }

 .btn-green:hover {
   transform: translateY(-3px);
   box-shadow: 0 14px 36px rgba(0, 0, 0, 0.3);
   color: white;
   background: var(--green-deep);
 }

 .btn-outline-green {
   background: transparent;
   color: var(--charcoal);
   border: 2px solid var(--charcoal);
   border-radius: 50px;
   padding: 13px 30px;
   font-family: 'Manrope', sans-serif;
   font-weight: 700;
   font-size: 0.92rem;
   text-decoration: none;
   display: inline-flex;
   align-items: center;
   gap: 8px;
   transition: var(--transition);
 }

 .btn-outline-green:hover {
   background: var(--charcoal);
   color: white;
   transform: translateY(-3px);
 }

 .btn-white {
   background: white;
   color: var(--charcoal);
   border: none;
   border-radius: 50px;
   padding: 14px 32px;
   font-family: 'Manrope', sans-serif;
   font-weight: 700;
   font-size: 0.92rem;
   text-decoration: none;
   display: inline-flex;
   align-items: center;
   gap: 8px;
   transition: var(--transition);
   box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15);
 }

 .btn-white:hover {
   transform: translateY(-3px);
   box-shadow: 0 14px 36px rgba(0, 0, 0, 0.2);
   color: var(--green-deep);
 }

 .btn-outline-white {
   background: transparent;
   color: white;
   border: 2px solid rgba(255, 255, 255, 0.4);
   border-radius: 50px;
   padding: 13px 30px;
   font-family: 'Manrope', sans-serif;
   font-weight: 700;
   font-size: 0.92rem;
   text-decoration: none;
   display: inline-flex;
   align-items: center;
   gap: 8px;
   transition: var(--transition);
 }

 .btn-outline-white:hover {
   border-color: white;
   background: rgba(255, 255, 255, 0.1);
   color: white;
 }

 /* ── SWIPER ── */
 .swiper-pagination-bullet-active {
   background: var(--green-mid) !important;
 }

 /* Responsive */
 @media (max-width: 991px) {
   .hero-title {
     font-size: 1.8rem;
   }

   .process-step:not(:last-child)::after {
     display: none;
   }

   .state-grid {
     grid-template-columns: repeat(3, 1fr);
   }

   .cta-box {
     padding: 50px 30px;
   }

   .dealer-form {
     padding: 30px 24px;
   }
 }

 @media (max-width: 767px) {
   .stat-label {
     font-size: 0.58rem;
   }

   #hero {
     min-height: 120vh;
   }

   .hero-stats .row>div:nth-child(odd) .stat-divider {
     display: none;
   }

   .state-grid {
     grid-template-columns: repeat(2, 1fr);
   }

   .about-img-wrap img {
     height: 360px;
   }

   .stat-number {
     font-size: 1.6rem;
   }
 }


 /* ============================
   PAGE HEADER (inner pages)
   ============================ */
 #page-header {
   position: relative;
   overflow: hidden;
   background: var(--charcoal);
 }

 .page-header-bg {
   position: absolute;
   inset: 0;
   background: url('../images/banner.webp');
   z-index: 0;
 }

 .page-header-overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(45deg, rgba(20,20,20,0.9), transparent);
   z-index: 0;
 }

 .page-header-content {
   position: relative;
   z-index: 1;
 }

 .page-title {
   font-family: 'Manrope', sans-serif;
   font-weight: 800;
   font-size: clamp(2.2rem, 4.5vw, 2.5rem);
   color: var(--white);
   line-height: 1.15;
   margin-bottom: 20px;
 }

 .page-sub {
   color: rgba(255, 255, 255, 0.65);
   font-size: 1.05rem;
   max-width: 560px;
   line-height: 1.7;
   margin-bottom: 28px;
 }

 .page-breadcrumb {
   display: flex;
   align-items: center;
   gap: 10px;
   list-style: none;
   font-size: 0.85rem;
   font-weight: 600;
 }

 .page-breadcrumb li {
   color: rgba(255, 255, 255, 0.45);
   position: relative;
 }

 .page-breadcrumb li:not(:last-child)::after {
   content: "/";
   margin-left: 10px;
   color: rgba(255, 255, 255, 0.3);
 }

 .page-breadcrumb li a {
   color: rgba(255, 255, 255, 0.65);
   text-decoration: none;
   transition: var(--transition);
 }

 .page-breadcrumb li a:hover {
   color: var(--green-light);
 }

 .page-breadcrumb li.active {
   color: var(--green-light);
 }

 /* ============================
   MILESTONES / TIMELINE
   ============================ */
 #milestones {
   position: relative;
   background: var(--charcoal);
   padding: 100px 0;
   overflow: hidden;
 }

 #milestones::before {
   content: "";
   position: absolute;
   inset: 0;
   background: radial-gradient(circle at 90% 10%, rgba(255,255,255,0.06) 0%, transparent 50%);
   z-index: 0;
 }

 #milestones .container {
   position: relative;
   z-index: 1;
 }

 .timeline-wrap {
   position: relative;
   padding-top: 20px;
 }

 .timeline-line {
   display: none;
 }

 @media (min-width: 992px) {
   .timeline-line {
     display: block;
     position: absolute;
     top: 38px;
     left: 0;
     right: 0;
     height: 2px;
     background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15) 10%, rgba(255,255,255,0.15) 90%, transparent);
   }
 }

 .timeline-item {
   position: relative;
   padding-top: 10px;
   height: 100%;
 }

 .timeline-year {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 76px;
   height: 76px;
   border-radius: 50%;
   background: var(--green-deep);
   color: var(--white);
   font-family: 'Manrope', sans-serif;
   font-weight: 800;
   font-size: 1rem;
   margin-bottom: 24px;
   box-shadow: 0 0 0 6px rgba(255,255,255,0.06), 0 8px 24px rgba(0, 0, 0, 0.3);
   position: relative;
   z-index: 1;
 }

 .timeline-item h6 {
   color: var(--white);
   font-family: 'Manrope', sans-serif;
   font-weight: 800;
   font-size: 1.05rem;
   margin-bottom: 10px;
 }

 .timeline-item p {
   color: rgba(255, 255, 255, 0.55);
   font-size: 0.9rem;
   line-height: 1.65;
 }

 /* ============================
   LEADERSHIP / TEAM CARDS
   ============================ */
 #leadership {
   background: var(--bg-section);
   padding: 100px 0;
 }

 .team-card {
   background: var(--white);
   border-radius: var(--radius-lg);
   overflow: hidden;
   box-shadow: var(--shadow-sm);
   transition: var(--transition);
   height: 100%;
 }

 .team-card:hover {
   transform: translateY(-6px);
   box-shadow: var(--shadow-lg);
 }

 .team-img {
   width: 100%;
   aspect-ratio: 1 / 1;
   overflow: hidden;
 }

 .team-img img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: var(--transition);
 }

 .team-card:hover .team-img img {
   transform: scale(1.06);
 }

 .team-info {
   padding: 22px 20px;
   text-align: center;
 }

 .team-info h6 {
   font-family: 'Manrope', sans-serif;
   font-weight: 800;
   font-size: 1.05rem;
   color: var(--text-main);
   margin-bottom: 6px;
 }

 .team-info span {
   font-size: 0.85rem;
   color: var(--green-mid);
   font-weight: 600;
 }

 #our-story {
   padding: 80px 0;
 }

 #mission-vision {
   padding: 80px 0;
   background-color: #f1f1f1;
 }

 #difference {
   padding: 80px 0;
 }

 .dropdown-menu {
   border: none;
   border-radius: 12px;
   box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
   padding: 10px 0;
   min-width: 250px;
 }

 .dropdown-item {
   padding: 6px 20px;
   font-weight: 500;
   transition: all .3s ease;
 }

 .dropdown-item:hover {
   background: var(--charcoal);
   color: #fff;
   padding-left: 28px;
 }

 .dropdown-toggle::after {
   margin-left: 6px;
   transition: transform .3s ease;
 }

 .dropdown.show .dropdown-toggle::after {
   transform: rotate(180deg);
 }

 /* Remove Bootstrap default arrow */
 .dropdown-toggle::after {
   display: none;
 }

 /* Custom icon */
 .dropdown-toggle-custom i {
   font-size: 12px;
   transition: transform 0.3s ease;
 }

 /* Rotate icon when dropdown is open */
 .dropdown-toggle.show i {
   transform: rotate(180deg);
 }

 /* ============================
   PROFILE STATS STRIP
   ============================ */
 #profile-stats {
   padding: 60px 0 20px;
   background: var(--white);
 }

 /* ============================
   PROFILE RANGE GRID
   ============================ */
 #profile-range {
   padding: 80px 0;
   background: var(--white);
 }

 /* ============================
   PROFILE COMPARISON TABLE
   ============================ */
 #profile-compare {
   padding: 80px 0;
   background: var(--bg-section);
 }

 .profile-compare-table {
   width: 100%;
   border-collapse: separate;
   border-spacing: 0;
   background: var(--white);
   border-radius: var(--radius-lg);
   overflow: hidden;
   box-shadow: var(--shadow-sm);
   border: 1.5px solid var(--silver-light);
 }

 .profile-compare-table thead th {
   font-family: 'Manrope', sans-serif;
   font-weight: 800;
   font-size: 0.78rem;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: var(--white);
   background: var(--charcoal);
   padding: 18px 24px;
   text-align: left;
   white-space: nowrap;
 }

 .profile-compare-table thead th:first-child {
   border-top-left-radius: var(--radius-lg);
 }

 .profile-compare-table thead th:last-child {
   border-top-right-radius: var(--radius-lg);
 }

 .profile-compare-table tbody td {
   padding: 16px 24px;
   font-size: 0.88rem;
   color: var(--text-main);
   border-bottom: 1px solid var(--silver-light);
   white-space: nowrap;
 }

 .profile-compare-table tbody td:first-child {
   font-family: 'Manrope', sans-serif;
   font-weight: 800;
   color: var(--green-deep);
 }

 .profile-compare-table tbody tr:last-child td {
   border-bottom: none;
 }

 .profile-compare-table tbody tr:hover {
   background: var(--bg-light);
 }

 .profile-compare-table tbody td:nth-child(4) {
   white-space: normal;
   color: var(--text-muted);
   min-width: 220px;
 }

 @media (max-width: 767px) {
   #profile-stats {
     padding: 40px 0 10px;
   }

   #profile-range {
     padding: 50px 0;
   }

   #profile-compare {
     padding: 50px 0;
   }

   .profile-compare-table thead th,
   .profile-compare-table tbody td {
     padding: 12px 16px;
     font-size: 0.8rem;
   }
 }

 @media (max-width: 991.98px) {
   .navbar-collapse .dropdown-menu {
     position: static !important;
     float: none;
     width: 100%;
     margin-top: 4px;
     box-shadow: none;
     background: rgba(0, 0, 0, 0.03);
     border-radius: 10px;
   }

   .navbar-collapse .dropdown-toggle {
     display: flex;
     align-items: center;
     justify-content: space-between;
   }

   .navbar-collapse .dropdown-toggle.show i {
     transform: rotate(180deg);
   }

   .navbar-collapse .dropdown-toggle i {
     transition: transform 0.3s ease;
   }
 }

 .color-card {
   height: 150px;
   border-radius: 18px;
   display: flex;
   align-items: flex-end;
   justify-content: center;
   text-align: center;
   font-weight: 600;
   transition: .35s;
   border: 1px solid rgba(0, 0, 0, .08);
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   background-color: var(--bg-section);
   position: relative;
   overflow: hidden;
 }

 .color-card::before {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .65) 100%);
   z-index: 0;
 }

 .color-card h6 {
   position: relative;
   z-index: 1;
   color: #fff !important;
   margin: 0 0 14px;
   padding: 0 10px;
   text-shadow: 0 2px 8px rgba(0, 0, 0, .6);
 }

 .color-card:hover {
   transform: translateY(-8px);
   box-shadow: 0 15px 35px rgba(0, 0, 0, .15);
 }

 /* ---- Solutions for Fabricators page-specific styles ---- */
 .segment-chip {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 10px 18px;
   border-radius: 40px;
   background: rgba(255, 255, 255, 0.06);
   border: 1px solid rgba(255, 255, 255, 0.15);
   color: rgba(255, 255, 255, 0.9);
   font-size: 0.92rem;
   font-weight: 600;
   margin: 6px;
 }

 .segment-chip i {
   color: var(--green-light)
 }

 .segment-chip.light {
   background: var(--bg-light);
   border-color: var(--silver-light);
   color: var(--charcoal)
 }

 .choose-grid {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   gap: 16px;
   justify-content:center;
 }

 @media (max-width:991px) {
   .choose-grid {
     grid-template-columns: repeat(2, 1fr)
   }
 }

 @media (max-width:575px) {
   .choose-grid {
     grid-template-columns: 1fr
   }
 }

 .choose-item {
   display: flex;
   align-items: center;
   gap: 14px;
   padding: 22px;
   border-radius: 14px;
   background: #f8f9f8;
   border: 1px solid rgba(0, 0, 0, 0.05);
 }

 .choose-item i {
   font-size: 1.4rem;
   color: var(--green-mid);
   flex-shrink: 0
 }

 .choose-item span {
   font-weight: 700;
   font-size: 0.95rem;
   color: var(--charcoal, #1c1c1c)
 }

 .fab-card {
   background: var(--white);
   border-radius: var(--radius-lg);
   padding: 36px 30px;
   height: 100%;
   border: 1.5px solid var(--silver-light);
   transition: var(--transition);
 }

 .fab-card:hover {
   border-color: var(--silver);
   box-shadow: var(--shadow-md);
   transform: translateY(-6px);
 }

 .fab-card-icon {
   width: 56px;
   height: 56px;
   background: var(--bg-section);
   border-radius: 14px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.4rem;
   color: var(--green-deep);
   margin-bottom: 20px;
 }

 .fab-card h5 {
   font-size: 1.05rem;
   font-weight: 800;
   margin-bottom: 12px;
   color: var(--charcoal)
 }

 .fab-card p {
   font-size: 0.88rem;
   color: var(--text-muted);
   margin-bottom: 18px
 }

 .fab-check-list {
       list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    /*align-items: center;*/
 }

 .fab-check-list li {
   display: flex;
   align-items: flex-start;
   gap: 10px;
   font-size: 0.85rem;
   color: var(--text-main);
   margin-bottom: 10px;
   font-weight: 600;
 }

 .fab-check-list li i {
   color: var(--green-mid);
   margin-top: 3px;
   flex-shrink: 0
 }

 .portfolio-col {
   background: var(--bg-light);
   border-radius: var(--radius-lg);
   padding: 32px 28px;
   height: 100%;
   border: 1.5px solid var(--silver-light);
 }

 .portfolio-col-icon {
   width: 52px;
   height: 52px;
   background: var(--charcoal);
   border-radius: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: white;
   font-size: 1.25rem;
   margin-bottom: 18px;
 }

 .portfolio-col h5 {
   font-size: 1rem;
   font-weight: 800;
   margin-bottom: 16px;
   color: var(--charcoal)
 }

 .portfolio-tags {
   display: flex;
   flex-wrap: wrap;
   gap: 8px
 }

 .portfolio-tags span {
   background: white;
   border: 1px solid var(--silver-light);
   border-radius: 50px;
   font-size: 0.78rem;
   font-weight: 700;
   padding: 6px 14px;
   color: var(--green-deep);
 }

 .portfolio-tags .ptag {
   background: white;
   border: 1px solid var(--silver-light);
   border-radius: 12px;
   padding: 12px 16px;
   flex: 1 1 220px;
 }

 .portfolio-tags .ptag strong {
   display: block;
   font-size: 0.85rem;
   font-weight: 800;
   color: var(--green-deep);
   margin-bottom: 4px
 }

 .portfolio-tags .ptag span {
   font-size: 0.78rem;
   color: var(--text-muted)
 }

 .value-chip {
   display: flex;
   align-items: center;
   gap: 12px;
   background: var(--bg-light);
   border: 1px solid var(--silver-light);
   border-radius: 14px;
   padding: 18px 20px;
   height: 100%;
 }

 .value-chip i {
   font-size: 1.2rem;
   color: var(--green-mid);
   flex-shrink: 0
 }

 .value-chip span {
   font-weight: 700;
   font-size: 0.88rem;
   color: var(--charcoal)
 }

 /* Color swatches — reuse .color-card from main stylesheet */
 .lam-card {
   height: 100px;
   border-radius: 14px;
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   font-weight: 700;
   font-size: 0.85rem;
   color: white;
   background: linear-gradient(135deg, #8a6a4a, #5c4330);
 }

 .lam-card.walnut {
   background: linear-gradient(135deg, #5c4330, #3a2a1c)
 }

 .lam-card.mahogany {
   background: linear-gradient(135deg, #6e2f24, #471d16)
 }

 /* Brand vs Manufacturing split */
 .split-card {
   border-radius: var(--radius-lg);
   padding: 36px 32px;
   height: 100%;
 }

 .split-card.provide {
   background: var(--charcoal);
   color: white;
 }

 .split-card.control {
   background: var(--bg-light);
   border: 1.5px solid var(--silver-light);
 }

 .split-card h5 {
   font-family: 'Manrope', sans-serif;
   font-weight: 800;
   font-size: 1.15rem;
   margin-bottom: 20px;
   display: flex;
   align-items: center;
   gap: 10px;
 }

 .split-card.control h5 {
   color: var(--charcoal)
 }

 .split-card ul {
   list-style: none;
   padding: 0;
   margin: 0
 }

 .split-card ul li {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 10px 0;
   font-weight: 600;
   font-size: 0.92rem;
   border-bottom: 1px solid rgba(255, 255, 255, 0.15);
 }

 .split-card.control ul li {
   border-bottom: 1px solid rgba(0, 0, 0, 0.06);
   color: var(--charcoal)
 }

 .split-card ul li:last-child {
   border-bottom: none
 }

 .split-card ul li i {
   color: var(--green-light)
 }

 .split-card.control ul li i {
   color: var(--green-mid)
 }

 .benefit-row {
   display: flex;
   align-items: flex-start;
   gap: 18px;
   padding: 22px 0;
   border-bottom: 1px solid var(--silver-light);
 }

 .benefit-row:last-child {
   border-bottom: none
 }

 .benefit-row-icon {
   width: 52px;
   height: 52px;
   flex-shrink: 0;
   background: var(--bg-section);
   border-radius: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--green-deep);
   font-size: 1.25rem;
 }

 .benefit-row h6 {
   font-weight: 800;
   font-size: 0.98rem;
   margin-bottom: 6px;
   color: var(--charcoal)
 }

 .benefit-row p {
   font-size: 0.88rem;
   color: var(--text-muted);
   margin: 0
 }

 .banner-section {
   margin-top: 80px;
       background: #1a5c38 !important;
 }
 .dealer-benefit > :nth-child(2) {
   color:#fff;
}

 /* ── DEALER FORM ON LIGHT BACKGROUND (e.g. Become a Dealer enquiry form) ── */
 .dealer-form.on-light {
   background: var(--white);
   border: 1.5px solid var(--silver-light);
   box-shadow: var(--shadow-md);
   backdrop-filter: none;
   text-align: center;
 }

 .dealer-form.on-light .row {
   justify-content: center;
 }

 .dealer-form.on-light label {
   color: var(--charcoal);
   text-align: center;
   width: 100%;
 }

 .dealer-form.on-light .form-control,
 .dealer-form.on-light .form-select,
 .dealer-form.on-light textarea {
   background: var(--bg-light);
   border: 1.5px solid var(--silver-light);
   color: var(--charcoal);
   text-align: center;
 }

 .dealer-form.on-light .form-control:focus,
 .dealer-form.on-light .form-select:focus {
   background: var(--white);
   border-color: var(--green-light);
   box-shadow: 0 0 0 3px var(--green-glow);
   color: var(--charcoal);
 }

 .dealer-form.on-light .form-control::placeholder {
   color: var(--text-muted);
 }

 .dealer-form.on-light .form-select option {
   background: var(--white);
   color: var(--charcoal);
 }
 .dealer-logo-img{
  filter: none !important;
 }