/*==========================================
ROYAL BANK
OPEN ACCOUNT
==========================================*/

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

body{

background:#eef4fb;
color:#1d3557;

}

.container{

width:92%;
max-width:1250px;
margin:auto;

}

/*==========================================
HEADER
==========================================*/

.header{

background:#004990;
padding:18px 0;
box-shadow:0 8px 20px rgba(0,0,0,.12);

}

.header .container{

display:flex;
justify-content:space-between;
align-items:center;

}

.logo{

display:flex;
align-items:center;
gap:15px;

}

.logo img{

width:60px;

}

.logo h2{

font-size:30px;
font-weight:700;

}

.blue{

color:white;

}

.yellow{

color:#ffd400;

}

.back-btn{

padding:13px 22px;
background:white;
color:#004990;
text-decoration:none;
font-weight:bold;
border-radius:10px;
transition:.3s;

}

.back-btn:hover{

background:#ffd400;
color:#003b78;

}

/*==========================================
FORMULAIRE
==========================================*/

.open-account{

padding:60px 0;

}

.card{

background:white;
padding:45px;
border-radius:22px;
box-shadow:0 18px 40px rgba(0,0,0,.08);

}

.card h1{

font-size:38px;
color:#004990;
margin-bottom:15px;

}

.card p{

color:#666;
margin-bottom:35px;

}

.grid{

display:grid;
grid-template-columns:repeat(2,1fr);
gap:25px;

}

.form-group{

display:flex;
flex-direction:column;

}

.form-group label{

font-weight:600;
margin-bottom:10px;

}

.form-group input,
.form-group select{

padding:15px;
border:1px solid #d7dce3;
border-radius:12px;
font-size:15px;
transition:.3s;
outline:none;

}

.form-group input:focus,
.form-group select:focus{

border-color:#0057a3;
box-shadow:0 0 0 3px rgba(0,87,163,.15);

}

.full{

grid-column:1/3;

}

.check{

margin-top:30px;
margin-bottom:30px;

}

.check label{

display:flex;
gap:10px;
align-items:flex-start;
font-size:15px;

}

.submit-btn{

width:100%;
padding:18px;
border:none;
background:#004990;
color:white;
font-size:18px;
font-weight:bold;
border-radius:12px;
cursor:pointer;
transition:.3s;

}

.submit-btn:hover{

background:#00376b;

}

/*==========================================
RESPONSIVE
==========================================*/

@media(max-width:900px){

.grid{

grid-template-columns:1fr;

}

.full{

grid-column:auto;

}

.card{

padding:30px;

}

.card h1{

font-size:30px;

}

.header .container{

flex-direction:column;
gap:20px;

}

.back-btn{

width:100%;
text-align:center;

}

}