/* ============================================================
       1. ROOT VARIABLES & RESET
       ============================================================ */
    :root {
        --primary: #6C3CE1;
        --primary-dark: #5A2FC9;
        --primary-light: #8B6BE8;
        --secondary: #EC4899;
        --text-dark: #1A1F3A;
        --text-light: #E8EDF5;
        --text-muted: #64748B;
        --white: #FFFFFF;
        --black: #000000;
        --border-radius: 40px;
        --border-radius-sm: 20px;
        --border-radius-xs: 12px;
        --shadow: 0 4px 30px rgba(0, 0, 0, 0.08);
        --shadow-lg: 0 10px 50px rgba(0, 0, 0, 0.12);
        --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        --header-height: 64px;
        --header-height-mobile: 48px;
    }

    /* ============================================================
       2. BASE CONTAINER & GRID SYSTEM
       ============================================================ */
    .container {
        width: 100% !important;
        max-width: 1320px !important;
        margin: 0 auto !important;
        padding: 0 20px !important;
    }

    @media (max-width: 1200px) {
        .container { padding: 0 18px !important; }
    }
    @media (max-width: 992px) {
        .container { padding: 0 16px !important; }
    }
    @media (max-width: 768px) {
        .container { padding: 0 14px !important; }
    }
    @media (max-width: 576px) {
        .container { padding: 0 12px !important; }
    }
    @media (max-width: 400px) {
        .container { padding: 0 8px !important; }
    }

    /* Universal Grid System */
    .grid-2, .grid-3, .grid-4, .grid-5, .grid-6 {
        display: grid !important;
        gap: 24px !important;
    }

    @media (min-width: 993px) {
        .grid-2 { grid-template-columns: repeat(2, 1fr) !important; }
        .grid-3 { grid-template-columns: repeat(3, 1fr) !important; }
    }
    @media (max-width: 992px) and (min-width: 577px) {
        .grid-2 { grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; }
        .grid-3 { grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; }
    }
    @media (max-width: 576px) {
        .grid-2 { grid-template-columns: 1fr !important; gap: 16px !important; }
        .grid-3 { grid-template-columns: 1fr !important; gap: 16px !important; }
    }

    @media (min-width: 1200px) {
        .grid-4 { grid-template-columns: repeat(4, 1fr) !important; }
        .grid-5 { grid-template-columns: repeat(5, 1fr) !important; }
    }
    @media (max-width: 1199px) and (min-width: 993px) {
        .grid-4 { grid-template-columns: repeat(3, 1fr) !important; gap: 20px !important; }
        .grid-5 { grid-template-columns: repeat(4, 1fr) !important; gap: 20px !important; }
    }
    @media (max-width: 992px) and (min-width: 577px) {
        .grid-4 { grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; }
        .grid-5 { grid-template-columns: repeat(3, 1fr) !important; gap: 16px !important; }
    }
    @media (max-width: 576px) {
        .grid-4 { grid-template-columns: 1fr 1fr !important; gap: 14px !important; }
        .grid-5 { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
    }
    @media (max-width: 400px) {
        .grid-4 { grid-template-columns: 1fr !important; gap: 12px !important; }
        .grid-5 { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
    }

    /* ============================================================
       3. TYPOGRAPHY - FULLY RESPONSIVE
       ============================================================ */
    h1, .h1 { font-size: clamp(2rem, 5vw, 4.5rem) !important; line-height: 1.1 !important; }
    h2, .h2 { font-size: clamp(1.8rem, 4vw, 3.5rem) !important; line-height: 1.2 !important; }
    h3, .h3 { font-size: clamp(1.3rem, 2.5vw, 2rem) !important; line-height: 1.3 !important; }
    h4, .h4 { font-size: clamp(1.1rem, 1.8vw, 1.5rem) !important; line-height: 1.4 !important; }
    h5, .h5 { font-size: clamp(1rem, 1.4vw, 1.25rem) !important; line-height: 1.5 !important; }
    h6, .h6 { font-size: clamp(0.9rem, 1.2vw, 1.1rem) !important; line-height: 1.5 !important; }
    p, .p, .pra { font-size: clamp(0.9rem, 1.2vw, 1.1rem) !important; line-height: 1.7 !important; }
    .small-text { font-size: clamp(0.75rem, 0.9vw, 0.9rem) !important; }

    .display-1 { font-size: clamp(2.5rem, 6vw, 5.5rem) !important; line-height: 1 !important; }
    .display-2 { font-size: clamp(2.2rem, 5vw, 4.5rem) !important; line-height: 1.1 !important; }
    .display-3 { font-size: clamp(2rem, 4vw, 3.8rem) !important; line-height: 1.2 !important; }
    .display-4 { font-size: clamp(1.8rem, 3.5vw, 3rem) !important; line-height: 1.2 !important; }

    .section-title-premium {
        font-size: clamp(1.8rem, 4vw, 3.5rem) !important;
        line-height: 1.2 !important;
        margin-bottom: clamp(16px, 2vw, 30px) !important;
    }

    .section-badge {
        font-size: clamp(0.6rem, 0.9vw, 0.75rem) !important;
        padding: clamp(4px, 0.6vw, 10px) clamp(12px, 1.5vw, 24px) !important;
        letter-spacing: clamp(1px, 0.3vw, 3px) !important;
        border-radius: 50px !important;
        display: inline-block !important;
    }

    .section-spacing-premium { padding: clamp(30px, 6vw, 80px) 0 !important; }
    .section-spacing-premium-sm { padding: clamp(20px, 4vw, 50px) 0 !important; }

    /* ============================================================
       4. BUTTONS - RESPONSIVE
       ============================================================ */
    .btn-ultra, .btn-premium, .btn-cta-premium {
        padding: clamp(10px, 1.2vw, 16px) clamp(20px, 3vw, 40px) !important;
        font-size: clamp(0.8rem, 1vw, 1rem) !important;
        border-radius: 50px !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        transition: var(--transition) !important;
        border: none !important;
        cursor: pointer !important;
        text-decoration: none !important;
    }

    .btn-outline-ultra {
        padding: clamp(8px, 1vw, 14px) clamp(18px, 2.5vw, 36px) !important;
        font-size: clamp(0.8rem, 1vw, 1rem) !important;
        border-radius: 50px !important;
        border: 2px solid !important;
        background: transparent !important;
        transition: var(--transition) !important;
        cursor: pointer !important;
        text-decoration: none !important;
    }

    .btn-sm {
        padding: clamp(6px, 0.8vw, 10px) clamp(14px, 1.5vw, 20px) !important;
        font-size: clamp(0.7rem, 0.8vw, 0.85rem) !important;
    }

    .btn-lg {
        padding: clamp(14px, 1.5vw, 20px) clamp(28px, 4vw, 50px) !important;
        font-size: clamp(0.95rem, 1.2vw, 1.2rem) !important;
    }

    /* ============================================================
       5. HEADER - COMPLETE FIXED
       ============================================================ */
    #global-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        z-index: 9999 !important;
        background: #F5F1E8 !important;
        border-bottom: 2px solid rgba(108, 60, 225, 0.08) !important;
        height: var(--header-height) !important;
        min-height: var(--header-height) !important;
        max-height: var(--header-height) !important;
        box-shadow: 0 2px 20px rgba(0, 0, 0, 0.04) !important;
        transition: var(--transition) !important;
        overflow: visible !important;
        display: flex !important;
        align-items: center !important;
    }

    #global-header.scrolled {
        background: rgba(255, 255, 255, 0.98) !important;
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08) !important;
        border-bottom: none !important;
    }

    #global-header > header {
        width: 100% !important;
        padding: 0 !important;
        background: transparent !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        overflow: visible !important;
    }

    #global-header .container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 20px !important;
        overflow: visible !important;
    }

    #global-header .header-common-wrapper {
        width: 100% !important;
        overflow: visible !important;
    }

    .header-main {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0 !important;
        height: var(--header-height) !important;
        min-height: var(--header-height) !important;
        max-height: var(--header-height) !important;
        max-width: 1320px !important;
        margin: 0 auto !important;
        overflow: visible !important;
    }

    /* Logo */
    .header-logo {
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        text-decoration: none !important;
        height: 100% !important;
    }

    .header-logo img {
        max-height: 40px !important;
        width: auto !important;
        display: block !important;
        transition: var(--transition) !important;
    }

    .header-logo .logo-text {
        font-size: clamp(1.2rem, 1.8vw, 1.6rem) !important;
        font-weight: 700 !important;
        color: var(--text-dark) !important;
    }
    .header-logo .logo-text span { color: var(--primary) !important; }

    /* Desktop Menu */
    .main-menu {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 100% !important;
    }

    .main-menu nav {
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .main-menu nav > ul {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        height: 100% !important;
    }

    .main-menu nav > ul > li {
        position: relative !important;
        list-style: none !important;
        display: flex !important;
        align-items: center !important;
        height: 100% !important;
    }

    .main-menu nav > ul > li > a {
        padding: 6px 14px !important;
        font-size: 0.82rem !important;
        font-weight: 700 !important;
        border-radius: 30px !important;
        transition: var(--transition) !important;
        color: var(--text-dark) !important;
        text-decoration: none !important;
        display: flex !important;
        align-items: center !important;
        height: 36px !important;
        text-transform: uppercase !important;
        letter-spacing: 0.3px !important;
        position: relative !important;
    }

    .main-menu nav > ul > li > a::after {
        content: '' !important;
        position: absolute !important;
        bottom: 0 !important;
        left: 50% !important;
        width: 0 !important;
        height: 2.5px !important;
        background: linear-gradient(90deg, var(--primary), #8B5CF6, #EC4899) !important;
        border-radius: 4px !important;
        transition: var(--transition) !important;
        transform: translateX(-50%) !important;
    }

    .main-menu nav > ul > li > a:hover::after,
    .main-menu nav > ul > li.active > a::after {
        width: 60% !important;
    }

    .main-menu nav > ul > li > a:hover {
        color: var(--primary) !important;
        background: rgba(108, 60, 225, 0.06) !important;
    }

    .main-menu nav > ul > li.active > a {
        color: var(--primary) !important;
        background: rgba(108, 60, 225, 0.08) !important;
    }

    /* Dropdown arrow using pure CSS */
    .main-menu nav > ul > li > a i.fa-chevron-down,
    .main-menu nav > ul > li > a .dropdown-icon {
        display: inline-block !important;
        width: 6px !important;
        height: 6px !important;
        margin-left: 5px !important;
        border-right: 2px solid #94A3B8 !important;
        border-bottom: 2px solid #94A3B8 !important;
        font-size: 0 !important;
        line-height: 0 !important;
        color: transparent !important;
        transform: rotate(45deg) !important;
        transition: var(--transition) !important;
        vertical-align: middle !important;
        margin-top: -3px !important;
        flex-shrink: 0 !important;
    }

    .main-menu nav > ul > li:hover > a i.fa-chevron-down,
    .main-menu nav > ul > li:hover > a .dropdown-icon {
        border-color: var(--primary) !important;
        transform: rotate(225deg) !important;
    }

    /* Submenu - RED HOVER */
    .main-menu nav > ul > li .submenu {
        position: absolute !important;
        top: calc(100% + 4px) !important;
        left: 50% !important;
        transform: translateX(-50%) translateY(8px) !important;
        background: white !important;
        min-width: 200px !important;
        padding: 8px 0 !important;
        border-radius: 14px !important;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: var(--transition) !important;
        z-index: 999999 !important;
        border: 1px solid rgba(108, 60, 225, 0.08) !important;
    }

    .main-menu nav > ul > li:hover > .submenu {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateX(-50%) translateY(0px) !important;
    }

    .main-menu nav > ul > li .submenu li {
        display: block !important;
        margin: 0 !important;
        list-style: none !important;
    }

    .main-menu nav > ul > li .submenu li a {
        padding: 6px 20px !important;
        display: block !important;
        color: var(--text-dark) !important;
        font-weight: 600 !important;
        transition: var(--transition) !important;
        font-size: 0.75rem !important;
        text-decoration: none !important;
        text-transform: uppercase !important;
        letter-spacing: 0.3px !important;
    }

    /* RED BACKGROUND ON SUBMENU HOVER */
    .main-menu nav > ul > li .submenu li a:hover {
        background: linear-gradient(90deg, #DC2626, #EF4444) !important;
        color: white !important;
        padding-left: 28px !important;
    }

    /* ============================================================
       6. HEADER RIGHT - FIXED
       ============================================================ */
    .header-right {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        height: 100% !important;
        flex: 1 1 auto !important;
    }

    .mean__menu-wrapper {
        flex: 1 1 auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 100% !important;
    }

    .header-right .btn-header {
        padding: 6px 18px !important;
        background: linear-gradient(135deg, var(--primary), var(--primary-light)) !important;
        color: #fff !important;
        border: none !important;
        border-radius: 30px !important;
        font-weight: 700 !important;
        font-size: 0.72rem !important;
        cursor: pointer !important;
        transition: var(--transition) !important;
        box-shadow: 0 4px 15px rgba(108, 60, 225, 0.25) !important;
        text-decoration: none !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        height: 34px !important;
        flex-shrink: 0 !important;
    }

    .header-right .btn-header:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 25px rgba(108, 60, 225, 0.4) !important;
    }

    /* ============================================================
       7. HAMBURGER - COMPLETE FIXED
       ============================================================ */
    .header__hamburger {
        display: none !important;
        flex: 0 0 auto !important;
        flex-shrink: 0 !important;
        z-index: 10001 !important;
        height: 100% !important;
        align-items: center !important;
        justify-content: center !important;
        margin-left: 4px !important;
    }

    .hamburger-btn {
        display: flex !important;
        flex-direction: column !important;
        gap: 4.5px !important;
        cursor: pointer !important;
        padding: 6px 5px !important;
        background: linear-gradient(135deg, var(--primary), var(--primary-light)) !important;
        border: none !important;
        border-radius: 10px !important;
        outline: none !important;
        transition: var(--transition) !important;
        box-shadow: 0 3px 15px rgba(108, 60, 225, 0.3) !important;
        width: 40px !important;
        height: 40px !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }

    .hamburger-btn:hover {
        transform: scale(1.05) !important;
        box-shadow: 0 5px 25px rgba(108, 60, 225, 0.4) !important;
    }

    .hamburger-btn:active {
        transform: scale(0.92) !important;
    }

    .hamburger-line {
        display: block !important;
        width: 20px !important;
        height: 2.5px !important;
        background: #ffffff !important;
        border-radius: 4px !important;
        transition: var(--transition) !important;
        transform-origin: center !important;
        flex-shrink: 0 !important;
    }

    .hamburger-btn.active .hamburger-line:nth-child(1) {
        transform: translateY(7px) rotate(45deg) !important;
    }
    .hamburger-btn.active .hamburger-line:nth-child(2) {
        opacity: 0 !important;
        transform: scaleX(0) !important;
    }
    .hamburger-btn.active .hamburger-line:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg) !important;
    }

    /* ============================================================
       8. HEADER RESPONSIVE - COMPLETE FIXED
       ============================================================ */
    @media (max-width: 1199px) {
        .header__hamburger { 
            display: flex !important; 
            align-items: center !important;
        }
        .main-menu nav > ul { 
            display: none !important; 
        }
        .header-right {
            justify-content: flex-end !important;
        }
        .mean__menu-wrapper {
            flex: 0 0 auto !important;
        }
        .main-menu nav > ul > li > a .dropdown-icon {
            display: none !important;
        }
        #global-header .container {
            padding: 0 12px !important;
        }
    }

    @media (min-width: 1200px) {
        .header__hamburger { 
            display: none !important; 
        }
        .main-menu nav > ul { 
            display: flex !important; 
        }
        .header-right {
            justify-content: center !important;
        }
        .mean__menu-wrapper {
            flex: 1 1 auto !important;
        }
        .main-menu nav > ul > li > a .dropdown-icon {
            display: inline-block !important;
        }
        #global-header .container {
            padding: 0 20px !important;
        }
    }

    @media (max-width: 991px) {
        :root {
            --header-height: 56px;
            --header-height-mobile: 56px;
        }
        #global-header {
            height: 56px !important;
            min-height: 56px !important;
            max-height: 56px !important;
        }
        .header-main { 
            height: 56px !important;
            min-height: 56px !important;
            max-height: 56px !important;
            padding: 0 !important;
        }
        .header-logo img { 
            max-height: 32px !important; 
        }
        .hamburger-btn { 
            width: 34px !important; 
            height: 34px !important; 
            padding: 5px 4px !important; 
            border-radius: 8px !important; 
            gap: 4px !important;
        }
        .hamburger-line { 
            width: 17px !important; 
            height: 2px !important; 
        }
        .hamburger-btn.active .hamburger-line:nth-child(1) { 
            transform: translateY(6px) rotate(45deg) !important; 
        }
        .hamburger-btn.active .hamburger-line:nth-child(3) { 
            transform: translateY(-6px) rotate(-45deg) !important; 
        }
        .header-right .btn-header { 
            padding: 4px 12px !important; 
            font-size: 0.65rem !important; 
            height: 28px !important;
        }
        .header-right .btn-header .btn-text { 
            display: none !important; 
        }
        #global-header .container {
            padding: 0 12px !important;
        }
    }

    @media (max-width: 576px) {
        :root {
            --header-height: 48px;
            --header-height-mobile: 48px;
        }
        #global-header {
            height: 48px !important;
            min-height: 48px !important;
            max-height: 48px !important;
        }
        .header-main { 
            height: 48px !important;
            min-height: 48px !important;
            max-height: 48px !important;
            padding: 0 !important;
        }
        .header-logo img { 
            max-height: 28px !important; 
        }
        .hamburger-btn { 
            width: 30px !important; 
            height: 30px !important; 
            padding: 4px 3px !important; 
            border-radius: 6px !important; 
            gap: 3.5px !important;
        }
        .hamburger-line { 
            width: 15px !important; 
            height: 2px !important; 
        }
        .hamburger-btn.active .hamburger-line:nth-child(1) { 
            transform: translateY(5.5px) rotate(45deg) !important; 
        }
        .hamburger-btn.active .hamburger-line:nth-child(3) { 
            transform: translateY(-5.5px) rotate(-45deg) !important; 
        }
        .header-right .btn-header { 
            padding: 3px 8px !important; 
            font-size: 0.55rem !important; 
            height: 24px !important;
            border-radius: 4px !important;
        }
        .header-right {
            gap: 4px !important;
        }
        #global-header .container {
            padding: 0 8px !important;
        }
    }

    @media (max-width: 400px) {
        :root {
            --header-height: 42px;
            --header-height-mobile: 42px;
        }
        #global-header {
            height: 42px !important;
            min-height: 42px !important;
            max-height: 42px !important;
        }
        .header-main { 
            height: 42px !important;
            min-height: 42px !important;
            max-height: 42px !important;
            padding: 0 !important;
        }
        .header-logo img { 
            max-height: 24px !important; 
        }
        .hamburger-btn { 
            width: 26px !important; 
            height: 26px !important; 
            padding: 3px 2px !important; 
            border-radius: 4px !important; 
            gap: 3px !important;
        }
        .hamburger-line { 
            width: 13px !important; 
            height: 2px !important; 
        }
        .hamburger-btn.active .hamburger-line:nth-child(1) { 
            transform: translateY(5px) rotate(45deg) !important; 
        }
        .hamburger-btn.active .hamburger-line:nth-child(3) { 
            transform: translateY(-5px) rotate(-45deg) !important; 
        }
        .header-right .btn-header { 
            padding: 2px 6px !important; 
            font-size: 0.5rem !important; 
            height: 20px !important;
            border-radius: 3px !important;
        }
        #global-header .container {
            padding: 0 6px !important;
        }
    }

   
    /* ============================================================
       11. HERO SECTIONS - FULLY RESPONSIVE
       ============================================================ */
    .hero-content-version2 {
        text-align: center !important;
        padding: clamp(20px, 4vw, 50px) 0 !important;
    }

    .hero-content-version2 h1 {
        font-size: clamp(1.8rem, 5vw, 4.5rem) !important;
        line-height: 1.1 !important;
        margin-bottom: clamp(12px, 2vw, 24px) !important;
    }

    .hero-content-version2 .subtitle {
        font-size: clamp(0.6rem, 1vw, 0.85rem) !important;
        letter-spacing: clamp(2px, 0.4vw, 4px) !important;
        text-transform: uppercase !important;
    }

    .hero-content-version2 .pra {
        font-size: clamp(0.85rem, 1.3vw, 1.2rem) !important;
        max-width: 90% !important;
        margin: 0 auto !important;
    }

    /* Hero Video Grid */
    .hero-video-grid {
        display: grid !important;
        gap: clamp(8px, 1.5vw, 16px) !important;
    }

    @media (min-width: 993px) {
        .hero-video-grid { grid-template-columns: repeat(3, 1fr) !important; }
        .hero-video-grid .vid-card { height: 340px !important; }
    }

    @media (max-width: 992px) and (min-width: 577px) {
        .hero-video-grid { grid-template-columns: repeat(2, 1fr) !important; }
        .hero-video-grid .vid-card { height: 260px !important; }
        .hero-video-grid .vid-card:nth-child(3) { display: none !important; }
    }

    @media (max-width: 576px) {
        .hero-video-grid { grid-template-columns: 1fr !important; }
        .hero-video-grid .vid-card { height: 200px !important; }
        .hero-video-grid .vid-card:nth-child(3) { display: block !important; }
    }

    @media (max-width: 400px) {
        .hero-video-grid .vid-card { height: 170px !important; }
    }

    /* All Hero Sections */
    .banner-section, .about-hero, .service-hero, .web-hero, .app-hero,
    .dm-hero, .ecom-hero, .project-hero, .contact-hero, .terms-hero, .privacy-hero {
        padding: clamp(30px, 6vw, 80px) 0 !important;
        min-height: auto !important;
        border-radius: 0 0 clamp(30px, 6vw, 80px) clamp(30px, 6vw, 80px) !important;
    }

    @media (max-width: 576px) {
        .banner-section, .about-hero, .service-hero, .web-hero, .app-hero,
        .dm-hero, .ecom-hero, .project-hero, .contact-hero, .terms-hero, .privacy-hero {
            padding: 40px 0 30px !important;
            border-radius: 0 0 40px 40px !important;
        }
    }

    /* ============================================================
       12. NUMBERS / STATS - RESPONSIVE
       ============================================================ */
    .numbers-grid {
        display: grid !important;
        gap: clamp(12px, 2vw, 24px) !important;
    }

    @media (min-width: 993px) { .numbers-grid { grid-template-columns: repeat(5, 1fr) !important; } }
    @media (max-width: 992px) and (min-width: 577px) { .numbers-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; } }
    @media (max-width: 576px) { .numbers-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; } }
    @media (max-width: 400px) { .numbers-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; } }

    .number-item h2 { font-size: clamp(1.6rem, 3vw, 2.8rem) !important; line-height: 1.2 !important; }
    .number-item p { font-size: clamp(0.75rem, 0.9vw, 1rem) !important; }

    .numbers-section-premium {
        padding: clamp(20px, 4vw, 50px) clamp(12px, 3vw, 30px) !important;
        border-radius: clamp(20px, 4vw, 40px) !important;
    }

    .stat-number-ultra {
        font-size: clamp(1.8rem, 4vw, 3.5rem) !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
    }

    .hero-stat-premium {
        padding: clamp(6px, 0.8vw, 12px) clamp(10px, 1.5vw, 18px) !important;
        border-radius: 50px !important;
    }

    /* ============================================================
       13. WHY CHOOSE - RESPONSIVE
       ============================================================ */
    .why-grid-modern {
        display: grid !important;
        gap: clamp(16px, 2vw, 24px) !important;
    }

    @media (min-width: 993px) { .why-grid-modern { grid-template-columns: repeat(3, 1fr) !important; } }
    @media (max-width: 992px) and (min-width: 577px) { .why-grid-modern { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; } }
    @media (max-width: 576px) { .why-grid-modern { grid-template-columns: 1fr !important; gap: 14px !important; } }

    .why-choose-wrapper {
        padding: clamp(30px, 5vw, 60px) clamp(16px, 3vw, 40px) !important;
        border-radius: clamp(24px, 4vw, 50px) !important;
    }

    .why-item-modern {
        padding: clamp(16px, 2vw, 24px) !important;
        border-radius: clamp(16px, 2vw, 24px) !important;
    }

   /* ============================================================
   responsive-fixes.css — with industry card fixes
   ============================================================ */

