* {
    box-sizing: border-box;
}

:root {
    --primary-color: #F64DD1;
    --primary-color-50: #F64DD180;
    --primary-color-25: #F64DD140;
    --second-color: #0BE7F7;
    --third-color: #27ADE3;
    --fourth-color: #002D84;
    --fourth-color-75: #002D84BF;
    --basic-dark: #2C2C2C;
    --basic-dark-50: #2C2C2C80;
    --basic-dark-75: #2C2C2CBF;
    --basic-light: #FEFEFE;
    --basic-light-25: #FEFEFE40;
    --basic-light-75: #FEFEFEBF;
    --section-padding: 60px;
}

ul,
li {
    list-style: none;
}

a {
    text-decoration: none;
}

body {
    font-family: "Almarai", sans-serif;
}

input::placeholder {
    padding-bottom: 5px;
}

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

/* Start Color */
.text-color-primary {
    color: var(--primary-color);
}

.text-color-second {
    color: var(--second-color);
}

.text-color-third {
    color: var(--third-color);
}

.text-color-fourth {
    color: var(--fourth-color);
}

.text-color-light {
    color: var(--basic-light);
}

.text-color-light-75 {
    color: var(--basic-light-75);
}

.text-color-dark-50 {
    color: var(--basic-dark-50);
}

.text-color-dark-75 {
    color: var(--basic-dark-75);
}

/* End Color */
/* Start Background */
.basic-light-75 {
    background-color: var(--basic-light-75);
}

/* End Background */
/* Start Shadow */
.primary-shadow {
    box-shadow: 0px 2px 8px 0px var(--primary-color-25);
    -moz-box-shadow: 0px 2px 8px 0px var(--primary-color-25);
    -o-box-shadow: 0px 2px 8px 0px var(--primary-color-25);
    -ms-box-shadow: 0px 2px 8px 0px var(--primary-color-25);
    -webkit-box-shadow: 0px 2px 8px 0px var(--primary-color-25);
}

.sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    animation: sticky 1s
}

/* End Shadow */
/* Start Ready Button */
.primary-btn,
.primary-btn-fill,
.fourth-btn,
.basic-light-btn {
    padding: 0.8em 1.2em;
    background-color: transparent;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: all .3s linear;
    font-weight: 400;
    border: 1px solid;
    font-family: inherit;
    text-transform: uppercase;
    z-index: 1;
}

.primary-btn {
    color: var(--primary-color);
}

.primary-btn-fill {
    color: var(--basic-light);
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.basic-light-btn {
    color: var(--basic-light);
}

.fourth-btn {
    color: var(--basic-light);
    background-color: var(--fourth-color);
    border: none;
}

.primary-btn::before,
.primary-btn::after,
.primary-btn-fill::before,
.primary-btn-fill::after,
.fourth-btn::before,
.fourth-btn::after,
.basic-light-btn::before,
.basic-light-btn::after {
    content: '';
    position: absolute;
    display: block;
    width: 50px;
    height: 50px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    z-index: -1;
    transition: 1s ease;
}

.primary-btn::before,
.primary-btn::after {
    background-color: var(--primary-color);
}

.primary-btn-fill::before,
.primary-btn-fill::after {
    background-color: var(--fourth-color-75);
}

.fourth-btn::before,
.fourth-btn::after {
    background-color: var(--primary-color);
}

.basic-light-btn::before,
.basic-light-btn::after {
    background-color: var(--basic-light);
}

.primary-btn::before,
.primary-btn-fill::before,
.fourth-btn::before,
.basic-light-btn::before {
    top: -1em;
    left: -1em;
}

.primary-btn::after,
.primary-btn-fill::after,
.fourth-btn::after,
.basic-light-btn::after {
    left: calc(100% + 1em);
    top: calc(100% + 1em);
}

.primary-btn:hover::before,
.primary-btn:hover::after,
.primary-btn-fill:hover::before,
.primary-btn-fill:hover::after,
.fourth-btn:hover::before,
.fourth-btn:hover::after,
.basic-light-btn:hover::before,
.basic-light-btn:hover::after {
    left: 50%;
    height: 650px;
    width: 100%;
}

.primary-btn:hover {
    color: var(--basic-light);
}

.primary-btn-fill:hover {
    color: var(--primary-color);
    background-color: var(--fourth-color);
}

.basic-light-btn:hover {
    color: var(--basic-dark);
}

.primary-btn:active,
.primary-btn-fill:active,
.fourth-btn:active,
.basic-light-btn:active {
    filter: brightness(.8);
}

/* ENd Ready Button */
/* Start */

.main-wrapper {
    display: flex;
    flex-direction: column;
}

.main-wrapper #main-content {
    flex: 1 1 0;
}

