/*** Fonts ***/

@import url('https://fonts.googleapis.com/css?family=Oswald:200,400,600');
@import url('https://fonts.googleapis.com/css?family=Cairo');

@font-face {
    font-family: 'Ubuntu Condensed';
    src: url('../fonts/EN/Ubuntu-Condensed/UbuntuCondensed-Regular.woff2') format('woff2'),
        url('../fonts/EN/Ubuntu-Condensed/UbuntuCondensed-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/*** Standerd Global CSS ***/
html {padding: 0; margin: 0;}
body {padding: 0; margin: 0 auto; font: 200 .93rem 'Cairo'; color: #555555; /*line-height: 1.6rem;*/}

/* Backgroun Colors */
.white-color {background: #ffffff}
.offWhite-color {background: #f6f6f6}
.whiteGray-color {background: #e5e5e5}
.gray-color {background: #cccccc}
.babyBlue-color {background: #00bcf5}
.blue-color {background: #003284}
.orange-color {background: #ffbd00}

/* images style */
/*img {max-width: 100%; height: auto}*/

.clear {clear: both;}

div, ::after, ::before { transition: ease 0.2s; -moz-transition: ease 0.2s; -webkit-transition: ease 0.2s; -o-transition: ease 0.2s; -ms-transition: ease 0.3s}
a, .btn {text-decoration: none !important; cursor: pointer; transition: ease 0.2s; -moz-transition: ease 0.2s; -webkit-transition: ease 0.2s; -o-transition: ease 0.2s; -ms-transition: ease 0.3s}

a:focus, button:focus { outline:none;}
/* Button Styles */
.btn {font-family: 'Ubuntu Condensed'; border-radius: 0;}
.btn-primary {background-color: #bbbbbb; font-size: 1.2rem; color: #002f8a; font-weight: 200; padding: 10px 25px; border: none; transition: ease 0.3s; -moz-transition: ease 0.3s; -webkit-transition: ease 0.3s; -o-transition: ease 0.3s; -ms-transition: ease 0.3s}
.btn-primary:hover {background-color: #f6b100; color: #002f8a; box-shadow: none !important;}
.btn-center {display: table; margin: auto;}

/* Titles Styles */
h1, h2, h3, h4, h5, h6 {position: relative; padding: 0; margin: 0; font-family: 'Ubuntu Condensed'}
h1 {font-size: 2rem;}
h2 {font-size: 1.3rem;}
h3 {font-size: 1rem;}
h4 {font-size: .9rem;}
h5 {font-size: .85rem;}
h6 {font-size: .8rem;}
h1.center, h2.center, h3.center {display: table; margin-right: auto; margin-left: auto; text-align: center;}
h1 {color: #0143b0; height: 40px; padding: 0; margin: 0 0 20px 0;}
h1.blue {color: #0143b0;}
h1.darkBlue {color: #002663;}
h1.white {color: #ffffff;}
h1.whiteBG {display: table; background: #ffffff; padding: 0 40px;}
h1.orangeLeftline::before, h1.orangeUnderline::after, h1.blueUnderline::after, h1.whiteUnderline::after {content: ''; position: relative; display: block; width: 60px; height: 0.3rem; z-index: 2;}
h1.orangeLeftline::before {background: #f6b100; position: absolute; right: -60px; bottom: 1.15rem;}
h1.orangeUnderline::after {background: #f6b100; margin: 10px auto 0 auto;}
h1.blueUnderline::after {background: #00184a; margin: 10px auto 0 auto;}
h1.whiteUnderline::after {background: #ffffff; margin: 10px auto 0 auto;}

h2 {margin-bottom: 15px; color: #f8b800;}
h2.blue {color: #0143b0;}
h2.whiteBG {display: table; background: #ffffff; padding: 0 20px;}
h2.orangeLeftline::before, h2.orangeUnderline::after, h2.whiteUnderline::after {content: ''; position: relative; display: table; width: 35px; height: 0.25rem; z-index: 1;}
h2.orangeLeftline::before {background: #f6b100; position: absolute; right: -35px; bottom: .56rem; z-index: 0; top:11px;}
h2.orangeUnderline::after {background: #f6b100; margin: 10px auto 0 auto;}
h2.whiteUnderline::after {background: #ffffff; margin: 10px auto 0 auto;}

h3 {color: #00184a; margin-bottom: 10px;}

p {text-align: justify; line-height: 1.65rem;}
p.text-center-justify {text-align: justify; text-align-last: center;}

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

section {position: relative; width: 100%; height: auto; padding: 80px 0;}

@media (max-width: 991px){
    h1 {font-size: 1.7rem;}
    section {padding: 40px 0;}
}
/*** End Standerd Global CSS ***/

/*** Header Top Bar Styles ***/
.topLimks-container {width: 100%; background: #e8eff8; min-height: 50px; padding: 5px 0; /*margin-top: -207px;*/}

/* Top Social Media Styles */
.topSocialMediaContainer a.language {display: none;}
a.topSocialMedia {display: inline-block; width: 28px; height: 28px; border-radius: 50%; padding: 6px 0 0 0; margin: 7px 3px; opacity: 0.7; color: #e8eff8; font-size: 14px; text-align: center;}
a.topSocialMedia:hover {opacity: 1;}
a.facebook {background-color: #00257c}
a.twitter {background-color: #0099ff}
a.youtube {background-color: #bd0100}
/*- Mobile View Style -*/
@media (max-width: 991px){
    .topSocialMediaContainer {text-align: center;}
    .topSocialMediaContainer a.language {display: inline-block;}
    .topLanguageContainer {display: none;}
}

/* Top Short Links Styles */
a.toplinks {color: #002055; font-size: .65rem; display: inline-table; padding: 12px 5px; margin: 0 auto;}
a.toplinks:hover {color: #f4b000}

/* Search Styles */
.search-container, .search-collapse-container {position: relative; width: 95%; margin: 4px auto; text-align: center;}
.search-collapse-container {display: none;}
.search-container form, .search-collapse-container form {margin: 0;}
.search-container input, .search-collapse-container .search-colapced-palceholder {width: 100% !important; height: 36px; border: 1px #bbbbbb solid; border-radius: 18px; padding: 5px 44px 5px 10px; margin: 0 auto; font-size: 12px; color: #444444;}
.search-container .btn, .search-collapse-container .btn {position: absolute; right: 4px !important; top: 4px; border: none; border-radius: 0 16px 16px 0;}
.search-container .btn {background-color: #002f7c; color: #ffffff; padding: 6px;}
.search-container .btn:hover{background-color: #f8b800; color: #002f7c;}
/*- Mobile View Styles -*/
@media (max-width: 991px){
    .search-container {display: none;}
    .search-collapse-container {display: block; margin: 10px auto;}
    .search-collapse-container .search-colapced-palceholder {height: 44px; border-radius: 18px; padding: 10px 55px 10px 18px;}
    .search-collapse-container input[type=text]:focus {outline: none !important;}
    .search-collapse-container .search-colapced-btn {right: 4px; padding: 10px; background-color: #f8b800; color: #002f7c;}
    .search-collapse-container .search-colapced-btn:hover {background-color: #002f7c; color:#ffffff;}
}

/* Language Styles */
.topLanguageContainer {text-align: right;}
a.language {display: inline-block; background-color: #002f7c; width: 28px; height: 28px; border-radius: 50%; padding: 5px 0 0 0; margin: 7px 3px; font-family: 'Oswald'; font-size: .8rem; font-weight: 600; color: #e8eff8; text-align: center;}
a.language:hover {background-color: #f8b800; color:#002055;}
/*** End Header Top Bar Styles ***/

/*** Logo Styles ***/
.logoContainer {position: relative; width: 100%; margin-bottom: -207px;}
.logo {position: relative; display:table; margin: 0 auto; padding: 0; max-width: 100%; top: -25px;}
.logo img, .logoMobileView img {display: table; border:none; padding: 0; margin: 0 auto; width: 100%; max-width: 366px; height: auto;}
.logoMobileView {display: none; position: relative; width: 100%; margin: 5px 0;}
.logoMobileView img {max-width: 190px;}
/*- mobile View Style -*/
@media (min-width: 768px) and (max-width: 1023px){
    .logoContainer {margin-bottom: -170px;}
    .logo {top: -21px;}
    .logo img {max-width: 300px;}
}
@media screen and (max-width: 767px){
    .logoContainer {display: none}
    .logoMobileView {display: block;}
    .main-header-bg {display: none;}
}
/*** End Logo Styles ***/

/*** End Header BG Styles ***/
.main-header-bg {clear: both; width: 100%; padding: 0; margin: 0;}
.main-header-bg img {width: 100%; height: auto; max-height: 400px; padding: 0; margin: 0;}
/*** End Header BG Styles ***/

/*** Navigation Styles ***/
.navContainer {width: 100%; min-height: 58px; background-color: #003284; font-family: 'Ubuntu Condensed'; font-weight: 200; font-size: 16px;}
.navContainer nav, .navContainer ul.navbar-nav {width: 100%; padding: 0; margin: 0;}
.navLable {display: none;}
.navContainer a.nav-link {padding: 1.26rem 1.85rem !important; color: #ffffff;}
@media (min-width: 992px) and (max-width: 1199px){
    .navContainer a.nav-link {padding: 1.26rem 1rem !important;}
}
.navContainer a.nav-link {position: relative; color: #ffffff !important; z-index: 1;}
.navContainer a.nav-link i {font-size: 36px;}
.navContainer a.active {padding: 0.74rem 1.6rem !important; background-color: #f6b100; color: #002663 !important;}

/* Animation Styles */
.navContainer a.nav-link:hover, .navContainer a.nav-link:focus {color: #002663 !important;}
.navContainer a.nav-link:focus {background-color: #f6b100;}
.navContainer a.nav-link::before {content:''; position: absolute; display:block; width:100%; height:0px; background:#f6b100; bottom: 0px; left: 0; z-index: -1; cursor: pointer;}
.navContainer a.nav-link:hover::before {height: 100%;}

/* Navbar Toggle*/
.navbar-dark .navbar-toggler {border: 1px rgba(255,255,255,.7) solid; border-radius: .50rem; margin: 10px 18px auto; padding: .35rem .65rem; font-size: 1.0rem;}

/*- Mobile Menyu Setting -*/
@media (max-width: 991px){
    .navLable {display: block; color: rgba(255,255,255,.8); font-size: 18px; padding: 0; margin: 15px auto auto 0;}
    .navContainer ul.navbar-nav {background: #003790; margin: 15px auto 0; max-height: 280px; overflow-y: auto;}
    .navContainer li.nav-item {border-bottom: 1px rgba(255,255,255,.2) solid;}
    .navContainer a.nav-link, .navContainer a.active {padding: 0.7rem 1rem !important;}
    /* Animation Styles */
    .navContainer a.nav-link:hover {color: #ffffff !important;}
    .navContainer a.nav-link:focus {color: #002663 !important;}
    .navContainer a.nav-link::before {content:''; position: absolute; display: block; width: 0px; max-height: 3px; background: #f6b100; bottom: 0px; right: 0; z-index: -1; cursor: pointer;}
    .navContainer a.nav-link:hover::before {width: 100%;}
}
/*** End Navigation Styles ***/

/*** About Section Styles ***/
.aboutContainer, .creationContainer {position: relative; width: 72.2%; border: 0.3rem #bbbbbb solid;}
.aboutContainer {float: right; padding: 60px 60px 60px 120px;}
.creationContainer {float: left; padding: 60px 120px 60px 60px; margin-top: 60px;}
.aboutContainer h1.whiteBG, .creationContainer h1.whiteBG {margin-top: -82px;}
.aboutRightImg, .creationLeftImg {position: relative; width: 100%; max-width: 375px; height: 290px; background: center top; background-size: cover; border: 1px #b2b2b2 solid;}
.aboutRightImg {float: left; margin: -4.9rem 0 0 -445px; box-shadow: 15px 15px 0 #bbbbbb;}
/*.creationLeftImg {float: left; margin: -4.9rem 0 0 -445px; box-shadow: 15px 15px 0 #bbbbbb;}*/
.creationLeftImg {float: right; margin: -4.9rem -445px 0 0; box-shadow: -15px 15px 0 #bbbbbb;}
.aboutContainer .textContainer {width: 100%;}
.aboutContainer p, .creationContainer p {float: left;}
.aboutContainer a.btn-primary, .creationContainer a.btn-primary {display: table; bottom: -5px; margin: 20px auto -65px;}
/*- Mobile View Style -*/
@media (max-width: 991px){
    .aboutContainer, .creationContainer {width: 100%; padding: 60px 40px;}
    h1.whiteBG {margin: 0 auto 30px auto; text-align: center; font-size: 1.5rem;}
    .aboutContainer h1.orangeLeftline::before, .creationContainer h1.orangeLeftline::before {display: none !important;}
    .aboutRightImg, .creationLeftImg {display: block; float: none; max-width: 100%; height: 320px; margin: 0 auto 20px auto; box-shadow: none !important;}
}
@media (min-width: 992px){
    .aboutContainer h1.orangeUnderline::after, .creationContainer h1.orangeUnderline::after {display: none !important;}
}
@media (min-width: 992px) and (max-width: 1199px){
    .aboutContainer, .creationContainer {width: 67%;}
}
/* Modal Container Styles */
.modal-open .modal {background: rgba(0,20,50,.7);}
.modalContainer .modal-dialog {max-width: 95%; margin: 3rem auto;}
.modalContainer .modal-content {border: 1px solid rgba(0,0,0,.3); border-radius: 1rem; box-shadow: 0 0 10px rgba(0,0,0,.5);}
.modalContainer .modal-header {border: 0; padding: .7rem 1.5rem .1rem;}
.modalContainer .modal-body {padding: 0rem 1.5rem;}
.modalContainer .modal-body h2 {font-size: 1.2rem;}
.modalContainer .modal-footer {padding: .2rem  1.5rem 1.5rem; border: 0;}
.modalContainer .btn-primary {border-radius: 1rem; color: #ffffff; background: #0143b0;}
.modalContainer .btn-primary:hover, .modalContainer .btn-primary:focus {background: #f6b100;}

/*** End About Section Styles ***/

/*** Services Section Styles ***/
.servicesSectionBg {background: url('../img/services-bg.jpg') center top no-repeat; background-size: cover;}
.servicesContainer {position: relative; width: 90%; margin: 0 auto;}
/*** End Services Section Styles ***/

/*** Activities Section Styles ***/
.activitiesLeftContainer, .activitiesRightContainer {position: relative; width: 66.3%; min-height:422px; border: 5px #bbbbbb solid; margin: 30px 0 30px 0;}
.activitiesLeftContainer {float: right; padding: 30px 30px 30px 90px;}
.activitiesRightContainer {float: left; padding: 30px 90px 30px 30px;}
.activitiesLeftContainer h2.whiteBG, .activitiesRightContainer h2.whiteBG {padding: 0 15px; margin-top: -46px; font-size: 1.4rem;}
.activitiesRightImg, .activitiesLeftImg {position: relative; display: block; height: 175px; width: 100%; background: center top no-repeat; background-size: cover; border: 1px #b2b2b2 solid;}
.activitiesRightImg {float: left; margin: -49px 0 0 -290px; box-shadow: 15px 15px 0 #bbbbbb;}
.activitiesLeftImg {float: right; margin: -49px -290px 0 0; box-shadow: -15px 15px 0 #bbbbbb;}
.activitiesLeftContainer .textContainer {width: 100%;}
.activitiesLeftContainer p, .activitiesRightContainer p {float: right; max-height: 422px; overflow: hidden;}
.activitiesLeftContainer a.btn-primary, .activitiesRightContainer a.btn-primary {display: table; bottom: -5px; margin: 20px auto -34px;}
/*- Mobile View Style -*/
@media (max-width: 991px){
    .activitiesLeftContainer, .activitiesRightContainer {width: 100%; padding: 30px 15px; margin-bottom: 30px;}
    h2.whiteBG {margin: 0 auto 30px auto; text-align: center;}
    .activitiesLeftContainer h2.orangeLeftline::before, .activitiesRightContainer h2.orangeLeftline::before {display: none;}
    .activitiesRightImg, .activitiesLeftImg {float: none; max-height: 280px; margin: 0 auto 10px auto; box-shadow: none !important;}
}
@media (min-width: 992px){
    .activitiesLeftContainer h2.orangeUnderline::after, .activitiesRightContainer h2.orangeUnderline::after {display: none;}
}    
@media (min-width: 992px) and (max-width: 1199px){
    .activitiesLeftContainer, .activitiesRightContainer {width: 68.2%;}
    .activitiesLeftContainer h2.orangeLeftline::before, .activitiesRightContainer h2.orangeLeftline::before {bottom: .40rem;}
    .activitiesLeftContainer h2.whiteBG, .activitiesRightContainer h2.whiteBG {font-size: 1.12rem; margin-top: -45px;}
    .activitiesLeftContainer {padding: 30px 20px 20px 80px;}
    .activitiesRightContainer {padding: 30px 80px 20px 20px;}
    .activitiesRightImg {margin: -50px 0 0 -240px;}
    .activitiesLeftImg {margin: -50px -240px 0 0;}
    .activitiesLeftContainer a.btn-primary, .activitiesRightContainer a.btn-primary {margin: 20px auto -24px; font-size: 1.1rem;}
}
/*** End Activities Section Styles ***/
    
/*** Photo Album Section Style ***/
.photoAlbum {background: #c9ced7;}
.photoAlbumContainer {position: relative; width: 90%; margin: 0 auto;}    
/*** End Photo Album Section Style ***/

/*** Contact Us Section Styles ***/
.contactUs {background: #f7b400;}
.ourContacts li {clear: both; margin-bottom: 25px;}
.ourContacts i {display: block; float: left; width: 100px; height: 100px; background: #001135; text-align: center; font-size: 3.3rem; color: #ffc600; border: 10px #ffe075 solid; border-radius: 100%; padding-top: 14px; margin: 0 20px 10px 0;}
.ourContacts .contactNumberContainer {padding-top: 30px;}
.ourContacts p {margin: 0; font: normal 600 1.5rem 'Oswald'; color: #000000; text-align: left; line-height: 1.8rem; letter-spacing: -.07rem;}
/* Google Map Styles */
.gMap {width: 100%; height: 100%; min-height: 300px; max-height: 450px; border: 1px #ffffff solid; box-shadow: 0 0 8px rgba(0,0,0,.5);}
/* Mobile View Styles */
@media (max-width: 767px){
    .ourContacts {margin: 0 auto; text-align: center;}
    .ourContacts li {display: inline-table; margin: 0 auto 20px auto;}
    .ourContacts i {display: block; float: none; width: 60px; height: 60px; padding-top: 8px; margin: 0 auto 8px auto; border-width: 5px; font-size: 2rem;}
    .ourContacts .contactNumberContainer {padding: 0 10px;}
    .ourContacts p {margin: 0; font-size: .88rem; line-height: 1.2rem; letter-spacing: -.03rem;}
    .gMap {margin-top: 20px;}
}
@media (min-width: 768px) and (max-width: 991px){
    .ourContacts .contactNumberContainer {padding-top: 15px;}
    .ourContacts i {width: 80px; height: 80px; font-size: 2.6rem; border-width: 7px; padding-top: 13px; margin: 0 12px 10px 0;}
    .ourContacts p {font-size: 1.23rem;}
}
/*** End Contact Us Section Styles ***/

/*** Footer Styles ***/
footer {background: #001b47; font-size: .8rem; color: #b0b0b0; line-height: 1.3rem;}
footer h2 {font-size: 1.2rem;}
footer ul {margin-bottom: 30px;}
footer ul a {position: relative; color: #b0b0b0;}
footer ul a:hover, footer ul a:focus {color: #f7b400;}
footer ul a::after {content: ''; position: absolute; display: block; background: #f7b400; width: 0; height: .05rem; right: 18px; bottom: 0;}
footer ul a:hover::after {width: 93%;}
.copyr-ight {background: #00173c; padding: 30px 0; text-align: center; color: #5f687b;}
.copyr-ight p {margin: 0;}
.copyr-ight a, .copyr-ight span {color: #ffffff; font-weight: bold;}
.copyr-ight a:hover, .copyr-ight a:focus {color: #f7b400;}
/*** End Footer Styles ***/