@import "//cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css";
@import "//cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css";
@import url("//fonts.googleapis.com/css2?family=Courier+Prime&display=swap");
@font-face {
    font-family: "HelveticaNeueLT 45";
    src: url("fonts/HelveticaNeueLTPro-Lt.woff") format("woff");
    font-weight: 300;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "HelveticaNeueLT 65";
    src: url("fonts/HelveticaNeueLTPro-Md.woff") format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "HelveticaNeueLT 55 Roman";
    src: url("fonts/HelveticaNeueLTPro-Roman.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "HelveticaNeueLT 75 Roman";
    src: url("fonts/HelveticaNeueLTPro-Bd.woff") format("woff");
    font-weight: bold;
    font-style: normal;
    font-display: swap
}


/*!
 * Disigned & Developed by Intersmart Solutions (https://intersmartsolutions.com)
 * Copyright 2011-2021 Intersmart Solutions pvt LTD.
 */

* {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    list-style: none;
    box-sizing: border-box;
    border-collapse: inherit;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    font-kerning: none;
    -webkit-text-rendering: optimizeSpeed;
    text-rendering: optimizeSpeed
}

html:lang(en) body {
    line-height: normal
}

body {
    background: #0c1017
}

html,
body {
    font-family: "HelveticaNeueLT 55 Roman";
    line-height: 22px;
    font-weight: normal
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #2161ad
}

h1 {
    line-height: normal;
    font-size: 32px;
    margin: 0
}

@media only screen and (min-width: 468px) {
    h1 {
        font-size: 36px
    }
}

@media only screen and (min-width: 768px) {
    h1 {
        font-size: 40px
    }
}

@media only screen and (min-width: 1441px) {
    h1 {
        font-size: 48px
    }
}

h2 {
    margin-bottom: 10px;
    font-size: 28px
}

@media only screen and (min-width: 468px) {
    h2 {
        font-size: 34px
    }
}

@media only screen and (min-width: 768px) {
    h2 {
        font-size: 38px;
        margin-bottom: 15px
    }
}

@media only screen and (min-width: 1550px) {
    h2 {
        font-size: 45px;
        margin-bottom: 20px
    }
}

h3,
h4,
h5 {
    font-size: 20px;
    margin-bottom: 10px
}

@media only screen and (min-width: 768px) {
    h3,
    h4,
    h5 {
        font-size: 24px;
        margin-bottom: 15px
    }
}

@media only screen and (min-width: 1550px) {
    h3,
    h4,
    h5 {
        font-size: 30px;
        margin-bottom: 25px
    }
}

h6 {
    font-size: 18px;
    margin-bottom: 10px
}

@media only screen and (min-width: 768px) {
    h6 {
        font-size: 19px;
        margin-bottom: 15px
    }
}

@media only screen and (min-width: 1550px) {
    h6 {
        font-size: 24px;
        margin-bottom: 18px
    }
}

p {
    color: #666;
    margin-bottom: 15px;
    font-size: 12px;
    line-height: 22px;
    text-align: justify
}

@media only screen and (min-width: 468px) {
    p {
        font-size: 13px
    }
}

@media only screen and (min-width: 768px) {
    p {
        font-size: 14px;
        line-height: 24px
    }
}

@media only screen and (min-width: 1550px) {
    p {
        font-size: 16px;
        line-height: 28px;
        margin-bottom: 25px
    }
}

p a {
    color: #2161ad;
    display: inline
}

a {
    text-decoration: none;
    transition: all .3s
}

a:hover {
    color: inherit
}

ul {
    margin: 0;
    padding: 0;
    list-style: none
}

img {
    vertical-align: middle;
    border: 0;
    -ms-interpolation-mode: bicubic;
    max-width: 100%
}

form .row {
    margin: -7.5px
}

form .row>* {
    padding: 7.5px
}

form .select2 {
    width: 100% !important
}

form .select2-selection {
    display: flex !important;
    align-items: center
}

form .form-control,
form .select2-selection {
    display: block;
    width: 100%;
    font-weight: 400;
    line-height: normal;
    color: #404553;
    background-clip: padding-box;
    border-radius: 0;
    transition: all .3s;
    outline: none;
    box-shadow: none;
    background-color: transparent;
    height: 45px;
    font-size: 13px;
    padding: 5px 15px;
    border: 1px solid rgba(236, 236, 236, 0.33)
}

@media only screen and (min-width: 468px) {
    form .form-control,
    form .select2-selection {
        padding: 5px 22px
    }
}

@media only screen and (min-width: 576px) {
    form .form-control,
    form .select2-selection {
        height: 55px;
        font-size: 14px
    }
}

@media only screen and (min-width: 1200px) {
    form .form-control,
    form .select2-selection {
        font-size: 16px
    }
}

form .form-control::placeholder,
form .select2-selection::placeholder {
    color: #404553
}

form .form-control:focus,
form .select2-selection:focus {
    border-color: #2161ad;
    background-color: transparent
}

form .form-control:-webkit-autofill,
form .form-control:-webkit-autofill:hover,
form .form-control:-webkit-autofill:focus,
form .form-control:-internal-autofill-selected,
form .select2-selection:-webkit-autofill,
form .select2-selection:-webkit-autofill:hover,
form .select2-selection:-webkit-autofill:focus,
form .select2-selection:-internal-autofill-selected {
    -webkit-text-fill-color: #fff;
    -webkit-box-shadow: 0 0 0px 30px transparent inset !important;
    transition: background-color 5000s ease-in-out 0s;
    background-color: transparent !important
}

form .form-control::-ms-expand,
form .select2-selection::-ms-expand {
    background-color: transparent !important;
    border: 0
}

@media (prefers-reduced-motion: reduce) {
    form .form-control,
    form .select2-selection {
        transition: none
    }
}

form label {
    font-size: 13px;
    color: #131313;
    margin-bottom: 13px
}

@media only screen and (min-width: 576px) {
    form label {
        font-size: 14px;
        margin-bottom: 20px
    }
}

@media only screen and (min-width: 1200px) {
    form label {
        font-size: 16px
    }
}

form .select2-selection--single {
    display: flex;
    align-items: center
}

.select2-container--bootstrap-5 .select2-selection--single {
    background: none !important
}

.select2--container {
    position: relative
}

.select2-selection__arrow {
    position: absolute;
    width: 10px;
    height: 10px;
    right: 15px
}

.select2-selection__arrow::before {
    content: "";
    position: absolute;
    right: 0px;
    top: 0px;
    width: 10px;
    height: 10px;
    background: url(../images/back.svg) no-repeat center;
    background-size: contain;
    transform: rotate(270deg)
}

textarea.form-control {
    padding-top: 13px;
    min-height: 182px
}

@media only screen and (min-width: 576px) {
    textarea.form-control {
        padding-top: 20px;
        min-height: 182px
    }
}

input[type="file"] {
    font-size: 13px;
    color: #404553;
    max-width: 190px;
    margin: 0 15px
}

@media only screen and (min-width: 468px) {
    input[type="file"] {
        margin: 0 20px
    }
}

@media only screen and (min-width: 576px) {
    input[type="file"] {
        font-size: 14px;
        max-width: auto
    }
}

@media only screen and (min-width: 768px) {
    input[type="file"] {
        margin: 0 50px
    }
}

@media only screen and (min-width: 1200px) {
    input[type="file"] {
        font-size: 16px
    }
}

input[type="date"].form-control,
input[type="datetime-local"].form-control,
input[type="month"].form-control,
input[type="time"].form-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

::selection,
::-moz-selection {
    background: #0c1017
}

::-webkit-scrollbar {
    width: 5px
}

::-webkit-scrollbar-thumb {
    background: #0c1017;
    border-radius: 30px
}

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 0 grey;
    border-radius: 0px;
    background: #a8b4c6
}

svg {
    display: inline-block;
    position: relative;
    width: 100%;
    vertical-align: middle;
    overflow: hidden;
    margin-top: -3px
}

[data-ll-status="error"] {
    background: url(../images/favicon.png) no-repeat center #f5f5f5;
    width: 100%;
    height: 100%;
    object-fit: contain;
    min-height: 150px;
    display: block;
    background-size: 130px
}

.btn-check:focus+.btn,
.btn:focus {
    outline: 0;
    box-shadow: none
}

.btn {
    border-radius: 0;
    outline: none;
    box-shadow: none
}

.row {
    margin: -15px
}

.row>* {
    padding: 15px
}

.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto
}

@media only screen and (min-width: 992px) {
    .container {
        max-width: 1050px
    }
}

@media only screen and (min-width: 1200px) {
    .container {
        max-width: 1180px
    }
}

@media only screen and (min-width: 1441px) {
    .container {
        max-width: 1350px
    }
}

@media only screen and (min-width: 1550px) {
    .container {
        max-width: 1440px
    }
}

@media (max-width: 992px) and (min-width: 768px) {
    .container {
        max-width: 95%
    }
}

@media only screen and (max-width: 768px) {
    .container {
        max-width: none
    }
}

.modal-backdrop {
    background: rgba(33, 42, 47, 0.85);
    z-index: 3
}

.modal-backdrop.show {
    opacity: 1
}

#Header {
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    width: 100%
}

#Header::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #fff;
    -webkit-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%);
    -webkit-transition: -webkit-transform .6s ease;
    transition: -webkit-transform .6s ease;
    transition: transform .6s ease;
    transition: transform .6s ease, -webkit-transform .6s ease
}

#Header .TopHeader {
    padding: 9px 0;
    border-bottom: 1px solid rgba(248, 248, 248, 0.11);
    display: none
}

@media only screen and (min-width: 468px) {
    #Header .TopHeader {
        display: block
    }
}

#Header .TopHeader .container {
    display: flex;
    align-items: center;
    justify-content: space-between
}

#Header .TopHeader .WelcomeMsg {
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 9px
}

@media only screen and (min-width: 468px) {
    #Header .TopHeader .WelcomeMsg {
        font-size: 11px;
        width: 225px;
    }
}

@media only screen and (min-width: 468px) {
    #Header .TopHeader marquee {
        width: calc(100% - 350px)
    }
}

#Header .TopHeader marquee {
    display: none;
}

@media only screen and (min-width: 768px) {
    #Header .TopHeader marquee {
        display: block;
    }
}

#Header .TopHeader marquee li {
    display: inline-block;
    position: relative;
    padding: 0 15px;
}

@media only screen and (min-width: 576px) {
    #Header .TopHeader marquee li {
        padding: 0 22.5px;
    }
}

#Header .TopHeader marquee li:not(:last-of-type)::after {
    content: "";
    background-color: #959595;
    width: 1px;
    height: 10px;
    position: absolute;
    right: 0px;
    top: 50%;
    bottom: 0px;
    margin: auto;
    transform: translateY(-50%)
}

#Header .TopHeader marquee a {
    color: #fff;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    position: relative;
    font-size: 11px;
    letter-spacing: 1.5px;
}

@media only screen and (min-width: 1441px) {
    #Header .TopHeader marquee a {
        font-size: 12px
    }
}

#Header .TopHeader marquee a .label {
    color: #479bff;
    margin-right: 10px;
}


/* #Header .TopHeader marquee a .label svg {
    fill: #2161ad;
    width: 28px;
} */

#Header .TopHeader marquee a .Nbr {
    font-weight: 500;
    transition: all .3s;
    font-family: "HelveticaNeueLT 75 Roman";
}

@media only screen and (min-width: 468px) {
    #Header .TopHeader .lang {
        width: 125px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
}

#Header .TopHeader .lang a {
    display: flex;
    align-items: center;
    margin: 0 -5px
}

@media only screen and (min-width: 468px) {
    #Header .TopHeader .lang a {
        margin: 0 -7.5px
    }
}

#Header .TopHeader .lang a>* {
    padding: 0 5px
}

@media only screen and (min-width: 468px) {
    #Header .TopHeader .lang a>* {
        padding: 0 7.5px
    }
}

#Header .TopHeader .lang a .txt {
    color: #fefefe;
    font-weight: 600;
    font-family: "Cairo", sans-serif;
    font-size: 10px;
    position: relative
}

@media only screen and (min-width: 468px) {
    #Header .TopHeader .lang a .txt {
        font-size: 12px
    }
}

#Header .HeaderMain .FlexBox {
    align-items: center;
    justify-content: space-between;
    display: flex;
    height: 72px;
    position: relative
}

@media only screen and (min-width: 468px) {
    #Header .HeaderMain .FlexBox {
        height: 65px
    }
}

@media only screen and (min-width: 992px) {
    #Header .HeaderMain .FlexBox {
        height: auto
    }
}

#Header .HeaderMain .logo {
    display: inline-table;
    position: relative;
    z-index: 1;
    width: 155px
}

@media only screen and (min-width: 468px) {
    #Header .HeaderMain .logo {
        /* width: 188px */
        width: 225px
    }
}

#Header .HeaderMain .logo .st0 {
    fill: #fff
}

#Header .HeaderMain .logo .st1 {
    fill-rule: evenodd;
    clip-rule: evenodd;
    fill: #fff
}

#Header .HeaderMain .logo .st2 {
    fill-rule: evenodd;
    clip-rule: evenodd;
    fill: url(#SVGID_1_);
}

#Header .HeaderMain .logo .st3 {
    fill-rule: evenodd;
    clip-rule: evenodd;
    fill: url(#SVGID_00000075844214921967055530000010595909276358042292_);
}

#Header .HeaderMain .logo .st4 {
    fill: #fff
}

#Header .HeaderMain .ar .st0 {
    fill: #fff
}

#Header .HeaderMain .ar .st1,
#Header .HeaderMain .ar .st4 {
    fill: #fff
}

#Header .HeaderMain #HeaderPOP {
    min-height: 100vh;
    background: rgba(12, 16, 23, 0.5)
}

@media only screen and (min-width: 992px) {
    #Header .HeaderMain #HeaderPOP {
        background: transparent;
        position: unset;
        display: block;
        opacity: 1;
        padding: 0px;
        overflow: visible;
        height: 100%;
        min-height: auto
    }
}

#Header .HeaderMain #HeaderPOP .modal-dialog {
    margin: auto;
    max-width: 100%;
    -webkit-transform: none;
    transform: none;
    background: #2161ad;
    height: 100%;
    transition: ease-in-out all .3s
}

@media (max-width: 992px) and (min-width: 468px) {
    #Header .HeaderMain #HeaderPOP .modal-dialog {
        max-width: 400px
    }
}

@media only screen and (min-width: 992px) {
    #Header .HeaderMain #HeaderPOP .modal-dialog {
        margin: 0;
        background: transparent;
        right: auto
    }
}

#Header .HeaderMain #HeaderPOP .modal-content {
    padding: 0px;
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    height: 100%
}

#Header .HeaderMain #HeaderPOP .modal-body {
    padding: 0px;
    background: #fff;
    display: flex;
    align-items: center
}

@media only screen and (min-width: 992px) {
    #Header .HeaderMain #HeaderPOP .modal-body {
        justify-content: flex-end;
        background: transparent;
        height: 103px
    }
}

#Header .HeaderMain #HeaderPOP .modal-body .btnClose {
    position: fixed;
    background: transparent;
    opacity: 1;
    border: none;
    outline: none;
    box-shadow: none;
    width: 25px;
    height: 25px;
    z-index: 1;
    right: 20px;
    top: 20px
}

@media only screen and (min-width: 468px) {
    #Header .HeaderMain #HeaderPOP .modal-body .btnClose {
        width: 32px;
        height: 32px
    }
}

#Header .HeaderMain #HeaderPOP .modal-body .btnClose span {
    width: 100%;
    height: 2px;
    display: block;
    background: #0c1017;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
    position: relative
}

#Header .HeaderMain #HeaderPOP .modal-body .btnClose span:nth-child(1) {
    transform: rotate(45deg) translate(0px, 0px)
}

#Header .HeaderMain #HeaderPOP .modal-body .btnClose span:nth-child(2) {
    transform: rotate(-45deg) translate(2px, -2px)
}

@media only screen and (min-width: 992px) {
    #Header .HeaderMain #HeaderPOP .modal-body .btnClose {
        display: none
    }
}

#Header .HeaderMain #HeaderPOP .navbar-nav {
    width: 100%;
    padding: 40px 35px;
    position: relative
}

@media only screen and (min-width: 468px) {
    #Header .HeaderMain #HeaderPOP .navbar-nav {
        padding: 40px 80px
    }
}

@media only screen and (min-width: 992px) {
    #Header .HeaderMain #HeaderPOP .navbar-nav {
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        -ms-flex-direction: row;
        flex-direction: row;
        width: auto;
        margin: 0 -8px
    }
}

@media only screen and (min-width: 1200px) {
    #Header .HeaderMain #HeaderPOP .navbar-nav {
        margin: 0 -14px
    }
}

#Header .HeaderMain #HeaderPOP .navbar-nav .nav-list {
    height: 100%;
    position: relative
}

@media only screen and (min-width: 992px) {
    #Header .HeaderMain #HeaderPOP .navbar-nav .nav-list {
        padding: 33.5px 8px
    }
}

@media only screen and (min-width: 1200px) {
    #Header .HeaderMain #HeaderPOP .navbar-nav .nav-list {
        padding: 33.5px 15px
    }
}

@media only screen and (min-width: 1551px) {
    #Header .HeaderMain #HeaderPOP .navbar-nav .nav-list {
        padding: 33.5px 17px
    }
}

@media only screen and (min-width: 992px) {
    #Header .HeaderMain #HeaderPOP .navbar-nav .nav-list.MegaDropMenu {
        position: unset
    }
}

#Header .HeaderMain #HeaderPOP .navbar-nav .nav-list.MegaDropMenu .link {
    position: relative
}

#Header .HeaderMain #HeaderPOP .navbar-nav .nav-list .droparrow {
   position: absolute;
    top: 7px;
    width: 25px;
    z-index: 1;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
#Header .HeaderMain #HeaderPOP .navbar-nav .nav-list .droparrow svg{
    width: 15px;
}

@media only screen and (min-width: 992px) {
    #Header .HeaderMain #HeaderPOP .navbar-nav .nav-list .droparrow {
        display: none
    }
}

#Header .HeaderMain #HeaderPOP .navbar-nav .nav-list [data-bs-toggle="dropdown"] {
    cursor: default !important
}

#Header .HeaderMain #HeaderPOP .navbar-nav .nav-list .link {
    display: flex;
    align-items: center;
    text-transform: uppercase;
    color: #0c1017;
    height: 48px;
    font-size: 19px;
    letter-spacing: 2px;
    font-weight: 700;
    cursor: pointer;
    position: relative
}

@media only screen and (min-width: 992px) {
    #Header .HeaderMain #HeaderPOP .navbar-nav .nav-list .link {
        letter-spacing: 0;
        font-weight: 400;
        height: 36px;
        font-size: 13px;
        color: rgba(255, 255, 255, 0.52);
        justify-content: center
    }
}

@media only screen and (min-width: 1200px) {
    #Header .HeaderMain #HeaderPOP .navbar-nav .nav-list .link {
        font-size: 13px
    }
}

@media only screen and (min-width: 1551px) {
    #Header .HeaderMain #HeaderPOP .navbar-nav .nav-list .link {
        font-size: 14px
    }
}

#Header .HeaderMain #HeaderPOP .navbar-nav .nav-list .link::before {
    content: "";
    position: absolute;
    background: #2161ad;
    -webkit-transform: translateX(-80px) scaleY(0);
    -ms-transform: translateX(-80px) scaleY(0);
    transform: translateX(-80px) scaleY(0);
    -webkit-transition: -webkit-transform .3s ease;
    transition: -webkit-transform .3s ease;
    transition: transform .3s ease;
    transition: transform .3s ease, -webkit-transform .3s ease
}

@media only screen and (min-width: 992px) {
    #Header .HeaderMain #HeaderPOP .navbar-nav .nav-list .link::before {
        left: 50%;
        bottom: 100%;
        width: 2px;
        height: 23px;
        -webkit-transform-origin: top;
        -ms-transform-origin: top;
        transform-origin: top;
        -webkit-transform: translateX(-50%) scaleY(0);
        -ms-transform: translateX(-50%) scaleY(0);
        transform: translateX(-50%) scaleY(0)
    }
}

#Header .HeaderMain #HeaderPOP .navbar-nav .nav-list .link span {
    position: relative;
    z-index: 1
}

#Header .HeaderMain #HeaderPOP .navbar-nav .nav-list.active .link,
#Header .HeaderMain #HeaderPOP .navbar-nav .nav-list:hover .link {
    color: #2161ad
}

@media only screen and (min-width: 992px) {
    #Header .HeaderMain #HeaderPOP .navbar-nav .nav-list.active .link::before,
    #Header .HeaderMain #HeaderPOP .navbar-nav .nav-list:hover .link::before {
        -webkit-transform: translateX(-50%) scaleY(1);
        -ms-transform: translateX(-50%) scaleY(1);
        transform: translateX(-50%) scaleY(1)
    }
}

#Header .HeaderMain #HeaderPOP .navbar-nav .nav-list.active .link {
    color: #2161ad
}

@media only screen and (min-width: 992px) {
    #Header .HeaderMain #HeaderPOP .navbar-nav .nav-list.active .link {
        color: #fff
    }
}

#Header .HeaderMain #HeaderPOP .navbar-nav .nav-list.active .link::before {
    background: #2161ad
}

@media only screen and (min-width: 992px) {
    #Header .HeaderMain #HeaderPOP .navbar-nav .nav-list.active .link::before {
        -webkit-transform: translateX(-50%) scaleY(1);
        -ms-transform: translateX(-50%) scaleY(1);
        transform: translateX(-50%) scaleY(1)
    }
}

#Header .HeaderMain #HeaderPOP .navbar-nav .nav-list .MobLink {
    display: block;
    position: absolute !important;
    right: 0;
    top: 7px;
    width: 20px;
    height: fit-content;
    padding: 0;
    margin: 0;
    fill: #2161ad
}

#Header .HeaderMain #HeaderPOP .navbar-nav .nav-list .MobLink::before {
    display: none
}

@media only screen and (min-width: 992px) {
    #Header .HeaderMain #HeaderPOP .navbar-nav .nav-list .MobLink {
        display: none
    }
}

#Header .HeaderMain #HeaderPOP .navbar-nav .nav-list .dropdown-menu {
    position: static !important;
    visibility: hidden;
    border-radius: 0px;
    transition: opacity 200ms ease-in, transform 200ms ease-in, visibility 200ms ease-in;
    padding: 0;
    background: #fff;
    display: none;
    border: none;
    text-align: unset
}

@media only screen and (min-width: 992px) {
    #Header .HeaderMain #HeaderPOP .navbar-nav .nav-list .dropdown-menu {
        box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.15);
        opacity: 0;
        display: block;
        position: absolute !important;
        min-width: 250px
    }
}

#Header .HeaderMain #HeaderPOP .navbar-nav .nav-list .dropdown-menu a {
    color: #0c1017;
    display: block;
    font-size: 16px;
    padding: 10px 10px
}

@media only screen and (min-width: 992px) {
    #Header .HeaderMain #HeaderPOP .navbar-nav .nav-list .dropdown-menu a {
        font-size: 14px;
        padding: 13px 10px
    }
}

#Header .HeaderMain #HeaderPOP .navbar-nav .nav-list .dropdown-menu a:hover {
    color: #2161ad
}

@media only screen and (min-width: 992px) {
    #Header .HeaderMain #HeaderPOP .navbar-nav .nav-list .dropdown-menu.first_drop {
        top: 100%;
        transform: translate(0, 10px)
    }
}

@media only screen and (min-width: 992px) {
    #Header .HeaderMain #HeaderPOP .navbar-nav .nav-list .dropdown-menu.second_drop {
        top: 0;
        left: 100%;
        transform: translate(30px, 0px)
    }
}

#Header .HeaderMain #HeaderPOP .navbar-nav .nav-list .dropdown-menu.MegaDrop {
    width: 100%
}

@media only screen and (min-width: 992px) {
    #Header .HeaderMain #HeaderPOP .navbar-nav .nav-list .dropdown-menu.MegaDrop {
        top: 100%;
        width: 100%;
        transform: translate(0, 10px);
        pointer-events: none;
        padding: 40px 35px
    }
}

#Header .HeaderMain #HeaderPOP .navbar-nav .nav-list .dropdown-menu.MegaDrop .row {
    margin: 0
}

@media only screen and (min-width: 992px) {
    #Header .HeaderMain #HeaderPOP .navbar-nav .nav-list .dropdown-menu.MegaDrop .row {
        margin: 0 -15px
    }
}

#Header .HeaderMain #HeaderPOP .navbar-nav .nav-list .dropdown-menu.MegaDrop .col_,
#Header .HeaderMain #HeaderPOP .navbar-nav .nav-list .dropdown-menu.MegaDrop [class^="col-"],
#Header .HeaderMain #HeaderPOP .navbar-nav .nav-list .dropdown-menu.MegaDrop [class^="col-"] {
    padding: 0
}

@media only screen and (min-width: 992px) {
    #Header .HeaderMain #HeaderPOP .navbar-nav .nav-list .dropdown-menu.MegaDrop .col_,
    #Header .HeaderMain #HeaderPOP .navbar-nav .nav-list .dropdown-menu.MegaDrop [class^="col-"],
    #Header .HeaderMain #HeaderPOP .navbar-nav .nav-list .dropdown-menu.MegaDrop [class^="col-"] {
        padding: 0 15px
    }
}

@media only screen and (min-width: 1200px) {
    #Header .HeaderMain #HeaderPOP .navbar-nav .nav-list .dropdown-menu.MegaDrop .Col1 {
        width: 45%
    }
}

@media only screen and (min-width: 1200px) {
    #Header .HeaderMain #HeaderPOP .navbar-nav .nav-list .dropdown-menu.MegaDrop .Col2 {
        width: 27%
    }
}

#Header .HeaderMain #HeaderPOP .navbar-nav .nav-list .dropdown-menu.MegaDrop .Mobhide {
    display: none;
    padding: 15px
}

@media only screen and (min-width: 992px) {
    #Header .HeaderMain #HeaderPOP .navbar-nav .nav-list .dropdown-menu.MegaDrop .Mobhide {
        display: block
    }
}

#Header .HeaderMain #HeaderPOP .navbar-nav .nav-list .dropdown-menu.MegaDrop .ImgSec {
    height: 100%
}

#Header .HeaderMain #HeaderPOP .navbar-nav .nav-list .dropdown-menu.MegaDrop .dFlex {
    width: 100%
}

@media only screen and (min-width: 992px) {
    #Header .HeaderMain #HeaderPOP .navbar-nav .nav-list .dropdown-menu.MegaDrop .dFlex {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap
    }
}

@media only screen and (min-width: 992px) {
    #Header .HeaderMain #HeaderPOP .navbar-nav .nav-list .dropdown-menu.MegaDrop .dFlex .Dropul {
        width: calc(100% / 3)
    }
}

#Header .HeaderMain #HeaderPOP .navbar-nav .nav-list .dropdown-menu.MegaDrop ul {
    position: static !important;
    opacity: 1;
    visibility: visible;
    transform: translate(0, 0px);
    border: none;
    box-shadow: none
}

#Header .HeaderMain #HeaderPOP .navbar-nav .nav-list .dropdown-menu.MegaDrop ul [data-bs-toggle="dropdown"],
#Header .HeaderMain #HeaderPOP .navbar-nav .nav-list .dropdown-menu.MegaDrop ul .DropLink {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 0;
    margin-bottom: 10px;
    color: #0c1017
}

@media only screen and (min-width: 992px) {
    #Header .HeaderMain #HeaderPOP .navbar-nav .nav-list .dropdown-menu.MegaDrop ul [data-bs-toggle="dropdown"],
    #Header .HeaderMain #HeaderPOP .navbar-nav .nav-list .dropdown-menu.MegaDrop ul .DropLink {
        color: #2161ad
    }
}

#Header .HeaderMain #HeaderPOP .navbar-nav .nav-list .dropdown-menu.MegaDrop ul .DropWrp {
    position: relative
}

#Header .HeaderMain #HeaderPOP .navbar-nav .nav-list .dropdown-menu.MegaDrop ul .DropWrp [data-bs-toggle="dropdown"] {
       display: flex;
    position: absolute !important;
    top: 0px;
    width: 25px;
    height: 15px;
    padding: 0;
    margin: 0;
    justify-content: flex-end;
    fill: #2161ad;
}
#Header .HeaderMain #HeaderPOP .navbar-nav .nav-list .dropdown-menu.MegaDrop ul .DropWrp [data-bs-toggle="dropdown"] svg{
    width: 15px;
}

#Header .HeaderMain #HeaderPOP .navbar-nav .nav-list .dropdown-menu.MegaDrop ul .DropWrp [data-bs-toggle="dropdown"]::before {
    display: none
}

@media only screen and (min-width: 992px) {
    #Header .HeaderMain #HeaderPOP .navbar-nav .nav-list .dropdown-menu.MegaDrop ul .DropWrp [data-bs-toggle="dropdown"] {
        display: none
    }
}

#Header .HeaderMain #HeaderPOP .navbar-nav .nav-list .dropdown-menu.MegaDrop ul .dropdown-menu {
    text-align: unset;
    margin-bottom: 25px !important;
    min-width: auto
}

@media only screen and (min-width: 992px) {
    #Header .HeaderMain #HeaderPOP .navbar-nav .nav-list .dropdown-menu.MegaDrop ul .dropdown-menu {
        margin-bottom: 0px !important
    }
}

#Header .HeaderMain #HeaderPOP .navbar-nav .nav-list .dropdown-menu.MegaDrop ul .dropdown-menu li {
    position: relative
}

#Header .HeaderMain #HeaderPOP .navbar-nav .nav-list .dropdown-menu.MegaDrop ul .dropdown-menu a {
    font-size: 16px;
    color: #0c1017;
    border: none;
    position: relative
}

#Header .HeaderMain #HeaderPOP .navbar-nav .nav-list .dropdown-menu.MegaDrop ul .dropdown-menu a::before {
    content: "";
    position: absolute;
    top: 19px;
    background-color: #2161ad;
    width: 0px;
    height: 2px;
    opacity: 0;
    transition: all .3s
}

@media only screen and (min-width: 992px) {
    #Header .HeaderMain #HeaderPOP .navbar-nav .nav-list .dropdown-menu.MegaDrop ul .dropdown-menu a {
        font-size: 14px;
        padding: 10px 0
    }
}

