/* ===================================
   RESPONSIVE DESIGN
   Mobile and tablet breakpoints
   =================================== */

/* Tablet (768px and below) */
@media (max-width: 768px) {
    :root {
        --spacing-xl: 60px;
        --spacing-lg: 40px;
        --spacing-md: 30px;
    }
    
    h1 {
        font-size: 48px;
    }
    
    h2, .section-title {
        font-size: 36px;
    }
    
    h3 {
        font-size: 22px;
    }
    
    .hero-subtitle {
        font-size: 18px;
    }
    
    .cta-button {
        font-size: 16px;
        padding: 15px 30px;
    }
}

/* Mobile (480px and below) */
@media (max-width: 480px) {
    :root {
        --spacing-xl: 40px;
        --spacing-lg: 30px;
        --spacing-md: 20px;
    }
    
    h1 {
        font-size: 36px;
    }
    
    h2, .section-title {
        font-size: 28px;
    }
    
    .logo {
        font-size: 20px;
    }
    
    .contact-info {
        font-size: 11px;
        gap: 15px;
    }
    
    .feature-card,
    .course-content {
        padding: var(--spacing-sm);
    }
    
    .course-price {
        font-size: 28px;
    }
    
    .testimonial-text {
        font-size: 16px;
    }
}