@font-face {
    font-family: "Tajawal";
    font-style: normal;
    font-weight: 400;
    src: local("Tajawal"), local("Tajawal-Regular"), url(../fonts/tajawal/Tajawal-Regular.ttf) format("truetype");
}

@font-face {
    font-family: "Tajawal";
    font-style: normal;
    font-weight: 500;
    src: local("Tajawal Medium"), local("Tajawal-Medium"), url(../fonts/tajawal/Tajawal-Medium.ttf) format("truetype");
}

@font-face {
    font-family: "Tajawal";
    font-style: normal;
    font-weight: 700;
    src: local("Tajawal Bold"), local("Tajawal-Bold"), url(../fonts/tajawal/Tajawal-Bold.ttf) format("truetype");
}

@font-face {
    font-family: "Tajawal";
    font-style: normal;
    font-weight: 900;
    src: local("Tajawal Black"), local("Tajawal-Black"), url(../fonts/tajawal/Tajawal-Black.ttf) format("truetype");
}
/******************************************************************************/

body {
    font-family: "Tajawal";
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 16px;
}

.no-focus *:focus,
.no-focus {
    outline: 0 !important;
}

a {
    color: #21978b;
    -webkit-transition: all 0.12s ease-out;
    transition: all 0.12s ease-out;
    display: inline-flex;
}

    a.link-effect {
        position: relative;
    }

        a.link-effect:before {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 100%;
            height: 2px;
            content: "";
            background-color: #21978b;
            visibility: hidden;
            -webkit-transform: scaleX(0);
            -ms-transform: scaleX(0);
            transform: scaleX(0);
            -webkit-transition: -webkit-transform 0.12s ease-out;
            transition: transform 0.12s ease-out;
        }

    a.link-effect-opacity {
        -webkit-transition: opacity 0.25s ease-out;
        transition: opacity 0.25s ease-out;
    }

    a:hover,
    a:focus {
        color: #21978b;
        text-decoration: none;
    }

        a:hover.link-effect:before,
        a:focus.link-effect:before {
            visibility: visible;
            -webkit-transform: scaleX(1);
            -ms-transform: scaleX(1);
            transform: scaleX(1);
        }

        a:hover.link-effect-opacity,
        a:focus.link-effect-opacity {
            opacity: 0.5;
        }

    a:active {
        color: #21978b;
    }

    a.inactive {
        cursor: not-allowed;
    }

        a.inactive:focus {
            background-color: transparent !important;
        }

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    margin: 0;
    font-family: "Tajawal", sans-serif;
    font-weight: 600;
    line-height: 1.2;
    color: inherit;
    letter-spacing: -1px;
}

    h1 small,
    h2 small,
    h3 small,
    h4 small,
    h5 small,
    h6 small,
    .h1 small,
    .h2 small,
    .h3 small,
    .h4 small,
    .h5 small,
    .h6 small,
    h1 .small,
    h2 .small,
    h3 .small,
    h4 .small,
    h5 .small,
    h6 .small,
    .h1 .small,
    .h2 .small,
    .h3 .small,
    .h4 .small,
    .h5 .small,
    .h6 .small {
        font-weight: 600;
        font-size: 85%;
        color: #777;
    }

.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-weight: inherit;
}

h1,
.h1 {
    font-size: 2.25rem;
}

h2,
.h2 {
    font-size: 2rem;
}

h3,
.h3 {
    font-size: 1.75rem;
}

h4,
.h4 {
    font-size: 1.50rem;
}

h5,
.h5 {
    font-size: 1.25rem;
}

h6,
.h6 {
    font-size: 1rem;
}

.font-w300 {
    font-weight: 300 !important;
}

.font-w400 {
    font-weight: 400 !important;
}

.font-w500 {
    font-weight: 500 !important;
}

.font-w600 {
    font-weight: 600 !important;
}

.font-w700 {
    font-weight: 700 !important;
}

.font-s12 {
    font-size: 12px !important;
}

.font-s13 {
    font-size: 13px !important;
}

.font-s36 {
    font-size: 36px !important;
}

.font-s48 {
    font-size: 48px !important;
}

.font-s64 {
    font-size: 64px !important;
}

.font-s96 {
    font-size: 96px !important;
}

.font-s128 {
    font-size: 128px !important;
}

p {
    font-size: 1.1rem;
    line-height: 1.5;
}

.push-5 {
    margin-bottom: 5px !important;
}

.push-5-t {
    margin-top: 5px !important;
}

