.ban {
    width: 100%;
    height: 50vh;
    margin-bottom: 2vh;
    position: relative;
    /* background-color: #fff; */

    z-index: 1000;
}

.TextInTheBack {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    font-size: 46px;
    font-weight: 900;
    color: rgb(255, 255, 255);

    /* box-shadow: 0 0 30PX 30PX #202020; */
    /* background-color: #202020; */
    text-shadow: 0px 0px 20px rgb(0, 0, 0), 0px 0px 20px rgb(0, 0, 0);
    z-index: 1000;
    border-radius: 20px;
}

.OurRange {
    position: relative;
    padding-top: 20vh;
    height: auto;

    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;

    z-index: 1;
}


.OurRange .Line {
    width: 7vh;
    height: 0.5vh;
    background-color: var(--ThemeColor-);
    border-radius: 20px;

    animation: fadeIn3 1 1s ease-in-out forwards;
    animation-timeline: view();
    animation-range: entry 10% cover 40%;
}

.OurRange .Line2 {
    width: 7vh;
    height: 0.5vh;
    background-color: var(--ThemeColor-);
    border-radius: 20px;

    animation: fadeIn4 1s ease-in-out forwards;
    animation-timeline: view();
    animation-range: entry 10% cover 40%;
}

.OurRange .Details {
    width: 38vw;
    display: flex;
    align-items: flex-start;
    justify-content: space-evenly;
    gap: 2vh;
    flex-direction: column;

    /* background-color: #ffffff6e; */
}

.OurRange .Details .Title {
    color: white;
    font-size: clamp(4.2vh, 4vw, 7.5vh);
    font-weight: bolder;
}

.OurRange .Details .Des {
    color: rgb(205, 205, 205);
    font-size: clamp(1.8vh, 1vw, 2.3vh);
    font-weight: normal;
    text-align: justify;
}

.OurRange .Details .Des span {
    color: var(--ThemeColor-);
    font-weight: bold;
}

.OurRange .Details .Button {
    color: var(--ThemeColor-);
    font-size: clamp(2.4vh, 1.7vw, 3vh);
    font-weight: bold;

    cursor: pointer;
}


















.OurRange .row1 .Picture {
    background: url(ourrangerange/ricepic.png) center no-repeat;
    background-size: 100%;
}




.OurRange .row2 .Picture {
    background: url(ourrangerange/plainspicespic.png) center no-repeat;
    background-size: 100%;
}


.OurRange .row3 .Picture {
    background: url(ourrangerange/recipemixespic.png) center no-repeat;
    background-size: 100%;

    /* background-color: #404040; */
}

.OurRange .row4 .Picture {
    background: url("ourrangerange/pastespic.png") center no-repeat;
    background-size: 100%;

    /* background-color: #404040; */
}

.OurRange .row5 .Picture {
    background: url("ourrangerange/saltpic.png") center no-repeat;
    background-size: 100%;
}

.OurRange .row6 .Picture {
    background: url("ourrangerange/dessertspic.png") center no-repeat;
    background-size: 100%;

    /* background-color: #404040; */
}

.OurRange .row7 .Picture {
    background: url("ourrangerange/essentailspic.png") center no-repeat;
    background-size: 100%;

    /* background-color: #404040; */
}

.OurRange .row8 .Picture {
    background: url("ourrangerange/syrupspic.png") center no-repeat;
    background-size: 80%;

    /* background-color: #404040; */
}

.OurRange .row9 .Picture {
    background: url("ourrangerange/oilspic.png") center no-repeat;
    background-size: 80%;

    /* background-color: #404040; */
}

.OurRange .row10 .Picture {
    background: url("ourrangerange/honeypic.png") center no-repeat;
    background-size: 90%;
    /* background-color: #404040; */
}

.OurRange .row11 .Picture {
    background: url("ourrangerange/teadelightspic.png") center no-repeat;
    background-size: 90%;
}

.OurRange .row12 .Picture {
    background: url("ourrangerange/nimcopics.png") center no-repeat;
    background-size: 100%;

    /* background-color: #404040; */
}


