/* Tablets */
@media (max-width: 1024px) {
    .hero h1 {
        font-size: 3rem;
    }
    
    .section-title h2 {
        font-size: 2.2rem;
    }
    
    .feature-card {
        padding: 2rem;
    }
}

/* Mobile Large */
@media (max-width: 768px) {
    .navbar-brand {
        font-size: 1.5rem;
    }
    
    .hero {
        padding: 80px 0;
        text-align: center;
    }
    
    .hero h1 {
        font-size: 2.5rem;
    }
    
    .hero p {
        font-size: 1.1rem;
    }
    
    .hero-stats {
        flex-direction: column;
        gap: 1.5rem;
    }
    
    .section-title h2 {
        font-size: 2rem;
    }
    
    .section-title p {
        font-size: 1.1rem;
    }
    
    .features,
    .courses {
        padding: 60px 0;
    }
    
    .cta h2 {
        font-size: 2rem;
    }
    
    .cta p {
        font-size: 1.1rem;
    }
    
    .footer {
        padding: 40px 0 20px;
    }
}

/* Mobile Small */
@media (max-width: 480px) {
    .hero h1 {
        font-size: 2rem;
    }
    
    .hero p {
        font-size: 1rem;
    }
    
    .section-title h2 {
        font-size: 1.8rem;
    }
    
    .btn-gold,
    .btn-outline-gold {
        padding: 0.6rem 1.5rem;
        font-size: 0.9rem;
    }
    
    .feature-card {
        padding: 1.5rem;
    }
    
    .course-content {
        padding: 1rem;
    }
    
    .cta {
        padding: 60px 0;
    }
    
    .cta h2 {
        font-size: 1.8rem;
    }
}

/* Landscape Mobile */
@media (max-height: 500px) and (orientation: landscape) {
    .hero {
        padding: 60px 0;
    }
    
    .hero h1 {
        font-size: 2rem;
        margin-bottom: 1rem;
    }
    
    .hero p {
        font-size: 1rem;
        margin-bottom: 1rem;
    }
}

/* High-resolution displays */
@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }
}

/* Print styles */
@media print {
    .navbar,
    .cta,
    .footer {
        display: none;
    }
    
    .hero {
        background: white !important;
        color: black !important;
        padding: 20px 0;
    }
    
    .hero h1 {
        background: black !important;
        -webkit-text-fill-color: black !important;
    }
}