/* Add here all your CSS customizations */

:root {
    --blue-1: #0A5B91;
    --blue-2: #24A0c7;
    --blue-3: #88C3E4;
    --black: #26292D;
    --btn-pri-border-dark: #06436b;
    --btn-pri-border-light: #1b81c5;
    --btn-pri-border-light-h: #2baed6;
    --btn-pri-border-dark-h: #1e94b8;
}

a {
    cursor: pointer;
    color: var(--blue-1);
}

html .bg-color-primary, html .bg-primary {
    background: linear-gradient(to right, var(--blue-3), var(--blue-1)) !important;
}

#header .header-nav-top .dropdown-menu:before {
    left: 17px;
}

html .featured-boxes-style-4 .featured-box.featured-box-primary .icon-featured {
    border-color: var(--blue-2);
    color: var(--blue-2);
}

html .featured-boxes-full-scale > .featured-box-full-primary:nth-child(1) {
    background-color: var(--blue-1);
}

html .featured-boxes-full-scale > .featured-box-full-primary:nth-child(2) {
    background-color: var(--blue-2);
}

html .featured-boxes-full-scale > .featured-box-full-primary:nth-child(3) {
    background-color: var(--blue-3);
}

.col-lg-5th {
    flex: 0 0 20% !important;
    /* width: 17% */
}

#home-products .icon {
    width: 50%
}

#home-services .animated-icon {
    text-align: center
}

.owl-carousel .owl-dots .owl-dot.active span, .owl-carousel .owl-dots .owl-dot:hover span {
    background-color: #fff;
}

#home-call-to-action {
    position: relative;
}

#header a {
    cursor: pointer;
}

.page-header.page-header-modern.page-header-background {
    background-position: center;
}

    .page-header.page-header-modern.page-header-background::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        color: red;
    }

#footer {
    background: linear-gradient(to right, var(--blue-2), var(--blue-1));
    border-top: 4px solid var(--blue-2);
    font-size: 0.9em;
    margin-top: 0;
    padding: 0;
    position: relative;
    clear: both;
}

footer .social-icons li a {
    height: 40px;
    line-height: 40px;
    width: 40px;
    text-decoration: none;
}

footer p, footer a {
    color: #fff !important
}

.header-logo, .header-logo img {
    height: 60px;
    width: 146.5px;
}

.header-logo {
    margin: 0 0 23px 0 !important;
    align-self: flex-end;
}

.sticky-header-active .header-logo {
    align-self: center;
    margin: 0 !important
}

    .sticky-header-active .header-logo img {
        height: 49px !important;
        width: auto;
    }

@media (min-width: 992px) {
    #header .header-nav.header-nav-links nav > ul > li > a, #header .header-nav.header-nav-links nav > ul > li:hover > a, #header .header-nav.header-nav-line nav > ul > li > a, #header .header-nav.header-nav-line nav > ul > li:hover > a {
        padding: 0 1.2rem;
    }
}

.page-header .captions {
    background-color: #ffffffbb;
    padding: 45px;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

.page-header h1 {
    font-size: 2.5rem !important;
}

.page-header h1, .page-header .sub-title {
    color: var(--blue-1)
}

.overlay.overlay-op-5:hover:before, .overlay.overlay-op-5.overlay-show:before, .overlay.overlay-op-5.show:before {
    opacity: 0.2;
}

.page-header.overlay.overlay-show::before {
    opacity: var(--opacity);
}

.feature-box.feature-box-style-2 .feature-box-icon [class*="fa-"], .feature-box.feature-box-style-2 .feature-box-icon .icons {
    color: inherit !important;
}

.bg-color-light-grey {
    background: #ddd
}

.feature-box .feature-box-icon {
    color: var(--blue-1);
    font-size: 40px;
    transform: translatey(-25px)
}

#footer-logo {
    width: 180px;
}

.bg-color-blue {
    background-color: var(--blue-1);
}

/*=========================================================
  MOBILE NAVIGATION
  =======================================================*/

.header-nav-main-mobile-white {
    background-color: #fff;
}

