.dir-rtl { direction:rtl !important; }
.dir-ltr { direction:ltr !important; }

body { background-color: #FFF; color: #777; font-family: "Open Sans" !important; font-size: 14px; line-height: 22px; margin: 0; }
b { font-weight:bold; } 
a:hover { text-decoration:none; }
hr { background-image: linear-gradient(to right, transparent, #DBDBDB, transparent); border: 0; height: 1px; margin: 10px 0; }
h1 { color:#1b5791 !important; }

.fs-20 { font-size:20px; color:#1b5791; }
.page-title { font-weight:300; font-size:30.8px; color: #1b5791 !important; }
.page-title b { font-weight:bold; }

.scroll-to-top { display:none; }

.overlay { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index:1060; background-color: rgba(255,255,255,0.8); display: flex; align-items: center; flex-wrap: wrap; }

#header .header-top {background-color: #00509D;}
#header .header-top .header-top-nav ul li a { color: #2484c6 !important; font-size:12.6px; padding: 0 10px; display:inline-block; font-family: 'Montserrat'; }
#header .header-top .search .search-box { border:2px solid #DDD; border-radius:20px; }
#header .header-top .search input { border-radius: 20px; box-sizing: border-box; font-size: 0.9em; height: 34px; margin: 0; padding: 6px 12px; width: 170px; font-family: 'Montserrat' !important; }
#header .header-top .search button { color:#CCC; border: 0 none;  z-index: 1000; }
#header .header-top .language a span { display:none; position:absolute; left:0; font-size:12px; }
#header .header-top .language a:hover span { display:block; }
#header .header-bottom { background:#FFF; }
#header .header-bottom.fixed-top { border-bottom-color: #e9e9e9; box-shadow: 0 0 3px rgba(0, 0, 0, 0.1); border-bottom: 1px solid transparent; transition: min-height 0.3s ease; }
#header .header-bottom .navbar ul.navbar-nav li.nav-item { position:relative; z-index:10; }
#header .header-bottom .navbar ul.navbar-nav li.nav-item .nav-link { position:relative; }
#header .header-bottom .navbar ul.navbar-nav li a { border-radius: 4px; color: #003F91; font-size: 16px; font-style: normal; font-weight: 700; line-height: 20px; padding: 10px 13px; font-family: 'Montserrat'; }
#header .header-bottom .navbar ul.navbar-nav li a:hover { text-decoration:none; }
#header .header-bottom .navbar ul.navbar-nav li.nav-item:hover { background:#003F91; border-radius:4px; }
#header .header-bottom .navbar ul.navbar-nav li.nav-item:hover > a { color:#FFF; }
#header .header-bottom .navbar ul.navbar-nav li ul.social-links li { margin:0; border-radius:50%; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.3); }
#header .header-bottom .navbar ul.navbar-nav li ul.social-links li a { display:inline-block; width:30px; height:30px; line-height:30px; padding:0; text-align:center; }
#header .header-bottom .navbar ul.navbar-nav li ul.social-links li i { font-size:14px; color:rgb(51, 51, 51); }
#header .header-bottom .navbar ul.navbar-nav li > ul.sub-menu { display:none; position:absolute; left:0; top:35px; z-index:5; min-width:240px; border-radius: 0 4px 4px; text-align:left; background:#FFF; border: 0; border-top-color: currentcolor; border-top-style: none; border-top-width: 0px; border-top: 5px solid #CCC; border-top-color: rgb(204, 204, 204); box-shadow: 0 20px 45px rgba(0, 0, 0, 0.08); border-top: 5px solid #003F91; }
#header .header-bottom .navbar ul.navbar-nav li > ul.sub-menu li a { display:inline-block; width:100%; }
#header .header-bottom .navbar ul.navbar-nav li > ul.sub-menu li:last-child { border-radius:4px; }

#footer a { color:#FFF; }
#footer .footer-top { background:#1B5791; color:#FFF; }
#footer .footer-top h5 { font-size:22px; font-weight: 200; letter-spacing: normal; line-height: 27px; margin: 0 0 14px 0; font-family: "Open Sans" !important; }
#footer .footer-top .newsletter button { right:0; top:0; }
#footer .footer-top .newsletter input { border: 1px solid #ccc; }
#footer .footer-top .newsletter-ribbon { padding: 10px 20px 6px 20px; background: #003a71 !important; color: #FFF; font-size: 19px; font-family: "Open Sans" !important; position: absolute; top:-64px; }
#footer .footer-top .newsletter-ribbon:before { border-left-color: #005580; border-right: 10px solid #01354E; border-top: 16px solid transparent; content: ""; display: block; height: 0; left: -10px; position: absolute; top: 0; width: 7px; }
#footer .footer-top .social li a { -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; transition: all 0.2s ease; background: #FFF; border-radius:50%; display: block; margin: 0px 2px; height: 30px; line-height: 30px; width: 30px; text-align: center; color:rgb(51, 51, 51); text-decoration: none; }
#footer .footer-bottom { background:#003A71; font-size:13px; color:#FFF; }

#main p { color:#949292; font-weight:300; line-height:32px; }

.breadcrumb-area { background:url('../image/bg_page-title.png') no-repeat left center; margin: 0 0 0px 0 !important; min-height: 130px !important; position: relative !important; text-align: left !important; }
.breadcrumb-area .breadcrumb { background:none; color:#FFF; }
.breadcrumb-area .breadcrumb .breadcrumb-item { color:#FFF; font-size:16px; }
.breadcrumb-area .breadcrumb .breadcrumb-item a { color:#FFF; }
.breadcrumb-area .breadcrumb .breadcrumb-item:before { color:#FFF; }
.breadcrumb-area .breadcrumb .breadcrumb-item h1 { color: #FFF !important; font-size: 16px; margin:0; display: inline-block !important; }

.home-concept { background:url('../image/bg_home-concept.png') no-repeat center center; }
.home-concept strong { color: #003F91; display: block; font-family: "Roboto" !important; font-size: 33.6px; font-weight: normal; position: relative; }
.home-concept .mask { margin:auto; }
.home-concept .circle .mask { background: transparent url('../image/home-concept-item.png') no-repeat 0 0; width: 160px; height: 180px; position: relative; z-index: 1; }
.home-concept .circle .mask img { border-radius: 150px; margin: 7px 8px; max-width: 145px; max-height: 145px; }

.inverted { color: #FFF; display: inline-block; padding-left: 15px; padding-right: 15px; background-color: #003F91; }
.word-rotate { display: inline-block; overflow: hidden; text-align: center; position: relative; max-height: 22px; line-height: 22px; }
.word-rotate .word-rotate-items { position: relative; top: 0; width: 0; display: inline-block; }
.word-rotate .word-rotate-items span { display: inline-block; white-space: nowrap; }
.word-rotate .word-rotate-items span:not(:first-child) { display: none; }
.word-rotate.active .word-rotate-items { position: relative; }
.word-rotate.active .word-rotate-items span { display: inline-block; font-family: "Open Sans"!important; clear: both; }

p.word-rotator-title { text-align:center; font-size: 2.5rem; margin-bottom: .5rem; font-family: inherit; font-weight: 500; line-height: 1.2; margin-top: 0; }
p.word-rotator-title .inverted { min-height: 56px; }
p.word-rotator-title .word-rotate { max-height: 56px; line-height: 56px; margin-bottom: -9px; }

#mainpage #slider .carousel-caption p.title { font-size:62px; font-weight:bold; color:#FFF; }
#mainpage #slider .carousel-caption p.description { font-size:24px; text-align:left; color:#FFF; }
#mainpage #slider .carousel-caption { transform: translateY(-50%); bottom: 0; top: 50%; }
#mainpage .corporate-video { background:#171717; }
#mainpage .corporate-video p { color: #FFF !important; font-size:19.6px; font-weight: 300; font-family: 'Open Sans'; }
#mainpage .corporate-video em { color:#FFF; font-family: "Roboto" !important; font-style: normal; font-size:30px; }
#mainpage .corporate-video span { display: block; font-size: 0.8em; color:#F8F8F8; }
#mainpage .promo .promo-title { font-size:21px; font-weight: 300; display: block; color: #044591; width: 100%; text-align: center; font-family: 'Open Sans' !important; line-height: 40px; }
#mainpage .highlight { font-family: 'Nunito' sans-serif !important}
#mainpage .highlight h2{ font-size: 36px}
#mainpage .highlight p { color:#000; font-size: 15px;}
#mainpage .business-line { background:#F4F4F4; border-top: 5px solid #f1f1f1; }
#mainpage .business-line h3 a { font-size:14px; color:#1b5791 !important; font-family:'Open Sans'; }
#mainpage .business-line h5 { font-size:14px; color:#1b5791 !important; font-family:'Open Sans'; }
#mainpage .business-line p { color: #000; line-height:22px; margin: 0 0 20px; font-family:'Open Sans'; font-size:14px; font-weight:normal; }
#mainpage .parallax { background-image: url("../image/parallax-people.jpg"); height:534px; background-attachment: fixed; background-position:center center; background-repeat: no-repeat; background-size: cover; }
#mainpage .parallax img { box-shadow: 0px 0px 2px 3px white; transform-style: preserve-3d; }
#mainpage .parallax p { color:#FFF !important; }
#mainpage .brand-list { background:#F4F4F4; }
#mainpage #footer { margin-top:0 !important; }

#why-we-are-trusted {
    color: #11296B;
}

#about .counter { background:#046FA4; color:#FFF; text-align:center; }
#about .counter i::before { float:left; margin-right:10px; }
#about .counter i span { font-family:'Open Sans'; }
#about .counter span { display:block; float:left; }
#about .counter span.count { font-size:30px; font-weight:bold; }
#about .counter span.description { font-size:14px; font-weight:normal; text-align:left; margin-left:50px; }
#about .call-center { height:500px; background: url("../image/parallax-company.jpg"); background-position:center center; background-repeat:no-repeat; background-size:cover; }
#about .call-center p { padding-top:130px; font-size: 30px !important; color: #fff !important; font-weight: normal !important; font-family: 'Open Sans'; display: block; line-height: 35px; }
#about .our-team .name { color: #1b5791 !important; font-weight: bold;font-size: 15px; font-weight:bold; }
#about .our-team .department { color: #003F91 !important; font-size: 13px; }
#about .our-team .fab { font-size:20px; color:#0077B5; }
#about .our-customers .row .col-3 img { float:left; }
#about .our-customers .row .col-3 { font-size:12px; margin-top:15px; padding:15px; }

#services .promo img { width:100%; }
#services .promo .promo-title { color:#FFF; z-index:3; font-size: 14px !important; font-weight: bold; line-height: 20px;}
#services .service-list .service-box { height:360px; border: 1px solid #ECECEC; border-top-color: rgb(236, 236, 236); border-top-style: solid; border-top-width: 1px; border-radius: 5%; padding:10px 15px; border-radius: 5%; text-align:center; }
#services .service-list .service-box.red { border-top: 4px solid #BA232A; color:#BA232A; }
#services .service-list .service-box.blue { border-top: 4px solid #61A8DF; color:#61A8DF; }
#services .service-list .service-box.green { border-top: 4px solid #87C177; color:#87C177; }
#services .service-list .service-box.purple { border-top: 4px solid #8480BB; color:#8480BB; }
#services .service-list .service-box h2 { font-size:14px; margin:15px 0; font-weight:600; color: #003F91 !important; }
#services .service-list .service-box p { line-height:22px; }
#services .service-list .service-box a { color:inherit; }
#services .nav.flex-column li a { font-size:12px; color:#003F91 !important; border-bottom:1px solid #EDEDDE; }
#services .nav.flex-column li a:hover { background:#EEEEEE; transition: background 0.2s; }
#services .promo { padding-top:100px; height:400px; background:url('../image/hero-image-services.png'); background-repeat:no-repeat; background-position:center center; background-size:100%; }
#services .promo p { color:#FFF; font-size:36px; }
#services #accordion h3 { text-align:center; padding:15px 0; }

#contact #main .contact-form input { box-shadow: inset 0 1px 2px rgba(0, 0, 0, .075); }
#contact #main p { color:#003F91; }
html[lang="ar"] #contact #main .address-list p b { display:inline-block; }

@media (max-width: 575.98px) {
    #mainpage .promo .promo-title { font-size:16px; }
    .parallax { padding-top:50px; }
    .rotate-words .words { font-size:16px; }
}

@media (min-width: 575.98px) {
    .home-concept .circle.big .mask { background: transparent url(../image/home-concept-item.png) no-repeat 100% 0; width: 350px; height:380px; }
    .home-concept .circle.big .mask img { border-radius:100%; margin:10px; max-width:330px; max-height:330px; }
}

@media (max-width: 767.98px) {
    .promo .promo-title { font-size:19px; }
}

@media (max-width: 991.98px) {
    .home-concept { background:none; }
    .alarm-center img { width:100%; }
}

@media (min-width: 991.98px) {
    #header .header-bottom .navbar ul.navbar-nav li.nav-item:hover > ul.sub-menu { display:block; }
    #header .header-bottom .navbar ul.navbar-nav li > ul.sub-menu li { line-height:24px; padding: 0; border-top:1px solid #f4f4f4; }
    #header .header-bottom .navbar ul.navbar-nav li > ul.sub-menu li a { padding:8px 15px; font-weight:normal; }
    #header .header-bottom .navbar ul.navbar-nav li > ul.sub-menu li:hover { background: #f5f5f5; }
}

@media (min-width: 991.98px) {
    #mainpage .home-concept .row .col-lg-2 { margin-top:150px !important; }
    .home-concept strong { font-size:27px; }
}


.bs-slider{
    overflow: hidden;
    max-height: 700px;
    position: relative;
    background: #000000;
}
.bs-slider:hover {
    cursor: -moz-grab;
    cursor: -webkit-grab;
}
.bs-slider:active {
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
}
.bs-slider .bs-slider-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.40);
}
.bs-slider > .carousel-inner > .item > img,
.bs-slider > .carousel-inner > .item > a > img {
    margin: auto;
    width: 100% !important;
}

/********************
*****Slide effect
**********************/

.fade {
    opacity: 1;
}
.fade .item {
    top: 0;
    z-index: 1;
    opacity: 0;
    width: 100%;
    position: absolute;
    left: 0 !important;
    display: block !important;
    -webkit-transition: opacity ease-in-out 1s;
    -moz-transition: opacity ease-in-out 1s;
    -ms-transition: opacity ease-in-out 1s;
    -o-transition: opacity ease-in-out 1s;
    transition: opacity ease-in-out 1s;
}
.fade .item:first-child {
    top: auto;
    position: relative;
}
.fade .item.active {
    opacity: 1;
    z-index: 2;
    -webkit-transition: opacity ease-in-out 1s;
    -moz-transition: opacity ease-in-out 1s;
    -ms-transition: opacity ease-in-out 1s;
    -o-transition: opacity ease-in-out 1s;
    transition: opacity ease-in-out 1s;
}






/*---------- LEFT/RIGHT ROUND CONTROL ----------*/
.control-round .carousel-control {
    top: 47%;
    opacity: 0;
    width: 45px;
    height: 45px;
    z-index: 100;
    color: #ffffff;
    display: block;
    font-size: 24px;
    cursor: pointer;
    overflow: hidden;
    line-height: 43px;
    text-shadow: none;
    position: absolute;
    font-weight: normal;
    background: transparent;
    -webkit-border-radius: 100px;
    border-radius: 100px;
}
.control-round:hover .carousel-control{
    opacity: 1;
}
.control-round .carousel-control.left {
    left: 1%;
}
.control-round .carousel-control.right {
    right: 1%;
}
.control-round .carousel-control.left:hover,
.control-round .carousel-control.right:hover{
    color: #fdfdfd;
    background: rgba(0, 0, 0, 0.5);
    border: 0px transparent;
}
.control-round .carousel-control.left>span:nth-child(1){
    left: 45%;
}
.control-round .carousel-control.right>span:nth-child(1){
    right: 45%;
}





/*---------- INDICATORS CONTROL ----------*/
.indicators-line > .carousel-indicators{
    right: 45%;
    bottom: 3%;
    left: auto;
    width: 90%;
    height: 20px;
    font-size: 0;
    overflow-x: auto;
    text-align: right;
    overflow-y: hidden;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 1px;
    white-space: nowrap;
}
.indicators-line > .carousel-indicators li{
    padding: 0;
    width: 15px;
    height: 15px;
    border: 1px solid rgb(158, 158, 158);
    text-indent: 0;
    overflow: hidden;
    text-align: left;
    position: relative;
    letter-spacing: 1px;
    background: rgb(158, 158, 158);
    -webkit-font-smoothing: antialiased;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    margin-right: 5px;
    -webkit-transition: all 0.5s cubic-bezier(0.22,0.81,0.01,0.99);
    transition: all 0.5s cubic-bezier(0.22,0.81,0.01,0.99);
    z-index: 10;
    cursor:pointer;
}
.indicators-line > .carousel-indicators li:last-child{
    margin-right: 0;
}
.indicators-line > .carousel-indicators .active{
    margin: 1px 5px 1px 1px;
    box-shadow: 0 0 0 2px #fff;
    background-color: transparent;
    position: relative;
    -webkit-transition: box-shadow 0.3s ease;
    -moz-transition: box-shadow 0.3s ease;
    -o-transition: box-shadow 0.3s ease;
    transition: box-shadow 0.3s ease;
    -webkit-transition: background-color 0.3s ease;
    -moz-transition: background-color 0.3s ease;
    -o-transition: background-color 0.3s ease;
    transition: background-color 0.3s ease;

}
.indicators-line > .carousel-indicators .active:before{
    transform: scale(0.5);
    background-color: #fff;
    content:"";
    position: absolute;
    left:-1px;
    top:-1px;
    width:15px;
    height: 15px;
    border-radius: 50%;
    -webkit-transition: background-color 0.3s ease;
    -moz-transition: background-color 0.3s ease;
    -o-transition: background-color 0.3s ease;
    transition: background-color 0.3s ease;
}



/*---------- SLIDE CAPTION ----------*/
.slide_style_left {
    text-align: left !important;
}
.slide_style_right {
    text-align: right !important;
}
.slide_style_center {
    text-align: center !important;
}

.slide-text {
    left: 0;
    top: 25%;
    right: 0;
    margin: auto;
    padding: 10px;
    position: absolute;
    text-align: left;
    padding: 10px 85px;
    
}

.slide-text > h1 {
    
    padding: 0;
    color: #ffffff;
    font-size: 70px;
    font-style: normal;
    line-height: 84px;
    margin-bottom: 30px;
    letter-spacing: 1px;
    display: inline-block;
    -webkit-animation-delay: 0.7s;
    animation-delay: 0.7s;
}
.slide-text > p {
    padding: 0;
    color: #ffffff;
    font-size: 20px;
    line-height: 24px;
    font-weight: 300;
    margin-bottom: 40px;
    letter-spacing: 1px;
    -webkit-animation-delay: 1.1s;
    animation-delay: 1.1s;
}
.slide-text > a.btn-default{
    color: #000;
    font-weight: 400;
    font-size: 13px;
    line-height: 15px;
    margin-right: 10px;
    text-align: center;
    padding: 17px 30px;
    white-space: nowrap;
    letter-spacing: 1px;
    display: inline-block;
    border: none;
    text-transform: uppercase;
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
    -webkit-transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
    transition: background 0.3s ease-in-out, color 0.3s ease-in-out;

}
.slide-text > a.btn-primary{
    color: #ffffff;
    cursor: pointer;
    font-weight: 400;
    font-size: 13px;
    line-height: 15px;
    margin-left: 10px;
    text-align: center;
    padding: 17px 30px;
    white-space: nowrap;
    letter-spacing: 1px;
    background: #00bfff;
    display: inline-block;
    text-decoration: none;
    text-transform: uppercase;
    border: none;
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
    -webkit-transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
    transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
}
.slide-text > a:hover,
.slide-text > a:active {
    color: #ffffff;
    background: #222222;
    -webkit-transition: background 0.5s ease-in-out, color 0.5s ease-in-out;
    transition: background 0.5s ease-in-out, color 0.5s ease-in-out;
}






/*------------------------------------------------------*/
/* RESPONSIVE
/*------------------------------------------------------*/

@media (max-width: 991px) {
    .slide-text h1 {
        font-size: 40px;
        line-height: 50px;
        margin-bottom: 20px;
    }
    .slide-text > p {

        font-size: 18px;
    }
}


/*---------- MEDIA 480px ----------*/
@media  (max-width: 768px) {
    .slide-text {
        padding: 10px 50px;
    }
    .slide-text h1 {
        font-size: 30px;
        line-height: 40px;
        margin-bottom: 10px;
    }
    .slide-text > p {
        font-size: 14px;
        line-height: 20px;
        margin-bottom: 20px;
    }
    .control-round .carousel-control{
        display: none;
    }

}
@media  (max-width: 480px) {
    .slide-text {
        padding: 10px 30px;
    }
    .slide-text h1 {
        font-size: 20px;
        line-height: 25px;
        margin-bottom: 5px;
    }
    .slide-text > p {
        font-size: 12px;
        line-height: 18px;
        margin-bottom: 10px;
    }
    .slide-text > a.btn-default, 
    .slide-text > a.btn-primary {
        font-size: 10px;
        line-height: 10px;
        margin-right: 10px;
        text-align: center;
        padding: 10px 15px;
    }
    .indicators-line > .carousel-indicators{
        display: none;
    }

}

.bg-dreamland-blue {
    background-color: #003F91;
    border-color: #003F91;
}

.dreamland-blue {
    color: #003F91;
}

.statistics {
    margin-top: -50px !important;
    position: relative;
    z-index: 50000 !important;
}

.statistics-card {
    background-color: #fff;
    width: 200px;
    height: 100px;
    font-size: 15px;
    color: #003F91;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}


.debug {
    border: solid red 1px;
}