/*--------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@100;200;300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&display=swap');

:root {
    --default-font: "IBM Plex Sans Arabic", sans-serif;
    --heading-font: "IBM Plex Sans Arabic", sans-serif;
    --nav-font: "IBM Plex Sans Arabic", sans-serif;
}

:root {
    --default-font: "IBM Plex Sans Arabic", sans-serif;
    --heading-font: "IBM Plex Sans Arabic", sans-serif;
    --nav-font: "IBM Plex Sans Arabic", sans-serif;
}

/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root {
    --background-color: #f1f5f4; /* Background color for the entire website, including individual sections */
    --default-color: #212529; /* Default color used for the majority of the text content across the entire website */
    --heading-color: #010101; /* Color for headings, subheadings and title throughout the website */
    --accent-color: #e7af00; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
    --black-color: #010101; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
    --surface-color: #ffffff; /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
    --contrast-color: #ffffff; /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
}

/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
    --nav-color: rgba(255, 255, 255, 0.9); /* The default color of the main navmenu links */
    --nav-hover-color: #e7af00; /* Applied to main navmenu links when they are hovered over or active */
    --nav-mobile-background-color: #ffffff; /* Used as the background color for mobile navigation menu */
    --nav-dropdown-background-color: #ffffff; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
    --nav-dropdown-color: #212529; /* Used for navigation links of the dropdown items in the navigation menu. */
    --nav-dropdown-hover-color: #e7af00; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}

.btn-view-all {
    display: inline-block;
    padding: 0.75rem 2rem;
    background-color: var(--accent-color);
    color: var(--contrast-color);
    border-radius: 50px;
    font-weight: 600;
    transition: all 0.3s;
}
.btn-view-all.logout {
    background-color: red;
    color:white!important;
    transition: all 0.3s;
}
.btn-view-all.logout:hover {
     background-color: color-mix(in srgb, red, transparent 5%);
      color:white!important;
    transform: translateY(-3px);
}

.btn-view-all:hover {
    background-color: color-mix(in srgb, var(--accent-color), transparent 0%);
    transform: translateY(-3px);
}
.navmenu li:hover > a.btn-view-all{
    color:white;
}
.navmenu a i, .navmenu a:focus i {
    margin-right: 5px;
}
.dropdown.text-primary > a {
    color: var(--accent-color) !important;
    padding: 7px 10px 7px 10px !important;
    border: 1px solid;
    border-radius: 6px;
}
.about .signature-block {
    border-top: 0px solid color-mix(in srgb, var(--default-color), transparent 85%);
    border-bottom: 0px solid color-mix(in srgb, var(--default-color), transparent 85%);
    padding-bottom: 1.5rem;
    margin-bottom: 2rem;
}
.about .image-stack .image-stack-item-bottom {
    bottom: 0px;
}

.about .image-stack .image-stack-item {
    width: 75%;
}
.section-title h2:before {
    margin: 0 0 10px 15px;
}
.section-title h2:after {
    margin: 0 15px 10px 0;
}
.events .event-card .event-content h3 {
    font-size: 1.1rem;
}
.events .event-card .event-date .day {
    font-size: 1.5rem;
}
.bi-zoom-in::before {
    font-weight:700 !important;
}
.admissions .admissions-steps .steps-wrapper:before {
    right: 19px;
}
.admissions .admissions-steps .step-item .step-number {
    margin-right: 0rem;
    margin-left: 1.5rem;
}
.hero .hero-container .stats-card .stats-grid .stat-item .stat-icon {
    font-size: 1.25rem;
    height: 45px;
    width: 45px;
}
.hero .hero-container .stats-card .stats-grid {
    gap: 10px;
}
.navmenu a, .navmenu a:focus {
    font-weight: 500;
}
table.dataTable thead th, table.dataTable thead td, table.dataTable tfoot th, table.dataTable tfoot td {
    text-align: right!important;
}
table.dataTable thead > tr > th.sorting:before, table.dataTable thead > tr > th.sorting:after, table.dataTable thead > tr > th.sorting_asc:before, table.dataTable thead > tr > th.sorting_asc:after, table.dataTable thead > tr > th.sorting_desc:before, table.dataTable thead > tr > th.sorting_desc:after, table.dataTable thead > tr > th.sorting_asc_disabled:before, table.dataTable thead > tr > th.sorting_asc_disabled:after, table.dataTable thead > tr > th.sorting_desc_disabled:before, table.dataTable thead > tr > th.sorting_desc_disabled:after, table.dataTable thead > tr > td.sorting:before, table.dataTable thead > tr > td.sorting:after, table.dataTable thead > tr > td.sorting_asc:before, table.dataTable thead > tr > td.sorting_asc:after, table.dataTable thead > tr > td.sorting_desc:before, table.dataTable thead > tr > td.sorting_desc:after, table.dataTable thead > tr > td.sorting_asc_disabled:before, table.dataTable thead > tr > td.sorting_asc_disabled:after, table.dataTable thead > tr > td.sorting_desc_disabled:before, table.dataTable thead > tr > td.sorting_desc_disabled:after {
    right: auto!important;
    left: 10px!important;
}
div.dataTables_wrapper div.dataTables_filter {
    text-align: left!important;
}
<style >
/* General pagination link */
.dataTables_wrapper .dataTables_paginate .page-link {
    color: #856404;
    border: 1px solid #e49c12;
}
.page-link {
    color: #e49c12;
}
    .dataTables_wrapper .dataTables_paginate .page-link:hover {
    background-color: #fff3cd; 
    color: #856404;
}

.dataTables_wrapper .dataTables_paginate .page-item.active .page-link {
    background-color: #e49c12; /* warning background */
    color: #fff; /* dark text */
    border-color: #e49c12;
}

.dataTables_wrapper .dataTables_paginate .page-link:focus {
    box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5);
}

/*--------------------------------*/
body {
    font-family: "cairo", sans-serif !important;
}

.pointer:hover{
    cursor:pointer!important;
}
.rounded-start-0 {
    border-bottom-left-radius: 0px;
    border-top-left-radius: 0px;
}

.rounded-end-0 {
    border-bottom-right-radius: 0px;
    border-top-right-radius: 0px;
}

.text-right {
    text-align: right !important;
}
.text-justify {
    text-align: justify!important;
}
.fs-small {
    font-size: small !important;
}

.col-form-label {
    font-weight: 600;
}

.text-light-success {
    color: #2ec98a !important;
}

.text-light-danger {
    color: #e85347 !important;
}

.w-5 {
    width: 5% !important;
}

.w-10 {
    width: 10% !important;
}

.w-15 {
    width: 15% !important;
}

.w-20 {
    width: 20% !important;
}

.w-30 {
    width: 30% !important;
}

.w-35 {
    width: 35% !important;
}

.w-40 {
    width: 40% !important;
}

.w-45 {
    width: 45% !important;
}

.w-55 {
    width: 55% !important;
}

.w-60 {
    width: 60% !important;
}

.w-65 {
    width: 65% !important;
}

.w-70 {
    width: 70% !important;
}

.w-80 {
    width: 80% !important;
}

.w-85 {
    width: 85% !important;
}

.w-90 {
    width: 90% !important;
}

.w-95 {
    width: 95% !important;
}

.fw-black {
    font-weight: 800 !important;
}