@font-face {
    font-family: "Somar";
    src: url("../assets/fonst/alfont_com_SomarGX.ttf");
}

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


:root {
    --main-color: #002F2D;
    --second-color: #303030;
    --third-color: #CCA063;
    --bgcolor: #fff;
}

a {
    text-decoration: none;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.top-nav {
    background-color: var(--main-color);
    padding: 10px 0;
}

.top-nav a {
    color: var(--bgcolor);
    margin: 0 8px;
}

/* --------------- */
/* nav bar  */

.navbar {
    background-color: var(--bgcolor);
    box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.25);
}

.navbar .navbar-brand.big-logo img {
    width: 260px;
}

.navbar .navbar-brand.res-logo img {
    height: 80px;
}

.navbar .navbar-nav a {
    font-size: 18px;
    padding: 8px 4px !important;
    margin: 0 8px;
    color: var(--main-color);
    font-weight: 700;
    text-align: center;

}

.navbar .search-form {
    height: 50px;
    border-radius: 30px;
    border: 1px solid rgba(0, 47, 45, 0.4);
}

.navbar .search-form button {
    background-color: transparent;
    border: none;
    color: var(--second-color);
    width: 40px;
    outline: none;
    box-shadow: none;
}

.navbar .search-form input {
    width: 100%;
    border: none;
    outline: none;
    box-shadow: none;
    margin: 0;
    background-color: transparent;
}

.navbar .notif,
.navbar .a-lang {
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
    box-shadow: none;
}

.navbar .notif span {
    top: 8px;
    right: 15px;
    padding: 6px;
}

.navbar .a-lang {
    width: 35px;
    height: 35px;
}

.navbar .a-lang img {
    width: 100%;
    height: 100%;
    border-radius: 3px;
}

.navbar .navbar-toggler {
    color: var(--main-color);
    font-size: 25px;
    border-color: var(--main-color);
}

.navbar .navbar-toggler:focus {
    box-shadow: none;
}

@media (min-width: 992px)and (max-width: 1399px) {
    .navbar .container {
        max-width: 98% !important;
    }
}

@media (max-width: 992px) {
    .navbar .res-nav {
        width: 100% !important;
    }
}

/* -------------------------------------- */
/* footer  */
footer {
    background-color: var(--main-color);
    color: var(--bgcolor);
}

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

footer ul li {
    margin: 16px 0;
    font-size: 16px;
}

footer ul li a {
    color: var(--bgcolor);
}

footer ul li a:hover {
    color: #b0b0b0;
}

footer .social a {
    width: 30px;
    height: 30px;
    color: var(--bgcolor);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px;
}

footer .copywrite {
    background-color: var(--bgcolor);
    color: var(--main-color);
    padding: 20px;
}

/* -------------------------------- */
/* hero sec  */
/* hero_sec  */
.hero_sec .container {
    background-color: var(--second-bgcolor);
    border-radius: 25px;
}

.hero_sec h1 {
    font-weight: 700;
    color: var(--second-color);
}

.hero_links a {
    border: 1px solid #767676;
    ;
    padding: 10px 20px;
    border-radius: 5px;
    color: #767676;
    text-align: center;
    margin-bottom: 16px;
}

.hero_links a:first-child {
    background-color: var(--main-color);
    color: var(--bgcolor);
    border-color: var(--main-color);
}

/* -------------------------------------------- */
/* research sec  */
.research-sec .res-ron {
    font-size: 20px;
    width: 170px;
    display: flex;
    text-align: center;
    justify-content: center;
    color: var(--main-color);
    padding: 10px;
    background: rgba(0, 47, 45, 0.1);
    border-radius: 30px;
}

.research-sec .res-bot {
    border: 1px solid var(--main-color);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    padding: 10px;
    border-radius: 5px;
    background-color: var(--main-color);
    color: var(--bgcolor);
    text-align: center;
}

/* ---------------------------------------- */
/* sercvices sec  */

