@import url('https://fonts.cdnfonts.com/css/gotham-6');
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

@font-face {
    font-family: 'Helvetica Neue Arabic';
    src: url(../../fonts/helvetica.ttf);
}

* {
    margin: 0;
    border: none;
    padding: 0px;
    box-sizing: border-box;
}

    *,
    *:before,
    *:after {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

body {
    position: relative;
    overflow-x: hidden;
}

button, a {
    transition: 0.4s;
}

input:focus-visible {
    outline: none;
}

button:hover, a:hover {
    transform: scale(0.9);
}

.fx-home-two #VideoHere {
    width: 479px;
    height: 270px;
    object-fit: cover;
    margin-bottom: 5px;
    border-radius: 8px;
}

.home-arrow-orange-element {
    background-color: #fff;
    border: 1px solid #FF9A51;
    display: flex;
    align-items: center;
    border-radius: 50%;
    justify-content: center;
    padding: 4px;
    width: 30px;
    height: 30px;
    transition: 0.4s;
}

.monthly-assessment-box {
    width: 389px;
    height: 215px;
    background: white;
    box-shadow: 0px 8px 12px -4px rgba(184, 184, 210, 0.20);
    border-radius: 12px;
    justify-content: end;
    display: flex;
    flex-direction: column;
    padding-bottom: 12px;
}

    .monthly-assessment-box .monthly-assessment-header {
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
    }

    .monthly-assessment-box .monthly-assessment-title {
        text-align: right;
        color: #1F1F39;
        font-size: 22px;
        font-family: Helvetica Neue Arabic;
        font-weight: 400;
        word-wrap: break-word
    }

.no-video {
    width: 363px;
    height: -webkit-fill-available;
    background: white;
    box-shadow: 0px 8px 12px -4px rgba(184, 184, 210, 0.20);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 17px;
}

    .no-video img {
        width: 28%;
        margin-top: 46px;
    }

    .no-video div {
        color: #898989;
        font-size: 14px;
        font-family: Poppins;
        font-weight: 400;
        word-wrap: break-word;
        text-align: center;
        max-width: 195px;
    }

    .no-video .end-video-text {
        color: #000;
        font-size: 16px;
        font-family: Poppins;
        font-weight: 400;
        word-wrap: break-word
    }
/* Sections */
.output-container-student {
    width: 344px;
    margin-bottom: 39px;
    text-align:start;
}

.sideSection .first-section .first-section-text {
    text-align-last: auto !important;
}

.output-title-student {
    color: black;
    direction: ltr;
    font-size: 20px;
    font-family: Helvetica Neue Arabic;
    font-weight: 700;
    line-height: 24px;
    word-wrap: break-word;
    margin-bottom: 8px;
}

.output-text-student {
    color: #898989;
    font-size: 16px;
    font-family: Helvetica Neue Arabic;
    font-weight: 400;
    direction: ltr;
    word-wrap: break-word;
}

.notification-circle-student {
    top: 16px;
    left: 37px;
}

