.top-banner {
  align-items: center;
  background: #bd0101;
  display: flex;
  gap: calc(8px * var(--scale-factor));
  justify-content: center;
  padding: calc(8px * var(--scale-factor));
  position: relative;
  text-decoration: none !important;
  width: 100%;
  z-index: 1000;

  --scale-factor: 0.85;
}

.top-banner svg {
  flex: 0 0 calc(24px * var(--scale-factor));
}

.top-banner p {
  color: white;
  font-size: calc(18px * var(--scale-factor));
  font-weight: 600;
  line-height: calc(20px * var(--scale-factor));
}

.top-banner span {
  color: white;
  font-size: calc(18px * var(--scale-factor));
  text-decoration: underline;
}

@media (max-width: 650px) {
  .top-banner {
    padding: calc(8px * var(--scale-factor)) calc(20px * var(--scale-factor));
  }
}

.homepage-hero {
  height: 100vh;
  max-height: calc(800px * var(--scale-factor));
  overflow: hidden;
  position: relative;

  --scale-factor: 0.85;
}

.homepage-hero-bg {
  height: 100%;
  left: 0;
  object-fit: cover;
  object-position: 60% 60%;
  position: absolute;
  top: 0;
  width: 100%;
}

.homepage-hero-content {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: calc(24px * var(--scale-factor));
  height: 100%;
  justify-content: center;
  padding: calc(20px * var(--scale-factor));
  position: relative;
  text-align: center;
  z-index: 2;
}

.homepage-hero-content-top {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: calc(16px * var(--scale-factor));
  justify-content: center;
}

.homepage-hero-content-badge {
  align-items: center;
  border-radius: 50rem;
  background: rgba(0, 117, 87, 0.20);
  border: calc(1px * var(--scale-factor)) solid rgba(0, 117, 87, 0.80);
  display: flex;
  gap: calc(8px * var(--scale-factor));
  padding: calc(8px * var(--scale-factor)) calc(20px * var(--scale-factor));
}

.homepage-hero-content-badge-stars {
  align-items: center;
  display: flex;
  gap: calc(4px * var(--scale-factor));
}

.homepage-hero-content-badge-stars svg {
  width: calc(16px * var(--scale-factor));
}

.homepage-hero-content-badge p {
  color: white;
  font-size: calc(14px * var(--scale-factor));
}

.homepage-hero-content h1 {
  color: white;
  font-size: calc(50px * var(--scale-factor));
  font-weight: 700;
  line-height: 115%;
  max-width: calc(928px * var(--scale-factor));
}

.homepage-hero-content-description {
  color: white;
  font-size: calc(18px * var(--scale-factor));
  max-width: calc(485px * var(--scale-factor));
}

.homepage-hero-content-actions {
  display: flex;
  gap: calc(24px * var(--scale-factor));
}

.homepage-hero-content-actions a {
  align-items: center;
  background: #008061;
  border-radius: calc(4px * var(--scale-factor));
  color: #fff;
  font-family: "Plus Jakarta Sans";
  font-size: calc(18px * var(--scale-factor));
  font-weight: 500;
  line-height: 150.907%;
  min-width: calc(229px * var(--scale-factor));
  padding: calc(14.37px * var(--scale-factor));
  text-decoration: none;
  width: max-content;
}

.homepage-hero-content-info {
  align-items: center;
  color: white;
  display: flex;
  font-size: calc(12px * var(--scale-factor));
  font-weight: 700;
  gap: calc(8px * var(--scale-factor));
  line-height: 1;
}

.homepage-hero-content-info span:first-child {
  align-items: center;
  background: #008061;
  border-radius: 50%;
  display: flex;
  height: calc(16px * var(--scale-factor));
  justify-content: center;
  width: calc(16px * var(--scale-factor));
}

.homepage-hero-content-info span:first-child svg {
  height: calc(12px * var(--scale-factor));
  width: calc(12px * var(--scale-factor));
}

.holiday-sales {
  align-items: center;
  animation: 3s jump infinite;
  background: #c1121f;
  box-shadow: 25px 67px 20px 0 rgba(0, 0, 0, 0.00), 16px 43px 18px 0 rgba(0, 0, 0, 0.01), 9px 24px 15px 0 rgba(0, 0, 0, 0.05), 4px 11px 11px 0 rgba(0, 0, 0, 0.09), 1px 3px 6px 0 rgba(0, 0, 0, 0.10);
  bottom: 60vh;
  color: white;
  display: flex;
  font-size: 14px;
  font-weight: 700;
  gap: 8px;
  justify-content: center;
  padding: 8px 20px;
  position: fixed;
  right: 0;
  text-decoration: none !important;
  transform: rotate(-90deg);
  transform-origin: 100% 100%;
  z-index: 1000;
}

.holiday-sales svg {
  transform: rotate(90deg);
}

@media (max-width: 650px) {
  .homepage-hero-content h1 {
    font-size: calc(36px * var(--scale-factor));
  }

  .homepage-hero-content-actions {
    flex-direction: column;
    width: 100%;
  }

  .homepage-hero-content-actions a {
    width: 100%
  }
}

@media (max-width: 500px) {
  .homepage-hero-content-badge {
    flex-direction: column;
  }
}