*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;
}

 body {
     font-family: 'Nunito', sans-serif;
     background-image: url('../img/bg.jpg');
     color: #4C322D;
     font-size: 1.5rem;
     margin: 0;
     padding: 0;
     max-width: 100vw;
     width: 100vw;

 }

 html {
     overflow-x: hidden;
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
     font-family: 'Amatic SC', cursive;
     font-weight: bold;

 }
    nav .dropdown-menu{
        background-color: #4c322d;
    }
    nav .dropdown-item:hover{
        background-color:#2e1302;
    }

 .banner {
     min-height: 100vh;
     display: flex;
     justify-content: center;
     align-items: center;
     text-align: center;
     background-size: cover !important;
     background-position: center !important;
     color: #EDE2E0;


 }


 .banner h1,
 .banner img {
     opacity: 0
 }

 .btn-banner {
     opacity: 0
 }

 .banner2 {
     min-height: 60vh;
     display: flex;
     justify-content: center;
     align-items: center;
     text-align: center;
     background-size: cover;
     background-position: center;
     color: #EDE2E0;

 }


 h1 {
     font-size: 3.5rem;
 }


 h2 {
     font-size: 3rem;
 }


 h3 {
     font-size: 2.5rem;
 }


.navbar-toggler{
    filter:invert();
}

 .navbar-camppax {
     position: relative;
     margin: 0 auto;
     left: 0;
     right: 0;
     padding: 10px;
     border-bottom: 2px solid #2e1302;
     z-index: 99;
 }

 .navbar-nav {
     flex-direction: row;
 }

 .nav-link {
     padding-right: 1rem;
     padding-left: 1rem;
     color: #2e1302;
 }

 .table{
    max-width: 100%;;
 }

 @media (max-width: 768px) {
     .navbar-nav {
         flex-direction: column;
     }

     .banner h1 {
         font-size: 8vw;
     }

     body {
         font-size: 1.2rem
     }

     .produtos-secao::before {
         display: none;
     }

     .produtos-secao::after {
         display: none;
     }

     .oque {
         font-size: 1.2em !important;
     }

 }

 .separador {
     background-color: #EDE2E0;
     border-top-left-radius: 50px;
     border-top-right-radius: 50px;
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
     width: 100%;
     height: 50px;
     position: absolute;
     bottom: 0;
 }


 .flickity-page-dots {
     display: none
 }

 section {
     border: 2px solid #2e1302;
 }


 .produto {
     border: 2px solid #2e1302;
     border-radius: 200px;
     padding: 20px;
     text-align: center;
     min-height: 530px;
     max-height: 15vh;
     width: 100%;
     max-width: 370px;
     color: #2e1302;
     background-size: auto 100%;
     background-position: center;
     position: relative;
     margin: auto;
     box-shadow: 0px 0px 0px #2e1302;
     transition: all 0.5s ease;
     transform: translate(5px, 5px);
 }


 .produto.carousel-cell {
     transition: none !important;
     box-shadow: none !important;
 }

 .produto:hover {
     box-shadow: 5px 5px 0px #2e1302;

     transition: all 0.5s ease;
     transform: translate(-5px, -5px);

 }

 .pagination {
     justify-content: center;
 }

 .produto p {
     color: #EBA222;
     position: absolute;
     bottom: 0;
     left: 0;
     font-family: 'Amatic SC', cursive;
     font-size: 1.6em;
     background-color: #471e04;
     border-radius: 200px;
     padding: 10px 20px 10px 20px;
     line-height: 1.3;
 }

 .carousel {
     cursor: grab;
 }

 .carousel-cell {
     opacity: 1;
     transition: opacity 0.5s ease-in-out;
     width: 370px;
     min-height: 530px;
     max-height: 15vh;
     margin-right: 10px;
     background: #8C8;
     border-radius: 500px;

 }

 .carousel-cell:before {
     line-height: 200px;
     font-size: 80px;
 }

 .flickity-button {
     display: none;
 }

 .carousel-cell.fade-out {
     opacity: 0;
 }




 .carousel-inner {
     border: 2px solid #2e1302;
     border-radius: 10px;
 }

 .bordas {
     border: 2px solid #2e1302;
     border-radius: 10px;
 }


 .img {
     border: 2px solid #2e1302;
     border-radius: 10px;
 }



 .col-lg-4 .col-12 .mb-5 .produto {
     width: auto !important;
 }

 .produto p {
     border: 2px solid #2e1302;
 }

 .produtos-secao {
     position: relative;
     overflow: hidden;
     margin-top: -50px;
     color: #EDE2E0;
     border-radius: 50px 50px 0px 0px;
     max-height: 1000px;
     padding-top: 7vh;
     padding-bottom: 12vh;
 }

 .bg-laranja {
     background-image: url('../img/laranja-bg.jpg');
 }

 .produtos-secao::before,
 .produtos-secao::after {
     content: '';
     position: absolute;
     top: 0;
     bottom: 0;
     width: 30vw;
     pointer-events: none;
     z-index: 1;
     /* Adiciona z-index para garantir que esteja acima dos outros elementos */
 }

 .produtos-secao::before {
     left: 0;
     background: linear-gradient(90deg, rgb(208, 104, 11) 60%, rgba(0, 0, 0, 0) 100%);
 }

 .produtos-secao::after {
     right: 0;
     background: linear-gradient(270deg, rgb(208, 104, 11) 60%, rgba(0, 0, 0, 0) 100%);
 }



 .nav-link {
     position: relative;
     display: inline-block;
 }

 .nav-link::after {
     content: '';
     position: absolute;
     width: 100%;
     transform: scaleX(0);
     height: 2px;
     bottom: 0px;
     left: 0;
     background-color: #2e1302;
     color:#2e1302;
     /* Cor da linha */
     transform-origin: bottom right;
     transition: transform 0.25s ease-out;
 }

 .dropdown-toggle::after{
    border-top:none;
 }

 .nav-link:hover::after {
     transform: scaleX(1);
     transform-origin: bottom left;
 }
 


 .todosprodutos {
     position: relative;
     overflow: hidden;
     background-image: url('../img/laranja-bg.jpg');
     color: #EDE2E0;
     border-radius: 50px;
     margin-top: -50px;
     padding-top: 7vh;
     padding-bottom: 12vh;
 }




 .flickity-viewport:focus {
     outline: none;
 }

 *:focus {
     outline: none;
 }

 @keyframes fadeIn {
     from {
         opacity: 0;
     }

     to {
         opacity: 1;
     }
 }

 .fade-in {
     animation: fadeIn 1s ease-in-out forwards;
     /* Adiciona forwards para manter a opacidade */
 }

 .oque {
     border-radius: 50px 50px 0px 0px;
     margin-top: -50px;
     background-image: url('../img/bg.jpg');
     font-size: 0.8em;
 }

 .sobre {
     position: relative;
     margin-top: -50px;
     color: #EDE2E0;
     padding-bottom: 50px;
     border-radius: 50px 50px 0px 0px;
     max-width: 100vw;
     overflow-x: hidden;

 }

 .bg-marrom {
     background-image: url('../img/marrom-bg.jpg');
 }

 .sobre h1,
 .sobre h2,
 .sobre h3,
 .sobre h4,
 .sobre h5,
 .sobre h6 {
     color: #EBA222;
 }

 .sobre img {
     border-radius: 20px;
     outline: 2px solid #4C322D;
     border: 2px solid #2e1302;
 }


 .icon-circle img {
     outline: none;
     border: none;
 }

 .blog {
     position: relative;
     margin-top: -50px;
     color: #EDE2E0;
     padding-bottom: 150px;
     border-radius: 50px 50px 50px 50px;
     min-height: 300px;
     max-width: 100vw;
     overflow: hidden;
 }
 
 
