@media screen and (min-width: 1200px) {

    html,
    body {
        font-size: 1vw;
    }

    .container {
        max-width: calc(1vw + 84rem) !important;
    }
}

@media screen and (max-width: 1200px) {
    .container {
        padding: 0 2rem
    }
}

@media screen and (max-width: 1199.98px) {
    .sec1 {
        order: 1;
    }

    .sec2 {
        order: 2;
    }

    .sec3 {
        order: 3;
    }

    .custom-modal-dialog {
        max-width: 52%;
    }

    .main-container,
    .main-container-sec {
        padding: 5rem 0 0 0;
        height: auto;
    }

    .girl {
        width: 16%;
        bottom: 0rem;
        right: 0;
    }

    .speech-bubble {
        width: 23rem;
        font-size: 1.3rem;
    }

    .top-head-col {
        padding: 3rem 4rem 0rem 4rem;
    }

    .logo_welcome img {
        width: 6.5rem;
    }

    .test-section-inner {
        margin: 0 4rem;
    }

    #resultModal .modal-dialog {
        transform: none;
        max-width: 60% !important;
    }

    #profileUpdate .profile-container {
        max-width: 90%;
    }
}

@media (max-width: 991.98px) {
    .success-msg {
        max-width: 40%;
    }

    .contact-section {
        padding: 6rem 0;
    }

    .contact-form {
        max-width: 70%;
    }

    .custom-modal-dialog {
        max-width: 60%;
    }

    #profileUpdate .btn-view {
        font-size: .67rem !important;
    }

    #profileUpdate .tab {
        padding: .7rem 2rem;
    }

    .top-head-test {
        padding: 6rem 0;
    }

    #resultModal .result-value {
        text-align: center;
    }

    #resultModal .modal-dialog {
        transform: none;
        max-width: 80% !important;
    }

    /* .test-first-row {
        flex-direction: column-reverse;
    } */

    .icon {
        width: 60%;
    }

    .main-head {
        padding: 0 0 5rem 0;
    }

    .top-head h1 {
        font-size: 4.5rem;
    }

    .list ul li {
        font-size: 1.2rem;
    }

    .main_nav-links {
        gap: 3rem;
        padding: 3rem 2rem;
    }

    .hamburger {
        display: flex;
    }

    .main_nav-links {
        position: absolute;
        top: 100%;
        right: 0;
        width: 100%;
        background: white;
        flex-direction: column;
        align-items: flex-start;
        padding: 3rem 2rem;
        display: none;
        opacity: 0;
        pointer-events: none;
        transform: translateY(-10px);
        transition: all 0.3s ease;
    }

    .main_nav-links .active {
        display: flex;
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }

    .main_nav-links.active {
        display: flex !important;
        opacity: 1;
    }

    .hamburger {
        display: flex;
    }

    #navLinks {
        position: fixed;
        top: 0;
        right: -100%;
        width: 250px;
        height: 100%;
        background-color: rgb(14 41 62);
        flex-direction: column;
        padding: 8rem 1rem;
        transition: right 0.3s ease;
        z-index: 1000;
        overflow-y: auto;
    }

    #navLinks.active {
        right: 0;
    }

    .navLinks {
        flex-direction: column;
        gap: 1rem;
    }

    .profile-dropdown {
        margin-top: 2rem;
    }

    #navLinks a,
    #navLinks .btn {
        padding: 10px 0;
        text-align: center;
    }

    .form_shadow_box {
        width: 90%;
    }

    .main-calculator {
        padding: 7rem 0 8rem 0;
    }

    .girl,
    div#bubble {
        display: none;
    }

    .main-container,
    .main-container-sec {
        height: auto !important;
        padding: 5rem 0 0rem 0;
    }

    .level .circle,
    .level img {
        width: 4.5rem;
        height: 4.5rem;
    }

    .progress-line {
        margin: 0 3.1rem;
    }
}



