[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)
}
/* ============================================
   MAIN STYLESHEET
   Custom styles go here
   ============================================ */

body {
  font-family: var(--font-primary);
  color: var(--color-text);
  background-color: var(--color-bg);
}

.container,
.row>* {
  padding-left: 15px;
  padding-right: 15px;
}

.row {
  margin-left: -15px;
  margin-right: -15px;
}

/* Page load fade-in */
body.page-loaded {
  animation: pageFadeIn 0.8s ease forwards;
}

@keyframes pageFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Vertical Guide Lines */
.guide-line {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: rgba(255, 77, 0, 0.2);
  z-index: 9999;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.guide-line-left {
  left: 30px;
}

.guide-line-right {
  right: 30px;
}

/* Hide guidelines when offcanvas menu is open */
body.no-scroll .guide-line {
  opacity: 0;
  visibility: hidden;
}

/* ============================================
   HEADER
   ============================================ */
.site-header {
  position: fixed;
  top: 20px;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 0 30px;
  transition: top 0.4s ease, padding 0.4s ease;
  animation: headerSlideDown 0.9s cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes headerSlideDown {
  from {
    transform: translateY(-120%);
    opacity: 0;
  }

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

.site-header .container {
  max-width: 1480px;
  position: relative;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: var(--tf-white-color);
  border: 1px solid var(--tf-border-color);
  border-radius: 18px;
  padding: 18px 22px 18px 40px;
  box-shadow: 0 8px 30px rgba(20, 20, 20, 0.04);
  transition: box-shadow 0.4s ease, padding 0.4s ease;
  position: relative;
}

.site-header.is-sticky {
  top: 10px;
}

.site-header.is-sticky .header-inner {
  box-shadow: 0 10px 40px rgba(20, 20, 20, 0.10);
  padding: 14px 18px 14px 36px;
}

.header-logo img {
  height: 40px;
  width: auto;
  display: block;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 34px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.header-nav .nav-link,
.offcanvas-nav .nav-link {
  position: relative;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--tf-dark-color);
  transition: color 0.3s ease;
}

.header-nav .nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 2px;
  background: var(--tf-primary-color);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s ease;
}

.header-nav .nav-link:hover,
.header-nav .nav-link.active,
.offcanvas-nav .nav-link.active,
.offcanvas-nav .nav-link:hover {
  color: var(--tf-primary-color);
}

.header-nav .nav-link:hover::after,
.header-nav .nav-link.active::after {
  transform: scaleX(1);
  transform-origin: left;
}

.header-cta {
  padding: 14px 28px;
  font-size: 14px;
  border-radius: 12px;
}

.header-spacer {
  height: 110px;
}

/* Toggle button */
.nav-toggle {
  display: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--tf-primary-color);
  background: var(--tf-white-color);
  position: relative;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease;
}

.nav-toggle span {
  position: absolute;
  left: 50%;
  width: 20px;
  height: 2px;
  background: var(--tf-primary-color);
  border-radius: 2px;
  transform: translateX(-50%);
  transition: all 0.35s ease;
}

.nav-toggle span:nth-child(1) {
  top: 15px;
}

.nav-toggle span:nth-child(2) {
  top: 22px;
  width: 14px;
  left: calc(50% - 3px);
}

.nav-toggle span:nth-child(3) {
  top: 29px;
}

.nav-toggle:hover {
  background: var(--tf-primary-color);
}

.nav-toggle:hover span {
  background: var(--tf-white-color);
}

/* Off-canvas */
.offcanvas-menu {
  position: fixed;
  top: 0;
  right: 0;
  height: 100dvh;
  width: 340px;
  max-width: 85vw;
  background: var(--tf-white-color);
  z-index: 1100;
  padding: 28px 26px 35px;
  transform: translateX(100%);
  transition: transform 0.45s cubic-bezier(.2, .8, .2, 1);
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.08);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.offcanvas-menu.open {
  transform: translateX(0);
}

.offcanvas-menu .theme-button {
  margin-bottom: 15px;
  flex-shrink: 0;
  height: auto !important;
  line-height: normal !important;
  padding: 12px 28px !important;
}

.offcanvas-menu::after {
  content: "";
  display: block;
  height: 30px;
  flex-shrink: 0;
}

.offcanvas-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--tf-border-color);
}

.offcanvas-close {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--tf-border-color);
  background: var(--tf-white-color);
  color: var(--tf-dark-color);
  cursor: pointer;
  transition: all 0.3s ease;
}

.offcanvas-close:hover {
  background: var(--tf-primary-color);
  color: var(--tf-white-color);
  border-color: var(--tf-primary-color);
}

.offcanvas-nav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.offcanvas-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 20, 0.45);
  opacity: 0;
  visibility: hidden;
  z-index: 1050;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.offcanvas-overlay.open {
  opacity: 1;
  visibility: visible;
}

html.no-scroll,
body.no-scroll {
  overflow: hidden;
}


/* ============================================
   HERO SECTION
   ============================================ */
.hero-section {
  position: relative;
  padding: 40px 0 40px;
  background-image: url('../image/frame-73.png');
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  overflow: hidden;
  margin: 0 40px 40px;
  border-radius: 24px;
}

/* ============================================
   ABOUT — PAGE TITLE SECTION
   ============================================ */
.about-hero-section {
  position: relative;
  margin: 0 50px;
  border-radius: 24px;
  background: #fff;
  padding: 70px 40px 70px;
  overflow: hidden;
}

.about-hero-inner {
  max-width: 1280px;
  margin: 0 auto;
  text-align: center;
}

.about-hero-title {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: clamp(40px, 6vw, 96px);
  line-height: 1.05;
  letter-spacing: -1.5px;
  color: var(--tf-dark-color);
  margin: 18px auto 28px;
}

.about-hero-text {
  max-width: 980px;
  margin: 0 auto;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 28px;
  letter-spacing: 0;
  color: var(--tf-muted-color);
}

/* ============================================
   ABOUT — WHO WE ARE SECTION
   ============================================ */
.who-we-are-section {
  position: relative;
  margin: 0px 50px 0;
  padding: 70px 40px 0px;
  border-radius: 24px 24px 0 0;
  background: linear-gradient(180deg, rgba(255, 241, 232, 0.78) 0%, rgba(255, 250, 247, 0.86) 45%, #ffffff 100%);
}

.wwa-inner {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  z-index: 2;
}

.wwa-head {
  text-align: center;
  max-width: 1040px;
  margin: 0 auto;
}

.wwa-badge {
  display: inline-block;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--tf-orange-color, #F26B1F);
  padding: 8px 18px;
  border: 1px solid var(--tf-orange-color, #F26B1F);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
  margin-bottom: 22px;
}

.wwa-title {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.15;
  letter-spacing: -1px;
  color: var(--tf-dark-color);
  margin: 0 0 24px;
}

.wwa-text {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 28px;
  color: var(--tf-muted-color);
  margin: 0 auto;
  max-width: 920px;
}

.wwa-visual {
  position: relative;
  margin: 40px auto 0;
  max-width: 1280px;
  text-align: center;
  z-index: 2;
}

.wwa-visual img {
  width: 100%;
  height: auto;
  display: block;
  position: relative;
  z-index: 2;
}

/* Ripple effect behind the visual image */
.wwa-ripple {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 1;
}

.wwa-ripple span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(320px, 60vw, 820px);
  height: clamp(320px, 60vw, 820px);
  margin: 0;
  transform: translate(-50%, -50%) scale(0.72);
  transform-origin: center center;
  border-radius: 50%;
  border: 0;
  background: radial-gradient(circle, rgba(242, 107, 31, 0.22) 0%, rgba(242, 107, 31, 0.16) 34%, rgba(242, 107, 31, 0.08) 58%, rgba(242, 107, 31, 0.03) 76%, rgba(242, 107, 31, 0) 100%);
  opacity: 0;
  animation: wwaRipple 7.5s ease-out infinite;
}

.wwa-ripple span:nth-child(2) {
  animation-delay: 1.875s;
}

.wwa-ripple span:nth-child(3) {
  animation-delay: 3.75s;
}

.wwa-ripple span:nth-child(4) {
  animation-delay: 5.625s;
}

@keyframes wwaRipple {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.72);
  }

  18% {
    opacity: 0.9;
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.12);
  }
}

/* Decorative rounded background lines (image touches body edges) */
.wwa-bg-lines {
  position: absolute;
  top: 0;
  left: -50px;
  right: -50px;
  width: calc(100% + 100px);
  height: auto;
  pointer-events: none;
  user-select: none;
  z-index: 1;
}

.hero-container {
  max-width: 1480px;
  text-align: center;
}

.hero-title {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: clamp(34px, 5.4vw, 78px);
  line-height: 1.08;
  letter-spacing: -1px;
  color: var(--tf-dark-color);
  margin: 0px auto 36px;
  max-width: 1100px;
}

.hero-sub {
  max-width: 760px;
  margin: 0 auto 36px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--tf-muted-color);
}

.hero-cta-wrap {
  margin-bottom: 36px;
}

/* Hero CTA — white pill with rotating faded orange border */
.hero-cta {
  position: relative;
  display: inline-block;
  padding: 16px 38px;
  border-radius: 14px;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--tf-primary-color);
  background: var(--tf-white-color);
  border: 0 !important;
  box-shadow: 0 10px 30px rgba(20, 20, 20, 0.08);
  transition: color 0.35s ease, background-color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
  isolation: isolate;
  overflow: hidden;
}

/* Traveling rounded border (SVG) — follows the button's border-radius */
.hero-cta-border {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
}

.hero-cta-border rect {
  x: 0;
  y: 0;
  width: 100%;
  height: 100%;
  rx: 14px;
  ry: 14px;
  fill: none;
  stroke: var(--tf-primary-color);
  stroke-width: 2;
  /* half clipped → 1px visible inside */
  stroke-dasharray: 22 78;
  stroke-dashoffset: 0;
  animation: heroCtaDash 3s linear infinite;
}

.hero-cta:hover {
  background: var(--tf-primary-color);
  color: var(--tf-white-color);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(242, 107, 58, 0.35);
}

.hero-cta:hover .hero-cta-border rect {
  stroke: var(--tf-white-color);
}

@keyframes heroCtaDash {
  to {
    stroke-dashoffset: -100;
  }
}

/* Image stage — perspective + scroll-driven uprise */
.hero-image-stage {
  perspective: 1600px;
  perspective-origin: 50% 100%;
  padding-top: 0px;
  margin: 0 auto;
  width: 100%;
  max-width: 1400px;
}

.hero-image-tilt {
  transform-origin: 50% 100%;
  transform: rotateX(var(--hero-rx, 16deg));
  transition: transform 0.05s linear;
  will-change: transform;
}

.hero-image-tilt img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 45px;
  box-shadow: 0 -10px 60px rgba(20, 20, 20, 0.18);
  border: 15px solid rgba(255, 255, 255, 0.25);
  border-bottom: 0;
  box-sizing: border-box;
  background-clip: padding-box;
  margin-bottom: -45px;
}

/* ============================================
   ENTITIES SECTION — sticky heading + stacking cards
   ============================================ */
.entities-section {
  position: relative;
  padding: 70px 0;
  background: var(--tf-white-color);
}

.entities-container {
  max-width: 1480px;
}

.entities-head {
  position: relative;
  text-align: center;
  padding-bottom: 0px;
}

.entities-label {
  display: inline-block;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--tf-primary-color);
  padding: 8px 22px;
  border: 1px solid var(--tf-primary-color);
  border-radius: 50rem;
  margin-bottom: 22px;
}

.entities-title {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: 1.18;
  letter-spacing: -0.5px;
  color: var(--tf-dark-color);
  margin: 0 auto 18px;
  max-width: 1100px;
}

.entities-sub {
  max-width: 620px;
  margin: 0 auto;
}

/* Stack wrapper — each card is sticky at slightly different offsets */
.entities-stack {
  position: relative;
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.entity-card {
  position: sticky;
  /* Each subsequent card stops 18px lower so previous remains peeking */
  top: calc(110px + (var(--i) * 8px));
  will-change: transform;
  transform-origin: top center;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.entity-card-inner {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 30px;
  align-items: stretch;
  background: var(--tf-white-color);
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

.entity-media {
  border-radius: 20px;
  overflow: hidden;
  background: var(--tf-peach-soft);
}

.entity-media-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.entity-media-placeholder {
  width: 100%;
  height: 100%;
  min-height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  color: var(--tf-primary-color);
  background: linear-gradient(135deg, var(--tf-peach-soft), var(--tf-peach-color));
}

.entity-body {
  background: rgba(255, 239, 231, 0.4);
  border-radius: 20px;
  padding: 44px 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-left: 0;
  outline: 1px solid rgba(255, 77, 0, 0.2);
  outline-offset: 10px;
  margin: 10px;
}

.entity-title {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 32px;
  line-height: 1.25;
  color: var(--tf-dark-color);
  margin: 0 0 18px;
  position: relative;
  padding-left: 18px;
}

.entity-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 4px;
  border-radius: 4px;
  background: var(--tf-primary-color);
}

.entity-text {
  margin: 0;
  font-size: 20px;
  line-height: 1.6;
}

/* Target Personas block (inside entity-body) */
.entity-personas {
  margin-top: 25px;
}

.entity-personas-title {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 24px;
  color: var(--tf-dark-color);
  margin: 0 0 14px;
}

.entity-persona-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
}

.entity-persona-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "Inter", sans-serif;
  font-size: 20px;
  font-weight: 500;
  color: var(--tf-dark-color);
  position: relative;
  padding-right: 18px;
}

/* 
.entity-persona-list li:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 18px;
  background: rgba(0, 0, 0, 0.12);
} */

.entity-persona-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: url('../image/persona-arrow.svg') center/contain no-repeat;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0;
}

.entity-persona-icon>i {
  display: none;
}

@media (max-width: 900px) {
  .entities-head {
    top: auto;
  }

  .entity-card {
    top: calc(90px + (var(--i) * 14px));
  }

  .entity-card-inner {
    grid-template-columns: 1fr;
    padding: 18px;
  }

  .entity-media-placeholder {
    min-height: 240px;
  }

  .entity-body {
    padding: 28px 24px;
  }
}

/* Tablet — disable sticky stack, adjust spacing */
@media (max-width: 1024px) {
  .entities-section {
    padding: 70px 0 70px;
  }

  .entities-container {
    padding-left: 40px;
    padding-right: 40px;
    max-width: 100%;
  }

  .entities-head {
    position: static !important;
    top: auto !important;
  }

  .entity-card {
    position: static !important;
    top: auto !important;
    transform: none !important;
  }

  .entities-stack {
    gap: 24px;
    margin-top: 24px;
  }

  .entities-title {
    font-size: clamp(24px, 3.2vw, 36px);
    max-width: 100%;
  }

  .entity-title {
    font-size: 26px;
  }

  .entity-text {
    font-size: 17px;
  }

  .entity-personas-title {
    font-size: 20px;
  }

  .entity-persona-list li {
    font-size: 16px;
  }

  .entity-body {
    margin: 10px;
    padding: 24px;
    outline: 1px solid rgba(255, 77, 0, 0.2);
    outline-offset: 10px;
  }
}

/* Small desktop / laptop — tighter spacing and slightly smaller fonts */
@media (min-width: 1025px) and (max-width: 1440px) {
  .entities-section {
    padding: 70px 0 70px;
  }

  .entities-container {
    padding-left: 40px;
    padding-right: 40px;
  }

  .entities-stack {
    margin-top: 10px;
    gap: 20px;
  }

  .entity-card {
    top: calc(110px + (var(--i) * 8px));
  }

  .entities-title {
    font-size: clamp(26px, 2.8vw, 38px);
  }

  .entity-title {
    font-size: 26px;
    margin-bottom: 14px;
  }

  .entity-text {
    font-size: 17px;
    line-height: 1.55;
  }

  .entity-personas {
    margin-top: 25px;
  }

  .entity-personas-title {
    font-size: 20px;
  }

  .entity-persona-list li {
    font-size: 17px;
  }

  .entity-body {
    padding: 32px 32px;
  }

  .entity-media-placeholder {
    min-height: 300px;
  }
}

/* Mobile — tighter spacing and smaller typography */
@media (max-width: 768px) {

  .hero-sub,
  .hero-title {
    margin-bottom: 25px;
  }

  .entities-section {
    padding: 40px 0px;
  }

  .entities-container {
    padding-left: 30px;
    padding-right: 30px;
  }

  .entities-label {
    font-size: 11px;
    padding: 6px 16px;
    margin-bottom: 16px;
  }

  .entities-title {
    font-size: clamp(22px, 6vw, 28px);
    margin-bottom: 12px;
  }

  .entities-sub {
    font-size: 14px;
  }

  .entity-title {
    font-size: 22px;
    margin-bottom: 14px;
    padding-left: 14px;
  }

  .entity-text {
    font-size: 15px;
    line-height: 1.55;
  }

  .entity-personas {
    margin-top: 15px;
  }

  .entity-personas-title {
    font-size: 18px;
    margin-bottom: 10px;
  }

  .entity-persona-list {
    gap: 8px 14px;
  }

  .entity-persona-list li {
    font-size: 14px;
    padding-right: 14px;
  }

  .entity-persona-icon {
    width: 20px;
    height: 20px;
  }

  .entity-body {
    padding: 22px 18px;
    margin: 10px;
    outline: 1px solid rgba(255, 77, 0, 0.2);
    outline-offset: 10px;
  }

  .entity-media-placeholder {
    min-height: 200px;
  }

  .hero-cta-wrap {
    margin-bottom: 10px !important;
  }
}

/* ============================================
   OUTLETS SECTION — marquee carousels
   ============================================ */
.outlets-section {
  position: relative;
  padding: 0 0 70px;
  background: var(--tf-peach-soft);
  overflow: hidden;
}

.outlets-section {
  margin-top: 0;
}

/* Top horizontal divider line + square dots at guide-line intersections */
.outlets-section::before {
  content: "";
  position: absolute;
  top: 30px;
  left: 0;
  right: 0;
  height: 1px;
  background-color: rgba(242, 107, 58, 0.2);
  pointer-events: none;
  z-index: 2;
}

.outlets-section .outlets-dot {
  position: absolute;
  top: 25px;
  display: block;
  width: 10px;
  height: 10px;
  box-sizing: border-box;
  background-color: var(--tf-primary-color);
  z-index: 3;
  pointer-events: none;
}

.outlets-section .outlets-dot-left {
  left: 25px;
}

.outlets-section .outlets-dot-right {
  right: 25px;
}

.outlets-container {
  max-width: 1480px;
  padding-left: 40px;
  padding-right: 40px;
}

.outlets-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 50px;
}

.outlets-label {
  display: inline-block;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--tf-primary-color);
  padding: 8px 22px;
  border: 1px solid var(--tf-primary-color);
  border-radius: 50rem;
  margin-bottom: 22px;
}

.outlets-title {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: 1.18;
  letter-spacing: -0.5px;
  color: var(--tf-dark-color);
  margin: 0 0 18px;
}

.outlets-sub {
  margin: 0 auto;
}

/* Marquee row */
.outlets-marquee {
  position: relative;
  overflow: hidden;
  padding: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
}

.outlets-marquee-second {
  margin-top: 24px;
}

.outlets-track {
  display: flex;
  gap: 24px;
  width: max-content;
  will-change: transform;
}

.outlets-marquee-rtl .outlets-track {
  animation: outletsScrollLeft 40s linear infinite;
}

.outlets-marquee-ltr .outlets-track {
  animation: outletsScrollRight 40s linear infinite;
}

.outlets-marquee:hover .outlets-track {
  animation-play-state: paused;
  /* fully pause on hover */
}

@keyframes outletsScrollLeft {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@keyframes outletsScrollRight {
  from {
    transform: translateX(-50%);
  }

  to {
    transform: translateX(0);
  }
}

/* Outlet card */
.outlet-card {
  width: 240px;
  height: 170px;
  background: var(--tf-white-color);
  border-radius: 22px;
  border: 1px solid rgba(242, 107, 58, 0.10);
  box-shadow: 0 8px 24px rgba(242, 107, 58, 0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: space-between;
  padding: 22px 24px;
  transition: box-shadow 0.35s ease;
}

.outlet-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--tf-peach-color);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tf-primary-color);
  font-size: 24px;
}

.outlet-name {
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 19px;
  color: var(--tf-dark-color);
}

/* Responsive */
@media (max-width: 1024px) {
  .outlets-section {
    padding: 0 0 70px;
    margin-top: 0;
  }

  .outlets-container {
    padding-left: 40px;
    padding-right: 40px;
  }

  .outlets-head {
    margin-bottom: 36px;
  }

  .outlets-title {
    font-size: clamp(24px, 3.2vw, 36px);
  }

  .outlet-card {
    width: 210px;
    height: 165px;
    padding: 20px 22px;
  }

  .outlet-icon {
    width: 50px;
    height: 50px;
    font-size: 22px;
  }

  .outlet-name {
    font-size: 17px;
  }

  .outlets-track {
    gap: 20px;
  }
}

@media (max-width: 767px) {

  .outlets-section .outlets-dot-left,
  .outlets-section .outlets-dot-right {
    display: none;
  }
}

@media (max-width: 600px) {
  .outlets-section {
    padding: 0 0 40px;
    margin-top: 0;
  }

  .outlets-section::before {
    top: 20px;
  }

  .outlets-section .outlets-dot {
    top: 15px;
    width: 10px;
    height: 10px;
  }

  .outlets-section .outlets-dot-left {
    left: 15px;
  }

  .outlets-section .outlets-dot-right {
    right: 15px;
  }

  .outlets-container {
    padding-left: 30px;
    padding-right: 30px;
  }

  /* Ensure both marquee rows are always visible on mobile, even if AOS hasn't triggered */
  .outlets-section .outlets-marquee[data-aos] {
    opacity: 1 !important;
    transform: none !important;
  }

  .outlets-marquee-second {
    margin-top: 14px;
  }

  .outlets-head {
    margin-bottom: 28px;
  }

  .outlets-title {
    font-size: clamp(22px, 6vw, 28px);
  }

  .outlet-card {
    width: 160px;
    height: 135px;
    padding: 15px;
    border-radius: 18px;
  }

  .outlet-icon {
    width: 44px;
    height: 44px;
    font-size: 19px;
  }

  .outlet-name {
    font-size: 15px;
  }

  .outlets-track {
    gap: 14px;
  }

  .outlets-marquee {
    padding: 0;
  }

  .outlets-marquee-rtl .outlets-track,
  .outlets-marquee-ltr .outlets-track {
    animation-duration: 30s;
  }
}

/* ============================================
   FOOTER
   ============================================ */
.site-footer {
  background: #111111;
  color: #ffffff;
  padding: 40px 0 0;
  font-family: "Inter", sans-serif;
}

.site-footer .container {
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 40px;
}

.site-footer .footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.2fr;
  gap: 50px;
  align-items: start;
}

.footer-logo {
  display: inline-block;
  margin-bottom: 22px;
}

.footer-logo img {
  height: 48px;
  width: auto;
}

.footer-desc {
  color: #d6d6d6;
  font-size: 15px;
  line-height: 1.7;
  max-width: 420px;
  margin: 0 0 28px;
}

.footer-subscribe {
  display: flex;
  align-items: stretch;
  background: #fff;
  border-radius: 12px;
  padding: 6px;
  max-width: 420px;
  gap: 6px;
  width: 100%;
  box-sizing: border-box;
}

.footer-subscribe input {
  flex: 1;
  min-width: 0;
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  padding: 12px 16px;
  font-size: 15px;
  color: #111;
  border-radius: 8px;
}

.footer-subscribe button {
  flex-shrink: 0;
}

.footer-subscribe button {
  background: var(--tf-orange, #f15a24);
  color: #fff;
  border: none;
  padding: 12px 28px;
  border-radius: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s ease;
}

.footer-subscribe button:hover {
  background: #d94a18;
}

.footer-links ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: left;
}

.footer-title {
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 24px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.footer-title.contact-info {
  margin-bottom: 6px;
}

.footer-links a {
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  transition: color .2s ease;
}

.footer-links a:hover {
  color: var(--tf-orange, #f15a24);
}

.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.footer-contact-block h6 {
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 6px;
}

.footer-contact-block p,
.footer-contact-block a {
  color: #e5e5e5;
  font-size: 15px;
  margin: 0;
  text-decoration: none;
  line-height: 1.55;
}

.footer-contact-block a:hover {
  color: var(--tf-orange, #f15a24);
}

.footer-socials {
  display: flex;
  gap: 14px;
  margin-top: 10px;
}

.footer-socials a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--tf-orange, #f15a24);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  text-decoration: none;
  transition: transform .2s ease, background .2s ease;
}

.footer-socials a:hover {
  transform: translateY(-3px);
  background: #d94a18;
}

.footer-bottom {
  margin-top: 40px;
  background: #000;
  padding: 22px 0;
}

.footer-bottom .container {
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 40px;
}

.footer-bottom-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.footer-copy {
  color: #e5e5e5;
  font-size: 14px;
  margin: 0;
}

.footer-legal {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.footer-legal a {
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  transition: color .2s ease;
}

.footer-legal a:hover {
  color: var(--tf-orange, #f15a24);
}

.footer-legal span {
  color: #555;
}

@media (max-width: 1024px) {
  .site-footer {
    padding: 40px 0 0;
  }

  .site-footer .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  .footer-brand .footer-desc,
  .footer-brand .footer-subscribe {
    max-width: 100%;
  }

  .footer-links ul {
    text-align: left;
  }
}

@media (max-width: 600px) {

  .site-footer .container {
    padding: 0 40px;
  }

  .site-footer .footer-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .footer-desc {
    font-size: 14px;
  }

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

  .footer-subscribe button {
    padding: 10px 18px;
    font-size: 14px;
  }

  .footer-bottom {
    padding: 18px 0;
  }

  .footer-bottom .container {
    padding: 0 40px;
  }

  .footer-bottom-inner {
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }

  .footer-copy {
    font-size: 13px;
  }
}

/* ============================================
   BENEFITS SECTION — sticky left + scrolling cards
   ============================================ */
.benefits-section {
  position: relative;
  padding: 0 0 70px 0;
  background: var(--tf-white-color);
}

.benefits-container {
  max-width: 1480px;
  padding-left: 40px;
  padding-right: 40px;
  box-sizing: border-box;
}

.benefits-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 80px;
  align-items: start;
}

.benefits-left,
.benefits-right {
  min-width: 0;
}

.benefits-title,
.benefits-sub,
.benefit-title,
.benefit-text {
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
}

.benefits-left {
  position: sticky;
  top: 130px;
  align-self: start;
}

.benefits-left-inner {
  max-width: 480px;
}

.benefits-label {
  display: inline-block;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--tf-primary-color);
  padding: 8px 22px;
  border: 1px solid var(--tf-primary-color);
  border-radius: 50rem;
  margin-bottom: 25px;
}

.benefits-title {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: 1.18;
  letter-spacing: -0.5px;
  color: var(--tf-dark-color);
  margin: 0 0 25px;
}

.benefits-sub {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--tf-muted-color);
}

.benefits-right {
  display: block;
}

.benefit-card {
  display: block;
  position: sticky;
  top: calc(130px + (var(--i) * 10px));
  background: var(--tf-white-color);
  padding-bottom: 40px;
  margin-bottom: 80px;
  will-change: transform;
  transform-origin: top center;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.benefit-card:last-child {
  margin-bottom: 0;
}

.benefit-media {
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--tf-peach-soft), var(--tf-peach-color));
  aspect-ratio: 16 / 9;
  margin-bottom: 24px;
}

