* {
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    /* Keep a stable scrollbar gutter so opening the drawer doesn't nudge layout */
    scrollbar-gutter: stable both-edges;
    /* Force vertical scrollbar to avoid layout shift between pages */
    overflow-y: scroll;
}

/* Disabled by JS only while the drawer is locking the page */
html.lock-scroll {
    overflow-anchor: none;
}

body {
    font-family: "Lato", sans-serif;
    font-size: 20px;
    color: #000;
    font-weight: 300;
    line-height: 1.8;
    background-color: #fff;
}

ul,
ol {
    list-style: none;
    padding: 0;
    margin: 0;
}

a {
    text-decoration: none !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0;
}

/* ---------------------- common css start ---------------------- */
.orange_text {
    color: #f58658 !important;
}

.white_text {
    color: #fff;
}

.text_center {
    text-align: center;
}

.text_right {
    text-align: right;
}

.text_italic {
    font-style: italic;
    font-weight: 500;
}

.text_semi {
    font-weight: 500;
}

.text_bold {
    font-weight: 800;
}

.title_text {
    font-family: "Raleway", sans-serif;
    font-size: 42px;
    font-weight: 800;
    color: #000;
    line-height: 1.4;
    letter-spacing: 1px;
}

.section_heading {
    font-family: "Raleway", sans-serif;
    font-size: 30px;
    font-weight: 800;
    color: #000;
    letter-spacing: 1px;
}

.section_top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.btn_orange {
    font-size: 18px;
    text-transform: uppercase;
    padding: 17px 28px;
    background-color: #f58658;
    color: #fff;
    border-radius: 28px;
    transition: all linear 0.2s;
    line-height: 1;
}

.btn_orange:hover {
    background-color: #3e5368;
    color: #fff;
}

.btn_white {
    font-size: 18px;
    text-transform: uppercase;
    padding: 14px 30px;
    background-color: #fff;
    color: #f58658;
    border-radius: 28px;
    transition: all linear 0.2s;
    line-height: 1;
}

.btn_white:hover {
    background-color: #f58658;
    color: #fff;
}

.btn_outline {
    font-size: 18px;
    text-transform: uppercase;
    padding: 14px 30px;
    background-color: #fff;
    color: #3e5368;
    border: 1px solid #3e5368;
    border-radius: 28px;
    transition: all linear 0.2s;
    line-height: 1;
}

.btn_outline:hover {
    border: 1px solid #f58658;
    color: #f58658;
}

.btn_orange_outline {
    font-size: 18px;
    text-transform: uppercase;
    padding: 14px 30px;
    background-color: #fff;
    color: #f58658;
    border: 1px solid #f58658;
    border-radius: 28px;
    transition: all linear 0.2s;
    line-height: 1;
}

.btn_orange_outline:hover {
    background-color: #f58658;
    color: #fff;
}

.span_block {
    display: block;
}

.justify_center {
    justify-content: center;
}

.justify_between {
    justify-content: space-between;
}

.align_center {
    align-items: center;
}

.mt_150 {
    margin-top: 150px;
}

.mt_85 {
    margin-top: 85px;
}

.mb_18 {
    margin-bottom: 18px;
}

.mb_30 {
    margin-bottom: 30px;
}

.mb_35 {
    margin-bottom: 35px;
}

.mb_45 {
    margin-bottom: 45px;
}

.mb_65 {
    margin-bottom: 65px;
}

.mb_85 {
    margin-bottom: 85px;
}

.mb_100 {
    margin-bottom: 100px;
}

.mb_150 {
    margin-bottom: 150px;
}

.mr_20 {
    margin-right: 20px;
}

/* ---------------------- common css end ---------------------- */

/* ---------------------- header start ---------------------- */
header {
    background-color: rgba(255, 234, 0, 0.35);
    text-align: center;
}

header p {
    font-size: 15px;
    letter-spacing: 1px;
    font-weight: 400;
    padding: 18px 0;
}

header a {
    font-weight: 800;
    font-style: italic;
    color: #f58658;
}

header a:hover {
    color: #000;
    transition: all linear 0.2s;
}

/* Keep header line stable: no reflow when dates change */
header #beat_date,
header #kmf_date {
    display: inline-block;
    min-width: 14ch;
    /* reserves space like "00 September 0000" */
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ---------------------- header end ---------------------- */

