@layer properties {
  
@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))) {
  
*, ::before, ::after, ::backdrop { --tw-translate-x: 0; --tw-translate-y: 0; --tw-translate-z: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scale-z: 1; --tw-rotate-x: initial; --tw-rotate-y: initial; --tw-rotate-z: initial; --tw-skew-x: initial; --tw-skew-y: initial; --tw-border-style: solid; --tw-gradient-position: initial; --tw-gradient-from: #0000; --tw-gradient-via: #0000; --tw-gradient-to: #0000; --tw-gradient-stops: initial; --tw-gradient-via-stops: initial; --tw-gradient-from-position: 0%; --tw-gradient-via-position: 50%; --tw-gradient-to-position: 100%; --tw-outline-style: solid; --tw-blur: initial; --tw-brightness: initial; --tw-contrast: initial; --tw-grayscale: initial; --tw-hue-rotate: initial; --tw-invert: initial; --tw-opacity: initial; --tw-saturate: initial; --tw-sepia: initial; --tw-drop-shadow: initial; --tw-drop-shadow-color: initial; --tw-drop-shadow-alpha: 100%; --tw-drop-shadow-size: initial; --tw-backdrop-blur: initial; --tw-backdrop-brightness: initial; --tw-backdrop-contrast: initial; --tw-backdrop-grayscale: initial; --tw-backdrop-hue-rotate: initial; --tw-backdrop-invert: initial; --tw-backdrop-opacity: initial; --tw-backdrop-saturate: initial; --tw-backdrop-sepia: initial; --tw-duration: initial; }
}
}


.pointer-events-none { pointer-events: none; }


.collapse { visibility: collapse; }


.invisible { visibility: hidden; }


.visible { visibility: visible; }


.static { position: static; }


.sticky { position: sticky; }


.isolate { isolation: isolate; }


.z-0 { z-index: 0; }


.z-10 { z-index: 10; }


.z-20 { z-index: 20; }


.z-50 { z-index: 50; }


.z-\[1\] { z-index: 1; }


.container { width: 100%; }


.mx-auto { margin-inline: auto; }


.grid { display: grid; }


.hidden { display: none; }


.inline { display: inline; }


.inline-block { display: inline-block; }


.inline-flex { display: inline-flex; }


.table { display: table; }


.h-\[210px\] { height: 210px; }


.h-\[600px\] { height: 600px; }


.h-full { height: 100%; }


.h-px { height: 1px; }


.min-h-screen { min-height: 100vh; }


.w-\[160px\] { width: 160px; }


.w-full { width: 100%; }


.flex-1 { flex: 1 1 0%; }


.flex-shrink { flex-shrink: 1; }


.shrink-0 { flex-shrink: 0; }


.flex-grow, .grow { flex-grow: 1; }


.border-collapse { border-collapse: collapse; }


.translate-y-0 { --tw-translate-y: 0px; translate: var(--tw-translate-x) var(--tw-translate-y); }


.translate-y-4 { --tw-translate-y: 1rem; translate: var(--tw-translate-x) var(--tw-translate-y); }


.translate-y-full { --tw-translate-y: 100%; translate: var(--tw-translate-x) var(--tw-translate-y); }


.scale-105 { --tw-scale-x: 105%; --tw-scale-y: 105%; --tw-scale-z: 105%; scale: var(--tw-scale-x) var(--tw-scale-y); }


.transform { transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); }


.cursor-pointer { cursor: pointer; }


.resize { resize: both; }


.flex-col { flex-direction: column; }


.flex-row { flex-direction: row; }


.flex-wrap { flex-wrap: wrap; }


.items-start { align-items: flex-start; }


.justify-around { justify-content: space-around; }


.justify-between { justify-content: space-between; }


.justify-end { justify-content: flex-end; }


.justify-evenly { justify-content: space-evenly; }


.justify-start { justify-content: flex-start; }


.gap-\[10px\] { gap: 10px; }


.overflow-hidden { overflow: hidden; }


.rounded-\[20px\] { border-radius: 20px; }


.rounded-full { border-radius: 3.40282e+38px; }


.border { border-style: var(--tw-border-style); border-width: 1px; }


.border-2 { border-style: var(--tw-border-style); border-width: 2px; }


.border-t-2 { border-top-style: var(--tw-border-style); border-top-width: 2px; }


.border-r-2 { border-inline-end-style: var(--tw-border-style); border-inline-end-width: 2px; }


.border-b-2 { border-bottom-style: var(--tw-border-style); border-bottom-width: 2px; }


.border-l-2 { border-inline-start-style: var(--tw-border-style); border-inline-start-width: 2px; }


.border-\[\rgb(var(--c-accent-3))\] { border-color: rgb(var(--c-accent-3)); }


.bg-\[\rgb(var(--c-accent-3))\] { background-color: rgb(var(--c-accent-3)); }


.bg-gradient-to-b { --tw-gradient-position: to bottom in oklab; background-image: linear-gradient(var(--tw-gradient-stops)); }


.bg-gradient-to-l { --tw-gradient-position: to left in oklab; background-image: linear-gradient(var(--tw-gradient-stops)); }


.bg-gradient-to-r { --tw-gradient-position: to right in oklab; background-image: linear-gradient(var(--tw-gradient-stops)); }


.bg-gradient-to-t { --tw-gradient-position: to top in oklab; background-image: linear-gradient(var(--tw-gradient-stops)); }


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


.via-\[\rgb(var(--c-accent-3))\]\/20 { --tw-gradient-via: rgba(var(--c-accent-3), 0.2); --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-via-stops); }


@supports (color:lab(0% 0 0)) {
  
.via-\[\rgb(var(--c-accent-3))\]\/20 { --tw-gradient-via: lab(74.9115% -31.2338 63.2313/.2); }
}


.to-\[\rgb(var(--c-accent-3))\] { --tw-gradient-to: rgb(var(--c-accent-3)); --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); }


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


.object-cover { object-fit: cover; }


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


.text-left { text-align: start; }


.text-\[15vw\] { font-size: 15vw; }


.whitespace-nowrap { white-space: nowrap; }


.text-\[\rgb(var(--c-info))\] { color: rgb(var(--c-info)); }


.text-\[\rgb(var(--c-accent-3))\] { color: rgb(var(--c-accent-3)); }


.capitalize { text-transform: capitalize; }


.uppercase { text-transform: uppercase; }


.underline { text-decoration-line: underline; }


.opacity-0 { opacity: 0; }


.opacity-20 { opacity: 0.2; }


.opacity-80 { opacity: 0.8; }


.opacity-100 { opacity: 1; }


.outline { outline-style: var(--tw-outline-style); outline-width: 1px; }


.invert { --tw-invert: invert(100%); filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); }


.filter { filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); }


.backdrop-filter { backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); }


.transition { transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events; transition-timing-function: var(--tw-ease,ease); transition-duration: var(--tw-duration,0s); }


.transition-all { transition-property: all; transition-timing-function: var(--tw-ease,ease); transition-duration: var(--tw-duration,0s); }


.transition-colors { transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; transition-timing-function: var(--tw-ease,ease); transition-duration: var(--tw-duration,0s); }


.transition-opacity { transition-property: opacity; transition-timing-function: var(--tw-ease,ease); transition-duration: var(--tw-duration,0s); }


.transition-transform { transition-property: transform, translate, scale, rotate; transition-timing-function: var(--tw-ease,ease); transition-duration: var(--tw-duration,0s); }












.duration-300 { --tw-duration: .3s; transition-duration: 0.3s; }


.duration-500 { --tw-duration: .5s; transition-duration: 0.5s; }


.duration-700 { --tw-duration: .7s; transition-duration: 0.7s; }


.select-none { user-select: none; }


@media (hover: hover) {
  
.group-hover\:scale-110:is(:where(.group):hover *) { --tw-scale-x: 110%; --tw-scale-y: 110%; --tw-scale-z: 110%; scale: var(--tw-scale-x) var(--tw-scale-y); }


  
.group-hover\:border-\[\rgb(var(--c-accent-3))\]\/50:is(:where(.group):hover *) { border-color: lab(74.9115 -31.2338 63.2313 / 0.5); }


  
.group-hover\:text-\[\rgb(var(--c-info))\]:is(:where(.group):hover *) { color: rgb(var(--c-info)); }


  
.group-hover\:text-\[\rgb(var(--c-accent-3))\]\/20:is(:where(.group):hover *) { color: lab(74.9115 -31.2338 63.2313 / 0.2); }


  
.group-hover\:opacity-60:is(:where(.group):hover *) { opacity: 0.6; }


  
.group-hover\:opacity-100:is(:where(.group):hover *) { opacity: 1; }


  
.hover\:scale-105:hover { --tw-scale-x: 105%; --tw-scale-y: 105%; --tw-scale-z: 105%; scale: var(--tw-scale-x) var(--tw-scale-y); }


  
.hover\:opacity-80:hover { opacity: 0.8; }
}


a { color: inherit; display: inline-block; text-decoration: none !important; }


li { list-style: none; }


:root { --primary: rgb(var(--c-navy)); --primary-light: rgb(var(--c-navy-4)); --accent: rgb(var(--c-info)); --background: rgb(var(--c-cool-gray-9)); --white: #fff; --text-dark: rgb(var(--c-navy-5)); --text-light: rgb(var(--c-slate-2)); --border: rgb(var(--c-cool-gray-3)); --success: rgb(var(--c-eco-5)); --warning: rgb(var(--c-danger-3)); --custom-expo: cubic-bezier(.16, 1, .3, 1); --fluid-motion: cubic-bezier(.4, 0, .2, 1); }


* { box-sizing: border-box; overflow-wrap: break-word; word-break: keep-all; margin: 0px; padding: 0px; font-family: Montserrat-Light; }


.p { overflow-wrap: break-word; word-break: break-all; width: 100%; }


.blod { font-family: Montserrat-Bold; }


html { scroll-behavior: smooth; }


body { background-color: var(--background); color: var(--text-dark); -webkit-font-smoothing: antialiased; font-family: Montserrat-Light, sans-serif; overflow-x: hidden; }


@font-face { font-family: MontserratAlternates-Thin; src: url("/images/58b1bf1151e4b1f7.otf") format("woff2"); font-style: normal; font-display: swap; }


@font-face { font-family: MontserratAlternates-SemiBold; src: url("/images/7ff25cc9679bf5f2.otf") format("woff2"); font-style: normal; font-display: swap; }


@font-face { font-family: Montserrat-Light; src: url("/images/4b61774fa1f1ad6c.otf") format("woff2"); font-style: italic; font-display: swap; }


@font-face { font-family: Montserrat-Black; src: url("/images/1bb5e54b5bab9154.otf"); font-style: normal; font-display: swap; }


@font-face { font-family: MontserratAlternates-Medium; src: url("/images/5978b4215b35dfc9.otf"); font-style: normal; font-display: swap; }


@font-face { font-family: Montserrat-Medium; src: url("/images/877aa675bbeb6c1a.otf"); font-style: normal; font-display: swap; }


@font-face { font-family: Montserrat-Bold; src: url("/images/d4dff5f64e5c6662.otf"); font-style: normal; font-display: swap; }


@font-face { font-family: Montserrat-Regular; src: url("/images/ca429a550d44cbc5.otf"); font-style: normal; font-display: swap; }


@font-face { font-family: MontserratAlternates-Black; src: url("/images/90a8641240fb29d9.otf"); font-style: normal; font-display: swap; }


@font-face { font-family: Montserrat-ExtraLight; src: url("/images/9ae71a765e334827.otf"); font-style: normal; font-display: swap; }


@font-face { font-family: MontserratAlternates-Bold; src: url("/images/29d8eb2e576b88e8.otf"); font-style: normal; font-display: swap; }


@font-face { font-family: Montserrat-ExtraBold; src: url("/images/60af57152d22976d.otf"); font-style: normal; font-display: swap; }


@font-face { font-family: Montserrat-SemiBold; src: url("/images/bdda14281df8228f.otf"); font-style: normal; font-display: swap; }


@font-face { font-family: MontserratAlternates-Regular; src: url("/images/a093773efc2d08f6.otf"); font-style: normal; font-display: swap; }


@font-face { font-family: MontserratAlternates-ExtraLight; src: url("/images/e12a14da040eb5dd.otf"); font-style: normal; font-display: swap; }


@font-face { font-family: Montserrat-Thin; src: url("/images/5fb825bc6c660dfb.otf"); font-style: normal; font-display: swap; }


@font-face { font-family: MontserratAlternates-ExtraBold; src: url("/images/c95102c7fea8fa58.otf"); font-style: normal; font-display: swap; }


@font-face { font-family: MontserratAlternates-Light; src: url("/images/88461b18ad68e5a4.otf"); font-style: normal; font-display: swap; }


::-webkit-scrollbar { width: 8px; }


::-webkit-scrollbar-track { background: var(--background); }


::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 4px; }


::-webkit-scrollbar-thumb:hover { background: var(--primary-light); }


.grain-overlay { pointer-events: none; z-index: 9999; opacity: 0.03; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23noise)'/%3E%3C/svg%3E"); width: 100%; height: 100%; position: fixed; top: 0px; inset-inline-start: 0px; }


.preloader { z-index: 10000; background: linear-gradient(135deg, rgb(var(--c-navy-2)) 0%, rgb(var(--c-navy)) 50%, rgb(var(--c-navy-2)) 100%); flex-direction: column; justify-content: center; align-items: center; width: 100vw; height: 100vh; position: fixed; top: 0px; inset-inline-start: 0px; }


.preloader-canvas { width: 100%; height: 100%; position: absolute; top: 0px; inset-inline-start: 0px; }


.preloader-content { z-index: 10; text-align: center; color: rgb(255, 255, 255); width: 500px; margin: auto; padding-bottom: 30px; position: relative; bottom: 70%; }


.preloader-title { letter-spacing: 0.2em; opacity: 0; margin-bottom: 1rem; font-size: 3rem; font-weight: 700; transform: translateY(30px); }


.preloader-subtitle { letter-spacing: 0.1em; color: rgb(255, 255, 255); margin-bottom: 2rem; font-size: 1.2rem; font-weight: 400; transform: translateY(20px); }


.active { background-image: url("/images/nav-hover-ring.png"); background-position: 50% center; background-repeat: no-repeat; background-size: auto 60%; }


.preloader-cta { color: rgb(255, 255, 255); letter-spacing: 0.15em; cursor: pointer; transition: all .4s var(--custom-expo); opacity: 0; background: 0px 0px; border: 2px solid rgba(255, 255, 255, 0.3); padding: 1rem 3rem; font-size: 1rem; position: relative; overflow: hidden; transform: translateY(20px); }


.preloader-cta::before { content: ""; width: 100%; height: 100%; transition: left .6s var(--custom-expo); background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0)); position: absolute; top: 0px; inset-inline-start: -100%; }


.preloader-cta:hover::before { inset-inline-start: 100%; }


.preloader-cta:hover { background: rgba(255, 255, 255, 0.1); border-color: rgb(255, 255, 255); transform: translateY(-2px); }


.navbar { z-index: 1000; width: 100%; transition: all .5s var(--custom-expo); background: rgba(0, 0, 0, 0.5); padding: 1.5rem 3rem; position: fixed; top: 0px; inset-inline-start: 0px; }


.navbar.scrolled { -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); background: rgba(255, 255, 255, 0.85); padding: 1rem 3rem; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 30px; }


.navbar-container { justify-content: space-between; align-items: center; max-width: 1400px; margin: 0px auto; display: flex; }


.navbar-logo { color: rgb(255, 255, 255); letter-spacing: 0.05em; font-size: 1.5rem; font-weight: 700; text-decoration: none; transition: color 0.3s; }


.navbar.scrolled .navbar-logo { color: var(--primary); }


.navbar-links { gap: 2.5rem; list-style: none; display: flex; }


.navbar-link { color: rgba(255, 255, 255, 0.8); letter-spacing: 0.05em; padding: 0.5rem 0px; font-family: Montserrat-Light; font-size: 0.9rem; font-weight: 500; text-decoration: none; transition: color 0.3s; position: relative; }


.link-text, .footer-link, .footer-social { color: rgb(255, 255, 255); }


.scrolled .link-text { color: rgb(37, 37, 37); }


.navbar.scrolled .navbar-link { color: var(--text-dark); }


.navbar-link:hover::after { opacity: 1; width: 100%; animation: 1s ease 0s 1 normal forwards running gifToPng; }


@keyframes gifToPng { 
  0%, 99% { opacity: 1; }
  100% { opacity: 0; }
}


.hero { justify-content: center; align-items: center; width: 100%; height: 100vh; display: flex; position: relative; overflow: hidden; }


.hero-bg { object-fit: cover; z-index: 1; width: 100%; height: 100%; position: absolute; top: 0px; inset-inline-start: 0px; }


.hero-overlay { z-index: 2; width: 100%; height: 100%; position: absolute; top: 0px; inset-inline-start: 0px; }


.hero-content { z-index: 10; text-align: center; color: rgb(255, 255, 255); padding: 0px 2rem; position: relative; }


.hero-title { letter-spacing: 0.02em; margin-bottom: 1.5rem; font-size: clamp(2.5rem, 6vw, 5rem); font-weight: 700; line-height: 1.1; }


.hero-title-line { display: block; overflow: hidden; }


.hero-title-line span { display: inline-block; transform: translateY(100%); }


.hero-subtitle { color: rgba(255, 255, 255, 0.8); opacity: 0; margin-bottom: 2.5rem; font-size: clamp(1rem, 2vw, 1.3rem); font-weight: 400; line-height: 1.6; transform: translateY(30px); }


.hero-cta { color: var(--primary); letter-spacing: 0.05em; transition: all .4s var(--custom-expo); opacity: 0; background: rgb(255, 255, 255); border-radius: 4px; align-items: center; gap: 0.75rem; padding: 1rem 2.5rem; font-size: 1rem; font-weight: 600; text-decoration: none; display: inline-flex; transform: translateY(30px); }


.hero-cta:hover { transform: translateY(-3px); box-shadow: rgba(255, 255, 255, 0.2) 0px 10px 40px; }


.hero-cta svg { transition: transform .3s var(--custom-expo); }


.hero-cta:hover svg { transform: translate(5px); }


.floating-modules { pointer-events: none; z-index: 5; width: 100%; height: 100%; position: absolute; top: 0px; inset-inline-start: 0px; }


.floating-module { opacity: 0.15; width: 150px; height: 150px; animation: 8s ease-in-out 0s infinite normal none running float; position: absolute; }


.floating-module:first-child { animation-delay: 0s; top: 15%; inset-inline-start: 10%; }


.floating-module:nth-child(2) { animation-delay: -2s; top: 60%; inset-inline-start: 5%; }


.floating-module:nth-child(3) { animation-delay: -4s; top: 20%; inset-inline-end: 10%; }


.floating-module:nth-child(4) { animation-delay: -6s; top: 65%; inset-inline-end: 8%; }


@keyframes float { 
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-30px) rotate(5deg); }
}


@keyframes slideInFromRight { 
  0% { transform: translate(100%); }
  100% { transform: translate(0px); }
}


@keyframes slideOutToLeft { 
  0% { transform: translate(0px); }
  100% { transform: translate(-100%); }
}


@keyframes slideInFromLeft { 
  0% { transform: translate(-100%); }
  100% { transform: translate(0px); }
}


@keyframes slideOutToRight { 
  0% { transform: translate(0px); }
  100% { transform: translate(100%); }
}


.section { width: 100%; padding: 4rem 2rem; position: relative; }


.section-container { width: 1400px; margin: 0px auto; }


.section-header { text-align: center; margin-bottom: 4rem; }


.section-title { letter-spacing: 0.02em; font-size: 2.7rem; font-weight: 700; }

/* Base-level (all widths): render .bg8x titles in a solid color.
 * Without this, at widths > 1439px the inline background-clip:text +
 * color:transparent + background-size:90% image fill leaves part of the
 * glyphs transparent, so the title displays incompletely when the
 * browser is fullscreen. Matches the solid color already used at
 * <= 1439px (see the .bg8x rule inside the max-width: 1439px block). */
.bg8x { -webkit-text-fill-color: rgb(var(--c-earth)) !important; color: rgb(var(--c-earth)) !important; }


.section-subtitle { max-width: 946px; margin: 0px auto; font-size: 1.1rem; line-height: 1.6; }


.products-section { background-color: rgb(255, 255, 255); }


.products-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; display: grid; }


.product-card { transition: all .5s var(--custom-expo); cursor: pointer; border-radius: 12px; position: relative; }


.product-card:hover { border-color: var(--accent); transform: translateY(-10px) scale(1.02); }


.product-image { aspect-ratio: 1 / 1; object-fit: contain; width: 100%; transition: transform .6s var(--custom-expo); padding: 1rem; }


.product-card:hover .product-image { transform: scale(1.4) rotate(5deg); }


.product-info { background: rgb(255, 255, 255); padding: 1.5rem 2rem; }


.product-name { color: var(--primary); margin-bottom: 0.5rem; font-size: 1.25rem; font-weight: 700; }


.product-spec { color: var(--text-light); font-size: 0.9rem; }


.hurricane-section { background: linear-gradient(180deg, var(--background) 0%, white 100%); }


.hurricane-content { grid-template-columns: 1fr 1fr; align-items: center; gap: 4rem; display: grid; }


.hurricane-image-container { justify-content: center; align-items: center; display: flex; position: relative; }


.hurricane-image { filter: drop-shadow(rgba(var(--c-navy), 0.2) 0px 30px 60px); width: 100%; max-width: 500px; transition: transform .6s var(--custom-expo); }


.hurricane-image:hover { transform: scale(1.05) rotateY(10deg); }


.hurricane-feature { border-inline-start: 4px solid var(--accent); transition: all .4s var(--custom-expo); background: rgb(255, 255, 255); border-radius: 12px; padding: 1.5rem; box-shadow: rgba(0, 0, 0, 0.05) 0px 4px 20px; }


.hurricane-feature:hover { transform: translate(10px); box-shadow: rgba(0, 0, 0, 0.1) 0px 8px 30px; }


.hurricane-feature-title { color: var(--primary); margin-bottom: 0.5rem; font-size: 1.1rem; font-weight: 700; }


.hurricane-feature-desc { color: var(--text-light); font-size: 0.95rem; line-height: 1.5; }


.global-section { align-items: center; min-height: 80vh; display: flex; position: relative; overflow: hidden; }


.global-bg { object-fit: cover; z-index: 1; width: 100%; height: 100%; position: absolute; top: 0px; inset-inline-start: 0px; }


.global-overlay { z-index: 2; background: rgba(227, 227, 227, 0.7); width: 100%; height: 100%; position: absolute; top: 0px; inset-inline-start: 0px; }


.global-content { z-index: 10; grid-template-columns: 1fr 1fr; align-items: center; gap: 4rem; width: 100%; max-width: 1400px; margin: 0px auto; padding: 0px 2rem; display: grid; position: relative; }


.global-title { text-shadow: rgb(119, 115, 115) 1px 2px 2px; margin-bottom: 1.5rem; font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; }


.global-text { text-shadow: rgb(119, 115, 115) 1px 2px 2px; margin-bottom: 2rem; font-size: 1.1rem; line-height: 1.7; }


.global-stats { grid-template-columns: repeat(2, 1fr); gap: 2rem; display: grid; }


.global-stat { text-align: center; backdrop-filter: blur(10px); background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 12px; padding: 2rem; box-shadow: rgb(102, 102, 102) 1px 2px 2px; }


.global-stat-number { color: rgb(var(--c-accent-11)); margin-bottom: 0.5rem; font-size: 3rem; font-weight: 700; line-height: 1; }


.global-stat-label { color: rgba(255, 255, 255, 0.7); font-size: 0.9rem; }


.sustainability-section { background: rgb(255, 255, 255); }


.sustainability-grid { grid-template-columns: repeat(2, 1fr); gap: 3rem; display: grid; }


.sustainability-card { border-radius: 16px; position: relative; overflow: hidden; }


.sustainability-image { object-fit: cover; width: 100%; height: 100%; transition: transform .8s var(--custom-expo); }


.sustainability-card:hover .sustainability-image { transform: scale(1.1); }


.sustainability-overlay { color: rgb(255, 255, 255); background: linear-gradient(rgba(0, 0, 0, 0), rgba(var(--c-navy), 0.9)); width: 100%; padding: 2rem; position: absolute; bottom: 0px; inset-inline-start: 0px; }


.sustainability-card-title { margin-bottom: 0.5rem; font-size: 1.3rem; font-weight: 700; }


.sustainability-card-desc { color: rgba(255, 255, 255, 0.8); font-size: 0.95rem; line-height: 1.5; }


.news-section { background: var(--background); }


.news-grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; display: grid; }


.news-image { aspect-ratio: 16 / 10; object-fit: cover; background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%); width: 100%; }


.news-date { color: var(--accent); margin-bottom: 0.5rem; font-size: 0.85rem; font-weight: 500; }


.news-title { color: var(--primary); margin-bottom: 0.75rem; font-size: 1.1rem; font-weight: 700; line-height: 1.4; }


.news-excerpt { color: var(--text-light); font-size: 0.9rem; line-height: 1.5; }


.contact-section { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%); color: rgb(255, 255, 255); }


.contact-content { grid-template-columns: 1fr 1fr; align-items: center; gap: 4rem; display: grid; }


.contact-title { margin-bottom: 1.5rem; font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; }


.contact-text { font-size: 1.1rem; line-height: 1.7; }


.contact-info { flex-direction: column; gap: 1.5rem; display: flex; }


.contact-item { align-items: center; gap: 1rem; display: flex; }


.contact-icon { background: rgba(255, 255, 255, 0.1); border-radius: 50%; flex-shrink: 0; justify-content: center; align-items: center; width: 50px; height: 50px; display: flex; }


.contact-item-text { color: rgba(255, 255, 255, 0.9); font-size: 1rem; }


.contact-form { background: rgb(255, 255, 255); border-radius: 16px; padding: 20px; }


.form-group { margin-bottom: 1.5rem; }


.form-label { color: var(--text-dark); margin-bottom: 0.5rem; font-size: 0.9rem; font-weight: 500; display: block; }


.form-input { border: 2px solid var(--border); border-radius: 8px; width: 100%; padding: 1rem; font-family: inherit; font-size: 1rem; transition: 0.3s; }


.form-input:focus { border-color: var(--accent); outline: none; }


.form-textarea { resize: vertical; min-height: 120px; }


.form-submit { background: var(--primary); color: rgb(255, 255, 255); cursor: pointer; width: 100%; transition: all .4s var(--custom-expo); border: none; border-radius: 8px; padding: 1rem; font-size: 1rem; font-weight: 600; }


.form-submit:hover { background: var(--primary-light); transform: translateY(-2px); box-shadow: rgba(var(--c-navy), 0.3) 0px 10px 30px; }


.footer { color: rgb(255, 255, 255); background: rgb(23, 23, 23); }


.footer-container { max-width: 1400px; margin: 0px auto; }


.footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; margin-bottom: 3rem; padding-top: 5rem; display: grid; }


.footer-brand { max-width: 300px; }


.footer-logo { letter-spacing: 0.05em; margin-bottom: 1rem; font-size: 1.5rem; font-weight: 700; }


.footer-desc { color: rgba(255, 255, 255, 0.6); font-size: 0.95rem; line-height: 1.6; }


.footer-title { color: rgb(255, 255, 255); margin-bottom: 1.5rem; font-size: 1.5rem; }


.footer-links { flex-direction: column; gap: 0.75rem; list-style: none; display: flex; }


.footer-link { font-size: 1rem; text-decoration: none; transition: color 0.3s; }


.footer-bottom { text-align: center; color: rgba(255, 255, 255, 0.5); border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 2rem; font-size: 0.9rem; }


img { max-width: 100%; }


.flex { justify-content: space-between; align-items: center; display: flex; }


.videoBg { z-index: 1; width: 100%; height: 100%; position: absolute; top: 0px; inset-inline-start: 0px; }


.margin { margin: auto; }


.margin18 { margin: 18px auto; }




.display { display: block; }


.left { float: inline-start; }




.fd1 { padding: 1px 0px; }


.mt5 { margin-top: 5px; }


.mt10 { margin-top: 10px; }


.mt15 { margin-top: 15px; }


.mt20 { margin: 20px auto; }


.mt25 { margin-top: 25px; }


.mt30 { margin-top: 30px; }


.mt35 { margin-top: 35px; }


.mt40 { margin-top: 40px; }


.mt45 { margin-top: 45px; }


.mt50 { margin-top: 50px; }


.mt55 { margin-top: 55px; }


.mt60 { margin-top: 60px; }


.mt65 { margin-top: 65px; }


.mt70 { margin-top: 70px; }


.mt75 { margin-top: 75px; }


.mt80 { margin-top: 80px; }


.mt85 { margin-top: 85px; }


.mt90 { margin-top: 90px; }


.mt100 { margin-top: 100px; }


.mt200 { margin-top: 200px; }


.relative { position: relative; }


.fixed { position: fixed; }


.menuUl { width: 400px; padding: 0px; list-style: none; display: none; }


.layui-nav-item:hover .menuUl { color: rgb(0, 0, 0); background: rgb(255, 255, 255); margin-top: 18px; display: block; }


.menuUl .navlink { color: rgb(0, 0, 0); }


.menuUl { color: rgb(0, 0, 0); background: rgb(255, 255, 255); padding: 10px 20px; top: 42px; }


.menuUl li { float: inline-start; width: 100%; margin-top: 20px; }


.width1100 { min-height: 1px; width: 1100px !important; }


.width1200 { min-height: 1px; width: 1200px !important; }


.width1300 { min-height: 1px; width: 1300px !important; }


.width100 { min-height: 1px; width: 100% !important; }


.width98 { min-height: 1px; width: 98% !important; }


.width95 { min-height: 1px; width: 95% !important; }


.width90 { min-height: 1px; width: 90% !important; }


.width88 { min-height: 1px; width: 88% !important; }


.width85 { min-height: 1px; width: 85% !important; }


.width80 { min-height: 1px; width: 80% !important; }


.width75 { min-height: 1px; width: 75% !important; }


.width70 { min-height: 1px; width: 70% !important; }


.width65 { min-height: 1px; width: 65% !important; }


.width60 { min-height: 1px; width: 60% !important; }


.width55 { min-height: 1px; width: 55% !important; }


.width53 { min-height: 1px; width: 53% !important; }


.width50 { min-height: 1px; width: 50% !important; }


.width48 { min-height: 1px; width: 48% !important; }


.width47 { min-height: 1px; width: 47% !important; }


.width45 { min-height: 1px; width: 45% !important; }


.width40 { min-height: 1px; width: 40% !important; }


.width38 { min-height: 1px; width: 38% !important; }


.width35 { min-height: 1px; width: 35% !important; }


.width33 { min-height: 1px; width: 33% !important; }


.width30 { min-height: 1px; width: 30% !important; }


.width25 { min-height: 1px; width: 25% !important; }


.width23 { min-height: 1px; width: 23% !important; }


.width20 { min-height: 1px; width: 20% !important; }


.width18 { min-height: 1px; width: 18% !important; }


.width17 { min-height: 1px; width: 17% !important; }


.width15 { min-height: 1px; width: 15% !important; }


.width10 { min-height: 1px; width: 10% !important; }


.width7 { min-height: 1px; width: 7% !important; }


.width5 { min-height: 1px; width: 5% !important; }


.width2 { min-height: 1px; width: 2% !important; }


.width1 { min-height: 1px; width: 1% !important; }


.width150px { min-height: 1px; width: 150px !important; }


.pd20 { box-sizing: border-box; padding: 20px; }


.bigtxt { font-size: 25px; font-weight: 600; }


.weight { font-weight: 600; }




.textright { text-align: end; }


.block { display: block !important; }


.faq-answer-html { padding: 20px; }


.radiusBor { float: inline-start; background: rgb(255, 255, 255); border-radius: 10px; width: 7px; height: 7px; margin: 8px; }




.absolute { position: absolute; }


.background { background-position: center bottom; background-repeat: no-repeat; background-size: cover; }


.textleft { text-align: start; }


.showdow { z-index: 5; border-radius: 15px; padding: 30px 15px; box-shadow: rgba(111, 111, 111, 0.42) 0px 10px 25px 5px; }


.fff { color: rgb(255, 255, 255); }


.hurricane-feature { border-radius: 0.5rem; padding: 1rem; transition: background-color 0.3s; }


.hurricane-feature:hover { background-color: rgba(var(--c-navy), 0.05); }


.hurricane-feature-desc { color: rgb(var(--c-slate)); transform-origin: center top; font-size: 0.95rem; line-height: 1.6; }


.hurricane-features { flex-direction: column; gap: 1rem; display: flex; }


.black { color: rgb(0, 0, 0); }


.bg { background-position: 50% center; background-repeat: no-repeat; background-size: 100%; }


.ttupp { text-transform: uppercase; }


.textshadow { text-shadow: rgba(0, 0, 0, 0.3) 3px 3px 2px; }


.start-point { z-index: 10; background: linear-gradient(135deg, rgb(var(--c-eco-2)), rgb(var(--c-eco-4))); border-radius: 50%; width: 16px; height: 16px; position: absolute; top: 73%; inset-inline-start: 49%; transform: translate(-50%, -50%); box-shadow: rgba(var(--c-eco-2), 0.5) 0px 0px 20px; }


.start-point::before { content: ""; z-index: 9; opacity: 0.6; background: linear-gradient(135deg, rgb(var(--c-eco-2)), rgb(var(--c-eco-4))); border-radius: 50%; width: 16px; height: 16px; animation: 2s ease-out 0s infinite normal none running pulse; position: absolute; top: 50%; inset-inline-start: 50%; transform: translate(-50%, -50%); }


.start-point::after { content: ""; z-index: 8; opacity: 0.3; background: linear-gradient(135deg, rgb(var(--c-eco-2)), rgb(var(--c-eco-4))); border-radius: 50%; width: 16px; height: 16px; animation: 2s ease-out 0.5s infinite normal none running pulse; position: absolute; top: 50%; inset-inline-start: 50%; transform: translate(-50%, -50%); }


.line-1 { width: 0px; animation: 3s ease-out 0s infinite normal none running extendLine1; transform: rotate(-25deg); }


.dashed-line { z-index: 2; transform-origin: 0px center; background-color: rgba(0, 0, 0, 0); width: 120px; height: 2px; position: absolute; top: 50%; inset-inline-start: calc(50% + 8px); }


.line-2 { width: 0px; animation: 3s ease-out 0s infinite normal none running extendLine2; transform: rotate(25deg); }


.water-drop { background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.8), rgba(var(--c-cool-gray-5), 0.5) 40%, rgba(var(--c-info-5), 0.3)); border-radius: 50%; width: 120px; height: 120px; animation: 3s ease-in-out 0s infinite normal none running drip; position: relative; box-shadow: rgba(255, 255, 255, 0.8) 0px 0px 20px inset, rgba(0, 0, 0, 0.1) -5px -10px 15px inset, rgba(var(--c-primary-tint-3), 0.5) 0px 0px 10px; }


.tobg, .atobg:hover { background: linear-gradient(90deg, rgb(var(--c-accent-2)) 0%, rgb(var(--c-eco)) 50%, rgb(var(--c-primary-2)) 100%); border: none; }


.tobg2, .atobg2:hover { background: linear-gradient(90deg, rgba(var(--c-accent-2), 0.6) 0%, rgba(var(--c-eco), 0.6) 50%, rgba(var(--c-primary-2), 0.6) 100%); border: none; }


.tobg3 { background: linear-gradient(90deg, rgb(var(--c-accent-tint-7)) 0%, rgb(var(--c-success-tint-3)) 50%, rgba(var(--c-primary-tint-6), 0.6) 100%); border: none; }


.flex { display: flex; }


.wrap { flex-wrap: wrap; }


.tobgOp, .atobgOp { background: linear-gradient(90deg, rgb(var(--c-accent-2)) 0%, rgb(var(--c-eco)) 50%, rgb(var(--c-primary-2)) 100%); border: none; }


.atobg:hover svg { fill: rgb(255, 255, 255); }


.tobgt, .atobgt:hover { background: linear-gradient(90deg, rgba(var(--c-accent-2), 0.5) 0%, rgba(var(--c-eco), 0.5) 50%, rgba(var(--c-primary-2), 0.5) 100%); border: none; }


.tobgt2, .atobgt2:hover { background: linear-gradient(90deg, rgba(var(--c-accent-2), 0.1) 0%, rgba(var(--c-eco), 0.1) 50%, rgba(var(--c-primary-2), 0.1) 100%); border: none; }


.textbg, .footer-links a:hover, .textHover:hover { color: rgba(0, 0, 0, 0); background: linear-gradient(90deg, rgb(var(--c-accent-2)) 0%, rgb(var(--c-eco)) 50%, rgb(var(--c-primary-2)) 100%) text; }


.dropdown-arrow { fill: rgb(255, 255, 255); }


.hui { background-color: rgb(var(--c-cool-gray-6)); }


.f1, .f1 span { font-size: 1.1rem; }


.f2, .f2 span { font-size: 2rem !important; }


.f3, .f3 span { font-size: 3rem !important; }


.f4, .f4 span { font-size: 4rem !important; }


.f5, .f5 span { font-size: 5rem !important; }


.f6, .f6 span { font-size: 6rem !important; }


.f8 { font-size: 8rem !important; }


.f10 { font-size: 10rem !important; }


.f14 { font-size: 14px !important; }


.divIcon { cursor: pointer; border-radius: 30px; width: 40px; height: 40px; padding: 0.6rem; }


.c6 { color: rgb(108, 117, 125); }


.detext { overflow-wrap: break-word; color: rgb(121, 121, 121); font-family: Montserrat-Light; font-size: 16px; font-weight: 300; line-height: 30px; }


.detext2 { overflow-wrap: break-word; color: rgb(229, 228, 228); font-family: Montserrat-Light; font-size: 16px; font-weight: 300; line-height: 30px; }


.bold { font-family: Montserrat-Bold; }


.borderBg { background: linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255)) padding-box padding-box, linear-gradient(rgb(var(--c-primary-2)), rgb(var(--c-accent-2))) border-box border-box; border: 2px solid rgba(0, 0, 0, 0); }


.borderbg2 { --borderW: 1px; background: 0px 0px; border-radius: 12px; position: relative; }


