.site-header{
    font-family: var(--font1);
    border-top: 5px solid var(--verde);
    padding: 18px 0 0;
}

.header-top{
    background: #fff;
    overflow: hidden;
}

.header-top .conteudo{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 0;
}

.site-header .links {display: flex; flex-direction: column; position: relative; gap: 19px; flex: 0 0 907px;}

.header-logo{width: fit-content; height: 86px; min-width: 100px;}
.header-logo img{
    display: block;
    height: 100%;
    width: 100%;
    object-fit: contain;
}

.header-logo span{
    font-size: 22px;
    font-weight: 800;
    color: #1f1f1f;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.header-contatos{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.header-contato.hd-tel {font-size: 18.85px;}

.header-contato.hd-instagram:hover {transform: scale(1.06);}
.header-contato.hd-whats:hover,.header-contato.hd-tel:hover, .header-contato.hd-email:hover {color: var(--verde);}
.header-contato.hd-email {color: var(--cinza);}
.header-contato{
    font-weight: 400;
    display: inline-flex;
    align-items: center;
    gap: 15px;
    color: var(--preto);
    white-space: nowrap;
    transition: 0.4s;
}

.header-icone svg {width: 14px; height: auto;}
.header-icone.instagram { background: #833ab4; background: linear-gradient(132deg, #613ab4, #fd1dc2, #fd1d46, #fcb345, #e8fc45);}
.header-icone{
    width: 28px;
    height: 28px;
    background: var(--verde);
    border-radius: 5px;
    display: grid;
    background-repeat: no-repeat;
    background-position: center;    
    place-content: center;
    place-items: center;
}
/* .header-contato.hd-insta {margin: 0 0 0 auto;} */

.site-header .menu{
    background: var(--preto);
}

.gp-menu {position: relative;}
.gp-menu::before {content: ''; height: 100%; width: 100vw; position: absolute; left: 10%; top: 0; background-color: var(--preto); z-index: 0;}

.menu{    
    border-radius: 10px 0 0 0;
    /* padding-left: 44px; */
    display: flex;
    justify-content: flex-start;
    overflow: hidden;
    position: relative;
}

.menu a:first-child{
    /* border-radius: 10px 0 0 0; */
}

.header-contato a.hd-tel {font: 400 18.85px montserrat; color: var(--preto);}
.header-contato a.hd-email {font: 400 15.85px montserrat; color: var(--cinza);}

.gp-menu .btn-close {display: none;}
.menu a.logo-mb {display: none;}
.menu .link{
    cursor: pointer;
    width: fit-content;
    color: #fff;
    font-size: 15px;
    font-weight: 400;
    padding: 23px 41px 20px;
    background: transparent;
    transition: background-color var(--transition2), color var(--transition2);
}

.menu .link.ativo,
.menu .link:hover{
    background: #3ea434;
    color: #fff;
}

.header-contatos .btn-open {display: none;}

@media (max-width: 1140px){
    .menu .link {padding: 22px 22px 19px;}
    .site-header .links {flex: 0 0 auto; width: auto;}    
    .header-logo {width: 100px; height: auto;}

    .header-contatos {justify-content: flex-start; gap: 15px;}
    a.header-contato p {display: none;}
    a.header-contato {transition: 0.4s;}
    a.header-contato:hover {transform: scale(1.06);}

    .header-top .conteudo {align-items: center;}
}
@media (max-width: 990px){
    .header-top {overflow: visible;}

    .site-header {padding: 15px 0; background: var(--branco);}
    .header-contato.hd-email, .header-contato.hd-whats, .header-contato.hd-instagram {display: none;}

    .header-icone {height: 30px; width: 30px; background: none;}
    .header-icone svg {height: 100%; width: 100%;}
    .header-icone svg path {fill: var(--verde) !important;}
        
    .gp-menu {position: fixed; top: 0; right: 100%; width: 100vw; height: 100%; background-color: #8b868660; transition: 0.4s; z-index: 10000;}
    .gp-menu.active {right: 0;}
    .gp-menu::before {content: none;}
    .site-header .menu {flex-direction: column; width: 90%; height: 100%; padding: 0;}
    .site-header .links {position: static;}
    
    .menu a.logo-mb {display: flex; max-width: 200px; height: auto; width: 100%; padding: 20px;}
    .menu a.logo-mb:hover {background: unset;}
    .menu a.logo-mb img {width: 100%; height: 100%; object-fit: contain;}

    .menu {border-radius: 0;}
    .menu .link {width: 100%; padding: 15px 20px;}

    .header-contatos .btn-open {width: 35px; height: 35px; display: flex; justify-content: center; align-items: center; padding: 0; flex-direction: column; gap: 5px; cursor: pointer;}
    .header-contatos .btn-open .rec {width: 100%; height: 5px; background-color: var(--preto); border-radius: 2px;}

    .gp-menu {display: flex;}
    .gp-menu .btn-close {display: flex; width: 10%; padding: 15px; display: grid; place-content: center; place-items: center; gap: 5px; background: var(--preto); max-height: 8%; cursor: pointer; position: relative;}
    .gp-menu .btn-close::before {content: ''; width: 100%; height: 100%; background-color: var(--preto); z-index: -1; left: -10%; position: absolute;}
    .gp-menu .btn-close .rec {width: 25px; height: 4px; background-color: var(--branco); position: absolute;}
    .gp-menu .btn-close .rec.rec-1 {transform: rotate(45deg);}
    .gp-menu .btn-close .rec.rec-2 {transform: rotate(-45deg);}
}