@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

#mobile-menu-trigger, mobile-menu-trigger-topSearch {
    font-size: 14px;
    margin-top: -25px;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    opacity: 0;
    cursor: pointer;
}

#primary-menu ul > .mega-menu > a, .bottom-footer-section a, .closebtn {
    color: #fff
}

#primary-menu ul > li.mega-menu, #primary-menu ul > li.mega-menu-search, #primary-menu ul > li.submenu, .header-content, .onapptap, .owl-carousel, .owl-carousel .owl-stage-outer, .video-box, a.navbar-brand {
    position: relative;
    cursor: default;
}

#home-top-video, #outer, .banner, .home-slider-item, .title-box, .v-box-content, a.disc-box {
    overflow: hidden
}

body {
    margin: auto;
    padding: 0;
    font-family: Montserrat,sans-serif !important;
    font-display: swap
}

body, html {
    scroll-behavior: smooth
}

.top-menue {
    background-image: url("../images/bg1-top.png");
    justify-content: flex-end !important
}

a:hover {
    text-decoration: none !important
}

#wrapper {
    background-image: url("../images/bg-top1.jpg")
}

#header, #header-wrap {
    height: 102px
}

#logo img {
    height: auto;
    max-width: 100%
}

.header-content {
    display: flex;
    align-items: center;
    z-index: 1000;
}

#logo {
    padding-right: 30px;
    margin-right: 30px;
    margin-top: 7px;
    padding-left: 30px
}

#primary-menu {
    margin-left: auto;
    display: flex
}

    #primary-menu ul {
        list-style: none;
        margin: 0 15px 0 0;
        display: flex;
        padding: 0 15px 0 0
    }

        #primary-menu ul > li > .subNodesLink, #primary-menu ul > li > a > .mega-menu-title {
            display: block;
            padding: 30px 10px;
            color: #fff;
            font-size: 20px;
            font-weight: 700;
            -o-transition: margin .4s,padding .4s
        }

.subNodesLink.active {
    color: #e9a500 !important;
}

.mega-menu-title.active {
    color: #e9a500 !important;
}

.sidenav a.active {
    color: #a48332;
    background-color: #dceffc;
    font-weight: 600;
}

.dropdown-container a {
    padding-left: 16px;
}

        #primary-menu ul > li.subNodes-list {
            padding: 0
        }

        #primary-menu ul > li.mega-menu-search {
            transition: transform .5s;
            display: none
        }

            #primary-menu ul > li.mega-menu-search img {
                height: 1em
            }

            #primary-menu ul > li.mega-menu-search:hover {
                -ms-transform: scale(1.2);
                -webkit-transform: scale(1.2);
                transform: scale(1.2)
            }

        #primary-menu ul > li.mega-menu::after, #primary-menu ul > li.submenu::after {
            content: '';
            position: absolute;
            width: 100%;
            height: 2px;
            bottom: 5px;
            left: 0;
            background-color: #a48332;
            transform-origin: bottom right;
            transition: transform .25s ease-out;
            transform: scaleX(0)
        }

        #primary-menu ul > li.mega-menu:hover::after, #primary-menu ul > li.submenu:hover::after, a.navbar-brand.ar-language:hover::after, a.navbar-brand.onapptap:hover::after, a.navbar-brand.resourcetap:hover::after {
            transform: scaleX(1);
            transform-origin: bottom left;
        }

        #primary-menu ul > li:hover {
            color: #e9a500 !important
        }

        #primary-menu ul li.submenu > ul {
            display: block
        }

        #primary-menu ul > li.submenu ul li.subNodes-list > a {
            padding: 10px;
            font-size: 12px;
            font-weight: 700;
            color: #666;
            padding-top: 10px !important;
            padding-bottom: 10px !important;
            border: 0;
            letter-spacing: 0;
            -webkit-transition: .2s ease-in-out;
            -o-transition: .2s ease-in-out;
            transition: .2s ease-in-out;
            display: flex
        }

        #primary-menu ul > li.submenu ul li.subNodes-list:hover > a {
            background-color: #e0e9ee;
            padding-left: 18px;
        }

        #primary-menu ul > li.submenu ul li.subNodes-list > a:hover, .onapptap:hover, .resourcetap:hover {
            color: #003973 !important
        }

        #primary-menu ul > li.submenu ul li.subNodes-list > a > i {
            padding-top: 4px;
            color: #6c521c
        }

.submenu-title {
    padding-left: 15px
}

a#top-search-trigger {
    padding: 10px 5px
}

#mobile-menu-trigger {
    position: absolute;
    -webkit-transition: opacity .3s;
    -o-transition: opacity .3s;
    transition: opacity .3s;
    top: 30px
}

    #mobile-menu-trigger img {
        height: 2em
    }

