/* ==========================================================
   RESET
========================================================== */

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

html{

    scroll-behavior:smooth;

}

body{

    font-family:
        "Segoe UI",
        Tahoma,
        Geneva,
        Verdana,
        sans-serif;

    background:#FFFFFF;

    color:#173054;

    overflow-x:hidden;

    line-height:1.6;

}

/* ==========================================================
   VARIÁVEIS
========================================================== */

:root{

    --primary:#173054;

    --primary-dark:#10213B;

    --secondary:#C89C3C;

    --secondary-light:#D9B868;

    --white:#FFFFFF;

    --background:#F6F8FB;

    --text:#3F4D63;

    --shadow:

        0px 8px 25px rgba(0,0,0,.08);

    --transition:

        .35s ease;

}

/* ==========================================================
   GERAL
========================================================== */

section{

    width:100%;

    padding:100px 8%;

    position:relative;

}

img{

    display:block;

    max-width:100%;

}

a{

    text-decoration:none;

}

ul{

    list-style:none;

}

.section-header{

    width:100%;

    max-width:750px;

    margin:auto;

    text-align:center;

    margin-bottom:70px;

}

.section-tag{

    display:inline-block;

    padding:

        8px
        18px;

    background:

        rgba(200,156,60,.10);

    color:

        var(--secondary);

    border-radius:30px;

    font-size:.9rem;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:20px;

}

.section-header h2{

    font-size:2.6rem;

    color:var(--primary);

    margin-bottom:20px;

}

.section-header p{

    color:var(--text);

    font-size:1.1rem;

}

/* ==========================================================
   BOTÕES
========================================================== */

.primary-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:

        16px
        38px;

    background:

        var(--secondary);

    color:

        var(--white);

    font-weight:700;

    border-radius:40px;

    transition:

        var(--transition);

    box-shadow:

        var(--shadow);

}

.primary-button:hover{

    transform:

        translateY(-4px);

    background:

        #b98d2c;

}

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

.header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:72px;

    background:

        rgba(255,255,255,.95);

    backdrop-filter:

        blur(10px);

    z-index:9999;

    transition:

        .45s ease;

    box-shadow:

        0 4px 20px rgba(0,0,0,.05);

    overflow:hidden;

}

/* Expansão */

.header:hover{

    height:120px;

}

/* Container */

.header-container{

    width:90%;

    max-width:1400px;

    height:100%;

    margin:auto;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

/* ==========================================================
   LOGO
========================================================== */

.header-logo{

    display:flex;

    align-items:center;

    transition:.35s;

}

.header-logo img{

    height:70px;

    transition:.35s;

}

.header:hover .header-logo img{

    height:100px;

}

/* ==========================================================
   CONTATOS
========================================================== */

.header-contact{

    display:flex;

    align-items:center;

    gap:25px;

}

.contact-item{

    display:flex;

    align-items:center;

    color:

        var(--primary);

}

.contact-icon{

    width:48px;

    height:48px;

    border-radius:50%;

    background: var(--primary);

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:1.2rem;

    transition:.35s;

}

.contact-info{

    margin-left:15px;

    display:flex;

    flex-direction:column;

    overflow:hidden;

}

.contact-title{

    font-weight:700;

    font-size:.85rem;

}

.contact-text{

    font-size:.90rem;

    color:var(--text);

}

/* Estado fechado */

.header:not(:hover) .contact-info{

    width:0;

    opacity:0;

    margin-left:0;

}

/* Estado aberto */

.header:hover .contact-info{

    width:210px;

    opacity:1;

    margin-left:15px;

}

/* Hover */

.contact-item:hover .contact-icon{

    transform:

        scale(1.08);

    background:

        var(--secondary);

    color:#FFF;

}

/* ==========================================================
   MENU MOBILE
========================================================== */

.mobile-menu-button{

    display:none;

    background:none;

    border:none;

    cursor:pointer;

    width:45px;

    height:45px;

    position:relative;

}

.mobile-menu-button span{

    position:absolute;

    left:8px;

    width:28px;

    height:3px;

    background:var(--primary);

    transition:.3s;

}

.mobile-menu-button span:nth-child(1){

    top:12px;

}

.mobile-menu-button span:nth-child(2){

    top:21px;

}

.mobile-menu-button span:nth-child(3){

    top:30px;

}

/* ==========================================================
   SIDEBAR
========================================================== */

.mobile-sidebar{

    position:fixed;

    right:-320px;

    top:0;

    width:320px;

    height:100vh;

    background:#FFF;

    z-index:10001;

    transition:.45s;

    box-shadow:

        -5px 0 25px rgba(0,0,0,.15);

}

.mobile-sidebar.active{

    right:0;

}

.sidebar-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:30px;

}