#Header .HeaderMain #HeaderPOP .navbar-nav .nav-list .dropdown-menu.MegaDrop ul .dropdown-menu a:hover {
    color: #2161ad
}

#Header .HeaderMain #HeaderPOP .navbar-nav .nav-list .dropdown-menu.MegaDrop ul .dropdown-menu a:hover::before {
    width: 7px;
    opacity: 1
}

@media only screen and (min-width: 1200px) {
    #Header .HeaderMain #HeaderPOP .navbar-nav .nav-list .dropdown-menu.MegaDrop ul.FlexUl {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 10px
    }
}

#Header .HeaderMain #HeaderPOP .navbar-nav .nav-list .dropdown-menu.MegaDrop.show {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: translate(0, 0px) !important
}

@media only screen and (min-width: 992px) {
    #Header .HeaderMain #HeaderPOP .navbar-nav .nav-list .dropdown-menu.MegaDrop.show {
        inset: 100% auto auto -168px !important;
        pointer-events: all
    }
}

#Header .HeaderMain #HeaderPOP .navbar-nav .nav-list:hover .first_drop {
    opacity: 1;
    visibility: visible
}

@media only screen and (min-width: 992px) {
    #Header .HeaderMain #HeaderPOP .navbar-nav .nav-list:hover .first_drop {
        transform: translate(0, 0px) !important
    }
}

#Header .HeaderMain #HeaderPOP .navbar-nav .nav-list:hover .first_drop .dropdown-submenu:hover .second_drop {
    opacity: 1;
    visibility: visible
}

@media only screen and (min-width: 992px) {
    #Header .HeaderMain #HeaderPOP .navbar-nav .nav-list:hover .first_drop .dropdown-submenu:hover .second_drop {
        transform: translate(0, 0px) !important
    }
}

#Header .HeaderMain #HeaderPOP .navbar-nav .nav-list .first_drop.show {
    opacity: 1;
    inset: 100% auto auto 14px !important;
    visibility: visible;
    transform: translate(0, 0px) !important
}

#Header .HeaderMain #HeaderPOP .navbar-nav .nav-list .first_drop.show.show {
    display: block
}

#Header .HeaderMain #HeaderPOP .navbar-nav .nav-list .second_drop.show {
    opacity: 1;
    inset: 0 auto auto 100% !important;
    visibility: visible;
    transform: translate(0, 0px) !important
}

#Header .HeaderMain #HeaderPOP .navbar-nav .nav-list .second_drop.show.show {
    display: block
}

#Header .HeaderMain #HeaderPOP .navbar-nav .nav-list.MegaDropMenu:hover .MegaDrop {
    pointer-events: all;
    opacity: 1;
    visibility: visible;
    transform: translate(0, 0px) !important
}

#Header .HeaderMain #HeaderPOP .HeadfixedRit {
    position: relative;
    z-index: 5;
    background: #fff;
    box-shadow: 0px 5px 70px 0px rgba(30, 33, 56, 0.1)
}

@media only screen and (max-width: 468px) {
    #Header .HeaderMain #HeaderPOP .HeadfixedRit {
        bottom: 0;
        width: 100%;
        border-top: 1px solid rgba(2, 2, 2, 0.11)
    }
}

@media only screen and (min-width: 468px) {
    #Header .HeaderMain #HeaderPOP .HeadfixedRit {
        display: none
    }
}

@media only screen and (max-width: 468px) {
    #Header .HeaderMain #HeaderPOP .HeadfixedRit ul {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0px
    }
    #Header .HeaderMain #HeaderPOP .HeadfixedRit ul li {
        width: calc(100% / 3)
    }
}

#Header .HeaderMain #HeaderPOP .HeadfixedRit ul a {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 5px;
    height: 40px;
    transition: all .3s;
    width: 100%
}

@media only screen and (min-width: 468px) {
    #Header .HeaderMain #HeaderPOP .HeadfixedRit ul a {
        width: 40px
    }
}

@media only screen and (min-width: 768px) {
    #Header .HeaderMain #HeaderPOP .HeadfixedRit ul a {
        height: 50px;
        width: 50px
    }
}

@media only screen and (min-width: 1441px) {
    #Header .HeaderMain #HeaderPOP .HeadfixedRit ul a {
        height: 59px;
        width: 57px
    }
}

#Header .HeaderMain #HeaderPOP .HeadfixedRit ul a span {
    text-transform: uppercase;
    font-size: 8px;
    display: none;
    color: #707675;
    transition: all .3s
}

@media only screen and (min-width: 768px) {
    #Header .HeaderMain #HeaderPOP .HeadfixedRit ul a span {
        display: block
    }
}

@media only screen and (min-width: 1441px) {
    #Header .HeaderMain #HeaderPOP .HeadfixedRit ul a span {
        font-size: 11px
    }
}

#Header .HeaderMain #HeaderPOP .HeadfixedRit ul a svg {
    display: block;
    margin: auto;
    width: 19px;
    fill: #fff;
    transition: all .3s
}

@media only screen and (min-width: 468px) {
    #Header .HeaderMain #HeaderPOP .HeadfixedRit ul a svg {
        width: 18px
    }
}

@media only screen and (min-width: 768px) {
    #Header .HeaderMain #HeaderPOP .HeadfixedRit ul a svg {
        width: 22px
    }
}

#Header .HeaderMain #HeaderPOP .HeadfixedRit ul a.whatsapp svg .st0 {
    fill-rule: evenodd;
    clip-rule: evenodd
}

#Header .HeaderMain #HeaderPOP .HeadfixedRit ul li:nth-child(1) a,
#Header .HeaderMain #HeaderPOP .HeadfixedRit ul li:nth-child(2) a {
    background: #2c2c2c
}

#Header .HeaderMain #HeaderPOP .HeadfixedRit ul li:nth-child(3) a {
    background: #2161ad
}

#Header .HeaderMain #HeaderPOP .HeadfixedRit ul li:nth-child(3) a svg {
    fill: #fff
}

#Header .HeaderMain #HeaderPOP .HeadfixedRit ul li:nth-child(4) a svg {
    fill: #2161ad
}

#Header .HeaderMain #HeaderPOP .HeadfixedRit ul li:hover a {
    background: #0c1017
}

#Header .HeaderMain #HeaderPOP .HeadfixedRit ul li:hover a span {
    color: #fff
}

#Header .HeaderMain #HeaderPOP .HeadfixedRit ul li:hover a svg {
    fill: #fff
}

#Header .HeaderMain .QuickAction {
    display: none
}

@media only screen and (min-width: 992px) {
    #Header .HeaderMain .QuickAction {
        display: flex
    }
}

#Header .HeaderMain .lang {
    transition: all .3s;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    position: absolute
}

@media only screen and (min-width: 468px) {
    #Header .HeaderMain .lang {
        padding: 4px 13px
    }
}

@media only screen and (min-width: 992px) {
    #Header .HeaderMain .lang {
        transform: none;
        display: none;
        position: unset
    }
}

#Header .HeaderMain .lang a {
    display: flex;
    align-items: center;
    margin: 0 -5px
}

@media only screen and (min-width: 468px) {
    #Header .HeaderMain .lang a {
        margin: 0 -7.5px
    }
}

#Header .HeaderMain .lang a>* {
    padding: 0 5px
}

@media only screen and (min-width: 468px) {
    #Header .HeaderMain .lang a>* {
        padding: 0 7.5px
    }
}

#Header .HeaderMain .lang a .txt {
    color: #fff;
    font-weight: 600;
    font-family: "Cairo", sans-serif;
    font-size: 10px;
    display: none
}

@media only screen and (min-width: 468px) {
    #Header .HeaderMain .lang a .txt {
        color: #0c1017;
        font-size: 12px
    }
}

@media only screen and (min-width: 1200px) {
    #Header .HeaderMain .lang a .txt {
        display: block
    }
}

@media only screen and (min-width: 1551px) {
    #Header .HeaderMain .lang a .txt {
        font-size: 14px
    }
}

#Header .MenuIcon {
    width: 28px;
    height: 100%;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center
}

@media only screen and (min-width: 468px) {
    #Header .MenuIcon {
        width: 40px
    }
}

@media only screen and (min-width: 992px) {
    #Header .MenuIcon {
        display: none
    }
}

#Header .MenuIcon button {
    border: none;
    font-size: 0;
    outline: none;
    padding: 0;
    margin-right: 0;
    margin-top: 0;
    box-shadow: none;
    border-radius: 0;
    background: transparent;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    height: fit-content;
    height: -moz-fit-content
}

@media only screen and (max-width: 468px) {
    #Header .MenuIcon button {
        width: 55px;
            height: 100%;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    }
}

#Header .MenuIcon button span {
    width: 100%;
    height: 2px;
    display: block;
    background: #fff;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
    position: relative
}

#Header .MenuIcon button span:nth-child(2) {
    width: 75%
}

#Header .MenuIcon button span~span {
    margin-top: 6px
}

@media only screen and (min-width: 468px) {
    #Header .MenuIcon button span~span {
        margin-top: 8px
    }
}

#Header .MenuIcon button.open span {
    width: 100%
}

#Header.shrunk {
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.15)
}

#Header.shrunk .TopHeader {
    display: none
}

#Header.shrunk .HeaderMain .logo .st0 {
    fill: #2261AE
}

#Header.shrunk .HeaderMain .logo .st1 {
    fill: #2261AE
}

#Header.shrunk .HeaderMain .logo .st4 {
    fill: #939598
}

#Header.shrunk .HeaderMain .ar .st0 {
    fill: #2261AE
}

#Header.shrunk .HeaderMain .ar .st1,
#Header.shrunk .HeaderMain .ar .st4 {
    fill: #939598
}

@media only screen and (min-width: 992px) {
    #Header.shrunk .HeaderMain #HeaderPOP .modal-body {
        height: 85px
    }
}

@media only screen and (min-width: 992px) {
    #Header.shrunk .HeaderMain #HeaderPOP .navbar-nav .nav-list {
        padding: 24.5px 8px
    }
}

@media only screen and (min-width: 1200px) {
    #Header.shrunk .HeaderMain #HeaderPOP .navbar-nav .nav-list {
        padding: 24.5px 12px
    }
}

@media only screen and (min-width: 1551px) {
    #Header.shrunk .HeaderMain #HeaderPOP .navbar-nav .nav-list {
        padding: 24.5px 17px
    }
}

#Header.shrunk .HeaderMain #HeaderPOP .navbar-nav .nav-list .link {
    color: #0c1017
}

#Header.shrunk .HeaderMain #HeaderPOP .navbar-nav .nav-list.active .link,
#Header.shrunk .HeaderMain #HeaderPOP .navbar-nav .nav-list:hover .link {
    color: #2161ad
}

#Header.shrunk .HeaderMain #HeaderPOP .navbar-nav .nav-list.active .link {
    color: #2161ad
}

@media only screen and (min-width: 1200px) {
    #Header.shrunk .HeaderMain #HeaderPOP .navbar-nav .nav-list .dropdown-menu.MegaDrop {
        width: calc(100% + 100px)
    }
}

@media only screen and (min-width: 1551px) {
    #Header.shrunk .HeaderMain #HeaderPOP .navbar-nav .nav-list .dropdown-menu.MegaDrop {
        width: calc(100% + 145px)
    }
}

#Header.shrunk .MenuIcon button span {
    background: #0c1017
}

#Header.shrunk::after {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0)
}

#Header.shrunk .lang {
    display: block
}

@media only screen and (max-width: 992px) {
    html:lang(en) #Header .HeaderMain #HeaderPOP .modal-dialog {
        margin-right: 0;
        right: -100%
    }
}

html:lang(en) #Header .HeaderMain #HeaderPOP.show .modal-dialog {
    right: 0px
}

html:lang(en) #Header .HeaderMain #HeaderPOP .navbar-nav .nav-list .dropdown-menu {
    text-align: unset
}

html:lang(en) #Header .HeaderMain #HeaderPOP .navbar-nav .nav-list .dropdown-menu.MegaDrop ul [data-bs-toggle="dropdown"] {
    text-align: left
}

@media only screen and (max-width: 992px) {
    html:lang(en) #Header .HeaderMain #HeaderPOP .navbar-nav .nav-list .link::before {
        width: 64px;
        height: 2px;
        -webkit-transform-origin: left;
        -ms-transform-origin: left;
        transform-origin: left
    }
}

@media only screen and (max-width: 468px) {
    html:lang(en) #Header .HeaderMain #HeaderPOP .navbar-nav .nav-list .link::before {
        width: 25px
    }
}

@media only screen and (max-width: 992px) {
    html:lang(en) #Header .HeaderMain #HeaderPOP .navbar-nav .nav-list.active .link::before,
    html:lang(en) #Header .HeaderMain #HeaderPOP .navbar-nav .nav-list:hover .link::before {
        -webkit-transform: translateX(-80px) scaleY(1);
        -ms-transform: translateX(-80px) scaleY(1);
        transform: translateX(-80px) scaleY(1)
    }
}

@media only screen and (max-width: 468px) {
    html:lang(en) #Header .HeaderMain #HeaderPOP .navbar-nav .nav-list.active .link::before,
    html:lang(en) #Header .HeaderMain #HeaderPOP .navbar-nav .nav-list:hover .link::before {
        -webkit-transform: translateX(-35px) scaleY(1);
        -ms-transform: translateX(-35px) scaleY(1);
        transform: translateX(-35px) scaleY(1)
    }
}

html:lang(en) #Header .HeaderMain .lang {
    right: 70px
}

@media only screen and (min-width: 468px) {
    html:lang(en) #Header .HeaderMain .lang {
        right: 105px
    }
}

@media only screen and (min-width: 992px) {
    html:lang(en) #Header .HeaderMain .lang {
        padding-right: 15px;
        padding-left: 15px;
        border-left: 1px solid rgba(13, 13, 13, 0.2);
        right: 0;
        margin-left: 18px
    }
}

@media only screen and (min-width: 1200px) {
    html:lang(en) #Header .HeaderMain .lang {
        margin-left: 22px
    }
}

@media only screen and (min-width: 1551px) {
    html:lang(en) #Header .HeaderMain .lang {
        padding-left: 40px;
        margin-left: 40px
    }
}


/* html:lang(en) #Header.shrunk .HeaderMain .logo .st4 {
    fill: #000
} */

html:lang(ar) #Header .TopHeader marquee li:not(:last-of-type)::after {
    right: auto;
    left: 0;
}

html:lang(ar) #Header .TopHeader marquee a .label {
    margin-right: 0;
    margin-left: 10px;
}

html:lang(ar) #Header .TopHeader marquee a .Nbr {
    direction: ltr;
}

html:lang(ar) #Header .HeaderMain .logo .st1 {
    clip-path: none
}

@media only screen and (max-width: 992px) {
    html:lang(ar) #Header .HeaderMain #HeaderPOP .modal-dialog {
        margin-left: 0;
        left: -100%
    }
}

html:lang(ar) #Header .HeaderMain #HeaderPOP.show .modal-dialog {
    left: 0px
}

html:lang(ar) #Header .HeaderMain #HeaderPOP .modal-body .btnClose {
    right: auto;
    left: 5px
}

@media only screen and (min-width: 468px) {
    html:lang(ar) #Header .HeaderMain #HeaderPOP .modal-body .btnClose {
        right: auto;
        left: 15px
    }
}

html:lang(ar) #Header .HeaderMain #HeaderPOP .navbar-nav .nav-list .link {
    font-weight: 500
}

html:lang(ar) #Header .HeaderMain #HeaderPOP .navbar-nav .nav-list .dropdown-menu {
    text-align: unset
}

html:lang(ar) #Header .HeaderMain #HeaderPOP .navbar-nav .nav-list .dropdown-menu.MegaDrop ul [data-bs-toggle="dropdown"] {
    text-align: right
}

html:lang(ar) #Header .HeaderMain #HeaderPOP .navbar-nav .nav-list .dropdown-menu.MegaDrop ul .dropdown-menu {
    text-align: unset
}

html:lang(ar) #Header .HeaderMain #HeaderPOP .navbar-nav .nav-list .dropdown-menu.MegaDrop ul .dropdown-menu li {
    text-align: right

}

html:lang(ar) #Header .HeaderMain #HeaderPOP .navbar-nav .nav-list .dropdown-menu.MegaDrop ul .dropdown-menu li::before {
    left: auto;
    right: 0
}

html:lang(ar) #Header .HeaderMain #HeaderPOP .navbar-nav .nav-list .dropdown-menu.MegaDrop ul .dropdown-menu a {
    text-align: right
}

html:lang(ar) #Header .HeaderMain #HeaderPOP .navbar-nav .nav-list .first_drop.show {
    inset: 100% auto auto auto !important
}

@media only screen and (max-width: 992px) {
    html:lang(ar) #Header .HeaderMain #HeaderPOP .navbar-nav .nav-list .link::before {
        width: 55px;
        height: 2px;
        -webkit-transform-origin: right;
        -ms-transform-origin: right;
        transform-origin: right
    }
}

@media only screen and (max-width: 992px) and (max-width: 992px) and (min-width: 468px) {
    html:lang(ar) #Header .HeaderMain #HeaderPOP .navbar-nav .nav-list .link::before {
        width: 64px
    }
}

@media only screen and (max-width: 468px) {
    html:lang(ar) #Header .HeaderMain #HeaderPOP .navbar-nav .nav-list .link::before {
        width: 25px
    }
}

@media only screen and (max-width: 468px) {
    html:lang(ar) #Header .HeaderMain #HeaderPOP .navbar-nav .nav-list.active .link::before,
    html:lang(ar) #Header .HeaderMain #HeaderPOP .navbar-nav .nav-list:hover .link::before {
        -webkit-transform: translateX(35px) scaleY(1);
        -ms-transform: translateX(35px) scaleY(1);
        transform: translateX(35px) scaleY(1)
    }
}

@media (max-width: 992px) and (min-width: 468px) {
    html:lang(ar) #Header .HeaderMain #HeaderPOP .navbar-nav .nav-list.active .link::before,
    html:lang(ar) #Header .HeaderMain #HeaderPOP .navbar-nav .nav-list:hover .link::before {
        -webkit-transform: translateX(80px) scaleY(1);
        -ms-transform: translateX(80px) scaleY(1);
        transform: translateX(80px) scaleY(1)
    }
}

@media only screen and (max-width: 468px) {
    html:lang(ar) #Header .HeaderMain #HeaderPOP .navbar-nav .nav-list.active .link::before {
        -webkit-transform: translateX(35px) scaleY(1);
        -ms-transform: translateX(35px) scaleY(1);
        transform: translateX(35px) scaleY(1)
    }
}

@media (max-width: 992px) and (min-width: 468px) {
    html:lang(ar) #Header .HeaderMain #HeaderPOP .navbar-nav .nav-list.active .link::before {
        -webkit-transform: translateX(80px) scaleY(1);
        -ms-transform: translateX(80px) scaleY(1);
        transform: translateX(80px) scaleY(1)
    }
}

html:lang(ar) #Header .HeaderMain .lang {
    left: 70px
}

@media only screen and (min-width: 468px) {
    html:lang(ar) #Header .HeaderMain .lang {
        left: 105px
    }
}

@media only screen and (min-width: 992px) {
    html:lang(ar) #Header .HeaderMain .lang {
        padding-left: 15px;
        padding-right: 15px;
        border-right: 1px solid rgba(13, 13, 13, 0.2);
        left: 0;
        margin-right: 18px
    }
}

@media only screen and (min-width: 1200px) {
    html:lang(ar) #Header .HeaderMain .lang {
        margin-right: 22px
    }
}

@media only screen and (min-width: 1551px) {
    html:lang(ar) #Header .HeaderMain .lang {
        padding-right: 40px
    }
}


/* html:lang(ar) #Header.shrunk .HeaderMain .logo .st1,
html:lang(ar) #Header.shrunk .HeaderMain .logo .st4 {
    fill: #000
} */

#viewport {
    overflow: hidden
}

.MainHead {
    margin-bottom: 25px
}

@media only screen and (min-width: 1200px) {
    .MainHead {
        margin-bottom: 35px
    }
}

.MainHead .TagLine {
    color: #55585d;
    font-family: "HelveticaNeueLT 75 Roman";
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 8px;
    padding-left: 40px;
    position: relative;
    font-size: 10px
}

@media only screen and (min-width: 468px) {
    .MainHead .TagLine {
        font-size: 13px;
        padding-left: 47px;
        margin-bottom: 20px
    }
}

@media only screen and (min-width: 768px) {
    .MainHead .TagLine {
        margin-bottom: 25px
    }
}

@media only screen and (min-width: 1551px) {
    .MainHead .TagLine {
        font-size: 15px;
        margin-bottom: 35px
    }
}

.MainHead .TagLine::before {
    content: "";
    position: absolute;
    left: 0px;
    top: 0px;
    bottom: 0;
    margin: auto;
    background: #2161ad;
    width: 24px;
    height: 2px
}

.MainHead .Head {
    color: #060606;
    font-weight: 600;
    text-transform: uppercase;
    max-width: 480px;
    font-size: 22px;
    line-height: 30px
}

@media only screen and (min-width: 468px) {
    .MainHead .Head {
        font-size: 28px;
        line-height: 36px
    }
}

@media only screen and (min-width: 768px) {
    .MainHead .Head {
        font-size: 32px;
        line-height: 41px
    }
}

@media only screen and (min-width: 1200px) {
    .MainHead .Head {
        line-height: 48px
    }
}

@media only screen and (min-width: 1551px) {
    .MainHead .Head {
        font-size: 40px;
        line-height: 50px
    }
}

.HeadSec {
    margin-bottom: 20px
}

@media only screen and (min-width: 468px) {
    .HeadSec {
        margin-bottom: 35px
    }
}

@media only screen and (min-width: 768px) {
    .HeadSec {
        margin-bottom: 45px
    }
}

.HeadSec .container {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.HeadSec .Title {
    color: #55585d;
    font-weight: 600;
    text-transform: uppercase;
    position: relative;
    font-size: 16px;
    padding-left: 40px;
    letter-spacing: 1px;
    margin: 0
}

@media only screen and (min-width: 468px) {
    .HeadSec .Title {
        font-size: 18px;
        padding-left: 47px
    }
}

.HeadSec .Title::before {
    content: "";
    position: absolute;
    left: 0px;
    top: 0px;
    bottom: 0;
    margin: auto;
    background: #2161ad;
    width: 24px;
    height: 2px
}

.HeadSec .ViewBtn {
    color: #737373;
    text-transform: uppercase;
    font-size: 11px;
    font-family: "HelveticaNeueLT 75 Roman";
    font-weight: 500;
    letter-spacing: .6px;
    line-height: 11px
}

@media only screen and (min-width: 468px) {
    .HeadSec .ViewBtn {
        font-size: 14px;
        line-height: 14px
    }
}

.HeadSec .ViewBtn:hover {
    color: #2161ad;
    letter-spacing: 2px
}

.HeadSec .Navigation {
    display: flex;
    align-items: center;
    margin: 0 -10px
}

@media only screen and (min-width: 468px) {
    .HeadSec .Navigation {
        margin: 0 -25px
    }
}

.HeadSec .Navigation .arrows {
    cursor: pointer;
    padding: 0 10px
}

@media only screen and (min-width: 468px) {
    .HeadSec .Navigation .arrows {
        padding: 0 25px
    }
}

.HeadSec .Navigation .arrows svg {
    width: 9px;
    fill: #fff
}

.HeadSec .Navigation .line {
    background: #2161ad;
    width: 35px;
    height: 2px
}

@media only screen and (min-width: 468px) {
    .HeadSec .Navigation .line {
        width: 65px
    }
}

.HeadSec .Watch {
    color: #737373;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    font-size: 12px
}

@media only screen and (min-width: 468px) {
    .HeadSec .Watch {
        font-size: 14px
    }
}

.HeadSec .Watch svg {
    fill: #2161ad;
    transition: all .3s;
    margin: 0 10px;
    width: 19px
}

@media only screen and (min-width: 468px) {
    .HeadSec .Watch svg {
        margin: 0 20px;
        width: 23px
    }
}

.HeadSec .Watch:hover svg {
    fill: #0c1017
}

.ComTitle {
    color: #3a3a3a;
    font-weight: 600;
    text-transform: uppercase;
    position: relative;
    font-size: 14px;
    padding-left: 40px;
    letter-spacing: 1px;
    margin-bottom: 20px
}

@media only screen and (min-width: 468px) {
    .ComTitle {
        font-size: 15px;
        margin-bottom: 35px;
        padding-left: 47px
    }
}

@media only screen and (min-width: 768px) {
    .ComTitle {
        margin-bottom: 25px
    }
}

@media only screen and (min-width: 1200px) {
    .ComTitle {
        margin-bottom: 45px
    }
}

.ComTitle::before {
    content: "";
    position: absolute;
    left: 0px;
    top: 0px;
    bottom: 0;
    margin: auto;
    background: #2161ad;
    width: 24px;
    height: 2px
}

html:lang(ar) .MainHead .TagLine {
    padding-left: 0px;
    padding-right: 40px
}

@media only screen and (min-width: 468px) {
    html:lang(ar) .MainHead .TagLine {
        padding-left: 0px;
        padding-right: 47px
    }
}

html:lang(ar) .MainHead .TagLine::before {
    left: auto;
    right: 0
}

html:lang(ar) .HeadSec .Title {
    font-weight: 700;
    padding-left: 0px;
    padding-right: 40px
}

html:lang(ar) .HeadSec .Title::before {
    left: auto;
    right: 0
}

@media only screen and (min-width: 468px) {
    html:lang(ar) .HeadSec .Title {
        padding-left: 0px;
        padding-right: 47px
    }
}

html:lang(ar) .HeadSec .ViewBtn {
    font-weight: 600
}

html:lang(ar) .HeadSec .Navigation .arrows svg {
    transform: rotate(180deg)
}

html:lang(ar) .ComTitle {
    font-weight: 700;
    padding-left: 0px;
    padding-right: 40px
}

html:lang(ar) .ComTitle::before {
    left: auto;
    right: 0
}

@media only screen and (min-width: 468px) {
    html:lang(ar) .ComTitle {
        padding-left: 0px;
        padding-right: 47px
    }
}

#pageBanner {
    position: relative;
    background: #020202;
    height: 195px
}

@media only screen and (min-width: 468px) {
    #pageBanner {
        height: 300px
    }
}

@media only screen and (min-width: 768px) {
    #pageBanner {
        height: 330px
    }
}

@media only screen and (min-width: 992px) {
    #pageBanner {
        height: 420px
    }
}

@media only screen and (min-width: 1200px) {
    #pageBanner {
        height: 490px
    }
}

#pageBanner::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: #020202;
    opacity: .7;
    left: 0;
    top: 0;
    z-index: 1
}

#pageBanner .Lazyimage {
    position: relative;
    z-index: 0
}

#pageBanner .BannerTitle {
    color: #fff;
    text-transform: uppercase;
    position: absolute;
    left: 0px;
    width: 100%;
    text-align: center;
    z-index: 2;
    font-size: 20px;
    bottom: 35px;
    font-family: "HelveticaNeueLT 75 Roman";
    font-weight: 400
}

@media only screen and (min-width: 468px) {
    #pageBanner .BannerTitle {
        font-weight: 600;
        font-size: 34px;
        bottom: 85px
    }
}

@media only screen and (min-width: 768px) {
    #pageBanner .BannerTitle {
        font-size: 38px
    }
}

@media only screen and (min-width: 1551px) {
    #pageBanner .BannerTitle {
        font-size: 50px
    }
}

.NOBanner {
    background: #020202;
    padding-top: 103px
}

@media only screen and (min-width: 468px) {
    .NOBanner {
        padding-top: 107px
    }
}

@media only screen and (min-width: 768px) {
    .NOBanner {
        padding-top: 145px
    }
}

.animsition-loading {
    display: none
}

.animsition,
.animsition-overlay {
    height: 100%
}

.hoveranim {
    position: relative
}

.hoveranim::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    background: #0c1017;
    -webkit-transform: scaleX(0);
    -ms-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: -webkit-transform .3s ease;
    transition: -webkit-transform .3s ease;
    transition: transform .3s ease;
    transition: transform .3s ease, -webkit-transform .3s ease
}

.hoveranim span {
    position: relative
}

.hoveranim:hover::before {
    -webkit-transform: scaleX(1);
    -ms-transform: scaleX(1);
    transform: scaleX(1)
}

html:lang(en) .hoveranim::before {
    left: 0;
    -webkit-transform-origin: right;
    -ms-transform-origin: right;
    transform-origin: right
}

html:lang(en) .hoveranim:hover::before {
    -webkit-transform-origin: left;
    -ms-transform-origin: left;
    transform-origin: left
}

html:lang(ar) .hoveranim::before {
    right: 0;
    -webkit-transform-origin: left;
    -ms-transform-origin: left;
    transform-origin: left
}

html:lang(ar) .hoveranim:hover::before {
    -webkit-transform-origin: right;
    -ms-transform-origin: right;
    transform-origin: right
}

#MainSlider {
    background: #000;
    position: relative
}

#MainSlider .carousel-item {
    align-items: center;
    display: flex
}

#MainSlider .carousel-item::before {
    content: "";
    width: 100%;
    height: 35%;
    position: absolute;
    top: 0;
    opacity: .8;
    left: 0;
    z-index: 1;
    background: -moz-linear-gradient(180deg, #1b1b1b 0%, transparent 100%);
    background: -webkit-linear-gradient(180deg, #1b1b1b 0%, transparent 100%);
    background: linear-gradient(180deg, #1b1b1b 0%, transparent 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#1b1b1b", endColorstr="#000000", GradientType=1)
}

#MainSlider .carousel-item picture,
#MainSlider .carousel-item .Lazyimage {
    width: 100%;
    height: 100%;
    object-fit: cover
}

#MainSlider .carousel-item .CarouselCntnt {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    margin-bottom: -40px;
    opacity: 0;
    transition: all .3s;
    z-index: 2
}

#MainSlider .carousel-item .CarouselCntnt .SlideCntnt {
    font-weight: 500;
    font-family: "HelveticaNeueLT 65";
    color: #fff;
    text-transform: uppercase;
    font-size: 36px;
    max-width: 360px
}

@media only screen and (min-width: 468px) {
    #MainSlider .carousel-item .CarouselCntnt .SlideCntnt {
        font-family: "HelveticaNeueLT 75 Roman";
        font-size: 22px
    }
}

@media only screen and (min-width: 576px) {
    #MainSlider .carousel-item .CarouselCntnt .SlideCntnt {
        font-size: 27px;
        max-width: 400px
    }
}

