/* =========================================================
   NANDIKOTI GLOBAL THEME SYSTEM
========================================================= */

:root {/* =====================================================
       BRAND COLORS
    ===================================================== */
  

  --primary: #f8c68b;
  --primary-hover: #f4b267;

  --secondary: #a9ddb0;
  --secondary-hover: #7ccb8a;

  --accent: #c9781b;

  --dark-green: #4d8b5a;

  /* =====================================================
       BACKGROUNDS
    ===================================================== */

  --bg-primary: #fff4e8;
  --bg-secondary: #eaffee;

  --white: #ffffff;

  /* =====================================================
       TYPOGRAPHY
    ===================================================== */

  --heading: #3a3a3a;
  --text: #747474;

  /* =====================================================
       BORDER + SHADOW
    ===================================================== */

  --border: #ececec;

  --shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

/* =========================================================
   BODY
========================================================= */

body {
  background: var(--bg-primary);
  color: var(--text);

  font-family: 'Poppins', sans-serif;
}

/* =========================================================
   TYPOGRAPHY
========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--heading);
}

p,
span,
li,
a {
  color: var(--text);
}

/* =========================================================
   PRIMARY BUTTON
========================================================= */

.btn-primary,
.theme-btn {
  background: #fd7e14 !important;
  border: 2px solid #fd7e14 !important;
  font-weight: 700 !important;
  transition: all 0.3s ease !important;
}

.btn-primary:hover,
.theme-btn:hover {
  background: #ffffff !important;
  border-color: #fd7e14 !important;
  box-shadow: 0 4px 15px rgba(253, 126, 20, 0.3) !important;
}

/* =========================================================
   SECONDARY BUTTON
========================================================= */

.btn-secondary {
  background: var(--secondary) !important;
  border-color: var(--secondary) !important;

  color: var(--heading) !important;
}

.btn-secondary:hover {
  background: var(--secondary-hover) !important;
  border-color: var(--secondary-hover) !important;

  color: white !important;
}

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

/* .header a,
.navbar a{

    color:var(--heading) !important;
} */

/* .header a:hover,
.navbar a:hover,F
.header .active{

    color:var(--accent) !important;
} */

/* =========================================================
   SECTION COLORS
========================================================= */

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

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

/* =========================================================
   CARDS
========================================================= */

.card,
.service-card,
.gallery-card,
.about-card {
  background: white;

  border: 1px solid var(--border);

  box-shadow: var(--shadow);

  transition: 0.3s ease;
}

.card:hover,
.service-card:hover,
.gallery-card:hover {
  transform: translateY(-5px);
}

/* =========================================================
   IMAGES FIX
========================================================= */

img {
  max-width: 100%;
  height: auto;
}

.gallery img {
  width: 100%;
  height: 320px;

  object-fit: cover;
}

.about-section img {
  width: 100%;
  height: auto;

  object-fit: contain;
}

/* =========================================================
   FOOTER
========================================================= */

footer,
.footer {
  background: var(--dark-green);
}

footer h1,
footer h2,
footer h3,
footer h4,
footer h5,
footer h6,
footer p,
footer a {
  color: white !important;
}

footer a:hover {
  color: var(--primary) !important;
}

/* =========================================================
   FORM FIELDS
========================================================= */

.form-control {
  border: 1px solid var(--border);
}

.form-control:focus {
  border-color: var(--primary-hover);

  box-shadow: none;
}

/* =========================================================
   CUSTOM HELPERS
========================================================= */

.text-theme {
  color: var(--accent) !important;
}

.bg-theme {
  background: var(--primary) !important;
}

.bg-soft {
  background: var(--bg-secondary) !important;
}
/* =========================================================
   SECONDARY WHITE BUTTON OVERRIDES (OUTLINE STYLING)
   ========================================================= */
.btn-white {
  background-color: #ffffff !important;
  border: 2px solid var(--dark-green) !important;
  color: var(--dark-green) !important;
  font-weight: 700 !important;
  transition: all 0.3s ease !important;
  border-radius: 6px !important;
}

.btn-white:hover {
  background-color: var(--dark-green) !important;
  color: #ffffff !important;
  border-color: var(--dark-green) !important;
  box-shadow: 0 4px 15px rgba(77, 139, 90, 0.3) !important;
}

/* =========================================================
   FAQ ACCORDION PREMIUM STYLING
   ========================================================= */
#accordion .card {
  border: 1px solid var(--border) !important;
  margin-bottom: 12px !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow) !important;
  overflow: hidden !important;
  background: #ffffff !important;
}

#accordion .card-header {
  background: #ffffff !important;
  border-bottom: none !important;
  padding: 0 !important;
}

#accordion .card-header button {
  background: #ffffff !important;
  border: none !important;
  color: var(--heading) !important;
  padding: 20px 24px !important;
  text-align: left !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  box-shadow: none !important;
  transition: all 0.3s ease !important;
}

#accordion .card-header button:focus,
#accordion .card-header button:active,
#accordion .card-header button:focus-visible,
#accordion .card-header button.btn:focus,
#accordion .btn:focus,
#accordion .btn:active,
#accordion .btn.focus,
[id^='accordion'] .card-header button:focus,
[id^='accordion'] .card-header button:active,
[id^='accordion'] .card-header button:focus-visible,
[id^='accordion'] .card-header button.btn:focus,
[id^='accordion'] .btn:focus,
[id^='accordion'] .btn:active,
[id^='accordion'] .btn.focus,
.card-header button:focus,
.card-header button:active,
.card-header button:focus-visible,
.card-header button.btn:focus {
  outline: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
  border-color: transparent !important;
}

#accordion .card-header button h5 {
  font-size: 16px !important;
  font-weight: 600 !important;
  margin: 0 !important;
  color: var(--heading) !important;
}

#accordion .card-header button:not(.collapsed) {
}

#accordion .card-header button:not(.collapsed) h5 {
}

#accordion .card-header button .fa-angle-down {
  transition: transform 0.3s ease !important;
  color: #6c757d !important;
}

#accordion .card-header button:not(.collapsed) .fa-angle-down {
  transform: rotate(180deg) !important;
  color: #6c757d !important;
}

#accordion .card-body {
  padding: 0 24px 24px 24px !important;
  background: #ffffff !important;
  border-top: none !important;
}

#accordion .card-body p {
  color: var(--text) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

/* =========================================================
   PULSATING SCROLL DOWN BUTTON ANIMATION OVERRIDES
   ========================================================= */
.arrow-downhny .arrow-down-icon {
  -webkit-animation: premium-ripple 1.5s infinite !important;
  animation: premium-ripple 1.5s infinite !important;
}

.arrow-downhny .arrow-down-icon span.fa {
  color: var(--dark-green) !important;
}

@-webkit-keyframes premium-ripple {
  0% {
    box-shadow:
      0 0 0 0 rgba(248, 198, 139, 0.6),
      0 0 0 8px rgba(248, 198, 139, 0.4),
      0 0 0 16px rgba(248, 198, 139, 0.2);
  }
  100% {
    box-shadow:
      0 0 0 8px rgba(248, 198, 139, 0.4),
      0 0 0 16px rgba(248, 198, 139, 0.2),
      0 0 0 24px rgba(248, 198, 139, 0);
  }
}

@keyframes premium-ripple {
  0% {
    box-shadow:
      0 0 0 0 rgba(248, 198, 139, 0.6),
      0 0 0 8px rgba(248, 198, 139, 0.4),
      0 0 0 16px rgba(248, 198, 139, 0.2);
  }
  100% {
    box-shadow:
      0 0 0 8px rgba(248, 198, 139, 0.4),
      0 0 0 16px rgba(248, 198, 139, 0.2),
      0 0 0 24px rgba(248, 198, 139, 0);
  }
}

/* =========================================================
   PREMIUM BRANDED PRELOADER STYLING
   ========================================================= */
#premium-preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: var(--bg-primary); /* Brand warm peach-white background */
  z-index: 999999; /* Highest priority overlay */
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1),
    visibility 0.6s !important;
  opacity: 1;
  visibility: visible;
}

#premium-preloader.fade-out {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Hide scrollbar when loader is active */
body.preloader-active {
  overflow: hidden !important;
}

