@font-face {
    src: url(../fonts/Cairo-Black.ttf);
    src: url(../fonts/Cairo-Bold.ttf);
    src: url(../fonts/Cairo-Regular.ttf);
    src: url(../fonts/Cairo-Light.ttf);
    font-family: cairo;
}

* {
    padding: 0;
    margin: 0;
    font-family: 'cairo', sans-serif;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
}

.rtl .list-lang li:first-of-type {
    display: none
}

.NoRTL .list-lang li:last-of-type {
    display: none
}
/* common classes*/
.sectionTitle {
    text-align: center;
    padding-bottom: 30px;
}

    .sectionTitle h2 {
        font-size: 32px;
        font-weight: bold;
        text-transform: uppercase;
        margin-bottom: 20px;
        padding-bottom: 20px;
        position: relative;
        color: #191b64;
    }

        .sectionTitle h2::before {
            content: '';
            position: absolute;
            display: block;
            width: 120px;
            height: 1px;
            background: #DCD9D9;
            bottom: 1px;
            left: calc(50% - 60px);
        }

        .sectionTitle h2::after {
            content: '';
            position: absolute;
            display: block;
            width: 40px;
            height: 3px;
            background: #694dfd;
            bottom: 0;
            left: calc(50% - 20px);
        }

/*active li at navbar*/
.navActive {
    color: #694dfd !important;
    border-bottom: 2px solid #694dfd;
}

/* buttons */
.customBtn {
    border-color: #694dfd;
    background-color: #694dfd;
    color: #fff;
    font-weight: bold;
    letter-spacing: 1px;
}

    .customBtn:hover {
        background-color: #fff;
        color: #694dfd;
        border: 1px solid #694dfd !important;
        transition: all 0.5s ease-in-out;
    }

.altBtn {
    border-color: #191b64;
    background-color: #fff;
    color: #191b64;
    font-weight: bold;
    letter-spacing: 1px;
}

    .altBtn:hover {
        background-color: #191b64;
        color: #fff;
        transition: all 0.5s ease-in-out;
    }

.coloredBtn {
    border-color: #fff;
    color: #fff;
    font-weight: bold;
    letter-spacing: 1px;
}

    .coloredBtn:hover {
        background-color: #fff;
        color: #694dfd;
        transition: all 0.5s ease-in-out;
    }

.whiteBtn {
    border-color: #694dfd;
    background-color: #fff;
    color: #694dfd;
    font-weight: bold;
    letter-spacing: 1px;
}

    .whiteBtn:hover {
        background-color: #694dfd;
        color: #fff;
        transition: all 0.5s ease-in-out;
    }

@media (min-width: 992px) and (max-width: 1200px) {
    .customBtn, .altBtn, .coloredBtn, .whiteBtn {
        font-size: 0.8rem;
    }
}
/*box shadoow */
/* Sweep To Top */
.hvr-sweep-to-top {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
}

    .hvr-sweep-to-top::after {
        content: "";
        position: absolute;
        z-index: -1;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #694dfd;
        -webkit-transform: scaleY(0);
        transform: scaleY(0);
        -webkit-transform-origin: 50% 100%;
        transform-origin: 50% 100%;
        -webkit-transition-property: transform;
        transition-property: transform;
        -webkit-transition-duration: 0.5s;
        transition-duration: 0.5s;
        -webkit-transition-timing-function: ease-out;
        transition-timing-function: ease-out;
    }

    .hvr-sweep-to-top:hover, .hvr-sweep-to-top:focus, .hvr-sweep-to-top:active {
        color: white;
    }

        .hvr-sweep-to-top:hover:after, .hvr-sweep-to-top:focus:after, .hvr-sweep-to-top:active:after {
            -webkit-transform: scaleY(1);
            transform: scaleY(1);
        }

/*footer*/
.foot {
    background: url(../img/footer-bg-3.png) no-repeat scroll center bottom transparent;
    background-size: cover;
}

    .foot h4 {
        color: #191b64;
        font-size: 1.5rem;
        letter-spacing: 2px;
        font-weight: bold;
    }

    .foot a {
        text-decoration: none;
        color: #191b64;
        transition: all 0.5s ease;
    }

        .foot a:hover {
            color: #694dfd;
            text-decoration: underline;
        }

    .foot .fab {
        font-size: 1.5rem;
        color: #000;
        transition: all 0.5s ease-in-out;
    }

        .foot .fab:hover {
            cursor: pointer;
        }

    .foot .fa-facebook-f:hover {
        color: #1877f2;
    }

    .foot .fa-twitter:hover {
        color: #1da1f2;
    }

    .foot .fa-instagram:hover {
        color: #e1306c;
    }

    .foot .fa-linkedin-in:hover {
        color: #0077b5;
    }

    .foot .footInfo a:hover {
        text-decoration: none;
    }

    .foot .footInfo h1 {
        font-size: 2rem;
    }

    .foot .footInfo .fa-google-play {
        font-size: 0.8rem;
        color: #191b64;
    }

/*style of main panner at all syb pages*/
.heroBg .featBg {
    background-image: url("../img/feat-bg.jpg");
    background-size: cover;
    height: 45vh;
    width: 100vw;
    background-position: center;
    position: relative;
}

