// importing theme style
@import ./themeStyle



// hero-banner
#hero-banner
    font-family: $fontNotoBangla !important
    color: $blackColor
    background: url(../images/hero-background.svg) no-repeat center center/cover

    .hero-content
        align-items: center
        min-height: 70vh

        .hero-title
            font-weight: 500
            font-size: 2.5rem
            font-family: $fontNotoBangla
            line-height: 1.2
            margin-bottom: 1.5rem
            @media screen and ( max-width: 768px )
                font-size: 1.5rem
                margin-bottom: .75rem

        .hero-paragraph
            line-height: 1.7
            font-size: 1.3rem
            margin-bottom: 2rem
            @media screen and ( max-width: 768px )
                font-size: .9rem

        .hero-desc
            order: 0
            @media screen and ( max-width: 992px )
                order: 1

        .hero-image
            @media screen and ( max-width: 768px )
                height: 240px
                text-align: center

                img
                    height: 100%

    .statistics
        display: flex
        align-items: center
        gap: 1rem

    .single-statistics
        color: $greyColor
        text-align: center
        padding-right: 1rem
        border-right: 5px solid $seconderyColor
        &:last-child
            border-right: none

        .count
            margin-bottom: .2rem
            font-size: 1.3rem
            @media screen and ( max-width: 768px )
                font-size: .9rem

        p
            margin-bottom: 0
            @media screen and ( max-width: 768px )
                font-size: .75rem

    .hero-links
        margin-top: 2rem
        display: flex
        flex-wrap: wrap
        gap: .75rem


// feature
#feature
    font-family: $fontNotoBangla !important
    color: $blackColor
    background: url(../images/2-features.svg) no-repeat center center/cover


// course-catagory
#course-catagory
    font-family: $fontNotoBangla !important
    color: $blackColor
    background: url(../images/3-jobcourse_catagory.svg) no-repeat center center/cover

    .section-title, .section-sub-title
        text-align: start

    .courses-short-desc

        .swiper-slide
            padding: 1rem 0
            height: max-content

        .single-course-short-desc
            font-family: $fontInter
            padding: .75rem 1rem
            border: 3px solid $primaryLightColor
            border-radius: unset
            display: flex
            flex-direction: column
            height: 100%
            @media screen and ( max-width: 767px )
                align-items: center
                justify-content: center
                

            h6
                font-size: 1rem

            .desc
                margin-top: .2rem
                font-size: .65rem
                color: $greyColor
                display: flex
                align-items: center
                gap: .25rem
                font-weight: 600

                span
                    display: flex
                    align-items: center
                    gap: .25rem
                    &::before
                        content: ""
                        background: $primaryLightColor
                        height: 15px
                        width: 15px
                        padding: .15rem

    .course-container
        margin-top: 2rem
        margin-bottom: 2rem

    .link-btn
        margin-top: 1rem
        margin-left: auto
        margin-right: auto


// why-studypress
#why-studypress
    background: $thirdColor
    padding: 0
    // margin-bottom: 500px

    .section-title
        text-align: left
        font-weight: 500
        font-size: 2rem

    .details
        display: flex
        flex-direction: column
        justify-content: center
    
    ul
        list-style-image:  url("../images/round-ok-icon.svg") !important
        list-style-position: inside

        li
            font-size: 1.3rem
            margin-bottom: 1rem

    .slider
        display: flex
        align-items: center

    .why-slider-1, .why-slider-2
        .swiper-wrapper
            max-height: 600px

        .swiper-slide
            height: 60%
            @media screen and ( max-width: 768px )
                display: none


// new course
#new-course
    font-family: $fontNotoBangla 
    color: $blackColor
    background: url(../images/5-courses.svg) no-repeat center center/cover

    .section-title, .section-sub-title
        text-align: left

    .new-course-slider
        padding: 1rem 0


// app-download
#app-download
    font-family: $fontNotoBangla 
    color: $blackColor
    background: url(../images/6-download.svg) no-repeat center center/cover

    .feature-img
        order: 0

        img
            width: 100%

        @media screen and ( max-width: 767px )
            order: 1

    .details
        display: flex
        flex-direction: column
        justify-content: center

        .section-title, .section-sub-title
            text-align: left

    .download-btns
        display: flex
        align-items: center
        gap: .75rem

        a
            text-decoration: none
            height: 3.2rem

            img
                height: 100%




// our-blog
#our-blog
    font-family: $fontNotoBangla 
    color: $blackColor
    background: url(../images/7-blog.svg) no-repeat center center/cover

    .link-btn
        margin: 2rem auto 0

    .blog-container
        margin: 2rem 0 2.5rem

        div
            margin: 0