@import url(https://fonts.googleapis.com/css2?family=Tajawal:wght@200;300;400;500;700;800;900&display=swap);

html {
    scroll-behavior: smooth
}

@media (max-width:1199.98px) {
    html {
        overflow-x: hidden
    }
}

*, ::after, ::before {
    margin: 0;
    padding: 0;
    outline: 0;
    box-sizing: border-box
}

    ::after:focus, ::before:focus, :focus {
        outline: 0
    }

body {
    margin: 0;
    padding: 0;
    direction: ltr;
    text-align: left;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    overflow-x: hidden
}

@media (max-width:1400px) and (min-width:1300px) and (min-height:900px) {
    body {
        font-size: 11.485px
    }
}

@media (min-width:1200px) {
    body {
        font-size: 16px
    }
}

@media (max-width:1199.98px) {
    body {
        font-size: 14px
    }
}

img, svg {
    max-width: 100%;
    height: auto;
    display: block
}

ol, ul {
    margin: 0;
    padding: 0;
    list-style-position: outside;
    padding-left: 1.25em
}

    ol li, ul li {
        margin-bottom: 1em
    }

a {
    text-decoration: none;
    color: #d50032
}

iframe {
    border: 0
}

button {
    -webkit-appearance: button;
    appearance: button;
    border: none;
    font-family: Tajawal,sans-serif;
    cursor: pointer
}

    button:focus {
        outline: 0
    }

textarea {
    resize: none
}

picture {
    display: block;
    width: 100%;
    height: 100%
}

body {
    font-weight: 500;
    font-family: Tajawal,sans-serif;
    color: #262626;
    line-height: 1;
    direction: ltr
}

.loadjs {
    overflow: hidden
}

.img-wrapper {
    position: relative;
    width: 100%
}

    .img-wrapper img, .img-wrapper svg {
        width: 100%
    }

.container-fluid {
    max-width: 100%;
    padding: 0
}

@media (max-width:991.98px) {
    .container-fluid {
        padding: 0 5em
    }
}

@media (max-width:991.98px) {
    .container-fluid {
        padding: 0 3em
    }
}

@media (max-width:575.98px) {
    .container-fluid {
        padding: 0 2em
    }
}

.container-s {
    max-width: 100%;
    padding: 0 4.65%
}

@media (max-width:991.98px) {
    .container-s {
        padding: 0 3em
    }
}

@media (max-width:575.98px) {
    .container-s {
        padding: 0 2em
    }
}

.container {
    max-width: 100%;
    padding: 0 16.25%
}

@media (max-width:1199.98px) {
    .container {
        padding: 0 5em
    }
}

@media (max-width:991.98px) {
    .container {
        padding: 0 3em
    }
}

@media (max-width:575.98px) {
    .container {
        padding: 0 2em
    }
}

@media (min-width:1200px) {
    .container.no-padding {
        padding: 0
    }
}

.section {
    position: relative;
    padding: 2em 0
}

@media (min-width:576px) {
    .section {
        padding: 3em 0
    }
}

@media (min-width:1200px) {
    .section {
        padding: 5em 0
    }
}

@media (max-width:767.98px) {
    .mob-spacing {
        margin-bottom: 2em
    }
}

.f-w-500 {
    font-weight: 500
}

.error-section {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center
}

    .error-section .container {
        width: 100%
    }

    .error-section .left-col {
        position: relative;
        padding: 3em
    }

@media (max-width:1199.98px) {
    .error-section .left-col {
        padding: 1.5em
    }
}

@media (max-width:575.98px) {
    .error-section .left-col {
        display: none
    }
}

.error-section .left-col::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    background: #f3f3f8;
    border-radius: 100%;
    width: 35em;
    height: 35em;
    opacity: .65;
    z-index: -1
}

@media (max-width:1199.98px) {
    .error-section .left-col::before {
        width: 25em;
        height: 25em
    }
}

@media (max-width:991.98px) {
    .error-section .left-col::before {
        width: 20em;
        height: 20em
    }
}

@media (max-width:991.98px) {
    .error-section .left-col::before {
        width: 22em;
        height: 22em
    }
}

@media (max-width:575.98px) {
    .error-section .right-col .genericHead {
        text-align: center
    }
}

.h1, h1 {
    font-weight: 800;
    font-size: 5.63em;
    line-height: 1;
    letter-spacing: -.03em;
    text-transform: capitalize;
    margin: 0 0 .5em 0;
    color: #262626
}

@media (max-width:1199.98px) {
    .h1, h1 {
        font-size: 3.5em
    }
}

@media (max-width:991.98px) {
    .h1, h1 {
        font-size: 2em
    }
}

.h2, h2 {
    font-weight: 700;
    font-size: 5em;
    line-height: 1;
    text-transform: capitalize;
    margin: 0 0 .5em 0;
    color: #262626
}

@media (max-width:1199.98px) {
    .h2, h2 {
        font-size: 2.5em
    }
}

@media (max-width:991.98px) {
    .h2, h2 {
        font-size: 2em;
        margin: 0 0 1em 0
    }
}

@media (max-width:575.98px) {
    .h2, h2 {
        margin: 0 0 .75em 0
    }
}

.h3, h3 {
    font-weight: 700;
    font-size: 3.75em;
    line-height: 1;
    text-transform: capitalize;
    margin: 0 0 .5em 0;
    color: #262626
}

@media (max-width:1199.98px) {
    .h3, h3 {
        font-size: 2em
    }
}

@media (max-width:991.98px) {
    .h3, h3 {
        font-size: 1.75em;
        margin: 0 0 1em 0
    }
}

@media (max-width:575.98px) {
    .h3, h3 {
        margin: 0 0 .75em 0
    }
}

.h4, h4 {
    font-weight: 700;
    font-size: 2.25em;
    line-height: 1;
    margin: 0 0 .5em 0;
    color: #262626
}

@media (max-width:1199.98px) {
    .h4, h4 {
        font-size: 1.5em
    }
}

@media (max-width:991.98px) {
    .h4, h4 {
        font-size: 1.5em
    }
}

.h4.s-font, h4.s-font {
    font-size: 1.875em
}

@media (max-width:1199.98px) {
    .h4.s-font, h4.s-font {
        font-size: 1.5em
    }
}

@media (max-width:991.98px) {
    .h4.s-font, h4.s-font {
        font-size: 1.5em
    }
}

.h5, h5 {
    font-weight: 500;
    font-size: 1.487em;
    line-height: 1;
    margin: 0 0 .5em 0;
    color: #262626
}

    .h5.s-font, h5.s-font {
        font-size: 1.375em;
        letter-spacing: -1px
    }

    .h5.l-font, h5.l-font {
        font-size: 1.875em
    }

@media (max-width:991.98px) {
    .h5, h5 {
        font-size: 1.375em
    }
}

.h6, h6 {
    font-weight: 700;
    font-size: 1.25em;
    line-height: 1;
    margin: 0 0 .5em 0;
    color: #262626
}

@media (max-width:1199.98px) {
    .h6, h6 {
        font-size: 1.125em
    }
}

@media (max-width:991.98px) {
    .h6, h6 {
        font-size: 1em
    }
}

.h6.m-font, h6.m-font {
    font-size: 1.125em
}

.h6.s-font, h6.s-font {
    font-size: 1em
}

.para, p {
    font-weight: 500;
    font-size: 1.25em;
    line-height: 1.5em;
    margin: 0 0 1.578em 0;
    color: #444241
}

@media (max-width:1199.98px) {
    .para, p {
        font-size: 1.125em
    }
}

@media (max-width:991.98px) {
    .para, p {
        font-size: 1em
    }
}

.para.s-font, p.s-font {
    font-size: 1.125em
}

@media (max-width:991.98px) {
    .para.s-font, p.s-font {
        font-size: 1em
    }
}

.genericHead .title-prefix {
    font-size: 1.25em;
    font-weight: 400;
    text-transform: uppercase;
    margin-bottom: 1.5em;
    position: relative;
    padding-left: 3.4375em;
    color: currentColor;
    display: inline-flex
}

@media (max-width:1199.98px) {
    .genericHead .title-prefix {
        font-size: 1.125em
    }
}

@media (max-width:991.98px) {
    .genericHead .title-prefix {
        font-size: 1em
    }
}

.genericHead .title-prefix::before {
    content: "";
    width: 1.5em;
    height: 1px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    background: #d50032
}

.genericHead .title-prefix::after {
    content: "";
    width: .5em;
    height: .5em;
    position: absolute;
    top: 41%;
    transform: rotate(45deg) translateY(-41%);
    left: 1.35em;
    background: #d50032
}

.genericHead.white-col .h1, .genericHead.white-col .h2, .genericHead.white-col .h3, .genericHead.white-col .h4, .genericHead.white-col .h5, .genericHead.white-col .h6, .genericHead.white-col p {
    color: #fff
}

.genericHead.white-col .title-prefix::before {
    background: #fff
}

.genericHead.white-col .title-prefix::after {
    background: #fff
}

.genericHead.white-col .primary-anchor a .arrow svg path, .genericHead.white-col .primary-anchor button .arrow svg path {
    fill: #fff
}

.genericHead.white-col .primary-anchor a .arrow.rotate-down svg, .genericHead.white-col .primary-anchor button .arrow.rotate-down svg {
    transform: rotate(90deg)
}

.genericHead.white-col .primary-anchor a .text, .genericHead.white-col .primary-anchor button .text {
    color: #fff
}

.genericHead.white-col .primary-anchor a::before, .genericHead.white-col .primary-anchor button::before {
    border-color: #fff
}

.genericHead.center-head {
    text-align: center
}

@media (max-width:991.98px) {
    .overflow-hidden {
        overflow: hidden
    }
}

.text-center {
    text-align: center
}

.m-auto {
    margin: 0 auto !important
}

.p-0 {
    padding: 0 !important
}

.p-1 {
    padding: .5em !important
}

.p-2 {
    padding: 1em !important
}

.p-3 {
    padding: 1.5em !important
}

.px-0 {
    padding-left: 0 !important;
    padding-right: 0 !important
}

.px-1 {
    padding-left: .5em !important;
    padding-right: .5em !important
}

.px-2 {
    padding-left: 1em !important;
    padding-right: 1em !important
}

.px-3 {
    padding-left: 1.5em !important;
    padding-right: 1.5em !important
}

.py-0 {
    padding-top: 0;
    padding-bottom: 0 !important
}

.py-1 {
    padding-top: .5em !important;
    padding-bottom: .5em !important
}

.py-2 {
    padding-top: 1em !important;
    padding-bottom: 1em !important
}

.py-3 {
    padding-top: 1.5em !important;
    padding-bottom: 1.5em !important
}

.pt-0 {
    padding-top: 0 !important
}

.pt-1 {
    padding-top: .5em !important
}

.pt-2 {
    padding-top: 1em !important
}

.pt-3 {
    padding-top: 1.5em !important
}

.pb-0 {
    padding-bottom: 0 !important
}

.pb-1 {
    padding-bottom: .5em !important
}

.pb-2 {
    padding-bottom: 1em !important
}

.pb-3 {
    padding-bottom: 1.5em !important
}

.pl-0 {
    padding-left: 0 !important
}

.pl-1 {
    padding-left: .5em !important
}

.pl-2 {
    padding-left: 1em !important
}

.pl-3 {
    padding-left: 1.5em !important
}

.pr-0 {
    padding-right: 0 !important
}

.pr-1 {
    padding-right: .5em !important
}

.pr-2 {
    padding-right: 1em !important
}

.pr-3 {
    padding-right: 1.5em !important
}

.pt-40 {
    padding-top: 2.5em
}

@media (max-width:767.98px) {
    .pt-40 {
        padding-top: 2em
    }
}

.m-0 {
    margin: 0 !important
}

.m-1 {
    margin: .5em !important
}

.m-2 {
    margin: 1em !important
}

.m-3 {
    margin: 1.5em !important
}

.mx-0 {
    margin-left: 0 !important;
    margin-right: 0 !important
}

.mx-1 {
    margin-left: .5em !important;
    margin-right: .5em !important
}

.mx-2 {
    margin-left: 1em !important;
    margin-right: 1em !important
}

.mx-3 {
    margin-left: 1.5em !important;
    margin-right: 1.5em !important
}

.my-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important
}

.my-1 {
    margin-top: .5em !important;
    margin-bottom: .5em !important
}

.my-2 {
    margin-top: 1em !important;
    margin-bottom: 1em !important
}

.my-3 {
    margin-top: 1.5em !important;
    margin-bottom: 1.5em !important
}

.mt-0 {
    margin-top: 0 !important
}

.mt-1 {
    margin-top: .5em !important
}

.mt-2 {
    margin-top: 1em !important
}

.mt-3 {
    margin-top: 1.5em !important
}

.mb-0 {
    margin-bottom: 0 !important
}

.mb-1 {
    margin-bottom: .5em !important
}

.mb-2 {
    margin-bottom: 1em !important
}

