.ban {
  width: 80%;
  height: 33vw;
  background: url(/img/Banners/Our\ PRODUCT\ RANGE.png) center center no-repeat;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 130px;
  z-index: 1;
}

.lineitem {
  margin: 8vh 0;
  height: 0.5vh;
  width: 5vh;
  border-radius: 2dvh;
  background-color: var(--ThemeColor-);
}

.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;
  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;
}

.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(/img/range/ourrangerange/ricepic.png) center no-repeat;
  background-size: 100%;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.OurRange .row12 .Picture {
  background: url("/img/range/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(/img/Image/Pink-Salt-800g-Coarse_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);
}