/* General */
#main { padding-bottom: 37px; background: no-repeat url( '../../images/pages/maritime-ai-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; }
.button { display: block; margin: 0 auto 50px; width: max-content; max-width: 100%; animation: fade-up 2s forwards; }
.blocks { display: flex; flex-wrap: wrap; gap: 40px; justify-content: center; }
.blocks div { line-height: 1.6; transition: all .4s; opacity: 0; text-align: left; width: 300px; padding: 21px 30px; box-sizing: border-box; border-radius: 10px; box-shadow: 0 0 14px 0 rgba( 0, 0, 0, .12 ); background: no-repeat url( '../../images/pages/maritime-ai-programme/bg/block.webp' ) #FFF top right; }
.blocks div.appear { animation: fade-up 2s forwards; }
.blocks h3 { letter-spacing: 0; margin: 13px 0; line-height: 1.2; min-height: 50px; font-size: 15pt; }
.blocks div > *:last-child { margin-bottom: 0; }
@keyframes fade-up { 0% { opacity: 0; transform: translateY( 20px ); } 100% { opacity: 1; transform: translateY( 0 ); } }

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

/* What we cover */
#coverage { padding: 65px 0 80px; margin: 60px auto 50px; text-align: center; background: no-repeat url( '../../images/pages/maritime-ai-programme/bg/coverage.webp' ) center/cover fixed; }
#coverage h2 { margin: 0 0 52px; color: #fff; }
#coverage .blocks { flex-wrap: nowrap; gap: 17px; max-width: 95%; margin: auto; }
#coverage .blocks div { text-align: left; padding: 40px 40px 30px; box-shadow: 0 0 10px #00000059; background: #FFF; border-radius: 12px; width: calc( ( 100% - 100px ) / 3 ); max-width: 100%; transition: all .4s; position: relative; z-index: 3; }
#coverage .blocks div:nth-of-type( 2 ) { z-index: 2; }
#coverage .blocks div:nth-of-type( 3 ) { z-index: 1; }
#coverage .blocks div:not( :last-of-type ):after { content: ' '; font-size: clamp( 35pt, 5vw, 35pt ); color: #fff; display: block; position: absolute; top: 50%; right: -34px; transform: translateY( -50% ); aspect-ratio: 1; width: 55px; background: no-repeat url( '../../images/pages/maritime-ai-programme/icons/arrow-right.webp' ) center/cover; z-index: 2; }
#coverage .blocks .appear:hover { margin: -10px 0; background: linear-gradient( 180deg, #176ec6 0%, #39c4f7 100% ); color: #fff; }
#coverage .blocks h3 { margin: 0 auto 5px; min-height: auto; width: max-content; max-width: 100%; background: linear-gradient( 110deg, #ff7802, #8500d3 ); background-clip: border-box; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: clamp( 16pt, 2.5vw, 18pt ); }
#coverage .blocks .appear:hover h3 { color: #fff; background: 0; -webkit-background-clip: unset; -webkit-text-fill-color: unset; }
#coverage ul { text-align: left; padding: 0; margin: 0; }
#coverage li { padding: 0 0 0 30px; }
#coverage li + li { margin: 14px 0 0; }
#coverage li:before { content: ' '; background: no-repeat url( '../../images/pages/maritime-ai-programme/icons/check-mark.svg' ) center/cover; width: 21px; aspect-ratio: 1; top: 1px; }
#coverage li:has( > p ) { padding: 0; }
#coverage li:has( > p ):before { display: none; }
#coverage ol li:before { content: counter( list ); color: #fff; font-weight: 600; background: #0098ce; transition: all .4s; width: 20px; aspect-ratio: 1; border-radius: 50%; text-align: center; line-height: 19px; }
#coverage .blocks em { text-align: center; display: block; margin: 0 0 30px; font-style: normal; font-size: clamp( 12pt, 2.5vw, 14pt ); line-height: 1.1; }
#coverage .blocks .appear:hover li:before { color: #fff; }

/* Benefits */
#benefits { margin: 0 auto 60px; }
#benefits h2 { text-align: center; margin: 0 0 34px; }
#benefits .blocks div { min-height: 210px; width: calc( ( 100% - 80px ) / 3 ); }
#benefits img { margin: 0 0 13px; }

/* Contact */
#contact-cta { margin: 0; padding: 65px 0 80px; background: no-repeat url( '../../images/pages/maritime-ai-programme/bg/contact-us.webp' ) center/cover fixed; }
#contact-cta h2 { margin: 0 0 45px; color: #fff; }
#contact-cta section { display: grid; grid-template-columns: repeat( 2, 1fr ); gap: 30px; width: 720px; max-width: 100%; margin: 42px auto 0; }
#contact-cta a { color: #fff; background: #0097ce; box-shadow: 0 0 12px 3px #00000026; padding: 30px 50px; border-radius: 28px; max-width: 100%; margin: 65px auto 0; display: block; text-align: center; box-sizing: border-box; }
#contact-cta a:hover { transform: translateY( -10px ); background: #21145f;}
#contact-cta h3 { line-height: 1.2; color: #FFF; margin: 0 0 20px; min-height: 48px; display: flex; width: 100%; justify-content: center; align-items: center; }
#contact-cta p { max-width: 100%; margin: 0; letter-spacing: 1.25px; font-size: 11pt; line-height: 1.5; }
#contact-cta a {  border-bottom: 1px solid #0098ce; margin: 0 0 0 4px; }
#contact-cta a [href^="mailto:"]:before { content: '\e802'; display: inline-block; vertical-align: middle; margin: 0 6px 0 0; font: 13pt 'ssa'; }
#contact-cta a small { letter-spacing: .5px; }

/* Testimonials */
#testimonials { padding: 54px 0 100px; background: url( '../../images/pages/maritime-ai-programme/bg/testimonials.webp' ) no-repeat center/cover; margin: 0; }
#testimonials h2 { margin: 0 0 15px; }
#testimonials em { text-align: center; display: block; font-style: normal; font-weight: 400; margin: 0 0 45px; }
#testimonials .container { padding: 0 15px; }
#testimonials section > div div { background: #fff url( '../../images/pages/maritime-ai-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/maritime-ai-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; }

#criteria, #operators, #testimonials, #contact-us { display: none; }

@media (max-width: 1000px) {
	#coverage .blocks div { padding: 40px 20px 30px; }
}

@media (max-width: 900px) {
	#coverage .blocks { flex-wrap: wrap; gap: 40px 30px; }
	#coverage .blocks div { width: calc( ( 100% - 30px ) / 2 ); }
	#coverage .blocks div:not( :last-of-type ):after { display: none; }
}

@media (max-width: 860px) {
    .blocks h3 { font-size: 15pt; }
}

@media (max-width: 800px) {
	#coverage { margin: 50px auto; }
	#coverage .blocks { flex-direction: column; align-items: center; }
    #coverage .blocks div { width: 100%; max-width: 400px; padding: 30px 25px 20px; }
	#coverage .blocks div:not( :last-of-type ):after { display: block; right: auto; left: 50%; transform: translateX( -50% ) rotate( 90deg ); top: auto; bottom: -48px; }

	#benefits .blocks div { width: calc( ( 100% - 40px ) / 2 ); }
}

@media (max-width: 760px) {
	#coverage h2 { margin: 0 0 40px; }
}

@media (max-width: 679px) {
    .blocks h3 { min-height: auto; }

	#contact-cta section { grid-template-columns: auto; width: 300px; max-width: 100%; margin: auto; }
}

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

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

@media (max-width: 650px) {
	#benefits .blocks div { padding: 21px 15px; background-size: 80px; }
	#benefits img { height: 40px; max-width: 100%; }

	#contact-cta h2 { margin: 0 0 35px; }
}

@media (max-width: 500px) {
    .blocks h3 { font-size: 13pt; }
}

@media (max-width: 480px) {
    #coverage, #contact-cta { padding: 40px 0; }

	#contact-cta p { line-height: 1.4; }

    .blocks, #coverage .blocks { gap: 20px; }
	#coverage .blocks div:not( :last-of-type ):after { bottom: -38px; }
	#benefits .blocks div { width: calc( ( 100% - 20px ) / 2 ); }
}