/* ==========================================================================
   Mobile Responsiveness Fix for kbsolutions.agency

   ROOT CAUSE of old bugs:
   1. Desktop CSS: .menu_inner_sec { opacity:0 } — never reset on mobile
   2. li:hover sets opacity:1, but touch hover is temporary → flash
   3. li.list_hoverClass { height:62px; overflow:hidden } clips submenus
   4. The existing JS uses slideDown/slideUp which sets display but NOT opacity
   ========================================================================== */

/* ---------- Mobile nav logo - hidden on desktop ---------- */
.mobile-nav-logo {
    display: none;
}

/* ---------- Desktop nav shadow: none at top, subtle on scroll ---------- */
.header {
    box-shadow: none !important;
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    transition: box-shadow 0.3s ease !important;
}

.header.fixed {
    box-shadow: 0px 1px 3px rgba(3, 7, 18, 0.02),
        0px 5px 13px rgba(3, 7, 18, 0.04),
        0px 11px 30px rgba(3, 7, 18, 0.06),
        0px 19px 53px rgba(3, 7, 18, 0.08) !important;
    -moz-box-shadow: 0px 1px 3px rgba(3, 7, 18, 0.02),
        0px 5px 13px rgba(3, 7, 18, 0.04),
        0px 11px 30px rgba(3, 7, 18, 0.06),
        0px 19px 53px rgba(3, 7, 18, 0.08) !important;
    -webkit-box-shadow: 0px 1px 3px rgba(3, 7, 18, 0.02),
        0px 5px 13px rgba(3, 7, 18, 0.04),
        0px 11px 30px rgba(3, 7, 18, 0.06),
        0px 19px 53px rgba(3, 7, 18, 0.08) !important;
}

/* ---------- Prevent horizontal scroll ---------- */
html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

/* ==========================================================================
   768px - 991px: Extend mobile nav to tablets
   The existing cmnCss.css only triggers mobile nav at 767px.
   ========================================================================== */
