* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: 'Khula', sans-serif;
    animation-delay: 10s;
    animation: m 1 2s;
    animation-timing-function: linear;

}


@keyframes m {
    0% {
        /* margin-bottom: 2000px; */
        opacity: 0;
    }

    50% {
        opacity: 1;
    }
}

a {
    color: inherit;
    display: inline-block;
    text-decoration: none;
}

p {
    font-family: 'Nunito Sans', sans-serif;
}

section.all-of-content div.container-all-of-content {
    width: 80%;
    margin: auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin: 100px auto;
}

section.all-of-content div.container-all-of-content div.sidebar-all-of-content {
    width: 23%;
}

section.all-of-content div.container-all-of-content div.sidebar-all-of-content>div {
    margin-bottom: 50px;
}

section.all-of-content div.container-all-of-content div.sidebar-all-of-content form {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 50px;
}

section.all-of-content div.container-all-of-content div.sidebar-all-of-content form input {
    width: 70%;
    padding: 14.5px 30px;
    border: 0;
    outline: 0;
    font-family: 'Nunito Sans', sans-serif;
    box-shadow: none;
    transition: 0.3s;
    border: 1px solid #d6d5d7
}

section.all-of-content div.container-all-of-content div.sidebar-all-of-content form input:focus-visible {
    box-shadow: rgba(0, 0, 0, 0.20) 0px -50px 36px -28px inset;
}

section.all-of-content div.container-all-of-content div.sidebar-all-of-content form input#search {
    width: 30%;
    padding: 16px 0;
    color: white;
    background-color: #ff1f59;
    border-radius: 0 5px 5px 0;
    font-weight: 900;
    box-shadow: none;
    border-left: none;
    transition: 0.3s;
    cursor: pointer;
    font-size: 11px;
}

section.all-of-content div.container-all-of-content div.sidebar-all-of-content form input#search:hover {
    background-color: #DD0000;

}

section.all-of-content div.container-all-of-content div.sidebar-all-of-content span.title {
    font-size: 20px;
    color: #1b2336;
    font-weight: 700;
    position: relative;
}

section.all-of-content div.container-all-of-content div.sidebar-all-of-content span.title::after {
    content: "";
    width: 40%;
    height: 2.5px;
    background-color: #ff1f59;
    position: absolute;
    left: 120%;
    top: 50%;
}

section.all-of-content div.container-all-of-content div.sidebar-all-of-content span.title#cart::after {
    width: 100%;
}

section.all-of-content div.container-all-of-content div.sidebar-all-of-content div.category-sidebar ul {
    padding: 0;
    list-style: none;
}

/* most be link */

section.all-of-content div.container-all-of-content div.sidebar-all-of-content div.category-sidebar ul li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #e5e5e5;
    cursor: pointer;
}

/* ------------*/

section.all-of-content div.container-all-of-content div.sidebar-all-of-content div.category-sidebar ul li:hover span.text {
    color: #ff1f59;
}

section.all-of-content div.container-all-of-content div.sidebar-all-of-content div.category-sidebar ul li:hover span.number {
    background-color: #ff1f59;
    color: white;
}

section.all-of-content div.container-all-of-content div.sidebar-all-of-content div.category-sidebar ul li span.number {
    padding: 1px 10px;
    border-radius: 25px;
    color: #496285;
    background-color: #e4f2f8;
    font-weight: 700;
    transition: 0.5s;
}

section.all-of-content div.container-all-of-content div.sidebar-all-of-content div.category-sidebar ul li span.text {
    font-weight: 600;
    transition: 0.5s;
}

section.all-of-content div.container-all-of-content div.sidebar-all-of-content div.tag-sidebar div.title {
    margin-bottom: 26px;
}

section.all-of-content div.container-all-of-content div.sidebar-all-of-content div.tag-sidebar a {
    font-size: 14px;
    font-weight: 600;
    padding: 6px 11px;
    border-radius: 5px;
    background-color: #e4f2f8;
    margin: 0 2px 9px 0;
    transition: 0.3s;
}

section.all-of-content div.container-all-of-content div.sidebar-all-of-content div.tag-sidebar a:hover {
    background-color: #ff1f59;
    color: white;
}

