/* WOCSA Color Scheme */
:root {
    --bs-primary: #f36f21;
    /* WOCSA Orange */
    --bs-primary-hover: #d35400;
    /* Darker orange for hover */
    --bs-white: #ffffff;
    --bs-gray-light: #f8f9fa;
    /* Light gray */
    --bs-gray-dark: #343a40;
    /* Dark gray */
    --bs-black: #000000;
}

html {
    scroll-padding-top: 80px;
}

/* General Body Styling */
body {
    margin-top: 80px;
    font-family: 'Roboto', sans-serif;
    background-color: var(--bs-white);
    color: var(--bs-black);
}

/* Navbar (Menu) */
.navbar {
    font-size: 12px;
    /* Adjust the font size */
    background-color: var(--bs-white) !important;
    /* White background */
    color: var(--bs-primary);
    /* WOCSA Orange */
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Hover effect for the navbar items */
.navbar-nav .nav-item:hover {
    color: #d35400;
    /* Darker orange on hover */
}

/* Page Title Background */
.page-title {
    background-color: var(--bs-gray-light);
    /* Light gray behind title */
    padding: 15px;
    text-align: center;
    color: var(--bs-black);
    /* Black text */
}

/* Buttons */
.btn-primary,
.bg-primary {
    background-color: var(--bs-primary) !important;
    /* WOCSA Orange */
    color: var(--bs-white);
    /* White text */
}

.btn-primary:hover,
.bg-primary:hover {
    background-color: var(--bs-primary-hover) !important;
    /* Darker orange */
}

/* Cards */
.card {
    border-color: var(--bs-primary);
    /* Orange border for cards */
}

.card-header {
    background-color: var(--bs-primary);
    /* Orange card header */
    color: var(--bs-white);
    /* White text */
}

.card-body {
    background-color: var(--bs-white);
    /* White body background */
    color: var(--bs-black);
    /* Black text */

}

/* Links */
a {
    color: var(--bs-primary);
    /* Orange links */
    text-decoration: none;
}

a:hover {
    color: var(--bs-primary-hover);
    /* Darker orange on hover */
}

/* Footer */
footer {
    background-color: var(--bs-gray-dark);
    /* Dark gray background */
    color: var(--bs-white);
    /* White text */
    text-align: center;
    /*position: fixed;
    width: 100%;
    bottom: 0;*/
}

footer a {
    color: var(--bs-white);
    /* White links in footer */
    text-decoration: underline;
}

footer a:hover {
    color: var(--bs-black);
    /* Black on hover */
}

.carousel-item img {
    /*max-width: 50%;
    max-height: 50%;*/
    display: block;
    margin: auto;
}