section#SliderMobile {
    display: none;
}

section#Slider .owl-dots {
    position: absolute;
    width: auto;
    bottom: 45px;
    display: block;
    text-align: center;
    box-sizing: border-box;
    margin: 0 2%;
}

section#Slider .owl-dots button {
    width: 8px;
    height: 3px;
    background: var(--White);
    margin: 10px 0;
    border-radius: 0;
    transition: .5s;
    display: block;
}

section#Slider .owl-dots button.active {
    width: 20px;
    border-radius: 50px;
    background: var(--Primary);
    /* border-color: var(--White); */
}

.owl-nav button {
    position: absolute;
    top: 40%;
    width: 40px;
    height: 40px;
    background: #808080c4 !important;
    border-radius: 50px 0 0 50px;
    font-size: 20px !important;
    display: flex;
    align-items: center;
    color: var(--White);
    justify-content: center;
    opacity: 1;
    transition: .5s;
}

section#Slider {
    position: relative;
}

.owl-nav button.owl-prev {
    left: 0;
    border-radius: 0 50px 50px 0;
}

.owl-nav button iconify-icon {
    color: var(--White);
    font-size: 24px;
}

.owl-nav button.disabled {
    opacity: 0;
}

/* Slider */
/* Categoies */
#Categoies {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1760px;
    margin: 0 auto;
    padding: 20px;
    flex-wrap: wrap;
    gap: 1%;
}

#PageTitle {
    flex: 0 0 100%;
    text-align: center;
    color: var(--Black);
    position: relative;
}

#PageTitle:after {
    content: '';
    position: absolute;
    height: 2px;
    width: 16%;
    right: 42%;
    display: block;
    background: var(--Primary);
    bottom: -10px;
}

.Category {
    flex: 0 0 15%;
    text-align: center;
    margin-bottom: 16px;
}

.Category span {
    font-weight: 600;
    font-size: 15px;
    color: var(--Black);
    transition: .5s;
}

.Category:hover span {
    color: var(--Primary);
}

.Category img,
section#Banners a img,
section#TopBanners a img,
#Brands a img,
#Banners3Col a img{
    scale: 1;
    transition: .5s;
}

section#TopBanners a img,
#Banners3Col a img  {
    border-radius: 8px;
}

.Category:hover img,
section#Banners a:hover img,
#Banners3Col a:hover img {
    scale: 1.05;
}

section#TopBanners a:hover img {
    scale: 1.03;

}

#Brands a:hover img {
    scale: 1.2;
}

a.ozviat {
    width: 100%;
    background: var(--Red);
    color: var(--White);
    text-align: center;
    margin-bottom: 4px;
    min-height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    box-sizing: border-box;
}

/* SpecialSale */
#SpecialSale {
    width: 100%;
    background: var(--wp--preset--gradient--blush-bordeaux);
}

#SpecialSaleInner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1760px;
    margin: 0 auto;
    padding: 40px 20px;
    flex-wrap: wrap;
}

#SpecialSaleInfo {
    flex: 0 0 calc(17% - 40px);
    text-align: center;
    padding: 20px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

#SpecialSaleProducts {
    flex: 0 0 83%;
    width: 83%;
}

div#SpecialSaleInfo h2,
div#SpecialSaleInfo a {
    font-size: 25px;
    border: none;
    padding: 0;
    transition: .5s;
    color: var(--White);
    font-family: 'YekanBakhExBold';
}

div#SpecialSaleInfo a {
    font-family: 'YekanBakhReg';
    font-size: 20px;
    background: #eb272f;
    padding: 4px 16px;
    border-radius: 4px;
}

div#SpecialSaleInfo a:hover {
    color: var(--wp--preset--color--luminous-vivid-amber);
}

/* Banners */
#Banners,
#TopBanners {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    max-width: 1760px;
    margin: 0 auto;
    padding: 20px;
    gap: 20px;
}

section#Banners a {
    flex: 0 0 31%;
    border: 1px solid #000;
    display: block;
    border-radius: 8px;
    overflow: hidden;
}

section#TopBanners a {
    flex: 0 0 48%;
}

section#Banners a img {
    display: block;

}

#BigBannerMobile,
.SmallBannerMobile {
    display: none;
}

.SmallBannerDesktop {
    flex: 0 0 49%;
}

/* LastestProducts */
#LastestProducts {
    width: 100%;
    background: var(--Secondery);
}

