.main-product {
  /* height: 920px; */
  width: 100%;
  padding: 100px 0 0 0;
  /* padding-bottom: 50px; */
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

/*--------------------------------------------------------MAIN-----------------------------------------------------*/

/* .header-products-container {
  height: 200px;
  width: 80%;
  background-color: red;
  display: flex;
} */

.header-products {
  height: 600px;
  width: 100%;
  padding: 200px 18% 0 18%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  transition: 0.3s;
}
.header-products-mobile {
  height: 600px;
  width: 100%;
  padding: 200px 18% 0 18%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  transition: 0.3s;
}
.header-products-left-mobile {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.header-products-right-mobile {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.header-prod-left-text-mobile {
  font-size: 1em;
  font-weight: bolder;
  font-family: Montserrat;
  text-align: left;
  background: linear-gradient(
    109.6deg,
    rgb(6, 183, 249) 11.2%,
    rgb(25, 74, 236) 91.1%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.header-image-mobile {
  height: 100%;
  width: 100%;

  background-image: url("../../../Images/undraw_delivery_truck_vt6p_2.png");
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
  background-size: contain;
}
.header-products-right {
  height: 100%;
  width: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.header-prod-left-text {
  position: absolute;
  display: none;
  top: 0;
  left: 0;
  z-index: 2;
}

.header-image {
  height: 100%;
  width: 100%;

  background-image: url("../../../Images/productmain-image.png");
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
  background-size: contain;
}

.mp-container {
  height: 90%;
  width: 100%;
  padding: 100px 0 0 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
}
.mp-left {
  height: 100%;
  width: 40%;
  padding: 0 0 0 50px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mp-right {
  height: 100%;
  width: 60%;
  padding: 0 50px 0 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
.mp-image-container {
  height: 100%;
  width: 100%;
  /* padding: 50px 0 50px 0; */
  /* padding-left: 200px; */
  display: flex;
  justify-content: center;
  align-items: center;
}

.mp-text-container {
  /* height: 70%; */
  width: 90%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;

  font-family: Arial, sans-serif;
  font-size: 1em;
  font-weight: 400;
  /* text-align: left; */
  padding-bottom: 10px;
  color: #333;
}
.mp-text-container ol,
.mp-text-container ul {
  padding-inline-start: 40px;
}
.mp-button-container {
  height: 20%;
  width: 90%;
  gap: 30px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.mp-title-container {
  height: 20%;
  width: 90%;
  /* padding: 0 0 0 45px; */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;

  font-family: Montserrat;
  font-size: 3.5em;
  font-weight: bold;
}
.mp-rating-container {
  /* height: 20%; */
  width: 90%;
  gap: 10px;
  /* padding: 0 0 0 45px; */
  display: none;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;

  font-family: Montserrat;

  font-size: 1.2em;
  font-weight: 500;
}
.mp-rating-container:hover p {
  color: #1787ff;
  cursor: pointer;
}
.mp-rating {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
.mp-rating img {
  height: 25px;
  width: 25px;
}
.mp-rating-2 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding: 50px 0 0 0;
}
.mp-rating-2 img {
  height: 50px;
  width: 50px;
}

.rating-numbers {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
.rating-main {
  width: 100%;
  height: 100%;
  padding: 50px 30px 50px 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 1em;
  font-weight: 500;
}

.rating-text-title {
  width: 100%;
  height: 40px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
.rating-rate {
  width: 100%;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0, 0.1);
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
.rating-row {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.rating-box {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  /* background-color: #f3f1f1; */
  padding: 10px;
  box-shadow: 0px 0px 0px 2px rgba(0, 0, 0, 0.1);
}

/*--------------------------------------------------------MAIN-----------------------------------------------------*/

/*--------------------------------------------------------IMAGE-----------------------------------------------------*/
.mp-image {
  width: 100%;
  height: 100%;
  background-position: 50% 50%;
  background: none;
  background-size: cover;
  background-repeat: no-repeat;

  border-radius: 15px;

  z-index: 99;

  display: flex;
  justify-content: center;
  align-items: center;
}
/* .mp-image img {
  width: 100%;
  height: 100%;
  z-index: 2;
} */

.mp-image-3 {
  width: 100%;
  height: 100%;
  background-position: 50% 50%;
  background: none;
  background-size: cover;
  background-repeat: no-repeat;

  border-radius: 15px;

  z-index: 99;

  display: flex;
  justify-content: center;
  align-items: center;
}
.mp-image-3 img {
  width: 100%;
  height: 100%;
  z-index: 2;
}
.mp-image-4 {
  width: 100%;
  height: 100%;
  background-position: 50% 50%;
  background: none;
  background-size: cover;
  background-repeat: no-repeat;

  border-radius: 15px;

  z-index: 99;

  display: flex;
  justify-content: center;
  align-items: center;
}
.mp-image-4 img {
  width: 100%;
  height: 100%;
  z-index: 2;
}
.mp-circle {
  height: 450px;
  width: 450px;
  position: absolute;
  filter: blur(0.5px);
  background: #1787ff;
  border-radius: 10px;

  z-index: 9;
}
.mp-circle-1 {
  height: 480px;
  width: 490px;
  position: absolute;
  border: 1px solid #ccc;
  top: -3.4%;
  left: -4.5%;
  border-radius: 10px;

  z-index: 1;
  transition: 1.5s ease-in-out;
}

/* .mp-circle:hover .mp-circle-1 {
  animation: mpcircle 1.5s ease-in-out 1 forwards;
  animation-iteration-count: infinite;
}
.mp-image-container:hover .mp-circle-1 {
  animation: mpcircle 1.5s ease-in-out 1 forwards;
  animation-iteration-count: infinite;
} */

@keyframes mpcircle {
  0% {
    border: 1px solid #ccc;
    transform: scale(1);
  }
  50% {
    border: 1px solid #ccc;
    transform: scale(0.95);
  }
  70% {
    top: -3.4%;
  }
  100% {
    transform: scale(1);
    border: 0px solid #cccccc02;
  }
}

/*--------------------------------------------------------IMAGE-----------------------------------------------------*/

/*--------------------------------------------------------BUTTON-----------------------------------------------------*/
.mp-button-container .button1 {
  height: 50px;
  width: 200px;
  border-radius: 25px;
  margin: 0 10px;
  font-family: Montserrat;
  font-size: 1em;
  font-weight: 500;
  background: linear-gradient(
    -109.6deg,
    rgb(6, 183, 249) 11.2%,
    rgb(25, 74, 236) 91.1%
  );
  color: #fff;
  border: none;
  cursor: pointer;

  box-shadow: 0 25.6px 57.6px 0 rgb(0 0 0 / 22%),
    0 4.8px 14.4px 0 rgb(0 0 0 / 18%);
  transition: 0.3s ease-in-out;
}
.mp-button-container .button2 {
  height: 50px;
  width: 344px;
  font-family: Montserrat;
  border-radius: 3px;
  font-weight: bold;
  font-size: 1em;
  border: none;
  cursor: pointer;
  color: #fff;
  background-color: #1787ff;
  transition: 0.2s ease-in-out;
}

.mp-button-container .button1:hover {
  transform: scale(1.1);
}

.mp-button-container .button2:hover {
  border: 3px solid #1787ff;
  background-color: #fff;
  color: #1787ff;
}

.submit-update {
  height: 50px;
  width: 344px;
  font-family: Montserrat;
  border-radius: 3px;
  font-weight: bold;
  font-size: 1em;
  border: none;
  cursor: pointer;
  color: #fff;
  background-color: #1787ff;
  transition: 0.2s ease-in-out;
}
.submit-update:hover {
  border: 3px solid #1787ff;
  background-color: #fff;
  color: #1787ff;
}
/*--------------------------------------------------------BUTTON-----------------------------------------------------*/

/*--------------------------------------------------------TEXT-----------------------------------------------------*/
.mp-title-container .title-text {
  font-family: Montserrat;
  font-size: 3em;
  font-weight: 500;
}
.rateus-button {
  font-family: Montserrat;
  font-size: 1em;
  font-weight: 500;
  margin-left: 20px;
  background: transparent;

  border: none;
  cursor: pointer;
  box-shadow: none;
  color: #b9b9b9;
}
/*--------------------------------------------------------TEXT-----------------------------------------------------*/

/*--------------------------------------------------------Collapsible-----------------------------------------------------*/
.mp-collapsible-container {
  height: 80px;
  width: 100%;
  padding: 10px 0 10px 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.mp-collapsible-1 {
  height: 100%;
  width: 100%;
  /* padding: 10px 0 10px 0; */
  display: flex;
  justify-content: center;
  align-items: center;
}
.mp-collapsible-2 {
  height: 100%;
  width: 100%;
  /* padding: 10px 0 10px 0; */
  display: flex;
  justify-content: center;
  align-items: center;
}
.mp-collapsible-3 {
  height: 100%;
  width: 100%;

  display: flex;
  justify-content: center;
  align-items: center;
}
.mp-content-container {
  height: auto;
  width: 100%;
  padding: 30px 45px 30px 0;

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

  /* overflow-y: scroll; */
}
.mp-content-1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.mp-content-2 {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.mp-content-3 {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.mp-content-1 p {
  /* font-family: "Roboto";
  font-size: 1em; */
  /* text-align: left; */
  padding-bottom: 10px;
}
.mp-content-2 li {
  /* font-family: "Roboto";
  font-size: 1em; */
  /* text-align: left; */
  padding-bottom: 10px;
}

.mp-content-3 p {
  /* font-family: "Roboto";
  font-size: 1em; */
  /* text-align: left; */
  padding-bottom: 10px;
}

.mp-collapsible-1 button {
  height: 100%;
  width: 100%;
  font-family: Montserrat;
  font-size: 1em;
  font-weight: bolder;
  background-color: transparent;
  cursor: pointer;
  border: none;
  color: #1787ff;
  border-bottom: 5px solid #1787ff;
  transition: 0.3s ease-in-out;
}
.mp-collapsible-2 button {
  height: 100%;
  width: 100%;
  font-family: Montserrat;
  font-size: 1em;
  font-weight: bolder;
  background-color: transparent;
  cursor: pointer;
  border: none;
  color: rgba(128, 128, 128, 0.418);
  border-bottom: 5px solid rgba(128, 128, 128, 0.418);
  transition: 0.3s ease-in-out;
}
.mp-collapsible-3 button {
  height: 100%;
  width: 80%;
  font-family: Montserrat;
  font-size: 1.2;
  font-weight: bolder;
  background-color: transparent;
  cursor: pointer;
  border: none;
  color: rgba(128, 128, 128, 0.418);
  border-bottom: 5px solid rgba(128, 128, 128, 0.418);
  transition: 0.3s ease-in-out;
}

.mp-collapsible-1 button:hover {
  color: #1787ff;
  border-bottom: 5px solid #1787ff;
}
.mp-collapsible-2 button:hover {
  color: #1787ff;
  border-bottom: 5px solid #1787ff;
}
.mp-collapsible-3 button:hover {
  color: #1787ff;
  border-bottom: 5px solid #1787ff;
}
/*--------------------------------------------------------Collapsible-----------------------------------------------------*/

@media only screen and (max-width: 1350px) {
  .main-product {
    height: auto;
  }
  .mp-container {
    height: 100%;
    /* gap: 50px; */
    flex-direction: column;
  }
  .mp-image-container {
    padding-left: 0;
  }
  .mp-title-container {
    padding: 10px;
  }
  .mp-left,
  .mp-right {
    width: 100%;
    align-items: center;
  }
  .mp-left {
    margin-top: 0;
    padding: 0px;
  }

  .mp-right {
    padding: 0px;
  }
  .mp-circle {
    height: 350px;
    width: 350px;
    border-radius: 10px;
  }
  .mp-circle-1 {
    height: 400px;
    width: 400px;
    top: -6%;
    left: -7%;
    border-radius: 10px;
  }
  .prod-carousel {
    flex-direction: none;
  }
}
@media only screen and (max-width: 1750px) {
  .mp-left {
    /* padding: 0 0 0 10px; */
  }
}

@media only screen and (max-width: 850px) {
  .mp-title-container .title-text {
    font-family: Montserrat;
    font-size: 2.5em;
    font-weight: 500;
  }
}

@media (max-width: 600px) {
  .mp-image img {
    height: 80%;
    width: 80%;
  }
}

@media (max-width: 500px) {
  .mp-image img {
    height: 80%;
    width: 80%;
  }
  .mp-content-container {
    padding: 30px 20px 30px 20px;
  }
  .mp-title-container {
    font-size: 2.5em;
    align-items: left;
    font-weight: bold;
  }
}

@media (max-width: 375px) {
  .submit-update {
    width: 80%;
  }
  .mp-button-container .button2 {
    width: 80%;
  }
}

/*--------------------------------------------------------MORE PRODUCTS-----------------------------------------------------*/

.MoreProducts {
  height: auto;
  width: 90%;
  /* margin-top: 100px; */
  /* margin-top: 50px; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.MoreProd-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  background-image: url("../../../Images/backgroundfreepik2.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
  background-size: cover;
}
/*--------------------------------------------------------MAIN-----------------------------------------------------*/
.Moreprod-title-container {
  height: 10%;
  width: 100%;
  margin-top: 50px;
  margin-bottom: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.Moreprod-contents-container {
  height: 90%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.Moreprod-note {
  /* height: 50%; */
  width: 70%;
  padding: 0 0 30px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-family: Montserrat;
  font-size: 1.2em;
}

.Moreprod-note a {
  font-family: Montserrat;
  font-size: 1.2em;
  text-align: center;
  color: #222222;
  font-weight: bold;
  cursor: pointer;
  text-decoration: none;
  border: none;
  background-color: transparent;

  transition: 0.1s ease-in-out;
}
.Moreprod-note a:hover {
  border-bottom: 5px solid #1787ff;
}
.Moreprod-top {
  height: 50%;
  width: 100%;
  gap: 50px;
  padding: 0 0 30px 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.Moreprod-bottom {
  height: 50%;
  width: 100%;
  gap: 50px;
  padding: 0 0 30px 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.Moreprod-contents {
  height: 100%;
  width: 20%;
  border-radius: 15px;
  padding: 3.5% 1% 3.5% 1%;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: relative;
  background-color: #fff;
  box-shadow: 0 25.6px 57.6px 0 rgb(0 0 0 / 22%),
    0 4.8px 14.4px 0 rgb(0 0 0 / 18%);
}

.Moreprod-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.Moreprod-wrapper #Moreprod-right,
.Moreprod-wrapper #Moreprod-left {
  /* bottom: 10%; */
  height: 50px;
  width: 50px;
  cursor: pointer;
  font-size: 2rem;
  position: absolute;
  top:50%;
  text-align: justify;
  line-height: 50px;
  color: #222222;
  border-radius: 50%;
  /* box-shadow: 0 3px 6px rgba(0, 0, 0, 0.23); */
  transform: translateY(-50%);
  transition: transform 0.1s linear;
  z-index: 10;
  transition: 0.2s ease-in-out;
}
.Moreprod-wrapper #Moreprod-left:hover,
.Moreprod-wrapper #Moreprod-right:hover {
  font-size: 2.5rem;
}

.Moreprod-wrapper i:active {
  transform: translateY(-50%) scale(0.85);
}
.Moreprod-wrapper i:first-child {
  left: 3%;
}
.Moreprod-wrapper i:last-child {
  right: 0%;
}
.Moreprod-wrapper .Moreprod-carousel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% / 3) - 12px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  height: 100%;
  width: 100%;
  gap: 40px;
  border-radius: 8px;
  scroll-behavior: smooth;
  scrollbar-width: none;
  z-index: 1;
  padding: 56px;
}
.Moreprod-carousel::-webkit-scrollbar {
  display: none;
}
.Moreprod-carousel.no-transition {
  scroll-behavior: auto;
}
.Moreprod-carousel.dragging {
  scroll-snap-type: none;
  scroll-behavior: auto;
}
.Moreprod-carousel.dragging .Moreprod-contents-container-425 {
  cursor: grab;
  user-select: none;
}
.Moreprod-carousel :where(.Moreprod-contents-container-425, .img) {
  display: flex;
  justify-content: center;
  align-items: center;
}
.Moreprod-carousel .Moreprod-contents-container-425 {
  scroll-snap-align: start;
  height: 100%;
  width: 100%;
  list-style: none;
  background: #fff;
  cursor: pointer;
  flex-direction: column;
  border-radius: 15px;
  z-index: 100;
  overflow: hidden;
  position: relative;
  box-shadow: 0 25.6px 57.6px 0 rgb(0 0 0 / 22%),
    0 4.8px 14.4px 0 rgb(0 0 0 / 18%);
  transition: 0.2s ease-in-out;
  border: 0px solid #1787ff;
}

.Moreprod-carousel .Moreprod-contents-container-425 .img {
  background: #8b53ff;
  height: 148px;
  width: 148px;
  border-radius: 50%;
}
.Moreprod-contents-container-425 .img img {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #fff;
}
.Moreprod-carousel .Moreprod-contents-container-425 h2 {
  font-weight: 500;
  font-size: 1.56rem;
  margin: 30px 0 5px;
}
.Moreprod-carousel .Moreprod-contents span {
  color: #6a6d78;
  font-size: 1.31rem;
}
@media screen and (max-width: 900px) {
  .Moreprod-wrapper .Moreprod-carousel {
    grid-auto-columns: calc((100% / 2) - 9px);
  }
}
@media screen and (max-width: 600px) {
  .Moreprod-wrapper .Moreprod-carousel {
    grid-auto-columns: 100%;
  }
}
.Moreprod-contents-container-425 {
  height: 100%;
  width: 100%;
  cursor: pointer;

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

  border-radius: 15px;
  /* 
  box-shadow: 0 25.6px 57.6px 0 rgb(0 0 0 / 22%),
    0 4.8px 14.4px 0 rgb(0 0 0 / 18%); */

  background-color: #fff;
  transition: 0.1s ease-in-out;
}

/*--------------------------------------------------------MAIN-----------------------------------------------------*/

/*--------------------------------------------------------IMAGE-----------------------------------------------------*/

.Moreprod-image-8 img,
.Moreprod-image-7 img,
.Moreprod-image-6 img,
.Moreprod-image-5 img,
.Moreprod-image-4 img,
.Moreprod-image-3 img,
.Moreprod-image-2 img,
.Moreprod-image img {
  width: 70%;
  height: 60%;
  background-position: center;
  background: none;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  transition: 0.3s ease-in-out;
  border-radius: 15px;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  z-index: 2;
}
/* .Moreprod-image-2 img {
  width: 60%;
  height: 60%;
  background-position: center;
  background: none;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  transition: 0.3s ease-in-out;
  border-radius: 15px;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  z-index: 2;
}
.Moreprod-image-3 img {
  width: 60%;
  height: 60%;
  background-position: center;
  background: none;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  transition: 0.3s ease-in-out;
  border-radius: 15px;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  z-index: 2;
}
.Moreprod-image-4 img {
  width: 60%;
  height: 60%;
  background-position: center;
  background: none;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  transition: 0.3s ease-in-out;
  border-radius: 15px;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  z-index: 2;
}
.Moreprod-image-5 img {
  width: 60%;
  height: 60%;
  background-position: center;
  background: none;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  transition: 0.3s ease-in-out;
  border-radius: 15px;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  z-index: 2;
}
.Moreprod-image-6 img {
  width: 60%;
  height: 60%;
  background-position: center;
  background: none;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  transition: 0.3s ease-in-out;
  border-radius: 15px;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  z-index: 2;
}
.Moreprod-image-7 img {
  width: 60%;
  height: 60%;
  background-position: center;
  background: none;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  transition: 0.3s ease-in-out;
  border-radius: 15px;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  z-index: 2;
}
.Moreprod-image-8 img {
  width: 60%;
  height: 60%;
  background-position: center;
  background: none;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  transition: 0.3s ease-in-out;
  border-radius: 15px;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  z-index: 2;
} */
.Moreprod-circle {
  height: 60%;
  width: 70%;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  border-radius: 50%;
  background: linear-gradient(
    -109.6deg,
    rgb(6, 183, 249) 11.2%,
    rgb(25, 74, 236) 91.1%
  );
  z-index: 1;
  transition: 0.3s ease-in-out;
}

.Moreprod-contents:hover .Moreprod-circle {
  transform: scale(4);
  z-index: 1;
}
.Moreprod-contents:hover .Moreprod-image-8 img,
.Moreprod-contents:hover .Moreprod-image-7 img,
.Moreprod-contents:hover .Moreprod-image-6 img,
.Moreprod-contents:hover .Moreprod-image-5 img,
.Moreprod-contents:hover .Moreprod-image-4 img,
.Moreprod-contents:hover .Moreprod-image-3 img,
.Moreprod-contents:hover .Moreprod-image-2 img,
.Moreprod-contents:hover .Moreprod-image img {
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  z-index: 2;
}

.Moreprod-contents:hover .Moreprod-text p {
  color: #fff;
}

/*--------------------------------------------------------IMAGE-----------------------------------------------------*/

/*--------------------------------------------------------TEXT-----------------------------------------------------*/
.Moreprod-title-container P {
  font-family: Montserrat;
  font-size: 2em;
  font-weight: bolder;

  /* margin-bottom: 50px; */

  background: linear-gradient(
    109.6deg,
    rgb(6, 183, 249) 11.2%,
    rgb(25, 74, 236) 91.1%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.Moreprod-titlemain-container P {
  font-family: Montserrat;
  font-size: 2.5em;
  font-weight: bolder;

  margin-bottom: 50px;

  background: linear-gradient(
    109.6deg,
    rgb(6, 183, 249) 11.2%,
    rgb(25, 74, 236) 91.1%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.Moreprod-text p {
  font-family: Montserrat;
  font-size: 2em;
  font-weight: bold;
  margin-top: 230px;
  position: relative;
  z-index: 3;
  transition: 0.2s ease-in-out;
}
/*--------------------------------------------------------TEXT-----------------------------------------------------*/

@mixin aspect-ratio($width, $height) {
  position: relative;

  &:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: ($height / $width) * 100%;
  }
}

.prod-container {
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
}

.prod-carousel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  text-align: left;
  position: relative;
  margin-bottom: 22px;
  /* width: 10%; */
  > input {
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;

    &:nth-of-type(6):checked
      ~ .prod-carousel__slides
      .prod-carousel__slide:first-of-type {
      /* padding: 0 0 50px 0; */
      margin-left: -500%;
    }
    &:nth-of-type(5):checked
      ~ .prod-carousel__slides
      .prod-carousel__slide:first-of-type {
      /* padding: 0 0 50px 0; */
      margin-left: -400%;
    }
    &:nth-of-type(4):checked
      ~ .prod-carousel__slides
      .prod-carousel__slide:first-of-type {
      /* padding: 0 0 50px 0; */
      margin-left: -300%;
    }
    &:nth-of-type(3):checked
      ~ .prod-carousel__slides
      .prod-carousel__slide:first-of-type {
      /* padding: 0 0 50px 0; */
      margin-left: -200%;
    }
    &:nth-of-type(2):checked
      ~ .prod-carousel__slides
      .prod-carousel__slide:first-of-type {
      /* padding: 0 0 50px 0; */
      margin-left: -100%;
    }
    &:nth-of-type(1):checked
      ~ .prod-carousel__slides
      .prod-carousel__slide:first-of-type {
      /* padding: 0 0 50px 0; */
      margin-left: 0%;
    }

    &:nth-of-type(1):checked ~ .prod-carousel__thumbnails li:nth-of-type(1) {
      border-radius: 5px;
      box-shadow: 0px 0px 0px 5px #1787ff;
    }
    &:nth-of-type(2):checked ~ .prod-carousel__thumbnails li:nth-of-type(2) {
      border-radius: 5px;
      box-shadow: 0px 0px 0px 5px #1787ff;
    }
    &:nth-of-type(3):checked ~ .prod-carousel__thumbnails li:nth-of-type(3) {
      border-radius: 5px;
      box-shadow: 0px 0px 0px 5px #1787ff;
    }
    &:nth-of-type(4):checked ~ .prod-carousel__thumbnails li:nth-of-type(4) {
      border-radius: 5px;
      box-shadow: 0px 0px 0px 5px #1787ff;
    }
    &:nth-of-type(5):checked ~ .prod-carousel__thumbnails li:nth-of-type(5) {
      border-radius: 5px;
      box-shadow: 0px 0px 0px 5px #1787ff;
    }
    &:nth-of-type(6):checked ~ .prod-carousel__thumbnails li:nth-of-type(6) {
      border-radius: 5px;
      box-shadow: 0px 0px 0px 5px #1787ff;
    }
  }
}

.prod-carousel__slides {
  position: relative;
  z-index: 1;
  padding: 0;
  margin: 0;
  /* padding: 50px 0 50px 0; */
  overflow: hidden;
  white-space: nowrap;
  box-sizing: border-box;
  display: flex;
  /* justify-content: center; */
  align-items: center;
  width: 100%;
}
.prod-carousel__thumbnails {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: flex-end;
  gap: 20px;
  margin: 0 -10px;
  padding: 0 0 0 0;
  width: 100%;

  /* padding-left: 200px; */
  .prod-carousel__slides + & {
    margin-bottom: 40px;
  }
}

.prod-carousel__thumbnails li {
  border-radius: 5px;
  border: 5px solid #ddd;
}

.prod-carousel__slide {
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  flex: 1 0 100%;
  padding: 0 0 20px 0;
  /* width: 100%; */
  height: 100%;
  overflow: hidden;
  transition: all 300ms ease-out;
  vertical-align: top;
  box-sizing: border-box;
  white-space: normal;

  &.scrollable {
    overflow-y: scroll;
  }
}

.prod-carousel__thumbnails img {
  height: 100px;
  width: 100px;
}
@media only screen and (max-width: 1660px) {
  .Moreprod-note {
    width: 90%;
  }
  /* .mp-left {
    width: 50%;
  }
  .mp-right {
    width: 50%;
  } */
  .MoreProducts {
    width: 100%;
  }
}
@media only screen and (max-width: 1600px) {
  .mp-left {
    width: 40%;
  }
  .mp-right {
    width: 60%;
  }
}
@media only screen and (max-width: 1500px) {
  .Moreprod-top {
    height: 350px;
  }
  .Moreprod-bottom {
    height: 350px;
  }
}

@media only screen and (max-width: 1440px) {
  .mp-left {
    width: 45%;
  }
}

@media only screen and (max-width: 1350px) {
  .prod-carousel__slide {
    padding: 0;
  }

  .mp-container {
    padding: 0;
  }
  .header-products {
    padding: 200px 10% 0 10%;
  }
  .prod-carousel {
    display: block;
    flex-direction: column;
    justify-content: none;
    align-items: none;
  }
  .prod-carousel__thumbnails {
    flex-direction: row;
    .prod-carousel__slides + & {
      margin-top: 50px;
      margin-bottom: 0;
      margin-left: 0;
    }
  }
  .Moreprod-title-container {
    margin-top: 50px;
  }
  .mp-left {
    width: 100%;
  }
  .mp-right {
    width: 100%;
  }
  .prod-carousel__slide {
    justify-content: center;
    align-items: center;
  }
  .prod-carousel__thumbnails {
    justify-content: center;
    align-items: center;
  }
}

@media only screen and (max-width: 1350px) {
  .prod-carousel__slides {
    padding: 50px 0 0 0;
  }
  .mp-image img{
    width: 90%;
    height:90%;
    /* padding: 0 0 50px 0; */
  }
}

@media only screen and (max-width: 1300px) {
  .Moreprod-contents {
    /* width: 30%; */
    padding: 2% 1% 2% 1%;
  }
  .Moreprod-top {
    height: 300px;
  }
  .Moreprod-bottom {
    height: 300px;
  }
}

@media only screen and (max-width: 1200px) {
  .Moreprod-contents {
    /* width: 30%; */
    padding: 1%;
  }
  .Moreprod-top {
    gap: 30px;
  }
  .Moreprod-bottom {
    gap: 30px;
  }
  .Moreprod-text p {
    font-size: 1.5em;
  }
}

@media only screen and (max-width: 1024px) {
  .Moreprod-contents-container {
    height: 60%;
  }
  /* .Moreprod-contents {
    height: 50%;
    padding: 30px 10px 30px 10px;
  } */
  .header-products {
    padding: 200px 10% 0 10%;
  }
  .header-prod-left-text {
    position: absolute;
    left: 20%;
  }

  .header-prod-left-text p {
    font-size: 2.5em;
  }

  .MoreProducts {
    margin-top: 20px;
    /* height: 900px; */
    justify-content: flex-start;
  }

  .Moreprod-circle {
    height: 150px;
    width: 150px;
  }
  .Moreprod-image-8 img,
  .Moreprod-image-7 img,
  .Moreprod-image-6 img,
  .Moreprod-image-5 img,
  .Moreprod-image-4 img,
  .Moreprod-image-3 img,
  .Moreprod-image-2 img,
  .Moreprod-image img {
    height: 150px;
    width: 150px;
    background-size: contain;
  }
  .Moreprod-text p {
    margin-top: 160px;
    font-size: 1.5em;
  }
  .Moreprod-titlemain-container P {
    font-size: 2em;
  }
}

@media only screen and (max-width: 980px) {
  .main-product {
    padding: 0px;
  }
}

@media only screen and (max-width: 900px) {
  .header-products {
    height: 500px;
    padding: 100px 5% 0 5%;
  }
  .header-products-left {
    width: 10%;
  }
  .header-products-right {
    width: 90%;
    padding-top: 0;
  }

  .header-prod-left-text {
    position: absolute;
    top: 8%;
    left: 30px;
  }
  .header-image {
    height: 400px;
    width: 700px;
  }

  .header-prod-left-text p {
    font-size: 2em;
  }
  .Moreprod-note {
    width: 100%;
  }
  .Moreprod-top,
  .Moreprod-bottom {
    height: 40%;
    margin-bottom: 30px;
    gap: 20px;
  }
  .Moreprod-circle {
    height: 100px;
    width: 100px;
  }
  .Moreprod-image-8 img,
  .Moreprod-image-7 img,
  .Moreprod-image-6 img,
  .Moreprod-image-5 img,
  .Moreprod-image-4 img,
  .Moreprod-image-3 img,
  .Moreprod-image-2 img,
  .Moreprod-image img {
    height: 100px;
    width: 100px;
    background-size: contain;
  }
  .Moreprod-text p {
    margin-top: 130px;
    font-size: 1em;
  }
  .Moreprod-titlemain-container P {
    font-size: 2em;
  }
  .Moreprod-title-container P {
    font-family: Montserrat;
    font-size: 1.5em;
    font-weight: bolder;
  }
  .Moreprod-title-container {
    margin-bottom: 20px;
  }
}

@media only screen and (max-width: 600px) {
  .prod-carousel__slides {
    padding: 20px 0 20px 0;
  }
  .mp-circle {
    border: 2px solid #ccc;
  }
  .mp-circle-1 {
    display: none;
  }
  .mp-image {
padding: 20px 0 0 0;
  }
}


@media only screen and (max-width: 500px) {
  
  .mp-container {
    padding: 0 0 0 0;
  }

  .prod-carousel__slides {
    padding: 50px 0 50px 0;
  }

  /* .prod-carousel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    text-align: left;
    position: relative;
    margin-bottom: 22px;
    > input {
      clip: rect(1px, 1px, 1px, 1px);
      clip-path: inset(50%);
      height: 1px;
      width: 1px;
      margin: -1px;
      overflow: hidden;
      padding: 0;
      position: absolute;

      &:nth-of-type(6):checked
        ~ .prod-carousel__slides
        .prod-carousel__slide:first-of-type {
        padding: 50px 0 50px 0;
        margin-left: -500%;
      }
      &:nth-of-type(5):checked
        ~ .prod-carousel__slides
        .prod-carousel__slide:first-of-type {
        padding: 50px 0 50px 0;
        margin-left: -400%;
      }
      &:nth-of-type(4):checked
        ~ .prod-carousel__slides
        .prod-carousel__slide:first-of-type {
        padding: 50px 0 50px 0;
        margin-left: -300%;
      }
      &:nth-of-type(3):checked
        ~ .prod-carousel__slides
        .prod-carousel__slide:first-of-type {
        padding: 50px 0 50px 0;
        margin-left: -200%;
      }
      &:nth-of-type(2):checked
        ~ .prod-carousel__slides
        .prod-carousel__slide:first-of-type {
        padding: 50px 0 50px 0;
        margin-left: -100%;
      }
      &:nth-of-type(1):checked
        ~ .prod-carousel__slides
        .prod-carousel__slide:first-of-type {
        padding: 50px 0 50px 0;
        margin-left: 0%;
      }

      &:nth-of-type(1):checked ~ .prod-carousel__thumbnails li:nth-of-type(1) {
        border-radius: 5px;
        box-shadow: 0px 0px 0px 5px #1787ff;
      }
      &:nth-of-type(2):checked ~ .prod-carousel__thumbnails li:nth-of-type(2) {
        border-radius: 5px;
        box-shadow: 0px 0px 0px 5px #1787ff;
      }
      &:nth-of-type(3):checked ~ .prod-carousel__thumbnails li:nth-of-type(3) {
        border-radius: 5px;
        box-shadow: 0px 0px 0px 5px #1787ff;
      }
      &:nth-of-type(4):checked ~ .prod-carousel__thumbnails li:nth-of-type(4) {
        border-radius: 5px;
        box-shadow: 0px 0px 0px 5px #1787ff;
      }
      &:nth-of-type(5):checked ~ .prod-carousel__thumbnails li:nth-of-type(5) {
        border-radius: 5px;
        box-shadow: 0px 0px 0px 5px #1787ff;
      }
      &:nth-of-type(6):checked ~ .prod-carousel__thumbnails li:nth-of-type(6) {
        border-radius: 5px;
        box-shadow: 0px 0px 0px 5px #1787ff;
      }
    }
  } */
}

@media only screen and (max-width: 700px) {
  /* .Moreprod-wrapper{
    background-image: linear-gradient(to right, #00000000 , #00000067);
  } */
  .header-products {
    height: 370px;
  }
  #Moreprod-left,
  #Moreprod-right {
    /* opacity: 0; */
  }
  .Moreprod-note {
    width: 90%;
  }
  .header-products {
    flex-direction: column;
  }
  .header-image {
    height: 300px;
    width: 500px;
  }
  .header-products-left {
    height: 100%;
    width: 100%;
  }
  .header-products-left {
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  .header-prod-left-text {
    position: relative;
    top: 0;
    left: 0;
  }
  .Moreprod-titlemain-container P {
    font-size: 2em;
  }
  .Moreprod-contents-container {
    gap: 20px;
    display: none;
    flex-direction: row;
  }
  .Moreprod-contents-container-425 {
    display: flex;
    background-color: transparent;
  }
  .Moreprod-top {
    flex-direction: column;
    padding: 0;
  }
  .Moreprod-bottom {
    flex-direction: column;
    padding: 0;
  }
  .MoreProducts {
    margin-top: 20px;
    height: auto;
  }
  .Moreprod-contents {
    height: 100%;
    width: 100%;
  }
  .Moreprod-text p {
    margin-top: 130px;
    font-size: 1em;
  }
  .Moreprod-wrapper .Moreprod-carousel {
    grid-auto-columns: calc((100% / 3) - 5px);
  }
  .prod-carousel__thumbnails img {
    height: 80px;
    width: 80px;
  }
}

@media only screen and (max-width: 600px) {
  .prod-carousel__thumbnails {
    .prod-carousel__slides + & {
        margin-top: 0;
        margin-bottom: 0;
        margin-left: 0;
    }
}

}

@media only screen and (max-width: 500px) {
  .header-products {
    display: none;
  }
  .MoreProducts {
    margin-top: 20px;
  }
  .mp-button-container {
    flex-direction: column;
  }
}
@media only screen and (max-width: 550px) {
  .Moreprod-wrapper .Moreprod-carousel {
    grid-auto-columns: calc((100% / 2) - 5px);
  }
  .Moreprod-titlemain-container P {
    font-size: 1.5em;
    margin-bottom: 10px;
  }
}

@media only screen and (max-width: 450px) {
  .prod-carousel__thumbnails img {
    height: 50px;
    width: 50px;
  }
  .mp-circle {
    border: 2px solid #ccc;
  }
  .mp-circle-1 {
    display: none;
  }
}

@media only screen and (max-width: 400px) {
  .mp-image img{
    padding: 20px 0 20px 0;
  }
  .prod-carousel__slides {
    padding: 0;
}
  .header-prod-left-text p {
    font-size: 1.5em;
  }
  .header-products-left {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  .header-prod-left-text {
    position: relative;
    top: 0;
    left: 0;
  }
  .Moreprod-titlemain-container P {
    font-size: 1em;
  }
  .Moreprod-contents-container {
    flex-direction: column;
    padding: 0 5px 0 5px;
  }
  .Moreprod-contents {
    width: 100%;
  }
  .Moreprod-note {
    font-size: 0.8em;
  }
  .mp-circle {
    height: 250px;
    width: 250px;
  }

  .mp-circle-1 {
    height: 300px;
    width: 300px;
    top: -10%;
    left: -10%;
  }
  .Moreprod-contents:hover .Moreprod-circle {
    transform: translate(-20%, -50%);
    transform: scale(4);
  }
  .Moreprod-wrapper .Moreprod-carousel {
    grid-auto-columns: calc((100% / 1) - 9px);
  }

  .prod-carousel__thumbnails img {
    height: 50px;
    width: 50px;
  }
}



.disabled-prod {
  pointer-events: none;
  opacity: 0.5; /* Optional: to visually indicate that it's disabled */
}