mobile-menu-trigger-topSearch {
    position: absolute;
    -webkit-transition: opacity .3s;
    -o-transition: opacity .3s;
    transition: opacity .3s;
    top: 50px;
    right: 0
}

.sticky-header #primary-menu ul li ul li a, .sticky-header #primary-menu ul > li {
    font-size: 16px
}

@media (min-width:992px) {
    #primary-menu ul > li.submenu:hover ul {
        display: block;
        opacity: 1;
        height: auto
    }

    #header.sticky-header #header-wrap, #header.sticky-header #logo img {
        height: 90px;
        width: auto;
        background-image: url(../images/bg-top1.jpg);
        opacity: 1;
        animation: 1s headerFade
    }

    @keyframes headerFade {
        0% {
            opacity: 0
        }

        100% {
            opacity: 1
        }
    }

    #header.sticky-header #header-wrap {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background-color: #fff;
        box-shadow: 0 0 10px rgba(0,0,0,.1);
        padding: 0;
        z-index: 1000;
    }

    #header.sticky-header #primary-menu ul > li > .subNodesLink, #header.sticky-header #primary-menu ul > li > a > .mega-menu-title {
        padding-top: 17px;
        padding-bottom: 17px;
        font-size: 16px
    }

    #header.sticky-header #primary-menu ul > li.subNodes-list {
        padding: 0;
        font-size: 16px
    }

    #header.sticky-header #logo img {
        height: 73px
    }
}

@media (max-width:1090px) {
    #mobile-menu-trigger {
        opacity: 1
    }

    #top-search {
        margin-top: 36px
    }

    .header-content {
        display: block
    }

    #primary-menu ul > li.mega-menu-search img, nav#primary-menu {
        display: none
    }

        #primary-menu ul > li.open-menu ul, nav#primary-menu.open {
            display: block;
            background-color: #06466c;
            padding: 10px
        }

    #primary-menu ul {
        display: block;
        border: 0;
        margin: 0;
        padding-left: 10px
    }

    #primary-menu-trigger-topSearch, mobile-menu-trigger {
        opacity: 1;
        -webkit-transition: opacity .2s .2s,top .4s;
        -o-transition: opacity .2s .2s,top .4s;
        transition: opacity .2s .2s,top .4s;
        top: 30px
    }

    #primary-menu ul > li.submenu > a, #primary-menu > .container > ul > li.sub-menu > a, #primary-menu > ul > li.sub-menu > a {
        background-image: url("../images/rightIcon.svg");
        background-position: right center;
        background-repeat: no-repeat
    }

    #primary-menu ul > li {
        padding: 14px 5px;
        border-bottom: 1px solid #eee
    }

        #primary-menu ul > .subNodes-list, #primary-menu ul > li:last-child > a {
            border-bottom: 0
        }

    #header, #header-wrap {
        height: auto
    }

    #primary-menu ul > li.open-menu ul {
        position: static;
        height: auto;
        opacity: 1
    }


    #primary-menu ul > li.submenu ul {
        width: auto;
        padding-left: 20px;
        padding-right: 20px;
        border-right: 0
    }

        #primary-menu ul > li.submenu ul li.subNodes-list a {
            border-bottom: 1px solid #eee;
            color: #ffb500
        }

        #primary-menu ul > li.submenu ul li.subNodes-list > a > i {
            padding-top: 4px;
            color: #c58500
        }

    li.submenu {
        cursor: default;
    }

    #logo {
        border: 0;
        text-align: center;
        padding: 0;
        margin: 0
    }

    div#top-search #top-search-trigger {
        position: absolute;
        top: 27px;
        right: 40px
    }
}

.sidenav a {
    transition: .3s
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 13px;
    font-size: 36px;
    margin-left: 50px
}

.closebtn {
    background: 0 0;
    border: none;
    outline: 0;
    box-shadow: none
}

.content-menue {
    background-image: url("../images/bg-top1.jpg");
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important
}

.onapptap, .resourcetap {
    color: rgb(173 135 1) !important;
    font-weight: 500
}

nav.navbar.navbar-light.top-menue img {
    width: 20px
}

.ar-language {
    background-color: #a48332;
    color: #fff !important;
    transition: 1s ease-out
}

    .ar-language:hover {
        background-color: #155a84;
        transition: 1s ease-in
    }

.navbar {
    padding: 0 !important
}

a.navbar-brand.ar-language {
    padding: 15px 25px;
    margin-right: 0.9rem;
    font-family: Montserrat, Cairo !important;
}

a.navbar-brand {
    margin-left: 5px;
    font-size: 18px !important;
    font-weight: 700
}

.box-image img, .box-image-newsImage img {
    margin-left: auto;
    margin-right: auto;
    display: block
}

a.navbar-brand.ar-language::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #a48332;
    transform-origin: bottom right;
    transition: transform .25s ease-out;
    transform: scaleX(0)
}

.cpisb-header-container, .onapptap > * {
    position: relative;
    z-index: 2
}

