/*
 * Quark 2 — user customizations
 *
 * This file is safe to edit. It is loaded last so anything here overrides
 * theme.css without having to mark rules !important.
 */
/*
 * Quark 2 — user customizations
 * Rhinestone B2B Website Styles
 * Theme: Quark2 / Grav
 * Version: 20260820-final
 */

/* =====================================================
   VARIABLES
===================================================== */

:root {
  --rh-primary: #7c3aed;
  --rh-primary-dark: #5b21b6;
  --rh-dark: #111827;
  --rh-text: #374151;
  --rh-muted: #6b7280;
  --rh-border: #e5e7eb;
  --rh-light: #f8fafc;
  --rh-white: #ffffff;
  --rh-soft-purple: #f5f3ff;
  --rh-shadow: rgba(15, 23, 42, 0.08);
  --rh-shadow-strong: rgba(15, 23, 42, 0.16);
}

/* =====================================================
   GLOBAL BASE
===================================================== */

html {
  scroll-behavior: smooth;
}

html,
html body {
  background: var(--rh-light) !important;
  color: var(--rh-text) !important;
  min-height: 100% !important;
  overflow-x: hidden !important;
}

html *,
html *::before,
html *::after {
  box-sizing: border-box !important;
}

html body {
  font-family: Inter, Arial, Helvetica, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  -webkit-font-smoothing: antialiased !important;
  text-rendering: optimizeLegibility !important;
}

html body,
html body p,
html body li,
html body a,
html body span,
html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6 {
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}

html body img {
  max-width: 100% !important;
  height: auto;
  display: block;
}

html body a {
  color: var(--rh-primary);
}

html body a:hover {
  color: var(--rh-primary-dark);
}

/* =====================================================
   CONTAINER / LAYOUT WIDTH
===================================================== */

html body #page-wrapper,
html body main,
html body main#start,
html body #start,
html body #body-wrapper,
html body #body-wrapper.section,
html body #body,
html body .wrapper,
html body .content-wrapper {
  max-width: none !important;
  width: 100% !important;
}

html body #body-wrapper,
html body main#start,
html body #start {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

html body #body-wrapper > .container,
html body main#start > .container,
html body #start > .container,
html body #body-wrapper.section > .container,
html body .container,
html body .container.grid-xl,
html body .container.grid-lg,
html body .container.grid-md,
html body .container.grid-sm,
html body .container.grid-xs {
  max-width: 1520px !important;
  width: calc(100vw - 80px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

html body .columns,
html body .column,
html body .col,
html body [class*="col-"],
html body .col-mx-auto {
  max-width: none !important;
}

html body .columns > .column,
html body .columns > .col,
html body .columns > [class*="col-"] {
  flex: 0 0 100% !important;
  width: 100% !important;
  max-width: 100% !important;
}

html body .col-mx-auto {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

html body article.content-item,
html body .content-item,
html body #body-wrapper .container article.content-item,
html body #start .container article.content-item,
html body main#start .container article.content-item,
html body #body-wrapper.section > .container > article.content-item {
  max-width: none !important;
  width: 100% !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

html body article.content-item > .hero-section,
html body article.content-item > .site-section,
html body article.content-item > .cta-section,
html body .content-item > .hero-section,
html body .content-item > .site-section,
html body .content-item > .cta-section {
  width: 100% !important;
  max-width: 1440px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

html body .site-section {
  max-width: 1440px !important;
  width: 100% !important;
  margin: 90px auto !important;
}

html body .hero-section,
html body .cta-section {
  max-width: 1440px !important;
  width: 100% !important;
}

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

html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6 {
  font-family: Inter, Arial, Helvetica, sans-serif !important;
  color: var(--rh-dark) !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
}

html body h1 {
  font-size: 54px !important;
  line-height: 1.1 !important;
  margin-top: 0 !important;
  margin-bottom: 24px !important;
}

html body h2 {
  font-size: 38px !important;
  line-height: 1.18 !important;
  margin-top: 0 !important;
  margin-bottom: 18px !important;
}

html body h3 {
  font-size: 22px !important;
  line-height: 1.3 !important;
  margin-top: 0 !important;
  margin-bottom: 12px !important;
}

html body p,
html body li {
  font-size: 16px !important;
  line-height: 1.72 !important;
  color: #4b5563 !important;
}

/* =====================================================
   HEADER / DESKTOP NAVIGATION
===================================================== */

html body #header,
html body header#header {
  width: 100% !important;
  max-width: none !important;
  min-height: 74px !important;
  background: rgba(255, 255, 255, 0.98) !important;
  border-bottom: 1px solid rgba(229, 231, 235, 0.9) !important;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06) !important;
  z-index: 1000 !important;
}

html body #header .container,
html body header#header .container {
  max-width: 1520px !important;
  width: calc(100vw - 80px) !important;
  min-height: 74px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

html body #header nav.navbar,
html body header#header nav.navbar {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;
  max-width: 1520px !important;
  min-height: 74px !important;

  margin-left: auto !important;
  margin-right: auto !important;

  gap: 24px !important;
}

html body #header nav.navbar > .navbar-section.logo,
html body header#header nav.navbar > .navbar-section.logo {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

html body #header .logo img,
html body header#header .logo img,
html body #header .navbar-section.logo img,
html body header#header .navbar-section.logo img {
  display: block !important;
  max-height: 58px !important;
  max-width: 180px !important;
  width: auto !important;
  height: auto !important;
}

html body #header .logo a,
html body header#header .logo a,
html body #header .navbar-section.logo a,
html body header#header .navbar-section.logo a {
  display: flex !important;
  align-items: center !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
}