@media only screen and (min-width: 768px) {
    #MainSlider .carousel-item .CarouselCntnt .SlideCntnt {
        font-size: 40px;
        max-width: 540px
    }
}

@media only screen and (min-width: 1551px) {
    #MainSlider .carousel-item .CarouselCntnt .SlideCntnt {
        font-size: 50px;
        max-width: 655px
    }
}

#MainSlider .carousel-item img {
    max-height: 650px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    height: 100vh
}

@media only screen and (min-width: 468px) {
    #MainSlider .carousel-item img {
        min-height: auto;
        max-height: 640px;
        height: calc(100vh - 150px)
    }
}

@media only screen and (min-width: 992px) {
    #MainSlider .carousel-item img {
        max-height: 860px
    }
}

@media only screen and (min-width: 1200px) {
    #MainSlider .carousel-item img {
        max-height: 100%;
        height: 100vh
    }
}

#MainSlider .carousel-item.active .CarouselCntnt {
    opacity: 1
}

#MainSlider .carousel-item.active .char {
    animation: swing-left-fwd .4s cubic-bezier(.5, 0, .5, 1) both;
    animation-delay: calc(60ms * var(--char-index))
}

@keyframes swing-left-fwd {
    0%,
    25% {
        -webkit-transform: translate(18px, 0px);
        transform: translate(18px, 0px);
        -webkit-transform-origin: left;
        transform-origin: left;
        opacity: 0
    }
    100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
        -webkit-transform-origin: left;
        transform-origin: left;
        opacity: 1
    }
}

#MainSlider .carouselActions {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    bottom: 35px
}

@media only screen and (min-width: 468px) {
    #MainSlider .carouselActions {
        bottom: 55px
    }
}

#MainSlider .carouselActions .arrow {
    position: unset;
    padding: 0;
    width: 17px;
    height: 17px;
    background: none;
    font-size: 0;
    opacity: 1
}

#MainSlider .carouselActions .arrow svg {
    fill: #fff
}

#MainSlider .carouselActions .carousel-indicators {
    position: relative;
    margin: 0 15px;
    width: 70px;
    height: 1px;
    background: #fff
}

#MainSlider .carouselActions .carousel-indicators button {
    background: transparent;
    height: 1px;
    border: none;
    outline: none;
    margin: 0;
    border-radius: 0px;
    position: absolute;
    opacity: 1;
    width: 100%
}

#MainSlider .carouselActions .carousel-indicators button::before {
    content: "";
    position: absolute;
    display: block;
    top: 0;
    width: 0;
    height: 100%;
    background: #2161ad;
    transition: all .8s
}

#MainSlider .carouselActions .carousel-indicators button.active::before {
    left: 0;
    right: auto;
    transition: all 5s;
    width: 70px
}

html:lang(en) #MainSlider #myCarousel .carouselActions .arrow.carousel-control-next svg {
    transform: rotate(180deg)
}

html:lang(en) #MainSlider #myCarousel.slideLft .carouselActions .carousel-indicators button::before {
    left: auto;
    right: 0
}

html:lang(en) #MainSlider #myCarousel.slideLft .carouselActions .carousel-indicators button.active::before {
    left: 0;
    right: auto
}

html:lang(en) #MainSlider #myCarousel.slideRit .carouselActions .carousel-indicators button::before {
    right: auto;
    left: 0
}

html:lang(en) #MainSlider #myCarousel.slideRit .carouselActions .carousel-indicators button.active::before {
    left: auto;
    right: 0
}

html:lang(ar) #MainSlider #myCarousel .carouselActions .arrow.carousel-control-prev svg {
    transform: rotate(180deg)
}

html:lang(ar) #MainSlider #myCarousel.slideLft .carouselActions .carousel-indicators button::before {
    left: 0;
    right: auto
}

html:lang(ar) #MainSlider #myCarousel.slideLft .carouselActions .carousel-indicators button.active::before {
    left: auto;
    right: 0
}

html:lang(ar) #MainSlider #myCarousel.slideRit .carouselActions .carousel-indicators button::before {
    left: auto;
    right: 0
}

html:lang(ar) #MainSlider #myCarousel.slideRit .carouselActions .carousel-indicators button.active::before {
    left: 0;
    right: auto
}

html:lang(ar) #MainSlider .carousel-item .CarouselCntnt .SlideCntnt {
    line-height: 44px
}

@media only screen and (min-width: 468px) {
    html:lang(ar) #MainSlider .carousel-item .CarouselCntnt .SlideCntnt {
        font-weight: 700
    }
}

@media only screen and (min-width: 576px) {
    html:lang(ar) #MainSlider .carousel-item .CarouselCntnt .SlideCntnt {
        line-height: 38px
    }
}

@media only screen and (min-width: 768px) {
    html:lang(ar) #MainSlider .carousel-item .CarouselCntnt .SlideCntnt {
        line-height: 58px
    }
}

@media only screen and (min-width: 1551px) {
    html:lang(ar) #MainSlider .carousel-item .CarouselCntnt .SlideCntnt {
        line-height: 65px
    }
}

#WelcomeSec {
    background-color: #fff;
    background-image: url(../images/WelcomeSecBG.svg);
    background-position: center bottom;
    background-repeat: no-repeat;
    padding: 15px;
    position: relative;
    background-size: 570px
}

@media only screen and (min-width: 768px) {
    #WelcomeSec {
        background-size: 990px
    }
}

@media only screen and (min-width: 992px) {
    #WelcomeSec {
        background-size: cover;
        padding: 100px 0
    }
}

@media only screen and (min-width: 1551px) {
    #WelcomeSec {
        padding: 150px 0
    }
}

#WelcomeSec .row {
    margin: 0
}

@media only screen and (min-width: 992px) {
    #WelcomeSec .row {
        width: calc(100% - ((100% - 1050px)/ 2))
    }
}

@media only screen and (min-width: 1200px) {
    #WelcomeSec .row {
        width: calc(100% - ((100% - 1180px)/ 2))
    }
}

@media only screen and (min-width: 1441px) {
    #WelcomeSec .row {
        width: calc(100% - ((100% - 1350px)/ 2))
    }
}

@media only screen and (min-width: 1550px) {
    #WelcomeSec .row {
        width: calc(100% - ((100% - 1440px)/ 2))
    }
}

#WelcomeSec .row>* {
    padding: 0
}

#WelcomeSec .animsition-overlay-slide {
    position: absolute;
    background: #2161ad;
    opacity: .6
}

#WelcomeSec .ImgSec {
    overflow: hidden;
    width: 100%;
    height: 205px;
    z-index: 0;
    display: none
}

@media only screen and (min-width: 468px) {
    #WelcomeSec .ImgSec {
        display: block;
        height: 100%
    }
}

@media only screen and (min-width: 992px) {
    #WelcomeSec .ImgSec {
        width: 40%;
        height: auto;
        position: relative
    }
}

@media only screen and (min-width: 1551px) {
    #WelcomeSec .ImgSec {
        width: 50%
    }
}

#WelcomeSec .ImgSec img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

#WelcomeSec .cntnSec {
    width: 100%;
    position: relative;
    z-index: 1;
    padding: 30px 0px
}

@media only screen and (min-width: 468px) {
    #WelcomeSec .cntnSec {
        padding: 40px 0px
    }
}

@media only screen and (min-width: 768px) {
    #WelcomeSec .cntnSec {
        padding: 50px 0px 55px
    }
}

@media only screen and (min-width: 992px) {
    #WelcomeSec .cntnSec {
        background: none;
        padding: 35px 25px 40px 55px;
        width: 60%
    }
}

@media only screen and (min-width: 1200px) {
    #WelcomeSec .cntnSec {
        padding: 60px 25px 60px 100px
    }
}

@media only screen and (min-width: 1551px) {
    #WelcomeSec .cntnSec {
        padding: 60px 25px 60px 140px;
        width: 50%
    }
}

@media only screen and (min-width: 468px) {
    #WelcomeSec .cntnSec .box p {
        line-height: 30px
    }
}

@media only screen and (min-width: 1200px) {
    #WelcomeSec .cntnSec .box p {
        line-height: 34px
    }
}

#WelcomeSec .cntnSec .box .Knowmore {
    border: 1px solid #0c1017;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0c1017;
    text-transform: uppercase;
    margin-top: 30px;
    width: 165px;
    height: 45px;
    font-size: 12px
}

@media only screen and (min-width: 468px) {
    #WelcomeSec .cntnSec .box .Knowmore {
        margin-top: 50px;
        width: 175px;
        height: 55px;
        font-size: 14px
    }
}

@media only screen and (min-width: 1441px) {
    #WelcomeSec .cntnSec .box .Knowmore {
        width: 195px;
        height: 59px;
        font-size: 16px
    }
}

#WelcomeSec .cntnSec .box .Knowmore::before {
    background: #2161ad;
    border-color: #2161ad
}

#WelcomeSec .cntnSec .box .Knowmore:hover {
    color: #fff
}

#ServiceSec {
    position: relative;
    background: #0c1017;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

#ServiceSec a {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    z-index: 1;
    width: calc(100% / 2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding: 45px 15px;
    border-right: 1px solid rgba(255, 255, 255, 0.2)
}

@media only screen and (min-width: 468px) {
    #ServiceSec a {
        padding: 75px 20px
    }
}

@media only screen and (min-width: 992px) {
    #ServiceSec a {
        width: calc(100% / 4)
    }
}

@media only screen and (min-width: 1200px) {
    #ServiceSec a {
        padding: 115px 60px 100px
    }
}

@media only screen and (min-width: 1551px) {
    #ServiceSec a {
        padding: 155px 60px 140px
    }
}

#ServiceSec a .icon {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin-bottom: 30px;
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-transition: all .3s ease;
    transition: all .3s ease
}

@media only screen and (min-width: 600px) {
    #ServiceSec a .icon {
        height: 90px;
        margin-bottom: 40px
    }
}

#ServiceSec a .icon img {
    max-width: 75px;
    max-height: 75px
}

@media only screen and (min-width: 468px) {
    #ServiceSec a .icon img {
        max-width: 85px;
        max-height: 85px
    }
}

@media only screen and (min-width: 660px) {
    #ServiceSec a .icon img {
        max-width: 105px;
        max-height: auto
    }
}

@media only screen and (min-width: 992px) {
    #ServiceSec a .icon img {
        max-width: auto
    }
}

#ServiceSec a .Title {
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 15px;
    font-size: 14px;
    line-height: 24px;
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-transition: all .3s ease;
    transition: all .3s ease
}

@media only screen and (min-width: 468px) {
    #ServiceSec a .Title {
        font-size: 18px;
        line-height: 28px;
        margin-bottom: 25px
    }
}

@media only screen and (min-width: 660px) {
    #ServiceSec a .Title {
        font-size: 20px;
        line-height: 32px
    }
}

@media only screen and (min-width: 1551px) {
    #ServiceSec a .Title {
        font-size: 22px;
        line-height: 34px;
        margin-bottom: 40px
    }
}

#ServiceSec a .info {
    color: #9b9ea4;
    position: relative;
    font-size: 13px;
    line-height: 22px;
    padding-bottom: 20px;
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-transition: all .3s ease;
    transition: all .3s ease
}

@media only screen and (min-width: 468px) {
    #ServiceSec a .info {
        font-size: 15px;
        line-height: 24px;
        padding-bottom: 30px
    }
}

@media only screen and (min-width: 1551px) {
    #ServiceSec a .info {
        font-size: 16px;
        line-height: 26px
    }
}

#ServiceSec a .info::before {
    content: "";
    background: #2161ad;
    width: 24px;
    height: 1px;
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    margin: auto
}

#ServiceSec a .Knowmore {
    display: none;
    align-items: center;
    justify-content: center;
    border: 1px solid #fff;
    width: 165px;
    z-index: 248;
    font-family: "HelveticaNeueLT 75 Roman";
    color: #fff;
    text-transform: uppercase;
    height: 45px;
    margin: auto;
    margin-top: 30px;
    opacity: 0;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    font-size: 12px
}

@media only screen and (min-width: 468px) {
    #ServiceSec a .Knowmore {
        display: flex;
        font-size: 13px
    }
}

#ServiceSec a .Knowmore::before {
    background: #fff
}

#ServiceSec a .Knowmore:hover {
    color: #0c1017
}

@media only screen and (max-width: 576px) {
    #ServiceSec a#FitOutTrigger .icon img {
        max-width: 150px
    }
}

@media only screen and (max-width: 468px) {
    #ServiceSec a#FitOutTrigger .icon img {
        max-width: 130px
    }
}

#ServiceSec a:hover .icon {
    -webkit-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    transform: translateY(-10px)
}

#ServiceSec a:hover .Title {
    -webkit-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    transform: translateY(-10px)
}

#ServiceSec a:hover .info {
    -webkit-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    transform: translateY(-10px)
}

#ServiceSec a:hover .Knowmore {
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
    opacity: 1
}

#ServiceSec .ServiceImg {
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-transition: opacity .3s ease;
    transition: opacity .3s ease
}

#ServiceSec .ServiceImg.isvisible {
    opacity: .6
}

#ServiceSec:hover a .icon {
    opacity: .5
}

#ServiceSec:hover a .Title {
    opacity: .2
}

#ServiceSec:hover a .info {
    opacity: .3
}

#ServiceSec a:hover .icon {
    opacity: 1
}

#ServiceSec a:hover .Title {
    opacity: 1
}

#ServiceSec a:hover .info {
    opacity: 1
}

#Structures {
    background: #f5f5f6;
    padding: 45px 0 40px
}

@media only screen and (min-width: 468px) {
    #Structures {
        padding: 75px 0 70px
    }
}

@media only screen and (min-width: 768px) {
    #Structures {
        padding: 85px 0 60px
    }
}

@media only screen and (min-width: 992px) {
    #Structures {
        padding: 100px 0 90px
    }
}

#Structures .StructuresList .row {
    padding: 0 20px;
    margin: -10px
}

@media only screen and (min-width: 992px) {
    #Structures .StructuresList .row {
        padding: 0 30px;
        margin: -15px
    }
}

@media only screen and (min-width: 1551px) {
    #Structures .StructuresList .row {
        padding: 0 35px;
        margin: -17.5px
    }
}

#Structures .StructuresList .row .item {
    padding: 10px;
    width: 100%
}

@media only screen and (min-width: 468px) {
    #Structures .StructuresList .row .item {
        width: calc(100% / 2)
    }
}

@media only screen and (min-width: 768px) {
    #Structures .StructuresList .row .item {
        width: calc(100% / 3)
    }
}

@media only screen and (min-width: 992px) {
    #Structures .StructuresList .row .item {
        padding: 15px
    }
}

@media only screen and (min-width: 1200px) {
    #Structures .StructuresList .row .item {
        width: calc(100% / 4)
    }
}

@media only screen and (min-width: 1551px) {
    #Structures .StructuresList .row .item {
        padding: 17.5px
    }
}

#Structures .StructuresList a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: #fefefe;
    text-align: center
}

#Structures .StructuresList a .Img {
    position: relative;
    z-index: 1;
    background: #0c1017;
    height: 180px
}

@media only screen and (min-width: 768px) {
    #Structures .StructuresList a .Img {
        height: 265px
    }
}

#Structures .StructuresList a .Img .inner {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 1;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-transition: opacity .3s ease;
    transition: opacity .3s ease
}

#Structures .StructuresList a .CntnBox {
    position: relative;
    z-index: 2;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    text-align: center;
    background: #fefefe;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: -webkit-transform .3s ease;
    transition: -webkit-transform .3s ease;
    transition: transform .3s ease;
    transition: transform .3s ease, -webkit-transform .3s ease;
    padding: 25px 15px
}

@media only screen and (min-width: 1441px) {
    #Structures .StructuresList a .CntnBox {
        padding: 25px 35px
    }
}

#Structures .StructuresList a .CntnBox .title {
    color: #131313;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 10px;
    font-size: 17px
}

@media only screen and (min-width: 992px) {
    #Structures .StructuresList a .CntnBox .title {
        font-size: 18px
    }
}

#Structures .StructuresList a .CntnBox .info {
    font-size: 13px;
    color: #5d5c5c;
    line-height: 17px
}

#Structures .StructuresList a .CntnBox .Bottom {
    padding: 15px 30px 0;
    background: #fff
}

@media only screen and (min-width: 468px) {
    #Structures .StructuresList a .CntnBox .Bottom {
        padding: 0px 35px;
        position: absolute;
        top: 100%;
        right: 0;
        left: 0
    }
}

#Structures .StructuresList a .CntnBox .Bottom .hoveranim {
    border: 1px solid #535252;
    background-color: #fff;
    width: 100%;
    z-index: 248;
    font-family: "HelveticaNeueLT 75 Roman";
    font-weight: 500;
    color: #0c1017;
    text-transform: uppercase;
    height: 45px;
    font-size: 13px;
    -webkit-appearance: button;
    line-height: inherit;
    margin: 0;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media only screen and (min-width: 992px) {
    #Structures .StructuresList a .CntnBox .Bottom .hoveranim {
        height: 55px;
        font-size: 15px
    }
}

#Structures .StructuresList a .CntnBox .Bottom .hoveranim:hover {
    color: #fff
}

@media only screen and (min-width: 468px) {
    #Structures .StructuresList a:hover .Img .inner {
        opacity: .5
    }
    #Structures .StructuresList a:hover .CntnBox {
        -webkit-transform: translateY(-6rem);
        -ms-transform: translateY(-6rem);
        transform: translateY(-6rem)
    }
}

#ClientSays {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 45px 0 40px
}

@media only screen and (min-width: 468px) {
    #ClientSays {
        padding: 75px 0 85px
    }
}

#ClientSays .HeadSec {
    margin-bottom: 30px
}

@media only screen and (min-width: 468px) {
    #ClientSays .HeadSec {
        margin-bottom: 45px
    }
}

@media only screen and (min-width: 768px) {
    #ClientSays .HeadSec {
        margin-bottom: 65px
    }
}

#ClientSays .HeadSec .Title {
    color: #fff
}

#ClientSays .owl-carousel .owl-stage-outer {
    padding-top: 20px;
    margin-top: -20px
}

#ClientSays .Box {
    border: 1px solid #47494d;
    border-top: 0;
    position: relative;
    padding: 35px 30px 30px
}

@media only screen and (min-width: 992px) {
    #ClientSays .Box {
        padding: 45px 50px 40px
    }
}

#ClientSays .Box::before {
    content: "";
    position: absolute;
    height: 1px;
    top: 0;
    left: 0;
    background: #47494d;
    width: 22px
}

@media only screen and (min-width: 992px) {
    #ClientSays .Box::before {
        width: 37px
    }
}

#ClientSays .Box::after {
    content: "";
    position: absolute;
    height: 1px;
    top: 0;
    right: 0;
    background: #47494d;
    width: calc(100% - 70px)
}

@media only screen and (min-width: 468px) {
    #ClientSays .Box::after {
        width: calc(100% - 80px)
    }
}

@media only screen and (min-width: 992px) {
    #ClientSays .Box::after {
        width: calc(100% - 105px)
    }
}

#ClientSays .Box .QtIcon {
    fill: #2161ad;
    position: absolute;
    top: -15px;
    width: 34px
}

@media only screen and (min-width: 468px) {
    #ClientSays .Box .QtIcon {
        top: -20px;
        width: 42px
    }
}

#ClientSays .Box .Msg {
    color: #a7a3a3;
    font-size: 14px;
    line-height: 24px;
    text-align: justify
}

@media only screen and (min-width: 768px) {
    #ClientSays .Box .Msg {
        font-size: 16px;
        line-height: 28px
    }
}

#ClientSays .Box .BoxFoot {
    padding: 0 30px;
    margin-top: 20px
}

@media only screen and (min-width: 468px) {
    #ClientSays .Box .BoxFoot {
        margin-top: 30px
    }
}

#ClientSays .Box .BoxFoot .Name {
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #fff;
    font-weight: 600;
    margin-bottom: 8px;
    position: relative;
    font-size: 13px
}

@media only screen and (min-width: 768px) {
    #ClientSays .Box .BoxFoot .Name {
        font-size: 15px
    }
}

#ClientSays .Box .BoxFoot .Name::before {
    content: "";
    background: #2161ad;
    width: 23px;
    height: 2px;
    position: absolute;
    left: -30px;
    top: 0px;
    bottom: 0px;
    margin: auto
}

#ClientSays .Box .BoxFoot .Designation {
    font-size: 13px;
    color: #888686
}

#Projects {
    background: #fff;
    padding: 45px 0 40px
}

@media only screen and (min-width: 468px) {
    #Projects {
        padding: 70px 0 75px
    }
}

@media only screen and (min-width: 768px) {
    #Projects {
        padding: 60px 0 85px
    }
}

@media only screen and (min-width: 992px) {
    #Projects {
        padding: 95px 0 100px
    }
}

#Projects .HeadSec .Navigation .arrows svg {
    fill: #737373
}

#Projects #ProjectsSlide {
    padding: 0 10px
}

@media only screen and (min-width: 992px) {
    #Projects #ProjectsSlide {
        padding: 0 20px
    }
}

@media only screen and (min-width: 1200px) {
    #Projects #ProjectsSlide {
        padding: 0 40px
    }
}

#Projects .ProBox {
    position: relative;
    overflow: hidden
}

#Projects .ProBox .ImgBox {
    opacity: 1
}

#Projects .ProBox .overlay {
    left: 0;
    top: auto;
    bottom: 0;
    transform: none;
    background: rgba(2, 2, 2, 0.61);
    padding: 15px 0;
    opacity: 1
}

#Projects .ProBox .overlay svg {
    width: 30px;
    margin-bottom: 18px
}

@media only screen and (min-width: 576px) {
    #Projects .ProBox .overlay svg {
        width: 40px;
        margin-bottom: 25px
    }
}

#OurClients {
    padding: 45px 0 40px
}

@media only screen and (min-width: 468px) {
    #OurClients {
        padding: 70px 0 75px
    }
}

@media only screen and (min-width: 768px) {
    #OurClients {
        padding: 60px 0 85px
    }
}

@media only screen and (min-width: 992px) {
    #OurClients {
        padding: 85px 0 105px
    }
}

#OurClients .HeadSec .Title {
    color: #fff
}

#OurClients .owl-item .box {
    border: 1px solid #1e2229;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px;
    padding: 20px
}

@media only screen and (min-width: 468px) {
    #OurClients .owl-item .box {
        height: 170px
    }
}

#OurClients .owl-item img {
    width: auto;
    height: 100%;
    object-fit: contain
}

#NewsEvent {
    background-color: #f8f8f8;
    padding: 45px 0
}

@media only screen and (min-width: 468px) {
    #NewsEvent {
        padding: 75px 0
    }
}

@media only screen and (min-width: 768px) {
    #NewsEvent {
        padding: 85px 0
    }
}

@media only screen and (min-width: 992px) {
    #NewsEvent {
        padding: 90px 0
    }
}

@media only screen and (min-width: 1551px) {
    #NewsEvent {
        padding: 110px 0 105px
    }
}

#NewsEvent .HeadSec .Navigation .arrows svg {
    fill: #737373
}

#NewsEvent .EventBox {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: #fff
}

#NewsEvent .EventBox .ImgBox {
    position: relative;
    z-index: 1;
    width: 100%;
    transition: all .3s;
    height: 190px;
    overflow: hidden
}

@media only screen and (min-width: 1200px) {
    #NewsEvent .EventBox .ImgBox {
        height: 260px
    }
}

#NewsEvent .EventBox .ImgBox img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

#NewsEvent .EventBox .CntnBox {
    background: #fff;
    position: relative;
    z-index: 1;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: -webkit-transform .3s ease;
    transition: -webkit-transform .3s ease;
    transition: transform .3s ease;
    transition: transform .3s ease, -webkit-transform .3s ease;
    padding: 25px 25px 20px
}

@media only screen and (min-width: 1200px) {
    #NewsEvent .EventBox .CntnBox {
        padding: 25px 30px 30px
    }
}

#NewsEvent .EventBox .CntnBox .Tag {
    color: #929191;
    margin-bottom: 15px;
    font-size: 14px
}

@media only screen and (min-width: 768px) {
    #NewsEvent .EventBox .CntnBox .Tag {
        font-size: 16px
    }
}

@media only screen and (min-width: 1200px) {
    #NewsEvent .EventBox .CntnBox .Tag {
        margin-bottom: 25px
    }
}

#NewsEvent .EventBox .CntnBox .EventName {
    color: #1f1f1f;
    line-height: 24px;
    font-size: 15px
}

@media only screen and (min-width: 768px) {
    #NewsEvent .EventBox .CntnBox .EventName {
        line-height: 28px;
        font-size: 18px
    }
}

@media only screen and (min-width: 1200px) {
    #NewsEvent .EventBox .CntnBox .EventName {
        font-size: 20px
    }
}

#NewsEvent .EventBox .CntnBox .Info {
    color: #6c6969;
    position: absolute;
    background: #fff;
    top: 100%;
    right: 0;
    left: 0;
    z-index: 0;
    padding: 0 25px;
    font-size: 14px;
    line-height: 24px;
    transition: all .3s;
    opacity: 0
}

@media only screen and (min-width: 1200px) {
    #NewsEvent .EventBox .CntnBox .Info {
        padding: 0 30px;
        font-size: 16px;
        line-height: 28px
    }
}

#NewsEvent .EventBox .BoxFoot {
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #dddbdb;
    margin: 0 30px;
    position: relative;
    z-index: 2;
    padding: 20px 0
}

@media only screen and (min-width: 1200px) {
    #NewsEvent .EventBox .BoxFoot {
        padding: 25px 0
    }
}

#NewsEvent .EventBox .BoxFoot .Date {
    font-size: 14px;
    color: #929191
}

@media only screen and (min-width: 1200px) {
    #NewsEvent .EventBox .BoxFoot .Date {
        font-size: 16px
    }
}

#NewsEvent .EventBox .BoxFoot .arrow svg {
    fill: #1c1b1b;
    width: 12px
}

@media only screen and (min-width: 1200px) {
    #NewsEvent .EventBox .BoxFoot .arrow svg {
        width: 17px
    }
}

#NewsEvent .EventBox:hover .ImgBox {
    opacity: 0
}

#NewsEvent .EventBox:hover .CntnBox {
    -webkit-transform: translateY(-190px);
    -ms-transform: translateY(-190px);
    transform: translateY(-190px)
}

@media only screen and (min-width: 1200px) {
    #NewsEvent .EventBox:hover .CntnBox {
        -webkit-transform: translateY(-230px);
        -ms-transform: translateY(-230px);
        transform: translateY(-230px)
    }
}

#NewsEvent .EventBox:hover .CntnBox .Info {
    opacity: 1
}

#NewsEvent .EventBox:hover .BoxFoot .arrow svg {
    color: #2161ad
}

@media only screen and (min-width: 992px) {
    html:lang(ar) #WelcomeSec .cntnSec {
        padding: 35px 55px 40px 25px
    }
}

@media only screen and (min-width: 1200px) {
    html:lang(ar) #WelcomeSec .cntnSec {
        padding: 60px 100px 60px 25px
    }
}

@media only screen and (min-width: 1551px) {
    html:lang(ar) #WelcomeSec .cntnSec {
        padding: 60px 140px 60px 25px
    }
}

html:lang(ar) #ServiceSec a .Title {
    font-weight: 700
}

html:lang(ar) #Structures .StructuresList a .CntnBox .title {
    font-weight: 700
}

html:lang(ar) #ClientSays .Box::before {
    right: 0;
    left: auto
}

html:lang(ar) #ClientSays .Box::after {
    right: auto;
    left: 0
}

html:lang(en) #NewsEvent .EventBox .BoxFoot .arrow {
    transform: rotate(180deg)
}

html:lang(en) #ClientSays .Box .QtIcon {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1)
}

.ProductsPage #productslist {
    background: #f5f5f6;
    padding: 45px 0
}

@media only screen and (min-width: 468px) {
    .ProductsPage #productslist {
        padding: 50px 0 45px
    }
}

@media only screen and (min-width: 768px) {
    .ProductsPage #productslist {
        padding: 65px 0 75px
    }
}

@media only screen and (min-width: 992px) {
    .ProductsPage #productslist {
        padding: 70px 0 90px
    }
}

@media only screen and (min-width: 1551px) {
    .ProductsPage #productslist {
        padding: 85px 0 120px
    }
}

.ProductsPage #productslist .listitem {
    background: #fff;
    display: flex;
    flex-wrap: wrap
}

.ProductsPage #productslist .listitem:not(:last-of-type) {
    margin-bottom: 30px
}

@media only screen and (min-width: 468px) {
    .ProductsPage #productslist .listitem:not(:last-of-type) {
        margin-bottom: 38px
    }
}

.ProductsPage #productslist .listitem .lft {
    padding: 25px 25px 5px;
    width: 100%
}

@media only screen and (min-width: 468px) {
    .ProductsPage #productslist .listitem .lft {
        padding: 35px 30px 20px
    }
}

@media only screen and (min-width: 768px) {
    .ProductsPage #productslist .listitem .lft {
        padding: 50px 35px 40px;
        width: 285px
    }
}

@media only screen and (min-width: 1200px) {
    .ProductsPage #productslist .listitem .lft {
        width: 285px
    }
}

@media only screen and (min-width: 1551px) {
    .ProductsPage #productslist .listitem .lft {
        width: 330px;
        padding: 70px 50px 55px
    }
}

.ProductsPage #productslist .listitem .lft .ProName {
    color: #2b2b2b;
    font-family: "HelveticaNeueLT 75 Roman";
    text-transform: uppercase;
    font-size: 23px;
    margin-bottom: 10px
}

@media only screen and (min-width: 468px) {
    .ProductsPage #productslist .listitem .lft .ProName {
        font-size: 24px;
        margin-bottom: 20px
    }
}

@media only screen and (min-width: 768px) {
    .ProductsPage #productslist .listitem .lft .ProName {
        font-size: 26px
    }
}

@media only screen and (min-width: 992px) {
    .ProductsPage #productslist .listitem .lft .ProName {
        margin-bottom: 30px
    }
}

.ProductsPage #productslist .listitem .lft .Prousage {
    color: #2b2b2b;
    padding-left: 22px;
    position: relative;
    font-size: 15px
}

@media only screen and (min-width: 468px) {
    .ProductsPage #productslist .listitem .lft .Prousage {
        font-size: 18px
    }
}