/* End */
/* Start Header */
header {
    padding: 10px 0px;
    background-color: var(--basic-light-75);
    border-radius: 0px 0px 40px 40px;
    backdrop-filter: blur(4px)
}

header nav .navbar-brand img {
    width: 180px;
    height: 50px;
    object-fit: contain;
}

header nav ul.navbar-nav .nav-item .nav-link {
    font-weight: 500;
    position: relative;
    color: var(--basic-dark);
    text-align: center;
}

header nav ul.navbar-nav .nav-item .nav-link.active::after,
header nav ul.navbar-nav .nav-item .nav-link.active::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 28px;
    background-repeat: no-repeat;
    background-size: contain;
}

header nav ul.navbar-nav .nav-item .nav-link.active::before {
    right: -20px;
    background-image: url(/images/website/header-link-arrow-right.svg);
}

header nav ul.navbar-nav .nav-item .nav-link.active::after {
    left: -15px;
    background-image: url(/images/website/header-link-arrow-left.svg);

}

header nav .sign-btn,
#login-page .login-box .sign-btn,
#sign-page .sign-box .sign-btn {
    box-shadow: 0px 5px 0px var(--primary-color);
    border-color: transparent;
    transition: all .3s linear;
}

header nav .sign-btn:hover,
#sign-page .sign-box .sign-btn:hover {
    box-shadow: 0 0;
}

header nav .myprofile {
    background-color: transparent;
    border: 0;
}

header nav .dropdown-center ul.dropdown-menu {
    background-color: var(--basic-light-75);
    overflow: hidden;
    font-size: 15px;
    color: var(--basic-dark);
    /* min-width: 200px; */
    /* right: 50%; */
    /* transform: translateX(50%); */
}

/* End Header */
/* Start Vesrions */
#vesrions {
    background-color: var(--basic-light-75);
    border-radius: 80px 80px 0px 0px;
    padding: 15px 10px;
    margin: auto;
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 55;
    width: 90%;
}

#vesrions .mobile-ver,
#vesrions .vr-ver,
#vesrions .desktop-ver {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

@media (min-width: 992px) {

    #vesrions .row .col-md-2:nth-child(2),
    #vesrions-section .row .col-md-2:nth-child(2) {
        border-color: var(--fourth-color) !important;
    }
}

@media (max-width: 991px) {

    #vesrions .row .col-md-2:nth-child(2),
    #vesrions-section .row .col-md-2:nth-child(2) {
        border-color: transparent !important;
    }
}


@media (max-width: 768px) {

    #vesrions .mobile-ver,
    #vesrions .vr-ver,
    #vesrions .desktop-ver {
        flex-wrap: wrap;
    }
}

/* End Vesrions */
/* Start Footer */
footer {
    background-color: #fff;
    padding-top: var(--section-padding);
    padding-bottom: calc(var(--section-padding) / 2);
}

footer .top-footer {
    padding-bottom: var(--section-padding);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

footer .top-footer ul.social-media {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

footer .bottom-footer {
    padding-top: var(--section-padding);
    padding-bottom: var(--section-padding);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 15px;
    border-top: 1px solid var(--fourth-color);
}

footer .bottom-footer .privacy-page ul {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 15px;
    justify-content: center;
}

footer .bottom-footer .privacy-page ul li a {
    color: var(--fourth-color-75);
}

footer .bottom-footer .copyright {
    font-weight: 400;
    color: var(--fourth-color-75);
}

@media (max-width: 991px) {

    footer .top-footer,
    footer .bottom-footer {
        justify-content: center;
    }

    footer .bottom-footer {
        padding-bottom: 100px;
    }
}

/* End Footer */
/* Start Sign In Page */
#sign-page,
#login-page {
    padding-top: calc(var(--section-padding) * 2);
    padding-bottom: var(--section-padding);
    background-image: url(/images/website/login-bg.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 70dvh;
    position: relative;
}

#sign-page::before,
#login-page::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(/images/website/OBJECTS.png);
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: cover;
    mix-blend-mode: screen;
}

#sign-page .sign-box {
    margin: auto;
    background-color: #FEFEFE1F;
    border-radius: 40px;
    border: 1px solid var(--third-color);
    max-width: 550px;
}