section.all-of-content div.container-all-of-content div.sidebar-all-of-content div.cart-sidebar p {
    text-align: center;
}

section.all-of-content div.container-all-of-content div.main-content-all-of-content {
    width: 73%;
}

section.all-of-content div.container-all-of-content div.main-content-all-of-content div.head-main-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 50px;
}

section.all-of-content div.container-all-of-content div.main-content-all-of-content div.head-main-content p {
    font-size: 13px;
    color: #415674;
    font-weight: 700;
}

section.all-of-content div.container-all-of-content div.main-content-all-of-content div.head-main-content form {
    width: 30%;
    padding: 10px 15px;
    text-align: right;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
    border-radius: 25px;
}

section.all-of-content div.container-all-of-content div.main-content-all-of-content div.head-main-content form select {
    border: none;
    width: 100%;
    border: 1px solid #d6d5d7;
    color: white;
    padding: 10px;
    font-size: 13px;
    color: #415674;
    box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
    border-radius: 25px;
}

section.all-of-content div.container-all-of-content div.main-content-all-of-content div.head-main-content form select option {
    width: 100%;
    background-color: white;
    color: #415674;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
}

section.all-of-content div.container-all-of-content div.main-content-all-of-content div.main-content {
    width: 100%;
}

section.all-of-content div.container-all-of-content div.main-content-all-of-content div.main-content div.row-main-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 40px;
}

section.all-of-content div.container-all-of-content div.main-content-all-of-content div.main-content div.row-main-content div.column-main-content {
    width: 30%;
    border-radius: 5px;
    box-shadow: 0 20px 50px rgb(0 0 0 / 5%);
    border-radius: 10px;
    transition: 0.5s;
}

section.all-of-content div.container-all-of-content div.main-content-all-of-content div.main-content div.row-main-content div.column-main-content div.content-column:hover a{
    left: 50%;
}

/* ostaad farz konid do ta aks braye yek mahsoole :)) */

section.all-of-content div.container-all-of-content div.main-content-all-of-content div.main-content div.row-main-content div.column-main-content div.image-column img {
    width: 100%;
    border-radius: 5px 5px 0 0;
    display: block;
}

section.all-of-content div.container-all-of-content div.main-content-all-of-content div.main-content div.row-main-content div.column-main-content div.image-column{
    position: relative;
    cursor: pointer;
}

section.all-of-content div.container-all-of-content div.main-content-all-of-content div.main-content div.row-main-content div.column-main-content div.image-column:hover img#second{
    opacity: 1;
}

section.all-of-content div.container-all-of-content div.main-content-all-of-content div.main-content div.row-main-content div.column-main-content div.image-column img#second{
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    transition: 0.5s;
}

/* -------------------------------------------------- */

section.all-of-content div.container-all-of-content div.main-content-all-of-content div.main-content div.row-main-content div.column-main-content div.content-column {
    text-align: center;
    font-weight: 600;
    font-size: 18px;
    background-color: white;
    padding: 15px 0;
    border-radius: 0 0 5px 5px;
    position: relative;
    overflow: hidden;
    transition: 0.5s;
}

section.all-of-content div.container-all-of-content div.main-content-all-of-content div.main-content div.row-main-content div.column-main-content div.content-column span.name {
    display: block;
    color: #1b2336;
}

section.all-of-content div.container-all-of-content div.main-content-all-of-content div.main-content div.row-main-content div.column-main-content div.content-column span.price {
    color: #ff1f59;

}

section.all-of-content div.container-all-of-content div.main-content-all-of-content div.main-content div.row-main-content div.column-main-content div.content-column a{
    padding: 15px 0px;
    background-color: #ff1f59;
    font-size: 14px;
    color: white;
    border-radius: 5px;
    font-weight: 700;
    position: absolute;
    transform: translate(-50%,-50%);
    left: -100%;
    top: 50%;
    width: 90%;
    transition: 0.5s;
}

section.all-of-content div.container-all-of-content div.main-content-all-of-content div.main-content div.row-main-content div.column-main-content div.content-column a:hover{
    background-color: #DD0000;
}


@media screen and (max-width:1280px) {
    section.all-of-content div.container-all-of-content{
        width: 97%;
    }
}