@charset "UTF-8";

/*!
 * Este arquivo faz adaptação do CSS do bootstrap,
 * para regra do projeto definido pelo autor.
 * Bootstrap v5.3.2 (https://getbootstrap.com/)
 * @Copyright 2024 
 * Author CalungaSoft
 */
/* ===================================================== RESET ======================================================== */
/* Importa a fonte Montserrat do Google Fonts */
/*@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');*/
/*@import url('https://fonts.googleapis.com/css2?family=Sora:wght@100..800&family=The+Nautigal:wght@400;700&display=swap');*/
/* Define estilos de reset globais */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border: none;
    outline: none;
    font-weight: 300;
    font-family: 'Montserrat', sans-serif !important;
    transition: 0.3s;
}

/* Define o cálculo de largura e altura levando em consideração a borda e o preenchimento */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Define variáveis CSS globais */
:root {
    --sf-colo-dark:#3F3123;
    --sf-color-bg:#F1E7DE;
    --sf-color-primary:#F97344;
    --sf-color-warning:#FEC20B;
    --sf-color-dark-light:#CCBEB5;
    --sf-root-font-size: 16px;
    --sf-body-font-size: 0.9375rem;
    --sf-body-font-weight: 400;
    --sf-body-line-height: 1.53;
    --sf-shadow:0 .5rem 1rem rgba(0, 0, 0,0.1);
}
/*Classes para cores*/
.text-sf-primary
{
    color:var(--sf-color-brand)!important;
}
.text-sf-warning
{
    color:var(--sf-color-warning)!important;
}
/* Define o estilo de seleção */
::selection {
    background-color:var(--sf-color-primary);
    color:#fff;
}
html{
    scroll-behavior:smooth!important;
}
/* Define o estilo padrão para o corpo do documento */
body {
    font-size: var(--sf-body-font-size);
    font-weight: var(--sf-body-font-weight);
    line-height: var(--bs-body-line-height);
    color:var(--sf-color-primary);
    -webkit-text-size-adjust:100%;
    display: flex;
    flex-direction:column;
    min-height:100vh;
    background-color:var(--sf-color-bg)!important;
}

/* Define estilos padrão para elementos de cabeçalho */
h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
    margin-top: 0;
    margin-bottom: 1rem;
    font-weight: 500;
    line-height: 1.1;
    color: var(--bs-heading-color);
}

/* Define estilos de tamanho de fonte para cada nível de cabeçalho */
h1, .h1 {
    font-size: calc(1.3625rem + 1.35vw);
}

@media (min-width: 1200px) {
    h1, .h1 {
        font-size: 2.375rem;
    }
}

h2, .h2 {
    font-size: calc(1.325rem + 0.9vw);
}

@media (min-width: 1200px) {
    h2, .h2 {
        font-size: 2rem;
    }
}

h3, .h3 {
    font-size: calc(1.2875rem + 0.45vw);
}

@media (min-width: 1200px) {
    h3, .h3 {
        font-size: 1.625rem;
    }
}

h4, .h4 {
    font-size: calc(1.2625rem + 0.15vw);
}

@media (min-width: 1200px) {
    h4, .h4 {
        font-size: 1.375rem;
    }
}

h5, .h5 {
    font-size: 1.125rem;
}

h6, .h6 {
    font-size: 0.9375rem;
}

/* Define estilos para parágrafos */
p {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 16px;
    line-height: 1.5;
}

/* Define estilos para texto pequeno */
small, .small {
    font-size: 85%;
}

@media (max-width: 768px) {
    p {
        font-size: 14px;
    }
    small {
        font-size: 10px;
    }
}

/* Define estilos para texto em negrito */
strong {
    font-weight: bolder;
}

/* Define estilos para links */
a {
    text-decoration: none !important;
    opacity: 0.89;
    color: #fff;
}

a:hover {
    opacity: 1;
}

/* Define estilos para links sem href */
a:not([href]):not([class]), a:not([href]):not([class]):hover {
    color: inherit;
    text-decoration: none;
}

/* Remove a sombra ao focar em links e botões */
a:focus, button:focus {
    box-shadow: none !important;
}

/* Remove a borda ao focar em botões */
button {
    position: relative;
}

/* Remove a borda de elementos de formulário ao focar */
input 
{
    outline: none !important;
}

img{
  max-width: 100%!important;
  height: auto!important;
}
main.content {
    flex: 1;
}

