/* ======================================= home page  start  ======================================= */


/* ====================== banner start  ====================== */

@media only screen and (max-width: 1024px) {
    .banner-area.header-area .navber ul li a {
        margin-right: 15px;
    }
    .banner-area .banner-content .online p {
        margin-bottom: 20px;
    }
    .banner-area .banner-content h1 {
        font-size: var(--font-size45);
        margin-bottom: 20px;
        line-height: 58px;
    }
}

@media only screen and (max-width: 768px) {
    .banner-area {
        margin-top: 50px;
    }
    .banner-area .banner-content .online p {
        font-size: var(--font-size12);
        margin-bottom: 10px;
    }
    .banner-area .banner-content h1 {
        font-size: var(--font-size30);
        margin-bottom: 15px;
        line-height: 40px;
    }
    .banner-area .banner-content h4 {
        font-size: var(--font-size16);
        line-height: 24px;
    }
    .banner-area .banner-content .banner-btn {
        margin-top: 40px;
    }
}


/* ====================== banner end  ====================== */


/* ====================== counting end  ====================== */

@media only screen and (max-width: 1024px) {
    .review-icon .icon i {
        color: var(--white);
        background-color: var(--btn-color);
        width: 50px;
        height: 50px;
        font-size: var(--font-size20);
        line-height: 50px;
    }
    .review-count h2 {
        font-size: var(--font-size20);
    }
    .review-count p {
        font-size: var(--font-size14);
    }
}

@media only screen and (max-width: 768px) {
    .review-icon {
        padding: 25px;
    }
    .review-icon .icon i {
        color: var(--white);
        background-color: var(--btn-color);
        width: 40px;
        font-size: var(--font-size18);
        height: 40px;
        line-height: 40px;
        margin: 0;
        margin-right: 13px;
    }
    .review-count h2 {
        font-size: var(--font-size16);
        line-height: 13px;
    }
    .review-count p {
        font-size: var(--font-size12);
    }
}

@media only screen and (max-width: 425px) {
    .review-icon {
        display: block;
        padding: 15px;
        align-items: center;
        justify-content: center;
    }
    .review-count p {
        font-size: var(--font-size12);
        text-align: center;
        margin: 5px 0;
    }
    .review-icon .icon i {
        margin-right: 0;
        margin-bottom: 13px;
    }
}


/* ====================== counting end  ====================== */


/* ======================== about start  ======================== */

@media only screen and (max-width: 1024px) {
    .about-area {
        margin-top: 80px;
    }
    .about-area .about-wrapper .about-left .about-img {
        height: 250px;
    }
    .about-area .about-wrapper .about-left .about-content h3 {
        font-size: var(--font-size26);
    }
    .about-area .about-wrapper .about-left .about-content span {
        font-size: var(--font-size18);
        line-height: 38px;
    }
    .about-area .about-wrapper .about-left .about-content p {
        font-size: var(--font-size16);
        line-height: 30px;
    }
    .about-area .about-wrapper .about-right {
        margin-left: 50px;
    }
    .about-area .about-wrapper .about-right p {
        font-size: var(--font-size16);
        line-height: 25px;
    }
    .about-area .about-wrapper .about-right .social-media-heading h4 {
        font-size: var(--font-size20);
        line-height: 19px;
    }
}

@media only screen and (max-width: 786px) {
    .about-area {
        margin-top: 50px;
    }
    .about-area .about-wrapper .about-left .about-img {
        height: 180px;
    }
    .about-area .about-wrapper .about-left {
        padding: 12px;
    }
    .about-area .about-wrapper .about-left .about-content h3 {
        font-size: var(--font-size18);
        line-height: 18px;
    }
    .about-area .about-wrapper .about-left .about-content span {
        font-size: var(--font-size12);
        line-height: 20px;
    }
    .about-area .about-wrapper .about-left .about-content p {
        font-size: var(--font-size14);
        line-height: 21px;
    }
    .about-area .about-wrapper .about-right {
        margin-left: 20px;
    }
    .about-area .about-wrapper .about-right p {
        font-size: var(--font-size12);
        line-height: 21px;
        margin-bottom: 10px;
    }
    .about-area .about-wrapper .about-right .social-media-heading {
        margin-bottom: 17px;
    }
}

