body{
margin:0;
font-family:Arial,Helvetica,sans-serif;
background:#f4f6f9;
}

/* HERO */

.online-hero{
background:url('../images/online-hero.jpg') center/cover no-repeat;
height:420px;
position:relative;
}

.overlay{
background:rgba(0,0,0,.6);
position:absolute;
width:100%;
height:100%;
}

.hero-content{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
color:#fff;
text-align:center;
}

.hero-content h1{
font-size:46px;
}

/* INTRO */

.intro{
padding:80px 10%;
background:#fff;
text-align:center;
}

.intro h2{
color:#0a2a5e;
}

/* CONTENT */

.content-block{
display:flex;
gap:40px;
padding:80px 10%;
align-items:center;
background:#fff;
}

.content-block.reverse{
flex-direction:row-reverse;
background:#f4f6f9;
}

.content-block img{
width:45%;
border-radius:20px;
box-shadow:0 10px 30px rgba(0,0,0,.1);
}

.content-block h3{
color:#ff7a00;
}

.content-block ul{
margin-left:20px;
}

/* SEO */

.seo-text{
padding:90px 10%;
background:#fff;
}

/* CTA */

.cta{
background:#0a2a5e;
color:#fff;
text-align:center;
padding:80px 10%;
}

.cta a{
background:#ff7a00;
padding:14px 40px;
color:#fff;
border-radius:40px;
text-decoration:none;
}

/* MOBILE */

@media(max-width:768px){

.content-block{
flex-direction:column;
}

.content-block img{
width:100%;
}

.hero-content h1{
font-size:30px;
}

}