*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:Arial, Helvetica, sans-serif;
    color:#fff;
    background:#081420;
}



/* HERO */

.hero{

    position:relative;

    height:100vh;

    background:linear-gradient(135deg,#071E3D,#1F4287,#278EA5);

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    overflow:hidden;
}



.overlay{

    position:absolute;

    width:100%;
    height:100%;

    background:
    radial-gradient(circle at top left,
    rgba(255,255,255,.15),
    transparent 40%),

    radial-gradient(circle at bottom right,
    rgba(255,255,255,.08),
    transparent 35%);
}



.hero-content{

    position:relative;
    z-index:2;
    max-width:800px;
    padding:20px;

    animation:fadeUp 1s ease;
}



.hero h1{

    font-size:64px;
    margin-bottom:20px;
}



.hero p{

    font-size:22px;
    line-height:1.7;
    margin-bottom:40px;
}



.btn{

    display:inline-block;

    padding:16px 40px;

    background:#fff;

    color:#0b4b8d;

    border-radius:50px;

    text-decoration:none;

    font-weight:bold;

    transition:.3s;
}

.btn:hover{

    transform:translateY(-3px);

    box-shadow:0 15px 35px rgba(0,0,0,.3);

}



/* SECTION */

.cards-section{

    padding:90px 20px;

    background:#f5f8fb;

    color:#222;

}



.cards-section h2{

    text-align:center;

    font-size:40px;

    margin-bottom:60px;

}



.cards{

    display:grid;

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

    gap:35px;

    max-width:1200px;

    margin:auto;

}



.card{

    background:#fff;

    border-radius:20px;

    padding:40px;

    text-align:center;

    transition:.35s;

    box-shadow:0 12px 35px rgba(0,0,0,.08);
}



.card:hover{

    transform:translateY(-10px);

}



.icon{

    font-size:60px;

    margin-bottom:20px;

}



.card h3{

    margin-bottom:20px;

    font-size:28px;

}



.card p{

    line-height:1.8;

    margin-bottom:30px;

    color:#666;

}



.card-btn{

    display:inline-block;

    padding:14px 35px;

    text-decoration:none;

    background:#1F4287;

    color:#fff;

    border-radius:40px;

    transition:.3s;

}



.card-btn:hover{

    background:#278EA5;

}



/* FOOTER */

footer{

    text-align:center;

    padding:35px;

    background:#081420;

}



/* ANIMATION */

@keyframes fadeUp{

    from{

        opacity:0;
        transform:translateY(50px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}



/* RESPONSIVE */

@media(max-width:768px){

.hero{

    height:auto;
    padding:120px 20px;
}

.hero h1{

    font-size:42px;
}

.hero p{

    font-size:18px;
}

.cards-section h2{

    font-size:32px;
}

.card{

    padding:30px;
}

}