// importing theme style
@import ./themeStyle



// hero-banner
#hero-banner
    font-family: $fontTrioBangla !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: $fontTrioBangla
            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: $fontTrioBangla !important
    color: $blackColor
    background: url(../images/2-features.svg) no-repeat


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

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

    .course-container
        margin-top: 2rem

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

        .img-container
            position: relative
            height: 180px

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

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

        .title
            font-size: .9rem
            font-weight: 600

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

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