@import url('https://fonts.googleapis.com/css2?family=Parisienne&family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

:root {
    --marrom:#53300E;
    --marrom-55: rgb(136 81 25 / 55%);
    --marrom-80:#53300ecc;
    --azul:#158CC1;
    --azul-80:#158CC1;
    --verde:#36A43C;
    --verde-10:#37a43c1a;
    --verde-80:#36a43bcc;


    --branco:#FFFFFF;
    --branco-10:#ffffff1a;
    --branco-82:rgba(255, 255, 255, 0.82);
    --gelo:#FAFAFA;
    --gelo-70:rgba(250, 250, 250, 0.7);
    --cinza:#333333;
    --grafite: #909090;
    --preto:#000000;
    --preto-50: rgba(0, 0, 0, 0.5);
    --bege: #D9D7CE;
}

html {font-size: 16px;}

h1, h2, h3, h4, h5, p, span, button, a, label, input, div, li, ul {font-family: 'Poppins', sans-serif !important;}
.font-parisienne {font-family: 'Parisienne', cursive !important;}

h2 {
    font-weight: 300!important;
}


ul {padding: 0; margin: 0;}
li {list-style-type: none;}

/* PESO DE FONTE */
.f-100 {font-weight: 100 !important;}
.f-200 {font-weight: 200 !important;}
.f-300 {font-weight: 300 !important;}
.f-400 {font-weight: 400 !important;}
.f-500 {font-weight: 500 !important;}
.f-600 {font-weight: 600 !important;}
.f-700 {font-weight: 700 !important;}
.f-800 {font-weight: 800 !important;}
.f-900 {font-weight: 900 !important;}

/*TAMANHO DA FONTE */
.f-12{font-size:0.75rem !important ;}
.f-13{font-size:0.813rem !important ;}
.f-14{font-size:0.875rem !important ;}
.f-16{font-size:1rem !important ;}
.f-18{font-size:1.125rem !important ;}
.f-20{font-size:1.25rem !important ;}
.f-25{font-size:1.563rem !important ;}
.f-28{font-size:1.75rem !important ;}
.f-30{font-size:1.875rem !important ;}
.f-35{font-size:2.188rem !important ;}
.f-38{font-size:2.375rem !important ;}
.f-40{font-size:2.5rem !important ;}
.f-61{font-size:3.813rem !important ;}
.f-92{font-size:5.75rem !important ;}
.f-115{font-size:7.188rem !important ;}

/*COR FONTE*/
.marrom{ color: var(--marrom)!important;}
.azul{ color: var(--azul)!important;}
.grafite{ color: var(--grafite)!important;}
.branco{ color: var(--branco)!important;}
.preto{ color: var(--preto)!important;}

/* FORM */
textarea, input {
    color: var(--cinza);
    background: transparent!important;
    border: 1px solid var(--cinza);
    padding: .5rem .75rem!important;
    width: 100%;
    border-radius:10px!important;
    -webkit-border-radius:10px!important;
    -moz-border-radius:10px!important;
    -ms-border-radius:10px!important;
    -o-border-radius:10px!important;
}
textarea:focus,
input:focus {
    border: 1px solid var(--cinza)!important;
    outline: none !important;
    box-shadow: none !important;
    border-color: none !important;

}
textarea::-webkit-input-placeholder,
input::-webkit-input-placeholder {
    color: var(--preto-50)!important;
}
textarea:-moz-placeholder,
input:-moz-placeholder {
    color: var(--preto-50)!important;
}
textarea::-moz-placeholder,
input::-moz-placeholder {
    color: var(--preto-50)!important;
}
textarea:-ms-input-placeholder,
input:-ms-input-placeholder {
    color: var(--preto-50)!important;
}
textarea::placeholder,
input::placeholder {
    color: var(--preto-50)!important;
}

/* EXEMPLO DE BOTÃO */
a.btn,button.btn {
    font-size: 0.875rem;
    padding: .7rem 2rem;
    border: 2px solid;
    border-radius: 10px;
    font-weight: bold;
    transition: all 0.4s ease-in-out;
}
a.btn.exemplo,
button.btn.exemplo {
    color: var(--verde);
    border-color: var(--verde);
    background: transparent;
}
a.btn.exemplo:hover,
button.btn.exemplo:hover {
    background: var(--verde-10);
}

/*BOTAO AZUL*/
a.btn.azulBtn,
button.btn.azulBtn {
    color: var(--branco);
    border-color: var(--azul);
    background:  var(--azul);
}
a.btn.azulBtn:hover,
button.btn.azulBtn:hover {
    background: var(--azul-80);
}

/*BARRA MENU CONTATO*/
header div#barracontatoNav{
    background: var(--marrom);
    color: var(--branco);
}
header div#barracontatoNav div.row, nav div.container-fluid{
    min-height: 70px;
}
nav div.container-fluid{
    background: var(--branco);
    color: var(--marrom);
}
header div#barracontatoNav .justify-content-between{
    grid-gap: .8rem;
}
header div#barracontatoNav a:link, header div#barracontatoNav a:visited{
    text-decoration: none;
    color: var(--branco)!important;
}
header div#barracontatoNav a:hover{
    text-decoration: none;
    color: var(--bege)!important;
}
#barracontatoNav .dropdown-menu, #barracontatoNav .dropdown-menu li a:link,  #barracontatoNav .dropdown-menu li a:visited{
    background-color: var(--branco);
    color: var(--marrom)!important;
}
#barracontatoNav .dropdown-menu li a:hover{
    color: var(--branco)!important;
    background-color: var(--marrom)!important;
}
nav .search-btn{
    background: transparent;
    border: 0;
    color: var(--marrom);
}
nav .nav-link:link, nav .nav-link:visited{
 color: var(--marrom)!important;
}
nav .nav-link:hover{
    color: var(--marrom-80)!important;
}
#navbarContent ul{
       grid-gap:1rem;
}
nav form.d-flex {
    position: relative;
}