@media (max-width: 991px) {
    html #header.header-transparent .header-body.bg-dark .header-nav-main:before, html #header.header-transparent .header-body.bg-color-dark .header-nav-main:before {
        background-color: #fff;
    }

    #header .header-nav-main.header-nav-main-mobile-dark nav > ul > li > a {
        color: #333;
    }

    main.header-nav-main-mobile-dark nav > ul > li > a {
        color: #fff;
    }

    #header .header-nav-main.header-nav-main-mobile-dark nav > ul li a:hover, #header .header-nav-main.header-nav-main-mobile-dark nav > ul li a:focus, #header .header-nav-main.header-nav-main-mobile-dark nav > ul li a:active {
        background-color: #fff;
    }

    #header .header-nav-main.header-nav-main-mobile-dark nav > ul li {
        border-bottom: 1px solid #ccc;
    }
}

/*=========================================================
  WOW BOOK
  =======================================================*/

.wowbook-lightbox {
    background: radial-gradient(closest-corner at center, #00000000, #00000033), url("../img/flip-book-light-box-bg.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: right;
}

    .wowbook-lightbox > .wowbook-close, .wowbook-lightbox > .wowbook-close:focus {
        background: none;
        border: none;
        color: white;
        height: 2em;
        line-height: 1em;
        width: 2em;
        font-size: 2rem;
        outline: none;
        color: #333;
        opacity: .4;
        transition: opacity .3s ease;
    }

        .wowbook-lightbox > .wowbook-close:hover {
            opacity: .7;
        }

#book {
    /* box-shadow: 0 3px 7px 0 #00000066; */
}

.wowbook-controls, .wowbook-share-buttons, .wowbook-nav {
    box-shadow: 0 0 10px 0 rgb(0 0 0 / 20%);
    /* background: #222; */
    background: linear-gradient(to bottom, #555, #333);
    background-repeat: repeat-x;
    color: white;
}

.heading.heading-middle-border h1, .heading.heading-middle-border h2, .heading.heading-middle-border h3, .heading.heading-middle-border h4, .heading.heading-middle-border h5, .heading.heading-middle-border h6 {
    position: relative;
    background: transparent;
    display: inline-block;
}

#show-book {
    display: inline-block;
    transition: all .3s ease-in-out
}

    #show-book:hover {
        transform: scale(1.1);
    }

/*=========================================================
  Timeline
  =======================================================*/

.slider-years .item {
    display: flex !important;
    align-items: center;
    --border-color: #aaa;
}

    .slider-years .item:focus {
        outline: none
    }

    .slider-years .item::before {
        content: "";
        flex: auto;
        border-bottom: 1px solid var(--border-color);
    }

    .slider-years .item::after {
        content: "";
        flex: auto;
        border-bottom: 1px solid var(--border-color);
    }

.slider-years .wrap {
    display: grid;
    grid-template: 15px auto/1fr 15px 1fr;
    grid-template-areas: "left-line circle right-line" "date date date";
    align-items: center;
    margin-top: 30px;
    gap: 5px 0;
}

    .slider-years .wrap::before, .slider-years .wrap::after {
        content: "";
        grid-area: "left-line";
        width: 100%;
        height: 1px;
        background-color: var(--border-color);
    }

    .slider-years .wrap::after {
        grid-area: "right-line";
    }

    .slider-years .wrap .circle {
        width: 15px;
        height: 15px;
        border: 2px solid var(--blue-1);
        border-radius: 50%;
        transition: all .3s ease
    }

.slider-years .date {
    margin: 0;
    grid-area: date;
    height: 24px;
}

