/* Custom Style */

@import url('https://fonts.googleapis.com/css?family=Poppins&display=swap');
@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');
body,
div {
    font-family: 'Poppins', sans-serif;
}

span,
p,
a {
    font-family: 'Lato', sans-serif !important;
}

span,
p {
    line-height: 2;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6,
.title {
    font-weight: 700 !important;
    letter-spacing: -0.6px;
    font-family: 'Poppins', sans-serif !important;
}

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

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

.h3,
h3 {
    font-size: 28px !important;
}

.h4,
h4 {
    font-size: 22px !important;
}

.h5,
h5 {
    font-size: 18px !important;
}

.h6,
h6 {
    font-size: 14px !important;
}

.header-wrapper {
    display: flex;
    align-items: center;
    border-bottom: 0;
    top: 24px;
}

.sticky .header-wrapper {
    border-bottom-color: #db9e30;
}

header nav.main-nav ul li a {
    font-weight: 400;
    font-size: 15px;
    padding: 5px 7px;
    -webkit-transition: .2s;
    transition: .2s;
    display: inline-block;
    height: auto;
    line-height: initial;
}

header nav.main-nav>ul>li.active>a,
header nav.main-nav>ul>li:hover>a {
    background: #db9e30;
    color: #fff!important;
    text-decoration: none;
    border-radius: 0;
}

.section-wrapper .container .heding-wrapper span,
.section-wrapper .heding-wrapper span,
.section-wrapper .container .heding-wrapper h2,
.section-wrapper .heding-wrapper h2,
.accordion .panel-title a,
.portfolio-wrapper .filter-item,
.feature-text .title,
.accordion .panel-title a:hover,
.nav li a,
.nav li a:hover {
    font-family: 'Poppins', sans-serif !important;
    margin-top: 100px;
}

.section-wrapper .container .heding-wrapper,
.section-wrapper .heding-wrapper {
    padding-bottom: 30px !important;
    padding-top: 30px;
}

.n2-ss-background-image {
    filter: brightness(1) !important;
}

.n2-ss-layer {
    margin: 5px 0 !important;
}

.n2-ss-layer a {
    padding: 10px 20px 10px 20px !important;
    border-radius: 0 !important;
    color: #FFF !important;
}

.n2-ss-layer a:hover {
    color: #212121 !important;
}

.spliter {
    height: 4px !important;
    border-radius: 0 !important;
    background: #db9e30 !important;
    margin: 20px 0 0 !important;
}

.box-heding .spliter {
    margin: 20px 0 !important;
}

.btn {
    border-radius: 0 !important;
    background-color: #db9e30 !important;
    color: #FFF !important;
}

.btn:hover {
    color: #FFF !important;
    background: #212121 !important;
}

.btn.dark:hover,
.btn.default,
.careers-wrapper .col-careers ul li:before,
.careers-wrapper .owl-dots>div.active,
.cd-primary-nav-trigger .cd-menu-icon.is-clicked:after,
.cd-primary-nav-trigger .cd-menu-icon.is-clicked:before,
.contact-holder input[type=submit]:hover,
.ms-skin-black-2 .ms-nav-next,
.ms-skin-black-2 .ms-nav-prev,
.page-contact-form input[type=submit]:hover,
.page-content .contact-holder .left-detail .spliter,
.page-content .contact-page-ops span.spliter,
.pagination ul li span,
.portfolio-wrapper .portfolio-list .portfolio-holder a.lightbox,
.portfolio-wrapper .portfolio-list .portfolio-holder a.lightbox:hover,
.responsive-banner,
.scrollToTop:hover,
.spliter,
.team-holder:hover .spliter,
.theme-background,
.top-bar,
.view-fourth .mask,
[class*=" imghvr-"] figcaption,
[class^=imghvr-] figcaption,
footer .footer-left ul li a:hover,
header nav.main-nav>ul>li.active>a,
header nav.main-nav>ul>li:hover>a,
header nav.main-nav ul li ul li a:hover {
    background: #5a636b !important;
}

.theme-background,
.responsive-banner {
    background-image: url('../images/bg-16.jpg') !important;
    background-position: top right !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-color: transparent !important;
}

.nav-tabs {
    border: 0 !important;
}

.nav li a {
    border: 0 !important;
    margin-right: 5px !important;
    padding: 10px 15px !important;
    font-size: 14px;
    background: #5a636b !important;
}

.nav li.active a {
    background: #db9e30 !important;
}

.nav li a:hover,
.nav li a:focus {
    letter-spacing: 0 !important;
}

.tab-content-text {
    padding: 30px 0;
}

.tab-content-text p {
    color: #5a636b;
    font-size: 14px;
    font-weight: 400;
}

.btn.transparent {
    border-color: transparent !important;
}

#clients .section-wrapper a {
    border: 1px solid #fff !important;
}