@media only screen and (max-width: 425px) {
    .about-area {
        margin-top: 30px;
    }
    .about-area .about-wrapper .about-left .about-img {
        height: 320px;
    }
    .about-area .about-wrapper .about-left .about-content h3 {
        line-height: 24px;
    }
    .about-area .about-wrapper .about-left .about-content span {
        line-height: 24px;
    }
    .about-area .about-wrapper .about-right p {
        font-size: var(--font-size12);
        line-height: 24px;
        margin: 17px 0;
    }
    .about-area .about-wrapper .about-right {
        margin-left: 0;
    }
}


/* ============================= about end  ============================== */


/* ======================= join world end  ========================= */

@media only screen and (max-width: 1024px) {
    .join-world-area .join-world .join-world-img {
        height: 450px;
    }
    .join-world-area .join-world-wrapper {
        padding: 0 20px;
    }
    .join-world-area .join-world-heading {
        margin: 24px 0;
    }
    .join-world-area .join-world-content span {
        font-size: var(--font-size20);
        line-height: 64px;
    }
    .join-world-area .join-world-content p {
        font-size: var(--font-size16);
        line-height: 22px;
    }
}

@media only screen and (max-width: 768px) {
    .join-world-area {
        margin-top: 50px;
    }
    .join-world-area .join-world .join-world-img {
        height: 320px;
    }
    .join-world-area .join-world-heading h2 {
        font-size: var(--font-size30);
        line-height: 40px;
    }
    .join-world-area .join-world-heading span {
        font-size: var(--font-size30);
    }
    .join-world-area .join-world-content span {
        font-size: var(--font-size18);
        line-height: 35px;
    }
    .join-world-area .join-world-content p {
        font-size: var(--font-size12);
        line-height: 17px;
    }
    .join-world-area .join-world-btn a {
        margin: 20px 0;
    }
}


/* ================ join world end  ================== */


/* ======================================= home page  end  ======================================= */


/* ======================================= about page  start  ===================================

/* ============= paytolearn-net section start ============= */

@media only screen and (max-width: 1024px) {
    .paytolearn-about-area .paytolearn-wrapper .abou-img {
        width: 370px;
    }
    .paytolearn-about-area .paytolearn-wrapper .learn-about h5 {
        font-size: var(--font-size22);
        line-height: 32px;
    }
    .paytolearn-about-area .paytolearn-wrapper .learn-about p {
        font-size: var(--font-size18);
        line-height: 32px;
    }
}

@media only screen and (max-width: 768px) {
    .paytolearn-about-area {
        margin-top: 80px;
    }
    .paytolearn-about-area .paytolearn-heading span {
        font-size: var(--font-size14);
    }
    .paytolearn-about-area .paytolearn-wrapper .learn-about h5 {
        font-size: var(--font-size18);
        line-height: 27px;
    }
    .paytolearn-about-area .paytolearn-wrapper .learn-about p {
        font-size: var(--font-size14);
        line-height: 24px;
        padding-right: 20px;
    }
    .paytolearn-about-area .paytolearn-wrapper .abou-img {
        width: 272px;
    }
    .heading-2 h2::before {
        bottom: -7px;
        width: 76px;
    }
}

@media only screen and (max-width: 425px) {
    .paytolearn-about-area .paytolearn-wrapper .learn-about h5 {
        font-size: var(--font-size12);
        line-height: 23px;
        margin-bottom: 10px;
    }
    .paytolearn-about-area .paytolearn-wrapper .learn-about p {
        font-size: var(--font-size12);
        line-height: 22px;
        padding-right: 0;
    }
    .paytolearn-about-area .paytolearn-wrapper .abou-img {
        width: 353px;
        margin: auto;
    }
    .paytolearn-mission-content p {
        font-size: var(--font-size12);
        line-height: 25px;
    }
    .paytolearn-mission-content ul {
        padding: 0 20px;
    }
    .paytolearn-mission-content ul li {
        font-size: var(--font-size12);
        line-height: 22px;
    }
}

@media only screen and (max-width: 375px) {
    .paytolearn-about-area .paytolearn-wrapper .abou-img {
        width: 275px;
    }
}


/* ============ paytolearn-net section start ============ */


/* ======================================= about page  end  ======================================= */


/* ======================================= all course page  start  ======================================= */


/*============ all coure page start ================ */

@media only screen and (max-width: 1024px) {
    .select-course-area {
        margin-top: 70px;
    }
}

