@import "./style.css";

/* mypreponline */

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


.why-index{
    z-index: 5;
    margin-bottom: 40px;
}




/* -------------------------------------- Hero Section -------------------------------------- */

.hero-padding-top {

    padding-top: 70px;
    /* height: 400px; */
}

.heroList {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 10px;
}

.heroList:not(:last-child) {
    margin-bottom: 15px;
}

.heroList p {
    font-size: var(--font-size16);
    line-height: 121.42%;
}

.indexHeroSection h1 {
    margin-bottom: 20px;
}


.heroBtns {
    display: flex;
    align-items: center;
    gap: 10px;
}


.heroBannerBtn {
    width: 166px;
    height: 50px;
    font-size: var(--font-size16);
    line-height: 118.75%;
    border-radius: 4px;
    z-index: 2;
}

.heroBannerBtn.startBtn {
    background: var(--white-color);
    border: 1px solid var(--primary-color);
    border-radius: 4px;
    font-weight: 500;
    color: var(--primary-color);
}

.heroBannerBtn.downloadBtn {
    background: var(--black-color);
    color: var(--white-color);
    border: none;
}


/* (Attempt Box) */

.attemptBox {
    background: #FEF4FF;
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.08), 0px 7px 15px rgba(0, 0, 0, 0.05);
    border-radius: 7px;
    width: 100%;
    min-height: 110px;
    margin-top: 35px;
    position: relative;
}

.attemptBox h4 {
    font-style: normal;
    font-weight: 600;
    font-size: var(--font-m-size18);
    line-height: 133%;
    color: var(--black-color);
}

.attemptBox p {
    font-weight: 400;
    font-size: var(--font-size16);
    line-height: 150%;
    color: var(--gray2-color);
}


.attempt-btn {
    width: 161px;
    height: 40px;
    font-size: var(--font-size16);
    color: var(--white-color);
    border: none;
    background-image: linear-gradient(to left,#ed5f69,#f9801c);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.attempt-btn:hover {
    color: var(--white-color);
    background-image: linear-gradient(to left,#ed5f69,#f9801c);
}

.close-attempt {
    position: absolute;
    border: none;
    right: -13px;
    top: -13px;
    background: unset;
    width: 24px;
    height: 26px;

}





/* -------------------------------------- Explore Exam Section -------------------------------------- */

#ExploreExamSection {
    width: 100%;
    min-height: 440px;
    background: var(--bg-color-shade);
    margin-top: 100px;
    position: relative;
}

#ExploreExamSection::before {
    content: '';
    background: url('./../images/circles.svg');
    background-size: contain;
    width: 25vw;
    height: 25vw;
    position: absolute;
    top: -13vw;
    right: -6.94vw;
    z-index: 0;
}


.ExploreExamSection {
    position: relative;
}

.myprep-infoBox {
    width: 100%;
    height: 110px;
    background: var(--white-color);
    box-shadow: 0px 8px 25px rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -55px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    padding: 24px;
}

.crackItEasyly h6 {
    font-weight: 700;
    font-size: var(--font-size18);
    color: var(--black-color);
    margin-bottom: 0;
    line-height: 133.33%;
}

.crackItEasyly p {
    font-weight: 400;
    font-size: var(--font-size16);
    color: var(--gray2-color);
    margin-bottom: 0;
    line-height: 150%;
}

.vertical-br {
    border-right: 1px solid var(--prep-border-color);
    height: 30px;
    margin: 0 30px;
}

.myprepRecord {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 174px;
}

.myprepRecord p {
    font-weight: 400;
    font-size: var(--font-size16);
    color: var(--gray2-color);
    margin-bottom: 0;
    line-height: 150%;
}

.myprepRecord h6 {
    font-weight: 700;
    font-size: var(--font-size18);
    color: var(--black-color);
    margin-bottom: 0;
    line-height: 133.33%;
}