.services .owl-carousel .owl-stage-outer {
    padding: 16px 0;
}

.services .service {
    box-shadow: 0px 13px 19px rgba(0, 0, 0, 0.07);
    border-radius: 20px;
    padding: 35px;
    direction: rtl;
    min-height: 100%;
}

.owl-carousel .owl-stage {
    display: flex;
}

.services .service img {
    width: 70px;
    height: 76px;
    margin-bottom: 20px;
}

.services .service hr {
    color: #CCA063;
    width: 50px;
    height: 2px;
    opacity: 1;
}

.services .owl-dots,
.opinions .owl-dots {
    margin: 16px;
}

.services .owl-dots .owl-dot,
.opinions .owl-dots .owl-dot {
    width: 24px;
    height: 24px;
    border: 1px solid var(--main-color);
    margin: 5px;
    border-radius: 50%;
}

.services .owl-dots .owl-dot.active,
.opinions .owl-dots .owl-dot.active {
    background-color: var(--main-color);
    width: 45px;
    border-radius: 16px;

}

/* ---------------------------------- */
/* opinions sec  */
.opinions .owl-carousel .owl-stage-outer {
    padding: 16px 0;
}

.opinions .opinion {
    box-shadow: 0px 13px 19px rgba(0, 0, 0, 0.07);
    border-radius: 20px;
    padding: 35px;
    direction: rtl;
    min-height: 100%;
}

.opinions .opinion img {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    margin: 20px auto;
}

.P-rate span {
    margin-left: 8px;
}

.P-rate span.str-fill {
    color: #F59E0B;
}

.P-rate span.str-emp {
    color: #D8D8D8;
}

/* -------------------- */
/* support sec  */

.support .supportImg {
    box-shadow: 0px 14.4473px 21.1152px rgba(0, 0, 0, 0.07);
    border-radius: 22px;
}

.support .supportImg img {
    width: 100%;
    height: 100%;
}

/* ----------------------------- */
/* plans sec  */


.plans .single_plan {
    height: 100%;
    border-radius: 5px;
    box-shadow: 0px 0px 8px rgba(10, 116, 243, 0.25);
    min-height: 700px;
    position: relative;
}

.plans .single_plan .plan-head {
    height: 150px;
    background-color: var(--main-color);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    color: var(--bgcolor);
    padding: 20px;
    position: relative;
    margin-bottom: 110px;
}

.plans .single_plan .plan-head .head-circle {
    position: absolute;
    width: 140px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: var(--main-color);
    border-radius: 50%;
    border: 5px solid var(--bgcolor);
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}


.plans .single_plan .plan_options {
    margin: 0;
    padding: 0;
    list-style: none;
}

.plans .single_plan .plan_options .option_item {
    display: flex;
    align-items: center;
    padding: 10px;
    font-weight: 500;
    font-size: 18px;
    color: var(--main-color);
}

.plans .single_plan .plan_options .option_item.ava {
    background-color: #F5F5F5;
}

.plans .single_plan .plan_options .option_item .check_con {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 16px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--main-color);
    color: var(--bgcolor)
}

.plans .single_plan a {
    padding: 12px;
    text-align: center;
    width: 90%;
    font-size: 18px;
    display: block;
    margin: 20px auto;
    border-radius: 5px;
    color: var(--main-color);
    border: 1px solid var(--main-color);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0px;
}

.color-white{
    color: var(--bgcolor) !important;
}


.plans .single_plan a:hover {
    background-color: var(--main-color);
    color: var(--bgcolor);
}

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

.cont-form form {
    width: 100%;
}

.cont-form form input {
    height: 50px;
    border: 1px solid #DEE2FA;
    border-radius: 10px;
    width: 100%;
    text-align: end;
    padding: 10px;
    outline: none;
    box-shadow: none;

}

.cont-form form button {
    color: var(--bgcolor);
    background-color: var(--main-color);
    border: none;
    padding: 8px 30px;
    border-radius: 10px;
}

