/* Apply Merriweather to all body text */
body {
    font-family: 'Merriweather', serif;
    font-size: 16px;
}

/* Apply Cabin to headings */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Cabin', sans-serif;
}

/* Apply Cabin to navigation links */
.nav-link {
    font-family: 'Cabin', sans-serif;
    font-size: 1.25rem;
}

.dropdown-item {
    font-family: 'Cabin', sans-serif;
    font-size: 1.1rem;
}

.custom-navbar {
    border-bottom: #2E7D97 solid 3px;
}

.navbar-brand {
    font-family: 'Cabin', sans-serif;
    font-size: 1.5rem;
    color: #333333;
}

/* Style buttons that lead to detail pages */
.btn-ghost-grey {
    background: transparent;
    border: 1px solid #333;
    color: #333;
    transition: all 0.3s ease;
}

.btn-ghost-grey:hover {
    background: #2E7D97;
    border-color: #2E7D97;
    color: #fff;
}

/* Style for the navigation items in the sidebar */
.sidebar .nav-item {
    margin-bottom: 10px; /* Spacing between items */
}

.sidebar .nav-link {
    border: 1px solid #333; /* Border for button-like appearance */
    border-radius: 5px; /* Rounded corners */
    padding: 10px 15px; /* Padding inside the link */
    display: block; /* Make the link fill the container */
    color: #333; /* Text color */
    background-color: #f8f9fa; /* Background color */
    transition: background-color 0.3s, color 0.3s; /* Smooth transition for hover effect */
}

.sidebar .nav-link:hover, .sidebar .nav-link:focus {
    color: #fff; /* Text color on hover/focus */
    background-color: #2E7D97; /* Background color on hover/focus */
    border: 1px solid #333;
    text-decoration: none; /* No underline on hover/focus */
    transition: background-color 0.3s, color 0.3s;
}


/* Create the sidebar */
.sidebar {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          min-height: 100vh; /* 100% of the viewport height */
          overflow-y: auto;  /* Enables vertical scrolling if the content is taller than the max-height */
          width: 300px;
          position: fixed;
          z-index: 100;
          top: 0;
          left: 0;
          background-color: #f8f9fa;
          overflow-x: hidden;
          padding: 20px;
        }

.sidebar h2 {
    color: #2E7D97;
}

/* main.css */
.custom-navbar .navbar-nav .nav-item .nav-link {
    margin-right: 10px; /* Spacing between nav items */

}

.custom-navbar .btn {
    margin-right: 15px; /* Spacing for button */
    border: 1px solid #333; /* Border for button-like appearance */
    border-radius: 5px; /* Rounded corners */
    padding: 10px 15px; /* Padding inside the link */
    display: block; /* Make the link fill the container */
    color: #333; /* Text color */
    background-color: #f8f9fa; /* Background color */
    transition: background-color 0.3s, color 0.3s; /* Smooth transition for hover effect */
}

.custom-navbar .btn:hover {
    color: #fff; /* Text color on hover/focus */
    background-color: #2E7D97; /* Background color on hover/focus */
    border: 1px solid #333;
    text-decoration: none; /* No underline on hover/focus */
    transition: background-color 0.3s, color 0.3s;
}

footer {
    border-top: #2E7D97 solid 5px;
}

footer a {
    font-family: 'Cabin', sans-serif;
    font-size: 18px;
    color: #333; /* Text color */
    padding-left: 15px;
}

footer a:hover {
    color: #2E7D97;
}

.sub-footer {
    background-color: #2E7D97;
    color: #ffffff;
    padding: 15px 0;
}

.sub-footer a {
    color: #ffffff;
    text-decoration: none;
}

.sub-footer a:hover {
    color: #E9EBB4;
}