/* Responsive Styles */

/* Large Devices (Desktops) */
@media (max-width: 1200px) {
  .container {
    max-width: 960px;
  }

  .sports-grid,
  .casino-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Medium Devices (Tablets) */
@media (max-width: 992px) {
  .container {
    max-width: 720px;
  }

  .main-nav {
    display: none;
  }

  .mobile-menu-toggle {
    display: block;
  }

  .sports-grid,
  .casino-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .about-content,
  .app-content {
    flex-direction: column;
  }

  .about-image,
  .app-image {
    margin-top: 30px;
  }

  .footer-content {
    flex-direction: column;
  }

  .footer-logo {
    margin-bottom: 30px;
  }

  .footer-links {
    flex-wrap: wrap;
  }

  .footer-column {
    width: 50%;
    margin-bottom: 30px;
  }

  .footer-bottom {
    flex-direction: column;
  }

  .payment-methods {
    margin-bottom: 30px;
  }
}

/* Small Devices (Mobile) */
@media (max-width: 768px) {
  .container {
    max-width: 540px;
  }

  .auth-buttons {
    display: none;
  }

  .hero h1 {
    font-size: 3rem;
  }

  .hero h2 {
    font-size: 1.5rem;
  }

  .bonus-text h3 {
    font-size: 2rem;
  }

  .bonus-text .currency {
    font-size: 1.8rem;
  }

  .bonus-text .amount {
    font-size: 2.5rem;
  }

  .bonus-text p {
    font-size: 1.2rem;
  }

  .section-title {
    font-size: 2rem;
  }

  .sports-grid,
  .casino-grid,
  .features-grid {
    grid-template-columns: 1fr;
  }

  .about-text h2,
  .app-text h2 {
    font-size: 2rem;
  }

  .footer-column {
    width: 100%;
  }
}

/* Extra Small Devices */
@media (max-width: 576px) {
  .container {
    width: 100%;
    padding: 0 10px;
  }

  .hero {
    padding: 40px 0;
  }

  .hero h1 {
    font-size: 2.5rem;
  }

  .hero h2 {
    font-size: 1.2rem;
  }

  .bonus-text h3 {
    font-size: 1.8rem;
  }

  .bonus-text .currency {
    font-size: 1.5rem;
  }

  .bonus-text .amount {
    font-size: 2rem;
  }

  .bonus-text p {
    font-size: 1rem;
  }

  .popular-sports,
  .casino-preview,
  .about,
  .features,
  .app-download {
    padding: 50px 0;
  }

  .section-title {
    font-size: 1.8rem;
    margin-bottom: 30px;
  }

  .about-text h2,
  .app-text h2 {
    font-size: 1.8rem;
  }

  .app-buttons {
    flex-direction: column;
  }

  .mobile-menu {
    width: 100%;
  }
}