html body #header nav.navbar > .navbar-section.desktop-menu,
html body header#header nav.navbar > .navbar-section.desktop-menu {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

html body #header .desktop-menu ul,
html body #header .desktop-menu .navigation,
html body #header .desktop-menu .navbar-nav,
html body header#header .desktop-menu ul,
html body header#header .desktop-menu .navigation,
html body header#header .desktop-menu .navbar-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;

  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;

  gap: 10px !important;
  list-style: none !important;
  white-space: nowrap !important;
  flex-wrap: nowrap !important;
}

html body #header .desktop-menu li,
html body header#header .desktop-menu li {
  flex: 0 0 auto !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body #header .desktop-menu a,
html body header#header .desktop-menu a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-height: 34px !important;
  padding: 8px 12px !important;

  border-radius: 7px !important;
  background: transparent !important;
  color: #111827 !important;

  font-family: Inter, Arial, Helvetica, sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-decoration: none !important;
}

html body #header .desktop-menu li.active > a,
html body #header .desktop-menu a.active,
html body header#header .desktop-menu li.active > a,
html body header#header .desktop-menu a.active {
  background: #111827 !important;
  color: #ffffff !important;
}

html body #header .desktop-menu a:hover,
html body header#header .desktop-menu a:hover {
  background: #f3f4f6 !important;
  color: #111827 !important;
}

html body #header .desktop-menu li.active > a:hover,
html body #header .desktop-menu a.active:hover,
html body header#header .desktop-menu li.active > a:hover,
html body header#header .desktop-menu a.active:hover {
  background: #111827 !important;
  color: #ffffff !important;
}

html body #header nav.navbar > .navbar-section.actions,
html body header#header nav.navbar > .navbar-section.actions {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;

  margin-left: 12px !important;
  padding: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  overflow: visible !important;
}

/* =====================================================
   LANGUAGE SWITCHER
===================================================== */

html body #header .language-switcher,
html body .mobile-menu .language-switcher {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

html body #header .language-current,
html body .mobile-menu .language-current {
  appearance: none !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;

  height: 32px !important;
  min-width: 42px !important;
  padding: 0 12px !important;

  border-radius: 999px !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  background: #ffffff !important;
  color: #111827 !important;

  font-family: Inter, Arial, Helvetica, sans-serif !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.02em !important;
  text-decoration: none !important;

  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08) !important;
  cursor: default !important;
}

html body #header button.language-current,
html body .mobile-menu button.language-current {
  outline: none !important;
}

html body #header .language-arrow,
html body .mobile-menu .language-arrow {
  font-size: 10px !important;
  line-height: 1 !important;
  opacity: 0.75 !important;
}

html body #header .language-menu {
  position: absolute !important;
  top: calc(100% + 10px) !important;
  right: 0 !important;
  z-index: 9999 !important;

  min-width: 132px !important;
  margin: 0 !important;
  padding: 8px !important;

  list-style: none !important;
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.10) !important;
  border-radius: 14px !important;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16) !important;

  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(8px) !important;
  transition: all 0.18s ease !important;
}

html body #header .language-switcher:hover .language-menu {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

html body #header .language-menu li {
  margin: 0 !important;
  padding: 0 !important;
}

html body #header .language-menu a {
  display: flex !important;
  align-items: center !important;

  padding: 9px 10px !important;
  border-radius: 9px !important;

  color: #111827 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

html body #header .language-menu a:hover {
  background: #f3f4f6 !important;
  color: #6d28d9 !important;
}

/* =====================================================
   HERO SECTION
===================================================== */

html body .hero-section {
  position: relative !important;
  margin: 0 auto 92px auto !important;
  padding: 100px 76px !important;
  background:
    radial-gradient(circle at top right, rgba(124, 58, 237, 0.32), transparent 36%),
    radial-gradient(circle at bottom left, rgba(255, 255, 255, 0.08), transparent 30%),
    linear-gradient(135deg, #111827 0%, #111827 48%, #312e81 100%) !important;
  color: #ffffff !important;
  border-radius: 0 0 40px 40px !important;
  overflow: hidden !important;
  box-shadow: 0 30px 80px rgba(15, 23, 42, 0.18) !important;
}

html body .hero-inner {
  max-width: 860px !important;
  margin: 0 !important;
  position: relative !important;
  z-index: 2 !important;
}

html body .hero-section h1 {
  color: #ffffff !important;
  font-size: 58px !important;
  line-height: 1.08 !important;
  letter-spacing: -0.035em !important;
  max-width: 820px !important;
  margin-bottom: 24px !important;
}

html body .hero-section p,
html body .hero-section li,
html body .hero-section span {
  color: #f3f4f6 !important;
}

html body .hero-section .section-eyebrow {
  color: #ffffff !important;
  opacity: 0.96 !important;
}

html body .hero-subtitle {
  max-width: 780px !important;
  font-size: 21px !important;
  line-height: 1.6 !important;
  color: #f9fafb !important;
  margin-bottom: 18px !important;
}

html body .hero-text {
  max-width: 780px !important;
  font-size: 16px !important;
  line-height: 1.75 !important;
  color: #e5e7eb !important;
  margin-bottom: 36px !important;
}

/* =====================================================
   BUTTONS
===================================================== */

html body .hero-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  align-items: center !important;
}

html body .center-actions {
  justify-content: center !important;
}

html body a.btn-primary,
html body a.btn-secondary,
html body a.btn-outline {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 48px !important;
  padding: 14px 26px !important;
  border-radius: 999px !important;
  font-family: Inter, Arial, Helvetica, sans-serif !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  border: 0 !important;
  line-height: 1 !important;
  transition: all 0.25s ease !important;
  cursor: pointer !important;
}

