/* Product Card CSS */

.product-card-con {
  display: flex;
  gap: 25px;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.product-card {
  position: relative;
  width: 550px;
  height: 350px;
  border-radius: 20px;
  display: grid;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  transition: var(--transition-speed);
}

.card-circle {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  overflow: hidden;
  transition: 0.15s ease-in;
}

.card-circle::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #1ecac1;
  clip-path: circle(120px at center);
  transition: var(--transition-speed);
}

.product-card:hover .card-circle::before {
  background: #0a7be4;
  clip-path: circle(400px at center);
}

.product-card:hover .card-circle {
  transition: 1.1s ease;
  box-shadow: -10px 10px 1px rgba(0, 0, 0, 0.4);
}

.product-card .product-card-content {
  position: relative;
  text-align: center;
  width: 50%;
  left: 20%;
  padding: 20px 20px 20px 40px;
  transition: 0.4s;
  opacity: 0;
  visibility: hidden;
}

.product-card:hover .product-card-content {
  left: 0;
  opacity: 1;
  color: white;
  visibility: visible;
}

.product-card .product-card-content h2 {
  text-transform: uppercase;
  font-size: 2em;
  line-height: 1em;
  margin-bottom: 5px;
}

.product-card .product-card-content a {
  position: relative;
  padding: 10px 20px;
  border-radius: 10px;
  background-color: white;
  color: #111;
  margin-top: 10px;
  display: inline-block;
  text-decoration: none;
  font-weight: 700;
}

/* IMAGE SIZE VARIBLES */

.imageSize-1 {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 105px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: var(--transition-speed);
}

.product-card:hover .imageSize-1 {
  left: 77%;
  height: 115px;
}

.imageSize-2 {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 175px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: var(--transition-speed);
}

.product-card:hover .imageSize-2 {
  left: 75%;
  height: 220px;
}

.imageSize-3 {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 140px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: var(--transition-speed);
}

.product-card:hover .imageSize-3 {
  left: 75%;
  height: 165px;
}

.imageSize-4 {
  position: absolute;
  top: 50%;
  left: 51%;
  height: 140;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: var(--transition-speed);
}

.product-card:hover .imageSize-4 {
  left: 75%;
  height: 170px;
}

.imageSize-5 {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 180px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: var(--transition-speed);
}

.product-card:hover .imageSize-5 {
  left: 75%;
  height: 220px;
}

.imageSize-6 {
  position: absolute;
  top: 50%;
  left: 52.5%;
  height: 230px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: var(--transition-speed);
}

.product-card:hover .imageSize-6 {
  left: 75%;
  height: 280px;
}

.imageSize-7 {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 190px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: var(--transition-speed);
}

.product-card:hover .imageSize-7 {
  left: 75%;
  height: 240px;
}

.imageSize-8 {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 200px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: var(--transition-speed);
}

.product-card:hover .imageSize-8 {
  left: 75%;
  height: 230px;
}

.imageSize-9 {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 115px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: var(--transition-speed);
}

.product-card:hover .imageSize-9 {
  left: 75%;
  height: 140px;
}

/* DRINK PRODUCTS */

.drinkSize-1 {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 175px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: var(--transition-speed);
}

.product-card:hover .drinkSize-1 {
  left: 75%;
  height: 250px;
}

.drinkSize-2 {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 175px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: var(--transition-speed);
}

.product-card:hover .drinkSize-2 {
  left: 75%;
  height: 250px;
}

.drinkSize-3 {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 175px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: var(--transition-speed);
}

.product-card:hover .drinkSize-3 {
  left: 75%;
  height: 250px;
}

.drinkSize-4 {
  position: absolute;
  top: 50%;
  left: 49.3%;
  height: 175px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: var(--transition-speed);
}

.product-card:hover .drinkSize-4 {
  left: 75%;
  height: 260px;
}

.drinkSize-5 {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 200px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: var(--transition-speed);
}

.product-card:hover .drinkSize-5 {
  left: 75%;
  height: 280px;
}

.drinkSize-6 {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 230px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: var(--transition-speed);
}

