.bg-primary-blue {
    background-color: #29aae2 !important;
}

.g-primary-blue {
    color: #29aae2 !important;
}

.bg-dark-white {
    background-color: #f9f9f9 !important;
}

.g-bg-secondary {
    background-color: #25546a !important
}

.g-color-text {
    color: #292929;
}

p {
    line-height: 1;
}

@font-face {
    font-family: 'ssc_font_english';
    src: url('../fonts/ssc_font_english.woff2') format('woff2');
}

@font-face {
    font-family: 'ssc_font';
    font-weight: 200;
    src: url('../fonts/ssc_font_regular.ttf') format('truetype');
}

@font-face {
    font-family: 'ssc_font';
    font-weight: 700;
    src: url('../fonts/ssc_font.ttf') format('truetype');
}
/* arabic */
@font-face {
    font-family: 'Cairo';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/cairo/v14/SLXGc1nY6HkvalIkTpu0xg.woff2) format('woff2');
    unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE80-FEFC;
}
/* latin-ext */
@font-face {
    font-family: 'Cairo';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/cairo/v14/SLXGc1nY6HkvalIvTpu0xg.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Cairo';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/cairo/v14/SLXGc1nY6HkvalIhTps.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Janna LT Bold';
    src: url("../fonts/Janna LT Bold.ttf") format("truetype");
}

li, a, p, label, h1, h2, h3, h4, h5, h6, button, input, textarea, span, blockquote, div {
    font-family: ssc_font,ssc_font_english,Arial !important;
}

.form-group {
    text-align: start;
}

*::-webkit-scrollbar {
    background-color: #fff;
    width: 16px
}

/* background of the scrollbar except button or resizer */
*::-webkit-scrollbar-track {
    background-color: #fff
}

    *::-webkit-scrollbar-track:hover {
        background-color: #f4f4f4
    }

/* scrollbar itself */
*::-webkit-scrollbar-thumb {
    background-color: #babac0;
    border-radius: 16px;
    border: 5px solid #fff
}

    *::-webkit-scrollbar-thumb:hover {
        background-color: #a0a0a5;
        border: 4px solid #f4f4f4
    }

/* set button(top and bottom of the scrollbar) */
*::-webkit-scrollbar-button {
    display: none
}

/* Add here all your css styles (customizations) */