.preloader-wrapper {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.preloader-logo {
  position: relative;
  width: 90px;
  height: 90px;
  margin-bottom: 20px;
}

/* Stunning dual rotating rings */
.spinner-rings {
  position: relative;
  width: 100%;
  height: 100%;
}

.spinner-rings .ring {
  position: absolute;
  border: 4px solid transparent;
  border-radius: 50%;
  animation: spin 1.5s linear infinite;
}

.spinner-rings .outer-ring {
  width: 90px;
  height: 90px;
  border-top-color: var(--dark-green); /* Dark Green outer accent */
  border-bottom-color: var(--dark-green);
  animation-duration: 2s;
}

.spinner-rings .inner-ring {
  width: 70px;
  height: 70px;
  top: 10px;
  left: 10px;
  border-left-color: var(--primary); /* Brand Peach inner accent */
  border-right-color: var(--primary);
  animation-direction: reverse;
  animation-duration: 1.2s;
}

.preloader-img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 55px;
  height: 55px;
  object-fit: contain;
  z-index: 10;
}

.preloader-text {
  font-size: 26px !important;
  font-weight: 700 !important;
  color: var(--heading) !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  margin-bottom: 8px !important;
  animation: pulse-text 1.5s ease-in-out infinite alternate;
}

.preloader-subtitle {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--text) !important;
  letter-spacing: 1px !important;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes pulse-text {
  0% {
    opacity: 0.6;
    transform: scale(0.98);
  }
  100% {
    opacity: 1;
    transform: scale(1.02);
  }
}

/* =========================================================
   HOME BANNER BUTTONS - PREMIUM PERFECT COMPLEMENT DUO
   ========================================================= */
/* 1. About Us Button (Primary Solid Orange/Peach) */
.banner_btn.btn-primary {
  background-color: #fd7e14 !important;
  border: 2px solid #fd7e14 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  transition: all 0.3s ease !important;
  border-radius: 6px !important;
}

.banner_btn.btn-primary:hover {
  background-color: #ffffff !important;
  color: #fd7e14 !important;
  border-color: #fd7e14 !important;
  box-shadow: 0 4px 15px rgba(253, 126, 20, 0.4) !important;
}

/* 2. Contact Us Button (Secondary Outline) */
.banner_btn.btn-white {
  background-color: #ffffff !important;
  border: 2px solid var(--dark-green) !important;
  color: var(--dark-green) !important;
  font-weight: 700 !important;
  transition: all 0.3s ease !important;
  border-radius: 6px !important;
}

.banner_btn.btn-white:hover {
  background-color: var(--dark-green) !important;
  color: #ffffff !important;
  border-color: var(--dark-green) !important;
  box-shadow: 0 4px 15px rgba(77, 139, 90, 0.3) !important;
}

/* =========================================================
   GLOBAL PRIMARY BUTTON TEXT COLOR FIX (ENSURE WHITE TEXT)
   ========================================================= */
.btn-primary,
.theme-btn,
.btn-style-menu.btn-primary {
  color: #ffffff !important;
}

.btn-primary:hover,
.theme-btn:hover,
.btn-style-menu.btn-primary:hover {
  color: #fd7e14 !important;
}

/* =========================================================
   PREMIUM PORTFOLIO / GALLERY CARD STYLING
   ========================================================= */
.protfolio-item {
  margin-bottom: 30px !important;
}

.protfolio-item a {
  background: #ffffff !important;
  border-radius: var(--border-radius) !important;
  padding: 16px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04) !important;
  border: 1px solid rgba(0, 0, 0, 0.03) !important;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
  text-decoration: none !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

.protfolio-item a figure {
  border-radius: var(--border-radius) !important;
  overflow: hidden !important;
  margin: 0 !important;
  aspect-ratio: 4/3 !important; /* Perfect aspect ratio grid alignment */
}

.protfolio-item a figure img {
  object-fit: cover !important;
  width: 100% !important;
  height: 100% !important;
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

.protfolio-item a h5 {
  color: var(--heading) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  margin-top: 15px !important;
  margin-bottom: 0 !important;
  text-align: center !important;
  transition: color 0.3s ease !important;
}

/* Hover effects */
.protfolio-item a:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 16px 36px rgba(77, 139, 90, 0.12) !important;
  border-color: rgba(77, 139, 90, 0.15) !important;
}

.protfolio-item a:hover figure img {
  transform: scale(1.05) !important; /* Elegant zoom effect */
}

.protfolio-item a:hover h5 {
  color: var(--dark-green) !important; /* Title lights up in brand green */
}

/* =========================================================
   SHIMMER / SHINE EFFECT FOR SERVICES & PRODUCTS IMAGES
   ========================================================= */
.proImage,
.home_product_img {
  position: relative;
  overflow: hidden;
  border-radius: 12px; /* Keep their rounded corners */
}

/* Create the shimmer element before hover */
.proImage::before,
.home_product_img::before {
  position: absolute;
  top: 0;
  left: -100%;
  z-index: 2;
  display: block;
  content: '';
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
  transform: skewX(-25deg);
}

/* Trigger keyframe animation on hover of the entire grid-block */
.w3l-grids-3 .grid-block:hover .proImage::before,
.w3l-grids-3 .grid-block:hover .home_product_img::before {
  -webkit-animation: shine 0.75s;
  animation: shine 0.75s;
}

/* =========================================================
   REMOVE GREEN OVERLAY HOVER FROM SERVICES & PRODUCTS
   ========================================================= */
.w3l-grids-3 .grid-block {
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

.w3l-grids-3 .grid-block:hover {
  background-color: #ffffff !important; /* Keep card white */
  transform: translateY(-6px) !important; /* Elegant modern lift */
  box-shadow: 0 16px 36px rgba(77, 139, 90, 0.08) !important; /* Premium light shadow */
}

.w3l-grids-3 .grid-block:hover h4,
.w3l-grids-3 .grid-block:hover p,
.w3l-grids-3 .grid-block:hover span {
  color: var(--heading) !important; /* Keep heading text slate-dark */
}

.w3l-grids-3 .grid-block:hover h4 {
  color: var(--dark-green) !important; /* Elegant: title highlights green on hover! */
}

/* =========================================================
   FLOATING CALL WIDGET - THEME GREEN BACKGROUND
   ========================================================= */
.social-icons .fa-phone {
  background-color: var(--dark-green) !important;
  transition: all 0.3s ease !important;
}

.social-icons .fa-phone:hover {
  background-color: #ffffff !important;
  color: var(--dark-green) !important;
}

/* =========================================================
   FLOATING SCROLL TO TOP - THEME GREEN BACKGROUND
   ========================================================= */
.w3l-footer-29-main #movetop {
  background-color: var(--dark-green) !important;
  color: #ffffff !important;
  border: 2px solid var(--dark-green) !important;
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
}

.w3l-footer-29-main #movetop:hover {
  background-color: #ffffff !important;
  color: var(--dark-green) !important;
  border-color: var(--dark-green) !important;
  transform: translate3d(0, -5px, 0) !important;
  box-shadow: 0 8px 20px rgba(77, 139, 90, 0.3) !important;
}

.w3l-footer-29-main #movetop span {
  color: #ffffff !important;
  font-size: 20px !important;
  line-height: 40px !important;
}

.w3l-footer-29-main #movetop:hover span {
  color: var(--dark-green) !important;
}

/* =========================================================
   HEADER NAVIGATION LINKS - PREMIUM HIGH CONTRAST & VISIBILITY
   ========================================================= */
.navbar-light .navbar-nav .nav-link,
.navbar-dark .navbar-nav .nav-link {
  color: #1e293b !important; /* Premium high contrast slate 800 */
  font-weight: 600 !important;
  font-size: 15px !important;
  letter-spacing: 0.3px !important;
  transition: all 0.3s ease !important;
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
  color: #fd7e14 !important; /* Brand vibrant orange on hover */
}

/* Active page navigation link state */
.navbar-light .navbar-nav .show > .nav-link,
.navbar-light .navbar-nav .active > .nav-link,
.navbar-light .navbar-nav .nav-link.show,
.navbar-light .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .show > .nav-link,
.navbar-dark .navbar-nav .active > .nav-link,
.navbar-dark .navbar-nav .nav-link.show,
.navbar-dark .navbar-nav .nav-link.active {
  color: #fd7e14 !important; /* Keep selected/active menu item rich brand orange to match underline */
}

/* =========================================================
   BECOME A DEALER BUTTON - PREMIUM GREEN OUTLINE (MATCHES SCREENSHOT)
   ========================================================= */