.slider-years-wrap .slick-arrows-wrap {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    display: flex;
    justify-content: space-between;
    transform: translatey(-50%);
    background: linear-gradient(to right, #ffffff 0, #ffffff00 60px, #ffffff00 calc(100% - 60px), #ffffff 100%);
    pointer-events: none;
}

.slider-years-wrap .slick-arrow {
    font-size: 35px;
    transform: translatex(calc(-100% - 15px));
    cursor: pointer;
    color: #ccc;
    pointer-events: all;
}

.slider-years-wrap .slick-arrow-next {
    transform: translatex(calc(100% + 15px))
}

@media (max-width: 575px) {
    .slider-years-wrap .slick-arrow {
        transform: translatex(-100%);
    }

    .slider-years-wrap .slick-arrow-next {
        transform: translatex(100%);
    }
}

.slider-years .slick-current .circle {
    background-color: var(--blue-1)
}

/* slider events */

.slider-events {
    margin-top: 30px;
}

    .slider-events .slide {
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .slider-events .slide:focus {
            outline: none;
        }

        .slider-events .slide ul {
            list-style-type: none;
        }

.products-list > li {
    padding-left: 0;
    list-style-type: none;
    /* list-style-type: square; */
}

.products-list li i {
    font-size: 2em;
    color: var(--blue-1)
}

.products-list li li {
    list-style-type: square;
    margin-bottom: 0
}

    .products-list li li::marker {
        color: var(--blue-1);
        font-size: 1.5em;
    }

.products-list .list-title {
    font-weight: bold;
    margin-bottom: 15px;
    display: block
}

/*=========================================================
  success stories
  =======================================================*/

.success-stories-title {
    color: #26292D;
}

/*=========================================================
  article
  =======================================================*/

.title-style {
    margin-top: 50px;
    word-spacing: 7px;
    line-height: 5px;
}

.article-social-icons {
    margin-left: 15px;
    margin-right: 15px;
}

/*=========================================================
  culture
  =======================================================*/

.word-cloud {
    font-family: sans-serif;
    font-weight: bold;
    width: 100%;
    height: 650px;
}

/*=========================================================
  
  =======================================================*/

@media (min-width: 768px) {
    .fixed-height {
        height: 105px;
    }
}

/*=========================================================
  partners
  =======================================================*/

.social-icons:not(.social-icons-opacity-light):not(.social-icons-transparent):not(.social-icons-clean):not(.social-icons-clean-with-border):not(.social-icons-dark):not(.social-icons-dark-2):not(.custom-social-icons) li {
    box-shadow: 0 0px 0px 0 rgb(0 0 0 / 20%);
}

    .social-icons:not(.social-icons-opacity-light):not(.social-icons-transparent):not(.social-icons-clean):not(.social-icons-clean-with-border):not(.social-icons-dark):not(.social-icons-dark-2):not(.custom-social-icons) li a {
        background: #F0F0F0;
    }

/*=========================================================
  success stories
  =======================================================*/

blockquote {
    border-left: 13px solid #0A5B91;
}

/*=========================================================
  corporate social responsability
  =======================================================*/

.col-md-6.img-position {
    padding-left: unset;
    padding-right: unset;
    background-size: cover;
    margin: 0px;
}

.embed-responsive.embed-responsive-16by9 {
    height: 100%;
}

/*=========================================================
  news and events
  =======================================================*/

p.text-primary.news-text {
    margin: 0;
}

img.resize-image {
    width: 100%;
}

/*=========================================================
  products
  =======================================================*/

a.text-decoration-none.products-read-more {
    color: var(--blue-2) !important;
}

#header-2.stuck {
    position: fixed;
    top: 70px;
    width: 100%;
    z-index: 12;
    background-color: white !important;
}

    #header-2.stuck + .container {
        margin-top: 60px;
    }

@media (max-width:989px) {
    .feature-size {
        height: 260px;
    }
}

@media (max-width:640px) {
    .feature-size {
        height: 250px;
    }
}

.collapse.navbar-collapse.collapse-sticky-nav {
    display: contents;
}

/*=========================================================
     modules
  =======================================================*/

.col-md-6.text-right.padding-div {
    padding-right: 2px;
    padding-left: 2px;
}

.stickyy {
    position: -webkit-sticky;
    position: sticky;
    top: 94px;
    z-index: 1;
}

.padding-remove {
    padding: 0px !important;
}

section.page-header.section-page-header {
    margin: 0px;
    padding: 0px;
}