.benefit-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.benefit-media-fallback {
  min-height: 280px;
}

.benefit-title {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 32px;
  line-height: 1.25;
  color: var(--tf-dark-color);
  margin: 0 0 14px;
  position: relative;
  padding-left: 18px;
}

.benefit-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 4px;
  border-radius: 4px;
  background: var(--tf-primary-color);
}

.benefit-text {
  margin: 0 0 0 18px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--tf-muted-color);
}

/* Tablet — keep 2 columns, reduce gap & sizes */
@media (max-width: 1024px) {
  .benefits-section {
    padding: 0 0 70px;
  }

  .benefits-container {
    padding-left: 40px;
    padding-right: 40px;
    max-width: 100%;
  }

  .benefits-grid {
    grid-template-columns: 1fr 1.1fr;
    gap: 50px;
  }

  .benefits-left {
    top: 110px;
  }

  .benefits-title {
    font-size: clamp(24px, 3.2vw, 36px);
  }

  .benefits-sub {
    font-size: 15px;
  }

  .benefit-card {
    top: calc(110px + (var(--i) * 10px));
    margin-bottom: 60px;
    padding-bottom: 30px;
  }

  .benefit-title {
    font-size: 26px;
  }

  .benefit-text {
    font-size: 16px;
  }
}

/* Tablet-only — extra inward padding */
@media (min-width: 769px) and (max-width: 1024px) {
  .benefits-container {
    padding-left: 55px;
    padding-right: 55px;
  }
}

/* Mobile — single column, no sticky */
@media (max-width: 768px) {
  .benefits-section {
    padding: 0 0 40px 0px;
  }

  .benefits-container {
    padding-left: 33px;
    padding-right: 33px;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }

  .benefits-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .benefits-left {
    position: static;
    top: auto;
  }

  .benefits-left-inner {
    max-width: 100%;
  }

  .benefits-label {
    font-size: 11px;
    padding: 6px 16px;
    margin-bottom: 15px;
  }

  .benefits-title {
    font-size: clamp(20px, 5.6vw, 26px);
    margin-bottom: 15px;
    line-height: 1.25;
  }

  .benefits-sub {
    font-size: 14px;
  }

  .benefit-card {
    position: static;
    top: auto;
    transform: none !important;
    margin-bottom: 40px;
    padding-bottom: 0;
  }

  .benefit-card:last-child {
    margin-bottom: 0;
  }

  .benefit-media {
    margin-bottom: 18px;
    border-radius: 16px;
  }

  .benefit-title {
    font-size: clamp(18px, 5vw, 22px);
    padding-left: 14px;
    margin-bottom: 10px;
    line-height: 1.3;
  }

  .benefit-title::before {
    width: 3px;
  }

  .benefit-text {
    font-size: 14px;
    margin-left: 14px;
    line-height: 1.6;
  }
}

@media (max-width: 480px) {
  .benefits-container {
    padding-left: 15px;
    padding-right: 15px;
  }

  .benefits-title {
    font-size: clamp(18px, 5.2vw, 22px);
  }

  .benefit-title {
    font-size: 18px;
    padding-left: 12px;
  }

  .benefit-title::before {
    top: 4px;
    bottom: 4px;
  }

  .benefit-text {
    font-size: 13.5px;
    margin-left: 12px;
  }

  .entity-card-inner {
    padding: 0px;
  }

  .entity-body {
    padding: 10px;
  }
}

/* ============================================
   MARKETPLACE SERVICES SECTION
   ============================================ */
.marketplace-section {
  position: relative;
  padding: 0 0 70px 0;
  background: var(--tf-white-color);
  overflow: hidden;
}

.marketplace-container {
  max-width: 1480px;
  padding-left: 40px;
  padding-right: 40px;
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================
   LIBRARY ALLIANCE SECTION
   ============================================ */
.library-section {
  position: relative;
  padding: 0 0 70px 0;
  background: var(--tf-white-color);
}

.library-section .library-title,
.library-section .library-sub {
  width: 70%;
}

.library-container {
  max-width: 1480px;
  padding-left: 40px;
  padding-right: 40px;
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
}

.library-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

.library-text {
  flex: 1 1 460px;
  min-width: 0;
}

.library-label {
  display: inline-block;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--tf-primary-color);
  padding: 8px 22px;
  border: 1px solid var(--tf-primary-color);
  border-radius: 50rem;
  margin-bottom: 25px;
  text-transform: uppercase;
}

.library-title {
  font-family: "Inter", sans-serif;
  font-size: clamp(26px, 3.4vw, 42px);
  font-weight: 700;
  line-height: 1.2em;
  color: var(--tf-dark-color);
  letter-spacing: -0.5px;
  margin: 0 0 25px;
}

.library-sub {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  line-height: 1.65em;
  color: var(--tf-muted-color);
  margin: 0;
}

.library-logos {
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 28px 36px;
  background: rgba(255, 239, 231, 0.8);
  border-radius: 18px;
  flex-shrink: 0;
}

.library-logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

.library-logo img {
  max-height: 78px;
  width: auto;
  display: block;
  object-fit: contain;
}

@media (max-width: 1299px) {

  .library-section .library-title,
  .library-section .library-sub {
    width: 90%;
  }
}

@media (max-width: 1199px) {
  .library-container {
    padding-left: 55px;
    padding-right: 55px;
  }

  .library-section .library-title,
  .library-section .library-sub {
    width: 100%;
  }
}

@media (max-width: 991px) {

  .library-label,
  .library-title {
    margin-bottom: 15px;
  }

  .library-section {
    padding: 0 0 70px;
  }

  .library-container {
    padding-left: 55px;
    padding-right: 55px;
  }

  .library-inner {
    gap: 28px;
    justify-content: center;
    text-align: center;
  }

  .library-text {
    flex: inherit;
  }

  .library-logos {
    padding: 22px 28px;
    gap: 22px;
  }

  .library-logo img {
    max-height: 62px;
  }
}

@media (max-width: 767px) {
  .library-section {
    padding: 0 0 40px;
  }

  .library-container {
    padding-left: 40px;
    padding-right: 40px;
  }

  .library-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .library-text {
    flex: 0 0 auto;
    width: 100%;
  }

  .library-logos {
    width: 100%;
    justify-content: center;
    padding: 22px;
    gap: 20px;
  }

  .library-logo img {
    max-height: 56px;
  }

  .library-sub {
    font-size: 15px;
  }
}

@media (max-width: 480px) {
  .library-logos {
    padding: 18px;
    gap: 16px;
    justify-content: space-between;
  }

  .library-logo img {
    max-height: 46px;
  }
}

/* ============================================
   CLIENTS FEEDBACK / TESTIMONIALS SECTION
   ============================================ */
.testi-section {
  position: relative;
  padding: 0 0 70px 0;
  background: var(--tf-white-color);
  font-family: "Inter", sans-serif;
}

.testi-container {
  max-width: 1480px;
  padding-left: 40px;
  padding-right: 40px;
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
}

.testi-head {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 50px;
}

.testi-label {
  display: inline-block;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--tf-primary-color);
  padding: 8px 22px;
  border: 1px solid var(--tf-primary-color);
  border-radius: 50rem;
  margin-bottom: 22px;
  text-transform: uppercase;
}

.testi-title {
  font-family: "Inter", sans-serif;
  font-size: clamp(26px, 3.4vw, 42px);
  font-weight: 700;
  line-height: 1.25em;
  color: var(--tf-dark-color);
  letter-spacing: -0.5px;
  margin: 0;
}

.testi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* Stat card */
.testi-stat {
  border-radius: 22px;
  padding: 36px 30px;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.testi-stat:hover {
  transform: translateY(-4px);
}

.testi-stat--orange {
  background: linear-gradient(160deg, #FF8A5C 0%, #F26B3A 55%, #E85420 100%);
  color: var(--tf-white-color);
  box-shadow: 0 18px 36px -18px rgba(242, 107, 58, 0.55);
}

.testi-stat--white {
  background: var(--tf-white-color);
  color: var(--tf-dark-color);
  border: 1px solid rgba(255, 77, 0, 0.2);
  box-shadow: 0 12px 30px -20px rgba(0, 0, 0, 0.18);
}

.testi-stat-num {
  font-family: "Inter", sans-serif;
  font-size: clamp(46px, 5.5vw, 72px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -1.5px;
  margin-bottom: 18px;
}

.testi-stat-label {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 500;
  opacity: 0.95;
}

/* Testimonials Slider Wrapper & Carousel */
.testi-slider-wrapper {
  grid-column: span 2;
  position: relative;
  transition: transform 0.35s ease;
}

.testi-slider-wrapper .carousel,
.testi-slider-wrapper .carousel-inner,
.testi-slider-wrapper .carousel-item {
  height: 100%;
}

.testi-slider-wrapper .carousel-item {
  padding-right: 10px;
  padding-left: 10px;
}

.testi-slider-wrapper .testi-card {
  grid-column: auto;
  height: 100%;
  margin: 0;
  transform: none !important;
  padding-bottom: 70px;
  /* Space for indicators */
}

.testi-slider-wrapper:hover {
  transform: translateY(-4px);
}

/* Custom Carousel Indicators */
.testi-indicators {
  position: absolute;
  bottom: 24px !important;
  left: 32px !important;
  margin: 0 !important;
  padding: 0 !important;
  justify-content: flex-start !important;
  gap: 8px;
  z-index: 5;
}

.testi-indicators button {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50%;
  background-color: var(--tf-primary-color) !important;
  border: none !important;
  opacity: 0.35 !important;
  transition: all 0.3s ease !important;
}

.testi-indicators button.active {
  width: 24px !important;
  border-radius: 5px !important;
  background-color: var(--tf-primary-color) !important;
  opacity: 1 !important;
}

/* Testimonial card */
.testi-card {
  grid-column: span 2;
  background: rgba(255, 239, 231, 0.8);
  border-radius: 22px;
  padding: 30px 32px 0;
  display: flex;
  flex-direction: column;
  position: relative;
  min-height: 368px;
  transition: transform 0.35s ease;
  overflow: hidden;
  border: 1px solid transparent;
  background-image:
    linear-gradient(rgba(255, 239, 231, 0.8), rgba(255, 239, 231, 0.8)),
    linear-gradient(135deg, rgba(255, 216, 201, 0.2), rgba(254, 74, 1, 0.2));
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

.testi-card:hover {
  transform: translateY(-4px);
}

.testi-quote-mark {
  font-family: "Inter", sans-serif;
  font-size: 56px;
  line-height: 0.6;
  font-weight: 800;
  color: var(--tf-primary-color);
  margin-bottom: 14px;
  height: 28px;
}

.testi-quote {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  line-height: 1.65em;
  color: var(--tf-dark-color);
  margin: 0 0 18px;
  flex: 1 1 auto;
}

.testi-stars {
  display: flex;
  gap: 6px;
  color: var(--tf-primary-color);
  font-size: 18px;
  margin-bottom: 26px;
}

.testi-person {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255, 255, 255, 0.55);
  margin: 0 -32px;
  padding: 18px 32px;
}

.testi-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  overflow: hidden;
  background: #d9d9d9;
  flex-shrink: 0;
}

.testi-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.testi-person-name {
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--tf-dark-color);
}

.testi-person-role {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  color: var(--tf-muted-color);
  margin-top: 2px;
}

@media (max-width: 1200px) {
  .testi-container {
    padding-left: 55px;
    padding-right: 55px;
  }

  .testi-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .testi-card,
  .testi-slider-wrapper {
    grid-column: span 1;
    min-height: 0;
  }

  .testi-stat {
    min-height: 240px;
    padding: 32px 24px;
  }
}

@media (max-width: 991px) {
  .testi-section {
    padding: 0 0 70px;
  }

  .testi-container {
    padding-left: 55px;
    padding-right: 55px;
  }

  .testi-head {
    margin-bottom: 40px;
  }

  .testi-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .testi-card,
  .testi-slider-wrapper {
    grid-column: span 1;
    min-height: 0;
  }

  .testi-stat {
    min-height: 220px;
    padding: 30px 22px;
  }
}

@media (max-width: 767px) {
  .testi-section {
    padding: 0 0 40px;
  }

  .testi-container {
    padding-left: 33px;
    padding-right: 33px;
  }

  .testi-grid {
    gap: 20px;
    grid-template-columns: repeat(1, 1fr);
  }

  .testi-card {
    padding: 24px 22px 0;
  }

  .testi-card .testi-person {
    margin: 0 -22px;
    padding: 16px 22px;
  }

  .testi-quote {
    font-size: 15px;
  }

  .testi-stat {
    min-height: 180px;
    padding: 26px 18px;
  }
}

@media (max-width: 480px) {
  .testi-container {
    padding-left: 15px;
    padding-right: 15px;
  }

  .testi-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .testi-card,
  .testi-slider-wrapper {
    grid-column: span 1;
  }

  .testi-stat {
    min-height: 160px;
  }
}

/* Heading block */
.marketplace-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 50px;
}

.marketplace-label {
  display: inline-block;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--tf-primary-color);
  padding: 8px 22px;
  border: 1px solid var(--tf-primary-color);
  border-radius: 50rem;
  margin-bottom: 18px;
  text-transform: uppercase;
}

.marketplace-title {
  font-family: "Inter", sans-serif;
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 700;
  line-height: 1.15em;
  color: var(--tf-dark-color);
  letter-spacing: -0.5px;
  margin: 0 0 18px;
}

.marketplace-sub {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  line-height: 1.65em;
  color: var(--tf-muted-color);
  margin: 0;
}

/* Diagram (icons + curves + center) */
.marketplace-diagram {
  position: relative;
  max-width: 1100px;
  margin: 0 auto 60px;
  padding: 0 10px;
}

.marketplace-top-icons {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4px;
  width: 60%;
  margin: 0 auto;
}

.mp-top-icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.35s ease;
}

.mp-top-icon img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.mp-top-icon:hover {
  transform: translateY(-4px) scale(1.05);
}

/* Fallback when image is missing */
.mp-icon-fallback {
  background: var(--tf-peach-soft);
  border-radius: 12px;
  position: relative;
}

.mp-icon-fallback::before {
  content: '';
  position: absolute;
  inset: 22%;
  background: var(--tf-primary-color);
  border-radius: 6px;
  opacity: 0.55;
}

/* Curves SVG between icons and center */
.marketplace-curves {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 280px;
  margin-top: -10px;
  pointer-events: none;
}

.marketplace-curves path {
  fill: none;
  stroke: var(--tf-primary-color);
  stroke-width: 1;
  opacity: 0.35;
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  animation: mpDraw 2.2s ease-out forwards;
}

.marketplace-curves path:nth-child(2) {
  animation-delay: 0.1s;
}

.marketplace-curves path:nth-child(3) {
  animation-delay: 0.2s;
}

.marketplace-curves path:nth-child(4) {
  animation-delay: 0.3s;
}

.marketplace-curves path:nth-child(5) {
  animation-delay: 0.4s;
}

.marketplace-curves path:nth-child(6) {
  animation-delay: 0.5s;
}

@keyframes mpDraw {
  to {
    stroke-dashoffset: 0;
  }
}

/* Traveling pulse along each curve (bottom -> top, infinite) */
.marketplace-curves path.mp-pulse {
  fill: none;
  stroke: var(--tf-primary-color);
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 1;
  stroke-dasharray: 100 1000;
  stroke-dashoffset: -900;
  animation: mpPulse 3s cubic-bezier(0.7, 0, 0.3, 1) infinite;
  /* override the .marketplace-curves path defaults above */
  animation-delay: 0s;
}

@keyframes mpPulse {

  /* Fade in softly at the bottom, then travel up. */
  0% {
    stroke-dashoffset: -900;
    opacity: 0;
  }

  10% {
    stroke-dashoffset: -880;
    opacity: 1;
  }

  66% {
    stroke-dashoffset: 100;
    opacity: 1;
  }

  100% {
    stroke-dashoffset: 100;
    opacity: 0;
  }
}

/* Center logo */
.marketplace-center {
  position: absolute;
  left: 50%;
  bottom: -75px;
  transform: translateX(-50%);
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  animation: mpFloat 4s ease-in-out infinite;
}

.marketplace-center img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

@keyframes mpFloat {

  0%,
  100% {
    transform: translate(-50%, 0);
  }

  50% {
    transform: translate(-50%, -6px);
  }
}

/* Service cards grid */
.marketplace-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  max-width: 1100px;
  margin: 120px auto 0;
}

.mp-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 26px;
  background: var(--tf-white-color);
  border-radius: 15px;
  box-shadow: 0 8px 24px rgba(20, 20, 20, 0.06);
  color: var(--tf-dark-color);
  font-family: "Inter", sans-serif;
  font-size: 18px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.3s ease;
  border: 1px solid rgba(20, 20, 20, 0.08);
}

.mp-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(242, 107, 58, 0.18);
  color: var(--tf-primary-color);
  border-color: var(--tf-primary-color);
}

.mp-card.is-active {
  font-weight: 500;
}

.mp-card-icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mp-card-icon img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.mp-card-text {
  line-height: 1.3;
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
  .marketplace-container {
    padding-left: 55px;
    padding-right: 55px;
    max-width: 100%;
  }

  .marketplace-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .marketplace-curves {
    height: 220px;
    margin-top: 10px;
  }

  .mp-top-icon {
    width: 54px;
    height: 54px;
  }

  .marketplace-top-icons {
    width: 68%;
    gap: 12px;
  }
}

@media (max-width: 991px) {
  .marketplace-section {
    padding: 0 0 70px;
  }
}

@media (max-width: 768px) {
  .marketplace-section {
    padding: 0 0 40px;
  }

  .marketplace-container {
    padding-left: 33px;
    padding-right: 33px;
  }

  .marketplace-head {
    margin-bottom: 35px;
  }

  .marketplace-diagram {
    margin-bottom: 40px;
  }

  .marketplace-top-icons {
    width: 78%;
    gap: 16px;
  }

  .mp-top-icon {
    width: 36px;
    height: 36px;
  }

  .marketplace-curves {
    height: 160px;
    width: 100%;
    transform: scaleX(1.32);
    transform-origin: 50% 0;
  }

  .marketplace-center {
    width: 54px;
    height: 54px;
    bottom: -60px;
  }

  .marketplace-grid {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 85px;
  }

  .mp-card {
    padding: 14px 20px;
    font-size: 16px;
  }

  .mp-card-icon {
    width: 36px;
    height: 36px;
  }
}

@media (max-width: 480px) {
  .marketplace-container {
    padding-left: 30px;
    padding-right: 30px;
  }

  .marketplace-top-icons {
    width: 93%;
    gap: 14px;
  }

  .mp-top-icon {
    width: 30px;
    height: 30px;
  }

  .marketplace-curves {
    height: 130px;
    width: 100%;
    transform: scaleX(1.38);
    transform-origin: 50% 0;
  }

  .marketplace-center {
    width: 46px;
    height: 46px;
    bottom: -60px;
  }
}

@media (min-width: 1200px) {
  .marketplace-top-icons {
    width: 66%;
    gap: 10px;
  }
}

@media (min-width: 1500px) {
  .marketplace-top-icons {
    width: 67%;
    gap: 12px;
  }
}

/* ============================================
   CTA SECTION (above footer)
   ============================================ */
.cta-section {
  padding: 0;
  font-family: 'Inter', sans-serif;
}

.cta-section>.container,
.cta-section .container {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

.cta-inner {
  background-image: url('../image/cta-bg.png');
  background-size: auto 100%;
  background-position: 0 center;
  background-repeat: repeat-x;
  border-radius: 0;
  padding: 110px 30px;
  text-align: center;
  color: #fff;
  animation: cta-bg-scroll 40s linear infinite;
}

@keyframes cta-bg-scroll {
  from {
    background-position: 0 center;
  }

  to {
    background-position: -1000px center;
  }
}

.cta-title {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 38px;
  line-height: 1.25;
  color: #fff;
  max-width: 720px;
  margin: 0 auto 18px;
}

.cta-desc {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: #fff;
  max-width: 560px;
  margin: 0 auto 32px;
}

.cta-buttons {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}

.cta-btn {
  display: inline-block;
  padding: 14px 32px;
  border-radius: 15px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: all 0.25s ease;
  border: 1.5px solid #fff;
}

.cta-btn-outline {
  background: transparent;
  color: #fff;
}

.cta-btn-outline:hover {
  background: #fff;
  color: #FF4D00;
}

.cta-btn-solid {
  background: #fff;
  color: #FF4D00;
}

.cta-btn-solid:hover {
  background: transparent;
  color: #fff;
}

@media (max-width: 991px) {

  .cta-section>.container,
  .cta-section .container {
    padding-left: 0;
    padding-right: 0;
  }

  .cta-inner {
    padding: 100px 45px;
    border-radius: 0;
  }

  .cta-title {
    font-size: 30px;
  }
}

@media (max-width: 575px) {
  .cta-section {
    padding: 0;
  }

  .cta-section>.container,
  .cta-section .container {
    padding-left: 0;
    padding-right: 0;
  }

  .cta-inner {
    padding: 70px 28px;
    border-radius: 0;
  }

  .cta-title {
    font-size: 22px;
    margin-bottom: 14px;
  }

  .cta-desc {
    font-size: 14px;
    margin-bottom: 24px;
  }

  .cta-buttons {
    gap: 12px;
  }

  .cta-btn {
    padding: 12px 24px;
    font-size: 14px;
  }
}

/* Boxed variant (used on services page) */
.cta-section-boxed {
  padding: 0 0 70px;
}

.cta-section-boxed>.container,
.cta-section-boxed .container {
  max-width: 1480px;
  padding-left: 40px;
  padding-right: 40px;
}

.cta-section-boxed .cta-inner {
  border-radius: 28px;
  overflow: hidden;
}

@media (max-width: 991px) {
  .cta-section-boxed {
    padding: 0 0 40px;
  }

  .cta-section-boxed>.container,
  .cta-section-boxed .container {
    padding-left: 30px;
    padding-right: 30px;
  }

  .cta-section-boxed .cta-inner {
    border-radius: 24px;
    padding: 90px 40px;
  }
}

@media (max-width: 575px) {
  .cta-section-boxed {
    padding: 40px 0px;
  }

  .cta-section-boxed>.container,
  .cta-section-boxed .container {
    padding-left: 15px;
    padding-right: 15px;
  }

  .cta-section-boxed .cta-inner {
    border-radius: 20px;
    padding: 60px 24px;
  }
}

/* ============================================
   CONTACT SECTION
   ============================================ */
.contact-section {
  position: relative;
  padding: 70px 0;
  background-color: var(--tf-white-color);
  background-image: url(../image/contact-bg.png);
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: 600px auto;
  font-family: "Inter", sans-serif;
}

.contact-section .container {
  max-width: 1480px;
  margin: 0 auto;
  padding-left: 40px;
  padding-right: 40px;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: stretch;
}

.contact-image-col {
  width: 100%;
  position: relative;
  min-height: 100%;
  border-radius: 20px;
  overflow: hidden;
}

.contact-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  object-fit: cover;
  display: block;
}

.contact-form-col {
  background-color: var(--tf-peach-soft);
  border-radius: 20px;
  padding: 50px 45px;
  border: 1px solid #e4e4e4;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

.contact-label {
  display: inline-block;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--tf-primary-color);
  background-color: var(--tf-white-color);
  padding: 8px 18px;
  border: 1px solid var(--tf-primary-color);
  border-radius: 50rem;
  margin-bottom: 20px;
}