.navbar-nav .btn-white-menu.btn-primary {
  background-color: #ffffff !important;
  background: #ffffff !important;
  border: 2px solid var(--dark-green) !important;
  color: var(--dark-green) !important;
  border-radius: 8px !important;
  padding: 10px 15px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-transform: capitalize !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.navbar-nav .btn-white-menu.btn-primary:hover,
.navbar-nav .btn-white-menu.btn-primary:focus {
  background-color: var(--dark-green) !important;
  background: var(--dark-green) !important;
  color: #ffffff !important;
  border-color: var(--dark-green) !important;
  box-shadow: 0 4px 15px rgba(77, 139, 90, 0.25) !important;
  transform: translateY(-2px) !important;
}

/* =========================================================
   CUSTOM INQUIRY NOW BUTTON - MATCHES BECOME A DEALER STYLE
   ========================================================= */
.btn-inquiry-custom {
  background-color: #ffffff !important;
  background: #ffffff !important;
  border: 2px solid var(--dark-green) !important;
  color: var(--dark-green) !important;
  border-radius: 8px !important;
  padding: 10px 30px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  text-transform: capitalize !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.btn-inquiry-custom:hover,
.btn-inquiry-custom:focus {
  background-color: var(--dark-green) !important;
  background: var(--dark-green) !important;
  color: #ffffff !important;
  border-color: var(--dark-green) !important;
  box-shadow: 0 4px 15px rgba(77, 139, 90, 0.25) !important;
  transform: translateY(-2px) !important;
}

/* =========================================================
   WIX-STYLE PREMIUM GALLERY CARD DESIGN
   ========================================================= */
.gallery-card-wix {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 300px !important; /* Fixed height for symmetry matching the second screenshot */
  border-radius: 20px !important; /* Premium rounded corners matching second screenshot */
  overflow: hidden !important;
  background-color: #0f172a !important; /* fallback dark background */
  border: none !important;
  padding: 0 !important;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.15) !important;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
  text-decoration: none !important;
}

.gallery-card-img-wrap {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  z-index: 1 !important;
}

.gallery-card-img {
  width: 100% !important;
  height: 100% !important;
  /* object-fit: cover !important; */
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

/* Dark linear gradient bottom overlay for perfect white text readability */
.gallery-card-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(0, 0, 0, 0.55) !important; /* Perfect uniform translucent dark cover on hover */
  z-index: 2 !important;
  opacity: 0 !important; /* Hidden by default */
  transition: opacity 0.4s ease !important;
}

/* Centering text completely inside the card */
.gallery-card-content {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -30%) !important; /* Start slightly lower for beautiful slide-up effect */
  opacity: 0 !important; /* Hidden by default */
  z-index: 3 !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 90% !important;
  transition:
    opacity 0.4s ease,
    transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

/* Bold white title centered */
.gallery-card-title {
  color: #ffffff !important;
  font-size: 22px !important; /* slightly larger and majestic in center */
  font-weight: 700 !important;
  margin: 0 !important;
  line-height: 1.3 !important;
  font-family: 'Outfit', 'Inter', sans-serif !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important; /* stronger text shadow for epic legibility */
  text-align: center !important;
}

/* Hover effects */
.gallery-card-wix:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.25) !important;
}

.gallery-card-wix:hover .gallery-card-img {
  transform: scale(1.08) !important;
}

.gallery-card-wix:hover .gallery-card-overlay {
  opacity: 1 !important; /* Smoothly fade in overlay on hover */
}

.gallery-card-wix:hover .gallery-card-content {
  opacity: 1 !important; /* Smoothly fade in text on hover */
  transform: translate(-50%, -50%) !important; /* Slide up to exact center on hover! */
}

/* =========================================================
   MOBILE & TABLET NAVIGATION RESPONSIVE FIXES (SCREENS < 992px)
   ========================================================= */
@media (max-width: 991.98px){
  /* 1. Deep solid dark background for mobile collapse menu to prevent page content bleed-through */
  .navbar-collapse {
    position: absolute !important;
    top: 100% !important;
    left: 15px !important;
    right: 15px !important;
    background: rgb(255 244 232) !important; /* Deep premium Slate-900 *//* background-color: rgb(15, 23, 42) !important; */
    
    padding: 20px 24px !important;
    border-radius: 16px !important;
    margin-top: 10px !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15) !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    max-height: calc(100vh - 100px) !important; /* Avoid cutoffs on smaller phone viewports */
    overflow-y: auto !important; /* Scrollable menu content if list is very long *//* Hide scrollbars visually while retaining scrolling function */

    
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* IE and Edge */
  }

  .navbar-collapse::-webkit-scrollbar,
  .navbar-collapse .navbar-nav::-webkit-scrollbar,
  .navbar-nav::-webkit-scrollbar {
    display: none !important; /* Chrome, Safari, and Opera */
    width: 0 !important;
    height: 0 !important;
  }

  .navbar-collapse .navbar-nav,
  .navbar-nav {
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* IE/Edge */
  }

  /* 1.5. Prevent nested scrolling / double scrollbars inside mobile dropdown menus */
  .dropdown-menu,
  .dropdown-menu.mobile-dropdown-menu,
  .mobile-dropdown-menu {
    max-height: none !important;
    overflow: visible !important;
  }

  /* 1.8. Compact Mobile Header and Scaled Logo */
  header#site-header {
    height: 80px !important;
  }

  header#site-header.nav-fixed {
    height: 80px !important;
  }

  .navbar-brand img {
    max-height: 50px !important;
  }

  header#site-header.nav-fixed .navbar-brand img {
    max-height: 50px !important;
  }

  /* 2. Hide the awkward floating desktop arrow/pseudo-elements on mobile */
  .dropdown-menu::before,
  .dropdown-menu::after,
  .mobile-dropdown-menu::before,
  .mobile-dropdown-menu::after {
    display: none !important;
    content: none !important;
  }

  /* 3. Stack dropdown list items vertically instead of inline-block */
  .mobile-dropdown-menu li,
  .mobile-dropdown-menu .mobile-cat-item {
    display: block !important;
    width: 100% !important;
    float: none !important;
  }

  /* 3. Fix link contrast against the mobile menu overlay */
  .navbar-dark .navbar-nav .nav-link,
  .navbar-light .navbar-nav .nav-link {
    color: #747474 !important; /* Clear readable gray text on light/dark menu overlay */
  }

  .navbar-dark .navbar-nav .nav-link:hover,
  .navbar-dark .navbar-nav .nav-link:focus,
  .navbar-dark .navbar-nav .nav-link.active,
  .navbar-light .navbar-nav .nav-link:hover,
  .navbar-light .navbar-nav .nav-link:focus,
  .navbar-light .navbar-nav .nav-link.active {
    color: #fd7e14 !important; /* Vibrant orange for hover and active links */
  }

  /* 4. Dropdown accordions background and spacing in mobile */
  .mobile-dropdown-menu {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-radius: 8px !important;
    padding: 8px !important;
    margin-top: 5px !important;
  }

  .mobile-accordion-trigger {
    color: #747474 !important; /* Premium gray accordion header */
  }

  .mobile-accordion-trigger:hover,
  .mobile-accordion-trigger:focus {
    color: #fd7e14 !important;
  }

  .mobile-dropdown-menu .dropdown-item {
    color: #747474 !important; /* Readable item links */
  }

  .mobile-dropdown-menu .dropdown-item:hover,
  .mobile-dropdown-menu .dropdown-item:focus {
    color: #fd7e14 !important;
  }

  /* 5. Style the mobile sub-product list accordion to look premium and visible */
  .navbar-collapse .collapse ul.list-unstyled,
  .navbar-collapse .collapsing ul.list-unstyled {
    background-color: rgba(255, 255, 255, 0.04) !important; /* Elegant slate glass overlay instead of solid white */
    border-radius: 8px !important;
    margin: 8px 0 !important;
    padding: 5px 0 5px 15px !important;
    border-left: 2px solid rgba(254, 90, 14, 0.3) !important; /* Beautiful orange accent left-border */
  }

  .navbar-collapse .collapse ul.list-unstyled .dropdown-item,
  .navbar-collapse .collapsing ul.list-unstyled .dropdown-item {
    color: #747474 !important; /* Extremely readable gray text */
    padding: 8px 12px !important;
    font-size: 13px !important;
    background: transparent !important; /* reset background */
    display: block !important;
    width: 100% !important;
  }

  .navbar-collapse .collapse ul.list-unstyled .dropdown-item:hover,
  .navbar-collapse .collapsing ul.list-unstyled .dropdown-item:hover {
    background-color: rgba(0, 0, 0, 0.03) !important;
    color: #fd7e14 !important; /* vibrant orange on hover */
  }

  /* 6. Mobile Navbar Toggler (Premium Brand Styling) */
  .navbar-dark .navbar-toggler-icon {
    background: var(--dark-green) !important;
    border-radius: 6px !important;
  }
}

/* =========================================================
   DESKTOP MEGA MENU FULL-WIDTH ALIGNMENT (SCREENS >= 992px)
   ========================================================= */
