body {
    background: url(/Portals/0/Images/specialBak.svg) var(--mc3);
    background-repeat: repeat-y;
    background-size: 100%;
    background-position: center;
}

.ProductList:has(.special__BranCard) {
    grid-template-columns: 1fr;
}
 
.brandName__Wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
}

.brandName__Wrapper::after,
.brandCard__PersianName::after,
.brandCard__EnglishName::before {
    content: '';
    width: 100%;
    height: 1px;
    background: var(--mc1);
    order: 2;
    display: none;
}

.brandCard__PersianName,
.brandCard__EnglishName {
    white-space: nowrap;
    min-width: fit-content;
    width: fit-content;
    color: var(--mc2);
    font-weight: 800;
    font-size: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.brandImage__Item {
    box-shadow: 0px 4px 4px 0px #00000040;
    border-radius: var(--border-radius-sm);
    overflow: hidden;
}

.brandImage__Item img{
    width: 100%;
}

.brandImage__Wrapper {
    filter: drop-shadow(0px 3px 15px #00000040);
    -webkit-filter: drop-shadow(0px 3px 15px #00000040);
    position: relative;
    border-radius: var(--border-radius);
}

span[id$="ProductList_dlProductList"]>span:not(:last-child) .special__BranCard  {
    margin-bottom: var(--main-space);
}

/* slick dots */

/* .brandImage__Wrapper  .slick-dots li {
    width: auto !important;
    height: auto !important;
} */

.brandName__Wrapper h2{
    margin: 0 !important;
}

/* .brandImage__Wrapper  .slick-dots li button {
    background: #DFDFDF !important;
    border-radius: 100px !important;
    width: 12px !important;
    height: 3px !important;
    transition: var(--transition);
    padding: 0 !important;
    border: none !important;
}

.brandImage__Wrapper  .slick-dots li.slick-active button {
    background: var(--white) !important;
    width: 2rem !important;
    height: 2px !important;
}

.brandImage__Wrapper  .slick-dots li button::before {
    display: none;
}

.slick-dotted.slick-slider {
    margin-bottom: 0 !important;
} */


/* pagination start */

/* pagination end */

/* list bottom message start */

.special__Message_wrapper{
    border: solid 1px black;
    padding-top: 35px;
    line-height: 3rem;
    border-radius: 0.5rem;
}

.special__Message_wrapper .btnStyle_Primary{
    margin-bottom: -25px;
    margin-top: 1.5rem;
}

/* list bottom message end */

@media (min-width:992px) {
    .brandImage__Wrapper {
        padding: 2rem;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        column-gap: 20px;
        row-gap: 20px;
    }

    .brandName__Wrapper::after{
        display: flex;
        margin: 0 20px;
    }
}

@media (max-width:991px) {

    body {
        background: url(/Portals/0/Images/specialBakMobile.svg) var(--mc3);
    }

    .ProductList:has(.special__BranCard) {
        display: block !important;
    }

    .brandName__Wrapper {
        flex-direction: column;
    }

    .brandCard__PersianName,
    .brandCard__EnglishName {
        width: 100%;
        font-size: 1rem;
        font-weight: 800 !important;
    }

    .brandCard__EnglishName{
        flex-direction: row-reverse;
    }

    .brandCard__PersianName::after,
    .brandCard__EnglishName::before {
        display: flex;
    }

    .brandCard__EnglishName::before {
        margin-left: 1rem;
    }
    .brandCard__PersianName::after {
        margin-right: 1rem;
    }

    .brandImage__Item{
        margin: 0 5px;
    }

    .special__BranCard .slick-track{
        padding: 1.5rem 0 3.5rem !important;
    }

    .brandImage__Wrapper{
        background-color: transparent !important;
    }

    .brandImage__Wrapper .slick-list{
        overflow: visible;
        height: fit-content;
    }
    .brandImage__Wrapper .slick-dots{
        bottom: 1.5rem;
    }

    /* html{
        overflow-x: hidden;
    } */
    .main:has(.brandImage__Wrapper){
        max-width: 100vw;
        overflow: hidden;
    }
    
}

.overlay_Shadow {
    position: absolute;
    inset: 0;
    background: var(--black);
    opacity: 0;
    visibility: hidden;
    z-index: 2;
    transition: var(--transition);
}

.overlay_Shadow.active {
    opacity: 0.9;
    visibility: visible;
}