.contact-title {
  font-family: "Inter", sans-serif;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.25em;
  color: var(--tf-dark-color);
  margin-bottom: 30px;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.contact-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.contact-input {
  width: 100%;
  background-color: var(--tf-white-color);
  border: 1px solid #E4E4E4;
  border-radius: 10px;
  padding: 16px 20px;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  color: var(--tf-dark-color);
  outline: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.contact-input::placeholder {
  color: #9a9a9a;
}

.contact-input:focus {
  border-color: var(--tf-primary-color);
}

.contact-textarea {
  min-height: 160px;
  resize: vertical;
  font-family: "Inter", sans-serif;
}

.contact-submit {
  align-self: flex-start;
  border-radius: 15px !important;
  padding: 14px 32px;
  font-size: 15px;
  font-weight: 600;
  margin-top: 8px;
  cursor: pointer;
}

/* Responsive */
@media (max-width: 991px) {
  .contact-section {
    padding: 90px 0;
    background-size: 400px auto;
  }

  .contact-section .container {
    padding-left: 50px;
    padding-right: 50px;
  }

  .contact-grid {
    gap: 28px;
  }

  .contact-form-col {
    padding: 32px 24px;
  }

  .contact-title {
    font-size: 28px;
  }
}

@media (max-width: 767px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .contact-image-col {
    position: static;
    min-height: 0;
  }

  .contact-image {
    position: static;
    height: auto;
  }
}

@media (max-width: 575px) {
  .contact-section {
    padding: 40px 0;
    background-size: 300px auto;
  }

  .contact-section .container {
    padding-left: 40px;
    padding-right: 40px;
  }

  .contact-form-col {
    padding: 28px 20px;
    border-radius: 16px;
  }

  .contact-row {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .contact-input {
    padding: 14px 16px;
    font-size: 14px;
  }

  .contact-title {
    font-size: 24px;
    margin-bottom: 22px;
  }

  .contact-submit {
    width: 100%;
    text-align: center;
  }
}

/* ============================================
   HAPPY CLIENTS SECTION
   ============================================ */
.happy-clients-section {
  position: relative;
  background: #ffffff;
  padding: 0;
  /* runway = sticky height + 2 extra slide transitions */
  height: 195vh;
}

.hc-sticky {
  position: sticky;
  top: 0;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0px 30px 0px 30px;
  box-sizing: border-box;
  overflow: visible;
}

.hc-inner {
  max-width: 1630px;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

.hc-head {
  max-width: 920px;
  margin: 0 auto;
}

.hc-badge {
  display: inline-block;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--tf-orange-color, #F26B1F);
  padding: 8px 18px;
  border: 1px solid var(--tf-orange-color, #F26B1F);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
  margin-bottom: 22px;
}

.hc-title {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: clamp(26px, 3.4vw, 42px);
  line-height: 1.2;
  letter-spacing: -0.5px;
  color: var(--tf-dark-color, #111);
  margin: 0 0 16px;
}

.hc-text {
  font-family: "Inter", sans-serif;
  font-size: 17px;
  line-height: 28px;
  color: var(--tf-muted-color, #5b6470);
  margin: 0 auto;
  max-width: 560px;
}

.hc-slides {
  position: relative;
  margin: 40px auto 0;
  max-width: 900px;
  min-height: 220px;
}

.hc-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  pointer-events: none;
}

.hc-slide.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.hc-counter {
  position: relative;
  z-index: 1;
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: clamp(80px, 12vw, 170px);
  line-height: 1;
  color: var(--hc-accent, #F26B1F);
  letter-spacing: -2px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.hc-count {
  display: inline-block;
  min-width: 0.6em;
}

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

.hc-caption {
  position: relative;
  z-index: 1;
  margin: 24px auto 0;
  font-family: "Inter", sans-serif;
  font-size: 17px;
  line-height: 28px;
  color: var(--tf-dark-color, #111);
  max-width: 520px;
}

/* ============================================
   BUSINESSES WE'VE HELPED SECTION
   ============================================ */
.businesses-section {
  position: relative;
  background: #ffffff;
}

.bw-head {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 50px;
  text-align: center;
}

.bw-badge {
  display: inline-block;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 1.5px;
  color: var(--tf-orange-color, #F26B1F);
  padding: 8px 20px;
  border: 1px solid var(--tf-orange-color, #F26B1F);
  border-radius: 999px;
  background: #fff;
  margin-bottom: 22px;
}

.bw-title {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: clamp(26px, 3.2vw, 42px);
  line-height: 1.2;
  letter-spacing: -0.5px;
  color: var(--tf-dark-color, #111);
  margin: 0 0 16px;
}

.bw-text {
  font-family: "Inter", sans-serif;
  font-size: 17px;
  line-height: 28px;
  color: var(--tf-muted-color, #5b6470);
  margin: 0 auto;
  max-width: 720px;
}

/* Full-width horizontal divider lines */
.bw-divider {
  width: 100%;
  height: 1px;
  background: rgba(242, 107, 31, 0.18);
  margin: 50px 0 0;
}

/* Full-width logo marquee */
.bw-marquee {
  width: auto;
  margin: 0 50px;
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
}

.bw-track {
  display: flex;
  align-items: center;
  gap: 100px;
  width: max-content;
  animation: bw-scroll 35s linear infinite;
}

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

.bw-logo {
  flex: 0 0 auto;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
}

.bw-logo img {
  max-height: 100%;
  max-width: 220px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

@keyframes bw-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* ============================================
   ALL-ROUNDER SOLUTIONS SECTION
   ============================================ */
.solutions-section {
  position: relative;
  background: #ffffff;
  padding: 80px 0 70px;
}

.sol-inner {
  max-width: 1480px;
  margin: 0 auto;
  padding: 0px 40px;
}

.sol-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: 40px;
  margin-bottom: 20px;
}

.sol-head-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.sol-badge {
  display: inline-block;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 1.5px;
  color: var(--tf-orange-color, #F26B1F);
  padding: 8px 20px;
  border: 1px solid var(--tf-orange-color, #F26B1F);
  border-radius: 999px;
  background: #fff;
  margin-bottom: 22px;
  text-align: center;
}

.sol-title {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 46px);
  line-height: 1.15;
  letter-spacing: -1px;
  color: var(--tf-dark-color, #111);
  margin: 0;
}

.sol-head-right {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  line-height: 26px;
  color: var(--tf-muted-color, #5b6470);
  margin: 0;
  text-align: left;
  max-width: 420px;
  justify-self: end;
}

.sol-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  margin-bottom: 70px;
}

.sol-card {
  position: relative;
  padding-top: 28px;
}

.sol-card-line {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--tf-orange-color, #F26B1F);
  border-radius: 2px;
}

.sol-icon {
  width: 72px;
  height: 72px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 12px 28px rgba(17, 24, 39, 0.08), 0 2px 6px rgba(17, 24, 39, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 24px 0 24px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.sol-icon img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  display: block;
}

.sol-icon-border {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
}

.sol-icon-border rect {
  x: 0;
  y: 0;
  width: 100%;
  height: 100%;
  rx: 16px;
  ry: 16px;
  fill: none;
  stroke: var(--tf-primary-color);
  stroke-width: 2;
  stroke-dasharray: 22 78;
  stroke-dashoffset: 0;
  animation: heroCtaDash 3s linear infinite;
}

.sol-card-title {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.3;
  color: var(--tf-dark-color, #111);
  margin: 0 0 12px;
}

.sol-card-text {
  font-family: "Inter", sans-serif;
  font-size: 15px;
  line-height: 24px;
  color: var(--tf-muted-color, #5b6470);
  margin: 0;
  max-width: 240px;
}

.sol-hero-scrub {
  position: relative;
  width: 100%;
  height: auto;
}

.sol-hero-sticky {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
}

.sol-hero {
  position: relative;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  background: transparent;
}

.sol-hero-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 24px;
  overflow: hidden;
  background: transparent;
  box-shadow:
    0 30px 60px -20px rgba(15, 23, 42, 0.35),
    0 18px 40px -18px rgba(15, 23, 42, 0.25);
}

.sol-hero-face img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 24px;
}

/* ============================================
   AWARDS / RECOGNITION SECTION
   ============================================ */
.awards-section {
  position: relative;
  background: #ffffff;
  padding: 0;
}

.awards-section .bw-divider {
  margin: 0;
}

.awards-section .bw-divider:first-child {
  margin: 0 0 30px !important;
}

.bw-divider.margin-bottom-50 {
  margin-bottom: 50px !important;
}

.awards-section>.container {
  max-width: 1480px;
  padding-left: 40px;
  padding-right: 40px;
  margin-left: auto;
  margin-right: auto;
}

.aw-marquee {
  padding: 0 0 30px;
}

.aw-track {
  gap: 140px;
  animation-duration: 40s;
}

.aw-track .bw-logo {
  height: 110px;
  padding: 0 24px;
}

.aw-track .bw-logo img {
  max-height: 100%;
  max-width: 280px;
}

/* ============================================
   SERVICES PAGE — Hero / Page Title
   Background image + grid + gradient bubbles
   Extends behind the fixed header
   ============================================ */
.services-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 200px 0 70px;
  background: radial-gradient(120% 80% at 50% 0%, #fff6ef 0%, #ffffff 55%, #fafafa 100%);
}

.services-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 220px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #ffffff 85%);
  pointer-events: none;
  z-index: 0;
}

.sv-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(20, 20, 20, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(20, 20, 20, 0.06) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 55%, transparent 95%);
  mask-image: radial-gradient(ellipse at center, #000 55%, transparent 95%);
  pointer-events: none;
  z-index: -1;
}

.sv-bubble {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.75;
  pointer-events: none;
  z-index: -1;
  animation: svFloat 10s ease-in-out infinite;
}

.sv-bubble-1 {
  width: 520px;
  height: 520px;
  top: -160px;
  left: -140px;
  background: radial-gradient(circle, rgba(242, 107, 58, 0.45), rgba(242, 107, 58, 0) 70%);
}

.sv-bubble-2 {
  width: 420px;
  height: 420px;
  top: -80px;
  right: -120px;
  background: radial-gradient(circle, rgba(255, 180, 140, 0.45), rgba(255, 180, 140, 0) 70%);
  animation-delay: -3s;
}

.sv-bubble-3 {
  width: 360px;
  height: 360px;
  bottom: -140px;
  left: 20%;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.18), rgba(168, 85, 247, 0) 70%);
  animation-delay: -6s;
}

.sv-bubble-4 {
  width: 300px;
  height: 300px;
  bottom: -120px;
  right: 10%;
  background: radial-gradient(circle, rgba(34, 197, 94, 0.16), rgba(34, 197, 94, 0) 70%);
  animation-delay: -1.5s;
}

@keyframes svFloat {

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

  50% {
    transform: translate(20px, -25px);
  }
}

.sv-hero-inner {
  position: relative;
  z-index: 1;
  text-align: center;
}

.sv-breadcrumb {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--tf-muted-color);
  margin-bottom: 14px;
}

.sv-breadcrumb a {
  color: var(--tf-muted-color);
  transition: color .25s;
}

.sv-breadcrumb a:hover {
  color: var(--tf-primary-color);
}

.sv-breadcrumb i {
  font-size: 11px;
  color: var(--tf-muted-color);
}

.sv-breadcrumb span {
  color: var(--tf-primary-color);
  font-weight: 600;
}

.sv-badge {
  display: inline-block;
  padding: 8px 20px;
  border: 1px solid var(--tf-primary-color);
  border-radius: 50rem;
  color: var(--tf-primary-color);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(6px);
  margin: 6px 0 22px;
}

.sv-title {
  font-size: 68px;
  line-height: 1.1;
  font-weight: 700;
  color: var(--tf-dark-color);
  letter-spacing: -1px;
  margin: 0 0 22px;
}

.sv-title-accent {
  color: var(--tf-primary-color);
}

.sv-text {
  max-width: 640px;
  margin: 0 auto;
  color: var(--tf-muted-color);
  font-size: 16px;
  line-height: 1.7;
}

@media (max-width: 1024px) {
  .services-hero {
    padding: 170px 0 60px;
  }

  .sv-title {
    font-size: 52px;
  }

  .sv-bubble-1 {
    width: 380px;
    height: 380px;
  }

  .sv-bubble-2 {
    width: 320px;
    height: 320px;
  }
}

@media (max-width: 768px) {
  .services-hero {
    padding: 150px 0 50px;
  }

  .sv-title {
    font-size: 38px;
    letter-spacing: -0.5px;
  }

  .sv-text {
    font-size: 14px;
  }

  .sv-grid {
    background-size: 44px 44px;
  }

  .sv-bubble {
    filter: blur(55px);
  }

  .sv-bubble-1 {
    width: 280px;
    height: 280px;
    top: -100px;
    left: -100px;
  }

  .sv-bubble-2 {
    width: 260px;
    height: 260px;
    top: -60px;
    right: -90px;
  }

  .sv-bubble-3 {
    width: 240px;
    height: 240px;
  }

  .sv-bubble-4 {
    width: 200px;
    height: 200px;
  }

  .bw-divider.margin-bottom-50 {
    margin-bottom: 32px !important;
  }
}

@media (max-width: 480px) {
  .services-hero {
    padding: 130px 0 40px;
  }

  .sv-title {
    font-size: 30px;
  }

  .sv-badge {
    font-size: 12px;
    padding: 7px 16px;
    letter-spacing: 1.2px;
  }

  .sv-hero-inner {
    padding-left: 15px;
    padding-right: 15px;
  }
}

/* ============================================
   SERVICES — Products Grid w/ Tab Filter
   ============================================ */
.sv-products {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 0 0 70px;
  background: #ffffff;
}

.sv-products-inner {
  position: relative;
  z-index: 1;
  padding-left: 0;
  padding-right: 0;
}

.sv-products>.container,
.sv-products .container {
  max-width: 1480px;
  padding-left: 40px;
  padding-right: 40px;
}

/* gradient bubbles */
.sv-pb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.7;
  pointer-events: none;
  z-index: 0;
  animation: svFloat 12s ease-in-out infinite;
}

.sv-pb-1 {
  width: 520px;
  height: 520px;
  top: 20%;
  left: -200px;
  background: radial-gradient(circle, rgba(242, 107, 58, 0.35), rgba(242, 107, 58, 0) 70%);
}

.sv-pb-2 {
  width: 420px;
  height: 420px;
  top: 45%;
  right: -180px;
  background: radial-gradient(circle, rgba(255, 180, 140, 0.40), rgba(255, 180, 140, 0) 70%);
  animation-delay: -3s;
}

.sv-pb-3 {
  width: 380px;
  height: 380px;
  bottom: 5%;
  left: -120px;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.18), rgba(168, 85, 247, 0) 70%);
  animation-delay: -6s;
}

.sv-pb-4 {
  width: 340px;
  height: 340px;
  bottom: -120px;
  right: 10%;
  background: radial-gradient(circle, rgba(34, 197, 94, 0.16), rgba(34, 197, 94, 0) 70%);
  animation-delay: -1.5s;
}

/* Tabs */
.sv-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 50px;
}

.sv-tab {
  border: 1px solid rgba(20, 20, 20, 0.12);
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(6px);
  color: var(--tf-dark-color);
  padding: 10px 22px;
  border-radius: 50rem;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all .3s cubic-bezier(.2, .8, .2, 1);
}

.sv-tab:hover {
  border-color: var(--tf-primary-color);
  color: var(--tf-primary-color);
  box-shadow: 0 6px 18px -8px rgba(242, 107, 58, 0.45);
}

.sv-tab.is-active {
  border-color: var(--tf-primary-color);
  color: var(--tf-primary-color);
  background: rgba(255, 237, 225, 0.9);
  box-shadow: 0 6px 18px -8px rgba(242, 107, 58, 0.5);
}

/* Cards grid */
.sv-grid-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.sv-card {
  position: relative;
  background: #ffffff;
  border: 1px solid rgba(242, 107, 58, 0.22);
  border-radius: 20px;
  padding: 28px 30px 28px;
  min-height: 360px;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  transition: transform .45s cubic-bezier(.2, .8, .2, 1),
    box-shadow .45s ease,
    border-color .45s ease;
  animation: svCardIn .7s cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes svCardIn {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.98);
  }

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

.sv-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(242, 107, 58, 0.06), rgba(168, 85, 247, 0.05));
  opacity: 0;
  transition: opacity .45s ease;
  z-index: -1;
}

.sv-card:hover {
  transform: translateY(-8px);
  border-color: rgba(242, 107, 58, 0.55);
  box-shadow: 0 24px 50px -22px rgba(242, 107, 58, 0.35);
}

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

.sv-card:hover .sv-icon {
  transform: scale(1.08) rotate(-4deg);
}

.sv-card:hover .sv-arrow {
  background: var(--tf-primary-color);
  border-color: var(--tf-primary-color);
}

.sv-card:hover .sv-watermark {
  opacity: 0.10;
  transform: translate(-6px, 4px);
}

.sv-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.sv-num {
  font-size: 15px;
  font-weight: 500;
  color: #8a8a8a;
  letter-spacing: 0.5px;
}

.sv-watermark {
  position: absolute;
  top: -34px;
  right: -8px;
  font-size: 170px;
  font-weight: 700;
  line-height: 1;
  color: rgba(20, 20, 20, 0.06);
  letter-spacing: -6px;
  pointer-events: none;
  transition: opacity .45s ease, transform .45s ease;
  z-index: 0;
  font-family: var(--font-primary);
}

.sv-pill {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.3px;
  padding: 6px 14px;
  border-radius: 50rem;
  display: inline-block;
  position: relative;
  z-index: 1;
}

/* pill color variants */
.sv-pill-customer {
  background: #ffe6dc;
  color: #f26b3a;
}

.sv-pill-customer-2 {
  background: #fde2ea;
  color: #e74c8a;
}

.sv-pill-customer-3 {
  background: #d6f5ef;
  color: #15a085;
}

.sv-pill-customer-4 {
  background: #ece1ff;
  color: #8b5cf6;
}

.sv-pill-management {
  background: #d8f5e2;
  color: #16a34a;
}

.sv-pill-management-2 {
  background: #ffd9df;
  color: #ef4444;
}

.sv-pill-operations {
  background: #dceaff;
  color: #2563eb;
}

.sv-pill-operations-2 {
  background: #f4dcff;
  color: #a855f7;
}

.sv-pill-operations-3 {
  background: #d6f5ef;
  color: #14b8a6;
}

.sv-pill-operations-4 {
  background: #dceaff;
  color: #2563eb;
}

.sv-pill-operations-5 {
  background: #ffd9df;
  color: #ef4444;
}

.sv-pill-delivery {
  background: #d6f5e6;
  color: #10b981;
}

.sv-pill-platform {
  background: #e6f5cc;
  color: #84cc16;
}

.sv-pill-platform-2 {
  background: #ece1ff;
  color: #8b5cf6;
}

.sv-pill-platform-3 {
  background: #dfd5ff;
  color: #6366f1;
}

.sv-pill-platform-4 {
  background: #d4edff;
  color: #3b82f6;
}

.sv-pill-hardware {
  background: #f3f5cc;
  color: #a3a635;
}

/* icon */
.sv-icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 22px;
  margin: 18px 0 60px;
  transition: transform .5s cubic-bezier(.2, .8, .2, 1);
  position: relative;
  z-index: 1;
}

.sv-icon-customer {
  background: #ffe6dc;
  color: #f26b3a;
}

.sv-icon-customer-2 {
  background: #fde2ea;
  color: #e74c8a;
}

.sv-icon-customer-3 {
  background: #d6f5ef;
  color: #15a085;
}

.sv-icon-customer-4 {
  background: #ece1ff;
  color: #8b5cf6;
}

.sv-icon-management {
  background: #d8f5e2;
  color: #16a34a;
}

.sv-icon-management-2 {
  background: #ffd9df;
  color: #ef4444;
}

.sv-icon-operations {
  background: #dceaff;
  color: #2563eb;
}

.sv-icon-operations-2 {
  background: #f4dcff;
  color: #a855f7;
}

.sv-icon-operations-3 {
  background: #d6f5ef;
  color: #14b8a6;
}

.sv-icon-operations-4 {
  background: #dceaff;
  color: #2563eb;
}

.sv-icon-operations-5 {
  background: #ffd9df;
  color: #ef4444;
}

.sv-icon-delivery {
  background: #d6f5e6;
  color: #10b981;
}

.sv-icon-platform {
  background: #e6f5cc;
  color: #84cc16;
}

.sv-icon-platform-2 {
  background: #ece1ff;
  color: #8b5cf6;
}

.sv-icon-platform-3 {
  background: #dfd5ff;
  color: #6366f1;
}

.sv-icon-platform-4 {
  background: #d4edff;
  color: #3b82f6;
}

.sv-icon-hardware {
  background: #f3f5cc;
  color: #a3a635;
}

/* When .sv-icon contains a product image, show the image (with its own background) instead of the colored circle */
.sv-icon:has(> img) {
  width: 72px;
  height: 72px;
  border-radius: 14px;
  background: transparent !important;
  overflow: hidden;
}

.sv-icon>img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.sv-card-title {
  font-size: 19px;
  font-weight: 700;
  color: var(--tf-dark-color);
  margin: 0 0 12px;
  position: relative;
  z-index: 1;
}

.sv-card-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s ease;
}

.sv-card-title a:hover {
  color: var(--tf-primary-color, #FF4D00);
}

.sv-card-text {
  font-size: 14px;
  line-height: 1.65;
  color: #555;
  margin: 0;
  position: relative;
  z-index: 1;
}

.sv-arrow {
  position: relative;
  margin-top: 20px;
  align-self: flex-end;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(242, 107, 58, 0.35);
  background: #fff;
  color: #8a8a8a;
  font-size: 12px;
  transition: all .35s cubic-bezier(.2, .8, .2, 1);
  z-index: 2;
}

.sv-arrow-icon {
  width: 18px;
  height: 18px;
  display: block;
  background-color: #9a9a9a;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'><path d='M6.16718 17.8337L17.3041 6.6968M17.8344 14.6517V6.16647H9.34916' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'><path d='M6.16718 17.8337L17.3041 6.6968M17.8344 14.6517V6.16647H9.34916' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  transition: background-color .35s ease;
}

.sv-card:hover .sv-arrow {
  background: var(--tf-primary-color);
  border-color: var(--tf-primary-color);
}

.sv-card:hover .sv-arrow-icon {
  background-color: #ffffff;
}

/* hide animation when filtered out */
.sv-card.is-hidden {
  display: none;
}

.sv-card.is-revealing {
  animation: svCardIn .55s cubic-bezier(.2, .8, .2, 1) both;
}

@media (max-width: 1024px) {
  .sv-grid-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .sv-products {
    padding: 0 0 90px;
  }

  .sv-card {
    padding: 26px 26px 26px;
    min-height: 0;
  }
}

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

  .sv-products>.container,
  .sv-products .container {
    padding-left: 30px;
    padding-right: 30px;
    max-width: 100%;
  }

  .sv-products-inner {
    padding-left: 0;
    padding-right: 0;
  }
}

@media (max-width: 768px) {
  .sv-grid-cards {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .sv-products>.container,
  .sv-products .container {
    padding: 0;
  }

  .sv-products {
    padding: 0 40px;
  }

  .sv-pb {
    filter: blur(60px);
  }

  .sv-pb-1 {
    width: 280px;
    height: 280px;
  }

  .sv-pb-2 {
    width: 260px;
    height: 260px;
  }

  .sv-pb-3 {
    width: 240px;
    height: 240px;
  }

  .sv-pb-4 {
    width: 220px;
    height: 220px;
  }

  .sv-tabs {
    gap: 8px;
    margin-bottom: 36px;
  }

  .sv-tab {
    padding: 9px 16px;
    font-size: 13px;
  }

  .sv-card {
    padding: 22px 22px 22px;
    min-height: 0;
  }

  .sv-icon {
    margin: 16px 0 22px;
  }

  .sv-watermark {
    font-size: 110px;
    top: -22px;
    right: -4px;
    letter-spacing: -4px;
  }

  .sv-arrow {
    width: 36px;
    height: 36px;
    margin-top: 16px;
  }
}

@media (max-width: 480px) {
  .sv-products-inner {
    padding-left: 33px;
    padding-right: 33px;
  }

  .sv-watermark {
    font-size: 92px;
    top: -18px;
  }
}

/* ============================================
   SERVICE DETAIL — Key Features Hero
   Extends behind the fixed header (like services-hero)
   ============================================ */
.sd-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 150px 0 60px;
}

.sd-hero-inner {
  position: relative;
  z-index: 1;
}

.sd-hero .container {
  max-width: 1480px;
  padding: 0 40px;
}

.sd-badge {
  display: inline-block;
  padding: 8px 20px;
  border: 1px solid var(--tf-primary-color);
  border-radius: 50rem;
  color: var(--tf-primary-color);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(6px);
  margin-bottom: 22px;
}

.sd-title {
  font-size: 64px;
  line-height: 1.1;
  font-weight: 700;
  color: var(--tf-dark-color);
  letter-spacing: -1px;
  margin: 0 0 22px;
}

.sd-desc {
  max-width: 520px;
  color: var(--tf-muted-color);
  font-size: 16px;
  line-height: 1.7;
  margin: 0 0 32px;
}

.sd-cta-outline {
  display: inline-block;
  padding: 14px 32px;
  border: 1.5px solid var(--tf-primary-color);
  color: var(--tf-primary-color);
  border-radius: 50rem;
  font-weight: 600;
  text-decoration: none;
  transition: all .3s ease;
}

.sd-cta-outline:hover {
  background: var(--tf-primary-color);
  color: #fff;
}

.sd-hero-media {
  position: relative;
}

.sd-hero-image-wrap {
  position: relative;
  display: inline-block;
  width: 100%;
}

.sd-hero-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
}

.sd-float {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 14px 40px rgba(20, 20, 40, 0.12);
  z-index: 2;
}

.sd-float i {
  color: var(--tf-primary-color);
  background: rgba(242, 107, 58, 0.12);
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: 14px;
}

.sd-float div {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.sd-float strong {
  font-size: 16px;
  color: var(--tf-dark-color);
  font-weight: 700;
}

.sd-float span {
  font-size: 11px;
  color: var(--tf-muted-color);
  margin-top: 3px;
}

.sd-float-top {
  top: -18px;
  right: -10px;
  animation: sdFloatA 4s ease-in-out infinite;
}

.sd-float-bottom {
  bottom: -24px;
  left: -10px;
  animation: sdFloatB 5s ease-in-out infinite;
}

@keyframes sdFloatA {

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

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

@keyframes sdFloatB {

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

  50% {
    transform: translateY(10px);
  }
}

@media (max-width: 1024px) {

  /*.sd-hero { padding: 170px 0 170px; }*/
  .sd-title {
    font-size: 48px;
  }

  .sd-hero .sd-hero-text,
  .sd-hero .sd-hero-media {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
  }
}

@media (max-width: 768px) {
  .sd-hero {
    padding: 130px 0 80px;
    text-align: center;
  }

  .sd-title {
    font-size: 36px;
    letter-spacing: -0.5px;
  }

  .sd-desc {
    margin-left: auto;
    margin-right: auto;
  }

  .sd-float-top {
    right: 0;
  }

  .sd-float-bottom {
    left: 0;
  }
}

@media (max-width: 480px) {

  .sd-title {
    font-size: 30px;
  }

  .sd-float {
    padding: 10px 14px;
  }

  .sd-float strong {
    font-size: 14px;
  }
}

/* ============================================
   SERVICE DETAIL — SECTION DOTS NAV
   ============================================ */
.sd-dots {
  position: fixed;
  top: 50%;
  right: 30px;
  transform: translate(50%, -50%);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
}

body.no-scroll .sd-dots,
.offcanvas-menu.open~main .sd-dots {
  display: none !important;
}

.sd-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: rgba(255, 77, 0, 0.35);
  display: block;
  transition: all 0.3s ease;
  cursor: pointer;
  border: 2px solid transparent;
}

.sd-dot:hover {
  background-color: rgba(255, 77, 0, 0.7);
}

.sd-dot.active {
  width: 16px;
  height: 16px;
  background-color: #FF4D00;
  box-shadow: 0 0 0 4px rgba(255, 77, 0, 0.15);
}

@media (max-width: 768px) {
  .sd-dots {
    display: none;
  }
}

/* ============================================
   SERVICE DETAIL - PLATFORM CAPABILITIES
   ============================================ */
body {
  background-color: #ffffff;
  transition: background-color 1.6s ease;
}

body.is-cap-bg {
  background-color: #FFF7F4;
}

body.is-cap-bg .sd-hero {
  background-color: #FFF7F4;
}

body.is-cap-bg .sd-hero::before {
  opacity: 0;
}

.sd-hero {
  transition: background-color 1.6s ease;
  background-color: #ffffff;
}

.sd-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 80% at 50% 0%, #fff6ef 0%, #ffffff 55%, #fafafa 100%);
  z-index: -1;
  transition: opacity 1.6s ease;
}

.sd-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 220px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
  pointer-events: none;
  z-index: 0;
  transition: opacity 1.6s ease;
}

body.is-cap-bg .sd-hero::after {
  opacity: 0;
}

.sd-capabilities {
  position: relative;
  padding: 70px 0 0;
  background: transparent;
}

.sd-capabilities .container {
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 40px;
}

.sd-cap-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 40px;
}

.sd-cap-title {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 4vw, 44px);
  color: #111;
  margin: 0spx 0 14px;
  line-height: 1.2;
}

