.start-exam-process .card {
    width: 100%;
    height: fit-content;
    background: #FFFFFF;
    box-shadow: 0 23px 49px -5px #6961BD;
    border-radius: 15px;
    position:relative;
    padding:1px;
}
.start-exam-process .card .leftSide {
    width: 100%;
    height: fit-content;
    background: #2C2760;
    padding-top: 36px;
    border-radius: 15px;
    position:relative;
}
.start-exam-process .card .leftSide label {
    margin-left: 39px;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 18px;
    /* identical to box height */
    text-align: center;
    letter-spacing: 2.1px;
    text-transform: uppercase;
    color: var(--primary-btn-color);
    mix-blend-mode: normal;
    opacity: 0.7;
}
.start-exam-process .card .leftSide h3 {
    font-style: normal;
    font-weight: normal;
    font-size: 28px;
    line-height: 35px;
    color: var(--primary-btn-color);
    margin-top: 13px;
    margin-left: 37px;
    margin-right: 37px;
}
.start-exam-process .card .leftSide .box .btn {
    position:relative;
    margin-top: 60px;
    margin-bottom: 40px;
    margin-left: 39px;
    cursor: pointer;
    border:2px solid var(--primary-btn-color);

}

.accordion-item-title{
    position: relative;
    width:100%;
    min-height: 5vh;
    padding: 12px 5px;
    align-self: center;
}
.accordion-item-title .icon{
    position: absolute;
    width: 35px;
    height: 35px;
    top: 5px;
    left:0;

    background: var(--primary);
    border-radius: 50%;
    padding: 7px 14px;
    color: var(--primary-btn-color);
}
.accordion-item-title .title{
    text-transform: uppercase;
    margin-left: 45px ;
    align-self: center;
}

/* LOGIN */
.login-container{
    background: var(--primary-btn-color);
}


/* blogs*/
*, html{
    scroll-behavior: smooth;
}

/*** Features Start ***/
.features {
    width: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 25px 8px;
}
.features-item .featured-blog-item{
    width: 80px;height:80px;
    border-radius: 50%;
    overflow: hidden;
}.features-item .featured-blog-item img{
    width: 100%;
    height:100%;
    border-radius: 50%;
}
.btn-sm-square {
    width:30px;
    height: 30px;
    border-radius: 50%;
    text-align: center;
    justify-content: center;
    padding: 3px 2px;

}
.features .features-content{
    margin-left: 10px;
}
/*** Features End ***/

.img-zoomin {
    transition: 0.5s;
}

.img-zoomin:hover {
    transform: scale(1.1);
}


/*topbar*/
.topbar {
    padding: 10px 0;
}
.font-11{
    font-size: 11px!important;
}
p{
    font-family: "Open Sans", sans-serif;
}

.margin-bottom-bg{
    margin-bottom: 80px !important;
}
.padding-bg{
    padding: 80px !important;
}

.topbar .top-info {

    font-size: 15px;
    font-weight: 400;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
}

.topbar .top-link {

    font-size: 15px;
    font-weight: 400;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    color: var(--primary-btn-color);
}

@media (max-width: 1400px) {
    .sticky-top .top-link {
        display: none;
    }

}

.topbar .top-link a {
    font-size: medium;
    font-weight: 400;

    letter-spacing: 1px;
}

.topbar .top-link a small:hover {
    color: var(--bs-secondary) !important;
    transition: 0.5s;
}

.topbar .top-link a small:hover i {
    color: var(--bs-primary) !important;
}

#note {
    position: relative;
    animation: noteAnimate 10s infinite;
    animation-timing-function: ease-in-out;
    display: flex;
    align-items: center;
}

@keyframes noteAnimate {
    from {left: -735px;}
    to {left: 735px;}
}

/*topbar*/




/*** Top News Start ***/
.news-2 h3 {
    position: relative;
}

.news-2 h3::after {
    content: "";
    line-height: 1.3rem;
    background: var(--bs-secondary);
    position: absolute;
    width: 68%;
    top: 50%;
    transform: translateY(-50%);
    height: 1px;
    right: 0;
    opacity: 0.2;
}
/*** Top News End ***/