html body a.btn-primary {
  background: var(--rh-primary) !important;
  color: #ffffff !important;
  box-shadow: 0 14px 28px rgba(124, 58, 237, 0.36) !important;
}

html body a.btn-primary:hover {
  background: var(--rh-primary-dark) !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
}

html body a.btn-secondary {
  background: #ffffff !important;
  color: var(--rh-primary-dark) !important;
}

html body a.btn-secondary:hover {
  color: var(--rh-primary-dark) !important;
  transform: translateY(-2px) !important;
}

html body a.btn-outline {
  border: 2px solid var(--rh-primary) !important;
  color: var(--rh-primary) !important;
  background: #ffffff !important;
}

html body a.btn-outline:hover {
  background: var(--rh-primary) !important;
  color: #ffffff !important;
}

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

html body .section-header {
  max-width: 980px !important;
  margin-bottom: 44px !important;
}

html body .section-eyebrow {
  color: var(--rh-primary) !important;
  text-transform: uppercase !important;
  font-weight: 900 !important;
  letter-spacing: 0.12em !important;
  font-size: 12px !important;
  margin-bottom: 12px !important;
}

html body .section-eyebrow::after {
  content: "" !important;
  display: block !important;
  width: 34px !important;
  height: 3px !important;
  background: var(--rh-dark) !important;
  margin-top: 10px !important;
  border-radius: 999px !important;
}

html body .section-header h2 {
  font-size: 38px !important;
  line-height: 1.18 !important;
  margin-bottom: 16px !important;
}

html body .section-intro {
  color: var(--rh-muted) !important;
  font-size: 17px !important;
  line-height: 1.75 !important;
  max-width: 920px !important;
}

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

html body .grid-2,
html body .grid-3,
html body .grid-4 {
  display: grid !important;
  gap: 38px !important;
  width: 100% !important;
  min-width: 0 !important;
}

html body .grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

html body .grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

html body .grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

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

html body .card {
  width: 100% !important;
  min-width: 0 !important;
  background: #ffffff !important;
  border: 1px solid var(--rh-border) !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08) !important;
  transition: all 0.25s ease !important;
}

html body .card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 26px 60px rgba(15, 23, 42, 0.14) !important;
}

html body .card img {
  display: block !important;
  width: 100% !important;
  height: 280px !important;
  object-fit: cover !important;
  background: #f3f4f6 !important;
  border: 0 !important;
  margin: 0 !important;
}

html body .card-body {
  padding: 30px 28px 32px !important;
}

html body .card-body h3 {
  font-size: 22px !important;
  line-height: 1.25 !important;
  margin-top: 0 !important;
  margin-bottom: 12px !important;
  color: var(--rh-dark) !important;
  letter-spacing: -0.02em !important;
}

html body .card-body p {
  font-size: 15.5px !important;
  line-height: 1.68 !important;
  color: var(--rh-muted) !important;
  margin-bottom: 18px !important;
}

html body .card-body a {
  color: var(--rh-primary) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}

html body .card-body a:hover {
  color: var(--rh-primary-dark) !important;
}

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

html body .feature-card {
  background: #ffffff !important;
  border: 1px solid var(--rh-border) !important;
  border-radius: 22px !important;
  padding: 32px !important;
  box-shadow: 0 12px 35px rgba(15, 23, 42, 0.06) !important;
  transition: all 0.25s ease !important;
}

html body .feature-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 22px 55px rgba(15, 23, 42, 0.11) !important;
}

html body .feature-icon {
  width: 52px !important;
  height: 52px !important;
  border-radius: 16px !important;
  background: var(--rh-soft-purple) !important;
  color: var(--rh-primary) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 24px !important;
  margin-bottom: 18px !important;
}

html body .feature-card h3 {
  font-size: 22px !important;
  margin-bottom: 12px !important;
}

html body .feature-card p {
  color: var(--rh-muted) !important;
}

/* =====================================================
   SPLIT SECTION
===================================================== */

html body .split-section {
  display: grid !important;
  grid-template-columns: 1.05fr 0.95fr !important;
  gap: 56px !important;
  align-items: center !important;
}

html body .split-section img {
  width: 100% !important;
  border-radius: 26px !important;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.16) !important;
}

/* =====================================================
   FAQ
===================================================== */

html body .faq-list {
  display: grid !important;
  gap: 18px !important;
}

html body .faq-item {
  background: #ffffff !important;
  border: 1px solid var(--rh-border) !important;
  border-radius: 20px !important;
  padding: 28px !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05) !important;
}

html body .faq-item h3 {
  font-size: 21px !important;
  margin-top: 0 !important;
  margin-bottom: 10px !important;
}

html body .faq-item p {
  color: var(--rh-muted) !important;
}

/* =====================================================
   CTA SECTION
===================================================== */

html body .cta-section {
  margin: 100px auto 0 auto !important;
  padding: 92px 56px !important;
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.16), transparent 34%),
    linear-gradient(135deg, rgba(91, 33, 182, 0.98), rgba(17, 24, 39, 0.96)) !important;
  color: #ffffff !important;
  text-align: center !important;
  border-radius: 36px 36px 0 0 !important;
  overflow: hidden !important;
}

html body .cta-inner {
  max-width: 900px !important;
  margin: 0 auto !important;
}

html body .cta-section h2 {
  color: #ffffff !important;
  font-size: 46px !important;
  line-height: 1.16 !important;
  margin-bottom: 18px !important;
}

html body .cta-section p {
  color: #f3f4f6 !important;
  font-size: 18px !important;
  line-height: 1.7 !important;
}

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

