/*===================== Fonts =======================*/
@font-face {
    font-family: "DIN";
    src: url('/Content/Fonts/DIN NEXT/DIN NEXT™ ARABIC REGULAR.otf') format('opentype');
}
@font-face {
    font-family: "DIN-B";
    src: url('/Content/Fonts/DIN NEXT/DIN NEXT™ ARABIC BOLD.otf') format('opentype');
}
@font-face {
    font-family: "DIN-L";
    src: url('/Content/Fonts/DIN NEXT/DIN NEXT™ ARABIC LIGHT.otf') format('opentype');
}
/*===================== General =====================*/
::selection {
    background: #00A2A6;
    color:white;
}
body {
    line-height: 1.6;
    font-family: "DIN";
    color: #333;
}
.c-font-bold, .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    font-family: "DIN-B";
}
.c-font-dark {
    color: #333 !important;
}
.form-control {
    font-family: "DIN";
}
.btn {
    padding: 4px 20px 6px 20px;
}
    .btn.c-btn-border-2x {
        padding: 4px 20px 6px 20px;
    }
@media screen and (max-width:991px) {
    .c-content-title-1 > h3.c-font-uppercase {
        font-size: 36px;
    }
}
.c-content-title-3 {
    padding-right: 16px;
}
.anchor{
    display:block;
    position:absolute;
    visibility:hidden;
    top:-80px;
}
@media screen and (min-width:992px) {
    .c-margin-md-20 {
        margin-top: 20px;
    }
    .c-margin-md-30 {
        margin-top:30px;
    }
    .c-margin-md-40 {
        margin-top: 40px;
    }
}
.c-content-list-1 > li:before {
    margin-top: 15px;
}
@media (max-width: 991px){
    .c-content-box.c-size-md.c-no-padding {
        padding: 0;
    }
}

.video-responsive {
    overflow: hidden;
    padding-bottom: 56.25%;
    position: relative;
    height: 0;
}

    .video-responsive iframe {
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        position: absolute;
    }
/*===================== Header =====================*/
@media (min-width: 992px) {
    .c-layout-header.c-layout-header-6, .c-page-on-scroll .c-layout-header.c-layout-header-6 {
        background: #00a2a5;
    }
}
.c-layout-header .c-brand .c-logo img {
    width: 80px;
    margin-top: 0;
}
@media (max-width: 991px) {
    .c-layout-header .c-brand .c-logo img {
        margin-top: -14px;
    }
}

    .c-layout-header .c-brand .c-logo img.c-mobile-logo {
        width: 65px;
    }
.c-theme-nav li:focus > a:not(.btn), .c-theme-nav li:active > a:not(.btn), .c-theme-nav li:hover > a:not(.btn) {
    color: #00a2a5 !important;
}
.c-layout-header.c-layout-header-6 .c-topbar .c-top-menu > .c-links > li > a:not(.btn) {
    color: #333;
}
.c-layout-header.c-layout-header-6 .c-topbar .c-brand > .c-icons > li > a > i {
    color: #231f20;
}
.c-layout-header .c-topbar .c-top-menu > .c-icons > li {
    padding: 8px 5px 8px 5px;
}
.c-layout-header .c-topbar .c-top-menu > .c-links > li {
    padding: 5px 3px ;
}
.c-layout-header .c-navbar .c-mega-menu > .nav.navbar-nav > li > .c-btn {
    padding-top: 3px;
    padding-bottom: 6px;
}
header.new ul.c-icons.c-theme-ul {
    position: absolute;
    top: -1px;
    float: right;
    padding: 0;
    list-style: none;
    margin: 0;
    margin-right: 100px;
}
    header.new .c-icons li {
        float: right;
        margin: 0 8px;
    }
        header.new .c-icons li i {
            color: #8797ae;
        }