#sign-page .sign-box .content,
#login-page .login-box .content {
    position: relative;
    border-radius: 40px;
    padding: 40px;
}

#sign-page .sign-box .content form input,
#login-page .login-box .content form input {
    width: 100%;
    background-color: transparent;
    border: none;
    outline: 0;
}

#sign-page .sign-box .content form .form-group>div,
#login-page .login-box .content form .form-group>div {
    box-shadow: 0px 2px 12px rgba(44, 44, 44, 0.08);
}

#sign-page .sign-box .content form input:focus {
    outline: 0;
}

#sign-page .sign-box .content form input::placeholder,
#login-page .login-box .content form input::placeholder {
    color: var(--basic-dark-50);
    text-align: right;
}

#sign-page .sign-box .content .pass-input,
#login-page .login-box .content .pass-input {
    box-shadow: 0px 2px 12px rgba(44, 44, 44, 0.08);
    display: flex;
    align-items: center;
    gap: 5px;
    background-color: var(--basic-light-75);
}

#sign-page .sign-box .content .pass-input .pass-icon,
#login-page .login-box .content .pass-input .pass-icon {
    cursor: pointer;
    user-select: none;
    transition: all .5s ease-out;
}

#sign-page .sign-box .content .pass-input input,
#login-page .login-box .content .pass-input input {
    border: none;
    outline: 0;
    flex: 1 1 0;
}

/* End SignIn Page */
/* Start Login Page */
#login-page .login-box {
    margin: auto;
    background-color: #FEFEFE1F;
    border-radius: 40px;
    border: 1px solid var(--third-color);
    max-width: 800px;
}

#login-page .login-box .iti {
    display: flex;
    position: relative;
}

#login-page .login-box .iti .iti__selected-flag {
    gap: 5px;
}

#login-page .login-box .iti .iti__arrow {
    background-image: url(/images/website/BackArrow_Icon_UIA.svg);
    border-width: 0;
    width: 22px;
    height: 22px;
}

#login-page .login-box .iti .iti__flag-container {
    position: relative;
}

/* End Login Page */
/* Start Hero Section:Home-Page */
#hero-section {
    padding-bottom: var(--section-padding);
}

#hero-section .hero-content {
    padding-top: calc(var(--section-padding) * 1);
    background-image: url(/images/website/hero-home.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    height: calc(100dvh + 100px);
    position: relative;
    overflow: hidden;
}

#hero-section .hero-content .bg-effect-m {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(/images/website/bg-effect-hero.gif);
    background-repeat: no-repeat;
    inset: 0;
    background-size: cover;
    z-index: 0;
    opacity: .2;
}

#hero-section .hero-content::after,
#hero-section .hero-content::before {
    content: "";
    position: absolute;
    width: 400px;
    height: 300px;
    background-repeat: no-repeat;
    background-size: contain;
}

#hero-section .hero-content::before {
    background-image: url(/images/website/side-eff-bottom.png);
    bottom: -10%;
    left: -10px;
}

#hero-section .hero-content::after {
    background-image: url(/images/website/side-eff-top.png);
    top: 10%;
    right: -10px;
}

#hero-section .hero-content .container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    position: relative;
}

#hero-section .hero-content .container .text p {
    line-height: 2.1;
    margin: 25px 0px;
    font-size: clamp(13px, 16px, 5vw);
}

@media (min-width: 991px) {
    #hero-section .hero-content .container .text p {
        max-width: 550px;
        min-width: 499px;
    }
}

#hero-section .hero-content .container .text .explore-app {
    padding: 5px 30px;
}

#hero-section .hero-content .container .text .explore-app span svg path {
    transition: all .3s linear;
}

#hero-section .hero-content .container .text .explore-app:hover span svg path {
    stroke: var(--basic-dark);
}

#hero-section .hero-content .container .image {
    align-self: flex-end;
}

