:root {
   --enwalk-green: #00965E;
   /* Matches Leaf Emblem in Logo */
   --enwalk-green-dark: #007348;
   /* Deeper green for hovers */
   --enwalk-gold: #DFB15B;
   /* Premium gold border & details */
   --enwalk-gold-dark: #C69B46;
   /* Richer gold for hover states */
   --ink: #131515;
   /* Dark background from Logo center */
   --muted: #5C6B63;
   /* Secondary greenish-grey text */
   --bg-soft: #F4F7F5;
   /* Soft off-white background */
   --bg-dark: #0D0F0E;
   /* Deeper charcoal black for dark panels */
   --card-border: #E8EDE9;
   /* Soft borders for light cards */
 }

 html,
 body {
   width: 100%;
   max-width: 100%;
   overflow-x: hidden;
   position: relative;
 }

 body {
   font-family: 'Inter', sans-serif;
   color: var(--ink);
   background-color: #ffffff;
 }

 /* ── DESKTOP UI SCALING ADJUSTMENT (~90% visual scale at 100% browser zoom) ── */
 @media (min-width: 992px) {
   html {
     font-size: 90%;
     /* Proportional ~10% scale reduction for rem units on desktop */
   }

   /* Bootstrap Container Scaling (~10% proportional width adjustment for desktop) */
   .container,
   .container-lg,
   .container-md,
   .container-sm {
     max-width: 864px;
   }
 }

 @media (min-width: 1200px) {

   .container,
   .container-xl,
   .container-lg,
   .container-md,
   .container-sm {
     max-width: 1026px;
   }
 }

 @media (min-width: 1400px) {

   .container,
   .container-xxl,
   .container-xl,
   .container-lg,
   .container-md,
   .container-sm {
     max-width: 1188px;
   }
 }

 @media (min-width: 992px) {

   /* Fixed pixel dimensions scaled down proportionally (~10%) for desktop viewports */
   .brand-logo {
     width: 135px;
   }

   .hero-product-img {
     max-height: 360px;
   }

   .hero-image-container {
     min-height: 342px;
   }

   .about-photo {
     /* min-height: 378px; */
   }

   .about-logo-overlay {
     width: 144px;
     height: 144px;
   }

   .product-thumb {
     height: 270px;
   }

   .gallery-item {
     height: 252px;
   }

   .team-img-wrapper {
     /* height: 270px;
      */
   }

   .main-img-container #mainProductImage {
     max-height: 378px;
   }

   .thumb-item {
     width: 72px;
     height: 72px;
   }

   .btn-card-action {
     height: 36px !important;
   }

   .icon-tile {
     width: 43px;
     height: 43px;
   }

   .contact-info-icon {
     width: 38px;
     height: 38px;
   }

   .avatar-circle {
     width: 40px;
     height: 40px;
   }

   .footer-logo-dot {
     width: 34px;
     height: 34px;
   }
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6,
 .brand-name {
   font-family: 'Poppins', sans-serif;
 }

 /* Eyebrow texts */
 .eyebrow {
   letter-spacing: 2.5px;
   font-size: .8rem;
   font-weight: 700;
   color: var(--enwalk-green);
   text-transform: uppercase;
 }

 /* BUTTONS styling */
 .btn-enwalk {
   background: var(--enwalk-green);
   color: #ffffff;
   border: 2px solid var(--enwalk-green);
   border-radius: 8px;
   font-weight: 600;
   padding: .7rem 1.6rem;
   transition: all 0.3s ease;
 }

 .btn-enwalk:hover {
   background: var(--enwalk-green-dark);
   border-color: var(--enwalk-green-dark);
   color: #ffffff;
   box-shadow: 0 5px 15px rgba(0, 150, 94, 0.3);
   transform: translateY(-2px);
 }

 .btn-outline-enwalk {
   border: 2px solid rgba(255, 255, 255, 0.3);
   border-radius: 8px;
   font-weight: 600;
   padding: .7rem 1.6rem;
   color: #ffffff;
   background: transparent;
   transition: all 0.3s ease;
 }

 .btn-outline-enwalk:hover {
   border-color: var(--enwalk-gold);
   color: var(--ink);
   background: var(--enwalk-gold);
   transform: translateY(-2px);
   box-shadow: 0 5px 15px rgba(223, 177, 91, 0.3);
 }

 .btn-outline-dark-enwalk {
   border: 2px solid var(--ink);
   border-radius: 8px;
   font-weight: 600;
   padding: .7rem 1.6rem;
   color: var(--ink);
   background: transparent;
   transition: all 0.3s ease;
 }

 .btn-outline-dark-enwalk:hover {
   background: var(--ink);
   color: #ffffff;
   transform: translateY(-2px);
 }

 /* NAVIGATION BAR styling */
 .navbar {
   background-color: var(--ink) !important;
   border-bottom: 3px solid var(--enwalk-gold);
   transition: all 0.4s ease;
   z-index: 1000;
 }

 /* Single horizontal line navbar container alignment */
 @media (min-width: 992px) {
   .navbar .container {
     max-width: 100% !important;
     padding-left: 2rem !important;
     padding-right: 2rem !important;
     display: flex !important;
     align-items: center !important;
     justify-content: space-between !important;
     flex-wrap: nowrap !important;
   }
 }

 @media (min-width: 1400px) {
   .navbar .container {
     max-width: 1320px !important;
     padding-left: 1rem !important;
     padding-right: 1rem !important;
   }
 }

 .navbar-collapse {
   align-items: center !important;
   justify-content: space-between !important;
 }

 @media (min-width: 992px) {
   .navbar-collapse {
     display: flex !important;
     flex-basis: auto !important;
     flex-grow: 1 !important;
   }

   .navbar-nav {
     display: flex !important;
     flex-direction: row !important;
     flex-wrap: nowrap !important;
     align-items: center !important;
     justify-content: center !important;
     white-space: nowrap !important;
     gap: 1.25rem !important;
   }
 }

 @media (min-width: 1200px) {
   .navbar-nav {
     gap: 1.75rem !important;
   }
 }

 .navbar-nav .nav-item {
   white-space: nowrap !important;
   flex-shrink: 0 !important;
 }

 .navbar.navbar-scrolled {
   background-color: rgba(19, 21, 21, 0.96) !important;
   backdrop-filter: blur(12px);
   padding-top: 0.6rem !important;
   padding-bottom: 0.6rem !important;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
 }

 .brand-logo {
   width: 150px;
   flex-shrink: 0;
 }

 .brand-name {
   font-size: 1.3rem;
   font-weight: 800;
   color: #ffffff;
   letter-spacing: 1px;
   line-height: 1;
 }

 .brand-tagline {
   font-size: 0.6rem;
   color: var(--enwalk-gold);
   letter-spacing: 2px;
   font-weight: 600;
 }

 .navbar-nav .nav-link {
   color: rgba(255, 255, 255, 0.85) !important;
   font-size: 0.95rem;
   font-weight: 600;
   transition: all 0.3s ease;
   position: relative;
   padding: 0.5rem 0;
   white-space: nowrap !important;
 }

 .navbar-nav .nav-link:hover,
 .navbar-nav .nav-link.active {
   color: var(--enwalk-gold) !important;
 }

 .navbar-nav .nav-link::after {
   content: '';
   position: absolute;
   width: 0;
   height: 2.5px;
   bottom: -2px;
   left: 0;
   background-color: var(--enwalk-green);
   transition: width 0.3s ease;
 }

 .navbar-nav .nav-link:hover::after,
 .navbar-nav .nav-link.active::after {
   width: 100%;
 }

 .btn-enwalk-navbar {
   background: var(--enwalk-green);
   color: #ffffff;
   border: 2px solid var(--enwalk-green);
   border-radius: 8px;
   font-weight: 600;
   padding: 0.6rem 1.4rem;
   font-size: 0.9rem;
   transition: all 0.3s ease;
 }

 .btn-enwalk-navbar:hover {
   background: transparent;
   color: var(--enwalk-gold);
   border-color: var(--enwalk-gold);
   box-shadow: 0 0 15px rgba(223, 177, 91, 0.4);
 }

 /* HERO SECTION styling */
 .hero {
   position: relative;
   padding: 6.5rem 0 5.5rem;
   color: #ffffff;
   overflow: hidden;
   background: #0d0f0e url('imgs/hero_banner_bg.jpg') no-repeat center center;
   background-size: cover;

 }

 .hero-bg-img {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
   z-index: 0;
   transition: opacity 0.5s ease;
 }

 .hero-bg-video {
   position: absolute;
   top: 50%;
   left: 50%;
   min-width: 100%;
   min-height: 100%;
   width: 100%;
   height: 100%;
   z-index: 0;
   transform: translate(-50%, -50%);
   object-fit: cover;
   pointer-events: none;
 }

 .hero-overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(180deg, rgba(13, 16, 15, 0.72) 0%, rgba(10, 12, 11, 0.86) 100%);
   z-index: 1;
   pointer-events: none;
 }

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

 .hero h1 {
   font-family: 'Lato', sans-serif !important;
   font-weight: 900;
   font-size: 3.4rem;
   line-height: 1.18;
   color: #ffffff;
   letter-spacing: -0.5px;
 }

 .hero h1 span.gold-highlight {
   font-family: 'Lato', sans-serif !important;
   font-weight: 900 !important;
   font-style: normal !important;
   color: var(--enwalk-gold) !important;
   background: none !important;
   -webkit-background-clip: unset !important;
   -webkit-text-fill-color: var(--enwalk-gold) !important;
 }

 .hero .lead-text {
   color: #c5d3cb;
   font-size: 1.15rem;
   font-weight: 500;
 }

 .badge-since-custom {
   background: rgba(255, 255, 255, 0.07);
   border: 1px solid rgba(255, 255, 255, 0.15);
   backdrop-filter: blur(10px);
   color: #ffffff;
   border-radius: 30px;
   padding: .4rem 1.2rem;
   font-size: .8rem;
   font-weight: 600;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
 }

 .stat-num-custom {
   font-weight: 800;
   font-size: 1.8rem;
   color: var(--enwalk-gold);
   line-height: 1.1;
 }

 .stat-label-custom {
   font-size: 0.75rem;
   color: #a3b8ad;
   text-transform: uppercase;
   letter-spacing: 1px;
   font-weight: 600;
 }

 /* Hero image container with glow */
 .hero-image-container {
   position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
   min-height: 380px;
 }

 .hero-glow-effect {
   position: absolute;
   width: 120%;
   height: 120%;
   background: radial-gradient(circle, rgba(0, 150, 94, 0.22) 0%, rgba(223, 177, 91, 0.05) 50%, rgba(0, 0, 0, 0) 70%);
   z-index: 0;
   pointer-events: none;
   animation: rotateGlow 12s linear infinite;
 }

 @keyframes rotateGlow {
   from {
     transform: rotate(0deg);
   }

   to {
     transform: rotate(360deg);
   }
 }

 .hero-product-img {
   position: relative;
   z-index: 1;
   border-radius: 20px;
   border: 3px solid rgba(223, 177, 91, 0.35);
   transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.5s ease;
   max-height: 400px;
   box-shadow: 0 20px 45px rgba(0, 0, 0, 0.5);
 }

 .hero-product-img:hover {
   transform: translateY(-8px) scale(1.02);
   box-shadow: 0 25px 50px rgba(0, 150, 94, 0.35);
   border-color: var(--enwalk-gold);
 }

 /* SECTION SETTINGS */
 section {
   padding: 5.5rem 0;
 }

 .section-soft {
   background-color: var(--bg-soft);
 }

 /* ABOUT PHOTO */
 .about-photo {
   background: linear-gradient(135deg, var(--ink), #18221c);
   border: 2px solid var(--enwalk-gold);
   border-radius: 18px;
   /* min-height: 420px; */
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
   overflow: hidden;
   box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
 }

 .about-photo::before {
   content: '';
   position: absolute;
   width: 140%;
   height: 140%;
   background: radial-gradient(circle, rgba(223, 177, 91, 0.08) 0%, rgba(0, 0, 0, 0) 70%);
   pointer-events: none;
 }

 .about-logo-overlay {
   width: 160px;
   height: 160px;
   border-radius: 50%;
   border: 4px solid var(--enwalk-gold);
   padding: 6px;
   background: var(--ink);
   box-shadow: 0 0 30px rgba(223, 177, 91, 0.25);
   animation: pulseGlow 4s infinite alternate;
 }

 .about-logo-overlay img {
   width: 100%;
   height: 100%;
   border-radius: 50%;
   object-fit: cover;
 }

 @keyframes pulseGlow {
   0% {
     box-shadow: 0 0 15px rgba(223, 177, 91, 0.25);
     transform: scale(1);
   }

   100% {
     box-shadow: 0 0 35px rgba(223, 177, 91, 0.45);
     transform: scale(1.03);
   }
 }

 .about-photo .since-pill {
   position: absolute;
   bottom: 24px;
   left: 50%;
   transform: translateX(-50%);
   background: var(--enwalk-green);
   color: #ffffff;
   padding: .6rem 1.4rem;
   border-radius: 30px;
   font-size: .85rem;
   font-weight: 600;
   display: flex;
   align-items: center;
   gap: .5rem;
   box-shadow: 0 8px 20px rgba(0, 150, 94, 0.35);
   border: 1px solid rgba(255, 255, 255, 0.15);
   white-space: nowrap;
 }

 .mission-box {
   background: rgba(0, 150, 94, 0.05);
   border-left: 4px solid var(--enwalk-green);
   border-radius: 10px;
   padding: 1.4rem;
 }

 .icon-tile {
   width: 48px;
   height: 48px;
   border-radius: 12px;
   background: rgba(0, 150, 94, 0.08);
   color: var(--enwalk-green);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.4rem;
   border: 1px solid rgba(0, 150, 94, 0.15);
   transition: all 0.3s ease;
 }

 /* CARDS & PILLARS */
 .reason-card,
 .pillar-card,
 .feature-card {
   background: #ffffff;
   border: 1px solid var(--card-border);
   border-radius: 14px;
   padding: 2rem 1.6rem;
   height: 100%;
   transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
 }

 .reason-card:hover,
 .pillar-card:hover {
   transform: translateY(-6px);
   box-shadow: 0 15px 30px rgba(0, 150, 94, 0.07);
   border-color: rgba(0, 150, 94, 0.2);
 }

 .reason-card:hover .icon-tile,
 .pillar-card:hover .icon-tile {
   background: var(--enwalk-green);
   color: #ffffff;
   border-color: var(--enwalk-green);
   transform: rotate(360deg);
 }

 /* PRODUCTS SECTION */
 .nav-pills-custom {
   border-bottom: 1px solid var(--card-border);
   padding-bottom: 1rem;
 }

 .nav-pills-custom .nav-link {
   border-radius: 30px;
   padding: .6rem 1.4rem;
   font-weight: 600;
   color: var(--ink);
   background: #ffffff;
   border: 1px solid var(--card-border);
   transition: all 0.3s ease;
 }

 .nav-pills-custom .nav-link.active {
   background: var(--enwalk-green);
   color: #ffffff;
   border-color: var(--enwalk-green);
   box-shadow: 0 5px 15px rgba(0, 150, 94, 0.25);
 }

 .nav-pills-custom .nav-link:hover:not(.active) {
   border-color: var(--enwalk-green);
   color: var(--enwalk-green);
 }

 .product-card {
   border: 1px solid var(--card-border);
   border-radius: 16px;
   overflow: hidden;
   background: #ffffff;
   height: 100%;
   transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
 }

 .product-card:hover {
   transform: translateY(-8px);
   box-shadow: 0 20px 40px rgba(0, 150, 94, 0.1);
   border-color: rgba(0, 150, 94, 0.25);
 }

 .product-thumb {
   background: #ffffff;
   height: 300px;
   padding: 16px;
   box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
   border-bottom: 1px solid var(--card-border);
   transition: background-color 0.3s ease;
   overflow: hidden;
 }

 @media (max-width: 991px) {
   .product-thumb {
     height: 250px;
     padding: 14px;
   }
 }

 @media (max-width: 575px) {
   .product-thumb {
     height: 230px;
     padding: 12px;
   }
 }

 .product-card:hover .product-thumb {
   background: #ffffff;
 }

 .base-badge {
   display: inline-block;
   background: var(--enwalk-gold);
   color: var(--ink);
   font-size: .7rem;
   font-weight: 700;
   padding: .25rem .75rem;
   border-radius: 20px;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
 }

 .rating {
   font-size: .8rem;
   font-weight: 600;
   color: var(--muted);
 }

 .rating i {
   color: var(--enwalk-gold);
 }

 /* TESTIMONIALS SECTION */
 .testimonial-card {
   background: #ffffff;
   border-radius: 16px;
   padding: 2rem;
   border: 1px solid var(--card-border);
   height: 100%;
   transition: all 0.3s ease;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
 }

 .testimonial-card:hover {
   box-shadow: 0 15px 30px rgba(0, 0, 0, 0.05);
   border-color: var(--enwalk-green);
 }

 .avatar-circle {
   width: 44px;
   height: 44px;
   border-radius: 50%;
   background: rgba(0, 150, 94, 0.08);
   color: var(--enwalk-green);
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 700;
   border: 1px solid rgba(0, 150, 94, 0.15);
 }

 /* FORMS & INPUTS */
 .form-control {
   border-radius: 8px;
   border: 1.5px solid #dce4e0;
   padding: .7rem 1rem;
   transition: all 0.3s ease;
 }

 .form-control:focus {
   border-color: var(--enwalk-green);
   box-shadow: 0 0 0 0.25rem rgba(0, 150, 94, 0.15);
 }

 .contact-info-icon {
   width: 42px;
   height: 42px;
   border-radius: 10px;
   background: rgba(0, 150, 94, 0.08);
   color: var(--enwalk-green);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   border: 1px solid rgba(0, 150, 94, 0.15);
 }

 .map-box {
   border-radius: 18px;
   overflow: hidden;
   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
   border: 1px solid var(--card-border);
 }

 /* FOOTER */
 footer {
   background: var(--bg-dark);
   color: #a4b3ab;
   border-top: 3px solid var(--enwalk-gold);
 }

 footer h6 {
   color: #ffffff;
   font-weight: 700;
   position: relative;
   padding-bottom: 10px;
   margin-bottom: 1.5rem;
 }

 footer h6::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   width: 35px;
   height: 2.5px;
   background-color: var(--enwalk-gold);
 }

 footer a {
   color: #a4b3ab;
   text-decoration: none;
   font-size: .9rem;
   transition: all 0.3s ease;
 }

 footer a:hover {
   color: var(--enwalk-gold);
   padding-left: 4px;
 }

 .footer-logo-dot {
   width: 38px;
   height: 38px;
   border-radius: 8px;
   background: var(--enwalk-green);
   display: flex;
   align-items: center;
   justify-content: center;
   color: #ffffff;
   transition: all 0.3s ease;
 }

 .footer-logo-dot:hover {
   background: var(--enwalk-gold);
   color: var(--ink);
   transform: translateY(-3px);
 }

 .btn-subscribe {
   background: var(--enwalk-gold);
   color: var(--ink);
   font-weight: 700;
   border-radius: 8px;
   border: 2px solid var(--enwalk-gold);
   padding: .6rem 1.4rem;
   transition: all 0.3s ease;
 }

 .btn-subscribe:hover {
   background: transparent;
   color: var(--enwalk-gold);
   border-color: var(--enwalk-gold);
   box-shadow: 0 0 12px rgba(223, 177, 91, 0.4);
 }

 /* ── MARQUEE ─────────────────────────────── */
 .marquee-wrap {
   background: var(--enwalk-green);
   padding: 1rem 0;
   overflow: hidden;
 }

 .marquee-track {
   display: flex;
   gap: 3rem;
   width: max-content;
   animation: marqueeScroll 22s linear infinite;
 }

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

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

 .marquee-item {
   display: flex;
   align-items: center;
   gap: .75rem;
   font-family: 'Syne', sans-serif;
   font-size: .85rem;
   font-weight: 700;
   color: rgba(255, 255, 255, .9);
   white-space: nowrap;
 }

 .marquee-dot {
   width: 5px;
   height: 5px;
   border-radius: 50%;
   background: rgba(255, 255, 255, .5);
 }

 /* ── HERO ENTRANCE ANIMATION ─────────────────────────────── */
 @keyframes ewFadeInUp {
   from {
     opacity: 0;
     transform: translateY(32px);
   }

   to {
     opacity: 1;
     transform: translateY(0);
   }
 }

 @keyframes ewPopIn {
   from {
     opacity: 0;
     transform: scale(.7);
   }

   to {
     opacity: 1;
     transform: scale(1);
   }
 }

 @keyframes ewFloatY {

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

   50% {
     transform: translateY(-14px);
   }
 }

 @keyframes ewBadgePulse {

   0%,
   100% {
     box-shadow: 0 4px 12px rgba(0, 0, 0, .2), 0 0 0 0 rgba(223, 177, 91, .4);
   }

   50% {
     box-shadow: 0 4px 12px rgba(0, 0, 0, .2), 0 0 0 9px rgba(223, 177, 91, 0);
   }
 }

 .hero-content .badge-since-custom {
   animation: ewFadeInUp .8s ease .1s both, ewBadgePulse 2.8s ease-in-out 1.1s infinite;
 }

 .hero-content h1 {
   animation: ewFadeInUp .9s ease .22s both;
 }

 .hero-content p.fs-5 {
   animation: ewFadeInUp .9s ease .36s both;
 }

 .hero-content .lead-text {
   animation: ewFadeInUp .9s ease .5s both;
 }

 .hero-content .col-lg-6:first-child .d-flex.flex-wrap.gap-3.my-4 {
   animation: ewFadeInUp .9s ease .64s both;
 }

 .hero-content .d-flex.gap-4.mt-5.flex-wrap>div {
   opacity: 0;
   animation: ewPopIn .6s ease forwards;
 }

 .hero-content .d-flex.gap-4.mt-5.flex-wrap>div:nth-child(1) {
   animation-delay: .8s;
 }

 .hero-content .d-flex.gap-4.mt-5.flex-wrap>div:nth-child(2) {
   animation-delay: .92s;
 }

 .hero-content .d-flex.gap-4.mt-5.flex-wrap>div:nth-child(3) {
   animation-delay: 1.04s;
 }

 .hero-content .d-flex.gap-4.mt-5.flex-wrap>div:nth-child(4) {
   animation-delay: 1.16s;
 }

 .hero-image-container {
   animation: ewFadeInUp 1s ease .3s both;
 }

 .hero-product-img {
   animation: ewFloatY 4.4s ease-in-out infinite;
 }

 .hero-product-img:hover {
   animation-play-state: paused;
 }

 /* Subtle lift for nav-pills and icon tiles used elsewhere */
 .nav-pills-custom .nav-link {
   transform: translateY(0);
 }

 .nav-pills-custom .nav-link:hover:not(.active) {
   transform: translateY(-2px);
 }

 @media (prefers-reduced-motion: reduce) {

   *,
   *::before,
   *::after {
     animation-duration: .001ms !important;
     animation-iteration-count: 1 !important;
     transition-duration: .001ms !important;
   }
 }

 /* ── SUBPAGES COMMON STYLING ─────────────────────────────── */

 /* Breadcrumb Styling */
 .breadcrumb-section {
   padding: 1.5rem 0;
   background: var(--bg-soft);
   border-bottom: 1px solid var(--card-border);
 }

 .breadcrumb {
   margin-bottom: 0;
   display: flex;
   flex-wrap: wrap;
   padding: 0;
   list-style: none;
   font-size: 0.9rem;
   font-weight: 500;
 }

 .breadcrumb-item+.breadcrumb-item {
   padding-left: 0.5rem;
 }

 .breadcrumb-item+.breadcrumb-item::before {
   float: left;
   padding-right: 0.5rem;
   color: var(--muted);
   content: var(--bs-breadcrumb-divider, "/");
 }

 .breadcrumb-item a {
   color: var(--enwalk-green);
   text-decoration: none;
   transition: color 0.2s ease;
 }

 .breadcrumb-item a:hover {
   color: var(--enwalk-green-dark);
 }

 .breadcrumb-item.active {
   color: var(--muted);
 }

 /* Hero Subpage Styling */
 .hero-subpage {
   position: relative;
   padding: 6.5rem 0 5.5rem;
   background: linear-gradient(180deg, rgba(13, 16, 15, 0.82) 0%, rgba(10, 12, 11, 0.92) 100%), url('imgs/hero_banner_bg.jpg') no-repeat center center / cover;
   color: #ffffff;
   border-bottom: 3px solid var(--enwalk-gold);
   text-align: center;
   overflow: hidden;
   border: 5px solid var(--enwalk-gold);
 }

 .hero-subpage h1 {
   font-size: 3rem;
   font-weight: 800;
   margin-bottom: 1rem;
 }

 .hero-subpage p {
   color: #c5d3cb;
   max-width: 750px;
   margin: 0 auto;
   font-size: 1.15rem;
   font-weight: 500;
 }

 .hero-subpage-glow {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 60%;
   height: 120%;
   background: radial-gradient(circle, rgba(0, 150, 94, 0.12) 0%, rgba(223, 177, 91, 0.03) 50%, rgba(0, 0, 0, 0) 70%);
   z-index: 0;
   pointer-events: none;
 }

 /* WHY ENWALK IMAGE MARQUEE SLIDER & CAROUSEL CONTROLS */
 .why-enwalk-slider-container {
   position: relative;
   width: 100%;
   padding: 0 2.5rem;
 }

 /* EXISTING CONTINUOUS IMAGE MARQUEE SCROLLER */
 .img-marquee-wrapper {
   position: relative;
   width: 100%;
   overflow: hidden;
   border-radius: 18px;
   background: rgba(0, 0, 0, 0.02);
   padding: 1.25rem 0;
   mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
   -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
 }

 .img-marquee-track {
   display: flex;
   width: max-content;
   gap: 1.5rem;
   animation: imgMarqueeContinuous 26s linear infinite;
   will-change: transform;
 }

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

 @keyframes imgMarqueeContinuous {
   0% {
     transform: translateX(0);
   }

   100% {
     transform: translateX(calc(-50% - 0.75rem));
   }
 }

 .img-marquee-item {
   flex: 0 0 auto;
   width: 240px;
   height: 160px;
   border-radius: 12px;
   overflow: hidden;
   border: 2px solid rgba(223, 177, 91, 0.3);
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
   background: var(--ink);
   position: relative;
   transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.35s ease;
   cursor: pointer;
 }

 .img-marquee-item:hover {
   transform: translateY(-4px) scale(1.02);
   box-shadow: 0 12px 25px rgba(0, 150, 94, 0.2);
   border-color: var(--enwalk-gold);
   z-index: 5;
 }

 .img-marquee-img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
   transition: transform 0.4s ease;
   display: block;
 }

 .img-marquee-item:hover .img-marquee-img {
   transform: scale(1.08);
 }

 .img-marquee-caption {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   padding: 0.45rem 0.65rem;
   background: linear-gradient(0deg, rgba(13, 16, 15, 0.88) 0%, rgba(13, 16, 15, 0) 100%);
   color: #ffffff;
   font-size: 0.75rem;
   font-weight: 600;
   text-align: center;
   letter-spacing: 0.3px;
   pointer-events: none;
 }

 /* NEW INTERACTIVE IMAGE SLIDER / CAROUSEL (LARGE FEATURE) */
 .why-enwalk-carousel-wrapper {
   position: relative;
   width: 100%;
   padding: 0;
   margin-top: 2rem;
 }

 .new-slider-viewport {
   width: 100%;
   overflow: hidden;
   border-radius: 18px;
   padding: 0.5rem 0;
 }

 .new-slider-track {
   display: flex;
   gap: 1.5rem;
   transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
   will-change: transform;
 }

 .new-slider-card {
   flex: 0 0 calc(33.333% - 1rem);
   height: 350px;
   border-radius: 18px;
   overflow: hidden;
   position: relative;
   border: 2px solid rgba(223, 177, 91, 0.4);
   box-shadow: 0 14px 35px rgba(0, 0, 0, 0.15);
   background: var(--ink);
   transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
   cursor: pointer;
 }

 .new-slider-card:hover {
   transform: translateY(-6px) scale(1.03);
   box-shadow: 0 16px 35px rgba(0, 150, 94, 0.25);
   border-color: var(--enwalk-gold);
   z-index: 5;
 }

 .new-slider-img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
   transition: transform 0.4s ease;
   display: block;
 }

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

 .new-slider-caption {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   padding: 0.6rem 0.8rem;
   background: linear-gradient(0deg, rgba(13, 16, 15, 0.9) 0%, rgba(13, 16, 15, 0) 100%);
   color: #ffffff;
   font-size: 0.82rem;
   font-weight: 600;
   text-align: center;
   letter-spacing: 0.3px;
   pointer-events: none;
 }

 .new-slider-dots {
   display: flex;
   justify-content: center;
   gap: 0.5rem;
   margin-top: 1.25rem;
 }

 .new-slider-dot {
   width: 10px;
   height: 10px;
   border-radius: 20px;
   background: rgba(0, 150, 94, 0.3);
   border: none;
   padding: 0;
   cursor: pointer;
   transition: all 0.35s ease;
 }

 .new-slider-dot.active {
   width: 28px;
   background: var(--enwalk-gold);
   box-shadow: 0 0 12px rgba(223, 177, 91, 0.5);
 }

 .new-slider-dot:hover {
   background: var(--enwalk-green);
 }

 /* Responsive Adjustments */
 @media (max-width: 991px) {
   .why-enwalk-carousel-wrapper {
     padding: 0 1.5rem;
   }

   .img-marquee-item {
     width: 200px;
     height: 135px;
   }

   .img-marquee-track {
     gap: 1.2rem;
     animation-duration: 22s;
   }

   .new-slider-card {
     flex: 0 0 calc(50% - 0.75rem);
     height: 290px;
   }

   @keyframes imgMarqueeContinuous {
     0% {
       transform: translateX(0);
     }

     100% {
       transform: translateX(calc(-50% - 0.6rem));
     }
   }
 }

 @media (max-width: 767px) {
   .new-slider-card {
     flex: 0 0 100%;
     height: 260px;
   }
 }

 @media (max-width: 576px) {
   .why-enwalk-carousel-wrapper {
     padding: 0 1rem;
   }

   .img-marquee-item {
     width: 155px;
     height: 105px;
     border-radius: 10px;
   }

   .img-marquee-track {
     gap: 0.85rem;
     animation-duration: 18s;
   }

   .new-slider-card {
     flex: 0 0 100%;
     height: 250px;
   }

   .new-slider-arrow {
     width: 34px;
     height: 34px;
     font-size: 0.9rem;
     top: calc(50% - 17px);
   }

   .new-slider-dot {
     width: 8px;
     height: 8px;
   }

   .new-slider-dot.active {
     width: 22px;
   }

   @keyframes imgMarqueeContinuous {
     0% {
       transform: translateX(0);
     }

     100% {
       transform: translateX(calc(-50% - 0.425rem));
     }
   }
 }

 /* Timeline Styling (About Page) */
 .timeline {
   position: relative;
   max-width: 900px;
   margin: 0 auto;
   padding: 2rem 0;
 }

 .timeline::after {
   content: '';
   position: absolute;
   width: 4px;
   background-color: var(--card-border);
   top: 0;
   bottom: 0;
   left: 50%;
   margin-left: -2px;
 }

 .timeline-container {
   padding: 10px 40px;
   position: relative;
   background-color: inherit;
   width: 50%;
 }

 .timeline-container::after {
   content: '';
   position: absolute;
   width: 20px;
   height: 20px;
   right: -10px;
   background-color: #ffffff;
   border: 4px solid var(--enwalk-green);
   top: 15px;
   border-radius: 50%;
   z-index: 1;
   transition: all 0.3s ease;
 }

 .left-timeline {
   left: 0;
 }

 .right-timeline {
   left: 50%;
 }

 .right-timeline::after {
   left: -10px;
 }

 .timeline-content {
   padding: 1.5rem;
   background-color: #ffffff;
   position: relative;
   border-radius: 12px;
   border: 1px solid var(--card-border);
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
   transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
 }

 .timeline-container:hover .timeline-content {
   transform: translateY(-3px);
   box-shadow: 0 12px 25px rgba(0, 150, 94, 0.08);
   border-color: rgba(0, 150, 94, 0.2);
 }

 .timeline-container:hover::after {
   background-color: var(--enwalk-gold);
   border-color: var(--enwalk-gold);
 }

 .timeline-date {
   font-weight: 800;
   color: var(--enwalk-green);
   font-size: 1.25rem;
   margin-bottom: 0.5rem;
   font-family: 'Poppins', sans-serif;
 }

 @media (max-width: 767.98px) {
   .timeline::after {
     left: 31px;
   }

   .timeline-container {
     width: 100%;
     padding-left: 70px;
     padding-right: 25px;
   }

   .timeline-container::after {
     left: 21px;
     right: auto;
   }

   .right-timeline {
     left: 0%;
   }
 }

 /* Technical Specification Table */
 .spec-table-container {
   overflow-x: auto;
   border-radius: 12px;
   border: 1px solid var(--card-border);
   background: #ffffff;
 }

 .spec-table {
   width: 100%;
   border-collapse: collapse;
   margin-bottom: 0;
 }

 .spec-table th {
   background-color: var(--ink);
   color: #ffffff;
   padding: 1rem 1.2rem;
   font-weight: 600;
   font-size: 0.9rem;
   border-bottom: 3px solid var(--enwalk-gold);
   text-transform: uppercase;
   letter-spacing: 0.5px;
   font-family: 'Poppins', sans-serif;
 }

 .spec-table td {
   padding: 1rem 1.2rem;
   border-bottom: 1px solid var(--card-border);
   font-size: 0.92rem;
   color: var(--ink);
 }

 .spec-table tr:last-child td {
   border-bottom: none;
 }

 .spec-table tr:nth-child(even) {
   background-color: var(--bg-soft);
 }

 .spec-table tr:hover {
   background-color: rgba(0, 150, 94, 0.03);
 }

 /* Accordion FAQ Styling */
 .faq-accordion .accordion-item {
   border: 1px solid var(--card-border);
   border-radius: 12px !important;
   overflow: hidden;
   margin-bottom: 1.2rem;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.01);
   transition: all 0.3s ease;
 }

 .faq-accordion .accordion-item:hover {
   border-color: rgba(0, 150, 94, 0.2);
   box-shadow: 0 8px 20px rgba(0, 150, 94, 0.04);
 }

 .faq-accordion .accordion-button {
   font-weight: 600;
   color: var(--ink);
   padding: 1.3rem 1.6rem;
   background-color: #ffffff;
   font-family: 'Poppins', sans-serif;
   transition: all 0.3s ease;
 }

 .faq-accordion .accordion-button:not(.collapsed) {
   color: var(--enwalk-green);
   background-color: rgba(0, 150, 94, 0.02);
   box-shadow: none;
 }

 .faq-accordion .accordion-button::after {
   transition: transform 0.2s ease;
 }

 .faq-accordion .accordion-button:focus {
   box-shadow: none;
   border-color: var(--card-border);
 }

 .faq-accordion .accordion-body {
   padding: 1.3rem 1.6rem;
   font-size: 0.95rem;
   color: var(--muted);
   line-height: 1.65;
   background-color: #ffffff;
   border-top: 1px solid var(--card-border);
 }

 /* Gallery Styling */
 .gallery-item {
   position: relative;
   border-radius: 14px;
   overflow: hidden;
   border: 1px solid var(--card-border);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
   transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
   height: 280px;
 }

 .gallery-item img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: all 0.6s ease;
 }

 .gallery-overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(19, 21, 21, 0.92) 100%);
   opacity: 0;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   padding: 1.5rem;
   transition: all 0.4s ease;
   z-index: 2;
 }

 .gallery-overlay h6 {
   color: #ffffff;
   margin-bottom: 0.25rem;
   font-weight: 700;
   transform: translateY(15px);
   transition: all 0.4s ease;
   font-size: 1.05rem;
 }

 .gallery-overlay p {
   color: var(--enwalk-gold);
   margin-bottom: 0;
   font-size: 0.8rem;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 1px;
   transform: translateY(15px);
   transition: all 0.4s ease;
   transition-delay: 0.05s;
 }

 .gallery-item:hover {
   transform: translateY(-5px);
   box-shadow: 0 15px 30px rgba(0, 150, 94, 0.15);
   border-color: var(--enwalk-green);
 }

 .gallery-item:hover img {
   transform: scale(1.08);
 }

 .gallery-item:hover .gallery-overlay {
   opacity: 1;
 }

 .gallery-item:hover .gallery-overlay h6,
 .gallery-item:hover .gallery-overlay p {
   transform: translateY(0);
 }

 /* Leadership Team Card */
 .team-card {
   background: #ffffff;
   border: 1px solid var(--card-border);
   border-radius: 16px;
   overflow: hidden;
   transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
   height: 100%;
 }

 .team-img-wrapper {
   /* height: 300px; */
   background: var(--bg-soft);
   overflow: hidden;
   position: relative;
 }

 .team-img-wrapper img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 0.4s ease;
 }

 .team-card:hover {
   transform: translateY(-6px);
   box-shadow: 0 15px 30px rgba(0, 150, 94, 0.08);
   border-color: rgba(0, 150, 94, 0.2);
 }

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

 .team-socials {
   position: absolute;
   bottom: 15px;
   left: 50%;
   transform: translateX(-50%) translateY(15px);
   background: rgba(19, 21, 21, 0.85);
   backdrop-filter: blur(8px);
   padding: 0.5rem 1.2rem;
   border-radius: 30px;
   display: flex;
   gap: 1rem;
   opacity: 0;
   transition: all 0.3s ease;
 }

 .team-card:hover .team-socials {
   opacity: 1;
   transform: translateX(-50%) translateY(0);
 }

 .team-socials a {
   color: #ffffff;
   font-size: 0.95rem;
   transition: color 0.2s ease;
 }

 .team-socials a:hover {
   color: var(--enwalk-gold);
 }

 /* Feature Badge details */
 .feature-badge-list {
   display: flex;
   flex-direction: column;
   gap: 0.8rem;
 }

 .feature-badge-item {
   display: flex;
   align-items: center;
   gap: 0.8rem;
   font-size: 0.95rem;
   font-weight: 600;
 }

 .feature-badge-item i {
   color: var(--enwalk-green);
   font-size: 1.2rem;
 }

 /* Dynamic Product Gallery & Details Styling */
 .main-img-container {
   background: #f7fdfd;
   border: 1px solid var(--card-border);
   border-radius: 12px;
   overflow: hidden;
   position: relative;
   box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
 }

 .main-img-container #mainProductImage {
   max-height: 420px;
   width: 100%;
   object-fit: contain;
   transition: opacity 0.2s ease, transform 0.3s ease;
   cursor: zoom-in;
 }

 .main-img-container:hover #mainProductImage {
   transform: scale(1.03);
 }

 .gallery-nav-btn {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   background: rgba(19, 21, 21, 0.7);
   color: #ffffff;
   border: none;
   border-radius: 50%;
   width: 40px;
   height: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   z-index: 5;
   transition: all 0.3s ease;
 }

 .gallery-nav-btn:hover {
   background: var(--enwalk-green);
   color: #ffffff;
   transform: translateY(-50%) scale(1.1);
 }

 .gallery-nav-btn.prev-btn {
   left: 15px;
 }

 .gallery-nav-btn.next-btn {
   right: 15px;
 }

 .thumb-item {
   width: 80px;
   height: 80px;
   border: 2px solid var(--card-border);
   border-radius: 8px;
   padding: 4px;
   cursor: pointer;
   transition: all 0.2s ease;
   background: #ffffff;
 }

 .thumb-item img {
   width: 100%;
   height: 100%;
   object-fit: contain;
 }

 .thumb-item:hover,
 .thumb-item.active {
   border-color: var(--enwalk-green);
   box-shadow: 0 0 10px rgba(0, 150, 94, 0.3);
   transform: translateY(-2px);
 }

 .thumb-item.thumb-video {
   position: relative;
   background: #181818;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .thumb-item.thumb-video .video-badge {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   color: #ffffff;
   background: rgba(220, 53, 69, 0.9);
   width: 28px;
   height: 28px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 0.85rem;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
   pointer-events: none;
 }

 .product-card-img {
   width: 100%;
   height: 100%;
   max-height: 100%;
   max-width: 100%;
   object-fit: contain;
   object-position: center;
   transition: transform 0.4s ease;
 }

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

 .hover-green:hover {
   color: var(--enwalk-green) !important;
 }

 /* Permanent Visible Product Card Buttons with Equal Height & Alignment */
 .card-action-btns {
   display: flex !important;
   gap: 0.5rem !important;
   margin-top: auto !important;
   padding-top: 1rem !important;
   margin-bottom: 0 !important;
   width: 100% !important;
 }

 .btn-card-action {
   flex: 1 1 50% !important;
   height: 40px !important;
   display: inline-flex !important;
   align-items: center !important;
   justify-content: center !important;
   font-size: 0.82rem !important;
   font-weight: 600 !important;
   padding: 0 0.4rem !important;
   border-radius: 8px !important;
   text-decoration: none !important;
   margin-bottom: 0 !important;
   line-height: 1 !important;
   opacity: 1 !important;
   visibility: visible !important;
   transition: all 0.25s ease !important;
 }

 .btn-card-details {
   border: 1.5px solid var(--ink) !important;
   color: var(--ink) !important;
   background: transparent !important;
 }

 .btn-card-details:hover {
   background: var(--ink) !important;
   color: #ffffff !important;
   transform: translateY(-2px) !important;
 }

 .btn-card-enquire,
 .btn-card-buy {
   border: 1.5px solid var(--enwalk-green) !important;
   color: #ffffff !important;
   background: var(--enwalk-green) !important;
 }

 .btn-card-enquire:hover,
 .btn-card-buy:hover {
   background: var(--enwalk-green-dark) !important;
   border-color: var(--enwalk-green-dark) !important;
   color: #ffffff !important;
   transform: translateY(-2px) !important;
   box-shadow: 0 4px 12px rgba(0, 150, 94, 0.25) !important;
 }

 /* Quality Assurance & Section Spacing Adjustments */
 .specs-qa-section {
   margin-top: 2.5rem !important;
   padding-top: 1rem !important;
 }

 .qa-card-box {
   margin-bottom: 0 !important;
 }

 /* ── CART SYSTEM STYLES ── */
 .cart-nav-btn {
   border-radius: 50px !important;
   padding: 0.45rem 0.9rem !important;
   display: inline-flex !important;
   align-items: center !important;
   justify-content: center !important;
   transition: all 0.3s ease !important;
 }

 .cart-nav-btn:hover {
   background-color: rgba(255, 255, 255, 0.15) !important;
   transform: translateY(-1px) !important;
 }

 .cart-badge {
   font-size: 0.72rem !important;
   padding: 0.25em 0.55em !important;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
 }

 .btn-outline-gold {
   border: 1px solid var(--enwalk-gold) !important;
   color: var(--enwalk-gold) !important;
 }

 .btn-outline-gold:hover {
   background-color: var(--enwalk-gold) !important;
   color: #131515 !important;
 }

 .text-gold {
   color: var(--enwalk-gold) !important;
 }

 .qty-control-group .btn {
   padding: 0.2rem 0.5rem !important;
 }

 .qty-control-group .qty-input {
   font-size: 0.9rem !important;
 }

 .hover-green:hover {
   color: var(--enwalk-green) !important;
 }

 /* ── MOBILE OVERFLOW PREVENTIONS ── */
 section {
   max-width: 100%;
   overflow-x: hidden;
 }

 @media (max-width: 575.98px) {
   .nav-pills-custom .nav-link {
     padding: 0.45rem 0.85rem !important;
     font-size: 0.82rem !important;
   }

   .brand-logo {
     max-width: 125px !important;
     height: auto !important;
   }

   .hero h1 {
     font-size: 2.2rem !important;
   }

   .icon-tile+div {
     min-width: 0;
     word-break: break-word;
   }

   .row {
     margin-left: 0 !important;
     margin-right: 0 !important;
   }
 }

/* ── PRINT STYLES FOR TAX INVOICE ── */
@media print {
  body * {
    visibility: hidden !important;
  }
  #printableInvoiceArea, #printableInvoiceArea * {
    visibility: visible !important;
  }
  #printableInvoiceArea {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 20px !important;
    background: #ffffff !important;
    color: #000000 !important;
  }
  .no-print {
    display: none !important;
  }
}