.waves-float {
    -webkit-box-shadow: 0 1px 1.5px 1px rgba(0, 0, 0, 0.05) !important;
    box-shadow: 0 1px 1.5px 1px rgba(0, 0, 0, 0.05) !important;
}

.box-heding {
    height: 350px !important;
}

.contact-background .overlay {
    background: rgba(255, 255, 255, 0.78) !important;
}

.tab-content-text p {
    margin-bottom: 5px !important;
}

.contact-form input:not(.submit),
.contact-form textarea {
    width: 100%;
    border: 2px solid #5a636b !important;
    color: #5a636b !important;
    background: none;
    margin-bottom: 15px;
    padding-left: 20px;
    -webkit-transition: .2s;
    transition: .2s;
}

.contact-form textarea {
    height: 185px;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: #5a636b !important;
}

.red-banner h2 {
    color: #5a636b !important;
}

.section-wrapper .container .heding-wrapper span,
.section-wrapper .heding-wrapper span {
    font-size: 16px !important;
}

#careers-slider {
    position: relative;
    margin-top: 30px;
}

.section-wrapper.contact-background .heding-wrapper h2,
.section-wrapper.contact-background .heding-wrapper span {
    color: #5a636b !important;
}

[class^=imghvr-] {
    background: #fff;
    height: auto;
    display: block;
}

#map-canvas {
    width: 100%;
    height: 400px;
}

.custom-portfolio-wrapper .row {
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    display: flex;
    align-items: flex-start;
}

.custom-portfolio-wrapper img {
    width: 100%;
}

.blog-content .img-holder img {
    width: 100%;
    height: 270px !important;
    object-fit: cover;
}

.portfolio-wrapper .portfolio-list>div {
    padding: 5px;
    width: 20%;
}

#portfolio {
    padding-bottom: 0;
}

header nav.main-nav ul li {
    -webkit-transition: .2s;
    transition: .2s;
}

:lang(ar) header nav.main-nav ul li {
    float: right;
}

header nav.main-nav ul li:hover {
    background-color: #5a636b !important;
    -webkit-transition: .2s;
    transition: .2s;
}

body .vertical-centered-box {
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
}

body .vertical-centered-box:after {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -0.25em;
}

body .vertical-centered-box .content {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    vertical-align: middle;
    text-align: left;
    font-size: 0;
}

.vertical-centered-box img {
    width: 90px;
}

.loader-circle {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    margin-left: -60px;
    margin-top: -60px;
}