.contact-banner {
    background-image: url('../img/Banners/new-contact-panner-1.jpg') !important;
    background-position: bottom !important
}

.faq-banner {
    background-image: url('../img/Banners/new-faq-panner-1.jpg') !important;
    background-position: bottom !important
}

.blog-banner {
    background-image: url('../img/Banners/new-blog-panner.jpg') !important;
    background-position: center !important
}

.modules-banner {
    background-image: url('../img/Banners/new-module-panner.jpg') !important;
    background-position: center !important
}

.modulesDetails-banner {
    background-image: url('../img/Banners/new-module-panner-1.jpg') !important;
    background-position: center !important
}

.features-banner {
    background-image: url('../img/Banners/new-module-panner-1.jpg') !important;
    background-position: center !important
}

.terms-banner {
    background-image: url('../img/Banners/new-blog-panner.jpg') !important;
    background-position: center !important
}

.featDeatils-banner {
    background-image: url('../img/Banners/new-module-details-panner.jpg') !important;
    background-position: center !important
}

.heroBg .featBg::before {
    content: '';
    top: 0;
    left: 0;
    position: absolute;
    background-color: #00000066;
    width: 100%;
    height: 100%;
}

.heroBg .featBg .card-title {
    position: relative;
    z-index: 50;
}

.heroBg .featBg .breadText a {
    color: #191b64;
    font-weight: bold;
    letter-spacing: 2px;
}

.heroBg .featBg .card-img {
    height: 60vh;
}

.heroBg .featBg .contactText {
    color: #fff;
    font-weight: 900;
    letter-spacing: 2px;
}

/*hero section*/
.home.heroBg {
    height: 90vh
}

.heroBg {
    overflow: hidden;
}

    .heroBg h1 {
        color: #191b64 !important;
        font-weight: bold;
    }

    .heroBg p {
        color: #191b64;
        letter-spacing: 1px;
        font-size: 1rem;
    }

    .heroBg .heroImg {
        position: relative;
    }

        .heroBg .heroImg .heroImgCustom {
            position: absolute;
            right: -395px;
            z-index: -1;
            top: -175px;
            overflow: hidden;
        }

        .heroBg .heroImg .rotate-ar img {
            animation: float-bob-y infinite 7s linear;
        }

    .heroBg .container .fa-check {
        font-size: 1rem;
        color: #694dfd;
    }

    .heroBg .container span {
        color: #191b64;
        font-size: 1rem;
    }

/*start partner*/
.partner img {
    transition: all 0.5s ease-in-out;
    width: 75%;
}

    .partner img:hover {
        transform: scale(1.2);
    }

/*about us*/
.about {
    background-color: #eeeeee73;
    overflow: hidden;
    padding: 60px 0
}

    .about h1 {
        color: #191b64;
        font-size: 2.4rem;
        font-weight: 700;
    }

    .about p {
        color: #191b64;
        font-size: 1rem;
        padding: 0 !important;
    }

    .about .about-link {
        text-decoration: none;
        color: #191b64;
        font-size: 1.3rem;
    }

        .about .about-link:hover {
            cursor: pointer;
            color: #694dfd;
            text-decoration: underline;
        }

    .about h4 {
        color: #191b64;
        font-size: 1.5rem;
    }

/*feat*/
.feat {
    position: relative;
    padding: 100px 0 60px
}

    .feat p {
        font-size: 1rem;
    }

    .feat .row-cols-1 > div:first-of-type {
        margin-top: -25px
    }

    .feat .row-cols-1 > div:last-of-type {
        margin-top: 25px;
    }

    .feat h3 {
        color: #694dfd;
    }

    .feat h2 {
        color: #191b64;
        font-weight: 700;
        font-size: 3.3rem;
    }

    .feat .card {
        border: none;
        box-shadow: 0px 5px 40px 0px rgba(145, 64, 64, 0.09);
        -webkit-box-shadow: 0px 5px 40px 0px rgba(145, 64, 64, 0.09);
        -moz-box-shadow: 0px 5px 40px 0px rgba(145, 64, 64, 0.09);
    }

        .feat .card img {
            width: 83px;
            height: 65px;
            /*margin-left: calc((100% - 83px) / 2);*/
            margin: auto;
        }

        .feat .card .card-title {
            font-weight: 700;
            font-size: 1.3rem;
            color: #191b64;
        }

        .feat .card a {
            position: relative;
            border: none;
        }

            .feat .card a span {
                position: absolute;
                width: 25px;
                height: 2px;
                background-color: #694dfd;
                right: -20px;
                bottom: 15px;
            }

            .feat .card a:hover {
                background-color: #fff;
                color: #694dfd;
            }

                .feat .card a:hover span {
                    transform: translate(10px);
                    transition: all 0.5s ease-in-out;
                }

        .feat .card:hover {
            cursor: pointer;
        }

            .feat .card:hover .card-title {
                color: #694dfd;
                transition: all 1s ease-in-out;
            }

/*request demo*/
.demo {
    background-image: url(../img/demo-1.png), url(../img/demo-2.png);
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 5
}

    .demo p {
        color: #fff;
        font-size: 2rem;
    }

    .demo a {
        border: none;
    }