.product-card:hover .drinkSize-6 {
  left: 75%;
  height: 280px;
}

.drinkSize-7 {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 190px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: var(--transition-speed);
}

.product-card:hover .drinkSize-7 {
  left: 75%;
  height: 280px;
}

.drinkSize-8 {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 200px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: var(--transition-speed);
}

.product-card:hover .drinkSize-8 {
  left: 75%;
  height: 280px;
}

.drinkSize-9 {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 200px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: var(--transition-speed);
}

.product-card:hover .drinkSize-9 {
  left: 75%;
  height: 280px;
}

/* BIRTHDAY PRODUCTS */

.birthdayImageSize-1 {
  position: absolute;
  top: 50%;
  left: 51%;
  height: 190px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: var(--transition-speed);
}

.product-card:hover .birthdayImageSize-1 {
  left: 75%;
  height: 240px;
}

.birthdayImageSize-2 {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 150px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: var(--transition-speed);
}

.product-card:hover .birthdayImageSize-2 {
  left: 75%;
  height: 200px;
}

.birthdayImageSize-3 {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 170px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: var(--transition-speed);
}

.product-card:hover .birthdayImageSize-3 {
  left: 75%;
  height: 220px;
}

.birthdayImageSize-4 {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 160px;
  transform: translate(-50%, -50%) rotateZ(10deg);
  pointer-events: none;
  transition: var(--transition-speed);
}

.product-card:hover .birthdayImageSize-4 {
  left: 75%;
  height: 230px;
}

.birthdayImageSize-5 {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 130px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: var(--transition-speed);
}

.product-card:hover .birthdayImageSize-5 {
  left: 75%;
  height: 150px;
}

.birthdayImageSize-6 {
  position: absolute;
  top: 50%;
  left: 51%;
  height: 200px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: var(--transition-speed);
}

.product-card:hover .birthdayImageSize-6 {
  left: 75%;
  height: 280px;
}

.birthdayImageSize-7 {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 190px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: var(--transition-speed);
}

.product-card:hover .birthdayImageSize-7 {
  left: 75%;
  height: 240px;
}

.birthdayImageSize-8 {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 200px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: var(--transition-speed);
}

.product-card:hover .birthdayImageSize-8 {
  left: 75%;
  height: 230px;
}

.birthdayImageSize-9 {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 115px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: var(--transition-speed);
}

.product-card:hover .birthdayImageSize-9 {
  left: 75%;
  height: 140px;
}

/* CARD COLOURS */

.card-circle-2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  overflow: hidden;
  transition: 0.15s ease-in;
}

.card-circle-2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #d87b10;
  clip-path: circle(120px at center);
  transition: var(--transition-speed);
}

.product-card:hover .card-circle-2::before {
  background: #c53e09;
  clip-path: circle(400px at center);
}

.product-card:hover .card-circle-2 {
  transition: 1.1s ease;
  box-shadow: -10px 10px 1px rgba(0, 0, 0, 0.4);
}

.card-circle-3 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  overflow: hidden;
  transition: 0.15s ease-in;
}

.card-circle-3::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #d40980;
  clip-path: circle(120px at center);
  transition: var(--transition-speed);
}

.product-card:hover .card-circle-3::before {
  background: #8608cf;
  clip-path: circle(400px at center);
}

.product-card:hover .card-circle-3 {
  transition: 1.1s ease;
  box-shadow: -10px 10px 1px rgba(0, 0, 0, 0.4);
}

