/* Info Section Styling */
.info-section {
  padding: 2.5rem 0;
  background-color: var(--gray-100);
}

/* Hero buttons styling when in info section */
.info-section .hero-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1.5rem;
  justify-content: center;
  align-items: center;
}

/* Button styling adjustments */
.info-section .btn-primary {
  background-color: var(--primary-color);
  color: var(--secondary-color);
  border: 1px solid var(--primary-color);
  padding: 0.75rem 1.75rem;
  font-weight: 500;
}

.info-section .btn-secondary {
  background-color: transparent;
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
  padding: 0.75rem 1.75rem;
  font-weight: 500;
}

.info-section .btn-primary:hover {
  background-color: var(--gray-800);
  border-color: var(--gray-800);
}

.info-section .btn-secondary:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

@media (min-width: 640px) {
  .info-section .hero-buttons {
    flex-direction: row;
  }
}