a.navbar-brand.onapptap, a.navbar-brand.resourcetap {
    padding-top: 15px;
    padding-bottom: 15px
}

    a.navbar-brand.onapptap::after, a.navbar-brand.resourcetap::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 2px;
        bottom: 10px;
        left: 0;
        background-color: #155a84;
        transform-origin: bottom right;
        transition: transform .25s ease-out;
        transform: scaleX(0)
    }

img.onapptap-img.blue, img.resourcetap-img.blue {
    position: absolute;
    right: 0;
    left: 0;
    opacity: 0;
    top: 30%;
}

.oc-item:hover .blue-company-image, .onapptap:hover img.onapptap-img.orginal, .resourcetap:hover img.resourcetap-img.orginal {
    opacity: 0;
}

.oc-item:hover .orginal-company-image, .onapptap:hover img.onapptap-img.blue, .resourcetap:hover img.resourcetap-img.blue {
    opacity: 1;
}

.cpisb-container {
    text-align: center;
    width: 100%;
    padding: 0 40px;
    margin: auto;
}

.navbar-light .navbar-nav .nav-link {
    color: #fff !important;
    font-weight: 600;
}


footer {
    overflow: hidden;
}

.footer-container {
    padding: 0 15px;
    max-width: 1200px;
    margin: auto;
    width: 100%;
}

.cpisb-bottom-footer {
    padding: 15px 3%;
    background-color: #042c45;
    text-align: center;
}

.bottom-footer {
    padding: 10px 0;
}

.bottom-footer-section p {
    margin-bottom: 0;
}

.bottom-footer-section, ul.footer-desc-list a {
    color: #fff;
    font-size: 18px;
    font-weight: 400;
}

    .bottom-footer-section a:hover, ul.footer-desc-list a:hover {
        color: #c99601;
    }

.cpisb-top-footer {
    background: linear-gradient(0deg,rgb(6 70 108 / 76%),rgb(6 70 108 / 73%)) 0 0/cover no-repeat,url('../images/Footer.jpg') 0 0/cover no-repeat;
    padding: 50px;
    height: 100%;
    min-height: 384px;
}

li {
    list-style: none;
}

.sidenav {
    height: 100%;
    width: 300px;
    position: fixed;
    z-index: 100;
    top: 0;
    left: -300px;
    background-color: #07476d;
    overflow-x: hidden;
    transition: .5s;
    transform: inherit;
    padding-top: 60px;
    opacity: 0
}

.home-arrow-box img, .links-box-image {
    transition: transform 1s;
    transform: translateX(0)
}

.mobl-top a {
    text-align: right !important
}

.mobl-top svg {
    height: .3em;
    font-size: 3em
}

a.disc-box, a.disc-box:hover:after {
    height: 100%
}

.dropdown-btn, .sidenav a {
    padding: 6px 8px 6px 16px;
    text-decoration: none;
    font-size: 20px;
    color: #fff;
    display: block;
    border: none;
    background: 0 0;
    width: 100%;
    text-align: left;
    cursor: pointer;
    outline: 0;
    position: relative
}

    .dropdown-btn:hover, .sidenav a:hover {
        color: #a48332;
        background-color: #dceffc
    }

.closebtn:hover {
    color: #997e35
}

.active-menu {
    background-color: #a5d6ff;
    color: #fff
}

.dropdown-btn.active {
    background-color: #a5d6ff;
    color: #fff;
}

.dropdown-btn.active {
    pointer-events: none;
}

.dropdown-container {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out;
    background-color: #2f6483;
}

    .dropdown-container.open {
        max-height: initial;
    }


/*    .dropdown-container.active {
        max-height: initial;
    }*/

#primary-menu ul > li.submenu ul li.subNodes-list > a.active {
    background-color: #e0e9ee;
    color: #003973 !important;
}

@media screen and (max-height:450px) {
    .sidenav {
        padding-top: 15px
    }

        .sidenav a {
            font-size: 18px
        }
}

.dropdown-btn:before {
    content: "";
    position: absolute;
    height: 13px;
    width: 13px;
    transform: rotate(45deg);
    border: 2px solid transparent;
    border-bottom-color: #a48332;
    border-right-color: #a48332;
    top: 14px;
    right: 24px;
    transition: .3s
}

.dropdown-btn.active-menu:before {
    transform: rotate(225deg);
}

.footer-section-desc p {
    text-align: left;
    margin-bottom: 20px;
    color: #c99601;
    font-size: 22px;
    font-weight: 700
}

ul.footer-desc-list {
    padding-left: 0;
    text-align: left
}

a.disc-box {
    background: #8ea9ba78;
    display: block;
    padding: 30px;
    position: relative;
    margin: auto
}

    a.disc-box:after {
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        width: 100%;
        height: 0;
        background: #ffb6046e;
        transition: .35s
    }

