.hide {
    display: none !important;
}

.mt-6-5 {
    margin-top: 6.5rem;
}

.mt-48 {
    margin-top: 4.8rem;
}

.pt-34 {
    padding-top: 3.4rem;
}

.pt-60 {
    padding-top: 6rem;
}

.pt-16 {
    padding-top: 16px;
}

.pt-24 {
    padding-top: 2.4rem;
}

.pl-40 {
    padding-left: 4rem;
}

.pt-40 {
    padding-top: 4rem;
}

.pb-40 {
    padding-bottom: 4rem;
}

.pt-64 {
    padding-top: 6.4rem;
}

.pb-64 {
    padding-bottom: 6.4rem;
}

.pb-48 {
    padding-bottom: 4.8rem;
}

.pb-16 {
    padding-bottom: 1.6rem;
}

.pt-72 {
    padding-top: 7.2rem;
}

.pt-77 {
    padding-top: 7.7rem;
}

.pb-77 {
    padding-bottom: 7.7rem;
}

.pb-pt-96 {
    padding-top: 9.6rem;
    padding-bottom: 9.6rem;
}

.pt-96 {
    padding-top: 9.6rem;
}

.pb-64 {
    padding-bottom: 6.4rem;
}

.pt-40 {
    padding-top: 4rem;
}

.pt-pb-64 {
    padding-top: 6.4rem;
    padding-bottom: 6.4rem;
}

.pt-pb-60 {
    padding-top: 6rem;
    padding-bottom: 6rem;
}

.pt-88 {
    padding-top: 8.8rem;
}

.mt-64 {
    margin-top: 6.4rem;
}

.mb-96 {
    margin-bottom: 9.6rem;
}

.notifyjs-corner {
    font-size: 1.6rem;
}

/* Landing Page Style */
/* Landing Hero section starts here */

.landing-hero-sec {
    width: 100%;
    background-image: url('../images/landing_images/landing-hero-bg.png');
    background-position: center;
    background-repeat: no-repeat;
    /* background-size: cover; */
    background-size: 100% 100%;
    overflow: hidden;
    min-height: calc(100vh - 6.4rem);
}

.hero-grid {
    display: grid;
    align-items: center;
    justify-content: center;
    grid-template-columns: minmax(250px, 576px) minmax(250px, 473px);
    gap: 5rem;
    min-height: calc(100vh - 7.7rem);
    padding-left: 15px;
    padding-right: 15px;

    padding-top: 7.7rem;
    padding-bottom: 7.7rem;
}

.hero-grid .content-container {
    max-width: 572px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hero-grid .content-container .accessreis {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 300;
    font-size: 4rem;
    line-height: 5rem;
    color: #FF5A57;
}

.hero-grid .content-container .landingHading {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 700;
    font-size: 4.6rem;
    line-height: 5.6rem;
    text-transform: capitalize;
    color: #212121;
}

.hero-grid .content-container .landingHading span {
    color: #FF5A57;
}

.hero-grid .content-container .accessreis-p {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 500;
    font-size: 1.8rem;
    line-height: 3.2rem;
    color: #424242;
}

.hero-grid .content-container .btn-wraper {
    display: flex;
    align-items: center;
    column-gap: 1.9rem;
    margin-top: 1.6rem;
    white-space: nowrap;
}

.hero-grid .content-container .btn-wraper .explore-btn {
    background: #FFFFFF;
    border: 2px solid #3B1B7C;
    box-shadow: inset 0px 0px 0px 1px #0056D2;
    border-radius: 4px;
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 600;
    font-size: 1.6rem;
    line-height: 2.4rem;
    padding: 1.6rem 3.2rem;
    color: #3B1B7C;
}

.hero-grid .content-container .btn-wraper .explore-btn.active {
    background: #3B1B7C;
    color: #FFFFFF;
    border: none;
}

.hero-grid .image-container {

    max-width: 473px;
    width: 100%;
}

.hero-grid .image-container img {
    width: 100%;
}

/* Courses section starts here */

.landing-courses-sec {
    width: 100%;
    background: #F3F4F8;
}

.course-trends {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.landing-h2 {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 700;
    font-size: 3.2rem;
    line-height: 3.8rem;
    color: #212121;
}

.landing-h2>span {
    color: #3B1B7C;
}

.viewAllCards {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 2.6rem;
    color: #424242;
    text-decoration: none;
}

/* Landing course section starts here */

.landing-courses-sec .card-container {
    width: 100%;
}

.lorem-h2 {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 2.6rem;
    color: #424242;
    /* padding-left: 15px; */
    /* padding-right: 15px; */
}

.landing-courses-sec {
    width: 100%;
}

.course-menu-cards {
    width: 100%;
    display: grid;
    justify-content: center;
    gap: 2.1rem;
    /* grid-template-columns: repeat(auto-fill, 304px); */
    grid-template-columns: repeat(auto-fill, 320px);
}

.course-menu-cards .menu-card {
    width: 100%;
    display: flex;
    align-items: center;
    column-gap: 3rem;
    /* justify-content: center; */
    border: 2px solid #EEF0F6;
    border-radius: 6px;
    height: 90px;
    padding: 2.7rem 4rem;
}

.course-menu-cards .menu-card .menu-content {
    display: flex;
    flex-direction: column;
}

.menu-card .menu-content .menu-card-h2 {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 700;
    font-size: 1.6rem;
    line-height: 2.4rem;
    color: #212121;
}

.menu-card .menu-content .menu-card-p {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 2.2rem;
    color: #9E9E9E;
}

.landing-course-provider-sec {
    width: 100%;
    background: #F3F4F8;
}

.landing-course-provider-sec .swiper-slide img {
    width: 100%;
    max-height: 50px;
}

.couse-provider-h2 {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 600;
    font-size: 2.4rem;
    line-height: 3rem;
    text-align: center;
    color: #212121;
}

.couse-provider-h2 span {
    color: #3B1B7C;
}

.landing-courses-sec .mySwiper {
    justify-content: center !important;
}

.swiper .swiper-wrapper {
    align-items: center;
}

.mySwiper .swiper-slide {
    display: flex;
    justify-content: center;
}

.landing-courses-sec .mySwiper .swiper-slide img {
    width: 100%;
}

/* Landing learner section starts here */

.landing-learner-sec {
    width: 100%;
}

.landing-learner-sec .just-take-words {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 700;
    font-size: 3.2rem;
    line-height: 3.8rem;
    /* text-transform: capitalize; */
    color: #212121;
}

.landing-learner-sec .happy-leaner {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 2.8rem;
    color: #3B1B7C;
    /* padding-left: 15px;
    padding-right: 15px; */
}

.landing-learner-sec .learner-grid {
    display: grid;
    padding: 6rem 1.5rem;
    grid-template-columns: minmax(250px, 520px) minmax(250px, 531px);
    gap: 6.2rem;
    justify-content: center;
    align-items: center;

}

.landing-learner-sec.bg-circle {
    background-image: url('../images/landing_images/learner-bg.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.landing-learner-sec .learner-grid .learner-img {
    max-width: 520px;
    width: 100%;
}

.landing-learner-sec .learner-grid .learner-img img {
    width: 100%;
}

.landing-learner-sec .learner-grid .learner-content {
    max-width: 531px;
    width: 100%;
}

.learner-grid .learner-content .jenny-wilson-p {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 500;
    font-size: 3.2rem;
    line-height: 4.5rem;
    color: #424242;
}

.learner-grid .learner-content .jenny-wilson-p img {
    display: block;
}

.learner-grid .learner-content .jenny-wilson {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 700;
    font-size: 3.2rem;
    line-height: 2.8rem;
    color: #212121;
    padding-top: 6.4rem;
}

.learner-grid .learner-content .jenny-wilson-paragraph {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 2.4rem;
    line-height: 4.5rem;
    color: #212121;
    display: block;
}

.landingLearnerSlider .swiper-pagination {
    position: unset;
}

.landingLearnerSlider .swiper-pagination-bullets .swiper-pagination-bullet {
    background: #FF5A57;
    height: 1.6rem;
    width: 1.6rem;
}

/* Lorem Ipsum Section starts here */

.landing-loremIpsum-sec {
    width: 100%;
}

.lorum-ipsum-dollar {
    display: grid;
    justify-content: space-between;
    /* padding: 9.6rem 9.6rem; */
    /* padding-left: 8rem;
    padding-right: 8rem;
    padding-top: 8rem; */

    padding: 4rem 4.8rem 3.5rem 9.6rem;
    align-items: center;
    gap: 2rem;
    grid-template-columns: minmax(250px, 472px) minmax(250px, 470px);
    /* background-image: url('../images/landing_images/lorem-bg.png'); */
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-color: #E2E8F0;
    border-radius: 1.6rem;
}

.lorum-ipsum-dollar .lorum-content {
    max-width: 472px;
    width: 100%;
    display: flex;
    gap: 18px;
    flex-direction: column;
    justify-content: center;
    /* padding: 9.6rem 0; */
}

.lorum-ipsum-dollar .lorum-content .lorem-heading-2 {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-size: 5.2rem;
    line-height: 6.2rem;
    letter-spacing: -2px;
    color: #212121;
    white-space: nowrap;
}

.lorum-ipsum-dollar .lorum-content .lorem-ipsum-p {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-size: 1.8rem;
    line-height: 3rem;
    color: #424242;
}

.lorum-ipsum-dollar .lorum-content .lorem-btn-wraper {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 2.35rem;
}

.lorum-content .lorem-btn-wraper .lorem-btn {
    padding: 1.6rem 2.4rem;
    border: 2px solid #3B1B7C;
    border-radius: 2px;
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 2rem;
    letter-spacing: -0.1px;
    color: #3B1B7C;
}

.lorum-content .lorem-btn-wraper .lorem-btn.active {
    background: #3B1B7C;
    border: none;
    color: #FFFFFF;
}

.lorum-ipsum-dollar .lorum-picture {
    max-width: 481px;
    width: 100%;
    height: 100%;
    margin-top: auto;
    display: flex;
    flex-direction: column;
    justify-content: end;

}

.lorum-ipsum-dollar .lorum-picture img {
    width: 100%;
}

/* Landing articles section starts */

.landing-articles-sec {
    width: 100%;
}

.blog-container {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(405px, 426px));
    gap: 3.2rem;
    justify-content: center;
}

.blog-card {
    width: 100%;
    padding: 2.4rem 2.4rem;
    background: #FFFFFF;
    /* box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03); */
    border-radius: 3px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    justify-content: space-between;
    box-shadow: 0px 12px 40px -4px rgba(0, 0, 0, 0.08);
}

/* .blog-card .blog-card-up {} */

.blog-card .blog-card-top {
    height: 240px;
    width: 100%;
    overflow: hidden;
}

.blog-card .blog-card-top img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-card .blog-card-content {
    padding-top: 2.4rem;
    width: 100%;
}

.blog-card .blog-card-content .design-button {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: #FF5A57;
}

.blog-card .blog-card-content .art-d-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.blog-card .blog-card-content .blog-card-heading {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 600;
    font-size: 2.4rem;
    line-height: 3.2rem;
    letter-spacing: -0.01em;
    color: #212121;
    padding-top: 12px;
    padding-bottom: 12px;
}

.blog-card .blog-card-content .article-description {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 2.4rem;
    color: #616161;
}

.blog-card .profile-card {
    display: flex;
    column-gap: 12px;
    align-items: center;
}

.blog-card .profile-description {
    display: flex;
    flex-direction: column;
}

.blog-card .profile-description .profile-name {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #212121;
}

.blog-card .profile-description .profile-content {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #757575;
}

.collaborateSlider .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Media queries starts */

@media screen and (max-width: 991px) {
    .pb-pt-96 {
        padding-top: 5.6rem;
        padding-bottom: 5.6rem;
    }

    .pb-64 {
        padding-bottom: 4.4rem;
    }

    .pt-96 {
        padding-top: 7.6rem;
    }

    .hero-grid {
        display: flex;
        flex-direction: column-reverse;
        align-items: center;

    }
    .course-trends{
        margin-top: 20px;
    }


    .landing-learner-sec .learner-grid {
        grid-template-columns: 1fr;
        gap: 5rem;
        justify-items: center;
    }

    .lorum-ipsum-dollar {
        grid-template-columns: 1fr;
        padding: 3rem 3rem 0 3rem;
        justify-items: center;
        gap: 5rem;
        background-size: contain;
        background-position: bottom;
    }

    .lorum-ipsum-dollar .lorum-content {
        padding: 0rem 0;
        text-align: center;
    }

    .lorum-ipsum-dollar .lorum-content .lorem-btn-wraper {
        justify-content: center;
    }

    .landing-learner-sec .learner-grid {
        padding: 2rem 1.5rem;
    }
}

@media screen and (max-width: 768px) {

    .landing-h2 {
        font-size: 2.5rem;
        line-height: 3rem;
    }

    .course-trends {
        flex-wrap: wrap;
        /* justify-content: center; */
        padding-left: 15px;
        padding-right: 15px;
    }

    .hero-grid {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 520px) {

    .course-trends {
        flex-wrap: wrap;
        /* justify-content: center; */
        gap: 15px;
    }

    .hero-grid .content-container .landingHading {
        font-size: 2.5rem;
        line-height: 3rem;
    }

    .landing-learner-sec .just-take-words {
        font-size: 2.5rem;
        line-height: 3rem;
        padding-left: 15px;
        padding-right: 15px;
    }

    .learner-grid .learner-content .jenny-wilson-p {
        font-size: 2.2rem;
        line-height: 3.5rem;
    }

    .learner-grid .learner-content .jenny-wilson {
        font-size: 2.2rem;
        line-height: 2rem;
    }

    .lorum-ipsum-dollar .lorum-content .lorem-heading-2 {
        font-size: 2.8rem;
        line-height: 4rem;
    }


}

@media screen and (max-width: 425px) {

    .hero-grid .content-container .btn-wraper {
        flex-wrap: wrap;
        gap: 10px;
        justify-content: center;
    }

    .blog-container {
        grid-template-columns: repeat(auto-fill, 300px);
    }

    .blog-card .blog-card-top {
        height: 155px;
    }

    .blog-card .blog-card-content .blog-card-heading {
        font-size: 19px;
    }
}

/* Landing Page Ends */

.social-links {
    width: 100%;
    text-align: center;
    padding-top: 2.1rem;
    padding-bottom: 2.1rem;
    border-bottom: 1px solid #E0E0E0;

}

.social-links .social-link-heading {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 700;
    font-size: 2.4rem;
    line-height: 3rem;
    color: var(--heading-black);
}

.social-links .add-links-p {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 2.4rem;
    color: var(--text-black);
    padding-top: 4px;
}

.social-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    justify-content: center;
    max-width: 680px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.tab-content .social-field {
    display: grid;
    grid-template-columns: 39px 1fr;
    height: 40px;
    max-width: 680px;
    width: 100%;
    border-radius: 2px;
    border: 1px solid #E0E0E0;
    background: #FFFFFF;
    position: relative;
}

.tab-content .social-field #validateTwitUrl-error {
    position: absolute;
    top: 100%;
}

.tab-content .social-field .social-field-icon {
    border-right: 1px solid #E0E0E0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tab-content .social-field .social-field-icon img {
    height: 24px;
    width: 24px;
}



.social-form .form-control {
    height: 100%;
    border: none;
    outline: none;
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    color: var(--light-gray3);
}

.social-form .form-control::placeholder {
    color: #BDBDBD;
}

.social-form .field-label {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 14px;
    color: var(--light-gray3);
    padding-top: 8px;
    padding-bottom: 2.4rem;
}

.social-form .save-btn {
    width: 116px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    outline: none;
    background: var(--main-purple);
    border-radius: 2px;
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    color: #FFFFFF;
    margin-top: 1.6rem;
}

.profile-detail {
    max-width: 682px;
    width: 100%;
}

.profile-detail .about-me {
    width: 100%;
    display: flex;
    flex-direction: column;
    /* gap: 1.6rem; */
    gap: 0.6rem;
}

.profile-detail .about-me .about-heading {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    color: var(--heading-black);
}

.profile-detail .about-me .about-p {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    color: var(--text-black);
}



.text-wrap {
    word-break: break-all;
    white-space: break-spaces;
}

.work-experience {
    width: 100%;
}

.work-experience .experience-heading,
.interest-hobbies .inthobbies-heading {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    color: var(--heading-black);
}

.interest-hobbies .tag-lines {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    flex-wrap: wrap;
}

.interest-hobbies .tag-lines .tag-line {
    height: fit-content;
    width: fit-content;
    background: #E0E0E0;
    border-radius: 25px;
    padding: 4px 8px 4px 8px;
    white-space: nowrap;

    font-weight: 400;
    font-size: 12px;
    line-height: 24px;
    letter-spacing: -0.006em;
    color: #212121;

}

.work-experience .experience-detail {
    max-width: 416px;
    width: 100%;
    display: flex;
    /* align-items: center; */
    gap: 1rem;
    justify-content: space-between;
}

.work-experience .status,
.work-experience .works-at {
    width: 180px;
}

.work-experience .works-at {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.work-experience .status {
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
}

.work-experience .job-position {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    color: var(--light-gray3);
}

.work-experience .job-place {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 18px;
    color: var(--heading-black);
    word-break: break-all;
}

.field select {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    color: var(--light-gray3);
}

.experience-and-work {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 600;
    font-size: 1.8rem;
    line-height: 2.6rem;
    color: var(--text-black);
}

.optional-text {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 600;
    font-size: 1.8rem;
    line-height: 2.6rem;
    opacity: 0.6;
}

.tell-about-p {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 17px;
    color: var(--light-gray3);
}

select {
    font-family: 'FontAwesome', 'sans-serif';
}

/****** Courses Page Style *******/
.courses-section {
    width: 100%;
}

.courses-section .courses-container {
    display: grid;
    grid-template-columns: 31.9rem 1fr;
    row-gap: 3rem;
    column-gap: 2.3rem;
}

.accordian-container {
    max-width: 319px;
    width: 100%;
}

.courses-section .courses-container .filters {
    display: flex;
    align-items: center;
    gap: 6px;
}

.courses-section .courses-container .filters img {
    width: 17px;
    height: 12px;
}

.courses-section .courses-container .filters .filter {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 2.4rem;
    color: var(--text-black);
}

.courses-section .courses-container .accordion-item {
    border: none;
    background: transparent;
}

.courses-section .courses-container .accordion-item .accordion-button {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 2.4rem;
    color: var(--heading-black);
    border: none !important;
    outline: none;
    box-shadow: 0px;
    background: transparent;
    border-radius: 4px;
}

.courses-section .courses-container .accordion-item .accordion-button:active,
.courses-section .courses-container .accordion-item .accordion-button:focus {
    box-shadow: none !important;
}

.courses-section .courses-container .accordion-item .accordion-button:not(.collapsed) {
    box-shadow: none;
}

.courses-section .courses-container .accordion-item .accordion-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-bottom: 1px solid #E0E0E0;
    padding-top: 1.6rem;
    padding-bottom: 1.6rem;
}

.courses-section .courses-container .accordion-item .accordion-body .ratin-stars {
    display: flex;
    align-items: center;
    gap: 8px;
}

.courses-section .courses-container .accordion-item .accordion-body .full {
    position: relative;
    width: 9px;
    height: 8.5px;
}

.courses-section .courses-container .accordion-item .accordion-body .full::before {
    position: absolute;
    content: '\2605';
    width: 9px;
    height: 8.5px;
    top: -5px;
    font-size: 15px;
    color: #FED19C;
}

.courses-section .courses-container .accordion-item .accordion-body .radio-input {
    /* display: none; */
    width: 16px;
    height: 16px;
}

.courses-section .courses-container .accordion-item .accordion-body .radio-input:checked+.full::before,
.courses-section .courses-container .accordion-item .accordion-body .radio-input:checked+.full:nth-child(2)::before,
.courses-section .courses-container .accordion-item .accordion-body .radio-input:checked+.full:nth-child(3)::before,
.courses-section .courses-container .accordion-item .accordion-body .radio-input:checked+.full:nth-child(4)::before {
    color: hwb(60 0% 0%);
}

.courses-section .courses-container .accordion-item .accordion-body .views {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: -0.006em;
    color: var(--heading-black);
}

.courses-section .dull-text {
    color: #9E9E9E;
}

.ratin-stars .checkbox-input {
    width: 16px;
    height: 16px;
}

.ratin-stars .checkbox-label {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: -0.006em;
    color: var(--heading-black);
}

.ratin-stars .minmax {
    width: 50%;
    height: 3.2rem;
    background: #FFFFFF;
    border: 1px solid #9E9E9E !important;
    border-radius: 2px;
    padding-left: 12px;
    padding-right: 12px;
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    color: var(--heading-black);
}

.ratin-stars .minmax::placeholder {
    color: #BDBDBD;
}

.ratin-stars input[type=number]::-webkit-inner-spin-button,
.ratin-stars input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
}


.rating-sec {
    display: flex;
    align-items: center !important;
    gap: 8px;
    padding: 0.5rem 0;
}

.rating-sec .price {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 700;
    font-size: 2.2rem;
    line-height: 3.3rem;
    letter-spacing: 0.02em;
    color: #3FEF96;
    margin: 0;
}

.rating-sec .rating-text {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    line-height: 14px;
    color: var(--heading-black);
}
.rating-sec .rating-text{
    margin-top: 5px !important;
}

.rating-sec .full {
    position: relative;
    width: 9px;
    height: 8.5px;
}


.rating-sec .full::before {
    position: absolute;
    content: '\2605';
    width: 9px;
    height: 5.5px;
    top: -5px;
    font-size: 15px;
    color: #FED19C;
}

/* rating section end */

.courses-section .courses-card-container {
    width: 100%;
}

.courses-card-container .card-image {
    position: relative;
}

.courses-card-container .card-image .add-to-wishlist-btn {
    position: absolute;
    right: 8px;
    top: 8px;
    z-index: 1;
    padding: 12px 12px;
    background-color: var(--light-gray4);
    background-size: 14px;
}

.courses-section .courses-card-container .result {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 600;
    font-size: 2rem;
    line-height: 3rem;
    color: var(--heading-black);
}

.courses-section .card-wrapper,
.course-provider-section .courses-card-container .card-wrapper,
.course-cataloge-container .card-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(296px, 318px));
    justify-content: center;
    gap: 2.35rem;
    padding: 2rem 0;
}