header.new.c-page-on-scroll ul.c-icons.c-theme-ul {
    display: none;
}
header.new .c-brand{
    position:relative;
}
@media (min-width: 992px) {
    header.new ul.c-icons.c-theme-ul {
        position: relative;
        left: -20px;
        float: left;
        margin-right: 0;
    }
        header.new .c-icons li {
            float: none;
            margin: 6px 0 0;
        }
    .c-layout-header .c-navbar .c-mega-menu.c-mega-menu-dark > .nav.navbar-nav > li .dropdown-menu > li > a {
        color: white;
    }
    .c-layout-header .c-navbar .c-mega-menu.c-mega-menu-dark > .nav.navbar-nav > li .dropdown-menu > li:hover > a {
        color: #FFCB05 !important;
    }
    .c-page-on-scroll.c-layout-header-fixed .c-layout-header .c-brand .c-desktop-logo-inverse {
        width: 60px;
        margin-top: -15px;
    }

    .c-layout-header-fixed.c-layout-header-6-topbar .c-layout-page {
        margin-top: 145px;
    }
    .c-layout-header-fixed.c-layout-header-6-topbar header.new + .c-layout-page {
        margin-top: 96px;
    }
    .c-layout-header .c-navbar .c-mega-menu > .nav.navbar-nav > li > .c-link {
        padding: 37px 15px 37px 15px;
    }

    .c-layout-page {
        border-top: 1px solid #e6eff3;
    }

    .c-layout-header .c-navbar .c-mega-menu > .nav.navbar-nav > li > .c-link {
        min-height: 98px;
    }
    .c-layout-header .c-navbar .c-mega-menu > .nav.navbar-nav > li > .c-btn {
        margin: 34px 10px 33px 10px;
    }
    .c-layout-header .c-brand {
        margin: 15px 0 17px 0;
    }
}
.c-page-on-scroll header.new ul.c-icons.c-theme-ul {
    display: none;
}

.navbar-nav svg {
    width: 20px;
    fill: #3a3f45;
    height: 20px;
}
@media (min-width: 992px){
    .c-page-on-scroll .navbar-nav svg {
        fill: #69727c;
    }
}
@media (max-width: 991px) {
    .navbar-nav svg {
        fill: #ebedf2;
    }
}
.navbar-nav a:hover svg {
    fill: #00A2A6;
}
/*===================== Footer =====================*/
.c-layout-footer.c-layout-footer-1 .c-prefooter .c-feedback form textarea.form-control {
    height: 120px;
}
#note {
    position: fixed;
    z-index: 101;
    bottom: -100px;
    left: 0;
    right: 0;
    width: 100%;
    height: 100px;
    background: #00a2a5;
    text-align: center;
    line-height: 100px;
    opacity: 0;
    transition: all 0.5s ease-in-out;
    -webkit-box-shadow: 0 -2px 10px rgba(0,0,0,0.5);
    -moz-box-shadow: 0 -2px 10px rgba(0,0,0,0.5);
    box-shadow: 0 -2px 10px rgba(0,0,0,0.5);
    color: white;
}

    #note.error {
        background: #e7505a;
    }

    #note.pop {
        opacity: 1;
        bottom: 0;
    }
/*===================== Homepage =====================*/
#page-head {
    position: relative;
    overflow:hidden;
}
#page-head .bg-brush {
    max-width: 400px;
    position: absolute;
    display: block;
}
    #page-head .bg-brush:first-child {
        left: -140px;
        top: -50px;
    }
    #page-head .bg-brush:nth-child(2) {
        right: 0;
    }
    #page-head .bg-brush:nth-child(3) {
        bottom: 0px;
        right: -120px;
    }
@media screen and (max-width:991px) {
    #page-head .bg-brush {
        display: none;
    }
    .c-layout-header .c-brand {
        margin: 20px 15px 5px 15px;
    }
}
/*===================== Programs =====================*/
.prog-img img {
    width: 100%;
}
.prog-details h4 {
    color: #00a2a5;
    font-size: 24px;
    margin-top: 30px;
    margin-bottom: 16px;
}
.prog-details .book-img {
    float: left;
    max-width: 240px;
    clear: left;
    margin-right: 20px;
    margin-left: 10px;
}
@media screen and (max-width:991px) {
    .prog-details .book-img {
        display: none;
    }
}

/*===================== Services =====================*/
.service {
    padding: 30px;
    text-align: center;
}

    .service img, .service-details img {
        display: block;
        margin: 0 auto;
        width: 90%;
        max-width: 500px;
    }

    .service h4 {
        font-size: 24px;
    }

    .service a:hover h4 {
        color: #00a2a5;
    }