/* ... (keep all other sections as they are) ... */

/* ============================================================
   14. INDUSTRY CARDS - RESPONSIVE (FIXED)
   ============================================================ */
/* Preserve original pill shape and image fill */
.industry-card-fit {
    width: clamp(90px, 14vw, 180px) !important;
    aspect-ratio: 2 / 3 !important;
    border-radius: 9999px !important;   /* keeps the oval */
    padding: 0 !important;              /* remove extra padding */
    flex-shrink: 0 !important;
    overflow: hidden !important;
    position: relative !important;
}

.industry-card-fit img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

.industry-card-fit span {
    font-size: clamp(9px, 1vw, 13px) !important;
    white-space: nowrap !important;     /* keep text on one line */
    line-height: 1.3 !important;
    position: absolute !important;
    bottom: 18px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    color: #fff !important;
    font-weight: 700 !important;
    text-align: center !important;
    z-index: 2 !important;
    width: 100% !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6) !important;
}

/* Ensure wrapper and track don't break */
.industry-scroll-wrapper {
    overflow: hidden !important;
    position: relative !important;
    width: 100% !important;
}

.industry-row-fit {
    display: flex !important;
    gap: 20px !important;
    width: max-content !important;
    animation: scrollIndustries 60s linear infinite !important;
}