@media (min-width: 992px){
  /* Prevent nav links from wrapping into multiple lines on desktop */
  .navbar-expand-lg .navbar-nav .nav-link {
    white-space: nowrap !important;
  }

  /* Dynamically adjust horizontal padding on intermediate desktop screens to prevent overflow/wrap */
  @media (max-width: 1200px){
    .navbar-expand-lg .navbar-nav .nav-item {
      padding: 0 8px !important;
    }
  }

  /* Force navbar-collapse to be static so the mega-menu is positioned relative to the full-width header */
  #site-header .navbar-collapse {
    position: static !important;
  }

  /* Make sure the mega-menu dropdown stretches fully and aligns its content container perfectly with the header container */
  .dropdown-menu.mega-menu-dropdown {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
  }

  /* Prevent the sticky tree image in the Future of Cooling section from going behind the fixed header */
  .sticky-visual {
    top: 140px !important;
  }
}

/* =========================================================
   OTHER RESOURCES DROPDOWN MENU (PREMIUM STYLING)
   ========================================================= */
/* Desktop styling */
@media (min-width: 992px){
  .other-resources-dropdown {
    position: relative !important;
  }

  /* Show dropdown on hover with a smooth slide-up + fade-in */
  .nav-item.dropdown:hover .dropdown-menu.other-resources-menu {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    }

  .other-resources-menu {
    display: block !important;
    opacity: 0;
    transform: translateX(-50%) translateY(10px) !important;
    position: absolute !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
    min-width: 180px !important;
    top: 100%;
    left: 60% !important;
  }

  .other-resources-menu .dropdown-item {
    color: #333333 !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    padding: 10px 20px !important;
    transition: all 0.2s ease !important;
    background: transparent !important;
  }

  .other-resources-menu .dropdown-item:hover {
    background-color: rgba(253, 126, 20, 0.08) !important; /* light orange tint */
    color: #fd7e14 !important; /* primary orange */
    padding-left: 25px !important; /* elegant nudge effect */
  }
}

/* Mobile styling */
@media (max-width: 991.98px){
  .other-resources-menu {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: none !important;
    border-radius: 8px !important;
    margin: 5px 0 !important;
    padding: 5px 0 !important;
    display: none;
  }

  .nav-item.dropdown.show .other-resources-menu {
    display: block;
  }

  .other-resources-menu .dropdown-item {
    color: #747474 !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    padding: 10px 20px !important;
    background: transparent !important;
  }

  .other-resources-menu .dropdown-item:hover,
  .other-resources-menu .dropdown-item:focus {
    background-color: rgba(0, 0, 0, 0.03) !important;
    color: #fd7e14 !important;
  }
}

/* =========================================================
   NAVBAR HEIGHT INCREASE & LOGO ALIGNMENT
   ========================================================= */
header#site-header {
  /* background-color: var(--bg-primary); */
  height: 110px !important;
  display: flex !important;
  align-items: center !important;
  transition: all 0.4s ease 0s !important;
}

header#site-header.nav-fixed {
  height: 110px !important; /* Keep same height as top state when scrolled */
}

/* Ensure the navbar brand and logo align perfectly and never overlap borders */
.navbar-brand {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  min-width: 110px !important; /* Prevent horizontal shift of centered menu items on scroll */
}

.navbar-brand img {
  max-height: 80px !important; /* Perfectly caps the logo size to leave 15px top/bottom buffer */
  width: auto !important;
  object-fit: contain !important;
  transition: all 0.4s ease !important;
}

header#site-header.nav-fixed .navbar-brand img {
  max-height: 80px !important; /* Keep same logo size as top state when scrolled */
}

/* =========================================================
   PREMIUM ABOUT PAGE - ALTERNATING CARD FEATURES SECTION
   ========================================================= */
.premium-features-section {
  padding: 80px 0 !important;
}

.premium-section-title {
  font-size: 38px !important;
  font-weight: 800 !important;
  color: var(--heading) !important;
  letter-spacing: -0.5px;
}

/* Symmetrical Alternating Cards */
.premium-feature-card {
  background: #ffffff !important;
  border-radius: 24px !important;
  padding: 45px 35px !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.04) !important;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  min-height: auto !important;
  height: 100% !important;
  box-sizing: border-box !important;
}

.premium-feature-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.08) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

/* Illustration / Image Styling */
.premium-card-ill-wrapper {
  width: 100% !important;
  height: 200px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

.premium-card-illustration {
  max-height: 180px !important;
  max-width: 100% !important;
  object-fit: contain !important;
  transition: all 0.4s ease !important;
}

.premium-feature-card:hover .premium-card-illustration {
  transform: scale(1.05) !important;
}

/* Text & Separator Line */
.premium-card-content-wrapper {
  width: 100% !important;
  text-align: left !important;
}

.premium-card-line {
  width: 35px !important;
  height: 4px !important;
  background-color: #000000 !important;
  margin-bottom: 18px !important;
  border-radius: 2px !important;
}

.premium-card-title {
  font-size: 24px !important;
  font-weight: 700 !important;
  color: #000000 !important;
  text-transform: capitalize !important;
  margin-bottom: 14px !important;
  text-align: left !important;
}

.premium-card-desc {
  font-size: 15px !important;
  line-height: 1.65 !important;
  color: #475569 !important;
  text-align: left !important;
  margin: 0 !important;
}

/* Remove active underline (orange bar) globally for all active navigation items in navbar */
.navbar-nav .nav-item .nav-link.active::after {
  display: none !important;
}

/* =========================================================
   FUTURE OF COOLING SECTION - MOBILE CENTERING & RESPONSIVENESS
   ========================================================= */
@media (max-width: 991.98px){
  /* Center the topic cards text and items on mobile */
  .w3l-grids-3 .topic-card {
    text-align: center;
    align-items: center;
    justify-content: center;
    height: auto !important;
    min-height: 150px;
    padding: 1.5rem 1rem !important;
  }

  .w3l-grids-3 .topic-card .read-more {
    margin-top: 0.5rem;
  }

  /* Properly separate and center the visual card container */
  .w3l-grids-3 .sticky-visual {
    margin-top: 2rem !important;
    margin-bottom: 3rem !important;
    display: flex;
    justify-content: center;
  }

  .w3l-grids-3 .visual-card {
    width: 100% !important;
    max-width: 500px !important;
    margin: 0 auto !important;
  }

  .w3l-grids-3 .visual-card img {
    height: 300px !important;
    border-radius: 12px !important;
  }
}

/* =========================================================
   LIGHTBOX MODAL - REMOVE SCROLLBAR & PREVENT BACKGROUND SCROLL
   ========================================================= */
html.lightbox-open,
body.lightbox-open {
  overflow: hidden !important;
}

/* =========================================================
   CERTIFICATE MODAL (ABOUT PAGE) - DARK BLURRY BACKDROP & CONTENT
   ========================================================= */
body.certificate-mode .modal-backdrop {
  background-color: #040914 !important;
}
body.certificate-mode .modal-backdrop.show {
  display: block !important;
  opacity: 0.75 !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

#imageModal .modal-content {
  background: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  border-radius: 20px !important;
  box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.3) !important;
  overflow: hidden;
}
#imageModal .modal-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
  padding: 15px 24px !important;
}
#imageModal .modal-body {
  padding: 24px !important;
  text-align: center !important;
}
#imageModal .modal-title {
  font-weight: 600 !important;
  color: var(--heading) !important;
}

/* Fix header/navbar shifting when Bootstrap modals are opened */
body.modal-open {
  padding-right: 0 !important;
}

body.modal-open #site-header {
  padding-right: 0 !important;
}

/* =========================================================
   UTILITIES FOR INLINE CSS ELIMINATION
   ========================================================= */
.cursor-pointer {
  cursor: pointer !important;
}

.transition-transform-300 {
  transition: transform 0.3s ease !important;
}

.industry-modal-content {
  border-radius: 20px !important;
  box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.25) !important;
  background: #ffffff !important;
}

.industry-modal-close {
  top: 24px !important;
  right: 24px !important;
  z-index: 10 !important;
  cursor: pointer !important;
}

.industry-modal-close-icon {
  font-size: 24px !important;
  line-height: 1 !important;
  color: #ffffff !important;
  font-weight: 400 !important;
  display: block !important;
  margin-top: -2px !important;
}

.industry-modal-title {
  color: #0f172a !important;
  font-size: 32px !important;
  font-family: 'Inter', sans-serif !important;
  text-align: left !important;
}

.list-style-none {
  list-style: none !important;
}

.fs-13 {
  font-size: 13px !important;
}

.fs-10 {
  font-size: 10px !important;
}

/* =========================================================
   FUTURE COOLING PAGE SCROLL BEHAVIOR
   ========================================================= */
