/*!
Theme Name: Ravi Chemical
Theme URI: http://underscores.me/
Author: Ouranos Technologies PVT LTD
Author URI: https://www.ouranostech.com/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: ravi-chemical
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Ravi Chemical is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

:root {
  --brand-deep: #2F8F5B;
  --brand-medium: #062d1f;
  --brand-emerald: #22C55E;
  --brand-light: #f2faf5;
  --deep: #2F8F5B;
  --emerald: #22C55E;
  --slate-dark: #1F2937;
  --white: #FFFFFF;
}

.text-slate-dark {
  color: var(--slate-dark);
}

.text-brand-deep {
  color: var(--brand-deep);
}

.text-brand-medium {
  color: var(--brand-medium);
}

.text-brand-emerald {
  color: var(--brand-emerald);
}

.bg-brand-deep {
  background-color: var(--brand-deep);
}

.bg-brand-medium {
  background-color: var(--brand-medium);
}

.bg-brand-emerald {
  background-color: var(--brand-emerald);
}

.bg-brand-light {
  background-color: var(--brand-light);
}

.border-brand-deep {
  border-color: var(--brand-deep);
}

.border-brand-emerald {
  border-color: var(--brand-emerald);
}

html {
  scroll-behavior: smooth;
}

/* Skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: 100;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
  width: auto;
  height: auto;
  padding: 0.5rem 1rem;
  background: var(--deep);
  color: #fff;
  border-radius: 0.5rem;
}

/* Navbar states */
#site-header {
  transition: background-color 0.35s ease, box-shadow 0.35s ease, color 0.35s ease;
}

#site-header.nav-transparent {
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

#site-header.nav-solid {
  background: rgba(255, 255, 255, 1) !important;
  /* Forces the background color over transparent */
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 4px 30px rgba(31, 41, 55, 0.1);
}

#site-header.nav-transparent:not(.nav-solid) .nav-link,
#site-header.nav-transparent:not(.nav-solid) .nav-brand-text,
#site-header.nav-transparent:not(.nav-solid) .menu-btn {
  color: #ffffff;
}

#site-header.nav-solid .nav-link,
#site-header.nav-solid .nav-brand-text,
#site-header.nav-solid .menu-btn {
  /* color: var(--slate-dark); */
  color: #111827;
}

@media (min-width: 1024px) {
  #mobile-menu {
    display: none !important;
  }
}

#mobile-menu {
  background: rgba(255, 255, 255, 0.98);
}

#mobile-menu > div {
  background: #ffffff;
}

#mobile-menu [class*="bg-slate-950"],
#mobile-menu [class*="bg-slate-900"],
#mobile-menu [class*="bg-black"] {
  background-color: #ffffff !important;
}

#mobile-menu [class*="bg-slate-950/"],
#mobile-menu [class*="bg-slate-900/"],
#mobile-menu [class*="bg-black/"] {
  background-color: rgba(255, 255, 255, 0.96) !important;
}

#mobile-menu [class*="text-slate-200"],
#mobile-menu [class*="text-slate-400"],
#mobile-menu [class*="text-slate-500"],
#mobile-menu [class*="text-slate-600"],
#mobile-menu [class*="text-white"] {
  color: #111827 !important;
}

#mobile-menu [class*="border-white/"] {
  border-color: #e5e7eb !important;
}

#mobile-menu [class*="hover:bg-slate-900/60"],
#mobile-menu [class*="hover:bg-white/5"],
#mobile-menu [class*="hover:bg-white/10"] {
  background-color: #f3f4f6 !important;
}

#site-header.nav-solid .nav-link:hover {
  color: var(--deep);
}

#site-header.nav-solid #mobile-menu nav {
  border-color: rgba(31, 41, 55, 0.1);
}

#site-header.nav-solid .menu-btn:hover {
  background: rgba(47, 143, 91, 0.08);
}

#site-header.nav-transparent .nav-link:hover {
  color: var(--emerald);
}

/* Hero */
.hero-section {
  background-image:
    linear-gradient(135deg, rgba(47, 143, 91, 0.92) 0%, rgba(31, 41, 55, 0.88) 55%, rgba(34, 197, 94, 0.75) 100%),
    url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.06'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: cover, auto;
  background-position: center;
}

@media (min-width: 768px) {
  .hero-parallax {
    background-attachment: fixed;
  }
}

/* Floating shapes */
.float-shape {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.35;
  filter: blur(1px);
}

.float-shape-1 {
  width: 120px;
  height: 120px;
  top: 18%;
  left: 8%;
  background: radial-gradient(circle, var(--emerald) 0%, transparent 70%);
  animation: float 8s ease-in-out infinite;
}

