/* Ensure body and html don't interfere with mobile design */
    /* Match discovery: allow horizontal pan on card/chip rows (mobile-home-2026.css sets up scroll rows). */
    body.mobile-home-active,
    html.mobile-home-active,
    body.home-page,
    html.home-page {
        overflow-x: visible !important;
        overflow-y: auto !important; /* Allow vertical scrolling */
        width: 100% !important;
        max-width: 100% !important;
        position: static !important; /* Static to allow fixed nav to be relative to viewport */
        margin: 0 !important;
        padding: 0 !important;
        height: auto !important; /* Allow height to grow with content */
        min-height: 100vh !important; /* Minimum viewport height */
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 60px !important; /* Space for fixed nav */
        box-sizing: border-box !important;
        /* Ensure no transforms that create new stacking context */
        transform: none !important;
        will-change: auto !important;
    }
    
    /* Force nav to be fixed to viewport (screen) on ALL pages including home */
    /* Use highest z-index to ensure it's always on top */
    body.home-page .mobile-bottom-nav,
    html.home-page .mobile-bottom-nav,
    body.mobile-home-active .mobile-bottom-nav,
    html.mobile-home-active .mobile-bottom-nav,
    body .mobile-bottom-nav,
    html .mobile-bottom-nav,
    .mobile-bottom-nav {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        z-index: 9999 !important; /* Higher z-index to ensure it's always on top */
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: translateZ(0) !important;
        /* Ensure it's relative to viewport, not page - force it */
        position: fixed !important;
        /* Ensure no parent transforms affect it */
        isolation: isolate !important;
    }
    
    /* Hide legacy content when mobile design is active */
    body.mobile-home-active .home-page-content:not(.mobile-home-page),
    body.mobile-home-active .home-background-overlay {
        display: none !important;
    }
    
    /* Ensure mobile design takes full viewport and allows scrolling */
    /* Let mobile-home-2026.css handle .screen sizing - just ensure no constraints */
    .mobile-home-page,
    .screen.mobile-home-page-2026 {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important; /* Allow shrinking to fit any screen */
        overflow-x: visible !important;
        overflow-y: visible !important;
        box-sizing: border-box !important;
        height: auto !important; /* Allow height to grow with content */
        /* Don't set min-height here - let .screen class handle it */
    }
    
    /* Fix for iOS Safari viewport */
    @supports (-webkit-touch-callout: none) {
        .mobile-home-page,
        .screen.mobile-home-page-2026 {
            /* Let .screen class handle min-height */
        }
        
        .mobile-home-frame {
            min-height: -webkit-fill-available;
        }
    }
    
    /* Prevent horizontal scroll on body but allow vertical */
    body {
        overflow-x: hidden !important;
        overflow-y: auto !important; /* Enable vertical scrolling */
        width: 100% !important;
        position: relative !important;
        height: auto !important; /* Allow body to grow with content */
        min-height: 100vh !important; /* Minimum viewport height */
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* Ensure all containers respect viewport */
    .mobile-home-frame,
    .mobile-home-header,
    .mobile-home-main {
        max-width: 100%;
        box-sizing: border-box;
    }
    /* ============================================
       MOBILE-FIRST CSS - COVER UI STYLE
       Clean, optimized, everything visible on mobile
       Scales up beautifully to desktop
       Enterprise-optimized with smooth dynamic scaling
       ============================================ */
    
    /* OPTIMIZED: Only apply transitions to interactive elements, not on initial load */
    /* This prevents resizing animations during page load */
    button, a, .professional-profile-circle, .organization-location-card, .deal-window-card, .card {
        transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease !important;
    }
    
    /* Prevent transitions on initial load - only apply to hover states */
    /* This eliminates resizing animations during page load */
    html:not(.loaded) * {
        transition: none !important;
    }
    
    /* Re-enable transitions after page load for interactive elements only */
    html.loaded button:hover,
    html.loaded a:hover,
    html.loaded .professional-profile-circle:hover,
    html.loaded .organization-location-card:hover,
    html.loaded .deal-window-card:hover {
        transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease !important;
    }
    
    /* ============================================
       BASE: Mobile-First Foundation
       ============================================ */
    
    /* Root container - full width, no overflow - MOBILE FIRST */
    .home-page-content {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important; /* Allow shrinking to fit any screen */
        overflow-x: hidden !important; /* Prevent horizontal scroll */
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important; /* Prevent horizontal scroll */
    }
    
    /* CRITICAL: Ensure full width on small screens (below 900x1000 and 380x850) */
    @media (max-width: 900px) {
        .home-page-content,
        .container-fluid,
        .container,
        main,
        section,
        .categories-section,
        .professionals-section,
        .deals-section,
        .freelancers-section,
        .organizations-locations-section {
            width: 100% !important;
            max-width: 100% !important;
            margin: 0 !important;
            padding-left: 0 !important;
            padding-right: 0 !important;
            transform: none !important; /* No scaling */
        }
    }
    
    /* MOBILE FIRST: Base design - allow full responsive sizing */
    @media (max-width: 400px) {
        /* Ensure no horizontal scroll on small screens */
        .home-page-content {
            overflow-x: hidden !important;
        }
        /* Allow full responsive sizing - no minimum width constraint */
        .home-page-content,
        .container-fluid,
        .container,
        main,
        section,
        .categories-section,
        .professionals-section,
        .deals-section,
        .freelancers-section,
        .organizations-locations-section {
            width: 100% !important; /* Full width on small screens */
            min-width: 0 !important; /* Allow shrinking to fit any screen */
            max-width: 100% !important;
            margin: 0 auto !important; /* Center if viewport is larger */
            padding-left: 0 !important;
            padding-right: 0 !important;
            transform: none !important; /* No scaling */
            box-sizing: border-box !important;
        }
        
        /* Ensure category cards fill edge-to-edge */
        #categoriesScroll {
            padding-left: 0 !important;
            padding-right: 0 !important;
            margin-left: 0 !important;
            margin-right: 0 !important;
            width: 100% !important;
            min-width: 0 !important; /* Allow shrinking to fit any screen */
        }
        
        #categoriesScroll .horizontal-scroll-content {
            padding-left: 0 !important;
            padding-right: 0 !important;
            gap: 4px !important;
        }
        
        .category-item {
            margin-left: 0 !important;
            margin-right: 0 !important;
        }
        
        .category-card-compact {
            padding: 4px 6px !important;
            min-width: 70px !important;
        }
        
        /* Ensure professionals section also fills edge-to-edge */
        #professionalsScroll {
            padding-left: 0 !important;
            padding-right: 0 !important;
            margin-left: 0 !important;
            margin-right: 0 !important;
            width: 100% !important;
            min-width: 0 !important; /* Allow shrinking to fit any screen */
        }
        
        #professionalsScroll .horizontal-scroll-content {
            padding-left: 0 !important;
            padding-right: 0 !important;
            gap: 6px !important;
        }
    }
    
    /* All main sections - full width containers */
    .categories-section,
    .professionals-section,
    .deals-section,
    .freelancers-section,
    .organizations-locations-section {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important; /* Allow shrinking to fit any screen */
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important; /* Prevent horizontal scroll */
        overflow-y: visible !important; /* Allow natural height */
        background: transparent !important; /* Transparent background on all screen sizes */
    }
    
    /* Categories section - transparent background */
    .categories-section {
        background: transparent !important; /* Transparent background */
    }
    
    /* Enhanced Professionals Section - New Design */
    /* MOBILE-FIRST: Reduced top padding to bring closer to categories */
    .enhanced-professionals-section {
        width: 100% !important;
        padding: 10px min(1rem, 4vw) 20px min(1rem, 4vw) !important; /* Reduced top padding - was 20px, now 10px */
        background: transparent !important;
        box-sizing: border-box !important;
        margin-top: 0 !important; /* No top margin */
        display: block !important; /* Ensure it's visible */
        visibility: visible !important; /* Ensure it's visible */
        opacity: 1 !important; /* Ensure it's visible */
    }
    
    .professionals-header-text {
        text-align: center !important;
        margin-bottom: 24px !important;
    }
    
    .professionals-headline {
        font-size: clamp(1.75rem, 5vw, 2.5rem) !important;
        font-weight: 700 !important;
        color: #001f3f !important;
        margin: 0 0 8px 0 !important;
        line-height: 1.2 !important;
    }
    
    .professionals-tagline {
        font-size: clamp(0.9rem, 2.5vw, 1.1rem) !important;
        color: #6c757d !important;
        margin: 0 !important;
        font-weight: 400 !important;
    }
    
    .professional-profile-circle {
        flex-shrink: 0 !important;
        width: 60px !important;
        height: 60px !important;
        border-radius: 50% !important;
        overflow: hidden !important;
        cursor: pointer !important;
        position: relative !important;
        border: 2px solid rgba(0,31,63,0.1) !important;
        transition: all 0.3s ease !important;
    }
    
    .professional-profile-circle:hover {
        transform: scale(1.1) !important;
        border-color: #001f3f !important;
        box-shadow: none !important; /* No shadow on hover */
    }
    
    .professional-profile-circle.active {
        border-color: #001f3f !important;
        border-width: 3px !important;
        box-shadow: none !important; /* No shadow when active */
    }
    
    @media (min-width: 768px) {
        .professional-profile-circle {
            width: 70px !important;
            height: 70px !important;
        }
    }
    
    @media (min-width: 1024px) {
        .professional-profile-circle {
            width: 80px !important;
            height: 80px !important;
        }
    }
    
    .professional-details-card {
        background: #ffffff !important;
        border-radius: 16px !important;
        padding: 20px !important;
        box-shadow: 0 4px 20px rgba(0,0,0,0.1) !important;
        margin-top: 4px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        animation: fadeIn 0.3s ease !important;
    }
    
    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    .professional-details-content {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    
    @media (min-width: 768px) {
        .professional-details-content {
            grid-template-columns: 1fr 1fr !important;
        }
        
        .professional-details-header {
            grid-column: 1 / -1 !important;
        }
    }
    
    .professional-details-media {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    
    @media (min-width: 768px) {
        .professional-details-media {
            grid-template-columns: 1fr 1fr !important;
        }
    }
    
    .professional-details-media img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 12px !important;
    }
    
    .professional-details-services {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }
    
    /* Services grid with horizontal scroll - 2 columns per group that scroll horizontally */
    #detailServicesList {
        display: flex !important;
        flex-direction: row !important;
        gap: 8px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        width: 100% !important;
        max-height: 120px !important;
        align-items: flex-start !important;
    }
    
    /* Each service group (contains 2 services side by side) - same height as portfolio items */
    #detailServicesList .service-group {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        flex: 0 0 calc(50% - 4px) !important;
        min-width: calc(50% - 4px) !important;
        box-sizing: border-box !important;
        height: 120px !important;
        align-content: start !important;
    }
    
    /* Individual service items within a group */
    #detailServicesList .service-group > div {
        min-width: 0 !important;
        height: 50px !important;
    }
    
    /* Empty placeholder div to maintain grid structure */
    #detailServicesList .service-group > div[style*="background: transparent"] {
        height: 50px !important;
    }
    
    .view-all-link {
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
        padding: 0 12px !important;
        color: #001f3f !important;
        text-decoration: none !important;
        font-weight: 500 !important;
        font-size: 0.9rem !important;
        white-space: nowrap !important;
        transition: color 0.3s ease !important;
    }
    
    .view-all-link:hover {
        color: #003366 !important;
        text-decoration: underline !important;
    }
    
    /* Professionals section - professional padding, left aligned */
    .professionals-section {
        padding: 12px 0 !important; /* Professional vertical padding */
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        background: transparent !important;
    }
    
    #professionalsScroll {
        padding: 0 16px !important; /* Professional horizontal padding */
        background: transparent !important;
    }
    
    /* Professional cards - perfect circles, left aligned */
    .professional-card-wrapper,
    .scroll-item.professional-card-item {
        padding: 0 !important; /* No extra padding */
        margin: 0 !important;
        overflow: visible !important; /* Ensure full circle and badges are visible */
        min-height: auto !important; /* Allow natural height */
    }
    
    /* Freelancers section - taller container to remove vertical scroll */
    .freelancers-section .deals-carousel-container {
        min-height: 220px !important; /* Taller to prevent vertical scroll */
        padding: 20px 0 !important; /* Consistent padding - parent handles left/right */
    }
    
    /* Freelancers section wrapper - consistent padding */
    .freelancers-section {
        padding: 0 16px !important;
    }
    
    /* Organizations section - consistent padding */
    .organizations-locations-section {
        padding: 0 16px !important;
    }
    
    /* Fix text cutoff in organization/location cards */
    .organization-location-card {
        overflow: visible !important;
    }
    
    .organization-location-card .card-body {
        overflow: visible !important;
        min-height: auto !important;
        padding-bottom: 12px !important; /* Add bottom padding to prevent text cutoff */
    }
    
    .organization-location-card .org-loc-title,
    .organization-location-card .org-loc-text {
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        line-height: 1.3 !important;
    }
    
    /* Ensure card body can expand to show all text */
    .organization-location-card .card-body > div {
        overflow: visible !important;
        min-height: auto !important;
    }
    
    /* Remove vertical scroll from freelance section cards */
    .freelancers-section .card {
        overflow-y: visible !important;
        height: auto !important;
        max-height: none !important;
    }
    
    .freelancers-section .card-body {
        overflow-y: visible !important;
        max-height: none !important;
    }
    
    /* Horizontal scroll containers - full width with professional padding - MOBILE FIRST */
    .horizontal-scroll-container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 16px !important; /* Professional padding - consistent across all screens */
        margin: 0 !important;
        box-sizing: border-box !important;
        overflow-x: auto !important;
        overflow-y: hidden !important; /* No vertical scroll */
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none; /* Hide scrollbar */
        -ms-overflow-style: none;
        background: transparent !important; /* Transparent background */
    }
    
    /* Bootstrap containers - full width, no constraints - MOBILE FIRST */
    .home-page-content .container-fluid,
    .home-page-content .container,
    .home-page-content .row,
    .home-page-content .col-12,
    .home-page-content [class*="col-"],
    .categories-section .row,
    .categories-section .col-12,
    .professionals-section .row,
    .professionals-section .col-12,
    .deals-section .row,
    .deals-section .col-12,
    .freelancers-section .row,
    .freelancers-section .col-12,
    .organizations-locations-section .row,
    .organizations-locations-section .col-12 {
        width: 100% !important;
        max-width: 100% !important;
            min-width: 0 !important; /* Allow shrinking to fit any screen */
        margin: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }
    
    /* Row - no negative margins, full width */
    .home-page-content .row,
    .categories-section .row,
    .professionals-section .row,
    .deals-section .row,
    .freelancers-section .row,
    .organizations-locations-section .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
            min-width: 0 !important; /* Allow shrinking to fit any screen */
    }
    
    /* Columns - full width by default */
    .home-page-content .col-12,
    .home-page-content [class*="col-"],
    .categories-section .col-12,
    .professionals-section .col-12,
    .deals-section .col-12,
    .freelancers-section .col-12,
    .organizations-locations-section .col-12 {
        width: 100% !important;
        max-width: 100% !important;
            min-width: 0 !important; /* Allow shrinking to fit any screen */
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    .horizontal-scroll-container::-webkit-scrollbar {
        display: none !important; /* Hide scrollbar */
    }
    
    /* Ensure horizontal scroll works for category pills */
    .home-search-bar-dark .horizontal-scroll-container {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .home-search-bar-dark .horizontal-scroll-content {
        min-width: min-content !important;
        width: max-content !important;
        flex-wrap: nowrap !important;
    }
    
    /* Hide all vertical scrollbars completely */
    * {
        scrollbar-width: thin; /* Firefox - thin scrollbar */
        scrollbar-color: transparent transparent; /* Firefox - invisible */
    }
    
    *::-webkit-scrollbar {
        width: 0px !important; /* Chrome/Safari - no width */
        height: 0px !important; /* Chrome/Safari - no height */
        display: none !important; /* Hide completely */
    }
    
    *::-webkit-scrollbar-track {
        background: transparent !important; /* Transparent track */
    }
    
    *::-webkit-scrollbar-thumb {
        background: transparent !important; /* Transparent thumb */
    }
    
    /* Ensure all containers with horizontal scroll have no vertical scroll */
    .horizontal-scroll-container,
    #professionalsScroll,
    #categoriesScroll,
    .deals-carousel-container,
    .services-scroll-container {
        overflow-y: hidden !important; /* No vertical scroll */
        scrollbar-width: none !important; /* Firefox - no scrollbar */
        -ms-overflow-style: none !important; /* IE/Edge - no scrollbar */
    }
    
    .horizontal-scroll-container::-webkit-scrollbar,
    #professionalsScroll::-webkit-scrollbar,
    #categoriesScroll::-webkit-scrollbar,
    .deals-carousel-container::-webkit-scrollbar,
    .services-scroll-container::-webkit-scrollbar {
        display: none !important; /* Hide completely */
        width: 0 !important;
        height: 0 !important;
    }
    
    .horizontal-scroll-content {
        display: flex;
        gap: 8px; /* Smaller gap - professionals closer together */
        width: 100% !important; /* Match container width to show multiple items */
        min-width: 100% !important; /* Ensure it matches parent container */
        flex-shrink: 0;
        align-items: flex-start; /* Left align, not center */
        box-sizing: border-box !important;
    }
    
    /* Ensure professionals and categories scroll content matches parent exactly */
    #professionalsScroll .horizontal-scroll-content {
        width: max-content !important; /* Allow content to extend beyond viewport for horizontal scroll */
        min-width: 100% !important; /* At least match parent width */
        max-width: none !important; /* Remove max-width restriction */
        justify-content: flex-start !important; /* Left align professionals */
        align-items: center !important; /* Center vertically */
    }
    
    #categoriesScroll .horizontal-scroll-content {
        width: max-content !important; /* Allow content to extend beyond viewport for horizontal scroll */
        min-width: 100% !important; /* At least match parent width */
        max-width: none !important; /* Remove max-width restriction */
        justify-content: center !important; /* Center align categories */
    }
    
    /* Ensure horizontal scroll works properly */
    #professionalsScroll,
    #categoriesScroll {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* Images inside horizontal scroll content should be 100% width */
    .horizontal-scroll-content img,
    .horizontal-scroll-content .professional-image,
    .horizontal-scroll-content .professional-image img,
    .horizontal-scroll-content .deal-image-container img,
    .horizontal-scroll-content .category-content img {
        width: 100% !important;
        height: auto !important;
    }
    
    /* Professionals scroll - left aligned with perfect circles */
    #professionalsScroll .horizontal-scroll-content {
        gap: 8px !important; /* Professional gap */
        justify-content: flex-start !important; /* Left align professionals */
        align-items: center !important; /* Center vertically */
    }
    
    /* ============================================
       MOBILE-FIRST: Base Sizes (Default)
       Base design optimized for 380x850 viewport
       All sizes below are for 380px width minimum
       ============================================ */
    
    /* Categories - Mobile First - 50% smaller, closer to avatar */
    .category-card-compact {
        width: auto !important; /* Auto width to fit content */
        min-width: 40px !important; /* 50% smaller: was 80px, now 40px */
        max-width: none !important; /* Allow expansion for text */
        padding: 3px 4px !important; /* 50% smaller: was 5px 8px, now 3px 4px */
        gap: 2px !important; /* 50% smaller: was 3px, now 2px */
        flex-shrink: 0 !important; /* Don't shrink below minimum */
        overflow: visible !important; /* Allow text to be visible */
        overflow-y: hidden !important; /* No vertical scroll */
        overflow-x: visible !important; /* No horizontal scroll on individual items */
        height: auto !important; /* Auto height */
        min-height: auto !important;
        max-height: none !important;
        background: transparent !important; /* Transparent background instead of white */
        font-size: 0.5rem !important; /* 50% smaller font */
    }
    
    /* Category wrapper - also transparent */
    .category-wrapper {
        background: transparent !important;
    }
    
    /* Remove vertical scroll from category content inner containers - horizontal layout */
    .category-content {
        overflow-y: hidden !important; /* No vertical scroll */
        overflow-x: hidden !important;
        height: 100% !important; /* Fill container */
        max-height: 100% !important; /* Fit container */
        display: flex !important;
        flex-direction: row !important; /* Horizontal - icon next to text (left of text) */
        align-items: center !important; /* Center vertically */
        justify-content: flex-start !important; /* Left align horizontally */
        position: relative !important; /* Fix position */
        gap: 6px !important; /* Gap between icon and text */
        background: transparent !important; /* Transparent background */
    }
    
    /* Remove vertical scroll from category wrapper and card */
    .category-wrapper,
    .category-card-compact {
        overflow-y: hidden !important; /* No vertical scroll */
        overflow-x: hidden !important;
        height: 100px !important; /* Fixed height */
        max-height: none !important; /* Mobile-first: auto height */
        height: auto !important;
    }
    
    /* Categories scroll container - horizontal only, fixed vertical position - SINGLE CONTAINER */
    /* MOBILE-FIRST: Reduced spacing, closer to avatar */
    #categoriesScroll {
        overflow-y: hidden !important; /* No vertical scroll */
        overflow-x: auto !important; /* Horizontal scroll only - SINGLE CONTAINER */
        height: auto !important; /* Auto height - 50% smaller */
        position: relative !important; /* Fix position */
        touch-action: pan-x !important; /* Only allow horizontal panning on touch */
        background: transparent !important; /* Transparent background */
        -webkit-overflow-scrolling: touch !important; /* Smooth scrolling on iOS */
        scroll-behavior: smooth !important;
        width: 100% !important; /* Full width container */
        max-width: 100% !important;
        margin-top: 5px !important; /* Reduced space above - was more, now 5px */
        margin-bottom: 5px !important; /* Closer to avatars below */
    }
    
    #categoriesScroll .horizontal-scroll-content {
        align-items: center !important; /* Center align vertically for perfect horizontal alignment */
        justify-content: center !important; /* CENTER ALIGN horizontally - mobile first */
        height: auto !important; /* Auto height - 50% smaller */
        overflow-y: hidden !important; /* No vertical scroll */
        overflow-x: visible !important; /* Allow horizontal scroll - content expands */
        position: relative !important; /* Fix position */
        touch-action: pan-x !important; /* Only allow horizontal panning on touch */
        display: flex !important; /* Ensure flex layout */
        flex-wrap: nowrap !important; /* No wrapping - single row */
        background: transparent !important; /* Transparent background */
        gap: 4px !important; /* 50% smaller: was 8px, now 4px */
        width: max-content !important; /* Allow content to expand beyond viewport */
        min-width: 100% !important; /* At least full width */
    }
    
    /* Ensure all category items are at the same level */
    .category-item,
    .scroll-item.category-item {
        display: flex !important;
        align-items: center !important; /* Center align vertically */
        height: 80px !important; /* Smaller height */
        min-height: 80px !important;
        max-height: 80px !important;
    }
    
    /* Ensure category items don't scroll individually - only container scrolls */
    .category-item,
    .scroll-item.category-item {
        overflow-x: hidden !important; /* No individual horizontal scroll */
        overflow-y: hidden !important; /* No vertical scroll */
        flex-shrink: 0 !important; /* Don't shrink */
        width: auto !important; /* Natural width */
        min-width: fit-content !important; /* Fit content */
    }
    
    /* Ensure category wrapper and card don't scroll */
    .category-wrapper,
    .category-card-compact,
    .category-content {
        overflow-x: hidden !important; /* No individual scroll */
        overflow-y: hidden !important;
    }
    
    /* Prevent any vertical scrolling on categories - mobile first */
    @media (max-width: 1024px) {
        #categoriesScroll,
        #categoriesScroll *,
        .horizontal-scroll-container#categoriesScroll,
        .horizontal-scroll-container#categoriesScroll * {
            overflow-y: hidden !important;
            overflow-x: auto !important; /* Only horizontal scroll */
            touch-action: pan-x !important; /* Only horizontal panning */
            -webkit-overflow-scrolling: touch !important;
        }
        
        .category-card-compact,
        .category-content,
        .category-wrapper,
        .category-item {
            overflow-y: hidden !important;
            touch-action: pan-x !important; /* Only horizontal panning */
        }
        
        /* Ensure category scroll container doesn't allow vertical scroll */
        #categoriesScroll {
            height: 100px !important;
            max-height: 100px !important;
            min-height: 100px !important;
        }
    }
    
    .category-content i {
        font-size: 0.75rem !important; /* Smaller icon */
        flex-shrink: 0 !important; /* Don't shrink icon */
        line-height: 1 !important;
    }
    
    .category-content .category-name,
    .category-label {
        font-size: 0.65rem !important; /* Slightly larger for better visibility */
        white-space: nowrap !important; /* Prevent text wrapping */
        flex-shrink: 0 !important; /* Don't shrink text */
        min-width: max-content !important; /* Ensure full text width is visible */
        width: auto !important; /* Allow text to take natural width */
        overflow: visible !important; /* Allow text to be fully visible */
        text-overflow: clip !important; /* Don't clip text */
    }
    
    /* Ensure categories align in perfect row */
    #categoriesScroll .horizontal-scroll-content {
        align-items: center !important; /* Center align vertically for perfect row */
    }
    
    .category-card-compact {
        display: flex !important;
        align-items: center !important; /* Center align vertically */
        justify-content: center !important; /* Center align horizontally */
    }
    
    /* Professionals - Mobile First - Optimized for 380x850 */
    /* Professional card item - flex column to stack image and info */
    .scroll-item.professional-card-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: auto !important; /* Auto width to fit content */
        min-width: 90px !important; /* Minimum width for image */
        max-width: 120px !important; /* Max width to prevent too wide */
        height: auto !important; /* Auto height to fit content */
        min-height: auto !important;
        max-height: none !important;
        flex-shrink: 0 !important; /* Prevent shrinking to avoid distortion */
        overflow: visible !important; /* Remove vertical scroll */
        gap: 8px !important; /* Space between image and info */
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Professional card wrapper - just the circle image container */
    .professional-card-wrapper {
        width: 90px !important; /* Size optimized for 380px viewport */
        height: 90px !important; /* Same as width to make perfect circle */
        min-width: 90px !important; /* Don't shrink below this */
        min-height: 90px !important; /* Don't shrink below this */
        max-width: 90px !important;
        max-height: 90px !important;
        border-radius: 50% !important; /* Perfect circle */
        flex-shrink: 0 !important; /* Prevent shrinking to avoid distortion */
        overflow: hidden !important; /* Clip image to circle */
        position: relative !important; /* For badges positioning and image positioning */
    }
    
    .professional-card-compact {
        width: 90px !important;
        height: 90px !important;
        min-width: 90px !important;
        min-height: 90px !important;
        max-width: 90px !important;
        max-height: 90px !important;
        border-radius: 50% !important; /* Perfect circle */
        overflow: hidden !important; /* Clip image to circle */
        position: relative !important; /* For image positioning */
    }
    
    .professional-image,
    .professional-image img {
        width: 90px !important; /* Same as container - bigger */
        height: 90px !important; /* Same as width - perfect circle */
        min-width: 90px !important;
        min-height: 90px !important;
        max-width: 90px !important;
        max-height: 90px !important;
        border-radius: 50% !important; /* Perfect circle */
        object-fit: cover !important;
        object-position: center center !important; /* Center the image */
        overflow: hidden !important; /* Clip to circle */
        display: block !important;
        margin: 0 !important; /* Remove margin to fill container */
        padding: 0 !important; /* Remove padding */
        position: absolute !important; /* Position absolutely to fill container */
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        transform: none !important; /* Prevent any transforms that might shift images */
    }
    
    /* Ensure all professional images stay centered - override any nth-child or other selectors */
    .professional-card-wrapper img,
    .professional-card-compact img,
    .professional-profile-circle img,
    .professional-image img,
    .scroll-item .professional-image img,
    .scroll-item .professional-card-wrapper img,
    .professional-card-item .professional-image img,
    .professional-card-item .professional-card-wrapper img {
        object-position: center center !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        transform: none !important;
        margin: 0 !important;
        padding: 0 !important;
        position: absolute !important;
        width: 100% !important;
        height: 100% !important;
    }
    
    /* Ensure the container maintains proper positioning */
    .professional-card-wrapper,
    .professional-card-compact,
    .professional-profile-circle {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .professional-image-placeholder {
        width: 90px !important;
        height: 90px !important;
        min-width: 90px !important;
        min-height: 90px !important;
        max-width: 90px !important;
        max-height: 90px !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #e0e0e0 !important;
        color: #999 !important;
    }
    
    .professional-image-placeholder i {
        font-size: 3rem !important;
    }
    
    /* Professional info below - ensure it's positioned below the circle */
    .professional-info-below {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 100% !important;
        max-width: 120px !important;
        margin-top: 8px !important; /* Space below image */
        padding: 0 !important;
        position: relative !important; /* Not absolute - flows naturally */
        z-index: 1 !important;
    }
    
    /* Horizontal scroll containers - professional padding */
    #professionalsScroll,
    #categoriesScroll {
        padding: 12px 16px !important; /* Professional padding */
    }
    
    .horizontal-scroll-content {
        align-items: center !important; /* Center align vertically */
    }
    
    /* Deals - Mobile First - Optimized for 380x850 */
    .deal-window-card {
        width: 160px !important; /* Fixed width - optimized for 380px viewport */
        min-width: 160px !important; /* Don't shrink below this */
        max-width: 160px !important;
        height: auto !important;
        flex-shrink: 0 !important; /* Prevent shrinking to avoid distortion */
        display: flex !important;
        flex-direction: column !important;
    }
    
    .deal-image-container {
        width: 100% !important;
        height: 120px !important; /* Fixed height for uniform images */
        min-height: 120px !important;
        max-height: 120px !important;
        overflow: hidden !important;
    }
    
    .deal-image-container img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important; /* Cover to fill container uniformly */
    }
    
    .deal-content {
        padding: 10px !important;
    }
    
    .deal-title {
        font-size: 0.8rem !important;
    }
    
    .deal-price-after {
        font-size: 1.1rem !important;
    }
    
    /* Recommended Section - REMOVED */
    
    /* ============================================
       MOBILE-FIRST BASE COMPLETE
       All mobile devices and tablets use the base styles above
       They scale dynamically using relative units (rem, %, vw, etc.)
       ============================================ */
    
    /* ============================================
       DESKTOP ENHANCEMENTS - COMMENTED OUT
       Mobile-first base scales dynamically for all devices
       Uncomment below only if specific desktop overrides are needed
       ============================================ */
    
    /*
    @media (min-width: 768px) and (max-width: 1023px) {
        .category-card-compact {
            width: 100px !important; /* Slightly larger on tablet */
            min-width: 100px !important;
            max-width: 100px !important;
            padding: 10px !important;
        }
        .category-content i { font-size: 2.2rem !important; }
        .category-content .category-name { font-size: 0.8rem !important; }
        
        /* Recommended section - scale up to tablet size only - MOBILE FIRST */
        .recommended-card-swipeable .professional-image-container {
            width: 220px !important; /* Tablet size - dynamically scales from mobile base */
            height: 220px !important;
            min-width: 220px !important;
            max-width: 220px !important;
            min-height: 220px !important;
            max-height: 220px !important;
            padding: 8px !important; /* Padding so image doesn't touch edges */
        }
        
        /* Next button - perfect circle, consistent across all screen sizes */
        .recommended-next-btn {
            width: 40px !important;
            height: 40px !important;
            min-width: 40px !important;
            max-width: 40px !important;
            min-height: 40px !important;
            max-height: 40px !important;
            border-radius: 50% !important;
            font-size: 1rem !important;
        }
        
        .professional-card-wrapper,
        .scroll-item.professional-card-item {
            width: 100px !important; /* Bigger on tablet */
            height: 100px !important; /* Perfect circle */
            min-width: 100px !important;
            min-height: 100px !important;
            max-width: 100px !important;
            max-height: 100px !important;
        }
        .professional-image,
        .professional-image img {
            width: 100px !important;
            height: 100px !important;
            min-width: 100px !important;
            min-height: 100px !important;
            max-width: 100px !important;
            max-height: 100px !important;
        }
        #professionalsScroll .horizontal-scroll-content {
            gap: 8px !important; /* Slightly larger gap on tablet */
        }
        
        .deal-window-card {
            width: 180px !important; /* Fixed width for uniform cards */
            min-width: 180px !important;
            max-width: 180px !important;
        }
        .deal-image-container { 
            width: 100% !important;
            height: 140px !important; /* Fixed height for uniform images */
            min-height: 140px !important;
            max-height: 140px !important;
        }
    }
    
    @media (min-width: 1024px) and (max-width: 1439px) {
        .category-card-compact {
            width: 100% !important; /* Still 100% of horizontal-scroll-content */
            min-width: 0 !important;
            padding: 12px !important;
        }
        .category-content i { font-size: 2.5rem !important; }
        .category-content .category-name { font-size: 0.9rem !important; }
        
        /* Recommended section - max tablet size, no further scaling - MOBILE FIRST */
        .recommended-card-swipeable .professional-image-container {
            width: 240px !important; /* Large tablet size - dynamically scales from mobile base */
            height: 240px !important;
            min-width: 240px !important;
            max-width: 240px !important;
            min-height: 240px !important;
            max-height: 240px !important;
            padding: 8px !important; /* Padding so image doesn't touch edges */
        }
        
        /* Next button - perfect circle, consistent across all screen sizes */
        .recommended-next-btn {
            width: 40px !important;
            height: 40px !important;
            min-width: 40px !important;
            max-width: 40px !important;
            min-height: 40px !important;
            max-height: 40px !important;
            border-radius: 50% !important;
            font-size: 1rem !important;
        }
        
        .professional-card-wrapper,
        .scroll-item.professional-card-item {
            width: 110px !important; /* Bigger on large tablet */
            height: 110px !important;
            min-width: 110px !important;
            min-height: 110px !important;
            max-width: 110px !important;
            max-height: 110px !important;
        }
        .professional-image,
        .professional-image img {
            width: 110px !important;
            height: 110px !important;
            min-width: 110px !important;
            min-height: 110px !important;
            max-width: 110px !important;
            max-height: 110px !important;
        }
        #professionalsScroll .horizontal-scroll-content {
            gap: 10px !important; /* Slightly larger gap on large tablet */
        }
        
        .deal-window-card {
            width: 200px !important; /* Fixed width for uniform cards */
            min-width: 200px !important;
            max-width: 200px !important;
        }
        .deal-image-container {
            width: 100% !important;
            height: 150px !important; /* Fixed height for uniform images */
            min-height: 150px !important;
            max-height: 150px !important;
        }
        .deal-image-container { 
            width: 100% !important;
            height: auto !important;
            aspect-ratio: 4 / 3 !important;
        }
    }
    
    @media (min-width: 1440px) {
        .category-card-compact {
            width: 140px !important; /* Larger on desktop */
            min-width: 140px !important;
            max-width: 140px !important;
            padding: 14px !important;
        }
        .category-content i { font-size: 2.8rem !important; }
        .category-content .category-name { font-size: 1rem !important; }
        
        /* Recommended section - max size, no further scaling - MOBILE FIRST */
        .recommended-card-swipeable .professional-image-container {
            width: 250px !important; /* Max size - dynamically scales from mobile base */
            height: 250px !important;
            min-width: 250px !important;
            max-width: 250px !important;
            min-height: 250px !important;
            max-height: 250px !important;
            padding: 10px !important; /* More padding on larger screens */
        }
        
        /* Next button - perfect circle, consistent across all screen sizes */
        .recommended-next-btn {
            width: 40px !important;
            height: 40px !important;
            min-width: 40px !important;
            max-width: 40px !important;
            min-height: 40px !important;
            max-height: 40px !important;
            border-radius: 50% !important;
            font-size: 1rem !important;
        }
        
        .professional-card-wrapper,
        .scroll-item.professional-card-item {
            width: 120px !important; /* Bigger on desktop */
            height: 120px !important; /* Perfect circle */
            min-width: 120px !important;
            min-height: 120px !important;
            max-width: 120px !important;
            max-height: 120px !important;
        }
        .professional-image,
        .professional-image img {
            width: 120px !important;
            height: 120px !important;
            min-width: 120px !important;
            min-height: 120px !important;
            max-width: 120px !important;
            max-height: 120px !important;
        }
        #professionalsScroll .horizontal-scroll-content {
            gap: 12px !important; /* Standard gap on desktop */
        }
        
        .deal-window-card {
            width: 100% !important; /* Still 100% of horizontal-scroll-content */
            min-width: 0 !important;
        }
        .deal-image-container { 
            width: 100% !important;
            height: auto !important;
            aspect-ratio: 4 / 3 !important;
        }
        
        .recommended-card-swipeable .professional-image-container {
            width: 350px !important;
            height: 350px !important;
        }
        .carousel-controls .btn-primary {
            width: 50px !important;
            height: 50px !important;
            font-size: 1.2rem !important;
        }
    }
    */
    
    /* ============================================
       MOBILE-FIRST STYLES CONTINUE BELOW
       All styles below are mobile-first and scale dynamically
       ============================================ */
    
    /* Home Page Background */
    .home-background-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #ffffff !important; /* White background */
        z-index: -2;
        opacity: 1;
        display: none; /* Hide overlay - use white background instead */
    }
    
    body::before {
        z-index: -1;
    }
    
    /* Ensure content is readable over background */
    .card, .quick-book-widget-modern, .location-widget {
        background: rgba(42, 42, 42, 0.95) !important;
        backdrop-filter: blur(10px);
        border: 1px solid var(--bs-primary);
        border-opacity: 0.3;
    }
    
    body:not(.home-page-hq) h1,
    body:not(.home-page-hq) h2,
    body:not(.home-page-hq) h3,
    body:not(.home-page-hq) h4,
    body:not(.home-page-hq) h5,
    body:not(.home-page-hq) h6 {
        text-shadow: none;
        color: #001f3f !important;
    }
    
    /* Portfolio section - white text on navy background */
    /* Portfolio section - navy text on transparent background */
    .portfolio-section-navy {
        background: transparent !important; /* Transparent background */
        border: 2px solid #001f3f !important; /* Navy border */
    }
    
    /* Small screens - remove border and padding for bigger video */
    @media (max-width: 900px) {
        .portfolio-section-navy {
            border: none !important;
            padding: 0 !important;
            border-radius: 0 !important;
        }
        
        .portfolio-section-navy h6 {
            display: none !important; /* Hide "Portfolio" title */
        }
    }
    
    @media (max-width: 380px) {
        /* All section headings - consistent size and left-aligned on very small screens */
        .deals-section h2,
        .freelancers-section h2,
        .organizations-locations-section h2 {
            font-size: 1.3rem !important;
            font-weight: 700 !important;
            color: #001f3f !important;
            text-align: left !important;
            padding-left: 0 !important;
            margin-bottom: 0.75rem !important;
        }
        
        /* Professional images - ensure proper centering on small screens */
        .professional-image,
        .professional-image img {
            object-fit: cover !important;
            object-position: center center !important;
            position: absolute !important;
            top: 0 !important;
            left: 0 !important;
            right: 0 !important;
            bottom: 0 !important;
            margin: 0 !important;
            padding: 0 !important;
            width: 100% !important;
            height: 100% !important;
        }
        
        .portfolio-section-navy {
            border: none !important;
            padding: 0 !important;
            border-radius: 0 !important;
        }
        
        .portfolio-section-navy h6 {
            display: none !important; /* Hide "Portfolio" title */
        }
    }
    
    .portfolio-section-navy,
    .portfolio-section-navy h6,
    .portfolio-section-navy p,
    .portfolio-section-navy span,
    .portfolio-section-navy div,
    .portfolio-section-navy * {
        color: #001f3f !important; /* Navy text on transparent background */
    }
    
    /* Business location section - white text on navy background */
    .business-location-section-navy,
    .business-location-section-navy h6,
    .business-location-section-navy p,
    .business-location-section-navy span,
    .business-location-section-navy div,
    .business-location-section-navy * {
        color: #ffffff !important;
    }
    
    /* Heart and dislike buttons - responsive sizing */
    .heart-dislike-btn {
        transition: all 0.3s ease;
    }
    
    @media (max-width: 1024px) {
        .heart-dislike-btn {
            width: 35px !important;
            height: 35px !important;
            font-size: 0.9rem !important;
        }
    }
    
    /* Premium Mobile Logo - Text-based HQ */
    .mobile-premium-logo {
        display: none; /* Hidden on desktop */
        position: relative;
        width: 100%;
        max-width: 100%;
        padding: 15px 20px 2px 20px !important; /* Reduced padding - bring categories closer to text above */
        background: transparent;
        z-index: 100;
        text-align: center;
        margin: 0 auto;
        margin-bottom: 0 !important; /* Remove bottom margin */
        box-sizing: border-box;
        overflow: visible !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
    }
    
    .logo-container-3d {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        padding: 0;
        width: 100%;
        max-width: 100%;
        overflow: visible !important; /* Ensure logo isn't clipped */
        box-sizing: border-box;
    }
    
    .mobile-premium-logo {
        overflow: visible !important; /* Ensure logo isn't clipped */
        max-width: 100%;
        box-sizing: border-box;
    }
    
    /* Override global logo sizing from base.css - Home logo should be TWICE the size */
    /* Use maximum specificity to override base.css rules - target ALL possible selectors */
    html body .mobile-premium-logo img.home-logo-image,
    html body .logo-container-3d img.home-logo-image,
    html body .mobile-premium-logo .home-logo-image,
    html body .logo-container-3d .home-logo-image,
    html body img.home-logo-image[alt="HUBLIQ"],
    html body .home-logo-image,
    .mobile-premium-logo img.home-logo-image,
    .logo-container-3d img.home-logo-image,
    .mobile-premium-logo .home-logo-image,
    .logo-container-3d .home-logo-image,
    img.home-logo-image[alt="HUBLIQ"],
    .home-logo-image {
        max-width: 100% !important; /* Responsive - don't exceed container */
        width: auto !important; /* Let it size naturally */
        height: auto !important;
        min-width: 0 !important; /* Remove fixed min-width to prevent cropping */
        display: block !important;
        margin: 0 auto !important;
        object-fit: contain !important;
    }
    
    /* Desktop: allow larger logo but still respect container */
    @media (min-width: 1440px) {
        html body .mobile-premium-logo img.home-logo-image,
        html body .logo-container-3d img.home-logo-image,
        html body .mobile-premium-logo .home-logo-image,
        html body .logo-container-3d .home-logo-image,
        html body img.home-logo-image[alt="HUBLIQ"],
        html body .home-logo-image,
        .mobile-premium-logo img.home-logo-image,
        .logo-container-3d img.home-logo-image,
        .mobile-premium-logo .home-logo-image,
        .logo-container-3d .home-logo-image,
        img.home-logo-image[alt="HUBLIQ"],
        .home-logo-image {
            max-width: min(1000px, 100%) !important; /* Up to 1000px but never exceed container */
            width: auto !important;
        }
    }
    
    /* Mobile nav view - screens with mobile nav (≤1439px) - make logo much larger */
    @media (max-width: 1439px) {
        .mobile-premium-logo {
            padding: 15px 5px 2px 5px !important; /* Minimal padding to maximize space */
        }
        
        .logo-container-3d {
            width: 100% !important;
            max-width: 100% !important;
        }
        
        html body .mobile-premium-logo img.home-logo-image,
        html body .logo-container-3d img.home-logo-image,
        html body .mobile-premium-logo .home-logo-image,
        html body .logo-container-3d .home-logo-image,
        html body img.home-logo-image[alt="HUBLIQ"],
        html body .home-logo-image,
        .mobile-premium-logo img.home-logo-image,
        .logo-container-3d img.home-logo-image,
        .mobile-premium-logo .home-logo-image,
        .logo-container-3d .home-logo-image,
        img.home-logo-image[alt="HUBLIQ"],
        .home-logo-image {
            max-width: 100% !important; /* Don't exceed container */
            width: auto !important; /* Size naturally */
            min-width: 0 !important; /* Remove fixed min-width to prevent cropping */
            height: auto !important;
        }
    }
    
    @media (max-width: 768px) {
        html body .mobile-premium-logo img.home-logo-image,
        html body .logo-container-3d img.home-logo-image,
        html body .mobile-premium-logo .home-logo-image,
        html body .logo-container-3d .home-logo-image,
        html body img.home-logo-image[alt="HUBLIQ"],
        html body .home-logo-image,
        .mobile-premium-logo img.home-logo-image,
        .logo-container-3d img.home-logo-image,
        .mobile-premium-logo .home-logo-image,
        .logo-container-3d .home-logo-image,
        img.home-logo-image[alt="HUBLIQ"],
        .home-logo-image {
            max-width: 90vw !important; /* Full width for tablet */
            width: 90vw !important;
            min-width: 550px !important; /* TWICE the size */
            height: auto !important;
        }
    }
    
    @media (max-width: 480px) {
        html body .mobile-premium-logo img.home-logo-image,
        html body .logo-container-3d img.home-logo-image,
        html body .mobile-premium-logo .home-logo-image,
        html body .logo-container-3d .home-logo-image,
        html body img.home-logo-image[alt="HUBLIQ"],
        html body .home-logo-image,
        .mobile-premium-logo img.home-logo-image,
        .logo-container-3d img.home-logo-image,
        .mobile-premium-logo .home-logo-image,
        .logo-container-3d .home-logo-image,
        img.home-logo-image[alt="HUBLIQ"],
        .home-logo-image {
            max-width: 85vw !important; /* Full width for small mobile */
            width: 85vw !important;
            min-width: 500px !important; /* TWICE the size */
            height: auto !important;
        }
    }
    
    @media (max-width: 380px) {
        html body .mobile-premium-logo img.home-logo-image,
        html body .logo-container-3d img.home-logo-image,
        html body .mobile-premium-logo .home-logo-image,
        html body .logo-container-3d .home-logo-image,
        html body img.home-logo-image[alt="HUBLIQ"],
        html body .home-logo-image,
        .mobile-premium-logo img.home-logo-image,
        .logo-container-3d img.home-logo-image,
        .mobile-premium-logo .home-logo-image,
        .logo-container-3d .home-logo-image,
        img.home-logo-image[alt="HUBLIQ"],
        .home-logo-image {
            max-width: 80vw !important; /* Full width for 380x850 screens */
            width: 80vw !important;
            min-width: 450px !important; /* TWICE the size */
            height: auto !important;
        }
    }
    
    .logo-letter {
        font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif;
        font-weight: 700;
        display: inline-block;
        position: relative;
        line-height: 1;
        transform-style: preserve-3d;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        backface-visibility: hidden;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    
    .logo-h {
        font-size: 2.8rem; /* Bigger HQ logo */
        color: #001f3f;
        font-weight: 800;
        letter-spacing: 0;
        position: relative;
        line-height: 1;
        background: linear-gradient(180deg, 
            rgba(0, 31, 63, 1) 0%,
            rgba(0, 31, 63, 0.95) 30%,
            rgba(0, 51, 102, 0.9) 50%,
            rgba(0, 31, 63, 0.95) 70%,
            rgba(0, 31, 63, 1) 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        filter: drop-shadow(0 1px 2px rgba(0, 31, 63, 0.15)) 
                drop-shadow(0 2px 4px rgba(0, 31, 63, 0.1))
                drop-shadow(0 4px 8px rgba(0, 0, 0, 0.08));
        transform: translateZ(0);
        text-rendering: optimizeLegibility;
    }
    
    .logo-h::before {
        content: 'H';
        position: absolute;
        top: 0;
        left: 0;
        color: rgba(0, 31, 63, 0.12);
        transform: translate(0.5px, 0.5px);
        z-index: -1;
    }
    
    .logo-q {
        font-size: 2.8rem; /* Bigger HQ logo */
        color: #ffffff;
        font-weight: 800;
        letter-spacing: 0;
        position: relative;
        line-height: 1;
        background: linear-gradient(180deg, 
            rgba(255, 255, 255, 1) 0%,
            rgba(255, 255, 255, 0.98) 20%,
            rgba(240, 245, 250, 0.95) 50%,
            rgba(255, 255, 255, 0.98) 80%,
            rgba(255, 255, 255, 1) 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.3))
                drop-shadow(0 2px 3px rgba(0, 0, 0, 0.12))
                drop-shadow(0 3px 6px rgba(0, 0, 0, 0.08));
        transform: translateZ(0);
        text-rendering: optimizeLegibility;
        -webkit-text-stroke: 0.5px rgba(0, 31, 63, 0.4);
        text-stroke: 0.5px rgba(0, 31, 63, 0.4);
        overflow: visible !important;
    }
    
    .logo-q::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        color: rgba(255, 255, 255, 0.1);
        transform: translate(0.3px, 0.3px);
        z-index: -1;
    }
    
    .logo-q::after {
        content: '';
        position: absolute;
        bottom: -0.15em;
        right: -0.1em;
        width: 0.18em;
        height: 0.18em;
        background: #001f3f;
        border-radius: 50%;
        z-index: 1;
        box-shadow: 
            0.1em 0.05em 0 0 #001f3f,
            -0.05em 0.15em 0 0 #001f3f,
            0.05em 0.2em 0 0 #001f3f,
            0.15em 0.1em 0 0 #001f3f;
        overflow: visible !important;
    }
    
    /* Mobile only - show logo */
    @media (max-width: 1439px) {
        .mobile-premium-logo {
            display: block;
        }
    }
    
    /* Hide on desktop */
    @media (min-width: 1440px) {
        .mobile-premium-logo {
            display: none !important;
        }
    }
    
    /* Horizontal scrolling deals carousel */
    .deals-carousel-container {
        display: flex;
        overflow-x: auto !important; /* Horizontal scroll like community */
        overflow-y: hidden !important;
        gap: 10px !important; /* Smaller gap to see more like image */
        padding: 15px 0 !important; /* Consistent padding - parent handles left/right */
        -webkit-overflow-scrolling: touch !important;
        scroll-behavior: smooth;
        scrollbar-width: none; /* Hide scrollbar */
        -ms-overflow-style: none;
        width: 100% !important; /* Full screen width */
        max-width: 100% !important;
        box-sizing: border-box !important;
        position: relative;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* MOBILE BASE - Desktop sizes are the default */
    /* No scaling down - desktop layout is mobile base */
    
    .deals-carousel-container::-webkit-scrollbar {
        display: none; /* Hide scrollbar */
    }
    
    .deals-carousel-container {
        -ms-overflow-style: none; /* IE and Edge */
        scrollbar-width: none; /* Firefox */
    }
    
    .deals-carousel-container::-webkit-scrollbar-track {
        display: none;
    }
    
    .deals-carousel-container::-webkit-scrollbar-thumb {
        display: none;
    }
    
    
    /* MOBILE-FIRST: Community-style deals - optimized to see 3+ like image */
    .deal-window-card {
        flex: 0 0 auto;
        width: 160px; /* Mobile-optimized: See 3 clearly like image */
        min-width: 160px; /* Mobile-optimized */
        background: #ffffff;
        border-radius: 12px;
        overflow: hidden;
        border: 2px solid rgba(0, 31, 63, 0.1);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        cursor: pointer;
        position: relative;
    }
    
    .deal-image-container {
        width: 100%;
        height: 120px; /* Mobile-optimized: Good image height */
    }
    
    .deal-content {
        padding: 10px; /* Mobile-optimized: Reasonable padding */
    }
    
    .deal-title {
        font-size: 0.8rem; /* Mobile-optimized: Readable text */
        line-height: 1.3;
        margin-bottom: 6px;
        font-weight: 600;
    }
    
    .deal-price-after {
        font-size: 1.1rem; /* Mobile-optimized: Readable price */
        font-weight: 700;
    }
    
    .deals-carousel-container {
        gap: 10px !important; /* Smaller gap to see more like image */
        padding: 15px min(1rem, 4vw) !important; /* Full width with responsive padding */
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Progressive scaling for tablets */
    @media (min-width: 768px) and (max-width: 1023px) {
        .deal-window-card {
            width: 180px;
            min-width: 180px;
        }
        .deal-image-container {
            height: 140px;
        }
        .deal-content {
            padding: 12px;
        }
        .deal-title {
            font-size: 0.85rem;
        }
        .deal-price-after {
            font-size: 1.1rem;
        }
        .deals-carousel-container {
            gap: 15px !important;
        }
    }
    
    @media (min-width: 1024px) and (max-width: 1439px) {
        .deal-window-card {
            width: 240px;
            min-width: 240px;
        }
        .deal-image-container {
            height: 180px;
        }
        .deal-content {
            padding: 14px;
        }
        .deal-title {
            font-size: 0.9rem;
        }
        .deal-price-after {
            font-size: 1.3rem;
        }
        .deals-carousel-container {
            gap: 18px !important;
        }
    }
    
    /* ============================================
       DESKTOP: Scale UP from mobile base - COMMENTED OUT
       Mobile-first base scales dynamically for all devices
       ============================================ */
    /*
    @media (min-width: 1440px) {
        /* Deals - Scale UP */
        .deal-window-card {
            width: 280px; /* Scale up for desktop */
            min-width: 280px; /* Scale up for desktop */
        }
        
        .deal-image-container {
            height: 200px; /* Scale up for desktop */
        }
        
        .deal-content {
            padding: 16px; /* Scale up for desktop */
        }
        
        .deal-title {
            font-size: 0.95rem; /* Scale up for desktop */
        }
        
        .deal-price-after {
            font-size: 1.4rem; /* Scale up for desktop */
        }
        
        .deal-image-container {
            height: 220px; /* Scale up for desktop */
        }
        
        .deal-content {
            padding: 20px; /* Scale up for desktop */
        }
        
        .deal-title {
            font-size: 1.1rem; /* Scale up for desktop */
        }
        
        .deal-price-after {
            font-size: 1.6rem; /* Scale up for desktop */
        }
        
        /* Professional Cards - Scale UP */
        .scroll-item {
            width: 180px; /* Scale up for desktop */
        }
        
        .professional-card-wrapper {
            width: 180px; /* Scale up for desktop */
            height: 180px; /* Scale up for desktop */
        }
        
        /* Recommended Section - Scale UP */
        /* REMOVED - No desktop hardcoded scaling, dynamic scaling only up to tablet */
        /* Profile image stays at mobile size, dynamically scales to tablet max */
            font-size: 1.2rem; /* Larger icon */
        }
        
        /* Typography - Scale UP */
        h1 { font-size: 2.5rem !important; }
        h2 { font-size: 2rem !important; }
        h3 { font-size: 1.75rem !important; }
        
        /* Spacing - Scale UP */
        .mb-4, .mb-5 { margin-bottom: 3rem !important; }
        .mt-4, .mt-5 { margin-top: 3rem !important; }
    }
    
    .deal-window-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 25px rgba(0, 31, 63, 0.2);
        border-color: #001f3f;
    }
    
    .deal-badge {
        position: absolute;
        top: 12px;
        left: 12px;
        background: #dc3545;
        color: #ffffff;
        padding: 6px 12px;
        border-radius: 20px;
        font-size: 0.75rem;
        font-weight: 700;
        z-index: 10;
        box-shadow: 0 2px 8px rgba(220, 53, 69, 0.4);
    }
    
    .deal-badge.hot {
        background: #ff6b35;
    }
    
    .deal-discount-badge-top {
        position: absolute;
        top: 12px;
        right: 12px;
        background: #dc3545;
        color: #ffffff;
        padding: 6px 12px;
        border-radius: 20px;
        font-size: 0.75rem;
        font-weight: 700;
        z-index: 10;
        box-shadow: 0 2px 8px rgba(220, 53, 69, 0.4);
    }
    
    .deal-image-container {
        width: 100%;
        height: 200px;
        overflow: hidden;
        background: #f8f9fa;
        position: relative;
    }
    
    /* MOBILE BASE - Desktop size is default */
    /* Deal image container uses desktop size (200px) as mobile base */
    
    .deal-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .deal-image-placeholder {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #001f3f 0%, #003366 100%);
        color: #ffffff;
    }
    
    .deal-image-placeholder i {
        font-size: 3rem;
        opacity: 0.5;
    }
    
    .deal-content {
        padding: 16px;
    }
    
    /* MOBILE BASE - Desktop sizes are default */
    /* Deal content uses desktop padding (16px) as mobile base */
    
    .deal-title {
        font-size: 0.95rem;
        font-weight: 600;
        color: #001f3f;
        margin-bottom: 8px;
        line-height: 1.4;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    /* MOBILE BASE - Desktop size is default */
    /* Deal title uses desktop size (0.95rem) as mobile base */
    
    .deal-rating {
        display: flex;
        align-items: center;
        gap: 4px;
        margin-bottom: 10px;
    }
    
    .deal-rating .stars {
        color: #ffc107;
        font-size: 0.85rem;
    }
    
    .deal-rating .rating-text {
        font-size: 0.85rem;
        color: #6c757d;
        margin-left: 4px;
    }
    
    .deal-price-section {
        margin-bottom: 10px;
    }
    
    .deal-price {
        font-size: 0.85rem;
        font-weight: 500;
        color: #6c757d;
        text-decoration: line-through;
        margin-bottom: 4px;
    }
    
    .deal-price-after {
        font-size: 1.4rem;
        font-weight: 700;
        color: #001f3f;
        margin-bottom: 12px;
    }
    
    .deal-info-section {
        margin-bottom: 10px;
        font-size: 0.85rem;
        color: #6c757d;
    }
    
    .deal-info-section a {
        color: #001f3f;
        text-decoration: none;
        font-weight: 600;
    }
    
    .deal-info-section a:hover {
        text-decoration: underline;
    }
    
    .deal-time-info {
        font-size: 0.8rem;
        color: #6c757d;
        margin-top: 4px;
    }
    
    /* Professional image hover effect */
    .professional-image-link {
        display: block;
        transition: transform 0.3s ease;
        position: relative;
        z-index: 10;
        pointer-events: auto !important; /* Ensure link is clickable */
    }
    
    .professional-image-link:hover {
        transform: translateY(-5px) scale(1.05);
    }
    
    /* Ensure image link works on mobile */
    @media (max-width: 1024px) {
        .professional-image-link {
            pointer-events: auto !important;
            z-index: 100 !important; /* Higher z-index on mobile */
        }
        
        .professional-image-container {
            pointer-events: none !important; /* Let link handle clicks */
        }
    }
    
    .professional-image-container:hover {
        box-shadow: 0 8px 30px rgba(0, 31, 63, 0.6) !important;
        border-color: #003d7a !important;
    }
    
    .professional-image-container:hover img {
        transform: scale(1.1);
    }
    
    .recommended-card-swipeable .professional-image-container:hover i {
        transform: scale(1.05) !important; /* Slight zoom on hover */
    }
    
    /* MOBILE BASE - Desktop sizes are default */
    /* All recommended section elements use desktop sizes as mobile base */
    /* No scaling down - desktop layout is mobile base */
        
        .recommended-card-swipeable .btn-sm {
            padding: 3px 10px !important;
            font-size: 0.65rem !important;
        }
    }
    
    /* Media query for screens 700x1000 and below */
    @media (max-width: 1000px) {
        /* Remove padding between profile section and portfolio section */
        .recommended-card-swipeable > div[style*="flex-direction: row"] {
            margin-bottom: 0px !important;
            padding-bottom: 0px !important;
        }
        
        #detailPlaceholder {
            margin-top: 0px !important;
            padding-top: 5px !important; /* Minimal padding */
        }
        
        /* Make portfolio section wider to see more items */
        #detailPlaceholder > div > div[style*="flex: 1.5"] {
            flex: 1.8 !important; /* Even wider on smaller screens */
        }
        
        #detailPlaceholder > div > div[style*="flex: 0.7"] {
            flex: 0.5 !important; /* Narrower services section */
        }
        
        /* Ensure services can horizontal scroll */
        .services-scroll-container {
            overflow-x: auto !important;
            overflow-y: hidden !important;
            -webkit-overflow-scrolling: touch !important;
            width: 100% !important;
        }
        
        .services-scroll-row {
            display: flex !important;
            flex-direction: row !important;
            flex-wrap: nowrap !important;
            width: max-content !important;
        }
    }
    
    /* Small mobile (361px - 400px) - removed 406px to prevent transition lag */
    @media (min-width: 361px) and (max-width: 400px) {
        .recommended-card-swipeable .professional-image-container,
        .recommended-card-swipeable [style*="width: 280px"] {
            width: 160px !important;
            height: 160px !important;
            border-width: 2.5px !important;
        }
        
        .recommended-card-swipeable [style*="font-size: 8rem"] {
            font-size: 6rem !important;
        }
        
        .recommended-card-swipeable h5 {
            font-size: 0.8rem !important;
            margin-bottom: 0.2rem !important;
        }
        
        .recommended-card-swipeable p {
            font-size: 0.7rem !important;
            margin-bottom: 0.2rem !important;
        }
        
        .recommended-card-swipeable .btn-sm {
            padding: 4px 11px !important;
            font-size: 0.7rem !important;
        }
    }
    
    /* Medium mobile (401px - 500px) */
    @media (min-width: 401px) and (max-width: 500px) {
        .recommended-card-swipeable .professional-image-container,
        .recommended-card-swipeable [style*="width: 280px"] {
            width: 180px !important;
            height: 180px !important;
            border-width: 3px !important;
        }
        
        .recommended-card-swipeable [style*="font-size: 8rem"] {
            font-size: 6.5rem !important;
        }
        
        .recommended-card-swipeable h5 {
            font-size: 0.85rem !important;
            margin-bottom: 0.2rem !important;
        }
        
        .recommended-card-swipeable p {
            font-size: 0.7rem !important;
            margin-bottom: 0.2rem !important;
        }
        
        .recommended-card-swipeable .btn-sm {
            padding: 4px 12px !important;
            font-size: 0.7rem !important;
        }
    }
    
    /* Large mobile (501px - 670px) */
    @media (min-width: 501px) and (max-width: 670px) {
        .recommended-card-swipeable .professional-image-container,
        .recommended-card-swipeable [style*="width: 280px"] {
            width: 200px !important;
            height: 200px !important;
            border-width: 3px !important;
        }
        
        .recommended-card-swipeable [style*="font-size: 8rem"] {
            font-size: 7rem !important;
        }
        
        .recommended-card-swipeable h5 {
            font-size: 0.9rem !important;
            margin-bottom: 0.25rem !important;
        }
        
        .recommended-card-swipeable p {
            font-size: 0.75rem !important;
            margin-bottom: 0.25rem !important;
        }
        
        .recommended-card-swipeable .btn-sm {
            padding: 4px 12px !important;
            font-size: 0.75rem !important;
        }
    }
    
    /* Tablet transition (671px - 768px) */
    @media (min-width: 671px) and (max-width: 768px) {
        .recommended-card-swipeable .professional-image-container,
        .recommended-card-swipeable [style*="width: 280px"] {
            width: 200px !important;
            height: 200px !important;
            border-width: 3px !important;
        }
        
        .recommended-card-swipeable [style*="font-size: 8rem"] {
            font-size: 6.5rem !important;
        }
        
        .recommended-card-swipeable h5 {
            font-size: 0.85rem !important;
            margin-bottom: 0.2rem !important;
        }
        
        .recommended-card-swipeable p {
            font-size: 0.7rem !important;
            margin-bottom: 0.2rem !important;
        }
        
        .recommended-card-swipeable .btn-sm {
            padding: 4px 12px !important;
            font-size: 0.7rem !important;
        }
        
        /* Detail placeholder - auto height to fit content */
        #detailPlaceholder {
            height: auto !important; /* Auto height - no fixed height */
            min-height: auto !important;
            max-height: none !important;
            padding: 10px !important;
            border-radius: 12px !important;
            margin-top: 1rem !important;
        }
        
        #detailPlaceholder > div[style*="flex-direction: row"] {
            flex-direction: column !important;
            gap: 10px !important;
        }
        
        /* Portfolio section - full width, horizontal scroll, transparent background */
        #detailPlaceholder > div > div.portfolio-section-navy {
            flex: 1 !important;
            width: 100% !important;
            min-height: 240px !important;
            max-height: 240px !important;
            overflow-y: hidden !important;
            overflow-x: auto !important; /* Horizontal scroll */
            background: transparent !important; /* Transparent background */
            border: 2px solid #001f3f !important; /* Navy border */
        }
        
        /* Portfolio - horizontal scroll on mobile */
        #detailPlaceholder .portfolio-section-navy .row {
            display: flex !important;
            flex-direction: row !important;
            flex-wrap: nowrap !important;
            overflow-x: auto !important;
            overflow-y: hidden !important;
            -webkit-overflow-scrolling: touch !important;
            gap: 8px !important;
            padding: 0 4px !important;
            width: max-content !important; /* Allow content to extend for horizontal scroll */
        }
        
        /* Portfolio images bigger and horizontal scroll */
        #detailPlaceholder .portfolio-section-navy .col-6 {
            flex: 0 0 160px !important;
            min-width: 160px !important;
            max-width: 160px !important;
            padding: 4px !important;
        }
        
        #detailPlaceholder .portfolio-section-navy .col-6 img,
        /* Portfolio images and videos - consistent sizing across all screen sizes */
        #detailPlaceholder .portfolio-section-navy .col-6 img,
        #detailPlaceholder .portfolio-section-navy .col-6 video,
        #detailPlaceholder .portfolio-section-navy .col-6 > div,
        .recommended-portfolio-video-container,
        .recommended-portfolio-video-container video,
        .recommended-portfolio-video-container img {
            width: 100% !important;
            height: 100% !important;
            min-width: 160px !important;
            min-height: 160px !important;
            max-width: 160px !important;
            max-height: 160px !important;
            object-fit: cover !important;
            aspect-ratio: 1 !important;
            box-sizing: border-box !important;
        }
        
        /* Ensure portfolio column containers match */
        #detailPlaceholder .portfolio-section-navy .col-6 {
            width: 160px !important;
            height: 160px !important;
            min-width: 160px !important;
            min-height: 160px !important;
            max-width: 160px !important;
            max-height: 160px !important;
            flex: 0 0 160px !important;
            padding: 4px !important;
            box-sizing: border-box !important;
        }
        
        /* Mobile-first: Ensure videos match images on all smaller screens */
        @media (max-width: 768px) {
            #detailPlaceholder .portfolio-section-navy .col-6 img,
            #detailPlaceholder .portfolio-section-navy .col-6 video,
            #detailPlaceholder .portfolio-section-navy .col-6 > div video,
            .recommended-portfolio-video-container,
            .recommended-portfolio-video-container video,
            .recommended-portfolio-video-container img {
                width: 160px !important;
                height: 160px !important;
                min-width: 160px !important;
                min-height: 160px !important;
                max-width: 160px !important;
                max-height: 160px !important;
            object-fit: cover !important;
            aspect-ratio: 1 !important;
                box-sizing: border-box !important;
            }
            
            #detailPlaceholder .portfolio-section-navy .col-6 {
                width: 160px !important;
                height: 160px !important;
                min-width: 160px !important;
                min-height: 160px !important;
                max-width: 160px !important;
                max-height: 160px !important;
                flex: 0 0 160px !important;
            }
        }
        
        /* iPhone 380x850 and smaller - ensure videos match image size exactly */
        @media (max-width: 390px) {
            #detailPlaceholder .portfolio-section-navy .col-6 img,
            #detailPlaceholder .portfolio-section-navy .col-6 video,
            #detailPlaceholder .portfolio-section-navy .col-6 > div video,
            .recommended-portfolio-video-container,
            .recommended-portfolio-video-container video,
            .recommended-portfolio-video-container img {
                width: 160px !important;
                height: 160px !important;
                min-width: 160px !important;
                min-height: 160px !important;
                max-width: 160px !important;
                max-height: 160px !important;
                object-fit: cover !important;
                aspect-ratio: 1 !important;
                box-sizing: border-box !important;
            }
            
            #detailPlaceholder .portfolio-section-navy .col-6 {
                width: 160px !important;
                height: 160px !important;
                min-width: 160px !important;
                min-height: 160px !important;
                max-width: 160px !important;
                max-height: 160px !important;
                flex: 0 0 160px !important;
            }
        }
        
        /* Portfolio section title smaller */
        #detailPlaceholder h6 {
            font-size: 0.75rem !important;
            margin-bottom: 8px !important;
        }
        
        /* Services section smaller */
        #detailPlaceholder .service-card-modern {
            padding: 6px !important;
            margin-bottom: 6px !important;
        }
        
        #detailPlaceholder .service-card-modern [style*="width: 60px"],
        #detailPlaceholder .service-card-modern [style*="width: 80px"] {
            width: 80px !important;
            height: 80px !important;
        }
        
        /* Service images bigger on mobile */
        @media (max-width: 768px) {
            .service-card-modern [style*="width: 80px"] {
                width: 100px !important;
                height: 100px !important;
            }
            
            .service-card-modern [style*="font-size: 2rem"] {
                font-size: 2.5rem !important;
            }
        }
        
        #detailPlaceholder .service-card-modern h6 {
            font-size: 0.7rem !important;
        }
        
        #detailPlaceholder .service-card-modern .btn-sm {
            padding: 3px 8px !important;
            font-size: 0.65rem !important;
        }
        
        /* Services horizontal scroll on mobile - always horizontal */
        .services-scroll-container {
            overflow-x: auto !important;
            overflow-y: hidden !important; /* No vertical scroll */
            -webkit-overflow-scrolling: touch !important;
            scrollbar-width: none !important; /* Firefox - hide scrollbar */
            -ms-overflow-style: none !important; /* IE/Edge - hide scrollbar */
        }
        
        .services-scroll-container::-webkit-scrollbar {
            display: none !important; /* Hide scrollbar */
            width: 0 !important;
            height: 0 !important;
        }
        
            .services-scroll-row {
            display: flex !important;
            flex-direction: row !important; /* Always horizontal */
                flex-wrap: nowrap !important;
            gap: 10px !important;
            width: max-content !important; /* Allow content to extend for horizontal scroll */
            min-width: 100% !important;
            }
            
            .service-card-modern {
            flex: 0 0 200px !important;
            min-width: 200px !important;
            max-width: 200px !important;
        }
        
        /* Services horizontal scroll - legacy support */
        #detailPlaceholder .business-location-section-navy .row.g-2 {
            display: flex !important;
            flex-direction: row !important;
            flex-wrap: nowrap !important;
            overflow-x: auto !important;
            overflow-y: hidden !important;
            -webkit-overflow-scrolling: touch !important;
            gap: 8px !important;
            padding: 0 4px !important;
            max-height: none !important;
        }
        
        #detailPlaceholder .business-location-section-navy .row.g-2 .col-12 {
            flex: 0 0 280px !important;
            min-width: 280px !important;
            max-width: 280px !important;
        }
        
        /* Location image smaller */
        #detailPlaceholder .business-location-section-navy [style*="height: 150px"] {
            height: 80px !important;
        }
        
        #detailPlaceholder .business-location-section-navy [style*="height: 150px"] img {
            height: 80px !important;
        }
        
        /* Reduce space between professional image and text - almost touching */
        .recommended-professional-info {
            margin-top: 0px !important; /* Remove top padding - near image */
            padding-top: 0px !important; /* Remove top padding */
            margin-bottom: 0px !important; /* Reduce bottom margin */
            padding-bottom: 0px !important; /* Reduce bottom padding */
        }
        
        /* Remove gap between image container and info div on mobile */
        .recommended-card-swipeable > div[style*="position: relative"] {
            margin-bottom: 0px !important; /* Remove bottom margin from image container */
        }
        
        .recommended-card-swipeable > div[style*="margin-bottom: 25px"] {
            margin-bottom: 0px !important; /* Almost touching - no gap */
        }
        
        /* Remove padding above and below Quick Book and Details buttons on mobile */
        .recommended-card-swipeable .mt-1 {
            margin-top: 0px !important; /* Remove top margin from button container */
            margin-bottom: 0px !important; /* Remove bottom margin */
            padding-top: 0px !important;
            padding-bottom: 0px !important;
        }
        
        /* Reduce spacing in recommended section info div - target all margin-top: 15px */
        .recommended-card-swipeable [style*="margin-top: 15px"] {
            margin-top: 0px !important; /* Remove top margin - near image */
            margin-bottom: 0px !important; /* Reduce bottom margin */
            padding-top: 0px !important;
            padding-bottom: 0px !important;
        }
        
        /* Target the recommended-professional-info div specifically */
        .recommended-card-swipeable .recommended-professional-info[style*="margin-top: 15px"] {
            margin-top: 0px !important;
            margin-bottom: 0px !important;
            padding-top: 0px !important;
            padding-bottom: 0px !important;
        }
        
        /* Ensure no gap between image and title - target the div containing the info */
        .recommended-card-swipeable > div + .recommended-professional-info {
            margin-top: 0px !important;
        }
        
        /* Remove any gap from flexbox spacing */
        .recommended-card-swipeable[style*="flex-direction: column"] {
            gap: 0px !important;
        }
        
        /* Remove padding between profile section and portfolio section */
        .recommended-card-swipeable > div[style*="flex-direction: row"] {
            margin-bottom: 0px !important;
            padding-bottom: 0px !important;
        }
        
        #detailPlaceholder {
            margin-top: 0px !important;
            padding-top: 10px !important; /* Minimal padding */
        }
        
        /* Reduce padding in recommended card on mobile */
        .recommended-card-swipeable {
            padding-top: 8px !important;
            padding-bottom: 8px !important;
        }
        
        /* Carousel container - ends 5px below display image */
        .recommended-carousel-container {
            height: 225px !important; /* Image (200px) + padding (20px) + space below (5px) */
        }
        
        #detailPlaceholder {
            height: 460px !important;
        }
        
        #detailPlaceholder > div > div[style*="flex: 1.5"] {
            min-height: 200px !important;
            max-height: 200px !important;
        }
        
        #detailPlaceholder > div > div[style*="flex: 0.7"] {
            min-height: 240px !important;
            max-height: 240px !important;
        }
        
        /* Rating badge smaller */
        .recommended-card-swipeable [style*="bottom: -5px"] {
            bottom: -3px !important;
            right: 8px !important;
            padding: 4px 8px !important;
            font-size: 0.7rem !important;
        }
        
        .recommended-card-swipeable [style*="bottom: -5px"] i {
            font-size: 0.65rem !important;
        }
        
        .recommended-card-swipeable [style*="bottom: -5px"] span {
            font-size: 0.65rem !important;
        }
        
        /* Professional info spacing smaller - much closer on smaller screens */
        .recommended-card-swipeable > div[style*="margin-bottom: 25px"] {
            margin-bottom: 2px !important;
        }
        
        .recommended-card-swipeable [style*="margin-top: 15px"] {
            margin-top: 0px !important; /* Almost touching - no gap */
        }
        
        /* Ensure all spacing is reduced in recommended section on mobile - almost touching */
        .recommended-card-swipeable > div > div[style*="margin-bottom: 25px"] {
            margin-bottom: 0px !important;
        }
        
        /* Text sizes in recommended cards - make smaller and centered */
        .recommended-professional-name {
            font-size: 0.9rem !important;
            margin-bottom: 0.3rem !important;
            text-align: center !important;
        }
        
        .recommended-professional-title {
            font-size: 0.75rem !important;
            margin-bottom: 0.3rem !important;
            text-align: center !important;
            color: #6c757d !important;
            font-weight: 500 !important;
        }
        
        .recommended-professional-company {
            font-size: 0.7rem !important;
            margin-bottom: 0.2rem !important;
            text-align: center !important;
            color: #6c757d !important;
        }
        
        .recommended-professional-location {
            font-size: 0.7rem !important;
            margin-bottom: 0.5rem !important;
            text-align: center !important;
            color: #6c757d !important;
        }
        
        .recommended-professional-info {
            margin-top: 0px !important; /* Almost touching - no gap */
        }
        
        /* Professional image margin reduced - bring text almost touching */
        .recommended-card-swipeable > div[style*="margin-bottom: 25px"] {
            margin-bottom: 0px !important;
        }
        
        .recommended-card-swipeable [style*="margin-bottom: 25px"] {
            margin-bottom: 0px !important;
        }
        
        /* Portfolio items bigger */
        #detailPlaceholder .col-6 {
            flex: 0 0 130px !important;
            min-width: 130px !important;
            max-width: 130px !important;
            padding: 4px !important;
        }
        
        #detailPlaceholder .col-6 img,
        #detailPlaceholder .col-6 video,
        #detailPlaceholder .col-6 > div {
            width: 100% !important;
            height: 130px !important;
            object-fit: cover !important;
            aspect-ratio: 1 !important;
        }
        
        /* Location image smaller */
        #detailPlaceholder .business-location-section-navy [style*="height: 150px"] {
            height: 80px !important;
        }
        
        #detailPlaceholder .business-location-section-navy [style*="height: 150px"] img {
            height: 80px !important;
        }
        
        /* Services horizontal scroll */
        #detailPlaceholder .business-location-section-navy .row.g-2 {
            display: flex !important;
            flex-direction: row !important;
            flex-wrap: nowrap !important;
            overflow-x: auto !important;
            overflow-y: hidden !important;
            -webkit-overflow-scrolling: touch !important;
            gap: 8px !important;
            padding: 0 4px !important;
            max-height: none !important;
        }
        
        #detailPlaceholder .business-location-section-navy .col-12 {
            flex: 0 0 280px !important;
            min-width: 280px !important;
            max-width: 280px !important;
        }
        
        /* Make section taller */
        .recommended-carousel-container {
            height: 225px !important; /* Image (200px) + padding (20px) + space below (5px) */
        }
        
        #detailPlaceholder {
            height: 460px !important; /* Increased from 420px */
        }
        
        #detailPlaceholder > div > div[style*="flex: 1.1"] {
            min-height: 200px !important; /* Increased */
            max-height: 200px !important;
        }
        
        #detailPlaceholder > div > div[style*="flex: 0.9"] {
            min-height: 240px !important; /* Increased */
            max-height: 240px !important;
        }
        
        /* Hide buttons on mobile */
        .recommended-buttons {
            display: none !important;
        }
        
        /* Categories section - smaller */
        .categories-section {
            margin-bottom: 1rem !important;
        }
        
        /* Progressive scaling for scroll items */
    }
    
    /* ============================================
       COMPREHENSIVE FIXES FOR ALL SECTIONS
       ============================================ */
    
    /* Recommended Section - Image on left, portfolio on right */
    .recommended-section h2 {
        text-align: center !important;
        margin-bottom: 2rem !important;
    }
    
    .recommended-card-swipeable {
        display: flex !important;
        flex-direction: row !important; /* Horizontal layout: image left, portfolio right */
        align-items: flex-start !important;
        justify-content: flex-start !important;
        padding: 10px !important; /* Reduced padding to raise image closer to button */
        gap: 20px !important;
    }
    
    .recommended-card-swipeable .professional-image-container {
        position: relative !important;
        flex-shrink: 0 !important;
        background: transparent !important; /* Remove black background */
    }
    
    .recommended-card-swipeable .professional-image-container,
    .recommended-card-swipeable .professional-image-container img {
        border-radius: 50% !important; /* Perfect circle */
        background: transparent !important; /* No black background */
    }
    
    .recommended-professional-info {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        width: 100% !important;
    }
    
    .carousel-controls {
        position: absolute !important;
        top: 10px !important; /* Closer to image */
        right: 10px !important;
        left: auto !important;
        bottom: auto !important;
        z-index: 1000 !important;
    }
    
    /* Portfolio frame on right of image */
    .recommended-portfolio-frame {
        flex: 1 !important;
        min-width: 0 !important;
        background: rgba(0, 31, 63, 0.05) !important;
        border: 2px solid rgba(0, 31, 63, 0.2) !important;
        border-radius: 20px !important;
        padding: 15px !important;
        overflow-x: auto !important; /* Horizontal scroll for portfolio */
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        max-height: 350px !important; /* Match image height */
    }
    
    /* Rating badge - bottom right corner of image */
    /* Duplicate rating rule removed - using the one in recommended section CSS above */
    
    /* Make details section taller to remove vertical scroll */
    #detailPlaceholder {
        min-height: 500px !important; /* Increased height */
        max-height: 600px !important; /* Allow more height */
        overflow-y: auto !important; /* Only scroll if absolutely necessary */
    }
    
    /* Portfolio and Services section - horizontal scroll, center aligned */
    #detailPlaceholder {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; /* Centre everything */
        justify-content: center !important;
        overflow-y: visible !important; /* Remove vertical scroll */
        overflow-x: hidden !important;
        padding: 20px !important;
    }
    
    #detailPlaceholder > div {
        display: flex !important;
        flex-direction: row !important; /* Horizontal layout for portfolio */
        flex-wrap: nowrap !important;
        overflow-x: hidden !important; /* No horizontal scroll on container - portfolio scrolls internally */
        overflow-y: hidden !important;
        gap: 0 !important; /* No gap - portfolio is full width */
        width: 100% !important;
        max-width: 100% !important;
        justify-content: flex-start !important;
        align-items: flex-start !important;
    }
    
    /* Portfolio section - horizontal scroll, transparent background, navy border */
    #detailPlaceholder .portfolio-section-navy {
        flex: 1 !important; /* Full width */
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        overflow-y: hidden !important; /* No vertical scroll */
        overflow-x: auto !important; /* Horizontal scroll */
        border: 2px solid #001f3f !important; /* Navy border */
        background: transparent !important; /* Transparent background */
        border-radius: 15px !important;
        padding: 20px !important;
        scrollbar-width: none !important; /* Firefox - hide scrollbar */
        -ms-overflow-style: none !important; /* IE/Edge - hide scrollbar */
    }
    
    #detailPlaceholder .portfolio-section-navy::-webkit-scrollbar {
        display: none !important; /* Hide scrollbar */
        width: 0 !important;
        height: 0 !important;
    }
    
    /* Portfolio row - horizontal scroll */
    #detailPlaceholder .portfolio-section-navy .row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 8px !important;
        width: max-content !important; /* Allow content to extend for horizontal scroll */
    }
    
    /* Portfolio text color - navy on transparent background */
    #detailPlaceholder .portfolio-section-navy,
    #detailPlaceholder .portfolio-section-navy h6,
    #detailPlaceholder .portfolio-section-navy p,
    #detailPlaceholder .portfolio-section-navy * {
        color: #001f3f !important; /* Navy text on transparent background */
    }
    
    /* Services section - horizontal scroll */
    #detailPlaceholder .services-scroll-container,
    #detailPlaceholder .business-location-section-navy {
        display: flex !important;
        flex-direction: row !important; /* Horizontal layout */
        flex-wrap: nowrap !important;
        overflow-x: auto !important; /* Horizontal scroll */
        overflow-y: hidden !important; /* No vertical scroll */
        -webkit-overflow-scrolling: touch !important;
        gap: 10px !important; /* Reduced gap */
        padding: 0 !important; /* Remove extra padding */
        width: 100% !important;
        max-width: 100% !important;
        scrollbar-width: none !important; /* Firefox - hide scrollbar */
        -ms-overflow-style: none !important; /* IE/Edge - hide scrollbar */
    }
    
    #detailPlaceholder .services-scroll-container::-webkit-scrollbar,
    #detailPlaceholder .business-location-section-navy::-webkit-scrollbar {
        display: none !important; /* Hide scrollbar */
        width: 0 !important;
        height: 0 !important;
    }
    
    #detailPlaceholder .services-scroll-row {
        display: flex !important;
        flex-direction: row !important; /* Horizontal, not vertical */
        flex-wrap: nowrap !important;
        gap: 10px !important; /* Reduced gap */
        width: max-content !important; /* Allow content to extend for horizontal scroll */
        min-width: 100% !important;
    }
    
    #detailPlaceholder .service-card-modern {
        flex: 0 0 200px !important; /* Fixed width for horizontal scroll - smaller */
        min-width: 200px !important;
        max-width: 200px !important;
        width: 200px !important;
        padding: 8px !important; /* Reduced padding */
        margin: 0 !important; /* Remove extra space */
    }
    
    /* Book now button - white text */
    #detailPlaceholder .service-card-modern .btn-sm,
    #detailPlaceholder .service-card-modern button,
    #detailPlaceholder .service-card-modern .btn-primary {
        width: 100% !important;
        margin-top: 6px !important;
        padding: 6px 10px !important;
        font-size: 0.75rem !important;
        font-weight: 600 !important;
        color: #ffffff !important; /* White text */
        background: #001f3f !important;
        border-color: #001f3f !important;
    }
    
    /* Quick Book button - white text and fix functionality */
    .recommended-card-swipeable .btn-success,
    .recommended-card-swipeable a.btn-success {
        color: #ffffff !important; /* White text */
        background: #28a745 !important;
        border-color: #28a745 !important;
        text-decoration: none !important;
    }
    
    .recommended-card-swipeable .btn-success:hover,
    .recommended-card-swipeable a.btn-success:hover {
        color: #ffffff !important; /* White text on hover */
        background: #218838 !important;
        border-color: #218838 !important;
    }
    
    /* Freelancers section - horizontal scroll, maintain size on all screens */
    .freelancers-section .deals-carousel-container {
        display: flex !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 12px !important;
        padding: 12px 16px !important; /* Professional padding */
        width: 100% !important;
        max-width: 100% !important;
        scroll-behavior: smooth !important;
        background: transparent !important; /* Transparent background */
    }
    
    .freelancers-section .deals-carousel-container > * {
        flex-shrink: 0 !important; /* Never shrink - maintain size */
        min-width: 240px !important; /* Fixed minimum width */
        width: 240px !important; /* Fixed width - no shrinking */
        max-width: 240px !important; /* Fixed max width */
    }
    
    .freelancers-section .card {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        flex-shrink: 0 !important; /* Never shrink */
        background: transparent !important; /* Transparent background on all screens */
        border-radius: 12px !important; /* Rounded edges */
    }
    
    .freelancers-section .card[style*="background"] {
        background: transparent !important; /* Override any inline background styles */
    }
    
    .freelancers-section .card-body {
        background: transparent !important; /* Transparent background */
    }
    
    .freelancers-section .card-body[style*="background"] {
        background: transparent !important; /* Override inline background styles */
    }
    
    /* Freelancer card images - consistent sizing */
    .freelancers-section .card img,
    .freelancers-section [style*="height: 200px"] img,
    .freelancers-section [style*="height: 180px"] img {
        width: 100% !important;
        height: 180px !important;
        min-height: 180px !important;
        max-height: 180px !important;
        object-fit: cover !important;
        border-radius: 12px 12px 0 0 !important;
    }
    
    .freelancers-section [style*="height: 200px"],
    .freelancers-section [style*="height: 180px"] {
        height: 180px !important;
        min-height: 180px !important;
        max-height: 180px !important;
        border-radius: 12px 12px 0 0 !important; /* Rounded top corners */
    }
    
    .freelancers-section .card-body {
        border-radius: 0 0 12px 12px !important; /* Rounded bottom corners */
    }
    
    /* Freelancer card text - black, no shadow */
    .freelancers-section .card-title,
    .freelancers-section .card-body h6,
    .freelancers-section .card-body p,
    .freelancers-section .card-body .text-muted,
    .freelancers-section .card-body .small,
    .freelancers-section .card-body i {
        color: #000000 !important; /* Black text */
        text-shadow: none !important; /* Remove text shadow */
    }
    
    /* Freelancer profile button - navy and smaller */
    .freelancers-section .btn-sm,
    .freelancers-section .btn-outline-light,
    .freelancers-section a.btn-sm {
        background: #001f3f !important; /* Navy background */
        color: #ffffff !important; /* White text */
        border-color: #001f3f !important; /* Navy border */
        font-size: 0.65rem !important; /* Smaller font */
        padding: 0.2rem 0.4rem !important; /* Smaller padding */
        min-height: auto !important;
    }
    
    /* Organizations and locations - 3 rows with horizontal scroll - MOBILE FIRST */
    .organizations-locations-row {
        display: grid !important;
        grid-template-columns: repeat(3, 110px) !important; /* 3 columns - fixed width for consistency */
        grid-auto-rows: 130px !important; /* Auto rows - allows horizontal expansion */
        gap: 8px !important; /* Professional gap */
        padding: 0 !important; /* Padding handled by wrapper */
        width: max-content !important; /* Allow horizontal scroll */
        min-width: 100% !important; /* At least full width */
        background: transparent !important; /* Transparent background */
    }
    
    /* Screens smaller than 388px - bigger cards with horizontal scroll when more than 10 items */
    @media (max-width: 387.98px) {
        .organizations-locations-scroll-wrapper {
            overflow-x: auto !important; /* Enable horizontal scroll */
            overflow-y: hidden !important;
            -webkit-overflow-scrolling: touch !important;
            scroll-behavior: smooth !important;
            padding: 12px 16px !important;
            width: 100% !important;
        }
        
        .organizations-locations-row {
            display: grid !important;
            grid-template-columns: repeat(3, 130px) !important; /* Bigger cards - 130px instead of 110px */
            grid-auto-rows: 150px !important; /* Bigger height - 150px instead of 130px */
            gap: 10px !important; /* Slightly bigger gap */
            width: max-content !important; /* Allow horizontal scroll */
            min-width: 100% !important;
            padding: 0 !important; /* Remove padding from row, handled by wrapper */
        }
        
        .org-loc-card-mobile {
            width: 130px !important; /* Bigger width */
            height: 150px !important; /* Bigger height */
            min-height: 150px !important;
            max-height: 150px !important;
        }
        
        .org-loc-card-mobile .card,
        .org-loc-card-mobile .organization-location-card {
            min-height: 150px !important;
            max-height: 150px !important;
            box-shadow: none !important; /* Remove shadow */
        }
        
        .org-loc-card-mobile .card-img-top,
        .org-loc-card-mobile [style*="height: 70px"] {
            height: 80px !important; /* Bigger image section */
            min-height: 80px !important;
            max-height: 80px !important;
        }
        
        .org-loc-card-mobile .bg-primary,
        .org-loc-card-mobile .bg-secondary {
            height: 80px !important; /* Match image height */
            min-height: 80px !important;
            max-height: 80px !important;
        }
        
        /* Remove shadow from cards */
        .org-loc-card-mobile .card.shadow-lg,
        .org-loc-card-mobile .organization-location-card.shadow-lg {
            box-shadow: none !important;
        }
        
        /* Make text black for better readability */
        .org-loc-card-mobile .org-loc-title,
        .org-loc-card-mobile .org-loc-text {
            color: #000000 !important; /* Black text */
        }
        
        .org-loc-card-mobile .card-title,
        .org-loc-card-mobile .card-text {
            color: #000000 !important; /* Black text */
        }
        
        .org-loc-card-mobile i {
            color: #000000 !important; /* Black icons */
        }
    }
    
    .organizations-locations-scroll-wrapper {
        background: transparent !important; /* Transparent background */
        overflow-x: auto !important; /* Enable horizontal scroll */
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-behavior: smooth !important;
        width: 100% !important;
        /* Hide scrollbar but keep functionality */
        scrollbar-width: none !important; /* Firefox */
        -ms-overflow-style: none !important; /* IE and Edge */
    }
    
    .organizations-locations-scroll-wrapper::-webkit-scrollbar {
        display: none !important; /* Chrome, Safari, Opera */
    }
    
    .organizations-locations-mobile-container {
        background: transparent !important; /* Transparent background */
    }
    
    .organizations-locations-section {
        background: transparent !important; /* Transparent background */
    }
    
    /* Ensure mobile grid is visible on all screen sizes */
    .organizations-locations-mobile-container {
        display: block !important; /* Always visible */
    }
    
    /* Organizations and Locations - Black text, no shadow, horizontal scroll enabled for all screens */
    .org-loc-card-mobile .card-title,
    .org-loc-card-mobile .card-text,
    .org-loc-card-mobile .org-loc-title,
    .org-loc-card-mobile .org-loc-text,
    .org-loc-card-mobile i,
    .organizations-locations-desktop .card-title,
    .organizations-locations-desktop .card-text,
    .organizations-locations-desktop .org-loc-title,
    .organizations-locations-desktop .org-loc-text,
    .organizations-locations-desktop i {
        color: #000000 !important; /* Black text */
        text-shadow: none !important; /* Remove text shadow */
    }
    
    /* Ensure horizontal scroll is enabled for organizations-locations on all screen sizes */
    .organizations-locations-scroll-wrapper {
        overflow-x: auto !important; /* Enable horizontal scroll */
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-behavior: smooth !important;
    }
    
    /* Hide desktop vertical list on all screen sizes */
    .organizations-locations-desktop {
        display: none !important; /* Always hidden */
    }
    
    .org-loc-card-mobile {
        width: 110px !important; /* Fixed width to match grid */
        height: 130px !important; /* Fixed height to match grid */
        min-height: 130px !important;
        max-height: 130px !important;
        overflow: hidden !important; /* Critical: ensures shadow follows border-radius */
        border-radius: 10px !important; /* Rounded container */
    }
    
    .org-loc-card-mobile .card,
    .org-loc-card-mobile .organization-location-card {
        width: 100% !important;
        height: 100% !important;
        min-height: 130px !important;
        max-height: 130px !important;
        display: flex !important;
        flex-direction: column !important;
        background: transparent !important; /* Transparent background on all screens */
        border-radius: 10px !important; /* Rounded edges for all cards */
        overflow: hidden !important; /* Critical: ensures shadow follows border-radius */
    }
    
    .org-loc-card-mobile .card[style*="background"],
    .org-loc-card-mobile .organization-location-card[style*="background"] {
        background: transparent !important; /* Override any inline background styles */
    }
    
    .org-loc-card-mobile .card-img-top,
    .org-loc-card-mobile [style*="height: 100px"] {
        height: 70px !important; /* Fixed image height */
        width: 100% !important;
        object-fit: cover !important;
        flex-shrink: 0 !important;
        border-radius: 10px 10px 0 0 !important; /* Rounded top corners */
    }
    
    .org-loc-card-mobile img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important; /* Fill image section completely */
    }
    
    /* Placeholder divs (cards without images) - rounded edges and transparent on ALL screens */
    .org-loc-card-mobile .bg-primary,
    .org-loc-card-mobile .bg-secondary {
        background: transparent !important; /* Transparent background */
        border-radius: 10px 10px 0 0 !important; /* Rounded top corners for org cards */
    }
    
    .freelancers-section .bg-primary {
        background: transparent !important; /* Transparent background */
        border-radius: 12px 12px 0 0 !important; /* Rounded top corners for freelance cards */
    }
    
    .org-loc-card-mobile .card-body {
        padding: 6px !important; /* Professional padding */
        flex: 1 !important; /* Fill remaining space */
        min-height: 0 !important;
        overflow: hidden !important; /* Prevent content overflow */
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important; /* Distribute content evenly */
        background: transparent !important; /* Transparent background */
        border-radius: 0 0 10px 10px !important; /* Rounded bottom corners */
    }
    
    .org-loc-card-mobile .card-body[style*="background"] {
        background: transparent !important; /* Override inline background styles */
    }
    
    /* Very small (up to 360px) */
    @media (max-width: 360px) {
        .scroll-item {
            width: 70px !important;
            min-width: 70px !important;
        }
        
        .category-item {
            padding: 0.4rem 0.6rem !important;
            font-size: 0.7rem !important;
        }
    }
    
    /* Small mobile (361px - 400px) - removed 406px to prevent transition lag */
    @media (min-width: 361px) and (max-width: 400px) {
        .scroll-item {
            width: 75px !important;
            min-width: 75px !important;
        }
        
        .category-item {
            padding: 0.45rem 0.7rem !important;
            font-size: 0.75rem !important;
        }
    }
    
    /* Medium mobile (401px - 500px) */
    @media (min-width: 401px) and (max-width: 500px) {
        .scroll-item {
            width: 80px !important;
            min-width: 80px !important;
        }
        
        .category-item {
            padding: 0.5rem 0.8rem !important;
            font-size: 0.8rem !important;
        }
    }
    
    /* Large mobile (501px - 670px) */
    @media (min-width: 501px) and (max-width: 670px) {
        .scroll-item {
            width: 85px !important;
            min-width: 85px !important;
        }
        
        .category-item {
            padding: 0.55rem 0.85rem !important;
            font-size: 0.85rem !important;
        }
    }
    
    /* Tablet (671px - 768px) */
    @media (min-width: 671px) and (max-width: 768px) {
        .scroll-item {
            width: 90px !important;
            min-width: 90px !important;
        }
        
        .category-icon {
            font-size: 1.2rem !important;
            height: 1.2rem !important;
            line-height: 1.2rem !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            flex-shrink: 0 !important;
        }
        
        .category-label {
            font-size: 0.65rem !important;
            line-height: 1.2 !important;
            text-align: center !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
        }
        
        .category-content {
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 4px !important;
            height: 100% !important;
        }
        
        .category-card-compact {
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            height: 100% !important;
        }
        
        /* Professionals section - smaller cards */
        .professional-card-compact {
            width: 100px !important;
            height: 100px !important;
        }
        
        .professional-image {
            width: 100px !important;
            height: 100px !important;
        }
        
        .professional-image i {
            font-size: 3rem !important;
        }
        
        /* Deals carousel - smaller cards */
        .deal-window-card {
            width: 220px !important;
            min-width: 220px !important;
        }
        
        .deal-image-container {
            height: 140px !important;
        }
        
        .deal-content {
            padding: 10px !important;
        }
        
        .deal-title {
            font-size: 0.85rem !important;
        }
        
        /* Freelancers section - smaller */
        .freelancers-section h2 {
            font-size: 1.2rem !important;
            margin-bottom: 1rem !important;
        }
        
        .freelancers-section .deals-carousel-container {
            overflow-x: auto !important; /* Enable horizontal scroll */
            overflow-y: hidden !important;
            -webkit-overflow-scrolling: touch !important;
            width: 100% !important;
            max-width: 100% !important;
        }
        
        .freelancers-section .deals-carousel-container > div {
            flex: 0 0 220px !important;
            min-width: 220px !important;
            flex-shrink: 0 !important;
        }
        
        /* Organizations & Locations section - enable horizontal scroll on mobile */
        .organizations-locations-section .deals-carousel-container {
            overflow-x: auto !important; /* Enable horizontal scroll */
            overflow-y: hidden !important;
            -webkit-overflow-scrolling: touch !important;
            width: 100% !important;
            max-width: 100% !important;
            display: flex !important;
            gap: 12px !important;
        }
        
        .organizations-locations-section .deals-carousel-container > div {
            flex: 0 0 220px !important;
            min-width: 220px !important;
            flex-shrink: 0 !important;
        }
        
        .freelancers-section .card-body {
            padding: 10px !important;
        }
        
        .freelancers-section [style*="height: 200px"] {
            height: 140px !important;
        }
        
        /* Organizations section - smaller */
        .organization-location-card {
            margin-bottom: 0.75rem !important;
        }
        
        /* All section headings - consistent size and left-aligned on mobile */
        .deals-section h2,
        .freelancers-section h2,
        .organizations-locations-section h2 {
            font-size: 1.4rem !important;
            font-weight: 700 !important;
            color: #001f3f !important;
            text-align: left !important;
            padding-left: 0 !important;
            margin-bottom: 1rem !important;
        }
        
        /* Carousel controls - smaller on mobile */
        .carousel-controls {
            bottom: 8px !important;
            right: 8px !important;
        }
        
        .carousel-controls .btn-primary {
            width: 32px !important;
            height: 32px !important;
            min-width: 32px !important;
        }
    }
    
    /* Extra small screens (iPhone SE, small Android) */
    @media (max-width: 480px) {
        h2 { font-size: 1.1rem !important; margin-bottom: 0.75rem !important; }
        
        .recommended-carousel-container {
            height: 225px !important; /* Image (200px) + padding (20px) + space below (5px) */
        }
        
        .recommended-card-swipeable .professional-image-container {
            width: 120px !important;
            height: 120px !important;
        }
        
        .recommended-card-swipeable [style*="font-size: 8rem"] {
            font-size: 3.5rem !important;
        }
        
        #detailPlaceholder {
            height: 280px !important;
            padding: 10px !important;
        }
        
        .scroll-item {
            width: 80px !important;
            min-width: 80px !important;
        }
        
        .deal-window-card {
            width: 200px !important;
            min-width: 200px !important;
        }
        
        .freelancers-section .deals-carousel-container > div {
            flex: 0 0 200px !important;
            min-width: 200px !important;
        }
    }
    
    /* Make next button smaller and arrow only */
    .carousel-controls .btn-primary {
        padding: 0 !important;
        min-width: 40px !important;
        width: 40px !important;
        height: 40px !important;
        border-radius: 50% !important;
    }
    
    .carousel-controls .btn-primary i {
        font-size: 1.2rem !important;
        margin: 0 !important;
    }
    
    @media (max-width: 768px) {
        .carousel-controls {
            bottom: 10px !important;
            right: 10px !important;
        }
        
        .carousel-controls .btn-primary {
            width: 35px !important;
            height: 35px !important;
        }
    }
    
    
    .deal-more-link {
        font-size: 0.85rem;
        color: #001f3f;
        text-decoration: none;
        font-weight: 500;
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }
    
    .deal-more-link:hover {
        color: #003366;
        text-decoration: underline;
    }
    
    @media (max-width: 576px) {
        .deal-window-card {
            width: 240px;
            min-width: 240px;
        }
        
        .deal-image-container {
            height: 160px;
        }
    }
    
    @media (max-width: 576px) {
        .heart-dislike-btn {
            width: 30px !important;
            height: 30px !important;
            font-size: 0.8rem !important;
        }
    }
    
    /* Organization and Location cards - gunmetal gray text on white background by default */
    .card[style*="background: #ffffff"] h5,
    .card[style*="background: #ffffff"] p,
    .card[style*="background: #ffffff"] span,
    .card[style*="background: #ffffff"] * {
        color: #5F6368 !important;
    }
    
    /* Organization and Location cards - ensure default state is gunmetal gray */
    .organization-location-card .org-loc-title,
    .organization-location-card .org-loc-text {
        color: #5F6368 !important;
    }
    
    /* Organizations & Locations Section - Smaller tiles with mobile grid */
    .organization-location-card {
        height: 100% !important; /* Always use full height of container */
        min-height: 100% !important; /* Ensure full height */
        display: flex !important;
        flex-direction: column !important;
        border-radius: 10px !important; /* Rounded edges */
        overflow: hidden !important; /* Ensure shadow follows border-radius */
    }
    
    /* Ensure shadow follows rounded corners */
    .organization-location-card,
    .org-loc-card-mobile .card,
    .org-loc-card-mobile .organization-location-card {
        border-radius: 10px !important;
        overflow: hidden !important; /* Critical: makes shadow follow border-radius */
    }
    
    /* Override Bootstrap shadow-lg to ensure rounded shadow */
    /* The key is overflow: hidden on the element with border-radius */
    .organization-location-card.shadow-lg,
    .org-loc-card-mobile .card.shadow-lg,
    .org-loc-card-mobile .organization-location-card.shadow-lg {
        border-radius: 10px !important;
        overflow: hidden !important; /* Critical: makes shadow follow border-radius */
    }
    
    /* For mobile cards, ensure border-radius matches */
    .org-loc-card-mobile {
        border-radius: 10px !important;
        overflow: hidden !important; /* Ensures shadow clipping */
    }
    
    /* Ensure card body fills remaining space - always full height */
    .organization-location-card .card-body {
        flex: 1 !important; /* Fill remaining space */
        min-height: 0 !important; /* Allow flex shrinking */
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important; /* Distribute content evenly */
    }
    
    /* Ensure card body takes full height even when empty */
    .organization-location-card .card-body:empty::before {
        content: '';
        display: block;
        flex: 1;
    }
    
    /* Mobile: 2-column grid */
    @media (max-width: 767.98px) {
        .organization-location-card {
            margin-bottom: 0.5rem;
        }
        
        .organization-location-card .card-body {
            padding: 0.75rem !important;
        }
        
        .organization-location-card .org-loc-title {
            font-size: 0.85rem !important;
            margin-bottom: 0.25rem !important;
        }
        
        .organization-location-card .org-loc-text {
            font-size: 0.7rem !important;
            margin-bottom: 0.25rem !important;
        }
        
        /* Keep organization location images at original size in organizations section */
        .organization-location-card [style*="height: 120px"] {
            height: 120px !important; /* Keep original size - don't make smaller */
        }
        
        .organization-location-card [style*="font-size: 2.5rem"] {
            font-size: 2rem !important;
        }
        
        /* Organizations & Locations - Always use mobile grid, hide desktop vertical list */
        .organizations-locations-desktop {
            display: none !important; /* Hide desktop vertical list on all screens */
        }
        
        .organizations-locations-mobile-container {
            display: block !important; /* Always show mobile grid on all screens */
        }
        
        /* Mobile: Horizontal scroll with 3 rows visible */
        @media (max-width: 767.98px) {
            .organizations-locations-desktop {
                display: none !important;
            }
            
            .organizations-locations-mobile-container {
                display: block !important;
            }
            
            /* Hide any badges on categories and logos */
            .category-item .badge,
            .category-card-compact .badge,
            .mobile-premium-logo .badge,
            .logo-container-3d .badge {
                display: none !important;
            }
            
            .organizations-locations-scroll-wrapper {
                width: 100% !important;
                overflow-x: auto !important;
                overflow-y: hidden !important;
                -webkit-overflow-scrolling: touch !important;
                scroll-behavior: smooth !important;
                padding: 0 16px !important; /* Professional padding - consistent */
            }
        }
    }
    
    /* MOBILE FIRST: All screen sizes - Transparent backgrounds (no height restrictions) */
    /* Cards should be transparent on ALL screen sizes, not just small ones */
    .freelancers-section .card,
    .org-loc-card-mobile .card,
    .org-loc-card-mobile .organization-location-card {
        background: transparent !important;
    }
    
    .freelancers-section .card[style*="background"],
    .org-loc-card-mobile .card[style*="background"],
    .org-loc-card-mobile .organization-location-card[style*="background"] {
        background: transparent !important;
    }
    
    .freelancers-section .card-body,
    .org-loc-card-mobile .card-body {
        background: transparent !important;
    }
    
    .freelancers-section .card-body[style*="background"],
    .org-loc-card-mobile .card-body[style*="background"] {
        background: transparent !important;
    }
    
    /* Placeholder backgrounds transparent on all screens */
    .org-loc-card-mobile .bg-primary,
    .org-loc-card-mobile .bg-secondary {
        background: transparent !important;
    }
    
    /* Small screens - width only, no height restrictions */
    @media (max-width: 400.5px) {
        /* Freelance Professionals Section - Smaller cards with transparent background */
        .freelancers-section h2 {
            font-size: 1.4rem !important;
            margin-bottom: 0.75rem !important;
        }
        
        .freelancers-section .deals-carousel-container {
            padding: 0 16px !important; /* Professional padding - consistent */
            gap: 12px !important; /* Professional gap */
        }
        
        .freelancers-section .deals-carousel-container > div {
            flex: 0 0 240px !important; /* Maintain size - no shrinking */
            min-width: 240px !important;
            max-width: 240px !important;
        }
        
        .freelancers-section .card {
            height: 280px !important;
            min-height: 280px !important;
            max-height: 280px !important;
            border-radius: 12px !important; /* Rounded edges */
        }
        
        .freelancers-section [style*="height: 200px"] {
            height: 150px !important; /* Smaller image */
            border-radius: 12px 12px 0 0 !important; /* Rounded top corners */
        }
        
        .freelancers-section .card-body {
            padding: 8px !important;
            min-height: 130px !important;
            border-radius: 0 0 12px 12px !important; /* Rounded bottom corners */
        }
        
        .freelancers-section .card-title {
            font-size: 0.9rem !important;
        }
        
        .freelancers-section .text-muted {
            font-size: 0.7rem !important;
        }
        
        .freelancers-section .text-white {
            font-size: 0.65rem !important;
        }
        
        .freelancers-section .btn-sm {
            font-size: 0.65rem !important;
            padding: 0.2rem 0.4rem !important;
        }
        
        /* Organizations & Locations Section - Consistent sizing */
        .organizations-locations-section h2 {
            font-size: 1.4rem !important;
            margin-bottom: 0.75rem !important;
            padding: 0 16px !important; /* Professional padding */
        }
        
        .organizations-locations-scroll-wrapper {
            padding: 0 16px !important; /* Professional padding - consistent */
        }
        
        /* Cards maintain consistent size - no shrinking */
        /* Transparent backgrounds and rounded edges already set globally above */
    }
    
    /* MOBILE FIRST: 380px and below - Smallest screens (width only, no height restriction) */
    @media (max-width: 380px) {
        /* Freelance Professionals Section - Even smaller with transparent background */
        .freelancers-section h2 {
            font-size: 1.2rem !important;
            margin-bottom: 0.5rem !important;
        }
        
        .freelancers-section .deals-carousel-container {
            padding: 0 16px !important; /* Professional padding - consistent */
            gap: 12px !important; /* Professional gap */
        }
        
        .freelancers-section .deals-carousel-container > div {
            flex: 0 0 240px !important; /* Maintain size - no shrinking */
            min-width: 240px !important;
            max-width: 240px !important;
        }
        
        .freelancers-section .card {
            height: 260px !important;
            min-height: 260px !important;
            max-height: 260px !important;
            border-radius: 10px !important; /* Rounded edges */
        }
        
        .freelancers-section [style*="height: 200px"] {
            height: 140px !important; /* Smaller image */
            border-radius: 10px 10px 0 0 !important; /* Rounded top corners */
        }
        
        .freelancers-section .card-body {
            padding: 6px !important;
            min-height: 120px !important;
            border-radius: 0 0 10px 10px !important; /* Rounded bottom corners */
        }
        
        .freelancers-section .card-title {
            font-size: 0.85rem !important;
        }
        
        .freelancers-section .text-muted {
            font-size: 0.65rem !important;
        }
        
        .freelancers-section .text-white {
            font-size: 0.6rem !important;
        }
        
        .freelancers-section .btn-sm {
            font-size: 0.6rem !important;
            padding: 0.15rem 0.35rem !important;
        }
        
        /* Organizations & Locations Section - Even smaller with fixed sizes */
        .organizations-locations-section h2 {
            font-size: 1.2rem !important;
            margin-bottom: 0.5rem !important;
        }
        
        .organizations-locations-scroll-wrapper {
            padding: 0 16px !important; /* Professional padding - consistent */
        }
        
        .organizations-locations-row {
            grid-template-columns: repeat(3, 90px) !important; /* Fixed column width */
            grid-auto-rows: 110px !important; /* Fixed row height - same size regardless of content */
            gap: 4px !important;
        }
        
        .org-loc-card-mobile {
            width: 90px !important;
            height: 110px !important;
            min-height: 110px !important;
            max-height: 110px !important; /* Fixed height */
        }
        
        .org-loc-card-mobile .card,
        .org-loc-card-mobile .organization-location-card {
            height: 110px !important;
            min-height: 110px !important;
            max-height: 110px !important; /* Fixed height - same size regardless of content */
            background: transparent !important; /* Transparent background */
            border-radius: 8px !important; /* Rounded edges */
        }
        
        .org-loc-card-mobile .card[style*="background: #ffffff"],
        .org-loc-card-mobile .organization-location-card[style*="background: #ffffff"] {
            background: transparent !important; /* Override white background */
        }
        
        .org-loc-card-mobile [style*="height: 100px"] {
            height: 55px !important; /* Fixed image height */
            width: 100% !important; /* Full width */
            object-fit: cover !important; /* Fill image section */
            border-radius: 8px 8px 0 0 !important; /* Rounded top corners */
        }
        
        .org-loc-card-mobile img {
            width: 100% !important;
            height: 100% !important;
            object-fit: cover !important; /* Fill image section completely */
        }
        
        /* Make placeholder backgrounds transparent */
        .org-loc-card-mobile .bg-primary,
        .org-loc-card-mobile .bg-secondary {
            background: transparent !important;
        }
        
        .org-loc-card-mobile .card-body {
            padding: 3px !important;
            flex: 1 !important; /* Fill remaining space */
            min-height: calc(110px - 55px) !important; /* Minimum height after image */
            height: auto !important; /* Auto height to fill */
            overflow: hidden !important; /* Prevent content overflow */
            display: flex !important;
            flex-direction: column !important;
            justify-content: space-between !important; /* Distribute content evenly */
            background: transparent !important; /* Transparent background */
            border-radius: 0 0 8px 8px !important; /* Rounded bottom corners */
        }
        
        /* Ensure card body fills even when content is minimal */
        .org-loc-card-mobile .card-body::after {
            content: '';
            flex: 1;
            min-height: 0;
        }
        
        .org-loc-card-mobile .org-loc-title {
            font-size: 0.55rem !important;
            line-height: 1.0 !important;
            margin-bottom: 1px !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
            white-space: nowrap !important;
        }
        
        .org-loc-card-mobile .org-loc-text {
            font-size: 0.45rem !important;
            line-height: 1.0 !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
            white-space: nowrap !important;
        }
        
        .org-loc-card-mobile [style*="font-size: 2rem"] {
            font-size: 1.3rem !important; /* Smaller icon */
        }
    }
    }
    
    /* Tablet: 3-column grid */
    @media (min-width: 768px) and (max-width: 991.98px) {
        .organization-location-card [style*="height: 120px"] {
            height: 110px !important;
        }
    }
    
    /* Desktop: 4-column grid (already set via col-lg-3) */
    @media (min-width: 992px) {
        .organization-location-card {
            max-width: 100%;
        }
    }
    
    .organization-location-card .org-loc-title {
        font-weight: 700 !important;
    }
    
    .organization-location-card .org-loc-text i {
        color: #5F6368 !important;
    }
    
    /* Organization and Location cards hover - navy text, NOT bold */
    .organization-location-card:hover .org-loc-title,
    .organization-location-card:hover .org-loc-text {
        color: #001f3f !important;
        font-weight: inherit !important;
    }
    
    .organization-location-card:hover .org-loc-title {
        font-weight: 700 !important;
    }
    
    .organization-location-card:hover .org-loc-text i {
        color: #001f3f !important;
    }
    
    p, .text-muted {
        color: #e0e0e0 !important;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
    }
    
    .card-body, .card-text {
        color: #e0e0e0 !important;
    }
    
    .card-title {
        color: #ffffff !important;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
    }
    
    /* Global Search Section - Follow community pattern */
    .global-search-section {
        width: 100% !important; /* Use 100% NOT 100vw to prevent scrollbar overflow */
        max-width: 100% !important; /* Prevent overflow */
        min-width: 0 !important;
        padding: 20px min(1rem, 4vw); /* Responsive padding like community */
        background: rgba(42, 42, 42, 0.95);
        backdrop-filter: blur(10px);
        border-bottom: 1px solid var(--bs-primary);
        border-opacity: 0.3;
        margin: 0 !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important; /* Prevent horizontal scroll */
    }
    
    .global-search-form .form-control:focus {
        background: var(--bs-dark-card) !important;
        border-color: var(--bs-primary) !important;
        color: var(--bs-text-primary) !important;
        box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
    }
    
    .global-search-form .input-group-text {
        color: var(--bs-text-primary);
    }
    
    /* Horizontal Scroll Containers */
    .horizontal-scroll-container {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        scrollbar-width: thin; /* Firefox - show thin scrollbar */
        -ms-overflow-style: auto; /* IE/Edge - show scrollbar */
        position: relative;
        padding: 10px 0;
        width: 100%;
        background: #ffffff;
    }
    
    .horizontal-scroll-container::-webkit-scrollbar {
        height: 6px; /* Chrome/Safari - show thin scrollbar */
    }
    
    .horizontal-scroll-container::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 3px;
    }
    
    .horizontal-scroll-container::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 3px;
    }
    
    .horizontal-scroll-container::-webkit-scrollbar-thumb:hover {
        background: #555;
    }
    
    /* Categories horizontal scroll content */
    .horizontal-scroll-content {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 12px;
        padding: 0 16px;
        min-width: max-content; /* Ensure content doesn't shrink */
    }
    
    /* Thin scrollbars for detail sections */
    #detailPlaceholder,
    #detailPlaceholder > div > div {
        scrollbar-width: thin;
        scrollbar-color: rgba(255,255,255,0.3) transparent;
    }
    
    #detailPlaceholder::-webkit-scrollbar,
    #detailPlaceholder > div > div::-webkit-scrollbar {
        width: 4px;
        height: 4px;
    }
    
    #detailPlaceholder::-webkit-scrollbar-track,
    #detailPlaceholder > div > div::-webkit-scrollbar-track {
        background: transparent;
    }
    
    #detailPlaceholder::-webkit-scrollbar-thumb,
    #detailPlaceholder > div > div::-webkit-scrollbar-thumb {
        background-color: rgba(255,255,255,0.3);
        border-radius: 2px;
    }
    
    #detailPlaceholder::-webkit-scrollbar-thumb:hover,
    #detailPlaceholder > div > div::-webkit-scrollbar-thumb:hover {
        background-color: rgba(255,255,255,0.5);
    }
    
    /* Last Minute Deals Scroll Container */
    .last-minute-deals-scroll {
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        scrollbar-width: thin;
        scrollbar-color: var(--bs-primary) rgba(42, 42, 42, 0.5);
    }
    
    .last-minute-deals-scroll::-webkit-scrollbar {
        width: 8px;
    }
    
    .last-minute-deals-scroll::-webkit-scrollbar-track {
        background: rgba(42, 42, 42, 0.5);
        border-radius: 10px;
    }
    
    .last-minute-deals-scroll::-webkit-scrollbar-thumb {
        background: var(--bs-primary);
        border-radius: 10px;
    }
    
    .last-minute-deals-scroll::-webkit-scrollbar-thumb:hover {
        background: var(--bs-primary);
        opacity: 0.8;
    }
    
    /* Ensure Quick Book and Last Minute Deals are side by side on ALL screen sizes - NEVER stack */
    .quick-book-last-minute-row {
        display: flex !important;
        flex-wrap: nowrap !important;
        flex-direction: row !important;
        width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        gap: 8px !important;
        align-items: stretch !important;
    }
    
    /* Force side by side on ALL screen sizes - override Bootstrap completely */
    .quick-book-last-minute-row > div,
    .quick-book-column,
    .last-minute-column {
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
        float: none !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
    
    /* Quick Book and Last Minute Deals - equal width (50% each minus gap) on ALL screen sizes */
    .quick-book-column,
    .last-minute-column {
        flex: 0 0 calc(50% - 4px) !important;
        max-width: calc(50% - 4px) !important;
        width: calc(50% - 4px) !important;
        min-width: 0 !important;
        display: flex !important;
        box-sizing: border-box !important;
    }
    
    /* Last Minute Deals - left aligned (first in row) */
    .last-minute-column {
        padding-right: 4px !important;
        padding-left: 0 !important;
        margin-left: 0 !important;
        text-align: left !important;
    }
    
    /* Remove any left indentation from last minute deal cards */
    .last-minute-column .last-minute-deals-scroll,
    .last-minute-column .horizontal-scroll-content {
        padding-left: 0 !important;
        margin-left: 0 !important;
    }
    
    .last-minute-column .deal-window-card:first-child {
        margin-left: 0 !important;
    }
    
    /* Quick Book - right aligned (second in row) */
    .quick-book-column {
        padding-left: 4px !important;
        padding-right: 0 !important;
        text-align: left !important;
    }
    
    /* Ensure same width on all screen sizes - no media queries needed */
    /* Prevent any stacking on any screen size - ALWAYS side by side */
    @media (max-width: 575.98px) {
        .quick-book-last-minute-row {
            flex-direction: row !important;
            flex-wrap: nowrap !important;
            gap: 4px !important;
            overflow-x: hidden !important;
        }
            .quick-book-column,
            .last-minute-column {
                flex: 0 0 calc(50% - 2px) !important;
                max-width: calc(50% - 2px) !important;
                width: calc(50% - 2px) !important;
                min-width: 0 !important;
            }
    }
    
    /* Custom scrollbar for last minute deals */
    .last-minute-deals-scroll::-webkit-scrollbar {
        width: 6px;
    }
    .last-minute-deals-scroll::-webkit-scrollbar-track {
        background: rgba(42, 42, 42, 0.5);
        border-radius: 10px;
    }
    .last-minute-deals-scroll::-webkit-scrollbar-thumb {
        background: var(--bs-primary);
        border-radius: 10px;
    }
    .last-minute-deals-scroll::-webkit-scrollbar-thumb:hover {
        background: var(--bs-success);
    }
    
    /* Additional override to prevent Bootstrap column classes from interfering */
    .quick-book-last-minute-row .col-6,
    .quick-book-last-minute-row .col-xl-5,
    .quick-book-last-minute-row .col-xl-7,
    .quick-book-last-minute-row [class*="col-"] {
        display: block !important;
    }
    .quick-book-last-minute-row .quick-book-column,
    .quick-book-last-minute-row .last-minute-column {
        flex: 0 0 calc(50% - 4px) !important;
        max-width: calc(50% - 4px) !important;
        width: calc(50% - 4px) !important;
        min-width: 0 !important;
    }
    
    /* Categories and professionals sections - full width like screen, left aligned */
    .categories-section, .professionals-section, .deals-section, .recommended-section, .freelancers-section, .organizations-locations-section {
        margin-left: 0 !important; /* Fill screen width */
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important; /* Fill screen width dynamically */
        max-width: 100% !important;
        box-sizing: border-box !important;
        text-align: left !important; /* Left align, not center */
    }
    
    .categories-section .horizontal-scroll-container,
    .professionals-section .horizontal-scroll-container {
        display: flex;
        justify-content: flex-start !important; /* Left align, not center */
    }
    
    .horizontal-scroll-container {
        padding-left: min(1rem, 4vw) !important; /* Responsive padding like community */
        padding-right: min(1rem, 4vw) !important;
        width: 100% !important; /* Fill screen width dynamically */
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Ensure all content sections use full width */
    .container-fluid.px-0 {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Override base template container for home page - use viewport width */
    main.container-fluid {
        width: 100% !important; /* Use 100% NOT 100vw to prevent scrollbar overflow */
        max-width: 100% !important; /* Prevent overflow */
        min-width: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
    /* Clip page-level horizontal overflow only when NOT using 2026 home rows (those scroll inside .mobile-home-scroll-row / .chips). */
    main.container-fluid:not(:has(.mobile-home-page-2026)) {
        overflow-x: hidden !important;
    }
    /* Outer shell + wrapper: base enforceViewport() sets inline overflow-x:hidden; !important here wins. Same as discovery parity. */
    body.mobile-home-active #page-scaling-wrapper:has(.mobile-home-page-2026),
    html.mobile-home-active #page-scaling-wrapper:has(.mobile-home-page-2026),
    body.home-page #page-scaling-wrapper:has(.mobile-home-page-2026),
    html.home-page #page-scaling-wrapper:has(.mobile-home-page-2026) {
        overflow-x: visible !important;
    }
    body.mobile-home-active main.container-fluid.hubliq-main-shell:has(.mobile-home-page-2026),
    html.mobile-home-active main.container-fluid.hubliq-main-shell:has(.mobile-home-page-2026) {
        overflow-x: visible !important;
    }
    
    /* Ensure home page content uses full width and fills screen dynamically */
    .home-page-content {
        width: 100% !important; /* Fill screen width dynamically */
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }
    
    /* All main section containers fill screen width */
    .home-page-content > div,
    .categories-section,
    .professionals-section,
    .deals-section,
    .freelancers-section,
    .organizations-locations-section {
        width: 100% !important; /* Fill screen width dynamically */
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }
    
    /* Ensure all content scales with the wrapper */
    #page-scaling-wrapper .home-page-content,
    #page-scaling-wrapper .home-page-content > * {
        max-width: 100% !important;
        width: 100% !important;
    }
    
    /* Override fixed max-widths that break scaling */
    #page-scaling-wrapper [style*="max-width: 1390px"] {
        max-width: 100% !important;
    }
    
    /* Categories - Manual Scroll with Loop (NO AUTO-SCROLL) */
    #categoriesScroll .horizontal-scroll-content {
        display: flex;
        gap: 15px;
        width: 20% !important; /* 20% of scroll container width */
        /* No animation - user scrolls manually */
    }
    
    /* Professionals - Manual Scroll with Auto-Scroll Fallback */
    #professionalsScroll {
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none; /* Firefox - hide scrollbar */
        -ms-overflow-style: none; /* IE/Edge - hide scrollbar */
        width: 100%;
    }
    
    #professionalsScroll::-webkit-scrollbar {
        display: none; /* Chrome/Safari - hide scrollbar */
    }
    
    #professionalsScroll {
        width: 100% !important; /* Full screen width like community */
        max-width: 100% !important;
        padding: 0 min(1rem, 4vw) !important; /* Responsive padding like community */
        box-sizing: border-box !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        overflow-x: auto !important; /* Horizontal scroll */
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    #professionalsScroll .horizontal-scroll-content {
        display: flex !important;
        gap: 8px !important; /* Professional gap between items */
        width: max-content !important; /* Content-based width for horizontal scroll */
        align-items: flex-start !important; /* Top align for consistent layout */
        flex-wrap: nowrap !important; /* Prevent wrapping */
        /* Animation removed - using JavaScript for bidirectional scrolling */
    }
    
    #professionalsScroll .horizontal-scroll-content.paused {
        animation: none;
    }
    
    /* MOBILE BASE - Mobile-first design with proper image sizing */
    /* MOBILE-FIRST: Smaller images that fit properly in circles, larger container for text */
    .scroll-item.professional-card-item {
        flex-shrink: 0;
        width: 110px !important; /* Container width - accommodates text above + circle + name below */
        min-width: 110px !important;
        max-width: 110px !important;
        height: auto !important; /* Auto height to accommodate all elements */
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 0 !important; /* No gap - spacing handled by individual elements */
        border-radius: 0 !important; /* Not a circle - container is rectangular */
    }
    
    /* Professional Card Wrapper - Bigger container, smaller image for perfect circle */
    .professional-card-wrapper {
        position: relative;
        width: 120px !important; /* Bigger container */
        height: 120px !important;
        min-width: 120px !important;
        min-height: 120px !important;
        max-width: 120px !important;
        max-height: 120px !important;
        overflow: visible !important; /* Allow badges to show outside circle */
        border-radius: 50% !important; /* Perfect circle */
        flex-shrink: 0 !important;
        margin: 0 auto !important; /* Center the circle */
        margin-top: 8px !important; /* Space above to separate from text */
        margin-bottom: 12px !important; /* Space below for rating */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
    }
    
    @media (max-width: 768px) {
        .professional-card-wrapper {
            width: 110px !important;
            height: 110px !important;
            min-width: 110px !important;
            min-height: 110px !important;
            max-width: 110px !important;
            max-height: 110px !important;
        }
    }
    
    @media (max-width: 480px) {
        .professional-card-wrapper {
            width: 100px !important;
            height: 100px !important;
            min-width: 100px !important;
            min-height: 100px !important;
            max-width: 100px !important;
            max-height: 100px !important;
        }
    }
    
    /* Ensure the compact card also allows overflow for badges */
    .professional-card-compact {
        overflow: visible !important; /* Allow badges to show */
    }
    
    .professional-image {
        width: 100% !important; /* Full width - show 100% of image */
        height: 100% !important; /* Full height - show 100% of image */
        border-radius: 50% !important; /* Perfect circle */
        overflow: hidden !important; /* Clip to circle */
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 auto !important;
    }
    
    .professional-image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important; /* Ensure image fills circle properly */
        border-radius: 50% !important; /* Perfect circle */
        display: block !important;
        position: relative !important;
        z-index: 1 !important; /* Ensure image is above background */
    }
    
    .professional-image-placeholder {
        width: 100% !important;
        height: 100% !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Very small gap between items - professionals close together */
    #professionalsScroll .horizontal-scroll-content {
        gap: 6px !important; /* Very small gap - professionals very close together */
    }
    
    /* Progressive scaling for tablets - maintain proper proportions */
    @media (min-width: 768px) and (max-width: 1023px) {
        .scroll-item.professional-card-item {
            width: 130px !important;
            min-width: 130px !important;
            max-width: 130px !important;
        }
        .professional-card-wrapper {
            width: 95px !important;
            height: 95px !important;
            min-width: 95px !important;
            min-height: 95px !important;
            max-width: 95px !important;
            max-height: 95px !important;
        }
        #professionalsScroll .horizontal-scroll-content {
            gap: 10px !important;
        }
    }
    
    @media (min-width: 1024px) and (max-width: 1439px) {
        .scroll-item.professional-card-item {
            width: 150px !important;
            min-width: 150px !important;
            max-width: 150px !important;
        }
        .professional-card-wrapper {
            width: 110px !important;
            height: 110px !important;
            min-width: 110px !important;
            min-height: 110px !important;
            max-width: 110px !important;
            max-height: 110px !important;
        }
        #professionalsScroll .horizontal-scroll-content {
            gap: 12px !important;
        }
    }
    
    /* DESKTOP: Scale UP from mobile base - keep proportional */
    @media (min-width: 1440px) {
        .scroll-item.professional-card-item {
            width: 170px !important;
            min-width: 170px !important;
            max-width: 170px !important;
        }
        
        .professional-card-wrapper {
            width: 130px !important;
            height: 130px !important;
            min-width: 130px !important;
            min-height: 130px !important;
            max-width: 130px !important;
            max-height: 130px !important;
        }
        
        #professionalsScroll .horizontal-scroll-content {
            gap: 14px !important;
        }
    }
    
    .professional-card-compact {
        background: transparent !important;
        backdrop-filter: none !important;
        border-radius: 50% !important;
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        border: none !important;
        transition: all 0.3s ease !important;
        cursor: pointer !important;
        position: relative !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .professional-card-compact:hover {
        transform: scale(1.05) !important;
    }
    
    .professional-image-placeholder {
        background: linear-gradient(135deg, rgba(0,31,63,0.1) 0%, rgba(0,31,63,0.05) 100%) !important;
        opacity: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 100% !important;
        border-radius: 50% !important;
    }
    
    .professional-image-placeholder i {
        font-size: 2.5rem !important;
        color: rgba(0,31,63,0.4) !important;
    }
    
    @media (min-width: 768px) {
        .professional-image-placeholder i {
            font-size: 3rem !important;
        }
    }
    
    @media (min-width: 1440px) {
        .professional-image-placeholder i {
            font-size: 3.5rem !important;
        }
    }
    
    .professional-info {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 50%, transparent 100%);
        padding: 8px;
        text-align: center;
        border-radius: 0 0 50% 50%;
    }
    
    /* MOBILE-FIRST: Ratings and live badge below circle, not overlapping */
    .professional-rating-top {
        position: absolute !important;
        bottom: -40px !important; /* Below circle, not overlapping */
        left: 50% !important; /* Center horizontally */
        transform: translateX(-50%) !important; /* Center the rating */
        background: rgba(255, 255, 255, 0.95) !important; /* Slight background for visibility */
        padding: 4px 8px !important;
        border-radius: 12px !important;
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
        z-index: 30 !important; /* Higher z-index */
        backdrop-filter: blur(8px) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
        pointer-events: none !important;
        width: auto !important;
        min-width: 50px !important;
        visibility: visible !important;
        opacity: 1 !important;
        white-space: nowrap !important;
    }
    
    .professional-live-badge {
        position: absolute !important;
        bottom: -40px !important; /* Below circle, same level as rating */
        left: 20% !important; /* Left side, not overlapping rating */
        transform: none !important;
        width: 24px !important;
        height: 24px !important;
        background: transparent !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 30 !important; /* Higher z-index */
        backdrop-filter: blur(8px) !important;
        box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3) !important;
        border: 2px solid rgba(220, 53, 69, 0.6) !important;
        pointer-events: none !important;
    }
    
    /* Live badge is now defined above with rating */
    
    /* Ensure card item has enough space above and below for text, image, and badges */
    .professional-card-item {
        padding-top: 45px !important; /* Space above for text */
        padding-bottom: 50px !important; /* Space below for rating */
        min-height: auto !important; /* Auto height - mobile-first */
        height: auto !important; /* Auto height */
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }
    
    @media (max-width: 768px) {
        .professional-card-item {
            padding-top: 40px !important;
            padding-bottom: 45px !important;
            min-height: auto !important;
            height: auto !important;
        }
    }
    
    @media (max-width: 480px) {
        .professional-card-item {
            padding-top: 35px !important;
            padding-bottom: 40px !important;
            min-height: auto !important;
            height: auto !important;
        }
    }
    
    /* Add inner circle for live badge to show red color */
    .professional-live-badge::before {
        content: '' !important;
        position: absolute !important;
        width: 18px !important;
        height: 18px !important;
        background: rgba(220, 53, 69, 0.9) !important;
        border-radius: 50% !important;
        z-index: -1 !important;
    }
    
    .professional-live-badge .live-dot {
        width: 8px !important; /* Smaller dot for smaller badge */
        height: 8px !important; /* Smaller dot for smaller badge */
        background: #ffffff !important;
        border-radius: 50% !important;
        animation: pulse 2s infinite !important;
        box-shadow: 0 0 3px rgba(255, 255, 255, 0.8) !important;
    }
    
    @keyframes pulse {
        0%, 100% {
            opacity: 1;
            transform: scale(1);
        }
        50% {
            opacity: 0.7;
            transform: scale(1.3);
        }
    }
    
    .rating-value-top {
        font-size: 0.75rem !important; /* Smaller font */
        font-weight: 700 !important;
        color: #ffc107 !important;
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .star-rating-top {
        font-size: 0.7rem !important; /* Smaller star */
        color: #ffc107 !important;
        display: flex !important;
        gap: 2px !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Ensure rating container is always visible */
    .professional-rating-top {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 30 !important; /* Higher z-index to ensure visibility */
    }
    
    /* Professional Card Item */
    .professional-card-item {
        position: relative;
        margin-bottom: 0 !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        overflow: visible !important; /* Ensure full circle is visible */
        min-height: auto !important; /* Allow natural height */
    }
    
    .professional-card-link {
        text-decoration: none;
        color: inherit;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
    }
    
    /* Professional info above circle - mobile-first */
    .professional-info-above {
        position: absolute !important;
        top: 0 !important; /* At the top of the card */
        left: 0 !important;
        right: 0 !important;
        margin-bottom: 0 !important;
        margin-top: 0 !important;
        text-align: center !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 2px !important;
        padding: 0 4px !important; /* Small padding to prevent cutoff */
        box-sizing: border-box !important;
        overflow: visible !important; /* Allow text to show fully */
        background: transparent !important; /* Transparent background */
        z-index: 10 !important;
    }
    
    .professional-info-above .professional-title-above {
        font-size: 0.65rem !important; /* Very small for mobile */
        font-weight: 500 !important;
        color: #001f3f !important;
        margin: 0 !important;
        padding: 0 !important;
        text-shadow: none !important;
        line-height: 1.2 !important;
        text-align: center !important;
        width: 100% !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        background: transparent !important; /* Transparent background */
    }
    
    .professional-info-above .professional-company-above {
        font-size: 0.6rem !important; /* Very small for mobile */
        text-align: center !important;
        width: 100% !important;
        color: #001f3f !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        background: transparent !important; /* Transparent background */
    }
    
    .professional-info-below {
        margin-top: 8px !important; /* Space below circle image */
        text-align: center !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 0 !important;
        padding: 0 0 6px 0 !important; /* Add padding to bottom */
        box-sizing: border-box !important;
        overflow: visible !important;
        background: transparent !important; /* Transparent background */
    }
    
    .professional-info-below .professional-name {
        font-size: 0.7rem !important; /* Smaller for mobile */
        font-weight: 600 !important;
        color: #001f3f !important;
        margin: 0 !important;
        padding: 0 !important;
        text-shadow: none !important;
        line-height: 1.2 !important;
        text-align: center !important;
        width: 100% !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        background: transparent !important; /* Transparent background */
    }
    
    /* Mobile: Professional info - optimized for small screens */
    @media (max-width: 768px) {
        .professional-info-above {
            margin-bottom: 4px !important; /* Less space above circle on mobile */
        }
        
        .professional-info-above .professional-title-above {
            font-size: 0.6rem !important; /* Even smaller on mobile */
        }
        
        .professional-info-above .professional-company-above {
            font-size: 0.55rem !important; /* Even smaller on mobile */
        }
        
        .professional-info-below {
            margin-top: 6px !important; /* Space below circle on mobile */
            width: 100% !important;
            min-width: 100% !important;
            max-width: 100% !important;
            padding-bottom: 4px !important; /* Add bottom padding on mobile */
            background: transparent !important; /* Transparent background */
        }
        
        .professional-info-below .professional-name {
            font-size: 0.65rem !important; /* Smaller on mobile */
        }
        
        .professional-info-below {
            justify-content: flex-start !important;
            width: 100% !important;
            max-width: 120px !important;
            margin-top: 10px !important; /* More space below circle */
            padding-top: 0 !important;
            padding-bottom: 6px !important; /* Add bottom padding */
            position: relative !important; /* Not absolute */
            z-index: 1 !important; /* Below badges but above background */
            background: transparent !important; /* Transparent background */
        }
        
        .professional-info-below .professional-name,
        .professional-info-below .professional-title,
        .professional-info-below .professional-company,
        .professional-info-below .professional-location {
            text-align: center !important;
            width: 100% !important;
            display: block !important;
            margin-left: auto !important;
            margin-right: auto !important;
        }
        
        /* Ensure links are centered */
        .professional-name-link,
        .professional-company-link,
        .professional-location-link {
            text-align: center !important;
            display: block !important;
            width: 100% !important;
            margin-left: auto !important;
            margin-right: auto !important;
        }
        
        .professional-info-below .professional-name {
            font-size: 0.7rem !important;
            font-weight: 600 !important;
            margin-bottom: 2px !important;
            color: #001f3f !important;
        }
        
        .professional-info-below .professional-title {
            font-size: 0.65rem !important;
            font-weight: 500 !important;
            color: #001f3f !important;
            margin-bottom: 2px !important;
        }
        
        .professional-info-below .professional-company {
            font-size: 0.6rem !important;
            color: #001f3f !important;
            margin-bottom: 2px !important;
        }
        
        .professional-info-below .professional-location {
            font-size: 0.6rem !important;
            color: #001f3f !important;
            margin-bottom: 0 !important;
        }
    }
    
    /* Compact Category Cards - Community-style optimization */
    .category-card-compact {
        background: transparent;
        border: none;
        border-radius: 0;
        width: 80px; /* Mobile-optimized: See more clearly */
        min-width: 80px; /* Mobile-optimized */
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        transition: all 0.2s ease;
        cursor: pointer;
        position: relative;
        overflow: visible;
        margin: 0;
        padding: 6px;
        white-space: normal;
        flex-shrink: 0;
    }
    
    /* Category scroll container - full width like community */
    #categoriesScroll {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 min(1rem, 4vw) !important; /* Full width with responsive padding */
        box-sizing: border-box !important;
        overflow-x: auto !important; /* Unified horizontal scroll */
        overflow-y: hidden !important;
    }
    
    /* On very small screens, remove padding for edge-to-edge */
    @media (max-width: 380px) {
        #categoriesScroll {
            padding-left: 0 !important;
            padding-right: 0 !important;
        }
        
        #professionalsScroll {
            padding-left: 0 !important;
            padding-right: 0 !important;
        }
    }
    
    /* Ensure horizontal-scroll-container for categories allows unified scroll */
    .horizontal-scroll-container#categoriesScroll {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important; /* Container scrolls, not individual items */
        overflow-y: hidden !important;
    }
    
    #categoriesScroll .horizontal-scroll-content {
        gap: 10px !important; /* Smaller gap to see more */
    }
    
    /* Progressive scaling for tablets */
    @media (min-width: 768px) and (max-width: 1023px) {
        .category-card-compact {
            width: 110px;
            min-width: 110px;
            padding: 10px;
            gap: 5px;
        }
        #categoriesScroll .horizontal-scroll-content {
            gap: 15px !important;
        }
    }
    
    @media (min-width: 1024px) and (max-width: 1439px) {
        .category-card-compact {
            width: 130px;
            min-width: 130px;
            padding: 12px;
            gap: 6px;
        }
        #categoriesScroll .horizontal-scroll-content {
            gap: 18px !important;
        }
    }
    
    /* Desktop scaling */
    @media (min-width: 1440px) {
        .category-card-compact {
            width: 160px;
            min-width: 160px;
            padding: 14px;
            gap: 8px;
        }
        #categoriesScroll .horizontal-scroll-content {
            gap: 20px !important;
        }
    }
    
    .category-card-compact:hover {
        transform: none;
        opacity: 0.8;
    }
    
    .category-card-link {
        text-decoration: none;
        color: inherit;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        width: 100%;
        height: 100%;
        position: relative;
    }
    
    .category-image {
        display: none; /* Hide background images for this style */
    }
    
    .category-content {
        position: static;
        transform: none;
        z-index: 2;
        overflow-y: visible !important;
        overflow-x: visible !important;
        height: auto !important;
        max-height: none !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px; /* Mobile-first: Smaller gap */
        width: 100%;
        text-align: center; /* Center text on mobile */
    }
    
    /* Category icon size - mobile optimized */
    .category-content i {
        font-size: 1.8rem !important; /* Mobile-optimized: Good icon size */
    }
    
    /* Category name size - mobile optimized */
    .category-content .category-name {
        font-size: 0.65rem !important; /* Mobile-optimized: Readable text */
        line-height: 1.2;
        text-align: center;
    }
    
    /* Progressive scaling */
    @media (min-width: 768px) and (max-width: 1023px) {
        .category-content {
            gap: 5px;
        }
        .category-content i {
            font-size: 2.2rem !important;
        }
        .category-content .category-name {
            font-size: 0.75rem !important;
        }
    }
    
    @media (min-width: 1024px) and (max-width: 1439px) {
        .category-content {
            gap: 6px;
        }
        .category-content i {
            font-size: 2.5rem !important;
        }
        .category-content .category-name {
            font-size: 0.85rem !important;
        }
    }
    
    @media (min-width: 1440px) {
        .category-content {
        gap: 8px;
        }
        .category-content i {
            font-size: 3rem !important;
        }
        .category-content .category-name {
            font-size: 0.95rem !important;
        }
    }
    
    .category-icon {
        font-size: 0.9rem !important; /* Much smaller icon to prevent cutoff */
        color: inherit;
        margin: 0;
        text-shadow: none;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1 !important;
    }
    
    .category-label {
        font-size: 0.7rem !important; /* Mobile-optimized size */
        font-weight: 500;
        color: #212529;
        text-align: center;
        text-shadow: none;
        line-height: 1.2;
        padding: 0;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap !important; /* Prevent wrapping */
        min-width: max-content !important; /* Ensure full text width */
        width: auto !important; /* Allow natural width */
        overflow: visible !important; /* Don't clip text */
    }
    
    /* Ensure category text is visible on mobile */
    @media (max-width: 768px) {
        .category-label {
            font-size: 0.65rem !important;
        }
        .category-card-compact {
            min-width: 75px !important; /* Slightly wider on small screens */
        }
    }
    
    .category-count {
        display: none; /* Hide count for cleaner look */
    }
    
    .category-item {
        margin-right: 0;
        flex-shrink: 0;
        display: flex;
        align-items: stretch;
        min-height: 70px;
        height: 70px;
    }
    
    .category-item .category-card-link {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: stretch;
    }
    
    /* Color coding for categories */
    .category-item-all .category-icon {
        color: #28a745; /* Green for "All" */
    }
    
    .category-item:nth-of-type(2) .category-icon {
        color: #ffc107; /* Yellow for first category */
    }
    
    .category-item:nth-of-type(3) .category-icon {
        color: #dc3545; /* Red for second category */
    }
    
    .category-item:nth-of-type(4) .category-icon {
        color: #28a745; /* Green for third category */
    }
    
    /* Default colors for other categories */
    .category-item:not(.category-item-all) .category-icon {
        color: #6c757d;
    }
    
    /* Active category styling */
    .category-item.active .category-icon,
    .category-item.active .category-label {
        color: #000000 !important;
        font-weight: 600;
    }
    
    .category-item.active.category-item-all .category-icon {
        color: #28a745 !important;
    }
    
    /* Even spacing between category items */
    .horizontal-scroll-content .category-item:not(:last-child) {
        margin-right: 24px;
    }
    
    /* Category subcategories dropdown */
    .category-wrapper {
        position: relative;
        display: inline-block;
    }
    
    .category-subcategory-indicator {
        margin-left: 4px;
        font-size: 0.75rem;
        color: #6c757d;
        transition: transform 0.3s ease;
    }
    
    .category-item:hover .category-subcategory-indicator,
    .category-item.active .category-subcategory-indicator {
        transform: rotate(180deg);
    }
    
    .category-subcategories-dropdown {
        position: absolute;
        top: 100%;
        left: 0;
        margin-top: 8px;
        background: #ffffff;
        border: 1px solid rgba(0,31,63,0.2);
        border-radius: 12px;
        box-shadow: 0 8px 24px rgba(0,0,0,0.15);
        min-width: 250px;
        max-width: 350px;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: all 0.3s ease;
        z-index: 1000;
        padding: 8px;
        max-height: 406px;
        overflow-y: auto;
    }
    
    .category-item:hover .category-subcategories-dropdown {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    
    .subcategory-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    
    .subcategory-item {
        display: flex;
        align-items: center;
        padding: 10px 12px;
        text-decoration: none;
        color: #212529;
        border-radius: 8px;
        transition: all 0.2s ease;
        font-size: 0.9rem;
        gap: 8px;
    }
    
    .subcategory-item:hover {
        background: rgba(0,31,63,0.1);
        color: #001f3f;
        transform: translateX(4px);
    }
    
    .subcategory-item.active {
        background: rgba(0,31,63,0.15);
        color: #001f3f;
        font-weight: 600;
    }
    
    .subcategory-item i {
        font-size: 1rem;
        color: #6c757d;
        width: 20px;
        text-align: center;
    }
    
    .subcategory-item:hover i,
    .subcategory-item.active i {
        color: #001f3f;
    }
    
    .subcategory-count {
        margin-left: auto;
        font-size: 0.8rem;
        color: #6c757d;
        font-weight: normal;
    }
    
    .subcategory-item:hover .subcategory-count,
    .subcategory-item.active .subcategory-count {
        color: #001f3f;
    }
    
    .location-widget {
        background: rgba(42, 42, 42, 0.95) !important;
        backdrop-filter: blur(10px);
        border: 1px solid rgba(220, 20, 60, 0.3);
        border-radius: 15px;
        padding: 40px;
        color: white;
        margin-bottom: 40px;
    }
    .location-input-group {
        display: flex;
        gap: 10px;
        margin-top: 20px;
    }
    .location-input-group input {
        flex: 1;
        padding: 12px;
        border: none;
        border-radius: 8px;
    }
    .btn-location {
        padding: 12px 24px;
        border: none;
        border-radius: 8px;
        background: white;
        color: #667eea;
        font-weight: bold;
        cursor: pointer;
    }
    .nearby-locations {
        margin-top: 30px;
    }
    .location-card {
        background: white;
        border-radius: 10px;
        padding: 20px;
        margin-bottom: 15px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    #mapWidget {
        height: 500px;
        border-radius: 10px;
        margin-top: 20px;
        position: relative;
    }
    .radius-circle {
        position: absolute;
        border: 2px dashed rgba(102, 126, 234, 0.6);
        border-radius: 50%;
        background: rgba(102, 126, 234, 0.1);
        pointer-events: none;
        z-index: 400;
    }
    .view-toggle-buttons {
        display: flex;
        gap: 10px;
        margin-bottom: 15px;
        justify-content: center;
    }
    .view-toggle-btn {
        padding: 8px 16px;
        border: 2px solid white;
        background: rgba(255, 255, 255, 0.2);
        color: white;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.3s;
        font-weight: 500;
    }
    .view-toggle-btn:hover {
        background: rgba(255, 255, 255, 0.3);
    }
    .view-toggle-btn.active {
        background: white;
        color: #667eea;
    }
    .view-container {
        display: none;
    }
    .view-container.active {
        display: block;
    }
    .professionals-section {
        margin: 40px 0;
        width: 100%;
    }
    
    .categories-section {
        width: 100%;
    }
    .professional-card {
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        transition: transform 0.2s, box-shadow 0.2s;
        height: 100%;
    }
    .professional-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    }
    .professional-card-img {
        width: 100%;
        height: 200px;
        object-fit: cover;
    }
    .professional-card-body {
        padding: 15px;
    }
    .professional-rating {
        display: flex;
        align-items: center;
        gap: 5px;
        margin-top: 8px;
    }
    .star-rating {
        color: #ffc107;
        font-size: 0.9em;
    }
    .rating-text {
        font-size: 0.85em;
        color: #666;
    }
    .quick-book-widget {
        background: #f8f9fa;
        border-radius: 15px;
        padding: 30px;
        margin-top: 40px;
    }
    .business-marker-popup {
        min-width: 200px;
    }
    .business-marker-popup h6 {
        margin: 0 0 10px 0;
        color: #667eea;
    }
    .business-marker-popup p {
        margin: 5px 0;
        font-size: 0.9em;
    }
    .slot-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
        gap: 10px;
        margin-top: 15px;
    }
    .slot-button {
        padding: 10px;
        border: 2px solid #ddd;
        border-radius: 8px;
        background: white;
        cursor: pointer;
        transition: all 0.2s;
        font-size: 0.9em;
    }
    .slot-button:hover:not(.disabled):not(.selected) {
        border-color: #667eea;
        background: #f0f0ff;
    }
    .slot-button.available {
        border-color: #28a745;
        color: #28a745;
    }
    .slot-button.selected {
        background: #667eea;
        color: white;
        border-color: #667eea;
    }
    .slot-button.disabled {
        opacity: 0.5;
        cursor: not-allowed;
        background: #f5f5f5;
    }
    .location-card-hover {
        position: absolute;
        background: white;
        padding: 15px;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        z-index: 1000;
        min-width: 200px;
        display: none;
    }
    .location-card-hover h6 {
        margin: 0 0 10px 0;
        color: #667eea;
    }
    .location-card-hover p {
        margin: 5px 0;
        font-size: 0.9em;
    }
    @media (max-width: 768px) {
        .location-widget {
            padding: 20px;
        }
        .slot-grid {
            grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
            gap: 8px;
        }
        .slot-button {
            padding: 8px;
            font-size: 0.85em;
        }
        .btn-lg {
            padding: 12px 20px;
            font-size: 1rem;
        }
        .location-input-group {
            flex-direction: column;
        }
        .location-input-group input {
            margin-bottom: 10px;
        }
        .location-input-group .btn-location {
            width: 100%;
            margin-bottom: 10px;
        }
    }
    /* Force override for card title and subtitle sizes - must match discover page exactly */
    .mobile-home-card-title-overlay,
    .mobile-home-deal-card .mobile-home-card-title-overlay,
    .mobile-home-pro-card .mobile-home-card-title-overlay,
    .mobile-home-org-card .mobile-home-card-title-overlay,
    .mobile-home-card-info-overlay .mobile-home-card-title-overlay {
        font-size: clamp(18px, 2.2vw, 24px) !important;
        font-weight: 900 !important;
        letter-spacing: -0.3px !important;
        color: #ffffff !important;
        margin: 0 0 8px 0 !important;
        -webkit-text-stroke: 0.2px rgba(0, 0, 0, 0.9) !important;
        text-shadow:
            0 0 1px rgba(0, 0, 0, 0.9),
            0 2px 8px rgba(0, 0, 0, 0.5),
            0 4px 16px rgba(0, 0, 0, 0.3),
            0 8px 32px rgba(0, 0, 0, 0.2) !important;
        line-height: 1.2 !important;
    }
    
    .mobile-home-meta-overlay-item,
    .mobile-home-deal-card .mobile-home-meta-overlay-item,
    .mobile-home-pro-card .mobile-home-meta-overlay-item,
    .mobile-home-org-card .mobile-home-meta-overlay-item,
    .mobile-home-card-meta-overlay .mobile-home-meta-overlay-item,
    .mobile-home-card-info-overlay .mobile-home-meta-overlay-item,
    .mobile-home-meta-overlay-item span,
    .mobile-home-meta-overlay-item > span:not(.mobile-home-meta-overlay-icon) {
        font-size: clamp(14px, 1.8vw, 20px) !important;
        font-weight: 700 !important;
        color: rgba(255, 255, 255, 0.95) !important;
        -webkit-text-stroke: 0.2px rgba(0, 0, 0, 0.9) !important;
    }
    
    /* Nuclear option - target every possible selector */
    article.mobile-home-card .mobile-home-card-title-overlay,
    article.mobile-home-deal-card .mobile-home-card-title-overlay,
    article.mobile-home-pro-card .mobile-home-card-title-overlay,
    article.mobile-home-org-card .mobile-home-card-title-overlay,
    div.mobile-home-card-info-overlay .mobile-home-card-title-overlay,
    div.mobile-home-card-info-overlay div.mobile-home-card-title-overlay {
        font-size: clamp(18px, 2.2vw, 24px) !important;
        font-weight: 900 !important;
    }
    
    article.mobile-home-card .mobile-home-meta-overlay-item,
    article.mobile-home-deal-card .mobile-home-meta-overlay-item,
    article.mobile-home-pro-card .mobile-home-meta-overlay-item,
    article.mobile-home-org-card .mobile-home-meta-overlay-item,
    div.mobile-home-card-meta-overlay .mobile-home-meta-overlay-item,
    div.mobile-home-card-info-overlay .mobile-home-meta-overlay-item,
    article.mobile-home-card .mobile-home-meta-overlay-item span,
    article.mobile-home-deal-card .mobile-home-meta-overlay-item span,
    article.mobile-home-pro-card .mobile-home-meta-overlay-item span,
    article.mobile-home-org-card .mobile-home-meta-overlay-item span {
        font-size: clamp(14px, 1.8vw, 20px) !important;
        font-weight: 700 !important;
    }
    
    /* EXTREME OVERRIDE - Target every possible combination to ensure it works */
    body .mobile-home-card-title-overlay,
    html body .mobile-home-card-title-overlay,
    body.home-page .mobile-home-card-title-overlay,
    html.home-page .mobile-home-card-title-overlay,
    .mobile-home-page .mobile-home-card-title-overlay,
    .screen .mobile-home-card-title-overlay {
        font-size: clamp(18px, 2.2vw, 24px) !important;
        font-weight: 900 !important;
    }
    
    body .mobile-home-meta-overlay-item,
    html body .mobile-home-meta-overlay-item,
    body.home-page .mobile-home-meta-overlay-item,
    html.home-page .mobile-home-meta-overlay-item,
    .mobile-home-page .mobile-home-meta-overlay-item,
    .screen .mobile-home-meta-overlay-item,
    body .mobile-home-meta-overlay-item span,
    html body .mobile-home-meta-overlay-item span {
        font-size: clamp(14px, 1.8vw, 20px) !important;
        font-weight: 700 !important;
    }

    /* This style block loads last to override everything - EXTREME SPECIFICITY */
    * .mobile-home-card-title-overlay,
    * * .mobile-home-card-title-overlay,
    html body .mobile-home-card-title-overlay,
    html body * .mobile-home-card-title-overlay,
    body.home-page .mobile-home-card-title-overlay,
    html.home-page body .mobile-home-card-title-overlay {
        font-size: clamp(18px, 2.2vw, 24px) !important;
        font-weight: 900 !important;
        letter-spacing: -0.3px !important;
    }
    
    * .mobile-home-meta-overlay-item,
    * * .mobile-home-meta-overlay-item,
    html body .mobile-home-meta-overlay-item,
    html body * .mobile-home-meta-overlay-item,
    body.home-page .mobile-home-meta-overlay-item,
    html.home-page body .mobile-home-meta-overlay-item {
        font-size: clamp(14px, 1.8vw, 20px) !important;
        font-weight: 700 !important;
    }
    
    * .mobile-home-meta-overlay-item span,
    * * .mobile-home-meta-overlay-item span,
    html body .mobile-home-meta-overlay-item span,
    html body * .mobile-home-meta-overlay-item span,
    body.home-page .mobile-home-meta-overlay-item span,
    html.home-page body .mobile-home-meta-overlay-item span {
        font-size: clamp(14px, 1.8vw, 20px) !important;
    }
    
    /* Target every card type specifically */
    article.mobile-home-deal-card .mobile-home-card-title-overlay,
    article.mobile-home-pro-card .mobile-home-card-title-overlay,
    article.mobile-home-org-card .mobile-home-card-title-overlay,
    .mobile-home-deal-card .mobile-home-card-title-overlay,
    .mobile-home-pro-card .mobile-home-card-title-overlay,
    .mobile-home-org-card .mobile-home-card-title-overlay {
        font-size: clamp(18px, 2.2vw, 24px) !important;
        font-weight: 900 !important;
    }
    
    article.mobile-home-deal-card .mobile-home-meta-overlay-item,
    article.mobile-home-pro-card .mobile-home-meta-overlay-item,
    article.mobile-home-org-card .mobile-home-meta-overlay-item,
    .mobile-home-deal-card .mobile-home-meta-overlay-item,
    .mobile-home-pro-card .mobile-home-meta-overlay-item,
    .mobile-home-org-card .mobile-home-meta-overlay-item,
    article.mobile-home-deal-card .mobile-home-meta-overlay-item span,
    article.mobile-home-pro-card .mobile-home-meta-overlay-item span,
    article.mobile-home-org-card .mobile-home-meta-overlay-item span,
    .mobile-home-deal-card .mobile-home-meta-overlay-item span,
    .mobile-home-pro-card .mobile-home-meta-overlay-item span,
    .mobile-home-org-card .mobile-home-meta-overlay-item span {
        font-size: clamp(14px, 1.8vw, 20px) !important;
        font-weight: 700 !important;
    }
    
    /* Premium Polished Card Styling - All corners rounded, enhanced shadows */
    .mobile-home-card {
        border-radius: 22px !important;
        overflow: hidden !important;
        box-shadow: 
            0 4px 6px rgba(12, 24, 55, 0.08),
            0 10px 20px rgba(12, 24, 55, 0.06),
            0 20px 40px rgba(12, 24, 55, 0.04) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease !important;
    }
    
    .mobile-home-deal-card {
        border-radius: 22px !important;
    }
    
    .mobile-home-pro-card {
        border-radius: 20px !important;
    }
    
    .mobile-home-org-card {
        border-radius: 18px !important;
    }
    
    /* Premium: Ensure media sections match card border radius */
    .mobile-home-deal-media {
        border-radius: 22px 22px 0 0 !important;
    }
    
    .mobile-home-pro-media {
        border-radius: 20px 20px 0 0 !important;
    }
    
    .mobile-home-org-media {
        border-radius: 18px 18px 0 0 !important;
    }
    
    /* Premium: Enhanced details section */
    .mobile-home-card-details {
        border-radius: 0 0 22px 22px !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    }
    
    .mobile-home-pro-card .mobile-home-card-details {
        border-radius: 0 0 20px 20px !important;
    }
    
    .mobile-home-org-card .mobile-home-card-details {
        border-radius: 0 0 18px 18px !important;
    }
    
    /* Premium: Interactive states */
    .mobile-home-card:active {
        transform: scale(0.98) !important;
        box-shadow: 
            0 2px 4px rgba(12, 24, 55, 0.12),
            0 8px 16px rgba(12, 24, 55, 0.08),
            0 16px 32px rgba(12, 24, 55, 0.06) !important;
    }
    
    /* Premium: Hover effect for desktop */
    @media (hover: hover) {
        .mobile-home-card:hover {
            transform: translateY(-4px) !important;
            box-shadow: 
                0 8px 12px rgba(12, 24, 55, 0.12),
                0 16px 32px rgba(12, 24, 55, 0.08),
                0 24px 48px rgba(12, 24, 55, 0.06) !important;
        }
    }
    
    /* Ensure buttons and links are clickable - fix z-index and pointer events */
    .mobile-home-card-details,
    .mobile-home-card-details a,
    .mobile-home-card-details button,
    .mobile-home-section-link,
    .mobile-home-cta {
        position: relative !important;
        z-index: 10 !important;
        pointer-events: auto !important;
    }
    
    .mobile-home-card-info-overlay {
        pointer-events: none !important;
    }
    
    .mobile-home-card-info-overlay * {
        pointer-events: auto !important;
    }

    /* Logo → welcome hub hint (platform home; lives inside #paneDiscover below fixed header) */
    .hubliq-logo-landing-hint {
        margin: 0 10px 6px;
        padding: 8px 10px;
        border-radius: 12px;
        border: 1px solid rgba(0, 31, 63, 0.12);
        background: linear-gradient(135deg, rgba(47, 105, 255, 0.1), rgba(37, 214, 255, 0.06));
        box-shadow: 0 4px 14px rgba(12, 24, 55, 0.06);
    }
    .hubliq-logo-landing-hint--discover {
        position: relative;
        z-index: 2;
        margin-bottom: 4px !important;
    }
    .hubliq-logo-landing-hint-inner {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }
    .hubliq-logo-landing-hint-text {
        font-size: 0.82rem;
        line-height: 1.45;
        color: rgba(12, 24, 55, 0.88);
    }
    .hubliq-logo-landing-hint-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: flex-end;
    }
    .hubliq-logo-landing-hint-btn {
        font-size: 0.78rem;
        font-weight: 600;
        padding: 6px 12px;
        border-radius: 999px;
        border: 1px solid rgba(0, 31, 63, 0.18);
        background: rgba(255, 255, 255, 0.85);
        color: #0c1837;
        cursor: pointer;
    }
    .hubliq-logo-landing-hint-btn.hubliq-logo-landing-hint-hide {
        border-color: rgba(47, 105, 255, 0.45);
        background: linear-gradient(135deg, rgba(47, 105, 255, 0.18), rgba(37, 214, 255, 0.12));
    }

/* HQ home desktop: sidebar layout — hide bottom nav and drop the mobile nav body padding
   (loaded after earlier rules that force .mobile-bottom-nav visible). */
@media (min-width: 1150px) {
    body.home-page-hq.mobile-home-active,
    body.home-page-hq,
    html.home-page-hq.mobile-home-active,
    html.home-page-hq {
        padding-bottom: 24px !important;
    }

    body.home-page-hq.mobile-home-active .mobile-bottom-nav,
    body.home-page-hq .mobile-bottom-nav {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
        height: 0 !important;
        overflow: hidden !important;
        opacity: 0 !important;
    }
}