/* ==========================================
   CRITICAL: Force 3 Columns for Trusted Partners Grid
   This must come first to override Tailwind
   ========================================== */
@media (max-width: 768px) {
    /* Ultra-specific selectors to override Tailwind grid-cols-2 */
    section.recruiters-trust-section div.mb-16 div.trusted-partners-grid.grid.grid-cols-2,
    section.recruiters-trust-section div.mb-16 div.grid.trusted-partners-grid.grid-cols-2,
    section.recruiters-trust-section div.mb-16 div.trusted-partners-grid[class*="grid-cols-2"],
    .recruiters-trust-section .mb-16 .trusted-partners-grid.grid.grid-cols-2,
    .recruiters-trust-section .mb-16 .trusted-partners-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        -ms-grid-columns: 1fr 0.5rem 1fr 0.5rem 1fr !important;
    }
}

/* Navbar - Always Visible on Mobile */
nav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
    width: 100% !important;
    background-color: white !important;
}

/* Add padding to body to prevent content from hiding under navbar */
body {
    padding-top: 64px !important; /* Height of navbar */
}

@media (max-width: 768px) {
    /* Hero Buttons - Force horizontal layout */
    .hero-buttons-mobile {
        display: flex !important;
        flex-direction: row !important;
        gap: 0.75rem !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
    }
    
    .hero-buttons-mobile button {
        width: auto !important;
        max-width: none !important;
        flex: 1 !important;
        padding: 0.75rem 1rem !important;
        font-size: 0.9rem !important;
        min-width: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}

/* Extra Small Devices (phones, 320px and up) */
@media (max-width: 480px) {
    /* Typography Adjustments */
    h1 {
        font-size: 2rem !important;
        line-height: 1.2 !important;
    }
    
    h2 {
        font-size: 1.75rem !important;
        line-height: 1.3 !important;
    }
    
    h3 {
        font-size: 1.5rem !important;
    }
    
    p {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
    }
    
    /* Professional Mobile Navigation */
    nav {
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08) !important;
    }
    
    /* Navbar Height Mobile */
    nav .flex.justify-between {
        height: 64px !important;
    }
    
    /* Mobile Menu Button Enhancement */
    #mobile-menu-btn {
        padding: 0.625rem !important;
        border-radius: 0.625rem !important;
        transition: all 0.3s ease !important;
        background: linear-gradient(135deg, rgba(230, 39, 39, 0.05) 0%, rgba(0, 11, 88, 0.05) 100%) !important;
        border: 1.5px solid rgba(230, 39, 39, 0.15) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }
    
    #mobile-menu-btn:hover {
        background: linear-gradient(135deg, rgba(230, 39, 39, 0.12) 0%, rgba(0, 11, 88, 0.12) 100%) !important;
        border-color: rgba(230, 39, 39, 0.3) !important;
        transform: scale(1.05);
        box-shadow: 0 4px 12px rgba(230, 39, 39, 0.15);
    }
    
    #mobile-menu-btn:active {
        transform: scale(0.95);
        box-shadow: 0 1px 4px rgba(230, 39, 39, 0.2);
    }
    
    #mobile-menu-btn i {
        transition: transform 0.3s ease;
        color: #E62727 !important;
        font-size: 1.25rem !important;
    }
    
    /* Mobile Menu Container */
    #mobile-menu {
        background: linear-gradient(to bottom, #ffffff 0%, #f9fafb 100%) !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15), inset 0 2px 0 0 #E62727 !important;
        border-top: none !important;
        animation: slideDown 0.3s ease-out;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-out;
        position: relative;
    }
    
    #mobile-menu::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, #E62727 0%, #000B58 100%);
        box-shadow: 0 2px 8px rgba(230, 39, 39, 0.3);
    }
    
    #mobile-menu:not(.hidden) {
        max-height: 600px;
    }
    
    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    /* Mobile Menu Links */
    #mobile-menu a {
        position: relative !important;
        padding: 1rem 1.25rem !important;
        margin: 0.25rem 0.5rem !important;
        border-radius: 0.75rem !important;
        font-weight: 500 !important;
        font-size: 1rem !important;
        transition: all 0.3s ease !important;
        display: flex !important;
        align-items: center !important;
        overflow: hidden !important;
        border: none !important;
        outline: none !important;
    }
    
    /* Mobile Menu Link Icons */
    #mobile-menu a i {
        color: #E62727;
        font-size: 1.1rem;
        width: 20px;
        text-align: center;
        transition: all 0.3s ease;
    }
    
    #mobile-menu a:hover i,
    #mobile-menu a:active i {
        transform: scale(1.15);
    }
    
    /* CTA Button Icon Color Override */
    #mobile-menu a[class*="bg-hirway-red"] i {
        color: white !important;
    }
    
    /* Regular Links Hover */
    #mobile-menu a.mobile-nav-link:not([class*="bg-hirway-red"]):hover {
        background: linear-gradient(135deg, rgba(230, 39, 39, 0.08) 0%, rgba(0, 11, 88, 0.08) 100%) !important;
        color: #E62727 !important;
        transform: translateX(3px);
        box-shadow: 0 2px 8px rgba(230, 39, 39, 0.1);
    }
    
    /* Primary CTA Button in Mobile Menu */
    #mobile-menu a[class*="bg-hirway-red"] {
        background: linear-gradient(135deg, #E62727 0%, #000B58 100%) !important;
        color: white !important;
        font-weight: 600 !important;
        box-shadow: 0 4px 12px rgba(230, 39, 39, 0.3) !important;
        margin-top: 0.75rem !important;
        text-align: center !important;
        justify-content: center !important;
    }
    
    #mobile-menu a[class*="bg-hirway-red"]:hover,
    #mobile-menu a[class*="bg-hirway-red"]:active {
        background: linear-gradient(135deg, #000B58 0%, #E62727 100%) !important;
        box-shadow: 0 6px 20px rgba(230, 39, 39, 0.4) !important;
        transform: translateY(-2px) scale(1.02);
    }
    
    /* Mobile Menu Divider */
    #mobile-menu .space-y-1 {
        padding: 1.5rem 0.75rem 1.25rem !important;
    }
    
    /* First Menu Item Top Margin */
    #mobile-menu a.mobile-nav-link:first-child {
        margin-top: 0 !important;
    }
    
    /* Menu Container Padding */
    #mobile-menu > div {
        padding-bottom: 1rem !important;
    }
    
    /* Mobile Quick Actions Section */
    .mobile-quick-actions {
        background: linear-gradient(135deg, rgba(230, 39, 39, 0.02) 0%, rgba(0, 11, 88, 0.02) 100%);
        border-radius: 0.75rem;
        padding: 0.75rem 0.5rem !important;
        margin: 1rem 0.5rem 0.5rem !important;
    }
    
    .mobile-quick-actions .mobile-quick-link {
        padding: 0.75rem 1rem !important;
        margin: 0.25rem 0 !important;
        border-radius: 0.5rem !important;
        font-size: 0.9rem !important;
        display: flex !important;
        align-items: center !important;
        transition: all 0.3s ease !important;
    }
    
    .mobile-quick-actions .mobile-quick-link i {
        color: #E62727 !important;
        font-size: 1rem !important;
        width: 18px;
    }
    
    .mobile-quick-actions a.mobile-quick-link:hover {
        background: white !important;
        color: #E62727 !important;
        box-shadow: 0 2px 8px rgba(230, 39, 39, 0.15) !important;
        transform: translateX(3px);
    }
    
    .mobile-quick-actions a.mobile-quick-link:hover i {
        transform: scale(1.15);
    }
    
    .mobile-quick-actions div.mobile-quick-link {
        opacity: 0.8;
        cursor: default;
    }
    
    .mobile-quick-actions div.mobile-quick-link i {
        color: #E62727 !important;
    }
    
    /* Enhanced Mobile Menu Item Spacing */
    #mobile-menu a.mobile-nav-link + a.mobile-nav-link {
        margin-top: 0.5rem !important;
    }
    
    /* Active Link State */
    #mobile-menu a:active {
        transform: scale(0.98);
        border: none !important;
        outline: none !important;
    }
    
    /* Remove all focus outlines and borders from mobile menu */
    #mobile-menu a:focus,
    #mobile-menu a:focus-visible {
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
    }
    
    /* Navigation Logo Mobile Enhancement */
    nav .logo {
        max-height: 40px !important;
        transition: transform 0.3s ease !important;
        filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.12));
    }
    
    nav .logo:hover {
        transform: scale(1.03);
    }
    
    /* Mobile Menu Typography Enhancement */
    #mobile-menu {
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    }
    
    #mobile-menu a.mobile-nav-link {
        letter-spacing: 0.01em !important;
        font-weight: 500 !important;
    }
    
    #mobile-menu a[class*="bg-hirway-red"] {
        font-weight: 600 !important;
        letter-spacing: 0.02em !important;
        text-transform: uppercase !important;
        font-size: 0.95rem !important;
    }
    
    /* Navbar Shadow on Scroll */
    nav.scrolled {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
    }
    
    /* Navigation Mobile (Legacy) */
    .mobile-nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.9);
        z-index: 9999;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }
    
    .mobile-nav.active {
        transform: translateX(0);
    }
    
    .mobile-nav-content {
        background: white;
        width: 80%;
        height: 100%;
        padding: 2rem;
        overflow-y: auto;
    }
    
    /* Hero Section Mobile */
    .hero-mobile {
        padding: 4rem 1rem 3rem !important;
        text-align: center;
    }
    
    .hero-mobile h1 {
        margin-bottom: 1.5rem !important;
        font-size: 2.5rem !important;
    }
    
    .hero-mobile p {
        margin-bottom: 2rem !important;
        font-size: 1.1rem !important;
    }
    
    /* Hero Section Background Image - Mobile Optimization */
    #home {
        background-attachment: scroll !important; /* Fixed attachment doesn't work well on mobile */
    }
    
    /* Ensure text remains readable over background image on mobile */
    #home h1,
    #home p,
    #home a {
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
    }
    
    /* Very small screens - adjust text size */
    @media (max-width: 360px) {
        .hero-buttons-mobile button {
            font-size: 0.8rem !important;
            padding: 0.6rem 0.75rem !important;
        }
        
        .hero-buttons-mobile button i {
            margin-right: 0.25rem !important;
        }
    }
    
    
    
    /* About Section Mobile */
    #about {
        padding: 3rem 1rem !important;
    }
    
    #about .grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 2rem !important;
    }
    
    #about .text-center.mb-16 {
        margin-bottom: 2rem !important;
    }
    
    #about .text-center h2 {
        font-size: 2.5rem !important;
        margin-bottom: 1rem !important;
    }
    
    #about .text-center p {
        font-size: 1rem !important;
        margin-bottom: 0 !important;
        line-height: 1.5 !important;
    }
    
    /* About Cards Mobile */
    #about .bg-white {
        padding: 1.5rem !important;
        margin-bottom: 1rem !important;
    }
    
    #about .bg-white h3 {
        font-size: 1.25rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    #about .bg-white p {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
    }
    
    /* Statistics Cards Mobile */
    #about .grid.grid-cols-2 {
        gap: 1rem !important;
        margin-top: 1rem !important;
    }
    
    #about .grid.grid-cols-2 > div {
        padding: 1.25rem !important;
    }
    
    #about .grid.grid-cols-2 .text-4xl {
        font-size: 2.5rem !important;
    }
    
    #about .grid.grid-cols-2 .text-sm {
        font-size: 0.8rem !important;
    }
    
    /* Right Panel Mobile */
    #about .bg-gradient-to-br {
        padding: 2rem !important;
        margin-top: 2rem !important;
    }
    
    #about .bg-gradient-to-br h3 {
        font-size: 2rem !important;
        margin-bottom: 1.5rem !important;
    }
    
    #about .space-y-6 > div {
        margin-bottom: 1.5rem !important;
    }
    
    #about .space-y-6 h4 {
        font-size: 1rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    #about .space-y-6 p {
        font-size: 0.85rem !important;
    }
    
    /* Call to Action Button Mobile */
    #about button {
        padding: 0.75rem 1.5rem !important;
        font-size: 0.9rem !important;
    }
    
    /* Professional Poster Section Mobile */
    .py-20 {
        padding: 3rem 1rem !important;
    }
    
    /* Poster Section Header Mobile */
    .py-20 .text-center h2 {
        font-size: 2.5rem !important;
        margin-bottom: 1rem !important;
    }
    
    .py-20 .text-center p {
        font-size: 1.1rem !important;
        margin-bottom: 0 !important;
    }
    
    /* Poster Grid Mobile */
    .py-20 .grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 2rem !important;
    }
    
    /* Poster Image Mobile */
    .py-20 img {
        width: 100% !important;
        height: auto !important;
        border-radius: 1rem !important;
    }
    
    /* Feature Cards Mobile */
    .py-20 .space-y-6 > div {
        padding: 1.5rem !important;
        margin-bottom: 1rem !important;
    }
    
    .py-20 .space-y-6 h4 {
        font-size: 1.25rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    .py-20 .space-y-6 p {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
    }
    
    /* Call to Action Buttons Mobile */
    .py-20 .flex.flex-col button {
        width: 100% !important;
        padding: 0.875rem 1.5rem !important;
        font-size: 0.9rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    /* Bottom Stats Mobile */
    .py-20 .grid.grid-cols-2 {
        gap: 1.5rem !important;
    }
    
    .py-20 .grid.grid-cols-2 .text-4xl {
        font-size: 2.5rem !important;
    }
    
    .py-20 .grid.grid-cols-2 .text-gray-300 {
        font-size: 0.85rem !important;
    }
    
    /* Our Recruitment Partners Horizontal Scroll Mobile */
    .partners-scroll-container {
        scroll-behavior: smooth !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .partner-card {
        width: 16rem !important; /* Smaller width for mobile */
        flex-shrink: 0 !important;
    }
    
    .py-20 .grid.md\\:grid-cols-2 .h-80 {
        height: 18rem !important;
    }
    
    .py-20 .grid.md\\:grid-cols-2 .w-32 {
        width: 6rem !important;
        height: 6rem !important;
    }
    
    .py-20 .grid.md\\:grid-cols-2 .w-32 i {
        font-size: 3rem !important;
    }
    
    /* Force 2x2 grid layout on mobile for all 4-column grids */
    .grid.md\\:grid-cols-4,
    .py-20 .grid.md\\:grid-cols-4,
    .grid.grid-cols-2.md\\:grid-cols-4,
    .py-20 .grid.grid-cols-2.md\\:grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
        display: grid !important;
    }
    
    /* Optimize 3-item grids to show 2 per row with better spacing */
    .grid.md\\:grid-cols-4:has(:nth-child(3):last-child) {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.25rem !important;
    }
    
    /* Make the third item span full width on mobile for 3-item sections */
    .grid.md\\:grid-cols-4:has(:nth-child(3):last-child) > :nth-child(3) {
        grid-column: 1 / -1 !important;
        justify-self: center !important;
        max-width: 50% !important;
    }
    
    /* Statistics icons and text mobile optimization for 2-per-row layout */
    .py-20 .grid.md\\:grid-cols-4 .w-20,
    .grid.md\\:grid-cols-4 .w-20 {
        width: 2.75rem !important;
        height: 2.75rem !important;
        margin: 0 auto 0.75rem auto !important;
    }
    
    .py-20 .grid.md\\:grid-cols-4 .text-4xl,
    .grid.md\\:grid-cols-4 .text-4xl {
        font-size: 1.75rem !important;
        margin-bottom: 0.5rem !important;
        font-weight: 700 !important;
    }
    
    .py-20 .grid.md\\:grid-cols-4 .text-gray-300,
    .py-20 .grid.md\\:grid-cols-4 .font-medium,
    .grid.md\\:grid-cols-4 .text-gray-300,
    .grid.md\\:grid-cols-4 .font-medium {
        font-size: 0.8rem !important;
        line-height: 1.2 !important;
        margin-bottom: 0 !important;
        font-weight: 500 !important;
    }
    
    /* Ensure proper spacing in 2-per-row layout */
    .grid.md\\:grid-cols-4 > div,
    .py-20 .grid.md\\:grid-cols-4 > div {
        padding: 0.75rem 0.5rem !important;
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        min-height: auto !important;
    }
    
    /* Icon sizing within circular backgrounds for mobile */
    .grid.md\\:grid-cols-4 .w-20 i,
    .py-20 .grid.md\\:grid-cols-4 .w-20 i {
        font-size: 1.25rem !important;
    }
    
    /* Special styling for 3-item sections (like Why Choose HirWay) */
    .py-20 .grid.md\\:grid-cols-4:has(:nth-child(3):last-child) .w-20 {
        width: 3rem !important;
        height: 3rem !important;
        margin: 0 auto 1rem auto !important;
    }
    
    .py-20 .grid.md\\:grid-cols-4:has(:nth-child(3):last-child) .text-4xl {
        font-size: 2rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .py-20 .grid.md\\:grid-cols-4:has(:nth-child(3):last-child) .text-gray-300 {
        font-size: 0.85rem !important;
        line-height: 1.3 !important;
    }
    
    /* Enhanced mobile statistics layout */
    .py-20 .grid.md\\:grid-cols-4 > div {
        border-radius: 0.75rem !important;
        transition: transform 0.2s ease !important;
    }
    
    .py-20 .grid.md\\:grid-cols-4 > div:hover {
        transform: translateY(-2px) !important;
    }
    
    /* Better spacing for achievement sections */
    .py-20 .grid.md\\:grid-cols-4 {
        margin-top: 1.5rem !important;
        margin-bottom: 1rem !important;
    }
    
    /* Optimize text wrapping for long descriptions */
    .py-20 .grid.md\\:grid-cols-4 .text-gray-300 {
        word-wrap: break-word !important;
        hyphens: auto !important;
        max-width: 100% !important;
    }
    
    
    /* Featured Jobs Section Mobile */
    .md\\:hidden.space-y-4 > div {
        margin-bottom: 1rem !important;
    }
    
    .md\\:hidden.space-y-4 button {
        font-size: 0.95rem !important;
        padding: 0.875rem 1rem !important;
    }
    
    /* Job Cards Mobile Optimization */
    .md\\:hidden .bg-white.rounded-xl h3 {
        font-size: 1rem !important;
        line-height: 1.3 !important;
    }
    
    .md\\:hidden .bg-white.rounded-xl .text-sm {
        font-size: 0.85rem !important;
    }
    
    /* WhatsApp FAB Mobile */
    .whatsapp-fab {
        width: 3.5rem !important;
        height: 3.5rem !important;
        bottom: 1rem !important;
        right: 1rem !important;
    }
    
    .whatsapp-fab i {
        font-size: 1.25rem !important;
    }

    /* ========================================
       MOBILE CONTACT FORM - FULL WIDTH DESIGN
       ======================================== */
    
    /* Contact Section - Remove All Padding */
    #contact {
        padding: 0 !important;
        margin: 0 !important;
        background: #ffffff !important;
    }
    
    /* Remove container padding */
    #contact .max-w-7xl {
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Contact Section Header - Compact */
    #contact .text-center {
        padding: 2rem 1rem 1.5rem !important;
        margin-bottom: 0 !important;
        background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);
    }
    
    #contact .text-center .w-16 {
        width: 3rem !important;
        height: 3rem !important;
        margin-bottom: 1rem !important;
    }
    
    #contact .text-center h2 {
        font-size: 2rem !important;
        margin-bottom: 0.5rem !important;
        line-height: 1.2 !important;
    }
    
    #contact .text-center .w-24 {
        margin-bottom: 0 !important;
    }
    
    /* Grid Container - Full Width */
    #contact .grid.lg\\:grid-cols-2 {
        display: block !important;
        gap: 0 !important;
        grid-template-columns: 1fr !important;
    }
    
    /* Contact Form Container - Full Width, No Margins */
    #contact .bg-white.rounded-3xl,
    #contact .grid > div:first-child {
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: #ffffff !important;
        width: 100% !important;
    }
    
    /* Form Inner Wrapper */
    #contact .bg-white.rounded-3xl > div {
        padding: 0 !important;
    }
    
    /* Form Header - Clean Design */
    #contact .bg-white.rounded-3xl h3,
    #contact .relative.z-10 h3 {
        font-size: 1.5rem !important;
        margin-bottom: 0.5rem !important;
        line-height: 1.3 !important;
        padding: 2rem 1.25rem 0 !important;
    }
    
    #contact .bg-white.rounded-3xl p,
    #contact .relative.z-10 > div > p {
        font-size: 0.9rem !important;
        margin-bottom: 0 !important;
        color: #6B7280 !important;
        padding: 0 1.25rem 1.5rem !important;
    }
    
    /* Form Header Section */
    #contact .mb-8 {
        margin-bottom: 0 !important;
        padding: 0 !important;
    }
    
    /* Remove Background Patterns */
    #contact .absolute.top-0.right-0 {
        display: none !important;
    }
    
    /* FORM STYLING - Full Width Mobile */
    #contact form,
    #contactForm {
        padding: 0 1.25rem 2rem !important;
        margin: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Form Groups - Minimal Spacing */
    #contact .form-group,
    #contact form .form-group,
    #contactForm .form-group {
        margin-bottom: 1rem !important;
        padding: 0 !important;
        width: 100% !important;
    }
    
    /* Form Labels - Clear and Bold */
    #contact .form-group label,
    #contact form label,
    #contactForm label {
        font-size: 0.95rem !important;
        margin-bottom: 0.5rem !important;
        display: block !important;
        font-weight: 600 !important;
        color: #111827 !important;
        padding: 0 !important;
    }
    
    /* Input Fields - Full Width, Touch Friendly */
    #contact input[type="text"],
    #contact input[type="email"],
    #contact input[type="tel"],
    #contact textarea,
    #contactForm input[type="text"],
    #contactForm input[type="email"],
    #contactForm input[type="tel"],
    #contactForm textarea {
        width: 100% !important;
        padding: 1rem 1rem !important;
        padding-right: 3rem !important;
        font-size: 1rem !important;
        line-height: 1.5 !important;
        min-height: 54px !important;
        height: 54px !important;
        border-radius: 12px !important;
        border: 2px solid #E5E7EB !important;
        background-color: #F9FAFB !important;
        box-sizing: border-box !important;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
        display: block !important;
        margin: 0 !important;
    }
    
    /* Textarea - Larger Height */
    #contact textarea,
    #contactForm textarea {
        min-height: 140px !important;
        height: 140px !important;
        resize: vertical !important;
        padding: 1rem !important;
        padding-right: 1rem !important;
    }
    
    /* Focus States - Brand Colors */
    #contact input:focus,
    #contact textarea:focus,
    #contactForm input:focus,
    #contactForm textarea:focus {
        outline: none !important;
        border-color: #E62727 !important;
        box-shadow: 0 0 0 3px rgba(230, 39, 39, 0.1) !important;
        background-color: #ffffff !important;
    }
    
    /* Input Wrapper - Relative Container */
    #contact .relative,
    #contactForm .relative {
        width: 100% !important;
        position: relative !important;
    }
    
    /* Input Icons - Right Aligned */
    #contact .relative .absolute,
    #contactForm .relative .absolute {
        position: absolute !important;
        right: 1rem !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        pointer-events: none !important;
        display: flex !important;
        align-items: center !important;
    }
    
    #contact .relative .absolute i,
    #contactForm .relative .absolute i {
        font-size: 1rem !important;
        color: #9CA3AF !important;
    }
    
    /* Grid Layout - Stack All Fields Vertically */
    #contact .grid.md\\:grid-cols-2,
    #contact form > .grid,
    #contactForm > .grid {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 0 !important;
    }
    
    #contact .grid .form-group,
    #contactForm .grid .form-group {
        width: 100% !important;
        margin-bottom: 1rem !important;
    }
    
    /* Submit Button - Full Width, Prominent */
    #contact button[type="submit"],
    #contactForm button[type="submit"] {
        width: 100% !important;
        padding: 1.125rem 1.5rem !important;
        margin-top: 0.25rem !important;
        margin-bottom: 0 !important;
        font-size: 1.05rem !important;
        font-weight: 700 !important;
        min-height: 56px !important;
        height: 56px !important;
        border-radius: 12px !important;
        border: none !important;
        background: linear-gradient(135deg, #E62727 0%, #FF4A4A 100%) !important;
        color: #ffffff !important;
        box-shadow: 0 4px 12px rgba(230, 39, 39, 0.3) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transition: all 0.3s ease !important;
        cursor: pointer !important;
        -webkit-tap-highlight-color: rgba(230, 39, 39, 0.2) !important;
    }
    
    #contact button[type="submit"]:active,
    #contactForm button[type="submit"]:active {
        transform: scale(0.97) !important;
        box-shadow: 0 2px 8px rgba(230, 39, 39, 0.4) !important;
    }
    
    /* Remove Tailwind Space-y Classes */
    #contact form.space-y-6,
    #contact .space-y-6,
    #contactForm.space-y-6 {
        display: block !important;
    }
    
    #contact .space-y-6 > *,
    #contact form > * {
        margin-top: 0 !important;
    }
    
    /* Placeholder Text */
    #contact input::placeholder,
    #contact textarea::placeholder,
    #contactForm input::placeholder,
    #contactForm textarea::placeholder {
        color: #9CA3AF !important;
        opacity: 1 !important;
        font-size: 0.95rem !important;
    }
    
    /* Touch Highlight */
    #contact input,
    #contact textarea,
    #contact button {
        -webkit-tap-highlight-color: rgba(230, 39, 39, 0.1) !important;
    }
    
    /* Validation States */
    #contact input.error,
    #contact textarea.error {
        border-color: #EF4444 !important;
        box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
    }
    
    #contact input.success,
    #contact textarea.success {
        border-color: #10B981 !important;
        box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1) !important;
    }
    
    /* Hide Contact Information Section on Mobile */
    #contact .space-y-8,
    #contact .grid.lg\\:grid-cols-2 > div:last-child {
        display: none !important;
    }
    
    /* Contact Information Cards Mobile */
    #contact .space-y-6 > div {
        padding: 1.5rem !important;
        margin-bottom: 1rem !important;
    }
    
    #contact .space-y-6 h4 {
        font-size: 1.25rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    #contact .space-y-6 p {
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
    }
    
    /* Contact Info Icons Mobile */
    #contact .space-y-6 .w-14 {
        width: 3rem !important;
        height: 3rem !important;
    }
    
    #contact .space-y-6 .w-14 i {
        font-size: 1.25rem !important;
    }
    
    /* Map Section Mobile */
    #contact .bg-white.rounded-2xl {
        margin-bottom: 2rem !important;
    }
    
    #contact .bg-white.rounded-2xl .h-64 {
        height: 12rem !important;
    }
    
    /* Quick Action Buttons Mobile */
    #contact .grid.grid-cols-2 {
        gap: 1rem !important;
    }
    
    #contact .grid.grid-cols-2 a {
        padding: 0.875rem 1rem !important;
        font-size: 0.9rem !important;
        text-align: center !important;
    }
    
    .contact-mobile .grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 2rem !important;
    }
    
    .contact-info-mobile .contact-item {
        flex-direction: column !important;
        text-align: center !important;
        padding: 1rem !important;
        margin-bottom: 1rem !important;
    }
    
    .contact-info-mobile .contact-icon {
        margin: 0 auto 0.5rem !important;
    }
    
    .contact-form-mobile {
        padding: 1.5rem !important;
    }
    
    .contact-form-mobile .form-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
    }
    
    /* Footer Mobile */
    .footer-mobile {
        padding: 2rem 1rem !important;
    }
    
    .footer-mobile .grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 2rem !important;
        text-align: center !important;
    }
    
    .footer-mobile .social-links {
        justify-content: center !important;
        margin-top: 1rem !important;
    }
}