.fronter-section:hover .industry-row-fit {
    animation-play-state: paused !important;
}

@keyframes scrollIndustries {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* Remove top spacing on the industry section */
.fronter-section.insane-fit {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

    /* ============================================================
       15. SERVICE CARDS - RESPONSIVE
       ============================================================ */
    .capabilities-grid {
        display: grid !important;
        gap: clamp(16px, 2vw, 24px) !important;
    }
    @media (min-width: 993px) { .capabilities-grid { grid-template-columns: repeat(4, 1fr) !important; } }
    @media (max-width: 992px) and (min-width: 577px) { .capabilities-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; } }
    @media (max-width: 576px) { .capabilities-grid { grid-template-columns: 1fr !important; gap: 14px !important; } }

    .tech-grid-3 {
        display: grid !important;
        gap: clamp(16px, 2vw, 24px) !important;
    }
    @media (min-width: 993px) { .tech-grid-3 { grid-template-columns: repeat(3, 1fr) !important; } }
    @media (max-width: 992px) and (min-width: 577px) { .tech-grid-3 { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; } }
    @media (max-width: 576px) { .tech-grid-3 { grid-template-columns: 1fr !important; gap: 14px !important; } }

    .service-card-elite .card-image-wrap,
    .service-card-ultimate .card-image-wrap {
        height: clamp(150px, 22vw, 220px) !important;
    }

    .service-image-card {
        height: clamp(220px, 35vw, 450px) !important;
        min-height: 180px !important;
    }

    .service-card-content {
        padding: clamp(12px, 1.8vw, 24px) !important;
    }
    .service-card-content h3 {
        font-size: clamp(15px, 1.6vw, 22px) !important;
        line-height: 1.3 !important;
    }
    .service-card-content p {
        font-size: clamp(0.8rem, 1vw, 1rem) !important;
    }

    /* ============================================================
       16. PROJECTS - RESPONSIVE
       ============================================================ */
    .projects-grid {
        display: grid !important;
        gap: clamp(16px, 2vw, 24px) !important;
    }
    @media (min-width: 993px) { .projects-grid { grid-template-columns: repeat(3, 1fr) !important; } }
    @media (max-width: 992px) and (min-width: 577px) { .projects-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; } }
    @media (max-width: 576px) { .projects-grid { grid-template-columns: 1fr !important; gap: 14px !important; } }

    .project-img { height: clamp(150px, 22vw, 260px) !important; }
    .project-content h3 { font-size: clamp(1rem, 1.4vw, 1.4rem) !important; }
    .project-content p { font-size: clamp(0.8rem, 0.9vw, 1rem) !important; }

    /* Filter buttons */
    .filter-buttons {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: clamp(6px, 1vw, 12px) !important;
        justify-content: center !important;
        margin: clamp(20px, 3vw, 40px) 0 !important;
    }

    .filter-btn {
        padding: clamp(6px, 0.8vw, 12px) clamp(12px, 1.8vw, 24px) !important;
        font-size: clamp(0.7rem, 0.8vw, 0.9rem) !important;
        border-radius: 50px !important;
    }

    @media (max-width: 576px) {
        .filter-btn { padding: 4px 12px !important; font-size: 0.7rem !important; }
    }

    /* ============================================================
       17. CLIENTELE - RESPONSIVE
       ============================================================ */
    .clientele-grid-premium, .clientele-grid {
        display: grid !important;
        gap: clamp(16px, 2vw, 24px) !important;
    }
    @media (min-width: 993px) {
        .clientele-grid-premium { grid-template-columns: repeat(4, 1fr) !important; }
        .clientele-grid { grid-template-columns: repeat(4, 1fr) !important; }
    }
    @media (max-width: 992px) and (min-width: 577px) {
        .clientele-grid-premium { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }
        .clientele-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }
    }
    @media (max-width: 576px) {
        .clientele-grid-premium { grid-template-columns: 1fr !important; gap: 14px !important; }
        .clientele-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
    }

    .trusted-grid {
        display: grid !important;
        gap: clamp(12px, 1.5vw, 20px) !important;
    }
    @media (min-width: 993px) { .trusted-grid { grid-template-columns: repeat(4, 1fr) !important; } }
    @media (max-width: 992px) and (min-width: 577px) { .trusted-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 16px !important; } }
    @media (max-width: 576px) { .trusted-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; } }

    /* ============================================================
       18. AWARDS - RESPONSIVE
       ============================================================ */
    .awards-grid {
        display: grid !important;
        gap: clamp(12px, 1.5vw, 20px) !important;
    }
    @media (min-width: 993px) { .awards-grid { grid-template-columns: repeat(6, 1fr) !important; } }
    @media (max-width: 992px) and (min-width: 577px) { .awards-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 14px !important; } }
    @media (max-width: 576px) { .awards-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; } }
    @media (max-width: 400px) { .awards-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; } }

    .award-item {
        padding: clamp(12px, 1.5vw, 20px) !important;
        border-radius: clamp(12px, 1.5vw, 20px) !important;
    }

    /* ============================================================
       19. CONTACT - RESPONSIVE
       ============================================================ */
   
.contact-row{
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:20px !important;
    margin-bottom:70px !important;   /* Add this */
}

