/* Mobile Fixes CSS */

/* Fix horizontal scrolling on mobile devices */
@media only screen and (max-width: 991px) {
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Reset all margins and padding that might cause right shift */
    * {
        box-sizing: border-box !important;
    }
    
    /* Ensure all containers don't exceed viewport width and are properly aligned */
    .container,
    .container-fluid {
        max-width: 100% !important;
        overflow-x: hidden !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        width: 100% !important;
    }
    
    .row {
        margin-left: -15px !important;
        margin-right: -15px !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    
    .col-12,
    [class*="col-"] {
        max-width: 100% !important;
        overflow-x: hidden !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    /* Fix any potential width issues with content */
    .hero-content,
    .about-content-part,
    .single-project-page-right,
    .footer-top,
    .section-title,
    .single-project-page-left {
        overflow-x: hidden !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Ensure main content areas are properly aligned */
    .main-header,
    .hero-area,
    .about-area,
    .single-page-hero-area,
    .single-project-page-design,
    .main-footer {
        overflow-x: hidden !important;
        max-width: 100% !important;
    }
    
    /* Fix doubled navigation - hide original nav on mobile */
    .main-header .main-menu {
        display: none !important;
    }
    
    /* Fix for name typography on mobile - smaller font size */
    .hero-content h2 {
        font-size: 3.2rem !important;
        line-height: 1.1 !important;
        margin-bottom: 20px !important;
        word-break: break-word !important;
    }
    
    /* Ensure hero content fits properly */
    .hero-content h1 {
        font-size: 2.8rem !important;
        line-height: 1.1 !important;
    }
    
    .hero-content p {
        font-size: 16px !important;
        line-height: 1.4 !important;
        margin-bottom: 25px !important;
    }
    
    /* Ensure images don't cause overflow */
    img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* Mobile menu improvements */
    .mean-nav .has-dropdown .sub-menu {
        display: block !important;
        position: static !important;
        width: 100% !important;
        box-shadow: none !important;
        background: transparent !important;
        margin-left: 20px !important;
        border-left: 2px solid rgba(255, 255, 255, 0.1) !important;
    }
    
    /* Hide the expand icon for mobile menu dropdowns */
    .mean-nav .mean-expand {
        display: none !important;
    }
    
    /* Style the sub-menu items */
    .mean-nav .sub-menu li {
        padding: 5px 0 !important;
    }
    
    .mean-nav .sub-menu li a {
        padding: 8px 15px !important;
        font-size: 14px !important;
        color: rgba(255, 255, 255, 0.8) !important;
        display: block !important;
    }
    
    .mean-nav .sub-menu li a:hover {
        color: var(--primary-color) !important;
    }
    
    /* Ensure dropdown is always visible on mobile */
    .mean-nav .has-dropdown:hover .sub-menu,
    .mean-nav .has-dropdown .sub-menu {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/* Additional fixes for very small screens */
@media only screen and (max-width: 480px) {
    body {
        min-width: 320px !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .container {
        padding-left: 10px !important;
        padding-right: 10px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100% !important;
    }
    
    .row {
        margin-left: -10px !important;
        margin-right: -10px !important;
    }
    
    [class*="col-"] {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    
    /* Even smaller typography for very small screens */
    .hero-content h2 {
        font-size: 2.8rem !important;
        line-height: 1.0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .hero-content h1 {
        font-size: 2.4rem !important;
        line-height: 1.0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .hero-content p {
        font-size: 14px !important;
        line-height: 1.3 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Ensure all content areas are properly aligned */
    .hero-content,
    .about-content-part,
    .single-project-page-right {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* Fix for tablets */
@media only screen and (min-width: 481px) and (max-width: 768px) {
    .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    
    .row {
        margin-left: -20px !important;
        margin-right: -20px !important;
    }
    
    [class*="col-"] {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    
    .hero-content h2 {
        font-size: 3.8rem !important;
        line-height: 1.1 !important;
    }
    
    .hero-content h1 {
        font-size: 3.2rem !important;
        line-height: 1.1 !important;
    }
}