@media screen and (max-width:991px) {
    .service h4 {
        font-size: 30px;
        margin-top: 16px;
    }
}
.service-details {
    position: relative;
    margin-top: 30px;
    margin-bottom: 30px;
    font-size:18px;
}

.service-details:not(.text-center):after {
    content: "";
    position: relative;
    height: 1px;
    width: 80%;
    margin: 0 auto;
    display: block;
    border-bottom: 1px solid #c4c4c4;
    padding-top: 30px;
}
    .service-details h3 {
        font-size: 24px;
        padding-bottom: 16px;
        position: relative;
    }
        .service-details h3:after {
            content: "";
            position: absolute;
            bottom: 0;
            width: 100px;
            right: 0;
            display: block;
            height: 3px;
            background: #ffd53b;
        }
    .service-details.text-center h3:after {
        right: 50%;
        bottom: -10px;
        transform: translateX(50%);
    }
.beneficiaries img {
    max-width: 140px;
    display:block;
    margin:0 auto 10px;
}
/*===================== About Section =====================*/
#about-section > div:last-child {
    padding-top: 30px;
}
#about-section img {
    width: 90%;
    max-width: 500px;
}
#about-section p {
    color: #231f20;
    font-size: 1.3em;
    line-height: 1.6;
    font-weight: 400;
}
@media screen and (min-width:768px) {
    #about-section > div:first-child {
        border-left: 2px solid;
    }
    #about-section > div:last-child {
        padding-right: 26px;
    }
}
.about-block {
    position: relative;
}
    .about-block:after {
        content: "";
        position: relative;
        height: 1px;
        width: 80%;
        /*margin: 0 auto;*/
        display: block;
        border-bottom: 1px solid #c4c4c4;
        padding-top: 30px;
    }
/*===================== Activities =====================*/
.c-content-media-1 {
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 10px;
    overflow: hidden;
}
    .c-content-media-1 h3 {
        margin-top: 40px;
        margin-bottom: 40px;
        min-height: 68px;
    }
.c-content-media-1 .c-wrapper {
    position: relative;
}
    .c-content-media-1:before {
        display: block;
        content: "";
        position: absolute;
        height: 100%;
        width: 100%;
        left: 0;
        top: 0;
        opacity:0.8;
        transition:opacity 0.3s ease-in-out;
    }
    .c-content-media-1:hover:before {
        opacity: 1;
    }
    .c-content-media-1.c-theme-bg:before {
        background-color: rgb(3, 161, 165);
    }
    .c-content-media-1.c-bg-red-2:before {
        background-color: rgb(231, 80, 90);
    }
    
    .c-content-media-1 .post-type span {
        display: inline-block;
        padding: 0px 8px 7px;
        background: white;
        line-height: 1;
        border-radius: 4px;
    }
    .c-content-media-1.c-theme-bg .post-type span {
        color: rgb(3, 161, 165);
    }
    .c-content-media-1.c-bg-red-2 .post-type span {
        color: rgb(231, 80, 90);
    }
    .c-content-media-1 .quick-info {
        height: 30px;
        position: relative;
        color: white;
        margin-top: 30px;
    }

        .c-content-media-1 .quick-info span {
            position: absolute;
            right: 0;
        }

            .c-content-media-1 .quick-info span + span {
                right: auto;
                left: 0;
            }

/*===================== News =====================*/
.c-content-recent-posts-1 > li > .c-image {
    width: 100%;
}
.c-content-blog-post-1-view img{
    width:100%;
}
/*===================== Trainings =====================*/
.c-content-blog-post-1 .c-panel span + span {
    margin-right: 20px;
}
.c-content-blog-post-1 .c-panel .btn {
    float:left;
}
.c-content-blog-post-1 .c-panel span i {
    margin-left: 5px;
}
.partner-aside .c-image {
    width: 80%;
    margin: 0 auto 10px;
}
.trainings-schedule .training {
    padding: 20px;
    background: white;
    border-radius: 20px;
    margin-bottom: 26px;
    position: relative;
    overflow: hidden;
}

    .trainings-schedule .training h3 {
        font-size: 22px;
        margin-bottom: 16px;
    }

    .trainings-schedule .training .c-media {
        float: right;
        width: 250px;
        margin-left: 20px;
    }

    .trainings-schedule .training .training-info {
        margin-right: 20px;
    }

        .trainings-schedule .training .training-info p {
            font-size: 16px;
            color: grey;
        }

        .trainings-schedule .training .training-info:after {
            content: "";
            display: table;
            clear: both;
        }

    .trainings-schedule .training .flag-icon {
        position: absolute;
        left: 20px;
        width: 45.2px;
        height: 33.6px;
        border-radius: 4px;
    }

    .trainings-schedule .training .btn {
        position: absolute;
        left: 20px;
        bottom: 20px;
    }