.courses-section .courses-card-container .course-card,
.course-provider-section .courses-card-container .course-card,
.course-cataloge-container .course-card {
    width: 100%;
    box-shadow: 0px 30px 40px rgba(1, 11, 60, 0.06);
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}

.courses-section .courses-card-container .course-card .course-card-overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: calc(100% - 5rem);
    z-index: 1;
    background: var(--white);
    padding: 1.6rem;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    transform: translateY(-100%);
    transition: all .5s ease-in-out;

}

.courses-section .courses-card-container .course-card:hover .course-card-overlay {
    transform: translateY(0%);
}

.courses-section .courses-card-container .course-card .course-card-overlay .overlay-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}



/* Wishlist Toggle */
.add-to-wishlist-btn {
    height: 48px;
    width: 48px;
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--light-gray4);

    cursor: pointer;
    width: 21px;
    height: 21px;
    background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE2LjY0MDYgM0MxNS43NzA1IDMuMDAxIDE0LjkwOTkgMy4xNzc5NCAxNC4xMTE4IDMuNTE5OTJDMTMuMzEzNiAzLjg2MTkgMTIuNTk0OSA0LjM2MTY2IDEyIDQuOTg4MzdDMTEuMTI4MiA0LjA2OTg5IDkuOTk2NzIgMy40MzEzMyA4Ljc1MjU3IDMuMTU1NThDNy41MDg0MyAyLjg3OTg0IDYuMjA5MDMgMi45Nzk2NSA1LjAyMzA4IDMuNDQyMDVDMy44MzcxMiAzLjkwNDQ1IDIuODE5MzggNC43MDgxIDIuMTAxOTcgNS43NDg2NUMxLjM4NDU3IDYuNzg5MjEgMS4wMDA2MyA4LjAxODYyIDEgOS4yNzcyOEMxIDE1LjUyNzQgMTEuMjEyOCAyMS42NjIyIDExLjY1NjIgMjEuOTAzMUMxMS43NjMyIDIxLjk2NjUgMTEuODg1NiAyMiAxMi4wMTAzIDIyQzEyLjEzNTEgMjIgMTIuMjU3NCAyMS45NjY1IDEyLjM2NDQgMjEuOTAzMUMxMi43ODcyIDIxLjY2MjIgMjMgMTUuNTI3NCAyMyA5LjI3NzI4QzIyLjk5ODIgNy42MTI5OSAyMi4zMjc2IDYuMDE3MzggMjEuMTM1NCA0Ljg0MDU2QzE5Ljk0MzIgMy42NjM3MyAxOC4zMjY3IDMuMDAxOCAxNi42NDA2IDNaTTEyIDIwLjUyMjFDMTAuMjIyOCAxOS40MDI0IDIuMzc1IDE0LjE3MDIgMi4zNzUgOS4yNzcyOEMyLjM3NTg4IDguMjMyMTggMi43MTM4OSA3LjIxNDUgMy4zNDAwMyA2LjM3MTc0QzMuOTY2MTcgNS41Mjg5OSA0Ljg0NzkxIDQuOTA0OTMgNS44NTc0NyA0LjU5MDAyQzYuODY3MDMgNC4yNzUxMSA3Ljk1MTk2IDQuMjg1NyA4Ljk1NTAxIDQuNjIwMjdDOS45NTgwNiA0Ljk1NDgzIDEwLjgyNzEgNS41OTU5OCAxMS40MzYzIDYuNDUwODFDMTEuNDk5NyA2LjUzOTcyIDExLjU4MzkgNi42MTIyOCAxMS42ODE3IDYuNjYyMzZDMTEuNzc5NSA2LjcxMjQ1IDExLjg4ODEgNi43Mzg1OSAxMS45OTgzIDYuNzM4NTlDMTIuMTA4NSA2LjczODU5IDEyLjIxNyA2LjcxMjQ1IDEyLjMxNDkgNi42NjIzNkMxMi40MTI3IDYuNjEyMjggMTIuNDk2OSA2LjUzOTcyIDEyLjU2MDMgNi40NTA4MUMxMy4xNjg5IDUuNTk0NTEgMTQuMDM4MiA0Ljk1MTk4IDE1LjA0MTkgNC42MTY0N0MxNi4wNDU2IDQuMjgwOTYgMTcuMTMxNSA0LjI2OTk1IDE4LjE0MiA0LjU4NTAzQzE5LjE1MjUgNC45MDAxMSAyMC4wMzQ5IDUuNTI0ODggMjAuNjYxMyA2LjM2ODY1QzIxLjI4NzYgNy4yMTI0MSAyMS42MjUyIDguMjMxMjYgMjEuNjI1IDkuMjc3MjhDMjEuNjI1IDE0LjE2NjggMTMuNzc3MiAxOS4zOTkgMTIgMjAuNTIyMVoiIGZpbGw9IiNGRjVBNTciLz4KPC9zdmc+Cg==");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 2.1rem;
}



.add-to-wishlist-btn.active {
    animation-name: wishlist-ani;
    background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTAiIHZpZXdCb3g9IjAgMCAxMiAxMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTguNzM1OTkgMC4wODc5ODkzQzEwLjUzNSAwLjA5Njc0OCAxMS45OTEyIDEuNTUyOTcgMTIgMy4zNTJDMTIgNi42NDc5OCA2LjAwMDAyIDkuOTExOTkgNi4wMDAwMiA5LjkxMTk5QzYuMDAwMDIgOS45MTE5OSAwIDYuNTk5OTkgMCAzLjM1MkMwIDEuNTQ5MzUgMS40NjEzMyAwLjA4Nzk4OTMgMy4yNjQwMSAwLjA4Nzk4OTNDNC4zNjc0OSAwLjA3OTM4MzYgNS4zOTkxMiAwLjYzNDQgNi4wMDAwMiAxLjU1OTk4QzYuNjA1MDEgMC42Mzg5MDIgNy42MzM5OCAwLjA4NTMyNDkgOC43MzU5OSAwLjA4Nzk4OTNaIiBmaWxsPSIjRkY1QTU3Ii8+Cjwvc3ZnPgo=");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 2.1rem;
}

/* Wishlist Toggle Ends */

.courses-section .course-card .course-card-overlay .overlay-content .overlay-title {
    font-weight: 600;
    font-size: 1.6rem;
    line-height: 2rem;
    letter-spacing: -0.5px;
    color: var(--heading-black);
}

.courses-section .course-card .course-card-overlay .overlay-content .overlay-date {
    font-weight: 400;
    font-size: 1.2rem;
    line-height: 1.4rem;

    letter-spacing: -0.5px;
    text-transform: capitalize;
    color: var(--sub-heading-black);
}

.courses-section .course-card .course-card-overlay .overlay-content .overlay-desc {
    font-weight: 400;
    font-size: 1.2rem;
    line-height: 1.6rem;
    letter-spacing: -0.5px;
    text-transform: capitalize;
    color: var(--text-black);
}

.courses-section .course-card .course-card-overlay .button-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}


.courses-section .course-card .course-card-overlay .button-group .add-to-cart-btn {
    max-width: 15rem;
    width: 100%;
    height: 4rem;
    border: 1px solid var(--main-purple);
    border-radius: 2px;

    font-weight: 500;
    font-size: 1.4rem;
    line-height: 1.6rem;
    letter-spacing: -0.2px;
    color: var(--main-purple);
    background-color: var(--white);

    display: flex;
    align-items: center;
    justify-content: center;
}

.courses-section .course-card .course-card-overlay .button-group .buy-btn {
    max-width: 12.2rem;
    width: 100%;
    height: 4rem;
    left: calc(50% - 112px/2 + 78px);
    background: var(--main-purple);
    border-radius: 2px;

    font-weight: 500;
    font-size: 1.4rem;
    line-height: 1.6rem;
    letter-spacing: -0.1px;
    color: var(--white);

    display: flex;
    align-items: center;
    justify-content: center;
}

.courses-section .courses-card-container .course-card .card-image,
.course-provider-section .courses-card-container .course-card .card-image,
.course-catalogue-section .course-cataloge-container .course-card .card-image {
    height: 162px;
    width: 100%;
}

.courses-section .courses-card-container .course-card .card-image img,
.course-provider-section .courses-card-container .course-card img,
.course-catalogue-section .course-cataloge-container .course-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.courses-section .courses-card-container .course-card .card-content,
.course-provider-section .courses-card-container .course-card .card-content,
.course-catalogue-section .course-cataloge-container .course-card .card-content {
    width: 100%;
    padding: 12px 16px;
}

.courses-section .courses-card-container .course-card .card-content .d-flex,
.course-provider-section .courses-card-container .course-card .card-content .d-flex,
.course-catalogue-section .course-cataloge-container .course-card .card-content .d-flex {
    justify-content: space-between;
}

.courses-section .courses-card-container .course-card .card-content .designBtn,
.course-provider-section .courses-card-container .course-card .designBtn,
.course-catalogue-section .course-cataloge-container .course-card .designBtn {
    padding: 8px 8px;
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    line-height: 12px;
    color: #FF5A57;
    background: rgba(255, 90, 87, 0.07);
    border-radius: 2px;
}



.courses-section .courses-card-container .course-card .card-content .rating-sec,
.course-provider-section .courses-card-container .course-card .card-content .rating-sec {
    display: flex;
    align-items: center;
    gap: 8px;
}

.courses-section .courses-card-container .course-card .card-content .rating-sec .price,
.course-provider-section .courses-card-container .course-card .card-content .rating-sec .price {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 700;
    font-size: 2.2rem;
    line-height: 3.3rem;
    letter-spacing: 0.02em;
    color: #3FEF96;
    margin: 0;
}

.courses-section .courses-card-container .course-card .card-content .rating-sec .rating-text,
.course-provider-section .courses-card-container .course-card .rating-sec .rating-text {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    line-height: 14px;
    color: var(--heading-black);
}