.loader-line-mask {
    direction: ltr;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 60px;
    height: 120px;
    margin-left: -60px;
    margin-top: -60px;
    overflow: hidden;
    -webkit-transform-origin: 60px 60px;
    -moz-transform-origin: 60px 60px;
    -ms-transform-origin: 60px 60px;
    -o-transform-origin: 60px 60px;
    transform-origin: 60px 60px;
    -webkit-mask-image: -webkit-linear-gradient(top, #000000, rgba(0, 0, 0, 0));
    -webkit-animation: rotate 960ms infinite linear;
    -moz-animation: rotate 960ms infinite linear;
    -o-animation: rotate 960ms infinite linear;
    animation: rotate 960ms infinite linear;
}

.loader-line-mask .loader-line {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 16px #db9e30;
}

#particles-background,
#particles-foreground {
    left: -51%;
    top: -51%;
    width: 202%;
    height: 202%;
    -webkit-transform: scale3d(0.5, 0.5, 1);
    -moz-transform: scale3d(0.5, 0.5, 1);
    -ms-transform: scale3d(0.5, 0.5, 1);
    -o-transform: scale3d(0.5, 0.5, 1);
    transform: scale3d(0.5, 0.5, 1);
}

#particles-background {
    background: #2c2d44;
    background-image: -moz-linear-gradient(45deg, #3f3251 2%, #002025 100%);
    background-image: -webkit-linear-gradient(45deg, #3f3251 2%, #002025 100%);
    background-image: linear-gradient(45deg, #3f3251 2%, #002025 100%);
}

lesshat-selector {
    -lh-property: 0;
}

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

@-moz-keyframes rotate {
    0% {
        -moz-transform: rotate(0deg);
    }
    100% {
        -moz-transform: rotate(360deg);
    }
}

@-o-keyframes rotate {
    0% {
        -o-transform: rotate(0deg);
    }
    100% {
        -o-transform: rotate(360deg);
    }
}

@keyframes rotate {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

[not-existing] {
    zoom: 1;
}

lesshat-selector {
    -lh-property: 0;
}

@-webkit-keyframes fade {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.25;
    }
}

@-moz-keyframes fade {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.25;
    }
}

@-o-keyframes fade {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.25;
    }
}

@keyframes fade {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.25;
    }
}

[not-existing] {
    zoom: 1;
}

lesshat-selector {
    -lh-property: 0;
}

@-webkit-keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-moz-keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-o-keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

[not-existing] {
    zoom: 1;
}

header nav.main-nav ul li.active>a,
header nav.main-nav ul li:hover>a {
    color: #db9e30 !important;
    border-bottom: 1px solid #db9e30;
    background: transparent !important;
}

header nav.main-nav ul li:hover {
    background: transparent !important;
}

body {
    overflow-x: hidden;
}

.slider {
    height: 100vh;
}

#myCarousel {
    width: 100%;
    height: 110vh;
}

