
@font-face {
    font-family: 'AljazeeraArabicBold';
    src: url('../fonts/AljazeeraArabicBold.ttf');
    font-weight: 700;
    font-style: normal
}
@font-face {
    font-family: 'AljazeeraArabicRegular';
    src: url('../fonts/AljazeeraArabicRegular.ttf');
    font-weight: 700;
    font-style: normal
}
@font-face {
    font-family: 'TiemposHeadlineWeb';
    src: url('../fonts/TiemposHeadlineWeb-Medium.woff') format('woff');
    font-weight: 700;
    font-style: normal
}
@font-face {
    font-family: 'NHaasGrotesk';
    src: url('../fonts/NHaasGroteskDSPro-55Rg.otf');
}

@font-face {
    font-family: 'NHaasGroteskBD';
    src: url('../fonts/NHaasGroteskDSPro-75Bd.otf');
}

body {
    font-family: 'NHaasGrotesk';

}
body{

}
.lang{
    font-family: 'AljazeeraArabicBold';
}
.text-black{
    color: #000;
}
a,a:hover{
    color: #777777;
    text-decoration: none!important;
}
.text-primary {
    color: #2ea6bc!important;
}

footer:before {
    content: "";
    display: block;
    height: 12px;
    width: 100%;
    background: transparent url(../images/bg-rough-edge.png) repeat-x bottom right -730px;
    position: relative;
    text-align: center;

}
.font-2{
    font-family: 'TiemposHeadlineWeb';
}
.base-lines {
    background: transparent;
    display: none;
    opacity: .06;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 0;
    display: block;
    height: 100%;
    margin-top: 0;
    transition: all .5s cubic-bezier(.77, 0, .175, 1) 0s;
}

.base-lines > .container {
    position: relative;
    width: 100%;
    height: 100%;
}

.base-lines i:before,
.base-lines i:after {
    background: #001746;
    content: "";
    display: block;
    top: 0;
    bottom: 0;
    position: absolute;
    width: 1px;
    height: 100%;
}

.base-lines i.middle:after {
    display: none
}

.base-lines i.middle:before {
    left: 50%;
}

.base-lines i.inner:before {
    left: 25%;
}

.base-lines i.inner:after {
    right: 25%;
}


.base-lines i.outer:after {
    right: 0;
}

.base-lines i.outer:before {
    left: 0;
}

.navbar-light .navbar-nav .show > .nav-link, .navbar-light .navbar-nav .active > .nav-link, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .nav-link.active {
    color: rgb(46 166 188);
}


.aboutSec .container {
    background-image: url('../images/logo-bg.png');
    background-position: bottom right;
    background-repeat: no-repeat;
    background-size: contain
}

.mapCont {
    position: relative
}

#map {
    bottom: 0;
    left: 0;
    position: relative !important;
    right: 0;
    top: 0;
    width: 100%;
    height: 75vh;
}

.map-legend {
    background: rgba(11, 130, 135, 0.9);
    box-sizing: border-box;
    height: 100%;
    overflow: scroll;
    padding: 2.5% 0;
    position: absolute;
    top: 0;
    width: 35%;
    z-index: 6;
}

.map-legend section {
    border-bottom: 1px dashed #13caba;
    color: #1de79d;
    cursor: pointer;
    display: block;
    font-size: .9125rem;
    position: relative;
    padding: 1rem 5% 1rem 15%;
    text-rendering: geometricPrecision;
    transition: 0.3s background ease;
    width: 80%;
}

.map-legend section:hover {
    background: rgba(255, 255, 255, 0.2);
    transition: 0.3s background ease;
}

.marker-title {
    color: #0b8287;
    cursor: pointer;
    font-size: .9125rem;
}

.marker-description {
    color: #3f3f11;
    font-size: .8125rem;
}

.leaflet-left {
    right: 0;
}

.leaflet-control {
    float: right;
    margin-right: 10px;
}


.leaflet-popup-content {
    padding: 0;
    width: 200px;
    text-align: right;
}

.leaflet-popup-content h3 {
    /* color: #fff; */
    margin: 0;
    display: block;
    padding: 10px;
    border-radius: 3px 3px 0 0;
    font-weight: 700;
    margin-top: -15px;
    background: #c3d700;
    font-family: 'one-Medium';
}

.leaflet-popup-content div {
    padding: 10px;
    font-family: 'one-light';
}

.leaflet-popup-close-button {
    display: none;
}

.leaflet-container .leaflet-control-attribution a, .leaflet-container .map-info-container a {
    display: none;
}
.mapboxgl-popup p{
    font-size: 16px;
}
.list {
    display: none;
    background: rgba(0, 131, 60, 0.9);
    margin-top: 5px;
}


html:not(.ie-11):not(.ios) .parallax-disabled {
    background-attachment: inherit;
}

.mapboxgl-popup-close-button {
    font-size: 20px;
}
.breadcrumbs-custom-text{
    max-width: 500px;
}
.navbar-light .navbar-toggler-icon{
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0,0,0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

/*responsive*/

@media (max-width: 1200px) {


    .navbar-light .navbar-toggler {
        display: block !important;
    }

    .navbar {
        justify-content: space-between;
    }

    .navbar-collapse {
        position: fixed;
        background: #2ea6bc;
        width: 100%;
        left: -100%;
        max-width: 280px;
        z-index: 9999999999;
        padding: 30px;
        height: 100vh!important;
        top: 0;
        transition: left 0.4s ease;
        -webkit-transition: left 0.4s ease;
        -moz-transition: left 0.4s ease;
        display: block !important;
    }

    .navbar-collapse.collapsing ,
    .navbar-collapse.show {
        left: 0;
    }

    .navbar-nav .nav-link:hover:after, .navbar-nav .active .nav-link:after {
        display: none;
    }

    .navbar-nav .nav-link {
        font-size: 18px;
        color: #ffffff !important;
        padding: 6px 0!important;
    }

    .navbar-nav .nav-link:hover {
        opacity: 0.7;
    }

}
@media (max-width: 767px) {
    .navbar-light .navbar-brand {
        max-width: 70px;
    }

}
@media (max-width: 568px) {
    .bcc_ .breadcrumbs-custom-body,
     .breadcrumbs-custom-body{
        min-height: 50vh;
    }
    .h2, h2 {
        font-size: 1.5rem;
    }
    .h1, h1 {
        font-size: 2rem;
    }
    .lead {
        font-size: 1rem;
    }

}
/*responsive*/