/* Custom styles for Beat Genius */
.bg-header {
    background-color: #32363d;
}

.bg-primary {
    background-color: #FF6693;
}

.bg-primary-dark {
    background-color: #FF6693;
}

/* Color gradient for large text */
.text-primary-gradient {
    background: linear-gradient(90deg, #FF6693 0%, #44C3F6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Color definitions */
.text-primary {
    color: #6EF2DD;
}

.text-secondary {
    color: #6EF2DD;
}

.text-tertiary {
    color: #44C3F6;
}

.text-accent {
    color: #FF6693;
}

.bg-dark {
    background-color: #121722;
}

/* Adjustments for buttons */
a.bg-primary:hover {
    background-color: #1D9DC9;
}

/* General container styles */
.container {
    padding: 0 1rem;
}

/* Utility classes for margin and padding */
.mb-2 {
    margin-bottom: 0.5rem;
}

.mb-4 {
    margin-bottom: 1rem;
}

.mb-6 {
    margin-bottom: 1.5rem;
}

.mb-8 {
    margin-bottom: 2rem;
}

.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}

.px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.py-8 {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.py-20 {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.max-w-screen-md {
    max-width: 768px;
}

.max-w-screen-lg {
    max-width: 1024px;
}

html, body {
  scroll-behavior: smooth;
}

/* Hamburger Button Animation */
.menu-btn {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 24px;
  height: 24px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 10;
}
.menu-btn:focus {
  outline: none;
}
.menu-btn div {
  width: 24px;
  height: 2px;
  background: white;
  border-radius: 5px;
  transition: all 0.3s linear;
  position: relative;
  transform-origin: 1px;
}
.menu-btn.open div:nth-child(1) {
  transform: rotate(45deg);
}
.menu-btn.open div:nth-child(2) {
  opacity: 0;
  transform: translateX(20px);
}
.menu-btn.open div:nth-child(3) {
  transform: rotate(-45deg);
}

/* Menu Animation */
#mobile-menu {
  transition: max-height 0.3s ease-in-out;
  overflow: hidden;
  max-height: 0;
}
#mobile-menu.open {
  max-height: 300px; /* Adjust based on your menu's height */
}