/* ---------------------- nav start ---------------------- */
nav {
    position: relative;
    background-color: #fff;
}

.nav_shadow {
    border-bottom: 1px solid rgba(62, 83, 104, 0.1);
}

.nav_inner {
    padding: 8px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* reserve stable height so sticky menu-btn doesn't shrink the row */
    min-height: 62px;
    /* ≈ 50px button + padding */
}

.nav_logo {
    height: 55px;
    width: auto;
}

/* Keep the button size CONSTANT to avoid any nav-height reflow */
.menu-btn {
    font-size: 35px;
    cursor: pointer;
    position: relative;
    z-index: 10000;
    will-change: transform;
    width: 50px;
    /* fixed size – same as .stick */
    height: 50px;
    /* fixed size – same as .stick */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    /* match .stick look to avoid visual jump */
    border: 1px solid transparent;
    background: transparent;
}

.menu-btn i {
    transition: all linear 0.2s;
}

.menu-btn i:hover {
    color: #f58658;
}

/* Drawer overlay — fully transparent (no page tint at all) */
.nav-overlay {
    position: fixed;
    inset: 0;
    background: transparent !important;
    /* no dim */
    pointer-events: none;
    touch-action: none;
    z-index: 999998;
    transition: none;
}

.nav-overlay.show {
    pointer-events: auto;
    background: transparent !important;
    /* no dim */
}

/* Prevent page jump while locked (legacy hook; JS may not use it) */
.body-lock {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
    /* top is set by JS, and padding-right compensation is applied by JS */
}

/* Sidebar drawer */
.side-bar {
    background: #000;
    width: 290px;
    height: 100dvh;
    /* more reliable than 100vh on mobile */
    position: fixed;
    top: 0;
    right: -100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* smooth scroll on iOS */
    overscroll-behavior: contain;
    /* keep bounce inside the drawer */
    transition: right 0.6s ease;
    z-index: 999999;
    will-change: right;
    contain: paint;
    /* keep visual shape consistent */
    border-radius: 16px 0 0 16px;
    background-clip: padding-box;
}

.side-bar.active {
    right: 0;
}

/* Sticky state: same size as normal, only position changes */
.menu-btn.stick {
    position: fixed;
    top: 30px;
    right: 50px;
    width: 50px;
    /* unchanged */
    height: 50px;
    /* unchanged */
    background-color: #fff;
    border: 1px solid #3e5368;
    border-radius: 50%;
    color: #3e5368;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all linear .2s;
    animation: menuScroll 2s;
    z-index: 10000;
    /* ensure on top when stuck */
}

.menu-btn.stick:hover {
    color: #f58658;
    border-color: #f58658;
}

@keyframes menuScroll {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 100%;
    }
}

.side-bar .menu {
    width: 100%;
    margin-top: 50px;
}

.side-bar .menu .item a {
    color: #fff;
    display: block;
    padding: 15px 30px;
    font-size: 18px;
    transition: all linear 0.2s;
}

.side-bar .menu .item a:hover {
    background-color: #f58658;
}

.side-bar .menu .item .sub-btn {
    position: relative;
    cursor: pointer;
}

.side-bar .menu .item a .dropdown {
    position: absolute;
    right: 0;
    margin: 8px 20px;
    transition: 0.1s ease;
}

.side-bar .menu .item .sub_menu {
    background-color: rgb(32 32 32);
    display: none;
    will-change: height, opacity;
}

.side-bar .menu .item .sub_menu .sub-item {
    font-size: 16px;
    padding-left: 60px;
}

.side-bar .close-btn {
    cursor: pointer;
    color: #fff;
    font-size: 25px;
    padding: 10px 30px 15px 30px;
}

.rotate {
    transform: rotate(90deg);
}

.side-bar .close-btn i {
    transition: all linear 0.2s;
}

.side-bar .close-btn i:hover {
    color: #f58658;
}

/* ---------------------- nav end ---------------------- */

/* ---------------------- top banner start ---------------------- */
.banner_text_part {
    padding-right: 40px;
    margin-top: 85px;
}

.banner_img_part {
    margin-top: 55px;
    margin-left: 100px;
}

.banner_img_one {
    height: 217px;
    width: 217px;
    margin-right: 30px;
}

.banner_img_one img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 21px;
    object-fit: cover;
    object-position: center top;
}

.banner_img_top,
.banner_img_bottom {
    display: flex;
}