@media (max-width: 767.98px) {
    .test-row-second {
        flex-direction: column-reverse;
    }

    .bubble-area {
        margin-top: 0rem;
    }

    .profile-card .container {
        padding: 0;
    }

    .level-container {
        padding: 1.5rem;
    }

    .level-title {
        font-size: 1rem;
    }

    .level-heading {
        font-size: 1.4rem;
    }

    .level .circle,
    .level img {
        width: 3.5rem;
        height: 3.5rem;
    }

    .success-msg {
        max-width: 50%;
    }

    .custom-modal-dialog {
        max-width: 70%;
    }

    .home-btn {
        width: 100% ! IMPORTANT;
    }

    #profileUpdate .tabs {
        flex-wrap: wrap;
        gap: 1rem;
        justify-content: left;
    }

    #profileUpdate .tabs button.tab {
        width: 48%;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    #profileUpdate .personal-details h2 {
        font-size: 1.7rem;
    }

    #profileUpdate .tab.active {
        padding: .7rem 3rem;
    }

    .top-head-test {
        padding: 6rem 2rem;
    }

    .top-head-test h2 {
        font-size: 3.6rem;
    }

    .time-tables-inner h2 {
        font-size: 3.8rem;
    }

    .footer-below {
        flex-direction: column-reverse;
    }

    .contact-form {
        max-width: 80%;
    }

    .test-section-inner {
        margin: 0px 2rem;
    }

    .logo_welcome img {
        margin-bottom: 1rem;
    }

    .test-row-second {
        padding: 2rem 1rem;
    }

    .subjects-icon {
        width: 100% !important;
        max-width: 100%;
    }

    .play-btn {
        width: 100%;
    }

    .choose-avatar1 {
        display: block;
    }
}

@media (max-width: 575.98px) {
    .success-msg {
        max-width: 70%;
    }

    .custom-modal-dialog {
        max-width: 90%;
        margin: auto;
    }

    .main-container,
    .main-container-sec {
        padding: 5rem 0 2rem 0;
    }

    #profileUpdate li.nav-item {
        width: 100%;
    }

    .result-box {
        flex-direction: column;
        gap: 1rem;
    }

    .form_shadow_box .btn-year,
    .form_shadow_box label.option-btn.category-btn {
        width: 100%;
        text-align: center;
    }

    .main-home-test {
        padding: 7rem 0 0 0;
    }

    .top-head-test {
        padding: 4rem 2rem;
    }

    /* .container {
        padding: 0 1rem;
    } */

    .top-head-test h2 {
        font-size: 3.1rem;
    }

    .main-container,
    .main-container-sec {
        height: auto !important;
    }

    .top-head h1 {
        font-size: 4rem;
    }

    .test-section {
        padding: 3rem 0;
    }

    .test-section-inner {
        padding: 2rem;
    }

    .test-box h3 {
        font-size: 2rem;
    }

    .main-btn {
        padding: .9rem 1.5rem;
    }

    .time-tables-inner h2 {
        font-size: 3.2rem;
    }

    .btn-warning-custom,
    .btn-danger-custom,
    .btn-success-custom {
        padding: .3rem 3rem;
        font-size: 1.5rem;
    }

    #resultModal .modal-dialog {
        margin: auto;
    }

    #profileUpdate .performance-tabs {
        gap: 1.5rem;
        flex-direction: column;
        align-items: center;
    }

    #profileUpdate .tabs button.tab {
        width: 100%;
    }

    #profileUpdate .perf-tab {
        width: 100%;
        margin: 0;
    }

    .timer-icon {
        width: 2rem !important;
    }

    .blue-head,
    .yellow-btn {
        width: 100%;
    }
}

