.elementor-2630 .elementor-element.elementor-element-1346531{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2630 .elementor-element.elementor-element-5191b4b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2630 .elementor-element.elementor-element-60aa419{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2630 .elementor-element.elementor-element-b11a6da{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2630 .elementor-element.elementor-element-66860f6{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2630 .elementor-element.elementor-element-3b80429{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2630 .elementor-element.elementor-element-61adcf3{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2630 .elementor-element.elementor-element-7f9df4e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2630 .elementor-element.elementor-element-89bdb67{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2630 .elementor-element.elementor-element-2bb8a03{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2630 .elementor-element.elementor-element-5c10097{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}/* Start custom CSS */@import url(https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap); .eco-btn-y, .eco-tag::before { background: var(--eco-y) !important } .eco-hero-chip, .eco-marquee-track { white-space: nowrap !important; display: flex !important } .eco-btn-y svg, .eco-mistake:hover .eco-mistake-icon svg, .eco-svc-card:hover .eco-svc-icon svg, .eco-why-card:hover .eco-why-icon svg { stroke: var(--eco-black) !important } .eco-bst-hero-badge, .eco-diff-kicker, .eco-marquee-item, .eco-problem-label, .eco-tag { text-transform: uppercase !important } .eco-bst-diff, .eco-bst-hero, .eco-bst-problem, .eco-bst-process-sticky, .eco-hero-img-wrap, .eco-marquee, .eco-svc-card { overflow: hidden !important } .eco-hero-chip, .eco-who-img-badge { backdrop-filter: blur(16px) !important } .eco-bst-cta, .eco-bst-diff, .eco-bst-proc-step, .eco-bst-process-hdr { text-align: center !important } .eco-wrap { --eco-y: #FDCB00 !important; --eco-yd: #c9a100 !important; --eco-cream: #FFFDF3 !important; --eco-black: #000000 !important; --eco-gray: #7A7A7A !important; --eco-light: #F2F2F2 !important; --eco-white: #ffffff !important; --eco-font: 'Poppins', sans-serif !important; --eco-ease: cubic-bezier(0.16, 1, 0.3, 1) !important; font-family: var(--eco-font) !important; color: var(--eco-black); overflow-x: hidden !important; width: 100% !important } .eco-wrap * { box-sizing: border-box } .eco-wrap a, .eco-wrap button, .eco-wrap h1, .eco-wrap h2, .eco-wrap h3, .eco-wrap h4, .eco-wrap p, .eco-wrap span { font-family: var(--eco-font) !important; margin: 0; padding: 0; text-decoration: none; outline: 0 } .eco-bst-process-inner, .eco-container { max-width: 1200px !important; margin: 0 auto !important; position: relative !important; z-index: 1 !important; width: 100% !important } .eco-sr { opacity: 0 !important; transform: translateY(40px) !important; transition: all .8s var(--eco-ease) !important } .eco-sr.eco-left { transform: translateX(-40px) translateY(0) !important } .eco-sr.eco-right { transform: translateX(40px) translateY(0) !important } .eco-sr.eco-visible { opacity: 1 !important; transform: translate(0, 0) scale(1) !important } .eco-d1 { transition-delay: 0.1s !important } .eco-d2 { transition-delay: 0.2s !important } .eco-d3 { transition-delay: 0.3s !important } .eco-d4 { transition-delay: 0.4s !important } .eco-d5 { transition-delay: 0.5s !important } .eco-d6 { transition-delay: 0.6s !important } .eco-tag { display: inline-flex !important; align-items: center !important; gap: 10px !important; font-size: 12px !important; font-weight: 800 !important; letter-spacing: 2px !important; color: var(--eco-yd) !important; margin-bottom: 20px !important } .eco-btn-y, .eco-h2 { color: var(--eco-black) !important } .eco-tag::before { content: '' !important; width: 24px !important; height: 3px !important; border-radius: 3px !important } .eco-tag.only-left::after { display: none !important } .eco-h2 { font-size: clamp(32px, 5vw, 48px) !important; font-weight: 900 !important; line-height: 1.1 !important; letter-spacing: -1.5px !important; margin-bottom: 24px !important } .eco-btn-outline, .eco-btn-y { display: inline-flex !important; align-items: center !important; gap: 12px !important; font-size: 15px !important; padding: 18px 40px !important; cursor: pointer !important; transition: all .4s var(--eco-ease) !important } .eco-h2.eco-white, .eco-unlock.dark .eco-unlock-title { color: var(--eco-white) !important } .eco-btn-y { font-weight: 800 !important; border-radius: 100px !important; border: none !important; box-shadow: none !important } .eco-btn-y:hover { transform: translateY(-4px) !important; box-shadow: 0 16px 32px rgba(253, 203, 0, .4) !important } .eco-btn-y svg { width: 18px !important; height: 18px !important; stroke-width: 2.5 !important; fill: none !important; transition: transform .3s !important } .eco-btn-dark:hover svg, .eco-btn-y:hover svg, .eco-svc-card:hover .eco-svc-foot svg { transform: translateX(4px) !important } .eco-btn-outline { background: 0 0 !important; color: var(--eco-white) !important; font-weight: 700 !important; border-radius: 100px !important; border: 1.5px solid rgba(255, 255, 255, .3) !important } .eco-btn-outline:hover { background: rgba(255, 255, 255, .1) !important; border-color: rgba(255, 255, 255, .6) !important; transform: translateY(-4px) !important } .eco-bst-hero { background: var(--eco-black) !important; min-height: 100vh !important; display: flex !important; align-items: center !important; padding: 120px 5% 80px !important; position: relative !important } .eco-bst-hero::after, .eco-bst-hero::before, .eco-cta-orb, .eco-h-orb { position: absolute !important; pointer-events: none !important } .eco-bst-hero::before { content: '' !important; inset: 0 !important; opacity: .35 !important; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E") !important } .eco-bst-hero::after { content: '' !important; inset: 0 !important; background-image: linear-gradient(rgba(253, 203, 0, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(253, 203, 0, .04) 1px, transparent 1px) !important; background-size: 72px 72px !important } .eco-cta-orb, .eco-h-orb { border-radius: 50% !important } .eco-bst-hero-right, .eco-hero-img-wrap, .eco-problem-right { position: relative !important } .eco-h-orb-1 { width: 700px !important; height: 700px !important; top: -200px !important; left: -200px !important; background: radial-gradient(circle, rgba(253, 203, 0, .2) 0, transparent 60%) !important; animation: 9s ease-in-out infinite ecoOrb1 !important } .eco-h-orb-2 { width: 500px !important; height: 500px !important; bottom: -120px !important; right: -80px !important; background: radial-gradient(circle, rgba(253, 203, 0, .1) 0, transparent 62%) !important; animation: 12s ease-in-out infinite ecoOrb2 !important } @keyframes ecoOrb1 { 0%, 100% { transform: translate(0, 0) } 50% { transform: translate(40px, -50px) } } @keyframes ecoOrb2 { 0%, 100% { transform: translate(0, 0) } 50% { transform: translate(-30px, 40px) } } .eco-bst-hero-inner { display: grid !important; grid-template-columns: 1.05fr 1fr !important; gap: 80px !important; align-items: center !important } .eco-bst-hero-badge { display: inline-flex !important; align-items: center !important; gap: 10px !important; border: 1px solid rgba(253, 203, 0, .3) !important; background: rgba(253, 203, 0, .07) !important; color: var(--eco-y) !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 2.5px !important; padding: 10px 20px !important; border-radius: 100px !important; margin-bottom: 32px !important } .eco-bst-hero-badge-dot { width: 7px !important; height: 7px !important; background: var(--eco-y) !important; border-radius: 50% !important; animation: 2s infinite ecoPulse !important } @keyframes ecoPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(253, 203, 0, .5) } 50% { box-shadow: 0 0 0 8px rgba(253, 203, 0, 0) } } .eco-bst-hero-title { font-size: clamp(38px, 6vw, 72px) !important; font-weight: 900 !important; line-height: 1.04 !important; letter-spacing: -2px !important; color: var(--eco-white) !important; margin-bottom: 28px !important } .eco-bst-hero-title .acc { display: inline-block !important; color: var(--eco-y) !important; background: linear-gradient(100deg, var(--eco-y) 0, var(--eco-y) 35%, #fff4a8 50%, var(--eco-y) 65%, var(--eco-y) 100%) !important; background-size: 250% 100% !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; animation: 3.5s linear infinite ecoShimmer !important } @keyframes ecoShimmer { 0% { background-position: 200% 0 } 100% { background-position: -200% 0 } } .eco-bst-hero-sub { font-size: 16px !important; line-height: 1.85 !important; color: rgba(255, 255, 255, .55) !important; margin-bottom: 16px !important; max-width: 540px !important } .eco-bst-hero-sub2 { font-size: 15px !important; line-height: 1.8 !important; color: rgba(255, 255, 255, .4) !important; margin-bottom: 44px !important; max-width: 540px !important } .eco-bst-hero-sub2 strong { color: rgba(255, 255, 255, .65) !important; font-weight: 600 !important } .eco-bst-hero-ctas { display: flex !important; gap: 14px !important; flex-wrap: wrap !important } .eco-hero-img-wrap { border-radius: 24px !important; box-shadow: 0 40px 80px rgba(0, 0, 0, .5) !important } .eco-hero-img-wrap img { width: 100% !important; height: 520px !important; object-fit: cover !important; filter: brightness(.85) !important } .eco-hero-img-wrap::after { content: '' !important; position: absolute !important; inset: 0 !important; background: linear-gradient(135deg, rgba(253, 203, 0, .18) 0, transparent 55%), linear-gradient(to top, rgba(0, 0, 0, .55) 0, transparent 50%) !important; pointer-events: none !important } .eco-hero-chip { position: absolute !important; align-items: center !important; gap: 10px !important; background: rgba(10, 10, 10, .85) !important; border: 1px solid rgba(255, 255, 255, .1) !important; border-radius: 12px !important; padding: 12px 18px !important; z-index: 2 !important } .eco-c-num, .eco-diff-inner { z-index: 1 !important; position: relative !important } .eco-hero-chip svg { flex-shrink: 0 !important } .eco-hero-chip-text { font-size: 12px !important; font-weight: 700 !important; color: var(--eco-white) !important; line-height: 1.2 !important; margin: 0 !important } .eco-hero-chip-sub { font-size: 10px !important; color: rgba(255, 255, 255, .45) !important; font-weight: 400 !important; margin: 2px 0 0 !important } .eco-hc1 { top: 24px !important; left: -28px !important; animation: 6s ease-in-out infinite ecoChip1 !important } .eco-hc2 { bottom: 60px !important; left: -32px !important; animation: 7s ease-in-out infinite ecoChip2 !important } .eco-hc3 { top: 44% !important; right: -28px !important; animation: 8s ease-in-out 1s infinite ecoChip1 !important } @keyframes ecoChip1 { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-12px) } } @keyframes ecoChip2 { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(10px) } } .eco-marquee { background: var(--eco-y) !important; padding: 15px 0 !important; position: relative !important } .eco-marquee-track { animation: 30s linear infinite ecoMq !important } .eco-marquee:hover .eco-marquee-track { animation-play-state: paused !important } .eco-marquee-item { display: inline-flex !important; align-items: center !important; gap: 16px !important; padding: 0 28px !important; font-size: 12px !important; font-weight: 800 !important; letter-spacing: 1.5px !important; color: var(--eco-black) !important; flex-shrink: 0 !important } .eco-marquee-item .dot { width: 5px !important; height: 5px !important; background: rgba(0, 0, 0, .3) !important; border-radius: 50% !important; flex-shrink: 0 !important } .eco-consequence:hover .eco-c-num, .eco-mistake:hover .eco-mistake-icon, .eco-unlock.dark::before, .eco-why-card:hover .eco-why-icon { background: var(--eco-y) !important } .eco-consequence-stack::before { content: '' !important; position: absolute !important; border-radius: 2px !important } @keyframes ecoMq { from { transform: translate3d(0, 0, 0) } to { transform: translate3d(-50%, 0, 0) } } .eco-bst-problem { padding: 120px 5% !important; background: var(--eco-white) !important; position: relative !important } .eco-problem-inner, .eco-who-inner, .eco-why-inner { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 80px !important; align-items: center !important } .eco-consequence-stack, .eco-mistake, .eco-mistake-icon, .eco-mistakes { display: flex !important } .eco-problem-lead { font-size: 17px !important; line-height: 1.8 !important; color: var(--eco-gray) !important; margin-bottom: 48px !important } .eco-mistakes { flex-direction: column !important; gap: 14px !important } .eco-mistake { align-items: center !important; gap: 16px !important; background: var(--eco-light) !important; border-radius: 14px !important; padding: 18px 22px !important; border-left: 4px solid transparent !important; transition: all .4s var(--eco-ease) !important } .eco-mistake:hover { background: var(--eco-cream) !important; border-left-color: var(--eco-y) !important; transform: translateX(6px) !important; box-shadow: 0 4px 20px rgba(0, 0, 0, .06) !important } .eco-mistake-icon { width: 38px !important; height: 38px !important; background: var(--eco-black) !important; border-radius: 10px !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; transition: background .4s !important } .eco-mistake-icon svg { width: 18px !important; height: 18px !important; stroke: var(--eco-y) !important; stroke-width: 2 !important; fill: none !important; transition: stroke .4s !important } .eco-mistake-text { font-size: 14px !important; font-weight: 600 !important; color: var(--eco-black) !important; margin: 0 !important } .eco-problem-label { font-size: 11px !important; font-weight: 700 !important; color: var(--eco-gray) !important; letter-spacing: 2px !important; margin-bottom: 24px !important } .eco-consequence-stack { flex-direction: column !important; gap: 0 !important; position: relative !important } .eco-consequence-stack::before { left: 20px !important; top: 24px !important; bottom: 24px !important; width: 2px !important; background: linear-gradient(to bottom, var(--eco-y), rgba(253, 203, 0, .1)) !important } .eco-bst-diff::before { left: 50% !important; position: absolute !important; content: '' !important } .eco-consequence { display: grid !important; grid-template-columns: 44px 1fr !important; gap: 16px !important; padding: 24px 0 !important; border-bottom: 1px solid var(--eco-light) !important; align-items: start !important; position: relative !important } .eco-consequence:last-child { border-bottom: none !important } .eco-c-num { width: 40px !important; height: 40px !important; border-radius: 50% !important; border: 2px solid var(--eco-y) !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 13px !important; font-weight: 900 !important; color: var(--eco-y) !important; background: var(--eco-white) !important; flex-shrink: 0 !important; transition: all .4s var(--eco-ease) !important } .eco-consequence:hover .eco-c-num { color: var(--eco-black) !important; transform: scale(1.15) !important } .eco-c-title { font-size: 15px !important; font-weight: 800 !important; color: var(--eco-black) !important; margin-bottom: 4px !important } .eco-c-text { font-size: 13px !important; color: var(--eco-gray) !important; line-height: 1.65 !important; margin: 0 !important } .eco-c-tag { display: inline-block !important; background: rgba(253, 203, 0, .12) !important; color: var(--eco-yd) !important; font-size: 10px !important; font-weight: 700 !important; padding: 4px 10px !important; border-radius: 100px !important; margin-top: 8px !important; letter-spacing: .5px !important } .eco-bst-diff { background: var(--eco-black) !important; padding: 100px 5% !important; position: relative !important } .eco-bst-diff::before { top: 50% !important; transform: translate(-50%, -50%) !important; width: 800px !important; height: 800px !important; max-width: 100% !important; background: radial-gradient(circle, rgba(253, 203, 0, .13) 0, transparent 55%) !important; border-radius: 50% !important; pointer-events: none !important } .eco-diff-inner { max-width: 860px !important; margin: 0 auto !important } .eco-diff-kicker { font-size: 13px !important; font-weight: 700 !important; letter-spacing: 2px !important; color: rgba(255, 255, 255, .3) !important; margin-bottom: 24px !important } .eco-diff-headline { font-size: clamp(30px, 6vw, 68px) !important; font-weight: 900 !important; color: var(--eco-white) !important; line-height: 1.05 !important; letter-spacing: -2px !important; margin-bottom: 28px !important } .eco-bst-pd-num, .eco-bst-proc-scroll-hint, .eco-cta-eyebrow, .eco-svc-num { letter-spacing: 2px !important; text-transform: uppercase !important } .eco-bst-proc-step.active .eco-bst-proc-title, .eco-diff-headline span { color: var(--eco-y) !important } .eco-diff-desc { font-size: 17px !important; line-height: 1.85 !important; color: rgba(255, 255, 255, .5) !important; margin-bottom: 16px !important; max-width: 640px !important; margin-left: auto !important; margin-right: auto !important } .eco-diff-desc2 { font-size: 15px !important; line-height: 1.8 !important; color: rgba(255, 255, 255, .35) !important; max-width: 600px !important; margin: 0 auto 52px !important } .eco-diff-pills { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; justify-content: center !important } .eco-diff-pill { display: inline-flex !important; align-items: center !important; gap: 8px !important; background: rgba(255, 255, 255, .05) !important; border: 1px solid rgba(255, 255, 255, .1) !important; color: rgba(255, 255, 255, .75) !important; font-size: 12px !important; font-weight: 600 !important; padding: 10px 20px !important; border-radius: 100px !important; transition: .35s !important; cursor: default !important } .eco-diff-pill:hover { background: var(--eco-y) !important; color: var(--eco-black) !important; border-color: var(--eco-y) !important; transform: translateY(-3px) !important } .eco-diff-pill svg { width: 14px !important; height: 14px !important; stroke: currentColor !important; fill: none !important; stroke-width: 2 !important } .eco-bst-services, .eco-bst-who { background: var(--eco-cream) !important; padding: 120px 5% !important; position: relative !important; overflow: hidden !important } .eco-services-hdr { display: grid !important; grid-template-columns: 1fr auto !important; align-items: end !important; margin-bottom: 64px !important; gap: 40px !important } .eco-svc-foot, .eco-svc-icon { align-items: center !important } .eco-services-hdr-right p { font-size: 14px !important; color: var(--eco-gray) !important; line-height: 1.7 !important; max-width: 320px !important; text-align: right !important; margin: 0 !important } .eco-services-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 20px !important } .eco-svc-card { background: var(--eco-white) !important; border-radius: 22px !important; padding: 36px !important; border: 1.5px solid transparent !important; position: relative !important; transition: border-color .4s var(--eco-ease), box-shadow .4s var(--eco-ease), transform .4s var(--eco-ease) !important; cursor: default !important; box-shadow: 0 2px 16px rgba(0, 0, 0, .04) !important } .eco-bst-process, .eco-svc-icon { background: var(--eco-black) !important } .eco-svc-card:hover { border-color: var(--eco-y) !important; box-shadow: 0 24px 56px rgba(0, 0, 0, .1) !important; transform: translateY(-8px) !important } .eco-svc-num { font-size: 10px !important; font-weight: 800 !important; color: rgba(0, 0, 0, .18) !important; margin-bottom: 22px !important } .eco-svc-icon { width: 60px !important; height: 60px !important; border-radius: 16px !important; display: flex !important; justify-content: center !important; margin-bottom: 24px !important; transition: background .45s var(--eco-ease), transform .45s var(--eco-ease) !important } .eco-svc-card:hover .eco-svc-icon { background: var(--eco-y) !important; transform: rotate(-6deg) scale(1.08) !important } .eco-bst-proc-detail.show, .eco-svc-card:hover .eco-svc-foot { opacity: 1 !important; transform: none !important } .eco-svc-icon svg { width: 28px !important; height: 28px !important; stroke: var(--eco-y) !important; stroke-width: 1.8 !important; fill: none !important; transition: stroke .45s !important } .eco-bst-pd-hint svg, .eco-bst-proc-scroll-hint svg, .eco-svc-foot svg { width: 14px !important; height: 14px !important } .eco-svc-foot svg, .eco-unlock-icon svg { stroke: var(--eco-black) !important; fill: none !important } .eco-svc-title { font-size: 17px !important; font-weight: 800 !important; color: var(--eco-black) !important; margin-bottom: 12px !important; line-height: 1.25 !important; min-height: 42px !important } .eco-svc-desc { font-size: 13px !important; line-height: 1.8 !important; color: var(--eco-gray) !important; margin: 0 !important } .eco-svc-foot { display: flex !important; gap: 6px !important; margin-top: 22px !important; font-size: 12px !important; font-weight: 700 !important; color: var(--eco-black) !important; opacity: 0 !important; transform: translateY(8px) !important; transition: .35s !important } .eco-bst-pd-num, .eco-bst-pd-title, .eco-bst-proc-bubble, .eco-bst-proc-title { font-weight: 800 !important } .eco-bst-proc-bubble, .eco-bst-proc-step { transition: all .4s var(--eco-ease) !important } .eco-svc-foot svg { stroke-width: 2.5 !important; transition: transform .3s !important } .eco-bst-process { position: relative !important } .eco-bst-process-track { position: relative !important; height: auto !important; min-height: 0 !important; } .eco-bst-process-sticky { position: relative !important; height: auto !important; display: flex !important; align-items: flex-start !important; padding: 80px 24px !important; overflow: visible !important; } .eco-bst-process-sticky::before { content: '' !important; position: absolute !important; width: 600px !important; height: 600px !important; top: -100px !important; right: -150px !important; background: radial-gradient(circle, rgba(253, 203, 0, .08) 0, transparent 60%) !important; border-radius: 50% !important; pointer-events: none !important } .eco-bst-process-sticky::after { content: '' !important; position: absolute !important; inset: 0 !important; background-image: linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px) !important; background-size: 60px 60px !important; pointer-events: none !important; z-index: 0 !important } .eco-bst-process-hdr { margin-bottom: 48px !important } .eco-bst-process-steps { display: grid !important; grid-template-columns: repeat(5, 1fr) !important; background: rgba(255, 255, 255, .04) !important; border: 1px solid rgba(255, 255, 255, .1) !important; margin-bottom: 24px !important } .eco-bst-proc-step { display: flex !important; flex-direction: column !important; align-items: center !important; padding: 36px 16px !important; position: relative !important; cursor: pointer !important; z-index: 2 !important; border: none !important; border-right: 1px solid rgba(255, 255, 255, .08) !important; background: 0 0 !important } .eco-unlock, .eco-who-item, .eco-why-card { cursor: default !important } .eco-bst-proc-step:last-child { border-right: none !important } .eco-bst-proc-step:hover { background: rgba(255, 255, 255, .02) !important } .eco-bst-proc-step.active { background: rgba(255, 255, 255, .08) !important } .eco-bst-proc-bubble { width: 64px !important; height: 64px !important; border-radius: 50% !important; background: #111 !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 16px !important; color: var(--eco-y) !important; margin-bottom: 20px !important } .eco-bst-proc-step.active .eco-bst-proc-bubble { background: var(--eco-y) !important; color: var(--eco-black) !important; box-shadow: 0 0 32px rgba(253, 203, 0, .5) !important; transform: scale(1.1) !important } .eco-bst-proc-title { font-size: 15px !important; color: rgba(255, 255, 255, .4) !important; transition: color .4s !important; margin-bottom: 8px !important } .eco-bst-proc-desc { font-size: 12px !important; color: rgba(255, 255, 255, .2) !important; line-height: 1.4 !important; transition: color .4s !important; margin: 0 !important } .eco-bst-proc-step.active .eco-bst-proc-desc { color: rgba(255, 255, 255, .6) !important } .eco-bst-proc-detail-wrap { position: relative !important; min-height: 220px !important } .eco-bst-proc-detail { position: absolute !important; inset: 0 !important; display: flex !important; flex-direction: column !important; justify-content: center !important; background: rgba(255, 255, 255, .02) !important; border: 1px solid rgba(255, 255, 255, .06) !important; border-radius: 16px !important; padding: 48px !important; opacity: 0 !important; transform: translateY(20px) !important; transition: opacity .5s var(--eco-ease), transform .5s var(--eco-ease) !important; pointer-events: none !important } .eco-bst-unlocks, .eco-unlock, .eco-who-img { position: relative !important; overflow: hidden !important } .eco-bst-proc-detail.show { pointer-events: auto !important } .eco-bst-pd-num { font-size: 12px !important; color: var(--eco-y) !important; margin-bottom: 12px !important } .eco-bst-pd-title { font-size: 32px !important; color: var(--eco-white) !important; margin-bottom: 16px !important } .eco-bst-pd-text, .eco-unlocks-hdr-r p { margin: 0 !important; line-height: 1.8 !important } .eco-bst-pd-text { font-size: 16px !important; color: rgba(255, 255, 255, .6) !important; max-width: 900px !important } .eco-bst-pd-hint, .eco-bst-proc-scroll-hint { display: flex !important; gap: 8px !important; color: rgba(255, 255, 255, .3) !important } .eco-bst-pd-bottom { display: flex !important; align-items: center !important; justify-content: space-between !important; margin-top: auto !important; padding-top: 32px !important } .eco-bst-pd-hint { align-items: center !important; font-size: 12px !important } .eco-bst-pd-hint svg { stroke: rgba(255, 255, 255, 0.3) !important; stroke-width: 2 !important; fill: none !important; flex-shrink: 0 !important } .eco-bst-proc-scroll-hint { align-items: center !important; font-size: 11px !important; font-weight: 700 !important; pointer-events: none !important; animation: 2s ease-in-out infinite ecoScrollHint !important } @keyframes ecoScrollHint { 0%, 100% { transform: translateY(0); opacity: .6 } 50% { transform: translateY(5px); opacity: 1 } } .eco-bst-proc-scroll-hint svg { stroke: rgba(255, 255, 255, 0.3) !important; stroke-width: 2 !important; fill: none !important } .eco-bst-unlocks { background: var(--eco-white) !important; padding: 120px 5% !important } .eco-bst-unlocks::after { content: '' !important; position: absolute !important; left: -200px !important; top: 50% !important; transform: translateY(-50%) !important; width: 500px !important; height: 500px !important; background: radial-gradient(circle, rgba(253, 203, 0, .07) 0, transparent 65%) !important; border-radius: 50% !important; pointer-events: none !important } .eco-unlock::before, .eco-who-item::after { left: 0 !important; bottom: 0 !important; content: '' !important } .eco-unlocks-hdr { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 60px !important; align-items: end !important; margin-bottom: 64px !important } .eco-unlocks-hdr-r p { font-size: 15px !important; color: var(--eco-gray) !important } .eco-unlocks-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 16px !important } .eco-unlock, .eco-unlock-icon, .eco-who-item, .eco-who-list { display: flex !important } .eco-unlock { gap: 18px !important; align-items: flex-start !important; background: var(--eco-light) !important; border-radius: 18px !important; padding: 28px !important; transition: background .4s var(--eco-ease), transform .4s var(--eco-ease), box-shadow .4s var(--eco-ease) !important } .eco-unlock-icon, .eco-unlock::before, .eco-who-left em { background: var(--eco-y) !important } .eco-unlock::before { position: absolute !important; right: 0 !important; height: 3px !important; transform: scaleX(0) !important; transform-origin: left !important; transition: transform .45s var(--eco-ease) !important } .eco-unlock:hover::before, .eco-why-card:hover::before { transform: scaleX(1) !important } .eco-unlock:hover { background: var(--eco-cream) !important; transform: translateY(-6px) !important; box-shadow: 0 16px 40px rgba(0, 0, 0, .07) !important } .eco-unlock-icon { width: 44px !important; height: 44px !important; border-radius: 12px !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; transition: transform .4s var(--eco-ease) !important } .eco-unlock:hover .eco-unlock-icon { transform: scale(1.1) rotate(-5deg) !important } .eco-unlock-icon svg { width: 20px !important; height: 20px !important; stroke-width: 2.2 !important } .eco-unlock-title { font-size: 14px !important; font-weight: 800 !important; color: var(--eco-black) !important; margin-bottom: 6px !important; line-height: 1.3 !important } .eco-unlock-desc { font-size: 12.5px !important; color: var(--eco-gray) !important; line-height: 1.65 !important; margin: 0 !important } .eco-unlock.dark { background: var(--eco-black) !important } .eco-unlock.dark:hover { background: #0d0d0d !important } .eco-unlock.dark .eco-unlock-desc { color: rgba(255, 255, 255, .45) !important } .eco-who-left p.eco-lead { font-size: 15px !important; color: var(--eco-gray) !important; line-height: 1.8 !important; margin-bottom: 36px !important } .eco-who-left em { font-style: normal !important; padding: 0 8px !important; border-radius: 4px !important } .eco-who-img { border-radius: 24px !important; box-shadow: 0 24px 64px rgba(0, 0, 0, .1) !important } .eco-bst-why::after, .eco-bst-why::before, .eco-who-img-badge, .eco-who-item::after, .eco-why-card::before { position: absolute !important } .eco-who-img img { width: 100% !important; height: 460px !important; object-fit: cover !important; transition: transform .7s var(--eco-ease) !important } .eco-who-img:hover img { transform: scale(1.04) !important } .eco-who-img-badge { bottom: 24px !important; left: 24px !important; right: 24px !important; background: rgba(0, 0, 0, .78) !important; -webkit-backdrop-filter: blur(16px) !important; border-radius: 14px !important; padding: 18px 22px !important; border: 1px solid rgba(255, 255, 255, .08) !important } .eco-bst-cta, .eco-bst-why, .eco-cta-inner, .eco-who-item, .eco-why-card { position: relative !important } .eco-who-badge-title { font-size: 13px !important; font-weight: 800 !important; color: var(--eco-white) !important; margin-bottom: 6px !important; line-height: 1.3 !important } .eco-who-badge-sub { font-size: 12px !important; color: rgba(255, 255, 255, .5) !important; line-height: 1.5 !important; margin: 0 !important } .eco-who-text, .eco-why-highlight p { font-size: 14px !important; margin: 0 !important } .eco-who-list { flex-direction: column !important; gap: 12px !important } .eco-who-check, .eco-who-item { align-items: center !important } .eco-who-item { gap: 14px !important; background: var(--eco-white) !important; border-radius: 14px !important; padding: 18px 20px !important; transition: border-color .4s var(--eco-ease), box-shadow .4s var(--eco-ease), transform .4s var(--eco-ease) !important; border: 1.5px solid transparent !important; overflow: hidden !important } .eco-why-highlight, .eco-why-right { gap: 16px !important; display: flex !important } .eco-who-item::after { top: 0 !important; width: 3px !important; background: var(--eco-y) !important; transform: scaleY(0) !important; transform-origin: top !important; transition: transform .4s !important } .eco-who-item:hover::after { transform: scaleY(1) !important } .eco-who-item:hover { border-color: rgba(253, 203, 0, .3) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, .06) !important; transform: translateX(6px) !important } .eco-who-check { width: 30px !important; height: 30px !important; border-radius: 8px !important; background: var(--eco-y) !important; display: flex !important; justify-content: center !important; flex-shrink: 0 !important; transition: transform .4s var(--eco-ease) !important } .eco-who-item:hover .eco-who-check { transform: scale(1.15) rotate(-5deg) !important } .eco-who-check svg { width: 14px !important; height: 14px !important; stroke: var(--eco-black) !important; stroke-width: 3 !important; fill: none !important } .eco-why-highlight svg, .eco-why-icon svg { stroke: var(--eco-y) !important; fill: none !important } .eco-who-text { font-weight: 600 !important; color: var(--eco-black) !important; line-height: 1.4 !important } .eco-bst-why { background: var(--eco-black) !important; padding: 120px 5% !important; overflow: hidden !important } .eco-bst-why::before { content: '' !important; inset: 0 !important; background-image: linear-gradient(rgba(253, 203, 0, .03) 1px, transparent 1px), linear-gradient(90deg, rgba(253, 203, 0, .03) 1px, transparent 1px) !important; background-size: 60px 60px !important; pointer-events: none !important } .eco-bst-why::after { content: '' !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; width: 800px !important; height: 800px !important; max-width: 100% !important; background: radial-gradient(circle, rgba(253, 203, 0, .1) 0, transparent 55%) !important; border-radius: 50% !important; pointer-events: none !important } .eco-why-lead { font-size: 16px !important; line-height: 1.85 !important; color: rgba(255, 255, 255, .5) !important; margin-bottom: 12px !important } .eco-why-lead2 { font-size: 15px !important; line-height: 1.8 !important; color: rgba(255, 255, 255, .35) !important; margin-bottom: 40px !important } .eco-why-highlight { align-items: center !important; background: rgba(253, 203, 0, .08) !important; border: 1px solid rgba(253, 203, 0, .2) !important; border-radius: 14px !important; padding: 20px 22px !important } .eco-why-highlight svg { width: 24px !important; height: 24px !important; stroke-width: 2 !important; flex-shrink: 0 !important } .eco-why-highlight p { color: rgba(255, 255, 255, .75) !important; line-height: 1.6 !important; font-weight: 500 !important } .eco-why-right { flex-direction: column !important } .eco-why-card { background: rgba(255, 255, 255, .04) !important; border: 1px solid rgba(255, 255, 255, .07) !important; border-radius: 18px !important; padding: 26px !important; transition: background .4s var(--eco-ease), transform .4s var(--eco-ease), border-color .4s var(--eco-ease) !important; overflow: hidden !important } .eco-why-card::before { content: '' !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 2px !important; background: var(--eco-y) !important; transform: scaleX(0) !important; transform-origin: left !important; transition: transform .45s !important } .eco-why-card:hover { background: rgba(255, 255, 255, .07) !important; transform: translateX(8px) !important; border-color: rgba(253, 203, 0, .2) !important } .eco-why-icon { width: 42px !important; height: 42px !important; border-radius: 10px !important; background: rgba(253, 203, 0, .1) !important; display: flex !important; align-items: center !important; justify-content: center !important; margin-bottom: 14px !important; transition: background .4s !important } .eco-btn-dark, .eco-cta-eyebrow { display: inline-flex !important; border-radius: 100px !important } .eco-why-icon svg { width: 20px !important; height: 20px !important; stroke-width: 2 !important; transition: stroke .4s !important } .eco-why-title { font-size: 15px !important; font-weight: 800 !important; color: var(--eco-white) !important; margin-bottom: 8px !important } .eco-why-text { font-size: 13px !important; color: rgba(255, 255, 255, .45) !important; line-height: 1.7 !important; margin: 0 !important } .eco-cta-eyebrow, .eco-cta-title { color: var(--eco-black) !important } .eco-bst-cta { background: var(--eco-y) !important; padding: 120px 5% !important; overflow: hidden !important } .eco-cta-orb-1 { width: 480px !important; height: 480px !important; top: -140px !important; right: -100px !important; background: rgba(0, 0, 0, .08) !important; animation: 14s ease-in-out infinite ecoCtaOrb1 !important } .eco-cta-orb-2 { width: 380px !important; height: 380px !important; bottom: -120px !important; left: -80px !important; background: rgba(0, 0, 0, .05) !important; animation: 16s ease-in-out infinite ecoCtaOrb2 !important } .eco-cta-orb-3 { width: 120px !important; height: 120px !important; top: 15% !important; left: 8% !important; background: rgba(0, 0, 0, .06) !important; animation: 10s ease-in-out infinite ecoCtaOrb3 !important } .eco-cta-orb-4 { width: 80px !important; height: 80px !important; bottom: 20% !important; right: 12% !important; background: rgba(0, 0, 0, .08) !important; animation: 12s ease-in-out infinite ecoCtaOrb4 !important } .eco-cta-orb-5 { width: 40px !important; height: 40px !important; top: 30% !important; right: 20% !important; background: rgba(0, 0, 0, .1) !important; animation: 8s ease-in-out 1s infinite ecoCtaOrb3 !important } @keyframes ecoCtaOrb1 { 0%, 100% { transform: translate(0, 0) scale(1) } 33% { transform: translate(-40px, 50px) scale(1.08) } 66% { transform: translate(30px, 30px) scale(.95) } } @keyframes ecoCtaOrb2 { 0%, 100% { transform: translate(0, 0) scale(1) } 33% { transform: translate(50px, -40px) scale(1.1) } 66% { transform: translate(-30px, -20px) scale(.92) } } @keyframes ecoCtaOrb3 { 0%, 100% { transform: translate(0, 0) scale(1); opacity: .7 } 50% { transform: translate(25px, 40px) scale(1.3); opacity: 1 } } @keyframes ecoCtaOrb4 { 0%, 100% { transform: translate(0, 0) scale(1); opacity: .8 } 50% { transform: translate(-30px, -30px) scale(1.2); opacity: 1 } } .eco-cta-inner { max-width: 720px !important; margin: 0 auto !important; z-index: 1 !important } .eco-cta-eyebrow { align-items: center !important; gap: 8px !important; background: rgba(0, 0, 0, .08) !important; font-size: 11px !important; font-weight: 800 !important; padding: 10px 20px !important; margin-bottom: 28px !important } .eco-cta-title { font-size: clamp(30px, 6vw, 64px) !important; font-weight: 900 !important; line-height: 1.05 !important; letter-spacing: -2px !important; margin-bottom: 18px !important } .eco-cta-sub { font-size: 16px !important; line-height: 1.8 !important; color: rgba(0, 0, 0, .6) !important; margin-bottom: 44px !important } .eco-btn-dark, .eco-btn-dark:hover { background: var(--eco-black) !important; color: var(--eco-y) !important } .eco-btn-dark { align-items: center !important; gap: 10px !important; font-size: 15px !important; font-weight: 800 !important; padding: 18px 40px !important; border: none !important; cursor: pointer !important; transition: all .35s var(--eco-ease) !important } .eco-btn-dark:hover { transform: translateY(-4px) !important; box-shadow: 0 16px 40px rgba(0, 0, 0, .25) !important } .eco-btn-dark svg { width: 18px !important; height: 18px !important; stroke: var(--eco-y) !important; stroke-width: 2.5 !important; fill: none !important; transition: transform .3s !important } @media (max-width:1024px) { .eco-bst-hero-inner, .eco-problem-inner, .eco-services-hdr, .eco-who-inner { grid-template-columns: 1fr !important } .eco-bst-hero, .eco-bst-proc-detail-wrap { min-height: auto !important } .eco-bst-hero { padding: 110px 20px 70px !important } .eco-bst-hero-inner { gap: 60px !important } .eco-bst-problem::after, .eco-bst-problem::before, .eco-bst-proc-desc, .eco-bst-proc-scroll-hint { display: none !important } .eco-hero-img-wrap img { height: 380px !important; } .eco-hero-chip { padding: 10px 14px !important; background: rgba(10, 10, 10, 0.95) !important; } .eco-hc1 { left: -10px !important; top: -10px !important; } .eco-hc2 { left: -10px !important; bottom: -10px !important; } .eco-hc3 { right: -10px !important; top: 50% !important; margin-top: -30px !important; } .eco-bst-cta, .eco-bst-problem, .eco-bst-services, .eco-bst-unlocks, .eco-bst-who, .eco-bst-why { padding: 90px 20px !important } .eco-problem-inner, .eco-who-inner { gap: 56px !important } .eco-bst-diff { padding: 80px 20px !important } .eco-services-hdr { margin-bottom: 48px !important } .eco-services-hdr-right p { text-align: left !important; max-width: 100% !important } .eco-services-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important } .eco-unlocks-hdr { grid-template-columns: 1fr !important; gap: 24px !important; margin-bottom: 48px !important } .eco-unlocks-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important } .eco-why-inner { grid-template-columns: 1fr !important; gap: 48px !important } .eco-bst-process-track { height: auto !important } .eco-bst-process-sticky { position: relative !important; height: auto !important; padding: 60px 20px !important; display: block !important } .eco-bst-process-steps { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; gap: 12px !important; padding-bottom: 20px !important; margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; scrollbar-width: none; -ms-overflow-style: none; background: 0 0 !important; border: none !important; margin-bottom: 36px !important } .eco-bst-process-steps::-webkit-scrollbar { display: none; } .eco-bst-proc-step { flex: 0 0 75% !important; scroll-snap-align: center; border: 1px solid rgba(255, 255, 255, .05) !important; border-radius: 16px !important; padding: 20px 16px !important; flex-direction: column !important; justify-content: center !important; background: rgba(255, 255, 255, .03) !important } .eco-bst-proc-step.active { background: rgba(253,203,0,0.08) !important; border-color: rgba(253,203,0,0.25) !important; } .eco-bst-process-steps .eco-bst-process-line { display: none !important; } .eco-bst-proc-desc { display: block !important; margin-top: 6px; font-size: 13px !important; opacity: 0.7; } .eco-bst-proc-bubble { width: 50px !important; height: 50px !important; font-size: 13px !important; margin-bottom: 14px !important } .eco-bst-proc-title { font-size: 15px !important; margin: 0 !important } .eco-bst-proc-detail { position: relative !important; inset: auto !important; opacity: 1 !important; transform: none !important; pointer-events: auto !important; padding: 32px 24px !important; display: none !important; margin-bottom: 12px !important } .eco-bst-proc-detail.show { display: flex !important } .eco-bst-pd-title { font-size: 24px !important } } @media (max-width:640px) { .eco-services-grid, .eco-unlocks-grid { grid-template-columns: 1fr !important } .eco-bst-hero-ctas { flex-direction: column !important; align-items: stretch !important; width: 100% !important } .eco-btn-dark, .eco-btn-outline, .eco-btn-y { justify-content: center !important; width: 100% !important } .eco-mistake { padding: 16px 18px !important } .eco-svc-card { padding: 28px !important } .eco-unlock, .eco-why-card { padding: 22px !important } .eco-who-img img { height: 380px !important } .eco-marquee-item { padding: 0 20px !important; font-size: 11px !important; letter-spacing: 1px !important } } @media (max-width:380px) { .eco-bst-hero-title { font-size: 36px !important } .eco-h2 { font-size: 26px !important } }/* End custom CSS */