body {
    font-family: 'Poppins', sans-serif;
}
.btn:hover{background: #16985b !important; border-bottom: 3px solid #0b6e40; ;}

p {color: #703416; font-size: 16px;}
h2 {color: #947160; font-weight: bold; text-transform: lowercase;}
h3 {color: #F53E28; font-weight: bold; text-transform: lowercase;}
h4 {color: #F53E28; font-weight: bold; text-transform: lowercase;}
.navbar {background: #F7EFE4 !important; padding:10px 0}
.navbar img {width:150px}
.topo {background-color: #FBF7F1;}
.topo i {color: #16985b; margin-right: 5px;}
small {text-transform: lowercase; font-weight: bold; color:#703416}
.topo h1 {color: #F53E28; font-weight:600;}
.barra {text-transform: uppercase; font-weight: bold;}
.topo h1 span {text-decoration: underline; color:#703416}
.topo ul {color: #703416; font-size:18px; list-style-type: none; margin-left: 0; padding-left: 0;}
.topo ul li {margin-top:10px; margin-left: 0;}
.topo span {color: #703416; font-size: 20px;}
.barra {background:#703416; color:#fff}
.box {background:#E2D7C6; border-radius:10px; color:#703416}
.section-three {background:#F7EFE4}
.mockup {width: 50%;}
.culpa p {font-size:18px;}
.culpa img {width: 50%; margin:20px auto; display: block; margin-bottom:50px; margin-top:50px}
.btn-primary {background-color: #21be75; font-weight: bold; text-transform: uppercase; border-bottom: 3px solid #16985b; border-left: 0; border-right: 0; border-top:0
    ; padding:10px 50px; display: inline-block;}
.selo  {
    filter: invert(1) brightness(0);
}
#indice li {color: #703416 !important;}
.shadow {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
  }
  .notyf__toast {
    border-radius: 10px !important;
    font-size: 14px !important;
  }

  .notyf__toast--sale {
    background-color: #F53E28 !important;
    color: white !important;
  }
.section-three img {width:60%}
.section-three p {font-size:18px;}
.culpa .btn {text-align: center;}
.agora {margin:50px auto 150px; display: inline-block; text-align: center;}
.section-two {
    margin-top:50px;
    position: relative;
    background: white;
    z-index: 1; /* Garante que o conteúdo fique acima */
}

.section-two::after {
    content: "";
    position: absolute;
    bottom: -20px; /* Move a imagem mais para baixo */
    left: 0;
    width: 100%;
    height: 45%; /* Reduz um pouco a altura da imagem */
    background: 
        linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 90%), 
        url('../images/pattern.png') repeat-x center bottom;
    background-size: auto 100%;
    pointer-events: none;
    z-index: -1; /* Mantém a imagem no fundo */
}


.box {
    display: flex;
    align-items: center; /* Alinha verticalmente */
    justify-content: space-between; /* Espaço entre os elementos */
}

.box i {
    flex: 0 0 30%; /* Ícone ocupa 30% da largura */
    display: flex;
    align-items: center;
    justify-content: center; /* Centraliza horizontalmente e verticalmente */
    font-size: 2rem; /* Ajuste o tamanho conforme necessário */
}

.box span {
    flex: 0 0 70%; /* Texto ocupa 70% da largura */
    display: flex;
    align-items: center;
    justify-content: center; /* Centraliza horizontalmente e verticalmente */
    text-align: center; /* Centraliza o texto dentro do span */
}


.topo .row {
    display: flex;
    align-items: stretch; /* Faz as colunas terem a mesma altura */
}

.topo .col-12.col-md-6.text-center {
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Alinha a imagem no final da coluna */
    align-items: center; /* Centraliza a imagem horizontalmente */
}

.box {
    display: flex; /* Ativa o Flexbox */
    border-radius:10px;
}

.box .one {
    width: 30%;
    background: #E2D7C6;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.box .two {
    width: 70%;
    background: #FBF7F1;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.problemas {
    display: flex;
    flex-wrap: wrap; /* Garante que as colunas quebrem corretamente em telas menores */
}

.problemas > .col-md-3 {
    display: flex;
    flex: 1; /* Faz com que todas as colunas tenham a mesma altura */
}

.problemas .box {
    display: flex;
    flex-grow: 1; /* Faz a .box ocupar toda a altura disponível */
    align-items: center; /* Alinha verticalmente */
    text-align: left; /* Garante que o texto fique alinhado à esquerda */
    padding: 20px;
}

.problemas .box i {
    flex: 0 0 30%; /* Ícone ocupa 30% da largura */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem; /* Ajuste o tamanho do ícone conforme necessário */
}

.problemas .box span {
    flex: 0 0 70%; /* Texto ocupa 70% da largura */
    display: flex;
    align-items: center;
}
.section-four i {font-size: 3em;}
.section-five {margin-bottom:50px !important; display:block}
.section-five .carousel img {margin-right:10px; border-radius:10px}
.section-six {background:#F7EFE4; margin:40px 0}
.boxcompra {background: #F53E28; color:#F7EFE4}
.boxcompra .boxpreco {background:#FBF7F1; color: #703416;}
.faq {background-color: #F7EFE4;}
.depoimentos img {margin-right:10px}
.bonusbox .bonus {background-color: #F7EFE4; border-radius: 10px; padding: 20px;}
.bonus span {text-transform: uppercase; text-decoration: line-through; color: #703416;}
.bonus .badge {background-color:#703416; color:#fff; padding:10px 30px; text-transform: uppercase;}
.bonus h4 {font-size:20px}
.grupo img {width: 80%;}
.boxcompra h2 {color:#fff}
.boxcompra ul {font-size:18px; list-style-type: none; padding-left: 0;}
.boxcompra ul li {margin-bottom:10px}
.boxpreco {border-radius:10px; padding:20px}
.boxpreco h2 {color: #F53E28;}
.boxpreco .title {padding:10px}
.boxpreco h3 {text-transform: uppercase; font-weight: 300; color: #703416; font-size:1.2em}
.boxpreco h4 {color: #703416; text-transform: capitalize; font-size:1.1em; text-decoration: dashed;}
.price {font-size:3em; text-transform: capitalize; color: #703416 !important;}
.price span {font-size:20px !important}
.boxpreco small {color: #947160; text-transform: uppercase; font-weight: 400; font-size: .8em; line-height: 1.2em; margin-bottom: 15px; display: block;}
.depoimentos img {max-width: 300px;}
.satisfacao {
    background: linear-gradient(to bottom, #fff, #F7EFE4);
    margin-top: 40px;
    display: block;
}
.testimonial-box {
    background-color: #d8cbb5; /* Cor do balão */
    border-radius: 20px;
    padding: 40px 20px;
    position: relative;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    text-align: center;
  }
  
  .triangle {
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 12px solid #d8cbb5; /* Mesmo fundo do balão */
  }
  
  .comment {
    font-size: 1rem;
    color: #333;
  }
  
  .author {
    font-weight: bold;
    font-size: 0.9rem;
    color: #555;
    display: block;
    text-align: center;
    margin-top: 15px; /* Para posicionar abaixo do triângulo */
  }
  
  
.sobre img {border-radius: 10px;}
.satisfacao img {max-width: 300px;}
.sobre p {font-size: 18px;}

#faq {color: #703416;}
#faq .accordion-body {color:#703416;}
.accordion-button:not(.collapsed) {background-color:#E2D7C6; color: #703416; border:0}
.accordion-button {color: #703416; font-weight: bold;}

.footer p {font-size:11px !important; color: #947160; text-align: center; line-height:1.2em; display: block;}

.slider-container {
    overflow: hidden;
    width: 100%;
    position: relative;
    cursor: grab;
    touch-action: pan-y;
  }

  .slider-track {
    display: flex;
    width: max-content;
    animation: scroll 20s linear infinite;
  }

  .slide {
    flex-shrink: 0;
    width: 300px;
    height: 250px;
    margin-right: 20px;
  }

  .slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
  }

  /* Pausar animação no hover */
  .slider-container:hover .slider-track {
    animation-play-state: paused;
  }

  @keyframes scroll {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-50%);
    }
  }


  @keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
  }
  
  .btn-compra {
    animation: pulse 2s infinite;
  }


  .botao-compra {
    position: relative;
    overflow: hidden;
  }
  
  .botao-compra::after {
    content: '';
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 100%);
    transform: skewX(-20deg);
    animation: shine 2s infinite;
  }
  
  @keyframes shine {
    0% { left: -75%; }
    100% { left: 125%; }
  }

@media (max-width: 768px){

    .mockup {width: 80%;}
    .topo .btn {margin: 0 auto; display: block; margin-bottom: 0; border:0; padding:15px}
    .selo {margin: 0 auto; display: block; margin-top: -10px !important;}
    .topo span {font-size: 1em;}
    .topo ul {font-size: .9em;}
    .problemas {display: block;}
    .problemas .col-12 {margin-bottom:15px}
    .section-two {margin-top:20px}
    .barra {font-size:12px}
    .section-two::after {background-size: auto 50%;}
    .culpa p {font-size:1em}
    .section-three p {font-size: 1em;}
    .sobre p {font-size:1em}
    h3 {font-size:1.2em}
    .notyf__toast {width:90% !important; margin:0 auto 10px; text-align: center;} 
}