/* ===================================
   RESPONSIVE DESIGN
   =================================== */

/* Tablet & Medium Screens */
@media (max-width: 968px) {
    /* Hero Section */
    .hero-content {
        flex-direction: column;
        text-align: center;
    }
    
    .hero-text {
        text-align: center;
    }
    
    .hero-text h1 {
        font-size: 2rem;
    }
    
    .hero-text .subtitle {
        font-size: 1.5rem;
    }
    
    /* Content Grid */
    .content-grid {
        grid-template-columns: 1fr;
    }
    
    /* Social Links */
    .social-grid {
        grid-template-columns: 1fr;
    }

    /* Navigation */
    nav {
        gap: 1rem;
    }
    
    .nav-link {
        padding: 0.6rem 1rem;
        font-size: 0.9rem;
    }
}

/* Mobile Screens */
@media (max-width: 640px) {
    /* Navigation - Icon Mode */
    .nav-text {
        display: none;
    }
    
    .nav-icon {
        display: block;
        width: 24px;
        height: 24px;
    }

    nav {
        gap: 1rem;
        padding: 0;
        height: 60px;
    }
    
    .logo {
        width: 70px;
        height: 70px;
    }

    .logo-link {
        margin: 0 0.5rem;
    }

    .nav-link {
        padding: 0.75rem 1.25rem;
        min-width: auto;
        border-radius: 2rem;
    }
    
    /* Hero Section */
    .hero-content {
        padding: 2rem;
    }
    
    .hero-text h1 {
        font-size: 1.75rem;
    }
    
    .hero-text .subtitle {
        font-size: 1.25rem;
    }
    
    /* Contact Section */
    .contact-content {
        padding: 2rem;
    }
    
    .contact-content h2 {
        font-size: 1.5rem;
    }
}