/* Small Devices (landscape phones, 576px and up) */
@media (min-width: 481px) and (max-width: 767px) {
    /* Navigation */
    .nav-container {
        padding: 0 1.5rem !important;
    }
    
    /* Hero Section */
    .hero-section {
        padding: 5rem 1.5rem 4rem !important;
    }
    
    .hero-section h1 {
        font-size: 3rem !important;
    }
    
    .hero-buttons {
        flex-direction: row !important;
        justify-content: center !important;
        gap: 1rem !important;
    }
    
    
    
    /* About */
    .about-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }
    
    /* Contact */
    .contact-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }
    
    /* Footer */
    .footer-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 2rem !important;
    }
}

/* Medium Devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991px) {
    /* Navigation */
    .nav-container {
        padding: 0 2rem !important;
    }
    
    /* Hero Section */
    .hero-section {
        padding: 6rem 2rem 5rem !important;
    }
    
    .hero-section h1 {
        font-size: 3.5rem !important;
    }
    
    
    
    /* About */
    .about-grid {
        grid-template-columns: 1fr !important;
        gap: 3rem !important;
    }
    
    /* Contact */
    .contact-grid {
        grid-template-columns: 1fr !important;
        gap: 3rem !important;
    }
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets */
    button, a, input, select, textarea {
        min-height: 44px !important;
        min-width: 44px !important;
    }
    
    /* Remove hover effects on touch devices */
    .hover\:scale-105:hover {
        transform: none !important;
    }
    
    .hover\:bg-gray-100:hover {
        background-color: inherit !important;
    }
    
    .card-hover:hover {
        transform: none !important;
        box-shadow: inherit !important;
    }
    
    /* Touch-friendly slider */
    .slider-container {
        touch-action: pan-x !important;
    }
    
    /* Touch-friendly navigation */
    .nav-link {
        padding: 1rem !important;
    }
}