.courses-section .courses-card-container .course-card .card-content .rating-sec .full,
.course-provider-section .courses-card-container .course-card .card-content .rating-sec .full {
    position: relative;
    width: 9px;
    height: 8.5px;
}

.courses-section .courses-card-container .course-card .card-content .rating-sec .full::before,
.course-provider-section .courses-card-container .course-card .card-content .rating-sec .full::before {
    position: absolute;
    content: '\2605';
    width: 9px;
    height: 5.5px;
    top: -7px;
    font-size: 15px;
    color: #FED19C;
}

.courses-section .courses-card-container .course-card .card-content .rating-sec input,
.course-provider-section .courses-card-container .course-card .card-content .rating-sec input {
    display: none;
}

.courses-section .courses-card-container .course-card .card-content .rating-sec input:checked+.full::before,
.course-provider-section .courses-card-container .course-card .rating-sec input:checked+.full::before {
    color: hwb(60 0% 0%);
}

.courses-section .courses-card-container .course-card .card-content .heading2,
.course-provider-section .courses-card-container .course-card .heading2,
.course-catalogue-section .course-cataloge-container .course-card .heading2,
.checkout-section .course-detail .card-content .heading2 {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 600;
    font-size: 1.6rem;
    line-height: 2rem;
    color: var(--heading-black);
    padding: 8px 0;

    height: 50px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.courses-section .courses-card-container .course-card .card-content .profile,
.course-provider-section .courses-card-container .course-card .profile,
.course-catalogue-section .course-cataloge-container .course-card .profile,
.checkout-section .course-detail .card-content .profile {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 4px;
}

.courses-section .courses-card-container .course-card .card-content .profile-image,
.course-provider-section .courses-card-container .course-card .profile-image,
.course-catalogue-section .course-cataloge-container .course-card .profile-image,
.checkout-section .course-detail .card-content .profile-image {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    overflow: hidden;
}

.courses-section .courses-card-container .course-card .card-content .profile-image img,
.course-provider-section .courses-card-container .course-card .profile-image img,
.course-catalogue-section .course-cataloge-container .course-card .profile-image img,
.checkout-section .course-detail .card-content .profile-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.courses-section .courses-card-container .course-card .card-content .profile-content .profileName,
.course-provider-section .courses-card-container .course-card .card-content .profile-content .profileName,
.course-catalogue-section .course-cataloge-container .course-card .profile-content .profileName,
.checkout-section .course-detail .card-content .profile-content .profileName {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 14px;
    letter-spacing: -0.5px;
    text-transform: capitalize;
    color: #616161;
}

.courses-section .courses-card-container .course-card .card-bottom,
.course-provider-section .courses-card-container .course-card .card-bottom,
.course-catalogue-section .course-cataloge-container .course-card .card-bottom {
    padding: 12px 16px;
    border-top: 1px solid #F0F0F5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 5rem;
}

.courses-section .courses-card-container .course-card .card-bottom .price,
.course-provider-section .courses-card-container .course-card .card-bottom .price,
.course-catalogue-section .course-cataloge-container .course-card .card-bottom .price {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 16px;
    letter-spacing: -0.2px;
    color: #9347C9;
}

.courses-section .courses-card-container .course-card .card-bottom .view-detail,
.course-provider-section .courses-card-container .course-card .card-bottom .view-detail,
.course-catalogue-section .course-cataloge-container .course-card .card-bottom .view-detail {
    font-family: 'Hind';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    color: var(--text-black);
    text-decoration: none;
}

.courses-section .courses-card-container .nav,
.course-provider-section .courses-card-container .nav {
    display: flex;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    justify-content: center;
}

.courses-section .courses-card-container .nav .nav-link,
.course-provider-section .courses-card-container .nav .nav-link {
    width: 4rem;
    height: 4rem;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: var(--light-gray3);
}

.courses-section .courses-card-container .nav .nav-link.active,
.course-provider-section .courses-card-container .nav .nav-link.active {
    background: var(--main-purple) !important;
    color: #FFFFFF;
}

.courses-section .courses-card-container .buttons,
.course-provider-section .courses-card-container .buttons {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    border-top: 1px solid #EAECF0;
    padding-top: 2rem;
    padding-left: 15px;
    padding-right: 15px;
}

.courses-section .courses-card-container .buttons .prev,
.courses-section .courses-card-container .buttons .next,
.course-provider-section .courses-card-container .buttons .prev,
.course-provider-section .courses-card-container .buttons .next {
    background: transparent;
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: var(--main-purple);
}

.courses-section .courses-card-container .buttons .prev.disabled,
.courses-section .courses-card-container .buttons .next.disabled,
.course-provider-section .courses-card-container .buttons .prev.disabled,
.course-provider-section .courses-card-container .buttons .next.disabled {
    color: var(--light-gray5);
}

/* Course Section Ends */

/* Course Listings Style */
/* Course provider section starts here */


.course-provider-section {
    width: 100%;
}

.course-provider-section::before {
    content: '';
    width: 100%;
    height: 200px;
    background-image: url('../images/blue-section.png');
    background-position: center right;
    background-repeat: no-repeat;
    background-size: cover;
    display: block;
}

.course-provider-section .course-provider {
    width: 100%;
    display: grid;
    grid-template-columns: 196px 1fr;
    gap: 2rem;
    /* padding-left: 15px;
    padding-right: 15px; */
}

.course-provider-section .course-provider .course-provider-profile {
    max-width: 196px;
    width: 100%;
}

.course-provider-section .course-provider .profile-photo {
    width: 100%;
    box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.1);
    background-color: var(--white);
    height: 208px;
    /* margin-top: -106px; */
}

.course-provider-section .course-provider .goto-buttons {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 10px;
}

.course-provider-section .course-provider .goto-buttons .social-btns {
    width: 100%;
    height: 4.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 19px;
    color: var(--heading-black);
    background: var(--light-gray5);
    border-radius: 2px;
}

.course-provider-section .course-provider .course-provider-detail {
    display: flex;
    flex-direction: column;
    gap: 4.4rem;
    justify-content: space-between;
    max-width: 932px;
}


.course-provider-section .course-provider .course-provider-detail .top-info {
    /* display: flex;
    flex-direction: column;
    gap: 1rem; */

    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: fit-content;
    margin-left: auto;
}

.course-provider-section .course-provider .course-provider-detail .top-info-container {
    /* display: flex;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap; */
    width: fit-content;
}

.course-provider-section .course-provider .course-provider-detail .top-info .cProvider-headimg {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 26px;
    color: #BDBDBD;
}

.course-provider-section .course-provider .course-provider-detail .top-info .review-p {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 19px;
    color: var(--heading-black);
}

.course-provider-section .course-provider .course-provider-detail .DeepLearning {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 700;
    font-size: 3.2rem;
    line-height: 3.8rem;
    color: var(--heading-black);
}

.course-provider-section .course-provider .course-provider-detail .lewrningDetail {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 1.8rem;
    line-height: 3rem;
    color: var(--text-black);
    padding-top: 2rem;
}

.course-provider-section .course-provider .course-provider-detail .date {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 700;
    font-size: 2.4rem;
    line-height: 3.8rem;
    color: var(--heading-black);
}

/* Course provider section ends here */


/* Course Listings Ends Here */

/* My cart page starts here */

.my-cart-section .cart-container {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr minmax(0rem, 32.9rem);
    gap: 2rem;
}

.my-cart-section .cart-container .cart-items {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

.my-cart-section .cart-container .cart-items .cart-item .cart-image {
    grid-area: checkoutcartimage;
}

.my-cart-section .cart-container .cart-items .cart-item .content {
    grid-area: checkoutcartcontent;
}

.my-cart-section .cart-container .cart-items .cart-item {
    width: 100%;
    display: grid;
    grid-template-columns: 19rem 1fr;
    grid-template-areas: "checkoutcartimage checkoutcartcontent";
    border: 1px solid var(--light-gray5);
    background: #FFFFFF;
}



.my-cart-section .cart-container .cart-items .cart-item .cart-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.my-cart-section .cart-container .cart-items .cart-item .content {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto auto;
    justify-content: space-between;
    padding: 1.3rem;
    gap: 1rem;
}

/* .my-cart-section .cart-container .cart-items .cart-item .card-content{
    padding: 1.2rem 1.6rem;
} */

.my-cart-section .cart-container .course-detail .card-content .designBtn {
    padding: 8px 8px;
    font-weight: 600;
    font-size: 12px;
    line-height: 12px;
    color: #FF5A57;
    background: rgba(255, 90, 87, 0.07);
    border-radius: 2px;
}

.my-cart-section .cart-container .course-detail .card-content .heading2 {
    font-weight: 600;
    font-size: 1.6rem;
    line-height: 2rem;
    color: var(--heading-black);
    padding: 8px 0;
}

.my-cart-section .cart-container .course-detail .card-content .profile {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 4px;
}

.my-cart-section .cart-container .course-detail .card-content .profile-image {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    overflow: hidden;
}

.my-cart-section .cart-container .course-detail .card-content .profile-image img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
}

.course-detail .card-content .profile-content .profileName {
    font-weight: 400;
    font-size: 12px;
    line-height: 14px;
    letter-spacing: -0.5px;
    text-transform: capitalize;
    color: #616161;
}

.course-detail .card-content {
    padding-bottom: 0 !important;
}

.course-detail .card-content .listing {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding-top: 10px;
    column-gap: 23px;
}

.course-detail .card-content .listing li {
    list-style: disc;
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 24px;
    letter-spacing: -0.006em;
    color: var(--light-gray3);
}

.my-cart-section .cart-container .cart-items .cart-item .content .course-detail {
    max-width: 514px;
    width: 100%;
}

.my-cart-section .cart-container .cart-items .cart-item .content .action-column {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
}

.my-cart-section .cart-container .cart-items .cart-item .content .action-column .action-link.redtext {
    color: #FF5A57;
}

.my-cart-section .cart-container .cart-items .cart-item .content .action-column .action-link {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.5px;
    color: #3B1B7C;
    text-decoration: none;
}

.my-cart-section .cart-container .cart-items .cart-item .content .price-column {
    width: 100%;
    height: 11.4rem;
    display: flex;
    align-items: center;
}

.my-cart-section .cart-container .cart-items .cart-item .content .price-column .price-value {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 600;
    font-size: 2rem;
    line-height: 2rem;
    letter-spacing: -0.5px;
    color: var(--main-purple);
}

.my-cart-section .cart-container .cart-summary {
    max-width: 329px;
    width: 100%;
    background: #FFFFFF;
    /* opacity: 0.2; */
    border: 1px solid var(--light-gray5);
    max-height: 416px;
    padding: 16px 16px;
}

.my-cart-section .cart-container .cart-summary .summaryHeading {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 600;
    font-size: 2.4rem;
    line-height: 2.4rem;
    letter-spacing: -0.5px;
    color: var(--heading-black);
    padding-top: 1rem;
    padding-bottom: 1.6rem;
}

.my-cart-section .cart-container .cart-summary .summary-table {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
}

.my-cart-section .cart-container .cart-summary .summary-table .price-is {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    text-align: right;
    color: var(--heading-black);
}

.my-cart-section .cart-container .cart-summary .summary-table .total-price {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: -0.5px;
    color: var(--heading-black);
}

.my-cart-section .cart-container .cart-summary .summary-table .total-price-gigits {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 24px;
    color: var(--heading-black);
}

.my-cart-section .cart-container .cart-summary .summary-field {
    width: 100%;
    height: 5.2rem;
    display: grid;
    grid-template-columns: 1fr 4.2rem;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(117, 117, 117, 0.2);
    border-radius: 1px;
}

.my-cart-section .cart-container .cart-summary .summary-field .summary-input {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    padding-left: 8px;
    padding-right: 8px;
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -1px;
    color: var(--heading-black);
}

.my-cart-section .cart-container .cart-summary .summary-field .summary-input::placeholder {
    color: #9E9E9E;
}

.my-cart-section .cart-container .cart-summary .summary-field .promo {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.my-cart-section .cart-container .cart-summary .proceed-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    width: 100%;
    height: 5.2rem;
    background: var(--main-purple);
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 17px;
    text-transform: capitalize;
    color: #FFFFFF;
}

/* My cart page ends here */


/* Course Catalogue Page Starts */
.course-catalogue-section {
    width: 100%;
}

.course-cataloge-container {
    width: 100%;
    display: grid;
    grid-template-columns: 29.9rem 1fr;
    justify-content: space-between;
    column-gap: 3.5rem;
    row-gap: 5rem;
}

.course-cataloge-container .course-menu-box {
    max-width: 32.9rem;
    width: 100%;
    background: #FFFFFF;
    border: 1px solid var(--light-gray5);
    box-shadow: 0px 4.00183px 24.011px rgba(0, 0, 0, 0.1);
    border-radius: 2px;
    display: flex;
    flex-direction: column;
    padding-top: 3rem;
    padding-bottom: 3rem;
    height: 15.1rem;
    gap: 3.1rem;
}

.course-menu-box .course-link {
    position: relative;
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 600;
    font-size: 2rem;
    line-height: 3rem;
    color: var(--heading-black);
    display: block;
    padding-left: 1.8rem;
    padding-right: 1.8rem;
}

.course-menu-box .course-link.active {
    color: var(--main-purple);
}

.course-menu-box .course-link.active::before {
    position: absolute;
    content: '';
    height: 15px;
    width: 5px;
    background: var(--main-purple);
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}


.course-cataloge-container .found-courses {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
}

.course-cataloge-container .found-courses .filter {
    display: flex;
    align-items: center;
    gap: 1.6rem;
}

.course-cataloge-container .found-courses .filter-select {
    padding: 1.2rem 4rem 1.2rem 1.6rem;
    border: 1px solid #9E9E9E;
    border-radius: 2px;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: var(--text-black);
    height: 4.5rem;
    min-width: 145px;
}

.course-cataloge-container .found-courses .filter-select option {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 30px !important;
    width: 187px !important;
    color: var(--text-black);
    background: #FFFFFF;
    padding: 10px 0;
}

.course-cataloge-container .found-courses .search-box {
    max-width: 30.5rem;
    width: 100%;
    display: grid;
    grid-template-columns: 30px 1fr;
    align-items: center;
    height: 4.5rem;
    background: #FFFFFF;
    border: 1px solid #9E9E9E;
    border-radius: 2px;
    padding-left: 11px;
    padding-right: 11px;
}

select {
    appearance: none;
    background-image: url(../images/select-arrow.svg);
    background-position: center right 1.2rem;
    background-repeat: no-repeat;
    background-color: var(--white);
}

.course-cataloge-container .found-courses .search-box .searc-corse-field {
    width: 100%;
    height: 100%;
    outline: none;
    border: none;
    background: transparent;
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    color: var(--text-black);
}

.course-cataloge-container .found-courses .search-box .searc-corse-field::placeholder {
    color: #BDBDBD;
}



/* Course catalogue Card Style */
.course-card .card-image {
    position: relative;
}

.course-card .card-image .dotted-menu button {
    background: transparent;
    border: none;
    outline: none;
    height: 28px;
    width: 28px;
}

.course-card .card-image .dotted-menu {
    position: absolute;
    right: 12px;
    top: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    cursor: pointer;
}

.course-card .card-image .dotted-menu button:focus+.dotted-menu-list {
    scale: 1;
}

.course-card .card-image .dotted-menu .dotted-menu-list {
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--white);
    padding: 0px;

    transition: .3s ease-in;
    transform-origin: top right;
    scale: 0;
}

.course-card .card-image .dotted-menu .dotted-menu-list .list-item {
    min-height: 4rem;
    min-width: 18rem;
    width: fit-content;
    white-space: nowrap;
}

.course-card .card-image .dotted-menu .dotted-menu-list .list-item .link,
.course-card .card-image .dotted-menu .dotted-menu-list .list-item.share {
    display: block;
    padding: 1rem 1.6rem 1rem 1.6rem;
    display: grid;
    grid-template-columns: 16px 1fr;
    gap: 1.2rem;
}

.course-card .card-image .dotted-menu .dotted-menu-list .list-item .link img,
.course-card .card-image .dotted-menu .dotted-menu-list .list-item.share img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    object-position: center;
}

