*{

box-sizing:border-box;

}


body{

margin:0;

font-family:
Arial, Helvetica, sans-serif;

color:#243447;

line-height:1.6;

}




header{

background:
linear-gradient(
rgba(15,45,75,.85),
rgba(15,45,75,.85)
);

color:white;

text-align:center;

padding:90px 20px;

}



.logo{

font-size:34px;

font-weight:bold;

letter-spacing:5px;

}



header h1{

font-size:45px;

max-width:900px;

margin:auto;

}



header p{

font-size:20px;

}



section{

padding:70px 10%;

}



h2{

text-align:center;

font-size:32px;

margin-bottom:40px;

}




.cards{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(250px,1fr));

gap:25px;

}



.card{

background:#f5f7fa;

padding:30px;

border-radius:15px;

}




.country-layout{

display:grid;

grid-template-columns:300px 1fr;

gap:40px;

align-items:start;

}





.country-list button{

width:100%;

display:block;

margin-bottom:15px;

padding:15px;

border:none;

border-radius:10px;

background:#12395b;

color:white;

font-size:18px;

cursor:pointer;

}



.country-list button:hover{

background:#c9a45c;

}




.info-card{

background:white;

padding:35px;

border-radius:15px;

box-shadow:
0 10px 30px rgba(0,0,0,.12);

min-height:260px;

}




.info-card a{

display:inline-block;

margin-top:20px;

padding:12px 25px;

background:#12395b;

color:white;

text-decoration:none;

border-radius:25px;

}




.procedure-grid{

display:grid;

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

gap:20px;

}



.procedure-grid div{

background:#f5f7fa;

padding:30px;

text-align:center;

font-size:20px;

border-radius:15px;

}




footer{

background:#102c45;

color:white;

text-align:center;

padding:40px;

}



.small{

font-size:13px;

opacity:.8;

}





@media(max-width:800px){


.country-layout{

grid-template-columns:1fr;

}



.procedure-grid{

grid-template-columns:1fr 1fr;

}



header h1{

font-size:32px;

}


}