/* Responsive Styles */

/* Large Screens */
@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
    h1 {
    font-size: 2rem;
  }
}

/* Medium Screens (Tablets) */
@media (max-width: 991.98px) {
  h1 {
    font-size: 2.4rem;
  }
  
  h2 {
    font-size: 2.2rem;
  }
  
  section {
    padding: 80px 0;
  }
  

 
  
  .about-content, .membership-content {
    padding: 0;
    margin-top: 40px;
  }
  
  .activity-date {
    min-width: 80px;
    padding: 15px;
  }
  
  .testimonial-item {
    padding: 30px;
  }
  
  .course-card.featured {
    transform: none;
  }
  
  .course-card.featured:hover {
    transform: translateY(-10px);
  }
}

/* Small Screens (Mobile) */
@media (max-width: 767.98px) {
  h1 {
    font-size: 2.2rem;
  }
  
  h2 {
    font-size: 1.8rem;
  }
  
  section {
    padding: 60px 0;
  }
  

  .btn {
    padding: 10px 20px;
  }
  
  .activity-card {
    flex-direction: column;
  }
  
  .activity-date {
    width: 100%;
    flex-direction: row;
    padding: 10px;
    justify-content: center;
  }
  
  .day {
    font-size: 1.5rem;
    margin-right: 5px;
  }
  
  .month {
    font-size: 1.5rem;
  }
  
  .testimonial-item {
    padding: 20px;
  }
  
  .testimonial-text {
    font-size: 1rem;
  }
  
  .testimonial-text:before {
    font-size: 3rem;
    left: -15px;
    top: -20px;
  }
  
  .testimonial-img {
    width: 50px;
    height: 50px;
  }
  
  .carousel-control-prev {
    left: 2%;
  }
  
  .carousel-control-next {
    right: 2%;
  }
  
  .footer-section {
    padding: 60px 0 20px;
    text-align: center;
  }
  
  .social-links {
    justify-content: center;
    display: flex;
  }
}

/* Extra Small Screens */
@media (max-width: 575.98px) {
  h1 {
    font-size: 2rem;
  }
  
  h2 {
    font-size: 1.6rem;
  }
  
  .testimonial-item {
    padding: 15px;
  }
  

  
  .activity-content {
    padding: 15px;
  }
  
  .news-card img {
    height: 180px;
  }
}

       @media (max-width: 1199.98px) {
            .hero-title {
                font-size: 70px;
            }
            
            .hero-text {
                font-size: 1.8rem;
            }
            
            .bg-text-container span {
                font-size: 220px;
            }
        }

        @media (max-width: 991.98px) {
            .hero-title {
                font-size: 60px;
            }
            
            .hero-text {
                font-size: 1.6rem;
            }
            
            .bg-text-container span {
                font-size: 180px;
            }
            
            .img-principal {
                max-width: 300px;
                margin-top: 30px;
            }
        }

        @media (max-width: 767.98px) {
            .title-nav {
                display: none;
            }
            
            .logo-nav {
                width: 40px;
                height: 40px;
            }
            
            .hero-section {
                min-height: 100vh;
                text-align: center;
            }
            
            .hero-title {
                font-size: 45px !important;
                margin-bottom: 8px;
            }
            
            .hero-text {
                font-size: 1.4rem;
                margin: 15px 0;
            }
            
            .bg-text-container span {
                font-size: 120px;
            }
            
            .botonazo {
                padding: 12px 25px;
                font-size: 12px;
            }
            
            .img-principal {
                max-width: 250px;
                margin-top: 20px;
            }
            
            .nav-link {
                padding: 8px 12px !important;
            }
        }

        @media (max-width: 575.98px) {
            .hero-title {
                font-size: 35px !important;
            }
            
            .hero-text {
                font-size: 1.2rem;
            }
            
            .bg-text-container span {
                font-size: 80px;
            }
            
            .img-principal {
                max-width: 200px;
            }
            
            .botonazo {
                padding: 10px 20px;
                font-size: 11px;
            }
        }

        @media (max-width: 400px) {
            .hero-title {
                font-size: 28px !important;
            }
            
            .hero-text {
                font-size: 1rem;
            }
            
            .bg-text-container span {
                font-size: 60px;
            }
            
            .img-principal {
                max-width: 150px;
            }
        }

        /* Landscape orientation adjustments */
        @media (max-height: 500px) and (orientation: landscape) {
            .hero-section {
                min-height: 100vh;
            }
            
            .hero-title {
                font-size: 40px;
            }
            
            .hero-text {
                font-size: 1.2rem;
                margin: 10px 0;
            }
            
            .bg-text-container span {
                font-size: 100px;
            }
        }