body {
    font-family: Arial, sans-serif;
    margin: 0;
    background-color: rgba(148, 141, 247, 0.274);
  }
.cover{
    width: 96%;
    height: 450px;
    margin: 2%;
    margin-bottom: 0%;
    img{
      width: 100%;
      height: 450px;
      border-top-left-radius: 3%;
      border-top-right-radius: 3%;
    }
    .backdrop{
      position: absolute;
      margin-top: 15%;
      background-color: #02224679;
      width: 86%;
      height: 170px;
      animation-name: slideRight;
      animation-duration: 3s;

    }
    .about1{
      width: 90%;
      color: #c8d603;
      text-align: center;
      font-family: cursive;
      animation-name: slideLeft;
      animation-duration: 4s;
      p{
        line-height: 25px;
        letter-spacing: 2px;
        padding-left: 3%;
        padding-right: 3%;
        font-size: small;
      }
    }
  }

@keyframes slideLeft{
  from{transform: translatex(300%)}
}
@keyframes slideRight{
  from{transform: translatex(-300%)}
}
@media screen and (max-width: 600px){
  .cover{
    height: 400px;
    img{
      height: 400px;
    }
    .backdrop{
      width: 80%;
      height: 120px;
      margin-top: 50%;
    }
    .about1{
      width: 100%;
      p{
        font-family: Arial, Helvetica, sans-serif;
        font-size: 50%;
        word-spacing: 2px;
        line-height: 10px;
      }
  
    }
  }
}
/* ----------------------------ProductDiscription----------------------------------------- */
.productInfo{
    background-color: rgba(207, 206, 204, 0.616);
    width: 96%;
    margin-left: 2%;
    padding: 2%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    .productDisplayPic{
      width: 95%;
      height: 400px;
      background-color: rgba(228, 227, 225, 0.473);
      .productDisplay{
          img{
              width: 100%;
              height: 400px;
              border-radius: 5%;
          }
      }
    }
    .productDetails{
      display: grid;
      border-radius: 5%;
      width: 95%;
      height: 400px;
      color: rgba(3, 51, 95, 0.801);
      background-color: rgba(255, 255, 255, 0.678);
      text-align: center;
      padding: 2%;
      .productDiscription{
          h2{
              font-size: large;
          }
          p{
              font-size: 70%;
              font-family: cursive;
          }
          img{
              height: 100px;
          }
      }
    }
    .productSelectButton{
        display: flex;
        gap: 5%;
        .productSelect{
            button{
                border: none;
                transition: border 0.10s ease;
                background-color: rgba(0, 255, 255, 0);
                img{
                  width: 100%;
                  border-radius: 50%;
                  box-shadow: 2px 2px 5px 2px rgba(46, 45, 45, 0.37);
                }
            }
            button:focus{
              img{
                border: solid rgba(61, 61, 61, 0.541) 3px;
              }
            }
        }
    }
}
.productDisplay, .productDiscription {
    display: none;
}

#dragonBraceletDisplay, #dragonBraceletDetails {
    display: block;
}

@media screen and (max-width: 600px){
  .about{
    h1{
      font-size: x-small;
    }
    p{
      font-size: 50%;
    }
  }
  .productInfo{
      padding-left: 5%;
      grid-template-columns: repeat(1, 1fr);
      height: auto;
      .productDisplayPic{
        height: 200px;
      .productDisplay{
          img{
              height: 200px;
          }
        }
      }
      .productSelectButton{
       gap: 1%;
        }
    }
  }