.OurRange .Picture {
    height: 100%;
    width: 35vw;
}







.my-element1 {
    height: 50vh;
    width: 100%;
    /* background-color: aqua; */

    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn1 1 2s ease-in-out forwards;
    animation-timeline: view();
    animation-range: entry 10% cover 40%;

    margin: 2vw 0px;
}

.my-element2 {
    height: 50vh;
    width: 100%;
    /* background-color: aqua; */
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn2 1 2s ease-in-out forwards;
    animation-timeline: view();
    animation-range: entry 10% cover 40%;

    margin: 2vw 0px;
}

@media (max-width: 800px) {
    .my-element1 {
        height: 70vh;
        width: 100%;
        /* background-color: rgb(95, 95, 95); */

        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 2vh;
        animation: none;
        margin: 0px;
    }

    .my-element2 {
        height: 70vh;
        width: 100%;
        /* background-color: aqua; */

        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column-reverse;
                gap: 2vh;
        animation: none;
        margin: 0px;
    }
    .OurRange .Picture {
    height: 40vh;
    width: 45vh;
}
.OurRange .Details {
    width: clamp(40vh, 80vw, 50vh);
    display: flex;
    align-items: flex-start;
    justify-content: space-evenly;
    gap: 2vh;
    flex-direction: column;

    /* background-color: #ffffff6e; */
}
.OurRange .Line {
    width: 7vh;
    height: 0.5vh;
    background-color: var(--ThemeColor-);
    border-radius: 20px;

    animation: none;
}

.OurRange .Line2 {
    width: 7vh;
    height: 0.5vh;
    background-color: var(--ThemeColor-);
    border-radius: 20px;

    animation: none;
}

.OurRange {
    position: relative;
    padding-top: 10vh;
    height: auto;

    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;

    z-index: 1;
}
.ban{
    margin-bottom: -5vh;
}

}

@keyframes fadeIn1 {
    from {
        opacity: 0;
        transform: translate(30px);
    }

    to {
        opacity: 1;
        transform: translate(0);
    }
}

@keyframes fadeIn2 {
    from {
        opacity: 0;
        transform: translate(-30px);
    }

    to {
        opacity: 1;
        transform: translate(0);
    }
}

@keyframes fadeIn3 {
    from {
        opacity: 0;
        /* width: 0px; */
        transform: translateX(-5vh);
    }

    to {
        opacity: 1;
        /* width: 80px; */
        transform: translateX(-3vh);
    }
}

@keyframes fadeIn4 {
    from {
        opacity: 0;
        /* width: 0px; */
        transform: translateX(5vh);
    }

    to {
        opacity: 1;
        /* width: 80px; */
        transform: translateX(3vh);
    }
}
















.ban .ContainerSecond {
    width: 100%;
    height: 100%;
    /* background-color: #fff; */

    z-index: 1000;
}

.ban .ContainerSecond .MainContainer {
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
}

.ban .ContainerSecond .MainContainer .ColumnFirst {
    width: 10vh;
    height: 50vh;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 80px,
            rgba(0, 0, 0, 1) 200px, rgba(0, 0, 0, 1) calc(100% - 200px),
            rgba(0, 0, 0, 0) calc(100% - 80px));
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 80px,
            rgba(0, 0, 0, 1) 200px, rgba(0, 0, 0, 1) calc(100% - 200px),
            rgba(0, 0, 0, 0) calc(100% - 80px));

    perspective: 200px;
}

.ban .ContainerSecond .MainContainer .ColumnFirst .Box {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;




    animation: ColumnFirstAnime 12s infinite alternate linear;
}


@keyframes ColumnFirstAnime {
    from {
        transform: translateY(-90px);
    }

    to {
        transform: translateY(90px);
    }
}


.ban .ContainerSecond .MainContainer .ColumnFirst .Box .Items {
    width: 90%;
    height: 10vh;
    background-size: cover;
    background-position: center center;

    margin: 5px 0px;
    border-radius: 5px;
}

