#tictacflavorsection{
    height: 100svh;
    width: 100svw;
    background-size: cover;
    position: relative;
    overflow: hidden;
}
.titleproduct{
    position:absolute;top:8svh;height:8svh;left:50%;transform:translateX(-50%);z-index:110;opacity:1;object-fit: contain;
}
.card {
    position: absolute;
    width: 13svw;
height: 100%;
    min-height: 32svh;
    max-height: 34svh;
    background: #fff;
    border: 5px solid #026e46;
    border-radius: 30px;
    padding: 5px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translate(-50%, -50%) scale(1.1); /* Gabungkan translate dan scale */
    box-shadow: 0 0 20px 10px rgba(30, 27, 27, 0.7);
}

  .card h3 {
    margin: 10px 0;
    font-size: 14px;
    color: #004d00;
  
  }

  .imageflavor {
    width: 5svw;
    object-fit: contain;

  }
.buttonflavor {
    width: 7svw;
    object-fit: contain;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.buttonflavor:hover {
    transform: scale(1.1);
    box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0.5);
}
  .card p {
    font-size: 14px;
    margin-left: 3svh;
    margin-right: 3svh;
    
    height: 5svh;
    /* width: 9svw; */
    text-align: center;
  }

  .listen-btn {
    /* margin-top: 10px; */
    /* padding: 8px 16px; */
    background-color: #00cc66;
    color: #fff;
    border: none;
    border-radius: 20px;
    cursor: pointer;
  }

  .listen-btn:hover {
    background-color: #00994d;
  }
  .mint { top: 36%; left: 35%; transform: translate(-50%, -50%); }
.orange { top: 36%; left: 50%; transform: translate(-50%, -50%); }
.spearmint{ top: 36%; left: 65%; transform: translate(-50%, -50%); }
.strawberry { top: 75%; left: 43%; transform: translate(-50%, -50%); }
.citrus { top: 75%; left: 58%; transform: translate(-50%, -50%); }

 @media screen and (max-width: 40em) {
  /* Posisi masing-masing card untuk versi mobile */
  .mint       { top: 34%; left: 25%; transform: translate(-50%, -50%); }
  .orange     { top: 34%; left: 75%; transform: translate(-50%, -50%); }
  .spearmint  { top: 68%; left: 25%; transform: translate(-50%, -50%); }
  .strawberry { top: 68%; left: 75%; transform: translate(-50%, -50%); }
  .citrus     { top: 102%; left: 50%; transform: translate(-50%, -50%); }
  .titleproduct{position:absolute;top:8svh;height:5svh;left:50%;transform:translateX(-50%);z-index:110;opacity:1;object-fit: contain;}

  .card {
    position: absolute;
    width: 40svw;
    min-height: 27svh;
    max-height: 33svh;
    height: auto;
    background: #fff;
    border: 5px solid #026e46;
    border-radius: 30px;
    padding: 5px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  }

  .imageflavor {
    width: 15svw;
    object-fit: contain;


  }
  .buttonflavor {
    width: 20svw;
    object-fit: contain;
  }
  .card p {
    font-size: 14px;
    margin-left: 1svh;
    margin-right: 1svh;
    font-size: 12px;

    height: 5svh;
    /* width: 9svw; */
    text-align: center;
  }
  .tncflavor{
    position: relative;
    margin-top: 130svh;
 
    transform: translateX(-50%);
    left: 50%;
  }
  #tictacflavorsection{
    min-height: 100svh;
    height: 100svh;
    max-height: 130svh;
    overflow: scroll;
    width: 100svw;
    background-size: cover;
    position: relative;
}
}