/* High DPI Display Optimizations */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Crisp borders and shadows */
    .border {
        border-width: 0.5px !important;
    }
    
    .shadow-lg {
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
    }
}

/* Landscape Orientation Adjustments */
@media (orientation: landscape) and (max-height: 500px) {
    /* Reduce hero section height in landscape */
    .hero-section {
        padding: 2rem 1rem !important;
    }
    
    .hero-section h1 {
        font-size: 2rem !important;
        margin-bottom: 1rem !important;
    }
    
    .hero-section p {
        font-size: 1rem !important;
        margin-bottom: 1rem !important;
    }
    
    /* Adjust slider height */
    .slider-container {
        height: 200px !important;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    /* Auto-adjust for dark mode preference */
    .auto-dark {
        background-color: #1a202c !important;
        color: #e2e8f0 !important;
    }
    
    .auto-dark .bg-white {
        background-color: #2d3748 !important;
        color: #e2e8f0 !important;
    }
    
    .auto-dark .text-gray-900 {
        color: #e2e8f0 !important;
    }
    
    .auto-dark .text-gray-600 {
        color: #a0aec0 !important;
    }
}

/* Reduced Motion Preferences */
@media (prefers-reduced-motion: reduce) {
    /* Disable animations for users who prefer reduced motion */
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .animate-fade-in,
    .animate-slide-up,
    .animate-bounce-in,
    .animate-pulse-custom,
    .animate-float {
        animation: none !important;
    }
}

/* Print Styles for Mobile */
@media print {
    /* Hide navigation and interactive elements */
    nav, .no-print, button, .slider-container {
        display: none !important;
    }
    
    /* Optimize for print */
    body {
        font-size: 12pt !important;
        line-height: 1.4 !important;
        color: black !important;
        background: white !important;
    }
    
    h1, h2, h3 {
        page-break-after: avoid !important;
    }
    
    .hero-section {
        background: white !important;
        color: black !important;
        padding: 1rem !important;
    }
}

/* Accessibility Improvements */
@media (prefers-contrast: high) {
    /* High contrast mode adjustments */
    .text-gray-600 {
        color: #000000 !important;
    }
    
    .text-gray-400 {
        color: #333333 !important;
    }
    
    .border-gray-300 {
        border-color: #000000 !important;
    }
    
    .bg-gray-50 {
        background-color: #ffffff !important;
    }
}

/* Logo Mobile Styling */
@media (max-width: 768px) {
    /* Navigation Logo Mobile */
    nav .logo {
        max-height: 35px !important;
    }
    
    /* Footer Logo Mobile */
    footer .logo {
        max-height: 50px !important;
    }
    
    /* About Section Logo Mobile */
    #about .logo {
        max-height: 40px !important;
    }
}

