:root {
    --wasla-navy: #0B1F3A;
    --wasla-navy-light: #13294B;
    --wasla-teal: #12A594;
    --wasla-teal-light: #E6F7F5;
    --wasla-gold: #D4A54A;
    --wasla-white: #FFFFFF;
    --wasla-gray: #F5F7FA;
    --wasla-text: #1A2233;
}

body {
    font-family: 'Cairo', sans-serif;
    background-color: var(--wasla-white);
    color: var(--wasla-text);
}

.wasla-navbar {
    background-color: var(--wasla-navy);
    padding: 0.9rem 0;
}

.wasla-logo {
    color: var(--wasla-white);
    font-weight: 800;
    font-size: 1.4rem;
    letter-spacing: 0.5px;
}

.wasla-logo-ar {
    color: var(--wasla-teal);
    font-weight: 700;
    font-size: 1.1rem;
}

.btn-wasla-gold {
    background-color: var(--wasla-gold);
    border-color: var(--wasla-gold);
    color: var(--wasla-navy);
    font-weight: 700;
}

.btn-wasla-gold:hover {
    background-color: #c2953f;
    color: var(--wasla-navy);
}

.btn-wasla-teal {
    background-color: var(--wasla-teal);
    border-color: var(--wasla-teal);
    color: var(--wasla-white);
    font-weight: 700;
}

.btn-wasla-teal:hover {
    background-color: #0e8b7c;
    color: var(--wasla-white);
    opacity: 0.95;
}

.hero-section {
    background: linear-gradient(135deg, var(--wasla-navy) 0%, var(--wasla-navy-light) 100%);
    color: var(--wasla-white);
    padding: 5rem 0;
}

.hero-badge {
    background-color: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 999px;
    padding: 0.35rem 1rem;
    font-size: 0.85rem;
    display: inline-block;
}

.feature-card {
    background-color: var(--wasla-white);
    border: 1px solid #E9ECEF;
    border-radius: 14px;
    padding: 1.75rem;
    height: 100%;
    transition: box-shadow 0.2s ease;
}

.feature-card:hover {
    box-shadow: 0 8px 24px rgba(11, 31, 58, 0.08);
}

.feature-icon-box {
    background-color: var(--wasla-teal-light);
    color: var(--wasla-teal);
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.step-number {
    background-color: var(--wasla-navy);
    color: var(--wasla-white);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.wasla-card {
    background-color: var(--wasla-white);
    border: 1px solid #E9ECEF;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(11, 31, 58, 0.06);
}

.wasla-section-title {
    font-weight: 800;
    color: var(--wasla-navy);
}

.wasla-footer {
    background-color: var(--wasla-gray);
    border-top: 1px solid #E9ECEF;
    margin-top: 3rem;
}

.wizard-step-pill {
    border-radius: 999px;
    padding: 0.4rem 1rem;
    font-weight: 700;
    font-size: 0.85rem;
}

.wizard-step-pill.active {
    background-color: var(--wasla-teal);
    color: var(--wasla-white);
}

.wizard-step-pill.inactive {
    background-color: var(--wasla-gray);
    color: #6C757D;
}

.form-label {
    font-weight: 600;
    color: var(--wasla-navy);
}