.borderBg3 { background: linear-gradient(rgb(253, 253, 253), rgb(249, 249, 249)) padding-box padding-box, linear-gradient(90deg, rgb(220, 220, 220), rgb(220, 220, 220), rgb(220, 220, 220)) border-box border-box; border: 2px solid rgba(0, 0, 0, 0); }


.borderbg2::before { content: ""; border-radius: inherit; padding: var(--borderW); background: linear-gradient(45deg, rgb(var(--c-primary-2)), rgb(var(--c-accent-2))); position: absolute; inset: 0px; mask: linear-gradient(rgb(255, 255, 255) 0px, rgb(255, 255, 255) 0px) 0px 0px content-box exclude, linear-gradient(rgb(255, 255, 255) 0px, rgb(255, 255, 255) 0px) 0px 0px; }


.divSolid { text-align: center; border: 1px solid rgb(121, 120, 120); border-radius: 30px; width: fit-content; min-width: 200px; margin: auto; padding: 15px 30px; display: block; }


.width { width: fit-content; }


.viewBut { background: radial-gradient(circle, rgb(var(--c-primary-tint-5)) 0%, rgb(var(--c-primary-7)) 70%); }


.borderbg { background: linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255)) padding-box padding-box, linear-gradient(90deg, rgb(var(--c-accent-2)), rgb(var(--c-eco)), rgb(var(--c-primary-2))) border-box border-box; border: 2px solid rgba(0, 0, 0, 0); }


span { display: block; }


div[dir="rtl"] { text-align: end; direction: rtl; }


div[dir="rtl"] * { --tw-space-x-reverse: 1; }


div[dir="rtl"] .flex-row { flex-direction: row-reverse; }


div[dir="rtl"] .icon-arrow { transform: scaleX(-1); }


div[dir="rtl"] .dropdown-menu-vertical { padding-inline-end: 20px; }


.h2 { font-family: Montserrat-Medium; font-size: 40px; }


.bgfff { background-color: rgb(255, 255, 255); }


table tbody tr:first-child { color: rgb(255, 255, 255); background: linear-gradient(90deg, rgb(var(--c-accent-6)), rgb(var(--c-primary-4))); font-weight: 700; }


table tbody tr:nth-child(2n+3) { background-color: rgb(238, 238, 238); }


table tbody span, table tbody strong, table tbody div { line-height: 40px; display: inline; background-color: unset !important; }


table tbody td { text-align: center; vertical-align: middle; text-overflow: ellipsis; height: 40px; min-height: 40px; padding: 0px 10px; line-height: 40px; overflow: hidden; border: none !important; }


table tbody tr { height: 40px; min-height: 40px; max-height: 40px; display: table-row; }


table { width: 100%; display: block; overflow-y: auto; border-collapse: collapse !important; border-spacing: 0px !important; border: none !important; }


table tbody { border-collapse: collapse !important; }


table tbody td, table tbody th { padding: 0px 10px; font-size: 14px; box-shadow: none !important; white-space: nowrap !important; border: none !important; outline: none !important; margin: 0px !important; }


table tbody tr:first-child td { font-size: 16px; background: 0px 0px !important; }


table tbody tr:first-child { overflow: hidden; background: linear-gradient(90deg, rgb(var(--c-accent-6)), rgb(var(--c-primary-4))) !important; }


table tbody tr { border-collapse: collapse; border-spacing: 0px; }


.reveal { color: rgb(160, 160, 160); display: inline-block; position: relative; overflow: hidden; }


.reveal::before { content: attr(data-text); color: rgba(0, 0, 0, 0); clip-path: inset(0px 100% 0px 0px); background: linear-gradient(90deg, rgb(var(--c-accent-6)), rgb(var(--c-primary-4))) text; width: 100%; height: 100%; animation: 10s ease-out 0s 1 normal forwards running revealText; position: absolute; top: 0px; inset-inline-start: 0px; }


@keyframes revealText { 
  0% { clip-path: inset(0px 100% 0px 0px); }
  100% { clip-path: inset(0px); }
}


.none { display: none; }


.tbody li { justify-content: center; align-items: center; gap: 15px; width: 100%; min-height: 50px; padding: 5px; display: flex; }


.tbody li span { text-align: center; border-radius: 30px; justify-content: center; align-items: center; min-height: 50px; display: flex; }


.tbody li span:first-child { color: rgb(0, 0, 0) !important; }


.tbody li span:nth-child(n+2) { color: rgb(119, 114, 114) !important; }


.tbody li:first-child span { background: linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255)) padding-box padding-box, linear-gradient(90deg, rgb(var(--c-primary-2)), rgb(var(--c-accent-2))) border-box border-box; border: 1px solid rgba(0, 0, 0, 0); color: rgb(var(--c-eco-3)) !important; }


.tbody ul { border-bottom: 1px solid rgb(224, 224, 224); }


.tbody li:nth-child(2n+3) { background: linear-gradient(90deg, rgb(var(--c-accent-tint)), rgb(var(--c-primary-tint))); border-top: 1px solid rgb(224, 224, 224); border-bottom: 1px solid rgb(224, 224, 224); }


.tbody2 li { border-radius: 30px; justify-content: center; align-items: center; gap: 30px; width: 100%; min-height: 50px; padding: 5px; display: flex; }


.tbody2 li:first-child { background: linear-gradient(90deg, rgb(var(--c-accent-2)) 0%, rgb(var(--c-eco)) 50%, rgb(var(--c-primary-2)) 100%) !important; }


.tbody2 li span { text-align: center; border-radius: 30px; justify-content: center; align-items: center; min-height: 50px; display: flex; }


.tbody2 li span:first-child { color: rgb(0, 0, 0) !important; }


.tbody2 li span:nth-child(n+2) { color: rgb(152, 152, 152) !important; }


.tbody2 li:first-child span { color: rgb(255, 255, 255) !important; }


.tbody2 li:nth-child(2n+3) { background: rgb(255, 255, 255); }


.tbody3 li { justify-content: center; align-items: center; gap: 30px; width: 100%; min-height: 50px; padding: 5px; display: flex; }


.tbody3 li span { text-align: center; border-radius: 30px; justify-content: center; align-items: center; min-height: 50px; display: flex; }


.tbody3 li span:first-child { color: rgb(0, 0, 0) !important; }


.tbody3 li span:nth-child(n+2) { color: rgb(152, 152, 152) !important; }


.tbody3 li:first-child span { background: linear-gradient(90deg, rgb(var(--c-accent-tint)), rgb(var(--c-primary-tint))); color: rgb(var(--c-eco-3)) !important; }


.tbody3 ul { border-bottom: 1px solid rgb(224, 224, 224); }


.tbody3 li:nth-child(2n+3) { background: linear-gradient(90deg, rgb(var(--c-accent-tint)), rgb(var(--c-primary-tint))); border-top: 1px solid rgb(224, 224, 224); border-bottom: 1px solid rgb(224, 224, 224); }


.tbody4 li { justify-content: center; align-items: center; gap: 30px; width: 100%; min-height: 50px; padding: 5px; display: flex; }


.tbody4 li:nth-child(n+2) { border-bottom: 1px solid rgb(198, 198, 198); }


.tbody4 li span { text-align: center; border-radius: 30px; justify-content: center; align-items: center; min-height: 50px; display: flex; }


.tbody4 li span:first-child { color: rgb(0, 0, 0) !important; }


.tbody4 li span:nth-child(n+2) { color: rgb(152, 152, 152) !important; }


.tbody5 li { justify-content: center; align-items: center; gap: 30px; width: 100%; min-height: 50px; padding: 5px; display: flex; }


.tbody5 li:first-child { background: linear-gradient(90deg, rgb(var(--c-accent-tint)), rgb(var(--c-primary-tint))) !important; }


.tbody5 li span { text-align: center; border-radius: 30px; justify-content: center; align-items: center; min-height: 50px; display: flex; }


.tbody5 li:nth-child(n+2) span:first-child { color: rgb(0, 0, 0) !important; }


.tbody5 li:nth-child(n+2) span:nth-child(n+2) { color: rgb(152, 152, 152) !important; }


.tbody5 li:nth-child(n+2) { border-bottom: 1px solid rgb(198, 198, 198); }


.tbody5 li:first-child span { color: rgba(0, 0, 0, 0); background: linear-gradient(90deg, rgb(var(--c-accent-2)) 0%, rgb(var(--c-eco)) 50%, rgb(var(--c-primary-2)) 100%) text; }


.tbody5 li:nth-child(2n+3) { background: rgb(var(--c-accent-tint-8)); }


.tbody6 li { justify-content: center; align-items: center; gap: 30px; width: 100%; min-height: 50px; padding: 5px; display: flex; }


.tbody6 li span { text-align: center; border-radius: 30px; justify-content: center; align-items: center; min-height: 50px; display: flex; }


.tbody6 li span:first-child { color: rgb(0, 0, 0) !important; }


.tbody6 li span:nth-child(n+2) { color: rgb(152, 152, 152) !important; }


.tbody6 li:first-child span { background: linear-gradient(90deg, rgb(var(--c-accent-2)) 0%, rgb(var(--c-eco)) 50%, rgb(var(--c-primary-2)) 100%) text; color: rgba(0, 0, 0, 0) !important; }


.tbody6 ul { border-bottom: 1px solid rgb(224, 224, 224); }


.tbody6 li:nth-child(2n+2) { background: linear-gradient(90deg, rgb(var(--c-accent-tint)), rgb(var(--c-primary-tint))); border-top: 1px solid rgb(224, 224, 224); border-bottom: 1px solid rgb(224, 224, 224); }


.flex-end { align-items: flex-end; }


.bgBlackT80 { background-color: rgba(0, 0, 0, 0.6); }


.items-center { align-items: center; }


.justify-center { justify-content: center; }


.textbg2 { color: rgba(0, 0, 0, 0); background: linear-gradient(90deg, rgb(var(--c-warning-3)) 0%, rgb(var(--c-warning-2)) 50%, rgb(var(--c-warning)) 100%) text; }


.ms { color: rgb(255, 255, 255); backdrop-filter: blur(12px); background: rgba(239, 239, 239, 0.11); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 3rem; }


.unset { display: unset; }


.flex-start { align-self: flex-start; }


.section-title { text-align: center; text-transform: capitalize; font-size: 48px; font-weight: 400; }


@property --tw-translate-x { syntax: "*"; inherits: false; initial-value: 0; }


@property --tw-translate-y { syntax: "*"; inherits: false; initial-value: 0; }


@property --tw-translate-z { syntax: "*"; inherits: false; initial-value: 0; }


@property --tw-scale-x { syntax: "*"; inherits: false; initial-value: 1; }


@property --tw-scale-y { syntax: "*"; inherits: false; initial-value: 1; }


@property --tw-scale-z { syntax: "*"; inherits: false; initial-value: 1; }


@property --tw-rotate-x { syntax: "*"; inherits: false; }


@property --tw-rotate-y { syntax: "*"; inherits: false; }


@property --tw-rotate-z { syntax: "*"; inherits: false; }


@property --tw-skew-x { syntax: "*"; inherits: false; }


@property --tw-skew-y { syntax: "*"; inherits: false; }


@property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; }


@property --tw-gradient-position { syntax: "*"; inherits: false; }


@property --tw-gradient-from { syntax: "<color>"; inherits: false; initial-value: #0000; }


@property --tw-gradient-via { syntax: "<color>"; inherits: false; initial-value: #0000; }


@property --tw-gradient-to { syntax: "<color>"; inherits: false; initial-value: #0000; }


@property --tw-gradient-stops { syntax: "*"; inherits: false; }


@property --tw-gradient-via-stops { syntax: "*"; inherits: false; }


@property --tw-gradient-from-position { syntax: "<length-percentage>"; inherits: false; initial-value: 0%; }


@property --tw-gradient-via-position { syntax: "<length-percentage>"; inherits: false; initial-value: 50%; }


@property --tw-gradient-to-position { syntax: "<length-percentage>"; inherits: false; initial-value: 100%; }


@property --tw-outline-style { syntax: "*"; inherits: false; initial-value: solid; }


@property --tw-blur { syntax: "*"; inherits: false; }


@property --tw-brightness { syntax: "*"; inherits: false; }


@property --tw-contrast { syntax: "*"; inherits: false; }


@property --tw-grayscale { syntax: "*"; inherits: false; }


@property --tw-hue-rotate { syntax: "*"; inherits: false; }


@property --tw-invert { syntax: "*"; inherits: false; }


@property --tw-opacity { syntax: "*"; inherits: false; }


@property --tw-saturate { syntax: "*"; inherits: false; }


@property --tw-sepia { syntax: "*"; inherits: false; }


@property --tw-drop-shadow { syntax: "*"; inherits: false; }


@property --tw-drop-shadow-color { syntax: "*"; inherits: false; }


@property --tw-drop-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }


@property --tw-drop-shadow-size { syntax: "*"; inherits: false; }


@property --tw-backdrop-blur { syntax: "*"; inherits: false; }


@property --tw-backdrop-brightness { syntax: "*"; inherits: false; }


@property --tw-backdrop-contrast { syntax: "*"; inherits: false; }


@property --tw-backdrop-grayscale { syntax: "*"; inherits: false; }


@property --tw-backdrop-hue-rotate { syntax: "*"; inherits: false; }


@property --tw-backdrop-invert { syntax: "*"; inherits: false; }


@property --tw-backdrop-opacity { syntax: "*"; inherits: false; }


@property --tw-backdrop-saturate { syntax: "*"; inherits: false; }


@property --tw-backdrop-sepia { syntax: "*"; inherits: false; }


@property --tw-duration { syntax: "*"; inherits: false; }


.closeIcon.jsx-8bfe901fa1e15f1 { color: rgb(0, 0, 0); text-align: end; cursor: pointer; font-size: 16px; }


#sliderFrom.jsx-8bfe901fa1e15f1 { z-index: 99999; display: none; }


.sildIcon.jsx-8bfe901fa1e15f1 { cursor: pointer; z-index: 99999; width: 100px; height: 100px; display: none; position: fixed; top: 40%; inset-inline-end: 20px; }


.sldtext_18.jsx-8bfe901fa1e15f1 { overflow-wrap: break-word; color: rgb(0, 0, 0); text-align: start; width: 545px; margin: 0px; font-family: Montserrat-Medium; font-size: 40px; font-weight: 500; }


.sldgroup_7.jsx-8bfe901fa1e15f1 { background-color: rgb(255, 255, 255); border-radius: 20px; width: 700px; padding: 3rem; top: 33px; box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 4px; }


.sldgroup_8.jsx-8bfe901fa1e15f1 { width: 100%; height: 30px; margin: 24px 0px 0px; }


.sldtext-wrapper_5.jsx-8bfe901fa1e15f1 { overflow-wrap: break-word; text-align: start; width: 55%; height: 30px; font-family: Montserrat-Light; font-size: 0px; font-weight: 300; line-height: 30px; }


.sldtext_19.jsx-8bfe901fa1e15f1 { overflow-wrap: break-word; color: rgb(var(--c-danger)); text-align: start; width: 6px; height: 30px; font-family: Montserrat-Light; font-size: 14px; font-weight: 300; line-height: 30px; }


.sldtext_20.jsx-8bfe901fa1e15f1 { overflow-wrap: break-word; color: rgb(0, 0, 0); text-align: start; width: 200px; height: 30px; font-family: Montserrat-Light; font-size: 14px; font-weight: 300; line-height: 30px; }


.sldtext-wrapper_6.jsx-8bfe901fa1e15f1 { float: inline-start; overflow-wrap: break-word; text-align: start; width: 42%; height: 30px; font-family: Montserrat-Light; font-size: 0px; font-weight: 300; line-height: 30px; }


.sldtext_21.jsx-8bfe901fa1e15f1 { overflow-wrap: break-word; color: rgb(var(--c-danger)); text-align: start; width: 6px; height: 30px; font-family: Montserrat-Light; font-size: 14px; font-weight: 300; line-height: 30px; }


.sldtext_22.jsx-8bfe901fa1e15f1 { overflow-wrap: break-word; color: rgb(0, 0, 0); width: 200px; height: 30px; font-family: Montserrat-Light; font-size: 14px; font-weight: 300; line-height: 24px; }


.sldgroup_9.jsx-8bfe901fa1e15f1 { width: 100%; height: 40px; margin: 5px 0px 0px; }


.sldimage-wrapper_1.jsx-8bfe901fa1e15f1 { background-color: rgb(246, 246, 246); border-radius: 80px; width: 45%; height: 40px; }


.sldtext-wrapper_7.jsx-8bfe901fa1e15f1 { width: 45%; height: 40px; }


.select_1.jsx-8bfe901fa1e15f1, .input_1.jsx-8bfe901fa1e15f1 { background-color: rgb(244, 244, 245); border: 1px solid rgb(182, 177, 177); border-radius: 26px; width: 100%; height: 40px; padding: 5px 15px; line-height: 40px; }


.sldtext_24.jsx-8bfe901fa1e15f1 { overflow-wrap: break-word; color: rgb(0, 0, 0); text-align: start; width: 100%; height: 30px; margin: 18px 0px 0px; font-family: Montserrat-Light; font-size: 14px; font-weight: 300; line-height: 30px; }


.sldimage-text_1.jsx-8bfe901fa1e15f1 { width: 100%; height: 40px; margin: 15px 0px 0px; }


.sldthumbnail_3.jsx-8bfe901fa1e15f1 { width: 16px; height: 16px; margin-top: 7px; }


.sldsldtext-group_2.jsx-8bfe901fa1e15f1 { overflow-wrap: break-word; color: rgb(117, 117, 117); text-align: start; height: 30px; font-family: Montserrat-Light; font-size: 12px; font-weight: 300; line-height: 30px; }


.sldthumbnail_4.jsx-8bfe901fa1e15f1 { width: 16px; height: 16px; margin-top: 7px; }


.sldtext-group_3.jsx-8bfe901fa1e15f1 { overflow-wrap: break-word; color: rgb(117, 117, 117); text-align: start; height: 30px; font-family: Montserrat-Light; font-size: 12px; font-weight: 300; line-height: 30px; }


.sldimage-text_3.jsx-8bfe901fa1e15f1 { width: 100%; height: 30px; margin: 15px 0px 0px; }


.sldthumbnail_5.jsx-8bfe901fa1e15f1 { width: 16px; height: 16px; margin-top: 7px; }


.sldtext-group_4.jsx-8bfe901fa1e15f1 { overflow-wrap: break-word; color: rgb(117, 117, 117); text-align: start; width: 45%; height: 30px; font-family: Montserrat-Light; font-size: 12px; font-weight: 300; line-height: 30px; }


.sldsldtext-wrapper_8.jsx-8bfe901fa1e15f1 { border-radius: 20px; width: 100%; margin: 5px 0px 0px; }


.sldgroup_11.jsx-8bfe901fa1e15f1 { background-image: linear-gradient(90deg, rgb(var(--c-accent)) 0px, rgb(var(--c-primary)) 100%); border-radius: 40px; width: 300px; height: 50px; margin: 24px auto; }


.sldimage-text_5.jsx-8bfe901fa1e15f1 { text-align: center; width: 100%; }


.ripple-container.jsx-8bfe901fa1e15f1::before, .ripple-container.jsx-8bfe901fa1e15f1::after { content: ""; z-index: 0; background: rgba(var(--c-accent-2), 0.4); border-radius: 50%; width: 100%; height: 100%; animation: 2s ease-out 0s infinite normal none running waterRipple; position: absolute; top: 50%; inset-inline-start: 50%; transform: translate(-50%, -50%) scale(0.8); }


.ripple-container.jsx-8bfe901fa1e15f1::after { animation-delay: 1s; }


@keyframes waterRipple { 
  0% { opacity: 0.6; transform: translate(-50%, -50%) scale(0.8); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2); }
}


@media screen and (width <= 1024px) {
  
#slider.jsx-8bfe901fa1e15f1 { display: none !important; }


  
.sildIcon.jsx-8bfe901fa1e15f1 { width: 50px !important; height: 50px !important; display: none !important; top: 40% !important; inset-inline-end: 10px !important; }
}


.footer.jsx-8b17b8be1fdb2d60 { background-color: rgb(0, 0, 0); }


.footer-container.jsx-8b17b8be1fdb2d60 { width: 1440px; margin: 0px auto; position: relative; }


.tobg-text.jsx-8b17b8be1fdb2d60 { font-size: 1.3rem; line-height: 70px; }


.tobg-img.jsx-8b17b8be1fdb2d60 { float: inline-end; height: 33px; margin-block: 20px auto; margin-inline: auto 5px; }


.footer-main.jsx-8b17b8be1fdb2d60 { padding: 6rem 0px; }


.footer-logo-img.jsx-8b17b8be1fdb2d60 { width: 160px; }


.footer-desc.jsx-8b17b8be1fdb2d60 { margin-top: 3rem; font-size: 1.4rem; }


.footer-email.jsx-8b17b8be1fdb2d60 { word-break: break-all; display: inline-block; }


.footer-contact-item.jsx-8b17b8be1fdb2d60 { align-items: flex-start; gap: 8px; margin-top: 2rem; display: flex; }


.footer-contact-icon.jsx-8b17b8be1fdb2d60 { flex-shrink: 0; width: 17px; height: 17px; margin-top: 3px; }


.footer-contact-text.jsx-8b17b8be1fdb2d60 { word-break: break-word; flex: 1 1 0%; line-height: 1.5; }


.footer-social.jsx-8b17b8be1fdb2d60 { margin-top: 2rem; }


.social-circle.jsx-8b17b8be1fdb2d60 { border: 1px solid rgb(132, 129, 129); border-radius: 30px; width: 30px; height: 30px; margin-inline-start: 10px; display: inline-block; }


.social-link.jsx-8b17b8be1fdb2d60 { border-radius: 30px; width: 100%; height: 100%; display: block; }


.social-icon.jsx-8b17b8be1fdb2d60 { width: 20px; height: 20px; margin-block: 5px auto; margin-inline: 4px auto; display: block; }


.footer-menus.jsx-8b17b8be1fdb2d60 { grid-template-columns: 35% 100%; margin-inline-start: 3%; display: grid; }


.footer-column.jsx-8b17b8be1fdb2d60 { float: inline-start; width: 100%; }


.footer-links.jsx-8b17b8be1fdb2d60 li.jsx-8b17b8be1fdb2d60 { line-height: 2rem; }


.newsletter-title.jsx-8b17b8be1fdb2d60 { text-transform: uppercase; font-size: 1.5rem; }


.newsletter-desc.jsx-8b17b8be1fdb2d60 { margin-top: 1.5rem; }


.newsletter-form.jsx-8b17b8be1fdb2d60 { height: 50px; margin-top: 1rem; }


.newsletter-input.jsx-8b17b8be1fdb2d60 { color: rgb(0, 0, 0); border-radius: 30px; width: 100%; padding: 12px 20px; inset-inline-end: 3px; }


.newsletter-submit.jsx-8b17b8be1fdb2d60 { border-radius: 20px; width: 80px; height: 33px; top: 3.5px; inset-inline-end: 6px; }


.submit-img.jsx-8b17b8be1fdb2d60 { width: 50px; margin-block: -8px 1px; margin-inline: 9px 0px; }


.newsletter-error.jsx-8b17b8be1fdb2d60 { color: rgb(var(--c-danger-6)); margin-top: 5px; font-size: 12px; }


.cert-item.jsx-8b17b8be1fdb2d60, .cert-img-wrap.jsx-8b17b8be1fdb2d60 { margin-top: 1rem; }


.cert-name.jsx-8b17b8be1fdb2d60 { margin-top: 1rem; font-size: 12px; }


.footer-bottom.jsx-8b17b8be1fdb2d60 { height: 15rem; }


.copyright-text.jsx-8b17b8be1fdb2d60 { color: rgb(102, 102, 102); }


.footer-big-text.jsx-8b17b8be1fdb2d60 { color: rgb(83, 83, 83); white-space: nowrap; text-align: center; margin-top: -5rem; font-family: Montserrat-Bold; font-size: 24vw; }


@media screen and (width <= 1439px) {
  
.footer-container.jsx-8b17b8be1fdb2d60 { width: 92%; max-width: 1200px; }


  
.tobg-inner.jsx-8b17b8be1fdb2d60 { background-size: 20%; }


  
.tobg-text.jsx-8b17b8be1fdb2d60 { font-size: 1.1rem; }


  
.footer-main.jsx-8b17b8be1fdb2d60 { padding: 4rem 0px; }


  
.footer-brand.jsx-8b17b8be1fdb2d60 { width: 35%; }


  
.footer-newsletter.jsx-8b17b8be1fdb2d60 { width: 30%; }


  
.footer-big-text.jsx-8b17b8be1fdb2d60 { font-size: 15rem; }
}


@media screen and (width <= 1023px) {
  
.footer-container.jsx-8b17b8be1fdb2d60 { width: 94%; }


  
.tobg-inner.jsx-8b17b8be1fdb2d60 { background-position: 0px center; background-size: 25%; }


  
.tobg-container.jsx-8b17b8be1fdb2d60 { flex-direction: column; align-items: flex-start; padding: 14px 20px; display: flex; }


  
.tobg-text.jsx-8b17b8be1fdb2d60 { float: none; line-height: 1.4; width: 70% !important; }


  
.tobg-icon.jsx-8b17b8be1fdb2d60 { float: none; width: 30% !important; }


  
.footer-menus.jsx-8b17b8be1fdb2d60 { width: 65% !important; }


  
.footer-column.jsx-8b17b8be1fdb2d60 { width: 40% !important; }


  
.tobg-img.jsx-8b17b8be1fdb2d60 { margin: 0px; }


  
.footer-main.jsx-8b17b8be1fdb2d60 { flex-wrap: wrap; padding: 3rem 0px; display: flex; }


  
.footer-brand.jsx-8b17b8be1fdb2d60 { width: 50%; margin-bottom: 3rem; }


  
.footer-menus.jsx-8b17b8be1fdb2d60 { flex-direction: row; width: 50%; display: flex; }


  
.footer-newsletter.jsx-8b17b8be1fdb2d60 { float: none; clear: both; border-top: 1px solid rgb(51, 51, 51); margin-top: 2rem; padding-top: 2rem; width: 100% !important; }


  
.newsletter-form.jsx-8b17b8be1fdb2d60 { max-width: 400px; }


  
.cert-list.jsx-8b17b8be1fdb2d60 { flex-wrap: wrap; gap: 20px; display: flex; }


  
.cert-item.jsx-8b17b8be1fdb2d60 { flex: 1 1 0%; min-width: 100px; max-width: 150px; margin-top: 0px; width: auto !important; }


  
.cert-img-wrap.jsx-8b17b8be1fdb2d60 { margin-top: 0px; }


  
.footer-big-text.jsx-8b17b8be1fdb2d60 { margin-top: -2rem; font-size: 10rem; }
}


@media screen and (width <= 767px) {
  
.footer-copyright.jsx-8b17b8be1fdb2d60 { text-align: start !important; float: none !important; }


  
.copyright-text.jsx-8b17b8be1fdb2d60 { gap: 8px; margin: 0px; flex-direction: column !important; align-items: flex-start !important; display: flex !important; }


  
.copyright-text.jsx-8b17b8be1fdb2d60 .display.right.jsx-8b17b8be1fdb2d60 { float: none !important; margin-inline-end: 0px !important; display: block !important; }


  
.footer-container.jsx-8b17b8be1fdb2d60 { width: 94%; }


  
.cert-name.jsx-8b17b8be1fdb2d60 { width: 100% !important; }


  
.tobg.jsx-8b17b8be1fdb2d60 { min-height: 30px; height: auto !important; }


  
.tobg-inner.jsx-8b17b8be1fdb2d60 { background-size: 54% !important; }


  
.tobg-text.jsx-8b17b8be1fdb2d60 { font-size: 12px; font-weight: 400; width: 75% !important; }


  
.tobg-icon.jsx-8b17b8be1fdb2d60 { width: 25% !important; }


  
.tobg-img.jsx-8b17b8be1fdb2d60 { float: none; height: auto; }


  
.footer-main.jsx-8b17b8be1fdb2d60 { flex-direction: column; padding: 2rem 0px; }


  
.footer-brand.jsx-8b17b8be1fdb2d60 { float: none; margin-bottom: 2rem; width: 100% !important; }


  
.footer-logo-img.jsx-8b17b8be1fdb2d60 { width: 140px; }


  
.footer-desc.jsx-8b17b8be1fdb2d60 { margin-top: 1.5rem; font-size: 1.1rem; }


  
.footer-email.jsx-8b17b8be1fdb2d60 { font-size: 1rem; }


  
.footer-contact-item.jsx-8b17b8be1fdb2d60 { gap: 10px; margin-top: 1rem; }


  
.footer-contact-icon.jsx-8b17b8be1fdb2d60 { width: 18px; height: 18px; margin-top: 2px; }


  
.footer-contact-text.jsx-8b17b8be1fdb2d60 { font-size: 0.9rem; line-height: 1.6; }


  
.footer-social.jsx-8b17b8be1fdb2d60 { flex-wrap: wrap; gap: 8px; margin-top: 1.5rem; display: flex; }


  
.social-circle.jsx-8b17b8be1fdb2d60 { float: none; margin: 0px; }


  
.footer-menus.jsx-8b17b8be1fdb2d60 { float: none; border-bottom: 1px solid rgb(51, 51, 51); flex-flow: wrap; gap: 30px; margin-bottom: 2rem; padding-bottom: 2rem; display: flex; width: 100% !important; }


  
.footer-column.jsx-8b17b8be1fdb2d60 { float: none; flex: 1 1 0%; min-width: 130px; }


  
.footer-title.jsx-8b17b8be1fdb2d60 { margin-bottom: 1rem; font-size: 1rem; }


  
.footer-links.jsx-8b17b8be1fdb2d60 li.jsx-8b17b8be1fdb2d60 { line-height: 1.8rem; }


  
.footer-link.jsx-8b17b8be1fdb2d60 { font-size: 0.9rem; }


  
.footer-newsletter.jsx-8b17b8be1fdb2d60 { float: none; border-top: none; padding-top: 0px; width: 100% !important; }


  
.newsletter-title.jsx-8b17b8be1fdb2d60 { font-size: 1.1rem; }


  
.newsletter-desc.jsx-8b17b8be1fdb2d60 { margin-top: 0.8rem; font-size: 0.9rem; }


  
.newsletter-form.jsx-8b17b8be1fdb2d60 { max-width: 100%; height: 44px; margin-top: 1rem; }


  
.newsletter-input.jsx-8b17b8be1fdb2d60 { width: 98%; height: 48px; padding: 10px 15px; font-size: 14px; }


  
.newsletter-submit.jsx-8b17b8be1fdb2d60 { width: 70px; height: 30px; top: 5px; }


  
.submit-img.jsx-8b17b8be1fdb2d60 { width: 40px; height: auto; margin-bottom: 6px; display: block; transform: translate(-8px, 7px); }


  
.cert-list.jsx-8b17b8be1fdb2d60 { flex-wrap: wrap; gap: 20px; margin-top: 1.5rem; display: flex; }


  
.tobg.jsx-8b17b8be1fdb2d60 { height: auto !important; }


  
.tobg-container.jsx-8b17b8be1fdb2d60 { flex-direction: column; justify-content: center; align-items: center; gap: 0.8rem; padding: 0px; display: flex !important; }


  
.tobg-text.jsx-8b17b8be1fdb2d60, .tobg-icon.jsx-8b17b8be1fdb2d60 { text-align: start; float: none !important; width: 100% !important; }


  
.tobg-img.jsx-8b17b8be1fdb2d60 { float: inline-start; max-width: 70%; display: block; }


  
.tobg-inner.jsx-8b17b8be1fdb2d60 { background-position: 0% center; background-size: 80% !important; }


  
.cert-item.jsx-8b17b8be1fdb2d60 { min-width: 80px; margin-top: 0px; width: calc(33.333% - 14px) !important; }


  
.cert-img.jsx-8b17b8be1fdb2d60 { width: 80%; margin: 0px auto; display: block; }


  
.cert-name.jsx-8b17b8be1fdb2d60 { width: 100%; margin-top: 0.5rem; font-size: 10px; }


  
.footer-bottom.jsx-8b17b8be1fdb2d60 { height: auto; padding: 2rem 0px; }


  
.copyright-text.jsx-8b17b8be1fdb2d60 { font-size: 0.8rem; line-height: 1.6; }


  
.footer-big-text.jsx-8b17b8be1fdb2d60 { text-align: center; margin-top: 1rem; font-size: 4rem; overflow: hidden; }
}


@media screen and (width <= 480px) {
  
.tobg-inner.jsx-8b17b8be1fdb2d60 { background-size: 35%; }


  
.tobg-text.jsx-8b17b8be1fdb2d60 { font-size: 12px; font-weight: 400; width: 100% !important; }


  
.tobg-icon.jsx-8b17b8be1fdb2d60 { width: 100% !important; margin-top: 10px !important; }


  
.footer-desc.jsx-8b17b8be1fdb2d60 { font-size: 1rem; }


  
.footer-email.jsx-8b17b8be1fdb2d60 { font-size: 0.9rem; }


  
.footer-contact-text.jsx-8b17b8be1fdb2d60 { font-size: 0.85rem; }


  
.footer-menus.jsx-8b17b8be1fdb2d60 { gap: 20px; }


  
.footer-column.jsx-8b17b8be1fdb2d60 { min-width: 100px; }


  
.footer-title.jsx-8b17b8be1fdb2d60 { font-size: 0.9rem; }


  
.footer-link.jsx-8b17b8be1fdb2d60 { font-size: 0.8rem; }


  
.cert-item.jsx-8b17b8be1fdb2d60 { min-width: 70px; }


  
.cert-name.jsx-8b17b8be1fdb2d60 { font-size: 9px; }


  
.footer-big-text.jsx-8b17b8be1fdb2d60 { font-size: 3rem; }
}


.privacy-overlay { position: fixed; bottom: 0px; inset-inline-start: 0px; width: 100%; background: rgb(255, 255, 255); z-index: 9999; box-shadow: rgb(0, 0, 0) 0px 9px 15px; }


.privacy-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; max-width: 1400px; margin: 0px auto; padding: 20px 24px; }


.privacy-text { flex: 1 1 0%; font-size: 14px; line-height: 1.6; color: rgb(51, 51, 51); max-height: 120px; overflow-y: auto; }


.privacy-text p, .privacy-text div { margin: 0px; }


.privacy-text a { color: rgb(var(--c-accent-2)); }




.privacy-btn { padding: 12px 32px; background: linear-gradient(to right, rgb(var(--c-accent-2)), rgb(var(--c-primary))); color: white; border: none; border-radius: 8px; cursor: pointer; white-space: nowrap; }


.navbar.scrolled input { color: rgb(51, 51, 51) !important; }




.scrolled .topInp { border: 1px solid rgb(124, 124, 124) !important; }


.scrolled .navbar-container svg { fill: rgb(51, 51, 51); }


.navbar-links { display: flex; align-items: center; gap: 30px; list-style: none; margin: 0px; padding: 0px; flex: 1 1 0%; justify-content: center; }


.navbar-link { display: flex; gap: 5px; text-decoration: none; color: rgb(255, 255, 255); font-weight: 500; font-size: 15px; padding: 26px 17px; position: relative; transition: color 0.3s; height: 44px; justify-content: center; align-items: center; overflow: hidden; }


.navbar.scrolled .navbar-link { color: rgb(51, 51, 51); }


.link-bg { position: absolute; inset: 0px; background-repeat: no-repeat; background-size: auto 60%; background-position: center center; z-index: 0; transition: opacity 0.15s ease; }
.link-text { position: relative; z-index: 1; display: flex; align-items: center; gap: 5px; }


.link-bg-gif { background-image: url("/images/nav-hover-ring.gif"); }


.link-bg-png { background-image: url("/images/nav-hover-ring.png"); }




.dropdown-arrow { transition: transform 0.3s; margin-inline-start: 2px; }






.dropdown-menu-vertical { position: absolute; top: 100%; inset-inline-start: 50%; transform: translateX(-50%) translateY(10px); background: white; border-radius: 8px; box-shadow: rgba(0, 0, 0, 0.15) 0px 10px 40px; min-width: 280px; max-width: 320px; list-style: none; opacity: 0; visibility: hidden; transition: 0.3s; margin-top: 10px; z-index: 1000; overflow: hidden; }


.dropdown-menu-vertical::before { content: ""; position: absolute; top: -6px; inset-inline-start: 50%; transform: translateX(-50%) rotate(45deg); width: 12px; height: 12px; background: white; }


.dropdown-menu-vertical.show { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0px); }


.dropdown-menu-content { max-height: 900px; overflow-y: auto; padding: 8px 0px; }






.menu-item-wrapper { display: flex; align-items: center; flex: 1 1 0%; min-height: 40px; border-inline-start: 3px solid transparent; transition: 0.2s; cursor: pointer; }


.menu-item-wrapper:hover { background: rgb(var(--c-cool-gray)); border-inline-start-color: rgb(var(--c-primary)); }


.nested-menu-link { display: flex; align-items: center; justify-content: space-between; padding: 10px 0px; color: rgb(51, 51, 51); text-decoration: none; font-size: 14px; transition: 0.2s; flex: 1 1 0%; background: transparent; }


.nested-menu-link:hover { color: rgb(var(--c-primary)); }


.nested-menu-link.active { color: rgb(var(--c-primary)); font-weight: 600; }




.nested-menu-link.level-2 { font-size: 13px; color: rgb(68, 68, 68); font-weight: 500; }


.nested-menu-link.level-3 { font-size: 12px; color: rgb(102, 102, 102); }


.menu-text { flex: 1 1 0%; }


.expand-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: none; background: transparent; cursor: pointer; border-radius: 4px; transition: 0.2s; margin-inline-end: 8px; color: rgb(102, 102, 102); }


.expand-arrow { transition: transform 0.3s; }




.expand-btn.expanded { color: rgb(var(--c-primary)); }


.nested-children { background: rgb(var(--c-cool-gray-10)); border-inline-start: 2px solid rgb(var(--c-cool-gray-2)); margin-inline-start: 0px; overflow: hidden; transition: 0.3s; }




.nested-children.collapsed { max-height: 0px; opacity: 0; }


.badge { background: rgb(var(--c-danger-7)); color: white; font-size: 11px; padding: 2px 6px; border-radius: 10px; margin-inline-start: 5px; flex-shrink: 0; }




