#main { padding-bottom: 37px; background: no-repeat url( '../../images/pages/whitelisting-programme/bg/main.webp' ) center bottom / cover; }
main.container { padding: 0 0 105px; width: 1100px; }
main > div { position: relative; margin: 0 0 30px; padding: 0 15px; }
main h2 { text-align: center; margin: 0 0 45px; }
@keyframes fade-up { 0% { opacity: 0; transform: translateY( 20px ); } 100% { opacity: 1; transform: translateY( 0 ); } }
.button { display: block; margin: 0 auto 50px; width: max-content; max-width: 100%; animation: fade-up 2s forwards; }

/* Intro */
#intro { width: 800px; max-width: 100%; margin: auto; }
#intro h2 { text-align: left; margin: 60px 0 18px; }

/* Criteria */
#criteria { padding: 30px 0 60px; text-align: center; }
#criteria ul { display: grid; grid-template-columns: repeat( auto-fit, minmax( 200px, 1fr ) ); gap: 20px; padding: 0; margin: 0; }
#criteria li { line-height: 1.6; transition: all .4s; background: #fff; padding: 20px; text-align: left; box-shadow: 0 0 14px 0 rgba( 0, 0, 0, .12 ); box-sizing: border-box; border-radius: 10px; animation: fade-up 2s forwards; }
#criteria li img { filter: brightness(0) saturate(100%) invert(68%) sepia(90%) saturate(435%) hue-rotate(357deg) brightness(101%) contrast(98%); margin: 0 0 15px; }
#criteria li:nth-of-type( 2 ) img { filter: brightness(0) saturate(100%) invert(58%) sepia(67%) saturate(387%) hue-rotate(94deg) brightness(94%) contrast(99%); }
#criteria li:nth-of-type( 3 ) img { filter: brightness(0) saturate(100%) invert(59%) sepia(61%) saturate(532%) hue-rotate(139deg) brightness(99%) contrast(91%); }
#criteria li:nth-of-type( 4 ) img { filter: brightness(0) saturate(100%) invert(70%) sepia(60%) saturate(3022%) hue-rotate(214deg) brightness(106%) contrast(105%); }
#criteria li:before { display: none; }
#criteria p b { display: block; font-size: clamp( 13pt, 2.5vw, 15pt ); line-height: 1.2; color: #0f165f; margin: 0 0 13px; }

/* Operators */
#operators .container > div { margin: 20px 0 20px auto; width: 200px; max-width: 100%; }
#operators input { display: block; border: 1px solid #cbcbcb; border-radius: 4px; margin: 0 0 30px auto; }
#operators section { display: grid; grid-template-columns: repeat( 4, minmax( 216px, 1fr ) ); gap: 20px 15px; margin: 0 0 30px; }
#operators > p { width: 800px; max-width: 100%; margin: 0 auto 20px; }
.operator { transition: all .4s; box-shadow: 0 0 14px 0 rgba( 0, 0, 0, .12 ); background: #fff; box-sizing: border-box; border-radius: 10px; padding: 20px 12px; animation: fade-up 2s forwards; }
.operator h3 { margin: 0 0 15px; font-size: clamp( 12pt, 2.5vw, 14pt ); line-height: 1.2; letter-spacing: -.5px; }
.operator p { font-size: 10pt; margin: 0; }
.text .operator a { color: #000; }
.text .operator a:hover { color: #0298da; }

/* Testimonials */
#testimonials { padding: 54px 0 100px; background: url( '../../images/pages/whitelisting-programme/bg/testimonials.webp' ) no-repeat center/cover; margin: 0; }
#testimonials .container { padding: 0 15px; }
#testimonials section > div div { background: #fff url( '../../images/pages/whitelisting-programme/bg/block.webp' ) no-repeat top right; box-sizing: border-box; border-radius: 10px; padding: 21px; box-shadow: 0 0 14px 0 rgba( 0, 0, 0, .12 ); }
#testimonials p { font-size: 11pt; margin: 0 0 13px; line-height: 1.6; padding: 44px 0 0; }
#testimonials cite { display: block; text-align: right; color: #21145f; margin: 20px 0 0; font-size: 11pt; font-style: normal; }

/* Contact */
#contact-us { padding: 72px 15px; margin: 0; background: url( '../../images/pages/whitelisting-programme/bg/assistance.webp' ) no-repeat center/cover; }
#contact-us h2 { text-align: center; color: #fff; margin: 0 0 20px; }
#contact-us p { text-align: center; color: #fff; width: 800px; line-height: 1.6; max-width: 100%; margin: 0 auto 20px; }
#contact-us a { position: relative; color: #fff; }
#contact-us a:after { content: ''; position: absolute; left: 0; bottom: -4px; width: 100%; height: 2px; background: #0098ce; transform: scaleX(1); transform-origin: left; transition: transform .3s; }
#contact-us a:hover:after { transform: scaleX(0); transform-origin: right; }
#contact-us a:hover { color: #0098ce; }
/* #contact-us a:hover { text-decoration: underline; } */

@media (max-width: 940px) {
	#operators section { grid-template-columns: repeat( auto-fit, minmax( 216px, 1fr ) ); }
}

@media (max-width: 550px) {
	#intro h2 { margin: 40px 0 18px; }
	
	#criteria { padding: 30px 0 40px; }
	
	#testimonials { padding: 15px 20px 100px; }

	#contact-us { padding: 40px 15px; }
}