#hero-section .hero-content .container .image img {
    height: 750px;
    object-fit: cover;
}

#hero-section .hero-content .container .image-en img {
    transform: scaleX(-1);
}

@media (max-width: 991px) {
    #hero-section .hero-content .container {
        position: relative;
        flex-direction: column;
        margin-top: calc(var(--section-padding) * 1);
        padding-top: calc(var(--section-padding) * 2);
        justify-content: flex-end;
    }

    #hero-section .hero-content .container .text {
        text-align: center;
    }

    #hero-section .hero-content .container .image {
        margin: 0px auto;
        max-height: 400px;
    }
}
@media (max-width: 991px) {
    #hero-section .hero-content {
        height: calc(100dvh + 140px);
    }
}

/* End Hero Section:Home-Page */
/* Start Vesrions Section:Home-Page */
#vesrions-section {
    padding-top: var(--section-padding);
    padding-bottom: var(--section-padding);
}

#vesrions-section .desktop-ver,
#vesrions-section .vr-ver,
#vesrions-section .mobile-ver {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 25px;
}

#vesrions-section .desktop-ver a img,
#vesrions-section .vr-ver a img,
#vesrions-section .mobile-ver a img {
    margin: auto;
}

#vesrions-section .text p {
    max-width: 750px;
    text-align: center;
    margin: 30px auto;
}

#vesrions-section .image {
    text-align: center;
    margin-top: var(--section-padding);
    margin: 45px auto;
}

#vesrions-section .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* End Vesrions Section:Home-Page */
/* Start About Section:Home-Page */
#about-section,
#about-page {
    padding-top: var(--section-padding);
    padding-bottom: var(--section-padding);
}

#app-rooms .content,
#contact-section .content,
#about-section .about-content {
    padding-top: calc(var(--section-padding) * 2);
    padding-bottom: calc(var(--section-padding) * 2);
    position: relative;
    background-image: linear-gradient(180deg, #00246b 400px, var(--primary-color));
}

#app-rooms .content::before,
#about-section .about-content::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(/images/website/OBJECTS.png);
    background-repeat: no-repeat;
    background-size: cover;
    top: 0;
    left: 0;
    mix-blend-mode: screen;
}


#about-section .about-content .info .contact-btn {
    border: 1px solid var(--second-color);
    padding: 10px 16px;
    border-radius: 12px;
    color: var(--basic-light);
    background-color: var(--primary-color);
}

#app-rooms .content .container,
#about-section .about-content .container {
    position: relative;
}

#about-section .about-content .container .image,
#about-page .about-content .container .image {
    width: 500px;
    height: 500px;
    position: relative;
    margin: 0px auto;
}

#about-section .about-content .container .image::after,
#about-section .about-content .container .image::before,
#about-page .about-content .container .image::after,
#about-page .about-content .container .image::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    top: 0;
    left: 0;
}

#about-section .about-content .container .image::before,
#about-page .about-content .container .image::before {
    border: 1px solid var(--primary-color);
    transform: rotate(85deg);
}

#about-section .about-content .container .image::after {
    border: 1px solid var(--basic-light);
    transform: rotate(95deg);
}

#about-section .about-content .container .image img,
#about-page .about-content .container .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
}

@media (max-width: 1199px) {

    #about-section .about-content .container .image,
    #about-page .about-content .container .image {
        width: 300px;
        height: 300px;
    }
}

@media (max-width: 420px) {

    #about-section .about-content .container .image,
    #about-page .about-content .container .image {
        width: 250px;
        height: 250px;
    }
}

@media (max-width: 290px) {

    #about-section .about-content .container .image,
    #about-page .about-content .container .image {
        width: 200px;
        height: 200px;
    }
}

/* End About Section:Home-Page */
/* Start App Users Section:Home-Page */
#app-users {
    padding-top: var(--section-padding);
    padding-bottom: var(--section-padding);
}

#app-users .content .info a {
    display: inline-block;
    padding: 15px 30px;
    font-size: 20px;
    border-radius: 12px;
    font-weight: bold;
    color: var(--basic-light);
    background-color: var(--fourth-color);
    text-align: center;
    border: 1px solid var(--primary-color);
}

#app-users .content .images-users .image {
    border-radius: 50%;
    overflow: hidden;
    text-align: center;
    width: 200px;
    height: 200px;
    padding: 15px 30px 0px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin: auto;
}