@media only screen and (max-width: 768px) {
    .select-course-area .hello-info p span {
        font-size: var(--font-size16);
        line-height: 60px;
    }
    .select-course-area .accordion-button:not(.collapsed) {
        font-size: var(--font-size16);
    }
    .select-course-area .accordion-button {
        font-size: var(--font-size16);
    }
    .select-course-area .select-category-group span {
        font-size: var(--font-size12);
    }
}


/*============ all coure page start ================ */


/* ======================================= all course page  end  ======================================= */


/* ======================================= blog-details page  start  ======================================= */


/* ============== bloge details  start  ============== */

@media only screen and (max-width: 1024px) {
    .blog-details-heading h2 {
        font-size: 30px;
    }
    .blog-details-area .sub-heading p {
        font-size: var(--font-size18);
    }
    .blog-details-area .sub-heading {
        margin: 10px 0;
    }
    .blog-details-area .blog-details-wrapper .blog-details-top .blog-details-img {
        height: 430px;
    }
    .blog-details-area .blog-details-content p {
        font-size: var(--font-size16);
        line-height: 36px;
    }
    .blog-details-area .blog-details-content ul li {
        font-size: var(--font-size16);
        line-height: 26px;
    }
    .bottom-content-heading {
        margin: 25px 0;
    }
    .blog-details-area .blog-bottom-content .coaching p {
        font-size: var(--font-size16);
        line-height: 33px;
    }
}

@media only screen and (max-width: 768px) {
    .blog-details-heading h2 {
        font-size: 20px;
    }
    .blog-details-area .blog-details-wrapper .blog-details-top {
        padding: 20px;
    }
    .blog-details-area .sub-heading p {
        font-size: var(--font-size14);
    }
    .blog-details-area .blog-details-wrapper .blog-details-top .blog-details-img {
        height: 340px;
    }
    .blog-details-area .blog-details-content p {
        font-size: var(--font-size12);
        line-height: 25px;
    }
    .blog-details-area .blog-details-content ul li {
        font-size: var(--font-size12);
        line-height: 20px;
    }
    .blog-details-area .blog-bottom-content .bottom-content-heading h2 {
        font-size: var(--font-size22);
    }
    .blog-details-area .blog-bottom-content .heading-2 h2::before {
        bottom: -12px;
        height: 3px;
        width: 83px;
    }
    .blog-details-area .blog-details-bottom {
        padding: 30px;
    }
    .blog-details-area .blog-bottom-content .coaching p {
        font-size: var(--font-size12);
        line-height: 25px;
    }
    .blog-details-area .details-bottom-img {
        height: 300px;
    }
}

@media only screen and (max-width: 425px) {
    .blog-details-area {
        margin-top: 70px;
    }
    .blog-details-heading h2 {
        font-size: var(--font-size14);
        line-height: 24px;
    }
    .blog-details-area .sub-heading p {
        font-size: var(--font-size10);
    }
    .blog-details-area .blog-bottom-content .bottom-content-heading h2 {
        font-size: var(--font-size14);
    }
    .blog-details-area .blog-details-wrapper .blog-details-top .blog-details-img {
        height: 180px;
    }
    .blog-details-heading h2 {
        font-size: 13px;
    }
    .blog-details-area .blog-bottom-content .coaching p {
        margin-bottom: 20px;
    }
    .blog-details-area .details-bottom-img {
        height: 250px;
    }
    .blog-details-area .blog-details-bottom .blog-details-bottom-wrapper {
        margin-bottom: 50px;
    }
    .blog-details-area .blog-bottom-content {
        padding-right: 0;
    }
}

@media only screen and (max-width: 375px) {
    .blog-details-area .blog-details-content ul {
        padding: 0px 15px;
    }
    .blog-details-area .blog-details-wrapper .blog-details-top {
        padding: 15px;
    }
    .blog-details-area .blog-details-bottom {
        padding: 15px;
    }
    .blog-details-area .details-bottom-img {
        height: 220px;
    }
}


/* ============== bloge details  end  ============== */


/* ======================================= blog-details page  end  ======================================= */


/* ======================================= blog page  start  ======================================= */


/* ======================================= contact page  start  ======================================= */


/* ========== contact  start  ========== */

