@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;700&display=swap');

.product-showcase {
    --ps-size: 500px;
    --ps-transition: 0.5s;
    --ps-z-scale: 5;
    --ps-initial-delay: 0.2s;
    --ps-mouse-rotation: 15;
    --ps-slide-time: 4s;
    --ps-slide-rotate-time: 1s;
    --ps-slide-scale-time: 0.5s;
}
.product-showcase .ps-slide-1 {
  --ps-number: 1;
  --ps-node-1-width: 25%;
  --ps-node-1-height: auto;
  --ps-node-1-top: 30%;
  --ps-node-1-left: 65%;
  --ps-node-1-translate: calc(20px * var(--ps-z-scale));
  --ps-node-2-width: 52.38%;
  --ps-node-2-height: 100%;
  --ps-node-2-top: 0%;
  --ps-node-2-left: calc((100% - 52.38%) * 0.5);
  --ps-node-2-background-color: rgba(201, 224, 255, 0.8);
  --ps-node-2-border-radius: 40px;
  --ps-node-2-translate: calc(0px);
  --ps-node-3-width: 25%;
  --ps-node-3-height: 25%;
  --ps-node-3-top: 5%;
  --ps-node-3-left: calc((100% - 25%) * 0.5);
  --ps-node-3-translate: calc(2px * var(--ps-z-scale));
  --ps-node-4-width: 48%;
  --ps-node-4-height: auto;
  --ps-node-4-top: 39%;
  --ps-node-4-left: calc((100% - 48%) * 0.5);
  --ps-node-4-translate: calc(2px * var(--ps-z-scale));
  --ps-node-5-width: 48%;
  --ps-node-5-height: auto;
  --ps-node-5-top: 50%;
  --ps-node-5-left: calc((100% - 48%) * 0.5);
  --ps-node-5-item-background-color: rgba(255, 232, 201, 0.8);
  --ps-node-5-item-hover-color: rgba(255, 255, 255, 0.8);
  --ps-node-5-border-radius: 25px;
  --ps-node-5-translate: calc(2px * var(--ps-z-scale));
  --ps-node-6-width: 48%;
  --ps-node-6-height: 11%;
  --ps-node-6-top: 85%;
  --ps-node-6-left: calc((100% - 48%) * 0.5);
  --ps-node-6-translate: calc(2px * var(--ps-z-scale));
  --ps-node-7-width: 30%;
  --ps-node-7-height: auto;
  --ps-node-7-top: 15%;
  --ps-node-7-left: -2%;
  --ps-node-7-translate: calc(20px * var(--ps-z-scale));
  --ps-node-color: #000000;
}
.product-showcase .ps-slide-1 .ps-node-1 img {
  width: 150%; /* Adjust this percentage as needed */
  max-width: none; /* Remove any max-width restrictions */
}
.product-showcase .ps-slide-2 {
  --ps-number: 2;
  --ps-node-1-width: 30%;
  --ps-node-1-height: auto;
  --ps-node-1-top: 20%;
  --ps-node-1-left: calc(100% - 30%);
  --ps-node-1-translate: calc(-10px * var(--ps-z-scale));
  --ps-node-2-width: 52.38%;
  --ps-node-2-height: 100%;
  --ps-node-2-top: 0%;
  --ps-node-2-left: calc((100% - 52.38%) * 0.5);
  --ps-node-2-border-radius: 40px;
  --ps-node-2-translate: calc(0px);
  --ps-node-3-width: 25%;
  --ps-node-3-height: 25%;
  --ps-node-3-top: 8%;
  --ps-node-3-left: calc((100% - 25%) * 0.5);
  --ps-node-3-translate: calc(2px * var(--ps-z-scale));
  --ps-node-4-width: 48%;
  --ps-node-4-height: auto;
  --ps-node-4-top: 39%;
  --ps-node-4-left: calc((100% - 48%) * 0.5);
  --ps-node-4-translate: calc(2px * var(--ps-z-scale));
  --ps-node-5-width: 48%;
  --ps-node-5-height: auto;
  --ps-node-5-top: 50%;
  --ps-node-5-left: calc((100% - 48%) * 0.5);
  --ps-node-5-item-background-color: rgba(200, 0, 201, 0.8);
  --ps-node-5-item-hover-color: rgba(255, 255, 255, 0.8);
  --ps-node-5-border-radius: 25px;
  --ps-node-5-translate: calc(2px * var(--ps-z-scale));
  --ps-node-6-width: 48%;
  --ps-node-6-height: 11%;
  --ps-node-6-top: 85%;
  --ps-node-6-left: calc((100% - 48%) * 0.5);
  --ps-node-6-translate: calc(2px * var(--ps-z-scale));
  --ps-node-7-width: 30%;
  --ps-node-7-height: auto;
  --ps-node-7-top: 40%;
  --ps-node-7-left: 0%;
  --ps-node-7-translate: calc(20px * var(--ps-z-scale));
  --ps-node-8-width: 30%;
  --ps-node-8-height: auto;
  --ps-node-8-top: 20%;
  --ps-node-8-left: 70%;
  --ps-node-8-translate: calc(20px * var(--ps-z-scale));
  --ps-node-color: #ffffff;
}
.product-showcase .ps-slide-3 {
  --ps-number: 3;
  --ps-node-1-width: 30%;
  --ps-node-1-height: auto;
  --ps-node-1-top: 20%;
  --ps-node-1-left: calc(100% - 30%);
  --ps-node-1-translate: calc(-10px * var(--ps-z-scale));
  --ps-node-2-width: 52.38%;
  --ps-node-2-height: 100%;
  --ps-node-2-top: 0%;
  --ps-node-2-left: calc((100% - 52.38%) * 0.5);
  --ps-node-2-background-color: rgba(120, 213, 215, 0.8);
  --ps-node-2-border-radius: 40px;
  --ps-node-2-translate: calc(0px);
  --ps-node-3-width: 25%;
  --ps-node-3-height: 25%;
  --ps-node-3-top: 8%;
  --ps-node-3-left: calc((100% - 25%) * 0.5);
  --ps-node-3-translate: calc(2px * var(--ps-z-scale));
  --ps-node-4-width: 48%;
  --ps-node-4-height: auto;
  --ps-node-4-top: 39%;
  --ps-node-4-left: calc((100% - 48%) * 0.5);
  --ps-node-4-translate: calc(2px * var(--ps-z-scale));
  --ps-node-5-width: 48%;
  --ps-node-5-height: auto;
  --ps-node-5-top: 50%;
  --ps-node-5-left: calc((100% - 48%) * 0.5);
  --ps-node-5-item-background-color: rgba(200, 225, 201, 0.8);
  --ps-node-5-item-hover-color: rgba(255, 255, 255, 0.8);
  --ps-node-5-border-radius: 25px;
  --ps-node-5-translate: calc(2px * var(--ps-z-scale));
  --ps-node-6-width: 48%;
  --ps-node-6-height: 11%;
  --ps-node-6-top: 85%;
  --ps-node-6-left: calc((100% - 48%) * 0.5);
  --ps-node-6-translate: calc(2px * var(--ps-z-scale));

  --ps-node-7-width: 30%;
  --ps-node-7-height: auto;
  --ps-node-7-top: 35%;
  --ps-node-7-left:-2%;
  --ps-node-7-translate: calc(20px * var(--ps-z-scale));
  --ps-node-8-width: 30%;
  --ps-node-8-height: auto;
  --ps-node-8-top: 15%;
  --ps-node-8-left: 72%;
  --ps-node-8-translate: calc(20px * var(--ps-z-scale));

  --ps-node-9-width: 20%;
  --ps-node-9-height: auto;
  --ps-node-9-top: 65%;
  --ps-node-9-left: 5%;
  --ps-node-9-translate: calc(20px * var(--ps-z-scale));
  --ps-node-10-width: 20%;
  --ps-node-10-height: auto;
  --ps-node-10-top: 58%;
  --ps-node-10-left: 73%;
  --ps-node-10-translate: calc(20px * var(--ps-z-scale));

  --ps-node-color: #000000;
}
.product-showcase {
    width: var(--ps-size);
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 12px;
    --ps-total-slides: 0;
    --ps-total-slides-time: calc(var(--ps-total-slides) * var(--ps-slide-time));
}
.product-showcase, .product-showcase * {
  box-sizing: border-box;
}
.product-showcase .ps-size {
  width: 100%;
  padding-top: 100%;
  position: relative;
  perspective: 300px;
  transform-style: preserve-3d;
}
.product-showcase .ps-slides {
  position: absolute;
  left: 0%;
  top: 0%;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}