#LastestProductsInner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1760px;
    margin: 0 auto;
    padding: 40px 20px;
    flex-wrap: wrap;
}

#LastestProductsInner a {
    font-family: 'YekanBakhBold';
    transition: .5s;
}

#LastestProductsInner>a:hover {
    color: var(--Primary);
}

#LastestProductsInner>a {
    font-family: 'YekanBakhBold';
    transition: .5s;
    background: var(--Primary);
    color: var(--White);
    padding: 8px 16px;
    border-radius: 4px;
}

#LastestProductsInner>a:hover {
    color: var(--White);
}

/* Brands */
#Brands {
    max-width: 1760px;
    margin: 0 auto;
    padding: 20px;
}

#Brands a {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-size: 15px;
    font-family: 'YekanBakhBold';
}

#Brands a img {
    width: 30%;
    z-index: -1;
}

/* Responsive */
[id^=ProductBox_].product .button {
    padding: 5px 10px;
}
/*  */
section#Banners3Col {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 40px 20px;
    flex-wrap: wrap;
}

section#Banners3Col>div {
    flex: 0 0 32%;
}
section#Banners3Col>div a{
    display: block;
}
#BannerCol2{
    display: flex;
    flex-direction: column;
    gap: 16px;
    
}
section#Banners3Col>div a img {
    display: block;
}

@media screen and (max-width:1300px) {
    #SpecialSaleInfo {
        flex: 0 0 calc(27% - 40px);
    }

    #SpecialSaleProducts {
        flex: 0 0 73%;
        width: 73%;
    }
}

@media screen and (max-width:1040px) {
    .SmallBannerDesktop {
        flex: 0 0 48%;
    }

    /* Banners */
}

@media screen and (max-width:960px) {
    #SpecialSaleInfo {
        flex: 0 0 calc(37% - 40px);
    }

    #SpecialSaleProducts {
        flex: 0 0 63%;
        width: 63%;
    }

    .Category {
        flex: 0 0 23%;
    }
}

@media screen and (max-width:850px) {
    a.ozviat {
        min-height: 39px;
        font-size: 12px;
    }


    section#SliderMobile {
        display: block;
    }

    section#SliderMobile .owl-dots {
        position: absolute;
        width: 100%;
        bottom: 0;
        display: block;
        text-align: center;
        padding: 40px 10px 10px 10px;
        background: linear-gradient(0deg, #00000036, transparent);
        box-sizing: border-box;
    }

    section#SliderMobile .owl-dots button {
        width: 8px;
        height: 8px;
        background: var(--White);
        margin: 5px;
        border-radius: 50%;
        transition: .5s;
    }

    section#SliderMobile .owl-dots button.active {
        width: 20px;
        border-radius: 50px;
        background: var(--Primary);
    }
    section#Banners3Col{
        gap:8px;
    }
    section#TopBanners a,section#Banners3Col>div {
    flex: 0 0 100%;
}
}

@media screen and (max-width:800px) {
    [id^=ProductBox_].product .button {
        padding: 8px 4px;
    }
}

@media screen and (max-width:750px) {
    #SpecialSaleInfo {
        flex: 0 0 calc(35% - 40px);
    }

    #SpecialSaleProducts {
        flex: 0 0 63%;
        width: 63%;
    }
}

@media screen and (max-width:703px) {
    #SpecialSaleInfo {
        flex: 0 0 calc(42% - 40px);
    }

    #SpecialSaleProducts {
        width: 48%;
        flex: 0 0 48%;
    }
}

@media screen and (max-width:600px) {
    .Category {
        flex: 0 0 31%;
    }

    div#SpecialSaleInfo {
        flex: 0 0 100%;
        flex-direction: row;
        justify-content: space-between;
        padding: 0;
    }

    div#SpecialSaleInfo img {
        display: none;
    }

    #SpecialSaleProducts {
        flex: 0 0 100%;
        width: 100%;
    }

    #BigBannerMobile,
    .SmallBannerMobile {
        display: block;
    }

    section#Banners a {
        flex: 0 0 100%;
    }

    a#BigBannerDesktop,
    .SmallBannerDesktop {
        display: none;
    }
}

@media screen and (max-width:420px) {
    .Category span {
        font-size: 11px;
    }

    h1 {
        font-size: 14px;
    }
}

@media screen and (max-width:370px) {
    .Category span {
        font-size: 9px;
    }
}