/* ==========================================================================
   EHM360 HOSPITAL MANAGEMENT INFORMATION SYSTEM (HMIS)
   ALL PAGES MASTER RESPONSIVE STYLESHEET
   Supports: 4K / Ultrawide | Desktop | Laptop (1199px) | Tablet (991px) | Mobile (767px) | Small Mobile (575px & 380px)
   ========================================================================== */

/* ==========================================================================
   1. GLOBAL FOUNDATION, CONTAINERS & ANTI-OVERFLOW RULES
   ========================================================================== */
html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

*, *::before, *::after {
    box-sizing: border-box;
}

.page-wrapper {
    overflow-x: hidden !important;
    width: 100% !important;
    position: relative;
}

/* Fluid Media & Embeds */
img, svg, video, canvas, audio, iframe, embed, object {
    max-width: 100% !important;
    height: auto;
}

iframe {
    border: 0;
}

/* Container & Layout Harmony */
.auto-container {
    width: 100%;
    max-width: 1200px;
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 1400px) {
    .auto-container {
        max-width: 1240px;
    }
}

/* Grid Gutters & Spacing Fix */
.row.g-4 {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 1.5rem;
}
.row.g-3 {
    --bs-gutter-x: 1rem;
    --bs-gutter-y: 1rem;
}
.row.g-5 {
    --bs-gutter-x: 2.5rem;
    --bs-gutter-y: 2.5rem;
}

@media (max-width: 767px) {
    .row.g-4 {
        --bs-gutter-x: 1rem;
        --bs-gutter-y: 1rem;
    }
    .row.g-5 {
        --bs-gutter-x: 1.25rem;
        --bs-gutter-y: 1.5rem;
    }
}