.sd-cap-desc {
  color: #5b5b5b;
  font-size: 16px;
  line-height: 1.65;
  margin: 0;
}

.sd-cap-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.sd-cap-card {
  position: relative;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 18px;
  padding: 32px 28px;
  overflow: hidden;
  transition: transform 0.45s cubic-bezier(.2, .7, .2, 1),
    box-shadow 0.45s ease,
    border-color 0.45s ease,
    background 0.45s ease;
}

.sd-cap-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 77, 0, 0.10), rgba(255, 77, 0, 0) 60%);
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
}

.sd-cap-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, #FF4D00, #ff8a3d);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s cubic-bezier(.2, .7, .2, 1);
}

.sd-cap-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px -20px rgba(255, 77, 0, 0.35);
  border-color: rgba(255, 77, 0, 0.35);
}

.sd-cap-card:hover::before {
  opacity: 1;
}

.sd-cap-card:hover::after {
  transform: scaleX(1);
}

.sd-cap-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: #FFEADD;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  transition: transform 0.5s cubic-bezier(.2, .7, .2, 1), background 0.45s ease;
}

.sd-cap-icon img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  transition: transform 0.6s ease;
}

.sd-cap-card:hover .sd-cap-icon {
  transform: rotate(-6deg) scale(1.08);
  background: #ffd9c2;
}

.sd-cap-card:hover .sd-cap-icon img {
  transform: rotate(360deg);
}

.sd-cap-card h3 {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: #111;
  margin: 0 0 10px;
  position: relative;
  z-index: 1;
}

.sd-cap-card p {
  font-size: 14.5px;
  line-height: 1.65;
  color: #6a6a6a;
  margin: 0;
  position: relative;
  z-index: 1;
}

@media (max-width: 992px) {
  .sd-cap-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .sd-capabilities .container {
    padding: 0 50px;
  }
}

@media (max-width: 600px) {
  .sd-capabilities {
    padding: 0 15px;
  }

  .sd-capabilities .container {
    padding: 0;
  }

  .sd-cap-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .sd-cap-card {
    padding: 26px 22px;
  }
}

/* ============================================
   SERVICE DETAIL - FEATURE HIGHLIGHTS
   ============================================ */

/* CTA */
body.is-cta-bg {
  background: #ffffff;
  /* apna color change kar sakte ho */
}

body.is-cta-bg .faq-section {
  background: #ffffff;
}

body.is-feat-bg {
  background-color: #F5FCFF;
}

body.is-feat-bg .sd-capabilities {
  background-color: #F5FCFF;
}

.sd-capabilities {
  transition: background-color 1.6s ease;
}

.sd-features {
  position: relative;
  padding: 70px 0 0;
  background: transparent;
}

.sd-features .container {
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 40px;
}

.sd-feat-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 70px;
  margin-bottom: 90px;
}

.sd-feat-row:last-child {
  margin-bottom: 0;
}

.sd-feat-row-reverse .sd-feat-media {
  order: 2;
}

.sd-feat-row-reverse .sd-feat-text {
  order: 1;
}

.sd-feat-media {
  border-radius: 20px;
  padding: 5px;
  border: 1px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, #FF8A3D, #FF5E1A, #FFB37A) border-box;
  box-shadow: 0 20px 50px -30px rgba(0, 0, 0, 0.25);
  transition: transform 0.5s cubic-bezier(.2, .7, .2, 1), box-shadow 0.5s ease;
}

.sd-feat-media:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -25px rgba(0, 90, 150, 0.30);
}

.sd-feat-media img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  border-radius: 14px;
}

.sd-feat-text .sd-badge {
  margin-bottom: 18px;
}

.sd-feat-text h3 {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: clamp(26px, 3vw, 36px);
  color: #111;
  margin: 0 0 16px;
  line-height: 1.2;
}

.sd-feat-text p {
  color: #5b5b5b;
  font-size: 16px;
  line-height: 1.7;
  margin: 0 0 22px;
}

.sd-feat-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sd-feat-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #1a1a1a;
  font-weight: 500;
  font-size: 15.5px;
}

.sd-feat-list i {
  color: #FF4D00;
  font-size: 18px;
}


.sd-onboard-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.sd-onboard-card {
  position: relative;
  padding: 56px 22px 28px;
  border: 1px solid #ffd9c9;
  border-radius: 24px;
  background: #fff;
  overflow: hidden;
  transition: all .4s ease;
}

/* Bottom animated line */
.sd-onboard-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, #FF4D00, #ff8a3d);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s cubic-bezier(.2, .7, .2, 1);
}

/* Optional glow border */
.sd-onboard-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 24px;
  border: 1px solid transparent;
  transition: all .4s ease;
  pointer-events: none;
}

/* Hover */
.sd-onboard-card:hover {
  background: linear-gradient(135deg,
      rgba(255, 77, 0, 0.10),
      rgba(255, 77, 0, 0) 60%);
  border-color: rgba(255, 77, 0, .35);
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(255, 77, 0, .12);
}

.sd-onboard-card:hover::after {
  transform: scaleX(1);
}

.sd-onboard-card:hover::before {
  border-color: rgba(255, 77, 0, .4);
}

/* Content color animation */
.sd-onboard-card h3,
.sd-onboard-card p,
.sd-icon {
  transition: all .4s ease;
}



.sd-onboard-card:hover .sd-icon {
  color: #FF4D00;
  transform: scale(1.08);
}

.sd-onboard-card:hover .sd-icon-ring {
  border-color: #FF4D00;
  animation-duration: 3s;
}

.sd-step-tag {
  position: absolute;
  top: 18px;
  right: 18px;
  font-size: 12px;
  font-weight: 600;
  color: #ff6b2c;
  background: #fff4ef;
  padding: 6px 10px;
  border-radius: 20px;
}

.sd-icon-wrap {
  position: relative;
  width: 52px;
  height: 52px;
  margin-bottom: 20px;

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

  background: rgba(255, 77, 0, 0.10);
  /* FF4D00 at 10% opacity */
  border-radius: 50%;
}

.sd-icon {
  width: 22px;
  height: 22px;
  color: #FF4D00;
  z-index: 2;
}


.sd-icon-ring {
  position: absolute;
  inset: -5px;
  /* gap outside */
  border: 2px dashed #FF4D00;
  border-radius: 50%;
  animation: sdRotate 8s linear infinite;
}

.sd-icon {
  width: 22px;
  height: 22px;
  color: #ff6b2c;
  z-index: 2;
}

.sd-onboard-card h3 {
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 700;
  color: #222;
}

.sd-onboard-card p {
  margin: 0;
  line-height: 1.7;
  color: #555;
  font-size: 20px
}

.howwork-video {
  width: 100%;
  border-radius: 24px;
  overflow: hidden;
  aspect-ratio: 16/9;
}

.howwork-video iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

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

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

.mobile-slider {
  padding: 50px 0 0;
}

.mobile-slider .owl-stage-outer {
  overflow: hidden !important;
}

.mobile-slider .owl-item {
  position: relative !important;
  z-index: 1 !important;
}

.mobile-slider .owl-item.center {
  position: relative !important;
  z-index: 10 !important;
}

.mobile-slider .item {
  transition: all .5s ease;
  transform: scale(.82);
  opacity: .25;
  filter: blur(6px);
}

.mobile-slider .item img {
  max-height: 480px !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 auto;
  border-radius: 12px;
  display: block;
}

/* Center Slide */
.mobile-slider .owl-item.center .item {
  transform: scale(1);
  opacity: 1;
  filter: blur(0);
}

/* Side Slides */
.mobile-slider .owl-item.active:not(.center) .item {
  opacity: .35;
  filter: blur(5px);
}

.owl-dots {
  display: block !important;
  text-align: center;
  margin-top: 20px !important;
}

.owl-dot {
  display: inline-block !important;
}

.owl-dot span {
  width: 10px !important;
  height: 10px !important;
  margin: 5px !important;
  background: #d8d8d8 !important;
  border-radius: 50px !important;
  display: block !important;
}

.owl-dot.active span {
  width: 30px !important;
  background: #ff5b00 !important;
}

.faq-desc {
  font-size: 15px;
  color: #888;
  line-height: 1.7;
  font-weight: 300;
  margin-bottom: 52px;
  max-width: 460px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s 0.25s ease, transform 0.6s 0.25s ease;
}

.faq-desc.in {
  opacity: 1;
  transform: none;
}

.faq-divider {
  width: 100%;
  height: 1px;
  background: #F0EDE8;
}

.faq-item {
  border-bottom: 1px solid #f26b3a5e;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.faq-item.in {
  opacity: 1;
  transform: none;
}

.faq-btn {
  width: 100%;
  background: none;
  border: none;
  padding: 26px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  cursor: pointer;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}

.faq-btn:hover .faq-btn-q {
  color: #F26522;
}

.faq-btn-q {
  font-family: 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 500;
  color: #222;
  line-height: 1.45;
  transition: color 0.22s;
}

.faq-item.open .faq-btn-q {
  color: #F26522;
}

.faq-toggle {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  position: relative;
}

.faq-toggle-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid #E0DAD4;
  transform: scale(0.7);
  opacity: 0;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s, border-color 0.25s;
}

.faq-item.open .faq-toggle-ring {
  transform: scale(1);
  opacity: 1;
  border-color: #F26522;
}

.faq-toggle::before,
.faq-toggle::after {
  content: '';
  position: absolute;
  background: #C0BAB3;
  border-radius: 1px;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), background 0.25s, opacity 0.25s;
}

.faq-toggle::before {
  width: 12px;
  height: 1.5px;
  top: 13px;
  left: 8px;
}

.faq-toggle::after {
  width: 1.5px;
  height: 12px;
  top: 8px;
  left: 13px;
}

.faq-item.open .faq-toggle::before,
.faq-item.open .faq-toggle::after {
  background: #F26522;
}

.faq-btn:hover .faq-toggle::before,
.faq-btn:hover .faq-toggle::after {
  background: #F26522;
}

.faq-item.open .faq-toggle::after {
  transform: rotate(90deg) scaleY(0);
  opacity: 0;
}

.faq-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-body-inner {
  padding: 0 0 26px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s 0.1s ease, transform 0.35s 0.1s ease;
}

.faq-item.open .faq-body-inner {
  opacity: 1;
  transform: none;
}

.faq-body-inner p {
  font-size: 16px;
  color: #666;
  line-height: 1.8;
  font-weight: 300;
}

.faq-body-inner ul {
  margin-top: 12px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.faq-body-inner li {
  font-size: 14px;
  color: #666;
  line-height: 1.7;
  font-weight: 300;
  padding-left: 18px;
  position: relative;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.faq-item.open .faq-body-inner li:nth-child(1) {
  opacity: 1;
  transform: none;
  transition-delay: 0.15s;
}

.faq-item.open .faq-body-inner li:nth-child(2) {
  opacity: 1;
  transform: none;
  transition-delay: 0.21s;
}

.faq-item.open .faq-body-inner li:nth-child(3) {
  opacity: 1;
  transform: none;
  transition-delay: 0.27s;
}

.faq-item.open .faq-body-inner li:nth-child(4) {
  opacity: 1;
  transform: none;
  transition-delay: 0.33s;
}

.faq-body-inner li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 0;
  height: 1px;
  background: #F26522;
  transition: width 0.3s ease;
}

.faq-item.open .faq-body-inner li::before {
  width: 5px;
  transition-delay: 0.35s;
}

#outletsSection:before {
  display: none;
}

section#sd-business {
  padding: 70px 0;
  transition: background-color 1.6s ease;
  position: relative;
  background: transparent;
}

.sservices-testipart,
.sd-board,
.sd-howworks {
  transition: background-color 1.6s ease;
  position: relative;
  padding: 70px 0 0px;
  background: transparent;
}

.mobileshowcase-section {
  transition: background-color 1.6s ease;
  position: relative;
  padding: 0 0 0px 0;
  background: transparent;
  overflow: hidden !important;
}

.outlets-section {
  transition: background-color 1.6s ease;
  position: relative;
  padding: 0 0 70px 0;
  background: transparent;
}

.faq-section {
  transition: background-color 1.6s ease;
  position: relative;
  padding: 70px 0;
  background: transparent
}

/* Board */
body.is-board-bg {
  background: #fff2f4;
}

body.is-board-bg .sd-features {
  background: #fff2f4;
}

/* How Works */
body.is-works-bg {
  background: #fffef8;
}

body.is-works-bg .sd-board {
  background: #fffef8;
}


/* Businesses */
body.is-bus-bg {
  background: #CBC3E32E;
}

body.is-bus-bg .sd-howworks {
  background: #CBC3E32E;
}

/* Outlets */
body.is-outlet-bg {
  background: #fff5ef;
}

body.is-outlet-bg .businesses-section {
  background: #fff5ef;
}

/* Mobile Showcase */
body.is-mock-bg {
  background: #fff5ff;
}

body.is-mock-bg .outlets-section {
  background: #fff5ff;
}

/* Testimonials */
body.is-testi-bg {
  background: #fbfffd;
}

body.is-testi-bg .mobileshowcase-section {
  background: #fbfffd;
}

/* FAQ */
body.is-faq-bg {
  background: #fbf2ed;
  /* apna color change kar sakte ho */
}

body.is-faq-bg .testimonials-section {
  background: #fbf2ed;
}

@media (max-width: 992px) {
  .sd-features .container {
    padding: 0 50px;
  }

  .sd-feat-row {
    grid-template-columns: 1fr;
    gap: 30px;
    margin-bottom: 60px;
  }

  .sd-feat-row-reverse .sd-feat-media {
    order: 0;
  }

  .sd-feat-row-reverse .sd-feat-text {
    order: 0;
  }

  .sd-onboard-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .sd-howworks .sd-cap-head {
    margin-bottom: 20px;
  }

  .sd-howworks .sd-badge {
    margin-bottom: 0px;
  }

  .faq-btn-q {
    font-size: 18px;
  }

  .mobile-slider {
    padding: 30px 0 0;
  }

  section#sd-business {
    padding: 30px 0;
  }

  .sservices-testipart,
  .sd-board,
  .sd-howworks,
  .businesses-section,
  .outlets-section,
  .mobileshowcase-section,
  .faq-section {
    padding: 40px 0;
  }
}

@media (max-width: 600px) {
  .sd-features {
    padding: 0 15px;
  }

  .sd-board .container,
  .sd-howworks .container,
  .mobileshowcase-section .container {
    padding: 0 15px;
  }

  .sd-features .container {
    padding: 0;
  }

  .faq-wrap {
    padding: 0;
  }
}


@media(max-width:767px) {
  .sd-onboard-grid {
    grid-template-columns: 1fr;
  }
}

/* ============ MEGA MENU ============ */
.header-nav {
  position: static;
}

.header-nav .has-megamenu {
  position: static;
}

.header-nav .has-megamenu>.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.header-nav .has-megamenu>.nav-link .mm-caret {
  font-size: 10px;
  transition: transform 0.35s ease;
}

.header-nav .has-megamenu:hover>.nav-link .mm-caret {
  transform: rotate(180deg);
}

.mega-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  transform: translateY(10px);
  background: var(--tf-white-color);
  border: 1px solid var(--tf-border-color);
  border-radius: 22px;
  box-shadow: 0 30px 80px rgba(20, 20, 20, 0.18);
  padding: 28px;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(.2, .8, .2, 1), visibility 0.3s ease;
  z-index: 1100;
}

.header-nav .has-megamenu:hover .mega-menu,
.header-nav .has-megamenu:focus-within .mega-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.mega-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -40px;
  height: 40px;
}

.mega-menu-inner {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 28px;
}

.mm-feature {
  background: linear-gradient(160deg, var(--tf-primary-color) 0%, #1a1a1a 100%);
  color: #fff;
  border-radius: 18px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 320px;
  position: relative;
  overflow: hidden;
}

.mm-feature::after {
  content: "";
  position: absolute;
  inset: auto -30px -30px auto;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.18), transparent 70%);
  border-radius: 50%;
}

.mm-feature-eyebrow {
  font-size: 11px;
  letter-spacing: 2px;
  font-weight: 600;
  opacity: 0.85;
}

.mm-feature h4 {
  font-size: 26px;
  font-weight: 700;
  margin: 14px 0 12px;
  line-height: 1.2;
  color: #fff;
}

.mm-feature p {
  font-size: 13px;
  line-height: 1.6;
  opacity: 0.85;
  margin: 0 0 20px;
}

.mm-feature-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: var(--tf-dark-color);
  padding: 11px 18px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 13px;
  align-self: flex-start;
  transition: transform 0.3s ease, gap 0.3s ease;
  position: relative;
  z-index: 1;
}

.mm-feature-cta:hover {
  gap: 14px;
  color: var(--tf-dark-color);
  transform: translateY(-2px);
}

.mm-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  align-content: start;
  max-height: 65vh;
  overflow-y: auto;
  padding-right: 8px;
}

.mm-grid::-webkit-scrollbar {
  width: 5px;
}

.mm-grid::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.03);
  border-radius: 4px;
}

.mm-grid::-webkit-scrollbar-thumb {
  background: var(--tf-primary-color);
  border-radius: 4px;
}

.mm-grid::-webkit-scrollbar-thumb:hover {
  background: #d44d18;
}

.mm-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  color: var(--tf-dark-color);
  transition: background 0.25s ease, transform 0.25s ease;
  text-decoration: none;
}

.mm-item:hover,
.mm-item.active {
  background: #f5f5f5;
  color: var(--tf-dark-color);
  transform: translateX(2px);
}

.mm-ic {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #f4f4f4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--tf-primary-color);
  font-size: 15px;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.mm-item:hover .mm-ic,
.mm-item.active .mm-ic {
  background: var(--tf-primary-color);
  color: #fff;
  transform: scale(1.05);
}

.mm-text {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  min-width: 0;
}

.mm-text strong {
  font-size: 13.5px;
  font-weight: 600;
}

.mm-text span {
  font-size: 11.5px;
  color: #777;
  margin-top: 2px;
}

@media (max-width: 1100px) {
  .mega-menu {
    display: none;
  }
}

/* ============ DROPDOWN MENU ============ */
.header-nav .has-dropdown {
  position: relative;
}

.header-nav .has-dropdown>.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.header-nav .has-dropdown>.nav-link .mm-caret {
  font-size: 10px;
  transition: transform 0.35s ease;
}

.header-nav .has-dropdown:hover>.nav-link .mm-caret {
  transform: rotate(180deg);
}

.tf-dropdown-menu {
  position: absolute;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  top: calc(100% + 8px);
  background: var(--tf-white-color);
  border: 1px solid var(--tf-border-color);
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(20, 20, 20, 0.12);
  padding: 12px 0;
  min-width: 190px;
  margin: 0;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(.2, .8, .2, 1), visibility 0.3s ease;
  z-index: 1100;
}

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

.tf-dropdown-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -20px;
  height: 20px;
}

.tf-dropdown-menu li {
  padding: 0;
  margin: 0;
}

.tf-dropdown-menu a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 24px;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--tf-dark-color);
  text-decoration: none;
  transition: all 0.25s ease;
  white-space: nowrap;
}

.tf-dropdown-menu a:hover,
.tf-dropdown-menu a.active {
  color: var(--tf-primary-color);
  background-color: rgba(242, 94, 34, 0.05);
}

.tf-dropdown-menu a::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  display: inline-block;
  width: 16px;
  color: var(--tf-primary-color);
  font-size: 14px;
  text-align: center;
  transition: transform 0.25s ease;
}

.tf-dropdown-menu a:hover::before {
  transform: scale(1.15);
}

.tf-dropdown-menu a[href*="case-studies"]::before {
  content: "\f570";
}

.tf-dropdown-menu a[href*="event"]::before {
  content: "\f073";
}

.tf-dropdown-menu a[href*="our-clients"]::before {
  content: "\f0c0";
}

.tf-dropdown-menu a[href*="partner-program"]::before {
  content: "\f2b5";
}

.tf-dropdown-menu a[href*="pricing"]::before {
  content: "\f02c";
}

.tf-dropdown-menu a[href*="testimonials"]::before {
  content: "\f086";
}

.tf-dropdown-menu a[href*="video-gallery"]::before {
  content: "\f03d";
}

@media (max-width: 991.98px) {
  .tf-dropdown-menu {
    display: none;
  }
}

/* Offcanvas Services submenu */
.oc-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.oc-item-row .nav-link {
  flex-grow: 1;
  text-decoration: none;
}

.oc-has-sub .oc-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 10px;
  height: 10px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: inherit;
  flex-shrink: 0;
}

.oc-has-sub .oc-caret {
  font-size: 11px;
  transition: transform 0.3s ease;
}

.oc-has-sub.is-open .oc-caret {
  transform: rotate(180deg);
}

.oc-submenu {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.oc-has-sub.is-open .oc-submenu {
  max-height: 2500px;
}

.oc-submenu li {
  margin: 0;
}

.oc-submenu a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--tf-dark-color);
  transition: background 0.25s ease, color 0.25s ease;
}

.oc-submenu a:hover,
.oc-submenu li a.active {
  background: #f4f4f4;
  color: var(--tf-primary-color);
}

.oc-submenu a i {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #f4f4f4;
  color: var(--tf-primary-color);
  font-size: 12px;
  flex-shrink: 0;
}

.oc-submenu>li:first-child {
  margin-top: 10px;
}

.oc-submenu>li:last-child {
  margin-bottom: 6px;
}

/* ============================================
   DEDICATED CONTACT PAGE STYLING
   ============================================ */
.contact-page-section {
  padding: 90px 0;
  background-color: var(--tf-white-color);
  position: relative;
  overflow: hidden;
}

.contact-page-grid {
  display: grid;
  grid-template-columns: 1.1fr 1.3fr;
  gap: 50px;
  align-items: start;
}

.contact-info-wrapper {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.contact-info-card {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  background: var(--tf-off-white-color);
  padding: 24px 28px;
  border-radius: 16px;
  border: 1px solid #e4e4e4;
  transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}

.contact-info-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(242, 107, 58, 0.08);
  border-color: var(--tf-primary-light);
  background: var(--tf-white-color);
}

.contact-info-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background: var(--tf-peach-soft);
  color: var(--tf-primary-color);
  border-radius: 12px;
  font-size: 20px;
  flex-shrink: 0;
  transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}

.contact-info-card:hover .contact-info-icon {
  background: var(--tf-primary-color);
  color: var(--tf-white-color);
  transform: scale(1.1) rotate(-8deg);
}

.contact-info-content h4 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--tf-dark-color);
}

.contact-info-content p {
  margin: 0;
  font-size: 15px;
  color: var(--tf-muted-color);
  line-height: 1.6;
}

.contact-info-content p a {
  color: var(--tf-muted-color);
  transition: color 0.25s ease;
}

.contact-info-content p a:hover {
  color: var(--tf-primary-color);
}

select.contact-input {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F26B3A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 20px center;
  background-size: 16px;
  padding-right: 48px;
  cursor: pointer;
}

.contact-map-section {
  padding-bottom: 95px;
  background-color: var(--tf-white-color);
}

.contact-map-wrapper {
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.06);
  border: 1px solid var(--tf-border-color);
  background: var(--tf-white-color);
  padding: 10px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.contact-map-wrapper:hover {
  border-color: var(--tf-primary-light);
  box-shadow: 0 15px 40px rgba(242, 107, 58, 0.08);
}

.contact-map-wrapper iframe {
  display: block;
  border-radius: 16px;
  width: 100%;
  border: 0;
}

@media (max-width: 991px) {
  .contact-page-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* ============================================
   CAREER PAGE STYLING
   ============================================ */
.career-section {
  padding: 90px 0;
  background-color: var(--tf-white-color);
  position: relative;
}

.career-apply-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 60px;
  align-items: center;
}

.career-apply-content .section-title {
  margin-bottom: 24px;
}

.career-apply-content .section-title h4 {
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--tf-primary-color);
  font-weight: 600;
  margin-bottom: 8px;
}

.career-apply-content .section-title h2 {
  font-size: 42px;
  font-weight: 700;
  color: var(--tf-dark-color);
  line-height: 1.2;
}

.career-apply-desc {
  font-size: 16px;
  line-height: 1.75;
  color: var(--tf-text-color);
  margin-bottom: 20px;
}

.career-apply-sub {
  font-size: 15px;
  color: var(--tf-muted-color);
  margin-bottom: 0;
  font-weight: 500;
}

.career-qr-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  background: var(--tf-peach-soft);
  padding: 36px 40px;
  border-radius: 24px;
  border: 1px solid var(--tf-border-color);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
  text-align: center;
}