.box-image, .box-image-newsImage {
    z-index: 1;
    position: relative
}

a.disc-box:hover .disc-box-ttl {
    color: #143f67
}

.disc-box-ttl {
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    margin-top: 17px;
    text-align: center;
    z-index: 1;
    position: relative
}

.box-image img {
    width: 70%;
    height: 100%;
    min-height: 70px
}

.box-image-newsImage img {
    width: 62%
}

.home-arrow-box {
    position: absolute;
    right: 14px;
    bottom: 10px;
    z-index: 1
}

    .home-arrow-box img {
        height: 1.5em;
        position: relative
    }

.links-box:hover .links-box-image, a.disc-box:hover .home-arrow-box img {
    transform: translateX(-10px)
}

.oc-clients {
    margin: 50px 0;
}

.container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important
}

.owl-carousel .owl-item img {
    height: auto;
    max-width: 100%;
    min-height: 60px
}

/*.oc-clients .owl-next {
    position: absolute !important;
    display: block;
    line-height: 0 !important;
    cursor: pointer;
    right: -30px;
    font-size: 80px !important;
    color: gray !important;
    font-weight: 100 !important;
    top: 50%
}

.owl-carousel .owl-dots, .owl-carousel .owl-nav {
    -webkit-tap-highlight-color: transparent;
    line-height: 1
}*/

.orginal-company-image {
    position: absolute;
/*    top: 0;*/
    right: 0;
    left: 0;
    margin: auto;
    opacity: 0
}

.learnMore, .links-box, .links-box-image {
    position: relative
}

button.owl-prev {
    display: none
}


/*.media-blocks {
    width: 70%;
    margin: 49px auto auto
}*/

/*.links-blocks {
    display: flex;
    justify-content: center;
    align-items: center
}*/

.links-box {
    display: flex;
    margin: 0 10px;
    align-items: center;
    justify-content: center
}

.links-box-content {
    padding: 1vw;
    text-align: left
}

.links-content {
    display: block;
    color: #fff;
    font-size: 30px;
    line-height: 2.5rem;
    text-align: left;
    cursor: pointer
}



.links-box:hover .links-content {
    color: #e9a500
}

.links-box-image {
    width: 30%;
    max-width: 100%
}

/*.links-section {
    background-image: url("../images/bg1.jpg");
    padding: 50px;
    height: 220px
}
*/
.links-content img {
    height: 100%;
    min-height: 62px;
}

.video-section {
    position: relative;
    height: 700px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

    .video-section:before {
        background-image: url("../images/BottomVideoCover.png");
        background-size: cover;
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        /*z-index: 1;*/
    }

.video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}


.content-box {
    padding: 0;
    display: flex;
    margin: auto;
}

.video-box-content {
    position: relative;
    z-index: 1;
}

.v-box-content {
    display: block;
    padding: 30px;
    position: relative;
    border-style: solid;
    border-color: #98afbec4;
    background: #0d4c73cf;
    border-width: 9px;
}

.video-disc-box-ttl p {
    color: #fff;
    font-weight: 600;
    text-align: left;
    font-size: 32px;
}

.gold-paragraph {
    color: #a48332
}
/*
.video-play-box {
    margin-right: 55%
}*/

    .video-play-box img {
        width: 120px;
        height: 120px;
    }

.history-btns {
    margin-bottom: 30px
}

.history-title {
/*    animation-timeline: scroll(root block);
    animation-name: scaleProgress;
    animation-duration: auto;
    animation-timing-function: linear;*/
    display: block;
    margin: auto;
    width: 70%;
    position: relative;
    top: 26%;
    right: -9%
}

@keyframes scaleProgress {
    0% {
        transform: translateX(-300px)
    }

    100% {
        transform: translateX(300px)
    }
}

.history-title h2 {
    font-size: 52px;
    text-align: left;
    font-weight: 700;
    color: #143f67
}

.history-blocks-section {
    overflow: hidden;
}

.cpisb-history {
    background-image: url("../images/bg2.png");
    padding: 50px;
    background-repeat: no-repeat;
    background-size: cover
}

