.navbar-brand-mobile-m0 {
    margin: 0 !important;
}

/* Optional: You may also want to increase the font size slightly for better visibility */
.custom-font-nav .nav-link {
    font-size: 1.05rem; /* Example size adjustment */
}

.custom-font-brother {
    /* Use the font-family name you declared in the @font-face rule */
    font-family: 'BrothersBold' !important;
    font-size: 150%;
}

.custom-font-gothamRoundedBold {
    /* Use the font-family name you declared in the @font-face rule */
    font-family: 'GothamRoundedBold' !important;
    font-size: 150%;
}

.nav-item{
    text-align: center;
}

.nav-link {
    color: white;
}

.nav-link:active{
    color: #003366;
}

.nav-link:hover{
    color: #003366;
}

.nav-item:active{
    color: #003366;
}

/*navbar tabs into pills*/
.navbar-custom-ul{
    border: 2px solid #fff !important;
    padding-right: 1.25em;
    padding-left: 1.25em;
    background-color: #005696;
}

.navbar-custom-li{
    border: 2px solid black !important;
}

.nav-tabs .nav-link.active {
    background-color: transparent;
    border-color: transparent;
}

.navbar-nav{
    /*padding-left: revert;*/
    /*padding-right: revert;*/
}

.active{
    color: #003366;
}
.navbar-nav .nav-link.active{
    color: #fff;
}
.custom-font-leagueGothic {
    /* Use the font-family name you declared in the @font-face rule */
    font-family: 'LeagueGothic' !important;
    font-size: 150%;
}

.navbar-nav{
    align-items: center;
}
.custom-font-shelby {
    /* Use the font-family name you declared in the @font-face rule */
    font-family: 'Shelby' !important;
    font-size: 150%;
}

.custom-font-thirsty {
    /* Use the font-family name you declared in the @font-face rule */
    font-family: 'Thirsty' !important;
    font-size: 300%;
}

/* This resets the margin on large screens and up (the expanded state) */
@media (min-width: 768px) {
    .navbar-brand-mobile-m0 {
        /* Reset to default Bootstrap margin for brand or set a specific value */
        margin: var(--bs-navbar-brand-margin-end) !important;
        /* or just: margin-right: 1rem !important; */

    }
}

.nav-link{
    border-bottom-right-radius: var(--bs-nav-tabs-border-radius);
    border-bottom-left-radius: var(--bs-nav-tabs-border-radius);
}

@media (max-width: 991px){
    .navbar-nav{
        padding-top: 1.2em;
        padding-bottom: 1.2em;
    }
    .li2-7{
        margin-top: 0.2em;
        border-bottom-right-radius: var(--bs-nav-tabs-border-radius);
        border-bottom-left-radius: var(--bs-nav-tabs-border-radius);
        padding-left: 0.2em;
        padding-right: 0.2em;
    }
    .navbar-custom-li {
        padding-left: 0.2em;
        padding-right: 0.2em;
    }
    .navbar-custom-li{
        border-bottom-right-radius: var(--bs-nav-tabs-border-radius);
        border-bottom-left-radius: var(--bs-nav-tabs-border-radius);
    }
    .active-li-border {
        border: 2px solid #fff !important;
    }
    .active-li-border {
        border: 2px solid #fff !important;
        border-radius: var(--bs-nav-tabs-border-radius); /* Use Bootstrap's variable for consistency */
        padding-left: 0.2em;
        padding-right: 0.2em;
    }
    .nav-item{
        font-size: 0.8em;
    }
    .offcanvas.offcanvas-end{
        width: 12em;
    }

    div#mainNavbarCollapse {
        padding-top: 1.2em;
    }
    
    .bg-custom{
        border: 1px solid #003366;
        border-radius: 1em;
        padding-top: 0.1em;
        padding-bottom: 0.1em;
    }
    
    .bg-002{
        padding-right: 0.3em;
    }
    
    .bg-003{
        margin-bottom: 0.2em;
    }
}
.active-li-border {
    border: 2px solid #fff !important;
}
.active-li-border {
    border: 2px solid #fff !important;
    border-radius: var(--bs-nav-tabs-border-radius); /* Use Bootstrap's variable for consistency */
}