.language-trigger { background: rgba(255, 255, 255, 0); border: none; display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 8px; cursor: pointer; transition: 0.3s; font-size: 14px; color: rgb(255, 255, 255); }


.navbar.scrolled .language-trigger { color: rgb(51, 51, 51); }






.language-arrow { transition: transform 0.3s; opacity: 0.7; }




.language-dropdown { position: absolute; top: calc(100% + 10px); inset-inline-end: 0px; background: white; border-radius: 12px; box-shadow: rgba(0, 0, 0, 0.15) 0px 10px 40px; min-width: 220px; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); z-index: 1001; overflow: hidden; }


.language-dropdown.show { opacity: 1; visibility: visible; transform: translateY(0px); }


.language-dropdown-header { padding: 12px 16px; background: rgb(var(--c-cool-gray)); border-bottom: 1px solid rgb(var(--c-cool-gray-2)); font-size: 12px; font-weight: 600; color: rgb(108, 117, 125); text-transform: uppercase; letter-spacing: 0.5px; }


.language-list { list-style: none; margin: 0px; padding: 8px 0px; max-height: 900px; overflow-y: auto; }


.language-option { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 16px; border: none; background: transparent; cursor: pointer; transition: 0.2s; text-align: start; color: rgb(51, 51, 51); }


.language-option:hover { background: rgb(var(--c-cool-gray)); }


.language-option.active { background: rgb(var(--c-success-tint-2)); color: rgb(var(--c-success-3)); }




.language-option-info { display: flex; flex-direction: column; flex: 1 1 0%; gap: 2px; }




.language-option-local { font-size: 12px; color: rgb(108, 117, 125); }

/* 未发布语种占位：不渲染 <a>（robots.txt 已 Disallow 这些路径），视觉弱化、不可点。 */
.language-option--soon { cursor: not-allowed; opacity: 0.55; }
.language-option--soon:hover { background: transparent; }
.language-option--soon .language-option-local { font-style: italic; }


.check-icon { color: rgb(var(--c-success)); flex-shrink: 0; }






@media (max-width: 1024px) and (min-width: 769px) {
  


  


  
.navbar-container { padding: 0px 20px; }


  


  


  


  


  
}


@media (max-width: 768px) {
  


  


  


  


  
.navbar-container { padding: 0px 15px; height: 60px; justify-content: space-between; }


  


  


  
.hamburger-line { display: block; width: 22px; height: 2px; background: rgb(255, 255, 255); transition: 0.3s; border-radius: 1px; }


  
.navbar.scrolled .hamburger-line { background: rgb(51, 51, 51); }


  


  


  


  
.mobile-menu-overlay { position: fixed; inset: 0px; background: rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden; transition: 0.3s; z-index: 998; }


  


  
.mobile-sidebar { position: fixed; top: 0px; inset-inline-end: -100%; width: 80%; max-width: 320px; height: 100vh; background: rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.1) -5px 0px 30px; transition: right 0.3s; z-index: 999; overflow-y: auto; display: flex; flex-direction: column; }


  
.mobile-sidebar.show { inset-inline-end: 0px; }


  
.mobile-sidebar-header { display: flex; justify-content: space-between; align-items: center; padding: 20px; border-bottom: 1px solid rgb(var(--c-cool-gray-2)); background: rgb(var(--c-cool-gray)); }


  
.mobile-sidebar-title { font-size: 18px; font-weight: 600; color: rgb(51, 51, 51); margin-top: 15px; }


  
.mobile-close-btn { background: transparent; border: none; cursor: pointer; color: rgb(102, 102, 102); padding: 5px; display: flex; align-items: center; justify-content: center; }


  
.mobile-search-wrapper { position: relative; padding: 15px 20px; border-bottom: 1px solid rgb(var(--c-cool-gray-2)); }


  
.mobile-search-input { width: 100%; padding-block: 12px; padding-inline: 15px 40px; border: 1px solid rgb(221, 221, 221); border-radius: 25px; font-size: 14px; background: rgb(var(--c-cool-gray)); color: rgb(51, 51, 51); }


  
.mobile-search-input::placeholder { color: rgb(153, 153, 153); }


  


  
.mobile-lang-section { padding: 15px 20px; border-bottom: 1px solid rgb(var(--c-cool-gray-2)); }


  
.mobile-section-label { display: block; font-size: 12px; color: rgb(153, 153, 153); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px; }


  


  
.mobile-lang-item { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid rgb(var(--c-cool-gray-2)); border-radius: 20px; background: rgb(255, 255, 255); cursor: pointer; transition: 0.2s; font-size: 13px; }


  
.mobile-lang-item.active { background: rgb(var(--c-primary)); color: rgb(255, 255, 255); border-color: rgb(var(--c-primary)); }

.mobile-lang-item--soon { cursor: not-allowed; opacity: 0.55; background: transparent; }


  


  
.mobile-nav-container { flex: 1 1 0%; overflow-y: auto; }


  
.mobile-menu-item { border-bottom: 1px solid rgb(240, 240, 240); }


  


  
.mobile-nav-link { display: flex; align-items: center; justify-content: space-between; padding: 14px 0px; color: rgb(51, 51, 51); text-decoration: none; font-size: 15px; font-weight: 500; flex: 1 1 0%; transition: 0.2s; }


  
.mobile-nav-link:hover, .mobile-nav-link.active { color: rgb(var(--c-primary)); }


  
.mobile-nav-link.external { color: rgb(102, 102, 102); }


  


  
.mobile-expand-btn { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: transparent; border: none; cursor: pointer; color: rgb(102, 102, 102); transition: 0.3s; flex-shrink: 0; }


  
.mobile-expand-btn svg { transition: transform 0.3s; }


  


  
.mobile-submenu { background: rgb(var(--c-cool-gray)); overflow: hidden; max-height: 0px; transition: max-height 0.3s; }


  


  
.mobile-menu-item .mobile-menu-item { border-bottom: 1px solid rgb(var(--c-cool-gray-2)); }


  


  


  
.mobile-nav-container > .mobile-menu-item > .mobile-submenu > .mobile-menu-item > .mobile-nav-link-wrapper .mobile-nav-link { font-size: 15px; font-weight: 500; color: rgb(68, 68, 68); }


  
.mobile-nav-container > .mobile-menu-item > .mobile-submenu > .mobile-menu-item > .mobile-submenu > .mobile-menu-item > .mobile-nav-link-wrapper .mobile-nav-link { font-size: 14px; font-weight: 400; color: rgb(85, 85, 85); }


  
.mobile-nav-container > .mobile-menu-item > .mobile-submenu > .mobile-menu-item > .mobile-submenu > .mobile-menu-item > .mobile-submenu > .mobile-menu-item > .mobile-nav-link-wrapper .mobile-nav-link { font-size: 13px; font-weight: 400; color: rgb(102, 102, 102); }
}




.ripple-btn::before, .ripple-btn::after { content: ""; position: absolute; top: 50%; inset-inline-start: 50%; transform: translate(-50%, -50%); width: 20px; height: 20px; background: transparent; border: 1px solid rgb(var(--c-success-4)); border-radius: 50%; animation: 3s ease-out 0s infinite normal none running ripple-line; }




@keyframes ripple-line { 
  0% { width: 20px; height: 20px; opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { width: 80px; height: 80px; opacity: 0; transform: translate(-50%, -50%) scale(2.5); }
}


.ripple-btn > div { animation: 2s ease-in-out 0s infinite normal none running pulse; }


@keyframes pulse { 
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.1); }
}


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


  


  


  


  


  


  


  


  


  
#heroText { width: 50%; inset-inline-end: 5%; height: auto; min-height: 200px; padding: 15px; top: 290% !important; }


  


  
}


@media screen and (max-width: 767px) {
  
.section-container { width: 94%; padding: 0px 10px; overflow: visible !important; }


  


  


  
#heroText .weight { margin: 0px !important; }


  
#hero-section .cta-group { flex-direction: column; align-items: center; gap: 15px; margin-top: 0px !important; }


  
#hero-section .cta-button { width: 300px; justify-content: center; margin-inline-start: 0px !important; }


  
#heroText { position: relative; width: 100%; inset-inline-end: auto; margin-top: 40px; }


  


  
#hero-section .section-container:not(:has(#heroText[style*="display: none"])) #hero-toggle-btn { inset-inline-start: 0px !important; top: 67% !important; }
}


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


  


  
#heroText { min-height: 130px; padding: 5px 8px !important; }


  


  
#hero-section .section-container:not(:has(#heroText[style*="display: none"])) #hero-toggle-btn { inset-inline-start: 0px !important; top: 66% !important; }


  
}


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


  


  
.bg8x { transform: none !important; opacity: 1 !important; -webkit-text-fill-color: rgb(var(--c-earth)) !important; }


  


  


  


  


  


  


  


  


  


  
.products-section { background-size: 120% !important; background-position: 50% 100% !important; padding-bottom: 7rem !important; }
}


@media screen and (max-width: 767px) {
  
.section-container { width: 94%; padding: 0px 10px; }


  


  
.kp3 { flex: 1 1 0%; }


  


  


  


  


  


  


  
.products-grid > div { min-height: 180px; margin-bottom: 0px; height: auto !important; }


  
.products-grid > div .width85 { align-items: flex-start; gap: 15px; margin-top: 1rem !important; display: flex !important; flex-direction: row !important; }


  
.products-grid > div .width90, .products-grid > div .width70 { flex: 1 1 0%; order: 2; width: auto !important; float: none !important; }


  
.products-grid > div .width10, .products-grid > div .width30 { flex-shrink: 0; display: flex; order: 1; width: auto !important; float: none !important; justify-content: flex-start !important; }


  
.products-grid > div .width10 .right, .products-grid > div .width30 .right { float: none !important; margin-inline-start: 0px !important; }


  


  


  


  


  
.products-grid > div.hui .width70 { flex: 1 1 0%; order: 2; color: rgb(107, 107, 107) !important; font-size: 1rem !important; }


  


  
}


@media screen and (max-width: 480px) {
  
.section-header { margin-bottom: 0px; }


  


  


  
.kp3 { flex: 1 1 0%; }


  


  
.products-grid > div .width85 { gap: 10px; align-items: center !important; justify-content: center !important; }


  
.products-grid > div .width90, .products-grid > div .width70 { flex: 1 1 0%; order: 2; text-align: center !important; }


  
.products-grid > div .width10, .products-grid > div .width30 { flex-shrink: 0; order: 1; justify-content: flex-start !important; }


  


  


  


  


  
}


.tobg svg { fill: rgb(255, 255, 255); }










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


  
.top-switch-row { margin-bottom: 10px; flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; padding-top: 15px !important; width: 100% !important; }


  


  


  


  


  


  


  


  


  


  


  
}




.detail-bg { background-repeat: no-repeat; background-size: 100%; background-position: 0% 73%; background-color: rgb(var(--c-cool-gray-8)); background-image: url("/images/f40b63512003ac27.png"); }




.canvas-container canvas { display: block; background: transparent !important; }


@keyframes pulse-ring { 
  0% { transform: scale(1); opacity: 1; box-shadow: rgba(var(--c-accent-3), 0.7) 0px 0px 0px 0px; }
  50% { transform: scale(1.1); opacity: 0.8; box-shadow: rgba(var(--c-accent-3), 0) 0px 0px 0px 10px; }
  100% { transform: scale(1); opacity: 1; box-shadow: rgba(var(--c-accent-3), 0) 0px 0px 0px 0px; }
}


@keyframes glow { 
  0%, 100% { filter: brightness(1) drop-shadow(rgba(var(--c-accent-3), 0.8) 0px 0px 5px); }
  50% { filter: brightness(1.3) drop-shadow(rgb(var(--c-accent-3)) 0px 0px 15px); }
}


.da { cursor: pointer; transition: 0.3s; animation: 2s ease-out 0s infinite normal none running pulse-ring, 1.5s ease-in-out 0s infinite normal none running glow; }


.da:hover { transform: scale(1.2); filter: brightness(1.5) drop-shadow(rgb(var(--c-accent-3)) 0px 0px 20px); }


.db { opacity: 0; visibility: hidden; transform: translateY(20px) scale(0.95); transition: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; }


.db.show { opacity: 1; visibility: visible; transform: translateY(0px) scale(1); pointer-events: auto; }


@keyframes slideIn { 
  0% { opacity: 0; transform: translateX(-20px); }
  100% { opacity: 1; transform: translateX(0px); }
}


.db.show .divIcon { animation: 0.3s ease 0s 1 normal forwards running slideIn; }


.db.show .float { animation: 0.4s ease 0s 1 normal forwards running slideIn; }


.db.show .width100.float { animation: 0.5s ease 0s 1 normal forwards running slideIn; }


/* The scrape froze the origin's scroll-reveal on every .section-container
 * as transform: translateY(20px) (see the .section-container rule further
 * down). A transform creates a stacking context, so inside #detail the
 * product video — a later sibling of the container — paints above the
 * container's z-index:1 hotspot layer and hides the two dots that sit on
 * the product (d1a/d3a). On the original site GSAP clears that transform
 * once the section scrolls into view (computed tf: none), which lets the
 * hotspots float above the video. Lift the whole container above the
 * video here to replicate the settled state. */
#detail .section-container { z-index: 1; }


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


  


  


  


  


  


  


  


  
#d4 { z-index: 99; top: 130px !important; inset-inline-start: 24% !important; }


  


  


  


  


  


  


  


  
}


@media screen and (max-width: 767px) {
  
.section-container { width: 94%; padding-top: 30px; height: auto !important; }


  


  


  
.da { animation: auto ease 0s 1 normal none running none !important; cursor: default !important; transform: none !important; filter: none !important; display: none !important; }


  


  


  


  


  


  


  


  
#d1, #d2, #d3, #d4 { margin-bottom: 0px; position: relative !important; width: 100% !important; top: auto !important; inset-inline-start: auto !important; }


  
.db { position: relative !important; inset-inline-start: 0px !important; width: 100% !important; padding: 1.2rem !important; min-height: auto !important; opacity: 1 !important; visibility: visible !important; transform: none !important; transition: none !important; pointer-events: auto !important; }


  


  


  
.width25.absolute.btnd1 { margin-top: 0.6rem; position: relative !important; width: 100% !important; top: 0px !important; inset-inline-start: 0px !important; }


  


  


  
.absolute.width90 { display: block !important; width: 100% !important; top: 8% !important; inset-inline-end: 0px !important; }
}


@media screen and (max-width: 480px) {
  
.section-header { margin-bottom: 0px; }


  


  


  


  
}




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


  
#iso { background-size: 300% !important; background-position: center center !important; }


  


  


  


  


  


  
}


@media screen and (max-width: 767px) {
  
.section-container { width: 94%; overflow: hidden; padding: 2rem 0px; height: auto !important; }


  


  


  


  


  


  


  


  


  
}


@media screen and (max-width: 480px) {
  
.section-container { min-height: 550px; padding: 0.5rem 0px; }


  


  


  


  


  


  


  


  


  


  


  
}


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


  


  


  


  


  
.width60.float { margin-inline-end: 0px !important; }


  
}










@media screen and (max-width: 1439px) {
  
.section-container { width: 92%; max-width: 1200px; margin: 0px auto; }


  


  


  


  


  


  


  
}


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


  
.section-container { width: 94%; margin: 0px auto; }


  


  


  


  
#m1, #m2, #m3, #m4, #m5 { margin-bottom: 1rem; overflow: hidden; position: relative !important; top: auto !important; inset-inline-start: auto !important; width: 100% !important; }


  


  
}




@media screen and (max-width: 1439px) {
  
.construction-container { width: 92%; max-width: 1200px; padding: 3rem 0px 4rem !important; }


  


  


  


  


  


  


  


  
.construction-content-card { padding: 1.5rem 2rem !important; min-height: 250px !important; width: 100% !important; }


  


  
.construction-nav-item:not(:first-child) { margin-top: 0.8rem !important; }


  


  
}


@media screen and (max-width: 767px) {
  
.construction-container { width: 94%; padding: 2rem 0px 3rem !important; }


  


  


  


  
.construction-main-content { flex-direction: column; display: flex; margin-top: 1.2rem !important; }


  


  
.construction-right-nav { order: 1; margin-bottom: 1.5rem; display: flex; flex-wrap: wrap; gap: 10px; width: 100% !important; margin-top: 0px !important; }


  
.construction-nav-item { width: calc(50% - 5px) !important; margin-top: 0px !important; }


  
.construction-nav-button { text-align: center; width: 100% !important; padding: 10px 15px !important; font-size: 0.8rem !important; }


  


  


  
#construction-section { background-size: cover !important; background-position: center center !important; }


  


  
}


@media screen and (max-width: 480px) {
  
.construction-container { width: 96%; padding: 1.5rem 0px 2.5rem !important; }


  


  


  


  


  


  


  


  
}


@media screen and (max-width: 1439px) {
  
.supply-container { width: 92%; max-width: 1200px; height: 550px !important; padding: 3rem 0px !important; }


  


  


  


  


  


  


  


  


  
.supply-card-title { top: 1.2rem !important; font-size: 0.9rem !important; }


  


  


  


  
.supply-image-item { }


  
.supply-image-item:first-child { }
}


@media screen and (max-width: 767px) {
  
.supply-container { width: 94%; min-height: 600px; height: auto !important; padding: 2rem 0px !important; }


  


  


  


  


  
.supply-card-container { top: 1.2rem !important; height: 280px !important; }


  


  
.supply-card-container { background-position: 48% 0% !important; background-size: 72% !important; }


  


  


  
.supply-card-title { top: 1rem !important; font-size: 0.8rem !important; }


  


  


  
.supply-image-container { position: relative !important; width: 100% !important; top: 0px !important; inset-inline-end: 0px !important; height: 400px !important; gap: 10px !important; }


  
.supply-image-item { }


  
.supply-image-item:first-child { }
}


@media screen and (max-width: 480px) {
  
.supply-container { width: 96%; min-height: 550px; padding: 1.5rem 0px !important; }


  


  


  


  


  


  


  


  
.supply-card-title { top: 0.8rem !important; font-size: 0.7rem !important; }


  


  


  
.supply-image-container { height: 300px !important; gap: 8px !important; }


  
.supply-image-item { }


  
.supply-image-item:first-child { }
}


.faq-clearfix::after { content: ""; display: block; clear: both; height: 0px; visibility: hidden; }


.faq-item { transition: transform 0.3s; }




.faq-item.active .faq-header { color: rgb(51, 51, 51); font-weight: 600; }


.faq-header:hover .faq-title { color: rgb(102, 102, 102); }






.faq-answer-html p { margin: 0px 0px 10px; }


.faq-answer-html p:last-child { margin-bottom: 0px; }


.faq-answer-html a { color: rgb(var(--c-info-3)); }


.faq-answer-html ul, .faq-answer-html ol { margin: 10px 0px; padding-inline-start: 20px; }








.faq-section, .faq-container, .faq-content, .faq-list { box-sizing: border-box; min-height: 0px !important; height: auto !important; }


.faq-section { max-width: 1920px; margin: 0px auto; }


.faq-container { max-width: 1400px; margin: 0px auto; }


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


  
.section { width: 100%; margin: auto; padding: 0rem !important; }


  


  


  


  


  


  


  


  


  
}


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


  


  


  


  


  


  


  
.faq-item:first-child { margin-top: 0px !important; }


  


  


  


  


  
}


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


  


  


  


  


  


  


  
.faq-item:first-child { margin-top: 0px !important; }


  


  


  


  


  
}




@media (max-width: 767px) {
  
.bottom-nav-bar { width: 100%; display: flex; position: fixed; bottom: 16px; inset-inline-start: 50%; transform: translateX(-50%); z-index: 9999; background: rgb(255, 255, 255); border-radius: 50px; padding: 6px 8px; justify-content: center; align-items: center; box-shadow: rgba(0, 0, 0, 0.12) 0px 8px 32px, rgba(0, 0, 0, 0.06) 0px 2px 8px; }


  
.bottom-nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8px 14px; text-decoration: none; color: rgb(153, 153, 153); transition: 0.25s; min-width: 52px; cursor: pointer; border-radius: 40px; }


  
.bottom-nav-item.center-item { background: linear-gradient(135deg, rgb(var(--c-accent-5)) 0%, rgb(var(--c-primary-5)) 100%); }


  
.bottom-nav-item.center-item .bottom-nav-label { color: rgb(255, 255, 255); font-size: 10px; }


  


  


  
.bottom-nav-item.nav-active:not(.center-item) .bottom-nav-label { background: linear-gradient(135deg, rgb(var(--c-accent-5)) 0%, rgb(var(--c-primary-5)) 100%) text; -webkit-text-fill-color: transparent; font-weight: 600; }


  


  


  
.bottom-nav-icon-img { width: 20px; height: 20px; object-fit: contain; transition: 0.25s; }


  


  
.bottom-nav-label { font-family: Roboto, sans-serif; font-size: 9px; font-weight: 500; letter-spacing: 0.3px; line-height: 1; transition: color 0.25s; text-align: center; color: rgb(153, 153, 153); white-space: nowrap; }
}






















.box_1-img { position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center center; transform-origin: center center; animation: 20s ease-out 0s infinite normal none running bgZoomIn; z-index: 0; }




@keyframes bgZoomIn { 
  0% { transform: scale(1); }
  100% { transform: scale(1.2); }
}


.box_1-bg { opacity: 0; animation: 0.8s ease-out 0.5s 1 normal forwards running fadeIn; }


@keyframes fadeIn { 
  0% { opacity: 0; }
  100% { opacity: 1; }
}


.box_1-title { opacity: 0; transform: translateY(-30px); animation: 0.8s ease-out 0.8s 1 normal forwards running slideDown; }


@keyframes slideDown { 
  0% { opacity: 0; transform: translateY(-30px); }
  100% { opacity: 1; transform: translateY(0px); }
}


.box_1-subtitle { opacity: 0; transform: translateY(30px); animation: 0.8s ease-out 1s 1 normal forwards running slideUp; }


@keyframes slideUp { 
  0% { opacity: 0; transform: translateY(30px); }
  100% { opacity: 1; transform: translateY(0px); }
}


.box_1-desc { opacity: 0; transform: translateY(40px); animation: 0.8s ease-out 1.2s 1 normal forwards running slideUpDesc; }


@keyframes slideUpDesc { 
  0% { opacity: 0; transform: translateY(40px); }
  100% { opacity: 1; transform: translateY(0px); }
}


.image-wrapper-5-container { width: 100%; overflow: hidden; margin: 41px 0px 50px; }







@media screen and (max-width: 1024px) and (min-width: 769px) {
  
.image-wrapper-5-container { overflow: hidden; position: relative; width: 100% !important; margin: 20px 0px !important; }


  

  
.customer-item { flex-shrink: 0; width: 220px !important; margin-inline-end: 30px !important; }


  


  
}


@media screen and (max-width: 768px) {
  
.image-wrapper-5-container { margin: 20px 0px 30px; }


  


  


  


  

  }







.certificate-container { width: 340px; height: 460px; margin-inline-end: 37px; flex: 0 0 340px; border: 8px solid rgb(var(--c-warning-5)); border-radius: 10px; box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 15px; background: white; padding: 20px; display: flex; align-items: center; justify-content: center; position: relative; }




@keyframes fadeIn { 
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0px); }
}


@media screen and (max-width: 1024px) and (min-width: 769px) {
  

  

  
.width20.fff { width: 60% !important; margin: 150px auto 0px !important; height: auto !important; }


  


  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  }




@media screen and (max-width: 768px) {
  
.section-container { width: 100%; padding: 0px 20px !important; }


  

  

  

  
.width20.fff { width: 90% !important; margin: 80px auto 0px !important; height: auto !important; }


  


  


  


  


  

  

  

  


  


  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  


  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  


  

  

  

  

  

  

  

  

  

  

  

  

  
.certificate-container { padding: 0px; width: 170px !important; height: 224px !important; flex-basis: auto !important; }


  

  

  

  

  

  

  

  

  


  
.image-wrapper-5-container { overflow: hidden; position: relative; width: 100% !important; margin: 20px 0px !important; }


  

  
.customer-item { flex-shrink: 0; width: 220px !important; margin-inline-end: 16px !important; }


  

  

  }










.page { background-color: rgb(255, 255, 255); position: relative; width: 100%; overflow: hidden; }











































































































































































































































body { font-family: PingFangSC-Regular, Roboto, "Helvetica Neue", Helvetica, Tahoma, Arial, "PingFang SC-Light", "Microsoft YaHei"; }


button { margin: 0px; padding: 0px; border: 1px solid transparent; outline: none; background-color: transparent; }


.select_1, .input_1 { border: 1px solid rgb(182, 177, 177); height: 40px; line-height: 40px; background-color: rgb(244, 244, 245); border-radius: 26px; padding: 5px 15px; width: 100%; }




















.section-container { width: 1440px; margin: 0px auto; position: relative; }






.hero-background { position: absolute; top: 0px; inset-inline-start: 0px; width: 100%; height: 100%; overflow: hidden; z-index: 0; }


.hero-background img { width: 100%; height: 100%; object-fit: cover; object-position: center center; transform-origin: center center; animation: 20s ease-out 0s infinite normal none running bgZoomIn; }

























































































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


  

  
.hero-content { padding: 0px; }


  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  
.input_1.right { border: 1px solid rgb(182, 177, 177); width: 100% !important; margin-top: 5px !important; }


  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  }


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

  

  

  

  

  

  

  
.select_1, .input_1 { border: 1px solid rgb(182, 177, 177); height: 44px; line-height: 44px; }


  }


.news-background { position: relative; top: 0px; inset-inline-start: 0px; width: 100%; height: 400px; z-index: 0; overflow: hidden; }


.news-background_img { display: block; position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center center; transform-origin: center center; animation: 20s ease-in-out 0s infinite alternate none running zoomIn; }



.block_11_bottom { position: absolute; bottom: -2px; inset-inline-start: 0px; width: 100%; height: 50px; object-fit: fill; z-index: 3; }


@keyframes zoomIn { 
  0% { transform: scale(1); }
  100% { transform: scale(1.6); }
}


.section-container { opacity: 1; transform: translateY(20px); transition: opacity 0.8s, transform 0.8s; }


.page-title { opacity: 1; transform: translateY(-20px); animation: 1s ease 0.2s 1 normal forwards running fadeInDown; }


.news-card { opacity: 1; transform: translateY(30px); transition: opacity 0.6s, transform 0.6s; }


.news-image { transition: transform 0.5s; overflow: hidden; }




.news-image img { transition: transform 0.5s; }




#nleft { opacity: 0; transform: translateX(-30px); animation: 1s ease 0.4s 1 normal forwards running fadeInLeft; }


.width70.right { opacity: 1; transform: translateX(30px); transition: opacity 1s 0.6s, transform 1s 0.6s; }




.search-icon { transition: 0.3s; }


.search-icon:hover { transform: scale(1.1); fill: rgb(var(--c-accent-8)); }


.email, .message { transition: 0.3s; }


.email:focus, .message:focus { box-shadow: rgba(var(--c-accent), 0.3) 0px 0px 0px 2px; transform: translateY(-2px); }











.pagination-btn { transition: 0.3s; }


.pagination-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: rgba(var(--c-accent), 0.3) 0px 2px 8px; }


@keyframes fadeInDown { 
  0% { opacity: 1; transform: translateY(-20px); }
  100% { opacity: 1; transform: translateY(0px); }
}


@keyframes fadeInLeft { 
  0% { opacity: 1; transform: translateX(-30px); }
  100% { opacity: 1; transform: translateX(0px); }
}


@keyframes fadeInRight { 
  0% { opacity: 1; transform: translateX(30px); }
  100% { opacity: 1; transform: translateX(0px); }
}


@keyframes fadeInUp { 
  0% { opacity: 1; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0px); }
}


.loading-spinner { display: inline-block; width: 50px; height: 50px; border-width: 3px; border-style: solid; border-color: rgb(var(--c-accent-8)) rgba(var(--c-accent), 0.3) rgba(var(--c-accent), 0.3); border-image: initial; border-radius: 50%; animation: 1s ease-in-out 0s infinite normal none running spin; }


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


















































































.search-icon:hover { transform: scale(1.1); fill: rgb(var(--c-accent)); }




.pagination-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: rgba(var(--c-accent), 0.3) 0px 4px 12px; border-color: rgb(var(--c-accent)) !important; }


.pagination-btn:active:not(:disabled) { transform: translateY(0px); }


@media screen and (max-width: 1024px) {
  
.section-container { width: 95% !important; margin: 50px auto !important; }


  

  


  


  
#nleft { margin-bottom: 30px; width: 100% !important; float: none !important; }


  


  

  

  

  

  

  

  


  
}


@media screen and (max-width: 767px) {
  
.section-container { width: 100% !important; padding: 0px 20px !important; }


  

  


  


  
#nleft { margin-bottom: 30px; width: 100% !important; float: none !important; }


  


  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  
.pagination-container { flex-wrap: wrap; width: 77% !important; gap: 3px !important; }


  


  

  }


@media screen and (max-width: 767px) {
  
.section-container { width: 100% !important; padding: 0px 20px !important; }


  

  


  


  
#nleft { margin-bottom: 30px; width: 100% !important; float: none !important; }


  


  

  

  

  

  

  

  

  }















.pagination-container { flex-wrap: wrap; width: 77% !important; gap: 3px !important; }










.safe div:last-child span:last-child { color: rgb(var(--c-success-2)); }


.warning div:first-child { background: rgb(var(--c-warning-tint)); }


.warning div:last-child span:last-child { color: rgb(var(--c-warning-4)); }


.danger div:first-child { background: rgb(var(--c-danger-tint)); }


.danger div:last-child span:last-child { color: rgb(var(--c-danger-4)); }










.fullImgBox #boxBgImg2 { }







.tw1 > span { line-height: 32px; font-size: 14px; display: inline !important; white-space: nowrap !important; }


.tw1 > span:nth-of-type(2n+1) { font-family: Montserrat-Semibold; }


.tw1 > span:nth-of-type(2n+1)::before { content: ""; display: inline-block; width: 6px; height: 6px; background: linear-gradient(to right, rgb(var(--c-accent-2)) 0%, rgb(var(--c-eco)) 50%, rgb(var(--c-primary-2)) 100%); border-radius: 50%; margin-inline-end: 6px; vertical-align: middle; }

















.textfilex { display: flex; justify-content: space-between; align-items: center; padding: 0px 10px; }




















































.block_11_bg { position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center 85%; transform-origin: center center; animation: 60s ease-out 0s infinite normal none running bgZoomIn; z-index: 1; }







.section19 { padding: 100px 0px; background-color: rgb(255, 255, 255); position: relative; overflow: hidden; }




.section19_bg { position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; object-position: 100% 40%; z-index: 0; }


.section19::before { content: ""; position: absolute; top: 0px; inset-inline-start: 0px; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.85); z-index: 1; pointer-events: none; }


.section19 > :not(.section19_bg) { position: relative; z-index: 2; }


.section19center { width: 439px; height: 64px; border-radius: 70px; margin: 40px auto; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0); border: 2px solid transparent; position: relative; }


.section19center::before { content: ""; position: absolute; inset: 0px; border-radius: 60px; padding: 2px; background: linear-gradient(to right, rgb(var(--c-accent)), rgb(var(--c-primary))); mask: linear-gradient(rgb(255, 255, 255) 0px, rgb(255, 255, 255) 0px) content-box exclude, linear-gradient(rgb(255, 255, 255) 0px, rgb(255, 255, 255) 0px); pointer-events: none; }


.section19center span { font-weight: 700; font-size: 24px; line-height: 30px; text-align: center; }


.section19text { font-weight: 400; font-size: 16px; line-height: 160%; text-align: center; color: rgb(37, 37, 37); margin-bottom: 40px; }


.section19box2 { width: 323px; height: 222px; gap: 20px; padding-block: 16px 52px; padding-inline: 13px 12px; border-radius: 16px; position: relative; overflow: hidden; }


.section19box2_bg { position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center center; z-index: 0; border-radius: 16px; }


.section19box2::before { content: ""; position: absolute; top: 0px; inset-inline-start: 0px; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 1; pointer-events: none; border-radius: 16px; }




.section19box3 { width: 323px; height: 222px; gap: 20px; padding-block: 16px 52px; padding-inline: 13px 12px; border-radius: 16px; background-color: rgb(247, 247, 247); }


.section19box6 { width: 323px; height: 222px; gap: 20px; padding-block: 16px 52px; padding-inline: 13px 12px; border-radius: 16px; background-color: rgb(247, 247, 247); }


.section19box4 { width: 323px; height: 222px; gap: 20px; padding-block: 16px 52px; padding-inline: 13px 12px; border-radius: 16px; background-color: rgb(247, 247, 247); position: relative; overflow: hidden; }


.section19box4_bg { position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center center; z-index: 0; border-radius: 16px; }


.section19boxcontent { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: 0.4s; }


.section19box1 { width: 100%; display: flex; align-items: baseline; justify-content: center; transition: 0.4s; }


.section19box2num { font-family: Montserrat; font-weight: 700; font-size: 16px; line-height: 26px; text-align: center; color: rgb(255, 255, 255); }


.section19box2text1 { font-weight: 400; font-size: 16px; line-height: 26px; text-align: center; color: rgb(255, 255, 255); }


.section19box2text2 { font-weight: 400; font-size: 16px; line-height: 26px; text-align: center; color: rgb(255, 255, 255); }


.section19box3text { font-family: Montserrat; font-weight: 700; font-size: 16px; line-height: 26px; text-align: center; display: inline-block; vertical-align: bottom; margin-inline-start: 5px; }


.section19box3text1 { font-weight: 400; font-size: 16px; line-height: 26px; text-align: center; }


.section19box3num { font-family: Montserrat; font-weight: 700; font-size: 16px; line-height: 26px; text-align: center; display: inline-block; background: linear-gradient(to right, rgb(var(--c-accent-2)) 0%, rgb(var(--c-eco)) 40%, rgb(var(--c-primary-2)) 100%) text; color: transparent; }


.section19box6num { font-family: Montserrat; font-weight: 700; font-size: 16px; line-height: 26px; text-align: center; display: inline-block; background-clip: text; }


.section19box6text { font-family: Montserrat; font-weight: 700; font-size: 16px; line-height: 26px; text-align: center; display: inline-block; vertical-align: bottom; margin-inline-start: 5px; }


.section19box6text1 { font-weight: 400; font-size: 16px; line-height: 26px; text-align: center; }


.section19box4num { font-family: Montserrat; font-weight: 700; font-size: 16px; line-height: 26px; text-align: center; }


.section19box4text1 { font-family: Montserrat; font-weight: 700; font-size: 16px; line-height: 26px; text-align: center; }


.section19box4text2 { font-weight: 400; font-size: 16px; line-height: 26px; text-align: center; }


.section19allbox { width: 1400px; height: 301px; margin: 0px auto; display: flex; align-items: center; justify-content: center; gap: 40px; }


.section19box2, .section19box3, .section19box4, .section19box6 { transition: 0.4s; }


.section19box6num, .section19box6text, .section19box6text1, .section19box2num, .section19box2text1, .section19box2text2, .section19box3num, .section19box3text, .section19box3text1, .section19box4num, .section19box4text1, .section19box4text2 { transition: font-size 0.45s cubic-bezier(0.25, 0.1, 0.25, 1), line-height 0.45s cubic-bezier(0.25, 0.1, 0.25, 1), font-weight 0.45s, margin 0.45s cubic-bezier(0.25, 0.1, 0.25, 1); }












.section19box6-hover:hover .section19box6-desc { margin-top: 0px; }


























.section20 { padding: 100px 0px; background-color: rgb(255, 255, 255); position: relative; overflow: hidden; z-index: 1; }


.section20text { width: 1300px; font-family: Montserrat; font-weight: 400; font-size: 16px; line-height: 160%; text-align: center; margin: 40px auto; color: rgb(121, 121, 121); }


.section20table { width: 1400px; margin: 60px auto 0px; font-family: Montserrat, sans-serif; }


.section20table-header { display: flex; align-items: center; background: linear-gradient(90deg, rgb(var(--c-accent)) 0%, rgb(var(--c-primary)) 100%); border-radius: 12px 12px 0px 0px; overflow: hidden; }


.section20th { padding: 18px 24px; color: rgb(255, 255, 255); font-size: 16px; font-weight: 600; text-align: center; line-height: 1.4; }










.section20table-row { display: flex; align-items: stretch; border-bottom: 1px dashed rgba(0, 0, 0, 0.54); background: rgb(255, 255, 255); }


.section20table-row:last-child { border-bottom: none; border-radius: 0px 0px 12px 12px; overflow: hidden; }


.section20td { padding: 20px 24px; font-size: 14px; line-height: 1.6; color: rgb(121, 121, 121); display: flex; flex-direction: column; justify-content: center; text-align: center; }




.section20td-2 { width: 18%; text-align: center; align-items: center; font-weight: 500; color: rgb(121, 121, 121); }




.section20td-4 { width: 50%; padding-inline-start: 30px; color: rgb(121, 121, 121); }


.section20td-title, .section20td-sub { font-weight: 700; color: rgb(0, 0, 0); font-size: 14px; display: block; text-align: center; }








.section20text2-title { font-family: Montserrat; font-weight: 700; font-size: 16px; line-height: 24px; display: inline; }




.section20box { width: 1400px; margin: 40px auto 0px; display: flex; align-items: center; justify-content: center; gap: 40px; }


.section21 { padding: 100px 0px; overflow: hidden; }


.section21box { width: 514px; min-height: 400px; background-color: rgb(255, 255, 255); padding: 40px; display: flex; flex-direction: column; gap: 20px; border-radius: 16px; }




.section21img { width: 100%; height: 4px; background: linear-gradient(90deg, rgb(var(--c-accent)) 0%, rgb(var(--c-primary)) 100%); border-radius: 2px; position: relative; margin-bottom: 20px; transform-origin: left center; transform: scaleX(0); }


.section21img.loaded { animation: 0.8s ease-out 0s 1 normal forwards running lineGrow; }


