/* /////// Navigation Start */

 .tabletnav {
    display: none;
  }

nav {
  display: flex;
  flex-direction: row;
  align-items: center; 
  justify-content: space-between;
  max-width: 100%;
  background-color: #16181c;
  height: 75px;
  padding: 0 25px 0 25px;
  font-family: Roboto;
}

.navlist {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row; 
  align-items: center; 
}

.navlist a:link {
  text-decoration: none;
  font-size: 18px;
  color: #f9f4f0;
  padding: 0;
  margin: 0; 
}

.navlist a:visited {
  text-decoration: none;
  color: #f9f4f0;
}

.navlist a:active {
  text-decoration: none;
  color: #f9f4f0;
}

.navlist a:hover {
  text-decoration: none;
  color: #f9f4f0;
}

.navlist a.navlogo {
  font-size: 30px;
}

.navlist li {
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 0 0 25px;
}

.navlist li.navlogo {
  font-family: Great Vibes;
  margin: 0;
}

.navright {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.cart-image {
  background-image: url("../assets/cart.webp");
  background-size: contain; 
    background-repeat: no-repeat; 
    height: 20px;
    width: 20px; 
    margin: 0 0 0 15px;
}

.cart-image:hover {
opacity: .8;
}


.cart-image2 {
  background-size: contain; 
    background-repeat: no-repeat; 
    height: 20px;
    width: 20px; 
    margin: 0 0 0 0;
}

.cart-image2:hover {
  opacity: .8;
}

#dark-mode-toggle {
  display: block;
  width: 20px;
  height: 20px;
  border: none;
  background: transparent;
  overflow: hidden;
  padding: 0;
  cursor: pointer;
}
#dark-mode-toggle img {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
}

body.dark-mode #dark-mode-toggle .sun {
  transform: translate(-50%, -50%);
  opacity: 1;
}
body.dark-mode #dark-mode-toggle .moon {
  transform: translate(-50%, -150%);
  opacity: 0;
}

#dark-mode-toggle .moon {
  z-index: 2;
  transition: transform .3s, opacity .3s, fill .3s;
  fill: #000;
}
#dark-mode-toggle .sun {
  z-index: 1;
  transform: translate(-50%, 100%);
  opacity: 0;
  transition: transform .3s, opacity .3s;
}

/* //////////////////////////// Navigation End */

/* tablet both */
@media (min-width: 601px) and (max-width: 1200px)   {

     /* navigation tablet both start */

  .navlist {
    display: none;
  }

  .navright {
    display: none;
  }

  .tabletnav {
    display: block;
  }

  .navlogo {
    font-family: Great Vibes;
    font-size: 30px;
  }

  .navlogo a:link {
    color: #f9f4f0;
    text-decoration: none;
  }

    .navlogo a:visited {
    color: #f9f4f0;
    text-decoration: none;
  }

    .navlogo a:active {
    color: #f9f4f0;
    text-decoration: none;
  }

  .overflow-y-hidden-height {
    overflow-y: hidden;
    height: 100%;
}

#nav-tap:hover {
  cursor: pointer; 
}

  .nav-lines-container {
    height: 25px;
  }

  .nav-lines-size {
    border-bottom: 5px solid #f9f4f0;
  }

  .nav-lines-hover {
    border-bottom: 5px solid #AFC798;
}

  #nav-1 {
    transition: all .5s ease;
    position: relative; 
    width: 40px;
  }

.nav-1-opennav {
  transform: rotate(50deg) translate(14px, 11px);
  position: relative;
}

#nav-2 {
  transition: all .5s ease;
  position: relative;
  top: 15px; 
  width: 40px;
}

.nav-2-opennav {
transform: rotate(130deg) translateY(3px);
position: relative;
}

#exit:hover {
  cursor: pointer; 
}

.z6 {
  z-index: 6; 
}

.z-6 {
  z-index: -6; 
}

#navigation-links {
  background-color: #41321D;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-content: center;
  position: fixed; 
  top: 0; 
  right: 0; 
  height: 100vh;
}

.navigation-links-closed {
  transition: transform .5s ease, z-index .3s, opacity 1s, width 1s;
  width: 1vh;
  transform: translateX(100vw); 
z-index: -4; 
opacity: 0; 
}

.navigation-links-open {
transition: transform .5s ease, z-index .3s;
width: 100%;
height: 100vh;
transform: translateX(0vw); 
z-index: 4; 
opacity: 1; 
}

.cart-image3 {
  background-image: url("../assets/cart.webp");
  background-size: contain; 
    background-repeat: no-repeat; 
    height: 20px;
    width: 20px; 
    margin: 15px 0 0 0;
}

  /* navigation tablet both end */

}

/* tablet big */
@media (min-width: 801px) and (max-width: 1200px)   {

     /* navigation tablet large start */
  nav {
    height: 125px;
    padding: 0 25px 0 25px;
    font-family: Roboto;
  }

  #nav-tap {
    height: 125px;
    width: 70px;
    position: absolute;
    top: 0;   
    right: 0;
  }
  
    .nav {
      height: 125px;
      width: 70px;
      position: absolute;
      top: 0;   
      right: 0;
      display: flex;
      justify-content: center;
      align-items: center; 
      flex-direction: column;
      z-index: 5;
    }
  
  #exit {
    height: 125px;
    width: 70px;
    position: fixed;
    top: 0;   
    right: 0;
  }

  .logo-img {
    height: 125px;
    width: 125px;
    left:0;
    right:0;
    top: -125px;
    margin-left:auto;
    margin-right:auto;
  }

  #navigation-links a:link {
  text-decoration: none;
  font-size: 32px;
  color: #f9f4f0;
  padding: 0;
  margin: 0; 
  line-height: 2.2;
}