.carousel-dark .carousel-control-prev-icon {
 filter: drop-shadow(2px 4px 6px black);
}

.hamburger{
    padding: 0;
}

.hamburger-img{
    height: 2.5em;
}

.navbar-toggler{
    font-size: initial;
    border-color: transparent;
}

.navbar-toggler:focus{
    box-shadow: none;
}

/* Sets a FIXED height (not max-height) for the container on desktop screens */
.carousel-limited-height {
    height: 500px; /* Use a fixed height (adjust this value as needed) */
    overflow: hidden; 
    position: relative;
    background-color: #333; /* Fills the letterbox space */
}

/* Ensures the image inside the carousel item fits perfectly */
.carousel-limited-height img.d-block {
    height: 100%; 
    width: 100%; 
    object-fit: fill; /* This MUST now prevent cropping */
    object-position: center;
}

/* Optional: Sets a smaller height for better viewing on phones/tablets */
@media (max-width: 768px) {
    .carousel-limited-height {
        height: 300px; /* Smaller fixed height for phones/tablets */
    }
}
/* --- Base Style (Default for Phones/Small Screens - under 576px) --- */
.carousel-control-prev,
.carousel-control-next {
    /* Set a small size for mobile devices by default */
    height: 2.5rem; /* 40px */
    width: 2.5rem;  /* 40px */
    
    /* Keep other styles for centering and dark appearance */
    background-color: rgba(0, 0, 0, 0.5); 
    border-radius: 5%;
    top: 50%;
    transform: translateY(-50%); 
    transition: box-shadow 0.3s ease-in-out, background-color 0.3s ease-in-out;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
    display: flex; 
    align-items: center; 
    justify-content: center;
}

/* --- Media Query for Medium Screens (Tablets, 576px and up) --- */
@media (min-width: 576px) {
    .carousel-control-prev,
    .carousel-control-next {
        height: 3rem; /* Increase size for tablets */
        width: 3rem;
    }
}

/* --- Media Query for Large Screens (Desktops, 992px and up) --- */
@media (min-width: 992px) {
    .carousel-control-prev,
    .carousel-control-next {
        height: 4rem; /* Further increase size for large monitors */
        width: 4rem;
    }
}

/* Ensure the hover effect remains */
.carousel-control-prev:hover,
.carousel-control-next:hover {
    background-color: rgba(0, 0, 0, 0.8);
    box-shadow: 0 0 15px rgba(0, 0, 0, 1);
}

/* Optional: Resize the icon inside the button too */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    /* Ensure the icon scales to fill the newly sized button */
    width: 50%; 
    height: 50%;
}
/* 3. Optional: Make the Icons Sharper */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    /* Optional: You can adjust this size if the icon itself is too small */
    width: 1.5rem;
    height: 1.5rem;
}

/* 1. Style for all Carousel Indicator Buttons (Default look) */
#imageJumboCarousel .carousel-indicators button {
    /* Change shape from default rectangle to a small circle */
    width: 12px;           /* Set a fixed width */
    height: 12px;          /* Set a fixed height */
    border-radius: 50%;    /* Make them perfectly circular */
    
    /* Appearance and Spacing */
    margin: 0 5px;         /* Adds a small space between dots */
    opacity: 0.5;          /* Make non-active dots semi-transparent */
    background-color: #FFFFFF; /* White dot color (good contrast on dark images) */
    border: none;          /* Remove the default border */
    
    /* Add a smooth transition for the highlight effect */
    transition: all 0.3s ease-in-out; 
}

/* 2. Style for the Active Indicator Button (Highlight) */
#imageJumboCarousel .carousel-indicators button.active {
    opacity: 1;                /* Make active one fully visible */
    background-color: #005696; /* Use a bright color, like a strong blue */
    transform: scale(1.3);     /* Make the active dot 30% larger */
    box-shadow: 0 0 5px #007bff; /* Add a soft glow around the active dot */
}

