/* Responsive CSS */

/* Large screens (up to 1200px) */
@media (max-width: 1200px) {
    .container {
        padding: 0 30px;
    }
}

/* Tablets / Medium screens (up to 1200px) */
@media (max-width: 1200px) {
    /* Mobile Menu */
    .navbar {
        position: fixed;
        top: 0;
        right: -100%;
        width: 300px;
        height: 100vh;
        background: var(--bg-light);
        box-shadow: -5px 0 15px rgba(0,0,0,0.1);
        padding: 80px 30px;
        transition: right var(--transition-normal);
        z-index: 999;
    }
    
    .navbar.active {
        right: 0;
    }
    
    .navbar .nav-links {
        flex-direction: column;
        gap: 20px;
    }
    
    .mobile-menu-btn {
        display: block;
        z-index: 1001;
    }

    /* Stats Grid */
    .stats-grid { 
        grid-template-columns: repeat(2, 1fr); 
    }
}

/* Tablets / Medium-small screens (up to 992px) */
@media (max-width: 992px) {
    .footer-grid { 
        grid-template-columns: repeat(2, 1fr); 
    }
}

/* Mobile screens (up to 768px) */
@media (max-width: 768px) {
    .grid-2 {
        grid-template-columns: 1fr;
    }

    .hero-title { font-size: 2.2rem; }
    .hero-section { height: 65vh; min-height: 450px; }
    .hero-subtitle { font-size: 1.2rem; }
    .hero-tagline { font-size: 1.5rem; }
    .hero-buttons { flex-direction: column; padding: 0 20px; }
    
    .section {
        padding: 3rem 0;
    }
    
    .section-title {
        font-size: 2rem;
    }
    
    .page-header h1 {
        font-size: 2.2rem;
    }
}

/* Small mobile screens (up to 576px) */
@media (max-width: 576px) {
    .footer-grid { 
        grid-template-columns: 1fr; 
    }
    .footer-bottom .container { 
        flex-direction: column; gap: 10px; 
    }
    
    .stats-grid { 
        grid-template-columns: 1fr; 
    }
}

/* Extra small mobile screens (up to 480px) */
@media (max-width: 480px) {
    .hero-title { font-size: 2rem; }
}