body {
    font-family: "JF Flat Regular" !important;
    background-color: #fff;
    font-size: 12px;
    font-weight: 400;
}

.loader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 99999999999999999;
    background: url('https://i.pinimg.com/originals/2b/77/7a/2b777a13d2df20a20342e24b1fef7ff7.gif') 50% 50% no-repeat rgb(249,249,249);
}

ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

h1, h2, h3, h4, h5, h6, p {
    font-family: "JF Flat Regular" !important;
    font-weight: normal;
    font-style: normal;
    margin: 0;
}

.button-account {
    z-index: 999999;
    position: relative;
    top: -15px;
    height: 121px;
    float: right;
    left: 43px;
    background-image: url(../images/img-menu.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.img-logo {
    position: absolute;
    height: 164px;
    left: 8%;
    z-index: 999999;
    top: 40px;
}

a {
    cursor: pointer !important;
    text-decoration: none !important;
}

    a:hover, a:active, a:focus, a:visited {
        text-decoration: none !important;
    }

.account {
    text-align: center;
    font-size: 18px;
    color: #ffff;
    padding-top: 20px;
}

    .account:hover {
        color: #ffd200;
        transition: ease-in-out .20s;
    }

.img-bg {
    padding: 130px 0;
    height: 603px;
}

.background-text-slide {
    font-size: 44px;
    background-color: #713371;
    color: #ffffff;
    width: max-content;
    padding: 8px;
    margin-bottom: 10px;
}

.text-slide {
    color: #713371;
    font-size: 18px;
    padding-top: 140px;
    text-align: right;
}

#homeSlider .owl-nav {
    display: none;
}


.menu_user {
    float: left;
}

    .menu_user > li {
        float: right;
        margin-left: 20px;
    }

        .menu_user > li:last-child {
            margin-left: 0;
        }

        .menu_user > li > a {
            display: block;
            padding: 5px 10px;
            border-radius: 3px;
            background-color: transparent;
            color: #063058;
            font-size: 16.5px;
        }

            .menu_user > li > a:hover, .menu_user > li > a:focus, .menu_user > li.login_user > a {
                color: #fff;
                background-color: #ffd200;
            }

.middle_header {
    padding: 14px 0px 0px;
    background-color: #ffd200;
    height: 73px;
}

.logo_site {
    float: right;
}

    .logo_site > a {
        display: inline-block;
    }

.main_menu {
    float: right;
}

    .main_menu > li {
        float: right;
        margin-left: 25px;
        padding-bottom: 25px;
    }

        .main_menu > li > a {
            display: block;
            color: #754d6a;
            font-size: 17px;
        }

.main_menu {
    margin-top: 10px;
}

    .main_menu > li:hover > a, .main_menu > li > a:focus {
        color: #6e4062;
    }

.bottom_header {
    padding: 5px 0;
}

.search_left {
    float: left;
}

.form_search {
    width: 249px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
}

.advanced_search {
    display: inline-block;
    vertical-align: middle;
    color: #063058;
    font-size: 17px;
    margin-right: 20px;
}

    .advanced_search:hover, .advanced_search:focus {
        color: #643c76;
    }

.form_search .form-control {
    font-size: 16px;
    box-shadow: none;
    border-radius: 0;
    border: 1px solid #dee0e0;
    height: 40px;
    color: #dee0e0;
    padding-right: 39px;
    border: none;
}

    .form_search .form-control::-moz-placeholder {
        color: #dee0e0;
    }

    .form_search .form-control:-ms-input-placeholder {
        color: #dee0e0;
    }

    .form_search .form-control::-webkit-input-placeholder {
        color: #dee0e0;
    }

.form_search .btn__search {
    position: absolute;
    top: 0;
    width: 40px;
    height: 40px;
    right: 0;
    border-radius: 0;
    box-shadow: none;
    border: 0;
    outline: none;
    color: #dee0e0;
    background-color: transparent;
    font-size: 20px;
    padding-top: 5px;
}

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

.btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus {
    outline: none !important;
}

.btn.focus, .btn:focus {
    outline: 0;
    box-shadow: none !important;
}

#header.fixed-header .middle_header {
    height: 73px;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    -webkit-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.2);
    z-index: 99999999999999;
    padding: 14px 0px 0px
}

.hamburger {
    width: 40px;
    height: 40px;
    background: transparent;
    border-radius: 5px;
    border: none;
    position: relative;
    z-index: 0;
    float: left;
    padding-left: 2px;
    padding-right: 2px;
    -webkit-transition: background-color .2s linear;
    -ms-transition: background-color .2s linear;
    transition: background-color .2s linear;
    display: none;
    border: 2px solid #643c76;
}

    .hamburger:hover {
        background-color: #643c76;
        border-color: #643c76;
    }

        .hamburger:hover span:nth-child(1) {
            transform: translate(0, -2px);
            -webkit-transform: translate(0, -2px);
            -ms-transform: translate(0, -2px);
        }

        .hamburger:hover span:nth-child(3) {
            transform: translate(0, 2px);
            -webkit-transform: translate(0, 2px);
            -ms-transform: translate(0, 2px);
        }

    .hamburger.active span:nth-child(1) {
        transform: rotate(45deg) translate(4px, 4px);
        -webkit-transform: rotate(45deg) translate(4px, 4px);
        -ms-transform: rotate(45deg) translate(4px, 4px);
    }

    .hamburger.active span:nth-child(2) {
        transform: translate(-4px, 0);
        -webkit-transform: translate(-4px, 0);
        -ms-transform: translate(-4px, 0);
        opacity: 0;
    }

    .hamburger.active span:nth-child(3) {
        transform: rotate(-45deg) translate(4px, -4px);
        -webkit-transform: rotate(-45deg) translate(4px, -4px);
        -ms-transform: rotate(-45deg) translate(4px, -4px);
    }

    .hamburger span {
        width: 18px;
        height: 2px;
        border-radius: 10px;
        margin: auto;
        background-color: #713371;
        display: block;
        margin-bottom: 4px;
        -webkit-transition: all 0.4s ease;
        -moz-transition: all 0.4s ease;
        -ms-transition: all 0.4s ease;
        -o-transition: all 0.4s ease;
        transition: all 0.4s ease;
    }

        .hamburger span:last-child {
            margin-bottom: 0;
        }

    .hamburger:hover span {
        background-color: #fff;
    }
