@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 400;
    src: url("fonts/Montserrat-Regular.ttf") format("truetype");
}

@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 500;
    src: url("fonts/Montserrat-Medium.ttf") format("truetype");
}

@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 600;
    src: url("fonts/Montserrat-SemiBold.ttf") format("truetype");
}

@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 700;
    src: url("fonts/Montserrat-Bold.ttf") format("truetype");
}

/* Default */
body {
    font-family: "Montserrat", sans-serif;
}

:root {
    --ks-color: #20409a;
    --ks-hover-color: #0c1e52;
}

.text-ks,
.hover\:text-ks:hover,
.focus\:text-ks:focus,
.active\:text-ks:active {
    color: var(--ks-color);
}

.bg-ks,
.hover\:bg-ks:hover,
.focus\:bg-ks:focus,
.active\:bg-ks:active {
    background-color: var(--ks-color);
}

.hover\:text-ks-hover:hover {
    color: var(--ks-hover-color);
}

.hover\:bg-ks-hover:hover {
    background-color: var(--ks-hover-color);
}

.hover\:text-white:hover {
    color: white;
}

.hover\:bg-white:hover {
    background-color: white;
}

/* button:focus {
    outline: none;
} */

/* Custom CSS */
.fade-out {
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
}

.fade-in {
    opacity: 1;
}

header {
    height: 100px;
}

header img {
    max-height: 60px;
}

/* Menu Mobile */
#mobileMenu {
    z-index: 1000;
    position: fixed;
    top: 0;
    right: 0;
    width: 80%;
    height: 100vh;
    transform: translateX(100%);
    transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    background: var(--ks-color);
    color: white;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
    overflow-y: auto;
}

#mobileMenu.open {
    transform: translateX(0);
}

#mobileMenuOverlay {
    z-index: 999;
    transition: opacity 0.3s ease;
    opacity: 0;
    visibility: hidden;
}

#mobileMenuOverlay.visible {
    opacity: 1;
    visibility: visible;
}

#mobileMenu.closing {
    transform: translateX(100%);
    transition: transform 0.4s ease-in-out;
}

#logo_header {
    max-height: 60px;
}

/* Hide Navbar in Mobile & Tablet View */
@media (max-width: 1023px) {
    #navbar {
        display: none;
    }

    #hamburger {
        display: block;
    }

    #logo_header{
        max-width: 70%;
    }

    #logo_footer {
        max-width: 50%;
    }

    #footer-eform {
        font-size: small;
    }
}