/* Mobile Optimization & Fixes */

/* Critical: Prevent white screen issue */
* {
    -webkit-tap-highlight-color: transparent;
}

/* Prevent horizontal scroll on all devices */
html, body {
    max-width: 100vw;
    overflow-x: hidden !important;
    position: relative;
}

body {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background: #fff;
}

/* Fix for white screen - Force rendering */
body::before {
    content: '';
    display: block;
    width: 0;
    height: 0;
}

/* Fix container overflow */
.container, .container-fluid {
    max-width: 100%;
    overflow-x: hidden;
    position: relative;
}

/* Optimize images for mobile */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Fix video responsiveness */
.video-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 ratio */
    height: 0;
    overflow: hidden;
    background: #000;
}

.video-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* Performance optimization for mobile */
@media (max-width: 768px) {
    /* Hero section must be visible */
    .hero-landing,
    .hero-landing *,
    .section-title,
    h1, h2, h3, p {
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    .hero-landing {
        display: flex !important;
    }
    
    .hero-landing .container,
    .hero-landing .row,
    .hero-landing .col-lg-12 {
        display: flex !important;
    }
    
    .hero-landing .hero-title,
    .hero-landing .hero-subtitle {
        display: block !important;
    }
    
    /* Disable expensive animations on mobile */
    .course-card,
    .premium-course-card,
    .training-card,
    .shape,
    .floating-shapes {
        animation-duration: 0.3s !important;
        transition-duration: 0.2s !important;
    }
    
    /* Remove transforms that cause layout issues */
    .shape,
    .floating-shapes {
        display: none !important;
    }
    
    /* Simplify hover effects */
    .course-card:hover,
    .premium-course-card:hover,
    .training-card:hover {
        transform: translateY(-5px) !important;
        animation: none !important;
    }
    
    /* Fix navbar collapse */
    .navbar-collapse {
        background: rgba(0, 0, 0, 0.95);
        padding: 20px;
        margin-top: 10px;
        border-radius: 10px;
    }
    
    .nav-link {
        animation: none !important;
    }
    
    /* Optimize hero section */
    .hero-section {
        min-height: 70vh !important;
        padding: 100px 0 50px !important;
    }
    
    .hero-particles {
        display: none;
    }
    
    /* Fix button layout */
    .hero-buttons {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
        width: 100% !important;
    }
    
    .hero-buttons .btn {
        width: 100% !important;
        margin: 0 !important;
    }
    
    /* Fix grid layouts */
    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    [class*="col-"] {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    
    /* Fix cards */
    .course-card,
    .premium-course-card,
    .training-card {
        margin-bottom: 20px !important;
        animation: none !important;
    }
    
    /* Remove intensive animations */
    .crazySpin,
    .bounceCrazy,
    .wiggle,
    .rubberBand,
    .wobble {
        animation: none !important;
    }
}

/* Extra small devices */
@media (max-width: 576px) {
    /* Ensure text is readable */
    body {
        font-size: 14px;
    }
    
    h1, .h1 {
        font-size: 1.8rem !important;
    }
    
    h2, .h2 {
        font-size: 1.5rem !important;
    }
    
    h3, .h3 {
        font-size: 1.3rem !important;
    }
    
    h4, .h4 {
        font-size: 1.1rem !important;
    }
    
    h5, .h5 {
        font-size: 1rem !important;
    }
    
    /* Fix padding */
    .section-padding {
        padding: 50px 0 !important;
    }
    
    .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    /* Fix hero */
    .hero-section {
        min-height: 60vh !important;
        padding: 80px 0 40px !important;
    }
    
    .hero-title {
        font-size: 1.8rem !important;
        line-height: 1.3 !important;
    }
    
    .hero-subtitle {
        font-size: 1rem !important;
        line-height: 1.5 !important;
    }
    
    /* Simplify cards */
    .course-card,
    .premium-course-card,
    .training-card,
    .stat-box {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    }
    
    /* Remove all complex animations */
    * {
        animation: none !important;
        transition: transform 0.2s ease, opacity 0.2s ease !important;
    }
    
    /* Fix icons */
    .training-icon {
        width: 80px !important;
        height: 80px !important;
    }
    
    .training-icon img {
        width: 50px !important;
        height: 50px !important;
    }
    
    /* Fix footer */
    .footer-social {
        justify-content: center !important;
    }
    
    .info-item {
        flex-direction: column !important;
        text-align: center !important;
        align-items: center !important;
    }
    
    /* Fix back to top button */
    .back-to-top {
        width: 45px !important;
        height: 45px !important;
        bottom: 15px !important;
        left: 15px !important;
    }
}

/* Very small devices (iPhone SE, etc.) */
@media (max-width: 375px) {
    body {
        font-size: 13px;
    }
    
    .hero-title {
        font-size: 1.6rem !important;
    }
    
    .section-title {
        font-size: 1.4rem !important;
    }
    
    .hero-buttons .btn {
        padding: 12px 20px !important;
        font-size: 0.9rem !important;
    }
    
    .training-icon {
        width: 70px !important;
        height: 70px !important;
    }
    
    .training-icon img {
        width: 40px !important;
        height: 40px !important;
    }
}

/* Fix for white screen issue */
@media (max-width: 768px) {
    /* Prevent rendering issues */
    body {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
    
    /* Force hardware acceleration for smoother performance */
    .hero-section,
    .navbar,
    .course-card,
    .premium-course-card,
    .training-card {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        will-change: auto;
    }
    
    /* Disable complex CSS features that might cause white screen */
    .shape,
    .floating-shapes,
    .hero-particles,
    [class*="gradient"] {
        display: none !important;
    }
    
    /* Simplify backgrounds */
    .hero-section {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    }
}

/* Landscape mode fixes */
@media (max-width: 768px) and (orientation: landscape) {
    .hero-section {
        min-height: 100vh !important;
    }
    
    .section-padding {
        padding: 40px 0 !important;
    }
}