.hero-skeleton,
.benefits-skeleton,
.packages-skeleton,
.join-skeleton {
  margin-bottom: 40px;
}

/* Universal Skeleton Loader Style */
.skeleton {
  background: linear-gradient(90deg, #eee 25%, #ddd 50%, #eee 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.2s infinite;
  border-radius: 8px;
}

/* Hero Section */
.hero-title-skeleton,
.hero-subtitle-skeleton,
.hero-text-line-skeleton,
.hero-btn-skeleton {
  height: 20px;
  margin-bottom: 10px;
  background: #eee;
  border-radius: 4px;
  animation: skeleton-loading 1.2s infinite;
}

.hero-title-skeleton {
  width: 40%;
  height: 30px;
}

.hero-subtitle-skeleton {
  width: 60%;
  height: 20px;
}

.hero-button-group-skeleton {
  display: flex;
  gap: 12px;
  margin: 20px 0;
}

.hero-btn-skeleton {
  width: 100px;
  height: 36px;
}

.hero-text-line-skeleton {
  width: 90%;
  height: 14px;
}

.hero-text-line-skeleton.short {
  width: 60%;
}

/* Benefits Section */
.benefits-title-skeleton {
  width: 30%;
  height: 28px;
  margin-bottom: 20px;
}

.benefits-items-skeleton {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.benefit-item-skeleton {
  width: 160px;
  height: 80px;
  border-radius: 6px;
}

/* Packages Section */
.packages-skeleton {
  display: flex;
  gap: 20px;
  justify-content: space-between;
}

.package-card-skeleton {
  width: 30%;
  height: 300px;
  border-radius: 10px;
}

/* Join Section */
.join-title-skeleton {
  width: 30%;
  height: 28px;
  margin-bottom: 20px;
}

.join-cards-skeleton {
  display: flex;
  gap: 20px;
}

.join-card-skeleton {
  width: 220px;
  height: 80px;
  border-radius: 8px;
}

@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}