.mb-3 {
    margin-bottom: 1.5em !important
}

.mb-8 {
    margin-bottom: 2.5em !important
}

.ml-0 {
    margin-left: 0 !important
}

.ml-1 {
    margin-left: .5em !important
}

.ml-2 {
    margin-left: 1em !important
}

.ml-3 {
    margin-left: 1.5em !important
}

.mr-0 {
    margin-right: 0 !important
}

.mr-1 {
    margin-right: .5em !important
}

.mr-2 {
    margin-right: 1em !important
}

.mr-3 {
    margin-right: 1.5em !important
}

.mb-50 {
    margin-bottom: 3.125em !important
}

@media (max-width:767.98px) {
    .mb-50 {
        margin-bottom: 2em !important
    }
}

.mb-60 {
    margin-bottom: 3.75em !important
}

@media (max-width:767.98px) {
    .mb-60 {
        margin-bottom: 2em !important
    }
}

.mt-40 {
    margin-top: 2.5em
}

@media (max-width:767.98px) {
    .mt-40 {
        margin-top: 2em
    }
}

.mb-30 {
    margin-bottom: 1.875em
}

.mb-20 {
    margin-bottom: 1.239em !important
}

.mt-20 {
    margin-top: 1.239em !important
}

.text-lower {
    text-transform: lowercase !important
}

.text-upper {
    text-transform: uppercase !important
}

.text-capitalize {
    text-transform: capitalize !important
}

.generic--radius {
    border-radius: 10px
}

.d-flex {
    display: flex
}

.justify-center {
    justify-content: center
}

.justify-between {
    justify-content: space-between
}

.justify-around {
    justify-content: space-around
}

.justify-end {
    justify-content: flex-end !important
}

@media (min-width:576px) {
    .desktop-justify-end {
        justify-content: flex-end !important
    }
}

@media (max-width:767.98px) {
    .mob-text-center {
        text-align: center
    }
}

.align-item-center {
    align-items: center
}

.w-100 {
    width: 100%
}

nav.basic-pagi .pagination li a.active {
    border-color: #d50032;
    color: #444241;
}

.basic-pagi .pagination li:first-child a, html[lang=en] nav.basic-pagi .pagination li:last-child a {
    width: 38px;
    height: 38px;
    color: #444241;
    border: 1px solid #d50032;
    border-radius: 50%;
    margin: 0 6px;
}

nav.basic-pagi .pagination li a {
    border: none;
    border-bottom: 1px solid #bbb;
    color: #bbb;
    background-color: rgba(0, 0, 0, 0);
}

.page-item:first-child .page-link {
    margin-left: 0;
    border-top-left-radius: .25rem;
    border-bottom-left-radius: .25rem;
}

.page-link {
    position: relative;
    display: block;
    padding: .5rem .75rem;
    margin-left: -1px;
    line-height: 1.25;
    color: #007bff;
    background-color: #fff;
    border: 1px solid #dee2e6;
}

.pagination {
    display: -ms-flexbox;
    display: flex;
    padding-left: 0;
    list-style: none;
    border-radius: .25rem;
}

nav.basic-pagi .pagination {
    position: relative;
    margin: 0 auto;
}

nav.basic-pagi {
    display: flex;
    text-align: center;
    padding: 4px 0;
}

.fa, .fa-brands, .fa-classic, .fa-regular, .fa-sharp, .fa-solid, .fab, .far, .fas {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: var(--fa-display, inline-block);
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    text-rendering: auto;
}

.fa {
    font-family: var(--fa-style-family, "Font Awesome 6 Free");
    font-weight: var(--fa-style, 900);
}

.h-100 {
    height: 100%
}

@media (min-width:576px) {
    .mobile-only {
        display: none
    }
}

.desktop-only {
    display: none
}

@media (min-width:768px) {
    .desktop-only {
        display: block
    }
}

.letter-spacing-neg {
    letter-spacing: -.05em !important
}

.letter-spacing-neg2 {
    letter-spacing: -.02em !important
}

.letter-spacing-pos {
    letter-spacing: .05em !important
}

.img-hack, .img-hack-contain {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.img-hack-contain {
    object-fit: contain
}

.border-radius-10 {
    border-radius: .625em;
    overflow: hidden
}

@media (min-width:1200px) {
    .container-right-zero {
        padding-right: 0
    }
}

@media (min-width:1200px) {
    .container-left-zero {
        padding-left: 0
    }
}

.line-clamp-1 {
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    white-space: normal;
    -webkit-line-clamp: 1
}

.line-clamp-2 {
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    white-space: normal;
    -webkit-line-clamp: 2
}

.line-clamp-3 {
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    white-space: normal;
    -webkit-line-clamp: 3
}

.line-clamp-4 {
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    white-space: normal;
    -webkit-line-clamp: 4
}

@media (max-width:991.98px) {
    .tab-none {
        display: none
    }
}

.align-center {
    align-items: center
}

@media (max-width:991.98px) {
    .responsive-m-0-auto {
        margin: 0 auto
    }
}

.border-top-left-100 {
    border-top-left-radius: 6.25em
}

@media (max-width:575.98px) {
    .border-top-left-100 {
        border-top-left-radius: 3em
    }
}

.border-bottom-right-100 {
    border-bottom-right-radius: 6.25em
}

@media (max-width:575.98px) {
    .border-bottom-right-100 {
        border-bottom-right-radius: 3em
    }
}

.align-end {
    align-items: flex-end
}

.text-col2 {
    color: #444241
}

    .text-col2 svg path {
        fill: #444241
    }

    .text-col2 a {
        color: #444241
    }

@media (max-width:767.98px) {
    .mob-col-reverse {
        flex-direction: column-reverse
    }
}

@media (min-width:992px) {
    .gernal-content-section {
        padding-top: 1.875em
    }
}

.twol-col-count {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2
}

@media (max-width:991.98px) {
    .twol-col-count {
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1
    }
}

.list-none {
    list-style: none
}

.last-m-0 p:last-child {
    margin-bottom: 0
}

@media (max-width:575.98px) {
    .two-list-col .title {
        width: 36%;
        margin-right: .5em
    }
}

.letter-01 {
    letter-spacing: -1px
}

.fw-300 {
    font-weight: 300
}

.fw-400 {
    font-weight: 400
}

.fw-500 {
    font-weight: 500
}

.fw-600 {
    font-weight: 600
}

.fw-700 {
    font-weight: 700
}

.fw-800 {
    font-weight: 800
}

.primary-col {
    color: #d50032
}

.white-col {
    color: #fff
}

.black-col {
    color: #000
}

.sec-bg {
    background: rgba(218,215,215,.15)
}

.graybg {
    background: rgba(218,215,215,.2)
}

.gray-bg2 {
    background: rgba(218,215,215,.15)
}

.gray-bg3 {
    background: #f3f3f8
}

@media (max-width:767.98px) {
    .mob-whitecol {
        color: #fff
    }
}

.animate {
    opacity: 0
}

    .animate.fadein-Left {
        transform: translate(50px,0) scale(1)
    }

    .animate.fadein-Right {
        transform: translate(-50px,0) scale(1)
    }

    .animate.fadein-Up {
        transform: translate(0,50px) scale(1)
    }

    .animate.fadein-Down {
        transform: translate(0,-50px) scale(1)
    }

    .animate.zoom-In {
        transform: translate(0) scale(0)
    }

@media (max-width:767px) {
    .animate {
        opacity: 1
    }

        .animate.fadein-Left {
            transform: translate(0,0)
        }

        .animate.fadein-Right {
            transform: translate(0,0)
        }

        .animate.fadein-Up {
            transform: translate(0,0)
        }

        .animate.fadein-Down {
            transform: translate(0,0)
        }

        .animate.zoom-In {
            transform: translate(0) scale(1)
        }
}

@keyframes anim {
    to {
        transform: translate(0,0) scale(1);
        opacity: 1
    }
}

.lazy-img {
    opacity: 0
}

@media (min-width:576px) {
    .img__observer {
        position: relative
    }

        .img__observer img {
            overflow: hidden;
            clip-path: inset(100% 0 0 0)
        }

        .img__observer::before {
            content: "";
            position: absolute;
            width: 100%;
            height: 0;
            background: #d50032;
            bottom: 0;
            left: 0;
            z-index: 0
        }

        .img__observer.active img {
            transition: clip-path 1s;
            transition-delay: .5s;
            clip-path: inset(0 0 0 0)
        }

        .img__observer.active::before {
            height: 100%;
            transition: .5s
        }

        .img__observer.white-bg::before {
            background: #fff
        }
}

.custom-row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -.75em
}

@media (min-width:992px) {
    .col-one-padding {
        padding-left: 3.9375em
    }
}

@media (min-width:1200px) {
    .col-one-padding {
        padding-left: 7.9375em
    }
}

.no-gutters {
    margin: 0;
    width: 100%
}

    .no-gutters > [class*=col_] {
        padding: 0
    }

.col_offset_0 {
    margin-left: 0
}

.col_1 {
    flex: 0 0 8.3333333333%;
    width: 8.3333333333%;
    padding: 0 .75em
}

.col_offset_1 {
    margin-left: 8.3333333333%
}

.col_2 {
    flex: 0 0 16.6666666667%;
    width: 16.6666666667%;
    padding: 0 .75em
}

.col_offset_2 {
    margin-left: 16.6666666667%
}

.col_3 {
    flex: 0 0 25%;
    width: 25%;
    padding: 0 .75em
}

.col_offset_3 {
    margin-left: 25%
}

.col_4 {
    flex: 0 0 33.3333333333%;
    width: 33.3333333333%;
    padding: 0 .75em
}

.col_offset_4 {
    margin-left: 33.3333333333%
}

.col_5 {
    flex: 0 0 41.6666666667%;
    width: 41.6666666667%;
    padding: 0 .75em
}

.col_offset_5 {
    margin-left: 41.6666666667%
}

.col_6 {
    flex: 0 0 50%;
    width: 50%;
    padding: 0 .75em
}

.col_offset_6 {
    margin-left: 50%
}

.col_7 {
    flex: 0 0 58.3333333333%;
    width: 58.3333333333%;
    padding: 0 .75em
}

.col_offset_7 {
    margin-left: 58.3333333333%
}

.col_8 {
    flex: 0 0 66.6666666667%;
    width: 66.6666666667%;
    padding: 0 .75em
}

.col_offset_8 {
    margin-left: 66.6666666667%
}

.col_9 {
    flex: 0 0 75%;
    width: 75%;
    padding: 0 .75em
}

.col_offset_9 {
    margin-left: 75%
}

.col_10 {
    flex: 0 0 83.3333333333%;
    width: 83.3333333333%;
    padding: 0 .75em
}

.col_offset_10 {
    margin-left: 83.3333333333%
}

.col_11 {
    flex: 0 0 91.6666666667%;
    width: 91.6666666667%;
    padding: 0 .75em
}

.col_offset_11 {
    margin-left: 91.6666666667%
}

.col_12 {
    flex: 0 0 100%;
    width: 100%;
    padding: 0 .75em
}

.col_offset_12 {
    margin-left: 100%
}

@media (min-width:576px) {
    .col_sm_offset_0 {
        margin-left: 0
    }

    .col_sm_1 {
        flex: 0 0 8.3333333333%;
        width: 8.3333333333%;
        padding: 0 .75em
    }

    .col_sm_offset_1 {
        margin-left: 8.3333333333%
    }

    .col_sm_2 {
        flex: 0 0 16.6666666667%;
        width: 16.6666666667%;
        padding: 0 .75em
    }

    .col_sm_offset_2 {
        margin-left: 16.6666666667%
    }

    .col_sm_3 {
        flex: 0 0 25%;
        width: 25%;
        padding: 0 .75em
    }

    .col_sm_offset_3 {
        margin-left: 25%
    }

    .col_sm_4 {
        flex: 0 0 33.3333333333%;
        width: 33.3333333333%;
        padding: 0 .75em
    }

    .col_sm_offset_4 {
        margin-left: 33.3333333333%
    }

    .col_sm_5 {
        flex: 0 0 41.6666666667%;
        width: 41.6666666667%;
        padding: 0 .75em
    }

    .col_sm_offset_5 {
        margin-left: 41.6666666667%
    }

    .col_sm_6 {
        flex: 0 0 50%;
        width: 50%;
        padding: 0 .75em
    }

    .col_sm_offset_6 {
        margin-left: 50%
    }

    .col_sm_7 {
        flex: 0 0 58.3333333333%;
        width: 58.3333333333%;
        padding: 0 .75em
    }

    .col_sm_offset_7 {
        margin-left: 58.3333333333%
    }

    .col_sm_8 {
        flex: 0 0 66.6666666667%;
        width: 66.6666666667%;
        padding: 0 .75em
    }

    .col_sm_offset_8 {
        margin-left: 66.6666666667%
    }

    .col_sm_9 {
        flex: 0 0 75%;
        width: 75%;
        padding: 0 .75em
    }

    .col_sm_offset_9 {
        margin-left: 75%
    }

    .col_sm_10 {
        flex: 0 0 83.3333333333%;
        width: 83.3333333333%;
        padding: 0 .75em
    }

    .col_sm_offset_10 {
        margin-left: 83.3333333333%
    }

    .col_sm_11 {
        flex: 0 0 91.6666666667%;
        width: 91.6666666667%;
        padding: 0 .75em
    }

    .col_sm_offset_11 {
        margin-left: 91.6666666667%
    }

    .col_sm_12 {
        flex: 0 0 100%;
        width: 100%;
        padding: 0 .75em
    }

    .col_sm_offset_12 {
        margin-left: 100%
    }
}