.input-group .from-city {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.input-group .to-city {
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
}


input.form-control {
    border-top-right-radius: 0.25rem !important;
    border-bottom-right-radius: 0.25rem !important;
}

input.form-control {
    border-top-left-radius: 0.25rem !important;
    border-bottom-left-radius: 0.25rem !important;
}

.form-control {
    height: 3.50rem;
}

.form-label-group {
    position: relative;
}

    .form-label-group input,
    .form-label-group select,
    .form-label-group label {
        height: 3.50rem;
        padding: .95rem;
    }

    .form-label-group label {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        margin-bottom: 0; /* Override default `<label>` margin */
        line-height: 1.5;
        color: #495057;
        pointer-events: none;
        cursor: text; /* Match the input under the label */
        border: 1px solid transparent;
        border-radius: .25rem;
        transition: all .1s ease-in-out;
    }

    .form-label-group input::-webkit-input-placeholder {
        color: transparent;
    }

    .form-label-group input::-moz-placeholder {
        color: transparent;
    }

    .form-label-group input:-ms-input-placeholder {
        color: transparent;
    }

    .form-label-group input::-ms-input-placeholder {
        color: transparent;
    }

    .form-label-group input::placeholder {
        color: transparent;
    }

    .form-label-group input:not(:-moz-placeholder-shown) {
        padding-top: 1.55rem;
        padding-bottom: .35rem;
    }

    .form-label-group input:not(:-ms-input-placeholder) {
        padding-top: 1.55rem;
        padding-bottom: .35rem;
    }

    .form-label-group input:not(:placeholder-shown), .form-label-group select.selected {
        padding-top: 1.55rem;
        padding-bottom: .35rem;
    }

    .form-label-group input:not(:-moz-placeholder-shown) ~ label {
        padding-top: .10rem;
        padding-bottom: .25rem;
        font-size: 0.8rem;
        color: #777;
    }

    .form-label-group input:not(:-ms-input-placeholder) ~ label {
        padding-top: .10rem;
        padding-bottom: .25rem;
        font-size: 0.8rem;
        color: #777;
    }

    .form-label-group input:not(:placeholder-shown) ~ label {
        padding-top: .10rem;
        padding-bottom: .25rem;
        font-size: 0.8rem;
        color: #777;
    }

    .form-label-group input:-webkit-autofill ~ label {
        padding-top: .25rem;
        padding-bottom: .25rem;
        font-size: 0.8rem;
        color: #777;
    }

    .form-label-group select.selected ~ label {
        padding-top: .10rem;
        padding-bottom: .25rem;
        font-size: 0.8rem;
        color: #777;
    }


/* Fallback for Edge
-------------------------------------------------- */
@supports (-ms-ime-align: auto) {
    .form-label-group {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
    }

        .form-label-group label {
            position: static;
        }

        .form-label-group input::-ms-input-placeholder {
            color: #777;
        }
}


.input-select label, .input-date label {
    padding-right: 30px;
}




html.rtl-page .has-icon input.date {
    padding-right: 30px !important;
}

html.ltr-page .has-icon input.date {
    padding-left: 30px !important;
}

html.rtl-page .has-icon input, html.rtl-page .has-icon select {
    padding-right: 30px !important;
}

html.ltr-page .has-icon input, html.rtl-page .has-icon select {
    padding-left: 30px !important;
}

.input-icon {
    position: absolute;
    display: flex;
    align-self: center;
    justify-self: center;
    z-index: 150;
    padding: 7px;
    font-size: 1.5em !important;
}

.hamburger-inner, .hamburger-inner:after, .hamburger-inner:before {
    background-color: black !important;
}

.header-container {
    justify-content: center !important;
}

.input-icon {
    color: #25546a;
}


.padding-95-rem {
    padding: .95rem;
}

input.left-border-radius-0 {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

input.right-border-radius-0 {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.ltr {
    direction: ltr !important;
}

.fade-enter-active, .fade-leave-active {
    transition: opacity 0.2s !important;
}

.fade-enter, .fade-leave-to {
    opacity: 0 !important;
}

.modal {
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    -o-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

.loader-container {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    justify-content: center;
}

#loader, .loader-parent {
    background-color: #0000008a;
    position: fixed;
    z-index: 1000000000;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

.loader-parent {
    position: absolute !important;
}

.loader-spinner {
    border: 4px solid #ffffff;
    border-radius: 50%;
    border-top: 4px solid #ffc107;
    width: 60px;
    height: 60px;
    -webkit-animation: spin 0.8s linear infinite;
    animation: spin 0.8s linear infinite;
    z-index: 100000000;
}

.loader-msg {
    z-index: 100000000;
    color: white;
    margin-top: 10px;
    font-size: 1.5rem;
}

.loader-step {
    color: white;
    margin-top: 10px;
    font-size: 1.1rem;
}

    .loader-step em {
        margin-right: 5px;
        margin-left: 5px;
        color: #ffeb3b;
    }

/* Safari */
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


.wizard > .steps a {
    text-align: center;
}

body {
    background-color: #f8f8f8 !important;
}

.text-start {
    text-align: start;
}

body {
    overflow-y: overlay;
}

#appbody {
    min-height: calc(100vh - 175px);
}

.g-bg-success--before::before, .g-bg-success--after::after {
    background-color: #4caf50 !important;
}

.g-bg-default--before::before, .g-bg-default--after::after {
    background-color: lightgray !important;
}

.header-top {
}

.intro-video {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: -1;
}

.intro-video-container {
    z-index: -1;
    height: 700px;
    overflow: hidden;
}

.said-qoutes {
    padding-bottom: 25px;
}

@media (min-width: 1200px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 960px;
    }

    .intro-video {
        top: -120px;
    }
}

@media (max-width: 1510px) {
    .black-sm {
        background-color: black;
    }

    .intro-video {
        display: none;
    }
}

@media (max-width: 480px) {
    .small-logo-sm {
        max-height: 25px;
    }

    .black-sm {
        background-color: black;
    }

    .intro-video-container {
        height: 480px;
    }

    .tan-img {
        max-height: 100px;
    }
}

.said-img {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

@media (max-width: 768px) {
    .small-logo-sm {
        max-height: 20px;
    }

    .said-container > div {
        flex-basis: 100% !important;
    }

        .said-container > div:not(:first-child) {
            margin-top: 25px;
        }


    .said-img {
        background-repeat: no-repeat;
        background-size: cover;
        background-position-y: -100px !important;
    }

    .youtube-video {
        margin-top: 25px;
    }
}


.said-container {
    flex-grow: 1;
    flex-wrap: wrap;
}

    .said-container > div {
        flex-basis: 20%;
    }


.youtube-video {
    width: 100%;
    height: 300px;
}