/* Custom CSS for Bleed Blue Navbar Style */

/* General Container Styling - Sets the dark blue background */
.bleed-blue-nav-container {
    /* Background is now clean (transparent or white) */
    /* Remove or comment out any background-color property */
    /*padding-top: 20px;*/
    /*padding-bottom: 20px;*/
}

/* Base Nav Link Styling (The Pill/Button Shape) */
/* Update the Base Nav Link Styling for Underline Effect */
.navbar-nav .nav-link {
    /* 1. Base Text and Structure */
    color: #0d47a1; /* Deep blue text color for visibility */
    background-color: transparent;
    padding: 10px 15px 5px 15px; /* Adjust padding to make space for the underline */
    margin: 0 10px;
    position: relative; /* Essential for positioning the ::after underline */
    border-radius: 0; /* Ensures no rounding/pill effect */
    font-weight: 500;
    
    /* Smooth transition for text color and underline */
    transition: color 0.3s ease-in-out, font-weight 0.3s ease-in-out; 
}

/* 2. Create the Underline (Hidden by default) */
.navbar-nav .nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%; /* Start in the middle */
    transform: translateX(-50%);
    width: 0; /* Hidden by default */
    height: 3px;
    background-color: #0d47a1; /* Default line color */
    transition: width 0.3s ease-in-out, box-shadow 0.3s ease-in-out, background-color 0.3s;
}

/* 3. Hover Effect: Show the Underline and Apply Glow */
.navbar-nav .nav-link:hover {
    color: #000000; /* Optional: darken text on hover */
    background-color: transparent; /* Ensure background stays clean */
}

.navbar-nav .nav-link:hover::after {
    width: calc(100% - 20px); /* Line takes up 100% width minus a bit of margin */
    background-color: #003366; /* Bright blue underline on hover */
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.7); /* Subtle glow on hover */
}

/* 4. Active State: Show the Underline and Apply Strong Glow */
.navbar-nav .nav-link.active {
    color: #000000; /* Keep text dark/prominent */
    font-weight: bold;
    background-color: transparent !important;
}

.navbar-nav .nav-link.active::after {
    width: 100%; /* Active line is slightly wider than hover line */
    background-color: #005696; /* Bright blue underline for active */
    box-shadow: 0 0 10px rgba(0, 123, 255, 1); /* Strong, prominent glow */
}

/* Ensure the Bootstrap navbar container itself is transparent */
.navbar {
    background-color: transparent !important;
}

/* Sets the size for the logo image when displayed on mobile screens */
/* The .d-lg-none class targets the mobile-only container */
.d-lg-none .navbar-brand img {
	width: 150px;
	height: 150px;
}

/* Increase the height of the navbar's top row on mobile to accommodate the larger logo */
@media (max-width: 991px) { 
    /* The top row contains the centered logo and the right-aligned sign-in link */
    .d-flex.align-items-center.w-100 {
        /* Set a height greater than the 75px logo + vertical padding */
        min-height: 90px;
    }
}

/* Ensure the standard Bootstrap container has good padding */
.container, 
.container-fluid {
    /* Set horizontal padding for all screen sizes */
    /*padding-right: 15px;*/
    /*padding-left: 15px;*/
}

/* Add vertical padding to the main content area */
/* This is a general safety rule, but applying padding to a 
   specific content wrapper (like a <main> or a container div 
   inside your page templates) is better */
main {
    padding-top: 20px;
    padding-bottom: 40px;
}

/* Optional: Refine the horizontal padding on very small devices */
@media (max-width: 575px) {
    .container, 
    .container-fluid {
        /* Slightly less padding on the smallest phones */
        padding-right: 10px;
        padding-left: 10px;
    }
}

/* Custom CSS to remove default browser spacing from the edges of the viewport */
html,
body {
    padding: 0;
    margin: 0;
    padding-top: 0.1em !important;
    /* Optional: Ensure content starts right at the edge of the viewport */
    width: 100%;
    overflow-x: hidden; /* Prevents horizontal scrollbar if elements slightly exceed viewport */
}

