/* ==========================================================================
   Mobile Optimization Start
   ========================================================================== */

/* Hide the default MeanMenu toggle bar COMPLETELY */
.mean-container .mean-bar,
.mean-bar {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    opacity: 0 !important;
}

/* Ensure the custom sidebar toggle button is visible and properly positioned */
.sidebar__toggle {
    display: block !important;
}

/* Custom Desktop Compatibility Fixes - Exact Match to Design */
.impact-number {
    font-size: 60px !important;
    line-height: 0.9 !important;
    font-weight: 500 !important;
    color: #fff;
    margin-bottom: 0;
    letter-spacing: -2px;
}

.impact-desc {
    font-size: 18px !important;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.2;
    margin-top: 5px;
}

/* Ensure desktop text is left aligned and positioned correctly */
@media (min-width: 992px) {
    .impact-col-right {
        padding-left: 15px !important;
    }

    .hero-image-items .row {
        text-align: left !important;
    }

    /* Right column stats - align to the right */
    .impact-col-right .impact-number,
    .impact-col-right .impact-desc {
        text-align: right !important;
    }
}

/* Fix for overlapping cards on mobile */
@media (max-width: 991px) {
    .header-main {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .header-right {
        display: block !important;
    }

    /* Ensure cards stack properly without overlap */
    .hero-banner-items .row {
        display: flex;
        flex-direction: column;
        gap: 30px;
        /* Add space between stored cards */
    }

    .hero-image-items {
        height: auto !important;
        /* Allow height to adjust */
        margin-bottom: 0;
        position: relative;
        overflow: hidden;
        /* Prevent spillover */
        border-radius: 20px;
        /* Keep style */
    }

    .hero-image-items img {
        width: 100%;
        height: 100%;
        min-height: 450px;
        /* Ensure bg image is tall enough for content */
        object-fit: cover;
    }
}

/* --- Hero Metrics Styling for Mobile --- */
@media (max-width: 991px) {

    /* Container with full background image and overlaid stats */
    .hero-image-items {
        height: auto !important;
        min-height: 500px !important;
        margin-bottom: 0;
        position: relative;
        overflow: hidden !important;
        border-radius: 20px;
        background: #000;
        display: block;
    }

    /* The background image - full height, not cropped */
    .hero-image-items img {
        width: 100%;
        height: 100% !important;
        min-height: 500px !important;
        object-fit: cover;
        position: absolute !important;
        top: 0;
        left: 0;
        border-radius: 20px;
    }

    /* "Our impact in numbers" title on top of the image */
    .impact-title {
        position: absolute;
        top: 20px;
        left: 20px;
        margin: 0;
        font-size: 45px;
        padding: 0;
        width: auto;
        z-index: 2;
    }

    /* The stats box overlaid on the image */
    .impact-content {
        position: absolute !important;
        bottom: 20px !important;
        left: 0;
        right: 0;
        padding: 0 15px !important;
        background: transparent !important;
        width: 100%;
        z-index: 2;
    }

    /* Grid Layout for Metrics - Forces 2x2 Layout */
    .impact-content .row {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 25px 20px !important;
        margin: 0 !important;
        width: 100% !important;
        padding: 0;
    }

    /* Metric Items - Force them to fit the grid cell */
    .impact-content .row>div,
    .col-sm-6 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Left column - align left */
    .impact-content .row>div:nth-child(odd) {
        text-align: left !important;
    }

    .impact-content .row>div:nth-child(odd) .impact-number,
    .impact-content .row>div:nth-child(odd) .impact-desc {
        text-align: left !important;
    }

    /* Right column - keep centered */
    .impact-content .row>div:nth-child(even) {
        text-align: center !important;
    }

    .impact-content .row>div:nth-child(even) .impact-number,
    .impact-content .row>div:nth-child(even) .impact-desc {
        text-align: center !important;
    }

    /* Remove specific right-column styling */
    .impact-col-right {
        padding-left: 0 !important;
    }

    /* Style the number */
    .impact-number {
        font-size: 52px !important;
        line-height: 1;
        margin-bottom: 8px;
        font-weight: 500 !important;
    }

    /* Style the description text */
    .impact-desc {
        font-size: 16px !important;
        padding: 0 5px;
        line-height: 1.3;
        min-height: auto;
    }
}

/* Main Menu Improvements for Mobile */
.mobile-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-menu ul li {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    /* Lighter border for light mode sidebar */
    position: relative;
}

.mobile-menu ul li a {
    display: block;
    padding: 15px 0;
    font-size: 16px;
    font-weight: 600;
    color: #ffffff !important;
    /* Force white text */
    text-transform: capitalize;
    transition: all 0.3s ease;
    text-decoration: none;
}

.mobile-menu ul li a:hover {
    color: var(--theme) !important;
    padding-left: 5px;
}

.mobile-menu ul li .submenu {
    display: none;
    padding-left: 20px;
    background: rgba(255, 255, 255, 0.05);
    /* Slight white tint for contrast on dark bg */
}

.mobile-menu ul li .submenu li {
    border-bottom: none;
}

.mobile-menu ul li .submenu li a {
    padding: 10px 0;
    font-size: 14px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.8) !important;
    /* Slightly dimmer white for sub-items */
}