html body #footer.site-footer,
html body footer.site-footer {
  width: 100% !important;
  background: #0f172a !important;
  color: #cbd5e1 !important;
  margin-top: 72px !important;
  padding: 0 !important;
  border-top: 1px solid rgba(148, 163, 184, 0.18) !important;
}

html body #footer .footer-inner {
  max-width: 1440px !important;
  width: calc(100vw - 80px) !important;
  margin: 0 auto !important;
  padding: 64px 0 28px !important;
}

html body #footer .footer-grid {
  display: grid !important;
  grid-template-columns: 1.5fr 1fr 1fr 1.15fr !important;
  gap: 48px !important;
  align-items: flex-start !important;
}

html body #footer .footer-brand {
  max-width: 420px !important;
}

html body #footer .footer-logo {
  display: inline-flex !important;
  align-items: center !important;
  margin-bottom: 18px !important;
  text-decoration: none !important;
}

html body #footer .footer-logo img {
  display: block !important;
  max-height: 58px !important;
  width: auto !important;
  filter: brightness(0) invert(1) !important;
}

html body #footer .footer-brand p {
  margin: 0 !important;
  color: #94a3b8 !important;
  font-size: 14px !important;
  line-height: 1.75 !important;
}

html body #footer .footer-col h3 {
  margin: 0 0 18px !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  letter-spacing: 0.02em !important;
}

html body #footer .footer-col ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body #footer .footer-col li {
  margin: 0 0 11px !important;
  padding: 0 !important;
  color: #94a3b8 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

html body #footer .footer-col a {
  color: #cbd5e1 !important;
  text-decoration: none !important;
  transition: color 0.2s ease, padding-left 0.2s ease !important;
}

html body #footer .footer-col a:hover {
  color: #ffffff !important;
  padding-left: 4px !important;
}

html body #footer .footer-contact strong {
  color: #ffffff !important;
  font-weight: 800 !important;
}

html body #footer .footer-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 10px !important;
  padding: 11px 18px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #7c3aed, #2563eb) !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  text-decoration: none !important;
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.28) !important;
}

html body #footer .footer-btn:hover {
  color: #ffffff !important;
  transform: translateY(-1px) !important;
}

html body #footer .footer-bottom {
  margin-top: 48px !important;
  padding-top: 24px !important;
  border-top: 1px solid rgba(148, 163, 184, 0.18) !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
}

html body #footer .footer-bottom p {
  margin: 0 !important;
  color: #94a3b8 !important;
  font-size: 13px !important;
}

html body #footer .footer-bottom-links {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
}

html body #footer .footer-bottom-links a {
  color: #94a3b8 !important;
  text-decoration: none !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

html body #footer .footer-bottom-links a:hover {
  color: #ffffff !important;
}

/* =====================================================
   MOBILE HEADER / MOBILE MENU
===================================================== */

@media screen and (max-width: 1024px) {
  html,
  body,
  html body #page-wrapper {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  html body #header,
  html body header#header {
    width: 100% !important;
    max-width: 100% !important;
    height: 76px !important;
    min-height: 76px !important;
    background: #ffffff !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
    overflow: visible !important;
  }

  html body #header .container {
    width: 100% !important;
    max-width: 100% !important;
    height: 76px !important;
    min-height: 76px !important;
    padding: 0 18px !important;
    margin: 0 !important;
  }

  html body #header nav.navbar {
    width: 100% !important;
    max-width: 100% !important;
    height: 76px !important;
    min-height: 76px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  html body #header .navbar-section.logo {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 auto !important;
    width: auto !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  html body #header .navbar-section.logo img {
    max-height: 48px !important;
    width: auto !important;
    display: block !important;
  }

  html body #header .navbar-section.desktop-menu,
  html body #header .navbar-section.desktop-menu *,
  html body #header .desktop-menu,
  html body #header .desktop-menu *,
  html body #header .dropmenu,
  html body #header .dropmenu *,
  html body #header .navbar-section.actions,
  html body #header .navbar-section.actions * {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  html body .theme-toggle,
  html body .theme-switcher,
  html body [data-theme-toggle],
  html body button[aria-label*="theme"],
  html body button[aria-label*="Theme"],
  html body button[aria-label*="dark"],
  html body button[aria-label*="Dark"],
  html body button[aria-label*="mode"],
  html body button[aria-label*="Mode"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  html body #toggle,
  html body .button_container#toggle,
  html body .mobile-menu .button_container {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    position: fixed !important;
    top: 20px !important;
    right: 18px !important;
    z-index: 10050 !important;

    width: 42px !important;
    height: 42px !important;

    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    border-radius: 999px !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12) !important;

    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  html body #toggle span,
  html body .button_container#toggle span,
  html body .mobile-menu .button_container span {
    display: block !important;
    position: absolute !important;
    left: 12px !important;

    width: 18px !important;
    height: 2px !important;

    background: #111827 !important;
    border-radius: 999px !important;

    opacity: 1 !important;
    visibility: visible !important;
  }

  html body #toggle span.top,
  html body .button_container#toggle span.top {
    top: 13px !important;
  }

  html body #toggle span.middle,
  html body .button_container#toggle span.middle {
    top: 20px !important;
  }

  html body #toggle span.bottom,
  html body .button_container#toggle span.bottom {
    top: 27px !important;
  }

  html body #toggle.active span.top,
  html body .button_container#toggle.active span.top {
    top: 20px !important;
    transform: rotate(45deg) !important;
  }

  html body #toggle.active span.middle,
  html body .button_container#toggle.active span.middle {
    opacity: 0 !important;
  }

  html body #toggle.active span.bottom,
  html body .button_container#toggle.active span.bottom {
    top: 20px !important;
    transform: rotate(-45deg) !important;
  }

  html body .mobile-menu {
    background: #ffffff !important;
    color: #111827 !important;
  }

  html body .mobile-menu .overlay,
  html body .mobile-menu .overlay-menu,
  html body .mobile-menu .mobile-container,
  html body .mobile-menu nav {
    background: #ffffff !important;
  }

  html body .mobile-menu img {
    max-height: 44px !important;
    width: auto !important;
    margin: 24px 0 24px 20px !important;
    display: block !important;
  }

  html body .mobile-menu ul.navigation,
  html body .mobile-menu .navigation,
  html body .mobile-menu ul {
    margin: 32px 0 0 0 !important;
    padding: 0 32px !important;
    list-style: none !important;
  }

  html body .mobile-menu li {
    margin: 0 !important;
    padding: 0 !important;
  }

  html body .mobile-menu li a,
  html body .mobile-menu .navigation a {
    display: block !important;

    padding: 11px 0 !important;
    margin: 0 !important;

    color: #111827 !important;

    font-family: Inter, Arial, Helvetica, sans-serif !important;
    font-size: 21px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.025em !important;

    text-decoration: none !important;
    text-shadow: none !important;

    -webkit-font-smoothing: antialiased !important;
    text-rendering: geometricPrecision !important;
  }

  html body .mobile-menu li a:hover,
  html body .mobile-menu li.active > a,
  html body .mobile-menu .navigation a.active {
    color: #6d28d9 !important;
  }

  html body .mobile-menu a *,
  html body .mobile-menu li * {
    text-shadow: none !important;
    -webkit-text-stroke: 0 !important;
  }

  html body .mobile-menu .language-switcher {
    margin: 28px 0 0 32px !important;
    display: inline-flex !important;
  }

  html body .mobile-menu .language-current {
    height: 36px !important;
    min-width: 58px !important;
    padding: 0 14px !important;

    border-radius: 999px !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    background: #f8fafc !important;
    color: #111827 !important;

    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: 0.01em !important;

    box-shadow: none !important;
  }

  html body .mobile-menu .language-arrow {
    font-size: 10px !important;
    opacity: 0.65 !important;
  }
}

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

