/**
 * Mobile Performance CSS - CodeForged
 * Fixes for mobile display issues: title sizing and background visibility
 */

/* Mobile-specific fixes for hero section */
@media (max-width: 767px) {
    /* Fix FOUNDERS title sizing on mobile */
    .hero-wrapper-one .hero-content h1 {
        font-size: 70px !important;
        line-height: 1.1 !important;
        margin-bottom: 15px;
        letter-spacing: -1px;
        text-align: left !important;
    }
    
    /* Fix AGENCY big-text sizing on mobile */
    .hero-wrapper-one .hero-content .big-text {
        font-size: 70px !important;
        line-height: 1.1 !important;
        margin-bottom: 20px;
        letter-spacing: -1px;
        text-align: right !important;
    }
    
    /* Ensure background blur effects are visible on mobile */
    .hero-wrapper-one {
        background-color: #000 !important;
        position: relative;
        overflow: hidden;
    }
    
    /* Enhance blur effects visibility on mobile */
    .hero-wrapper-one .shape.shape-blur_one span {
        width: 300px !important;
        height: 300px !important;
        filter: blur(80px) !important;
        -webkit-filter: blur(80px) !important;
        opacity: 0.8 !important;
    }
    
    .hero-wrapper-one .shape.shape-blur_two span {
        width: 250px !important;
        height: 250px !important;
        filter: blur(60px) !important;
        -webkit-filter: blur(60px) !important;
        opacity: 0.7 !important;
    }
    
    .hero-wrapper-one .shape.shape-blur_three span {
        width: 400px !important;
        height: 400px !important;
        filter: blur(100px) !important;
        -webkit-filter: blur(100px) !important;
        opacity: 0.6 !important;
    }
    
    /* Improve text readability on mobile */
    .hero-wrapper-one .hero-content {
        position: relative;
        z-index: 2;
        margin-bottom: 80px;
    }
    
    .hero-wrapper-one .hero-content h1,
    .hero-wrapper-one .hero-content .big-text {
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
        color: #ffffff;
    }
    
    /* Adjust text box positioning on mobile */
    .hero-wrapper-one .hero-content .text-box {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        margin-top: 25px !important;
        max-width: 100% !important;
    }
    
    /* Improve button spacing on mobile */
    .hero-wrapper-one .hero-content .hero-button {
        margin-top: 40px !important;
    }
    
    .hero-wrapper-one .hero-content .hero-button .theme-btn {
        margin-bottom: 15px;
        display: block;
        width: 100%;
        text-align: center;
    }
    
    /* Adjust element positioning on mobile */
    .hero-wrapper-one .hero-content .element {
        position: absolute;
        top: -10px !important;
        right: 10px !important;
        transform: scale(0.8);
    }
}

/* Tablet adjustments */
@media (min-width: 768px) and (max-width: 991px) {
    .hero-wrapper-one .hero-content h1 {
        font-size: 50px !important;
        line-height: 1.1 !important;
    }
    
    .hero-wrapper-one .hero-content .big-text {
        font-size: 50px !important;
        line-height: 1.1 !important;
    }
}

/* Performance optimizations for mobile */
@media (max-width: 767px) {
    /* Reduce motion for better performance */
    .hero-wrapper-one .shape span {
        will-change: transform;
        transform: translate3d(0, 0, 0);
        backface-visibility: hidden;
    }
    
    /* Optimize text rendering */
    .hero-wrapper-one .hero-content h1,
    .hero-wrapper-one .hero-content .big-text {
        text-rendering: optimizeSpeed;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* Fix for very small screens */
@media (max-width: 480px) {
    .hero-wrapper-one .hero-content h1 {
        font-size: 70px !important;
        text-align: left !important;
    }
    
    .hero-wrapper-one .hero-content .big-text {
        font-size: 70px !important;
        text-align: right !important;
    }
    
    .hero-wrapper-one {
        padding: 120px 0 150px !important;
    }
}

/* Landscape mobile orientation */
@media (max-width: 767px) and (orientation: landscape) {
    .hero-wrapper-one {
        padding: 80px 0 100px !important;
    }
    
    .hero-wrapper-one .hero-content h1 {
        font-size: 70px !important;
        text-align: left !important;
    }
    
    .hero-wrapper-one .hero-content .big-text {
        font-size: 70px !important;
        text-align: right !important;
    }
}