// poppins font
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap')

//inter font
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap')

// noto sherif bangla
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+Bengali:wght@300;400;500;600;700;800;900&display=swap')


$fontPopins: 'Poppins', sans-serif
$fontInter: 'Inter', sans-serif
$fontNotoBangla: 'Noto Serif Bengali', serif

// colors
$blackColor: rgba(0, 0, 0, 1)
$blackLight: rgba(0, 0, 0, 0.8)
$greyColor: rgba( 0, 0, 0, .6)
$whiteColor: rgba(255, 255, 255, 1)
$primaryColor: rgba(0, 38, 136, 1)
$primaryLightColor: #ADBCFF
$seconderyColor: rgba(203, 236, 71, 1)
$thirdColor: rgba(173, 188, 255, 1)

// shadows
$shadow-1: 1px 2px 5px rgba(0, 46, 116, 0.25)

*
    list-style: none
    text-decoration: none

a
    opacity: 1

body
    background: $whiteColor
    color: $blackColor
    font-family: $fontInter
main
    height: 200vh
    padding-top: 4rem

section
    padding: 5rem 0
    margin: unset


h1,h2,h3,h4,h5,h6,p
    color: inherit
    font-family: inherit
    margin: unset
    text-shadow: unset

// customize pico

.row
    margin-top: unset

.container
    @media screen and ( min-width: 1400px )
        max-width: 1360px
// customize pico end


// utility
    

.section-title
    font-weight: 600
    color: $blackColor
    text-align: center
    margin-bottom: 1rem
    font-size: 2.2rem

.section-sub-title
    color: $greyColor
    text-align: center
    font-size: 1.4rem
    margin-bottom: 2rem

.img-container
    overflow: hidden

    img
        height: 100%
        width: 100%
        object-fit: cover
        object-position: center

.link-btn
    margin: 0 
    padding: .45rem 1.2rem !important
    background: $primaryColor
    border-color: $primaryColor
    border-width: 2px
    font-size: .9rem
    font-weight: 600
    box-shadow: none
    opacity: unset
    display: block
    height: unset
    width: fit-content
    &:hover
        background: $whiteColor
        color: $primaryColor

.link-btn-outline
    margin: 0 
    padding: .45rem 1.2rem !important
    color: $primaryColor
    border-color: $primaryColor
    background: $whiteColor
    border-width: 2px
    font-size: .9rem
    font-weight: 600
    box-shadow: none
    opacity: unset
    height: unset
    &:hover
        background: $primaryColor
        color: $whiteColor



.single-course
    box-shadow: $shadow-1
    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
        background: $whiteColor

        .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


// utility end

// navbar
#navbar
    position: fixed
    top: 0
    left: 0
    width: 100%
    padding: .75rem 0
    font-family: $fontPopins
    background: $whiteColor
    z-index: 999

    .container-fluid
        display: flex
        justify-content: space-between
        align-items: center
        @media screen and ( max-width: 768px )
            flex-direction: column


    .nav-icons
        display: flex
        align-items: center
        @media screen and ( max-width: 768px )
            position: fixed
            top: 0
            left: 0
            right: 0
            justify-content: space-between
            width: 100%
            padding: 0 1rem
            background: $whiteColor
            height: 4rem

    .navbar-brand
        height: 3.5rem

        img
            height: 100%

    .res-btn
        font-size: 1.2rem
        padding: .25rem
        background: unset
        color: $blackColor
        border: none
        margin: 0
        width: unset
        height: fit-content
        width: fit-content
        display: none
        &:focus
            box-shadow: none
        @media screen and ( max-width: 768px )
            display: block

    .nav-links
        display: flex
        justify-content: center
        align-items: center
        gap: 1rem
        @media screen and ( max-width: 768px )
            background: $whiteColor
            display: block
            position: fixed
            top: 4rem
            left: 0
            right: 0
            min-height: calc( 100vh - 4rem )
            padding: 1rem
            overflow-y: auto
            transform: translateX(-200vw)
            transition: .75s


            li
                display: block
                color: #fff
                margin-top: 1rem !important

        li
            margin: unset
            padding: unset

    .link-item
        padding: .25rem .5rem
        margin: unset
        color: $blackLight
        font-size: .9rem
        font-weight: 600
        background: transparent
        &:hover
            color: $primaryColor

    .link-item.active
        color: $primaryColor

    .link-btn
        padding: .25rem .75rem !important
        

body.show-mobile-menu
    @media screen and ( max-width: 768px )
        #navbar .nav-links
            transform: translateX(0px)

        main
            overflow-y: none

// navbar end