/* ==========================================
    BLOOMSERVE ADP-STYLE UNIFORM MOBILE STYLES
========================================== */
@media (max-width: 1024px) {
    /* Prevent horizontal scrolling */
    body, html {
        overflow-x: hidden !important;
        width: 100% !important;
    }

    /* Uniform Mobile Container Spacing */
    .container, .topbar-container, .navbar, .footer-container {
        padding: 0 16px !important;
    }

    /* Hide Desktop Nav & Topbar, Show Mobile Hamburger */
    .nav-menu { display: none !important; }
    .topbar { display: none !important; }
    .nav-actions { display: none !important; }
    .header { top: 0 !important; height: 70px !important; }
    .mobile-menu-toggle { display: block !important; }

    /* ==========================================
        BLOOMSERVE — COMPACT PREMIUM MOBILE HERO
        Matches the desktop Command Center concept
        VISUAL ONLY — NO HTML / JS / FUNCTIONALITY CHANGE
    ========================================== */

    .hero {
        padding: 74px 14px 28px !important;
        text-align: center !important;
        position: relative !important;
        z-index: 1 !important;
        overflow: hidden !important;
        isolation: isolate !important;
        background:
            radial-gradient(circle at 50% 0%, rgba(11,134,213,.22), transparent 34%),
            radial-gradient(circle at 100% 55%, rgba(154,192,60,.16), transparent 34%),
            radial-gradient(circle at 0% 72%, rgba(0,174,239,.10), transparent 30%),
            linear-gradient(145deg,#f4fbff 0%,#eef8ff 48%,#f5fbf3 100%) !important;
    }

    .hero::before {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important;
        z-index: -3 !important;
        pointer-events: none !important;
        opacity: .9 !important;
        background:
            radial-gradient(circle at 12% 17%, rgba(11,134,213,.24) 0 1.5px, transparent 2.5px),
            radial-gradient(circle at 88% 22%, rgba(154,192,60,.25) 0 1.5px, transparent 2.5px),
            radial-gradient(circle at 18% 63%, rgba(11,134,213,.16) 0 1px, transparent 2px),
            radial-gradient(circle at 84% 70%, rgba(154,192,60,.18) 0 1px, transparent 2px),
            linear-gradient(120deg, transparent 30%, rgba(11,134,213,.045) 30.2%, transparent 30.5%),
            linear-gradient(300deg, transparent 62%, rgba(154,192,60,.045) 62.2%, transparent 62.5%) !important;
        background-size: 70px 70px,83px 83px,58px 58px,74px 74px,auto,auto !important;
        mask-image: linear-gradient(to bottom, black 0%, black 72%, transparent 100%) !important;
        -webkit-mask-image: linear-gradient(to bottom, black 0%, black 72%, transparent 100%) !important;
    }

    .hero::after {
        content: "" !important;
        position: absolute !important;
        width: 360px !important;
        height: 360px !important;
        top: -225px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        border-radius: 50% !important;
        background: radial-gradient(circle,
            rgba(11,134,213,.30) 0%,
            rgba(0,174,239,.16) 32%,
            rgba(154,192,60,.08) 52%,
            transparent 70%) !important;
        filter: blur(7px) !important;
        z-index: -2 !important;
        pointer-events: none !important;
        animation: bsMobileHalo 7s ease-in-out infinite alternate !important;
    }

    @keyframes bsMobileHalo {
        from { transform: translateX(-52%) scale(.92); opacity:.70; }
        to { transform: translateX(-48%) scale(1.08); opacity:1; }
    }

    .hero-flex-container {
        flex-direction: column !important;
        gap: 14px !important;
        position: relative !important;
        z-index: 2 !important;
    }

    .hero-content-left {
        text-align: center !important;
        flex: none !important;
        width: 100% !important;
        position: relative !important;
    }

    .hero-content-left > div:first-child {
        margin-bottom: 15px !important;
        padding: 6px 13px !important;
        font-size: 11px !important;
        border-radius: 24px !important;
        box-shadow: 0 7px 18px rgba(11,134,213,.07) !important;
    }

    .hero h1,
    .inner-hero-container h1 {
        font-size: clamp(31px, 8.7vw, 38px) !important;
        letter-spacing: -1.8px !important;
        line-height: 1.055 !important;
        font-weight: 900 !important;
        margin: 4px auto 14px !important;
        max-width: 370px !important;
        text-wrap: balance !important;
        background: linear-gradient(125deg,#07152b 5%,#0b6fae 38%,#0b86d5 62%,#72a63c 100%) !important;
        -webkit-background-clip: text !important;
        background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        filter: drop-shadow(0 4px 13px rgba(11,134,213,.10)) !important;
    }

    .hero p {
        font-size: 14px !important;
        line-height: 1.58 !important;
        max-width: 365px !important;
        margin: 0 auto 19px !important;
        color: #405267 !important;
        text-wrap: balance !important;
    }

    .hero-cta-group {
        justify-content: center !important;
        flex-direction: column !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 370px !important;
        margin: 0 auto 18px !important;
    }

    .hero-cta-group .btn-explore,
    .hero-cta-group .btn-secondary-action {
        width: 100% !important;
        min-height: 50px !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 13px 18px !important;
        font-size: 14.5px !important;
        font-weight: 800 !important;
        border-radius: 15px !important;
        position: relative !important;
        overflow: hidden !important;
        transition: transform .2s ease, box-shadow .2s ease !important;
    }

    .hero-cta-group .btn-explore {
        background: linear-gradient(135deg,#0794df 0%,#0877c4 55%,#075fa4 100%) !important;
        border: 1px solid rgba(255,255,255,.48) !important;
        color: #fff !important;
        box-shadow: 0 11px 24px rgba(11,134,213,.27), inset 0 1px 0 rgba(255,255,255,.40) !important;
    }

    .hero-cta-group .btn-explore::before {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important;
        background: linear-gradient(110deg,transparent 28%,rgba(255,255,255,.20) 50%,transparent 72%) !important;
        transform: translateX(-110%) !important;
        animation: bsMobileShine 4.8s ease-in-out infinite !important;
        pointer-events: none !important;
    }

    @keyframes bsMobileShine {
        0%,58% { transform:translateX(-110%); }
        78%,100% { transform:translateX(110%); }
    }

    .hero-cta-group .btn-secondary-action {
        background: rgba(255,255,255,.72) !important;
        backdrop-filter: blur(16px) saturate(135%) !important;
        -webkit-backdrop-filter: blur(16px) saturate(135%) !important;
        border: 1px solid rgba(255,255,255,.95) !important;
        color: #176c9f !important;
        box-shadow: 0 7px 18px rgba(15,23,42,.065), inset 0 1px 0 rgba(255,255,255,.95) !important;
    }

    .hero-cta-group .btn-explore:active,
    .hero-cta-group .btn-secondary-action:active {
        transform: scale(.985) !important;
    }

    .hero-mockup-right {
        display: none !important;
    }

    .hero-stats-row {
        display: grid !important;
        grid-template-columns: repeat(3,1fr) !important;
        gap: 6px !important;
        border-top: none !important;
        padding: 0 !important;
        margin: 2px auto 0 !important;
        max-width: 370px !important;
        position: relative !important;
    }

    .hero-stats-row::before {
        content: "" !important;
        position: absolute !important;
        top: 50% !important;
        left: 7% !important;
        right: 7% !important;
        height: 1px !important;
        background: linear-gradient(90deg,transparent,rgba(11,134,213,.12),rgba(154,192,60,.12),transparent) !important;
        z-index: -1 !important;
    }

    .hero-stats-row .stat-item {
        position: relative !important;
        overflow: hidden !important;
        min-height: 68px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        background: linear-gradient(145deg,rgba(255,255,255,.84),rgba(255,255,255,.58)) !important;
        backdrop-filter: blur(17px) saturate(130%) !important;
        -webkit-backdrop-filter: blur(17px) saturate(130%) !important;
        border: 1px solid rgba(255,255,255,.94) !important;
        border-radius: 14px !important;
        padding: 9px 3px !important;
        box-shadow: 0 8px 20px rgba(15,23,42,.065), inset 0 1px 0 rgba(255,255,255,.95) !important;
        text-align: center !important;
    }

    .hero-stats-row .stat-item::before {
        content: "" !important;
        position: absolute !important;
        width: 42px !important;
        height: 42px !important;
        top: -25px !important;
        right: -16px !important;
        border-radius: 50% !important;
        background: rgba(11,134,213,.11) !important;
    }

    .hero-stats-row .stat-item:nth-child(2)::before {
        background: rgba(154,192,60,.13) !important;
    }

    .hero-stats-row .stat-item:nth-child(3)::before {
        background: rgba(99,102,241,.09) !important;
    }

    .hero-stats-row .stat-item h3 {
        font-size: 13px !important;
        line-height: 1.05 !important;
        font-weight: 900 !important;
        margin: 0 0 4px !important;
        color: #101d31 !important;
    }

    .hero-stats-row .stat-item:nth-child(2) h3 {
        color: #6f9424 !important;
    }

    .hero-stats-row .stat-item p {
        font-size: 8.5px !important;
        line-height: 1.2 !important;
        color: #64748b !important;
        margin: 0 !important;
        font-weight: 650 !important;
    }

    .hero-content-left::before {
        content: "" !important;
        position: absolute !important;
        width: 210px !important;
        height: 210px !important;
        top: -92px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        border: 1px solid rgba(11,134,213,.11) !important;
        border-radius: 50% !important;
        box-shadow: 0 0 0 18px rgba(11,134,213,.018), 0 0 0 36px rgba(154,192,60,.018) !important;
        pointer-events: none !important;
        z-index: -1 !important;
    }

    .hero-content-left::after {
        content: "" !important;
        position: absolute !important;
        width: 7px !important;
        height: 7px !important;
        top: 17px !important;
        right: 10% !important;
        border-radius: 50% !important;
        background: #9ac03c !important;
        box-shadow: 0 0 0 5px rgba(154,192,60,.10), 0 0 18px rgba(154,192,60,.35) !important;
        animation: bsMobileDot 3.8s ease-in-out infinite alternate !important;
        pointer-events: none !important;
    }

    @keyframes bsMobileDot {
        from { transform:translateY(4px); opacity:.55; }
        to { transform:translateY(-9px); opacity:1; }
    }

    @media (max-width:380px) {
        .hero {
            padding-left:12px !important;
            padding-right:12px !important;
        }
        .hero h1,
        .inner-hero-container h1 {
            font-size:30px !important;
            letter-spacing:-1.6px !important;
        }
        .hero p {
            font-size:13.5px !important;
        }
        .hero-stats-row .stat-item p {
            font-size:8px !important;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .hero::after,
        .hero-content-left::after,
        .hero-cta-group .btn-explore::before {
            animation:none !important;
        }
    }

    /* Fix Grid Layouts to Single Column on Mobile */
    .why-grid, 
    .enterprise-contact-wrapper, 
    .enterprise-form, 
    .footer-container, 
    .footer-right {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .form-group.full-width {
        grid-column: span 1 !important;
    }

    .enterprise-cta-section, 
    .workflow-sidebar, 
    .founder-spotlight-card,
    .why-card {
        padding: 24px 16px !important;
    }

    .captcha-submit-row {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        grid-column: span 1 !important;
    }
    
    .form-submit-btn {
        width: 100% !important;
    }

    /* Mobile Drawer Styles & HRMS Login Positioning */
    .mobile-drawer {
        background: #f8fafc !important;
        padding: 20px !important;
        max-width: 100% !important;
    }

    .drawer-header {
        border-bottom: 1px solid #e2e8f0 !important;
        padding-bottom: 15px !important;
        margin-bottom: 20px !important;
    }

    .mobile-menu-search {
        position: relative;
        margin-bottom: 20px;
    }

    .mobile-menu-search input {
        width: 100%;
        padding: 12px 40px 12px 16px;
        background: var(--white);
        border: 1px solid #cbd5e1;
        border-radius: 8px;
        font-size: 14px;
        outline: none;
    }

    .mobile-menu-search i {
        position: absolute;
        right: 16px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--primary);
        font-size: 16px;
    }

    .drawer-links {
        gap: 8px !important;
    }

    .drawer-links li {
        background: var(--white) !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 10px !important;
        overflow: hidden;
        margin-bottom: 4px;
        border-bottom: none !important;
    }

    .drawer-links li > a {
        padding: 14px 18px !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        color: var(--dark) !important;
    }

    /* ==========================================
        CRISP & CLICKABLE SUB-MENU OVERHAUL
    ========================================== */
    /* Default me sub-menu band rahenge */
    .drawer-sub-menu {
        background: #f8fafc !important;
        padding: 0 12px !important;
        border-top: none !important;
        border-radius: 0 !important;
        margin: 0 !important;
        display: none !important; /* Default hidden */
        flex-direction: column !important;
        gap: 6px !important;
    }

    /* Jab JavaScript active class ya display flex karegi tab khulenge */
    .drawer-sub-menu[style*="display: flex"],
    .drawer-sub-menu.active {
        display: flex !important;
        padding: 6px 12px 12px 12px !important;
        border-top: 1px solid #e2e8f0 !important;
    }

    /* Hide icons inside mobile sub-menu completely */
    .drawer-sub-menu i, 
    .drawer-sub-menu img, 
    .drawer-sub-menu .icon {
        display: none !important;
    }

    .drawer-sub-menu li {
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 8px !important;
        margin: 0 !important;
        box-shadow: none !important;
    }

    .drawer-sub-menu li a {
        font-size: 14px !important;
        font-weight: 600 !important;
        color: var(--dark) !important;
        padding: 12px 16px !important;
        display: block !important;
        width: 100% !important;
    }

    .drawer-sub-menu li a:hover {
        color: var(--primary) !important;
        background: rgba(11, 134, 213, 0.04) !important;
    }

    /* HRMS Login Button styled right inside the menu below Careers */
    .drawer-footer-action, .mobile-hrms-login-row {
        background: rgba(11, 134, 213, 0.08) !important;
        border: 1px solid rgba(11, 134, 213, 0.2) !important;
        border-radius: 10px !important;
        padding: 14px 18px !important;
        margin-top: 8px !important;
        text-align: center !important;
    }

    .btn-drawer-hrms {
        background: transparent !important;
        color: var(--primary) !important;
        border: none !important;
        font-weight: 700 !important;
        padding: 0 !important;
        box-shadow: none !important;
        font-size: 15px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        width: 100% !important;
    }
    
    /* ==========================================
        FLAWLESS UNIFORM MOBILE DRAWER STYLES
    ========================================== */
    .mobile-drawer {
        position: fixed !important;
        top: 0 !important;
        right: -100% !important;
        width: 100% !important;
        max-width: 320px !important;
        height: 100vh !important;
        background: #ffffff !important;
        z-index: 999999 !important;
        box-shadow: -15px 0 40px rgba(15, 23, 42, 0.2) !important;
        transition: right 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
        overflow-y: auto !important;
        padding: 20px !important;
        display: block !important;
    }

    .mobile-drawer.active {
        right: 0 !important;
    }

    /* Drawer Header & Close Button Alignment */
    .drawer-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        border-bottom: 1px solid #e2e8f0 !important;
        padding-bottom: 15px !important;
        margin-bottom: 15px !important;
    }

    .drawer-close-btn {
        background: none !important;
        border: none !important;
        font-size: 22px !important;
        color: var(--dark) !important;
        cursor: pointer !important;
    }

    /* =========================================================
       BLOOMSERVE — UNIVERSAL MOBILE NO-CUT / NO-OVERFLOW LAYER
       Applies ONLY below 1025px.
       Desktop CSS remains untouched.

       Purpose:
       - Prevent any page from becoming wider than viewport
       - Stop fixed-width flex/grid children from pushing content off-screen
       - Keep images/cards/forms/tables inside the viewport
       - Preserve intentional floating UI without horizontal page overflow
    ========================================================= */

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

    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
    }

    body {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Every major page wrapper must be viewport-safe */
    main,
    header,
    footer,
    nav,
    section,
    article,
    aside,
    .container,
    .topbar-container,
    .navbar,
    .footer-container,
    .section-container {
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* Containers should never create an accidental fixed canvas */
    .container,
    .topbar-container,
    .navbar,
    .footer-container {
        width: 100% !important;
    }

    /* Critical rule for flex/grid layouts:
       children are allowed to shrink instead of overflowing */
    .hero-flex-container,
    .about-flex-container,
    .about-container,
    .about-content,
    .about-section,
    .founder-section,
    .founder-content,
    .founder-spotlight,
    .founder-spotlight-card,
    .enterprise-contact-wrapper,
    .why-grid,
    .services-grid,
    .solutions-grid,
    .industries-grid,
    .cards-grid,
    .content-grid,
    .two-column,
    .two-col,
    .columns {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /* All direct flex/grid children may shrink */
    .hero-flex-container > *,
    [class*="about"] > *,
    [class*="founder"] > *,
    [class*="contact"] > *,
    [class*="grid"] > *,
    [class*="column"] > *,
    [class*="columns"] > * {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /* Images and embedded media can never force page width */
    img,
    picture,
    picture img,
    video,
    iframe,
    embed,
    object,
    canvas,
    svg {
        max-width: 100% !important;
    }

    img,
    video,
    iframe,
    embed,
    object,
    canvas {
        height: auto !important;
    }

    /* Prevent long URLs, email addresses and long words from
       expanding cards/columns on mobile */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    a,
    span,
    li,
    td,
    th,
    label,
    small,
    strong,
    div {
        overflow-wrap: anywhere !important;
        word-break: normal !important;
    }

    /* Forms */
    input,
    select,
    textarea,
    button {
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="url"],
    input[type="password"],
    select,
    textarea {
        width: 100% !important;
    }

    /* Tables should scroll inside their own area rather than
       pushing the entire website horizontally */
    table {
        width: 100% !important;
        max-width: 100% !important;
        table-layout: fixed !important;
    }

    .table-responsive,
    .table-wrapper,
    .table-scroll {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Code/pre blocks are contained */
    pre,
    code {
        max-width: 100% !important;
        white-space: pre-wrap !important;
        overflow-wrap: anywhere !important;
    }

    /* Cards/panels must not keep desktop fixed widths */
    [class*="card"],
    [class*="panel"],
    [class*="box"] {
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* Common fixed desktop widths become fluid on mobile */
    [style*="width: 500px"],
    [style*="width:500px"],
    [style*="width: 520px"],
    [style*="width:520px"],
    [style*="width: 550px"],
    [style*="width:550px"],
    [style*="width: 560px"],
    [style*="width:560px"],
    [style*="width: 600px"],
    [style*="width:600px"],
    [style*="min-width: 500px"],
    [style*="min-width:500px"],
    [style*="min-width: 550px"],
    [style*="min-width:550px"],
    [style*="min-width: 600px"],
    [style*="min-width:600px"] {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* Absolute/floating decorative elements:
       keep them inside viewport when they use desktop offsets */
    [style*="right:-"],
    [style*="left:-"] {
        max-width: calc(100vw - 24px) !important;
    }

    /* Prevent generic transforms from creating a horizontal canvas */
    .about-section,
    .about-container,
    .founder-section,
    .founder-spotlight,
    .founder-spotlight-card,
    .enterprise-contact-wrapper,
    .why-section,
    .services-section,
    .solutions-section,
    .industries-section,
    .resources-section,
    .careers-section,
    .contact-section {
        overflow-x: clip !important;
    }

    /* About/founder layouts: stack safely if a desktop
       two-column/flex layout survives from desktop CSS */
    [class*="about-"],
    [class*="founder-"] {
        min-width: 0 !important;
    }

    [class*="about-"] img,
    [class*="founder-"] img {
        max-width: 100% !important;
    }

    /* Text columns cannot remain desktop-sized */
    [class*="about-"] p,
    [class*="about-"] h1,
    [class*="about-"] h2,
    [class*="about-"] h3,
    [class*="founder-"] p,
    [class*="founder-"] h1,
    [class*="founder-"] h2,
    [class*="founder-"] h3 {
        max-width: 100% !important;
    }

    /* Mobile footer: everything stays within the viewport */
    .footer,
    .footer-container,
    .footer-left,
    .footer-right,
    .footer-column,
    .footer-links {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-wrap: anywhere !important;
    }

    .footer img,
    .footer svg {
        max-width: 100% !important;
    }

    /* Fixed WhatsApp / email buttons remain visible but
       never become a horizontal overflow source */
    .whatsapp-float,
    .email-float,
    .floating-whatsapp,
    .floating-email {
        max-width: 58px !important;
    }

    /* Keep mobile drawer independent from page width */
    .mobile-drawer {
        box-sizing: border-box !important;
        max-width: min(320px, 100vw) !important;
        width: min(320px, 100vw) !important;
    }

    /* Last-resort viewport containment for unusual legacy
       desktop elements. Does NOT alter desktop styles. */
    .page-wrapper,
    .site-wrapper,
    .main-wrapper,
    .content-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: clip !important;
    }

    /* Very small phones */
    @media (max-width: 380px) {
        .container,
        .topbar-container,
        .navbar,
        .footer-container {
            padding-left: 12px !important;
            padding-right: 12px !important;
        }

        .footer-container,
        .footer-right,
        .footer-left {
            padding-left: 0 !important;
            padding-right: 0 !important;
        }
    }