.CPISP-btn-firstBox, .history-btns button {
    background-image: linear-gradient(to right,#003973 0,#eba908 51%,#003973 100%)
}

.history-content {
    padding: 50px
}

.history-body {
    padding: 40px
}

    .history-body p {
        text-align: left;
        font-size: 24px;
        line-height: 2.5rem
    }

.history-btns button {
    padding: 10px 30px;
    text-align: center;
    transition: .5s;
    background-size: 200% auto;
    color: #fff;
    display: block;
    border: none;
    font-size: 18px
}

    .CPISP-btn-firstBox:hover, .CPISP-btn-secondBox:hover, .history-btns button:hover {
        background-position: right center;
        color: #fff;
        text-decoration: none
    }

.disc-icon img {
    width: 50%
}

. /*home-slider, .home-slider-item {
    height: 92vh
}

.home-bg {
    height: 100%;
    background-size: cover;
    transform: scale(1.3);
    transition: .7s;
    background-position: center
}

.owl-item.active .home-bg {
    transform: inherit;
    filter: inherit
}

.home-slider-item::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top,rgb(3 3 3 / 100%)3%,rgba(255,255,255,.13) 20%,rgba(255,255,255,.04) 80%);
    height: 100%
}

#outer, .owl-carousel .owl-dots {
    text-align: center;
    position: relative
}

.owl-carousel .owl-nav {
    text-align: center
}

.owl-carousel .owl-dots {
    top: -6%
}

    .owl-carousel .owl-dots .owl-dot {
        display: inline-block;
        zoom: 1;
        width: 4%;
        margin: 20px 8px 30px;
        opacity: .5;
        background-color: #9c9ca4;
        -webkit-transition: .3s;
        -o-transition: .3s;
        transition: .3s;
        padding: 2px !important
    }

        .owl-carousel .owl-dots .owl-dot.active, .owl-carousel .owl-dots .owl-dot:hover {
            opacity: 1;
            background-color: #a48332
        }

.home-video {
    height: 100%;
    width: 100%;
    object-fit: cover
}

#outer {
    width: 100%;
    display: block;
    min-height: 100vh
}

#home-top-video {
    left: 0;
    top: 0;
    height: 100vh;
    width: 100%;
    position: absolute;
    z-index: -1
}

#home-text {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%)
}

#video-text {
    position: absolute;
    left: 37%;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%)
}

#home-text img {
    height: 100vh
}

.playBox {
    left: 36%
}

#video-text img {
    height: auto;
    width: 50%
}


*/
/*New style for slider*/
.swiper {
    width: 100%;
    height: 100%;
}

section.home-slider, .home-slider .homeSwiper {
    width: 100%;
    position: relative;
    height: 92vh;
}

video.home-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 92vh;
    object-fit: cover;
    z-index: -1;
}

.slide-content {
    font-weight: 700;
    width: 100%;
    max-width: 2000px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    justify-content: center;
    padding: 20px 0;
    position: relative;
    z-index: 1;
}

.slide-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.slide-title h1 {
    color: #fff;
    font-weight: 700;
    font-size: 38px;
}
.slide-title p {
    color: #a48332;
    font-size: 28px;
    margin: 0;
}

.homebtn {
    width: 175px;
    padding: 12px 0;
    font-size: 18px;
    font-weight: bold;
    border: none;
    color: white;
    text-align: center;
    white-space: nowrap;
    margin: 0 20px;
    transition: .5s;
    background-size: 200% auto;
}

.slide-title {
    margin-right: 20px;
    text-align: right;
}

.home-slider .swiper-slide {
    background-size: cover;
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 30px 20px;
    flex-direction: column;
    background-position: center;
}

.home-slider .swiper-slide::before, .home-slider .swiper-slide-video:before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top, rgb(3 3 3 / 100%) 1%, rgba(255, 255, 255, .13) 65%, rgba(255, 255, 255, .04) 80%);
    height: 100%;
}

.first-btn {
    background-image: linear-gradient(to right, #003973 0, #eba908 51%, #003973 100%);
}


.second-btn {
    background-image: linear-gradient(to right, #003973 0, #a8d3f5 51%, #003973 100%);
}


.homebtn:hover {
    background-position: right center;
    color: #fff;
    text-decoration: none;
}

.swiper-slide-video {
    position: absolute;
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
}


.swiper-pagination-bullet {
    width: 60px;
    background: #9c9ca4;
    opacity: 1;
    border-radius: 0;
    height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 6px));
}

.swiper-pagination-bullet-active {
    background: #a48332;
}

.swiper-pagination-bullet:hover {
    background: #a48332;
    transition: 1s;
    transition: transform 1s;
}

.slide-border {
    border: 2px solid rgb(249, 248, 248);
}

.swiper-slide .slide-buttons button {
    opacity: 0;
    transform: translateX(100px); /* or 100px for button */
    transition: 1s;
}

.swiper-slide-active .slide-buttons button {
    opacity: 1;
    transform: translateX(0);
}

.swiper-slide .slide-border {
    opacity: 0;
    transition: transform 0.8s ease, opacity 0.8s ease;
    transition-delay: 0.5s;
}

.swiper-slide-active .slide-border {
    opacity: 1;
}

.swiper-slide .slide-title {
    opacity: 0;
    transform: translateX(-100px); /* or 100px for button */
    transition: transform 0.8s ease, opacity 0.8s ease;
    transition-delay: 0.5s;
}

.swiper-slide-active .slide-title {
    opacity: 1;
    transform: translateX(0);
}
:root {
    --swiper-navigation-size: 30px;
}