.career-qr-box {
  width: 170px;
  height: 170px;
  background: var(--tf-white-color);
  padding: 10px;
  border-radius: 14px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.career-qr-wrapper:hover .career-qr-box {
  transform: scale(1.05);
}

.career-qr-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.career-btn-apply {
  background: var(--tf-primary-color);
  color: var(--tf-white-color) !important;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 600;
  padding: 12px 36px;
  border-radius: 50rem;
  border: 1px solid var(--tf-primary-color);
  transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1);
  box-shadow: 0 5px 15px rgba(242, 107, 58, 0.15);
}

.career-btn-apply:hover {
  background: transparent;
  color: var(--tf-primary-color) !important;
  box-shadow: 0 8px 20px rgba(242, 107, 58, 0.25);
  transform: translateY(-2px);
}

.guidelines-section {
  padding: 90px 0;
  background-color: var(--tf-off-white-color);
}

.guidelines-section .section-title {
  margin-bottom: 50px;
}

.guideline-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.career-guideline-card {
  background: var(--tf-white-color);
  border: 1px solid #E4E4E4;
  border-radius: 20px;
  padding: 32px 28px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.career-guideline-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 15px 35px rgba(242, 107, 58, 0.1);
  border-color: var(--tf-primary-light);
}

.career-guideline-card h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--tf-primary-color);
  margin-bottom: 18px;
  border-bottom: 2px solid var(--tf-peach-color);
  padding-bottom: 12px;
}

.career-guideline-card p,
.career-guideline-card li {
  font-size: 15px;
  color: var(--tf-muted-color);
  line-height: 1.65;
}

.career-guideline-card ul,
.career-guideline-card ol {
  padding-left: 20px;
  margin: 0;
}

.career-guideline-card li {
  margin-bottom: 8px;
}

.career-guideline-card li:last-child {
  margin-bottom: 0;
}

.career-contact-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.career-contact-link {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--tf-text-color);
  font-size: 15px;
  font-weight: 500;
  transition: color 0.25s ease;
  text-decoration: none;
}

.career-contact-link:hover {
  color: var(--tf-primary-color);
}

.career-contact-link i {
  color: var(--tf-primary-color);
  font-size: 14px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tf-peach-soft);
  border-radius: 6px;
}


@media (max-width: 1199px) {
  .career-apply-grid {
    gap: 40px;
  }

  .guideline-grid {
    gap: 24px;
  }

  .contact-info-card {
    padding: 20px 15px;
  }
}

@media (max-width: 991px) {
  .career-apply-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .guideline-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .guideline-grid {
    grid-template-columns: 1fr;
  }

  .career-apply-content .section-title h2 {
    font-size: 32px;
  }
}

/* ============================================
   CASE STUDIES SECTION
   ============================================ */
.cs-stats-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  margin-top: -30px;
  margin-bottom: 60px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.75) 0%, rgba(255, 241, 232, 0.45) 100%);
  border: 1px solid rgba(242, 107, 58, 0.12);
  border-radius: 24px;
  padding: 35px 40px;
  box-shadow: 0 15px 35px rgba(242, 107, 58, 0.03);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  text-align: center;
  position: relative;
  z-index: 5;
}

.cs-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

.cs-stat-item:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -15px;
  top: 15%;
  height: 70%;
  width: 1px;
  background: rgba(242, 107, 58, 0.15);
}

.cs-stat-number {
  font-size: clamp(32px, 3.5vw, 42px);
  font-weight: 800;
  color: var(--tf-primary-color);
  line-height: 1.1;
}

.cs-stat-text {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--tf-dark-color);
  margin-top: 8px;
}

.cs-tabs {
  margin-bottom: 50px;
}

.cs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 50px;
}

@media (max-width: 1199px) {
  .cs-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}

@media (max-width: 991px) {
  .cs-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  .cs-stats-bar {
    grid-template-columns: repeat(2, 1fr);
    padding: 30px;
    gap: 24px;
    margin-top: -10px;
  }

  .cs-stat-item:nth-child(2)::after {
    display: none;
  }

  .cs-stat-item:not(:last-child)::after {
    right: -12px;
  }
}

@media (max-width: 767px) {
  .cs-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

@media (max-width: 575px) {
  .cs-stats-bar {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 24px 15px;
  }

  .cs-stat-item::after {
    display: none !important;
  }
}

/* Card Design Base */
.cs-card {
  background: #ffffff;
  border-radius: 24px;
  border: 1px solid var(--tf-border-color, #e4e4e4);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  padding: 0 !important;
}

.cs-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 22px 50px rgba(242, 107, 58, 0.09);
  border-color: rgba(242, 107, 58, 0.22);
}

/* Featured Card Styling */
.cs-featured-card {
  grid-column: span 3;
  display: grid !important;
  grid-template-columns: 1.1fr 1fr;
  min-height: 440px;
}

.cs-featured-image-wrapper {
  position: relative;
  overflow: hidden;
  height: 100%;
  min-height: 320px;
}

.cs-featured-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.cs-featured-card:hover .cs-featured-image {
  transform: scale(1.04);
}

.cs-pill-featured {
  position: absolute;
  top: 24px;
  left: 24px;
  z-index: 2;
  background: var(--tf-dark-color) !important;
  color: var(--tf-white-color) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.cs-featured-content {
  padding: 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cs-featured-title {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: clamp(24px, 2.5vw, 32px);
  color: var(--tf-dark-color);
  line-height: 1.25;
  margin: 10px 0 16px 0;
}

.cs-featured-desc {
  font-family: "Inter", sans-serif;
  font-size: 15px;
  line-height: 1.65;
  color: var(--tf-muted-color);
  margin-bottom: 28px;
}

.cs-featured-metrics {
  display: flex;
  gap: 40px;
  margin-bottom: 30px;
  border-top: 1px solid var(--tf-border-color);
  padding-top: 24px;
}

.cs-featured-metric-item {
  display: flex;
  flex-direction: column;
}

.cs-featured-metric-value {
  font-size: 34px;
  font-weight: 800;
  color: var(--tf-primary-color);
  line-height: 1.1;
}

.cs-featured-metric-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--tf-muted-color);
  margin-top: 4px;
}

.cs-featured-btn {
  align-self: flex-start;
}

@media (max-width: 1199px) {
  .cs-featured-card {
    min-height: 400px;
  }

  .cs-featured-content {
    padding: 35px;
  }
}

@media (max-width: 991px) {
  .cs-featured-card {
    grid-column: span 2;
    grid-template-columns: 1fr;
  }

  .cs-featured-image-wrapper {
    height: 300px;
    min-height: 300px;
  }
}

@media (max-width: 767px) {
  .cs-featured-card {
    grid-column: span 1;
  }

  .cs-featured-image-wrapper {
    height: 240px;
    min-height: 240px;
  }

  .cs-featured-content {
    padding: 28px 24px;
  }
}

/* Standard Card Design */
.cs-card-image-wrapper {
  position: relative;
  height: 220px;
  overflow: hidden;
  background: var(--tf-off-white-color);
}

.cs-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.cs-card:hover .cs-card-image {
  transform: scale(1.05);
}

.cs-card-tag {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  margin-bottom: 0 !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  background: var(--tf-dark-color) !important;
  color: var(--tf-white-color) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.cs-card-logo-overlay {
  position: absolute;
  bottom: 16px;
  right: 16px;
  z-index: 2;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 10px;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.8);
  height: 36px;
}

.cs-card-logo {
  height: 20px;
  width: auto;
  max-width: 90px;
  object-fit: contain;
}

.cs-card-content-wrapper {
  padding: 30px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
}

.cs-pill {
  display: inline-block;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 1px;
  padding: 6px 14px;
  border-radius: 999px;
  text-transform: uppercase;
}

.cs-pill-ts {
  color: var(--tf-primary-color);
  background: rgba(242, 107, 58, 0.08);
  border: 1px solid rgba(242, 107, 58, 0.15);
}

.cs-pill-ent {
  color: #a855f7;
  background: rgba(168, 85, 247, 0.08);
  border: 1px solid rgba(168, 85, 247, 0.15);
}

.cs-pill-qsr {
  color: #22c55e;
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.15);
}

.cs-card-title {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 22px;
  color: var(--tf-dark-color);
  line-height: 1.3;
  margin: 0 0 12px 0;
}

.cs-card-desc {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: var(--tf-muted-color);
  margin-bottom: 24px;
  flex-grow: 1;
}

.cs-card-metrics-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 24px;
  border-top: 1px solid #f3f4f6;
  padding-top: 20px;
}

.cs-card-metric-badge {
  display: flex;
  flex-direction: column;
  background: var(--tf-peach-soft);
  border-radius: 12px;
  padding: 12px 14px;
  border-left: 3px solid var(--tf-primary-color);
}

.cs-metric-num {
  display: block;
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 24px;
  color: var(--tf-primary-color);
  line-height: 1.1;
}

.cs-metric-label {
  display: block;
  font-family: "Inter", sans-serif;
  font-size: 9px;
  font-weight: 600;
  color: var(--tf-muted-color);
  text-transform: uppercase;
  margin-top: 3px;
  letter-spacing: 0.3px;
}

.cs-card-action-bar {
  border-top: 1px solid #f3f4f6;
  padding-top: 16px;
}

.cs-card-link {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--tf-primary-color);
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.3s ease;
}

.cs-card-link i {
  transition: transform 0.3s ease;
}

.cs-card:hover .cs-card-link {
  color: var(--tf-primary-dark);
}

.cs-card:hover .cs-card-link i {
  transform: translateX(4px);
}

/* ============================================
   GLASSMORPHIC MODAL SYSTEM
   ============================================ */
.cs-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(20, 20, 20, 0.45);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 1050;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  padding: 20px;
}

.cs-modal-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.cs-modal {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.18);
  border-radius: 28px;
  width: 100%;
  max-width: 900px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  transform: scale(0.92);
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  padding: 48px;
}

@media (max-width: 767px) {
  .cs-modal {
    padding: 35px 24px;
    border-radius: 20px;
  }
}

.cs-modal-overlay.is-visible .cs-modal {
  transform: scale(1);
}

.cs-modal-close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  background: #f3f4f6;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tf-dark-color);
  font-size: 18px;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 10;
}

.cs-modal-close:hover {
  background: var(--tf-primary-color);
  color: #ffffff;
  transform: rotate(90deg);
}

.cs-modal-content {
  display: flex;
  flex-direction: column;
}

.cs-modal-header {
  border-bottom: 1px solid rgba(242, 107, 58, 0.12);
  padding-bottom: 24px;
  margin-bottom: 30px;
}

.cs-modal-subtitle {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 12px;
  color: var(--tf-primary-color);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  display: inline-block;
  margin-bottom: 8px;
}

.cs-modal-title {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: clamp(24px, 3.5vw, 32px);
  color: var(--tf-dark-color);
  line-height: 1.25;
  margin: 0;
}

.cs-modal-body {
  font-family: "Inter", sans-serif;
}

.cs-modal-section {
  margin-bottom: 28px;
}

.cs-modal-section h4 {
  font-size: 18px;
  font-weight: 700;
  color: var(--tf-dark-color);
  margin-bottom: 12px;
}

.cs-modal-section p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--tf-muted-color);
  margin: 0;
}

.cs-results-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.cs-results-list li {
  font-size: 15px;
  line-height: 1.6;
  color: var(--tf-muted-color);
  position: relative;
  padding-left: 28px;
}

.cs-results-list li i {
  position: absolute;
  left: 0;
  top: 2px;
  color: var(--tf-primary-color);
  font-size: 18px;
}

.cs-modal-testimonial {
  background: var(--tf-peach-soft);
  border-left: 4px solid var(--tf-primary-color);
  padding: 24px 30px;
  border-radius: 0 16px 16px 0;
  margin-top: 35px;
}

.cs-testimonial-quote {
  font-style: italic;
  font-size: 15px;
  line-height: 1.7;
  color: var(--tf-dark-color);
  margin-bottom: 12px !important;
}

.cs-testimonial-author {
  font-weight: 700;
  font-size: 12px;
  color: var(--tf-muted-color);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Body scroll lock when modal open */
body.modal-open {
  overflow: hidden;
}

/* ============================================
   OUR CLIENTS PAGE
   ============================================ */
.clients-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 35px;
}

@media (max-width: 991px) {
  .clients-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

.client-card {
  background: #ffffff;
  border-radius: 24px;
  border: 1px solid #e4e4e4;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.02);
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: start;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  position: relative;
  overflow: hidden;
}

.client-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 50px rgba(242, 107, 31, 0.08);
  border-color: rgba(242, 107, 31, 0.2);
}

.client-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 0;
  background: var(--tf-orange-color, #F26B1F);
  transition: height 0.4s ease;
}

.client-card:hover::before {
  height: 100%;
}

.client-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  border-bottom: 1px solid rgba(242, 107, 31, 0.06);
  padding-bottom: 20px;
  gap: 20px;
}

.client-logo-wrapper {
  max-width: 160px;
  height: 48px;
  display: flex;
  align-items: center;
}

.client-logo-wrapper img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.client-category {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1px;
  padding: 6px 14px;
  border-radius: 999px;
  text-transform: uppercase;
  color: var(--tf-orange-color, #F26B1F);
  background: rgba(242, 107, 31, 0.08);
  border: 1px solid rgba(242, 107, 31, 0.15);
  white-space: nowrap;
}

.client-card-body h3 {
  font-size: clamp(20px, 2.5vw, 24px);
  font-weight: 700;
  color: var(--tf-dark-color, #111);
  margin-bottom: 12px;
}

.client-desc {
  font-family: "Inter", sans-serif;
  font-size: 15px;
  line-height: 24px;
  color: var(--tf-muted-color, #5b6470);
  margin-bottom: 20px;
}

.client-deployments {
  margin-bottom: 24px;
}

.client-deploy-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--tf-dark-color, #111);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.client-deploy-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.client-deploy-tag {
  font-size: 12px;
  background: #f8f9fa;
  color: #5b6470;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid #e9ecef;
}

.client-testimonial {
  background: #fdfaf8;
  border-left: 3px solid var(--tf-orange-color, #F26B1F);
  padding: 16px 20px;
  border-radius: 0 12px 12px 0;
  font-style: italic;
  font-size: 14px;
  line-height: 22px;
  color: var(--tf-dark-color, #111);
}

/* Stats Counter Grid inside our-clients hero / top section */
.clients-stats-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  margin-top: 50px;
  background: #ffffff;
  border: 1px solid rgba(242, 107, 31, 0.08);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  border-radius: 20px;
  padding: 40px;
}

@media (max-width: 991px) {
  .clients-stats-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  .client-logo-wrapper img {
    object-fit: cover;
    width: 80px;
  }
}

@media (max-width: 575px) {
  .clients-stats-container {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 30px 20px;
  }
}

.client-stat-item {
  text-align: center;
  border-right: 1px solid rgba(242, 107, 31, 0.1);
}

.client-stat-item:last-child {
  border-right: none;
}

@media (max-width: 991px) {
  .client-stat-item:nth-child(2) {
    border-right: none;
  }
}

@media (max-width: 575px) {
  .client-stat-item {
    border-right: none;
  }
}

.client-stat-num {
  font-size: clamp(32px, 4vw, 40px);
  font-weight: 800;
  color: var(--tf-orange-color, #F26B1F);
  line-height: 1.2;
}

.client-stat-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--tf-muted-color, #5b6470);
  margin-top: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ============================================
   EVENTS PAGE — Photo Gallery & Lightbox
   ============================================ */
.events-section {
  position: relative;
  background-color: #fafafa;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 40px;
}

.event-card {
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid rgba(242, 107, 31, 0.08);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
  padding: 24px;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  display: flex;
  flex-direction: column;
}

.event-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 45px rgba(242, 107, 31, 0.08);
  border-color: rgba(242, 107, 31, 0.2);
}

.event-img-wrapper {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 14px;
  margin-bottom: 20px;
  background-color: #eaeaea;
}

.event-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.event-card:hover .event-img {
  transform: scale(1.06);
}

.event-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(17, 17, 17, 0.82);
  color: #ffffff;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  z-index: 2;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.event-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--tf-muted-color, #5b6470);
  margin-bottom: 10px;
  font-weight: 500;
}

.event-meta span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.event-title {
  font-size: 20px;
  font-weight: 700;
  color: #111111;
  margin-bottom: 10px;
  line-height: 1.35;
}

.event-desc {
  font-size: 14px;
  color: #4b5563;
  line-height: 1.6;
  margin-bottom: 20px;
  flex-grow: 1;
}

.event-action {
  font-size: 14px;
  font-weight: 600;
  color: var(--tf-orange-color, #F26B1F);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: color 0.2s;
  align-self: flex-start;
}

.event-action i {
  transition: transform 0.2s;
}

.event-action:hover {
  color: #d15610;
}

.event-action:hover i {
  transform: translateX(4px);
}

/* Lightbox Modal */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.95);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
  backdrop-filter: blur(8px);
}

.lightbox-overlay.is-active {
  opacity: 1;
  pointer-events: auto;
}

.lightbox-content {
  position: relative;
  max-width: 960px;
  width: 90%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lightbox-img-wrapper {
  position: relative;
  background: #000;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6);
  width: 100%;
}

.lightbox-img {
  width: 100%;
  height: auto;
  max-height: 75vh;
  object-fit: contain;
  display: block;
}

.lightbox-close {
  position: absolute;
  top: 5px;
  right: 0;
  font-size: 36px;
  color: #ffffff;
  cursor: pointer;
  transition: opacity 0.2s;
  background: transparent;
  border: none;
  outline: none;
}

.lightbox-close:hover {
  opacity: 0.8;
}

.lightbox-prev,
.lightbox-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 40px;
  color: #ffffff;
  cursor: pointer;
  opacity: 0.7;
  transition: all 0.2s;
  background: rgba(255, 255, 255, 0.08);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  outline: none;
}

.lightbox-prev:hover,
.lightbox-next:hover {
  opacity: 1;
  background: var(--tf-orange-color, #F26B1F);
  border-color: var(--tf-orange-color, #F26B1F);
}

.lightbox-prev {
  left: -80px;
}

.lightbox-next {
  right: -80px;
}

.lightbox-caption {
  color: #ffffff;
  margin-top: 20px;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  font-family: "Inter", sans-serif;
  letter-spacing: 0.3px;
}

.lightbox-caption p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  font-weight: 400;
  margin-top: 6px;
}

/* Responsive Gallery Grid & Lightbox */
@media (max-width: 1199px) {
  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}

@media (max-width: 991px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .lightbox-prev {
    left: 15px;
    width: 46px;
    height: 46px;
  }

  .lightbox-next {
    right: 15px;
    width: 46px;
    height: 46px;
  }
}

@media (max-width: 640px) {
  .gallery-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* ============================================
   VIDEO GALLERY PAGE — Videos Grid & Lightbox
   ============================================ */
.videos-section {
  position: relative;
  background-color: #fafafa;
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 40px;
}

.video-card {
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid rgba(242, 107, 31, 0.08);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
  padding: 24px;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  display: flex;
  flex-direction: column;
}

.video-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 45px rgba(242, 107, 31, 0.08);
  border-color: rgba(242, 107, 31, 0.2);
}

.video-img-wrapper {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 14px;
  margin-bottom: 20px;
  background-color: #eaeaea;
  cursor: pointer;
}

.video-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.video-card:hover .video-img {
  transform: scale(1.06);
}

/* Play button overlay */
.play-btn-overlay {
  position: absolute;
  inset: 0;
  background: rgba(17, 17, 17, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.85;
  transition: all 0.3s ease;
  z-index: 2;
}

.video-card:hover .play-btn-overlay {
  opacity: 1;
  background: rgba(17, 17, 17, 0.2);
}

.play-btn-circle {
  width: 60px;
  height: 60px;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(8px);
  border: 2px solid #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 20px;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.play-btn-circle i {
  margin-left: 4px;
  /* offset triangle to make it look centered */
}

.video-card:hover .play-btn-circle {
  transform: scale(1.15);
  background: var(--tf-orange-color, #F26B1F);
  border-color: var(--tf-orange-color, #F26B1F);
  box-shadow: 0 12px 30px rgba(242, 107, 31, 0.4);
}

.video-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(17, 17, 17, 0.82);
  color: #ffffff;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  z-index: 3;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.video-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--tf-muted-color, #5b6470);
  margin-bottom: 10px;
  font-weight: 500;
}

.video-meta span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.video-title {
  font-size: 20px;
  font-weight: 700;
  color: #111111;
  margin-bottom: 10px;
  line-height: 1.35;
}

.video-desc {
  font-size: 14px;
  color: #4b5563;
  line-height: 1.6;
  margin-bottom: 20px;
  flex-grow: 1;
}

.video-action {
  font-size: 14px;
  font-weight: 600;
  color: var(--tf-orange-color, #F26B1F);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: color 0.2s;
  align-self: flex-start;
}

.video-action i {
  transition: transform 0.2s;
}

.video-action:hover {
  color: #d15610;
}

.video-action:hover i {
  transform: translateX(4px);
}

/* Lightbox video iframe responsive wrapper */
.video-ratio-wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  /* 16:9 Aspect Ratio */
  background-color: #000;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6);
}

.video-ratio-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Responsive grid for videos */
@media (max-width: 1199px) {
  .video-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}

@media (max-width: 991px) {
  .video-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 640px) {
  .video-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* ============ PRICING PAGE STYLES ============ */
.pricing-section {
  padding: 70px 0;
  background-color: var(--tf-bg-light, #f8f9fa);
  position: relative;
  overflow: hidden;
}

@media (max-width: 991px) {
  .pricing-section {
    padding: 70px 0;
  }
}

@media (max-width: 767px) {
  .pricing-section {
    padding: 50px 0;
  }
}

/* Toggle Switch */
.pricing-toggle-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  margin-bottom: 50px;
}

.pricing-toggle-label {
  font-size: 16px;
  font-weight: 600;
  color: var(--tf-dark-color);
  cursor: pointer;
  transition: color 0.3s;
}

.pricing-toggle-label.active {
  color: var(--tf-primary-color);
}

.pricing-switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 32px;
}

.pricing-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.pricing-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #e4e6eb;
  transition: .4s;
  border-radius: 34px;
}

.pricing-slider:before {
  position: absolute;
  content: "";
  height: 24px;
  width: 24px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

input:checked+.pricing-slider {
  background-color: var(--tf-primary-color);
}

input:checked+.pricing-slider:before {
  transform: translateX(28px);
}

.pricing-badge-save {
  background-color: var(--tf-peach-soft);
  color: var(--tf-primary-color);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 12px;
  letter-spacing: 0.5px;
}

/* Pricing Grid */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-bottom: 80px;
  align-items: stretch;
}

@media (max-width: 991px) {
  .pricing-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .pricing-grid {
    grid-template-columns: 1fr;
    gap: 35px;
  }
}

/* Pricing Cards */
.pricing-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 24px;
  padding: 40px;
  position: relative;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.pricing-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.08);
  border-color: rgba(242, 107, 58, 0.2);
}

/* Popular Badge Card */
.pricing-card.popular {
  border: 2px solid var(--tf-primary-color);
  box-shadow: 0 20px 40px rgba(242, 107, 58, 0.1);
}

.pricing-card.popular:hover {
  box-shadow: 0 30px 60px rgba(242, 107, 58, 0.15);
}

.popular-ribbon {
  position: absolute;
  top: 20px;
  right: 20px;
  background: var(--tf-primary-color);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 6px 12px;
  border-radius: 20px;
}

.pricing-header {
  margin-bottom: 30px;
}

.pricing-plan-name {
  font-size: 20px;
  font-weight: 700;
  color: var(--tf-dark-color);
  margin-bottom: 8px;
}

.pricing-plan-desc {
  font-size: 14px;
  color: var(--tf-muted-color);
  line-height: 1.5;
  margin-bottom: 25px;
  min-height: 45px;
}

.pricing-price-wrapper {
  display: flex;
  align-items: baseline;
  margin-bottom: 5px;
}

.pricing-currency {
  font-size: 24px;
  font-weight: 700;
  color: var(--tf-dark-color);
  align-self: flex-start;
  margin-top: 5px;
}

.pricing-amount {
  font-size: 54px;
  font-weight: 800;
  color: var(--tf-dark-color);
  line-height: 1;
  letter-spacing: -1px;
}

.pricing-period {
  font-size: 15px;
  color: var(--tf-muted-color);
  margin-left: 6px;
}

.pricing-billing-subtext {
  font-size: 12px;
  color: var(--tf-muted-color);
  margin-bottom: 30px;
  display: block;
}

.pricing-btn {
  width: 100%;
  padding: 14px 28px;
  border-radius: 30px;
  font-weight: 600;
  text-align: center;
  transition: all 0.3s ease;
  margin-bottom: 35px;
  border: 1px solid var(--tf-primary-color);
  background: transparent;
  color: var(--tf-primary-color);
}

.pricing-btn:hover {
  background: var(--tf-primary-color);
  color: #ffffff;
}

.pricing-card.popular .pricing-btn {
  background: var(--tf-primary-color);
  color: #ffffff;
}

.pricing-card.popular .pricing-btn:hover {
  background: #d15610;
  border-color: #d15610;
}

.pricing-features-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--tf-dark-color);
  margin-bottom: 18px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.pricing-features-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex-grow: 1;
}

.pricing-features-list li {
  font-size: 14px;
  color: var(--tf-muted-color);
  position: relative;
  padding-left: 26px;
  line-height: 1.4;
}

.pricing-features-list li i {
  position: absolute;
  left: 0;
  top: 2px;
  color: var(--tf-primary-color);
  font-size: 16px;
}

.pricing-features-list li.disabled {
  color: #cbd5e1;
  text-decoration: line-through;
}

.pricing-features-list li.disabled i {
  color: #cbd5e1;
}

/* Feature Comparison Table */
.pricing-comparison-title {
  text-align: center;
  font-size: 28px;
  font-weight: 800;
  color: var(--tf-dark-color);
  margin-bottom: 40px;
}