@media (min-width:768px) {
    .col_md_offset_0 {
        margin-left: 0
    }

    .col_md_1 {
        flex: 0 0 8.3333333333%;
        width: 8.3333333333%;
        padding: 0 .75em
    }

    .col_md_offset_1 {
        margin-left: 8.3333333333%
    }

    .col_md_2 {
        flex: 0 0 16.6666666667%;
        width: 16.6666666667%;
        padding: 0 .75em
    }

    .col_md_offset_2 {
        margin-left: 16.6666666667%
    }

    .col_md_3 {
        flex: 0 0 25%;
        width: 25%;
        padding: 0 .75em
    }

    .col_md_offset_3 {
        margin-left: 25%
    }

    .col_md_4 {
        flex: 0 0 33.3333333333%;
        width: 33.3333333333%;
        padding: 0 .75em
    }

    .col_md_offset_4 {
        margin-left: 33.3333333333%
    }

    .col_md_5 {
        flex: 0 0 41.6666666667%;
        width: 41.6666666667%;
        padding: 0 .75em
    }

    .col_md_offset_5 {
        margin-left: 41.6666666667%
    }

    .col_md_6 {
        flex: 0 0 50%;
        width: 50%;
        padding: 0 .75em
    }

    .col_md_offset_6 {
        margin-left: 50%
    }

    .col_md_7 {
        flex: 0 0 58.3333333333%;
        width: 58.3333333333%;
        padding: 0 .75em
    }

    .col_md_offset_7 {
        margin-left: 58.3333333333%
    }

    .col_md_8 {
        flex: 0 0 66.6666666667%;
        width: 66.6666666667%;
        padding: 0 .75em
    }

    .col_md_offset_8 {
        margin-left: 66.6666666667%
    }

    .col_md_9 {
        flex: 0 0 75%;
        width: 75%;
        padding: 0 .75em
    }

    .col_md_offset_9 {
        margin-left: 75%
    }

    .col_md_10 {
        flex: 0 0 83.3333333333%;
        width: 83.3333333333%;
        padding: 0 .75em
    }

    .col_md_offset_10 {
        margin-left: 83.3333333333%
    }

    .col_md_11 {
        flex: 0 0 91.6666666667%;
        width: 91.6666666667%;
        padding: 0 .75em
    }

    .col_md_offset_11 {
        margin-left: 91.6666666667%
    }

    .col_md_12 {
        flex: 0 0 100%;
        width: 100%;
        padding: 0 .75em
    }

    .col_md_offset_12 {
        margin-left: 100%
    }
}

@media (min-width:992px) {
    .col_lg_offset_0 {
        margin-left: 0
    }

    .col_lg_1 {
        flex: 0 0 8.3333333333%;
        width: 8.3333333333%;
        padding: 0 .75em
    }

    .col_lg_offset_1 {
        margin-left: 8.3333333333%
    }

    .col_lg_2 {
        flex: 0 0 16.6666666667%;
        width: 16.6666666667%;
        padding: 0 .75em
    }

    .col_lg_offset_2 {
        margin-left: 16.6666666667%
    }

    .col_lg_3 {
        flex: 0 0 25%;
        width: 25%;
        padding: 0 .75em
    }

    .col_lg_offset_3 {
        margin-left: 25%
    }

    .col_lg_4 {
        flex: 0 0 33.3333333333%;
        width: 33.3333333333%;
        padding: 0 .75em
    }

    .col_lg_offset_4 {
        margin-left: 33.3333333333%
    }

    .col_lg_5 {
        flex: 0 0 41.6666666667%;
        width: 41.6666666667%;
        padding: 0 .75em
    }

    .col_lg_offset_5 {
        margin-left: 41.6666666667%
    }

    .col_lg_6 {
        flex: 0 0 50%;
        width: 50%;
        padding: 0 .75em
    }

    .col_lg_offset_6 {
        margin-left: 50%
    }

    .col_lg_7 {
        flex: 0 0 58.3333333333%;
        width: 58.3333333333%;
        padding: 0 .75em
    }

    .col_lg_offset_7 {
        margin-left: 58.3333333333%
    }

    .col_lg_8 {
        flex: 0 0 66.6666666667%;
        width: 66.6666666667%;
        padding: 0 .75em
    }

    .col_lg_offset_8 {
        margin-left: 66.6666666667%
    }

    .col_lg_9 {
        flex: 0 0 75%;
        width: 75%;
        padding: 0 .75em
    }

    .col_lg_offset_9 {
        margin-left: 75%
    }

    .col_lg_10 {
        flex: 0 0 83.3333333333%;
        width: 83.3333333333%;
        padding: 0 .75em
    }

    .col_lg_offset_10 {
        margin-left: 83.3333333333%
    }

    .col_lg_11 {
        flex: 0 0 91.6666666667%;
        width: 91.6666666667%;
        padding: 0 .75em
    }

    .col_lg_offset_11 {
        margin-left: 91.6666666667%
    }

    .col_lg_12 {
        flex: 0 0 100%;
        width: 100%;
        padding: 0 .75em
    }

    .col_lg_offset_12 {
        margin-left: 100%
    }
}

@media (min-width:1200px) {
    .col_xl_offset_0 {
        margin-left: 0
    }

    .col_xl_1 {
        flex: 0 0 8.3333333333%;
        width: 8.3333333333%;
        padding: 0 .75em
    }

    .col_xl_offset_1 {
        margin-left: 8.3333333333%
    }

    .col_xl_2 {
        flex: 0 0 16.6666666667%;
        width: 16.6666666667%;
        padding: 0 .75em
    }

    .col_xl_offset_2 {
        margin-left: 16.6666666667%
    }

    .col_xl_3 {
        flex: 0 0 25%;
        width: 25%;
        padding: 0 .75em
    }

    .col_xl_offset_3 {
        margin-left: 25%
    }

    .col_xl_4 {
        flex: 0 0 33.3333333333%;
        width: 33.3333333333%;
        padding: 0 .75em
    }

    .col_xl_offset_4 {
        margin-left: 33.3333333333%
    }

    .col_xl_5 {
        flex: 0 0 41.6666666667%;
        width: 41.6666666667%;
        padding: 0 .75em
    }

    .col_xl_offset_5 {
        margin-left: 41.6666666667%
    }

    .col_xl_6 {
        flex: 0 0 50%;
        width: 50%;
        padding: 0 .75em
    }

    .col_xl_offset_6 {
        margin-left: 50%
    }

    .col_xl_7 {
        flex: 0 0 58.3333333333%;
        width: 58.3333333333%;
        padding: 0 .75em
    }

    .col_xl_offset_7 {
        margin-left: 58.3333333333%
    }

    .col_xl_8 {
        flex: 0 0 66.6666666667%;
        width: 66.6666666667%;
        padding: 0 .75em
    }

    .col_xl_offset_8 {
        margin-left: 66.6666666667%
    }

    .col_xl_9 {
        flex: 0 0 75%;
        width: 75%;
        padding: 0 .75em
    }

    .col_xl_offset_9 {
        margin-left: 75%
    }

    .col_xl_10 {
        flex: 0 0 83.3333333333%;
        width: 83.3333333333%;
        padding: 0 .75em
    }

    .col_xl_offset_10 {
        margin-left: 83.3333333333%
    }

    .col_xl_11 {
        flex: 0 0 91.6666666667%;
        width: 91.6666666667%;
        padding: 0 .75em
    }

    .col_xl_offset_11 {
        margin-left: 91.6666666667%
    }

    .col_xl_12 {
        flex: 0 0 100%;
        width: 100%;
        padding: 0 .75em
    }

    .col_xl_offset_12 {
        margin-left: 100%
    }
}

.text-center {
    text-align: center
}

.m-auto {
    margin: 0 auto
}

button {
    -webkit-appearance: button;
    width: auto;
    border: 0;
    box-shadow: none;
    background: 0 0;
    outline: 0;
    background: 0 0;
    border-radius: 0;
    cursor: pointer;
    font-size: 1em
}

    button:focus {
        outline: 0
    }

    button .img-wrapper {
        display: flex;
        flex-wrap: wrap;
        justify-content: center
    }

.anchor {
    color: #262626;
    transition: all .3s ease-in-out
}

    .anchor:hover {
        color: #d50032;
        transition: all .3s ease-in-out
    }

.uline {
    position: relative;
    text-decoration: none;
    display: inline-block;
    line-height: 1.5
}

    .uline::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 1px;
        background: #d50032;
        transform: scaleX(1);
        transition: transform .5s ease
    }

    .uline.active::after, .uline:hover::after {
        transition: transform .5s ease;
        transform: scaleX(0)
    }

    .uline.white-col::after {
        background: #fff
    }

    .uline.d-flex {
        display: flex
    }

.w-uline {
    position: relative;
    text-decoration: none;
    display: inline-block
}

    .w-uline::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -.19em;
        width: 100%;
        height: 2px;
        background: #d50032;
        transform: scaleX(0);
        transition: all .3s ease-in-out
    }

    .w-uline.active::after, .w-uline:hover::after {
        transition: all .3s ease-in-out;
        transform: scaleX(1)
    }

    .w-uline.white-col::after {
        background: #fff
    }

.primary-anchor {
    display: inline-flex
}

    .primary-anchor a, .primary-anchor button {
        position: relative;
        display: flex;
        align-items: center;
        padding: 1em 0;
        margin: 0 0 1em 0
    }

        .primary-anchor a .arrow, .primary-anchor button .arrow {
            width: 2.25em;
            padding: 0 0 0 1em
        }

            .primary-anchor a .arrow img, .primary-anchor a .arrow svg, .primary-anchor button .arrow img, .primary-anchor button .arrow svg {
                width: 100%
            }

        .primary-anchor a .text, .primary-anchor button .text {
            color: #444241;
            font-size: 1.125em;
            padding: 0 1em 0 2em;
            text-transform: uppercase;
            transition: all .45s cubic-bezier(.65,0,.076,1)
        }

@media (max-width:991.98px) {
    .primary-anchor a .text, .primary-anchor button .text {
        font-size: 1em
    }
}

.primary-anchor a::before, .primary-anchor button::before {
    content: "";
    position: absolute;
    width: 3.25em;
    height: 3.25em;
    border: 1px solid #d50032;
    border-radius: 2em;
    top: 50%;
    left: 0;
    transform: translate(0,-50%);
    transition: all .45s cubic-bezier(.65,0,.076,1)
}

.primary-anchor a:hover .text, .primary-anchor button:hover .text {
    color: #d50032;
    padding: 0 1em 0 1em;
    transition: all .45s cubic-bezier(.65,0,.076,1)
}

.primary-anchor a:hover::before, .primary-anchor button:hover::before {
    width: 100%;
    transition: all .45s cubic-bezier(.65,0,.076,1)
}

.primary-anchor.white-col a .arrow svg path, .primary-anchor.white-col button .arrow svg path {
    fill: #fff
}

.primary-anchor.white-col a .text, .primary-anchor.white-col button .text {
    color: #fff
}

.primary-anchor.white-col a::before, .primary-anchor.white-col button::before {
    border-color: #fff
}

.primary-anchor.s-font a .text, .primary-anchor.s-font button .text {
    font-size: 1em
}

.gradient-button {
    position: relative;
    font-size: 1em;
    font-family: Tajawal,sans-serif;
    text-transform: uppercase;
    border: none;
    color: #fff;
    padding: 1em 2.625em;
    transition: all .3s ease-in-out;
    z-index: 1
}

    .gradient-button::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-size: 300% 100%;
        background-image: linear-gradient(to right,#f47290,#db0032,#db0032,#f47290);
        z-index: -1;
        transition: all .3s ease-in-out
    }

    .gradient-button:hover::before {
        background-position: 100% 0;
        transition: all .3s ease-in-out
    }

.secondary-anchor a {
    position: relative
}

    .secondary-anchor a::after {
        content: "";
        position: absolute;
        left: 50%;
        transform: translate(-50%,-50%);
        bottom: -.3125em;
        height: 1px;
        width: 100%;
        background: #d50032;
        transition: .5s
    }

    .secondary-anchor a:hover::after {
        width: 90%
    }

.generic-arrows-wrapper {
    position: absolute;
    width: 8.0625em;
    right: 0;
    bottom: 0;
    padding: 1.5em 1.2em;
    display: flex;
    justify-content: space-between
}