.swiper-button-next, .swiper-button-prev {
    color: gray;
}
.swiper.clinetsSwiper {
    padding: 0 30px;
}


@media (max-width: 992px) {
    .slide-title h1 {
        font-size: 20px;
    }

    .slide-title p {
        font-size: 15px;
    }

    .homebtn {
        font-size: 12px;
        margin: 10px 20px;
    }

    .swiper-pagination-bullet {
        width: 40px;
    }
}



@media (max-width: 768px) {
    section.home-slider, .home-slider .homeSwiper , video.home-video {
        height: 50vh;
    }
}


@media (max-width: 600px) {
      .slide-buttons {
        flex-direction: column;
        align-items: center;
    }
    .homebtn {
        width: 130px;
    }
}


/*New Style for Home Page*/

.media-item {
    background-color: #8ea9ba78;
    padding: 30px;
    text-align: center;
    position: relative;
    display:block;
}

.media-icon-item {
    width: 100px;
    height: 100px;
    margin: 0 auto 15px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    position:relative;
    z-index:1;
}

.media-blocks-section {
    background-image: url(../images/bg-3.jpg);
    padding: 60px 0;
}

.media-item:after {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    background: #ffb6046e;
    transition: .35s;
}


.arrow-icon {
    width: 25px;
    height: 20px;
    background-image: url('/images/Arrow.svg');
    background-size: contain;
    background-repeat: no-repeat;
    margin-top: 10px;
    margin-left: auto;
    transition: transform 1s;
    transform: translateX(0);
    position: relative;
    z-index: 1;
}

.media-item:hover .arrow-icon {
    transform: translateX(-10px);
}

.media-item:after {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    background: #ffb6046e;
    transition: 1s;
}

.media-item:hover:after {
    height: 100%;
}


.links-section {
    background-image: url("../images/bg1.jpg");
    padding: 60px 0;
}


.icon-box {
    width: 100px;
    height: 100px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 1s;
    transform: translateX(0);
}

.link-item {
    display: flex;
    align-items: center;
    justify-content: center;
}

.link-content {
    text-align: left;
    margin-left: 20px;
}

    .link-content p {
        font-size: 30px;
        margin-bottom: 10px;
        color: white;
        font-weight: bold;
        transition: 1s;
    }

    .link-content span {
        font-weight: 700;
        font-size: 18px;
        color: white;
        position: relative;
    }


.link-item:hover .link-content p {
    color: rgb(233, 165, 0);
}

.link-item:hover .link-content span:before {
    content: "\f061";
    font-family: FontAwesome;
    font-size: 15px;
    position: absolute;
    align-items: center;
    right: -30px;
    top: 0;
    height: 100%;
    opacity: 1;
    animation: 1s learnMoreFade
}

@keyframes learnMoreFade {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}


.link-item:hover .icon-box {
    transform: translateX(-10px);
}


@media (max-width:1280px) {
    .link-content p {
        font-size: 25px
    }
}

@media (max-width:1140px) {
    .link-content p {
        font-size: 20px
    }
}


@media (max-width:991px) {
    .link-content p {
        font-size: 17px;
    }

    .link-content span {
        font-size: 15px;
    }
}


/*New Style for News*/

.newsImageSwiper .swiper-slide {
    padding-bottom: 50%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.newsImageSwiper {
    margin-bottom: 50px;
}


#gotoTop {
    z-index: 299;
    position: fixed;
    width: 40px;
    height: 40px;
    background-color: #333;
    background-color: rgb(190 141 16 / 71%);
    font-size: 20px;
    line-height: 36px;
    top: auto;
    left: auto;
    right: 30px;
    bottom: 30px;
    cursor: pointer;
    border-radius: 2px;
    transition: background-color .2s linear;
    -webkit-transition: background-color .2s linear;
    -o-transition: background-color .2s linear;
    text-align: center;
    color: #fff;
}

    #gotoTop:hover {
        background-color: #1f5584
    }

.icon-angle-up:before {
    content: "\f077";
    font-family: FontAwesome;
    display: inline-block;
    margin-left: calc(var(--icon-space) * -1);
    width: var(--icon-space)
}

@media (max-width:508px) {
    .navbar {
        height: 36px;
    }

    .top-menue {
        padding-left: 0;
    }

    .navbar-brand {
        margin-right: 0 !important
    }

    .home-abstract, a.navbar-brand {
        font-size: 12px !important
    }
        a.navbar-brand.ar-language {
            padding: 6px 19px;
        }
    .footer-section-desc p {
        font-size: 19px
    }

    ul.footer-desc-list a {
        font-size: 15px
    }

    .bottom-footer-section {
        font-size: 14px
    }

    .CPISP-btn-secondBox {
        margin: 11px
    }

    .home-ttl {
        font-size: 14px !important
    }

    .home-page-data {
        top: 60% !important
    }
/*
    .links-blocks {
        width: 80% !important
    }*/


    .v-box-content {
        padding: 9px !important;
        border-width: 4px
    }

    .video-disc-box-ttl p {
        font-size: 13px !important;
        margin-bottom: 0
    }


    #primary-menu-trigger-topSearch, mobile-menu-trigger {
        top: 20px !important
    }
}