/*=========================================================
    CLIENT PORTAL
  =======================================================*/

.slider-screen-shot button.slick-prev.slick-arrow:before {
    color: #06436b;
    font-size: 30px;
}

.slider-screen-shot button.slick-next.slick-arrow:before {
    color: #06436b;
    font-size: 30px;
}

.button.slick-prev.slick-arrow {
    left: 60px;
}

.button.slick-next.slick-arrow {
    right: 60px;
}

element.style {
    top: 0;
    bottom: 0;
    right: 10px;
    left: 10px;
}

.position-absolute.d-flex.align-content-center.align-items-center {
    z-index: 4;
}

.slick-list.draggable.justify-content-center {
    padding: 0px 0px !important;
}

@media (max-width:640px) {
    .image_section img:first-child {
        display: none;
    }
}

.laptop-mask {
    left: 50%;
    transform: translatex(-50%);
    pointer-events: none;
    position: absolute;
    top: 27px;
    width: 1015px;
    z-index: 1;
}

.laptop-slider-wrap {
    height: 500px
}

@media (max-width: 1674px) {
    .laptop-mask {
        /* top: 53px; */
        width: 1015px;
    }
}

@media (max-width: 1193px) {
    .laptop-mask {
        top: 33px;
        width: 780px;
    }

    .laptop-slider-wrap {
        height: 400px
    }
}

@media (max-width: 992px) {
    .laptop-mask {
        top: 44px;
        width: 470px;
    }

    .laptop-slider-wrap {
        height: 300px
    }
}

@media (max-width: 774px) {
    .laptop-mask {
        display: none;
    }

    .laptop-slider-wrap {
        height: 300px
    }
}

@media (max-width: 767px) {
    .laptop-mask {
        display: none;
    }

    .laptop-slider-wrap {
        height: 250px
    }

    .laptop-slider {
        margin: 0 !important;
        padding: 0 !important;
    }
}

@media (max-width: 425px) {
    .laptop-mask {
        display: none;
    }

    .laptop-slider-wrap {
        height: 190px
    }

    .laptop-slider {
        margin: 0 !important;
        padding: 0 !important;
    }
}

/*=========================================================
   learnning comminity 
  =======================================================*/

i.fas.fa-size {
    font-size: 8em !important;
}

button {
    font-weight: bold;
}

.image_section img {
    display: block;
}

/*=========================================================
   MOBILE SLIDER
  =======================================================*/

.mobile-slider-wrap {
    height: 1000px
}

.mobile-mask {
    left: 50%;
    transform: translatex(-50%);
    pointer-events: none;
    position: absolute;
    top: 47px;
    width: 224px;
    z-index: 1;
}

.mobile-slider-wrap .slick-slide {
    transition: all .3s ease;
}

    .mobile-slider-wrap .slick-slide.slick-active.slick-center {
        opacity: 1;
    }

    .mobile-slider-wrap .slick-slide.slick-active:not(.slick-center) {
        opacity: .5;
    }

    .mobile-slider-wrap .slick-slide:not(.slick-active) {
        opacity: .2;
    }

@media (max-width: 1199px) {
    .mobile-mask {
        top: 53px;
        width: 155px;
    }
}

@media (max-width: 991px) {
    .mobile-mask {
        top: 55px;
        width: 94px;
    }
}

@media (max-width: 767px) {
    .mobile-mask {
        top: 20px;
        width: 308px;
    }
}

@media (max-width: 574px) {
    .mobile-mask {
        /* top: 20px; */
        width: 320px;
    }

    .screen-mobile {
        display: none;
    }
}

.btn-hover:hover {
    background-color: #06436b !important;
    color: #fff !important;
}

#header-2 .dropdown-item {
    background-color: transparent;
}

    #header-2 .dropdown-item i {
        opacity: 0;
        transform: translatex(-10px);
        transition: all .3s .05s;
    }

    #header-2 .dropdown-item span {
        transform: translatex(-20px);
        display: inline-block;
        transition: all .3s;
    }

    #header-2 .dropdown-item:hover i {
        opacity: 1;
        transform: translatex(10px);
        -webkit-margin-start: 0px;
        margin-inline-start: 0px;
    }

    #header-2 .dropdown-item:hover span {
        transform: translatex(0);a
    }