/*Customizations & Analysis*/
.analysis {
    overflow: hidden;
    padding: 60px 0;
    background-color: #eeeeee73;
}

    .analysis h5 {
        color: #694dfd;
    }

    .analysis h2 {
        color: #191b64;
        font-size: 3rem;
        font-weight: bold;
    }

    .analysis .fa-check-circle {
        color: #694dfd;
        font-size: 1.3rem;
    }

    .analysis h4 {
        color: #191b64;
        font-size: 1.5rem;
    }

    .analysis a i {
        font-size: 0.8rem;
    }

/*blog*/
.blog h6 {
    color: #694dfd;
}

.blog h1 {
    color: #191b64;
    font-size: 3rem;
    font-weight: bold;
}

.blog .card {
    border: none;
}

    .blog .card img {
        border-radius: 12px;
    }

        .blog .card img:hover {
            filter: brightness(0.7);
            cursor: pointer;
            transition: all 1s ease-in-out;
        }

    .blog .card .card-body {
        padding: 1.25rem 0;
    }

        .blog .card .card-body i {
            color: #694dfd;
        }

        .blog .card .card-body span {
            color: #191b64;
        }

    .blog .card .card-title {
        color: #191b64;
        font-size: 1.5rem;
        font-weight: bold;
    }

        .blog .card .card-title:hover {
            color: #694dfd;
            cursor: pointer;
            transition: all 0.5s ease-in-out;
        }

    .blog .card a .card-text {
        color: #694dfd;
        font-weight: bold;
        letter-spacing: 1px;
    }

    .blog .card a:hover {
        text-decoration: none;
    }

/*modules*/
.modules {
    padding: 60px 0
}

    .modules .cardSpcial {
        border: none;
    }

        .modules .cardSpcial h6 {
            color: #694dfd;
        }

        .modules .cardSpcial h3 {
            color: #191b64;
            font-weight: bold;
            font-size: 2.6rem;
        }

    .modules .cardPrimary {
        box-shadow: 0px 5px 40px 0px rgba(145, 64, 64, 0.09);
        -webkit-box-shadow: 0px 5px 40px 0px rgba(145, 64, 64, 0.09);
        -moz-box-shadow: 0px 5px 40px 0px rgba(145, 64, 64, 0.09);
        border-radius: 8px;
        border: none;
    }

        .modules .cardPrimary i {
            color: #694dfd;
        }

        .modules .cardPrimary .card-title {
            color: #191b64;
            font-size: 1.3rem;
            font-weight: bold;
            letter-spacing: 1px;
        }

        .modules .cardPrimary .card-text {
            font-size: 0.9rem;
            color: #694dfd;
        }

            .modules .cardPrimary .card-text i {
                font-size: 0.7rem;
            }

        .modules .cardPrimary:hover h6, .modules .cardPrimary:hover h3, .modules .cardPrimary:hover i, .modules .cardPrimary:hover .card-title, .modules .cardPrimary:hover .card-text, .modules .cardPrimary:hover p {
            color: #fff !important;
        }