.gold {
    color: #CCA063;
}

/* --------------------------- */
.projects-page .search-con {
    border: 1px solid #767676;
    border-radius: 5px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.projects-page .search-con button {
    border: none;
    background-color: transparent;
    height: 100%;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    color: #767676;
    border-radius: 5px;
}

.projects-page .search-con input {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    box-shadow: none;
    padding: 10px;
    border-radius: 5px;
}

.form-check-label {
    cursor: pointer;
}

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

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

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

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

}

.projects-page .filter-group {
    max-height: 300px;
    overflow: auto;
}

.projects-page .clear-all {
    text-decoration: underline;
    border: none;
    background-color: transparent;
}

/* width */
::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 5px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #999;
}


.projects-page .project-card {
    border-radius: 18px;
    padding: 20px;
    background: #FFFFFF;
    box-shadow: 0px 46.2001px 92.4002px -30.8001px rgba(15, 15, 15, 0.1);

}

.projects-page .project-card img {
    width: 100% !important;
    height: 250px;
    border-radius: 10px;
    margin-bottom: 20px;
}

.mainbtn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bgcolor);
    border-radius: 10px;
    height: 50px;
    background-color: var(--main-color);
    border: none;
}

.mainbtn:hover {
    color: var(--bgcolor);
}

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

/* project page  */
.project-page .pro-title {
    position: relative;
    margin-bottom: 50px;
}

.project-page .title-bottom {
    height: 40px;
    position: absolute;
    background-color: rgba(0, 47, 45, 0.4);
    width: 100%;
    bottom: -30px;
}

/* ------------------ */
/* pay page  */
.pay-page .form-check {
    border: 1px solid #C4C4C4;
    height: 50px;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
}