.instagram {
     position: relative;
     margin-top: -50px;
     color: #EDE2E0;
     padding-bottom: 150px;
     border-radius: 0px 0px 50px 50px;
     min-height: 300px;
     max-width: 100vw;
     overflow: hidden;
     background-color:#C13584;
    
}

 .bg-verde {
     background-image: url('../img/verde-bg.jpg');
 }

 .blog img {
     border-radius: 20px;
     outline: 2px solid #EDE2E0;
 }

 .btn-verde {
     border: 2px solid #2e1302;
     display: inline-block;
     padding: 10px 15px 10px 15px;
     color: #EDE2E0;
     text-align: center;
     text-decoration: none;
     vertical-align: middle;
     cursor: pointer;
     -webkit-user-select: none;
     -moz-user-select: none;
     user-select: none;
     border-radius: 100px;
     background-color: #085A2C;
     transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out, transform .15s ease-in-out;

 }

 .btn-verde:hover {
     background-color: #063f1f;
     box-shadow: 3px 3px 0px #2e1302;
     transform: translate(-3px, -3px);
     transition: transform .15s ease-in-out, box-shadow .15s ease-in-out;
 }

 .btn,.page-link {
     border: 2px solid #2e1302 !important;
     display: inline-block;
     padding: 10px 15px 10px 15px;
     text-align: center;
     text-decoration: none;
     vertical-align: middle;
     cursor: pointer;
     -webkit-user-select: none;
     -moz-user-select: none;
     user-select: none;
     border-radius: 100px !important;
     transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out, transform .15s ease-in-out;
 }

 .btn:hover,.page-link:hover {
     border: 2px solid #2e1302;
     box-shadow: 3px 3px 0px #2e1302;
     transform: translate(-3px, -3px);
     transition: all .15s ease-in-out;
 }

 .page-link{
    background-color:#EBA222 !important;
    color:#2e1302;
 }


 








 .btn:active {
     border: 2px solid #2e1302;
 }

 .icon-circle {
     width: 115px;
     height: 115px;
     border-radius: 50%;
     background-color: #F2921C;
     outline: 2px solid #4C322D;
     color: #EDE2E0;
     display: flex;
     align-items: center;
     justify-content: center;
     position: absolute;
     top: -60px;
     left: 50%;
     transform: translateX(-50%);
 }

 .icon-circle img {
     outline: none;
 }



 .imagem-manchete {
     border-radius: 20px;
     margin: 15px 0px;
 }

 .titulo-manchete {
     font-size: 3em;
 }

 .post-blog {
     text-align: left;
     transition: transform 0.5s ease;
     color: #EDE2E0;
     text-decoration: none;
 }

 .post-home {
     border-radius: 20px;
     border: 2px solid #2e1302;
     width: 100%;
     height: 400px;
     background-size: cover;
     background-position: center;
 }

 .post-blog h2 {
     font-family: 'Nunito', sans-serif !important;
 }

 .post-blog:hover {
     transform: scale(1.02);
     transition: transform 0.5s ease;
     cursor: pointer
 }

 .reset-a {
     color: unset !important;
     text-decoration: none !important;

 }

 .reset-a h3 {
     word-break: break-word;
 }