@keyframes lineGrow { 
  0% { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}


.section21img::after { content: ""; position: absolute; inset-inline-end: 0px; top: 50%; transform: translateY(-50%); width: 12px; height: 12px; background: rgb(var(--c-primary)); border-radius: 50%; opacity: 0; transition: opacity 0.3s 0.6s; }




.section21title { font-family: Montserrat; font-weight: 700; font-size: 20px; line-height: 30px; text-align: start; margin-bottom: 50px; }


.section21title2 { font-family: Montserrat; font-weight: 700; font-size: 20px; line-height: 30px; text-align: start; margin-bottom: 51px; }


.section21title3 { font-family: Montserrat; font-weight: 700; font-size: 20px; line-height: 30px; text-align: start; margin-bottom: 51px; }


.section21title4 { font-family: Montserrat; font-weight: 700; font-size: 20px; line-height: 30px; text-align: start; margin-bottom: 51px; }


.section21desc1 { font-family: Montserrat; font-weight: 400; font-size: 16px; line-height: 24px; text-align: start; }






.section21title1 { font-family: Montserrat; font-weight: 700; font-size: 16px; line-height: 24px; text-align: start; display: inline; }


.section21boxnum { font-family: Montserrat; font-weight: 700; font-size: 60px; line-height: 60px; text-transform: capitalize; background: linear-gradient(to right, rgb(var(--c-accent-2)) 0%, rgb(var(--c-eco)) 40%, rgb(var(--c-primary-2)) 100%) 0% 0% / 100% 100% text; color: transparent; display: inline-block; }


.section21title1 { font-family: Montserrat; font-weight: 700; line-height: 30px; text-align: start; display: inline; }


.section21desc1 { font-family: Montserrat; font-weight: 400; font-size: 16px; line-height: 24px; display: inline; }


.section21-viewport { width: 1700px; min-height: 500px; margin: 0px auto; overflow: hidden; display: flex; align-items: center; }




.section26box { transition: 0.3s; }










.section26box:hover .tobg3 { background: linear-gradient(90deg, rgb(var(--c-accent)) 0%, rgb(var(--c-primary)) 100%) !important; border-color: transparent !important; }






.image::before { content: ""; position: absolute; inset: 0px; background: linear-gradient(rgb(42, 42, 42) 0%, rgb(26, 26, 26) 100%); z-index: 0; }


.imageBg { position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; z-index: 1; animation: 20s ease-in-out 0s infinite alternate none running imageBgZoom; }


@keyframes imageBgZoom { 
  0% { transform: scale(1.1); }
  100% { transform: scale(1.3); }
}



.text { position: relative; z-index: 5; padding-top: 170px; font-family: Montserrat; font-weight: 700; line-height: 100%; text-align: center; text-transform: uppercase; margin-bottom: 40px; color: rgb(255, 255, 255); }


.text1 { position: relative; z-index: 5; overflow-wrap: break-word; color: rgb(255, 255, 255); font-family: Montserrat-Light; font-weight: 400; font-size: 14px; text-align: center; white-space: nowrap; margin: -20px auto 0px; }


.feature-section { max-width: 1400px; margin: 0px auto; padding: 50px 0px !important; }


@media (max-width: 991px) and (min-width: 768px) {
  


  

  

  

  

  

  


  


  


  


  


  


  


  
.section19 { padding: 60px 0px !important; }


  
.section19 .section-title { font-size: 28px !important; padding: 0px 20px !important; }


  
.section19 .section-title.mt15 { font-size: 20px !important; padding: 0px 40px !important; }


  


  


  
.section19text { font-size: 14px !important; padding: 0px 20px !important; }


  
.section19allbox { width: 100% !important; height: auto !important; flex-wrap: wrap !important; gap: 20px !important; padding: 0px 20px !important; }


  


  


  


  


  


  


  
.section20 { padding: 60px 0px !important; }


  
.section20 .section-title { font-size: 28px !important; padding: 0px 20px !important; }


  
.section20 .section-title.mt15 { font-size: 20px !important; padding: 0px 20px !important; }


  
.section20text { width: 100% !important; padding: 0px 20px !important; font-size: 14px !important; }


  
.section20table { width: 100% !important; padding: 0px 20px !important; overflow-x: auto !important; }


  


  


  


  
.section20box { width: 100% !important; padding: 0px 20px !important; flex-wrap: wrap !important; gap: 20px !important; }


  


  

  

  

  

  


  


  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  
.section21 { padding: 60px 0px !important; }


  
.section21 .section-title { font-size: 28px !important; padding: 0px 20px !important; }


  
.section21 .section-title.mt15 { font-size: 20px !important; padding: 0px 20px !important; }


  
.section21 .section20text { font-size: 14px !important; padding: 0px 20px !important; }


  
.section21-viewport { width: 100% !important; padding: 0px 20px !important; min-height: 400px !important; overflow-x: auto !important; }


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  
.stats-section { padding: 60px 0px 0px !important; height: auto !important; min-height: 580px !important; }


  
.stats-section .section-container { max-width: 720px !important; padding: 0px 20px !important; }


  


  


  
.stats-section .stats-item { flex: 0 0 50% !important; height: 160px !important; padding: 0px 12px !important; border-inline-start: none !important; border-bottom: 1px solid rgb(224, 224, 224) !important; }


  


  


  


  


  


  
.stats-section .stats-btn { padding: 0px 24px !important; line-height: 48px !important; font-size: 14px !important; }


  


  


  


  
.section26box { flex: 0 0 50% !important; padding: 0px 12px !important; }


  


  


  
}


@media (max-width: 767px) {
  


  

  


  


  

  

  

  

  


  


  


  


  


  


  


  


  


  
.section19 .section-title { font-size: 20px !important; padding: 0px !important; }


  
.section19 .section-title.mt15 { font-size: 20px !important; padding: 0px !important; }


  
.section19center { margin: 20px auto; width: auto !important; height: 48px !important; }


  


  
.section19text { margin: 0px auto; font-size: 12px !important; padding: 0px !important; line-height: 1.6 !important; }


  
.section19allbox { width: 100%; margin: 20px auto 0px; padding: 0px !important; gap: 16px !important; height: auto !important; }


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  
.section20 .section-title { font-size: 20px !important; padding: 0px !important; }


  
.section20 .section-title.mt15 { font-size: 20px !important; padding: 0px !important; }


  
.section20text { margin: 20px auto; line-height: 1.6; width: 100%; font-size: 13px !important; padding: 0px !important; }


  
.section20table { margin: 20px auto; width: 1000px; padding: 0px !important; }


  


  


  


  


  
.section20box { margin: 40px auto 0px; width: 100%; gap: 16px !important; flex-wrap: nowrap !important; align-items: flex-start !important; justify-content: flex-start !important; }


  


  


  
.section20text2 { flex: 1 1 0% !important; width: auto !important; }


  


  


  

  

  

  

  


  
.textfilex { display: flex; flex-wrap: wrap; justify-content: center; padding: 0px !important; gap: 10px !important; }


  


  

  

  

  

  

  


  

  

  

  

  

  

  

  

  

  

  


  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  


  
.section21 .section-title { font-size: 20px !important; padding: 0px !important; }


  
.section21 .section-title.mt15 { font-size: 20px !important; padding: 0px !important; }


  
.section21 .section20text { font-size: 16px !important; padding: 0px !important; }


  
.section21-viewport { padding: 0px 16px !important; min-height: 340px !important; }


  


  


  


  


  
.section21box2 { margin-top: 0px !important; }


  
.section21title4 { margin-bottom: 0px !important; }


  


  


  


  


  


  


  


  


  


  


  
.stats-section .section-container { width: auto !important; padding: 0px !important; }


  


  


  
.stats-section .stats-item { flex: 0 0 100% !important; height: auto !important; padding: 0px 0px 8px !important; margin-bottom: 8px !important; border-bottom: 1px solid rgb(224, 224, 224) !important; }


  


  


  


  


  


  
.stats-section .stats-btn { padding: 0px 10px !important; line-height: 42px !important; font-size: 12px !important; width: 250px !important; }


  


  


  


  


  


  
}








.tab-header.reveal { position: relative; overflow: visible !important; }


@media screen and (max-width: 1024px) {
  
.section9-pic2 { min-height: 600px; background-position: center top; margin-top: -200px !important; height: auto !important; background-size: cover !important; }


  


  
.section1-row .firstbox { width: 55% !important; padding: 0px !important; }


  
.section1-row img { display: block; max-width: 40% !important; height: auto !important; margin: 0px !important; }


  
.section1-btns { flex-wrap: wrap; width: 100%; justify-content: center !important; }


  


  
.flexbox > div:nth-child(1) > div:nth-child(1) { order: 2; width: 100% !important; margin-inline-start: 0px !important; }


  


  
.flexbox > div:nth-child(1) > div:nth-child(2) { text-align: center; order: 1; width: 100% !important; }


  
.flexbox > div:nth-child(1) > div:nth-child(2) img { display: block; width: 100% !important; max-width: 400px !important; height: auto !important; margin: 0px auto !important; }


  
.flexbox > div:nth-child(2) { width: 100%; flex-wrap: wrap; justify-content: center !important; }


  


  


  
.firstbox10 .text-icon { width: 22px; height: 22px; margin-inline-end: 0px; }


  


  


  
.firstbox10 .divider10 { margin: 24px 0px; }


  


  


  
.sectiob18lebox { display: flex; flex-direction: column; align-items: center; text-align: center; width: 100% !important; }


  


  
.sectiob18title { text-align: center; width: 100% !important; font-size: 24px !important; line-height: 30px !important; margin-bottom: 20px !important; }


  
.sectiob18desc { max-width: 600px; text-align: center; width: 100% !important; margin-bottom: 20px !important; }


  


  


  
.sectiob18imgbox img { display: block; width: 100% !important; max-width: 500px !important; height: auto !important; margin: 0px auto !important; }


  
.section18rightbox { width: 100% !important; padding-top: 0px !important; display: flex !important; flex-direction: row !important; justify-content: center !important; align-items: center !important; gap: 20px !important; }


  
.sectiob18rightbox1 { margin-bottom: 0px !important; gap: 15px !important; }


  
.sectiob18rightbox3 img { border-radius: 15px; width: 180px !important; height: auto !important; margin-top: 0px !important; }
}


@media screen and (max-width: 768px) {
  
.section9-pic2 { min-height: 480px; margin-top: -120px !important; background-size: cover !important; }


  


  
.section1-row .firstbox { order: 2; width: 100% !important; padding: 0px !important; }


  
.section1-row img { display: block; order: 1; width: 100% !important; max-width: 100% !important; margin: 0px auto !important; }


  
.section1-btns { margin-top: 10px; flex-direction: column !important; align-items: center !important; width: 100% !important; gap: 16px !important; }


  
.section1-btns button { max-width: 400px; width: 100% !important; justify-content: center !important; font-size: 16px !important; }


  


  
.firstbox10 .text-section:last-child { margin-bottom: 0px; }


  


  
.firstbox10 .text-icon { width: 20px; height: 20px; margin-inline-end: 0px; flex-shrink: 0; }


  


  
.firstbox10 .text-content { font-size: 14px; line-height: 1.5; color: rgb(102, 102, 102); }


  
.firstbox10 .divider10 { margin: 20px 0px; }
}


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


  


  


  


  


  


  


  


  


  


  
.firstbox10 .divider10 { margin: 16px 0px; }
}


.tab-item { flex: 1 1 0%; text-align: center; padding: 16px 20px; cursor: pointer; border-radius: 15px; position: relative; z-index: 1; transition: color 0.4s; font-family: Montserrat, sans-serif; font-weight: 500; font-size: 14px; line-height: 20px; letter-spacing: 0.02em; user-select: none; background: rgba(255, 255, 255, 0.55); }


.tab-item::before { content: ""; position: absolute; inset: 0px; border-radius: 15px; background: linear-gradient(90deg, rgba(var(--c-accent-4), 0.75) 0%, rgba(var(--c-primary-3), 0.75) 55%); opacity: 0; transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1); z-index: -1; }


.tab-item.active { color: rgb(255, 255, 255); }




.tab-connector { position: absolute; inset-inline-start: 50%; top: 100px; transform: translateX(-50%); width: 2px; background: rgb(255, 255, 255); pointer-events: none; transition: height 0.3s; }


.tab-content { max-width: 800px; margin: auto auto 60px; text-align: center; position: relative; z-index: 2; min-height: 180px; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; }


.tab-content-heading { display: block; font-family: Montserrat, sans-serif; font-weight: 700; font-size: 22px; line-height: 32px; color: rgb(255, 255, 255); margin-bottom: 0px; }


.tab-content-desc { display: block; font-family: Montserrat, sans-serif; font-weight: 400; font-size: 16px; line-height: 26px; color: rgba(255, 255, 255, 0.9); margin: 0px; }


.tab-content.fade-in { animation: 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0s 1 normal forwards running tabFadeIn; }


.tab-content.fade-out { animation: 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0s 1 normal forwards running tabFadeOut; }


@keyframes tabFadeIn { 
  0% { opacity: 0; }
  100% { opacity: 1; }
}


@keyframes tabFadeOut { 
  0% { opacity: 1; }
  100% { opacity: 0; }
}


.reveal { opacity: 0; transform: translateY(60px); transition: 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); color: rgb(37, 37, 37) !important; }


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


.section3text1.reveal, .section8text1.reveal, .section8text2.reveal { color: rgb(255, 255, 255) !important; }


.slide-bottom-right { opacity: 0; transform: translate(80px, 80px); transition: 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); color: rgb(37, 37, 37) !important; }


.slide-bottom-right.show { opacity: 1; transform: translate(0px, 0px); transition-delay: 0.4s; }


@keyframes fadeInDown { 
  0% { opacity: 0; transform: translateY(-40px); }
  100% { opacity: 1; transform: translateY(0px); }
}


@keyframes fadeInUp { 
  0% { opacity: 0; transform: translateY(40px); }
  100% { opacity: 1; transform: translateY(0px); }
}


.animate-down { animation: 1s ease-out 0.2s 1 normal both running fadeInDown; }


.animate-up { animation: 1s ease-out 0.5s 1 normal both running fadeInUp; }




.imageBg { position: absolute; inset-inline-start: 0px; top: -99.2%; width: 100%; height: 260%; object-fit: cover; z-index: 1; animation: 20s ease-in-out 0s infinite alternate none running imageBgZoom; }


@keyframes imageBgZoom { 
  0% { transform: scale(1); }
  100% { transform: scale(1.35); }
}



.text { position: relative; z-index: 5; padding-top: 170px; font-family: Montserrat; font-weight: 700; line-height: 100%; text-align: center; text-transform: uppercase; margin-bottom: 40px; }


.text1 { position: relative; z-index: 5; overflow-wrap: break-word; color: rgb(255, 255, 255); font-family: Montserrat-Light; font-weight: 400; font-size: 14px; text-align: center; white-space: nowrap; margin: 15px auto 0px; }




.section10 { width: 100%; height: auto; padding: 100px 0px 0px; background-color: white; }


.section10Text1 { overflow-wrap: break-word; font-size: 48px; text-align: center; line-height: 60px; gap: 20px; margin: 40px auto; display: block; width: 1310px !important; height: 120px !important; }


.section10Text2 { width: 1151px; height: 48px; line-height: 24px; text-align: center; margin: 20px auto 40px; display: block; color: rgb(121, 121, 121) !important; }


.divider10 { height: 1px; background-color: rgb(211, 211, 211); margin: 30px 0px; }




.text-section:last-child { margin-bottom: 0px; }






.text-title { margin: 0px; font-family: Montserrat, sans-serif; font-weight: 500; font-size: 20px; line-height: 24px; }


.text-content { margin: 0px; font-family: Montserrat, sans-serif; font-size: 16px; line-height: 1.6; color: rgb(102, 102, 102); text-align: start; }











.section4Text1 { width: 980px; height: 118px; overflow-wrap: break-word; font-size: 48px; text-align: center; line-height: 1; gap: 20px; margin-inline-start: auto; margin-inline-end: auto; margin-bottom: 40px; display: block; color: rgb(30, 30, 30); }


.section4Text2 { width: 1400px; height: 52px; overflow-wrap: break-word; font-size: 16px; text-align: center; line-height: 1.6; margin-inline-start: auto; margin-inline-end: auto; margin-bottom: 40px; display: block; color: rgb(102, 102, 102) !important; }


.image-wrapper { position: relative; width: 100%; height: 275px; border-radius: 15px; overflow: hidden; transition: transform 0.3s; }


.image-wrapper-large { position: relative; width: 100%; height: 425px; border-radius: 15px; transition: transform 0.3s; overflow: hidden !important; }




.image-overlay { position: absolute; bottom: 0px; inset-inline-start: 0px; inset-inline-end: 0px; height: 60%; background: linear-gradient(transparent 0%, rgba(0, 0, 0, 0.5) 100%); pointer-events: none; }










.secondtitle { font-family: Montserrat; font-size: 20px; font-weight: 600; margin-bottom: 20px; margin-top: 10px; }













.slide-from-bottom-right.show { transform: translate(0px, 0px); }


.firstbox1 { width: 670px; height: 64px; display: flex; justify-content: space-evenly; align-items: center; border-bottom: 1px solid rgb(213, 213, 213); }


.twobox { width: 670px; height: 64px; display: flex; justify-content: space-evenly; align-items: center; border-bottom: 1px solid rgb(213, 213, 213); }


.thirdbox { width: 670px; height: 64px; display: flex; justify-content: space-evenly; align-items: center; border-bottom: 1px solid rgb(213, 213, 213); }


.thirdboxs { width: 670px; height: 64px; display: flex; justify-content: space-evenly; align-items: center; border-bottom: 1px solid rgb(213, 213, 213); }


.fourbox { width: 670px; height: 64px; display: flex; justify-content: space-evenly; align-items: center; border-bottom: 1px solid rgb(213, 213, 213); }


.fivebox { width: 670px; height: 88px; display: flex; justify-content: space-evenly; align-items: center; border-bottom: 1px solid rgb(213, 213, 213); }


.fiveboxs { width: 670px; height: 64px; display: flex; justify-content: space-evenly; align-items: center; border-bottom: 1px solid rgb(213, 213, 213); }


.sixbox { width: 670px; height: 64px; display: flex; justify-content: space-evenly; align-items: center; border-bottom: 1px solid rgb(213, 213, 213); }


.firstbox1, .thirdtwobox2, .thirdbox, .fourbox, .fiveboxs { position: relative; background: linear-gradient(90deg, rgb(var(--c-accent)) 0%, rgb(var(--c-primary)) 100%); }


.firstbox1::before, .thirdtwobox2::before, .thirdbox::before, .fourbox::before, .fiveboxs::before { content: ""; position: absolute; top: 0px; inset-inline-start: 0px; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.8); z-index: 1; pointer-events: none; border-radius: inherit; }






.thirdtwotext { font-weight: 400; font-size: 16px; line-height: 24px; color: rgb(121, 121, 121); }










.gradient-box { width: 670px; height: 78px; border: 1px solid transparent; border-radius: 60px; background: linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255)) padding-box padding-box, linear-gradient(to right, rgb(var(--c-accent)), rgb(var(--c-primary))) border-box border-box; }








.lasttext { font-family: Montserrat; font-weight: 700; font-size: 24px; text-align: center; line-height: 78px; background: linear-gradient(to right, rgb(var(--c-accent)) 0%, rgb(var(--c-primary)) 100%) text; color: rgba(0, 0, 0, 0); }


.section16::before { content: ""; position: absolute; inset: 0px; background: rgba(255, 255, 255, 0.55); pointer-events: none; z-index: 0; }




.section16text { font-family: Montserrat; font-weight: 500; font-size: 24px; line-height: 30px; text-align: center; color: rgb(121, 121, 121); display: block; margin-bottom: 60px; }


.section16title { width: 1108px; font-family: Montserrat; font-weight: 400; font-size: 48px; line-height: 100%; text-align: center; margin: 0px auto 40px; display: block; }


.section16wrap { width: 1400px; margin: 0px auto; display: flex; gap: 34px; justify-content: center; }






.section16leftbox { width: 850px; display: flex; flex-direction: column; padding: 40px; background-color: rgb(var(--c-cool-gray-7)); border-radius: 15px; }




.section16lefttext1:last-child { margin-bottom: 0px; }






.section16rghtbox:hover img { transform: scaleX(-1); transition: transform 0.4s; }


.section16rghtbox::before { content: ""; position: absolute; inset: 0px; background: rgba(255, 255, 255, 0.45); pointer-events: none; }




.section16rghttext { font-family: Montserrat; font-weight: 700; font-size: 48px; line-height: 52px; text-align: start; text-transform: capitalize; color: rgb(255, 255, 255); white-space: nowrap; }


.section16rghttext1 { font-family: Montserrat; font-size: 16px; line-height: 20px; color: rgb(255, 255, 255); white-space: nowrap; text-align: center; }










.section17::before { content: ""; position: absolute; top: 0px; inset-inline-start: 0px; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 1; pointer-events: none; }






.section3-bg-img { position: absolute; top: 0px; inset-inline-start: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center center; z-index: 0 !important; }


.section3::before { content: ""; position: absolute; top: 0px; inset-inline-start: 0px; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 1; pointer-events: none; }


.section3 > :not(.section3-bg-img) { position: relative; z-index: 2; }


.section8 { min-height: 90vh; position: relative; display: flex; flex-direction: column; padding: 80px 0px; overflow: hidden; }


.section8-bg-img { position: absolute; top: 0px; inset-inline-start: 50%; transform: translateX(-50%); width: 1920px; height: 1080px; max-width: none; object-fit: cover; pointer-events: none; z-index: 0 !important; }


.section8::before { content: ""; position: absolute; top: 0px; inset-inline-start: 0px; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.2); z-index: 1; pointer-events: none; }


.section8 > :not(.section8-bg-img) { position: relative; z-index: 2; }


.section8text1 { overflow-wrap: break-word; font-size: 48px; text-align: center; line-height: 60px; gap: 20px; margin: 40px auto; display: block; color: rgb(255, 255, 255); width: 1310px !important; height: 120px !important; }


.section8text2 { width: 1151px; height: 48px; line-height: 24px; text-align: center; margin: 20px auto 40px; display: block; color: rgb(255, 255, 255) !important; }


.section3text2 { font-size: 20px; font-weight: 500; line-height: 24px; margin: 0px 0px 16px; display: inline-block; background: linear-gradient(90deg, rgb(var(--c-accent-tint-3)) 0%, rgb(var(--c-primary-3)) 100%) text; -webkit-text-fill-color: transparent; }


.section8text3 { font-weight: 400; font-size: 16px; line-height: 24px; color: rgb(0, 0, 0); position: relative; z-index: 1; overflow-wrap: break-word; flex: 1 1 0%; }


.section8box2 { width: 450px; min-height: 10px; height: 63px; position: relative; border-radius: 15px; padding-block: 20px 19px; padding-inline: 29px 56px; background: rgba(var(--c-cool-gray-4), 0.2); backdrop-filter: blur(10px); box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 4px 0px; overflow: hidden; transition: color 0.6s; color: rgb(51, 51, 51); }


.section8box2::after { content: ""; position: absolute; inset: 0px; border-radius: 15px; background: linear-gradient(to right, rgba(var(--c-accent), 0.5), rgba(var(--c-primary), 0.5)); opacity: 0; transition: opacity 0.6s; pointer-events: none; z-index: -1; }


.section8box2:hover { color: rgb(255, 255, 255); }




.section9text1 { overflow-wrap: break-word; font-size: 48px; text-align: center; line-height: 60px; gap: 20px; margin: 20px auto; display: block; width: 830px !important; height: 120px !important; }


.section9text3 { width: 1130px; height: 59px; margin-top: 0px; margin-inline-end: auto; margin-inline-start: auto; font-weight: 400; font-size: 30px; line-height: 30px; text-align: center; text-transform: capitalize; color: rgb(37, 37, 37); margin-bottom: 0px !important; }






.section9-pic2-bg-img { position: absolute; top: 0px; inset-inline-start: 0px; width: 100%; height: 100%; object-fit: cover; z-index: 0 !important; }




.form-container { width: 1400px; margin: 140px auto; display: flex; flex-direction: column; gap: 63px; background-color: rgb(255, 255, 255); border-radius: 20px; padding: 60px 80px; box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 3px, rgba(0, 0, 0, 0.04) 0px 4px 12px, rgba(0, 0, 0, 0.03) 0px 8px 24px; }




.form-item { flex: 1 1 0%; display: flex; flex-direction: column; gap: 8px; }


.form-label { font-family: Montserrat, sans-serif; font-weight: 400; font-size: 13px; line-height: 18px; color: rgb(102, 102, 102); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }


.form-required { color: rgb(var(--c-danger-5)); font-weight: 500; }


.form-hint { font-family: Montserrat, sans-serif; font-weight: 300; font-size: 12px; line-height: 16px; color: rgb(153, 153, 153); width: 100%; }


.form-input { width: 100%; height: 48px; padding: 0px 16px; border-radius: 8px; border: 1px solid rgb(225, 225, 225); background-color: rgb(245, 245, 245); font-family: Montserrat, sans-serif; font-size: 14px; color: rgb(51, 51, 51); outline: none; transition: 0.3s; box-sizing: border-box; position: relative; z-index: 9999; pointer-events: auto !important; }


.form-input:focus { border-color: rgb(var(--c-accent-4)); background-color: rgb(255, 255, 255); box-shadow: rgba(var(--c-accent-4), 0.1) 0px 0px 0px 3px; }




.form-submit-btn { padding: 16px 48px; border-radius: 999px; background: linear-gradient(90deg, rgb(var(--c-accent-4)), rgb(var(--c-primary-3))); border: none; color: rgb(255, 255, 255); font-size: 18px; font-family: Montserrat, sans-serif; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; transition: transform 0.3s, box-shadow 0.3s; position: relative; z-index: 9999; pointer-events: auto !important; }


.form-submit-btn:hover { transform: translateY(-2px); box-shadow: rgba(var(--c-accent-4), 0.3) 0px 8px 24px; }






.section9-grid { display: grid; gap: 12px; max-width: 890px; margin: 0px auto; grid-template-columns: repeat(3, auto); }


.section9-grid2 { display: grid; gap: 12px; max-width: 1400px; margin: 0px auto; grid-template-columns: repeat(3, auto); }




.feature-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 28px; max-width: 1400px; margin: 90px auto 50px; padding: 0px 24px; }


.feature-card { border-radius: 20px; padding: 48px 32px; text-align: center; background: rgb(255, 255, 255); border: 2px solid rgb(225, 225, 225); box-shadow: rgba(0, 0, 0, 0.04) 0px 2px 16px; }






.border-animate::before { content: ""; position: absolute; inset: 0px; background: linear-gradient(to right, rgb(var(--c-accent)), rgb(var(--c-primary))); clip-path: polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px); pointer-events: none; z-index: 1; transition: none; }


.border-animate::after { content: ""; position: absolute; inset: 2px; background: rgb(255, 255, 255); border-radius: 16px; z-index: 2; }




.border-animate:hover::before { animation: 0.9s linear 0s 1 normal forwards running borderTwoWay; }


@keyframes borderTwoWay { 
  0% { clip-path: polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px); }
  40% { clip-path: polygon(0px 0px, 100% 0px, 100% 0px, 0px 100%); }
  70% { clip-path: polygon(0px 0px, 100% 0px, 100% 100%, 0px 100%); }
  100% { clip-path: polygon(0px 0px, 100% 0px, 100% 100%, 0px 100%); }
}




.card-title { font-size: 18px; font-weight: 700; margin-top: 20px; margin-bottom: 20px; color: rgb(var(--c-navy-3)); line-height: 1.4; }


.card-desc { font-size: 24px; line-height: 1.7; color: rgb(107, 114, 128); margin: 0px; }


.project-list { font-size: 14px; line-height: 1.8; color: rgb(107, 114, 128); margin: 0px auto; padding-inline-start: 18px; text-align: start; display: inline-block; list-style-type: disc; }


.section9-card img { display: block; object-fit: cover; width: 440px !important; height: 296px !important; }


.section9-card2 img { display: block; object-fit: cover; width: 223px !important; height: 296px !important; }


.section17box { width: 300px; height: 59px; border-radius: 60px; display: flex; align-items: center; justify-content: center; margin: 0px auto 40px; background: rgba(255, 255, 255, 0); border: 2px solid transparent; position: relative; }


.section17box::before { content: ""; position: absolute; inset: 0px; border-radius: 60px; padding: 2px; background: linear-gradient(to right, rgb(var(--c-accent)), rgb(var(--c-primary))); mask: linear-gradient(rgb(255, 255, 255) 0px, rgb(255, 255, 255) 0px) content-box exclude, linear-gradient(rgb(255, 255, 255) 0px, rgb(255, 255, 255) 0px); pointer-events: none; }


.section17text { font-family: Montserrat; font-weight: 500; font-size: 30px; line-height: 36px; text-align: center; }


.section17text1 { width: 1400px; margin: 0px auto 40px; font-weight: 400; font-size: 48px; line-height: 60px; text-align: center; text-transform: capitalize; color: rgb(0, 0, 0); }


.section3text1 { overflow-wrap: break-word; font-size: 48px; text-align: center; line-height: 60px; gap: 20px; margin-inline-start: auto; margin-inline-end: auto; display: block; color: rgb(255, 255, 255); width: 1400px !important; }


.section3box2 { width: 655px; min-height: 10px; height: auto; position: relative; border-radius: 15px; padding: 30px; background: padding-box rgba(var(--c-cool-gray-4), 0.2); backdrop-filter: blur(10px); box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 4px 0px; overflow: hidden; border: 2px solid transparent; }


.section3box2::after { content: ""; position: absolute; inset: 0px; border-radius: 15px; padding: 2px; background: linear-gradient(135deg, rgb(var(--c-accent)) 0%, rgb(var(--c-primary)) 100%); mask: linear-gradient(rgb(255, 255, 255) 0px, rgb(255, 255, 255) 0px) content-box exclude, linear-gradient(rgb(255, 255, 255) 0px, rgb(255, 255, 255) 0px); pointer-events: none; opacity: 0; transition: opacity 0.6s; }




.section17text2 { font-size: 20px; line-height: 24px; color: rgb(179, 179, 179); margin-bottom: 10px; }


.section17text3 { font-weight: 400; font-size: 16px; line-height: 24px; color: rgb(179, 179, 179); margin-top: 10px; }


.section17allbox { width: 1400px; margin: 0px auto; display: flex; flex-wrap: wrap; justify-content: center; }


.section3allbox { display: flex; gap: 24px; justify-content: center; align-items: flex-start; flex-wrap: wrap; max-width: 1400px; margin: 0px auto; padding: 40px 20px; }


.section8allbox { display: grid; grid-template-columns: repeat(3, 450px); gap: 50px; margin: 0px auto; padding: 40px 20px; align-items: start; justify-content: center; }


.section3text2 { font-size: 30px; font-weight: 700; line-height: 36px; margin: 0px 0px 16px; display: inline-block; background: linear-gradient(90deg, rgb(var(--c-accent-tint-3)) 0%, rgb(var(--c-primary-3)) 100%) text; -webkit-text-fill-color: transparent; min-height: 70px; }


.section3text3 { font-weight: 400; font-size: 16px; line-height: 24px; color: rgb(179, 179, 179); margin-top: 10px; position: relative; z-index: 1; overflow-wrap: break-word; flex: 1 1 0%; }


.divider3 { height: 2px; margin: 0px 0px 16px; border-radius: 1px; background: linear-gradient(90deg, rgb(var(--c-accent-tint-6)) 0%, rgb(var(--c-primary-3)) 100%); }


.section17-left { flex: 1 1 0%; }




.section17-right { flex: 1 1 0%; grid-template-rows: 1fr 3fr; gap: 20px; }




.section17-right-top img { width: 45px; height: 45px; flex-shrink: 0; margin-block: 0px; margin-inline: 30px 0px; }


.section17-right-top span { font-family: Montserrat, sans-serif; font-weight: 500; font-size: 20px; line-height: 24px; color: rgb(121, 121, 121); }


.slider-container { max-width: 1200px; margin: 40px 0px 0px; display: flex; gap: 20px; position: relative; }


.slider-container .vertical-line { width: 2px; background: rgb(213, 213, 213); align-self: stretch; position: relative; flex-shrink: 0; border-radius: 1px; }


.slider-container .active-indicator { position: absolute; inset-inline-start: 0px; inset-inline-end: 0px; height: 33.33%; border-radius: 12px; transition: top 0.5s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; z-index: 0; }


.slider-container .active-indicator::before { content: ""; position: absolute; inset-inline-start: 0px; top: 0%; bottom: 10%; width: 3px; background: linear-gradient(rgb(var(--c-accent-4)), rgb(var(--c-primary-3))); border-radius: 2px; height: 100%; }


.slider-container .content-block { padding: 12px 16px; display: flex; gap: 25px; align-items: flex-start; position: relative; background: transparent; border-radius: 0px; box-shadow: none; }




.slider-container .content-block.active { background: transparent; border-radius: 0px; box-shadow: none; }


.slider-container .content-block.active::before { content: ""; position: absolute; inset: 0px; background: linear-gradient(135deg, rgba(var(--c-accent-4), 0.06) 0%, rgba(var(--c-primary-3), 0.06) 100%); border-radius: 20px; pointer-events: none; z-index: 0; }


.slider-container .vertical-line { width: 2px; background: rgb(213, 213, 213); align-self: stretch; flex-shrink: 0; border-radius: 1px; margin-top: 15px; }


.slider-container .right-content { flex: 1 1 0%; display: flex; flex-direction: column; gap: 28px; }


.slider-container .content-block { padding: 12px 16px; transition: 0.5s cubic-bezier(0.4, 0, 0.2, 1); display: flex; gap: 25px; align-items: flex-start; position: relative; background: transparent; border-radius: 0px; box-shadow: none; }




.slider-container .content-block.active::before { content: ""; position: absolute; inset: 0px; background: linear-gradient(135deg, rgba(var(--c-accent-4), 0.06) 0%, rgba(var(--c-primary-3), 0.06) 100%); pointer-events: none; z-index: 0; }




.slider-container .icon-gray { width: 47px; height: 47px; display: block; margin: 0px auto; opacity: 1; transition: none; }


.slider-container .icon-color { width: 47px; height: 47px; display: block; margin: 0px auto; position: absolute; top: 0px; inset-inline-start: 50%; transform: translateX(-50%); opacity: 0; transition: none; }












.slider-container .icon-bottom-color { width: 24px; height: 24px; margin-inline-start: 4px; margin-bottom: 8px; display: block; position: absolute; bottom: 0px; inset-inline-start: 4px; opacity: 0; transition: none; }










.slider-container .block-text { flex: 1 1 0%; display: flex; flex-direction: column; min-width: 0px; position: relative; z-index: 1; }


.slider-container .section17text2 { font-weight: 700; font-size: 20px; line-height: 24px; color: rgb(136, 136, 136); margin-bottom: 10px; display: block; opacity: 1; transform: translateX(0px); }


.slider-container .content-block.inactive .section17text2 { color: rgb(136, 136, 136); font-weight: 700; }


.slider-container .content-block.active .section17text2 { background: linear-gradient(90deg, rgb(var(--c-accent-7)) 0%, rgb(var(--c-primary-6)) 100%) text; color: transparent; font-weight: 800; transition: none; }


.slider-container .divider { height: 1px; background-color: rgb(var(--c-cool-gray-3)); margin: 0px; opacity: 1; width: 100%; }




.slider-container .content-block.active .divider { background: linear-gradient(90deg, rgb(var(--c-accent-4)), rgb(var(--c-primary-3))); transition: none; }


.slider-container .section17text3 { font-weight: 400; font-size: 16px; line-height: 24px; color: rgb(153, 153, 153); margin-top: 10px; display: block; opacity: 1; transform: translateY(0px); }


.slider-container .content-block.inactive .section17text3 { color: rgb(153, 153, 153); font-weight: 400; }


.slider-container .content-block.active .section17text3 { background: linear-gradient(90deg, rgb(var(--c-accent-7)) 0%, rgb(var(--c-primary-6)) 100%) text; color: transparent; font-weight: 600; transition: none; }


.section18 { padding: 80px 0px; background-color: rgb(255, 255, 255); }


.section18box { width: 378px; height: 59px; border-radius: 60px; display: flex; align-items: center; justify-content: center; margin: 0px auto 40px; background: rgba(255, 255, 255, 0); border: 2px solid transparent; position: relative; }


.section18box::before { content: ""; position: absolute; inset: 0px; border-radius: 60px; padding: 2px; background: linear-gradient(to right, rgb(var(--c-accent)), rgb(var(--c-primary))); mask: linear-gradient(rgb(255, 255, 255) 0px, rgb(255, 255, 255) 0px) content-box exclude, linear-gradient(rgb(255, 255, 255) 0px, rgb(255, 255, 255) 0px); pointer-events: none; }


.section18text { font-weight: 500; font-size: 30px; line-height: 36px; text-align: center; }


.section18text1 { width: 1092px; font-weight: 400; font-size: 48px; line-height: 60px; text-align: center; text-transform: capitalize; margin: 0px auto 40px; }




.sectiob18title { width: 511px; font-weight: 700; font-size: 30px; line-height: 36px; vertical-align: middle; margin-bottom: 40px; }


.sectiob18desc { font-weight: 400; font-size: 16px; line-height: 24px; vertical-align: middle; color: rgb(121, 121, 121); margin-bottom: 20px; }






.section18dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgb(153, 153, 153); background: transparent; cursor: pointer; transition: 0.3s; display: block; }


.section18dot.actives { background: rgb(51, 51, 51); border-color: rgb(51, 51, 51); }


.section18dot:hover { border-color: rgb(102, 102, 102); }












.section18allbox { width: 1600px; margin: 0px auto; display: flex; justify-content: center; align-items: center; gap: 40px; padding: 40px 0px; background-color: rgb(249, 249, 249); border-radius: 15px; }


.section18dot { cursor: pointer; transition: 0.3s; }


.section18dot:hover { border-color: rgb(102, 102, 102); transform: scale(1.2); }


.arrow-btn { width: 50px; height: 50px; border-radius: 50%; border: 2px solid rgb(51, 51, 51); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.3s; color: rgb(51, 51, 51); }


.arrow-btn:hover { background: rgb(51, 51, 51); color: rgb(255, 255, 255); }


.arrow-prev { margin-inline-end: 10px; border: 2px solid rgb(201, 201, 201); }


.profit-cards-container { max-width: 1400px; margin: 0px auto; padding: 0px 20px; display: flex; flex-direction: column; gap: 30px; }