.comparison-table-wrapper {
  overflow-x: auto;
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(0, 0, 0, 0.05);
  margin-bottom: 80px;
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.comparison-table th,
.comparison-table td {
  padding: 20px 24px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  font-size: 15px;
}

.comparison-table th {
  background-color: #fafbfc;
  font-weight: 700;
  color: var(--tf-dark-color);
}

.comparison-table td {
  color: var(--tf-muted-color);
}

.comparison-table tr:last-child td {
  border-bottom: none;
}

.comparison-feature-name {
  font-weight: 600;
  color: var(--tf-dark-color) !important;
}

.comparison-table td i.fa-check {
  color: #10b981;
  font-size: 16px;
}

.comparison-table td i.fa-xmark {
  color: #ef4444;
  font-size: 16px;
}

/* FAQ Section in Pricing */
.pricing-faq-section {
  padding-top: 20px;
}

.pricing-faq-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}

@media (max-width: 767px) {
  .pricing-faq-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

.pricing-faq-item h4 {
  font-size: 18px;
  font-weight: 700;
  color: var(--tf-dark-color);
  margin-bottom: 12px;
}

.pricing-faq-item p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--tf-muted-color);
  margin: 0;
}

/* ============ PARTNER PROGRAM PAGE STYLES ============ */
.partner-section {
  padding: 70px 0;
  background-color: var(--tf-bg-light, #f8f9fa);
  position: relative;
  overflow: hidden;
}

@media (max-width: 991px) {
  .partner-section {
    padding: 60px 0;
  }
}

@media (max-width: 767px) {
  .partner-section {
    padding: 50px 0;
  }
}

/* Partner Path Cards */
.partner-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-bottom: 70px;
  align-items: stretch;
}

@media (max-width: 991px) {
  .partner-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .partner-grid {
    grid-template-columns: 1fr;
    gap: 35px;
  }
}

.partner-card {
  background: #ffffff;
  border: 1px solid #e4e4e4;
  border-radius: 24px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.partner-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.08);
  border-color: rgba(242, 107, 58, 0.2);
}

.partner-icon-wrapper {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  background-color: var(--tf-peach-soft, #FFEFE7);
  color: var(--tf-primary-color, #F26B1F);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 25px;
}

.partner-card-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--tf-dark-color);
  margin-bottom: 12px;
}

.partner-card-desc {
  font-size: 14px;
  color: var(--tf-muted-color);
  line-height: 1.6;
  margin-bottom: 25px;
  flex-grow: 1;
}

.partner-card-benefit {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--tf-primary-color);
  letter-spacing: 0.5px;
  margin-bottom: 15px;
  display: block;
}

/* Why Partner / Benefits Grid */
.partner-benefits-title {
  text-align: center;
  font-size: 28px;
  font-weight: 800;
  color: var(--tf-dark-color);
  margin-bottom: 50px;
}

.partner-benefits-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  margin-bottom: 70px;
}

@media (max-width: 767px) {
  .partner-benefits-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

.partner-benefit-item {
  display: flex;
  gap: 20px;
}

.partner-benefit-num {
  font-size: 32px;
  font-weight: 800;
  color: var(--tf-peach-soft, #FFEFE7);
  line-height: 1;
  min-width: 40px;
}

.partner-benefit-content h4 {
  font-size: 18px;
  font-weight: 700;
  color: var(--tf-dark-color);
  margin-bottom: 8px;
}

.partner-benefit-content p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--tf-muted-color);
  margin: 0;
}

/* Steps Section */
.partner-steps-wrapper {
  background: #ffffff;
  border-radius: 24px;
  padding: 60px 40px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
  margin-bottom: 80px;
}

.partner-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  position: relative;
}

@media (max-width: 991px) {
  .partner-steps-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

.partner-step-card {
  text-align: center;
  position: relative;
}

.partner-step-number {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: var(--tf-primary-color);
  color: #ffffff;
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  box-shadow: 0 4px 10px rgba(242, 107, 58, 0.3);
}

.partner-step-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--tf-dark-color);
  margin-bottom: 10px;
}

.partner-step-desc {
  font-size: 14px;
  color: var(--tf-muted-color);
  line-height: 1.5;
  margin: 0;
}

/* Partner Form Section */
.partner-form-section {
  max-width: 700px;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 24px;
  padding: 50px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

@media (max-width: 767px) {
  .partner-form-section {
    padding: 30px 20px;
  }
}

.partner-form-title {
  text-align: center;
  font-size: 24px;
  font-weight: 800;
  color: var(--tf-dark-color);
  margin-bottom: 10px;
}

.partner-form-subtitle {
  text-align: center;
  font-size: 14px;
  color: var(--tf-muted-color);
  margin-bottom: 35px;
}

.partner-form .form-group {
  margin-bottom: 25px;
}

.partner-form label {
  font-size: 14px;
  font-weight: 600;
  color: var(--tf-dark-color);
  margin-bottom: 8px;
  display: block;
}

.partner-form .form-control {
  border: 1px solid #e4e6eb;
  border-radius: 12px;
  padding: 14px 20px;
  font-size: 14px;
  color: var(--tf-dark-color);
  transition: all 0.3s ease;
  background-color: #fafbfc;
}

.partner-form .form-control:focus {
  border-color: var(--tf-primary-color);
  background-color: #ffffff;
  box-shadow: 0 0 0 4px rgba(242, 107, 58, 0.1);
  outline: none;
}

.partner-form select.form-control {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234b5563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 20px center;
  background-size: 16px;
}

.partner-form-btn {
  width: 100%;
  padding: 15px 30px;
  background: var(--tf-primary-color);
  color: #ffffff;
  border: none;
  border-radius: 30px;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 5px 15px rgba(242, 107, 58, 0.2);
}

.partner-form-btn:hover {
  background: #d15610;
  box-shadow: 0 8px 20px rgba(242, 107, 58, 0.3);
  transform: translateY(-2px);
}

/* ============ CASE STUDY DETAIL PAGE STYLES ============ */
.cs-detail-section {
  padding: 90px 0;
  background-color: var(--tf-bg-light, #f8f9fa);
}

@media (max-width: 991px) {
  .cs-detail-section {
    padding: 70px 0;
  }
}

@media (max-width: 767px) {
  .cs-detail-section {
    padding: 50px 0;
  }
}

.cs-detail-grid {
  display: grid;
  grid-template-columns: 7fr 4fr;
  gap: 50px;
  align-items: start;
}

@media (max-width: 991px) {
  .cs-detail-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

.cs-detail-body h3 {
  font-size: 24px;
  font-weight: 800;
  color: var(--tf-dark-color);
  margin-top: 40px;
  margin-bottom: 15px;
}

.cs-detail-body h3:first-child {
  margin-top: 0;
}

.cs-detail-body p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--tf-muted-color);
  margin-bottom: 25px;
}

/* Sidebar Styling */
.cs-detail-sidebar {
  position: sticky;
  top: 120px;
}

.cs-sidebar-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 24px;
  padding: 40px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
  margin-bottom: 30px;
}

.cs-sidebar-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--tf-dark-color);
  margin-bottom: 25px;
  border-bottom: 1px solid #f3f4f6;
  padding-bottom: 15px;
}

.cs-sidebar-metrics-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.cs-sidebar-metric-item {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}

.cs-sidebar-metric-item:last-child {
  margin-bottom: 0;
}

.cs-sidebar-metric-value {
  font-size: 32px;
  font-weight: 800;
  color: var(--tf-primary-color);
  line-height: 1;
  min-width: 80px;
}

.cs-sidebar-metric-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--tf-dark-color);
  line-height: 1.4;
}

/* Sidebar Testimonial */
.cs-sidebar-testimonial {
  background: linear-gradient(135deg, rgba(255, 241, 232, 0.5) 0%, rgba(255, 255, 255, 0.9) 100%);
  border: 1px dashed rgba(242, 107, 58, 0.2);
  border-radius: 24px;
  padding: 35px;
  position: relative;
}

.cs-sidebar-testimonial::before {
  content: "“";
  position: absolute;
  top: 15px;
  left: 25px;
  font-size: 80px;
  color: rgba(242, 107, 58, 0.08);
  font-family: serif;
  line-height: 1;
}

.cs-testimonial-quote-text {
  font-size: 15px;
  line-height: 1.7;
  color: var(--tf-dark-color);
  font-style: italic;
  position: relative;
  z-index: 2;
  margin-bottom: 15px;
}

.cs-testimonial-author-name {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--tf-primary-color);
  display: block;
}

/* Pagination Links at Bottom */
.cs-detail-navigation {
  border-top: 1px solid #e4e6eb;
  padding-top: 40px;
  margin-top: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cs-nav-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--tf-dark-color);
  text-decoration: none;
  transition: all 0.3s ease;
}

.cs-nav-link-btn:hover {
  color: var(--tf-primary-color);
}

.cs-nav-link-btn i {
  transition: transform 0.3s ease;
}

.cs-nav-link-btn-prev:hover i {
  transform: translateX(-4px);
}

.cs-nav-link-btn-next:hover i {
  transform: translateX(4px);
}

/* ============================================
   TESTIMONIALS SECTION
   ============================================ */
.tm-featured-section {
  padding: 20px 0 20px;
  background-color: var(--tf-bg-light, #f8f9fa);
}

.tm-featured-card {
  background: #ffffff;
  border: 1px solid rgba(242, 107, 58, 0.1);
  border-radius: 30px;
  padding: 50px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

@media (max-width: 1199px) {
  .tm-featured-card {
    padding: 40px;
  }

}

@media (max-width: 991px) {
  .tm-featured-card {
    padding: 35px;
  }

}

.tm-featured-content {
  padding-right: 20px;
}

@media (max-width: 991px) {
  .tm-featured-content {
    padding-right: 0;
    margin-bottom: 40px;
  }
}

.tm-badge {
  display: inline-block;
  padding: 6px 16px;
  background: rgba(242, 107, 58, 0.1);
  color: var(--tf-primary-color);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: 30px;
  margin-bottom: 25px;
}

.tm-stars {
  color: #ff9e3b;
  font-size: 16px;
  margin-bottom: 20px;
  display: flex;
  gap: 4px;
}

.tm-featured-quote {
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 700;
  line-height: 1.5;
  color: var(--tf-dark-color);
  margin-bottom: 30px;
}

.tm-author-info strong {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: var(--tf-dark-color);
}

.tm-author-info span {
  display: block;
  font-size: 14px;
  color: var(--tf-muted-color);
  margin-top: 4px;
}

.tm-featured-metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

@media (max-width: 575px) {
  .tm-featured-metrics-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }
}

.tm-metric-box {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 241, 232, 0.3) 100%);
  border: 1px solid rgba(0, 0, 0, 0.04);
  border-radius: 20px;
  padding: 30px 25px;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.01);
}

.tm-metric-value {
  display: block;
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 800;
  color: var(--tf-primary-color);
  margin-bottom: 8px;
}

.tm-metric-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--tf-dark-color);
  line-height: 1.4;
}

@media (max-width: 767px) {
  .tm-metric-box {
    padding: 15px;
  }
}

/* Grid & Tabs */
.tm-grid-section {
  padding: 70px 0 70px;
  background-color: var(--tf-bg-light, #f8f9fa);
}

.tm-tabs {
  margin-bottom: 50px;
}

.tm-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

@media (max-width: 1199px) {
  .tm-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  .tm-grid-section {
    padding: 60px 0;
  }
}

@media (max-width: 991px) {
  .tm-grid-section {
    padding: 50px 0;
  }
}

@media (max-width: 767px) {
  .tm-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

.tm-card {
  background: #ffffff;
  border: 1px solid #e4e4e4;
  border-radius: 24px;
  padding: 35px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.tm-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(242, 107, 58, 0.05);
  border-color: rgba(242, 107, 58, 0.15);
}

.tm-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
  width: 100%;
  flex-wrap: wrap;
}

.tm-card-user {
  display: flex;
  align-items: center;
  gap: 15px;
}

.tm-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 18px;
  flex-shrink: 0;
}

.tm-card-meta {
  flex-grow: 1;
}

.tm-card-meta h5 {
  font-size: 15px;
  font-weight: 700;
  color: var(--tf-dark-color);
  margin: 0;
}

.tm-card-meta span {
  font-size: 12px;
  color: var(--tf-muted-color);
  display: block;
  margin-top: 2px;
}

.tm-cat-tag {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--tf-primary-color);
  background: rgba(242, 107, 58, 0.08);
  padding: 4px 10px;
  border-radius: 12px;
  flex-shrink: 0;
}

.tm-stars-row {
  color: #ff9e3b;
  font-size: 13px;
  margin-bottom: 18px;
  display: flex;
  gap: 3px;
}

.tm-quote-text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--tf-muted-color);
  flex-grow: 1;
  margin-bottom: 25px;
}

.tm-verified {
  border-top: 1px solid #f3f4f6;
  padding-top: 15px;
  font-size: 12px;
  font-weight: 600;
  color: #10b981;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Submission Section */
.tm-submit-section {
  padding: 70px 0;
  background-color: #ffffff;
  position: relative;
}

.tm-submit-card {
  max-width: 800px;
  margin: 0 auto;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 241, 232, 0.25) 100%);
  border: 1px solid rgba(242, 107, 58, 0.12);
  border-radius: 30px;
  padding: 50px 60px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

@media (max-width: 1199px) {
  .tm-submit-section {
    padding: 60px 0;
  }
}

@media (max-width: 991px) {
  .tm-submit-card {
    padding: 35px;
  }

  .tm-card {
    padding: 25px;
  }

  .tm-submit-section {
    padding: 50px 0;
  }
}

.tm-submit-header {
  text-align: center;
  margin-bottom: 40px;
}

.tm-submit-header h2 {
  font-size: clamp(24px, 2.5vw, 32px);
  font-weight: 800;
  color: var(--tf-dark-color);
  margin-bottom: 15px;
}

.tm-submit-header p {
  font-size: 16px;
  color: var(--tf-muted-color);
  line-height: 1.6;
  max-width: 600px;
  margin: 0 auto;
}

.tm-review-form .form-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--tf-dark-color);
  margin-bottom: 8px;
}

.tm-review-form .form-control,
.tm-review-form .form-select {
  background-color: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  padding: 14px 18px;
  font-size: 15px;
  color: var(--tf-dark-color);
  box-shadow: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.tm-review-form .form-control::placeholder {
  color: #a0a0a0;
}

.tm-review-form .form-control:focus,
.tm-review-form .form-select:focus {
  border-color: var(--tf-primary-color);
  box-shadow: 0 0 0 4px rgba(242, 107, 58, 0.12);
}


.tm-rating-selector {
  display: flex;
  gap: 8px;
}

.rating-star {
  background: none;
  border: none;
  font-size: 24px;
  color: #e4e6eb;
  cursor: pointer;
  padding: 0;
  transition: all 0.2s ease;
}

.rating-star.is-active,
.rating-star:hover {
  color: #ff9e3b;
  transform: scale(1.1);
}

.tm-submit-btn {
  display: inline-block;
  padding: 14px 40px;
  background: var(--tf-primary-color);
  color: #ffffff;
  border: none;
  border-radius: 30px;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 5px 15px rgba(242, 107, 58, 0.2);
}

.tm-submit-btn:hover {
  background: #d15610;
  box-shadow: 0 8px 20px rgba(242, 107, 58, 0.3);
  transform: translateY(-2px);
}

/* Benefit Highlights Styling */
.tm-highlights-section {
  padding: 70px 0 70px;
  background-color: var(--tf-bg-light, #f8f9fa);
}

.tm-highlight-card {
  background: #ffffff;
  border: 1px solid #e4e4e4;
  border-radius: 24px;
  padding: 40px 30px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
  height: 100%;
  transition: all 0.3s ease;
}

.tm-highlight-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(242, 107, 58, 0.05);
  border-color: rgba(242, 107, 58, 0.15);
}

.tm-highlight-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(242, 107, 58, 0.08);
  color: var(--tf-primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin: 0 auto 20px;
}

.tm-highlight-card h4 {
  font-size: 18px;
  font-weight: 700;
  color: var(--tf-dark-color);
  margin-bottom: 12px;
}

.tm-highlight-card p {
  font-size: 14px;
  color: var(--tf-muted-color);
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 1199px) {
  .tm-highlights-section {
    padding: 60px 0;
  }
}

@media (max-width: 991px) {
  .tm-highlights-section {
    padding: 50px 0;
  }

  .tm-highlight-card {
    padding: 25px;
  }
}

.widget-cta {
  background-image: url('../image/cta-bg.png');
  background-size: auto 100%;
  background-position: 0 center;
  background-repeat: repeat-x;
  border-radius: 20px;
  overflow: hidden;
  color: #ffffff;
  text-align: center;
  padding: 40px 30px;
  animation: cta-bg-scroll 40s linear infinite;
}

.widget-cta h4 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 12px;
  color: #ffffff;
}

.widget-cta p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 25px;
}

.widget-cta-btn {
  display: inline-block;
  background: #ffffff;
  color: var(--tf-primary-color);
  padding: 10px 25px;
  border-radius: 30px;
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.widget-cta-btn:hover {
  background: var(--tf-peach-soft);
  color: var(--tf-primary-dark) !important;
}

.blog-related-section {
  padding: 60px 0 0;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  margin-top: 60px;
}

/* ============================================
   PARTNER PAGE ENHANCEMENTS
   ============================================ */
.partner-intro-box {
  background: #ffffff;
  border-radius: 24px;
  padding: 50px 40px;
  border: 1px solid #e4e4e4;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
  margin-bottom: 60px;
}

@media (max-width: 768px) {
  .partner-intro-box {
    padding: 30px 20px;
  }
}

.partner-check-list {
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.partner-check-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #f8f9fa;
  border: 1px solid #eaeaea;
  border-radius: 14px;
  padding: 14px 20px;
  font-size: 15px;
  color: var(--tf-dark-color);
  font-weight: 500;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.partner-check-list li:hover {
  transform: translateX(6px);
  background: #ffffff;
  border-color: rgba(34, 197, 94, 0.3);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04);
}

.partner-check-list li i {
  color: #22c55e;
  font-size: 18px;
  flex-shrink: 0;
}

.partner-check-list li.highlight {
  color: var(--tf-primary-color);
  background: rgba(242, 107, 58, 0.03);
  border-color: rgba(242, 107, 58, 0.15);
  font-weight: 600;
}

.partner-check-list li.highlight:hover {
  background: rgba(242, 107, 58, 0.06);
  border-color: rgba(242, 107, 58, 0.3);
  box-shadow: 0 6px 20px rgba(242, 107, 58, 0.06);
}

.partner-check-list li.highlight i {
  color: var(--tf-primary-color);
}

.partner-intro-img {
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.partner-intro-img img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.partner-intro-img:hover img {
  transform: scale(1.04);
}

.partner-solution-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  margin-bottom: 60px;
}

@media (max-width: 991px) {
  .partner-solution-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 575px) {
  .partner-solution-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.partner-sol-card {
  background: #ffffff;
  border: 1px solid #e4e4e4;
  border-radius: 20px;
  padding: 24px 15px;
  text-align: center;
  transition: all 0.3s ease;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.01);
}

.partner-sol-card:hover {
  transform: translateY(-5px);
  border-color: var(--tf-primary-color);
  box-shadow: 0 12px 25px rgba(242, 107, 58, 0.15);
}

.partner-sol-icon {
  width: 50px;
  height: 50px;
  margin: 0 auto 15px;
  background: var(--tf-peach-soft, #FFEFE7);
  color: var(--tf-primary-color);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.partner-sol-icon:has(> img) {
  background: transparent;
  border-radius: 0;
  width: 60px;
  height: 60px;
}

.partner-sol-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.partner-sol-card:hover .partner-sol-icon {
  transform: scale(1.15) rotate(5deg);
}

.partner-sol-card h5 {
  font-size: 15px;
  font-weight: 700;
  margin: 0;
  color: var(--tf-dark-color);
}

.partner-val-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
  margin-bottom: 60px;
}

@media (max-width: 991px) {
  .partner-val-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575px) {
  .partner-val-grid {
    grid-template-columns: 1fr;
  }
}

.partner-val-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 30px 25px;
  border: 1px solid #e4e4e4;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
  display: flex;
  gap: 15px;
  transition: all 0.3s ease;
}

.partner-val-card:hover {
  transform: translateY(-5px);
  border-color: var(--tf-primary-color);
  box-shadow: 0 12px 25px rgba(242, 107, 58, 0.12);
}

.partner-val-card i {
  color: var(--tf-primary-color);
  font-size: 24px;
  margin-top: 3px;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.partner-val-card img.partner-val-icon-img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  flex-shrink: 0;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.partner-val-card:hover i,
.partner-val-card:hover img.partner-val-icon-img {
  transform: scale(1.15) rotate(-5deg);
}

.partner-val-card h4 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--tf-dark-color);
}

.partner-val-card p {
  font-size: 13px;
  color: var(--tf-muted-color);
  margin: 0;
  line-height: 1.5;
}

.partner-3col-section {
  padding: 40px 0;
  margin-bottom: 60px;
  position: relative;
}

.partner-col-card {
  background: #ffffff;
  border: 1px solid var(--tf-border-color);
  border-radius: 24px;
  padding: 40px 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.015);
  transition: all 0.3s ease;
}

.partner-col-card:hover {
  transform: translateY(-5px);
  border-color: var(--tf-primary-color);
  box-shadow: 0 15px 35px rgba(242, 107, 58, 0.08);
}

.partner-col-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.partner-col-list li {
  position: relative;
  padding-left: 28px;
  font-size: 14px;
  color: var(--tf-text-color);
  line-height: 1.5;
}

.partner-col-list li i {
  position: absolute;
  left: 0;
  top: 2px;
}

.partner-col-list.yes li i {
  color: #22c55e;
}

.partner-col-list.no li i {
  color: #ef4444;
}

.partner-col-list.who li i {
  color: var(--tf-primary-color);
}

.partner-col-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 25px;
  color: var(--tf-dark-color);
  border-left: 3px solid var(--tf-primary-color);
  padding-left: 12px;
}

.partner-earnings-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
  margin-bottom: 50px;
}

@media (max-width: 991px) {
  .partner-earnings-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575px) {
  .partner-earnings-grid {
    grid-template-columns: 1fr;
  }
}

.partner-earn-card {
  background: #ffffff;
  border: 1px solid var(--tf-border-color);
  border-radius: 24px;
  padding: 40px 30px;
  text-align: center;
  transition: all 0.3s ease;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.015);
}

.partner-earn-card:hover {
  transform: translateY(-8px);
  border-color: var(--tf-primary-color);
  box-shadow: 0 20px 40px rgba(242, 107, 58, 0.12);
}

.partner-earn-card.featured {
  background: var(--tf-peach-soft);
  border: 2px solid var(--tf-primary-color);
  transform: scale(1.03);
}

.partner-earn-card.featured:hover {
  transform: translateY(-8px) scale(1.03);
}

.partner-earn-card.featured h4 {
  color: var(--tf-muted-color);
}

.partner-earn-card.featured .earn-referrals {
  color: var(--tf-dark-color);
}

.partner-earn-card.featured .earn-val {
  color: #22c55e;
}

.partner-earn-card.featured .earn-commission {
  background: var(--tf-primary-color);
  color: #ffffff;
}

.partner-earn-card h4 {
  font-size: 16px;
  font-weight: 700;
  color: var(--tf-muted-color);
  margin-bottom: 20px;
}

.earn-referrals {
  font-size: 32px;
  font-weight: 800;
  color: var(--tf-dark-color);
  margin-bottom: 5px;
}

.earn-label {
  font-size: 13px;
  color: var(--tf-muted-color);
  margin-bottom: 20px;
}

.earn-commission {
  display: inline-block;
  background: var(--tf-peach-soft);
  color: var(--tf-primary-color);
  font-weight: 700;
  font-size: 13px;
  padding: 6px 16px;
  border-radius: 30px;
  margin-bottom: 25px;
}

.earn-val {
  font-size: 28px;
  font-weight: 800;
  color: #22c55e;
}

.earn-approx {
  font-size: 12px;
  color: var(--tf-muted-color);
  margin-top: 5px;
}

.renewal-income-card {
  background: var(--tf-peach-soft);
  border: 1px solid var(--tf-peach-color);
  border-radius: 24px;
  padding: 40px;
  color: var(--tf-text-color);
  margin-bottom: 70px;
  display: flex;
  align-items: center;
  gap: 40px;
  box-shadow: 0 15px 35px rgba(242, 107, 58, 0.04);
}

@media (max-width: 991px) {
  .renewal-income-card {
    flex-direction: column;
    text-align: center;
  }
}

.renewal-info {
  flex: 1;
}

.renewal-info h4 {
  font-size: 24px;
  font-weight: 800;
  margin-bottom: 12px;
  color: var(--tf-dark-color);
}

.renewal-info p {
  font-size: 15px;
  color: var(--tf-muted-color);
  margin: 0;
  line-height: 1.6;
}

.renewal-steps {
  display: flex;
  align-items: center;
  gap: 20px;
}

@media (max-width: 991px) {
  .renewal-steps {
    flex-direction: column;
    width: 100%;
    align-items: center;
  }
}

.renewal-step {
  background: #ffffff;
  border: 1px solid var(--tf-border-color);
  border-radius: 16px;
  padding: 20px;
  text-align: center;
  min-width: 140px;
  flex: 1;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.015);
}

@media (max-width: 991px) {
  .renewal-step {
    width: 100%;
    max-width: 280px;
  }
}

.renewal-step i {
  font-size: 24px;
  color: var(--tf-primary-color);
  margin-bottom: 10px;
}

.renewal-step h5 {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 5px;
  color: var(--tf-dark-color);
}

.renewal-step p {
  font-size: 11px;
  color: var(--tf-muted-color);
  margin: 0;
}

.renewal-arrow {
  color: var(--tf-primary-color);
  font-size: 20px;
}

@media (max-width: 991px) {
  .renewal-arrow {
    transform: rotate(90deg);
  }
}

.restaurant-choose-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 70px;
}

@media (max-width: 991px) {
  .restaurant-choose-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575px) {
  .restaurant-choose-grid {
    grid-template-columns: 1fr;
  }
}

.choose-item {
  background: #ffffff;
  border-radius: 16px;
  padding: 20px 24px;
  border: 1px solid #e4e4e4;
  display: flex;
  align-items: center;
  gap: 15px;
  transition: all 0.3s ease;
}

.choose-item:hover {
  transform: translateY(-3px);
  border-color: var(--tf-primary-color);
  box-shadow: 0 10px 20px rgba(242, 107, 58, 0.08);
}