@media only screen and (max-width: 1024px) {
    .contact-area .contact-wrapper {
        margin-top: 80px;
    }
    .contact-area .contact-wrapper .contact-content {
        width: 90%;
    }
    .contact-area .contact-wrapper .contact-content .location p {
        font-size: var(--font-size18);
        line-height: 34px;
    }
    .contact-area .contact-wrapper .contact-img-content .contact-location {
        font-size: var(--font-size18);
        margin: 20px 0;
    }
    .contact-area .contact-wrapper .contact-img-content .contact-img {
        height: 375px;
    }
}

@media only screen and (max-width: 768px) {
    .form-area {
        margin-top: 50px;
    }
    .contact-area .contact-wrapper {
        margin-top: 30px;
    }
    .contact-area .contact-wrapper .contact-content {
        width: 100%;
    }
    .contact-area .contact-wrapper .contact-content .location p {
        font-size: var(--font-size14);
        line-height: 26px;
    }
    .contact-area .contact-wrapper .contact-img-content .contact-img {
        height: 452px;
        margin-top: 36px;
    }
}

@media only screen and (max-width: 425px) {
    .contact-area {
        margin-top: 80px;
    }
    .contact-area .contact-wrapper .contact-content .location p {
        font-size: var(--font-size12);
        line-height: 23px;
    }
    .contact-area .contact-wrapper .contact-img-content .contact-img {
        height: 250px;
        margin-top: 30px;
    }
    .contact-area .contact-wrapper .contact-img-content .contact-location {
        font-size: var(--font-size12);
        margin: 10px 0;
    }
}


/* ========== contact  end  ========== */


/* ==============constructor start ============= */

@media only screen and (max-width: 425px) {
    .information-area {
        margin: 80px 0;
    }
}


/* ==============constructor end ============= */


/* ==============sign-up start ============= */

@media only screen and (max-width: 768px) {
    .sign-up-area {
        margin: 80px 0;
    }
}


/* ==============sign-up end ============= */


/* ======================================= contact page  end  ======================================= */


/* =================================== course details page  start  =================================== */


/* ======= course-details  start  ======= */

@media only screen and (max-width: 1440px) {
    .course-details-area .Course-details .details-about p {
        font-size: var(--font-size20);
        line-height: 40px;
    }
}

@media only screen and (max-width: 1024px) {
    .course-details-area .Course-details .details-about p {
        font-size: var(--font-size24);
        line-height: 45px;
    }
    .what-you-heading h2 {
        font-size: var(--font-size26);
    }
    .course-details-area .Course-details .details-about p {
        font-size: var(--font-size20);
        line-height: 38px;
    }
    /* right side  */
    .course-details-area .buy-course-card .buy-course-img {
        height: 250px;
    }
    .course-details-area .buy-course-content .what-you {
        padding: 15px;
    }
}

@media only screen and (max-width: 768px) {
    .what-you-heading h2 {
        font-size: var(--font-size24);
    }
    .exam-details-area .details-about p {
        font-size: var(--font-size14);
        line-height: 25px;
        margin-bottom: 12px;
    }
    .course-details-area .Course-details .details-about p {
        font-size: var(--font-size14);
        line-height: 30px;
        margin-bottom: 10px;
    }
    /* right side  */
    .course-details-area .buy-course-card .buy-course-img {
        height: 380px;
    }
}

@media only screen and (max-width: 425px) {
    .what-you-heading h2 {
        font-size: var(--font-size20);
        line-height: 37px;
    }
    .course-details-area .what-you {
        padding: 15px;
    }
    .course-details-area .Course-details {
        padding: 15px 20px;
    }
    .course-details-area .buy-course-card {
        padding: 15px;
    }
    .course-details-area .Course-details .details-about p {
        font-size: var(--font-size12);
        line-height: 27px;
        margin-bottom: 10px;
    }
    /* right side  */
    .course-details-area .buy-course-card .buy-course-img {
        height: 270px;
    }
    .course-details-area .buy-course-content .dolars {
        font-size: var(--font-size14);
    }
    .course-details-area .buy-course-content .populer-start .star ul li i {
        font-size: var(--font-size14);
        color: var(--star);
        margin-right: 0;
    }
    .course-details-area .buy-course-content .populer-start .count span {
        font-family: var(--font-family-Montserrat);
        font-weight: var(--font-bold);
        font-size: var(--font-size14);
        color: var(--black);
    }
}

