// importing theme style
@import ./themeStyle



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

    .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


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

    .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%

            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

    .single-course
        box-shadow: $shadow-1
        height: 100%
        font-family: $fontInter

    .top-part
        height: 200px
        position: relative
        overflow: hidden

        .img-container
            height: 100%
            width: 100%

        .tag
            position: absolute
            left: 4%
            bottom: 4%
            padding: .1rem 1rem
            background: $seconderyColor
            font-size: .75rem
            font-weight: 700
            border-radius: 15px

    .details
        height: calc( 100% - 180px )
        padding: 1rem
        display: flex
        flex-direction: column
        gap: .75rem
        font-family: $fontInter
        line-height: 1.2

        .level
            font-size: .75rem
            font-weight: 500
            color: $primaryColor

        .title
            font-size: .9rem
            font-weight: 600
            text-decoration: none
            color: $blackColor
            cursor: pointer

        .stats
            font-size: .7rem
            color: $greyColor

        .price
            color: $primaryColor
            font-weight: 600
            font-size: 1rem
            text-align: right

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