:root {
            --primary-blue: #034A91;
            --gold: #C19C5C;
            --light-gold: #F5E6D3;
            --dark-blue: #003366;
            --background: #f8f9fa;
        }
        
        body{
            font-size: 12px;
            background-color: var(--background);
        }

        .top-banner {
            background-color: var(--gold);
            color: white;
            padding: 10px;
        }

        .logo-section {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .logo-icon {
            width: 40px;
            height: 40px;
            background-color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--primary-blue);
        }

        .main-nav {
            background-color: var(--primary-blue);
            padding: 0;
            height:28px;
        }

        .search-section {
            background-color: var(--background);
            padding: 20px 0;
        }

        .search-box {
            position: relative;
            max-width: 600px;
            margin: 0 auto;
            height: 26px;
            width:75%;
        }

        .search-input {
            width: 100%;
            padding: 3px 50px 3px 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 12px;
        }

        .search-btn {
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            background-color: var(--primary-blue);
            color: white;
            border: none;
            padding: 4px 10px;
            border-radius: 3px;
            cursor: pointer;
        }

        .quick-links {
            display: flex;
            gap: 5px;
            margin-top: 10px;
            flex-wrap: wrap;
        }

        .quick-links a {
            color: var(--primary-blue);
            text-decoration: none;
        }

        .quick-links a:last-child {
            border-right: none;
        }
            .main-nav .nav-link {
                border-right: none;
                padding: 5px 15px;
                font-size: 12px;
            color: white !important;
            font-weight: 700;
            }
            
        .service-nav {
            background-color: var(--light-gold);
            padding: 10px 0;
        }

        .service-nav .nav-link {
            color: #666;
            padding: 8px 20px;
            font-weight: 500;
            border-radius: 20px;
            transition: all 0.3s;
        }

        .service-nav .nav-link:hover {
            background-color: var(--gold);
            color: white;
        }

        /* Tab styles for first level */
        .tab-nav {
            background-color: var(--background);
            padding: 0;
        }

        .tab-nav .nav-link {
            color: #666;
            font-weight: 500;
            background-color: var(--background);
            border-bottom: none;
            transition: all 0.3s;
        }

        .tab-nav .nav-link:hover {
            background-color: var(--background);
        }

        .tab-nav .nav-link.active {
            background-color: var(--gold);
            color: white;
            border-color: var(--gold);
        }

        
        .service-nav {
            background-color: var(--light-gold);
            padding: 10px 0;
        }

        .service-nav .nav-link {
            color: var(--gold);
            padding: 8px 20px;
            font-weight: 500;
            border-radius: 20px;
            transition: all 0.3s;
        }

        .service-nav .nav-link:hover {
            background-color: var(--gold);
            color: white;
        }

        /* Tab styles for first level */
        .tab-nav {
            background-color: var(--background);
            padding: 0;
        }

        .tab-nav .nav-link {
            color: var(--gold);
            font-weight: 500;
            background-color: var(--background);
            border-bottom: none;
            transition: all 0.3s;
        }

        .tab-nav .nav-link:hover {
            background-color: var(--background);
        }

        .tab-nav .nav-link.active {
            background-color: var(--gold);
            color: white;
            border-color: var(--gold);
        }

        /* Sub-service navigation */
        .sub-service-nav {
            background-color: var(--gold);
            position: relative;
            overflow: hidden;
        }
        
        .sub-service-nav-2 {
            background-color: var(--background);
            color: #666;
            position: relative;
            overflow: hidden;
        }

        /* Medical region navigation - 香港醫療 row */
        .medical-region-nav {
            background-color: var(--background);
            position: relative;
            overflow: hidden;
            padding-top: 10px;
            display: none; /* Hidden by default */
        }

        .medical-region-nav.active {
            display: block; /* Show when active */
        }

        /* Center align the medical region nav */
        .medical-region-nav .scroll-container {
            display: flex;
            justify-content: center;
        }

        .medical-region-nav .nav {
            justify-content: center;
            padding: 0;
        }

        .sub-service-nav .nav-link {
            color: var(--background);
            font-weight: 700;
            white-space: nowrap;
            padding: 5px 7px;
        }

        .sub-service-nav-2 .nav-link {
            color: var(--gold);
            font-weight: 700;
            white-space: nowrap;
            padding: 5px 7px;
        }

        .medical-region-nav .nav-link {
            color: var(--primary-blue);
            font-weight: 700;
            white-space: nowrap;
            padding: 5px 15px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .sub-service-nav .nav-link:hover, 
        .sub-service-nav-2 .nav-link:hover {
            background-color: rgba(255, 255, 255, 0.2);
            border-radius: 20px;
        }

        .medical-region-nav .nav-link:hover {
            background-color: rgba(3, 74, 145, 0.1);
            border-radius: 25px;
            transform: translateY(-1px);
            transition: all 0.3s;
        }

        /* Horizontal scroll container */
        .scroll-container {
            overflow-x: auto;
            overflow-y: hidden;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none; /* Firefox */
            -ms-overflow-style: none; /* Internet Explorer 10+ */
        }

        .scroll-container::-webkit-scrollbar {
            width: 0;
            height: 0;
            display: none; /* Chrome, Safari, Opera */
        }

        .scroll-container .nav {
            flex-wrap: nowrap;
            display: flex;
            padding: 0 20px;
        }

        .scroll-container .nav-item {
            flex: 0 0 auto;
        }

        /* Tab content */
        .tab-content-area {
            display: none;
        }

        .tab-content-area.active {
            display: block;
        }

        /* Add gradient fade effect for scroll indication */
        .sub-service-nav::before,
        .sub-service-nav::after {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            width: 30px;
            z-index: 2;
            pointer-events: none;
        }

        .sub-service-nav::before {
            left: 0;
            background: linear-gradient(to right, var(--gold), transparent);
        }

        .sub-service-nav::after {
            right: 0;
            background: linear-gradient(to left, var(--gold), transparent);
        }

        .bottom-nav {
            background-color: var(--background);
            padding: 15px 0;
            border-bottom: 1px solid #ddd;
        }

        .bottom-nav a {
            color: #666;
            text-decoration: none;
            padding: 0 20px;
            border-right: 1px solid #ddd;
        }

        .bottom-nav a:last-child {
            border-right: none;
        }

        .bottom-nav a:hover {
            color: var(--primary-blue);
        }

        /* Touch and mouse scroll support */
        @media (max-width: 768px) {
            .scroll-container {
                cursor: grab;
            }
            
            .scroll-container:active {
                cursor: grabbing;
            }
        }
        .container-clinic {
            width: 100%;
            background-color: #f8f8f8;
            padding:0;
        }
        
        .clinic-card {
            background: var(--background);
            margin-bottom: 8px;
            display: flex;
            min-height: 180px;
            margin-top:15px;
        }
        
        /* Left Image Section */
        .clinic-image-section {
            width: 240px;
            flex-shrink: 0;
            position: relative;
            overflow: hidden;
        }
        
        .clinic-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .clinic-logo-overlay {
            background-color: #5DCDC4;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: relative;
            padding: 20px;
        }
        
        .clinic-logo-text {
            color: white;
            font-size: 24px;
            font-weight: 300;
            letter-spacing: 1px;
            text-align: center;
            margin-bottom: 10px;
        }
        
        .clinic-tagline {
            color: white;
            font-size: 10px;
            text-align: center;
            line-height: 1.4;
        }
        
        .medical-cross {
            position: absolute;
            bottom: 15px;
            right: 15px;
            width: 25px;
            height: 25px;
            background: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .medical-cross::before,
        .medical-cross::after {
            content: '';
            position: absolute;
            background-color: #5DCDC4;
        }
        
        .medical-cross::before {
            width: 15px;
            height: 3px;
        }
        
        .medical-cross::after {
            width: 3px;
            height: 15px;
        }
        
        /* Right Info Section */
        .clinic-info {
            flex: 1;
            padding: 10px 15px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        
        .clinic-details {
            flex: 1;
        }
        
        .clinic-name {
            font-size: 15px;
            font-weight: bold;
            color: #034A91;
            line-height: 1.3;
        }
        
        .service-label {
            color: #C19C5C;
            font-size: 13px;
            font-weight: 700;
        }
        
        .services-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0px 10px;
            font-size: 12px;
            color: #000000;
            margin-bottom: 10px;
            font-weight: 400;
        }
        
        .service-item {
            padding: 2px 0;
        }
        
        /* Stats Section */
        .stats-and-location {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            margin-top: 10px;
        }
        
        .clinic-stats {
            display: flex;
            gap: 15px;
        }
        
        .stat-item {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        .stat-icon-wrapper {
            width: 40px;
            height: 40px;
            background-color: #C19C5C;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 3px;
        }
        
        .stat-icon {
            width: 24px;
            height: 24px;
            background-color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
        }
        
        .stat-value {
            font-size: 12px;
            color: var(--primary-blue);
            font-weight: 700;
        }
        
        .stat-label {
            font-size: 12px;
            color: var(--gold);
            font-weight: 700;
        }
        
        /* Location */
        .location {
            display: flex;
            align-items: center;
            gap: 3px;
            color: #999;
            font-size: 11px;
            float:left;
        }
        
        .location-icon {
            width: 12px;
            height: 12px;
            fill: #999;
        }

        /* Responsive adjustments */
        @media (max-width: 480px) {
            .clinic-image-section {
                width: 50%;
            }
            
            .clinic-logo-text {
                font-size: 20px;
            }
            
        
            /* Container for the scrollable area */
            .image-scroll-container {
                width: 90%;
                margin: 0 auto;
                overflow-x: auto;
                overflow-y: hidden;
                -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
                scrollbar-width: none; /* Firefox */
                -ms-overflow-style: none; /* IE and Edge */
            }
            
            /* Hide scrollbar for Chrome, Safari and Opera */
            .image-scroll-container::-webkit-scrollbar {
                display: none;
            }
        }

        /* Common styles for all devices */
       .image-scroll-container {
            scrollbar-width: auto; /* Firefox */
            -ms-overflow-style: auto; /* IE and Edge */
        }

        .image-scroll-container::-webkit-scrollbar {
            display: block; /* Chrome, Safari, and Opera */
        }

        /* Header Services */
        .header-services {
            display: flex;
            justify-content: space-around;
            padding: 10px;
            background-color: white;
            margin:0 auto;
            width:90%;
            border:1px solid #CCC;
            border-radius:4px;
        }
        
        .pre-service-item {
            text-align: center;
            flex: 1;
            padding: 8px;
            position: relative;
        }

        .pre-service-item::after {
            content: '';
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            height: 50px; /* Adjust height as needed */
            width: 1px;
            background-color: #e0e0e0;
        }
        
        .pre-service-item:last-child::after {
            content: '';
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            height: 50px; /* Adjust height as needed */
            width: 0px;
            background-color: #e0e0e0;
        }
        
        .service-date {
            font-size: 12px;
            color: #000000;
        }
        
        .service-icon {
            width: 24px;
            height: 24px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .service-title {
            font-size: 15px;
            color: #034A91;
            font-weight: 700;
        }
        
        .appointment-badge {
            position: absolute;
            top: -5px;
            right: 5px;
            background-color: #C19C5C;
            color: white;
            font-size: 10px;
            padding: 2px 6px;
            border-radius: 10px;
        }
        
        /* Navigation Tabs */
        .nav-tabs {
            display: flex;
            background-color: #f8f8f8;
        }
        
        .nav-tab {
            flex: 1;
            padding: 12px 0;
            text-align: center;
            font-size: 13px;
            color: #034A91;
            cursor: pointer;
        }
        
        .nav-tab:last-child {
            border-right: none;
        }
        
        /* Appointment Tabs - Updated Style */
        .appointment-tabs {
            display: flex;
            justify-content: flex-start;
            margin: 20px 5% 0;
            gap: 40px;
        }
        
        .appointment-tab {
            padding: 10px 0;
            font-size: 20px;
            color: #034A91;
            cursor: pointer;
            border: none;
            background: none;
            position: relative;
            font-weight: 700;
            transition: color 0.3s ease;
        }
        
        .appointment-tab.active {
            color: #034A91;
            font-weight: 700;
        }
        
        .appointment-tab.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background-color: #034A91;
        }
        
        .appointment-tab:hover:not(.active) {
            color: #034A91;
        }
        
        
        /* payment record Tabs - Updated Style */
        .paymentrecord-tabs {
            display: flex;
            justify-content: flex-start;
            margin: 20px 5% 0;
            gap: 40px;
        }
        
        .paymentrecord-tab {
            padding: 10px 0;
            font-size: 20px;
            color: #034A91;
            cursor: pointer;
            border: none;
            background: none;
            position: relative;
            font-weight: 700;
            transition: color 0.3s ease;
        }
        
        .paymentrecord-tab.active {
            color: #034A91;
            font-weight: 700;
        }
        
        .paymentrecord-tab.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background-color: #034A91;
        }
        
        .paymentrecord-tab:hover:not(.active) {
            color: #034A91;
        }


        /* Tab Content */
        .tab-content {
            margin: 0 auto 20px;
            width: 90%;
        }
        
        .tab-pane {
            display: none;
        }
        
        .tab-pane.active {
            display: block;
        }
        
        /* Section Title */
        .section-title {
            margin: 15px 5%;
            font-size: 20px;
            font-weight: 700;
            color: #034A91;
            background-color: #f8f8f8;
            display: none; /* Hide the original title */
        }
        
        /* Service Cards */
        .service-card {
            margin: 15px auto;
            border-radius: 8px;
            overflow: hidden;
            background-color: white;
            width:100%;
            border: 1px solid #e0e0e0;
        }

        hr{
            width: 90%;
            margin: 1rem auto;
        }
        
        .service-card.inactive {
            border-color: #ddd;
        }
        
        .service-header {
            display: flex;
            padding: 15px;
        }
        
        .service-logo {
            width: 60px;
            height: 53px;
            margin-right: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 10px;
            text-align: center;
        }
        
        .service-card.inactive .service-logo {
            background-color: #999;
        }

        .service-info{
            width:100%;
        }
        
        .service-info h3 {
            font-size: 15px;
            margin-bottom: 3px;
            font-weight: 600;
            color:#000000;
        }
        
        .service-info p {
            font-size: 15px;
            color: #929292;
            font-weight: 600;
        }
        
        .service-details {
            background-color: #FFFFFF;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .service-btn {
            background-color: #FFFFFF;
            display: flex;
            justify-content: flex-end;
            align-items: center;
        }
        
        .time-info {
            font-size: 15px;
            color:#000000;
        }
        
        .book-button {
            background-color: #C19C5C;
            color: white;
            border: none;
            padding: 6px 18px;
            font-size: 13px;
            cursor: pointer;
        }
        
        .fav-button {
            background-color: #034A91;
            color: white;
            border: none;
            padding: 6px 18px;
            font-size: 13px;
            cursor: pointer;
        }
        
        /* Offers Section */
        .offers-header {
            padding: 0 5%;
            font-size: 20px;
            font-weight: 700;
            color: #034A91;
            background-color: #f8f8f8;
        }
        
        /* Reviews Section */
        .reviews-header {
            padding: 15px 5% 0 5%;
            font-size: 20px;
            font-weight: 700;
            color: #034A91;
            background-color: #f8f8f8;
        }
        
        .review-item {
            padding: 15px;
            background-color: white;
            margin:15px auto;
            width:90%;
        }
        
        .review-rating {
            display: flex;
            align-items: center;
        }
        
        .review-stars {
            color: #C19C5C;
            font-size: 15px;
            margin-right: 8px;
        }
        
        .reviewer-name {
            font-size: 15px;
            color: #000000;
        }
        
        .review-date {
            font-size: 15px;
            color: #000000;
        }
        
        .review-text {
            font-size: 15px;
            color: #929292;
            margin-bottom: 8px;
        }
        
        .review-tags {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }
        
        .review-tag {
            font-size: 12px;
            padding: 4px 10px;
            background-color: #e8f4fd;
            color: #2b7cc4;
            white-space: nowrap;
        }
        
        /* View More Button */
        .view-more-button {
            display: block; /* Ensures the button behaves as a block-level element */
            margin: 15px auto; /* Automatically centers the button horizontally */
            padding: 12px 40px;
            background-color: #034A91;
            color: white;
            border: none;
            font-size: 12px;
            cursor: pointer;
            text-align: center; /* Ensures text is centered inside the button */
        }
        
        /* Arrow indicator */
        .arrow-right {
            color: #000000;
            margin-left: 5px;
        }
        
        /* Empty State */
        .empty-state {
            text-align: center;
            padding: 50px 20px;
            color: #929292;
        }
        
        .empty-state p {
            font-size: 16px;
            margin-bottom: 10px;
        }

        .sub-category {
            background-color: var(--background);
            color: #034A91;
            position: relative;
            width: 90%;
            overflow: hidden;
            margin: 10px auto;
        }
        .sub-category .nav-link {
            color: #034A91;
            font-weight: 700;
            white-space: nowrap;
            padding: 5px 7px;
        }

    
    /* Inner wrapper that contains all images */
    .image-scroll-wrapper {
        display: flex;
        gap: 15px; /* Space between images */
        padding: 10px 0;
    }
    
    /* Individual image card */
    .card-wrapper {
        display: flex;
        flex-direction: column; /* Stack the image and button vertically */
        align-items: center;    /* Center align both the image and the button */
        margin: 10px;           /* Add spacing around the card */
    }
    
    .image-card {
        flex: 0 0 auto; /* Prevent shrinking */
        width: 150px; /* Fixed width for each card */
        background: white;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    
    .image-card img {
        width: 100%;
        height: auto;
        display: block;
    }
    
    /* Optional: Add scroll indicators */
    .scroll-indicator {
        text-align: center;
        margin-top: 10px;
        color: #999;
        font-size: 12px;
    }
    
    /* Optional: Add gradient fade on edges */
    .scroll-container-wrapper {
        position: relative;
    }
    
    .scroll-container-wrapper::before,
    .scroll-container-wrapper::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        width: 30px;
        z-index: 1;
        pointer-events: none;
    }
    
    .scroll-container-wrapper::before {
        left: 0;
        background: linear-gradient(to right, rgba(248,249,250,1) 0%, rgba(248,249,250,0) 100%);
    }
    
    .scroll-container-wrapper::after {
        right: 0;
        background: linear-gradient(to left, rgba(248,249,250,1) 0%, rgba(248,249,250,0) 100%);
    }
        .rules-content {
            font-size: 15px;
            color: #0C0C0C;
            width: 90%;
            margin:10px auto;
        }

        .rules-content p {
            margin: 10px 0;
        }

        .rules-content ul {
            padding-left: 20px;
        }

        .rules-content ul li {
            margin-bottom: 10px;
        }

        .tnp-content {
            font-size: 15px;
            color: #0C0C0C;
            width: 90%;
            margin:10px auto;
        }

        .tnp-content p {
            margin: 10px 0;
        }

        .nav-link > .notification-dot {
            display: inline-block;
            width: 8px;
            height: 8px;
            background-color: red;
            border-radius: 50%;
            margin-left: -5px;
            margin-top: -12px;
            vertical-align: middle;
        }

        .text-end .nav-link{
            display:inline;
        }

        
        .message-container {
            width: 90%;
            max-width: 400px;
            margin: 0 auto;
            overflow: hidden;
            padding:0px;
        }

        .message-container .header {
            font-size: 18px;
            font-weight: bold;
            color: #034A91;
            padding: 15px 0;
            background-color: #f8f9fa;
        }

        .message-container .message {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 10px;
            text-align: center;
        }

        .message-container .sub-message {
            font-size: 14px;
            color: #929292;
            text-align: center;
        }

        .message-container .icon {
            position: relative;
            text-align: center;
            margin-bottom: 20px;
        }

        
        .favorite_container {
            max-width: 800px;
            margin: 0 auto;
            padding: 0;
        }

        /* Card Section */
        .favorite_container .card {
            display: flex;
            flex-direction: row; /* Set row layout for two columns */
            margin-top: 15px;
            margin-bottom:60px;
            overflow: hidden;
            border: none;
            background-color: transparent;
        }

        .favorite_container .card .left-column {
            flex: 50%; /* Left column takes 45% width */
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .favorite_container .card img {
            width: 100%;
            height: auto;
            object-fit: contain;
        }

        .favorite_container .card-footer {
            width: 100%;
            text-align: left;
            font-size: 12px;
            color: #666;
            background-color: transparent;
            border-top: none;
        }

        .favorite_container .card-footer .rating {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 5px;
            margin-bottom: 5px;
        }

        .favorite_container .card-footer .rating .stars {
            color: #C19C5C;
            font-size: 22px;
            font-weight: 900;
        }

        .favorite_container .card-footer .rating .reviews {
            font-size: 12px;
            color: #000000;
        }

        .favorite_container .card-footer .product-id {
            font-size: 12px;
            color: #9F9F9F;
        }

        .favorite_container .card .right-column {
            flex: 50%; /* Right column takes 55% width */
            padding: 0 15px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            line-height:1;
        }

        .favorite_container .card-title {
            font-size: 15px;
            font-weight: 700;
            color: #000000;
            margin-bottom: 10px;
        }

        .favorite_container .card-subtitle {
            font-size: 11px;
            color: #000000;
            margin-top: 5px;
        }

        .favorite_container .highlight {
            font-size: 12px;
            font-weight: bold;
            color: #C19C5C;
            margin-bottom: 10px;
        }

        .favorite_container .card-text {
            font-size: 12px;
            color: #333;
            line-height: 1.5;
            margin-top:5px;
        }

        
        .payment-container {
            width: 90%;
            max-width: 400px;
            margin: 0 auto;
            overflow: hidden;
        }

        .payment-container .header {
            font-size: 18px;
            font-weight: bold;
            color: #034A91;
            margin-bottom: 15px;
            margin-top: 15px;
        }

        .payment-container .sub-header {
            font-size: 14px;
            font-weight: bold;
            color: #034A91;
            margin-bottom: 10px;
        }

        .payment-container a {
            text-decoration: none;
        }

        .payment-container .section {
            padding: 10px 20px;
            background-color: white;
            margin-bottom: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        }

        .payment-container .section-row-2 {
            display: flex;
            align-items: center; /* Vertically center all items */
        }

        .payment-container .section-row-3 {
            display: flex;
            align-items: center; /* Vertically center all items */
            padding: 15px 0;
        }

        .payment-container .section-row-2:not(:last-child) {
            border-bottom: 1px solid #F5F6FA;
        }

        .payment-container .section-row-2 img {
            width: 24px; /* Set a maximum height to keep the image scaled */
            margin-right: 10px; /* Add spacing between the image and text */
            display: block; /* Prevent extra space below the image */
            object-fit: contain; /* Ensure the original aspect ratio is preserved */
        }

        .payment-container .section-row-3 img {
            width: 24px; /* Set a maximum height to keep the image scaled */
            margin-right: 10px; /* Add spacing between the image and text */
            display: block; /* Prevent extra space below the image */
            object-fit: contain; /* Ensure the original aspect ratio is preserved */
        }

        .payment-container .setting-label {
            font-size: 14px;
            color: #000;
            line-height: 1.5;
        }

        .payment-container .setting-description {
            font-size: 12px;
            color: #929292;
            margin-top: 5px;
        }

        .payment-container .arrow {
            font-size: 16px;
            color: #ccc;
            margin-left: auto;
        }

        .payment-container .exist-card {
            color: #034A91;
            font-size: 14px;
            display: flex;
            align-items: center;
        }
        .payment-container .clickable-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            text-decoration: none; /* Remove underline */
            color: inherit; /* Inherit text color */
            width: 100%; /* Ensure the link spans the full width of the row */
            padding: 15px 0; /* Match the padding of the row */
        }
        
        .admin_referral_container {
            max-width: 800px;
            margin: 0 auto;
            padding: 0;
        }

        .no-providers-message{
            text-align: center;
            margin-top:15px;
        }

        .no-comment{
            text-align: center;
            margin-top:15px;
            margin-bottom:40px;
        }

        .no-result{
            text-align: center;
            margin-top:15px;
            margin-bottom:40px;
        }

        .no-discount{
            text-align: center;
            margin-top:15px;
        }

        .clinic-image-section img {
            width: 100%; /* Make all images responsive to their container */
            height: auto; /* Maintain the aspect ratio */
            max-height: 160px; /* Optional: Set a maximum height if needed */
            object-fit: cover; /* Optional: Crop the image to fit the container */
        }