/* Word Break & Overflow Protection */
h1, h2, h3, h4, h5, h6, p, span, a, li, td, th, div {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Table & Comparison Matrix Responsive Scrolling */
.comparison-table-wrapper,
.table-responsive,
.table-responsive-custom {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    margin-bottom: 1rem;
}

/* Smooth Scrolling Anchor Fix */
html {
    scroll-behavior: smooth;
}


/* ==========================================================================
   2. DESKTOP & LAPTOP COMPACT BREAKPOINT (992px – 1199px)
   ========================================================================== */
@media (max-width: 1199px) {

    /* --- Header Navigation Spacing --- */
    .main-header.header-style-two .main-menu .navigation > li > a,
    .main-menu .navigation > li > a {
        padding: 22px 9px !important;
        font-size: 13.5px !important;
        letter-spacing: 0;
    }

    .main-header .main-box {
        padding: 0 10px !important;
    }

    .main-header .logo-box .logo img {
        max-height: 32px !important;
        max-width: 140px !important;
    }

    .header-demo-cta-btn {
        padding: 9px 18px !important;
        font-size: 13px !important;
    }

    /* --- Hero Section Scaling --- */
    .hero-main-title {
        font-size: 30px !important;
        line-height: 1.25 !important;
    }

    .hero-lead-desc {
        font-size: 14.5px !important;
        max-width: 580px !important;
    }

    .hero-bg-slide {
        min-height: 380px !important;
        padding: 45px 0 50px !important;
    }

    /* --- Section Headings --- */
    .sec-title h2,
    .section-title,
    .form-main-heading,
    .solutions-hero-title,
    .faq-hero-title,
    .about-hero-title {
        font-size: 28px !important;
    }

    /* --- Metrics & Stats Tiles --- */
    .solutions-metrics-container .hero-metric-tile {
        padding: 12px 14px !important;
    }
    .metric-value {
        font-size: 17px !important;
    }
    .metric-label {
        font-size: 12px !important;
    }

    /* --- Footer Navigation --- */
    .footer-container {
        padding: 0 15px !important;
    }
    .footer-col-title {
        font-size: 15px !important;
    }
    .footer-links-list li a {
        font-size: 13px !important;
    }
}


/* ==========================================================================
   3. TABLET LANDSCAPE & PORTRAIT (768px – 991px)
   ========================================================================== */
@media (max-width: 991px) {

    /* --- Top Bar Clean Compact --- */
    .header-top {
        padding: 6px 0 !important;
        font-size: 12px !important;
    }
    .header-top-inner {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 8px !important;
    }
    .top-enterprise-badge {
        display: none !important;
    }
    .top-contact-list {
        gap: 14px !important;
    }
    .top-social-list {
        display: none !important;
    }

    /* --- Main Header & Mobile Nav Bar --- */
    .main-header.header-style-two .header-lower {
        background: #ffffff !important;
        box-shadow: 0 2px 12px rgba(18, 59, 99, 0.08) !important;
    }

    .main-header .main-box {
        min-height: 62px !important;
        padding: 0 15px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    .main-header .nav-outer .main-menu {
        display: none !important;
    }

    .main-header .logo-box .logo img {
        max-height: 34px !important;
        max-width: 145px !important;
    }

    /* ==========================================================================
       MODERN HAMBURGER TOGGLER BUTTON
       ========================================================================== */
    .main-header .mobile-nav-toggler,
    .mobile-nav-toggler {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 42px !important;
        height: 42px !important;
        background: #ffffff !important;
        border: 1.5px solid #e2e8f0 !important;
        border-radius: 10px !important;
        color: #0B2A4A !important;
        box-shadow: 0 2px 6px rgba(11, 42, 74, 0.06) !important;
        cursor: pointer !important;
        transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
        padding: 0 !important;
        flex-shrink: 0;
    }

    .mobile-nav-toggler:hover {
        background: #18B89A !important;
        border-color: #18B89A !important;
        color: #ffffff !important;
        box-shadow: 0 4px 14px rgba(24, 184, 154, 0.35) !important;
        transform: translateY(-1px);
    }

    .mobile-nav-toggler i,
    .mobile-nav-toggler span.icon {
        font-size: 19px !important;
        line-height: 2 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: inherit !important;
    }

    .header-demo-cta-btn {
        padding: 8px 16px !important;
        font-size: 12.5px !important;
    }

    /* ==========================================================================
       SMART MOBILE STICKY HEADER (REVERSE SCROLL / SLIDE IN ON SCROLL UP)
       ========================================================================== */
    .sticky-header {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        z-index: 999999 !important;
        background: #ffffff !important;
        padding: 6px 0 !important;
        box-shadow: 0 4px 18px rgba(18, 59, 99, 0.1) !important;
        border-bottom: 1px solid rgba(226, 232, 240, 0.85) !important;
        transform: translateY(-100%) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease, visibility 0.25s ease !important;
        pointer-events: none !important;
        overflow: hidden !important;
    }

    /* Shows smoothly when scrolling UP on phone/tablet */
    .sticky-header.mobile-sticky-shown {
        transform: translateY(0) !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    .sticky-header .auto-container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 16px !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }

    .sticky-header .inner-container {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0 !important;
        margin: 0 !important;
        min-height: 48px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .sticky-header .logo {
        display: flex !important;
        align-items: center !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .sticky-header .logo img {
        max-height: 32px !important;
        max-width: 140px !important;
        width: auto !important;
        object-fit: contain !important;
        display: block !important;
    }

    .sticky-header .nav-outer {
        display: none !important;
    }

    .sticky-header .outer-box {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        margin: 0 !important;
        padding: 0 !important;
        flex-shrink: 0 !important;
    }

    /* On mobile phones (< 576px), hide CTA button so sticky header matches static header and doesn't push toggler off-screen */
    @media (max-width: 575.98px) {
        .sticky-header .header-demo-cta-btn {
            display: none !important;
        }
    }

    /* On tablets and landscape (576px to 991px), display the CTA button gracefully */
    @media (min-width: 576px) and (max-width: 991.98px) {
        .sticky-header .header-demo-cta-btn {
            display: inline-flex !important;
            padding: 6px 14px !important;
            font-size: 11.5px !important;
            border-radius: 50px !important;
            white-space: nowrap !important;
            flex-shrink: 0 !important;
        }
    }

    .sticky-header .mobile-nav-toggler {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 40px !important;
        height: 40px !important;
        background: #ffffff !important;
        border: 1.5px solid #e2e8f0 !important;
        border-radius: 10px !important;
        color: #0B2A4A !important;
        cursor: pointer !important;
        box-shadow: 0 2px 6px rgba(11, 42, 74, 0.06) !important;
        padding: 0 !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
        transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    .sticky-header .mobile-nav-toggler:hover {
        background: #18B89A !important;
        border-color: #18B89A !important;
        color: #ffffff !important;
        box-shadow: 0 4px 14px rgba(24, 184, 154, 0.35) !important;
        transform: translateY(-1px);
    }

    .sticky-header .mobile-nav-toggler i {
        font-size: 17px !important;
        line-height: 2 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: inherit !important;
    }

    /* ==========================================================================
       ULTRA-MODERN MOBILE NAVIGATION DRAWER (INSTITUTIONAL NAVY)
       ========================================================================== */
    .mobile-menu {
        position: fixed !important;
        right: 0 !important;
        top: 0 !important;
        width: 320px !important;
        max-width: 88vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        opacity: 0 !important;
        visibility: hidden !important;
        z-index: 9999999 !important;
        transition: all 0.38s cubic-bezier(0.16, 1, 0.3, 1) !important;
        transform: translateX(100%) !important;
    }

    .mobile-menu-visible .mobile-menu {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateX(0) !important;
    }

    .mobile-menu .menu-backdrop {
        position: fixed !important;
        right: 0 !important;
        top: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        z-index: 9999998 !important;
        background: rgba(5, 18, 32, 0.72) !important;
        backdrop-filter: blur(6px) !important;
        -webkit-backdrop-filter: blur(6px) !important;
        transition: all 0.3s ease !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }

    .mobile-menu-visible .mobile-menu .menu-backdrop {
        opacity: 1 !important;
        visibility: visible !important;
    }

    .mobile-menu .menu-box {
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        background: linear-gradient(180deg, #091E36 0%, #061528 55%, #030C16 100%) !important;
        padding: 0 0 35px 0 !important;
        z-index: 9999999 !important;
        box-shadow: -12px 0 45px rgba(0, 0, 0, 0.55) !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* Custom scrollbar for mobile drawer */
    .mobile-menu .menu-box::-webkit-scrollbar {
        width: 4px;
    }
    .mobile-menu .menu-box::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.15);
        border-radius: 4px;
    }

    /* Drawer Header */
    .mobile-menu .upper-box {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 16px 18px !important;
        background: rgba(255, 255, 255, 0.03) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
    }

    .mobile-menu .nav-logo {
        background: #ffffff !important;
        padding: 6px 14px !important;
        border-radius: 10px !important;
        display: inline-flex !important;
        align-items: center !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
        max-width: 190px !important;
    }

    .mobile-menu .nav-logo img {
        max-height: 32px !important;
        width: auto !important;
        object-fit: contain !important;
    }

    .mobile-menu .close-btn {
        width: 36px !important;
        height: 36px !important;
        border-radius: 50% !important;
        background: rgba(255, 255, 255, 0.1) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #ffffff !important;
        font-size: 15px !important;
        cursor: pointer !important;
        transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
        position: relative !important;
        top: auto !important;
        right: auto !important;
        transform: none !important;
    }

    .mobile-menu-visible .mobile-menu .close-btn {
        transform: none !important;
    }

    .mobile-menu .close-btn:hover {
        background: #ef4444 !important;
        color: #ffffff !important;
        transform: rotate(90deg) !important;
    }

    /* Primary Navigation Links */
    .mobile-menu .navigation {
        border-top: none !important;
        padding: 12px 14px 6px !important;
        margin: 0 !important;
        list-style: none !important;
    }

    .mobile-menu .navigation li {
        margin-bottom: 4px !important;
        border-bottom: none !important;
        position: relative !important;
        list-style: none !important;
    }

    .mobile-menu .navigation li > a {
        color: #e2e8f0 !important;
        font-size: 14.5px !important;
        font-weight: 600 !important;
        padding: 11px 14px !important;
        line-height: 22px !important;
        transition: all 0.2s ease !important;
        display: block !important;
        border-radius: 9px !important;
        text-decoration: none !important;
        letter-spacing: 0.2px !important;
    }

    .mobile-menu .navigation li > a:hover {
        background: rgba(255, 255, 255, 0.08) !important;
        color: #ffffff !important;
    }

    .mobile-menu .navigation li.current > a {
        background: rgba(24, 184, 154, 0.16) !important;
        color: #18B89A !important;
        font-weight: 700 !important;
        box-shadow: inset 0 0 0 1px rgba(24, 184, 154, 0.3) !important;
        border-left: none !important;
    }

    /* Submenu dropdown toggler arrow */
    .mobile-menu .navigation li.dropdown .dropdown-btn {
        position: absolute !important;
        right: 8px !important;
        top: 6px !important;
        width: 34px !important;
        height: 34px !important;
        border-radius: 8px !important;
        background: rgba(255, 255, 255, 0.07) !important;
        color: #94a3b8 !important;
        font-size: 13px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        transition: all 0.25s ease !important;
        z-index: 5 !important;
        border: none !important;
    }

    .mobile-menu .navigation li.dropdown .dropdown-btn:after {
        display: none !important;
    }

    .mobile-menu .navigation li.dropdown .dropdown-btn:hover {
        background: rgba(24, 184, 154, 0.2) !important;
        color: #18B89A !important;
    }

    .mobile-menu .navigation li.dropdown .dropdown-btn.active {
        background: #18B89A !important;
        color: #ffffff !important;
        transform: rotate(180deg) !important;
    }

    /* Submenu Drawer Content */
    .mobile-menu .navigation li > ul {
        display: none;
        background: rgba(0, 0, 0, 0.35) !important;
        border-radius: 10px !important;
        padding: 6px 4px !important;
        margin: 4px 0 8px !important;
        border: 1px solid rgba(255, 255, 255, 0.06) !important;
        list-style: none !important;
    }

    .mobile-menu .navigation li > ul > li {
        border-bottom: none !important;
        margin-bottom: 2px !important;
        padding: 0 !important;
    }

    .mobile-menu .navigation li > ul > li:last-child {
        margin-bottom: 0 !important;
    }

    .mobile-menu .navigation li > ul > li > a {
        font-size: 13.5px !important;
        font-weight: 500 !important;
        color: #cbd5e1 !important;
        padding: 9px 12px !important;
        display: flex !important;
        align-items: center !important;
        border-radius: 7px !important;
        transition: all 0.2s ease !important;
        background: transparent !important;
    }

    /* Zero duplicate arrows */
    .mobile-menu .navigation li > ul > li > a::before {
        content: none !important;
        display: none !important;
    }

    .mobile-menu .navigation li > ul > li > a i {
        font-size: 10px !important;
        color: #18B89A !important;
        margin-right: 8px !important;
        transition: transform 0.2s ease !important;
    }

    /* Submenu Item Hover */
    .mobile-menu .navigation li > ul > li > a:hover {
        background: rgba(24, 184, 154, 0.16) !important;
        color: #ffffff !important;
        transform: translateX(3px) !important;
    }

    .mobile-menu .navigation li > ul > li > a:hover i {
        color: #18B89A !important;
        transform: translateX(2px) !important;
    }

    /* Submenu Active / Selected Item in Mobile Drawer */
    .mobile-menu .navigation li > ul > li.active-dropdown-item > a,
    .mobile-menu .navigation li > ul > li.current > a {
        background: rgba(24, 184, 154, 0.22) !important;
        color: #18B89A !important;
        font-weight: 700 !important;
        border-left: 3px solid #18B89A !important;
        border-radius: 4px 7px 7px 4px !important;
    }

    .mobile-menu .navigation li > ul > li.active-dropdown-item > a i,
    .mobile-menu .navigation li > ul > li.current > a i {
        color: #18B89A !important;
        font-weight: 900 !important;
    }

    .mobile-menu .navigation li > ul > li.active-dropdown-item > a:hover,
    .mobile-menu .navigation li > ul > li.current > a:hover {
        background: rgba(24, 184, 154, 0.3) !important;
        color: #ffffff !important;
    }

    /* 4-Item Quick Action Grid */
    .mobile-drawer-top-links {
        background: rgba(255, 255, 255, 0.04) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        margin: 10px 14px 14px !important;
        padding: 10px 6px !important;
        border-radius: 14px !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
    }

    .mobile-drawer-quick-grid {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 4px !important;
        margin: 0 !important;
    }

    .drawer-quick-link {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        padding: 8px 2px !important;
        background: transparent !important;
        border: none !important;
        border-radius: 8px !important;
        color: #cbd5e1 !important;
        text-decoration: none !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        text-align: center !important;
        transition: all 0.25s ease !important;
        line-height: 1.2 !important;
    }

    .drawer-quick-link .quick-icon-wrap {
        width: 34px !important;
        height: 34px !important;
        border-radius: 9px !important;
        background: rgba(255, 255, 255, 0.08) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transition: all 0.25s ease !important;
    }

    .drawer-quick-link .quick-icon-wrap i {
        color: #ffffff !important;
        font-size: 13px !important;
        transition: transform 0.25s ease !important;
    }

    .drawer-quick-link:hover {
        background: rgba(255, 255, 255, 0.06) !important;
        color: #ffffff !important;
    }

    .drawer-quick-link:hover .quick-icon-wrap {
        background: #18B89A !important;
    }

    .drawer-quick-link:hover .quick-icon-wrap i {
        color: #ffffff !important;
        transform: scale(1.1) !important;
    }

    /* Contact Info Card */
    .mobile-menu .contact-list-one {
        background: rgba(0, 0, 0, 0.25) !important;
        margin: 6px 14px 12px !important;
        padding: 14px 16px !important;
        border-radius: 12px !important;
        border: 1px solid rgba(255, 255, 255, 0.06) !important;
        list-style: none !important;
    }

    .mobile-menu .contact-list-one li {
        margin-bottom: 12px !important;
        border-bottom: none !important;
    }

    .mobile-menu .contact-list-one li:last-child {
        margin-bottom: 0 !important;
    }

    .mobile-menu .contact-list-one li .contact-info-box {
        padding-left: 46px !important;
        font-size: 13px !important;
        color: #ffffff !important;
        position: relative !important;
    }

    .mobile-menu .contact-list-one li .contact-info-box .icon {
        width: 34px !important;
        height: 34px !important;
        line-height: 34px !important;
        text-align: center !important;
        font-size: 14px !important;
        color: #ffffff !important;
        background: linear-gradient(135deg, #18B89A 0%, #087F78 100%) !important;
        border-radius: 8px !important;
        top: 2px !important;
        left: 0 !important;
        position: absolute !important;
        box-shadow: 0 4px 10px rgba(24, 184, 154, 0.3) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .mobile-menu .contact-list-one li .contact-info-box .title {
        font-size: 10px !important;
        color: #94a3b8 !important;
        font-weight: 700 !important;
        letter-spacing: 0.8px !important;
        text-transform: uppercase !important;
        margin-bottom: 2px !important;
        display: block !important;
    }

    .mobile-menu .contact-list-one li .contact-info-box a {
        color: #ffffff !important;
        font-weight: 700 !important;
        font-size: 14px !important;
        text-decoration: none !important;
        word-break: break-all !important;
        letter-spacing: 0.3px !important;
    }

    .mobile-menu .contact-list-one li .contact-info-box a:hover {
        color: #18B89A !important;
    }

    /* Social Links */
    .mobile-menu .social-links {
        background: transparent !important;
        border-top: none !important;
        margin: 4px 0px 0 !important;
        padding: 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        list-style: none !important;
    }

    .mobile-menu .social-links li {
        margin: 0 !important;
        border: none !important;
    }

    .mobile-menu .social-links li a {
        width: 34px !important;
        height: 34px !important;
        border-radius: 8px !important;
        background: rgba(255, 255, 255, 0.06) !important;
        color: #94a3b8 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 13px !important;
        transition: all 0.2s ease !important;
        text-decoration: none !important;
    }

    .mobile-menu .social-links li a:hover {
        color: #ffffff !important;
        background: #18B89A !important;
        transform: translateY(-2px) !important;
    }

    /* --- Global Headings (Tablet) --- */
    h1, .page-title h1.title, .solutions-hero-title, .faq-hero-title, .about-hero-title {
        font-size: 26px !important;
        line-height: 1.25 !important;
    }

    h2, .sec-title h2, .section-title, .form-main-heading {
        font-size: 24px !important;
        line-height: 1.3 !important;
    }

    h3, .sec-title h3 {
        font-size: 20px !important;
        line-height: 1.35 !important;
    }

    h4 {
        font-size: 17px !important;
    }

    /* --- Hero Section (Tablet) --- */
    .saas-hero-section .hero-bg-slide {
        min-height: 340px !important;
        padding: 35px 0 40px !important;
    }

    .hero-main-title {
        font-size: 26px !important;
        line-height: 1.25 !important;
        margin-bottom: 10px !important;
    }

    .hero-lead-desc {
        font-size: 14px !important;
        line-height: 1.55 !important;
        margin-bottom: 18px !important;
    }

    .hero-action-btns {
        display: flex;
        flex-wrap: wrap;
        gap: 10px !important;
    }

    .hero-primary-cta-btn,
    .hero-secondary-cta-btn {
        padding: 9px 20px !important;
        font-size: 13.5px !important;
    }

    /* --- Page Title Banners (Tablet) --- */
    .page-title {
        padding: 38px 0 32px !important;
    }
    .page-title .title-outer {
        padding: 0 !important;
    }

    /* --- Intro Overview & Live Metrics --- */
    .intro-overview-section .row.g-5 {
        --bs-gutter-y: 2rem;
    }

    .smarter-approach-box {
        padding: 24px 20px !important;
    }

    /* --- Solutions & Detail Page (Tablet) --- */
    .solutions-hero-title {
        font-size: 28px !important;
    }
    .solutions-hero-desc {
        font-size: 14.5px !important;
        max-width: 620px !important;
        margin: 0 auto 16px !important;
    }
    .solutions-metrics-container .row {
        row-gap: 12px;
    }
    .hero-metric-tile {
        padding: 12px 14px !important;
        border-radius: 12px !important;
    }
    .hero-metric-tile .metric-value {
        font-size: 17px !important;
    }
    .hero-metric-tile .metric-label {
        font-size: 12px !important;
    }
    .filter-pill-group {
        padding: 6px 10px !important;
        gap: 6px !important;
    }
    .filter-btn {
        padding: 6px 14px !important;
        font-size: 12.5px !important;
    }
    .solution-bento-card {
        border-radius: 16px !important;
    }
    .solution-visual-header {
        height: 180px !important;
    }
    .solution-card-title {
        font-size: 17.5px !important;
    }
    .solution-card-description {
        font-size: 13.5px !important;
        line-height: 1.55 !important;
    }
    .eco-pipeline-card {
        padding: 20px 16px !important;
        border-radius: 14px !important;
    }
    .eco-stage-title {
        font-size: 16px !important;
    }
    .eco-stage-desc {
        font-size: 13px !important;
        line-height: 1.55 !important;
    }
    .comparison-bento-card {
        padding: 24px 18px !important;
        border-radius: 16px !important;
    }
    .comparison-matrix-table,
    .comparison-custom-table {
        min-width: 640px !important;
    }
    .solution-detail-sidebar {
        margin-top: 30px;
    }
    .sticky-consultation-card {
        position: static !important;
    }

    /* --- Home Sections (Tablet) --- */
    .trust-point-card {
        padding: 20px 16px !important;
        border-radius: 14px !important;
    }
    .trust-card-title {
        font-size: 16.5px !important;
    }
    .trust-card-desc {
        font-size: 13px !important;
        line-height: 1.55 !important;
    }
    .intro-metric-card {
        padding: 18px 14px !important;
        border-radius: 12px !important;
    }
    .metric-heading {
        font-size: 15px !important;
    }
    .core-solution-card {
        border-radius: 16px !important;
    }
    .solution-card-img-wrap {
        height: 180px !important;
    }
    .solution-card-title {
        font-size: 17px !important;
    }
    .why-pillar-card {
        padding: 20px 16px !important;
        border-radius: 14px !important;
    }
    .pillar-card-title {
        font-size: 16.5px !important;
    }
    .student-testimonial-card {
        padding: 24px 20px !important;
        border-radius: 16px !important;
    }

    /* --- About Page (Tablet) --- */
    .about-stat-box {
        padding: 16px 12px !important;
        border-radius: 12px !important;
    }
    .about-stat-number {
        font-size: 24px !important;
    }
    .about-stat-label {
        font-size: 12px !important;
    }
    .who-we-are-card,
    .mission-vision-card,
    .what-we-do-pill-card,
    .why-about-card,
    .who-serve-card {
        padding: 20px 18px !important;
        border-radius: 14px !important;
    }

    /* --- Request Demo & Contact Forms (Tablet) --- */
    .demo-form-card,
    .home-demo-form-card,
    .contact-form-card {
        padding: 26px 20px !important;
        border-radius: 16px !important;
    }
    .contact-feature-card {
        padding: 20px 16px !important;
        border-radius: 14px !important;
    }
    .contact-sidebar-card,
    .demo-sidebar-card {
        margin-top: 24px !important;
        padding: 22px 18px !important;
        border-radius: 16px !important;
    }

    /* --- FAQ Page (Tablet) --- */
    .faq-search-box-wrap {
        max-width: 540px !important;
    }
    .faq-acc-btn {
        padding: 16px 18px !important;
    }
    .faq-acc-body {
        padding: 16px 18px 20px 58px !important;
    }
    .faq-floating-cta-card {
        padding: 30px 22px !important;
        border-radius: 18px !important;
    }

    /* --- Blog & Gallery (Tablet) --- */
    .news-block .image-box img {
        height: 190px !important;
        object-fit: cover !important;
    }
    .news-block .content-box {
        padding: 18px 16px !important;
    }
    .gallery-media-box {
        height: 200px !important;
    }

    /* --- Tablet Global Layout & Bottom Spacing Fix --- */
    body {
        padding-bottom: 60px !important;
    }

    /* --- Footer (Tablet & iPad Mini) --- */
    .footer-container {
        padding: 0 16px !important;
        max-width: 100% !important;
    }

    .footer-ambient-orb {
        display: none !important;
    }

    .footer-watermark-svg {
        display: none !important;
    }

    .footer-nav-section {
        padding: 40px 0 25px !important;
    }

    .footer-nav-section .row.g-4 > div {
        margin-bottom: 18px;
    }

    .footer-brand-column {
        text-align: center;
        max-width: 660px;
        margin: 0 auto 20px !important;
    }

    .footer-col-title {
        font-size: 15px !important;
        margin-bottom: 12px !important;
        padding-bottom: 8px !important;
    }

    .footer-links-list li {
        margin-bottom: 7px !important;
    }

    .footer-links-list li a {
        font-size: 12.5px !important;
        line-height: 1.4 !important;
        padding-bottom: 2px !important;
    }

    .footer-ribbon {
        padding: 18px 0 !important;
    }

    .ribbon-info-item {
        margin-bottom: 8px !important;
    }

    .main-footer .footer-bottom-bar {
        padding: 16px 0 24px !important;
    }

    .main-footer .bottom-bar-inner {
        flex-direction: column !important;
        text-align: center !important;
        gap: 12px !important;
        align-items: center !important;
        padding-right: 0 !important;
    }

    .main-footer .copyright-statement {
        text-align: center !important;
    }
}


/* ==========================================================================
   4. MOBILE DEVICES (≤ 767px)
   ========================================================================== */
@media (max-width: 767px) {

    /* --- Global Spacings on Mobile --- */
    section.py-5,
    .py-5 {
        padding-top: 36px !important;
        padding-bottom: 36px !important;
    }

    .p-4.p-md-5,
    .p-md-5,
    .p-5 {
        padding: 20px 16px !important;
    }

    /* --- Header & Top Bar Mobile --- */
    .header-top {
        display: none !important; /* Kept ultra clean */
    }

    .main-header .main-box {
        min-height: 56px !important;
        padding: 0 12px !important;
    }

    .main-header .logo-box .logo img {
        max-height: 30px !important;
        max-width: 130px !important;
    }

    .header-demo-cta-btn {
        display: none !important; /* Accessed via mobile drawer */
    }

    /* --- Mobile Typography Scaling --- */
    h1, .page-title h1.title, .solutions-hero-title, .faq-hero-title, .about-hero-title {
        font-size: 22px !important;
        line-height: 1.25 !important;
    }

    h2, .sec-title h2, .section-title, .form-main-heading, .gallery-main-heading {
        font-size: 21px !important;
        line-height: 1.3 !important;
    }

    h3, .sec-title h3 {
        font-size: 18px !important;
        line-height: 1.35 !important;
    }

    h4, .trust-card-title, .solution-card-title, .pillar-card-title {
        font-size: 16px !important;
        line-height: 1.35 !important;
    }

    p, .section-desc, .section-lead-text, .hero-lead-desc {
        font-size: 13.5px !important;
        line-height: 1.6 !important;
    }

    .sec-title .sub-title,
    .badge-text,
    .pill-text {
        font-size: 11px !important;
        letter-spacing: 0.5px !important;
    }

    /* --- Home SaaS Hero (Mobile) --- */
    .saas-hero-section .hero-bg-slide {
        min-height: auto !important;
        padding: 28px 0 35px !important;
    }

    .hero-glow-circle.circle-1,
    .hero-glow-circle.circle-2 {
        width: 180px !important;
        height: 180px !important;
        filter: blur(40px) !important;
        opacity: 0.3 !important;
    }

    .hero-pill-badge {
        padding: 4px 10px !important;
        margin-bottom: 10px !important;
    }

    .hero-main-title {
        font-size: 22px !important;
        line-height: 1.25 !important;
        margin-bottom: 10px !important;
    }

    .hero-lead-desc {
        font-size: 13px !important;
        line-height: 1.55 !important;
        margin-bottom: 16px !important;
    }

    .hero-action-btns {
        flex-direction: column !important;
        width: 100% !important;
        gap: 8px !important;
    }

    .hero-primary-cta-btn,
    .hero-secondary-cta-btn {
        width: 100% !important;
        justify-content: center !important;
        padding: 10px 18px !important;
        font-size: 13.5px !important;
        border-radius: 10px !important;
    }

    /* --- Trust Points Cards (Mobile) --- */
    .trust-point-card {
        padding: 18px 16px !important;
        border-radius: 14px !important;
    }

    .trust-icon-box {
        width: 40px !important;
        height: 40px !important;
        font-size: 17px !important;
        border-radius: 10px !important;
        margin-bottom: 10px !important;
    }

    /* --- Intro Overview & Metrics (Mobile) --- */
    .intro-overview-section .intro-header-content {
        text-align: left;
    }

    .intro-metric-card {
        padding: 16px 14px !important;
    }

    .metric-icon-wrap {
        width: 38px !important;
        height: 38px !important;
        font-size: 16px !important;
    }

    .metric-heading {
        font-size: 14.5px !important;
    }

    .metric-desc {
        font-size: 12px !important;
    }

    .smarter-approach-box {
        padding: 20px 16px !important;
        border-radius: 14px !important;
        text-align: left !important;
    }

    .smarter-approach-box .hero-primary-cta-btn {
        margin-top: 14px;
        width: 100%;
        text-align: center;
    }

    /* --- Core Solutions Cards (Mobile) --- */
    .core-solution-card {
        border-radius: 14px !important;
    }

    .solution-card-img-wrap {
        height: 150px !important;
    }

    .solution-card-img-wrap img.solution-card-img {
        height: 150px !important;
    }

    .solution-card-top {
        padding: 16px 14px !important;
    }

    .solution-card-footer {
        padding: 12px 14px !important;
    }

    /* --- Why EHM360 Pillars (Mobile) --- */
    .why-pillar-card {
        padding: 18px 16px !important;
        border-radius: 14px !important;
    }

    .pillar-icon-wrap {
        width: 38px !important;
        height: 38px !important;
        font-size: 16px !important;
    }

    .pillar-card-title {
        font-size: 16px !important;
    }

    .pillar-card-desc {
        font-size: 13px !important;
    }

    /* --- Testimonials Carousel (Mobile) --- */
    .student-testimonial-card {
        padding: 22px 18px !important;
        border-radius: 14px !important;
    }

    .quote-watermark {
        font-size: 28px !important;
        top: 16px !important;
        right: 18px !important;
    }

    .testimonial-quote {
        font-size: 13.5px !important;
        line-height: 1.55 !important;
    }

    /* --- Home Demo Form (Mobile) --- */
    .home-demo-form-card {
        padding: 20px 15px !important;
        border-radius: 14px !important;
    }

    .demo-form-label {
        font-size: 11.5px !important;
        margin-bottom: 4px !important;
    }

    .demo-form-input,
    .demo-form-select {
        font-size: 13.5px !important;
        padding: 10px 12px 10px 36px !important;
        border-radius: 8px !important;
    }

    .demo-input-icon {
        left: 12px !important;
        font-size: 13px !important;
    }

    .demo-submit-btn {
        padding: 12px 20px !important;
        font-size: 14.5px !important;
        border-radius: 10px !important;
    }

    /* --- Page Title / Breadcrumbs (Mobile) --- */
    .page-title {
        padding: 28px 0 24px !important;
    }

    .page-title h1.title {
        font-size: 22px !important;
        margin-bottom: 4px !important;
    }

    .page-title .page-breadcrumb {
        font-size: 12px !important;
        flex-wrap: wrap;
    }

    /* --- About Page (Mobile) --- */
    .about-hero-section {
        padding: 30px 0 !important;
    }

    .about-stat-box {
        padding: 14px 10px !important;
        margin-bottom: 10px;
    }

    .about-stat-number {
        font-size: 22px !important;
    }

    .about-stat-label {
        font-size: 11.5px !important;
    }

    .who-we-are-card,
    .mission-vision-card,
    .what-we-do-pill-card,
    .why-about-card,
    .who-serve-card {
        padding: 18px 15px !important;
        border-radius: 14px !important;
        margin-bottom: 12px !important;
    }

    /* About What Footer Callout (Mobile) */
    .about-what-footer-pill {
        display: flex !important;
        align-items: flex-start !important;
        gap: 10px !important;
        padding: 16px 14px !important;
        border-radius: 14px !important;
        background: #F8FAFC !important;
        border: 1px solid #e2e8f0 !important;
        font-size: 13.5px !important;
        color: #475569 !important;
        text-align: left !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important;
        max-width: 100% !important;
    }
    .about-what-footer-pill i {
        margin-top: 3px !important;
        flex-shrink: 0 !important;
    }

    /* --- Solutions Hub & Details (Mobile) --- */
    .solutions-hero-section {
        padding: 32px 0 28px !important;
    }

    .solutions-hero-section .hero-pill-badge {
        flex-wrap: wrap !important;
        justify-content: center !important;
        padding: 5px 12px !important;
        font-size: 11px !important;
        max-width: 100% !important;
    }
    .solutions-hero-section .hero-pill-badge .pill-subtext {
        display: none !important;
    }
    .solutions-hero-section .hero-pill-badge .pill-divider {
        display: none !important;
    }

    /* Solutions Category Filter Switcher (Mobile Swipeable Pills) */
    .solution-filter-wrapper {
        margin-bottom: 24px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 4px 2px 10px !important;
        scrollbar-width: none;
    }
    .solution-filter-wrapper::-webkit-scrollbar {
        display: none;
    }
    .filter-pill-group {
        display: inline-flex !important;
        flex-wrap: nowrap !important;
        border-radius: 50px !important;
        padding: 5px 8px !important;
        gap: 6px !important;
        white-space: nowrap !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
    }
    .filter-btn {
        white-space: nowrap !important;
        padding: 7px 14px !important;
        font-size: 12.5px !important;
        border-radius: 50px !important;
        flex-shrink: 0 !important;
    }

    .solutions-metrics-container {
        margin-top: 20px !important;
    }

    .hero-metric-tile {
        padding: 10px 8px !important;
        border-radius: 12px !important;
        gap: 8px !important;
        min-height: 60px !important;
    }

    .metric-icon-squircle {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        font-size: 13px !important;
        border-radius: 9px !important;
    }

    .metric-value {
        font-size: 13.5px !important;
        font-weight: 800 !important;
        white-space: nowrap !important;
    }

    .metric-label {
        font-size: 10.5px !important;
        line-height: 1.25 !important;
    }

    .comparison-bento-card {
        padding: 14px 10px !important;
        border-radius: 16px !important;
    }

    .comparison-matrix-table {
        min-width: 580px !important;
    }

    .comparison-matrix-table th {
        padding: 12px 14px !important;
        font-size: 13.5px !important;
        white-space: nowrap !important;
    }

    .comparison-matrix-table td {
        padding: 12px 14px !important;
        font-size: 13px !important;
        line-height: 1.5 !important;
    }

    .solutions-showcase-section,
    .solutions-comparison-section {
        padding-top: 40px !important;
        padding-bottom: 45px !important;
    }

    .module-feature-card {
        padding: 18px 15px !important;
        border-radius: 14px !important;
    }

    .module-icon-box {
        width: 42px !important;
        height: 42px !important;
        font-size: 18px !important;
    }

    .detail-step-card {
        padding: 16px 14px !important;
        border-radius: 12px !important;
        margin-bottom: 10px;
    }

    .detail-step-num {
        width: 32px !important;
        height: 32px !important;
        font-size: 13px !important;
    }

    /* --- Contact Page (Mobile) --- */
    .contact-feature-card {
        padding: 20px 16px !important;
        border-radius: 14px !important;
        margin-bottom: 14px;
    }

    .card-icon-wrap {
        width: 44px !important;
        height: 44px !important;
        font-size: 18px !important;
    }

    .card-title {
        font-size: 16.5px !important;
    }

    .contact-form-card {
        padding: 20px 16px !important;
        border-radius: 14px !important;
    }

    /* --- FAQ Page (Mobile) --- */
    .faq-search-box-wrap {
        max-width: 100% !important;
        margin: 16px auto 0 !important;
    }

    .faq-search-input-group {
        padding: 4px 10px !important;
        border-radius: 50px !important;
    }

    .faq-search-input {
        font-size: 13px !important;
        height: 40px !important;
    }

    .faq-acc-btn {
        padding: 14px 16px !important;
        font-size: 14px !important;
    }

    .faq-item-num {
        font-size: 12px !important;
        width: 26px !important;
        height: 26px !important;
        line-height: 26px !important;
    }

    .faq-acc-body {
        padding: 14px 16px !important;
        font-size: 13.5px !important;
    }

    /* --- Gallery Page (Mobile) --- */
    .gallery-filter-container {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        justify-content: center;
    }

    .gallery-filter-pill {
        padding: 6px 12px !important;
        font-size: 12px !important;
    }

    .gallery-media-box {
        height: 180px !important;
    }

    /* --- Blog & Post (Mobile) --- */
    .news-block .image-box img {
        height: 170px !important;
    }

    .news-block .content-box {
        padding: 16px 14px !important;
    }

    .blog-details__img img {
        max-height: 240px !important;
        object-fit: cover !important;
    }

    .blog-details__content {
        padding: 16px 0 !important;
    }

    /* --- Footer (Mobile) --- */
    .main-footer {
        padding-top: 35px !important;
    }

    .footer-ambient-orb {
        display: none !important; /* Optimizes mobile performance & prevents overflow */
    }

    .footer-watermark-svg {
        display: none !important;
    }

    .footer-brand-column {
        text-align: center;
        padding-bottom: 20px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        margin-bottom: 20px;
    }

    .footer-col-title {
        font-size: 15px !important;
        margin-top: 12px !important;
        margin-bottom: 10px !important;
    }

    .footer-links-list li {
        margin-bottom: 6px !important;
    }

    .footer-links-list li a {
        font-size: 13px !important;
        padding: 2px 0 !important;
    }

    .footer-ribbon {
        padding: 20px 0 10px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    }

    .ribbon-info-item {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        text-align: left !important;
        gap: 12px !important;
        margin-bottom: 10px !important;
        background: rgba(255, 255, 255, 0.04) !important;
        padding: 12px 14px !important;
        border-radius: 12px !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
    }

    .ribbon-icon-circle {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        font-size: 15px !important;
        margin: 0 !important;
        border-radius: 10px !important;
        background: linear-gradient(135deg, #18B89A, #087F78) !important;
        color: #ffffff !important;
        border: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }

    .ribbon-label {
        font-size: 10px !important;
        letter-spacing: 0.6px !important;
        color: #18B89A !important;
        margin-bottom: 2px !important;
    }

    .ribbon-primary-text {
        font-size: 13.5px !important;
        line-height: 1.35 !important;
        word-break: break-word !important;
        margin-bottom: 0 !important;
    }

    .ribbon-primary-text a {
        color: #ffffff !important;
        text-decoration: none !important;
    }

    .footer-bottom-bar {
        padding: 16px 0 25px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    }

    .bottom-bar-inner {
        flex-direction: column !important;
        text-align: center !important;
        gap: 12px !important;
        align-items: center !important;
    }

    .made-with-love {
        font-size: 12.5px !important;
        margin-bottom: 0 !important;
        color: #94a3b8 !important;
    }

    .footer-social-nav {
        display: flex !important;
        justify-content: center !important;
        gap: 8px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .footer-social-nav li a {
        width: 34px !important;
        height: 34px !important;
        font-size: 13px !important;
        border-radius: 8px !important;
    }

    /* Floating Scroll-to-Top Button (Clear of Mobile Bottom Bar) */
    .scroll-to-top {
        right: 15px !important;
        bottom: 66px !important;
        width: 38px !important;
        height: 38px !important;
        font-size: 14px !important;
        line-height: 38px !important;
        z-index: 9980 !important;
    }
}


/* ==========================================================================
   5. SMALL MOBILE SCREENS (≤ 380px)
   ========================================================================== */
@media (max-width: 380px) {

    .auto-container,
    .container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    h1, .page-title h1.title, .solutions-hero-title, .faq-hero-title, .about-hero-title {
        font-size: 20px !important;
    }

    h2, .sec-title h2, .section-title, .form-main-heading {
        font-size: 19px !important;
    }

    .hero-main-title {
        font-size: 20px !important;
    }

    .main-header .logo-box .logo img {
        max-height: 26px !important;
        max-width: 115px !important;
    }



    .solutions-metrics-container .row > div {
        width: 100% !important;
    }

    .demo-form-card,
    .home-demo-form-card,
    .contact-form-card {
        padding: 16px 12px !important;
    }
}


/* ==========================================================================
   6. CLEAN TOUCH & ACCESSIBILITY OPTIMIZATIONS
   ========================================================================== */
@media (hover: none) and (pointer: coarse) {


    .main-menu .navigation > li > a,
    .mobile-menu .navigation > li > a {
        padding-top: 12px;
        padding-bottom: 12px;
    }
}