.banner_img_two {
    height: 217px;
    width: 217px;
    border-radius: 50%;
    background-color: #f58658;
    display: flex;
    justify-content: center;
    align-items: center;
}

.banner_img_three {
    background-color: #3e5368;
    border-radius: 0 21px 0 21px;
    height: 217px;
    width: 217px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
    margin-right: 30px;
}

.banner_img_four {
    height: 217px;
    width: 217px;
    margin-top: 30px;
}

.banner_img_four img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 21px 21px 21px 0;
    object-fit: cover;
    object-position: center top;
}

/* ---------------------- upcoming event start ---------------------- */
.upcoming_text a {
    font-weight: 600;
    color: #000;
    transition: all linear 0.2s;
}

.upcoming_text a:hover {
    color: #f58658;
}

.upcoming_img {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

.incomming_inner {
    width: 460px;
}

.incomming_inner img {
    display: block;
    width: 100%;
    object-fit: cover;
    object-position: center;
}

/* ---------------------- upcoming event end ---------------------- */

/* ---------------------- practice question start ---------------------- */
#practice_question .practice_inner,
.instructor_details_part {
    background-color: #3e5368;
    border-radius: 21px;
    padding: 71px 20px 57px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#practice_question .title_text,
.instructor_details_part .title_text,
.course_review_part .title_text,
.course_enroll_part .title_text {
    color: #fff;
    margin-bottom: 40px;
}

/* ---------------------- practice question end ---------------------- */

/* ---------------------- demo class end ---------------------- */
.video_img {
    width: 100%;
    height: 299px;
    position: relative;
}

.video_img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 31px;
}

.demo_video {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.video_left {
    left: 65px;
}

.play_icon_outer {
    display: flex;
    justify-content: center;
    align-items: center;
}

@keyframes pluse {
    0% {
        transform: scale(1);
        opacity: 0.75;
    }

    100% {
        transform: scale(1.45);
        opacity: 0;
    }
}

.play_icon_inner {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.play_icon_inner::before {
    content: "\f04b";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 28px;
    color: #f58658;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
}

.play_icon_inner::after {
    content: "";
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.45);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
    animation: pluse 1250ms infinite;
}

/* ---------------------- demo class start ---------------------- */

/* ---------------------- student review start ---------------------- */
.review_main {
    text-align: center;
}

.slick-slider .slick-arrow {
    font-size: 30px;
    color: rgba(62, 83, 104, 0.3);
    cursor: pointer;
    transition: all linear 0.2s;
}

.slick-slider .slick-arrow:hover {
    color: #f58658;
}

.slick-slider .slick-prev {
    position: absolute;
    left: -171px;
    top: 50%;
}

.slick-slider .slick-next {
    position: absolute;
    right: -171px;
    top: 50%;
}

/* keep arrows visible on narrower screens */
@media (max-width: 1200px) {
    .slick-slider .slick-prev {
        left: -12px;
    }

    .slick-slider .slick-next {
        right: -12px;
    }
}

@media (max-width: 768px) {
    .slick-slider .slick-prev {
        left: -6px;
    }

    .slick-slider .slick-next {
        right: -6px;
    }
}

.review_img_box {
    display: flex !important;
    flex-direction: column;
    align-items: center;
}

.img_inner {
    display: flex;
    align-items: center;
}

.img_round {
    width: 75px;
    height: 75px;
    border-radius: 50%;
    margin: 0 68px;
}

.img_round img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    object-position: center top;
}

.student_name {
    font-size: 18px;
    font-weight: 500;
    color: #3e5368;
}

.student_info {
    font-size: 16px;
    font-weight: 300;
    color: #3e5368;
}

.dot_left,
.dot_right {
    display: flex;
    align-items: center;
}

.dot_dark {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: #717a8b;
}

.dot_light {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: rgba(113, 122, 139, 0.41);
}

.dot_left .dot_light {
    margin-right: 68px;
}

.dot_right .dot_light {
    margin-left: 68px;
}

/* ---------------------- student review end ---------------------- */

/* ---------------------- contact start ---------------------- */
#contact_part {
    margin-top: 150px;
}

#contact_part .title_text {
    margin-bottom: 127px;
}