/*mobile menu*/
/*menu*/
.menu-mobile {
    position: fixed;
    right: 0px;
    top: 0px;
    bottom: 0;
    height: 100%;
    width: 250px;
    background: #fff;
    z-index: 1001;
    overflow-y: auto;
    -webkit-transform: translateX(265px);
    -moz-transform: translateX(265px);
    -ms-transform: translateX(265px);
    -o-transform: translateX(265px);
    transform: translateX(265px);
    -webkit-transition: -webkit-transform .4s ease;
    transition: -webkit-transform .4s ease;
    transition: transform .4s ease;
    transition: transform .4s ease,-webkit-transform .4s ease;
    -webkit-box-shadow: -2px 0 20px 0 rgba(33, 23, 23, 0.68);
    box-shadow: -2px 0 20px 0 rgba(33, 23, 23, 0.68);
}

.brand-area {
    position: relative;
    padding-top: 20px;
}

.close_menu {
    position: absolute;
    top: 0;
    left: 0px;
    font-size: 24px;
    cursor: pointer;
    color: #363636;
    width: 35px;
    height: 35px;
    text-align: center;
    line-height: 35px;
    background-color: #fff;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

    .close_menu:hover {
        background-color: #767676;
        color: #fff;
    }

.brand-area a {
    width: 90%;
    height: auto;
    display: block;
    background-size: contain;
    margin: 0px auto 0 auto;
    margin-top: 10px;
    text-align: center;
    margin-bottom: 20px;
}

    .brand-area a > img {
        max-height: 116px;
        margin: auto;
    }

.mmenu > ul {
    list-style: none;
    padding: 0px;
    margin: 0px;
}

    .mmenu > ul li a {
        display: block;
        border-bottom: 1px solid rgba(6,48,88,0.1);
        color: #063058;
        font-size: 17px;
        padding: 10px;
        transition: all .3s;
    }

        .mmenu > ul li a > i {
            margin-left: 5px;
        }

button:focus {
    outline: 0px auto -webkit-focus-ring-color !important;
}

.mmenu > ul li a:hover {
    background: #f3d131;
    color: rgb(0, 0, 0);
    border-color: #643c76;
}

.register-mobile {
    margin-top: 0 !important;
}

    .register-mobile li:last-child > a {
        border-bottom: 0;
    }

.plusIcon {
    font-size: 14px;
    margin-left: 5px;
}

.m-overlay {
    position: fixed;
    content: '';
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    background: #333;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all .3s;
}

.menu-toggle {
    overflow: hidden;
}

    .menu-toggle .m-overlay {
        opacity: 0.6;
        visibility: visible;
    }

    .menu-toggle .menu-mobile {
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0);
    }

    .menu-toggle .main-wrapper {
        -webkit-transform: translate3d(-250px,0,0);
        -moz-transform: translate3d(-250px,0,0);
        -ms-transform: translate3d(-250px,0,0);
        -o-transform: translate3d(-250px,0,0);
        transform: translate3d(-250px,0,0);
    }

html.menu-toggle {
    overflow: hidden;
}

.mmenu .social-mobile li {
    display: inline-block;
    margin: 5px;
}

.mmenu .social-mobile {
    display: table;
    margin: auto;
    text-align: center;
}

    .mmenu .social-mobile li a {
        display: block;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        line-height: 30px;
        color: #fff;
        font-size: 16px;
        padding: 0;
        text-align: center;
    }

        .mmenu .social-mobile li a > i {
            margin: 0;
        }

    .mmenu .social-mobile li a {
        border-bottom: 0;
    }


#search {
    display: none;
}

.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
    background: #713371 !important;
}

.owl-theme .owl-dots .owl-dot span {
    width: 13px !important;
    height: 13px !important;
}

.owl-theme .owl-controls {
    left: 13% !important;
    margin-top: -128px;
    z-index: 999999;
    position: absolute;
}

