body{
background:linear-gradient(135deg,#061a40,#0b2c5d,#0e4d92);
color:#fff;
overflow-x:hidden;
}

/* HERO */

.hero{
padding:90px 20px 60px;
text-align:center;
max-width:100%;
margin:auto;
}

.hero h1{

font-size:48px;
font-weight:700;
margin-bottom:20px;
animation:fadeDown 1s ease;
}

.hero h1 span{
color:#FFD54F;
}

.hero p{
font-size:18px;
max-width:850px;
margin:auto;
line-height:1.8;
opacity:.9;
animation:fadeUp 1.2s ease;
}

/* Cards */

.container{

max-width:1300px;
margin:auto;
padding:40px 20px 80px;

display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;

}

.card{

background:#a1aecb;
backdrop-filter:blur(15px);
border:1px solid rgba(255,255,255,.15);
border-radius:25px;
padding:35px 30px;
text-align:center;
transition:.4s;
position:relative;
overflow:hidden;

}

.card:before{

content:"";
position:absolute;
top:-100%;
left:-100%;
width:250%;
height:250%;
background:linear-gradient(45deg,transparent,rgba(255,255,255,.15),transparent);
transform:rotate(35deg);
transition:.8s;

}

.card:hover:before{
top:100%;
left:100%;
}

.card:hover{

transform:translateY(-12px);
box-shadow:0 20px 40px rgba(0,0,0,.35);

}

.icon{

width:95px;
height:95px;
margin:auto;
border-radius:50%;
background:linear-gradient(135deg,#FFD54F,#FF9800);

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

font-size:40px;
color:#fff;

margin-bottom:25px;
box-shadow:0 15px 30px rgba(255,193,7,.35);

animation:float 3s infinite ease-in-out;

}

.card h3{

font-size:24px;
margin-bottom:15px;
color:#000;

}

.card p{

font-size:15px;
line-height:1.8;
opacity:.9;
margin-bottom:30px;
color:#000;

}

.btn{

display:inline-block;
padding:14px 32px;
border-radius:50px;
background:#FFD54F;
color:#111;
font-weight:600;
text-decoration:none;
transition:.3s;

}

.btn:hover{

background:#fff;
transform:scale(1.05);

}

/* Footer */

.bottom{

padding:40px 20px;
text-align:center;
font-size:18px;
background:rgba(255,255,255,.05);

}

/* Animation */

@keyframes float{

0%{transform:translateY(0);}
50%{transform:translateY(-8px);}
100%{transform:translateY(0);}

}

@keyframes fadeDown{

from{
opacity:0;
transform:translateY(-50px);
}

to{
opacity:1;
transform:translateY(0);
}

}

@keyframes fadeUp{

from{
opacity:0;
transform:translateY(40px);
}

to{
opacity:1;
transform:translateY(0);
}

}

/* Responsive */

@media(max-width:1100px){

.container{
grid-template-columns:repeat(2,1fr);
}

.hero h1{
font-size:38px;
}

}

@media(max-width:700px){

.container{
grid-template-columns:1fr;
}

.hero{
padding:70px 20px 40px;
}

.hero h1{
font-size:32px;
}

.hero p{
font-size:16px;
}

}