.contact_box {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.contact_icon_box {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    padding: 14px;
    background-color: #f1fdff;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 25px;
}

.contact_icon_box img {
    display: block;
    width: 100%;
    height: 100%;
}

.contact_info {
    font-size: 18px;
    color: #3e5368;
    transition: all linear 0.2s;
}

.contact_info:hover {
    color: #f58658;
}

/* ---------------------- contact end ---------------------- */

/* ---------------------- footer start ---------------------- */
#return-to-top {
    height: 50px;
    width: 50px;
    background-color: #fff;
    border-radius: 50%;
    border: 1px solid #f58658;
    opacity: 1;
    position: fixed;
    bottom: 30px;
    right: 30px;
    text-decoration: none;
    display: none;
    z-index: 100000;
    text-align: center;
    transition: all linear 0.1s;
}

#return-to-top i {
    color: #f58658;
    font-size: 25px;
    transition: all linear 0.1s;
}

#return-to-top:hover {
    border-color: #a7f3ff;
}

#return-to-top:hover i {
    color: #a7f3ff;
}

footer {
    margin-top: 174px;
    background-color: #3e5368;
    padding-top: 150px;
    color: #fff;
}

.footer_orange_text {
    font-family: "Lato", sans-serif;
    font-size: 16px;
    color: #f58658;
    font-weight: 300;
    margin-bottom: 39px;
}

footer span {
    display: block;
}

footer h6 {
    margin-bottom: 61px;
}

footer h6 span {
    font-family: "Raleway", sans-serif;
    font-size: 20px;
    font-weight: 600;
}

.footer_logo_white {
    width: 100px;
}

.footer_logo_white img {
    display: block;
    width: 100%;
    height: auto;
}

.footer_copyright {
    margin-top: 114px;
    text-align: center;
    font-family: "Lato", sans-serif;
    font-size: 16px;
    color: #f58658;
    font-weight: 300;
    padding: 28px 0 31px 0;
    border-top: 1px solid rgb(255, 255, 255, 0.43);
}

.footer_col_link ul li {
    padding: 8px 0;
}

.footer_col_link ul li a {
    color: #fff;
    font-size: 16px;
    transition: all linear 0.2s;
}

.footer_col_link ul li a:hover {
    color: #f58658;
}

.footer_col_link ul li a i {
    margin-right: 28px;
}

.f-19 {
    font-size: 19px !important;
}

.f-14 {
    font-size: 14px !important;
}

/* ---------------------- footer end ---------------------- */

/* +++++++++++++++++++++ courses page start +++++++++++++++++++++ */
.video_right {
    right: 65px;
}

/* +++++++++++++++++++++ courses page end +++++++++++++++++++++ */

/* +++++++++++++++++++++ courses details page start +++++++++++++++++++++ */
.details_point li {
    list-style-type: disc;
    list-style-position: inside;
}

.details_point li::marker {
    color: #f58658;
    margin-right: 10px;
}

.details_img {
    height: 465px;
}

.details_img img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
    border-radius: 21px;
}

.outline_img_box {
    height: auto;
    margin: 0 auto;
}

.outline_img_box img {
    display: block;
    width: 100%;
}

.book_img_box {
    padding: 30px;
    margin-bottom: 10px;
}

.book_img_box img {
    display: block;
    width: 100%;
    border: 1px solid #e1e1e1;
}

.contact_main .title_text {
    margin-bottom: 127px;
}

.payment_img img {
    display: block;
    width: 100%;
}

