/* Mobile Responsiveness Fixes
   These styles will only apply to mobile devices and won't affect desktop appearance */

@media (max-width: 768px) {    
    /* Fix loading video zoom issue */
    #loading-video {
        transform: translateX(-50%) translateY(-50%) scale(1.0) !important;
        object-fit: cover !important;
        height: 100% !important;
        width: 100% !important;
    }
    
    /* Fix portfolio section overlap issues */
    .portfolio-section {
        height: auto !important;
        position: relative !important;
        padding: 80px 0 40px 0 !important;
    }
    
    .portfolio-wrapper {
        height: auto !important;
    }
    
    .portfolio-spacer {
        height: 20px !important;
    }

    /* General fixes */
    body {
        overflow-x: hidden;
    }
    
    /* Fix container padding */
    .container {
        padding: 0 15px;
    }
    
    /* Navigation fixes */
    .nav-container {
        padding: 0 15px;
    }
    
    .nav-logo {
        min-width: auto !important;
    }
    
    /* Hero section fixes */
    .hero-title {
        font-size: 2rem;
        line-height: 1.2;
    }
    
    .hero-subtitle {
        font-size: 1.5rem;
        line-height: 1.3;
    }
    
    .hero-stats {
        flex-wrap: wrap;
        justify-content: space-around;
        gap: 15px;
    }
    
    .stat-item {
        width: 30%;
    }
    
    /* Portfolio section fixes */
    .portfolio-grid {
        width: 100% !important;
        transform: none !important;
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
    }
    
    .portfolio-item {
        width: 90% !important;
        height: 250px !important;
        margin-bottom: 15px;
    }
    
    /* Services section fixes */
    .service-card {
        margin-bottom: 15px;
    }
    
    /* About section fixes */
    .about-content {
        grid-template-columns: 1fr !important;
    }
    
    .about-image-container {
        height: 300px !important;
        margin: 0 auto;
        width: 90%;
    }
    
    /* Contact section fixes */
    .contact-form {
        width: 100%;
    }
    
    .form-group input,
    .form-group textarea {
        width: 100%;
    }
    
    /* Social section fixes */
    .instagram-link {
        padding: 12px 25px;
        font-size: 14px;
    }
    
    /* Fix lightbox for mobile */
    .lightbox img {
        max-width: 95%;
        max-height: 80%;
    }
    
    .lightbox-close {
        top: 15px;
        right: 15px;
    }
    
    /* Fix portfolio overlay text */
    .portfolio-overlay {
        transform: translateY(0) !important;
        background: linear-gradient(transparent, rgba(0, 0, 0, 0.9)) !important;
        opacity: 0.9;
    }
    
    /* Fix footer overlap */
    .footer {
        padding-bottom: 60px !important;
    }
    
    /* Fix visit counter position */
    .visit-counter {
        bottom: 10px !important;
        z-index: 100 !important;
    }
    
    /* Improve animation performance on mobile */
    #particles-canvas {
        opacity: 0.3 !important;
    }
}

/* Small mobile devices */
@media (max-width: 480px) {
    /* Further reduce sizes for very small screens */
    .hero-title {
        font-size: 1.8rem;
    }
    
    .hero-subtitle {
        font-size: 1.3rem;
    }
    
    .hero-button {
        padding: 12px 25px;
        font-size: 14px;
    }
    
    .section-title {
        font-size: 1.8rem;
        margin-bottom: 40px;
    }
    
    .portfolio-item {
        height: 220px !important;
    }
    
    .stat-item {
        width: 45%;
    }
    
    /* Fix menu for very small screens */
    .nav-menu.active {
        width: 100%;
    }
}

/* Fix for portfolio horizontal scrolling issue */
.portfolio-container {
    overflow-x: hidden !important;
}

/* Fix for hamburger menu on mobile */
@media (max-width: 768px) {
    .hamburger {
        z-index: 1002;
    }
    
    .nav-menu {
        width: 100%;
        right: -100%;
    }
    
    .nav-menu.active {
        right: 0;
    }
}