/*Start Mobile*/
.mobile-sec {
    padding: 60px 0 0;
}

    .mobile-sec .sec-top h2 {
        font-size: 40px;
        font-weight: bold;
        color: #191b64;
    }

    .mobile-sec .sec-top p {
        color: #694dfd;
    }

    .mobile-sec .sec-bottom {
        background-color: #e6eff8;
        padding-bottom: 60px;
    }

        .mobile-sec .sec-bottom .shape {
            fill: #fff;
            -webkit-transform-origin: center;
            -ms-transform-origin: center;
            transform-origin: center;
            -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
        }

        .mobile-sec .sec-bottom .mobile-mockup::after {
            border: 50px solid #fff;
            content: "";
            opacity: 1;
            margin: auto;
            position: absolute;
            -webkit-border-radius: 50%;
            border-radius: 50%;
            -webkit-box-sizing: content-box;
            box-sizing: content-box;
            -webkit-animation: pulsate1 2s;
            animation: pulsate1 2s;
            -webkit-animation-delay: 0s;
            animation-delay: 0s;
            -webkit-animation-direction: forwards;
            animation-direction: forwards;
            -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
            -webkit-animation-timing-function: steps;
            animation-timing-function: steps;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 400px;
            padding-top: 400px;
        }

        .mobile-sec .sec-bottom .mobile-mockup .image {
            margin-top: -100px;
            position: relative;
        }

            .mobile-sec .sec-bottom .mobile-mockup .image::before {
                background-image: url(../img/app-screen5.jpg);
                background-repeat: no-repeat;
                background-position: bottom center;
                background-size: contain;
                content: "";
                height: auto;
                margin: 0 -22px;
                position: absolute;
                bottom: 92px;
                left: 0;
                right: 0;
                /* top: 0; */
                width: auto;
                z-index: 6;
                height: 525px;
            }

            .mobile-sec .sec-bottom .mobile-mockup .image::after {
                content: "";
                position: absolute;
                left: 50%;
                top: 50%;
                z-index: 1;
                -webkit-border-radius: 50%;
                border-radius: 50%;
                height: auto;
                padding-top: 400px;
                width: 400px;
                -webkit-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
                box-shadow: rgb(255, 255, 255) 0px 0px 0px 100px inset, rgba(255, 255, 255, 0.3) 0px 0px 0px 50px, rgba(255, 255, 255, 0.2) 0px 0px 0px 120px;
            }

            .mobile-sec .sec-bottom .mobile-mockup .image img {
                height: 710px;
                width: auto !important;
                z-index: 5;
            }

        .mobile-sec .sec-bottom .mobileFeat-item {
            margin-left: -10px;
            margin-right: -10px;
            padding: 7px;
            position: relative;
            z-index: 2;
            -webkit-border-radius: 90px;
            border-radius: 90px;
            -webkit-transition: all 0.35s ease 0s;
            transition: all 0.35s ease 0s;
        }

            .mobile-sec .sec-bottom .mobileFeat-item:not(:last-of-type) {
                margin-bottom: 50px;
            }

            .mobile-sec .sec-bottom .mobileFeat-item::before {
                content: "";
                height: auto;
                margin: 0;
                opacity: 0;
                position: absolute;
                bottom: 0;
                top: 0;
                left: 0;
                width: 80px;
                -webkit-border-radius: inherit;
                border-radius: inherit;
                -webkit-transition: inherit;
                transition: inherit;
                background-color: #fff;
            }

            .mobile-sec .sec-bottom .mobileFeat-item.right-side::before {
                right: 0;
                left: auto;
            }

            .mobile-sec .sec-bottom .mobileFeat-item:hover::before {
                opacity: 1;
                width: calc(100% + 10px);
            }

            .mobile-sec .sec-bottom .mobileFeat-item .icon {
                width: 80px;
                height: 80px;
                text-align: center;
                background: #fff;
                border-radius: 50%;
                line-height: 80px;
                /* margin: 0 22px 0 0; */
            }

                .mobile-sec .sec-bottom .mobileFeat-item .icon::after {
                    content: "";
                    height: auto;
                    margin: 0;
                    background-color: #694dfd;
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    top: 0;
                    width: auto;
                    z-index: 0;
                    -webkit-border-radius: 90px;
                    border-radius: 90px;
                    -webkit-transform: scale(0);
                    transform: scale(0);
                    -webkit-transition: all 0.3s ease 0s;
                    transition: all 0.3s ease 0s;
                }

            .mobile-sec .sec-bottom .mobileFeat-item:hover .icon::after {
                -webkit-transform: scale(1);
                transform: scale(1);
            }

            .mobile-sec .sec-bottom .mobileFeat-item .icon img {
                height: 35px;
                z-index: 2;
            }

            .mobile-sec .sec-bottom .mobileFeat-item:hover .icon img {
                filter: brightness(0) invert(1);
            }

            .mobile-sec .sec-bottom .mobileFeat-item .title h3 {
                font-size: 20px;
                transition: all .3s ease 0s;
            }

            .mobile-sec .sec-bottom .mobileFeat-item:hover .title h3 {
                color: #694dfd;
            }

@-webkit-keyframes pulsate1 {
    0% {
        opacity: 1;
        box-shadow: inset 0 0 50px 3px rgba(255, 255, 255, 0.75), 0 0 50px 10px rgba(24, 13, 13, 0.75);
    }

    100% {
        opacity: 0;
        padding-top: 700px;
        width: 700px;
        box-shadow: none;
    }
}

@keyframes pulsate1 {
    0% {
        opacity: 1;
        box-shadow: inset 0 0 50px 3px rgba(255, 255, 255, 0.75), 0 0 50px 10px rgba(255, 255, 255, 0.75);
    }

    100% {
        opacity: 0;
        padding-top: 700px;
        width: 700px;
        box-shadow: none;
    }
}
/*********testimonials page********/
.testimonials .cardSpcial {
    border: none;
}

    .testimonials .cardSpcial h6 {
        color: #694dfd;
    }

    .testimonials .cardSpcial h3 {
        color: #191b64;
        font-weight: bold;
        font-size: 2.6rem;
    }

.testimonials .owl-theme .owl-dots .owl-dot {
    width: 15px;
    height: 15px;
    border: 1px solid #694dfd;
    border-radius: 50%;
    margin: 30px 6px 0;
}

    .testimonials .owl-theme .owl-dots .owl-dot span {
        margin: auto !important;
        height: 10px;
        width: 10px;
        background: transparent
    }

    .testimonials .owl-theme .owl-dots .owl-dot.active span {
        background-color: #694dfd;
        /*border: 1px solid #694dfd;
    padding: 3px;*/
    }

.testimonials .cardPrimary {
    background-color: #f7f7ff;
    border: 1px solid rgba(91, 99, 251, 0.15);
    border-radius: 10px;
    padding: 15px;
}

    .testimonials .cardPrimary svg {
        color: #616161;
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5;
        text-align: left;
        font-family: Inter,sans-serif;
        width: 64;
        height: 43;
        box-sizing: border-box;
        outline-color: #5C63FB;
        overflow: hidden;
        vertical-align: middle;
        margin-right: 30px;
        fill: #E6E7FE;
        flex-shrink: 0;
    }

    .testimonials .cardPrimary .card-body img {
        width: auto;
        max-height: 60px;
    }

    .testimonials .cardPrimary .card-body p {
        color: #191b64;
    }

    .testimonials .cardPrimary .card-body h5 {
        color: #191b64;
        font-weight: bold;
        font-size: 0.9rem;
        margin-bottom: 3px;
    }

    .testimonials .cardPrimary .card-body small {
        font-size: 0.7rem;
    }

