body {
    font-family: sans-serif;
    margin: 0;
    background-color: #f4f7f6; /* A very light gray for the overall page background */
}

header {
    background-color: #005f73; /* A deep teal/blue for the header */
    color: white;
    padding: 1em 0;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    position: relative; /* Needed for z-index to work with nav */
    z-index: 1002; /* Ensure header is above nav dropdown */
}

nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    background-color: #444;
    text-align: center;
}

nav ul li {
    display: inline;
}

nav ul li a {
    display: inline-block;
    color: white;
    padding: 1em;
    text-decoration: none;
}

nav ul li a:hover {
    background-color: #555;
}

/* Styles for hamburger menu */
.hamburger-menu {
    display: none; /* Hidden by default on larger screens */
    background: none;
    border: none;
    color: white;
    font-size: 2em; /* Make hamburger icon larger */
    cursor: pointer;
    padding: 0.5em;
    position: absolute; /* Position it relative to nav */
    right: 1em;
    top: 0.5em; /* Adjust as needed */
    z-index: 1001; /* Ensure it's above other nav elements */
}

.hamburger-menu .bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    background-color: white;
    transition: all 0.3s ease-in-out;
}

.container {
    padding: 20px;
}

h1 {
    text-align: center;
}

.hero {
    background: url("../images/ballon-background.jpg") no-repeat center center;
    background-size: cover;
    color: white;
    padding: 50px 20px;
    text-align: center;
}

.hero h2 {
    font-size: 2.5em;
}

.hero p {
    font-size: 1.2em;
}

/* Hero section for Cities page */
.hero-cities {
    background: url("../images/ohio-skyline.jpg") no-repeat center center;
    background-size: cover;
    color: white;
    padding: 60px 20px; /* Adjusted padding */
    text-align: center;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Add text shadow for better readability */
}

.hero-cities h2 {
    font-size: 3em; /* Larger heading */
    margin-bottom: 0.5em;
}

.hero-cities p {
    font-size: 1.3em; /* Slightly larger paragraph text */
    margin-bottom: 0;
}

/* Hero section for Attractions page */
.hero-attractions {
    background: url("../images/attractions-background.jpg") no-repeat center center; /* Updated image path */
    background-size: cover;
    color: white;
    padding: 60px 20px;
    text-align: center;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

.hero-attractions h2 {
    font-size: 3em;
    margin-bottom: 0.5em;
}

.hero-attractions p {
    font-size: 1.3em;
    margin-bottom: 0;
}

/* Hero section for Reviews page */
.hero-reviews {
    background: url("../images/review-background.jpg") no-repeat center center; /* Updated image path */
    background-size: cover;
    color: white;
    padding: 60px 20px;
    text-align: center;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

.hero-reviews h2 {
    font-size: 3em;
    margin-bottom: 0.5em;
}

.hero-reviews p {
    font-size: 1.3em;
    margin-bottom: 0;
}

.features {
    display: flex;
    justify-content: space-around;
    padding: 40px 20px; /* Increased padding for better spacing */
    flex-wrap: wrap; /* Allow features to wrap on smaller screens if needed */
    background-color: #f0f8ff; /* Light AliceBlue background for the features container */
}

.feature {
    background-color: #ffffff; /* White background for each feature */
    padding: 25px;
    margin: 15px;
    border-radius: 10px;
    text-align: center;
    width: calc(33.333% - 30px); /* Adjust width considering margin, for 3 items per row */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* A slightly more pronounced shadow */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    border: 1px solid #d0e0f0; /* Light blue border */
}

.feature:hover {
    transform: translateY(-8px) scale(1.02); /* Lift and slightly scale up on hover */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18); /* Enhanced shadow on hover */
}

.feature h3 {
    color: #007bff; /* A vibrant blue for headings, matching a sky theme */
    margin-bottom: 15px;
}

.feature p {
    color: #555; /* Dark gray for text for readability */
    font-size: 0.95em;
    line-height: 1.6;
}

.feature .btn { /* Assuming you might add a .btn class to links inside features */
    display: inline-block;
    margin-top: 15px;
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.feature .btn:hover {
    background-color: #0056b3; /* Darker blue on hover */
}

footer {
    background-color: #003f5c; /* A darker, complementary blue for the footer */
    color: white;
    text-align: center;
    padding: 1.5em 0; /* Slightly more padding */
    /* position: relative; // Removed as it might not be needed if content pushes it down */
    /* bottom: 0; // Removed */
    width: 100%;
    margin-top: 40px; /* Add some space above the footer */
}

/* New styles for content sections: cities, attractions, reviews */
.city-list, .attraction-list, .review-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin-top: 20px;
}

.city-item, .attraction-item, .review-item {
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    margin: 10px;
    width: calc(33.333% - 40px); /* Adjust for 3 items per row, considering padding and margin */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.city-item:hover, .attraction-item:hover, .review-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.city-item h3, .attraction-item h3, .review-item h3 {
    color: #005f73; /* Theme color for headings */
    margin-top: 0;
}

.review-item p:last-of-type { /* For star ratings or similar */
    font-weight: bold;
    color: #e8a800; /* Gold color for ratings */
}

/* Responsive adjustments for content items */
@media (max-width: 992px) { /* Medium devices (tablets, less than 992px) */
    .city-item, .attraction-item, .review-item {
        width: calc(50% - 40px); /* 2 items per row */
    }
}

@media (max-width: 600px) { /* Small devices (landscape phones, less than 768px) */
    .city-item, .attraction-item, .review-item {
        width: calc(100% - 40px); /* 1 item per row */
    }

    .features {
        flex-direction: column;
        align-items: center;
    }

    .feature {
        width: calc(100% - 30px); /* Full width on smaller screens, accounting for margin */
        margin-bottom: 20px;
    }

    nav ul {
        display: none; /* Hide nav links by default on small screens */
        flex-direction: column;
        width: 100%;
        background-color: #444; /* Ensure background for dropdown */
        position: absolute; /* Position dropdown below header */
        top: 60px; /* Adjust based on header height */
        left: 0;
        z-index: 1000;
    }

    nav ul.active {
        display: flex; /* Show nav links when active */
        z-index: 1003; /* Ensure dropdown is above header */
    }

    nav ul li {
        display: block; /* Stack links vertically */
        width: 100%;
        text-align: left; /* Align text to the left */
    }

    nav ul li a {
        display: block; /* Make links take full width */
        padding: 1em 2em; /* Adjust padding for dropdown */
        border-bottom: 1px solid #555; /* Separator for links */
    }
    nav ul li:last-child a {
        border-bottom: none;
    }

    .hamburger-menu {
        display: block; /* Show hamburger on small screens */
    }

    /* Added for green background on small screens */
    body {
        background-color: green;
    }
}