.push-5-r {
    margin-left: 5px !important;
}

.push-5-l {
    margin-right: 5px !important;
}

.push-10 {
    margin-bottom: 10px !important;
}

.push-10-t {
    margin-top: 10px !important;
}

.push-10-r {
    margin-left: 10px !important;
}

.push-10-l {
    margin-right: 10px !important;
}

.push-15 {
    margin-bottom: 15px !important;
}

.push-15-t {
    margin-top: 15px !important;
}

.push-15-r {
    margin-left: 15px !important;
}

.push-15-l {
    margin-right: 15px !important;
}

.push-20 {
    margin-bottom: 20px !important;
}

.push-20-t {
    margin-top: 20px !important;
}

.push-20-r {
    margin-left: 20px !important;
}

.push-20-l {
    margin-right: 20px !important;
}

.push-30 {
    margin-bottom: 30px !important;
}

.push-30-t {
    margin-top: 30px !important;
}

.push-30-r {
    margin-left: 30px !important;
}

.push-30-l {
    margin-right: 30px !important;
}

.push-50 {
    margin-bottom: 50px !important;
}

.push-50-t {
    margin-top: 50px !important;
}

.push-50-r {
    margin-left: 50px !important;
}

.push-50-l {
    margin-right: 50px !important;
}

.push-100 {
    margin-bottom: 100px !important;
}

.push-100-t {
    margin-top: 100px !important;
}

.push-100-r {
    margin-left: 100px !important;
}

.push-100-l {
    margin-right: 100px !important;
}

.push-150 {
    margin-bottom: 150px !important;
}

.push-150-t {
    margin-top: 150px !important;
}

.push-150-r {
    margin-left: 150px !important;
}

.push-150-l {
    margin-right: 150px !important;
}

.push-200 {
    margin-bottom: 200px !important;
}

.push-200-t {
    margin-top: 200px !important;
}

.push-200-r {
    margin-left: 200px !important;
}

.push-200-l {
    margin-right: 200px !important;
}

.push-300 {
    margin-bottom: 300px !important;
}

.push-300-t {
    margin-top: 300px !important;
}

.push-300-r {
    margin-left: 300px !important;
}

.push-300-l {
    margin-right: 300px !important;
}

.remove-margin {
    margin: 0 !important;
}

.remove-margin-t {
    margin-top: 0 !important;
}

.remove-margin-r {
    margin-left: 0 !important;
}

.remove-margin-b {
    margin-bottom: 0 !important;
}

.remove-margin-l {
    margin-right: 0 !important;
}

.remove-padding {
    padding: 0 !important;
}

.remove-padding-t {
    padding-top: 0 !important;
}

.remove-padding-r {
    padding-left: 0 !important;
}

.remove-padding-b {
    padding-bottom: 0 !important;
}

.remove-padding-l {
    padding-right: 0 !important;
}

.mheight-50 {
    min-height: 50px;
}

.mheight-75 {
    min-height: 75px;
}

.mheight-100 {
    min-height: 100px;
}

.mheight-125 {
    min-height: 125px;
}

.mheight-150 {
    min-height: 150px;
}

.mheight-175 {
    min-height: 175px;
}

.mheight-200 {
    min-height: 200px;
}

