.brandName {

        background-color: var(--mainColor);

        width: 100%;

        height: 30vh;

        margin-top: 13vh;

        clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);

    }



    .brandName > h1 {

        color: white;

        font-size: 50px;

        width: 100%;

        height: 100%;

        text-align: center;

        margin-top: 5vh !important;

        display: inline-block;

    }



    @media (max-width: 1000px) {

        .brandName {

            height: 22vh;

        }



        .brandName > h1 {

            font-size: 30px;

            margin-top: 0vh !important;

        }

    }



    /* ######################################### */



    .topBannerSec {

        width: 100%;

        height: 45vh;

        display: grid;

        grid-template-columns: 28% 65%;

        grid-template-rows: 100%;

        column-gap: 3%;

        margin-top: -80px;

        padding: 0 2%;

    }



    /* .topBannerSec img {

        border-radius: 20px;

    } */



    .mainSliderBanner {

        width: 100%;

        display: block;

        height: 100%;

    }



    .mainSliderBanner > img {

        width: 100%;

        object-fit: cover;

        height: 100%;

        border-radius: 10px;

    }



    div:has(.mainSliderBanner) {

        height: 100%;

    }



    .fixBanner {

        display: grid;

        grid-template-columns: 100%;

        grid-template-rows: 48% 48%;

        row-gap: 4%;

        width: 100%;

    }



    .fixBanner img {

        width: 100%;

        border-radius: 10px;

        height: 100%;

        position: relative;

    }



    @media (max-width: 1000px) {

        .topBannerSec {

            height: 30vh;

            grid-template-columns: 100%;

            padding: 0;

        }



        .mainSliderBanner {

            /* width: 90%; */

            height: 180px;

            justify-self: center;

        }

        .mainSlider .splide__pagination li {
            margin-top: -6em;
        }

        .mainSlider .splide__pagination__page {
            background: #888;   /* رنگ نقطه‌های عادی */
            opacity: 1;
        }

        .mainSlider .splide__pagination__page.is-active {
            background: var(--mainColor);   /* رنگ نقطهٔ فعال */
        }


        .fixBanner {

            display: none;

        }

    }



    /* ######################################### */



    .narrowBannerSec {

        width: 100%;

        margin-top: 5vh;

        
    }
    
    
    
    .narrowBannerSec img {
        
        width: 100%;
        
        height: auto;
        
        border-radius: 20px;
    }

    @media (max-width: 1000px) {
        .narrowBannerSec {
            margin-top: 2vh;
        }

        .narrowBannerSec img {
            object-fit: cover;
            object-position: right;
            height: 50px;
            border-radius: 10px;
        }
    }



    /* ######################################### */



    .wasteTypeSec {

        width: 100%;

        height: 216px;

        margin-top: 90px;

        position: relative;

    }



    .wasteTypeBack {

        width: 100%;

        height: 100%;

        background-color: var(--gray);

        clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);

        position: absolute;

    }



    .wasteTypeTitle {

        position: relative;

        display: grid;

        grid-template-columns: 100%;

        grid-template-rows: 112px 33.6px 33.6px;

        height: 55%;

        margin: 9px 18px 9px 0;

    }



    @media (max-width: 1000px) {

        .wasteTypeSec {

            height: 128px;

            margin-top: 3vh;

        }



        .wasteTypeBack {

            display: none !important;

        }



        .wasteTypeTitle {

            display: none;

        }

    }



    .wasteTypeTitle img {

        height: 80%;
        margin: 1em;

    }


    .wasteTypeTitle h3 {
        font-size: 2rem;
    }

    .wasteTypeTitle h4 {
        font-size: 1.5rem;
    }



    .wasteTypeSec > div {

        display: grid;

        grid-template-columns: 25% 75%;

    }



    .wasteTypeItem {

        margin-top: -40px;

    }



    .wasteTypeItem li {

        padding: 0 5px;

        text-align: center;

        overflow: visible;

    }



    .wasteTypeItem img {

        
        width: 150px;
        position: absolute;
        height: 110px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -60%);
        
        
        /* padding: 15px; */
        
    }
    
    
    .wasteTypeItemOpen > h3 {
        margin-top: 10px !important;
        font-size: 1.5rem;
    }


    .wasteTypeItemOpen > div {
        
        overflow: visible;
        border-radius: 100%;
        background-color: var(--mainColor);
        height: 130px;
        width: 140px;
        justify-self: center;
        
    }


    .wasteTypeItem hr {

        border-color: #05af71;

        width: 70%;

    }



    @media (max-width: 1000px) {

        .wasteTypeSec > div {

            display: block;

        }



        .wasteTypeItem {

            margin-top: 0;

        }



        .wasteTypeItem li {

            padding: 0 5px;

        }



        .wasteTypeItem img {

            width: 80px;
            height: 70px;
            top: 35%;

            /* background-color: var(--mainColor); */

            padding: 2px;

        }


        .wasteTypeItemOpen > div {
            height: 80px;
            width: 80px;
        }

        .wasteTypeItemOpen > h3 {

            font-size: 10px;

            margin-top: 10px;

        }



        .wasteTypeItem hr {

            display: none;

        }

    }



    /* ######################################### */



    .wastePriceSec {

        width: 100%;

        height: 256px;

        margin-top: 10vh;

        position: relative;

        margin-bottom: 50px;

    }



    .wastePriceBack {

        width: 100%;

        height: 100%;

        background-color: var(--mainColor);

        clip-path: polygon(0 25%, 100% 0, 100% 100%, 0 100%);

        position: absolute;

    }



    .wastePriceTitle {

        position: relative;

        display: grid;

        grid-template-columns: 100%;

        grid-template-rows: 50% 25% 25%;

        color: white;

        margin: 9px 18px 9px 0;

    }



    .wastePriceTitle > h2 {

        margin-top: 3vh !important;

        font-size: 2rem;

    }


    .wastePriceTitle > h4 {
        font-size: 1.5rem;
    }



    .wastePriceSubTitle {

        position: relative;

        display: grid;

        align-items: end;

        text-align: start;

        grid-template-columns: 20% 70%;

        color: white;

        margin: 9px 18px 9px 0;

    }



    .wastePriceSubTitle > hr {

        width: 100%;

        height: 0;

        border: white 1px solid;

    }



    .wastePriceDiv {

        width: 100%;

    }



    .wastePriceDiv li {

        display: grid;

        grid-template-columns: 100%;

        grid-template-rows: 40% 10% 40%;

        text-align: center;

    }



    .wastePriceDiv div.splide__track {

        margin-right: 5vh;

        margin-left: 5vh;

    }



    .wastePriceDiv .wasteName, .wastePriceDiv .wastePrice {

        height: 5vh;

        /* border: var(--gray) 2px solid; */

        border-radius: 5px;

        align-items: center;

        font-size: 1.2rem;

        display: flex;

        justify-content: center;

    }



    .wastePriceDiv .wasteName {

        background-color: white;

    }


    .wastePriceDiv .priceHead {
        display: grid;
        grid-template-columns: 31% 31% 31%;
        column-gap: 3.5%;
    }

    .wastePriceDiv .priceHead > p {
        font-size: 1.2rem;
    }


    .wastePriceDiv .wastePrice {

        background-color: #ffffff50;

        margin-top: 2vh;

    }



    @media (max-width: 1000px) {

        .wastePriceSec {

            margin-top: 2vh;

            height: 200px;

            margin-bottom: 0;

            padding-bottom: 2em;

        }



        .wastePriceBack {

            clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 100%);

        }



        .wastePriceSubTitle {

            display: none;

        }



        .wastePriceDiv .wasteName, .wastePriceDiv .wastePrice {

            font-size: 10px;

        }

    }



    /* ######################################### */



    .textBox {

        display: grid;

        grid-template-columns: 45% 45%;

        column-gap: 10%;

        font-size: 1.5rem;

        text-align: justify;

        margin-top: 10vh;

    }

    .textBox > h2 {
        font-size: 3rem;
    }


    .textBox > h4 {
        font-size: 2rem;
    }



    .textBox a {

        color: var(--blue);

    }



    .textBox a:hover {

        color: var(--hoverBlue);

    }



    .textBox .image > img {

        width: 100%;
        /* height: 20em; */
        border-radius: 10px;

    }



    @media (max-width: 1000px) {

        .textBox {

            grid-template-columns: 100%;

            margin: 0 10px;

        }

    }



    /* ######################################### */



    .bestAdsSec {

        display: none;

        width: 100%;

        height: 280px;

        margin-top: 10vh;

        position: relative;

    }



    @media (max-width: 1000px) {

        .bestAdsSec {

            margin-top: 5vh;

        }

    }



    .bestAdsBack {

        width: 100%;

        height: 100%;

        background-color: var(--gray);

        clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);

        position: absolute;

    }



    .bestAdsSec > div:not(.bestAdsBack) {

        display: grid;

        grid-template-columns: 20% 80%;

        height: 100%;

    }



    .bestAdsTitle {

        position: relative;

        display: grid;

        grid-template-columns: 100%;

        grid-template-rows: 126px 9px 45px;

        height: 55%;

        align-items: center;

        margin: 9px 18px 9px 0;

    }



    .bestAdsTitle > h2 {

        margin-top: 2.5vh !important;

    }



    .bestAdsItem {

        padding: 0 3vw;

        margin-top: 5vh;

    }



    @media (max-width: 1000px) {

        .bestAdsTitle {

            display: block;

            height: initial;

            margin-top: 0;

            padding-top: 1px;

        }



        .bestAdsSec > div:not(.bestAdsBack) {

            display: block;

        }



        .bestAdsTitle > h4 {

            display: none;

        }



        .bestAdsItem {

            margin-top: 0;

        }

    }



    .bestAdsItem ul {

        height: 280px;

        align-items: center;

    }



    .bestAdsItem li {

        /* background-color: white; */

        height: 90%;

        padding: 0 .8vw;

        /* box-shadow: -2px -2px 8px 1px rgba(0, 0, 0, 0.4); */

    }



    .bestAdsItem a {

        display: grid;

        grid-template-columns: 100%;

        grid-template-rows: 40% 10% 20% 25%;

        height: 100%;

        justify-items: center;

        align-content: center;

        background-color: white;

        box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.4);

        border-radius: 10px;

    }



    .bestAdsItem img {

        width: 90%;

        height: 100%;

        border-radius: 10px;

        background-color: var(--mainColor);

    }



    .bestAdsItem h3 {

        font-size: 15px;

        text-align: start;

        width: 90%;

    }



    .bestAdsItem p {

        margin: 0;

        display: -webkit-box;

    -webkit-line-clamp: 2;

            line-clamp: 2; 

    -webkit-box-orient: vertical;

    font-size: 12px;

    line-height: 1.4em;

    width: 90%;

    height: 2.8em;

    overflow: hidden;

    }



    .bestAdsItem a > div {

        width: 90%;

        align-content: end;

        padding-bottom: 1vh;

        display: grid;

        grid-template-columns: 80% 20%;

        padding-bottom: 1vh;

        justify-items: start;

    }



    .bestAdsItem a > div > button {

        width: 95%;

        background-color: var(--mainColor);

        border: none;

        border-radius: 10px;

        font-size: 12px;

        color: white;

        cursor: pointer;

    }



    .vr {

        border-left:1px solid #000;height:500px;

        height: 2.5vh;

    }



    @media (max-width: 1000px) {

        .bestAdsItem a {

            /* grid-template-rows: 40% 20% 20%;    بدون توضیحات

            row-gap: 5%; */

            grid-template-rows: 40% 10% 20% 13%;

            row-gap: 4%;

        }



        .bestAdsItem ul {

            height: 220px;

        }

        .bestAdsItem h3 {

            font-size: 12px

        }



        .bestAdsItem p {

            font-size: 7px;

            /* display: none; */

        }



        .bestAdsItem a > div > button {

            font-size: 7px;

        }



        .bestAdsItemOpen > p {

            font-size: 10px;

        }

    }



    /* ######################################### */



    .otherAdsSec {

        display: none;

        width: 100%;

        height: 700px;

        margin-top: 10vh;

        position: relative;

        justify-content: center;

        align-items: center;

        /* display: flex; */

    }



    @media (max-width: 1000px) {



        .otherAdsSec {

            margin-top: 5vh;

        }

    }



    .otherAdsBack {

        width: 100%;

        height: 100%;

        background-color: var(--mainColor);

        clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 100%);

        position: absolute;

    }



    .otherAdsSec > a {

        position: absolute;

        z-index: 1;

        font-size: 18px;

        top: 10%;

        right: 5%;

        color: white;

        transition-duration: .5s;

    }



    @media (max-width: 1000px) {

        .otherAdsBack {

            clip-path: polygon(0 5%, 100% 0, 100% 100%, 0 100%);

        }

    }



    .otherAdsSec > a:hover {

        color: var(--gray);

        transform: scale(1.1);

    }



    .otherAdsItem {

        height: 70%;

        /* width: 90%; */

        /* overflow-y: scroll; */

        margin-top: 100px;

        padding: 1% 5%;

        row-gap: 5%;

        column-gap: 2%;

        position: relative;

        display: grid;

        grid-template-columns: auto auto;

        -ms-overflow-style: none;  /* IE and Edge */

        scrollbar-width: none;  /* Firefox */

        overflow-y: auto;

        -webkit-overflow-scrolling: touch; /* برای اسکرول روان در موبایل */

    }



    .otherAdsItem::-webkit-scrollbar {

        display: none;

    }



    .otherAdsItem > a {

        height: 180px;

        width: 100%;

        direction: ltr;

        display: grid;

        grid-template-columns: 45% 45%;

        column-gap: 10%;

        background-color: white;

        box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.4);

        border-radius: 10px;

        align-items: center;

    }



    .otherAdsItem img {

        width: 90%;

        height: 90%;

        border-radius: 10px;

        background-color: var(--mainColor);

        margin: 0 0 0 10%;

    }



    @media (max-width: 1000px) {



        .otherAdsItem {

            grid-template-columns: auto;

            margin-top: 20px;

        }



        .otherAdsItem > a {

            /* height: 100px; */

        }

        

    }



    .otherAdsItem > a > div {

        direction: rtl;

        margin: 0% 10% 0 0;

        position: relative;

        height: 70%;

    }



    .otherAdsItem h3 {

        font-size: 15px;

        text-align: start;

    }



    .otherAdsItem p {

        margin: 0;

        display: -webkit-box;

    -webkit-line-clamp: 2;

            line-clamp: 2; 

    -webkit-box-orient: vertical;

    font-size: 12px;

    line-height: 1.4em;

    width: 90%;

    overflow: hidden;

    }



    .otherAdsItem button {

        width: 55%;

        background-color: var(--mainColor);

        border: none;

        position: absolute;

        bottom: 0;

        border-radius: 5px;

        font-size: 12px;

        color: white;

        cursor: pointer;

    }



    @keyframes MoveUpDown {

        0%, 100% {

        bottom: 12%;

        transform: scale(1);

        }

        50% {

        bottom: 8%;

        transform: scale(.7);

        }

    }



    .otherAdsSec > .scrollDown {

        animation: MoveUpDown 1.5s linear infinite;

        position: absolute;

        bottom: 10%;

        width: 5%;

    }



    @media (max-width: 1000px) {

        .otherAdsSec > .scrollDown {

            width: 10%;

        }

    }



    /* ######################################### */



    .lastNewsSec {

        width: 100%;

        /* height: 700px; */

        margin-top: 10vh;

        position: relative;

        justify-content: center;

        align-items: center;

        /* display: flex; */

    }



    @media (max-width: 1000px) {

        .lastNewsSec {

            margin-top: 5vh;

        }

    }



    .lastNewsSec > p {

        width: 100%;

        font-size: 3rem;

        text-align: center;

        font-weight: bold;

    }



    .lastNewsSec > .spaceLine {

        height: 50px;

        width: 100%;

        background-color: var(--mainColor);

        clip-path: polygon(0 80%, 100% 0, 100% 100%, 0 100%);

        margin-bottom: 50px;

    }



    .lastNewsItem {

        display: grid;

        grid-template-columns: 48.75% 48.75%;

        row-gap: 10%;

        column-gap: 2.5%;

    }



    .lastNewsItemOpen {

        display: grid;

        grid-template-columns: 45% 60%;

    }



    .lastNewsItemOpen img {

        width: 100%;

        height: 100%;

        object-fit: cover;

        background-color: white;

        box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.4);

        border-radius: 10px;

        position: relative;

        z-index: 1;

    }



    .lastNewsItemOpen > div {

        background-color: var(--gray);

        border-radius: 10px 0 0 10px;

        padding: 10px 20px 10px 0;

        height: 90%;

        margin-left: 9%;

        margin-right: -6%;

        align-self: center;

        position: relative;

    }



    .lastNewsItemOpen h2 {

        margin-right: 15px !important;

        font-size: 2rem;

        display: -webkit-box;

        -webkit-line-clamp: 2;

        line-clamp: 2; 

        -webkit-box-orient: vertical;

        overflow: hidden;

    }



    .lastNewsItemOpen p {

        display: -webkit-box;

    -webkit-line-clamp: 5;

            line-clamp: 5; 

    -webkit-box-orient: vertical;

    font-size: 12px;

    line-height: 1.4em;

    margin-right: 15px;

    width: 90%;

    text-align: justify;

    overflow: hidden;

    }



    @media (max-width: 1000px) {

        .lastNewsItem {

            grid-template-columns: auto;

            padding: 0 5%;

            row-gap: 3%;

        }



        .lastNewsItemOpen img {

            align-self: center;

        }



        .lastNewsItemOpen h3 {

            font-size: 15px;

        }



        .lastNewsItemOpen p {

        -webkit-line-clamp: 3;

                line-clamp: 3; 

        }



    }



    .lastNewsItemOpen > div > div {

        display: grid;

        grid-template-columns: 35% 25% 35%;

    }



    .lastNewsItemOpen button {

        height: 30px;

        align-self: center;

    }



    @media (max-width: 1000px) {



        .lastNewsItemOpen > div > div {

            grid-template-columns: 45% 5% 45%;

        }



        .lastNewsItemOpen button {

            font-size: 10px;

        }

    }

    .callIcon {
        position: fixed;
        left: 10px;
        bottom: 10px;
        z-index: 10;
    }

    .callNumber {
        padding: 5px 10px;
        border-radius: 0px 10px 10px 0;
        background-color: white;
        color: black;
        position: fixed;
        left: 135px;
        font-size: 1.8rem;
        bottom: 65px;
        z-index: 9;
        opacity: 0;
        visibility: hidden;
        transition:
        opacity 0.3s ease,
        visibility 0s linear 0.3s;
    }

    .callIcon:hover + .callNumber {
        opacity: 1;
        visibility: visible;
        transition:
        opacity 0.3s ease,
        visibility 0s;
    }

    @media (max-width: 1000px) {
        .callIcon {
            width: 120px !important;
            height: 120px !important;
            left: 5px;
            bottom: 5px;
        }

        .callIcon:hover + .callNumber {
            opacity: 0;
            visibility: hidden;
        }
    }