@media only screen and (max-width: 375px) {
    .course-details-area .buy-course-card .right-icon ul li i {
        font-size: 13px;
        line-height: 32px;
        width: 30px;
        height: 30px;
        margin-right: 10px;
    }
    .course-details-area .Course-details .details-about p {
        font-size: var(--font-size12);
        line-height: 27px;
        margin-bottom: 10px;
    }
    .course-details-area .buy-course-card .buy-course-img {
        height: 220px;
    }
    .course-details-area .buy-course-card .right-icon ul li i {
        font-size: 14px;
        line-height: 35px;
        width: 35px;
        height: 35px;
        margin: 3px 10px;
    }
}


/* ======= course-details  end  ======= */


/* ===== frequently section start ===== */

@media only screen and (max-width: 1024px) {
    .frequently-wrapper {
        padding: 30px 0;
    }
    .frequently-wrapper .frequently-accordion .contentBx .label {
        padding: 15px;
    }
    .frequently-wrapper .frequently-accordion .contentBx.frequently-active .content p {
        font-size: var(--font-size18);
        line-height: 32px;
    }
}

@media only screen and (max-width: 768px) {
    .frequently-wrapper {
        margin-top: 65px;
    }
    .frequently-wrapper .heading {
        width: 80%;
        padding-top: 45px;
    }
    .frequently-wrapper .frequently-wrapper {
        padding: 20px 0;
    }
    .frequently-wrapper .frequently-accordion .contentBx.frequently-active .label {
        font-size: var(--font-size18);
    }
    .frequently-wrapper .frequently-accordion .contentBx .label {
        font-size: var(--font-size18);
    }
    .frequently-wrapper .frequently-accordion .contentBx.frequently-active .content p {
        font-size: var(--font-size16);
        line-height: 28px;
    }
    .frequently-wrapper .frequently-accordion .contentBx .label::before {
        right: 5px;
        font-size: var(--font-size22);
        width: 25px;
        text-align: end;
    }
}

@media only screen and (max-width: 425px) {
    .frequently-wrapper .heading {
        width: 95%;
        padding-top: 40px;
    }
    .frequently-wrapper .frequently-wrapper {
        padding: 10px 0;
    }
    .frequently-wrapper .frequently-accordion .contentBx {
        margin: 0;
    }
    .frequently-wrapper .frequently-accordion .contentBx.frequently-active .label {
        font-size: var(--font-size14);
    }
    .frequently-wrapper .frequently-accordion .contentBx .label {
        font-size: var(--font-size14);
        padding: 15px 10px;
    }
    .frequently-wrapper .frequently-accordion .contentBx.frequently-active .content p {
        font-size: var(--font-size14);
        line-height: 23px;
    }
    .frequently-wrapper .frequently-img {
        width: 90%;
        height: 400px;
        margin: auto;
    }
    .frequently-wrapper .frequently-img img {
        padding-left: 0;
    }
}

@media only screen and (max-width: 375px) {
    .frequently-wrapper .frequently-accordion .contentBx .label {
        font-size: var(--font-size12);
    }
    .frequently-wrapper .frequently-accordion .contentBx.frequently-active .label {
        font-size: var(--font-size12);
    }
    .frequently-wrapper .frequently-accordion .contentBx.frequently-active .content p {
        font-size: var(--font-size12);
        line-height: 21px;
    }
    .frequently-wrapper .frequently-img {
        height: 350px;
    }
}


/* ===== frequently section en======= */


/* =================================== course details page  end  =================================== */


/* ======================================== exam page  start  ======================================== */


/* ======= exam details end  ======= */

@media only screen and (max-width: 1024px) {
    .exam-details-area .exam-img {
        height: 400px;
        margin: 30px 0;
    }
    .exam-details-area .details-about p {
        font-size: var(--font-size18);
        line-height: 33px;
        margin-bottom: 14px;
    }
}

@media only screen and (max-width: 768px) {
    .exam-details-area {
        margin-top: 80px;
    }
    .exam-details-area .exam-img {
        height: 320px;
        margin: 20px 0;
    }
    .exam-details-area .details-about p {
        font-size: var(--font-size12);
        line-height: 27px;
        margin-bottom: 11px;
    }
    .exam-details-area .exam-input-icon .icon {
        width: 5%;
    }
    .exam-details-area input {
        height: 36px;
    }
}

@media only screen and (max-width: 425px) {
    .exam-details-area .details-about p {
        font-size: var(--font-size10);
        line-height: 21px;
        margin-bottom: 0;
    }
    .exam-details-area .contact-preview-exam .details-about .what-you ul li {
        padding: 9px 0;
        margin-bottom: 20px;
    }
    .exam-details-area input {
        height: 30px;
    }
    .exam-details-area .exam-input-icon .icon {
        width: 10%;
    }
}