.float-shape-2 {
  width: 80px;
  height: 80px;
  top: 55%;
  right: 12%;
  background: radial-gradient(circle, #fff 0%, transparent 70%);
  animation: float 10s ease-in-out infinite 1s;
}

.float-shape-3 {
  width: 160px;
  height: 160px;
  bottom: 15%;
  left: 20%;
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  background: rgba(34, 197, 94, 0.25);
  animation: float 12s ease-in-out infinite 2s;
}

.float-shape-4 {
  width: 60px;
  height: 60px;
  top: 30%;
  right: 25%;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: rgba(255, 255, 255, 0.15);
  animation: float 9s ease-in-out infinite 0.5s;
}

@keyframes float {

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

  50% {
    transform: translateY(-24px) rotate(6deg);
  }
}

/* Glass cards */
.glass-card {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 8px 32px rgba(47, 143, 91, 0.12);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.glass-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(47, 143, 91, 0.18);
}

/* Gradient border cards */
.card-gradient {
  position: relative;
  background: #fff;
  border-radius: 1rem;
  overflow: hidden;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.card-gradient::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--deep), var(--emerald), var(--deep));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.6;
  transition: opacity 0.35s ease;
}

.card-gradient:hover::before {
  opacity: 1;
}

.card-gradient:hover {
  /* transform: scale(1.03); */
  box-shadow: 0 12px 36px rgba(47, 143, 91, 0.15);
}

.card-gradient-inner {
  position: relative;
  z-index: 1;
  /* background: #fff; */
  margin: 2px;
  border-radius: calc(1rem - 2px);
  height: calc(100% - 4px);
}

.product-card {
  min-height: 100%;
}

.product-card img {
  display: block;
}

.product-card .card-label {
  letter-spacing: 0.18em;
}

.product-card .product-meta {
  font-size: 0.72rem;
  line-height: 1.75;
  color: #6b7280;
}

.product-card .product-action {
  border-top: 1px solid #f1f5f9;
}

.product-card .product-action span {
  letter-spacing: 0.02em;
}

.product-card .product-action svg {
  transition: transform 0.3s ease;
}

.product-card:hover .product-action svg {
  transform: translateX(4px);
}

.product-card:hover svg {
  transform: translateX(4px);
}

/* Section reveal */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Hex watermark */
.hex-watermark {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cpath d='M28 0L56 16v32L28 64 0 48V16z' fill='none' stroke='%2322C55E' stroke-width='0.5' opacity='0.12'/%3E%3C/svg%3E");
  background-size: 56px 100px;
}

/* About section photo */
.about-visual {
  position: relative;
  overflow: hidden;
  display: block;
}

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

.about-visual:hover .about-visual-img {
  transform: scale(1.03);
}

/* Fallback if image fails to load */
.about-visual:not(:has(img)) {
  background: linear-gradient(145deg, var(--deep) 0%, #1a5c3a 50%, var(--emerald) 100%);
}

/* Partner badge */
.partner-badge {
  background: linear-gradient(135deg, var(--deep), var(--emerald));
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* Testimonial slider look */
.testimonial-featured {
  box-shadow: 0 20px 50px rgba(47, 143, 91, 0.2);
}

.testimonial-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(47, 143, 91, 0.3);
  display: inline-block;
  margin: 0 4px;
}

.testimonial-dots span.active {
  background: var(--deep);
  width: 24px;
  border-radius: 4px;
}

/* CTA glow */
.cta-banner {
  background: linear-gradient(120deg, var(--deep) 0%, #268f5a 40%, var(--emerald) 100%);
  position: relative;
  overflow: hidden;
}

.cta-banner::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -20%;
  width: 60%;
  height: 200%;
  background: radial-gradient(ellipse, rgba(255, 255, 255, 0.12) 0%, transparent 70%);
  pointer-events: none;
}

/* Button transitions */
.btn-primary {
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(47, 143, 91, 0.35);
}

.btn-outline-light {
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.btn-outline-light:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.15);
}

/* Mobile menu */
#mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: rgba(15, 23, 42, 0.98);
  color: #f8fafc;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(100%);
  transition: transform 0.35s ease, opacity 0.35s ease, visibility 0.35s ease;
}

#mobile-menu.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
}

#mobile-products-collapsible {
  transition: max-height 0.3s ease, opacity 0.3s ease;
  max-height: 0;
  opacity: 0;
  display: none;
}

#mobile-products-collapsible.open {
  display: block !important;
  max-height: none !important;
  opacity: 1 !important;
}

#mobile-products-collapsible.hidden {
  display: none !important;
  max-height: 0 !important;
  opacity: 0 !important;
}

/* Industry scroll snap */
.industries-scroll {
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.industries-scroll>* {
  scroll-snap-align: start;
}

/* Inner page hero */
.page-hero {
  background: linear-gradient(135deg, var(--deep) 0%, #1a5c3a 45%, var(--emerald) 100%);
  padding-top: 5rem;
}

@media (min-width: 768px) {
  .page-hero {
    padding-top: 6rem;
  }
}

/* Breadcrumbs */
.breadcrumbs a {
  color: rgba(255, 255, 255, 0.75);
  transition: color 0.2s ease;
}

.breadcrumbs a:hover {
  color: #fff;
}

.breadcrumbs span {
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0.5rem;
}

/* Nav dropdown */
.nav-dropdown {
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  pointer-events: none;
}

.nav-group:hover .nav-dropdown,
.nav-group:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.nav-dropdown a {
  color: var(--slate-dark);
}

.nav-dropdown a:hover {
  background: rgba(47, 143, 91, 0.08);
  color: var(--deep);
}

/* Active nav link */
#site-header .nav-link.is-active {
  color: var(--deep) !important;
  font-weight: 600;
}

#site-header.nav-transparent .nav-link.is-active {
  color: var(--emerald) !important;
}

