@charset "UTF-8";
/* CSS Document */

/* logo */

#md-header-logo {
	position: fixed;
	display: flex;
	height: 0;
	width: 100%;
	z-index: 155;
	transition: 0.2s;
}

.md-custom-logo, #md-logo {
	position: fixed;
	display: flex;
	flex-direction: row;
	width: auto;
	height: 6rem;
	padding: 0.5rem 3rem;
	justify-content: flex-start;
	/*background: rgba(255,255,255,0.1);*/
	z-index: 155;
	transition: 0.2s;
}

.md-custom-logo-mobile, #md-logo-mobile {
	display: none;
}

.md-custom-logo a {
	display: block;
	width: auto;
	height: 100%;
}
.md-custom-logo img {
	display: block;
	width: auto;
	height: 100%;
}

/* Header Menu*/

/* nav bar */

nav, #the-nav {
	position: fixed;
	display: flex;
	flex-direction: row;
	align-items: center;
	top: 0;
	right: 0;
	left: 0;
	height: 6rem;
	width: 100%;
	background: rgb(13,53,148);
	z-index: 150;
	transition: 0.2s;
	border-bottom: 1px solid rgb(255,255,255);
}

/* header menu */
.menu-header-menu-container {
	width: calc(100% - 1.5rem);
	margin-right: 1.5rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
	/*background: rgba(255,255,255,0.1);*/
}

.menu-header-menu-container > ul {
	list-style: none;
	position: relative;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	padding: 0;
	margin: 0;
}

.menu-header-menu-container .menu-item > a {
	display: block;
	padding: 0.5em 0.5em;
	margin: 0 0.375em;
	text-decoration: none;
	color: rgb(255,255,255);
}

.menu-header-menu-container .menu-item.current-menu-parent > a,
.menu-header-menu-container .menu-item.current-menu-item > a {
	font-weight: normal;
	color: rgb(255,255,255);
	border-bottom: 1px solid rgb(216,57,179);
}
.menu-header-menu-container .menu-item > a:hover {
	background-color: rgba(13,53,148, 0.8);
}

.menu-header-menu-container .sub-menu {
	list-style: none;
	padding: 0.25em;
	margin: 0;
	border: 1px solid rgba(255,255,255,0.5);
}

.menu-header-menu-container .sub-menu .menu-item > a {
	margin: 0;
}

/* carat down: f0d7 */
.menu-item-has-children > a::after {
	font-family: "Font Awesome 6 Pro";
	font-weight: 900;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
	content: "\f0d7";
	padding-left: 0.5em;
}
/* carat up: f0d8 */
.menu-item-has-children.active > a::after {
	font-family: "Font Awesome 6 Pro";
	font-weight: 900;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
	content: "\f0d8";
	padding-left: 0.5em;
}


/* NEW MENU CSS */

/* Submenu Styles */
.sub-menu {
    display: none; /* Hide submenu initially */
    position: absolute; /* Position relative to its parent */
    background-color: rgba(0,83,154,0.9); /* Submenu background color */
    min-width: 160px; /* Minimum width of submenu */
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /* Box shadow for styling */
    z-index: 1; /* Ensure it appears above other content */
}

/* Styles for Active Main Menu Item */
.menu-item-has-children.active > a {
    color: rgb(255,255,255); /* Change color for active state */
    font-weight: normal; /* Make font bold for active state */
}

/* Styles for Displaying Submenu of Active Menu Item */
.menu-item-has-children.active > .sub-menu {
    display: block; /* Display submenu for active item */
}

/* Styles for Hamburger Menu */
.hamburger-menu {
    display: none; /* Hidden by default */
    cursor: pointer; /* Change cursor to pointer on hover */
}

.hamburger-menu .bar {
    width: 35px; /* Width of each bar */
    height: 5px; /* Height of each bar */
    background-color: rgb(216,57,179); /* Color of bars */
    margin: 6px 0; /* Space between bars */
    transition: 0.4s; /* Transition for bar animation */
	border-radius: 2px;
}

/* Responsive Styles for Mobile View */
@media screen and (max-width: 1024px) {
    .hamburger-menu {
        display: block; /* Show hamburger icon on small screens */
    }

    .menu-header-menu-container > ul,
	.menu {
        display: none; /* Hide main menu initially on small screens */
    }
	.menu > .menu-item-has-children > .sub-menu {
		flex-direction: column;
	}

    .menu.active {
        display: flex; /* Display menu when active (hamburger clicked) */
        position: absolute; /* Positioning relative to the parent */
        background-color: rgba(13,53,148,0.9); /* Background color */
        right: 0; /* Align to the right */
        top: 60px; /* Position below the hamburger menu */
        width: 100%; /* Full width of the container */
    }
}
/* #menu-item-50 > ul */

/* Hamburger Menu Styles for Mobile View */
.hamburger-menu {
	position: fixed;
	top: 1em;
	right: 1em;
	z-index: 300;
}


/* Responsive Styles */
@media screen and (max-width: 1024px) {
    .hamburger-menu {
        display: block; /* Show hamburger icon on small screens */
    }

    .menu {
        display: none; /* Hide regular menu on small screens */
    }

    .menu.active {
        display: block; /* Show menu when hamburger is active */
        position: absolute;
        background-color: rgba(13,53,148,0.8);
        right: 0;
        top: 60px; /* Adjust as needed */
        width: 100%;
    }
}


/* header nav social media */

.md-social-icons {
	display: none;
	position: relative;
	width: 6em;
	height: auto;
	margin: 1em auto;
	z-index: 60;
	background: #eee;
	text-align: center;
}

.md-social-icons a {
	display: block;
	padding: 0.5rem 1rem;
	margin: 0;
	text-decoration: none;
}

.md-social-icons a i {
	display: block;
}

/* Footer Menu */

footer {
	display: block;
	text-align: center;
	font-size: 0.75em;
	padding: 1em;
	margin: 2em 0;
	background: unset;
	z-index: 10;
}

footer .menu-footer-menu-container {
	margin: 0 0 3em 0;
}

.menu-footer-menu-container ul {
	list-style: none;
	position: relative;
	display: flex;
	flex-direction: row;
	justify-content: center;
	padding: 0;
	margin: 0;
}

.menu-footer-menu-container ul li {
	padding: 0;
	margin: 0;
}

.menu-footer-menu-container ul li a {
	padding: 0.25em 1em;
}

footer .md-thirds {
	margin: 3em auto 2em auto;
	padding: 0 3em;
	max-width: 1500px;
}

.md-footer-social {
	display: inline-block;
	width: 2em;
	height: auto;
	margin: 0.5em;
}

footer .md-3rd {
	text-align: center;
}

footer .md-3rd:first-child {
	text-align: left !important;
}
footer .md-3rd:last-child {
	text-align: right !important;
}






/* EOF */