/* Mobile-first responsive styles */
@media (max-width: 768px) {

  /* Hero section */
  .text-5xl,
  .text-7xl {
    font-size: 2.5rem !important;
    line-height: 1.2;
  }

  .text-xl,
  .text-2xl {
    font-size: 1.125rem !important;
  }

  .mb-12 {
    margin-bottom: 2rem !important;
  }

  .gap-6 {
    gap: 1rem !important;
  }

  /* Buttons */
  .px-8 {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }

  .py-4 {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
  }

  .text-lg {
    font-size: 1rem !important;
  }

  /* Grid layouts */
  .grid {
    display: block !important;
  }

  .md\\:grid-cols-2,
  .lg\\:grid-cols-4 {
    grid-template-columns: 1fr !important;
  }

  .gap-8,
  .gap-6 {
    gap: 1.5rem !important;
  }

  /* Spacing */
  .py-20 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  .mb-16 {
    margin-bottom: 2rem !important;
  }

  .mb-8 {
    margin-bottom: 1.5rem !important;
  }

  /* Text sizes */
  .text-4xl,
  .text-5xl {
    font-size: 2rem !important;
  }

  .text-2xl {
    font-size: 1.25rem !important;
  }

  /* Flex direction */
  .flex-col,
  .sm\\:flex-row {
    flex-direction: column !important;
  }
}

@media (max-width: 480px) {

  /* Extra small screens */
  .text-5xl,
  .text-7xl {
    font-size: 2rem !important;
  }

  /* Navigation logo */
  [style*="font-size: 24px"] {
    font-size: 20px !important;
  }
}

@media (max-width: 444px) {
  .hero {
    margin-top: 30px;
  }
}

@media (max-width: 388px) {
  .hero {
    margin-top: 60px;
  }
}

@media (max-width: 325px) {
  .hero-top {
    display: none;
  }
}

/* Tablet styles */
@media (min-width: 769px) and (max-width: 1024px) {
  .text-7xl {
    font-size: 4rem !important;
  }

  .text-5xl {
    font-size: 3rem !important;
  }

  .lg\\:grid-cols-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Ensure images are responsive */
img {
  max-width: 100%;
  height: auto;
}

/* Responsive containers */
.max-w-3xl,
.max-w-4xl,
.max-w-5xl,
.max-w-7xl {
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Mobile navigation improvements */
@media (max-width: 768px) {
  .hidden.md\\:flex {
    display: none !important;
  }

  .md\\:hidden {
    display: block !important;
  }

  .grid-box {
    margin-bottom: 15px;
  }

  #contact > div > div > div.grid.md\:grid-cols-2.gap-12 > div:nth-child(1) > form > button, #home > section.relative.min-h-screen.flex.items-center.justify-center.px-6.bg-gradient-to-b.from-black.via-gray-900.to-black.overflow-hidden > div.relative.z-10.text-center.max-w-5xl.mx-auto.hero > div.flex.flex-col.sm\:flex-row.gap-6.justify-center.animate-fade-in-up.delay-300 > button.submit-button.px-8.py-4.rounded-full.font-semibold.text-lg.transition-all.duration-300.transform.hover\:scale-105.active\:scale-95.shadow-lg.bg-transparent.border-2.border-brand-red.text-brand-red.hover\:bg-brand-red.hover\:text-white.shadow-brand-red\/30 {
    margin-bottom: 25px !important;
  }
}