@font-face {
    font-family: 'aAssassinNinja';
    src: url('../fonts/assassin/aAssassinNinja.woff2') format('woff2'),
        url('../fonts/assassin/aAssassinNinja.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'aAssassinNinja';
    src: url('../fonts/assassin/aAssassinNinja.woff2') format('woff2'),
        url('../fonts/assassin/aAssassinNinja.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Rayman2';
    src: url('../fonts/rayman/Rayman2Regular-VGR7B.ttf') format('ttf'),
         url('../fonts/rayman/Rayman2Regular-VGR7B.ttf') format('ttf'),
         url('../fonts/rayman/Rayman2Regular-VGR7B.ttf') format('truetype');
    font-weight: normal; /* 400 for regular */
    font-style: normal;
    font-display: swap;
}

/* Rayman2 Bold */
@font-face {
    font-family: 'Rayman2';
    src: url('../fonts/rayman/Rayman2Bold-qZnm5.ttf') format('ttf'),
         url('../fonts/rayman/Rayman2Bold-qZnm5.ttf') format('ttf'),
         url('../fonts/rayman/Rayman2Bold-qZnm5.ttf') format('truetype');
    font-weight: bold; /* 700 for bold */
    font-style: normal;
    font-display: swap;
}

/* Full width navbar to avoid left-aligned issues */
.navbar {
    display: flex;
    justify-content: center; /* Center the navbar content */
    align-items: center;     /* Vertically center navbar items */
    width: 100%;            /* Ensure it takes up full width */
    padding-left: 0;
    padding-right: 0;
}

/* Center the navbar-collapse content */
.navbar-collapse {
    display: flex;
    justify-content: center; /* Center the content inside navbar-collapse */
    width: auto;             /* Ensure it adjusts based on content */
    flex-grow: 0;
}

/* Ensuring navbar items are displayed in a row and centered */
ul.navbar-nav.flex-row {
    display: flex;
    justify-content: center; /* Center items in the menu */
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Reduce space between each nav item */
.menu-item > a {
    color: #000000;
    font-family: 'aAssassinNinja', sans-serif;
    text-decoration: none !important;
    font-size: 21px;
    padding: 0 8px; /* Reduce horizontal padding */
    margin: 0; /* Remove margins around each item */
    line-height: 1.5;
}

/* Optional: Adjust font size for a tighter look */
.menu-item > a {
    font-size: 24px; /* Decrease font size if needed */
    margin-left: 14px;
    margin-right: 14px;
}

/* Ensure no extra padding on the last item */
.menu-item:last-child > a {
    padding-right: 0;
}

/* Adjust logo positioning for mobile */
@media (max-width: 768px) {
	
	#zfa {
		text-align: left !important;
	}
	
	ul.navbar-nav.flex-row {
		flex-direction: column !important;
		width: 100% !important;
		margin-top: 40px;
		padding-bottom: 52px;
	}
	
    /* Position the logo outside of the collapsed menu */
    #logo {
        position: absolute;
        left: 0px; /* Adjust this value to fit your layout */
        top: -25px;  /* Adjust this value as well */
        z-index: 10; /* Ensure it stays on top */
    }

    /* Make sure the navbar is full width */
    .navbar {
        display: flex;
        justify-content: space-between; /* Align items to the left and right */
        align-items: center;
        width: 100%;
		padding-bottom: 95px;
		margin-top: 30px;
    }

    /* Ensure the hamburger icon (burger menu) stays visible on the right */
    .navbar-toggler {
        position: absolute;
        right: 20px; /* Position it to the right */
        top: 10px;
        z-index: 10; /* Ensure it stays above the other content */
    }

    /* Adjust the navbar collapse */
    .navbar-collapse {
        display: flex;
        justify-content: center;
        width: 100%;
        flex-grow: 0;
        position: relative; /* So it doesn't take up space when collapsed */
        top: 50px; /* Make sure the collapsed menu appears below the logo */
        left: 0;
        right: 0;
    }
	
	.menu-item {
		text-align: center !important;
		padding: 10px 0px 10px 0px;
	}

    /* Ensure the toggle icon appears when the menu is hidden */
    .navbar-toggler-icon {
        color: #fff !important;
        fill: #fff !important;
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0,0,0,1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E") !important;
    }


/* Show the collapsed menu */
.navbar-collapse.show {
    display: flex !important;
    flex-direction: column;
/*     background-color: #000; You can adjust this to match your design */
    padding: 10px;
}
	.navbar-collapse {
    background-color: transparent; /* Ensure no background flash */
}
	.collapsing {
    background-color: transparent !important; /* Override any inherited background during animation */
}
	
	button:focus {
		outline: none !important;
	}
	
}