#app-users .content .images-users .row div:nth-child(odd) .image {
    background: linear-gradient(180deg, rgb(11 231 247 / 30%) 0%, rgba(246, 77, 209, 0.75) 100%);
}

#app-users .content .images-users .row div:nth-child(even) .image {
    background: linear-gradient(0deg, rgb(11 231 247 / 30%) 0%, rgba(246, 77, 209, 0.75) 100%);
}

#app-users .content .images-users .image img{
    width: 165px;
    height: auto;
    object-fit: cover;
    object-position: center;
}

#app-users .content .images-users .image .techear-img,
#app-users .content .images-users .image .company-img{
    width: 120px;
}

/* End App Users Section:Home-Page */
/* Start App Rooms Section:Home-Page */
#app-rooms {
    padding-top: var(--section-padding);
    padding-bottom: var(--section-padding);
}

#app-rooms .content .container .text p {
    max-width: 600px;
    line-height: 1.9;
    margin: 25px auto 35px;
}

#app-rooms .content .container .image {
    margin: auto;
    text-align: center;
    position: relative;
    z-index: 5;
}

#app-rooms .content .container .image img {
    width: 100%;
    height: auto;
    position: relative;
}

#app-rooms .content .container .image::before,
#app-rooms .content .container .image::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    left: 0;
    top: 0;
    transition: all .5s ease-in-out;
}

#app-rooms .content .container .image::after {
    border: 1px solid var(--primary-color);
    z-index: -1;
}

#app-rooms .content .container .image::before {
    border: 1px solid var(--fourth-color);
}

#app-rooms .content .container .image:hover::before {
    transform: rotate(-9deg);
}

#app-rooms .content .container .image:hover::after {
    transform: rotate(-5deg);
}

/* End App Rooms Section:Home-Page */
/* Start Our Customers Section:Home-Page */
#our-customers {
    padding-top: var(--section-padding);
    padding-bottom: var(--section-padding);
}

#our-customers .content .text p {
    line-height: 2;
    max-width: 650px;
    margin: 25px auto 35px;
}

#our-customers .content .our-customers-swiper .image-customer {
    width: 230px;
    height: 230px;
    /* border-radius: 50%; */
    background-image: url(/images/website/Mask\ -circle.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    margin: auto;
}

#our-customers .content .our-customers-swiper .image-customer .circle-white {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    padding: 20px;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

#our-customers .content .our-customers-swiper .image-customer .circle-white img {
    object-fit: contain;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
}

#our-customers .content .our-customers-swiper .swiper-pagination {
    position: relative;
    margin-top: 40px;
}

#our-customers .content .our-customers-swiper .swiper-pagination .swiper-pagination-bullet {
    width: 20px;
    height: 20px;
}

#our-customers .content .our-customers-swiper .swiper-pagination .swiper-pagination-bullet-active {
    background: linear-gradient(180deg, var(--fourth-color) 10px, var(--primary-color));
}

/* End Our Customers Section:Home-Page */
/* Start Contant Section:Home-Page */
#contact-section {
    padding-top: var(--section-padding);
    padding-bottom: var(--section-padding);
}

#contact-section .content::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(/images/website/icon-bg.png);
    background-repeat: repeat;
    background-size: 40%;
    top: 0;
    left: 0;
    mix-blend-mode: luminosity;
    opacity: .1;
}

#contact-section .content .container {
    position: relative;
}

#contact-section .content .container form input, #contact-section .content .container form textarea {
    width: 100%;
    border-radius: 12px;
    box-shadow: 0 2px 12px #2C2C2C14;
    background-color: #FEFEFE1F;
    border: 1px solid #FEFEFE0A;
    color: var(--basic-light-75);
}

#contact-section .content .container form textarea {
    height: 100px;
}

#contact-section .content .container form input::placeholder,
#contact-section .content .container form textarea::placeholder {
    color: var(--basic-light-75);
    font-weight: normal;
}

#contact-section .content .container form input:focus {
    outline: 0;
}

#contact-section .content .container .primary-btn-fill {
    border: 1px solid var(--second-color);
}

/* End Contant Section:Home-Page */
/* Start Blog Page */
#blog {
    padding-top: calc(var(--section-padding) * 2);
    padding-bottom: var(--section-padding);
}

