/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    background-color: #f4f4f4;
}

h1, .heading {
    font-family: 'Lobster', cursive; /* Use the Lobster font */
    font-size: 3rem; /* Adjust size as needed */
    color: #1b6b2d; /* Change to your desired color */
    margin-bottom: 20px; /* Space below the heading */
    text-align: center; /* Center the heading */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); /* Optional shadow for depth */
}
h1 {
    font-size: 4em !important;
}

/* Media query for smaller screens */
@media (max-width: 768px) {
    h1, .heading {
        font-size: 2em !important; /* Smaller size for mobile */
    }
}
/* H3 styling */
h3 {
    color: #1b6b2d; /* Same green as the button */
    margin-bottom: 15px; /* Space below the heading */
    font-size: 1.5rem; /* Adjust size as needed */
}
/* Navigation */
nav {
    background-color: #333;
    color: white;
    padding: 10px 20px;
    text-align: center;
}

nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
}

nav ul li {
    margin: 0 15px;
}

nav ul li a {
    color: white;
    text-decoration: none;
}

.hero {
    background-color: #ffcc00;
    color: #333;
    padding: 100px 20px;
    text-align: center;
}

.hero .btn {
    background-color: #333;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    margin-top: 20px;
    display: inline-block;
}

.image-bar {
    display: flex; /* Flexbox für horizontale Anordnung */
    justify-content: center; /* Zentriert den Inhalt */
    margin: 20px 0; /* Abstand oben und unten */
    overflow-x: auto; /* Ermöglicht das Scrollen bei Überfüllung */
    background-color: #f8f9fa; /* Heller Hintergrund für besseren Kontrast */
    padding: 10px 0; /* Polsterung oben und unten */
    border-radius: 10px; /* Abgerundete Ecken */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Schatten für Tiefe */
    transition: transform 0.3s ease; /* Übergangseffekt für Bewegungen */
}

.image-bar:hover .overlay {
    opacity: 1; /* Sichtbar beim Hover über die Bildleiste */
}
.image-bar:hover {
    transform: scale(1.02); /* Leichte Vergrößerung beim Hover */
}
.image-bar img {
    height: 300px; /* Höhe der Bilder */
    margin: 0 10px; /* Abstand zwischen den Bildern */
    border-radius: 5px; /* Abgerundete Ecken */
    transition: transform 0.3s ease; /* Übergangseffekt für Bilder */
    opacity: 0.5; /* Startwert für die Sichtbarkeit */
}
/* Media query for smaller screens */
@media (max-width: 768px) {
    .image-bar img {
        height: 100px !important; /* Smaller size for mobile */
    }
}
.image-bar img:hover {
    transform: scale(1.05); /* Vergrößerung beim Hover über die Bilder */
}
.requests {
    padding: 40px 20px;
}

.requests h2 {
    text-align: center;
    margin-bottom: 20px;
}

.request-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.request-item {
    max-width: 700px;
}
.request-item:hover {
    transform: scale(1.01); /* Leichte Vergrößerung beim Hover */
}

.request-list .request-item, #own-request {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

#contents {
    text-align: center;
    background: antiquewhite;
    padding: 1em;
}
footer {
    background-color: #333; /* Dark background for footer */
    color: white; /* White text for contrast */
    text-align: center; /* Centered text */
    padding: 30px 0; /* More padding for a balanced look */
    position: relative; /* Ensures footer is positioned correctly */
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.5); /* Subtle shadow for depth */
}

footer p {
    color: #fff; /* Maintain white color for paragraph text */
    line-height: 1.8; /* Improved line spacing for readability */
    margin: 0; /* Reset margin for paragraphs */
    padding: 0 15px; /* Add some padding on left and right */
}

footer a {
    color: #9d9c97; /* Bright color for links to stand out */
    text-decoration: none; /* Remove underline from links */
    transition: color 0.3s; /* Smooth transition for hover effect */
}

footer a:hover {
    color: #9d9c97; /* Change color on hover for a visual effect */
    text-decoration: underline; /* Optional underline effect on hover */
}

p {
    color: #333; /* Text color */
    line-height: 1.6; /* Improve line spacing */
    margin-bottom: 15px; /* Space between paragraphs */
    margin-left: 50px;
}

#own-request {
    padding: 40px 20px;
    text-align: left;
    width:500px;
}
#own-request-container {
    text-align: center;
    display: flex;
    justify-content: center;
}

.dummy-notice {
    color: #FFA500; /* Orange */
    font-style: italic;
    font-weight: bold;
    margin: 10px 0; /* Abstand nach oben und unten */
    opacity: 0.8; /* Leichte Transparenz */
}