/* Product lists */
.product-group {
  border-left: 3px solid var(--emerald);
  padding-left: 1rem;
}

.product-group h3 {
  color: var(--deep);
  font-weight: 700;
  font-size: 1.125rem;
  margin-bottom: 0.75rem;
}

.product-list {
  display: grid;
  gap: 0.35rem;
}

@media (min-width: 640px) {
  .product-list.cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

.product-list li {
  color: #4b5563;
  font-size: 0.9375rem;
  padding-left: 1rem;
  position: relative;
}

.product-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--emerald);
}

/* Mobile products sub-menu */
#mobile-products-sub {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

#mobile-products-sub.open {
  max-height: 320px;
}

/* Hub card link overlay */
.hub-card {
  display: block;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

/* Contact cards */
.contact-card {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(47, 143, 91, 0.15);
}

/* ========== Premium Homepage ========== */

.nav-link-p {
  position: relative;
}

.nav-link-p::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--deep), var(--emerald));
  border-radius: 2px;
  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

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

#site-header.nav-transparent .nav-link-p::after {
  background: linear-gradient(90deg, #fff, var(--emerald));
}

/* Solid brand CTA — avoids broken Tailwind gradient when emerald is customized */
.btn-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: #fff !important;
  text-decoration: none;
  background: linear-gradient(135deg, #14532d 0%, var(--deep) 42%, #1d9a56 78%, var(--emerald) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow:
    0 4px 18px rgba(47, 143, 91, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

.btn-brand:hover {
  filter: brightness(1.06);
  transform: translateY(-2px);
  box-shadow:
    0 10px 28px rgba(47, 143, 91, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.btn-brand .learn-more-arrow {
  transition: transform 0.25s ease;
}

.btn-brand:hover .learn-more-arrow {
  transform: translateX(4px);
}

/* Icon / text gradients (safe with custom emerald scale) */
.icon-gradient-bg {
  background: linear-gradient(135deg, #15803d 0%, var(--deep) 50%, var(--emerald) 100%);
}

.text-gradient-brand {
  background: linear-gradient(135deg, #15803d, var(--deep), var(--emerald));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.btn-premium {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.btn-premium::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: linear-gradient(105deg,
      transparent 0%,
      transparent 40%,
      rgba(255, 255, 255, 0.18) 50%,
      transparent 60%,
      transparent 100%);
  transform: translateX(-120%);
  transition: transform 0.55s ease;
  pointer-events: none;
}

.btn-premium:hover::before {
  transform: translateX(120%);
}

.btn-premium:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(34, 197, 94, 0.4);
}

/* Shine only on hover — keeps fill solid at rest */
.btn-premium.btn-brand::before {
  opacity: 0;
}

.btn-premium.btn-brand:hover::before {
  opacity: 1;
}

/* Hero premium */
.hero-premium {
  min-height: 100vh;
  min-height: 100dvh;
}

.hero-compact {
  min-height: auto;
  min-height: auto;
  padding-top: 6.5rem;
  padding-bottom: 4.5rem;
}

.hero-premium-product {
  min-height: 50vh;
}

.hero-overlay-layer {
  background: linear-gradient(115deg,
      rgba(15, 45, 30, 0.94) 0%,
      rgba(31, 41, 55, 0.88) 45%,
      rgba(47, 143, 91, 0.75) 100%);
}

.hero-overlay-layer2 {
  background: linear-gradient(115deg,
      rgba(15, 45, 30, 0.94) 0%,
      rgba(31, 41, 55, 0.88) 45%,
      rgba(47, 143, 92, 0.952) 100%);
}

.hero-mesh {
  background-image:
    radial-gradient(circle at 20% 50%, rgba(34, 197, 94, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.08) 0%, transparent 40%),
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 48px 48px, 48px 48px;
}

.hero-card-pattern {
  position: relative;
  background-image:
    linear-gradient(180deg, rgba(15, 23, 42, 0.9), rgba(15, 23, 42, 0.5)),
    radial-gradient(circle at 25% 20%, rgba(34, 197, 94, 0.22), transparent 38%),
    radial-gradient(circle at 75% 80%, rgba(255, 255, 255, 0.12), transparent 30%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.08' stroke-width='1'%3E%3Cpath d='M0 60 C30 45 60 75 90 60 S120 45 150 60'/%3E%3Cpath d='M0 30 C30 15 60 45 90 30 S120 15 150 30'/%3E%3Cpath d='M0 90 C30 75 60 105 90 90 S120 75 150 90'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover, cover, cover, 140px 140px;
  background-position: center center, center center, center center, center center;
  overflow: hidden;
}

.hero-card-pattern::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(255,255,255,0.14), transparent 32%);
  pointer-events: none;
}

.particle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  animation: particle-float 15s ease-in-out infinite;
}

@keyframes particle-float {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.3;
  }

  33% {
    transform: translate(12px, -24px) scale(1.1);
    opacity: 0.6;
  }

  66% {
    transform: translate(-8px, 16px) scale(0.9);
    opacity: 0.4;
  }
}

.hero-glass-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

.hero-wave {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  line-height: 0;
  z-index: 20;
}

.stat-pop {
  opacity: 0;
  transform: scale(0.85);
}

.stat-strip .stat-pop,
.hero-premium .stat-pop,
.reveal.visible .stat-pop {
  animation: statPop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: var(--delay, 0s);
}

.hero-premium, .hero-premium-product {
  background: radial-gradient(circle at 30% 35%, #123C26 0%, #081B11 60%, #040E09 100%);
  position: relative;
}

@keyframes statPop {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Stats strip */
.stats-strip {
  background: linear-gradient(90deg, #1a4d32 0%, var(--deep) 50%, #15803d 100%);
}

/* Section label */
.section-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 1rem;
  border-radius: 9999px;
  background: rgba(47, 143, 91, 0.1);
  border: 1px solid rgba(47, 143, 91, 0.2);
  color: var(--deep);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.section-tag-light {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.25);
  color: #fff;
}

/* About floating cards */
.about-float-card {
  position: absolute;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  border-radius: 1rem;
  padding: 1rem 1.25rem;
  box-shadow: 0 20px 50px rgba(47, 143, 91, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.8);
  animation: float 6s ease-in-out infinite;
}

.timeline-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5rem;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--deep), var(--emerald));
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.2);
}

