// 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
        display: grid
        grid-template-columns: repeat(4, 1fr)
        grid-gap: 1rem

        @media screen and ( max-width: 992px )
            grid-template-columns: repeat(2, 1fr)

        @media screen and ( max-width: 767px )
            grid-template-columns: repeat(1, 1fr)
            

        .blog-single
            width: 100%
            height: 100%
            border: 1.5px solid $thirdColor
            display: flex
            flex-direction: column
            border-radius: 5px

            .img-container
                height: 100%
                flex: 3

            .details
                flex: 2
                padding: 1rem 1rem .5rem
                line-height: 1.4

                .title
                    font-size: .95rem
                    color: $blackColor
                    text-decoration: none
                    cursor: pointer
                    font-weight: 600
                    line-height: 1.2
                    margin-bottom: .5rem
                    display: block


                p
                    font-size: .85rem
                    color: $greyColor
                    line-height: 1.7

            &:first-child
                grid-column: span 2
                grid-row: span 2

                .details
                    padding-top: 1.5rem

                .title
                    font-size: 1.3rem
                    margin-bottom: 1rem

                p
                    font-size: .9rem
                    line-height: 1.7

                @media screen and ( max-width: 992px )
                    grid-column: unset
                    grid-row: unset

                    .title
                        font-size: 1rem

                    p
                        font-size: .85rem


            &:nth-child(4)
                grid-column: span 2
                flex-direction: row

                .img-container
                    height: 100%
                    flex: 1

                .details
                    flex: 1

                p
                    font-size: .8rem
                
                @media screen and ( max-width: 992px )
                    grid-column: unset
                    flex-direction: column

                    .img-container
                        flex: 3

                    .details
                        flex: 2



// current-news
#current-news
    font-family: $fontNotoBangla 
    color: $blackColor
    background: url(../images/8-news.svg) no-repeat center center/cover

    .section-title
        color: $whiteColor

    .link-btn-outline
        display: block
        width: fit-content
        margin: 2rem auto
        border-color: $whiteColor
        color: $whiteColor
        background: transparent