/* --- التنسيقات العامة --- */
body { 
    font-family: 'Cairo', sans-serif; 
    scroll-behavior: smooth; 
    padding-bottom: 80px; 
}

@media (min-width: 1024px) { 
    body { padding-bottom: 0; } 
}

/* --- الناف بار العلوي #f2f2f2 --- */
.custom-navbar { 
    background-color: #f2f2f2 !important; 
    border-bottom: 1px solid #e2e2e2; 
}

/* ظل علوي ذهبي عند الضغط */
.nav-item { transition: all 0.3s ease; }
.nav-item.active { 
    background-color: #000 !important; 
    color: #fff !important; 
    box-shadow: 0 -8px 15px rgba(224, 160, 56, 0.4); 
}

/* --- قائمة الموبايل المنسدلة --- */
@media (max-width: 1279px) {
    #nav-links {
        display: none; 
        flex-direction: column;
        position: absolute;
        top: 100%; 
        left: 0;
        right: 0;
        background-color: #f2f2f2;
        padding: 20px;
        border-bottom: 3px solid #e0a038;
        gap: 15px;
        text-align: center;
        box-shadow: 0 10px 15px rgba(0,0,0,0.1);
        z-index: 100;
    }
    #nav-links.show-menu { display: flex !important; }
    .nav-item { width: 100%; }
}

/* --- صناديق الخدمات التخصصية (25 خدمة) --- */
.service-card {
    transition: all 0.3s ease-in-out;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 100%;
}

.service-card:hover {
    background-color: #e0a038 !important;
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    cursor: pointer;
}

.service-card:hover h3, 
.service-card:hover p, 
.service-card:hover span {
    color: #000000 !important;
}

/* --- أرقام الهواتف - ذهبية بدون خط وبدون حركة --- */
.phone-link { 
    direction: ltr !important; 
    display: inline-flex; 
    align-items: center; 
    gap: 8px; 
    unicode-bidi: embed; 
    transition: color 0.3s ease;
}

.phone-link:hover { 
    color: #e0a038 !important; 
    text-decoration: none !important; 
}

/* --- الصور والرموز --- */
.responsive-about-img { 
    width: 100%; 
    height: auto; 
    object-fit: cover; 
    border-radius: 0.5rem;
}
@media (min-width: 1024px) { .responsive-about-img { height: 450px; } }

.quote-icon { position: absolute; top: 1rem; right: 1rem; font-size: 4rem; color: #e0a038; font-family: serif; opacity: 0.15; line-height: 1; }
#backToTop { display: none; position: fixed; bottom: 100px; left: 20px; z-index: 99; background-color: #e0a038; color: black; padding: 12px; border-radius: 50%; border: none; box-shadow: 0 4px 15px rgba(0,0,0,0.2); transition: 0.3s; }