.conteiner-tab {
    background-color:#FFF; 
    border:1px solid rgb(215, 215, 215); 
    border-radius: 1.6rem;
    justify-content: flex-start;
    align-items: center;
    font-family: 'Cabin', sans-serif;
    width:280px; 
    height:516px;
}

.conteiner-tab-ativo {
    /* background: linear-gradient( 135deg, rgb(250, 190, 207) 0%, rgb(255 81 108) 100% ); */
    background-image: linear-gradient(135deg, #8215c7, #d4199d);
    color: #fff;
    /* border:1px solid rgb(255 80 107);  */
    border-radius: 1.6rem;
    font-family: 'Cabin', sans-serif;
    width:280px; 
    height:516px;   
    z-index: 1;

}
.infor-titulo{
    text-align:center; 
    font-size: 20px;
    padding: 1.4rem 0;
    background-color: #f8f7f7;
    border-top-left-radius: 1.6rem;
    border-top-right-radius: 1.6rem;
}
.infor-titulo-ativo{
    text-align:center; 
    font-size: 20px;
    padding: 1.4rem 0;
    color: #ffffff;
    border-bottom: 1px solid hsla(100, 8%, 85%, 0.582);

}
.infor-tab {
    text-align:center; 
    font-size: 14px;
    padding: 0.5rem 0;
    width:180px;
    margin-left:3rem;
    border-bottom: 1px solid hsla(240, 8%, 85%, 0.582);
}
.infor-tab-whatsapp {
    text-align:center; 
    color: #0e5825;
    font-size: 14px;
    border-bottom: 1px solid hsla(0, 0%, 100%, 0.582);
    padding: 1rem 0;
    width:180px;
    margin-bottom:1rem;
    margin-left:3rem;

}
.whatsapp {
    text-align:center; 
    color: #000000;
    font-size: 14px;
    /* font-weight: bold; */
    box-shadow: 4px 4px 10px rgba(2, 2, 2, 0.649);
    padding: 0.2rem 0;
    padding-right:0.2rem 0;
    padding-left:0.2rem 0;
    margin-left:-0.3rem;
    width: 190px;
    border-radius: 0.6rem;
    background-color: #25d36500;
}

.whatsapp i {
    color: #000000;
    font-size: 14px;
    /* font-weight: bold; */
}

.whatsapp-ativo {
    text-align:center; 
    color: #ffffff;
    font-size: 14px;
    /* font-weight: bold; */
    box-shadow: 4px 4px 10px rgba(255, 255, 255, 0.649);
    padding: 0.2rem 0;
    padding-right:0.2rem 0;
    padding-left:0.2rem 0;
    margin-left:-0.3rem;
    width: 190px;
    border-radius: 0.6rem;
    background-color: #25d36500;
}

.whatsapp-ativo i {
    color: #ffffff;
    font-size: 14px;
    /* font-weight: bold; */
}

.infor-preço{
    text-align:center; 
    font-size: 2.7rem;
    font-family: Arial, Helvetica, sans-serif;
    width:180px;
    margin-left:3rem;
    padding: 1rem 0;
    border-bottom: 1px solid hsla(240, 8%, 85%, 0.582);
}
.botao-tab{
    margin-left:1.9rem;
}

/* CSS para o botão btn */
.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(249, 180, 201) 0%, rgb(255 81 108) 100% ); */
    background-image: linear-gradient(135deg, #8215c7, #d4199d);
    color: #fff;
    outline: none;
    border: 0;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s;
  }
  
  /* Efeito de balanço (tremendo) no hover */
  .btn:hover {
    animation: shake 0.5s;
    background-color: #233ac5;
  }
  
  @keyframes shake {
    0% { transform: translateX(0); }
    10% { transform: translateX(-5px); }
    20% { transform: translateX(5px); }
    30% { transform: translateX(-5px); }
    40% { transform: translateX(5px); }
    50% { transform: translateX(-5px); }
    60% { transform: translateX(5px); }
    70% { transform: translateX(-5px); }
    80% { transform: translateX(5px); }
    90% { transform: translateX(-5px); }
    100% { transform: translateX(0); }
  }
  
  /* Redefina a animação quando o mouse sai */
  .btn:hover:active,
  .btn:focus {
    animation: none;
    transform: translateX(0);
  }

/* CSS para o botão */
.btn-ativo {
    margin-top: 1rem;
    height: 2.6rem;
    width: 13.3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    background: #FFFFFF;
    color: #000000;
    outline: none;
    border: 0;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s;
  }
  
  /* Efeito de balanço (tremendo) no hover */
  .btn-ativo:hover {
    animation: shake 0.5s;
    background-image: linear-gradient(135deg, #8215c7, #d4199d);
    border: 1px solid #FFFFFF;
    color:#FFFFFF;
  }
  
  @keyframes shake {
    0% { transform: translateX(0); }
    10% { transform: translateX(-5px); }
    20% { transform: translateX(5px); }
    30% { transform: translateX(-5px); }
    40% { transform: translateX(5px); }
    50% { transform: translateX(-5px); }
    60% { transform: translateX(5px); }
    70% { transform: translateX(-5px); }
    80% { transform: translateX(5px); }
    90% { transform: translateX(-5px); }
    100% { transform: translateX(0); }
  }
  
  /* Redefina a animação quando o mouse sai */
  .btn-ativo:hover:active,
  .btn-ativo:focus {
    animation: none;
    transform: translateX(0);
  }


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

  /* Botão do WhatsApp */

  .float{
	position:fixed;
	width:60px;
	height:60px;
	bottom:40px;
	right:40px;
	/* background-color:rgb(255 81 108); */
    background-image: linear-gradient(135deg, #8215c7, #d4199d);
	color:#FFF;
	border-radius:50px;
	text-align:center;
  font-size:30px;
	box-shadow: 2px 2px 3px #999;
  z-index:100;
}

.my-float{
	margin-top:16px;
}
  
  
/* //////////////////////////////////////////////////////////////////////////////////////////// */
/* 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;
    }
  }

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



.sub {
    /* background: linear-gradient( 135deg, rgb(110 85 92) 0%, rgb(255 81 108) 100% ); */
    background-image: linear-gradient(135deg, #8215c7, #d4199d);
    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% ); */
    background-image: linear-gradient(135deg, #8215c7, #d4199d);
    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;
}


.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;
      }