@media (max-width:767.98px) {
    .generic-arrows-wrapper {
        padding: 1em;
        width: 7em
    }
}

.generic-arrows-wrapper .btn {
    position: relative;
    height: 100%;
    top: unset;
    left: unset;
    right: unset;
    margin: 0
}

    .generic-arrows-wrapper .btn::after {
        content: ""
    }

.transparent-btn {
    background: rgba(255,255,255,.2);
    padding: .625em .5em;
    font-size: 1.125em;
    display: flex;
    align-items: center;
    margin-right: .625em;
    transition: all .3s ease-in-out
}

    .transparent-btn:hover {
        box-shadow: 0 0 16px 2px rgba(0,0,0,.51);
        -webkit-box-shadow: 0 0 16px 2px rgba(0,0,0,.51);
        -moz-box-shadow: 0 0 16px 2px rgba(0,0,0,.51)
    }

@media (max-width:767.98px) {
    .transparent-btn {
        margin: 0 .625em .625em 0
    }
}

.transparent-btn.white-text {
    color: #fff
}

.transparent-btn .icon-wrapper {
    margin-right: .3125em
}

.arrow-anchor .arrow {
    margin-left: .75em;
    transition: all .3s ease-in-out;
    width: .8125em
}

    .arrow-anchor .arrow path {
        fill: #fff
    }

.arrow-anchor:hover .arrow {
    margin-left: .625em
}

.newsletter {
    position: relative;
    padding: 2.625em 0;
    background: rgba(218,215,215,.2);
    border-top: 1px solid rgba(38,38,38,.2);
    border-bottom: 1px solid rgba(38,38,38,.2)
}

@media (min-width:576px) {
    .newsletter .title {
        margin-bottom: 0
    }
}

.newsletter__form {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end
}

@media (max-width:575.98px) {
    .newsletter__form {
        justify-content: flex-start
    }
}

.newsletter__form .input {
    width: 31.25em;
    font-size: 1em;
    font-family: Tajawal,sans-serif;
    color: #444241;
    padding: 1em 1.25em;
    margin: 0 1.25em 0 0;
    background: #fff;
    transition: all .3s ease-in-out;
    border-color: #dad7d7;
    border: 1px solid #dad7d7
}

    .newsletter__form .input::placeholder {
        color: rgba(68,66,65,.85)
    }

    .newsletter__form .input:focus {
        border-color: #d50032;
        transition: all .3s ease-in-out
    }

@media (max-width:991.98px) {
    .newsletter__form .input {
        width: 24em
    }
}

@media (max-width:575.98px) {
    .newsletter__form .input {
        width: 100%;
        margin: 0 0 1em 0
    }
}

.newsletter__form .submit {
    position: relative;
    font-size: 1em;
    font-family: Tajawal,sans-serif;
    text-transform: uppercase;
    border: none;
    color: #fff;
    padding: 1em 2.625em;
    transition: all .3s ease-in-out;
    z-index: 1
}

@media (max-width:991.98px) {
    .newsletter__form .submit {
        padding: 1em 1.25em
    }
}

@media (max-width:575.98px) {
    .newsletter__form .submit {
        width: 100%
    }
}

.newsletter__form .submit::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: 300% 100%;
    background-image: linear-gradient(to right,#f47290,#db0032,#db0032,#f47290);
    z-index: -1;
    transition: all .3s ease-in-out
}

.newsletter__form .submit:hover::before {
    background-position: 100% 0;
    transition: all .3s ease-in-out
}

.newsletter__form .loaderimgbtn {
    height: 17px;
    text-align: center;
    margin: 0;
    padding: 0;
    top: 50% !important;
    left: 50% !important;
    position: absolute;
    transform: translate(-50%,-50%) !important
}

.eventCardsWrapper {
    display: none
}

    .eventCardsWrapper.show {
        display: flex
    }

#subscribe-message {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 2em auto 0
}

.expertiseCard .cardWrapper {
    position: relative;
    margin: 0 0 1.875em 0
}

.expertiseCard .cardImg {
    position: relative;
    width: 100%;
    height: 25em;
    overflow: hidden
}

    .expertiseCard .cardImg::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: linear-gradient(to bottom,rgba(0,0,0,0) 0,#000 100%);
        z-index: 1
    }

    .expertiseCard .cardImg img {
        transform: scale(1);
        transition: all .3s ease-in-out
    }

.expertiseCard .descripWrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    padding: 1.875em 2.5em 1.875em 1.875em
}

    .expertiseCard .descripWrapper::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: linear-gradient(to bottom,rgba(219,0,50,0) 0,#db0032 100%);
        z-index: -1;
        opacity: 0;
        transition: all .3s ease-in-out
    }

.expertiseCard:hover .cardImg img {
    transform: scale(1.1);
    transition: all .3s ease-in-out
}

.expertiseCard:hover .descripWrapper::before {
    opacity: 1;
    transition: all .3s ease-in-out
}

.projectsCardWrapper, .sectorCardsWrapper {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -.75em
}

.sectorCard {
    width: 20%;
    padding: 0 .75em;
    margin: 0 0 1em 0
}

@media (max-width:1199.98px) {
    .sectorCard {
        width: 33.33%
    }
}

@media (max-width:575.98px) {
    .sectorCard {
        width: 100%
    }
}

.sectorCard .cardImg {
    position: relative;
    width: 100%;
    height: 18.75em;
    overflow: hidden
}

    .sectorCard .cardImg img {
        transform: scale(1);
        transition: all .3s ease-in-out
    }

.sectorCard:hover .cardImg img {
    transform: scale(1.1);
    transition: all .3s ease-in-out
}

.eventCard .cardImg {
    height: 21.25em;
    margin: 0 0 1em 0
}

@media (min-width:1025px) {
    .eventCard .descrip {
        padding-right: 2.38em
    }
}

.newsCardsWrapper {
    display: flex;
    flex-wrap: wrap;
    margin: 2.5em -5em 0;
    width: -webkit-fill-available
}

@media (max-width:1199.98px) {
    .newsCardsWrapper {
        margin: 0 -1em
    }
}

.newsCardsWrapper .newsCard {
    flex: 0 0 33.33%;
    width: 33.33%;
    padding: 0 5.68em;
    margin: 0 0 3.125em 0
}

@media (max-width:1199.98px) {
    .newsCardsWrapper .newsCard {
        padding: 0 1em;
        margin: 0 0 2em 0
    }
}

@media (max-width:575.98px) {
    .newsCardsWrapper .newsCard {
        flex: 0 0 100%;
        width: 100%
    }
}

.newsCardsWrapper .newsCard .cardImg {
    width: 100%;
    height: 21.25em
}

@media (max-width:575.98px) {
    .newsCardsWrapper .newsCard .cardImg {
        height: auto
    }
}

.newsCardsWrapper .newsCard.knowledge-card .cardImg {
    width: 100%;
    height: 14.25em
}

@media (max-width:991.98px) {
    .newsCardsWrapper .newsCard.knowledge-card .cardImg {
        height: 10em
    }
}

.load-more-btn {
    margin-top: 1.25em
}

.genericTabsContent .content-item {
    display: none
}

    .genericTabsContent .content-item.active {
        display: block
    }

.tabs__styling {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0;
    padding: 0 0 5em 0;
    list-style-type: none
}

    .tabs__styling .tab-item {
        position: relative;
        padding: 1em 5em;
        border-right: 1px solid #8e8a8a;
        cursor: pointer;
        position: relative;
        color: #444241;
        font-size: 1em;
        text-transform: uppercase;
        z-index: 1
    }

@media (max-width:767.98px) {
    .tabs__styling .tab-item {
        border: none
    }
}

.tabs__styling .tab-item:last-child {
    border-right: none
}

@media (max-width:1199.98px) {
    .tabs__styling .tab-item {
        font-size: 1.125em
    }
}

@media (max-width:991.98px) {
    .tabs__styling .tab-item {
        font-size: 1em
    }
}

.tabs__styling .tab-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: 300% 100%;
    background-color: #f5f5f5;
    z-index: -1;
    transition: all .3s ease-in-out
}

.tabs__styling .tab-item.active {
    color: #fff
}

    .tabs__styling .tab-item.active::before {
        background-image: linear-gradient(to right,#f47290,#db0032,#db0032,#f47290)
    }

.tabs__styling .tab-item:hover::before {
    background-position: 100% 0;
    transition: all .3s ease-in-out
}

.career-listing-card {
    padding: 2.5em
}

.side-card .knowledge-card-height {
    height: 8.5625em
}

@media (max-width:991.98px) {
    .side-card .knowledge-card-height {
        height: 6em
    }
}

@media (max-width:767.98px) {
    .side-card .knowledge-card-height {
        height: 14em
    }
}

@media (max-width:991.98px) {
    .knowledge-blogs .h5 {
        font-size: 1em
    }
}

.news-center .newsCard .cardImg {
    height: 14.25em
}

.projects-card {
    width: 25%;
    padding: 0 .75em;
    margin: 0 0 3.125em 0
}

@media (max-width:1199.98px) {
    .projects-card {
        width: 33.33%
    }
}

@media (max-width:767.98px) {
    .projects-card {
        margin: 0 0 1em 0
    }
}

@media (max-width:575.98px) {
    .projects-card {
        width: 100%
    }
}

.projects-card .cardImg {
    position: relative;
    width: 100%;
    height: 24.8em;
    overflow: hidden
}

@media (max-width:991.98px) {
    .projects-card .cardImg {
        height: 18em
    }
}

@media (max-width:575.98px) {
    .projects-card .cardImg {
        height: 30em
    }
}

.projects-card .cardImg img {
    transform: scale(1);
    transition: all .3s ease-in-out;
    width: 100%
}

.projects-card:hover .cardImg img {
    transform: scale(1.1);
    transition: all .3s ease-in-out
}

.projects-card .content {
    padding: 1.25em 0;
    border-bottom: 1px solid rgba(142,138,138,.5)
}

@media (max-width:767.98px) {
    .projects-card .content {
        text-align: center
    }
}

.cardsWrapper {
    display: none
}

    .cardsWrapper.active {
        display: flex
    }

.logoElemSec {
    position: relative;
    overflow: hidden;
    padding: 5em 0 11.25em 0
}

@media (max-width:991.98px) {
    .logoElemSec {
        padding: 3em 0 3em 0
    }
}

@media (max-width:767.98px) {
    .logoElemSec {
        padding: 2em 0 0 0
    }
}

.logoElemSec::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: calc(100% - 11.25em);
    background: #f3f3f8;
    z-index: -1
}

@media (max-width:1199.98px) {
    .logoElemSec::before {
        width: 100%
    }
}

@media (max-width:991.98px) {
    .logoElemSec::before {
        height: calc(100% - 3em)
    }
}

@media (max-width:575.98px) {
    .logoElemSec::before {
        height: 100%
    }
}

.logoElemSec__bgImg {
    position: absolute;
    width: 31.8125em;
    height: 33.75em;
    bottom: 0;
    right: -2.8125em;
    border-radius: 100%;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    overflow: hidden;
    z-index: 0
}

@media (max-width:1199.98px) {
    .logoElemSec__bgImg {
        display: none
    }
}

.logoElemSec__bgImg img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.logoElemSec__bgElement {
    position: absolute;
    width: 22.8125em;
    height: 33.8125em;
    top: 0;
    left: 0;
    overflow: hidden;
    z-index: 1
}

@media (max-width:1199.98px) {
    .logoElemSec__bgElement {
        display: none
    }
}

.logoElemSec__bgElement img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.logoElemSec__container {
    max-width: 100%;
    padding: 0 16% 0 16.25%
}

@media (max-width:1199.98px) {
    .logoElemSec__container {
        padding: 0 5em
    }
}

@media (max-width:991.98px) {
    .logoElemSec__container {
        padding: 0 3em
    }
}

@media (max-width:575.98px) {
    .logoElemSec__container {
        padding: 0 2em
    }
}

.logoElemSec__wrapper {
    position: relative;
    padding-bottom: 5em
}

@media (max-width:767.98px) {
    .logoElemSec__wrapper {
        padding-bottom: 3em
    }
}

@media (max-width:575.98px) {
    .logoElemSec__wrapper {
        padding-bottom: 2em
    }
}

.logoElemSec__wrapper::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #f3f3f8;
    z-index: 0
}

.logoElemSec__leftsec {
    padding: 0
}

@media (max-width:991.98px) {
    .logoElemSec__leftsec {
        padding: 0
    }
}

.logoElemSec__leftsec .img-wrapper {
    position: relative;
    width: 100%;
    height: 34.375em;
    overflow: hidden
}

@media (max-width:1199.98px) {
    .logoElemSec__leftsec .img-wrapper {
        height: 28em
    }
}

@media (max-width:991.98px) {
    .logoElemSec__leftsec .img-wrapper {
        height: 20em
    }
}