.next-progress {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

    .next-progress img {
        margin-top: 50px;
    }

    .next-progress p {
        color: var(--text-1, #1F1F39);
        text-align: center;
        font-family: 'Helvetica Neue Arabic';
        font-size: 22px;
        font-weight: 700;
        line-height: 32px;
        margin-top: 13px;
        margin-bottom: 4px;
    }

    .next-progress span {
        color: var(--text-2, #858597);
        text-align: center;
        font-family: 'Helvetica Neue Arabic';
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
        margin-bottom: 82px;
        max-width: 470px;
    }

.pre-post-head {
    font-size: 22px !important;
    font-weight: 400 !important;
    line-height: 32px !important;
    color: #1F1F39 !important;
}




.pre-post-dear {
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 30px !important;
}

.pre-post-desc {
    font-size: 20px !important;
    line-height: 30px !important;
    color: #000 !important;
}

/* Design Navbar in mobile  */

.hamburger {
    position: absolute;
    z-index: 999;
    right: 20px;
    height: 14px;
}

    .hamburger:hover {
        cursor: pointer;
    }

    .hamburger div {
        background-color: #000000;
        border-radius: 1px;
        height: 2px;
        width: 22.42px;
    }

    .hamburger div:not(:last-child) {
        margin-bottom: 6px;
    }


.truncate-line-two {
    width: 250px;
    height: 2.5em;
    line-height: 1.2em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
}

.nav-mobile {
    background-color: white;
    display: inline-block;
    position: fixed;
    height: 100vh;
    width: 100%;
    left: -100%;
    transition: transform 0.3s;
    z-index: 9999;
    top: 0;
    font-family: 'Inter';
    overflow-y: scroll;
    padding: 21px 24px 32px 21px;
}

.nav-mobile::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(232, 232, 232, 0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
}

.nav-mobile::-webkit-scrollbar {
    width: 3px;
    background-color: #F5F5F5;
}

.nav-mobile::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(235, 235, 235, 0.3);
    background-color: #FF9A51;
}

.nav-mobile .logo {
    margin: 12vh 0;
    text-align: center;
}

.nav-mobile .logo img {
    border-radius: 50%;
}

.nav-mobile .links .logo-img {
    margin-bottom: 2rem;
}

.nav-mobile a:hover {
    background-color: #f5f5f5;
    transform: scale(1);
}

.nav-mobile button:hover {
    transform: scale(1);
}

.sidenav-active-second .coverNav {
    background-color: rgba(0, 0, 0, 0.3);
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100vh;
    z-index: 5000;
    transition: background-color 0.3s, transform 0.3s;
    display: block;
}
nav, .hamburger, .coverNav {
    transition: transform 0.3s;
}

.sidenav-active-second nav, .sidenav-active-second .coverNav {
    transform: translateX(100%);
}

.nav-mobile .links .btn-orange {
    background: #EF7D00;
    color: #fff;
    border: none;
    border-radius: 10px;
    margin-bottom: 22px;
    width: 100%;
    height: 50px;
    font-size: 16px;
    display: flex;
    font-weight: 700;
    font-family: 'Gotham';
    transition: 0.3s;
}

    .nav-mobile .links .btn-orange:hover {
        transform: scale(0.9);
    }

.navbar-mobile {
display: none;
}

.navbar-mobile .clsoe-navMobile {
    float: right;
    width: 14px;
    margin-bottom: 27px;
}

.nav-mobile .dropdown-language {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    width: 100%;
    background: #E7E7E7;
    height: 38px;
    padding: 0 25px;
    border-radius: 6px;
}

    .nav-mobile .dropdown-language p {
        margin-bottom: 0px;
        font-family: 'Gotham';
        font-weight: 700;
        font-size: 14px;
        color: #000000;
    }

.nav-mobile .list-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: white;
    border: 1px solid #ccc;
    z-index: 1;
    width: 100%;
    border-radius: 8px;
    background: #fff;
}

.nav-mobile .dropdown-language:hover .list-dropdown {
    display: block;
}

.nav-mobile .list-dropdown button {
    display: block;
    width: 100%;
    padding: 8px 21px;
    border: none;
    background: none;
    text-align: start;
    font-family: 'Gotham';
    font-weight: 700;
    font-size: 14px;
}

    .nav-mobile .list-dropdown button:hover {
        background-color: #f0f0f0;
    }

.nav-mobile .line-border {
    height: 1px;
    width: 100%;
    background: #DBDBDB;
    display: block;
    margin-bottom: 22px;
}

.nav-mobile .fx-name-user {
    padding-top: 32px;
    padding-bottom: 22px;
    gap: 10px;
}

.nav-mobile .fx-name-user img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 50%;
}

.nav-mobile .fx-name-user .title-nav-mobile p {
    margin-bottom: 0px;
    font-weight: 300;
    font-family: 'Gotham';
    text-align: start;
    font-size: 12px;
}

.nav-mobile .fx-name-user .title-nav-mobile .name-user {
    font-weight: 700;
}

