/* === HOMEPAGE ONLY === */

/* Make all text white on homepage */
.homepage-container,
.homepage-container * {
  color: white !important;
}

/* Layout */
.homepage-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 2rem 1rem;
  text-align: center;
}

/* Logo */
.home-logo {
  width: 90px;
  height: 90px;
  margin: 0 auto 1rem auto;
}


/* Packages wrapper */
.packages {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  margin: 2rem auto;
}

/* On desktop → make row layout */
@media (min-width: 850px) {
  .packages {
    flex-direction: row;
    justify-content: center;
    gap: 2rem;
  }
}

/* Package cards */
.package-card {
  padding: 1.5rem;
  border-radius: 18px;
  color: white !important;
  text-align: center;
  width: 100%;
  max-width: 280px;
  margin: 0 auto;
}

/* DIFFERENT BACKGROUND COLORS PER PACKAGE */
.package-card.basic {
  background: #0077ff; /* Blue */
}

.package-card.standard {
  background: #8b5cf6; /* Purple */
}

.package-card.ultimate {
  background: #10b981; /* Emerald */
}

.package-card h3 span {
  font-size: 1.8rem;
}
/* Choose button */
.choose-btn {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.7rem 1.5rem;
  background: #ffffff;
  color: #000 !important;
  text-decoration: none;
  border-radius: 10px;
  transition: 0.2s;
  cursor: pointer;
}

.choose-btn:hover {
  opacity: 0.8;
}

/* Add-ons list */
.addons {
  margin-top: 2rem;
  text-align: left;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

.addons li {
  margin-bottom: 8px;
}