body {font-family: Arial, Helvetica, sans-serif; text-align: left; font-size: 17px; direction: ltr;}

* {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0;}
header, section, footer, aside, nav, main, article, figure {display: block;}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, p, blockquote, th, td {
    margin: 0;
    padding: 0;
}
h1, h2, h3, h4, h5, h6 {font-family: 'Oswald', sans-serif; color: #0c4560; font-weight: normal;}
p {font-family: Arial, Helvetica, sans-serif; color: #0c4560;}
i {font-family: 'Font Awesome Free 5';}

/*colors*/
.colors {
    navy: #0d2f5d;
    yellow: #d5a82b;
    red: #fc6f70;
}
.text_red {color: #e21745;}

a.square_orange {color: #d5a82b; padding: 6px; border: #d5a82b 1px solid;}
a.square_orange:hover {text-decoration: none; color: #b88d19;}
a.square_red {color: #fc6f70; padding: 6px; border: #fc6f70 1px solid;}
a.square_red:hover {text-decoration: none; color: #da5661;}
a.square_blue {color: #0d2f5d; padding: 6px; border: #0d2f5d 1px solid;}
a.square_blue:hover {text-decoration: none; color: #061e3d;}

/*TODO:*/
/*FIXME:*/

/*----------------------------------------   header   --------------------------------------*/
header .tools {/*height: 40px;*/ background-color: #0d2f5d;}
header .tools a {color: #fff; font-size: 12px; font-weight: bold;}
header .tools a:hover {text-decoration: none; color: rgb(73, 47, 47); background-color: rgb(245, 178, 178);}
header img.logo {margin-top: 10px; margin-bottom: 10px; height: 120px;}

header .tools a {color: #1b2030;}
header .tools div form {margin-top: 4px !important;}
nav div ul.navbar-nav form input {margin-right: 0 !important; border-radius: .2rem 0 0 .2rem;}
header .tools div form button {/*border-radius: 0 .2rem .2rem 0;*/}
.btn_search {color: #fff; background-color: #d86662; border-color: #b44946;}
.btn_search:hover {background-color: #b94e4a; border-color: #b44946;}
header .tools div .dropdown a.dropdown-toggle {color: #fff !important; background-color: #d86662; border-color: #b44946;}
header .tools div .dropdown a.dropdown-toggle:focus {box-shadow: 0 0 0 .2rem #b44a464d !important;}
header .tools div .dropdown .dropdown-menu {padding-left: 0; padding-right: 0;}
@media (min-width: 575px) {
    .tools {height: 40px;}
}
@media (max-width: 575px) {
    .search_box {border-radius: .2rem .2rem 0 0;}
    .btn_search {border-radius: 0 0 .2rem .2rem;}
}
@media (min-width: 575px) {
    .search_box {border-radius: .2rem 0 0 .2rem;}
    .btn_search {border-radius: 0 .2rem .2rem 0;}
}

.main_header {padding-left: 20px; padding-right: 20px;}
.main_header .block {padding-top: 30px;}
.main_header .block i.square {height: 30px; width: 30px; background-color: #fc6f70; padding: 7px; border-radius: 3px;
    color: #fafafa;}
.main_header .block p {display: inline-block; font-size: 13px; font-weight: bold; color: #0d2f5d; margin-left: 10px;}

.navigation {background: #213755; color: #fff; text-align: right; font-family: "Roboto",sans-serif;
    font-weight: 300;}
.navbar-dark .navbar-nav .nav-link {color: rgba(255,255,255,.9);}
.navbar.navbar-dark .breadcrumb .nav-item .nav-link, .navbar.navbar-dark .navbar-nav .nav-item .nav-link {
    color: #fff;
}
.navbar-expand-lg .navbar-nav .nav-link {padding-right: 0.5rem; padding-left: 0.5rem;}
.navigation a {cursor: pointer; text-decoration: none;}
.navbar .mega-dropdown .dropdown-menu.mega-menu {width: 100%; border: none; border-radius: 0;}
.dropdown .dropdown-menu, .dropup .dropdown-menu, .dropleft .dropdown-menu, .dropright .dropdown-menu {
    padding: .5rem;
}
.navbar .dropdown-menu {position: absolute !important; margin-top: 0;}
.navbar-nav .dropdown-menu {position: static; float: none;}
.z-depth-1, .chip:active {
    -webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12) !important;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12) !important;
}
.special-color {background-color: #37474f !important;}
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 10rem;
    padding: 0.5rem 0;
    margin: 0.125rem 0 0;
    margin-top: 0.125rem;
    font-size: 1rem;
    color: #212529;
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 0.25rem;
}
.navbar .mega-dropdown {position: static;}
.navbar .mega-dropdown .dropdown-menu.mega-menu.v-2 .sub-menu .sub-title {
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}
.navbar .mega-dropdown .dropdown-menu.mega-menu .sub-menu .sub-title {border-bottom: 1px solid #e0e0e0;}
.white-text {color: #fff !important;}
.navbar .mega-dropdown .dropdown-menu.mega-menu.v-2 .sub-menu .news-title {color: #fff;}
.navigation h1, .navigation h2, .navigation h3, .navigation h4, .navigation h5, .navigation h6 {
    font-family: 'Oswald', sans-serif;
}
.navbar .mega-dropdown .dropdown-menu.mega-menu .sub-menu .news-title {
    font-size: 1.1rem;
    -webkit-transition: .2s;
    transition: .2s;
}
.navbar .mega-dropdown .dropdown-menu.mega-menu.v-2 .sub-menu ul li a {color: #fff;}
.navbar .mega-dropdown .dropdown-menu.mega-menu .sub-menu ul li a {width: 100%; -webkit-transition: .3s;
    transition: .3s;}
.navbar .dropdown-menu a {padding: 10px; padding-left: 10px; font-size: .9375rem; font-weight: 300;}
a {transition: all 0.2s ease-in-out;}
.navbar.navbar-dark .navbar-nav .nav-item .nav-link:hover {color: rgba(255,255,255,0.75);}
.navbar .mega-dropdown .dropdown-menu.mega-menu {
    width: 100%;
    border: none;
    border-radius: 0;
}
.navbar .dropdown-menu {
    position: absolute !important;
    margin-top: 0;
}
.special-color {
    background-color:
            #37474f !important;
}
.font-small {
    font-size: .9rem;
}
.view {
    position: relative;
    overflow: hidden;
    cursor: default;
}
.view img, .view video {
    position: relative;
    display: block;
}
.overlay .mask {
    opacity: 0;
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
.view .mask {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-attachment: fixed;
}
.navbar .mega-dropdown .dropdown-menu.mega-menu.v-2 .sub-menu .news-title {
    color:
            #fff;
}
.navbar .mega-dropdown .dropdown-menu.mega-menu.v-2 .sub-menu ul li a:hover {
    background: #333;
}
@media (max-width: 575px) {
    .col-xl-4 {max-width: 33.333333%;}
    .col-xl-3 {max-width: 25%;}
}



.carousel_container {position: relative; overflow: hidden;}
.carousel-caption {right: 0; left: 0; top: 20px; padding-top: 20px; padding-bottom: 20px; color: #fff;
    text-align: center;}
.carousel-caption div.title {text-align: left; margin-left: 30px; margin-top: 40px;}
.carousel-caption div.title p {color: #fafafa; font-size: 3.4vw; width: max-content; padding: 0 15px 0;}
.carousel-caption p.bg_red {background-color: #fc6f70;}
.carousel-caption p.bg_white {background-color: #fafafa; color: #0d2f5d !important; font-size: 23px; padding-left: 15px;
    padding-right: 15px; margin: 0;}
.carousel-caption p.sub_text {font-size: 1.7vw !important; margin-top: 40px;}
.carousel-control-prev, .carousel-control-next {z-index: 1;}

.carousel_overlay {-webkit-animation-name: pulse;	-webkit-animation-duration: 30s;
    -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; position: absolute;
    top: 0; left: 0; width: 100%; opacity: 0.3;}
@-webkit-keyframes pulse {
    from {
        background: #000;
    }
    25% {
        background-color: #003;
    }
    50% {
        background-color: #030;
    }
    to {
        background: #000;
    }
}
.carousel_overlay p {z-index: 0; color: rgba(0, 0, 0, 0);}
#fog, #fog-2 {position: absolute; top: 50%; left: 50%; width: 2000px; height: 2000px; margin-top: -1000px;
    margin-left: -1000px; opacity: .5; background: url(../images/images/fog.png) repeat-x 0 center;
    -webkit-animation-name: fogAnimation; -webkit-animation-duration: 30s; -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;}
#fog-2 {opacity: 1; -webkit-animation-duration: 120s;}
@-webkit-keyframes fogAnimation {
    from {
        -webkit-transform: rotate(0deg);
        background-position: 0 center;
    }
    to {
        -webkit-transform: rotate(360deg);
        background-position: 1000px center;
    }
}
#glow {position: absolute; top: 50%; left: 50%; width: 800px; height: 800px; margin: -400px 0 0 -400px;
    background: url(../images/images/glow.png) repeat-x 0 0; -webkit-animation-name: glowAnimation;
    -webkit-animation-duration: 5s;	-webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear;}
@-webkit-keyframes glowAnimation {
    from {
        opacity: 1;
    }
    50% {
        opacity: .75;
    }
    to {
        opacity: 1;
    }
}
#light {position: absolute; top: 50%; left: 50%; width: 800px; height: 800px; margin: -400px 0 0 -400px;
    background: url(../images/images/light.png) no-repeat center center; -webkit-animation-name: lightAnimation;
    -webkit-animation-duration: 1s; -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;}
@-webkit-keyframes lightAnimation {
    from {
        opacity: .25;
    }
    50% {
        opacity: .5;
    }
    to {
        opacity: .25;
    }
}
#stars, #stars-2, #small-stars, #small-stars-2 {position: absolute; top: 50%; left: 50%; width: 600px; height: 600px;
    margin: -300px 0 0 -300px; background: url(../images/images/stars-large.png) no-repeat center center;
    -webkit-animation-name: starsLarge; -webkit-animation-duration: 60s; -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;}
@-webkit-keyframes starsLarge {
    from {
        -webkit-transform: rotate(0deg) scale(3);
        opacity: .1;
    }
    to {
        -webkit-transform: rotate(360deg) scale(.5);
        opacity: 0;
    }
}
#stars-2 {-webkit-animation-name: starsLargeAlt; -webkit-animation-duration: 45s;
    -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear;}
@-webkit-keyframes starsLargeAlt {
    from {
        -webkit-transform: rotate(180deg) scale(3);
        opacity: .25;
    }
    to {
        -webkit-transform: rotate(360deg) scale(.5);
        opacity: 0;
    }
}
#small-stars, #small-stars-2 {background: url(../images/images/stars-small.png) no-repeat center center;
    -webkit-animation-duration: 15s; -webkit-animation-name: starsSmall;}
#small-stars-2 {-webkit-animation-name: starsSmallAlt; -webkit-animation-duration: 30s;}
@-webkit-keyframes starsSmall {
    from {
        -webkit-transform: rotate(360deg) scale(3);
        opacity: .25;
    }
    to {
        -webkit-transform: rotate(0deg) scale(.5);
        opacity: 0;
    }
}
@-webkit-keyframes starsSmallAlt {
    from {
        -webkit-transform: rotate(0deg) scale(3);
        opacity: .1;
    }
    to {
        -webkit-transform: rotate(360deg) scale(.5);
        opacity: 0;
    }
}

.header_cards {margin-top: -100px;}
.header_cards .card {background-color: #0d2f5d; overflow: hidden; padding-bottom: 10px;}
.header_cards .card .card-title {color: #d5a82b; font-size: 25px; text-justify: none;}
.header_cards .card i {color: #d5a82b;}
.header_cards .card .card_icon {padding: 25px 20px 0 40px;}
.header_cards .card a {margin-left: 20px; color: #fafafa; text-decoration: none; font-weight: normal;
    transition: all ease-in-out 0.2s;}
.header_cards .card a i {margin-left: 0px; transition: all ease-in-out 0.2s;}
.header_cards .card a:hover {font-weight: bold;}
.header_cards .card a:hover i {margin-left: 8px;}
/*----------------------------------------    main   --------------------------------------*/
main .current {margin-top: 0; padding-top: 30px;}
main .about {margin-top: 0; padding-top: 30px;}
main.bg_image {background: url(../images/main_bg.png) no-repeat;}
main section {margin-top: 40px; margin-bottom: 40px; text-align: justify;}
h6.main_subtitle {font-family: 'Merriweather', serif; font-size: 16px; font-weight: 500; margin-bottom: 17px;
    color: #555; position: relative;}
.about h6.main_subtitle::before {position: absolute; content: ""; top: 10px; width: 60px; height: 2px; left: 14%;
    background: #eb1b2b;}
h6.main_subtitle::before {position: absolute; content: ""; top: 35px; width: 60px; height: 2px;
    background: #eb1b2b;}
main section h1 {margin-top:40px; margin-bottom: 30px;}
main section p {margin-bottom: 20px;}
main section .about_image {padding-top: 50px;}

.icons {text-align: center;}
.icons i {color: #0c4560;}
.icons .content {border: 4px #ddd solid; padding: 50px; margin-top: 30px; margin-bottom: 30px; border-radius: 10px;}

.figures {border-bottom: #fc6f70 solid 2px;}
.figures a {color: #fc6f70; text-decoration: none; font-weight: 700;}
.figures a:hover {text-decoration: underline; text-decoration-color: #0d2f5d;}
.figures img {opacity: 0.8;}

/*----------------------------------------  counter   --------------------------------------*/
.sectionClass {
    padding: 20px 0px 0px 0px;
    position: relative;
    display: block;
    margin-bottom: 0;
}

.fullWidth {
    width: 100% !important;
    display: table;
    float: none;
    padding: 0;
    min-height: 1px;
    height: 100%;
    position: relative;
}


.sectiontitle {
    background-position: center;
    margin: 30px 0 0px;
    text-align: center;
    min-height: 20px;
}

.sectiontitle h2 {
    font-size: 30px;
    color: #222;
    margin-bottom: 0px;
    padding-right: 10px;
    padding-left: 10px;
}


.headerLine {
    width: 160px;
    height: 2px;
    display: inline-block;
    background: #101F2E;
}


.projectFactsWrap{
    display: flex;
    margin-top: 30px;
    flex-direction: row;
    flex-wrap: wrap;
}


#projectFacts .fullWidth{
    padding: 0;
}

.projectFactsWrap .item{
    width: 25%;
    height: 100%;
    padding: 50px 0px;
    text-align: center;
}

.projectFactsWrap .item:nth-child(1){
    background: rgb(16, 31, 46);
}

.projectFactsWrap .item:nth-child(2){
    background: rgb(18, 34, 51);
}

.projectFactsWrap .item:nth-child(3){
    background: rgb(21, 38, 56);
}

.projectFactsWrap .item:nth-child(4){
    background: rgb(23, 44, 66);
}

.projectFactsWrap .item p.number{
    font-size: 40px;
    padding: 0;
    font-weight: bold;
}

.projectFactsWrap .item p{
    color: rgba(255, 255, 255, 0.8);
    font-size: 18px;
    margin: 0;
    padding: 10px;
    font-family: 'Open Sans';
}


.projectFactsWrap .item span{
    width: 60px;
    background: rgba(255, 255, 255, 0.8);
    height: 2px;
    display: block;
    margin: 0 auto;
}


.projectFactsWrap .item i{
    vertical-align: middle;
    font-size: 50px;
    color: rgba(255, 255, 255, 0.8);
}


.projectFactsWrap .item:hover i, .projectFactsWrap .item:hover p{
    color: white;
}

.projectFactsWrap .item:hover span{
    background: white;
}

@media (max-width: 786px){
    .projectFactsWrap .item {
        flex: 0 0 50%;
    }
}
/*----------------------------------------    news    --------------------------------------*/
.news_events {
    background: url("../images/newsevents2.png") no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    padding: 50px;
}
.news_events .trans {background: rgba(255, 255, 255, 0.95); border-radius: 5px;}
.news_events .card-deck {margin-bottom: 0;}
.news_events .card {background-color: transparent !important;}
.card .card-title {margin-bottom: 24px; position: relative;}
.card .card-title i {margin-right: 15px;}
.card .date {margin: 0px; width: 50px; text-align: center;}
.card .date .month {background-color: #f99a9a; font-size: 14px; font-weight: bold; color: white;
    text-transform: lowercase; border: #bf5d5e  1px solid; border-radius: 4px 4px 0 0; padding: 0px 4px;}
.card .date .day {color: #f99a9a; font-weight: bold; border: #bf5d5e 1px solid; padding: 0px 8px;}
.btn_yellow {background-color: #e98890; color: #555; box-shadow: 0px; transition: all ease-in 0.2s;}
.btn_yellow:hover {background-color: #fc6f70; color: white; box-shadow: 3px 3px 5px rgba(85, 85, 85, 0.459);}
@media (max-width: 1200px) {.main_news .card .media-body {margin-left: 12px;}}

.news_events .main_news .card-footer {background: transparent; border: none; padding: 0;}
.news_events .main_news .card-footer .btn_yellow {border-radius: 0;}
/*----------------------------------------    main    --------------------------------------*/
.box1 img,.box1:after,.box1:before{width:100%;transition:all .3s ease 0s}
.box1 .icon,.box2,.box3,.box4,.box5 .icon li a{text-align:center}
.box10:after,.box10:before,.box1:after,.box1:before,.box2 .inner-content:after,.box3:after,.box3:before,.box4:before,.box5:after,.box5:before,.box6:after,.box7:after,.box7:before{content:""}
.box1,.box11,.box12,.box13,.box14,.box16,.box17,.box18,.box2,.box20,.box21,.box3,.box4,.box5,.box5 .icon li a,.box6,.box7,.box8{overflow:hidden}
.box1 .title,.box10 .title,.box4 .title,.box7 .title{letter-spacing:1px}
.box3 .post,.box4 .post,.box5 .post,.box7 .post{font-style:italic}

.box7 {position:relative; text-align: center;}
.box7:after,.box7:before {width: 100%; height: 100%; background: rgba(11,33,47,.9); position: absolute; top: 0;
    left: 0; opacity: 0; transition: all .5s ease 0s;}
.box7:after {background: rgba(255,255,255,.3); border: 2px solid #d5a82b; top: 0; left: 170%; opacity: 1; z-index: 1;
    transform: skewX(45deg); transition: all 1s ease 0s;}
.box7:hover:before{opacity:1}
.box7:hover:after{left:-170%}
.box7 img{width:100%;height:auto; margin-top: 40px;}
.box7 .box-content{width:100%;position:absolute;bottom:-100%;left:0;transition:all .5s ease 0s}
.box7:hover .box-content{bottom:30%}
.box7 .title{display:block;font-size:22px;font-weight:700;color:#fff;margin:0 0 10px}
.box7 .post{display:block;font-size:15px;font-weight:600;color:#fff;margin-bottom:10px}
.box7 .icon{margin:0}
.box7 .icon li{display:inline-block}
.box7 .icon li a {display:block; width:35px; height:35px; line-height:35px; border-radius:50%; background:#fc6f70;
    font-size:18px; color:#fff; margin-right:10px; transition:all .5s ease 0s;}
.box8 .icon li,.box8 .title{display:inline-block}
.box7 .icon li a:hover {transform:rotate(360deg); text-decoration: none;}
@media only screen and (max-width:990px){.box{margin-bottom:30px}}
/*------------------------------------------------------------------------------------------*/
/*-------------------------------------    footer   ----------------------------------------*/

footer {background: #1b2030; padding-top: 60px; padding-bottom: 10px; font-size: 13px; text-align: justify;}
footer p {color: #e6e6e6; margin-top: 30px; margin-bottom: 30px;}
footer div.links_container {padding-left: 40px;}
footer div.links_container .social {padding-top: 20px;}
footer div.links_container .social a {color: #d5a82b; font-size: 17px; margin: 20px 20px 0;}
footer div.links_container .social a:hover {text-decoration: none;}
footer div.links_container .social a:hover i {color: #978350;}
footer h3 {color: #d5a82b; margin-bottom: 40px;}
footer ul.links {margin-left: 20px;}
footer ul.links li {margin-top: 10px; margin-bottom: 10px;}
footer ul.links li a {color: #d5a82b;}
footer ul.links li a::before {content: "\f101"; font-family: "Font Awesome 5 Free"; font-weight: 900;
    color: #d5a82b; position: absolute; left: 40px; opacity: 1;}
footer .quick_links ul li a:hover {text-decoration: none; margin-left: 5px; font-weight: bold;
    transition: all ease-in-out 0.4s; color: #e6e6e6;}
footer .quick_links ul li a:hover::before {opacity: 0;}
footer .contacts {color: #e6e6e6;}
footer .contacts address {color: #e6e6e6; margin-bottom: 0;}
footer .contacts address span {color: #d5a82b;}
footer .contacts address span a {color: #d5a82b;}
footer .contacts address span a:hover {color: #5f5e5b; text-decoration: underline;}
footer .copyright {font-size: 15px; text-align: center; border-top: #5c5134 solid 1px;
    margin-top: 40px;}
footer .copyright p {color: #d5a82b;}


/* small devices */
@media (min-width: 576px) {}
@media (min-width: 768px) {
    /*.main_header .block {width: 250px;}*/
}
@media (min-width: 992px) {}
@media (min-width: 1200px) {}
@media (max-width: 575.98px) {}
@media (max-width: 767.98px) {}
@media (max-width: 991.98px) {
    .carousel-caption div.title p {font-size: 38px;}
}
@media (max-width: 1199.98px) {}
@media (max-width: 1080px) {}
@media (max-width: 960px) {}
@media (max-width: 840px) {}
@media (max-width: 600px) {}
@media (max-width: 400px) {}
@media (max-width: 575.98px) {}
@media (min-width: 576px) and (max-width: 767.98px) {}
@media (min-width: 768px) and (max-width: 991.98px) {}
@media (min-width: 992px) and (max-width: 1199.98px) {}
@media (min-width: 1200px) {}




















h1, h2, h3 {font-family: 'Cairo', sans-serif;
    /*font-family: 'Oswald', sans-serif;*/
    color: #0c4560; font-weight: normal; font-size: 38px; letter-spacing: -2px; margin-top: 40px;
    margin-bottom: 30px;}
h4 {font-family: 'Cairo', sans-serif; color: #0c4560; font-weight: normal; font-size: 24px;
     margin-bottom: 20px;

   /* width:300px;*/
}
.bg-gray-100 .box-process {background-color: #ffffff;}
.box-process {padding: 30px;}
.context-light, .bg-gray-100 {color: rgba(21, 21, 21, 0.9);}
.box-process-header {display: flex; align-items: center; margin-bottom: -15px;
    margin-left: -15px;}
.box-process h4 {color: #0c4560; font-family: 'Cairo' sans-serif; font-size: 1.5rem;
    letter-spacing: normal;}
.box-process .icon.icon-circle {background-color: transparent; color: #fc6f70;
    flex-shrink: 0; padding: 15px 0px 0px 15px;}
.icon-circle.icon-md {width: 70px; height: 70px;}
.icon-circle.icon-primary {background-color: #fc6f70; color: #ffffff;}
.icon-effect-4 {position: relative; z-index: 1; box-shadow: 0 0 0 3px #fc6f70;
    overflow: hidden; transition: background 0.3s, color 0.3s, box-shadow 0.3s;}
.icon-circle {display: flex; align-items: center; justify-content: center; border-radius: 50%;}
.icon {display: inline-block; font-size: 16px; line-height: 1;}
.box-process-header > * {display: inline-block; margin-top: 0; margin-bottom: 15px;
    margin-left: 15px;}
.icon-md {font-size: 35px;}
.icon-effect-4::before {display: block; -webkit-font-smoothing: antialiased;}
.icon::before {position: absolute; top: 25%; right: 50%; margin-right: -21px;
    display: inline-block; font-style: normal; text-transform: none;}
.box-process .icon.icon-circle {background-color: transparent; color: #fc6f70; flex-shrink: 0;}
.box-process:hover .icon.icon-circle {
    background: rgba(252, 111, 112, 0.78);
    box-shadow: 0 0 0 8px rgba(252, 111, 112, 0.27);
    color: #ffffff;
}
.box-process:hover .icon.icon-circle:before {
    -moz-animation: toBottomFromTop 0.3s forwards;
    -webkit-animation: toBottomFromTop 0.3s forwards;
    animation: toBottomFromTop 0.3s forwards;
}
.box-process-body {margin-top: 15px;}
.box-process-body p {padding-right: 25px;}
.box-process * + .list-marked {margin-top: 15px;}
@media (min-width: 1200px) {
    .box-process {padding: 30px;}
    .box-process-body {margin-top: 40px;}
    .box-process * + .list-marked {margin-top: 28px;}
}
@keyframes slideOutDown {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    100% {
        visibility: hidden;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }
}
.slideOutDown {-webkit-animation-name: slideOutDown; animation-name: slideOutDown;}
@-webkit-keyframes toBottomFromTop {
    49% {
        -webkit-transform: translateY(100%);
    }
    50% {
        opacity: 0;
        -webkit-transform: translateY(-100%);
    }
    51% {
        opacity: 1;
    }
}
@-moz-keyframes toBottomFromTop {
    49% {
        -moz-transform: translateY(100%);
    }
    50% {
        opacity: 0;
        -moz-transform: translateY(-100%);
    }
    51% {
        opacity: 1;
    }
}
@keyframes toBottomFromTop {
    49% {
        transform: translateY(100%);
    }
    50% {
        opacity: 0;
        transform: translateY(-100%);
    }
    51% {
        opacity: 1;
    }
}
.contacts_form {margin-top: 40px; margin-bottom: 60px;}
.contacts {margin-top: 30px; margin-bottom: 40px; border-left: 1px solid #ccc;}
.btn_red {color: #fff !important; background-color: #fc6f70; border-color: #b44946;
    float: left;}
.btn_red:hover {background-color: #fc6f70dd;}
.fa-ul p {display: inline;
    margin-right: 20px;}
.fa-ul i {color: #fc6f70;}

/*------Faculties-----------*/
 section.faculties h4 span {margin-right: 70px; font-family: Arial, Helvetica, sans-serif; font-size: 90%;}
            section.faculties p {font-size: 18px;}  /* arabic only */
            section.faculties .row article {padding-bottom: 30px; position: relative;}
            section.faculties .row article::after {content: ''; position: absolute; width: 40%; height: 2px; 
            background-color: #d5a82b; display: block; margin-top: 25px;}
/*----------------------------*/


/* RESET STYLES & HELPER CLASSES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
:root {
  --level-1: #7b9fe0;
  --level-2: #7b9fe0;
  --level-22: #7b9fe0;
  --level-3: #7b9fe0;
  --level-4: #7b9fe0;
  --black: black;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

ol {
  list-style: none;
}

body {
  margin: 50px 0 100px;
  text-align: center;
  font-family: "Inter", sans-serif;
}

.container {
  max-width: 1000px;
  padding: 0 10px;
  margin: 0 auto;
}

.rectangle {
  position: relative;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
      border-radius: 10%;
}



/* LEVEL-1 STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.level-1 {
  width: 50%;
  margin: 0 auto 40px;
  background: var(--level-1);
  border-radius: 50%;
}

.level-1::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 20px;
  background: var(--black);
}

/* LEVEL-22 STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.level-22-wrapper {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.level-22 {
  width: 70%;
  margin: 0 auto 40px;
  background: var(--level-2);
}


/* LEVEL-2 STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.level-2-wrapper {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  direction: rtl;
}

.level-2-wrapper::before {
    content: "";
    position: absolute;
    top: -20px;
    left: 18%;
    width: 66.3%;
    height: 2px;
    background: var(--black);

}

.level-2-wrapper::after {
  display: none;
  content: "";
  position: absolute;
  left: -20px;
  bottom: -20px;
  width: calc(100% + 20px);
  height: 2px;
  background: var(--black);
}

.level-2-wrapper li {
  position: relative;
}

.level-2-wrapper > li::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 55.6%;
  transform: translateX(-50%);
  width: 2px;
  height: 20px;
  background: var(--black);
}

.level-2 {
  width: 70%;
  margin: 0 auto 40px;
  background: var(--level-2);
}

.level-2::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 20px;
  background: var(--black);
}

.level-2::after {
  display: none;
  content: "";
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(-100%, -50%);
  width: 20px;
  height: 2px;
  background: var(--black);
}


/* LEVEL-3 STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.level-3-wrapper {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 20px;
  width: 90%;
  margin: 0 auto;
}

.level-3-wrapper::before {
  content: "";
  position: absolute;
  top: -20px;
  left: calc(25% - 5px);
  width: calc(50% + 10px);
  height: 2px;
  background: var(--black);
}

.level-3-wrapper > li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -100%);
  width: 2px;
  height: 20px;
  background: var(--black);
}

.level-3 {
  margin-bottom: 20px;
  background: var(--level-3);
}


/* LEVEL-4 STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.level-4-wrapper {
  position: relative;
  width: 80%;
  margin-left: auto;
}

.level-4-wrapper::before {
  content: "";
  position: absolute;
  top: -20px;
  left: -20px;
  width: 2px;
  height: calc(100% + 20px);
  background: var(--black);
}

.level-4-wrapper li + li {
  margin-top: 20px;
}

.level-4 {
  font-weight: normal;
  background: var(--level-4);
}

.level-4::before {
 content: "";
position: absolute;
top: 50%;
right: 0%;
transform: translate(100%, -50%);
width: 20px;
height: 2px;
background: var(--black);
}


/* MQ STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (max-width: 700px) {
  .rectangle {
    padding: 20px 10px;
  }

  .level-1,
  .level-2 {
    width: 100%;
  }

  .level-1 {
    margin-bottom: 20px;
  }

  .level-1::before,
  .level-2-wrapper > li::before {
    display: none;
  }
  
  .level-2-wrapper,
  .level-2-wrapper::after,
  .level-2::after {
    display: block;
  }

  .level-2-wrapper {
    width: 90%;
    margin-left: 10%;
  }

  .level-2-wrapper::before {
    left: -20px;
    width: 2px;
    height: calc(100% + 40px);
  }

  .level-2-wrapper > li:not(:first-child) {
    margin-top: 50px;
  }
}


/* FOOTER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.page-footer {
  position: fixed;
  right: 0;
  bottom: 20px;
  display: flex;
  align-items: center;
  padding: 5px;
}

.page-footer a {
  margin-left: 4px;
}


.level-1.rectangle {
    display: block !important;
    text-align: center;
    color: #000;
}



.level-2.rectangle {
    color: #000 !important;
    font-size: 20px !important;
}

.level-22.rectangle {
    color: #000 !important;
    font-size: 20px !important;
}



.level-4.rectangle {
    color: #000;
    font-size: 15px;
}

/*******************************************************************/















/*****************************************************************/