/* ===================================================
   FRETESNUNES
   STYLE.CSS - PARTE 1
=================================================== */

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins',sans-serif;
    background:#f5f7fb;
    color:#222;
    line-height:1.6;
}

img{
    max-width:100%;
    display:block;
}

a{
    text-decoration:none;
}

.container{
    width:90%;
    max-width:1200px;
    margin:auto;
}

/* ===========================
   HEADER
=========================== */

header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:999;

    background:rgba(7,25,55,.95);

    backdrop-filter:blur(8px);

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

}

header .container{
    display:flex;
    justify-content:space-between;
    align-items:center;
    height:75px;
}

nav{
    display:flex;
    gap:35px;
}

.btn-whatsapp{
    margin-left:auto;
    margin-right:20px;

    background:#25D366;
    color:#fff;
    padding:12px 22px;
    border-radius:50px;
    display:flex;
    align-items:center;
    gap:8px;
    font-weight:600;
    transition:.3s;
}

.btn-whatsapp:hover{
    background:#1EBE5D;
    color:#fff;
}

.btn-whatsapp:visited,
.btn-whatsapp:link{
    color:#fff;
}

.btn-whatsapp i{
    color:#fff;
}



.logo span{

    color:#ff9800;

}

nav{
    display:flex;
    gap:35px;
}

nav a{
    color:#fff;
    font-weight:500;
    transition:.3s;
}

nav a:hover{
    color:#ff9800;
}

.btn-whatsapp{
    margin-left:auto;
    margin-right:20px;
}




.hero{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    position:relative;
    background:
        linear-gradient(
            rgba(0,25,60,.75),
            rgba(0,25,60,.80)
        ),
        url("img/banner.png") center center/cover no-repeat;
}

.hero-content{
    position:relative;
    z-index:5;
    text-align:center;
    color:#fff;
    width:90%;
    max-width:900px;
}

.hero h1{

font-size:62px;

font-weight:800;

margin-bottom:20px;

line-height:1.1;

}

.hero h2{

font-size:32px;

color:#ff9800;

margin-bottom:20px;

}

.hero p{

font-size:20px;

margin-bottom:40px;

}

.hero-buttons{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}

.btn-principal{

background:#ff9800;

padding:18px 35px;

border-radius:50px;

font-weight:700;

color:white;

transition:.3s;

}

.btn-principal:hover{

background:#ff8800;

transform:translateY(-4px);

}

.btn-secundario{

border:2px solid white;

padding:18px 35px;

border-radius:50px;

color:white;

font-weight:600;

transition:.3s;

}

.btn-secundario:hover{

background:white;

color:#0b2d59;

}

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

.servicos{

padding:100px 0;

background:white;

}

.servicos h2{

text-align:center;

font-size:42px;

margin-bottom:60px;

color:#0b2d59;

}

.cards{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:30px;

}

.card{

background:white;

padding:40px;

border-radius:18px;

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

transition:.35s;

text-align:center;

}

.card:hover{

transform:translateY(-10px);

}

.card i{

font-size:55px;

color:#ff9800;

margin-bottom:25px;

}

.card h3{

font-size:28px;

margin-bottom:15px;

color:#0b2d59;

}

.card p{

color:#666;

font-size:17px;

line-height:1.8;

}
/* ===================================================
   STYLE.CSS - PARTE 2
===================================================*/


/* ======================
   SOBRE
======================*/

.sobre{

padding:120px 0;

background:#eef3fa;

}

.sobre-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

align-items:center;

}

.sobre-texto h2{

font-size:42px;

color:#0b2d59;

margin-bottom:25px;

}

.sobre-texto p{

font-size:18px;

color:#555;

margin-bottom:20px;

line-height:1.9;

}

.sobre-img img{

width:100%;

border-radius:20px;

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

}


/* ======================
   DIFERENCIAIS
======================*/

.diferenciais{

padding:120px 0;

background:#fff;

}

.diferenciais h2{

text-align:center;

font-size:42px;

margin-bottom:60px;

color:#0b2d59;

}

.lista-diferenciais{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:30px;

}

.item{

background:#f8f8f8;

padding:35px;

border-radius:18px;

transition:.3s;

}

.item:hover{

background:#0b2d59;

color:#fff;

transform:translateY(-8px);

}

.item i{

font-size:45px;

color:#ff9800;

margin-bottom:20px;

}

.item h3{

margin-bottom:15px;

font-size:24px;

}


/* ======================
   CONTADORES
======================*/

.numeros{

background:#0b2d59;

padding:90px 0;

color:white;

}

.numeros-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:40px;

text-align:center;

}

.numero{

font-size:55px;

font-weight:700;

color:#ff9800;

}

.numero-titulo{

font-size:18px;

margin-top:10px;

}