nav input.form-control.me-2 {
    position: absolute;
    width: 200px;
    right: 0;
    bottom: -3rem;
}
label.search-btn input:focus {
    width: 200px!important;
    border: 1px solid var(--marrom);
    border-radius: 0;
    background: white!important;
    filter: brightness(1);
    opacity: 1;


}
label.search-btn input {
    filter: brightness(2);
    width: 0px!important;
    opacity: 0;
    border: 0;
    transition: all 0.4s cubic-bezier(0.65, 0.05, 0.36, 1);

}

section#newsletter .col-12{
    width: 450px;
    max-width: 90%;
    margin-top: 10rem;
    margin-bottom: 10rem;
    letter-spacing: .4rem;
}

/*RODAPE*/
div#rodape{
    background-color: var(--azul);
}

div#rodape ul.menu-rodape li a:link, div#rodape ul.menu-rodape li a:visited{
    text-decoration: none;
    color: var(--gelo-70);
}
div#rodape ul li a:hover, div#footer ul li a:hover{
    color: var(--marrom)!important;
}


/*XL*/
@media screen and (max-width: 1199px) {
    nav div.container-fluid{
        min-height: auto;
    }
    .navbar-nav {
        text-align:center;

    }
    div#navbarContent.show {
        display: flex;
        justify-content: center!important;
        flex-direction: column!important;
        position: fixed;
        width: 100vw;
        background: var(--branco);
        z-index: 999999;
        top: 0;
        left: 0;
        height: 100vh!important;
        transition: height 0.25s ease;
        -webkit-transition: height 0.25s ease;
        -moz-transition: height 0.25s ease;
        -ms-transition: height 0.25s ease;
        -o-transition: height 0.25s ease;

    }

    div#navbarContent.collapsing {
        position: fixed;
        width: 0%;
        transition: height 0.25s ease;
        -webkit-transition: height 0.25s ease;
        -moz-transition: height 0.25s ease;
        -ms-transition: height 0.25s ease;
        -o-transition: height 0.25s ease;

    }
    div#navbarContent.show button#closeNav{
        opacity: 1;
    }
    button#closeNav {
        opacity: 0;
        position: fixed;
        left: 1rem;
        top: 1rem;
        transition:all .4s;
        transition-delay: 5s;
        -webkit-transition:all .4s;
        -moz-transition:all .4s;
        -ms-transition:all .4s;
        -o-transition:all .4s;
    }

    ul.navbar-nav.me-2.mb-auto.mb-lg-0 {
        justify-content: center!important;
        height: max-content!important;
        margin-bottom: 0!important;
    }

}

/*MOBILE*/
@media (max-width: 767px) {
    html {font-size: 14px!important;}

    /*RODAPE*/
    div#rodape{
        text-align: center!important;
    }

    div#rodape .d-flex.justify-content-between.f-14.branco {
        justify-content: center !important;
    }

    .f-12{font-size:0.75rem !important ;}
    .f-13{font-size:0.813rem !important ;}
    .f-14{font-size:0.875rem !important ;}
    .f-16{font-size:1rem !important ;}
    .f-18{font-size:1.125rem !important ;}
    .f-20{font-size:1.25rem !important ;}
    .f-25{font-size:1.281rem !important ;}
    .f-28{font-size:1.313rem !important ;}
    .f-30{font-size:1.5rem !important ;}
    .f-35{font-size:2.5rem !important ;}
    .f-38{font-size:2.7rem !important ;}
    .f-40{font-size:3rem !important ;}
    .f-61{font-size:3.3rem !important ;}
    .f-92{font-size:3.625rem !important ;}
    .f-115{font-size:4.188rem !important ;}

}

section#caption h2 {
    text-transform: uppercase;
    color: var(--marrom);
    font-family: "Poppins", sans-serif;
    font-size: 1.5625rem !important;
    font-weight: normal !important;
    letter-spacing: 1px;
}