/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-theme/
Description: Child theme for Hello Elementor
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 1.0.4
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
*/

/* Mobile Fixes */
@media (max-width: 767px) {

    /* =========================================
       0. Prevent Horizontal Scroll
       ========================================= */
    html,
    body {
        overflow-x: hidden;
    }

    /* =========================================
       0.1 Fix "Years of Experience" Box Overflow
       ========================================= */
    /* Reset any absolute/offset positioning on overlapping boxes */
    .e-con[data-settings*="position"],
    .elementor-widget-container[style*="position: absolute"],
    .elementor-element[style*="position: absolute"] {
        position: static !important;
        transform: none !important;
        margin: 0 auto !important;
    }

    /* Ensure all content boxes stay within viewport */
    .e-con,
    .elementor-widget-wrap,
    .elementor-widget-container {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* =========================================
       1. Fix Logo Size 
       ========================================= */
    #masthead .elementor-widget-image img,
    header .elementor-widget-image img,
    .elementor-location-header .elementor-widget-image img,
    img[src*="bandhwhite"],
    .site-header .elementor-widget-image img,
    .site-header .custom-logo-link img {
        max-width: 150px !important;
        width: auto !important;
        height: auto !important;
    }

    /* =========================================
       2. Fix Mobile Header Alignment (Row Layout)
       ========================================= */

    /* Target the main Flexbox container in the header */
    .elementor-location-header .e-con,
    header .e-con {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    /* Force the Logo and Menu containers to auto width so they fit on one line */
    .elementor-location-header .e-con>.elementor-element,
    header .e-con>.elementor-element {
        width: auto !important;
        max-width: 70% !important;
        min-width: 0 !important;
        flex-grow: 0 !important;
    }

    /* Logo on the Left */
    .elementor-location-header .e-con .elementor-widget-image,
    header .e-con .elementor-widget-image {
        text-align: left;
    }

    /* Menu on the Right */
    .elementor-location-header .e-con .elementor-widget-jkit_nav_menu,
    header .e-con .elementor-widget-jkit_nav_menu {
        text-align: right;
        display: flex;
        justify-content: flex-end;
        margin-left: auto;
        /* Push to far right */
    }

    /* =========================================
       3. Fix Menu Design (Color & Dropdown)
       ========================================= */

    /* Change Hamburger Button Color to Dark Blue */
    .jkit-hamburger-menu {
        background-color: #0B2B48 !important;
        border-color: #0B2B48 !important;
    }

    /* Fix Dropdown Content Alignment (Left instead of Right) */
    .jkit-menu-container,
    .jkit-nav-menu li,
    .jkit-nav-menu a {
        text-align: left !important;
        justify-content: flex-start !important;
    }

    /* Ensure Dropdown takes full width if needed */
    .jkit-menu-container {
        width: 100% !important;
    }


    /* =========================================
       4. Fix Padding for Content Sections 
       ========================================= */
    .e-con>.e-con-inner,
    .e-con {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .elementor-section-wrap .elementor-section>.elementor-container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}