/* Desktop */
@media (min-width: 993px) {
    .contact-row {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

/* Tablet */
@media (max-width: 992px) and (min-width: 577px) {
    .contact-row {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }
}

/* Mobile */
@media (max-width: 576px) {
    .contact-row {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
}
.contact-row{
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:20px !important;
}

.contact-row .contact-info-card{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    margin:0 !important;
}
/* Space before Footer */
.container.mt-5.pt-4{
    margin-bottom:80px !important;
}

    /* ============================================================
       20. PROCESS TIMELINE - RESPONSIVE
       ============================================================ */
    .process-timeline-wrapper {
        padding: clamp(25px, 5vw, 60px) clamp(14px, 3vw, 40px) !important;
        border-radius: clamp(20px, 4vw, 50px) !important;
    }
    .process-timeline-item .step-content {
        padding: clamp(14px, 2vw, 28px) !important;
        border-radius: clamp(12px, 1.5vw, 20px) !important;
    }
    .process-timeline-item .step-content h4 {
        font-size: clamp(0.95rem, 1.3vw, 1.3rem) !important;
    }
    .process-timeline-item .step-content p {
        font-size: clamp(0.8rem, 0.9vw, 1rem) !important;
    }

    @media (max-width: 768px) {
        .process-timeline::before { left: 16px !important; }
        .process-timeline-item {
            width: 100% !important;
            padding-left: 44px !important;
            padding-right: 0 !important;
            margin-left: 0 !important;
        }
        .process-timeline-item .step-dot {
            left: 6px !important;
            right: auto !important;
            width: 18px !important;
            height: 18px !important;
            top: 6px !important;
        }
        .process-timeline-item .step-content { max-width: 100% !important; }
    }

    /* ============================================================
       21. FAQ - RESPONSIVE
       ============================================================ */
    .faq-premium-wrapper {
        padding: clamp(16px, 2vw, 30px) !important;
        border-radius: clamp(16px, 3vw, 40px) !important;
    }
    .faq-header-ultra {
        padding: clamp(12px, 1.5vw, 20px) clamp(12px, 2vw, 24px) !important;
        border-radius: clamp(10px, 1.5vw, 16px) !important;
    }
    .faq-q-ultra h4 {
        font-size: clamp(0.85rem, 1.1vw, 1.1rem) !important;
        line-height: 1.4 !important;
    }
    .faq-answer-content p {
        font-size: clamp(0.8rem, 0.9vw, 0.95rem) !important;
        line-height: 1.6 !important;
    }
    .faq-toggle-ultra {
        width: clamp(30px, 3.5vw, 40px) !important;
        height: clamp(30px, 3.5vw, 40px) !important;
        flex-shrink: 0 !important;
    }

    /* ============================================================
       22. CTA - RESPONSIVE
       ============================================================ */
    .cta-ultra, .premium-cta, .cta-rainbow-border, .cta-premium {
        padding: clamp(30px, 5vw, 60px) clamp(16px, 4vw, 50px) !important;
        border-radius: clamp(20px, 4vw, 50px) !important;
        margin: clamp(20px, 3vw, 40px) 0 !important;
    }
    .cta-ultra h2, .premium-cta h2, .cta-rainbow-border h2, .cta-premium h2 {
        font-size: clamp(1.6rem, 3.5vw, 3rem) !important;
    }
    .cta-ultra p, .premium-cta p, .cta-rainbow-border p, .cta-premium p {
        font-size: clamp(0.9rem, 1.2vw, 1.1rem) !important;
    }

    /* ============================================================
       23. TRUST BAR / MARQUEE - RESPONSIVE
       ============================================================ */
    .tg-trust-track {
        gap: clamp(10px, 1.5vw, 24px) !important;
        animation-duration: clamp(15s, 25vw, 30s) !important;
    }
    .tg-trust-item { padding: 4px clamp(6px, 1.2vw, 16px) !important; }
    .tg-trust-text { font-size: clamp(9px, 1vw, 13px) !important; font-weight: 500 !important; }

    .marquee-content-ultra span {
        margin: 0 clamp(12px, 2vw, 30px) !important;
        font-size: clamp(0.7rem, 1vw, 1rem) !important;
    }
    .marquee-strip-ultra { padding: clamp(10px, 1.2vw, 18px) 0 !important; }

    /* ============================================================
       24. INTEGRATIONS - RESPONSIVE
       ============================================================ */
    .integrations-grid {
        display: grid !important;
        gap: clamp(12px, 1.5vw, 20px) !important;
    }
    @media (min-width: 993px) { .integrations-grid { grid-template-columns: repeat(5, 1fr) !important; } }
    @media (max-width: 992px) and (min-width: 577px) { .integrations-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; } }
    @media (max-width: 576px) { .integrations-grid { grid-template-columns: 1fr !important; gap: 12px !important; } }

    .tools-grid {
        display: grid !important;
        gap: clamp(10px, 1.2vw, 16px) !important;
    }
    @media (min-width: 993px) { .tools-grid { grid-template-columns: repeat(6, 1fr) !important; } }
    @media (max-width: 992px) and (min-width: 577px) { .tools-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 12px !important; } }
    @media (max-width: 576px) { .tools-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 10px !important; } }
    @media (max-width: 400px) { .tools-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; } }

    .tech-framework-grid {
        display: grid !important;
        gap: clamp(12px, 1.5vw, 20px) !important;
    }
    @media (min-width: 993px) { .tech-framework-grid { grid-template-columns: repeat(4, 1fr) !important; } }
    @media (max-width: 992px) and (min-width: 577px) { .tech-framework-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; } }
    @media (max-width: 576px) { .tech-framework-grid { grid-template-columns: 1fr !important; gap: 12px !important; } }

    /* ============================================================
       25. ECOMMERCE TYPES - RESPONSIVE
       ============================================================ */
    .ecomm-types-grid {
        display: grid !important;
        gap: clamp(12px, 1.5vw, 20px) !important;
    }
    @media (min-width: 993px) { .ecomm-types-grid { grid-template-columns: repeat(5, 1fr) !important; } }
    @media (max-width: 992px) and (min-width: 577px) { .ecomm-types-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 14px !important; } }
    @media (max-width: 576px) { .ecomm-types-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; } }
    @media (max-width: 400px) { .ecomm-types-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; } }

    .ecomm-type-card .card-overlay .type-name {
        font-size: clamp(0.7rem, 1.2vw, 0.95rem) !important;
    }
    .ecomm-type-card .card-overlay .type-acronym {
        font-size: clamp(0.55rem, 0.8vw, 0.7rem) !important;
    }
    .ecomm-type-card .card-overlay .type-icon {
        width: clamp(22px, 3vw, 32px) !important;
        height: clamp(22px, 3vw, 32px) !important;
        font-size: clamp(0.7rem, 1vw, 1rem) !important;
    }

    /* ============================================================
       26. STICKY NAV - RESPONSIVE
       ============================================================ */
    .sticky-nav-master {
        top: clamp(60px, 8vw, 80px) !important;
        padding: clamp(4px, 0.6vw, 8px) clamp(8px, 1.5vw, 20px) !important;
        border-radius: clamp(30px, 5vw, 60px) !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .sticky-nav-master .nav-links-master {
        gap: clamp(2px, 0.5vw, 8px) !important;
    }
    .sticky-nav-master .nav-links-master a {
        padding: clamp(4px, 0.6vw, 10px) clamp(6px, 1vw, 18px) !important;
        font-size: clamp(0.5rem, 0.7vw, 0.85rem) !important;
        white-space: nowrap !important;
    }

    /* ============================================================
       27. PRIVACY / TERMS - RESPONSIVE
       ============================================================ */
    .privacy-layout, .terms-layout {
        display: grid !important;
        gap: clamp(20px, 3vw, 40px) !important;
    }
    @media (min-width: 993px) {
        .privacy-layout, .terms-layout { grid-template-columns: 280px 1fr !important; }
    }
    @media (max-width: 992px) {
        .privacy-layout, .terms-layout { grid-template-columns: 1fr !important; gap: 20px !important; }
    }

    .privacy-toc-wrapper, .terms-toc-wrapper {
        padding: clamp(16px, 2vw, 30px) !important;
        border-radius: clamp(16px, 2vw, 24px) !important;
    }
    .privacy-toc-wrapper ul, .terms-toc-wrapper ul {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    .privacy-toc-wrapper ul li a, .terms-toc-wrapper ul li a {
        padding: 4px 12px !important;
        border-radius: 30px !important;
        font-size: 0.75rem !important;
    }

    .privacy-section, .terms-section {
        padding: clamp(16px, 3vw, 40px) clamp(14px, 3vw, 36px) !important;
        border-radius: clamp(16px, 3vw, 40px) !important;
    }
    .privacy-section h2, .terms-section h2 {
        font-size: clamp(1.2rem, 2vw, 1.8rem) !important;
    }
    .privacy-section .section-number, .terms-section .section-number {
        font-size: clamp(1.6rem, 3vw, 3rem) !important;
    }

    /* ============================================================
       28. TEAM - RESPONSIVE
       ============================================================ */
    .team-items-ultra .cont {
        padding: clamp(12px, 1.5vw, 20px) clamp(10px, 1.5vw, 18px) !important;
    }
    .team-items-ultra .cont h3 {
        font-size: clamp(0.85rem, 1.1vw, 1.2rem) !important;
    }
    .team-items-ultra .cont p {
        font-size: clamp(0.75rem, 0.8vw, 0.9rem) !important;
    }

    /* ============================================================
       29. TESTIMONIALS - RESPONSIVE
       ============================================================ */
    .testimonial-card-premium {
        padding: clamp(18px, 2vw, 32px) !important;
        border-radius: clamp(16px, 2vw, 24px) !important;
    }
    .testimonial-items1 {
        padding: clamp(16px, 2vw, 28px) !important;
        border-radius: clamp(16px, 2vw, 24px) !important;
    }
    .testimonial-items1 .thumb img {
        width: clamp(44px, 5vw, 72px) !important;
        height: clamp(44px, 5vw, 72px) !important;
    }
    .testimonial-items1 .cont h4 {
        font-size: clamp(0.9rem, 1.2vw, 1.2rem) !important;
    }
    .testimonial-items1 .cont p {
        font-size: clamp(0.8rem, 0.9vw, 1rem) !important;
    }

    /* ============================================================
       30. FOUNDER CARD - RESPONSIVE
       ============================================================ */
    .founder-card {
        padding: clamp(16px, 2vw, 30px) !important;
        border-radius: clamp(16px, 3vw, 36px) !important;
    }
    .founder-avatar {
        width: clamp(60px, 8vw, 100px) !important;
        height: clamp(60px, 8vw, 100px) !important;
    }
    .founder-card h3 { font-size: clamp(1rem, 1.4vw, 1.5rem) !important; }
    .founder-card p { font-size: clamp(0.8rem, 0.9vw, 1rem) !important; }

    /* ============================================================
       31. PARTNER SCROLL - RESPONSIVE
       ============================================================ */
    .partner-item {
        padding: clamp(10px, 1.2vw, 16px) clamp(12px, 1.5vw, 20px) !important;
        min-width: clamp(90px, 10vw, 150px) !important;
        border-radius: clamp(10px, 1.2vw, 16px) !important;
    }
    .partner-item i { font-size: clamp(1.4rem, 2.2vw, 2.8rem) !important; }
    .partner-item span { font-size: clamp(0.6rem, 0.7vw, 0.85rem) !important; }

    /* ============================================================
       32. FORMS - RESPONSIVE
       ============================================================ */
    .form-control, input, textarea, select {
        padding: clamp(10px, 1vw, 14px) clamp(12px, 1.5vw, 20px) !important;
        font-size: clamp(0.8rem, 0.9vw, 1rem) !important;
        border-radius: clamp(10px, 1.2vw, 16px) !important;
        width: 100% !important;
    }
    label { font-size: clamp(0.8rem, 0.9vw, 0.95rem) !important; }

    /* ============================================================
       33. CARDS - GENERAL RESPONSIVE
       ============================================================ */
    .glass-card-ultra {
        padding: clamp(18px, 2.5vw, 32px) !important;
        border-radius: clamp(16px, 2vw, 24px) !important;
    }
    .card { border-radius: clamp(12px, 1.5vw, 20px) !important; overflow: hidden !important; }
    .card-body { padding: clamp(14px, 2vw, 24px) !important; }

    /* ============================================================
       34. TABLES - RESPONSIVE
       ============================================================ */
    @media (max-width: 768px) {
        .table-responsive {
            display: block !important;
            width: 100% !important;
            overflow-x: auto !important;
            -webkit-overflow-scrolling: touch !important;
        }
        .table { font-size: 0.8rem !important; }
        .table td, .table th { padding: 8px !important; white-space: nowrap !important; }
    }

    /* ============================================================
       35. MODALS - RESPONSIVE
       ============================================================ */
    .modal-content {
        border-radius: clamp(16px, 2vw, 24px) !important;
        padding: clamp(16px, 2vw, 32px) !important;
    }
    .modal-header h5 { font-size: clamp(1.1rem, 1.6vw, 1.4rem) !important; }
    @media (max-width: 576px) {
        .modal-content { padding: 14px !important; margin: 10px !important; }
    }

    /* ============================================================
       36. IMAGES - RESPONSIVE
       ============================================================ */
    img, svg { max-width: 100% !important; height: auto !important; display: block !important; }
    .responsive-img { width: 100% !important; height: auto !important; object-fit: cover !important; }

    /* ============================================================
       37. SPACING UTILITIES - RESPONSIVE
       ============================================================ */
    .m-0 { margin: 0 !important; }
    .m-1 { margin: 5px !important; }
    .m-2 { margin: 10px !important; }
    .m-3 { margin: 15px !important; }
    .m-4 { margin: 20px !important; }
    .m-5 { margin: 30px !important; }
    .p-0 { padding: 0 !important; }
    .p-1 { padding: 5px !important; }
    .p-2 { padding: 10px !important; }
    .p-3 { padding: 15px !important; }
    .p-4 { padding: 20px !important; }
    .p-5 { padding: 30px !important; }

    @media (max-width: 768px) {
        .m-4 { margin: 15px !important; }
        .m-5 { margin: 20px !important; }
        .p-4 { padding: 15px !important; }
        .p-5 { padding: 20px !important; }
    }

    /* ============================================================
       38. FLEX UTILITIES - RESPONSIVE
       ============================================================ */
    .d-flex { display: flex !important; }
    .d-grid { display: grid !important; }
    .d-block { display: block !important; }
    .d-none { display: none !important; }
    .flex-column { flex-direction: column !important; }
    .flex-row { flex-direction: row !important; }
    .flex-wrap { flex-wrap: wrap !important; }
    .flex-nowrap { flex-wrap: nowrap !important; }
    .justify-center { justify-content: center !important; }
    .justify-between { justify-content: space-between !important; }
    .justify-start { justify-content: flex-start !important; }
    .justify-end { justify-content: flex-end !important; }
    .align-center { align-items: center !important; }
    .align-start { align-items: flex-start !important; }
    .align-end { align-items: flex-end !important; }
    .gap-1 { gap: 5px !important; }
    .gap-2 { gap: 10px !important; }
    .gap-3 { gap: 15px !important; }
    .gap-4 { gap: 20px !important; }
    .gap-5 { gap: 30px !important; }

    @media (max-width: 768px) {
        .flex-column-mobile { flex-direction: column !important; }
        .flex-wrap-mobile { flex-wrap: wrap !important; }
        .d-none-mobile { display: none !important; }
        .d-block-mobile { display: block !important; }
    }
    @media (max-width: 576px) {
        .flex-column-phone { flex-direction: column !important; }
        .d-none-phone { display: none !important; }
        .d-block-phone { display: block !important; }
    }

    /* ============================================================
       39. TEXT ALIGNMENT - RESPONSIVE
       ============================================================ */
    .text-center { text-align: center !important; }
    .text-left { text-align: left !important; }
    .text-right { text-align: right !important; }
    @media (max-width: 768px) {
        .text-center-mobile { text-align: center !important; }
        .text-left-mobile { text-align: left !important; }
    }

    /* ============================================================
       40. DARK MODE - COMPLETE
       ============================================================ */
    @media (prefers-color-scheme: dark) {
        body { background: #0A0F1C !important; color: var(--text-light) !important; }
        
        .white-bg, .service-card, .service-card-elite, .service-card-ultimate,
        .capability-card, .why-card-ultra, .philosophy-card-ultra,
        .testimonial-card-premium, .award-item, .trusted-card, .clientele-card,
        .project-card, .worke-items, .process-step, .glass-card-ultra,
        .contact-info-card, .contact-form-wrapper, .hours-card, .offcanvas__info {
            background: #1A1F3A !important;
            color: var(--text-light) !important;
        }
        
        .white-clr, .black-clr, .text-dark { color: var(--text-light) !important; }
        .text-secondary, .pra, .text-muted { color: #94A3B8 !important; }
        
        .form-control, input, textarea, select {
            background: #0A0F1C !important;
            color: var(--text-light) !important;
            border-color: #2D3748 !important;
        }
        
        #global-header {
            background: #0A0F1C !important;
            border-bottom: 2px solid rgba(255, 255, 255, 0.04) !important;
        }
        
        .main-menu nav > ul > li > a { color: var(--text-light) !important; }
        .main-menu nav > ul > li > a:hover { background: rgba(108, 60, 225, 0.15) !important; color: #8B6BE8 !important; }
        .main-menu nav > ul > li.active > a { color: #8B6BE8 !important; background: rgba(108, 60, 225, 0.12) !important; }
        .main-menu nav > ul > li .submenu { background: #1A1F3A !important; border-color: rgba(255, 255, 255, 0.06) !important; }
        .main-menu nav > ul > li .submenu li a { color: var(--text-light) !important; }
        
        .offcanvas__info { background: #0A0F1C !important; }
        .offcanvas__info .mobile-menu nav > ul > li { border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important; }
        .offcanvas__info .mobile-menu nav > ul > li > a { color: var(--text-light) !important; }
        .offcanvas__info .mobile-menu nav > ul > li .submenu { background: rgba(255, 255, 255, 0.03) !important; }
        .offcanvas__info .mobile-menu nav > ul > li .submenu li a { color: #94A3B8 !important; }
        
        .offcanvas__contact h4 { color: var(--text-light) !important; }
        .offcanvas__contact ul li { color: #94A3B8 !important; }
        .offcanvas__contact ul li a { color: #94A3B8 !important; }
        .offcanvas__close button { color: var(--text-light) !important; background: rgba(255, 255, 255, 0.06) !important; }
        .social-icon a { background: rgba(255, 255, 255, 0.06) !important; color: var(--text-light) !important; }
        .offcanvas__top { border-bottom-color: rgba(255, 255, 255, 0.06) !important; }
        
        .hamburger-btn { background: linear-gradient(135deg, var(--primary), var(--primary-light)) !important; }
        .hamburger-line { background: #ffffff !important; }
    }

    /* ============================================================
       41. ACCESSIBILITY - REDUCED MOTION
       ============================================================ */
    @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
        .tg-trust-track { animation: none !important; }
        .offcanvas__info, .offcanvas__overlay { transition: none !important; }
    }

    /* ============================================================
       42. PRINT STYLES
       ============================================================ */
    @media print {
        #global-header, .offcanvas__info, .offcanvas__overlay,
        .header__hamburger, .btn, .filter-buttons { display: none !important; }
        body { background: #fff !important; color: #000 !important; }
        .container { max-width: 100% !important; padding: 0 !important; }
    }

    /* ============================================================
       43. BACKDROP-FILTER FALLBACK
       ============================================================ */
    @supports not (backdrop-filter: blur(1px)) {
        .glass-card-ultra, .glass-card-dark-ultra, .hero-lead-form,
        .hero-stat-premium, .contact-info-card, .contact-form-wrapper,
        .hero-3d-card, .tg-trust-bar, .testimonial-items1, #global-header {
            background: rgba(255, 255, 255, 0.98) !important;
        }
    }

    /* ============================================================
       44. SAFARI FLEX GAP FIX
       ============================================================ */
    @supports not (gap: 1px) {
        .header-main, .hero-content-version2 .d-flex, .filter-buttons,
        .projects-grid, .why-grid-modern, .numbers-grid,
        .grid-2, .grid-3, .grid-4, .grid-5 {
            display: -webkit-flex !important;
            display: flex !important;
            flex-wrap: wrap !important;
            margin: -10px !important;
        }
        .header-main > *, .hero-content-version2 .d-flex > *,
        .filter-buttons > *, .projects-grid > *, .why-grid-modern > *,
        .numbers-grid > *, .grid-2 > *, .grid-3 > *, .grid-4 > *, .grid-5 > * {
            margin: 10px !important;
        }
    }

    /* ============================================================
       45. VERY SMALL SCREENS (320px and below)
       ============================================================ */
    @media (max-width: 360px) {
        .container { padding: 0 6px !important; }
        h1, .h1 { font-size: 1.6rem !important; }
        h2, .h2 { font-size: 1.4rem !important; }
        h3, .h3 { font-size: 1.1rem !important; }
        .section-title-premium { font-size: 1.4rem !important; }
        .btn-ultra, .btn-premium, .btn-cta-premium {
            padding: 8px 14px !important;
            font-size: 0.75rem !important;
        }
        .hero-video-grid .vid-card { height: 150px !important; }
        .numbers-grid { gap: 8px !important; }
        .number-item h2 { font-size: 1.2rem !important; }
        .filter-btn { padding: 4px 8px !important; font-size: 0.6rem !important; }
        .industry-card-fit { width: 80px !important; }
        .industry-card-fit span { font-size: 8px !important; }
        .offcanvas__info { width: 240px !important; padding: 16px 12px !important; }
    }

    /* ============================================================
       46. LARGE SCREENS (4K and above)
       ============================================================ */
    @media (min-width: 1920px) {
        .container { max-width: 1440px !important; }
        h1, .h1 { font-size: 4.5rem !important; }
        h2, .h2 { font-size: 3.5rem !important; }
        .hero-video-grid .vid-card { height: 400px !important; }
    }
	html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
}

#global-header,
.container,
.header-main {
    max-width: 100%;
}

img,
video,
iframe,
svg,
canvas {
    max-width: 100%;
    height: auto;
}

* {
    box-sizing: border-box;
}
@media (max-width:1199px){

    .header__hamburger{
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        visibility:visible !important;
        opacity:1 !important;
        position:relative !important;
        z-index:999999 !important;
    }

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

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

}
/* ============================================================
   FRONTER (PROJECTS) - FIX CONTENT BOX TO FIT TEXT
   ============================================================ */
.fronter-wrapper .fornter-items .content {
    left: 20px !important;          /* keep left alignment */
    right: auto !important;         /* remove full-width stretch */
    width: fit-content !important;  /* shrink to fit text */
    max-width: calc(100% - 40px) !important; /* prevent overflow */
    padding: 12px 20px !important;  /* tighter padding */
    display: inline-block !important;
    box-sizing: border-box !important;
    white-space: nowrap !important; /* keep title on one line */
}

/* Ensure the title stays on one line */
.fronter-wrapper .fornter-items .content h3 {
    white-space: nowrap !important;
    margin-bottom: 2px !important;
}

/* Keep the subtitle on one line too */
.fronter-wrapper .fornter-items .content span {
    white-space: nowrap !important;
    display: block !important;
    font-size: clamp(0.7rem, 0.8vw, 0.85rem) !important;
}

/* Adjust hover effect so it doesn't break the fit */
.fronter-wrapper .fornter-items:hover .content {
    transform: translateY(-5px) !important;
}

/* ============================================================
   STICKY NAV – RESPONSIVE FIXES
   ============================================================ */
@media (max-width: 1200px) {
    .sticky-nav-master.nav-fixed {
        padding: 6px 16px !important;
        transform: translateX(-50%) scale(1.01) !important;
        border-radius: 0 0 30px 30px !important;
        width: 96% !important;
    }
    .sticky-nav-master.nav-full {
        padding: 8px 18px !important;
        transform: translateX(-50%) scale(1.02) !important;
    }
    .sticky-nav-master.nav-fixed .nav-links-master a {
        padding: 6px 14px !important;
        font-size: 0.7rem !important;
    }
    .sticky-nav-master.nav-full .nav-links-master a {
        padding: 8px 16px !important;
        font-size: 0.72rem !important;
    }
}

@media (max-width: 992px) {
    .sticky-nav-master {
        padding: 4px 12px;
        border-radius: 60px;
        margin: 0 auto 20px;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
    .sticky-nav-master .nav-links-master {
        gap: 2px;
        justify-content: flex-start;
        flex-wrap: nowrap;
        width: max-content;
    }
    .sticky-nav-master .nav-links-master a {
        padding: 6px 12px;
        font-size: 0.6rem;
        letter-spacing: 0.2px;
    }
    .sticky-nav-master .nav-links-master a .nav-icon {
        margin-right: 4px;
        font-size: 0.7rem;
    }

    /* Tablet fixed states */
    .sticky-nav-master.nav-fixed {
        top: 56px !important;
        padding: 4px 12px !important;
        transform: translateX(-50%) scale(1.01) !important;
        border-radius: 0 0 25px 25px !important;
        width: 98% !important;
        overflow-x: auto !important;
    }
    .sticky-nav-master.nav-full {
        top: 56px !important;
        padding: 6px 14px !important;
        transform: translateX(-50%) scale(1.02) !important;
    }
    .sticky-nav-master.nav-fixed .nav-links-master a {
        padding: 5px 10px !important;
        font-size: 0.55rem !important;
    }
    .sticky-nav-master.nav-full .nav-links-master a {
        padding: 6px 12px !important;
        font-size: 0.58rem !important;
    }
    .sticky-nav-placeholder.active {
        height: 56px !important;
    }
}

@media (max-width: 576px) {
    .sticky-nav-master {
        padding: 3px 8px;
        border-radius: 40px;
        margin: 0 auto 16px;
        overflow-x: auto !important;
    }
    .sticky-nav-master .nav-links-master {
        gap: 0px;
        width: max-content;
    }
    .sticky-nav-master .nav-links-master a {
        padding: 4px 8px;
        font-size: 0.5rem;
        letter-spacing: 0.1px;
    }
    .sticky-nav-master .nav-links-master a .nav-icon {
        margin-right: 3px;
        font-size: 0.6rem;
    }

    /* Mobile fixed states */
    .sticky-nav-master.nav-fixed {
        top: 48px !important;
        padding: 3px 8px !important;
        transform: translateX(-50%) scale(1.01) !important;
        border-radius: 0 0 20px 20px !important;
        width: 100% !important;
        overflow-x: auto !important;
    }
    .sticky-nav-master.nav-full {
        top: 48px !important;
        padding: 4px 10px !important;
        transform: translateX(-50%) scale(1.01) !important;
    }
    .sticky-nav-master.nav-fixed .nav-links-master a {
        padding: 3px 6px !important;
        font-size: 0.45rem !important;
    }
    .sticky-nav-master.nav-full .nav-links-master a {
        padding: 4px 8px !important;
        font-size: 0.48rem !important;
    }
    .sticky-nav-placeholder.active {
        height: 44px !important;
    }
}
/* ============================================================
   OFF-CANVAS OVERLAY & PANEL (no background – handled by JS)
   ============================================================ */
.offcanvas__overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    z-index: 9998 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.4s ease, visibility 0.4s ease !important;
    pointer-events: none !important;
}

.offcanvas__overlay.overlay-open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: all !important;
}

.offcanvas__info {
    position: fixed !important;
    top: 0 !important;
    right: -100% !important;
    width: 340px !important;
    max-width: 85vw !important;
    height: 100% !important;
    z-index: 9999 !important;
    transition: right 0.45s cubic-bezier(0.22, 1, 0.36, 1) !important;
    overflow-y: auto !important;
    padding: 30px 24px 30px !important;
    box-shadow: -15px 0 60px rgba(0, 0, 0, 0.2) !important;
    display: flex !important;
    flex-direction: column !important;
    border-left: 3px solid rgba(108, 60, 225, 0.15) !important;
    pointer-events: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
}

.offcanvas__info.info-open {
    right: 0 !important;
    pointer-events: all !important;
    box-shadow: -20px 0 80px rgba(0, 0, 0, 0.25) !important;
    border-left-color: rgba(108, 60, 225, 0.4) !important;
}

/* ── Scrollbar ── */
.offcanvas__info::-webkit-scrollbar {
    width: 4px !important;
}
.offcanvas__info::-webkit-scrollbar-track {
    background: transparent !important;
}
.offcanvas__info::-webkit-scrollbar-thumb {
    background: rgba(108, 60, 225, 0.25) !important;
    border-radius: 10px !important;
}

/* ── Offcanvas top (logo + close) ── */
.offcanvas__top {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding-bottom: 16px !important;
    border-bottom: 2px solid rgba(108, 60, 225, 0.07) !important;
    flex-shrink: 0 !important;
    margin-bottom: 6px !important;
}

.offcanvas__logo a {
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
    gap: 8px !important;
}

.offcanvas__logo img {
    max-height: 38px !important;
    width: auto !important;
    display: block !important;
}

.offcanvas__close {
    flex-shrink: 0 !important;
}

.offcanvas__close button {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    border: none !important;
    background: rgba(108, 60, 225, 0.06) !important;
    color: #1A1F3A !important;
    font-size: 1.2rem !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    line-height: 1 !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important;
}

.offcanvas__close button:hover {
    background: rgba(108, 60, 225, 0.12) !important;
    transform: rotate(90deg) scale(1.05) !important;
    box-shadow: 0 4px 20px rgba(108, 60, 225, 0.15) !important;
}

/* ── Mobile menu inside offcanvas ── */
.offcanvas__info .mobile-menu {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    padding: 10px 0 8px !important;
    margin: 0 -4px !important;
}

.offcanvas__info .mobile-menu nav > ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.offcanvas__info .mobile-menu nav > ul > li {
    list-style: none !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
    padding: 0 !important;
    margin: 0 !important;
}

.offcanvas__info .mobile-menu nav > ul > li:last-child {
    border-bottom: none !important;
}

.offcanvas__info .mobile-menu nav > ul > li > a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px 6px !important;
    color: #1A1F3A !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    transition: color 0.2s ease, padding-left 0.2s ease !important;
    position: relative !important;
    border-radius: 8px !important;
}

.offcanvas__info .mobile-menu nav > ul > li > a::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 0 !important;
    height: 2px !important;
    background: linear-gradient(90deg, #6C3CE1, #EC4899) !important;
    transition: width 0.3s ease !important;
    border-radius: 4px !important;
}

.offcanvas__info .mobile-menu nav > ul > li > a:hover::after {
    width: 30px !important;
}

.offcanvas__info .mobile-menu nav > ul > li > a:hover {
    color: #6C3CE1 !important;
    background: rgba(108, 60, 225, 0.04) !important;
    padding-left: 10px !important;
}

/* submenu toggle */
.offcanvas__info .mobile-menu nav > ul > li > a .submenu-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.6rem !important;
    color: #6C3CE1 !important;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    width: 28px !important;
    height: 28px !important;
    flex-shrink: 0 !important;
    background: rgba(108, 60, 225, 0.05) !important;
    border-radius: 50% !important;
    margin-left: 8px !important;
}

.offcanvas__info .mobile-menu nav > ul > li.submenu-open > a .submenu-toggle {
    transform: rotate(180deg) !important;
    background: rgba(108, 60, 225, 0.12) !important;
}

/* submenu list */
.offcanvas__info .mobile-menu nav > ul > li .submenu {
    display: none !important;
    padding: 4px 0 12px 18px !important;
    background: rgba(108, 60, 225, 0.02) !important;
    border-radius: 12px !important;
    margin: 0 0 4px 0 !important;
    border-left: 2px solid rgba(108, 60, 225, 0.06) !important;
}

.offcanvas__info .mobile-menu nav > ul > li .submenu.show {
    display: block !important;
    animation: fadeUp 0.3s ease !important;
}

.offcanvas__info .mobile-menu nav > ul > li .submenu li {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.offcanvas__info .mobile-menu nav > ul > li .submenu li a {
    display: block !important;
    padding: 8px 12px !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    color: #64748B !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    text-decoration: none !important;
    border-radius: 6px !important;
    transition: all 0.25s ease !important;
}

.offcanvas__info .mobile-menu nav > ul > li .submenu li a:hover {
    color: #6C3CE1 !important;
    background: rgba(108, 60, 225, 0.05) !important;
    padding-left: 18px !important;
}

/* ── Contact block ── */
.offcanvas__contact {
    flex-shrink: 0 !important;
    padding-top: 16px !important;
    border-top: 2px solid rgba(108, 60, 225, 0.06) !important;
    margin-top: 6px !important;
}

.offcanvas__contact h4 {
    font-size: 0.6rem !important;
    font-weight: 700 !important;
    color: #94A3B8 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    margin-bottom: 12px !important;
}

.offcanvas__contact ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 14px 0 !important;
}

.offcanvas__contact ul li {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 5px 0 !important;
    font-size: 0.82rem !important;
    color: #64748B !important;
    line-height: 1.4 !important;
}

.offcanvas__contact ul li i {
    color: #6C3CE1 !important;
    width: 20px !important;
    text-align: center !important;
    font-size: 0.85rem !important;
    flex-shrink: 0 !important;
}

.offcanvas__contact ul li a {
    color: #64748B !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.offcanvas__contact ul li a:hover {
    color: #6C3CE1 !important;
}

/* Calendly button inside offcanvas */
.calendly-btn-offcanvas {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    background: linear-gradient(135deg, #6C3CE1, #EC4899) !important;
    color: #ffffff !important;
    padding: 12px 24px !important;
    border-radius: 30px !important;
    font-weight: 700 !important;
    font-size: 0.8rem !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 20px rgba(108, 60, 225, 0.25) !important;
    border: none !important;
    cursor: pointer !important;
    width: 100% !important;
    margin-top: 4px !important;
    position: relative !important;
    overflow: hidden !important;
}

.calendly-btn-offcanvas::before {
    content: '' !important;
    position: absolute !important;
    top: -50% !important;
    left: -50% !important;
    width: 200% !important;
    height: 200% !important;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent) !important;
    transform: rotate(45deg) !important;
    animation: shimmerGold 4s infinite !important;
    pointer-events: none !important;
}

.calendly-btn-offcanvas:hover {
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 8px 35px rgba(108, 60, 225, 0.4) !important;
    color: #ffffff !important;
}

/* Social icons */
.offcanvas__contact .social-icon {
    display: flex !important;
    gap: 10px !important;
    margin-top: 16px !important;
    flex-wrap: wrap !important;
}

.offcanvas__contact .social-icon a {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: rgba(108, 60, 225, 0.06) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #1A1F3A !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    font-size: 0.9rem !important;
    border: 1px solid transparent !important;
}

.offcanvas__contact .social-icon a:hover {
    background: #6C3CE1 !important;
    color: #ffffff !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 6px 20px rgba(108, 60, 225, 0.25) !important;
    border-color: rgba(108, 60, 225, 0.1) !important;
}

/* ── Responsive ── */
@media (max-width: 576px) {
    .offcanvas__info {
        width: 290px !important;
        max-width: 88vw !important;
        padding: 24px 18px 24px !important;
    }
    .offcanvas__logo img {
        max-height: 32px !important;
    }
    .offcanvas__close button {
        width: 38px !important;
        height: 38px !important;
        font-size: 1rem !important;
    }
    .offcanvas__info .mobile-menu nav > ul > li > a {
        font-size: 0.85rem !important;
        padding: 12px 4px !important;
    }
    .offcanvas__info .mobile-menu nav > ul > li .submenu li a {
        font-size: 0.7rem !important;
        padding: 6px 10px !important;
    }
    .calendly-btn-offcanvas {
        font-size: 0.7rem !important;
        padding: 10px 18px !important;
    }
}

@media (max-width: 400px) {
    .offcanvas__info {
        width: 260px !important;
        max-width: 92vw !important;
        padding: 20px 14px 20px !important;
    }
    .offcanvas__logo img {
        max-height: 28px !important;
    }
    .offcanvas__close button {
        width: 34px !important;
        height: 34px !important;
        font-size: 0.9rem !important;
    }
    .offcanvas__info .mobile-menu nav > ul > li > a {
        font-size: 0.78rem !important;
        padding: 10px 3px !important;
    }
    .offcanvas__contact ul li {
        font-size: 0.75rem !important;
    }
    .calendly-btn-offcanvas {
        font-size: 0.65rem !important;
        padding: 8px 14px !important;
    }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .offcanvas__info,
    .offcanvas__overlay {
        transition: none !important;
    }
    .offcanvas__info {
        right: -100% !important;
    }
    .offcanvas__info.info-open {
        right: 0 !important;
    }
}

/* ── fadeUp animation ── */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* ===== FINAL OFFCANVAS FIX ===== */

#offcanvasMenu,
#offcanvasMenu .offcanvas__wrapper,
#offcanvasMenu .offcanvas__content,
#offcanvasMenu .offcanvas__top,
#offcanvasMenu .mobile-menu,
#offcanvasMenu nav,
#offcanvasMenu ul,
#offcanvasMenu li,
#offcanvasMenu .offcanvas__contact{

    background:#fff !important;
    background-color:#fff !important;
    background-image:none !important;
}

#offcanvasMenu::before,
#offcanvasMenu::after,
#offcanvasMenu .offcanvas__wrapper::before,
#offcanvasMenu .offcanvas__wrapper::after,
#offcanvasMenu .offcanvas__content::before,
#offcanvasMenu .offcanvas__content::after{

    display:none !important;
    content:none !important;
}
/* ============================================================
   DISABLE OLD MEANMENU COMPLETELY
   ============================================================ */
.mean-container,
.mean-nav,
.meanmenu-reveal,
.mean-expand,
.mean-remove {
    display: none !important;
}

/* ============================================================
   OFFCANVAS PANEL – FIX WIDTH & BACKGROUND
   ============================================================ */
#offcanvasMenu {
    position: fixed !important;
    top: 0 !important;
    right: -100% !important;
    width: 320px !important;
    max-width: 85vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    z-index: 9999 !important;
    background: #ffffff !important;
    transition: right 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important;
    overflow-y: auto !important;
    padding: 28px 24px 30px !important;
    box-shadow: -15px 0 60px rgba(0, 0, 0, 0.15) !important;
    border-left: 3px solid rgba(108, 60, 225, 0.12) !important;
    pointer-events: none !important;
}

#offcanvasMenu.info-open {
    right: 0 !important;
    pointer-events: all !important;
}

/* ensure all children are white */
#offcanvasMenu,
#offcanvasMenu .offcanvas__wrapper,
#offcanvasMenu .offcanvas__content,
#offcanvasMenu .offcanvas__top,
#offcanvasMenu .mobile-menu,
#offcanvasMenu nav,
#offcanvasMenu ul,
#offcanvasMenu li,
#offcanvasMenu .offcanvas__contact {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
}

#offcanvasMenu::before,
#offcanvasMenu::after,
#offcanvasMenu .offcanvas__wrapper::before,
#offcanvasMenu .offcanvas__wrapper::after {
    display: none !important;
    content: none !important;
}