.ProductsPage #productslist .listitem .lft .Prousage::before {
    content: "";
    background: #2161ad;
    position: absolute;
    width: 9px;
    height: 100%;
    left: 0;
    top: 0
}

.ProductsPage #productslist .listitem .cntr {
    width: 100%;
    padding: 15px 25px 35px
}

@media only screen and (min-width: 468px) {
    .ProductsPage #productslist .listitem .cntr {
        padding: 15px 30px 35px
    }
}

@media only screen and (min-width: 768px) {
    .ProductsPage #productslist .listitem .cntr {
        padding: 50px 35px 40px;
        width: calc(100% - 285px)
    }
}

@media only screen and (min-width: 1200px) {
    .ProductsPage #productslist .listitem .cntr {
        width: calc(100% - 660px)
    }
}

@media only screen and (min-width: 1551px) {
    .ProductsPage #productslist .listitem .cntr {
        width: calc(100% - 760px);
        padding: 70px 70px 55px 50px
    }
}

.ProductsPage #productslist .listitem .cntr a {
    border: 1px solid #535252;
    color: #0c1017;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 243px;
    width: fit-content;
    width: -moz-fit-content;
    height: 45px;
    font-size: 12px;
    padding: 0 25px
}

@media only screen and (min-width: 468px) {
    .ProductsPage #productslist .listitem .cntr a {
        height: 48px;
        font-size: 14px;
        margin-top: 20px
    }
}

@media only screen and (min-width: 768px) {
    .ProductsPage #productslist .listitem .cntr a {
        margin-top: 35px
    }
}

@media only screen and (min-width: 1441px) {
    .ProductsPage #productslist .listitem .cntr a {
        height: 55px;
        padding: 0 72px;
        font-size: 15px;
        margin-top: 45px
    }
}

.ProductsPage #productslist .listitem .cntr a:hover {
    color: #fff
}

.ProductsPage #productslist .listitem .Rit {
    overflow: hidden;
    width: 100%
}

@media only screen and (min-width: 1200px) {
    .ProductsPage #productslist .listitem .Rit {
        width: 375px
    }
}

@media only screen and (min-width: 1551px) {
    .ProductsPage #productslist .listitem .Rit {
        width: 430px
    }
}

.ProductsPage #productslist .listitem .Rit .owl-carousel,
.ProductsPage #productslist .listitem .Rit .owl-stage-outer,
.ProductsPage #productslist .listitem .Rit .owl-stage {
    height: 235px
}

@media only screen and (min-width: 468px) {
    .ProductsPage #productslist .listitem .Rit .owl-carousel,
    .ProductsPage #productslist .listitem .Rit .owl-stage-outer,
    .ProductsPage #productslist .listitem .Rit .owl-stage {
        height: 355px
    }
}

@media only screen and (min-width: 1200px) {
    .ProductsPage #productslist .listitem .Rit .owl-carousel,
    .ProductsPage #productslist .listitem .Rit .owl-stage-outer,
    .ProductsPage #productslist .listitem .Rit .owl-stage {
        height: 100%
    }
}

.ProductsPage #productslist .listitem .Rit .owl-item {
    height: 100%
}

.ProductsPage #productslist .listitem .Rit .owl-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 25px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center
}

.ProductsPage #productslist .listitem .Rit .owl-dots button {
    border-radius: 50%;
    background: #fff;
    opacity: .502;
    width: 8px;
    height: 8px;
    margin: 0 7.5px;
    transition: all .3s
}

.ProductsPage #productslist .listitem .Rit .owl-dots button.active {
    opacity: 1;
    background: #2161ad
}

.ProductsPage #ProDtl {
    background: #fff;
    padding: 45px 0
}

@media only screen and (min-width: 468px) {
    .ProductsPage #ProDtl {
        padding: 60px 0
    }
}

@media only screen and (min-width: 768px) {
    .ProductsPage #ProDtl {
        padding: 75px 0
    }
}

@media only screen and (min-width: 992px) {
    .ProductsPage #ProDtl {
        padding: 90px 0
    }
}

@media only screen and (min-width: 1551px) {
    .ProductsPage #ProDtl {
        padding: 125px 0
    }
}

.ProductsPage #ProDtl .row {
    margin: 0 -35px
}

.ProductsPage #ProDtl .row>* {
    padding: 0 35px
}

.ProductsPage #ProDtl .ProName {
    color: #2b2b2b;
    font-family: "HelveticaNeueLT 75 Roman";
    text-transform: uppercase;
    font-size: 23px;
    margin-bottom: 10px
}

@media only screen and (min-width: 468px) {
    .ProductsPage #ProDtl .ProName {
        font-size: 24px;
        margin-bottom: 20px
    }
}

@media only screen and (min-width: 768px) {
    .ProductsPage #ProDtl .ProName {
        font-size: 26px
    }
}

@media only screen and (min-width: 992px) {
    .ProductsPage #ProDtl .ProName {
        margin-bottom: 30px;
        font-size: 28px
    }
}

@media only screen and (min-width: 1551px) {
    .ProductsPage #ProDtl .ProName {
        font-size: 36px
    }
}

.ProductsPage #ProDtl .Prousage {
    color: #2b2b2b;
    padding-left: 22px;
    position: relative;
    margin-bottom: 35px;
    font-size: 15px
}

@media only screen and (min-width: 468px) {
    .ProductsPage #ProDtl .Prousage {
        font-size: 18px
    }
}

.ProductsPage #ProDtl .Prousage::before {
    content: "";
    background: #2161ad;
    position: absolute;
    width: 9px;
    height: 100%;
    left: 0;
    top: 0
}

.ProductsPage #Specification .Title {
    color: #2c2c2c;
    text-transform: uppercase;
    font-size: 15px;
    margin-bottom: 15px
}

@media only screen and (min-width: 468px) {
    .ProductsPage #Specification .Title {
        font-size: 18px;
        margin-bottom: 20px
    }
}

@media only screen and (min-width: 992px) {
    .ProductsPage #Specification .Title {
        font-size: 22px;
        margin-bottom: 35px
    }
}

@media only screen and (min-width: 1200px) {
    .ProductsPage #Specification .Title {
        margin-bottom: 50px
    }
}

.ProductsPage #Specification ul li {
    color: #666;
    position: relative;
    font-size: 13px;
    padding-left: 20px
}

.ProductsPage #Specification ul li:not(:last-of-type) {
    margin-bottom: 8px
}

@media only screen and (min-width: 468px) {
    .ProductsPage #Specification ul li {
        font-size: 14px;
        padding-left: 25px
    }
    .ProductsPage #Specification ul li:not(:last-of-type) {
        margin-bottom: 10px
    }
}

@media only screen and (min-width: 992px) {
    .ProductsPage #Specification ul li:not(:last-of-type) {
        margin-bottom: 18px
    }
}

@media only screen and (min-width: 1551px) {
    .ProductsPage #Specification ul li {
        font-size: 18px;
        padding-left: 50px
    }
    .ProductsPage #Specification ul li:not(:last-of-type) {
        margin-bottom: 25px
    }
}

.ProductsPage #Specification ul li::before {
    content: "";
    position: absolute;
    background: url("../images/listIcon2.svg") no-repeat;
    background-size: contain;
    opacity: .4;
    left: 0;
    width: 13px;
    height: 13px
}

@media only screen and (min-width: 468px) {
    .ProductsPage #Specification ul li::before {
        width: 16px;
        height: 16px
    }
}

@media only screen and (min-width: 1551px) {
    .ProductsPage #Specification ul li::before {
        width: 25px;
        height: 25px
    }
}

.ProductsPage #virtual {
    background: #fff;
    text-align: center;
    padding: 40px 0 35px
}

@media only screen and (min-width: 468px) {
    .ProductsPage #virtual {
        padding: 50px 0 45px
    }
}

@media only screen and (min-width: 768px) {
    .ProductsPage #virtual {
        padding: 65px 0 75px
    }
}

@media only screen and (min-width: 992px) {
    .ProductsPage #virtual {
        padding: 70px 0 90px
    }
}

@media only screen and (min-width: 1551px) {
    .ProductsPage #virtual {
        padding: 90px 0 100px
    }
}

.ProductsPage #virtual .Title {
    font-family: "HelveticaNeueLT 75 Roman";
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 25px;
    font-size: 14px
}

@media only screen and (min-width: 468px) {
    .ProductsPage #virtual .Title {
        font-size: 15px;
        margin-bottom: 30px
    }
}

@media only screen and (min-width: 992px) {
    .ProductsPage #virtual .Title {
        margin-bottom: 40px
    }
}

@media only screen and (min-width: 1551px) {
    .ProductsPage #virtual .Title {
        margin-bottom: 50px
    }
}

.ProductsPage #virtual .viewer {
    background-color: #000;
    width: 100%;
    overflow: hidden;
    position: relative;
    height: 280px
}

.ProductsPage #virtual .viewer iframe {
    height: 2800px
}

@media only screen and (min-width: 768px) {
    .ProductsPage #virtual .viewer {
        height: 360px
    }
    .ProductsPage #virtual .viewer iframe {
        height: 360px
    }
}

@media only screen and (min-width: 992px) {
    .ProductsPage #virtual .viewer {
        height: 560px
    }
    .ProductsPage #virtual .viewer iframe {
        height: 560px
    }
}

.ProductsPage #Accessories {
    background: #f5f5f7;
    padding: 40px 0 35px
}

@media only screen and (min-width: 468px) {
    .ProductsPage #Accessories {
        padding: 50px 0 45px
    }
}

@media only screen and (min-width: 768px) {
    .ProductsPage #Accessories {
        padding: 65px 0 75px
    }
}

@media only screen and (min-width: 992px) {
    .ProductsPage #Accessories {
        padding: 70px 0 85px
    }
}

@media only screen and (min-width: 1551px) {
    .ProductsPage #Accessories {
        padding: 80px 0 95px
    }
}

.ProductsPage #Accessories ul {
    display: grid;
    gap: 13px
}

@media only screen and (min-width: 576px) {
    .ProductsPage #Accessories ul {
        grid-template-columns: repeat(2, 1fr)
    }
}

.ProductsPage #Accessories ul li {
    color: #666;
    position: relative;
    font-size: 13px;
    padding-left: 20px
}

.ProductsPage #Accessories ul li:not(:last-of-type) {
    margin-bottom: 8px
}

@media only screen and (min-width: 468px) {
    .ProductsPage #Accessories ul li {
        font-size: 14px;
        padding-left: 25px
    }
    .ProductsPage #Accessories ul li:not(:last-of-type) {
        margin-bottom: 10px
    }
}

@media only screen and (min-width: 992px) {
    .ProductsPage #Accessories ul li:not(:last-of-type) {
        margin-bottom: 18px
    }
}

@media only screen and (min-width: 1551px) {
    .ProductsPage #Accessories ul li {
        font-size: 18px;
        padding-left: 50px
    }
    .ProductsPage #Accessories ul li:not(:last-of-type) {
        margin-bottom: 25px
    }
}

.ProductsPage #Accessories ul li::before {
    content: "";
    position: absolute;
    background: url("../images/listIcon2.svg") no-repeat;
    background-size: contain;
    opacity: .4;
    left: 0;
    width: 13px;
    height: 13px
}

@media only screen and (min-width: 468px) {
    .ProductsPage #Accessories ul li::before {
        width: 16px;
        height: 16px
    }
}

@media only screen and (min-width: 1551px) {
    .ProductsPage #Accessories ul li::before {
        width: 25px;
        height: 25px
    }
}

.ProductsPage #GallFoot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    border-top: 1px solid rgba(6, 6, 6, 0.149)
}

.ProductsPage #GallFoot li {
    width: calc(100% / 3)
}

.ProductsPage #GallFoot li:not(:last-of-type) {
    border-right: 1px solid rgba(6, 6, 6, 0.149)
}

.ProductsPage #GallFoot li a {
    color: #060606;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 1px;
    font-size: 11px;
    padding: 15px 5px
}

@media only screen and (min-width: 468px) {
    .ProductsPage #GallFoot li a {
        padding: 25px 5px
    }
}

@media only screen and (min-width: 768px) {
    .ProductsPage #GallFoot li a {
        font-size: 13px;
        padding: 25px 30px
    }
}

@media only screen and (min-width: 992px) {
    .ProductsPage #GallFoot li a {
        padding: 45px 60px;
        font-size: 14px
    }
}

@media only screen and (min-width: 1551px) {
    .ProductsPage #GallFoot li a {
        padding: 55px 120px
    }
}

.ProductsPage #GallFoot li a svg {
    fill: #060606;
    margin: 0 15px;
    width: 14px
}

@media only screen and (min-width: 768px) {
    .ProductsPage #GallFoot li a svg {
        width: 17px
    }
}

.ProductsPage #GallFoot li a.ViewAll {
    color: #2161ad
}

@media only screen and (max-width: 576px) {
    .ProductsPage #GallFoot li a.prevBtn,
    .ProductsPage #GallFoot li a.NextBtn {
        font-size: 0
    }
}

.ProductsPage #GallFoot li a.prevBtn:hover,
.ProductsPage #GallFoot li a.NextBtn:hover {
    opacity: .5
}

@media only screen and (max-width: 576px) {
    .ProductsPage #GallFoot li:first-of-type,
    .ProductsPage #GallFoot li:last-of-type {
        width: 55px
    }
    .ProductsPage #GallFoot li:first-of-type a,
    .ProductsPage #GallFoot li:last-of-type a {
        text-indent: -12px;
        justify-content: center !important
    }
    .ProductsPage #GallFoot li:first-of-type a svg,
    .ProductsPage #GallFoot li:last-of-type a svg {
        width: 18px;
        margin: 0
    }
    .ProductsPage #GallFoot li:nth-child(2) {
        width: calc(100% - 100px)
    }
}

html:lang(en) .ProductsPage #GallFoot li:not(:last-of-type) {
    border-right: 1px solid rgba(6, 6, 6, 0.149)
}

html:lang(en) .ProductsPage #GallFoot li a.prevBtn {
    justify-content: flex-start
}

html:lang(en) .ProductsPage #GallFoot li a.prevBtn svg {
    transform: rotate(180deg)
}

html:lang(en) .ProductsPage #GallFoot li a.NextBtn {
    justify-content: flex-end
}

@media only screen and (max-width: 576px) {
    html:lang(en) .ProductsPage #GallFoot li:first-of-type {
        width: 55px
    }
    html:lang(en) .ProductsPage #GallFoot li:first-of-type a svg {
        position: relative;
        left: 9px
    }
}

html:lang(ar) .ProductsPage #productslist .listitem .lft .Prousage {
    padding-left: 0px;
    padding-right: 22px
}

html:lang(ar) .ProductsPage #productslist .listitem .lft .Prousage::before {
    left: auto;
    right: 0
}

html:lang(ar) .ProductsPage #ProDtl .Prousage {
    padding-left: 0px;
    padding-right: 22px
}

html:lang(ar) .ProductsPage #ProDtl .Prousage::before {
    left: auto;
    right: 0
}

html:lang(ar) .ProductsPage #Specification ul li {
    padding-right: 20px;
    padding-left: 0px
}

@media only screen and (min-width: 468px) {
    html:lang(ar) .ProductsPage #Specification ul li {
        padding-right: 25px;
        padding-left: 0px
    }
}

@media only screen and (min-width: 1551px) {
    html:lang(ar) .ProductsPage #Specification ul li {
        padding-right: 50px;
        padding-left: 0px
    }
}

html:lang(ar) .ProductsPage #Specification ul li::before {
    left: auto;
    right: 0
}

html:lang(ar) .ProductsPage #Accessories ul li {
    padding-right: 20px;
    padding-left: 0px
}

@media only screen and (min-width: 468px) {
    html:lang(ar) .ProductsPage #Accessories ul li {
        padding-right: 25px;
        padding-left: 0px
    }
}

@media only screen and (min-width: 1551px) {
    html:lang(ar) .ProductsPage #Accessories ul li {
        padding-right: 50px;
        padding-left: 0px
    }
}

html:lang(ar) .ProductsPage #Accessories ul li::before {
    left: auto;
    right: 0
}

html:lang(ar) .ProductsPage #GallFoot li:not(:last-of-type) {
    border-left: 1px solid rgba(6, 6, 6, 0.149)
}

html:lang(ar) .ProductsPage #GallFoot li a.prevBtn {
    justify-content: flex-start
}

html:lang(ar) .ProductsPage #GallFoot li a.NextBtn {
    justify-content: flex-end
}

html:lang(ar) .ProductsPage #GallFoot li a.NextBtn svg {
    transform: rotate(180deg)
}

@media only screen and (max-width: 576px) {
    html:lang(ar) .ProductsPage #GallFoot li:first-of-type {
        width: 55px
    }
    html:lang(ar) .ProductsPage #GallFoot li:first-of-type a svg {
        position: relative;
        right: 9px
    }
}

.WeServePage p {
    color: #55585d
}

@media only screen and (min-width: 768px) {
    .WeServePage p {
        line-height: 30px
    }
}

@media only screen and (min-width: 1550px) {
    .WeServePage p {
        line-height: 34px
    }
}

.WeServePage #PageMain {
    background: #fff;
    padding: 45px 0 15px
}

@media only screen and (min-width: 468px) {
    .WeServePage #PageMain {
        padding: 75px 0 25px
    }
}

@media only screen and (min-width: 768px) {
    .WeServePage #PageMain {
        padding: 85px 0 30px
    }
}

@media only screen and (min-width: 992px) {
    .WeServePage #PageMain {
        padding: 90px 0 35px
    }
}

@media only screen and (min-width: 1551px) {
    .WeServePage #PageMain {
        padding: 120px 0 45px
    }
}

.WeServePage #PageMain .Title {
    color: #060606;
    font-family: "HelveticaNeueLT 75 Roman";
    text-transform: uppercase;
    font-size: 23px;
    margin-bottom: 10px
}

@media only screen and (min-width: 468px) {
    .WeServePage #PageMain .Title {
        font-size: 28px;
        margin-bottom: 25px
    }
}

@media only screen and (min-width: 768px) {
    .WeServePage #PageMain .Title {
        font-size: 32px;
        margin-bottom: 35px
    }
}

@media only screen and (min-width: 1551px) {
    .WeServePage #PageMain .Title {
        font-size: 36px
    }
}

.WeServePage #PageMain ul {
    display: grid;
    gap: 13px;
    margin-top: 40px
}

@media only screen and (min-width: 576px) {
    .WeServePage #PageMain ul {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media only screen and (min-width: 992px) {
    .WeServePage #PageMain ul {
        grid-template-columns: repeat(3, 1fr)
    }
}

@media only screen and (min-width: 1551px) {
    .WeServePage #PageMain ul {
        margin-top: 65px
    }
}

.WeServePage #PageMain ul li {
    color: #666;
    position: relative;
    font-size: 13px;
    padding-left: 20px
}

.WeServePage #PageMain ul li:not(:last-of-type) {
    margin-bottom: 8px
}

@media only screen and (min-width: 468px) {
    .WeServePage #PageMain ul li {
        font-size: 14px;
        padding-left: 25px
    }
    .WeServePage #PageMain ul li:not(:last-of-type) {
        margin-bottom: 10px
    }
}

@media only screen and (min-width: 992px) {
    .WeServePage #PageMain ul li:not(:last-of-type) {
        margin-bottom: 18px
    }
}

@media only screen and (min-width: 1551px) {
    .WeServePage #PageMain ul li {
        font-size: 18px;
        padding-left: 50px
    }
    .WeServePage #PageMain ul li:not(:last-of-type) {
        margin-bottom: 25px
    }
}

.WeServePage #PageMain ul li::before {
    content: "";
    position: absolute;
    background: url("../images/listIcon2.svg") no-repeat;
    background-size: contain;
    opacity: .4;
    left: 0;
    width: 13px;
    height: 13px
}

@media only screen and (min-width: 468px) {
    .WeServePage #PageMain ul li::before {
        width: 16px;
        height: 16px
    }
}

@media only screen and (min-width: 1551px) {
    .WeServePage #PageMain ul li::before {
        width: 25px;
        height: 25px
    }
}

.WeServePage #PageMain .Dwnld {
    display: flex;
    align-items: center;
    width: fit-content;
    width: -moz-fit-content;
    color: #2c2c2c;
    letter-spacing: .6px;
    padding-right: 7px;
    border: 1px solid #2161ad;
    font-size: 11px;
    margin-top: 15px
}

@media only screen and (min-width: 468px) {
    .WeServePage #PageMain .Dwnld {
        font-size: 13px;
        margin-top: 35px
    }
}

.WeServePage #PageMain .Dwnld .icon {
    background: #2161ad;
    margin-right: 8px;
    padding: 10px 9px;
    transition: all .3s
}

.WeServePage #PageMain .Dwnld svg {
    width: 15px;
    fill: #fff
}

.WeServePage #PageMain .Dwnld:hover {
    border-color: #2161ad
}

.WeServePage #PageMain .Dwnld:hover .icon {
    background: #2161ad
}

.WeServePage #Projects {
    padding-top: 0
}

.WeServePage #Projects .ProBox .overlay .ProName {
    margin: 0
}

.WeServePage #GalSec {
    background: #fff;
    padding: 40px 0 45px
}

@media only screen and (min-width: 468px) {
    .WeServePage #GalSec {
        padding: 55px 0 65px
    }
}

@media only screen and (min-width: 768px) {
    .WeServePage #GalSec {
        padding: 65px 0 55px
    }
}

@media only screen and (min-width: 992px) {
    .WeServePage #GalSec {
        padding: 65px 0 95px
    }
}

@media only screen and (min-width: 1200px) {
    .WeServePage #GalSec {
        padding: 80px 0 125px
    }
}

.WeServePage #GalSec .GalGrid {
    display: grid;
    gap: 10px;
    position: relative;
    z-index: 1;
    grid-auto-rows: 160px;
    grid-template-columns: repeat(2, 1fr)
}

@media only screen and (min-width: 468px) {
    .WeServePage #GalSec .GalGrid {
        gap: 13px;
        grid-auto-rows: 250px
    }
}

@media only screen and (min-width: 768px) {
    .WeServePage #GalSec .GalGrid {
        grid-template-columns: repeat(4, 1fr)
    }
}

@media only screen and (min-width: 1200px) {
    .WeServePage #GalSec .GalGrid {
        grid-auto-rows: 325px
    }
}

.WeServePage #GalSec .GalGrid .GalItm {
    overflow: hidden
}

.WeServePage #GalSec .GalGrid .GalItm.column {
    grid-column: span 2/auto
}

.WeServePage #GalSec .GalGrid .GalItm a {
    display: block;
    height: 100%;
    background: #0c1017
}

.WeServePage #GalSec .GalGrid .GalItm a .Lazyimage {
    transition: all .8s
}

.WeServePage #GalSec .GalGrid .GalItm a img {
    transition: all .8s
}

.WeServePage #GalSec .GalGrid .GalItm a:hover .Lazyimage {
    opacity: .5
}

.WeServePage #GalSec .GalGrid .GalItm a:hover img {
    transform: scale(1.2)
}

.WeServePage #PageFoot {
    background: #fff;
    padding-bottom: 45px
}

@media only screen and (min-width: 468px) {
    .WeServePage #PageFoot {
        padding-bottom: 75px
    }
}

@media only screen and (min-width: 768px) {
    .WeServePage #PageFoot {
        padding-bottom: 85px
    }
}

@media only screen and (min-width: 992px) {
    .WeServePage #PageFoot {
        padding-bottom: 90px
    }
}

@media only screen and (min-width: 1551px) {
    .WeServePage #PageFoot {
        padding-bottom: 115px
    }
}

html:lang(ar) .WeServePage #PageMain ul li {
    padding-right: 20px;
    padding-left: 0px
}

@media only screen and (min-width: 468px) {
    html:lang(ar) .WeServePage #PageMain ul li {
        padding-right: 25px;
        padding-left: 0px
    }
}

@media only screen and (min-width: 1551px) {
    html:lang(ar) .WeServePage #PageMain ul li {
        padding-right: 50px;
        padding-left: 0px
    }
}

html:lang(ar) .WeServePage #PageMain ul li::before {
    left: auto;
    right: 0
}

.ProjectsPage {
    background: #fff;
    overflow: hidden
}

.ProjectsPage #ProjectsFilter {
    padding: 45px 15px
}

@media only screen and (min-width: 468px) {
    .ProjectsPage #ProjectsFilter {
        padding: 75px 15px
    }
}

@media only screen and (min-width: 768px) {
    .ProjectsPage #ProjectsFilter {
        padding: 85px 30px
    }
}

@media only screen and (min-width: 992px) {
    .ProjectsPage #ProjectsFilter {
        padding: 90px 50px
    }
}

@media only screen and (min-width: 1551px) {
    .ProjectsPage #ProjectsFilter {
        padding: 105px 60px 130px
    }
}

.ProjectsPage #ProjectsFilter .GridHeader {
    margin-bottom: 35px
}

@media only screen and (min-width: 768px) {
    .ProjectsPage #ProjectsFilter .GridHeader {
        margin-bottom: 50px
    }
}

.ProjectsPage #ProjectsFilter .GridHeader .filters-select {
    height: 48px;
    background: #020202;
    width: 100%;
    color: #fff;
    padding: 8px 36px 8px 12px;
    font-size: 15px;
    position: relative;
    appearance: none;
    background: url("../images/upanddown.svg") no-repeat #020202;
    background-position: center right 15px;
    background-size: 15px
}

.ProjectsPage #ProjectsFilter .GridHeader .filters-select::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: 25px;
    height: 25px;
    background: #fff
}

@media only screen and (min-width: 768px) {
    .ProjectsPage #ProjectsFilter .GridHeader .filters-select {
        display: none
    }
}

.ProjectsPage #ProjectsFilter .GridHeader .filter-button-group {
    align-items: center;
    justify-content: center;
    margin: 0 -6px;
    display: none
}

@media only screen and (min-width: 768px) {
    .ProjectsPage #ProjectsFilter .GridHeader .filter-button-group {
        display: flex
    }
}

.ProjectsPage #ProjectsFilter .GridHeader .filter-button-group li {
    padding: 0 6px
}

.ProjectsPage #ProjectsFilter .GridHeader .filter-button-group button {
    border: 1px solid #dfdfdf;
    min-width: 65px;
    padding: 5px 15px;
    height: 40px;
    font-size: 14.691px;
    color: #8c8c8c;
    text-transform: uppercase;
    background: none;
    outline: none;
    box-shadow: none;
    transition: all .3s
}

.ProjectsPage #ProjectsFilter .GridHeader .filter-button-group button.is-checked {
    border-color: #2161ad;
    color: #2161ad
}

.ProjectsPage #ProjectsFilter .grid .element-item {
    width: 100%
}

@media only screen and (min-width: 576px) {
    .ProjectsPage #ProjectsFilter .grid .element-item {
        width: calc(100% / 2)
    }
}

@media only screen and (min-width: 768px) {
    .ProjectsPage #ProjectsFilter .grid .element-item {
        width: calc(100% / 3)
    }
}

@media only screen and (min-width: 1200px) {
    .ProjectsPage #ProjectsFilter .grid .element-item {
        width: calc(100% / 4)
    }
}

.ProjectsPage #ProjectsFilter .grid .ProBox {
    position: relative;
    overflow: hidden
}

.ProjectsPage #ProjectsFilter .grid .ProBox .ImgBox {
    opacity: 1
}

@media only screen and (min-width: 576px) {
    .ProjectsPage #ProjectsFilter .grid .ProBox .ImgBox {
        height: 270px
    }
}

@media only screen and (min-width: 1441px) {
    .ProjectsPage #ProjectsFilter .grid .ProBox .ImgBox {
        height: 325px
    }
}

.ProjectsPage #ProjectsFilter .grid .ProBox .overlay {
    left: 0;
    top: auto;
    bottom: 0;
    transform: none;
    background: rgba(2, 2, 2, 0.61);
    padding: 15px 0
}

.ProjectsPage #ProjectsFilter .grid .ProBox .overlay svg {
    width: 30px;
    margin-bottom: 18px
}

@media only screen and (min-width: 576px) {
    .ProjectsPage #ProjectsFilter .grid .ProBox .overlay svg {
        width: 40px;
        margin-bottom: 25px
    }
}

.ProjectsPage #ProjectsFilter .grid .ProBox .overlay .ProName {
    font-weight: 400
}

.ProjectsPage #ProjectsFilter .ProBox .ImgBox {
    opacity: .3
}

@media only screen and (min-width: 576px) {
    .ProjectsPage #ProjectsFilter .ProBox .ImgBox {
        opacity: .3
    }
}

.ProjectsPage #ProjectsFilter .ProBox .overlay {
    opacity: 1
}

.ProjectsPage.NOBanner {
    background: #020202
}

.ProjectsPage #ProDtl {
    background: #fff;
    padding: 45px 0px
}

@media only screen and (min-width: 468px) {
    .ProjectsPage #ProDtl {
        padding: 75px 0px
    }
}

@media only screen and (min-width: 768px) {
    .ProjectsPage #ProDtl {
        padding: 85px 0px
    }
}

@media only screen and (min-width: 992px) {
    .ProjectsPage #ProDtl {
        padding: 90px 0px
    }
}

@media only screen and (min-width: 1551px) {
    .ProjectsPage #ProDtl {
        padding: 108px 0 100px
    }
}

@media only screen and (min-width: 992px) {
    .ProjectsPage #ProDtl .CntnBox {
        padding: 15px 30px 15px 0
    }
}

@media only screen and (min-width: 1200px) {
    .ProjectsPage #ProDtl .CntnBox {
        padding: 15px 65px 15px 0
    }
}

.ProjectsPage #ProDtl .CntnBox .Title {
    color: #060606;
    font-family: "HelveticaNeueLT 75 Roman";
    text-transform: uppercase;
    font-size: 23px;
    margin-bottom: 10px
}

@media only screen and (min-width: 468px) {
    .ProjectsPage #ProDtl .CntnBox .Title {
        font-size: 28px;
        margin-bottom: 25px
    }
}

@media only screen and (min-width: 768px) {
    .ProjectsPage #ProDtl .CntnBox .Title {
        font-size: 32px;
        margin-bottom: 35px
    }
}

@media only screen and (min-width: 1551px) {
    .ProjectsPage #ProDtl .CntnBox .Title {
        font-size: 36px
    }
}

.ProjectsPage #ProDtl .CntnBox p {
    color: #55585d
}

