studypress-new-design/css/index.sass

// 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

    .infography
        margin-top: 3rem
        display: block
        width: 100%

        img
            width: 100%

// 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

        li
            font-size: 1rem
            margin-bottom: 1rem
            color: $blackColor


    .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
        padding: 1rem 0

    .slider-buttons
        margin-top: .5rem
        display: flex
        justify-content: center
        gap: 1rem

        .new-course-prev, .new-course-next
            padding: .25rem .75rem
            background: $primaryColor
            border: none


// 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: $whiteColor
    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

    .all-news
        margin: 2rem 0

    .single-news
        box-shadow: 2px 2px 5px $greyColor
        border-radius: 5px
        overflow: hidden

        .img-container
            height: 250px

        .details
            padding: 1rem 1rem 1.5rem
            background: $whiteColor
            color: $blackColor
            display: flex
            flex-direction: column
            gap: .5rem

        .title
            font-size: 1rem

        p
            font-size: .8rem

        .link
            font-size: .8rem
            font-weight: 700
            color: $primaryColor
            &:hover
                opacity: .8


// feature sec
#feature-sec
    padding: 0
    font-family: $fontNotoBangla

    .all-feature
        width: 100%
        display: flex
        @media screen and ( max-width: 992px )
            flex-direction: column

    .word-day, .memory
        flex: 1
        padding: 2rem

    .word-day
        background: $thirdColor

        .sub-heading
            text-align: center
            color: $whiteColor

        .heading
            display: block
            max-width: fit-content
            margin: 1rem auto

        .word-container
            min-height: 300px
            width: 54%
            margin: 1.5rem auto 0
            padding: 3rem 3rem 8% 12% 
            background: $whiteColor
            color: $blackColor
            position: relative
            @media screen and ( max-width: 767px )
                width: 80%

            .realated-image
                width: 40%
                position: absolute
                bottom: 0
                left: -20%

            .word
                font-weight: 500
                font-size: 1.6rem
                margin-bottom: .5rem

            .meaning
                color: $primaryColor
                font-weight: 600
                margin-bottom: .25rem

            .synonyms, .antonyms
                font-size: .8rem
                color: $greyColor
                margin-top: 1rem

                strong
                    color: $blackColor

            .desc
                margin-top: 1rem
                color: $greyColor
                font-size: .75rem
    .memory
        background: $memoryColor
        padding: 4rem 3rem 2.5rem
        width: 100%
        @media screen and ( max-width: 768px )
            padding: 1rem

        .title
            font-size: 1.8rem
            font-weight: 600
            text-align: center
            max-width: 500px
            margin: 0 auto

        .date
            font-size: 1.3rem
            color: $greyColor
            text-align: center
            margin-top: 2rem

        .memory-slider
            max-width: 600px
            margin: 3rem auto 0
            padding: .5rem 60px
            @media screen and ( max-width: 500px )
                max-width: 400px 
                padding: 3rem
                margin-top: 1rem
                

        .memory-slider-next, .memory-slider-prev
            color: $primaryColor
            background: none
            border: none
            height: 2rem
            width: 2rem
            padding: .25rem
            &:focus
                box-shadow: none

        .single-memory
            box-shadow: $shadow-1
            display: flex
            width: 100%
            @media screen and ( max-width: 768px )
                flex-direction: column

            .img-container
                flex: 1
                @media screen and ( max-width: 768px )
                    flex: unset
                    height: 200px

            .detail
                flex: 2
                padding: .75rem
                @media screen and ( max-width: 768px )
                    flex: unset

                .title
                    text-align: left
                    font-size: 1rem
                    margin-bottom: .5rem

                p
                    font-size: .75rem