.sidebar-header img{

    width:180px;

}

.close-sidebar{

    background:none;

    border:none;

    font-size:2rem;

    cursor:pointer;

}

.sidebar-content{

    display:flex;

    flex-direction:column;

    padding:20px 30px;

}

.sidebar-content a{

    display:flex;

    align-items:center;

    gap:15px;

    padding:18px 0;

    color:var(--primary);

    border-bottom:1px solid #ECECEC;

    font-weight:600;

}

.sidebar-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.45);

    opacity:0;

    visibility:hidden;

    transition:.4s;

    z-index:10000;

}

.sidebar-overlay.active{

    opacity:1;

    visibility:visible;

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

.hero{

    min-height:100vh;

    display:flex;

    align-items:center;

    background:

        linear-gradient(
            135deg,
            #ffffff 0%,
            #f6f8fb 100%
        );

    overflow:hidden;

    padding-top:180px;

}

/* ==========================================================
   BACKGROUND DECORATIVO
========================================================== */

.hero-background{

    position:absolute;

    inset:0;

    overflow:hidden;

    z-index:0;

}

/* Círculos */

.bg-circle{

    position:absolute;

    border-radius:50%;

    opacity:.08;

}

.circle-one{

    width:600px;

    height:600px;

    background:var(--secondary);

    left:-220px;

    top:-180px;

}

.circle-two{

    width:450px;

    height:450px;

    background:var(--primary);

    right:-150px;

    bottom:-120px;

}

/* Linhas */

.bg-line{

    position:absolute;

    background:rgba(23,48,84,.06);

    transform:rotate(-25deg);

}

.line-one{

    width:600px;

    height:2px;

    top:180px;

    right:-120px;

}

.line-two{

    width:420px;

    height:2px;

    bottom:150px;

    left:-80px;

}

/* Quadrado */

.bg-square{

    position:absolute;

    width:180px;

    height:180px;

    border:10px solid rgba(200,156,60,.12);

    transform:rotate(45deg);

}

.square-one{

    right:10%;

    top:20%;

}

/* ==========================================================
   CONTAINER
========================================================== */

.hero-container{

    width:90%;

    max-width:1400px;

    margin:auto;

    display:grid;

    grid-template-columns:

        520px
        1fr;

    align-items:center;

    gap:80px;

    position:relative;

    z-index:2;

}

/* ==========================================================
   IMAGEM
========================================================== */

.hero-image{

    display:flex;

    justify-content:center;

    align-items:flex-end;

    position:relative;

}

.hero-image img{

    width:100%;

    max-width:500px;

    animation:

        fadeImage
        1.2s ease;

    filter:

        drop-shadow(
            0 20px 40px rgba(0,0,0,.18)
        );

}

/* ==========================================================
   CONTEÚDO
========================================================== */

.hero-content{

    animation:

        fadeContent
        .9s ease;

}

.hero-tag{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:

        8px
        22px;

    background:

        rgba(200,156,60,.10);

    color:

        var(--secondary);

    border-radius:40px;

    font-size:.9rem;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:25px;

}

.hero-content h1{

    font-size:3.5rem;

    color:var(--primary);

    line-height:1.15;

    margin-bottom:30px;

}

.hero-content p{

    font-size:1.15rem;

    color:var(--text);

    max-width:650px;

    margin-bottom:40px;

}

/* ==========================================================
   LISTA DE SERVIÇOS
========================================================== */

.hero-services{

    display:grid;

    grid-template-columns:

        repeat(2,1fr);

    gap:18px;

    margin-bottom:45px;

}

.hero-service{
    
    

   

    justify-content:flex-start;

    display:flex;

    align-items:center;

    gap:15px;

    background:#FFF;

    padding:18px 20px;

    border-radius:14px;

    box-shadow:

        0 8px 25px rgba(0,0,0,.06);

    transition:.35s;

}

.hero-service span{

      width:42px;

    height:42px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:

        var(--secondary);

    color:#FFF;

    flex-shrink:0;


}

.hero-service p{


    display:flex;

    align-items:center;


    margin:0;

    color:var(--primary);

    font-weight:600;

    font-size:.98rem;

}

.hero-service:hover{

    transform:

        translateY(-6px);

    box-shadow:

        0 18px 30px rgba(0,0,0,.10);

}

/* ==========================================================
   BOTÃO
========================================================== */

.hero-buttons{

    display:flex;

    gap:20px;

}

/* ==========================================================
   ANIMAÇÕES
========================================================== */

@keyframes fadeContent{

    from{

        opacity:0;

        transform:

            translateY(40px);

    }

    to{

        opacity:1;

        transform:

            translateY(0);

    }

}

@keyframes fadeImage{

    from{

        opacity:0;

        transform:

            translateX(-40px);

    }

    to{

        opacity:1;

        transform:

            translateX(0);

    }

}

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

@media(max-width:1100px){

    .hero-container{

        grid-template-columns:1fr;

        text-align:center;

        gap:50px;

    }

    .hero-image{

        order:-1;

    }

    .hero-image img{

        max-width:350px;

    }

    .hero-content p{

        

    }

    .hero-services{

        grid-template-columns:1fr;

    }

    .hero-buttons{

        justify-content:center;

    }

}

@media(max-width:768px){

    .hero{

        padding-top:130px;

    }

    .hero-content h1{

        font-size:2.4rem;

    }

    .hero-content p{

        font-size:1rem;

    }

    .hero-tag{

        font-size:.8rem;

    }

    .circle-one{

        width:350px;

        height:350px;

    }

    .circle-two{

        width:250px;

        height:250px;

    }

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

.hero{

    min-height:100vh;

    display:flex;

    align-items:center;

    background:

        linear-gradient(
            135deg,
            #ffffff 0%,
            #f6f8fb 100%
        );

    overflow:hidden;

    padding-top:180px;

}

/* ==========================================================
   BACKGROUND DECORATIVO
========================================================== */

.hero-background{

    position:absolute;

    inset:0;

    overflow:hidden;

    z-index:0;

}

/* Círculos */

.bg-circle{

    position:absolute;

    border-radius:50%;

    opacity:.08;

}

.circle-one{

    width:600px;

    height:600px;

    background:var(--secondary);

    left:-220px;

    top:-180px;

}

.circle-two{

    width:450px;

    height:450px;

    background:var(--primary);

    right:-150px;

    bottom:-120px;

}

/* Linhas */

.bg-line{

    position:absolute;

    background:rgba(23,48,84,.06);

    transform:rotate(-25deg);

}

.line-one{

    width:600px;

    height:2px;

    top:180px;

    right:-120px;

}

.line-two{

    width:420px;

    height:2px;

    bottom:150px;

    left:-80px;

}

/* Quadrado */

.bg-square{

    position:absolute;

    width:180px;

    height:180px;

    border:10px solid rgba(200,156,60,.12);

    transform:rotate(45deg);

}

.square-one{

    right:10%;

    top:20%;

}

/* ==========================================================
   CONTAINER
========================================================== */

.hero-container{

    width:90%;

    max-width:1400px;

    margin:auto;

    display:grid;

    grid-template-columns:

        520px
        1fr;

    align-items:center;

    gap:80px;

    position:relative;

    z-index:2;

}

/* ==========================================================
   IMAGEM
========================================================== */

.hero-image{

    display:flex;

    justify-content:center;

    align-items:flex-end;

    position:relative;

}

.hero-image img{

    width:100%;

    max-width:500px;

    animation:

        fadeImage
        1.2s ease;

    filter:

        drop-shadow(
            0 20px 40px rgba(0,0,0,.18)
        );

}

/* ==========================================================
   CONTEÚDO
========================================================== */

.hero-content{

    animation:

        fadeContent
        .9s ease;

}

.hero-tag{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:

        8px
        22px;

    background:

        rgba(200,156,60,.10);

    color:

        var(--secondary);

    border-radius:40px;

    font-size:.9rem;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:25px;

}

.hero-content h1{

    font-size:3.5rem;

    color:var(--primary);

    line-height:1.15;

    margin-bottom:30px;

}

.hero-content p{

    font-size:1.15rem;

    color:var(--text);

    max-width:650px;

    margin-bottom:40px;

}

/* ==========================================================
   LISTA DE SERVIÇOS
========================================================== */

.hero-services{

    display:grid;

    grid-template-columns:

        repeat(2,1fr);

    gap:18px;

    margin-bottom:45px;

}

.hero-service{
   justify-content:flex-start;

  
    display:flex;

    align-items:center;

    gap:15px;

    background:#FFF;

    padding:18px 20px;

    border-radius:14px;

    box-shadow:

        0 8px 25px rgba(0,0,0,.06);

    transition:.35s;

}

.hero-service span{

    width:34px;

    height:34px;

    border-radius:50%;

    background:var(--secondary);

    color:#FFF;

    display:flex;

    justify-content:center;

    align-items:center;

    font-weight:bold;

}

.hero-service p{
display:flex;

    align-items:center;
    margin:0;

    color:var(--primary);

    font-weight:600;

    font-size:.98rem;

}

.hero-service:hover{

    transform:

        translateY(-6px);

    box-shadow:

        0 18px 30px rgba(0,0,0,.10);

}

/* ==========================================================
   BOTÃO
========================================================== */

.hero-buttons{

    display:flex;

    gap:20px;

}

/* ==========================================================
   ANIMAÇÕES
========================================================== */

@keyframes fadeContent{

    from{

        opacity:0;

        transform:

            translateY(40px);

    }

    to{

        opacity:1;

        transform:

            translateY(0);

    }

}

@keyframes fadeImage{

    from{

        opacity:0;

        transform:

            translateX(-40px);

    }

    to{

        opacity:1;

        transform:

            translateX(0);

    }

}

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

@media(max-width:1100px){

    .hero-container{

        grid-template-columns:1fr;

        text-align:center;

        gap:50px;

    }

    .hero-image{

        order:-1;

    }

    .hero-image img{

        max-width:350px;

    }

    .hero-content p{

        

    }

    .hero-services{

        grid-template-columns:1fr;

    }

    .hero-buttons{

        justify-content:center;

    }

}

@media(max-width:768px){

    .hero{

        padding-top:130px;

    }

    .hero-content h1{

        font-size:2.4rem;

    }

    .hero-content p{

        font-size:1rem;

    }

    .hero-tag{

        font-size:.8rem;

    }

    .circle-one{

        width:350px;

        height:350px;

    }

    .circle-two{

        width:250px;

        height:250px;

    }

}
/* ==========================================================
   SERVICES
========================================================== */

.services{

    background:#FFFFFF;

}

.services-grid{

    width:100%;

    max-width:1400px;

    margin:auto;

    display:grid;

    grid-template-columns:

        repeat(3,1fr);

    gap:35px;

}

/* ==========================================================
   CARD
========================================================== */

.service-card{

    position:relative;

    background:#FFF;

    border-radius:22px;

    padding:40px 35px;

    overflow:hidden;

    transition:.35s;

    border:1px solid rgba(23,48,84,.08);

    box-shadow:

        0 8px 25px rgba(0,0,0,.04);

}

/* Barra Superior */

.service-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:5px;

    background:var(--secondary);

    transform:scaleX(0);

    transition:.35s;

    transform-origin:left;

}

.service-card:hover::before{

    transform:scaleX(1);

}

.service-card:hover{

    transform:

        translateY(-10px);

    box-shadow:

        0 25px 45px rgba(0,0,0,.10);

}

.service-icon{

    width:70px;

    height:70px;

    border-radius:18px;

    background:

        #3F4D63;

    color:

        var(--secondary);

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:2rem;

    margin-bottom:25px;

    transition:.35s;

}

.service-card:hover .service-icon{

    background:

        var(--secondary);

    color:#FFF;

    transform:

        rotate(-6deg)
        scale(1.05);

}

.service-card h3{

    color:var(--primary);

    font-size:1.4rem;

    margin-bottom:18px;

}

.service-card p{

    color:var(--text);

    font-size:1rem;

    line-height:1.8;

}

/* ==========================================================
   ADVANTAGES
========================================================== */

.advantages{

    background:

        linear-gradient(

            180deg,

            #F6F8FB,

            #FFFFFF

        );

}

.advantages-container{

    width:90%;

    max-width:1400px;

    margin:auto;

    display:grid;

    grid-template-columns:

        1fr
        450px;

    gap:70px;

    align-items:center;

}

.advantages-text h2{

    font-size:2.8rem;

    color:var(--primary);

    margin:

        20px 0;

}

.advantages-text p{

    color:var(--text);

    font-size:1.1rem;

}

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

.advantages-list{

    display:flex;

    flex-direction:column;

    gap:22px;

}

.advantage-item{

    background:#FFF;

    padding:

        22px
        30px;

    border-radius:18px;

    display:flex;

    align-items:center;

    gap:18px;

    font-weight:600;

    color:var(--primary);

    box-shadow:

        0 10px 25px rgba(0,0,0,.05);

    transition:.35s;

}

.advantage-item span{

    width:42px;

    height:42px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:

        var(--secondary);

    color:#FFF;

    flex-shrink:0;

}

.advantage-item:hover{

    transform:

        translateX(12px);

    box-shadow:

        0 18px 35px rgba(0,0,0,.10);

}

/* ==========================================================
   FORMULÁRIO
========================================================== */

.contact{

    background:#FFF;

}

.contact-container{

    width:90%;

    max-width:1300px;

    margin:auto;

    display:grid;

    grid-template-columns:

        420px
        1fr;

    gap:80px;

    align-items:start;

}

.contact-info{

    position:sticky;

    top:140px;

}

.contact-info h2{

    color:var(--primary);

    font-size:2.6rem;

    margin:

        20px 0;

}

.contact-info p{

    color:var(--text);

    font-size:1.05rem;

}

/* ==========================================================
   FORM
========================================================== */

.contact-form{

    background:#FFF;

    padding:45px;

    border-radius:24px;

    box-shadow:

        0 18px 45px rgba(0,0,0,.08);

    display:grid;

    grid-template-columns:

        repeat(2,1fr);

    gap:25px;

}

.input-group{

    display:flex;

    flex-direction:column;

}

.input-group.full-width{

    grid-column:1/-1;

}

.input-group label{

    margin-bottom:10px;

    font-weight:600;

    color:var(--primary);

}

.input-group input,

.input-group textarea{

    border:

        2px solid #E4E8EF;

    border-radius:14px;

    padding:

        15px
        18px;

    font-size:1rem;

    transition:.3s;

    outline:none;

    resize:none;

    background:#FAFBFD;

}

.input-group input:focus,

.input-group textarea:focus{

    border-color:

        var(--secondary);

    background:#FFF;

    box-shadow:

        0 0 0 5px rgba(200,156,60,.10);

}

.contact-form button{

    grid-column:1/-1;

    margin-top:10px;

    cursor:pointer;

    border:none;

}

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

@media(max-width:1100px){

    .services-grid{

        grid-template-columns:

            repeat(2,1fr);

    }

    .advantages-container{

        grid-template-columns:1fr;

        gap:50px;

    }

    .contact-container{

        grid-template-columns:1fr;

    }

    .contact-info{

        position:relative;

        top:0;

        text-align:center;

    }

}

@media(max-width:768px){

    .services-grid{

        grid-template-columns:1fr;

    }

    .contact-form{

        grid-template-columns:1fr;

        padding:30px;

    }

    .advantages-text{

        text-align:center;

    }

    .advantages-text h2{

        font-size:2rem;

    }

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

.footer{

    background:var(--primary);

    color:#FFF;

    padding:70px 8% 35px;

    position:relative;

    overflow:hidden;

}

.footer::before{

    content:"";

    position:absolute;

    top:-120px;

    right:-120px;

    width:300px;

    height:300px;

    border-radius:50%;

    background:rgba(255,255,255,.03);

}

.footer-container{

    width:100%;

    max-width:1400px;

    margin:auto;

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    gap:30px;

}

.footer-logo img{

    width:220px;

    filter:brightness(0) invert(1);

}

.footer-contact{

    display:flex;

    gap:35px;

    flex-wrap:wrap;

    justify-content:center;

}

.footer-contact a{

    color:#FFF;

    font-weight:500;

    transition:.3s;

}

.footer-contact a:hover{

    color:var(--secondary);

}

.footer-copy{

    opacity:.75;

    font-size:.9rem;

}

/* ==========================================================
   WHATSAPP FLUTUANTE
========================================================== */

.floating-whatsapp{

    position:fixed;

    right:30px;

    bottom:30px;

    width:68px;

    height:68px;

    border-radius:50%;

    background:#25D366;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#FFF;

    font-size:2rem;

    z-index:999;

    box-shadow:

        0 15px 30px rgba(0,0,0,.18);

    transition:.35s;

    animation:

        whatsappFloat
        2.8s ease-in-out infinite;

}

.floating-whatsapp:hover{

    transform:

        scale(1.12);

}

@keyframes whatsappFloat{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0px);

    }

}