.main_menu li:hover {
    background-image: url(../images/hover-menu.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-origin: content-box;
    height: 62px;
    transition: ease-in-out .70s;
}



.div-img-video {
    width: 100%;
    height: auto;
    margin-top: 40px;
}

.img-video {
    width: 100%;
    margin-top: 43px;
}

.section-video {
    background-image: url(../images/bacground.png);
    background-size: contain;
    background-repeat: no-repeat;
    margin-top: 55px;
    position: relative;
    padding-bottom: 75px;
    direction: ltr;
    right: 0px;
    background-position: right;
}

.age-stages {
    font-size: 33px;
    margin-top: 47px;
    background-color: #eb432d;
    color: #ffffffff;
}

.lamp {
    float: right;
    height: 60px;
}

.Packages-addresses {
    color: #a1858d;
    padding-top: 23px;
}

.img-book {
    position: absolute;
    top: 0;
    left: 0;
    width: 57px;
}

.img-video-animation {
    width: 367px;
    position: absolute;
    right: 0;
    bottom: -3px;
}

.img-book2 {
    position: absolute;
    left: 31px;
    bottom: -20px;
    height: 80px;
}

.padding-age {
    padding-top: 77px;
    text-align: -webkit-center;
    direction: rtl;
    padding-right: 70px !important;
    text-align: right;
}

.P-age {
    color: #754d6a;
    font-size: 17px;
    text-align: right;
    padding-top: 20px;
    direction: rtl;
}

.Years {
    padding-top: 19px;
    text-align: right;
    font-size: 20px;
    color: #663e72;
}

.age {
    font-size: 22px;
    font-weight: 700;
    color: #ffd200;
    background-color: #703978;
    padding: 0 15px;
    display: block;
}

.age-center {
    text-align: center !important;
}

.More {
    text-align: left;
    font-size: 18px;
    margin-top: 24px;
    direction: rtl;
}

.color-more {
    color: #663e72;
}

.More a:hover {
    color: #eb432d !important;
}

.color-title2-card {
    color: #836179;
}

.Subscription-packages {
    position: relative;
    height: 429px;
    background-image: url(../images/Subscription-packages.png);
    background-size: cover;
    text-align: center;
    padding-top: 40px;
}

.title-packages {
    color: #e6c43a;
    font-size: 35px;
    padding-bottom: 11px;
}

.text-packages {
    color: #dcd0df;
    font-size: 14px;
    padding-top: 15px;
}

.card-Individual:hover {
    margin-top: -20px;
    transition: ease-in-out .40s;
}

.card-Individual {
    position: relative;
    background-image: url(../images/Individual-background.png);
    height: 463px;
    border-radius: 10px;
    margin-top: 5px;
    background-size: cover;
    padding-top: 53px;
}

.title-Individual {
    padding-left: 24px;
    font-size: 27px;
    text-align: left;
    line-height: 33px;
}

.Individual-Package {
    color: #866583;
    font-size: 17px;
    line-height: 29px;
    padding-right: 20px;
    text-align: right;
}

    .Individual-Package:hover {
        color: #441540;
        transition: ease-in-out .20s;
        font-weight: 500;
    }

.div-img-Individual {
    float: left;
}

.img-Individual {
    position: absolute;
    height: 157px;
    /* margin-top: -41px;*/
    left: 0;
}

.More-Individual {
    background-color: #703978;
    bottom: 0;
    height: 40px;
    width: 100%;
    position: absolute;
    border-radius: 0px 0px 10px 10px;
    right: 0;
    left: 0;
    bottom: 0;
}

.div-More-Individual {
    background-color: #ffd200;
    bottom: 19px;
    color: #643c76;
    height: 37px;
    width: 40px;
    position: absolute;
    font-size: 25px;
    text-align: center;
    margin-right: 26px;
}

    .div-More-Individual:hover {
        background-color: #ffd000e5;
        color: #fff;
        transition: ease-in-out .10s;
        font-weight: 700;
    }

        .div-More-Individual:hover i {
            font-size: 30px;
            padding-top: 3px;
            transition: ease-in-out .10s;
        }


.Subscription-request {
    font-size: 12px;
    bottom: 0;
    color: #dcd0df;
    text-align: left !important;
    padding-top: 10px;
    padding-left: 21px;
}




.card-family:hover {
    margin-top: -20px;
    transition: ease-in-out .40s;
}

.card-family {
    position: relative;
    background-image: url(../images/Family-background.png);
    height: 463px;
    border-radius: 10px;
    margin-top: 5px;
    background-size: cover;
    padding-top: 53px;
}

.title-family {
    padding-left: 24px;
    font-size: 27px;
    text-align: left;
    line-height: 33px;
}

.family-Package {
    color: #703978;
    font-size: 17px;
    line-height: 29px;
    padding-right: 20px;
    text-align: right;
}

    .family-Package:hover {
        color: #441540;
        transition: ease-in-out .10s;
        font-weight: 500;
    }

.div-img-family {
    float: left;
}

.img-family {
    position: absolute;
    height: 157px;
    margin-top: -18px;
    left: 0;
}

.More-family {
    background-color: #703978;
    bottom: 0;
    height: 40px;
    width: 100%;
    position: absolute;
    border-radius: 0px 0px 10px 10px;
}

.div-More-family {
    background-color: #ffd200;
    bottom: 19px;
    color: #643c76;
    height: 37px;
    width: 40px;
    position: absolute;
    font-size: 25px;
    text-align: center;
    margin-right: 26px;
}

    .div-More-family:hover {
        background-color: #ffd000e5;
        color: #fff;
        transition: ease-in-out .10s;
    }

        .div-More-family:hover i {
            font-size: 30px;
            padding-top: 3px;
            transition: ease-in-out .10s;
        }

.card-Institutions:hover {
    margin-top: -20px;
    transition: ease-in-out .40s;
}

.card-Institutions {
    position: relative;
    background-image: url(../images/Corporate-background.png);
    height: 463px;
    border-radius: 10px;
    margin-top: 5px;
    background-size: cover;
    padding-top: 53px;
}

.title-Institutions {
    padding-left: 24px;
    font-size: 27px;
    text-align: left;
    line-height: 33px;
}

.Institutions-Package {
    color: #703978;
    font-size: 17px;
    line-height: 29px;
    padding-right: 20px;
    text-align: right;
}

    .Institutions-Package:hover {
        color: #441540;
        transition: ease-in-out .10s;
        font-weight: 500;
    }

.div-img-Institutions {
    float: left;
}

.img-Institutions {
    position: absolute;
    height: 157px;
    /*  margin-top: -41px;*/
    left: 0;
}

.More-Institutions {
    background-color: #703978;
    bottom: 0;
    height: 40px;
    width: 100%;
    position: absolute;
    border-radius: 0px 0px 10px 10px;
    ;
}

.div-More-Institutions {
    background-color: #ffd200;
    font-size: 25px;
    bottom: 19px;
    color: #643c76;
    height: 37px;
    width: 40px;
    position: absolute;
    text-align: center;
    margin-right: 26px;
}

    .div-More-Institutions:hover {
        background-color: #ffd000e5;
        color: #fff;
        transition: ease-in-out .10s;
    }

        .div-More-Institutions:hover i {
            font-size: 30px;
            padding-top: 3px;
            transition: ease-in-out .10s;
        }

#pot {
    position: absolute;
    -webkit-animation: linear infinite;
    -webkit-animation-name: run;
    -webkit-animation-duration: 5s;
}