#blog .blog-content {
    padding-top: var(--section-padding);
    padding-bottom: var(--section-padding);
    background-image: linear-gradient(90deg, #e3dafe, #d7fcfa);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0% 10%;
    position: relative;
    overflow: hidden;
}

#blog .blog-content::before {
    content: "";
    position: absolute;
    width: 330px;
    height: 330px;
    right: -140px;
    bottom: -145px;
    rotate: 341deg;
    scale: 1.2;
}
/* End Blog Page */
/* Start Pricing Page */
#pricing {
    padding-top: calc(var(--section-padding) * 2);
    padding-bottom: var(--section-padding);
}

#pricing .pricing-content {
    padding-top: var(--section-padding);
    padding-bottom: var(--section-padding);
    background-image: linear-gradient(90deg, #e3dafe, #d7fcfa);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0% 10%;
    position: relative;
    overflow: hidden;
}

#pricing .pricing-content::before {
    content: "";
    position: absolute;
    width: 330px;
    height: 330px;
    background-image: url(/images/website/rople-cube-img.png);
    background-repeat: no-repeat;
    background-size: contain;
    right: -140px;
    bottom: -145px;
    rotate: 341deg;
    scale: 1.2;
}

#pricing .pricing-content .price-cards {
    border-radius: 80px;
    background-color: var(--basic-light-25);
    padding: 40px;
}

#pricing .pricing-content .price-cards .card {
    padding: 20px;
}

#pricing .pricing-content .price-cards .card:is(:not(.popular)) .top {
    color: var(--fourth-color);
}

#pricing .pricing-content .price-cards .card:is(:not(.popular)) .title-type {
    color: var(--fourth-color);
    font-weight: 700;
}

#pricing .pricing-content .price-cards .card:is(:not(.popular)) .description {
    color: var(--basic-dark-50);
}

#pricing .pricing-content .price-cards .card:is(:not(.popular)) ul li {
    color: var(--fourth-color);
}

#pricing .pricing-content .price-cards .card.popular {
    background-image: linear-gradient(180deg, #b325af -30px, #4b1681 73px, #190a7b);
    box-shadow: 0px 42px 34px #5243C24B;
    border-radius: 20px;
    color: var(--basic-light);
}

#pricing .pricing-content .price-cards .card.popular span.popular-note {
    border-radius: 40px;
    padding: 8px 20px;
    color: var(--basic-light);
    background-color: var(--basic-light-25);
    text-align: center;
    margin-right: auto;
}

#pricing .pricing-content .price-cards .card.popular .top,
#pricing .pricing-content .price-cards .card.popular .title-type {
    color: var(--basic-light);
}

#pricing .pricing-content .price-cards .card.popular .description {
    color: var(--basic-light-75);
}

#pricing .pricing-content .price-cards .card.popular ul li {
    color: var(--basic-light);
}

/* End Pricing Page */
/* Start About Us Page */
#about-hero-section {
    padding-top: var(--section-padding);
    padding-bottom: var(--section-padding);
    background-image: url(/images/website/About-us.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 100dvb;
}

#about-hero-section .content {
    padding-top: calc(var(--section-padding) * 1);
}

#about-hero-section .content p {
    max-width: 550px;
    margin: 25px auto;
}

#about-hero-section .content .logo-about {
    width: 355px;
    height: 125px;
    border-radius: 16px;
    background-color: #2C2C2C0A;
    backdrop-filter: blur(5px);
    padding: 20px;
    margin: 20px auto;
    text-align: center;
}

#about-hero-section .content .logo-about img {
    height: 100%;
}

@media (max-width: 378px) {
    #about-hero-section .content .logo-about {
        width: 220px;
        height: 95px;
    }
}

#about-page .about-content {
    padding-top: var(--section-padding);
    padding-bottom: var(--section-padding);
}

#about-page .about-content .container .image::after {
    border: 1px solid var(--third-color);
    transform: rotate(95deg);
}

#services {
    padding-top: var(--section-padding);
    padding-bottom: var(--section-padding);
}

#services .services-content .services-item p {
    text-align: justify;
}