footer {
    min-height: 400px;
    color: #4C322D;
    /* Adicionamos estas regras para garantir que ele preencha a tela */
    width: 100%;
    /* Se você quiser um espaçamento, use padding em vez de margin */
    padding: 20px 0;
}

footer a {
    text-decoration: none;
 
    color: #4C322D;
    
}

footer a:hover {
    color: #4C322D;
    text-decoration: underline;
}

/* Se você estiver usando um container no footer, adicione um padding interno */
footer .container {
    padding: 0 15px; /* Adiciona o padding lateral que o box-sizing pode ter removido */
}
.footer-container {
    margin: 100px 0px;
}

.whatsapp {
     position: fixed;
     bottom: 10%;
     right: 10%;
     height: 80px;
     width: 80px;
     background-color: #085A2C;
     background-image: url("../img/whatsapp.png");
     background-size: contain;
     z-index: 1;
     border-radius: 100%;
     border: 2px solid #2e1302;
     transition: transform .3s ease-in;
 }
 
 .whatsapp:hover{
     transform: scale(1.2);
     
     transition: transform .3s ease-out;
 }

 .p-70 {
     padding: 70px 0px 70px 0px;
 }

 /* Estilos do Preloader */
 #preloader {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: #4C322D;
     color: #EBA222;
     display: flex;
     justify-content: center;
     align-items: center;
     z-index: 9999;
     font-family: 'Amatic SC', cursive;
     font-size: 2em;
     transition: transform 1s ease-in-out, opacity 1s ease-in-out;
 }

 .floating-image {
     width: 120px;
     height: 120px;
     background-image: url("../img/icon.png");
     background-size: cover;
     animation: float 3s ease-in-out infinite;
 }

 @keyframes float {
     0% {
         transform: translateY(0);
     }

     50% {
         transform: translateY(-20px);
     }

     100% {
         transform: translateY(0);
     }
 }

 /* Esconde o preloader com animação */
 .hide-preloader {
     transform: translateY(-200%);
     opacity: 0;
 }
 
/* Media query para dispositivos mobile, com largura máxima de 768px */
@media (max-width: 768px) {
    body {
        font-size: 1rem; /* Tamanho de fonte ainda menor para o texto principal */
    }
    h1 {
        font-size: 2rem; /* Tamanho do h1 para mobile */
    }
    h2 {
        font-size: 1.8rem; /* Tamanho do h2 para mobile */
    }
    h3 {
        font-size: 1.6rem; /* Tamanho do h3 para mobile */
    }
    /* Se a fonte do ".oque" ainda estiver grande, adicione esta regra */
    .oque {
        font-size: 0.8em !important;
    }
}







/* Estilos para a seção do Instagram */