@-webkit-keyframes run {
    0% {
        right: 0;
    }

    50% {
        right: calc(11% - 100px);
    }

    100% {
        right: 0;
    }
}

#pott {
    position: absolute;
    -webkit-animation: linear infinite;
    -webkit-animation-name: runn;
    -webkit-animation-duration: 5s;
}

@-webkit-keyframes runn {
    0% {
        left: 0;
    }

    50% {
        left: calc(11% - 100px);
    }

    100% {
        left: 0;
    }
}

#Animation-star {
    position: absolute;
    -webkit-animation: linear infinite;
    -webkit-animation-name: run2;
    -webkit-animation-duration: 5s;
}

@-webkit-keyframes run2 {
    0% {
        right: 202;
    }

    50% {
        right: calc(12% - 100px);
    }

    100% {
        right: 202;
    }
}

.Features {
    background-color: #e9e9e9;
    margin-top: 350px;
    padding-bottom: 60px;
    text-align: center;
}

.Footer-background-section {
    background-color: #e9e9e9;
    height: 382px;
}

.book3 {
    right: 152px;
    position: absolute;
    margin-top: 160px;
    width: 98px;
}

.book-img-absolute {
    position: absolute;
    bottom: 232px;
    width: 100px;
    left: 58%;
}

.Freshness {
    position: absolute;
    bottom: 417px;
    width: 100px;
}

.background-image-Features {
    position: absolute;
    width: 100%;
    right: 0;
    margin-top: -35px;
}

.line-features {
    position: absolute;
    right: 0;
    height: 574px;
    z-index: 99999;
    margin-top: 166px;
}

.Title-div-Features {
    font-size: 36px;
    max-width: max-content;
    background-color: #703978;
    color: #ffd200;
    margin-top: -63px;
}

.text-Features {
    font-size: 15px;
    color: #684279;
    padding-top: 17px;
}

.padding-top-Features {
    padding-top: 40px;
}

.pagdding-buttom {
    padding-bottom: 64px;
}

.width-img-Features {
    width: 90px;
}

.Title-Features {
    color: #684279;
    padding-top: 15px;
    font-size: 21px;
}

    .Title-Features:hover {
        color: #31173d;
        transition: ease-in-out .20s;
        font-weight: 600;
    }

.footer {
    width: 100%;
    height: auto;
    background-color: #ffd200;
    direction: rtl;
    padding-bottom: 20px;
}

.menu-footer {
    color: #713371;
    line-height: 29px;
    font-size: 15px;
}

    .menu-footer:hover {
        color: #31173d;
        transition: ease-in-out .10s;
        font-weight: 600;
    }

.form_search-foter {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    width: 57%;
}

.advanced_search {
    display: inline-block;
    vertical-align: middle;
    color: #063058;
    font-size: 17px;
    margin-right: 20px;
}

    .advanced_search:hover, .advanced_search:focus {
        color: #e9a003;
    }

.form_search-foter .form-control {
    box-shadow: none;
    border-radius: 0;
    border: 1px solid #dee0e0;
    height: 40px;
    color: #dee0e0;
    padding-right: 10px;
    border: none;
}

    .form_search-foter .form-control::-moz-placeholder {
        color: #dee0e0;
    }

    .form_search-foter .form-control:-ms-input-placeholder {
        color: #dee0e0;
    }

    .form_search-foter .form-control::-webkit-input-placeholder {
        color: #dee0e0;
    }

.form_search-foter .btn__search {
    position: absolute;
    top: 0;
    width: 40px;
    height: 40px;
    right: 0;
    border-radius: 0;
    box-shadow: none;
    border: 0;
    outline: none;
    color: #dee0e0;
    background-color: transparent;
    font-size: 20px;
    padding-top: 10px;
}

.logo-foter {
    float: left;
    width: 101px;
}

.email-foter {
    color: #ffd200;
    background-color: #703978;
    margin-right: 14px;
    bottom: 1px;
    height: 40px;
    width: 40px;
    padding-top: 9px;
    text-align: center;
    float: right;
    margin-left: 6px;
}

.text-form-searsh {
    color: #713371;
    text-align: right;
    font-size: 21px;
    padding-top: 0px;
    padding-bottom: 10px;
    font-weight: 700;
}

.section-img-foter {
    position: relative;
}

.iconfoter {
    text-align: center;
    background: #713371;
    height: 35px;
    width: 35px;
    float: right;
    margin-left: 15px;
    padding-top: 7px;
    border-radius: 6px;
}

    .iconfoter:hover {
        background: #713371dc;
        transition: ease-in-out .10s;
    }

.padding-top-foter {
    padding-top: 20px;
    direction: ltr;
}

.direction-email {
    direction: rtl;
}

.padding-link-foter {
    padding-top: 30px;
    text-align: right;
}

.copyrights {
    text-align: left;
    font-size: 15px;
    color: #684279;
}

.hr-foter {
    border-top: 1px solid #643c76;
}


.Individuals-registration2 {
    background-color: #fff3ae;
    width: 100%;
    height: auto;
    direction: ltr;
    padding-bottom: 146px;
}

.Title-div-Features3 {
    font-size: 36px;
    max-width: max-content;
    background-color: #703978;
    color: #ffd200;
    margin-top: -31px;
}

.Individuals-registration {
    background-color: #e1d7e2;
    width: 100%;
    height: auto;
    direction: ltr;
    padding-bottom: 146px;
}

.logo2 {
    width: 14%;
    margin-top: 33px;
}

.Freshness4 {
    position: absolute;
    bottom: 0px;
    width: 100px;
}

.card-Individual2 {
    position: relative;
    height: 446px;
    border-radius: 10px;
    margin-top: 90px;
    background-size: cover;
    padding-top: 40px;
    direction: rtl;
}