/* ============================================================
   MOBILE – HIDE DESKTOP MENU WHEN HAMBURGER VISIBLE
   ============================================================ */
@media (max-width: 1199px) {
    .main-menu {
        display: none !important;
    }
    .header__hamburger {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}/* ============================================================
   FIX: OFFCANVAS MENU VISIBILITY
   ============================================================ */
#offcanvasMenu {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    box-shadow: -20px 0 80px rgba(0, 0, 0, 0.15) !important;
}

#offcanvasMenu .mobile-menu nav > ul > li {
    display: block !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
}

#offcanvasMenu .mobile-menu nav > ul > li > a {
    color: #1A1F3A !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    padding: 14px 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

#offcanvasMenu .mobile-menu nav > ul > li > a:hover {
    color: #6C3CE1 !important;
    background: rgba(108, 60, 225, 0.04) !important;
}

#offcanvasMenu .mobile-menu nav > ul > li .submenu {
    display: none !important;
    padding: 4px 0 12px 18px !important;
    background: rgba(108, 60, 225, 0.02) !important;
    border-left: 2px solid rgba(108, 60, 225, 0.06) !important;
}

#offcanvasMenu .mobile-menu nav > ul > li .submenu.show {
    display: block !important;
}

#offcanvasMenu .mobile-menu nav > ul > li .submenu li a {
    display: block !important;
    padding: 8px 12px !important;
    color: #64748B !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
}

