/* Mobile optimizations */
@media (max-width: 768px) {
    .hero-content {
        padding: 0 15px;
    }
    
    .portfolio-nav {
        gap: 10px;
    }
    
    .nav-button {
        padding: 10px 20px;
        font-size: 0.9rem;
    }

    .items-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .item-card {
        padding: 20px;
    }
    
    .video-container {
        height: 180px;
    }
    
    .portfolio-section {
        padding: 60px 15px;
    }

    .hero-title {
        animation: none;
        background: #00f5ff;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}
/* ADD THIS TO THE END OF YOUR css/responsive.css file - DON'T REPLACE ANYTHING */

/* iOS Safari specific fixes for language toggle visibility */
@supports (-webkit-touch-callout: none) {
    /* Only target iOS Safari */
    @media (max-width: 768px) {
        .hero-content {
            padding-bottom: 60px; /* Extra space at bottom */
        }
        
        .language-toggle {
            margin-bottom: 3rem; /* More space below language buttons */
        }
        
        .hero-section {
            min-height: calc(100vh - 60px); /* Account for Safari UI bars */
        }
    }
}

/* Additional iPhone specific adjustments */
@media (max-width: 414px) and (max-height: 896px) {
    /* Target iPhone screens specifically */
    .hero-content {
        padding-bottom: 80px !important; /* Force extra bottom padding */
    }
    
    .language-toggle {
        margin-bottom: 4rem !important; /* Ensure it's always visible */
        position: relative;
        z-index: 10;
    }
}