.product-showcase .ps-slide {
  position: absolute;
  left: 0%;
  top: 0%;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: translateZ(calc(-15px * var(--ps-z-scale)));
}
.product-showcase .ps-node {
  position: absolute;
  width: var(--width);
  height: var(--height);
  left: var(--left);
  top: var(--top);
  border-radius: var(--border-radius);
  background-color: var(--background-color);
  transform: translateZ(var(--translate)) rotateY(-90deg);
  transform-style: preserve-3d;
  opacity: 0;
  color: var(--ps-node-color);
}
.product-showcase .ps-node {
  animation: ps-node-animation-rotate var(--ps-total-slides-time) infinite calc(var(--ps-initial-delay) + ((var(--ps-number) - 1) * var(--ps-slide-time)) + ((var(--number) - 1) * 0.1s));
}
.product-showcase .ps-node > * {
  transform-style: preserve-3d;
}
.product-showcase .ps-node-1 { --number: 1; --width: var(--ps-node-1-width); --height: var(--ps-node-1-height); --left: var(--ps-node-1-left); --top: var(--ps-node-1-top); --item-background-color: var(--ps-node-1-item-background-color);  --item-hover-color: var(--ps-node-1-item-hover-color); --background-color: var(--ps-node-1-background-color); --border-radius: var(--ps-node-1-border-radius); --translate: var(--ps-node-1-translate); }
.product-showcase .ps-node-2 { --number: 2; --width: var(--ps-node-2-width); --height: var(--ps-node-2-height); --left: var(--ps-node-2-left); --top: var(--ps-node-2-top); --item-background-color: var(--ps-node-2-item-background-color);  --item-hover-color: var(--ps-node-2-item-hover-color); --background-color: var(--ps-node-2-background-color); --border-radius: var(--ps-node-2-border-radius); --translate: var(--ps-node-2-translate); }
.product-showcase .ps-node-3 { --number: 3; --width: var(--ps-node-3-width); --height: var(--ps-node-3-height); --left: var(--ps-node-3-left); --top: var(--ps-node-3-top); --item-background-color: var(--ps-node-3-item-background-color);  --item-hover-color: var(--ps-node-3-item-hover-color); --background-color: var(--ps-node-3-background-color); --border-radius: var(--ps-node-3-border-radius); --translate: var(--ps-node-3-translate); }
.product-showcase .ps-node-4 { --number: 4; --width: var(--ps-node-4-width); --height: var(--ps-node-4-height); --left: var(--ps-node-4-left); --top: var(--ps-node-4-top); --item-background-color: var(--ps-node-4-item-background-color);  --item-hover-color: var(--ps-node-4-item-hover-color); --background-color: var(--ps-node-4-background-color); --border-radius: var(--ps-node-4-border-radius); --translate: var(--ps-node-4-translate); }
.product-showcase .ps-node-5 { --number: 5; --width: var(--ps-node-5-width); --height: var(--ps-node-5-height); --left: var(--ps-node-5-left); --top: var(--ps-node-5-top); --item-background-color: var(--ps-node-5-item-background-color);  --item-hover-color: var(--ps-node-5-item-hover-color); --background-color: var(--ps-node-5-background-color); --border-radius: var(--ps-node-5-border-radius); --translate: var(--ps-node-5-translate); }
.product-showcase .ps-node-6 { --number: 6; --width: var(--ps-node-6-width); --height: var(--ps-node-6-height); --left: var(--ps-node-6-left); --top: var(--ps-node-6-top); --item-background-color: var(--ps-node-6-item-background-color);  --item-hover-color: var(--ps-node-6-item-hover-color); --background-color: var(--ps-node-6-background-color); --border-radius: var(--ps-node-6-border-radius); --translate: var(--ps-node-6-translate); }
.product-showcase .ps-node-7 { --number: 7; --width: var(--ps-node-7-width); --height: var(--ps-node-7-height); --left: var(--ps-node-7-left); --top: var(--ps-node-7-top); --item-background-color: var(--ps-node-7-item-background-color);  --item-hover-color: var(--ps-node-7-item-hover-color); --background-color: var(--ps-node-7-background-color); --border-radius: var(--ps-node-7-border-radius); --translate: var(--ps-node-7-translate); }
.product-showcase .ps-node-8 { --number: 8; --width: var(--ps-node-8-width); --height: var(--ps-node-8-height); --left: var(--ps-node-8-left); --top: var(--ps-node-8-top); --item-background-color: var(--ps-node-8-item-background-color);  --item-hover-color: var(--ps-node-8-item-hover-color); --background-color: var(--ps-node-8-background-color); --border-radius: var(--ps-node-8-border-radius); --translate: var(--ps-node-8-translate); }
.product-showcase .ps-node-9 { --number: 9; --width: var(--ps-node-9-width); --height: var(--ps-node-9-height); --left: var(--ps-node-9-left); --top: var(--ps-node-9-top); --item-background-color: var(--ps-node-9-item-background-color);  --item-hover-color: var(--ps-node-9-item-hover-color); --background-color: var(--ps-node-9-background-color); --border-radius: var(--ps-node-9-border-radius); --translate: var(--ps-node-9-translate); }
.product-showcase .ps-node-10 { --number: 10; --width: var(--ps-node-10-width); --height: var(--ps-node-10-height); --left: var(--ps-node-10-left); --top: var(--ps-node-10-top); --item-background-color: var(--ps-node-10-item-background-color);  --item-hover-color: var(--ps-node-10-item-hover-color); --background-color: var(--ps-node-10-background-color); --border-radius: var(--ps-node-10-border-radius); --translate: var(--ps-node-10-translate); }
.product-showcase .ps-photo img {
  width: 100%;
}
.product-showcase .ps-text {
  display: flex;
  flex-direction: column;
  text-align: center;
  row-gap: 5px;
}
.product-showcase .ps-text > *:nth-child(1) {
  font-weight: bold;
  font-weight: 700;
  display: block;
}
.product-showcase .ps-items {
  display: flex;
  flex-direction: column;
  row-gap: 5px;
}
.product-showcase .ps-items > * {
  padding: 15px;
  background-color: var(--item-background-color);
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: var(--ps-transition);
  text-align: center;
  display: block;
}
.product-showcase .ps-items > *:hover {
  background-color: var(--item-hover-color);
}
.product-showcase .ps-icons {
  display: flex;
  column-gap: 0px;
  justify-content: center;
  align-items: flex-end;
}
.product-showcase .ps-icons > * {
  text-align: center;
}
.product-showcase .ps-icons img {
  width: 80%;
}


@media (max-width: 768px) {
    .product-showcase {
        font-size: 10px;
    }
}

@media (max-width: 768px) {
    .product-showcase{
        width:100%;
    }
    .product-showcase  .ps-slide{
        left: -15%; /* Adjust positioning for small tablets */
        transform: translateZ(calc(-30px * var(--ps-z-scale))); /* Adjust perspective depth */
    }
}
/* Styles for mobile devices (e.g., width less than 576px) */
@media (max-width: 576px) {
    .product-showcase{
        width:100%;
    }
    .product-showcase .ps-slide {
        left: 0%;
        transform: translateZ(calc(-25px* var(--ps-z-scale)));
    }
    .product-showcase {
        font-size: 10px;
    }
    .product-showcase .ps-items > * {
        padding: 10px;
    }
    .product-showcase .ps-icons img {
        width: 60%;
    }
}

.product-showcase {

}


.center-link {
  width: 100%;
  text-align: center;
  margin-top: 20px;
  animation: bounce 2s infinite;
}

.center-link a {
  background-color: #ffe8c9;
  color: #0a0b0d;
  padding: 10px 20px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 300;
}