#services .services-content .image-services {
    background-color: var(--basic-light);
    border-radius: 16px;
    box-shadow: 0px 8px 9px -5px #1414140F, 0px 8px 26px -4px #14141426;
    padding: 10px;
}

#services .services-content .image-services .info {
    margin-top: 25px;
}

#services .services-content .image-services .image {
    margin: auto;
    text-align: center;
}

#services .services-content .image-services .image img {
    width: 100%;
    height: auto;
    border-radius: 16px;
    object-fit: cover;
}

#stats-section {
    padding-top: var(--section-padding);
    padding-bottom: var(--section-padding);
}

#stats-section .stats-content {
    background-image: url(/images/website/Background.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

#stats-section .stats-content img.bottom-stats-shape,
#stats-section .stats-content img.top-stats-shape {
    position: relative;
    object-fit: cover;
    width: 100%;
    height: auto;
}

#stats-section .stats-content img.top-stats-shape {
    top: -3px;
    left: 0;
}

#stats-section .stats-content img.bottom-stats-shape {
    bottom: -3px;
    left: 0;
    transform: rotate(180deg);
}

#stats-section .stats-content .boxes {
    padding-top: var(--section-padding);
    padding-bottom: var(--section-padding);
}

#stats-section .stats-content .boxes .box {
    background-color: #fff;
    padding: 45px 10px;
    text-align: center;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    gap: 15px;
    border-radius: 28px;
}

#stats-section .stats-content .boxes .box .num {
    background: linear-gradient(142.76deg, #002D84 -8.13%, #0BE7F7 33.05%, #F64DD1 74.24%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    font-weight: 900;
}

/* End About Us Page */
/* Start Pivacy + Terms + Subscrip Pages */
#privacy-page,
#terms-page,
#subs-page {
    padding-top: var(--section-padding);
    padding-bottom: var(--section-padding);
}

#privacy-page .privacy-content,
#terms-page .terms-content,
#subs-page .subs-content {
    padding-top: var(--section-padding);
    padding-bottom: var(--section-padding);
    min-height: 40dvh;
    background-image: linear-gradient(270deg, #93fdf5, #a8cdfb, #af9efe);
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom-left-radius: 80px;
    border-bottom-right-radius: 80px;
    position: relative;
    overflow: hidden;
}

#privacy-page .privacy-content::before,
#terms-page .terms-content::before,
#subs-page .subs-content::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(/images/website/OBJECTS.png);
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: cover;
    mix-blend-mode: screen;
}

/* End Pivacy + Terms + Subscrip Pages */
/* Start Support page */
#support-page {
    padding-top: var(--section-padding);
    padding-bottom: var(--section-padding);
}

#support-page .support-hero {
    padding-top: var(--section-padding);
    padding-bottom: var(--section-padding);
    min-height: 55dvh;
    background-image: url(/images/website/support-img.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom-left-radius: 80px;
    border-bottom-right-radius: 80px;
}

#support-page .support-hero .support-search {
    background-color: var(--basic-light);
    padding: 10px;
    max-width: 650px;
    margin: auto;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 5px;
}

#support-page .support-hero .support-search .search-icon {
    background: transparent;
    border: 0;
}

#support-page .support-hero .support-search input[type="search"] {
    background: transparent;
    border: 0;
    width: 100%;
    padding: 10px 0;
}

#support-page .support-hero .support-search input[type="search"]::placeholder {
    color: var(--basic-dark-50);
    font-weight: 600;
    font-size: 15px;
}

#support-page .support-hero .support-search input[type="search"]:focus {
    outline: 0;
    border: 0;
}

#support-page .faq {
    padding-top: var(--section-padding);
    padding-bottom: var(--section-padding);
}

#support-page .faq .accordion .accordion-item {
    margin-bottom: 25px;
    border: 0;
    border-bottom: 1px solid var(--fourth-color);
    border-radius: 0px;
}

#support-page .faq .accordion .accordion-item .accordion-body {
    color: var(--basic-dark-50);
}

#support-page .faq .accordion-button::after {
    background-image: url(/images/website/Plus_Icon_UIA.svg) !important;
}

#support-page .guidance {
    padding-bottom: var(--section-padding);
    padding-bottom: calc(var(--section-padding) * 1);
    margin-bottom: calc(var(--section-padding) * 2);
}

