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

:root {
    --main-color: #003A74;
    --second-color: #F5D13D;


}

a {
    text-decoration: none;
}




/* ------------------------ */
/* nav-bar */
.top-nav {
    background-color: var(--main-color);
}

.top-nav ul {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    justify-content: flex-end;
}

.top-nav .btn-group {
    color: #fff;
}

.top-nav ul li a {
    font-weight: 400;
    line-height: 25px;
    letter-spacing: 0em;
    color: #fff;
}


/* ------------------------ */
/* navbar */
.navbar .navbar-toggler {
    border-color: #fff;
    color: #fff;
}

.navbar {
    background-color: #fff;
    box-shadow: 0px 4px 4px 0px #00000040;

}

.navbar .navbar-brand {
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 94px;
    height: 79px;
    border-radius: 4px;
    padding: 10px;
}

.navbar .navbar-brand img {
    width: 100%;
    height: 100%;
}

.nav-search {
    background-color: #fff;
    border-radius: 2px;
    height: 40px;
    margin: 8px;
}

.nav-search button {
    padding: 5px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border: none;
}

.nav-search input {
    width: 100%;
    height: 100%;
    outline: none;
    background-color: transparent;
    box-shadow: none;
    border: none;
}

.navbar .nav-link {
    margin: 0 8px;
    padding: 8px 0px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    font-weight: 400;
    line-height: 23.44px;
    letter-spacing: 0.20000000298023224px;
    text-align: center;
    color: #00000099;
}

.navbar .nav-link.active {
    color: var(--main-color);
    border-bottom: 2px solid var(--main-color);

}

.nav-left a {
    margin: 0 8px;
    padding: 8px 12px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 300;
    line-height: 20px;
    border: 1px solid #fff;
    border-radius: 2px;
    color: #fff;
}

.nav-left a.login-link {
    background: #FFFFFF1A;
    color: #fff;
    border-color: transparent;
}

.lang-drop .dropdown-toggle {
    background-color: #fff;
    border: none;
    padding: 6px 10px;
    border-radius: 2px;
    color: var(--main-color);
    height: 40px;
}

.lang-drop .dropdown-menu {
    min-width: 55px;
}

.search-from {
    border: 1px solid #003A7466;
    border-radius: 50px;
}