.recordCircle {
    min-width: 42px;
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.clipboardSvg {
    width: 20px;
    height: 20px;
}

.recordCircle.purple {
    background: #fcdcff;
}

.recordCircle.blue {
    background: #e4eeff;
}

.recordCircle.green {
    background: #ddffde;
}

.recordCircle.orange {
    background: #ffeddd;
}



.ExploreExamMain {
    padding-top: 130px;
}



.sectionHeading {
    font-weight: 700;
    font-size: var(--font-size24);
    line-height: 120.8%;
    text-align: center;
    color: var(--black-color);
}

.sectionHeading span {
    color: var(--primary-color);
    font-size: var(--font-size24);

    font-weight: 600;
}

.sectionHeading.top {
    margin-top: 70px;
}


/* examCarousal */

.examCarousal {
    margin-top: 47px;
    position: relative;
}

.examSwiper {
    position: static;
}


.examCard {
    background: var(--white-color);
    box-shadow: 0px 4px 25px rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    /* width: 144px !important; */
    height: 132px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--black-color);
    /* margin: 10px 1px; */
}

.examCard p {
    font-size: var(--font-size16);
    margin-top: 10px;
    line-height: initial;
}


.examCard .swiper-slide {
    width: 100%;
    height: 100%;
    font-size: var(--font-size16);
    background: var(--white-color);
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.examCard .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}



.examCarousal .swiper-button-next {
    background-image: url(./../icons/swiper-next.svg);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center;
    right: -5%;

}

.examCarousal .swiper-button-next::after {
    display: none;
}

.examCarousal .swiper-button-prev {
    background-image: url(./../icons/swiper-prev.svg);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center;
    left: -5%;
}

.examCarousal .swiper-button-prev::after {
    display: none;
}


/* (exam mobile Section) */

.examMobileCard {
    background: var(--white-color);
    box-shadow: 0px 4px 25px rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    height: 78px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.examMobileCard p {
    margin-top: 15px;
    font-size: var(--font-size14);
    line-height: initial;
    color: var(--black-color);
    text-align: center;
}

.examMobileCard img {
    width: 30px;
    height: 30px;
}


.exploreSeeMoreBtn {
    background: transparent;
    border: none;
    font-size: var(--font-size16);
    color: var(--black-color);
    font-weight: 400;
    position: relative;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
}

.exploreSeeMoreBtn::before {
    content: '';
    display: inline-flex;
    align-items: center;
    background: url('./../icons/swiper-next.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center;
    width: 16px;
    height: 16px;
    margin-right: 4px;
    transform: rotate(90deg);
    transition: all 0.3s ease;
}

.expand-open .exploreSeeMoreBtn::before {
    transform: rotate(-90deg);
}



.ExploreExamFaceExpand {
    overflow: hidden;
    height: 0;
    transition: all 0.3s ease;
}

/* -------------------------------------- Preparation Section -------------------------------------- */

.preparationSection {
    min-height: 350px;
    padding: 70px 0;
}


.sectionSubHeading {
    font-size: var(--font-size16);
    color: var(--gray2-color);
    margin-top: 10px;
    text-align: center;
    line-height: initial;
}

.preparationGuide {
    margin-top: 47px;
}


.guideBox {
    width: 100%;
    height: 132px;
    background: var(--white-color);
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.08), 0px 7px 15px rgba(0, 0, 0, 0.05);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 40px 10px;
}


/* Card */

.cardHeading {
    font-weight: 700;
    font-size: var(--font-size18);
    line-height: 122.22%;
    color: var(--black-color);
}

.cardSubHeading {
    font-weight: 400;
    font-size: var(--font-size16);
    line-height: 118.75%;
    color: var(--gray2-color);
}


.guideCircle {
    min-width: 50px;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.guideCircleImg {
    width: 30px;
    height: auto;
}

.guideCircleImg1 {
    width: 20px;
    height: auto;
}


.guideCircle.purple {
    background: #FDE7FF;
}

.guideCircle.orange {
    background: #FFEFE3;
}

.guideCircle.blue {
    background: #E2F4FF;
}

.guideCircle.green {
    background: #F2FFE6;
}


.preparationGuide.row .col {
    width: 25%;
}



/* -------------------------------------- Popular Exam Section -------------------------------------- */

.popularExamHeight {
    min-height: 400px;
    height: 100%;
}

#popularExamSection {
    /* max-height: 635px; */
    padding: 70px 0;
    background: var(--white-color);
    position: relative;
    z-index: 5;
}

#popularExamSection::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: var(--bg-color-shade);
    width: 100%;
    height: 77%;
    z-index: -1;
}