@media only screen and (min-width: 768px) {
    .ProjectsPage #ProDtl .CntnBox p {
        line-height: 30px
    }
}

@media only screen and (min-width: 1550px) {
    .ProjectsPage #ProDtl .CntnBox p {
        line-height: 34px
    }
}

.ProjectsPage #SpecifSec {
    background: #f5f5f6;
    padding: 40px 0px 45px
}

@media only screen and (min-width: 468px) {
    .ProjectsPage #SpecifSec {
        padding: 45px 0px 55px
    }
}

@media only screen and (min-width: 768px) {
    .ProjectsPage #SpecifSec {
        padding: 50px 0px 55px
    }
}

@media only screen and (min-width: 992px) {
    .ProjectsPage #SpecifSec {
        padding: 60px 0 75px
    }
}

@media only screen and (min-width: 1200px) {
    .ProjectsPage #SpecifSec .row {
        margin: 0 -25px
    }
}

@media only screen and (min-width: 1551px) {
    .ProjectsPage #SpecifSec .row {
        margin: 0 -37.5px
    }
}

@media only screen and (min-width: 1200px) {
    .ProjectsPage #SpecifSec .row>* {
        padding: 0 25px
    }
}

@media only screen and (min-width: 1551px) {
    .ProjectsPage #SpecifSec .row>* {
        padding: 0 37.5px
    }
}

.ProjectsPage #SpecifSec .Box .Title {
    color: #3a3a3a;
    font-weight: 600;
    text-transform: uppercase;
    position: relative;
    font-size: 14px;
    padding-left: 40px;
    letter-spacing: 1px;
    margin-bottom: 15px
}

@media only screen and (min-width: 468px) {
    .ProjectsPage #SpecifSec .Box .Title {
        font-size: 15px;
        padding-left: 47px
    }
}

@media only screen and (min-width: 768px) {
    .ProjectsPage #SpecifSec .Box .Title {
        margin-bottom: 25px
    }
}

.ProjectsPage #SpecifSec .Box .Title::before {
    content: "";
    position: absolute;
    left: 0px;
    top: 0px;
    bottom: 0;
    margin: auto;
    background: #2161ad;
    width: 24px;
    height: 2px
}

.ProjectsPage #SpecifSec .Box ul li {
    border-bottom: 1px solid #e5e5e5;
    font-size: 14px;
    padding: 15px 0
}

@media only screen and (min-width: 468px) {
    .ProjectsPage #SpecifSec .Box ul li {
        display: flex;
        align-items: center
    }
}

@media only screen and (min-width: 1200px) {
    .ProjectsPage #SpecifSec .Box ul li {
        padding: 20px 0;
        font-size: 16px
    }
}

.ProjectsPage #SpecifSec .Box ul li .label {
    color: #7b7e82;
    width: 150px;
    margin-bottom: 4px
}

@media only screen and (min-width: 468px) {
    .ProjectsPage #SpecifSec .Box ul li .label {
        margin-bottom: 0px
    }
}

@media only screen and (min-width: 992px) {
    .ProjectsPage #SpecifSec .Box ul li .label {
        width: 215px
    }
}

.ProjectsPage #SpecifSec .Box ul li span {
    color: #2a2a2b
}

.ProjectsPage #GalSec {
    background: #fff;
    padding: 40px 0 45px
}

@media only screen and (min-width: 468px) {
    .ProjectsPage #GalSec {
        padding: 55px 0 65px
    }
}

@media only screen and (min-width: 768px) {
    .ProjectsPage #GalSec {
        padding: 65px 0 55px
    }
}

@media only screen and (min-width: 992px) {
    .ProjectsPage #GalSec {
        padding: 65px 0 95px
    }
}

@media only screen and (min-width: 1200px) {
    .ProjectsPage #GalSec {
        padding: 80px 0 125px
    }
}

.ProjectsPage #GalSec .GalGrid {
    display: grid;
    gap: 10px;
    position: relative;
    z-index: 1;
    grid-auto-rows: 160px;
    grid-template-columns: repeat(2, 1fr)
}

@media only screen and (min-width: 468px) {
    .ProjectsPage #GalSec .GalGrid {
        gap: 13px;
        grid-auto-rows: 250px
    }
}

@media only screen and (min-width: 768px) {
    .ProjectsPage #GalSec .GalGrid {
        grid-template-columns: repeat(4, 1fr)
    }
}

@media only screen and (min-width: 1200px) {
    .ProjectsPage #GalSec .GalGrid {
        grid-auto-rows: 325px
    }
}

.ProjectsPage #GalSec .GalGrid .GalItm {
    overflow: hidden
}

.ProjectsPage #GalSec .GalGrid .GalItm.column {
    grid-column: span 2/auto
}

.ProjectsPage #GalSec .GalGrid .GalItm a {
    display: block;
    height: 100%;
    background: #0c1017
}

.ProjectsPage #GalSec .GalGrid .GalItm a .Lazyimage {
    transition: all .8s
}

.ProjectsPage #GalSec .GalGrid .GalItm a img {
    transition: all .8s
}

.ProjectsPage #GalSec .GalGrid .GalItm a:hover .Lazyimage {
    opacity: .5
}

.ProjectsPage #GalSec .GalGrid .GalItm a:hover img {
    transform: scale(1.2)
}

.ProjectsPage #GallFoot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    border-top: 1px solid rgba(6, 6, 6, 0.149)
}

.ProjectsPage #GallFoot li {
    width: calc(100% / 3)
}

.ProjectsPage #GallFoot li:not(:last-of-type) {
    border-right: 1px solid rgba(6, 6, 6, 0.149)
}

.ProjectsPage #GallFoot li a {
    color: #060606;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 1px;
    font-size: 11px;
    padding: 15px 5px
}

@media only screen and (min-width: 468px) {
    .ProjectsPage #GallFoot li a {
        padding: 25px 5px
    }
}

@media only screen and (min-width: 768px) {
    .ProjectsPage #GallFoot li a {
        font-size: 13px;
        padding: 25px 30px
    }
}

@media only screen and (min-width: 992px) {
    .ProjectsPage #GallFoot li a {
        padding: 45px 60px;
        font-size: 14px
    }
}

@media only screen and (min-width: 1551px) {
    .ProjectsPage #GallFoot li a {
        padding: 55px 120px
    }
}

.ProjectsPage #GallFoot li a svg {
    fill: #060606;
    margin: 0 15px;
    width: 14px
}

@media only screen and (min-width: 768px) {
    .ProjectsPage #GallFoot li a svg {
        width: 17px
    }
}

.ProjectsPage #GallFoot li a.ViewAll {
    color: #2161ad
}

@media only screen and (max-width: 576px) {
    .ProjectsPage #GallFoot li a.prevBtn,
    .ProjectsPage #GallFoot li a.NextBtn {
        font-size: 0
    }
}

.ProjectsPage #GallFoot li a.prevBtn:hover,
.ProjectsPage #GallFoot li a.NextBtn:hover {
    opacity: .5
}

@media only screen and (max-width: 576px) {
    .ProjectsPage #GallFoot li:first-of-type,
    .ProjectsPage #GallFoot li:last-of-type {
        width: 55px
    }
    .ProjectsPage #GallFoot li:first-of-type a,
    .ProjectsPage #GallFoot li:last-of-type a {
        text-indent: -12px;
        justify-content: center !important
    }
    .ProjectsPage #GallFoot li:first-of-type a svg,
    .ProjectsPage #GallFoot li:last-of-type a svg {
        width: 18px;
        margin: 0
    }
    .ProjectsPage #GallFoot li:nth-child(2) {
        width: calc(100% - 100px)
    }
}

html:lang(en) .ProjectsPage #GallFoot li:not(:last-of-type) {
    border-right: 1px solid rgba(6, 6, 6, 0.149)
}

html:lang(en) .ProjectsPage #GallFoot li a.prevBtn {
    justify-content: flex-start
}

html:lang(en) .ProjectsPage #GallFoot li a.prevBtn svg {
    transform: rotate(180deg)
}

html:lang(en) .ProjectsPage #GallFoot li a.NextBtn {
    justify-content: flex-end
}

@media only screen and (max-width: 576px) {
    html:lang(en) .ProjectsPage #GallFoot li:first-of-type {
        width: 55px
    }
    html:lang(en) .ProjectsPage #GallFoot li:first-of-type a svg {
        position: relative;
        left: 9px
    }
}

html:lang(ar) .ProjectsPage #ProjectsFilter .GridHeader .filters-select {
    background-position: center left 15px
}

@media only screen and (min-width: 992px) {
    html:lang(ar) .ProjectsPage #ProDtl .CntnBox {
        padding: 15px 0px 15px 30px
    }
}

@media only screen and (min-width: 1200px) {
    html:lang(ar) .ProjectsPage #ProDtl .CntnBox {
        padding: 15px 0px 15px 65px
    }
}

html:lang(ar) .ProjectsPage #GallFoot li:not(:last-of-type) {
    border-left: 1px solid rgba(6, 6, 6, 0.149)
}

html:lang(ar) .ProjectsPage #GallFoot li a.prevBtn {
    justify-content: flex-start
}

html:lang(ar) .ProjectsPage #GallFoot li a.NextBtn {
    justify-content: flex-end
}

html:lang(ar) .ProjectsPage #GallFoot li a.NextBtn svg {
    transform: rotate(180deg)
}

@media only screen and (max-width: 576px) {
    html:lang(ar) .ProjectsPage #GallFoot li:first-of-type {
        width: 55px
    }
    html:lang(ar) .ProjectsPage #GallFoot li:first-of-type a svg {
        position: relative;
        right: 9px
    }
}

html:lang(ar) .ProjectsPage #SpecifSec .Box .Title {
    font-weight: 700;
    padding-left: 0px;
    padding-right: 40px
}

html:lang(ar) .ProjectsPage #SpecifSec .Box .Title::before {
    left: auto;
    right: 0
}

@media only screen and (min-width: 468px) {
    html:lang(ar) .ProjectsPage #SpecifSec .Box .Title {
        padding-left: 0px;
        padding-right: 47px
    }
}

.AboutPage #AboutSec {
    background: #fff;
    padding: 45px 0 30px
}

@media only screen and (min-width: 468px) {
    .AboutPage #AboutSec {
        padding: 55px 0
    }
}

@media only screen and (min-width: 768px) {
    .AboutPage #AboutSec {
        padding: 65px 0 70px
    }
}

@media only screen and (min-width: 992px) {
    .AboutPage #AboutSec {
        padding: 75px 0 85px
    }
}

@media only screen and (min-width: 1200px) {
    .AboutPage #AboutSec {
        padding: 100px 0 80px
    }
}

@media only screen and (min-width: 1441px) {
    .AboutPage #AboutSec {
        padding: 130px 0 95px
    }
}

.AboutPage #AboutSec .WVR {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.AboutPage #AboutSec .WVR .CntnSec {
    width: 100%
}

@media only screen and (min-width: 992px) {
    .AboutPage #AboutSec .WVR .CntnSec {
        width: calc(100% - 405px)
    }
}

@media only screen and (min-width: 1200px) {
    .AboutPage #AboutSec .WVR .CntnSec {
        width: calc(100% - 480px)
    }
}

@media only screen and (min-width: 1441px) {
    .AboutPage #AboutSec .WVR .CntnSec {
        width: calc(100% - 540px)
    }
}

.AboutPage #AboutSec .WVR .CntnSec p {
    color: #666
}

@media only screen and (min-width: 768px) {
    .AboutPage #AboutSec .WVR .CntnSec p {
        font-size: 15px
    }
}

@media only screen and (min-width: 1441px) {
    .AboutPage #AboutSec .WVR .CntnSec p {
        font-size: 16px;
        line-height: 30px
    }
}

.AboutPage #AboutSec .WVR .CntnSec p strong {
    color: #343434
}

@media only screen and (min-width: 768px) {
    .AboutPage #AboutSec .WVR .CntnSec p strong {
        font-size: 18px;
        line-height: 28px
    }
}

@media only screen and (min-width: 1441px) {
    .AboutPage #AboutSec .WVR .CntnSec p strong {
        font-size: 20px;
        line-height: 30px
    }
}

.AboutPage #AboutSec .WVR .ImgBox {
    overflow: hidden;
    width: 100%;
    margin-top: 25px;
    height: 430px;
    display: none
}

@media only screen and (min-width: 768px) {
    .AboutPage #AboutSec .WVR .ImgBox {
        display: block
    }
}

@media only screen and (min-width: 992px) {
    .AboutPage #AboutSec .WVR .ImgBox {
        margin-top: 0px;
        width: 405px;
        height: auto
    }
}

@media only screen and (min-width: 1200px) {
    .AboutPage #AboutSec .WVR .ImgBox {
        width: 480px
    }
}

@media only screen and (min-width: 1441px) {
    .AboutPage #AboutSec .WVR .ImgBox {
        width: 540px
    }
}

.AboutPage #AboutSec .YUS {
    margin-top: 30px
}

@media only screen and (min-width: 768px) {
    .AboutPage #AboutSec .YUS {
        margin-top: 50px
    }
}

.AboutPage #AboutSec .YUS p {
    color: #666
}

@media only screen and (min-width: 768px) {
    .AboutPage #AboutSec .YUS p {
        font-size: 15px
    }
}

@media only screen and (min-width: 1441px) {
    .AboutPage #AboutSec .YUS p {
        font-size: 16px;
        line-height: 30px
    }
}

.AboutPage #ViZMiZ .accordion .row {
    margin: -9px
}

.AboutPage #ViZMiZ .accordion .row>* {
    padding: 9px
}

.AboutPage #ViZMiZ .accordion .Box {
    background: #fff;
    padding: 15px 15px 30px
}

@media only screen and (min-width: 468px) {
    .AboutPage #ViZMiZ .accordion .Box {
        padding: 30px 28px 60px
    }
}

.AboutPage #ViZMiZ .accordion .Box .Count {
    color: rgba(102, 102, 102, 0.102);
    font-family: "HelveticaNeueLT 75 Roman";
    font-size: 38px;
    margin-bottom: 10px
}

@media only screen and (min-width: 468px) {
    .AboutPage #ViZMiZ .accordion .Box .Count {
        font-size: 45px
    }
}

@media only screen and (min-width: 1551px) {
    .AboutPage #ViZMiZ .accordion .Box .Count {
        font-size: 50px;
        margin-bottom: 13px
    }
}

.AboutPage #ViZMiZ .accordion .Box .Title,
.AboutPage #ViZMiZ .accordion .Box h4 {
    font-family: "HelveticaNeueLT 65";
    color: #2c2c2c;
    text-transform: uppercase;
    font-size: 14px;
    margin-bottom: 20px
}

@media only screen and (min-width: 468px) {
    .AboutPage #ViZMiZ .accordion .Box .Title,
    .AboutPage #ViZMiZ .accordion .Box h4 {
        font-size: 15px;
        margin-bottom: 25px
    }
}

@media only screen and (min-width: 1551px) {
    .AboutPage #ViZMiZ .accordion .Box .Title,
    .AboutPage #ViZMiZ .accordion .Box h4 {
        font-size: 16px;
        margin-bottom: 30px
    }
}

.AboutPage #ViZMiZ .accordion .Box ul li {
    color: #666;
    position: relative;
    font-size: 13px
}

.AboutPage #ViZMiZ .accordion .Box ul li:not(:last-of-type) {
    margin-bottom: 13px
}

@media only screen and (min-width: 468px) {
    .AboutPage #ViZMiZ .accordion .Box ul li {
        font-size: 14px
    }
    .AboutPage #ViZMiZ .accordion .Box ul li:not(:last-of-type) {
        margin-bottom: 18px
    }
}

.AboutPage #ViZMiZ .accordion .Box ul li::before {
    content: "";
    position: absolute;
    background: url("../images/listIcon2.svg") no-repeat;
    background-size: contain;
    opacity: .4;
    width: 13px;
    height: 13px
}

@media only screen and (min-width: 468px) {
    .AboutPage #ViZMiZ .accordion .Box ul li::before {
        width: 16px;
        height: 16px
    }
}

.AboutPage #ExpSec {
    background: #fff
}

.AboutPage #ExpSec ul {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.AboutPage #ExpSec ul li {
    position: relative;
    display: flex;
    justify-content: center;
    padding: 25px 0px;
    width: calc(100% / 2)
}

@media only screen and (max-width: 468px) {
    .AboutPage #ExpSec ul li:nth-child(1) {
        padding: 45px 0px 20px
    }
    .AboutPage #ExpSec ul li:nth-child(2) {
        padding: 45px 0px 20px
    }
    .AboutPage #ExpSec ul li:nth-child(3) {
        padding: 20px 0px 45px
    }
    .AboutPage #ExpSec ul li:nth-child(4) {
        padding: 20px 0px 45px
    }
}

@media (max-width: 768px) and (min-width: 468px) {
    .AboutPage #ExpSec ul li:nth-child(1) {
        padding: 70px 0px 25px
    }
    .AboutPage #ExpSec ul li:nth-child(2) {
        padding: 70px 0px 25px
    }
    .AboutPage #ExpSec ul li:nth-child(3) {
        padding: 25px 0px 70px
    }
    .AboutPage #ExpSec ul li:nth-child(4) {
        padding: 25px 0px 70px
    }
}

@media only screen and (min-width: 768px) {
    .AboutPage #ExpSec ul li {
        padding: 70px 0px;
        width: calc(100% / 4)
    }
}

@media only screen and (min-width: 1200px) {
    .AboutPage #ExpSec ul li {
        padding: 110px 0px
    }
}

.AboutPage #ExpSec ul li::before {
    content: "";
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0;
    margin: auto;
    background: rgba(33, 97, 173, 0.2);
    width: 1px;
    height: 100%
}

.AboutPage #ExpSec ul .OuterRound {
    background: #2161ad;
    padding: 1px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    position: relative;
    z-index: 1;
    border: 5px solid #fff;
    width: 150px;
    height: 150px
}

@media only screen and (min-width: 468px) {
    .AboutPage #ExpSec ul .OuterRound {
        width: 185px;
        height: 185px
    }
}

@media only screen and (min-width: 992px) {
    .AboutPage #ExpSec ul .OuterRound {
        width: 200px;
        height: 200px;
        border: 10px solid #fff
    }
}

@media only screen and (min-width: 1200px) {
    .AboutPage #ExpSec ul .OuterRound {
        width: 245px;
        height: 245px
    }
}

@media only screen and (min-width: 1551px) {
    .AboutPage #ExpSec ul .OuterRound {
        width: 282px;
        height: 282px
    }
}

.AboutPage #ExpSec ul .OuterRound .InnerRound {
    width: 100%;
    height: 100%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    border-radius: 50%;
    align-content: center;
    padding: 0 15px;
    border: 5px solid rgba(33, 32, 32, 0.06)
}

@media only screen and (min-width: 992px) {
    .AboutPage #ExpSec ul .OuterRound .InnerRound {
        border: 10px solid rgba(33, 32, 32, 0.06)
    }
}

@media only screen and (min-width: 1200px) {
    .AboutPage #ExpSec ul .OuterRound .InnerRound {
        padding: 0 45px
    }
}

.AboutPage #ExpSec ul .OuterRound .InnerRound .countFlx {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-bottom: 7px
}

@media only screen and (min-width: 468px) {
    .AboutPage #ExpSec ul .OuterRound .InnerRound .countFlx {
        margin-bottom: 15px
    }
}

.AboutPage #ExpSec ul .OuterRound .InnerRound .countFlx .count,
.AboutPage #ExpSec ul .OuterRound .InnerRound .countFlx .plus,
.AboutPage #ExpSec ul .OuterRound .InnerRound .countFlx .sq {
    color: #2161ad;
    font-family: "HelveticaNeueLT 75 Roman";
    font-size: 24px
}

@media only screen and (min-width: 1200px) {
    .AboutPage #ExpSec ul .OuterRound .InnerRound .countFlx .count,
    .AboutPage #ExpSec ul .OuterRound .InnerRound .countFlx .plus,
    .AboutPage #ExpSec ul .OuterRound .InnerRound .countFlx .sq {
        font-size: 28px
    }
}

@media only screen and (min-width: 1200px) {
    .AboutPage #ExpSec ul .OuterRound .InnerRound .countFlx .count,
    .AboutPage #ExpSec ul .OuterRound .InnerRound .countFlx .plus,
    .AboutPage #ExpSec ul .OuterRound .InnerRound .countFlx .sq {
        font-size: 34px
    }
}

@media only screen and (min-width: 1551px) {
    .AboutPage #ExpSec ul .OuterRound .InnerRound .countFlx .count,
    .AboutPage #ExpSec ul .OuterRound .InnerRound .countFlx .plus,
    .AboutPage #ExpSec ul .OuterRound .InnerRound .countFlx .sq {
        font-size: 40px
    }
}

.AboutPage #ExpSec ul .OuterRound .InnerRound .countFlx .sq {
    padding: 0 8px
}

@media only screen and (min-width: 1200px) {
    .AboutPage #ExpSec ul .OuterRound .InnerRound .countFlx .sq {
        padding: 0 15px
    }
}

.AboutPage #ExpSec ul .OuterRound .InnerRound .txt {
    color: #6b6b6b;
    text-transform: uppercase;
    font-size: 12px;
    line-height: 18px
}

@media only screen and (min-width: 468px) {
    .AboutPage #ExpSec ul .OuterRound .InnerRound .txt {
        font-size: 13px;
        line-height: 20px
    }
}

@media only screen and (min-width: 1200px) {
    .AboutPage #ExpSec ul .OuterRound .InnerRound .txt {
        font-size: 14px;
        line-height: 22px
    }
}

@media only screen and (min-width: 1551px) {
    .AboutPage #ExpSec ul .OuterRound .InnerRound .txt {
        font-size: 16px;
        line-height: 24px
    }
}

.AboutPage.structures #Structures .StructuresList .container {
    padding: 0
}

.AboutPage.structures #Structures .StructuresList .row {
    padding: 0 15px
}

.AboutPage.structures #Structures .StructuresList a .Img {
    overflow: hidden
}

.AboutPage.structures #Structures .StructuresList a .Img .inner {
    transition: all .5s
}

.AboutPage.structures #Structures .StructuresList a .CntnBox {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0)
}

.AboutPage.structures #Structures .StructuresList a .CntnBox .title {
    margin: 0;
    font-size: 14px
}

@media only screen and (min-width: 992px) {
    .AboutPage.structures #Structures .StructuresList a .CntnBox .title {
        font-size: 15px
    }
}

.AboutPage.structures #Structures .StructuresList a:hover .Img .inner {
    transform: scale(1.2)
}

@media only screen and (min-width: 992px) {
    html:lang(en) .AboutPage #AboutSec .WVR .CntnSec {
        padding-right: 55px
    }
}

@media only screen and (min-width: 1441px) {
    html:lang(en) .AboutPage #AboutSec .WVR .CntnSec {
        padding-right: 100px
    }
}

html:lang(en) .AboutPage #ViZMiZ .accordion .Box ul li {
    padding-left: 20px
}

@media only screen and (min-width: 468px) {
    html:lang(en) .AboutPage #ViZMiZ .accordion .Box ul li {
        padding-left: 25px
    }
}

html:lang(en) .AboutPage #ViZMiZ .accordion .Box ul li::before {
    left: 0
}

@media only screen and (min-width: 992px) {
    html:lang(ar) .AboutPage #AboutSec .WVR .CntnSec {
        padding-left: 55px
    }
}

@media only screen and (min-width: 1441px) {
    html:lang(ar) .AboutPage #AboutSec .WVR .CntnSec {
        padding-left: 100px
    }
}

html:lang(ar) .AboutPage #ViZMiZ .accordion .Box ul li {
    padding-right: 20px
}

@media only screen and (min-width: 468px) {
    html:lang(ar) .AboutPage #ViZMiZ .accordion .Box ul li {
        padding-right: 25px
    }
}

html:lang(ar) .AboutPage #ViZMiZ .accordion .Box ul li::before {
    right: 0
}

@media only screen and (min-width: 1551px) {
    .BlogPage #NewsEvent {
        padding: 90px 0 120px
    }
}

@media only screen and (min-width: 1551px) {
    .BlogPage #NewsEvent .row {
        margin: -22px -24px
    }
}

@media only screen and (min-width: 1551px) {
    .BlogPage #NewsEvent .row>* {
        padding: 22px 24px
    }
}

.BlogPage #BlogDtl {
    background: #fff;
    padding: 45px 0
}

@media only screen and (min-width: 468px) {
    .BlogPage #BlogDtl {
        padding: 75px 0
    }
}

@media only screen and (min-width: 768px) {
    .BlogPage #BlogDtl {
        padding: 85px 0
    }
}

@media only screen and (min-width: 992px) {
    .BlogPage #BlogDtl {
        padding: 90px 0
    }
}

@media only screen and (min-width: 1551px) {
    .BlogPage #BlogDtl {
        padding: 90px 0 135px
    }
}

.BlogPage #BlogDtl .BlogHeader {
    margin-bottom: 20px
}

@media only screen and (min-width: 468px) {
    .BlogPage #BlogDtl .BlogHeader {
        margin-bottom: 35px
    }
}

.BlogPage #BlogDtl .BlogHeader .BlogHead {
    color: #1f1f1f;
    margin-bottom: 20px;
    font-size: 20px
}

@media only screen and (min-width: 468px) {
    .BlogPage #BlogDtl .BlogHeader .BlogHead {
        font-size: 24px
    }
}

@media only screen and (min-width: 768px) {
    .BlogPage #BlogDtl .BlogHeader .BlogHead {
        font-size: 26px
    }
}

@media only screen and (min-width: 992px) {
    .BlogPage #BlogDtl .BlogHeader .BlogHead {
        font-size: 28px
    }
}

@media only screen and (min-width: 1200px) {
    .BlogPage #BlogDtl .BlogHeader .BlogHead {
        font-size: 30px;
        line-height: 36px
    }
}

.BlogPage #BlogDtl .BlogHeader ul {
    display: flex;
    align-items: center;
    margin: 0 -17.5px
}

.BlogPage #BlogDtl .BlogHeader ul li {
    color: #929191;
    padding: 0 17.5px;
    position: relative;
    font-size: 14px
}

@media only screen and (min-width: 468px) {
    .BlogPage #BlogDtl .BlogHeader ul li {
        font-size: 16px
    }
}

.BlogPage #BlogDtl .BlogHeader ul li:not(:last-of-type)::after {
    content: "/";
    position: absolute;
    right: -1px;
    top: 0px;
    bottom: 0px;
    margin: auto;
    font-size: 16px;
    color: #929191
}

.BlogPage #BlogDtl .blogCntnt .BlogImg {
    max-height: 405px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px
}

@media only screen and (min-width: 468px) {
    .BlogPage #BlogDtl .blogCntnt .BlogImg {
        margin-bottom: 40px
    }
}

@media only screen and (min-width: 768px) {
    .BlogPage #BlogDtl .blogCntnt .BlogImg {
        margin-bottom: 55px
    }
}

.BlogPage #BlogDtl .blogCntnt .BlogImg .Lazyimage {
    width: 100%
}

.BlogPage #BlogDtl .blogCntnt p {
    color: #4b4a4a
}

.BlogPage #BlogDtl .blogCntnt ul {
    margin-top: 20px;
    margin-bottom: 25px
}

@media only screen and (min-width: 1441px) {
    .BlogPage #BlogDtl .blogCntnt ul {
        margin-top: 25px;
        margin-bottom: 30px
    }
}

.BlogPage #BlogDtl .blogCntnt ul li {
    color: #4a4a4a;
    line-height: normal;
    position: relative;
    font-size: 13px;
    padding-left: 20px
}

@media only screen and (min-width: 468px) {
    .BlogPage #BlogDtl .blogCntnt ul li {
        padding-left: 28px;
        font-size: 14px
    }
}

@media only screen and (min-width: 1441px) {
    .BlogPage #BlogDtl .blogCntnt ul li {
        font-size: 15px
    }
}

.BlogPage #BlogDtl .blogCntnt ul li:not(:last-of-type) {
    margin-bottom: 15px
}

.BlogPage #BlogDtl .blogCntnt ul li::before {
    content: "";
    position: absolute;
    left: 0px;
    top: 2px;
    background: url(../images/listIcon.svg) no-repeat center;
    background-size: contain;
    width: 12px;
    height: 12px
}

@media only screen and (min-width: 468px) {
    .BlogPage #BlogDtl .blogCntnt ul li::before {
        width: 14px;
        height: 14px
    }
}

@media only screen and (min-width: 1441px) {
    .BlogPage #BlogDtl .blogCntnt ul li::before {
        width: 16px;
        height: 16px
    }
}

.BlogPage #BlogDtl .Ritbox {
    padding-top: 15px
}

@media only screen and (min-width: 992px) {
    .BlogPage #BlogDtl .Ritbox {
        padding-top: 0px;
        padding-left: 20px
    }
}

.BlogPage #BlogDtl .RecntBlogs .head {
    color: #090909;
    margin-bottom: 20px;
    font-size: 21px
}

@media only screen and (min-width: 1441px) {
    .BlogPage #BlogDtl .RecntBlogs .head {
        font-size: 24px;
        margin-bottom: 25px
    }
}

.BlogPage #BlogDtl .RecntBlogs .bloRow {
    margin: -15px 0px
}

@media only screen and (min-width: 468px) {
    .BlogPage #BlogDtl .RecntBlogs .bloRow {
        margin: -15px -10px;
        display: flex;
        flex-wrap: wrap
    }
}

@media only screen and (min-width: 992px) {
    .BlogPage #BlogDtl .RecntBlogs .bloRow {
        margin: -28px 0px;
        display: block
    }
}

.BlogPage #BlogDtl .RecntBlogs .bloRow a {
    padding: 15px 0px;
    display: block
}

@media only screen and (min-width: 468px) {
    .BlogPage #BlogDtl .RecntBlogs .bloRow a {
        width: 50%;
        padding: 15px 10px
    }
}

@media only screen and (min-width: 576px) {
    .BlogPage #BlogDtl .RecntBlogs .bloRow a {
        width: 33.3333333333%
    }
}

@media only screen and (min-width: 992px) {
    .BlogPage #BlogDtl .RecntBlogs .bloRow a {
        border-bottom: 1px solid #dbd9d9;
        padding: 28px 0px;
        display: flex;
        flex-wrap: wrap;
        width: 100%
    }
}

.BlogPage #BlogDtl .RecntBlogs .bloRow a .ImgBox {
    background-color: #e8f1f8;
    overflow: hidden;
    height: 135px
}