/* Little Boi Screens */
@media only screen and (max-width: 991px) {
  .product-card {
    width: auto;
    max-width: 350px;
    align-items: flex-start;
    margin: 10px;
  }

  .product-card:hover {
    height: 600px;
  }

  .product-card .product-card-content {
    width: 100%;
    left: -9%;
    padding: 30px;
    transition: var(--transition-speed);
  }

  .product-card:hover .product-card-content {
    left: -9%;
  }

  /* Menu Resizes */

  .product-card:hover .imageSize-1 {
    top: 70%;
    left: 50%;
    padding-top: 25px;
    height: 175px;
  }

  .product-card:hover .imageSize-2 {
    top: 70%;
    left: 50%;
    padding-top: 25px;
    height: 250px;
  }

  .product-card:hover .imageSize-3 {
    top: 70%;
    left: 50%;
    padding-top: 25px;
    height: 210px;
  }

  .product-card:hover .imageSize-4 {
    top: 70%;
    left: 51%;
    padding-top: 25px;
    height: 210px;
  }

  .product-card:hover .imageSize-5 {
    top: 70%;
    left: 50%;
    padding-top: 25px;
    height: 250px;
  }

  .imageSize-5 {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 210px;
    transform: translate(-50%, -50%);
    pointer-events: none;
    transition: var(--transition-speed);
  }

  .imageSize-6 {
    left: 54%;
  }

  .product-card:hover .imageSize-6 {
    top: 70%;
    left: 54%;
    padding-top: 25px;
    height: 300px;
  }

  .product-card:hover .imageSize-7 {
    top: 70%;
    left: 50%;
    padding-top: 25px;
    height: 300px;
  }

  .product-card:hover .imageSize-8 {
    top: 70%;
    left: 50%;
    padding-top: 25px;
    height: 270px;
  }

  .product-card:hover .imageSize-9 {
    top: 70%;
    left: 50%;
    padding-top: 25px;
    height: 200px;
  }

  /* Drinks Resizes */

  .product-card:hover .drinkSize-1 {
    top: 70%;
    left: 50%;
    padding-top: 25px;
    height: 225px;
  }

  .product-card:hover .drinkSize-2 {
    top: 70%;
    left: 50%;
    padding-top: 25px;
    height: 225px;
  }

  .product-card:hover .drinkSize-3 {
    top: 70%;
    left: 50%;
    padding-top: 25px;
    height: 225px;
  }

  .product-card:hover .drinkSize-4 {
    top: 70%;
    left: 50%;
    padding-top: 25px;
    height: 250px;
  }

  .product-card:hover .drinkSize-5 {
    top: 70%;
    left: 50%;
    padding-top: 25px;
    height: 240px;
  }

  .product-card:hover .drinkSize-6 {
    top: 70%;
    left: 50%;
    padding-top: 25px;
    height: 260px;
  }

  .product-card:hover .drinkSize-7 {
    top: 70%;
    left: 50%;
    padding-top: 25px;
    height: 260px;
  }

  .product-card:hover .drinkSize-8 {
    top: 70%;
    left: 50%;
    padding-top: 25px;
    height: 270px;
  }

  .product-card:hover .drinkSize-9 {
    top: 70%;
    left: 50%;
    padding-top: 25px;
    height: 270px;
  }

  /* Birthday Resizes */

  .product-card:hover .birthdayImageSize-1 {
    top: 70%;
    left: 50%;
    padding-top: 25px;
    height: 300px;
  }

  .product-card:hover .birthdayImageSize-2 {
    top: 75%;
    left: 50%;
    padding-top: 25px;
    height: 200px;
  }

  .product-card:hover .birthdayImageSize-3 {
    top: 70%;
    left: 50%;
    padding-top: 25px;
    height: 230px;
  }

  .product-card:hover .birthdayImageSize-4 {
    top: 70%;
    left: 50%;
    padding-top: 25px;
    height: 270px;
  }

  .product-card:hover .birthdayImageSize-5 {
    top: 70%;
    left: 50%;
    padding-top: 50px;
    height: 200px;
  }

  .product-card:hover .birthdayImageSize-6 {
    top: 70%;
    left: 50%;
    padding-top: 25px;
    height: 300px;
  }

  .product-card:hover .birthdayImageSize-7 {
    top: 70%;
    left: 50%;
    padding-top: 25px;
    height: 300px;
  }

  .product-card:hover .birthdayImageSize-8 {
    top: 70%;
    left: 50%;
    padding-top: 25px;
    height: 275px;
  }

  .product-card:hover .birthdayImageSize-9 {
    top: 70%;
    left: 50%;
    padding-top: 25px;
    height: 200px;
  }
}