@media (max-width:570px) {
    a.standard-logo {
        margin: auto;
        width: 70%;
        display: block
    }

    #primary-menu-trigger-topSearch, mobile-menu-trigger {
        top: 35px
    }

    .home-page-data {
        left: 0 !important;
    }
}

@media (max-width:1570px) {
    .history-title {
        width: 50%;
    }
}

@media (max-width:991px) {
    .video-play-box {
        height: 300px;
    }
}

@media (max-width:1280px) {
    .home-ttl {
        font-size: 30px;
    }

    .home-abstract {
        font-size: 18px;
    }

    .CPISP-btn-firstBox, .CPISP-btn-secondBox {
        font-size: 15px;
        width: 140px;
        height: 40px;
    }

    .links-content, .video-disc-box-ttl p {
        font-size: 25px
    }

    .history-btns button, .learnMore {
        font-size: 15px
    }

    .history-body p {
        font-size: 20px
    }

    .history-title h2 {
        font-size: 45px
    }

}

@media (max-width:1140px) {
    .links-content {
        font-size: 20px;
    }

    .history-title h2 {
        font-size: 42px;
    }
}

@media (max-width:991px) {
   /* .links-section {
        height: auto
    }*/

    .cpisb-container {
        padding: 0 15px;
    }

    .home-ttl {
        font-size: 20px
    }

    .home-abstract {
        font-size: 15px
    }

    .CPISP-btn-firstBox, .CPISP-btn-secondBox {
        font-size: 12px
    }

    .links-content {
        font-size: 17px;
        line-height: 1.5rem
    }

    .learnMore {
        font-size: 13px
    }

    .history-title {
        width: 100%;
        animation-timeline: unset;
        top: 0;
        right: 0
    }

        .history-title h2 {
            text-align: center;
            font-size: 35px
        }

    .links-box-content {
        padding: 0 0 0 10px
    }

    .v-box-content {
        padding: 15px
    }

    .video-disc-box-ttl p {
        font-size: 20px;
        margin-bottom: 0
    }

    .disc-box-ttl {
        font-size: 16px !important
    }

    a.disc-box {
        margin-right: 0
    }

    .home-page-data {
        top: 86%;
        left: 10%
    }

    .CPISP-btn-firstBox, .CPISP-btn-secondBox {
        width: 120px
    }
}
@media (max-width:991px) {
    .video-section {
        height: 300px;
    }
}

@media (max-width:1190px) {
    .blue-title h2 {
        font-size: 45px
    }

    .history-content p {
        font-size: 19px;
        text-align: center
    }

    .history-btns button {
        display: inline-block
    }
}

@media (max-width:1602px) {
    .disc-box-ttl {
        font-size: 18px
    }
}

@media (max-width:1430px) {
    .disc-box-ttl {
        font-size: 20px
    }

    .video-disc-box b {
        font-size: 26px
    }
}

@media (max-width:1200px) {
    .media-blocks {
        width: 100%
    }
}

@media (max-width:769px) {
    .history-body, .history-content {
        padding: 0
    }

    a.navbar-brand.ar-language {
        padding-left: 15px;
        padding-right: 15px
    }

    a.disc-box {
        margin-right: 0;
        margin-bottom: 30px;
        height: 87%
    }

    .box-image img, .box-image-newsImage img, .links-content img {
        width: 40%
    }

/*    .links-blocks {
        margin: auto;
        width: 70%;
        display: block
    }*/

    /*.links-box {
        padding-bottom: 15px;
        justify-content: flex-start;
        align-items: center
    }
*/
    .buttonBoxex {
        display: block;
        margin-left: 0
    }

    .video-disc-box-ttl p {
        font-size: 16px
    }

    .video-play-box img {
        height: 40%
    }

    .home-page-data {
        top: 82%
    }

    .media-blocks-section {
        height: auto
    }

    .home-slider-item::after {
        background: linear-gradient(to top,rgb(3 3 3 / 100%)3%,rgba(255,255,255,.13) 50%,rgba(255,255,255,.04) 80%)
    }
}

@media (max-width:400px) {
    .video-play-box img {
        height: 35% !important;
        margin-top: 20% !important
    }

    .video-disc-box-ttl p {
        font-size: 11px !important
    }
}

.banner {
    position: relative;
    height: 300px
}

.banner-bg {
    width: 100%;
    height: 100%;
    background: url('your-image.jpg') center/cover no-repeat;
    position: relative;
    box-shadow: 0 0 20px rgba(0,0,0,.8) inset
}

