/* ==================================
   CONFIGURAÇÕES GERAIS
================================== */

body{
    background:#F5F7FA;
    font-family:'Inter', sans-serif;
    color:#111827;
}


/* ==================================
   TÍTULOS
================================== */

h1,
h2,
h3,
h4,
h5,
.nav-link{

    font-family:'Poppins', sans-serif;

}


/* ==================================
   MENU SUPERIOR
================================== */

.navbar{

    background:#FFFFFF !important;

    height:95px;

    box-shadow:0 2px 20px rgba(0,0,0,.06);

}


.navbar .container{

    display:flex;

    align-items:center;

    justify-content:space-between;

}


.logo-top{

    max-height:60px;

    width:auto;

    display:block;

}


.navbar-nav{

    align-items:center;

}


.nav-link{

    color:#111827 !important;

    font-size:17px;

    font-weight:600;

    margin-left:30px;

    transition:.3s;

}


.nav-link:hover{

    color:#2563EB !important;

}


.nav-link.active{

    color:#2563EB !important;

}


/* ==================================
   HERO
================================== */

.hero{

    background:
    radial-gradient(circle at right,
    rgba(37,99,235,.15),
    transparent 35%),

    linear-gradient(90deg,#020C2B,#041A4A);

    color:white;

    padding:120px 0;

}


.hero h1{

    font-size:72px;

    font-weight:700;

    line-height:1.15;

    margin-bottom:35px;

}


.hero-text{

    font-size:24px;

    line-height:1.8;

    color:#D1D5DB;

    margin-bottom:40px;

}


.hero-button{

    font-family:'Poppins', sans-serif;

    font-weight:600;

    padding:15px 35px;

    border-radius:12px;

}


.hero-image{

    max-width:650px;

    width:100%;

    animation: flutuar 4s ease-in-out infinite;

}


/* ==================================
   ANIMAÇÃO
================================== */

@keyframes flutuar {

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-10px);
    }

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

}


/* ==================================
   SERVIÇOS
================================== */

.services{

    padding:100px 0;

}


.services h2{

    text-align:center;

    font-size:52px;

    font-weight:700;

    margin-bottom:60px;

}


.service-card{

    background:white;

    border-radius:20px;

    padding:40px;

    text-align:center;

    box-shadow:0 5px 20px rgba(0,0,0,.08);

    transition:.3s;

}


.service-card:hover{

    transform:translateY(-10px);

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

}


.service-card h4{

    font-size:24px;

    font-weight:700;

    margin-bottom:20px;

}


.service-card p{

    color:#6B7280;

    line-height:1.8;

}


/* ==================================
   RODAPÉ
================================== */

footer{

    background:#020C2B;

    color:white;

    padding:40px;

    text-align:center;

}