@media only screen and (max-width: 991px) and (min-width: 768px) {

    /* Show hamburger menu button */
    .header .header_right_menu .menu_icon {
        display: block !important;
    }

    /* Mobile drawer - WHITE background instead of transparent */
    .header .header_right_menu .header_menuList_outer {
        background: #ffffff !important;
        bottom: 0 !important;
        float: left !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 0 !important;
        position: fixed !important;
        right: -100% !important;
        top: 0 !important;
        width: 100% !important;
        z-index: 9999999 !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Close button */
    .header .header_right_menu .header_menuList_outer .close_icon {
        position: absolute !important;
        right: 20px !important;
        top: 20px !important;
        width: 36px !important;
        height: 30px !important;
        background: url(../images/cross-icon2.png) no-repeat !important;
        display: inline-block !important;
    }

    /* Menu list stacking */
    .header .header_right_menu .header_menuList_outer ul.header_menuList {
        margin-top: 40px !important;
        margin-bottom: 40px !important;
        background: #ffffff !important;
    }

    .header .header_right_menu .header_menuList_outer ul.header_menuList li {
        width: 100% !important;
        margin: 0 !important;
        text-align: left !important;
        display: block !important;
        border-bottom: 1px solid #f0f0f0 !important;
    }

    .header .header_right_menu .header_menuList_outer ul.header_menuList li a {
        padding: 14px 20px !important;
        display: block !important;
        font-size: 16px !important;
        line-height: 22px !important;
        color: #333 !important;
    }

    /* Hover/active state for menu links — include .header_homeNew for specificity */
    .header_homeNew .header .header_right_menu .header_menuList_outer ul.header_menuList li a:hover,
    .header_homeNew .header .header_right_menu .header_menuList_outer ul.header_menuList li a:active,
    .header_homeNew .header .header_right_menu .header_menuList_outer ul.header_menuList li a.cust-active,
    .header .header_right_menu .header_menuList_outer ul.header_menuList li a:hover,
    .header .header_right_menu .header_menuList_outer ul.header_menuList li a:active,
    .header .header_right_menu .header_menuList_outer ul.header_menuList li a.cust-active {
        color: #29ABE2 !important;
        background: #f2f9fd !important;
        border-left: 3px solid #29ABE2 !important;
    }

    .header .header_right_menu .header_menuList_outer ul.header_menuList li span.menu_arrow {
        bottom: auto !important;
        top: 37px !important;
    }

    /* Submenu content layout */
    .header .header_right_menu .header_menuList_outer ul.header_menuList li .menu_inner_sec .menu_left_top {
        padding-top: 10px !important;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }

    .header .header_right_menu .header_menuList_outer ul.header_menuList li .menu_inner_sec .menu_left_top ul.sub_menu {
        width: 100% !important;
        padding-left: 0 !important;
    }

    .header .header_right_menu .header_menuList_outer ul.header_menuList li .menu_inner_sec .menu_left_top ul.sub_menu li {
        text-align: left !important;
        width: 100% !important;
        padding: 0 !important;
    }

    .header .header_right_menu .header_menuList_outer ul.header_menuList li .menu_inner_sec .menu_left_top .menu_left_sec {
        width: 100% !important;
        margin: 0 !important;
    }

    .header .header_right_menu .header_menuList_outer ul.header_menuList li .menu_inner_sec .menu_left_top_services {
        float: left !important;
        margin: 0 !important;
        padding: 5px 0 10px !important;
        width: 100% !important;
    }

    .header .header_right_menu .header_menuList_outer ul.header_menuList li .menu_inner_sec.menu_inner_service,
    .header .header_right_menu .header_menuList_outer ul.header_menuList li .menu_inner_sec.menu_inner_secCom {
        width: 100% !important;
    }

    /* Contact Us button — .header_homeNew prefix to beat specificity */
    .header_homeNew .header .header_right_menu .header_menuList_outer ul.header_menuList li a.header_hover.header_hoverlast,
    .header .header_right_menu .header_menuList_outer ul.header_menuList li a.header_hover.header_hoverlast {
        color: #fff !important;
        background: #006699 !important;
        width: 80% !important;
        margin: 15px 10% !important;
        text-align: center !important;
        border-radius: 4px !important;
        padding: 12px 20px !important;
        border-left: none !important;
    }

    .header_homeNew .header .header_right_menu .header_menuList_outer ul.header_menuList li a.header_hover.header_hoverlast:hover,
    .header_homeNew .header .header_right_menu .header_menuList_outer ul.header_menuList li a.header_hover.header_hoverlast:active,
    .header .header_right_menu .header_menuList_outer ul.header_menuList li a.header_hover.header_hoverlast:hover,
    .header .header_right_menu .header_menuList_outer ul.header_menuList li a.header_hover.header_hoverlast:active {
        background: #005580 !important;
        color: #fff !important;
        border-left: none !important;
    }

    .header_homeNew .header .header_right_menu .header_menuList_outer ul.header_menuList li a {
        color: #333 !important;
    }

    .header_homeNew .header .header_border {
        background: 0 0 !important;
    }
}

/* ==========================================================================
   All mobile (991px and below) — CRITICAL fixes for the 3 root cause bugs
   ========================================================================== */
@media (max-width: 991px) {

    /* Remove header min-width that causes horizontal scroll */
    .header_main,
    .header,
    .header_border,
    .header_homeNew,
    .outer_layout,
    .inner_layout {
        min-width: 0 !important;
        max-width: 100vw !important;
    }

    /* Logo scale */
    .logo .logoheader,
    .logo .logoscroll {
        max-width: 180px !important;
        height: auto !important;
    }

    /* Mobile nav logo at top of drawer */
    .mobile-nav-logo {
        display: block !important;
        padding: 15px 20px 10px !important;
        border-bottom: 1px solid #f0f0f0 !important;
    }

    .mobile-nav-logo img {
        max-width: 160px !important;
        height: auto !important;
    }

    /* Adjust menu list margin since logo takes up top space */
    .header .header_right_menu .header_menuList_outer ul.header_menuList {
        margin-top: 0 !important;
    }

    /* ===== FIX #1: Reset opacity from 0 to 1 on mobile =====  */
    .header .header_right_menu .header_menuList_outer ul.header_menuList li .menu_inner_sec {
        opacity: 1 !important;
        transition: none !important;
        -webkit-transition: none !important;
        -moz-transition: none !important;
        position: static !important;
        right: 0 !important;
        z-index: 10 !important;
        display: none !important;
        float: none !important;
        width: 100% !important;
        box-shadow: none !important;
        background: #f8fafb !important;
        border-top: 1px solid #e8eef2 !important;
        border-bottom: none !important;
    }

    /* ===== Drawer white background (also for existing 767px breakpoint) ===== */
    .header .header_right_menu .header_menuList_outer {
        background: #ffffff !important;
    }

    /* Menu list white bg */
    .header .header_right_menu .header_menuList_outer ul.header_menuList {
        background: #ffffff !important;
    }

    /* Menu items — clean stacked look */
    .header .header_right_menu .header_menuList_outer ul.header_menuList li {
        text-align: left !important;
        margin: 0 !important;
        border-bottom: 1px solid #f0f0f0 !important;
    }

    /* Menu links — proper font, color, touch size + smooth transition */
    .header_homeNew .header .header_right_menu .header_menuList_outer ul.header_menuList li a,
    .header .header_right_menu .header_menuList_outer ul.header_menuList li a {
        font-size: 16px !important;
        line-height: 22px !important;
        color: #333333 !important;
        padding: 14px 20px !important;
        transition: color 0.25s ease, background 0.25s ease, border-left 0.25s ease, padding-left 0.25s ease !important;
        -webkit-transition: color 0.25s ease, background 0.25s ease, border-left 0.25s ease, padding-left 0.25s ease !important;
        border-left: 3px solid transparent !important;
    }

    /* Hover effect — blue left border + blue text + light bg
       MUST include .header_homeNew to beat its specificity */
    .header_homeNew .header .header_right_menu .header_menuList_outer ul.header_menuList li a:hover,
    .header_homeNew .header .header_right_menu .header_menuList_outer ul.header_menuList li a:active,
    .header .header_right_menu .header_menuList_outer ul.header_menuList li a:hover,
    .header .header_right_menu .header_menuList_outer ul.header_menuList li a:active {
        color: #29ABE2 !important;
        background: #f2f9fd !important;
        border-left: 3px solid #29ABE2 !important;
        padding-left: 24px !important;
    }

    /* Contact Us button — white text on blue bg (in general mobile block) */
    .header_homeNew .header .header_right_menu .header_menuList_outer ul.header_menuList li a.header_hover.header_hoverlast,
    .header .header_right_menu .header_menuList_outer ul.header_menuList li a.header_hover.header_hoverlast {
        color: #fff !important;
        background: #006699 !important;
        width: 80% !important;
        margin: 15px 10% !important;
        text-align: center !important;
        border-radius: 4px !important;
        padding: 12px 20px !important;
        border-left: none !important;
        border-bottom: none !important;
    }

    .header_homeNew .header .header_right_menu .header_menuList_outer ul.header_menuList li a.header_hover.header_hoverlast:hover,
    .header_homeNew .header .header_right_menu .header_menuList_outer ul.header_menuList li a.header_hover.header_hoverlast:active,
    .header .header_right_menu .header_menuList_outer ul.header_menuList li a.header_hover.header_hoverlast:hover,
    .header .header_right_menu .header_menuList_outer ul.header_menuList li a.header_hover.header_hoverlast:active {
        background: #005580 !important;
        color: #fff !important;
        border-left: none !important;
    }

    /* Active/open submenu parent — bold blue accent */
    .header_homeNew .header .header_right_menu .header_menuList_outer ul.header_menuList li a.cust-active,
    .header .header_right_menu .header_menuList_outer ul.header_menuList li a.cust-active {
        color: #006699 !important;
        background: #e8f4fb !important;
        border-left: 3px solid #006699 !important;
        font-weight: 600 !important;
        padding-left: 24px !important;
    }

    /* ===== FIX #2: Disable :hover display/opacity rules on mobile =====
       On touch devices, :hover is applied temporarily on tap then removed.
       This causes submenus to flash open then immediately close.
       We disable hover entirely and let JS slideDown/slideUp handle it. */
    .header .header_right_menu .header_menuList_outer ul.header_menuList li:hover .menu_inner_sec,
    .header .header_right_menu .header_menuList_outer ul.header_menuList li:focus .menu_inner_sec {
        display: none !important;
        /* Let JS inline style (display:block from slideDown) override this.
           Inline styles have higher specificity than !important on non-inline,
           BUT !important in CSS beats inline WITHOUT !important.
           So we need a different approach — see JS fix below. */
    }

    /* ===== FIX #3: Remove height/overflow clipping on mobile =====
       Desktop uses height:62px + overflow:hidden to clip the LI.
       On hover it becomes height:auto. On touch, hover reverts → clipped. */
    .header .header_right_menu .header_menuList_outer ul.header_menuList li.list_hoverClass,
    .header .header_right_menu .header_menuList_outer ul.header_menuList li.list_hoverClass:hover {
        height: auto !important;
        overflow: visible !important;
    }

    /* Also reset the :hover opacity rule for menu_arrow */
    .header .header_right_menu .header_menuList_outer ul.header_menuList li:hover span.menu_arrow,
    .header .header_right_menu .header_menuList_outer ul.header_menuList li:focus span.menu_arrow {
        opacity: 0 !important;
    }

    /* When submenu is active (shown by JS), ensure it stays visible */
    .header .header_right_menu .header_menuList_outer ul.header_menuList li .menu_inner_sec.mobile-submenu-open {
        display: block !important;
        opacity: 1 !important;
    }

    /* When submenu is active, show the arrow */
    .header .header_right_menu .header_menuList_outer ul.header_menuList li .header_hover.cust-active + span.menu_arrow {
        opacity: 1 !important;
    }

    /* Fix mega menu fixed widths that overflow */
    .menu_inner_service,
    .menu_inner_secTech,
    .menu_inner_secCom {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .max-menuwidth {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .hosting-right {
        right: auto !important;
        left: 0 !important;
    }

    /* Hide tab-content description panels (too cramped on mobile) */
    .header_menuList_outer .sub_menu .tab-content,
    .header_menuList_outer .sub_menu_service .tab-content {
        display: none !important;
    }

    /* Sub menu columns - full width on mobile */
    .header_menuList_outer .sub_menu.col-sm-3,
    .header_menuList_outer .sub_menu_service.col-sm-3,
    .header_menuList_outer .col-sm-3 {
        width: 100% !important;
        float: none !important;
    }

    /* Hide nav decorative images */
    .nav-hostimg {
        display: none !important;
    }

    /* Submenu items - full specificity to beat cmnCss.css */
    .header .header_right_menu .header_menuList_outer ul.header_menuList li .menu_inner_sec .menu_left_top ul.sub_menu li ul.sub_sub_menu li a,
    .header .header_right_menu .header_menuList_outer ul.header_menuList li .menu_inner_sec .menu_left_top ul.sub_menu.sub_menu_service li ul.sub_sub_menu li a,
    .header .header_right_menu .header_menuList_outer ul.header_menuList li .menu_inner_sec .menu_left_top ul.sub_menu.sub_menu_com li ul.sub_sub_menu li a,
    .header_menuList_outer .sub_sub_menu li a {
        min-height: 44px !important;
        padding: 12px 20px 12px 55px !important;
        font-size: 14px !important;
        line-height: 20px !important;
        color: #444 !important;
        display: block !important;
        border-bottom: 1px solid #eef2f5 !important;
        position: relative !important;
    }

    /* Service icons — full specificity to override left:0 from cmnCss */
    .header .header_right_menu .header_menuList_outer ul.header_menuList li .menu_inner_sec .menu_left_top ul.sub_menu.sub_menu_service li ul.sub_sub_menu li a span.service-item,
    .header .header_right_menu .header_menuList_outer ul.header_menuList li .menu_inner_sec .menu_left_top ul.sub_menu li ul.sub_sub_menu li a span.service-item,
    .header_menuList_outer .sub_sub_menu li a span.service-item {
        position: absolute !important;
        left: 15px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 28px !important;
        height: 28px !important;
    }

    .header_menuList_outer .sub_sub_menu li a span.company-item,
    .header_menuList_outer .sub_sub_menu li a span.technology-item {
        position: absolute !important;
        left: 15px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 28px !important;
        height: 28px !important;
    }

    /* Hosting submenu images (small icons) */
    .header_menuList_outer .sub_sub_menu li a img {
        width: 22px !important;
        height: auto !important;
        position: absolute !important;
        left: 18px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }

    /* Submenu link transitions */
    .header_homeNew .header .header_right_menu .header_menuList_outer ul.header_menuList li .menu_inner_sec .menu_left_top ul.sub_menu li ul.sub_sub_menu li a,
    .header_homeNew .header .header_right_menu .header_menuList_outer ul.header_menuList li .menu_inner_sec .menu_left_top ul.sub_menu.sub_menu_service li ul.sub_sub_menu li a,
    .header .header_right_menu .header_menuList_outer ul.header_menuList li .menu_inner_sec .menu_left_top ul.sub_menu li ul.sub_sub_menu li a,
    .header .header_right_menu .header_menuList_outer ul.header_menuList li .menu_inner_sec .menu_left_top ul.sub_menu.sub_menu_service li ul.sub_sub_menu li a,
    .header_menuList_outer .sub_sub_menu li a {
        transition: color 0.2s ease, background 0.2s ease, border-left 0.2s ease, padding-left 0.2s ease !important;
        -webkit-transition: color 0.2s ease, background 0.2s ease, border-left 0.2s ease, padding-left 0.2s ease !important;
        border-left: 3px solid transparent !important;
    }

    /* Submenu hover — slide-in blue accent */
    .header_homeNew .header .header_right_menu .header_menuList_outer ul.header_menuList li .menu_inner_sec .menu_left_top ul.sub_menu li ul.sub_sub_menu li a:hover,
    .header_homeNew .header .header_right_menu .header_menuList_outer ul.header_menuList li .menu_inner_sec .menu_left_top ul.sub_menu li ul.sub_sub_menu li a:active,
    .header .header_right_menu .header_menuList_outer ul.header_menuList li .menu_inner_sec .menu_left_top ul.sub_menu li ul.sub_sub_menu li a:hover,
    .header .header_right_menu .header_menuList_outer ul.header_menuList li .menu_inner_sec .menu_left_top ul.sub_menu li ul.sub_sub_menu li a:active,
    .header_menuList_outer .sub_sub_menu li a:hover,
    .header_menuList_outer .sub_sub_menu li a:active {
        color: #29ABE2 !important;
        background: #f2f9fd !important;
        border-left: 3px solid #29ABE2 !important;
        padding-left: 58px !important;
    }

    .header_menuList_outer .sub_sub_menu li:last-child a {
        border-bottom: none !important;
    }

    /* Submenu section headers */
    .header_menuList_outer .sub_sub_menu h4 {
        padding: 10px 20px 5px !important;
        margin: 0 !important;
        font-size: 12px !important;
        color: #999 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
    }

    /* General container overflow fix */
    .container {
        max-width: 100% !important;
    }

    /* bxSlider touch fix */
    .bx-wrapper,
    .bx-viewport {
        touch-action: pan-y !important;
        -ms-touch-action: pan-y !important;
    }

    /* Footer responsive */
    .footer-copyright .row {
        text-align: center !important;
    }

    .footer-copyright .col-lg-4 {
        width: 100% !important;
        float: none !important;
        margin-bottom: 10px !important;
    }

    .footer_link {
        text-align: center !important;
        padding: 0 !important;
    }

    .socials {
        text-align: center !important;
        padding: 0 !important;
    }
}

/* ---------- Small screens (phones) ---------- */
@media (max-width: 575px) {

    .logo .logoheader,
    .logo .logoscroll {
        max-width: 140px !important;
    }

    .header_menuList_outer .sub_sub_menu li a {
        padding: 10px 15px 10px 35px !important;
        font-size: 13px !important;
    }
}