/* dashboard header */
.header-section-dashboard{
    background-color: var(--white);
    padding: 1rem 0;
    align-items: center;
}
.header-section-dashboard .btn-container{
    display: flex;
    justify-content: space-evenly;
}
.header-section-dashboard .grade-select{
    background: linear-gradient(180deg, #FF9A17 -0.51%, #FF921B 18.1%, #FF7B27 47.41%, #FF5739 83.53%, #FF3849 109.48%);
    border: none;
    outline: none;
    color: var(--white);
    width: calc(6rem + 5px);
    padding: 10px;
    border-radius: 5px;
    font-weight: 500;
}
::-webkit-scrollbar {
    width: 3px;    
}
::-webkit-scrollbar-thumb {
    background: var(--orange);
    border-radius: 5px;
}
.dropdown-menu{
    --bs-dropdown-min-width: 6rem;
    max-height: 170px;
    overflow-y: scroll;
}

/* hero design  */
.hero-section{
    background: url('../images/banner/hero-dashboard-bg.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}
.hero-content-container{
    background: url('../images/pseudo/dashboard-hero-pseudo.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* padding: 12rem 8rem; */
}
.hero-content-container.blank{
     background: none;
    
    /* padding: 10rem auto; */
}
.dashborad-btn{
    border-radius: 60px;
    background: #82CC09;
    color: #FFF;
    font-size: 22px;
    font-weight: 700;
    line-height: 26.4px;
    letter-spacing: 2.2px;
    padding: 10px 15px;
    border: none;
}
.hero-heading{
    color: #1239AC;
    font-family: Lalezar;
    font-size: 70px;
    font-style: normal;
    font-weight: 400;
    line-height: 77px;
    letter-spacing: -2.1px;
}
.hero-description{
    color: #3E3E3E;
    font-family: Rubik;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 29.92px;
    text-transform: lowercase;
}
.cloud-img{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0;
}


.features-section{
    padding: 4rem 0;
    background: url('../images/other/dashbord-feature.png');
}
.features-box{
    border-radius: 10px;
    background: #FFF;
    box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.05);
    padding: 2rem;
    margin: 3rem 1rem;
    position: relative;
}
.features-box .features-icon-container{
    background-color: #FFF2E8;
    width: fit-content;
    padding: 2.5rem;
    border-radius: 50%;
    position: absolute;
    top: -3.5rem;
    left: 2rem;
    border: 1px dashed transparent;
}

.feature-title{
    color: #1239AC;
font-family: Lalezar;
font-size: 30px;
font-style: normal;
font-weight: 400;
line-height: 36px; /* 120% */
}
.feature-description{
    color: #7B7D83;
font-family: Rubik;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 29.92px; /* 166.222% */
}

.features-box:hover .features-icon-container {
    border-color: #1239AC;
    transition: border-color 1s ease;
}
.features-box:hover .features-icon-container img {
    transform: scale(1.5);
    transition: 1s;
}
.features-box:hover {
    background-color: #007cfb;
    color: white;
}
.features-box:hover .feature-title, .features-box:hover .feature-description {
    color: white;
}

/* overview design */
.overview-section{
    padding: 4rem 0;
}
.dashboard-title-row{
    text-align: center;
}
.dashboard-section-supertitle{
    color: #258E46;
    text-align: center;
    font-family: Rubik;
    font-size: 22px;
    font-style: normal;
    font-weight: 500;
    line-height: 26px; /* 118.182% */
    text-transform: capitalize;
    display: flex;
    align-items: center;
    justify-content: center;

}
.dashboard-section-title{
    margin: 10px 0;
    color: #000;
    text-align: center;
    font-family: Lalezar;
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    line-height: 52.8px; /* 132% */
}
.overview-container{
    background: url('../images/other/dashboard-overview.png');
    background-position: center right;
    background-size: contain;
    background-repeat: no-repeat;
    min-height: 430px;
    position: relative;
    padding: 2rem 0;
    color: var(--white);
}
.admission-circle{
    width: 430px;
    height: 430px;
    border-radius: 50%;
    background: #fff;
    position: absolute;
    border: 40px solid #1d42d9;
    margin: auto;
    top: -1.5rem;
    box-shadow: 4px 2px 13px -1px rgba(0,0,0,.6);
}
.overview-description{
    color: #FFF;
    font-family: Rubik;
    font-size: 18px;
    font-weight: 400;
    line-height: 32.4px;
}
.admission-list{
    display: flex;
    list-style-type: none;
    padding-left: 0;
    gap: 10px;
}
.admission-list li{
    
    
    text-align: center;
    /* margin-right: 1.5rem; */
    color: #FFF;
    /* font-size: 30px; */
    font-weight: 400;
    
    position: relative;
    min-width: 100px;
}
.admission-list li p{
    border: 3px solid var(--white);
    padding: 1.5rem 1rem;
    border-radius: 10px;
    margin-bottom: 0;
}
.admission-list-title{
    display: flex;
    list-style-type: none;
    padding-left: 0;
}
.admission-list li span{
    line-height: 100%;
    margin-bottom: 0;

    color: #FFF;
    text-align: center;
    font-family: Lalezar;
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
}
.admission-circle h2{
    position: absolute;
    color: #181818;
    font-family: Lalezar;
    font-size: 65px;
    font-style: normal;
    font-weight: 500;
    line-height: 360px;
    width: 100%;
    text-align: center;
}
@keyframes animationFramesOne {
    0%{transform: translate(0px,0px) rotate(0deg);}
    20%{transform: translate(73px,-1px) rotate(36deg);}
    40%{transform: translate(100px,72px) rotate(72deg);}
    60%{transform: translate(83px,100px) rotate(108deg);}
    80%{transform: translate(-40px,72px) rotate(144deg);}
    100%{transform: translate(0px,0px) rotate(0deg);}
  }
  @keyframes rotated{
    0% {
        -webkit-transform: rotateZ(0deg);
        transform: rotateZ(0deg);
    }
    100% {
        -webkit-transform: rotateZ(-360deg);
        transform: rotateZ(-360deg);
    }
}
@keyframes adshapes{
    0% {
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px);
    }
    50% {
        -webkit-transform: translateY(20px);
        transform: translateY(20px);
    }
    100% {
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px);
    }
}
@keyframes adshape{
    0% {
        -webkit-transform: translate(-20px);
        transform: translate(-20px);
    }
    50% {
        -webkit-transform: translate(20px);
        transform: translate(20px);
    }
    100% {
        -webkit-transform: translate(-20px);
        transform: translate(-20px);
    }
}
.admission-circle .admission-shape2{
    position: absolute;
    top: 15%;
    left: 22%;
    -webkit-animation: animationFramesOne 15s infinite linear;
    animation: animationFramesOne 15s infinite linear;
    z-index: 0;
}
.admission-circle .admission-shape3 {
    position: absolute;
    bottom: 15%;
    right: 22%;
    -webkit-animation: rotated 8s infinite linear;
    animation: rotated 8s infinite linear;
}
.admission-circle .admission-shape4 {
    position: absolute;
    right: 22%;
    top: 20%;
    -webkit-animation: adshapes 4s infinite linear;
    animation: adshapes 4s infinite linear;
}
.admission-circle .admission-shape1 {
    position: absolute;
    top: 75%;
    left: 22%;
    -webkit-animation: adshape 4s infinite linear;
    animation: adshape 4s infinite linear;
}

/* your subject design */
.your-subject-section{

}
.your-subject-section .row {
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
}
.your-subject-crad{
    border-radius: 10px;
    background: rgba(186, 15, 48, 0.10);
    margin: 1.2rem;
    padding: 1.2rem;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: space-around;
}
.your-subject-crad .subject-name{
    color: #012B51;
    font-family: Rubik;
    font-size: clamp(16px, 6vw, 30px);
    font-weight: 500;
}
.your-subject-crad:hover{
    background-color: var(--white);
    box-shadow: 0 0 10px grey;
}


/* recently watched section design */
.recently-watched-section{
    padding: 4rem 0;
}
.recently-watched-section .row{
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
}
.recently-watched-section .recently-watched-crad{
    margin: 1.2rem;
    border-radius: 10px;
    background: #FFF;
    box-shadow: 0px 1px 2px 0px rgba(12, 20, 15, 0.10);
}
.recently-watched-section .recently-watched-crad:hover{
    box-shadow: 0px 1px 6px 0px rgba(12, 20, 15, 0.50);
}
.recently-watched-section .recently-watched-crad img{
    width: 100%;
}
.recently-watched-context{
    padding: 1.5rem;
}
.recently-watched-context .sub-category{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.recently-watched-context .sub-category .category{
    border-radius: 4px;
    background: rgba(60, 102, 237, 0.08);
    padding: 0.5rem 1rem;
    color: #3C66ED;
    font-family: Rubik;
    font-size: 14px;
    font-weight: 500;
    line-height: 185%
}
.recently-watched-context .sub-category .timing{
    color: #258E46;
    font-family: Rubik;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
}
.recently-watched-context .recently-watched-title{
    color: #031220;
    font-family: Rubik;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 160%;
    margin-top: 10px;
}







/* learn page designing */
.hero-content-container.menu-container{
    position: relative;
    height:25rem;
    /* height: 50rem; */
}
.hero-content-container.menu-container.blank{
    position: relative;
    height:20rem;
    /* height: 50rem; */
}
.hero-content-container .hero-menu-learn{
    position: absolute;
    top: 8rem;
    left: 6rem;
}
.hero-content-container .hero-menu-ask-doubt{
    position: absolute;
    top: 15rem;
    left: 12rem;
    z-index: 2;
}
.hero-content-container .hero-menu-assessment{
    position: absolute;
    top: 8rem;
    left: 18rem;
}
.hero-content-container .hero-menu-learn:hover,
    .hero-content-container .hero-menu-ask-doubt:hover,
    .hero-content-container .hero-menu-assessment:hover,
    .hero-content-container .hero-menu-iq:hover,
    .hero-content-container .hero-menu-worksheet:hover,
    .hero-content-container .hero-menu-question-bank:hover {
        transform: scale(1.15);
        z-index: 3;
        transition: 1s;
    }
.hero-content-container .hero-menu-iq{
    position: absolute;
    top: 1rem;
    left: 24rem;
}
.hero-content-container .hero-menu-worksheet{
    position: absolute;
    top: 15rem;
    left: 24rem;
    z-index: 2;
}
.hero-content-container .hero-menu-question-bank{
    position: absolute;
    top: 8rem;
    left: 30rem;
}

/* latest watched section */
.latest-watched-section{
    padding: 4rem 0;
}
.latest-watched-section .row>*{
    padding: 0;
}
.latest-watched-section .latest-watched-card{
    border: 1px solid #f4f4f4;
    margin: 1.5rem;
}
.latest-watched-section .latest-watched-card:hover{
    box-shadow: 0 0 10px grey;
}
.latest-watched-section .latest-watched-card .latest-watched-card-context{
    padding-left: 1rem;
}
.latest-watched-card-context .latest-watched-video-title{
    color: #050D36;
    font-family: Rubik;
    font-size: 18px;
    font-weight: 600;
    line-height: 130%;
    margin-bottom: 1rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
}
.latest-watched-section .latest-watched-card .latest-watched-card-context ul{
    display: flex;
    align-items: center;
    justify-content: space-between;
    list-style-type: none;
    padding-left: 0;
}
.latest-watched-section .latest-watched-card .latest-watched-card-context ul li{
    color: #050D36;
    font-family: Rubik;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
}
.tags-list h5{
    color: #050D36;
    font-family: Rubik;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px; /* 120% */
}
.latest-watched-card-context .tags-list{
    display: flex;
    align-items: center;
    margin: auto;
}
.latest-watched-card-context .tags-list ul{
    margin: auto 0;
}
.latest-watched-card-context .tags-list ul li{
    border-radius: 5px;
    background: rgba(255, 102, 82, 0.10);
    color: #050D36;
    font-family: Rubik;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    padding: 7px 15px;
    margin-left: 10px;
}
.title-row{
    position: relative;
}
.title-back-arrow {
    position: absolute;
    width: fit-content;
    left: 6%;
    top: 10%;
}



/* ask a doubt page design */
.ask-doubt-form-section{
    padding: 4rem 0;
}
.ask-doubt-form-section .form-section-container{
    background: url(../images/other/ask-doubt-bg.png);
    /* background-position: center; */
    background-size: contain;
    background-repeat: no-repeat;
    padding: 5rem 0;
}
.my-doubts-btn{
    margin-bottom: 1rem;
    border-radius: 10px;
    background: #FF8345;
    color: var(--white);
    font-size: 18px;
    font-weight: 600;
    line-height: 27px;
    border: none;
    outline: none;
    padding: 12px 2rem;
    border: 1px solid transparent;
}
.my-doubts-btn:hover, .my-doubts-btn:focus, .my-doubts-btn:active{
    border: 1px solid var(--orange);
    background-color: white;
    color: var(--orange);
}
.doubt-form-container {
    border-radius: 30px;
    background: #FFF;
    box-shadow: 0px 20px 100px 0px rgba(9, 38, 49, 0.20);
    padding: 2rem;
}
.doubt-form-container .form-title{
    color: #002017;
    font-family: Rubik;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 28.8px;
}
.doubt-form-container button.subject-select {
    width: 100%;
    border-radius: 5px;
    border: 1px solid rgba(255, 131, 69, 0.30);
    background: rgba(255, 131, 69, 0.05);
    padding: 12px;
    /* text-align: left; */
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 10px 0;
}
.subject-select-dropdown{
    width: 100%;
}
.doubt-form-container .doubt-form-input textarea{
    border: 1px solid rgba(255, 131, 69, 0.30);
    background: rgba(255, 131, 69, 0.05);
    padding: 12px;
    width: 100%;
    height: 200px;
    border-radius: 5px;
    margin: 10px 0;
}
.doubt-form-input .label-for-upload-file{
    color: #FF8345;
    font-family: Rubik;
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 10px;
}
.doubt-form-container .doubt-submit-btn{
    border-radius: 10px;
    background: #FF8345;
    color: var(--white);
    font-size: 18px;
    font-weight: 600;
    line-height: 27px;
    border: 1px solid transparent;
    outline: none;
    padding: 12px 2rem;
    margin-top: 1rem;
}
.doubt-form-container .doubt-submit-btn:hover, .doubt-form-container .doubt-submit-btn:active, .doubt-form-container .doubt-submit-btn:focus{
    border-color: var(--orange);
    color: var(--orange);
    background-color: white;
}
.recently-asked-question-section{
    padding: 4rem 0;
}
.recently-asked-question-section .per-question-container{
    border-radius: 10px;
    background: #FFF;
    box-shadow: 0px 30px 50px 0px rgba(3, 18, 32, 0.08);
    margin: 1.5rem;
    display: flex;
    padding: 1rem 2rem;
}
.recently-asked-question-section .per-question-container .date-division{
    width: 15%;
    border-right: 1px dashed;
    display: flex;
    flex-direction: column;
    justify-content: center;

}
.recently-asked-question-section .per-question-container .date-division .date-number{
    color: #031220;
font-family: Rubik;
font-size: 36px;
font-style: normal;
font-weight: 700;
line-height: 36px; /* 100% */
}
.recently-asked-question-section .per-question-container .date-division .date-month-year{
    color: #5F6160;
font-family: Rubik;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 26px; /* 185.714% */
}
.recently-asked-question-section .per-question-container .doubt-question-context{
    width: 60%;
    margin-left: 1rem;

}
.recently-asked-question-section .per-question-container .doubt-question-context .grade{
    color: #5F6160;
    font-family: Rubik;
    font-size: 15px;
    font-weight: 400;
    line-height: 26px;
    margin-bottom: 0;
}
.recently-asked-question-section .per-question-container .doubt-question-context .doubt-question-title{
    color: #031220;
    font-family: Rubik;
    font-size: 22px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
    margin: 10px 0;
}
.recently-asked-question-section .per-question-container .doubt-question-context .subject{
    color: #5F6160;
    font-family: Rubik;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 26px;
    margin-bottom: 0;
}
.recently-asked-question-section .per-question-container .doubt-time-view-container{
    display: flex;
    align-items: center;
    width: 25%;
    justify-content: space-around;
}
.recently-asked-question-section .per-question-container .doubt-time-view-container .time{
    border-radius: 6px;
    background: rgba(37, 142, 70, 0.06);
    color: #258E46;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 30px;
    padding: 5px 2rem;
    margin-bottom: 0;
}
.recently-asked-question-section .per-question-container .doubt-time-view-container .view-btn{
    border-radius: 6px;
    border: 2px solid rgba(12, 20, 15, 0.10);
    background: #258E46;
    padding: 10px 2rem;
    color: #FFF;
    font-family: Rubik;
    font-size: 18px;
    font-weight: 500;
}
.recently-asked-question-section .per-question-container .doubt-time-view-container .view-btn:hover{
    border: 2px solid #258E46;
    background: white;
    color: #258E46;
}


.cta-section{
    padding: 2rem 0;
    position: relative;
}
.cta-section .cta-card{
    background: url(../images/other/home-cta-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 10px;
    border-radius: 10px;
}
.cta-section .cta-card img{
    border-radius: 10px;
}
.cta-section .cta-card .cta-context-container{
    margin: auto;
    color: var(--white);
}

/* buy now page design */
.buy-now-section{
    padding: 2rem 0;
}
.grade-cart-btn-container{
    width: 100%;
    position: absolute;
    bottom: 0;
}
.grade-s-container {
    margin: 1.5rem 1rem;
    border-radius: 10px;
    background: #FAFAFA;
    position: relative;
}
.grade-s-container img{
    width: 100%;
}
.grade-details-container {
    padding: 1rem;
    /* position: absolute; */
    /* top: 140px; */
    width: 100%;
    text-align: center;
}
.grade-details-container .grade-title{
    color: #231942;
    font-family: Rubik;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.grade-details-container .price{
    color: #364958;
    font-family: Rubik;
    font-size: 22px;
    font-style: normal;
    font-weight: 500;
}
.grade-details-container .price span{
    font-size: 12px;
}
.add-to-cart{
    background: #FF5A00;
    text-align: center;
    padding: 1.5rem 0;
    border-radius: 0 0 10px 10px;
    z-index: 1;
    /* position: absolute; */
    width: 100%;
    /* bottom: 0; */
}
.add-to-cart a{
    color: #FFF;
    font-size: 24px;
    font-weight: 500;
    text-transform: uppercase;
}


/* profile page design */
.profile-section{
    padding: 2rem;
}
.profile-section ul.nav-pills {
    justify-content: center;
    align-items: center;
}
.profile-section .nav-pills .nav-link.active{
    border-radius: 10px;
    background: #258E46;
    padding: 1rem;
    color: white;
}
.profile-section .nav-pills .nav-link{
    font-family: Rubik;
    font-size: 24px;
    font-style: normal;
    font-weight: 800;
    line-height: 28.8px;
    color: #12265A;
    text-transform: capitalize;
    margin: 0 1rem;
}
.profile-square{
    border-radius: 30px;
    background: #FFF;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.25);
    margin: 5rem;
    padding: 5rem;
    text-align: center;
}
.tab-content{
    padding-top: 2rem;
}

.tab-content .profile-input-label-container{
    margin: 1rem;
}
.tab-content .profile-input-label-container label{
    color: #0E1133;
    font-family: Rubik;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 19.2px; /* 120% */
}
.tab-content .profile-input-label-container .input-container{
    border-radius: 6px;
    border: 1px solid #003286;
    background: #F6F6F7;
    padding: 1rem;
}
.tab-content .profile-input-label-container .input-container input{
    background: transparent;
    border: none;
    outline: none;
    margin-left: 10px;
}
.profile-btn-container{
    border-radius: 4px;
    background: #FF5E00;
    margin: 1rem;
    padding: 1rem;
    text-align: center;
    color: #FFF;
    font-family: Rubik;
    font-size: 18px;
    font-weight: 500;
}

.tab-content .profile-input-label-container .input-container.textarea-container{
    display: flex;
    align-items: flex-start;
}
.tab-content .profile-input-label-container .input-container textarea{
    width: 97%;
    margin-left: 1rem;
    outline: none;
    border: none;
    background: transparent;
    margin-top: -0.3rem;
    height: 100px;
}




/* iq and worksheet page design  */
.iq_single_card {
    position: relative;
    margin-top: 25px;
    margin-left: 1rem;
}
.iq_single_card.purple .iq_single_card_icon, .iq_single_card.purple .iq_single_card_text {
    background: #8E56FF;
}
.iq_single_card.light_blue .iq_single_card_icon, .iq_single_card.light_blue .iq_single_card_text {
    background: #4582FF;
}
.iq_single_card.green .iq_single_card_icon, .iq_single_card.green .iq_single_card_text {
    background: #1AB69D;
}
.iq_single_card.light-green .iq_single_card_icon, .iq_single_card.light-green .iq_single_card_text {
    background: #ADA729;
}
.iq_single_card.orange .iq_single_card_icon, .iq_single_card.orange .iq_single_card_text {
    background: #FF8A00;
}
.iq_single_card.red .iq_single_card_icon, .iq_single_card.red .iq_single_card_text {
    background: #FF5B5C;
}


.iq_single_card_icon {
    width: 100px;
    height: 100px;
    background: var(--colorBlue);
    line-height: 100px;
    text-align: center;
    color: var(--colorWhite);
    font-size: 40px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 1;
    transition: all .3s linear;
    transform: translateY(-50%);
}

.iq_single_card_text {
    margin-left: 50px;
    padding: 50px 50px 50px 80px;
    position: relative;
    border-radius: 5px;
    border-left: 3px solid transparent;
    overflow: hidden;
    transform: skewX(-10deg);
}
.iq_single_card_text h3, .iq_single_card_text p {
    position: relative;
    z-index: 1;
    transition: all .3s linear;
    transform: skewX(10deg);
    -webkit-transform: skewX(10deg);
    -moz-transform: skewX(10deg);
    -ms-transform: skewX(10deg);
    -o-transform: skewX(10deg);
}
.iq_single_card_text h3 {
    font-size: 26px;
    font-weight: 500;
    text-transform: capitalize;
    margin-bottom: 10px;
    color: #0F2239;
}
.iq_single_card_text:after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background: #f3f7fb;
    top: 0;
    left: 0;
}
.iq_single_card_text p {
    position: relative;
    z-index: 1;
    color: #636363;
    transform: skewX(10deg);
    
}
.iq_single_card:hover{
    cursor: pointer;
}
.iq_single_card:hover .iq_single_card_icon{
    border: 2px dashed var(--white);
}
.iq_single_card:hover .iq_single_card_icon img{
    transform: rotate(20deg);
}
.iq_single_card:hover .iq_single_card_text h3, .iq_single_card:hover .iq_single_card_text p{
    color: var(--white);
}
.iq_single_card:hover .iq_single_card_text{
    background: var(--orange);
}
.iq_single_card.purple:hover .iq_single_card_text:after{
    background: #8E56FF;
}
.iq_single_card.light_blue:hover .iq_single_card_text:after{
    background: #4582FF;
}
.iq_single_card.green:hover .iq_single_card_text:after{
    background: #1AB69D;
}
.iq_single_card.light-green:hover .iq_single_card_text:after{
    background: #ADA729;
}
.iq_single_card.orange:hover .iq_single_card_text:after{
    background: #FF8A00;
}
.iq_single_card.red:hover .iq_single_card_text:after{
    background: #FF5B5C;
}

/* assessment page design */
.assessment-section{
    padding: 2rem 0;
}
.assessment-section .row *{
    padding: 0;
}
.assessment-section .assessment-card{
    border-radius: 10px;
background: #FFF;
box-shadow: 5px 15px 30px 0px rgba(5, 13, 54, 0.05);
padding: 1.5rem;
margin: 1rem;
border: 2px solid transparent;
}
.assessment-section .assessment-card:hover{
    border: 2px solid var(--orange);
    box-shadow: 5px 15px 30px 0px rgba(255, 127, 70, 0.25);

}
.assessment-section .assessment-card .assessment-gif{
    max-width: 64px;
}
.assessment-card h3{
    color: #050D36;
font-size: 32px;
font-weight: 400;
margin: 12px 0;
}
.assessment-card p{
    color: #777C90;
font-size: 18px;
font-weight: 400;
}
.recent-exam-section{
    padding: 2rem 0;
}
.recent-exam-section .recent-exam-container{
    border-radius: 10px;
background: #FFF;
box-shadow: 5px 15px 30px 0px rgba(5, 13, 54, 0.05);
margin: 1.5rem;
padding: 1rem;
}
.recent-exam-container .subject-name{
    color: #9EA6BF;
    margin-bottom: 5px;

}
.recent-exam-container h5{
    color: #3A4053;
}
.recent-exam-container .number-duration-container{
    display: flex;
    align-items: center;
    gap: 1rem;
}
.recent-exam-container .number-duration-container p{
    margin-bottom: 0;
}
.recent-exam-container .number-duration-container p.number-of-question{
    color: #10298A;
}
.recent-exam-container .number-duration-container p.exam-duration{
    color: #FF7F00;
}
.recent-exam-section .recent-exams-start-test-btn{
    background-color: var(--orange);
    color: #FFF;
    font-size: 18px;
    font-weight: 600;
    padding: 10px;
    border-radius: 5px;
    border: none;
    margin: auto;
    display: flex;
    justify-content: center;
    border: 1px solid transparent;
}
.recent-exam-section .recent-exams-start-test-btn:hover, .recent-exam-section .recent-exams-start-test-btn:active{
    background-color: var(--white);
    color: var(--orange);
    
    border: 1px solid var(--orange);
}

/* my doubt single page design */
.doubt-solution-container{
    padding: 4rem;
    box-shadow: 0px 2px 50px rgba(20, 20, 210, 0.09);
    margin: 4rem;
    border-radius: 20px;
    background: linear-gradient(117deg, rgba(255, 222, 111, 0.20) 1.26%, rgba(12, 193, 89, 0.20) 100%);
}
.doubt-solution-container h2{
    color: #10173B;
    font-family: Rubik;
    font-size: 34px;
    font-weight: 700;
    margin: 1rem 0;
}
.doubt-solution-container h4{
    color: #3A4053;
    font-family: Rubik;
    font-size: 22px;
    font-weight: 700;
}
.doubt-solution-container p{
    color: #505671;
    font-family: Rubik;
    font-size: 18px;
    font-weight: 400;
    margin: 15px 0;
}
.doubt-solution-container button{
    box-shadow: 0px 10px 18px rgba(255, 127, 0, 0.29);
    background: #FF8345;
    padding: 15px;
    border: none;
    border-radius: 4px;
    color: white;
    font-size: 18px;
    font-weight: 700;
    margin: 1rem 0;
}


/* question bank page design */
.question-bank-section{
    padding: 2rem 0;
}
.question-bank-section .tab-content{
    padding-top: 0;
    margin-left: 1rem;
}
.question-bank-section button.nav-link {
    /* text-align: center; */
    align-items: center;
    display: flex;
    margin: auto;
    width: 100%;
    gap: 1rem;
}
.question-bank-section button.nav-link.active span{
    color: var(--white);
}
.question-bank-section button.nav-link span{
    font-family: Lalezar;
    font-size: 22px;
    font-weight: 400;
    color: var(--heading-black);
}

.question-bank-section .nav-pills .nav-link.active, .question-bank-section .nav-pills .show>.nav-link{
    border-radius: 10px;
    border: 1px solid #1EB2A6;
    background: linear-gradient(117deg, rgba(255, 222, 111, 0.50) 1.26%, rgba(12, 193, 89, 0.50) 100%);;
    /* background: #10298A; */
}

.question-bank-section .accordion-button{
    background: var(--orange);
    box-shadow: none;
    color: white;
    border-radius: 4px;
    font-size: 18px;
}
.question-bank-section .accordion-body .topic-test-card, .latest-watched-section .topic-test-card{
    background: url(../images/common/topic-test-bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    height: 200px;
    border-radius: 10px;
    border: 1px solid #1C3698;
    position: relative;
}
.latest-watched-section .topic-test-card{
    margin: 1rem;
}
.question-bank-section .accordion-body .topic-test-card .text-context, .latest-watched-section .topic-test-card .text-context{
    position: absolute;
    width: 100%;
    background: rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(1px);
    top: 0.5rem;
    text-align: center;
    padding: 10px;

}
.question-bank-section .accordion-body .topic-test-card .text-context .topic-name,
.latest-watched-section .topic-test-card .text-context .topic-name{
    color: #000;
    font-family: Rubik;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
}
.question-bank-section .accordion-body .topic-test-card .text-context .topic-img,
.latest-watched-section .topic-test-card .text-context .topic-img{
    margin-bottom: 10px;
    max-width: fit-content;

}
.question-bank-section .accordion-body .topic-test-card .text-context .paper-number,
.latest-watched-section.topic-test-card .text-context .paper-number{
    color: #10298A;
    font-family: Rubik;
    font-size: 22px;
    font-style: normal;
    font-weight: 600;
}
.question-bank-section .accordion-body .topic-test-card .download-container,
.latest-watched-section .topic-test-card .download-container{
    background-color: var(--orange);
    
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 10px;
    text-align: center;
    border-radius: 0 0 10px 10px;
    color: #FFF;
    font-size: 18px;
    font-weight: 700;
}
.question-bank-section .accordion-button.collapsed::after {

    background: url("../images/icons/+.svg");
    background-repeat: no-repeat;
  
  }
  
  .question-bank-section .accordion-button:not(.collapsed)::after {
  
    background: url("../images/icons/-.svg");
    background-repeat: no-repeat;
  
  }


  /* report page design */
  .reports-section{
    padding: 2rem 0;
    display: flex;
    justify-content: center;
  }
  .reports-section .container{
    border-radius: 10px;
    max-width: 1024px;
    text-align: center;
    background: var(--white);
    box-shadow: 0px 0px 40px 0px rgba(5, 13, 54, 0.5);
    margin: 1.5rem;
    padding: 5rem 1.5rem;
  }
  .reports-section .ccongratulations-text{
    color: var(--orange);
    margin: 15px 0;
    font-family: Rubik;
    font-size: 32px;
    font-weight: 700;
  }
  .reports-section p.congratulations-para{
    margin: auto;
    max-width: 70%;
    color: #52566A;
    font-family: Rubik;
    font-size: 18px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    line-height: 140%;
  }




  .reports-section .card .percent {
    position: relative;
  }
  
  .reports-section .card svg {
    position: relative;
    width: 350px;
    height: 350px;
    transform: rotate(-240deg);
  }
  
  .reports-section .card svg circle {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: #f0f0f0;
    stroke-width: 30;
    stroke-linecap: round;
  }
  
  .reports-section .card svg circle {
    stroke-dasharray: 680px;
    stroke-dashoffset: calc(680px - (680px * var(--percent)) / 100);
  }
  .reports-section .card .number p{
    margin-bottom: 0;
    color: #F48C06;
    font-size: 25px;
    font-weight: 700;
  }
  .reports-section .card .number {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-35%, -50%);
  }
  
  .reports-section .card .number h3 {
    color: #002147;
    font-size: 60px;
    font-weight: 700;
  }
  .reports-section .card .title h2 {
    margin: 25px 0 0;
  }
  
  .reports-section .card svg circle:last-of-type {
    stroke: #7AD3FF;
  }
  .reports-section .card{
    border: none;
  }









  .reports-section .report-pointer{
    padding-left: 0;
    margin: 1rem auto;
    max-width: 500px;
    list-style-type: none;
    text-align: left;
  }
  .reports-section .report-pointer li{
    color: #10298A;
    font-family: Rubik;
    font-size: 18px;
    font-weight: 400;
    margin: 10px;
    box-shadow: 0px 2px 12px rgba(20, 20, 210, 0.09);
    border-radius: 10px;
    padding: 10px;

}
.reports-section .report-pointer li img{
    margin-right: 10px;
}
.reports-section .report-pointer li span{
    font-weight: 700;
}
.reports-section .question-context-head {
    padding: 3rem 0;
    background: none;
}
.reports-section .report-solution-hint-container{
    text-align: left;
}
.reports-section .report-solution-hint-container .review-answers-title{
    color: #3A4053;
}
.reports-section .report-solution-hint-container button.accordion-button{
    color: #10298A;
    font-family: Rubik;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    /* background-color: #C3D2FE; */
    background: linear-gradient(90deg, #18F9BD 0%, #0AB84B 100%);;
    margin-bottom: 15px;
    border-radius: 10px !important;
}
.reports-section .report-solution-hint-container .accordion-item{
    border: none;
    box-shadow: 0px 2px 12px rgba(20, 20, 210, 0.09);
}
.accordion-button:focus{
    box-shadow: none;
}
.reports-section .report-solution-hint-container .report-question-statement{
    color: #313A68;
    font-family: Rubik;
    font-size: 20px;
    font-weight: 700;
}
.reports-section .report-solution-hint-container .report-question-options{
    padding: 10px 10px 10px 0;
    box-shadow: 0px 2px 12px rgba(20, 20, 210, 0.09);
    border-radius: 10px;
    margin: 10px;
    display: flex;
    border: 1px solid transparent;
}
.reports-section .report-solution-hint-container .report-question-options .option-number{
    width: 30px;
    height: 30px;
    background: #C3D2FE;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}
.reports-section .report-solution-hint-container .report-question-options p{
    margin-bottom: 0;
    color: #505671;
    font-family: Rubik;
    font-size: 18px;
    font-weight: 400;
    margin-left: 10px;
}
.reports-section .report-solution-hint-container .report-question-options.right-selected .option-number{
    background: #0DBC00;
}
.reports-section .report-solution-hint-container .report-question-options.wrong-selected .option-number{
    background: red;
}
.reports-section .report-solution-hint-container .report-question-options.right-selected{
    border: 1px solid #0DBC00;
}
.reports-section .report-solution-hint-container .report-question-options.wrong-selected{
    border: 1px solid red;
}

.reports-section .solution-answer-container{
    margin: 1rem 10px;
   background-color:  #E9FFF1;
   padding: 10px;
   border-radius: 10px;
}
.reports-section .solution-answer-container .solution-answer-title{
    color: #10298A;
    font-family: Rubik;
    font-weight: 400;
}
.reports-section .solution-answer-container .correct-answer-green{
    color: #FF7F00;
    font-family: Rubik;
    font-size: 18px;
    font-weight: 400;
    line-height: 25px;
}
.reports-section .solution-answer-container .report-solution-container {
    background: white;
    padding: 10px;
    border-radius: 10px;
    margin: 10px 0;
}
.reports-section .solution-answer-container .selected-option-right{
    color: #0DBC00;
    font-family: Rubik;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.reports-section .explanation-container{
    color: #505671;
    font-family: Rubik;
    font-size: 18px;
    font-weight: 300;
    padding: 1rem;
    box-shadow: 0px 2px 12px rgba(20, 20, 210, 0.09);
    border-radius: 10px;
    margin: 10px;
}
.option-explanation:not(:last-of-type){
    border-bottom: 1px solid #C3D2FE;
}
.option-explanation p{
    margin: 10px 0;
}
.reports-section .action-container{
    display: flex;
    justify-content: space-between;
    margin: 10px;
    align-items: center;
}
.reports-section .action-container a{
    background-color: #C3D2FE;
    padding: 10px;
    border-radius: 10px;
    color: #10298A;
    font-family: Rubik;
    font-size: 14px;
    font-weight: 500;
}
.reports-section .action-container h5{
    display: flex;
    gap: 10px;
}

/* video page design */
.video-container video{
    border-radius: 5px;
    border: 1px solid var(--orange);
}

/* checkout page design */
.checkout-table {
    /* border: 1px solid rebeccapurple; */
    text-align: center;
    vertical-align: middle;
}

.checkout-table th,
.checkout-table td {
    padding: 2rem 0;
}

.checkout-table thead th {
    color: #868686;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
}

.checkout-table tbody tr td:nth-child(1),
.checkout-table tbody tr td:last-child {
    width: 25%;
}

.checkout-table tbody tr td:last-child {
    color: #494949;
    font-family: Rubik;
    font-size: 22px;
    font-style: normal;
    font-weight: 700;
}

.checkout-table tbody tr td:nth-child(2) {
    width: 40%;
}
.coupon-container input{
    width: 15vw;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #dcdcdc;
}
.coupon-container input::placeholder{
    color: #999;
font-family: Rubik;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.coupon-container button{
    background: #12265A;
    padding: 10px 20px;
    color: var(--white);
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    border: 1px solid #12265A;
}
.coupon-container button:hover{
    background: transparent;
    color: #12265A;
    border: 1px solid #12265A;
}
.cart-section{
    max-width: 904px;
    margin: 3rem auto;
    padding: 2rem;
    box-shadow: 0 0 40px grey;
    border-radius: 10px;
    
}
.cart-section .cart-total-container .cart-row{
    display: flex;
    justify-content: space-between;
    padding: 10px;
    align-items: center;

}
.cart-section .cart-total-container .cart-row .cart-item{
    color: #868686;
    font-size: 16px;
    text-transform: uppercase;
}
.cart-section .cart-total-container .cart-row .cart-price{
    color: #494949;
    font-size: 24px;
}
.payemnt-option-container {
    display: grid;
    grid-template-columns: auto auto auto;
    gap: 2rem;
    align-items: center;
    justify-content: space-evenly;
    margin: auto;
}
.payemnt-option-container .form-check {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.payment-section .btn-container{
    text-align: center;
}
.payemnt-option-container label.form-check-label img {
    max-width: 120px;
}
.cart-row:not(:nth-of-type(4)){
    border-bottom: 1px solid #dee2e6;
}
.cart-total-container .btn-container{
    text-align: center;
}
.checkout-btn{
    border-radius: 10px;
    background: #FF8345;
    color: var(--white);
    font-size: 18px;
    font-weight: 600;
    line-height: 27px;
    border: 1px solid transparent;
    outline: none;
    padding: 12px 2rem;
    margin-top: 1rem;
}
.checkout-btn:hover, .checkout-btn:active, .checkout-btn:focus{
    border-color: var(--orange);
    color: var(--orange);
    background-color: white;
}

.profile-photo{
    position: relative;
    margin-bottom: 1rem;
}
.profile-photo .edit-icon{
    position: absolute;
    top: 80%;
    left: 67%;
}
/* payment option page design */
.checkout-detail-section .user-detail-heading {
    color: #000;
    font-size: 30px;
    text-transform: uppercase;
}
.checkout-detail-section .sign-label-input-container{
    padding: 1rem 0;
}

.checkout-detail-section {
    color: #0E1133;
    font-family: rubik;
    font-size: 16px;
    
    
}
.checkout-detail-section .user-detail-form{
    margin: 0 1rem 0 0;
}
.checkout-detail-section .user-detail-form .sign-label-input-container label {
    color: #0E1133;
    font-family: rubik;
    font-size: 16px;
}
.checkout-detail-section .user-detail-form .sign-label-input-container .sign-input-container{
    border-radius: 6px;
    padding: 0.75rem;
    width: 100%;
    margin-top: 10px;
    background: #F6F6F7;
    display: flex;
    gap: 5px;
    align-items: center;
    
}
.checkout-detail-section .user-detail-form .sign-label-input-container .sign-input-container input{
    border: none;
    outline: none;
    background: transparent;
    color: var(--colorBlue);
    font-size: 16px;
    
}
.checkout-otp-container {
    display: flex;
    gap: 2%;
    margin: 10px auto;
    justify-content: center;
}
.checkout-otp-container input {
    width: 40px;
    outline: none;
    aspect-ratio: 1 / 1;
    border: 1px solid var(--orange);
    text-align: center;
    border-radius: 5px;
}
.additional-info-container{
    display: flex;
    align-items: center;
    justify-content: space-between;
    
}
.additional-info-container p{
    margin-bottom: 0;
}
.additional-info-container p:last-of-type{
    font-size: 10px;
}
.checkout-detail-section .checkout-summary-card {
    border-radius: 5px;
    background: linear-gradient(90deg, #18F9BD 0%, #0AB84B 100%);
    text-align: center;
    padding: 1rem 0;
}

.checkout-detail-section .checkout-summary-card .title {
    color: #FFF;
    font-size: 40px;
    font-weight: 500;
    text-transform: capitalize;
    margin: 1rem 0;
}
.checkout-detail-section .checkout-summary-card .proceed-btn {
    border-radius: 4px;
    border: 2px solid #FDC800;
    background: #FDC800;
    color: #000;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 5px 10px;
}
.checkout-detail-section .checkout-summary-card .yellow-title {
    color: #000;
    font-size: 40px;
    font-style: normal;
    font-weight: 500;
    text-transform: capitalize;
    /* -webkit-text-stroke: 1px white; */
    text-shadow: 0px 0px 10px #ffffff;

}
.checkout-detail-section .hr-or-container {
    position: relative;
    padding: 10px 0;
}

.checkout-detail-section .summary-card-pointer-container {
    text-align: left;
    padding: 0 10px 0 3vw;
}
.checkout-detail-section .summary-card-pointer-container ul li {
    font-size: 16px;
    font-weight: 400;
}
.checkout-detail-section .click-to-save-btn span {
    font-weight: 600;
    text-transform: capitalize;
}
.checkout-detail-section .summary-card-pointer-container p{
    margin-bottom: 0;
}
.checkout-detail-section .checkout-container {
    border-radius: 10px;
    background: #525252;
    padding: 3rem;
    color: var(--white);
}
.checkout-container table {
    color: #fff;
    width: 100%;
}
















/* instruction page design */
.instruction-section {
    padding: 3rem 0;
}
.instruction-section .container, .previous-test-result-section .container {
    border-radius: 10px;
    box-shadow: 0 0 10px grey;
    padding: 3rem;
    /* max-width: 80%; */
}
.instruction-icon-division {
    text-align: center;
}
.instruction-icon-division img {
    margin: 10px;
}
.instruction-listing-set {
    list-style-type: none;
}
.instruction-listing-set li{
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 200%;
    letter-spacing: 0.001rem;
}
.start-assessment-btn, .previous-test-result-section .view-btn{
    background-color: var(--orange);
    color: #FFF;
    font-size: 18px;
    font-weight: 600;
    padding: 10px 20px;
    border-radius: 5px;
    border: none;
    margin: auto;
    display: flex;
    justify-content: center;
    border: 1px solid transparent;
    width: fit-content;
}
.start-assessment-btn:hover, .start-assessment-btn:focus, .start-assessment-btn:active,
.previous-test-result-section .view-btn:hover, .previous-test-result-section .view-btn:active, .previous-test-result-section .view-btn:focus{
    background-color: transparent;
    color: var(--orange);
    border: 1px solid var(--orange);
}

/* modal design */
.start-test-modal{
    background-color: var(--orange);
    text-align: center;
    padding: 2rem;
    color: var(--white);
}
.start-test-modal img{
    width: fit-content;
    margin: auto;
}
.start-test-modal ul{
    text-align: left;
    font-size: 18px;
    line-height: 200%;
    list-style-type: none;
}
.start-test-modal .modal-action-container button{
    font-size: 18px;
    font-weight: 700;
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 10px 15px;
}
.start-test-modal .modal-action-container button.practice-btn{
    margin-right: 1rem;
    color: #313A68;   
}
.start-test-modal .modal-action-container button.exam-btn{
    background-color: #313A68;
    color: white;   
}
.start-test-modal .modal-action-container button.practice-btn:hover{
    color: white;
    border-color: white;
    background-color: transparent; 
}
.start-test-modal .modal-action-container button.exam-btn:hover{
    color: #313A68;
    border-color: #313A68;
    background-color: transparent; 
}



/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    .latest-watched-section .col-lg-4 {
        /* background: url(https://sclinterface.m-tutor.com/storage/mschool_video/thumbnails/1644231259-1912.png); */
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }
    .latest-watched-section .col-lg-4 img{
        /* display: none; */
    }
    .small-screen-show{
        /* display: none; */
    }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) and (max-width: 1200px) {
    .small-screen-show{
        display: none;
    }
    /* .hero-content-container .hero-menu-learn{
        left: 0;
    }
    .hero-content-container .hero-menu-ask-doubt{
        left: 7rem;
    }
    .hero-content-container .hero-menu-assessment{
        left: 14rem;
    }
    .hero-content-container .hero-menu-iq{
        left: 22rem;
    }
    .hero-content-container .hero-menu-worksheet{
        left: 22rem;
    }
    .hero-content-container .hero-menu-question-bank{
        left: 30rem;
    } */
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) and (max-width: 992px) {
    .small-screen-show{
        display: none;
    }
    .overview-section {
        padding: 2rem 0;
    }
    .overview-container {
        background: transparent;
        position: relative;
        padding: 16rem 0 0 0;
    }
    .admission-circle {
        position: absolute;
        border: 40px solid #1d42d9;
        box-shadow: 4px 2px 13px -1px rgba(0,0,0,.6);
        top: 2rem;
        left: 0;
        width: 100%;
        /* aspect-ratio: 1 / 1; */
        /* height: auto; */
        /* height: (same as width); */

    }
    .overview-text-container{
        background: #1d42d9;
        /* padding: 216px 2rem 0 2rem; */
        padding-top: 215px;
        text-align: center;
    }
    .admission-list {
        justify-content: center;
    }
        .hero-content-container.menu-container.blank {
            height: 1rem;
        }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) and (max-width: 768px) {
    .overview-section {
        padding: 2rem 0;
    }
    .overview-container {
        background: transparent;
        position: relative;
        padding: 16rem 0 0 0;
    }
    .admission-circle {
        position: absolute;
        border: 40px solid #1d42d9;
        box-shadow: 4px 2px 13px -1px rgba(0,0,0,.6);
        top: 2rem;
        left: 0;
        width: 100%;
        /* aspect-ratio: 1 / 1; */
        /* height: auto; */
        /* height: (same as width); */

    }
    .overview-text-container{
        background: #1d42d9;
        /* padding: 216px 2rem 0 2rem; */
        padding-top: 215px;
        text-align: center;
    }
    .admission-list {
        justify-content: center;
    }




    .small-screen-hide{
        display: none;
    }
    .reports-section-heading{
        font-size: 28px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }
      .reports-section .card{
        border: none;
      }
      
      .reports-section .card-mobile .percent-mobile {
        position: relative;
      }
      
      .reports-section .card-mobile svg {
        position: relative;
        width: 275px;
        height: 275px;
        transform: rotate(-240deg);
      }
      
      .reports-section .card-mobile svg circle {
        width: 100%;
        height: 100%;
        fill: none;
        stroke: #f0f0f0;
        stroke-width: 30;
        stroke-linecap: round;
      }
      
      .reports-section .card-mobile svg circle {
        stroke-dasharray: 600px;
        stroke-dashoffset: calc(600px - (600px * var(--percent)) / 100);
      }
      .reports-section .card-mobile .number-mobile p{
        margin-bottom: 0;
        color: #F48C06;
        font-size: 20px;
        font-weight: 700;
      }
      .reports-section .card-mobile .number-mobile {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-37%, -50%);
      }
      
      .reports-section .card-mobile .number-mobile h3 {
        color: #002147;
        font-size: 50px;
        font-weight: 700;
      }
      
      
     .reports-section .card-mobile .title h2 {
        margin: 25px 0 0;
      }
      
      .reports-section .card-mobile svg circle:last-of-type {
        stroke: #7AD3FF;
      }
      .hero-content-container .hero-menu-learn,
    .hero-content-container .hero-menu-ask-doubt,
    .hero-content-container .hero-menu-assessment,
    .hero-content-container .hero-menu-iq,
    .hero-content-container .hero-menu-worksheet,
    .hero-content-container .hero-menu-question-bank
     {
        position: relative;
        top: auto;
        left: auto;
    }
    .hero-content-container.menu-container{
        height: auto;
        display: flex;
        overflow: scroll;
    }
    .hero-content-container.menu-container.blank {
            height: 1rem;
        }
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    .small-screen-hide{
        display: none;
    }
    .dashboard-section-supertitle {
        font-size: 18px;
        line-height: 18px;
    }
    .dashboard-section-title {
        font-size: 30px;
        line-height: 35px;
    }
    .title-back-arrow {
        position: absolute;
        width: 50px;
        left: 0%;
        top: 25%;
    }
    .hero-content-container {
        background-size: contain;
        padding: 4rem 1rem;
    }
    .dashborad-btn {
        font-size: 18px;
        padding: 8px 12px;
    }
    .hero-heading {
        font-size: 50px;
        line-height: 55px;
        letter-spacing: -1.5px;
    }
    .features-section {
        padding: 2rem 0;
    }
    .overview-section {
        padding: 2rem 0;
    }
    .overview-container {
        background: transparent;
        position: relative;
        padding: 16rem 0 0 0;
    }
    .admission-circle {
        position: absolute;
        border: 40px solid #1d42d9;
        box-shadow: 4px 2px 13px -1px rgba(0,0,0,.6);
        top: 2rem;
        left: 0;
        width: 100%;
        /* aspect-ratio: 1 / 1; */
        /* height: auto; */
        /* height: (same as width); */

    }
    .overview-text-container{
        background: #1d42d9;
        /* padding: 216px 2rem 0 2rem; */
        padding-top: 215px;
    }
    .admission-list li {
        min-width: 80px;
    }
    .admission-list li p {
        padding: 1.5rem 0rem;
    }
    .hero-content-container .hero-menu-learn,
    .hero-content-container .hero-menu-ask-doubt,
    .hero-content-container .hero-menu-assessment,
    .hero-content-container .hero-menu-iq,
    .hero-content-container .hero-menu-worksheet,
    .hero-content-container .hero-menu-question-bank
     {
        position: relative;
        top: auto;
        left: auto;
    }
    .hero-content-container.menu-container{
        height: auto;
        display: flex;
        overflow: scroll;
    }
    .latest-watched-card .col-4 img{
        width: 100%;
    }
    
    .latest-watched-section .col-lg-4 img{
        width: 100%;
    }
    .ask-doubt-form-section, .recently-asked-question-section{
        padding: 2rem 0;
    }
    .ask-doubt-form-section .form-section-container{
        padding: 2rem 0
    
    }
    
    .recently-asked-question-section .per-question-container{
        display: flex;
        flex-direction: column;  
        text-align: center;
    }



    .recently-asked-question-section .per-question-container .date-division {
        width: 100%;
        border-right: none;
        align-items: center;
        flex-direction: row;
    }
    .recently-asked-question-section .per-question-container .doubt-question-context{
        width: 100%;
    }
    .recently-asked-question-section .per-question-container .doubt-time-view-container{
        width: 100%;
    }
    .question-bank-section .d-flex.align-items-start{
        flex-direction: column;
        align-items:center !important;
    }

    .header-section-dashboard .grade-select{
        width: auto;
        padding: 7px;
       
    }
    .overview-container .row{
        margin: 0;
    }
    .cta-section img{
        max-width: 100%;
    }
    .profile-square{
        padding: 1rem;
        margin: auto;
    }




    .reports-section-heading{
        font-size: 28px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }
      .reports-section .card-mobile {
        border: none;
      }
      
      .reports-section .card-mobile .percent-mobile {
        position: relative;
      }
      
      .reports-section .card-mobile svg {
        position: relative;
        width: 275px;
        height: 275px;
        transform: rotate(-240deg);
      }
      
      .reports-section .card-mobile svg circle {
        width: 100%;
        height: 100%;
        fill: none;
        stroke: #f0f0f0;
        stroke-width: 30;
        stroke-linecap: round;
      }
      
      .reports-section .card-mobile svg circle {
        stroke-dasharray: 600px;
        stroke-dashoffset: calc(600px - (600px * var(--percent)) / 100);
      }
      .reports-section .card-mobile .number-mobile p{
        margin-bottom: 0;
        color: #F48C06;
        font-size: 20px;
        font-weight: 700;
      }
      .reports-section .card-mobile .number-mobile {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-37%, -50%);
      }
      
      .reports-section .card-mobile .number-mobile h3 {
        color: #002147;
        font-size: 50px;
        font-weight: 700;
      }
      
      
     .reports-section .card-mobile .title h2 {
        margin: 25px 0 0;
      }
      
      .reports-section .card-mobile svg circle:last-of-type {
        stroke: #7AD3FF;
      }

      .doubt-solution-container{
        padding: 1rem;
        margin: 1rem;
      }
      .question-bank-section .accordion-body .topic-test-card{
        margin-bottom: 1rem;
      }
      .coupon-container input{
        width: auto;
      }
      .payemnt-option-container {
        grid-template-columns:  auto auto;
        gap: 1rem;
      }
      .hero-content-container.menu-container.blank {
            display: none;
        }
}