html {
  scroll-behavior: smooth !important;
  scroll-padding-top: 110px !important;
}

#New-Cooling-Era, #Refrigerants, #CO₂-Refrigeration, #CO₂-Technology, #Inside-the-CO₂-System, 
#Lifecycle-Benefits, #Global-Standards, #Green-Vision, #Future-Ready, #The-Future-is-Naturally-CO₂ {
  scroll-margin-top: 110px !important;
}

/* =========================================================
   PREMIUM MODALS & NEWSLETTER/BROCHURE LAYOUT STYLES
   ========================================================= */
/* Premium Frosted Blurry Modal Backdrop Overlay - Newsletter, Industry, and Brochure Modals */
body.newsletter-mode .modal-backdrop,
body.industry-mode .modal-backdrop,
body.brochure-mode .modal-backdrop {
    background-color: #040914 !important;
}
body.newsletter-mode .modal-backdrop.show,
body.industry-mode .modal-backdrop.show,
body.brochure-mode .modal-backdrop.show {
    display: block !important;
    opacity: 0.75 !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

#brochure_form label.error {
    display: block !important;
    width: 100%;
    color: #ea5455 !important;
    font-size: 13px;
    line-height: 1.4;
    margin: 6px 0 0 0 !important;
}
#brochure_form .premium-input-inline.error {
    border-color: #ea5455 !important;
    color: #0f172a !important;
}


#site-header {
    z-index: 999 !important;
}
.premium-modal-dialog {
    max-width: 580px !important;
    width: 90% !important;
    margin: 1.75rem auto;
}
.premium-modal-content {
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    border-radius: 24px !important;
    box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.3) !important;
    overflow: hidden;
    color: #1e293b !important;
    position: relative;
}
.premium-close-btn {
    position: absolute;
    top: 25px;
    right: 25px;
    z-index: 99;
    background: #fd7e14 !important;
    border: 1px solid var(--primary) !important;
    color: white !important;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}
.premium-close-btn:hover {
    background:#ffff !important;
    border-color:#fd7e14 !important;
    color: #fd7e14 !important;
    transform: rotate(90deg);
}
.premium-left-panel {
    background-image: url('../images/nandikoti_cold_storage_bg.png');
    background-size: cover;
    background-position: center;
    position: relative;
    min-height: 450px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 45px 50px !important;
}
.premium-left-footer {
    margin-top: auto !important;
    padding-top: 25px;
}
.premium-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(240, 244, 248, 0.96) 100%);
    z-index: 1;
}
.z-index-2 {
    position: relative;
    z-index: 2;
}
.brand-badge {
    display: inline-flex;
    align-items: center;
    background: rgba(249, 200, 148, 0.15);
    border: 1px solid rgba(249, 200, 148, 0.3);
    color:#fd7e14 !important;
    padding: 8px 18px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.badge-dot {
    width: 6px;
    height: 6px;
    background-color: #fd7e14 !important;
    border-radius: 50%;
    margin-right: 8px;
    display: inline-block;
    box-shadow: 0 0 8px var(--primary);
}
.premium-panel-title {
    font-size: 38px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.3;
}
.premium-panel-desc {
    font-size: 18px;
    color: #475569;
    line-height: 1.6;
    max-width: 850px;
}
.premium-footer-text {
    font-size: 14px;
    color: #64748b;
    font-weight: 500;
}
.text-cyan {
    color:#fd7e14 !important;
}
.premium-input-inline {
    background: rgba(15, 23, 42, 0.04) !important;
    border: 1px solid rgba(15, 23, 42, 0.15) !important;
    color: #0f172a !important;
    padding: 14px 20px !important;
    border-radius: 12px !important;
    font-size: 15px !important;
    transition: all 0.3s ease !important;
    width: 100%;
    outline: none !important;
}
.premium-input-inline:focus {
    border-color: var(--primary) !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(249, 200, 148, 0.3) !important;
}
.premium-input-inline.error,
.premium-input-inline.is-invalid {
    border-color: #ea5455 !important;
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
    background: rgba(15, 23, 42, 0.04) !important;
    box-shadow: none !important;
}
.premium-input-inline::placeholder {
    color: #64748b !important;
}
.premium-submit-btn-inline {
    background: #fd7e14 !important;
    border: 2px solid #fd7e14 !important;
    color: #ffffff !important;
    padding: 14px 28px !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    transition: all 0.3s ease !important;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(253, 126, 20, 0.4) !important;
}
.premium-submit-btn-inline:hover {
    background: #ffffff !important;
    color: #fd7e14 !important;
    border-color: #fd7e14 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(253, 126, 20, 0.25) !important;
}
.premium-submit-btn-inline:active {
    transform: translateY(1px) !important;
}
.premium-submit-btn-inline:disabled,
.premium-submit-btn-inline.is-loading {
    opacity: 0.72 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
    filter: saturate(0.85);
    pointer-events: none;
}
.gap-2 {
    gap: 12px;
}
.newsletter-form-alert {
    display: none;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 14px;
}
.newsletter-form-alert.is-visible {
    display: block;
}
.newsletter-form-alert.success {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #86efac;
}
.newsletter-form-alert.error {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #ea5455;
}
.newsletter-email-field {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
}
.newsletter-email-field .position-relative {
    width: 100%;
}
.newsletter-email-field .premium-input-inline {
    width: 100%;
    display: block;
}
.newsletter-email-field label.error,
#newsletter_form .newsletter-email-field label.error {
    display: block !important;
    width: 100%;
    color: #ea5455 !important;
    font-size: 13px;
    line-height: 1.4;
    margin: 6px 0 0 0 !important;
}
.newsletter-email-field .premium-input-inline.error,
.newsletter-email-field .premium-input-inline.is-invalid,
#newsletter_form .newsletter-email-field .premium-input-inline.error,
#newsletter_form .newsletter-email-field .premium-input-inline.is-invalid {
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
}
.newsletter-captcha-wrapper {
    display: inline-block;
    padding: 2px;
    border-radius: 4px;
}
.newsletter-captcha-wrapper.error {
    border: 1px solid #ea5455;
    box-shadow: 0 0 0 1px rgba(234, 84, 85, 0.08);
}
.newsletter-submit-col {
    flex: 0 0 auto;
    align-self: flex-start;
}
@media (max-width: 575.98px) {
    .newsletter-submit-col {
        align-self: stretch;
    }
}
.btn-explore-solutions {
    background-color: #fd7e14 !important;
    border-color: #fd7e14 !important;
    color: white !important;
    transition: all 0.3s ease;
}
.btn-explore-solutions:hover {
    background-color: #ffffff !important;
    color: #fd7e14 !important;
    border-color: #fd7e14 !important;
}

/* =========================================================
   CAREER PAGE CUSTOM STYLING
   ========================================================= */
.career-subtitle {
    color: var(--primary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.9rem;
    display: block;
    margin-bottom: 8px;
    text-align: left;
}
.career-main-title {
    color: var(--heading-color);
    font-weight: 700;
    font-size: 2.2rem;
    margin-bottom: 24px;
    position: relative;
    text-align: left;
}

.career-intro-text {
    font-size: 1.05rem;
    line-height: 1.7;
    color: #5d5d66;
    margin-bottom: 35px;
    text-align: left;
}

/* Value Cards Stack */
.career-value-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.04);
    border-left: 4px solid var(--primary-color);
    transition: all 0.3s ease;
    display: flex;
    align-items: flex-start;
    text-align: left;
}
.career-value-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    border-left-color: var(--primary);
}
.career-value-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: rgba(167, 224, 181, 0.15); /* light primary-color/mint background */
    color: #097d13; /* dark green */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    margin-right: 20px;
    flex-shrink: 0;
    transition: all 0.3s ease;
}
.career-value-card:hover .career-value-icon {
    background: var(--primary-color);
    color: #ffffff;
}
/* Alternate cards to peach accent */
.career-value-card.accent-peach {
    border-left-color: var(--primary);
}
.career-value-card.accent-peach .career-value-icon {
    background: rgba(249, 200, 148, 0.15); /* light primary/peach background */
    color: #e07d1a;
}
.career-value-card.accent-peach:hover .career-value-icon {
    background: var(--primary);
    color: #ffffff;
}

.career-value-info h4 {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--heading-color);
    margin-bottom: 8px;
}
.career-value-info p {
    font-size: 0.95rem;
    line-height: 1.5;
    color: #5d5d66;
    margin: 0;
}