/*** Latest News Start ***/
.latest-news .latest-news-carousel.owl-carousel{
    position: relative;
}

.latest-news .latest-news-carousel.owl-carousel .owl-nav .owl-prev {
    position: absolute;
    top: -65px;
    right: 70px;
    font-size: 20px;
    padding: 2px 20px;
    transition: 0.5s;
    margin-right: 10px;
    border: 1px solid var(--bs-primary);
    color: var(--bs-dark);
    border-radius: 20px;
}

.latest-news .latest-news-carousel.owl-carousel .owl-nav .owl-next {
    position: absolute;
    top: -65px;
    right: 0;
    font-size: 20px;
    margin-left: 10px;
    padding: 2px 20px;
    transition: 0.5s;
    border: 1px solid var(--bs-primary);
    color: var(--bs-dark);
    border-radius: 20px;
}

.latest-news .latest-news-carousel.owl-carousel .owl-nav .owl-prev:hover,
.latest-news .latest-news-carousel.owl-carousel .owl-nav .owl-next:hover {
    background: var(--bs-primary);
    color: var(--bs-white);
    border-radius: 10px;
}
/*** Latest News End ***/


/*** Whats New Start ***/
.populer-news .whats-carousel.owl-carousel {
    position: relative;
}

.populer-news .whats-carousel.owl-carousel .owl-nav .owl-prev {
    position: absolute;
    top: -80px;
    right: 70px;
    font-size: 20px;
    padding: 2px 20px;
    transition: 0.5s;
    margin-right: 10px;
    border: 1px solid var(--bs-primary);
    color: var(--bs-dark);
    border-radius: 20px;
}

.populer-news .whats-carousel.owl-carousel .owl-nav .owl-next {
    position: absolute;
    top: -80px;
    right: 0;
    font-size: 20px;
    margin-left: 10px;
    padding: 2px 20px;
    transition: 0.5s;
    border: 1px solid var(--bs-primary);
    color: var(--bs-dark);
    border-radius: 20px;
}

.populer-news .whats-carousel.owl-carousel .owl-nav .owl-prev:hover,
.populer-news .whats-carousel.owl-carousel .owl-nav .owl-next:hover {
    background: var(--primary-btn-color-hover);
    color: var(--bs-white);
    border-radius: 10px;
}

.populer-news .tab-class .nav-item a.active {
    background: var(--bs-primary) !important;
    color: var(--primary-btn-color)!important;
}
.populer-news .tab-class .nav-item a.active span{
    color: var(--primary-btn-color)!important;
}

.lifestyle .lifestyle-item {
    position: relative;
    overflow: hidden;
}

.lifestyle .lifestyle-item img {
    transition: 0.5s;
}

.lifestyle .lifestyle-item:hover img {
    transform: scale(1.2);
}

.lifestyle .lifestyle-item .lifestyle-content {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    padding: 20px;
    display: flex;
    flex-direction: column;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
}
/*** Whats New End ***/


/*** Banner Section start ***/
.banner-2 {
    position: relative;
}

.banner-content-2 {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: linear-gradient(rgba(26, 125, 255, 0.7), rgba(255, 255, 255, 0.7));
    z-index: 2;
}
/*** Banner Section End ***/


#class-page{
    position: relative;
    width: 100%;
    min-height: 60vh;
}