.align-v {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

    .align-v.align-v-fwidth {
        width: 100%;
    }

.border {
    border: 1px solid #e9e9e9;
}

.border-t {
    border-top: 1px solid #e9e9e9;
}

.border-r {
    border-left: 1px solid #e9e9e9;
}

.border-b {
    border-bottom: 1px solid #e9e9e9;
}

.border-l {
    border-right: 1px solid #e9e9e9;
}

.border-white-op {
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.border-white-op-t {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.border-white-op-r {
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.border-white-op-b {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.border-white-op-l {
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.border-black-op {
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.border-black-op-t {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.border-black-op-r {
    border-left: 1px solid rgba(0, 0, 0, 0.1);
}

.border-black-op-b {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.border-black-op-l {
    border-right: 1px solid rgba(0, 0, 0, 0.1);
}

label {
    font-size: 1rem;
    font-weight: 600;
}

.form-control {
    color: #646464;
    border: 1px solid #e6e6e6;
    border-radius: 3px;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-transition: all 0.15s ease-out;
    transition: all 0.15s ease-out;
}

    .form-control::-moz-placeholder {
        color: #aaa;
    }

    .form-control:-ms-input-placeholder {
        color: #aaa;
    }

    .form-control::-webkit-input-placeholder {
        color: #aaa;
    }

    .form-control:focus {
        border-color: #ccc;
        background-color: #fcfcfc;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

textarea.form-control {
    max-width: 100%;
}

input[type="text"].form-control,
input[type="password"].form-control,
input[type="email"].form-control {
    -webkit-appearance: none;
}

.form-control.input-sm {
    border-radius: 3px;
}

.form-control.input-lg {
    font-size: 14px;
    border-radius: 3px;
}

.input-group-lg .form-control {
    font-size: 14px;
}

.form-group {
    margin-bottom: 20px;
}

.form-bordered .form-group {
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #f3f3f3;
}

    .form-bordered .form-group.form-actions {
        border-bottom: none;
    }

.help-block {
    margin-top: 5px;
    margin-bottom: 0;
    font-style: italic;
    font-size: 13px;
    color: #a4a4a4;
}

.input-group-addon {
    color: #646464;
    background-color: #f9f9f9;
    border-color: #e6e6e6;
    border-radius: 3px;
}

    .input-group-addon.input-sm,
    .input-group-addon.input-lg {
        border-radius: 3px;
    }

.input-group-sm > .form-control,
.input-group-sm > .input-group-addon,
.input-group-sm > .input-group-btn > .btn,
.input-group-lg > .form-control,
.input-group-lg > .input-group-addon,
.input-group-lg > .input-group-btn > .btn {
    border-radius: 3px;
}

.input-group .form-control:first-child,
.input-group-addon:first-child,
.input-group-btn:first-child > .btn,
.input-group-btn:first-child > .btn-group > .btn,
.input-group-btn:first-child > .dropdown-toggle,
.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle),
.input-group-btn:last-child > .btn-group:not(:last-child) > .btn {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
}

.input-group-addon:first-child {
    border-left: 0;
}

.input-group .form-control:last-child,
.input-group-addon:last-child,
.input-group-btn:last-child > .btn,
.input-group-btn:last-child > .btn-group > .btn,
.input-group-btn:last-child > .dropdown-toggle,
.input-group-btn:first-child > .btn:not(:first-child),
.input-group-btn:first-child > .btn-group:not(:first-child) > .btn {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
}

.input-group-addon:last-child {
    border-right: 0;
}
/* @media (min-width:1200px){
  .container{max-width:1310px}
}
@media (min-width: 1920px){
  .container {max-width: 1410px;}
} */
.bg-primary {
    background-color: var(--main-clr-dark) !important;
}

.bg-primary-light {
    background-color: var(--main-clr) !important;
}

.bg-primary-dark {
    background-color: var(--main-clr-darker);
}

.bg-light {
    background-color: var(--light-clr);
}

.bg-lighter {
    background-color: var(--lighter-clr);
}

.bg-green {
    background-color: var(--main-clr);
}

.bg-white {
    background-color: #fff;
}

.clr-primary {
    color: var(--main-clr);
}

.clr-primary-dark {
    color: var(--main-clr-darker);
}

.clr-light {
    color: var(--lighter-clr);
}

.clr-green {
    color: var(--main-clr);
}

.clr-gray {
    color: var(--gray-clr);
}

.clr-gold {
    color: var(--gold-clr);
}

.clr-white {
    color: #fff;
}

.sec-pad-1 {
    padding: var(--sec-pad-1) 0;
}

.sec-pad-2 {
    padding: var(--sec-pad-2) 0;
}

.sec-pad-3 {
    padding: var(--sec-pad-3) 0;
}

.sec-pad-4 {
    padding: var(--sec-pad-4) 0;
}

.sec-pad-5 {
    padding: var(--sec-pad-5) 0;
}

i::before {
    font-weight: bold !important;
}

.btn {
    padding: 0.57rem 2.5rem;
    font-weight: 500;
}

.btn-green {
    background-color: var(--main-clr);
    color: #fff;
}

.btn-dark {
    background-color: var(--main-clr-darker);
    color: #fff;
}

.btn-gold {
    background-color: var(--gold-clr);
    color: #fff;
}

.btn-white {
    background-color: white;
    color: var(--gold-clr);
}

.hover-green:hover {
    background-color: var(--main-clr-darker);
    border-color: var(--main-clr-darker);
    color: #fff;
}

.hover-gold:hover {
    background-color: var(--gold-clr-dark);
    border-color: var(--gold-clr-dark);
    color: #fff;
}

.hover-dark:hover {
    background-color: var(--main-clr-darker);
    border-color: var(--main-clr-darker);
    color: #fff;
}