.popular-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 45px;
}

.navtab-bar .nav-link {
    font-size: var(--font-size16);

}

.popular-tab .nav-link {
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    background: var(--white-color) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--gray2-color);
}

.popular-tab .nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    color: var(--white-color) !important;
    background-color: var(--primary-color) !important;
}


.popular-tab .nav-item:not(:last-child) {
    margin-right: 10px;
}


/* courses */
.popularCarousal .swiper {
    position: unset;
}

.courseCard {
    width: 100%;
    min-height: 400px;
    background: var(--white-color);
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.08), 0px 7px 15px rgba(0, 0, 0, 0.05);
    border-radius: 6px;
    margin: 10px 1px;
}


.courseImgWrapper {
    width: 100%;
    height: 44%;
    position: relative;
}

.course-img {
    width: 100%;
    height: 100%;
    object-fit: fill;
}

.couse-label {
    font-size: var(--font-size14);
    background: linear-gradient(90deg, #60D164 8.16%, #0EB514 43.53%, #0B850F 99.83%);
    border-radius: 0px 0px 0px 4px;
    padding: 0 12px;
    color: var(--white-color);
    position: absolute;
    right: 0;
    top: 0;
    line-height: initial;
}

.courseCardDetails {
    width: 100%;
    height: 56%;
}


.discountCode {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 18px;
    background: linear-gradient(90deg, #60D164 8.16%, #0EB514 43.53%, #0B850F 99.83%);
    display: block;
    font-size: var(--font-size12);
    color: var(--white-color);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: initial;
}


.courseDetail {
    padding: 14px 0px;
    border-bottom: 1px solid var(--border-color);
    margin: 0 14px;
}

.courseDetail h6 {
    font-weight: 500;
    font-size: var(--font-size16);
    line-height: 118.75%;

    color: var(--black-color);
}

.courseDetailSubText {
    font-weight: 400;
    font-size: var(--font-size14);
    line-height: 121.42%;
    color: var(--gray2-color);
    margin-top: 4px;
}


.coursePoints {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}


.coursePoint {
    display: flex;
    align-items: center;
    list-style: none;
    gap: 4px;
}

.coursePoint p {
    font-weight: 400;
    font-size: var(--font-size12);
    color: var(--gray2-color);
    line-height: initial;
}


.price-offer {
    display: flex;
    align-items: center;
    gap: 10px;
}

.price-offer p {
    font-weight: 500;
    font-size: var(--font-size16);
    line-height: 118.75%;
    color: var(--black-color);
}

.price-offer s {
    font-weight: 400;
    font-size: var(--font-size12);
    line-height: 125%;
    color: var(--red1-color);
}

.price-offer~p {
    font-style: normal;
    font-weight: 400;
    font-size: var(--font-size12);
    line-height: 125%;
    color: var(--green1-color);
}

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


.exploreBtn {
    width: 200px;
    height: 40px;
    background-image: linear-gradient(to left,#ed5f69,#f9801c);
    border-radius: 4px;
    border: none;
    color: var(--white-color);
    margin-top: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.exploreBtn span {
    min-width: 24px;
    min-height: 24px;
    background-color: #9F3AA8;
    margin-left: 10px;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;

}

.exploreBtn span svg {
    width: 9px;

}

/* -------------------------------------- content we offer -------------------------------------- */



/* -------------------------------------- hof Hall of Fame -------------------------------------- */

.hofSectionShadow {
    position: relative;
}

.hofSectionShadow::before {
    content: '';
    background: #FFFDF8;
    position: absolute;
    width: calc(100% - 100px);
    height: calc(100% - 150px);
    background-position: center;
    background-size: cover;
    border-radius: 24px;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
}


.hofImg {
    margin-top: 50px;
}

.hofCarousal {
    width: 100%;
}

.hofCarousal .swiper {
    position: unset;
}


.hofCard {
    width: 100%;
    height: 253px;
    background: var(--white-color);
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.08), 0px 7px 15px rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 10px 1px;
    padding: 4px;
}

.hofCard h5 {
    font-weight: 600;
    font-size: var(--font-size18);
    line-height: 122.22%;
    /* identical to box height */

    text-align: center;

    color: var(--black-color);
    margin-top: 15px;
}

.hofCard p {
    font-style: normal;
    font-weight: 600;
    font-size: var(--font-size14);
    line-height: 121.42%;
    /* identical to box height */

    text-align: center;

    color: var(--primary-color);
    margin-top: 8px;
}

.hofCard span {
    font-style: normal;
    display: block;
    font-weight: 400;
    font-size: var(--font-size14);
    line-height: 121.42%;
    /* identical to box height */

    text-align: center;
    margin-top: 8px;
    color: var(--black-color);
}


/* -------------------------------------- hof Hall of Fame record -------------------------------------- */

.secondActiveRecord {
    margin-top: 80px;
}

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

.myprepRecord.myprepRecord2 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0;
}

.myprepRecord.myprepRecord2 p {
    margin-top: 8px;
}



.record-vetical-br {
    border-right: 1px solid var(--border-color);
    height: 30px;
}



/* -------------------------------------- download Now Section -------------------------------------- */


.downloadNowSection {
    width: 100%;
    height: 375px;
    margin-top: 150px;
    background: var(--primary-color);
    position: relative;
}

.mobileImg {
    z-index: 2;
}


.downloadNowSection::before {
    content: '';
    background: url('./../images/downNowCircle.svg');
    background-size: contain;
    width: 400px;
    height: 400px;
    position: absolute;
    bottom: -50%;
    left: 5%;
    z-index: 0;

}

.downloadNowSection::after {
    content: '';
    background: url('./../images/downNowCircle.svg');
    background-size: contain;
    width: 400px;
    height: 400px;
    position: absolute;
    top: -50%;
    right: -5%;
    z-index: 0;
}



.mobileappWrapper {
    width: inherit;
    height: inherit;
}

.mobileappWrapper .row {
    width: inherit;
    height: inherit;
}

.mobileImgDiv {
    position: relative;
    width: 100%;
    height: 100%;
}

.mobileImg {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}



.downloadText {
    font-weight: 700;
    font-size: var(--font-size24);
    line-height: 120.8%;
    color: var(--white-color);
}


.downloadText2 {
    font-style: normal;
    font-weight: 400;
    font-size: var(--font-size16);
    line-height: 118.75%;

    color: var(--white-color);
    margin-top: 8px;
}

.mobileNumBox {
    /* width: 490px; */
    width: 100%;
    height: 47px;
    background: var(--white-color);
    border-radius: 4px;
    margin-top: 20px;
    display: flex;
    align-items: center;
    padding: 5px;
    z-index: 2;
}


.mobileNoInput {
    border: none;
    font-size: var(--font-m-size16);
}

.mobileNoInput:active {
    border: none;
    box-shadow: none;
}

.mobileNoInput:focus {
    border: none;
    box-shadow: none;
}


.getLinkBtn {
    width: 106px;
    height: 100%;
    font-size: var(--font-size16);
    background-image: linear-gradient(to left,#ed5f69,#f9801c);
    border-radius: 2px;
    color: var(--white-color);
    border: none;
    line-height: initial;
}


.heroBannerBtn.downloadBtn2 {
    background: var(--black-color);
    color: var(--white-color);
    border: none;
    z-index: 2;
}


/* -------------------------------------- why Section -------------------------------------- */

.why-index{
    z-index: 5;
}

.whySection {
    width: 100%;
    padding: 70px 0;
}

.whySection h3 {
    color: var(--primary-color);
    font-weight: 700;
}


.whyText {
    font-style: normal;
    font-weight: 400;
    font-size: var(--font-size16);
    line-height: 118.75%;
    margin-top: 10px;
    color: var(--gray2-color);
}

.whyCard {
    width: 100%;
    /* height: 88px; */
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.08), 0px 7px 15px rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    /* padding: 20px; */
}

.whyCard p {
    font-size: var(--font-size16);
}

.getStartedBtn {
    width: 159px;
    height: 39px;
    background-image: linear-gradient(to left,#ed5f69,#f9801c);
    color: var(--white-color);
    font-size: var(--font-size16);
    border: none;
    border-radius: 4px;
}



/* -------------------------------------- Paper Section -------------------------------------- */

.paperSection {
    background-color: var(--bg-color-shade);
    padding: 50px 0;
}


.paperName {
    font-style: normal;
    font-weight: 700;
    font-size: var(--font-size16);
    line-height: 118.75%;
    color: var(--primary-color);
}

.paperList {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}


.paperItems {
    list-style: none;
    font-weight: 400;
    font-size: var(--font-size14);
    line-height: 22px;
    color: var(--gray2-color);
    margin-bottom: 10px;
}
.paperItems a{
    color: var(--gray2-color);
}

.paper-vc {
    height: 15px;
    border-right: 1px solid #b0b0b0;
    margin: 0 16px;
}


.paperList .paperItems:last-child .paper-vc {
    display: none;
}


/* main Index View */

.main-index-desktop {
    display: block;
}

.main-index-mobile {
    display: none;
}



/* -------------------------------------- Media Queries -------------------------------------- */


@media(max-width:992px) {
    /* explore Exam Section */

    #ExploreExamSection {
        margin-top: 200px;
    }

    .myprep-infoBox {
        flex-direction: column;
        height: 260px;
        top: -130px;
        justify-content: unset;
        padding: 24px 12px;

    }

    .vertical-br {
        display: none;
    }

    .myprepcrack {
        margin-top: 15px;
    }


    .myprepRecord {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        justify-content: flex-start;
    }


    .ExploreExamMain {
        padding-top: 170px;
    }

    .record-vetical-br {
        display: none;
    }

    .recordBorder {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 12px;
    }

    .recordBorder:nth-child(1) {
        border-right: 1px solid var(--border-color);
        border-bottom: 1px solid var(--border-color);
    }

    .recordBorder:nth-child(2) {
        border-bottom: 1px solid var(--border-color);
    }

    .recordBorder:nth-child(3) {
        border-right: 1px solid var(--border-color);
    }



    .downloadNowSection {
        height: 650px;
    }

    .mobileImg {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 170px;
        z-index: 2;
    }


    .downloadNowSection::after {
        content: '';
        background: url(./../images/downNowCircle.svg);
        background-size: contain;
        width: 350px;
        height: 350px;
        position: absolute;
        top: 40%;
        right: -10%;
        z-index: 0;
    }

    .downloadNowSection::before {
        content: '';
        background: url(./../images/downNowCircle.svg);
        background-size: contain;
        width: 350px;
        height: 350px;
        position: absolute;
        bottom: -25%;
        left: -5%;
        z-index: 0;
    }

    .hofSectionShadow::before {
        display: none;
    }

    /* hero cricle */
    #ExploreExamSection::before {
        content: "";
        width: 300px;
        height: 300px;
        position: absolute;
        top: -50%;
        right: -10%;
        z-index: 0;
    }

}



@media(max-width:768px) {

    /* download Now Section */

    .heroBannerBtn.downloadBtn2 {
        background: var(--black-color);
        color: var(--white-color);
        width: 100%;
        z-index: 2;
        border: none;
    }

}


@media(max-width:576px) {

    .guideBox {
        width: 100%;
        height: auto;
        background: var(--white-color);
        box-shadow: 0px 0px 2px rgb(0 0 0 / 8%), 0px 7px 15px rgb(0 0 0 / 5%);
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 18px 10px;
    }

    /* Hero Section */
    .hero-padding-top {
        padding-top: 40px;
    }

    .heroHeading1 {
        font-size: var(--font-m-size18);
    }

    .heroBannerBtn {
        width: 166px;
        height: 44px;
    }


    .heroCheckCircle {
        width: 20px;
        height: 20px;
    }


    .heroBannerBtn img {
        width: 14px;
        line-height: initial;
    }

    /* Explore Exam  */
    .ExploreExamMain {
        padding-top: 177px;
    }


    /* prep section */
    .preparationSection {
        padding-top: 40px;
    }

    .preparationGuide {
        margin-top: 16px;
    }

    .myprepRecord p {
        font-size: var(--font-m-size12);

    }

    .myprepRecord h6 {
        font-size: var(--font-m-size14);
    }


    /* popular Exam */
    #popularExamSection {
        padding: 40px 0;
    }


    /* hof */
    .hofImg {
        margin-top: 40px;
    }

    .popular-tab {
        margin-top: 40px;
    }

    .examCarousal {
        margin-top: 8px;
        position: relative;
    }

    .secondActiveRecord {
        margin-top: 50px;
    }


    /* download app */

    .downloadNowSection {
        width: 100%;
        height: 340px;
        margin-top: 40px;
        background: var(--primary-color);
        position: relative;
    }


    /* why Section */
    .whySection {
        width: 100%;
        padding: 40px 0;
    }

    .whygrid{
        margin-top: 16px !important;
    }

    /* ExploreExamSection */

    #ExploreExamSection {
        padding: 0 12px;
    }

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


    .exploreBtn {
        width: 100%;
        height: 40px;
        background: var(--primary-color);
        border-radius: 4px;
        border: none;
        color: var(--white-color);
        margin-top: 0px;
    }


    .sectionHeading {
        font-weight: 700;
        font-size: var(--font-m-size20);
        line-height: 121%;
    }

    .sectionHeading span {
        font-weight: 600;
        font-size: var(--font-m-size20);
        line-height: 121%;
    }



    /* Carousal */

    .examMainCarousal .swiper-button-next,
    .popularCarousal .swiper-button-next,
    .hofCarousal .swiper-button-next {
        display: none;
    }

    .examMainCarousal .swiper-button-prev,
    .popularCarousal .swiper-button-prev,
    .hofCarousal .swiper-button-prev {
        display: none;
    }



    .navtab-bar {
        flex-wrap: nowrap;
        overflow-y: hidden;
        overflow-x: scroll;
        width: 100%;
        padding-bottom: 4px;
    }

    .navtab-bar .nav-link {
        line-height: initial;
        min-width: 82px;
        white-space: nowrap;
    }



    .navtab-bar::-webkit-scrollbar {
        height: 2px;
        background-color: var(--white-color);
    }



    /* circle */
    .circles {
        width: 250px;
        height: auto;
        position: absolute;
        top: -222px;
        right: -15%;
        z-index: 0;
    }

    .downloadNowSection::after {
        content: '';
        background: url(./../images/downNowCircle.svg);
        background-size: contain;
        width: 250px;
        height: 250px;
        position: absolute;
        top: -30%;
        right: -30%;
        z-index: 0;
    }

    .downloadNowSection::before {
        content: '';
        background: url(./../images/downNowCircle.svg);
        background-size: contain;
        width: 250px;
        height: 250px;
        position: absolute;
        bottom: -15%;
        left: -5%;
        z-index: 0;
    }

    /* why section */

    .whyCard {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 12px !important;
        height: 150px;

    }


    /* main Index View */

    .main-index-desktop {
        display: none;
    }

    .main-index-mobile {
        display: block;
    }

    .paper-vc {
        height: 15px;
        border-right: 1px solid #b0b0b0;
        margin: 0 8px;
    }

    .paperItems {
        list-style: none;
        font-weight: 400;
        font-size: var(--font-size14);
        line-height: 22px;
        color: var(--gray2-color);
        margin-bottom: 10px;
        font-size: 11.5px;
    }

}


@media(max-width:576px) {

    /* hero section */
    .heroBtns .heroBannerBtn {
        width: 100%;
    }
    .heroBtns a {
        width: 100%;
    }

    .getStartedBtn {
        width: 100%;
    }

    .exploreExamExpandBox{
        padding-bottom: 40px;
    }

    .examMobileCard {
        background: var(--white-color);
        box-shadow: 0px 4px 25px rgb(0 0 0 / 8%);
        border-radius: 4px;
        height: 95px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

}
/* New chnages by Raghav */
.hofCard img{
    height: 100px;
}
.whyCard img{
    height: 50px;
}