.range-of-products-page {
  width: 100%;
  padding: 2vw 0;
  background-color: #54595f;
}

.rangeproductwrapper {
  width: 80%;
  height: 100%;
  margin: auto;
  position: relative;
}

/* main heading of rang product */
.range-product-heading {
  width: 100%;
  height: 15%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #cccccc50;
}

.range-product-heading .subheading {
  display: flex;
  align-items: center;
  gap: 1vw;
}

.subheading i {
  font-size: 2.5vw;
  color: var(--primary-color);
  display: flex;
  justify-content: center;
}

.subheading h3 {
  font-size: 2.5vw;
  color: #fff;
  text-transform: uppercase;
}

.range-product-heading a {
  color: #fff;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1vw 2vw;
  border: 0.8px solid #fff;
  font-size: 18px;
  transition: all ease 0.3s;
}

/* 
.range-product-heading a:hover {
  background-color: var(--primary-color);
  color: #fff;
  border: none;
} */

.range-product-heading span {
  font-size: 18px;
}

/* end of range product main heading */

.range-product {
  background-image: var(--bg-image);
  background-color: #54595f;
  background-size: cover;
  position: relative;
  width: 100%;
  height: 15%;
  margin-bottom: 1vw;
  padding: 0 2vw;
  z-index: 1;
  /* background-color: #6b5d5d; */
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 0.8px solid #cccccc50;
  transition: all 0.5s ease;
}

/* .range-product:hover { */
/* z-index: 2; */
/* Bring the hovered product to the front */
/* } */

.range-product-desc {
  display: none;
  /* background: linear-gradient(45deg, black, transparent); */
  padding: 0.5vw;
  font-size: 1.2vw;
  background-color: #000000a2;
  border-radius: 0.5vw;
  color: #fff;
  /* Move the description down initially */
  transition: display 1s ease;
  width: 50%;
}

.range-product-head {
  transition: transform 0.5s ease;
  /* Add transition for smooth movement */
}

.range-product:hover .range-product-head {
  /* transform: translateY(-4vw); */
  /* Move the heading up on hover */
}

.range-product:hover .range-product-desc {
  /* opacity: 1; */
  display: block;
  /* transform: translateY(0); */
  /* Bring the description back into view */
}

/* .range-product::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000000a7;
  opacity: 0.1;
} */
.range-product::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 35%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.85),
    rgba(0, 0, 0, 0.6),
    rgba(0, 0, 0, 0.3),
    transparent
  );
  z-index: -1;
  /* Ensure the overlay stays behind the text */
  transition: opacity 0.5s ease;
}

/* .range-product::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; */
/* background-image: var(--bg-image); */
/* background-size: cover; */
/* background-position: center; */
/* background-color: #54595f; */
/* background-color: #000000bc;
  transition: opacity 0.4s ease;
  opacity: 0; */
/* Adjust this value for desired opacity z-index: 100;
  Ensure it stays behind the content transition: opacity 0.3s ease; */
/* } */

/* .range-product:hover::before {
  opacity: 0.7;
} */

/* product square image */

/* .range-product-image {
  position: absolute;
  top: -85%;
  border-radius: 0.5rem;
  right: 0;
  width: fit-content;
  height: 100%;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  transform: scale(0.9);
  z-index: 999;
} */

/* .range-product:hover>.range-product-image, */
/* .range-product:hover>.range-product-desc {
  opacity: 1;
  transform: scale(1);
} */

/* .range-product:hover { */
/* background-image: none !important; */
/* background-color: #54595f; */
/* } */

/* .range-product-head,
{
opacity: 1;
transition: all 0.3s ease;
/* Smooth fade out */
/* }  */
/* 
.range-product-desc {
  opacity: 0;
} */

/* .range-product:hover .range-product-head,
.range-product:hover .range-product-desc, */
/* { */
/* opacity: 1; */
/* Fades out the text elements */
/* pointer-events: none; */
/* Disables interaction */
/* } */

.range-product-head {
  display: flex;
  flex-direction: column;
  gap: 0.5vw;
}

.range-product-head .number {
  color: var(--primary-color);
  font-size: 2vw;
}

.range-product-head .product-name {
  color: #fff;
  font-weight: 600;
  font-size: 2vw;
}

.range-product-head .product-name:hover {
  color: #fff;
}

.range-product a {
  text-decoration: none;
  z-index: 100;
}

.range-product i {
  background-color: var(--primary-color);
  font-size: 2.5vw;
  color: #fff;
  /* border: 1px solid #000; */
  padding: 0.5vw 1vw;
}

@media (max-width: 768px) {
  .range-of-products-page {
    padding: 4vw 0;
  }

  .rangeproductwrapper {
    width: 90%;
    margin: 0 auto;
  }

  .range-product-heading {
    /* background-color: red; */
    height: 10%;
  }

  .range-product-heading .subheading i {
    font-size: 7vw;
  }

  .range-product-heading .subheading h3 {
    font-size: 7vw;
    line-height: 6vw;
  }

  .range-product-heading a {
    white-space: nowrap;
    padding: 1vw 2vw;
  }

  .range-product-heading a span {
    font-size: 4vw;
  }

  .range-product-heading a i {
    font-size: 4vw;
  }

  .range-product-heading a i:hover {
    color: #fff;
  }

  .range-product {
    flex-direction: column;
    justify-content: center;
    gap: 5vw;
    margin-bottom: 6vw;
  }

  .range-product-head {
    align-items: center;
    gap: 2vw;
  }

  .range-product-head .number,
  .range-product-head .product-name {
    font-size: 6vw;
  }
  .range-product-head .product-name {
    position: relative;
    z-index: 1;
  }

  .range-product-head .product-name::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background-color: #313437; */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.475), #313437);
    z-index: -1;
  }
  .range-product {
    height: 16%;
    background-position: center;
  }

  .range-product-desc {
    width: 100%;
    text-align: center;
    font-size: 3.5vw;
  }

  .range-product a i {
    font-size: 6vw;
    padding: 1vw 3vw;
  }

  .range-product::before {
    display: none;
  }
}