/* Fonts */
:root {
    --default-font: "Amiri", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --heading-font: "Amiri", sans-serif;
    --nav-font: "Amiri", sans-serif;
}

/* Global Colors - Trend 2026: Calm Cloud White + Transformative Teal + Rich Plum/Burgundy */
:root {
    --background-color: #fdfdfd;     /* Cloud Dancer-inspired soft white/crème for serenity */
    --default-color: #4a3c38;        /* Earthy deep brown for text readability */
    --heading-color: #3a2e3f;        /* Deep plum/burgundy for sophisticated headings */
    --accent-color: #0d9488;         /* Transformative Teal - calming yet vibrant accent */
    --surface-color: #ffffff;        /* Pure white cards for clean separation */
    --contrast-color: #ffffff;       /* White text on dark/accent backgrounds */
}

/* Nav Menu Colors */
:root {
    --nav-color: #4a3c38;
    --nav-hover-color: #0d9488;      /* Teal on hover for modern pop */
    --nav-mobile-background-color: #fdfdfd;
    --nav-dropdown-background-color: #ffffff;
    --nav-dropdown-color: #4a3c38;
    --nav-dropdown-hover-color: #0d9488;
}

/* Color Presets */
.light-background {
    --background-color: #fdfdfd;
    --surface-color: #ffffff;
}
.dark-background {
    --background-color: #2d1f2b;     /* Deep moody plum-brown */
    --default-color: #fdfdfd;
    --heading-color: #ffffff;
    --accent-color: #0d9488;
    --surface-color: #3e2d3a;
    --contrast-color: #ffffff;
}

/* Smooth scroll */
:root {
    scroll-behavior: smooth;
}

/*--------------------------------------------------------------
# General Styling & Shared Classes
--------------------------------------------------------------*/
body {
    color: var(--default-color);
    background-color: var(--background-color);
    font-family: var(--default-font);
    direction: ltr; /* Default LTR - غيّر إلى rtl للعربية ديناميكيًا */
    text-align: left;
}

/* للعربية: أضف class أو PHP لتغيير الـ direction */
html[lang="ar"] body,
body.rtl {
    direction: rtl;
    text-align: right;
}

a {
    color: var(--accent-color);
    text-decoration: none;
    transition: 0.3s;
}
a:hover {
    color: color-mix(in srgb, var(--accent-color), transparent 20%);
    text-decoration: none;
}
h1, h2, h3, h4, h5, h6 {
    color: var(--heading-color);
    font-family: var(--heading-font);
}

/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {
    background-color: var(--accent-color);
}
.scroll-top i {
    color: var(--contrast-color);
}
.scroll-top:hover {
    background-color: color-mix(in srgb, var(--accent-color), transparent 15%);
}

/*--------------------------------------------------------------
# Global Page Titles & Breadcrumbs
--------------------------------------------------------------*/
.page-title {
    color: var(--default-color);
    background-color: var(--background-color);
}

/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/
section, .section {
    color: var(--default-color);
    background-color: var(--background-color);
}

/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/
.section-title h2 {
    color: var(--accent-color);
}

/*--------------------------------------------------------------
# Services Section Updates
--------------------------------------------------------------*/
.services .content .service-item {
    background-color: var(--surface-color);
    border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
    border-left: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
}
.services .content .service-item .service-item-icon {
    color: var(--accent-color);
}
.services .content .service-item .service-item-icon:before {
    border-right: 40px solid var(--accent-color);
}

/*--------------------------------------------------------------
# Services 2 Section
--------------------------------------------------------------*/
.services-2 .service-item:before {
    background-color: color-mix(in srgb, var(--background-color), transparent 40%);
}
.services-2 .navigation-prev,
.services-2 .navigation-next {
    background: var(--contrast-color);
}
.services-2 .navigation-prev:hover,
.services-2 .navigation-next:hover {
    background-color: var(--accent-color);
}
.services-2 .swiper-pagination .swiper-pagination-bullet-active {
    background-color: var(--accent-color) !important;
}

/*--------------------------------------------------------------
# About 3 Section
--------------------------------------------------------------*/
.about-3 .btn-cta {
    background: linear-gradient(135deg, #0d9488, #3a2e3f); /* Teal to Plum gradient */
}
.list-group-item {
    background: linear-gradient(135deg, #0d9488, #3a2e3f);
}