/* ==========================================================
   SCROLLBAR
========================================================== */

::-webkit-scrollbar{

    width:11px;

}

::-webkit-scrollbar-track{

    background:#F3F5F8;

}

::-webkit-scrollbar-thumb{

    background:var(--secondary);

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#B88A28;

}

/* ==========================================================
   SELEÇÃO DE TEXTO
========================================================== */

::selection{

    background:var(--secondary);

    color:#FFF;

}

/* ==========================================================
   ANIMAÇÕES AUXILIARES
========================================================== */

.fade-up{

    opacity:0;

    transform:translateY(40px);

    transition:

        .8s ease;

}

.fade-left{

    opacity:0;

    transform:translateX(-40px);

    transition:

        .8s ease;

}

.fade-right{

    opacity:0;

    transform:translateX(40px);

    transition:

        .8s ease;

}

.show{

    opacity:1;

    transform:translate(0);

}

/* ==========================================================
   INPUT INVÁLIDO
========================================================== */

input:invalid:focus,

textarea:invalid:focus{

    border-color:#D94848;

    box-shadow:

        0 0 0 4px rgba(217,72,72,.12);

}

input:valid,

textarea:valid{

    border-color:#E5E8EF;

}

/* ==========================================================
   HOVER GLOBAL
========================================================== */

