ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #DA291C;
  }
  
  li a {
    display: block;
    display: inline;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }
  
  li a:hover {
    background-color: #111;
  }
  
      
  
      body {
        font-family: 'Open Sans';
        margin: 0;
      }
      
      /* Header/Logo Title */
      .header {
        font-family: 'Open Sans';
        padding: 20px;
        text-align: center;
        background: #DA291C;
        color: white;
        font-size: 1.4vw;
      }

      .menu {
        padding: 20px;
        text-align: center;
        background: #DA291C;
        color: white;
        font-size: 2.5vw;
        position: sticky;
        height: 50px;
        top: 77px;
        padding: 10px 16px;
  
        ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
  li {
    display: inline;
  }
      }
      #left{
       float:left;
      }
      #right{
       float:right;
      }
  
      .left {
        text-align: left;
        font-family:'Open Sans'; 
        color: white;
      }
      .right {
        text-align: right;
        font-family:'Open Sans'; 
        color: white;
      }
  
      .login {
        text-align: right;
        font-size:15px; 
        font-family:'Open Sans'; 
        vertical-align: middle; 
        text-decoration: none; 
        color: white;
      }
  
      /* Page Content */
      .content {padding:20px;}
  
      .mid-container {
        padding: 20px;
        text-align: center;
        background: black;
        color: white;
        font-size: 30px;
      }
  
      .red-container {
        text-align: center;
        background: #DA291C;
        color: white;
        font-size: 3vw;
      }
  
      .slide-container {
        padding: 20px;
        text-align: center;
        background: white;
        color: black;
        font-size: 30px;
      }
  
      .scroll-container {
    background-color: #333;
    overflow: auto;
    white-space: nowrap;
    padding: 10px;
  }
  
  .scroll-container img {
    padding: 10px;
  }
  
  .container{
    width: 900px;
    max-width: 90vw; 
    margin: auto;
    text-align: center;
    padding-top: 10px;
    transition: transform .5s;
    background: #DA291C;

  }
.yt-container {
  padding: 20px;
  text-align: center;
  background: white;
  color: black;
  font-size: 30px;
}

.footer {
  padding: 60px;
  text-align: center;
  background: #DA291C;
  color: white;
  font-size: 20px;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;  
}
header .icon-cart{
  position: relative;
}

header .icon-cart span{
    width: 30px;
    height: 30px;
    display: flex;
    font-family: 'Open Sans';
    font-size: 15px;
    background-color: black;
    justify-content: center;
    align-items: center;
    color: #fff;
    border-radius: 50%;
    position:absolute;
    top: 50%;
    right: -20px;  
}

.ListProduct .item img{
  width: 90%;
}


.ListProduct .item{
  background-color: #FFD700;
  padding: 20px;
  border-radius: 20px;
}

.ListProduct .item h2{
  font-weight: 500;
  font-size: large;
}

.ListProduct .item .price{
  letter-spacing: 7px;
  font-size: medium;
  color: black;
}

.ListProduct .item button{
  background-color: black;
  color: white;
  padding: 5px 10px;
  border-radius: 20px;
  margin-top: 10px;
  border: none;
  cursor: pointer;
}

.CartTab{
  width: 400px;
  background-color: grey;
  color: white;
  position: fixed;
  inset: 0 0 0 auto;
  display: grid;
  grid-template-rows: 70px 1fr 70px 70px;
  transition: .5s;
}

body.ShowCart .CartTab{
  inset: 0 -400px 0 auto;
  /* initial -400px */
}

body.ShowCart .container{
  transform: translateX(0px);
  /* initial -200px */
}

body.ShowCart .container .icon-cart{
  transform: translateX(-200px);
  /* initial 0px */
  inset: 0 0px 0 auto;
}

body.ShowCart .container .icon-login{
  transform: translateX(250px);
  /* -650px */
  inset: 0 0px 0 auto;
}

.CartTab h1{
  padding: 20px;
  margin: 0;
  font-size: 25px;
}

.CartTab .CartTotal{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.CartTab .btn{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.CartTab .btn button{
  background-color: #FFD700;
  border: none;
  font-family: 'Open Sans';
  font-weight: 500;
  cursor: pointer;
}

.CartTab .btn .Close{
  background-color: white;
}

.CartTab .ListCart .item img{
  width: 100%;
}

.CartTab .ListCart .item{
  display: grid;
  grid-template-columns: 70px 150px 50px 1fr;
  gap: 5px;
  text-align: center;
  align-items: center;
  font-size: 18px;
}

.ListCart .Quantity span{
  display: inline-block;
  width: 25px;
  height: 25px;
  background-color: white;
  color: black;
  border-radius: 50%;
  cursor: pointer;
}

.ListCart .Quantity span:nth-child(2){
  background-color: transparent;
  color: black;
}

.ListCart .item:nth-child(even){
  background-color: #eee1;
}

.ListCart{
  overflow: auto;
}

.ListCart::-webkit-scrollbar{
  width: 0;
}

/*@media screen and (max-width: 992px) {
  .ListProduct{
    grid-template-columns: repeat(3, 1fr);
  } 
}

@media screen and (max-width: 769px) {
  .ListProduct{
    grid-template-columns: repeat(2, 48%);
  } 
}

@media screen and (max-width: 500px) {
  .ListProduct{
    grid-template-columns: repeat(1, 1fr);
  } 
} */