.banner-content {
    position: absolute;
    bottom: 20px;
    left: 20px;
    color: #000
}

    .banner-content h1, .banner-content p {
        margin: 0
    }

    .banner-content h1 {
        font-size: 2.5em
    }

    .banner-content p {
        font-size: 1.2em
    }

@media (max-width:368px) {
/*    a.navbar-brand.ar-language {
        padding: 15px 25px;
        margin-left: 5px
    }*/

    a.navbar-brand.onapptap, a.navbar-brand.resourcetap {
        padding-left: 5px;
    }
}


@media (max-width:1623px) {
    #logo img {
        width: 330px !important;
        height: auto !important;
        padding: 5px 0
    }

    #logo {
        padding-right: 10px;
        margin-right: 0;
        margin-top: 10px
    }

    #primary-menu ul > li > .subNodesLink, #primary-menu ul > li > a > .mega-menu-title {
        font-size: 16px;
        padding: 30px 5px
    }
}

.owl-carousel {
    display: block;
}

    .owl-carousel .slide-owl-wrap:not(:first-child) {
        display: none;
    }

    .owl-carousel img {
        width: 100%;
    }

    .owl-carousel video {
        width: 100%;
    }

.PopupAnnouncement .modal-header {
    background-color: #06466c;
    color: white;
}

.PopupAnnouncement .close {
    color: white
}

.PopupAnnouncement p {
    font-weight: 600;
    font-size: 18px;
}

.PopupAnnouncement .modal-body {
    padding: 25px;
}

.AnnouncementButton {
    padding: 10px 30px;
    text-align: center;
    transition: .5s;
    background-size: 200% auto;
    color: #fff;
    display: block;
    border: none;
    font-size: 18px;
    background-image: linear-gradient(to right, #003973 0, #eba908 51%, #003973 100%);
}

    .AnnouncementButton:hover {
        background-position: right center;
        color: #fff;
        text-decoration: none
    }

.PopupAnnouncementModal {
    top: 30% !important;
}

@media (max-width:991px) {
    .AnnouncementButton {
        font-size: 15px;
    }
}

.modal-title {
    font-size: 1.25rem;
}
.top-menue {
    padding-right: 15px !important;
}


/*Aos Annimation*/


.aos-animate[data-aos] {
    transition-delay: .2s
}

[data-aos='fade-start'] {
    transform: translateX(-150px);
    transition: 1s;
    opacity: 0;
    filter: blur(0);
}

[data-aos='fade-end'] {
    transform: translateX(150px);
    transition: 1s;
    opacity: 0;
    filter: blur(5px);
}

[data-aos*="fade-up"] {
    transform: translateY(150px);
    transition: 1s;
    opacity: 0;
    filter: blur(5px);
}

[data-aos='fade-in'] {
    transition: 1s;
    opacity: 0;
    filter: blur(5px);
}

[data-aos='zoom-in'] {
    transform: scale(.6);
    transition: 1s;
    opacity: 0;
    filter: blur(5px);
}

[data-aos='flip-left'] {
    transition: 2s;
    opacity: 0;
    transform: perspective(2500px) rotateY(-100deg);
}


.aos-animate[data-aos*='fade'] {
    transform: inherit;
    opacity: 1;
    filter: blur(0);
}

.aos-animate[data-aos*='zoom'] {
    transform: inherit;
    opacity: 1;
    filter: blur(0);
}

.aos-animate[data-aos*='flip-left'] {
    transform: inherit;
    opacity: 1;
    backface-visibility: hidden;
    transition-property: transform;
    transform: perspective(2500px) rotateY(0);
}

.aos-animate[data-aos]:nth-child(2), .fadeInBottom:nth-child(2) {
    transition-delay: 500ms;
}

.aos-animate[data-aos]:nth-child(3), .fadeInBottom:nth-child(3) {
    transition-delay: 700ms;
}

.aos-animate[data-aos]:nth-child(4), .fadeInBottom:nth-child(4) {
    transition-delay: 800ms;
}

.aos-animate[data-aos]:nth-child(5), .fadeInBottom:nth-child(5) {
    transition-delay: 1000ms;
}

.aos-animate[data-aos]:nth-child(6), .fadeInBottom:nth-child(6) {
    transition-delay: 1200ms;
}

.aos-animate[data-aos]:nth-child(7) {
    transition-delay: 1400ms;
}

.aos-animate[data-aos]:nth-child(8) {
    transition-delay: 1600ms;
}

.aos-animate[data-aos]:nth-child(9) {
    transition-delay: 1800ms;
}

.aos-animate[data-aos]:nth-child(10) {
    transition-delay: 2000ms;
}

.aos-animate[data-aos]:nth-child(11) {
    transition-delay: 2200ms;
}

.aos-animate[data-aos]:nth-child(11) {
    transition-delay: 2400ms;
}