#class-page .hero-section{
    width: 100%;
    height: 60vh;
    display: flex;
    position: relative;
    max-width: 1320px;
    padding: 1rem 1.5rem ;
    justify-content: center;

}
#class-page .hero-section .image-hero{
    position: absolute;
    top: 0;
    right: -250px;
    width: 70%;
    height: 60vh;
    z-index:0;
    border-bottom-left-radius: 20%;
    overflow: hidden;
    /*clip-path: polygon(0 0, 100% 0, 100% 100%, 95% 96%, 91% 93%, 88% 91%, 83% 88%, 78% 86%, 72% 84%, 67% 83%, 62% 83%, 57% 83%, 52% 83%, 47% 84%, 42% 85%, 37% 85%, 31% 85%, 25% 84%, 21% 82%, 16% 78%, 12% 74%, 8% 70%, 6% 67%, 4% 65%, 1% 61%, 0 58%);*/
}
#class-page .hero-section .image-hero img{
    width: 100%;
    height: 100%;
}
#class-page .hero-section .home-card {
    flex: 0 0 auto;
    width: 60%;
    height: 60%;
    display: flex;
    padding: 1.5rem;
    z-index: 1;
    box-shadow: 0 8px 26px -4px hsla(0, 0%, 8%, 0.15), 0 8px 9px -5px hsla(0, 0%, 8%, 0.06) !important;
    align-items: flex-start;
    flex-direction: column;
    margin-top: 3rem;
    backdrop-filter: saturate(250%) blur(5px);
    background-color: hsla(0, 0%, 100%, 0.6);
}
#class-page .hero-section .home-card  .search-input {
    width: 100%;
    margin-top: 2rem;
    border-radius: 30px!important;
}

/*##########################*/
/* Tablet and smaller screens */
@media (max-width: 992px) {
    #class-page .hero-section {
        height: 40vh; /* Adjust hero height on smaller screens */
        padding: 1rem;
        justify-content: center;
    }

    #class-page .hero-section .image-hero {
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        border-bottom-left-radius: 0;
        z-index: -1; /* Move image behind the content */
    }

    #class-page .hero-section .home-card {
        width: 80%;
        height: auto;
        padding: 1.5rem;
        margin-top: 2rem;
    }
}

.font-17{
    font-size: 17px!important;
}
/* Mobile view */
@media (max-width: 576px) {
    #class-page {
        min-height: 70vh;
    }

    #class-page .hero-section {
        padding: 1rem;
        text-align: center;
    }

    #class-page .hero-section .home-card {
        width: 90%;
        margin-top: 1rem;
    }
}
/*##########################*/


#class-page .levels .card{
    width: 80%;
    height: 30vh;
    position: relative;
    cursor: pointer;
    transition: all .5s ease-in;
}
#class-page .levels .card .image{
    height: 100%;
    width: 100%;
    overflow: hidden;
    margin: 0;
}

#class-page .levels .card .image img{
    width: auto;
}
#class-page .levels .card .info{
   position: absolute;
    width: 90%;
    min-height: 5rem;
    right: -29%;
    top: 25%;
    padding: 1.5rem 1rem;
    z-index: 1;
    cursor: pointer;
    transition: all .5s ease-in;
    backdrop-filter: saturate(250%) blur(5px);
    background-color: hsla(0, 0%, 100%, 0.6);

}
#class-page .levels .card .info  h1{
    color: #0454a4;
}
#class-page .levels .card .info:hover{
  background: #0454a4;!important;
}

#class-page .levels .card .info:hover h1,
#class-page .levels .card .info:hover span{
    color: #FFFFFF!important;
}

#class-page .subjects .card{
    width: 100%;
    min-height: 5vh;
    position: relative;
    cursor: pointer;
    transition: all .5s ease-in;
}
#class-page .subjects .card .image{
    height: 100%;
    width: 100%;
    overflow: hidden;
    margin: 0;
}
#class-page .subjects .card .image img{
    width: 100%;
    height: 100%;
    transition: all .2s ease-in;
}
#class-page .subjects .card .content{
    z-index: 1;
    position: absolute;
    background: linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.7));
    right: 10%;
    left: 10%;
    bottom: 15%;
    padding: 1rem 1.5rem;
    align-items: center;
}
#class-page .subjects .card:hover .content{
    background: #0a0a0a!important;
}
#class-page .subjects .card:hover .image img{
    scale: 1.1;
}

.daterangepicker{
    width:500px!important;
}
@media (max-width: 500px) {
    .daterangepicker{
        scale: .65!important;
        position: absolute;
        top: 450px!important;
        left:-50px!important;
        margin: 0!important;
        z-index: 999!important;
        width:475px!important;
    }
}