.logoElemSec__leftsec .img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1);
    transition: 3.5s
}

.logoElemSec__leftsec .img-wrapper:hover img {
    transform: scale(1.125);
    transition: 3.5s
}

.logoElemSec__rightsec {
    display: flex;
    flex-direction: column;
    padding: 0 5em 0 5em
}

@media (max-width:991.98px) {
    .logoElemSec__rightsec {
        padding: 0 0 0 3em
    }
}

@media (max-width:575.98px) {
    .logoElemSec__rightsec {
        padding: 0;
        flex-direction: column-reverse
    }
}

.logoElemSec__rightsec .anchor-wrapper {
    display: flex;
    justify-content: flex-end
}

@media (max-width:575.98px) {
    .logoElemSec__rightsec .anchor-wrapper {
        justify-content: flex-start
    }
}

.logoElemSec__rightsec .anchor-wrapper .primary-anchor {
    transform: translateX(6em)
}

@media (max-width:1199.98px) {
    .logoElemSec__rightsec .anchor-wrapper .primary-anchor {
        transform: translateX(0)
    }
}

.logoElemSec__rightsec .genericHead {
    padding: 13.875em 0 0 0
}

@media (max-width:575.98px) {
    .logoElemSec__rightsec .genericHead {
        padding: 2em 0 0 0
    }
}

.logoElemSec.white-bg::before {
    background: #fff
}

.logoElemSec.white-bg .logoElemSec__wrapper::before {
    background: #fff
}

.breadcrums {
    padding: 3em 0 0 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    position: relative
}

@media (min-width:1025px) {
    .breadcrums {
        width: 100%
    }
}

.breadcrums::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    background: #8e8a8a;
    bottom: 0;
    left: 0;
    z-index: -1;
    opacity: .3
}

.breadcrums li {
    padding-right: 1.4375em;
    position: relative
}

@media (max-width:575.98px) {
    .breadcrums li {
        padding-right: .775em
    }
}

.breadcrums li::after {
    content: "";
    position: absolute;
    right: .6875em;
    top: 50%;
    height: 1em;
    width: 1px;
    background: #000;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%)
}

@media (max-width:575.98px) {
    .breadcrums li::after {
        right: 6px
    }
}

.breadcrums li:last-child::after {
    display: none
}

.breadcrums li a {
    color: #444241;
    font-size: 1.125em;
    text-transform: capitalize;
    font-weight: 400;
    position: relative;
    transition: all .3s ease-in-out
}

    .breadcrums li a::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        width: 0%;
        background: #d50032;
        transition: all .3s ease-in-out;
        z-index: -1
    }

@media (max-width:575.98px) {
    .breadcrums li a {
        font-size: .875em
    }
}

.breadcrums li a:hover {
    color: #fff
}

    .breadcrums li a:hover::after {
        width: 100%;
        left: 0;
        right: unset
    }

.breadcrums li.active a {
    color: #d50032;
    font-weight: 500;
    transition: all .3s ease-in-out
}

    .breadcrums li.active a:hover {
        color: #fff
    }

.breadcrums-con .breadcrums::after {
    z-index: 0
}

@media (min-width:1200px) {
    .polygon-breadcrum {
        padding-top: 3em
    }
}

.polygon-breadcrum .breadcrums {
    padding: 0;
    margin-bottom: 4.2743em
}

@media (max-width:767.98px) {
    .polygon-breadcrum .breadcrums {
        margin-bottom: 2em
    }
}

.bullet-points {
    list-style: none;
    margin: 2.5em 0 2.5em 0;
    flex-wrap: wrap
}

@media (max-width:767.98px) {
    .bullet-points {
        margin: 1em 0 1em 0;
        justify-content: center
    }
}

.bullet-points li {
    margin-right: 2.6em;
    position: relative;
    font-size: 1.125em;
    color: #444241
}

@media (max-width:767.98px) {
    .bullet-points li {
        margin-right: 0;
        flex-direction: column
    }
}

.bullet-points li::after {
    content: "";
    position: absolute;
    left: -.625em;
    top: .5em;
    transform: translate(-50%,-50%);
    width: .375em;
    height: .375em;
    background: #d50032;
    border-radius: 50%
}

@media (max-width:767.98px) {
    .bullet-points li::after {
        transform: translate(-50%,-100%)
    }
}

.bullet-points.black-col li::after {
    background: #444241
}

.polygon {
    position: absolute;
    width: 36%;
    height: 100%;
    top: 0;
    z-index: -1
}

    .polygon::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0
    }

    .polygon.left {
        left: 0;
        -webkit-clip-path: polygon(0 0,100% 0,50% 100%,0 100%);
        clip-path: polygon(0 0,100% 0,50% 100%,0 100%)
    }

    .polygon.right {
        right: 0;
        -webkit-clip-path: polygon(0 0,100% 0,100% 100%,50% 100%);
        clip-path: polygon(0 0,100% 0,100% 100%,50% 100%)
    }

    .polygon.red-overlay::after {
        background: #e22726;
        opacity: .79
    }

@media (max-width:767.98px) {
    .polygon {
        display: none
    }
}

.polygon .img-wrapper {
    height: 100%
}

    .polygon .img-wrapper img {
        height: 100%
    }

.team-card .genericHead {
    padding: 1.25em 0 3.125em 0
}

    .team-card .genericHead h5, .team-card .genericHead p {
        margin-bottom: .3em
    }

.load-more-btn .title {
    font-weight: 500;
    font-size: 1.125em;
    margin-top: .9375em;
    color: #444241
}

.banner-form-wrapper {
    background: #fef5f5;
    background: linear-gradient(284deg,#fef5f5 0,#f47290 35%,#db0032 100%);
    padding: 2.5em 0;
    position: absolute;
    width: 100%;
    bottom: 0
}

.banner-form-wrapper__form {
    margin-top: 2.25em
}

    .banner-form-wrapper__form .input {
        width: 28.44em;
        font-size: 1em;
        font-family: Tajawal,sans-serif;
        color: #444241;
        padding: 1em 1.25em;
        margin: 0 2.4em 0 0;
        background: 0 0;
        border: none;
        transition: all .3s ease-in-out;
        border: 1px solid #fff;
        color: #fff
    }

@media (max-width:991.98px) {
    .banner-form-wrapper__form .input {
        width: 14em
    }
}

.banner-form-wrapper__form .input::placeholder {
    color: #fff
}

.banner-form-wrapper__form .input:focus {
    border-color: #fff;
    transition: all .3s ease-in-out
}

@media (max-width:1199.98px) {
    .banner-form-wrapper__form .input {
        width: 20em
    }
}

@media (max-width:991.98px) {
    .banner-form-wrapper__form .input {
        width: 15em;
        margin: 0 1.25em 1em 0
    }
}

@media (max-width:575.98px) {
    .banner-form-wrapper__form .input {
        width: 100%
    }
}

.banner-form-wrapper__form .submit {
    position: relative;
    font-size: 1em;
    font-family: Tajawal,sans-serif;
    text-transform: uppercase;
    border: none;
    background: #fff;
    padding: 1em 5em;
    transition: all .3s ease-in-out;
    z-index: 1
}

@media (min-width:1025px) {
    .banner-form-wrapper__form .submit {
        padding: 1em 6.625em
    }
}

@media (max-width:575.98px) {
    .banner-form-wrapper__form .submit {
        width: 100%
    }
}

.banner-form-wrapper__form .submit:hover {
    background: #d50032;
    color: #fff
}

.round-icon {
    padding: 1.75em;
    border: 1px solid #d50032;
    border-radius: 50%;
    margin-right: 3em;
    width: 5em;
    height: 5em;
    transition: all .3s ease-in-out
}

@media (max-width:1199.98px) {
    .round-icon {
        padding: 1em;
        margin-right: 2em;
        width: 4em;
        height: 4em
    }
}

@media (max-width:767.98px) {
    .round-icon {
        padding: .8em;
        width: 3em;
        height: 3em;
        margin-right: 1em
    }
}

.round-icon svg {
    transition: all .3s ease-in-out
}

    .round-icon svg path {
        transition: all .3s ease-in-out
    }

.round-icon:hover {
    background: #8e8a8a;
    border: 1px solid #8e8a8a
}

    .round-icon:hover svg {
        fill: #fff
    }

        .round-icon:hover svg path {
            fill: #fff
        }

.social-icons {
    margin-top: .9375em
}

    .social-icons .icon {
        width: 1em;
        margin-right: .9375em
    }

.contact-form-wrapper {
    position: relative
}

    .contact-form-wrapper .contact-form {
        padding: 3.125em 0 0 0
    }

@media (max-width:991.98px) {
    .contact-form-wrapper .contact-form {
        padding: 1.5em 0 0 0
    }
}

.contact-form-wrapper .contact-form .input-container {
    display: flex;
    align-items: center;
    height: 50px;
    position: relative;
    width: 100%;
    margin: 0 0 3em 0
}

@media (max-width:575.98px) {
    .contact-form-wrapper .contact-form .input-container {
        margin: 0 0 2.5em 0
    }
}

.contact-form-wrapper .contact-form .input-container.text-area {
    height: auto
}

.contact-form-wrapper .contact-form .input-container .placeholder {
    color: #000;
    font-size: 1.125em;
    font-family: Tajawal,sans-serif;
    font-weight: 500;
    letter-spacing: -.05em;
    left: 20px;
    line-height: 14px;
    pointer-events: none;
    position: absolute;
    transform-origin: 0 50%;
    transition: transform .2s,color .2s;
    top: 20px;
    transition: .4s
}

.contact-form-wrapper .contact-form .input-container .input {
    background-color: transparent;
    border: 1px solid #dad7d7;
    font-size: 1.375em;
    font-family: Tajawal,sans-serif;
    font-weight: 500;
    letter-spacing: -.05em;
    height: 100%;
    width: 100%;
    padding-left: 1.25em
}

@media (max-width:1199.98px) {
    .contact-form-wrapper .contact-form .input-container .input {
        font-size: 1.125em
    }
}

.contact-form-wrapper .contact-form .input-container .input:focus {
    outline: 0
}

.contact-form-wrapper .contact-form .input-container .input::placeholder {
    font-size: 1em;
    font-family: Tajawal,sans-serif;
    font-weight: 500;
    letter-spacing: -.05em
}

.contact-form-wrapper .contact-form .input-container textarea {
    resize: none;
    height: 9.375em !important;
    padding-top: .5em;
    padding-right: 1.25em
}

@media (max-width:575.98px) {
    .contact-form-wrapper .contact-form .input-container textarea {
        padding-top: .5em
    }
}

.contact-form-wrapper .contact-form .input-container .cut {
    height: 20px;
    left: 0;
    position: absolute;
    top: -30px;
    transform: translateY(0);
    transition: transform .2s;
    width: 76px
}

.contact-form-wrapper .contact-form .input-container .input:focus ~ .cut, .contact-form-wrapper .contact-form .input-container .input:not(:placeholder-shown) ~ .cut {
    transform: translateY(8px)
}

.contact-form-wrapper .contact-form .input-container .input:focus ~ .placeholder, .contact-form-wrapper .contact-form .input-container .input:not(:placeholder-shown) ~ .placeholder {
    transform: translateY(-35px) translateX(0) scale(.75);
    font-size: 1.1em
}

.contact-form-wrapper .contact-form .input-container .input:not(:placeholder-shown) ~ .placeholder {
    color: #d50032;
    font-size: 1.1em
}

.contact-form-wrapper .contact-form .gradient-button {
    height: 3.375em;
    display: flex;
    align-items: center;
    justify-content: center
}

.clip-box-right {
    position: absolute;
    top: 0;
    right: 0;
    width: 31.35%;
    height: 100%;
    z-index: -1;
    background: #fff;
    -webkit-clip-path: polygon(72% 0,100% 0,100% 100%,0 100%);
    clip-path: polygon(72% 0,100% 0,100% 100%,0 100%)
}

@media (max-width:767.98px) {
    .clip-box-right {
        display: none
    }
}

.related-projects {
    height: 35.5em
}

@media (max-width:767.98px) {
    .related-projects {
        height: auto
    }
}

.related-projects .swiper-wrapper {
    z-index: -1
}

.related-projects .content-wrapper {
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    width: 100%;
    z-index: 2;
    padding: 0 2.5em 2.5em;
    transition: all .3s ease-in-out
}

@media (max-width:767.98px) {
    .related-projects .content-wrapper {
        padding: 0 1em 1em
    }
}

.related-projects .content-wrapper .title {
    margin-bottom: .3em;
    transition: all .3s ease-in-out
}

.related-projects .content-wrapper .number {
    font-size: 5em;
    opacity: .5
}

.related-projects .content-wrapper .btn-wrapper {
    flex-wrap: wrap
}

.related-projects .swiper-slide {
    width: 47.9375em;
    transition: height .8s;
    height: 28.75em;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start
}

@media (max-width:1199.98px) {
    .related-projects .swiper-slide {
        width: 45em
    }
}

.related-projects .swiper-slide .img-wrapper {
    height: 28.5em;
    transform: scale(.78);
    transition: all .3s ease-in-out,height .8s;
    position: relative
}

@media (max-width:767.98px) {
    .related-projects .swiper-slide .img-wrapper {
        transform: scaleX(1);
        height: 22em
    }
}

@media (max-width:1199.98px) {
    .related-projects .swiper-slide .img-wrapper {
        transform: scale(.85)
    }
}

.related-projects .swiper-slide .img-wrapper img {
    height: 100%;
    object-fit: cover;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    transition: all .3s ease-in-out
}

.related-projects .swiper-slide .img-wrapper::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    z-index: 1;
    background: linear-gradient(0deg,#1f1f1f 0,rgba(249,249,249,0) 40%,rgba(255,255,255,0) 20%)
}

.related-projects .swiper-slide.swiper-slide-active {
    height: 100%
}

    .related-projects .swiper-slide.swiper-slide-active .img-wrapper {
        height: 35.1875em;
        transform: scaleX(1.1);
        margin: 0;
        transition: all .3s ease-in-out
    }

@media (max-width:1199.98px) {
    .related-projects .swiper-slide.swiper-slide-active .img-wrapper {
        height: 30em;
        transform: translateX(1)
    }
}

@media (max-width:767.98px) {
    .related-projects .swiper-slide.swiper-slide-active .img-wrapper {
        transform: scaleX(1);
        height: 22em
    }
}

.related-projects .swiper-slide.swiper-slide-active .img-wrapper img {
    -webkit-filter: grayscale(0);
    filter: grayscale(0)
}

.related-projects .swiper-slide.swiper-slide-active .content-wrapper {
    position: absolute;
    left: 0
}

@media (max-width:767.98px) {
    .related-projects .swiper-slide.swiper-slide-active .content-wrapper {
        flex-direction: column
    }
}

.related-projects .swiper-slide.swiper-slide-active .content-wrapper .title {
    font-size: 2.5em
}

.related-projects .swiper-slide.swiper-slide-active .content-wrapper .number {
    font-size: 7.5em
}

@media (max-width:767.98px) {
    .related-projects .swiper-slide.swiper-slide-active .content-wrapper .number {
        font-size: 4.5em;
        width: 100%;
        text-align: end
    }
}

.related-projects .progress-bar {
    width: 22.5em;
    position: absolute;
    bottom: 1.875em;
    left: 6.5em;
    z-index: 99;
    height: .5em
}

@media (max-width:1199.98px) {
    .related-projects .progress-bar {
        display: none
    }
}

.related-projects .progress-bar .swiper-pagination {
    height: 1px
}

    .related-projects .progress-bar .swiper-pagination .swiper-pagination-progressbar-fill {
        background: #444241;
        height: 3px;
        top: -1px;
        border-radius: 5%
    }

.related-projects .genaric-arrow {
    position: absolute;
    right: 24.1em;
    bottom: 1.875em;
    width: 5.9375em;
    display: flex;
    justify-content: space-around;
    height: 3em;
    align-items: center;
    flex-direction: row-reverse
}

@media (max-width:1199.98px) {
    .related-projects .genaric-arrow {
        right: auto;
        left: 50%;
        bottom: 0;
        transform: translate(-50%,0);
        width: 7em
    }
}

.related-projects .genaric-arrow .swiper-button-next, .related-projects .genaric-arrow .swiper-button-prev {
    position: relative;
    top: 0;
    height: 3em;
    margin-top: 0;
    width: auto;
    transition: all .3s ease-in-out;
    border-radius: .2em;
    padding: .5em
}

    .related-projects .genaric-arrow .swiper-button-next::after, .related-projects .genaric-arrow .swiper-button-prev::after {
        color: #444241;
        font-size: 1.4375em;
        font-weight: 800;
        transition: all .3s ease-in-out
    }

    .related-projects .genaric-arrow .swiper-button-next:hover, .related-projects .genaric-arrow .swiper-button-prev:hover {
        background: #d50032
    }

        .related-projects .genaric-arrow .swiper-button-next:hover::after, .related-projects .genaric-arrow .swiper-button-prev:hover::after {
            color: #fff
        }

.related-projects .genaric-arrow .swiper-button-prev {
    right: 0;
    left: auto
}

.related-projects .genaric-arrow .swiper-button-next {
    left: 0;
    right: auto
}

.related-projects .genaric-arrow.line::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    height: 1.4375em;
    width: .125em;
    background: #000;
    transform: translate(-50%,-50%)
}