.course_review_part {
    background-color: #f58658;
    border-radius: 21px;
    padding: 71px 20px 57px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.btn_white_2 {
    font-size: 18px;
    text-transform: uppercase;
    padding: 14px 30px;
    background-color: #fff;
    color: #f58658;
    border-radius: 28px;
    transition: all linear 0.2s;
    line-height: 1;
}

.btn_white_2:hover {
    background-color: #3e5368;
    color: #fff;
}

.btn_orange_outline_2 {
    font-size: 18px;
    text-transform: uppercase;
    padding: 14px 30px;
    background-color: #fff;
    color: #f58658;
    border-radius: 28px;
    transition: all linear 0.2s;
    line-height: 1;
}

.btn_orange_outline_2:hover {
    background-color: #f58658;
    color: #fff;
}

.course_enroll_part {
    background-color: #005ed9;
    border-radius: 21px;
    padding: 71px 20px 57px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ensure_box p {
    font-size: 26px;
    letter-spacing: 1px;
}

/* +++++++++++++++++++++ courses details page end +++++++++++++++++++++ */

/* +++++++++++++++++++++ video materials page start +++++++++++++++++++++ */
.video_box_left {
    margin-right: 50px;
}

.video_box_right {
    margin-left: 50px;
}

.video_title {
    font-family: "Raleway", sans-serif;
    font-size: 33px;
    line-height: 1.5;
    font-weight: 800;
    color: #000;
}

.video_material_main .video_img {
    height: 330px;
}

/* +++++++++++++++++++++ video materials page end +++++++++++++++++++++ */

/* +++++++++++++++++++++ Testimonial page Start +++++++++++++++++++++ */
.testi_box {
    background-color: #f1fdff;
    border-radius: 24px;
    padding: 32px;
}

.testi_box .review_img_box {
    display: flex !important;
    flex-direction: row;
}

.testi_box .img_round {
    width: 82px;
    height: 82px;
    border-radius: 50%;
    border: 6px solid #fff;
    margin: 0 25px 0 0;
}

/* +++++++++++++++++++++ Testimonial  page end +++++++++++++++++++++ */

/* +++++++++++++++++++++ Instructor profile start +++++++++++++++++++++ */
.instructor_img img {
    display: block;
    width: 100%;
}

.instructor_name {
    font-family: "Lato", sans-serif;
    font-size: 22px;
    color: #000;
    font-weight: 500;
    margin-top: 100px;
}

/* +++++++++++++++++++++ Instructor profile end +++++++++++++++++++++ */

/* +++++++++++++++++++++ Free Question Start +++++++++++++++++++++ */
.simple-pagination ul {
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
    text-align: center;
}

.simple-pagination li {
    display: inline-block;
    margin-right: 10px;
}

.simple-pagination li a,
.simple-pagination li span {
    color: #3e5368;
    background-color: #f1fdff;
    padding: 6px 12px;
    text-decoration: none;
    border-radius: 4px;
}

.simple-pagination .current {
    background-color: #f58658;
}

.simple-pagination .prev.current,
.simple-pagination .next.current {
    background: #f1fdff;
}

#free_question_page .section_heading {
    line-height: 1.8;
}

.question_number {
    font-size: 20px;
    color: #f58658;
    font-weight: 600;
}

.qusetion_img_box {
    width: 100%;
}

.qusetion_img_box img {
    display: block;
    width: 100%;
    pointer-events: none;
}

.free_question_main .btn_box {
    display: flex;
    justify-content: flex-end;
}

#pagination-container .page-link {
    border: none;
    padding: 6px 12px;
    display: inline;
}

/**/
.white-popup {
    position: relative;
    background: #fff;
    padding: 20px;
    width: auto;
    max-width: 500px;
    margin: 20px auto;
}

.img-answer {
    max-width: 80% !important;
}

.img-answer img {
    width: 100%;
}

/* overlay at start */
.mfp-fade.mfp-bg {
    opacity: 0;
    -webkit-transition: all 0.15s ease-out;
    -moz-transition: all 0.15s ease-out;
    transition: all 0.15s ease-out;
}

/* overlay animate in */
.mfp-fade.mfp-bg.mfp-ready {
    opacity: 0.8;
}

/* overlay animate out */
.mfp-fade.mfp-bg.mfp-removing {
    opacity: 0;
}

/* content at start */
.mfp-fade.mfp-wrap .mfp-content {
    opacity: 0;
    -webkit-transition: all 0.15s ease-out;
    -moz-transition: all 0.15s ease-out;
    transition: all 0.15s ease-out;
}

/* content animate it */
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
    opacity: 1;
}

/* content animate out */
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
    opacity: 0;
}

.video_link {
    color: #f58658;
    display: flex;
    align-items: center;
    transition: all linear 0.2s;
}

.video_link i {
    margin-right: 10px;
    font-size: 25px;
}

.video_link:hover {
    color: #005ed9;
}

.question_info {
    font-size: 16px;
    margin-top: 5px;
}

/* +++++++++++++++++++++ Free Question End +++++++++++++++++++++ */

/* +++++++++++++++++++++ Payment page Start +++++++++++++++++++++ */
.payment_logo_box {
    width: 200px;
    height: 200px;
}