.nav-mobile .fx-name-user .title-nav-mobile {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.mobile-topnav {
    display: none;
}

.nav-mobile .fx-links-navMobile {
    gap: 12px;
    padding-bottom: 22px;
    padding-left: 15px;
}

.nav-mobile .fx-links-navMobile .link-nav-mobile {
    display: flex;
    align-items: end;
    gap: 7px;
}
.nav-mobile .fx-links-navMobile .link-nav-mobile span {
    font-weight: 700;
    font-size: 14px;
    font-family: 'Gotham';
    text-align: start;
    color: #737373;
    padding-bottom:3px;
}

.nav-mobile .fx-links-navMobile .active-navMobile,
.nav-mobile .fx-links-navMobile .active-navMobile span {
    color: #FF9A51;
}

.nav-mobile .link-nav-mobile {
    text-decoration: none;
    color: #000000;
}

.nav-mobile .link-dropdown-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-mobile .link-dropdown .fx-list-navDrop {
    padding-top: 10px;
    padding-left: 15px;
    gap: 10px;
    display: flex;
    flex-direction: column;
}

.nav-mobile .link-dropdown .fx-list-navDrop .item-list {
    padding: 10px;
    border: 1px solid #EFEFEF;
    border-radius: 8px;
    text-decoration:none;
}
.nav-mobile .link-dropdown .fx-list-navDrop .item-list img {
    transform:rotate(180deg);
}

.nav-mobile .link-dropdown .fx-list-navDrop .item-list span {
    color: #000000;
    margin-bottom: 0px;
    font-weight: 400;
    font-family: 'Gotham';
    text-align: start;
    font-size: 14px;
}

/*        .nav-mobile .link-dropdown .fx-list-navDrop .item-list .list-subItem {
    display: none;
    gap: 12px;
    flex-direction: column;
    padding: 16px 5px;
}

    .nav-mobile .link-dropdown .fx-list-navDrop .item-list .list-subItem a {
        text-decoration: none;
        color: #000000;
        margin-bottom: 0px;
        font-weight: 400;
        font-family: 'Gotham';
        text-align: start;
        font-size: 14px;
    }*/

.nav-mobile .btn-out {
    margin-top: 11px;
    display: flex;
    align-items: center;
    text-decoration: none;
    justify-content: space-between;
    position: relative;
    width: 100%;
    background: #EFEFEF;
    height: 38px;
    padding: 0 25px;
    border-radius: 6px;
}

.nav-mobile .btn-out span {
    margin-bottom: 0px;
    font-family: 'Gotham';
    font-weight: 700;
    font-size: 14px;
    color: #000000;
}
.notification-circle {
    background: #EF7D00 !important;
}
/*.section-journey .list-cards-down*/
.section-journey .card-detials-drop {
    display: none;
}

.text-disapper {
    display: none;
}

.doughnut-chart {
    width: -webkit-fill-available !important;
    height: 300px !important;
}

#spinnerQues {
    font-size: 24px;
    margin-top: 50px;
    display: none;
    color: #EF7D00;
}

/* Header */
@media (max-width:1000px) {
        .navbar-mobile {
        display: flex !important;
        padding: 24px;
        box-shadow: rgb(205 205 205) 1.5px 1.5px 2.6px;
        background: #FFFFFF;
    }
    .flex-head .logo-Website {
        width: 80.67px;
        height: 34.77px;
    }
}
/*Navbar Mobile end*/
@media (min-width:1900px) {
    body {
        background: #F8F8F8 !important;
    }

    header nav,
    .page-show,
    .main-progress {
        width: 1200px;
        margin: auto;
    }
}

@media (max-width:1500px) {
    .main-progress {
        padding: 3rem 24px;
    }

    .sideSection .button-container button {
        margin-top: 30px !important;
    }
}

@media (max-width:1024px) {
    .section-account-one {
        margin-inline-start: 100px;
    }

    .privacy, .section-account .form-tab, .section-account .boxs-show-acc {
        margin: 0px;
    }

    .tree-style .box-tree span {
        max-width: 300px;
    }

    .section-journey .fx-journey {
        gap: 135px;
    }

    .sideSection {
        width: 450px !important;
    }

    .assessment-section {
        padding: 0px !important;
    }
}