/* ======= exam details start  ======= */


/* ======================================== exam page  end  ======================================== */


/* ======================================== pdf page  start  ======================================== */


/* ========= course-details  start  ========= */

@media only screen and (max-width: 768px) {
    .pdf-details-area .Course-details .details-about p {
        font-size: var(--font-size16);
        line-height: 31px;
        margin-bottom: 14px;
    }
}

@media only screen and (max-width: 425px) {
    .pdf-details-area {
        margin-top: 76px;
    }
    .pdf-details-area .Course-details .details-about p {
        font-size: var(--font-size14);
        line-height: 26px;
        margin-bottom: 14px;
    }
    .pdf-details-area .buy-course-card-pdf {
        height: 424px;
    }
    .pdf-details-area .buy-course-card-pdf .card-pdf-icon {
        font-size: var(--font-size60);
    }
}

@media only screen and (max-width: 375px) {
    .pdf-details-area .Course-details .details-about p {
        font-size: var(--font-size12);
        line-height: 24px;
        margin-bottom: 14px;
    }
    .pdf-details-area .buy-course-card-pdf {
        height: 320px;
    }
}


/* ========= course-details  end  ========= */


/* ======================================== pdf page  end  ======================================== */


/* ======================================== video page  start  ======================================== */


/* ========== video start  ============ */

@media only screen and (max-width: 1024px) {
    .video-area .video-wrapper .video-card {
        padding: 15px;
        margin-bottom: 20px;
    }
    .video-area .video-wrapper .video-card .video-img {
        height: 170px;
    }
    .video-area .video-wrapper .video-card .video-content {
        padding: 10px 0;
    }
    .video-area .video-wrapper .video-card .video-content p {
        font-size: var(--font-size18);
        line-height: 26px;
    }
}

@media only screen and (max-width: 768px) {
    .video-area {
        margin-top: 80px;
    }
    .video-area .video-wrapper .video-card .video-content p {
        font-size: var(--font-size16);
        line-height: 26px;
    }
    .video-area .video-wrapper .video-card .video-img {
        height: 150px;
    }
}

@media only screen and (max-width: 425px) {
    .video-area .video-wrapper .video-card .video-img {
        height: 250px;
    }
    .video-area .video-wrapper .video-card .video-content p {
        font-size: var(--font-size14);
        line-height: 26px;
    }
}

@media only screen and (max-width: 375px) {
    .video-area .video-wrapper .video-card .video-img {
        height: 200px;
    }
}


/* ========== video end  ============ */


/* ======================================== video page  end  ======================================== */


/* ====================================== checkout page start ====================================== */

@media only screen and (max-width: 1024px) {
    .input-group input {
        width: 100%;
    }
    .input-group-btn {
        width: 100%;
    }
    .input-group-btn .voucher-btn {
        width: 100%;
        margin: 10px 0;
    }
}

@media only screen and (max-width: 768px) {
    /* amount start  */
    .price {
        font-size: 14px;
    }
    .price span {
        font-size: 14px;
    }
    .name a {
        font-size: 14px;
    }
    .name .fades {
        font-size: 14px;
    }
    .table-bordered>:not(caption)>* {
        font-size: 14px;
        border-width: 1px 0;
    }
    /* amount end  */
    .checkout-area .checkout-alret span {
        font-size: 13px;
    }
    .input-group-btn {
        width: 100%;
    }
    .input-group-btn .voucher-btn {
        width: 100%;
        margin: 10px 0;
    }
    .checkout-area .checkout {
        flex-wrap: wrap;
        line-height: 20px;
    }
    .checkout-area .checkout span {
        font-size: 14px;
    }
    .checkout .i-have-text {
        line-height: 38px;
    }
    .checkout-btn {
        margin: 10px 0;
    }
    .checkout-area .table-bordered tbody h4 {
        font-size: var(--font-size20);
    }
}

