@charset "UTF-8";
@charset "UTF-8";
[data-aos][data-aos][data-aos-duration="50"],body[data-aos-duration="50"] [data-aos]{transition-duration:50ms}[data-aos][data-aos][data-aos-delay="50"],body[data-aos-delay="50"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="50"].aos-animate,body[data-aos-delay="50"] [data-aos].aos-animate{transition-delay:50ms}[data-aos][data-aos][data-aos-duration="100"],body[data-aos-duration="100"] [data-aos]{transition-duration:.1s}[data-aos][data-aos][data-aos-delay="100"],body[data-aos-delay="100"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="100"].aos-animate,body[data-aos-delay="100"] [data-aos].aos-animate{transition-delay:.1s}[data-aos][data-aos][data-aos-duration="150"],body[data-aos-duration="150"] [data-aos]{transition-duration:.15s}[data-aos][data-aos][data-aos-delay="150"],body[data-aos-delay="150"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="150"].aos-animate,body[data-aos-delay="150"] [data-aos].aos-animate{transition-delay:.15s}[data-aos][data-aos][data-aos-duration="200"],body[data-aos-duration="200"] [data-aos]{transition-duration:.2s}[data-aos][data-aos][data-aos-delay="200"],body[data-aos-delay="200"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="200"].aos-animate,body[data-aos-delay="200"] [data-aos].aos-animate{transition-delay:.2s}[data-aos][data-aos][data-aos-duration="250"],body[data-aos-duration="250"] [data-aos]{transition-duration:.25s}[data-aos][data-aos][data-aos-delay="250"],body[data-aos-delay="250"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="250"].aos-animate,body[data-aos-delay="250"] [data-aos].aos-animate{transition-delay:.25s}[data-aos][data-aos][data-aos-duration="300"],body[data-aos-duration="300"] [data-aos]{transition-duration:.3s}[data-aos][data-aos][data-aos-delay="300"],body[data-aos-delay="300"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="300"].aos-animate,body[data-aos-delay="300"] [data-aos].aos-animate{transition-delay:.3s}[data-aos][data-aos][data-aos-duration="350"],body[data-aos-duration="350"] [data-aos]{transition-duration:.35s}[data-aos][data-aos][data-aos-delay="350"],body[data-aos-delay="350"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="350"].aos-animate,body[data-aos-delay="350"] [data-aos].aos-animate{transition-delay:.35s}[data-aos][data-aos][data-aos-duration="400"],body[data-aos-duration="400"] [data-aos]{transition-duration:.4s}[data-aos][data-aos][data-aos-delay="400"],body[data-aos-delay="400"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="400"].aos-animate,body[data-aos-delay="400"] [data-aos].aos-animate{transition-delay:.4s}[data-aos][data-aos][data-aos-duration="450"],body[data-aos-duration="450"] [data-aos]{transition-duration:.45s}[data-aos][data-aos][data-aos-delay="450"],body[data-aos-delay="450"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="450"].aos-animate,body[data-aos-delay="450"] [data-aos].aos-animate{transition-delay:.45s}[data-aos][data-aos][data-aos-duration="500"],body[data-aos-duration="500"] [data-aos]{transition-duration:.5s}[data-aos][data-aos][data-aos-delay="500"],body[data-aos-delay="500"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="500"].aos-animate,body[data-aos-delay="500"] [data-aos].aos-animate{transition-delay:.5s}[data-aos][data-aos][data-aos-duration="550"],body[data-aos-duration="550"] [data-aos]{transition-duration:.55s}[data-aos][data-aos][data-aos-delay="550"],body[data-aos-delay="550"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="550"].aos-animate,body[data-aos-delay="550"] [data-aos].aos-animate{transition-delay:.55s}[data-aos][data-aos][data-aos-duration="600"],body[data-aos-duration="600"] [data-aos]{transition-duration:.6s}[data-aos][data-aos][data-aos-delay="600"],body[data-aos-delay="600"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="600"].aos-animate,body[data-aos-delay="600"] [data-aos].aos-animate{transition-delay:.6s}[data-aos][data-aos][data-aos-duration="650"],body[data-aos-duration="650"] [data-aos]{transition-duration:.65s}[data-aos][data-aos][data-aos-delay="650"],body[data-aos-delay="650"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="650"].aos-animate,body[data-aos-delay="650"] [data-aos].aos-animate{transition-delay:.65s}[data-aos][data-aos][data-aos-duration="700"],body[data-aos-duration="700"] [data-aos]{transition-duration:.7s}[data-aos][data-aos][data-aos-delay="700"],body[data-aos-delay="700"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="700"].aos-animate,body[data-aos-delay="700"] [data-aos].aos-animate{transition-delay:.7s}[data-aos][data-aos][data-aos-duration="750"],body[data-aos-duration="750"] [data-aos]{transition-duration:.75s}[data-aos][data-aos][data-aos-delay="750"],body[data-aos-delay="750"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="750"].aos-animate,body[data-aos-delay="750"] [data-aos].aos-animate{transition-delay:.75s}[data-aos][data-aos][data-aos-duration="800"],body[data-aos-duration="800"] [data-aos]{transition-duration:.8s}[data-aos][data-aos][data-aos-delay="800"],body[data-aos-delay="800"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="800"].aos-animate,body[data-aos-delay="800"] [data-aos].aos-animate{transition-delay:.8s}[data-aos][data-aos][data-aos-duration="850"],body[data-aos-duration="850"] [data-aos]{transition-duration:.85s}[data-aos][data-aos][data-aos-delay="850"],body[data-aos-delay="850"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="850"].aos-animate,body[data-aos-delay="850"] [data-aos].aos-animate{transition-delay:.85s}[data-aos][data-aos][data-aos-duration="900"],body[data-aos-duration="900"] [data-aos]{transition-duration:.9s}[data-aos][data-aos][data-aos-delay="900"],body[data-aos-delay="900"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="900"].aos-animate,body[data-aos-delay="900"] [data-aos].aos-animate{transition-delay:.9s}[data-aos][data-aos][data-aos-duration="950"],body[data-aos-duration="950"] [data-aos]{transition-duration:.95s}[data-aos][data-aos][data-aos-delay="950"],body[data-aos-delay="950"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="950"].aos-animate,body[data-aos-delay="950"] [data-aos].aos-animate{transition-delay:.95s}[data-aos][data-aos][data-aos-duration="1000"],body[data-aos-duration="1000"] [data-aos]{transition-duration:1s}[data-aos][data-aos][data-aos-delay="1000"],body[data-aos-delay="1000"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1000"].aos-animate,body[data-aos-delay="1000"] [data-aos].aos-animate{transition-delay:1s}[data-aos][data-aos][data-aos-duration="1050"],body[data-aos-duration="1050"] [data-aos]{transition-duration:1.05s}[data-aos][data-aos][data-aos-delay="1050"],body[data-aos-delay="1050"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1050"].aos-animate,body[data-aos-delay="1050"] [data-aos].aos-animate{transition-delay:1.05s}[data-aos][data-aos][data-aos-duration="1100"],body[data-aos-duration="1100"] [data-aos]{transition-duration:1.1s}[data-aos][data-aos][data-aos-delay="1100"],body[data-aos-delay="1100"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1100"].aos-animate,body[data-aos-delay="1100"] [data-aos].aos-animate{transition-delay:1.1s}[data-aos][data-aos][data-aos-duration="1150"],body[data-aos-duration="1150"] [data-aos]{transition-duration:1.15s}[data-aos][data-aos][data-aos-delay="1150"],body[data-aos-delay="1150"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1150"].aos-animate,body[data-aos-delay="1150"] [data-aos].aos-animate{transition-delay:1.15s}[data-aos][data-aos][data-aos-duration="1200"],body[data-aos-duration="1200"] [data-aos]{transition-duration:1.2s}[data-aos][data-aos][data-aos-delay="1200"],body[data-aos-delay="1200"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1200"].aos-animate,body[data-aos-delay="1200"] [data-aos].aos-animate{transition-delay:1.2s}[data-aos][data-aos][data-aos-duration="1250"],body[data-aos-duration="1250"] [data-aos]{transition-duration:1.25s}[data-aos][data-aos][data-aos-delay="1250"],body[data-aos-delay="1250"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1250"].aos-animate,body[data-aos-delay="1250"] [data-aos].aos-animate{transition-delay:1.25s}[data-aos][data-aos][data-aos-duration="1300"],body[data-aos-duration="1300"] [data-aos]{transition-duration:1.3s}[data-aos][data-aos][data-aos-delay="1300"],body[data-aos-delay="1300"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1300"].aos-animate,body[data-aos-delay="1300"] [data-aos].aos-animate{transition-delay:1.3s}[data-aos][data-aos][data-aos-duration="1350"],body[data-aos-duration="1350"] [data-aos]{transition-duration:1.35s}[data-aos][data-aos][data-aos-delay="1350"],body[data-aos-delay="1350"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1350"].aos-animate,body[data-aos-delay="1350"] [data-aos].aos-animate{transition-delay:1.35s}[data-aos][data-aos][data-aos-duration="1400"],body[data-aos-duration="1400"] [data-aos]{transition-duration:1.4s}[data-aos][data-aos][data-aos-delay="1400"],body[data-aos-delay="1400"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1400"].aos-animate,body[data-aos-delay="1400"] [data-aos].aos-animate{transition-delay:1.4s}[data-aos][data-aos][data-aos-duration="1450"],body[data-aos-duration="1450"] [data-aos]{transition-duration:1.45s}[data-aos][data-aos][data-aos-delay="1450"],body[data-aos-delay="1450"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1450"].aos-animate,body[data-aos-delay="1450"] [data-aos].aos-animate{transition-delay:1.45s}[data-aos][data-aos][data-aos-duration="1500"],body[data-aos-duration="1500"] [data-aos]{transition-duration:1.5s}[data-aos][data-aos][data-aos-delay="1500"],body[data-aos-delay="1500"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1500"].aos-animate,body[data-aos-delay="1500"] [data-aos].aos-animate{transition-delay:1.5s}[data-aos][data-aos][data-aos-duration="1550"],body[data-aos-duration="1550"] [data-aos]{transition-duration:1.55s}[data-aos][data-aos][data-aos-delay="1550"],body[data-aos-delay="1550"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1550"].aos-animate,body[data-aos-delay="1550"] [data-aos].aos-animate{transition-delay:1.55s}[data-aos][data-aos][data-aos-duration="1600"],body[data-aos-duration="1600"] [data-aos]{transition-duration:1.6s}[data-aos][data-aos][data-aos-delay="1600"],body[data-aos-delay="1600"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1600"].aos-animate,body[data-aos-delay="1600"] [data-aos].aos-animate{transition-delay:1.6s}[data-aos][data-aos][data-aos-duration="1650"],body[data-aos-duration="1650"] [data-aos]{transition-duration:1.65s}[data-aos][data-aos][data-aos-delay="1650"],body[data-aos-delay="1650"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1650"].aos-animate,body[data-aos-delay="1650"] [data-aos].aos-animate{transition-delay:1.65s}[data-aos][data-aos][data-aos-duration="1700"],body[data-aos-duration="1700"] [data-aos]{transition-duration:1.7s}[data-aos][data-aos][data-aos-delay="1700"],body[data-aos-delay="1700"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1700"].aos-animate,body[data-aos-delay="1700"] [data-aos].aos-animate{transition-delay:1.7s}[data-aos][data-aos][data-aos-duration="1750"],body[data-aos-duration="1750"] [data-aos]{transition-duration:1.75s}[data-aos][data-aos][data-aos-delay="1750"],body[data-aos-delay="1750"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1750"].aos-animate,body[data-aos-delay="1750"] [data-aos].aos-animate{transition-delay:1.75s}[data-aos][data-aos][data-aos-duration="1800"],body[data-aos-duration="1800"] [data-aos]{transition-duration:1.8s}[data-aos][data-aos][data-aos-delay="1800"],body[data-aos-delay="1800"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1800"].aos-animate,body[data-aos-delay="1800"] [data-aos].aos-animate{transition-delay:1.8s}[data-aos][data-aos][data-aos-duration="1850"],body[data-aos-duration="1850"] [data-aos]{transition-duration:1.85s}[data-aos][data-aos][data-aos-delay="1850"],body[data-aos-delay="1850"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1850"].aos-animate,body[data-aos-delay="1850"] [data-aos].aos-animate{transition-delay:1.85s}[data-aos][data-aos][data-aos-duration="1900"],body[data-aos-duration="1900"] [data-aos]{transition-duration:1.9s}[data-aos][data-aos][data-aos-delay="1900"],body[data-aos-delay="1900"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1900"].aos-animate,body[data-aos-delay="1900"] [data-aos].aos-animate{transition-delay:1.9s}[data-aos][data-aos][data-aos-duration="1950"],body[data-aos-duration="1950"] [data-aos]{transition-duration:1.95s}[data-aos][data-aos][data-aos-delay="1950"],body[data-aos-delay="1950"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1950"].aos-animate,body[data-aos-delay="1950"] [data-aos].aos-animate{transition-delay:1.95s}[data-aos][data-aos][data-aos-duration="2000"],body[data-aos-duration="2000"] [data-aos]{transition-duration:2s}[data-aos][data-aos][data-aos-delay="2000"],body[data-aos-delay="2000"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2000"].aos-animate,body[data-aos-delay="2000"] [data-aos].aos-animate{transition-delay:2s}[data-aos][data-aos][data-aos-duration="2050"],body[data-aos-duration="2050"] [data-aos]{transition-duration:2.05s}[data-aos][data-aos][data-aos-delay="2050"],body[data-aos-delay="2050"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2050"].aos-animate,body[data-aos-delay="2050"] [data-aos].aos-animate{transition-delay:2.05s}[data-aos][data-aos][data-aos-duration="2100"],body[data-aos-duration="2100"] [data-aos]{transition-duration:2.1s}[data-aos][data-aos][data-aos-delay="2100"],body[data-aos-delay="2100"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2100"].aos-animate,body[data-aos-delay="2100"] [data-aos].aos-animate{transition-delay:2.1s}[data-aos][data-aos][data-aos-duration="2150"],body[data-aos-duration="2150"] [data-aos]{transition-duration:2.15s}[data-aos][data-aos][data-aos-delay="2150"],body[data-aos-delay="2150"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2150"].aos-animate,body[data-aos-delay="2150"] [data-aos].aos-animate{transition-delay:2.15s}[data-aos][data-aos][data-aos-duration="2200"],body[data-aos-duration="2200"] [data-aos]{transition-duration:2.2s}[data-aos][data-aos][data-aos-delay="2200"],body[data-aos-delay="2200"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2200"].aos-animate,body[data-aos-delay="2200"] [data-aos].aos-animate{transition-delay:2.2s}[data-aos][data-aos][data-aos-duration="2250"],body[data-aos-duration="2250"] [data-aos]{transition-duration:2.25s}[data-aos][data-aos][data-aos-delay="2250"],body[data-aos-delay="2250"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2250"].aos-animate,body[data-aos-delay="2250"] [data-aos].aos-animate{transition-delay:2.25s}[data-aos][data-aos][data-aos-duration="2300"],body[data-aos-duration="2300"] [data-aos]{transition-duration:2.3s}[data-aos][data-aos][data-aos-delay="2300"],body[data-aos-delay="2300"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2300"].aos-animate,body[data-aos-delay="2300"] [data-aos].aos-animate{transition-delay:2.3s}[data-aos][data-aos][data-aos-duration="2350"],body[data-aos-duration="2350"] [data-aos]{transition-duration:2.35s}[data-aos][data-aos][data-aos-delay="2350"],body[data-aos-delay="2350"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2350"].aos-animate,body[data-aos-delay="2350"] [data-aos].aos-animate{transition-delay:2.35s}[data-aos][data-aos][data-aos-duration="2400"],body[data-aos-duration="2400"] [data-aos]{transition-duration:2.4s}[data-aos][data-aos][data-aos-delay="2400"],body[data-aos-delay="2400"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2400"].aos-animate,body[data-aos-delay="2400"] [data-aos].aos-animate{transition-delay:2.4s}[data-aos][data-aos][data-aos-duration="2450"],body[data-aos-duration="2450"] [data-aos]{transition-duration:2.45s}[data-aos][data-aos][data-aos-delay="2450"],body[data-aos-delay="2450"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2450"].aos-animate,body[data-aos-delay="2450"] [data-aos].aos-animate{transition-delay:2.45s}[data-aos][data-aos][data-aos-duration="2500"],body[data-aos-duration="2500"] [data-aos]{transition-duration:2.5s}[data-aos][data-aos][data-aos-delay="2500"],body[data-aos-delay="2500"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2500"].aos-animate,body[data-aos-delay="2500"] [data-aos].aos-animate{transition-delay:2.5s}[data-aos][data-aos][data-aos-duration="2550"],body[data-aos-duration="2550"] [data-aos]{transition-duration:2.55s}[data-aos][data-aos][data-aos-delay="2550"],body[data-aos-delay="2550"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2550"].aos-animate,body[data-aos-delay="2550"] [data-aos].aos-animate{transition-delay:2.55s}[data-aos][data-aos][data-aos-duration="2600"],body[data-aos-duration="2600"] [data-aos]{transition-duration:2.6s}[data-aos][data-aos][data-aos-delay="2600"],body[data-aos-delay="2600"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2600"].aos-animate,body[data-aos-delay="2600"] [data-aos].aos-animate{transition-delay:2.6s}[data-aos][data-aos][data-aos-duration="2650"],body[data-aos-duration="2650"] [data-aos]{transition-duration:2.65s}[data-aos][data-aos][data-aos-delay="2650"],body[data-aos-delay="2650"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2650"].aos-animate,body[data-aos-delay="2650"] [data-aos].aos-animate{transition-delay:2.65s}[data-aos][data-aos][data-aos-duration="2700"],body[data-aos-duration="2700"] [data-aos]{transition-duration:2.7s}[data-aos][data-aos][data-aos-delay="2700"],body[data-aos-delay="2700"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2700"].aos-animate,body[data-aos-delay="2700"] [data-aos].aos-animate{transition-delay:2.7s}[data-aos][data-aos][data-aos-duration="2750"],body[data-aos-duration="2750"] [data-aos]{transition-duration:2.75s}[data-aos][data-aos][data-aos-delay="2750"],body[data-aos-delay="2750"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2750"].aos-animate,body[data-aos-delay="2750"] [data-aos].aos-animate{transition-delay:2.75s}[data-aos][data-aos][data-aos-duration="2800"],body[data-aos-duration="2800"] [data-aos]{transition-duration:2.8s}[data-aos][data-aos][data-aos-delay="2800"],body[data-aos-delay="2800"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2800"].aos-animate,body[data-aos-delay="2800"] [data-aos].aos-animate{transition-delay:2.8s}[data-aos][data-aos][data-aos-duration="2850"],body[data-aos-duration="2850"] [data-aos]{transition-duration:2.85s}[data-aos][data-aos][data-aos-delay="2850"],body[data-aos-delay="2850"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2850"].aos-animate,body[data-aos-delay="2850"] [data-aos].aos-animate{transition-delay:2.85s}[data-aos][data-aos][data-aos-duration="2900"],body[data-aos-duration="2900"] [data-aos]{transition-duration:2.9s}[data-aos][data-aos][data-aos-delay="2900"],body[data-aos-delay="2900"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2900"].aos-animate,body[data-aos-delay="2900"] [data-aos].aos-animate{transition-delay:2.9s}[data-aos][data-aos][data-aos-duration="2950"],body[data-aos-duration="2950"] [data-aos]{transition-duration:2.95s}[data-aos][data-aos][data-aos-delay="2950"],body[data-aos-delay="2950"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2950"].aos-animate,body[data-aos-delay="2950"] [data-aos].aos-animate{transition-delay:2.95s}[data-aos][data-aos][data-aos-duration="3000"],body[data-aos-duration="3000"] [data-aos]{transition-duration:3s}[data-aos][data-aos][data-aos-delay="3000"],body[data-aos-delay="3000"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="3000"].aos-animate,body[data-aos-delay="3000"] [data-aos].aos-animate{transition-delay:3s}[data-aos][data-aos][data-aos-easing=linear],body[data-aos-easing=linear] [data-aos]{transition-timing-function:cubic-bezier(.25,.25,.75,.75)}[data-aos][data-aos][data-aos-easing=ease],body[data-aos-easing=ease] [data-aos]{transition-timing-function:ease}[data-aos][data-aos][data-aos-easing=ease-in],body[data-aos-easing=ease-in] [data-aos]{transition-timing-function:ease-in}[data-aos][data-aos][data-aos-easing=ease-out],body[data-aos-easing=ease-out] [data-aos]{transition-timing-function:ease-out}[data-aos][data-aos][data-aos-easing=ease-in-out],body[data-aos-easing=ease-in-out] [data-aos]{transition-timing-function:ease-in-out}[data-aos][data-aos][data-aos-easing=ease-in-back],body[data-aos-easing=ease-in-back] [data-aos]{transition-timing-function:cubic-bezier(.6,-.28,.735,.045)}[data-aos][data-aos][data-aos-easing=ease-out-back],body[data-aos-easing=ease-out-back] [data-aos]{transition-timing-function:cubic-bezier(.175,.885,.32,1.275)}[data-aos][data-aos][data-aos-easing=ease-in-out-back],body[data-aos-easing=ease-in-out-back] [data-aos]{transition-timing-function:cubic-bezier(.68,-.55,.265,1.55)}[data-aos][data-aos][data-aos-easing=ease-in-sine],body[data-aos-easing=ease-in-sine] [data-aos]{transition-timing-function:cubic-bezier(.47,0,.745,.715)}[data-aos][data-aos][data-aos-easing=ease-out-sine],body[data-aos-easing=ease-out-sine] [data-aos]{transition-timing-function:cubic-bezier(.39,.575,.565,1)}[data-aos][data-aos][data-aos-easing=ease-in-out-sine],body[data-aos-easing=ease-in-out-sine] [data-aos]{transition-timing-function:cubic-bezier(.445,.05,.55,.95)}[data-aos][data-aos][data-aos-easing=ease-in-quad],body[data-aos-easing=ease-in-quad] [data-aos]{transition-timing-function:cubic-bezier(.55,.085,.68,.53)}[data-aos][data-aos][data-aos-easing=ease-out-quad],body[data-aos-easing=ease-out-quad] [data-aos]{transition-timing-function:cubic-bezier(.25,.46,.45,.94)}[data-aos][data-aos][data-aos-easing=ease-in-out-quad],body[data-aos-easing=ease-in-out-quad] [data-aos]{transition-timing-function:cubic-bezier(.455,.03,.515,.955)}[data-aos][data-aos][data-aos-easing=ease-in-cubic],body[data-aos-easing=ease-in-cubic] [data-aos]{transition-timing-function:cubic-bezier(.55,.085,.68,.53)}[data-aos][data-aos][data-aos-easing=ease-out-cubic],body[data-aos-easing=ease-out-cubic] [data-aos]{transition-timing-function:cubic-bezier(.25,.46,.45,.94)}[data-aos][data-aos][data-aos-easing=ease-in-out-cubic],body[data-aos-easing=ease-in-out-cubic] [data-aos]{transition-timing-function:cubic-bezier(.455,.03,.515,.955)}[data-aos][data-aos][data-aos-easing=ease-in-quart],body[data-aos-easing=ease-in-quart] [data-aos]{transition-timing-function:cubic-bezier(.55,.085,.68,.53)}[data-aos][data-aos][data-aos-easing=ease-out-quart],body[data-aos-easing=ease-out-quart] [data-aos]{transition-timing-function:cubic-bezier(.25,.46,.45,.94)}[data-aos][data-aos][data-aos-easing=ease-in-out-quart],body[data-aos-easing=ease-in-out-quart] [data-aos]{transition-timing-function:cubic-bezier(.455,.03,.515,.955)}[data-aos^=fade][data-aos^=fade]{opacity:0;transition-property:opacity,transform}[data-aos^=fade][data-aos^=fade].aos-animate{opacity:1;transform:translateZ(0)}[data-aos=fade-up]{transform:translate3d(0,100px,0)}[data-aos=fade-down]{transform:translate3d(0,-100px,0)}[data-aos=fade-right]{transform:translate3d(-100px,0,0)}[data-aos=fade-left]{transform:translate3d(100px,0,0)}[data-aos=fade-up-right]{transform:translate3d(-100px,100px,0)}[data-aos=fade-up-left]{transform:translate3d(100px,100px,0)}[data-aos=fade-down-right]{transform:translate3d(-100px,-100px,0)}[data-aos=fade-down-left]{transform:translate3d(100px,-100px,0)}[data-aos^=zoom][data-aos^=zoom]{opacity:0;transition-property:opacity,transform}[data-aos^=zoom][data-aos^=zoom].aos-animate{opacity:1;transform:translateZ(0) scale(1)}[data-aos=zoom-in]{transform:scale(.6)}[data-aos=zoom-in-up]{transform:translate3d(0,100px,0) scale(.6)}[data-aos=zoom-in-down]{transform:translate3d(0,-100px,0) scale(.6)}[data-aos=zoom-in-right]{transform:translate3d(-100px,0,0) scale(.6)}[data-aos=zoom-in-left]{transform:translate3d(100px,0,0) scale(.6)}[data-aos=zoom-out]{transform:scale(1.2)}[data-aos=zoom-out-up]{transform:translate3d(0,100px,0) scale(1.2)}[data-aos=zoom-out-down]{transform:translate3d(0,-100px,0) scale(1.2)}[data-aos=zoom-out-right]{transform:translate3d(-100px,0,0) scale(1.2)}[data-aos=zoom-out-left]{transform:translate3d(100px,0,0) scale(1.2)}[data-aos^=slide][data-aos^=slide]{transition-property:transform}[data-aos^=slide][data-aos^=slide].aos-animate{transform:translateZ(0)}[data-aos=slide-up]{transform:translate3d(0,100%,0)}[data-aos=slide-down]{transform:translate3d(0,-100%,0)}[data-aos=slide-right]{transform:translate3d(-100%,0,0)}[data-aos=slide-left]{transform:translate3d(100%,0,0)}[data-aos^=flip][data-aos^=flip]{backface-visibility:hidden;transition-property:transform}[data-aos=flip-left]{transform:perspective(2500px) rotateY(-100deg)}[data-aos=flip-left].aos-animate{transform:perspective(2500px) rotateY(0)}[data-aos=flip-right]{transform:perspective(2500px) rotateY(100deg)}[data-aos=flip-right].aos-animate{transform:perspective(2500px) rotateY(0)}[data-aos=flip-up]{transform:perspective(2500px) rotateX(-100deg)}[data-aos=flip-up].aos-animate{transform:perspective(2500px) rotateX(0)}[data-aos=flip-down]{transform:perspective(2500px) rotateX(100deg)}[data-aos=flip-down].aos-animate{transform:perspective(2500px) rotateX(0)}
  :root { --color-background: #ffffff;
--color-foreground: #0f172a;
--color-card: #ffffff;
--color-primary: #1565ff;
--color-primary-foreground: #ffffff;
--color-muted: #f1f5f9; --color-muted-foreground: var(--color-foreground);
--color-border: #e2e8f0;
--color-hover-surface: #f1f5f9;
--color-icon: #334155;
--color-fab: #ffffff;
--color-fab-border: #e2e8f0;
--color-dots: #e2e8f0;
--color-modal: #ffffff;
--color-modal-header: #f8fafc;
--color-modal-border: #e2e8f0;
--color-modal-eyebrow: var(--color-blue-600);
--color-modal-label: #334155;
--color-input: #f8fafc;
--color-input-border: #e2e8f0;
--color-placeholder: #94a3b8;
--color-logo-tile: #ffffff;
--color-logo-tile-border: #f1f5f9; --color-white: #ffffff;
--color-navy: #0f172a;
--color-slate-950: #020618;
--color-slate-400: #90a1b9;
--color-gray-500: #6a7282;
--color-slate-500: #62748e;
--color-blue-600: #155dfc;
--color-sky-500: #00a5ef;
--color-red-600: #e40014;
--color-whatsapp: #25d366;
--color-ink: #050505;
--color-slate-200: #e2e8f0;
--color-slate-600: #45556c;
--color-slate-300: #cad5e2;
--color-blue-300: #90c5ff;
--color-blue-400: #54a2ff;
--color-blue-500: #3080ff;
--color-blue-950: #162456;
--color-cyan-300: #53eafd;
--color-cyan-400: #00d2ef;
--color-cyan-500: #00b7d7;
--color-indigo-600: #4f39f6;
--color-purple-500: #ac4bff;
--color-emerald-500: #00bb7f;
--color-amber-500: #f99c00;
--color-rose-500: #ff2357;
--color-slate-50: #f8fafc;
--color-slate-100: #f1f5f9;
--color-slate-800: #1d293d;
--color-blue-50: #eff6ff;
--color-blue-700: #1447e6;
--color-blue-100: #dbeafe;
--color-blue-200: #bedbff;
--color-zinc-400: #9f9fa9;
--color-blue-900: #1c398e;
--color-indigo-400: #7d87ff;
--color-indigo-500: #625fff;
--color-purple-50: #faf5ff;
--color-purple-200: #e9d5ff;
--color-purple-400: #c07eff;
--color-purple-600: #9810fa;
--color-purple-900: #59168b;
--color-orange-50: #fff7ed;
--color-orange-200: #ffd7a8;
--color-orange-400: #ff8b1a;
--color-orange-500: #fe6e00;
--color-orange-600: #f05100;
--color-orange-900: #7e2a0c;
--color-emerald-50: #ecfdf5;
--color-emerald-200: #a4f4cf;
--color-emerald-400: #00d294;
--color-emerald-600: #009767;
--color-emerald-900: #004e3b;
--color-grid-line: rgb(128 128 128 / 0.07);
--color-grid-line-soft: rgb(128 128 128 / 0.03); --font-primary: "Poppins", ui-sans-serif, system-ui, sans-serif; --radius-sm: 0.75rem;
--radius: 1.25rem;
--radius-lg: 2rem;
--radius-full: 9999px;
--shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
--shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
--shadow-premium: 0 10px 40px -10px rgb(0 0 0 / 0.05);
--shadow-surface: var(--shadow-premium);
--shadow-primary: 0 20px 25px -5px color-mix(in srgb, var(--color-primary) 20%, transparent); --container-max: 80rem;
--header-offset: 6rem; --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--transition: 0.3s ease;
color-scheme: light;
}
[data-theme="dark"] {
--color-background: #020817;
--color-foreground: #f8fafc;
--color-card: #0f172a;
--color-primary: #3b82f6;
--color-muted: #1e293b;
--color-muted-foreground: var(--color-foreground);
--color-border: #1e293b;
--color-hover-surface: #1e293b;
--color-icon: #cbd5e1;
--color-fab: #1e293b;
--color-fab-border: #334155;
--color-dots: #1e293b;
--color-modal: #0f172a;
--color-modal-header: rgb(30 41 59 / 0.5);
--color-modal-border: #1e293b;
--color-modal-eyebrow: var(--color-blue-400);
--color-modal-label: #cbd5e1;
--color-input: rgb(30 41 59 / 0.5);
--color-input-border: #334155;
--color-placeholder: #64748b;
--color-logo-tile: rgb(255 255 255 / 0.95);
--color-logo-tile-border: rgb(255 255 255 / 0.2);
--shadow-surface: none;
color-scheme: dark;
} *,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-padding-top: var(--header-offset);
}
body {
min-height: 100vh;
font-family: var(--font-primary);
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: var(--color-foreground);
background-color: var(--color-background);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: clip;
transition: background-color var(--transition), color var(--transition);
}
::selection {
color: var(--color-primary);
background: color-mix(in srgb, var(--color-primary) 10%, transparent);
}
a {
color: inherit;
text-decoration: none;
}
img,
svg {
display: block;
max-width: 100%;
}
img {
height: auto;
}
ul,
ol {
list-style: none;
}
button,
input,
select,
textarea {
font: inherit;
color: inherit;
}
button {
background: none;
border: 0;
cursor: pointer;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 700;
line-height: 1.25;
color: inherit;
}
em {
font-style: italic;
}
address {
font-style: normal;
}
:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.skip-link {
position: fixed;
top: 1rem;
left: 1rem;
z-index: 200;
padding: 0.75rem 1.25rem;
border-radius: var(--radius-full);
font-weight: 700;
color: var(--color-primary-foreground);
background: var(--color-primary);
transform: translateY(-200%);
transition: transform var(--transition);
}
.skip-link:focus-visible {
transform: none;
} .h1 {
font-size: 3.75rem;
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.025em;
}
.h2 {
font-size: 3rem;
font-weight: 700;
line-height: 1;
letter-spacing: -0.025em;
}
.h3 {
font-size: 1.5rem;
font-weight: 800;
line-height: 1.33;
letter-spacing: -0.025em;
}
.h4 {
font-size: 1.125rem;
font-weight: 700;
line-height: 1.55;
}
.text-gradient {
padding: 0 0.25rem 0.25rem 0;
font-weight: 800;
color: transparent;
background: linear-gradient(to right, var(--color-primary), var(--color-blue-600));
-webkit-background-clip: text;
background-clip: text;
}
.text-gradient-sky {
padding-right: 0.5rem;
font-weight: inherit;
background-image: linear-gradient(to right, var(--color-blue-600), var(--color-primary), var(--color-sky-500));
}
.text-gradient-indigo {
padding-right: 0.5rem;
background-image: linear-gradient(to right, var(--color-blue-600), var(--color-indigo-600));
}
[data-theme="dark"] .text-gradient-indigo {
background-image: linear-gradient(to right, var(--color-blue-400), var(--color-indigo-400));
}
.text-gradient-blue {
padding-right: 0.5rem;
font-weight: 500;
background-image: linear-gradient(to right, var(--color-blue-400), var(--color-primary));
} .icon {
flex-shrink: 0;
width: 1.5rem;
height: 1.5rem;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.icon-fill {
fill: currentColor;
} .container {
max-width: 1310px;
width: 100%;
padding: 0 15px;
margin: 0 auto;
}
.section-padding {
padding-block: 8rem;
}
.section-grid-bg {
position: relative;
isolation: isolate;
}
.section-grid-bg::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background-image:
linear-gradient(to right, var(--color-grid-line-soft) 1px, transparent 1px),
linear-gradient(to bottom, var(--color-grid-line-soft) 1px, transparent 1px);
background-size: 40px 40px;
} .btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
height: 2.75rem;
padding-inline: 2rem;
border: 1px solid transparent;
border-radius: var(--radius-full);
font-size: 0.875rem;
font-weight: 700;
line-height: 1.25rem;
white-space: nowrap;
cursor: pointer;
transition: background-color var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.btn-icon {
width: 1rem;
height: 1rem;
transition: transform var(--transition);
}
.btn:hover .btn-icon {
transform: translateX(0.25rem);
}
.btn-primary {
color: var(--color-primary-foreground);
background-color: var(--color-primary);
box-shadow: var(--shadow-primary);
}
.btn-primary:hover {
background-color: color-mix(in srgb, var(--color-primary) 90%, transparent);
transform: scale(1.05);
}
.btn-ghost {
color: var(--color-foreground);
}
.btn-ghost:hover {
background-color: var(--color-muted);
}
.btn-outline {
font-weight: 600;
color: var(--color-foreground);
border-color: var(--color-border);
}
.btn-outline:hover {
border-color: color-mix(in srgb, var(--color-muted-foreground) 30%, transparent);
background-color: color-mix(in srgb, var(--color-muted) 30%, transparent);
}
.btn-lg {
width: auto;
padding-inline: 2rem;
font-size: 1rem;
}
.btn-lg.btn-primary {
box-shadow: 0 10px 15px -3px color-mix(in srgb, var(--color-primary) 20%, transparent);
}
.btn-lg.btn-primary:hover {
transform: scale(1.02);
}
.btn-xl {
height: 4rem;
padding-inline: 2.5rem;
font-size: 1.25rem;
line-height: 1.75rem;
}
.btn-xl.btn-primary {
box-shadow: 0 25px 50px -12px color-mix(in srgb, var(--color-primary) 20%, transparent);
}
.btn-xl .btn-icon {
width: 1.25rem;
height: 1.25rem;
}
.btn-block {
width: 100%;
height: 3rem;
border-radius: var(--radius-sm);
font-size: 1rem;
}
.btn-block:hover {
transform: none;
} .title-wrap {
max-width: 48rem;
margin-bottom: 3rem;
}
.title-wrap-center {
display: flex;
flex-direction: column;
align-items: center;
margin-inline: auto;
text-align: center;
}
.title-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 1.5rem;
padding: 0.375rem 1rem;
border: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
border-radius: var(--radius-full);
font-size: 0.625rem;
font-weight: 800;
line-height: 1rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-muted-foreground);
background-color: var(--color-muted);
box-shadow: var(--shadow-xs);
user-select: none;
}
.title-badge-primary {
font-size: 0.75rem;
font-weight: 700;
color: var(--color-primary);
border-color: color-mix(in srgb, var(--color-primary) 20%, transparent);
background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
}
.title-wrap .h2 {
margin-bottom: 1.5rem;
}
.title-description {
max-width: 42rem;
font-size: 0.875rem;
font-weight: 500;
line-height: 1.625;
color: var(--color-muted-foreground);
}
.title-description-lg {
max-width: none;
font-size: 1.125rem;
font-weight: 400;
}
.sub-header {
display: block;
margin-bottom: 0.75rem;
font-size: 0.875rem;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--color-primary);
}
.pulse-dot {
position: relative;
display: inline-flex;
width: 0.5rem;
height: 0.5rem;
}
.pulse-dot::before,
.pulse-dot::after {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
background-color: var(--color-primary);
}
.pulse-dot::before {
opacity: 0.75;
animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
} .header-wrap {
position: fixed;
inset: 0 0 auto;
z-index: 50;
padding: 27px 12px 0px 12px;
transition: transform 0.5s ease;
will-change: transform;
} .header-wrap.is-scrolled {
transform: translateY(-1rem);
}
.header-inner {
position: relative;
isolation: isolate;
display: flex;
align-items: center;
justify-content: space-between;
max-width: var(--container-max);
margin-inline: auto;
padding: 12px 12px 10px 12px;
border: 1px solid transparent;
border-radius: var(--radius-lg);
} .header-inner::before {
content: "";
position: absolute;
inset: -1px;
z-index: -1;
border: 1px solid color-mix(in srgb, var(--color-border) 50%, transparent);
border-radius: inherit;
background-color: color-mix(in srgb, var(--color-background) 80%, transparent);
-webkit-backdrop-filter: blur(24px);
backdrop-filter: blur(24px);
box-shadow: var(--shadow-premium);
opacity: 0;
pointer-events: none;
transition: opacity 0.5s ease;
}
.is-scrolled .header-inner::before {
opacity: 1;
} [data-theme="light"] .header-solid .header-inner::before {
background-color: color-mix(in srgb, var(--color-background) 95%, transparent);
opacity: 1;
}
.logo a {
display: flex;
align-items: center;
gap: 0.75rem;
}
.logo img {
width: 3rem;
height: 2.75rem;
object-fit: contain;
}
.logo-text {
display: flex;
flex-direction: column;
}
.logo-title {
font-size: 1.25rem;
font-weight: 700;
line-height: 1;
letter-spacing: -0.025em;
white-space: nowrap;
color: var(--color-foreground);
}
.logo-tagline {
display: block;
margin-top: 0.25rem;
font-size: 0.625rem;
font-weight: 700;
line-height: 1.2;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--color-primary);
}
.header-right {
display: flex;
align-items: center;
gap: 1.5rem;
padding-top: 0.25rem;
} .header-menu {
display: flex;
}
.header-menu > ul {
display: flex;
align-items: center;
gap: 1.5rem;
}
.header-menu > ul > li > a,
.menu-arrow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.25rem;
padding-block: 0.5rem;
font-size: 0.875rem;
font-weight: 700;
line-height: 1.25rem;
letter-spacing: 0.05em;
text-align: left;
text-transform: uppercase;
color: color-mix(in srgb, var(--color-foreground) 70%, transparent);
transition: color var(--transition);
}
.header-menu > ul > li > a:hover,
.menu-arrow:hover,
.menu-item-has-children.is-open > .menu-arrow {
color: var(--color-primary);
}
.menu-link-icon {
display: flex;
align-items: center;
justify-content: center;
transition: background-color var(--transition), color var(--transition), transform var(--transition);
}
.header-menu > ul > li > a .menu-link-icon {
display: none;
}
.menu-link-icon .icon {
width: 1rem;
height: 1rem;
transition: transform var(--transition);
}
.menu-arrow[aria-expanded="true"] .icon {
transform: rotate(180deg);
}
.menu-item-has-children {
position: relative;
padding-block: 0.5rem;
}
.sub-menu {
position: absolute;
top: 100%;
left: 50%;
z-index: 50;
display: block;
width: max-content;
margin-top: 0.5rem;
overflow: visible;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background-color: var(--color-background);
box-shadow: var(--shadow-xl);
opacity: 0;
visibility: hidden;
transform: translate(-50%, 0.5rem);
transition: opacity 0.2s ease, transform 0.2s var(--ease-out), visibility 0.2s;
} .sub-menu::before {
content: "";
position: absolute;
right: 0;
bottom: 100%;
left: 0;
height: 1rem;
}
.menu-item-has-children.is-open > .sub-menu {
opacity: 1;
visibility: visible;
transform: translate(-50%, 0);
}
.sub-menu-columns {
display: flex;
}
.sub-menu-group {
padding: 1.25rem 1.5rem;
}
.sub-menu-group:first-child {
border-top-left-radius: inherit;
}
.sub-menu-group + .sub-menu-group {
border-left: 1px solid var(--color-border);
border-top-right-radius: inherit;
}
.sub-menu-group-alt {
background-color: color-mix(in srgb, var(--color-primary) 2%, transparent);
}
.sub-menu-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.75rem;
}
.sub-menu-title {
font-size: 0.6875rem;
font-weight: 900;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-primary);
}
.sub-menu-view-all {
display: flex;
align-items: center;
gap: 0.25rem;
margin-left: 1.5rem;
font-size: 0.625rem;
font-weight: 700;
color: color-mix(in srgb, var(--color-foreground) 40%, transparent);
transition: color var(--transition);
}
.sub-menu-view-all .icon {
width: 0.75rem;
height: 0.75rem;
}
.sub-menu-list a,
.sub-menu-feature {
display: flex;
align-items: center;
gap: 0.625rem;
padding-block: 0.5rem;
font-size: 0.875rem;
font-weight: 500;
color: var(--color-foreground);
transition: color var(--transition);
}
.sub-menu-list a,
.sub-menu-feature span {
white-space: nowrap;
}
.sub-menu-list .icon,
.sub-menu-feature .icon {
width: 1rem;
height: 1rem;
color: color-mix(in srgb, var(--color-primary) 60%, transparent);
}
.sub-menu-view-all:hover,
.sub-menu-list a:hover,
.sub-menu-feature:hover {
color: var(--color-primary);
}
.sub-menu-footer {
padding: 1rem 1.5rem;
border-top: 1px solid var(--color-border);
border-bottom-right-radius: inherit;
border-bottom-left-radius: inherit;
background-color: var(--color-muted);
}
.sub-menu-footer .sub-menu-title {
margin-bottom: 0.5rem;
}
.sub-menu-feature {
padding-block: 0.25rem;
}
.sub-menu-feature .sub-menu-feature-arrow {
margin-left: auto;
color: color-mix(in srgb, var(--color-foreground) 30%, transparent);
transition: color var(--transition), transform var(--transition);
}
.sub-menu-feature:hover .sub-menu-feature-arrow {
color: var(--color-primary);
transform: translateX(0.25rem);
}
.header-menu-btn {
display: none;
width: 100%;
height: 4rem;
margin-top: 1.5rem;
border-radius: 1rem;
font-size: 1.25rem;
box-shadow: none;
}
.header-menu-btn:hover {
transform: none;
}
.header-divider {
display: block;
width: 1px;
height: 1.5rem;
background-color: var(--color-border);
}
.header-divider-mobile {
display: none;
margin-inline: 1rem;
}
.header-btn {
height: 3rem;
box-shadow: 0 20px 25px -5px color-mix(in srgb, var(--color-primary) 20%, transparent);
}
.menu-icon {
display: none;
}
.theme-toggle {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
color: var(--color-icon);
transition: background-color var(--transition);
}
.theme-toggle:hover {
background-color: var(--color-hover-surface);
}
.theme-toggle .icon {
position: absolute;
width: 1.2rem;
height: 1.2rem;
transition: transform 0.3s ease, opacity 0.3s ease;
}
.theme-toggle-moon,
[data-theme="dark"] .theme-toggle-sun {
opacity: 0;
transform: rotate(90deg) scale(0);
}
[data-theme="dark"] .theme-toggle-moon {
opacity: 1;
transform: none;
}
.menu-btn {
display: flex;
padding: 0.625rem;
border-radius: 50%;
color: var(--color-primary);
background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
transition: background-color var(--transition), color var(--transition);
}
.menu-btn:hover {
color: var(--color-white);
background-color: var(--color-primary);
}
.menu-btn-close,
.menu-open .menu-btn-open {
display: none;
}
.menu-open .menu-btn-close {
display: block;
} .hero-wrap {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 100dvh;
padding: 8rem 0 4rem;
overflow: hidden;
background-color: var(--color-background);
}
.hero-bg {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
}
.hero-bg-blob {
position: absolute;
width: 70%;
height: 70%;
border-radius: 50%;
}
.hero-bg-blob-top {
top: -20%;
left: -20%;
background: radial-gradient(closest-side, color-mix(in srgb, var(--color-primary) 5%, transparent), transparent);
}
.hero-bg-blob-bottom {
right: -20%;
bottom: -20%;
background: radial-gradient(closest-side, color-mix(in srgb, var(--color-primary) 10%, transparent), transparent);
}
.hero-bg-grid {
position: absolute;
inset: 0;
background-image:
linear-gradient(to right, var(--color-grid-line) 1px, transparent 1px),
linear-gradient(to bottom, var(--color-grid-line) 1px, transparent 1px);
background-size: 40px 40px;
-webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 0%, #000 70%, transparent 100%);
mask-image: radial-gradient(ellipse 60% 50% at 50% 0%, #000 70%, transparent 100%);
}
.hero-wrap > .container,
.about-hero-wrap > .container,
.cdsco-hero-wrap > .container,
.contact-hero-wrap > .container,
.blog-hero-wrap > .container,
.clients-wrap {
position: relative;
z-index: 1;
}
.hero-wrap > .container,
.about-hero-wrap > .container,
.cdsco-hero-wrap > .container,
.contact-hero-wrap > .container,
.blog-hero-wrap > .container {
padding: 0 32px;
}
.hero {
display: grid;
align-items: center;
gap: 2rem;
grid-template-columns: 7fr 5fr;
}
.hero-content {
display: flex;
flex-direction: column;
align-items: flex-start;
min-width: 0;
}
.hero-tagline {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 2rem;
padding: 0.5rem 1rem;
border: 1px solid color-mix(in srgb, var(--color-border) 50%, transparent);
border-radius: var(--radius-full);
font-size: 0.75rem;
font-weight: 700;
line-height: 1rem;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--color-muted-foreground);
background-color: color-mix(in srgb, var(--color-background) 80%, transparent);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
box-shadow: var(--shadow-md);
}
[data-theme="dark"] .hero-tagline {
box-shadow: none;
}
.hero-tagline .icon {
width: 0.75rem;
height: 0.75rem;
color: var(--color-primary);
}
.hero-tagline-highlight {
font-weight: 800;
color: var(--color-primary);
}
.hero-tagline-divider {
flex-shrink: 0;
width: 1px;
height: 0.75rem;
margin-inline: 0.25rem;
background-color: var(--color-border);
}
.hero-title {
margin-bottom: 2rem;
}
.hero-title em {
font-weight: 500;
color: var(--color-muted-foreground);
}
.hero-title-break {
display: inline;
}
.hero-description {
max-width: 42rem;
margin-bottom: 2.5rem;
font-size: 1.125rem;
line-height: 1.625;
color: var(--color-muted-foreground);
}
.hero-certifications {
width: 100%;
margin-bottom: 3rem;
}
.hero-certifications-title {
margin-bottom: 1.5rem;
font-size: 0.75rem;
font-weight: 700;
line-height: 1rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-muted-foreground);
}
.hero-certifications-list {
display: flex;
align-items: center;
gap: 1rem;
width: 100%;
padding: 0.25rem;
overflow-x: visible;
scroll-snap-type: x mandatory;
scrollbar-width: none;
flex-wrap: wrap;
}
.hero-certifications-list::-webkit-scrollbar {
display: none;
}
.hero-certifications-list li {
flex-shrink: 0;
scroll-snap-align: start;
}
.hero-certifications-item {
display: flex;
align-items: center;
justify-content: center;
height: 3.5rem;
padding-inline: 0.75rem;
border: 1px solid var(--color-logo-tile-border);
border-radius: var(--radius-sm);
background-color: var(--color-logo-tile);
box-shadow: var(--shadow-sm);
transition: box-shadow var(--transition);
}
.hero-certifications-item:hover {
box-shadow: var(--shadow-md);
}
.hero-certifications-item img {
width: auto;
height: 2.5rem;
object-fit: contain;
opacity: 0.6;
filter: grayscale(1);
transition: filter var(--transition), opacity var(--transition), transform var(--transition);
}
.hero-certifications-item:hover img {
opacity: 1;
filter: none;
transform: scale(1.1);
}
.hero-btns {
display: flex;
flex-direction: row;
gap: 1.5rem;
width: auto;
margin-bottom: 1rem;
flex-wrap: wrap;
align-items: center;
} .hero-globe {
position: relative;
container-type: inline-size;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 560px;
}
.globe-container {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: 420px;
min-height: 400px;
margin-left: auto;
}
.globe-glow,
.globe-dots {
position: absolute;
inset: 0;
border-radius: 50%;
pointer-events: none;
}
.globe-glow {
background: radial-gradient(circle at center, rgb(29 78 216 / 0.15) 0%, transparent 70%);
}
.globe-dots {
opacity: 0.2;
background-image: radial-gradient(rgb(255 255 255 / 0.4) 1px, transparent 1px);
background-size: 24px 24px;
-webkit-mask-image: radial-gradient(circle at center, #000 0%, transparent 60%);
mask-image: radial-gradient(circle at center, #000 0%, transparent 60%);
}
.globe-shadow {
position: absolute;
bottom: 10%;
width: 60%;
height: 20px;
background: radial-gradient(ellipse at center, rgb(0 0 0 / 0.4) 0%, transparent 70%);
filter: blur(12px);
pointer-events: none;
} .globe {
position: relative;
isolation: isolate;
flex-shrink: 0;
width: min(100cqi, 500px);
aspect-ratio: 1;
} .globe-placeholder {
position: absolute;
top: 50%;
left: 50%;
width: 80%;
max-width: 360px;
aspect-ratio: 1;
border-radius: 50%;
background-color: rgb(59 130 246 / 0.05);
box-shadow: 0 0 60px rgb(59 130 246 / 0.1);
transform: translate(-50%, -50%);
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.globe.is-ready .globe-placeholder {
display: none;
}
.globe-canvas {
position: absolute;
inset: 0;
z-index: 10;
}
.globe-canvas canvas {
display: block;
}
.globe-badges {
position: absolute;
inset: 0;
pointer-events: none;
}
.globe-badge {
position: absolute;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
width: 80px;
height: 80px;
border: 1px solid var(--color-white);
border-radius: 50%;
background-color: var(--color-white);
box-shadow: 0 8px 24px rgb(37 99 235 / 0.2), inset 0 0 10px var(--color-white);
opacity: 0;
cursor: pointer;
transition: box-shadow 0.3s ease;
will-change: transform;
}
.globe.is-ready .globe-badge {
opacity: 1;
}
.globe-badge:hover {
box-shadow: 0 16px 40px rgb(56 189 248 / 0.5), inset 0 0 20px var(--color-white);
}
.globe-badge img {
width: 64px;
height: 64px;
object-fit: contain;
filter: drop-shadow(0 2px 4px rgb(0 0 0 / 0.1));
} .clients-wrap {
width: 100%;
margin-top: 6rem;
}
.h2.clients-title {
max-width: 42rem;
font-size: 2.25rem;
line-height: 1.25;
}
.title-wrap .clients-title {
margin-bottom: 0;
}
.clients-wrap .title-description {
margin-top: 1rem;
font-size: 1rem;
}
.clients-marquee {
position: relative;
padding-block: 2.5rem;
overflow: hidden;
border-block: 1px solid color-mix(in srgb, var(--color-border) 40%, transparent);
background: linear-gradient(to bottom, var(--color-background), color-mix(in srgb, var(--color-muted) 20%, var(--color-background)), var(--color-background));
user-select: none;
}
.clients-marquee::before,
.clients-marquee::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
z-index: 1;
width: 10rem;
pointer-events: none;
background: linear-gradient(to right, var(--color-background), color-mix(in srgb, var(--color-background) 70%, transparent), transparent);
}
.clients-marquee::before {
left: 0;
}
.clients-marquee::after {
right: 0;
transform: scaleX(-1);
}
.clients-marquee-track {
display: flex;
width: max-content;
padding-block: 0.5rem;
}
.clients-marquee.is-ready .clients-marquee-track {
animation: marquee 230s linear infinite;
}
.clients-list {
display: flex;
flex-shrink: 0;
gap: 2rem;
padding-right: 2rem;
}
.clients-list-item {
display: flex;
align-items: center;
justify-content: center;
min-width: 180px;
height: 4rem;
padding: 1rem 1.5rem;
border: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
border-radius: var(--radius);
background-color: var(--color-logo-tile);
box-shadow: var(--shadow-surface);
transition: box-shadow 0.5s ease, border-color 0.5s ease, transform 0.5s ease;
}
.clients-list-item:hover {
border-color: color-mix(in srgb, var(--color-primary) 25%, transparent);
box-shadow: var(--shadow-lg);
transform: translateY(-0.25rem);
}
.clients-list-item img {
width: auto;
max-width: 140px;
height: 2.25rem;
object-fit: contain;
} .services-wrap .title-wrap,
.values-wrap .title-wrap {
margin-bottom: 4rem;
}
.services-list {
display: grid;
gap: 2rem;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.services-card {
position: relative;
isolation: isolate;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 1.5rem;
height: 100%;
min-height: 480px;
padding: 2.5rem;
overflow: hidden;
border: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
border-radius: 2.25rem;
color: var(--color-white);
background-color: var(--color-slate-950);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-foreground) 10%, transparent), 0 10px 35px -15px rgb(0 0 0 / 0.1);
transition: transform 0.5s ease, box-shadow 0.5s ease;
}
.services-card:hover {
box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-foreground) 10%, transparent), 0 30px 70px -10px rgb(15 23 42 / 0.25);
transform: translateY(-0.5rem);
}
.services-card-img {
position: absolute;
inset: 0;
z-index: -1;
}
.services-card-img::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to top, var(--color-slate-950), rgb(2 6 23 / 0.75), rgb(2 6 23 / 0.3));
transition: opacity 0.5s ease;
}
.services-card:hover .services-card-img::after {
opacity: 0.92;
}
.services-card-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.75s ease;
}
.services-card:hover .services-card-img img {
transform: scale(1.05);
}
.services-card-icon {
display: flex;
align-items: center;
justify-content: center;
width: 3.5rem;
height: 3.5rem;
border: 1px solid rgb(255 255 255 / 0.2);
border-radius: 1rem;
background-color: rgb(255 255 255 / 0.1);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
transition: background-color 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
}
.services-card-icon .icon {
width: 1.75rem;
height: 1.75rem;
}
.services-card:hover .services-card-icon {
border-color: transparent;
background-color: var(--color-primary);
box-shadow: 0 10px 15px -3px color-mix(in srgb, var(--color-primary) 30%, transparent);
}
.services-card-content {
margin-top: auto;
}
.services-card .h3 {
margin-bottom: 0.75rem;
font-size: 1.875rem;
line-height: 2.25rem;
}
.services-card-text {
margin-bottom: 1.5rem;
font-size: 1rem;
font-weight: 500;
line-height: 1.625;
color: rgb(255 255 255 / 0.8);
}
.services-card-link {
display: inline-flex;
align-items: center;
gap: 0.75rem;
min-height: 44px;
font-size: 0.875rem;
font-weight: 700;
transition: color var(--transition);
}
.services-card:hover .services-card-link {
color: var(--color-primary);
}
.services-card-link-icon {
display: flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border: 1px solid rgb(255 255 255 / 0.2);
border-radius: 50%;
color: var(--color-white);
background-color: rgb(255 255 255 / 0.15);
transition: background-color 0.5s ease;
}
.services-card-link-icon .icon {
width: 1rem;
height: 1rem;
}
.services-card:hover .services-card-link-icon {
background-color: var(--color-primary);
}
.services-wrap-secondary {
padding-block: 4rem;
} .why-partner-wrap {
position: relative;
isolation: isolate;
padding-block: 5rem;
overflow: hidden;
color: var(--color-white);
background-color: var(--color-navy);
}
.why-partner-bg {
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
}
.why-partner-map {
width: 100%;
height: 100%;
color: var(--color-white);
fill: var(--color-white);
opacity: 0.15;
}
.why-partner-blob {
position: absolute;
width: 40rem;
height: 40rem;
border-radius: 50%;
transform: translate(-50%, -50%);
}
.why-partner-blob-top {
top: 25%;
left: 25%;
background: radial-gradient(closest-side, color-mix(in srgb, var(--color-primary) 10%, transparent), transparent);
}
.why-partner-blob-bottom {
right: 25%;
bottom: 25%;
background: radial-gradient(closest-side, color-mix(in srgb, var(--color-primary) 5%, transparent), transparent);
transform: translate(50%, 50%);
}
.why-partner {
display: grid;
align-items: center;
gap: 4rem;
margin-bottom: 3rem;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.why-partner-content {
display: flex;
flex-direction: column;
gap: 2rem;
}
.why-partner .h2 {
line-height: 1.25;
letter-spacing: normal;
}
.why-partner .h2 em {
font-weight: 500;
color: rgb(255 255 255 / 0.7);
}
.why-partner-description {
max-width: 42rem;
font-size: 1.125rem;
line-height: 1.625;
color: var(--color-slate-400);
}
.differentiators {
position: relative;
padding: 2rem;
overflow: hidden;
border: 1px solid rgb(255 255 255 / 0.1);
border-radius: 2.5rem;
background-color: rgb(255 255 255 / 0.03);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
box-shadow: var(--shadow-premium);
}
.differentiators::before {
content: "";
position: absolute;
top: -2rem;
right: -2rem;
width: 12rem;
height: 12rem;
border-radius: 50%;
pointer-events: none;
background: radial-gradient(closest-side, color-mix(in srgb, var(--color-primary) 5%, transparent), transparent);
}
.differentiators-title {
margin-bottom: 1.5rem;
font-size: 0.75rem;
font-weight: 700;
line-height: 1rem;
letter-spacing: 0.27em;
text-transform: uppercase;
color: var(--color-primary);
}
.differentiators-list {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.differentiators-list-item {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
}
.differentiators-list-content .h4 {
margin-bottom: 0.25rem;
transition: color var(--transition);
}
.differentiators-list-content p {
font-size: 0.75rem;
line-height: 1.625;
color: var(--color-slate-400);
}
.differentiators-list-icon {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 2.25rem;
height: 2.25rem;
border-radius: 50%;
color: var(--color-slate-400);
background-color: rgb(255 255 255 / 0.05);
transition: background-color var(--transition), color var(--transition);
}
.differentiators-list-icon .icon {
width: 1rem;
height: 1rem;
}
.differentiators-list-item:hover .h4 {
color: var(--color-primary);
}
.differentiators-list-item:hover .differentiators-list-icon {
color: var(--color-white);
background-color: var(--color-primary);
} .statistics {
padding-top: 2rem;
border-top: 1px solid rgb(255 255 255 / 0.1);
}
.statistics-list {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 2rem;
}
.statistics-list-item {
display: flex;
flex-direction: column;
align-items: center;
padding: 1.5rem;
border: 1px solid transparent;
border-radius: 1.5rem;
text-align: center;
background-color: rgb(255 255 255 / 0.01);
transition: background-color 0.5s ease, border-color 0.5s ease;
}
.statistics-list-item:hover {
border-color: rgb(255 255 255 / 0.05);
background-color: rgb(255 255 255 / 0.03);
}
.statistics-list-icon {
display: flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
margin-bottom: 1rem;
border-radius: 1rem;
color: var(--color-primary);
background-color: rgb(255 255 255 / 0.05);
transition: transform var(--transition);
}
.statistics-list-icon .icon {
width: 1.25rem;
height: 1.25rem;
}
.statistics-list-item:hover .statistics-list-icon {
transform: scale(1.1);
}
.statistics-list-number {
width: 100%;
margin-bottom: 0.25rem;
overflow: hidden;
font-size: 2.25rem;
font-weight: 700;
line-height: 2.5rem;
letter-spacing: -0.025em;
text-overflow: ellipsis;
white-space: nowrap;
font-variant-numeric: tabular-nums;
transition: color var(--transition);
}
.statistics-list-item:hover .statistics-list-number {
color: var(--color-primary);
}
.statistics-list-label {
font-size: 0.6875rem;
font-weight: 700;
line-height: 1.375;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-slate-500);
}
.statistics-list-note {
display: block;
font-size: 0.5625rem;
font-weight: 500;
font-style: italic;
letter-spacing: normal;
text-transform: none;
color: var(--color-primary);
} .cta-wrap {
position: relative;
isolation: isolate;
display: flex;
align-items: center;
min-height: 650px;
padding-block: 6rem;
overflow: hidden;
}
.cta-wrap::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background-image:
linear-gradient(to right, var(--color-grid-line-soft) 1px, transparent 1px),
linear-gradient(to bottom, var(--color-grid-line-soft) 1px, transparent 1px);
background-size: 40px 40px;
}
.cta-bg {
position: absolute;
inset: 0;
z-index: -2;
width: 100%;
height: 100%;
object-fit: cover;
}
.cta-blob {
position: absolute;
top: 50%;
left: 50%;
z-index: -1;
width: 70%;
height: 70%;
border-radius: 50%;
pointer-events: none;
background: radial-gradient(closest-side, color-mix(in srgb, var(--color-primary) 5%, transparent), transparent);
transform: translate(-50%, -50%);
}
.cta-box {
position: relative;
isolation: isolate;
display: flex;
flex-direction: column;
align-items: center;
gap: 1.5rem;
max-width: 48rem;
margin-inline: auto;
padding: 3rem;
overflow: hidden;
border: 1px solid color-mix(in srgb, var(--color-border) 50%, transparent);
border-radius: var(--radius-lg);
text-align: center;
background-color: color-mix(in srgb, var(--color-background) 65%, transparent);
-webkit-backdrop-filter: blur(24px);
backdrop-filter: blur(24px);
box-shadow: var(--shadow-surface);
}
[data-theme="dark"] .cta-box {
background-color: color-mix(in srgb, var(--color-background) 75%, transparent);
}
.cta-box::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
opacity: 0.25;
pointer-events: none;
background-image: radial-gradient(var(--color-dots) 1px, transparent 1px);
background-size: 24px 24px;
}
.cta-badge {
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0.25rem 0.75rem;
border: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
border-radius: var(--radius-full);
font-size: 0.75rem;
font-weight: 600;
line-height: 1rem;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--color-primary);
background-color: color-mix(in srgb, var(--color-primary) 5%, transparent);
}
.cta-badge .icon,
.cta-features .icon {
width: 0.875rem;
height: 0.875rem;
}
.h2.cta-title {
font-size: 2.25rem;
line-height: 1.2;
}
.cta-description {
max-width: 36rem;
font-size: 1rem;
line-height: 1.625;
color: var(--color-muted-foreground);
}
.cta-features {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding-top: 0.25rem;
}
.cta-features li {
display: flex;
align-items: center;
gap: 0.375rem;
padding: 0.375rem 0.75rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-full);
font-size: 0.75rem;
font-weight: 600;
line-height: 1rem;
color: color-mix(in srgb, var(--color-foreground) 80%, transparent);
background-color: var(--color-background);
box-shadow: var(--shadow-xs);
}
[data-theme="dark"] .cta-features li {
background-color: var(--color-card);
}
.cta-features .icon {
color: var(--color-primary);
}
.cta-btns {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 0.75rem;
width: 100%;
padding-top: 0.5rem;
} .about-hero-wrap {
position: relative;
padding: 12rem 0 1.5rem;
overflow: hidden;
background-color: var(--color-background);
}
.about-hero {
display: grid;
grid-template-columns: 5fr 7fr;
align-items: center;
gap: 2rem;
}
.about-hero-content {
grid-row: 1;
grid-column: 2;
display: flex;
flex-direction: column;
align-items: flex-start;
min-width: 0;
}
.about-hero-process {
grid-row: 1;
grid-column: 1;
display: flex;
align-items: center;
justify-content: center;
min-width: 0;
}
.hero-description-lg {
margin-bottom: 3rem;
font-size: 1.25rem;
} .process-card {
position: relative;
isolation: isolate;
display: flex;
flex-direction: column;
justify-content: space-between;
width: 100%;
max-width: 500px;
height: 485px;
padding: 2rem;
overflow: hidden;
border: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
border-radius: 1.5rem;
background-color: color-mix(in srgb, var(--color-background) 40%, transparent);
-webkit-backdrop-filter: blur(24px);
backdrop-filter: blur(24px);
box-shadow: var(--shadow-xl);
}
.process-card::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background: linear-gradient(to bottom right, color-mix(in srgb, var(--color-primary) 5%, transparent), transparent);
}
.process-card-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid color-mix(in srgb, var(--color-border) 40%, transparent);
}
.process-card-eyebrow {
display: flex;
align-items: center;
gap: 0.25rem;
font-size: 0.5625rem;
font-weight: 900;
line-height: 1.5;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-primary);
}
.process-card-eyebrow .icon {
width: 0.75rem;
height: 0.75rem;
}
.process-card-title {
margin-top: 0.125rem;
font-size: 0.75rem;
line-height: 1rem;
color: var(--color-foreground);
}
.process-card-count {
flex-shrink: 0;
padding: 0.125rem 0.5rem;
border: 1px solid color-mix(in srgb, var(--color-border) 50%, transparent);
border-radius: var(--radius-full);
font-size: 0.5rem;
font-weight: 900;
line-height: 0.75rem;
text-transform: uppercase;
white-space: nowrap;
color: var(--color-muted-foreground);
background-color: var(--color-muted);
} .process-steps {
flex: 1;
width: 100%;
min-height: 220px;
margin-block: 1rem;
}
.process-step {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.process-step-blue {
--step-color: var(--color-blue-500);
}
.process-step-purple {
--step-color: var(--color-purple-500);
}
.process-step-emerald {
--step-color: var(--color-emerald-500);
}
.process-step-amber {
--step-color: var(--color-amber-500);
}
.process-step-rose {
--step-color: var(--color-rose-500);
}
.process-step-head {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.625rem;
}
.process-step-icon {
display: flex;
flex-shrink: 0;
padding: 0.625rem;
border: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
border-radius: var(--radius-sm);
color: var(--step-color);
background-color: color-mix(in srgb, var(--color-muted) 80%, transparent);
}
.process-step-icon .icon {
width: 1.25rem;
height: 1.25rem;
}
.process-step-heading {
min-width: 0;
}
.process-step-scope {
width: fit-content;
max-width: 100%;
padding: 0.125rem 0.5rem;
overflow: hidden;
border: 1px solid color-mix(in srgb, var(--step-color) 20%, transparent);
border-radius: var(--radius-full);
font-size: 0.53125rem;
font-weight: 900;
line-height: 1.5;
letter-spacing: 0.05em;
text-overflow: ellipsis;
text-transform: uppercase;
white-space: nowrap;
color: var(--step-color);
background-color: color-mix(in srgb, var(--step-color) 10%, transparent);
}
.process-step-title {
margin-top: 0.25rem;
overflow: hidden;
font-size: 1rem;
font-weight: 800;
line-height: 1.25;
letter-spacing: -0.025em;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--color-foreground);
}
.process-step-text {
font-size: 0.75rem;
line-height: 1.625;
color: var(--color-muted-foreground);
}
.process-step-points {
margin-block: 0.375rem;
padding: 1rem;
border: 1px solid color-mix(in srgb, var(--color-border) 30%, transparent);
border-radius: 1rem;
background-color: color-mix(in srgb, var(--color-muted) 20%, transparent);
}
.process-step-points-title {
margin-bottom: 0.5rem;
font-size: 0.5rem;
font-weight: 900;
line-height: 1.5;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-muted-foreground);
}
[data-theme="dark"] .process-step-points-title {
color: color-mix(in srgb, var(--color-foreground) 90%, transparent);
}
.process-step-points ul {
display: flex;
flex-direction: column;
gap: 0.375rem;
}
.process-step-points li {
display: flex;
align-items: flex-start;
gap: 0.5rem;
font-size: 0.75rem;
font-weight: 600;
line-height: 1rem;
color: color-mix(in srgb, var(--color-foreground) 90%, transparent);
}
.process-step-points .icon {
width: 0.875rem;
height: 0.875rem;
margin-top: 0.125rem;
color: var(--step-color);
}
.process-step-points span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.process-card-nav {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 0.75rem;
border-top: 1px solid color-mix(in srgb, var(--color-border) 40%, transparent);
}
.process-card-arrow {
display: flex;
padding: 0.5rem;
border: 1px solid var(--color-border);
border-radius: 50%;
color: var(--color-foreground);
background-color: color-mix(in srgb, var(--color-muted) 50%, transparent);
transition: background-color var(--transition), transform var(--transition);
}
.process-card-arrow:hover {
background-color: var(--color-muted);
transform: scale(1.05);
}
.process-card-arrow:active {
transform: scale(0.95);
}
.process-card-arrow .icon {
width: 0.875rem;
height: 0.875rem;
}
.process-dots {
display: flex;
gap: 0.375rem;
}
.process-dot {
width: 0.375rem;
height: 0.375rem;
border-radius: var(--radius-full);
background-color: color-mix(in srgb, var(--color-muted-foreground) 30%, transparent);
transition: width 0.5s ease, background-color 0.5s ease;
}
.process-dot:hover {
background-color: color-mix(in srgb, var(--color-muted-foreground) 50%, transparent);
}
.process-dot.is-active {
width: 1.25rem;
background-color: var(--color-primary);
} .statement-group {
background-color: var(--color-ink);
}
.statement-wrap {
position: relative;
isolation: isolate;
padding-block: 8rem;
overflow: hidden;
color: var(--color-white);
}
.statement-wrap-mission {
--statement-accent: var(--color-cyan-300);
--statement-line: var(--color-cyan-500);
--statement-bar: linear-gradient(to right, var(--color-cyan-400), var(--color-blue-600));
}
.statement-wrap-vision {
--statement-accent: var(--color-blue-300);
--statement-line: var(--color-blue-500);
--statement-bar: linear-gradient(to right, var(--color-blue-400), var(--color-indigo-600));
}
.statement-bg {
position: absolute;
inset: 0;
z-index: -1;
}
.statement-bg img {
width: 100%;
height: 100%;
object-fit: cover;
}
.statement-bg::before,
.statement-bg::after {
content: "";
position: absolute;
left: 0;
width: 100%;
}
.statement-bg::before {
top: 0;
height: 100%;
background-color: rgb(0 0 0 / 0.3);
} .statement-bg::after {
height: 12rem;
}
.statement-wrap-mission .statement-bg::after {
bottom: 0;
background: linear-gradient(to top, var(--color-ink), transparent);
}
.statement-wrap-vision .statement-bg::after {
top: 0;
background: linear-gradient(to bottom, var(--color-ink), transparent);
}
.statement {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 3rem;
}
.statement-wrap-vision .statement-card {
grid-column: 2;
}
.statement-card {
position: relative;
padding: 3rem;
overflow: hidden;
border: 1px solid rgb(255 255 255 / 0.1);
border-radius: var(--radius-lg);
background-color: rgb(0 0 0 / 0.5);
-webkit-backdrop-filter: blur(24px);
backdrop-filter: blur(24px);
box-shadow: var(--shadow-2xl);
transition: border-color 0.5s ease;
}
.statement-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 0.25rem;
opacity: 0.8;
background: var(--statement-bar);
}
.statement-card:hover {
border-color: color-mix(in srgb, var(--statement-line) 30%, transparent);
}
.statement-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 2rem;
padding: 0.375rem 1rem;
border: 1px solid rgb(255 255 255 / 0.1);
border-radius: var(--radius-full);
font-size: 0.75rem;
font-weight: 700;
line-height: 1rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--statement-accent);
background-color: rgb(255 255 255 / 0.05);
}
.statement-badge .icon {
width: 1rem;
height: 1rem;
}
.statement-title {
margin-bottom: 1.5rem;
font-size: 2.25rem;
line-height: 1.375;
}
.statement-divider {
display: block;
width: 3rem;
height: 1px;
margin-bottom: 1.5rem;
background-color: color-mix(in srgb, var(--statement-line) 50%, transparent);
}
.statement-text {
font-size: 1.25rem;
font-weight: 300;
line-height: 1.625;
color: var(--color-slate-300);
} .values-wrap {
padding-block: 5rem;
background-color: var(--color-background);
}
.values-list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 2rem;
}
.values-card {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
border: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
border-radius: 1.75rem;
background-color: var(--color-card);
box-shadow: 0 10px 35px -15px rgb(0 0 0 / 0.08);
transition: transform 0.5s ease, box-shadow 0.5s ease;
}
.values-card:hover {
box-shadow: 0 25px 60px -10px rgb(15 23 42 / 0.15);
transform: translateY(-0.375rem);
}
[data-theme="dark"] .values-card:hover {
box-shadow: 0 25px 60px -10px rgb(0 0 0 / 0.5);
}
.values-card-img {
position: relative;
height: 240px;
overflow: hidden;
}
.values-card-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.7s ease;
}
.values-card:hover .values-card-img img {
transform: scale(1.05);
}
.values-card-img::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to top, var(--color-card), color-mix(in srgb, var(--color-card) 30%, transparent), transparent);
}
.values-card-content {
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
margin-top: -1.75rem;
padding: 0 1.5rem 1.5rem;
}
.values-card-icon {
display: flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
margin-bottom: 1rem;
border: 2px solid var(--color-card);
border-radius: var(--radius-sm);
color: var(--color-white);
background-color: var(--color-primary);
box-shadow: 0 4px 6px -1px color-mix(in srgb, var(--color-primary) 25%, transparent), 0 2px 4px -2px color-mix(in srgb, var(--color-primary) 25%, transparent);
transition: transform 0.5s ease;
}
.values-card:hover .values-card-icon {
transform: scale(1.1);
}
.values-card-badge {
margin-bottom: 0.75rem;
padding: 0.125rem 0.75rem;
border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
border-radius: var(--radius-full);
font-size: 0.5625rem;
font-weight: 700;
line-height: 1.5;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-primary);
background-color: color-mix(in srgb, var(--color-primary) 5%, transparent);
}
.values-card-title {
margin-bottom: 0.5rem;
font-size: 1.5rem;
font-weight: 800;
line-height: 2rem;
letter-spacing: -0.025em;
color: var(--color-blue-950);
transition: color var(--transition);
}
[data-theme="dark"] .values-card-title {
color: var(--color-foreground);
}
.values-card:hover .values-card-title {
color: var(--color-primary);
}
.values-card-text {
font-size: 0.875rem;
line-height: 1.625;
color: var(--color-muted-foreground);
} .journey-wrap {
padding-block: 6rem;
}
.journey-wrap .title-wrap {
margin-bottom: 5rem;
}
.journey {
position: relative;
max-width: 69rem;
margin-inline: auto;
} .journey::before {
content: "";
position: absolute;
top: 1rem;
bottom: 1rem;
left: 50%;
width: 0.25rem;
border-radius: var(--radius-full);
background: linear-gradient(to bottom, color-mix(in srgb, var(--color-primary) 10%, transparent), var(--color-primary), color-mix(in srgb, var(--color-blue-600) 30%, transparent));
transform: translateX(-50%);
}
.journey-list {
display: flex;
flex-direction: column;
gap: 4rem;
}
.journey-list-item {
position: relative;
display: flex;
align-items: center;
}
.journey-list-item:nth-child(even) {
flex-direction: row-reverse;
}
.journey-node {
position: absolute;
top: 50%;
left: 50%;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
border: 2px solid var(--color-primary);
border-radius: 50%;
color: var(--color-primary);
background-color: var(--color-background);
box-shadow: 0 10px 15px -3px color-mix(in srgb, var(--color-primary) 30%, transparent), 0 4px 6px -4px color-mix(in srgb, var(--color-primary) 30%, transparent);
transform: translate(-50%, -50%);
transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.journey-list-item:hover .journey-node {
border-color: var(--color-blue-500);
box-shadow: 0 10px 15px -3px color-mix(in srgb, var(--color-primary) 50%, transparent), 0 4px 6px -4px color-mix(in srgb, var(--color-primary) 50%, transparent);
}
.journey-node:hover {
transform: translate(-50%, -50%) scale(1.25) rotate(90deg);
}
.journey-node-dot {
width: 0.875rem;
height: 0.875rem;
border-radius: 50%;
background-color: var(--color-primary);
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
transition: transform 0.3s ease;
}
.journey-list-item:hover .journey-node-dot {
transform: scale(1.25);
}
.journey-card {
position: relative;
flex: 0 0 calc(50% - 2.5rem);
padding: 2.25rem;
overflow: hidden;
border: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
border-radius: var(--radius-lg);
background-color: color-mix(in srgb, var(--color-card) 95%, transparent);
box-shadow: 0 10px 35px -15px rgb(0 0 0 / 0.06);
transition: transform 0.4s var(--ease-out), box-shadow 0.4s ease;
}
.journey-card:hover {
box-shadow: 0 25px 60px -10px rgb(15 23 42 / 0.14);
transform: translateY(-0.375rem) scale(1.015);
}
[data-theme="dark"] .journey-card:hover {
box-shadow: 0 25px 60px -10px rgb(0 0 0 / 0.6);
} .journey-card::before,
.journey-card::after {
content: "";
position: absolute;
pointer-events: none;
opacity: 0;
transition: opacity 0.5s ease;
}
.journey-card::before {
top: 0;
right: 0;
left: 0;
height: 0.25rem;
background: linear-gradient(to right, transparent, var(--color-primary), transparent);
}
.journey-card::after {
top: -2rem;
right: -2rem;
width: 12rem;
height: 12rem;
border-radius: 50%;
background: radial-gradient(closest-side, color-mix(in srgb, var(--color-primary) 10%, transparent), transparent);
}
.journey-list-item:hover .journey-card::before,
.journey-list-item:hover .journey-card::after {
opacity: 1;
}
.journey-year {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 1rem;
padding: 0.25rem 0.875rem;
border: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
border-radius: var(--radius-full);
font-size: 0.75rem;
font-weight: 800;
line-height: 1rem;
letter-spacing: 0.1em;
color: var(--color-primary);
background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
box-shadow: var(--shadow-xs);
}
.journey-year-dot {
width: 0.375rem;
height: 0.375rem;
border-radius: 50%;
background-color: var(--color-primary);
animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.journey-card-title {
margin-bottom: 0.75rem;
font-size: 1.5rem;
font-weight: 800;
line-height: 2rem;
letter-spacing: -0.025em;
color: var(--color-foreground);
transition: color var(--transition);
}
.journey-list-item:hover .journey-card-title {
color: var(--color-primary);
}
.journey-card-text {
font-size: 0.875rem;
font-weight: 500;
line-height: 1.625;
color: var(--color-muted-foreground);
} .journey-aside {
display: flex;
flex: 0 0 calc(50% - 2.5rem);
align-items: center;
justify-content: center;
min-width: 0;
}
.journey-highlight {
position: relative;
display: flex;
align-items: center;
gap: 1rem;
max-width: min(20rem, 100%);
padding: 1.5rem;
overflow: hidden;
border: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
border-radius: var(--radius-lg);
background: linear-gradient(to bottom right, color-mix(in srgb, var(--color-primary) 5%, var(--color-background)), var(--color-background), color-mix(in srgb, var(--color-blue-500) 5%, var(--color-background)));
box-shadow: var(--shadow-md);
transition: transform 0.3s var(--ease-out);
}
.journey-list-item:nth-child(odd) .journey-highlight:hover {
transform: scale(1.05) rotate(1.5deg);
}
.journey-list-item:nth-child(even) .journey-highlight:hover {
transform: scale(1.05) rotate(-1.5deg);
}
.journey-highlight::after {
content: "";
position: absolute;
right: -1.5rem;
bottom: -1.5rem;
width: 5rem;
height: 5rem;
border-radius: 50%;
pointer-events: none;
background: radial-gradient(closest-side, color-mix(in srgb, var(--color-primary) 10%, transparent), transparent);
}
.journey-highlight-icon {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 3.25rem;
height: 3.25rem;
border-radius: 1rem;
color: var(--color-white);
background: linear-gradient(to bottom right, var(--color-primary), var(--color-blue-600));
box-shadow: 0 10px 15px -3px color-mix(in srgb, var(--color-primary) 20%, transparent), 0 4px 6px -4px color-mix(in srgb, var(--color-primary) 20%, transparent);
transition: transform 0.5s ease;
}
.journey-highlight:hover .journey-highlight-icon {
transform: scale(1.1);
}
.journey-highlight-tag {
display: block;
margin-bottom: 0.125rem;
font-size: 0.625rem;
font-weight: 800;
line-height: 1.5;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-primary);
}
.journey-highlight-metric {
display: block;
font-size: 0.75rem;
font-weight: 700;
line-height: 1.375;
color: var(--color-foreground);
}
.journey-end {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
margin-top: 6rem;
padding-top: 2rem;
text-align: center;
}
.journey-end-node {
position: absolute;
top: 0;
left: 50%;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
border: 4px solid var(--color-background);
border-radius: 50%;
color: var(--color-white);
background-color: var(--color-primary);
box-shadow: 0 20px 25px -5px color-mix(in srgb, var(--color-primary) 40%, transparent), 0 8px 10px -6px color-mix(in srgb, var(--color-primary) 40%, transparent);
transform: translate(-50%, -50%);
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
} .journey-end-card {
position: relative;
isolation: isolate;
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
width: 100%;
max-width: 42rem;
margin-top: 1.5rem;
padding: 2.5rem;
overflow: hidden;
border: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
border-radius: 2.5rem;
background:
linear-gradient(to bottom right, color-mix(in srgb, var(--color-primary) 10%, transparent), var(--color-card), color-mix(in srgb, var(--color-blue-600) 10%, transparent)),
var(--color-card);
box-shadow: var(--shadow-xl);
}
[data-theme="dark"] .journey-end-card {
box-shadow: none;
}
.journey-end-card::before {
content: "";
position: absolute;
top: -3rem;
right: -3rem;
z-index: -1;
width: 18rem;
height: 18rem;
border-radius: 50%;
pointer-events: none;
background: radial-gradient(closest-side, color-mix(in srgb, var(--color-primary) 10%, transparent), transparent);
}
.journey-end-card .title-badge {
margin-bottom: 0;
font-weight: 800;
}
.journey-end-card .title-badge .icon {
width: 0.875rem;
height: 0.875rem;
}
.journey-end-title {
font-size: 1.875rem;
font-weight: 800;
line-height: 2.25rem;
letter-spacing: -0.025em;
color: var(--color-foreground);
}
.journey-end-text {
max-width: 32rem;
font-size: 0.875rem;
font-weight: 500;
line-height: 1.625;
color: var(--color-muted-foreground);
}
.journey-end-card .btn {
margin-top: 0.5rem;
} .cdsco-hero-wrap,
.contact-hero-wrap,
.status-page {
position: relative;
isolation: isolate;
padding: 8rem 0 4rem;
overflow: hidden;
border-bottom: 1px solid color-mix(in srgb, var(--color-border) 30%, transparent);
background-color: var(--color-slate-50);
}
[data-theme="dark"] .cdsco-hero-wrap,
[data-theme="dark"] .contact-hero-wrap,
[data-theme="dark"] .status-page {
background-color: var(--color-background);
} .cdsco-hero-wrap::before,
.cdsco-hero-wrap::after,
.contact-hero-wrap::before,
.contact-hero-wrap::after,
.status-page::before,
.status-page::after {
content: "";
position: absolute;
z-index: -1;
pointer-events: none;
}
.cdsco-hero-wrap::before,
.contact-hero-wrap::before,
.status-page::before {
inset: 0;
background-image:
linear-gradient(to right, rgb(37 99 235 / 0.05) 1px, transparent 1px),
linear-gradient(to bottom, rgb(37 99 235 / 0.05) 1px, transparent 1px);
background-size: 60px 60px;
}
.cdsco-hero-wrap::after,
.contact-hero-wrap::after,
.status-page::after {
top: 50%;
left: 50%;
width: 1100px;
height: 1100px;
border-radius: 50%;
background: radial-gradient(closest-side, color-mix(in srgb, var(--color-blue-500) 10%, transparent), transparent);
transform: translate(-50%, -50%);
}
.cdsco-hero {
display: flex;
align-items: center;
gap: 2rem;
margin-bottom: 3rem;
}
.cdsco-hero-content {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 55%;
padding-right: 2rem;
}
.hero-tagline-neutral {
font-weight: 500;
color: var(--color-slate-500);
letter-spacing: 0.025em;
box-shadow: var(--shadow-sm);
}
.hero-tagline-neutral .icon {
width: 0.875rem;
height: 0.875rem;
color: var(--color-foreground);
}
.hero-tagline-neutral .hero-tagline-highlight {
font-weight: 700;
color: var(--color-slate-800);
}
[data-theme="dark"] .hero-tagline-neutral {
color: var(--color-slate-400);
}
[data-theme="dark"] .hero-tagline-neutral .hero-tagline-highlight {
color: var(--color-slate-200);
}
.cdsco-hero-title,
.contact-hero-title {
margin-bottom: 1.5rem;
font-size: 4.5rem;
font-weight: 800;
line-height: 1;
letter-spacing: -0.025em;
color: var(--color-foreground);
}
.cdsco-hero-title em {
color: var(--color-blue-600);
}
[data-theme="dark"] .cdsco-hero-title em {
color: var(--color-blue-400);
} [data-theme="dark"] .cdsco-hero-title,
[data-theme="dark"] .contact-hero-title,
[data-theme="dark"] .contact-info-card-title,
[data-theme="dark"] .contact-form-title,
[data-theme="dark"] .contact-map-label,
[data-theme="dark"] .service-title,
[data-theme="dark"] .service-benefits-title,
[data-theme="dark"] .consult-modal-title {
color: var(--color-white);
}
.cdsco-hero-description,
.contact-hero-description {
max-width: 36rem;
font-size: 1.375rem;
font-weight: 500;
color: var(--color-slate-500);
}
[data-theme="dark"] .cdsco-hero-description {
color: var(--color-slate-300);
}
.cdsco-hero-btn {
height: 4.75rem;
padding-inline: 2rem;
font-size: 1.125rem;
}
.cdsco-hero-visual {
display: flex;
align-items: center;
justify-content: center;
width: 45%;
min-height: 600px;
transform: translateY(1rem) scale(0.8);
} .license-orbit {
--orbit-size: 520px;
--orbit-radius: 280px;
--orbit-ring: 360px;
--orbit-halo-outer: 320px;
--orbit-halo-inner: 270px;
--orbit-core: 220px;
--orbit-connector: 80px;
--orbit-connector-offset: 20px;
--orbit-dot: 0.75rem;
position: relative;
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: var(--orbit-size);
height: var(--orbit-size);
}
.license-orbit-glow,
.license-orbit-ring,
.license-orbit-halo,
.license-orbit-core {
position: absolute;
border-radius: 50%;
}
.license-orbit-glow {
inset: -20%;
background: radial-gradient(closest-side, color-mix(in srgb, var(--color-blue-500) 5%, transparent), transparent);
}
.license-orbit-ring {
width: var(--orbit-ring);
height: var(--orbit-ring);
border: 1px dashed color-mix(in srgb, var(--color-blue-300) 60%, transparent);
animation: spin 60s linear infinite;
}
.license-orbit-halo-outer {
width: var(--orbit-halo-outer);
height: var(--orbit-halo-outer);
background-color: rgb(255 255 255 / 0.4);
box-shadow: 0 0 40px rgb(37 99 235 / 0.05);
}
.license-orbit-halo-inner {
width: var(--orbit-halo-inner);
height: var(--orbit-halo-inner);
background-color: rgb(255 255 255 / 0.6);
box-shadow: 0 0 30px rgb(37 99 235 / 0.1);
}
.license-orbit-core {
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: var(--orbit-core);
height: var(--orbit-core);
border: 1px solid var(--color-white);
background-color: var(--color-white);
box-shadow: 0 10px 40px rgb(37 99 235 / 0.15);
}
.license-orbit-core img {
width: 5rem;
height: 5rem;
margin-bottom: 0.5rem;
object-fit: contain;
}
.license-orbit-core-title {
font-size: 1.875rem;
font-weight: 800;
line-height: 1;
letter-spacing: -0.025em;
color: var(--color-blue-600);
}
.license-orbit-core-text {
margin-top: 0.375rem;
padding-inline: 1rem;
font-size: 0.6875rem;
font-weight: 500;
line-height: 1.2;
text-align: center;
color: var(--color-slate-500);
}
.license-orbit-list {
position: absolute;
inset: 0;
z-index: 2;
} .license-orbit-item {
--angle: calc(var(--i, 0) * 60deg);
position: absolute;
top: 50%;
left: 50%;
transform: rotate(var(--angle));
animation: license-pop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
animation-delay: calc(0.2s + var(--i, 0) * 0.1s);
}
.license-orbit-item:nth-child(2) {
--i: 1;
}
.license-orbit-item:nth-child(3) {
--i: 2;
}
.license-orbit-item:nth-child(4) {
--i: 3;
}
.license-orbit-item:nth-child(5) {
--i: 4;
}
.license-orbit-item:nth-child(6) {
--i: 5;
}
.license-orbit-connector {
position: absolute;
top: calc(var(--orbit-radius) * -1 + var(--orbit-connector-offset));
left: 0;
z-index: -1;
height: var(--orbit-connector);
border-left: 1.5px dashed var(--color-blue-400);
transform: translateX(-50%);
}
.license-orbit-connector::after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
width: var(--orbit-dot);
height: var(--orbit-dot);
border-radius: 50%;
background-color: var(--color-blue-500);
transform: translate(-50%, 50%);
} .license-badge-turn {
position: absolute;
top: 0;
left: 0;
transform: translate(-50%, -50%) translateY(calc(var(--orbit-radius) * -1)) rotate(calc(var(--angle) * -1));
}
.license-badge {
display: flex;
flex-direction: column;
align-items: center;
width: 130px;
padding: 1rem;
border: 1px solid var(--color-white);
border-radius: 1.5rem;
text-align: center;
background-color: var(--color-white);
box-shadow: 0 12px 40px rgb(37 99 235 / 0.08), 0 4px 12px rgb(0 0 0 / 0.04);
animation: license-float 4s ease-in-out infinite;
animation-delay: calc(var(--i, 0) * 0.2s);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.license-badge:hover {
box-shadow: 0 20px 50px rgb(37 99 235 / 0.15);
transform: translateY(-0.25rem);
}
.license-badge-icon {
display: flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
margin-bottom: 0.75rem;
border-radius: 50%;
color: var(--color-blue-600);
background-color: var(--color-blue-50);
transition: transform 0.3s ease;
}
.license-badge:hover .license-badge-icon {
transform: scale(1.1);
}
.license-badge-icon .icon {
width: 1.5rem;
height: 1.5rem;
}
.license-badge-code {
margin-bottom: 0.25rem;
font-size: 0.875rem;
font-weight: 800;
line-height: 1.25;
color: var(--color-blue-700);
}
.license-badge-label {
font-size: 0.6875rem;
font-weight: 500;
line-height: 1.2;
color: var(--color-gray-500);
} .cdsco-hero-visual-markets {
transform: translateY(1rem);
}
.license-orbit-markets {
--orbit-radius: 210px;
--orbit-ring: 420px;
--orbit-core: 240px;
--orbit-badge: 150px;
}
.license-orbit-markets .license-orbit-ring {
border-width: 1.5px;
} .license-orbit-markets .license-orbit-ring::before,
.license-orbit-markets .license-orbit-ring::after {
content: "";
position: absolute;
width: var(--orbit-dot);
height: var(--orbit-dot);
border-radius: 50%;
background-color: var(--color-blue-500);
transform: translate(-50%, -50%);
}
.license-orbit-markets .license-orbit-ring::before {
top: 0;
left: 50%;
box-shadow: 0 var(--orbit-ring) var(--color-blue-500);
}
.license-orbit-markets .license-orbit-ring::after {
top: 50%;
left: 0;
box-shadow: var(--orbit-ring) 0 var(--color-blue-500);
}
.license-orbit-markets .license-orbit-item {
--angle: calc(var(--i, 0) * 90deg - 45deg);
}
.license-orbit-markets .license-orbit-core img {
width: 6rem;
height: 6rem;
}
.license-orbit-markets .license-orbit-core-title {
font-size: 1.25rem;
}
.license-orbit-markets .license-orbit-core-text {
font-size: 0.75rem;
} .license-badge.license-badge-market {
justify-content: center;
width: var(--orbit-badge);
height: var(--orbit-badge);
border-radius: 50%;
}
.license-badge-market img {
width: 3.5rem;
height: 3.5rem;
margin-bottom: 0.5rem;
object-fit: contain;
transition: transform 0.3s ease;
}
.license-badge-market:hover img {
transform: scale(1.1);
}
.license-badge-market .license-badge-code {
font-size: 0.75rem;
text-transform: uppercase;
color: var(--color-slate-800);
}
.license-badge-market .license-badge-label {
font-size: 0.625rem;
} .cdsco-highlights {
padding: 1.75rem;
border: 1px solid var(--color-slate-100);
border-radius: 1.5rem;
background-color: var(--color-white);
box-shadow: 0 10px 40px rgb(0 0 0 / 0.05);
}
.cdsco-highlights-list {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 1.5rem;
}
.cdsco-highlights-item {
display: flex;
flex-direction: column;
align-items: center;
padding-inline: 1rem;
text-align: center;
}
.cdsco-highlights-item + .cdsco-highlights-item {
border-left: 1px solid color-mix(in srgb, var(--color-slate-100) 50%, transparent);
}
.cdsco-highlights-icon {
display: flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
margin-bottom: 0.75rem;
border-radius: 50%;
color: var(--color-blue-600);
background-color: var(--color-blue-50);
}
.cdsco-highlights-icon .icon {
width: 1.5rem;
height: 1.5rem;
}
.cdsco-highlights-title {
font-size: 0.875rem;
font-weight: 700;
line-height: 1.25rem;
color: var(--color-slate-800);
}
.cdsco-highlights-text {
margin-top: 0.25rem;
font-size: 0.75rem;
font-weight: 500;
line-height: 1rem;
color: var(--color-slate-500);
} .solutions-wrap {
padding-bottom: 6rem;
}
.solution-tabs {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.25rem;
max-width: 56rem;
margin: 0 auto 4rem;
padding: 0.5rem;
border: 1px solid color-mix(in srgb, var(--color-border) 20%, transparent);
border-radius: var(--radius-lg);
background-color: color-mix(in srgb, var(--color-muted) 50%, transparent);
}
.solution-tab {
padding: 0.75rem 1.5rem;
border-radius: var(--radius-full);
font-size: 0.75rem;
font-weight: 700;
line-height: 1rem;
letter-spacing: 0.05em;
text-transform: uppercase;
white-space: nowrap;
color: var(--color-muted-foreground);
transition: background-color var(--transition), color var(--transition), box-shadow var(--transition);
}
.solution-tab[aria-selected="true"] {
color: var(--color-primary);
background-color: var(--color-background);
box-shadow: var(--shadow-md);
} .solution-tabs-split {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0;
max-width: 36rem;
padding: 0.25rem;
border: 0;
border-radius: 1rem;
}
.solution-tabs-split .solution-tab {
height: 3rem;
padding: 0.375rem 0.75rem;
border-radius: var(--radius-sm);
font-size: 0.875rem;
font-weight: 600;
line-height: 1.25rem;
letter-spacing: normal;
text-transform: none;
}
.solution-tabs-split .solution-tab[aria-selected="true"] {
box-shadow: var(--shadow-sm);
}
.solutions-list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 2rem;
}
.solutions-list-item.is-entering,
.blog-list-item.is-entering {
animation: solution-in 0.4s var(--ease-out) backwards;
animation-delay: calc(var(--item-index, 0) * 50ms);
}
.solution-card {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
border: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
border-radius: var(--radius-lg);
background-color: var(--color-card);
box-shadow: 0 10px 35px -15px rgb(0 0 0 / 0.06);
transition: transform 0.5s ease, box-shadow 0.5s ease;
}
.solution-card:hover {
box-shadow: 0 25px 60px -10px rgb(15 23 42 / 0.14);
transform: translateY(-0.5rem);
}
[data-theme="dark"] .solution-card:hover {
box-shadow: 0 25px 60px -10px rgb(0 0 0 / 0.5);
}
.solution-card-img {
position: relative;
flex-shrink: 0;
height: 14rem;
overflow: hidden;
} .solution-card-img img {
width: calc(100% + 2px);
max-width: none;
height: calc(100% + 2px);
margin: -1px;
object-fit: cover;
}
.solution-card-img img,
.solution-card-img::after {
backface-visibility: hidden;
transition: transform 0.75s ease;
}
.solution-card:hover .solution-card-img img,
.solution-card:hover .solution-card-img::after {
transform: scale(1.05);
}
.solution-card-img::after {
content: "";
position: absolute;
inset: -1px;
background: linear-gradient(to top, var(--color-card), color-mix(in srgb, var(--color-card) 30%, transparent), color-mix(in srgb, var(--color-primary) 10%, transparent));
}
.solution-card-label,
.solution-card-icon {
position: absolute;
z-index: 1;
}
.solution-card-label {
top: 1rem;
left: 1rem;
padding: 0.25rem 0.75rem;
border: 1px solid rgb(255 255 255 / 0.4);
border-radius: var(--radius-full);
font-size: 0.625rem;
font-weight: 800;
line-height: 1rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-primary);
background-color: color-mix(in srgb, var(--color-background) 85%, transparent);
box-shadow: var(--shadow-sm);
}
[data-theme="dark"] .solution-card-label {
border-color: var(--color-muted);
background-color: color-mix(in srgb, var(--color-slate-950) 85%, transparent);
}
.solution-card-icon {
right: 1rem;
bottom: 0.75rem;
display: flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
border: 2px solid var(--color-card);
border-radius: 1rem;
color: var(--color-white);
background-color: var(--color-primary);
box-shadow: 0 10px 15px -3px color-mix(in srgb, var(--color-primary) 30%, transparent), 0 4px 6px -4px color-mix(in srgb, var(--color-primary) 30%, transparent);
transition: transform 0.5s ease;
}
.solution-card:hover .solution-card-icon {
transform: scale(1.1);
}
.solution-card-content {
display: flex;
flex-direction: column;
flex-grow: 1;
padding: 2rem;
}
.solution-card-title,
.solution-card-text {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
}
.solution-card-title {
margin-bottom: 0.75rem;
font-size: 1.5rem;
font-weight: 700;
line-height: 2rem;
letter-spacing: -0.025em;
color: var(--color-foreground);
-webkit-line-clamp: 2;
line-clamp: 2;
transition: color var(--transition);
}
.solution-card:hover .solution-card-title {
color: var(--color-primary);
}
.solution-card-text {
margin-bottom: 1.5rem;
font-size: 0.875rem;
font-weight: 500;
line-height: 1.625;
color: var(--color-muted-foreground);
-webkit-line-clamp: 3;
line-clamp: 3;
}
.solution-card-link {
display: inline-flex;
align-items: center;
gap: 0.625rem;
margin-top: auto;
padding-top: 0.5rem;
font-size: 0.875rem;
font-weight: 700;
line-height: 1.25rem;
color: var(--color-primary);
transition: color var(--transition);
}
.solution-card:hover .solution-card-link {
color: var(--color-blue-700);
}
[data-theme="dark"] .solution-card:hover .solution-card-link {
color: var(--color-primary);
}
.solution-card-link-icon {
display: flex;
align-items: center;
justify-content: center;
width: 1.75rem;
height: 1.75rem;
border-radius: 50%;
background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
transition: background-color 0.5s ease, color 0.5s ease;
}
.solution-card-link-icon .icon {
width: 0.875rem;
height: 0.875rem;
transition: transform var(--transition);
}
.solution-card:hover .solution-card-link-icon {
color: var(--color-white);
background-color: var(--color-primary);
}
.solution-card:hover .solution-card-link-icon .icon {
transform: translateX(0.125rem);
} .service-detail {
padding-bottom: 2rem;
background-color: var(--color-slate-50);
}
[data-theme="dark"] .service-detail {
background-color: var(--color-slate-950);
} .service-hero-wrap {
position: relative;
isolation: isolate;
padding: 7rem 0 3rem;
overflow: hidden;
} .service-hero-wrap::before {
content: "";
position: absolute;
inset: 0 0 auto;
z-index: -1;
height: 600px;
pointer-events: none;
background: linear-gradient(to bottom right, color-mix(in srgb, var(--color-blue-100) 50%, transparent), var(--color-slate-50), transparent);
}
[data-theme="dark"] .service-hero-wrap::before {
background: linear-gradient(to bottom right, color-mix(in srgb, var(--color-blue-950) 20%, transparent), var(--color-slate-950), transparent);
}
.service-hero {
width: min(72rem, 100% - 6rem);
margin: 0 auto 3rem;
}
.service-hero-top {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem;
margin-bottom: 2rem;
}
.service-back {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.375rem 1rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-full);
font-size: 0.8125rem;
font-weight: 700;
color: var(--color-icon);
background-color: color-mix(in srgb, var(--color-card) 80%, transparent);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
box-shadow: var(--shadow-sm);
transition: transform var(--transition);
}
[data-theme="dark"] .service-back {
color: var(--color-slate-200);
}
.service-back:hover {
transform: translateX(-0.25rem);
}
.service-back .icon {
width: 1rem;
height: 1rem;
}
.service-badge {
padding: 0.375rem 1rem;
border-radius: var(--radius-full);
font-size: 0.625rem;
font-weight: 900;
line-height: 0.9375rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-white);
background-color: var(--color-blue-600);
box-shadow: var(--shadow-sm);
}
.service-hero-grid {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
align-items: start;
gap: 3rem;
}
.service-hero-content {
grid-column: span 7;
}
.service-hero-aside {
position: relative;
grid-column: span 5;
}
.service-title {
margin-bottom: 1rem;
font-size: 2.25rem;
font-weight: 800;
line-height: 1.25;
letter-spacing: -0.025em;
color: var(--color-foreground);
}
.service-intro {
margin-bottom: 1.5rem;
font-size: 1.125rem;
font-weight: 500;
line-height: 1.625;
color: var(--color-slate-600);
}
[data-theme="dark"] .service-intro,
[data-theme="dark"] .service-benefits-list li {
color: var(--color-slate-300);
}
.btn-primary.service-hero-btn {
height: 2.75rem;
padding-inline: 1.5rem;
background-color: var(--color-blue-600);
box-shadow: 0 20px 25px -5px rgb(37 99 235 / 0.2), 0 8px 10px -6px rgb(37 99 235 / 0.2);
}
.btn-primary.service-hero-btn:hover {
background-color: var(--color-blue-700);
transform: none;
} .service-hero-aside::before {
content: "";
position: absolute;
inset: -10%;
z-index: -1;
border-radius: 50%;
pointer-events: none;
background: radial-gradient(closest-side, color-mix(in srgb, var(--color-blue-500) 10%, transparent), transparent);
}
.service-benefits {
overflow: hidden;
border: 1px solid var(--color-border);
border-radius: 1rem;
background-color: var(--color-card);
box-shadow: 0 20px 60px -15px rgb(0 0 0 / 0.1);
}
[data-theme="dark"] .service-benefits {
box-shadow: 0 20px 60px -15px rgb(0 0 0 / 0.5);
}
.service-benefits-img {
position: relative;
height: 14rem;
overflow: hidden;
background-color: var(--color-slate-100);
}
[data-theme="dark"] .service-benefits-img {
background-color: var(--color-slate-950);
}
.service-benefits-img::after {
content: "";
position: absolute;
inset: 0;
background-color: rgb(37 99 235 / 0.05);
mix-blend-mode: multiply;
}
[data-theme="dark"] .service-benefits-img::after {
mix-blend-mode: lighten;
}
.service-benefits-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 1s ease;
}
.service-benefits-img:hover img {
transform: scale(1.05);
} .service-benefits-icon {
position: absolute;
right: 1.5rem;
bottom: -1rem;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
border: 1px solid var(--color-slate-100);
border-radius: var(--radius-sm);
color: var(--color-blue-600);
background-color: var(--color-white);
box-shadow: var(--shadow-xl);
}
[data-theme="dark"] .service-benefits-icon {
border-color: var(--color-fab-border);
color: var(--color-blue-400);
background-color: var(--color-slate-800);
}
.service-benefits-body {
padding: 2rem;
}
.service-benefits-title {
margin-bottom: 1rem;
font-size: 1.125rem;
font-weight: 700;
line-height: 1.75rem;
color: var(--color-foreground);
}
.service-benefits-list {
display: flex;
flex-direction: column;
gap: 1rem;
}
.service-benefits-list li {
display: flex;
align-items: flex-start;
gap: 0.75rem;
font-size: 0.875rem;
font-weight: 500;
line-height: 1.625;
color: var(--color-slate-600);
}
.service-benefits-check {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 1.25rem;
height: 1.25rem;
margin-top: 0.125rem;
border: 1px solid var(--color-blue-200);
border-radius: 50%;
color: var(--color-blue-600);
background-color: var(--color-blue-50);
}
[data-theme="dark"] .service-benefits-check {
border-color: var(--color-blue-900);
color: var(--color-blue-400);
background-color: color-mix(in srgb, var(--color-blue-900) 30%, transparent);
}
.service-benefits-check .icon {
width: 0.75rem;
height: 0.75rem;
}
.service-standards {
display: flex;
align-items: center;
gap: 4rem;
width: min(80rem, 100% - 12rem);
margin: 2rem auto 0;
padding-top: 1rem;
border-top: 1px solid var(--color-border);
}
.service-standards-title {
flex-shrink: 0;
font-size: 0.875rem;
font-weight: 700;
line-height: 1.25rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-muted-foreground);
}
.service-standards-list {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 3rem;
width: 100%;
} .service-standard {
padding: 0.5rem;
border: 1px solid var(--color-slate-100);
border-radius: var(--radius-sm);
background-color: var(--color-white);
box-shadow: var(--shadow-sm);
}
.service-standard img {
width: auto;
height: 2.5rem;
object-fit: contain;
filter: grayscale(1);
opacity: 0.6;
transition: filter var(--transition), opacity var(--transition);
}
.service-standard-lg img {
height: 3rem;
}
.service-standard:hover img {
filter: none;
opacity: 1;
} .service-section-title {
font-size: 1.875rem;
font-weight: 700;
line-height: 2.25rem;
color: var(--color-foreground);
}
.service-heading {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 2.5rem;
}
.service-heading .icon {
width: 2rem;
height: 2rem;
color: var(--color-primary);
} .service-steps-wrap {
padding: 3rem 0 6rem;
overflow: hidden;
background-color: var(--color-background);
}
.service-steps-inner {
max-width: 80rem;
margin-inline: auto;
}
.service-steps-title {
display: flex;
align-items: center;
gap: 2rem;
margin-bottom: 3rem;
}
.service-steps-title::before,
.service-steps-title::after {
content: "";
flex: 1;
height: 1px;
background-color: var(--color-border);
}
.service-steps {
position: relative;
padding-inline: 4rem;
}
.service-steps-arrow {
position: absolute;
top: 50%;
z-index: 3;
display: flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
border: 1px solid var(--color-border);
border-radius: 50%;
color: var(--color-muted-foreground);
background-color: var(--color-background);
box-shadow: var(--shadow-lg);
transform: translateY(-50%);
transition: color var(--transition), box-shadow var(--transition), opacity var(--transition);
}
.service-steps-arrow:hover {
color: var(--color-primary);
box-shadow: var(--shadow-xl);
}
.service-steps-arrow.swiper-button-disabled {
opacity: 0.4;
cursor: default;
}
.service-steps-arrow.swiper-button-lock {
display: none;
}
.service-steps-prev {
left: 0;
}
.service-steps-next {
right: 0;
}
.service-steps-track {
padding: 1rem 0 2rem;
}
.service-step {
position: relative;
width: 20rem;
} .service-step:not(:last-child)::before {
content: "";
position: absolute;
top: 1.5rem;
left: 1.5rem;
width: calc(100% + 3rem);
height: 2px;
background-color: var(--color-border);
transition: background-color var(--transition);
}
.service-step:hover::before {
background-color: color-mix(in srgb, var(--color-primary) 20%, transparent);
}
.service-step-number {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
margin-bottom: 1.5rem;
border-radius: 50%;
font-size: 1.25rem;
font-weight: 700;
line-height: 1.75rem;
color: var(--color-white);
background-color: var(--color-primary);
box-shadow: 0 10px 15px -3px color-mix(in srgb, var(--color-primary) 20%, transparent), 0 4px 6px -4px color-mix(in srgb, var(--color-primary) 20%, transparent);
transition: transform var(--transition), box-shadow var(--transition);
}
.service-step:hover .service-step-number {
box-shadow: 0 10px 15px -3px color-mix(in srgb, var(--color-primary) 30%, transparent), 0 4px 6px -4px color-mix(in srgb, var(--color-primary) 30%, transparent);
transform: scale(1.1);
}
.service-step-title {
margin-bottom: 0.75rem;
font-size: 1.25rem;
font-weight: 700;
line-height: 1.75rem;
color: var(--color-foreground);
transition: color var(--transition);
}
.service-step:hover .service-step-title {
color: var(--color-primary);
}
.service-step-text {
line-height: 1.625;
color: var(--color-muted-foreground);
} .service-steps-grid {
display: grid;
grid-template-columns: repeat(var(--steps), minmax(0, 1fr));
gap: 2rem;
}
.service-steps-grid .service-step {
width: auto;
}
.service-steps-grid .service-step:not(:last-child)::before {
left: 3rem;
width: 100%;
} .service-steps .service-steps-scrollbar {
position: relative;
inset: auto;
width: auto;
height: 6px;
border-radius: var(--radius-full);
background-color: var(--color-slate-50);
}
[data-theme="dark"] .service-steps .service-steps-scrollbar {
background-color: var(--color-slate-800);
}
.service-steps-scrollbar .swiper-scrollbar-drag {
height: 100%;
border-radius: var(--radius-full);
cursor: grab;
background-color: var(--color-slate-300);
} .service-info-wrap,
.service-related-wrap {
padding: 8rem 6rem;
}
.service-info-wrap {
background-color: var(--color-muted);
}
.service-info {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 5rem;
max-width: 80rem;
margin-inline: auto;
}
.service-docs {
display: flex;
flex-direction: column;
gap: 1rem;
}
.service-doc {
display: flex;
align-items: center;
gap: 1rem;
padding: 1.5rem;
border: 1px solid var(--color-border);
border-radius: 1rem;
font-size: 1.125rem;
font-weight: 500;
line-height: 1.75rem;
color: var(--color-foreground);
background-color: var(--color-background);
transition: box-shadow var(--transition);
}
.service-doc:hover {
box-shadow: var(--shadow-md);
}
.service-doc-icon {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border-radius: 0.5rem;
color: var(--color-muted-foreground);
background-color: var(--color-muted);
}
.service-doc-icon .icon {
width: 1.25rem;
height: 1.25rem;
} .service-faq {
margin-bottom: 0.5rem;
border-bottom: 1px solid var(--color-border);
}
.service-faq summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding-block: 1.5rem;
font-size: 1.25rem;
font-weight: 700;
line-height: 1.75rem;
color: var(--color-foreground);
cursor: pointer;
list-style: none;
transition: color var(--transition);
}
.service-faq summary::-webkit-details-marker {
display: none;
}
.service-faq summary:hover {
color: var(--color-primary);
}
.service-faq summary .icon {
width: 1rem;
height: 1rem;
transition: transform var(--transition);
}
.service-faq[open] summary .icon {
transform: rotate(180deg);
}
.service-faq p {
padding-bottom: 1rem;
font-size: 0.875rem;
line-height: 1.625;
color: var(--color-muted-foreground);
} .service-related-wrap {
border-block: 1px solid var(--color-border);
background-color: var(--color-card);
}
.service-related {
max-width: 80rem;
margin-inline: auto;
}
.service-related-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-bottom: 3rem;
}
.service-related-head .service-heading {
margin-bottom: 0;
}
.btn-outline.service-related-btn {
height: 2.5rem;
padding-inline: 1rem;
font-weight: 500;
background-color: var(--color-background);
}
.service-related-btn-mobile {
display: none;
}
.service-related .blog-related-card {
background-color: var(--color-background);
transition: box-shadow var(--transition), transform var(--transition);
}
.service-related .blog-related-card:hover {
transform: translateY(-0.25rem);
} .service-cta-wrap {
padding: 6rem;
}
.service-cta {
position: relative;
isolation: isolate;
max-width: 64rem;
margin-inline: auto;
padding: 5rem;
overflow: hidden;
border: 1px solid rgb(30 41 59 / 0.5);
border-radius: 1.5rem;
text-align: center;
color: var(--color-white);
background-color: var(--color-navy);
box-shadow: var(--shadow-2xl);
}
.service-cta::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background: radial-gradient(circle at top right, rgb(21 101 255 / 0.2), transparent);
}
.service-cta-title {
margin-bottom: 2rem;
font-size: 3rem;
font-weight: 700;
line-height: 1;
}
.service-cta-text {
max-width: 42rem;
margin: 0 auto 3rem;
font-size: 1.25rem;
line-height: 1.75rem;
color: var(--color-zinc-400);
} .service-cta-btn {
height: 4rem;
padding-inline: 2.5rem;
font-size: 1.25rem;
font-weight: 500;
line-height: 1.75rem;
color: var(--color-white);
}
.service-cta-btn .icon {
width: 1.5rem;
height: 1.5rem;
} .contact-hero-wrap {
padding-bottom: 5rem;
}
.contact-hero {
text-align: center;
}
.contact-hero-title {
max-width: 56rem;
margin-inline: auto;
line-height: 1.1;
}
.contact-hero-description {
max-width: 42rem;
margin-inline: auto;
}
[data-theme="dark"] .contact-hero-description {
color: var(--color-slate-400);
} .contact-wrap {
padding-block: 6rem;
}
.contact {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 4rem;
} .contact-info-list {
display: flex;
flex-direction: column;
gap: 1.5rem;
grid-column: span 5;
}
.contact-info-card {
display: flex;
align-items: flex-start;
gap: 1.5rem;
padding: 2rem;
border: 1px solid var(--color-border);
border-radius: 1.5rem;
background-color: var(--color-card);
box-shadow: var(--shadow-sm);
transition: border-color var(--transition), box-shadow var(--transition);
}
[data-theme="dark"] .contact-info-card {
background-color: color-mix(in srgb, var(--color-card) 50%, transparent);
}
.contact-info-card:hover {
border-color: var(--card-accent-border);
box-shadow: var(--shadow-lg);
} .contact-info-card-blue {
--card-accent: var(--color-blue-600);
--card-accent-surface: var(--color-blue-50);
--card-accent-border: var(--color-blue-200);
}
.contact-info-card-purple {
--card-accent: var(--color-purple-600);
--card-accent-surface: var(--color-purple-50);
--card-accent-border: var(--color-purple-200);
}
.contact-info-card-orange {
--card-accent: var(--color-orange-600);
--card-accent-surface: var(--color-orange-50);
--card-accent-border: var(--color-orange-200);
}
.contact-info-card-emerald {
--card-accent: var(--color-emerald-600);
--card-accent-surface: var(--color-emerald-50);
--card-accent-border: var(--color-emerald-200);
}
[data-theme="dark"] .contact-info-card-blue {
--card-accent: var(--color-blue-400);
--card-accent-surface: color-mix(in srgb, var(--color-blue-500) 10%, transparent);
--card-accent-border: var(--color-blue-900);
}
[data-theme="dark"] .contact-info-card-purple {
--card-accent: var(--color-purple-400);
--card-accent-surface: color-mix(in srgb, var(--color-purple-500) 10%, transparent);
--card-accent-border: var(--color-purple-900);
}
[data-theme="dark"] .contact-info-card-orange {
--card-accent: var(--color-orange-400);
--card-accent-surface: color-mix(in srgb, var(--color-orange-500) 10%, transparent);
--card-accent-border: var(--color-orange-900);
}
[data-theme="dark"] .contact-info-card-emerald {
--card-accent: var(--color-emerald-400);
--card-accent-surface: color-mix(in srgb, var(--color-emerald-500) 10%, transparent);
--card-accent-border: var(--color-emerald-900);
}
.contact-info-card-icon {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 3.5rem;
height: 3.5rem;
border-radius: 1rem;
color: var(--card-accent);
background-color: var(--card-accent-surface);
transition: transform var(--transition);
}
.contact-info-card:hover .contact-info-card-icon {
transform: scale(1.1);
}
.contact-info-card-content {
min-width: 0;
}
.contact-info-card-title {
margin-bottom: 0.75rem;
font-size: 1.25rem;
line-height: 1.75rem;
}
.contact-info-card-details {
display: flex;
flex-direction: column;
gap: 0.5rem;
font-size: 0.9375rem;
font-weight: 500;
line-height: 1.625;
color: var(--color-slate-500);
}
.contact-info-card-details a {
transition: color var(--transition);
}
.contact-info-card-details a:hover {
color: var(--color-blue-600);
}
[data-theme="dark"] .contact-info-card-details a:hover {
color: var(--color-blue-400);
} .contact-form-card {
position: relative;
isolation: isolate;
grid-column: span 7;
padding: 3rem;
overflow: hidden;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background-color: var(--color-card);
box-shadow: 0 20px 60px -15px rgb(0 0 0 / 0.05);
}
[data-theme="dark"] .contact-form-card {
box-shadow: none;
} .contact-form-card::before {
content: "";
position: absolute;
top: 0;
right: 0;
z-index: -1;
width: 460px;
height: 460px;
background: radial-gradient(closest-side, color-mix(in srgb, var(--color-blue-500) 5%, transparent), transparent);
transform: translate(50%, -50%);
}
.contact-form-head {
display: flex;
flex-direction: column;
align-items: flex-start;
margin-bottom: 2.5rem;
} .contact-availability {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 1.5rem;
padding: 0.375rem 0.75rem;
border: 1px solid var(--color-emerald-200);
border-radius: var(--radius-full);
font-size: 0.625rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--color-emerald-600);
background-color: var(--color-emerald-50);
box-shadow: var(--shadow-sm);
}
[data-theme="dark"] .contact-availability {
border-color: color-mix(in srgb, var(--color-emerald-500) 20%, transparent);
color: var(--color-emerald-400);
background-color: color-mix(in srgb, var(--color-emerald-500) 10%, transparent);
}
.contact-availability .pulse-dot::before {
background-color: var(--color-emerald-400);
}
.contact-availability .pulse-dot::after {
background-color: var(--color-emerald-500);
}
.contact-form-title {
margin-bottom: 0.75rem;
font-size: 2.25rem;
font-weight: 800;
line-height: 2.5rem;
}
.contact-form-text {
font-size: 1.125rem;
font-weight: 500;
line-height: 1.75rem;
color: var(--color-slate-500);
}
.contact-form {
--color-input-border: var(--color-border);
display: flex;
flex-direction: column;
gap: 1.5rem;
} .contact-form .form-row {
gap: 1.5rem;
}
.contact-form .form-group {
gap: 0;
}
.contact-form .form-group label {
line-height: 1.5rem;
}
.contact-form .form-control {
height: 3.5rem;
border-radius: 1rem;
font-size: 0.875rem;
}
.contact-form .form-select {
font-size: 1rem;
}
.contact-form textarea.form-control {
height: auto;
min-height: 10rem;
padding: 1.25rem;
field-sizing: content;
}
.contact-form-btn {
height: 4rem;
margin-top: 1.5rem;
border-radius: 1rem;
font-size: 1.0625rem;
background-image: linear-gradient(to right, var(--color-blue-600), var(--color-indigo-600));
box-shadow: 0 20px 25px -5px color-mix(in srgb, var(--color-blue-500) 25%, transparent), 0 8px 10px -6px color-mix(in srgb, var(--color-blue-500) 25%, transparent);
}
.contact-form-btn:hover {
background-image: linear-gradient(to right, var(--color-blue-500), var(--color-indigo-500));
transform: scale(1.02);
}
.contact-form-btn:active {
transform: scale(0.98);
}
.contact-form-btn .btn-icon {
width: 1.25rem;
height: 1.25rem;
}
.contact-form-btn:hover .btn-icon {
transform: translate(0.25rem, -0.25rem);
}
[data-theme="dark"] .contact-info-card-details,
[data-theme="dark"] .contact-form-text {
color: var(--color-slate-400);
} .contact-map-wrap {
padding-bottom: 6rem;
}
.contact-map {
position: relative;
height: 500px;
overflow: hidden;
border: 8px solid var(--color-card);
border-radius: var(--radius-lg);
background-color: var(--color-slate-100);
box-shadow: 0 20px 60px -15px rgb(0 0 0 / 0.1);
}
.contact-map iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
filter: contrast(1.1) grayscale(0.2);
} .contact-map-marker {
position: absolute;
top: 50%;
left: 50%;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
pointer-events: none;
transform: translate(-50%, -50%);
}
.contact-map-pin {
position: relative;
width: 1.25rem;
height: 1.25rem;
border: 3px solid var(--color-white);
border-radius: 50%;
background-color: var(--color-blue-600);
box-shadow: var(--shadow-lg);
} .contact-map-pin::before,
.contact-map-pin::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
z-index: -1;
border-radius: 50%;
translate: -50% -50%;
}
.contact-map-pin::before {
width: 4rem;
height: 4rem;
background-color: color-mix(in srgb, var(--color-blue-600) 20%, transparent);
animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.contact-map-pin::after {
width: 2.5rem;
height: 2.5rem;
background-color: color-mix(in srgb, var(--color-blue-600) 40%, transparent);
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.contact-map-label {
margin-top: 0.75rem;
padding: 0.5rem 1rem;
border: 1px solid color-mix(in srgb, var(--color-border) 50%, transparent);
border-radius: 0.75rem;
font-size: 0.75rem;
font-weight: 900;
line-height: 1rem;
letter-spacing: 0.1em;
text-transform: uppercase;
white-space: nowrap;
background-color: color-mix(in srgb, var(--color-card) 95%, transparent);
box-shadow: var(--shadow-2xl);
} .blog-hero-wrap {
position: relative;
isolation: isolate;
margin-bottom: 3rem;
padding: 10rem 0 8rem;
overflow: hidden;
border-bottom: 1px solid rgb(255 255 255 / 0.1);
border-radius: 0 0 4rem 4rem;
color: var(--color-white);
background-color: var(--color-slate-950);
box-shadow: var(--shadow-2xl);
} .blog-hero-wrap::before,
.blog-hero-wrap::after {
content: "";
position: absolute;
z-index: -1;
pointer-events: none;
}
.blog-hero-wrap::before {
top: -2.5rem;
left: -5rem;
width: 39rem;
height: 39rem;
background: radial-gradient(closest-side, color-mix(in srgb, var(--color-blue-600) 20%, transparent) 30%, transparent);
}
.blog-hero-wrap::after {
right: -7rem;
bottom: -7rem;
width: 50rem;
height: 50rem;
background: radial-gradient(closest-side, color-mix(in srgb, var(--color-primary) 20%, transparent) 30%, transparent);
}
.blog-hero {
display: flex;
flex-direction: column;
align-items: center;
max-width: 56rem;
margin-inline: auto;
text-align: center;
}
.blog-hero-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 2rem;
padding: 0.5rem 1.25rem;
border: 1px solid rgb(255 255 255 / 0.1);
border-radius: var(--radius-full);
font-size: 0.75rem;
font-weight: 900;
line-height: 1rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-blue-400);
background-color: rgb(255 255 255 / 0.05);
}
.blog-hero-badge .icon {
width: 1rem;
height: 1rem;
}
.blog-hero-title {
font-size: 4.5rem;
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.025em;
}
.blog-hero-description {
max-width: 42rem;
margin-top: 2rem;
font-size: 1.25rem;
line-height: 1.625;
color: var(--color-slate-400);
} .blog-search {
display: flex;
align-items: center;
width: 100%;
max-width: 36rem;
margin-top: 3rem;
padding: 0.5rem;
border: 1px solid rgb(255 255 255 / 0.2);
border-radius: var(--radius-full);
background-color: rgb(255 255 255 / 0.1);
box-shadow: var(--shadow-2xl);
transition: background-color var(--transition), border-color var(--transition);
}
.blog-search:focus-within {
border-color: rgb(255 255 255 / 0.3);
background-color: rgb(255 255 255 / 0.15);
} .blog-search:has(.blog-search-input:focus-visible) {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.blog-search > .icon {
margin: 0 0.5rem 0 1rem;
color: var(--color-slate-400);
}
.blog-search-input {
flex: 1;
min-width: 0;
padding: 0.75rem 0.5rem;
border: 0;
font-size: 1.125rem;
line-height: 1.75rem;
color: var(--color-white);
background: transparent;
outline: none;
appearance: none;
}
.blog-search-input::placeholder {
color: var(--color-slate-400);
opacity: 1;
}
.blog-search-btn {
flex-shrink: 0;
height: 3rem;
} .blog-filter-wrap {
position: relative;
z-index: 2;
display: flex;
justify-content: center;
margin: -5rem 0 4rem;
}
.blog-filter {
display: flex;
gap: 0.5rem;
max-width: 100%;
padding: 0.5rem;
overflow-x: auto;
border: 1px solid var(--color-border);
border-radius: var(--radius-full);
background-color: var(--color-background);
box-shadow: var(--shadow-2xl);
scrollbar-width: none;
}
.blog-filter::-webkit-scrollbar {
display: none;
}
.blog-filter-btn {
flex-shrink: 0;
padding: 0.75rem 1.5rem;
border-radius: var(--radius-full);
font-size: 0.75rem;
font-weight: 900;
line-height: 1rem;
letter-spacing: 0.1em;
text-transform: uppercase;
white-space: nowrap;
color: var(--color-muted-foreground);
transition: background-color var(--transition), color var(--transition), box-shadow var(--transition);
}
.blog-filter-btn:hover {
color: var(--color-foreground);
background-color: color-mix(in srgb, var(--color-muted) 50%, transparent);
}
.blog-filter-btn[aria-pressed="true"] {
color: var(--color-primary);
background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 20%, transparent);
} .blog-wrap {
padding-bottom: 5rem;
}
.blog-featured-wrap {
margin-bottom: 5rem;
}
.blog-featured {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
min-height: 500px;
overflow: hidden;
border: 1px solid var(--color-border);
border-radius: 3rem;
background-color: var(--color-card);
box-shadow: var(--shadow-premium);
transition: box-shadow 0.7s ease;
}
.blog-featured:hover {
box-shadow: 0 20px 60px rgb(37 99 235 / 0.1);
}
.blog-featured-img,
.blog-card-img {
position: relative;
overflow: hidden;
}
.blog-featured-img img,
.blog-card-img img,
.blog-related-img img,
.blog-post-image img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.blog-featured-img img,
.blog-card-img img {
transition: transform 1.5s ease-out;
}
.blog-featured:hover .blog-featured-img img,
.blog-card:hover .blog-card-img img {
transform: scale(1.1);
}
.blog-featured-badge {
position: absolute;
top: 1.5rem;
left: 1.5rem;
z-index: 1;
padding: 0.5rem 1rem;
border-radius: var(--radius-full);
font-size: 0.625rem;
font-weight: 900;
line-height: 0.9375rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-white);
background-color: var(--color-primary);
box-shadow: var(--shadow-2xl);
}
.blog-featured-body {
display: flex;
flex-direction: column;
justify-content: center;
padding: 4rem;
background-image: linear-gradient(to bottom right, var(--color-card), color-mix(in srgb, var(--color-muted) 20%, transparent));
} .blog-meta {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 0.625rem;
font-weight: 700;
line-height: 0.9375rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-muted-foreground);
}
.blog-meta-item {
display: inline-flex;
align-items: center;
gap: 0.375rem;
}
.blog-meta-item .icon {
width: 0.875rem;
height: 0.875rem;
}
.blog-meta-divider {
width: 1px;
height: 0.75rem;
background-color: var(--color-border);
}
.blog-featured-meta {
gap: 1rem;
margin-bottom: 2rem;
font-size: 0.6875rem;
line-height: 1rem;
}
.blog-featured-meta .blog-meta-divider {
height: 1rem;
}
.blog-featured-category {
font-weight: 900;
color: var(--color-primary);
}
.blog-featured-title {
margin-bottom: 1.5rem;
font-size: 3rem;
font-weight: 800;
line-height: 1.1;
letter-spacing: -0.025em;
color: var(--color-foreground);
transition: color 0.5s ease;
}
.blog-featured:hover .blog-featured-title {
color: var(--color-primary);
}
.blog-featured-text {
margin-bottom: 2.5rem;
padding-left: 1.5rem;
border-left: 4px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
font-size: 1.125rem;
line-height: 1.625;
color: var(--color-muted-foreground);
}
.blog-featured-footer,
.blog-card-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.blog-author {
display: flex;
align-items: center;
gap: 1rem;
}
.blog-author-avatar {
display: flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
border: 1px solid var(--color-border);
border-radius: 50%;
font-weight: 700;
color: var(--color-muted-foreground);
background-color: var(--color-muted);
}
.blog-author-name {
display: block;
font-size: 0.875rem;
font-weight: 700;
line-height: 1.25rem;
color: var(--color-foreground);
}
.blog-author-date {
display: block;
margin-top: 0.25rem;
font-size: 0.6875rem;
font-weight: 600;
line-height: 1rem;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--color-muted-foreground);
}
.blog-featured-arrow {
display: flex;
align-items: center;
justify-content: center;
width: 3.5rem;
height: 3.5rem;
border-radius: 50%;
color: var(--color-white);
background-color: var(--color-primary);
box-shadow: 0 20px 25px -5px color-mix(in srgb, var(--color-primary) 30%, transparent), 0 8px 10px -6px color-mix(in srgb, var(--color-primary) 30%, transparent);
transition: transform 0.5s ease;
} .blog-featured-arrow .icon {
transform: rotate(-45deg);
}
.blog-featured:hover .blog-featured-arrow {
transform: scale(1.1) rotate(45deg);
}  .blog-list {
padding-bottom: 5rem;
columns: 3;
column-gap: 2rem;
}
.blog-list-item {
margin-bottom: 2rem;
break-inside: avoid;
}
.blog-card {
display: flex;
flex-direction: column;
overflow: hidden;
border: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
border-radius: var(--radius-lg);
background-color: color-mix(in srgb, var(--color-card) 80%, transparent);
box-shadow: 0 8px 30px rgb(0 0 0 / 0.04);
transition: transform 0.5s ease, box-shadow 0.5s ease, border-color 0.5s ease;
}
[data-theme="dark"] .blog-card {
box-shadow: 0 8px 30px rgb(0 0 0 / 0.1);
}
.blog-card:hover {
border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
box-shadow: 0 20px 40px rgb(37 99 235 / 0.12);
transform: translateY(-0.25rem);
}
.blog-card-img {
flex-shrink: 0;
height: 15rem;
} .blog-card-img::after {
content: "";
position: absolute;
inset: 0;
background-image: linear-gradient(to top, rgb(15 23 42 / 0.6), transparent);
opacity: 0;
transition: opacity 0.5s ease;
}
.blog-card:hover .blog-card-img::after {
opacity: 1;
}
.blog-card-label {
position: absolute;
top: 1.25rem;
left: 1.25rem;
z-index: 1;
padding: 0.375rem 0.875rem;
border: 1px solid color-mix(in srgb, var(--color-border) 50%, transparent);
border-radius: var(--radius-full);
font-size: 0.5625rem;
font-weight: 900;
line-height: 0.875rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-foreground);
background-color: color-mix(in srgb, var(--color-background) 90%, transparent);
box-shadow: var(--shadow-lg);
}
.blog-card-content {
display: flex;
flex-direction: column;
flex-grow: 1;
padding: 2rem;
}
.blog-card-title {
margin-block: 1rem;
font-size: 1.5rem;
font-weight: 700;
line-height: 1.25;
letter-spacing: -0.025em;
color: var(--color-foreground);
transition: color var(--transition);
}
.blog-card:hover .blog-card-title {
color: var(--color-primary);
}
.blog-card-text {
display: -webkit-box;
overflow: hidden;
font-size: 0.875rem;
line-height: 1.625;
color: var(--color-muted-foreground);
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-clamp: 3;
}
.blog-card-footer {
margin-top: 2rem;
padding-top: 1.5rem;
border-top: 1px solid color-mix(in srgb, var(--color-border) 50%, transparent);
}
.blog-card-author {
display: flex;
flex-direction: column;
gap: 0.25rem;
min-width: 0;
}
.blog-card-author-name {
overflow: hidden;
font-size: 0.875rem;
font-weight: 700;
line-height: 1.25rem;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--color-foreground);
}
.blog-card-author-role {
font-size: 0.625rem;
font-weight: 600;
line-height: 0.9375rem;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--color-muted-foreground);
}
.blog-card-arrow {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
color: var(--color-primary);
background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
transition: background-color var(--transition), color var(--transition), transform var(--transition);
}
.blog-card-arrow .icon {
width: 1.25rem;
height: 1.25rem;
}
.blog-card:hover .blog-card-arrow {
color: var(--color-white);
background-color: var(--color-primary);
transform: scale(1.1);
} .blog-newsletter {
position: relative;
isolation: isolate;
padding: 2.5rem;
overflow: hidden;
border-radius: var(--radius-lg);
color: var(--color-white);
background-image: linear-gradient(to bottom right, var(--color-primary), var(--color-blue-600));
box-shadow: 0 25px 50px -12px color-mix(in srgb, var(--color-primary) 20%, transparent);
}
.blog-newsletter::before {
content: "";
position: absolute;
top: -4rem;
right: -4rem;
z-index: -1;
width: 24rem;
height: 24rem;
background: radial-gradient(closest-side, rgb(255 255 255 / 0.1), transparent);
}
.blog-newsletter :focus-visible {
outline-color: var(--color-white);
}
.blog-newsletter-icon {
display: flex;
align-items: center;
justify-content: center;
width: 4rem;
height: 4rem;
margin-bottom: 2rem;
border: 1px solid rgb(255 255 255 / 0.2);
border-radius: 1rem;
background-color: rgb(255 255 255 / 0.1);
}
.blog-newsletter-icon .icon {
width: 2rem;
height: 2rem;
}
.blog-newsletter-title {
margin-bottom: 1rem;
font-size: 1.5rem;
line-height: 2rem;
letter-spacing: -0.025em;
}
.blog-newsletter-text {
margin-bottom: 2rem;
font-size: 0.875rem;
line-height: 1.625;
color: var(--color-blue-100);
}
.blog-newsletter-form,
.blog-aside-form {
display: flex;
flex-direction: column;
gap: 1rem;
}
.blog-newsletter-input {
width: 100%;
padding: 1rem 1.25rem;
border: 1px solid rgb(255 255 255 / 0.2);
border-radius: var(--radius-sm);
font-size: 0.875rem;
color: var(--color-white);
background-color: rgb(0 0 0 / 0.2);
transition: border-color var(--transition), background-color var(--transition);
}
.blog-newsletter-input::placeholder {
color: var(--color-blue-200);
opacity: 1;
}
.blog-newsletter-input:focus {
border-color: rgb(255 255 255 / 0.5);
background-color: rgb(0 0 0 / 0.3);
}
.blog-newsletter-btn {
width: 100%;
height: 3rem;
border-radius: var(--radius-sm);
color: var(--color-primary);
background-color: var(--color-white);
box-shadow: var(--shadow-lg);
}
.blog-newsletter-btn:hover {
background-color: var(--color-slate-50);
} .blog-empty {
margin-bottom: 5rem;
padding: 8rem 1.5rem;
border: 1px dashed var(--color-border);
border-radius: 3rem;
text-align: center;
background-color: color-mix(in srgb, var(--color-card) 50%, transparent);
}
.blog-empty > .icon {
width: 4rem;
height: 4rem;
margin: 0 auto 1.5rem;
color: color-mix(in srgb, var(--color-muted-foreground) 50%, transparent);
}
.blog-empty-title {
margin-bottom: 0.5rem;
font-size: 1.5rem;
line-height: 2rem;
}
.blog-empty-text {
max-width: 24rem;
margin: 0 auto 2rem;
color: var(--color-muted-foreground);
} .blog-post-wrap {
position: relative;
isolation: isolate;
padding: 8rem 0 5rem;
} .blog-post-wrap::before {
content: "";
position: absolute;
inset: 0 0 auto;
z-index: -1;
height: 450px;
background-image: linear-gradient(to bottom, color-mix(in srgb, var(--color-primary) 5%, transparent), transparent 50%);
pointer-events: none;
}
.blog-post-back {
display: flex;
align-items: center;
gap: 0.5rem;
width: max-content;
margin-bottom: 2rem;
font-size: 0.875rem;
font-weight: 700;
line-height: 1.5rem;
color: var(--color-muted-foreground);
transition: color var(--transition);
}
.blog-post-back .icon {
width: 1rem;
height: 1rem;
transition: transform var(--transition);
}
.blog-post-back:hover {
color: var(--color-primary);
}
.blog-post-back:hover .icon {
transform: translateX(-0.25rem);
}
.blog-post-head {
max-width: 56rem;
margin: 0 auto 3rem;
text-align: center;
}
.blog-post-category {
display: inline-block;
margin-bottom: 1.5rem;
padding: 0.5rem 1rem;
border: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
border-radius: var(--radius-full);
font-size: 0.625rem;
font-weight: 800;
line-height: 0.9375rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-primary);
background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
}
.blog-post-title {
margin-bottom: 2rem;
font-size: 3.75rem;
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.025em;
color: var(--color-foreground);
}
.blog-post-meta {
display: flex;
align-items: center;
justify-content: center;
gap: 3rem;
padding-block: 1.5rem;
border-block: 1px solid var(--color-border);
}
.blog-post-author-name {
display: block;
font-size: 0.875rem;
font-weight: 700;
line-height: 1.25rem;
color: var(--color-foreground);
}
.blog-post-author-role {
display: block;
margin-top: 0.125rem;
font-size: 0.75rem;
font-weight: 600;
line-height: 1rem;
color: var(--color-muted-foreground);
}
.blog-post-meta-info {
gap: 1.5rem;
font-size: 0.75rem;
line-height: 1rem;
letter-spacing: 0.05em;
}
.blog-post-meta-info .icon {
width: 1rem;
height: 1rem;
color: var(--color-primary);
}
.blog-post-image {
position: relative;
height: 520px;
margin-bottom: 4rem;
overflow: hidden;
border: 1px solid var(--color-border);
border-radius: 2.5rem;
box-shadow: var(--shadow-premium);
}
.blog-post-layout {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
align-items: start;
gap: 4rem;
}
.blog-post-main {
grid-column: span 8;
min-width: 0;
} .blog-post-content {
overflow-wrap: break-word;
color: var(--color-muted-foreground);
}
.blog-post-content > :first-child {
margin-top: 0;
}
.blog-post-content > :last-child {
margin-bottom: 0;
}
.blog-post-content h2,
.blog-post-content h3 {
letter-spacing: -0.025em;
color: var(--color-foreground);
}
.blog-post-content h2 {
margin: 2.5rem 0 1rem;
font-size: 1.5rem;
line-height: 2rem;
}
.blog-post-content h3 {
margin: 2rem 0 0.75rem;
font-size: 1.25rem;
line-height: 1.75rem;
}
.blog-post-content p,
.blog-post-content ul,
.blog-post-content ol {
margin-bottom: 1.5rem;
line-height: 1.625;
}
.blog-post-content ul,
.blog-post-content ol {
padding-left: 1.5rem;
}
.blog-post-content ul {
list-style: disc;
}
.blog-post-content ol {
list-style: decimal;
}
.blog-post-content li + li {
margin-top: 0.5rem;
}
.blog-post-content strong {
font-weight: 700;
color: var(--color-foreground);
}
.blog-post-content a {
font-weight: 500;
text-decoration: underline;
color: var(--color-primary);
word-break: break-all;
}
.blog-post-content img {
width: 100%;
border-radius: 1rem;
}
.blog-post-content blockquote {
margin: 2rem 0;
padding: 1rem 1rem 1rem 1.5rem;
border-left: 4px solid var(--color-primary);
border-radius: 0 0.75rem 0.75rem 0;
font-style: italic;
color: var(--color-foreground);
background-color: color-mix(in srgb, var(--color-muted) 30%, transparent);
}
.blog-post-tags {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 3rem;
padding-top: 2rem;
border-top: 1px solid var(--color-border);
}
.blog-post-tag {
padding: 0.375rem 0.875rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-full);
font-size: 0.75rem;
font-weight: 600;
line-height: 1rem;
color: var(--color-muted-foreground);
background-color: var(--color-muted);
} .blog-aside {
position: sticky;
top: 7rem;
display: flex;
flex-direction: column;
gap: 2rem;
grid-column: span 4;
}
.blog-aside-card {
position: relative;
isolation: isolate;
padding: 2rem;
overflow: hidden;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background-color: var(--color-card);
box-shadow: var(--shadow-premium);
}
.blog-aside-card::before {
content: "";
position: absolute;
top: -2rem;
right: -2rem;
z-index: -1;
width: 10rem;
height: 10rem;
background: radial-gradient(closest-side, color-mix(in srgb, var(--color-primary) 5%, transparent), transparent);
}
.blog-aside-card-muted {
border-color: color-mix(in srgb, var(--color-border) 80%, transparent);
background-color: color-mix(in srgb, var(--color-muted) 30%, transparent);
box-shadow: none;
}
.blog-aside-card-muted::before {
content: none;
}
.blog-aside-icon {
width: 2rem;
height: 2rem;
margin-bottom: 1.5rem;
color: var(--color-primary);
}
.blog-aside-title {
margin-bottom: 0.75rem;
font-size: 1.25rem;
line-height: 1.75rem;
letter-spacing: -0.025em;
color: var(--color-foreground);
}
.blog-aside-text {
margin-bottom: 1.5rem;
font-size: 0.875rem;
line-height: 1.625;
color: var(--color-muted-foreground);
}
.blog-aside-btn {
width: 100%;
height: 3rem;
padding-inline: 1rem;
}
.blog-aside-form {
gap: 0.75rem;
}
.blog-subscribe-btn {
width: 100%;
height: 2.625rem;
border-radius: var(--radius-sm);
font-size: 0.75rem;
letter-spacing: 0.05em;
text-transform: uppercase;
background-color: var(--color-background);
}
.blog-subscribe-btn:hover {
border-color: var(--color-primary);
color: var(--color-white);
background-color: var(--color-primary);
} .blog-related {
margin-top: 6rem;
padding-top: 4rem;
border-top: 1px solid var(--color-border);
}
.blog-related-title {
margin-bottom: 2.5rem;
font-size: 1.875rem;
line-height: 2.25rem;
letter-spacing: -0.025em;
color: var(--color-foreground);
}
.blog-related-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 2rem;
}
.blog-related-card {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 1.5rem;
padding: 1rem;
overflow: hidden;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background-color: var(--color-card);
transition: box-shadow var(--transition);
}
.blog-related-card:hover {
box-shadow: var(--shadow-premium);
}
.blog-related-img {
position: relative;
grid-column: span 4;
min-height: 140px;
overflow: hidden;
border-radius: var(--radius-sm);
}
.blog-related-img img {
transition: transform 0.5s ease;
}
.blog-related-card:hover .blog-related-img img {
transform: scale(1.05);
}
.blog-related-content {
display: flex;
flex-direction: column;
grid-column: span 8;
padding-block: 0.5rem;
}
.blog-related-category {
font-size: 0.5625rem;
font-weight: 800;
line-height: 1.5rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-primary);
}
.blog-related-card-title,
.blog-related-text {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
}
.blog-related-card-title {
margin-bottom: 0.75rem;
font-size: 1.125rem;
line-height: 1.375;
color: var(--color-foreground);
transition: color var(--transition);
}
.blog-related-card:hover .blog-related-card-title {
color: var(--color-primary);
}
.blog-related-text {
font-size: 0.75rem;
line-height: 1.625;
color: var(--color-muted-foreground);
}
.blog-related-meta {
margin-top: auto;
padding-top: 1rem;
font-weight: 600;
letter-spacing: 0.05em;
} .default-page {
padding: 9rem 0 6rem;
}
.default-page-content {
max-width: 56rem;
margin-inline: auto;
}
.default-page .title-badge .icon {
width: 0.875rem;
height: 0.875rem;
}
.default-page h1 {
margin-bottom: 1rem;
font-size: 3rem;
line-height: 1;
letter-spacing: -0.025em;
color: var(--color-foreground);
}
.default-page .default-page-updated {
margin-bottom: 3rem;
font-size: 0.875rem;
font-weight: 600;
line-height: 1.25rem;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--color-primary);
}
.default-page section + section {
margin-top: 2.5rem;
}
.default-page h2 {
margin-bottom: 1rem;
font-size: 1.5rem;
line-height: 2rem;
color: var(--color-foreground);
}
.default-page h3 {
font-size: 1rem;
line-height: 1.5rem;
color: var(--color-foreground);
}
.default-page p,
.default-page ul,
.default-page ol {
margin-bottom: 1rem;
line-height: 1.625;
color: var(--color-muted-foreground);
}
.default-page section > :last-child {
margin-bottom: 0;
}
.default-page ul,
.default-page ol {
padding-left: 1.5rem;
}
.default-page ul {
list-style: disc;
}
.default-page ol {
list-style: decimal;
}
.default-page li + li {
margin-top: 0.5rem;
}
.default-page a {
font-weight: 700;
color: var(--color-primary);
}
.default-page a:hover {
text-decoration: underline;
}
.default-page .btn {
margin-top: 0.5rem;
}
.default-page .btn .icon {
width: 1rem;
height: 1rem;
} .default-page-cards {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.5rem;
margin-top: 1.5rem;
}
.default-page-card {
padding: 1.5rem;
border: 1px solid var(--color-border);
border-radius: 1rem;
background-color: color-mix(in srgb, var(--color-muted) 20%, transparent);
}
.default-page-card-head {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.75rem;
}
.default-page-card-head .icon {
width: 1.25rem;
height: 1.25rem;
}
.default-page-card-primary .icon {
color: var(--color-primary);
}
.default-page-card-emerald .icon {
color: var(--color-emerald-500);
}
.default-page-card p {
margin-bottom: 0;
font-size: 0.75rem;
} .status-page {
display: flex;
align-items: center;
min-height: 100vh;
padding: 9rem 0 6rem;
border-bottom: 0;
text-align: center;
}
.status-content {
display: flex;
flex-direction: column;
align-items: center;
max-width: 48rem;
margin-inline: auto;
} .status-code {
margin-bottom: 1rem;
font-size: 10rem;
font-weight: 900;
line-height: 1;
letter-spacing: -0.05em;
color: transparent;
background: linear-gradient(135deg, var(--color-primary), var(--color-sky-500));
-webkit-background-clip: text;
background-clip: text;
user-select: none;
} .status-icon {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 6rem;
height: 6rem;
margin-bottom: 2rem;
border-radius: 50%;
color: var(--color-emerald-500);
background-color: color-mix(in srgb, var(--color-emerald-500) 10%, transparent);
}
.status-icon::before {
content: "";
position: absolute;
inset: 0;
border: 2px solid color-mix(in srgb, var(--color-emerald-500) 30%, transparent);
border-radius: 50%;
animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.status-icon .icon {
width: 3rem;
height: 3rem;
}
.status-title {
margin-bottom: 1.5rem;
font-size: 3.75rem;
font-weight: 800;
line-height: 1.1;
letter-spacing: -0.025em;
color: var(--color-foreground);
text-wrap: balance;
}
.status-text {
max-width: 36rem;
margin-bottom: 2.5rem;
font-size: 1.125rem;
font-weight: 500;
line-height: 1.625;
color: var(--color-muted-foreground);
}
.status-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1rem;
}
.status-actions .btn-outline {
background-color: var(--color-background);
} .status-links-wrap {
max-width: 64rem;
margin: 4rem auto 0;
}
.status-links-title {
margin-bottom: 1.5rem;
font-size: 0.75rem;
font-weight: 700;
line-height: 1rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-muted-foreground);
}
.status-links {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
gap: 1rem;
text-align: left;
}
.status-links-narrow {
max-width: 48rem;
margin-inline: auto;
}
.status-link {
display: flex;
flex-direction: column;
gap: 0.75rem;
height: 100%;
padding: 1.25rem;
border: 1px solid var(--color-border);
border-radius: var(--radius);
background-color: var(--color-card);
box-shadow: var(--shadow-surface);
transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.status-link:hover {
border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
box-shadow: var(--shadow-lg);
transform: translateY(-0.25rem);
}
.status-link-icon {
display: flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border-radius: var(--radius-sm);
color: var(--color-primary);
background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
}
.status-link-icon .icon {
width: 1.25rem;
height: 1.25rem;
}
.status-link-title {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
font-size: 1rem;
font-weight: 700;
line-height: 1.5rem;
color: var(--color-foreground);
transition: color var(--transition);
}
.status-link-title .icon {
width: 1rem;
height: 1rem;
color: var(--color-primary);
transition: transform var(--transition);
}
.status-link:hover .status-link-title {
color: var(--color-primary);
}
.status-link:hover .status-link-title .icon {
transform: translateX(0.25rem);
}
.status-link-text {
font-size: 0.8125rem;
line-height: 1.5;
color: var(--color-muted-foreground);
overflow-wrap: anywhere;
} .footer-wrap {
border-top: 1px solid var(--color-border);
background-color: var(--color-background);
}
.footer {
padding: 5rem 0 2.5rem;
}
.footer-top {
display: grid;
gap: 3rem;
margin-bottom: 4rem;
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.footer-about {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.footer-logo a {
gap: 0.75rem;
}
.footer-logo img {
width: 49px;
height: 44px;
}
.footer-logo .logo-title {
font-size: 1.25rem;
}
.footer-logo .logo-tagline {
display: block;
}
.footer-description {
line-height: 1.625;
color: var(--color-muted-foreground);
}
.footer-social {
display: flex;
gap: 1rem;flex-wrap: balance;
width: 80%;
}
.footer-social a {
display: flex;
align-items: center;
justify-content: center;
width: 2.75rem;
height: 2.75rem;
border: 1px solid var(--color-border);
border-radius: 50%;
color: var(--color-muted-foreground);
transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}
.footer-social .icon {
width: 1.25rem;
height: 1.25rem;
}
.footer-social a:hover {
color: var(--color-white);
border-color: var(--color-primary);
background-color: var(--color-primary);
}
.footer-social .footer-social-youtube:hover {
border-color: var(--color-red-600);
background-color: var(--color-red-600);
}
.footer-title {
margin-bottom: 1.5rem;
font-size: 1.125rem;
line-height: 1.75rem;
}
.footer-menu ul,
.footer-contact ul {
display: flex;
flex-direction: column;
gap: 1rem;
}
.footer-menu a,
.footer-contact a {
color: var(--color-muted-foreground);
transition: color var(--transition);
}
.footer-menu a:hover,
.footer-contact a:hover {
color: var(--color-primary);
}
.footer-contact li {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 0.875rem;
line-height: 1.25rem;
color: var(--color-muted-foreground);
overflow-wrap: anywhere;
}
.footer-contact li:first-child {
align-items: flex-start;
}
.footer-contact .icon {
width: 1.25rem;
height: 1.25rem;
color: var(--color-primary);
}
.footer-bottom {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding-top: 2rem;
border-top: 1px solid var(--color-border);
font-size: 0.875rem;
line-height: 1.25rem;
text-align: left;
color: var(--color-muted-foreground);
}
.footer-legal {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 1.5rem;
}
.footer-legal li {
display: flex;
align-items: center;
}
.footer-legal li + li::before {
content: "|";
display: block;
margin-right: 1.5rem;
font-size: 0.6875rem;
color: color-mix(in srgb, var(--color-muted-foreground) 35%, transparent);
}
.footer-legal a,
.footer-legal-btn {
transition: color var(--transition);
}
.footer-legal-btn {
font-size: 0.875rem;
font-weight: 500;
color: var(--color-muted-foreground);
}
.footer-legal a:hover,
.footer-legal-btn:hover {
color: var(--color-primary);
} .floating-actions {
position: fixed;
right: 2rem;
bottom: calc(1.5rem + env(safe-area-inset-bottom));
z-index: 50;
display: flex;
flex-direction: column;
gap: 1rem;
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
} .floating-actions.is-hidden {
opacity: 0;
visibility: hidden;
transform: translateY(20px) scale(0.8);
}
.floating-action {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 3.5rem;
height: 3.5rem;
border: 1px solid rgb(255 255 255 / 0.2);
border-radius: 50%;
color: var(--color-white);
transition: transform 0.2s ease;
}
.floating-action:hover {
transform: translateY(-2px) scale(1.05);
}
.floating-action:active {
transform: scale(0.95);
}
.floating-action-whatsapp {
background-color: var(--color-whatsapp);
box-shadow: 0 20px 25px -5px rgb(37 211 102 / 0.3);
}
.floating-action-consult {
background-color: var(--color-primary);
box-shadow: 0 20px 25px -5px color-mix(in srgb, var(--color-primary) 30%, transparent);
}
.floating-action-tooltip {
position: absolute;
right: 100%;
margin-right: 1rem;
padding: 0.5rem 1rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
white-space: nowrap;
color: var(--color-foreground);
background-color: var(--color-background);
box-shadow: var(--shadow-lg);
opacity: 0;
pointer-events: none;
transition: opacity var(--transition);
}
.floating-action:hover .floating-action-tooltip,
.floating-action:focus-visible .floating-action-tooltip {
opacity: 1;
}
.back-to-top {
position: fixed;
left: 2rem;
bottom: calc(1.5rem + env(safe-area-inset-bottom));
z-index: 50;
display: flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
border: 1px solid var(--color-fab-border);
border-radius: 50%;
color: var(--color-icon);
background-color: var(--color-fab);
box-shadow: 0 8px 30px rgb(0 0 0 / 0.12);
opacity: 0;
visibility: hidden;
transform: translateY(20px) scale(0.8);
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s, color 0.3s ease, box-shadow 0.3s ease;
}
.back-to-top.is-visible {
opacity: 1;
visibility: visible;
transform: none;
}
.back-to-top.is-visible:hover {
color: var(--color-primary);
box-shadow: 0 8px 30px rgb(0 0 0 / 0.2);
transform: translateY(-0.25rem);
}
.back-to-top .icon {
width: 1.5rem;
height: 1.5rem;
stroke-width: 2.5;
} .consult-modal {
width: calc(100% - 2rem);
margin: auto;
padding: 0;
border: 1px solid var(--color-modal-border);
color: var(--color-foreground);
background-color: var(--color-modal);
box-shadow: var(--shadow-2xl);
}
.consult-modal {
max-width: 420px;
max-height: 85vh;
overflow-y: auto;
overscroll-behavior: contain;
border-radius: 28px;
}
.consult-modal[open] {
animation: modal-in 0.3s var(--ease-out);
}
.has-modal {
overflow: hidden;
}
.consult-modal::backdrop {
background-color: rgb(15 23 42 / 0.4);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
}
.consult-modal-header {
position: relative;
padding: 1.25rem 1.5rem;
border-bottom: 1px solid var(--color-modal-border);
background-color: var(--color-modal-header);
}
.consult-modal-close {
position: absolute;
top: 1.25rem;
right: 1.25rem;
display: flex;
padding: 0.375rem;
border-radius: 50%;
color: var(--color-slate-400);
transition: background-color var(--transition), color var(--transition);
}
.consult-modal-close:hover {
color: var(--color-foreground);
background-color: var(--color-input-border);
}
.consult-modal-close .icon {
width: 1.25rem;
height: 1.25rem;
}
.consult-modal-eyebrow {
margin-bottom: 0.375rem;
font-size: 0.625rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-modal-eyebrow);
}
.consult-modal-title {
font-size: 1.25rem;
font-weight: 800;
line-height: 1.75rem;
letter-spacing: -0.025em;
}
.consult-modal-text {
margin-top: 0.25rem;
padding-right: 1.5rem;
font-size: 0.8125rem;
font-weight: 500;
line-height: 1.375;
color: var(--color-slate-500);
}
[data-theme="dark"] .consult-modal-text {
color: var(--color-slate-400);
}
.consult-form {
display: flex;
flex-direction: column;
gap: 1rem;
padding: 1.5rem;
}
.form-row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.75rem;
}
.form-group {
display: flex;
flex-direction: column;
gap: 0.375rem;
}
.form-group label {
margin-left: 0.25rem;
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--color-modal-label);
}
.form-control {
width: 100%;
min-width: 0;
height: 3rem;
padding-inline: 0.625rem;
border: 1px solid var(--color-input-border);
border-radius: var(--radius-sm);
font-size: 1rem;
font-weight: 500;
color: var(--color-foreground);
background-color: var(--color-input);
transition: border-color var(--transition), box-shadow var(--transition);
}
.form-control::placeholder {
color: var(--color-placeholder);
opacity: 1;
}
.form-control:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent);
}
.form-select {
padding-inline: 1rem 2.5rem;
font-size: 0.875rem;
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 1rem center;
background-size: 1rem;
}
textarea.form-control {
height: auto;
min-height: 4rem;
padding: 0.75rem 1rem;
resize: vertical;
} .form-optional {
font-weight: 500;
text-transform: none;
color: var(--color-slate-400);
}  .section-dark {
--color-dark-text: var(--color-slate-300);
--color-dark-card: rgb(255 255 255 / 0.04);
--color-dark-border: rgb(255 255 255 / 0.1);
position: relative;
isolation: isolate;
color: var(--color-white);
background: linear-gradient(135deg, #0a1730 0%, #10244a 55%, #0a1730 100%);
}
.text-accent {
font-style: normal;
color: var(--color-primary);
}
.section-dark .text-accent,
.page-banner .text-accent {
color: var(--color-blue-400);
}
.section-head {
display: flex;
flex-direction: column;
align-items: center;
max-width: 56rem;
margin: 0 auto 3.5rem;
text-align: center;
}
.section-head-start {
align-items: flex-start;
margin-inline: 0;
text-align: left;
}
.section-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1rem;
font-size: 0.75rem;
font-weight: 700;
line-height: 1rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--color-primary);
}
.section-eyebrow::before,
.section-eyebrow::after {
content: "";
width: 1.75rem;
height: 1px;
background-color: currentColor;
opacity: 0.6;
}
.section-head-start .section-eyebrow::after {
display: none;
}
.section-dark .section-eyebrow {
color: var(--color-blue-300);
}
.section-head-title {
font-size: 2.75rem;
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.025em;
}
.section-head-text {
max-width: 46rem;
margin-top: 1rem;
font-size: 1.0625rem;
line-height: 1.7;
color: var(--color-slate-500);
}
.section-dark .section-head-text {
color: var(--color-dark-text);
}
[data-theme="dark"] .section-head-text {
color: var(--color-slate-400);
}
.btn-outline-light {
font-weight: 600;
color: var(--color-white);
border-color: rgb(255 255 255 / 0.3);
}
.btn-outline-light:hover {
border-color: var(--color-white);
background-color: rgb(255 255 255 / 0.08);
} .page-banner {
position: relative;
isolation: isolate; margin-top: calc(var(--header-offset) + 1.5rem);
padding-block: 5rem;
overflow: hidden;
color: var(--color-white);
background: radial-gradient(ellipse at 80% 0%, #17336a 0%, transparent 60%), linear-gradient(135deg, #0a1730 0%, #0f2347 100%);
}
.page-banner-grid {
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background-image:
linear-gradient(to right, rgb(255 255 255 / 0.04) 1px, transparent 1px),
linear-gradient(to bottom, rgb(255 255 255 / 0.04) 1px, transparent 1px);
background-size: 48px 48px;
mask-image: linear-gradient(to bottom, #000 40%, transparent);
}
.page-banner-content {
max-width: 42rem;
}
.page-banner-breadcrumbs ol {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.375rem;
margin-bottom: 1.25rem;
font-size: 0.875rem;
font-weight: 500;
color: var(--color-slate-300);
}
.page-banner-breadcrumbs li {
display: inline-flex;
align-items: center;
gap: 0.375rem;
}
.page-banner-breadcrumbs a:hover {
color: var(--color-white);
}
.page-banner-breadcrumbs .icon {
width: 0.875rem;
height: 0.875rem;
}
.page-banner-breadcrumbs [aria-current] {
color: var(--color-blue-400);
}
.page-banner-eyebrow {
margin-bottom: 1rem;
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--color-blue-300);
}
.page-banner-title {
font-size: 3.75rem;
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.025em;
}
.page-banner-text {
margin-top: 1.5rem;
font-size: 1.1875rem;
line-height: 1.7;
color: var(--color-slate-300);
}
.page-banner-links {
display: flex;
flex-wrap: wrap;
gap: 0.625rem;
margin-top: 2.25rem;
}
.page-banner-link {
display: inline-flex;
align-items: center;
padding: 0.5rem 1.125rem;
border: 1px solid rgb(255 255 255 / 0.25);
border-radius: var(--radius-full);
font-size: 0.875rem;
font-weight: 600;
transition: background-color var(--transition), border-color var(--transition);
}
.page-banner-link:hover {
border-color: var(--color-white);
background-color: rgb(255 255 255 / 0.08);
} .story-wrap {
padding-block: 6.5rem;
}
.story {
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
align-items: center;
gap: 4rem;
}
.story-single {
grid-template-columns: minmax(0, 1fr);
max-width: 56rem;
}
.story-text {
margin-top: 1.5rem;
font-size: 1rem;
line-height: 1.8;
text-align: justify;
color: var(--color-slate-600);
}
[data-theme="dark"] .story-text {
color: var(--color-slate-400);
}
.story-text p + p {
margin-top: 1rem;
}
.story-text a {
color: var(--color-primary);
text-decoration: underline;
}
.story-actions {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-top: 2rem;
}
.story-actions:empty {
display: none;
}
.story-facts {
padding: 1rem 2rem;
border: 1px solid var(--color-border);
border-radius: var(--radius);
background-color: var(--color-slate-50);
}
[data-theme="dark"] .story-facts {
background-color: var(--color-card);
}
.story-fact {
display: grid;
grid-template-columns: 9rem minmax(0, 1fr);
gap: 1rem;
padding-block: 1.5rem;
}
.story-fact + .story-fact {
border-top: 1px solid var(--color-border);
}
.story-fact dt {
padding-top: 0.25rem;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--color-primary);
}
.story-fact dd {
font-size: 1.0625rem;
line-height: 1.6;
} .pillars-wrap {
padding-block: 6.5rem;
}
.pillars {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
gap: 1.5rem;
}
.pillar-card {
position: relative;
padding: 2.5rem 2rem;
border: 1px solid var(--color-dark-border);
border-radius: var(--radius);
background-color: var(--color-dark-card);
transition: border-color var(--transition), transform var(--transition);
} .pillar-card::before {
content: "";
position: absolute;
top: -1px;
left: 2rem;
right: 2rem;
height: 2px;
background: linear-gradient(to right, var(--color-blue-400), transparent);
}
.pillar-card:hover {
border-color: color-mix(in srgb, var(--color-blue-400) 40%, transparent);
transform: translateY(-0.25rem);
}
.pillar-card-number {
display: block;
font-size: 3rem;
font-weight: 300;
line-height: 1;
color: var(--color-blue-400);
}
.pillar-card-title {
margin-top: 1.5rem;
font-size: 1.5rem;
font-weight: 600;
}
.pillar-card-text {
margin-top: 1rem;
line-height: 1.75;
color: var(--color-dark-text);
} .leaders-wrap {
padding-block: 6.5rem;
}
.leaders {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1.5rem;
}
.leader-card {
overflow: hidden;
border: 1px solid var(--color-border);
border-radius: var(--radius);
background-color: var(--color-card);
box-shadow: var(--shadow-surface);
transition: box-shadow var(--transition), transform var(--transition);
}
.leader-card:hover {
box-shadow: var(--shadow-xl);
transform: translateY(-0.25rem);
}
.leader-card-photo {
position: relative;
aspect-ratio: 4 / 5;
overflow: hidden;
background-color: var(--color-muted);
}
.leader-card-photo img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
transition: transform 0.6s var(--ease-out);
}
.leader-card-initials {
display: grid;
place-items: center;
height: 100%;
font-size: 3.5rem;
font-weight: 700;
letter-spacing: 0.05em;
color: var(--color-primary);
background: linear-gradient(160deg, color-mix(in srgb, var(--color-primary) 12%, transparent), var(--color-muted));
}
.leader-card:hover .leader-card-photo img {
transform: scale(1.04);
}
.leader-card-linkedin {
position: absolute;
right: 1rem;
bottom: 1rem;
display: grid;
place-items: center;
width: 2.5rem;
height: 2.5rem;
border-radius: 0.625rem;
color: var(--color-white);
background-color: #0a66c2;
box-shadow: var(--shadow-md);
transition: transform var(--transition);
}
.leader-card-linkedin:hover {
transform: scale(1.08);
}
.leader-card-linkedin .icon {
width: 1.25rem;
height: 1.25rem;
}
.leader-card-body {
padding: 1.25rem 1.25rem 1.5rem;
}
.leader-card-name {
font-size: 1.125rem;
font-weight: 700;
}
.leader-card-role {
margin-top: 0.375rem;
font-size: 0.8125rem;
font-weight: 600;
line-height: 1.5;
color: var(--color-primary);
} .team-wrap {
padding-block: 6.5rem;
border-top: 1px solid var(--color-border);
background-color: var(--color-slate-50);
}
[data-theme="dark"] .team-wrap {
background-color: var(--color-card);
}
.team-intro {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
align-items: start;
gap: 2.5rem;
margin-bottom: 2.5rem;
line-height: 1.8;
text-align: justify;
color: var(--color-slate-600);
}
[data-theme="dark"] .team-intro {
color: var(--color-slate-400);
}
.team-intro-btn {
align-self: center;
}
.team-photo {
position: relative;
overflow: hidden;
border-radius: var(--radius);
}
.team-photo img {
width: 100%;
aspect-ratio: 16 / 7;
object-fit: cover;
}
.team-photo-caption {
position: absolute;
left: 1.25rem;
bottom: 1.25rem;
display: flex;
flex-direction: column;
gap: 0.25rem;
padding: 0.875rem 1.25rem;
border-radius: var(--radius-sm);
color: var(--color-white);
background-color: rgb(10 23 48 / 0.8);
backdrop-filter: blur(8px);
}
.team-photo-caption strong {
font-size: 1.125rem;
font-weight: 600;
}
.team-photo-caption span {
font-size: 0.8125rem;
color: var(--color-slate-300);
}
.team-card {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
gap: 2rem;
margin-top: 2rem;
padding: 2rem;
border: 1px solid var(--color-border);
border-radius: var(--radius);
background-color: var(--color-background);
}
.team-card-icon {
display: grid;
place-items: center;
width: 3rem;
height: 3rem;
margin-bottom: 1.25rem;
border-radius: var(--radius-sm);
color: var(--color-primary);
background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
}
.team-card-title {
font-size: 1.5rem;
font-weight: 700;
}
.team-card-text {
margin-top: 0.75rem;
line-height: 1.75;
color: var(--color-slate-600);
}
[data-theme="dark"] .team-card-text {
color: var(--color-slate-400);
}
.team-tiers {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
margin-top: 1.5rem;
}
.team-tier {
display: flex;
flex-direction: column;
gap: 0.375rem;
padding: 1.125rem 1.25rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background-color: var(--color-muted);
}
.team-tier strong {
font-size: 1.5rem;
font-weight: 700;
color: var(--color-primary);
}
.team-tier span {
font-size: 0.875rem;
line-height: 1.5;
}
.team-skills {
padding: 1.75rem 2rem;
border-radius: var(--radius);
color: var(--color-white);
background: linear-gradient(135deg, #0a1730, #10244a);
}
.team-skills-title {
margin-bottom: 1.25rem;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--color-blue-300);
}
.team-skills-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.875rem 1.5rem;
}
.team-skills-list li {
display: flex;
align-items: flex-start;
gap: 0.625rem;
font-size: 0.9375rem;
font-weight: 600;
}
.team-skills-list .icon {
width: 1.125rem;
height: 1.125rem;
margin-top: 0.125rem;
color: var(--color-blue-400);
} .stats-wrap {
padding-block: 6rem;
}
.stats-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 2rem;
margin-bottom: 3rem;
}
.stats-head .section-head {
margin-bottom: 0;
}
.stats-head-btn {
flex-shrink: 0;
}
.stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
gap: 1.5rem;
}
.stat-card {
--stat-color: var(--color-blue-600);
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
padding: 2.25rem 1.5rem;
overflow: hidden;
border: 1px solid var(--color-border);
border-radius: var(--radius);
background-color: var(--color-card);
box-shadow: var(--shadow-surface);
transition: transform var(--transition), box-shadow var(--transition);
}
.stat-card::before,
.stat-card::after {
content: "";
position: absolute;
left: 0;
right: 0;
}
.stat-card::before {
top: 0;
height: 3px;
background: linear-gradient(to right, var(--stat-color), transparent);
}
.stat-card::after {
bottom: 0;
height: 4px;
background-color: var(--stat-color);
}
.stat-card:hover {
box-shadow: var(--shadow-xl);
transform: translateY(-0.25rem);
}
.stat-card-teal {
--stat-color: #0e8a99;
}
.stat-card-amber {
--stat-color: #c9961a;
}
.stat-card-emerald {
--stat-color: var(--color-emerald-500);
}
.stat-card-value {
display: flex;
align-items: center;
gap: 0.75rem;
}
.stat-card-number {
font-size: 3rem;
font-weight: 800;
line-height: 1;
font-variant-numeric: tabular-nums;
color: var(--stat-color);
}
.stat-card-icon {
width: 2rem;
height: 2rem;
stroke-width: 1.5;
color: var(--color-slate-400);
}
.stat-card-label {
font-size: 1rem;
font-weight: 600;
} .reasons-wrap {
padding-block: 6.5rem;
}
.reasons {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
gap: 1.5rem;
}
.reason-card {
padding: 2rem 1.75rem;
border: 1px solid var(--color-dark-border);
border-radius: var(--radius);
background-color: var(--color-dark-card);
transition: border-color var(--transition), background-color var(--transition), transform var(--transition);
}
.reason-card:hover {
border-color: color-mix(in srgb, var(--color-blue-400) 40%, transparent);
background-color: rgb(255 255 255 / 0.07);
transform: translateY(-0.25rem);
}
.reason-card-icon {
display: grid;
place-items: center;
width: 3rem;
height: 3rem;
margin-bottom: 1.5rem;
border-radius: var(--radius-sm);
color: var(--color-blue-300);
background-color: rgb(255 255 255 / 0.08);
}
.reason-card-icon .icon {
width: 1.375rem;
height: 1.375rem;
}
.reason-card-title {
font-size: 1.25rem;
font-weight: 600;
line-height: 1.35;
}
.reason-card-text {
margin-top: 0.875rem;
font-size: 0.9375rem;
line-height: 1.75;
color: var(--color-dark-text);
} .logo-grid-wrap {
padding-block: 6rem;
background-color: var(--color-slate-50);
}
[data-theme="dark"] .logo-grid-wrap {
background-color: var(--color-card);
}
.logo-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1.5rem;
}
.logo-grid-card {
display: flex;
flex: 0 1 calc((100% - 6rem) / 5);
flex-direction: column;
align-items: center;
gap: 1rem;
min-width: 11rem;
padding: 1.75rem 1.25rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
text-align: center;
background-color: var(--color-background);
transition: box-shadow var(--transition), transform var(--transition);
}
.logo-grid-card:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-0.25rem);
}
.logo-grid-img {
display: grid;
place-items: center;
height: 4.5rem;
} [data-theme="dark"] .logo-grid-img {
padding: 0.5rem;
border-radius: 0.5rem;
background-color: var(--color-logo-tile);
}
.logo-grid-img img {
width: auto;
max-width: 8rem;
max-height: 4.5rem;
object-fit: contain;
}
[data-theme="dark"] .logo-grid-img img {
max-height: 3.5rem;
}
.logo-grid-title {
font-size: 0.875rem;
font-weight: 600;
line-height: 1.5;
} .gallery-wrap {
padding-block: 6.5rem;
}
.gallery-filters {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.625rem;
margin-bottom: 2.5rem;
}
.gallery-filter {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1.125rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-full);
font-size: 0.9375rem;
font-weight: 600;
transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}
.gallery-filter:hover {
border-color: var(--color-primary);
}
.gallery-filter[aria-pressed="true"] {
border-color: var(--color-primary);
color: var(--color-primary-foreground);
background-color: var(--color-primary);
}
.gallery-filter-count {
min-width: 1.5rem;
padding: 0.0625rem 0.375rem;
border-radius: var(--radius-full);
font-size: 0.75rem;
background-color: var(--color-muted);
}
.gallery-filter[aria-pressed="true"] .gallery-filter-count {
background-color: rgb(255 255 255 / 0.2);
} .gallery-grid {
columns: 3;
column-gap: 1rem;
}
.gallery-item {
margin-bottom: 1rem;
break-inside: avoid;
}
.gallery-item.is-entering {
animation: solution-in 0.4s var(--ease-out) backwards;
animation-delay: calc(min(var(--item-index, 0), 12) * 40ms);
}
.gallery-thumb {
position: relative;
display: block;
width: 100%;
overflow: hidden;
border-radius: var(--radius-sm);
cursor: zoom-in;
}
.gallery-thumb img {
width: 100%;
transition: transform 0.6s var(--ease-out);
}
.gallery-thumb:hover img {
transform: scale(1.04);
}
.gallery-thumb-caption {
position: absolute;
inset: auto 0 0;
padding: 2.5rem 1rem 0.875rem;
font-size: 0.875rem;
font-weight: 600;
text-align: left;
color: var(--color-white);
background: linear-gradient(to top, rgb(10 23 48 / 0.85), transparent);
opacity: 0;
transition: opacity var(--transition);
}
.gallery-thumb-zoom {
position: absolute;
top: 0.75rem;
right: 0.75rem;
display: grid;
place-items: center;
width: 2.25rem;
height: 2.25rem;
border-radius: 50%;
color: var(--color-navy);
background-color: rgb(255 255 255 / 0.9);
opacity: 0;
transition: opacity var(--transition);
}
.gallery-thumb-zoom .icon {
width: 1rem;
height: 1rem;
}
.gallery-thumb:hover .gallery-thumb-caption,
.gallery-thumb:hover .gallery-thumb-zoom,
.gallery-thumb:focus-visible .gallery-thumb-caption,
.gallery-thumb:focus-visible .gallery-thumb-zoom {
opacity: 1;
}
.gallery-lightbox {
width: 100%;
max-width: none;
height: 100%;
max-height: none;
padding: 4rem 5rem;
border: 0;
background: transparent;
}
.gallery-lightbox[open] {
display: flex;
align-items: center;
justify-content: center;
}
.gallery-lightbox::backdrop {
background-color: rgb(2 6 24 / 0.92);
}
.gallery-lightbox-figure {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
max-width: 100%;
max-height: 100%;
}
.gallery-lightbox-figure img {
max-width: 100%;
max-height: calc(100vh - 11rem);
border-radius: var(--radius-sm);
object-fit: contain;
}
.gallery-lightbox-caption {
font-size: 0.9375rem;
font-weight: 500;
text-align: center;
color: var(--color-slate-300);
}
.gallery-lightbox-btn {
position: absolute;
display: grid;
place-items: center;
width: 3rem;
height: 3rem;
border-radius: 50%;
color: var(--color-white);
background-color: rgb(255 255 255 / 0.1);
transition: background-color var(--transition);
}
.gallery-lightbox-btn:hover {
background-color: rgb(255 255 255 / 0.2);
}
.gallery-lightbox-close {
top: 1.25rem;
right: 1.25rem;
}
.gallery-lightbox-prev,
.gallery-lightbox-next {
top: 50%;
transform: translateY(-50%);
}
.gallery-lightbox-prev {
left: 1.25rem;
}
.gallery-lightbox-next {
right: 1.25rem;
}
.gallery-footer {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.25rem;
margin-top: 2.5rem;
text-align: center;
}
.gallery-footer-text {
color: var(--color-slate-500);
}
[data-theme="dark"] .gallery-footer-text {
color: var(--color-slate-400);
}
.gallery-footer-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.75rem;
} .social-wrap {
padding-block: 6.5rem;
border-top: 1px solid var(--color-border);
background-color: var(--color-slate-50);
}
[data-theme="dark"] .social-wrap {
background-color: var(--color-card);
}
.social-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
gap: 1.5rem;
}
.social-card {
--social-color: #0a66c2;
overflow: hidden;
border: 1px solid var(--color-border);
border-radius: var(--radius);
background-color: var(--color-background);
transition: box-shadow var(--transition), transform var(--transition);
}
.social-card:hover {
box-shadow: var(--shadow-xl);
transform: translateY(-0.25rem);
}
.social-card-instagram {
--social-color: #e1306c;
}
.social-card-youtube {
--social-color: #ff0000;
}
.social-card-media {
position: relative;
aspect-ratio: 16 / 9;
background-color: var(--color-muted);
} .social-card-track {
display: flex;
height: 100%;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}
.social-card-track::-webkit-scrollbar {
display: none;
}
.social-card-slide {
position: relative;
flex: 0 0 100%;
scroll-snap-align: start;
}
.social-card-slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
.social-card-play {
position: absolute;
inset: 0;
display: grid;
place-items: center;
}
.social-card-play-btn {
display: grid;
place-items: center;
width: 3.5rem;
height: 3.5rem;
border-radius: 50%;
color: var(--color-white);
background-color: var(--social-color);
box-shadow: 0 0 0 0.5rem rgb(255 255 255 / 0.3);
transition: transform var(--transition);
}
.social-card-youtube .social-card-play-btn {
background-color: #ff0000;
}
.social-card-linkedin .social-card-play-btn,
.social-card-instagram .social-card-play-btn {
background-color: var(--color-navy);
}
.social-card-play:hover .social-card-play-btn {
transform: scale(1.1);
}
.social-card-play-btn .icon {
width: 1.25rem;
height: 1.25rem;
margin-left: 0.1875rem;
}
.social-card-dots {
position: absolute;
right: 0.75rem;
bottom: 0.75rem;
display: flex;
gap: 0.3125rem;
padding: 0.3125rem 0.5rem;
border-radius: var(--radius-full);
background-color: rgb(15 23 42 / 0.45);
}
.social-card-dot {
width: 0.4375rem;
height: 0.4375rem;
border-radius: var(--radius-full);
background-color: rgb(255 255 255 / 0.55);
transition: width var(--transition), background-color var(--transition);
}
.social-card-dot[aria-current="true"] {
width: 1.25rem;
background-color: var(--color-white);
}
.social-card-body {
position: relative;
padding: 1.5rem 1.5rem 1.75rem;
}
.social-card-title {
font-size: 1.375rem;
font-weight: 600;
}
.social-card-text {
margin-top: 0.5rem;
padding-right: 3.5rem;
line-height: 1.65;
color: var(--color-slate-600);
}
[data-theme="dark"] .social-card-text {
color: var(--color-slate-400);
}
.social-card-link {
display: inline-flex;
align-items: center;
gap: 0.375rem;
margin-top: 1rem;
font-size: 0.9375rem;
font-weight: 700;
}
.social-card-link:hover {
color: var(--social-color);
}
.social-card-link .icon {
width: 0.875rem;
height: 0.875rem;
}
.social-card-badge {
position: absolute;
right: 1.5rem;
bottom: 1.75rem;
display: grid;
place-items: center;
width: 3rem;
height: 3rem;
border-radius: 0.875rem;
color: var(--color-white);
background-color: var(--social-color);
box-shadow: var(--shadow-lg);
}
.social-card-instagram .social-card-badge {
background: linear-gradient(45deg, #f9ce34, #ee2a7b 50%, #6228d7);
} .booking-wrap {
padding-block: 6rem;
}
.booking {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 35rem);
align-items: center;
gap: 4rem;
}
.booking-title {
font-size: 3.25rem;
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.025em;
}
.booking-text {
max-width: 32rem;
margin-top: 1.5rem;
font-size: 1.0625rem;
line-height: 1.75;
color: var(--color-dark-text);
}
.booking-actions {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-top: 2rem;
}
.booking-card {
padding: 2rem;
border-radius: var(--radius);
color: var(--color-foreground);
background-color: var(--color-card);
box-shadow: var(--shadow-2xl);
}
.booking-card-title {
margin-bottom: 1.5rem;
font-size: 1.375rem;
font-weight: 600;
}
.booking-form {
gap: 1.25rem;
}
.booking-form .form-row {
gap: 1rem;
}
.booking-form .form-control {
height: 3rem;
border-radius: var(--radius-sm);
}
.booking-form textarea.form-control {
min-height: 7rem;
padding: 0.875rem 1rem;
}
.booking-form input[type="date"].form-control,
.booking-form input[type="time"].form-control {
padding-inline: 1rem;
} .booking-form input[type="file"].form-control {
height: auto;
padding: 0.875rem 1rem;
border-style: dashed;
border-width: 1.5px;
font-size: 0.875rem;
cursor: pointer;
}
.booking-form input[type="file"]::file-selector-button {
margin-right: 1rem;
padding: 0.5rem 1rem;
border: 0;
border-radius: var(--radius-full);
font: inherit;
font-weight: 600;
color: var(--color-primary);
background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
cursor: pointer;
}
.form-hint {
margin: 0.375rem 0 0 0.25rem;
font-size: 0.75rem;
color: var(--color-slate-500);
}
.booking-form .contact-form-btn {
height: 3.5rem;
margin-top: 0.5rem;
} .event-hero-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 19rem;
align-items: center;
gap: 4rem;
}
.event-hero-single {
grid-template-columns: minmax(0, 1fr);
}
.event-hero .page-banner-content {
max-width: 46rem;
}
.event-hero-title {
font-size: 3.25rem;
}
.event-hero-facts {
display: flex;
flex-wrap: wrap;
gap: 0.625rem;
margin-top: 1.75rem;
}
.event-hero-facts li {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
border: 1px solid rgb(255 255 255 / 0.2);
border-radius: var(--radius-full);
font-size: 0.9375rem;
font-weight: 600;
background-color: rgb(255 255 255 / 0.05);
}
.event-hero-facts .icon {
width: 1rem;
height: 1rem;
color: var(--color-blue-300);
}
.event-countdown {
margin-top: 1.75rem;
}
.event-countdown-label {
margin-bottom: 0.75rem;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--color-blue-300);
}
.event-countdown-boxes {
display: flex;
flex-wrap: wrap;
gap: 0.625rem;
}
.event-countdown-box {
display: flex;
flex-direction: column;
align-items: center;
min-width: 4.75rem;
padding: 0.75rem 0.5rem 0.625rem;
border: 1px solid rgb(255 255 255 / 0.15);
border-radius: var(--radius-sm);
background-color: rgb(255 255 255 / 0.06);
}
.event-countdown-box strong {
font-size: 1.875rem;
font-weight: 700;
line-height: 1.1;
font-variant-numeric: tabular-nums;
}
.event-countdown-seconds strong {
color: var(--color-blue-400);
}
.event-countdown-box span {
margin-top: 0.25rem;
font-size: 0.625rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-slate-300);
}
.page-banner-actions {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-top: 2rem;
}
.page-banner-actions:empty {
display: none;
} .event-pass {
position: relative;
padding-top: 4.5rem;
animation: event-pass-swing 6s ease-in-out infinite;
transform-origin: top center;
}
.event-pass-lanyard {
position: absolute;
top: 0;
left: 50%;
width: 1.125rem;
height: 5.25rem;
border-radius: 0.25rem 0.25rem 0.5rem 0.5rem;
background: linear-gradient(to bottom, var(--color-blue-400), var(--color-blue-700));
transform: translateX(-50%);
}
.event-pass-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
padding: 1.75rem 1.5rem 1.5rem;
border: 0.5rem solid rgb(255 255 255 / 0.12);
border-radius: var(--radius);
text-align: center;
color: var(--color-navy);
background-color: var(--color-white);
background-clip: padding-box;
box-shadow: var(--shadow-2xl);
}
.event-pass-label {
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-blue-600);
}
.event-pass-logo img {
width: 100%;
max-height: 11rem;
object-fit: contain;
}
.event-pass-foot {
display: flex;
flex-direction: column;
gap: 0.25rem;
width: 100%;
padding-top: 1rem;
border-top: 1px dashed var(--color-slate-300);
}
.event-pass-foot strong {
font-size: 1.25rem;
font-weight: 700;
}
.event-pass-foot span {
font-size: 0.875rem;
font-weight: 500;
color: var(--color-slate-500);
}
@keyframes event-pass-swing {
0%,
100% {
rotate: -1.5deg;
}
50% {
rotate: 1.5deg;
}
} .events-wrap {
padding-block: 6rem;
}
.events-head {
margin-bottom: 2.5rem;
}
.events-empty {
padding: 1.5rem;
border: 1px dashed var(--color-border);
text-align: center;
color: var(--color-muted-foreground);
}
.events-head .section-head-text {
margin-top: 0.5rem;
}
.events {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.event-card {
--event-color: var(--color-blue-600);
display: grid;
grid-template-columns: 18rem minmax(0, 1fr) auto;
align-items: center;
overflow: hidden;
border: 1px solid var(--color-border);
border-left: 4px solid var(--event-color);
border-radius: var(--radius);
background-color: var(--color-card);
box-shadow: var(--shadow-surface);
transition: box-shadow var(--transition), transform var(--transition);
}
.event-card:hover {
box-shadow: var(--shadow-xl);
transform: translateY(-0.125rem);
}
.event-card-green {
--event-color: #2e7d32;
}
.event-card-red {
--event-color: var(--color-red-600);
}
.event-card-amber {
--event-color: #c9961a;
}
.event-card-logo {
display: grid;
place-items: center;
align-self: stretch;
min-height: 11rem;
padding: 1.25rem;
border-right: 1px dashed var(--color-border);
background-color: var(--color-white);
}
.event-card-logo img {
width: auto;
max-width: 100%;
max-height: 9rem;
object-fit: contain;
}
.event-card-logo-text {
font-size: 1.25rem;
font-weight: 800;
line-height: 1.3;
text-align: center;
color: var(--event-color);
}
.event-card-body {
padding: 1.5rem 1.75rem;
}
.event-card-tags {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 0.75rem;
}
.event-card-badge,
.event-card-count {
padding: 0.25rem 0.75rem;
border-radius: var(--radius-full);
font-size: 0.75rem;
font-weight: 700;
}
.event-card-badge {
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-emerald-600);
background-color: var(--color-emerald-50);
}
.event-card-count {
color: var(--color-white);
background-color: var(--event-color);
}
.event-card-title {
font-size: 1.25rem;
font-weight: 700;
}
.event-meta {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1.5rem;
margin-top: 0.75rem;
font-size: 0.9375rem;
color: var(--color-slate-600);
}
.event-meta li {
display: inline-flex;
align-items: flex-start;
gap: 0.5rem;
}
.event-meta .icon {
width: 1rem;
height: 1rem;
margin-top: 0.1875rem;
color: var(--color-primary);
}
.event-meta-stacked {
flex-direction: column;
}
[data-theme="dark"] .event-meta,
[data-theme="dark"] .event-card-text,
[data-theme="dark"] .past-event-text,
[data-theme="dark"] .past-event-points {
color: var(--color-slate-400);
}
.event-card-text {
display: -webkit-box;
margin-top: 0.75rem;
overflow: hidden;
line-height: 1.65;
color: var(--color-slate-600);
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
.event-card-actions {
display: flex;
flex-direction: column;
gap: 0.625rem;
padding: 1.5rem 1.75rem 1.5rem 0;
}
.event-card-actions:empty {
display: none;
} .past-events-wrap {
padding-block: 6rem;
border-top: 1px solid var(--color-border);
background-color: var(--color-slate-50);
}
[data-theme="dark"] .past-events-wrap {
background-color: var(--color-card);
}
.past-events-head {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
margin-bottom: 2.5rem;
}
.past-events-counts {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.past-events-counts a {
display: inline-flex;
align-items: baseline;
gap: 0.5rem;
padding: 0.75rem 1.125rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
font-size: 0.9375rem;
color: inherit;
background-color: var(--color-background);
transition: border-color 0.2s ease, color 0.2s ease;
}
.past-events-counts a:hover {
border-color: var(--color-primary);
color: var(--color-primary);
}
.past-events-counts strong {
font-size: 1.5rem;
font-weight: 800;
line-height: 1;
color: var(--color-primary);
}
.past-events-year {
scroll-margin-top: calc(var(--header-offset) + 1rem);
}
.past-events-year + .past-events-year {
margin-top: 3.5rem;
}
.past-events-year-title {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1.5rem;
font-size: 1.75rem;
font-weight: 800;
line-height: 1;
color: var(--color-primary);
}
.past-events-year-title::after {
content: "";
flex: 1;
height: 1px;
background-color: var(--color-border);
}
.past-events {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.past-event {
overflow: hidden;
border: 1px solid var(--color-border);
border-radius: var(--radius);
background-color: var(--color-background);
scroll-margin-top: calc(var(--header-offset) + 1rem);
}
.past-event-main {
display: grid;
grid-template-columns: 21rem minmax(0, 1fr);
}
.past-event-no-cover {
grid-template-columns: minmax(0, 1fr);
}
.past-event-cover img {
width: 100%;
height: 100%;
min-height: 16rem;
object-fit: cover;
}
.past-event-info {
padding: 2rem 1.75rem;
}
.past-event-title {
font-size: 1.5rem;
font-weight: 700;
}
.past-event-text {
margin-top: 1rem;
line-height: 1.7;
color: var(--color-slate-600);
}
.past-event-points {
display: flex;
flex-direction: column;
gap: 0.375rem;
margin-top: 1rem;
padding-left: 1.125rem;
list-style: disc;
line-height: 1.6;
color: var(--color-slate-600);
}
.past-event-links {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1.5rem;
margin-top: 1.25rem;
}
.past-event-link {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.9375rem;
font-weight: 700;
transition: color var(--transition);
}
.past-event-link:hover {
color: var(--color-primary);
}
.past-event-link .icon {
width: 0.875rem;
height: 0.875rem;
}
.past-event-album {
padding: 1.25rem 1.75rem 1.75rem;
border-top: 1px solid var(--color-border);
background-color: var(--color-slate-50);
}
[data-theme="dark"] .past-event-album {
background-color: var(--color-muted);
}
.past-event-album-head {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 1rem;
font-size: 0.9375rem;
font-weight: 700;
}
.past-event-album-head .icon {
width: 1.125rem;
height: 1.125rem;
color: var(--color-primary);
}
.past-event-photos {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
gap: 0.75rem;
}
.past-event-photos .gallery-item {
margin: 0;
}
.past-event-photos .gallery-thumb img {
aspect-ratio: 1;
object-fit: cover;
} .meeting-wrap {
padding-block: 6.5rem;
border-top: 1px solid var(--color-border);
background: linear-gradient(to bottom, var(--color-slate-50), var(--color-background));
}
[data-theme="dark"] .meeting-wrap {
background: var(--color-background);
}
.meeting {
display: grid;
grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
align-items: start;
gap: 4rem;
}
.meeting .section-head {
margin-bottom: 0;
}
.meeting-contact {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
margin-top: 2rem;
}
.meeting-contact-link {
display: inline-flex;
align-items: center;
gap: 0.625rem;
font-size: 1.0625rem;
font-weight: 700;
color: var(--color-primary);
}
.meeting-contact-link:hover {
text-decoration: underline;
}
.meeting-contact-link .icon {
width: 1.125rem;
height: 1.125rem;
}
.meeting-contact-note {
margin: -0.25rem 0 0.5rem 1.75rem;
font-size: 0.875rem;
color: var(--color-slate-500);
}
.meeting-card {
padding: 2rem;
border: 1px solid var(--color-border);
border-radius: var(--radius);
background-color: var(--color-card);
box-shadow: var(--shadow-xl);
} [data-aos="fade-up"] {
transform: translate3d(0, 1.5rem, 0);
}
[data-aos="fade-left"] {
transform: translate3d(1.25rem, 0, 0);
}
[data-aos="fade-right"] {
transform: translate3d(-1.25rem, 0, 0);
}
[data-aos="zoom-in"] {
transform: scale(0.95);
} [data-aos][data-aos].aos-animate {
transform: none;
} @keyframes ping {
75%,
100% {
opacity: 0;
transform: scale(2);
}
}
@keyframes pulse {
50% {
opacity: 0.5;
}
}
@keyframes marquee {
to {
transform: translateX(-50%);
}
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
@keyframes license-pop {
from {
opacity: 0;
scale: 0;
}
}
@keyframes license-float {
50% {
translate: 0 -6px;
}
}
@keyframes solution-in {
from {
opacity: 0;
scale: 0.95;
}
}
@keyframes modal-in {
from {
opacity: 0;
transform: translateY(0.75rem) scale(0.97);
}
}
.green-color > a{
color: #004e3b !important;
}
.wpcf7-form.submitting .wpcf7-submit {
pointer-events: none;
}
  @media (min-width: 1025px) {
.menu-item-has-children:hover > .menu-arrow {
color: var(--color-primary);
}
.menu-item-has-children:hover > .menu-arrow .icon {
transform: rotate(180deg);
}
.menu-item-has-children:hover > .sub-menu {
opacity: 1;
visibility: visible;
transform: translate(-50%, 0);
}
}
@media (max-width: 1200px) { .event-card {
grid-template-columns: 14rem minmax(0, 1fr);
}
.event-card-actions {
grid-column: 2;
flex-direction: row;
flex-wrap: wrap;
padding: 0 1.75rem 1.5rem;
}
.page-banner-title {
font-size: 3.25rem;
}
.section-head-title,
.booking-title {
font-size: 2.5rem;
}
.leaders {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.team-intro {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.team-intro-btn {
grid-column: 1 / -1;
justify-self: start;
}
.logo-grid-card {
flex-basis: calc((100% - 4.5rem) / 4);
}
.h1 {
font-size: 3rem;
}
.h2 {
font-size: 2.5rem;
line-height: 1.1;
}
.h2.clients-title,
.h2.cta-title {
font-size: 2rem;
}
.services-card .h3 {
font-size: 1.625rem;
line-height: 2rem;
}
.services-wrap-secondary .services-list {
gap: 1.5rem;
}
.services-wrap-secondary .services-card {
padding: 1rem;
}
.footer-top {
column-gap: 1rem;
} .statement-title {
font-size: 2rem;
}
}
@media (max-width: 1024px) { .event-hero-grid,
.meeting {
grid-template-columns: minmax(0, 1fr);
gap: 3rem;
}
.event-pass {
width: 100%;
max-width: 19rem;
}
.past-event-main {
grid-template-columns: 16rem minmax(0, 1fr);
}
.events-wrap,
.past-events-wrap,
.meeting-wrap {
padding-block: 4.5rem;
}
.story,
.booking,
.team-card {
grid-template-columns: minmax(0, 1fr);
gap: 2.5rem;
}
.story-wrap,
.pillars-wrap,
.leaders-wrap,
.team-wrap,
.reasons-wrap,
.gallery-wrap,
.social-wrap {
padding-block: 5rem;
}
.stats-wrap,
.logo-grid-wrap,
.booking-wrap {
padding-block: 4.5rem;
}
.gallery-grid {
columns: 2;
}
.logo-grid-card {
flex-basis: calc((100% - 3rem) / 3);
} .header-right {
gap: 1rem;
padding-top: 0;
}
.header-menu {
position: absolute;
top: 100%;
right: 1rem;
left: 1rem;
z-index: 50;
flex-direction: column;
gap: 1rem;
max-height: 85vh;
margin-top: 0.5rem;
padding: 1rem 1.25rem;
overflow-y: auto;
overscroll-behavior: contain;
border: 1px solid var(--color-border);
border-radius: 1rem;
background-color: var(--color-background);
box-shadow: var(--shadow-2xl);
opacity: 0;
visibility: hidden;
transform: translateY(-0.5rem) scale(0.98);
transition: opacity 0.25s ease, transform 0.25s var(--ease-out), visibility 0.25s;
}
.menu-open .header-menu {
opacity: 1;
visibility: visible;
transform: none;
}
.header-menu > ul {
flex-direction: column;
align-items: stretch;
gap: 1rem;
}
.header-menu > ul > li > a,
.menu-arrow {
width: 100%;
gap: normal;
padding-block: 0;
font-size: 1.5rem;
font-weight: 900;
line-height: 2rem;
letter-spacing: normal;
text-transform: none;
color: var(--color-foreground);
transition: none;
}
.header-menu > ul > li > a:hover,
.menu-arrow:hover,
.menu-item-has-children.is-open > .menu-arrow {
color: var(--color-foreground);
}
.header-menu > ul > li > a .menu-link-icon {
display: flex;
}
.menu-link-icon {
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
background-color: var(--color-muted);
}
.menu-link-icon .icon {
width: 1.25rem;
height: 1.25rem;
}
.header-menu > ul > li > a:hover .menu-link-icon {
color: var(--color-white);
background-color: var(--color-primary);
}
.menu-item-has-children {
position: static;
padding-block: 0;
}
.sub-menu {
position: static;
display: none;
width: auto;
margin-top: 1rem;
overflow: hidden;
box-shadow: none;
opacity: 1;
visibility: inherit;
transform: none;
transition: none;
}
.sub-menu::before {
content: none;
}
.menu-item-has-children.is-open > .sub-menu {
display: block;
transform: none;
}
.sub-menu-columns {
flex-direction: column;
}
.sub-menu-group + .sub-menu-group {
border-top: 1px solid var(--color-border);
border-left: 0;
border-top-right-radius: 0;
}
.sub-menu-list a,
.sub-menu-feature span {
white-space: normal;
}
.header-menu-btn {
display: inline-flex;
}
.header-divider-desktop,
.header-btn {
display: none;
}
.header-divider-mobile,
.menu-icon {
display: block;
}
.h2.clients-title {
font-size: 1.875rem;
} .services-list {
gap: 1.5rem;
}
.services-card {
padding: 1rem;
} .why-partner {
grid-template-columns: none;
}
.statistics-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.footer-top {
grid-template-columns: repeat(2, minmax(0, 1fr));
} .process-card {
height: 440px;
padding: 1.5rem;
}
.values-card-img {
height: 220px;
} .cdsco-hero-title,
.contact-hero-title {
font-size: 3.5rem;
}
.cdsco-highlights-list {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.cdsco-highlights-item + .cdsco-highlights-item {
border-left: 0;
}
.solutions-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
} .service-hero {
width: min(72rem, 100% - 4rem);
}
.service-hero-grid {
grid-template-columns: minmax(0, 1fr);
gap: 2rem;
}
.service-hero-content,
.service-hero-aside {
grid-column: auto;
}
.service-standards {
width: calc(100% - 6rem);
}
.service-info {
grid-template-columns: minmax(0, 1fr);
}
.service-steps-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.service-steps-grid .service-step::before {
display: none;
}
.service-info-wrap,
.service-related-wrap {
padding-inline: 3rem;
}
.service-cta-wrap {
padding-inline: 3rem;
}
}
@media (max-width: 991px) { .hero {
grid-template-columns: none;
gap: 4rem;
}
.hero-globe {
height: auto;
}
.globe-container {
margin-inline: auto;
} .services-list,
.services-wrap-secondary .services-list {
grid-template-columns: none;
gap: 2rem;
}
.services-card,
.services-wrap-secondary .services-card {
padding: 2.5rem;
}
.footer-bottom {
flex-direction: column;
text-align: center;
} .about-hero {
grid-template-columns: none;
gap: 4rem;
}
.about-hero-content,
.about-hero-process {
grid-row: auto;
grid-column: auto;
}
.statement {
grid-template-columns: none;
}
.statement-wrap-vision .statement-card {
grid-column: auto;
}
.values-list {
grid-template-columns: none;
} .journey-list-item {
justify-content: space-between;
} .cdsco-hero {
flex-direction: column;
gap: 4rem;
}
.cdsco-hero-content {
width: 100%;
padding-right: 0;
}
.cdsco-hero-visual {
width: 100%;
min-height: 500px;
transform: none;
}
.license-orbit {
--orbit-size: 340px;
--orbit-radius: 180px;
--orbit-ring: 240px;
--orbit-halo-outer: 210px;
--orbit-halo-inner: 180px;
--orbit-core: 150px;
--orbit-connector: 45px;
--orbit-connector-offset: 15px;
--orbit-dot: 0.5rem;
margin-block: 3rem;
}
.license-orbit-core img {
width: 3rem;
height: 3rem;
margin-bottom: 0.25rem;
}
.license-orbit-core-title {
font-size: 1.25rem;
}
.license-orbit-core-text {
margin-top: 0.25rem;
font-size: 0.5rem;
}
.license-badge {
width: 100px;
padding: 0.75rem;
}
.license-badge-icon {
width: 2.5rem;
height: 2.5rem;
margin-bottom: 0.5rem;
}
.license-badge-icon .icon {
width: 1.25rem;
height: 1.25rem;
}
.license-badge-code {
font-size: 0.75rem;
}
.license-badge-label {
font-size: 0.5625rem;
} .contact {
grid-template-columns: none;
}
.contact-info-list,
.contact-form-card {
grid-column: auto;
} .blog-featured {
grid-template-columns: none;
min-height: 0;
}
.blog-featured-img {
height: 24rem;
} .blog-featured-img::after {
content: "";
position: absolute;
inset: 0;
background-image: linear-gradient(to top, rgb(15 23 42 / 0.8), rgb(15 23 42 / 0.2), transparent);
}
.blog-featured-body {
padding: 3rem;
}
.blog-featured-title {
font-size: 2.25rem;
}
.blog-list {
columns: 2;
}
.blog-post-title {
font-size: 3rem;
} .blog-post-layout {
grid-template-columns: minmax(0, 1fr);
}
.blog-post-main,
.blog-aside {
grid-column: auto;
}
.blog-aside {
position: static;
} .license-orbit-markets {
--orbit-radius: 140px;
--orbit-ring: 280px;
--orbit-core: 150px;
--orbit-badge: 110px;
}
.license-orbit-markets .license-orbit-core img {
width: 4rem;
height: 4rem;
}
.license-orbit-markets .license-orbit-core-title {
font-size: 1.125rem;
}
.license-orbit-markets .license-orbit-core-text {
font-size: 0.625rem;
}
.license-badge.license-badge-market {
padding: 0.75rem;
}
.license-badge-market img {
width: 2.5rem;
height: 2.5rem;
margin-bottom: 0.25rem;
}
.license-badge-market .license-badge-code {
font-size: 0.625rem;
}
.license-badge-market .license-badge-label {
font-size: 0.5rem;
}
}
@media (max-width: 767px) { .event-hero-title {
font-size: 2.25rem;
}
.event-card,
.past-event-main {
grid-template-columns: minmax(0, 1fr);
}
.event-card-logo {
min-height: 9rem;
border-right: 0;
border-bottom: 1px dashed var(--color-border);
}
.event-card-body {
padding: 1.25rem;
}
.event-card-actions {
grid-column: auto;
padding: 0 1.25rem 1.25rem;
}
.past-event-cover img {
max-height: 18rem;
}
.past-events-year + .past-events-year {
margin-top: 2.5rem;
}
.past-events-year-title {
margin-bottom: 1rem;
font-size: 1.5rem;
}
.past-event-info,
.past-event-album {
padding-inline: 1.25rem;
}
.meeting-card {
padding: 1.5rem;
}
.page-banner {
padding-bottom: 3.5rem;
}
.page-banner-title {
font-size: 2.5rem;
}
.page-banner-text {
font-size: 1.0625rem;
}
.section-head {
margin-bottom: 2.5rem;
}
.section-head-title,
.booking-title {
font-size: 2rem;
}
.stats-head {
flex-direction: column;
align-items: flex-start;
}
.team-intro {
grid-template-columns: minmax(0, 1fr);
gap: 1.25rem;
}
.team-photo img {
aspect-ratio: 4 / 3;
}
.story-fact {
grid-template-columns: minmax(0, 1fr);
gap: 0.375rem;
}
.gallery-lightbox {
padding: 4.5rem 1rem;
}
.gallery-lightbox-prev,
.gallery-lightbox-next {
top: auto;
bottom: 1.25rem;
transform: none;
}
.logo-grid-card {
flex-basis: calc((100% - 1.5rem) / 2);
min-width: 0;
}
.booking-card {
padding: 1.5rem;
}
.section-padding {
padding-block: 5rem;
}
.h1 {
font-size: 2.25rem;
}
.h2 {
font-size: 2.25rem;
line-height: 1.11;
}
.hero-title-break {
display: none;
}
.h2.clients-title {
font-size: 1.5rem;
line-height: 1.25;
}
.clients-marquee::before,
.clients-marquee::after {
width: 4rem;
}
.why-partner-wrap {
padding-block: 4rem;
}
.statistics-list-number {
font-size: 1.875rem;
line-height: 2.25rem;
}
.h2.cta-title {
font-size: 1.875rem;
}
.cta-description {
font-size: 0.875rem;
}
.footer-top {
grid-template-columns: none;
}
.footer-legal {
gap: 1rem;
}
.footer-legal li + li::before {
margin-right: 1rem;
}
.floating-actions {
right: 1.5rem;
}
.back-to-top {
left: 1rem;
width: 2.75rem;
height: 2.75rem;
}
.back-to-top .icon {
width: 1.25rem;
height: 1.25rem;
} .about-hero-wrap {
padding-top: 9rem;
}
.process-card {
height: 430px;
}
.statement-wrap {
padding-block: 6rem;
}
.statement-bg::after {
height: 8rem;
}
.statement-card {
padding: 2rem;
}
.statement-title {
font-size: 1.875rem;
}
.statement-text {
font-size: 1.125rem;
}
.values-wrap {
padding-block: 4rem;
} .journey::before {
left: 1.5rem;
}
.journey-list {
gap: 3rem;
}
.journey-list-item,
.journey-list-item:nth-child(even) {
flex-direction: row;
padding-left: 3.5rem;
}
.journey-node,
.journey-end-node {
left: 1.5rem;
}
.journey-card {
flex-basis: 100%;
}
.journey-aside {
display: none;
} .cdsco-hero-wrap {
padding-bottom: 3rem;
}
.cdsco-hero-title,
.contact-hero-title {
font-size: 2.5rem;
}
.cdsco-hero-title-break {
display: none;
}
.cdsco-hero-description,
.contact-hero-description {
font-size: 1.125rem;
}
.cdsco-highlights {
padding: 1.5rem;
}
.cdsco-highlights-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cdsco-highlights-item {
padding-inline: 0.5rem;
}
.cdsco-highlights-item:last-child {
grid-column: 1 / -1;
}
.cdsco-highlights-icon {
width: 2.5rem;
height: 2.5rem;
margin-bottom: 0.5rem;
}
.cdsco-highlights-icon .icon {
width: 1.25rem;
height: 1.25rem;
}
.cdsco-highlights-title {
font-size: 0.75rem;
line-height: 1rem;
}
.cdsco-highlights-text {
margin-top: 0.125rem;
font-size: 0.625rem;
}
.solutions-list {
grid-template-columns: none;
} .contact-info-card {
padding: 1.5rem;
}
.contact-form-card {
padding: 2rem;
}
.contact-form .form-row {
grid-template-columns: none;
} .contact-form .form-control {
font-size: 1rem;
}
.contact-map {
height: 400px;
} .blog-hero-wrap {
border-radius: 0 0 3rem 3rem;
}
.blog-hero-title {
font-size: 3rem;
}
.blog-hero-description {
font-size: 1.125rem;
}
.blog-list {
columns: 1;
}
.blog-post-title {
font-size: 2.25rem;
}
.blog-post-image {
height: 400px;
}
.blog-related-list {
grid-template-columns: none;
} .default-page h1 {
font-size: 2.25rem;
line-height: 2.5rem;
}
.default-page-cards {
grid-template-columns: minmax(0, 1fr);
} .service-hero-wrap {
padding-top: 6rem;
}
.service-hero {
width: calc(100% - 2rem);
}
.service-title {
font-size: 1.875rem;
}
.service-intro {
font-size: 1rem;
}
.service-benefits-img {
height: 12rem;
}
.service-benefits-body {
padding: 2rem 1.5rem 1.5rem;
}
.service-standards {
flex-direction: column;
gap: 2rem;
width: calc(100% - 3rem);
}
.service-standards-list {
justify-content: center;
gap: 2rem;
}
.service-standard img {
height: 2rem;
}
.service-standard-lg img {
height: 2.5rem;
}
.service-steps-wrap {
padding: 2rem 0 4rem;
}
.service-steps {
padding-inline: 1rem;
}
.service-steps-arrow {
display: none;
}
.service-step {
width: 17.5rem;
}
.service-steps-grid {
grid-template-columns: minmax(0, 1fr);
}
.service-info-wrap,
.service-related-wrap {
padding: 5rem 1.5rem;
}
.service-related-head .service-related-btn {
display: none;
}
.service-related-btn-mobile {
display: flex;
width: 100%;
margin-top: 2rem;
}
.service-cta-wrap {
padding-inline: 1.5rem;
}
.service-cta {
padding: 3rem;
}
.service-cta-title {
font-size: 1.875rem;
line-height: 2.25rem;
}
.service-cta-btn {
height: auto;
min-height: 4rem;
padding-inline: 0;
font-size: 1.125rem;
white-space: normal;
} .status-page {
min-height: auto;
padding: 8rem 0 4rem;
}
.status-code {
font-size: 7rem;
}
.status-title {
font-size: 2.5rem;
}
.status-text {
font-size: 1rem;
}
}
@media (max-width: 580px) { .leaders,
.team-tiers,
.team-skills-list {
grid-template-columns: minmax(0, 1fr);
}
.team-card {
padding: 1.25rem;
}
.team-skills {
padding: 1.5rem;
}
.team-photo-caption {
position: static;
border-radius: 0;
}
.gallery-grid {
column-gap: 0.75rem;
}
.gallery-item {
margin-bottom: 0.75rem;
}
.story-text,
.team-intro {
text-align: left;
}
.header-wrap {
padding-inline: 0.75rem;
}
.header-inner {
padding-inline: 1rem;
}
.header .logo a {
gap: 0.5rem;
}
.header .logo img {
width: 2.5rem;
height: 2.25rem;
}
.header .logo-title {
font-size: 1.125rem;
}
.header-divider-mobile {
margin-inline: 0.5rem;
}
.menu-btn {
padding: 0.5rem;
}
.hero-certifications-list {
flex-wrap: nowrap;
padding-bottom: 1rem;
overflow-x: auto;
}
.clients-wrap .title-description {
font-size: 0.875rem;
}
.services-card,
.services-wrap-secondary .services-card {
min-height: 440px;
padding: 2rem;
}
.services-card .h3 {
font-size: 1.5rem;
line-height: 1.33;
}
.services-card-text {
font-size: 0.875rem;
}
.services-wrap-secondary {
padding-block: 3rem;
}
.why-partner-wrap {
padding-block: 3rem;
}
.statistics-list-number {
font-size: 1.5rem;
line-height: 2rem;
}
.cta-wrap {
min-height: 580px;
padding-block: 4rem;
}
.cta-box {
gap: 1.25rem;
padding: 2rem 1.25rem;
}
.cta-badge,
.cta-features li {
font-size: 0.625rem;
}
.cta-features li {
padding: 0.25rem 0.625rem;
}
.h2.cta-title {
font-size: 1.5rem;
}
.cta-description {
font-size: 0.75rem;
}
.cta-btns {
flex-direction: column;
}
.btn-lg {
width: 100%;
padding-inline: 1.5rem;
font-size: 0.875rem;
}
.footer-legal li + li::before {
display: none;
} .process-card {
height: 480px;
padding: 1.25rem;
}
.process-step-title {
font-size: 0.875rem;
}
.process-step-text,
.process-step-points li {
font-size: 0.6875rem;
}
.process-step-points {
padding: 0.75rem;
}
.values-wrap {
padding-block: 3rem;
}
.values-card-img {
height: 200px;
}
.values-card-title,
.journey-card-title {
font-size: 1.25rem;
line-height: 1.75rem;
}
.values-card-text,
.journey-card-text,
.journey-end-text {
font-size: 0.75rem;
}
.journey-wrap {
padding-block: 4rem;
}
.journey-wrap .title-wrap {
margin-bottom: 4rem;
}
.journey-node {
width: 2.75rem;
height: 2.75rem;
}
.journey-card {
padding: 1.75rem;
}
.journey-end {
margin-top: 4rem;
}
.journey-end-card {
padding: 2rem;
}
.journey-end-card .title-badge {
font-size: 0.625rem;
}
.journey-end-title {
font-size: 1.5rem;
line-height: 2rem;
}
.journey-end-break {
display: none;
} .cdsco-hero-visual {
min-height: 400px;
}
.license-orbit {
--orbit-size: 280px;
--orbit-radius: 130px;
--orbit-ring: 200px;
--orbit-halo-outer: 160px;
--orbit-halo-inner: 130px;
--orbit-core: 100px;
--orbit-connector: 35px;
--orbit-connector-offset: 12px;
--orbit-dot: 0.375rem;
margin-block: 1.5rem;
scale: 0.9;
}
.license-orbit-core img {
width: 2rem;
height: 2rem;
}
.license-orbit-core-title {
font-size: 1.125rem;
}
.license-orbit-core-text {
display: none;
}
.solution-card-img {
height: 13rem;
}
.solution-card-content {
padding: 1.75rem;
}
.solution-card-title {
font-size: 1.25rem;
line-height: 1.75rem;
} .contact-info-card {
flex-direction: column;
align-items: stretch;
} .blog-featured-img {
height: 18rem;
}
.blog-featured-body {
padding: 2rem;
}
.blog-featured-title {
font-size: 1.875rem;
}
.blog-featured-text {
font-size: 1rem;
}
.blog-featured-arrow {
display: none;
}
.blog-card-content {
padding: 1.75rem;
}
.blog-card-title {
font-size: 1.25rem;
}
.blog-newsletter {
padding: 2rem;
}
.blog-post-title {
font-size: 1.875rem;
}
.blog-post-meta {
flex-direction: column;
gap: 1rem;
}
.blog-post-image {
height: 250px;
}
.blog-related-title {
font-size: 1.5rem;
line-height: 2rem;
}
.blog-related-card {
grid-template-columns: none;
}
.blog-related-img,
.blog-related-content {
grid-column: auto;
}
.blog-related-img {
height: 10rem;
} .license-orbit-markets {
--orbit-radius: 120px;
--orbit-ring: 240px;
--orbit-core: 120px;
}
.license-orbit-markets .license-orbit-core img {
width: 3rem;
height: 3rem;
}
.license-orbit-markets .license-orbit-core-title {
font-size: 1rem;
}
.service-cta {
padding: 3rem 1.5rem;
}
}
@media (max-width: 479px) { .event-countdown-box {
min-width: 0;
flex: 1;
}
.event-countdown-box strong {
font-size: 1.5rem;
}
.page-banner-actions,
.event-card-actions {
flex-direction: column;
align-items: stretch;
}
.page-banner-title {
font-size: 2.125rem;
}
.story-actions,
.booking-actions {
flex-direction: column;
align-items: stretch;
}
.gallery-grid {
columns: 1;
}
.logo-grid-card {
flex-basis: 100%;
}
.logo-tagline {
display: none;
}
.hero-btns {
flex-direction: column;
flex-wrap: nowrap;
align-items: stretch;
width: 100%;
} .contact-hero-title {
font-size: 2.25rem;
}
.status-code {
font-size: 5.5rem;
}
.status-title {
font-size: 2rem;
}
.status-actions {
flex-direction: column;
align-items: stretch;
width: 100%;
}
}
@media (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.clients-marquee-track {
width: auto;
}
.clients-list {
flex-shrink: 1;
flex-wrap: wrap;
justify-content: center;
padding: 0 15px;
} .license-orbit-item,
.solutions-list-item.is-entering,
.blog-list-item.is-entering,
.gallery-item.is-entering,
.event-pass {
animation: none;
}
}.admin-bar .header-wrap {
top: var(--wp-admin--admin-bar--height, 32px);
}
@media (max-width: 600px) {
.admin-bar .header-wrap {
top: 0;
}
}  .default-page .wp-block-group__inner-container > :last-child,
.default-page section > :last-child {
margin-bottom: 0;
}
.default-page .wp-block-heading {
margin-top: 0;
} .blog-post-content blockquote > p {
margin-bottom: 0;
line-height: inherit;
}
.blog-post-content blockquote > p + p {
margin-top: 1rem;
}
.blog-post-content .wp-block-image {
margin-bottom: 1.5rem;
} .default-page .blog-list {
margin-top: 2rem;
}
.hla-pagination {
margin-top: 3rem;
text-align: center;
}
.hla-pagination .page-numbers {
display: inline-block;
padding: 0.5rem 0.875rem;
border-radius: var(--radius-sm);
font-weight: 600;
}
.hla-pagination .page-numbers.current {
color: var(--color-primary-foreground);
background-color: var(--color-primary);
}
.hla-notice {
padding: 1rem;
border: 1px dashed var(--color-border);
border-radius: var(--radius-sm);
font-size: 0.875rem;
} .wpcf7 .hidden-fields-container {
display: none;
} .wpcf7-form .form-group .wpcf7-form-control-wrap {
display: flex;
flex-direction: column;
}
.wpcf7-form .wpcf7-not-valid {
border-color: var(--color-red-600);
}
.wpcf7-form .wpcf7-not-valid-tip {
display: block;
margin: 0.375rem 0 0 0.25rem;
font-size: 0.75rem;
font-weight: 500;
color: var(--color-red-600);
} .wpcf7-form .wpcf7-spinner {
align-self: center;
margin: 0;
}
.wpcf7-form:not(.submitting) .wpcf7-spinner {
display: none;
}
.wpcf7-form.submitting .wpcf7-submit {
cursor: progress;
opacity: 0.7;
}
.wpcf7-form .wpcf7-response-output {
margin: 0;
padding: 0.75rem 1rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
font-size: 0.875rem;
line-height: 1.5;
}
.wpcf7-form.init .wpcf7-response-output,
.wpcf7-form.resetting .wpcf7-response-output,
.wpcf7-form.submitting .wpcf7-response-output {
display: none;
}
.wpcf7-form.sent .wpcf7-response-output {
border-color: var(--color-emerald-500);
color: var(--color-emerald-500);
background-color: color-mix(in srgb, var(--color-emerald-500) 8%, transparent);
}
.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.unaccepted .wpcf7-response-output,
.wpcf7-form.payment-required .wpcf7-response-output {
border-color: var(--color-amber-500);
color: var(--color-amber-500);
background-color: color-mix(in srgb, var(--color-amber-500) 8%, transparent);
}
.wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.aborted .wpcf7-response-output,
.wpcf7-form.spam .wpcf7-response-output {
border-color: var(--color-red-600);
color: var(--color-red-600);
background-color: color-mix(in srgb, var(--color-red-600) 8%, transparent);
} .tnp-ajax .tnp-privacy-field {
font-size: 0.75rem;
line-height: 1.5;
}
.tnp-ajax .tnp-privacy-field label {
display: flex;
align-items: flex-start;
gap: 0.5rem;
}
.tnp-ajax .tnp-privacy-field a {
text-decoration: underline;
}
.blog-newsletter-form.tnp-ajax {
font-size: 0.875rem;
line-height: 1.625;
}div.tnp-subscription,
form.tnp-subscription, form.tnp-profile {
display: block;
margin: 1em auto;
max-width: 500px;
width: 100%;
}
div.tnp-profile {
display: block;
margin: 1em 0;
max-width: 500px; } .tnp-subscription div.tnp-field,
.tnp-profile div.tnp-field
{
margin-bottom: .7em;
border: 0;
padding: 0;
}
.tnp-subscription label,
.tnp-profile label
{
display: block;
color: inherit;
font-weight: normal;
line-height: normal;
padding: 0;
margin: 0;
margin-bottom: .25em;
font-size: .9em;
}
.tnp-subscription .tnp-field-checkbox label,
.tnp-profile .tnp-field-checkbox label
{
display: inline-block;
}
.tnp-subscription input[type=text],
.tnp-subscription input[type=email],
.tnp-subscription input[type=submit],
.tnp-subscription select,
.tnp-subscription textarea,
.tnp-profile input[type=text],
.tnp-profile input[type=email],
.tnp-profile input[type=submit],
.tnp-profile select,
.tnp-profile textarea
{
width: 100%;
padding: .7em;
display: block;
border: 1px;
color: #444;
border-color: #ddd;
background-color: #f4f4f4;
background-image: none;
text-shadow: none;
font-size: 1em;
margin: 0;
line-height: normal;
box-sizing: border-box;
}
.tnp-subscription input[type=checkbox],
.tnp-widget input[type=radio],
.tnp-profile input[type=checkbox]
{ max-width: 1em;
display: inline-block;
margin-right: .5em;
} .tnp-subscription select option,
.tnp-profile select option
{
margin-right: .75em;
}
.tnp-subscription input.tnp-submit,
.tnp-profile input.tnp-submit,
.tnp-unsubscribe button.tnp-submit,
.tnp-reactivate button.tnp-submit
{
background-color: #444;
color: #fff;
width: auto;
height: auto;
margin: 0;
display: inline-block;
}
@media all and (max-width: 480px) {
.tnp-subscription input[type=submit],
.tnp-profile input[type=submit] {
width: 100%;
}
}
.tnp-widget {
width: 100%;
display: block;
box-sizing: border-box;
}
.tnp-widget .tnp-field {
margin-bottom: 10px;
border: 0;
padding: 0;
}
.tnp-widget label {
display: block;
color: inherit;
font-size: 14px;
}
.tnp-widget input[type=text], .tnp-widget input[type=email], .tnp-widget input[type=submit], .tnp-widget select {
width: 100%;
padding: 10px;
display: block;
border: 1px solid #ddd ;
border-color: #ddd;
background-color: #f4f4f4;
background-image: none;
text-shadow: none;
color: #444;
font-size: 14px;
line-height: normal;
box-sizing: border-box;
height: auto;
}
.tnp-widget input[type=checkbox], .tnp-widget input[type=radio] {
width: auto;
display: inline-block;
} .tnp-widget select option {
margin-right: 10px;
}
.tnp-widget input.tnp-submit {
background-color: #444;
background-image: none;
text-shadow: none;
color: #fff;
margin: 0;
}
.tnp-field input[type="submit"] {
position: inherit;
}
.tnp-field label {
} .tnp-widget-minimal {
width: 100%;
}
.tnp-widget-minimal form {
margin: 0;
padding: 0;
border: 0;
}
.tnp-widget-minimal input.tnp-email {
width: 100%;
box-sizing: border-box;
padding: 10px;
display: inline-block;
border: 1px solid #ddd;
background-color: #f4f4f4;
color: #444;
font-size: 14px;
}
.tnp-widget-minimal input.tnp-submit {
width: 100%;
box-sizing: border-box;
padding: 10px;
display: inline-block;
border: 1px;
border-color: #ddd;
background-color: #444;
background-image: none;
text-shadow: none;
color: #fff;
font-size: 14px;
line-height: normal;
border-radius: 0px;
height: auto;
margin: 0;
} .tnp-subscription-minimal {
width: 100%;
box-sizing: border-box;
margin: 10px 0;
}
.tnp-subscription-minimal form {
width: auto;
margin: 0;
padding: 0;
border: 0;
white-space: nowrap;
}
.tnp-subscription-minimal input.tnp-email,
.tnp-subscription-minimal input.tnp-name
{
width: 70%;
max-width: 300px;
box-sizing: border-box;
padding: 10px;
display: inline-block;
border: 1px solid #ddd;
background-color: #f4f4f4;
color: #444;
font-size: 14px;
line-height: 20px;
border-radius: 0px;
margin-right: 10px;
}
.tnp-subscription-minimal.with-name input.tnp-email,
.tnp-subscription-minimal.with-name input.tnp-name
{
width: 31%;
}
.tnp-subscription-minimal .tnp-privacy-field {
margin-top: 10px;
} .tnp-subscription-minimal input.tnp-submit {
width: 29%;
box-sizing: border-box;
display: inline-block;
padding: 10px;
border: 1px;
border-color: #ddd;
background-color: #444;
background-image: none;
text-shadow: none;
color: #fff;
font-size: 14px;
line-height: 20px;
border-radius: 0px;
margin: 0;
}
.tnp-subscription-posts {
margin-top: 2em;
margin-bottom: 2em;
padding: 2rem;
}
.tnp-subscription-posts .tnp-subscription {
max-width: auto;
margin: 0;
}
@media all and (max-width: 525px) {
.tnp-subscription-minimal.with-name input.tnp-email,
.tnp-subscription-minimal.with-name input.tnp-name,
.tnp-subscription-minimal input.tnp-submit
{
width: 100%;
max-width: 100%;
margin: 0;
display: block;
margin-bottom: .5rem;
}
} .tnp-button-form button.tnp-submit {
box-sizing: border-box;
padding: 10px;
display: inline-block;
border: 1px;
border-color: #ddd;
background-color: #444;
background-image: none;
text-shadow: none;
color: #fff;
font-size: 14px;
line-height: normal;
border-radius: 0px;
height: auto;
margin: 0;
} .tnp-comments {
clear: both;
margin-top: 15px;
margin-bottom: 15px;
}
.tnp-comments label {
display: block;
}
.tnp-comments input[type=checkbox] {
display: inline-block;
width: auto!important;
} .tnp-lock {
clear: both;
display: block;
box-sizing: border-box;
box-shadow: none;
margin: 20px;
padding: 15px;
background-color: #fff;
border: 1px solid #ddd;
}
.tnp-nl-checkout {
margin-bottom: 1em;
}html body .cookieadmin_law_container,
html body .cookieadmin_cookie_modal {
font-family: inherit;
color: var(--color-foreground);
} html body .cookieadmin_law_container {
top: auto;
right: 0;
bottom: 0;
left: 0;
width: 100%;
max-width: none;
padding: 0;
} html body .cookieadmin_law_container .cookieadmin_consent_inside {
display: grid;
grid-template-columns: minmax(0, 48rem) auto;
align-items: center;
justify-content: space-between;
column-gap: 1.5rem;
padding: 1.25rem max(1.5rem, (100% - var(--container-max)) / 2) calc(1.25rem + env(safe-area-inset-bottom));
border-width: 1px 0 0;
border-style: solid;
border-color: var(--color-border);
border-radius: 0;
color: var(--color-foreground);
background-color: color-mix(in srgb, var(--color-background) 95%, transparent);
box-shadow: 0 -8px 30px rgb(0 0 0 / 0.12);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
}
html body .cookieadmin_law_container .cookieadmin_notice_group {
display: contents;
}
html body .cookieadmin_law_container p#cookieadmin_notice_title {
display: flex;
grid-column: 1;
align-items: center;
gap: 0.5rem;
margin: 0 0 0.5rem;
font-size: 1rem;
font-weight: 700;
line-height: 1.5rem;
} html body .cookieadmin_law_container p#cookieadmin_notice_title::before {
content: "";
flex-shrink: 0;
width: 1.25rem;
height: 1.25rem;
background-color: var(--color-primary);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}
html body .cookieadmin_law_container .cookieadmin_notice_con {
grid-column: 1;
}
html body .cookieadmin_law_container p#cookieadmin_notice {
font-size: 0.875rem;
line-height: 1.625;
}
html body .cookieadmin_law_container .cookieadmin_consent_btns {
display: flex;
flex-wrap: nowrap;
grid-row: 1 / span 2;
grid-column: 2;
align-items: center;
justify-content: flex-end;
gap: 0.625rem;
margin: 0;
} html body .cookieadmin_law_container .cookieadmin_policy_link_box {
grid-column: 1;
justify-content: flex-start;
margin-top: 0.75rem;
font-size: 0.75rem;
}
html body .cookieadmin_law_container .cookieadmin-poweredby {
grid-column: 2;
justify-self: end;
margin-top: 0.75rem;
color: var(--color-muted-foreground);
opacity: 0.7;
} [data-theme="dark"] body .cookieadmin-poweredby :is(svg, img) {
filter: brightness(0) invert(1);
} .has-consent-banner body {
padding-bottom: var(--consent-banner-height, 0px);
} html body .cookieadmin_law_container button.cookieadmin_btn,
html body .cookieadmin_cookie_modal button.cookieadmin_btn {
flex: 0 0 auto;
width: auto;
height: 2.5rem;
min-height: 0;
padding: 0 1.25rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
font-size: 0.75rem;
font-weight: 600;
line-height: 1.25rem;
letter-spacing: 0.05em;
text-transform: uppercase;
white-space: nowrap;
color: var(--color-foreground);
background-color: var(--color-background);
filter: none;
transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}
html body .cookieadmin_law_container button.cookieadmin_btn:hover,
html body .cookieadmin_cookie_modal button.cookieadmin_btn:hover {
background-color: var(--color-muted);
filter: none;
}
html body .cookieadmin_law_container button.cookieadmin_accept_btn,
html body .cookieadmin_cookie_modal button.cookieadmin_accept_btn {
padding-inline: 1.5rem;
border-color: var(--color-primary);
color: var(--color-primary-foreground);
background-color: var(--color-primary);
}
html body .cookieadmin_law_container button.cookieadmin_accept_btn:hover,
html body .cookieadmin_cookie_modal button.cookieadmin_accept_btn:hover {
background-color: color-mix(in srgb, var(--color-primary) 90%, transparent);
}
html body .cookieadmin_law_container button.cookieadmin_btn:focus-visible,
html body .cookieadmin_cookie_modal button.cookieadmin_btn:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
} html body .cookieadmin_cookie_modal button.cookieadmin_btn {
font-weight: 700;
}  html body .cookieadmin_modal_overlay {
background: rgb(255 255 255 / 0.8);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
}
[data-theme="dark"] body .cookieadmin_modal_overlay {
background: rgb(2 8 23 / 0.8);
}
html body .cookieadmin_cookie_modal {
overflow: hidden;
border: 1px solid var(--color-modal-border);
background-color: var(--color-modal);
box-shadow: var(--shadow-2xl);
} html body .cookieadmin_cookie_modal.cookieadmin_center {
top: 50%;
left: 50%;
width: min(42rem, calc(100% - 2rem));
max-width: none;
max-height: 85vh;
border-radius: 1rem;
transform: translate(-50%, -50%);
}
html body .cookieadmin_cookie_modal .cookieadmin_mod_head {
padding: 1.5rem;
border-bottom: 1px solid var(--color-modal-border);
}
html body .cookieadmin_cookie_modal .cookieadmin_preference_title {
font-size: 1.125rem;
font-weight: 700;
line-height: 1.75rem;
}
html body .cookieadmin_cookie_modal .cookieadmin_mod_head button.cookieadmin_close_pref {
width: 2.25rem;
height: 2.25rem;
border-radius: 50%;
color: var(--color-foreground);
transition: background-color var(--transition);
}
html body .cookieadmin_cookie_modal .cookieadmin_mod_head button.cookieadmin_close_pref::before,
html body .cookieadmin_cookie_modal .cookieadmin_mod_head button.cookieadmin_close_pref::after {
width: 0.875rem;
}
html body .cookieadmin_cookie_modal .cookieadmin_mod_head button.cookieadmin_close_pref:hover {
color: var(--color-foreground);
background-color: var(--color-muted);
}
html body .cookieadmin_cookie_modal .cookieadmin_mod_head button.cookieadmin_close_pref:focus-visible {
outline-color: var(--color-primary);
}
html body .cookieadmin_cookie_modal .cookieadmin_details_wrapper {
flex: 1 1 auto;
height: auto;
min-height: 0;
padding: 1.5rem;
}
html body .cookieadmin_cookie_modal .cookieadmin_preference_details {
padding: 0;
}
html body .cookieadmin_cookie_modal .cookieadmin_preference {
margin-bottom: 1.5rem;
padding: 0;
font-size: 0.875rem;
line-height: 1.625;
}
html body .cookieadmin_cookie_modal .cookieadmin_preference a {
color: var(--color-primary);
} html body .cookieadmin_cookie_modal #cookieadmin_wrapper {
display: flex;
flex-direction: column;
gap: 1rem;
}
html body .cookieadmin_cookie_modal .cookieadmin_types {
padding: 1rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background-color: color-mix(in srgb, var(--color-muted) 20%, transparent);
}
html body .cookieadmin_cookie_modal .cookieadmin_types[hidden] {
display: none;
}
html body .cookieadmin_cookie_modal .cookieadmin_header {
align-items: center;
gap: 1rem;
}
html body .cookieadmin_types .cookieadmin_header button.cookieadmin_show_pref_cookies {
padding: 0;
font-size: 0.875rem;
font-weight: 700;
line-height: 1.25rem;
}
html body .cookieadmin_types .cookieadmin_header button.cookieadmin_show_pref_cookies::before {
width: 0.375rem;
height: 0.375rem;
border-width: 0 1.5px 1.5px 0;
}
html body .cookieadmin_types .cookieadmin_header button.cookieadmin_show_pref_cookies:focus-visible {
outline-color: var(--color-primary);
} html body .cookieadmin_cookie_modal .cookieadmin_desc {
margin: 0.25rem 0 0;
padding: 0 3.5rem 0 0;
font-size: 0.75rem;
line-height: 1.625;
}
html body .cookieadmin_cookie_modal .cookieadmin_types:first-child .cookieadmin_desc {
padding-right: 7.5rem;
} html body .cookieadmin_cookie_modal .cookieadmin_header .cookieadmin_act {
flex-shrink: 0;
margin: 0;
padding: 0.25rem 0.625rem;
border: 1px solid color-mix(in srgb, var(--color-emerald-500) 20%, transparent);
border-radius: var(--radius-full);
font-size: 0.625rem;
font-weight: 800;
line-height: 0.9375rem;
text-transform: uppercase;
color: var(--color-emerald-500);
background-color: color-mix(in srgb, var(--color-emerald-500) 10%, transparent);
} html body .cookieadmin_cookie_modal .cookieadmin_toggle {
width: 2.5rem;
height: 1.5rem;
}
html body .cookieadmin_cookie_modal .cookieadmin_slider {
width: 100%;
height: 100%;
border-radius: var(--radius-full);
background-color: color-mix(in srgb, var(--color-muted-foreground) 30%, transparent);
transition: background-color var(--transition);
}
html body .cookieadmin_cookie_modal .cookieadmin_slider::before {
bottom: 0.125rem;
left: 0.125rem;
width: 1.25rem;
height: 1.25rem;
background-color: #ffffff;
box-shadow: var(--shadow-md);
transition: transform var(--transition);
}
html body .cookieadmin_cookie_modal .cookieadmin_toggle input:checked + .cookieadmin_slider {
background-color: var(--color-primary);
}
html body .cookieadmin_cookie_modal .cookieadmin_toggle input:checked + .cookieadmin_slider::before {
transform: translateX(1rem);
}
html body .cookieadmin_cookie_modal .cookieadmin_toggle input:focus + .cookieadmin_slider {
outline: none;
}
html body .cookieadmin_cookie_modal .cookieadmin_toggle input:focus-visible + .cookieadmin_slider {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
} html body .cookieadmin_cookie_modal .cookieadmin-modal-cookies-list {
margin: 1rem 0 0;
font-size: 0.75rem;
}
html body .cookieadmin_cookie_modal .cookieadmin-cookie-card {
border-color: var(--color-border);
border-radius: 0.5rem;
background-color: var(--color-background);
}
html body .cookieadmin_cookie_modal .cookieadmin-cookie-header {
font-size: 0.75rem;
}
html body .cookieadmin_cookie_modal .cookieadmin-cookie-card p.cookieadmin-cookie-description,
html body .cookieadmin_cookie_modal .cookieadmin-cookie-duration,
html body .cookieadmin_cookie_modal .cookieadmin-modal-cookies-list .cookieadmin-nocookie-cat {
font-size: 0.75rem;
}
html body .cookieadmin_cookie_modal .cookieadmin-tag {
background-color: var(--color-muted);
} html body .cookieadmin_cookie_modal .cookieadmin_modal_footer {
justify-content: flex-end;
gap: 0.75rem;
padding: 1.5rem;
border-top: 1px solid var(--color-modal-border);
background-color: color-mix(in srgb, var(--color-muted) 20%, transparent);
}
html body .cookieadmin_cookie_modal .cookieadmin_modal_footer button.cookieadmin_btn {
flex: 0 0 auto;
}
html body .cookieadmin_cookie_modal .cookieadmin_modal_footer button.cookieadmin_reject_btn {
margin-right: auto;
}
html body .cookieadmin_cookie_modal .cookieadmin_modal_footer_links {
margin-top: 0;
font-size: 0.75rem;
color: var(--color-muted-foreground);
}  @media (max-width: 1024px) {
html body .cookieadmin_law_container .cookieadmin_consent_inside {
grid-template-columns: minmax(0, 1fr);
row-gap: 0;
}
html body .cookieadmin_law_container .cookieadmin_consent_btns {
grid-row: auto;
grid-column: 1;
justify-content: flex-start;
margin-top: 1.5rem;
}
html body .cookieadmin_law_container .cookieadmin-poweredby {
grid-column: 1;
justify-self: start;
}
}
@media (max-width: 767px) {
html body .cookieadmin_law_container .cookieadmin_consent_inside {
padding-block: 1.5rem calc(1.5rem + env(safe-area-inset-bottom));
}
} @media (max-width: 580px) {
html body .cookieadmin_law_container p#cookieadmin_notice {
font-size: 0.75rem;
}
html body .cookieadmin_law_container .cookieadmin_consent_btns {
flex-direction: column;
align-items: stretch;
}
html body .cookieadmin_cookie_modal .cookieadmin_modal_footer button.cookieadmin_btn {
flex: 1 1 auto;
padding-inline: 1rem;
}
html body .cookieadmin_cookie_modal .cookieadmin_modal_footer button.cookieadmin_reject_btn {
margin-right: 0;
}
} @media (max-width: 479px) {
html body .cookieadmin_cookie_modal .cookieadmin_header {
flex-wrap: wrap;
row-gap: 0.75rem;
}
html body .cookieadmin_cookie_modal .cookieadmin_header > span {
flex-basis: 100%;
}
html body .cookieadmin_cookie_modal .cookieadmin_desc,
html body .cookieadmin_cookie_modal .cookieadmin_types:first-child .cookieadmin_desc {
padding-right: 0;
}
}