.title-section-container {
        position: relative;
        padding-bottom: 0 !important;
    }

    /* الشريط المتدرج */
    .gradient-bar {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 5px;
        background: linear-gradient(to left,
                #072C49,
                #9DDAE5,
                #007497,
                #ECE6DD,
                #DEA470,
                #E9937D);
    }

.service-card {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    text-align: right;
    height: 100%; /* Ensure all cards have the sam
    e height */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* This aligns elements like the title and icon to the right side of the card */
    text-align: right;
}

/* Header/Icon Section */
.card-header {
    margin-bottom: 15px;
}

.icon-placeholder {
    width: 35px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #e6f1ec; /* Light green background */
    color: var(--dark-green); /* Green icon color */
    border-radius: 6px;
    padding: 5px;
}

.icon-placeholder svg {
    width: 20px;
    height: 20px;
}

/* Title */
.card-title {
    font-size: 1.15rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
}

/* Description */
.card-description {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.5;
    /* Ensure the description takes up available space before the rating/button */
    flex-grow: 1; 
    margin-bottom: 15px;
}

/* Category Tag */
.card-tag {
    font-size: 0.75rem;
    color: #007bff;
    background-color: #eaf3ff;
    padding: 4px 8px;
    border-radius: 4px;
    margin-bottom: 15px;
    align-self: flex-start; /* Align tag to the right (visually, left in RTL) */
}

/* Rating Section */
.card-rating-section {
    display: flex;
    align-items: center;
    /* Use a spacer to push the button to the bottom */
    margin-top: auto; 
    padding-top: 10px; /* Separator from content above */
    width: 100%;
    /* Align rating count to the right and stars to the left */
    justify-content: space-between; 
    
}

.rating-count {
    font-size: 0.8rem;
    color: #999;
}

/* Star Rating Styling - The core trick! */
.stars {
    font-size: 1.2rem;
    position: relative;
    display: inline-block;
    color: #e0e0e0; /* Default color for unrated stars */
    white-space: nowrap;
}

.stars .star {
    /* Create a subtle outline for unrated stars */
    text-shadow: 0 0 1px #999; 
    margin-left: 2px;
}

/* Styles for different rating levels */
/* Full Stars (for example: card 2) */
.stars.full {
    color: #FFC107; /* Gold color for full stars */
}
.stars.full .star {
    text-shadow: none;
}

/* Partial/Empty Stars (for example: card 1) */
.stars.empty {
    color: #e0e0e0; 
}
.stars.empty .star {
    color: #e0e0e0;
}

/* Rating with 3 stars (for example: card 3) */
.stars.partial-3 {
    /* Target the first three stars to be gold */
    color: #FFC107; 
}
.stars.partial-3 .star:nth-child(n+4) {
    /* Target stars 4 and 5 to be grey/outline only */
    color: #e0e0e0;
    text-shadow: 0 0 1px #999;
}

/* Rating with 4 stars (for example: card 4) */
.stars.partial-4 {
    /* Target the first four stars to be gold */
    color: #FFC107; 
}
.stars.partial-4 .star:nth-child(n+5) {
    /* Target star 5 to be grey/outline only */
    color: #e0e0e0;
    text-shadow: 0 0 1px #999;
}


/* Details Button */
.details-button {
    padding: 10px;
    background-color: var(--dark-green); /* Green background color */
    color: white;
    border: none;
    border-radius: 6px;
    font-size: .9rem;
    font-weight: 400;
    cursor: pointer;
    margin-top: 15px; /* Separate button from rating section */
    transition: background-color 0.3s ease;
}