/* Explain: Styles for the "About Us" page, defining a unique navy and gold color scheme. */
/* ------------------------------------------------------------------
   "من نحن" (About Us) page — a distinct institutional identity
   (deep navy + gold) scoped to the .about-theme wrapper applied to
   <body>, so header, sections and footer all adopt this palette.
   ------------------------------------------------------------------ */

.about-theme {
    --primary-color: #26355e;
    --primary-hover: #1b2848;
    --primary-light: #e7eaf6;
    --secondary-color: #3b4a78;
    --accent-color: #b5892f;
    --accent-light: #f7efd9;
    --background-color: #f6f5fa;
    --surface-color: #eceef6;
    --surface-strong: #dcdfef;
    --text-color: #1f2540;
    --text-muted: #6a6f88;
    --border-color: #d6d9e8;
    --on-primary: #ffffff;
    --on-dark: #ffffff;
    --on-dark-soft: rgba(255, 255, 255, 0.72);
    --on-dark-veil: rgba(255, 255, 255, 0.18);
    --scrim-rgb: 20, 26, 48;
    --accent-gold: #e2c273;
    --accent-contrast: #232c47;
    background: var(--background-color);
}

/* ---- Hero ---- */
.about-hero-glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 12% 15%, rgba(181, 137, 47, 0.38), transparent 44%),
        radial-gradient(circle at 88% 10%, rgba(122, 146, 214, 0.38), transparent 48%);
}

/* ---- Labels ---- */
.about-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    background: var(--primary-light);
    color: var(--primary-color);
    font-size: 0.8rem;
    font-weight: 700;
}

.about-eyebrow--light {
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: var(--on-dark);
}

/* ---- Hero buttons ---- */
.about-btn-gold {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.8rem 1.5rem;
    border-radius: 999px;
    background: var(--accent-gold);
    border: 1px solid var(--accent-gold);
    color: var(--accent-contrast);
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.25s ease;
}

.about-btn-gold:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-soft);
}

.about-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.8rem 1.5rem;
    border-radius: 999px;
    background: transparent;
    border: 1.5px solid var(--on-dark-soft);
    color: var(--on-dark);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.25s ease;
}

.about-btn-ghost:hover {
    background: var(--on-dark-veil);
}

/* ---- Hero stat marks ---- */
.about-mark {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1.1rem 1.2rem;
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(6px);
    color: var(--on-dark);
}

.about-mark i {
    color: var(--accent-light);
    font-size: 1.1rem;
}

.about-mark-value {
    font-family: var(--font-heading);
    font-size: 1.7rem;
    font-weight: 800;
    line-height: 1.2;
}

.about-mark-label {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.82);
}

/* ---- Story prose ---- */
.about-prose {
    display: grid;
    gap: 1rem;
    font-size: 1.02rem;
    line-height: 2;
    color: var(--text-color);
}

/* ---- Timeline ---- */
.about-timeline {
    display: grid;
    gap: 0.85rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.about-timeline-item {
    display: flex;
    gap: 0.9rem;
    padding: 0.9rem 1rem;
    background: var(--background-color);
    border: 1px solid var(--border-color);
    border-inline-start: 4px solid var(--accent-color);
    border-radius: var(--radius-sm);
}

.about-timeline-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    flex: none;
    border-radius: 999px;
    background: var(--primary-light);
    color: var(--primary-color);
}

.about-timeline-body {
    min-width: 0;
}

.about-timeline-year {
    display: inline-block;
    font-family: var(--font-heading);
    font-weight: 800;
    color: var(--accent-color);
}

.about-timeline-title {
    margin-top: 0.15rem;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text-color);
}

.about-timeline-desc {
    margin-top: 0.3rem;
    font-size: 0.9rem;
    line-height: 1.75;
    color: var(--text-muted);
}

/* ---- Feature cards ---- */
.about-feature {
    height: 100%;
    padding: 1.5rem;
    background: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    transition: all 0.25s ease;
}

.about-feature:hover {
    transform: translateY(-3px);
    border-color: var(--primary-color);
    box-shadow: var(--shadow-soft);
}

.about-feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 1rem;
    background: var(--primary-light);
    color: var(--primary-color);
    font-size: 1.15rem;
}

.about-feature-title {
    margin-top: 0.9rem;
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--text-color);
}

.about-feature-desc {
    margin-top: 0.4rem;
    font-size: 0.92rem;
    line-height: 1.8;
    color: var(--text-muted);
}

/* ---- Team card ---- */
.about-team-card {
    position: relative;
    overflow: hidden;
    padding: 2.5rem 2rem;
    border-radius: var(--radius-xl);
    background:
        radial-gradient(circle at 85% 15%, rgba(181, 137, 47, 0.35), transparent 45%),
        linear-gradient(150deg, var(--secondary-color) 0%, var(--primary-color) 100%);
    box-shadow: var(--shadow-strong);
    color: var(--on-dark);
}