* General Navbar Styling */
/* Ensure logo remains in position */
.navbar-logo {
    display: inline-flex;
    align-items: center;
}




.logo {
    width: 80px;
    /* Default size */
    height: auto;
    margin-bottom: 8px;
    margin-left: 10px;
}

/* Responsive adjustments */
@media (max-width: 992px) {

    /* For medium screens and below */
    .logo {
        width: 60px;
        /* Slightly smaller for tablets */
    }
}

@media (max-width: 768px) {

    /* For small screens */
    .navbar-logo {
        left: 0.5rem;
        /* Adjust spacing for smaller screens */
    }

    .logo {
        width: 50px;
        /* Smaller size for mobile */
    }
}



/* Custom Navbar Styles */
.navbar-custom {
    position: fixed; /* Fix navbar to the top */
    top: 0; /* Position at the very top */
    width: 100%; /* Full width */
    z-index: 1000; /* Ensure it stays above other elements */
    padding: 1rem 2rem;
    font-family: Arial, sans-serif;
    background-color: #000; /* Set navbar background to white */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Add a subtle shadow for distinction */
}

/* Prevent content overlap */


/* Responsive Adjustments */
@media (max-width: 768px) {
    .navbar-custom {
        padding: 0.5rem 1rem;
        background-color: white; /* Maintain white background on mobile */
    }
}

/* Adjust the link colors for visibility */
.navbar-nav .nav-link {
    color: #5cb6f9; /* Default link color */
    transition: color 0.3s ease-in-out; /* Smooth transition for hover effect */
}

.nav-link:hover {
    color: #865741; /* Change hover color for contrast */
}

/* For mobile screens */
@media (max-width: 768px) {
    .navbar-collapse {
        background-color: white; /* Set collapsible menu background to white */
        
    }
}