@media only screen and (min-width: 992px) {
    .BlogPage #BlogDtl .RecntBlogs .bloRow a .ImgBox {
        width: 130px
    }
}

@media only screen and (min-width: 1441px) {
    .BlogPage #BlogDtl .RecntBlogs .bloRow a .ImgBox {
        height: 95px;
        width: 140px
    }
}

.BlogPage #BlogDtl .RecntBlogs .bloRow a .ImgBox img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.BlogPage #BlogDtl .RecntBlogs .bloRow a .cntnt {
    padding-top: 15px
}

@media only screen and (min-width: 992px) {
    .BlogPage #BlogDtl .RecntBlogs .bloRow a .cntnt {
        padding-top: 0px;
        padding-left: 15px;
        width: calc(100% - 130px)
    }
}

@media only screen and (min-width: 1441px) {
    .BlogPage #BlogDtl .RecntBlogs .bloRow a .cntnt {
        width: calc(100% - 140px);
        padding-left: 25px
    }
}

.BlogPage #BlogDtl .RecntBlogs .bloRow a .cntnt .name {
    font-size: 14px;
    line-height: 19px;
    color: #4a4a4a;
    margin-bottom: 10px
}

@media only screen and (min-width: 1441px) {
    .BlogPage #BlogDtl .RecntBlogs .bloRow a .cntnt .name {
        font-size: 16px;
        line-height: 22px
    }
}

.BlogPage #BlogDtl .RecntBlogs .bloRow a .cntnt .date {
    font-size: 12px;
    color: #2161ad
}

@media only screen and (min-width: 1441px) {
    .BlogPage #BlogDtl .RecntBlogs .bloRow a .cntnt .date {
        font-size: 13px
    }
}

html:lang(ar) .BlogPage #BlogDtl .BlogHeader ul li:not(:last-of-type)::after {
    right: auto;
    left: -1px
}

html:lang(ar) .BlogPage #BlogDtl .blogCntnt ul li {
    padding-left: 0;
    padding-right: 20px
}

@media only screen and (min-width: 468px) {
    html:lang(ar) .BlogPage #BlogDtl .blogCntnt ul li {
        padding-left: 0;
        padding-right: 28px
    }
}

html:lang(ar) .BlogPage #BlogDtl .blogCntnt ul li::before {
    left: auto;
    right: 0
}

@media only screen and (min-width: 992px) {
    html:lang(ar) .BlogPage #BlogDtl .Ritbox {
        padding-left: 0px;
        padding-right: 20px
    }
}

@media only screen and (min-width: 992px) {
    html:lang(ar) .BlogPage #BlogDtl .RecntBlogs .bloRow a .cntnt {
        padding-left: 0px;
        padding-right: 15px
    }
}

@media only screen and (min-width: 1441px) {
    html:lang(ar) .BlogPage #BlogDtl .RecntBlogs .bloRow a .cntnt {
        padding-left: 0px;
        padding-right: 25px
    }
}

.ContactPage {
    background: #fff
}

.ContactPage #AddressSec {
    border-bottom: 1px solid #dcdcdb
}

.ContactPage #AddressSec .FlexBox {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

@media only screen and (min-width: 468px) {
    .ContactPage #AddressSec .FlexBox {
        margin: 0px -35px
    }
}

@media only screen and (min-width: 1551px) {
    .ContactPage #AddressSec .FlexBox {
        margin: 0px -45px
    }
}

.ContactPage #AddressSec .FlexBox .Box {
    width: 100%;
    padding: 45px 15px 35px
}

@media only screen and (min-width: 468px) {
    .ContactPage #AddressSec .FlexBox .Box {
        padding: 85px 35px 55px;
        width: calc(100% / 2)
    }
}

@media only screen and (min-width: 1200px) {
    .ContactPage #AddressSec .FlexBox .Box {
        width: calc(100% / 4)
    }
}

@media only screen and (min-width: 1551px) {
    .ContactPage #AddressSec .FlexBox .Box {
        padding: 110px 45px 85px
    }
}

.ContactPage #AddressSec .FlexBox .Box:not(:last-of-type) {
    border-right: 1px solid #dcdcdb;
    border-bottom: 1px solid #dcdcdb
}

@media only screen and (min-width: 1200px) {
    .ContactPage #AddressSec .FlexBox .Box:not(:last-of-type) {
        border-bottom: 0
    }
}

.ContactPage #AddressSec .FlexBox .Box .Head {
    font-size: 18px;
    color: #2161ad;
    margin-bottom: 15px
}

@media only screen and (min-width: 768px) {
    .ContactPage #AddressSec .FlexBox .Box .Head {
        margin-bottom: 20px
    }
}

.ContactPage #AddressSec .FlexBox .Box .address {
    font-size: 14px;
    color: #525252;
    margin-bottom: 23px
}

@media only screen and (min-width: 768px) {
    .ContactPage #AddressSec .FlexBox .Box .address {
        font-size: 16px;
        margin-bottom: 30px
    }
}

.ContactPage #AddressSec .FlexBox .Box .contact {
    position: relative;
    padding-left: 33px;
    margin-bottom: 15px;
    height: 40px
}

@media only screen and (min-width: 768px) {
    .ContactPage #AddressSec .FlexBox .Box .contact {
        margin-bottom: 20px;
        height: 40px
    }
}

.ContactPage #AddressSec .FlexBox .Box .contact svg {
    fill: #2161ad;
    width: 20px;
    position: absolute;
    left: 0;
    top: 3px
}

.ContactPage #AddressSec .FlexBox .Box .contact li a {
    font-size: 14px;
    color: #525252
}

@media only screen and (min-width: 768px) {
    .ContactPage #AddressSec .FlexBox .Box .contact li a {
        font-size: 16px
    }
}

.ContactPage #AddressSec .FlexBox .Box .time {
    color: #525252;
    position: relative;
    padding-left: 33px;
    font-size: 14px;
    line-height: 24px
}

@media only screen and (min-width: 768px) {
    .ContactPage #AddressSec .FlexBox .Box .time {
        font-size: 16px;
        line-height: 30px
    }
}

.ContactPage #AddressSec .FlexBox .Box .time svg {
    fill: #2161ad;
    width: 18px;
    position: absolute;
    left: 0;
    top: 8px
}

.ContactPage #AddressSec .FlexBox .Box .location {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e2e2;
    color: #525252;
    width: 215px;
    height: 48px;
    font-size: 14px;
    margin-top: 25px
}

@media only screen and (min-width: 468px) {
    .ContactPage #AddressSec .FlexBox .Box .location {
        width: 100%;
        margin-top: 40px
    }
}

@media only screen and (min-width: 768px) {
    .ContactPage #AddressSec .FlexBox .Box .location {
        width: 219px;
        height: 52px;
        font-size: 16px;
        margin-top: 50px
    }
}

.ContactPage #AddressSec .FlexBox .Box .location::before {
    background: #2161ad
}

.ContactPage #AddressSec .FlexBox .Box .location span {
    display: flex;
    align-items: center;
    justify-content: center
}

.ContactPage #AddressSec .FlexBox .Box .location svg {
    fill: #2161ad;
    transition: all .3s;
    margin-right: 10px;
    width: 18px
}

@media only screen and (min-width: 768px) {
    .ContactPage #AddressSec .FlexBox .Box .location svg {
        margin-right: 17px;
        width: 22px
    }
}

.ContactPage #AddressSec .FlexBox .Box .location:hover {
    color: #fff
}

.ContactPage #AddressSec .FlexBox .Box .location:hover svg {
    fill: #fff
}

.ContactPage #ContactSec {
    background: #fff;
    padding: 35px 0 30px
}

@media only screen and (min-width: 468px) {
    .ContactPage #ContactSec {
        padding: 45px 0 50px
    }
}

@media only screen and (min-width: 768px) {
    .ContactPage #ContactSec {
        padding: 65px 0 70px
    }
}

@media only screen and (min-width: 1551px) {
    .ContactPage #ContactSec {
        padding: 90px 0 100px
    }
}

.ContactPage #ContactSec .container .FlxRow {
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between
}

.ContactPage #ContactSec .container >*{
    padding: 5px;
}
@media only screen and (max-width: 468px){
    .ContactPage #ContactSec .container .Mail:not(.Tel){
        width: 100%;
        margin-bottom: 20px;
    }
    .ContactPage #ContactSec .container .Mail .Rit .label br{
        display: none;
    }
}
@media only screen and (min-width: 1200px){
    .ContactPage #ContactSec .container .Mail .Rit .label br{
        display: none;
    }
}
.ContactPage #ContactSec .container .Mail {
    display: flex;
    align-items: center
}

.ContactPage #ContactSec .container .Mail .icon svg {
    width: 48px
}

@media only screen and (min-width: 768px) {
    .ContactPage #ContactSec .container .Mail .icon svg {
        width: 53px
    }
}

.ContactPage #ContactSec .container .Mail .icon svg .st0 {
    fill: #2161AD
}

.ContactPage #ContactSec .container .Mail .icon svg .st1 {
    fill: #8E8E8E
}

.ContactPage #ContactSec .container .Mail .Rit {
    padding-left: 18px
}

@media only screen and (min-width: 768px) {
    .ContactPage #ContactSec .container .Mail .Rit {
        padding-left: 22px
    }
}

.ContactPage #ContactSec .container .Mail .Rit .label {
    color: #2161ad;
    margin-bottom: 8px;
    text-transform: uppercase;
    font-size: 12px
}

@media only screen and (min-width: 768px) {
    .ContactPage #ContactSec .container .Mail .Rit .label {
        font-size: 14px
    }
}

.ContactPage #ContactSec .container .Mail .Rit .id {
    font-size: 16px;
    color: #525252
}

@media only screen and (min-width: 768px) {
    .ContactPage #ContactSec .container .Mail .Rit .id {
        font-size: 20px
    }
}

.ContactPage #ContactSec .container .Follow {
    display: flex;
    align-items: center;
    margin-top: 20px;
    width: 100%;
    justify-content: flex-start
}

@media only screen and (min-width: 992px) {
    .ContactPage #ContactSec .container .Follow {
        width: auto;
        margin-top: 0px
    }
}

.ContactPage #ContactSec .container .Follow .label {
    font-size: 13px;
    color: #55585d;
    padding: 0 15px;
    display: none
}

@media only screen and (min-width: 768px) {
    .ContactPage #ContactSec .container .Follow .label {
        display: block
    }
}

.ContactPage #ContactSec .container .Follow ul {
    display: flex;
    align-items: center;
    margin: 0 -5px
}

.ContactPage #ContactSec .container .Follow ul li {
    padding: 0 5px
}

.ContactPage #ContactSec .container .Follow ul a {
    border: 1px solid #929497;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px
}

@media only screen and (min-width: 468px) {
    .ContactPage #ContactSec .container .Follow ul a {
        width: 43px;
        height: 43px
    }
}

.ContactPage #ContactSec .container .Follow ul a svg {
    transition: all .3s;
    fill: #000;
    opacity: .5;
    margin: 0;
    width: 12px
}

@media only screen and (min-width: 468px) {
    .ContactPage #ContactSec .container .Follow ul a svg {
        width: 14px
    }
}

@media only screen and (min-width: 1551px) {
    .ContactPage #ContactSec .container .Follow ul a#fb svg {
        width: 13px
    }
}

@media only screen and (min-width: 1551px) {
    .ContactPage #ContactSec .container .Follow ul a#twiter svg {
        width: 15px
    }
}

.ContactPage #ContactSec .container .Follow ul a:hover svg {
    opacity: 1
}

.ContactPage #ContactForm {
    position: relative;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    padding: 45px 0
}

@media only screen and (min-width: 468px) {
    .ContactPage #ContactForm {
        padding: 55px 0
    }
}

@media only screen and (min-width: 768px) {
    .ContactPage #ContactForm {
        padding: 65px 0
    }
}

@media only screen and (min-width: 992px) {
    .ContactPage #ContactForm {
        padding: 70px 0
    }
}

@media only screen and (min-width: 1551px) {
    .ContactPage #ContactForm {
        padding: 100px 0
    }
}

.ContactPage #ContactForm::before {
    content: "";
    position: absolute;
    left: 0px;
    top: 0;
    width: 100%;
    height: 100%;
    background: #131313;
    opacity: .75
}

.ContactPage #ContactForm .container {
    position: relative
}

@media only screen and (min-width: 992px) {
    .ContactPage #ContactForm .container {
        padding: 0 80px
    }
}

@media only screen and (min-width: 1551px) {
    .ContactPage #ContactForm .container {
        padding: 0 110px
    }
}

.ContactPage #ContactForm .ComTitle {
    color: #fff
}

.ContactPage #ContactForm form .form-group {
    position: relative
}

.ContactPage #ContactForm form .form-control,
.ContactPage #ContactForm form .select2-selection {
    display: block;
    width: 100%;
    font-weight: 400;
    line-height: normal;
    color: #fff;
    background-clip: padding-box;
    border-radius: 0;
    transition: all .3s;
    outline: none;
    box-shadow: none;
    background-color: transparent;
    height: 45px;
    font-size: 13px;
    padding: 5px 15px;
    border: 1px solid rgba(236, 236, 236, 0.33)
}

@media only screen and (min-width: 468px) {
    .ContactPage #ContactForm form .form-control,
    .ContactPage #ContactForm form .select2-selection {
        padding: 5px 22px
    }
}

@media only screen and (min-width: 576px) {
    .ContactPage #ContactForm form .form-control,
    .ContactPage #ContactForm form .select2-selection {
        height: 55px;
        font-size: 14px
    }
}

@media only screen and (min-width: 1200px) {
    .ContactPage #ContactForm form .form-control,
    .ContactPage #ContactForm form .select2-selection {
        font-size: 16px
    }
}

.ContactPage #ContactForm form .form-control::placeholder,
.ContactPage #ContactForm form .select2-selection::placeholder {
    color: #fff
}

.ContactPage #ContactForm form textarea.form-control {
    padding-top: 13px;
    min-height: 120px
}

@media only screen and (min-width: 576px) {
    .ContactPage #ContactForm form textarea.form-control {
        padding-top: 20px;
        min-height: 182px
    }
}

.ContactPage #ContactForm form input[type="file"] {
    opacity: 0;
    position: absolute;
    left: 0px;
    width: 100%;
    height: 100%;
    margin: 0;
    max-width: 100%;
    z-index: 1;
    cursor: pointer
}

.ContactPage #ContactForm form .attach {
    width: 100%;
    height: 45px;
    font-size: 13px;
    color: #fff;
    padding: 5px 15px;
    border: 1px solid rgba(236, 236, 236, 0.33);
    margin: 0;
    max-width: 100%;
    display: flex;
    align-items: center;
    cursor: pointer
}

.ContactPage #ContactForm form .attach svg {
    fill: #2161ad;
    width: 22px;
    margin-right: 12px
}

@media only screen and (min-width: 468px) {
    .ContactPage #ContactForm form .attach {
        padding: 5px 22px
    }
}

@media only screen and (min-width: 576px) {
    .ContactPage #ContactForm form .attach {
        height: 55px;
        font-size: 14px
    }
}

@media only screen and (min-width: 1200px) {
    .ContactPage #ContactForm form .attach {
        font-size: 16px
    }
}

.ContactPage #ContactForm form .btn {
    background: #2161ad;
    width: 100%;
    color: #fff;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 45px;
    font-size: 13px
}

.ContactPage #ContactForm form .btn:hover {
    border-color: #0c1017
}

@media only screen and (min-width: 576px) {
    .ContactPage #ContactForm form .btn {
        height: 55px;
        font-size: 14px
    }
}

@media only screen and (min-width: 1200px) {
    .ContactPage #ContactForm form .btn {
        font-size: 16px
    }
}

.ContactPage #RedirectionSec {
    text-align: center;
    border: 1px solid #e0e0e0;
    padding: 40px 0 35px
}

@media only screen and (min-width: 468px) {
    .ContactPage #RedirectionSec {
        padding: 55px 0 35px
    }
}

@media only screen and (min-width: 768px) {
    .ContactPage #RedirectionSec {
        padding: 65px 0 40px
    }
}

@media only screen and (min-width: 992px) {
    .ContactPage #RedirectionSec {
        padding: 70px 0 50px
    }
}

@media only screen and (min-width: 1551px) {
    .ContactPage #RedirectionSec {
        padding: 90px 0 60px
    }
}

.ContactPage #RedirectionSec .Info {
    font-size: 14px;
    color: #525252
}

@media only screen and (min-width: 576px) {
    .ContactPage #RedirectionSec .Info {
        font-size: 15px
    }
}

@media only screen and (min-width: 768px) {
    .ContactPage #RedirectionSec .Info {
        font-size: 16px
    }
}

@media only screen and (min-width: 1200px) {
    .ContactPage #RedirectionSec .Info {
        font-size: 18px
    }
}

.ContactPage #RedirectionSec .btn {
    border: 1px solid #0c0c0c;
    color: #2b2b2b;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    width: -moz-fit-content;
    height: 45px;
    font-size: 12px;
    margin: auto;
    margin-top: 20px
}

.ContactPage #RedirectionSec .btn:hover {
    color: #fff
}

@media only screen and (min-width: 468px) {
    .ContactPage #RedirectionSec .btn {
        height: 55px;
        font-size: 14px
    }
}

@media only screen and (min-width: 1441px) {
    .ContactPage #RedirectionSec .btn {
        padding: 0 50px;
        height: 59px;
        font-size: 16px;
        margin-top: 35px
    }
}

.ContactPage #MapSec {
    text-align: center;
    padding: 40px 0 35px
}

@media only screen and (min-width: 468px) {
    .ContactPage #MapSec {
        padding: 50px 0 45px
    }
}

@media only screen and (min-width: 768px) {
    .ContactPage #MapSec {
        padding: 65px 0 75px
    }
}

@media only screen and (min-width: 992px) {
    .ContactPage #MapSec {
        padding: 70px 0 90px
    }
}

@media only screen and (min-width: 1551px) {
    .ContactPage #MapSec {
        padding: 90px 0 120px
    }
}

.ContactPage #MapSec .Title {
    font-family: "HelveticaNeueLT 75 Roman";
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 25px;
    font-size: 14px
}

@media only screen and (min-width: 468px) {
    .ContactPage #MapSec .Title {
        font-size: 15px;
        margin-bottom: 30px
    }
}

@media only screen and (min-width: 992px) {
    .ContactPage #MapSec .Title {
        margin-bottom: 40px
    }
}

@media only screen and (min-width: 1551px) {
    .ContactPage #MapSec .Title {
        margin-bottom: 50px
    }
}

.ContactPage #MapSec iframe {
    width: 100%;
    height: 250px
}

@media only screen and (min-width: 468px) {
    .ContactPage #MapSec iframe {
        height: 360px
    }
}

@media only screen and (min-width: 942px) {
    .ContactPage #MapSec iframe {
        height: 425px
    }
}

@media only screen and (min-width: 1200px) {
    .ContactPage #MapSec iframe {
        height: 535px
    }
}

html:lang(ar) .ContactPage #AddressSec .FlexBox .Box .contact {
    padding-left: 0px;
    padding-right: 33px
}

html:lang(ar) .ContactPage #AddressSec .FlexBox .Box .contact li {
    direction: ltr
}

html:lang(ar) .ContactPage #AddressSec .FlexBox .Box .contact svg {
    left: auto;
    right: 0
}

html:lang(ar) .ContactPage #AddressSec .FlexBox .Box .time {
    padding-left: 0px;
    padding-right: 33px
}

html:lang(ar) .ContactPage #AddressSec .FlexBox .Box .time svg {
    left: auto;
    right: 0
}

html:lang(ar) .ContactPage #AddressSec .FlexBox .Box .time p {
    direction: ltr;
    text-align: right;
}

html:lang(ar) .ContactPage #AddressSec .FlexBox .Box .location svg {
    margin-left: 10px;
    margin-right: 0px
}

@media only screen and (min-width: 768px) {
    html:lang(ar) .ContactPage #AddressSec .FlexBox .Box .location svg {
        margin-left: 17px;
        margin-right: 0px
    }
}

html:lang(ar) .ContactPage #ContactSec .container .Mail .Rit {
    padding-left: 0px;
    padding-right: 18px
}

@media only screen and (min-width: 768px) {
    html:lang(ar) .ContactPage #ContactSec .container .Mail .Rit {
        padding-right: 22px;
        padding-left: 0px
    }
}

html:lang(ar) .ContactPage #ContactForm form .attach svg {
    margin-left: 12px;
    margin-right: 0px
}

#FileList {
    background: #f5f5f7;
    padding: 45px 0
}

@media only screen and (min-width: 468px) {
    #FileList {
        padding: 75px 0
    }
}

@media only screen and (min-width: 768px) {
    #FileList {
        padding: 85px 0
    }
}

@media only screen and (min-width: 992px) {
    #FileList {
        padding: 90px 0
    }
}

@media only screen and (min-width: 1551px) {
    #FileList {
        padding: 95px 0 120px
    }
}

.FileWrapper {
    background: #fff;
    height: 100%;
    padding: 30px 30px 25px
}

@media only screen and (min-width: 468px) {
    .FileWrapper {
        padding: 30px 45px 25px
    }
}

.FileWrapper .FileName {
    color: #2b2b2b;
    text-transform: uppercase;
    font-size: 18px;
    margin-bottom: 20px
}

@media only screen and (min-width: 992px) {
    .FileWrapper .FileName {
        font-size: 20px;
        margin-bottom: 30px
    }
}

.FileWrapper .BtnSec {
    display: flex;
    align-items: center;
    margin: -4.5px
}

.FileWrapper .BtnSec li {
    padding: 4.5px;
    width: 50%
}

@media only screen and (min-width: 468px) {
    .FileWrapper .BtnSec li {
        width: fit-content;
        width: -moz-fit-content
    }
}

.FileWrapper .BtnSec li a {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #535252;
    height: 33px;
    color: #0c1017;
    text-transform: uppercase;
    font-size: 11px;
    width: 100%
}

@media only screen and (min-width: 468px) {
    .FileWrapper .BtnSec li a {
        width: 117px
    }
}

@media only screen and (min-width: 992px) {
    .FileWrapper .BtnSec li a {
        font-size: 12px
    }
}

.FileWrapper .BtnSec li a:hover {
    color: #fff
}

.FileWrapper .BtnSec li:nth-child(1) a::before {
    background: #2161ad
}

#FaqList {
    background: #f5f5f7;
    padding: 45px 0
}

@media only screen and (min-width: 468px) {
    #FaqList {
        padding: 75px 0
    }
}

@media only screen and (min-width: 768px) {
    #FaqList {
        padding: 85px 0
    }
}

@media only screen and (min-width: 992px) {
    #FaqList {
        padding: 90px 0
    }
}

@media only screen and (min-width: 1551px) {
    #FaqList {
        padding: 105px 0 140px
    }
}

#FaqList .accordion-item {
    border: none;
    border-radius: 0
}

#FaqList .accordion-item:not(:last-of-type) {
    margin-bottom: 10px
}

#FaqList .accordion-header button {
    color: #2b2b2b;
    background-color: #fff;
    border: none;
    outline: none;
    box-shadow: none;
    font-size: 16px;
    padding: 25px 55px 25px 30px;
    font-family: "HelveticaNeueLT 75 Roman";
    font-weight: 500
}

@media only screen and (min-width: 576px) {
    #FaqList .accordion-header button {
        font-size: 18px;
        padding: 25px 70px 25px 48px
    }
}

#FaqList .accordion-header button::after {
    display: none
}

#FaqList .accordion-header button::before {
    content: "+";
    position: absolute;
    top: 0px;
    bottom: 0px;
    margin: auto;
    border-radius: 50%;
    background: #f5f5f7;
    width: 37px;
    height: 37px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #2161ad;
    transition: all .3s
}

#FaqList .accordion-header button[aria-expanded="true"]::before {
    content: "-"
}

#FaqList .accordion-body {
    padding: 0px 30px 20px
}

@media only screen and (min-width: 576px) {
    #FaqList .accordion-body {
        padding: 0px 48px 45px
    }
}

html:lang(en) #FaqList .accordion-header button::before {
    right: 15px
}

@media only screen and (min-width: 576px) {
    html:lang(en) #FaqList .accordion-header button::before {
        right: 25px
    }
}

html:lang(ar) #FaqList .accordion-header button {
    padding: 25px 30px 25px 55px;
    font-weight: 600
}

html:lang(ar) #FaqList .accordion-header button::before {
    left: 15px
}

@media only screen and (min-width: 576px) {
    html:lang(ar) #FaqList .accordion-header button {
        padding: 25px 48px 25px 70px
    }
    html:lang(ar) #FaqList .accordion-header button::before {
        left: 25px
    }
}

.GallPage #VideoGal {
    background: #fff;
    padding: 45px 0
}

@media only screen and (min-width: 468px) {
    .GallPage #VideoGal {
        padding: 75px 0
    }
}

@media only screen and (min-width: 768px) {
    .GallPage #VideoGal {
        padding: 85px 0
    }
}

@media only screen and (min-width: 992px) {
    .GallPage #VideoGal {
        padding: 95px 0 90px
    }
}

.GallPage #VideoGal a {
    display: block;
    text-align: center;
    cursor: pointer
}

.GallPage #VideoGal a .imgBox {
    width: 100%;
    position: relative;
    height: 195px;
    overflow: hidden
}

@media only screen and (min-width: 992px) {
    .GallPage #VideoGal a .imgBox {
        height: 270px
    }
}

.GallPage #VideoGal a .imgBox .icon {
    position: absolute;
    width: 50px;
    height: 34px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.GallPage #VideoGal a .imgBox img {
    transition: all .8s;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.GallPage #VideoGal a .InfoBox {
    padding: 20px 10px 15px
}

@media only screen and (min-width: 468px) {
    .GallPage #VideoGal a .InfoBox {
        padding: 25px 15px 20px
    }
}

@media only screen and (min-width: 992px) {
    .GallPage #VideoGal a .InfoBox {
        padding: 35px 15px 30px
    }
}

.GallPage #VideoGal a .InfoBox .Title {
    color: #1f1f1f;
    font-family: "HelveticaNeueLT 75 Roman";
    text-transform: uppercase;
    font-size: 16px;
    margin-bottom: 10px
}

@media only screen and (min-width: 468px) {
    .GallPage #VideoGal a .InfoBox .Title {
        font-size: 18px;
        margin-bottom: 13px
    }
}

.GallPage #VideoGal a .InfoBox .discrp {
    color: #616060;
    font-size: 12px
}

@media only screen and (min-width: 468px) {
    .GallPage #VideoGal a .InfoBox .discrp {
        font-size: 14px
    }
}

.GallPage #photoGal {
    background: #f5f5f6;
    padding: 45px 15px;
    position: relative
}

@media only screen and (min-width: 468px) {
    .GallPage #photoGal {
        padding: 75px 15px
    }
}

@media only screen and (min-width: 768px) {
    .GallPage #photoGal {
        padding: 85px 30px
    }
}

@media only screen and (min-width: 992px) {
    .GallPage #photoGal {
        padding: 95px 30px 90px
    }
}

.GallPage #photoGal .GalSelect {
    box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.15);
    width: 100%;
    color: #2161ad;
    font-weight: 500;
    text-transform: uppercase;
    position: absolute;
    left: 0px;
    right: 0px;
    margin: auto;
    z-index: 2;
    appearance: none;
    background: url(../images/upanddown2.svg) no-repeat #fff;
    background-position: center right 15px;
    background-size: 15px;
    height: 55px;
    font-size: 14px;
    top: -25px;
    padding: 10px 25px;
    max-width: 90%;
    text-transform: uppercase !important
}

@media only screen and (min-width: 468px) {
    .GallPage #photoGal .GalSelect {
        font-size: 17px;
        padding: 10px 30px;
        height: 65px;
        top: -35px;
        max-width: 65%;
        text-transform: uppercase !important
    }
}

@media only screen and (min-width: 768px) {
    .GallPage #photoGal .GalSelect {
        max-width: 55%;
        padding: 10px 48px
    }
}

@media only screen and (min-width: 1200px) {
    .GallPage #photoGal .GalSelect {
        max-width: 721px
    }
}

@media only screen and (min-width: 1551px) {
    .GallPage #photoGal .GalSelect {
        height: 80px;
        top: -41px
    }
}

.GallPage #photoGal a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: #fefefe;
    text-align: center
}

.GallPage #photoGal a .Img {
    position: relative;
    z-index: 1;
    background: #0c1017;
    height: 180px
}

@media only screen and (min-width: 768px) {
    .GallPage #photoGal a .Img {
        height: 265px
    }
}

.GallPage #photoGal a .Img .inner {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 1;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-transition: opacity .3s ease;
    transition: opacity .3s ease
}

.GallPage #photoGal a .CntnBox {
    position: relative;
    z-index: 2;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    text-align: center;
    background: #fefefe;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: -webkit-transform .3s ease;
    transition: -webkit-transform .3s ease;
    transition: transform .3s ease;
    transition: transform .3s ease, -webkit-transform .3s ease;
    padding: 25px 15px
}

@media only screen and (min-width: 1441px) {
    .GallPage #photoGal a .CntnBox {
        padding: 25px 35px
    }
}

.GallPage #photoGal a .CntnBox .title {
    color: #131313;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 10px;
    font-size: 17px
}

@media only screen and (min-width: 992px) {
    .GallPage #photoGal a .CntnBox .title {
        font-size: 18px;
        min-height: 44px
    }
}

.GallPage #photoGal a .CntnBox .info {
    font-size: 13px;
    color: #5d5c5c;
    line-height: 17px
}

.GallPage #photoGal a .CntnBox .Bottom {
    padding: 15px 30px 0;
    background: #fff
}

@media only screen and (min-width: 468px) {
    .GallPage #photoGal a .CntnBox .Bottom {
        padding: 0px 35px;
        position: absolute;
        top: 100%;
        right: 0;
        left: 0
    }
}

.GallPage #photoGal a .CntnBox .Bottom button {
    border: 1px solid #535252;
    background-color: #fff;
    width: 100%;
    z-index: 248;
    font-family: "HelveticaNeueLT 75 Roman";
    font-weight: 500;
    color: #0c1017;
    text-transform: uppercase;
    height: 45px;
    font-size: 13px
}

@media only screen and (min-width: 992px) {
    .GallPage #photoGal a .CntnBox .Bottom button {
        height: 50px;
        font-size: 15px
    }
}