.ban .ContainerSecond .MainContainer .ColumnFirst .Box .Items1 {
    background-image: url(Image/BlueberryJelly_3000x.webp);
}

.ban .ContainerSecond .MainContainer .ColumnFirst .Box .Items2 {
    background-image: url(Image/Coca-Powder_3000x.webp);
}

.ban .ContainerSecond .MainContainer .ColumnFirst .Box .Items3 {
    background-image: url(Image/Badam-Kheer_3000x\ \(1\).webp);
}

.ban .ContainerSecond .MainContainer .ColumnFirst .Box .Items4 {
    background-image: url(Image//MangoCustard_png_3000x.webp);
}

.ban .ContainerSecond .MainContainer .ColumnSecond {
    width: 10vh;
    height: 50vh;

    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 80px,
            rgba(0, 0, 0, 1) 200px, rgba(0, 0, 0, 1) calc(100% - 200px),
            rgba(0, 0, 0, 0) calc(100% - 80px));
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 80px,
            rgba(0, 0, 0, 1) 200px, rgba(0, 0, 0, 1) calc(100% - 200px),
            rgba(0, 0, 0, 0) calc(100% - 80px));

    perspective: 200px;
}

.ban .ContainerSecond .MainContainer .ColumnSecond .Box {
    /* position: absolute; */
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    animation: ColumnSecondAnime 12s infinite alternate linear;
}

@keyframes ColumnSecondAnime {
    from {
        transform: translateY(110px);
    }

    to {
        transform: translateY(-110px);
    }
}

.ban .ContainerSecond .MainContainer .ColumnSecond .Box .Items {
    width: 90%;
    height: 10vh;
    background-size: cover;
    background-position: center center;

    margin: 5px 0px;
    border-radius: 5px;
}

.ban .ContainerSecond .MainContainer .ColumnSecond .Box .Items1 {
    background-image: url(Image/5Kg-Elite-Basmati-Rice_3476d28f-008a-492c-b08a-ac015644ac55_3000x\ \(1\).webp);
}

.ban .ContainerSecond .MainContainer .ColumnSecond .Box .Items2 {
    background-image: url(Image/5KG-Sela-Rice-Gold_3000x\ \(1\).webp);
}

.ban .ContainerSecond .MainContainer .ColumnSecond .Box .Items3 {
    background-image: url(Image/Bombay-Biryani_3000x.webp);
}

.ban .ContainerSecond .MainContainer .ColumnSecond .Box .Items4 {
    background-image: url(Image/RedChilli_1_3000x.webp);
}

.ban .ContainerSecond .MainContainer .ColumnSecond .Box .Items5 {
    background-image: url(Image/5KG-Sela-Rice-Gold_3000x\ \(1\).webp);
}

.ban .ContainerSecond .MainContainer .ColumnSecond .Box .Items6 {
    background-image: url(Image/Rozmarrah-5kg_3000x.webp);
}

.ban .ContainerSecond .MainContainer .ColumnSecond .Box .Items7 {
    background-image: url(Image/Kifayat_3000x.webp);
}

.ban .ContainerSecond .MainContainer .ColumnSecond .Box .Items8 {
    background-image: url(Image/Classic_1_3000x.webp);
}

.ban .ContainerSecond .MainContainer .ColumnSecond .Box .Items9 {
    background-image: url(Image/1.5Kg-Brown-Rice-Jar_3000x\ \(1\).webp);
}

.ban .ContainerSecond .MainContainer .ColumnThird {
    width: 10vh;
    height: 50vh;

    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50px,
            rgba(0, 0, 0, 1) 150px, rgba(0, 0, 0, 1) calc(100% - 150px),
            rgba(0, 0, 0, 0) calc(100% - 50px));
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50px,
            rgba(0, 0, 0, 1) 150px, rgba(0, 0, 0, 1) calc(100% - 150px),
            rgba(0, 0, 0, 0) calc(100% - 50px));

    perspective: 200px;
}

.ban .ContainerSecond .MainContainer .ColumnThird .Box {
    /* position: absolute; */
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    animation: ColumnThirdAnime 12s infinite alternate linear;

    /* transform: rotateY(10Deg) */
}