.projects--slider {
    width: 86%
}

@media (max-width:991.98px) {
    .projects--slider {
        width: 100%
    }
}

.projects--slider .swiper-slide {
    height: 37.3em
}

@media (max-width:991.98px) {
    .projects--slider .swiper-slide {
        height: 26em
    }
}

@media (max-width:575.98px) {
    .projects--slider .swiper-slide {
        height: 15em
    }
}

.projects--slider .swiper-slide::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0%;
    background: #fff;
    background: linear-gradient(180deg,rgba(255,255,255,0) 0,rgba(0,0,0,.667) 100%);
    transition: all .3s ease-in-out
}

.projects--slider .swiper-slide.swiper-slide-active::after {
    height: 100%
}

.projects--slider .swiper-pagination-bullet {
    background: #dad7d7
}

    .projects--slider .swiper-pagination-bullet.swiper-pagination-bullet-active {
        background: #d50032
    }

.projects--slider--thumb {
    height: 37.3em;
    width: 10.7%;
    margin-left: 1.875em
}

@media (max-width:991.98px) {
    .projects--slider--thumb {
        width: 100%;
        margin: 2em 0 0 0;
        height: auto
    }
}

.projects--slider--thumb .swiper-slide {
    height: 6.25em;
    border: 1px solid transparent;
    transition: all .3s ease-in-out
}

    .projects--slider--thumb .swiper-slide.swiper-slide-thumb-active {
        border-color: #d50032;
        box-shadow: 4px 0 20px 20px rgba(217,217,217,.1);
        -webkit-box-shadow: 4px 0 20px 20px rgba(217,217,217,.1);
        -moz-box-shadow: 4px 0 20px 20px rgba(217,217,217,.1)
    }

.scrollbox {
    overflow-y: auto;
    scroll-behavior: smooth
}

    .scrollbox::-webkit-scrollbar {
        background-color: transparent;
        width: 3px;
        opacity: 0;
        -webkit-transition: all .5s;
        transition: all .5s;
        border-radius: 10px
    }

    .scrollbox:hover::-webkit-scrollbar {
        width: 3px;
        opacity: 1;
        -webkit-transition: all .5s;
        transition: all .5s
    }

    .scrollbox:hover::-webkit-scrollbar-thumb {
        -webkit-transition: all .5s;
        transition: all .5s;
        background-color: rgba(219,0,50,.8)
    }

.navigation-wrapper {
    display: flex;
    justify-content: flex-end;
    align-items: center
}

.navigation {
    position: fixed;
    left: -100%;
    width: 100%;
    height: 100vh;
    top: 0;
    transition: all .9s ease;
    background: linear-gradient(135deg,#f47290 0,#db0032 42%);
    display: flex;
    flex-wrap: wrap;
    z-index: 7
}

@media (max-width:991.98px) {
    .navigation {
        flex-direction: column-reverse
    }
}

.navigation.open {
    left: 0
}

    .navigation.open .menu .menu__item {
        opacity: 1;
        visibility: visible;
        transition: all .3s ease-in-out;
        transition-delay: .9s;
        margin-bottom: 0
    }

        .navigation.open .menu .menu__item:nth-child(1) .menu__item--link {
            transform: translateY(0);
            opacity: 1;
            visibility: visible;
            transition: all .3s ease-in-out;
            transition-delay: 1s
        }

        .navigation.open .menu .menu__item:nth-child(2) .menu__item--link {
            transform: translateY(0);
            opacity: 1;
            visibility: visible;
            transition: all .3s ease-in-out;
            transition-delay: 1.1s
        }

        .navigation.open .menu .menu__item:nth-child(3) .menu__item--link {
            transform: translateY(0);
            opacity: 1;
            visibility: visible;
            transition: all .3s ease-in-out;
            transition-delay: 1.2s
        }

        .navigation.open .menu .menu__item:nth-child(4) .menu__item--link {
            transform: translateY(0);
            opacity: 1;
            visibility: visible;
            transition: all .3s ease-in-out;
            transition-delay: 1.3s
        }

        .navigation.open .menu .menu__item:nth-child(5) .menu__item--link {
            transform: translateY(0);
            opacity: 1;
            visibility: visible;
            transition: all .3s ease-in-out;
            transition-delay: 1.4s
        }

        .navigation.open .menu .menu__item:nth-child(6) .menu__item--link {
            transform: translateY(0);
            opacity: 1;
            visibility: visible;
            transition: all .3s ease-in-out;
            transition-delay: 1.5s
        }

        .navigation.open .menu .menu__item:nth-child(7) .menu__item--link {
            transform: translateY(0);
            opacity: 1;
            visibility: visible;
            transition: all .3s ease-in-out;
            transition-delay: 1.6s
        }

        .navigation.open .menu .menu__item:nth-child(8) .menu__item--link {
            transform: translateY(0);
            opacity: 1;
            visibility: visible;
            transition: all .3s ease-in-out;
            transition-delay: 1.7s
        }

        .navigation.open .menu .menu__item:nth-child(9) .menu__item--link {
            transform: translateY(0);
            opacity: 1;
            visibility: visible;
            transition: all .3s ease-in-out;
            transition-delay: 1.8s
        }

    .navigation.open .menuImg {
        clip-path: inset(0 0 0 0);
        transition: 1s;
        transition-delay: .9s
    }

    .navigation.open .menuContactWrapper {
        opacity: 1;
        visibility: visible;
        transition: all .3s ease-in-out;
        transform: translateY(0);
        transition-delay: .9s
    }

@media (max-width:575.98px) {
    .navigation {
        width: 100%
    }
}

.navigation__leftsec {
    display: flex;
    flex-direction: column;
    width: 70%;
    height: 100%;
    padding: 2em 0 1em 10.25%
}

@media (max-width:1199.98px) {
    .navigation__leftsec {
        padding: 0 5em
    }
}

@media (max-width:991.98px) {
    .navigation__leftsec {
        width: 100%;
        height: 70%;
        padding: 0 3em
    }
}

@media (max-width:575.98px) {
    .navigation__leftsec {
        padding: 0 2em
    }
}

.navigation__leftsec .menuContactWrapper {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding: 0 5em 0 0;
    margin: 0;
    list-style-type: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(5px);
    transition: all .3s ease-in-out
}

@media (max-width:991.98px) {
    .navigation__leftsec .menuContactWrapper {
        padding: 0
    }
}

.navigation__leftsec .menuContactWrapper .contact-item {
    display: flex;
    align-items: center;
    margin: 0 3.75em 1em 0
}

    .navigation__leftsec .menuContactWrapper .contact-item .contact-label {
        color: #fff;
        margin: 0;
        padding: 0 1.3125em 0 0
    }

    .navigation__leftsec .menuContactWrapper .contact-item .contact-link {
        font-size: 1.25em
    }

@media (max-width:1199.98px) {
    .navigation__leftsec .menuContactWrapper .contact-item .contact-link {
        font-size: 1.125em
    }
}

@media (max-width:991.98px) {
    .navigation__leftsec .menuContactWrapper .contact-item .contact-link {
        font-size: 1em
    }
}

.navigation__rightsec {
    width: 30%
}

@media (max-width:991.98px) {
    .navigation__rightsec {
        width: 100%;
        height: 30%
    }
}

.navigation__rightsec .menuImg {
    position: relative;
    width: 100%;
    height: 100%;
    clip-path: inset(0 0 0 100%);
    transition: .75s
}

    .navigation__rightsec .menuImg img {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover
    }

.menu {
    max-width: 100%;
    height: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    list-style-type: none;
    padding: 0;
    margin: 0
}

@media (max-width:575.98px) {
    .menu {
        height: auto;
        margin: 2em 0
    }
}

.menu__item {
    opacity: 0;
    visibility: hidden;
    transition: all .3s ease-in-out;
    cursor: pointer
}

.menu__item--linkWrapper {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.75em 17.25% 1.75em 0;
    transition: all .3s ease-in-out
}

@media (max-width:991.98px) {
    .menu__item--linkWrapper {
        padding: 0 1em 0 0
    }
}

.menu__item--linkWrapper::after {
    content: "";
    position: absolute;
    width: 82.75%;
    height: 1px;
    background: rgba(255,255,255,.5);
    bottom: 0;
    left: 0
}

@media (max-width:991.98px) {
    .menu__item--linkWrapper::after {
        width: 100%
    }
}

.menu__item--linkWrapper .menuArrow {
    width: 2.5em;
    height: 2.5em;
    min-width: 2.5em;
    min-height: 2.5em;
    border: 1px solid #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    transition: all .3s ease-in-out
}

@media (max-width:1199.98px) {
    .menu__item--linkWrapper .menuArrow {
        width: 1.5em;
        height: 1.5em;
        min-width: 1.5em;
        min-height: 1.5em
    }
}

.menu__item--linkWrapper .menuArrow svg {
    width: 45%
}

    .menu__item--linkWrapper .menuArrow svg path {
        fill: #fff;
        transition: all .3s ease-in-out
    }

.menu__item--link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    transform: translateY(30px);
    transition: all .3s ease-in-out;
    opacity: 0;
    visibility: hidden
}