.More-Individual2 {
    background-color: #703978;
    bottom: 0;
    height: 40px;
    width: 100%;
    position: absolute;
    border-radius: 0px 0px 10px 10px;
    right: 0;
    left: 0;
    bottom: 0;
    direction: rtl;
}

.img-Individual2 {
    position: absolute;
    height: 157px;
    margin-top: -41px;
    left: 0;
}

#pot2 {
    position: absolute;
    -webkit-animation: linear infinite;
    -webkit-animation-name: run2;
    -webkit-animation-duration: 5s;
}

@-webkit-keyframes run2 {
    0% {
        right: 0;
    }

    50% {
        right: calc(11% - 100px);
    }

    100% {
        right: 0;
    }
}

.background-image-Features2 {
    position: absolute;
    width: 100%;
    right: 0;
    margin-top: -35px;
}

.text-Individuals-registration {
    font-size: 15px;
    color: #703978;
    text-align: right;
    padding: 23px;
}

.Packages-addresses2 {
    font-size: 33px;
    color: #a988ae;
    padding-top: 28px;
    padding-left: 32px;
}

.color-title2-card2 {
    color: #703978;
    font-size: 34px;
    padding-left: 30px;
}

.title-login {
    font-size: 35px;
    font-weight: 700;
    background-color: #713371;
    color: #e3b217;
    max-width: fit-content;
}

.title-login2 {
    font-size: 22px;
    color: #643c76;
}

.form-box {
    width: 93%;
    background-color: #ffffff;
    border-radius: 44px;
}

.input-text {
    width: 78%;
    font-size: 15px;
    border: none;
    height: 57px;
}

.border-botom {
    border-bottom: solid 2px #ffd200;
}

textarea:focus, input:focus {
    outline: none;
}

.login-inner-form {
    margin-top: 25px;
}

i.fa.fa-eye {
    font-size: 18px;
    color: #713371;
    float: right;
    padding-top: 20px;
    padding-right: 15px;
}

i.fa.fa-eye-slash {
    font-size: 18px;
    color: #713371;
    float: right;
    padding-top: 20px;
    padding-right: 15px;
}

.padding-top {
    padding-top: 15px;
}

label.form-check-label {
    font-size: 13px;
    padding-left: 17px;
    color: #703978
}

i.fa.fa-envelope {
    color: #713371;
    float: left;
    font-size: 23px;
    padding-top: 17px;
    padding-right: 18px;
    padding-left: 16px;
}

.Forgot-your-password a {
    float: right;
    padding-right: 66px;
    font-size: 13px;
    color: #83527f;
}

.fa-unlock-alt {
    color: #713371;
    padding: 18px;
    padding-top: 19px;
    padding-left: 19px;
    font-size: 30px !important;
    float: left;
}

.btn-block {
    width: 58% !important;
    border: none;
    height: 38px;
    font-size: 20px;
    border-radius: 27px;
    background-color: #713371;
    color: #e3b217;
    box-shadow: 1px 5px 11px #00000045;
}

.padding-left-check {
    padding-left: 38px !important
}

.Create-account {
    text-align: right;
    padding-top: 10px;
    font-size: 14px;
    color: #76488b;
    padding-right: 57px;
}

    .Create-account a {
        color: #76488b;
    }

.padding-button-login {
    margin-top: 30px;
}

.card-Individual3 {
    position: relative;
    background-image: url(../images/Group_2.png);
    height: 446px;
    border-radius: 10px;
    margin-top: 90px;
    background-size: cover;
    padding-top: 40px;
    direction: rtl;
}

.Features2 {
    background-color: #ffffff;
    padding-bottom: 60px;
    text-align: center;
}

.Freshness6 {
    position: absolute;
    bottom: 417px;
    width: 63px;
}

.Title-div-Features2 {
    font-size: 36px;
    max-width: max-content;
    background-color: #703978;
    color: #ffd200;
    margin-top: -51px;
}

.Footer-background-section2 {
    background-color: #ffffff;
    height: 382px;
}

/*registration  */
.input-registration {
    width: 100%;
    height: 36px;
    font-size: 19px;
    background-color: #fffafa00;
    border: none;
    border-bottom: solid 1px #643c76;
}

.title-login3 {
    font-size: 30px;
    font-weight: 700;
    background-color: #ffffff;
    color: #441540;
    max-width: fit-content;
}

.style-form {
    height: 36px !important;
    direction: rtl !important;
    border: none !important;
    border-bottom: solid 1px #643c76 !important;
    background-color: #fffbe7 !important;
}

.border-Gender {
    border-bottom: solid 1px #643c76;
    height: 80px;
}

.Gender-text-align {
    text-align: right;
}

.Create-account2 {
    text-align: right;
    padding-top: 10px;
    font-size: 14px;
    color: #76488b;
    padding-right: 0px;
}

    .Create-account2 a {
        color: #76488b;
    }

.text-lable {
    font-size: 14px;
    margin-top: 20px;
    color: #643c76;
}

input.input-registration {
    color: #643c76;
}



.section-about {
    background-image: url(../images/slider2.png);
    background-size: cover;
    background-repeat: no-repeat;
    margin-top: 0px;
    height: 600px;
}

.img-animation {
    position: absolute;
    bottom: 50px;
    width: 100px;
}

.img_Group_2 {
    position: absolute;
    top: -100px;
    width: 72px;
}

.padding-slider-about {
    padding-top: 100px;
    text-align: right;
}

.title-slider {
    background-color: #ffd200;
    color: #703978;
    font-weight: 700;
    font-size: 27px;
    max-width: fit-content;
}

.text-slider {
    font-size: initial;
    padding-left: 100px;
    color: #866790;
    padding-top: 30px;
}