/*********Request demo Page ********/
/*img*/
.left .leftImg h1 {
    font-size: 2.8rem;
    font-weight: bold;
    color: #191b64 !important;
}

.left .leftImg p {
    font-size: 1.5rem;
    color: #191b64 !important;
}

.left .img-pos {
    margin-right: -40px;
}
/*right*/
.right h1 {
    color: #191b64 !important;
    font-size: 2.5rem;
    font-weight: bold;
}

.right .link {
    text-decoration: none;
    color: #191b64;
    font-size: 0.9rem;
}

.right .customBtn {
    background-color: #fff;
    color: #694dfd;
    width: 125px;
}

.right form ::placeholder {
    color: #b3b3b3;
}

.right form .customBtn {
    background-color: #694dfd;
    color: #fff;
}

.right form .form-control {
    color: #b3b3b3;
    font-size: 1.2rem;
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 0;
}

    .right form .form-control:focus {
        box-shadow: none;
    }

.right form a {
    text-decoration: underline;
    color: #191b64;
}

/*********modules Page ********/
/*modules*/
.modules .cardPrimary {
    box-shadow: 0px 5px 40px 0px rgba(145, 64, 64, 0.09);
    -webkit-box-shadow: 0px 5px 40px 0px rgba(145, 64, 64, 0.09);
    -moz-box-shadow: 0px 5px 40px 0px rgba(145, 64, 64, 0.09);
    border-radius: 8px;
    border: none;
}

    .modules .cardPrimary i {
        color: #694dfd;
    }

    .modules .cardPrimary .card-title {
        color: #191b64;
        font-size: 1.3rem;
        font-weight: bold;
        letter-spacing: 1px;
    }

    .modules .cardPrimary .card-text {
        font-size: 0.9rem;
        color: #694dfd;
    }

        .modules .cardPrimary .card-text i {
            font-size: 0.7rem;
        }

    .modules .cardPrimary:hover h6, .modules .cardPrimary:hover h3, .modules .cardPrimary:hover i, .modules .cardPrimary:hover .card-title, .modules .cardPrimary:hover .card-text, .modules .cardPrimary:hover p {
        color: #fff !important;
    }

/*********blog Page ********/
/*blog*/
.blog {
    padding: 60px 0 0 0;
    background-color: #eeeeee2e;
}

    .blog h6 {
        color: #694dfd;
    }

    .blog h1 {
        color: #191b64;
        font-size: 3rem;
        font-weight: bold;
    }

    .blog .card {
        border: none;
    }

        .blog .card img {
            border-radius: 12px;
        }

            .blog .card img:hover {
                filter: brightness(0.7);
                cursor: pointer;
                transition: all 1s ease-in-out;
            }

        .blog .card .card-body {
            padding: 1.25rem 0;
            background-color: #eeeeee2e;
        }

            .blog .card .card-body i {
                color: #694dfd;
            }

            .blog .card .card-body span {
                color: #191b64;
            }

            .blog .card .card-body .col-sm-6 {
                width: auto;
            }

        .blog .card .card-title {
            color: #191b64;
            font-size: 1.5rem;
            font-weight: bold;
        }

            .blog .card .card-title:hover {
                color: #694dfd;
                cursor: pointer;
                transition: all 0.5s ease-in-out;
            }

        .blog .card a .card-text {
            color: #694dfd;
            font-weight: bold;
            letter-spacing: 1px;
        }

        .blog .card a:hover {
            text-decoration: none;
        }

/*********blog details Page ********/
/*blog details*/
.blogDetail {
    padding: 60px 0 0 0;
}

    .blogDetail .card {
        border: none;
    }

        .blogDetail .card .owl-carousel .owl-nav .owl-prev {
            left: 30px;
        }

        .blogDetail .card .owl-carousel .owl-nav .owl-next {
            right: 30px;
        }

        .blogDetail .card .owl-carousel .owl-nav .owl-prev, .blogDetail .card .owl-carousel .owl-nav .owl-next {
            position: absolute;
            top: 50%;
            background-color: #694dfd;
            border-radius: 50%;
            width: 30px;
            height: 30px;
            color: #fff;
        }

            .blogDetail .card .owl-carousel .owl-nav .owl-prev span, .blogDetail .card .owl-carousel .owl-nav .owl-next span {
                font-size: 3rem;
                font-weight: bold;
                line-height: 16px;
            }

                .blogDetail .card .owl-carousel .owl-nav .owl-prev span:active, .blogDetail .card .owl-carousel .owl-nav .owl-next span:active, .blogDetail .card .owl-carousel .owl-nav .owl-prev span:hover, .blogDetail .card .owl-carousel .owl-nav .owl-next span:hover {
                    color: #694dfd;
                    transition: all 0.5s ease-in-out;
                }

        .blogDetail .card .owl-carousel img {
            border-radius: 10px;
            height: 600px;
            width: auto;
            margin: auto;
        }

        .blogDetail .card .card-body {
            padding: 1.25rem 0;
        }

            .blogDetail .card .card-body i {
                color: #694dfd;
            }

            .blogDetail .card .card-body span {
                color: #191b64;
                font-weight: bold;
                font-size: 1.1rem;
            }

        .blogDetail .card .card-title {
            color: #191b64;
            font-size: 2rem;
            font-weight: bold;
        }

            .blogDetail .card .card-title:hover {
                color: #694dfd;
                cursor: pointer;
                transition: all 0.5s ease-in-out;
            }