header
{
    padding:20px 50px;
    position:fixed;
    width:100%;
    z-index:100;
    background-color:var(--sf-color-bg);
}
.container-top
{
    padding:200px 50px;
}
.nav-menu
{
    
    display:flex;
    justify-content:space-between;
    border-bottom:1px solid var(--sf-color-dark-light);
    align-items:center;
    padding-bottom:20px;
}
.nav-menu .container-buguer
{
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.nav-menu .container-buguer .brand img
{
   width:8rem;
}
.nav-menu .container-menu
{
    display:flex;
    width:70%;
    justify-content:space-between;
}
.nav-menu .container-menu .menu
{
    display:flex;
    list-style:none!important;
    gap:25px;
}
.nav-menu .container-menu .menu li a
{
    color:var(--sf-colo-dark);
    font-weight:600;
}
.nav-menu .menu-buguer
{
    font-size:3rem;
    color:#3f3123;
    display:none;
}
.nav-menu .ativo
    {
         display:flex!important;
         flex-direction:column!important;
         justify-content:flex-start!important;
         position:absolute;
         top:110px;
         background-color:var(--sf-color-bg)!important;
         padding:20px;
         width:100%!important;
         height:100vh;
         left:0;
    }
 .nav-menu .ativo .menu
{
         flex-direction:column!important;
         gap:10px!important;
}
.footer{
    padding:100px 50px 50px 50px;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    gap:20px;
    background-color:var(--sf-colo-dark);
}
.footer .container-top
{
    width:100%;
    border-bottom:1px solid #CCBEB5;
    border-top:1px solid #CCBEB5;
    padding:50px;
    display:flex;
    justify-content:center;
}
.footer .container-top h5
{
     color:#CCBEB5;
     font-size:2rem;
     font-weight:600;
     max-width:700px;
     text-align:center;
}
.footer .container-top h5 span
{
    color:var(--sf-color-primary);
    font-weight:600;
}
.footer .container-bottom
{
    display:flex;
    flex-direction:column;
    gap:20px;
    justify-content:center;
    align-items:center;
}
.footer .container-bottom img
{
   width:6rem;
}
.footer .container-bottom  ul
{
    display:flex;
    gap:20px;
}
.footer .container-bottom  ul li
{
    border:1px solid var(--sf-color-primary);
    display:flex;
    justify-content:center;
    align-items:center;
    border-radius:50%;
    width:50px;
    font-size:1.4rem;
    height:50px;
}
.footer .container-bottom  ul li a
{
    color:var(--sf-color-primary);
}
.footer .container-bottom  ul li:hover 
{
    
    background-color:var(--sf-color-primary);
}
.footer .container-bottom  ul li:hover a
{
    color:#fff;
}
.footer .container-bottom span
{
    color:#957C62;
    font-weight:600;
}
.brand-animation
{
    position:absolute;
    left:0;
    margin-top:-480px;
    margin-left:50px;
}
.custom-title
{
    text-align:center;
    font-weight:700;
    text-transform:uppercase;
}
.custom-title span
{
    font-weight:700;
    color:var(--sf-color-primary); 
}
.container-wrap
{
      padding:50px 50px;
}
.buttom
{
    color:var(--sf-colo-dark);
    font-weight:600; 
    padding:10px 30px;
    border-radius:0 18px;
}
.seccundary
{
    background-color:#fff;
}
.primary
{
    background-color:var(--sf-color-primary);
    color:#fff!important;
    font-weight:600;
}
.seccundary:hover
{
     color:var(--sf-colo-dark);
    background-color:var(--sf-color-primary);
}
.form-custom
{
    padding:15px;
    background-color:#F0F0F0;
    border-radius:8px;
    font-weight:600;
    font-size:1rem;
    color:#acacac;
}
/*------------------------------Resposividade --------------------------------*/
 @media (max-width:960px)
{ 
   header{
     padding:10px;
   }
   .nav-menu{
     flex-direction:column;
     justify-content:flex-start;
     align-items:start;padding:10px;
   }
   .nav-menu .container-buguer
   {
     width:100%;
   }
   .nav-menu .menu-buguer
   {
      display:flex!important;
      font-size:2rem;
   }
    .nav-menu .container-menu 
    {
         display:none;
    }

    .footer
    {
        padding:50px!important;
    }
    .footer .brand-animation{
        position:relative!important;
        margin:auto!important;

    }
    
}
@media (max-width:320px)
{
    .container-top
    {
        padding:150px 20px;
    }
    .custom-title
    {
        font-size:1.6rem;
    }
    .footer 
    {
        padding:20px!important;
    }
    .footer .brand-animation
    {
        width:4rem!important;
    }
    .footer h6
    {
        font-size:1.2rem!important;
    }
}
.hidden
{
    opacity:0;
    filter:blur(15px);
    transform:translateX(-100%);
   
}
.show {
    opacity:1;
    filter:blur(0);
    transform:translateX(0);
    transition:all 2s;
}
.active
{
    color:var(--sf-color-primary)!important;
}
.buttom.active
{
    background-color:var(--sf-color-primary)!important;
    color:#fff!important;
}