body {
  height: 100vh;
  width:100%;
  margin: 0;
  font-size: 20px;
}


@media (max-width: 400px) {
  body {
    font-size: 5px;
  }
}

@media (max-width: 768px) {
  body {
    font-size: 12px;
  }
}

img {
  max-width: 100%;
  max-height: 100%;
}

/* Small screen (e.g., mobile devices) */
@media (max-width: 400px) {
  img {
    max-width: 100%;
    height: auto; /* maintain aspect ratio */
  }
}

/* Medium screen (e.g., tablets) */
@media (max-width: 768px) and (min-width: 401px) {
  img {
    max-width: 100%;
    height: auto; /* maintain aspect ratio */
  }
}
  
  .banner-frame{
    position: relative;
    left: -1%;
    /*background-color: rgba(9, 39, 17, 0.945);*/
    background-color: #ddd;
    padding: 20px;
    border: 1px solid #ddd;
    display: flex;
    gap:3%;
  }

  .banner {
    width: 95%;
    height: 100%;
    background-color: #fff;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 10px;
  }

  .show {
    display: block;
  }

    .banner-slider {
      position: relative;
      width: 100%;
      height: 1020px; /* adjust the height as needed */
      overflow: hidden;
    }

/* Tablet */
@media (max-width: 768px) {
  .banner-slider {
    height: 450px;
  }
}

/* Mobile */
@media (max-width: 480px) {
  .banner-frame {
    left: -3%;
  }
   .banner-slider {
    height: 250px;
  }
}

    .slide {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: none;
    }
    
    .active-slide {
      display: block;
    }

    .shoplabels {
      display: block;
      color:#646362
    }

    .banner-prev, .banner-next {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      font-size: 24px;
      cursor: pointer;
      background-color: transparent;
      border: none;
      color: #fff;
      opacity: 0.2;
      transition: opacity 0.3s ease-in-out;
      z-index: 1; /* Add this line */
    }    
    
    .banner-prev:hover, .banner-next:hover {
      opacity: 1;
    }
    
    .banner-prev {
      left: 0;
    }
    
    .banner-next {
      right: 0;
    }
    
    
    #muted-button {
      position: absolute;
      bottom: 1px;
      right: 5px;
      border: 1px solid #494aa5;
      padding: 5px 7px;
      font-size: 16px;
      cursor: pointer;

      transform: translateY(-50%);
      background-color: transparent;
      opacity: 0.5;
      transition: opacity 0.3s ease-in-out;
      z-index: 1; /* Add this line */
    }

    #muted-button:hover{
      opacity: 1;
    }