.course-card .card-image .dotted-menu .dotted-menu-list .list-item .link span,
.course-card .card-image .dotted-menu .dotted-menu-list .list-item.share span {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 2rem;
    color: var(--text-black);
}

.course-cataloge-container .course-card .play-btn {
    display: inline-block;
    height: 5.6rem;
    width: 5.6rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    opacity: 0;
    transition: .3s ease;
}

.course-cataloge-container .course-card:hover .play-btn {
    opacity: 1;
}


.course-cataloge-container .course-card.completed:hover .progress-container {
    display: block !important;
}

/* .course-cataloge-container .course-card:hover .progress-container,
.course-cataloge-container .course-card.completed:hover .progress-container .progress-value .perc {
    display: none;
} */

.course-cataloge-container .course-card.completed:hover .progress-container .progress-value .great-work {
    display: block;
}

.course-cataloge-container .course-card.completed .rate-course-link {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 14px;

    letter-spacing: -0.5px;
    text-transform: capitalize;
    color: #3B1B7C;
    height: 35px;

    display: flex;
    align-items: center;
    cursor: pointer;
}

.course-catalogue-section .course-cataloge-container .course-card .course-start-p {
    text-align: left;
    font-weight: 600;
    font-size: 14px;
    line-height: 16px;
    letter-spacing: -0.203333px;
    color: var(--main-purple);
    display: none;
}

.course-catalogue-section .course-cataloge-container .course-card:hover .course-start-p {
    display: block;
}

.card-course-progress {
    width: 100%;
    height: 5px;
    border-radius: 0px;
}

.card-course-progress .progress-bar {
    background-color: #48CFF0;
}

.progress-container {
    width: 100%;
}

.progress-container .progress-value {
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    display: flex;
    align-items: center;
    letter-spacing: -0.170908px;
    color: #48CFF0;
    margin-top: 7px;
}

/* Course catalogue Card Style */


.shareCourseModel .modal-header {
    border: none !important;
}

.shareCourseModel .modal-content {
    padding: 1.6rem 2rem;
}

.shareCourseModel .modal-title {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 600;
    font-size: 1.6rem;
    line-height: 2.4rem;
    color: var(--heading-black);
}

.shareCourseModel .modal-body .copy-text-feild {
    display: grid;
    grid-template-columns: 1fr 6.9rem;
    height: 4rem;
    background: #FFFFFF;
    border: 1px solid var(--text-black);
    border-radius: 2px;
}

.shareCourseModel .modal-body .copied-text-container {
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    outline: none;
    padding: 0 9px;
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    color: var(--text-black);
}

.shareCourseModel .modal-body .copy-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    border: none;
    background: var(--main-purple);
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 17px;
    color: #FFFFFF;
}

.shareCourseModel .modal-footer {
    border: none !important;
}

.shareCourseModel .modal-footer .social-icons {
    max-width: 176px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    align-items: center;
    gap: 1.6rem;
}

.shareCourseModel .modal-body .copied-text-container::placeholder {
    color: #616161;
}


/* Course Catalogue Page Ends */


/* Qama Steaming Course Page */
/* VIdeo section starts here */

.qama-videostreamimg-section .grid-container {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 32.9rem;
    gap: 2rem;
    padding-left: 15px;
    padding-right: 15px;

}

.qama-videostreamimg-section .grid-container .video-box {
    width: 100%;
}

.qama-videostreamimg-section .grid-container .video-box .share-video {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.qama-videostreamimg-section .grid-container .video-box .share-video .webDesig-h2 {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 600;
    font-size: 2rem;
    line-height: 2.4rem;
    color: var(--heading-black);
}

.qama-videostreamimg-section .grid-container .video-box .share-video .share-video-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.qama-videostreamimg-section .grid-container .video-box .share-video .share-video-btn span {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: var(--text-black);
}

.qama-videostreamimg-section .grid-container .video-box .course-video {
    width: 100%;
    aspect-ratio: 2/1;
    background: var(--black);
}

.qama-videostreamimg-section .instructor-tabs-wrapper {
    max-width: 78rem;
    width: 100%;
}

.qama-videostreamimg-section .instructor-tabs-wrapper .instructor-tabs {
    width: 100%;
    display: flex;
    align-items: center;
    /* justify-content: space-between; */
    gap: 4rem;
    border-bottom: 1px solid var(--light-gray5);
}

.qama-videostreamimg-section .instructor-tabs-wrapper .instructor-tabs .nav-link {
    width: auto;
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 16px;
    color: var(--heading-black);
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 10px;
    background-color: var(--white);
}

.qama-videostreamimg-section .instructor-tabs-wrapper .instructor-tabs .nav-link.active {
    border-bottom: 4px solid var(--main-purple);
    background: transparent !important;
    color: var(--heading-black);
}

.qama-videostreamimg-section .instructor-tabs-wrapper .instructor-tabs .nav-item {
    padding: 0;
}

.qama-videostreamimg-section .instructor-tabs-wrapper .instructor-tabs-content .course-introduction-p {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    color: var(--text-black)
}

.qama-videostreamimg-section .instructor-tabs-wrapper .instructor-tabs-content .instructer-details-sec {
    width: 100%;
}

.qama-videostreamimg-section .instructor-tabs-wrapper .instructor-tabs-content .instructer-details-sec .instructor-h2 {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: var(--heading-black);
}

.qama-videostreamimg-section .instructor-tabs-wrapper .instructor-tabs-content .instructer-details-sec .instructor-cards {
    width: 100%;
}

.qama-videostreamimg-section .instructor-tabs-wrapper .instructer-details-sec .instructor-cards .instructor-prfile {
    width: 100%;
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 12px;
    padding-top: 2rem;
    padding-bottom: 2rem;
    align-items: center;
}

.qama-videostreamimg-section .instructor-tabs-wrapper .instructer-details-sec .instructor-cards .instructor-prfile .profile-pic {
    max-width: 40px;
    width: 100%;
    border-radius: 50%;
}

.qama-videostreamimg-section .instructor-tabs-wrapper .instructer-details-sec .instructor-cards .instructor-prfile .profile-pic img {
    width: 100%;
    object-fit: cover;
}

.qama-videostreamimg-section .instructor-tabs-wrapper .instructer-details-sec .instructor-cards .instructor-prfile .profile-information {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.qama-videostreamimg-section .instructor-tabs-wrapper .instructor-prfile .profile-information .instructorName {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 2.8rem;
    color: var(--heading-black);
}

.qama-videostreamimg-section .instructor-tabs-wrapper .instructor-prfile .profile-information .designation {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 2.8rem;
    color: var(--light-gray3);
}

.qama-videostreamimg-section .grid-container .video-course-container {
    max-width: 32.9rem;
    width: 100%;
}

.qama-videostreamimg-section .grid-container .video-course-container .your-progress {
    display: block;
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 10px;
    line-height: 10px;
    letter-spacing: -0.5px;
    color: var(--light-gray3);
}

.qama-videostreamimg-section .grid-container .video-course-container .circular-progress-main {
    width: 100%;
    padding-top: 13px;
    padding-bottom: 1.8rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.qama-videostreamimg-section .grid-container .video-course-container .circular-progress-main .done {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 16px;
    letter-spacing: -0.5px;
}

.qama-videostreamimg-section .radialProgressBar {
    border-radius: 50%;
    /* -webkit-transform: translate(50%, 50%); */
    /* transform: translate(50%, 50%); */
    width: 28px;
    height: 28px;
    /* display: -webkit-box;
    display: -ms-flexbox; */
    display: flex;
    background: #dddddd;
    /* margin: 20px;
  float: left; */
}

.qama-videostreamimg-section .radialProgressBar .overlay {
    border-radius: 50%;
    width: 25px;
    height: 25px;
    margin: auto;
    background: #ffffff;
    /* text-align: center; */
    /* padding-top: 30%; */
}

.qama-videostreamimg-section .progress-10 {
    background-image: -webkit-linear-gradient(36deg, #ddd 50%, transparent 50%), -webkit-linear-gradient(left, #028cd5 50%, #ddd 50%);
    background-image: linear-gradient(20deg, #ddd 50%, transparent 50%), linear-gradient(90deg, #028cd5 50%, #ddd 50%);
}

.qama-videostreamimg-section .circular-progress-main .complete {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    letter-spacing: -0.5px;
    color: #616161;
}

.qama-videostreamimg-section .video-course-container .course-accordians {
    width: 100%;
    border: 1px solid var(--light-gray5);
    padding: 10px 12px;
    min-height: 494px;
}

.qama-videostreamimg-section .course-accordians .accordion .accordion-item {
    background: transparent;
    border: none;
}

.qama-videostreamimg-section .course-accordians .accordion .accordion-button {
    background: transparent;
    border: none !important;
    box-shadow: none;
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 16px;
    letter-spacing: -0.5px;
    color: var(--heading-black);
}

.qama-videostreamimg-section .course-accordians .accordion .accordion-button::after {
    content: unset;
}

.qama-videostreamimg-section .course-accordians .accordion .accordion-body {
    width: 100%;
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.qama-videostreamimg-section .course-accordians .accordion .accordion-body .video-link {
    width: 100%;
    display: grid;
    grid-template-columns: 16px 1fr;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
}

.qama-videostreamimg-section .course-accordians .accordion .accordion-body .video-link.active {
    background: var(--light-gray5);
}

.qama-videostreamimg-section .course-accordians .accordion .accordion-body .video-link .video-detail {
    width: 100%;
}

.qama-videostreamimg-section .course-accordians .accordion-body .video-heading {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: -0.5px;
    color: var(--heading-black);
}

.qama-videostreamimg-section .course-accordians .accordion-body .duration {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 10px;
    line-height: 10px;
    letter-spacing: -0.5px;
    color: var(--light-gray3);
    padding-top: 4px;
    display: block;
}



/* VIdeo section ends here */

@media screen and (max-width: 991px) {

    /* Video Section Starts */

    .qama-videostreamimg-section .grid-container {
        grid-template-columns: 1fr;

    }
}

/* @media screen and (max-width: 768px) {
    .cart-container .cart-items .cart-item {
        grid-template-columns: 1fr;
    }
} */

@media screen and (max-width: 520px) {


    /* Video section page */
    .qama-videostreamimg-section .grid-container .video-box .share-video .webDesig-h2 {
        font-size: 1.5rem;
        line-height: 1.8rem;
    }
}

/* Qama Streaming Course Page */


/* Checkout Screen */
.checkout-section {
    width: 100%;
    max-width: 1027px;
    margin: auto;
}

.checkout-section .checkout-grid {
    display: grid;
    grid-template-columns: minmax(0, 67.8rem) 32.9rem;
    gap: 2rem;
}

.checkout-section .checkout-grid .checkouts {
    max-width: 67.8rem;
    width: 100%;
    padding: 4rem 2.4rem;
    border: 1px solid #DFDFDF;
}

.checkout-section .checkout-grid .checkouts .chekout-h2 {
    font-weight: 700;
    font-size: 3.2rem;
    line-height: 4rem;
    color: #212121;
}

.checkout-section .checkout-grid .checkouts .payment-form {
    width: 100%;
}

.checkout-section .checkout-grid .checkouts .payment-form .payments-label {
    font-weight: 600;
    font-size: 2.4rem;
    line-height: 2rem;
    letter-spacing: -0.5px;
    color: #212121;
    display: block;
    padding-bottom: 1.7rem;
}

.checkout-section .checkout-grid .checkouts .payment-form .payment-wraper {
    width: 100%;
    display: flex;
    align-items: center;
    column-gap: 2.4rem;
}

.checkout-section .checkout-grid .checkouts .payment-form .payment-by-card,
.checkout-section .checkout-grid .checkouts .payment-form .paypal {
    display: flex;
    align-items: center;
    gap: 8px;
}

.checkout-section .checkout-grid .checkouts .payment-form .payment-by-card input,
.checkout-section .checkout-grid .checkouts .payment-form .paypal input {
    accent-color: #3B1B7C;
}

.checkout-section .checkout-grid .checkouts .payment-form .payment-cards {
    display: flex;
    align-items: center;
    gap: 8px;
}

.checkout-section .checkout-grid .checkouts .fields-container {
    width: 100%;
}

.checkout-section .checkout-grid .checkouts .field-label {
    display: block;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.005em;
    color: #424242;
    text-align: left;
    padding-bottom: 6px;
}

.checkout-section .checkout-grid .checkouts .field-input {
    width: 100%;
    height: 4.2rem;
    padding-left: 12px;
    padding-right: 12px;
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
    border-radius: 2px;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #424242;
}

.checkout-section .checkout-grid .checkouts #cvc {
    background-image: url('../images/cvc.svg');
    background-repeat: no-repeat;
    background-size: 25px 18px;
    background-position: center right 5px;
}

.checkout-section .checkout-grid .checkouts .fields-container .field-input::placeholder {
    color: #BDBDBD;
}

.checkout-section .checkout-grid .checkouts .d-flex {
    column-gap: 16px;
}

.checkout-section .checkout-grid .checkouts .check-box {
    display: flex;
    align-items: center;
    column-gap: 8px;
}

.checkout-section .checkout-grid .checkouts .check-box label {
    padding-bottom: 0;
}

.checkout-section .checkout-grid .checkouts .check-box-field {
    width: 16px;
    height: 16px;
    background: #FFFFFF;
    border: 1px solid #9E9E9E;
    border-radius: 1px;
    accent-color: #3B1B7C;
}

.checkout-section .checkout-grid .checkouts input[type=number]::-webkit-inner-spin-button,
.checkout-section .checkout-grid .checkouts input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.checkout-section .checkout-grid .checkout-summary {
    max-width: 329px;
    width: 100%;
    background: #FFFFFF;
    /* opacity: 0.2; */
    border: 1px solid #EEEEEE;
    /* max-height: 416px; */
    padding: 16px 16px;
}

.checkout-section .checkout-grid .checkout-summary .summaryHeading {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 600;
    font-size: 2.4rem;
    line-height: 2.4rem;
    letter-spacing: -0.5px;
    color: #212121;
    padding-top: 1rem;
    padding-bottom: 1.6rem;
}

.checkout-section .checkout-grid .checkout-summary .summary-table {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
}

.checkout-section .checkout-grid .checkout-summary .summary-table .price-is {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    text-align: right;
    color: #212121;
}

.checkout-section .checkout-grid .checkout-summary .summary-table .total-price {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: -0.5px;
    color: #212121;
}

.checkout-section .checkout-grid .checkout-summary .summary-table .total-price-gigits {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 24px;
    color: #212121;
}

.checkout-section .checkout-grid .checkout-summary .summary-field {
    width: 100%;
    height: 5.2rem;
    display: grid;
    grid-template-columns: 1fr 4.2rem;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(117, 117, 117, 0.2);
    border-radius: 1px;
}

.checkout-section .checkout-grid .checkout-summary .summary-field .summary-input {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    padding-left: 8px;
    padding-right: 8px;
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -1px;
    color: #212121;
}

.checkout-section .checkout-grid .checkout-summary .summary-field .summary-input::placeholder {
    color: #9E9E9E;
}

.checkout-section .checkout-grid .checkout-summary .summary-field .promo {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.checkout-section .checkout-grid .checkout-summary .proceed-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    width: 100%;
    height: 5.2rem;
    background: #3B1B7C;
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 17px;
    text-transform: capitalize;
    color: #FFFFFF;
}

.checkout-section .checkout-grid .checkout-summary .agree-p {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.005em;
    color: #212121;
}

.checkout-section .checkout-grid .checkout-summary .termsOfService {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.005em;
    color: #418FEA;
}

.checkout-section .Order-detail {
    max-width: 693px;
    width: 100%;
    /* padding-left: 15px;
    padding-right: 15px; */
}

.checkout-section .cart-item {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(15rem, 19rem) 1fr;
    /* border: 1px solid #EEEEEE; */
    background: #FFFFFF;
}

.checkout-section .course-detail .card-content {
    padding-top: 3px !important;
    padding-bottom: 9px !important;
    padding-left: 16px;
    padding-right: 16px;
}

.checkout-section .cart-item .cart-image {
    max-width: 19rem;
    width: 100%;
}

.checkout-section .cart-item .cart-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.checkout-section .cart-item .content {
    width: 100%;
    display: grid;
    justify-content: space-between;
    padding-right: 13px;
}

.checkout-section .cart-item .cost {
    font-weight: 600;
    font-size: 2rem;
    line-height: 2rem;
    letter-spacing: -0.5px;
    color: #3B1B7C;
}

@media screen and (max-width: 768px) {
    .checkout-section .checkout-grid {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 475px) {
    .checkout-section .checkout-grid .checkouts .check-box label {
        line-height: 14px;
    }

    .checkout-section .checkout-grid .checkouts .check-box {
        align-items: flex-start;
    }

    .checkout-section .cart-item {
        grid-template-columns: 1fr;
    }

    .checkout-section .course-detail .card-content {
        padding-left: 0 !important;
    }

}

/* Checkout Screen */


/* Course Detail Page Starts */
.pt-50 {
    padding-top: 5rem;
}

.mt-mb-8 {
    margin-top: 8px;
    margin-bottom: 8px;
}

.pl-pr-15 {
    padding-left: 15px;
    padding-right: 15px;
}

.mt-20 {
    margin-top: 20px;
}

.pb-20 {
    padding-bottom: 2rem;
}

/* courses video section starts */

/* .breadcrumb-item+.breadcrumb-item::before {
    float: left;
    padding-right: 0.5rem;
    color: #6c757d;
    content: var(--bs-breadcrumb-divider, url('../images/20221213110843.jpg'));
} */

.courses-video-sec {
    width: 100%;
}

.courses-video-sec .css-grid-area {
    display: grid;
    justify-content: center;
    grid-template-columns: 1fr 44.5rem;
    gap: 2rem;
    grid-template-areas: "machine videos"
        "outcomes videos";
    height: 400px;
    height: auto;
}

.machine {
    grid-area: machine;
    width: 100%;
    /* padding-top: 3rem; */
    /* padding-bottom: 3rem; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
}

.machine .machine-h2 {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 700;
    font-size: 3.2rem;
    line-height: 3.8rem;
    color: #212121;
}

.machine .machine-detail {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 1.8rem;
    line-height: 3rem;
    letter-spacing: -0.05em;
    color: #424242;
}

.machine .AI-learning {
    display: flex;
    align-items: center;
    gap: 6px;
}

.machine .AI-learning .deapLearn {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: -0.006em;
    color: #212121;
}

.machine .rating-box {
    display: flex;
    align-items: center;
    gap: 6px;
}

.machine .rating-box .ration-count {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: -0.006em;
    color: #616161;
}

.machine .rating-box .total-rating {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: -0.006em;
    color: #3B1B7C;
}

.video-div {
    grid-area: videos;
    max-width: 44.5rem;
    width: 100%;
    /* background: blue; */

}

.video-div .course-video-cont {
    width: 100%;
    border: 1px solid #E0E0E0;
    padding: 12px 16px;
    position: sticky;
    top: 7.2rem;
}

.video-div .course-video-cont .video-box {
    width: 100%;
    height: 26.3rem;
    position: relative;
    overflow: hidden;
}

.video-div .course-video-cont .video-box img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
}

.video-div .course-video-cont .video-box .play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.video-div .course-video-cont .video-box .preview-course {
    position: absolute;
    left: 50%;
    bottom: 19px;
    transform: translateX(-50%);
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 500;
    font-size: 17.9546px;
    white-space: nowrap;
    line-height: 26px;
    letter-spacing: -0.006em;
    color: #FFFFFF;
}

.video-div .course-video-cont .heart-icon-sec {
    display: flex;
    gap: 10px;
    justify-content: space-between;
    align-items: center;
}

.video-div .course-video-cont .heart-icon-sec .direct-flex {
    display: flex;
    flex-direction: column;
}

.video-div .course-video-cont .heart-icon-sec .direct-flex .fee-text {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: -0.006em;
    color: #616161;
}

.video-div .course-video-cont .heart-icon-sec .direct-flex .course-fee {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 700;
    font-size: 2.4rem;
    line-height: 3rem;
    color: #3B1B7C;
}

.video-div .course-video-cont .heart-icon-sec .favourite {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #F4F4F4;
    display: flex;
    justify-content: center;
    align-items: center;
}

.heart-icon-sec .favourite .favorite-input {
    display: none;
}

.heart-icon-sec .favourite .favorite-input+.favorite-label .fa-heart {
    font-size: 25px;
    color: #FF5A57;
}

.heart-icon-sec .favourite .favorite-input+.favorite-label .fa-solid {
    display: none;
}

.heart-icon-sec .favourite .favorite-input:checked+.favorite-label .fa-regular {
    display: none;
}

.heart-icon-sec .favourite .favorite-input:checked+.favorite-label .fa-solid {
    display: block;
}

.video-div .course-video-cont .block-btns {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 16px;
    padding-bottom: 22px;
}

.video-div .course-video-cont .block-btns .course-block-btn {
    border: 1px solid #3B1B7C;
    border-radius: 2px;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 24px;
    background: transparent;
    color: var(--main-purple);
}

.video-div .course-video-cont .block-btns .course-block-btn.active {
    background: #3B1B7C;
    color: #FFFFFF;
}

.video-div .course-video-cont .include-courses {
    width: 100%;
    padding-top: 3.2px;
}

.video-div .course-video-cont .include-courses .includCourse-h2 {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 30px;
    color: #212121
}

.video-div .course-video-cont .menu-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.video-div .course-video-cont .menu-list .menu-item {
    display: flex;
    align-items: center;
    gap: 11px;
}

.video-div .course-video-cont .menu-list .menu-item .menu-description {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    color: #212121;
}

.video-div .course-video-cont .requirments-box {
    width: 100%;
    padding-top: 3.6rem;
}

.video-div .course-video-cont .requirments-box .requirment-h2 {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 600;
    font-size: 2rem;
    line-height: 3rem;
    color: #212121;
}

.video-div .course-video-cont .requirments-box .requirment-list {
    width: 100%;
    padding-top: 10px;
}

.video-div .course-video-cont .requirments-box .requirment-list .requirment-list-item {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    color: #212121;
    list-style: disc;
}

.learning-outcomes {
    grid-area: outcomes;
    width: 100%;
    /* padding-top: 4rem;
    padding-bottom: 4rem; */
}

.learning-outcomes .courseContent-h2 {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 700;
    font-size: 2rem;
    line-height: 3rem;
    color: #212121;
}

.learning-outcomes .contentDetail {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 26px;
    padding-top: 4px;
}

.learning-outcomes .contentDetail .courseList {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: -0.006em;
    color: #424242;
    list-style-type: disc;
}

.learning-outcomes .accordion-courses {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 17px;
}

.learning-outcomes .accordion-courses .accordion-item {
    border: none;
}

.learning-outcomes .accordion-item .accordion-body {
    padding-top: 12px;
}

.learning-outcomes .accordion-item .accordion-button {
    display: flex;
    /* align-items: center; */
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding-right: 42px;
    padding-left: 12px;
    background: #F9F9F9;
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: -0.006em;
    color: #212121;
}

.learning-outcomes .accordion-item .accordion-button:active,
.learning-outcomes .accordion-item .accordion-button:focus {
    box-shadow: none;
}

.learning-outcomes .accordion-item .accordion-button::after {
    position: absolute;
    top: 50%;
    background-image: none;
    right: 12px;
    transform: translateY(-50%);
}

.learning-outcomes .accordion-item .accordion-button::after {
    position: absolute;
    top: 50%;
    background-image: none;
    right: 12px;
    transform: translateY(-50%);
}

.learning-outcomes .accordion-item .course-description {
    display: flex;
    align-items: center;
    gap: 2rem;
    justify-content: space-between;
}

.learning-outcomes .accordion-item .course-description .outlin-d-flex {
    display: flex;
    gap: 11px;
    align-items: center;
}

.learning-outcomes .accordion-item svg {
    width: 14px;
    height: 14px;
    fill: #212121;
    cursor: pointer;
}

.learning-outcomes .accordion-item .course-description.active svg {
    fill: #3B1B7C;
}

.learning-outcomes .accordion-item .courseHeading {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: -0.006em;
    cursor: pointer;
    color: #424242;
}

.learning-outcomes .accordion-item .course-description.active .courseHeading,
.learning-outcomes .accordion-item .course-description.active .course-duration {
    color: #3B1B7C;
}

.learning-outcomes .accordion-item .course-duration {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 24px;
    letter-spacing: -0.006em;
    color: #424242;
}

.learning-outcomes .course-description-box {
    width: 100%;
}

.learning-outcomes .course-description-box .description-h2 {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 700;
    font-size: 2rem;
    line-height: 3rem;
    color: #212121;
    padding-top: 18px;
}

.learning-outcomes .course-description-box .description-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding-top: 18px;
    padding-bottom: 18px;
}

.learning-outcomes .course-description-box .description-li {
    list-style: disc;
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 2.7rem;
    letter-spacing: -0.006em;
    color: #212121;
}

.learning-outcomes .course-description-box .description-li .boldText {
    font-weight: 700;
}

.learning-outcomes .course-description-box .showMorBtn {
    padding-top: 8px;
    padding-bottom: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    text-decoration: none;
    border: 1px solid #757575;
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 2.4rem;
    letter-spacing: -0.006em;
    color: #757575;
}

/* courses video section ends */

/* Course rating section starts */

.course-rating-section {
    width: 100%;
}

/* .course-rating-section .container {} */

.course-rating-section .ratingHeading2 {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 700;
    font-size: 2rem;
    line-height: 3rem;
    color: #212121;
}

.course-rating-section .course-rating-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(480px, 1fr));
    /* justify-content: center; */
    column-gap: 20px;
    row-gap: 24px;
}

.profile-rating-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    padding: 24px 16px;
    background: #FFFFFF;
    box-shadow: 0px 30px 40px rgba(1, 11, 60, 0.06);
}

.profile-rating-card .learner-profile {
    display: flex;
    align-items: center;
    gap: 10px;
}

.profile-rating-card .learner-profile .learner-datail {
    display: flex;
    flex-direction: column;
}

.profile-rating-card .learner-profile .learner-datail .learnerName {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    color: #212121;
}

.profile-rating-card .learner-profile .learner-datail .learner-about {
    display: flex;
    align-items: center;
    gap: 5px;
}

.profile-rating-card .learner-profile .learner-datail .learner-about .fa-star {
    color: #DFB300;
}

.profile-rating-card .learner-profile .learner-datail .time-span {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 500;
    font-size: 8px;
    line-height: 14px;
    color: #616161;
}

.profile-rating-card .thanks-to-instructor {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: -0.6px;
    color: #212121;
}

.profile-rating-card .select-more {
    width: 100px;
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: -0.006em;
    color: #424242;
}

.profile-rating-card .helpful {
    width: 100%;
    display: flex;
    align-items: center;
    column-gap: 17px;
}

.profile-rating-card .helpful .wasHelpfull {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 14px;
    text-decoration-line: underline;
    color: #757575;
}

.profile-rating-card .helpful .input-hidden {
    display: none;
}

.profile-rating-card .helpful .input-hidden:checked+.reaction-label svg path {
    fill: darkblue;
}

.course-rating-section .viewAllreviews {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding-top: 8px;
    padding-bottom: 8px;
    border: 1px solid #757575;
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: -0.006em;
    color: #757575;
}

/* Course rating section ends */

/* More courses section */

.course-more-courses-sec {
    width: 100%;
}

.course-more-courses-sec .more-courses-container {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(495px, 1fr));
    column-gap: 21px;
    row-gap: 40px;
}