/*********contact Page ********/
/*contactCards*/

/*contactCards*/
.contactCards {
    padding: 60px 0 0;
}

    .contactCards .card {
        border: none;
        border-radius: 10px;
        box-shadow: 0px 0px 16px 0px rgba(4, 59, 80, 0.1);
        -webkit-box-shadow: 0px 0px 16px 0px rgba(4, 59, 80, 0.1);
        -moz-box-shadow: 0px 0px 16px 0px rgba(4, 59, 80, 0.1);
    }

        .contactCards .card .image {
            width: 70px;
            padding: 13px;
            background: #cccccc45;
            border-radius: 50%;
            margin: 15px;
            position: inherit;
        }


        .contactCards .card .card-title a {
            color: #191b64;
            text-decoration: none;
            font-size: 1.1rem;
            font-weight: bold;
        }

/*start contactForm*/
.contactForm {
    padding: 60px 0;
}

    .contactForm .formText h5 {
        color: #694dfd;
        font-weight: bold;
        letter-spacing: 1px;
    }

    .contactForm .formText h1 {
        color: #191b64 !important;
        font-weight: bold;
        font-size: 3.3rem;
    }

    .contactForm .contactIcon ul li {
        background-color: #f1f2f6;
        padding: 10px 13px;
        border-radius: 50%;
    }

        .contactForm .contactIcon ul li a {
            text-decoration: none;
        }

            .contactForm .contactIcon ul li a i {
                color: #717580;
                font-size: 1.1rem;
            }

    .contactForm form .form-control {
        height: 60px;
        padding: 0 15px;
        border: none;
        background: #f1f2f6;
        box-shadow: none;
        border-radius: 4px;
    }

        .contactForm form .form-control:foucs {
            background-color: #f1f2f6;
            box-shadow: none;
        }

        .contactForm form .form-control::placeholder {
            color: #949494;
            font-weight: bold;
            font-size: 1.1rem;
        }

    .contactForm form textarea {
        padding: 10px 20px !important;
        height: 220px !important;
    }

    .contactForm form button {
        border-radius: 10px;
        padding: 18px 26px 16px;
        font-size: 1.1rem;
    }

/*location*/
.location {
    padding: 0 0 60px;
}

/*********details Page ********/
/*start moduel first section*/
.modFirst {
    /*start carousel*/
}

    .modFirst .carousel-item {
        height: 300px;
        position: relative;
    }

        .modFirst .carousel-item::before {
            content: '';
            top: 0;
            left: 0;
            position: absolute;
            background-color: #0000000f;
            width: 100%;
            height: 100%;
        }

    .modFirst h2 {
        color: #191b64;
        font-weight: bold;
        font-size: 3rem;
    }

    .modFirst .carousel-control-prev-icon, .modFirst .carousel-control-next-icon {
        background-color: #694dfd;
        padding: 10px;
        border-radius: 50%;
        display: none;
    }

.modSecond h5 {
    color: #694dfd;
    font-size: 1.1rem;
}

.modSecond h2 {
    color: #191b64;
    font-weight: bold;
    font-size: 2rem;
}
    .modSecond h2 img {
        height: 45px;
    }
    .modSecond .card {
        border: none;
        margin-bottom: 10px;
    }

    .modSecond .card .card-header {
        border-radius: 10px;
        background-color: rgba(0, 0, 0, 0.05);
        margin-bottom: 15px;
        border-bottom: none;
    }

        .modSecond .card .card-header i {
            color: #694dfd;
            font-size: 1.3rem;
        }

        .modSecond .card .card-header button {
            color: #191b64;
            text-decoration: none;
            font-size: 1.3rem;
            font-weight: bold;
        }

            .modSecond .card .card-header button:focus {
                box-shadow: none;
            }

    .modSecond .card .card-body {
        padding-top: 0;
    }