/* Styling for the Sign In link inside the mobile offcanvas body */
.offcanvas-body .offcanvas-signin-item {
    /* Ensure the list item is correctly formatted */
    margin-left: 15px; /* Add margin to align with other links */
}

.offcanvas-body .offcanvas-signin-item .nav-link {
    /* Make text smaller */
    
    color: #0d5696; /* Maintain deep blue text color */
    text-decoration: none;
    /* Overwrite any default nav-link padding that might apply */
    padding: 0;
    margin: 0;
}

/* Style the image inside the mobile Sign In link */
.offcanvas-body .offcanvas-signin-item img {
    /* Set logo size to small */
    width: 20px;
    height: 16px;
    margin-right: 4px; /* Add small space between logo and text */
}

/* --- Futuristic Blue Button Styling (Defined :root here for variable use) --- */
:root {
    --futuristic-blue: #007bff; /* Standard Bootstrap Blue */
    --futuristic-glow: 0 0 10px rgba(0, 123, 255, 0.8), 0 0 20px rgba(0, 123, 255, 0.5);
}

.btn-futuristic-blue {
    /* Basic Button Look (Blue Outline and Text) */
    color: var(--futuristic-blue) !important;
    background-color: transparent !important;
    border-color: var(--futuristic-blue) !important;
    border-width: 2px !important;
    transition: all 0.3s ease-in-out; /* Smooth transitions for hover effects */
}

.btn-futuristic-blue:hover,
.btn-futuristic-blue:focus {
    /* Glowing Effect on Hover */
    color: #fff !important; /* Change text to white for contrast on hover */
    background-color: var(--futuristic-blue) !important; /* Solid blue fill on hover */
    border-color: #fff !important; /* Brighten the border */
    /* Add the bright blue glow using box-shadow */
    box-shadow: var(--futuristic-glow) !important;
    /* Ensure the scale transition is applied for a subtle "pop" */
    transform: scale(1.05);
}

/* Ensure the button state remains clean after click (active) */
.btn-futuristic-blue:active {
    background-color: var(--futuristic-blue) !important;
    border-color: #fff !important;
    box-shadow: var(--futuristic-glow) !important;
}

/* --- Footer Styling --- */

/* Define the elegant dark blue background for the footer */
.bg-dark-blue {
    background-color: #003366; /* A deep, elegant blue */
}

/* Style for the footer links (Sitemap links) */
.footer a.nav-link {
    /* Ensures hover state is consistent with the rest of the site */
    color: rgba(255, 255, 255, 0.5) !important;
    transition: all 0.3s; /* Change to 'all' for scale and shadow */
    display: inline-block; /* Allows transform to work */
}

.footer a.nav-link:hover {
    color: #ffffff !important; /* White on hover */
    /* GLOW EFFECT for sitemap links */
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5); 
    transform: scale(1.05); 
}

/* Style for social media icons spacing and hover */
.social-icon-wrapper {
    /* Set a right margin to separate the icons */
    margin-right: 1.5rem; 
    display: inline-block; /* Allows margins to work on inline elements */
    cursor: pointer; /* Visually indicates the element is interactive */
}

.footer-icon {
    transition: color 0.3s, transform 0.3s, text-shadow 0.3s; /* Added text-shadow to transition */
}

.footer-icon:hover {
    color: #ffffff !important; /* Change to white for consistency with glow */
    transform: scale(1.1);
    /* GLOW EFFECT for social media icons */
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
}

/* Optional: Futuristic blue button for the footer sign-in */
.btn-futuristic-blue-footer {
    /* Inherit the futuristic border/text style but with a light outline for a dark background */
    color: #fff;
    border-color: #fff;
    background-color: transparent;
    transition: all 0.3s ease-in-out;
}

.btn-futuristic-blue-footer:hover {
    color: var(--futuristic-blue);
    background-color: #fff;
    border-color: #fff;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); /* Subtle white glow on hover */
    transform: scale(1.05);
}

/* Styling for the Contact Links (Email/Phone) in the footer */
.footer-contact-link {
    transition: all 0.3s; /* Change to 'all' for scale and shadow */
    display: inline-block; /* Allows transform and margin to work better */
}