@media only screen and (max-width: 425px) {
    .checkout-area {
        margin-top: 70px;
    }
    .checkout-area .checkout-title h1 {
        font-size: 22px;
    }
    .checkout-area .checkout {
        display: block;
    }
    .checkout .i-have-text {
        line-height: 28px;
    }
    .checkout-area .checkout-alret span {
        font-size: 13px;
        line-height: 24px;
        padding: 10px 0;
    }
    .input-group input {
        width: 100%;
    }
    .input-group-btn {
        width: 100%;
    }
    .input-group-btn .voucher-btn {
        width: 100%;
        margin: 10px 0;
    }
    .checkout-area .table-bordered tbody h4 {
        font-size: var(--font-size18);
    }
}

@media only screen and (max-width: 375px) {
    .checkout-area .container {
        max-width: 330px;
    }
}

@media only screen and (max-width: 320px) {
    .checkout-area .container {
        max-width: 300px;
    }
}


/* =========== profile  start =========  */

@media (max-width: 768px) {
    .checkout-area .profile-wapper {
        margin-top: 95px;
        padding: 15px;
    }
    /* .PaymentMethod   */
    .checkout-area .payment-method .method-card {
        width: 90px;
        height: 65px;
    }
    .checkout-area form label {
        font-size: var(--font-size14);
        line-height: 20px;
        margin-bottom: 10px;
    }
    .checkout-area form select,
    .checkout-area form input {
        font-size: var(--font-size12);
        margin-bottom: 15px;
    }
    .checkout-area form input::placeholder {
        font-size: var(--font-size12);
    }
    .checkout-area .profile-btn {
        font-size: var(--font-size14);
        padding: 4px 20px;
    }
}

@media (max-width: 425px) {
    .checkout-area .profile-wapper {
        margin-top: 86px;
    }
    .checkout-area .profile-wapper .payment-method {
        justify-content: space-between;
    }
    .checkout-area .payment-method .method-card {
        width: 80px;
        height: 55px;
        margin: 0;
    }
    .checkout-area form {
        padding: 10px;
    }
    .checkout-area form label {
        font-size: var(--font-size12);
    }
    .checkout-area form select,
    .checkout-area form input {
        font-size: var(--font-size10);
        margin-bottom: 15px;
    }
    .checkout-area form input::placeholder {
        font-size: var(--font-size10);
    }
    .checkout-area .profile-btn {
        font-size: var(--font-size12);
        padding: 4px 20px;
    }
}

@media (max-width: 375px) {
    .checkout-area .profile-wapper {
        padding: 10px;
    }
    .checkout-area .profile-wapper .payment-method {
        margin: 15px 0;
    }
    .checkout-area .payment-method .method-card {
        width: 70px;
        height: 45px;
    }
}

@media (max-width: 370px) {
    .checkout-area {
        width: 85%;
    }
    .checkout-area .payment-method .method-card {
        width: 60px;
        height: 45px;
    }
}


/* ======== profile  end =========  */


/* ====================================== checkout page end ====================================== */


/* ================================== skills-course page start ================================= */

@media only screen and (max-width: 1024px) {
    .skills-course-area .skills-course-right .accordion-design {
        height: 321px;
    }
}

@media only screen and (max-width: 768px) {
    .skills-course-area .skills-course-left .skills-course-links ul li a {
        font-size: 15px;
    }
    .skills-course-area .skills-course-left .skills-course-links ul li {
        padding: 9px 10px;
        margin-bottom: 8px;
    }
    .skills-course-area .skills-course-left .skills-course-links ul li a i {
        width: 20px;
        height: 20px;
        line-height: 20px;
        font-size: 8px;
        margin-right: 5px;
    }
    .skills-course-area .skills-course-left .skills-course-video-header h2 {
        margin: 10px 0;
    }
}