/* Focus Improvements for Mobile */
@media (max-width: 768px) {
    /* Better focus indicators for mobile */
    button:focus,
    a:focus,
    input:focus,
    select:focus,
    textarea:focus {
        outline: 3px solid #E62727 !important;
        outline-offset: 2px !important;
    }
    
    /* Larger focus areas for touch */
    .focus-target {
        padding: 0.5rem !important;
        margin: -0.5rem !important;
        border-radius: 4px !important;
    }
}

/* ========================================
   WE HIRE / OUR SERVICES SECTION - MOBILE APP UI/UX
   ======================================== */

/* Force 2 columns on mobile - MUST override Tailwind */
/* This targets ALL possible grid combinations in the we-hire-section */
@media (max-width: 768px) {
    /* CRITICAL: Override Tailwind's responsive grid classes for mobile - Multiple selector variations */
    .we-hire-section div.we-hire-grid,
    .we-hire-section .we-hire-grid,
    .we-hire-section div[class*="grid"][class*="md:grid-cols"],
    .we-hire-section div[class*="grid"][class*="lg:grid-cols"],
    .we-hire-section [class*="we-hire-grid"][class*="grid"],
    .we-hire-section [class*="grid"][class*="md:grid-cols-2"][class*="lg:grid-cols-4"],
    /* Target all grid divs in we-hire-section */
    .we-hire-section div[class*="grid"] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        -ms-grid-columns: 1fr 0.5rem 1fr !important; /* IE11 fallback */
        column-gap: 0.5rem !important;
        row-gap: 0.5rem !important;
    }
}

