:root { --al-blue:        #2E3192;
--al-blue2:       #0B2E83;
--al-blue-light:  #EAF2FF;
--al-green:       #0E9F43;
--al-green-light: #EAFBF0;
--al-red:         #D6083B;
--al-gold:        #F6B51E;
--al-orange:      #F97316;
--al-purple:      #7C3AED; --al-bg:          #F6F8FC;
--al-card:        #FFFFFF;
--al-text:        #101828;
--al-text-soft:   #344054;
--al-muted:       #667085;
--al-line:        #E4E9F2;
--al-soft:        #F2F5FB;
--al-soft-blue:   #F8FBFF; --al-radius:      18px;
--al-radius-sm:   12px;
--al-shadow:      0 8px 22px rgba(16, 24, 40, 0.06);
--al-shadow-hover: 0 12px 28px rgba(16, 24, 40, 0.10);
--al-transition:  0.18s ease; --al-font:        'Tajawal', Arial, sans-serif;
} *,
*::before,
*::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
background: var(--al-bg);
color: var(--al-text);
font-family: var(--al-font);
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
a {
text-decoration: none;
color: inherit;
}
img {
max-width: 100%;
display: block;
height: auto;
}
button,
input,
textarea,
select {
font-family: inherit;
} .al-container {
width: min(1560px, calc(100% - 36px));
margin-inline: auto;
}
.al-page {
max-width: 1920px;
margin: auto;
}
.al-card {
background: var(--al-card);
border: 1px solid var(--al-line);
border-radius: var(--al-radius);
box-shadow: var(--al-shadow);
}
.al-pad {
padding: 20px;
}
.al-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
border: 0;
border-radius: var(--al-radius-sm);
padding: 12px 18px;
font-weight: 800;
font-family: inherit;
cursor: pointer;
transition: var(--al-transition);
line-height: 1;
}
.al-btn--primary {
background: var(--al-blue2);
color: #fff;
}
.al-btn--secondary {
background: #fff;
color: var(--al-blue2);
border: 1px solid #B8C5DD;
}
.al-btn--success {
background: var(--al-green);
color: #fff;
}
.al-btn--danger {
background: var(--al-red);
color: #fff;
}
.al-btn--block {
width: 100%;
text-align: center;
}
.al-sr-only {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
} @media (max-width: 980px) {
.al-container {
width: min(100% - 24px, 680px);
}
}
@media (max-width: 600px) {
.al-container {
width: min(100% - 16px, 520px);
}
.al-pad {
padding: 16px;
}
}