#support-page .guidance .video {
    text-align: center;
    margin: auto;
    aspect-ratio: 18 / 9;
    max-width: 800px;
    position: relative;
}

@media (min-width: 768px) {

    #support-page .guidance .video::before,
    #support-page .guidance .video::after {
        content: "";
        position: absolute;
        background-image: url(/images/website/Mask-shape-vid.png);
        width: 100%;
        height: calc(100% + 100px);
        background-size: contain;
        background-repeat: no-repeat;
        top: 50%;
        transform: translateY(-50%);
        z-index: -1;
    }

    #support-page .guidance .video::before {
        left: -25%;
    }

    #support-page .guidance .video::after {
        right: -50%;
    }
}

#support-page .guidance .video img {
    width: 100%;
    height: 100%;
    object-position: center;
    border-radius: 12px;
    object-fit: cover;
}

#support-page .guidance .video .btn-play-video {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

#support-page .complaint {
    padding-bottom: var(--section-padding);
    padding-top: var(--section-padding);
}

#support-page .complaint {
    background-image: linear-gradient(270deg, #93fdf5, #a8cdfb, #af9efe);
}

#support-page .complaint .content .container form input,
#support-page .complaint .content form textarea {
    width: 100%;
    box-shadow: 0px 2px 12px 0px #2C2C2C14;
    border: 1px solid #FEFEFE0A;
    background-color: var(--basic-light-75);
    border-radius: 12px;
}

#support-page .complaint .content form textarea {
    padding: 16px;
    height: 150px;
    resize: none;
}

#support-page .complaint .content .container form input::placeholder,
#support-page .complaint .content form textarea::placeholder {
    color: var(--basic-dark-50);
}

#support-page .complaint .content button.primary-btn-fill {
    box-shadow: 0px 4px 2px 0px var(--fourth-color-75);
}

/* End Support page */
/* Start Animation KeyFrames */
@keyframes sticky {
    0% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(0%);
    }
}

/* End Animation KeyFrames */


@media (max-width: 991px) {
    #main-content #hero-section .hero-content .container {
        position: relative;
        top: 30px;
        margin-top: 0;
        padding-bottom: 100px;
    }

    #main-content #hero-section .hero-content .container .image {
        margin-bottom: 50px;
    }

    #main-content #hero-section .hero-content .container .image img {
        height: 100%;
    }
}

@media (max-width: 768px) {
    #vesrions {
        display: none;
    }
}

/*@media (max-width: 767px) {*/
/*    #main-content #hero-section .hero-content .container {*/
/*        top: -50px;*/
/*    }*/
/*}*/

.blog .overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.blog {
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.blog .content h4 {
    line-height: 1.2;
}

.blog .content .title {
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.blog .content .title:hover {
    color: var(--fourth-color-75) !important;
}

.blog .content .post-meta .like, .blog .content .post-meta .comments, .blog .content .post-meta .readmore {
    font-size: 15px;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.blog .content .post-meta .readmore:hover {
    color: var(--fourth-color-75) !important;
}

.blog .author,
.blog .teacher,
.blog .course-fee {
    position: absolute;
    z-index: 1;
    opacity: 0;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.blog .author {
    top: 5%;
    left: 5%;
}

.blog .teacher {
    bottom: 6%;
    left: 5%;
}

.blog .course-fee {
    bottom: -5%;
    right: 5%;
    width: 50px;
    height: 50px;
}

.blog .course-fee .fee {
    line-height: 50px;
}

.blog.blog-detail:hover {
    -webkit-transform: translateY(0px) !important;
    transform: translateY(0px) !important;
}

.blog:hover {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
}

.blog:hover .overlay {
    opacity: 0.4;
}

.blog:hover .author,
.blog:hover .teacher,
.blog:hover .course-fee {
    opacity: 1;
}

.blog .blog-list-meta {
    position: absolute;
    bottom: 24px;
}

.sidebar .widget .blog-categories li {
    padding-bottom: 10px;
}

.sidebar .widget .blog-categories li:last-child {
    padding-bottom: 0;
}

.sidebar .widget .blog-categories li a, .sidebar .widget .blog-categories li span {
    font-size: 15px;
}

.sidebar .widget .blog-categories li a {
    color: #3c4858;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.sidebar .widget .blog-categories li a:hover {
    color: #2f55d4;
}