/* General Styles */
body {
    font-family: Arial, sans-serif;
    background: var(--background-setting);
    margin: 0;
    padding: 0;
}

/* Header Container */
.header-container {
    background-color: var(--company-light-green);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    padding: 1rem; /* Using rem for padding */
}

/* Logo Container */
.logo-container-footer img {
    /* Set dimensions as required to match the header's height */
    max-height: 100%; /* Ensures the image does not exceed the footer's height */
    max-width: 100%;
    width: auto; /* Maintain aspect ratio */
    height: auto;
}

.logo-container {
    display: flex;
    justify-content: center;

}

.logo-container img {
    height: 6rem; /* Using rem for height */
    width: auto; /* Maintain aspect ratio */
    flex-shrink: 0;
}

/* Navigation Bar */
nav {
    display: inline-flex;
    flex-grow: 1;
    justify-content: flex-start;
}

.act-nav {
    display: inline-flex;
    flex-grow: 1;
    justify-content: flex-end;
}

nav ul {
    list-style-type: none;
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 2rem;
}

nav ul li {
    font-size: .7rem;
    padding-right: .5rem;
    padding-left: .5rem;
}

nav ul li a {
    text-decoration: none;
    color: var(--company-dark-green);
}


nav ul li a:hover, nav ul li a:focus {
    background-color: var(--company-dark-green);
    color: var(--company-yellow);
}


.error-field {
    border: 2px solid red;
}


/* Footer Styles */
footer {
    width: 100%;
    background: var(--company-light-green);
    color: var(--company-yellow);
    text-align: center;
    line-height: 1.8rem; /* Use 'rem' for relative line-height */
    z-index: 1;
    font-weight: bold;
    /*padding: 1rem 0; !* Add padding to give some space around the content *!*/
}


.footer-container {
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 25px;
    position: relative; /* This is needed to contain the absolute .llc_tag within the footer */
    font-weight: bold;
}

.llc_tag {
    text-align: center;
    width: 100%; /* Ensures the text is centered across the full width */
    position: absolute;
    bottom: 0; /* Positions the text at the bottom of the footer */
    font-size: 10px;
}

.karma-button {
    padding: 5px 10px;
    background-color: var(--company-yellow);
    color: var(--company-dark-green);
    border-color: var(--company-dark-green);
    border-radius: 5px;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    outline: none;
}

.karma-button:hover {
    background-color: gold;
}

.go-back {
    margin-top: 20px;
    display: inline-block;
    text-decoration: none;
    color: var(--company-dark-green);
}