/*=======================================================================
                            [Table of contents]
   =======================================================================

1. Typography
2. Sections
3. Home          / Navigation bar + Main Carousel
4. about
5. Services      / (Training-Consaltuncy) + Training programs + Industry Icons + Clients
6. Albums
7. Contact
8. Footer
9. Preloader

==========================================================================*/
 /*==================================================
  =====  1. Typography  ============================
  ==================================================*/
 
 body {
     letter-spacing: 1px;
     overflow-x: hidden;
     font-family: "Montserrat", sans-serif;
     -webkit-user-select: none;
     /* Chrome all / Safari all */
     -moz-user-select: none;
     /* Firefox all */
     -ms-user-select: none;
     /* IE 10+ */
     user-select: none;
     /* Likely future */
     /* copy-paste disable */
 }
 
 .ar-text {
     font-family: 'Droid Arabic kufi', serif;
     font-weight: 700;
     letter-spacing: 0;
 }
 
 .text-muted {
     color: #777;
 }
 
 .text-primary {
     color: #009cbb;
 }
 
 p {
     font-size: 14px;
     line-height: 1.75;
 }
 
 p.large {
     font-size: 16px;
 }
 
 a,
 a:hover,
 a:focus,
 a:active,
 a.active {
     outline: 0;
     text-decoration: none;
 }
 
 a {
     text-transform: uppercase;
     color: #009cbb;
 }
 
 a:hover,
 a:focus,
 a:active,
 a.active {
     color: #009cbb;
 }
 
 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
     font-family: "Montserrat", sans-serif;
     font-weight: 700;
 }
 
 .btn {
     display: inline-block;
     padding: 6px 12px;
     margin-bottom: 0;
     font-size: 14px;
     font-weight: 400;
     line-height: 1.5;
     text-align: center;
     letter-spacing: 1px;
     white-space: nowrap;
     vertical-align: middle;
     -ms-touch-action: manipulation;
     touch-action: manipulation;
     cursor: pointer;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
     background-image: none;
     border-radius: 3px;
     border: none;
 }
 
 .btn-default:active,
 .btn-default.active,
 .btn-default:focus,
 .btn-default {
     color: #009cbb;
     background-color: #fff;
     -webkit-transition: all 0.3s ease-in-out;
     -moz-transition: all 0.3s ease-in-out;
     -ms-transition: all 0.3s ease-in-out;
     -o-transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out;
 }
 
 .btn-default:hover {
     color: #fff;
     background-color: #009cbb;
     border-radius: 2em;
 }
 
 .promo {
     background-color: #ccc;
     background-position: 50% 0;
     background-repeat: no-repeat;
     background-size: cover;
     background-attachment: fixed;
     width: 100%;
     min-height: 285px;
     color: #fff;
     font-size: 18px;
 }
 
 .first {
     background-image: url(../img/promo-bg.jpg);
 }
 
 .second {
     background-image: url(../img/promo-bg2.jpg);
 }
 
 .third {
     background-image: url(../img/promo-bg3.jpg);
 }
 
 .main-p {
     padding-top: 25px;
     text-align: justify;
 }
 
 p {
     font-size: 18px;
     text-align: justify;
 }
 
 .sub-p p {
     font-size: 18px;
     text-align: justify;
 }
 
 @media (max-width: 640px) {
     p {
         font-size: 14px;
     }
     h2 {
         font-size: 20px;
     }
     .carousel-caption h1 {
         font-size: 15px !important;
     }
     .carousel-caption h2 {
         font-size: 25px !important;
     }
     .carousel-caption h3 {
         font-size: 15px !important;
     }
     .section-subheading h2 {
         font-size: 27px !important;
     }
 }
 /*==================================================
  =====  2. Sections  ==============================
  ==================================================*/
 
 section {
     padding: 100px 0;
 }
 
 .section-subheading h2 {
     color: #005160;
     padding-top: 50px;
     margin-top: 16px;
     margin-bottom: 30px;
     font-size: 40px;
     letter-spacing: 1px;
     background-attachment: fixed;
 }
 
 .section-subheading h3 {
     background-image: url(../img/section-title-bg.png);
     -webkit-background-clip: text;
     background-clip: text;
     color: rgba(0, 0, 0, 0);
     padding: 50px 0;
     margin-top: 16px;
     margin-bottom: 30px;
     font-size: 25px;
     letter-spacing: 1px;
     background-attachment: fixed;
 }
 
 .section-heading h2,
 .section-heading2 h2 {
     font-size: 30px;
 }
 
 .section-heading {
     color: #fff;
     background-image: url(../img/section-title-bg.png);
     background-repeat: no-repeat;
     background-size: cover;
     border-radius: 3em;
     height: 78px;
     max-width: 360px;
     margin: 0 auto 50px auto;
     padding: 1px;
     text-align: center;
 }
 
 .section-heading2 {
     color: #006d81;
     background-image: url(../img/promo-bg3.jpg);
     background-repeat: no-repeat;
     background-size: cover;
     border-radius: 3em;
     height: 78px;
     max-width: 360px;
     margin: 0 auto 50px auto;
     padding: 1px;
     text-align: center;
 }
 
 hr {
     margin-top: 20px;
     margin-bottom: 20px;
     border: 0;
     border-top: 1px solid #b4f4f9;
     text-align: center;
     width: 50%;
 }
 /*==================================================
  =====  3. Home  ==================================
  ==================================================*/
 /*================= Navigation bar ================= */
 
 .navbar-default {
     background-color: #fff;
     border-color: #009cbb;
 }
 
 .navbar-default .logo a {
     height: 150px;
     width: 114px;
     margin-left: -60px;
     text-align: center;
     position: absolute;
     top: -5px;
     background: url(../img/logo.png) center;
     background-size: cover;
     visibility: visible;
     opacity: 1;
     transition: visibility 0s, opacity 0.5s linear;
 }
 
 .navbar-default .logo2 a {
     height: 50px;
     width: 50px;
     text-align: center;
     position: absolute;
     left: 48%;
     top: 7px;
     background: url(../img/logo2.png) center;
     background-size: cover;
     visibility: hidden;
     opacity: 0;
     transition: visibility 0s, opacity 0.5s linear;
 }
 
 .navbar-default .nav li {
     text-align: center;
     list-style: none;
     display: inline-block;
     line-height: 1;
     margin: 1px;
     border-radius: 3px;
     position: relative;
 }
 
 .navbar li ul {
     position: absolute;
     list-style: none;
     text-align: center;
     width: 140px;
     padding: 0 2px;
     left: 50%;
     margin-left: -70px;
     margin-top: 15px;
     font: 12px 'Montserrat', sans-serif;
     background-color: #006d81;
     border-radius: 10px;
     /* This is important for the show/hide CSS animation */
     max-height: 0px;
     overflow: hidden;
     -webkit-transition: all 0.4s linear;
     -moz-transition: all 0.4s linear;
     transition: all 0.4s linear;
 }
 
 .navbar li ul hr {
     margin: 3px auto;
     width: 80%;
     opacity: 0.2;
 }
 
 .navbar li ul li a {
     padding: 12px;
     color: #fff !important;
     text-decoration: none !important;
     display: block;
 }
 
 .navbar li:hover ul {
     max-height: 352px;
 }
 
 .navbar li ul li a:hover {
     background-color: #444;
 }
 
 .navbar li ul li:first-child {
     margin-top: 5px;
     border-radius: 3px 3px 0 0;
     position: relative;
 }
 
 .navbar li ul li:last-child {
     margin-bottom: 5px;
 }
 
 .navbar li ul li:last-child {
     border-bottom-left-radius: 3px;
     border-bottom-right-radius: 3px;
 }
 
 .navbar-default .navbar-collapse {
     border-color: rgba(255, 255, 255, .02);
 }
 
 .navbar-default .navbar-toggle {
     background-color: #009cbb;
     border: 1px solid #fff;
     margin-top: 15px;
 }
 
 .navbar-default .navbar-toggle .icon-bar {
     background-color: #fff;
 }
 
 .navbar-default .navbar-toggle:hover,
 .navbar-default .navbar-toggle:focus {
     background-color: #009cbb;
 }
 
 .navbar-default .nav li a {
     text-transform: uppercase;
     font-family: "Montserrat", sans-serif;
     font-weight: 400;
     letter-spacing: 1px;
     color: #fff;
     -webkit-transition: all ease-in-out .5s;
     -moz-transition: all ease-in-out .5s;
     transition: all ease-in-out .5s;
 }
 
 .navbar-default .nav li a:active,
 .navbar-default .nav li a:hover,
 .navbar-default .nav li a:focus {
     outline: 0;
     color: #fff;
     background-color: #009cbb;
     border-radius: 3em;
 }
 
 .navbar-default .navbar-nav>.active>a {
     border-radius: 3em;
     color: #fff;
     background-color: #8dd7f7;
 }
 
 .navbar-default .navbar-nav>.active>a:hover,
 .navbar-default .navbar-nav>.active>a:focus {
     color: #fff;
     background-color: #009cbb;
 }
 
 @media (max-width: 1024px) {
     .navbar-header {
         float: none;
     }
     .navbar-nav .navbar-lang {
         float: left !important;
     }
     .navbar-toggle {
         display: block;
     }
     .navbar-collapse {
         border-top: 1px solid transparent;
         box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
     }
     .navbar-fixed-top {
         min-height: 70px;
         top: 0;
         border-width: 0 0 1px;
     }
     .navbar-collapse.collapse {
         display: none!important;
     }
     .navbar-nav {
         margin-top: 7.5px;
     }
     .navbar-nav>li {
         float: none;
     }
     .navbar-default .nav li a {
         color: #009cbb;
         padding-top: 10px;
         padding-bottom: 10px;
     }
     .collapse.in {
         display: block !important;
     }
     .navbar-default .logo a {
         visibility: hidden;
         opacity: 0;
     }
     .navbar-default .logo2 a {
         visibility: visible;
         opacity: 1;
     }
 }
 
 @media(min-width:1025px) {
     .navbar-default {
         padding: 25px 0;
         border: 0;
         background-color: transparent;
         -webkit-transition: padding .3s;
         -moz-transition: padding .3s;
         transition: padding .3s;
     }
     .navbar-default .navbar-nav>.active>a {
         border-radius: 3em;
     }
     .navbar-default.navbar-shrink .logo a {
         height: 100px;
         width: 76px;
         visibility: hidden;
         opacity: 0;
     }
     .navbar-default.navbar-shrink .logo2 a {
         visibility: visible;
         opacity: 1;
     }
     .navbar-default.navbar-shrink {
         padding: 10px 0;
         background-color: #fff;
         height: 70px;
         border-bottom: 2px solid #009cbb;
     }
     .navbar-default.navbar-shrink .nav li a {
         color: #009cbb;
         background-color: rgba(255, 255, 255, 0);
     }
     .navbar-default.navbar-shrink .nav li a:hover {
         color: #fff;
         background-color: #009cbb;
         border-radius: 3em;
     }
     .navbar-default .navbar-right li a {
         padding: 15px 10px;
         font-size: 11px;
     }
 }
 
 .navbar-lang li {
     margin: 0;
 }
 
 @media(max-width:1024px) {
     .navbar-nav {
         float: none !important;
         max-width: 340px;
         margin-left: auto;
         margin-right: auto;
     }
     .navbar li ul {
         position: inherit;
         width: auto !important;
         margin-left: 0 !important;
         left: 0;
         max-height: 220px;
         overflow: visible;
     }
     .navbar-default .nav li {
         margin: 1px 9px;
     }
 }
 
 @media(min-height:720px) {
     .navbar-fixed-top .navbar-collapse {
         max-height: inherit;
     }
 }
 
 @media(max-height:719px) {
     .navbar-fixed-top .navbar-collapse {
         max-height: 550px;
     }
 }
 
 header {
     text-align: center;
     color: #fff;
     background-attachment: scroll;
     background-position: center center;
     background-repeat: none;
     -webkit-background-size: cover;
     -moz-background-size: cover;
     background-size: cover;
     -o-background-size: cover;
 }
 /*================= Main Carousel ================= */
 
 #home-carousel .item {
     background-position: center top;
     background-repeat: no-repeat;
     background-size: cover;
     width: 100%;
     height: 675px;
 }
 
 .carousel-caption {
     left: 15px;
     right: 15px;
     top: 300px;
     font-size: 15px;
     color: #fff;
     text-shadow: none;
 }
 
 .carousel-caption h1 {
     font-size: 25px;
     margin-bottom: 0;
     line-height: 27px;
     font-family: "Montserrat", sans-serif;
     letter-spacing: 1px;
     font-weight: bold;
 }
 
 .carousel-caption h2 {
     font-size: 35px;
     font-family: "Montserrat", sans-serif;
     margin-top: 25px;
     letter-spacing: 1px;
 }
 
 .carousel-caption h3 {
     font-size: 25px;
     font-family: "Montserrat", sans-serif;
     margin-top: 25px;
     letter-spacing: 1px;
 }
 
 .carousel-caption img.Nirobo_Logo {
     height: 120px;
     margin-top: -100px;
     margin-bottom: 50px;
 }
 
 .carousel-caption img.Nirobo_Logo {
     height: 120px;
     margin-top: -100px;
     margin-bottom: 50px;
 }
 
 .carousel-caption img.HRCI_Logo {
     height: 120px;
     margin-top: -100px;
     margin-bottom: 50px;
 }
 
 .carousel-caption ul {
     list-style: none;
     padding: 0;
     margin-top: 50px;
 }
 
 .carousel-caption ul li {
     display: inline;
     margin: 0 30px;
 }
 
 .carousel-caption ul img {
     height: 60px;
     text-align: center;
 }
 
 @media(max-width:640px) {
     .carousel-caption img.HRCI_Logo {
         height: 90px;
         margin-top: -70px;
         margin-bottom: 30px;
     }
     .carousel-caption ul {
         margin-top: 30px;
     }
     .carousel-caption ul li {
         margin: 0 15px;
     }
 }
 
 .container>.carousel-arrows {
     top: 400px;
     left: 0px;
     position: relative;
 }
 
 .home-carousel-left,
 .home-carousel-right {
     position: absolute;
     font-size: 30px;
     z-index: 15;
     color: #fff;
 }
 
 .home-carousel-left {
     left: 0px;
 }
 
 .home-carousel-right {
     right: 0px;
 }
 /*==================================================
  =====  4. About  =================================
  ==================================================*/
 
 .tabs {
     position: relative;
     margin: 40px auto;
     width: 100%;
     overflow: hidden;
 }
 
 .content {
     background: #fff;
     position: relative;
     text-align: center;
     width: 100%;
     min-height: 850px;
     overflow: hidden;
     z-index: 5;
     box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, 0.2), 0 2px 2px rgba(0, 0, 0, 0.1);
     border-radius: 0 3px 3px 3px;
 }
 
 .tabs input {
     position: absolute;
     z-index: 1000;
     width: 80px;
     height: 40px;
     top: 0px;
     opacity: 0;
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
     filter: alpha(opacity=0);
     cursor: pointer;
 }
 
 .tabs input#tab-2 {
     left: 80px;
 }
 
 .tabs label {
     background: #005160;
     font-size: 15px;
     line-height: 40px;
     height: 40px;
     position: relative;
     padding: 0 20px;
     float: left;
     left: 0;
     display: block;
     width: 80px;
     margin-bottom: 0;
     color: #4cb9cf;
     letter-spacing: 1px;
     text-transform: uppercase;
     font-weight: bold;
     text-align: center;
     border-radius: 3px 3px 0 0;
     box-shadow: 2px 0 2px rgba(0, 0, 0, 0.1), -2px 0 2px rgba(0, 0, 0, 0.1);
 }
 
 .tabs label:after {
     content: '';
     background: #fff;
     position: absolute;
     bottom: -2px;
     left: 0;
     width: 100%;
     height: 2px;
     display: block;
 }
 
 .tabs input:hover+label {
     background: #009cbb;
     color: #fff;
 }
 
 .tabs label:first-of-type {
     z-index: 4;
 }
 
 .tab-label-2 {
     z-index: 3;
 }
 
 .tabs input:checked+label {
     background: #fff;
     z-index: 6;
     color: #4cb9cf;
 }
 
 .clear-shadow {
     clear: both;
 }
 
 .content div {
     position: absolute;
     top: 0;
     left: 0;
     padding: 10px 40px;
     z-index: 1;
     opacity: 0;
     -webkit-transition: opacity linear 0.1s;
     -moz-transition: opacity linear 0.1s;
     -o-transition: opacity linear 0.1s;
     -ms-transition: opacity linear 0.1s;
     transition: opacity linear 0.1s;
 }
 
 .tabs input.tab-selector-1:checked~.content .content-1,
 .tabs input.tab-selector-2:checked~.content .content-2,
 .tabs input.tab-selector-3:checked~.content .content-3,
 .tabs input.tab-selector-4:checked~.content .content-4,
 .tabs input.tab-selector-5:checked~.content .content-5 {
     z-index: 100;
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
     filter: alpha(opacity=100);
     opacity: 1;
     -webkit-transition: opacity ease-out 0.2s 0.1s;
     -moz-transition: opacity ease-out 0.2s 0.1s;
     -o-transition: opacity ease-out 0.2s 0.1s;
     -ms-transition: opacity ease-out 0.2s 0.1s;
     transition: opacity ease-out 0.2s 0.1s;
 }
 
 .content div h2,
 .content div h3 {
     color: #005160;
 }
 
 .tabs .content table {
     width: 100%;
     text-align: center;
 }
 
 .tabs .content td {
     height: 50px;
     width: 50%;
     background-color: rgba(76, 185, 207, 0.4);
     ;
     border: 4px solid #fff;
     padding: 8px 30px;
 }
 
 .tabs .content td.rtd {
     background-color: #009cbb;
     color: #fff;
 }
 
 .tabs .content td hr {
     margin-top: 5px;
     margin-bottom: 5px;
     border: 0;
     border-top: 1px solid #fff;
     text-align: center;
     width: 50%;
 }
 
 @media(max-width:640px) {
     .tabs .content td {
         font-size: 10px;
     }
     .content div {
         padding: 0;
     }
     .tabs {
         min-height: 870px;
     }
     .content {
         min-height: 840px;
     }
 }
 
 .value-icon {
     padding-bottom: 20px;
     display: inline-block;
     line-height: 80px;
     -webkit-transition: all 0.3s ease-in-out;
     -moz-transition: all 0.3s ease-in-out;
     -ms-transition: all 0.3s ease-in-out;
     -o-transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out;
 }
 
 .value:hover .value-text {
     visibility: visible;
     opacity: 1;
 }
 
 .value-h h2 {
     font-size: 20px;
     color: #009cbb;
 }
 
 .value-h h2::first-letter {
     font-size: 30px;
 }
 
 .value-text {
     visibility: hidden;
     opacity: 0;
     -webkit-transition: all 0.3s ease-in-out;
     -moz-transition: all 0.3s ease-in-out;
     -ms-transition: all 0.3s ease-in-out;
     -o-transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out;
 }
 
 .value-text p {
     font-size: 13px;
     letter-spacing: 1px;
     padding: 0 9px;
     text-align: center;
 }
 
 .value-text p::first-letter {
     font-size: 15px;
 }
 
 #about .values {
     padding-top: 30px;
 }
 
 .people img {
     padding: 35px 35px 0 35px;
     margin-left: auto;
     margin-right: auto;
 }
 
 .people h2 {
     text-transform: uppercase;
     color: #4cb9cf;
     margin: 30px 5px 20px 5px;
 }
 
 .people h3 {
     font-size: 15px;
     color: #4cb9cf;
     margin: 0px 5px 20px 5px;
     display: inline-block;
 }
 
 .people h3::first-letter {
     font-size: 30px;
 }
 
 .partner a {
     color: #4cb9cf;
     font-size: 20px;
     font-weight: 700;
     padding: 10px;
     -webkit-transition: all 0.3s ease-in-out;
     -moz-transition: all 0.3s ease-in-out;
     -ms-transition: all 0.3s ease-in-out;
     -o-transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out;
 }
 
 .partner a:hover {
     color: #fff;
     background-color: #4cb9cf;
     border-radius: 3em;
 }
 
 .modal-body img {
     max-width: 260px;
     margin: 0px auto;
 }
 
 .modal-header {
     background-color: #009cbb;
     color: #fff;
     letter-spacing: 2px;
     border-radius: 4px 4px 0px 0px;
 }
 
 .modal-body {
     padding: 15px 50px;
 }
 
 .modal-body p {
     font-size: 15px;
     text-align: justify;
 }
 
 .modal-body h4 {
     padding: 15px 0px;
     color: #4cb9cf;
     letter-spacing: 1px;
 }
 
 ul.a {
     list-style-type: none;
     text-align: justify;
     padding: 0;
 }
 
 .a li:before {
     font-size: 1.5em;
     content: "• ";
     color: #4cb9cf;
 }
 
 ol.b {
     text-align: justify;
     padding: 0;
 }
 
 .b li:before {
     font-size: 1.5em;
     content: " ";
     color: #4cb9cf;
 }
 
 .img-with-text {
     position: relative;
     width: 693px;
 }
 
 .img-with-text>div {
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     background-color: rgba(0, 0, 0, 0);
     color: transparent;
     transition: 1s;
 }
 
 .img-with-text>div:hover {
     background-color: rgba(0, 0, 0, 0.2);
     color: white;
 }
 
 .presence-map .col-md-8 {
     background-color: #006d81;
     background-image: url(../img/map.png);
     background-repeat: no-repeat;
     background-size: contain;
     background-position-y: 50%;
     height: 400px;
     border-radius: 14em;
 }
 
 .presence-map-2 {
     background-image: url("../img/presence-map en.png");
     background-repeat: no-repeat;
     background-size: contain;
     height: 400px;
     max-width: 750px;
     margin: 0 auto;
     display: none;
 }
 
 .point {
     height: 24px;
     position: absolute;
     width: 16px;
     background-image: url(../img/point.png);
     background-size: cover;
 }
 
 .fr {
     top: 33%;
     left: 47%;
 }
 
 .tr {
     top: 36%;
     left: 54%;
 }
 
 .ir {
     top: 40%;
     left: 58%;
 }
 
 .ku {
     top: 42%;
     left: 59%;
 }
 
 .sa {
     top: 47%;
     left: 59%;
 }
 
 .qa {
     top: 44%;
     left: 60%;
 }
 
 .so {
     top: 46%;
     left: 62%;
 }
 
 .ma {
     top: 57%;
     left: 75%;
 }
 
 .jp {
     top: 39%;
     left: 84%;
 }
 
 .uk {
     top: 25%;
     left: 45%;
 }
 
 .gr {
     top: 31%;
     left: 48%;
 }
 
 .sp {
     top: 36%;
     left: 45%;
 }
 
 .tooltip.top .tooltip-arrow {
     border-top-color: #4cb9cf;
 }
 
 .tooltip-inner {
     background-color: #4cb9cf;
 }
 
 .partner h2 {
     color: #4cb9cf;
 }
 
 .partner {
     margin-top: 20px;
 }
 
 @media (max-width: 768px) {
     .value-text {
         visibility: visible;
         opacity: 1;
         padding: 0px 30px;
     }
     .partner .col-md-6 {
         margin: 50px 0;
     }
     .presence-map {
         display: none;
     }
     .presence-map-2 {
         display: block;
     }
     #footer img {
         position: relative !important;
     }
 }
 /*==================================================
  =====  5. Services  ==============================
  ==================================================*/
 /*================= (Training-Consaltuncy) ================= */
 
 .cd-container {
     /* this class is used to give a max-width to the element it is applied to, and center it horizontally when it reaches that max-width */
     width: 90%;
     max-width: 1170px;
     margin: 0 auto;
 }
 
 .cd-container::after {
     /* clearfix */
     content: '';
     display: table;
     clear: both;
 }
 
 #cd-timeline {
     position: relative;
     padding: 2em 0;
     margin-top: 2em;
     margin-bottom: 2em;
     letter-spacing: 1px;
 }
 
 #cd-timeline::before {
     /* this is the vertical line */
     content: '';
     position: absolute;
     top: 0;
     left: 18px;
     height: 100%;
     width: 4px;
     background: #4cb9cf;
 }
 
 @media only screen and (min-width: 1170px) {
     #cd-timeline {
         margin-top: 3em;
         margin-bottom: 3em;
     }
     #cd-timeline::before {
         left: 50%;
         margin-left: -2px;
     }
 }
 
 .cd-timeline-block {
     position: relative;
 }
 
 .cd-timeline-block:after {
     content: "";
     display: table;
     clear: both;
 }
 
 .cd-timeline-block:first-child {
     margin-top: 0;
 }
 
 .cd-timeline-block:last-child {
     margin-bottom: 0;
 }
 
 @media only screen and (min-width: 1170px) {
     .cd-timeline-block:first-child {
         margin-top: 0;
     }
     .cd-timeline-block:last-child {
         margin-bottom: 0;
     }
 }
 
 #services h4 {
     color: #4cb9cf;
 }
 
 .cd-timeline-img {
     position: absolute;
     left: 10px;
     width: 20px;
     height: 20px;
     top: 7px;
     border-radius: 50%;
     box-shadow: 0 0 0 4px white, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05);
 }
 
 .cd-timeline-img.cd-picture {
     background: #4cb9cf;
 }
 
 .cd-timeline-img.cd-movie {
     background: #4cb9cf;
 }
 
 .cd-timeline-img.cd-location {
     background: #4cb9cf;
 }
 
 @media only screen and (min-width: 1170px) {
     .cd-timeline-img {
         width: 10px;
         height: 10px;
         left: 50%;
         margin-left: -5px;
         /* Force Hardware Acceleration in WebKit */
         -webkit-transform: translateZ(0);
         -webkit-backface-visibility: hidden;
     }
     .cssanimations .cd-timeline-img.is-hidden {
         visibility: hidden;
     }
     .cssanimations .cd-timeline-img.bounce-in {
         visibility: visible;
         -webkit-animation: cd-bounce-1 0.6s;
         -moz-animation: cd-bounce-1 0.6s;
         animation: cd-bounce-1 0.6s;
     }
 }
 
 .cd-timeline-content {
     position: relative;
     margin-left: 60px;
     text-align: center;
 }
 
 .cd-timeline-content:after {
     content: "";
     display: table;
     clear: both;
 }
 
 .cd-timeline-content h2 {
     color: #4cb9cf;
 }
 
 .cd-timeline-content p,
 .cd-timeline-content .cd-read-more,
 .cd-timeline-content .cd-date {
     font-size: 13px;
 }
 
 .cd-timeline-content .cd-read-more,
 .cd-timeline-content .cd-date {
     display: inline-block;
 }
 
 .cd-timeline-content p {
     margin: 1em 0;
     line-height: 1.6;
 }
 
 .cd-timeline-content .cd-read-more {
     float: right;
     padding: .8em 1em;
     background: #acb7c0;
     color: white;
     border-radius: 0.25em;
 }
 
 .no-touch .cd-timeline-content .cd-read-more:hover {
     background-color: #bac4cb;
 }
 
 .cd-timeline-content .cd-date {
     float: left;
     padding: .8em 0;
     opacity: .7;
 }
 
 .cd-timeline-content::before {
     content: '';
     position: absolute;
     top: 16px;
     right: 100%;
     height: 0;
     width: 0;
     border: 7px solid transparent;
     border-right: 7px solid white;
 }
 
 @media only screen and (min-width: 768px) {
     .cd-timeline-content h2 {
         font-size: 20px;
         margin-top: 0px;
     }
     .cd-timeline-content p {
         font-size: 16px;
     }
     .cd-timeline-content .cd-read-more,
     .cd-timeline-content .cd-date {
         font-size: 14px;
     }
 }
 
 @media only screen and (min-width: 1170px) {
     .cd-timeline-content {
         margin-left: 0;
         width: 45%;
     }
     .cd-timeline-content::before {
         top: 24px;
         left: 100%;
         border-color: transparent;
         border-left-color: white;
     }
     .cd-timeline-content .cd-read-more {
         float: left;
     }
     .cd-timeline-content .cd-date {
         position: absolute;
         width: 100%;
         left: 122%;
         top: 6px;
         font-size: 16px;
         font-size: 1rem;
     }
     .cd-timeline-block:nth-child(even) .cd-timeline-content {
         float: right;
     }
     .cd-timeline-block:nth-child(even) .cd-timeline-content::before {
         top: 24px;
         left: auto;
         right: 100%;
         border-color: transparent;
         border-right-color: white;
     }
     .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-read-more {
         float: right;
     }
     .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-date {
         left: auto;
         right: 122%;
         text-align: right;
     }
     .cssanimations .cd-timeline-content.is-hidden {
         visibility: hidden;
     }
     .cssanimations .cd-timeline-content.bounce-in {
         visibility: visible;
         -webkit-animation: cd-bounce-2 0.6s;
         -moz-animation: cd-bounce-2 0.6s;
         animation: cd-bounce-2 0.6s;
     }
 }
 
 @media only screen and (min-width: 1170px) {
     /* inverse bounce effect on even content blocks */
     .cssanimations .cd-timeline-block:nth-child(even) .cd-timeline-content.bounce-in {
         -webkit-animation: cd-bounce-2-inverse 0.6s;
         -moz-animation: cd-bounce-2-inverse 0.6s;
         animation: cd-bounce-2-inverse 0.6s;
     }
 }
 /*================= Industry Icons ================= */
 
 .service-icon {
     display: inline-block;
     color: #4cb9cf;
     font-size: 50px;
     line-height: 60px;
     height: 100px;
     width: 100px;
     box-shadow: inset 0 2px 8px #009cbb;
     background-color: #4cb9cf;
     border-radius: 60px;
     -webkit-transition: all 0.3s ease-in-out;
     -moz-transition: all 0.3s ease-in-out;
     -ms-transition: all 0.3s ease-in-out;
     -o-transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out;
 }
 
 .service-icon2 {
     color: #006d81;
     line-height: 60px;
     height: 50px;
     background-color: #B3E1EA;
     margin: 10px 0px;
     border-radius: 60px;
     -webkit-transition: all 0.3s ease-in-out;
     -moz-transition: all 0.3s ease-in-out;
     -ms-transition: all 0.3s ease-in-out;
     -o-transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out;
 }
 
 .service-icon2 img {
     height: 40px;
     float: left;
     margin: 5px 20px 0 20px;
 }
 
 .service-icon2 p {
     padding-top: 9px;
 }
 
 .service-icon img {
     margin: 15px;
 }
 
 .service-icon:hover {
     box-shadow: 0px 3px 4px 0px #006d81;
     -moz-transform: scale(1.2);
     -webkit-transform: scale(1.2);
     -o-transform: scale(1.2);
     -ms-transform: scale(1.2);
     transform: scale(1.2);
     -webkit-transition: all 0.3s ease-in-out;
     -moz-transition: all 0.3s ease-in-out;
     -ms-transition: all 0.3s ease-in-out;
     -o-transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out;
 }
 
 .cosultancy-modal>.hover1 {
     display: none;
 }
 
 .cosultancy-modal:hover {
     cursor: pointer;
     box-shadow: 0px 3px 4px 0px #006d81;
     -moz-transform: scale(1.2);
     -webkit-transform: scale(1.2);
     -o-transform: scale(1.2);
     -ms-transform: scale(1.2);
     transform: scale(1.2);
     -webkit-transition: all 0.3s ease-in-out;
     -moz-transition: all 0.3s ease-in-out;
     -ms-transition: all 0.3s ease-in-out;
     -o-transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out;
 }
 
 .cosultancy-modal:hover>.hover1 {
     display: flex;
     float: right;
 }
 
 .service-text h4 {
     font-size: 15px;
     color: #006d81 !important;
     margin-top: 16px;
     margin-bottom: 30px;
 }
 
 .service-text h4::first-letter {
     font-size: 20px;
 }
 
 .industries .row {
     margin: 0 20% 0 20%;
 }
 /*================= Clients ================= */
 
 .trust-map {
     background: #4cb9cf url(../img/map.png) repeat-x scroll 0 0;
     background-size: 100%;
     background-position-y: center;
     background-position-x: center;
     background-repeat: no-repeat;
 }
 
 .trust-map h2 {
     color: #fff;
     padding: 0 0 40px;
 }
 /*==================================================
  =====  6. Albums  ================================
  ==================================================*/
 
 #albums .row {
     margin: 0px 195px;
 }
 
 #albums .col-md-4 {
     padding: 0
 }
 
 #albums .grid.mask {
     display: inline-block;
 }
 
 #albums .grid.mask h3 {
     text-transform: uppercase;
     font-size: 14px;
     color: #006d81;
     display: inline-block;
     margin: 0 5px;
 }
 
 #albums h2.cap {
     text-transform: uppercase;
     font-size: 18px;
     color: #006d81;
     display: inline-block;
     margin: 0 5px;
 }
 
 #albums .grid.mask h3::first-letter {
     font-size: 18px;
 }
 
 #albums .modal-body {
     padding: 15px 50px;
 }
 
 #albums .modal-body.vid-s {
     height: 350px;
 }
 
 @media (min-width: 900px) {
     #albums .modal-dialog {
         width: 850px;
     }
 }
 
 @media (min-width: 768px) {
     #albums .modal-dialog {
         width: 700px;
         margin: 30px auto;
     }
 }
 
 @media (max-width: 768px) {
     #albums .row {
         margin-right: -15px;
         margin-left: -15px;
     }
     #albums-carousel2 .item,
     #albums-carousel3 .item,
     #albums-carousel7 .item,
     #albums-carousel8 .item,
     #albums-carousel9 .item,
     #albums-carousel10 .item,
     #albums-carousel11 .item,
     #albums-carousel12 .item,
     #albums-carousel13 .item {
         height: 250px !important;
     }
     .albums .carousel-inner {
         height: 250px !important;
     }
 }
 
 #albums-carousel2 .item,
 #albums-carousel3 .item,
 #albums-carousel7 .item,
 #albums-carousel8 .item,
 #albums-carousel9 .item,
 #albums-carousel10 .item,
 #albums-carousel11 .item,
 #albums-carousel12 .item,
 #albums-carousel13 .item {
     background-position: center;
     background-repeat: no-repeat;
     background-size: contain;
     width: 100%;
     height: 520px;
 }
 
 .albums .carousel-inner {
     height: 520px;
 }
 
 .albums .home-carousel-left,
 .albums .home-carousel-right {
     position: absolute;
     font-size: 30px;
     z-index: 15;
     color: #009cbb;
 }
 
 .albums .home-carousel-left {
     left: -20px;
     top: 50%;
 }
 
 .albums .home-carousel-right {
     right: -20px;
     top: 50%;
 }
 /*===============   Timeline   ===============*/
 
 .Timeline {
     display: flex;
     align-items: center;
     height: 250px;
 }
 
 .Timeline .modal-body img {
     border-radius: 270px;
     height: 140px;
     width: 140px;
     margin: auto;
     margin-bottom: 15px;
     margin-top: 30px;
     padding: 10px;
     border: 2px solid #009cbb;
 }
 
 #albums .Timeline .modal-body .row {
     margin: auto 0px !important;
 }
 
 .event1,
 .event2,
 .event3,
 .event4,
 .event5 {
     position: relative;
 }
 
 .event1Bubble {
     position: absolute;
     background-color: rgba(158, 158, 158, 0.1);
     width: 139px;
     height: 60px;
     top: -70px;
     left: -15px;
     border-radius: 5px;
     box-shadow: inset 0 0 5px rgba(158, 158, 158, 0.64)
 }
 
 .event2Bubble {
     position: absolute;
     background-color: rgba(158, 158, 158, 0.1);
     width: 139px;
     height: 60px;
     left: -105px;
     top: 33px;
     border-radius: 5px;
     box-shadow: inset 0 0 5px rgba(158, 158, 158, 0.64)
 }
 
 .event3Bubble {
     position: absolute;
     background-color: rgba(158, 158, 158, 0.1);
     width: 139px;
     height: 60px;
     left: -105px;
     top: -70px;
     border-radius: 5px;
     box-shadow: inset 0 0 5px rgba(158, 158, 158, 0.64)
 }
 
 .event4Bubble {
     position: absolute;
     background-color: rgba(158, 158, 158, 0.1);
     width: 139px;
     height: 60px;
     left: -105px;
     top: 33px;
     border-radius: 5px;
     box-shadow: inset 0 0 5px rgba(158, 158, 158, 0.64)
 }
 
 .event5Bubble {
     position: absolute;
     background-color: rgba(158, 158, 158, 0.1);
     width: 139px;
     height: 60px;
     left: -105px;
     top: -70px;
     border-radius: 5px;
     box-shadow: inset 0 0 5px rgba(158, 158, 158, 0.64)
 }
 
 .event1Bubble:after,
 .event1Bubble:before,
 .event2Bubble:after,
 .event2Bubble:before,
 .event3Bubble:after,
 .event3Bubble:before,
 .event4Bubble:after,
 .event4Bubble:before,
 .event5Bubble:after,
 .event5Bubble:before {
     content: "";
     position: absolute;
     width: 0;
     height: 0;
     border-style: solid;
     border-color: transparent;
     border-bottom: 0;
 }
 
 .event1Bubble:before {
     bottom: -10px;
     left: 13px;
     border-top-color: rgba(222, 222, 222, 0.66);
     border-width: 12px;
 }
 
 .event1Bubble:after {
     bottom: -8px;
     left: 13px;
     border-top-color: #F6F6F6;
     border-width: 12px;
 }
 
 .event2Bubble:before {
     bottom: 59px;
     left: 103px;
     border-top-color: rgba(222, 222, 222, 0.66);
     border-width: 12px;
     -webkit-transform: rotate(180deg);
     -moz-transform: rotate(180deg);
     -o-transform: rotate(180deg);
     -ms-transform: rotate(180deg);
     transform: rotate(180deg);
 }
 
 .event2Bubble:after {
     bottom: 57px;
     left: 103px;
     border-top-color: #F6F6F6;
     border-width: 12px;
     -webkit-transform: rotate(180deg);
     -moz-transform: rotate(180deg);
     -o-transform: rotate(180deg);
     -ms-transform: rotate(180deg);
     transform: rotate(180deg);
 }
 
 .event3Bubble:before {
     bottom: -10px;
     left: 102px;
     border-top-color: rgba(222, 222, 222, 0.66);
     border-width: 12px;
 }
 
 .event3Bubble:after {
     bottom: -8px;
     left: 102px;
     border-top-color: #F6F6F6;
     border-width: 12px;
 }
 
 .event4Bubble:before {
     bottom: 59px;
     left: 103px;
     border-top-color: rgba(222, 222, 222, 0.66);
     border-width: 12px;
     -webkit-transform: rotate(180deg);
     -moz-transform: rotate(180deg);
     -o-transform: rotate(180deg);
     -ms-transform: rotate(180deg);
     transform: rotate(180deg);
 }
 
 .event4Bubble:after {
     bottom: 57px;
     left: 103px;
     border-top-color: #F6F6F6;
     border-width: 12px;
     -webkit-transform: rotate(180deg);
     -moz-transform: rotate(180deg);
     -o-transform: rotate(180deg);
     -ms-transform: rotate(180deg);
     transform: rotate(180deg);
 }
 
 .event5Bubble:before {
     bottom: -10px;
     left: 102px;
     border-top-color: rgba(222, 222, 222, 0.66);
     border-width: 12px;
 }
 
 .event5Bubble:after {
     bottom: -8px;
     left: 102px;
     border-top-color: #F6F6F6;
     border-width: 12px;
 }
 
 .eventTime {
     display: flex;
 }
 
 .DayDigit {
     font-size: 27px;
     margin-left: 10px;
     color: #006d81;
 }
 
 .eventTitle {
     color: #009cbb;
     font-size: 13px;
     text-transform: uppercase;
     display: flex;
     flex: 1;
     align-items: center;
     float: right;
     margin-right: 12px;
 }
 
 .now {
     background-color: #009cbb;
     color: white;
     border-radius: 7px;
     margin: 5px;
     padding: 4px;
     font-size: 10px;
     border: 2px solid white;
     font-weight: bold;
     box-shadow: 0 0 0 2px #009cbb;
 }
 
 .futureGray {
     filter: grayscale(1);
     -webkit-filter: grayscale(1);
 }
 
 .futureOpacity {
     -webkit-filter: opacity(.3);
     filter: opacity(.3);
 }
 
 @media (max-width: 768px) {
     .Timeline {
         margin: 0px 20px;
     }
     .event1Bubble {
         width: 100px;
         left: -15px;
     }
     .event2Bubble {
         width: 100px;
         left: -65px;
     }
     .event3Bubble {
         width: 100px;
         left: -65px;
     }
     .event4Bubble {
         width: 100px;
         left: -65px;
     }
     .event5Bubble {
         width: 100px;
         left: -65px;
     }
     .event2Bubble:before {
         bottom: 59px;
         left: 63px;
     }
     .event2Bubble:after {
         bottom: 57px;
         left: 63px;
     }
     .event3Bubble:before {
         bottom: -10px;
         left: 63px;
     }
     .event3Bubble:after {
         bottom: -8px;
         left: 63px;
     }
     .event4Bubble:before {
         bottom: 59px;
         left: 63px;
     }
     .event4Bubble:after {
         bottom: 57px;
         left: 63px;
     }
     .event5Bubble:before {
         bottom: -10px;
         left: 63px;
     }
     .event5Bubble:after {
         bottom: -8px;
         left: 63px;
     }
 }
 /*==================================================
  =====  7. Contact  ===============================
  ==================================================*/
 
 #contact {
     text-align: center;
     background-color: #006d81;
     color: #fff;
 }
 
 .contact-us {
     text-align: left;
 }
 
 .fa-map-marker,
 .fa-phone,
 .fa-mobile,
 .fa-fax {
     font-size: 25px !important;
     padding: 10px;
     color: #4cb9cf;
 }
 
 span.adress {
     font-size: 18px;
     padding: 0px;
     color: #fff;
 }
 
 a.social:hover {
     color: #4cb9cf;
     -webkit-transition: all 0.3s ease-in-out;
     -moz-transition: all 0.3s ease-in-out;
     -ms-transition: all 0.3s ease-in-out;
     -o-transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out;
 }
 
 .social {
     color: #009cbb;
 }
 
 .contact-us h3 {
     color: #4cb9cf;
     margin-bottom: 20px;
 }
 
 .contact-form {
     max-width: 80%;
     margin: 20px auto;
 }
 
 .contact-form fieldset {
     border: none;
 }
 
 .contact-form label {
     display: block;
     margin-bottom: 30px;
 }
 
 .contact-form input[type="text"],
 .contact-form input[type="date"],
 .contact-form input[type="datetime"],
 .contact-form input[type="email"],
 .contact-form input[type="number"],
 .contact-form input[type="search"],
 .contact-form input[type="time"],
 .contact-form input[type="url"],
 .contact-form textarea,
 .contact-form select {
     background: rgba(255, 255, 255, .1);
     border: none;
     border-radius: 4px;
     font-size: 16px;
     margin: 0;
     outline: 0;
     padding: 7px;
     width: 100%;
     box-sizing: border-box;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     background-color: #fff;
     color: #8a97a0;
     -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) inset;
     box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) inset;
     margin-bottom: 30px;
 }
 
 .contact-form input[type="text"]:focus,
 .contact-form input[type="date"]:focus,
 .contact-form input[type="datetime"]:focus,
 .contact-form input[type="email"]:focus,
 .contact-form input[type="number"]:focus,
 .contact-form input[type="search"]:focus,
 .contact-form input[type="time"]:focus,
 .contact-form input[type="url"]:focus,
 .contact-form textarea:focus,
 .contact-form select:focus {
     background: #fff;
 }
 
 .contact-form select {
     padding: 6px;
     margin: 0;
     -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
     border-radius: 4px;
     -webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
     -moz-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
     box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
     background: #f8f8f8;
     color: #888;
     border: none;
     outline: none;
     display: inline-block;
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
     cursor: pointer;
 }
 
 @media screen and (-webkit-min-device-pixel-ratio:0) {
     .contact-form select {
         padding-right: 18px
     }
 }
 
 .contact-form label {
     position: relative
 }
 
 .contact-form label:after {
     content: '<>';
     font: 11px "Consolas", monospace;
     color: #aaa;
     -webkit-transform: rotate(90deg);
     -moz-transform: rotate(90deg);
     -ms-transform: rotate(90deg);
     transform: rotate(90deg);
     right: 8px;
     top: 8px;
     padding: 0 0 2px;
     position: absolute;
     pointer-events: none;
 }
 
 .contact-form label:before {
     content: '';
     right: 6px;
     top: 0px;
     width: 20px;
     height: 20px;
     background: #f8f8f8;
     position: absolute;
     pointer-events: none;
     display: block;
 }
 
 .contact-form input[type="submit"],
 .contact-form input[type="button"] {
     position: relative;
     display: block;
     padding: 19px 39px 18px 39px;
     color: #fff;
     margin: 0 auto;
     background: #4cb9cf;
     font-size: 18px;
     text-align: center;
     font-style: normal;
     width: 50%;
     border: 1px solid #009cbb;
     border-width: 1px 1px 3px;
     border-radius: 50px;
     margin-bottom: 10px;
     -webkit-transition: all 0.3s ease-in-out;
     -moz-transition: all 0.3s ease-in-out;
     -ms-transition: all 0.3s ease-in-out;
     -o-transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out;
 }
 
 .contact-form input[type="submit"].active,
 .contact-form input[type="submit"]:focus,
 .contact-form input[type="submit"]:active,
 .contact-form input[type="submit"]:hover,
 .contact-form input[type="button"]:active,
 .contact-form input[type="button"]:focus,
 .contact-form input[type="button"]:hover {
     background: #006d81;
     color: #fff;
     border-radius: 0;
     -webkit-transition: all 0.3s ease-in-out;
     -moz-transition: all 0.3s ease-in-out;
     -ms-transition: all 0.3s ease-in-out;
     -o-transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out;
 }
 
 .error_strings a {
     font-size: 16px;
     color: #fff;
     text-align: left;
 }
 /*================= request ================= */
 
 .req-modal {
     background-color: #006d81;
 }
 
 .request {
     display: inline-block;
     padding: 10px 25px;
     background: #4cb9cf;
     border-radius: 2.5em;
     box-shadow: 0px 7px 0px #006d81;
     -webkit-transition: all 0.3s ease-in-out;
     -moz-transition: all 0.3s ease-in-out;
     -ms-transition: all 0.3s ease-in-out;
     -o-transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out;
 }
 
 .request h3 {
     line-height: 70px;
     color: #fff;
     margin: 0;
 }
 
 .request:hover {
     box-shadow: 0px 7px 0px #006d81, inset 0px 8px 12px #009cbb;
 }
 
 #request-proposal {
     background-image: url(../img/promo-bg3.jpg);
     background-repeat: no-repeat;
     background-size: cover;
     background-attachment: fixed;
 }
 /*==================================================
  =====  8. Footer  ================================
  ==================================================*/
 
 #footer {
     background-color: #fff;
     color: #006d81;
     padding: 15px;
     font-weight: 400;
     position: relative;
     text-align: center;
 }
 
 #footer p {
     float: left;
     position: absolute;
     margin: 10px;
 }
 
 #footer img {
     height: 50px;
     position: absolute;
     margin-bottom: 10px;
 }
 /*==================================================
  =====  9. Preloader ==============================
  ==================================================*/