/* general stlyling */
html, body{
    margin: 0;
    padding: 0;
    font-family: 'Poppins';
    background-color: #ffffff;
    scroll-behavior: smooth;
}
.mycontainer{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    font-family: 'Poppins';
}
/* general styling ends */

/* header styling starts */
.header{
    display: flex;
    flex-direction: row;
}
.subheader{
    background-color: #555B6E;
    color: #fffef8;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    width: 100%;
    margin-bottom: 10px;
}
.blue-purple-bg{
    background: -webkit-linear-gradient(135deg, rgba(183, 0, 249, 1) 0%, rgba(8, 235, 255, 1) 100%);
}
.blue-products div{
    color: #474eff;
    border: #474eff;
}
.blue-products div:hover{
    background-color: #474eff;
    
}

.green-brown-bg{
    background: -webkit-linear-gradient(135deg, #506C64 0%, #77CBB9 100%);
}
.brown-products div{
    color: #967f6b;
    border: #967f6b;
}
.brown-products div:hover{
    background-color: #967f6b;
}

.peach-orange-bg{
    background: -webkit-linear-gradient(135deg, #ff1f1b 0%, #ffe500 100%)
}
.peach-products div{
    color: #ff9d42;
    border: #ff9d42;
}
.peach-products div:hover{
    background-color: #ff9d42;
}


.header h1{
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family:'Poppins';
    font-size:50px;
    margin: 20px 0px 20px 0px;
}
/* header styling ends */

/* shop styling starts */

.shop{
    display: flex;
    flex-direction: row;
    width: 95%;
    height: 75vh;
    border-radius: 10px;
    padding: 5px;
    box-shadow: 15px 15px 10px 5px #cccccc;
}
.shop .cart{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: min-content;
    min-width: 20%;
    padding: 10px;
    margin: 5px;
    border-radius: 10px;
    /*background-color: #e3f0ff;*/
    background-color: #fffef8;
}
.shop .cart p,h2{
    margin: 0px;
}
.shop .cart hr{
    border: solid 1px #555B6E;
    width: 90%;
    margin: 10px 0px 10px 0px;
}
.products .sticky{
    position: sticky;
    top: 0;
    color: #fffef8;
}
.shop .products{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: scroll;
    padding: 5px;
    margin: 5px;
    border-radius: 10px;
    background-color: #fffef8;
    /*background-color: #e3f0ff;*/
}
.shop .products .item{
    margin: 5px;
    padding: 10px;
    /*border: solid 2px #5f4cfb; */
    /*border: solid 2px #220C10;*/
    border: solid 2px;
    border-radius: 10px;
    /*color: #220C10;*/
    /*color: #555B6E;*/
    width: 95%;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    transition: ease 0.3s;
}
.shop .products .item p{
    width: 100px;
    text-align: center;
}
.shop .products .item img{
    width: 50px;
}
.shop .products .item:hover{
    /*background-color: #555B6E;*/ 
    /*background-color: #5f4cfb; */
    /*background-color: #220C10;*/
    color: #fffef8;
    cursor: pointer;
}

.colors{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}
.colors div{
    height: 30px;
    width: 30px;
    border-radius: 10px;
    border: #555B6E solid 2px;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.products::-webkit-scrollbar {
    display: none;
  }
/* Hide scrollbar for IE, Edge and Firefox */
  .products {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }
/* shop styling ends */

/* cart styling start */
#cart{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    overflow-y: scroll;
}
#cart p{
    border-bottom: #555B6E solid 2px;
    border-top: #fffef8 solid 2px;
    border-left: #fffef8 solid 2px;
    border-right: #fffef8 solid 2px;
    padding: 3px;
    margin: 3px 0px 3px 0px;
}
#cart p:hover{
    border: #555B6E solid 2px;
    cursor: pointer;
}
#cart p button{
    margin: 5px;
}
#cartTotal{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
}
/* cart styling ends */

/* review section styling start */
.specs{
    display: flex;
    min-height: 300px;
    flex-direction: row;
    width: 95%;
    border-radius: 10px;
    padding: 5px;
    box-shadow: 15px 15px 10px 5px #cccccc;
    margin: 30px 0px 40px 0px;
}
.description{
    min-width: 20%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    padding: 5px;
    margin: 5px;
    border-radius: 10px;
    background-color: #fffef8;
    max-height: 300px;
}
.description p{
    margin: 0px 20px 0px 20px;
}
.description hr{
    border: solid 1px #555B6E;
    width: 90%;
    margin: 10px 0px 10px 0px;
}
.reviewForm{
    min-width: 20%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    padding: 5px;
    margin: 5px;
    border-radius: 10px;
    background-color: #fffef8;
    max-height: 300px;
}
.reviews{
    width: 100%;
    display: flex;
    max-height: 300px;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    padding: 5px;
    margin: 5px;
    border-radius: 10px;
    background-color: #fffef8;
    overflow-y: scroll;
}
.reviews div{
    height: auto;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    padding: 5px;
    margin: 5px;
    border-radius: 10px;
    border: #555B6E solid 2px;
    
}
/* review section styling ends */