button,

a,

.service-card,

.hero-service,

.advantage-item{

    transition:

        .35s ease;

}

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

@media(max-width:900px){

    .header{

        height:80px;

    }

    .header:hover{

        height:80px;

    }

    .header-contact{

        display:none;

    }

    .mobile-menu-button{

        display:block;

    }

    .header-container{

        justify-content:center;

        position:relative;

    }

    .header-logo img{

        height:70px;
        width: 70px

    }

    .mobile-menu-button{

        position:absolute;

        right:0;

    }

    section{

        padding:

            80px 7%;

    }

}

@media(max-width:768px){

    .footer-contact{

        flex-direction:column;

        gap:18px;

    }

    .floating-whatsapp{

        width:60px;

        height:60px;

        font-size:1.7rem;

        right:18px;

        bottom:18px;

    }

    .section-header h2{

        font-size:2rem;

    }

}

@media(max-width:500px){

    .hero-content h1{

        font-size:2rem;

    }

    .header-logo img{

        height:70px;
        width: 70px

    }

    .footer-logo img{

        width:170px;

    }

}



.filter{
    filter: invert(15%) sepia(12%) saturate(3500%) hue-rotate(200deg) brightness(85%) contrast(115%); 
}

/* ==========================================================
   FIM DO CSS
========================================================== */