@media (min-width: 1200px) {
  html body #body-wrapper > .container,
  html body main#start > .container,
  html body #start > .container,
  html body #body-wrapper.section > .container,
  html body .container {
    width: calc(100vw - 80px) !important;
    max-width: 1520px !important;
  }

  html body .site-section,
  html body .hero-section,
  html body .cta-section {
    max-width: 1440px !important;
  }
}

@media (min-width: 1600px) {
  html body #body-wrapper > .container,
  html body main#start > .container,
  html body #start > .container,
  html body #body-wrapper.section > .container,
  html body .container {
    width: calc(100vw - 100px) !important;
    max-width: 1560px !important;
  }

  html body .site-section,
  html body .hero-section,
  html body .cta-section {
    max-width: 1480px !important;
  }
}

@media (max-width: 1199px) {
  html body #body-wrapper > .container,
  html body main#start > .container,
  html body #start > .container,
  html body #body-wrapper.section > .container,
  html body .container {
    width: calc(100vw - 48px) !important;
    max-width: 100% !important;
  }

  html body .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 960px) {
  html body #body-wrapper > .container,
  html body main#start > .container,
  html body #start > .container,
  html body #body-wrapper.section > .container,
  html body .container {
    width: calc(100vw - 40px) !important;
  }

  html body h1 {
    font-size: 42px !important;
  }

  html body h2 {
    font-size: 32px !important;
  }

  html body .hero-section {
    padding: 82px 36px !important;
  }

  html body .hero-section h1 {
    font-size: 42px !important;
  }

  html body .hero-subtitle {
    font-size: 19px !important;
  }

  html body .grid-2,
  html body .grid-3,
  html body .grid-4,
  html body .split-section {
    grid-template-columns: 1fr !important;
  }

  html body .card img {
    height: 260px !important;
  }

  html body .site-section {
    margin: 72px auto !important;
  }

  html body .cta-section {
    padding: 78px 36px !important;
  }

  html body .cta-section h2 {
    font-size: 36px !important;
  }
}

@media (max-width: 720px) {
  html body #footer .footer-inner {
    width: calc(100vw - 32px) !important;
    padding: 48px 0 24px !important;
  }

  html body #footer .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  html body #footer .footer-bottom {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
  }

  html body #footer .footer-bottom-links {
    flex-wrap: wrap !important;
    gap: 12px !important;
  }
}