/* How to Apply Banner */
.apply-card {
    background: linear-gradient(135deg, var(--bg-color-offwhite), var(--bg-color-white));
    border: 1px solid rgba(167, 224, 181, 0.3);
    border-radius: 12px;
    padding: 30px;
    margin-top: 35px;
    position: relative;
    overflow: hidden;
    text-align: left;
}
.apply-card::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 120px;
    height: 120px;
    background: rgba(249, 200, 148, 0.1);
    border-radius: 50%;
}
.apply-card h3 {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--heading-color);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
}
.apply-card h3 i {
    margin-right: 10px;
    color: var(--primary);
}
.apply-card p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #5d5d66;
    margin: 0 0 15px 0;
}
.apply-email-badge {
    display: inline-flex;
    align-items: center;
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.06);
    padding: 8px 16px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--heading-color);
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}
.apply-email-badge i {
    margin-right: 8px;
    color: #097d13;
}
.apply-email-badge a {
    color: #097d13;
    text-decoration: none;
    transition: color 0.2s;
}
.apply-email-badge a:hover {
    color: var(--primary);
    text-decoration: underline;
}

/* Floating Contact Form Card */
.contact-form-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.04);
    border: 1px solid rgba(0,0,0,0.03);
    height: fit-content;
    position: -webkit-sticky; /* for Safari */
    position: sticky;
    top: 100px;
    margin-bottom: 50px;
    z-index: 10;
}
.contact-form-card .hny-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--heading-color);
    margin-bottom: 5px;
}

/* Input Styling overrides for premium visual touch */
.contact-form-card .form-input {
    margin-bottom: 20px;
    text-align: left;
}
.contact-form-card .form-input label {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--heading-color);
    margin-bottom: 8px;
    display: block;
}
.contact-form-card .form-input input, 
.contact-form-card .form-input textarea {
    border-radius: 8px !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
    padding: 12px 16px !important;
    font-size: 0.95rem !important;
    background: #fcfcfd !important;
    color: var(--para-color) !important;
    transition: all 0.3s ease !important;
    width: 100% !important;
    height: auto !important;
}
.contact-form-card .form-input input:focus, 
.contact-form-card .form-input textarea:focus {
    border-color: var(--primary) !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(249, 200, 148, 0.25) !important;
    outline: none !important;
}
.contact-form-card .form-submit button {
    width: 100%;
    padding: 14px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
}

@media (max-width: 991px) {
    .career-main-title {
        font-size: 1.8rem;
    }
    .apply-card {
        padding: 20px;
    }
    .contact-form-card {
        position: relative;
        top: 0;
        padding: 30px 20px;
        margin-top: 30px;
        margin-bottom: 0;
    }
}

/* =========================================================
   BLOG PAGE CUSTOM STYLING
   ========================================================= */