#offcanvasMenu .mobile-menu nav > ul > li .submenu li a:hover {
    color: #6C3CE1 !important;
    padding-left: 18px !important;
    background: rgba(108, 60, 225, 0.04) !important;
}

/* submenu toggle arrow */
#offcanvasMenu .submenu-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.6rem !important;
    color: #6C3CE1 !important;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    width: 28px !important;
    height: 28px !important;
    flex-shrink: 0 !important;
    background: rgba(108, 60, 225, 0.05) !important;
    border-radius: 50% !important;
    margin-left: 8px !important;
}

#offcanvasMenu .submenu-open > a .submenu-toggle {
    transform: rotate(180deg) !important;
    background: rgba(108, 60, 225, 0.12) !important;
}

/* offcanvas overlay - ensure it covers everything */
#offcanvasOverlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    z-index: 9998 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.4s ease, visibility 0.4s ease !important;
    pointer-events: none !important;
}

#offcanvasOverlay.overlay-open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: all !important;
}

/* Ensure offcanvas panel is on top */
#offcanvasMenu {
    z-index: 9999 !important;
}

/* Force show menu items on mobile */
@media (max-width: 1199px) {
    #offcanvasMenu .mobile-menu {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    #offcanvasMenu .mobile-menu nav {
        display: block !important;
    }
    #offcanvasMenu .mobile-menu nav > ul {
        display: block !important;
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    #offcanvasMenu .mobile-menu nav > ul > li {
        display: block !important;
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    #offcanvasMenu .mobile-menu nav > ul > li > a {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
}

