/* CSS - TABELA DE PREÇOS */

.container .box {
    width: 100%;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden; /* Oculta a barra de rolagem vertical */
    display: flex;
    flex-wrap: nowrap;
  }

  .container .box .box-row {
    display: flex;
  }

  .container .box .box-cell {
    flex: 0 0 25%;
    padding: 35px;
  }

  /* Estilos para dispositivos móveis usando media queries */
  @media screen and (max-width: 768px) {
    .container .box {
      overflow-x: auto;
      flex-wrap: nowrap;
    }

    .container .box .box-cell {
      flex: 0 0 25%; /* Ou ajuste para o tamanho desejado */
      white-space: normal;
    }
  }

  /* //////////////////////////////////// */

  /* CSS - BOTÃO TESTE GRATIS */

  .toggle {
    margin-top: 2rem;
    color: hsl(234, 14%, 74%);
    display: flex;
    align-items: center;
    }
    .toggle-btn {
    margin: 0 1rem;
    }
    .checkbox {
    display: none;
}

.sub {
    background: linear-gradient( 135deg, rgb(110 85 92) 0%, rgb(255 81 108) 100% );
    display: flex;
    justify-content: flex-start;
    align-items: center;
    /* height: 25px;
    width: 50px; */
    height: 1.6rem;
    width: 3.3rem;
    border-radius: 1.6rem;
    padding: 0.3rem;
}
.circle {
    background-color: #fff;
    height: 1.4rem;
    width: 1.4rem;
    border-radius: 50%;
}
.checkbox:checked + .sub {
    justify-content: flex-end;
}

.cards {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.card {
    background: #fff;
    color: hsl(233, 13%, 49%);
    border-radius: 0.8rem;
}

.cards .card.active {
    background: linear-gradient( 135deg, rgb(250, 190, 207) 0%, rgb(255 81 108) 100% );
    color: #fff;
    display: flex;
    align-items: center;
    transform: scale(1.1);
    z-index: 1;
}
ul.uul {
    margin: 2.6rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}
ul li.lii {
    list-style-type: none;
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 1rem 0;
}
ul li.price {
    font-size: 3rem;
    color: hsl(232, 13%, 33%);
    padding-bottom: 2rem;
}
.shadow {
    box-shadow: -5px 5px 15px 1px rgba(0, 0, 0, 0.1);
}

.card.active .price {
    color: #fff;
}

.btn {
    margin-top: 1rem;
    height: 2.6rem;
    width: 13.3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    background: linear-gradient( 135deg, rgb(110 85 92) 0%, rgb(255 81 108) 100% );
    color: #fff;
    outline: none;
    border: 0;
    font-weight: bold;
}
.active-btn {
    background: #fff;
    color: hsl(237, 63%, 64%);
}
.bottom-bar {
    border-bottom: 2px solid hsla(240, 8%, 85%, 0.582);
}
.card.active .bottom-bar {
    border-bottom: 2px solid hsla(240, 8%, 85%, 0.253);
}
.pack {
    font-size: 1.1rem;
}

@media (max-width: 280px) {
ul.uul {
    margin: 1rem;
}
h1 {
    font-size: 1.2rem;
}
.toggle {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    height: 80px;
}
.cards {
    margin: 0;
    display: flex;
    flex-direction: column;
}

.card {
    transform: scale(0.8);
    margin-bottom: 1rem;
}
.cards .card.active {
    transform: scale(0.8);
}
}

@media (min-width: 280px) and (max-width: 320px) {
ul.uul {
    margin: 20px;
}
.cards {
    display: flex;
    flex-direction: column;
}
.card {
    margin-bottom: 1rem;
}
.cards .card.active {
    transform: scale(1);
}
}

@media (min-width: 320px) and (max-width: 414px) {
.cards {
    display: flex;
    flex-direction: column;
}
.card {
    margin-bottom: 1rem;
}
.cards .card.active {
    transform: scale(1);
}
}
@media (min-width: 414px) and (max-width: 768px) {
.card {
    margin-bottom: 1rem;
    margin-right: 1rem;
}
.cards .card.active {
    transform: scale(1);
}
}
@media (min-width: 768px) and (max-width: 1046px) {
.cards {
    display: flex;
}
.card {
    margin-bottom: 1rem;
    margin-right: 1rem;
}
.cards .card.active {
    transform: scale(1);
}
}

/* /////////////////////////////////////////////// */

    /* Estilo da barra de cookies */
    #cookie-bar {
        position: fixed;
        bottom: 20px; /* Distância da barra em relação ao rodapé */
        left: 20px; /* Distância da barra em relação à esquerda */
        width: 300px; /* Largura da barra */
        padding: 10px;
        background-color: rgba(255, 80, 107, 0.10); /* Cor de fundo com transparência */
        color: #000;
        text-align: center;
        z-index: 9999; /* Garante que a barra fique acima de outros elementos */
        display: none;
      }
  
      /* Estilo dos botões */
      #cookie-bar button {
        margin: 5px;
        padding: 10px 20px;
        cursor: pointer;
      }
  
      #accept-button {
        background-color: rgb(255 80 107);
        color: white;
        border: none;
      }
  
      #close-button {
        background-color: #FFFFFF;
        color: rgb(255 80 107);
        border: none;
      }
  
      /* Estilo do efeito flutuante */
      .cookie-modal {
        animation: floatIn 1s forwards; /* Efeito de entrada da barra flutuante */
      }
  
      @keyframes floatIn {
        from {
          transform: translateY(100%);
        }
        to {
          transform: translateY(0);
        }
      }
  
      .banner-container {
          position: relative;
      }
  
      .banner {
          width: 100%;
          overflow: hidden;
          position: relative;
      }
  
      .slide {
          display: none;
          width: 100%;
      }
  
      .slide img {
          width: 100%;
          height: auto;
      }
  
      .dots {
          text-align: center;
          margin-top: 10px;
      }
  
      .dot {
          display: inline-block;
          width: 10px;
          height: 10px;
          border-radius: 50%;
          background-color: gray;
          margin: 0 5px;
          cursor: pointer;
      }
  
      .dot.active {
          background-color: black;
      }
  
      /* Adicione esta regra para esconder os dots */
      .dots {
          display: none;
      }
  
      /* Adicione um estilo para os slides que estão "saindo" */
      .slide.fade-out {
          opacity: 0;
          transition: opacity 0.5s ease-in-out;
      }
  
      /* Adicione um estilo para os slides que estão "entrando" */
      .slide.fade-in {
          display: block;
          opacity: 1;
          transition: opacity 0.5s ease-in-out;
      }

      #carousel3d .carousel-3d-slide {
        display: flex;
        flex: 1;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        background-color: #fff;
        padding: 10px;
        transition: all 0.4s;
      }
      #carousel3d .carousel-3d-slide.current {
        background-color: #333;
        color: #fff;
      }
      #carousel3d .carousel-3d-slide.current span {
        font-size: 20px;
        font-weight: 500;
      }