/* Responsive Design - Mobile & Tablet */

/* Tablet and Below (1024px) */
@media (max-width: 1024px) {
    .container {
        padding: 0 var(--spacing-sm);
    }
    
    section {
        padding: 80px 0;
    }
    
    .section-title {
        font-size: var(--font-size-xl);
    }
    
    .section-subtitle {
        font-size: var(--font-size-sm);
    }
}

/* Mobile (768px and below) */
@media (max-width: 768px) {
    /* Logo */
    .logo-image {
        height: 45px;
    }
    
    /* Header / Navigation */
    .nav-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--overlay-dark);
        flex-direction: column;
        padding: var(--spacing-md);
        border-top: 1px solid rgba(0, 212, 255, 0.1);
    }
    
    .nav-menu.active {
        display: flex;
    }
    
    .nav-social-icons {
        display: none;
    }
    
    .mobile-toggle {
        display: flex;
    }
    
    /* General Sections */
    section {
        padding: 60px 0;
    }
    
    .section-header {
        margin-bottom: 40px;
    }
    
    .section-title {
        font-size: var(--font-size-xl);
    }
    
    /* Buttons */
    .btn {
        padding: 14px 32px;
        font-size: 0.95rem;
    }
    
    /* Footer */
    .footer-content {
        flex-direction: column;
    }
}

/* Small Mobile (480px and below) */
@media (max-width: 480px) {
    .container {
        padding: 0 var(--spacing-sm);
    }
    
    .section-title {
        font-size: var(--font-size-lg);
    }
    
    .section-subtitle {
        font-size: 0.95rem;
    }
    
    .btn {
        padding: 12px 24px;
        font-size: 0.9rem;
        width: 100%;
        max-width: 300px;
    }
}

/* Landscape Mobile */
@media (max-height: 600px) and (orientation: landscape) {
    .hero {
        min-height: auto;
        padding: 100px 0 60px;
    }
    
    section {
        padding: 50px 0;
    }
}