@media (max-width: 768px) {
    /* We Hire Section Container - Minimal Padding */
    .we-hire-section {
        padding: 1.5rem 0.5rem !important;
    }
    
    /* Section Container - Remove Extra Padding */
    .we-hire-section .max-w-7xl {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
    
    /* Section Header Mobile - Compact */
    .we-hire-section .text-center.mb-16 {
        margin-bottom: 1rem !important;
        padding: 0 !important;
    }
    
    .we-hire-section .text-center .w-20 {
        width: 3rem !important;
        height: 3rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .we-hire-section .text-center h2 {
        font-size: 1.5rem !important;
        margin-bottom: 0.25rem !important;
        line-height: 1.2 !important;
    }
    
    .we-hire-section .text-center p {
        font-size: 0.85rem !important;
        line-height: 1.3 !important;
        padding: 0 !important;
        margin-bottom: 0 !important;
    }
    
    /* Force 2 columns on mobile - Mobile App Style Grid - ULTRA AGGRESSIVE */
    /* Target the grid container directly in we-hire-section - Multiple selectors for maximum coverage */
    section.we-hire-section .we-hire-grid.grid,
    section.we-hire-section div.we-hire-grid,
    section.we-hire-section .we-hire-grid,
    .we-hire-section .we-hire-grid,
    .we-hire-section > div.max-w-7xl > div.grid,
    .we-hire-section .max-w-7xl .grid,
    .we-hire-section .max-w-7xl div.grid,
    .we-hire-section .grid[class*="grid-cols"],
    .we-hire-section .grid.md\\:grid-cols-2,
    .we-hire-section .grid.md\\:grid-cols-2.lg\\:grid-cols-4,
    .we-hire-section .grid.gap-8,
    .we-hire-section div[class*="grid"],
    .we-hire-section .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        -ms-grid-columns: 1fr 0.5rem 1fr !important; /* IE11 */
        gap: 0.5rem !important;
        column-gap: 0.5rem !important;
        row-gap: 0.5rem !important;
        padding: 0 !important;
        margin: 0 !important;
        display: grid !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Additional override for Tailwind responsive classes on mobile */
    .we-hire-section .grid[class*="md:grid-cols"],
    .we-hire-section div[class*="grid"][class*="md:grid-cols"],
    .we-hire-section [class*="grid"][class*="gap"] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.5rem !important;
    }
    
    /* Ensure child elements take proper width and don't overflow */
    .we-hire-section .we-hire-grid > div,
    .we-hire-section .grid > div.group,
    .we-hire-section .grid > div {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
    
    /* Service Cards - Mobile App Style */
    .we-hire-section .group.bg-white.rounded-2xl {
        margin: 0 !important;
        border-radius: 1rem !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05) !important;
        border: 1px solid rgba(0, 0, 0, 0.05) !important;
        overflow: hidden !important;
        background: white !important;
        transition: all 0.2s ease !important;
    }
    
    /* Card Active/Press Effect - Mobile App Style */
    .we-hire-section .group.bg-white.rounded-2xl:active {
        transform: scale(0.98) !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1) !important;
    }
    
    /* Image Container - Compact Height */
    .we-hire-section .relative.h-64 {
        height: 140px !important;
        min-height: 140px !important;
    }
    
    /* Image Overlay - Less Opacity for Mobile */
    .we-hire-section .absolute.inset-0.bg-gradient-to-t {
        opacity: 0.5 !important;
    }
    
    /* Active Badge - Smaller */
    .we-hire-section .absolute.top-4.right-4 > div {
        padding: 0.25rem 0.5rem !important;
        font-size: 0.65rem !important;
        border-radius: 0.5rem !important;
        font-weight: 600 !important;
    }
    
    .we-hire-section .absolute.top-4.right-4 i {
        font-size: 0.6rem !important;
        margin-right: 0.15rem !important;
    }
    
    /* Icon Container - Smaller */
    .we-hire-section .absolute.bottom-4.left-4 .w-12 {
        width: 2.5rem !important;
        height: 2.5rem !important;
        margin-bottom: 0.5rem !important;
        border-radius: 0.75rem !important;
    }
    
    .we-hire-section .absolute.bottom-4.left-4 .w-12 i {
        font-size: 1.25rem !important;
    }
    
    /* Title and Subtitle - Compact Mobile App Style */
    .we-hire-section .absolute.bottom-4.left-4 h3 {
        font-size: 1rem !important;
        font-weight: 700 !important;
        margin-bottom: 0.15rem !important;
        line-height: 1.2 !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
    }
    
    .we-hire-section .absolute.bottom-4.left-4 p {
        font-size: 0.7rem !important;
        opacity: 0.95 !important;
        line-height: 1.2 !important;
        font-weight: 500 !important;
    }
    
    /* Card Content Area - Hide Description on Mobile */
    .we-hire-section .group.bg-white.rounded-2xl .p-6 {
        padding: 0 !important;
        display: none !important;
    }
    
    /* Hide Description Text Completely */
    .we-hire-section .p-6 p.text-gray-600 {
        display: none !important;
    }
    
    /* Hide Learn More Link */
    .we-hire-section .flex.items-center.text-hirway-red,
    .we-hire-section .flex.items-center.text-hirway-dark-blue,
    .we-hire-section .flex.items-center.text-green-600,
    .we-hire-section .flex.items-center.text-yellow-600,
    .we-hire-section .flex.items-center.text-blue-600,
    .we-hire-section .flex.items-center.text-purple-600,
    .we-hire-section .flex.items-center.text-indigo-600,
    .we-hire-section .flex.items-center.text-teal-600 {
        display: none !important;
    }
    
    /* Hide Call to Action Banner on Mobile - Clean Mobile App UI */
    /* Hide the entire CTA container that appears after the cards */
    .we-hire-section .text-center.mt-16,
    .we-hire-section > .max-w-7xl > .text-center.mt-16,
    .we-hire-section .max-w-7xl .text-center.mt-16,
    .we-hire-section div.text-center[class*="mt-16"],
    .we-hire-section .bg-gradient-to-r.from-hirway-red.to-hirway-dark-blue {
        display: none !important;
        visibility: hidden !important;
    }
    
    /* Remove hover scale on mobile */
    .we-hire-section .group:hover {
        transform: none !important;
    }
    
    /* Image hover scale - disable on mobile */
    .we-hire-section .group img.group-hover\\:scale-110 {
        transition: none !important;
    }
    
    .we-hire-section .group:hover img {
        transform: none !important;
    }
}