.GallPage #photoGal a .CntnBox .Bottom button:hover {
    color: #fff
}

@media only screen and (min-width: 468px) {
    .GallPage #photoGal a:hover .Img .inner {
        opacity: .5
    }
    .GallPage #photoGal a:hover .CntnBox {
        -webkit-transform: translateY(-6rem);
        -ms-transform: translateY(-6rem);
        transform: translateY(-6rem)
    }
}

.GallPage #photoGalDtl {
    background: #fff;
    padding: 45px 0
}

@media only screen and (min-width: 468px) {
    .GallPage #photoGalDtl {
        padding: 55px 0
    }
}

@media only screen and (min-width: 768px) {
    .GallPage #photoGalDtl {
        padding: 65px 0 70px
    }
}

@media only screen and (min-width: 992px) {
    .GallPage #photoGalDtl {
        padding: 75px 0 85px
    }
}

@media only screen and (min-width: 1551px) {
    .GallPage #photoGalDtl {
        padding: 80px 0 105px
    }
}

.GallPage #photoGalDtl .GridHeader {
    border-bottom: 1px solid #e7e7e8;
    padding-bottom: 20px;
    margin-bottom: 35px
}

@media only screen and (min-width: 468px) {
    .GallPage #photoGalDtl .GridHeader {
        padding-bottom: 35px;
        margin-bottom: 55px;
        display: flex;
        align-items: center;
        justify-content: space-between
    }
}

@media only screen and (min-width: 1551px) {
    .GallPage #photoGalDtl .GridHeader {
        padding-bottom: 45px;
        margin-bottom: 70px
    }
}

.GallPage #photoGalDtl .GridHeader .filters-select {
    height: 48px;
    width: 100%;
    color: #fff;
    padding: 8px 36px 8px 12px;
    font-size: 15px;
    position: relative;
    appearance: none;
    background: url("../images/upanddown.svg") no-repeat #020202;
    background-position: center right 15px;
    background-size: 15px
}

.GallPage #photoGalDtl .GridHeader .filters-select::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: 25px;
    height: 25px;
    background: #fff
}

@media only screen and (min-width: 468px) {
    .GallPage #photoGalDtl .GridHeader .filters-select {
        width: calc(100% - 140px)
    }
}

@media only screen and (min-width: 768px) {
    .GallPage #photoGalDtl .GridHeader .filters-select {
        display: none
    }
}

.GallPage #photoGalDtl .GridHeader .filter-button-group {
    align-items: center;
    justify-content: center;
    margin: 0 -6px;
    display: none
}

@media only screen and (min-width: 768px) {
    .GallPage #photoGalDtl .GridHeader .filter-button-group {
        display: flex
    }
}

.GallPage #photoGalDtl .GridHeader .filter-button-group li {
    padding: 0 6px
}

.GallPage #photoGalDtl .GridHeader .filter-button-group button {
    border: 1px solid #dfdfdf;
    min-width: 73px;
    padding: 5px 15px;
    height: 36px;
    font-size: 14px;
    color: #55585d;
    text-transform: uppercase;
    background: none;
    outline: none;
    box-shadow: none;
    transition: all .3s
}

.GallPage #photoGalDtl .GridHeader .filter-button-group button.is-checked {
    border-color: #2161ad;
    color: #2161ad
}

.GallPage #photoGalDtl .GridHeader .Back {
    border: 1px solid #dfdfdf;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #55585d;
    text-transform: uppercase;
    font-size: 12px;
    width: 85px;
    height: 35px;
    margin: auto;
    margin-top: 15px
}

@media only screen and (min-width: 468px) {
    .GallPage #photoGalDtl .GridHeader .Back {
        margin: 0;
        font-size: 14px;
        width: 115px;
        height: 48px
    }
}

@media only screen and (min-width: 768px) {
    .GallPage #photoGalDtl .GridHeader .Back {
        height: 40px
    }
}

.GallPage #photoGalDtl .GridHeader .Back svg {
    width: 10px;
    fill: #2161ad;
    margin-top: 0
}

.GallPage #photoGalDtl .grid {
    margin: -25px 0
}

@media only screen and (min-width: 468px) {
    .GallPage #photoGalDtl .grid {
        margin: -35px 0
    }
}

.GallPage #photoGalDtl .element-item {
    width: 100%;
    padding: 25px 0
}

@media only screen and (min-width: 468px) {
    .GallPage #photoGalDtl .element-item {
        padding: 35px 0
    }
}

.GallPage #photoGalDtl .HeadSec .Title {
    color: #1d1d1d
}

.GallPage #photoGalDtl .GallGrid {
    margin: -3px;
    padding: 0px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

@media only screen and (min-width: 468px) {
    .GallPage #photoGalDtl .GallGrid {
        margin: -11px
    }
}

.GallPage #photoGalDtl .GallGrid .GalItm {
    padding: 3px;
    width: calc(100% / 2)
}

@media only screen and (min-width: 468px) {
    .GallPage #photoGalDtl .GallGrid .GalItm {
        padding: 11px
    }
}

@media only screen and (min-width: 768px) {
    .GallPage #photoGalDtl .GallGrid .GalItm {
        width: calc(100% / 3)
    }
}

@media only screen and (min-width: 992px) {
    .GallPage #photoGalDtl .GallGrid .GalItm {
        width: calc(100% / 4)
    }
}

@media only screen and (min-width: 1200px) {
    .GallPage #photoGalDtl .GallGrid .GalItm {
        width: calc(100% / 5)
    }
}

.GallPage #photoGalDtl .GallGrid .GalItm .ImgBox {
    overflow: hidden;
    display: block;
    position: relative;
    background: #020202;
    height: 145px
}

@media only screen and (min-width: 468px) {
    .GallPage #photoGalDtl .GallGrid .GalItm .ImgBox {
        height: 265px
    }
}

.GallPage #photoGalDtl .GallGrid .GalItm .ImgBox .Lazyimage {
    transition: all .3s
}

.GallPage #photoGalDtl .GallGrid .GalItm .ImgBox .Lazyimage img {
    transition: all .8s
}

.GallPage #photoGalDtl .GallGrid .GalItm .ImgBox svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    fill: #fff;
    width: 40px;
    height: 40px;
    opacity: 0;
    transition: all .3s
}

.GallPage #photoGalDtl .GallGrid .GalItm .ImgBox:hover .Lazyimage {
    opacity: .3
}

.GallPage #photoGalDtl .GallGrid .GalItm .ImgBox:hover .Lazyimage img {
    transform: scale(1.3)
}

.GallPage #photoGalDtl .GallGrid .GalItm .ImgBox:hover svg {
    opacity: 1
}

html:lang(en) .GallPage #photoGalDtl .GridHeader .Back {
    margin-right: 0
}

html:lang(en) .GallPage #photoGalDtl .GridHeader .Back svg {
    margin-right: 7px
}

@media only screen and (min-width: 468px) {
    html:lang(en) .GallPage #photoGalDtl .GridHeader .Back svg {
        margin-right: 12px
    }
}

html:lang(ar) a .CntnBox .title {
    font-weight: 700
}

html:lang(ar) .GallPage #photoGalDtl .GridHeader .filters-select {
    background-position: center left 15px
}

html:lang(ar) .GallPage #photoGalDtl .GridHeader .Back {
    margin-left: 0
}

html:lang(ar) .GallPage #photoGalDtl .GridHeader .Back svg {
    transform: rotate(180deg);
    margin-left: 7px
}

@media only screen and (min-width: 468px) {
    html:lang(ar) .GallPage #photoGalDtl .GridHeader .Back svg {
        margin-left: 12px
    }
}

.AwardsPage #AwardsSec {
    background-color: #f5f5f7;
    padding: 45px 0
}

@media only screen and (min-width: 468px) {
    .AwardsPage #AwardsSec {
        padding: 75px 0
    }
}

@media only screen and (min-width: 768px) {
    .AwardsPage #AwardsSec {
        padding: 85px 0
    }
}

@media only screen and (min-width: 992px) {
    .AwardsPage #AwardsSec {
        padding: 90px 0
    }
}

@media only screen and (min-width: 1551px) {
    .AwardsPage #AwardsSec {
        padding: 90px 0 120px
    }
}

.AwardsPage #AwardsSec .FixedNav2 .container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px
}

@media only screen and (min-width: 468px) {
    .AwardsPage #AwardsSec .FixedNav2 .container {
        margin-bottom: 35px
    }
}

@media only screen and (min-width: 768px) {
    .AwardsPage #AwardsSec .FixedNav2 .container {
        padding: 0 60px;
        margin-bottom: 50px
    }
}

@media only screen and (min-width: 1551px) {
    .AwardsPage #AwardsSec .FixedNav2 .container {
        padding: 0 108px;
        margin-bottom: 70px
    }
}

.AwardsPage #AwardsSec .FixedNav2 .accordion-header {
    width: 50%
}

.AwardsPage #AwardsSec .FixedNav2 .accordion-header button {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    width: 100%;
    color: #535252;
    text-transform: uppercase;
    outline: none;
    border: none;
    box-shadow: none;
    height: 48px;
    font-size: 13px
}

@media only screen and (min-width: 468px) {
    .AwardsPage #AwardsSec .FixedNav2 .accordion-header button {
        height: 60px;
        font-size: 14px
    }
}

@media only screen and (min-width: 992px) {
    .AwardsPage #AwardsSec .FixedNav2 .accordion-header button {
        height: 68px;
        font-size: 16px
    }
}

.AwardsPage #AwardsSec .FixedNav2 .accordion-header button::after {
    display: none
}

.AwardsPage #AwardsSec .FixedNav2 .accordion-header button[aria-expanded="true"] {
    color: #2161ad;
    pointer-events: none
}

.AwardsPage #AwardsSec .FixedNav2 .accordion-header:not(:last-of-type) button {
    border-right: 1px solid #d7d5d5
}

.AwardsPage #AwardsSec .accordion-item {
    border: none;
    background: none
}

.AwardsPage #AwardsSec .accordion-item .accordion-header {
    display: none
}

.AwardsPage #AwardsSec .accordion-body {
    padding: 0
}

.AwardsPage #AwardsSec .EventBox {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: #fff
}

.AwardsPage #AwardsSec .EventBox .ImgBox {
    position: relative;
    z-index: 1;
    width: 100%;
    transition: all .3s;
    height: 190px;
    overflow: hidden
}

@media only screen and (min-width: 1200px) {
    .AwardsPage #AwardsSec .EventBox .ImgBox {
        height: 220px
    }
}

@media only screen and (min-width: 1441px) {
    .AwardsPage #AwardsSec .EventBox .ImgBox {
        height: 258px
    }
}

@media only screen and (min-width: 1551px) {
    .AwardsPage #AwardsSec .EventBox .ImgBox {
        height: 277px
    }
}

.AwardsPage #AwardsSec .EventBox .ImgBox img {
    transition: all .8s !important;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.AwardsPage #AwardsSec .EventBox .CntnBox {
    background: #fff;
    position: relative;
    z-index: 1;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-transition: -webkit-transform .3s ease;
    transition: -webkit-transform .3s ease;
    transition: transform .3s ease;
    transition: transform .3s ease, -webkit-transform .3s ease;
    padding: 25px 25px 20px
}

@media only screen and (min-width: 1200px) {
    .AwardsPage #AwardsSec .EventBox .CntnBox {
        padding: 25px 30px 30px
    }
}

.AwardsPage #AwardsSec .EventBox .CntnBox .Tag {
    color: #929191;
    margin-bottom: 15px;
    font-size: 14px
}

@media only screen and (min-width: 768px) {
    .AwardsPage #AwardsSec .EventBox .CntnBox .Tag {
        font-size: 16px
    }
}

@media only screen and (min-width: 1200px) {
    .AwardsPage #AwardsSec .EventBox .CntnBox .Tag {
        margin-bottom: 25px
    }
}

.AwardsPage #AwardsSec .EventBox .CntnBox .EventName {
    color: #1f1f1f;
    line-height: 24px;
    font-size: 15px
}

@media only screen and (min-width: 768px) {
    .AwardsPage #AwardsSec .EventBox .CntnBox .EventName {
        line-height: 28px;
        font-size: 18px
    }
}

@media only screen and (min-width: 1200px) {
    .AwardsPage #AwardsSec .EventBox .CntnBox .EventName {
        font-size: 20px
    }
}

.AwardsPage #AwardsSec .EventBox .CntnBox .Info {
    color: #6c6969;
    position: absolute;
    background: #fff;
    top: 100%;
    right: 0;
    left: 0;
    z-index: 0;
    padding: 0 25px;
    font-size: 14px;
    line-height: 24px;
    transition: all .3s;
    opacity: 1;
    text-align: justify
}

@media only screen and (min-width: 1200px) {
    .AwardsPage #AwardsSec .EventBox .CntnBox .Info {
        padding: 0 30px;
        font-size: 16px;
        line-height: 28px
    }
}

.AwardsPage #AwardsSec .EventBox .BoxFoot {
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #dddbdb;
    margin: 0 30px;
    position: relative;
    z-index: 2;
    padding: 20px 0
}

@media only screen and (min-width: 1200px) {
    .AwardsPage #AwardsSec .EventBox .BoxFoot {
        padding: 25px 0
    }
}

.AwardsPage #AwardsSec .EventBox .BoxFoot .Date {
    font-size: 14px;
    color: #929191
}

@media only screen and (min-width: 1200px) {
    .AwardsPage #AwardsSec .EventBox .BoxFoot .Date {
        font-size: 16px
    }
}

.AwardsPage #AwardsSec .EventBox .BoxFoot .arrow svg {
    fill: #1c1b1b;
    width: 12px
}

@media only screen and (min-width: 1200px) {
    .AwardsPage #AwardsSec .EventBox .BoxFoot .arrow svg {
        width: 17px
    }
}

.AwardsPage #AwardsSec .EventBox:hover .ImgBox img {
    transform: scale(1.2)
}

.AwardsPage #AwardsSec .EventBox:hover .CntnBox .Info {
    opacity: 1
}

.AwardsPage #AwardsSec .EventBox:hover .BoxFoot .arrow svg {
    color: #2161ad
}

html:lang(ar) .AwardsPage #AwardsSec .FixedNav2 .accordion-header button {
    font-weight: 600
}

html:lang(ar) .AwardsPage #AwardsSec .FixedNav2 .accordion-header:not(:last-of-type) button {
    border-right: 0px solid;
    border-left: 1px solid #d7d5d5
}

html:lang(ar) .AwardsPage #AwardsSec .EventBox .CntnBox .EventName {
    font-weight: 600
}

.CareersPage #Careerpost {
    background-color: #f5f5f7;
    padding: 45px 0
}

@media only screen and (min-width: 468px) {
    .CareersPage #Careerpost {
        padding: 55px 0
    }
}

@media only screen and (min-width: 768px) {
    .CareersPage #Careerpost {
        padding: 65px 0
    }
}

@media only screen and (min-width: 992px) {
    .CareersPage #Careerpost {
        padding: 70px 0 80px
    }
}

@media only screen and (min-width: 1551px) {
    .CareersPage #Careerpost {
        padding: 80px 0 110px
    }
}

@media only screen and (min-width: 992px) {
    .CareersPage #Careerpost .container {
        padding: 0 60px
    }
}

@media only screen and (min-width: 1551px) {
    .CareersPage #Careerpost .container {
        padding: 0 108px
    }
}

.CareersPage #Careerpost .Itm:not(:last-of-type) {
    margin-bottom: 20px
}

.CareersPage #Careerpost .Box {
    padding: 25px;
    background: #fff;
    text-align: center
}

@media only screen and (min-width: 468px) {
    .CareersPage #Careerpost .Box {
        text-align: inherit;
        padding: 35px 25px
    }
}

@media only screen and (min-width: 768px) {
    .CareersPage #Careerpost .Box {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap
    }
}

@media only screen and (min-width: 1200px) {
    .CareersPage #Careerpost .Box {
        padding: 45px
    }
}

.CareersPage #Careerpost .Box .Date {
    border-radius: 50%;
    background-color: #f5f5f6;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #171616;
    text-align: center;
    width: 90px;
    height: 90px;
    font-size: 15px;
    padding: 10px;
    margin: auto
}

@media only screen and (min-width: 468px) {
    .CareersPage #Careerpost .Box .Date {
        margin: 0;
        width: 113px;
        height: 113px;
        font-size: 18px;
        padding: 18px
    }
}

.CareersPage #Careerpost .Box .RitSec {
    width: 100%;
    padding-top: 15px
}

@media only screen and (min-width: 468px) {
    .CareersPage #Careerpost .Box .RitSec {
        padding-top: 25px
    }
}

@media only screen and (min-width: 768px) {
    .CareersPage #Careerpost .Box .RitSec {
        width: calc(100% - 113px);
        padding-top: 0px;
        padding-left: 25px
    }
}

@media only screen and (min-width: 1200px) {
    .CareersPage #Careerpost .Box .RitSec {
        padding-left: 45px
    }
}

.CareersPage #Careerpost .Box .RitSec .post {
    font-family: "HelveticaNeueLT 65";
    color: #2b2b2b;
    text-transform: uppercase;
    font-size: 18px;
    margin-bottom: 8px
}

@media only screen and (min-width: 468px) {
    .CareersPage #Careerpost .Box .RitSec .post {
        font-size: 21px;
        margin-bottom: 10px
    }
}

@media only screen and (min-width: 1551px) {
    .CareersPage #Careerpost .Box .RitSec .post {
        font-size: 24px;
        margin-bottom: 13px
    }
}

.CareersPage #Careerpost .Box .RitSec .msg {
    color: #2b2b2b;
    font-size: 13px
}

@media only screen and (min-width: 468px) {
    .CareersPage #Careerpost .Box .RitSec .msg {
        font-size: 14px
    }
}

@media only screen and (min-width: 1551px) {
    .CareersPage #Careerpost .Box .RitSec .msg {
        font-size: 16px
    }
}

.CareersPage #Careerpost .Box .RitSec .info {
    padding: 10px 0;
    border-top: 1px solid #e9e9e9;
    border-bottom: 1px solid #e9e9e9;
    margin: 15px 0
}

@media only screen and (min-width: 768px) {
    .CareersPage #Careerpost .Box .RitSec .info {
        display: flex;
        align-items: center;
        justify-content: space-between
    }
}

@media only screen and (min-width: 1551px) {
    .CareersPage #Careerpost .Box .RitSec .info {
        padding: 20px 0;
        margin: 20px 0px
    }
}

.CareersPage #Careerpost .Box .RitSec .info li {
    width: 100%;
    color: #7b7e82;
    font-size: 14px
}

.CareersPage #Careerpost .Box .RitSec .info li:not(:last-of-type) {
    margin-bottom: 15px
}

@media only screen and (min-width: 768px) {
    .CareersPage #Careerpost .Box .RitSec .info li {
        width: calc(100% / 3)
    }
    .CareersPage #Careerpost .Box .RitSec .info li:not(:last-of-type) {
        margin-bottom: 0px
    }
}

@media only screen and (min-width: 1551px) {
    .CareersPage #Careerpost .Box .RitSec .info li {
        font-size: 16px
    }
}

.CareersPage #Careerpost .Box .RitSec .info li span {
    color: #2b2b2b;
    display: block;
    margin-top: 5px
}

@media only screen and (min-width: 768px) {
    .CareersPage #Careerpost .Box .RitSec .info li span {
        margin-top: 0px;
        margin: 0 5px;
        display: inline-block
    }
}

.CareersPage #Careerpost .Box .RitSec .content {
    overflow: hidden;
    transition: max-height .2s ease-out
}

.CareersPage #Careerpost .Box .RitSec .content:not(.show) {
    display: none
}

.CareersPage #Careerpost .Box .RitSec .BtnSec {
    display: flex;
    align-items: center;
    margin: -7.5px
}

.CareersPage #Careerpost .Box .RitSec .BtnSec li {
    padding: 7.5px;
    width: 100%
}

@media only screen and (min-width: 576px) {
    .CareersPage #Careerpost .Box .RitSec .BtnSec li {
        width: fit-content;
        width: -moz-fit-content
    }
}

.CareersPage #Careerpost .Box .RitSec .BtnSec li a {
    border: 1px solid #535252;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0c1017;
    text-transform: uppercase;
    font-size: 13px;
    width: 100%;
    height: 40px
}

@media only screen and (min-width: 468px) {
    .CareersPage #Careerpost .Box .RitSec .BtnSec li a {
        height: 45px
    }
}

@media only screen and (min-width: 576px) {
    .CareersPage #Careerpost .Box .RitSec .BtnSec li a {
        width: 190px
    }
}

@media only screen and (min-width: 1551px) {
    .CareersPage #Careerpost .Box .RitSec .BtnSec li a {
        font-size: 15px;
        height: 55px
    }
}

.CareersPage #Careerpost .Box .RitSec .BtnSec li a::before {
    background: #2161ad
}

.CareersPage #Careerpost .Box .RitSec .BtnSec li a:hover {
    border-color: #2161ad;
    color: #fff
}

.CareersPage #Careerpost .Box .RitSec .BtnSec li:nth-child(1) a {
    background: #020202;
    color: #fff
}

.CareersPage #CareerForm {
    background: #fff;
    padding: 45px 0
}

@media only screen and (min-width: 468px) {
    .CareersPage #CareerForm {
        padding: 55px 0
    }
}

@media only screen and (min-width: 768px) {
    .CareersPage #CareerForm {
        padding: 65px 0
    }
}

@media only screen and (min-width: 992px) {
    .CareersPage #CareerForm {
        padding: 70px 0 80
    }
}

@media only screen and (min-width: 1551px) {
    .CareersPage #CareerForm {
        padding: 90px 0 100px
    }
}

@media only screen and (min-width: 992px) {
    .CareersPage #CareerForm .container {
        padding: 0 60px
    }
}

@media only screen and (min-width: 1551px) {
    .CareersPage #CareerForm .container {
        padding: 0 108px
    }
}

.CareersPage #CareerForm .Title {
    color: #3a3a3a;
    font-weight: 600;
    text-transform: uppercase;
    position: relative;
    font-size: 14px;
    padding-left: 40px;
    letter-spacing: 1px;
    margin-bottom: 15px
}

@media only screen and (min-width: 468px) {
    .CareersPage #CareerForm .Title {
        font-size: 15px;
        padding-left: 47px
    }
}

@media only screen and (min-width: 768px) {
    .CareersPage #CareerForm .Title {
        margin-bottom: 45px
    }
}

.CareersPage #CareerForm .Title::before {
    content: "";
    position: absolute;
    left: 0px;
    top: 0px;
    bottom: 0;
    margin: auto;
    background: #2161ad;
    width: 24px;
    height: 2px
}

.CareersPage #CareerForm form .form-group {
    margin-bottom: 12px
}

.CareersPage #CareerForm form .form-control {
    border: 1px solid #c7c7c7
}

.CareersPage #CareerForm form .btn {
    background-color: #2161ad;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    color: #fff;
    text-transform: uppercase;
    width: 165px;
    height: 45px;
    font-size: 12px
}

@media only screen and (min-width: 468px) {
    .CareersPage #CareerForm form .btn {
        width: 175px;
        height: 55px;
        font-size: 14px
    }
}

@media only screen and (min-width: 1441px) {
    .CareersPage #CareerForm form .btn {
        width: 195px;
        height: 59px;
        font-size: 16px
    }
}

@media only screen and (min-width: 576px) {
    .CareersPage #CareerForm form textarea.form-control {
        min-height: 213px
    }
}

@media only screen and (min-width: 768px) {
    html:lang(ar) .CareersPage #Careerpost .Box .RitSec {
        padding-left: 0;
        padding-right: 25px
    }
}

@media only screen and (min-width: 1200px) {
    html:lang(ar) .CareersPage #Careerpost .Box .RitSec {
        padding-left: 0;
        padding-right: 45px
    }
}

html:lang(ar) .CareersPage #CareerForm .Title {
    font-weight: 700;
    padding-left: 0px;
    padding-right: 40px
}

html:lang(ar) .CareersPage #CareerForm .Title::before {
    left: auto;
    right: 0
}

@media only screen and (min-width: 468px) {
    html:lang(ar) .CareersPage #CareerForm .Title {
        padding-left: 0px;
        padding-right: 47px
    }
}

.JobModal {
    padding: 0px;
    background: rgba(0, 0, 0, 0.17)
}

.JobModal .modal-dialog {
    max-width: none;
    margin: 0;
    -webkit-transform: translate(0, 0px);
    transform: translate(0, 0px)
}

@media only screen and (min-width: 768px) {
    .JobModal .modal-dialog {
        max-width: 610px;
        margin: auto;
        height: 100vh;
        display: flex;
        align-items: center
    }
}

.JobModal .modal-content {
    border: none;
    background: none;
    height: 100vh
}

@media only screen and (min-width: 768px) {
    .JobModal .modal-content {
        height: auto
    }
}

.JobModal .ModalHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 19px 15px;
    position: relative;
    border-bottom: 1px solid #e8ebf0;
    background: #2161ad;
    display: flex
}

.JobModal .ModalHeader .title {
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    color: #fff
}

.JobModal .ModalHeader .title svg {
    width: 19px;
    margin: 0 13px;
    fill: #fff
}

.JobModal .ModalHeader .close {
    border-radius: 0px;
    border: none;
    outline: none;
    box-shadow: none;
    font-size: 23px;
    padding: 0;
    width: 45px;
    position: absolute;
    right: 0;
    height: 100%;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #2b2d2d;
    font-size: 28px;
    color: #fff
}

.JobModal .modal-body {
    background: #fff;
    padding: 35px 30px 25px
}

@media only screen and (min-width: 576px) {
    .JobModal .modal-body {
        padding: 25px 15px 15px
    }
}

.JobModal .modal-body form .form-group {
    margin-bottom: 12px
}

.JobModal .modal-body form .form-control {
    border: 1px solid #c7c7c7
}

@media only screen and (min-width: 576px) {
    .JobModal .modal-body form label {
        font-size: 15px;
        margin-bottom: 9px
    }
}

.JobModal .modal-body form .form-control,
.JobModal .modal-body form .select2-selection {
    color: #000;
    box-shadow: none;
    outline: none
}

@media only screen and (min-width: 576px) {
    .JobModal .modal-body form .form-control,
    .JobModal .modal-body form .select2-selection {
        height: 45px
    }
}

@media only screen and (min-width: 1200px) {
    .JobModal .modal-body form .form-control,
    .JobModal .modal-body form .select2-selection {
        font-size: 14px
    }
}

.JobModal .modal-body form .form-control:-webkit-autofill,
.JobModal .modal-body form .form-control:-webkit-autofill:hover,
.JobModal .modal-body form .form-control:-webkit-autofill:focus,
.JobModal .modal-body form .form-control:-internal-autofill-selected,
.JobModal .modal-body form .select2-selection:-webkit-autofill,
.JobModal .modal-body form .select2-selection:-webkit-autofill:hover,
.JobModal .modal-body form .select2-selection:-webkit-autofill:focus,
.JobModal .modal-body form .select2-selection:-internal-autofill-selected {
    -webkit-text-fill-color: #000 !important
}

.JobModal .modal-body form input[type="file"] {
    margin: 0;
    display: block;
    font-size: 14px
}

@media only screen and (min-width: 768px) {
    .JobModal .modal-body form input[type="file"] {
        margin-top: 10px
    }
}

.JobModal .modal-body form .btn {
    background: #0c1017;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-transform: uppercase;
    height: 45px;
    font-size: 12px;
    width: 100%
}

.JobModal .modal-body form .btn::before {
    background: #2161ad
}

@media only screen and (min-width: 468px) {
    .JobModal .modal-body form .btn {
        width: 165px
    }
}

@media only screen and (min-width: 576px) {
    .JobModal .modal-body form textarea.form-control {
        min-height: 213px
    }
}

.factoryPage #TopSec {
    background: #f5f5f6;
    padding: 45px 0 30px
}

@media only screen and (min-width: 468px) {
    .factoryPage #TopSec {
        padding: 55px 0
    }
}

@media only screen and (min-width: 768px) {
    .factoryPage #TopSec {
        padding: 65px 0 70px
    }
}

@media only screen and (min-width: 992px) {
    .factoryPage #TopSec {
        padding: 75px 0 85px
    }
}

@media only screen and (min-width: 1200px) {
    .factoryPage #TopSec {
        padding: 100px 0 80px
    }
}

@media only screen and (min-width: 1441px) {
    .factoryPage #TopSec {
        padding: 130px 0 95px
    }
}

.factoryPage #SplitSec {
    background: #fff;
    padding: 45px 0 30px;
    margin: -15px 0
}

@media only screen and (min-width: 468px) {
    .factoryPage #SplitSec {
        padding: 55px 0;
        margin: -35px 0
    }
}

@media only screen and (min-width: 768px) {
    .factoryPage #SplitSec {
        padding: 65px 0 70px
    }
}

@media only screen and (min-width: 992px) {
    .factoryPage #SplitSec {
        padding: 75px 0 85px
    }
}

@media only screen and (min-width: 1200px) {
    .factoryPage #SplitSec {
        padding: 80px 0 80px
    }
}

@media only screen and (min-width: 1441px) {
    .factoryPage #SplitSec {
        padding: 80px 0 95px
    }
}

.factoryPage #SplitSec .ComTitle {
    width: fit-content;
    width: -moz-fit-content
}

.factoryPage #SplitSec .Item {
    padding: 15px 0
}

@media only screen and (min-width: 468px) {
    .factoryPage #SplitSec .Item {
        padding: 35px 0
    }
}

.factoryPage #SplitSec .Item .CntnSec {
    width: 100%
}

@media only screen and (min-width: 992px) {
    .factoryPage #SplitSec .Item .CntnSec {
        width: calc(100% - 405px)
    }
}

@media only screen and (min-width: 1200px) {
    .factoryPage #SplitSec .Item .CntnSec {
        width: calc(100% - 480px)
    }
}

@media only screen and (min-width: 1441px) {
    .factoryPage #SplitSec .Item .CntnSec {
        width: calc(100% - 540px)
    }
}

.factoryPage #SplitSec .Item .CntnSec p {
    color: #666
}

@media only screen and (min-width: 768px) {
    .factoryPage #SplitSec .Item .CntnSec p {
        font-size: 15px
    }
}

@media only screen and (min-width: 1441px) {
    .factoryPage #SplitSec .Item .CntnSec p {
        font-size: 16px;
        line-height: 30px
    }
}

