body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  font-family: Arial, sans-serif;
}

.header-container {
  width: 100%;
  height: 150px;
  position: sticky;
  overflow: hidden;
}

.header-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("./background-01.svg");
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: -1;
  background-size: cover;
  background-position: center;
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  position: absolute;
  z-index: 2000;
}

.perahera {
  position: absolute;
  width: 100px;
  height: 100px;
  background-image: url("./perahera.svg");
  background-size: contain;
  background-repeat: no-repeat;
  animation: perahera-flow 20s infinite linear;
  top: 60px;
}

.perahera01 {
  left: 20px;
}

.perahera02 {
  left: 120px;
}

.perahera03 {
  left: 220px;
}

.perahera04 {
  left: 320px;
}

.kingdom {
  position: absolute;
  right: 0%;
  top: 35%;
  width: 140px;
  height: 140px;
  background-image: url("./kingdom.svg");
  background-size: contain;
  background-repeat: no-repeat;
}

.clouds {
  position: absolute;
  background-image: url("./cloud.svg");
  background-size: contain;
  background-repeat: no-repeat;
  animation: float 15s infinite ease-in-out;
}

.cloud01 {
  right: 120px;
  top: 50px;
  width: 40px;
  height: 40px;
  animation-delay: 0s;
}

.cloud02 {
  right: 40px;
  top: 20px;
  width: 30px;
  height: 30px;
  animation-delay: 2s;
}

.cloud03 {
  left: 240px;
  top: 55px;
  width: 20px;
  height: 20px;
  animation-delay: 1s;
}

.cloud05 {
  right: 80px;
  top: 60px;
  width: 20px;
  height: 45px;
  animation-delay: 4s;
}

.cloud06 {
  left: 50px;
  top: 60px;
  width: 50px;
  height: 40px;
  animation-delay: 5s;
}

.cloud07 {
  left: 150px;
  top: 70px;
  width: 70px;
  height: 35px;
  animation-delay: 6s;
}

.palapethi {
  position: absolute;
  width: 20px;
  height: 20px;
  background-image: url("./palapethi.svg");
  background-size: contain;
  background-repeat: no-repeat;
  animation: palapethi-rotate 7s infinite linear;
}

.palapethi1 {
  left: 20%;
  top: 70px;
  animation-delay: 0s;
}

.palapethi2 {
  left: 30%;
  top: 70px;
  animation-delay: 0.2s;
}

.palapethi3 {
  left: 40%;
  top: 70px;
  animation-delay: 0.4s;
}

.palapethi4 {
  left: 50%;
  top: 70px;
  animation-delay: 0.6s;
}

.palapethi5 {
  left: 60%;
  top: 70px;
  animation-delay: 0.8s;
}

.palapethi6 {
  left: 70%;
  top: 70px;
  animation-delay: 1s;
}

.palapethi7 {
  left: 80%;
  top: 70px;
  animation-delay: 1.2s;
}

@keyframes palapethi-rotate {
  0% {
    transform: rotate(0deg) scale(1);
  }

  25% {
    transform: rotate(90deg) scale(1.1);
  }

  50% {
    transform: rotate(180deg) scale(1);
  }

  75% {
    transform: rotate(270deg) scale(1.1);
  }

  100% {
    transform: rotate(360deg) scale(1);
  }
}

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

@keyframes perahera-flow {
  0% {
    transform: translateX(0);
    opacity: 0;
  }

  25% {
    transform: translateX(100px);
    opacity: 0.5;
  }

  50% {
    transform: translateX(200px);
    opacity: 1;
  }

  75% {
    transform: translateX(300px);
    opacity: 1;
  }

  90% {
    transform: translateX(400px);
    opacity: 0;
  }

  100% {
    transform: translateX(0);
    opacity: 0;
  }
}
@keyframes sway {
  0%,
  100% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(5deg);
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .dragon {
    width: 100px;
    height: 100px;
    left: 10px;
  }

  .sun {
    width: 100px;
    height: 100px;
    right: 30px;
  }

  .cloud {
    transform: scale(0.7);
  }

  .leaf {
    width: 150px;
    height: 150px;
  }

  .header-container {
    height: 100px;
  }

  .perahera {
    width: 60px;
    height: 60px;
    top: 45px;
  }

  .perahera01 {
    left: 10px;
  }

  .perahera02 {
    left: 70px;
  }

  .perahera03 {
    left: 130px;
  }

  .perahera04 {
    left: 190px;
  }

  .cloud01 {
    width: 20px;
    height: 20px;
  }
  .cloud02 {
    width: 15px;
    height: 15px;
  }
  .cloud03 {
    width: 10px;
    height: 10px;
  }
  .cloud05 {
    width: 20px;
    height: 20px;
  }
  .cloud06 {
    width: 25px;
    height: 20px;
    top: 30px;
  }
  .cloud07 {
    width: 35px;
    height: 18px;
    top: 45px;
  }

  .palapethi {
    width: 10px;
    top: 40px;
  }
}

@media (max-width: 480px) {
  .header-container {
    height: 100px;
  }

  .dragon {
    width: 80px;
    height: 80px;
    left: 5px;
    top: 5px;
  }

  .sun {
    width: 70px;
    height: 70px;
    right: 20px;
  }

  .cloud {
    transform: scale(0.5);
  }

  .leaf {
    width: 100px;
    height: 100px;
  }

  .perahera {
    transform: scale(0.1);
    top: 45px;
  }
}

/* Demo content */
.content {
  padding: 20px;
  text-align: center;
}