.navbar-logo {
    height: 80px;      /* Adjust the height as needed */
    width: auto;       /* Maintains aspect ratio */
}


@media (max-width: 768px) {
    .navbar-logo {
        height: 50px;      /* Adjust the height as needed */
        width: auto;       /* Maintains aspect ratio */
    }
}









































/* Pages Css

/* Ensure content is above the overlay */
.header > * {
    position: relative;
    z-index: 2; /* Place content above the overlay */
}

.navbar {
    background-color: rgb(0, 0, 0, 0.5);

}

/* General Navbar Styles */
.navbar-brand {
    font-size: 2.5rem;
    color: white;
    font-weight: bold;
    letter-spacing: 3px;
    text-decoration: none;
}

.navbar-brand:hover,
.navbar-brand:focus {
    color: #ccc;
}


/* Remove border and force white color */
.navbar-toggler {
    border: none;
}

/* Ensure the toggler button itself remains white */
.navbar-toggler,
.navbar-toggler:focus,
.navbar-toggler:active {
    color: white !important;
    background-color: transparent !important;
    outline: none;
    box-shadow: none;
}

/* Fix for the toggler icon */
.navbar-toggler-icon {
    filter: brightness(0) invert(1); /* Converts the default icon color to white */
}

/* Optional: If using a custom SVG icon */
.navbar-toggler-icon::before {
    color: white !important;
}


.top-row {
    height: 15vh;
}

/* Desktop-specific styles */
@media (min-width: 768px) {
    .navbar-nav .nav-link {
        color: white;
    }

.nav-link{
    font-size: 1.1rem;
    font-weight: bold;
}

    .navbar-nav .nav-link:hover,
    .navbar-nav .nav-link:focus {
        color: #ccc;
    }

    .dropdown-menu {
        background-color: rgba(255, 255, 255, 0.9);
        z-index: 1000;
        position: absolute;
    }

    .dropdown-item {
        color: black;
    }

    .dropdown-item:hover,
    .dropdown-item:focus {
        color: #000000;
    }
}

/* Mobile-specific styles */
@media (max-width: 768px) {
    .navbar {
        background-color: rgb(0, 0, 0);
        padding: 0px;
    }

    .dropdown-item {
        color: rgb(255, 255, 255);
    }

    .navbar-collapse {
        background-color: rgb(0, 0, 0);
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .top-row {
        background-color: rgb(0, 0, 0);
        margin: 0;
        padding: 0;
    }

    .dropdown-menu {
        background-color: rgb(255, 255, 255);
        width: 100%;
        margin: 0;
        padding: 0;
        z-index: 1000;
        position: relative;
    }

    /* Ensure touch-friendly dropdown */
    .nav-item.dropdown > .nav-link {
        cursor: pointer;
    }

    .dropdown-menu.show {
        display: block !important; /* Ensures dropdowns display properly on toggle */
    }
}

/* Desktop-specific styles for dropdown hover */
@media (min-width: 768px) {
    .nav-item.dropdown:hover .dropdown-menu {
        display: block;
        position: absolute;
        z-index: 1000;
        margin-top: 0;
        background-color: rgba(255, 255, 255, 0.9);
    }

    .dropdown-menu {
        display: none;
        background-color: rgba(255, 255, 255, 0.9);
        z-index: 1000;
        position: absolute;
    }
}

/* Mobile-specific styles for dropdowns */
@media (max-width: 768px) {
    .dropdown-menu {
        display: none; /* Ensure dropdowns are hidden by default */
        color: white;
    }
    .nav-link {
    color: white !important;
}

.nav-link:hover,
.nav-link:active,
.nav-link:focus {
    color: white !important; /* Forces white color on hover, click, and focus */
    text-decoration: none; /* Optional: Removes any underline */
}




    .dropdown-menu.show {
        display: block; /* Show dropdown when .show class is added */
        position: static; /* Use static positioning to avoid z-index issues */
        background-color: rgb(0, 0, 0); /* Ensure dropdown has a visible background */
        width: 100%; /* Adjust width for mobile if needed */
        z-index: 1000;
    }
}
























/* Toast Notification */
.toast-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    background-color: #333;
    color: #fff;
    padding: 15px 20px;
    border-radius: 4px;
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.5s ease, transform 0.5s ease;
    transform: translateY(-20px);
    font-family: 'Century Gothic', sans-serif;
  }
  
  .toast-notification.show {
    opacity: 1;
    transform: translateY(0);
  }
  
  .toast-notification.success {
    background-color: #28a745;
  }
  
  .toast-notification.error {
    background-color: #dc3545;
  }
  
  .toast-notification.info {
    background-color: #007bff;
  }