#navigation-links a:visited {
  text-decoration: none;
  color: #f9f4f0;
}

#navigation-links a:active {
  text-decoration: none;
  color: #f9f4f0;
}

#navigation-links a:hover {
  text-decoration: none;
  color: #f9f4f0;
}
  
  /* navigation tablet large end */

}

/* tablet small */
@media (min-width: 601px) and (max-width: 800px)   {

        /* navigation tablet small start */

  nav {
    height: 175px;
    padding: 0 25px 0 25px;
    font-family: Roboto;
  }

  .navlogo {
    display: none;
  }

  #nav-tap {
    height: 175px;
    width: 70px;
    position: absolute;
    top: 0;   
    right: 0;
  }
  
    .nav {
      height: 175px;
      width: 70px;
      position: absolute;
      top: 0;   
      right: 0;
      display: flex;
      justify-content: center;
      align-items: center; 
      flex-direction: column;
      z-index: 5;
    }
  
  #exit {
    height: 175px;
    width: 70px;
    position: fixed;
    top: 0;   
    right: 0;
  }

  .logo-img {
    height: 175px;
    width: 175px;
    left:0;
    right:0;
    top: -175px;
    margin-left:auto;
    margin-right:auto;
  }

  #navigation-links a:link {
  text-decoration: none;
  font-size: 32px;
  color: #f9f4f0;
  padding: 0;
  margin: 0; 
  line-height: 2.2;
}

#navigation-links a:visited {
  text-decoration: none;
  color: #f9f4f0;
}

#navigation-links a:active {
  text-decoration: none;
  color: #f9f4f0;
}

#navigation-links a:hover {
  text-decoration: none;
  color: #f9f4f0;
}

  .cart-image2 {
    width: 100%;
  }
  

  /* navigation tablet small end */

}

/* mobile */
@media (min-width: 320px) and (max-width: 600px)   {

         /* navigation mobile start */

  .navlist {
    display: none;
  }

  .navright {
    display: none;
  }

  .tabletnav {
    display: block;
  }

  .navlogo {
    font-family: Great Vibes;
    font-size: 30px;
  }

  .navlogo a:link {
    color: #f9f4f0;
    text-decoration: none;
  }

  .overflow-y-hidden-height {
    overflow-y: hidden;
    height: 100%;
}

#nav-tap:hover {
  cursor: pointer; 
}

  .nav-lines-container {
    height: 25px;
  }

  .nav-lines-size {
    border-bottom: 5px solid #f9f4f0;
  }

  .nav-lines-hover {
    border-bottom: 5px solid #AFC798;
}

  #nav-1 {
    transition: all .5s ease;
    position: relative; 
    width: 40px;
  }

.nav-1-opennav {
  transform: rotate(50deg) translate(14px, 11px);
  position: relative;
}

#nav-2 {
  transition: all .5s ease;
  position: relative;
  top: 15px; 
  width: 40px;
}

.nav-2-opennav {
transform: rotate(130deg) translateY(3px);
position: relative;
}

#exit:hover {
  cursor: pointer; 
}

.z6 {
  z-index: 6; 
}

.z-6 {
  z-index: -6; 
}

#navigation-links {
  background-color: #41321D;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-content: center;
  position: fixed; 
  top: 0; 
  right: 0; 
  height: 100vh;
}

.navigation-links-closed {
  transition: transform .5s ease, z-index .3s, opacity 1s, width 1s;
  width: 1vh;
  transform: translateX(100vw); 
z-index: -4; 
opacity: 0; 
}

.navigation-links-open {
transition: transform .5s ease, z-index .3s;
width: 100%;
height: 100vh;
transform: translateX(0vw); 
z-index: 4; 
opacity: 1; 
}

  #navigation-links a:link {
  text-decoration: none;
  font-size: 32px;
  color: #f9f4f0;
  padding: 0;
  margin: 0; 
  line-height: 2.2;
}

#navigation-links a:visited {
  text-decoration: none;
  color: #f9f4f0;
}

#navigation-links a:active {
  text-decoration: none;
  color: #f9f4f0;
}

#navigation-links a:hover {
  text-decoration: none;
  color: #f9f4f0;
}
  

nav {
  height: 125px;
  padding: 0 25px 0 25px;
  font-family: Roboto;
}

.navlogo {
  display: none;
}

#nav-tap {
  height: 125px;
  width: 70px;
  position: absolute;
  top: 0;   
  right: 0;
}

  .nav {
    height: 125px;
    width: 70px;
    position: absolute;
    top: 0;   
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center; 
    flex-direction: column;
    z-index: 5;
  }

#exit {
  height: 125px;
  width: 70px;
  position: fixed;
  top: 0;   
  right: 0;
}

.logo-img {
  height: 125px;
  width: 125px;
  left:0;
  right:0;
  top: -125px;
  margin-left:auto;
  margin-right:auto;
}

  .cart-image2 {
    width: 100%;
  }

  .cart-image3 {
  background-image: url("../assets/cart.webp");
  background-size: contain; 
    background-repeat: no-repeat; 
    height: 20px;
    width: 20px; 
    margin: 15px 0 0 0;
}

  /* navigation mobile end */

}