.payment_logo_box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.screen_shot_part {
    background-color: #f58658;
    text-align: center;
    border-radius: 21px;
    padding: 71px 100px 57px 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.screen_shot_part .title_text {
    font-size: 34px;
    color: #fff;
    margin-bottom: 40px;
}

/* +++++++++++++++++++++ Payment page End +++++++++++++++++++++ */

/* +++++++++++++++++++++ Varbal start +++++++++++++++++++++ */
.ml-50 {
    margin-left: 50px;
}

.mr-50 {
    margin-right: 50px;
}

.ml_10 {
    margin-left: 10px;
}

/* +++++++++++++++++++++ Varbal end +++++++++++++++++++++ */

/* +++++++++++++++++++++ Preloader start +++++++++++++++++++++ */
#preloader {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #fff;
    z-index: 1000000;
    overflow: hidden;
}

.pre-loader-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.pre-loader-logo svg {
    transform: scale(0);
    animation: zoom-in 1s ease-in-out forwards;
}

@keyframes zoom-in {
    0% {
        opacity: 0;
        transform: scale(0);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* +++++++++++++++++++++ Preloader end +++++++++++++++++++++ */

.book_box {
    width: 150px;
}

.book_box img {
    display: block;
    width: 100%;
    height: auto;
    -webkit-box-shadow: 0px 0px 15px -3px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 0px 15px -3px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 0px 15px -3px rgba(0, 0, 0, 0.2);
}

.book_box h6 {
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    margin-top: 20px;
}

#verbal_prep h6 a {
    color: #f58658;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    margin-top: 20px;
    transition: all linear 0.2s;
}

#verbal_prep h6 a:hover {
    color: #005ed9;
}

/* AWA Prep start */
#awa_prep .img_box {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

#awa_prep .img_box img {
    width: 300px;
    height: auto;
}

/* Quant Prep Start */
.side-bar .menu .nav_highlight {
    background-color: rgb(58, 58, 58);
}

.video_img .overlay {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 31px;
}

.video_center {
    left: 50%;
    transform: translate(-50%, -50%);
}

.premium_videos {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: end;
}

.premium_videos .wrapper {
    padding: 10px;
    width: 100%;
    text-align: center;
    background-color: #f58658;
    margin-bottom: 30px;
}

.font_15 {
    font-size: 15px;
}

.notice {
    border-radius: 20px;
    margin-bottom: 100px;
    display: flex;
}

.notice .notice_left {
    background-color: #f1fdff;
    border: 2px dashed rgba(5, 50, 89, 0.5);
    width: 90%;
    padding: 50px 600px 50px 50px;
    border-radius: 30px;
}

.notice .notice_right {
    width: 10%;
    position: relative;
}

.notice .notice_right img {
    display: block;
    max-width: 540px;
    position: absolute;
    left: -382px;
}

header .box {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.green {
    color: green;
    text-align: center;
}

.notice .text_center {
    letter-spacing: 0.35px;
}

.quant-section-top {
    align-items: center;
}

.quant_title {
    font-family: "Raleway", sans-serif;
    font-size: 42px;
    font-weight: 800;
    color: #000;
    line-height: 1.4;
    letter-spacing: 1px;
}

.target {
    width: 25px;
    height: auto;
    margin-right: 10px;
}

.video_material_main .demo_box {
    display: flex;
    align-items: start;
}

/* KMF Question */
.notice_kmf {
    position: relative;
}

.notice .notice_kmf .notice_circle {
    width: 275px;
    height: 275px;
    border-radius: 50%;
    background-color: #fff;
}

.notice .notice_kmf .notice_circle img {
    display: block;
    width: 100%;
    height: auto;
}

.notice .notice_kmf {
    display: block;
    position: absolute;
    top: -51px;
    right: -42px;
}

.notice .notice_full {
    background-color: #f1fdff;
    border: 2px dashed rgba(5, 50, 89, 0.5);
    width: 100%;
    padding: 50px 450px 50px 50px;
    border-radius: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.notice .notice_full h1 {
    margin-top: 40px;
}

.notice .notice_full h2 {
    margin-bottom: 40px;
}

#kmf_questions .notice {
    max-width: 80%;
    margin: 0 auto;
    position: relative;
}

.notice .notice_kmf .circle_outer {
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background-color: #a7f3ff7b;
    display: flex;
    justify-content: center;
    align-items: center;
}

#kmf_questions .questions_sections {
    display: flex;
    flex-wrap: wrap;
    row-gap: 80px;
}