.profit-card { height: 247px; position: relative; border-radius: 20px; padding: 38px 48px; display: flex; align-items: center; gap: 40px; overflow: hidden; background: linear-gradient(135deg, rgb(var(--c-success-tint)) 0%, rgb(var(--c-primary-tint-2)) 100%); }


.profit-card::after { content: ""; position: absolute; inset: 0px; border-radius: 20px; border: 2px solid transparent; background: linear-gradient(135deg, rgb(var(--c-success-tint)), rgb(var(--c-primary-tint-2))) padding-box padding-box, linear-gradient(135deg, rgb(var(--c-accent)) 0%, rgb(var(--c-primary)) 100%) border-box border-box; pointer-events: none; z-index: 1; }




.profit-card2 { height: 247px; position: relative; border-radius: 20px; padding: 40px 50px; display: flex; align-items: center; gap: 40px; overflow: hidden; background: rgb(255, 255, 255); }


.profit-card2::after { content: ""; position: absolute; inset: 0px; border-radius: 20px; padding: 2px; background: linear-gradient(135deg, rgb(var(--c-accent)) 0%, rgb(var(--c-primary)) 100%); mask: linear-gradient(rgb(255, 255, 255) 0px, rgb(255, 255, 255) 0px) content-box exclude, linear-gradient(rgb(255, 255, 255) 0px, rgb(255, 255, 255) 0px); pointer-events: none; z-index: 0; }


.profit-card2::before { content: ""; position: absolute; inset: 2px; border-radius: 18px; background: rgb(255, 255, 255); z-index: 1; }




.card-number { position: absolute; top: 0px; inset-inline-start: 0px; width: 50px; height: 50px; background: linear-gradient(135deg, rgb(var(--c-accent)) 0%, rgb(var(--c-primary)) 100%); border-radius: 20px 0px; display: flex; align-items: center; justify-content: center; font-family: Montserrat; font-weight: 700; font-size: 20px; color: rgb(255, 255, 255); }


.card-number.right { inset-inline-start: auto; inset-inline-end: -2px; border-radius: 0px 20px; }


.card-content { flex: 1 1 0%; padding-inline-start: 60px; }










.card-desc { font-family: Montserrat; font-weight: 400; font-size: 16px; line-height: 24px; color: rgb(121, 121, 121); max-width: 899px; }
















.stat-label { font-family: Montserrat; font-weight: 400; font-size: 12px; line-height: 16px; color: rgb(121, 121, 121); text-align: center; width: 117px; }


.card-desc2 { font-family: Montserrat; font-weight: 400; font-size: 16px; line-height: 24px; color: rgb(121, 121, 121); max-width: 769px; }


.card-desc3 { font-family: Montserrat; font-weight: 400; font-size: 16px; line-height: 24px; color: rgb(121, 121, 121); max-width: 841px; }












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


  
.card-content { padding-inline-start: 0px; padding-top: 40px; }


  


  
}




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


  


  

  

  

  
.flexbox { width: 100%; flex-direction: column; align-items: center; padding: 0px 20px; }


  
.flexbox img { max-width: 100%; height: auto; margin-bottom: 40px !important; }


  
.secondbox { flex-wrap: wrap; gap: 20px; padding: 0px 20px; }


  


  


  
.allbox6 { flex-direction: column; align-items: center; padding: 0px 20px; }


  


  
.lastleimage { margin-inline-start: 0px; display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; padding: 0px 20px; }


  
.lastimage { width: 45%; height: auto; margin-inline-start: 0px; }


  


  
}


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


  
.section1 { padding: 0px 20px; }


  

  
.text { margin-bottom: 0px; padding-top: 120px !important; font-size: 32px !important; }


  
.text1 { font-size: 12px; white-space: normal; padding: 0px 10px; }


  

  


  


  


  

  
.secondbox { flex-direction: column; align-items: center; gap: 30px; margin-bottom: 50px; padding: 0px 15px; }


  


  


  


  


  


  
.firstbox1, .twobox, .thirdbox, .fourbox, .fivebox, .sixbox { width: 100%; height: auto; min-height: 70px; border-radius: 0px; padding: 10px 0px; }


  


  
.section-container { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 0px 15px; }


  
.thirdtwotext { font-size: 14px; white-space: normal; padding: 0px 5px; }


  


  
.lastleimage { margin-inline-start: 0px; margin-bottom: 50px; flex-direction: column; align-items: center; padding: 0px 15px; }


  


  
.lastimage { width: 100%; margin-inline-start: 0px; border-radius: 10px; }


  


  
.gradient-box { margin: 0px auto; width: 96% !important; }


  }




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


  


  


  
.firstbox, .firstbox10 { width: 100%; height: auto; margin-inline-start: 0px; }


  


  


  


  


  


  


  


  


  


  


  


  


  


  
.section18rightbox { padding-top: 0px; display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }


  


  


  
.profit-cards-container { padding: 0px 24px; }


  


  
.card-content { padding-inline-start: 0px; padding-top: 30px; }


  


  


  


  


  


  


  


  
.tab-content { margin-top: 30px; margin-bottom: 40px; padding: 0px 20px; }


  
.feature-cards { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); padding: 0px 20px; gap: 20px; }


  
.section9-grid { gap: 12px; padding: 0px 20px; }


  


  


  


  
.section17allbox { width: 100%; padding: 0px 20px; gap: 30px; }


  


  


  


  


  
.section17-right-top img { margin-inline-start: 0px; }


  


  


  


  
.section3text1 { padding: 0px 20px; width: 100% !important; }


  
.section4Text1 { width: 100%; padding: 0px 20px; height: auto; }


  
.section4Text2 { width: 100%; padding: 0px 20px; height: auto; }


  


  


  


  


  


  


  


  
.section18text1 { width: 100%; padding: 0px 20px; }


  
.section8text1 { padding: 0px 20px; width: 100% !important; height: auto !important; }


  
.section8text2 { width: 100%; padding: 0px 20px; }


  


  
.section9text1 { padding: 0px 20px; width: 100% !important; height: auto !important; }


  
.section9text3 { width: 100%; padding: 0px 20px; height: auto; }


  
.feature-cards { padding: 0px 20px; max-width: 100%; }


  
.section9-grid { padding: 0px 20px; }


  


  


  


  


  
.section10Text1 { padding: 0px 20px; width: 100% !important; height: auto !important; }


  
.section10Text2 { width: 100%; padding: 0px 20px; }


  
.firstbox10 { width: 100%; padding: 0px 20px; height: auto; }


  
.profit-cards-container { padding: 0px 20px; }


  


  


  


  


  
.section16wrap { width: 100%; padding: 0px 20px; gap: 20px; }


  


  


  
.allbox { padding: 0px 20px; flex-wrap: wrap; }


  
.lastbox { width: 100%; padding: 0px 20px; height: auto; }


  
.firstbox { width: 100%; margin-inline-start: 0px; height: auto; padding: 0px 20px; }


  
.rightbox img { width: 100%; margin-inline-end: 0px; max-width: 100%; }


  
.section17, .section3 { background-size: cover; background-position: center center; }


  
}


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

  


  

  


  


  


  


  


  


  


  


  


  


  
.slider-container .icon-bottom-gray, .slider-container .icon-bottom-color { width: 20px; height: 20px; position: static; margin-inline-start: 0px; }


  


  


  
.sectiob18desc { font-size: 14px; padding: 0px 12px; }


  


  


  


  


  
.stat-label { font-size: 11px; width: auto; padding: 0px 8px; }


  


  
.flow-text, .flow-text2, .flow-text3 { margin-inline-start: 0px; margin-top: 4px; }


  


  


  


  


  


  
.section9text3 { font-size: 22px; width: 100%; padding: 0px 12px; line-height: 1.4; margin-bottom: 20px; }


  


  


  


  


  


  


  
.firstbox10 { width: 100%; height: auto; padding: 0px 16px; }


  


  


  


  


  
.leftbox { width: 100%; overflow-x: auto; padding: 0px 20px; }


  


  
.thirdtext, .thirdtwotext { width: 100%; text-align: center; margin: 4px 0px; }


  


  
.gradient-box { margin: 8px 0px; width: 100% !important; }


  


  


  
.mobile-cards { display: flex; flex-direction: column; gap: 16px; padding: 0px 16px; max-width: 100%; margin: 0px auto; }


  
.mobile-card-item { background: rgb(255, 255, 255); border-radius: 16px; padding: 24px 20px; box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 12px; cursor: pointer; }


  


  


  


  


  


  


  
.mobile-card-item.inactive .mobile-card-title { font-family: Montserrat, sans-serif; font-weight: 700; font-size: 18px; line-height: 26px; color: rgb(136, 136, 136); }


  
.mobile-card-item.active .mobile-card-title { font-family: Montserrat, sans-serif; font-weight: 700; font-size: 18px; line-height: 26px; background: linear-gradient(90deg, rgb(var(--c-accent-4)) 0%, rgb(var(--c-primary-3)) 100%) text; -webkit-text-fill-color: transparent; color: transparent; }


  
.mobile-card-item.inactive .mobile-card-divider { height: 2px; background: rgb(var(--c-cool-gray-3)); border-radius: 1px; margin-bottom: 12px; }


  
.mobile-card-item.active .mobile-card-divider { height: 2px; background: linear-gradient(90deg, rgb(var(--c-accent-4)) 0%, rgb(var(--c-primary-3)) 100%); border-radius: 1px; margin-bottom: 12px; }


  
.mobile-card-item.inactive .mobile-card-desc { font-family: Montserrat, sans-serif; font-weight: 400; font-size: 14px; line-height: 1.7; color: rgb(153, 153, 153); }


  
.mobile-card-item.active .mobile-card-desc { font-family: Montserrat, sans-serif; font-weight: 400; font-size: 14px; line-height: 1.7; background: linear-gradient(90deg, rgb(var(--c-accent-4)) 0%, rgb(var(--c-primary-3)) 100%) text; -webkit-text-fill-color: transparent; color: transparent; }


  
.section3 { padding: 40px 0px; }


  


  


  


  


  


  


  
.section4Text2 { width: 100%; padding: 0px 15px; height: auto; }


  
.section-container { flex-direction: column; align-items: center; gap: 20px; padding: 0px 15px; }


  


  


  


  
.section18 { padding: 40px 0px; }


  
.section18allbox { width: calc(100% - 30px) !important; padding: 0px !important; background: transparent !important; flex-direction: column !important; gap: 0px !important; }


  
.section18leftbox { position: relative; width: 100% !important; height: auto !important; flex-direction: column !important; gap: 0px !important; }


  
.sectiob18imgbox { order: 1; position: relative; width: 100% !important; }


  
.sectiob18imgbox img { object-fit: cover; border-radius: 16px; display: block; width: 100% !important; height: 420px !important; }


  
.sectiob18imgbox::after { content: ""; position: absolute; bottom: 0px; inset-inline-start: 0px; inset-inline-end: 0px; height: 70%; background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.4) 50%, transparent 100%); border-radius: 0px 0px 16px 16px; pointer-events: none; z-index: 2; }


  
.sectiob18lebox { position: absolute; bottom: 0px; inset-inline-start: 0px; inset-inline-end: 0px; z-index: 3; padding: 0px 20px 20px; box-sizing: border-box; display: flex; flex-direction: column; width: 100% !important; align-items: flex-start !important; text-align: start !important; }


  
.sectiob18img { background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(10px); border-radius: 50%; padding: 8px; box-sizing: border-box; width: 50px !important; height: 50px !important; margin-bottom: 12px !important; }


  
.sectiob18img img { object-fit: contain; width: 100% !important; height: 100% !important; }


  
.sectiob18title { width: 100% !important; font-size: 16px !important; line-height: 28px !important; margin-bottom: 10px !important; text-align: start !important; background: linear-gradient(90deg, rgb(var(--c-accent-4)) 0%, rgb(var(--c-primary-3)) 100%) text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; }


  
.sectiob18desc { padding: 0px; width: 100% !important; font-size: 12px !important; line-height: 20px !important; color: rgba(255, 255, 255, 0.85) !important; margin-bottom: 0px !important; text-align: start !important; }


  
.section18dots { position: absolute; bottom: 5px; inset-inline-start: 0px; inset-inline-end: 0px; z-index: 4; justify-content: center !important; margin-top: 0px !important; }


  
.section18dot { width: 10px !important; height: 10px !important; border-color: rgb(204, 204, 204) !important; }


  
.section18dot.actives { background: linear-gradient(90deg, rgb(var(--c-accent-4)) 0%, rgb(var(--c-primary-3)) 100%) !important; border-color: transparent !important; }


  


  


  


  
.section8 { min-height: 500px; padding: 40px 0px; height: auto !important; }


  


  


  


  
.section8text2 { width: 100%; margin-bottom: 20px; height: 100%; line-height: 18px; font-size: 12px !important; }


  
.section8text212 { width: 100%; margin-bottom: 20px; height: 137px; line-height: 18px; font-size: 12px !important; }


  


  


  


  
.tab-content { margin-bottom: 30px; padding: 0px 15px; width: 100%; margin-top: 20px !important; }


  


  


  


  
.section9text3 { font-size: 20px; line-height: 24px; width: 100%; padding: 0px 15px; height: auto; }


  
.feature-cards { grid-template-columns: 1fr; gap: 20px; margin: 40px auto 30px; padding: 0px 15px; }


  


  


  


  
.section9-grid { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 12px; padding: 0px 15px 10px; scroll-snap-type: x mandatory; }


  


  


  
.section9-card img, .section9-card2 img { max-height: 240px; object-fit: contain; width: 100% !important; height: auto !important; }


  


  
.section9-pic2 { margin-top: 0px; height: auto; min-height: 600px; background-size: cover; }


  


  


  


  


  
.section10 { padding: 0px; }


  
.section10Text1 { font-size: 28px; line-height: 36px; margin-bottom: 20px; height: auto !important; }


  


  
.firstbox10 { width: 100%; height: auto; padding: 0px 15px; margin-top: 20px; }


  


  


  


  


  


  
.divider10 { margin: 20px 0px; }


  


  
.profit-cards-container { padding: 0px 15px; gap: 20px; }


  


  
.card-number { width: 40px; height: 40px; font-size: 16px; border-radius: 15px 0px; }


  
.card-number.right { border-radius: 0px 15px; inset-inline-end: 0px; }


  
.card-content { padding-inline-start: 0px; padding-top: 30px; width: 100%; }


  


  


  


  


  


  
.stats-row { flex-direction: column-reverse; gap: 15px; margin-bottom: 10px; top: 0px; }


  
.stats-row-left { gap: 15px; margin-bottom: 10px; top: 0px; flex-wrap: nowrap; flex-direction: row !important; }


  


  


  


  


  


  


  
.flow-text { margin-inline-start: 0px; }


  
.flow-text2, .flow-text3 { margin-inline-start: 0px; margin-top: 5px; }


  
.border-animate.border-active::before { animation: 0.9s linear 0s 1 normal forwards running borderTwoWay; }


  


  
.section16 { padding: 50px 0px; }


  
.section16title { font-size: 28px; width: 100%; padding: 0px 15px; line-height: 36px; }


  
.section16text { font-size: 18px; margin-bottom: 30px; padding: 0px 15px; }


  


  


  


  


  


  


  


  


  


  


  


  
.allbox { flex-direction: column; align-items: center; gap: 20px; padding: 0px 15px; }


  


  


  
.gradient-box { height: auto; min-height: 60px; margin: 0px auto; padding: 12px 15px; width: 100% !important; }


  


  


  
.firstbox { width: 100%; margin-inline-start: 0px; height: auto; padding: 0px 15px; }


  

  
.rightbox img { width: 100%; margin-inline-end: 0px; max-width: 100%; }


  
.section17, .section3 { background-size: cover; background-position: center center; }


  
}




* { margin: 0px; padding: 0px; box-sizing: border-box; }


@keyframes float { 
  0% { transform: translateY(-100px); }
  100% { transform: translateY(120px); }
}


.animate-float { animation: 3s ease-out 0s 1 normal forwards running float; }


.imageBg { position: absolute; inset-inline-start: 0px; top: -148.8%; width: 100%; height: 260%; object-fit: fill; object-position: 0% 93%; z-index: 1; animation: 20s ease-in-out 0s infinite alternate none running imageBgZoom; }
















.secondtext { width: 79%; text-align: center; margin: 0px auto; }


.image-wrapper { position: relative; width: 440px; height: 275px; border-radius: 15px; overflow: hidden; transition: transform 0.3s; }












.fivebox { width: 670px; height: 64px; display: flex; justify-content: space-evenly; align-items: center; border-bottom: 1px solid rgb(213, 213, 213); }


.sixbox { width: 670px; height: 88px; display: flex; justify-content: space-evenly; align-items: center; border-bottom: 1px solid rgb(213, 213, 213); }


.firstbox1, .thirdtwobox2, .thirdbox, .fourbox, .sixbox { position: relative; background: linear-gradient(90deg, rgb(var(--c-accent)) 0%, rgb(var(--c-primary)) 100%); }


.firstbox1::before, .thirdtwobox2::before, .thirdbox::before, .fourbox::before, .sixbox::before { content: ""; position: absolute; top: 0px; inset-inline-start: 0px; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.8); z-index: 1; pointer-events: none; border-radius: inherit; }




.thirdtext { font-family: Montserrat-Medium; font-weight: 500; font-size: 14px; text-align: center; margin-bottom: 10px; margin-top: 20px; color: rgb(37, 37, 37); }


.thirdtwotext { font-weight: 700; font-size: 16px; text-align: center; color: rgb(121, 121, 121); }










.lastleimg { margin-inline-start: auto; margin-inline-end: auto; margin-bottom: 100px; width: 1400px !important; }


.section13 { padding: 100px 0px; background-color: rgb(249, 249, 249); background-size: cover; background-position: center center; background-repeat: no-repeat; }




.section13text { width: 1200px; text-align: center; margin: 40px auto 60px; display: block; }


.section13box { width: 455px; height: 58px; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 80px; margin: 40px auto 20px; display: flex; justify-content: center; align-items: center; }


.section13text1 { font-family: Montserrat; font-weight: 700; font-size: 20px; line-height: 24px; text-align: center; vertical-align: middle; }


.section13box1 { width: 1400px; height: 250px; padding-top: 40px; margin: 0px auto; display: flex; justify-content: space-evenly; align-items: center; gap: 120px; }






.section13text2 { font-family: Montserrat; font-weight: 700; font-size: 72px; line-height: 24px; height: 60px; padding-top: 15px; }


.section13text3 { font-family: Montserrat; font-weight: 500; font-size: 24px; line-height: 30px; color: rgb(37, 37, 37); }




.section14 { padding: 100px 0px; background-color: rgb(255, 255, 255); }












.section14leftbox1 { width: 1px; height: 2438px; border: 1px solid rgb(217, 217, 217); }




.section14rightbox1 { width: 1200px; background-color: rgb(249, 249, 249); border-radius: 15px; padding: 0px 64px 40px; margin-bottom: 40px; }


.section14text { font-family: Montserrat; font-weight: 700; font-size: 16px; line-height: 24px; vertical-align: middle; display: inline; }




.colorGreen { color: rgb(var(--c-accent-10)); display: inline !important; }


.section14rightbox3 { width: 1200px; background-color: rgb(249, 249, 249); border-radius: 15px; padding: 40px 64px; margin-bottom: 40px; display: flex; justify-content: center; align-items: center; gap: 20px; }








.section14rightthiirdbox { width: 1200px; height: 327px; background-image: url("undefined?x-oss-process=image/resize,m_fixed,w_1920"); background-size: cover; background-position: center center; background-repeat: no-repeat; border-radius: 15px; padding: 40px 64px; margin-bottom: 40px; display: flex; justify-content: center; align-items: center; }




.section14rightthiirdbox1 { width: 365px; height: 45px; border-radius: 15px 15px 0px 0px; display: flex; justify-content: center; align-items: center; background: rgba(255, 255, 255, 0.15); border: none; color: rgb(37, 37, 37); font-weight: 700; backdrop-filter: blur(10px); margin-top: 2px; }


.section14rightthiirdbox3 { width: 100%; height: 152px; border: none; border-radius: 0px 15px 15px; background: rgba(255, 255, 255, 0.1); padding: 20px 32px; display: flex; flex-direction: column; gap: 12px; backdrop-filter: blur(12px); }






.section14rightfourbox { width: 1200px; background-color: rgb(249, 249, 249); border-radius: 15px; }


.section14rightfourbox1 { width: 1200px; padding: 40px 64px; margin-bottom: 40px; display: flex; justify-content: center; align-items: center; gap: 40px; }




.section14rtext { font-family: Montserrat; font-weight: 700; font-size: 16px; line-height: 24px; vertical-align: middle; }


.section14rightfivebox { width: 1200px; background-color: rgb(249, 249, 249); border-radius: 15px; padding: 40px 64px; }


.section14rightfivebox1 { width: 365px; height: 195px; border-radius: 15px; background-image: url("undefined?x-oss-process=image/resize,m_fixed,w_1920"); background-size: cover; background-position: center center; display: flex; justify-content: center; align-items: center; }


.section14rightfivebox1 span, .section14rightfivebox2 span { font-family: Montserrat; font-weight: 700; font-size: 50px; line-height: 24px; vertical-align: middle; color: rgba(255, 255, 255, 0.2); }


.section14rightfivebox2 { width: 365px; height: 195px; border-radius: 15px; background-image: url("undefined?x-oss-process=image/resize,m_fixed,w_1920"); background-size: cover; background-position: center center; display: flex; justify-content: center; align-items: center; }


.section14rightfivebox3 { width: 954px; display: flex; justify-content: center; align-items: center; gap: 40px; margin: 0px auto 40px; }


.section14rftext { font-family: Montserrat; font-weight: 700; font-size: 16px; line-height: 24px; vertical-align: middle; margin-bottom: 40px; }


.section14allbox { width: 1400px; margin: 0px auto; display: flex; justify-content: center; align-items: center; gap: 40px; }




@keyframes haloPulse { 
  0% { box-shadow: rgba(var(--c-accent), 0.4) 0px 0px 0px 0px, rgba(var(--c-primary), 0.3) 0px 0px 0px 0px; }
  50% { box-shadow: rgba(var(--c-accent), 0) 0px 0px 0px 15px, rgba(var(--c-primary), 0) 0px 0px 0px 30px; }
  100% { box-shadow: rgba(var(--c-accent), 0) 0px 0px 0px 0px, rgba(var(--c-primary), 0) 0px 0px 0px 0px; }
}


.section14img, .section14img1, .section14img2, .section14img3, .section14img4 { animation: 2s ease-out 0s infinite normal none running haloPulse; }










.section15 { padding: 100px 0px; background-color: rgb(255, 255, 255); }


.section15box4 { width: 1400px; display: flex; flex-wrap: wrap; gap: 40px; margin: 0px auto; }


@keyframes shakeHorizontal { 
  0% { transform: translateX(0px); }
  10% { transform: translateX(-8px); }
  20% { transform: translateX(8px); }
  30% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  50% { transform: translateX(-4px); }
  60% { transform: translateX(4px); }
  70% { transform: translateX(-2px); }
  80% { transform: translateX(2px); }
  90% { transform: translateX(-1px); }
  100% { transform: translateX(0px); }
}




.section15box { width: 677px; height: 847px; border-radius: 15px; background-image: url("undefined?x-oss-process=image/resize,m_fixed,w_1920"); background-size: cover; display: flex; justify-content: center; align-items: center; padding-top: 100px; }


.section15box1 { width: 676px; height: 910px; border-radius: 15px; background-image: url("undefined?x-oss-process=image/resize,m_fixed,w_1920"); background-size: cover; background-position: center center; background-repeat: no-repeat; display: flex; justify-content: center; align-items: center; padding-top: 140px; }


.section15box2 { width: 677px; height: 847px; border-radius: 15px; background-image: url("undefined?x-oss-process=image/resize,m_fixed,w_1920"); background-size: 100% 100%; margin-top: -60px; display: flex; justify-content: center; align-items: center; }


.section15box3 { width: 676px; height: 910px; border-radius: 15px; background-image: url("undefined?x-oss-process=image/resize,m_fixed,w_1920"); background-size: 100% 100%; background-position: center center; background-repeat: no-repeat; display: flex; justify-content: center; align-items: center; }


.card-title { position: absolute; top: 50%; inset-inline-start: 50%; transform: translate(-50%, -50%); font-family: Montserrat; font-weight: 700; font-size: 30px; line-height: 45px; text-align: center; color: rgb(255, 255, 255); z-index: 2; transition: opacity 0.4s, transform 0.4s; text-shadow: rgba(0, 0, 0, 0.5) 0px 2px 10px; pointer-events: none; width: 80%; }


.section15box5, .section15box6 { opacity: 0; transform: scale(0.9); transition: 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); pointer-events: none; }


.card-hover:hover { animation: 0.6s ease-in-out 0s 1 normal none running shakeHorizontal; }


.card-hover:hover { background-size: 110% 110%; transition: background-size 0.6s; }






.section15box5 { width: 537px; height: 686px; border-radius: 15px; padding: 30px; border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(16px); display: flex; flex-direction: column; }


.section15box6 { width: 538px; height: 685px; border-radius: 15px; padding: 30px; border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(16px); display: flex; flex-direction: column; }






.section15box5desc { font-family: Montserrat; font-weight: 400; font-size: 16px; line-height: 24px; margin-bottom: 20px; color: rgb(255, 255, 255); }


.section15box5ul { list-style: none; padding: 0px; margin: 0px; }




.section15box5ul li::before { content: ""; position: absolute; inset-inline-start: 0px; top: 10px; width: 6px; height: 6px; border-radius: 50%; background: rgb(255, 255, 255); }


.section15text { width: 866px; font-family: Montserrat; font-weight: 400; font-size: 48px; line-height: 60px; text-align: center; text-transform: capitalize; color: rgb(37, 37, 37); padding-inline-end: 110px; margin: 0px auto 40px; }




@media screen and (max-width: 1024px) {
  
.section15box4 { width: 100%; padding: 0px 20px; justify-content: center; }


  
.section15box, .section15box1, .section15box2, .section15box3 { width: 45%; height: 500px; margin-top: 0px; }


  


  
.section15text { width: 90%; font-size: 36px; padding-inline-end: 0px; }


  


  


  


  

  

  
.flexbox { width: 100%; flex-direction: column; align-items: center; padding: 0px 20px; }


  
.firstbox { width: 100%; height: 450px; margin-inline-start: 0px; margin-bottom: 40px; }


  
.flexbox img { max-width: 100%; height: auto; margin-bottom: 40px !important; }


  
.secondbox { flex-wrap: wrap; gap: 20px; padding: 0px 20px; justify-content: center; }


  


  


  
.lastbox { width: 90%; margin-inline-start: auto; margin-inline-end: auto; padding: 0px 20px; }


  
.allbox { flex-direction: column; align-items: center; padding: 0px 20px; }


  


  


  
.lastleimg { margin-inline-start: 0px; margin-inline-end: 0px; display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; padding: 0px 20px; width: 100% !important; }


  
.lastimg { width: 45%; margin-inline-start: 0px; height: auto; }


  


  


  


  


  


  
.section13 .flex > div { border-bottom: 1px solid rgba(198, 198, 198, 0.28); flex: 0 0 100% !important; height: auto !important; border-inline-start: none !important; padding: 20px 0px !important; }


  


  


  


  


  


  


  


  


  


  


  


  
.width20.float.absolute { margin-top: 20px; width: 100% !important; position: static !important; }


  


  
.width70.float.overflow li { margin-bottom: 10px; flex: 0 0 48% !important; }


  


  


  


  


  
.width50.float.detext, .width50.float { margin: 20px auto; width: 100% !important; }


  


  


  


  


  
}


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


  


  

  
.text { padding-top: 120px; margin-bottom: 0px; font-size: 28px !important; }


  
.text1 { font-size: 12px; white-space: normal; padding: 0px 10px; }


  

  


  


  


  


  


  

  
.secondbox { flex-direction: column; align-items: center; gap: 30px; margin-bottom: 50px; padding: 0px 15px; }


  


  


  


  


  
.allbox { flex-direction: column; gap: 20px; padding: 0px 15px; }


  


  
.firstbox1, .twobox, .thirdbox, .fourbox, .fivebox, .sixbox { width: 100%; height: auto; min-height: 70px; border-radius: 0px; padding: 10px 0px; }


  
.firstbox1 { border-radius: 15px 15px 0px 0px; }


  
.sixbox { border-radius: 0px 0px 15px 15px; }


  


  
.thirdtwotext { font-size: 14px; white-space: normal; padding: 0px 5px; }


  


  


  


  
.lastleimg { margin-inline-start: 0px; margin-bottom: 50px; flex-flow: column wrap; align-items: center; padding: 0px 15px; display: flex; width: 100% !important; }


  
.lastleimg img { max-width: 100%; margin-bottom: 15px; width: 100% !important; }


  
.lastimg { width: 100%; margin-inline-start: 0px; border-radius: 10px; }


  


  
.section13 .flex > div { padding: 0px !important; }


  


  


  


  


  


  


  


  


  


  


  


  


  
.width90.margin.flex { flex-direction: column; padding: 10px !important; }


  


  


  


  


  


  
}








.section5-left img { width: 100%; height: 100%; object-fit: cover; object-position: center center; border-radius: 250px 0px 0px; display: block; }


.imageBg { position: absolute; inset-inline-start: 0px; top: -80%; width: 100%; height: 260%; object-fit: fill; object-position: 100% 51%; z-index: 1; animation: 20s ease-in-out 0s infinite alternate none running imageBgZoom; }


@keyframes imageBgZoom { 
  0% { transform: scale(1); }
  100% { transform: scale(1.55); }
}


.section1 { width: 100%; height: auto; padding: 40px 0px; background-color: rgb(255, 255, 255); }


.newsection77text { font-weight: 500; font-size: 20px; text-align: center; text-transform: capitalize; color: rgb(255, 255, 255); margin-bottom: 0px !important; }




.firstbox { width: 1400px; height: auto; display: flex; justify-content: center; align-items: center; margin: 0px auto; gap: 20px; }








.firsttext { flex: 1 1 0%; order: 1; }


.firstbox > div:last-child { flex: 1 1 0%; order: 2; }


.image-wrapper { position: relative; width: 320px; height: 215px; border-radius: 15px; overflow: hidden; transition: transform 0.3s; }


.secondbox { width: 1400px; display: flex; justify-content: center; margin: 0px auto; gap: 40px; }




.thirdfirstbox { display: flex; margin: 10px auto; width: 1400px !important; }






.thirdtwobox { width: 670px; height: 64px; display: flex; justify-content: space-evenly; align-items: center; border-bottom: 1px solid rgb(213, 213, 213); }


.thirdtwobox1 { width: 670px; height: 64px; display: flex; justify-content: space-evenly; align-items: center; border-bottom: 1px solid rgb(213, 213, 213); position: relative; background: linear-gradient(90deg, rgb(var(--c-accent)) 0%, rgb(var(--c-primary)) 100%); }




.thirdtwobox1::before { content: ""; position: absolute; top: 0px; inset-inline-start: 0px; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.8); z-index: 1; pointer-events: none; border-radius: inherit; }




.third1text { font-weight: 600; font-size: 20px; font-family: Montserrat-SemiBold; margin-bottom: 20px; color: rgb(37, 37, 37); }




.thirdsixbox { width: 1400px; display: flex; justify-content: center; align-items: center; margin: 80px auto; }


.section10 { padding: 100px 0px; background-color: rgb(245, 245, 245); }


.section10title { width: 1400px; font-family: Montserrat; font-weight: 400; font-size: 48px; line-height: 60px; text-align: center; color: rgb(0, 0, 0); margin: 0px auto 60px; }


.section10wrap { width: 1400px; margin: 0px auto; display: flex; align-items: flex-start; position: relative; }




.section10card { width: 1027px; background: rgb(255, 255, 255); border-radius: 16px; box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 12px; overflow: hidden; padding: 40px; transition: 0.4s; }


.section10num { font-family: Montserrat; font-weight: 700; font-size: 32px; line-height: 32px; color: rgb(var(--c-accent-5)); width: 60px; flex-shrink: 0; }


.section10card-title { font-family: Montserrat; font-weight: 500; font-size: 30px; line-height: 36px; text-align: start; vertical-align: middle; color: rgb(0, 0, 0); flex: 1 1 0%; }






.section12card-content { position: absolute; top: 60%; inset-inline-start: 40%; transform: translate(-50%, -50%); width: 655px; z-index: 3; padding: 35px 30px; display: flex; flex-direction: column; background: rgba(255, 255, 255, 0.85); border-radius: 16px; box-shadow: rgba(0, 0, 0, 0.06) 0px 8px 32px; transition: 0.5s ease-in-out; }


.section12card-bg { position: absolute; top: 0px; inset-inline-start: 0px; width: 100%; height: 100%; z-index: 1; overflow: hidden; }






.section10label { font-family: Montserrat; font-weight: 700; font-size: 16px; line-height: 24px; vertical-align: middle; color: rgb(var(--c-accent-5)); text-transform: capitalize; }












.section10imagearea { position: absolute; inset-inline-end: 0px; top: 0px; width: 560px; height: 100%; z-index: 1; pointer-events: none; }


.section10bigimg { width: 549px; height: 725px; object-fit: cover; display: block; border-radius: 0px 250px; }


@media (max-width: 1024px) {
  

  


  
.section10wrap { width: 100%; flex-direction: column; padding: 0px 20px; }


  


  


  
}






.section11 { padding: 100px 0px; }


.section11text { font-family: Montserrat; font-weight: 400; font-size: 48px; line-height: 60px; text-align: center; text-transform: capitalize; color: rgb(0, 0, 0); margin-bottom: 40px; }


.section22 { padding: 100px 0px; }


.section22desc { font-family: Montserrat; font-weight: 400; font-size: 16px; line-height: 160%; text-align: center; margin-bottom: 40px; }




.section11text1 { text-align: center; color: rgb(37, 37, 37); }


.section11boxs { width: 1400px; margin: 0px auto; display: flex; justify-content: center; align-items: center; gap: 20px; }


.section12wrap { width: 1558px; height: 539px; margin: 80px auto 0px; position: relative; }




.section11active .section11text1 { background: linear-gradient(90deg, rgb(var(--c-accent)) 0%, rgb(var(--c-primary)) 100%) text; -webkit-text-fill-color: transparent; font-weight: 600; }


.section11box { cursor: pointer; transition: 0.3s; }












.section12side::after { content: ""; position: absolute; top: 0px; inset-inline-start: 0px; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.35); z-index: 2; pointer-events: none; }


.section12main { width: 954px; height: 539px; position: absolute; top: 0px; inset-inline-start: 50%; transform: translateX(-50%); z-index: 3; border-radius: 20px; perspective: 2500px; transform-style: preserve-3d; }


.section12card { width: 954px; height: 539px; border-radius: 20px; overflow: hidden; position: absolute; top: 0px; inset-inline-start: 0px; box-shadow: rgba(0, 0, 0, 0.15) 0px 20px 60px; }


.section12card.section12card-base { z-index: 1; animation: 0.6s ease-out 0s 1 normal both running fadeInCard; }


.section12card.section12page-flip { z-index: 10; box-shadow: rgba(0, 0, 0, 0.35) 0px 30px 80px; backface-visibility: hidden; transform-style: preserve-3d; }


.section12card.section12page-flip-right { transform-origin: left center; animation: 0.7s cubic-bezier(0.45, 0.05, 0.55, 0.95) 0s 1 normal forwards running pageFlipRight; }


.section12card.section12page-flip-left { transform-origin: right center; animation: 0.7s cubic-bezier(0.45, 0.05, 0.55, 0.95) 0s 1 normal forwards running pageFlipLeft; }


.section12page-flip::after { content: ""; position: absolute; top: 0px; width: 120px; height: 100%; pointer-events: none; z-index: 20; }


.section12page-flip-right::after { inset-inline-start: 0px; background: linear-gradient(to right, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.3) 30%, rgba(0, 0, 0, 0) 100%); animation: 0.7s ease-in-out 0s 1 normal forwards running shadowFade; }


.section12page-flip-left::after { inset-inline-end: 0px; background: linear-gradient(to left, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.3) 30%, rgba(0, 0, 0, 0) 100%); animation: 0.7s ease-in-out 0s 1 normal forwards running shadowFade; }


@keyframes fadeInCard { 
  0% { opacity: 0.1; }
  60% { opacity: 0.7; }
  100% { opacity: 1; }
}


@keyframes pageFlipRight { 
  0% { transform: rotateY(0deg); box-shadow: rgba(0, 0, 0, 0.15) 0px 20px 60px; }
  30% { box-shadow: rgba(0, 0, 0, 0.35) -30px 10px 80px; }
  70% { box-shadow: rgba(0, 0, 0, 0.3) -20px 10px 60px; }
  100% { transform: rotateY(-180deg); box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 40px; opacity: 0.2; }
}


@keyframes pageFlipLeft { 
  0% { transform: rotateY(0deg); box-shadow: rgba(0, 0, 0, 0.15) 0px 20px 60px; }
  30% { box-shadow: rgba(0, 0, 0, 0.35) 30px 10px 80px; }
  70% { box-shadow: rgba(0, 0, 0, 0.3) 20px 10px 60px; }
  100% { transform: rotateY(180deg); box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 40px; opacity: 0.2; }
}


@keyframes shadowFade { 
  0% { opacity: 0; }
  25% { opacity: 1; }
  75% { opacity: 0.7; }
  100% { opacity: 0; }
}


.section12card-content { position: absolute; top: 60%; inset-inline-start: 40%; transform: translate(-50%, -50%); width: 655px; z-index: 3; padding: 35px 30px; display: flex; flex-direction: column; background: rgba(255, 255, 255, 0.85); border-radius: 16px; box-shadow: rgba(0, 0, 0, 0.06) 0px 8px 32px; }




.section12card-title { font-family: Montserrat; font-weight: 700; font-size: 20px; line-height: 24px; }


.section12card-desc { font-family: Montserrat; font-weight: 400; font-size: 16px; line-height: 24px; vertical-align: middle; color: rgb(121, 121, 121); }


.section12card-icon { width: 66px; height: 49px; border-radius: 0px 0px 15px 15px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; position: absolute; top: -35px; inset-inline-end: 40px; }




.section12arrow { width: 48px; height: 48px; border-radius: 50%; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; position: absolute; z-index: 5; transition: 0.3s; top: 50%; transform: translateY(-50%); }