/*--------------------------- Zodiac braclete----------------------- */
  .ZodiacproductContainer {
    background-color: rgba(207, 206, 204, 0.616);
    width: 96%;
    margin-left: 2%;
    display: grid;
    padding: 1%;
    }
  .ZodiacsliderWrapper {
    overflow: scroll hidden;
    scrollbar-width: thin;
    width: 40%;
    margin-top: 2%;
    margin-left: 30%;
    .ZodiacproductPictures {
      display: flex;
      img {
        border-radius: 50%;
        border: solid 1px rgba(128, 128, 128, 0.445);
        margin-bottom: 5%;
        width: 80%;
        height: 100px;
        cursor: pointer;
        }
      }
    }
    .ZodiacproductView{
      width: 30%;
      margin-top: 2%;
      margin-left: 35%;
      background-color: #ffffff;
      text-align: center;
      img{
          width: 100%;
          height: 400px;
          filter: drop-shadow(0 20px 20px #0009);
      }
    }
    .ZodiacproductDiscription{
      margin-left: 10%;
      width: 80%;
      color: #34485a;
      overflow: hidden auto;
      scrollbar-width:none;
      .Zodiacbuttons{
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        text-align: center;
        gap: 2%;
      }
      a{
        width: 80%;
        color: black;
        text-decoration: none;
        text-align: center;
        display: grid;
        font-size: smaller;
        padding: 2%;
      }
      button{
          border-radius: 50%;
          border: solid 1px rgba(253, 253, 253, 0.836);
          background-color: rgba(128, 128, 128, 0.596);
          cursor: pointer;
          img{
            width: 100%;
            height: 80px;
          }
      }
      button:focus{
          border-color: rgba(0, 0, 0, 0.781);
          background-color: aliceblue;
      }
    }
    
@media screen and (max-width: 600px){
  .ZodiacproductContainer {
    width: 96%;
  }
  .ZodiacsliderWrapper {
    width: 90%;
    margin-left: 5%;
    margin-top: 5%;
    .ZodiacproductPictures {
      img {
        width: 100%;
        height: 60px;
        }
      }
    }
  .ZodiacproductView{
    width: 50%;
    margin-left: 25%;
    img{
        height: 200px;
    }
  }
  .ZodiacproductDiscription{
    .Zodiacbuttons{
      grid-template-columns: repeat(4, 1fr);
    }
    a{
      font-size: 30%;
      img{
        height: 30px;
      }
    }
  }
}
/* -----------------------Product-menu------------------------ */
.listProduct{
  width: 96%;
  margin-left: 2%;
  padding-top: 2%;
  .category-section{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    overflow-x: auto; 
    overflow-y: hidden; 
    white-space: nowrap; 
    -webkit-overflow-scrolling: touch;
    h2{
      grid-row: 1; /* Place h2 in the first row */
      background-color: whitesmoke;
      color: #353432;
      width: 100%;
      height: 50px;
      position:absolute;
      font-size: large;
      letter-spacing: 5px;
      text-align: center;
      padding-top: 10px;
      border-top: solid 1px rgba(0, 0, 0, 0.219);
      border-bottom: solid 1px rgba(0, 0, 0, 0.219);
    }
    .item {
      display: flex; /* Use flex for each item */
      flex-direction: column; /* Arrange content in a column */
      align-items: center; /* Center items horizontally */
      margin: 1px; /* Space between items */ 
      .productView {
        display: flex; /* Flexbox for the product view */
        flex-direction: column; /* Stack image and text vertically */
        align-items: center; /* Center product contents */
        margin-top: 20%;
        width: 80%;
        height: 350px;
        border-radius: 3%;
        box-shadow: 2px 2px 5px 2px rgba(46, 45, 45, 0.5);
        background-color: white;
        cursor: pointer;
        .product{
          img{
            width: 200px;
            height: 200px;
          }
          h4{
            font-size: small;
          }
          select{
            width: 80%;
          }
          p{
            font-size: smaller;
          }
  
        }
        .product:hover{
          background-color: white;
          img{
            filter: drop-shadow(0 50px 20px #0009);
          }
        } 
      }
      .addCart {
        margin-top: -15%;
        margin-bottom: 10%;
        padding: 5px 10px;
        cursor: pointer;
        text-align: center;
        text-decoration: none;
        outline: none;
        color: #000000;
        background-color: #ffffff;
        border: solid 1px;
        border-radius: 15px;
      }
      .addCart:hover {
        box-shadow: 0 3px #474747;
        color: black;
      }
      .addCart:active {
        background-color: black;
        border: solid black 1px;
        color: white;
        transform: translateY(3px);
      }
    }
  }
}
#h5Category{
  text-align: center;
}

@media screen and (max-width: 991px){
  .listProduct{
    .category-section{
      grid-template-columns: repeat(3, 1fr);
    }
  }
}
@media screen and (max-width: 600px){
  #h5Category{
    font-size: smaller;
    margin-top: 5%;
  }
  .listProduct{
    .category-section{
      grid-template-columns: repeat(2, 1fr);
      .item{
        .productView {
          width: 170px;
          height: 280px;
          .product {
            img{
              width: 120px;
              height: 150px;
            }
            p{
              margin: 1%;
            }
            h4{
              font-size: 80%;
            }
          }
        }
        .addCart{
          margin-top: -25%;
        }
      }
    }
  }
}
   
/* ----------------------------INFO--------------------------- */
.social-links::before{
    position: absolute;
    inset: 0;
    background-image: url("/Photos/Crystals/footer.jpg");
    background-position: center;
    background-size: cover;
    opacity: 0.5;
    content: "";
    z-index: -1;
  }
  .social-links{
    position: relative;
    color: whitesmoke;
    background-color: rgb(0, 0, 0);
    z-index: 1;
      a{
        color: whitesmoke;
      }
    .contact-links{
        :hover {
          color:rgb(177, 106, 0);
        }
    }
    .quick-links{
        :hover {
          color: rgb(177, 106, 0);
        }
      }
  }
  .terms{
    color: whitesmoke;
    background-color: rgba(44, 44, 44, 0.527);
    .social-icons{
        background-color: rgba(44, 44, 44, 0);
        a{
          color: white;
        }
        :hover{
        color: rgb(177, 106, 0);
        }
    }
    footer{
        a{
            color: rgb(190, 188, 188);
        }  
    }
  }