/* Hero Section */
.hero-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2vw 8vw;
  gap: clamp(16px, 4vw, 48px);
  flex-wrap: wrap;
}

.hero-section .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 4vw, 48px);
  flex-wrap: wrap;
  width: 100%;
}

.text {
  flex: 1;
  min-width: 300px;
  text-align: center;
  margin: 0 auto; 
}

.text h1 {
  font-size: clamp(28px, 6vw, 48px);
  color: var(--brand);
  text-align: center;
}

.desktop-title {
  display: block;
}

.mobile-title {
  display: none;
}

.text p {
  font-size: clamp(16px, 1.8vw, 22px);
  font-weight: 400;
  line-height: 1.6;
  margin-top: clamp(8px, 2vw, 16px);
  max-width: clamp(260px, 90vw, 900px);
  color: var(--muted);
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.buttons {
  margin-top: 30px;
}

.hero-image-container {
  position: relative;
  display: inline-block;
  width: clamp(135px, 27vw, 280px);
}

.hero-image-container img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* Responsive display logic - Default: Show desktop image */
.desktop-image {
  display: block;
}

.mobile-card {
  display: none !important;
}

.coin-animation {
  position: absolute;
  top: clamp(54%, 5vw, 74%);
  left: clamp(32%, 5vw, 53%);
  width: clamp(120px, 4vw, 320px);
  height: auto;
  z-index: 10;
  pointer-events: none;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .hero-section {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px;
  }

  .desktop-title {
    display: none;
  }

  .mobile-title {
    display: block;
    font-size: clamp(56px, 12vw, 96px);
  }

  .text p {
    display: none;
  }

  .puppy-and-coin {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
  }

  .hero-image {
    max-width: 180px;
    height: auto;
  }

  .text {
    width: 90%;
  }

  .buttons {
    display: flex;
    justify-content: center;
  }

  .coin-animation {
    top: 55%;
    left: 33%;
    width: 60px;
  }
}