@media only screen and (max-width: 475px) {
    .skills-course-area .skills-course-area {
        margin-top: 0;
    }
    .skills-course-area .skills-course-left {
        margin-top: 80px;
    }
    .skills-course-area .skills-course-left .skills-course-video iframe {
        height: 260px;
    }
    .skills-course-area .skills-course-left .skills-course-share {
        padding: 9px 2px;
        margin: 15px 0;
    }
    .skills-course-area .skills-course-left .skills-course-share ul li a {
        font-size: 12px;
    }
    .skills-course-area .skills-course-left .skills-course-links ul li a {
        font-size: 10px;
    }
    .skills-course-area .skills-course-left .skills-course-links ul li {
        padding: 5px 10px;
        margin-bottom: 8px;
    }
    .skills-course-area .skills-course-left .skills-course-links ul li a i {
        width: 15px;
        height: 15px;
        line-height: 15px;
        font-size: 7px;
    }
    .skills-course-area .skills-course-left .skills-course-links ul li {
        padding: 5px 10px;
        margin-bottom: 5px;
    }
    .skills-course-area .skills-course-right .according-content {
        padding: 5px 10px;
    }
    .skills-course-area .skills-course-right .skills-accordion-header h2 {
        font-size: 15px;
    }
    .skills-course-area .skills-course-right .accordint-btn button i {
        font-size: 17px;
    }
    .skills-course-area .skills-course-right .skills-course-content ul li p {
        font-size: 12px;
    }
    .skills-course-area .skills-course-right .skills-course-content ul li a i {
        width: 15px;
        height: 15px;
        line-height: 15px;
        font-size: 7px;
    }
    .skills-course-area .skills-course-right .header {
        padding: 7px 10px;
        margin-top: 40px;
    }
    .skills-course-area .skills-course-right .header h3 {
        font-size: 16px;
    }
    .skills-course-area .skills-course-right .skills-accordion-header h2 {
        font-size: 14px;
    }
    .skills-course-area .skills-course-area .admission-test {
        font-size: 16px;
    }
    .skills-course-area .skills-course-area p {
        font-size: 12px;
        line-height: 18px;
    }
    .skills-course-area .skills-course-left .skills-course-video-header h2 {
        font-size: 15px;
        margin: 13px 0;
    }
    .skills-course-area .skills-course-right .skills-accordion-header span {
        font-size: 11px;
    }
}


/* pdf  */

@media only screen and (max-width: 425px) {
    .skills-course-area .buy-course-card-pdf {
        height: 424px;
    }
    .skills-course-area .buy-course-card-pdf .card-pdf-icon {
        font-size: var(--font-size60);
    }
}

@media only screen and (max-width: 375px) {
    .skills-course-area .buy-course-card-pdf {
        height: 320px;
    }
}


/* ================================== skills-course page end ============================= */

/* ======================================= student-panel pages start ================================ */


/* ===================== view-profile page start ===================== */

@media only screen and (max-width: 1440px) {
    .view-profile-area {
        padding-top: 60px;
    }
}

@media only screen and (max-width: 768px) {
    .view-profile-area .view-profile-wrapper .view-profile-content {
        font-size: 14px;
        line-height: 30px;
    }
}

@media only screen and (max-width: 425px) {
    .view-profile-area .view-profile-wrapper .view-profile-content {
        font-size: 12px;
        line-height: 25px;
    }
}


/* ===================== view-profile page end ===================== */


/* ================== enroll profile page  start ===================== */

@media (max-width: 768px) {
    .enrolled-wrapper .card-content a h2 {
        font-size: var(--font-size14);
        margin-bottom: 10px;
    }
}


/* ================== enroll profile page  end ===================== */


/* =====================  transactions page start ===================== */

@media only screen and (max-width: 768px) {
    .transactions-area {
        margin-top: 80px;
    }
    .transactions-area thead,
    .transactions-area tr,
    .transactions-area th {
        font-size: var(--font-size12);
    }
    .transactions-area tbody,
    .transactions-area tr,
    .transactions-area td {
        font-size: var(--font-size12);
    }
}

@media only screen and (max-width: 425px) {
    .transactions-area tbody,
    .transactions-area tr,
    .transactions-area td {
        font-size: var(--font-size8);
    }
    .transactions-area thead,
    .transactions-area tr,
    .transactions-area th {
        font-size: var(--font-size8);
    }
}


/* =============================  transactions page start ============================= */


/* ==================== edit-profile page  start ==================== */


/* ============ student-panel-heading common start ============ */

@media only screen and (max-width: 425px) {
    .student-panel-heading h2 {
        font-size: var(--font-size20);
    }
}


/* ============ .student-panel-heading common end ============ */


/* ==================== edit-profile page  start ==================== */

@media only screen and (max-width: 425px) {
    .edit-profile-area .edit-profile-wrapper {
        padding: 20px;
    }
    .edit-profile-area .edit-profile-wrapper label {
        font-size: var(--font-size16);
    }
    .edit-profile-area .edit-profile-wrapper input,
    .edit-profile-area .edit-profile-wrapper textarea {
        width: 100%;
        padding: 8px;
    }
}


/* ==================== edit-profile page  end ==================== */


/* ======================================= student-panel pages end ================================== */