.more-courses-container .course-container {
    display: grid;
    align-items: center;
    grid-template-columns: 190px 1fr;
    background: #FFFFFF;
    box-shadow: 0px 30px 40px rgba(1, 11, 60, 0.06);
}

.more-courses-container .course-container .course-image {
    max-width: 190px;
    width: 100%;
    height: 100%;
}

.more-courses-container .course-container .course-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.more-courses-container .course-container .course-detail {
    display: flex;
    flex-direction: column;
    gap: 13px;
    padding: 10px 10px;
}

.course-container .course-detail .RedBtn-container {
    display: flex;
    gap: 10px;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}

.red-btn-design {
    background: rgba(255, 90, 87, 0.07);
    border-radius: 2px;
    padding: 4px 8px;
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    line-height: 12px;
    display: flex;
    align-items: center;
    color: #FF5A57;
}

.RedBtn-container .fa-star {
    color: #FFAD4F;
}

.RedBtn-container .bold-text {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    line-height: 14px;
    color: #212121;
    padding-left: 4px;
    padding-right: 3px;
}

.RedBtn-container .dull-text {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 14px;
    color: #BDBDBD;
}

.course-detail .figmaUI-h2 {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: -0.5px;
    color: #212121;
}

.course-detail .course-price {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 16px;
    color: #9347C9;
}

.course-detail .add-to-cart-container {
    width: 100%;
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

.course-detail .add-to-cart-container .viewAll {
    font-family: 'Hind';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    color: #424242;
}

.course-detail .add-to-cart-container .addToCart-Btn {
    width: 118px;
    height: 37px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #3B1B7C;
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 600;
    font-size: 10.8698px;
    line-height: 19px;
    color: #FFFFFF;
}

/* Media queries starts */

@media screen and (max-width: 991px) {
    .courses-video-sec .css-grid-area {
        /* grid-template-columns: 1fr 44.5rem; */
        grid-template-columns: 1fr;
        grid-template-areas: "machine"
            "videos"
            "outcomes";
    }

}

@media screen and (max-width: 768px) {}

@media screen and (max-width: 520px) {

    .machine .machine-h2 {
        font-size: 2.5rem;
        line-height: 3rem;
    }

    .learning-outcomes .accordion-item .accordion-button {
        flex-direction: column;
    }

    .learning-outcomes .accordion-item .course-description {
        flex-wrap: wrap;
    }

    .learning-outcomes .accordion-item .course-description .outlin-d-flex {
        align-items: baseline;
    }

    .course-rating-section .course-rating-cards {
        grid-template-columns: 1fr;
    }

    .course-more-courses-sec .more-courses-container {
        grid-template-columns: 1fr;
    }

    .more-courses-container .course-container {
        grid-template-columns: 1fr;
    }

    .video-div .course-video-cont .video-box {
        height: 150px;
    }

    .video-div .course-video-cont .video-box .play-icon img {
        width: 5rem;
        height: 5rem;
    }

}


/* Course Detail Page Ends */

/* Footer Style */

.qama-footer {
    /* background: url('../images/Footer-bg.png'); */
    background: linear-gradient(88.97deg, #FE934B 0.88%, #F95C57 32.18%, #AD4065 59.85%, #3D1B7A 97.67%) !important;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.qama-footer .footer-content {
    display: flex;
    justify-content: space-between;
    row-gap: 5rem;
}


.qama-footer .footer-content .company .footerHeading2 {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: #F5F5F5;
}


.qama-footer .footer-content .company .footer-links .nav-link {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.005em;
    color: var(--light-gray5);
    padding-left: 0;
    opacity: 75%;
}

.qama-footer .footer-content .language-selecter .select-container {
    /* padding: 0px 22px; */
    /* background-color: transparent; */
    /* border: 1px solid var(--white); */
    border-radius: 2px;
    position: relative;
    width: 121px;
}

.qama-footer .footer-content .language-selecter #selectLanguage,
.sidebar-navigation #sidebar-language-selector {
    background: transparent;
    color: var(--white);
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 10px 15px;
    border-radius: 0px;
}


.qama-footer .footer-content .language-selecter .select-container img {
    position: absolute;
    top: 50%;
    left: 11px;
    transform: translate(0, -50%);
}

.qama-footer .footer-bottom {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 3rem;
    padding-top: 3.2rem;
    border-top: 1px solid var(--placeholder-gray);
}

.qama-footer .footer-bottom .qama-rights {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    color: var(--placeholder-gray);
}

/* Help Center Accordian */
.help-center-accordian-sec {
    /* padding-top: 4rem; */
    padding-bottom: 6.4rem;
}

.help-center-accordian-sec .purchase-h2 {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 700;
    font-size: 3.2rem;
    line-height: 3.8rem;
    text-align: center;
    color: #212121;
}

.help-center-accordian-sec .everything-u-need {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 500;
    font-size: 1.8rem;
    line-height: 3.2rem;
    text-align: center;
    color: #9E9E9E;
    margin-top: 2rem;
    margin-bottom: 0;
}

.help-center-accordian-sec .accordion-purchased {
    padding-top: 3.2rem;
    max-width: 768px;
    /* width: 100%; */
    margin: auto;
}

.help-center-accordian-sec .accordion-purchased .accordion-item {
    border-top: none;
    border-bottom: 1px solid #EAECF0;
    border-left: none;
    border-right: none;
}

.help-center-accordian-sec .accordion-purchased .accordion-header {
    width: 97.8%;
    border: none;
    box-shadow: none;
}

.help-center-accordian-sec .accordion-purchased .accordion-header .accordion-button {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 600;
    font-size: 1.8rem;
    line-height: 3.2rem;
    color: #212121;
    border: none !important;
    background-color: transparent;
    padding: 2.4rem 0;
    /* width: 100%; */
}

.accordion-button:not(.collapsed) {
    box-shadow: none;
}

.help-center-accordian-sec .accordion-purchased .accordion-header .accordion-button:focus {
    box-shadow: none;
}

.help-center-accordian-sec .accordion-purchased .accordion-header .accordion-button::after {
    background-image: url('../images/plus-accordian.svg');
    background-size: 20px;
    height: 20px;
    width: 20px;
    background-repeat: no-repeat;
    background-position: center;
}

.help-center-accordian-sec .accordion-purchased .accordion-header .accordion-button:not(.collapsed)::after {
    background-image: url('../images/minus-accordian.svg');

    background-size: 20px;
    height: 20px;
    width: 20px;
    background-repeat: no-repeat;
    background-position: center;
}

.help-center-accordian-sec .accordion-purchased .accordion-body {
    width: 97%;
    padding-top: 0 !important;
    border: none;
    padding-bottom: 3.2rem;
}

.help-center-accordian-sec .accordion-purchased .accordion-body .accordian-body-p {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 1.8rem;
    line-height: 3.2rem;
    color: #424242;
}

.help-center-cant-find-ans {
    background: #F8F9FB;
    border-radius: 4px;
    margin: 40px 0;
    padding: 3.2rem;
}


.help-center-cant-find-ans h2 {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 600;
    font-size: 1.8rem;
    line-height: 3.2rem;
    text-align: center;
    color: #212121;
    margin-bottom: 8px;
}

.help-center-cant-find-ans p {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 1.8rem;
    line-height: 3.2rem;
    text-align: center;
    color: #616161;
    max-width: 768px;
    margin: auto;
}

.help-center-cant-find-ans .submit-btn {
    width: fit-content;
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 24px;
    color: #FFFFFF;
    border-radius: 0px;
    margin: auto;

    margin-top: 30px;
}

.mt-72 {
    margin-top: 7.2rem;
}

.help-center-section {
    background-color: #48CFF0;
}

.help-center-section .search-field-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    max-width: 56rem;
    margin-left: auto;
    margin-right: auto;
    min-height: 360px;
}


