:root {
    --background: #FFFCFF;
    --background-dark: #00313E;
    --sec-background: #F7F7FD;
    --primary: #006A86;
    --primary-light: rgba(231,185,0,20%);
    --primary-hover: #006A86;
    --secondary: #00313E;
    --text-primary: #0E0944;
    --text-secondary: #616161;
    --text-dark: #24242C;
    --text-light: #FBFBFF;
    --text-danger: #E12529;
    --gray: #BDBDBD;
    --gray-dark: #777777;
    --gray-light: #f3f3f3;
    --white: #FFFFFF;
}

body {
    background: var(--background);
    font-family: 'Almarai', sans-serif !important;
}

.form-group {
    width: 100%;
    padding-bottom: 1rem;
}

.form-group .form-label {
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.form-group .form-control {
    width: 100%;
    padding: 1rem;
    box-shadow: 0 4px 20px 0 #85BC4126;
    border: 1px solid var(--gray);
    font-size: 14px;
    border-radius: 14px;
}

select.form-control {
    cursor: pointer;
}
.MsoNormal, .MsoNormal span {
    font-family:'Almarai' !important;
}
.form-group .form-control::placeholder {
    color: var(--gray);
    font-size: 14px;
    text-align: left;
}

.form-group .form-control.form-error {
    border: 1px solid var(--text-danger) !important;
    box-shadow: 0 4px 20px 0 #E1252940 !important;
}

.form-group .text-error {
    font-size: 14px;
    color: var(--text-danger);
    padding-top: 0.5rem;
}

.main-btn {
    background: var(--primary);
    color: var(--text-light);
    box-shadow: 0 0 12px 0 #0000001F;
    padding: 1rem;
    font-size: 14px;
    border-radius: 14px;
}

.main-btn svg {
    rotate: 180deg;
}

.main-btn:hover, .main-btn:focus, .main-btn:active, .main-btn:disabled {
    background: var(--primary-hover) !important;
    color: var(--text-light) !important;
}

.main-light-btn {
    background: var(--text-light);
    color: var(--primary);
    box-shadow: 0 0 12px 0 #0000001F;
    padding: 1rem;
    font-size: 14px;
    border-radius: 14px;
}

.main-light-btn:hover, .main-light-btn:focus, .main-light-btn:active, .main-light-btn:disabled {
    background: var(--gray-light) !important;
    color: var(--primary);
}

.main-link {
    color: var(--primary);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.main-link:hover, .main-link:focus, .main-link:active {
    color: var(--primary-hover) !important;
}

.secondary-link {
    color: var(--gray);
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
}

.secondary-link:hover, .secondary-link:focus, .secondary-link:active {
    color: var(--text-secondary);
}

.p-main {
    padding: 3rem 0;
}

.side-img-container {
    display: flex;
    justify-content: flex-end;
}

.side-img-container .side-img {
    max-width: 75%;
}

.sec-header .title {
    width: max-content;
    background: var(--primary-light);
    font-size: 18px;
    font-weight: bold;
    color: var(--primary);
    padding: 0.25rem 2rem;
    border-radius: 12px;
}

.sec-header .description {
    font-size: 16px;
    line-height: 35px;
    color: var(--gray-dark);
    padding-top: 1rem;
}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2rem;
}

.pagination .pagination-list {
    list-style: none;
    display: flex;
    gap: 10px;
    padding: 0;
    margin: 0;
}

.pagination .pagination-list .page-item .page-link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    text-decoration: none;
    font-size: 14px;
    color: var(--gray-dark);
    border-radius: 20px;
    line-height: 20px;
    cursor: pointer;
}

.pagination .pagination-list .page-item .page-link i {
    font-size: 12px;
}

.pagination .pagination-list .page-item.disabled .page-link, .pagination .pagination-list .page-item.disabled:hover .page-link {
    border-color: var(--gray);
    background: var(--gray-light);
    color: var(--gray);
}

.pagination .pagination-list .page-item.active .page-link, .pagination .pagination-list .page-item:hover .page-link {
    border-color: var(--primary);
    background: var(--gray-light);
    color: var(--primary);
}

.pagination .pagination-list .more {
    color: var(--gray);
    vertical-align: bottom;
}

.pagination .pagination-list .page-item:first-child .page-link i,
.pagination .pagination-list .page-item:last-child .page-link i {
    font-size: 15px;
    line-height: 20px;
}

.form-control.is-invalid,
.was-validated .form-control:invalid {
    background-image: none;
}

footer ul li a {
    color: white !important;
    text-decoration: none !important
}

footer a {
    text-decoration: none !important
}