.title-age-stages {
    font-size: 24px;
    background-color: #ffd300;
    color: #643c76;
    max-width: fit-content;
    padding-left: 10px;
    padding-right: 11px;
}

.section-book-about {
    background-image: url(../images/book-about.png);
    background-size: 627px;
    background-repeat: no-repeat;
    margin-top: 0px;
    padding-bottom: 67px;
}

.text-age-stages {
    font-size: 14px;
    padding-top: 8px;
}

.div-age-stages {
    height: 163px;
    text-align: right;
    width: 53%;
}

.div-age-stages2 {
    height: 270px;
    text-align: right;
    width: 53%;
}

.statistics {
    background-image: url(../images/team-background.png);
    padding: 46px 0 62px 0px;
    text-align: center;
    background-size: contain;
}

.icon-statistics {
    font-size: 38px !important;
    color: #ffd200;
    padding-bottom: 14px;
}

.nember-statistics {
    font-size: 38px;
    color: #Ffffffff;
    margin-bottom: 0;
}

.nema-statistics {
    font-size: 27px;
    color: #Ffffffff;
}

.img-team-position {
    position: absolute;
    right: 100px;
    width: 84px;
    margin-top: -36px;
}

.title-team {
    color: #643c76;
    font-size: 35px;
    padding-bottom: 0px;
    padding-top: 30px;
}

.text-team {
    color: #dcd0df;
    font-size: 14px;
    padding-top: 15px;
}

.img-Group_4 {
    position: absolute;
    right: 98px;
    width: 80px;
    bottom: 114px;
}

.Footer-background-section-team {
    background-color: #f9d7d2;
    height: 382px;
}

.Success-Partners {
    background-color: #f9d7d2;
    width: 100%;
    height: auto;
    padding-bottom: 60px;
}

.img-Partners {
    width: 100%;
    height: 150px;
    margin-bottom: 11px;
    overflow: hidden;
    border-radius: 8px;
}

.title-Partners {
    color: #643c76;
    font-size: 35px;
    padding-bottom: 0px;
    padding-top: 0px;
}

.text-Partners {
    color: #8d8090;
    font-size: 14px;
    padding-top: 15px;
    padding-bottom: 20px;
}

.margin-top-team {
    margin-top: 45px;
}

.img-name-team {
    width: 100%;
}

.img-team {
    background-color: #eaeaea;
    border-radius: 18px;
    text-align: center;
    width: 100%;
    height: 246px;
    overflow: hidden;
}

.div-name-team {
    text-align: center;
    margin-top: 13px;
}

.paddin-buttom-team {
    padding-bottom: 60px;
}

.type-team {
    font-size: 15px;
    color: #a69895;
}

.name-team {
    color: #713371;
    font-size: 19px;
    padding-top: 9px;
    font-weight: bolder;
}


/*page connect us  */
.transparent {
    background-color: white !important;
    border: none !important;
    text-align: right !important;
    padding: 20px !important;
}

.concat-us {
    background-color: #d0eaf7;
    width: 100%;
    height: auto;
    direction: ltr;
    padding-bottom: 100px;
}

.Title-div-Features3 {
    font-size: 36px;
    max-width: max-content;
    background-color: #703978;
    color: #ffd200;
    margin-top: -24px;
}

.Gender-text-align2 {
    text-align: right;
    margin-top: 35px;
    direction: ltr;
}

.text-align-right {
    text-align: right !important;
    direction: rtl;
}

.title-form-concat-us {
    margin-top: 100px;
    font-size: 30px;
    font-weight: 700;
    background-color: #ffffff;
    color: #703978;
    max-width: fit-content;
}

.logo3 {
    position: absolute;
    width: 14%;
    margin-top: 33px;
}

.direction {
    direction: ltr;
}

.Freshness5 {
    position: absolute;
    bottom: 0px;
    width: 68px;
}

.star {
    margin-right: 177px;
    position: absolute;
    margin-top: 160px;
    width: 60px;
}



/*page  common-questions  */
.common-questions {
    background-color: #f1aec6;
    width: 100%;
    height: auto;
    direction: ltr;
    padding-bottom: 100px;
}

.title-common-questions {
    margin-top: 100px;
    font-size: 30px;
    font-weight: 700;
    background-color: #ffffff;
    color: #703978;
    max-width: fit-content;
}

.text-common-questions {
    font-size: 15px;
    width: 56%;
    padding-bottom: 23px;
    padding-top: 15px;
    color: #79417d;
}

.text-accordion {
    color: #703978;
    font-size: 14px;
    padding-right: 17px;
}

.Title-div-Features4 {
    font-size: 36px;
    max-width: max-content;
    background-color: #703978;
    color: #ffd200;
    margin-top: -39px;
}


.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
}

    .panel.show {
        display: block;
    }

.panel {
    background-color: #f9dfe8;
    max-height: 0;
    overflow: hidden;
    transition: all 0.6s ease-in-out;
    opacity: 0;
}

    .panel.show {
        opacity: 1;
        max-height: 500px;
    }

    .panel:last-of-type {
        border-radius: 0 0 10px 10px;
    }

button.accordion {
    text-align: right !important;
    background-color: #ffffff;
    color: black;
    cursor: pointer;
    width: 100%;
    border: none;
    border-radius: 7px;
    outline: none;
    transition: 0.4s;
    padding-top: 20px;
}


.accordian-section {
    padding-top: 14px;
    color: #615a5c;
    font-size: 13px;
    height: auto;
    padding-bottom: 4px;
}

button.accordion:after {
    content: '+';
    color: black;
    float: right;
    margin-left: 5px;
    font-size: 33px;
    margin-top: -13px;
    color: #703978;
    font-weight: 700;
    padding-right: 13px;
}

button.accordion.active:after {
    content: "V";
    color: #703978;
    font-size: 30px;
    transition: 0.4s;
    padding-bottom: 3px;
}