.trainings-filter {
    text-align: center;
    margin-bottom: 20px;
}

    .trainings-filter select {
        display: inline-block;
        width: auto;
        cursor: pointer;
        width: 100%;
    }
.training-wrapper.col-lg-8 {
    min-height: 0;
}
@media screen and (max-width:991px) {
    .trainings-schedule .training .c-media {
        float: none;
        width: 100%;
        margin-left: 0;
        margin-bottom: 20px;
    }

    .trainings-schedule .training .training-info {
        margin-right: 0;
    }
}


/*===================== Partners =====================*/
.partner-details img{
    width:80%;
    margin-bottom:20px;
    max-width:300px;
}
@media (min-width: 992px) {
    .partner-details img {
        margin: 0 auto 20px;
    }
}
.c-content-overlay .c-overlay-object {
    width: 80%;
    margin: 0 auto;
}
.c-content-person-1 .c-body .c-head .c-name {
    display: block;
    text-align: center;
    float: none;
}
.c-content-person-1 .c-body .c-position {
    margin-top: 6px;
    display: block;
    float: none;
    text-align: center;
    font-size:16px;
}

/*===================== Social Bar =====================*/
#fixed-side-bar {
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
}

    #fixed-side-bar ul {
        margin: 0;
    }

        #fixed-side-bar ul li {
            display: block;
            height: 50px;
            width: 50px;
            position: relative;
            border-radius: 50%;
            text-align: center;
            box-shadow: 2px 2px 4px 1px rgba(0,0,0,0.2);
            opacity: 0.9;
            transition: width 0.3s ease-in-out, height 0.3s ease-in-out;
            overflow: hidden;
            float: left;
            clear: left;
            background-color: #25b7d3;
        }

            #fixed-side-bar ul li:hover {
                opacity: 1;
            }

            #fixed-side-bar ul li a {
                line-height: 50px;
                color: white;
                border: none;
                padding: 0;
                height: 50px;
                width: 50px;
                display: inline-block;
            }

                #fixed-side-bar ul li a i {
                    font-size: 30px;
                    line-height: 50px;
                }

            #fixed-side-bar ul li.disappear,
            #fixed-side-bar ul li.share-link {
                width: 0;
                height: 0;
            }

            #fixed-side-bar ul li.share.disappear ~ .share-link {
                height: 50px;
                width: 50px;
            }
/*===================== Programs =====================*/
.prog-details {
    font-size: 18px;
}
.prog-details + .prog-details {
    margin-top: 50px;
}
    .prog-details .c-content-title-3 {
        padding-right: 0;
    }
    .prog-details .c-content-title-3 > h3 {
        display: inline-block;
        background: #f7f7f7;
        line-height: 1.6;
        padding: 0 16px 10px;
        margin-bottom: 0;
    }