@media (max-width: 600px) {
  html body #body-wrapper > .container,
  html body main#start > .container,
  html body #start > .container,
  html body #body-wrapper.section > .container,
  html body .container {
    width: calc(100vw - 32px) !important;
  }

  html body h1 {
    font-size: 34px !important;
  }

  html body h2 {
    font-size: 28px !important;
  }

  html body h3 {
    font-size: 20px !important;
  }

  html body p,
  html body li {
    font-size: 15.5px !important;
  }

  html body .hero-section {
    border-radius: 0 0 26px 26px !important;
    padding: 70px 24px !important;
    margin: 0 auto 64px auto !important;
  }

  html body .hero-section h1 {
    font-size: 34px !important;
  }

  html body .hero-subtitle {
    font-size: 18px !important;
  }

  html body .hero-actions {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  html body a.btn-primary,
  html body a.btn-secondary,
  html body a.btn-outline {
    width: 100% !important;
  }

  html body .site-section {
    margin: 60px auto !important;
  }

  html body .section-header {
    margin-bottom: 32px !important;
  }

  html body .section-header h2 {
    font-size: 28px !important;
  }

  html body .grid-2,
  html body .grid-3,
  html body .grid-4 {
    gap: 24px !important;
  }

  html body .card img {
    height: 230px !important;
  }

  html body .card-body {
    padding: 24px 22px 26px !important;
  }

  html body .cta-section {
    padding: 66px 24px !important;
    border-radius: 28px 28px 0 0 !important;
  }

  html body .cta-section h2 {
    font-size: 30px !important;
  }
}

/* =====================================================
   BACK TO TOP BUTTON
===================================================== */

html body .back-to-top {
  position: fixed !important;
  right: 24px !important;
  bottom: 28px !important;
  z-index: 9999 !important;

  width: 46px !important;
  height: 46px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 999px !important;
  background: linear-gradient(135deg, #6d28d9 0%, #2563eb 100%) !important;
  color: #ffffff !important;

  font-size: 24px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-decoration: none !important;

  box-shadow: 0 14px 34px rgba(37, 99, 235, 0.32) !important;

  opacity: 0.92 !important;
  transition: all 0.22s ease !important;
}

html body .back-to-top:hover {
  transform: translateY(-3px) !important;
  opacity: 1 !important;
  color: #ffffff !important;
  text-decoration: none !important;
  box-shadow: 0 18px 42px rgba(37, 99, 235, 0.42) !important;
}

@media screen and (max-width: 768px) {
  html body .back-to-top {
    right: 18px !important;
    bottom: 22px !important;

    width: 42px !important;
    height: 42px !important;

    font-size: 22px !important;
  }
}
/* =====================================================
   NEW HOME PAGE DESIGN
===================================================== */

/* Hero */
html body .home-hero {
  padding: 110px 76px !important;
}

html body .home-hero .hero-grid {
  max-width: 1240px !important;
  margin: 0 auto !important;

  display: grid !important;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.75fr) !important;
  gap: 64px !important;
  align-items: center !important;
}

html body .home-hero .hero-content {
  max-width: 760px !important;
}

html body .home-hero .hero-image-wrap {
  position: relative !important;
  min-height: 420px !important;
  border-radius: 32px !important;
  overflow: hidden !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.28) !important;
}

html body .home-hero .hero-image-wrap img {
  width: 100% !important;
  height: 420px !important;
  object-fit: cover !important;
  display: block !important;
}

html body .hero-trust {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-top: 28px !important;
}