.choose-item i {
  font-size: 18px;
  color: var(--tf-primary-color);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--tf-peach-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.choose-item img.choose-icon {
  width: 36px;
  height: 36px;
  object-fit: contain;
  flex-shrink: 0;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.choose-item:hover img.choose-icon {
  transform: scale(1.15) rotate(5deg);
}

.choose-item span {
  font-size: 14px;
  font-weight: 600;
  color: var(--tf-dark-color);
}

.partner-step-card {
  background: #ffffff;
  border: 1px solid var(--tf-border-color);
  border-radius: 24px;
  padding: 40px 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.015);
  transition: all 0.3s ease;
  position: relative;
}

.partner-step-card:hover {
  transform: translateY(-8px);
  border-color: var(--tf-primary-color);
  box-shadow: 0 20px 40px rgba(242, 107, 58, 0.1);
}

@media (min-width: 768px) {
  .partner-step-card::after {
    content: "\f054";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    top: 50%;
    right: -24px;
    transform: translateY(-50%);
    font-size: 20px;
    color: var(--tf-peach-color);
    z-index: 2;
  }

  .col-md-4:last-child .partner-step-card::after {
    display: none;
  }
}

.step-badge {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--tf-peach-soft);
  color: var(--tf-primary-color);
  font-size: 20px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 25px;
  box-shadow: 0 4px 15px rgba(242, 107, 58, 0.1);
}

.col-md-4:last-child .step-badge {
  background: #f0fdf4;
  color: #22c55e;
  box-shadow: 0 4px 15px rgba(34, 197, 94, 0.1);
}

.partner-step-card h5 {
  font-size: 16px;
  font-weight: 700;
  color: var(--tf-dark-color);
  margin-bottom: 12px;
}

.partner-step-card p {
  font-size: 13px;
  color: var(--tf-muted-color);
  margin: 0;
  line-height: 1.6;
}

.partner-support-section {
  background: #ffffff;
  border-radius: 28px;
  padding: 60px 40px;
  border: 1px solid #e4e4e4;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
  margin-bottom: 80px;
}

@media (max-width: 768px) {
  .partner-support-section {
    padding: 40px 20px;
  }
}

.support-card {
  background: #ffffff;
  border: 1px solid #eaeaea;
  border-radius: 20px;
  padding: 30px 25px;
  height: 100%;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.015);
  position: relative;
  overflow: hidden;
}

/* Subtle background accent card gradient on hover */
.support-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--tf-primary-color);
  transform: scaleX(0);
  transition: transform 0.4s ease;
  transform-origin: left;
}

.support-card:hover::before {
  transform: scaleX(1);
}

.support-card:hover {
  transform: translateY(-8px);
  border-color: var(--tf-primary-color);
  box-shadow: 0 15px 35px rgba(242, 107, 58, 0.08);
}

.support-card-icon {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: var(--tf-peach-soft, #FFEFE7);
  color: var(--tf-primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 20px;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.support-card:hover .support-card-icon {
  background: var(--tf-primary-color);
  color: #ffffff;
  transform: rotate(360deg) scale(1.05);
}

.support-card h5 {
  font-size: 16px;
  font-weight: 700;
  color: var(--tf-dark-color);
  margin-bottom: 12px;
}

.support-card p {
  font-size: 13px;
  color: var(--tf-muted-color);
  margin: 0;
  line-height: 1.6;
}

.network-india-section {
  padding: 50px 40px;
  background: #ffffff;
  border: 1px solid #e4e4e4;
  border-radius: 24px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
  margin-bottom: 80px;
}

@media (max-width: 768px) {
  .network-india-section {
    padding: 30px 20px;
  }
}

.network-regions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 25px;
}

@media (max-width: 575px) {
  .network-regions-grid {
    grid-template-columns: 1fr;
  }
}

.region-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #f8f9fa;
  border: 1px solid #eaeaea;
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 14px;
  color: var(--tf-dark-color);
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  width: 100%;
}

.region-btn i {
  color: var(--tf-muted-color);
  font-size: 16px;
  transition: color 0.3s ease;
}

.region-btn:hover {
  background: #ffffff;
  border-color: rgba(34, 197, 94, 0.3);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

.region-btn.active {
  background: rgba(34, 197, 94, 0.05);
  border-color: rgba(34, 197, 94, 0.3);
  color: #15803d;
  font-weight: 600;
}

.region-btn.active i {
  color: #22c55e;
}

.region-btn.tier2:hover {
  border-color: rgba(242, 107, 58, 0.3);
}

.region-btn.tier2.active {
  background: rgba(242, 107, 58, 0.04);
  border-color: rgba(242, 107, 58, 0.3);
  color: var(--tf-primary-color);
}

.region-btn.tier2.active i {
  color: var(--tf-primary-color);
}

/* Map Styling */
.india-map-container {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  border-radius: 20px;
  background: #fafafa;
  border: 1px solid #eaeaea;
  padding: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
}

.india-map-bg {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.05));
}

.map-pins {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.map-pin {
  position: absolute;
  width: 24px;
  height: 24px;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: auto;
  z-index: 10;
  transition: transform 0.3s ease;
}

.map-pin i {
  font-size: 20px;
  color: #f97316;
  /* default orange */
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
  transition: all 0.3s ease;
}

.map-pin:hover i {
  transform: scale(1.2);
}

.map-pin.active i {
  color: #22c55e;
  /* active green */
  font-size: 26px;
  z-index: 12;
}

.map-pin.tier2-pin i {
  color: var(--tf-primary-color);
}

.map-pin.tier2-pin.active i {
  font-size: 26px;
}

.map-pin.minor-pin {
  width: 8px;
  height: 8px;
  pointer-events: none;
}

.map-pin.minor-pin i {
  font-size: 6px;
  color: rgba(242, 107, 58, 0.5);
}

.map-pins:has(.map-pin[data-pin="tier2"].active) .minor-pin[data-pin="tier2"] {
  opacity: 1 !important;
  transition: opacity 0.5s ease;
}

/* Pulsing effect for active pin */
.pin-pulse {
  position: absolute;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(34, 197, 94, 0.2);
  transform: scale(0.5);
  opacity: 0;
  pointer-events: none;
  z-index: 9;
}

.map-pin.active .pin-pulse {
  animation: pulse-ring 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
  opacity: 1;
}

.map-pin.tier2-pin.active .pin-pulse {
  background: rgba(242, 107, 58, 0.2);
}

@keyframes pulse-ring {
  0% {
    transform: scale(0.5);
    opacity: 0.8;
  }

  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

/* Map Tooltip Card */
.map-tooltip {
  position: absolute;
  transform: translate(-50%, -125%);
  background: #ffffff;
  border: 1px solid #eaeaea;
  border-radius: 12px;
  padding: 12px 16px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  min-width: 170px;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 20;
}

/* Small arrow down for card */
.map-tooltip::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  background: #ffffff;
  border-right: 1px solid #eaeaea;
  border-bottom: 1px solid #eaeaea;
}

.map-tooltip.active {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -135%);
}

.map-tooltip h5 {
  font-size: 13px;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--tf-dark-color);
}

.map-tooltip p {
  font-size: 11px;
  color: var(--tf-muted-color);
  margin: 0;
  line-height: 1.3;
}

.tooltip-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  font-weight: 700;
  color: #15803d;
  background: rgba(34, 197, 94, 0.08);
  padding: 2px 6px;
  border-radius: 20px;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.tooltip-badge.orange {
  color: var(--tf-primary-color);
  background: rgba(242, 107, 58, 0.08);
}

.tooltip-badge .badge-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #22c55e;
  display: inline-block;
}

.tooltip-badge.orange .badge-dot {
  background: var(--tf-primary-color);
}

/* ============================================
   PRICING PAGE ENHANCEMENTS (PDF SPECIFICATIONS)
   ============================================ */

/* Adapted for Indian Restaurants Hero/Banner */
.pricing-indian-banner {
  background: var(--tf-primary-color);
  border-radius: 20px;
  padding: 30px;
  text-align: center;
  margin-bottom: 50px;
  color: #ffffff;
  box-shadow: 0 10px 30px rgba(240, 90, 34, 0.2);
}

.pricing-indian-banner h3 {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 10px;
  font-weight: 700;
  opacity: 0.9;
}

.pricing-indian-banner h2 {
  font-size: 34px;
  font-weight: 800;
  margin: 0;
  letter-spacing: 0.5px;
}

@media (max-width: 768px) {
  .pricing-indian-banner h2 {
    font-size: 24px;
  }
}

/* Four Pillars Grid */
.pricing-pillars-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-bottom: 80px;
}

@media (max-width: 991px) {
  .pricing-pillars-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575px) {
  .pricing-pillars-grid {
    grid-template-columns: 1fr;
  }
}

.pillar-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 30px 20px;
  text-align: center;
  border: 1px solid #ededed;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
  transition: all 0.3s ease;
}

.pillar-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06);
}

.pillar-icon {
  width: 56px;
  height: 56px;
  background: rgba(240, 90, 34, 0.08);
  color: var(--tf-primary-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin: 0 auto 20px;
}

.pillar-card h4 {
  font-size: 17px;
  font-weight: 700;
  color: var(--tf-dark-color);
  margin-bottom: 12px;
}

.pillar-card p {
  font-size: 13.5px;
  color: var(--tf-muted-color);
  margin: 0;
  line-height: 1.6;
}

/* Struggles & VS Section */
.struggles-vs-row {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 40px;
  margin-bottom: 80px;
}

@media (max-width: 991px) {
  .struggles-vs-row {
    grid-template-columns: 1fr;
  }
}

.struggles-card {
  background: #ffffff;
  border: 1px solid #ededed;
  border-radius: 24px;
  padding: 40px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.02);
  position: relative;
  overflow: hidden;
}

.struggles-badge {
  background: var(--tf-dark-color);
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 12px;
  display: inline-block;
  margin-bottom: 24px;
}

.struggles-card h3 {
  font-size: 22px;
  font-weight: 800;
  color: var(--tf-dark-color);
  margin-bottom: 24px;
}

.struggle-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.struggle-list li {
  position: relative;
  padding-left: 32px;
  font-size: 15px;
  color: var(--tf-dark-color);
  font-weight: 500;
}

.struggle-list li i {
  position: absolute;
  left: 0;
  top: 3px;
  color: #ef4444;
  font-size: 18px;
}

.vs-card {
  background: #ffffff;
  border: 1px solid #ededed;
  border-radius: 24px;
  padding: 40px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.02);
}

.vs-badge {
  background: var(--tf-primary-color);
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 12px;
  display: inline-block;
  margin-bottom: 24px;
}

.vs-card h3 {
  font-size: 22px;
  font-weight: 800;
  color: var(--tf-dark-color);
  margin-bottom: 24px;
}

.vs-table-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

@media (max-width: 575px) {
  .vs-table-grid {
    grid-template-columns: 1fr;
  }
}

.vs-column {
  border-radius: 16px;
  padding: 24px;
}

.vs-column.traditional {
  background: rgba(239, 68, 68, 0.03);
  border: 1px solid rgba(239, 68, 68, 0.1);
}

.vs-column.truffle {
  background: rgba(240, 90, 34, 0.03);
  border: 1px solid rgba(240, 90, 34, 0.1);
}

.vs-column h4 {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.vs-column.traditional h4 {
  color: #ef4444;
}

.vs-column.truffle h4 {
  color: var(--tf-primary-color);
}

.vs-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.vs-list li {
  font-size: 14px;
  font-weight: 500;
  color: var(--tf-dark-color);
  display: flex;
  align-items: center;
  gap: 10px;
}

.vs-column.traditional .vs-list li i {
  color: #ef4444;
}

.vs-column.truffle .vs-list li i {
  color: #22c55e;
}

/* Core Platform Features Grid */
.core-features-section {
  margin-bottom: 80px;
}

.core-features-section-title {
  text-align: center;
  font-size: 28px;
  font-weight: 800;
  color: var(--tf-dark-color);
  margin-bottom: 40px;
  position: relative;
}

.core-features-section-title span {
  display: inline-block;
  background: var(--tf-dark-color);
  color: #ffffff;
  font-size: 16px;
  padding: 6px 14px;
  border-radius: 8px;
  margin-right: 12px;
  vertical-align: middle;
}

.core-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

@media (max-width: 991px) {
  .core-features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575px) {
  .core-features-grid {
    grid-template-columns: 1fr;
  }
}

.core-feature-card {
  background: #ffffff;
  border: 1px solid #ededed;
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.01);
  transition: all 0.3s ease;
}

.core-feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.04);
  border-color: var(--tf-primary-color);
}

.core-feature-icon {
  width: 54px;
  height: 54px;
  background: rgba(240, 90, 34, 0.05);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--tf-primary-color);
  margin-bottom: 20px;
}

.core-feature-card h4 {
  font-size: 17px;
  font-weight: 700;
  color: var(--tf-dark-color);
  margin-bottom: 10px;
}

.core-feature-card p {
  font-size: 13.5px;
  color: var(--tf-muted-color);
  line-height: 1.6;
  margin: 0;
}

/* Advanced Modules Section */
.advanced-modules-section {
  background: #ffffff;
  border: 1px solid #ededed;
  border-radius: 24px;
  padding: 40px;
  margin-bottom: 80px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.01);
}

.advanced-modules-title {
  font-size: 24px;
  font-weight: 800;
  color: var(--tf-dark-color);
  margin-bottom: 30px;
  display: flex;
  align-items: center;
}

.advanced-modules-title span {
  background: var(--tf-primary-color);
  color: #ffffff;
  font-size: 16px;
  padding: 6px 14px;
  border-radius: 8px;
  margin-right: 12px;
}

.advanced-modules-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

@media (max-width: 991px) {
  .advanced-modules-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575px) {
  .advanced-modules-grid {
    grid-template-columns: 1fr;
  }
}

.advanced-module-item {
  background: rgba(240, 90, 34, 0.02);
  border: 1px solid rgba(240, 90, 34, 0.08);
  border-radius: 16px;
  padding: 20px;
  text-align: center;
  transition: all 0.3s ease;
}

.advanced-module-item:hover {
  background: #ffffff;
  border-color: var(--tf-primary-color);
  box-shadow: 0 10px 25px rgba(240, 90, 34, 0.08);
}

.advanced-module-icon {
  font-size: 24px;
  color: var(--tf-primary-color);
  margin-bottom: 12px;
}

.advanced-module-item h5 {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--tf-dark-color);
  margin: 0;
}

/* Scale Banner */
.scale-anytime-banner {
  background: var(--tf-dark-color);
  border-radius: 24px;
  padding: 50px 40px;
  color: #ffffff;
  margin-bottom: 80px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
  position: relative;
  overflow: hidden;
}

.scale-anytime-banner::after {
  content: "";
  position: absolute;
  top: -50%;
  right: -20%;
  width: 300px;
  height: 300px;
  background: var(--tf-primary-color);
  filter: blur(120px);
  opacity: 0.15;
  border-radius: 50%;
}

.scale-anytime-banner h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--tf-primary-color);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 10px;
}

.scale-anytime-banner h2 {
  font-size: 30px;
  font-weight: 800;
  margin-bottom: 30px;
}

.scale-features-list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}

@media (max-width: 768px) {
  .scale-features-list {
    flex-direction: column;
    gap: 15px;
  }
}

.scale-feature-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  font-weight: 600;
}

.scale-feature-item i {
  color: var(--tf-primary-color);
  font-size: 18px;
}

/* Pricing Section and Tables */
.comparison-table-wrapper {
  margin-bottom: 80px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.03);
  border-radius: 20px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #ededed;
  cursor: grab;
}

.comparison-table-wrapper.dragging {
  cursor: grabbing;
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  background: #ffffff;
  min-width: 700px;
}

.comparison-table th {
  background: var(--tf-dark-color);
  color: #ffffff;
  font-weight: 700;
  font-size: 15px;
  padding: 22px 24px;
  text-align: center;
}

.comparison-table th:first-child {
  text-align: left;
  white-space: nowrap;
}

.comparison-table th.essentials-header {
  background: #f05a22;
}

.comparison-table th.premium-header {
  background: var(--tf-dark-color);
}

.comparison-table th.enterprise-header {
  background: #f05a22;
}

.comparison-table td {
  padding: 16px 24px;
  border-bottom: 1px solid #f3f3f3;
  text-align: center;
  font-size: 14px;
  color: var(--tf-dark-color);
  font-weight: 500;
}

.comparison-table td:first-child {
  text-align: left;
  font-weight: 600;
  color: var(--tf-dark-color);
  white-space: nowrap;
}

.comparison-table tr:hover td {
  background: rgba(240, 90, 34, 0.01);
}

.comparison-table td i.fa-check {
  color: #22c55e;
  font-size: 16px;
}

.comparison-table td i.fa-xmark {
  color: #ef4444;
  font-size: 16px;
}

/* ============ WHY CHOOSE TRUFFLE PAGE STYLES ============ */
.wct-section {
  padding: 70px 0;
  background-color: var(--tf-white-color);
  position: relative;
}

.wct-section.bg-light {
  background-color: var(--tf-peach-soft);
}

.wct-section-title-wrapper {
  text-align: center;
  margin-bottom: 60px;
}

.wct-section-badge {
  font-size: 13px;
  font-weight: 700;
  color: var(--tf-primary-color);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 12px;
  display: inline-block;
}

.wct-section-title {
  font-size: 38px;
  font-weight: 800;
  color: var(--tf-dark-color);
  line-height: 1.25;
}

.wct-section-title span {
  color: var(--tf-primary-color);
}

.wct-section-subtitle {
  font-size: 16px;
  color: var(--tf-muted-color);
  margin-top: 15px;
  max-width: 750px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.7;
}

/* Why Choose Grid */
.wct-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

@media (max-width: 991px) {
  .wct-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .wct-section {
    padding: 60px 0;
  }
}

@media (max-width: 767px) {
  .wct-section {
    padding: 50px 0;
  }

  .wct-grid {
    grid-template-columns: 1fr;
  }
}

.wct-card {
  background: var(--tf-white-color);
  border: 1px solid rgba(0, 0, 0, 0.04);
  border-radius: 20px;
  padding: 40px 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  display: flex;
  flex-direction: column;
}

.wct-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(242, 107, 58, 0.06);
  border-color: rgba(242, 107, 58, 0.15);
}

.wct-card:hover .wct-card-icon {}

.wct-card-icon {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background-color: var(--tf-peach-soft);
  color: var(--tf-primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 25px;
  transition: all 0.3s ease;
}

.wct-card .wct-card-icon {
  border: 1px solid transparent;
}

.wct-card:hover .wct-card-icon {
  border: 1px solid var(--tf-primary-color);
  color: var(--tf-white-color);
  transform: scale(1.05);
}

.wct-card-title {
  font-size: 19px;
  font-weight: 700;
  color: var(--tf-dark-color);
  margin-bottom: 12px;
}

.wct-card-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--tf-muted-color);
  margin: 0;
}

/* Implementation Timeline */
.wct-timeline {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
}

.wct-timeline::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: var(--tf-peach-color);
  transform: translateX(-50%);
}

@media (max-width: 767px) {
  .wct-timeline::before {
    left: 20px;
    transform: none;
  }
}

.wct-timeline-item {
  position: relative;
  margin-bottom: 50px;
}

.wct-timeline-item:last-child {
  margin-bottom: 0;
}

.wct-timeline-row {
  display: flex;
  align-items: center;
}

@media (max-width: 767px) {
  .wct-timeline-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

.wct-timeline-col {
  width: 50%;
  padding: 0 40px;
}

@media (max-width: 767px) {
  .wct-timeline-col {
    width: 100%;
    padding: 0 0 0 50px;
  }
}

.wct-timeline-item:nth-child(even) .wct-timeline-row {
  flex-direction: row-reverse;
}

@media (max-width: 767px) {
  .wct-timeline-item:nth-child(even) .wct-timeline-row {
    flex-direction: column;
  }
}

.wct-timeline-dot {
  position: absolute;
  left: 50%;
  top: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--tf-white-color);
  border: 4px solid var(--tf-primary-color);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--tf-primary-color);
  font-size: 15px;
  z-index: 2;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

@media (max-width: 767px) {
  .wct-timeline-dot {
    left: 20px;
    transform: translateX(-50%);
    top: 15px;
  }
}

.wct-timeline-card {
  background: var(--tf-white-color);
  border: 1px solid rgba(0, 0, 0, 0.04);
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
  transition: all 0.35s ease;
}

.wct-timeline-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 30px rgba(242, 107, 58, 0.05);
  border-color: rgba(242, 107, 58, 0.1);
}

.wct-timeline-item:nth-child(even) .wct-timeline-card {
  text-align: left;
}

.wct-timeline-step {
  font-size: 12px;
  font-weight: 700;
  color: var(--tf-primary-color);
  text-transform: uppercase;
  margin-bottom: 8px;
}

.wct-timeline-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--tf-dark-color);
  margin-bottom: 10px;
}

.wct-timeline-desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--tf-muted-color);
  margin: 0;
}

/* Support & AMC */
.wct-support-wrapper {
  background: var(--tf-white-color);
  border: 1px solid rgba(0, 0, 0, 0.04);
  border-radius: 24px;
  padding: 60px 40px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
}

@media (max-width: 767px) {
  .wct-support-wrapper {
    padding: 40px 20px;
  }
}

.wct-support-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 30px;
}

@media (max-width: 991px) {
  .wct-support-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .wct-support-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

.wct-support-card {
  display: flex;
  gap: 20px;
}



.wct-support-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background-color: var(--tf-peach-soft);
  color: var(--tf-primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.wct-support-card:hover .wct-support-icon {
  border: 1px solid var(--tf-primary-color);
  color: var(--tf-white-color);
  transform: translateY(-2px);
}

.wct-support-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--tf-dark-color);
  margin-bottom: 8px;
}

.wct-support-desc {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--tf-muted-color);
  margin: 0;
}

/* ============ TRUFFLE ECOSYSTEM PAGE STYLES ============ */
.eco-section {
  padding: 70px 0;
  background-color: var(--tf-white-color);
  position: relative;
}

.eco-section.bg-light {
  background-color: var(--tf-peach-soft);
}

.eco-section-title-wrapper {
  text-align: center;
  margin-bottom: 60px;
}

.eco-section-badge {
  font-size: 13px;
  font-weight: 700;
  color: var(--tf-primary-color);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 12px;
  display: inline-block;
}

.eco-section-title {
  font-size: 38px;
  font-weight: 800;
  color: var(--tf-dark-color);
  line-height: 1.25;
}

.eco-section-title span {
  color: var(--tf-primary-color);
}

.eco-section-subtitle {
  font-size: 16px;
  color: var(--tf-muted-color);
  margin-top: 15px;
  max-width: 750px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.7;
}

/* Unique Ecosystem Layout */
.eco-layout-container {
  display: flex;
  flex-direction: column;
  gap: 60px;
  margin-top: 30px;
}

.eco-layout-row {
  display: flex;
  gap: 40px;
  align-items: stretch;
}

.eco-layout-row.row-reverse {
  flex-direction: row-reverse;
}

.eco-showcase-col {
  flex: 0 0 40%;
  display: flex;
}

@media (min-width: 992px) {
  .eco-showcase-col {
    position: sticky;
    top: 120px;
    align-self: flex-start;
    height: fit-content;
  }
}

.eco-grid-col {
  flex: 0 0 60%;
}

@media (max-width: 991px) {
  .wl-customizer-section {
    padding: 60px 0;
  }

  .eco-section {
    padding: 60px 0;
  }

  .eco-layout-row,
  .eco-layout-row.row-reverse {
    flex-direction: column;
  }

  .eco-showcase-col,
  .eco-grid-col {
    flex: 0 0 100%;
    width: 100%;
  }
}

@media (max-width: 767px) {
  .wl-customizer-section .eco-section {
    padding: 50px 0;
  }

  .eco-showcase-card {
    padding: 30px 20px;
  }
}

.eco-showcase-card {
  background: linear-gradient(135deg, rgba(242, 107, 58, 0.06) 0%, rgba(242, 107, 58, 0.01) 100%);
  border: 1px solid rgba(242, 107, 58, 0.12);
  border-radius: 24px;
  padding: 40px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.01);
}

.eco-showcase-card::before {
  content: '';
  position: absolute;
  top: -30%;
  right: -30%;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(242, 107, 58, 0.08) 0%, rgba(242, 107, 58, 0) 70%);
  pointer-events: none;
}

.eco-showcase-badge {
  font-size: 11px;
  font-weight: 700;
  color: var(--tf-primary-color);
  background: var(--tf-peach-soft);
  padding: 5px 12px;
  border-radius: 100px;
  display: inline-block;
  width: fit-content;
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.eco-showcase-title {
  font-size: 26px;
  font-weight: 800;
  color: var(--tf-dark-color);
  margin-bottom: 15px;
  line-height: 1.35;
}

.eco-showcase-title span {
  color: var(--tf-primary-color);
}

.eco-showcase-desc {
  font-size: 14.5px;
  color: var(--tf-muted-color);
  line-height: 1.7;
  margin-bottom: 25px;
}

.eco-showcase-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.eco-showcase-list li {
  font-size: 14px;
  font-weight: 600;
  color: var(--tf-dark-color);
  display: flex;
  align-items: center;
  gap: 10px;
}

.eco-showcase-list li i {
  color: var(--tf-primary-color);
  font-size: 14px;
}

/* Product tiles grid */
.eco-grid-2x2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

@media (max-width: 575px) {
  .eco-grid-2x2 {
    grid-template-columns: 1fr;
  }
}

.eco-product-tile {
  background: var(--tf-white-color);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 20px;
  padding: 30px;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.01);
}

.eco-product-tile:hover {
  transform: translateY(-5px);
  border-color: rgba(242, 107, 58, 0.15);
  box-shadow: 0 15px 35px rgba(242, 107, 58, 0.06);
}


.eco-tile-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background-color: var(--tf-peach-soft);
  color: var(--tf-primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  margin-bottom: 20px;
  transition: all 0.3s ease;
}

.eco-product-tile .eco-tile-icon {
  border: 1px solid transparent;
}

.eco-product-tile:hover .eco-tile-icon {
  border: 1px solid var(--tf-primary-color);
  color: var(--tf-white-color);
  transform: scale(1.05);
}