.c-content-tab-2 > .nav > li.active > .c-arrow {
    bottom: -1px;
}
.c-content-tab-2.c-opt-1 > .nav li.active > .c-arrow:before {
    border-bottom-color: #F4F4F4;
}
.c-content-tab-2 > .nav > li.active > .c-arrow:before {
    border-width:15px;
    margin-right: -15px;
}
.cbp-caption-overlayBottomPush .cbp-caption-activeWrap {
    bottom: 0;
    text-align: center;
    height: 72px;
}
.cbp-l-caption-title {
    margin-bottom: 8px;
}
.cbp-l-caption-desc {
    font-size: 16px;
    font-family: "DIN";
}
.cbp-popup-content {
    text-align: right;
}
.cbp-popup-singlePageInline-ready .cbp-popup-content, .cbp-popup-singlePageInline-ready .cbp-popup-navigation {
    padding: 40px;
    background: #fff;
    margin-top: 20px;
    margin-bottom: 20px;
}
.cbp-popup-singlePageInline-ready .cbp-popup-navigation {
    padding-bottom: 0;
}
.cbp-popup-singlePageInline .cbp-popup-close {
    right: 5px;
    top: 10px;
}
.cbp-popup-content .content-table {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}
.cbp-popup-content .content-cell {
    padding:8px;
}
.c-content-tab-2 > .c-tab-content .c-tab-pane p {
    color: inherit;
}
    .cbp-popup-content .content-cell div {
        min-height: 80px;
        text-align: center;
        background: #03A1A5;
        border-radius: 5px;
        color: white;
        padding: 10px;
        display: table;
        width: 100%;
    }
.cbp-l-caption-title {
    font-family: "DIN";
}
.cbp-popup-content .content-cell:nth-child(even) div {
    background: #FFCB05;
}

        .cbp-popup-content .content-cell div span {
            vertical-align: middle;
            display: table-cell;
        }
.cbp-popup-content .content-cell:nth-child(even) div span {
    color: #333;
}

.cbp-caption-overlayBottomPush .cbp-caption:hover .cbp-caption-defaultWrap {
     top: 0; 
}
.cbp-caption-activeWrap {
    background: #fff;
}
.cbp-l-caption-title, a:hover .cbp-l-caption-title {
    color: #3f444a;
}
.cbp-singlePageInline-active {
    opacity: 1 !important;
}
    .cbp-singlePageInline-active .cbp-caption-activeWrap {
        background: #69727c;
    }
        .cbp-singlePageInline-active .cbp-caption-activeWrap .cbp-l-caption-title{
            color:#fff;
        }
        .cbp-singlePageInline-active .cbp-caption-activeWrap .cbp-l-caption-desc {
            color: #ddd;
        }
.program-contents-tabs .c-content-tab-2 .c-new-icon {
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 60px;
    height: 60px;
    display: inline-block;
}

    .program-contents-tabs .c-content-tab-2 .c-new-icon.c-icon-1 {
        background-image: url(/Content/Img/001-default.png);
    }

    .program-contents-tabs .c-content-tab-2 .c-new-icon.c-icon-2 {
        background-image: url(/Content/Img/002-default.png);
    }

    .program-contents-tabs .c-content-tab-2 .c-new-icon.c-icon-3 {
        background-image: url(/Content/Img/003-default.png);
    }

.program-contents-tabs .c-content-tab-2 li.active .c-new-icon.c-icon-1 {
    background-image: url(/Content/Img/001-active.png);
}

.program-contents-tabs .c-content-tab-2 li.active .c-new-icon.c-icon-2 {
    background-image: url(/Content/Img/002-active.png);
}

.program-contents-tabs .c-content-tab-2 li.active .c-new-icon.c-icon-3 {
    background-image: url(/Content/Img/003-active.png);
}


.program-contents-tabs .c-content-tab-2 > .nav > li > a > .c-title {
    margin-top: 15px;
}
/*===================== Banner Sections =====================*/
.img-banner {
    padding: 120px 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.about-section {
    background-image: url('/Content/Img/مبادرة-قد.jpg');
}

.program-section {
    /*padding: 100px 0 120px;*/
    background-image: url('/Content/Img/برنامج-القيادة-كل-يوم.jpg');
}

.img-banner img {
    width: 80%;
    margin: 0 auto 20px;
    max-width: 280px;
    display: block;
}

@media (min-width: 992px) {
    .img-banner img {
        margin-left: 30px;
        float: right;
        border-left: 1.5px solid white;
    }

    .about-section img {
        padding-left: 20px;
        max-width: 230px;
    }

    .program-section img {
        padding-left: 30px;
        max-width: 250px;
        border-color: black;
    }
    .program-section.v2 img {
        max-width: 230px;
    }
    .program-section p {
        margin-top: 20px;
    }
}

.about-section p {
    color: white;
}

@media (max-width: 991px) {
    .img-banner p {
        max-width: 450px;
        margin: 0 auto;
    }
    .program-section p {
        max-width: 400px;
    }
}