@media (max-width:991.98px) {
    .menu__item--link {
        padding: 1em 0
    }
}

.menu__item--link span {
    font-size: 3.4375em;
    font-weight: 700;
    font-family: Tajawal,sans-serif;
    color: #fff;
    text-transform: capitalize;
    transition: all .3s ease-in-out
}

@media (max-width:1199.98px) {
    .menu__item--link span {
        font-size: 2em
    }
}

@media (max-width:575.98px) {
    .menu__item--link span {
        font-size: 1.35em
    }
}

.menu__item.active .menu__item--linkWrapper {
    background: #fff;
    transition: all .3s ease-in-out
}

    .menu__item.active .menu__item--linkWrapper .menuArrow {
        border-color: #000;
        transition: all .3s ease-in-out
    }

        .menu__item.active .menu__item--linkWrapper .menuArrow svg path {
            fill: #000;
            transition: all .3s ease-in-out
        }

.menu__item.active .menu__item--link span {
    color: #000;
    padding: 0 0 0 .5em;
    transition: all .3s ease-in-out
}

.menu__item.active .innerMenu {
    opacity: 1;
    visibility: visible;
    transition: all .3s ease-in-out
}

@media (max-width:991.98px) {
    .menu__item.active .innerMenu {
        display: block
    }
}

.menu .innerMenu {
    position: absolute;
    top: 0;
    right: 0;
    width: 30%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0;
    padding: 0 0 0 3em;
    list-style-type: none;
    z-index: 1;
    background: rgba(255,255,255,.85);
    opacity: 0;
    visibility: hidden;
    transition: all .3s ease-in-out
}

@media (max-width:991.98px) {
    .menu .innerMenu {
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        height: auto;
        padding: 1.5em;
        display: none
    }
}

.menu .innerMenu__item {
    padding: 0 0 1em 0
}

    .menu .innerMenu__item:last-child {
        padding: 0
    }

.menu .innerMenu__link {
    position: relative;
    color: #444241;
    font-size: 1.5em;
    text-transform: capitalize;
    padding: 0 2em 0 0
}

@media (max-width:575.98px) {
    .menu .innerMenu__link {
        font-size: 1em
    }
}

.menu .innerMenu__link::after {
    content: "";
    position: absolute;
    width: .8125em;
    height: .6875em;
    background: url(../svg/menu-arrow.svg);
    background-size: contain;
    background-repeat: no-repeat;
    top: 50%;
    right: .5em;
    transform: translate(0,-50%);
    transition: all .3s ease-in-out
}

.menu .innerMenu__link:hover::after {
    right: 0;
    transition: all .3s ease-in-out
}

.nav-button {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    width: 56px;
    height: 38px;
    padding: 13px 14px 11px;
    z-index: 9;
    transition: opacity .25s ease;
    cursor: pointer
}

    .nav-button span {
        background: #fff;
        border: none;
        width: 100%;
        height: 2px;
        transition: all .15s cubic-bezier(.455,.03,.515,.955)
    }

    .nav-button::before {
        content: "";
        position: absolute;
        width: 3.5625em;
        height: 3.5625em;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%) scale(0);
        background: #fff;
        z-index: -1;
        border-radius: 50%;
        transition: all .3s ease-in-out;
        border: 1px solid;
        border-color: transparent
    }

    .nav-button .middle {
        width: 70%
    }

    .nav-button .bottom {
        width: 85%
    }

    .nav-button:hover span {
        background: #d50032;
        transition: all .15s cubic-bezier(.455,.03,.515,.955)
    }

    .nav-button:hover::before {
        transform: translate(-50%,-50%) scale(1);
        transition: all .3s ease-in-out
    }

    .nav-button:hover .middle {
        width: 100%
    }

    .nav-button:hover .bottom {
        width: 100%
    }

@media (max-width:1199.98px) {
    .nav-button:hover .middle {
        width: 70%
    }

    .nav-button:hover .bottom {
        width: 40%
    }
}

.nav-button.active .top {
    transform: rotate(45deg) translate(5px,4px) scaleX(.8)
}

.nav-button.active .middle {
    opacity: 0;
    transform: scaleX(0)
}

.nav-button.active .bottom {
    width: 100%;
    transform: rotate(-45deg) translate(4px,-4px) scaleX(.8)
}

@media (max-width:991.98px) {
    .nav-button.active::before {
        transform: translate(-50%,-50%) scale(1)
    }
}

@media (max-width:991.98px) {
    .nav-button.active span {
        background: #d50032
    }
}

.menu::-webkit-scrollbar {
    width: 5px;
    visibility: hidden;
    transition: .5s
}

.menu::-webkit-scrollbar-track {
    background: #d50032
}

.menu::-webkit-scrollbar-thumb {
    background: #fff
}

    .menu::-webkit-scrollbar-thumb:hover {
        background: #d50032;
        visibility: visible
    }

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9;
    border: 1px solid transparent;
    border-bottom-color: rgba(239,239,239,.6)
}

.header__wrapper {
    display: flex;
    justify-content: space-between;
    padding: 0;
    transition: .4s
}

    .header__wrapper .logoNav-wrapper {
        display: flex;
        align-items: center
    }

        .header__wrapper .logoNav-wrapper .brand-logo {
            padding: 2.1875em 0 2.1875em 2.5em;
            border-left: 1px solid rgba(239,239,239,.6);
            transition: all .3s ease-in-out
        }

@media (max-width:575.98px) {
    .header__wrapper .logoNav-wrapper .brand-logo {
        padding: 1.5em 0 1.5em 1em
    }
}

.header__wrapper .contact-wrapper {
    display: flex
}

    .header__wrapper .contact-wrapper .item-wrapper {
        display: flex;
        align-items: center;
        padding: 0 2.5em;
        border-right: 1px solid rgba(239,239,239,.6)
    }

@media (max-width:575.98px) {
    .header__wrapper .contact-wrapper .item-wrapper {
        padding: 0 1em
    }
}

.header__wrapper .contact-wrapper .item-wrapper:first-child {
    padding-left: 0
}

.header__wrapper .contact-wrapper .item-wrapper:last-child {
    padding-right: 0;
    border: none
}

@media (max-width:575.98px) {
    .header__wrapper .contact-wrapper .contact {
        display: none
    }
}

.header__wrapper .contact-wrapper .contact a {
    display: flex;
    align-items: center
}

@media (max-width:575.98px) {
    .header__wrapper .contact-wrapper .contact a {
        font-size: .75em
    }
}

.header__wrapper .contact-wrapper .contact a svg {
    width: auto;
    height: 1.25em
}

    .header__wrapper .contact-wrapper .contact a svg path {
        transition: all .3s ease-in-out
    }

.header__wrapper .contact-wrapper .contact a span {
    position: relative;
    color: #fff;
    font-size: 1.25em;
    margin-left: .5em
}

@media (min-width:1921px) {
    .header__wrapper .contact-wrapper .contact a span {
        word-break: keep-all
    }
}

@media (max-width:575.98px) {
    .header__wrapper .contact-wrapper .contact a span {
        font-size: 1em
    }
}

.header__wrapper .contact-wrapper .contact a span::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -.19em;
    width: 100%;
    height: 2px;
    background: #fff;
    transform: scaleX(0);
    transition: all .3s ease-in-out
}

.header__wrapper .contact-wrapper .contact a:hover span::after {
    transition: all .3s ease-in-out;
    transform: scaleX(1)
}

.header__wrapper .contact-wrapper .contact a:hover svg path {
    fill: #d50032;
    transition: all .3s ease-in-out
}

@media (max-width:575.98px) {
    .header__wrapper .contact-wrapper .langConv {
        border: none
    }
}

.header__wrapper .contact-wrapper .langConv .langWrapper {
    position: relative
}

    .header__wrapper .contact-wrapper .langConv .langWrapper .selectedItem {
        display: flex;
        align-items: center;
        cursor: pointer
    }

        .header__wrapper .contact-wrapper .langConv .langWrapper .selectedItem .title {
            color: #fff
        }

        .header__wrapper .contact-wrapper .langConv .langWrapper .selectedItem .globe {
            width: 1.125em;
            margin: 0 .375em 0 0
        }

@media (max-width:991.98px) {
    .header__wrapper .contact-wrapper .langConv .langWrapper .selectedItem .globe {
        height: 1.4em;
        display: flex;
        align-items: baseline
    }
}

.header__wrapper .contact-wrapper .langConv .langWrapper .selectedItem .globe img {
    width: 100%
}

@media (max-width:991.98px) {
    .header__wrapper .contact-wrapper .langConv .langWrapper .selectedItem .globe img {
        height: auto
    }
}

.header__wrapper .contact-wrapper .langConv .langWrapper .selectedItem .dropdown-arrow {
    position: absolute;
    top: 50%;
    right: -1.21875em;
    transform: translateY(-50%);
    width: .5em;
    transition: .25s
}

    .header__wrapper .contact-wrapper .langConv .langWrapper .selectedItem .dropdown-arrow svg {
        width: 100%
    }

.header__wrapper .contact-wrapper .langConv .langWrapper .listingItems {
    position: absolute;
    top: 125%;
    left: 0;
    margin: 0;
    padding: 0;
    list-style-type: none;
    max-height: 0;
    overflow: hidden;
    transition: all .4s cubic-bezier(0,1,0,1)
}

.header__wrapper .contact-wrapper .langConv .langWrapper .listingItem {
    margin: 0
}

    .header__wrapper .contact-wrapper .langConv .langWrapper .listingItem .itemLink {
        display: block;
        color: #fff;
        padding: .5em 1.25em;
        background: #d50032;
        border-bottom: 1px solid rgba(255,255,255,.5);
        transition: all .3s ease-in-out
    }

        .header__wrapper .contact-wrapper .langConv .langWrapper .listingItem .itemLink:hover {
            color: #d50032;
            background: #fff;
            transition: all .3s ease-in-out
        }

    .header__wrapper .contact-wrapper .langConv .langWrapper .listingItem:last-child .itemLink {
        border-bottom: none
    }

.header__wrapper .contact-wrapper .langConv .langWrapper.open .listingItems {
    height: auto;
    max-height: 999px;
    transition: all .4s cubic-bezier(1,0,1,0)
}

.header__wrapper .contact-wrapper .langConv .langWrapper.open .dropdown-arrow {
    transform: translateY(-50%) rotate(180deg)
}

.header__wrapper .nav-button {
    margin: 0 2.5em 0 0
}

@media (max-width:575.98px) {
    .header__wrapper .nav-button {
        margin: 0 1em 0 0
    }
}

.brand-logo {
    position: relative
}

.brand-logo__anchor {
    width: 6.75em;
    height: auto;
    display: inline-block;
    transition: all .3s ease-in-out
}

@media (max-width:1199.98px) {
    .brand-logo__anchor {
        width: 4em
    }
}

.home .sticky, .no-home .sticky {
    background-color: rgba(0,0,0,.85);
    box-shadow: 0 0 27px 2px rgba(0,0,0,.5) inset,0 6px 4px -5px rgba(0,0,0,.5);
    transition: all .3s ease-in-out
}

    .home .sticky .brand-logo, .no-home .sticky .brand-logo {
        padding: 1em 0 1em 2.5em;
        transition: all .3s ease-in-out
    }

@media (max-width:575.98px) {
    .home .sticky .brand-logo, .no-home .sticky .brand-logo {
        padding: 1em 0 1em 1em
    }
}

.footer {
    position: relative;
    overflow: hidden
}

    .footer .brandLogo {
        position: relative;
        width: 100%;
        display: flex;
        align-items: center;
        margin: 5em 0 0 0
    }

@media (max-width:991.98px) {
    .footer .brandLogo {
        margin: 3em 0 0 0
    }
}

@media (max-width:575.98px) {
    .footer .brandLogo {
        margin: 2em 0 0 0
    }
}

.footer .brandLogo::after {
    content: "";
    position: absolute;
    width: calc(100% - 13.6875em);
    height: 1px;
    top: 50%;
    right: 0;
    background: rgba(142,138,138,.5)
}

@media (max-width:991.98px) {
    .footer .brandLogo::after {
        width: calc(100% - 9em)
    }
}

.footer .brandLogo__anchor {
    width: 11.4375em
}

@media (max-width:991.98px) {
    .footer .brandLogo__anchor {
        width: 7em
    }
}