#kmf_questions .questions_sections .underline_link {
    display: inline-block;
    font-weight: 600;
    font-size: 20px;
    color: #3e5368;
    flex: 1 0 21%;
    text-decoration: underline !important;
    text-decoration-thickness: 3px !important;
    text-underline-offset: 8px;
    transition: all linear 0.2s;
    text-align: center;
}

#kmf_questions .questions_sections .underline_link:hover {
    color: #000 !important;
    text-decoration-color: #000 !important;
}

.questions_sections .medium {
    color: #4361ee !important;
}

.questions_sections .hard {
    color: #f72585 !important;
}

.questions_sections .research {
    color: #f58658 !important;
}

.kmf-q-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.kmf-q-top .kmf_top_wrapper {
    display: flex;
    justify-content: right;
    gap: 30px;
}

.kmf-q-top .btn_box {
    display: block;
}

.kmf-q-top .btn_box a {
    display: inline-block;
}

.kmf_qusetion_img_box {
    width: 100%;
    margin: 0 auto;
}

#kmf_questions .special {
    margin-bottom: 200px;
}

#kmf_questions .special .underline_link {
    flex: 1 0 auto !important;
}

.notice .notice_full h2 {
    font-size: 36px;
}

.kmf-section-banner {
    background-color: rgba(168, 243, 255, .1);
    padding: 150px 0 80px 0;
}

.kmf-shared-video {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.kmf-shared-video .video_box {
    width: 28%;
    margin-bottom: 85px;
}

h2 {
    font-size: 20px;
    font-weight: 600;
    margin-top: 20px;
    line-height: 1.5;
}

#kmf_questions .questions_verbal {
    justify-content: center;
    gap: 100px;
}

#kmf_questions .questions_verbal .underline_link {
    flex: 0 !important;
}

.accordion-body {
    font-size: 16px !important;
}

.accordion-body p {
    margin-bottom: 18px;
}

.accordion-button {
    font-weight: 600;
}

/* ================================================================== */
/* ===== Answer button (mobile-friendly) — added patch (place last) == */
/* ================================================================== */

/* Keep normal size on desktop but slightly tighter */
.btn_outline.toggle-answer {
    padding: 10px 16px;
    font-size: 16px;
    border-radius: 20px;
    line-height: 1;
}

/* Mobile tweaks for the Answer button and its row */
@media (max-width: 600px) {
    .kmf-q-top .kmf_top_wrapper {
        gap: 12px;
        flex-wrap: wrap;
        /* allows wrap on small screens */
        justify-content: flex-end;
    }

    /* Make the Answer button smaller & pill-shaped on mobile */
    .btn_outline.toggle-answer {
        padding: 6px 10px;
        /* smaller touch-friendly size */
        font-size: 12px;
        /* smaller label */
        border-radius: 999px;
        /* pill */
        letter-spacing: .3px;
    }

    /* Keep button + answer snug on mobile */
    .kmf-q-top .btn_box {
        display: flex;
        align-items: center;
        gap: 8px;
        /* space between button and answer text */
    }

    /* Override inline margin-left on the answer bubble if present */
    .kmf-q-top .btn_box .answer-box {
        margin-left: 8px !important;
        font-size: 13px;
    }

    /* Optional: slightly smaller question number on mobile */
    .question_number {
        font-size: 16px;
    }
}

/* (Flattened) Make "Video Exp." text smaller on mobile, like Answer button */
@media (max-width: 600px) {
    .kmf_top_wrapper a {
        font-size: 12px;
        /* shrink text */
        margin-left: 8px !important;
        /* tighter spacing */
    }

    .kmf_top_wrapper a i {
        font-size: 16px;
        /* slightly smaller play icon */
        margin-right: 4px;
    }
}

/* ===================================================================== */
/* ===================  Universal Scroll-Lock helpers  ================== */
/* ===================================================================== */
/* JS toggles these classes. Keeping here ensures consistent behavior. */
html.lock-scroll,
body.lock-scroll {
    overflow: hidden;
    overscroll-behavior: contain;
    touch-action: none;
}

/* iOS path: body gets fixed when locked (script adds top:-savedYpx) */
body.lock-ios {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
}

/* Optional: foreground containers if you ever use modal content wrappers */
.drawer,
.modal-content {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    max-height: 100dvh;
}

/* Padding-right compensation is applied inline by JS to body and any fixed bars. */
.header.fixed,
.footer.fixed {
    /* Will receive padding-right via JS while locked */
}