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

$fontBangla: 'Noto Serif Bengali', serif
$fontPopins: 'Poppins', sans-serif


$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)

*
    list-style: none
    text-decoration: none

a
    opacity: 1

body
    height: 200vh


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

// utility end

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

    .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 )
            justify-content: space-between
            width: 100%

    .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: .75rem
        @media screen and ( max-width: 768px )
            flex-direction: column
            justify-content: flex-start

        li
            margin: unset
            padding: unset

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

// navbar end