/* Partner logo band */
.partner-logo-tile {
  filter: grayscale(100%) opacity(0.65);
  transition: filter 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease;
}

.partner-logo-tile:hover {
  filter: grayscale(0%) opacity(1);
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(47, 143, 91, 0.15);
}

/* Premium product card */
.premium-product-card {
  position: relative;
  background: #fff;
  border-radius: 1.5rem;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease;
}

.premium-product-card::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--deep), var(--emerald), #86efac);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.5;
  transition: opacity 0.4s ease;
}

.premium-product-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 24px 48px rgba(47, 143, 91, 0.2);
}

.premium-product-card:hover::before {
  opacity: 1;
}

.premium-product-card .card-body {
  position: relative;
  z-index: 1;
  background: #fff;
  margin: 2px;
  border-radius: calc(1.5rem - 2px);
  height: calc(100% - 4px);
}

.learn-more-arrow {
  transition: transform 0.3s ease;
}

.premium-product-card:hover .learn-more-arrow {
  transform: translateX(4px);
}

/* Hex industry card */
.hex-card {
  clip-path: polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0% 50%);
  background: linear-gradient(145deg, #fff 0%, #f0fdf4 100%);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  aspect-ratio: 1 / 1.12;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hex-card:hover {
  transform: scale(1.06);
  box-shadow: 0 16px 40px rgba(47, 143, 91, 0.2);
}

.hex-card-inner {
  text-align: center;
  padding: 2rem 1.5rem;
}

/* Glass feature */
.glass-feature {
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 8px 32px rgba(47, 143, 91, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.glass-feature:hover {
  transform: scale(1.04);
  box-shadow: 0 16px 48px rgba(34, 197, 94, 0.18), 0 0 40px rgba(34, 197, 94, 0.08);
}

.icon-glow {
  box-shadow: 0 0 24px rgba(34, 197, 94, 0.35);
}

/* Process timeline */
.process-line {
  position: absolute;
  top: 2rem;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(90deg, var(--deep), var(--emerald), var(--deep));
  opacity: 0.3;
}

@media (max-width: 1023px) {
  .process-line {
    display: none;
  }
}

.process-step-num {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--deep), var(--emerald));
  color: #fff;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(47, 143, 91, 0.35);
}

/* CTA mega */
.cta-mega {
  background: linear-gradient(125deg, #14532d 0%, var(--deep) 35%, var(--emerald) 70%, #4ade80 100%);
  position: relative;
  overflow: hidden;
}

.cta-mega::before {
  content: "";
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.12) 0%, transparent 70%);
  top: -200px;
  right: -100px;
  animation: cta-pulse 8s ease-in-out infinite;
}

@keyframes cta-pulse {

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

  50% {
    transform: scale(1.15);
    opacity: 1;
  }
}

/* ========== Footer ========== */

/* Root wrapper */
.footer {
  position: relative;
  overflow: hidden;
  color: rgb(226 232 240) !important; /* brighter base text for improved contrast */
}

