.product-attribute-section {
  position: relative;
  overflow: hidden;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.product-attribute-section .attribute-main-img {
  max-width: 600px;
  width: 59%;
  height: auto;
  position: relative;
  opacity: 0;
  animation: bounceUp 0.5s forwards;
}

@keyframes bounceUp {
  0% {
    opacity: 0;
    transform: translateY(120px);
  }
  60% {
    opacity: 1;
    transform: translateY(-10px);
  }
  80% {
    opacity: 1;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.product-attribute-section .top-svg-box {
  position: absolute;
  max-width: 200px;
  width: 20%;
  height: auto;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -253%);
}

.product-attribute-section .top-svg {
  opacity: 0;
  animation: softBounceIn 1s forwards 0.4s;
}

.product-attribute-section .top-right-svg-box {
  position: absolute;
  max-width: 230px;
  width: 25%;
  height: auto;
  left: 50%;
  top: 50%;
  transform: translate(82%, -230%);
}

.product-attribute-section .top-right-svg {
  opacity: 0;
  animation: softBounceIn 1s forwards 0.5s;
}

.product-attribute-section .center-right-svg-box {
  position: absolute;
  max-width: 200px;
  width: 20%;
  height: auto;
  left: 50%;
  top: 50%;
  transform: translate(140%, -50%);
}

.product-attribute-section .center-right-svg {
  opacity: 0;
  animation: softBounceIn 1s forwards 0.6s;
}

.product-attribute-section .bottom-right-svg-box {
  position: absolute;
  max-width: 260px;
  width: 25%;
  height: auto;
  left: 50%;
  top: 50%;
  transform: translate(65%, 150%);
}

.product-attribute-section .bottom-right-svg {
  opacity: 0;
  animation: softBounceIn 1s forwards 0.7s;
}

.product-attribute-section .bottom-left-svg-box {
  position: absolute;
  max-width: 200px;
  width: 20%;
  height: auto;
  left: 50%;
  top: 50%;
  transform: translate(-200%, 100%);
}

.product-attribute-section .bottom-left-svg {
  opacity: 0;
  animation: softBounceIn 1s forwards 0.8s;
}

.product-attribute-section .center-left-svg-box {
  position: absolute;
  max-width: 240px;
  width: 24%;
  height: auto;
  left: 50%;
  top: 50%;
  transform: translate(-209%, -50%);
}

.product-attribute-section .center-left-svg {
  opacity: 0;
  animation: softBounceIn 1s forwards 0.9s;
}

@keyframes softBounceIn {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  60% {
    opacity: 1;
    transform: scale(1.05);
  }
  80% {
    opacity: 1;

    transform: scale(0.98);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.product-attribute-section svg {
  display: block;
  width: 100%;
  height: auto;
}

#drawing-svg path {
  stroke-dasharray: var(--path-length);
  stroke-dashoffset: var(--path-length);
  /* fill-opacity: 0; */
  fill-opacity: 1;
  transition: stroke-dashoffset 1s ease, fill-opacity 0.5s ease;
}

#drawing-svg path.drawn {
  stroke-dashoffset: 0;
  fill-opacity: 1;
}

@media (max-width: 768px) {
  .product-attribute-section {
    height: auto;
    padding: 11rem 1rem;
  }
}

@media (max-width: 768px) {
  .product-attribute-section {
    height: auto;
    padding: 11rem 1rem;
  }
}