.footer .bg-img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    filter: grayscale(1);
    opacity: .05
}

    .footer .bg-img img {
        width: 100%;
        height: 100%;
        object-fit: cover
    }

.footer__top {
    padding: 5em 0 3.5em 0
}

@media (max-width:991.98px) {
    .footer__top {
        padding: 3em 0 1.5em 0
    }
}

@media (max-width:575.98px) {
    .footer__top {
        padding: 2em 0 .5em 0
    }
}

.footer__linksWrapper {
    width: 100%;
    display: flex;
    justify-content: space-between
}

@media (max-width:991.98px) {
    .footer__linksWrapper {
        flex-wrap: wrap
    }
}

.footer__links {
    padding: 0 1em 0 0;
    width: max-content
}

@media (max-width:991.98px) {
    .footer__links {
        width: 33.33%
    }
}

@media (max-width:575.98px) {
    .footer__links {
        width: 100%
    }
}

.footer__links .head {
    position: relative;
    color: #262626;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0 0 2em 0
}

@media (max-width:991.98px) {
    .footer__links .head {
        margin: 0 0 1.5em 0
    }
}

@media (max-width:575.98px) {
    .footer__links .head {
        padding-left: 2em
    }

        .footer__links .head::after, .footer__links .head::before {
            content: "";
            position: absolute;
            background-color: #262626;
            left: 0;
            top: 50%;
            width: 2px;
            height: 1em;
            transition: all .25s ease-in-out
        }

        .footer__links .head::before {
            top: 0;
            left: .45em;
            transform: rotate(0)
        }

        .footer__links .head::after {
            left: 0;
            width: 1em;
            height: 2px;
            transform: translateY(-50%)
        }

        .footer__links .head.opened::before {
            transform: rotate(90deg);
            transition: all .25s ease-in-out
        }
}

.footer__links .footerMenu {
    position: relative;
    margin: 0;
    padding: 0;
    list-style-type: none
}

@media (max-width:575.98px) {
    .footer__links .footerMenu {
        max-height: 0;
        overflow: hidden;
        padding-left: 2em;
        transition: all .4s cubic-bezier(0,1,0,1)
    }
}

.footer__links .footerMenu__item {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin-bottom: 1.5625em
}

.footer__links .footerMenu__link {
    color: #262626;
    font-size: 1.125em
}

.footer__links .footerMenu.opened {
    transition: all .4s cubic-bezier(0,1,0,1)
}

.footer__bottom {
    width: 100%;
    padding: 1.375em 0;
    border-top: 1px solid rgba(68,66,65,.3)
}

    .footer__bottom .copyWrapper {
        width: 100%;
        display: flex;
        justify-content: space-between
    }

@media (max-width:575.98px) {
    .footer__bottom .copyWrapper {
        flex-direction: column;
        align-items: center;
        margin: 0
    }
}

.footer__bottom .copyWrapper .copy {
    font-size: .875em;
    margin: 0
}

@media (max-width:991.98px) {
    .footer__bottom .copyWrapper .copy {
        font-size: .75em
    }
}

.footer__bottom .copyWrapper .copy a {
    color: #262626
}

@media (max-width:575.98px) {
    .footer__bottom .copyWrapper .copy:nth-child(2) {
        order: 3;
        text-align: center
    }
}

.footer__bottom .copyWrapper .listWrapper {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style-type: none
}

@media (max-width:575.98px) {
    .footer__bottom .copyWrapper .listWrapper {
        margin: .5em 0
    }
}

.footer__bottom .copyWrapper .listWrapper .listItem {
    padding: 0 1em;
    border-right: 1px solid #fff;
    margin: 0
}

    .footer__bottom .copyWrapper .listWrapper .listItem:last-child {
        border-right: none
    }

@media (max-width:991.98px) {
    .footer__bottom .copyWrapper .listWrapper .listItem {
        font-size: .75em
    }
}

.socialWrapper {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style-type: none
}

    .socialWrapper .socialItem {
        margin: 0 1em 1em 0
    }

    .socialWrapper .socialLink {
        position: relative;
        width: 2.125em;
        height: 2.125em;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 2px solid #444241;
        border-radius: 100%;
        transition: all .3s ease-in-out
    }

        .socialWrapper .socialLink svg {
            width: auto;
            height: 45%
        }

            .socialWrapper .socialLink svg path {
                fill: #444241;
                transition: all .3s ease-in-out
            }

        .socialWrapper .socialLink::before {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%) scale(0);
            background: #d50032;
            border-radius: 100%;
            transition: all .3s ease-in-out;
            z-index: -1
        }

        .socialWrapper .socialLink:hover {
            border-color: transparent;
            transition: all .3s ease-in-out
        }

            .socialWrapper .socialLink:hover svg path {
                fill: #fff;
                transition: all .3s ease-in-out
            }

            .socialWrapper .socialLink:hover::before {
                transform: translate(-50%,-50%) scale(1);
                transition: all .3s ease-in-out
            }

.innerHero {
    position: relative
}

.innerHero__img {
    position: relative;
    width: 100%;
    height: 40.625em
}

    .innerHero__img::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: rgba(0,0,0,.32)
    }

    .innerHero__img img {
        width: 100%;
        height: 100%;
        object-fit: cover
    }

.innerHero__head {
    position: absolute;
    width: 100%;
    top: 60%;
    left: 0;
    transform: translate(0,-50%)
}

@media (max-width:991.98px) {
    .our-values {
        padding-top: 0
    }
}

@media (max-width:575.98px) {
    .our-values .bullet-points {
        flex-direction: column
    }
}

@media (min-width:1025px) {
    .our-vission {
        margin-top: -5em;
        z-index: -1
    }
}

@media (max-width:767.98px) {
    .our-mission .custom-row {
        flex-direction: column-reverse
    }
}

.our-value .breadcrums {
    padding: 0;
    margin-bottom: 4.2743em
}

@media (max-width:991.98px) {
    .our-value .breadcrums {
        margin-bottom: 3em
    }
}

@media (max-width:575.98px) {
    .our-value .breadcrums {
        margin-bottom: 2em
    }
}

.our-value-wrapper .our-value-row {
    justify-content: space-between
}

@media (min-width:1200px) {
    .our-value-wrapper:first-child {
        padding-top: 3em
    }
}

.our-value-wrapper .polygon {
    right: 0;
    -webkit-clip-path: polygon(0 0,100% 0,100% 100%,50% 100%);
    clip-path: polygon(0 0,100% 0,100% 100%,50% 100%)
}

    .our-value-wrapper .polygon::after {
        background: #e22726;
        opacity: .79
    }

.our-value-wrapper:nth-child(even) .polygon {
    left: 0;
    -webkit-clip-path: polygon(0 0,100% 0,50% 100%,0 100%);
    clip-path: polygon(0 0,100% 0,50% 100%,0 100%)
}

    .our-value-wrapper:nth-child(even) .polygon::after {
        display: none
    }

.our-value-wrapper:nth-child(even) .our-value-row {
    flex-direction: row-reverse
}

@media (max-width:1199.98px) {
    .colabrate-slide-section {
        padding: 3em 0
    }
}

.checkbox-group {
    margin-bottom: 2em
}

    .checkbox-group input {
        display: none
    }

        .checkbox-group input:checked + label::after {
            content: "";
            display: block;
            position: absolute;
            top: 2px;
            left: 7px;
            width: 6px;
            height: 12px;
            border: 1px solid #fff;
            border-width: 0 2px 2px 0;
            transform: rotate(45deg)
        }

        .checkbox-group input:checked + label::before {
            background: #d50032
        }

    .checkbox-group label {
        position: relative;
        cursor: pointer;
        padding-left: 35px;
        display: block
    }

        .checkbox-group label p {
            font-size: 1.125em
        }

@media (max-width:991.98px) {
    .checkbox-group label p {
        font-size: 1em
    }
}

.checkbox-group label::before {
    content: "";
    background-color: transparent;
    border: 2px solid #d50032;
    box-shadow: 0 1px 2px rgba(0,0,0,.05),inset 0 -15px 10px -12px rgba(0,0,0,.05);
    padding: 8px;
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    vertical-align: middle;
    cursor: pointer
}

.architeture-design {
    position: relative
}

    .architeture-design .vector {
        position: absolute;
        right: 0;
        top: 0;
        width: 46%;
        height: 100%;
        z-index: -1;
        display: flex
    }

@media (max-width:991.98px) {
    .architeture-design .vector {
        width: 53%
    }
}

@media (max-width:767.98px) {
    .architeture-design .vector {
        width: 100%
    }
}

@media (max-width:767.98px) {
    .architeture-design .sub-sector-wrapper a {
        font-size: .75em
    }
}

.milestone-section .milestone-wrapper {
    padding: 0 0 0 16.25%
}

@media (max-width:1199.98px) {
    .milestone-section .milestone-wrapper {
        padding: 0 0 0 5em
    }
}

@media (max-width:991.98px) {
    .milestone-section .milestone-wrapper {
        padding: 0 0 0 3em
    }
}

@media (max-width:575.98px) {
    .milestone-section .milestone-wrapper {
        padding: 0 0 0 2em
    }
}

.milestone-section .swiper-wrapper {
    align-items: center;
    padding: 0 0 0 2em
}

    .milestone-section .swiper-wrapper::after {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 2em;
        height: 2px;
        background: #d50032
    }

    .milestone-section .swiper-wrapper::before {
        content: "";
        position: absolute;
        left: 0;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        border: 3px solid #d50032;
        top: 50%;
        transform: translateY(-50%);
        background: #fff;
        z-index: 1
    }

.milestone-section .swiper-slide {
    width: 11.9375em;
    padding: 22em 0
}

@media (max-width:1199.98px) {
    .milestone-section .swiper-slide {
        padding: 18em 0
    }
}

.milestone-section .swiper-slide::after {
    content: "";
    position: absolute;
    left: 12px;
    height: 2px;
    width: 94%;
    background: #d50032;
    top: 50%;
    transform: translateY(-50%)
}

.milestone-section .swiper-slide::before {
    content: "";
    position: absolute;
    left: 0;
    height: 1.125em;
    width: 1.125em;
    border-radius: 50%;
    border: 5px solid #d50032;
    top: 50%;
    transform: translateY(-50%);
    background: #fff;
    z-index: 1
}

.milestone-section .swiper-slide .content {
    position: absolute;
    top: 100%;
    width: 16.875em;
    display: flex;
    flex-direction: column;
    padding: 6.25em 0 0 0
}

    .milestone-section .swiper-slide .content::after {
        position: absolute;
        content: "";
        left: .5em;
        top: 0;
        width: 2px;
        height: 100%;
        background: #d50032
    }

    .milestone-section .swiper-slide .content::before {
        position: absolute;
        content: "";
        left: .375em;
        bottom: 0;
        width: 6px;
        height: 6px;
        background: #d50032;
        border-radius: 50%
    }

@media (max-width:1367px) {
    .milestone-section .swiper-slide .content::before {
        left: 3.5px
    }
}

@media (max-width:991.98px) {
    .milestone-section .swiper-slide .content::before {
        left: 4.5px
    }
}

.milestone-section .swiper-slide .content .list {
    padding: 0 0 0 .25em;
    max-height: 20em;
    overflow-Y: auto
}

    .milestone-section .swiper-slide .content .list li {
        position: relative;
        margin: 0;
        padding: 0 0 1.25em 1em
    }

        .milestone-section .swiper-slide .content .list li::after {
            content: "";
            position: absolute;
            left: 0;
            height: .625em;
            width: .625em;
            border-radius: 50%;
            border: 3px solid #d50032;
            top: 0;
            background: #fff;
            z-index: 1
        }

@media (max-width:1367px) {
    .milestone-section .swiper-slide .content .list li::after {
        border: 2px solid #d50032
    }
}

.milestone-section .swiper-slide .slide-wrapper {
    position: relative
}

.milestone-section .swiper-slide .year {
    margin: 0 0 2.2em -.5em
}

.milestone-section .swiper-slide:nth-child(even) .content {
    top: auto;
    bottom: 100%;
    padding: 0 0 6.25em 0;
    flex-direction: column-reverse
}

.milestone-section .swiper-slide:nth-child(even) .year {
    margin: 2.2em 0 0 -.5em
}

.milestone-section .swiper-slide:last-child {
    width: 17.25em
}

    .milestone-section .swiper-slide:last-child .content {
        padding-right: 3em
    }

.milestone-section .drag-wrapper {
    display: flex;
    align-items: center;
    flex-direction: column;
    position: relative;
    padding: 3em 0 0 0
}

    .milestone-section .drag-wrapper img {
        position: absolute;
        width: 6.25em;
        top: 0;
        transform: translateX(-50%);
        left: 50%;
        animation: drag 7s infinite
    }

@keyframes drag {
    0% {
        left: 50%
    }

    25% {
        left: 52%
    }

    50% {
        left: 50%
    }

    75% {
        left: 48%
    }

    100% {
        left: 50%
    }
}