/* ======================
   GALERIA
======================*/

.galeria{

padding:120px 0;

background:#eef3fa;

}

.galeria h2{

text-align:center;

font-size:42px;

margin-bottom:60px;

color:#0b2d59;

}

.galeria-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:25px;

}

.galeria-grid img{

width:100%;

height:280px;

object-fit:cover;

border-radius:15px;

transition:.4s;

cursor:pointer;

}

.galeria-grid img:hover{

transform:scale(1.05);

}


/* ======================
   AVALIAÇÕES
======================*/

.avaliacoes{

padding:120px 0;

background:white;

}

.avaliacoes h2{

text-align:center;

font-size:42px;

margin-bottom:60px;

color:#0b2d59;

}

.depoimentos{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:30px;

}

.depoimento{

background:#f7f7f7;

padding:35px;

border-radius:18px;

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

}

.estrelas{

color:#ff9800;

font-size:20px;

margin-bottom:15px;

}

.depoimento p{

margin-bottom:20px;

color:#555;

}

.cliente{

font-weight:600;

color:#0b2d59;

}


/* ======================
   CONTATO
======================*/

.contato{

padding:120px 0;

background:#eef3fa;

}

.contato-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:50px;

}

form{

display:flex;

flex-direction:column;

gap:20px;

}

input,textarea{

padding:18px;

border:none;

border-radius:10px;

font-size:16px;

font-family:Poppins;

}

textarea{

height:180px;

resize:none;

}

button{

background:#ff9800;

color:white;

border:none;

padding:18px;

border-radius:50px;

font-size:18px;

font-weight:600;

cursor:pointer;

transition:.3s;

}

button:hover{

background:#ff8800;

}


/* ======================
   MAPA
======================*/

iframe{

width:100%;

height:400px;

border:0;

border-radius:20px;

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

}


/* ======================
   FOOTER
======================*/

footer{

background:#081d39;

color:white;

padding:70px 0;

text-align:center;

}

footer h2{

font-size:36px;

margin-bottom:15px;

}

footer span{

color:#ff9800;

}

footer p{

margin:8px 0;

color:#d8d8d8;

}
/* ==========================================
   STYLE.CSS - PARTE 3
==========================================*/

/* BOTÃO FLUTUANTE WHATSAPP */

.whatsapp-fixo{

position:fixed;

right:25px;

bottom:25px;

width:65px;

height:65px;

border-radius:50%;

background:#25D366;

display:flex;

justify-content:center;

align-items:center;

font-size:32px;

color:#fff;

box-shadow:0 10px 25px rgba(0,0,0,.25);

z-index:999;

transition:.3s;

}

.whatsapp-fixo:hover{

transform:scale(1.1);

}


/* ANIMAÇÕES */

.card,
.item,
.depoimento,
.galeria-grid img{

transition:.4s ease;

}

.card:hover,
.item:hover,
.depoimento:hover{

transform:translateY(-10px);

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

}


/* TÍTULOS */

section h2{

font-weight:700;

letter-spacing:-1px;

}


/* SCROLLBAR */

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#f2f2f2;

}

::-webkit-scrollbar-thumb{

background:#0b2d59;

border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:#ff9800;

}



/* RESPONSIVO */

@media (max-width:600px){

    /* HEADER */

    header{
        background:#071937;
    }

    header .container{
        height:auto;
        padding:15px;
        flex-direction:column;
    }

    .logo img{
        height:45px;
    }
.galeria-grid{
    grid-template-columns:1fr;
}

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

}header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:999;
    background:rgba(7,25,55,.95);
    backdrop-filter:blur(8px);
    box-shadow:0 5px 20px rgba(0,0,0,.15);

    transition:transform .35s ease;
}
@media (max-width: 768px){

    header .container{
        flex-direction: column;
        gap: 15px;
        height: auto;
        padding: 15px;
    }

    nav{
        gap:15px;
        flex-wrap:wrap;
        justify-content:center;
    }

    .logo{
        margin:0;
    }

    .logo img{
        height:50px;
    }

    .btn-whatsapp{
        margin:0;
    }

    .hero{
        min-height:100vh;
        padding:120px 20px 60px;
        text-align:center;
    }

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

    .hero h2{
        font-size:26px;
    }

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

    .hero-buttons{
        flex-direction:column;
        align-items:center;
    }

    .btn-principal,
    .btn-secundario{
        width:100%;
        max-width:300px;
        text-align:center;
    }

    .cards,
    .lista-diferenciais,
    .depoimentos,
    .sobre-grid,
    .contato-grid,
    .galeria-grid,
    .numeros-grid{
        grid-template-columns:1fr;
    }

    .card,
    .item,
    .depoimento{
        width:100%;
    }
}