.hero-container {
    position: relative;
    overflow: hidden;
    height: 400px; /* Fixed height for both gradient and image */
}

.hero-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #0056b3 0%, #0056b3 50%, rgba(0, 86, 179, 0) 100%);
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    height: 100%;
}

.hero-image {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 50%;
    object-fit: cover;
    mask-image: linear-gradient(to left, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
    -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
}

@media (max-width: 768px) {
    .hero-container {
        height: auto;
        min-height: 500px;
    }
    .hero-gradient {
        background: linear-gradient(180deg, #3b82f6 0%, #3b82f6 60%, rgba(59, 130, 246, 0) 100%);
    }
    .hero-image {
        width: 100%;
        height: 40%;
        top: auto;
        bottom: 0;
        mask-image: linear-gradient(to top, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%);
        -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%);
    }
}



        .sidebar {
            transition: all 0.3s;
            position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            width: 280px;
            overflow-y: auto;
        }
        .card-hover:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
        }
        .active-nav-item {
            background-color: #e6f2ff;
            border-left: 4px solid #0056b3;
            color: #0056b3;
        }
        .health-metric {
            background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
        }


         .dropdown:hover .dropdown-menu {
            display: block;
        }
        .user-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }
        .badge-patient {
            background-color: #DBEAFE;
            color: #1E40AF;
        }
        .badge-professional {
            background-color: #D1FAE5;
            color: #065F46;
        }
        .badge-organization {
            background-color: #E0E7FF;
            color: #4338CA;
        }


        /* Hide sidebar by default on mobile */
        @media (max-width: 768px) {
            #messageSidebar {
                transform: translateX(-100%);
                position: absolute;
                z-index: 20;
                width: 80%;
                height: 100%;
                transition: transform 0.3s ease;
            }
            #messageSidebar.active {
                transform: translateX(0);
            }
            #overlay {
                display: none;
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: rgba(0,0,0,0.5);
                z-index: 10;
            }
            #overlay.active {
                display: block;
            }
        }


        .card-hover:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 25px -5px rgba(0, 84, 179, 0.1);
        }
        .active-nav-item {
            background-color: #e6f2ff;
            border-left: 4px solid #0056b3;
            color: #0056b3;
        }
        .availability-dot {
            width: 10px;
            height: 10px;
            display: inline-block;
            border-radius: 50%;
            margin-right: 6px;
        }
        .stat-card {
            border-top: 4px solid;
        }
        .smooth-transition {
            transition: all 0.3s ease;
        }
        .tab-active {
            border-bottom: 3px solid #0056b3;
            color: #0056b3;
            font-weight: 600;
        }

         .connection-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        }
        .status-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }


         .time-slot {
            transition: all 0.2s ease;
        }
        .time-slot:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }
        .calendar-day.active {
            background-color: #3b82f6;
            color: white;
        }
        .appointment-card {
            transition: all 0.3s ease;
        }
        .appointment-card:hover {
            transform: translateX(5px);
        }
        .status-badge {
            font-size: 0.75rem;
            padding: 0.25rem 0.5rem;
            border-radius: 9999px;
        }
        .status-pending {
            background-color: #fef3c7;
            color: #92400e;
        }
        .status-confirmed {
            background-color: #d1fae5;
            color: #065f46;
        }
        .status-cancelled {
            background-color: #fee2e2;
            color: #991b1b;
        }
        .wave-bg {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%233b82f6' fill-opacity='0.1' d='M0,192L48,197.3C96,203,192,213,288,229.3C384,245,480,267,576,250.7C672,235,768,181,864,181.3C960,181,1056,235,1152,234.7C1248,235,1344,181,1392,154.7L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: bottom;
            background-size: cover;
        }



        .star-rating label {
            cursor: pointer;
            transition: all 0.2s ease;
        }
        .star-rating input:checked ~ label {
            color: #ddd;
        }
        .star-rating label:hover,
        .star-rating label:hover ~ label,
        .star-rating input:checked + label {
            color: #f6ad55;
        }

        .rated {
            color: #f6ad55;
        }


        .autocomplete-input {
            width: 100%;
            padding: 14px 45px 14px 15px;
            border: 2px solid #e2e8f0;
            border-radius: 10px;
            font-size: 16px;
            transition: border-color 0.3s, box-shadow 0.3s;
        }
        
        .autocomplete-input:focus {
            outline: none;
            border-color: #4299e1;
            box-shadow: 0 0 0 4px rgba(66, 153, 225, 0.15);
        }
        
        .search-icon {
            position: absolute;
            right: 15px;
            top: 42px;
            color: #a0aec0;
        }
        
        .suggestions-container {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background: white;
            border-radius: 10px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            max-height: 300px;
            overflow-y: auto;
            z-index: 1000;
            display: none;
            margin-top: 5px;
        }
        
        .suggestion-item {
            padding: 12px 15px;
            cursor: pointer;
            border-bottom: 1px solid #f1f1f1;
            display: flex;
            align-items: center;
            transition: background-color 0.2s;
        }
        
        .suggestion-item:last-child {
            border-bottom: none;
        }
        
        .suggestion-item:hover {
            background-color: #f7fafc;
        }
        
        .suggestion-icon {
            margin-right: 10px;
            color: #4299e1;
        }
        
        .highlight {
            background-color: #ebf8ff;
            padding: 0 2px;
            font-weight: 600;
        }



         .checkbox-container:checked + .checkmark {
            background-color: #3B82F6;
            border-color: #3B82F6;
        }
        
        .checkbox-container:checked + .checkmark:after {
            display: block;
        }
        
        .checkmark:after {
            content: "✓";
            position: absolute;
            color: white;
            font-size: 12px;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        
        .selected-item {
            transition: all 0.2s ease;
        }
        
        .selected-item:hover {
            transform: scale(1.05);
        }