/* Dark radial background */
.footer.dark {
  background: radial-gradient(circle at 30% 35%, #123C26 0%, #081B11 60%, #040E09 100%);
}

/* Decorative ambient blobs */
.footer .blob {
  position: absolute;
  border-radius: 9999px;
  pointer-events: none;
  filter: blur(80px);
  opacity: 0.18;
}

.footer .blob.blob-1 {
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, #1a5c38 0%, transparent 70%);
  top: -80px;
  right: 10%;
}

.footer .blob.blob-2 {
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, #0d3d22 0%, transparent 70%);
  bottom: 40px;
  left: 5%;
}

/* Column section headings */
.footer .section-title {
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding-left: 0.75rem;
  border-left: 2px solid var(--emerald);
  margin-bottom: 1.25rem;
}

/* Nav / contact links */
.footer .nav-link {
  color: rgb(203 213 225);
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.footer .nav-link:hover {
  color: var(--emerald);
  padding-left: 4px;
}

.footer .nav-link.is-active,
.footer .nav-link.active,
.footer li.current-menu-item > .nav-link,
.footer li.current_page_item > .nav-link,
.footer li.current-menu-ancestor > .nav-link,
.footer .nav-link[aria-current="page"] {
  color: var(--emerald) !important;
  font-weight: 600;
  padding-left: 4px;
}

/* Social / contact icon buttons */
.footer .icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgb(209 213 219);
  background: rgba(255, 255, 255, 0.05);
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.footer .icon-btn:hover {
  border-color: transparent;
  color: #fff;
  background: linear-gradient(135deg, #166534, #10b981);
  transform: scale(1.1);
}

/* Small icon container in contact address rows */
.footer .icon-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  flex-shrink: 0;
  margin-top: 0.125rem;
  background: rgba(16, 185, 129, 0.08);
}

/* Bottom copyright / info bar */
.footer .bottom-bar {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  border-top: 1px solid rgb(255 255 255 / 0.12);
  padding-top: 1.5rem;
  font-size: 0.75rem;
  line-height: 1rem;
  color: rgb(255 255 255 / 0.65); /* stronger footer bar text */
}

@media (min-width: 640px) {
  .footer .bottom-bar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* Curve section */
.curve-top {
  margin-top: -1px;
}

/* Zigzag offset */
.section-offset-right {
  margin-right: clamp(0px, 5vw, 80px);
}

.section-offset-left {
  margin-left: clamp(0px, 5vw, 80px);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .float-shape,
  .particle,
  .about-float-card {
    animation: none;
  }

  .glass-card:hover,
  .card-gradient:hover,
  .premium-product-card:hover,
  .glass-feature:hover,
  .hex-card:hover {
    transform: none;
  }

  .btn-primary:hover,
  .btn-outline-light:hover,
  .btn-premium:hover {
    transform: none;
  }

  .stat-pop {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

.light-glass-card {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(34, 197, 94, 0.12);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.light-glass-card:hover {
  background: #ffffff;
  border-color: rgba(34, 197, 94, 0.3);
  transform: translateY(-6px);
  box-shadow: 0 25px 50px -12px rgba(17, 58, 36, 0.08), 0 0 30px rgba(34, 197, 94, 0.05);
}

.hero-mesh {
  background-color: #031c13;
  background-image:
    radial-gradient(at 15% 15%, rgba(16, 185, 129, 0.15) 0px, transparent 60%),
    radial-gradient(at 85% 85%, rgba(5, 150, 105, 0.12) 0px, transparent 60%),
    radial-gradient(at 50% 50%, rgba(4, 35, 24, 0.8) 0px, transparent 100%);
}

.hero-glass-card:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.15);
  /* transform: translateY(-5px); */
  box-shadow: 0 30px 50px rgba(34, 197, 94, 0.15), inset 0 1px 2px rgba(255, 255, 255, 0.2);
}

.orbit-container {
  position: relative;
}

.orbit-ring {
  position: absolute;
  border: 1px dashed rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  animation: spin 20s linear infinite;
}

.orbit-ring-1 {
  width: 150px;
  height: 60px;
  transform: rotate(-30deg);
  top: 15px;
  left: -15px;
}

.orbit-ring-2 {
  width: 150px;
  height: 60px;
  transform: rotate(40deg);
  top: 15px;
  left: -15px;
  animation-duration: 25s;
  animation-direction: reverse;
}

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

/* Floating Animation */
.floating-element {
  animation: float 6s ease-in-out infinite;
}

@keyframes float {

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

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

/* Dropdown states */
.nav-dropdown {
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(10px);
  transition: all 0.25s ease;
}

.nav-dropdown-trigger:hover .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Custom glow text */
.text-glow {
  text-shadow: 0 0 15px rgba(34, 197, 94, 0.5);
}

.text-green {
  color:rgba(34, 197, 94, 0.5);
}

.text-brand-white {
  color: #fff;
}

/* Meha  */
/* Modern Scrollbar customization for long product lists */
.mega-scrollbar::-webkit-scrollbar {
  width: 4px;
}

.mega-scrollbar::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.02);
  border-radius: 4px;
}

.mega-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(47, 143, 91, 0.2);
  border-radius: 4px;
}

.mega-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(47, 143, 91, 0.4);
}

/* Smooth slide-down & fade animation for Desktop Mega Menu */
@media (min-width: 1024px) {
  .nav-group:hover .nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
  }

  .nav-dropdown {
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(10px);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
  }
}

