:root {
    --black: #000;
    --white: #fff;
    --bege: #C9BFA4;
    --bege-hover: #afa27b;

    --menu: 71px;
}

* {
    margin: 0;
    padding: 0;
}

.center1200 {width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 2%; box-sizing: border-box;}
body {width: 100%; overflow: hidden; overflow-y: auto;}
html { scroll-padding-top: var(--menu);  scroll-behavior: smooth; }
main {width: 100%;}

/* === MENU === */
.menu {z-index: 10; position: fixed; top: 0; width: 100%;height: var(--menu);background: var(--black);display: flex; justify-content: center; align-items: center;}
.menu .logo {position: absolute; width: 50px; height: 50px; background: url("../imgs/gn.png") no-repeat center / contain; left: 30px;}
.menu .abas {display: flex; justify-content: center; align-items: center; gap: 63px;height: 100%;}
.menu .abas a {color: var(--bege); text-decoration: none !important;}
.menu .abas .aba {position: relative; display: block; display: flex; align-items: center; justify-content: center; height: 100%; font: 19px montserrat-bold; color: var(--bege); cursor: pointer;}
.menu .abas .aba:has(.submenu)::after {content: ""; width: 13px; height: 9px; background: url("../imgs/icons/arrow-bottom.svg") no-repeat center / cover; margin-left: 5px;}
/*submenu*/
.menu .abas .aba .submenu {height: 0; position: absolute; width: max-content;bottom: 0;transform: translateY(100%);}
.menu .abas .aba .submenu {transition: .5s; transform: scaleY(0); display: flex;flex-direction: column;}
.menu .abas .aba .submenu .sub {padding: 10px 15px; border-bottom: 2px solid var(--black);background: #383838;}
.menu .abas .aba:hover .submenu {transform: scaleY(1);}
.menu .abas .aba .submenu .sub:hover{background: var(--black);}

/* === RODAPE ===*/
.footer {width: 100%; padding: 50px 0; background: url("../imgs/marmore-preto.jpg")no-repeat center / cover; border-top: 5px solid var(--bege);}
.footer .center1200 {display: flex; justify-content: space-between;}
.footer .form {width: 50%; box-sizing: border-box; padding: 50px 30px; border-radius: 20px; background: var(--bege); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 15px}
.footer .form .nome {width: 100%; height: 40px; box-sizing: border-box; border-radius: 5px;border: none; padding: 10px;}
.footer .form .servico {width: 100%; height: 40px; box-sizing: border-box; border-radius: 5px; padding: 10px;background: var(--white); border: none;}
.footer .form .textarea {width: 100%; min-height: 200px; max-width: 100%; min-width: 100%; padding: 10px; border-radius: 10px;border: none; box-sizing: border-box;}
.footer .form button {transition: .3s; cursor: pointer; padding: 10px 50px; border-radius: 50px; background: var(--black); color: var(--white); font: 18px montserrat-bold;border: none;}
.footer .form button:hover, .footer .form button:focus {background: var(--bege-hover); box-shadow: inset 2px 1px 7px #00000033; transform: scale(0.98);}

.footer .infos {width: 35%;}
.footer .infos .title {font: 40px montserrat-bold; color: var(--bege);text-align: center;}
.footer .infos .botoes {margin: 20px 0 15px; display: flex; gap: 10px; flex-direction: column; align-items: center; justify-content: center;}
.footer .infos .botoes .button {font: 22px montserrat-bold; transition: .3s; width: 100%; box-sizing: border-box; padding: 5px 0;  border-radius: 20px; background: var(--bege); color: var(--black); display: flex; align-items: center; justify-content: center; gap: 8px; position: relative; cursor: pointer;text-decoration: none;}
.footer .infos .botoes .button:hover {background: var(--bege-hover); box-shadow: inset 2px 1px 7px #00000033; transform: scale(0.98);}
.footer .infos .botoes .button:before {content: ""; display: block; width: 25px; height: 25px; background: red;margin-bottom: 1px;}
.footer .infos .botoes .button.whats:before {background: url("../imgs/icons/whatsappblack.svg")no-repeat center / contain;}
.footer .infos .botoes .button.insta:before {background: url("../imgs/icons/insta.svg")no-repeat center / contain;}
.footer .infos .text {font: 22px montserrat-medium; color: var(--bege); text-align: center; line-height: 30px;}

/* resolve qualquer problema com as fonts do formulario em diversos navegadores */
.footer .form .alinhafont                            {color: #050505; font: 13px montserrat;}
.footer .form .alinhafont::placeholder               {color: #050505; font: 13px montserrat;}
.footer .form .alinhafont::-webkit-input-placeholder {color: #050505;}
.footer .form .alinhafont:-ms-input-placeholder      {color: #050505;}
.footer .form select.alinhafont                      {color: #050505;}
.footer .form select.alinhafont option[disabled]     {color: #050505;}

.midiando {width: 100%; padding: 15px 0; background: var(--black);}
.midiando .center1200 {font: 12px montserrat; color: var(--white); display: flex; align-items: center; justify-content: center; flex-direction: row;}
.midiando a {color: var(--bege); text-decoration: none; margin: 0 3px;}

.whatsapp-button {transition: .3s; width: 65px; height: 65px; position: fixed; bottom: 10px; right: 10px; border-radius: 100%; font-size: 0; background: url("../imgs/icons/whatsapplogo.svg") no-repeat center / 30px, green; z-index: 10;}
.whatsapp-button:hover {background-color: #005200; transform: scale(1.1);}

/* Estilo da Camada de Fundo */
#loading-overlay {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: #000000d9;z-index: 9999;display: flex;justify-content: center;align-items: center;}
.loader-content {text-align: center;color: var(--bege);font: 18px montserrat-bold;}
.spinner {border: 8px solid rgb(53 53 53 / 98%);border-radius: 50%;border-top: 8px solid var(--bege);width: 50px;height: 50px;animation: spin 1s linear infinite;margin: 0 auto 15px;}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* === PAGINA DE ERRO 404 === */
.erro404 {width:100%; height: calc(100vh - var(--menu)); display: flex; justify-content: center; align-items: center; flex-direction: column; text-align: center; font-family: montserrat-bold}
.erro404 h1 {margin-bottom: 30px; font-size: 40px}

@media (max-width: 1200px) {
    :root {
        --menu: 55px;
    }

}

@media (max-width: 990px) {
    :root {
        --menu: 40px;
    }
    .title {font-size: 30px !important;}
    .sub-title {font-size: 22px !important;}
    .text {font-size: 14px !important;}
    
    /* === MENU === */
    .hamburguer {cursor: pointer;display: flex;justify-content: center;align-items: center;height: 100%;width: var(--menu);}
    .hamburguer span, .hamburguer span:before, .hamburguer span:after {display: block;position: absolute;width: calc(var(--menu) - 10px);height: 3px;border-radius: 5px;background: var(--white);content: '';transition: all 0.5s ease-in-out;}
    .hamburguer span:before {left: 0;top: -8px;}
    .hamburguer span:after {left: 0;top: 8px;}
    .hamburguer.active span {background-color: transparent;}
    .hamburguer.active span:after, .hamburguer.active span:before {top: 0;background: #FFF;}
    .hamburguer.active span:before {transform: rotate(135deg);}
    .hamburguer.active span:after {transform: rotate(-135deg);}
    
    .menu {justify-content: right; padding: 0 2vw 0 0; box-sizing: border-box;}
    .menu .logo {height: calc(var(--menu) - 15px); width: calc(var(--menu) / 2); left: calc(var(--menu) / 2);}
    .menu .abas {transition: .3s; transform: translateX(-100vw); gap: 0; position: fixed; bottom: 0; background: var(--black); left: 0; flex-direction: column; width: 80vw;justify-content: flex-start;align-items: flex-start; box-shadow: 6vw 0px 10vw 20px #161616f5;}
    .menu .abas.aberto {transform: translateX(0);}
    .menu .abas .logo {position: static; height: 10vh; margin: 30px 0; width: 100%;}
    .menu .abas .aba { height: fit-content; padding: 20px 30px; border-bottom: 1px solid var(--bege); width: 100%;box-sizing: border-box; flex-direction: column;justify-content: center; align-items: flex-start}
    .menu .abas .aba:nth-of-type(1) {border-top: 1px solid var(--bege);}
    .menu .abas .aba:has(.submenu)::after {display: none;}
    .menu .abas .aba .submenu {border-left: 6px solid var(--bege-hover); margin-top: 19px; height: fit-content; position: static; width: 100%;transform: translateY(100%);transform: scaleY(1);}
    .menu .abas .aba .submenu .sub {background: none; padding: 10px 30px ; }
    .menu .abas .aba:hover .submenu {transform: none;}

    .footer .center1200 { flex-direction: column-reverse; align-items: center;gap: 50px;}
    .footer .infos {width: 50%;}
    .footer .infos .text {font-size: 18px !important;}
    .footer .infos .botoes .button {font-size: 16px; width: fit-content; padding: 6px 30px;}
    .footer .form {width: 90%;}

}

@media (max-width: 676px) {
    .menu .abas .aba {font-size: 15px;}
    .footer .infos {width: 90%;}
    .footer .form {padding: 30px 20px;}
    .footer .form .textarea {min-height: 130px;}
    .whatsapp-button {width: 45px; height: 45px; bottom: 10px; right: 10px; background-size: 22px}

}




/* === FONTS === */
@font-face {
    font-family: 'montserrat-black';
    src: url('fonts/montserrat-black-webfont.woff2') format('woff2'),
         url('fonts/montserrat-black-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'montserrat-bold';
    src: url('fonts/montserrat-bold-webfont.woff2') format('woff2'),
         url('fonts/montserrat-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'montserrat-extrabold';
    src: url('fonts/montserrat-extrabold-webfont.woff2') format('woff2'),
         url('fonts/montserrat-extrabold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'montserrat-extralight';
    src: url('fonts/montserrat-extralight-webfont.woff2') format('woff2'),
         url('fonts/montserrat-extralight-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'montserrat-italic';
    src: url('fonts/montserrat-italic-webfont.woff2') format('woff2'),
         url('fonts/montserrat-italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'montserrat-light';
    src: url('fonts/montserrat-light-webfont.woff2') format('woff2'),
         url('fonts/montserrat-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'montserrat-medium';
    src: url('fonts/montserrat-medium-webfont.woff2') format('woff2'),
         url('fonts/montserrat-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'montserrat';
    src: url('fonts/montserrat-regular-webfont.woff2') format('woff2'),
         url('fonts/montserrat-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}