/* Float logic for submenu arrow */
.mobile-menu .has-dropdown>a i {
    float: right;
    margin-top: 5px;
    transition: transform 0.3s;
    color: #ffffff;
    /* Ensure arrow is also white */
}

.mobile-menu .has-dropdown.active>a i {
    transform: rotate(180deg);
}

/* Hide the Desktop Menu Links on Mobile/Tablet */
/* We disabled meanmenu JS, so we must manually hide the desktop nav list */
@media (max-width: 1199px) {

    .mean__menu-wrapper,
    .main-menu {
        display: none !important;
    }
}

/* Custom Mobile Reordering for About Section */
@media (max-width: 991px) {
    .column-reverse-mobile {
        display: flex;
        flex-direction: column-reverse;
    }

    .about-image-items {
        margin-top: 30px;
        margin-bottom: 20px;
    }

    /* Decrease margin on top of news section if needed */
    .news-section {
        padding-top: 50px;
    }

    /* Add space between individual blog cards on mobile */
    .news-box-items {
        margin-bottom: 60px !important;
    }

    .news-section .row .col-md-6:last-child .news-box-items {
        margin-bottom: 0 !important;
    }

    /* Make blog cards more compact on mobile */
    .news-box-items .content {
        padding: 18px !important;
    }

    .news-box-items .thumb {
        height: 200px;
        overflow: hidden;
    }

    .news-box-items .thumb img {
        height: 100%;
        object-fit: cover;
    }

    .news-box-items .content h3 {
        font-size: 20px !important;
        margin-bottom: 15px !important;
    }

    /* Center all section titles and content on mobile */
    .section-title,
    .section-title h6,
    .section-title h2,
    .section-title p,
    .about-content,
    .about-content .section-title,
    .service-left-items,
    .service-left-items .section-title,
    .how-work-section .section-title,
    .news-section .section-title {
        text-align: center !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* Force Contact Info to be Visible on Mobile */
@media (max-width: 575px) {
    .offcanvas__wrapper .offcanvas__contact ul {
        display: block !important;
    }

    .offcanvas__wrapper .offcanvas__contact ul li {
        margin-bottom: 15px;
    }
}

/* Custom Stacking for "Why Clients Turn to Us" Cards on Mobile */
@media (max-width: 991px) {

    /* Restore normal margins/padding for the project section to remove weird outline */
    .project-section {
        margin: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
    }

    /* Ensure the wrapper allows flow but doesn't clip sticky items */
    .project-box-area,
    .des-portfolio-wrap {
        overflow: visible !important;
        height: auto !important;
    }

    /* Base Card Styling for Stacking */
    .project-box-items {
        position: sticky !important;
        left: 0;
        width: 100%;
        margin-bottom: 40px !important;
        /* Space closer to create layout before sticking */
        background: #110b3c;
        /* Ensure solid background so we don't see cards behind */
        border: 1px solid rgba(255, 255, 255, 0.1);
        /* Subtle border for definition */
        border-radius: 20px;
        /* layout consistency */
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        height: auto !important;
        box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.5);
        /* Shadow for depth */
    }

    /* Stacking Logic - Incrementing Top value */
    .project-box-items:nth-of-type(1) {
        top: 100px !important;
        z-index: 1;
    }

    .project-box-items:nth-of-type(2) {
        top: 120px !important;
        z-index: 2;
    }

    .project-box-items:nth-of-type(3) {
        top: 140px !important;
        z-index: 3;
    }

    .project-box-items:nth-of-type(4) {
        top: 160px !important;
        z-index: 4;
    }

    /* Fix Image Corners */
    .project-box-items .thumb img {
        border-radius: 12px !important;
        height: auto !important;
        width: 100%;
    }

    /* Content spacing */
    .project-box-items .content {
        width: 100%;
        margin-bottom: 20px;
        padding: 10px;
    }
}