/* Mobile specific transition styles */
.mobile-accordion {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-accordion.open {
  max-height: 500px;
}

/* Backdrop blur and styling matching style.css theme */
.glass-header {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.mega-menu-container {
  position: absolute;
  top: 100%;
  left: 75%;
  transform: translateX(-50%);
  margin-top: 1.25rem;
  width: 100vw;
  max-width: 80rem;
  padding-left: 1rem;
  padding-right: 1rem;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
  transform: translateX(-50%) translateY(0.5rem);
}

.mega-menu-container:hover,
.group:hover .mega-menu-container {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

@media (max-width: 1280px) {

  /* Extra large screens - 4 columns */
  .mega-menu-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 1024px) {

  /* Large tablets - 3 columns */
  .mega-menu-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {

  /* Tablets - 2 columns */
  .mega-menu-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  /* Adjust mega menu positioning for tablets */
  .mega-menu-container {
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100vw !important;
    max-width: 100vw !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

@media (max-width: 1535px) {
  .mega-menu-container {
    left: 250px !important;
    transform: translateX(-50%) !important;
    width: 85vw !important;
    max-width: 92vw !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

@media (max-width: 480px) {

  /* Mobile phones - 1 column */
  .mega-menu-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  /* Adjust mega menu positioning for mobile */
  .mega-menu-container {
    left: 0 !important;
    transform: none !important;
    width: 100vw !important;
    max-width: 100vw !important;
    padding: 0.5rem !important;
  }

  .mega-menu-header h4 {
    font-size: 1rem !important;
  }

  .mega-menu-header p {
    font-size: 0.875rem !important;
  }

  .mega-menu-column h5 {
    font-size: 0.875rem !important;
  }

  .mega-menu-item {
    padding: 0.5rem !important;
  }

  .mega-menu-item span {
    font-size: 0.8rem !important;
  }
}

/* Enhanced wave animation */
.wave-path {
  stroke-width: 3;
  stroke-dasharray: 8, 4;
  animation: wave-flow 3s linear infinite;
}

@keyframes wave-flow {
  0% {
    stroke-dashoffset: 0;
  }

  100% {
    stroke-dashoffset: -24;
  }
}

.glass-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--border-radius-lg);
  transition: all 0.35s var(--transition-smooth);
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
}

.glass-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* background: linear-gradient(
        135deg,
        transparent 0%,
        rgba(255,106,0,0.1) 50%,
        transparent 100%
    ); */
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.glass-card:hover {
  transform: translateY(-8px) rotateX(2deg);
  border-color: rgba(255, 106, 0, 0.35);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 106, 0, 0.15), var(--shadow-glow);
}

.glass-card:hover::before {
  opacity: 1;
}

/* Gradient Text */
.text-gradient {
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Premium gradient text (hero only) */
.text-gradient-premium {
  background: linear-gradient(90deg, #FF8A00, #FF5E00, #00C853, #64DD17);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}













.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: 100;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
  width: auto;
  height: auto;
  padding: 0.5rem 1rem;
  background: var(--deep);
  color: #fff;
  border-radius: 0.5rem;
}

/* Sticky Header Transition Settings */
/* #site-header {
  transition: background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    backdrop-filter 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
} */

/* #site-header.nav-solid {
  background-color: rgba(3, 28, 19, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 35px -10px rgba(0, 0, 0, 0.35);
} */

/* Scrollbar Design for Sub-Menus */
.mega-scrollbar::-webkit-scrollbar {
  width: 4px;
}

.mega-scrollbar::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 4px;
}

.mega-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(34, 197, 94, 0.25);
  border-radius: 4px;
}

.mega-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(34, 197, 94, 0.45);
}

/* Smooth slide-down & fade animation for Desktop Mega Menu */
@media (min-width: 1024px) {
  .nav-group:hover .nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto !important;
  }

  .nav-dropdown {
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(10px);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
  }
}

/* Mobile / Tablet Accordion Transitions */
.mobile-products-wrapper {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.mobile-products-wrapper.open {
  max-height: 1200px;
}

.mobile-sub-cat-wrapper {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.mobile-sub-cat-wrapper.open {
  max-height: 350px;
}



/* Floating Molecular Animations */
.floating-element {
  animation: floatOrbit 8s ease-in-out infinite alternate;
}

@keyframes floatOrbit {
  0% {
    transform: translateY(0px) rotate(0deg) scale(1);
  }

  100% {
    transform: translateY(-20px) rotate(4deg) scale(1.02);
  }
}

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

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

/* Partner Badge styling */
.partner-card {
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.partner-card:hover {
  transform: translateY(-8px);
}

.bg-brand-emerald {
  --tw-bg-opacity: 1;
  background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
}


.text-brand-emerald\/80 {
  color: rgb(34 197 94 / 0.8);
}

.bg-brand-light {
  --tw-bg-opacity: 1;
  background-color: rgb(242 250 245 / var(--tw-bg-opacity, 1));
}

.border-brand-emerald\/10 {
  border-color: rgb(34 197 94 / 0.1);
}

.group:hover .group-hover\:bg-brand-emerald {
  --tw-bg-opacity: 1;
  background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
}

.group:hover .group-hover\:text-white{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.bg-brand-ash {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}

.bg-emerald {
    --tw-bg-opacity: 1;
    background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1)
);
}

.text-emerald {
    --tw-text-opacity: 1;
    color: rgb(34 197 94 / var(--tw-text-opacity, 1));
}

.bg-emerald\/15 {
    background-color: rgb(34 197 94 / 0.15);
}

.bg-product-card{
  background: linear-gradient(115deg, rgb(2 47 24) 0%, rgba(31, 41, 55, 0.88) 45%, rgb(3 4 3 / 75%) 100%);
}








.text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.tracking-wider {
    letter-spacing: 0.05em;
}
.uppercase {
    text-transform: uppercase;
}
.font-bold {
    font-weight: 700;
}
.text-\[10px\] {
    font-size: 10px;
}
.py-2\.5 {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
}
.bg-brand-black {
    --tw-bg-opacity: 1;
    background-color: rgb(2 10 7 / var(--tw-bg-opacity, 1));
}
.border-brand-border {
    --tw-border-opacity: 1;
    border-color: rgb(13 31 23 / var(--tw-border-opacity, 1));
}
.border {
    border-width: 1px;
}
.rounded {
    border-radius: 0.25rem;
}
.transition-smooth {
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.text-brand-black {
    --tw-text-opacity: 1;
    color: rgb(2 10 7 / var(--tw-text-opacity, 1));
}
.tracking-wider {
    letter-spacing: 0.05em;
}
.uppercase {
    text-transform: uppercase;
}
.font-bold {
    font-weight: 700;
}
.text-\[10px\] {
    font-size: 10px;
}
.py-2\.5 {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
}
.bg-white {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

/* ── Testimonials Carousel ─────────────────────────────── */
.testimonial-carousel-wrapper {
  padding: 0 2.5rem; /* room for arrow buttons */
}

.testimonial-slide {
  /* Each slide occupies one "page" width of the track */
  flex: 0 0 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* On md+ screens show 2 slides at a time */
@media (min-width: 768px) {
  .testimonial-slide {
    flex: 0 0 50%;
    max-width: 50%;
    padding-right: 1rem;
  }
}

/* On lg+ screens show 3 slides at a time */
@media (min-width: 1024px) {
  .testimonial-slide {
    flex: 0 0 33.333%;
    max-width: 33.333%;
    padding-right: 1.5rem;
  }
}

/* Active dot */
.testimonial-dot.active {
  background-color: #22C55E;
  width: 1.75rem;
  border-radius: 9999px;
}

/* ── Brand gradient utilities (fills gap left by missing Tailwind config) ── */

/* Gradient stop colours */
.from-brand-deep  { --tw-gradient-from: var(--deep);   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.via-brand-deep   { --tw-gradient-stops: var(--tw-gradient-from), var(--deep), var(--tw-gradient-to, transparent); }
.to-brand-deep    { --tw-gradient-to: var(--deep); }

.from-brand-medium { --tw-gradient-from: var(--medium); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.via-brand-medium  { --tw-gradient-stops: var(--tw-gradient-from), var(--medium), var(--tw-gradient-to, transparent); }
.to-brand-medium   { --tw-gradient-to: var(--medium); }

/* Tailwind's bg-gradient-* and via-emerald-950 may be missing — provide fallback */
.via-emerald-950 {
  --tw-gradient-stops: var(--tw-gradient-from), #022c22, var(--tw-gradient-to, transparent);
}

/* bg-gradient direction helpers (Tailwind usually generates these) */
.bg-gradient-to-br {
  background-image: linear-gradient(
    to bottom right,
    var(--tw-gradient-stops)
  );
}

/* ── Accreditations & Compliance — infinite scroll strip ── */
@keyframes scroll-certs {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.accreditation-track-wrapper {
  overflow: hidden;
  width: 100%;
}

.accreditation-track {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  width: max-content;
  animation: scroll-certs 28s linear infinite;
  will-change: transform;
}

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

.cert-logo-wrap {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.cert-logo-wrap img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cert-badge:hover .cert-logo-wrap {
  transform: scale(1.08);
  box-shadow: 0 6px 20px rgba(47, 143, 91, 0.18);
}



          /* hide native scrollbar but allow scrolling */
          .no-scrollbar::-webkit-scrollbar {
            display: none;
          }

          .no-scrollbar {
            -ms-overflow-style: none;
            scrollbar-width: none;
          }

          /* entrance animation for slides */
          @keyframes fadeUp {
            from {
              opacity: 0;
              transform: translateY(8px);
            }

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

          .slide {
            opacity: 0;
          }

          /* subtle focus/hover ring for controls */
          .team-control:focus {
            outline: 2px solid rgba(16, 185, 129, 0.12);
            outline-offset: 2px;
          }

.btn-premium-get-quote {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: #fff !important;
  text-decoration: none;
  background: linear-gradient(135deg, #14532d 0%, var(--deep) 42%, #1d9a56 78%, var(--emerald) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow:
    0 4px 18px rgba(47, 143, 91, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

.btn-premium-get-quote:hover {
  filter: brightness(1.06);
  transform: translateY(-2px);
  box-shadow:
    0 10px 28px rgba(47, 143, 91, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
  color: #ffffff !important;
}

.btn-premium-get-quote svg,
.btn-brand svg {
  transition: transform 0.25s ease;
}

.btn-premium-get-quote:hover svg,
.btn-brand:hover svg {
  transform: translateX(4px);
}

@media (max-width: 1023px) {
  a.btn-premium-get-quote {
    display: none !important;
  }
}


.legal-content {
  color: #475569;
  font-size: 16px;
  line-height: 1.75;

  p {
    margin-bottom: 20px;
  }

  h2 {
    margin-top: 36px;
    margin-bottom: 16px;
    color: #0f172a;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.4;

    strong {
      font-weight: 700;
    }
  }

  ul {
    list-style-type: disc !important;
    margin: 0 0 20px 0;
    padding-left: 24px;
  }

  li {
    list-style-type: disc !important;
    display: list-item !important;
    margin-bottom: 8px;
    padding-left: 4px;
  }

  a,
  .text-secondary {
    color: var(--emerald);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;

    &:hover {
      text-decoration: underline;
    }
  }

  strong {
    color: #1e293b;
    font-weight: 600;
  }
}/* Raw CSS for Contact Form */

.contact-form label {
  display: block;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 700;
  color: #374151;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form select,
.contact-form textarea {
  width: 100%;
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  padding: 0.875rem 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #0f172a;
  font-weight: 600;
  transition: all 200ms ease;
  font-family: inherit;
}

.contact-form input[type="text"]:focus,
.contact-form input[type="email"]:focus,
.contact-form input[type="tel"]:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: #22C55E;
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.4);
}

.contact-form input#gst {
  text-transform: uppercase;
}

.contact-form p[role="alert"] {
  font-size: 0.75rem;
  line-height: 1rem;
  color: #dc2626;
  margin-top: 0.5rem;
  min-height: 18px;
  visibility: hidden;
}

.contact-form button[type="submit"] {
  width: 100%;
  padding-top: 1rem;
  padding-bottom: 1rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 18px rgba(47, 143, 91, 0.4);
  overflow: hidden;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(135deg, #14532d 0%, var(--deep) 42%, #1d9a56 78%, var(--emerald) 100%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  transition: all 0.25s ease;
}

.contact-form button[type="submit"]:hover:not(:disabled) {
  filter: brightness(1.06);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(47, 143, 91, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.contact-form button[type="submit"]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ==========================================================================
   Single Product Detail Page Styles
   ========================================================================== */
.product-detail-section {
  padding-top: 4rem;
  padding-bottom: 4rem;
  background-color: #ffffff;
  border-bottom: 1px solid #f1f5f9;
}
@media (min-width: 1024px) {
  .product-detail-section {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}

.product-detail-sidebar .product-detail-nav-link.active {
  color: #10b981 !important;
  font-weight: 700;
}
.product-detail-sidebar .product-detail-nav-dot.active {
  background-color: #10b981 !important;
}

.legal-content {
  color: #475569;
  font-size: 1rem;
  line-height: 1.75;
}
.legal-content p {
  margin-bottom: 1.25rem;
}
.legal-content h2,
.legal-content h3 {
  margin-top: 2.25rem;
  margin-bottom: 1rem;
  color: #0f172a;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.35;
}
.legal-content strong {
  color: #1e293b;
  font-weight: 700;
}
.legal-content ul {
  margin: 0 0 1.25rem 0;
  padding-left: 1.5rem;
  list-style-type: disc;
}
.legal-content li {
  margin-bottom: 0.5rem;
}
.legal-content hr {
  border-color: #f1f5f9;
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
}
.legal-content .product-detail-highlight-box {
  background-color: rgba(16, 185, 129, 0.05);
  border-left: 4px solid #10b981;
  padding: 1.5rem;
  border-top-right-radius: 1rem;
  border-bottom-right-radius: 1rem;
  margin-bottom: 2rem;
}
.legal-content .product-detail-highlight-box p {
  color: #1e293b;
  font-weight: 600;
  margin: 0;
}
.legal-content .product-detail-table-wrapper {
  overflow-x: auto;
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  margin-bottom: 2.5rem;
}
.legal-content .product-detail-table {
  width: 100%;
  text-align: left;
  border-collapse: collapse;
  min-width: 600px;
  margin: 0;
}
.legal-content .product-detail-table thead tr {
  background-color: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}
.legal-content .product-detail-table th {
  padding: 1rem 1.5rem;
  font-size: 0.75rem;
  font-weight: 800;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.legal-content .product-detail-table tbody tr {
  border-bottom: 1px solid #f1f5f9;
  transition: background-color 0.15s ease;
}
.legal-content .product-detail-table tbody tr:hover {
  background-color: rgba(248, 250, 252, 0.6);
}
.legal-content .product-detail-table td {
  padding: 1rem 1.5rem;
  font-size: 0.875rem;
}
.legal-content .product-detail-table td.spec-val {
  font-weight: 700;
  color: #0f172a;
  text-align: right;
}