.factoryPage #SplitSec .Item .CntnSec p strong {
    color: #343434
}

@media only screen and (min-width: 768px) {
    .factoryPage #SplitSec .Item .CntnSec p strong {
        font-size: 18px;
        line-height: 28px
    }
}

@media only screen and (min-width: 1441px) {
    .factoryPage #SplitSec .Item .CntnSec p strong {
        font-size: 20px;
        line-height: 30px
    }
}

.factoryPage #SplitSec .Item .ImgBox {
    overflow: hidden;
    width: 100%;
    margin-bottom: 25px;
    height: 230px
}

@media only screen and (min-width: 768px) {
    .factoryPage #SplitSec .Item .ImgBox {
        display: block;
        width: 350px
    }
}

@media only screen and (min-width: 992px) {
    .factoryPage #SplitSec .Item .ImgBox {
        margin-bottom: 0px;
        width: 405px;
        height: 100%
    }
}

@media only screen and (min-width: 1200px) {
    .factoryPage #SplitSec .Item .ImgBox {
        width: 480px
    }
}

@media only screen and (min-width: 1441px) {
    .factoryPage #SplitSec .Item .ImgBox {
        width: 540px
    }
}

.factoryPage #SplitSec .Item .row {
    margin: 0 -25px
}

.factoryPage #SplitSec .Item .row>* {
    padding: 0 25px
}

html:lang(en) .factoryPage #SplitSec .Item:nth-child(even) {
    direction: rtl
}

html:lang(en) .factoryPage #SplitSec .Item:nth-child(even) .CntnSec {
    direction: ltr
}

html:lang(ar) .factoryPage #SplitSec .Item:nth-child(even) {
    direction: ltr
}

html:lang(ar) .factoryPage #SplitSec .Item:nth-child(even) .CntnSec {
    direction: rtl
}

.error_page section {
    background: #fff
}

.error_page .row {
    margin: 0
}

.error_page .page_cntnt {
    padding: 40px 0 70px;
    text-align: center;
    margin: auto
}

@media only screen and (min-width: 468px) {
    .error_page .page_cntnt {
        padding: 80px 0 120px
    }
}

.error_page .head_one {
    font-size: 69px;
    font-weight: 700;
    color: #2161ad;
    letter-spacing: 1px
}

@media only screen and (min-width: 468px) {
    .error_page .head_one {
        font-size: 95px
    }
}

.error_page .head_two {
    font-size: 14px;
    font-weight: 600;
    color: #060606;
    margin-bottom: 30px;
    letter-spacing: 1px
}

@media only screen and (min-width: 468px) {
    .error_page .head_two {
        font-size: 20px;
        margin-bottom: 40px
    }
}

.error_page .head_three {
    font-size: 16px;
    line-height: normal;
    letter-spacing: 1px;
    font-weight: 600;
    color: #060606;
    margin-bottom: 15px
}

@media only screen and (min-width: 468px) {
    .error_page .head_three {
        font-size: 25px
    }
}

.error_page p {
    color: #666;
    margin: 0px
}

.error_page .Knowmore {
    background: #2161ad;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-transform: uppercase;
    margin: auto;
    margin-top: 30px;
    width: 165px;
    height: 45px;
    font-size: 12px
}

@media only screen and (min-width: 468px) {
    .error_page .Knowmore {
        margin: auto;
        margin-top: 50px;
        width: 175px;
        height: 55px;
        font-size: 14px
    }
}

@media only screen and (min-width: 1441px) {
    .error_page .Knowmore {
        width: 195px;
        height: 59px;
        font-size: 16px
    }
}

footer {
    background: #000
}

footer .FootTop {
    border-bottom: 1px solid rgba(245, 245, 246, 0.2);
    padding: 40px 0 35px
}

@media only screen and (min-width: 468px) {
    footer .FootTop {
        padding: 55px 0 50px
    }
}

@media only screen and (min-width: 992px) {
    footer .FootTop {
        display: flex;
        align-items: center;
        justify-content: space-between
    }
}

footer .FootTop .Title {
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    position: relative;
    font-size: 14px;
    padding-left: 40px;
    letter-spacing: 1px;
    display: none
}

@media only screen and (min-width: 468px) {
    footer .FootTop .Title {
        font-size: 15px;
        padding-left: 47px
    }
}

@media only screen and (min-width: 992px) {
    footer .FootTop .Title {
        display: block
    }
}

footer .FootTop .Title::before {
    content: "";
    position: absolute;
    left: 0px;
    top: 0px;
    bottom: 0;
    margin: auto;
    background: #2161ad;
    width: 24px;
    height: 2px
}

footer .FootTop ul {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    margin: -15px
}

@media only screen and (min-width: 768px) {
    footer .FootTop ul {
        margin: -5px
    }
}

@media only screen and (min-width: 992px) {
    footer .FootTop ul {
        width: 75%
    }
}

footer .FootTop ul li {
    padding: 15px;
    width: calc(100% / 2)
}

@media only screen and (min-width: 768px) {
    footer .FootTop ul li {
        padding: 5px;
        width: calc(100% / 4)
    }
}

footer .FootTop ul a {
    display: block;
    color: #fff;
    text-transform: uppercase
}

@media only screen and (min-width: 468px) {
    footer .FootTop ul a {
        display: flex;
        align-items: center
    }
}

footer .FootTop ul a>* {
    padding: 6px 0
}

@media only screen and (min-width: 468px) {
    footer .FootTop ul a>* {
        padding: 0 6px
    }
}

footer .FootTop ul a .icon svg {
    fill: #2161ad;
    width: 28px
}

footer .FootTop ul a .icon svg path {
    transform-origin: 50% 50%
}

footer .FootTop ul a .Flex .label {
    margin-bottom: 7px;
    font-size: 13px
}

@media only screen and (min-width: 1200px) {
    footer .FootTop ul a .Flex .label {
        font-size: 15px
    }
}

footer .FootTop ul a .Flex .Nbr {
    font-family: "HelveticaNeueLT 75 Roman";
    font-weight: 500;
    transition: all .3s;
    font-size: 14px
}

@media only screen and (min-width: 1200px) {
    footer .FootTop ul a .Flex .Nbr {
        font-size: 16px
    }
}

footer .FootTop ul a:hover .icon svg path {
    transform-origin: 50% 50%;
    -webkit-animation: ring 2s infinite ease-in-out;
    animation: ring 2s infinite ease-in-out
}

@keyframes ring {
    0% {
        transform: rotate(0) scale(1) skew(1deg) scale(.9)
    }
    10% {
        transform: rotate(-15deg) scale(1) skew(1deg) scale(.9)
    }
    20% {
        transform: rotate(15deg) scale(1) skew(1deg) scale(.9)
    }
    30% {
        transform: rotate(-15deg) scale(1) skew(1deg) scale(.9)
    }
    40% {
        transform: rotate(15deg) scale(1) skew(1deg) scale(.9)
    }
    50% {
        transform: rotate(0) scale(1) skew(1deg) scale(.9)
    }
    100% {
        transform: rotate(0) scale(1) skew(1deg) scale(.9)
    }
}

footer .FootTop ul a:hover .Flex .Nbr {
    color: #2161ad
}

footer .FootCenter {
    padding: 35px 0
}

@media only screen and (min-width: 468px) {
    footer .FootCenter {
        padding: 35px 0 50px
    }
}

footer .FootCenter .BtnLinks {
    margin: -7px -15px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

@media only screen and (min-width: 468px) {
    footer .FootCenter .BtnLinks {
        margin: -15px
    }
}

footer .FootCenter .BtnLinks li {
    width: 100%;
    padding: 7px 15px
}

@media only screen and (min-width: 468px) {
    footer .FootCenter .BtnLinks li {
        padding: 15px;
        width: calc(100% / 2)
    }
}

@media only screen and (min-width: 992px) {
    footer .FootCenter .BtnLinks li {
        width: calc(100% / 4)
    }
}

footer .FootCenter .BtnLinks a {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #313131;
    width: 100%;
    height: 46px;
    font-size: 12px;
    color: #fff;
    text-transform: uppercase;
    padding: 5px;
    letter-spacing: .6px
}

footer .FootCenter .BtnLinks a::before {
    background: #2161ad
}

footer .FootCenter .BtnLinks a.active {
    background: #2161ad
}

footer .FootCenterRow {
    margin: -20px -15px;
    margin-top: 35px;
    display: none
}

@media only screen and (min-width: 468px) {
    footer .FootCenterRow {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap
    }
}

footer .FootCenterRow .itm {
    width: 100%;
    padding: 20px 15px
}

footer .FootCenterRow .itm:nth-child(1) {
    width: 100%
}

@media only screen and (min-width: 992px) {
    footer .FootCenterRow .itm:nth-child(1) {
        width: 25.57%
    }
}

footer .FootCenterRow .itm:nth-child(2) {
    width: 50%
}

@media only screen and (min-width: 768px) {
    footer .FootCenterRow .itm:nth-child(2) {
        width: 25%
    }
}

@media only screen and (min-width: 992px) {
    footer .FootCenterRow .itm:nth-child(2) {
        width: 18.23%
    }
}

@media only screen and (min-width: 1551px) {
    footer .FootCenterRow .itm:nth-child(2) {
        width: 19.57%
    }
}

footer .FootCenterRow .itm:nth-child(3) {
    width: 50%
}

@media only screen and (min-width: 768px) {
    footer .FootCenterRow .itm:nth-child(3) {
        width: 25%
    }
}

@media only screen and (min-width: 992px) {
    footer .FootCenterRow .itm:nth-child(3) {
        width: 18.23%
    }
}

@media only screen and (min-width: 1551px) {
    footer .FootCenterRow .itm:nth-child(3) {
        width: 19.57%
    }
}

footer .FootCenterRow .itm:nth-child(4) {
    width: 50%
}

@media only screen and (min-width: 768px) {
    footer .FootCenterRow .itm:nth-child(4) {
        width: 25%
    }
}

@media only screen and (min-width: 992px) {
    footer .FootCenterRow .itm:nth-child(4) {
        width: 18.23%
    }
}

@media only screen and (min-width: 1551px) {
    footer .FootCenterRow .itm:nth-child(4) {
        width: 16.973%
    }
}

footer .FootCenterRow .itm:nth-child(5) {
    width: 50%
}

@media only screen and (min-width: 768px) {
    footer .FootCenterRow .itm:nth-child(5) {
        width: 25%
    }
}

@media only screen and (min-width: 992px) {
    footer .FootCenterRow .itm:nth-child(5) {
        width: 17.681%
    }
}

footer .FootCenterRow .logo {
    display: block;
    width: 155px;
    margin-bottom: 20px
}

@media only screen and (min-width: 468px) {
    footer .FootCenterRow .logo {
        /* width: 170px; */
        width: 235px;
        margin-bottom: 30px
    }
}

footer .FootCenterRow .logo .en .st0 {
    fill: #fff
}

footer .FootCenterRow .logo .en .st1 {
    fill-rule: evenodd;
    clip-rule: evenodd;
    fill: #fff
}

footer .FootCenterRow .logo .en .st2 {
    fill-rule: evenodd;
    clip-rule: evenodd;
    fill: url(#SVGID_1_);
}

footer .FootCenterRow .logo .en .st3 {
    fill-rule: evenodd;
    clip-rule: evenodd;
    fill: url(#SVGID_00000075844214921967055530000010595909276358042292_);
}

footer .FootCenterRow .logo .en .st4 {
    fill: #fff
}

footer .FootCenterRow .logo .ar .st0 {
    fill: #fff
}

footer .FootCenterRow .logo .ar .st1,
footer .FootCenterRow .logo .ar .st4 {
    fill: #fff
}

footer .FootCenterRow p {
    font-size: 14px;
    color: #d7d7d7;
    line-height: 26px;
    margin: 0
}

@media only screen and (min-width: 1200px) {
    footer .FootCenterRow p {
        width: 79%
    }
}

footer .FootCenterRow .Dwnld {
    display: flex;
    align-items: center;
    width: fit-content;
    width: -moz-fit-content;
    font-size: 11px;
    color: #fff;
    letter-spacing: .6px;
    margin-top: 35px;
    padding-right: 7px;
    border: 1px solid #2c2c2c
}

footer .FootCenterRow .Dwnld .icon {
    background: #2c2c2c;
    margin-right: 8px;
    padding: 10px 9px;
    transition: all .3s
}

footer .FootCenterRow .Dwnld svg {
    width: 15px;
    fill: #fff
}

footer .FootCenterRow .Dwnld:hover {
    border-color: #2161ad
}

footer .FootCenterRow .Dwnld:hover .icon {
    background: #2161ad
}

footer .FootCenterRow .FootTitle {
    color: #fff;
    text-transform: uppercase;
    margin-bottom: 30px;
    font-size: 13px
}

@media only screen and (min-width: 1200px) {
    footer .FootCenterRow .FootTitle {
        font-size: 14px
    }
}

footer .FootCenterRow li {
    display: flex;
    line-height: normal
}

footer .FootCenterRow li:not(:last-of-type) {
    margin-bottom: 10px
}

@media only screen and (min-width: 468px) {
    footer .FootCenterRow li:not(:last-of-type) {
        margin-bottom: 13px
    }
}

footer .FootCenterRow li a {
    color: #d7d7d7;
    display: flex;
    line-height: normal;
    font-size: 12px
}

@media only screen and (min-width: 468px) {
    footer .FootCenterRow li a {
        font-size: 14px
    }
}

footer .FootCenterRow li a:hover {
    color: #2161ad
}

footer .Copyright {
    padding: 30px 0 40px;
    border-top: 1px solid rgba(245, 245, 246, 0.2)
}

@media only screen and (min-width: 768px) {
    footer .Copyright {
        display: flex;
        align-items: center;
        justify-content: space-between
    }
}

footer .Copyright p {
    color: #c2c1c1;
    margin: 0;
    text-align: center;
    font-size: 13px
}

@media only screen and (min-width: 468px) {
    footer .Copyright p {
        font-size: 14px
    }
}

@media only screen and (min-width: 768px) {
    footer .Copyright p {
        text-align: start
    }
}

footer .Copyright p span {
    display: inline-block;
    color: #fff
}

footer .Copyright .Follow {
    display: flex;
    align-items: center;
    margin-top: 15px;
    justify-content: center
}

@media only screen and (min-width: 768px) {
    footer .Copyright .Follow {
        justify-content: flex-start;
        margin-top: 0px
    }
}

footer .Copyright .Follow .label {
    font-size: 13px;
    color: #77787b;
    padding: 0 15px;
    display: none
}

@media only screen and (min-width: 768px) {
    footer .Copyright .Follow .label {
        display: block
    }
}

footer .Copyright .Follow ul {
    display: flex;
    align-items: center;
    margin: 0 -5px
}

footer .Copyright .Follow ul li {
    padding: 0 5px
}

footer .Copyright .Follow ul a {
    border: 1px solid rgba(146, 148, 151, 0.302);
    border-radius: 50%;
    width: 43px;
    height: 43px;
    display: flex;
    align-items: center;
    justify-content: center
}

footer .Copyright .Follow ul a svg {
    width: 14px;
    transition: all .3s;
    fill: #fff;
    opacity: .4;
    margin: 0
}

@media only screen and (min-width: 1551px) {
    footer .Copyright .Follow ul a#fb svg {
        width: 13px
    }
}

@media only screen and (min-width: 1551px) {
    footer .Copyright .Follow ul a#twiter svg {
        width: 15px
    }
}

footer .Copyright .Follow ul a:hover svg {
    opacity: 1
}

html:lang(ar) footer .FootTop .Title {
    font-weight: 700;
    padding-left: 0px;
    padding-right: 40px
}

html:lang(ar) footer .FootTop .Title::before {
    left: auto;
    right: 0
}

@media only screen and (min-width: 468px) {
    html:lang(ar) footer .FootTop .Title {
        padding-left: 0px;
        padding-right: 47px
    }
}

html:lang(ar) footer .FootTop ul a .icon svg {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1)
}

html:lang(ar) footer .FootTop ul .Flex .Nbr {
    direction: ltr
}

html:lang(en) {
    @import url("http://fonts.cdnfonts.com/css/helvetica-neue-lt?styles=58360,58361,58388,58344,58345,58342,58343,58340,58341,58389,58350,58351,58348,58349,58346,58347,58390,58356,58357,58354,58355,58352,58353,58391,58362,58363,58358,58359,58392,58368,58369,58366,58367,58364,58365,58393,58374,58375,58372,58373,58370,58371,58394,58380,58381,58378,58379,58376,58377,58395,58386,58387,58384,58385,58382,58383,58338,58339,58396")
}

html:lang(en) #Header .HeaderMain #HeaderPOP .navbar-nav .nav-list .dropdown-menu.MegaDrop {
    left: 0
}

@media only screen and (min-width: 992px) {
    html:lang(en) #Header .HeaderMain #HeaderPOP .navbar-nav .nav-list .dropdown-menu.MegaDrop .col_:not(:last-of-type),
    html:lang(en) #Header .HeaderMain #HeaderPOP .navbar-nav .nav-list .dropdown-menu.MegaDrop [class^="col-"]:not(:last-of-type),
    html:lang(en) #Header .HeaderMain #HeaderPOP .navbar-nav .nav-list .dropdown-menu.MegaDrop [class^="col-"]:not(:last-of-type) {
        border-right: 1px solid rgba(33, 97, 173, 0.1)
    }
}

html:lang(en) #Header .HeaderMain #HeaderPOP .navbar-nav .nav-list .dropdown-menu.MegaDrop ul .DropWrp [data-bs-toggle="dropdown"] {
    right: -15px
}

html:lang(en) #Header .HeaderMain #HeaderPOP .navbar-nav .nav-list .dropdown-menu.MegaDrop ul .dropdown-menu a::before {
    left: 0px
}

html:lang(en) #Header .HeaderMain #HeaderPOP .navbar-nav .nav-list .dropdown-menu.MegaDrop ul .dropdown-menu a:hover {
    padding-left: 15px
}

@media only screen and (min-width: 1200px) {
    html:lang(en) #Header .HeaderMain #HeaderPOP .navbar-nav .nav-list .dropdown-menu.MegaDrop ul .FlexUl li:nth-child(odd) {
        border-right: 1px solid #e8eff7
    }
}

html:lang(en) #Header .HeaderMain #HeaderPOP .navbar-nav .nav-list .droparrow {
    right: -15px
}

html:lang(en) #Header .HeaderMain #HeaderPOP .navbar-nav .nav-list:last-child .dropdown-menu {
    right: 0
}

html:lang(en) #Header .HeaderMain #HeaderPOP .navbar-nav .nav-list:last-child .first_drop.show .dropdown-menu {
    inset: unset
}

html:lang(en) .fixedRit {
    right: 0px
}

@media only screen and (max-width: 468px) {
    html:lang(en) .fixedRit ul li:not(:last-of-type) {
        border-right: 1px solid #676767
    }
}

html:lang(ar) {
    font-family: "Cairo", sans-serif;
    direction: rtl;
    text-align: right
}

html:lang(ar) body {
    font-family: "Cairo", sans-serif;
    font-weight: 600;
    text-align: right
}

html:lang(ar) .owl-carousel,
html:lang(ar) .slick-slider,
html:lang(ar) svg {
    direction: initial
}

html:lang(ar) .owl-carousel .owl-item,
html:lang(ar) .slick-slider .owl-item,
html:lang(ar) svg .owl-item {
    direction: rtl
}

html:lang(ar) #Header .HeaderMain #HeaderPOP .navbar-nav .nav-list .dropdown-menu.MegaDrop {
    right: 0
}

@media only screen and (min-width: 992px) {
    html:lang(ar) #Header .HeaderMain #HeaderPOP .navbar-nav .nav-list .dropdown-menu.MegaDrop .col_:not(:last-of-type),
    html:lang(ar) #Header .HeaderMain #HeaderPOP .navbar-nav .nav-list .dropdown-menu.MegaDrop [class^="col-"]:not(:last-of-type),
    html:lang(ar) #Header .HeaderMain #HeaderPOP .navbar-nav .nav-list .dropdown-menu.MegaDrop [class^="col-"]:not(:last-of-type) {
        border-left: 1px solid rgba(33, 97, 173, 0.1)
    }
}

html:lang(ar) #Header .HeaderMain #HeaderPOP .navbar-nav .nav-list .dropdown-menu.MegaDrop ul .DropWrp [data-bs-toggle="dropdown"] {
    right: auto;
    left: -15px
}

html:lang(ar) #Header .HeaderMain #HeaderPOP .navbar-nav .nav-list .dropdown-menu.MegaDrop ul .dropdown-menu a::before {
    right: 0px
}

html:lang(ar) #Header .HeaderMain #HeaderPOP .navbar-nav .nav-list .dropdown-menu.MegaDrop ul .dropdown-menu a:hover {
    padding-right: 15px
}

@media only screen and (min-width: 1200px) {
    html:lang(ar) #Header .HeaderMain #HeaderPOP .navbar-nav .nav-list .dropdown-menu.MegaDrop ul .FlexUl li:nth-child(odd) {
        border-left: 1px solid #e8eff7
    }
}

html:lang(ar) #Header .HeaderMain #HeaderPOP .navbar-nav .nav-list .droparrow {
    left: -15px
}

html:lang(ar) #Header .HeaderMain #HeaderPOP .navbar-nav .nav-list:last-child .dropdown-menu {
    left: 0
}

html:lang(ar) #Header .HeaderMain #HeaderPOP .navbar-nav .nav-list:last-child .first_drop.show .dropdown-menu {
    inset: unset
}

html:lang(ar) .accordion-button::after {
    margin-right: auto;
    margin-left: 0
}

html:lang(ar) .fixedRit {
    left: 0
}

@media only screen and (max-width: 468px) {
    html:lang(ar) .fixedRit ul li:not(:last-of-type) {
        border-left: 1px solid #676767
    }
}

html:lang(ar) .AboutPage #ExpSec ul .OuterRound {
    direction: ltr
}

html:lang(ar) .GallPage #photoGal .GalSelect {
    background-position: center left 15px
}

.scrollup {
    width: 35px;
    position: fixed;
    right: 10px;
    display: none;
    z-index: 5;
    font-size: 12px;
    color: #2161ad;
    text-transform: uppercase;
    text-align: center;
    bottom: 85px
}

@media only screen and (min-width: 468px) {
    .scrollup {
        bottom: 45px
    }
}

@media only screen and (min-width: 576px) {
    .scrollup {
        width: 40px;
        right: 20px
    }
}

.scrollup svg {
    fill: #2161ad;
    margin-bottom: 10px;
    width: 37px;
    height: 37px
}

.scrollup:hover {
    color: #2161ad
}

.Lazyimage {
    background-size: cover;
    background-position: center;
    -webkit-filter: blur(15px);
    filter: blur(15px);
    overflow: hidden;
    z-index: 0;
    position: relative;
    display: block;
    height: 100%
}

.Lazyimage img {
    display: block;
    opacity: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.Lazyimage.is-loaded {
    -webkit-filter: none;
    filter: none;
    transition: filter 1s
}

.Lazyimage.is-loaded img {
    opacity: 1
}

@media only screen and (max-width: 468px) {
    body {
        padding-bottom: 40px
    }
}

.fixedRit {
    position: fixed;
    z-index: 5;
    background: #fff;
    box-shadow: 0px 5px 70px 0px rgba(30, 33, 56, 0.1)
}

@media only screen and (max-width: 468px) {
    .fixedRit {
        bottom: 0;
        width: 100%;
        border-top: 1px solid #676767
    }
}

@media only screen and (min-width: 468px) {
    .fixedRit {
        top: 50%;
        transform: translate(0, -50%)
    }
}

@media only screen and (max-width: 468px) {
    .fixedRit ul {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0px
    }
    .fixedRit ul li {
        width: calc(100% / 3)
    }
}

@media only screen and (min-width: 468px) {
    .fixedRit ul li:not(:last-of-type) {
        border-right: 0px;
        border-bottom: 1px solid #676767
    }
}

.fixedRit ul a {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 5px;
    height: 40px;
    transition: all .3s;
    width: 100%;
    background: #2c2c2c
}

@media only screen and (min-width: 468px) {
    .fixedRit ul a {
        width: 40px
    }
}

@media only screen and (min-width: 768px) {
    .fixedRit ul a {
        height: 50px;
        width: 50px
    }
}

@media only screen and (min-width: 1441px) {
    .fixedRit ul a {
        height: 59px;
        width: 57px
    }
}

.fixedRit ul a span {
    text-transform: uppercase;
    font-size: 8px;
    display: none;
    color: #707675;
    transition: all .3s
}

@media only screen and (min-width: 768px) {
    .fixedRit ul a span {
        display: block
    }
}

@media only screen and (min-width: 1441px) {
    .fixedRit ul a span {
        font-size: 11px
    }
}

.fixedRit ul a svg {
    display: block;
    margin: auto;
    width: 19px;
    fill: #fff;
    transition: all .3s
}

@media only screen and (min-width: 468px) {
    .fixedRit ul a svg {
        width: 18px
    }
}

@media only screen and (min-width: 768px) {
    .fixedRit ul a svg {
        width: 22px
    }
}

.fixedRit ul a.whatsapp svg .st0 {
    fill-rule: evenodd;
    clip-rule: evenodd
}

.fixedRit ul a:hover {
    background: #0c1017
}

.fixedRit ul a:hover span {
    color: #fff
}

.fixedRit ul a:hover svg {
    fill: #fff
}

.ProBox {
    width: 100%;
    display: flex;
    background-color: #020202
}

.ProBox .ImgBox {
    transition: all .3s;
    overflow: hidden;
    height: 260px;
    opacity: .3;
    width: 100%
}

@media only screen and (min-width: 468px) {
    .ProBox .ImgBox {
        height: 340px
    }
}

@media only screen and (min-width: 576px) {
    .ProBox .ImgBox {
        opacity: 1
    }
}

@media only screen and (min-width: 1441px) {
    .ProBox .ImgBox {
        height: 400px
    }
}

.ProBox .ImgBox img {
    transition: all .8s !important;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.ProBox .overlay {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff;
    text-transform: uppercase;
    transition: all .4s;
    opacity: 1
}

@media only screen and (min-width: 576px) {
    .ProBox .overlay {
        opacity: 0
    }
}

.ProBox .overlay svg {
    fill: #fff;
    width: 34px;
    margin-bottom: 20px
}

@media only screen and (min-width: 576px) {
    .ProBox .overlay svg {
        width: 51px;
        margin-bottom: 25px
    }
}

.ProBox .overlay svg#zoom {
    display: none;
    width: 30px
}

@media only screen and (min-width: 576px) {
    .ProBox .overlay svg#zoom {
        width: 40px
    }
}

.ProBox .overlay .ProName {
    font-weight: 600;
    margin-bottom: 15px;
    font-size: 16px
}

@media only screen and (min-width: 468px) {
    .ProBox .overlay .ProName {
        font-size: 17px
    }
}

@media only screen and (min-width: 1551px) {
    .ProBox .overlay .ProName {
        font-size: 19px
    }
}

.ProBox .overlay .location {
    font-size: 11px
}

@media only screen and (min-width: 468px) {
    .ProBox .overlay .location {
        font-size: 12px
    }
}

.ProBox:hover .ImgBox {
    opacity: .3
}

.ProBox:hover .ImgBox img {
    transform: scale(1.2)
}

.ProBox:hover .overlay {
    opacity: 1
}

#ComnAccordion {
    background: #fff
}

#ComnAccordion .FixedNav2 {
    border-bottom: 1px solid rgba(44, 44, 44, 0.149);
    display: none
}

@media only screen and (min-width: 768px) {
    #ComnAccordion .FixedNav2 {
        display: block
    }
}

#ComnAccordion .FixedNav2 .Flex {
    align-items: center;
    justify-content: space-around;
    margin: 0 -2px;
    display: flex
}

#ComnAccordion .FixedNav2 .Flex .accordion-header {
    width: 100%;
    padding: 0 2px
}

#ComnAccordion .FixedNav2 .Flex .accordion-header button {
    background: #e8e8e8;
    width: 100%;
    color: #2c2c2c;
    text-transform: uppercase;
    text-align: center;
    justify-content: center;
    border: none;
    outline: none;
    box-shadow: none;
    height: 47px;
    font-size: 14px
}

@media only screen and (min-width: 468px) {
    #ComnAccordion .FixedNav2 .Flex .accordion-header button {
        height: 55px;
        font-size: 16px
    }
}

@media only screen and (min-width: 1551px) {
    #ComnAccordion .FixedNav2 .Flex .accordion-header button {
        height: 62px;
        font-size: 18px
    }
}

#ComnAccordion .FixedNav2 .Flex .accordion-header button::after {
    display: none
}

#ComnAccordion .FixedNav2 .Flex .accordion-header button[aria-expanded="true"] {
    background: #2c2c2c;
    color: #fff;
    pointer-events: none
}

#ComnAccordion .accordion-item {
    border: none;
    background: none
}

@media only screen and (min-width: 768px) {
    #ComnAccordion .accordion-item {
        background-color: #f5f5f7
    }
}

#ComnAccordion .accordion-item .accordion-header {
    width: 100%;
    padding: 2px 0
}

@media only screen and (min-width: 768px) {
    #ComnAccordion .accordion-item .accordion-header {
        display: none
    }
}

#ComnAccordion .accordion-item .accordion-header button {
    background: #e8e8e8;
    width: 100%;
    color: #2c2c2c;
    text-transform: uppercase;
    text-align: center;
    justify-content: center;
    border: none;
    outline: none;
    box-shadow: none;
    height: 47px;
    font-size: 14px
}

@media only screen and (min-width: 468px) {
    #ComnAccordion .accordion-item .accordion-header button {
        height: 55px;
        font-size: 16px
    }
}

@media only screen and (min-width: 1551px) {
    #ComnAccordion .accordion-item .accordion-header button {
        height: 62px;
        font-size: 18px
    }
}

#ComnAccordion .accordion-item .accordion-header button[aria-expanded="true"] {
    background: #2c2c2c;
    color: #fff
}

#ComnAccordion .accordion-item .accordion-body {
    background-color: #f5f5f7;
    padding: 25px 15px
}

@media only screen and (min-width: 768px) {
    #ComnAccordion .accordion-item .accordion-body {
        padding: 50px 0 85px
    }
}

@media only screen and (min-width: 1551px) {
    #ComnAccordion .accordion-item .accordion-body {
        padding: 70px 0 125px
    }
}


/*# sourceMappingURL=app.min.css.map */