@import url('https://fonts.maateen.me/nikosh/font.css');
/* boiler css */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    scroll-behavior: smooth;
    scroll-padding: 120px;
}

main {
    min-height: 100vh;
}
/* boiler css */

/* font-family start */
.ff-nikosh {
    font-family: 'Nikosh', sans-serif;
}
/* font-family end */

/* common css start */
.w-65 {
    width: 65% !important;
}
/* common css end */

/* nav css start */
.site-logo {
    width: 100%;
    max-width: 120px;
}
/* nav css end */

/* hero section css start */
.hero-section {
    display: flex;
    height: 600px;
    position: relative;
    align-items: center;
    background-color: #cbdae6;
}

.hero-section-content {
    z-index: 2;
}

.hero-shape-1 {
    right: 0;
    bottom: 0;
    z-index: 1;
    position: absolute; 
}

.hero-shape-2 {
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    position: absolute;
}
/* hero section css end */

/* all subject section start */
.all-subject .subject-card {
    padding: 24px;
    border-radius: 12px;
    background-color: #fff;
    box-shadow: 4px 14px 34px #1c294d33;
}

.all-subject .owl-carousel .owl-item img.subject-logo {
    width: 75%;
    aspect-ratio: 1/1;
    border-radius: 50%;
    border: 4px solid #204935;
}
/* all subject section end */

/* all feature section start */
.all-feature {
    background-color: #DEEDE8;
    padding-block: 3rem;
}

.all-feature .feature-thumb {
    max-width: 120px;
}
/* all feature section end */

/* analytic report start */
.analytic-report {
    position: relative;
}

.analytic-report::before {
    left: 0;
    top: 40%;
    right: 0;
    bottom: 10%;
    content: "";
    position: absolute;
    background-color: #DEEDE6;
}

.auto-height {
    overflow-y: auto;
    max-height: 260px;
}

.top-user-list .leaderboard-profile {
    padding: 12px;
    border-radius: 12px;
    transition: 500ms all ease;
}

.top-user-list .leaderboard-profile:hover {
    background-color: #DEEDE6;
}

.top-user-list .leader-img {
    width: 60px;
    aspect-ratio: 1/1;
    border-radius: 50%;
}
/* analytic report end */

/* footer design css start */
.footer-content {
    padding-block: 3rem;
    color: #fff;
    background-color: #204935;
}

.icon-box a {
    color: #fff;
    padding: 2px 6px;
    border-radius: 50%;
    text-decoration: none;
    border: 1px solid #fff;
}
/* footer design css end */

@media (max-width: 1052px) {
    .hero-section {
        height: auto;
        flex-direction: column-reverse;
    }

    .hero-shape-1 {
        right: auto;
        bottom: auto;
        position: relative;
    }
}