@media (max-width: 479.98px) {

    .yellow-btn {
        padding: .8rem 1.5rem;
    }

    .question-card {
        padding: 1rem;
    }

    .test #hen {
        top: 2rem;
    }

    .test {
        padding: 0 !important;
        padding-top: 4rem !important;
    }

    .logo_welcome img {
        width: 5.5rem;
    }

    .success-msg {
        max-width: 80%;
    }

    #profileUpdate .performance-tabs {
        padding: 1rem;
    }

    .time-tables-card {
        padding: 2rem 0;
    }

    #hen {
        width: 2rem;
    }

    .main-container .main-btn,
    .main-container-sec .main-btn {
        width: 100%;
    }

    .blue-btn,
    .orange-btn {
        font-size: 1rem !important;
        padding: .7rem .7rem;
    }

    .subjects-icon {
        width: 100% !important;
        max-width: 100%;
    }

    .logo .subjects-icon {
        width: 75% !important;
        max-width: 75%;
    }

    .form_shadow_box label.option-btn.category-btn {
        padding: .8rem 2rem;
    }

    .footer-menu {
        gap: 1.5rem;
    }

    .main-btn {
        padding: .6rem 1.5rem !important;
    }

    .top-head-col {
        padding: 3rem 3rem 0rem 3rem;
    }

    .list ul li {
        font-size: 1rem;
        line-height: 1.6rem;
    }

    .main-home {
        padding: 7rem 0 0 0;
    }

    .test-section-inner {
        margin: 0px 0rem;
    }

    .contact-section {
        padding: 4rem 0;
    }

    .top-head h1 {
        font-size: 3.3rem;
    }

    .test-box h3,
    .test-box-contact h3 {
        font-size: 2rem;
        line-height: 2.7rem;
    }

    .main-calculator .container {
        padding: 0 1rem;
    }

    .btn-warning-custom,
    .btn-danger-custom,
    .btn-success-custom {
        padding: .3rem 1rem;
        font-size: 1rem;
    }

    img.cross-icon.w-100 {
        display: none;
    }

    .question-box {
        padding: 0;
    }

    span#timer {
        font-size: 1rem;
    }

    .back-btn {
        padding: .5rem .8rem;
    }

    #profileUpdate .personal-details h2 {
        font-size: 1.5rem;
        line-height: 2.5rem;
    }

    #profileUpdate .personal-details {
        padding: 1rem;
    }

    #profileUpdate .avatar-section {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }

    #profileUpdate .special-id {
        margin: auto;
        text-align: center;
    }

    #profileUpdate .filters-section {
        padding: 0 !important;
    }

    .question-box input,
    .question-box {
        font-size: 1.5rem !important;
    }

    .main-calculator {
        padding: 5rem 0 6rem 0;
    }

    div#question {
        width: 78% !important;
    }

    #resultModal .modal-dialog {
        max-width: 92% !important;
    }

    .modal-body {
        padding: 0;
    }

    #resultModal .modal-content {
        padding: 2rem 1.4rem 1rem 1.4rem !important;
    }

    .main-time-table {
        padding: 7rem 0 0 0;
    }

    .container {
        padding: 0 1.5rem;
    }

    .form_shadow_box {
        padding: 2rem 1.4rem 0rem 1.4rem !important;
    }

    .times-table-buttons.number-btn .blue-btn {
        font-size: 1.2rem !important;
    }

    .otp-input {
        width: 1.5rem;
        height: 50px;
    }

    .otp-input-container {
        gap: 1.4rem;
    }

    .h5 {
        font-size: 1rem;
    }


    .level-steps {
        flex-direction: column;
        /* stack vertically */
        align-items: center;
        /* center levels */
        position: relative;
    }

    .level {
        margin-bottom: 2rem;
        /* spacing between levels */
    }

    .level .circle {
        width: 6rem;
        height: 6rem;
    }

    .level img {
        width: 5.5rem;
        height: 5.5rem;
    }

    .level-title {
        font-size: 1.1rem;
        margin-top: 0.5rem;
    }

    .progress-wrapper {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 0.8rem;
        z-index: 1;
        padding: 6rem 0;
    }

    .progress-line {
        width: 100%;
        height: 100%;
        background-color: #286A80;
        border-radius: 0.7rem;
        overflow: hidden;
        position: relative;
    }

    .progress-line-active {
        width: 100%;
        height: 0%;
        background: linear-gradient(180deg, #ffd66b, #e6a100);
        position: absolute;
        bottom: 0;
        left: 0;
        transition: height 0.6s ease;
    }

    .progress-line {
        margin: 0;
    }

}

@media (max-width: 374.98px) {
    #resultModal .result-box-single {
        padding: .7rem !important;
    }

    img.total-numbers-icon,
    img.total-time-icon {
        width: 3rem;
    }

    .result-box span {
        font-size: .9rem;
    }

    #resultModal .result-value {
        text-align: center;
        font-size: 1rem;
    }
}