.section12arrow-right:hover { background: linear-gradient(135deg, rgb(var(--c-accent-9)) 0%, rgb(var(--c-success-5)) 100%); }




.newsection6 { padding: 100px 0px; }




.newsection6box::before { content: ""; position: absolute; top: 0px; inset-inline-start: 0px; width: 100%; height: 100%; border-radius: 59px; background: linear-gradient(90deg, rgba(var(--c-accent), 0.25) 0%, rgba(var(--c-primary), 0.25) 100%); backdrop-filter: blur(12px); z-index: 0; pointer-events: none; }






.newsection7 { width: 69px; height: 69px; background: rgb(242, 242, 242); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative; }


.newsection7box { width: 320px; border-radius: 15px; padding: 35px 40px; border: 1px solid rgb(240, 240, 240); box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 8px, rgba(0, 0, 0, 0.06) 0px 8px 32px; gap: 169px; transition: 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); overflow: hidden; }


.newsection7box1 { width: 493px; height: 550px; border-radius: 15px; padding: 35px 40px; border: 1px solid rgb(240, 240, 240); box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 8px, rgba(0, 0, 0, 0.06) 0px 8px 32px; gap: 169px; display: flex; flex-direction: column; justify-content: flex-end; transition: 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); overflow: hidden; position: relative; }


.newsection7box1 .newsection7 { background: linear-gradient(90deg, rgb(var(--c-accent)) 0%, rgb(var(--c-primary)) 100%); }


.icon-gray { transition: opacity 0.3s; }


.icon-white { position: absolute; opacity: 0; transition: opacity 0.3s; }






.newsection8 { background: linear-gradient(to right, rgb(var(--c-eco-deep-2)) 0%, rgb(0, 0, 0) 25%, rgb(0, 0, 0) 50%, rgb(var(--c-eco-deep)) 100%); border: none; }


.logo-box { width: 338px; height: 152px; border-radius: 15px; transition: 0.3s; }


.logo-img { filter: grayscale(100%); transition: filter 0.3s; }


.logo-box:hover, .logo-box.logo-box-active { background: rgb(255, 255, 255); }








.newsection9box::after { content: ""; position: absolute; bottom: 0px; inset-inline-start: 0px; width: 100%; height: 55%; background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.3) 60%, transparent 100%); z-index: 1; pointer-events: none; border-radius: 0px 0px 15px 15px; }


.newsection9box .product-spec { display: none; margin: 0px; padding: 0px; }


.newsection8-title { font-family: Montserrat; font-weight: 700; font-size: 48px; line-height: 60px; vertical-align: middle; text-transform: capitalize; }










.newsection108 { font-weight: 700; font-size: 48px; line-height: 60px; text-transform: capitalize; }


.newsection10title { font-family: Montserrat; font-weight: 700; font-size: 20px; line-height: 36px; text-align: center; margin-top: 20px; }


.newsection10-gifts { position: absolute; inset-inline-end: 0px; top: 50%; transform: translateY(-50%); width: 500px; height: 400px; z-index: 3; }










.gift-box { position: absolute; bottom: -356px; inset-inline-end: -210px; width: 912px; z-index: 3; max-width: none !important; }


@keyframes coinFloat { 
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}


.gift-coin.animate { animation: 2s ease-in-out 0s infinite normal none running coinFloat; }


@keyframes hatBounce { 
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-5px) rotate(2deg); }
}


.gift-hat.animate { animation: 3s ease-in-out 0s infinite normal none running hatBounce; }




.newsection11box { width: 350px; height: 432px; padding: 22px; border-radius: 15px 0px 0px 15px; }




.newsection11box2 { width: 350px; height: 432px; padding: 22px; border-radius: 0px 15px 15px 0px; }












.newsection11-icon { transition: opacity 0.3s; }




.newsection11text1 { font-family: Montserrat; font-weight: 700; font-size: 45px; line-height: 36px; color: rgb(var(--c-danger-2)); }


.newsection11text2 { font-family: Montserrat; font-weight: 700; font-size: 65px; line-height: 60px; text-align: center; color: rgb(37, 37, 37); }


.newsection11text3 { font-family: Montserrat; font-weight: 700; font-size: 50px; line-height: 45px; text-align: center; }


.progress-track { width: 1110px; height: 44px; background-color: rgb(240, 240, 240); border-radius: 80px; position: relative; overflow: hidden; }


.progress-fill { height: 100%; border-radius: 80px; background: linear-gradient(90deg, rgb(var(--c-accent-2)) 0%, rgb(var(--c-primary)) 100%); width: 0%; position: relative; }


.progress-fill::before { content: ""; position: absolute; top: 0px; inset-inline-start: 0px; width: 100%; height: 100%; border-radius: 15px; background: rgba(255, 255, 255, 0.3); z-index: 1; pointer-events: none; }






.newsection12text { font-family: Montserrat; font-weight: 700; font-size: 95px; vertical-align: bottom; text-transform: capitalize; color: rgb(233, 233, 233); }


.newsection12-card { background-color: rgb(249, 249, 249); position: relative; transition: 0.3s; }


.newsection12-card:hover { background: linear-gradient(90deg, rgb(var(--c-accent)) 0%, rgb(var(--c-primary)) 100%); }


.newsection12-card:hover::before { content: ""; position: absolute; top: 0px; inset-inline-start: 0px; width: 100%; height: 100%; border-radius: 15px; background: rgba(255, 255, 255, 0.5); z-index: 1; pointer-events: none; }






.newsection12-card:hover .newsection12-num { background: linear-gradient(90deg, rgb(var(--c-accent)) 0%, rgb(var(--c-primary)) 100%) text; -webkit-text-fill-color: transparent; }




.newsection14 { border-radius: 15px; padding: 77px 53px; background-color: rgb(37, 37, 37); }


.newsection14-input-wrapper { height: 68px; border-radius: 15px; position: relative; overflow: hidden; display: flex; align-items: center; padding: 0px 20px; }


.newsection14-input-wrapper::before { content: ""; position: absolute; top: 0px; inset-inline-start: 0px; width: 100%; height: 100%; background: rgb(42, 51, 49); backdrop-filter: blur(10px); z-index: 1; pointer-events: none; border-radius: 15px; }


.newsection14-input { width: 100%; height: 100%; background: transparent; border: none; outline: none; color: rgb(255, 255, 255); font-size: 16px; position: relative; z-index: 2; }






.ai-chat-overlay { position: fixed; top: 0px; inset-inline-start: 0px; width: 100%; height: 100%; z-index: 9999; pointer-events: none; }


.ai-chat-modal { position: fixed; inset-inline-end: 20px; bottom: 20px; width: 420px; height: 600px; background: rgb(255, 255, 255); border-radius: 16px; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.15) 0px 8px 32px, rgba(0, 0, 0, 0.1) 0px 2px 8px; display: flex; flex-direction: column; pointer-events: auto; animation: 0.3s ease 0s 1 normal none running slideUp; }


@keyframes slideUp { 
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0px); }
}


.ai-chat-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: rgb(var(--c-cool-gray)); border-bottom: 1px solid rgb(238, 238, 238); cursor: move; user-select: none; flex-shrink: 0; }


.ai-chat-title { font-family: Roboto, sans-serif; font-size: 14px; font-weight: 500; color: rgb(51, 51, 51); }




.ai-chat-close:hover { background: rgb(224, 224, 224); }


.ai-chat-iframe { flex: 1 1 0%; width: 100%; border: none; display: block; }


.ai-chat-resize { position: absolute; inset-inline-end: 0px; bottom: 0px; width: 20px; height: 20px; cursor: se-resize; display: flex; align-items: center; justify-content: center; background: rgb(var(--c-cool-gray)); border-radius: 8px 0px 0px; z-index: 10; }


.ai-chat-resize:hover { background: rgb(224, 224, 224); }


@media (max-width: 768px) {
  
.ai-chat-modal { width: 100%; height: 100%; inset-inline-end: 0px; bottom: 0px; border-radius: 0px; }


  
}


@keyframes flipInRight { 
  0% { transform: perspective(1000px) rotateY(90deg); opacity: 0; }
  100% { transform: perspective(1000px) rotateY(0deg); opacity: 1; }
}


@keyframes flipInLeft { 
  0% { transform: perspective(1000px) rotateY(-90deg); opacity: 0; }
  100% { transform: perspective(1000px) rotateY(0deg); opacity: 1; }
}


@media (max-width: 1024px) {
  
.section-container { width: 100% !important; padding: 0px 20px !important; }


  


  


  


  


  


  


  


  
.thirdbox { width: 100% !important; margin-inline-end: 0px !important; }


  


  


  


  
.thirdfivebox { border-bottom: 1px solid rgba(0, 0, 0, 0.1); padding-bottom: 20px; width: 45% !important; margin-inline-end: 0px !important; border-inline-end: none !important; }


  


  


  
.section10wrap { width: 100% !important; flex-direction: column !important; padding: 0px !important; }


  
.section10list { width: 100% !important; margin-top: 0px !important; }


  


  
.section10imagearea { order: -1; margin-bottom: 20px; position: relative !important; width: 100% !important; height: 300px !important; }


  


  


  
.section12wrap { padding: 40px 0px; width: 100% !important; height: auto !important; }


  
.section12main { width: 100% !important; height: 400px !important; position: relative !important; inset-inline-start: 0px !important; transform: none !important; }


  


  


  


  


  


  


  


  


  


  
.newsection8-logos-right { margin-top: 0px !important; }


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  
.tbody li span { font-size: 14px !important; padding: 0px 4px !important; }


  


  
}


@media (max-width: 767px) {
  


  


  

  


  


  


  

  


  


  


  
.firstbox { padding: 0px; }


  


  


  
.thirdfivebox { border-bottom: 1px solid rgba(0, 0, 0, 0.1); border-inline-end: none; padding-bottom: 20px; width: 100% !important; height: auto !important; }


  
.section5-left { height: 250px !important; border-radius: 15px 0px 0px !important; }


  


  


  


  


  


  


  


  
.section10card-body { margin-inline-start: 0px !important; margin-inline-end: 0px !important; }


  
.section11boxs { align-items: self-start; width: 100% !important; flex-wrap: wrap !important; gap: 10px !important; }


  
.section11titlewrap { gap: 4px; width: 31% !important; }


  


  
.section11box { padding-top: 10px; padding-bottom: 10px; padding-inline-start: 10px; padding-inline-end: 0px !important; height: auto !important; }


  


  


  


  


  


  


  
.newsection6 { padding: 60px 0px !important; }


  


  


  


  


  
.newsection8 { padding: 60px 0px !important; }


  


  


  


  


  
.newsection10 { padding: 60px 0px !important; }


  
.newsection10box { margin: 0px auto; height: 160px !important; }


  


  
.newsection11 { padding: 40px 0px !important; }


  
.newsection11box, .newsection11box1, .newsection11box2 { max-width: 320px; min-height: 250px; padding: 0px; width: 100% !important; height: auto !important; }


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  
.newsection10text { padding-inline-end: 0px !important; }


  


  
.newsection11-countdown { box-sizing: border-box; width: 100% !important; gap: 6px !important; flex-wrap: nowrap !important; }


  
.newsection11-countdown > div { flex: 1 1 0px; min-width: 0px; box-sizing: border-box; height: 90px !important; gap: 8px !important; border-radius: 10px !important; }


  


  


  


  
.ai-chat-modal { width: 100% !important; height: 100% !important; inset-inline-end: 0px !important; bottom: 0px !important; border-radius: 0px !important; }


  


  


  
.tbody ul { padding: 0px !important; width: 100% !important; }


  
.tbody li { flex-direction: row !important; gap: 0px !important; padding: 8px 4px !important; min-height: auto !important; width: 100% !important; }


  
.tbody li span { flex: 1 1 0% !important; min-width: 0px !important; width: auto !important; font-size: 12px !important; line-height: 16px !important; padding: 0px 2px !important; word-break: break-word !important; overflow-wrap: break-word !important; }


  


  


  


  


  
.thirdsixbox { margin-bottom: 0px; }


  


  


  


  
.newsection108 { font-size: 20px; line-height: 1; margin: 35px 0px 0px; }


  
.newsection10-gifts { position: static; margin: 0px auto; width: auto; }


  


  


  


  


  


  


  
.bg-switch-wrap { background: rgba(255, 255, 255, 0.6); --gap: 60px; padding-top: var(--gap); padding-bottom: var(--gap); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Cmask id='m'%3E%3Crect width='100%25' height='100%25' fill='white'/%3E%3Ccircle cx='50%25' cy='0' r='60' fill='black'/%3E%3Ccircle cx='50%25' cy='100%25' r='60' fill='black'/%3E%3C/mask%3E%3Crect width='100%25' height='100%25' fill='white' mask='url(%23m)'/%3E%3C/svg%3E"); mask-size: 100% 100%; }


  
.newsection11text { font-size: 16px; padding: 0px; }


  
}






.imageBg { position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; object-position: 100% 100%; z-index: 1; animation: 20s ease-in-out 0s infinite alternate none running imageBgZoom; }









.newsection1-bg-img { position: absolute; top: 0px; inset-inline-start: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center center; z-index: 0; }


.section6 { padding-bottom: 50px; background-color: rgb(255, 255, 255); }








.section6leftbox img { transition: transform 0.4s, box-shadow 0.4s; }


.section6leftbox:hover img { transform: translateY(-12px); box-shadow: rgba(0, 0, 0, 0.15) 0px 20px 40px; }


.section6rightbox1text3 { transition: background 0.3s, -webkit-text-fill-color 0.3s; }


.section6rightbox2:hover .section6rightbox1text3 { background: linear-gradient(90deg, rgb(var(--c-accent-2)) 0%, rgb(var(--c-eco)) 50%, rgb(var(--c-primary)) 100%) text; -webkit-text-fill-color: transparent; }


.section7-card-bg { position: absolute; top: 0px; inset-inline-start: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center center; z-index: 0; }


.section7-card { transition: transform 0.4s, box-shadow 0.4s; }


.section7-card:hover { transform: translateY(-12px); box-shadow: rgba(0, 0, 0, 0.12) 0px 20px 40px; }






.section6rightbox1text { font-family: Montserrat; font-weight: 500; font-size: 20px; line-height: 36px; color: rgb(255, 255, 255); }


.section6rightbox1text1 { font-family: Montserrat; font-weight: 500; font-size: 20px; line-height: 30px; color: rgb(0, 0, 0); }


.section6rightbox1text2 { font-family: Montserrat; font-weight: 700; font-size: 16px; line-height: 24px; color: rgb(0, 0, 0); }


.section6rightbox1text3 { font-family: Montserrat; font-weight: 400; font-size: 16px; line-height: 24px; color: rgb(150, 150, 150); }








.section7 { background-color: rgb(255, 255, 255); }


.section7text { font-weight: 600; font-size: 24px; line-height: 150%; color: rgb(37, 37, 37); }


.section7-desc { font-weight: 600; font-size: 24px; line-height: 150%; color: rgb(37, 37, 37); }




.section7box-bg-wrapper { position: absolute; top: 0px; inset-inline-start: 0px; width: 100%; height: 100%; z-index: 0; overflow: hidden; }


.section7box-bg { position: absolute; top: 0px; inset-inline-start: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center center; }


.section7box-overlay { position: absolute; top: 0px; inset-inline-start: 0px; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.5); z-index: 1; pointer-events: none; }










.section8 { padding: 100px 0px; }


.spec-header { display: flex; align-items: center; padding: 19px 0px; margin-bottom: 20px; border: 1px solid transparent; border-radius: 50px; position: relative; gap: 45px; text-align: center; background: linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255)) padding-box padding-box, linear-gradient(90deg, rgb(var(--c-accent-2)) 0%, rgb(var(--c-eco)) 50%, rgb(var(--c-primary)) 100%) border-box border-box; }


.spec-header span { font-family: Montserrat; font-weight: 700; font-size: 16px; color: rgb(37, 37, 37); }


.spec-header:hover { background: linear-gradient(90deg, rgb(var(--c-accent-2)) 0%, rgb(var(--c-eco)) 50%, rgb(var(--c-primary)) 100%); border-color: transparent; }


.spec-header:hover span { color: rgb(255, 255, 255) !important; -webkit-text-fill-color: rgb(255, 255, 255) !important; }


.spec-cell { width: 311px; padding: 19px 0px; text-align: center; border-radius: 50px; border: 1px solid transparent; background: linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255)) padding-box padding-box, linear-gradient(90deg, rgb(var(--c-accent-2)) 0%, rgb(var(--c-eco)) 50%, rgb(var(--c-primary)) 100%) border-box border-box; position: relative; }


.spec-cell1 { width: 1044px; padding: 20px 0px; text-align: center; border-radius: 50px; background: rgb(249, 249, 249); display: flex; justify-content: center; align-items: center; }


.spec-row { display: flex; gap: 45px; margin-bottom: 20px; border-radius: 50px; transition: 0.3s; padding: 2px; }


.spec-row:hover { background: linear-gradient(90deg, rgb(var(--c-accent)) 0%, rgb(var(--c-primary)) 100%); padding: 2px; }






.spec-row:hover .spec-cell span, .spec-row:hover .spec-cell1 span { color: rgb(255, 255, 255) !important; -webkit-text-fill-color: rgb(255, 255, 255) !important; }


.spec-value-dark { font-weight: 700; font-size: 16px; line-height: 24px; text-align: center; vertical-align: middle; color: rgb(30, 30, 30) !important; }






.newsection::before { content: ""; position: absolute; top: 0px; inset-inline-start: 0px; width: 100%; height: 100%; background: rgb(252, 252, 252); z-index: 1; pointer-events: none; }




.newsection-para { transition: opacity 0.6s; }












.newsection1-textbox { background: linear-gradient(135deg, rgba(var(--c-accent-2), 0.15) 0%, rgba(var(--c-eco), 0.15) 50%, rgba(var(--c-primary-2), 0.15) 100%); backdrop-filter: blur(8px); border-radius: 16px; padding: 10px; border: 1px solid rgba(255, 255, 255, 0.3); margin-top: 10px; }


.newsection1-item { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; padding: 20px; transition: 0.3s; }




.newsection1-content { flex: 1 1 0%; }


.newsection1-title { font-family: Montserrat; font-weight: 700; font-size: 20px; line-height: 28px; color: rgb(37, 37, 37); }


.newsection1-desc { font-family: Montserrat; font-weight: 400; font-size: 16px; line-height: 24px; color: rgb(102, 102, 102); animation: 0.3s ease 0s 1 normal none running fadeIn; }


@keyframes fadeIn { 
  0% { opacity: 0; transform: translateY(-5px); }
  100% { opacity: 1; transform: translateY(0px); }
}




.newsection2-bg-img { position: absolute; top: 0px; inset-inline-start: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center center; z-index: 0; }


.newsection2-overlay { position: absolute; top: 0px; inset-inline-start: 0px; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 1; pointer-events: none; }




.newsection2 .detext { color: rgb(102, 102, 102); font-size: 14px; line-height: 22px; }


.newsection2 .detext span[style*="color:#fff"], .newsection2 .detext span[style*="color: #fff"] { color: rgb(255, 255, 255) !important; }




.newsection2-card { position: relative; flex: 1 1 0%; padding: 40px 20px; transition: flex 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), padding 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); }


.newsection2-card:not(:last-child)::after { content: ""; position: absolute; top: 0px; inset-inline-end: 0px; width: 1px; height: 100%; background: linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 20%, rgb(255, 255, 255) 50%, rgb(255, 255, 255) 100%); pointer-events: none; }


.newsection2-card-active { flex: 3 1 0%; padding: 20px; }


.newsection2-card-shrink { flex: 1 1 0%; padding: 40px 20px; }


.newsecton115 { font-family: Montserrat; font-weight: 500; font-size: 20px; line-height: 100%; text-align: center; text-transform: capitalize; color: rgb(248, 248, 248); }


.newsection3::before { content: ""; position: absolute; top: 0px; inset-inline-start: 0px; width: 100%; height: 100%; background: rgb(255, 255, 255); z-index: 1; pointer-events: none; }




.newsection4 { background-image: url("/images/0697149ed74ab8d0.png"); background-size: cover; background-position: center center; background-repeat: no-repeat; position: relative; }


.newsection4::before { content: ""; position: absolute; top: 0px; inset-inline-start: 0px; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.8); z-index: 1; pointer-events: none; }




@media (max-width: 1024px) {
  
.section-container { padding: 0px 24px !important; width: 100% !important; }


  

  

  


  
.box11 { margin-inline-end: 0px !important; padding: 40px 0px !important; }


  

  
.boxright img { max-width: 448px; width: 100% !important; height: auto !important; }


  
.newsection, .newsection3 { padding: 60px 0px !important; position: relative !important; top: auto !important; min-height: auto !important; }


  


  
.newsection1-content > div:first-child img { max-width: 400px; width: 100% !important; height: auto !important; }


  


  


  


  


  


  


  


  


  


  
.newsection2 > .section-container > .mt80 > div { width: 100% !important; border-inline-end: none !important; border-bottom: 1px solid rgb(255, 255, 255) !important; padding: 20px !important; }


  


  


  


  


  


  


  
.section6leftbox img { max-width: 537px; width: 100% !important; height: auto !important; }


  


  


  
.section7-cards > div { min-height: 300px; width: calc(50% - 10px) !important; height: auto !important; }


  


  


  
.section7-right-image img { max-width: 380px; width: 100% !important; height: auto !important; }


  
.section7-bottom-title { padding-inline-start: 0px !important; text-align: center !important; }


  


  


  
.section9 > .section-container > .flex > div:first-child > div { width: 100% !important; border-radius: 24px 24px 0px 0px !important; }


  
.section9 > .section-container > .flex > div:last-child { width: 100% !important; border-radius: 0px 0px 24px 24px !important; }


  


  


  


  


  


  


  


  


  
.section9-content-wrap > div:first-child > div { width: 50% !important; border-radius: 0px !important; padding: 24px !important; }


  
.section9-content-wrap > div:first-child > div:first-child { border-radius: 24px 0px 0px !important; }


  
.section9-content-wrap > div:first-child > div:last-child { border-radius: 0px 0px 0px 24px !important; border-inline-end: none !important; }


  
.section9-content-wrap > div:last-child { width: 100% !important; border-radius: 0px 0px 24px 24px !important; border-inline-end: 1px solid rgb(213, 213, 213) !important; border-bottom: 1px solid rgb(213, 213, 213) !important; border-inline-start: 1px solid rgb(213, 213, 213) !important; border-image: initial !important; border-top: none !important; padding: 24px !important; }


  


  


  
}


@media (max-width: 767px) {
  
.section-container { padding: 0px !important; }


  


  


  

  


  
.text1 { padding: 0px 16px; font-size: 12px !important; white-space: normal !important; }


  

  
.box11 { padding: 20px 0px !important; }


  


  


  


  


  
.newsection, .newsection3 { min-height: 100vh; padding: 40px 0px !important; }


  


  


  
.newsection1 { padding: 40px 0px !important; }


  


  


  


  


  


  


  


  


  


  


  
.section8 { padding: 40px 0px 0px !important; overflow-x: hidden !important; }


  
.section133 { width: 100% !important; overflow: hidden !important; padding: 40px 20px !important; margin-top: 0px !important; margin-bottom: 0px !important; }


  


  
.section133 .spec-header { border-radius: 30px; width: 100% !important; min-width: auto !important; gap: 8px !important; padding: 12px 8px !important; margin-bottom: 10px !important; }


  


  


  


  
.section133 .spec-row { border-radius: 30px; width: 100% !important; min-width: auto !important; gap: 8px !important; margin-bottom: 8px !important; height: auto !important; padding: 2px !important; }


  
.section133 .spec-cell { border-radius: 30px; width: 30% !important; min-width: auto !important; padding: 10px 4px !important; display: flex !important; align-items: center !important; justify-content: center !important; }


  


  


  


  


  
.section6 { padding: 40px 0px !important; }


  
.section6boxcontainer { padding: 40px 20px 0px; margin: 0px !important; gap: 20px !important; }


  


  


  


  


  


  
.section6rightbox2, .section6rightbox3 { gap: 4px; margin-bottom: 12px !important; flex-direction: column !important; }


  


  


  


  


  


  


  
.section7-cards { margin-top: 0px; flex-direction: column !important; align-items: center !important; gap: 16px !important; }


  
.section7-cards > div { max-width: 320px; min-height: 250px; width: 100% !important; height: auto !important; padding: 20px !important; }


  


  


  


  
.section7-bottom-title { font-size: 18px !important; padding: 40px 0px 0px !important; text-align: center !important; margin-bottom: 0px !important; }


  


  


  


  


  
.section7-right-image img { max-width: 300px; width: 100% !important; height: auto !important; }


  


  


  
.section9 > .section-container > .flex > div:first-child > div { width: 100% !important; border-radius: 0px !important; border-top: none !important; border-inline-end: none !important; border-inline-start: none !important; border-image: initial !important; border-bottom: 1px solid rgb(213, 213, 213) !important; }


  
.section9 > .section-container > .flex > div:first-child > div:first-child { border-radius: 16px 16px 0px 0px !important; }


  
.section9 > .section-container > .flex > div:last-child { width: 100% !important; border-radius: 0px 0px 16px 16px !important; border-inline-end: 1px solid rgb(213, 213, 213) !important; border-bottom: 1px solid rgb(213, 213, 213) !important; border-inline-start: 1px solid rgb(213, 213, 213) !important; border-image: initial !important; border-top: none !important; }


  


  


  


  
.newsection4-inner > span { display: block; margin-bottom: 10px; font-size: 14px !important; }


  


  


  


  


  


  


  


  


  
.newsection { position: relative !important; top: auto !important; height: auto !important; min-height: auto !important; padding: 40px 0px !important; opacity: 1 !important; transform: none !important; }


  
.newsection3 { position: relative !important; top: auto !important; height: auto !important; min-height: auto !important; padding: 40px 0px !important; opacity: 1 !important; transform: none !important; }


  


  
.newsection1-content { margin-top: 0px; flex-direction: column !important; gap: 20px !important; }


  
.newsection1-content > div:first-child img { max-width: 300px; width: 100% !important; height: auto !important; }


  


  


  


  


  


  


  
.section9-content-wrap > div:first-child > div { width: 100% !important; border-radius: 0px !important; border-top: 1px solid rgb(213, 213, 213) !important; border-inline-end: 1px solid rgb(213, 213, 213) !important; border-inline-start: 1px solid rgb(213, 213, 213) !important; border-image: initial !important; border-bottom: none !important; padding: 20px !important; }


  
.section9-content-wrap > div:first-child > div:first-child { border-radius: 16px 16px 0px 0px !important; }


  
.section9-content-wrap > div:first-child > div:last-child { border-radius: 0px !important; }


  
.section9-content-wrap > div:last-child { width: 100% !important; border-radius: 0px 0px 16px 16px !important; border-inline-end: 1px solid rgb(213, 213, 213) !important; border-bottom: 1px solid rgb(213, 213, 213) !important; border-inline-start: 1px solid rgb(213, 213, 213) !important; border-image: initial !important; border-top: none !important; padding: 20px !important; }


  
.section9-content-wrap > div:last-child > div { margin-top: 16px !important; margin-bottom: 0px !important; }


  
.section9-content-wrap > div:last-child > div:first-of-type { margin-top: 0px !important; }


  


  


  


  


  


  
.mr-hd1 { height: 200px; margin-top: 0px; }


  


  


  
.newsection2-card { width: 100%; flex: 0 0 auto !important; }


  
.newsection2-card:not(:last-child)::after { inset: auto auto 0px 0px; width: 100%; height: 1px; background: linear-gradient(to left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 20%, rgb(255, 255, 255) 50%, rgb(255, 255, 255) 100%); }


  
.newsection2-card-active { padding: 20px 0px; flex: 0 0 auto !important; }
}




@keyframes ripple-expand { 
  0% { transform: scale(0.7); opacity: 1; }
  100% { transform: scale(1.3); opacity: 0; }
}














.one_title { font-size: 60px; color: rgb(255, 255, 255); font-family: Montserrat-Bold; }


.one_nav { font-size: 20px; font-weight: 900; color: rgb(255, 255, 255); text-align: center; margin-top: 40px; }


.hoverChecked { color: rgb(255, 255, 255); transition: 0.5s ease-in-out; overflow: hidden; flex: 0 0 55% !important; background: rgb(37, 37, 37) !important; }




















.Ftitle { display: inline-block; padding-block: 1.5rem 3rem; padding-inline: 2rem 3rem; font-family: sans-serif; font-size: 2.5rem; font-weight: bold; color: rgb(255, 255, 255); white-space: nowrap; width: 65%; }








.imageBg { position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: 0% 35%; z-index: 1; animation: 20s ease-in-out 0s infinite alternate none running imageBgZoom; }


@keyframes imageBgZoom { 
  0% { transform: scale(1); }
  100% { transform: scale(1.2); }
}


.hoverChecked { color: rgb(255, 255, 255); transition: 0.5s ease-in-out; flex: 0 0 55% !important; background: rgb(37, 37, 37) !important; }




.checkedfive { background: linear-gradient(to right, rgba(var(--c-accent-2), 0.6) 0%, rgba(var(--c-eco), 0.6) 50%, rgba(var(--c-primary-2), 0.6) 100%); color: rgb(255, 255, 255); }




.fiveBg { animation: 20s ease-out 0s infinite normal none running bgZoomIn; height: 700px; background-image: url("/images/da1e50d251bcfded.png"); }


@keyframes bgZoomIn { 
  0% { background-size: auto 100%; }
  100% { background-size: auto 110%; }
}


.borderHover { background: linear-gradient(to right, rgba(var(--c-accent-2), 0.2) 0%, rgba(var(--c-eco), 0.2) 50%, rgba(var(--c-primary-2), 0.2) 100%); border-radius: 200px !important; }


.borderBg { background: linear-gradient(white, white) padding-box padding-box, linear-gradient(rgb(var(--c-primary-2)), rgb(var(--c-accent-2))) border-box border-box; border: 2px solid transparent; border-radius: 200px !important; }




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


  

  


  


  


  


  


  


  


  


  


  
.width7 { }


  


  


  


  


  


  


  


  


  


  


  


  
}




.hero_container .hero_bg { display: block; position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; object-position: 0% 35%; z-index: 0; transform-origin: center center; animation: 20s ease-in-out 0s infinite alternate none running heroZoom; }


@keyframes heroZoom { 
  0% { transform: scale(1); }
  100% { transform: scale(1.2); }
}




.hero_mask { position: absolute; bottom: 0px; inset-inline-start: 0px; width: 100%; height: 30px; z-index: 1; }


.hero_mask img { width: 100%; height: 100%; object-fit: cover; object-position: 0px 100%; }


.imageBg { position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: -20% 35%; z-index: 1; animation: 20s ease-in-out 0s infinite alternate none running imageBgZoom; }


.hero_middle_container { color: rgb(255, 255, 255); display: flex; flex-direction: column; justify-content: center; align-items: center; height: 190px; width: 1400px; }




.metro_container { background: rgb(255, 255, 255); padding-top: 80px; }


.metro_middle_container { width: 1400px; margin: 0px auto; display: flex; flex-direction: column; justify-content: center; align-items: center; }




.metro_content { display: flex; justify-content: space-between; margin-top: 40px; background: url("/images/66ce01f35d893c96.png") 100% center / 110% 210% no-repeat; padding: 0px 0px 90px; }




.metro_gride { display: flex; flex-direction: column; justify-content: space-between; align-items: center; border-radius: 10px; background: rgb(255, 255, 255); }




.metro_gride_top { display: flex; justify-content: space-between; align-items: center; width: 100%; border-bottom: 2px solid rgb(229, 229, 229); }




.metro_gride_text { flex: 1 1 0%; padding: 5px 10px; height: 100px; display: flex; justify-content: center; align-items: center; gap: 10px; flex-direction: column; }









.tiered_header { text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 20px; margin-bottom: 30px; padding: 30px; border-radius: 10px; color: rgb(255, 255, 255); }




.tiered_header p { font-size: 16px; line-height: 1.6; color: rgb(255, 255, 255); }




.tiered_card { background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 15px; padding: 30px; flex: 1 1 0%; transition: 0.4s; display: flex; flex-direction: column; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 30px; }


.tiered_card:hover { transform: translateY(-5px); border-color: rgba(255, 255, 255, 0.6); box-shadow: rgba(var(--c-eco-2), 0.3) 0px 10px 40px; }


.tiered_card h3 { font-size: 20px; margin-bottom: 5px; color: rgb(255, 255, 255); font-weight: 600; }


.tiered_card .tiered_value { font-size: 16px; font-weight: bold; color: rgb(var(--c-primary-tint-4)); margin-bottom: 20px; }


.tiered_card hr { border-width: 1px 0px 0px; border-inline-end-style: initial; border-bottom-style: initial; border-inline-start-style: initial; border-inline-end-color: initial; border-bottom-color: initial; border-inline-start-color: initial; border-image: initial; border-top-style: solid; border-top-color: rgba(255, 255, 255, 0.2); margin: 15px 0px; }








.tiered_roi_section { width: 100%; display: flex; justify-content: space-between; flex-flow: column wrap; gap: 30px; }


.tiered_roi_section_title { display: flex; justify-content: start; text-align: start; font-weight: bold; background: linear-gradient(to right, rgb(var(--c-accent-2)) 0%, rgb(var(--c-eco)) 50%, rgb(var(--c-primary-2)) 100%) text; color: rgba(0, 0, 0, 0); }




.tiered_roi_item { display: flex; align-items: center; gap: 15px; flex: 1 1 0%; }


.tiered_roi_icon { border: 1px solid rgb(255, 255, 255); border-radius: 50%; display: flex; justify-content: center; align-items: center; width: 100px; height: 100px; }




.tiered_roi_text { flex: 1 1 0%; }


.tiered_roi_text h4 { color: rgb(255, 255, 255); margin-bottom: 5px; }


.tiered_roi_text p { color: rgb(255, 255, 255); line-height: 1.5; }


.tiered_container { background: url("/images/312eb0d9715d78ad.jpg") 100% center / 110% no-repeat; display: flex; flex-direction: column; align-items: center; padding: 50px 0px; position: relative; animation: 20s ease-out 0s infinite normal none running bgZoomIn; }


@keyframes bgZoomIn { 
  0% { background-size: 110%; background-position: center center; }
  100% { background-size: 140%; background-position: center center; }
}


.tiered_container::before { content: ""; position: absolute; inset: 0px; background: rgba(0, 0, 0, 0.5); z-index: 1; }




.tiered_main_footer { color: rgb(255, 255, 255); }


.tiered_main_footer span { color: rgb(255, 255, 255); }


.tiered_slice_line { border-top: 1px solid rgb(255, 255, 255); width: 100%; }


.vero_section { padding: 100px 20px 40px; width: 100%; background-color: rgb(255, 255, 255); }


.vero_container { max-width: 1400px; margin: 0px auto; }




.vero_title { font-size: 36px; font-weight: 600; margin-bottom: 16px; color: rgb(26, 26, 26); }


.vero_subtitle { font-size: 16px; color: rgb(102, 102, 102); margin: 0px auto; line-height: 1.8; }




.vero_card { background-color: rgb(244, 244, 244); border-radius: 12px; padding: 40px; position: relative; z-index: 1; transition: transform 0.3s; overflow: hidden; cursor: default; }


.vero_icon { width: 60px; height: 60px; color: rgb(51, 51, 51); margin-bottom: 24px; transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); display: inline-block; }


.vero_card:hover { transform: scale(1.05); border: 2px solid rgb(var(--c-accent-tint-5)); }


.vero_card_title { font-size: 20px; font-weight: 600; margin-bottom: 16px; color: rgb(26, 26, 26); }


.vero_card_text { font-size: 14px; color: rgb(85, 85, 85); line-height: 1.7; }


.supply_container { background: url("/images/f4c2128ce737c522.png") 100% center / 110% 210% no-repeat; padding: 0px 0px 80px; position: relative; }




.supply_container::before { content: ""; position: absolute; inset: 0px; background: rgba(0, 0, 0, 0.5); z-index: 1; }


.supply_content { position: relative; z-index: 2; max-width: 1400px; margin: 0px auto; }




.supply_subtitle { font-size: 18px; margin: 0px auto; opacity: 0.9; font-weight: 300; }


.supply_main_box { display: flex; overflow: hidden; margin-top: 60px; gap: 30px; box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 40px; }


.supply_info_col { flex: 1 1 0%; padding: 60px; border-radius: 20px; background-color: rgb(249, 249, 249); }


.supply_section_title { font-size: 24px; font-weight: 700; margin-bottom: 40px; color: rgb(34, 34, 34); }




.supply_desc { font-size: 15px; color: rgb(102, 102, 102); line-height: 1.8; }


.supply_image_col { flex: 1 1 0%; background-color: white; display: flex; align-items: center; border-radius: 20px; justify-content: center; padding: 40px; }


.supply_image_col img { max-width: 100%; height: auto; filter: drop-shadow(rgba(0, 0, 0, 0.15) 0px 10px 20px); }


@media (min-width: 769px) and (max-width: 1024px) {
  


  
.metro_container { background: rgb(255, 255, 255); padding-top: 30px; }


  


  


  


  


  
.metro_middle_container { width: 90%; margin: 0px auto; display: flex; flex-direction: column; justify-content: center; align-items: center; }


  


  
.metro_content { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; background-position: center bottom; background-size: 100% 35%; }


  


  


  


  


  


  


  


  


  
.tiered_cards_container, .supply_content, .tiered_roi_section { padding: 0px 20px; }


  
.tiered_roi_icon { border: 1px solid rgb(255, 255, 255); border-radius: 50%; display: flex; justify-content: center; align-items: center; width: 80px; height: 80px; }


  


  


  


  
}


