@font-face {
    font-family: 'Gillsans'; 
    src: url('../font/GLSNECB.TTF') format('woff'); 
}

@font-face {
    font-family: 'ArialNova'; 
    src: url('../font/ArialNovaCond-Light.ttf') format('woff'); 
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

body {
    flex: 1 !important;
}

.content {
    flex: 1;  /* ensures that the content expands to fill the available space */
}

.page-footer {
    flex-shrink: 0; /* prevents the footer from shrinking */
    width: 100%;
    /* your existing styles for the footer */
}

.navbar {
    height: 80px; 
    /* padding: 0 10px;  */
    padding: 10px 20px;
    background-color: #002060; 
    display: flex;
    /* justify-content: flex-start; */
    align-items: center;
}

.nav-right {
    display: flex;
    align-items: center;
}

.company-logo {
    height : 65px;
    margin-right : 5px;
    filter: brightness(120%); 
    filter: drop-shadow(0 0 10px #fff);
}

.navbar-brand {
    color: white !important;
    font-size: 1.7rem; 
    margin-right: auto; 
    text-decoration : none;
    font-family: 'Gillsans', sans-serif;
    letter-spacing: 5px;
}
.nav-item {
    padding: 0 10px; 
}

.nav-link {
    position: relative; /* Set the position to relative for the absolute positioning of the pseudo-element */
    color: white !important;
    text-decoration: none;
    padding: 20px 3px;
    font-family: 'ArialNova', sans-serif;
    font-size: 18px;
    display: flex;
    align-items: center;
    height: 100%;
    overflow: hidden; /* Prevents any part of the pseudo-element from being displayed outside the link */
}

.nav-link::after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0; /* Position the pseudo-element at the bottom of the link */
    left: 0; /* Start from the left side */
    width: 0%; /* Initial width of 0 */
    height: 3px; /* Height of the underline */
    background-color: red; /* Red background for the underline */
    transition: width 0.3s ease; /* Animate the width */
}

.nav-link:hover::after, .nav-link:focus::after {
    width: 100%; /* Full width on hover/focus */
}

/* Maaaring kailanganin mo ring ayusin ang padding o margins ng .nav-item para sa tama spacing */
.nav-item {
    margin: 0 10px; /* Halimbawa ng pag-set ng margin sa magkabilang side ng bawat link */
}

.fa {
    margin-right: 5px;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: rgba(0, 0, 0, 0.5); /* dark background */
    border-radius: 50%;
    color: white;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    background-image: none; /* remove default Bootstrap icon */
}

.carousel-control-prev-icon::after {
    content: "<";
    font-weight: bold;
}

.carousel-control-next-icon::after {
    content: ">";
    font-weight: bold;
}


/* .nav-right {
    display: flex;
    align-items: right; 
} */

/* .navbar img {
    height : 65px;
    margin-right : 5px;
    filter: brightness(120%); 
    filter: drop-shadow(0 0 10px #fff); 
} */

.hamburger-menu {
    display: none; /* Keep it hidden on larger screens */
    position: absolute; /* Position it on the top right corner */
    right: 10px; /* Adjust based on your layout */
    top: 10px; /* Adjust based on your layout */
    z-index: 101;
}

/* ------------------------------------------------------------------------- */


@media (max-width: 1600px) {
    .navbar {
        justify-content: space-between; /* This will push the .nav-right to the far right */
    }

    .navbar-brand {
        display: none; /* Kung gusto mo pa rin itago 'yung brand sa smaller screens */
    }

    .nav-right {
        display: flex; /* Ensure that .nav-right uses flexbox to align its children properly */
        align-items: center; /* Keep items vertically centered */
    }
}



@media (max-width: 1050px) {
    .nav-label {
        display: none;
    }
}

@media (max-width: 600px) {
    .nav-right {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: 50px; /* Set a fixed width for the menu */
        height: 500px; /* Remove the full height */
        background-color: rgba(13, 71, 161, 0.95); /* Semi-transparent background */
        flex-direction: column;
        align-items: flex-start; /* Align items to the start */
        padding-top: 20px; /* Adjust padding */
        overflow-y: auto; /* If menu is longer than the screen, allow it to scroll */
        transform: translateX(100%); /* Start off the screen */
        transition: transform 0.3s ease; /* Smooth transition for sliding in */
        z-index: 99;
    }

    .nav-right.active {
        transform: translateX(0); /* Slide in when active */
    }

    .hamburger-menu {
        display: block;
        z-index: 100; /* Make sure this is above the .nav-right */
    }

}


/* Toggle class for showing the nav items */
.nav-right.active {
    display: flex; /* Show nav items when active */
}