.search-from button {
    border: none;
    background-color: transparent;
    color: var(--main-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-from .form-control {
    outline: none;
    border: none;
    box-shadow: none;
    border-radius: 50px;
}

.nav-left .reserve-btn {
    border-radius: 0px 16px 0px 16px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 300;
    line-height: 23.44px;
    text-align: right;
    padding: 10px 20px;
    color: #fff;
    background-color: var(--main-color);
    border: none;
    white-space: nowrap;
}

/* ------------------------------ */
footer {
    color: #fff;
    background-color: var(--main-color);
    position: relative;
}

footer .footer-social {
    background-color: #fff;
    overflow: hidden;
}

footer .left-img-con {
    right: 0;
    top: -77px;
}

footer .footer-top {
    box-shadow: 4px -4px 4px 0px #00000040;
    background-color: #fff;
    color: var(--main-color);

}

footer .footer-top h5 {
    font-size: 27px;
    font-weight: 700;
    line-height: 28px;
    letter-spacing: 0em;
    margin-bottom: 20px;
}

footer .footer-top p {
    font-size: 21px;
    font-weight: 400;
    line-height: 25px;
    letter-spacing: 0em;
}

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

footer .footer-top ul li {
    margin: 20px 0;
}

footer .footer-top ul a {
    font-size: 24px;
    font-weight: 300;
    line-height: 26.78px;
    letter-spacing: 0.20000000298023224px;
    color: var(--main-color);
}

.copy-write h5 {
    font-size: 22px;
    font-weight: 400;
    line-height: 28px;
    letter-spacing: 0em;
}

/* ------------------------ */
.main-color {
    color: var(--main-color);
}

.second-color {
    color: #00E4FF;
}

/* hero sec */
.hero_sec .hero-data h1 {
    font-size: 43px;
    font-weight: 300;
    line-height: 47.99px;
    letter-spacing: 0.20000000298023224px;
}

.hero_sec .hero-data h4 {
    font-size: 27px;
    font-weight: 300;
    line-height: 40px;
    letter-spacing: 0.20000000298023224px;
    color: #00000080;

}

.hero_sec .hero-data a {
    border-radius: 16px 0px 16px 0px;
    border: 1px solid var(--main-color);
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    font-weight: 300;
    line-height: 23.44px;
    text-align: right;
    margin: 16px 0;
    padding: 10px 25px;
    color: var(--main-color);
}

.hero_sec .hero-data a.active-hero {
    border-color: var(--main-color);
    background-color: var(--main-color);
    color: #fff;
}

/* ------------------------- */

.section-title {
    font-family: Almarai;
    font-size: 43px;
    font-weight: 400;
    line-height: 47.99px;
    letter-spacing: 0.20000000298023224px;
    text-align: center;
    color: var(--main-color);
    text-decoration: underline;
}

.sec-title {
    background: #003A741A;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0px 16px 0px 16px;
    font-size: 30px;
    font-weight: 300;
    line-height: 47.99px;
    letter-spacing: 0.20000000298023224px;
    color: var(--main-color);
    padding: 8px 30px;
    width: fit-content;
    margin: auto;
}

.new_paln {
    border: 1px solid #DADADA;
    border-radius: 24px;
    background-color: #fff;
}

.new_paln .plan_name {
    height: 48px;
    padding: 11px 32px 10px 31px;
    border-radius: 0px 16px 0px 16px;
    background-color: var(--main-color);
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    color: #fff;
    font-size: 21px;
}

.new_paln .plan_des {
    text-align: start;
    color: #00000080;
}

.new_paln .plan_pric {
    font-size: 18px;
    font-weight: 300;
    line-height: 26.78px;
    letter-spacing: 0.20000000298023224px;
    text-align: start;
}

.new_paln .features_list {
    text-align: start;
    list-style: none;
    padding: 16px 0;
    border-bottom: 1px solid #DADADA;
    border-top: 1px solid #DADADA;
}

.new_paln .features_list li {
    display: flex;
    align-items: center;
    justify-content: start;
    color: #00000099;
    font-size: 17px;
    font-weight: 400;
}

.new_paln .more-link {
    height: 48px;
    gap: 0px;
    border-radius: 0px 16px 0px 16px;
    border: 1px solid var(--main-color);
    color: var(--main-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    font-weight: 300;
    line-height: 23.44px;
}

.new_paln .more-link:hover {
    background-color: var(--main-color);
    color: #fff;
}

.new_paln.recommend_plan {
    background: linear-gradient(180deg, #003A74 0%, #006DDA 100%);
    color: #fff;
}

.new_paln.recommend_plan .plan_name {
    background: #fff;
    color: var(--main-color);
}

.new_paln.recommend_plan .more-link {
    background: #fff;
    color: var(--main-color);
    border-color: #fff;
}

.new_paln.recommend_plan .more-link:hover {
    background: var(--main-color);
    color: #fff;
    border: var(--main-color);
}

.new_paln.recommend_plan .features_list li {
    color: #ffff;
}

.new_paln.recommend_plan .plan_des {
    color: #ffffff71;
}

.package-nav .nav-link {
    height: 45px;
    padding: 10px 25px;
    border-radius: 0px 14.87px 0px 14.87px;
    font-size: 20px;
    font-weight: 300;
    line-height: 22.32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #003A74;
    color: var(--main-color);
    background-color: #fff;

}

.package-nav .nav-link.active {
    background-color: var(--main-color);
}




.main_plan_card {
    border: 1px solid var(--main-color);
    border-radius: 16px;
    color: var(--main-color);
}

.main_plan_card h4 {
    font-size: 43px;
    font-weight: 300;
    line-height: 47.99px;
}

.customer_plan_card ul,
.main_plan_card ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: start;
}

.customer_plan_card li,
.main_plan_card li {
    font-size: 24px;
    font-weight: 300;
    line-height: 37.94px;
    letter-spacing: 0.20000000298023224px;
    text-align: right;
    margin: 8px 0;
}

.main_plan_card .more-link {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Almarai;
    font-size: 20px;
    font-weight: 300;
    line-height: 26.78px;
    background-color: var(--main-color);
    border-radius: 16px;
    padding: 8px;
    color: #fff;
}

.main_plan_card.active_plan {
    color: #fff;
    background-color: var(--main-color);


}

.main_plan_card.active_plan .more-link {
    background-color: #fff;
    color: var(--main-color);
}

.customer_plan_card {
    border-radius: 16px;
    background-color: #003A741A;
    color: var(--main-color);
}

.customer_plan_card h4 {
    border-radius: 16px 16px 0 0;
    font-size: 24px;
    font-weight: 400;
    line-height: 26.78px;
    letter-spacing: 0.20000000298023224px;
    background-color: var(--main-color);
    color: #fff;
    padding: 24px 0;
}

.customer_plan_card p {
    font-size: 17px;
    font-weight: 400;
    line-height: 18.97px;
    letter-spacing: 0.20000000298023224px;
}

.customer_plan_card .more-link {
    background-color: var(--main-color);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border-radius: 16px;
    color: #fff;
}

.text-content {
    font-weight: 300;
    line-height: 48px;
    letter-spacing: 0.20000000298023224px;
    text-align: center;
    color: #1E1E1E;
}

/* --------------------------- */
.vesion_sec li {
    font-size: 28px;
    font-weight: 300;
    line-height: 37.94px;
    letter-spacing: 0.20000000298023224px;
    color: var(--main-color);
    margin: 16px 0;
}

/* ----------------- */
/* goals_sec */

.goals_sec {
    background-color: var(--main-color);
}

.goals_sec .sec-title {
    background-color: #fff;
}

.goal_card {
    aspect-ratio: 1/1;
    border-radius: 50%;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 300;
    line-height: 32px;
    letter-spacing: 0.20000000298023224px;
    color: var(--main-color);
}

/* ---------------- */
.contact_form {
    border: 3.58px solid #003A741A;
    border-radius: 50px;
    background-color: #fff;
    box-shadow: 0px 0px 20px 0px #4CAF501A;

}

.contact-submit {
    border-radius: 0px 16px 0px 16px;
    padding: 8px 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    font-size: 20px;
    font-weight: 300;
    line-height: 37.94px;
    letter-spacing: 0.20000000298023224px;
    text-align: center;
    color: #fff;
    background-color: var(--main-color);

}

/* --------------------------- */
/* register page  */
.register_sec .form-con {
    min-height: calc(100vh - 70px);
}

.register_sec .login-top {
    left: 0;
    top: 0;
}

.register_sec .login-bottom {
    right: 0;
    bottom: 0;
}

.register_sec h1 {
    font-size: 50px;
    font-weight: 700;
    line-height: 70px;
    letter-spacing: 0em;
}

.register_sec .register_box {
    border: 3.58px solid #003A741A;
    box-shadow: 0px 0px 20px 4px #4CAF501A;
    border-radius: 50px;
    background-color: #fff;

}

.inputform {
    border: 1px solid #777777;
    border-radius: 50px;
    height: 50px;
    width: 100%;
    outline: none;
    box-shadow: none;
    padding: 16px;
}

textarea.formInput,
textarea.inputform {
    height: 100px;
    border-radius: 16px;
    resize: none;
}

.inputform:focus {
    outline: none;
    box-shadow: none;
}


.input-group.inputform {
    padding: 0;
}

.input-group.inputform input,
.input-group.inputform select {
    border-radius: 10px;
    border: none;
    outline: none;
    box-shadow: none;
    padding-right: 0;
    font-size: 20px;
    font-weight: 400;
    line-height: 32px;
    letter-spacing: 0em;

}

.input-group.inputform input::placeholder {
    color: #D9D9D9;
    font-size: 20px;
}

.input-group.inputform input {
    border-radius: 50px;
}

.input-group.inputform span {
    padding: 16px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border: none;
    background-color: transparent;
    color: var(--second-color);
}

.register_sec .submit-btn {
    background-color: var(--main-color);
    color: #fff;
    height: 50px;
    border-radius: 0px 16px 0px 16px;
    width: 300px;
    border: none;
    font-size: 20px;
    font-weight: 700;
    line-height: 41px;
    letter-spacing: 0em;
    display: flex;
    align-items: center;
    justify-content: center;

}

.redirect-link {
    color: var(--main-color);
    font-size: 28px;
    font-weight: 700;
    line-height: 41px;
    letter-spacing: 0em;
    text-decoration: underline;
}


.form-check {
    text-align: start;
}

.form-check-label {
    font-size: 24px;
    font-weight: 400;
    line-height: 32px;
    letter-spacing: 0em;
    color: #ccc;
    display: flex;
    align-items: center;

}

.form-check-label a {
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
    letter-spacing: 0em;
    text-decoration: underline;
    color: var(--second-color);
}

.form-check-input {
    cursor: pointer;
    outline: none;
    border-color: #ccc;
    width: 22px;
    height: 22px;
}

.form-check-input:focus {
    box-shadow: none;
}

.form-check-input[type=checkbox] {
    outline: none;
}

.form-check-input[type=checkbox]:checked {
    background-color: var(--second-color);
    border-color: var(--second-color);

}

.social-media-footer {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;

}

.social-media-footer a {
    color: #003A74;
    text-decoration: none;
}

.social-media-footer .separator {
    color: #003A74;
    margin: 0 5px;
}

/* ------------------ */

/* plan page  */

.plan_page ul {
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: start;
}

.plan_page ul li {
    font-size: 28px;
    font-weight: 300;
    line-height: 37.94px;
    letter-spacing: 0.20000000298023224px;
    text-align: right;
    color: #00000099;
    margin: 16px 0;
}

.plan_dates {
    box-shadow: 0px 4px 20px 0px #00000080;
    border-radius: 16px;
    color: var(--main-color);
}

.plan_action {
    border-radius: 0px 16px 0px 16px;
    text-align: start;
}

.plan_action a {
    background-color: var(--main-color);
    color: #fff;
    border-radius: 0px 16px 0px 16px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-width: 250px;
    font-size: 24px;
    font-weight: 300;
    line-height: 47.99px;
    letter-spacing: 0.20000000298023224px;
    border: 1px solid var(--main-color);
}

.plan_action a.chang_plan {
    color: var(--main-color);
    background-color: #fff;

}

/* ---------------- */
/* services_page */
.services_title {
    font-weight: 300;
    line-height: 47.99px;
    letter-spacing: 0.20000000298023224px;
    text-align: right;
    color: var(--main-color);
    text-decoration: underline;
}

.services_list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.services_list li {
    font-size: 24px;
    font-weight: 300;
    letter-spacing: 0.20000000298023224px;
    color: #00000080;
    margin: 14px 0;

}

.service-col {
    background: #003A741A;
    display: flex;
    align-items: center;
    height: 100%;
    color: #fff;
    font-size: 22px;
    font-weight: 300;
    line-height: 18.97px;
    letter-spacing: 0.20000000298023224px;
    text-align: right;
    padding: 8px 16px;
    border-radius: 16px;
    color: var(--main-color);

}

.feature_box ,
.service_box {
    border: 1.16px solid #E5E5E5;
    background-color: #F7F7F8;

}

.feature_box .service-bg ,
.service_box .service-bg {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.feature_box .service-bg img ,
.service_box .service-bg img {
    width: 100%;
    height: 100%;
}

.service_box h4 {
    color: #00E4FF;
    font-size: 34px;
    font-weight: 300;
    line-height: 37.94px;
    letter-spacing: 0.20000000298023224px;
    text-align: center;
}

.feature_sub {
    font-size: 32px;
    font-weight: 300;
    line-height: 47.99px;
    letter-spacing: 0.20000000298023224px;
    text-align: right;
}

.feature_box  h4{
    font-size: 28px;
    font-weight: 300;
    line-height: 42px;
    letter-spacing: 0.20000000298023224px;
}

/* ------------------- */
/* blogs_page */

.blog_con {
    box-shadow: 0px 4px 20px 0px #00000080;
    border-radius: 16px;
}


/* ------------ */
/* about us  */

.about-us {
    min-height: 500px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    min-height: 700px;
}

@media (max-width: 768px) {
    .about-us {
        min-height: auto;
        background: linear-gradient(91.47deg, #003A74 15.15%, #006DDA 95.39%);
    }
}

.about-des {
    font-size: 34px;
    font-weight: 400;
    line-height: 48px;
    letter-spacing: 0.20000000298023224px;
    text-align: center;
    color: #fff;
    padding: 0;
    margin: 0;
}

.background-con {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-width: 100%;
    height: 100%;
}

.background-con img {
    width: 100%;
    height: 100%;
}

/* ------------------ */
/* partners_sec */
.landing-owl .owl-stage-outer {
    box-shadow: 0px 4px 12px 0px #00000040;
    background-color: #fff;
    border-radius: 200px;
    padding: 24px 0;
    width: 100%;
}

.services-owl .owl-stage,
.landing-owl .owl-stage {
    display: flex;
}

.services-owl .owl-item img,
.landing-owl .owl-item img {
    width: auto !important;
}

.landing-owl .client-con,
.landing-owl .partner-con {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.services-owl .owl-dots,
.landing-owl .owl-dots {
    margin: 24px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.services-owl .owl-dots .owl-dot,
.landing-owl .owl-dots .owl-dot {
    width: 16px;
    height: 16px;
    background: #003A741A;
    border-radius: 50%;
    margin: 8px;
}

.services-owl .owl-dots .owl-dot.active,
.landing-owl .owl-dots .owl-dot.active {
    background: #003A74;
}

/* --------------------- */
/* opinions_sec */
.opinion_card .card-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;

}

.opinion_card .card-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.opinion_card h4 {
    font-size: 32px;
    font-weight: 400;
    line-height: 44.64px;
    color: #fff;
}

.opinion_card h5 {
    font-size: 22px;
    font-weight: 400;
    line-height: 31.25px;
    color: #00E4FF;

}

/* ------------ */
/* services_sec */
.service-card {
    border: 1px solid #D9D9D9;
    border-radius: 3px;
}

.service-card .service-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: end;
}

.service-card .service-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.service-card .service-logo {
    height: 60px;
}

.service-card h5 {
    color: #00000080;
    font-size: 34px;
    font-weight: 300;
    line-height: 37.94px;
    letter-spacing: 0.20000000298023224px;

}

/* -------------------- */
/* our_numbers */

.numbers_area {
    box-shadow: 0px 4px 12px 0px #00000040;
    border-radius: 200px;
}

.numbers_area .number-card p {
    color: #06E1FF;
    font-size: 40px;
    font-weight: 400;
    line-height: 47.99px;
    letter-spacing: 0.20000000298023224px;
    text-align: center;

}

.numbers_area .number-card h5 {
    font-size: 43px;
    font-weight: 300;
    line-height: 47.99px;
    letter-spacing: 0.20000000298023224px;
    color: var(--main-color);

}

.body-left {
    top: 0;
    left: 0;
}

/* ------------------ */
/* payment page  */

.formInput {
    border: 1px solid #777777;
    border-radius: 16px;
    width: 100%;
    outline: none;
    box-shadow: none;
    height: 50px;
    font-size: 20px;
    padding: 16px;
}

.formInput::placeholder {
    color: #D9D9D9;
}

.pay-selection-title {
    background: #003A741A;
    border-radius: 8px;
    font-size: 20px;
    font-weight: 400;
    color: var(--main-color);
}

.pay-selection {
    box-shadow: 0px 4px 10px 0px #00000040;
    border-radius: 16px;

}

.pay-way-select .form-check {
    align-items: center;
    display: flex;
}

.pay-way-select .form-check .form-check-label {
    cursor: pointer;
}

.pay-way-select .form-check-input:checked {
    background-color: var(--main-color);
}

.summery_box {
    border: 1px solid #DADADA;
    border-radius: 16px;
    background-color: #fff;
}

.summery_box hr {
    opacity: 1;
    border-color: #DADADA;
}

.pay-btn {
    background-color: var(--main-color);
    color: #fff;
    border-radius: 0px 16px 0px 16px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-width: 250px;
    font-size: 24px;
    font-weight: 300;
    line-height: 47.99px;
    letter-spacing: 0.20000000298023224px;
    border: 1px solid var(--main-color);
}

.loading-modal .modal-content,
.loading-modal .modal-body{
    background-color: transparent;
    border: none;
}