/* Responsive Improvements */

/* Fix for Stats Title */
.stats-title-responsive {
    color: white;
    text-shadow: 0 4px 10px rgba(0,0,0,0.2);
    font-size: 3.5rem;
    position: relative;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .stats-title-responsive {
        font-size: 8vw; /* Fluid typography */
        white-space: normal; /* Allow wrap on mobile */
        line-height: 1.2;
    }
}

/* Fix for Grids on Mobile */
@media (max-width: 480px) {
    .why-grid, .stats-grid, .plans-grid, .programs-grid, .footer-content {
        grid-template-columns: 1fr !important;
    }
    
    .plan-card, .program-card {
        margin-bottom: 1.5rem;
    }

    /* Fix Image Heights */
    .hero-image-placeholder, .about-image-placeholder {
        height: 300px !important;
    }
    
    /* Reduce Section Padding */
    .section {
        padding: 4rem 0 !important;
    }
    
    .stats-section, .testimonial-section {
        padding: 4rem 0 !important;
    }

    /* Typography Adjustments */
    .hero-title {
        font-size: 2.5rem !important;
    }
    
    .section-title {
        font-size: 2rem !important;
    }
    
    /* Adjust Buttons */
    .hero-buttons {
        flex-direction: column;
        width: 100%;
    }
    
    .btn {
        width: 100%;
    }
    
    /* Stats grid */
    .stats-grid {
        gap: 2rem;
    }
    
    /* Fix header height on scroll */
    header.scrolled .logo-name {
        font-size: 1.8rem;
    }
    
    .logo img {
        height: 40px;
    }
}

/* Fix Hero Container on Tablet/Mobile */
@media (max-width: 968px) {
    .hero-container {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .hero-image-wrapper {
        margin-top: 3rem;
        order: -1; /* Image first on mobile? Usually better after text, but let's keep text first for SEO/Conversion */
        order: 1;
    }
    
    .hero-subtitle {
        margin-left: auto;
        margin-right: auto;
    }
    
    .hero-buttons {
        justify-content: center;
    }
    
    .nav-actions {
        display: none;
    }
    
    /* Ensure hamburger is visible (it has display:none in base styles potentially, need to check) */
    /* It's handled in styles.css but let's reinforce */
}