$White: #fff;
$Black: #000;
$DarkCerulean: #031a2f;
$BayManyBlue: #303762;
$Yellow: yellow;
$RedOrange: #ff2828;
$AliceBlue: #E2F5FF;
$CerulenBlue: #0098fd;
$PatternsBlue: #bee8ff;
$SkyBlue: #0098fd;
// Avenir Fonts Start ================

@font-face {
    font-family: "Avenir Next LT Pro";
    src: url("../fonts/Avenir-fonts/AvenirNextLTPro-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Avenir Next LT Pro";
    src: url("../fonts/Avenir-fonts/AvenirNextLTPro-Bold.ttf") format("truetype");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Avenir Next LT Pro";
    src: url("../fonts/Avenir-fonts/AvenirNextLTPro-Demi.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

// Be_Vitnem Font Start ======================

@font-face {
    font-family: "Be Vietnam Pro";
    src: url("../fonts/Be_Vietnam/BeVietnamPro-Black.ttf") format("truetype");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Be Vietnam Pro";
    src: url("../fonts/Be_Vietnam/BeVietnamPro-Bold.ttf") format("truetype");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Be Vietnam Pro";
    src: url("../fonts/Be_Vietnam/BeVietnamPro-ExtraBold.ttf") format("truetype");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Be Vietnam Pro";
    src: url("../fonts/Be_Vietnam/BeVietnamPro-ExtraLight.ttf") format("truetype");
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Be Vietnam Pro";
    src: url("../fonts/Be_Vietnam/BeVietnamPro-Light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Be Vietnam Pro";
    src: url("../fonts/Be_Vietnam/BeVietnamPro-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Be Vietnam Pro";
    src: url("../fonts/Be_Vietnam/BeVietnamPro-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Be Vietnam Pro";
    src: url("../fonts/Be_Vietnam/BeVietnamPro-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Be Vietnam Pro";
    src: url("BeVietnamPro-Thin.ttf") format("truetype");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

//  Common Css Start

* {
    box-sizing: border-box;
    margin: 0;
}

body {
    scroll-behavior: smooth;
    font-family: "Be Vietnam Pro";
    font-weight: normal;
}

// Hedaer & Footer css Start

.header {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(5px);
    border-radius: 15px;
    padding: 1rem 2rem;

    .nav-logo {
        width: 244px;
        height: 50px;
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
    .right-side {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        .username {
            font-family: "Be Vietnam Pro";
            font-weight: 600;
            font-size: 20px;
            line-height: 37px;
            color: $DarkCerulean;
            text-transform: capitalize;
            margin-bottom: 0;
            margin-right: 2rem;
        }
        .logout-btn {
            background-color: $RedOrange;
            text-transform: capitalize;
            font-family: "Be Vietnam Pro";
            font-weight: 500;
            font-size: 16px;
            line-height: 29px;
            border: 0;
            border-radius: 20px;
            color: $White;
            padding: 0.2rem 2rem;
            transition: 0.3s;
            &:hover {
                background-color: #e11f1f;
            }
        }
    }
}
.footer_container {
    background-color: #0098fd;
    .footer-title {
        color: #fff;
        font-family: "Be Vietnam Pro";
        font-weight: 400;
        font-size: 18px;
        text-align: center;
        margin: 0;
    }
}
@media screen and (max-width: 767.98px) {
    .header {
        padding: 1rem 1rem;
        .nav-logo {
            margin: auto;
            margin-bottom: 1rem;
        }
        .right-side {
            flex-direction: column;
            .username {
                font-size: 18px;
                margin-right: 0;
            }
            .logout-btn {
                padding: 0.2rem 1.4rem;
                margin-top: 1rem;
                width: 65%;
            }
        }
    }
    .footer_container {
        .footer-title {
            font-size: 16px;
        }
    }
}

@media screen and (min-width: 768px) and (max-width: 991.98px) {
    .header {
        padding: 1rem 1rem;
        .nav-logo {
            width: 180px;
            height: 35px;
        }
        .right-side {
            .username {
                font-size: 14px;
                margin-right: 1rem;
            }
            .logout-btn {
                padding: 0.2rem 1rem;
            }
        }
    }
}