/* ===== MOBILE ENHANCEMENTS ===== */

@media (max-width: 768px) {
    
    /* ===== MOBILE CONTAINER WIDTH ===== */
    .container {
        width: 100% !important;
    }
    
    /* ===== MOBILE MENU TOGGLE VISIBILITY ===== */
    .mobile-menu-toggle {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 9999 !important;
        position: relative !important;
        width: 30px !important;
        height: 24px !important;
        cursor: pointer !important;
        margin-left: 10px !important;
        flex-shrink: 0 !important;
    }
    
    .mobile-menu-toggle span {
        display: block !important;
        height: 3px !important;
        width: 100% !important;
        background: var(--primary-color) !important;
        border-radius: 2px !important;
        position: absolute !important;
        transition: all 0.3s ease !important;
    }
    
    .mobile-menu-toggle span:nth-child(1) {
        top: 0 !important;
    }
    
    .mobile-menu-toggle span:nth-child(2) {
        top: 50% !important;
        transform: translateY(-50%) !important;
    }
    
    .mobile-menu-toggle span:nth-child(3) {
        bottom: 0 !important;
    }
    
    /* ===== REMOVE GRID TEMPLATE COLUMNS ON MOBILE ===== */
    .service-cards,
    .mission-cards,
    .features,
    .contact-methods,
    .form-row,
    .contact-form-wrapper,
    .service-grid,
    .stats-grid,
    .trust-grid,
    .footer-content,
    .news-grid,
    .media-categories,
    .content-grid,
    .details-grid,
    .service-options-grid,
    .option-features,
    .service-categories,
    .related-grid,
    .calendar-weekdays,
    .calendar-days,
    .cart-modal-body,
    .mobile-about-stats,
    .hero-layout,
    .features-grid,
    .audience-grid,
    .statistics-section {
        grid-template-columns: 1fr !important;
    }
    
    /* ===== MOBILE SIDE MENU ===== */
    /* This mobile menu displays the exact same menu structure as the desktop header menu */
    
    /* Ensure mobile menu is above all other elements */
    .main-menu,
    .main-menu * {
        z-index: 9999 !important;
    }
    
    /* Ensure banner elements are below mobile menu but content is visible */
    .banner-slider,
    .banner-slider-track,
    .main-banner-slider,
    .page-banner,
    .promo-banner {
        z-index: 1 !important;
    }
    
    /* Keep banner content visible with proper z-index */
    .banner-slider-overlay {
        z-index: 1000 !important;
    }
    
    .banner-slider-content {
        z-index: 11 !important;
    }
    
    /* Mobile banner layout - hide overlay on mobile */
    .banner-slider-overlay {
        display: none !important;
    }
    
    /* Mobile banner content section - between banner and services */
.banner-content-mobile {
    display: block !important;
    background: linear-gradient(135deg, #FF7A00, #E56717) !important;
    padding: 40px 20px !important;
    margin: 0 !important;
    text-align: center !important;
}

/* Mobile Contact Page Improvements */
@media (max-width: 768px) {
    /* Contact Banner Improvements */
    .mobile-banner {
        height: 400px !important;
        overflow: hidden !important;
    }
    
    .mobile-banner img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
    
    .mobile-banner-title {
        font-size: 1.8rem !important;
        top: 60% !important;
        transform: translate(-50%, -50%) !important;
        text-shadow: 0 2px 8px rgba(0,0,0,0.7) !important;
        padding: 0 20px !important;
        text-align: center !important;
    }
    
    /* Contact Section Layout */
    .mobile-contact-section {
        padding: 40px 0 !important;
        background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%) !important;
    }
    
    /* Ensure all cards have consistent width - MOBILE ONLY */
    .mobile-contact-section .container > * {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .mobile-contact-content {
        display: flex !important;
        flex-direction: column !important;
        gap: 30px !important;
    }
    
    /* Contact Info Card Improvements */
    .mobile-contact-info-card {
        background: #fff !important;
        border-radius: 20px !important;
        padding: 30px 20px !important;
        box-shadow: 0 8px 32px rgba(0,0,0,0.1) !important;
        border: 1px solid #e9ecef !important;
        position: relative !important;
        overflow: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .mobile-contact-info-card::before {
        content: '' !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 4px !important;
        background: linear-gradient(90deg, #FF7A00, #E56717) !important;
    }
    
    .mobile-contact-info-item {
        display: flex !important;
        align-items: center !important;
        gap: 20px !important;
        padding: 20px 0 !important;
        border-bottom: 1px solid #f0f0f0 !important;
        transition: all 0.3s ease !important;
    }
    
    .mobile-contact-info-item:last-child {
        border-bottom: none !important;
    }
    
 
    .mobile-contact-icon {
        width: 50px !important;
        height: 50px !important;
        background: linear-gradient(135deg, #FF7A00, #E56717) !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        box-shadow: 0 4px 16px rgba(255, 122, 0, 0.3) !important;
    }
    
    .mobile-contact-icon img {
        width: 24px !important;
        height: 24px !important;
        filter: brightness(0) invert(1) !important;
    }
    
    .mobile-contact-icon .icon-fallback {
        color: #fff !important;
        font-size: 20px !important;
    }
    
    .mobile-contact-details {
        flex: 1 !important;
    }
    
    .contact-item-title {
        font-size: 1.1rem !important;
        font-weight: 600 !important;
        color: #333 !important;
        margin-bottom: 0px !important;
    }
    
    .contact-item-text {
        font-size: 0.95rem !important;
        color: #666 !important;
        line-height: 1.4 !important;
        margin: 0 !important;
    }
    
    /* Contact Form Card Improvements */
    .mobile-contact-form-card {
        background: #fff !important;
        border-radius: 20px !important;
        padding: 30px 20px !important;
        box-shadow: 0 8px 32px rgba(0,0,0,0.1) !important;
        border: 1px solid #e9ecef !important;
        position: relative !important;
        overflow: hidden !important;
        margin-top: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
  
    
    .contact-form-title {
        font-size: 1.5rem !important;
        color: #333 !important;
        margin-bottom: 25px !important;
        text-align: center !important;
        font-weight: 600 !important;
    }
    
    .mobile-form-group {
        margin-bottom: 20px !important;
    }
    
    .form-label {
        display: block !important;
        font-size: 0.95rem !important;
        font-weight: 500 !important;
        color: #333 !important;
        margin-bottom: 8px !important;
    }
    
    .mobile-form-input,
    .mobile-form-textarea {
        width: 100% !important;
        padding: 15px 18px !important;
        border: 2px solid #e9ecef !important;
        border-radius: 12px !important;
        font-size: 1rem !important;
        transition: all 0.3s ease !important;
        background: #fff !important;
        box-sizing: border-box !important;
    }
    
    .mobile-form-input:focus,
    .mobile-form-textarea:focus {
        outline: none !important;
        border-color: #FF7A00 !important;
        box-shadow: 0 0 0 3px rgba(255, 122, 0, 0.1) !important;
    }
    
    .mobile-form-textarea {
        min-height: 120px !important;
        resize: vertical !important;
    }
    
    .form-submit-btn {
        width: 100% !important;
        background: linear-gradient(135deg, #FF7A00, #E56717) !important;
        color: #fff !important;
        border: none !important;
        padding: 16px 24px !important;
        border-radius: 12px !important;
        font-size: 1.1rem !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
        box-shadow: 0 4px 16px rgba(255, 122, 0, 0.3) !important;
    }
    
    .form-submit-btn:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 20px rgba(255, 122, 0, 0.4) !important;
    }
    
    /* Organization Form Section */
    .mobile-organization-form-section {
        background: #fff !important;
        border-radius: 20px !important;
        padding: 30px 20px !important;
        margin-top: 30px !important;
        box-shadow: 0 8px 32px rgba(0,0,0,0.1) !important;
        border: 1px solid #e9ecef !important;
        position: relative !important;
        overflow: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .mobile-organization-form-section::before {
        content: '' !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 4px !important;
        background: linear-gradient(90deg, #FF7A00, #E56717) !important;
    }
    
    .organization-form-title {
        font-size: 1.4rem !important;
        color: #333 !important;
        margin-bottom: 25px !important;
        text-align: center !important;
        font-weight: 600 !important;
    }
    
    /* Map Section */
    .mobile-map-section {
        padding: 40px 0 !important;
        background: #f8f9fa !important;
    }
    
    /* Add mobile-only map section header */
    .mobile-map-section::before {
        content: '我們的位置' !important;
        display: block !important;
        text-align: center !important;
        font-size: 1.8rem !important;
        color: #333 !important;
        font-weight: 700 !important;
        margin-bottom: 20px !important;
    }

    
    .mobile-map-container {
        border-radius: 20px !important;
        overflow: hidden !important;
        box-shadow: 0 8px 32px rgba(0,0,0,0.1) !important;
        border: 1px solid #e9ecef !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .mobile-map-container iframe {
        height: 300px !important;
        border: none !important;
    }
    
    /* CTA Section */
    .mobile-cta-section {
        padding: 50px 0 !important;
        background: linear-gradient(135deg, #FF7A00, #E56717) !important;
        text-align: center !important;
    }
    
    .cta-title {
        font-size: 1.6rem !important;
        /* color: #fff !important; */
        color: var(--primary-color) !important;
        margin-bottom: 15px !important;
        font-weight: 600 !important;
    }
    
    .cta-description {
        font-size: 1rem !important;
        color: rgba(255, 255, 255, 0.9) !important;
        margin-bottom: 30px !important;
    }
    
    .mobile-cta-button {
        background: #fff !important;
        color: #FF7A00 !important;
        border: none !important;
        padding: 16px 32px !important;
        border-radius: 25px !important;
        font-size: 1.1rem !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
        box-shadow: 0 4px 16px rgba(0,0,0,0.2) !important;
    }
    
    .mobile-cta-button:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 20px rgba(0,0,0,0.3) !important;
    }
    
    /* FAQ Section (if enabled) */
    .mobile-faq-section {
        padding: 0 !important;
        background: #fff !important;
    }
    
    .faq-section-title {
        font-size: 1.6rem !important;
        color: #333 !important;
        margin-bottom: 30px !important;
        text-align: center !important;
        font-weight: 600 !important;
    }
    
    .mobile-faq-item {
        background: #fff !important;
        border: 1px solid #e9ecef !important;
        border-radius: 12px !important;
        margin-bottom: 15px !important;
        overflow: hidden !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
    }
    
    .mobile-faq-question {
        padding: 20px !important;
        cursor: pointer !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        background: #f8f9fa !important;
        transition: all 0.3s ease !important;
    }
    
    .mobile-faq-question:hover {
        background: #e9ecef !important;
    }
    
    .faq-question-title {
        font-size: 1rem !important;
        color: #333 !important;
        margin: 0 !important;
        font-weight: 500 !important;
    }
    
    .faq-icon {
        font-size: 1.2rem !important;
        color: #FF7A00 !important;
        font-weight: bold !important;
    }
    
    /* Enhanced Content UI Improvements */
    
 
    /* Enhanced Contact Info Card */
    .mobile-contact-info-card {
        position: relative !important;
        background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%) !important;
        border: 2px solid #e9ecef !important;
        box-shadow: 0 12px 40px rgba(0,0,0,0.08) !important;
        transition: all 0.3s ease !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .mobile-contact-info-card:hover {
        transform: translateY(-5px) !important;
        box-shadow: 0 20px 60px rgba(0,0,0,0.12) !important;
        border-color: #FF7A00 !important;
    }
    
    /* Enhanced Contact Icons */
    .mobile-contact-icon {
        position: relative !important;
        overflow: hidden !important;
    }
    
 
    

    
    /* Enhanced Form Styling */
    .mobile-contact-form-card {
        background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%) !important;
        border: 2px solid #e9ecef !important;
        box-shadow: 0 12px 40px rgba(0,0,0,0.08) !important;
        transition: all 0.3s ease !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
  
    /* Enhanced Form Inputs */
    .mobile-form-input,
    .mobile-form-textarea {
        background: #fff !important;
        border: 2px solid #e9ecef !important;
        transition: all 0.3s ease !important;
        position: relative !important;
    }
    
    .mobile-form-input:focus,
    .mobile-form-textarea:focus {
        border-color: #FF7A00 !important;
        box-shadow: 0 0 0 4px rgba(255, 122, 0, 0.1) !important;
        transform: translateY(-2px) !important;
    }
    
 
    
    /* Enhanced Submit Button */
    .mobile-submit-btn,
    .form-submit-btn {
        background: linear-gradient(135deg, #FF7A00, #E56717) !important;
        border: none !important;
        color: #fff !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        letter-spacing: 1px !important;
        position: relative !important;
        overflow: hidden !important;
        transition: all 0.3s ease !important;
    }
    
    .mobile-submit-btn::before,
    .form-submit-btn::before {
        content: '' !important;
        position: absolute !important;
        top: 0 !important;
        left: -100% !important;
        width: 100% !important;
        height: 100% !important;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent) !important;
        transition: left 0.5s ease !important;
    }
    
    .mobile-submit-btn:hover,
    .form-submit-btn:hover {
        transform: translateY(-3px) !important;
        box-shadow: 0 8px 25px rgba(255, 122, 0, 0.4) !important;
    }
    
    .mobile-submit-btn:hover::before,
    .form-submit-btn:hover::before {
        left: 100% !important;
    }
    
    /* Enhanced Organization Form */
    .mobile-organization-form-section {
        background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%) !important;
        border: 2px solid #e9ecef !important;
        box-shadow: 0 12px 40px rgba(0,0,0,0.08) !important;
        transition: all 0.3s ease !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .mobile-organization-form-section:hover {
        transform: translateY(-5px) !important;
        box-shadow: 0 20px 60px rgba(0,0,0,0.12) !important;
        border-color: #FF7A00 !important;
    }
    
    /* Enhanced Rating System */
    .mobile-rating-container {
        background: #f8f9fa !important;
        border-radius: 15px !important;
        padding: 20px !important;
        border: 2px solid #e9ecef !important;
        transition: all 0.3s ease !important;
    }
    
    .mobile-rating-container:hover {
        border-color: #FF7A00 !important;
        box-shadow: 0 4px 15px rgba(255, 122, 0, 0.1) !important;
    }
    
    .mobile-rating-options {
        display: flex !important;
        justify-content: space-between !important;
        gap: 8px !important;
        flex-wrap: wrap !important;
    }
    
    .mobile-rating-radio {
        display: none !important;
    }
    
    .mobile-rating-label {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 40px !important;
        height: 40px !important;
        background: #fff !important;
        border: 2px solid #e9ecef !important;
        border-radius: 50% !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
        font-weight: 600 !important;
        color: #666 !important;
    }
    
    .mobile-rating-label:hover {
        border-color: #FF7A00 !important;
        background: #fff5f0 !important;
        color: #FF7A00 !important;
        transform: scale(1.1) !important;
    }
    
    .mobile-rating-radio:checked + .mobile-rating-label {
        background: linear-gradient(135deg, #FF7A00, #E56717) !important;
        border-color: #FF7A00 !important;
        color: #fff !important;
        transform: scale(1.15) !important;
        box-shadow: 0 4px 15px rgba(255, 122, 0, 0.3) !important;
    }
    
    /* Enhanced Map Section */
    .mobile-map-section {
        position: relative !important;
        background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%) !important;
    }
    
    .mobile-map-section::before {
        content: '' !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 4px !important;
        background: linear-gradient(90deg, #FF7A00, #E56717) !important;
        z-index: 1 !important;
    }
    
    .mobile-map-container {
        position: relative !important;
        overflow: hidden !important;
        transition: all 0.3s ease !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .mobile-map-container:hover {
        transform: translateY(-5px) !important;
        box-shadow: 0 20px 60px rgba(0,0,0,0.15) !important;
    }
    
    .mobile-map-container::before {
        content: '' !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: linear-gradient(45deg, rgba(255, 122, 0, 0.1), transparent) !important;
        pointer-events: none !important;
        z-index: 1 !important;
    }
    
    /* Enhanced Section Titles */
    .contact-form-title,
    .organization-form-title {
        position: relative !important;
        padding-bottom: 15px !important;
        margin-bottom: 30px !important;
    }

    
    /* Enhanced Form Labels */
    .form-label {
        position: relative !important;
        font-weight: 600 !important;
        color: #333 !important;
        margin-bottom: 10px !important;
        display: block !important;
    }
    

    
    /* Enhanced Contact Item Titles */
    .contact-item-title {
        position: relative !important;
        padding-left: 0px !important;
    }
 
    
    /* Enhanced Contact Text */
    .contact-item-text {
        position: relative !important;
        padding-left: 15px !important;
        line-height: 1.6 !important;
    }
    
    /* Enhanced Address Styling */
    .contact-item-text strong {
        color: #FF7A00 !important;
        font-weight: 700 !important;
    }
    
    /* Enhanced Form Group Spacing */
    .mobile-form-group {
        position: relative !important;
        margin-bottom: 25px !important;
    }
    
    .mobile-form-group:last-child {
        margin-bottom: 0 !important;
    }
    
    /* Enhanced Textarea */
    .mobile-form-textarea {
        resize: vertical !important;
        min-height: 120px !important;
        line-height: 1.6 !important;
    }
    
    /* Enhanced Container Spacing */
    .mobile-contact-content {
        gap: 40px !important;
    }
    
    /* Enhanced Section Padding */
    .mobile-contact-section {
        padding: 60px 0 !important;
    }
    
    .mobile-organization-form-section {
        margin-top: 40px !important;
    }
    
    /* Enhanced Map Section */
    .mobile-map-section {
        padding: 60px 0 !important;
    }
    
    /* Enhanced Responsive Design */
    @media (max-width: 480px) {
        .container {
            width: 100% !important;
        }
        
        .mobile-menu-toggle {
            display: flex !important;
            visibility: visible !important;
            opacity: 1 !important;
            z-index: 9999 !important;
            width: 28px !important;
            height: 22px !important;
            margin-left: 8px !important;
        }
        
        .mobile-menu-toggle span {
            height: 2.5px !important;
        }
        
        /* ===== REMOVE GRID TEMPLATE COLUMNS ON SMALL MOBILE ===== */
        .service-cards,
        .mission-cards,
        .features,
        .contact-methods,
        .form-row,
        .contact-form-wrapper,
        .service-grid,
        .stats-grid,
        .trust-grid,
        .footer-content,
        .news-grid,
        .media-categories,
        .content-grid,
        .details-grid,
        .service-options-grid,
        .option-features,
        .service-categories,
        .related-grid,
        .calendar-weekdays,
        .calendar-days,
        .cart-modal-body,
        .mobile-about-stats,
        .hero-layout,
        .features-grid,
        .audience-grid,
        .statistics-section {
            grid-template-columns: 1fr !important;
        }
        
        .mobile-contact-info-card,
        .mobile-contact-form-card,
        .mobile-organization-form-section {
            margin: block;
            width: 90% !important;
            padding: 25px 15px !important;
        }
        
        .mobile-rating-label {
            width: 35px !important;
            height: 35px !important;
            font-size: 0.9rem !important;
        }
        
        .mobile-rating-options {
            gap: 6px !important;
        }
        
        .contact-form-title,
        .organization-form-title {
            font-size: 1.3rem !important;
        }
    }
    
    /* Hide desktop gallery on mobile */
    /* .desktop-only {
        display: none !important;
    } */
    
    /* Show mobile cards section on mobile */
    .mobile-only {
        display: block !important;
    }
    
    /* Mobile Cards Section - One Card Per Row */
    .mobile-cards-section {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
        padding: 20px 0 !important;
    }
    
    .mobile-card-row {
        width: 100% !important;
        display: block !important;
    }
    
    .mobile-single-card {
        width: 100% !important;
        background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%) !important;
        border: 2px solid #e9ecef !important;
        border-radius: 20px !important;
        padding: 30px 20px !important;
        box-shadow: 0 8px 32px rgba(0,0,0,0.08) !important;
        text-align: center !important;
        box-sizing: border-box !important;
        transition: all 0.3s ease !important;
    }
    
    .mobile-single-card:hover {
        transform: translateY(-3px) !important;
        box-shadow: 0 12px 40px rgba(0,0,0,0.12) !important;
        border-color: #FF7A00 !important;
    }
    
    .mobile-card-icon {
        width: 70px !important;
        height: 70px !important;
        background: linear-gradient(135deg, #FF7A00, #E56717) !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 auto 20px !important;
        box-shadow: 0 6px 20px rgba(255, 122, 0, 0.3) !important;
    }
    
    .mobile-card-icon i {
        font-size: 28px !important;
        color: #fff !important;
    }
    
    .mobile-card-title {
        font-size: 1.3rem !important;
        color: #333 !important;
        margin-bottom: 15px !important;
        font-weight: 700 !important;
    }
    
    .mobile-card-text {
        font-size: 0.95rem !important;
        color: #666 !important;
        line-height: 1.6 !important;
        margin: 0 !important;
    }
    
    /* Community Voucher Gallery Styles - Desktop Only */
    .card-gallery-container {
        position: relative !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 20px 0 !important;
    }
    
    .gallery-dots {
        display: flex !important;
        justify-content: center !important;
        gap: 12px !important;
        margin-bottom: 30px !important;
    }
    
    .dot {
        width: 12px !important;
        height: 12px !important;
        border-radius: 50% !important;
        background: #e9ecef !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
        border: 2px solid transparent !important;
    }
    
    .dot.active {
        background: #FF7A00 !important;
        transform: scale(1.2) !important;
        box-shadow: 0 0 0 3px rgba(255, 122, 0, 0.2) !important;
    }
    
    .dot:hover {
        background: #FF7A00 !important;
        transform: scale(1.1) !important;
    }
    
    .card-gallery-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        display: block !important;
    }
    
    .card-gallery-wrapper .detail-card {
        display: none !important;
        width: 100% !important;
        max-width: 100% !important;
        background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%) !important;
        border: 2px solid #e9ecef !important;
        border-radius: 20px !important;
        padding: 30px 20px !important;
        box-shadow: 0 12px 40px rgba(0,0,0,0.08) !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }
    
    .card-gallery-wrapper .detail-card.active {
        display: block !important;
    }
    
    .card-gallery-wrapper .detail-card.prev,
    .card-gallery-wrapper .detail-card.next {
        display: none !important;
    }
    
    .gallery-nav {
        display: flex !important;
        justify-content: space-between !important;
        margin-top: 20px !important;
        padding: 0 20px !important;
    }
    
    .gallery-prev,
    .gallery-next {
        width: 50px !important;
        height: 50px !important;
        border-radius: 50% !important;
        background: linear-gradient(135deg, #FF7A00, #E56717) !important;
        border: none !important;
        color: #fff !important;
        font-size: 18px !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 4px 16px rgba(255, 122, 0, 0.3) !important;
    }
    
    .gallery-prev:hover,
    .gallery-next:hover {
        transform: translateY(-3px) !important;
        box-shadow: 0 6px 20px rgba(255, 122, 0, 0.4) !important;
    }
    
    .gallery-prev:disabled,
    .gallery-next:disabled {
        background: #e9ecef !important;
        color: #adb5bd !important;
        cursor: not-allowed !important;
        transform: none !important;
        box-shadow: none !important;
    }
    
    /* Enhanced card content styling */
    .card-gallery-wrapper .detail-icon {
        width: 80px !important;
        height: 80px !important;
        background: linear-gradient(135deg, #FF7A00, #E56717) !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-bottom: 25px !important;
        box-shadow: 0 8px 25px rgba(255, 122, 0, 0.3) !important;
        transition: all 0.3s ease !important;
    }
    
    .card-gallery-wrapper .detail-icon i {
        font-size: 32px !important;
        color: #fff !important;
    }
    
    .card-gallery-wrapper .detail-title {
        font-size: 1.5rem !important;
        color: #333 !important;
        margin-bottom: 20px !important;
        font-weight: 700 !important;
    }
    
    .card-gallery-wrapper .detail-text {
        font-size: 1rem !important;
        color: #666 !important;
        line-height: 1.6 !important;
        max-width: 90% !important;
        margin: 0 auto !important;
    }
    
    /* Card tap animation */
    .card-gallery-wrapper .detail-card:active {
        transform: scale(0.98) !important;
    }
    
    /* Responsive adjustments */
    @media (max-width: 480px) {
        .card-gallery-wrapper .detail-card {
            padding: 25px 15px !important;
        }
        
        .card-gallery-wrapper .detail-icon {
            width: 60px !important;
            height: 60px !important;
            margin-bottom: 15px !important;
        }
        
        .card-gallery-wrapper .detail-icon i {
            font-size: 24px !important;
        }
        
        .card-gallery-wrapper .detail-title {
            font-size: 1.2rem !important;
            margin-bottom: 12px !important;
        }
        
        .card-gallery-wrapper .detail-text {
            font-size: 0.9rem !important;
            line-height: 1.5 !important;
        }
        
        .gallery-prev,
        .gallery-next {
            width: 40px !important;
            height: 40px !important;
            font-size: 14px !important;
        }
        
        .gallery-dots {
            margin-bottom: 20px !important;
        }
        
        .dot {
            width: 10px !important;
            height: 10px !important;
        }
    }
    
    /* Remove effects from fanned images on mobile */
    .mobile-fanned-image {
        cursor: default !important;
        pointer-events: none !important;
    }
    
    .mobile-fanned-image:hover {
        transform: translateY(-50%) !important;
        z-index: inherit !important;
        box-shadow: none !important;
        border: none !important;
        overflow: hidden !important;
    }
    
    .mobile-fanned-image:hover img {
        transform: none !important;
        object-fit: cover !important;
        background-color: transparent !important;
    }
    
    .mobile-fanned-image img {
        transition: none !important;
    }
}

/* Desktop Styles - Show gallery, hide mobile cards */
@media (min-width: 769px) {
    .desktop-only {
        display: block !important;
    }
    
    .mobile-only {
        display: none !important;
    }
    
    /* Hide mobile menu close button on desktop */
    .mobile-menu-close {
        display: none !important;
    }
    
    /* Ensure process-steps display in single row on desktop */
    .process-steps {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 2rem !important;
        max-width: 1200px !important;
        margin: 0 auto !important;
    }
}

/* Service Page UI Improvements */
@media (max-width: 768px) {
    /* Service Page Banner */
    .mobile-service-banner {
        position: relative !important;
        height: 250px !important;
        overflow: hidden !important;
    }
    
    .mobile-service-banner img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
    }
    
    .mobile-service-banner-title {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        color: #fff !important;
        font-size: 1.8rem !important;
        font-weight: 700 !important;
        text-shadow: 0 2px 8px rgba(0,0,0,0.7) !important;
        text-align: center !important;
        margin: 0 !important;
        padding: 0 20px !important;
        letter-spacing: 0.05em !important;
        line-height: 1.2 !important;
    }
    
    /* Service Categories Section */
    .mobile-service-categories {
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
        padding: 40px 0 !important;
        position: relative !important;
    }
    
    
    /* Section Headers */
    .mobile-section-header {
        text-align: center !important;
        margin-bottom: 30px !important;
    }
    
    .mobile-section-title {
        color: #2c3e50 !important;
        font-size: 1.8rem !important;
        font-weight: 700 !important;
        margin-bottom: 15px !important;
        position: relative !important;
        padding-bottom: 15px !important;
    }
    
    .mobile-section-title::after {
     display: none !important;
    }
    
    .mobile-section-description {
        font-size: 1rem !important;
        color: #6c757d !important;
        line-height: 1.6 !important;
        max-width: 600px !important;
        margin: 0 auto !important;
        padding: 0 20px !important;
    }
    
    /* Service Tabs */
    .mobile-service-tabs {
        display: flex !important;
        justify-content: center !important;
        margin-bottom: 30px !important;
        gap: 10px !important;
    }
    
    .mobile-service-tabs .service-tab {
        background: #fff !important;
        border: 2px solid #e9ecef !important;
        border-radius: 25px !important;
        padding: 12px 24px !important;
        font-size: 1rem !important;
        font-weight: 600 !important;
        color: #6c757d !important;
        transition: all 0.3s ease !important;
        cursor: pointer !important;
    }
    
    .mobile-service-tabs .service-tab.active {
        background: #FF7A00 !important;
        border-color: #FF7A00 !important;
        color: #fff !important;
        box-shadow: 0 4px 12px rgba(255, 122, 0, 0.3) !important;
    }
    

    
    /* Service Cards */
    .mobile-service-card {
        background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%) !important;
        border: 2px solid #e9ecef !important;
        border-radius: 20px !important;
        box-shadow: 0 8px 32px rgba(0,0,0,0.08) !important;
        transition: all 0.3s ease !important;
        overflow: hidden !important;
        position: relative !important;
        height: auto !important;
        min-height: fit-content !important;
    }
    
    .mobile-service-card:hover {
        transform: translateY(-5px) !important;
        box-shadow: 0 12px 40px rgba(0,0,0,0.15) !important;
        border-color: #FF7A00 !important;
    }
    
    .mobile-service-card::before {
        content: '' !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 4px !important;
        background: linear-gradient(90deg, #FF7A00 0%, #ff8c1a 100%) !important;
    }
    
    /* Service Icons */
    .mobile-service-icon {
        background: linear-gradient(135deg, #FF7A00 0%, #ff8c1a 100%) !important;
        padding: 30px 20px !important;
        text-align: center !important;
        position: relative !important;
    }
    
    .mobile-service-icon i {
        font-size: 2.5rem !important;
        color: #fff !important;
        text-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
    }
    
    /* Service Content */
    .mobile-service-content {
        padding: 25px 20px !important;
    }
    
    .mobile-service-title {
        color: #2c3e50 !important;
        font-size: 1.4rem !important;
        font-weight: 700 !important;
        margin-bottom: 15px !important;
        line-height: 1.3 !important;
    }
    
    .mobile-service-content p {
        color: #6c757d !important;
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
        margin-bottom: 20px !important;
    }
    
    /* Service Features */
    .mobile-service-features {
        list-style: none !important;
        padding: 0 !important;
        margin: 20px 0 !important;
    }
    
    .mobile-service-features li {
        padding: 8px 0 !important;
        border-bottom: 1px solid #f1f3f4 !important;
        color: #495057 !important;
        font-size: 0.9rem !important;
        position: relative !important;
        padding-left: 25px !important;
    }
    
    .mobile-service-features li:last-child {
        border-bottom: none !important;
    }
/*     
    .mobile-service-features li::before {
        content: '✓' !important;
        position: absolute !important;
        left: 0 !important;
        top: 8px !important;
        color: #FF7A00 !important;
        font-weight: bold !important;
        font-size: 1rem !important;
    }
     */
    /* Service Price */
    .mobile-service-price {
        text-align: center !important;
        margin: 20px 0 !important;
        padding: 15px !important;
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
        border-radius: 12px !important;
    }
    
    .mobile-service-price span {
        color: #6c757d !important;
        font-size: 0.9rem !important;
        font-weight: 500 !important;
    }
    
    .mobile-service-price h4 {
        color: #FF7A00 !important;
        font-size: 1.8rem !important;
        font-weight: 700 !important;
        margin: 8px 0 0 0 !important;
    }
    
    /* Service Buttons */
    .mobile-service-btn {
        background: linear-gradient(135deg, #FF7A00 0%, #ff8c1a 100%) !important;
        color: #fff !important;
        border: none !important;
        border-radius: 12px !important;
        padding: 15px 25px !important;
        font-size: 1rem !important;
        font-weight: 600 !important;
        text-decoration: none !important;
        display: block !important;
        text-align: center !important;
        transition: all 0.3s ease !important;
        box-shadow: 0 4px 12px rgba(255, 122, 0, 0.3) !important;
    }
    
    .mobile-service-btn:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 20px rgba(255, 122, 0, 0.4) !important;
        background: linear-gradient(135deg, #e67300 0%, #ff7a00 100%) !important;
    }
    
    /* Custom Services Section */
    .mobile-custom-services {
        background: #fff !important;
        padding: 50px 0 !important;
        position: relative !important;
    }
    
    .mobile-custom-services::before {
        content: '' !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 4px !important;
        background: linear-gradient(90deg, #FF7A00 0%, #ff8c1a 100%) !important;
    }
    
    .mobile-custom-services-content {
        display: flex !important;
        flex-direction: column !important;
        gap: 30px !important;
        align-items: center !important;
    }
    
    .mobile-custom-services-text {
        text-align: center !important;
        max-width: 600px !important;
    }
    
    .mobile-custom-services-list {
        list-style: none !important;
        padding: 0 !important;
        margin: 25px 0 !important;
        text-align: left !important;
    }
    
    .mobile-custom-services-list li {
        padding: 12px 0 !important;
        color: #495057 !important;
        font-size: 1rem !important;
        line-height: 1.5 !important;
        position: relative !important;
        padding-left: 30px !important;
    }
    
    .mobile-custom-services-list li i {
        position: absolute !important;
        left: 0 !important;
        top: 12px !important;
        color: #FF7A00 !important;
        font-size: 1.1rem !important;
    }
    
    .mobile-custom-services-btn {
        background: linear-gradient(135deg, #FF7A00 0%, #ff8c1a 100%) !important;
        color: #fff !important;
        border: none !important;
        border-radius: 12px !important;
        padding: 15px 30px !important;
        font-size: 1.1rem !important;
        font-weight: 600 !important;
        text-decoration: none !important;
        display: inline-block !important;
        transition: all 0.3s ease !important;
        box-shadow: 0 4px 12px rgba(255, 122, 0, 0.3) !important;
        margin-top: 20px !important;
    }
    
    .mobile-custom-services-btn:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 20px rgba(255, 122, 0, 0.4) !important;
        background: linear-gradient(135deg, #e67300 0%, #ff7a00 100%) !important;
    }
    
    .mobile-custom-services-image {
        text-align: center !important;
        margin-top: 20px !important;
    }
    
    .mobile-custom-services-image img {
        width: 100% !important;
        max-width: 400px !important;
        height: auto !important;
        border-radius: 15px !important;
        box-shadow: 0 8px 32px rgba(0,0,0,0.1) !important;
        transition: transform 0.3s ease !important;
    }
    
    .mobile-custom-services-image img:hover {
        transform: scale(1.02) !important;
    }
    
    /* CTA Section */
    .mobile-cta-section {
        background: linear-gradient(135deg, #FF7A00 0%, #ff8c1a 100%) !important;
        padding: 50px 0 !important;
        position: relative !important;
        overflow: hidden !important;
    }
    
    .mobile-cta-section::before {
        content: '' !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="50" cy="10" r="0.5" fill="rgba(255,255,255,0.1)"/><circle cx="10" cy="60" r="0.5" fill="rgba(255,255,255,0.1)"/><circle cx="90" cy="40" r="0.5" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>') !important;
        opacity: 0.3 !important;
    }
    
    .mobile-cta-section .mobile-section-title {
        color: #fff !important;
        text-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
    }
    
 
    
    .mobile-cta-section .mobile-section-description {
        color: rgba(255,255,255,0.9) !important;
    }
    
    .mobile-cta-buttons {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
        margin-top: 30px !important;
        align-items: center !important;
    }
    
    .mobile-cta-btn {
        background: #fff !important;
        color: #FF7A00 !important;
        border: 2px solid #fff !important;
        border-radius: 12px !important;
        padding: 15px 30px !important;
        font-size: 1.1rem !important;
        font-weight: 600 !important;
        text-decoration: none !important;
        display: inline-block !important;
        transition: all 0.3s ease !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
        min-width: 200px !important;
        text-align: center !important;
    }
    
    .mobile-cta-btn:hover {
        background: transparent !important;
        color: #fff !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 20px rgba(0,0,0,0.3) !important;
    }
}

@media (max-width: 480px) {
    .mobile-service-banner-title {
        font-size: 1.5rem !important;
        padding: 0 15px !important;
    }
    
    .mobile-section-title {
        font-size: 1.5rem !important;
    }
    
    .mobile-section-description {
        font-size: 0.9rem !important;
        padding: 0 15px !important;
    }
    
 
    
    .mobile-service-content {
        padding: 20px 15px !important;
    }
    
    .mobile-service-title {
        font-size: 1.2rem !important;
    }
    
    .mobile-service-icon {
        padding: 25px 15px !important;
    }
    
    .mobile-service-icon i {
        font-size: 2rem !important;
    }
    
    .mobile-service-price h4 {
        font-size: 1.5rem !important;
    }
    
    .mobile-custom-services {
        padding: 40px 0 !important;
    }
    
    .mobile-cta-section {
        padding: 40px 0 !important;
    }
    
    .mobile-cta-btn {
        min-width: 180px !important;
        padding: 12px 25px !important;
        font-size: 1rem !important;
    }
}

/* About Page UI Improvements */
@media (max-width: 768px) {
    /* About Page Banner */
    .mobile-about-banner {
        position: relative !important;
        height: 250px !important;
        overflow: hidden !important;
    }
    
    .mobile-about-banner img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
    }
    
    .mobile-about-banner-title {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        color: #fff !important;
        font-size: 1.8rem !important;
        font-weight: 700 !important;
        text-shadow: 0 2px 16px rgba(0,0,0,0.7) !important;
        text-align: center !important;
        padding: 0 20px !important;
        margin: 0 !important;
        letter-spacing: 0.05em !important;
    }
    
    /* About Page Sections */
    .mobile-about-intro {
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
        padding: 40px 0 !important;
        position: relative !important;
    }
    
  
    .mobile-section-header {
        text-align: center !important;
        margin-bottom: 30px !important;
    }
    
    .mobile-section-title {
        color: #FF7A00 !important;
        font-size: 1.8rem !important;
        font-weight: 700 !important;
        margin-bottom: 15px !important;
        position: relative !important;
        padding-bottom: 15px !important;
    }
    
    .mobile-section-title::after {
       display: none !important;
     
    }
    
    .mobile-section-description {
        font-size: 1rem !important;
        color: #333 !important;
        line-height: 1.7 !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 20px !important;
    }
    
    /* About Team Section */
    .mobile-about-team {
        background: #fff !important;
        padding: 50px 0 !important;
        position: relative !important;
    }
    
    .mobile-about-team::before {
        content: '' !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 4px !important;
        background: linear-gradient(90deg, #FF7A00, #E56717) !important;
    }
    
    .mobile-about-team-content {
        display: flex !important;
        flex-direction: column !important;
        gap: 30px !important;
        align-items: center !important;
    }
    
    .mobile-about-team-img {
        width: 100% !important;
        max-width: 300px !important;
        text-align: center !important;
        margin: 0 auto !important;
    }
    
    .mobile-about-team-img img {
        width: 100% !important;
        max-width: 300px !important;
        height: auto !important;
        border-radius: 20px !important;
        box-shadow: 0 8px 32px rgba(0,0,0,0.12) !important;
        transition: transform 0.3s ease !important;
    }
    
    .mobile-about-team-img img:hover {
        transform: scale(1.02) !important;
    }
    
    /* Statistics Cards */
    .mobile-about-stats {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        margin-top: 30px !important;
        width: 100% !important;
    }
    
    .mobile-stat-card {
        background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%) !important;
        border: 2px solid #e9ecef !important;
        border-radius: 20px !important;
        padding: 25px 20px !important;
        text-align: center !important;
        box-shadow: 0 8px 32px rgba(0,0,0,0.08) !important;
        transition: all 0.3s ease !important;
        position: relative !important;
        overflow: hidden !important;
    }
    
    .mobile-stat-card::before {
        content: '' !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 4px !important;
        background: linear-gradient(90deg, #FF7A00, #E56717) !important;
    }
    
    .mobile-stat-card:hover {
        transform: translateY(-5px) !important;
        box-shadow: 0 12px 40px rgba(0,0,0,0.15) !important;
        border-color: #FF7A00 !important;
    }
    
    .stat-icon-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 15px !important;
        margin-bottom: 20px !important;
    }
    
    .stat-icon {
        width: 60px !important;
        height: 60px !important;
        background: linear-gradient(135deg, #FF7A00, #E56717) !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 6px 20px rgba(255, 122, 0, 0.3) !important;
        transition: transform 0.3s ease !important;
         font-size: 24px !important;
        color: #fff !important;
    }
    
    .mobile-stat-card:hover .stat-icon {
        transform: scale(1.1) !important;
    }
    
  
    .stat-number {
        color: #FF7A00 !important;
        font-size: 1.6rem !important;
        font-weight: 700 !important;
        margin: 0 !important;
        line-height: 1.2 !important;
    }
    
    .stat-description {
        color: #333 !important;
        font-size: 0.95rem !important;
        font-weight: 500 !important;
        margin: 0 !important;
        line-height: 1.4 !important;
    }
    
    /* Milestones Section */
    .mobile-about-milestones {
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
        padding: 50px 0 !important;
        position: relative !important;
    }
    
    .mobile-about-milestones::before {
        content: '' !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 4px !important;
        background: linear-gradient(90deg, #FF7A00, #E56717) !important;
    }
    
    .mobile-milestone-container {
        text-align: center !important;
        margin-top: 20px !important;
    }
    
    .mobile-milestone-image {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        border-radius: 20px !important;
        box-shadow: 0 8px 32px rgba(0,0,0,0.12) !important;
        transition: transform 0.3s ease !important;
    }
    
    .mobile-milestone-image:hover {
        transform: scale(1.02) !important;
    }
    
    /* Partners Section */
    .mobile-about-partners {
        background: #fff !important;
        padding: 50px 0 !important;
        position: relative !important;
    }
    
    .mobile-about-partners::before {
        content: '' !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 4px !important;
        background: linear-gradient(90deg, #FF7A00, #E56717) !important;
    }
    
    .partners-slider {
        margin-top: 30px !important;
    }
    
    .partner-logo {
        height: 60px !important;
        width: auto !important;
        max-width: 120px !important;
        object-fit: contain !important;
        filter: grayscale(100%) !important;
        transition: all 0.3s ease !important;
        opacity: 0.7 !important;
    }
    
    .partner-logo:hover {
        filter: grayscale(0%) !important;
        opacity: 1 !important;
        transform: scale(1.05) !important;
    }
    
    /* Responsive adjustments for smaller screens */
    @media (max-width: 480px) {
        .mobile-about-banner-title {
            font-size: 1.5rem !important;
            padding: 0 15px !important;
        }
        
        .mobile-section-title {
            font-size: 1.8rem !important;
        }
        
        .mobile-section-description {
            font-size: 0.95rem !important;
            padding: 0 15px !important;
        }
        
        .mobile-stat-card {
            padding: 20px 15px !important;
        }
        
        .stat-icon {
            background: linear-gradient(135deg, #FF7A00, #E56717) !important;
            border-radius: 50% !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            box-shadow: 0 6px 20px rgba(255, 122, 0, 0.3) !important;
            transition: transform 0.3s ease !important;
        }
        
        .stat-icon i {
            font-size: 20px !important;
        }
        
        .stat-number {
            font-size: 1.4rem !important;
        }
        
        .stat-description {
            font-size: 0.9rem !important;
        }
        
        .partner-logo {
            height: 50px !important;
            max-width: 100px !important;
        }
    }
}
    
    .banner-content-container {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 auto !important;
    }
    
    .banner-content-mobile h1 {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
        margin-bottom: 12px !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
        color: #fff !important;
        text-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
        font-weight: 700 !important;
    }
    
    .banner-content-mobile h2 {
        font-size: 1.1rem !important;
        line-height: 1.3 !important;
        margin-bottom: 10px !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
        color: #fff !important;
        text-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
        font-weight: 500 !important;
    }
    
    .banner-content-mobile p {
        font-size: 0.95rem !important;
        line-height: 1.4 !important;
        margin-bottom: 25px !important;
        display: block !important;
        color: #fff !important;
        text-shadow: 0 1px 4px rgba(0,0,0,0.3) !important;
    }
    
    .banner-content-mobile .cta-buttons {
        flex-direction: column !important;
        gap: 15px !important;
        margin-top: 25px !important;
        align-items: center !important;
    }
    
    .banner-content-mobile .cta-buttons .btn {
        font-size: 1rem !important;
        padding: 14px 28px !important;
        text-align: center !important;
        border-radius: 25px !important;
        font-weight: 600 !important;
        min-width: 220px !important;
        text-decoration: none !important;
        transition: all 0.3s ease !important;
    }
    
    .banner-content-mobile .cta-buttons .primary-btn {
        background: #fff !important;
        color: #FF7A00 !important;
        border: 2px solid #fff !important;
    }
    
    .banner-content-mobile .cta-buttons .secondary-btn {
        background: transparent !important;
        color: #fff !important;
        border: 2px solid #fff !important;
    }
    
    .banner-content-mobile .cta-buttons .btn:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
    }
    
    .main-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 85%;
        max-width: 400px;
        height: 100vh;
        background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
        box-shadow: -5px 0 25px rgba(0, 0, 0, 0.15);
        transition: right 0.3s ease;
        z-index: 9999;
        overflow-y: auto;
        padding: 0;
        display: block !important;
    }
    
    /* Side menu header */
    .main-menu::before {
        content: 'Hygiene First 首衛';
        position: sticky;
        top: 0;
        left: 0;
        right: 0;
        background: linear-gradient(135deg, #FF7A00, #E56717);
        color: white;
        padding: 20px 25px 15px 25px;
        font-size: 1.3rem;
        font-weight: 700;
        text-align: center;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        z-index: 10001;
        display: block;
    }
    
    .main-menu.active {
        right: 0;
    }
    
    .main-menu ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    
    .main-menu li {
        margin: 0;
        padding: 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .main-menu li:last-child {
        border-bottom: none;
    }
    
    .main-menu > li > a {
        display: block;
        padding: 18px 25px;
        color: #22313f;
        text-decoration: none;
        font-size: 1.1rem;
        font-weight: 600;
        transition: all 0.3s ease;
        position: relative;
        border-left: 4px solid transparent;
        background: rgba(255, 255, 255, 0.8);
        margin: 2px 0;
        border-radius: 0 8px 8px 0;
    }
    
    .main-menu > li > a:hover {
        background: rgba(255, 122, 0, 0.1);
        color: #FF7A00;
        border-left-color: #FF7A00;
        padding-left: 30px;
        transform: translateX(5px);
        box-shadow: 0 2px 8px rgba(255, 122, 0, 0.2);
    }
    
    /* Dropdown toggle indicator */
    .main-menu .dropdown > a::after {
        content: '▼';
        position: absolute;
        right: 25px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 0.8rem;
        color: #666;
        transition: transform 0.3s ease;
    }
    
    .main-menu .dropdown.open > a::after {
        transform: translateY(-50%) rotate(180deg);
    }
    
    /* Dropdown content - always expanded */
    .dropdown-content {
        display: block !important;
        background: rgba(255, 122, 0, 0.05);
        border-left: 4px solid #FF7A00;
        margin-left: 0;
        padding: 0;
        box-shadow: none;
        position: static;
        width: 100%;
        min-width: auto;
        border-radius: 0 8px 8px 0;
        margin: 2px 0;
    }
    
    .dropdown-content.show {
        display: block !important;
    }
    
    .dropdown-content a {
        display: block !important;
        padding: 15px 25px 15px 45px;
        color: #555;
        text-decoration: none;
        font-size: 1rem;
        font-weight: 500;
        transition: all 0.3s ease;
        position: relative;
        visibility: visible !important;
        opacity: 1 !important;
        background: rgba(255, 255, 255, 0.6);
        margin: 1px 0;
        border-radius: 0 6px 6px 0;
    }
    
    .dropdown-content a::before {
        content: '▶';
        position: absolute;
        left: 30px;
        color: #FF7A00;
        font-weight: bold;
        font-size: 0.8rem;
    }
    
    .dropdown-content a:hover {
        background: rgba(255, 122, 0, 0.1);
        color: #FF7A00;
        padding-left: 50px;
        transform: translateX(3px);
        box-shadow: 0 1px 4px rgba(255, 122, 0, 0.2);
    }
    
    /* Mobile menu overlay - disabled */
    .mobile-menu-overlay {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }
    
    .mobile-menu-overlay.active {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }
    
    /* Menu header - matching website theme */
    .main-menu::before {
        content: 'Hygiene First 首衛';
        display: block;
        padding: 25px 25px;
        background: linear-gradient(135deg, #FF7A00, #E56717);
        color: white;
        font-size: 1.3rem;
        font-weight: 700;
        text-align: center;
        box-shadow: 0 2px 10px rgba(255, 122, 0, 0.3);
        position: relative;
    }
    
    .main-menu::before::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, #2ca97a, #FF7A00, #2ca97a);
    }
    
    /* Close button styling */
    .mobile-menu-close {
        position: absolute;
        top: 18px;
        right: 20px;
        width: 28px;
        height: 28px;
        background: rgba(255, 255, 255, 0.95);
        color: #FF7A00;
        display: none;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        cursor: pointer;
        font-size: 1rem;
        z-index: 10010;
        border: none;
        transition: all 0.3s ease;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    }
    
    /* Show close button when menu is active */
    .main-menu.active ~ .mobile-menu-close {
        display: flex;
    }
    
    .mobile-menu-close:hover {
        background: rgba(255, 255, 255, 1);
        transform: scale(1.05);
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
    }
    
    /* Special styling for main menu items - matching website theme */
    .main-menu > li:nth-child(1) > a {
        border-left-color: #FF7A00; /* 關於我們 */
        background: linear-gradient(135deg, rgba(255, 122, 0, 0.1), rgba(255, 122, 0, 0.05));
    }
    
    .main-menu > li:nth-child(2) > a {
        border-left-color: #2ca97a; /* 居家護理服務 */
        background: linear-gradient(135deg, rgba(44, 169, 122, 0.1), rgba(44, 169, 122, 0.05));
    }
    
    .main-menu > li:nth-child(3) > a {
        border-left-color: #E56717; /* 機構護理人手支援 */
        background: linear-gradient(135deg, rgba(229, 103, 23, 0.1), rgba(229, 103, 23, 0.05));
    }
    
    .main-menu > li:nth-child(4) > a {
        border-left-color: #FF7A00; /* 醫療及化學廢物收集服務 */
        background: linear-gradient(135deg, rgba(255, 122, 0, 0.1), rgba(255, 122, 0, 0.05));
    }
    
    .main-menu > li:nth-child(5) > a {
        border-left-color: #2ca97a; /* 長者社區服務劵 */
        background: linear-gradient(135deg, rgba(44, 169, 122, 0.1), rgba(44, 169, 122, 0.05));
    }
    
    .main-menu > li:nth-child(6) > a {
        border-left-color: #FF7A00; /* 立即預約 */
        background: linear-gradient(135deg, rgba(255, 122, 0, 0.15), rgba(255, 122, 0, 0.1));
        font-weight: 700;
    }
    
    /* Animation for menu items */
    .main-menu li {
        opacity: 0;
        transform: translateX(20px);
        animation: slideInRight 0.3s ease forwards;
    }
    
    .main-menu li:nth-child(1) { animation-delay: 0.1s; }
    .main-menu li:nth-child(2) { animation-delay: 0.2s; }
    .main-menu li:nth-child(3) { animation-delay: 0.3s; }
    .main-menu li:nth-child(4) { animation-delay: 0.4s; }
    .main-menu li:nth-child(5) { animation-delay: 0.5s; }
    .main-menu li:nth-child(6) { animation-delay: 0.6s; }
    
    @keyframes slideInRight {
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }
    
    /* Body scroll lock when menu is open */
    body.menu-open {
        overflow: hidden;
    }
    
    /* ===== REAL STORIES SECTION - MOBILE REDESIGN ===== */
    
    .real-stories {
        padding: 40px 15px;
        background: linear-gradient(135deg, #f8fffe 0%, #e8f5f3 100%);
        position: relative;
        overflow: hidden;
    }
    
    .real-stories::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, #2ca97a, #ff7a00, #2ca97a);
        background-size: 200% 100%;
        animation: gradientShift 3s ease-in-out infinite;
    }
    
    @keyframes gradientShift {
        0%, 100% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
    }
    
    .real-stories-flex {
      /*  flex-direction: column;*/
        gap: 25px;
        text-align: center;
        position: relative;
        z-index: 1;
    }
    
    .real-stories-text {
        order: 2;
      background: transparent !important;
        padding: 25px 20px;
        border-radius: 20px;
        box-shadow: none !important;
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.2);
    }
    
    .real-stories-heading {
        font-size: 1.1rem;
        margin-bottom: 12px;
        color: #2ca97a;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        position: relative;
    }
    

    
    .real-stories-title {
        font-size: 1.4rem;
        margin-bottom: 20px;
        line-height: 1.3;
        color: #22313f;
        font-weight: 800;
    }
    
    .real-stories-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 16px 32px;
        background: linear-gradient(135deg, #2ca97a, #218a62);
        color: white;
        text-decoration: none;
        border-radius: 30px;
        font-weight: 700;
        font-size: 1rem;
        transition: all 0.3s ease;
        margin-top: 15px;
        box-shadow: 0 6px 20px rgba(44, 169, 122, 0.3);
        position: relative;
        overflow: hidden;
    }
    
    .real-stories-btn::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        transition: left 0.5s ease;
    }
    
    .real-stories-btn:hover::before {
        left: 100%;
    }
    
    .real-stories-btn:hover {
        background: linear-gradient(135deg, #218a62, #1a6b4f);
        transform: translateY(-3px);
        box-shadow: 0 8px 25px rgba(44, 169, 122, 0.4);
    }
    
    .real-stories-video {
        order: 1;
        width: 100%;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
        position: relative;
        background: #000;
    }
    
    .real-stories-video::before {
         content: '';
         position: absolute;
         top: 0;
         left: 0;
         right: 0;
         bottom: 0;
        background: linear-gradient(45deg, rgba(44, 169, 122, 0.1), rgba(255, 122, 0, 0.1));
         z-index: 1;
        pointer-events: none;
    }
    
    .real-stories-video iframe {
        width: 100%;
        height: 200px;
        border-radius: 20px;
        border: none;
         position: relative;
         z-index: 2;
     }
     
    /* Video placeholder for when video fails to load */
    .real-stories-video::after {
        content: '🎥 海上護理培訓工作坊';
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
        color: white;
        font-size: 1.2rem;
        font-weight: 600;
        z-index: 3;
             opacity: 0;
        transition: opacity 0.3s ease;
        pointer-events: none;
    }
    
    .real-stories-video.error::after {
             opacity: 1;
    }
    
    /* Additional responsive adjustments for different mobile sizes */
     @media (max-width: 480px) {
        .real-stories {
            padding: 30px 10px;
        }
        
        .real-stories-text {
            padding: 20px 15px;
        }
        
        .real-stories-heading {
         font-size: 1rem;
     }
     
        .real-stories-title {
            font-size: 1.2rem;
        }
        
        .real-stories-btn {
            padding: 14px 28px;
            font-size: 0.95rem;
        }
        
        .real-stories-video iframe {
            height: 260px;
        }
    }
    
     @media (max-width: 360px) {
        .real-stories-video iframe {
            height: 260px;
        }
        
        .real-stories-title {
            font-size: 1.1rem;
        }
    }
}
    /* ===== ELDERLY CARE PAGE MOBILE ENHANCEMENTS ===== */
    
    /* Mobile Banner Content */
    .banner-content-mobile {
        display: none !important;
        background: linear-gradient(135deg, #FF7A00, #E56717) !important;
        padding: 40px 20px !important;
        margin: 0 !important;
        text-align: center !important;
    }
    
    .mobile-banner-title {
        font-size: 2.2rem !important;
        color: #fff !important;
        font-weight: 700 !important;
        margin-bottom: 0.5rem !important;
        text-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
    }
    
    .mobile-banner-subtitle {
        font-size: 1.4rem !important;
        color: rgba(255,255,255,0.9) !important;
        font-weight: 500 !important;
        margin-bottom: 1rem !important;
    }
    
    .mobile-banner-description {
        font-size: 1rem !important;
        color: rgba(255,255,255,0.8) !important;
        line-height: 1.6 !important;
        margin-bottom: 2rem !important;
        max-width: 600px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    .mobile-banner-buttons {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
        align-items: center !important;
        max-width: 300px !important;
        margin: 0 auto !important;
    }
    
    .mobile-banner-btn {
        display: inline-block !important;
        padding: 1rem 2rem !important;
        border-radius: 50px !important;
        font-size: 1rem !important;
        font-weight: 600 !important;
        text-decoration: none !important;
        transition: all 0.3s ease !important;
        width: 100% !important;
        text-align: center !important;
    }
    
    .mobile-banner-btn.primary {
        background: #fff !important;
        color: #FF7A00 !important;
        border: 2px solid #fff !important;
    }
    
    .mobile-banner-btn.primary:hover {
        background: transparent !important;
        color: #fff !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 8px 20px rgba(255,255,255,0.3) !important;
    }
    
    .mobile-banner-btn.secondary {
        background: transparent !important;
        color: #fff !important;
        border: 2px solid #fff !important;
    }
    
    .mobile-banner-btn.secondary:hover {
        background: #fff !important;
        color: #FF7A00 !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 8px 20px rgba(255,255,255,0.3) !important;
    }
    
    /* Mobile Section Headers */
    .mobile-section-header {
        text-align: center !important;
        margin-bottom: 0rem !important;
        padding: 0 1rem !important;
    }
    
    .mobile-section-title {
        font-size: 1.8rem !important;
        color: #333 !important;
        font-weight: 700 !important;
        margin-bottom: 1rem !important;
        position: relative !important;
    }
    
    /* .mobile-section-title::after {
        content: '' !important;
        position: absolute !important;
        bottom: -8px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 60px !important;
        height: 3px !important;
        background: linear-gradient(90deg, #FF7A00, #E56717) !important;
        border-radius: 2px !important;
    } */
    
    .mobile-section-description {
        font-size: 1.1rem !important;
        color: #666 !important;
        line-height: 1.6 !important;
        max-width: 600px !important;
        margin: 0 auto !important;
    }
    
    /* Mobile Service Scope Section */
    .mobile-elderly-service-scope {
        padding: 3rem 0 !important;
        background: #f8f9fa !important;
    }
    
    .mobile-elderly-service-scope .service-categories {
        display: flex !important;
        flex-direction: column !important;
        gap: 2rem !important;
        padding: 0 1rem !important;
    }
    
    .mobile-elderly-service-scope .service-category {
        background: #fff !important;
        border-radius: 20px !important;
        padding: 1rem 0.5rem !important;
        box-shadow: 0 8px 32px rgba(0,0,0,0.1) !important;
        border: 1px solid rgba(255, 122, 0, 0.1) !important;
        transition: all 0.3s ease !important;
        position: relative !important;
        overflow: hidden !important;
    }
    
    .mobile-elderly-service-scope .service-category:hover {
        transform: translateY(-5px) !important;
        box-shadow: 0 15px 40px rgba(0,0,0,0.15) !important;
    }
    
    .mobile-elderly-service-scope .service-header {
        display: flex !important;
        align-items: center !important;
        margin-bottom: 1.5rem !important;
    }
    
    .mobile-elderly-service-scope .service-header h3 {
        font-size: 20px !important;
        color: #333 !important;
        font-weight: 700 !important;
        margin: 0 !important;
        margin-left: 0rem !important;
    }
    
    .mobile-elderly-service-scope ul {
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .mobile-elderly-service-scope li {
        display: flex !important;
        align-items: center !important;
        margin-bottom: 1rem !important;
        padding: 0.8rem !important;
        background: #f8f9fa !important;
        border-radius: 10px !important;
        transition: all 0.3s ease !important;
    }
    
    .mobile-elderly-service-scope li:last-child {
        margin-bottom: 0 !important;
    }
    
    .mobile-elderly-service-scope li span {
        font-size: 1rem !important;
        color: #333 !important;
        font-weight: 500 !important;
        margin-left: 1rem !important;
    }
    
    /* Mobile Service Process Section */
    .mobile-elderly-service-process {
        padding: 3rem 0 !important;
        background: #fff !important;
    }
    
    .mobile-elderly-process-steps {
        display: flex !important;
        flex-direction: column !important;
        gap: 2rem !important;
        padding: 0 1rem !important;
    }
    
    .mobile-elderly-process-steps .process-step-card {
        background: #fff !important;
        border-radius: 20px !important;
        padding: 2rem 1.5rem !important;
        box-shadow: 0 8px 32px rgba(0,0,0,0.1) !important;
        border: 1px solid rgba(255, 122, 0, 0.1) !important;
        transition: all 0.3s ease !important;
        position: relative !important;
      /* //  overflow: hidden !important; */
    }
    
    .mobile-elderly-process-steps .process-step-card:hover {
        transform: translateY(-5px) !important;
        box-shadow: 0 15px 40px rgba(0,0,0,0.15) !important;
    }
    
    .mobile-elderly-process-steps .card-header {
        display: flex !important;
        align-items: center !important;
        margin-bottom: 1rem !important;
        margin-top: 0.5rem !important;
    }
    
    .mobile-elderly-process-steps .step-title-section h3 {
        font-size: 1.3rem !important;
        color: #333 !important;
        margin: 0 !important;
        font-weight: 600 !important;
        line-height: 1.2 !important;
        margin-left: 0.75rem !important;
    }
    
    .mobile-elderly-process-steps p {
        font-size: 1rem !important;
        color: #666 !important;
        line-height: 1.5 !important;
        margin: 0 !important;
    }
    
    /* Mobile Booking Process Section */
    .mobile-elderly-booking-process {
        padding: 3rem 0 !important;
        background: #f8f9fa !important;
    }
    
    .mobile-elderly-booking-process .booking-steps {
        display: flex !important;
        flex-direction: column !important;
        gap: 2rem !important;
        padding: 0 1rem !important;
    }
    
    .mobile-elderly-booking-process .booking-step {
        background: #fff !important;
        border-radius: 20px !important;
        padding: 2rem 1.5rem !important;
        box-shadow: 0 8px 32px rgba(0,0,0,0.1) !important;
        border: 1px solid rgba(255, 122, 0, 0.1) !important;
        transition: all 0.3s ease !important;
        position: relative !important;
        overflow: hidden !important;
    }
    
    .mobile-elderly-booking-process .booking-step:hover {
        transform: translateY(-5px) !important;
        box-shadow: 0 15px 40px rgba(0,0,0,0.15) !important;
    }
    
    .mobile-elderly-booking-process .step-header {
        display: flex !important;
        align-items: center !important;
        margin-bottom: 1rem !important;
    }
    
    .mobile-elderly-booking-process .step-header h3 {
        font-size: 1.3rem !important;
        color: #333 !important;
        margin: 0 !important;
        font-weight: 600 !important;
        margin-left: 1rem !important;
    }
    
    .mobile-elderly-booking-process .step-content {
        font-size: 1rem !important;
        color: #666 !important;
        line-height: 1.6 !important;
    }
    
    /* Mobile Target Audience Section */
    .mobile-elderly-target-audience {
        padding: 3rem 0 !important;
        background: #fff !important;
    }
    
    .mobile-elderly-target-audience .target-groups {
        display: flex !important;
        flex-direction: column !important;
        gap: 2rem !important;
        padding: 0 1rem !important;
    }
    
    .mobile-elderly-target-audience .target-group {
        background: #fff !important;
        border-radius: 20px !important;
        padding: 2rem 1.5rem !important;
        box-shadow: 0 8px 32px rgba(0,0,0,0.1) !important;
        border: 1px solid rgba(255, 122, 0, 0.1) !important;
        transition: all 0.3s ease !important;
        position: relative !important;
        overflow: hidden !important;
    }
    
    .mobile-elderly-target-audience .target-group:hover {
        transform: translateY(-5px) !important;
        box-shadow: 0 15px 40px rgba(0,0,0,0.15) !important;
    }
    
    .mobile-elderly-target-audience .group-header {
        display: flex !important;
        align-items: center !important;
        margin-bottom: 1.5rem !important;
    }
    
    .mobile-elderly-target-audience .group-header h3 {
        font-size: 1.4rem !important;
        color: #333 !important;
        font-weight: 700 !important;
        margin: 0 !important;
        margin-left: 1rem !important;
    }
    
    .mobile-elderly-target-audience .group-description {
        font-size: 1rem !important;
        color: #666 !important;
        line-height: 1.6 !important;
        margin-bottom: 1.5rem !important;
    }
    
    .mobile-elderly-target-audience .group-features {
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .mobile-elderly-target-audience .group-features li {
        display: flex !important;
        align-items: center !important;
        margin-bottom: 0.8rem !important;
        padding: 0.6rem !important;
        background: #f8f9fa !important;
        border-radius: 8px !important;
        transition: all 0.3s ease !important;
    }
    
    .mobile-elderly-target-audience .group-features li:last-child {
        margin-bottom: 0 !important;
    }
    
    .mobile-elderly-target-audience .group-features li span {
        font-size: 0.95rem !important;
        color: #333 !important;
        font-weight: 500 !important;
        margin-left: 0.8rem !important;
    }
    
    /* Mobile Family First Care Section */
    .mobile-elderly-family-care {
        padding: 3rem 0 !important;
        background: #f8f9fa !important;
    }
    
    .mobile-elderly-family-care .family-care-content {
        display: flex !important;
        flex-direction: column !important;
        gap: 2rem !important;
        padding: 0 1rem !important;
    }
    
    .mobile-elderly-family-care .care-card {
        background: #fff !important;
        border-radius: 20px !important;
        padding: 2rem 1.5rem !important;
        box-shadow: 0 8px 32px rgba(0,0,0,0.1) !important;
        border: 1px solid rgba(255, 122, 0, 0.1) !important;
        transition: all 0.3s ease !important;
        position: relative !important;
        overflow: hidden !important;
    }
    
    .mobile-elderly-family-care .care-card:hover {
        transform: translateY(-5px) !important;
        box-shadow: 0 15px 40px rgba(0,0,0,0.15) !important;
    }
    
    .mobile-elderly-family-care .care-header {
        display: flex !important;
        align-items: center !important;
        margin-bottom: 1.5rem !important;
    }
    
    .mobile-elderly-family-care .care-header h3 {
        font-size: 1.4rem !important;
        color: #333 !important;
        font-weight: 700 !important;
        margin: 0 !important;
        margin-left: 1rem !important;
    }
    
    .mobile-elderly-family-care .care-description {
        font-size: 1rem !important;
        color: #666 !important;
        line-height: 1.6 !important;
        margin-bottom: 1.5rem !important;
    }
    
    .mobile-elderly-family-care .care-features {
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .mobile-elderly-family-care .care-features li {
        display: flex !important;
        align-items: center !important;
        margin-bottom: 0.8rem !important;
        padding: 0.6rem !important;
        background: #f8f9fa !important;
        border-radius: 8px !important;
        transition: all 0.3s ease !important;
    }
    
    .mobile-elderly-family-care .care-features li:last-child {
        margin-bottom: 0 !important;
    }
    
    .mobile-elderly-family-care .care-features li span {
        font-size: 0.95rem !important;
        color: #333 !important;
        font-weight: 500 !important;
        margin-left: 0.8rem !important;
    }
    
    /* Mobile FAQ Section */
    .mobile-elderly-faq {
        padding: 3rem 0 !important;
        background: #fff !important;
    }
    
    .mobile-elderly-faq .faq-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
        padding: 0 1rem !important;
    }
    
    .mobile-elderly-faq .faq-item {
        background: #fff !important;
        border-radius: 15px !important;
        box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important;
        border: 1px solid #e9ecef !important;
        overflow: hidden !important;
        transition: all 0.3s ease !important;
    }
    
    .mobile-elderly-faq .faq-item:hover {
        box-shadow: 0 8px 30px rgba(0,0,0,0.12) !important;
        transform: translateY(-2px) !important;
    }
    
    .mobile-elderly-faq .faq-question {
        padding: 1.5rem !important;
        cursor: pointer !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        background: #f8f9fa !important;
        transition: all 0.3s ease !important;
    }
    
    .mobile-elderly-faq .faq-question:hover {
        background: #e9ecef !important;
    }
    
    .mobile-elderly-faq .faq-question h3 {
        font-size: 1.1rem !important;
        color: #333 !important;
        font-weight: 600 !important;
        margin: 0 !important;
        flex: 1 !important;
    }
    
    .mobile-elderly-faq .faq-icon {
        width: 24px !important;
        height: 24px !important;
        background: #FF7A00 !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #fff !important;
        font-size: 0.8rem !important;
        transition: all 0.3s ease !important;
        flex-shrink: 0 !important;
        margin-left: 1rem !important;
    }
    
    .mobile-elderly-faq .faq-answer {
        padding: 0 1.5rem 1.5rem !important;
        display: none !important;
    }
    
    .mobile-elderly-faq .faq-answer.active {
        display: block !important;
    }
    
    .mobile-elderly-faq .faq-answer-text {
        font-size: 1rem !important;
        color: #666 !important;
        line-height: 1.6 !important;
        margin: 0 !important;
    }
    
    /* Mobile Final CTA Section */
    .mobile-elderly-final-cta {
        padding: 3rem 0 !important;
        background: linear-gradient(135deg, #FF7A00, #E56717) !important;
        text-align: center !important;
    }
    
    .mobile-elderly-final-cta .cta-content {
        padding: 0 1rem !important;
    }
    
    .mobile-elderly-final-cta h3 {
        font-size: 2rem !important;
        color: #fff !important;
        font-weight: 700 !important;
        margin-bottom: 1rem !important;
        text-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
    }
    
    .mobile-elderly-final-cta p {
        font-size: 1.1rem !important;
        color: rgba(255,255,255,0.9) !important;
        margin-bottom: 2rem !important;
        line-height: 1.6 !important;
    }
    
    .mobile-elderly-final-cta .cta-buttons {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
        align-items: center !important;
        max-width: 300px !important;
        margin: 0 auto !important;
    }
    
    .mobile-elderly-final-cta .cta-btn {
        display: inline-block !important;
        padding: 1rem 2rem !important;
        border-radius: 50px !important;
        font-size: 1rem !important;
        font-weight: 600 !important;
        text-decoration: none !important;
        transition: all 0.3s ease !important;
        width: 100% !important;
        text-align: center !important;
    }
    
    .mobile-elderly-final-cta .cta-btn.primary {
        background: #fff !important;
        color: #FF7A00 !important;
        border: 2px solid #fff !important;
    }
    
    .mobile-elderly-final-cta .cta-btn.primary:hover {
        background: transparent !important;
        color: #fff !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 8px 20px rgba(255,255,255,0.3) !important;
    }
    
    .mobile-elderly-final-cta .cta-btn.secondary {
        background: transparent !important;
        color: #fff !important;
        border: 2px solid #fff !important;
    }
    
    .mobile-elderly-final-cta .cta-btn.secondary:hover {
        background: #fff !important;
        color: #FF7A00 !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 8px 20px rgba(255,255,255,0.3) !important;
    }
    
    /* ===== INSTITUTIONAL CARE PAGE MOBILE ENHANCEMENTS ===== */
    
    /* Mobile Banner Content */
    .mobile-institutional-banner {
        height: 200px !important;
        overflow: hidden !important;
        position: relative !important;
    }
    
    .mobile-institutional-banner img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
    
    .mobile-institutional-banner-title {
        display: none !important;
    }
    
    /* Mobile Main Container */
    .mobile-institutional-main {
        padding: 0 1rem !important;
        background: #fff !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
    
    /* Mobile Section Header */
    .mobile-section-header {
        text-align: center !important;
        padding: 2rem 0 !important;
        margin-bottom: 0rem !important;
    }
    
    .mobile-section-title {
        font-size: 1.8rem !important;
        color: #FF7A00 !important;
        font-weight: 700 !important;
        margin-bottom: 1rem !important;
        text-shadow: 0 2px 4px rgba(255,122,0,0.1) !important;
        text-align: left !important;
    }
    
    .mobile-section-description {
        font-size: 1.1rem !important;
        color: #666 !important;
        line-height: 1.6 !important;
        max-width: 600px !important;
        margin: 0 auto !important;
    }
    
    /* Mobile Institutional Sections */
    .mobile-institutional-section {
        flex-direction: column !important;
        gap: 2rem !important;
        margin: 3rem 0 !important;
        padding: 0 !important;
    }
    
    .mobile-institutional-content {
        order: 1 !important;
        width: 100% !important;
        min-width: auto !important;
    }
    
    .mobile-institutional-image {
        order: 2 !important;
        width: 100% !important;
        justify-content: center !important;
    }
    
    /* Mobile Institutional Titles */
    .mobile-institutional-title {
        font-size: 1.8rem !important;
        color: #FF7A00 !important;
        font-weight: 700 !important;
        margin-bottom: 1rem !important;
        text-align: center !important;
        line-height: 1.3 !important;
    }
    
    .mobile-institutional-description {
        font-size: 1rem !important;
        color: #333 !important;
        line-height: 1.6 !important;
        margin-bottom: 1.5rem !important;
        text-align: center !important;
    }
    
    /* Mobile Institutional Buttons */
    .mobile-institutional-buttons {
        flex-direction: column !important;
        gap: 1rem !important;
        align-items: center !important;
    }
    
    .mobile-institutional-btn {
        width: 100% !important;
        max-width: 300px !important;
        padding: 1.5rem 1rem !important;
        font-size: 1rem !important;
        text-align: center !important;
        border-radius: 20px !important;
        box-shadow: 0 4px 16px rgba(255,122,0,0.15) !important;
        transition: all 0.3s ease !important;
    }
    
    .mobile-institutional-btn:hover {
        transform: translateY(-3px) !important;
        box-shadow: 0 8px 24px rgba(255,122,0,0.25) !important;
    }
    
    /* Mobile Hex Images */
    .mobile-institutional-hex-layer {
        width: 280px !important;
        height: 280px !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }
    
    .mobile-institutional-hex-bg,
    .mobile-institutional-hex {
        width: 280px !important;
        height: 280px !important;
        max-width: 100% !important;
    }
    
    .mobile-institutional-hex img {
        border-radius: 12px !important;
        box-shadow: 0 4px 16px rgba(0,0,0,0.1) !important;
    }
    
    /* Mobile Service Process Section */
    .mobile-service-process-section {
        padding: 3rem 0 !important;
        background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%) !important;
    }
    
    .mobile-process-title {
        font-size: 2rem !important;
        color: #333 !important;
        font-weight: 700 !important;
        margin-bottom: 1rem !important;
        text-align: center !important;
    }
    
    .mobile-process-description {
        font-size: 1.1rem !important;
        color: #666 !important;
        text-align: center !important;
        margin-bottom: 2rem !important;
        padding: 0 1rem !important;
    }
    
    .mobile-process-step-card {
        width: 100% !important;
        min-width: auto !important;
        padding: 1.5rem !important;
        border-radius: 16px !important;
        box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important;
        border: 1px solid rgba(255,122,0,0.1) !important;
        background: #fff !important;
    }
    
    .mobile-step-number {
        width: 32px !important;
        height: 32px !important;
        font-size: 1rem !important;
        top: -8px !important;
        left: 12px !important;
    }
    
    .mobile-card-header {
        margin-bottom: 1rem !important;
        margin-top: 0.5rem !important;
    }
    
    .mobile-step-icon {
        width: 50px !important;
        height: 50px !important;
        border-radius: 10px !important;
    }
    
    .mobile-step-icon i {
        font-size: 1.4rem !important;
    }
    
    .mobile-step-title {
        font-size: 1.1rem !important;
        color: #333 !important;
        font-weight: 600 !important;
        margin: 0 !important;
    }
    
    .mobile-step-description {
        font-size: 0.95rem !important;
        color: #666 !important;
        line-height: 1.5 !important;
        margin: 0 !important;
    }
    
    /* Mobile Booking Process Section */
    .booking-process {
        padding: 3rem 0 !important;
        background: #fff !important;
    }
    
    .booking-process .section-header h2 {
        font-size: 2rem !important;
        color: #333 !important;
        font-weight: 700 !important;
        margin-bottom: 1rem !important;
        text-align: center !important;
    }
    
    .booking-process {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.5rem !important;
        padding: 0 1rem !important;
        max-width: 100% !important;
    }
    
    .booking-process .process-step {
        width: 100% !important;
        min-width: auto !important;
        padding: 0rem !important;
        border-radius: 16px !important;
        box-shadow: none !important;
        border: none !important;
        background: #fff !important;
    }
    
    .booking-process .step-header {
        gap: 1rem !important;
        margin-bottom: 1rem !important;
    }
    
    .booking-process .step-icon {
        width: 60px !important;
        height: 60px !important;
        border-radius: 12px !important;
    }
    
    .booking-process .step-icon i {
        font-size: 1.6rem !important;
    }
    
    .booking-process .step-title-section h3 {
        font-size: 1.2rem !important;
        color: #333 !important;
        font-weight: 600 !important;
        margin: 0 !important;
        text-wrap: nowrap !important;
    }
    
    .booking-process .process-step p {
        font-size: 1rem !important;
        color: #666 !important;
        line-height: 1.6 !important;
        margin: 0 !important;
    }
    
    .booking-process button {
        background: #FF7A00 !important;
        color: white !important;
        padding: 1rem 2rem !important;
        border: none !important;
        border-radius: 50px !important;
        font-size: 1rem !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
        margin-top: 1rem !important;
    }
    
    .booking-process button:hover {
        background: #E56717 !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 8px 20px rgba(255,122,0,0.3) !important;
    }
    
    /* Mobile Contact Section */
    .mobile-institutional-contact-section {
        padding: 3rem 0 !important;
        background: linear-gradient(135deg, #FF7A00, #E56717) !important;
        text-align: center !important;
    }
    
    .mobile-contact-title {
        font-size: 2rem !important;
        color: #fff !important;
        font-weight: 700 !important;
        margin-bottom: 1rem !important;
        text-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
    }
    
    .mobile-contact-description {
        font-size: 1.1rem !important;
        color: rgba(255,255,255,0.9) !important;
        margin-bottom: 2rem !important;
        line-height: 1.6 !important;
        padding: 0 1rem !important;
    }
    
    .mobile-contact-buttons {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
        align-items: center !important;
        max-width: 300px !important;
        margin: 0 auto !important;
    }
    
    .mobile-contact-btn {
        display: inline-block !important;
        padding: 1rem 2rem !important;
        border-radius: 50px !important;
        font-size: 1rem !important;
        font-weight: 600 !important;
        text-decoration: none !important;
        transition: all 0.3s ease !important;
        width: 100% !important;
        text-align: center !important;
    }
    
    .mobile-contact-btn.primary-btn {
        background: #fff !important;
        color: #FF7A00 !important;
        border: 2px solid #fff !important;
    }
    
    .mobile-contact-btn.primary-btn:hover {
        background: transparent !important;
        color: #fff !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 8px 20px rgba(255,255,255,0.3) !important;
    }
    
    .mobile-contact-btn.secondary-btn {
        background: transparent !important;
        color: #fff !important;
        border: 2px solid #fff !important;
    }
    
    .mobile-contact-btn.secondary-btn:hover {
        background: #fff !important;
        color: #FF7A00 !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 8px 20px rgba(255,255,255,0.3) !important;
    }
    
    /* Mobile WhatsApp Text Fix */
    .mobile-whatsapp-text {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
    }
    
    /* ===== REHABILITATION CARE PAGE MOBILE ENHANCEMENTS ===== */
    
    /* Mobile Hero Section */
    .hero-section {
        padding: 2rem 0 !important;
        background: linear-gradient(135deg, #fff9f5 0%, #ffffff 50%, #fff9f5 100%) !important;
    }
    
    .hero-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 2rem !important;
        align-items: center !important;
        margin-bottom: 2rem !important;
    }
    
    /* Mobile Hero Content */

    
    .mobile-hero-title {
        font-size: 2rem !important;
        color: #333 !important;
        margin-bottom: 1rem !important;
        font-weight: 700 !important;
        text-align: center !important;
        line-height: 1.3 !important;
    }
    
    .mobile-hero-description {
        font-size: 1rem !important;
        color: #666 !important;
        line-height: 1.6 !important;
        margin-bottom: 1.5rem !important;
        text-align: center !important;
    }
    
    /* Mobile Rehabilitation Types */
    .mobile-rehabilitation-types-title {
        font-size: 1.5rem !important;
        color: #333 !important;
        margin-bottom: 1rem !important;
        font-weight: 600 !important;
        text-align: center !important;
    }
    
    .rehabilitation-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
    }
    
    .mobile-rehabilitation-type-card {
        background: white !important;
        padding: 1.5rem !important;
        border-radius: 12px !important;
        box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important;
        border: 1px solid rgba(255,122,0,0.1) !important;
        transition: all 0.3s ease !important;
    }
    
    .mobile-rehabilitation-type-card:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
    }
    
    .mobile-rehabilitation-type-card h4 {
        font-size: 1.1rem !important;
        color: #FF7A00 !important;
        margin-bottom: 0.5rem !important;
        font-weight: 600 !important;
    }
    
    .mobile-rehabilitation-type-card p {
        font-size: 0.95rem !important;
        color: #666 !important;
        line-height: 1.5 !important;
        margin: 0 !important;
    }
    
    /* Mobile Rehabilitation Stages */
    .mobile-rehabilitation-stages-title {
        font-size: 1.5rem !important;
        color: #333 !important;
        margin: 2rem 0 1rem !important;
        font-weight: 600 !important;
        text-align: center !important;
    }
    
    .rehabilitation-stages {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
    }
    
    .mobile-rehabilitation-stage-card {
        background: white !important;
        padding: 1.5rem !important;
        border-radius: 12px !important;
        box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important;
        border: 1px solid rgba(255,122,0,0.1) !important;
        transition: all 0.3s ease !important;
    }
    
    .mobile-rehabilitation-stage-card:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
    }
    
    .mobile-rehabilitation-stage-card h4 {
        font-size: 1.1rem !important;
        color: #FF7A00 !important;
        margin-bottom: 0.5rem !important;
        font-weight: 600 !important;
    }
    
    .mobile-rehabilitation-stage-card p {
        font-size: 0.95rem !important;
        color: #666 !important;
        line-height: 1.5 !important;
        margin: 0 !important;
    }
    


    /* Mobile Statistics Section */
    .statistics-section {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
        margin-top: 2rem !important;
        padding: 0 1rem !important;
    }
    
    .mobile-stat-card {
        background: white !important;
        padding: 1.5rem !important;
        border-radius: 12px !important;
        box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important;
        border: 1px solid rgba(255,122,0,0.1) !important;
        text-align: center !important;
        transition: all 0.3s ease !important;
    }
    
    .mobile-stat-card:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
    }
    
    .stat-number {
        font-size: 2rem !important;
        font-weight: bold !important;
        color: #FF7A00 !important;
        margin-bottom: 0.5rem !important;
    }
    
    .stat-description {
        font-size: 0.9rem !important;
        color: #666 !important;
        line-height: 1.4 !important;
    }
    
    /* Mobile Service Features Section */
    .service-features-section {
        padding: 3rem 0 !important;
        background: #f8f9fa !important;
    }
    
    .mobile-service-features-title {
        font-size: 2rem !important;
        color: #333 !important;
        margin-bottom: 1rem !important;
        font-weight: 700 !important;
        text-align: center !important;
    }
    
    .features-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.5rem !important;
        padding: 0 1rem !important;
        max-width: 100% !important;
    }
    
    .mobile-feature-card {
        background: white !important;
        padding: 1.5rem !important;
        border-radius: 12px !important;
        box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important;
        border: 1px solid rgba(255,122,0,0.1) !important;
        transition: all 0.3s ease !important;
    }
    
    .mobile-feature-card:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
    }
    
    .feature-icon {
        width: 50px !important;
        height: 50px !important;
        background: #FF7A00 !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-bottom: 1rem !important;
        margin: 0 auto 1rem !important;
    }
    
    .feature-icon i {
        color: white !important;
        font-size: 1.3rem !important;
    }
    
    .mobile-feature-card h3 {
        font-size: 1.1rem !important;
        color: #333 !important;
        margin-bottom: 0.5rem !important;
        font-weight: 600 !important;
        text-align: center !important;
    }
    
    .mobile-feature-card p {
        font-size: 0.95rem !important;
        color: #666 !important;
        line-height: 1.5 !important;
        margin: 0 !important;
        text-align: center !important;
    }
    
    /* Mobile Target Audience Section */
    .target-audience-section {
        padding: 3rem 0 !important;
        background: white !important;
    }
    
    .mobile-target-audience-title {
        font-size: 2rem !important;
        color: #333 !important;
        margin-bottom: 1rem !important;
        font-weight: 700 !important;
        text-align: center !important;
    }
    
    .audience-grid {
        display: grid !important;
        flex-direction: column !important;
        gap: 1.5rem !important;
        padding: 0rem 1rem 2rem 1rem!important;
        max-width: 100% !important;
    }
    
    .mobile-audience-card {
        background: white !important;
        padding: 1.5rem !important;
        border-radius: 12px !important;
        box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important;
        border-left: 4px solid #FF7A00 !important;
        transition: all 0.3s ease !important;
    }
    
    .mobile-audience-card:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
    }
    
    .audience-icon {
        width: 40px !important;
        height: 40px !important;
        background: #FF7A00 !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-bottom: 1rem !important;
    }
    
    .audience-icon i {
        color: white !important;
        font-size: 1rem !important;
    }
    
    .mobile-audience-card h3 {
        font-size: 1.1rem !important;
        color: #333 !important;
        margin-bottom: 0.5rem !important;
        font-weight: 600 !important;
    }
    
    /* Mobile Service Process Section */
    .service-process-section {
        padding: 3rem 0 !important;
        background: white !important;
    }
    
    .mobile-service-process-title {
        font-size: 2rem !important;
        color: #333 !important;
        margin-bottom: 1rem !important;
        font-weight: 700 !important;
        text-align: center !important;
    }
    
    .mobile-service-process-description {
        font-size: 1.1rem !important;
        color: #666 !important;
        text-align: center !important;
        margin-bottom: 2rem !important;
        padding: 0 1rem !important;
        line-height: 1.6 !important;
    }
    
    
    .mobile-process-step-card {
        width: 100% !important;
        min-width: auto !important;
        padding: 1.5rem !important;
        border-radius: 12px !important;
        box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important;
        border: 1px solid rgba(255,122,0,0.1) !important;
        background: white !important;
        transition: all 0.3s ease !important;
    }
    
    .mobile-process-step-card:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
    }
    
    .step-number {
        width: 32px !important;
        height: 32px !important;
        font-size: 1rem !important;
        top: -8px !important;
        left: 12px !important;
    }
    
    .card-header {
        margin-bottom: 1rem !important;
        margin-top: 0.5rem !important;
    }
    
    .step-icon {
        width: 50px !important;
        height: 50px !important;
        border-radius: 10px !important;
    }
    
    .step-icon i {
        font-size: 3.4rem !important;
    }
    
    .step-title-section h3 {
        font-size: 1.1rem !important;
        color: #333 !important;
        font-weight: 600 !important;
        margin: 0 !important;
    }
    
    .mobile-process-step-card p {
        font-size: 0.95rem !important;
        color: #666 !important;
        line-height: 1.5 !important;
        margin: 0 !important;
    }

/* ===== INSTITUTIONAL CARE PAGE MOBILE ENHANCEMENTS ===== */
@media (max-width: 768px) {
    /* Hero Section Mobile Improvements */
    .hero-section {
        padding: 2rem 0 !important;
    }

    .hero-layout {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
        text-align: center !important;
    }

    .mobile-hero-title {
        font-size: 2rem !important;
        margin-bottom: 1rem !important;
    }

    .mobile-hero-description {
        font-size: 1rem !important;
        line-height: 1.5 !important;
        margin-bottom: 1.5rem !important;
    }


    /* Institutional Main Container Mobile */
    .institutional-main {
        padding: 0 1rem !important;
        border-radius: 16px !important;
        margin: 0 1rem !important;
    }

    /* Institutional Section Mobile */
    .institutional-section {
        flex-direction: column !important;
        gap: 2rem !important;
        margin: 3rem 0 !important;
        text-align: center !important;
    }

    .institutional-section:nth-child(even) {
        flex-direction: column !important;
    }

    .institutional-section h2 {
        font-size: 1.8rem !important;
        margin-bottom: 1rem !important;
    }

    .institutional-section p {
        font-size: 1rem !important;
        line-height: 1.6 !important;
        margin-bottom: 1.5rem !important;
    }

    .institutional-section img {
        width: 100% !important;
        height: 200px !important;
        object-fit: cover !important;
        border-radius: 12px !important;
    }

    /* Service Features Section Mobile */
    .service-features-section {
        padding: 2rem 0 !important;
    }

    .service-features-section h2 {
        font-size: 1.8rem !important;
        margin-bottom: 1rem !important;
    }

    .features-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    .feature-card {
        padding: 1.5rem !important;
    }

    .feature-card .feature-icon {
        width: 50px !important;
        height: 50px !important;
        margin-bottom: 1rem !important;
    }

    .feature-card .feature-icon i {
        font-size: 1.3rem !important;
    }

    .feature-card h3 {
        font-size: 1.2rem !important;
        margin-bottom: 0.8rem !important;
    }

    .feature-card p {
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
    }

    /* Service Process Section Mobile */
    .service-process-section {
        padding: 2rem 0 !important;
    }

    .service-process-section h2 {
        font-size: 1.8rem !important;
        margin-bottom: 1rem !important;
    }

    .process-step-card {
        padding: 1.5rem !important;
    }

    .process-step-card .step-number {
        width: 30px !important;
        height: 30px !important;
        font-size: 1rem !important;
        top: -10px !important;
        left: 12px !important;
    }

    .process-step-card .step-icon {
        width: 50px !important;
        height: 50px !important;
        margin-bottom: 0.8rem !important;
    }

    .process-step-card .step-icon i {
        font-size: 1.3rem !important;
    }

    .process-step-card h3 {
        font-size: 1.1rem !important;
        margin-bottom: 0.5rem !important;
    }

    .process-step-card p {
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
    }

    /* Caregiver Types Section Mobile */
    .caregiver-types-section {
        padding: 2rem 0 !important;
    }

    .caregiver-types-section h2 {
        font-size: 1.8rem !important;
        margin-bottom: 1rem !important;
    }

    .table-container {
        overflow-x: auto !important;
        border-radius: 12px !important;
    }

    .table-container table {
        min-width: 600px !important;
    }

    .table-container th,
    .table-container td {
        padding: 1rem !important;
        font-size: 0.9rem !important;
    }

    /* Statistics Section Mobile */
    .statistics-section {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
        margin-top: 2rem !important;
    }

    .stat-card {
        padding: 1.5rem !important;
    }

    .stat-number {
        font-size: 1.8rem !important;
        margin-bottom: 0.5rem !important;
    }

    .stat-description {
        font-size: 0.8rem !important;
        line-height: 1.3 !important;
    }

    /* Target Audience Section Mobile */
    .target-audience-section {
        padding: 2rem 0 !important;
    }

    .target-audience-section h2 {
        font-size: 1.8rem !important;
        margin-bottom: 1rem !important;
    }

    .audience-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    .audience-card {
        padding: 1.5rem !important;
    }

    .audience-card .audience-icon {
        width: 40px !important;
        height: 40px !important;
        margin-bottom: 0.8rem !important;
    }

    .audience-card .audience-icon i {
        font-size: 1.1rem !important;
    }

    .audience-card h3 {
        font-size: 1.1rem !important;
        margin-bottom: 0.5rem !important;
    }


    .mobile-banner-title {
        font-size: 2rem !important;
        margin-bottom: 0.5rem !important;
    }

    .mobile-banner-subtitle {
        font-size: 1.1rem !important;
        margin-bottom: 1rem !important;
    }

    .mobile-banner-description {
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
        margin-bottom: 1.5rem !important;
    }

    .mobile-banner-buttons {
        flex-direction: column !important;
        gap: 1rem !important;
    }

    .mobile-banner-btn {
        width: 100% !important;
        padding: 1rem !important;
        font-size: 1rem !important;
    }
}

/* Additional Mobile Responsive Adjustments for Institutional Care */
@media (max-width: 480px) {
    .mobile-hero-title {
        font-size: 1.6rem !important;
    }

    .institutional-section h2 {
        font-size: 1.5rem !important;
    }

    .institutional-section p {
        font-size: 0.9rem !important;
    }

    .institutional-section img {
        height: 180px !important;
    }

    .feature-card,
    .process-step-card,
    .audience-card,
    .stat-card {
        padding: 1rem !important;
    }

    .statistics-section {
        grid-template-columns: 1fr !important;
    }

    .stat-number {
        font-size: 1.5rem !important;
    }

    .stat-description {
        font-size: 0.75rem !important;
    }

    .table-container table {
        min-width: 500px !important;
    }

    .table-container th,
    .table-container td {
        padding: 0.8rem !important;
        font-size: 0.8rem !important;
    }

    .mobile-banner-title {
        font-size: 1.6rem !important;
    }

    .mobile-banner-subtitle {
        font-size: 1rem !important;
    }

    .mobile-banner-description {
        font-size: 0.9rem !important;
    }

    .mobile-banner-btn {
        padding: 0.8rem !important;
        font-size: 0.9rem !important;
    }

    .feature-card .feature-icon,
    .process-step-card .step-icon,
    .audience-card .audience-icon {
        width: 45px !important;
        height: 45px !important;
    }

    .feature-card .feature-icon i,
    .process-step-card .step-icon i,
    .audience-card .audience-icon i {
        font-size: 1.2rem !important;
    }
}

/* ===== SERVICE CARDS MOBILE ENHANCEMENTS ===== */
@media (max-width: 768px) {
    /* Service Cards Mobile Layout */
    .service-cards {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
        gap: 1.5rem !important;
        padding: 1.5rem !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }

    .service-card {
        min-width: auto !important;
        max-width: 100% !important;
        width: 100% !important;
        padding: 1.5rem 1rem 1.25rem 1rem !important;
        border-radius: 12px !important;
        box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important;
        background: #fff !important;
        transition: all 0.3s ease !important;
    }

    .service-card:hover {
        transform: translateY(-3px) !important;
        box-shadow: 0 8px 24px rgba(255,122,0,0.15) !important;
    }

    .service-card h3 {
        font-size: 1.2rem !important;
        margin-bottom: 1rem !important;
        color: var(--primary-color) !important;
        font-weight: 700 !important;
    }

    .service-card ul, .service-card p {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
        margin-bottom: 0 !important;
        color: #333 !important;
    }

    .service-card ul {
        padding-left: 1.25rem !important;
        text-align: left !important;
    }

    .service-card ul li {
        margin-bottom: 0.5rem !important;
        position: relative !important;
    }

    .service-card ul li:last-child {
        margin-bottom: 0 !important;
    }

    /* Service Icon Enhancements */
    .service-icon-hex {
        margin-bottom: 1rem !important;
    }

    .service-icon-hex svg {
        width: 80px !important;
        height: 80px !important;
    }

    .service-icon-svg {
        font-size: 1.8rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 80px !important;
        height: 80px !important;
    }

    /* Services Section Container */
    .services {
        padding: 2rem 0 !important;
        background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%) !important;
    }

    .services .container {
        max-width: 100% !important;
        padding: 0 1rem !important;
    }
}

@media (max-width: 480px) {
    /* Small Mobile Optimizations */
    .service-cards {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
        padding: 1rem !important;
    }

    .service-card {
        padding: 1.25rem 1rem 1rem 1rem !important;
        border-radius: 10px !important;
    }

    .service-card h3 {
        font-size: 1.1rem !important;
        margin-bottom: 0.75rem !important;
    }

    .service-card ul, .service-card p {
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
    }

    .service-card ul {
        padding-left: 1rem !important;
    }

    .service-card ul li {
        margin-bottom: 0.4rem !important;
    }

    /* Service Icon Adjustments */
    .service-icon-hex svg {
        width: 70px !important;
        height: 70px !important;
    }

    .service-icon-svg {
        font-size: 1.6rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 70px !important;
        height: 70px !important;
    }

    /* Container Adjustments */
    .services .container {
        padding: 0 0.75rem !important;
    }
}

@media (max-width: 360px) {
    /* Extra Small Mobile */
    .service-cards {
        padding: 0.rem !important;
        gap: 0rem !important;
    }

    .service-card {
        padding: 0.5rem 0.25rem 0.25rem 0.25rem !important;
    }

    .service-card h3 {
        font-size: 1rem !important;
    }

    .service-card ul, .service-card p {
        font-size: 0.85rem !important;
    }

    .service-icon-hex svg {
        width: 60px !important;
        height: 60px !important;
    }

    .service-icon-svg {
        font-size: 1.4rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 60px !important;
        height: 60px !important;
    }
}

/* ===== COMPREHENSIVE MOBILE CARD ENHANCEMENTS ===== */
@media (max-width: 768px) {
    /* All Card Containers Mobile Layout */
    .news-grid,
    .related-grid,
    .service-options-grid,
    .trust-grid,
    .stats-grid {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
        gap: 1.5rem !important;
        padding: 1.5rem !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }

    /* All Card Types Mobile Styling */
    .service-card,
    .mission-card,
    .pricing-card,
    .scope-card,
    .benefit-card,
    .service-content-card,
    .feature-card,
    .audience-card,
    .target-card,
    .content-card,
    .advantage-card,
    .care-content-card,
    .stage-card,
    .why-choose-card,
    .quality-card,
    .other-service-card,
    .staff-card,
    .target-audience-card,
    .capability-card,
    .complication-card,
    .support-service-card,
    .caregiver-card,
    .understanding-card,
    .care-service-card,
    .care-detail-card,
    .acute-care-card,
    .sub-acute-care-card,
    .long-term-care-card,
    .benefit-card,
    .news-card,
    .related-card,
    .service-option-card,
    .trust-card,
    .stat-card,
    .process-step-card {
        min-width: auto !important;
        max-width: 100% !important;
        width: 100% !important;
        padding: 1.5rem 1rem 1.25rem 1rem !important;
        border-radius: 12px !important;
        /* box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important; */
        box-shadow: none !important;
        /* background: #fff !important; */
background: transparent !important;
        transition: all 0.3s ease !important;
    }

    .service-card:hover,
    .mission-card:hover,
    .pricing-card:hover,
    .scope-card:hover,
    .benefit-card:hover,
    .service-content-card:hover,
    .feature-card:hover,
    .audience-card:hover,
    .target-card:hover,
    .content-card:hover,
    .advantage-card:hover,
    .care-content-card:hover,
    .stage-card:hover,
    .why-choose-card:hover,
    .quality-card:hover,
    .other-service-card:hover,
    .staff-card:hover,
    .target-audience-card:hover,
    .capability-card:hover,
    .complication-card:hover,
    .support-service-card:hover,
    .caregiver-card:hover,
    .understanding-card:hover,
    .care-service-card:hover,
    .care-detail-card:hover,
    .acute-care-card:hover,
    .sub-acute-care-card:hover,
    .long-term-care-card:hover,
    .benefit-card:hover,
    .news-card:hover,
    .related-card:hover,
    .service-option-card:hover,
    .trust-card:hover,
    .stat-card:hover,
    .process-step-card:hover {
        transform: translateY(-3px) !important;
        box-shadow: 0 8px 24px rgba(255,122,0,0.15) !important;
    }

    /* Card Headers Mobile */
    .service-card h3,
    .mission-card h3,
    .pricing-card h3,
    .scope-card h3,
    .benefit-card h3,
    .service-content-card h3,
    .feature-card h3,
    .audience-card h3,
    .target-card h3,
    .content-card h3,
    .advantage-card h3,
    .care-content-card h3,
    .stage-card h3,
    .why-choose-card h3,
    .quality-card h3,
    .other-service-card h3,
    .staff-card h3,
    .target-audience-card h3,
    .capability-card h3,
    .complication-card h3,
    .support-service-card h3,
    .caregiver-card h3,
    .understanding-card h3,
    .care-service-card h3,
    .care-detail-card h3,
    .acute-care-card h3,
    .sub-acute-care-card h3,
    .long-term-care-card h3,
    .benefit-card h3,
    .news-card h3,
    .related-card h3,
    .service-option-card h3,
    .trust-card h3,
    .stat-card h3,
    .process-step-card h3 {
        font-size: 1.2rem !important;
        margin-bottom: 1rem !important;
        color: var(--primary-color) !important;
        font-weight: 700 !important;
    }

    /* Card Content Mobile */
    .service-card ul,
    .mission-card ul,
    .pricing-card ul,
    .scope-card ul,
    .benefit-card ul,
    .service-content-card ul,
    .feature-card ul,
    .audience-card ul,
    .target-card ul,
    .content-card ul,
    .advantage-card ul,
    .care-content-card ul,
    .stage-card ul,
    .why-choose-card ul,
    .quality-card ul,
    .other-service-card ul,
    .staff-card ul,
    .target-audience-card ul,
    .capability-card ul,
    .complication-card ul,
    .support-service-card ul,
    .caregiver-card ul,
    .understanding-card ul,
    .care-service-card ul,
    .care-detail-card ul,
    .acute-care-card ul,
    .sub-acute-care-card ul,
    .long-term-care-card ul,
    .benefit-card ul,
    .news-card ul,
    .related-card ul,
    .service-option-card ul,
    .trust-card ul,
    .stat-card ul,
    .process-step-card ul,
    .service-card p,
    .mission-card p,
    .pricing-card p,
    .scope-card p,
    .benefit-card p,
    .service-content-card p,
    .feature-card p,
    .audience-card p,
    .target-card p,
    .content-card p,
    .advantage-card p,
    .care-content-card p,
    .stage-card p,
    .why-choose-card p,
    .quality-card p,
    .other-service-card p,
    .staff-card p,
    .target-audience-card p,
    .capability-card p,
    .complication-card p,
    .support-service-card p,
    .caregiver-card p,
    .understanding-card p,
    .care-service-card p,
    .care-detail-card p,
    .acute-care-card p,
    .sub-acute-care-card p,
    .long-term-care-card p,
    .benefit-card p,
    .news-card p,
    .related-card p,
    .service-option-card p,
    .trust-card p,
    .stat-card p,
    .process-step-card p {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
        margin-bottom: 0 !important;
        color: #333 !important;
    }

    .service-card ul,
    .mission-card ul,
    .pricing-card ul,
    .scope-card ul,
    .benefit-card ul,
    .service-content-card ul,
    .feature-card ul,
    .audience-card ul,
    .target-card ul,
    .content-card ul,
    .advantage-card ul,
    .care-content-card ul,
    .stage-card ul,
    .why-choose-card ul,
    .quality-card ul,
    .other-service-card ul,
    .staff-card ul,
    .target-audience-card ul,
    .capability-card ul,
    .complication-card ul,
    .support-service-card ul,
    .caregiver-card ul,
    .understanding-card ul,
    .care-service-card ul,
    .care-detail-card ul,
    .acute-care-card ul,
    .sub-acute-care-card ul,
    .long-term-care-card ul,
    .benefit-card ul,
    .news-card ul,
    .related-card ul,
    .service-option-card ul,
    .trust-card ul,
    .stat-card ul,
    .process-step-card ul {
        padding-left: 1.25rem !important;
        text-align: left !important;
    }

    .service-card ul li,
    .mission-card ul li,
    .pricing-card ul li,
    .scope-card ul li,
    .benefit-card ul li,
    .service-content-card ul li,
    .feature-card ul li,
    .audience-card ul li,
    .target-card ul li,
    .content-card ul li,
    .advantage-card ul li,
    .care-content-card ul li,
    .stage-card ul li,
    .why-choose-card ul li,
    .quality-card ul li,
    .other-service-card ul li,
    .staff-card ul li,
    .target-audience-card ul li,
    .capability-card ul li,
    .complication-card ul li,
    .support-service-card ul li,
    .caregiver-card ul li,
    .understanding-card ul li,
    .care-service-card ul li,
    .care-detail-card ul li,
    .acute-care-card ul li,
    .sub-acute-care-card ul li,
    .long-term-care-card ul li,
    .benefit-card ul li,
    .news-card ul li,
    .related-card ul li,
    .service-option-card ul li,
    .trust-card ul li,
    .stat-card ul li,
    .process-step-card ul li {
        margin-bottom: 0.5rem !important;
        position: relative !important;
    }

    .service-card ul li:last-child,
    .mission-card ul li:last-child,
    .pricing-card ul li:last-child,
    .scope-card ul li:last-child,
    .benefit-card ul li:last-child,
    .service-content-card ul li:last-child,
    .feature-card ul li:last-child,
    .audience-card ul li:last-child,
    .target-card ul li:last-child,
    .content-card ul li:last-child,
    .advantage-card ul li:last-child,
    .care-content-card ul li:last-child,
    .stage-card ul li:last-child,
    .why-choose-card ul li:last-child,
    .quality-card ul li:last-child,
    .other-service-card ul li:last-child,
    .staff-card ul li:last-child,
    .target-audience-card ul li:last-child,
    .capability-card ul li:last-child,
    .complication-card ul li:last-child,
    .support-service-card ul li:last-child,
    .caregiver-card ul li:last-child,
    .understanding-card ul li:last-child,
    .care-service-card ul li:last-child,
    .care-detail-card ul li:last-child,
    .acute-care-card ul li:last-child,
    .sub-acute-care-card ul li:last-child,
    .long-term-care-card ul li:last-child,
    .benefit-card ul li:last-child,
    .news-card ul li:last-child,
    .related-card ul li:last-child,
    .service-option-card ul li:last-child,
    .trust-card ul li:last-child,
    .stat-card ul li:last-child,
    .process-step-card ul li:last-child {
        margin-bottom: 0 !important;
    }

    /* Card Icon Enhancements */
    .service-icon-hex,
    .feature-icon,
    .audience-icon,
    .target-icon,
    .content-icon,
    .advantage-icon,
    .care-content-icon,
    .stage-icon,
    .why-choose-icon,
    .quality-icon,
    .other-service-icon,
    .staff-icon,
    .target-audience-icon,
    .capability-icon,
    .complication-icon,
    .support-service-icon,
    .caregiver-icon,
    .understanding-icon,
    .care-service-icon,
    .care-detail-icon,
    .acute-care-icon,
    .sub-acute-care-icon,
    .long-term-care-icon,
    .benefit-icon,
    .news-icon,
    .related-icon,
    .service-option-icon,
    .trust-icon,
    .stat-icon,
    .process-step-icon {
        margin-bottom: 1rem !important;
    }

    .service-icon-hex svg,
    .feature-icon svg,
    .audience-icon svg,
    .target-icon svg,
    .content-icon svg,
    .advantage-icon svg,
    .care-content-icon svg,
    .stage-icon svg,
    .why-choose-icon svg,
    .quality-icon svg,
    .other-service-icon svg,
    .staff-icon svg,
    .target-audience-icon svg,
    .capability-icon svg,
    .complication-icon svg,
    .support-service-icon svg,
    .caregiver-icon svg,
    .understanding-icon svg,
    .care-service-icon svg,
    .care-detail-icon svg,
    .acute-care-icon svg,
    .sub-acute-care-icon svg,
    .long-term-care-icon svg,
    .benefit-icon svg,
    .news-icon svg,
    .related-icon svg,
    .service-option-icon svg,
    .trust-icon svg,
    .stat-icon svg,
    .process-step-icon svg {
        width: 80px !important;
        height: 80px !important;
    }

    .service-icon-svg,
    .feature-icon i,
    .audience-icon i,
    .target-icon i,
    .content-icon i,
    .advantage-icon i,
    .care-content-icon i,
    .stage-icon i,
    .why-choose-icon i,
    .quality-icon i,
    .other-service-icon i,
    .staff-icon i,
    .target-audience-icon i,
    .capability-icon i,
    .complication-icon i,
    .support-service-icon i,
    .caregiver-icon i,
    .understanding-icon i,
    .care-service-icon i,
    .care-detail-icon i,
    .acute-care-icon i,
    .sub-acute-care-icon i,
    .long-term-care-icon i,
    .benefit-icon i,
    .news-icon i,
    .related-icon i,
    .service-option-icon i,
    .trust-icon i,
    .stat-icon i,
    .process-step-icon i {
        font-size: 1.8rem !important;
    }
    
    /* Ensure cards are visible on mobile - override animate-on-scroll */
    .animate-on-scroll {
        opacity: 1 !important;
    }
    
    .animate-on-scroll.animated {
        opacity: 1 !important;
    }
    
    /* Community Page Fanned Images Mobile Layout */
    .fanned-images-container {
        position: relative !important;
        height: auto !important;
        margin: 2rem 0 !important;
        overflow: visible !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 1.5rem !important;
    }
    
    .fanned-image {
        position: relative !important;
        width: 100% !important;
        height: 400px !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
        cursor: pointer !important;
        border-radius: 8px !important;
        overflow: hidden !important;
        margin-bottom: 1rem !important;
    }
    
    .fanned-image:nth-child(2),
    .fanned-image:nth-child(3),
    .fanned-image:nth-child(4),
    .fanned-image:nth-child(5) {
        left: auto !important;
        transform: none !important;
        z-index: 1 !important;
    }
    
    .fanned-image:hover {
        transform: none !important;
        z-index: 1 !important;
        box-shadow: 0 8px 20px rgba(0,0,0,0.15) !important;
        border: 2px solid #FF7A00 !important;
        overflow: hidden !important;
    }
    
    .fanned-image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 8px !important;
        transition: all 0.3s ease !important;
    }
    
    .fanned-image:hover img {
        transform: scale(1.05) !important;
        object-fit: cover !important;
        background-color: white !important;
    }
}

@media (max-width: 480px) {
    /* Small Mobile Optimizations */
    .service-cards,
    .mission-cards,
    .pricing-cards,
    .scope-cards,
    .benefits-cards,
    .service-content-grid,
    .features-grid,
    .audience-grid,
    .targets-grid,
    .content-grid,
    .advantages-grid,
    .care-content-grid,
    .stages-grid,
    .why-choose-grid,
    .quality-grid,
    .other-services-grid,
    .services-grid,
    .staff-grid,
    .target-audience-grid,
    .capabilities-grid,
    .complications-grid,
    .support-services-grid,
    .caregivers-grid,
    .understanding-grid,
    .care-services-grid,
    .care-details-grid,
    .acute-care-grid,
    .sub-acute-care-grid,
    .long-term-care-grid,
    .benefits-grid,
    .news-grid,
    .related-grid,
    .service-options-grid,
    .trust-grid,
    .stats-grid {
        grid-template-columns: 1fr !important;
        gap: 10px  !important;
        padding: 0rem !important;
    }

    .service-card,
    .mission-card,
    .pricing-card,
    .scope-card,
    .benefit-card,
    .service-content-card,
    .feature-card,
    .audience-card,
    .target-card,
    .content-card,
    .advantage-card,
    .care-content-card,
    .stage-card,
    .why-choose-card,
    .quality-card,
    .other-service-card,
    .staff-card,
    .target-audience-card,
    .capability-card,
    .complication-card,
    .support-service-card,
    .caregiver-card,
    .understanding-card,
    .care-service-card,
    .care-detail-card,
    .acute-care-card,
    .sub-acute-care-card,
    .long-term-care-card,
    .benefit-card,
    .news-card,
    .related-card,
    .service-option-card,
    .trust-card,
    .stat-card,
    .process-step-card {
        padding: 1.25rem 1rem 1rem 1rem !important;
        border-radius: 10px !important;
    }

    .service-card h3,
    .mission-card h3,
    .pricing-card h3,
    .scope-card h3,
    .benefit-card h3,
    .service-content-card h3,
    .feature-card h3,
    .audience-card h3,
    .target-card h3,
    .content-card h3,
    .advantage-card h3,
    .care-content-card h3,
    .stage-card h3,
    .why-choose-card h3,
    .quality-card h3,
    .other-service-card h3,
    .staff-card h3,
    .target-audience-card h3,
    .capability-card h3,
    .complication-card h3,
    .support-service-card h3,
    .caregiver-card h3,
    .understanding-card h3,
    .care-service-card h3,
    .care-detail-card h3,
    .acute-care-card h3,
    .sub-acute-care-card h3,
    .long-term-care-card h3,
    .benefit-card h3,
    .news-card h3,
    .related-card h3,
    .service-option-card h3,
    .trust-card h3,
    .stat-card h3,
    .process-step-card h3 {
        font-size: 1.1rem !important;
        margin-bottom: 0.75rem !important;
    }

    .service-card ul,
    .mission-card ul,
    .pricing-card ul,
    .scope-card ul,
    .benefit-card ul,
    .service-content-card ul,
    .feature-card ul,
    .audience-card ul,
    .target-card ul,
    .content-card ul,
    .advantage-card ul,
    .care-content-card ul,
    .stage-card ul,
    .why-choose-card ul,
    .quality-card ul,
    .other-service-card ul,
    .staff-card ul,
    .target-audience-card ul,
    .capability-card ul,
    .complication-card ul,
    .support-service-card ul,
    .caregiver-card ul,
    .understanding-card ul,
    .care-service-card ul,
    .care-detail-card ul,
    .acute-care-card ul,
    .sub-acute-care-card ul,
    .long-term-care-card ul,
    .benefit-card ul,
    .news-card ul,
    .related-card ul,
    .service-option-card ul,
    .trust-card ul,
    .stat-card ul,
    .process-step-card ul,
    .service-card p,
    .mission-card p,
    .pricing-card p,
    .scope-card p,
    .benefit-card p,
    .service-content-card p,
    .feature-card p,
    .audience-card p,
    .target-card p,
    .content-card p,
    .advantage-card p,
    .care-content-card p,
    .stage-card p,
    .why-choose-card p,
    .quality-card p,
    .other-service-card p,
    .staff-card p,
    .target-audience-card p,
    .capability-card p,
    .complication-card p,
    .support-service-card p,
    .caregiver-card p,
    .understanding-card p,
    .care-service-card p,
    .care-detail-card p,
    .acute-care-card p,
    .sub-acute-care-card p,
    .long-term-care-card p,
    .benefit-card p,
    .news-card p,
    .related-card p,
    .service-option-card p,
    .trust-card p,
    .stat-card p,
    .process-step-card p {
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
    }

    .service-card ul,
    .mission-card ul,
    .pricing-card ul,
    .scope-card ul,
    .benefit-card ul,
    .service-content-card ul,
    .feature-card ul,
    .audience-card ul,
    .target-card ul,
    .content-card ul,
    .advantage-card ul,
    .care-content-card ul,
    .stage-card ul,
    .why-choose-card ul,
    .quality-card ul,
    .other-service-card ul,
    .staff-card ul,
    .target-audience-card ul,
    .capability-card ul,
    .complication-card ul,
    .support-service-card ul,
    .caregiver-card ul,
    .understanding-card ul,
    .care-service-card ul,
    .care-detail-card ul,
    .acute-care-card ul,
    .sub-acute-care-card ul,
    .long-term-care-card ul,
    .benefit-card ul,
    .news-card ul,
    .related-card ul,
    .service-option-card ul,
    .trust-card ul,
    .stat-card ul,
    .process-step-card ul,
    .service-card p,
    .mission-card p,
    .pricing-card p,
    .scope-card p,
    .benefit-card p,
    .service-content-card p,
    .feature-card p,
    .audience-card p,
    .target-card p,
    .content-card p,
    .advantage-card p,
    .care-content-card p,
    .stage-card p,
    .why-choose-card p,
    .quality-card p,
    .other-service-card p,
    .staff-card p,
    .target-audience-card p,
    .capability-card p,
    .complication-card p,
    .support-service-card p,
    .caregiver-card p,
    .understanding-card p,
    .care-service-card p,
    .care-detail-card p,
    .acute-care-card p,
    .sub-acute-care-card p,
    .long-term-care-card p,
    .benefit-card p,
    .news-card p,
    .related-card p,
    .service-option-card p,
    .trust-card p,
    .stat-card p,
    .process-step-card p {
        padding-left: 1rem !important;
    }

    .service-card ul li,
    .mission-card ul li,
    .pricing-card ul li,
    .scope-card ul li,
    .benefit-card ul li,
    .service-content-card ul li,
    .feature-card ul li,
    .audience-card ul li,
    .target-card ul li,
    .content-card ul li,
    .advantage-card ul li,
    .care-content-card ul li,
    .stage-card ul li,
    .why-choose-card ul li,
    .quality-card ul li,
    .other-service-card ul li,
    .staff-card ul li,
    .target-audience-card ul li,
    .capability-card ul li,
    .complication-card ul li,
    .support-service-card ul li,
    .caregiver-card ul li,
    .understanding-card ul li,
    .care-service-card ul li,
    .care-detail-card ul li,
    .acute-care-card ul li,
    .sub-acute-care-card ul li,
    .long-term-care-card ul li,
    .benefit-card ul li,
    .news-card ul li,
    .related-card ul li,
    .service-option-card ul li,
    .trust-card ul li,
    .stat-card ul li,
    .process-step-card ul li {
        margin-bottom: 0.4rem !important;
        /* font-size: smaller !important;
        text-align: center !important */
    }

    /* Card Icon Adjustments */
    .service-icon-hex svg,
    .feature-icon svg,
    .audience-icon svg,
    .target-icon svg,
    .content-icon svg,
    .advantage-icon svg,
    .care-content-icon svg,
    .stage-icon svg,
    .why-choose-icon svg,
    .quality-icon svg,
    .other-service-icon svg,
    .staff-icon svg,
    .target-audience-icon svg,
    .capability-icon svg,
    .complication-icon svg,
    .support-service-icon svg,
    .caregiver-icon svg,
    .understanding-icon svg,
    .care-service-icon svg,
    .care-detail-icon svg,
    .acute-care-icon svg,
    .sub-acute-care-icon svg,
    .long-term-care-icon svg,
    .benefit-icon svg,
    .news-icon svg,
    .related-icon svg,
    .service-option-icon svg,
    .trust-icon svg,
    .stat-icon svg,
    .process-step-icon svg {
        width: 70px !important;
        height: 70px !important;
    }

    .service-icon-svg,
    .feature-icon i,
    .audience-icon i,
    .target-icon i,
    .content-icon i,
    .advantage-icon i,
    .care-content-icon i,
    .stage-icon i,
    .why-choose-icon i,
    .quality-icon i,
    .other-service-icon i,
    .staff-icon i,
    .target-audience-icon i,
    .capability-icon i,
    .complication-icon i,
    .support-service-icon i,
    .caregiver-icon i,
    .understanding-icon i,
    .care-service-icon i,
    .care-detail-icon i,
    .acute-care-icon i,
    .sub-acute-care-icon i,
    .long-term-care-icon i,
    .benefit-icon i,
    .news-icon i,
    .related-icon i,
    .service-option-icon i,
    .trust-icon i,
    .stat-icon i,
    .process-step-icon i {
        font-size: 1.6rem !important;
    }
    
    /* Community Page Fanned Images Mobile Layout - 480px */
    .fanned-images-container {
        gap: 1rem !important;
        margin: 1.5rem 0 !important;
    }
    
    .fanned-image {
        height: 100% !important;
        margin-bottom: 0.75rem !important;
    }
}

@media (max-width: 360px) {
    /* Extra Small Mobile */
    .service-cards,
    .mission-cards,
    .pricing-cards,
    .scope-cards,
    .benefits-cards,
    .service-content-grid,
    .features-grid,
    .audience-grid,
    .targets-grid,
    .content-grid,
    .advantages-grid,
    .care-content-grid,
    .stages-grid,
    .why-choose-grid,
    .quality-grid,
    .other-services-grid,
    .services-grid,
    .staff-grid,
    .target-audience-grid,
    .capabilities-grid,
    .complications-grid,
    .support-services-grid,
    .caregivers-grid,
    .understanding-grid,
    .care-services-grid,
    .care-details-grid,
    .acute-care-grid,
    .sub-acute-care-grid,
    .long-term-care-grid,
    .benefits-grid,
    .news-grid,
    .related-grid,
    .service-options-grid,
    .trust-grid,
    .stats-grid {
        padding: 0rem !important;
        gap: 0.75rem !important;
    }

    .service-card,
    .mission-card,
    .pricing-card,
    .scope-card,
    .benefit-card,
    .service-content-card,
    .feature-card,
    .audience-card,
    .target-card,
    .content-card,
    .advantage-card,
    .care-content-card,
    .stage-card,
    .why-choose-card,
    .quality-card,
    .other-service-card,
    .staff-card,
    .target-audience-card,
    .capability-card,
    .complication-card,
    .support-service-card,
    .caregiver-card,
    .understanding-card,
    .care-service-card,
    .care-detail-card,
    .acute-care-card,
    .sub-acute-care-card,
    .long-term-care-card,
    .benefit-card,
    .news-card,
    .related-card,
    .service-option-card,
    .trust-card,
    .stat-card,
    .process-step-card {
        padding: 1rem 0.75rem 0.75rem 0.75rem !important;
    }

    .service-card h3,
    .mission-card h3,
    .pricing-card h3,
    .scope-card h3,
    .benefit-card h3,
    .service-content-card h3,
    .feature-card h3,
    .audience-card h3,
    .target-card h3,
    .content-card h3,
    .advantage-card h3,
    .care-content-card h3,
    .stage-card h3,
    .why-choose-card h3,
    .quality-card h3,
    .other-service-card h3,
    .staff-card h3,
    .target-audience-card h3,
    .capability-card h3,
    .complication-card h3,
    .support-service-card h3,
    .caregiver-card h3,
    .understanding-card h3,
    .care-service-card h3,
    .care-detail-card h3,
    .acute-care-card h3,
    .sub-acute-care-card h3,
    .long-term-care-card h3,
    .benefit-card h3,
    .news-card h3,
    .related-card h3,
    .service-option-card h3,
    .trust-card h3,
    .stat-card h3,
    .process-step-card h3 {
        font-size: 15px !important;
    }

    .service-card ul,
    .mission-card ul,
    .pricing-card ul,
    .scope-card ul,
    .benefit-card ul,
    .service-content-card ul,
    .feature-card ul,
    .audience-card ul,
    .target-card ul,
    .content-card ul,
    .advantage-card ul,
    .care-content-card ul,
    .stage-card ul,
    .why-choose-card ul,
    .quality-card ul,
    .other-service-card ul,
    .staff-card ul,
    .target-audience-card ul,
    .capability-card ul,
    .complication-card ul,
    .support-service-card ul,
    .caregiver-card ul,
    .understanding-card ul,
    .care-service-card ul,
    .care-detail-card ul,
    .acute-care-card ul,
    .sub-acute-care-card ul,
    .long-term-care-card ul,
    .benefit-card ul,
    .news-card ul,
    .related-card ul,
    .service-option-card ul,
    .trust-card ul,
    .stat-card ul,
    .process-step-card ul,
    .service-card p,
    .mission-card p,
    .pricing-card p,
    .scope-card p,
    .benefit-card p,
    .service-content-card p,
    .feature-card p,
    .audience-card p,
    .target-card p,
    .content-card p,
    .advantage-card p,
    .care-content-card p,
    .stage-card p,
    .why-choose-card p,
    .quality-card p,
    .other-service-card p,
    .staff-card p,
    .target-audience-card p,
    .capability-card p,
    .complication-card p,
    .support-service-card p,
    .caregiver-card p,
    .understanding-card p,
    .care-service-card p,
    .care-detail-card p,
    .acute-care-card p,
    .sub-acute-care-card p,
    .long-term-care-card p,
    .benefit-card p,
    .news-card p,
    .related-card p,
    .service-option-card p,
    .trust-card p,
    .stat-card p,
    .process-step-card p {
        font-size: 15px !important;
        padding-left: 0 !important;
    }

    .service-icon-hex svg,
    .feature-icon svg,
    .audience-icon svg,
    .target-icon svg,
    .content-icon svg,
    .advantage-icon svg,
    .care-content-icon svg,
    .stage-icon svg,
    .why-choose-icon svg,
    .quality-icon svg,
    .other-service-icon svg,
    .staff-icon svg,
    .target-audience-icon svg,
    .capability-icon svg,
    .complication-icon svg,
    .support-service-icon svg,
    .caregiver-icon svg,
    .understanding-icon svg,
    .care-service-icon svg,
    .care-detail-icon svg,
    .acute-care-icon svg,
    .sub-acute-care-icon svg,
    .long-term-care-icon svg,
    .benefit-icon svg,
    .news-icon svg,
    .related-icon svg,
    .service-option-icon svg,
    .trust-icon svg,
    .stat-icon svg,
    .process-step-icon svg {
        width: 60px !important;
        height: 60px !important;
    }

    .service-icon-svg,
    .feature-icon i,
    .audience-icon i,
    .target-icon i,
    .content-icon i,
    .advantage-icon i,
    .care-content-icon i,
    .stage-icon i,
    .why-choose-icon i,
    .quality-icon i,
    .other-service-icon i,
    .staff-icon i,
    .target-audience-icon i,
    .capability-icon i,
    .complication-icon i,
    .support-service-icon i,
    .caregiver-icon i,
    .understanding-icon i,
    .care-service-icon i,
    .care-detail-icon i,
    .acute-care-icon i,
    .sub-acute-care-icon i,
    .long-term-care-icon i,
    .benefit-icon i,
    .news-icon i,
    .related-icon i,
    .service-option-icon i,
    .trust-icon i,
    .stat-icon i,
    .process-step-icon i {
        font-size: 1.4rem !important;
    }
    
    /* Community Page Fanned Images Mobile Layout - 360px */
    .fanned-images-container {
        gap: 0.75rem !important;
        margin: 1rem 0 !important;
    }
    
   
}


    /* Statistics Cards */
    .mobile-about-stats {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
        margin-top: 30px !important;
        width: 100% !important;
    }
    
    .mobile-stat-card {
        background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%) !important;
        border: 2px solid #e9ecef !important;
        border-radius: 20px !important;
        padding: 25px 20px !important;
        text-align: center !important;
        box-shadow: 0 8px 32px rgba(0,0,0,0.08) !important;
        transition: all 0.3s ease !important;
        position: relative !important;
        overflow: hidden !important;
    }
    
    .mobile-stat-card::before {
        content: '' !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 4px !important;
        background: linear-gradient(90deg, #FF7A00, #E56717) !important;
    }
    
    .mobile-stat-card:hover {
        transform: translateY(-5px) !important;
        box-shadow: 0 12px 40px rgba(0,0,0,0.15) !important;
        border-color: #FF7A00 !important;
    }
    
    .stat-icon-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 15px !important;
        margin-bottom: 20px !important;
    }
    
    .stat-icon {
        width: 60px !important;
        height: 60px !important;
        background: linear-gradient(135deg, #FF7A00, #E56717) !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 6px 20px rgba(255, 122, 0, 0.3) !important;
        transition: transform 0.3s ease !important;
         font-size: 24px !important;
        color: #fff !important;
    }
    
    .mobile-stat-card:hover .stat-icon {
        transform: scale(1.1) !important;
    }
    
    .stat-number {
        color: #FF7A00 !important;
        font-size: 1.6rem !important;
        font-weight: 700 !important;
        margin: 0 !important;
        line-height: 1.2 !important;
    }
    
    .stat-description {
        color: gray  !important;
        font-size: 1.5rem !important;
        font-weight: 500 !important;
        margin: 0 !important;
        line-height: 1.4 !important;
        text-align: center !important;
    }

    @media (max-width: 480px) {
        .mobile-wound-service-scope-layout {
            grid-template-columns: repeat(1, 1fr) !important;
        }

.mobile-stroke-psychological-layout {
    grid-template-columns: repeat(1, 1fr) !important;
}

/* feature blocks */
.mobile-stroke-psychological-feature-blocks {
    grid-template-columns: repeat(1, 1fr) !important;
}
    }

    @media (min-width: 480px) {
        .mobile-wound-service-scope-layout {
            grid-template-columns: repeat(2, 1fr) !important;
        }

        .mobile-stroke-psychological-layout {
            grid-template-columns: repeat(2, 1fr) !important;
        }
    }
}

/* ===== MOBILE BANNER SLIDER STYLES ===== */

/* Mobile Banner Slider Styles */
.mobile-banner-slider {
    display: none;
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 500px;
    overflow: hidden;
}

.mobile-slider-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.mobile-slider-track {
    display: flex;
    width: 600%; /* 6 slides * 100% */
    height: 100%;
    transition: transform 0.5s ease-in-out;
}

.mobile-slide {
    width: 16.666%; /* 100% / 6 slides */
    height: 100%;
    position: relative;
    flex-shrink: 0;
}

.mobile-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.mobile-slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    z-index: 10;
}

.mobile-slider-prev,
.mobile-slider-next {
    background: rgba(255, 255, 255, 0.8);
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.mobile-slider-prev:hover,
.mobile-slider-next:hover {
    background: rgba(255, 122, 0, 0.9);
    color: white;
    transform: scale(1.1);
}

.mobile-slider-prev i,
.mobile-slider-next i {
    font-size: 18px;
    color: #333;
}

.mobile-slider-prev:hover i,
.mobile-slider-next:hover i {
    color: white;
}

.mobile-slider-dots {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 10;
}

.mobile-slider-dots .dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid rgba(255, 255, 255, 0.8);
}

.mobile-slider-dots .dot.active {
    background: #FF7A00;
    border-color: #FF7A00;
    transform: scale(1.2);
}

.mobile-slider-dots .dot:hover {
    background: rgba(255, 122, 0, 0.8);
    border-color: rgba(255, 122, 0, 0.8);
}

/* Mobile Banner Description Styles */
.mobile-banner-description {
    display: none;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    background-image: url('images/HomePage/mobile banner/mobile background.png');
    background-size: cover;
    background-position: 50% 100% !important;
    background-repeat: no-repeat;
    padding: 40px 15px 180px 15px !important;
    text-align: left !important;
    height: 620px !important;
}

.mobile-description-content {
    max-width: 600px;
    margin: 0 auto;
    padding: 0 1rem;
}

.mobile-description-title {
    color: #FF7A00;
    font-size: 34px !important;
    font-weight: 600;
    margin-bottom: 1rem;
    line-height: 1.3;   
    text-align: left !important;
    text-wrap: nowrap !important;

}

.mobile-description-text {
    color: #333;
    font-size: 16px !important;
    line-height: 2.2;
    margin: 0;
    font-weight: 400;
}

/* Show both banners on mobile */
@media (max-width: 480px) {
    .desktop-banner {
        display: block !important;
        min-height: 500px;
    }
    
    .desktop-banner .banner-slider-track {
        height: 100%;
    }
    
    .desktop-banner .banner-slider-track img {
        height: 100%;
        object-fit: cover;
        object-position: center;
    }
    
    .desktop-banner .banner-slider-overlay {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .desktop-banner .banner-slider-content {
        text-align: center;
        padding: 20px;
    }
    
    .desktop-banner .banner-title {
        font-size: 1.8rem !important;
        margin-bottom: 10px;
    }
    
    .desktop-banner .banner-subtitle {
        font-size: 1.2rem !important;
        margin-bottom: 15px;
    }
    
    .desktop-banner .banner-text {
        font-size: 0.9rem !important;
        line-height: 1.4;
    }
    
    .desktop-banner .cta-buttons {
        margin-top: 20px;
        flex-direction: column;
        gap: 10px;
    }
    
    .desktop-banner .cta-buttons .btn {
        width: 100%;
        max-width: 250px;
        margin: 0 auto;
    }
    
    /* Hide desktop banner and show mobile banner slider on mobile devices */
    .desktop-banner {
        display: none !important;
    }
    
    .mobile-banner-slider {
        display: block !important;
    }
    
    .mobile-banner-description {
        display: block;
        margin-top: 20px;
    }
    
    .banner-content-mobile {
        display: block;
    }

    .mobile-section-title {
        font-size: 20px !important;
        font-weight: 700 !important;
        margin-bottom: 1rem !important;
        text-shadow: 0 2px 4px rgba(255,122,0,0.1) !important;
        text-align: left !important;
    }

    .service-features1 {
        list-style: none !important;
    
        padding-left: 0 !important;
    }
    
    .service-features1 li {
        font-size: 18px !important;
        text-align: center !important;
    }

    .service-features2 {
        list-style: none !important;
        padding-left: 0 !important;
    }
    
    .service-features2 li {
        font-size: 18px !important;
        text-align: center !important;
    }

    .service-features3 {
        list-style: none !important;
    
        padding-left: 0 !important;
    }

    .service-features3 li {
        font-size: 18px !important;
        text-align: center !important;
    }

    .service-features4 {
        list-style: none !important;
     
        padding-left: 0px !important;
    }  
    
    .service-features4 li {
        font-size: 18px !important;
        text-align: center !important;
    }

    .mobile-service-grid .service-card, .mission-card, .pricing-card, .scope-card, .benefit-card, .service-content-card, .feature-card, .audience-card, .target-card, .content-card, .advantage-card, .care-content-card, .stage-card, .why-choose-card, .quality-card, .other-service-card, .staff-card, .target-audience-card, .capability-card, .complication-card, .support-service-card, .caregiver-card, .understanding-card, .care-service-card, .care-detail-card, .acute-care-card, .sub-acute-care-card, .long-term-care-card, .benefit-card, .news-card, .related-card, .service-option-card, .trust-card, .stat-card, .process-step-card {
        padding: 10px 0px !important;
    }
}

/* Show desktop banner on larger screens */
@media (min-width: 769px) {
    .desktop-banner {
        display: block;
        min-height: 500px;
    }
    
    .mobile-banner-slider {
        display: none !important;
    }
    
    .banner-content-mobile {
        display: none;
    }
    
    /* Show only desktop images on desktop devices */
    .desktop-banner .desktop-image {
        display: block !important;
    }
    
    .desktop-banner .mobile-image {
        display: none !important;
    }

    .mobile-section-title {
        font-size: 2rem !important;
       
        font-weight: 700 !important;
        margin-bottom: 1rem !important;
        text-shadow: 0 2px 4px rgba(255,122,0,0.1) !important;
        text-align: center !important;
    }

    .service-features1 {
        list-style: none !important;
     
        padding-left: 0 !important;
        text-align: center !important;
    }
    
    .service-features1 li {
        font-size: 18px !important;
        text-align: center !important;
    }

    .service-features2 {
        list-style: none !important;     
        padding-left: 0 !important;
        text-align: center !important;
    }
    .service-features2 li {
        font-size: 18px !important;
        text-align: center !important;
    }
    .service-features3 {
        list-style: none !important;
        padding-left: 0 !important;
        text-align: center !important;
    }
    .service-features3 li {
        font-size: 18px !important;
        text-align: center !important;
    }
    .service-features4 {
        list-style: none !important;
        padding-left: 0 !important;
        text-align: center !important;
    }   
    .service-features4 li {
        font-size: 20px !important;
        text-align: center !important;
    }

}