@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap');

html, body{
    padding: 0;
    margin: 0;
    scroll-behavior: smooth;
}


*{
    padding: 0;
    margin: 0;
    
    font-family: 'Poppins', sans-serif;
}

.shop-main{
    background: white;
    height: auto;
    display: flex;
}

/* shop sidebar */
.shop-main > .shop-sidebar{
    background: transparent;
    width: 20%;
    height: auto;
    border-right: 0.2px solid grey;
}

.shop-sidebar > .side-title{
    background: gainsboro;
    height: 50px;
    font-size: 20px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px 15px;
    border-bottom: 0.1px solid grey;
}

.shop-sidebar > .side-category-list{
    display: flexbox;
}

.shop-sidebar > .side-category-list > a{
    text-decoration: none;
    font-size: 15px;
    font-weight: 10px;
    padding: 0px 10px;
    border-bottom: 0.1px solid grey;
    color: black;
    display: flex;
    justify-content: flex-start;
}

.shop-sidebar > .side-category-list > a:hover{
    cursor: pointer;
    color: red;
}


/* shop content */
.shop-main > .shop-content{
    /* background: white; */
    width: 80%;
}

.shop-content-filter{
    background: white;
    height: 30px;
    padding: 15px 10px 5px 0px;
    display: flex;
    justify-content: flex-start;
    border-bottom: 0.2px solid grey;
}

.shop-content-filter > p{
    padding: 0px 10px;
    color: grey;
}

.shop-content-filter > input{
    font-size: 15px;
    height: 20px;
    border: 1px solid grey;
    border-radius: 20px;
    padding: 0px 10px;
    outline: none;
    color: grey;
}

.shop-content-content{
    width: 100%;
    display: flexbox;
}


/* Products */

.content-title{
    background: black;
    padding: 10px 30px;
}

.content-title > p{
    color: white;
    font-size: 20px;
}

.casual{
    /* background: palegoldenrod; */
    height: auto;
    width: 100%;
    display: flex;
    /* justify-content: center; */
    /* flex-flow: row wrap; */
    /* border: 1px solid rebeccapurple; */
    /* padding: 10px 10px; */
    overflow-x: auto;
    scroll-behavior: smooth;
}

.casual-product{
    /* width: 200px; */
    height: auto;
    padding: 20px 10px;
}

.casual-prod-container{
    height: 250px;
    width: 150px;
    margin: 2%;
    border-radius: 20px;
    background: white;
    box-shadow: 10px 8px 10px 0px #9c9c9c;
    cursor: pointer;
    border: 0.1 solid gray;
}

.casual-prod-container:hover{
    cursor: pointer;
    transform: scale(1.05);
    transition: all .4s;
}

.casual-prod-details{
    height: 30%;
}

.casual-prod-img{
    width: 150px;
    height: 70%;
    display: flex;
    justify-content: center;
}

.casual-prod-img  img{
    width: 150px;
    height:100%;
}

.casual-prod-details{
    /* display: block; */
    border-radius: 0px 0px 20px 20px ;
    padding: 5px 10px;
}

.casual-prod-details > p{
    font-size: 12px;
    font-weight: bold;
}


@media (max-width:545px) and (min-width:200px){
    .shop-sidebar > .side-title{
        background: gainsboro;
        height: auto;
        font-size: 15px;
        font-weight: bold;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0px 15px;
        border-bottom: 0.1px solid grey;
    }
    
    .shop-sidebar > .side-category-list{
        display: flexbox;
    }
    
    .shop-sidebar > .side-category-list > a{
        text-decoration: none;
        font-size: 12px;
        font-weight: 10px;
        padding: 0px 10px;
        border-bottom: 0.1px solid grey;
        color: black;
        display: flex;
        justify-content: flex-start;
    }
}