.carousel-inner>.item>img,
.carousel-inner>.item>a>img {
    height: 110vh;
    min-height: 350px;
    background: no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.carousel-caption {
    top: 200px;
}

.carousel-caption h4 {
    font-size: 50px !important;
}

a.scrollToTop {
    width: 50px;
    height: 50px;
    text-align: center;
    background: linear-gradient(to right, #57a68f 50%, #db9e30 50%) no-repeat scroll right bottom / 210% 100% #db9e30 !important;
    font-weight: 700;
    text-decoration: none;
    position: fixed;
    bottom: 15px;
    right: 40px;
    display: none;
    font-size: 32px;
    -webkit-transition: .3s;
    transition: .3s;
    z-index: 9999;
    color: white !important;
}

.scrollToTop:hover {
    text-decoration: none;
    background: linear-gradient(to left, #57a68f 50%, #db9e30 50%) no-repeat scroll left bottom / 210% 100% #db9e30 !important;
    font-weight: 700;
    color: #fff!important;
    background-color: #db9e30 !important;
}

.rtl footer {
    padding: unset;
}

footer {
    background-image: url('../images/bg-19.jpg');
    line-height: 100px;
    border-bottom: 1px solid #441a05;
}

footer h3 {
    text-align: center;
    text-transform: uppercase;
    color: #fff !important;
    font-size: 3em;
    font-weight: 700;
    letter-spacing: 5px;
}

[dir=rtl] footer h3 {
    letter-spacing: 0;
}

footer p {
    color: #7b7a79;
}

footer form input[type="email"],
footer form input[type="text"] {
    background-color: #23201d;
    border-color: #441a05;
    color: #ffffff;
    border-radius: 6px;
    width: 100%;
    vertical-align: top;
    padding-right: 10.563rem;
    min-width: 3rem;
    margin-right: 0;
    line-height: inherit;
    border: none !important;
    padding: 1em 2em;
    font-size: 1em;
    height: 47px;
    margin: auto;
}

@media screen and (min-width: 720px) {
    footer form input[type="email"],
    footer form input[type="text"] {
        width: 50rem !important;
    }
    #footer-container {
        padding: 50px 100px;
    }
}

footer form button {
    background: linear-gradient(to right, #db9e30 50%, #57a68f 50%) no-repeat scroll right bottom / 210% 100% #57a68f !important;
}

footer form button:hover {
    background: linear-gradient(to left, #db9e30 50%, #57a68f 50%) no-repeat scroll left bottom / 210% 100% #57a68f !important;
}

.bottom-bar {
    background-color: #15110e;
    padding: 20px 0;
    display: flex;
    width: 100%;
    text-align: center;
    justify-content: space-between;
}

.bottom-bar ul {
    list-style-type: none;
    flex-wrap: wrap;
    display: flex;
}

.bottom-bar ul li {
    flex: 1;
}

.bottom-bar {
    font-size: 16px;
    color: #fff!important;
}

.service {
    background-image: url('../images/services-bg-left.jpg');
}

[dir=ltr] #about-home {
    background-image: url('../images/bg-16.jpg') !important;
    background-position: top right !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
}

[dir=rtl] #about-home {
    background-image: url('../images/bg-16_2.jpg') !important;
    background-position: top left !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
}

#home-vision {
    background-image: url('../images/vision.png') !important;
    background-position: top right !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

#home-vision,
#home-mission {
    padding: 20px;
}


/*Auth Styles*/

#app {
    color: #fff;
    background-color: #23201d;
    background-image: url(../images/bg-19.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom;
    min-height: 100vh;
}

.fullPage-card {
    margin: 0 180px;
}

[dir=rtl] body {
    text-align: right;
    direction: rtl;
}

[dir=ltr] body {
    text-align: left;
    direction: ltr;
}

.fullPage-card input:not([type=checkbox]) {
    background-color: #23201d !important;
    border-color: #441a05;
    color: #ffffff;
    border-radius: 6px;
    width: 100%;
    vertical-align: top;
    padding-right: 10.563rem;
    min-width: 3rem;
    margin-right: 0;
    line-height: inherit;
    border: none !important;
    padding: 1em 2em;
    font-size: 1em;
    height: 47px;
    max-width: 100%;
}

[dir=rtl] .form-check-label {
    margin-right: 20px;
}

#app .top-text {
    letter-spacing: 10px;
}


/*End Auth Styles*/

.cd-primary-nav-trigger .cd-menu-icon:after,
.cd-primary-nav-trigger .cd-menu-icon:before,
.cd-primary-nav-trigger .cd-menu-icon {
    background-color: #fff;
}

[dir=rtl] .nav-tabs>li {
    float: right !important;
}


/**Time Prayers */

.MPwidget {
    width: 100% !important;
}

.MPtimetable {
    height: 386px !important;
}

.MPheader,
.MPfooter {
    background-color: #db9e30 !important;
}

.MPfooter {
    display: none !important;
}

.MPheader .title {
    font-style: normal;
    letter-spacing: 5px;
}

:lang(ar) .MPheader .title {
    letter-spacing: 0;
}

:lang(en) .MPtimetable td {
    text-align: left;
    padding: 4px 8px 4px 45px;
}


/** end Time Prayers*/

:lang(ar) .fullPage-card h4 {
    letter-spacing: 0px !important;
}

div.item-view-title {
    text-align: center;
    padding-top: 10px;
}

div.item-view-title a {
    color: #333
}

:lang(ar) ul.list-group {
    padding-left: 0;
    padding-right:0;
  }