:root{
--orange:#E97E2E;
--blue:#239CD3;
--green:#60B044;
--dark:#141414;
--light:#f4f7fb;
--border:#dcdcdc;
}

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial,sans-serif;
}

html{
scroll-behavior:smooth;
}

body{
background:var(--light);
color:#333;
}

/* HEADER */

header{
background:#141414;
display:flex;
justify-content:space-between;
align-items:center;
padding:18px 60px;
}

header img{
height:90px;
}

header a{
color:white;
text-decoration:none;
font-size:17px;
font-weight:bold;
transition:.3s;
}

header a:hover{
color:var(--orange);
}

/* HERO */

.hero{

height:320px;

background:
linear-gradient(rgba(0,0,0,.72),rgba(0,0,0,.72)),
url("https://images.unsplash.com/photo-1521737604893-d14cc237f11d?w=1600")
center/cover;

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

padding:20px;

color:white;

}

.hero h1{

font-size:54px;
color:var(--orange);
margin-bottom:18px;

}

.hero p{

max-width:820px;

font-size:20px;

line-height:1.7;

}

/* MAIN */

.container{

max-width:1250px;

margin:70px auto;

padding:0 20px;

}

.form-box{

background:white;

padding:55px;

border-radius:18px;

box-shadow:0 15px 40px rgba(0,0,0,.12);

}

.section-title{

font-size:28px;

color:var(--blue);

margin-bottom:10px;

}

.section-subtitle{

color:#666;

margin-bottom:40px;

font-size:17px;

line-height:1.7;

}

/* SECTION DIVIDER */

.form-section{

margin-top:45px;

}

.form-section h3{

font-size:24px;

color:var(--orange);

margin-bottom:10px;

}

.form-section hr{

border:none;

height:3px;

background:linear-gradient(to right,var(--orange),var(--blue));

margin-bottom:30px;

border-radius:20px;

}

/* GRID */

.grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:30px;

}

.input-group{

display:flex;

flex-direction:column;

margin-bottom:12px;

}

.input-group label{

font-weight:bold;

margin-bottom:9px;

font-size:16px;

}

input,
select,
textarea{

padding:16px;

font-size:16px;

border:1px solid var(--border);

border-radius:10px;

outline:none;

transition:.3s;

background:white;

}

input:focus,
select:focus,
textarea:focus{

border-color:var(--blue);

box-shadow:0 0 8px rgba(35,156,211,.20);

}

textarea{

height:220px;

resize:none;

}

.full{

grid-column:1/3;

}

@media(max-width:900px){

.grid{

grid-template-columns:1fr;

}

.full{

grid-column:1;

}

.hero{

height:auto;

padding:80px 20px;

}

.hero h1{

font-size:38px;

}

.hero p{

font-size:17px;

}

.form-box{

padding:30px;

}

}

/* small-screen fix: long <select> options / inputs must not widen the page */
.grid > *{min-width:0}
.input-group input,.input-group select,.input-group textarea{width:100%;max-width:100%}
@media(max-width:480px){.form-box{padding:20px}.container{padding:0 14px}}