.service-header-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-main); 
}

.provider-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border);
}

.sticky-sidebar {
    position: sticky;
    top: 90px;
}

.price-card {
    border: 1px solid var(--border);
    border-radius: var(--bs-border-radius); 
    box-shadow: var(--bs-box-shadow); 
}

.price-tag {
    font-size: 2rem;
    font-weight: 800;
    color: var(--bs-primary);
}

.action-btn {
    width: 100%;
    font-weight: bold;
    padding: 12px;
    border-radius: 99px; 
    transition: var(--transition);
}

.service-image {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: var(--bs-border-radius);
    margin-bottom: 20px;
    background-color: var(--bs-light-bg);
}

.content-area img {
    max-width: 100%;
    border-radius: var(--bs-border-radius-sm);
}

.guarantee-box {
    background: var(--bs-primary-soft);
    border: 1px dashed var(--bs-primary);
    border-radius: var(--bs-border-radius);
    padding: 15px;
}
/* Star Rating System */
.star-rating {
    display: inline-flex;
    flex-direction: row-reverse; /* Reverses the order so 1 is on the left, 5 is on the right */
    justify-content: flex-end;
}

    /* Hide the actual radio buttons */
    .star-rating input[type="radio"] {
        display: none;
    }

    /* Style the FontAwesome icons */
    .star-rating label {
        cursor: pointer;
        color: #e4e5e9; /* Light gray for empty stars */
        font-size: 28px;
        padding: 0 4px;
        transition: color 0.2s ease-in-out;
    }

    /* Highlight stars when checked */
    .star-rating input[type="radio"]:checked ~ label {
        color: #ffc107; /* Bootstrap warning color (yellow/gold) */
    }

    /* Highlight stars on hover */
    .star-rating label:hover,
    .star-rating label:hover ~ label {
        color: #ffca28; /* Slightly lighter yellow on hover */
    }

@keyframes popIn {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.animate-pop {
    animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}