/* =====================================================
   AL SYSTEM - ESTILO PRINCIPAL
===================================================== */

:root{

    --azul:#0D6EFD;
    --laranja:#FF7A00;
    --escuro:#1D3557;
    --cinza:#6C757D;
    --claro:#F8F9FA;

}

/* RESET */

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

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Poppins',sans-serif;
    background:#ffffff;
    color:#333;
    overflow-x:hidden;

}

a{

    text-decoration:none;

}

section{

    padding:80px 0;

}

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

.hero{

    padding-top:120px;
    padding-bottom:80px;

    background:linear-gradient(135deg,#f7f9fc,#edf4ff);

}

.hero h1{

    color:var(--escuro);
    line-height:1.2;
    font-weight:700;

}

.hero p{

    color:#555;
    font-size:20px;
    line-height:1.8;

}

/* IMAGEM */

.hero-img{

    width:550px;
    max-width:100%;
    height:auto;

    display:block;
    margin:auto;

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

    filter:drop-shadow(0 25px 40px rgba(0,0,0,.20));

}

/* ANIMAÇÃO */

@keyframes flutuar{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-15px);

    }

    100%{

        transform:translateY(0px);

    }

}

/* BOTÕES */

.hero .btn{

    padding:14px 30px;

    border-radius:12px;

    font-weight:600;

    transition:.3s;

}

.hero .btn-primary{

    background:var(--azul);
    border:none;

}

.hero .btn-primary:hover{

    background:#0957d7;

}

.hero .btn-outline-primary:hover{

    background:var(--azul);

}

/* =====================================================
   FUNCIONALIDADES
===================================================== */

.feature-card{

    background:#fff;

    border-radius:20px;

    padding:40px;

    text-align:center;

    transition:.35s;

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

    height:100%;

}

.feature-card:hover{

    transform:translateY(-10px);

    box-shadow:0 20px 40px rgba(13,110,253,.20);

}

.feature-card i{

    font-size:55px;

    color:var(--azul);

    margin-bottom:20px;

}

.feature-card h4{

    font-weight:700;

    margin-bottom:15px;

}

.feature-card p{

    color:#666;

    line-height:1.7;

}

/* =====================================================
   RESPONSIVO
===================================================== */

@media(max-width:991px){

.hero{

    text-align:center;

    padding-top:90px;

}

.hero h1{

    font-size:38px;

}

.hero p{

    font-size:18px;

}

.hero img{

    margin-top:40px;

    max-width:340px;

}

}

@media(max-width:576px){

.hero h1{

    font-size:30px;

}

.hero p{

    font-size:16px;

}

.hero img{

    max-width:280px;

}

}