.blog-list-grid {
    row-gap: 1.5rem;
}
.blog-card-clickable {
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.08) !important;
}
.card:hover img {
    transform: scale(1.08);
}
.hover-primary:hover {
    color: var(--primary-color, #ff6600) !important;
}
.blog-card-clickable.loading {
    opacity: 0.7;
    pointer-events: none;
    transform: translateY(0) !important;
    box-shadow: none !important;
}
.blog-card-image-wrap {
    position: relative;
    aspect-ratio: 16 / 9;
    width: 100%;
    height:250px;
    overflow: hidden;
    background: #f8fafc;
}
.blog-card-image {
    width: 100%;
    height: 100%;
    /* object-fit: contain; */
    display: block;
    transition: transform 0.5s ease;
    padding: 0.75rem;
    border-radius: 20px;
}
.blog-card-clickable:hover .blog-card-image {
    transform: scale(1.03);
}
.blog-card-title {
    font-weight: 600;
    line-height: 1.4;
    font-size: 1.1rem;
}
.blog-card-summary {
    font-size: 14px;
    line-height: 1.6;
}
.blog-category-label {
    font-size: 12px;
    letter-spacing: 1px;
}
.blog-featured-badge {
    font-size: 11px;
    color: #ffffff !important;
}
.blog-date-badge {
    font-size: 11px;
    opacity: 0.85;
    color: #ffffff !important;
}
.blog-readmore-icon {
    font-size: 10px;
}
.blog-no-posts-icon {
    font-size: 32px;
    color: #ff6600;
    opacity: 0.7;
}
.blog-infinite-loader {
    min-height: 80px;
}
@media (max-width: 767.98px) {
    .blog-card-title {
        font-size: 1rem;
    }
    .blog-card-summary {
        font-size: 13px;
    }
    .blog-card-footer {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 10px;
    }
    .blog-readmore-btn {
        width: 100%;
        text-align: center;
    }
}

/* =========================================================
   BLOG DETAIL PAGE CUSTOM STYLING
   ========================================================= */
.blog-featured-img-wrap {
    max-height: 480px;
}
.blog-img-fit {
    object-fit: cover;
}
.blog-detail-title {
    font-weight: 800;
    color: #2d3436;
    line-height: 1.3;
    font-size: 30px;
}
.blog-meta-info {
    font-size: 14px;
    gap: 15px;
}
.blog-toc-box {
    border-left: 4px solid #ff6600;
}
.blog-toc-title {
    color: #2d3436;
}
.blog-toc-icon {
    color: #ff6600 !important;
}
.blog-toc-list {
    font-size: 15px;
    line-height: 1.6;
}
.blog-main-content {
    font-size: 16px;
    line-height: 1.8;
    color: #2d3436;
}
.blog-main-content ul {
    list-style-type: disc !important;
    padding-left: 2.5rem !important;
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
}
.blog-main-content ol {
    list-style-type: decimal !important;
    padding-left: 2.5rem !important;
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
}
.blog-main-content li {
    display: list-item !important;
    margin-bottom: 0.5rem !important;
    list-style: inherit !important;
}
.share-label {
    font-size: 14px;
}
.share-icon {
    width: 36px;
    height: 36px;
    border: 1px solid #ddd;
    line-height: 34px;
    transition: 0.3s;
}
.img-fit-cover {
    object-fit: cover;
}
.author-img-container {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #ff6600;
}
.author-name {
    font-weight: 700;
    color: #2d3436;
}
.author-title {
    font-size: 13px;
    line-height: 1.5;
}
.sidebar-widget-title {
    font-weight: 700;
    color: #2d3436;
    font-size: 18px;
    border-bottom: 2px solid #ff6600 !important;
}
.sidebar-post-thumb {
    width: 70px;
    height: 70px;
    flex-shrink: 0;
    border: 1px solid #eee;
}
.sidebar-post-title {
    font-weight: 600;
    font-size: 13px;
    line-height: 1.4;
}
.sidebar-post-link {
    text-decoration: none;
}
.sidebar-post-date {
    font-size: 11px;
}
.no-posts-small {
    font-size: 13px;
}
.tag-pill {
    font-size: 12px;
    background: #fff;
    border: 1px solid #dcdde1;
    border-radius: 20px;
    transition: 0.3s;
    color: #7f8c8d;
    padding: 4px 16px;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    cursor: pointer;
}
.tag-pill:hover {
    background-color: #ff6600 !important;
    color: white !important;
    border-color: #ff6600 !important;
}
.tag-pill.active-tag {
    background-color: #ff6600 !important;
    color: white !important;
    border-color: #ff6600 !important;
}
.tag-post-thumb {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    border: 1px solid #eee;
}
.tag-post-title {
    font-weight: 700;
    font-size: 14px;
    line-height: 1.4;
}
.tag-post-link {
    text-decoration: none;
    transition: 0.3s;
}
.tag-post-desc {
    font-size: 12px;
    line-height: 1.4;
}
.gap-2 {
    gap: 8px;
}
.related-posts-list div:last-child, .recent-posts-list div:last-child, .tag-posts-list div:last-child {
    border-bottom: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
.share-icon:hover {
    background-color: #ff6600 !important;
    color: white !important;
    border-color: #ff6600 !important;
}
.hover-primary:hover {
    color: #ff6600 !important;
}
.hover-primary-tag:hover {
    color: #ff6600 !important;
}
.tag-post-item {
    transition: all 0.3s ease;
}
.tag-post-item.hidden-item {
    display: none !important;
}
.tag-spinner {
    width: 2.5rem;
    height: 2.5rem;
    color: #ff6600 !important;
}
#tag-posts-loader {
    justify-content: center;
    align-items: center;
}
.toc-list a {
    color: #2d3436;
    text-decoration: none;
    transition: 0.3s;
}
.toc-list a:hover {
    color: #ff6600 !important;
}
.toc-list li {
    margin-bottom: 8px;
    font-weight: 500;
}
.sidebar-post-clickable {
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
    padding: 6px;
}
.sidebar-post-clickable:hover {
    background-color: #f8f9fa;
    border-radius: 8px;
    transform: translateX(4px);
}

/* Sidebar CTA Widget Custom CSS */
.sidebar-cta-widget {
    background: linear-gradient(135deg, #f57231 0%, #d84b06 100%) !important;
    border: none !important;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(216, 75, 6, 0.25) !important;
}
.sidebar-cta-widget::before {
    content: '';
    position: absolute;
    top: -20px;
    right: -20px;
    width: 100px;
    height: 100px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    pointer-events: none;
}
.sidebar-cta-widget::after {
    content: '';
    position: absolute;
    bottom: -30px;
    left: -30px;
    width: 140px;
    height: 140px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    pointer-events: none;
}
.sidebar-cta-title {
    font-size: 20px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    color: #fff !important;
    position: relative;
    z-index: 2;
}
.sidebar-cta-desc {
    font-size: 14px !important;
    line-height: 1.6 !important;
    font-weight: 500 !important;
    color: #fff !important;
    opacity: 0.95 !important;
    position: relative;
    z-index: 2;
}
.sidebar-cta-call {
    display: inline-flex;
    align-items: center;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 17px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    gap: 10px;
    position: relative;
    z-index: 2;
}
.sidebar-cta-call:hover {
    transform: scale(1.03);
    color: #fff !important;
    text-decoration: none !important;
}
.sidebar-cta-phone-bubble {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.sidebar-cta-phone-bubble i {
    font-size: 20px;
    color: #fff !important;
}
.sidebar-cta-call:hover .sidebar-cta-phone-bubble {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.4);
    transform: scale(1.1);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);
}
.sidebar-cta-btn {
    background-color: #fff !important;
    color: #d84b06 !important;
    border-radius: 30px !important;
    font-weight: 700 !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
    position: relative;
    z-index: 2;
}
.sidebar-cta-btn:hover {
    background-color: #fff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2) !important;
    color: #b33d04 !important;
}
.sidebar-cta-btn:active {
    transform: translateY(0) !important;
}

/* Premium CO2 Tech Sidebar Widget Styles */
.co2-tech-cta-widget {
background: linear-gradient(
    135deg,
    #071B34 0%,
    #0D2A4A 35%,
    #123C63 70%,
    #0B4F6C 100%
);    border: 1px solid rgba(16, 185, 129, 0.2) !important;
    position: relative;
    overflow: hidden;
    padding: 32px 24px !important;
    border-radius: 20px !important;
}
.co2-tech-cta-widget .tech-glow-circle-1 {
    position: absolute;
    top: -60px;
    right: -60px;
    width: 160px;
    height: 160px;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.18) 0%, transparent 70%);
    pointer-events: none;
    z-index: 1;
}
.co2-tech-cta-widget .tech-glow-circle-2 {
    position: absolute;
    bottom: -80px;
    left: -80px;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, rgba(0, 242, 254, 0.15) 0%, transparent 70%);
    pointer-events: none;
    z-index: 1;
}
.co2-tech-icon-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 2;
}
.co2-tech-icon-hex {
    width: 44px;
    height: 44px;
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.25);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.15);
}
.co2-tech-icon-hex i {
    color: #10b981 !important;
    font-size: 20px;
    animation: spin-slow 12s linear infinite;
}
@keyframes spin-slow {
    100% { transform: rotate(360deg); }
}
.co2-tech-badge {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #10b981;
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.2);
    padding: 4px 12px;
    border-radius: 30px;
    text-transform: uppercase;
}
.co2-tech-title {
    font-size: 22px !important;
    line-height: 1.4 !important;
    font-weight: 800 !important;
    color: #fff !important;
    position: relative;
    z-index: 2;
    background: linear-gradient(120deg, #ffffff 60%, #10b981 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.co2-tech-desc {
    font-size: 13.5px !important;
    line-height: 1.6 !important;
    font-weight: 400 !important;
    color: #ebdcd5 !important;
    position: relative;
    z-index: 2;
}
.co2-tech-highlights {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 11px;
    font-weight: 600;
    color: #10b981;
    position: relative;
    z-index: 2;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 8px 12px;
    border-radius: 10px;
}
.co2-tech-highlights .highlight-item i {
    margin-right: 4px;
    font-size: 10px;
    color: #10b981;
}
.co2-tech-highlights .highlight-divider {
    color: rgba(255, 255, 255, 0.15);
}
.co2-tech-btn {
    background: linear-gradient(90deg, #10b981 0%, #059669 100%) !important;
    border: none !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    padding: 12px 24px !important;
    border-radius: 12px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 20px rgba(16, 185, 129, 0.3) !important;
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.co2-tech-btn:hover {
    background: linear-gradient(90deg, #34d399 0%, #047857 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.45) !important;
    color: #fff !important;
}
.co2-tech-btn:active {
    transform: translateY(0) !important;
}
.co2-tech-btn i {
    transition: transform 0.2s ease;
}
.co2-tech-btn:hover i {
    transform: translateX(4px);
}

/* Premium Cold Storage Sidebar Widget Styles */
.cold-storage-cta-widget {
    background: linear-gradient(135deg, #072a1d 0%, #0e4c34 50%, #166e4a 100%) !important;
    border: 1px solid rgba(254, 90, 14, 0.25) !important;
    position: relative;
    overflow: hidden;
    padding: 32px 24px !important;
    border-radius: 20px !important;
}
.cold-storage-cta-widget .tech-glow-circle-1 {
    position: absolute;
    top: -60px;
    right: -60px;
    width: 160px;
    height: 160px;
    background: radial-gradient(circle, rgba(254, 90, 14, 0.22) 0%, transparent 70%);
    pointer-events: none;
    z-index: 1;
}
.cold-storage-cta-widget .tech-glow-circle-2 {
    position: absolute;
    bottom: -80px;
    left: -80px;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, rgba(22, 110, 74, 0.3) 0%, transparent 70%);
    pointer-events: none;
    z-index: 1;
}
.cs-tech-icon-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 2;
}
.cs-tech-icon-hex {
    width: 44px;
    height: 44px;
    background: rgba(254, 90, 14, 0.08);
    border: 1px solid rgba(254, 90, 14, 0.25);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 15px rgba(254, 90, 14, 0.15);
}
.cs-tech-icon-hex i {
    color: #fe5a0e !important;
    font-size: 20px;
}
.cs-tech-badge {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #fe5a0e;
    background: rgba(254, 90, 14, 0.08);
    border: 1px solid rgba(254, 90, 14, 0.2);
    padding: 4px 12px;
    border-radius: 30px;
    text-transform: uppercase;
}
.cs-tech-title {
    font-size: 22px !important;
    line-height: 1.4 !important;
    font-weight: 800 !important;
    color: #fff !important;
    position: relative;
    z-index: 2;
    background: linear-gradient(120deg, #ffffff 60%, #fe5a0e 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.cs-tech-desc {
    font-size: 13.5px !important;
    line-height: 1.6 !important;
    font-weight: 400 !important;
    color: #c9dfd6 !important;
    position: relative;
    z-index: 2;
}
.cs-tech-highlights {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 11px;
    font-weight: 600;
    color: #fe5a0e;
    position: relative;
    z-index: 2;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 8px 12px;
    border-radius: 10px;
}
.cs-tech-highlights .cs-highlight-item i {
    margin-right: 4px;
    font-size: 10px;
    color: #fe5a0e;
}
.cs-tech-highlights .cs-highlight-divider {
    color: rgba(255, 255, 255, 0.15);
}
.cs-tech-btn {
    background: linear-gradient(90deg, #ff7e40 0%, #fe5a0e 100%) !important;
    border: none !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    padding: 12px 24px !important;
    border-radius: 12px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 20px rgba(254, 90, 14, 0.3) !important;
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.cs-tech-btn:hover {
    background: linear-gradient(90deg, #ff8e54 0%, #ff6a24 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(254, 90, 14, 0.45) !important;
    color: #fff !important;
}
.cs-tech-btn:active {
    transform: translateY(0) !important;
}
.cs-tech-btn i {
    transition: transform 0.2s ease;
}
.cs-tech-btn:hover i {
    transform: translateX(4px);
}

/* =========================================================
   DEALER FORM PAGE CUSTOM STYLING
   ========================================================= */
#dealerForm label.error {
    color: red;
    font-size: 14px;
    margin-top: 5px;
    display: block;
    font-weight: 500;
    width: 100%;
}
#recaptchaDealer-error {
    color: red;
    font-size: 14px;
    font-weight: 500;
    margin-top: 10px;
}
.select2-container .select2-selection--multiple { min-height: 45px; border: 1px solid #ced4da; }

/* Custom Radio & Checkbox Styling to fix layout */
.custom-control {
    position: relative;
    display: block;
    min-height: 1.5rem;
    padding-left: 1.5rem;
}
.custom-control-input {
    position: absolute;
    left: 0;
    z-index: -1;
    width: 1rem;
    height: 1.25rem;
    opacity: 0;
}
.custom-control-label {
    position: relative;
    margin-bottom: 0;
    vertical-align: top;
    cursor: pointer;
}
.custom-control-label::before {
    position: absolute;
    top: 0.25rem;
    left: -1.5rem;
    display: block;
    width: 1rem;
    height: 1rem;
    pointer-events: none;
    content: "";
    background-color: #fff;
    border: #adb5bd solid 1px;
}
.custom-radio .custom-control-label::before {
    border-radius: 50%;
}
.custom-control-input:checked ~ .custom-control-label::before {
    color: #fff;
    border-color: #fe5a0e;
    background-color: #fe5a0e;
}
.custom-control-label::after {
    position: absolute;
    top: 0.25rem;
    left: -1.5rem;
    display: block;
    width: 1rem;
    height: 1rem;
    content: "";
    background: no-repeat 50% / 50% 50%;
}
.custom-radio .custom-control-input:checked ~ .custom-control-label::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e");
}

/* Error placement for radio/checkbox */
#dealerForm .custom-control label.error {
    position: absolute;
    top: 1.5rem;
    left: 0;
}

.select2-container{
    width: 100% !important;
}

/* =========================================================
   PRIVACY POLICY & TERMS PAGE SHARED STYLING
   ========================================================= */
html {
    scroll-behavior: smooth !important;
    scroll-padding-top: 110px !important;
}
.privacy-title {
    font-size: 2rem;
    font-weight: 800;
    color: #2d3436;
    margin-bottom: 8px;
}
.privacy-content {
    font-size: 15px;
    line-height: 1.8;
    color: #444;
}
.privacy-section {
    margin-bottom: 32px;
}
.privacy-section h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #2d3436;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid #ff6600;
}
.privacy-section ul {
    padding-left: 1.5rem;
    margin-bottom: 12px;
}
.privacy-section ul li {
    margin-bottom: 6px;
}
.contact-details {
    background: #f8f9fa;
    border-left: 4px solid #ff6600;
    border-radius: 8px;
    padding: 20px 24px;
}
.contact-details a {
    color: #559061;
    font-weight: bold;
    text-decoration: none;
}
.contact-details a:hover {
    text-decoration: underline;
}
.privacy-page-bg {
    background: #ffffff;
}
.privacy-date {
    font-size: 0.9rem;
}

/* =========================================================
   HEADER MEGA-MENU CUSTOM STYLING
   ========================================================= */
/* Category heading label */
.mega-menu-cat-heading {
    font-size: 14px;
    letter-spacing: 1.5px;
    color: var(--dark-green) !important;
    margin-left: 15px;
}

/* Category nav-link items (rendered in a loop) */
.mega-cat-nav-link {
    font-size: 15px;
    font-weight: 500;
    border-radius: 8px;
    transition: all 0.2s ease;
    padding: 10px 15px;
    color: #333;
}

/* Right-panel category title */
.mega-panel-cat-title {
    color: #4b8f5d;
    font-size: 25px;
    margin-bottom: 0;
}

/* "View All Solutions" link */
.mega-view-all-link {
    color: var(--dark-green) !important;
    font-size: 13px;
}

/* Product thumbnail container */
.product-thumb-container {
    width: 50px;
    height: 50px;
    min-width: 50px;
    overflow: hidden;
    border-radius: 6px;
    background: #f8f9fa;
}

/* Shared object-fit cover for mega-menu images */
.mega-thumb-img,
.mega-featured-img {
    object-fit: cover;
}

/* Product info flex container */
.product-info-container {
    flex: 1;
    min-width: 0;
}

/* Product card title */
.mega-product-title {
    font-size: 16px;
    line-height: 1.3;
}

/* Product card short description (clamped) */
.mega-product-desc {
    font-size: 13px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 37px;
}

/* Empty state icon when no products in category */
.mega-empty-icon {
    font-size: 36px;
}

/* Empty state text */
.mega-empty-text {
    font-size: 14px;
}

/* Featured category card wrapper (non-product categories) */
.mega-category-featured-card {
    background: linear-gradient(135deg, rgba(254, 90, 14, 0.03) 0%, rgba(9, 125, 19, 0.03) 100%);
    border-radius: 12px !important;
    min-height: 220px;
    border: 1px solid rgba(254, 90, 14, 0.05) !important;
}

/* Featured category image container */
.featured-img-container {
    border-radius: 8px;
    overflow: hidden;
    height: 140px;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.06);
}

/* Featured category card title */
.mega-featured-cat-title {
    font-size: 15px;
}

/* Featured category card description (clamped) */
.mega-featured-cat-desc {
    font-size: 12px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Explore Solutions button */
.btn-explore-solutions {
    border-radius: 30px !important;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 16px !important;
}

/* =========================================================
   HEADER MODAL / NEWSLETTER FORM HELPERS
   ========================================================= */
/* Floating icon inside position-relative input wrapper */
.form-field-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #64748b;
    font-size: 16px;
    pointer-events: none;
}

/* Textarea icon is anchored to top, not vertically centred */
.form-field-icon--textarea {
    top: 20px;
    transform: none;
}

/* Input/textarea with left icon padding */
.premium-input-padded {
    padding-left: 45px !important;
}

/* Textarea specific resets */
.premium-textarea {
    min-height: 100px;
    resize: none;
}

/* Newsletter form max-width constraint */
.newsletter-form-max {
    max-width: 650px;
}

/* =========================================================
   HOMEPAGE SLIDER — DYNAMIC BACKGROUND VIA CSS VARIABLE
   background-image URL is set inline as --slide-bg so the
   CSS property itself lives here in the stylesheet.
   ========================================================= */
.slider-info.bg {
    background-image: var(--slide-bg);
}








/* =========================================================
   INDUSTRY SOLUTIONS — HEADING & JS-TOGGLE HELPERS
   ========================================================= */
/* Section heading color override */
.industry-section-heading {
    color: var(--heading) !important;
}

/* JS-controlled hidden state — NO !important so JavaScript's
   element.style.display = 'block/flex' can override freely.
   Do NOT replace with Bootstrap d-none (which uses !important). */
.industry-js-hidden {
    display: none;
}

/* =========================================================
   BLOG PAGE STYLING
   ========================================================= */
/* Tag filter badge — font size & letter-spacing (rounded-pill handles border-radius) */
.blog-tag-badge {
    font-size: 14px;
    letter-spacing: 0.5px;
}

/* "Clear" link inside tag badge — white left-border separator */
.blog-tag-clear-link {
    border-left: 1px solid rgba(255, 255, 255, 0.3);
}

/* Infinite scroll loader spinner — 2rem size */
.blog-spinner-lg {
    width: 2rem;
    height: 2rem;
}

/* Intersection Observer sentinel — 1px invisible trigger line */
.blog-sentinel {
    height: 1px;
}

/* Empty state icon (no blogs found) */
.blog-empty-icon {
    font-size: 64px;
}

/* "Read More" button loading spinner — small 12px size */
.blog-spinner-xs {
    width: 12px;
    height: 12px;
    border-width: 2px;
}

/* =========================================================
   FOUNDER LINKEDIN BUTTON STYLING (Matching vertical social bar style)
   ========================================================= */
.founder-linkedin-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 52px !important;
    height: 52px !important;
    background-color: rgb(60, 148, 237) !important; /* Matches vertical social bar blue */
    color: #ffffff !important;
    border-radius: 6px !important; /* Rounded square matching vertical bar */
    border: 2px solid transparent !important;
    font-size: 24px !important; /* 1.5rem font size */
    transition: all 0.3s ease !important;
    text-decoration: none !important;
}

.founder-linkedin-btn:hover {
    background-color: #ffffff !important;
    color: rgb(60, 148, 237) !important;
    border-color: rgb(60, 148, 237) !important;
    box-shadow: 0 4px 12px rgba(60, 148, 237, 0.3) !important;
}

.founder-linkedin-btn span,
.founder-linkedin-btn i,
.founder-linkedin-btn .fa {
    color: #ffffff !important;
}

.founder-linkedin-btn:hover span,
.founder-linkedin-btn:hover i,
.founder-linkedin-btn:hover .fa {
    color: rgb(60, 148, 237) !important;
}

/* =========================================================
   RESPONSIVE SCROLL DOWN ARROW ALIGNMENT FOR TABLET SCREENS
   ========================================================= */
@media (max-width: 768px) and (min-width: 569px) {
    .w3l-main-slider .arrow-downhny {
        bottom: 90px !important;
    }
}