@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Vollkorn:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
    @import "variables.css";

    body,
    p,
    span {
        font-family: 'Vollkorn', serif;
        font-weight: 400;
    }

    body,
    p,
    span,
    h1,
    h2,
    h3,
    h4,
    h5 {
        font-family: 'Red Hat Display', sans-serif;
        font-weight: 400;
    }

    h1,
    h2,
    h3,
    h4,
    h5 {
        font-weight: 700;
    }

    /* =====================  Mobile <800px display ===================== */

    .bg-transparent {
        background-color: #003764 !important;
    }

    /*.navbar {*/
    /*    background-color: #C9D2DE;*/
    /*}*/

    .navbar-brand {
        padding: 0.3em;
        max-width: 50vw;
        height: auto;
    }

    /*.navbar-collapse {*/
    /*    background-color: #003764;*/
    /*}*/

    .dpdw {
        color: white;
        /*margin-left: 2em;*/
    }

    .dropdown-toggle::after {
        color: white;
    }

    .navbar-toggler {
        border: none;
    }

    .navbar-light .navbar-toggler {
        color: rgba(0, 55, 100, 0.3)
    }

    .navbar-toggler-icon{
        height: 2em !important;
        width: 2em !important;
    }

    /*.dropdown-menu {*/
    /*    color: #212529;*/
    /*    background-color: #003764;*/
    /*    border-radius: 0rem;*/
    /*    font-size: 0.7rem;*/
    /*    width: 13.5rem;*/
    /*}*/

    .navblue-icons {
        background-color: var(--primary-color);
    }

    .circle {
        background-color: #95A8BE;
        width: 35px;
        height: 35px;
        border-radius: 50%;
        padding: auto;
        margin-right: 12px;
        display: grid;
        justify-content: center;
        align-items: center;
    }

    .icon {
        text-align: center;
    }

    .user-navIcon {
        width: 63px;
        height: auto;
        margin-right: 5px;
        display: grid;
        justify-content: center;
        align-items: center;
        padding: auto;
    }

    .circle:hover {
        transform: scale(1.2);
        background: #5e81a0;
    }

    .dropdown-item:active {
        background-color: transparent;
    }

    .search {
        background-color: #62809F;
        /*     background-color: rebeccapurple; */
        /*padding-top: 1em;*/
        /*  margin: 0em 0.5em; */
        /* background-color: #003764; */
    }

    .btn-search {
        color: white;
        margin-right: 1em;
        background-color: transparent;
        border: none !important;
    }

    /* ======== =============  Mobile <800px display end ===================== */