.breadcrumb .breadcrumb-item.active {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 26px;
    letter-spacing: -0.006em;
    color: #3B1B7C;
}

.help-center-section .search-field-form .helpCenter-label {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 600;
    font-size: 4rem;
    line-height: 4.8rem;
    display: block;
    text-align: center;
    color: #FFFFFF;
    width: 100%;
    margin-bottom: 2.4rem;
}

.help-center-section .search-field-form .helpCenter-field {
    width: 100%;
    height: 4rem;
    background: #FFFFFF;
    box-shadow: 0px 2px 23px rgba(255, 255, 255, 0.08);
    border-radius: 2px;
    padding-left: 1.6rem;
    padding-right: 1.6rem;
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    color: #212121;
}

.ticket-submit-section {
    padding-top: 2.4rem;
    padding-bottom: 15.8rem;
}

.ticket-submit-section .submit-ticket-form {
    max-width: 660px;
    /* width: 100%; */
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
}

.ticket-submit-section .submit-ticket-form .sbmt-tckt-hdng2 {
    margin-top: 5.6rem;
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 700;
    font-size: 3.2rem;
    line-height: 3.8rem;
    color: #212121;
}

.submit-ticket-form .required-filds-box {
    padding-top: 2.4rem;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.submit-ticket-form .required-filds-box .required-label {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.005em;
    color: #424242;
}

.submit-ticket-form .required-filds-box .required-label .steric {
    color: #FF3654;
}

.submit-ticket-form .required-filds-box .required-field {
    width: 100%;
    height: 4.2rem;
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
    border-radius: 2px;
    padding-left: 12px;
    padding-right: 12px;
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #424242;
}

.submit-ticket-form .required-filds-box .required-field::placeholder {
    color: #BDBDBD;
}

.select-box select {
    width: 100%;
    height: 4.2rem;
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
    border-radius: 2px;
    padding-left: 12px;
    padding-right: 12px;
    height: 4.2rem;
    padding-left: 12px;
    padding-right: 12px;
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    margin-right: auto;
    color: #BDBDBD;
}

.submit-ticket-form .required-filds-box .txt-area {
    width: 100%;
    min-height: 11.7rem;
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
    border-radius: 2px;
    padding: 11px 12px;
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #424242;
}

.submit-ticket-form .required-filds-box .txt-area::placeholder {
    color: #BDBDBD;
}

.submit-ticket-form .required-filds-box .selsctFile {
    width: 100%;
    height: 4.2rem;
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
    border-radius: 2px;
    padding: 0px 12px;
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #424242;
    display: flex;
    align-items: center;
}

.ticket-submit-btn {
    margin-top: 4.9rem;
    margin-left: auto;
    background: #3B1B7C;
    padding: 11px 24px;
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 600;
    font-size: 15px;
    line-height: 24px;
    display: flex;
    align-items: center;
    text-align: center;
    color: #FFFFFF;
    border: none;
}


/* Learner Notifications */
.dropdown-menu.show {
    /* transform: translatey(59px) !important; */
    inset: 35px auto auto 0px !important;
    /* max-width: 424px !important; */
    width: 424px;
}

.notifications.dropdown {
    position: relative;
}

.notifications .dropdown-menu {
    padding-top: 12px;
    background: #FFFFFF;
    box-shadow: 0px 0px 32px rgba(0, 0, 0, 0.08);
    border: none;
}

.notifications .dropdown-menu .dropdwn-header {
    display: flex;
    justify-content: space-between;
    padding-left: 24px;
    padding-right: 24px;
}

.dropdown-menu .dropdwn-header .header-right {
    display: flex;
    gap: 3px;
}

.dropdown-menu .dropdwn-header .notificationh2,
.dropdown-menu .dropdwn-header .allRead {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #212121;
}

.dropdown-menu .dropdwn-header .dropdown-select {
    color: #9E9E9E;
    text-transform: none;
}

.dropdown-list {
    margin-top: 17px;
    /* display: flex; */
    padding-left: 0;
}

.li-grid {
    display: grid;
    grid-template-columns: 4.4rem 1fr;
    gap: 16px;
    padding-top: 17px;
    border-bottom: 1px solid #E4E8EE;
    position: relative;
    padding-left: 24px;
    padding-right: 24px;
}

.li-grid::before {
    position: absolute;
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #90CDF4;
    border: 1px solid #418FEA;
    top: 10px;
    left: 24px;
}

.thirdLi::before {
    all: unset;
}

.loreum-txt {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 20px;
    margin-top: 19px;
    color: #212121;
    position: relative;
    padding-left: 12px;
}

.loreum-txt::before {
    position: absolute;
    content: '';
    height: 100%;
    width: 4px;
    background: #EEEEEE;
    left: 0;
}

.from-left::before {
    left: 32px;
}

.remove-before,
.remove-before2 {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #616161;
}

.remove-before::before {
    all: unset;
}

.li-grid .liHeading {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: #212121;
}

.li-grid .dropdownTime {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 20px;
    color: #9EA0AA;
    display: block;
    padding-top: 17px;
    padding-bottom: 17px;
}

.dropdown-menu .allNotifications {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 24px;
    padding-right: 24px;
    padding-top: 19px;
    padding-bottom: 19px;
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #3B1B7C;
}

/* Notifications page starts here */

.form-check.form-switch {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 8px;
    padding-left: 0;
}

.form-check.form-switch .form-check-label {
    margin-right: 30px;

    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    color: #212121;
}

.form-check.form-switch .form-check-input {
    height: 24px;
    width: 48px;
    border-radius: 24px;
    box-shadow: none;
    outline: none;
}

.form-check.form-switch .form-check-input:checked {
    background-color: var(--main-purple);
    border: 1px solid var(--main-purple);
}


.form-check.form-switch.check-mark .form-check-input {
    position: relative;
}

.form-check.form-switch.check-mark .form-check-input:checked::before {
    /* content: '\2713';
    color: var(--white);
    height: 13.840384px;
    width: 13.053846px;
    position: absolute;
    z-index: 1;
    margin-top: 3.5px;
    margin-left: 6px;
    font-size: 14px; */

    content: '\2713';
    color: var(--white);
    height: 14.840384px;
    width: 13.053846px;
    position: absolute;
    z-index: 1;
    font-size: 12px;
    top: 50%;
    left: 6px;
    transform: translateY(-50%);
}

.notifications-sec {
    padding-bottom: 28.2rem
}

.notifications-sec .notification-sub-sec {
    max-width: 910px;
    margin-left: auto;
    margin-right: auto;
}

.notifications-sec .notification-sub-sec .notifications-main-heading {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 700;
    font-size: 3.2rem;
    line-height: 4rem;
    color: #212121;
}

.notifications-sec .notification-sub-sec .days-count {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2.4rem;
}

.notifications-sec .notification-sub-sec .days-count .right-connt {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 4rem;
    row-gap: 1.2rem;
}

.notifications-sec .days-count .day {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 500;
    font-size: 1.8rem;
    line-height: 3.2rem;
    color: #757575;
}

.notifications-sec .unread-contain {
    display: flex;
    align-items: center;
    gap: 8px;
}

.notifications-sec .unread-contain .unread-label {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    color: #212121;
}

.notifications-sec .unread-contain .toggle-label {
    position: relative;
    width: 48px;
    height: 24px;
    background: #D9D9D9;
    border-radius: 24px;
}

.notifications-sec .unread-contain .toggle-label .ball {
    position: absolute;
    left: 2px;
    top: 2px;
    bottom: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #FFFFFF;
}

.notifications-sec .unread-contain input:checked+.toggle-label {
    background: blue;
}

.notifications-sec .unread-contain input:checked+.toggle-label .ball {
    right: 2px;
    left: unset;
}

.notifications-sec .allread-contain {
    display: flex;
    gap: 4px;
    align-items: center;
}

.notifications-sec .allread-contain .allread-label {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #757575;
}

.notifications-sec .hide {
    display: none;
}

.notifications-sec .pt-pb-16 {
    padding-top: 22px;
    padding-bottom: 22px;
}

.notifications-sec .padd-left {
    padding-left: 40px;
}

.notifications-sec .max-w {
    max-width: 620px;
}

/* Notifications page ends here */

/* Learner Profile Payment Method */
.qama-paymentMethods {
    border: 1px solid #DFDFDF;
    padding: 2.4rem 4rem 4rem 4rem;
    margin-left: 3rem;
    margin-right: 3rem;
    margin-top: 4rem;
}

.qama-paymentMethods .cardsHeading {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 600;
    font-size: 1.6rem;
    line-height: 2rem;
    color: #212121;
}

.qama-paymentMethods .visa-card-box {
    padding: 1.2rem 2.4rem 1.3rem 2.4rem;
    background: #EEEEEE;
    border-radius: 2px;
    max-width: 460px;
    margin-top: 1.6rem;
}

.qama-paymentMethods .visa-card-box .visa-card-header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.qama-paymentMethods .visa-card-box .visa-card-header .visa-card-header-buttons {
    display: flex;
    gap: 7px;
    align-items: flex-end;
}

.qama-paymentMethods .visa-card-box .visa-card-header .visa-card-header-buttons .remove-btn {
    background: #BDBDBD;
    width: 67px;
    height: 24px;
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 2.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
}

.qama-paymentMethods .visa-card-box .visa-card-header .visa-card-header-buttons .remove-btn:hover {
    background: #FF3654;
}

.qama-paymentMethods .visa-card-box .visa-card-header .visa-card-header-buttons .edit-btn {
    width: 60px;
    height: 24px;
    background: #3B1B7C;
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 2.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
}

.qama-paymentMethods .visa-card-box .card-user {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 2.4rem;
    color: #212121;
    margin-top: 8px;
    margin-bottom: 12px;
}

.qama-paymentMethods .visa-card-box .card-detail {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.qama-paymentMethods .visa-card-box .card-detail .card-number {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 2rem;
    color: #424242;
}

.qama-paymentMethods .visa-card-box .card-detail .card-expiry-date {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 2rem;
    color: #757575;
}

.new-paymentMethods {
    padding: 2.4rem 0 2.4rem 4rem;
    display: grid;
    grid-template-columns: 293px 1fr;
    gap: 5.1rem;
    border: 1px solid #DFDFDF;
    margin-top: 2.4rem;
    margin-left: 3rem;
    margin-right: 3rem;
}

.new-paymentMethods .left-column {
    max-width: 293px;
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
}

.new-paymentMethods .left-column .addNew-payment {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 2rem;
    letter-spacing: -0.5px;
    color: #212121;
}

.new-paymentMethods .left-column .payment-label {
    display: grid;
    grid-template-columns: 26px 1fr;
    gap: 2rem;
    align-items: center;
    background: transparent;
    padding: 12px 38px 8px 14px;
}

.new-paymentMethods .left-column .payment-label:has(input:checked) {
    background: #F5F5F5;
}

.new-paymentMethods .left-column .payment-label .payments-input {
    width: 26px;
    height: 26px;
    background-color: #FFFFFF;
    border: 1.625px solid #BDBDBD;
    background-image: url('../images/profile-page/radio-bg.svg');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.new-paymentMethods .left-column .payment-label .card-about {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.new-paymentMethods .left-column .payment-label .card-about .card-type {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 2rem;
    letter-spacing: -0.005em;
    color: #424242;
}

.new-paymentMethods .left-column .payment-label:has(input:checked) .card-about .card-type {
    color: #212121;
}

.new-paymentMethods .left-column .payment-label .card-about .card-image {
    display: flex;
    align-items: center;
    gap: 13px;
}

.new-paymentMethods .user-detail {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}

.new-paymentMethods .user-detail .user-label {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 2rem;
    letter-spacing: -0.005em;
    color: #424242;
}

.new-paymentMethods .user-detail .user-field {
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
    border-radius: 2px;
    height: 4.2rem;
    padding-left: 12px;
    padding-right: 12px;
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 2rem;
    color: #424242;
}

.new-paymentMethods .user-detail input[type=number]::-webkit-inner-spin-button,
.new-paymentMethods .user-detail input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.new-paymentMethods .user-detail .user-field::placeholder {
    color: #BDBDBD;
}

.new-paymentMethods .user-detail .cvc-image {
    position: absolute;
    bottom: 12px;
    right: 13px;
}

.new-paymentMethods .right-column .field-wraper {
    display: flex;
    align-items: center;
    gap: 2.2rem;
}

.new-paymentMethods .right-column .add-methods {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 4px;
    padding-right: 12px;
}

.new-paymentMethods .right-column .add-methods .mark-as-checked {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
}

.new-paymentMethods .right-column .add-methods .mark-as-checked .save-card-field {
    background: #FFFFFF;
    border: 1px solid #9E9E9E;
    border-radius: 1px;
}

.new-paymentMethods .right-column .add-methods .mark-as-checked .save-card-label {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 2rem;
    color: #212121;
}

.new-paymentMethods .right-column .add-methods .add-method-btn {
    padding: 8px 21px;
    background: #3B1B7C;
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 2.4rem;
    color: #FFFFFF;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
}

.paymentMethods-modal .modal-content {
    padding: 1.6rem 3.2rem 2.4rem 3.2rem;
    background: #FFFFFF;
    box-shadow: 0px 0px 32px rgba(0, 0, 0, 0.08);
    border-radius: 4px;
}

.paymentMethods-modal .modal-content .modal-header {
    padding: 0;
    position: relative;
    border: none;
}

.paymentMethods-modal .modal-content .modal-header .btn-close {
    position: absolute;
    top: 0rem;
    right: 0rem;
}

.paymentMethods-modal .modal-content .modal-body {
    padding: 0;
    margin-top: 26px;
}

.paymentMethods .user-detail .edit-card-heading {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 700;
    font-size: 2rem;
    line-height: 3rem;
    letter-spacing: -0.5px;
    color: #212121;
}

.paymentMethods .user-detail .edit-card-detail {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;
    color: #616161;
    margin-top: 8px;
    margin-bottom: 0px;
}

.paymentMethods-modal .modal-content .modal-footer {
    padding: 0;
    border: none;
    display: flex;
    align-items: center;
    gap: 2.4rem;
    margin-left: auto;
}

.paymentMethods-modal .modal-content .modal-footer .cancel-btn {
    background: #FFFFFF;
    border: 1px solid #757575;
    padding: 8px 16px;
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 2.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #757575;
}

.paymentMethods-modal .modal-content .modal-footer .save-btn {
    background: #3B1B7C;
    border: none;
    padding: 8px 16px;
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 2.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
}

.hobbies-container {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 10px;
}

.hobbies-container .hobby {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    background: #F5F5F5;
    border: 1px solid #757575;
    border-radius: 25px;
}

.hobbies-container .hobby .hooby-text {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 24px;
    letter-spacing: -0.006em;
    color: #757575;
}

/* Custom Language Select Box */
.qama-footer .footer-content .language-selecter .select,
.responsive-mobile-menu .language-selecter .select {
    cursor: pointer;
    display: inline-block;
    position: relative;
    font-size: 16px;
    color: #fff;
    width: 121px;
    height: 40px;
    border: 1px solid #FFFFFF;
    border-radius: 2px;
}

.custom-select-container .select {
    cursor: pointer;
    display: inline-block;
    position: relative;
    font-size: 16px;
    color: #fff;
    width: fit-content;
    height: 40px;
    border: 1px solid #FFFFFF;
    border-radius: 2px;
}

.responsive-mobile-menu .language-selecter .select {
    border: 1px solid #212121;
}

.custom-select-container .select {
    background: #FFFFFF;
    border: 1.5px solid #757575;
    border-radius: 2px;
    padding-right: 34px;
}

.qama-footer .footer-content .language-selecter .select-styled,
.responsive-mobile-menu .language-selecter .select-styled {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding-left: 35px !important;
    background-color: #3B1B7C;
    padding: 8px 15px;
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
}

.custom-select-container .select-styled {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding-right: 35px !important;
    background-color: #3B1B7C;
    padding: 8px 15px;
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 17px;
    display: flex;
    align-items: center;
    /* justify-content: center; */
    color: #FFFFFF;

    /* white-space: nowrap; */
}

.responsive-mobile-menu .language-selecter .select-styled,
.custom-select-container .select-styled {
    background-color: #ffffff;
    color: #424242;
}

.qama-footer .footer-content .language-selecter .select-styled:after {
    content: "";
    width: 17px;
    height: 17px;
    background-image: url(../images/language.svg);
    background-size: 100%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 15px;
}

.responsive-mobile-menu .language-selecter .select-styled:after {
    content: "";
    width: 17px;
    height: 17px;
    background-image: url(../images/icons/language-globe-dark.svg);
    background-size: 100%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 15px;
}

.custom-select-container .select:after {
    content: "";
    width: 17px;
    height: 17px;
    background-image: url(../images/arrow-thick.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 8px;
}

.qama-footer .footer-content .language-selecter .select-options,
.custom-select-container .select-options {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    padding: 4px 0;
    margin-top: 2px;
    list-style: none;
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
    border-radius: 2px;
}


.responsive-mobile-menu .language-selecter .select-options,
.custom-select-container .select-options {
    display: none;
    position: absolute;
    bottom: calc(100% + 5px);
    right: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    padding: 4px 0;
    margin-top: 2px;
    list-style: none;
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
    border-radius: 2px;
    height: fit-content;
}

.qama-footer .footer-content .language-selecter .select-options li,
.responsive-mobile-menu .language-selecter .select-options li,
.custom-select-container .select-options li {
    transition: all 0.15s ease-in;
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #212121;
    padding: 10px 14px;
}

.qama-footer .footer-content .language-selecter .select-options li:hover,
.responsive-mobile-menu .language-selecter .select-options li:hover,
.select-options li.is-selected,
.custom-select-container .select-options li:hover {
    background: #F5F5F5;
}

/* Custom Language Select Box */


/* Purchase History Page */

.purchase-history-sec .purchase-history-container {
    max-width: 114.4rem;
    margin: 0 auto;
}

.purchase-history-sec .purchase-breadcrums .breadcrumb-item+.breadcrumb-item::before,
.breadcrumb .breadcrumb-item+.breadcrumb-item::before {
    padding-right: 0.5rem;
    color: #6C757D;
    content: '';
    background-image: url('../images/breadscrum-right.svg');
    background-position: center;
    background-repeat: no-repeat;
    width: 16px;
    height: 16px;
    transform: translateY(5px);
    margin-right: 5px;
}

.purchase-history-sec .purchase-breadcrums .breadcrumb-item a,
.breadcrumb .breadcrumb-item a {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 500;
    font-size: 1.6rem;
    line-height: 2.6rem;
    letter-spacing: -0.006em;
    color: #757575;
}

.purchase-history-sec .purchase-breadcrums .breadcrumb-item.active,
.breadcrumb .breadcrumb-item.active {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 500;
    font-size: 1.6rem;
    line-height: 2.6rem;
    letter-spacing: -0.006em;
    color: #3B1B7C;
}

.purchase-history-sec .purchase-history-table-box .purchase-history-h2 {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 700;
    font-size: 3.2rem;
    line-height: 4rem;
    color: #212121;
    margin-top: 6.4rem;
    margin-bottom: 3.2rem;
}

.purchase-history-sec .purchase-history-table-box .reward-history {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 700;
    font-size: 2rem;
    line-height: 4rem;
    color: #212121;
    margin-top: 5.6rem;
    margin-bottom: 3.2rem;
}

.simple-learner-table .ph-table {
    width: 100%;
}

.simple-learner-table .ph-table thead th {
    background: #F9F9F9;
    padding: 14px 16px;
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 17px;
    color: #3C3C3C;
    white-space: nowrap;
}

.simple-learner-table .rh-table thead th:last-child {
    text-align: center;
}

.simple-learner-table .rh-table tbody td:last-child {
    text-align: center;
}

.simple-learner-table .ph-table tbody td {
    padding: 18px 16px;
    border-top: 0.2px solid #EEEEEE;
    white-space: nowrap;
}

.simple-learner-table .ph-table tbody .td-data {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    color: #212121;
}

.simple-learner-table .ph-table tbody .td-amount {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 18px;
    color: #212121;
}

.simple-learner-table .ph-table tbody .td-card .displayGrid {
    display: grid;
    grid-template-columns: 39px 1fr;
    align-items: center;
    gap: 10px;
}

.simple-learner-table .ph-table tbody .td-card .displayGrid img {
    width: 39px;
}

.simple-learner-table .ph-table tbody .td-card .displayGrid .card-text {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    color: #212121;
}

.simple-learner-table .ph-table tbody .td-status .dis-grid {
    background-color: rgb(201, 179, 179);
    display: grid;
    grid-template-columns: 8px 1fr;
    width: 92px;
    padding: 2px 7px;
    border-radius: 16px;
    align-items: center;
    gap: 6px;
}

.simple-learner-table .ph-table tbody .td-status .dis-grid.complete {
    background-color: #ECFDF3;
}

.simple-learner-table .ph-table tbody .td-status .dis-grid .dot {
    background-color: red;
    border-radius: 50%;
    width: 8px;
    height: 8px;
    display: block;
}

.simple-learner-table .ph-table tbody .td-status .dis-grid.complete .dot {
    background-color: #13BD38;
}

.simple-learner-table .ph-table tbody .td-status .dis-grid .text {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 18px;
    color: red;
}

.simple-learner-table .ph-table tbody .td-status .dis-grid.complete .text {
    color: #027A48;
}

.simple-learner-table .ph-table tbody .td-btn span {
    width: 50px;
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 24px;
    padding-left: 3px;
    padding-right: 3px;
    background: #3B1B7C;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    margin-left: auto;
}

.simple-learner-table .ph-table tbody .redeem-btn span {
    background-color: #3B1B7C;
    padding: 8px 24px;
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 2.4rem;
    color: #FFFFFF;
    cursor: pointer;
}

.simple-learner-table .ph-table tbody .points-earned {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 18px;
    color: #212121;
}

.simple-learner-table .ph-table tbody .pts {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    color: #212121;
    display: inline-block;
    padding-left: 5px;
}

.simple-learner-table .ph-table tbody .rht-grid {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 8px;
    align-items: center;
}

.simple-learner-table .ph-table tbody .rht-grid img {
    width: 64px;
    border-radius: 2px;
}

.simple-learner-table .ph-table tbody .reward-collectd span {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
    color: #3B1B7C;
}

.redeem-modal .modal-content {
    background: #FFFFFF;
    box-shadow: 0px 0px 32px rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    padding: 4.3rem 1.6rem 2.4rem 1.6rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.4rem;
    position: relative;
}

.redeem-modal .modal-content::before {
    position: absolute;
    content: '';
    width: 44px;
    height: 44px;
    background-image: url('../images/icons/ramdom-stars.svg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    top: 2.4rem;
    right: 34%;
}

.redeem-modal .modal-content .modal-image {
    width: 9.6rem;
    height: 9.6rem;
}

.redeem-modal .modal-content .congratulations {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 2rem;
    color: #212121;
    margin-top: 13px;
}

.redeem-modal .modal-content .congratulations span {
    font-weight: 600;
}

.redeem-modal .modal-content .collect-reward-btn {
    background-color: #3B1B7C;
    padding: 8px 16px;
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
}

@media (min-width: 576px) {
    .redeem-modal .modal-dialog {
        max-width: 480px !important;
        margin: 0 auto;
    }
}

/* Purchase History Page Ends */

/* View Rewards Page Style */
.reward-banner-sec {
    background-color: var(--main-purple);
}

.reward-banner-sec .banner-height {
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.reward-banner-sec .reward-banner {
    display: flex;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
    justify-content: space-between;
}

.reward-banner-sec .reward-banner .qama-reward-h2 {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 700;
    font-size: 3.2rem;
    line-height: 3.9rem;
    letter-spacing: 0.01em;
    color: #FFFFFF;
}

.reward-banner-sec .reward-banner .credit-container {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.reward-banner-sec .reward-banner .credit-container .price {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 700;
    font-size: 3.2rem;
    line-height: 3.9rem;
    letter-spacing: 0.01em;
    color: #FFFFFF;
}

.reward-banner-sec .reward-banner .credit-container .credits {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 2rem;
    letter-spacing: 0.01em;
    color: #FFFFFF;
}

/* View Rewards Page Style Ends */


/* Course Catalogue Modals */
.rating-modal .modal-content {
    background: #FFFFFF;
    border: 1px solid #EEEEEE;
    box-shadow: 0px 30px 40px rgba(1, 11, 60, 0.06);
}

.feedback-modal .modal-content {
    background: #FFFFFF;
    box-shadow: 0px 30px 40px rgba(1, 11, 60, 0.06);
}

.feedback-modal .modal-content .modal-header {
    padding: 1.7rem 1.6rem 2.5rem 1.6rem;
    position: relative;
    border-bottom: 1px solid #E4E7EC;
}

.rating-modal .modal-content .modal-header {
    padding: 1.7rem 1.6rem 1.7rem 1.6rem;
    border: none;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
}

.rating-modal .modal-content .modal-header .give-feedbackH {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 20px;
    letter-spacing: -0.5px;
    color: #212121;
}

.feedback-modal .modal-content .modal-header .btn-close {
    position: absolute;
    top: 1.7rem;
    right: 1.6rem;
}

.rating-modal .modal-content .modal-body,
.feedback-modal .modal-content .modal-body {
    padding: 2rem 2.4rem;
}

.feedback-modal .modal-content .modal-body .course-recomend {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 600;
    font-size: 1.8rem;
    line-height: 2.8rem;
    color: #101828;
}

.feedback-modal .modal-content .modal-body .feedback-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, 44px);
    align-items: center;
    gap: 17px;
    margin-top: 4rem;
    margin-bottom: 1.2rem;
}

.feedback-modal .modal-content .modal-body .feedback-picker .feedback-field {
    display: none;
}

.feedback-modal .modal-content .modal-body .feedback-picker .feedback-label {
    width: 44px;
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #FFFFFF;
    border: 1px solid #3B1B7C;
    border-radius: 4px;
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 2rem;
    color: #475467;
}

.feedback-modal .modal-content .modal-body .feedback-picker .feedback-field:checked+.feedback-label {
    background-color: #3B1B7C;
    color: #FFFFFF;
}

.feedback-modal .modal-content .modal-body .response {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 4.1rem;
    margin-bottom: 2.4rem;
}

.feedback-modal .modal-content .modal-body .response .bad,
.feedback-modal .modal-content .modal-body .response .good {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #475467;
}

.feedback-modal .modal-content .modal-body .buttons,
.rating-modal .modal-content .modal-body .buttons {
    width: fit-content;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

.feedback-modal .modal-content .modal-body .buttons .cancel,
.rating-modal .modal-content .modal-body .buttons .cancel {
    padding: 8px 16px;
    background: #FFFFFF;
    border: 1px solid #757575;
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #757575;
}

.feedback-modal .modal-content .modal-body .buttons .submit,
.rating-modal .modal-content .modal-body .buttons .submit {
    padding: 8px 16px;
    background: #3B1B7C;
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
}

.rating-modal .modal-content .modal-body {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
}

.rating-modal .modal-content .modal-body .tnsor-flow-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: 146px 1fr;
    padding-bottom: 12px;
    border-bottom: 1px solid #E4E7EC;
}

.rating-modal .modal-content .modal-body .tnsor-flow-grid>img {
    width: 146px;
    height: 127px;
    object-fit: cover;
    object-position: center;
}

.rating-modal .modal-content .modal-body .tnsor-flow-grid .content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 10px;
}

.rating-modal .modal-content .modal-body .tnsor-flow-grid .content .specializations {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: -0.5px;
    color: #212121;
}

.rating-modal .modal-content .modal-body .tnsor-flow-grid .content .profile {
    display: flex;
    align-items: center;
    gap: 4px;
}

.rating-modal .modal-content .modal-body .tnsor-flow-grid .content .profile>img {
    display: block;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    outline: 2px solid #FFFFFF;
    filter: drop-shadow(0px 10px 14px rgba(1, 11, 60, 0.1));
}


.rating-modal .modal-content .modal-body .tnsor-flow-grid .content .profile .profile-name {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 14px;
    text-transform: capitalize;
}

.rating-modal .modal-content .modal-body .tnsor-flow-grid .content .instructor-course-image {
    height: 51px !important;
    width: 66px !important;
    border-radius: 0px !important;
    object-fit: cover;
    object-position: center;
}

.rating-modal .modal-content .modal-body .ratint-box .rating,
.rating-modal .modal-content .modal-body .review-writing .review {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.005em;
    color: #424242;
}

.rating-modal .modal-content .modal-body .rating-group {
    display: inline-flex;
}

.rating-modal .modal-content .modal-body .rating__icon {
    pointer-events: none;
}

.rating-modal .modal-content .modal-body .rating__input {
    position: absolute !important;
    left: -9999px !important;
}

.rating-modal .modal-content .modal-body .rating__label {
    cursor: pointer;
    padding: 0 0.1em;
    font-size: 2.8rem;
}

.rating-modal .modal-content .modal-body .rating__icon--star {
    color: #DFB300;
}

.rating-modal .modal-content .modal-body .rating__input:checked~.rating__label .rating__icon--star {
    color: #EEEEEE;
}

.rating-modal .modal-content .modal-body .rating-group:hover .rating__label .rating__icon--star {
    color: #DFB300;
}

.rating-modal .modal-content .modal-body .rating__input:hover~.rating__label .rating__icon--star {
    color: #ddd;
}

.rating-modal .modal-content .modal-body .rating-group:hover .rating__input--none:not(:hover)+.rating__label .rating__icon--none {
    color: #eee;
}

.rating-modal .modal-content .modal-body .review-writing {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rating-modal .modal-content .modal-body .review-txtArea {
    min-height: 130px;
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
    padding: 11px 12px;
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #424242;
    resize: none;
}

.rating-modal .modal-content .modal-body .review-txtArea::placeholder {
    color: #BDBDBD;
}

/* Ticket section starts */

.suport-ticket-sec {
    padding-bottom: 12rem;
}

.suport-ticket-sec .tickets-heading {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 700;
    font-size: 3.2rem;
    line-height: 4rem;
    color: #212121;
}

.filter-tickets label {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    color: #757575;
}

.suport-ticket-sec .ticket-container {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
    max-width: 850px;
}

.suport-ticket-sec .ticket-container .ticketNo {
    background: #FFFFFF;
    border: 1px solid #EEEEEE;
    box-shadow: 0px 2px 23px rgba(0, 0, 0, 0.08);
    padding: 1.6rem 2.4rem;
    max-width: 850px;
    margin-top: 3.2rem;
}

.suport-ticket-sec .ticket-container .ticketNo .ticket-header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
}

.suport-ticket-sec .ticket-container .ticketNo .ticket-header .ticket-title {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 2.2rem;
    color: #6F7C80;
}

.suport-ticket-sec .ticket-container .ticketNo .ticket-header .ticket-title .ticket-number,
.suport-ticket-sec .ticket-container .ticketNo .ticket-header .time {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 500;
    font-size: 1.4rem;
    line-height: 2.2rem;
    color: #131516;
}

.suport-ticket-sec .ticket-container .ticketNo .create-account-h2 {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 600;
    font-size: 1.8rem;
    line-height: 2.4rem;
    color: #212121;
    margin-top: 1.6rem;
    margin-bottom: 1.2rem;
}

.suport-ticket-sec .ticket-container .ticketNo .ticket-detail {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 2.1rem;
    color: #757575;
    margin-bottom: 3.2rem;
    /* white-space: break-spaces; */
    word-break: break-all;
}

.suport-ticket-sec .ticket-container .ticketNo .ticket-status {
    padding: 2px 7px;
    border-radius: 16px;
    display: grid;
    grid-template-columns: 8px 1fr;
    width: fit-content;
    align-items: center;
    gap: 6px;
}

.suport-ticket-sec .ticket-container .ticketNo .ticket-status.open {
    background: #E9F3FF;
}

.suport-ticket-sec .ticket-container .ticketNo .ticket-status.resolved {
    background: #ECFDF3;
}

.suport-ticket-sec .ticket-container .ticketNo .ticket-status .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.suport-ticket-sec .ticket-container .ticketNo .ticket-status .txt {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 1.4rem;
    line-height: 1.8rem;
}

.suport-ticket-sec .ticket-container .ticketNo .ticket-status.open .dot {
    background: #3B1B7C;
}

.suport-ticket-sec .ticket-container .ticketNo .ticket-status.resolved .dot {
    background: #13BD38;
}

.suport-ticket-sec .ticket-container .ticketNo .ticket-status.open .txt {
    color: #3B1B7C;
}

.suport-ticket-sec .ticket-container .ticketNo .ticket-status.resolved .txt {
    color: #027A48;
}

.suport-ticket-sec .support-tickets-chat {
    display: grid;
    grid-template-columns: 1fr minmax(0, 287px);
    gap: 3.8rem;
}

.suport-ticket-sec .support-tickets-chat .ticket-detail-panel {
    padding: 1.6rem 1.7rem;
    background: #FFFFFF;
    border: 1px solid #EEEEEE;
    height: fit-content;

    position: sticky;
    top: 7rem;
}

.suport-ticket-sec .support-tickets-chat .ticket-detail-panel .heading {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: #212121;
}

.suport-ticket-sec .support-tickets-chat .ticket-detail-panel .item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.suport-ticket-sec .support-tickets-chat .ticket-detail-panel .item h3 {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    color: #757575;
}

.suport-ticket-sec .support-tickets-chat .ticket-detail-panel .item span {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    text-align: right;
    color: #212121;
}

.banner-sec {
    padding-bottom: 9.6rem;
}

.banner-sec .banner {
    margin-top: 6.4rem;
    min-height: 240px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 3.2rem 1.6rem;
    background: #F8F9FB;
    border-radius: 4px;
}

.banner-sec .banner .question-heading {
    padding-bottom: 8px;
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 600;
    font-size: 1.8rem;
    line-height: 3.2rem;
    color: #212121;
}

.banner-sec .banner .answerTopQuestion {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 1.8rem;
    line-height: 3.2rem;
    color: #616161;
    text-align: center;
    max-width: 768px;
}

.banner-sec .banner .answerTopQuestion a {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 1.8rem;
    line-height: 3.2rem;
    color: #418FEA;
}

.banner-sec .banner .ticket-Button {
    margin-top: 3.2rem;
    width: 143px;
    height: 40px;
    background: #3B1B7C;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 2.4rem;
    color: #FFFFFF;
}

.help-center-header-dropdowns {
    display: flex;
    align-items: center;
    gap: 2.4rem;
}

.help-center-header-dropdowns .user-dropdown #userDropdown {
    border-radius: 50%;
    height: 32px;
    width: 32px;
    overflow: hidden;
}

.help-center-header-dropdowns .user-dropdown .dropdown-menu {
    width: 246px;
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
    padding: 0;
    border-radius: 0;
    margin-top: -10px !important;
}

.help-center-header-dropdowns .user-dropdown .dropdown-menu .dropdown-top {
    display: grid;
    grid-template-columns: 4rem 1fr;
    gap: 1.4rem;
    align-items: center;
    padding: 1.6rem 1.6rem 2.1rem 1.6rem;
}

.help-center-header-dropdowns .user-dropdown .dropdown-menu .dropdown-top .user-image {
    position: relative;
}

.help-center-header-dropdowns .user-dropdown .dropdown-menu .dropdown-top .user-image img {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
}

.help-center-header-dropdowns .user-dropdown .dropdown-menu .dropdown-top .user-image .user-status {
    display: block;
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    outline: 2px solid #FFFFFF;
    background-color: #6F7C80;
    bottom: 1px;
    right: 0px;
}

.help-center-header-dropdowns .user-dropdown .dropdown-menu .dropdown-top .user-image .user-status.active {
    background-color: #12B76A;
}

.help-center-header-dropdowns .user-dropdown .dropdown-menu .dropdown-top .user-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.help-center-header-dropdowns .user-dropdown .dropdown-menu .dropdown-top .user-info .user-name {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 600;
    font-size: 1.4rem;
    line-height: 1.6rem;
    letter-spacing: -0.5px;
    color: #212121;
}

.help-center-header-dropdowns .user-dropdown .dropdown-menu .dropdown-top .user-info .user-email {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 1.2rem;
    line-height: 1.6rem;
    color: #424242;
    word-break: break-all;
}

.help-center-header-dropdowns .user-dropdown .dropdown-menu .dropdown-middle {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.8rem 0;
    border-top: 1px solid #E0E0E0;
    border-bottom: 1px solid #E0E0E0;
}

.help-center-header-dropdowns .user-dropdown .dropdown-menu .dropdown-bottom {
    padding: 0.6rem 0;
}

.help-center-header-dropdowns .user-dropdown .dropdown-menu .dropdown-middle .drpdown-link,
.help-center-header-dropdowns .user-dropdown .dropdown-menu .dropdown-bottom .drpdown-link {
    display: block;
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 1.6rem;
    color: #424242;
    padding: 1rem 1.6rem;
}

.help-center-header-dropdowns .user-dropdown .dropdown-menu .dropdown-middle .drpdown-link:hover,
.help-center-header-dropdowns .user-dropdown .dropdown-menu .dropdown-bottom .drpdown-link:hover {
    background-color: #F5F5F5;
}

.status {
    display: flex;
    align-items: center;
    /* flex-direction: column; */
    gap: 6px;
    padding: 2px 8px;
    border-radius: 16px;
    width: fit-content;
}

.status h3 {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 18px;
}

.status.pending {
    background: #E9F3FF;
}

.status.pending h3 {
    color: #3B1B7C !important;
}

.status.pending svg circle {
    fill: #3B1B7C;
}

.status.resolved {
    background: #ECFDF3;
}

.status.resolved h3 {
    color: #027A48 !important;
}

.status.resolved svg circle {
    fill: #13BD38;
}




@media (min-width: 576px) {

    .rating-modal .modal-dialog,
    .feedback-modal .modal-dialog {
        max-width: 643px !important;
        margin: 0 auto;
    }
}


/* Course Catalogue Modals */


@media screen and (max-width: 991px) {
    .new-paymentMethods {
        grid-template-columns: 1fr;
    }

    .new-paymentMethods .right-column {
        max-width: 592px;
    }

    .suport-ticket-sec .support-tickets-chat {
        display: flex;
        flex-direction: column-reverse;
    }
    .course-trends{
        margin-top: 20px !important;
    }
}

@media screen and (max-width: 520px) {
    .qama-paymentMethods {
        margin-left: 0;
        margin-right: 0;
    }

    .new-paymentMethods {
        margin-left: 0;
        margin-right: 0;
    }

    .new-paymentMethods .right-column .field-wraper {
        flex-wrap: wrap;
        gap: 0;
    }
}

@media screen and (max-width: 375px) {
    .qama-paymentMethods {
        padding: 3px;
    }

    .new-paymentMethods .left-column .payment-label {
        padding: 0;
    }

    .new-paymentMethods {
        padding: 5px;
    }
}

@media (min-width: 576px) {
    .paymentMethods-modal .modal-dialog {
        max-width: 512px;
        margin: 1.75rem auto;
    }
}


/* Learner Profile Payment Method */


@media screen and (max-width: 425px) {

    .dropdown-menu.show {
        width: 300px;
    }

    .ticket-conversation-container .user-msg,
    .ticket-conversation-container .admin-msg {
        grid-template-columns: 1fr;
    }

    .ticket-conversation-container .user-msg .avatar,
    .ticket-conversation-container .admin-msg .avatar {
        width: fit-content;
    }
}

/* Learner Notifications */


@media screen and (max-width: 768px) {
    .help-center-section .search-field-form .helpCenter-field {
        width: 85%;
    }

    .submit-ticket-form .required-filds-box .required-field {
        width: 95%;
    }

    .submit-ticket-form .required-filds-box .txt-area {
        width: 95%;
    }

    .submit-ticket-form .required-filds-box .selsctFile {
        width: 95%;
    }

    .select-box select {
        width: 95%;
    }
}

/* Help Center Accordian Ends */


@media screen and (max-width:768px) {
    .qama-footer .footer-content {
        display: grid;
        justify-content: space-between;
        row-gap: 5rem;
        grid-template-columns: repeat(4, auto);
    }
}

@media screen and (max-width:520px) {
    .qama-footer .footer-content {
        grid-template-columns: repeat(3, auto);
    }
}

@media screen and (max-width:425px) {
    .qama-footer .footer-content {
        grid-template-columns: repeat(2, auto);
    }

    .course-menu-cards {
        grid-template-columns: 1fr;
    }
}

/* Footer Style Ends */
@media screen and (max-width: 1190px) {
    .my-cart-section .cart-container {
        grid-template-columns: 1fr;
        gap: 4rem;
    }
}

@media screen and (max-width: 1100px) {
    .course-cataloge-container {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 991px) {
    .courses-section .courses-container {
        grid-template-columns: 1fr;
    }

}

/****** Courses Page Style Ends********/

@media screen and (max-width:768px) {
    .disp2 {
        display: none;
    }

    .disp {
        display: block !important;
        width: 100%;
    }

    .course-provider-section .course-provider {
        grid-template-columns: 1fr;
    }

    .course-provider-section .course-provider .course-provider-detail {
        gap: 2rem;
    }

    .course-provider-section .course-provider .course-provider-detail .top-info-container {
        margin-top: 0px !important;
    }

    .course-provider-section .course-provider .course-provider-detail .top-info {
        margin-left: 0;
    }
}

@media screen and (max-width:665px) {
    .my-cart-section .cart-container .cart-items .cart-item {
        grid-template-areas: "checkoutcartimage checkoutcartimage"
            "checkoutcartcontent checkoutcartcontent";
    }

    .my-cart-section .cart-container .cart-items .cart-item .cart-image {
        height: 16.6rem;
        width: 19rem;
    }

    .my-cart-section .cart-container .cart-items .cart-item .content {
        grid-template-columns: 1fr;
    }

    .reward-banner-sec .reward-banner {
        flex-direction: column;
        align-items: center;
    }

}

@media screen and (max-width: 375px) {
    .courses-section .courses-card-container .buttons {
        flex-wrap: wrap;
    }
    .work-experience .experience-detail{
        flex-wrap: wrap;
    }
    #v-pills-View-Profile{
        padding-left: 20px;
    }

    .courses-section .courses-card-container .buttons .nav {
        max-width: 330px;
        order: 1;
    }

    .courses-section .courses-card-container .buttons .prev,
    .courses-section .courses-card-container .buttons .next {
        order: 2;
    }

    .courses-section .card-wrapper {
        grid-template-columns: repeat(auto-fill, 277px);
    }

    .course-cataloge-container .found-courses .filter {
        flex-wrap: wrap;
    }

    .course-cataloge-container .card-wrapper {
        padding: 4rem 0px;
    }
}








@media screen and (max-width: 991px) {

    .story-section .storry {
        grid-template-columns: 1fr !important;
    }

    .story-section .storry>img {
        max-width: 54.2rem;
    }

    .reviews-section {
        padding-top: 0 !important;
    }

    .container {
        padding: 0 1.5rem;
    }

    .reviews-section .reviews-wraper {
        grid-template-columns: 1fr !important;
    }

    .contact-section .contact-form {
        display: grid;
        grid-template-columns: 1fr;
    }

    .contact-section .contact-form .contact-detail {
        padding-left: 0rem;
        padding-right: 0rem;
    }

    .recent-blogs-sec .post-container {
        grid-template-columns: 1fr !important;
    }

}

@media screen and (max-width: 768px) {


    .about-hero-sec .high-quality-education {
        font-size: 3rem;
        line-height: 3rem;
    }

}

@media screen and (max-width: 520px) {

    .recent-blogs-sec .post-container .right-blogs .blogs-cards {
        grid-template-columns: 1fr !important;
    }
    .lorem-h2{
        padding-left: 15px;
        padding-right: 15px;
    }
    .landing-h2{
        font-size: 2.1rem;
    }
    .join-qama-section .content .join-qama {
        font-size: 3rem;
        line-height: 4.3rem;
    }

    .social-section .coursera-grid {
        grid-template-columns: 1fr;
    }

    .social-section .coursera-grid .blue-bg {
        margin-top: 1.5rem;
    }

    .coursera-hero-sec .coursera-content {
        left: 1.5rem;
    }

    .feauterd-courses-sec .courses-card-container .swiper-button-next,
    .feauterd-courses-sec .courses-card-container .swiper-button-prev {
        width: 3rem;
        height: 3rem;
    }

    .feauterd-courses-sec .courses-card-container .swiper-button-next:after,
    .feauterd-courses-sec .courses-card-container .swiper-button-prev:after {
        font-size: 1rem;
    }

}

@media screen and (max-width:475px) {

    .blogs-n-articles-sec .blogs-hero .fields-container .fields-wraper {
        grid-template-columns: 1fr;
    }

    .all-blogs-sec .blog-container {
        grid-template-columns: repeat(auto-fill, minmax(35rem, 40.5rem)) !important;
    }
}