.btn-block2 {
    margin-left: 65%;
    width: 85% !important;
    border: none;
    height: 38px;
    font-size: 20px;
    border-radius: 27px;
    background-color: #713371;
    color: #e3b217;
    box-shadow: 1px 5px 11px #00000045;
}

.btn-block22 {
    margin-right: 0%;
    width: 100% !important;
    border: none;
    height: 38px;
    font-size: 20px;
    border-radius: 27px;
    background-color: #713371;
    color: #e3b217 !important;
    box-shadow: 1px 5px 11px #00000045;
    text-align: center;
    padding-top: 3px;
}

/* page-content */
.style-container {
    height: auto;
    margin-bottom: 150px;
}

.title-page-content {
    font-size: 25px;
    font-weight: 700;
    padding-bottom: 25px;
    color: #727268;
}

.text-page-content {
    padding-left: 58px;
    color: #684279;
    font-size: 15px;
    padding-right: 58px;
    line-height: 1.8;
}

.text-center {
    text-align: center;
}
/* page-content */

/* page book */
.icon-book {
    width: 50px;
    height: 39px;
    background-repeat: no-repeat;
    background-size: contain;
    text-align: center;
    background-image: url(../images/bac1.png)
}

.size-icon-book {
    font-size: 20px !important;
    padding-top: 6px;
    padding-left: 5px;
    color: #684279;
}

.icon2 {
    margin-right: 10px;
}

.book-section > p > a {
    text-decoration: none;
    color: #ef9f00;
}

.book-section > button:hover {
    background-color: #ef9f00;
    color: #fff;
}

.front#cover {
    /*background-image: url(../images/Group22.png);*/
    font-family: calibri;
    text-align: left;
    background-size: cover;
}

    .front#cover h1 {
        color: #fff;
    }

    .front#cover p {
        color: #ffffff;
        font-size: 17px;
        position: absolute;
        padding: 5px;
        bottom: 0;
        z-index: 9999999999999;
        text-align: center;
        padding-bottom: 23px;
    }

.right.flip {
    background-color: #ffd200;
    border-radius: 0;
}

.backround-text {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 124px;
    background-color: #703978;
}

.right.flip .backround-text {
    display: none !important;
}

.book-section {
    height: auto;
    width: 100%;
    margin-top: 73px;
    text-align: center;
}

    .book-section > .container {
        height: 400px;
        width: 100%;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 2%;
        margin-bottom: 30px;
        perspective: 1200px;
    }

.container > .right {
    position: absolute;
    height: 100%;
    width: 50%;
    transition: 0.7s ease-in-out;
    transform-style: preserve-3d;
}

.book-section > .container > .right {
    right: 0;
    transform-origin: left;
}

.right.flip p {
    display: none !important;
}

.right > figure.front, .right > figure.back {
    margin: 0;
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-size: 200%;
    background-repeat: no-repeat;
    backface-visibility: hidden;
    background-color: white;
    overflow: hidden;
}

.right > figure.front {
    background-position: right;
    border-radius: 0 10px 10px 0;
    box-shadow: 2px 2px 15px -2px rgb(0 0 0 / 5%);
}

.right > figure.back {
    background-position: left;
    border-radius: 10px 0 0 10px;
    box-shadow: 2px 2px 15px -2px rgb(0 0 0 / 5%);
    transform: rotateY(180deg);
}

.flip {
    transform: rotateY(-180deg);
}

    .flip::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        z-index: 10;
        width: 100%;
        height: 100%;
        border-radius: 0 10px 10px 0;
        background-color: rgba(0,0,0,0.1);
    }

.book-section > button {
    font-size: 18px;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    margin: 10px;
    transition: 0.3s ease-in-out;
}

    .book-section > button:focus, .book-section > button:active {
        outline: none;
    }

.turnLeft {
    float: left;
    margin-top: -255px !important;
    z-index: 9999999999999999;
    position: relative;
    margin-left: -25px !important;
    background-color: #703978 !important;
    color: #ffd200 !important;
}

.turnRight {
    float: right;
    background-color: #703978 !important;
    color: #ffd200 !important;
    margin-top: -255px !important;
    z-index: 9999999999999999;
    position: relative;
    margin-right: -25px !important;
}

.Title-corse {
    font-size: 20px;
    margin-top: 16px;
    max-width: max-content;
    background-color: #703978;
    color: #ffd200;
    padding: 8px;
    margin-bottom: 23px;
}

@media screen and (max-width: 991px) {
    .front#cover p {
        color: #ffffff;
        font-size: 12px;
        position: absolute;
        padding: 0px;
        bottom: 0;
        z-index: 9999999999999;
        padding-bottom: 1px;
    }

    .book-section {
        margin-right: 14px;
        height: 65vh;
        width: 100%;
        text-align: center;
        margin-top: 23px;
    }
}

/* book new Start*/

.book {
    height: 400px;
    position: relative;
    perspective: 1500px;
    margin-top: 80px;
}

    .book .page {
        position: absolute;
        top: 0;
        width: 50%;
        height: 100%;
        color: #fff;
        font-size: 80px;
        transition: all .8s ease;
        transform-style: preserve-3d;
        transform: rotateY(0deg);
        backface-visibility: hidden;
        z-index: 1;
    }

        .book .page.left {
            left: 0;
            transform-origin: right;
        }

        .book .page.right {
            right: 0;
            transform-origin: left;
        }

        .book .page.current {
            z-index: 2;
        }

    .book .current.right.page.turn {
        transform: rotateY(-180deg);
    }

    .book .current.left.page.turn {
        transform: rotateY(180deg);
    }

    .book .next.left.page {
        transform: rotateY(180deg);
    }

        .book .next.left.page.turn {
            transform: rotateY(0deg);
        }

    .book .next.right.page {
    }

    .book .prev.right.page {
        transform: rotateY(-180deg);
    }

        .book .prev.right.page.turn {
            transform: rotateY(0deg);
        }

    .book .prev.left.page {
    }

    .book .page {
        color: black;
        /*background-image: url(../images/Group22.png);*/

        background-size: cover;
    }

