/* ========================================
   MOBILE LAYOUT & PERFORMANCE FIXES
   ======================================== */

/* FAQ Contact Section - Mobile Fix */
@media (max-width: 768px) {
    .faqs-contact-item-box {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
    }
    
    .cta-contact-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        width: 100% !important;
        padding: 12px !important;
        gap: 8px !important;
    }
    
    .cta-contact-header {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        width: 100% !important;
    }
    
    .cta-contact-header h3 {
        margin: 0 !important;
        font-size: 14px !important;
    }
    
    .cta-contact-item-content {
        width: 100% !important;
        padding-left: 0 !important;
    }
    
    .cta-contact-item-content p {
        margin: 0 !important;
        font-size: 14px !important;
        word-break: break-word !important;
    }
    
    .cta-contact-item-content a {
        display: inline-block !important;
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}

/* Button Width Fixes - NOT full width on mobile */
@media only screen and (max-width: 991px) {
    .btn-default::before {
        top: 5px;
        right: 5px;
    }
}

@media (max-width: 768px) {
    /* Hero info buttons - larger and more prominent */
    .hero-info-btn {
        display: flex !important;
        justify-content: flex-start !important;
    }
    
    .hero-info-btn a {
        width: auto !important;
        max-width: 100% !important;
        flex-shrink: 1 !important;
    }
    
    /* Specific button overrides - Larger on mobile */
    .hero-info-btn .btn-default,
    .hero-info-btn .btn-highlighted {
        width: auto !important;
        padding: 21px 135px !important;
        font-size: 19px !important;
    }
}

/* Performance Optimizations */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Reduce repaints */
img,
iframe,
video {
    will-change: auto;
    transform: translateZ(0);
}

/* Optimize animations */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Lazy load optimization */
img[loading='lazy'] {
    content-visibility: auto;
}

/* Reduce animation costs on mobile */
@media (max-width: 768px) {
    .wow {
        animation-duration: 0.3s !important;
    }
    
    /* Disable expensive transforms */
    .parallaxie {
        background-attachment: scroll !important;
    }
}

/* Optimize iframes */
iframe {
    contain: content;
}

/* Critical CSS - reduce layout shifts */
.hero-info-list,
.premium-cards-grid,
.stressors-grid {
    contain: layout style;
}

/* Prevent layout shift */
img {
    height: auto;
    max-width: 100%;
}

/* Optimize Three.js canvas with GPU acceleration */
#canvas-container {
    will-change: auto !important;
    transform: translateZ(0);
    backface-visibility: hidden;
}

@media (max-width: 768px) {
    /* Keep particles but optimize for mobile performance */
    #canvas-container {
        opacity: 0.7 !important;  /* Slightly lighter on mobile */
    }
    
    #canvas-container canvas {
        will-change: transform !important;
        transform: translate3d(0, 0, 0) !important;
    }
}

/* Reduce animation complexity */
@media (max-width: 768px) {
    .text-anime-style-2 {
        animation: none !important;
    }
}