.pay-page .form-check:nth-child(3) {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.pay-page .form-check:n {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.pay-page .form-check:nth-child(2) {
    border-top: none;
    border-bottom: none;
}

.pay-page .form-check-input[type=radio] {
    width: 25px;
    height: 25px;
    margin-right: 10px;
}

.pay-page .form-check label {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    padding-right: 16px;
    font-size: 18px;
}

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

.formInput:focus,
.formInput:hover {
    outline: none;
    box-shadow: none;
}

.pay-page hr {
    height: 2px;
    color: #767676;
    opacity: .7;

}

.paymodal .modal-content {
    border-radius: 10px;

}

/* ---------------------- */
/* about page  */

.about-page .feature {
    background: #FFFFFF;
    box-shadow: 0px 17.9835px 58.4464px -8.99176px rgba(20, 20, 20, 0.15), 0px 17.9835px 20.2315px -11.2397px rgba(20, 20, 20, 0.06);
    border-radius: 35px;
    height: 100%;
    padding: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    padding-bottom: 180px;
}

.about-page .feature .f-imgcon {
    width: 112px;
    height: 112px;
    background-color: var(--main-color);
    border-radius: 50%;
    margin: 30px auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-page .feature a {
    text-decoration: underline;
    color: var(--second-color);
}

.about-page .feature .feat-bottom {
    height: 165px;
    background-color: var(--main-color);
    border-bottom-left-radius: 35px;
    border-bottom-right-radius: 35px;
    margin-top: 20px;
    position: absolute;
    bottom: 0;
    width: 100%;
}

/* ----------------------------- */
/* contact page  */
.conatct-page .number-con {
    width: 80px;
    height: 42px;
    border: 1px solid #303030;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: bold;
    margin-left: 16px;
}

.conatct-page .input-con label {
    font-weight: bold;
    font-size: 24px;

}

.conatct-page .input-con input {
    border: none;
    width: 100%;
    border-bottom: 1px solid #767676;
    height: 45px;
    outline: none;
    box-shadow: none;
}

.conatct-page button {
    width: 150px;
    height: 50px;
    background: var(--bgcolor);
    border: 1px solid var(--main-color);
    border-radius: 8px;
    font-size: 18px;
}

.conatct-page button:hover {
    background-color: var(--main-color);
    color: var(--bgcolor);
}

/* -------------------- */
/* help page */

.help-page .help-head a {
    color: var(--main-color);
    font-size: 18px;
    text-decoration: underline;
    margin-bottom: 20px;
    display: inline-block;

}

.help-page .loadmore {
    color: var(--main-color);
    font-size: 18px;
    margin-bottom: 20px;
    display: inline-block;

}

.ask-more {
    color: var(--bgcolor);
    background-color: var(--main-color);
    border-radius: 20px;
}

.join-us a,
.ask-more a {
    width: 162px;
    height: 56px;
    background: #FFFFFF;
    border: 1px solid #002F2D;
    border-radius: 8px;
    color: var(--main-color) !important;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.join-us a {
    background-color: var(--main-color);
    color: var(--bgcolor) !important;

}

/* ------------------------------------------ */
/* signup page  */

.signup-page .signup-logo {
    width: 150px;

}

.signup-page form {
    border: 1px solid #D9D9D9;
    border-radius: 20px;
}

.signup-page .inputform {
    border: 1px solid #989898;
    border-radius: 10px;
    height: 50px;
    width: 100%;
    outline: none;
    box-shadow: none;
    padding: 16px;
    font-size: 18px;

}

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

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

.signup-page .input-group.inputform input,
.signup-page .input-group.inputform select {
    border-radius: 10px;
    border: none;
    outline: none;
    box-shadow: none;
    font-size: 18px;
    padding-right: 0;

}

.signup-page .input-group.inputform span {
    padding: 16px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border: none;
    background-color: transparent;
    color: #767676;
}

.signup-page .form-label {
    font-weight: bold;
    width: 100%;
    text-align: start;
    font-size: 20px;
    margin-bottom: 10px;
}

.signup-page form .forget {
    color: var(--third-color);
    text-decoration: underline;
}

.signup-page form .form-submit {
    width: 250px;
    height: 50px;
    background: var(--third-color);
    border-radius: 8px;
    color: var(--bgcolor);
    border: 1px solid var(--third-color);
    font-size: 18px;
}

.signup-page .lines {
    position: relative;
}

.signup-page .lines .abs-line,
.signup-page .lines .abs-line2 {
    position: absolute;
    background: linear-gradient(270.02deg, #000000 0.07%, rgba(0, 0, 0, 0) 100.02%);
    height: 2px;
    width: 50%;
    left: 0;
    top: 50%;
    z-index: -1;
}

.signup-page .lines .abs-line2 {
    transform: rotate(180deg);
    right: 0;
}

.signup-page .lines p {
    font-size: 20px;
    background-color: var(--bgcolor) !important;
    display: inline-block;
    margin: 0;
    padding: 10px 20px;
    z-index: 2;
}

.signup-page .trans-link {
    width: 250px;
    height: 50px;
    background: var(--bgcolor);
    border-radius: 8px;
    color: var(--third-color);
    border: 1px solid var(--third-color);
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.signup-page .sing-soical a {
    width: 55px;
    height: 55px;
    border: 1px solid #D9D9D9;
    border-radius: 8px;
    margin: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.otpmodal .modal-content {
    border-radius: 10px;
}

.otpmodal input {
    border: none;
    outline: none;
    box-shadow: none;
    width: 65px;
    height: 67px;
    background: #D9D9D9;
    border-radius: 10px;
    padding: 10px;
    font-size: 30px;
    text-align: center;

}

.otpmodal button {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 250px;
    height: 50px;
    background: #CCA063;
    border-radius: 8px;
    color: var(--bgcolor);
    border: none;

}
.e-library {
    position: relative;
}

.e-library span {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -12px;
    color: #ff4747;
    text-align: center;
}

@media (max-width:992px) {
    .e-library span {
        position: absolute;
        right:10px ;
        transform: translateX(10px);
        top: 7px;
        color: #ff4747;
}

}
.soon_span {
    color: #ff4747;

}