@media (max-width: 768px) {
  


  

  


  


  


  
.hero_mask { position: absolute; bottom: 0px; inset-inline-start: 0px; width: 100%; height: 30px; z-index: 1; }


  
.hero_mask img { width: 100%; height: 100%; object-fit: fill; object-position: 0px 100%; }


  


  


  
.metro_container { background: rgb(255, 255, 255); padding: 40px 20px 0px; }


  
.metro_middle_container { width: auto; margin: 0px auto; display: flex; flex-direction: column; justify-content: center; align-items: center; }


  


  


  


  


  


  
.tiered_header h1 { margin: 0px auto; }


  
.metro_title { font-size: 20px; margin: 0px auto; }


  


  


  
.metro_content { background-position: center bottom; background-size: 100% 35%; }


  


  


  


  


  


  


  
.tiered_card hr { margin: 5px 0px; }


  


  


  
.supply_content, .tiered_roi_section { padding: 0px; }


  


  
.tiered_roi_icon { border: 1px solid rgb(255, 255, 255); border-radius: 50%; display: flex; justify-content: center; align-items: center; width: 80px; height: 80px; }


  


  


  
.supply_hero { padding: 0px; }


  


  


  


  
.tiered_container { padding: 40px 20px; background: url("/images/312eb0d9715d78ad.jpg") center center / 110% 100% no-repeat; display: flex; animation: 20s ease-out 0s infinite alternate none running bgZoomIn; }


  
@keyframes bgZoomIn { 
  0% { background-size: 110% 100%; background-position: center center; }
  100% { background-size: 140% 100%; background-position: center center; }
}


  
.tiered_header { padding: 0px; }


  


  


  


  
}


.two_content_item { padding: 20px; border-radius: 10px; border: 1px solid rgb(195, 194, 194); width: 25%; height: 125px; }


.two_content_item span { margin-top: 20px; color: rgb(102, 102, 102); }






.two_content_item:hover span { color: rgb(255, 255, 255); }


.yuan { width: 60px; height: 60px; border-radius: 100px; border: 1px solid rgb(212, 212, 212); }
















.flex_box_container { display: flex; align-items: center; justify-content: center; background: url("/images/3cbae60894cdd176.jpg") 100% center / 100% no-repeat; padding: 0px 20px; }


.flex_box_content { width: 1400px; color: rgb(0, 0, 0); }


.hero-bg-animated { animation: 20s ease-out 0s infinite normal none running bgZoomIn; }


.productPageContent { width: 100%; min-height: 400px; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; text-align: center; color: rgb(255, 255, 255); padding: 40px 0px; }


.productPageContent > .bg-img { display: block; position: absolute; inset: 0px; width: 100%; object-fit: cover; object-position: center 62%; z-index: 0; height: 400px !important; }


.productPageContent::after { content: ""; position: absolute; inset: 0px; background: linear-gradient(rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.6) 100%); z-index: 1; pointer-events: none; }




.one_title { margin: 0px; font-size: 96px; line-height: 1; letter-spacing: 12px; font-weight: 700; color: rgb(255, 255, 255); z-index: 2; text-transform: uppercase; font-family: Montserrat, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; text-shadow: rgba(0, 0, 0, 0.4) 0px 4px 24px; }




.h2 { font-size: 26px; font-weight: 600; color: rgb(34, 34, 34); margin: 0px auto; line-height: 1.4; font-family: Montserrat-Light; }






.width80 { width: 80%; max-width: 900px; margin: 0px auto; }


.width70 { width: 70%; max-width: 800px; margin: 0px auto; }




.margin { margin: 0px auto; }


.section-container { max-width: 1400px; margin: 0px auto; padding: 0px 30px; }


.bgfff { background: rgb(255, 255, 255); }


.data-card { transition: transform 0.3s, box-shadow 0.3s; }


.data-card:hover { transform: translateY(-4px); box-shadow: rgba(0, 0, 0, 0.08) 0px 12px 32px; }


.scenario-card { transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.2, 1), box-shadow 0.4s; min-height: 220px; }


.product-card { transition: transform 0.3s, box-shadow 0.3s; }


.product-card:hover { transform: translateY(-4px); box-shadow: rgba(0, 0, 0, 0.08) 0px 12px 36px; }


@keyframes breathe { 
  0%, 100% { opacity: 1; transform: scale(1); box-shadow: rgba(var(--c-accent-2), 0.4) 0px 2px 8px; }
  50% { opacity: 0.7; transform: scale(1.15); box-shadow: rgba(var(--c-accent-2), 0.6) 0px 2px 16px; }
}


.stat-card-gradient { transition: 0.3s; cursor: pointer; }


.stat-card-gradient:hover { background: linear-gradient(135deg, rgb(var(--c-accent-2)) 0%, rgb(var(--c-primary-2)) 100%) !important; border-color: transparent !important; box-shadow: rgba(var(--c-accent-2), 0.25) 0px 8px 32px !important; }


.stat-card-gradient:hover .stat-card-num, .stat-card-gradient:hover .stat-card-label { color: rgb(255, 255, 255) !important; }






.product-card-hover:hover { background: linear-gradient(135deg, rgb(var(--c-success)) 0%, rgb(var(--c-info-2)) 100%) !important; border-color: transparent !important; }




.product-card-hover:hover .name-tag-text { background: linear-gradient(90deg, rgb(var(--c-success)), rgb(var(--c-info-2))) text; -webkit-text-fill-color: transparent; font-weight: 700; }


.product-card-hover:hover .info-label { color: rgb(255, 255, 255) !important; }


.product-card-hover:hover .info-value { color: rgb(255, 255, 255) !important; }


.product-card-hover:hover .info-stars { color: rgb(255, 255, 255) !important; }


.product-card-hover:hover .product-badge { color: rgb(255, 255, 255) !important; }




.product-card-hover:hover .product-image-wrap { filter: drop-shadow(rgba(0, 0, 0, 0.3) 0px 12px 30px); }


.cta-btn { transition: 0.3s; }


.cta-btn:hover { background: rgb(34, 34, 34) !important; color: rgb(255, 255, 255) !important; border-color: transparent !important; box-shadow: rgba(0, 0, 0, 0.3) 0px 4px 16px !important; }


.cta-btn:hover .cta-btn-icon { filter: brightness(0) invert(1); transition: 0.3s; }




.marker-item .marker-card { transition: 0.4s; background: rgb(255, 255, 255) !important; color: rgb(51, 51, 51) !important; box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 16px !important; }


.marker-item .marker-title { transition: 0.4s; background: linear-gradient(90deg, rgb(var(--c-accent-tint-2)), rgb(var(--c-primary))) text !important; -webkit-text-fill-color: transparent !important; margin-bottom: 0px !important; }


.marker-item .marker-desc { max-height: 0px; opacity: 0; overflow: hidden; transition: max-height 0.4s, opacity 0.3s; margin: 0px; padding: 0px; color: rgb(102, 102, 102) !important; }


.marker-item.marker-active .marker-card { transform: translateY(-2px); background: linear-gradient(90deg, rgb(var(--c-accent-tint-2)), rgb(var(--c-primary))) !important; color: rgb(255, 255, 255) !important; box-shadow: rgba(var(--c-accent-2), 0.4) 0px 12px 40px !important; }


.marker-item.marker-active .marker-title { background: none !important; -webkit-text-fill-color: rgb(255, 255, 255) !important; color: rgb(255, 255, 255) !important; margin-bottom: 8px !important; }




.marker-trigger { transition: transform 0.3s; }




@media (max-width: 768px) {
  


  


  
.section-container { padding: 0px 16px !important; max-width: 100% !important; }


  


  


  


  
.productPageContent { min-height: 320px !important; padding: 20px 0px !important; }


  


  
.one_title { font-size: 28px !important; letter-spacing: 2px !important; line-height: 1.2 !important; padding: 0px 16px !important; }


  


  


  


  
.animate-section.bgfff { padding: 40px 0px !important; }


  


  


  


  


  


  


  


  


  


  


  


  
.width47.right > div[style*="position: absolute"] { top: 20px !important; padding: 20px 16px 0px !important; }


  


  
.animate-section.overflow.width100 { padding: 40px 0px 0px !important; }


  


  


  
.port-image-wrapper > div[style*="position: absolute"] { transform: scale(0.65) !important; transform-origin: left top !important; }


  


  


  


  


  


  


  


  
.scenario-section-wrapper { padding: 40px 0px !important; }


  


  


  


  


  
.tbody.width100 { overflow-x: auto !important; display: block !important; flex-direction: unset !important; align-items: unset !important; gap: unset !important; }


  


  
.tbody.width100 ul { display: flex; flex-direction: column; min-width: 600px; width: max-content; margin: 0px; padding: 0px; }


  
.tbody.width100 ul li { display: flex; flex-wrap: nowrap; align-items: center; border-bottom: 1px solid rgb(232, 232, 232); padding: 8px 0px; gap: 0px; flex-direction: row !important; }


  
.tbody.width100 ul li span { flex: 1 1 0%; min-width: 120px; padding: 8px 12px; text-align: start; font-size: 12px; white-space: normal; width: auto !important; }


  


  


  


  


  


  


  


  


  


  


  


  
.animate-section.overflow.width100[style*="padding: 40px"] { padding: 30px 0px !important; }


  


  


  
.animate-section.overflow.width100 > div[style*="fontSize: '170px'"] { font-size: 40px !important; letter-spacing: 0px !important; }


  
.animate-section.overflow.width100[style*="padding: 80px"] { padding: 40px 0px !important; }


  


  


  


  
}


@media (min-width: 769px) and (max-width: 1024px) {
  


  
.section-container { padding: 0px 24px !important; max-width: 100% !important; }


  


  


  


  


  
.animate-section.bgfff { padding: 60px 0px !important; }


  


  


  


  


  


  


  


  


  


  


  


  


  
.width47.right > div[style*="position: absolute"] { top: 40px !important; padding: 30px 20px 0px !important; }


  


  
.animate-section.overflow.width100 { padding: 60px 0px 0px !important; }


  


  
.port-image-wrapper > div[style*="position: absolute"] { transform: scale(0.85) !important; transform-origin: left top !important; }


  


  


  


  


  


  
.scenario-section-wrapper { padding: 60px 0px !important; }


  


  


  


  


  
.animate-section.bgfff.overflow.width100 { padding: 60px 0px !important; }


  


  


  


  


  


  


  


  
.animate-section.overflow.width100[style*="padding: 40px"] { padding: 35px 0px !important; }


  


  


  


  
.animate-section.overflow.width100[style*="padding: 80px"] { padding: 60px 0px !important; }


  


  


  


  
}


@media (min-width: 1920px) {
  
.section-container { max-width: 1600px !important; padding: 0px 40px !important; }


  


  


  


  


  


  


  


  


  


  


  


  


  


  
}


.flex_box_container { display: flex; align-items: center; justify-content: center; background: url("/images/ea90637412e74e7e.png") 100% center / 100% no-repeat; padding: 0px 20px; }




.small-label .gradient-text { background: linear-gradient(90deg, rgb(var(--c-accent-tint-2)), rgb(var(--c-primary))) text; -webkit-text-fill-color: transparent; display: inline; }




.sectionfirst2 { font-weight: 700; font-size: 16px; line-height: 24px; text-align: start; color: rgb(37, 37, 37); }


.sectionfirst3 { font-weight: 700; font-size: 14px; line-height: 20px; text-align: center; color: rgb(121, 121, 121); }


.sectionfirst4 { font-weight: 400; font-size: 14px; line-height: 20px; text-align: center; color: rgb(102, 102, 102); }






@media screen and (min-width: 1921px) {
  
.productPageRoot .section-container { max-width: 1600px; padding: 0px 80px; }


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  
}


@media screen and (min-width: 768px) and (max-width: 1280px) {
  
.productPageRoot .section-container { padding: 0px 40px; width: 100%; }


  


  


  


  
.productPageRoot .product-intro-section { padding: 40px 0px !important; }


  


  


  


  


  


  


  


  


  


  


  


  


  
.productPageRoot .challenges-title { font-size: 36px !important; margin: 30px 0px 8px !important; }


  
.productPageRoot .challenge-item { padding: 30px 0px !important; }


  


  
.productPageRoot .scenarios-section { padding: 40px 0px 50px !important; }


  
.productPageRoot .scenarios-title { font-size: 36px !important; margin: 0px 0px 30px !important; }


  


  


  
.productPageRoot .scenario-menu-item { flex: 0 0 auto !important; min-width: 150px !important; border-bottom: none !important; border-inline-end: 1px solid rgb(232, 232, 232) !important; }


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  
}


@media screen and (max-width: 767px) {
  
.productPageRoot .section-container { padding: 0px 16px; width: 100%; }


  


  


  


  
.productPageRoot .product-intro-section { padding: 30px 0px !important; }


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  
.productPageRoot .challenges-title { font-size: 26px !important; margin: 24px 0px 8px !important; }


  


  
.productPageRoot .challenge-item { padding: 20px 0px !important; }


  


  


  


  
.productPageRoot .scenarios-section { padding: 30px 0px 40px !important; }


  
.productPageRoot .scenarios-title { font-size: 26px !important; margin: 0px 0px 24px !important; }


  


  


  
.productPageRoot .scenario-menu-item { flex: 0 0 auto !important; min-width: unset !important; padding: 16px 14px !important; border-bottom: 1px solid rgb(232, 232, 232) !important; border-inline-end: none !important; }


  


  


  


  


  


  


  


  


  


  
.productPageRoot .tbody { overflow-x: auto; margin: 0px -16px; padding: 0px 16px; }


  


  
.productPageRoot .tbody li { display: flex; white-space: nowrap; border-bottom: 1px solid rgb(238, 238, 238); background: rgb(250, 250, 250); flex-wrap: nowrap !important; padding: 14px 4px !important; }


  
.productPageRoot .tbody li:first-child { background: rgb(240, 240, 240); border-bottom: 2px solid rgb(221, 221, 221); font-weight: 700; }


  
.productPageRoot .tbody li:first-child span { font-size: 15px !important; color: rgb(51, 51, 51); }


  
.productPageRoot .tbody li:not(:first-child) span:first-child { font-weight: 600; color: rgb(85, 85, 85); font-size: 14px !important; }


  
.productPageRoot .tbody li:not(:first-child) span:not(:first-child) { font-size: 13px !important; color: rgb(102, 102, 102); }


  
.productPageRoot .tbody li span { min-width: 150px; text-align: start; padding: 6px 10px; word-break: break-word; white-space: normal; flex: 0 0 auto !important; }


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  
}


.productPageContent { width: 100%; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; text-align: center; color: rgb(255, 255, 255); padding: 40px 0px; height: 400px !important; }


.productPageContent > .bg-img { display: block; position: absolute; inset: 0px; width: 100%; object-fit: cover; object-position: center center; z-index: 0; height: 400px !important; }


.one_title { margin: 0px; font-size: 64px; line-height: 1; letter-spacing: 8px; font-weight: 700; color: rgb(255, 255, 255); z-index: 2; text-transform: uppercase; font-family: Montserrat, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; text-shadow: rgba(0, 0, 0, 0.4) 0px 4px 24px; }




.h2 { font-size: 22px; font-weight: 600; color: rgb(34, 34, 34); margin: 0px auto; line-height: 1.4; font-family: Montserrat-Light; }


.section-container { margin: 0px auto; padding: 0px 30px; }








.feature-card-header:hover { box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 16px; }


.feature-card-active .feature-card-header { box-shadow: rgba(var(--c-primary-2), 0.25) 0px 6px 20px; }




.feature-card-body { background: rgb(246, 246, 246); border-radius: 0px 0px 10px 10px; }




.challenge-card:hover:not(.challenge-card-active) { box-shadow: rgba(0, 0, 0, 0.12) 0px 6px 20px; transform: translateY(-4px); }


.challenge-card-active { box-shadow: rgba(var(--c-primary-2), 0.3) 0px 8px 24px; }


.cta-info-card::after { content: ""; position: absolute; inset-inline-end: 0px; top: 50%; transform: translateY(-50%); width: 1px; height: 90%; background: linear-gradient(rgb(var(--c-accent-tint-2)), rgb(var(--c-primary-2))); }




@keyframes fadeInOut { 
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
  15% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  85% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
}


@media screen and (min-width: 1921px) {
  
.productPageRoot .section-container { max-width: 1600px; padding: 0px 80px; }


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  
}


@media screen and (min-width: 768px) and (max-width: 1280px) {
  
.productPageRoot .section-container { padding: 0px 40px; width: 100%; }


  


  


  


  


  
.productPageRoot .width50, .productPageRoot .width47 { width: 100%; float: none; padding-inline-end: 0px; }


  


  


  


  


  


  


  


  


  
.productPageRoot .scenario-stack-container { max-width: 560px; width: 100% !important; height: 380px !important; }


  


  


  
.productPageRoot .scenario-carousel-wrap { padding: 0px 48px !important; }


  
.productPageRoot .product-card { text-align: center; flex-direction: column !important; padding: 24px !important; gap: 20px !important; }


  
.productPageRoot .product-name-tag { width: 100%; font-size: 15px !important; padding: 10px 20px !important; }


  
.productPageRoot .product-info-row { flex-wrap: wrap; font-size: 14px !important; justify-content: center !important; }


  


  


  


  
.productPageRoot .cta-main-btn { flex-direction: column; align-items: center; text-align: center; max-width: 100% !important; padding: 20px 24px !important; gap: 16px !important; }


  
.productPageRoot .cta-main-btn img:last-child { width: 60px !important; height: 60px !important; margin-top: 0px !important; }


  


  


  


  


  


  


  


  


  


  
.productPageRoot .tbody li span { min-width: 120px; flex: 1 1 auto !important; }
}


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


  


  
.section-container { padding: 0px 16px !important; width: 100% !important; }


  
.productPageRoot .width100:not(.tbody, .cert-list) { display: flex !important; flex-flow: column !important; align-items: stretch !important; gap: 20px !important; }


  
.width50, .width47, .width47.right { margin-bottom: 20px; width: 100% !important; float: none !important; }


  
.productPageContent { height: 280px !important; padding: 30px 0px !important; }


  
.one_title { font-size: 26px !important; letter-spacing: 2px !important; line-height: 1.2 !important; padding: 0px 16px !important; }


  


  


  


  
.animate-section[style*="padding: 80px"] { padding: 40px 0px !important; }


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  
.challenge-card { height: auto !important; min-height: 70px !important; font-size: 13px !important; padding: 14px 10px !important; border-radius: 8px !important; flex: 1 1 calc(33.333% - 8px) !important; min-width: 100px !important; transition: 0.3s !important; display: flex !important; align-items: center !important; justify-content: center !important; }


  


  


  


  


  


  


  


  


  


  
div[style*="padding: 0 60px"] { padding: 0px 40px !important; }


  
.tbody { overflow-x: auto !important; display: block !important; flex-direction: unset !important; align-items: unset !important; gap: unset !important; }


  
.tbody ul { display: flex; flex-direction: column; min-width: 600px; width: max-content; margin: 0px; padding: 0px; }


  
.tbody li { display: flex; align-items: center; border-bottom: 1px solid rgb(232, 232, 232); flex-flow: row !important; padding: 8px 10px !important; }


  
.tbody li span { flex: 1 1 0%; min-width: 120px; padding: 8px 12px; white-space: normal; font-size: 13px !important; width: auto !important; }


  


  


  


  
.product-card { text-align: center; flex-direction: column !important; padding: 20px !important; gap: 16px !important; }


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  
}


@media screen and (min-width: 1921px) {
  
.productPageRoot .section-container { max-width: 1600px; padding: 0px 80px; }


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  
}


@media screen and (min-width: 768px) and (max-width: 1280px) {
  
.productPageRoot .section-container { padding: 0px 40px; width: 100%; }


  


  


  


  


  


  


  


  
.productPageRoot .spec-cards-wrap { margin-top: 10px; flex: 1 1 100% !important; max-height: none !important; border-inline-start: none !important; border-top: 1px solid rgb(232, 232, 232) !important; }


  


  


  


  
.productPageRoot .challenges-section { padding: 50px 0px 60px !important; }


  


  


  


  


  
.productPageRoot .scenarios-section { padding: 50px 0px 60px !important; }


  


  
.productPageRoot .scenario-item { flex: 0 0 calc(50% - 1px) !important; padding: 0px 20px !important; }


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  
.productPageRoot .cta-section { padding: 50px 0px 0px !important; }


  


  


  


  


  


  
}


@media screen and (max-width: 767px) {
  
.productPageRoot .section-container { padding: 0px 16px; width: 100%; }


  


  


  


  
.productPageRoot .intro-section { padding: 30px 0px !important; }


  


  


  


  


  


  


  
.productPageRoot .spec-cards-wrap { margin-top: 8px; flex: 1 1 100% !important; max-height: none !important; border-inline-start: none !important; border-top: 1px solid rgb(232, 232, 232) !important; }


  


  


  


  


  
.productPageRoot .challenges-section { padding: 40px 0px 50px !important; }


  
.productPageRoot .challenges-title { font-size: 26px !important; margin: 0px 0px 24px !important; }


  


  


  


  


  


  


  
.productPageRoot .scenarios-section { padding: 40px 0px 50px !important; }


  
.productPageRoot .scenarios-title { font-size: 26px !important; margin: 0px 0px 24px !important; }


  


  
.productPageRoot .scenario-item { flex: 1 1 100% !important; padding: 0px !important; margin-bottom: 20px !important; }


  


  


  


  


  


  


  


  


  


  
.productPageRoot .tbody { overflow-x: auto; margin: 0px -16px; padding: 0px 16px; }


  


  
.productPageRoot .tbody li { display: flex; white-space: nowrap; border-bottom: 1px solid rgb(238, 238, 238); background: rgb(250, 250, 250); flex-wrap: nowrap !important; padding: 14px 4px !important; }


  
.productPageRoot .tbody li:first-child { background: rgb(240, 240, 240); border-bottom: 2px solid rgb(221, 221, 221); }


  
.productPageRoot .tbody li:first-child span { font-weight: 700; color: rgb(51, 51, 51); font-size: 15px !important; }


  
.productPageRoot .tbody li:not(:first-child) span:first-child { font-weight: 600; color: rgb(85, 85, 85); font-size: 14px !important; }


  
.productPageRoot .tbody li:not(:first-child) span:not(:first-child) { font-size: 13px !important; color: rgb(102, 102, 102); }


  
.productPageRoot .tbody li span { min-width: 150px; text-align: start; padding: 6px 10px; word-break: break-word; white-space: normal; flex: 0 0 auto !important; }


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  
.productPageRoot .cta-section { padding: 40px 0px 0px !important; }


  


  


  


  


  


  


  
.productPageRoot .cta-main-btn-arrow { width: 48px !important; height: 48px !important; margin-top: 0px !important; }


  


  


  
}


.flex_box_container { display: flex; align-items: center; justify-content: center; background: url("/images/f12a3731ddb81d9d.png") 100% center / 100% no-repeat; padding: 0px 20px; }








.productPageContent > .bg-img { display: block; position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; object-position: 0% 45%; transform-origin: center center; animation: 20s ease-out 0s infinite normal none running bgZoomIn; z-index: 0; }


.one_title { font-weight: 700; font-size: 64px; line-height: 100%; text-align: center; text-transform: uppercase; color: rgb(255, 255, 255); font-family: Montserrat-Bold; }


.fouthteenfirstbox { width: 366px; height: 64px; border-radius: 40px; display: flex; justify-content: center; align-items: center; gap: 12px; margin: 0px auto; }


.fouthteenfirsttext { font-weight: 400; font-size: 20px; line-height: 100%; text-align: center; text-transform: capitalize; color: rgb(255, 255, 255); }


.sixteenfirsttext { font-weight: 400; font-size: 16px; line-height: 24px; text-align: center; color: rgb(255, 255, 255); }




.sixteenfirstbox::before { content: ""; position: absolute; inset: 0px; padding: 2px; border-radius: inherit; background: linear-gradient(to right, rgb(var(--c-accent)), rgb(var(--c-primary))); mask: linear-gradient(rgb(0, 0, 0) 0px, rgb(0, 0, 0) 0px) content-box exclude, linear-gradient(rgb(0, 0, 0) 0px, rgb(0, 0, 0) 0px); z-index: -1; }




.sixteenfirstbox2::before { content: ""; position: absolute; top: 0px; inset-inline-start: 0px; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.9); z-index: 1; pointer-events: none; }






.sixteensectiontext { font-weight: 400; font-size: 20px; line-height: 100%; text-transform: capitalize; margin-top: 10px; }




.fade-out { animation: 0.4s ease-in-out 0s 1 normal forwards running fadeOut; }


.fade-in { animation: 0.4s ease-in-out 0s 1 normal forwards running fadeIn; }


@keyframes fadeOut { 
  0% { opacity: 1; }
  100% { opacity: 0; }
}


.seventeentext { font-weight: 400; font-size: 24px; line-height: 100%; text-transform: capitalize; color: rgb(37, 37, 37); }


.support-table { width: 100%; background: rgb(255, 255, 255); position: relative; }


.support-table .support-vline { position: absolute; top: 0px; bottom: 0px; width: 1px; z-index: 10; }










.support-table .support-header-cell { flex: 1 1 0%; display: flex; justify-content: center; align-items: center; padding: 16px 20px; }


.support-table .support-header-border { display: inline-block; padding: 10px 36px; border-radius: 30px; border: 1px solid transparent; background: linear-gradient(white, white) padding-box padding-box, linear-gradient(to right, rgb(var(--c-primary)), rgb(var(--c-accent))) border-box border-box; }


.support-table .support-header-border span { font-size: 16px; font-weight: 500; background: linear-gradient(90deg, rgb(var(--c-primary)), rgb(var(--c-accent))) text; -webkit-text-fill-color: transparent; color: transparent; }




.support-table .support-body::before { content: ""; position: absolute; top: 0px; inset-inline-start: 0px; inset-inline-end: 0px; height: 1px; background: linear-gradient(to right, transparent 0%, rgba(var(--c-accent), 0.3) 15%, rgba(var(--c-primary), 0.5) 50%, rgba(var(--c-accent), 0.3) 85%, transparent 100%); }


.support-table .support-vline { position: absolute; top: 0px; bottom: 0px; width: 2px; background: linear-gradient(rgba(var(--c-accent), 0.2) 0%, rgba(var(--c-primary), 0.5) 25%, rgba(var(--c-accent), 0.6) 50%, rgba(var(--c-primary), 0.5) 75%, rgba(var(--c-accent), 0.2) 100%); }


.support-table .support-col { flex: 1 1 0%; display: flex; flex-direction: column; }




.support-table .support-row-title { color: rgb(0, 0, 0); font-weight: 600; font-size: 18px; }


.support-table .support-row-desc { color: rgb(152, 152, 152); font-size: 15px; line-height: 1.6; }


.support-table .support-row-link { color: rgb(var(--c-eco-3)); font-size: 15px; font-weight: 500; cursor: pointer; }


.support-table .support-row-link a { color: rgb(var(--c-eco-3)); text-decoration: none; }


.support-table .support-row-title::before, .support-table .support-row-desc::before, .support-table .support-row-link::before { content: ""; position: absolute; bottom: 0px; inset-inline-start: 0px; inset-inline-end: 0px; height: 2px; background: linear-gradient(to right, rgba(var(--c-accent), 0.3) 0%, rgba(var(--c-primary), 0.5) 50%, rgba(var(--c-accent), 0.3) 100%); }




.support-table .support-row-link::after { content: " →"; margin-inline-start: 4px; }


.nineteen-stack-wrapper { display: flex; flex-direction: column; align-items: center; margin-top: 40px; position: relative; padding: 30px 0px; }


.ninteenfirstbox { width: 100%; max-width: 1400px; height: 138px; border-radius: 8px; background: rgb(245, 245, 245); box-shadow: rgba(var(--c-primary-8), 0.3) 0px 0px 20px 0px; display: flex; align-items: center; justify-content: center; text-align: center; padding-block: 40px; padding-inline: 104px 40px; position: relative; cursor: pointer; transition: 0.5s cubic-bezier(0.4, 0, 0.2, 1); margin-bottom: -60px; }


.ninteenfirstbox:last-child { margin-bottom: 0px; }


.ninteenfirstbox .ninteen-icon-wrap { position: absolute; inset-inline-start: 50%; top: 50%; transform: translate(-50%, -50%); width: 48px; height: 104px; display: flex; align-items: center; justify-content: center; transition: 0.5s cubic-bezier(0.4, 0, 0.2, 1); z-index: 1; }


.ninteenfirstbox .ninteen-icon { width: 100%; height: 80%; object-fit: contain; filter: grayscale(100%) brightness(0.8); opacity: 0.6; transition: 0.5s cubic-bezier(0.4, 0, 0.2, 1); }


.ninteenfirstbox .ninteen-text { font-size: 20px; color: rgb(121, 121, 121); font-weight: 500; text-transform: capitalize; transition: 0.5s cubic-bezier(0.4, 0, 0.2, 1); z-index: 2; position: relative; }


.ninteenfirstbox.ninteen-active { background: linear-gradient(90deg, rgb(var(--c-accent)) 0%, rgb(var(--c-primary)) 100%); box-shadow: rgba(var(--c-accent), 0.5) 0px 8px 40px 0px; margin-bottom: 16px; margin-top: 16px; }






.ninteenfirstbox.ninteen-active .ninteen-text { color: rgb(255, 255, 255); font-weight: 600; }




.tenteen-arrow { width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgb(194, 194, 194); background: rgb(255, 255, 255); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.3s; flex-shrink: 0; z-index: 10; }


.tenteen-arrow:hover { border-color: rgb(var(--c-accent)); background: linear-gradient(135deg, rgba(var(--c-accent), 0.1), rgba(var(--c-primary), 0.1)); }








.tenteenbox { width: 439px; height: 176px; padding: 32px; background-size: cover; background-position: center center; border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; position: relative; cursor: pointer; transition: 0.5s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; flex-shrink: 0; }


.tenteenbox::before { content: ""; position: absolute; top: 0px; inset-inline-start: 0px; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 1; pointer-events: none; transition: 0.3s; }








.tenteenboxtitle { font-size: 16px; font-weight: 600; color: rgb(255, 255, 255); text-align: center; transition: 0.3s; }




.tenteenboxdes { font-size: 16px; color: rgb(255, 255, 255); opacity: 0; transform: translateY(10px); transition: 0.3s; }


.tenteenbox.tenteen-active .tenteenboxdes { opacity: 1; transform: translateY(0px); }


@media (max-width: 768px) {
  


  


  


  
.one_title { font-size: 28px !important; line-height: 1.2 !important; padding: 0px 16px !important; }


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  
.support-table-scroll { width: 100% !important; overflow-x: auto !important; }


  


  


  


  


  


  


  


  


  


  


  


  


  
.mt30[style*="flexWrap"] > .relative { width: 100% !important; flex-direction: column !important; gap: 0px !important; height: auto !important; }


  


  
.mt30[style*="flexWrap"] > .relative > div:last-child { display: flex; justify-content: center; align-items: center; margin-top: -20px; padding: 0px 20px; position: relative !important; inset-inline-end: auto !important; top: auto !important; width: 100% !important; height: 180px !important; }


  
.mt30[style*="flexWrap"] > .relative > div:last-child > img { object-fit: contain; max-width: 70% !important; max-height: 100% !important; }


  


  


  


  


  


  


  


  


  


  


  


  


  
.tenteenbox.tenteen-active { width: 85% !important; height: 160px !important; box-shadow: rgba(var(--c-primary), 0.3) 0px 4px 20px !important; }


  


  


  


  
.bgfff[style*="padding:100px"] { padding: 50px 0px !important; }


  
.sixteenfirstbox2[style*="padding:100px"] { padding: 50px 0px !important; }


  
.tenteenbox::before { background: linear-gradient(rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.7) 40%, rgba(0, 0, 0, 0.6) 100%); }


  
.tenteenbox.tenteen-active::before { background: linear-gradient(rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.7) 40%, rgba(0, 0, 0, 0.5) 100%); }


  
.ai-chat-modal { width: 100% !important; height: 100% !important; inset: 0px !important; border-radius: 0px !important; }


  


  


  


  


  


  


  


  


  
}


@media (min-width: 769px) and (max-width: 1024px) {
  


  


  


  


  


  
.section-container { padding: 0px 24px !important; max-width: 100% !important; }


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  
.mt30[style*="flexWrap"] > .relative > div:last-child > img { object-fit: contain; max-width: 100% !important; max-height: 100% !important; }


  


  


  


  


  


  


  


  


  


  


  


  


  
.bgfff[style*="padding:100px"] { padding: 70px 0px !important; }


  
.sixteenfirstbox2[style*="padding:100px"] { padding: 70px 0px !important; }


  


  


  


  


  


  


  


  
}


@media (min-width: 1920px) {
  
.section-container { max-width: 1600px !important; margin: 0px auto !important; }


  


  


  


  


  


  


  


  


  
}


.flex_box_container { display: flex; align-items: center; justify-content: center; background: url("/images/50b8f9d8e73ca388.png") 100% center / 100% no-repeat; padding: 0px 20px; }




.productPageContent > .bg-img { display: block; position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; object-position: 0% 35%; transform-origin: center center; animation: 20s ease-out 0s infinite normal none running bgZoomIn; z-index: 0; }


.productPageContent::before { content: ""; position: absolute; top: 38%; inset-inline-start: 65%; transform: translate(-50%, -50%) rotateY(-25deg) rotateX(-10deg) rotateZ(-53deg); width: 257px; height: 357px; background: url("/images/656e99f702efdccf.png") center center / contain no-repeat; z-index: 2; pointer-events: none; }


.productPageContent::after { content: ""; position: absolute; top: 0px; inset-inline-start: 0px; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.15); z-index: 1; pointer-events: none; }




.one_title { font-family: Montserrat-Bold; font-weight: 700; font-size: 64px; text-transform: uppercase; color: rgb(255, 255, 255); }


.one_nav { font-weight: 400; font-size: 14px; line-height: 144%; color: rgb(255, 255, 255); text-align: center; margin-top: 40px; }


.section-title { font-weight: 400; font-size: 48px; line-height: 60px; text-align: center; text-transform: capitalize; }


.firstsection { width: 442px; background: url("/images/3cc1519344be73cf.png") 100% 110% / 100% 50% no-repeat; display: flex; align-items: center; justify-content: center; padding: 20px; }




.firstsection-icon { width: 72px; height: 72px; background-color: rgb(245, 245, 245); border-radius: 16px; display: flex; justify-content: center; align-items: center; flex-shrink: 0; }




.secondsection { width: 1258px; height: 86px; border-radius: 100px; background-color: rgb(245, 245, 245); justify-content: center; gap: 32px; }




.fade-border-box { position: relative; padding: 37px 24px; background: rgb(255, 255, 255); border-radius: 8px; margin-bottom: 24px; }


.fade-border-box::before { content: ""; position: absolute; inset: 0px; border-radius: 8px; padding: 1px; background: linear-gradient(90deg, rgb(229, 229, 229) 0%, rgb(229, 229, 229) 60%, transparent 100%); mask: linear-gradient(rgb(255, 255, 255) 0px, rgb(255, 255, 255) 0px) content-box exclude, linear-gradient(rgb(255, 255, 255) 0px, rgb(255, 255, 255) 0px); pointer-events: none; }


.fade-border-box span { font-family: Montserrat; font-weight: 500; font-size: 16px; line-height: 28px; }


.download-list { width: 100%; height: 100%; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: rgb(232, 232, 232) transparent; }






.download-list::-webkit-scrollbar-thumb { background: rgb(232, 232, 232); border-radius: 10px; min-height: 339px; max-height: 339px; }


.download-list { scrollbar-width: thin; scrollbar-color: rgb(232, 232, 232) transparent; }


.fade-border-box { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 37px 24px; margin-bottom: 12px; background: linear-gradient(to right, rgb(var(--c-accent-tint-9)), rgba(255, 255, 255, 0)); border-radius: 12px; cursor: pointer; transition: 0.3s; }


.fade-border-box::before { content: ""; position: absolute; inset: 0px; border-radius: 12px; padding: 1px; background: linear-gradient(90deg, rgb(229, 229, 229) 0%, rgb(229, 229, 229) 50%, transparent 100%); mask: linear-gradient(rgb(255, 255, 255) 0px, rgb(255, 255, 255) 0px) content-box exclude, linear-gradient(rgb(255, 255, 255) 0px, rgb(255, 255, 255) 0px); pointer-events: none; }


.download-content { display: flex; flex-direction: column; gap: 4px; flex: 1 1 0%; }


.download-title { font-size: 16px; font-weight: 500; color: rgb(51, 51, 51); transition: 0.3s; }


.download-desc { font-size: 14px; color: rgb(102, 102, 102); transition: 0.3s; }


.fade-border-box.active .download-title, .fade-border-box.active .download-desc { background: linear-gradient(to right, rgb(var(--c-accent-2)) 0%, rgb(var(--c-eco)) 50%, rgb(var(--c-primary-2)) 100%) text; color: transparent; }


.download-arrow { flex-shrink: 0; margin-inline-start: 16px; color: rgb(var(--c-info-4)); transition: 0.3s; }


.section-item1 { font-family: Montserrat; font-weight: 600; font-size: 20px; line-height: 100%; color: rgb(37, 37, 37); }


.secondsectionright1 { font-weight: 500; font-size: 16px; color: rgb(117, 117, 117); }


.secondsectionright2 { font-weight: 500; font-size: 20px; line-height: 100%; text-transform: capitalize; color: rgb(255, 255, 255); }






.thirdsectionbanner::before { content: ""; position: absolute; top: 0px; inset-inline-start: 0px; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.6); z-index: 1; pointer-events: none; }




.thirdarray { width: 228px; height: 519px; border-radius: 12px; border: 1px solid rgb(188, 188, 188); padding: 24px; position: relative; overflow: hidden; background: rgba(var(--c-accent-tint-4), 0.4); backdrop-filter: blur(20px); margin-top: 40px; }


.thirdarray::before { content: ""; position: absolute; top: -50%; inset-inline-start: -50%; width: 200%; height: 200%; background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.15) 0%, transparent 60%); pointer-events: none; }






.thirdarray-title { font-weight: 600; font-size: 18px; line-height: 100%; height: 55px; }


.thirdarray-desc { font-weight: 700; font-size: 24px; line-height: 30px; color: rgb(37, 37, 37); }




.thirdarrayline { width: 100%; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.8) 30%, rgb(255, 255, 255) 50%, rgba(255, 255, 255, 0.8) 70%, transparent 100%); margin-top: 10px; }


.thirdarray-title2 { font-family: Montserrat; font-weight: 500; font-size: 24px; line-height: 30px; color: rgb(243, 243, 243); margin-top: 10px; }


.thirdarray-des1 { padding: 6px 12px; border-radius: 6px; border: 1px solid rgb(213, 213, 213); }