/* Fix for very small screens */
@media (max-width: 400px) {
    #offcanvasMenu {
        width: 280px !important;
        padding: 20px 14px !important;
    }
    #offcanvasMenu .mobile-menu nav > ul > li > a {
        font-size: 0.82rem !important;
        padding: 12px 4px !important;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    #offcanvasMenu,
    #offcanvasOverlay {
        transition: none !important;
    }
    #offcanvasMenu {
        right: -100% !important;
    }
    #offcanvasMenu.info-open {
        right: 0 !important;
    }
}
/* ── Make offcanvas top bar sticky ── */
#offcanvasMenu .offcanvas__top {
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
    background: #ffffff !important;          /* matches panel background */
    padding: 16px 0 !important;
    border-bottom: 2px solid rgba(108, 60, 225, 0.07) !important;
    margin: -4px 0 0 0 !important;           /* adjust if needed */
    flex-shrink: 0 !important;
}

/* Ensure close button stays on the far right */
#offcanvasMenu .offcanvas__close {
    flex-shrink: 0 !important;
    margin-left: auto !important;
}

/* Make close button larger & more tappable */
#offcanvasMenu .offcanvas__close button {
    width: 44px !important;
    height: 44px !important;
    font-size: 1.3rem !important;
    background: rgba(108, 60, 225, 0.08) !important;
    border-radius: 50% !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #1A1F3A !important;
}

