/* General */
#main { padding-bottom: 37px; background: no-repeat url( '../../images/pages/edp-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/edp-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:last-of-type { font-size: clamp( 12pt, 2.5vw, 13pt ); }

/* Trainings */
#trainings { padding: 65px 0 80px; margin: 60px auto 50px; max-width: 100%; background: url( '../../images/pages/edp-programme/bg/trainings.webp' ) no-repeat center/cover fixed; }
#trainings .container { display: flex; flex-wrap: wrap; gap: 24px 12px; justify-content: center; max-width: 95%; }
#trainings h2 { flex-grow: 1; margin: 0 0 28px; width: 100%; color: #fff; }
#trainings div h3 { margin: 0 0 20px; 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( 14pt, 2.5vw, 18pt ); letter-spacing: -1px; text-align: left; }
#trainings div.appear { width: calc( ( 100% - 24px ) / 3 ); background: no-repeat url( '../../images/pages/edp-programme/bg/block-grey.webp' ) #FFF top right; box-shadow: 0 0 10px #00000059; padding: 40px 25px 30px; border-radius: 12px; text-align: left; transition: all .4s; animation: fade-up 2s forwards; box-sizing: border-box; }
#trainings ul { text-align: left; padding: 0; margin: 0; }
#trainings li { padding: 0 0 0 22px; }
#trainings li + li { margin: 9px 0 0; }
#trainings li:before { content: ' '; background: no-repeat url( '../../images/pages/edp-programme/icons/check-mark.svg' ) center/cover; width: 16px; aspect-ratio: 1; top: 2px; }
#trainings b { display: block; line-height: 1.2; }
#trainings h4 { text-align: left; font-size: clamp( 12pt, 2.5vw, 13pt ); margin: 18px 0 13px; }
#trainings li a { font-size: clamp( 10pt, 2vw, 11pt ); }
#trainings li a:hover { color: #0098ce; }

/* 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; max-height: 64px; }

/* Contact */
#contact-cta { margin: 0; padding: 65px 0 80px; background: no-repeat url( '../../images/pages/edp-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: auto; justify-content: center; 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 40px; border-radius: 28px; width: 380px; max-width: 100%; display: block; text-align: center; box-sizing: border-box; border-bottom: 1px solid #0098ce; margin: auto; }
#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 [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/edp-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/edp-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/edp-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) {
	#trainings div.appear { padding: 40px 20px 30px; }
}

@media (max-width: 900px) {
	#trainings div.appear { width: calc( ( 100% - 12px ) / 2 ); }
}

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

@media (max-width: 800px) {
	#trainings { margin: 50px auto; padding: 40px 0 50px; }

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

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

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

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

@media (max-width: 600px) {
	#trainings div.appear { width: 100%; }
}

@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, #trainings h3 { font-size: 13pt; }
}

@media (max-width: 480px) {
	#trainings { padding: 0; margin: 40px auto; }

    #contact-cta { padding: 40px 0; }
	#contact-cta p { line-height: 1.4; }

    .blocks, #trainings .blocks { gap: 20px; }
	#benefits .blocks div { width: 100%; }
}