@media (max-width:1000px) {


    .sideSection .steps-container {
        height: 1200px !important;
    }

    .jq-toast-wrap.bottom-right {
        right: 100px !important;
    }

    .sideSection .button-container button {
        margin-bottom: 50px;
    }

    .main-mb {
        display: none;
    }

    .heade-show {
        display: none !important;
    }

    .section-journey .fx-journey {
        gap: 150px
    }

    .fx-home-two #VideoHere {
        width: 100%
    }

    .section-account-one {
        margin-inline-start: 0px !important;
    }

    .fx-login .login-img,
    .arrow-back-login {
        display: none;
    }

    .fx-login {
        padding-top: 30px;
    }

    .navbar-mobile {
        display: flex !important;
        padding: 24px;
    }

    header {
        display: block;
    }

    .section-home .fx-home {
        flex-direction: column;
    }

    .fx-home-two #VideoHere,
    .section-home .fx-home-one,
    .section-home, .btn-orange {
        width: 100%
    }

    .fx-home-two #VideoHere {
        height: 200px;
    }

    .section-home .fx-home-one {
        order: 2;
    }

    .section-home .fx-home-two {
        order: 1;
    }

    .section-home .fx-home {
        gap: 40px;
    }

        .section-home .fx-home h6 {
            margin-bottom: 20px
        }

    .section-home .user-div {
        margin-bottom: 30px;
        padding-top: 0px;
    }

        .section-home .user-div img {
            width: 61px;
            height: 61px;
        }

    .assessment-section {
        padding: 0px 8px !important;
        margin-top: 20px !important;
    }

    .skill-section,
    .fx-dropFilter,
    .fx-dropFilter,
    .output-container-student,
    .section-journey .card-details .fx-card-detials .fx-card-txt,
    .section-journey {
        width: 100% !important;
    }

    .jq-toast-single {
        width: 300px !important;
    }

    .section-journey .card-details .fx-card-detials .img-card-down {
        width: 80px;
    }

    .skill-name {
        font-size: 14px;
    }

    .sideSection {
        width: 100% !important;
    }

        .sideSection .first-section .first-section-box .o-video {
            padding: 0px;
        }

    .section-journey .fx-journey {
        flex-direction: column;
        gap: 21px;
    }

    .section-journey .bases,
    .card-hide-details {
        display: none !important;
    }

    .section-journey .card-detials-drop {
        padding: 10px 20px;
        cursor: pointer;
        display: block;
    }
    .fx-lang-button {
        padding: 10px;
    }
    .relative-button {
        position: relative;
        margin-top: 11px;
        display: flex;
        align-items: center;
        width: 100%;
        background: #EFEFEF;
        min-height: 38px;
        max-height: 100%;
        padding: 10px 25px;
        border-radius: 6px;
        flex-direction: column;
    }

    .relative-button button {
        background-color: transparent;
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        justify-content: space-between;
    }

    .relative-button .dropdown-menu-lang {
        width: 100%;
        background: transparent;
        box-shadow: none;
        padding: 0px;
        padding-bottom: 8px;
        position: relative;
    }
    .dropdown-menu-lang span {
        font-weight: 500 !important;
    }

    .section-journey .list-cards-down .card-details-activation {
        border: 1px solid #EF7D00;
    }

    .section-journey .list-cards-down .card-details-activation .fx-card-detials span,
    .section-journey .list-cards-down .card-details-activation .fx-card-detials h4,
    .section-journey .list-cards-down .card-details-activation .fx-card-detials p {
        color: #EF7D00;
    }

    .sideSection .radio-custom-label {
        box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
        margin: auto;
    }

    .step form {
        padding: 0 16px;
    }

    .monthly-assessment-box {
        width: 100%;
    }

    .text-disapper {
        display: block;
    }

    .header-counselor .arrow-back-login {
        display: block;
        margin-right: 0px !important;
        margin-left: 0px !important;
        width: 33px;
        margin-top: 0px !important;
    }

    .header-counselor .topnav {
        padding: 16px;
        padding-left: 10px;
        box-shadow: rgba(122, 122, 122, 0.15) 1.95px 1.95px 2.6px;
    }

    .mobile-topnav {
        display: block;
    }

    .section-account-two {
        padding: 0px 24px 40px 24px;
    }
    .main-progress {
        padding: 27px 24px;
    }
    .section-account-parent .form-tab .box-design-input,
    .section-account .form-tab .box-phone {
        width: 100%;
    }

    .notification-circle-student {
        top: 5px !important;
        left: 11px !important;
    }
    .progress-mob {
        margin-inline-end: -12px;
    }

    #spinnerQues {
        margin-top:-20px !important;
    }

    .section-radio-btns #spinnerQues {
        margin-top: 50px !important;
    }
}


@media (max-width:768px) {
    .no-video {
        height: fit-content;
        padding-bottom: 10px;
    }

    .section-home .fx-home-one {
        margin-top: 25px;
    }
}
@media (max-width: 500px){
    #VideoHere {
        margin-bottom: 25px !important;
    }
}