/*********faq Page ********/
/*start faq*/
.faq {
    padding: 60px 0;
}

    .faq .card {
        border: none;
        background-color: transparent;
        margin-bottom: 8px;
    }

        .faq .card .card-header {
            border-bottom: none;
            background-color: rgba(255, 255, 255, 0.7);
        }

            .faq .card .card-header button {
                color: #fff;
                text-decoration: none;
                font-size: 1.1rem;
                font-weight: bold;
                background-color: #694dfd;
                box-shadow: 0px 5px 22px 0px rgba(0, 0, 0, 0.09);
                -webkit-box-shadow: 0px 5px 22px 0px rgba(0, 0, 0, 0.09);
                -moz-box-shadow: 0px 5px 22px 0px rgba(0, 0, 0, 0.09);
            }

                /*.faq .card .card-header button:focus {
                    box-shadow: none;
                }*/

                .faq .card .card-header button i {
                    color: #fff;
                    font-size: 1.1rem;
                }

                .faq .card .card-header button.collapsed {
                    background-color: #fff;
                    color: #191b64;
                }

                    .faq .card .card-header button.collapsed i {
                        color: #191b64;
                    }

        .faq .card .card-body {
            padding-top: 0;
            background-color: rgba(255, 255, 255, 0.9);
        }

/*********pricing Page ********/
/*pricing*/
.pricing {
    padding: 60px 0;
}

    .pricing .ulTime {
        width: 255px;
        height: 36px;
        padding: 4px;
        border-radius: 10px;
        background: #EFF0FF;
    }

        .pricing .ulTime li {
            flex: 1;
            font-weight: bold;
            line-height: 10px;
            font-size: 14px;
        }

            .pricing .ulTime li a {
                color: #747474;
                letter-spacing: 1px;
                transition: all .5s ease-in-out;
            }

                .pricing .ulTime li a.active {
                    color: #694dfd;
                    letter-spacing: 1px;
                    background-color: #fff;
                    border-radius: 10px;
                }

    .pricing .card {
        padding: 35px 45px;
        border-radius: 17px;
    }

        .pricing .card .card-title h1 {
            font-weight: bold;
            color: #191b64;
        }

        .pricing .card .card-title .onlyWord {
            color: #FF8A00;
            font-size: 1.1rem;
        }

        .pricing .card .card-title .priceWord {
            color: #FF8A00;
            font-size: 3rem;
            font-weight: bold;
        }

        .pricing .card .card-text ul {
            font-size: 18px;
            color: #191b64;
            letter-spacing: 1px;
        }

            .pricing .card .card-text ul i {
                padding-left: 5px;
                color: #694dfd;
            }

        .pricing .card .priceLink a {
            font-weight: bold;
            color: #191b64;
            text-decoration: none;
        }

            .pricing .card .priceLink a:hover {
                text-decoration: underline;
            }

    .pricing .coloredPriceCard {
        background-color: #694dfd;
        position: relative;
    }

        .pricing .coloredPriceCard .mostPop {
            position: absolute;
            top: 20px;
            right: 20px;
            background: #FF8A00;
            color: #fff;
            border-radius: 4px;
            font-size: 10px;
            line-height: 1;
            font-weight: bold;
            padding: 5px 7px;
            letter-spacing: 1px;
        }

        .pricing .coloredPriceCard p {
            color: #fff !important;
        }

        .pricing .coloredPriceCard .card-title h1 {
            color: #fff;
        }

        .pricing .coloredPriceCard .card-text ul {
            color: #fff;
        }

            .pricing .coloredPriceCard .card-text ul i {
                color: #fff;
            }

        .pricing .coloredPriceCard .priceLink a {
            color: #fff;
        }

            .pricing .coloredPriceCard .priceLink a:hover {
                text-decoration: underline;
            }

.list-lang li {
    cursor: pointer
}


@font-face {
    src: url(../fonts/Cairo-Black.ttf);
    src: url(../fonts/Cairo-Bold.ttf);
    src: url(../fonts/Cairo-Regular.ttf);
    src: url(../fonts/Cairo-Light.ttf);
    font-family: cairo;
}