.thirdarray-des1 span { font-weight: 500; font-size: 16px; line-height: 100%; text-transform: capitalize; color: rgb(243, 243, 243); text-align: start; }


.thirdarray-desc2 { padding: 6px 12px; border-radius: 6px; border: 1px solid rgb(213, 213, 213); }


.thirdarray-desc2 span { font-weight: 500; font-size: 16px; line-height: 100%; text-transform: capitalize; color: rgb(243, 243, 243); text-align: start; }


.thirdarray-desc3 { padding: 6px 12px; border-radius: 6px; border: 1px solid rgb(213, 213, 213); }


.thirdarray-desc3 span { font-weight: 500; font-size: 16px; line-height: 100%; text-transform: capitalize; color: rgb(243, 243, 243); text-align: start; }


.thirdarray-desc4 { padding: 6px 12px; border-radius: 6px; border: 1px solid rgb(213, 213, 213); }


.thirdarray-desc4 span { font-weight: 500; font-size: 16px; line-height: 100%; text-transform: capitalize; color: rgb(243, 243, 243); }






.third-flex-item { width: 15%; height: 550px; border-radius: 12px; border: 1px solid rgb(188, 188, 188); padding: 24px; position: relative; overflow-y: auto; background: rgba(var(--c-accent-tint-4), 0.4); backdrop-filter: blur(20px); transition: width 0.4s; flex-shrink: 0; cursor: pointer; display: flex; flex-direction: column; }




.thirdarray-default-wrapper, .thirdarray-expanded-wrapper { display: grid; transition: grid-template-rows 0.4s; min-height: 0px; }






.thirdarray-default, .thirdarray-expanded { min-height: 0px; overflow: hidden; }












.fourth-card { width: 100%; background-color: rgb(245, 245, 245); border-radius: 12px; overflow: hidden; transition: 0.4s; cursor: pointer; }


.fourth-card .fourth-card-img-wrap { width: 100%; overflow: hidden; transition: 0.4s; }




.fourth-card-content { display: flex; flex-direction: column; gap: 20px; padding: 20px; width: 100%; background: rgb(245, 245, 245); }






.fourth-card-expanded .fourth-card-desc { display: block; animation: 0.3s ease 0s 1 normal none running fadeIn; }


.fifthsection { font-weight: 600; font-size: 32px; line-height: 100%; text-align: center; }


.fifthtobg { background: linear-gradient(to right, rgb(var(--c-accent-2)) 0%, rgb(var(--c-eco)) 50%, rgb(var(--c-primary-2)) 100%); position: relative; }


.fifthtobg::before { content: ""; position: absolute; top: 0px; inset-inline-start: 0px; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.5); z-index: 1; pointer-events: none; border-radius: inherit; }




.fifthsectiontext { font-weight: 600; font-size: 24px; line-height: 100%; margin-bottom: 80px; }










.fifth-desc { flex: 1 1 0%; }


.fifthsectiontext1 { font-size: 32px; line-height: 100%; }


.sixthsection { background: linear-gradient(rgb(255, 255, 255) 50%, rgb(var(--c-primary-tint-7)) 100%); box-sizing: border-box; }


.sixthsectiontext { font-weight: 600; font-size: 26px; line-height: 26px; text-transform: capitalize; color: rgb(121, 121, 121); }


.sixthsectiontext1 { font-size: 22px; line-height: 100%; color: rgb(37, 37, 37); }


.sixthsectiontitle { font-family: Montserrat; font-weight: 500; font-size: 20px; line-height: 100%; text-transform: capitalize; color: rgb(30, 30, 30); margin-top: 20px; margin-bottom: 20px; }


.sixth-title-hover { color: rgb(37, 37, 37) !important; }


@media screen and (max-width: 1023px) and (min-width: 768px) {
  
html, body, #__next, .productPageRoot { overflow-x: hidden !important; width: 100% !important; max-width: 100vw !important; margin: 0px !important; padding: 0px !important; box-sizing: border-box !important; }


  


  


  


  


  


  


  


  


  


  
.section-container { padding: 0px 32px !important; }


  


  
.firstsection { width: 380px !important; background-size: 90% !important; }


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  
.fourth-section-grid .fourth-card { width: 100% !important; max-width: 600px !important; grid-area: auto !important; flex: 0 0 auto !important; position: relative !important; border-radius: 16px !important; overflow: hidden !important; background: rgb(255, 255, 255) !important; box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 12px !important; }


  
.fourth-section-grid .fourth-card .card-image-wrap, .fourth-section-grid .fourth-card .card-img { width: 100% !important; height: 200px !important; object-fit: cover !important; border-radius: 16px 16px 0px 0px !important; }


  


  
.fourth-section-grid .fourth-card .card-number { font-size: 28px !important; font-weight: 700 !important; color: rgb(26, 26, 26) !important; margin-bottom: 8px !important; }


  
.fourth-section-grid .fourth-card .card-title { font-size: 18px !important; font-weight: 600 !important; color: rgb(26, 26, 26) !important; margin-bottom: 12px !important; }


  
.fourth-section-grid .fourth-card .card-desc { font-size: 14px !important; line-height: 1.6 !important; color: rgb(102, 102, 102) !important; }


  
div[style*="display: flex"][style*="height: 533px"], div[style*="display:flex"][style*="height:533px"] { flex-wrap: nowrap !important; height: 340px !important; overflow-x: auto !important; scrollbar-width: none !important; }


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  
.mt15 .secondsectionright1 { font-size: 13px !important; padding-top: 0px !important; width: 100% !important; word-break: break-word !important; }
}


@media screen and (max-width: 767px) {
  
html, body, #__next, .productPageRoot { overflow-x: hidden !important; width: 100% !important; max-width: 100vw !important; margin: 0px !important; padding: 0px !important; box-sizing: border-box !important; }


  


  


  
.productPageContent { height: 280px !important; padding: 0px 16px !important; }


  


  


  
.one_title { font-size: 28px !important; line-height: 1.2 !important; padding: 0px 10px !important; }


  


  


  
.section-container { width: 100% !important; max-width: 100vw !important; padding: 0px 16px !important; box-sizing: border-box !important; }


  


  


  


  


  
.firstsection { width: 100% !important; background-size: 80% !important; background-position: center 100% !important; padding: 16px !important; }


  


  


  


  


  


  


  


  
.margin { margin: 0px auto !important; width: 100% !important; }


  


  


  


  


  


  


  


  


  


  


  


  


  
.thirdsectionbanner { background-size: cover !important; background-position: center center !important; }


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  
.fifth-card { width: 100% !important; height: auto !important; min-height: 100px !important; border-inline-end: none !important; border-bottom: 1px solid rgb(213, 213, 213) !important; padding: 16px !important; flex: 0 0 auto !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; }


  


  
.fifth-card .fifthsection-img-wrap { width: 40px !important; height: 40px !important; margin: 0px !important; }


  
.fifth-card .fifthsectiontext, .fifth-card .fifth-title { font-size: 15px !important; margin-bottom: 0px !important; height: auto !important; }


  
.fifth-card .fifth-desc { font-size: 13px !important; display: none !important; color: rgb(102, 102, 102) !important; line-height: 1.5 !important; }


  


  


  


  


  


  


  


  


  


  
.sixth-row { flex-direction: column !important; min-height: auto !important; padding: 12px 0px !important; gap: 8px !important; }


  


  


  


  


  


  


  


  


  


  


  


  


  
.f1 { flex: 1 1 0% !important; }


  


  


  


  


  


  


  


  


  


  


  
}


.flex_box_container { display: flex; align-items: center; justify-content: center; background: url("/images/ac4e39618c175913.png") 100% center / 100% no-repeat; padding: 0px 20px; }


.section2-leftnav { scrollbar-color: rgb(var(--c-primary-2)) rgb(242, 242, 242); scrollbar-width: thin; }


.ninthsection-item { margin-top: 20px; transition: margin-top 0.35s; }


.ninthsection-titleimg { width: 0px; height: 24px; margin-inline-end: 0px; opacity: 0; flex-shrink: 0; transition: width 0.35s, margin-right 0.35s, opacity 0.3s; }




.ninthsection-toggle { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; color: rgb(136, 136, 136); margin-inline-start: 12px; flex-shrink: 0; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s; }


.ninthsection-toggle-open { transform: rotate(45deg); color: rgb(var(--c-primary-2)); }


.ninthsection-content { max-height: 0px; overflow: hidden; opacity: 0; padding: 0px 16px; transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s, padding 0.45s; }


.ninthsection-content-open { max-height: 3000px; opacity: 1; padding: 20px 16px 0px; }


.productPageContent > .bg-img { display: block; position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; object-position: 100% 65%; transform-origin: center center; animation: 20s ease-out 0s infinite normal none running bgZoomIn; z-index: 0; }


.seventionsection { background: url("/images/4bb1672efd55ea0b.png") 100% 25% / 100% 150% no-repeat; position: relative; }


.seventionsection::before { content: ""; position: absolute; top: 0px; inset-inline-start: 0px; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.5); z-index: 1; pointer-events: none; border-radius: inherit; }




.sevensection-title { font-weight: 400; font-size: 24px; line-height: 30px; text-transform: capitalize; }


.sevensection-desc { font-family: Montserrat; font-weight: 500; font-size: 16px; line-height: 100%; text-transform: capitalize; color: rgb(30, 30, 30); }


.sevensection-array { display: flex; justify-content: center; align-items: center; gap: 20px; }


.sevensection-desc { width: 220px; padding: 16px; border-radius: 12px; background: linear-gradient(to right, rgba(var(--c-accent-2), 0.44) 0%, rgba(var(--c-eco), 0.47) 50%, rgba(var(--c-primary-2), 0.55) 100%); border: none; position: relative; }


.sevensection-desc::before { content: ""; position: absolute; top: 0px; inset-inline-start: 0px; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.5); z-index: 1; pointer-events: none; border-radius: inherit; }






.sevensection-desc2 { display: flex; margin: 80px auto 0px; justify-content: center; align-items: center; gap: 20px; border-radius: 40px; }


.eigtensection { font-family: Montserrat; font-weight: 400; font-size: 20px; line-height: 100%; text-transform: capitalize; color: rgb(121, 121, 121); }


.ninthsectiontext { font-weight: 400; font-size: 48px; line-height: 60px; text-transform: capitalize; }


.ninthsection { width: 907px; height: 40px; display: flex; justify-content: flex-start; align-items: center; background: rgb(245, 245, 245); border-radius: 12px; padding: 0px 16px; transition: background 0.4s, box-shadow 0.3s, transform 0.3s; cursor: pointer; }


.ninthsection:hover { background: rgb(236, 236, 236); box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 8px; }


.ninthsection-active { background: linear-gradient(to right, rgb(var(--c-accent-2)) 0%, rgb(var(--c-eco)) 50%, rgb(var(--c-primary-2)) 100%); box-shadow: rgba(var(--c-accent-2), 0.18) 0px 4px 14px; position: relative; }


.ninthsection-active span { background: linear-gradient(to right, rgb(var(--c-accent-2)) 0%, rgb(var(--c-eco)) 50%, rgb(var(--c-primary-2)) 100%) text; color: rgba(0, 0, 0, 0); }


.ninthsection-active::before { content: ""; position: absolute; top: 0px; inset-inline-start: 0px; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.8); z-index: 1; pointer-events: none; border-radius: inherit; }




.ninthsection3 { background: linear-gradient(to right, rgb(var(--c-accent-2)) 0%, rgb(var(--c-eco)) 50%, rgb(var(--c-primary-2)) 100%); position: relative; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 20px; }


.ninthsection3::before { content: ""; position: absolute; top: 0px; inset-inline-start: 0px; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.8); z-index: 1; pointer-events: none; border-radius: inherit; }




.ninthsectiodesc1 { font-weight: 400; font-size: 16px; line-height: 120%; text-transform: capitalize; }


.ninthsection2 { width: 907px; height: 285px; background-image: url("/images/c735f35f04b489bc.png"); background-size: 100% 150%; background-repeat: no-repeat; background-position: center center; display: flex; justify-content: center; align-items: flex-start; gap: 10px; padding: 32px; position: relative; }


.ninthsection2::before { content: ""; position: absolute; top: 0px; inset-inline-start: 0px; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.7); z-index: 1; pointer-events: none; border-radius: inherit; }




.ninthsectiodesc { font-weight: 500; font-size: 40px; line-height: 100%; text-align: end; text-transform: capitalize; margin-inline-start: 5px; }


.detext1 { font-weight: 400; font-size: 16px; line-height: 130%; text-transform: capitalize; color: rgb(121, 121, 121); }


.tenthsectiontext { font-weight: 400; font-size: 24px; line-height: 100%; text-transform: capitalize; }


.tenthsection { background: linear-gradient(to right, rgb(var(--c-accent-2)) 0%, rgb(var(--c-eco)) 50%, rgb(var(--c-primary-2)) 100%); position: relative; display: flex; flex-direction: column; gap: 20px; }


.tenthsection::before { content: ""; position: absolute; top: 0px; inset-inline-start: 0px; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.8); z-index: 1; pointer-events: none; border-radius: inherit; }






.tenthsection1::before { content: ""; position: absolute; inset: 0px; border-radius: inherit; padding: 1px; background: linear-gradient(rgb(var(--c-primary-2)), rgb(var(--c-accent-2))); mask: linear-gradient(rgb(255, 255, 255) 0px, rgb(255, 255, 255) 0px) content-box exclude, linear-gradient(rgb(255, 255, 255) 0px, rgb(255, 255, 255) 0px); pointer-events: none; }


.evlenthtext { font-weight: 500; font-size: 20px; line-height: 100%; text-align: end; text-transform: capitalize; color: rgb(30, 30, 30); }


.elventionsection { height: 56px; display: flex; justify-content: space-evenly; align-items: center; background: linear-gradient(to right, rgb(var(--c-accent)) 0%, rgb(var(--c-primary)) 100%); border: none; position: relative; border-radius: 12px; }


.elventionsection::before { content: ""; position: absolute; top: 0px; inset-inline-start: 0px; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.8); z-index: 1; pointer-events: none; border-radius: inherit; }




.tweleve { font-weight: 400; font-size: 16px; line-height: 24px; text-align: center; color: rgb(121, 121, 121); }


.twelevetext { font-weight: 600; font-size: 18px; line-height: 24px; text-align: center; color: rgb(37, 37, 37); }


.twelevetext1 { font-weight: 600; font-size: 14px; line-height: 100%; text-align: center; }


.detext2 { font-weight: 400; font-size: 16px; line-height: 100%; text-transform: capitalize; }


.thirdteensection { background-image: url("/images/3e299173c4282880.png"); background-size: 100% 150%; background-repeat: no-repeat; background-position: center center; position: relative; }


.thirdteensection::before { content: ""; position: absolute; top: 0px; inset-inline-start: 0px; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 1; pointer-events: none; }






.thirdteensectiontext1 { font-weight: 400; font-size: 24px; line-height: 100%; text-align: center; text-transform: capitalize; color: rgb(255, 255, 255); padding: 0px 50px; }






.thirdteensectiontext2 { font-weight: 500; font-size: 20px; line-height: 100%; text-transform: capitalize; color: rgb(248, 248, 248); }


.detext4 { font-weight: 400; font-size: 20px; line-height: 100%; text-align: center; text-transform: capitalize; color: rgb(255, 255, 255); padding: 12px 80px; }




.glass-transparent::before { content: ""; position: absolute; inset: 0px; background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(24px) saturate(1.5); z-index: 1; border-radius: inherit; pointer-events: none; }




.glass-frosted { position: relative; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.3); box-shadow: rgba(255, 255, 255, 0.2) 0px 1px 0px inset, rgba(0, 0, 0, 0.5) 0px 8px 32px; background: transparent !important; }


.glass-frosted::before { content: ""; position: absolute; inset: 0px; background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(24px) saturate(1.5); z-index: 1; border-radius: inherit; pointer-events: none; }




.gradient-dark { position: relative; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.2); background: linear-gradient(to right, rgb(var(--c-accent)) 0%, rgb(var(--c-primary)) 100%); }


.gradient-dark::before { content: ""; position: absolute; inset: 0px; background: rgba(0, 0, 0, 0.55); z-index: 1; border-radius: inherit; pointer-events: none; }














@media (max-width: 768px) {
  


  


  


  


  
.one_title { font-size: 28px !important; line-height: 1.2 !important; padding: 0px 16px !important; }


  


  


  
.section-container { padding: 0px 20px !important; width: 100% !important; max-width: 100% !important; }


  


  


  


  


  
.seventionsection > .section-container > div > div:last-child { width: 100% !important; gap: 0px !important; height: auto !important; padding: 12px 32px !important; }


  
.seventionsection > .section-container > div > div:last-child > img { height: auto !important; margin-top: 0px !important; }


  


  


  


  


  


  
.sevensection-desc1 { gap: 0px !important; height: auto !important; padding: 12px 32px !important; }


  


  


  
.section-container > div[style*="gap:40px"] { gap: 0px !important; }


  


  
.ninthsection-item { margin-top: 20px; transition: border-color 0.3s, background-color 0.3s; width: 100% !important; }


  
.ninthsection { display: flex; align-items: center; padding: 18px 0px; cursor: pointer; transition: color 0.3s, padding 0.3s; width: 100% !important; }


  
.ninthsection-active { color: rgb(37, 37, 37); }


  


  
.ninthsection-title { flex: 1 1 0%; font-size: 18px; font-weight: 500; }


  
.ninthsection-toggle { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; color: rgb(136, 136, 136); margin-inline-start: 12px; flex-shrink: 0; transition: transform 0.35s, color 0.3s; }


  
.ninthsection-toggle-open { transform: rotate(45deg); color: rgb(var(--c-accent-3)); }


  
.ninthsection-content { max-height: 0px; overflow: hidden; opacity: 0; transition: max-height 0.45s, opacity 0.35s, padding 0.45s; }


  
.ninthsection-content-open { max-height: 3000px; opacity: 1; padding: 0px; width: 100% !important; }


  


  


  


  
.ninthsection-card-list { display: flex !important; flex-flow: row !important; gap: 12px !important; overflow-x: auto !important; padding-bottom: 8px !important; width: 100% !important; }


  


  


  


  
.step-selector { overflow: auto hidden !important; justify-content: flex-start !important; gap: 0px !important; padding-bottom: 8px !important; width: 100% !important; scroll-snap-type: x mandatory !important; }


  


  


  
.tenthsection { width: 100% !important; margin-inline-start: 0px !important; }


  


  
.tbody { width: 100% !important; overflow-x: auto !important; }


  
.tbody ul { padding: 0px !important; min-width: 600px !important; }


  


  
.tbody li span { font-size: 14px !important; line-height: 1.4 !important; padding: 0px 8px !important; }


  


  


  


  


  


  


  


  
div[style*="display:flex"] > div[style*="width:139px"], div[style*="display:flex"] > div[style*="width:161px"], div[style*="display:flex"] > div[style*="width:190px"], div[style*="display:flex"] > div[style*="width:144px"], div[style*="display:flex"] > div[style*="width:325px"] { width: auto !important; flex: 1 1 0% !important; }


  


  


  


  


  


  
.thirdteensection > .section-container > div > div { flex: 0 0 calc(100% + 0px) !important; width: 100% !important; }


  


  


  


  
.thirdteensectiontext1 { font-size: 16px !important; padding: 0px 20px !important; }


  


  


  


  


  
.bgfff[style*="padding:100px"] { padding: 50px 0px !important; }


  
.seventionsection[style*="padding:100px"] { padding: 50px 0px !important; }


  
.thirdteensection[style*="padding:100px"] { padding: 50px 0px !important; }


  
.ai-chat-modal { width: 100% !important; height: 100% !important; inset: 0px !important; border-radius: 0px !important; }


  


  
.eleventh-scroll-wrap { width: 100% !important; overflow-x: auto !important; }


  


  


  
.cost-table-scroll-wrap { width: 100% !important; overflow-x: auto !important; }


  


  


  


  
.thirdteensectionbox1 { padding: 20px !important; }


  


  


  


  
.tenthsection::after { content: ""; position: absolute; bottom: 0px; inset-inline-start: 0px; width: 100%; height: 50px; background: linear-gradient(transparent, rgba(255, 255, 255, 0.9)); pointer-events: none; z-index: 5; }


  


  
.step-toggle-btn { align-items: center; justify-content: center; gap: 6px; margin-top: 16px; cursor: pointer; color: rgb(var(--c-primary)); font-size: 14px; font-weight: 500; user-select: none; position: relative; z-index: 10; display: flex !important; }


  


  


  
.eleventh-table-wrap::after { content: ""; position: absolute; bottom: 0px; inset-inline-start: 0px; width: 100%; height: 50px; background: linear-gradient(transparent, rgba(255, 255, 255, 0.9)); pointer-events: none; z-index: 5; }


  


  
.eleventh-toggle-btn { align-items: center; justify-content: center; gap: 6px; margin-top: 16px; cursor: pointer; color: rgb(var(--c-primary)); font-size: 14px; font-weight: 500; user-select: none; position: relative; z-index: 10; display: flex !important; }


  


  


  
}


@media (min-width: 769px) and (max-width: 1024px) {
  


  


  


  


  
.section-container { padding: 0px 24px !important; }


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  
.bgfff { padding: 70px 0px !important; }


  
.seventionsection { padding: 70px 0px !important; }


  
.thirdteensection { padding: 70px 0px !important; }


  
}


@media (min-width: 1920px) {
  
.section-container { max-width: 1600px !important; margin: 0px auto !important; }


  


  


  


  


  
}




.productPageRoot .tbody3 ul { width: 100%; list-style: none !important; padding: 0px !important; margin: 0px !important; }


.productPageRoot .tbody3 li { display: flex !important; align-items: center !important; border-bottom: 1px solid rgb(232, 232, 232) !important; margin: 0px !important; padding: 0px !important; }


.productPageRoot .tbody3 li.thead-row { position: relative; background: transparent !important; border-bottom: none !important; margin-bottom: 12px !important; }


.productPageRoot .tbody3 li.thead-row .col-cell { position: relative; z-index: 1; background: linear-gradient(90deg, rgb(var(--c-accent-2)), rgb(var(--c-primary-2))) text transparent !important; color: transparent !important; -webkit-text-fill-color: transparent !important; border-radius: 999px !important; padding: 12px 20px !important; margin: 0px 8px !important; text-align: center !important; font-size: 14px !important; font-weight: 500 !important; flex: 1 1 0% !important; display: flex !important; align-items: center !important; justify-content: center !important; border: none !important; }


.productPageRoot .tbody3 li.thead-row .col-cell::before { content: ""; position: absolute; inset: 0px; border-radius: 999px; padding: 1px; background: linear-gradient(90deg, rgb(var(--c-accent-2)), rgb(var(--c-primary-2))); mask: linear-gradient(rgb(255, 255, 255) 0px, rgb(255, 255, 255) 0px) content-box exclude, linear-gradient(rgb(255, 255, 255) 0px, rgb(255, 255, 255) 0px); pointer-events: none; z-index: -1; }


.productPageRoot .tbody3 li:not(.thead-row) .col-cell { flex: 1 1 0% !important; padding: 18px 20px !important; text-align: center !important; color: rgb(102, 102, 102) !important; border: none !important; background: transparent !important; }


.productPageRoot .tbody3 li:not(.thead-row) .col-cell:first-child { font-weight: 600 !important; color: rgb(26, 26, 26) !important; text-align: start !important; }


.productPageRoot .tbody3 li:not(.thead-row):nth-child(2n+1) { background: transparent !important; }


.procedure-card:hover { margin-inline-end: 12px; transform: translateY(-6px); box-shadow: rgba(0, 0, 0, 0.12) 0px 12px 32px; margin-inline-start: 0px !important; z-index: 99 !important; }


.procedure-card:first-child:hover { margin-inline-start: 0px !important; }


.related-link:hover { background: rgb(26, 26, 26); }




.related-link:hover .related-text { background-image: linear-gradient(90deg, rgb(var(--c-accent-2)), rgb(var(--c-primary-2))); background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }


@media screen and (min-width: 1921px) {
  
.productPageRoot .section-container { max-width: 1600px; padding: 0px 80px; }


  


  


  


  


  


  


  


  


  


  
}


@media screen and (min-width: 768px) and (max-width: 1280px) {
  
.productPageRoot .section-container { padding: 0px 40px; width: 100%; }


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  


  
.productPageRoot .tbody3 li.thead-row .col-cell { font-size: 12px !important; padding: 10px 14px !important; margin: 0px 4px !important; }


  
.productPageRoot .tbody3 li:not(.thead-row) .col-cell { font-size: 13px !important; padding: 14px !important; }


  


  
.productPageRoot .procedure-card { flex: 1 1 auto !important; margin-inline-start: 0px !important; }


  
.productPageRoot .procedure-card:hover { margin-inline-start: 0px !important; margin-inline-end: 0px !important; }


  


  


  


  


  
.productPageRoot .application-tabs { flex: 1 1 auto !important; flex-flow: wrap !important; }


  


  


  


  


  


  


  
.productPageRoot .related-header-cell { font-size: 13px !important; padding: 0px 10px !important; }


  


  
.productPageRoot .support-section { padding: 40px 0px !important; }


  


  


  
}


@media screen and (max-width: 767px) {
  
.productPageRoot .section-container { padding: 0px 16px; width: 100%; }


  


  


  


  
.productPageRoot .intro-section { padding: 30px 0px !important; }


  


  


  


  


  


  


  


  


  


  


  
.productPageRoot .advantages-section { padding: 30px 0px !important; }


  


  
.productPageRoot .tbody { overflow-x: auto; margin: 0px -16px; padding: 0px 16px; }


  


  
.productPageRoot .tbody li { display: flex; white-space: nowrap; border-bottom: 1px solid rgb(238, 238, 238); background: rgb(250, 250, 250); flex-wrap: nowrap !important; padding: 14px 4px !important; }


  
.productPageRoot .tbody li:first-child { background: rgb(240, 240, 240); border-bottom: 2px solid rgb(221, 221, 221); }


  
.productPageRoot .tbody li:first-child span { font-weight: 700; color: rgb(51, 51, 51); font-size: 15px !important; }


  
.productPageRoot .tbody li:not(:first-child) span:first-child { font-weight: 600; color: rgb(85, 85, 85); font-size: 14px !important; }


  
.productPageRoot .tbody li:not(:first-child) span:not(:first-child) { font-size: 13px !important; color: rgb(102, 102, 102); }


  
.productPageRoot .tbody li span { min-width: 150px; text-align: start; padding: 6px 10px; word-break: break-word; white-space: normal; flex: 0 0 auto !important; }


  


  


  


  


  


  


  


  
.productPageRoot .schedule-section { padding: 30px 0px !important; }


  


  
.productPageRoot .tbody3 { overflow-x: auto; margin: 0px -16px; padding: 0px 16px; }


  


  
.productPageRoot .tbody3 li { display: flex; border-bottom: 1px solid rgb(238, 238, 238); background: rgb(250, 250, 250); flex-wrap: nowrap !important; align-items: center !important; padding: 12px 4px !important; }


  


  
.productPageRoot .tbody3 li.thead-row .col-cell { flex-shrink: 0; min-width: 100px; font-size: 12px !important; padding: 10px 12px !important; margin: 0px 4px !important; background-image: linear-gradient(90deg, rgb(var(--c-accent-2)), rgb(var(--c-primary-2))) !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; border-radius: 999px !important; text-align: center !important; }


  
.productPageRoot .tbody3 li:not(.thead-row) .col-cell { flex-shrink: 0; min-width: 120px; text-align: start; font-size: 13px !important; padding: 12px !important; }


  
.productPageRoot .tbody3 li:not(.thead-row) .col-cell:first-child { font-weight: 600; color: rgb(26, 26, 26); }


  


  
.productPageRoot .procedures-title { font-size: 16px !important; margin: 0px 0px 20px !important; }


  


  
.productPageRoot .procedure-card { flex: 1 1 auto !important; margin-inline-start: 0px !important; padding: 16px !important; }


  
.productPageRoot .procedure-card:hover { margin-inline-start: 0px !important; margin-inline-end: 0px !important; transform: translateY(-4px) !important; }


  


  


  


  


  


  


  
.productPageRoot .resources-header-cell { font-size: 16px !important; padding: 10px !important; flex: 1 1 100% !important; border-inline-end: none !important; border-bottom: 1px solid rgb(224, 224, 224) !important; }


  


  


  
.productPageRoot .resources-cell { font-size: 13px !important; padding: 10px !important; flex: 1 1 100% !important; border-inline-end: none !important; border-bottom: 1px solid rgb(240, 240, 240) !important; text-align: start !important; }


  


  
.productPageRoot .application-section { padding: 40px 0px !important; }


  


  


  


  


  


  
.productPageRoot .qa-section { padding: 30px 0px !important; }


  


  


  


  


  


  


  
.productPageRoot .related-section { padding: 30px 0px !important; }


  


  


  
.productPageRoot .related-header-cell { margin-bottom: 8px; font-size: 12px !important; padding: 0px 8px !important; flex: 1 1 100% !important; }


  


  
.productPageRoot .related-cell { flex: 1 1 100% !important; padding: 0px 8px !important; }


  
.productPageRoot .related-link { font-size: 12px !important; padding: 8px 0px !important; }


  
.productPageRoot .support-section { padding: 40px 0px !important; }


  


  


  


  


  


  


  


  


  


  
}


.ppy li { list-style-type: none; border-bottom: 1px solid rgb(180, 180, 180); margin-top: 20px; padding-bottom: 20px; }







.news-background { position: relative; top: 0px; inset-inline-start: 0px; width: 100%; height: 100px; background-size: 100%; background-position: center center; background-image: url("/images/6d778cc068837168.jpg"); z-index: 0; background-repeat: no-repeat; animation: 20s ease-in-out 0s infinite alternate none running zoomIn; }


@keyframes zoomIn { 
  0% { background-size: 100%; }
  100% { background-size: 160%; }
}


body { margin: 0px; padding: 0px; }


.page { background-color: rgb(255, 255, 255); width: 100%; overflow: hidden; }


























.news-date { background-image: linear-gradient(360deg, rgb(var(--c-accent)) 0px, rgb(var(--c-primary)) 100%); font-size: 16px; font-family: Montserrat-Medium; background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; margin-bottom: 15px; }


.news-title { font-size: 24px; font-family: Montserrat-Regular; color: rgb(0, 0, 0); line-height: 1.4; margin-bottom: 15px; font-weight: normal; }




@media screen and (max-width: 1024px) {
  
.section-container { width: 95% !important; margin: 100px auto 50px !important; }


  


  


  


  
.news-detail { width: 100% !important; margin-inline-start: 0px !important; }


  

  

  

  

  

  


  
}


@media screen and (max-width: 767px) {
  
.section-container { width: 95% !important; margin: 50px auto 30px !important; }


  

  


  


  


  
.news-detail { width: 100% !important; margin-inline-start: 0px !important; }


  

  

  

  

  

  

  

  

  

  

  

  


  


  
}


.navbar-item-has-children:hover .dropdown-menu-vertical {opacity:1;visibility:visible;transform:translateX(-50%) translateY(0px);}



/* 静态快照无 JS：滚动 reveal 动画冻结在初始透明态，强制可见（影响 4 页 10 个元素） */
.reveal:not(.show):not(.visible):not(.active):not(.revealed) { opacity: 1 !important; transform: none !important; }

/* === 原站基础栅格工具类（快照遗漏补回） === */
.float { float: inline-start; }
.left { float: inline-start; }
.right { float: inline-end; }
.margin { margin: auto; }
.overflow { overflow: hidden; }
.textcenter { text-align: center; }
.width10 { min-height: 1px; width: 10% !important; }
.width15 { min-height: 1px; width: 15% !important; }
.width20 { min-height: 1px; width: 20% !important; }
.width25 { min-height: 1px; width: 25% !important; }
.width30 { min-height: 1px; width: 30% !important; }
.width35 { min-height: 1px; width: 35% !important; }
.width40 { min-height: 1px; width: 40% !important; }
.width45 { min-height: 1px; width: 45% !important; }
.width50 { min-height: 1px; width: 50% !important; }
.width55 { min-height: 1px; width: 55% !important; }
.width60 { min-height: 1px; width: 60% !important; }
.width65 { min-height: 1px; width: 65% !important; }
.width70 { min-height: 1px; width: 70% !important; }
.width75 { min-height: 1px; width: 75% !important; }
.width80 { min-height: 1px; width: 80% !important; }
.width85 { min-height: 1px; width: 85% !important; }
.width90 { min-height: 1px; width: 90% !important; }
.width95 { min-height: 1px; width: 95% !important; }

/* Home products slider: restore thumbnail hover highlight (the original
   site's React handler is not part of the static scrape). */
#products .product-thumb { transition: opacity 0.3s; }
#products .product-thumb:hover { opacity: 1 !important; }

/* ==========================================================================
 * 首页产品切换区（#products / "Comprehensive Underground Stormwater Solutions"）
 * 布局修复 —— 控件重叠
 * --------------------------------------------------------------------------
 * 根因：site.css 中有若干条从原站抽取时丢失了 @media 包裹的 .section-container
 * 规则，在桌面宽度下被无条件应用：
 *   (a) `.section-container { max-width:1400px; margin:0 auto; padding:0 30px }`
 *   (b) `.section-container { margin:0 auto; padding:0 30px }`
 *   (c) `.section-container { opacity:1; transform:translateY(20px); transition:… }`
 *   (d) `.section-container { width:1440px; margin:0 auto; position:relative }`
 * 原站实测（1440px，section 滚动进入视口后，见 scripts/carousel_breakpoints.json
 * 与 scripts/carousel_measure.json）对应计算值为：
 *   padding = 0px / transform = none / position = static。
 * 本地因此产生三处偏差，共同造成第 4 个指示点与第 1 个缩略图重叠 8×8px：
 *   1. 容器内容盒 1340px（原站 1400px）→ 文案多折行，区块高 511（原站 492）；
 *   2. 指示点行与缩略图行的垂直间距被压缩到 137px（原站 201px）；
 *   3. 容器成为 .products-dots 的定位基准（原站以 section 为基准）→ 指示点右偏 12px。
 * 下面只把"包含 .productsBody 的那个 products-section"恢复成原站计算值，
 * 其余 67 页不受影响。
 * ========================================================================== */
@media screen and (min-width: 768px) {
  .products-section:has(.productsBody) > .section-container {
    padding-inline-start: 0px !important;
    padding-inline-end: 0px !important;
    transform: none !important;
    transition: none !important;
    position: static !important;
  }
}

/* 静态快照把该区块的 GSAP 入场动画冻结在中间态：header opacity≈0.70、左右两列
 * opacity≈0.62 且带 ±22.7px 横向偏移、缩略图残留 hover opacity。
 * 原站滚入视口后收敛为 opacity 1 / transform none / 缩略图 0.8
 * （见 scripts/carousel_origin_probe.json），这里直接在 CSS 还原收敛态，
 * 不再依赖 JS 在滚动时才纠正。 */
.products-section:has(.productsBody) .section-header { opacity: 1 !important; }
.products-section:has(.productsBody) .productsBody > .overflow > div {
  opacity: 1 !important;
  transform: none !important;
}
.products-section:has(.productsBody) .product-thumb { opacity: 0.8 !important; }

/* 轮播切换的交叉淡入淡出由 public/static/site.js 的 transitionTo() 用
 * Web Animations API 实现（动画作用在 slide 本身 .productsBody > .overflow 上，
 * 而上面的规则只约束 slide 的子列，两者互不干扰）。这里不再叠加 CSS
 * transition，避免与 WAAPI 的 fill/cancel 时序打架产生抖动。 */

/* Home "Applications & Regional" (#global): entrance fade, marker pop-in,
   pulse rings and info-card transitions (original GSAP/React behaviors
   lost in the static scrape). */
#global { transition: opacity 0.6s ease; }
#global > div { transition: opacity 0.8s ease, transform 0.8s ease; }
#global .width100.float { transition: opacity 0.6s ease, transform 0.6s ease; }
#global .marker-item { transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.45s ease; }
#global .m1b { transition: opacity 0.35s ease, transform 0.35s ease; }
@keyframes globalPulse {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(3.4); opacity: 0; }
}
#global .pulse-ring { animation: globalPulse 2.4s cubic-bezier(0.2, 0.6, 0.35, 1) infinite; }
#global .pulse-ring + .pulse-ring { animation-delay: 1.2s; }
#global .m1a:hover .f1 { border-color: rgb(var(--c-accent)); }

/* ==========================================================================
 * Construction section (#construction-section) layout fix
 * --------------------------------------------------------------------------
 * Root causes:
 *  (a) Global .section-container { transform: translateY(20px) } (line 4681)
 *      applies to the construction container — the inline style does NOT
 *      override transform, so the section sits 20px lower than intended
 *      and gains an unwanted stacking context.
 *  (b) The nav buttons keep .divSolid's min-width:200px on purpose: the
 *      origin renders 200px-wide buttons floated right
 *      inside the 20% nav column (280px on a 1400px container), which
 *      lands them fully right of the divider (inset-inline-end:215px). The old
 *      min-width:0 override shrank them to ~140px and let the divider
 *      cut through them; it is removed now that the 80/20 column widths
 *      are restored (see the page's embedded construction styles).
 *  (c) .divSolid { margin: auto; display: block } is neutralized by the
 *      button's float:inline-end (auto margins resolve to 0 on floats).
 * ========================================================================== */

#construction-section .section-container {
  transform: none !important;
  transition: none !important;
  margin: 0 auto !important;
}

/* Ensure the construction subtitle div also doesn't inherit unwanted
 * .divSolid border/min-width that could affect layout flow */
#construction-section .construction-subtitle.divSolid {
  min-width: 0 !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  display: block !important;
}

/* Construction section: the vertical divider line between left content
 * (80%) and right nav (20%), visible on desktop like the origin (opaque
 * gray; the inline style sets inset-inline-end:215px for the 1400px container). */
@media screen and (min-width: 1440px) {
  #construction-section .construction-divider {
    display: block !important;
    opacity: 1;
  }
}

/* Construction section: smooth content transition when switching regions.
 * The content card gets a subtle fade when the region changes on hover. */
#construction-section .construction-region {
  transition: opacity 0.25s ease;
}

/* Construction section: hover cursor on nav items (already has
 * cursor:pointer inline, but ensure it applies) */
#construction-section .construction-nav-item {
  cursor: pointer;
}