/*.book .page.a1 {*/
/*background-image: url(../images/Group22.png);*/
/*color: black;
        background-size: cover;
    }

    .book .page.a2 {*/
/*background-image: url(../images/Group22.png);*/
/*color: black;
        background-size: cover;
    }

    .book .page.a3 {*/
/*background-image: url(../images/Group22.png);*/

/*color:black;
        background-size: cover;
    }

    .book .page.a4 {*/
/*background-image: url(../images/Group22.png);*/
/*background-size: cover;
    }

    .book .page.a5 {*/
/*background-image: url(../images/Group22.png);*/
/*background-size: cover;
    }

    .book .page.a6 {*/
/*background-image: url(../images/Group22.png);*/
/*background-size: cover;
    }

    .book .page.a7 {
        background-image: url(../images/Video-1.png);
        background-size: cover;
    }

    .book .page.a8 {
        background-image: url(../images/Group22.png);
        background-size: cover;
    }

    .book .page.a9 {
        background-image: url(../images/Group22.png);
        background-size: cover;
    }

    .book .page.a10 {
        background-image: url(../images/Video-1.png);
        background-size: cover;
    }*/


.btns {
    text-align: center;
    margin: 20px 0;
}

.prev2 {
    float: right !important;
    background-color: #703978 !important;
    color: #ffd200 !important;
    margin-top: -255px !important;
    z-index: 9999999999999999 !important;
    position: relative !important;
    margin-right: -24px !important;
    width: 50px;
    border-radius: 6px;
    height: 46px;
}

.next2 {
    float: left !important;
    margin-top: -255px !important;
    z-index: 9999999999999999 !important;
    position: relative !important;
    margin-left: -24px !important;
    background-color: #703978 !important;
    color: #ffd200 !important;
    width: 50px;
    height: 46px;
    border-radius: 6px;
}

.next {
    height: 100%;
    width: 100%;
    font-size: 17px;
    color: #ffd200 !important;
    background-color: #703978;
    padding-right: 5px;
    padding-left: 5px;
    border: none;
    border-radius: 5px;
}

button.prev {
    height: 100%;
    width: 100%;
    font-size: 17px;
    color: #ffd200 !important;
    background-color: #703978;
    padding-right: 5px;
    padding-left: 5px;
    border: none;
    border-radius: 5px;
}

@media screen and (max-width: 991px) {

    .book {
        height: 283px;
        position: relative;
        margin-top: 40px;
        margin-right: 28px;
    }

    .next2 {
        margin-top: -191px !important;
        margin-left: -22px !important;
    }

    .prev2 {
        margin-top: -191px !important;
        margin-right: 9px !important;
    }
}


/* book new finish*/



/* page Quiz start */
.img-titlt-Quiz {
    width: 100%;
    height: 200px;
    margin-bottom: 20px;
    overflow: hidden;
}

.title-Quiz {
    padding-bottom: 12px;
    font-size: 37px;
    color: #703978;
}

.text-Quiz-1 {
    font-size: 22px;
}

.text-Quiz-2 {
    padding-top: 10px;
    margin-bottom: 0;
    font-size: 26px;
}

.border-Quiz {
    margin-top: 51px;
    text-align: center;
    border: solid 1px #dddddd;
    border-radius: 7px;
    padding: 30px;
}

.icon.walk-icon {
    text-align: center;
}

.img-Quiz {
    width: 100%;
    overflow: hidden;
    border-radius: 5px;
}

.radio-tile-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

    .radio-tile-group .input-container {
        position: relative;
        height: auto;
        width: 14rem;
        margin: 0.5rem;
    }

        .radio-tile-group .input-container .radio-button {
            opacity: 0;
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            margin: 0;
            cursor: pointer;
        }

        .radio-tile-group .input-container .radio-tile {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            border: 2px solid #703978;
            border-radius: 5px;
            padding: 1rem;
            transition: transform 300ms ease;
        }

        .radio-tile-group .input-container .radio-button:checked + .radio-tile {
            background-color: #703978;
            border: 2px solid #703978;
            color: #f4d333;
            transform: scale(1.1, 1.1);
        }

            .radio-tile-group .input-container .radio-button:checked + .radio-tile .icon svg {
                fill: #f4d333;
                background-color: #703978;
            }

            .radio-tile-group .input-container .radio-button:checked + .radio-tile .radio-tile-label {
                color: #f4d333;
                background-color: #703978;
            }

@media screen and (max-width: 991px) {
    .border-Quiz {
        margin-right: 15px;
    }
}
/* page Quiz finish*/

.bdiv:hover {
    width: 200px;
    position: relative;
    overflow: hidden;
    transition: width 0.5s;
}

.bdiv span {
    display: none;
    font-size: 14px;
    margin-right: 7px;
}

.bdiv:hover span {
    display: inline-block;
}

.maken_signature img {
    max-height: 140px;
    max-width: 140px;
}

.img-titlt-Quiz {
    height: auto;
}

.border-Quiz {
    margin: auto;
    background: #fff;
    width: 95%;
    margin-top: 3%;
    padding: 3% 5%;
    padding-right: 0;
}

.book {
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}



/*ahmed update style 24/08*/


.card-family {
    height: 540px;
}


.card-Individual {
    height: 540px;
}

.card-Institutions {
    height: 540px;
}

.Features {
    margin-top: 27%;
}


.div-age-stages {
    padding: 5% 0;
    height: auto;
}

.div-age-stages2 {
    height: auto;
    padding: 5% 0;
}

.button-account {
    background-position: left !important;
}
.account {
    display: inline-block !important;
}

.button-account {
    left: -12px;
}


.border-Quiz {
    margin-right: 39px;
}