:root {
    --font-family: 'Noto Sans', sans-serif;
    --font-family-odia: 'Noto Sans Oriya';
    --font-family-devanagari: 'Noto Sans Devanagari', sans-serif;
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semi-bold: 600;
    --font-weight-bold: 700;

    /* Background Color */
    --bg-color-header: #2a3a8d;
    --bg-color-menu: #173156;
    --bg-color-menu-hover: #fff;
    --bg-color-page: #f8f9fa;
    --bg-color-card: #fff;
    --bg-color-footer: #173156;

    /* Menu */
    --menu-icon: #394aae;

    /* Text Color */
    --color-text: #333333;
    --white: #fff;
    --color-menu-link: #fff;
    --color-footer-text: #fff;
}

html {
    font-family: var(--font-family);
    font-weight: var(--font-weight-medium);
    font-size: 14px;
}

body {
    font-family: var(--font-family);
    font-weight: var(--font-weight-medium);
    font-size: 14px;
    background: var(--bg-color-page);
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    color: var(--color-text);
}

* {
    font-family: var(--font-family);
    box-sizing: border-box;
}

p {
    text-align: justify;
}

/*--------- Page Background ---------*/
/*************************************/
.page-bg {
    min-height: 100vh;
    background: var(--bg-color-page);
}

.login-page-bg {
    min-height: 100vh;
    background: #9053c7;
    background: -webkit-linear-gradient(-135deg, #c850c0, #4158d0);
    background: -o-linear-gradient(-135deg, #c850c0, #4158d0);
    background: -moz-linear-gradient(-135deg, #c850c0, #4158d0);
    background: linear-gradient(-135deg, #c850c0, #4158d0);
}

.menu-bg {
    background: var(--bg-color-menu);
}

.footer-bg {
    background: var(--bg-color-footer);
}

/*------------ Text Align -----------*/
/*************************************/
.text-right {
    text-align: right !important;
}

.text-left {
    text-align: left !important;
}

.text-center {
    text-align: center !important;
}

.text-justify {
    text-align: justify !important;
}

/*------------ Div Align ------------*/
/*************************************/
.right {
    float: right;
}

.left {
    float: left;
}

.center {
    float: center;
    margin: 0 auto;
}

.no-margin {
    margin: 0;
}

.no-padding {
    padding: 0;
}

.padding-5 {
    padding: 5px;
}

.padding-v-5 {
    padding: 5px 0;
}

.padding-h-5 {
    padding: 0 5px;
}

.padding-10 {
    padding: 10px;
}

.padding-v-10 {
    padding: 10px 0;
}

.padding-h-10 {
    padding: 0 10px;
}

.margin-5 {
    margin: 5px;
}

.margin-v-5 {
    margin: 5px 0;
}

.margin-h-5 {
    margin: 0 5px;
}

.margin-10 {
    margin: 10px;
}

.margin-v-10 {
    margin: 10px 0;
}

.margin-h-10 {
    margin: 0 10px;
}

/*----------- Header & Menu ---------*/
/*************************************/
.header-image-container {
    width: 100%;
    overflow: hidden;

    .header-image {
        width: 100%;
        height: auto;
        display: block;
    }
}

.menu-bg {
    background: var(--bg-color-menu);
}

.logo {
    display: flex;
    min-width: 350px;

    .logo-img {
        height: 60px;
    }

    .logo-title {
        font-weight: var(--font-weight-medium);
        color: #fff;
        padding: 5px 10px 5px 0;

        .logo-title-en {
            width: 100%;
            font-size: 20px;
            margin-bottom: 5px;
            text-align: left;
        }

        .logo-title-local {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;

            span {
                font-size: 12px;
                font-family: var(--font-family-odia);
                margin-right: 10px;
            }

            span:last-child {
                margin-right: 0;
            }
        }
    }
}

ul.main-menu {
    flex-wrap: wrap !important;
}

ul.main-menu li a {
    display: block;
    text-decoration: none;
    color: #fff;
    padding: 20px 30px;
    font-size: 16px;
    font-weight: var(--font-weight-medium);
    transition: all 0.3s ease;
}

ul.main-menu li a:last-child {
    margin-right: 0;
}

ul.main-menu li a:hover {
    cursor: pointer;
    color: #fff;
    background: #e67e22;
}

.navbar-toggler {
    border-color: #a8a8a8;
}

.navbar-toggler:hover {
    border-color: #a8a8a8;
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 .25rem #a8a8a8;
    border-color: #a8a8a8;
}

.menu-icon {
    color: #bababa;
}

/*------------ Footer --------------*/
/************************************/

.footer {
    color: var(--color-footer-text);
    font-weight: var(--font-weight-medium);
    font-size: 13px;
}

.footer-text {
    padding: 10px 0 0px 0;
    color: var(--color-footer-text);
    font-weight: var(--font-weight-medium);
    font-size: 13px;
}

.version {
    padding: 10px 0 0px 0;
    color: var(--color-footer-text);
    font-weight: var(--font-weight-medium);
    font-size: 13px;
    text-align: right;
}

/*---- Double Extra Large Screen ----*/
/*-----------------------------------*/
@media screen and (min-width: 1400px) {}

/*-------- Extra Large Screen -------*/
/*-----------------------------------*/
@media screen and (max-width: 1399px) {}

/*----------- Large Screen ----------*/
/*-----------------------------------*/
@media screen and (max-width: 1199px) {}

/*---------- Medium Screen ----------*/
/*-----------------------------------*/
@media screen and (max-width: 991px) {
    ul.main-menu {
        li {
            border-bottom: 0.5px solid #284077;

            &:last-child {
                border-bottom: none;
            }

            a {
                padding: 10px;
                font-size: 14px;
            }
        }
    }

    ul.main-menu-dropdown {
        li {
            a {
                color: #fff;
                padding-left: 30px;
                font-size: 13px;

                &:hover {
                    background: #f39c12;
                }
            }
        }
    }
}

/*----------- Small Screen ----------*/
/*-----------------------------------*/
@media screen and (max-width: 767px) {
    .version {
        padding-top: 0;
    }

    .footer-text,
    .version {
        text-align: center;
    }
}

/*-------- Extra Small Screen -------*/
/*-----------------------------------*/
@media screen and (max-width: 575px) {
    .logo {
        min-width: 280px;
    }
}

/*--------- Min Large Screen --------*/
/*-----------------------------------*/
@media screen and (min-width: 992px) {

    /* Open Dropdown on hover */
    .navbar-nav .nav-item.dropdown:hover .dropdown-menu {
        display: block;
        margin-top: 0;
    }

    /* Open Dropdown on hover for dropdown items */
    .dropdown-menu .dropdown-item.dropdown:hover .dropdown-menu {
        display: block;
        margin-top: 0;
    }
}