/* Extra Small Devices - Adjust for very small screens */
@media (max-width: 480px) {
    /* CRITICAL: Force 2 columns even on very small screens */
    .we-hire-section div[class*="grid"],
    .we-hire-section .grid,
    .we-hire-section .we-hire-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.375rem !important;
        column-gap: 0.375rem !important;
        row-gap: 0.5rem !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Section padding even smaller */
    .we-hire-section {
        padding: 1rem 0.375rem !important;
    }
    
    .we-hire-section .max-w-7xl {
        padding-left: 0.375rem !important;
        padding-right: 0.375rem !important;
    }
}

@media (max-width: 360px) {
    /* Tighter spacing for very small screens */
    .we-hire-section .grid,
    .we-hire-section .we-hire-grid {
        gap: 0.25rem !important;
        column-gap: 0.25rem !important;
        row-gap: 0.375rem !important;
        padding: 0 !important;
    }
    
    /* Ensure 2 columns maintained */
    .we-hire-section div[class*="grid"],
    .we-hire-section .grid,
    .we-hire-section .we-hire-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    
    .we-hire-section .relative.h-64 {
        height: 120px !important;
        min-height: 120px !important;
    }
    
    .we-hire-section .absolute.bottom-4.left-4 h3 {
        font-size: 0.9rem !important;
    }
    
    .we-hire-section .absolute.bottom-4.left-4 p {
        font-size: 0.65rem !important;
    }
    
    .we-hire-section .absolute.bottom-4.left-4 .w-12 {
        width: 2rem !important;
        height: 2rem !important;
    }
    
    .we-hire-section .absolute.bottom-4.left-4 .w-12 i {
        font-size: 1rem !important;
    }
}

/* ========================================
   SELECTION PROCESS SECTION - MOBILE OPTIMIZATION
   ======================================== */
