@font-face {
    font-family: 'Bahij TheSansArabic';
    src: url('../../fonts/bahij-thesansarabic.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Salma';
    src: url('../../fonts/salma-black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --alawal-gold: #af6900;
    --alawal-gold-dark: #744500;
    --alawal-green: #346d50;
    --alawal-gray: #616264;
    --primary: var(--alawal-gold);
    --primary-color: var(--alawal-gold);
    --primary-light: var(--alawal-gold);
    --primary-dark: var(--alawal-gold-dark);
    --secondary-color: var(--alawal-green);
    --accent-color: var(--alawal-green);
    --text-light: var(--alawal-gray);
}

body,
.wrapper,
button,
input,
select,
textarea {
    font-family: 'Bahij TheSansArabic', 'Cairo', Arial, sans-serif !important;
}

h1, h2, h3, h4, h5, h6,
.page-title h4 {
    font-family: 'Salma', 'Bahij TheSansArabic', 'Cairo', Arial, sans-serif !important;
    font-weight: 900;
}

/* POTENZA and Bootstrap primary controls: brand-only replacements. */
a,
.theme-color,
.text-primary,
.pagination .page-item.active .page-link {
    color: var(--alawal-gold);
}

a:hover,
a:focus,
.theme-color:hover,
.text-primary:hover {
    color: var(--alawal-gold-dark);
}

.theme-bg,
.bg-theme,
.bg-primary,
.btn-primary,
.fc-event,
.fc-event-dot,
.wizard .steps .current a,
.wizard .actions a,
.pagination .page-item.active .page-link {
    background-color: var(--alawal-gold) !important;
    border-color: var(--alawal-gold) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show > .btn-primary.dropdown-toggle,
.wizard .steps .current a:hover,
.wizard .actions a:hover {
    background-color: var(--alawal-gold-dark) !important;
    border-color: var(--alawal-gold-dark) !important;
}

.bg-primary-overlay::before {
    background: rgba(175, 105, 0, .8) !important;
}

.form-control:focus,
.custom-select:focus,
.select2-container--default .select2-selection--single:focus {
    border-color: var(--alawal-green) !important;
    box-shadow: 0 0 0 .2rem rgba(52, 109, 80, .18) !important;
}

.side-menu-fixed .side-menu li.active > a,
.side-menu-fixed .side-menu li ul.collapse li.active a,
.side-menu-fixed .side-menu li a.active-page {
    border-right: 3px solid var(--alawal-gold);
    color: #fff;
}