:root {
    /* Main Backgrounds (Light Blue alternatives) */
    --ebserv10-bg-section: #eef2f9;
    --ebserv10-bg-card-default: #dfe7f3;
    --ebserv10-bg-card-hover: #00045F;
    /* Replaced dark green with Navy Blue */

    /* Icon Wrapper Colors */
    --ebserv10-bg-icon-circle: #ffffff;
    --ebserv10-border-icon-circle: #E83A15;
    /* Replaced default red with specific requested color */

    /* Text Colors */
    --ebserv10-text-main-title: #00045F;
    --ebserv10-text-main-subtitle: #4a5568;

    --ebserv10-text-card-title-default: #000000;
    --ebserv10-text-card-title-hover: #ffffff;

    --ebserv10-text-card-desc-default: #4a5568;
    --ebserv10-text-card-desc-hover: #e2e8f0;

    --ebserv10-text-link-hover: #ffffff;
}

/* Base Reset for exact match positioning */
* {
    box-sizing: border-box;
}

.ebserv10-services-section {
    background-color: var(--ebserv10-bg-section);
    padding: 60px 20px;
    /* Bounding padding ONLY */
    display: flex;
    justify-content: center;
    direction: rtl;
    /* Arabic text direction */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.ebserv10-container {
    width: 100%;
    max-width: 1200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
    /* Replaces spacing between header and grid */
}

/* --- Header Section --- */
.ebserv10-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 15px;
    /* Replaces margins inside header */
    max-width: 800px;
}

.ebserv10-main-title {
    color: var(--ebserv10-text-main-title);
    font-size: clamp(24px, 5vw, 40px);
    font-weight: bold;
    margin: 0;
    /* Reset */
    padding: 0;
}

.ebserv10-main-subtitle {
    color: var(--ebserv10-text-main-subtitle);
    font-size: clamp(14px, 2.5vw, 16px);
    line-height: 1.6;
    margin: 0;
    /* Reset */
    padding: 0;
}

/* --- Cards Grid --- */
.ebserv10-cards-grid {
    display: flex;
    flex-direction: column;
    /* Mobile First */
    width: 100%;
    gap: 20px;
    /* Replaces card margins */
}

/* --- Individual Card --- */
.ebserv10-card {
    background-color: var(--ebserv10-bg-card-default);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px 20px;
    gap: 15px;
    /* Replaces margins for title and description inside card */
    transition: background-color 0.3s ease;
}

/* Hover and Active states */
.ebserv10-card:hover,
.ebserv10-card-active {
    background-color: var(--ebserv10-bg-card-hover);
}

.ebserv10-icon {
    width: 100%;
    height: 100%;
    object-fit: cover;
    width: 150px;
    height: 150px;
    margin-bottom: 30px;
}

/* Card Title */
.ebserv10-card-title {
    color: var(--ebserv10-text-card-title-default);
    font-size: clamp(18px, 4vw, 22px);
    font-weight: 700;
    margin: 0;
    /* Reset */
    padding: 0;
    transition: color 0.3s ease;
}

.ebserv10-card:hover .ebserv10-card-title,
.ebserv10-card-active .ebserv10-card-title {
    color: var(--ebserv10-text-card-title-hover);
}

/* Card Description */
.ebserv10-card-desc {
    color: var(--ebserv10-text-card-desc-default);
    font-size: clamp(18px, 3vw, 19px);
    line-height: 1.6;
    margin: 0;
    /* Reset */
    padding: 0;
    transition: color 0.3s ease;
}

.ebserv10-card:hover .ebserv10-card-desc,
.ebserv10-card-active .ebserv10-card-desc {
    color: var(--ebserv10-text-card-desc-hover);
}

/* Read More Link */
.ebserv10-read-more {
    display: flex;
    /* Hidden by default */
    color: var(--ebserv10-text-main-title);
    font-size: clamp(18px, 2.5vw, 19px);
    text-decoration: none;
    font-weight: bold;
    align-items: center;
    gap: 8px;
    /* Gap between text and arrow */
    margin-top: auto;
    /* Pushes the link to the bottom if content length varies */
}

.ebserv10-card:hover .ebserv10-read-more,
.ebserv10-card-active .ebserv10-read-more {
    display: flex;
    /* Visible on hover */
}

/* --- Desktop & Tablet Media Queries --- */
@media (min-width: 768px) {
    .ebserv10-cards-grid {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .ebserv10-read-more {
        display: none;
        color: var(--ebserv10-text-link-hover);
    }

    .ebserv10-card {
        /* Width calculation: 100% / 4 columns - gap adjustment */
        width: calc((100% - 60px) / 4);
        min-width: 250px;
        /* To maintain structure on smaller tablets */
    }
}