/* Hides the scrollbar for WebKit-based browsers (e.g., Chrome, Safari) */
body::-webkit-scrollbar {
    display: none !important; /* Hides the scrollbar */
}

/* Hides scrollbar for other browsers */
body {
    -ms-overflow-style: none !important; /* Hides scrollbar for IE and Edge */
    scrollbar-width: none !important; /* Hides scrollbar in Firefox */
}

/* Adds a smooth transition effect for button interactions */
button {
    transition: 0.2s ease all !important; /* Smooth transition for all button properties */
}

/* Styles for both the navbar and dropdown menu */
.navbar, ul.dropdown-menu {
    position: fixed; /* Fixes navbar and dropdown menu to stay visible while scrolling */
    top: 2%; /* Positions the navbar and dropdown slightly from the top */
    z-index: 1000; /* Sets a high stack order to bring elements in front */
    border-radius: 16px; /* Sets a smaller corner radius */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* Adds a subtle shadow for depth */
    border: 2px solid rgba(0, 0, 0, 0.15); /* Creates a light border with transparency */

    justify-content: center !important; /* Centers content horizontally */
    align-items: center !important; /* Centers content vertically */

    transition: 0.2s ease box-shadow; /* Adds a smooth shadow transition */
}

/* Additional styling specific to the navbar */
.navbar {
    left: 25%; /* Positions the navbar to start slightly from the left */
    right: 25%; /* Ends navbar slightly before the right edge */
    z-index: 100; /* Sets a high but slightly lower stack order */
    background: linear-gradient(rgba(25, 25, 25, 0.43), rgba(20, 20, 20, 0.34)) !important; /* Adds a semi-transparent gradient */
}

@media (max-width: 1050px) {
    .navbar {
        left: 15%;
        right: 15%;
    }
}

@media (max-width: 700px) {
    .navbar {
        left: 10%;
        right: 10%;
    }
}

/* Add this CSS */
.navbar-blur-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(20px); /* Adjust blur level as needed */
    z-index: 101;
    border-radius: 14px;
}

/* Ensure other navbar content is above the blur layer */
.navbar .container > *:not(.navbar-blur-bg) {
    position: relative;
    z-index: 101;
}

/* Changes navbar shadow on hover */
.navbar:hover {
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.4); /* Deepens the shadow on hover for effect */
}

/* Styles for images inside the navbar */
.navbar img {
     width: 100px;
}

/* Styles for all links in the navbar */
.navbar a {
    color: white !important; /* Sets link text color to white */
}

/* Styles for individual link items in the navbar */
.navbar div.nav-content a {
    border-radius: 15px; /* Rounds the corners of link backgrounds */
    margin-left: 5px; /* Adds left margin for spacing */
    margin-right: 5px; /* Adds right margin for spacing */
    padding: 5px 15px;
    font-size: 20px;
    font-weight: bold;
    display: inline-block; /* Ensures link behaves as block for transformations */
    transition: transform 0.3s ease; /* Adds a smooth transform effect */
}

/* Darkening effect for links in both navbars */
.navbar div.nav-content a:hover {
    background-color: rgba(0, 0, 0, 0.1); /* Adds a light background on hover */
}

/* Adds hover effect for links in main navbar */
.navbar.main-nav div.nav-content a:hover {
    transform: translateY(-3px); /* Moves link up slightly for hover effect */
}

/* Centers content in fluid container within navbar */
.navbar div.container-fluid {
    text-align: center; /* Centers text horizontally */
}

/* Styles for link section with spacing */
.links {
    margin-top: 70px; /* Adds space above links */
}

/* Styles for the navbar brand logo */
.navbar-brand img {
    max-height: 60px; /* Restricts logo height */
    margin-right: 7px; /* Adds right margin for spacing */
}

/* Background color for navbar with bg-body-tertiary class */
.navbar.bg-body-tertiary {
    background-color: rgba(0, 0, 0, 0.8); /* Sets a semi-transparent dark background */
}

/* Styling for an overlay */
.overlay {
    padding-top: 30px; /* Adds top padding */
    position: fixed; /* Fixes overlay to screen */
    top: 0; /* Positions overlay at top */
    left: 0; /* Positions overlay at left */
    width: 100%; /* Sets full width */
    height: 100%; /* Sets full height */
    background: rgba(0, 0, 0, 0.5); /* Adds semi-transparent dark background */
    z-index: 999; /* High stack order to overlay content */
    opacity: 0; /* Sets initial opacity for hidden effect */
    visibility: hidden; /* Initially hides the overlay */
    transition: opacity 0.3s ease, visibility 0.3s ease; /* Smooth fade-in/out transition */
}

/* Shows overlay */
.overlay.show {
    opacity: 1; /* Makes overlay fully visible */
    visibility: visible; /* Sets overlay visibility */
}

button, .do-some-weird-thing-on-hover {
    transition: 0.3s ease transform !important;
}

button:hover:not(.one-of-the-other-facilities button:hover), .do-some-weird-thing-on-hover:hover {
    transform: rotate(-3deg) !important;
}