@media (max-width: 768px) {
    /* Selection Process Section Container - Minimal Side Margins */
    .selection-process-section {
        padding: 1.5rem 0.5rem !important;
    }
    
    /* Container - Remove Extra Padding */
    .selection-process-section .max-w-7xl {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
    
    /* Section Header Mobile - Compact */
    .selection-process-section .text-center.mb-16 {
        margin-bottom: 1.5rem !important;
        padding: 0 !important;
    }
    
    .selection-process-section .text-center .w-20 {
        width: 3rem !important;
        height: 3rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .selection-process-section .text-center h2 {
        font-size: 1.5rem !important;
        margin-bottom: 0.25rem !important;
        line-height: 1.2 !important;
        padding: 0 0.25rem !important;
    }
    
    .selection-process-section .text-center p {
        font-size: 0.85rem !important;
        line-height: 1.4 !important;
        padding: 0 0.25rem !important;
        margin-bottom: 0 !important;
    }
    
    /* Mobile Timeline Container - Full Width */
    .selection-process-section .md\\:hidden.space-y-6 {
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Mobile Timeline Steps - Compact Spacing */
    .selection-process-section .md\\:hidden.space-y-6 > div {
        margin-bottom: 1rem !important;
        padding-left: 2rem !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Timeline Line - Optimized Position */
    .selection-process-section .absolute.left-0[class*="w-0"] {
        width: 2.5px !important;
        left: 0.5rem !important;
    }
    
    .selection-process-section .relative.pl-8 > .absolute {
        width: 2.5px !important;
        left: 0.5rem !important;
    }
    
    /* Step Number Circle - Smaller */
    .selection-process-section .w-12.h-12 {
        width: 2rem !important;
        height: 2rem !important;
        position: absolute !important;
        left: 0 !important;
        top: 0.5rem !important;
    }
    
    .selection-process-section .w-12.h-12 span {
        font-size: 0.9rem !important;
    }
    
    /* Mobile Card Styling - Minimal Margins */
    .selection-process-section .bg-white.rounded-xl {
        padding: 0.875rem !important;
        margin-left: 0.375rem !important;
        margin-right: 0 !important;
        border-radius: 0.75rem !important;
    }
    
    /* Step Title Mobile */
    .selection-process-section .md\\:hidden h3 {
        font-size: 0.95rem !important;
        margin-bottom: 0.375rem !important;
        line-height: 1.3 !important;
    }
    
    /* Step Description Mobile */
    .selection-process-section .md\\:hidden p.text-gray-600 {
        font-size: 0.8rem !important;
        line-height: 1.4 !important;
    }
    
    /* Step Icon Mobile */
    .selection-process-section .md\\:hidden i.fas {
        font-size: 0.9rem !important;
    }
    
    /* Flex Container - Remove Extra Spacing */
    .selection-process-section .flex.items-start.space-x-4 {
        gap: 0.75rem !important;
    }
    
    /* Call to Action Banner Mobile - Full Width, Minimal Margins */
    .selection-process-section .text-center.mt-16 {
        margin-top: 1.5rem !important;
        padding: 0 !important;
    }
    
    .selection-process-section .bg-gradient-to-r.from-hirway-red.to-hirway-dark-blue {
        padding: 1.25rem 0.75rem !important;
        margin-top: 1.5rem !important;
        border-radius: 0.875rem !important;
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .selection-process-section .bg-gradient-to-r.from-hirway-red.to-hirway-dark-blue h3 {
        font-size: 1.1rem !important;
        margin-bottom: 0.5rem !important;
        line-height: 1.3 !important;
    }
    
    .selection-process-section .bg-gradient-to-r.from-hirway-red.to-hirway-dark-blue p {
        font-size: 0.8rem !important;
        margin-bottom: 0.875rem !important;
        line-height: 1.4 !important;
    }
    
    .selection-process-section .bg-gradient-to-r.from-hirway-red.to-hirway-dark-blue .flex {
        flex-direction: column !important;
        gap: 0.625rem !important;
        width: 100% !important;
    }
    
    .selection-process-section .bg-gradient-to-r.from-hirway-red.to-hirway-dark-blue a {
        width: 100% !important;
        padding: 0.75rem 0.875rem !important;
        font-size: 0.85rem !important;
        border-radius: 0.625rem !important;
        font-weight: 600 !important;
        text-align: center !important;
    }
}

/* Extra Small Devices - Selection Process - Even More Compact */
@media (max-width: 480px) {
    .selection-process-section {
        padding: 1.25rem 0.375rem !important;
    }
    
    .selection-process-section .max-w-7xl {
        padding-left: 0.375rem !important;
        padding-right: 0.375rem !important;
    }
    
    .selection-process-section .text-center h2 {
        font-size: 1.35rem !important;
        padding: 0 0.125rem !important;
    }
    
    .selection-process-section .md\\:hidden.space-y-6 > div {
        padding-left: 1.75rem !important;
        margin-bottom: 0.875rem !important;
    }
    
    .selection-process-section .absolute.left-0[class*="w-0"],
    .selection-process-section .relative.pl-8 > .absolute {
        left: 0.375rem !important;
        width: 2px !important;
    }
    
    .selection-process-section .w-12.h-12 {
        width: 1.75rem !important;
        height: 1.75rem !important;
    }
    
    .selection-process-section .w-12.h-12 span {
        font-size: 0.8rem !important;
    }
    
    .selection-process-section .bg-white.rounded-xl {
        padding: 0.75rem !important;
        margin-left: 0.25rem !important;
    }
    
    .selection-process-section .md\\:hidden h3 {
        font-size: 0.9rem !important;
    }
    
    .selection-process-section .md\\:hidden p.text-gray-600 {
        font-size: 0.75rem !important;
    }
    
    .selection-process-section .bg-gradient-to-r.from-hirway-red.to-hirway-dark-blue {
        padding: 1rem 0.625rem !important;
    }
    
    .selection-process-section .bg-gradient-to-r.from-hirway-red.to-hirway-dark-blue h3 {
        font-size: 1rem !important;
    }
    
    .selection-process-section .bg-gradient-to-r.from-hirway-red.to-hirway-dark-blue p {
        font-size: 0.75rem !important;
    }
    
    .selection-process-section .bg-gradient-to-r.from-hirway-red.to-hirway-dark-blue a {
        padding: 0.625rem 0.75rem !important;
        font-size: 0.8rem !important;
    }
}

/* ========================================
   WHY RECRUITERS TRUST US SECTION - BEAUTIFUL MOBILE FIRST UI
   ======================================== */
@media (max-width: 768px) {
    /* Recruiters Trust Section Container - Beautiful Spacing */
    .recruiters-trust-section {
        padding: 2rem 0.75rem !important;
        background: linear-gradient(to bottom, #ffffff 0%, #f9fafb 50%, #ffffff 100%) !important;
    }
    
    /* Container - Optimal Padding */
    .recruiters-trust-section .max-w-7xl {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
    
    /* Section Header Mobile - Beautiful Typography */
    .recruiters-trust-section .text-center.mb-16 {
        margin-bottom: 2rem !important;
        padding: 0 0.5rem !important;
    }
    
    .recruiters-trust-section .text-center .w-20 {
        width: 3.5rem !important;
        height: 3.5rem !important;
        margin-bottom: 0.75rem !important;
        box-shadow: 0 4px 12px rgba(230, 39, 39, 0.2) !important;
    }
    
    .recruiters-trust-section .text-center h2 {
        font-size: 1.75rem !important;
        margin-bottom: 0.5rem !important;
        line-height: 1.3 !important;
        padding: 0 !important;
        font-weight: 800 !important;
        letter-spacing: -0.02em !important;
    }
    
    .recruiters-trust-section .text-center p {
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
        padding: 0 !important;
        margin-bottom: 0 !important;
        color: #4B5563 !important;
    }
    
    /* Trusted Partners Section - Beautiful Design */
    .recruiters-trust-section .mb-16 {
        margin-bottom: 2.5rem !important;
        padding: 0 0.25rem !important;
    }
    
    .recruiters-trust-section .mb-16 h3 {
        font-size: 1.35rem !important;
        margin-bottom: 1.25rem !important;
        font-weight: 700 !important;
        color: #111827 !important;
    }
    
    /* Partners Grid - FORCE 3 Columns Layout on Mobile - ULTRA AGGRESSIVE */
    /* Target all possible grid combinations - HIGHEST PRIORITY */
    .recruiters-trust-section .trusted-partners-grid,
    .recruiters-trust-section .trusted-partners-grid.grid,
    .recruiters-trust-section .mb-16 .grid,
    .recruiters-trust-section .mb-16 div[class*="grid"],
    .recruiters-trust-section .grid.grid-cols-2,
    .recruiters-trust-section .grid[class*="grid-cols-2"],
    .recruiters-trust-section .grid[class*="grid-cols-3"],
    .recruiters-trust-section .grid[class*="grid-cols-6"],
    .recruiters-trust-section div.grid[class*="grid-cols"],
    /* Direct class attribute targeting */
    div.trusted-partners-grid.grid[class*="grid-cols-2"],
    div.trusted-partners-grid[class*="grid-cols-2"],
    div.grid.trusted-partners-grid[class*="grid-cols"],
    /* Parent targeting */
    .recruiters-trust-section > div > div.grid,
    .recruiters-trust-section div.mb-16 > div.grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        -ms-grid-columns: 1fr 0.5rem 1fr 0.5rem 1fr !important; /* IE11 */
        column-gap: 0.5rem !important;
        row-gap: 0.5rem !important;
        gap: 0.5rem !important;
        padding: 0 !important;
        margin: 0 !important;
        display: grid !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        /* Override Tailwind responsive classes */
        --tw-grid-cols: 3 !important;
    }
    
    /* Ensure child cards fit in 3 columns */
    .recruiters-trust-section .trusted-partners-grid > div,
    .recruiters-trust-section .mb-16 .grid > div {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
    
    /* Partner Cards - Beautiful Mobile App Style - Optimized for 3 Columns */
    .recruiters-trust-section .bg-white.rounded-xl.shadow-lg {
        padding: 0.875rem 0.5rem !important;
        margin: 0 !important;
        border-radius: 0.875rem !important;
        border: 1px solid rgba(0, 0, 0, 0.06) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04) !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        background: white !important;
    }
    
    /* Card Active Effect */
    .recruiters-trust-section .bg-white.rounded-xl.shadow-lg:active {
        transform: scale(0.97) !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important;
    }
    
    .recruiters-trust-section .bg-white.rounded-xl.shadow-lg .w-12,
    .recruiters-trust-section .bg-white.rounded-xl.shadow-lg [class*="w-12"],
    .recruiters-trust-section .bg-white.rounded-xl.shadow-lg [class*="w-16"] {
        width: 2.5rem !important;
        height: 2.5rem !important;
        margin-bottom: 0.5rem !important;
        border-radius: 0.75rem !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
    }
    
    .recruiters-trust-section .bg-white.rounded-xl.shadow-lg i {
        font-size: 1.25rem !important;
    }
    
    .recruiters-trust-section .bg-white.rounded-xl.shadow-lg h4 {
        font-size: 0.75rem !important;
        line-height: 1.2 !important;
        font-weight: 700 !important;
        color: #111827 !important;
    }
    
    /* Remove hover on mobile */
    .recruiters-trust-section .bg-white.rounded-xl.shadow-lg:hover {
        transform: none !important;
    }
    
    /* What Makes Us Different Section - Beautiful Header */
    .recruiters-trust-section > div > div:not(.mb-16):not(.mt-16) h3 {
        font-size: 1.35rem !important;
        margin-bottom: 1.5rem !important;
        padding: 0 0.25rem !important;
        font-weight: 700 !important;
        color: #111827 !important;
    }
    
    /* Benefits Grid - Beautiful Single Column */
    .recruiters-trust-section .grid.grid-cols-1,
    .recruiters-trust-section .grid[class*="grid-cols-1"] {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
        padding: 0 !important;
    }
    
    /* Benefit Cards - Beautiful Mobile Design */
    .recruiters-trust-section .bg-gradient-to-br.from-white.to-gray-50 {
        padding: 1.25rem !important;
        margin: 0 !important;
        border-radius: 1.125rem !important;
        border: 1px solid rgba(0, 0, 0, 0.05) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 2px 6px rgba(0, 0, 0, 0.04) !important;
        background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%) !important;
        transition: all 0.3s ease !important;
    }
    
    /* Card Press Effect */
    .recruiters-trust-section .bg-gradient-to-br.from-white.to-gray-50:active {
        transform: translateY(2px) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    }
    
    .recruiters-trust-section .bg-gradient-to-br.from-white.to-gray-50 .w-16 {
        width: 3.5rem !important;
        height: 3.5rem !important;
        margin-bottom: 1rem !important;
        border-radius: 1rem !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    }
    
    .recruiters-trust-section .bg-gradient-to-br.from-white.to-gray-50 .w-16 i {
        font-size: 1.75rem !important;
    }
    
    .recruiters-trust-section .bg-gradient-to-br.from-white.to-gray-50 h4 {
        font-size: 1.1rem !important;
        margin-bottom: 0.625rem !important;
        line-height: 1.4 !important;
        font-weight: 700 !important;
        color: #111827 !important;
    }
    
    .recruiters-trust-section .bg-gradient-to-br.from-white.to-gray-50 p {
        font-size: 0.875rem !important;
        line-height: 1.6 !important;
        color: #4B5563 !important;
    }
    
    /* Remove hover on mobile */
    .recruiters-trust-section .bg-gradient-to-br.from-white.to-gray-50:hover {
        transform: none !important;
    }
    
    /* Statistics Banner - Beautiful Mobile Design */
    .recruiters-trust-section .bg-gradient-to-r.from-hirway-red {
        padding: 2rem 1rem !important;
        margin-top: 2rem !important;
        border-radius: 1.25rem !important;
        box-shadow: 0 8px 24px rgba(230, 39, 39, 0.2) !important;
    }
    
    /* Statistics Grid - Beautiful 2x2 Layout */
    .recruiters-trust-section .bg-gradient-to-r.from-hirway-red .grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.25rem !important;
    }
    
    .recruiters-trust-section .bg-gradient-to-r.from-hirway-red .grid > div {
        padding: 0.5rem !important;
    }
    
    .recruiters-trust-section .bg-gradient-to-r.from-hirway-red .text-3xl {
        font-size: 2rem !important;
        margin-bottom: 0.375rem !important;
        font-weight: 800 !important;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    }
    
    .recruiters-trust-section .bg-gradient-to-r.from-hirway-red .text-sm {
        font-size: 0.75rem !important;
        line-height: 1.4 !important;
        font-weight: 500 !important;
        opacity: 0.95 !important;
    }
}

/* Extra Small Devices - Beautiful Compact Design */
@media (max-width: 480px) {
    .recruiters-trust-section {
        padding: 1.75rem 0.5rem !important;
    }
    
    .recruiters-trust-section .max-w-7xl {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
    
    .recruiters-trust-section .text-center h2 {
        font-size: 1.5rem !important;
    }
    
    /* Partners Grid - Beautiful Compact - FORCE 3 Columns */
    .recruiters-trust-section .trusted-partners-grid,
    .recruiters-trust-section .trusted-partners-grid.grid,
    .recruiters-trust-section .mb-16 .grid,
    .recruiters-trust-section .grid.grid-cols-2,
    .recruiters-trust-section .grid[class*="grid-cols-2"],
    .recruiters-trust-section .grid[class*="grid-cols-3"],
    .recruiters-trust-section .grid[class*="grid-cols-6"],
    div.trusted-partners-grid.grid[class*="grid-cols-2"],
    div.grid.trusted-partners-grid[class*="grid-cols"],
    .recruiters-trust-section > div > div.grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        column-gap: 0.375rem !important;
        row-gap: 0.5rem !important;
        gap: 0.5rem !important;
        --tw-grid-cols: 3 !important;
    }
    
    .recruiters-trust-section .bg-white.rounded-xl.shadow-lg {
        padding: 0.75rem 0.375rem !important;
    }
    
    .recruiters-trust-section .bg-white.rounded-xl.shadow-lg .w-12,
    .recruiters-trust-section .bg-white.rounded-xl.shadow-lg [class*="w-12"],
    .recruiters-trust-section .bg-white.rounded-xl.shadow-lg [class*="w-16"] {
        width: 2.25rem !important;
        height: 2.25rem !important;
    }
    
    .recruiters-trust-section .bg-white.rounded-xl.shadow-lg i {
        font-size: 1.1rem !important;
    }
    
    .recruiters-trust-section .bg-white.rounded-xl.shadow-lg h4 {
        font-size: 0.7rem !important;
    }
    
    /* Benefits Cards - Beautiful Compact */
    .recruiters-trust-section .bg-gradient-to-br.from-white.to-gray-50 {
        padding: 1.125rem !important;
    }
    
    .recruiters-trust-section .bg-gradient-to-br.from-white.to-gray-50 .w-16 {
        width: 3rem !important;
        height: 3rem !important;
    }
    
    .recruiters-trust-section .bg-gradient-to-br.from-white.to-gray-50 h4 {
        font-size: 1.05rem !important;
    }
    
    .recruiters-trust-section .bg-gradient-to-br.from-white.to-gray-50 p {
        font-size: 0.825rem !important;
    }
    
    /* Statistics - Beautiful Compact */
    .recruiters-trust-section .bg-gradient-to-r.from-hirway-red {
        padding: 1.75rem 0.875rem !important;
    }
    
    .recruiters-trust-section .bg-gradient-to-r.from-hirway-red .grid {
        gap: 1rem !important;
    }
    
    .recruiters-trust-section .bg-gradient-to-r.from-hirway-red .text-3xl {
        font-size: 1.75rem !important;
    }
    
    .recruiters-trust-section .bg-gradient-to-r.from-hirway-red .text-sm {
        font-size: 0.7rem !important;
    }
}