:root {
  --laptop-1: url("../../assets/image/background/671b969087e1bd520e91baeb_s2\ copy.png");
  --laptop-2: url("../../assets/image/background/671b969087e1bd520e91baeb_s1\ copy.png");
  --laptop-3: url("../../assets/image/background/671b969087e1bd520e91baeb_s3\ copy.png");
  --laptop-4: url("../../assets/image/background/671b969087e1bd520e91baeb_s4\ copy.png");
  --phone-1: url("../../assets/image/background/mobile-1.png");
  --phone-2: url("../../assets/image/background/mobile-2.png");
  --phone-3: url("../../assets/image/background/mobile-3.png");
}

/* Container Styling */
.top-animation-container {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  position: relative;
}

.top-animation {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 70%;
  opacity: 1;
  transition: opacity 0.5s;
}

/* Circle Styling */
.circle {
  width: 60%;
  height: 0;
  padding-bottom: 59.5%;
  background-image: url("https://cdn.prod.website-files.com/635a2c04e14b8d7a40909e86/66aa670a13002a8f7c3b720d_Ellipse%2030.png");
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  z-index: 1;
  animation: spin 16s linear infinite;
}

/* Laptop Styling and Animation */
.laptop {
  width: 113.33%;
  height: 0;
  padding-bottom: 67.8%;
  left: -10%;
  top: 2.5%;
  background-image: var(--laptop-1);
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  z-index: 2;
  animation: laptop-image-cycle 1s infinite linear,
    /* Increased from 6s to 12s */ laptop-bounce 4s linear infinite;
}

@keyframes laptop-image-cycle {
  0% {
    background-image: var(--laptop-1);
  }
  30% {
    background-image: var(--laptop-1);
  }
  50% {
    background-image: var(--laptop-2);
  }
  70% {
    background-image: var(--laptop-3);
  }
  100% {
    background-image: var(--laptop-4);
  }
}

.laptop {
  width: 113.33%;
  height: 0;
  padding-bottom: 67.8%;
  left: -10%;
  top: 2.5%;
  background-image: var(--laptop-1);
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  z-index: 2;
  animation: laptop-image-cycle 12s infinite linear,
    /* Increased from 6s to 12s */ laptop-bounce 4s linear infinite;
}

@keyframes laptop-image-cycle {
  0% {
    background-image: var(--laptop-1);
  }
  25% {
    background-image: var(--laptop-1);
  }
  50% {
    background-image: var(--laptop-2);
  }
  75% {
    background-image: var(--laptop-3);
  }
  100% {
    background-image: var(--laptop-4);
  }
}

@keyframes laptop-bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* Phone Styling and Animation */
.phone {
  width: 55.44%;
  height: 0;
  padding-bottom: 44.44%;
  left: 54%;
  top: 30%;
  background-image: var(--phone-1);
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  z-index: 3;
  animation: phone-image-cycle 6s infinite linear,
    phone-bounce 4s linear infinite;
}

@keyframes phone-image-cycle {
  0% {
    background-image: var(--phone-1);
  }
  33% {
    background-image: var(--phone-2);
  }
  66% {
    background-image: var(--phone-3);
  }
  100% {
    background-image: var(--phone-1);
  }
}

@keyframes phone-bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(10px);
  }
}

/* Text Styling */
.text {
  position: absolute;
  padding: 4px 16px;
  font-size: 16px;
  font-weight: 500;
  background-color: #65fc8b;
  border-radius: 999px;
  display: flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  font-family: Kanit, sans-serif;
  z-index: 4;
}

.text.web {
  left: 2.5%;
  top: 75.2%;
  animation: text-web 20s linear infinite;
}

.text.mob {
  left: 53.83%;
  top: 7.6%;
  animation: text-mob 20s linear infinite;
}

/* Keyframes for Additional Animations */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes text-web {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(10px);
  }
}

@keyframes text-mob {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-10px);
  }
}
/* ----------------- */
.icon {
  position: absolute;
  font-size: 24px;
  font-weight: bold;
  padding: 4px 8px;
  color: #ffffff;
  border-radius: 5px;
  box-shadow: 0px 4px 8px 0px #ccc;
  text-align: center;
  z-index: 1;
  animation: float 10s ease-in-out infinite;
}

.html-icon {
  color: #7d61fc;
  top: 5%;
  left: 0%;
  animation-duration: 8s;
}

.css-icon {
  color: #2965f1;
  top: 5%;
  right: 0%;
  animation-duration: 6s;
}

.js-icon {
  color: #ffbb00;
  bottom: -5%;
  left: 10%;
  animation-duration: 10s;
  z-index: 10;
}

.react-icon {
  color: #61dbfb;
  bottom: 30%;
  left: -10%;
  animation-duration: 12s;
}

.laravel-icon {
  color: #ff2d20;
  top: -1%;
  left: 30%;
  animation-duration: 9s;
}

.nodejs-icon {
  color: #148b09;
  bottom: 55%;
  left: -7%;
  animation-duration: 7s;
  z-index: 10;
}

.bootstrap-icon {
  color: #38b2ac;
  top: 25%;
  right: 25%;
  animation-duration: 11s;
  z-index: 10;
}

.php-icon {
  color: #424d80;
  bottom: 20%;
  right: 5%;
  animation-duration: 8.5s;
  z-index: 2;
}

.mysql-icon {
  color: #27ca99;
  bottom: -5%;
  right: 40%;
  animation-duration: 9.5s;
  z-index: 2;
}

/* Floating animation */
@keyframes float {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(-10px, 10px);
  }
  50% {
    transform: translate(10px, -10px);
  }
  75% {
    transform: translate(-10px, -10px);
  }
  100% {
    transform: translate(0, 0);
  }
}