@keyframes ColumnThirdAnime {
    from {
        transform: translateY(-100px);
    }

    to {
        transform: translateY(100px);
    }
}

.ban .ContainerSecond .MainContainer .ColumnThird .Box .Items {
    width: 90%;
    height: 10vh;
    background-size: cover;
    background-position: center center;

    margin: 5px 0px;
    border-radius: 5px;
}

.ban .ContainerSecond .MainContainer .ColumnThird .Box .Items1 {
    background-image: url(Image/Cornflour_3000x.webp);
}

.ban .ContainerSecond .MainContainer .ColumnThird .Box .Items2 {
    background-image: url(Image/Friedonion_3000x\ \(1\).webp);
}

.ban .ContainerSecond .MainContainer .ColumnThird .Box .Items3 {
    background-image: url(Image/Ispaghol_3000x.webp);
}

.ban .ContainerSecond .MainContainer .ColumnThird .Box .Items4 {
    background-image: url(Image/MeatTend_3000x.webp);
}

.ban .ContainerSecond .MainContainer .ColumnThird .Box .Items5 {
    background-image: url(Image/Pheni_3000x.webp);
}

.ban .ContainerSecond .MainContainer .ColumnThird .Box .Items6 {
    background-image: url(Image/Jazaa_Dates_3000x.webp);
}

.ban .ContainerSecond .MainContainer .ColumnThird .Box .Items7 {
    background-image: url(Image/Vermicelli-150-g_3000x.webp);
}

.ban .ContainerSecond .MainContainer .ColumnThird .Box .Items8 {
    background-image: url(Image/Vermicelli100g_1e33ab42-1500-4eda-84c7-797f876c6441_3000x.webp);
}

.ban .ContainerSecond .MainContainer .ColumnThird .Box .Items9 {
    background-image: url(Image/Baking-Powder_3000x.webp);
}

.ban .ContainerSecond .MainContainer .ColumnFourth {
    width: 10vh;
    height: 50vh;

    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50px,
            rgba(0, 0, 0, 1) 150px, rgba(0, 0, 0, 1) calc(100% - 150px),
            rgba(0, 0, 0, 0) calc(100% - 50px));
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50px,
            rgba(0, 0, 0, 1) 150px, rgba(0, 0, 0, 1) calc(100% - 150px),
            rgba(0, 0, 0, 0) calc(100% - 50px));

    perspective: 200px;
}

.ban .ContainerSecond .MainContainer .ColumnFourth .Box {
    /* position: absolute; */
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    animation: ColumnFourthAnime 12s infinite alternate linear;
}

@keyframes ColumnFourthAnime {
    from {
        transform: translateY(120px);
    }

    to {
        transform: translateY(-120px);
    }
}

.ban .ContainerSecond .MainContainer .ColumnFourth .Box .Items {
    width: 90%;
    height: 10vh;
    background-size: cover;
    background-position: center center;

    margin: 5px 0px;
    border-radius: 5px;
}

.ban .ContainerSecond .MainContainer .ColumnFourth .Box .Items1 {
    background-image: url(Image/Pink-Salt-500g_3000x.webp);
}

.ban .ContainerSecond .MainContainer .ColumnFourth .Box .Items2 {
    background-image: url(Image/Pink-Salt-800g-Coarse_3000x.webp);
}

.ban .ContainerSecond .MainContainer .ColumnFourth .Box .Items3 {
    background-image: url(Image/Pink-Salt-200-G-GLass-Grinder_3000x.webp);
}

.ban .ContainerSecond .MainContainer .ColumnFourth .Box .Items4 {
    background-image: url(Image/Mix-Nimco_3000x.webp);
}

.ban .ContainerSecond .MainContainer .ColumnFourth .Box .Items5 {
    background-image: url(Image/Refined-Salt-800g_3000x.webp);
}

.ban .ContainerSecond .MainContainer .ColumnFourth .Box .Items6 {
    background-image: url(Image/Pink-Salt-500g_3000x.webp);
}