* {
    padding: 0;
    margin: 0;
    font-family: 'cairo', sans-serif;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

/* common classes*/
.sectionTitle {
    text-align: center;
    padding-bottom: 30px;
}

    .sectionTitle h2 {
        font-size: 32px;
        font-weight: bold;
        text-transform: uppercase;
        margin-bottom: 20px;
        padding-bottom: 20px;
        position: relative;
        color: #191b64;
    }

        .sectionTitle h2::before {
            content: '';
            position: absolute;
            display: block;
            width: 120px;
            height: 1px;
            background: #DCD9D9;
            bottom: 1px;
            left: calc(50% - 60px);
        }

        .sectionTitle h2::after {
            content: '';
            position: absolute;
            display: block;
            width: 40px;
            height: 3px;
            background: #694dfd;
            bottom: 0;
            left: calc(50% - 20px);
        }

/*active li at navbar*/
.navActive {
    color: #694dfd !important;
    border-bottom: 2px solid #694dfd;
}

.navBorder {
    color: #000 !important;
    border-bottom: 2px solid #694dfd;
}

/* buttons */
.customBtn {
    border-color: #694dfd;
    background-color: #694dfd;
    color: #fff;
    font-weight: bold;
    letter-spacing: 1px;
}

    .customBtn:hover {
        background-color: #fff;
        color: #694dfd;
        transition: all 0.5s ease-in-out;
    }

.altBtn {
    border-color: #191b64;
    background-color: #fff;
    color: #191b64;
    font-weight: bold;
    letter-spacing: 1px;
}

    .altBtn:hover {
        background-color: #191b64;
        color: #fff;
        transition: all 0.5s ease-in-out;
    }

.coloredBtn {
    border-color: #fff;
    color: #fff;
    font-weight: bold;
    letter-spacing: 1px;
}

    .coloredBtn:hover {
        background-color: #fff;
        color: #694dfd;
        transition: all 0.5s ease-in-out;
    }

.whiteBtn {
    border-color: #694dfd;
    background-color: #fff;
    color: #694dfd;
    font-weight: bold;
    letter-spacing: 1px;
}

    .whiteBtn:hover {
        background-color: #694dfd;
        color: #fff;
        transition: all 0.5s ease-in-out;
    }

@media (min-width: 992px) and (max-width: 1200px) {
    .customBtn, .altBtn, .coloredBtn, .whiteBtn {
        font-size: 0.8rem;
    }
}
/*box shadoow */
/* Sweep To Top */
.hvr-sweep-to-top {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
}

    .hvr-sweep-to-top::after {
        content: "";
        position: absolute;
        z-index: -1;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #694dfd;
        -webkit-transform: scaleY(0);
        transform: scaleY(0);
        -webkit-transform-origin: 50% 100%;
        transform-origin: 50% 100%;
        -webkit-transition-property: transform;
        transition-property: transform;
        -webkit-transition-duration: 0.5s;
        transition-duration: 0.5s;
        -webkit-transition-timing-function: ease-out;
        transition-timing-function: ease-out;
    }

    .hvr-sweep-to-top:hover, .hvr-sweep-to-top:focus, .hvr-sweep-to-top:active {
        color: white;
    }

        .hvr-sweep-to-top:hover:after, .hvr-sweep-to-top:focus:after, .hvr-sweep-to-top:active:after {
            -webkit-transform: scaleY(1);
            transform: scaleY(1);
        }

/*footer*/
.foot {
    background: url(../img/footer-bg-3.png) no-repeat scroll center bottom transparent;
    background-size: cover;
}

    .foot h4 {
        color: #191b64;
        font-size: 1.5rem;
        letter-spacing: 2px;
        font-weight: bold;
    }

    .foot a {
        text-decoration: none;
        color: #191b64;
        transition: all 0.5s ease;
    }

        .foot a:hover {
            color: #694dfd;
            text-decoration: underline;
        }

    .foot .fab {
        font-size: 1.5rem;
        color: #000;
        transition: all 0.5s ease-in-out;
    }

        .foot .fab:hover {
            cursor: pointer;
        }

    .foot .fa-facebook-f:hover {
        color: #1877f2;
    }

    .foot .fa-twitter:hover {
        color: #1da1f2;
    }

    .foot .fa-instagram:hover {
        color: #e1306c;
    }

    .foot .fa-linkedin-in:hover {
        color: #0077b5;
    }

    .foot .footInfo a:hover {
        text-decoration: none;
    }

    .foot .footInfo h1 {
        font-size: 2rem;
    }

    .foot .footInfo .fa-google-play {
        font-size: 0.8rem;
        color: #191b64;
    }

/*style of main panner at all syb pages*/
.heroBg .featBg {
    background-size: cover;
    height: 45vh;
    width: 100vw;
    background-position: center;
    position: relative;
}

    .heroBg .featBg::before {
        content: '';
        top: 0;
        left: 0;
        position: absolute;
        background-color: #00000066;
        width: 100%;
        height: 100%;
    }

    .heroBg .featBg .card-title {
        position: relative;
        z-index: 50;
    }

    .heroBg .featBg .breadText a {
        color: #191b64;
        font-weight: bold;
        letter-spacing: 2px;
    }

    .heroBg .featBg .card-img {
        height: 60vh;
    }

    .heroBg .featBg .contactText {
        color: #fff;
        font-weight: 900;
        letter-spacing: 2px;
    }

/*****start terms And Privacy page*****/
.terms, .privacy {
    padding: 60px 0 0 0;
}

    .terms h1, .privacy h1 {
        color: #191b64;
        font-weight: bold;
        font-size: 2rem;
    }

    .terms p, .privacy p {
        color: #333333;
    }

/*****end terms And Privacy page*****/

/*****start features Details page*****/
.featuresDetails {
    padding: 60px 0 0 0;
}

    .featuresDetails h1 {
        color: #191b64;
        font-weight: bold;
        font-size: 2rem;
    }

    .featuresDetails p {
        color: #333333;
    }

/*****end features Details page*****/



/*********
    Animation
    **********/
.animated-shapes .shape-scaleUpDown {
    bottom: 0;
    animation: scale-up-one infinite 3s linear;
}

.animated-shapes .shape-rotation {
    left: 50%;
    top: 30%;
    animation: rotation infinite 3s linear;
}

.animated-shapes .shape-float-bob-y {
    right: 0;
    bottom: 0;
    animation: float-bob-y infinite 3s linear;
}

.animated-shapes .shape-circle {
    left: 0;
    top: 0;
    animation: rotation infinite 3s linear;
}

@keyframes scale-up-one {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    40% {
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes rotation {
    to {
        transform: rotate(360deg);
    }
}


@keyframes float-bob-y {
    0% {
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px);
    }

    50% {
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px);
    }

    100% {
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px);
    }
}