:root{
    --azul-escuro:#0B1F3A;
    --azul:#0066FF;
    --azul-claro:#4DA3FF;
    --branco:#FFFFFF;
    --cinza:#f5f5f5;
}

body{
    font-family: Arial, Helvetica, sans-serif;
    overflow-x:hidden;
}

.navbar{
    background: rgba(11,31,58,.95);
    backdrop-filter: blur(10px);
}

.logo{
    height:60px;
}

.hero{
    background: linear-gradient(
    135deg,
    #0B1F3A,
    #123D78
    );

    color:white;
    min-height:100vh;

    display:flex;
    align-items:center;

    padding-top:100px;
}

.hero h1{
    font-size:3rem;
    font-weight:bold;
}

.hero p{
    font-size:1.2rem;
    margin:25px 0;
}

.hero-logo{
    max-width:500px;
}

.section{
    padding:100px 0;
}

.section-title{
    text-align:center;
    margin-bottom:60px;
}

.section-title h2{
    font-weight:bold;
    color:var(--azul-escuro);
}

.card-service{

    background:white;

    padding:30px;

    border-radius:15px;

    text-align:center;

    box-shadow:0 10px 25px rgba(0,0,0,.1);

    transition:.3s;
}

.card-service:hover{
    transform:translateY(-10px);
}

.card-service i{
    font-size:3rem;
    color:var(--azul);
    margin-bottom:15px;
}

.cta{

    background:linear-gradient(
    135deg,
    #0066FF,
    #0B1F3A
    );

    color:white;

    padding:80px 0;
}

footer{

    background:#081526;

    color:white;

    padding:40px 0;
}

.footer-logo{
    height:70px;
    margin-bottom:20px;
}

#contato i{
    font-size:2rem;
    color:var(--azul);
    margin-bottom:10px;
}

.btn-primary{
    background:var(--azul);
    border:none;
}

.btn-primary:hover{
    background:var(--azul-claro);
}

html{
    scroll-behavior:smooth;
}

@media(max-width:991px){

.hero{
    text-align:center;
}

.hero h1{
    font-size:2.2rem;
}

.hero-logo{
    margin-top:40px;
    max-width:300px;
}

.logo{
    height:50px;
}

/* YOUTUBE */

.youtube-section{
    background:#f8fafc;
}

.subtitle{
    color:#666;
}

.youtube-info{
    padding:20px;
}

.youtube-icon{
    font-size:5rem;
    color:#ff0000;
}

.youtube-list{
    list-style:none;
    padding:0;
}

.youtube-list li{
    margin-bottom:10px;
    font-weight:500;
}

.youtube-list li::before{
    content:"✓ ";
    color:#0066ff;
    font-weight:bold;
}

.video-container{
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 15px 35px rgba(0,0,0,.15);
}

.youtube-card{
    background:white;
    padding:25px;
    text-align:center;
    border-radius:15px;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
    transition:.3s;
}

.youtube-card:hover{
    transform:translateY(-8px);
}

.youtube-card i{
    font-size:3rem;
    color:#0066ff;
    margin-bottom:15px;
}





}




/* ===================================
   BOTÃO FLUTUANTE WHATSAPP
=================================== */

.whatsapp-float{

    position:fixed;

    width:65px;
    height:65px;

    bottom:25px;
    right:25px;

    background:#25D366;

    color:#fff;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:2rem;

    text-decoration:none;

    box-shadow:0 8px 25px rgba(0,0,0,.25);

    z-index:9999;

    transition:.3s;
}

.whatsapp-float:hover{

    background:#1ebe5d;

    color:#fff;

    transform:scale(1.1);
}

.whatsapp-float::before{

    content:"Fale Conosco";

    position:absolute;

    right:80px;

    background:#0B1F3A;

    color:white;

    padding:8px 15px;

    border-radius:30px;

    font-size:.9rem;

    white-space:nowrap;

    opacity:0;

    transform:translateX(10px);

    transition:.3s;
}

.whatsapp-float:hover::before{

    opacity:1;

    transform:translateX(0);
}

@media(max-width:768px){

    .whatsapp-float{

        width:58px;
        height:58px;

        right:15px;
        bottom:15px;

        font-size:1.8rem;
    }

    .whatsapp-float::before{
        display:none;
    }

}