.footer-contact-link:hover {
    color: #ffffff !important; /* White on hover for contrast */
    /* GLOW EFFECT for contact links */
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
    transform: scale(1.05);
}

/* --- Employee Gallery Styling --- */
/* --- Employee Gallery Styling --- */

/* Wrapper for the image to control the size and shape */
.employee-card-img-wrapper {
    /* Enforce a consistent square aspect ratio for the wrapper */
    width: 100%;
    /* Set a fixed height equal to the width for a square container */
    height: 0;
    padding-top: 100%; 
    position: relative;
    overflow: hidden;
    
    /* *** NOTE: border-radius: 50%; has been removed for square images *** */
    margin: 15px auto 0 auto; /* Center the image and add top margin */
    max-width: 250px; /* Optional: limit the size of the square on large screens */
    /* Add a subtle shadow for depth even without hover */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
}

/* Style for the image inside the wrapper */
.employee-card-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* This crops the image to cover the square area */
    transition: transform 0.4s ease-in-out; /* Smooth transition for zoom */
}

/* ------------------------------------------- */
/* --- HIGHLIGHT HOVER EFFECTS --- */
/* ------------------------------------------- */

/* 1. Image Zoom Effect */
/* When hovering over the entire card, zoom the image */
.card:hover .employee-card-img {
    transform: scale(1.08); /* Zooms the image slightly */
}

/* 2. Card Lift/Shadow Effect */
/* Apply an interactive lift and stronger shadow to the entire card */
.card {
    transition: transform 0.4s, box-shadow 0.4s; /* Smooth transition for lift and shadow */
}

.card:hover {
    transform: translateY(-8px); /* Lifts the card slightly up */
    /* A more pronounced shadow to make it 'pop' */
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.25) !important; 
}

/* --- Awards Section Styling --- */

/* 3. Custom Lift/Shadow Effect for Awards Section */
.award-card {
    transition: transform 0.4s, box-shadow 0.4s;
    cursor: default; /* Keep cursor standard since they aren't links */
    /* Starting shadow for consistency */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); 
}
.award-card:hover {
    transform: translateY(-5px); /* Lifts the award box slightly */
    /* Pop out effect with an added blue futuristic glow */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.20), var(--futuristic-glow); 
}

/*
* ==================================================================================================
* --- Custom Styling for Awards and Recognition Section ---
* ==================================================================================================
*/

/* Styling for the trophy icon next to the "Awards and Recognition" heading */
.awards-trophy-icon {
    color: #005696 !important; /* The dark blue color from link hovers */
    font-size: 1.5rem; /* A size appropriate for an h2 heading */
}

/* ============================================== */
/* --- Employee Photo Gallery Styling --- */
/* ============================================== */

/* Container for the image that enforces a square aspect ratio */
.employee-card-img-wrapper {
    width: 80%; /* Takes up 80% of the card width */
    /* Use a padding-top trick equal to the width for a square container */
    height: 0;
    padding-top: 80%; 
    position: relative;
    overflow: hidden;
    
    border-radius: 5px; /* Subtle rounding */
    margin: 15px auto 0 auto; /* Center the image and add top margin */
    max-width: 250px; 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

/* Style for the image inside the wrapper */
.employee-card-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* This crops the image to cover the square area */
    transition: transform 0.4s ease-in-out; /* Smooth transition for zoom */
}

/* ------------------------------------------- */
/* --- HIGHLIGHT HOVER EFFECTS --- */
/* ------------------------------------------- */

/* 1. Image Zoom Effect */
/* When hovering over the entire card, zoom the image */
.employee-card:hover .employee-card-img {
    transform: scale(1.08); /* Zooms the image slightly */
}

/* 2. Card Lift/Shadow Effect */
/* Apply an interactive lift and stronger shadow to the entire card */
.employee-card {
    transition: transform 0.4s, box-shadow 0.4s;
}

.employee-card:hover {
    transform: translateY(-5px); /* Lifts the card slightly */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* Stronger shadow */
}