html body .hero-trust span {
  display: inline-flex !important;
  align-items: center !important;

  padding: 9px 13px !important;
  border-radius: 999px !important;

  background: rgba(255, 255, 255, 0.10) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;

  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

/* Stats bar */
html body .home-stats {
  max-width: 1440px !important;
  width: 100% !important;
  margin: -46px auto 96px auto !important;
  padding: 0 36px !important;
  position: relative !important;
  z-index: 5 !important;
}

html body .home-stats-inner {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0 !important;

  background: #ffffff !important;
  border: 1px solid rgba(229, 231, 235, 0.95) !important;
  border-radius: 26px !important;
  box-shadow: 0 22px 55px rgba(15, 23, 42, 0.12) !important;
  overflow: hidden !important;
}

html body .home-stat-item {
  padding: 30px 34px !important;
  border-right: 1px solid #e5e7eb !important;
}

html body .home-stat-item:last-child {
  border-right: 0 !important;
}

html body .home-stat-item strong {
  display: block !important;
  color: #111827 !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin-bottom: 8px !important;
}

html body .home-stat-item span {
  display: block !important;
  color: #6b7280 !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
}

/* Section center */
html body .section-center {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

html body .section-center .section-eyebrow::after {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Product cards */
html body .product-range-grid {
  gap: 28px !important;
}

html body .product-card img {
  height: 245px !important;
}

html body .product-tag {
  display: inline-flex !important;
  margin-bottom: 12px !important;

  color: #7c3aed !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
}

/* Applications */
html body .application-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 22px !important;
}

html body .application-item {
  display: block !important;

  padding: 30px !important;
  border-radius: 22px !important;

  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 12px 34px rgba(15, 23, 42, 0.06) !important;

  text-decoration: none !important;
  transition: all 0.24s ease !important;
}

html body .application-item:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 24px 55px rgba(15, 23, 42, 0.12) !important;
}

html body .application-item span {
  display: block !important;

  color: #111827 !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  margin-bottom: 10px !important;
}

html body .application-item p {
  margin: 0 !important;
  color: #6b7280 !important;
  font-size: 14.5px !important;
  line-height: 1.65 !important;
}

/* Process */
html body .process-steps {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

html body .process-step {
  position: relative !important;

  padding: 30px 24px !important;
  border-radius: 22px !important;

  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 12px 34px rgba(15, 23, 42, 0.06) !important;
}

html body .process-step strong {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 44px !important;
  height: 44px !important;

  margin-bottom: 18px !important;
  border-radius: 999px !important;

  background: #f5f3ff !important;
  color: #7c3aed !important;

  font-size: 14px !important;
  font-weight: 900 !important;
}

html body .process-step h3 {
  font-size: 18px !important;
  margin-bottom: 10px !important;
}

html body .process-step p {
  margin: 0 !important;
  font-size: 14.5px !important;
  line-height: 1.65 !important;
  color: #6b7280 !important;
}

/* Custom solution CTA */
html body .custom-solution-section {
  max-width: 1440px !important;
  width: 100% !important;
  margin: 100px auto !important;
  padding: 0 !important;
}

html body .custom-solution-inner {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 32px !important;
  align-items: center !important;

  padding: 54px 60px !important;
  border-radius: 30px !important;

  background:
    radial-gradient(circle at top right, rgba(124, 58, 237, 0.16), transparent 34%),
    #ffffff !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 20px 55px rgba(15, 23, 42, 0.08) !important;
}

html body .custom-solution-inner h2 {
  font-size: 34px !important;
  margin-bottom: 12px !important;
}

html body .custom-solution-inner p {
  max-width: 720px !important;
  margin: 0 !important;
  color: #6b7280 !important;
}

/* Responsive */
@media screen and (max-width: 1100px) {
  html body .home-hero .hero-grid {
    grid-template-columns: 1fr !important;
    gap: 42px !important;
  }

  html body .home-hero .hero-image-wrap {
    min-height: 320px !important;
  }

  html body .home-hero .hero-image-wrap img {
    height: 320px !important;
  }

  html body .process-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html body .application-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media screen and (max-width: 768px) {
  html body .home-hero {
    padding: 72px 24px !important;
  }

  html body .home-hero .hero-grid {
    display: block !important;
  }

  html body .home-hero .hero-image-wrap {
    display: none !important;
  }

  html body .hero-trust {
    gap: 8px !important;
  }

  html body .hero-trust span {
    width: 100% !important;
    justify-content: center !important;
  }

  html body .home-stats {
    margin: -28px auto 66px auto !important;
    padding: 0 16px !important;
  }

  html body .home-stats-inner {
    grid-template-columns: 1fr !important;
  }

  html body .home-stat-item {
    border-right: 0 !important;
    border-bottom: 1px solid #e5e7eb !important;
    padding: 24px !important;
  }

  html body .home-stat-item:last-child {
    border-bottom: 0 !important;
  }

  html body .application-grid,
  html body .process-steps {
    grid-template-columns: 1fr !important;
  }

  html body .custom-solution-section {
    margin: 70px auto !important;
  }

  html body .custom-solution-inner {
    grid-template-columns: 1fr !important;
    padding: 38px 24px !important;
    text-align: left !important;
  }

  html body .custom-solution-inner .btn-primary {
    width: 100% !important;
  }
}
/* =====================================================
   WHY YANTUO CRYSTAL
   B2B FACTORY / TRUST SECTION
   ===================================================== */

html body .why-section-pro {
  position: relative !important;
  overflow: visible !important;
}


/* -----------------------------------------------------
   MAIN LAYOUT
   ----------------------------------------------------- */

html body .why-section-pro .why-pro-layout {
  display: grid !important;
  grid-template-columns: 0.95fr 1.35fr !important;
  gap: 30px !important;
  align-items: stretch !important;
}


/* -----------------------------------------------------
   LEFT FACTORY IMAGE
   ----------------------------------------------------- */

html body .why-section-pro .why-factory-panel {
  position: relative !important;
  min-height: 620px !important;
}


html body .why-section-pro .why-factory-image {
  position: relative !important;
  height: 100% !important;
  min-height: 620px !important;

  overflow: hidden !important;

  border-radius: 20px !important;

  background: #111827 !important;
}


html body .why-section-pro .why-factory-image img {
  width: 100% !important;
  height: 100% !important;
  min-height: 620px !important;

  object-fit: cover !important;

  display: block !important;
}


html body .why-section-pro .factory-overlay {
  position: absolute !important;
  inset: 0 !important;

  background:
    linear-gradient(
      180deg,
      rgba(15,23,42,0.02) 20%,
      rgba(15,23,42,0.78) 100%
    ) !important;
}


/* -----------------------------------------------------
   FACTORY STATISTICS
   ----------------------------------------------------- */

html body .why-section-pro .factory-stats {
  position: absolute !important;

  top: 28px !important;
  left: 28px !important;

  display: flex !important;
  gap: 10px !important;

  z-index: 2 !important;
}


html body .why-section-pro .factory-stat {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;

  padding: 12px 16px !important;

  background: rgba(255,255,255,0.96) !important;

  border-radius: 10px !important;

  box-shadow:
    0 12px 30px rgba(15,23,42,0.18) !important;
}


html body .why-section-pro .factory-stat strong {
  color: #111827 !important;

  font-size: 28px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
}


html body .why-section-pro .factory-stat span {
  color: #64748b !important;

  font-size: 10px !important;
  line-height: 1.25 !important;

  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}


/* -----------------------------------------------------
   FACTORY VIDEO CARD
   ----------------------------------------------------- */

html body .why-section-pro .factory-video-card {
  position: absolute !important;

  left: 24px !important;
  right: 24px !important;
  bottom: 24px !important;

  display: flex !important;
  align-items: center !important;

  gap: 14px !important;

  padding: 16px 18px !important;

  background: rgba(255,255,255,0.97) !important;

  border-radius: 12px !important;

  box-shadow:
    0 15px 40px rgba(15,23,42,0.22) !important;

  z-index: 3 !important;

  cursor: pointer !important;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease !important;
}


html body .why-section-pro .factory-video-card:hover {
  transform: translateY(-3px) !important;

  box-shadow:
    0 20px 45px rgba(15,23,42,0.26) !important;
}


html body .why-section-pro .video-play {
  width: 44px !important;
  height: 44px !important;

  flex: 0 0 44px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 50% !important;

  background: #111827 !important;

  color: #ffffff !important;

  font-size: 13px !important;
}


html body .why-section-pro .factory-video-card strong {
  display: block !important;

  color: #111827 !important;

  font-size: 14px !important;
  line-height: 1.35 !important;
}


html body .why-section-pro .factory-video-card span {
  display: block !important;

  margin-top: 3px !important;

  color: #64748b !important;

  font-size: 11px !important;
  line-height: 1.4 !important;
}


/* -----------------------------------------------------
   RIGHT GRID
   ----------------------------------------------------- */

html body .why-section-pro .why-pro-grid {
  display: grid !important;

  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

  gap: 20px !important;
}


/* -----------------------------------------------------
   ADVANTAGE CARD
   ----------------------------------------------------- */

html body .why-section-pro .why-pro-card {
  overflow: hidden !important;

  display: flex !important;
  flex-direction: column !important;

  background: #ffffff !important;

  border: 1px solid #e5e7eb !important;

  border-radius: 16px !important;

  box-shadow: 0 5px 18px rgba(15,23,42,0.035) !important;

  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    border-color 0.22s ease !important;
}


html body .why-section-pro .why-pro-card:hover {
  transform: translateY(-4px) !important;

  border-color: #d1d5db !important;

  box-shadow:
    0 18px 40px rgba(15,23,42,0.09) !important;
}


/* -----------------------------------------------------
   CARD IMAGE
   ----------------------------------------------------- */

html body .why-section-pro .why-card-image {
  position: relative !important;

  height: 150px !important;

  overflow: hidden !important;

  background: #f3f4f6 !important;
}


html body .why-section-pro .why-card-image img {
  width: 100% !important;
  height: 100% !important;

  object-fit: cover !important;

  display: block !important;

  transition: transform 0.4s ease !important;
}


html body .why-section-pro .why-pro-card:hover .why-card-image img {
  transform: scale(1.04) !important;
}


html body .why-section-pro .why-card-number {
  position: absolute !important;

  top: 12px !important;
  left: 12px !important;

  width: 34px !important;
  height: 34px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 50% !important;

  background: rgba(255,255,255,0.96) !important;

  color: #111827 !important;

  font-size: 11px !important;
  font-weight: 900 !important;

  box-shadow:
    0 6px 16px rgba(15,23,42,0.16) !important;
}


/* -----------------------------------------------------
   CARD CONTENT
   ----------------------------------------------------- */

html body .why-section-pro .why-card-content {
  padding: 20px 21px 22px !important;
}


html body .why-section-pro .why-card-label {
  display: block !important;

  margin-bottom: 7px !important;

  color: #7c3aed !important;

  font-size: 9px !important;
  line-height: 1.3 !important;

  font-weight: 900 !important;

  letter-spacing: 0.11em !important;
}


html body .why-section-pro .why-card-content h3 {
  margin: 0 0 10px !important;

  color: #111827 !important;

  font-size: 18px !important;
  line-height: 1.35 !important;

  font-weight: 800 !important;
}


html body .why-section-pro .why-card-content p {
  margin: 0 !important;

  color: #64748b !important;

  font-size: 12.5px !important;
  line-height: 1.65 !important;
}


/* -----------------------------------------------------
   TRUST TAGS
   ----------------------------------------------------- */

html body .why-section-pro .why-tags {
  display: flex !important;

  flex-wrap: wrap !important;

  gap: 6px !important;

  margin-top: 15px !important;
}


html body .why-section-pro .why-tags span {
  display: inline-flex !important;
  align-items: center !important;

  padding: 5px 8px !important;

  background: #f8fafc !important;

  border: 1px solid #e5e7eb !important;

  border-radius: 5px !important;

  color: #475569 !important;

  font-size: 9px !important;
  line-height: 1.2 !important;

  font-weight: 700 !important;
}


/* -----------------------------------------------------
   RESPONSIVE
   ----------------------------------------------------- */

@media screen and (max-width: 1100px) {

  html body .why-section-pro .why-pro-layout {
    grid-template-columns: 1fr !important;
  }

  html body .why-section-pro .why-factory-panel {
    min-height: 480px !important;
  }

  html body .why-section-pro .why-factory-image {
    min-height: 480px !important;
  }

  html body .why-section-pro .why-factory-image img {
    min-height: 480px !important;
  }

}


@media screen and (max-width: 700px) {

  html body .why-section-pro .why-pro-grid {
    grid-template-columns: 1fr !important;
  }

  html body .why-section-pro .why-factory-panel {
    min-height: 430px !important;
  }

  html body .why-section-pro .why-factory-image {
    min-height: 430px !important;
  }

  html body .why-section-pro .why-factory-image img {
    min-height: 430px !important;
  }

  html body .why-section-pro .factory-stats {
    top: 18px !important;
    left: 18px !important;
  }

  html body .why-section-pro .factory-stat {
    padding: 10px 12px !important;
  }

  html body .why-section-pro .factory-stat strong {
    font-size: 23px !important;
  }

  html body .why-section-pro .factory-stat span {
    font-size: 8px !important;
  }

  html body .why-section-pro .factory-video-card {
    left: 16px !important;
    right: 16px !important;
    bottom: 16px !important;
  }

}
/* ===== Product cards responsive fix ===== */
html body .grid-4{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 22px !important;
  align-items: stretch !important;
}

html body .grid-4 .card{
  min-width: 0 !important;
  height: 100% !important;
}

html body .grid-4 .card img{
  width: 100% !important;
  height: 245px !important;
  object-fit: cover !important;
}

html body .grid-4 .card-body{
  padding: 30px 28px 32px !important;
}

html body .grid-4 .card-body h3{
  font-size: 22px !important;
  line-height: 1.25 !important;
}

html body .grid-4 .card-body p{
  font-size: 15.5px !important;
  line-height: 1.68 !important;
}

@media screen and (max-width: 1100px){
  html body .grid-4{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media screen and (max-width: 700px){
  html body .grid-4{
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  html body .grid-4 .card img{
    height: 230px !important;
  }

  html body .grid-4 .card-body{
    padding: 24px 22px 26px !important;
  }

  html body .grid-4 .card-body h3{
    font-size: 20px !important;
  }

  html body .grid-4 .card-body p{
    font-size: 15px !important;
  }
}