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

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

// trio bangla
@import url('https://fonts.googleapis.com/css2?family=Tiro+Bangla&display=swap')

$fontPopins: 'Poppins', sans-serif
$fontBangla: 'Noto Sans Bengali', sans-serif
$fontTrioBangla: 'Tiro Bangla', 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)
$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: $fontTrioBangla

main
    height: 200vh
    padding-top: 4rem

section
    padding: 4rem 0
    margin: unset

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


// utility

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

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

.img-container
    overflow: hidden

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

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

.link-btn-outline
    margin: 0 !important
    padding: .25rem 1rem !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

// utility end

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

    .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
        

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

        main
            overflow-y: none

// navbar end