#offcanvasMenu .offcanvas__close button:hover {
    background: rgba(108, 60, 225, 0.18) !important;
    transform: rotate(90deg) scale(1.05) !important;
}

/* Dark mode adjustment */
@media (prefers-color-scheme: dark) {
    #offcanvasMenu .offcanvas__top {
        background: #0A0F1C !important;
        border-bottom-color: rgba(255, 255, 255, 0.06) !important;
    }
    #offcanvasMenu .offcanvas__close button {
        color: #E8EDF5 !important;
        background: rgba(255, 255, 255, 0.08) !important;
    }
}/* ── Offcanvas Close Button – RED ── */
#offcanvasMenu .offcanvas__close button {
    color: #DC2626 !important;                 /* bright red */
    background: rgba(220, 38, 38, 0.08) !important;  /* light red background */
    border: 1px solid rgba(220, 38, 38, 0.15) !important;
    border-radius: 50% !important;
    width: 44px !important;
    height: 44px !important;
    font-size: 1.3rem !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
}

#offcanvasMenu .offcanvas__close button:hover {
    background: #DC2626 !important;
    color: #ffffff !important;
    transform: rotate(90deg) scale(1.05) !important;
}

/* ── Dark Mode ── */
@media (prefers-color-scheme: dark) {
    #offcanvasMenu .offcanvas__close button {
        color: #EF4444 !important;
        background: rgba(239, 68, 68, 0.15) !important;
        border-color: rgba(239, 68, 68, 0.3) !important;
    }
    #offcanvasMenu .offcanvas__close button:hover {
        background: #EF4444 !important;
        color: #ffffff !important;
    }
}
/* ============================================================
   WORKE-ITEMS – FULLY RESPONSIVE
   ============================================================ */

/* ── base (already in project, but we reinforce here) ── */
.team-wrapper {
    display: flex !important;
    gap: 20px !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
}

.worke-items {
    height: 100% !important;
    padding: 25px !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, #ffffff, #f1f5ff) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06) !important;
    transition: 0.3s !important;
    border: 1px solid #eee !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;          /* allow shrinking */
}

.worke-items .step-area span.fs-seven {
    font-size: clamp(0.6rem, 0.9vw, 0.75rem) !important;
    letter-spacing: 2px !important;
}

.worke-items .step-area .step-number {
    font-size: clamp(0.8rem, 1.2vw, 1.1rem) !important;
    padding: 4px 12px !important;
}

.worke-items h3 {
    font-size: clamp(1rem, 1.6vw, 1.4rem) !important;
    margin-bottom: 4px !important;
}

.worke-items .pra {
    font-size: clamp(0.8rem, 1vw, 1rem) !important;
    line-height: 1.7 !important;
}

/* ── TABLET (≤ 992px) ── */
@media (max-width: 992px) {
    .team-wrapper {
        flex-wrap: wrap !important;
        gap: 16px !important;
    }
    .worke-items {
        flex: 0 0 calc(50% - 8px) !important;
        max-width: calc(50% - 8px) !important;
        padding: 20px 18px !important;
        border-radius: 14px !important;
    }
    .worke-items h3 {
        font-size: 1.1rem !important;
    }
    .worke-items .pra {
        font-size: 0.85rem !important;
    }
    .worke-items .step-area span.fs-seven {
        font-size: 0.65rem !important;
    }
    .worke-items .step-area .step-number {
        font-size: 0.9rem !important;
        padding: 4px 10px !important;
    }
}

/* ── MOBILE (≤ 576px) ── */
@media (max-width: 576px) {
    .team-wrapper {
        flex-wrap: wrap !important;
        gap: 14px !important;
    }
    .worke-items {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding: 18px 16px !important;
        border-radius: 14px !important;
    }
    .worke-items h3 {
        font-size: 1rem !important;
        margin-bottom: 4px !important;
    }
    .worke-items .pra {
        font-size: 0.8rem !important;
        line-height: 1.6 !important;
    }
    .worke-items .step-area {
        margin-bottom: 8px !important;
    }
    .worke-items .step-area span.fs-seven {
        font-size: 0.6rem !important;
        letter-spacing: 2px !important;
    }
    .worke-items .step-area .step-number {
        font-size: 0.8rem !important;
        padding: 3px 10px !important;
        margin-left: 4px !important;
    }

    /* section heading adjustments */
    .worke-section .cont h2 {
        font-size: 1.4rem !important;
    }
    .worke-section .cont .fs-seven {
        font-size: 0.6rem !important;
        letter-spacing: 2px !important;
    }
}

/* ── VERY SMALL SCREENS (≤ 400px) ── */
@media (max-width: 400px) {
    .team-wrapper {
        gap: 12px !important;
    }
    .worke-items {
        padding: 14px 12px !important;
        border-radius: 12px !important;
    }
    .worke-items h3 {
        font-size: 0.9rem !important;
    }
    .worke-items .pra {
        font-size: 0.75rem !important;
    }
    .worke-items .step-area span.fs-seven {
        font-size: 0.55rem !important;
        letter-spacing: 1.5px !important;
    }
    .worke-items .step-area .step-number {
        font-size: 0.7rem !important;
        padding: 2px 8px !important;
    }
    .worke-section .cont h2 {
        font-size: 1.2rem !important;
    }
}

/* ── LARGE SCREENS (≥ 1400px) ── */
@media (min-width: 1400px) {
    .worke-items {
        padding: 32px 28px !important;
        border-radius: 20px !important;
    }
    .worke-items h3 {
        font-size: 1.5rem !important;
    }
    .worke-items .pra {
        font-size: 1.05rem !important;
    }
}

/* ── FLEX SAFARI FALLBACK ── */
@supports not (gap: 1px) {
    .team-wrapper {
        margin: -10px !important;
    }
    .team-wrapper > * {
        margin: 10px !important;
    }
}
/* ============================================================
   CONTACT CARDS – ULTRA RESPONSIVE (FORCE OVERRIDE)
   ============================================================ */

/* Force grid to stack on smaller screens */
@media (max-width: 992px) {
    .contact-row {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }
}

@media (max-width: 576px) {
    .contact-row {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
}

/* Card internal adjustments – high specificity to beat any other rules */
.contact-row .contact-info-card {
    padding: 30px 20px !important;
    border-radius: 20px !important;
    background: rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.05) !important;
    text-align: center !important;
    transition: all 0.3s ease !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

.contact-row .contact-info-card .contact-icon {
    font-size: 2.5rem !important;
    margin-bottom: 15px !important;
    color: #6C3CE1 !important;
    line-height: 1 !important;
}

.contact-row .contact-info-card h4 {
    font-size: 1.3rem !important;
    font-weight: 700 !important;
    margin-bottom: 10px !important;
    color: #1A1F3A !important;
}

.contact-row .contact-info-card p {
    font-size: 0.95rem !important;
    color: #64748B !important;
    margin-bottom: 12px !important;
    line-height: 1.6 !important;
}

.contact-row .contact-info-card .contact-details a {
    color: #6C3CE1 !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

/* ── Tablet ── */
@media (max-width: 992px) {
    .contact-row .contact-info-card {
        padding: 22px 16px !important;
        border-radius: 16px !important;
    }
    .contact-row .contact-info-card .contact-icon {
        font-size: 2rem !important;
        margin-bottom: 12px !important;
    }
    .contact-row .contact-info-card h4 {
        font-size: 1.1rem !important;
    }
    .contact-row .contact-info-card p {
        font-size: 0.85rem !important;
    }
}

/* ── Mobile ── */
@media (max-width: 576px) {
    .contact-row .contact-info-card {
        padding: 18px 14px !important;
        border-radius: 14px !important;
    }
    .contact-row .contact-info-card .contact-icon {
        font-size: 1.6rem !important;
        margin-bottom: 8px !important;
    }
    .contact-row .contact-info-card h4 {
        font-size: 1rem !important;
        margin-bottom: 6px !important;
    }
    .contact-row .contact-info-card p {
        font-size: 0.8rem !important;
        margin-bottom: 8px !important;
    }
    .contact-row .contact-info-card .contact-details a {
        font-size: 0.85rem !important;
    }
}

/* ── Very small screens ── */
@media (max-width: 400px) {
    .contact-row .contact-info-card {
        padding: 14px 10px !important;
        border-radius: 12px !important;
    }
    .contact-row .contact-info-card .contact-icon {
        font-size: 1.3rem !important;
        margin-bottom: 6px !important;
    }
    .contact-row .contact-info-card h4 {
        font-size: 0.9rem !important;
    }
    .contact-row .contact-info-card p {
        font-size: 0.75rem !important;
    }
    .contact-row .contact-info-card .contact-details a {
        font-size: 0.75rem !important;
    }
}

/* ── Dark mode ── */
@media (prefers-color-scheme: dark) {
    .contact-row .contact-info-card {
        background: rgba(26, 31, 58, 0.9) !important;
        box-shadow: 0 5px 30px rgba(0, 0, 0, 0.3) !important;
    }
    .contact-row .contact-info-card h4 {
        color: #E8EDF5 !important;
    }
    .contact-row .contact-info-card p {
        color: #94A3B8 !important;
    }
    .contact-row .contact-info-card .contact-details a {
        color: #8B6BE8 !important;
    }
}