.eco-tile-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--tf-dark-color);
  margin-bottom: 10px;
}

.eco-tile-title a {
  color: inherit;
  text-decoration: none;
}

.eco-tile-title a:hover {
  color: var(--tf-primary-color);
}

.eco-tile-desc {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--tf-muted-color);
  margin-bottom: 20px;
  flex-grow: 1;
}

.eco-tile-link {
  font-size: 13px;
  font-weight: 700;
  color: var(--tf-primary-color);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap 0.2s ease;
}

.eco-tile-link i {
  font-size: 11px;
}

.eco-tile-link:hover {
  color: var(--tf-primary-color);
  gap: 10px;
}

/* Pillar Section */
.eco-pillars-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}

@media (max-width: 767px) {
  .eco-pillars-grid {
    grid-template-columns: 1fr;
  }
}

.eco-pillar-item {
  display: flex;
  gap: 25px;
}


.eco-pillar-icon {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  background-color: var(--tf-peach-soft);
  color: var(--tf-primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.eco-pillar-item:hover .eco-pillar-icon {
  border: 1px solid var(--tf-primary-color);
  color: var(--tf-white-color);
  transform: rotate(5deg) scale(1.05);
}

.eco-pillar-item .eco-pillar-icon {
  border: 1px solid transparent;
}

.eco-pillar-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--tf-dark-color);
  margin-bottom: 10px;
}

.eco-pillar-desc {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--tf-muted-color);
  margin: 0;
}

/* ==========================================================================
   Truffle White Label - Custom Stylesheet (AI & Benefit Redesign)
   ========================================================================== */

/* Customizer Section */
.wl-customizer-section {
  padding: 70px 0;
  position: relative;
  background: var(--tf-off-white-color);
}

.wl-customizer-container {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 20px;
  background: var(--tf-white-color);
  border: 1px solid var(--tf-border-color);
  border-radius: 24px;
  padding: 30px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.04);
}

.wl-customizer-container .theme-button {
  padding: 12px 18px;
}

/* Control Panel */
.wl-control-panel {
  display: flex;
  flex-direction: column;
  gap: 25px;
  background: var(--tf-off-white-color);
  border: 1px solid var(--tf-border-color);
  padding: 24px;
  border-radius: 16px;
  height: fit-content;
}

.wl-control-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--tf-dark-color);
  margin-bottom: 5px;
  border-bottom: 1px solid var(--tf-border-color);
  padding-bottom: 12px;
}

.wl-form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wl-form-group label {
  font-size: 13px;
  font-weight: 600;
  color: var(--tf-dark-color);
}

.wl-form-input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--tf-border-color);
  border-radius: 8px;
  font-size: 14px;
  color: var(--tf-text-color);
  transition: all 0.3s ease;
  background: var(--tf-white-color);
}

.wl-form-input:focus {
  border-color: var(--tf-primary-color);
  outline: none;
  box-shadow: 0 0 0 3px rgba(242, 107, 58, 0.15);
}

/* Color Presets */
.wl-color-presets {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.wl-color-btn {
  height: 44px;
  border-radius: 8px;
  border: 2px solid transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.wl-color-btn::after {
  content: '';
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.wl-color-btn.active {
  border-color: var(--tf-dark-color);
  transform: scale(1.05);
}

/* Live Preview Mock Browser */
.wl-preview-browser {
  background: var(--tf-white-color);
  border: 1px solid var(--tf-border-color);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  height: 520px;
}

.wl-browser-header {
  background: #f1f2f6;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 15px;
  border-bottom: 1px solid var(--tf-border-color);
}

.wl-browser-dots {
  display: flex;
  gap: 6px;
}

.wl-browser-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.wl-browser-dot.red {
  background: #ff5f56;
}

.wl-browser-dot.yellow {
  background: #ffbd2e;
}

.wl-browser-dot.green {
  background: #27c93f;
}

.wl-browser-address-bar {
  flex-grow: 1;
  background: var(--tf-white-color);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
  color: var(--tf-muted-color);
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: monospace;
}

.wl-browser-address-bar i {
  color: #27c93f;
  font-size: 11px;
}

.wl-browser-content {
  display: grid;
  grid-template-columns: 150px 1fr;
  flex-grow: 1;
  height: calc(100% - 44px);
}

/* Mock POS Sidebar */
.wl-mock-sidebar {
  background: var(--custom-accent-color);
  padding: 15px 10px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  transition: background-color 0.4s ease;
}

.wl-mock-logo {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--tf-white-color);
  font-weight: 700;
  font-size: 13px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.wl-mock-logo-img {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--custom-brand-color);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tf-white-color);
  font-weight: 800;
  font-size: 14px;
  transition: background-color 0.4s ease;
}

.wl-mock-nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wl-mock-nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.6);
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
}

.wl-mock-nav-item.active {
  background: rgba(255, 255, 255, 0.08);
  color: var(--tf-white-color);
  border-left: 3px solid var(--custom-brand-color);
}

/* Mock POS Content Dashboard */
.wl-mock-main {
  background: #f8fafc;
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  overflow-y: auto;
}

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

.wl-mock-title-wrap h4 {
  font-size: 18px;
  font-weight: 700;
  color: var(--tf-dark-color);
  margin: 0;
}

.wl-mock-title-wrap p {
  font-size: 11px;
  color: var(--tf-muted-color);
  margin: 0;
}

.wl-mock-header-badge {
  background: rgba(var(--custom-brand-color-rgb), 0.1);
  color: var(--custom-brand-color);
  border: 1px solid rgba(var(--custom-brand-color-rgb), 0.2);
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  transition: all 0.4s ease;
}

/* Dashboard Grid */
.wl-mock-grid {
  display: grid;
  grid-template-columns: 1.8fr 1.2fr;
  gap: 15px;
  align-items: start;
}

.wl-mock-cards-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.wl-mock-stat-card {
  background: var(--tf-white-color);
  border: 1px solid var(--tf-border-color);
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.wl-mock-stat-label {
  font-size: 10px;
  color: var(--tf-muted-color);
}

.wl-mock-stat-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--tf-dark-color);
}

.wl-mock-stat-value.accent {
  color: var(--custom-brand-color);
  transition: color 0.4s ease;
}

/* Mock Order List */
.wl-mock-orders-card {
  background: var(--tf-white-color);
  border: 1px solid var(--tf-border-color);
  border-radius: 10px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  grid-column: span 3;
}

.wl-mock-card-header {
  font-size: 12px;
  font-weight: 700;
  color: var(--tf-dark-color);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--tf-border-color);
  padding-bottom: 8px;
}

.wl-mock-order-row {
  display: grid;
  grid-template-columns: 45px 1fr 65px 65px;
  font-size: 11px;
  padding: 8px 0;
  border-bottom: 1px solid #f1f5f9;
  align-items: center;
}

.wl-mock-order-row:last-child {
  border: 0;
  padding-bottom: 0;
}

.wl-mock-badge-status {
  background: #e2e8f0;
  color: #475569;
  padding: 2px 6px;
  border-radius: 12px;
  font-size: 9px;
  font-weight: 600;
  text-align: center;
}

.wl-mock-badge-status.paid {
  background: #dcfce7;
  color: #15803d;
}

.wl-mock-btn-action {
  background: var(--custom-brand-color);
  color: var(--tf-white-color);
  border: 0;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.4s ease;
}

/* Checkout Panel */
.wl-mock-checkout {
  background: var(--tf-white-color);
  border: 1px solid var(--tf-border-color);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wl-mock-cart-item {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
}

.wl-mock-cart-totals {
  border-top: 1px dashed var(--tf-border-color);
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wl-mock-total-row {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 500;
}

.wl-mock-total-row.grand {
  font-size: 13px;
  font-weight: 700;
  color: var(--tf-dark-color);
}

.wl-mock-pay-btn {
  background: var(--custom-brand-color);
  color: var(--tf-white-color);
  font-weight: 700;
  border: 0;
  padding: 8px;
  border-radius: 6px;
  font-size: 11px;
  cursor: pointer;
  transition: background-color 0.4s ease;
}

/* AI Solutions CSS (3x2 Grid layout) */
.wl-solutions-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
  margin-top: 40px;
}

.wl-solution-card {
  background: var(--tf-white-color);
  border: 1px solid var(--tf-border-color);
  border-radius: 16px;
  padding: 30px 24px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.wl-solution-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.05);
  border-color: var(--tf-primary-color);
}

.wl-solution-icon-wrap {
  width: 50px;
  height: 50px;
  background: rgba(242, 107, 58, 0.1);
  color: var(--tf-primary-color);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 20px;
}

.wl-solution-card h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--tf-dark-color);
  margin-bottom: 12px;
}

.wl-solution-card p {
  font-size: 14px;
  color: var(--tf-muted-color);
  line-height: 1.6;
  margin: 0;
}

/* ==========================================================
   AI Features Section (Real Woman Image Left, Cards Right)
   ========================================================== */
.wl-ai-split-container {
  margin-top: 40px;
}

.wl-ai-visual-wrap {
  width: 100%;
  height: 100%;
  display: flex;
}

.wl-ai-real-img {
  width: 100%;
  height: 100%;
  min-height: 500px;
  object-fit: cover;
  border-radius: 20px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06);
  border: 1px solid var(--tf-border-color);
  display: block;
}

.wl-ai-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.wl-ai-detail-card {
  background: var(--tf-white-color);
  border: 1px solid var(--tf-border-color);
  border-radius: 16px;
  padding: 24px;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wl-ai-detail-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.04);
  border-color: var(--tf-primary-color);
}

.wl-ai-detail-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(242, 107, 58, 0.08);
  color: var(--tf-primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.wl-ai-detail-info h4 {
  font-size: 15px;
  font-weight: 700;
  color: var(--tf-dark-color);
  margin-bottom: 6px;
}

.wl-ai-detail-info p {
  font-size: 13px;
  color: var(--tf-muted-color);
  line-height: 1.5;
  margin: 0;
}

/* ==========================================================
   NEW REDESIGN: Partner Benefits Inverted Split Layout
   ========================================================== */
.wl-benefits-split-container {
  margin-top: 40px;
}

.wl-benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.wl-benefit-detail-card {
  background: var(--tf-white-color);
  border: 1px solid var(--tf-border-color);
  border-radius: 16px;
  padding: 24px;
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wl-benefit-detail-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.04);
}

/* Card color glow schemes */
.wl-benefit-detail-card.border-green:hover {
  border-color: #22c55e;
  box-shadow: 0 12px 25px rgba(34, 197, 94, 0.12);
}

.wl-benefit-detail-card.border-blue:hover {
  border-color: #3b82f6;
  box-shadow: 0 12px 25px rgba(59, 130, 246, 0.12);
}

.wl-benefit-detail-card.border-orange:hover {
  border-color: #f59e0b;
  box-shadow: 0 12px 25px rgba(245, 158, 11, 0.12);
}

.wl-benefit-detail-card.border-teal:hover {
  border-color: #14b8a6;
  box-shadow: 0 12px 25px rgba(20, 184, 166, 0.12);
}

.wl-benefit-detail-card.border-purple:hover {
  border-color: #8b5cf6;
  box-shadow: 0 12px 25px rgba(139, 92, 246, 0.12);
}

.wl-benefit-detail-card.border-rose:hover {
  border-color: #ec4899;
  box-shadow: 0 12px 25px rgba(236, 72, 153, 0.12);
}

.wl-benefit-detail-card.border-yellow:hover {
  border-color: #eab308;
  box-shadow: 0 12px 25px rgba(234, 179, 8, 0.12);
}

.wl-benefit-detail-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

/* Dynamic color helpers */
.text-green {
  color: #22c55e;
}

.bg-green-light {
  background: rgba(34, 197, 94, 0.08);
}

.text-blue {
  color: #3b82f6;
}

.bg-blue-light {
  background: rgba(59, 130, 246, 0.08);
}

.text-orange {
  color: #f59e0b;
}

.bg-orange-light {
  background: rgba(245, 158, 11, 0.08);
}

.text-teal {
  color: #14b8a6;
}

.bg-teal-light {
  background: rgba(20, 184, 166, 0.08);
}

.text-purple {
  color: #8b5cf6;
}

.bg-purple-light {
  background: rgba(139, 92, 246, 0.08);
}

.text-rose {
  color: #ec4899;
}

.bg-rose-light {
  background: rgba(236, 72, 153, 0.08);
}

.text-yellow {
  color: #eab308;
}

.bg-yellow-light {
  background: rgba(234, 179, 8, 0.08);
}

.wl-benefit-detail-info h4 {
  font-size: 15px;
  font-weight: 700;
  color: var(--tf-dark-color);
  margin-bottom: 6px;
}

.wl-benefit-detail-info p {
  font-size: 13px;
  color: var(--tf-muted-color);
  line-height: 1.5;
  margin: 0;
}

.wl-benefits-visual-wrap {
  width: 100%;
  height: 100%;
  display: flex;
}

.wl-benefits-real-img {
  width: 100%;
  height: 100%;
  min-height: 500px;
  object-fit: cover;
  border-radius: 20px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06);
  border: 1px solid var(--tf-border-color);
  display: block;
}

.pos-type-card .pos-type-title {
  margin-bottom: 0 !important;
}

/* Responsiveness adjustments */
@media (max-width: 991px) {
  .wl-customizer-section {
    padding: 60px 0;
  }

  .wl-customizer-container {
    grid-template-columns: 1fr;
  }

  .wl-preview-browser {
    height: 480px;
  }

  .wl-solutions-container {
    grid-template-columns: 1fr 1fr;
  }

  .wl-ai-split-container,
  .wl-benefits-split-container {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .wl-ai-visual-wrap,
  .wl-benefits-visual-wrap {
    max-width: 480px;
    margin: 0 auto;
  }

  .wl-ai-features-grid,
  .wl-benefits-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .wl-benefits-grid .wl-benefit-detail-card:last-child {
    grid-column: span 2 !important;
  }
}

@media (max-width: 768px) {
  .wl-customizer-section {
    padding: 50px 0;
  }

  .wl-solutions-container {
    grid-template-columns: 1fr;
  }

  .wl-ai-features-grid,
  .wl-benefits-grid {
    grid-template-columns: 1fr;
  }

  .wl-benefits-grid .wl-benefit-detail-card,
  .wl-benefits-grid .wl-benefit-detail-card:last-child {
    grid-column: span 1 !important;
  }

  .wl-benefits-real-img {
    min-height: 300px;
  }

  .wl-mock-sidebar {
    display: none;
  }

  .wl-browser-content {
    grid-template-columns: 1fr;
  }

  .wl-mock-grid {
    grid-template-columns: 1fr;
  }

  .wl-mock-orders-card {
    grid-column: span 1;
  }

  .wl-customizer-container {
    padding: 15px;
  }
}

/* Other hero sections spacing (excluding homepage) */
.services-hero,
.sd-hero,
.blog-detail-header-section {
  padding: 140px 0 40px !important;
}

@media (max-width: 1024px) {

  .services-hero,
  .sd-hero,
  .blog-detail-header-section {
    padding: 120px 0 40px !important;
  }
}

/* Standard Section Header Elements Bottom Spacing (excluding hero sections) */
section:not(.hero-section):not(.services-hero):not(.sd-hero):not(.blog-detail-header-section) [class*="-head"] [class*="-label"],
section:not(.hero-section):not(.services-hero):not(.sd-hero):not(.blog-detail-header-section) [class*="-head"] [class*="-badge"],
section:not(.hero-section):not(.services-hero):not(.sd-hero):not(.blog-detail-header-section) [class*="-head"] .sec-badge,
section:not(.hero-section):not(.services-hero):not(.sd-hero):not(.blog-detail-header-section) .sec-badge,
section:not(.hero-section):not(.services-hero):not(.sd-hero):not(.blog-detail-header-section) .entities-label,
section:not(.hero-section):not(.services-hero):not(.sd-hero):not(.blog-detail-header-section) .outlets-label {
  margin-bottom: 25px !important;
}

section:not(.hero-section):not(.services-hero):not(.sd-hero):not(.blog-detail-header-section) [class*="-head"] h2,
section:not(.hero-section):not(.services-hero):not(.sd-hero):not(.blog-detail-header-section) [class*="-head"] [class*="-title"],
section:not(.hero-section):not(.services-hero):not(.sd-hero):not(.blog-detail-header-section) [class*="-head"] .sec-title,
section:not(.hero-section):not(.services-hero):not(.sd-hero):not(.blog-detail-header-section) .sec-title,
section:not(.hero-section):not(.services-hero):not(.sd-hero):not(.blog-detail-header-section) .entities-title,
section:not(.hero-section):not(.services-hero):not(.sd-hero):not(.blog-detail-header-section) .outlets-title {
  margin-bottom: 25px !important;
}

section:not(.hero-section):not(.services-hero):not(.sd-hero):not(.blog-detail-header-section) [class*="-head"] p,
section:not(.hero-section):not(.services-hero):not(.sd-hero):not(.blog-detail-header-section) [class*="-head"] [class*="-desc"],
section:not(.hero-section):not(.services-hero):not(.sd-hero):not(.blog-detail-header-section) [class*="-head"] [class*="-sub"],
section:not(.hero-section):not(.services-hero):not(.sd-hero):not(.blog-detail-header-section) .sec-desc,
section:not(.hero-section):not(.services-hero):not(.sd-hero):not(.blog-detail-header-section) .entities-sub,
section:not(.hero-section):not(.services-hero):not(.sd-hero):not(.blog-detail-header-section) .outlets-sub {
  margin-bottom: 25px !important;
}

@media (max-width: 767px) {

  section:not(.hero-section):not(.services-hero):not(.sd-hero):not(.blog-detail-header-section) [class*="-head"] [class*="-label"],
  section:not(.hero-section):not(.services-hero):not(.sd-hero):not(.blog-detail-header-section) [class*="-head"] [class*="-badge"],
  section:not(.hero-section):not(.services-hero):not(.sd-hero):not(.blog-detail-header-section) [class*="-head"] .sec-badge,
  section:not(.hero-section):not(.services-hero):not(.sd-hero):not(.blog-detail-header-section) .sec-badge,
  section:not(.hero-section):not(.services-hero):not(.sd-hero):not(.blog-detail-header-section) .entities-label,
  section:not(.hero-section):not(.services-hero):not(.sd-hero):not(.blog-detail-header-section) .outlets-label {
    margin-bottom: 15px !important;
  }

  section:not(.hero-section):not(.services-hero):not(.sd-hero):not(.blog-detail-header-section) [class*="-head"] h2,
  section:not(.hero-section):not(.services-hero):not(.sd-hero):not(.blog-detail-header-section) [class*="-head"] [class*="-title"],
  section:not(.hero-section):not(.services-hero):not(.sd-hero):not(.blog-detail-header-section) [class*="-head"] .sec-title,
  section:not(.hero-section):not(.services-hero):not(.sd-hero):not(.blog-detail-header-section) .sec-title,
  section:not(.hero-section):not(.services-hero):not(.sd-hero):not(.blog-detail-header-section) .entities-title,
  section:not(.hero-section):not(.services-hero):not(.sd-hero):not(.blog-detail-header-section) .outlets-title {
    margin-bottom: 15px !important;
  }

  section:not(.hero-section):not(.services-hero):not(.sd-hero):not(.blog-detail-header-section) [class*="-head"] p,
  section:not(.hero-section):not(.services-hero):not(.sd-hero):not(.blog-detail-header-section) [class*="-head"] [class*="-desc"],
  section:not(.hero-section):not(.services-hero):not(.sd-hero):not(.blog-detail-header-section) [class*="-head"] [class*="-sub"],
  section:not(.hero-section):not(.services-hero):not(.sd-hero):not(.blog-detail-header-section) .sec-desc,
  section:not(.hero-section):not(.services-hero):not(.sd-hero):not(.blog-detail-header-section) .entities-sub,
  section:not(.hero-section):not(.services-hero):not(.sd-hero):not(.blog-detail-header-section) .outlets-sub {
    margin-bottom: 15px !important;
  }
}

/* Force bottom padding of happy clients sticky container to 0px on all devices */
.hc-sticky {
  padding-bottom: 0px !important;
}

/* ============ NEW REDESIGNED PRICING STYLES ============ */
.pricing-bespoke-section {
  padding: 100px 0;
  background-color: #ffffff;
  position: relative;
  overflow: hidden;
}

.pricing-bespoke-img-wrap {
  text-align: center;
  position: relative;
}

.pricing-bespoke-img-wrap img {
  border: 1px solid var(--tf-border-color, #eef2f6);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease;
  max-width: 100%;
  height: auto;
}

.pricing-bespoke-img-wrap img:hover {
  transform: scale(1.01);
}

.pricing-bespoke-content {
  padding-left: 15px;
}

.pricing-bespoke-title {
  font-size: 36px;
  font-weight: 800;
  color: var(--tf-dark-color);
  margin-bottom: 20px;
  line-height: 1.3;
}

.pricing-bespoke-desc {
  font-size: 16px;
  color: var(--tf-muted-color);
  line-height: 1.7;
  margin-bottom: 25px;
}

.pricing-bespoke-list {
  list-style: none;
  padding: 0;
  margin: 0 0 35px 0;
}

.pricing-bespoke-list li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 18px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--tf-dark-color);
}

.pricing-bespoke-list li::before {
  content: "\f058";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 2px;
  color: var(--tf-primary-color);
  font-size: 18px;
}

.theme-link-btn {
  color: var(--tf-primary-color);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 6px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  transition: all 0.3s ease;
}

.theme-link-btn:hover {
  color: var(--tf-primary-color-dark, #e05200);
  gap: 12px;
}

/* Modular Section */
.pricing-modular-section {
  padding: 100px 0;
  background-color: #f8fafc;
}

.pricing-modular-head {
  margin-bottom: 50px;
}

.pricing-modular-title {
  font-size: 36px;
  font-weight: 800;
  color: var(--tf-dark-color);
  margin-top: 10px;
  margin-bottom: 15px;
}

.pricing-modular-desc {
  font-size: 16px;
  color: var(--tf-muted-color);
  max-width: 720px;
  margin: 0 auto;
  line-height: 1.6;
}

.modular-card {
  background: #ffffff;
  padding: 40px 30px;
  border-radius: 20px;
  border: 1px solid var(--tf-border-color, #eef2f6);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 100%;
  text-align: left;
}

.modular-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.06);
}

.modular-icon-wrap {
  width: 54px;
  height: 54px;
  border-radius: 12px;
  background: rgba(255, 122, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}

.modular-icon-wrap img {
  width: 26px;
  height: 26px;
}

.modular-card h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--tf-dark-color);
  margin-bottom: 14px;
}

.modular-card p {
  font-size: 15px;
  color: var(--tf-muted-color);
  line-height: 1.6;
  margin: 0;
}


/* PDF Section */
.pricing-pdf-catalog-section {
  padding: 100px 0;
  background-color: #ffffff;
}

.pricing-pdf-card {
  margin: 0 auto;
  background: #ffffff;
  border-radius: 24px;
  border: 1px solid var(--tf-border-color, #eef2f6);
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

.pricing-pdf-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 30px;
  background-color: #f8fafc;
  border-bottom: 1px solid var(--tf-border-color, #eef2f6);
  flex-wrap: wrap;
  gap: 15px;
}

.pdf-info {
  display: flex;
  align-items: center;
  gap: 15px;
}

.pdf-icon {
  font-size: 26px;
  color: var(--tf-primary-color);
}

.pdf-metadata h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--tf-dark-color);
  margin: 0 0 2px 0;
}

.pdf-metadata p {
  font-size: 13px;
  color: var(--tf-muted-color);
  margin: 0;
}

.btn-download-pdf {
  padding: 10px 24px;
  border: 1px solid var(--tf-border-color, #cbd5e1);
  border-radius: 30px;
  font-size: 14px;
  font-weight: 600;
  color: var(--tf-dark-color);
  background-color: #ffffff;
  transition: all 0.3s ease;
  text-decoration: none;
}

.btn-download-pdf:hover {
  background-color: var(--tf-primary-color);
  color: #ffffff;
  border-color: var(--tf-primary-color);
}

.pricing-pdf-card-body {
  position: relative;
  width: 100%;
  padding-bottom: 95%;
  /* Perfect aspect ratio */
  height: 0;
  background-color: #f1f5f9;
}

.pricing-pdf-card-body iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

@media (max-width: 991px) {

  .pricing-bespoke-section,
  .pricing-modular-section,
  .pricing-pdf-catalog-section {
    padding: 70px 0;
  }

  .pricing-bespoke-title,
  .pricing-modular-title {
    font-size: 30px;
  }

  .pricing-bespoke-content {
    padding-left: 0;
    margin-top: 30px;
  }
}

@media (max-width: 767px) {

  .pricing-bespoke-section,
  .pricing-modular-section,
  .pricing-pdf-catalog-section {
    padding: 50px 0;
  }

  .pricing-bespoke-title,
  .pricing-modular-title {
    font-size: 24px;
  }

  .stats-row {
    flex-direction: column;
    gap: 30px;
  }

  .stats-item-divider {
    display: none;
  }

  .pricing-pdf-card-header {
    flex-direction: column;
    align-items: flex-start;
    padding: 15px 20px;
    gap: 15px;
  }

  .pdf-action {
    width: 100%;
  }

  .btn-download-pdf {
    display: block;
    text-align: center;
    width: 100%;
  }
}

/* ==========================================================================
   Truffle POS Video Section Visibility Fix
   Ensure the video player and section elements fit completely on desktop
   without being cut off at the top under the header or the bottom of screen.
   ========================================================================== */
@media (min-width: 992px) {
  main .sd-howworks {
    min-height: calc(100vh - 80px);
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 110px !important;
    /* clears sticky header and leaves a nice gap */
    padding-bottom: 60px !important;
    box-sizing: border-box;
    scroll-margin-top: 100px;
  }

  main .sd-howworks .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    max-width: 1200px;
  }

  main .sd-howworks .sd-cap-head {
    margin-bottom: 25px;
    flex-shrink: 0;
  }

  main .sd-howworks .howwork-video {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    border-radius: 24px;
    overflow: hidden;
    aspect-ratio: 16/9;
    /* Limit height so video never goes off-screen vertically */
    max-height: calc(100vh - 200px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  }
}