@media (min-width: 992px) {
    #header .header-nav-main nav > ul > li.dropdown .dropdown-menu li a {
        border-bottom: unset;
        color: #777;
        font-size: 1em;
        font-weight: 400;
        padding: unset;
        position: relative;
        text-transform: none;
        letter-spacing: unset;
    }

        #header .header-nav-main nav > ul > li.dropdown .dropdown-menu li a:hover {
            text-decoration: none;
        }
}

#msg-from-our-ceo {
    background: url(/media/1194/sami-slim-resized.jpg) #c7c5ca;
    --opacity: .10;
    background-position: right top !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
}

    #msg-from-our-ceo > div {
        width: 65%;
    }

#msg-from-our-ceo-2 {
    background: url(../media/1142/jamal-anouti.png) #7b7a7a no-repeat right top/contain;
    --opacity: .10
}

    #msg-from-our-ceo-2 > div {
        width: 1300px !important;
    }

@media (max-width: 1340px) {
    #msg-from-our-ceo {
        background-position: center right -120px !important;
    }
}

@media (max-width: 1700px) {
    #msg-from-our-ceo-2 > div {
        width: 1000px !important;
    }
}

@media (max-width: 1400px) {
    #msg-from-our-ceo-2 > div {
        width: 800px !important;
    }
}

@media (max-width: 1200px) {
    #msg-from-our-ceo-2 > div {
        width: 600px !important;
    }
}

@media (max-width: 960px) {
    #msg-from-our-ceo {
        background-position: center !important;
        background-size: cover !important;
    }

        #msg-from-our-ceo > div {
            width: auto !important;
        }

    #msg-from-our-ceo-2 {
        background-size: cover !important;
        background-position: center !important;
    }

        #msg-from-our-ceo-2 > div {
            width: auto !important;
        }
}

.dropdown-mega .dropdown-menu {
    max-height: calc(100vh - 80px);
    overflow: auto;
}

#spopupCont .credit{
    display:none
}

/* =========================================
    PRIVACY POLICY 
    ========================================= */

.privacy-policy {
    background-image: linear-gradient(to right, var(--blue-2), #9b1a1ece) !important;
}

/* =============================================
TEAM
================================== */

.thumb-info-caption .thumb-info-caption-text, .thumb-info-caption p {
    font-size: 0.9em;
    margin: 0;
    padding: 15px 0;
    display: block;
    /* /* height: 230px; */
}

.nav-tab-team > li.active > a, .nav-tab-team .nav-link.active {
    background-color: var(--blue-2) !important;
}

.nav-tab-team .nav-link.active {
    background-color: transparent;
}

.nav-tab-team .nav-link.active, .nav-tab-team .show > .nav-link {
    color: #fff;
    background-color: #007bff !important;
}

ul.nav-tab-team > li > a.active {
    color: #FFF;
    background-color: #CCC;
}

#team.tab-content {
    border: 0px !important;
    box-shadow: none;
}

.title-letter-spacing {
    letter-spacing: 5px;
}

.btn-request-demo {
    margin-top: 0 !important;
}

.title-slider {
    letter-spacing: 1px;
}

.letter-spacing-0 {
    letter-spacing: 0 !important;
}

/* =============================================
Modified KAITOO
================================== */

.fixed-width {
    width: 140px;
    margin: auto;
}

/* =============================
home page 
=================== */

.testimonial.testimonial-style-2 .testimonial-author img {
    margin: 0 auto 15px;
    max-width: 150px;
    max-height: 150px;
}

@media (min-width: 992px) {
    #header .header-nav-main nav > ul > li.dropdown-mega .dropdown-mega-content {
        padding: 1rem;
        padding-bottom: 0px;
    }
}


.p-header {
    color: #777;
    line-height: 1.4;
    font-size: 15px;
}

.h4-header {
    line-height: 1.4;
}