/* Basic Setup */
body {
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #0d1a26; /* Deep Night Sky */
    color: #e6e6fa; /* Pale Lavender/Near White */
    line-height: 1.6;
}

/* Header (Hero Section) */
.hero-section {
    background-image: url('images/hero-bg.png'); /* Hero background image */
    background-size: cover;
    background-position: center;
    padding: 60px 20px; /* More padding for hero section */
    text-align: center;
    color: #fff;
    position: relative;
    overflow: hidden; /* Ensure content doesn't spill */
}

.hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5); /* Dark overlay for readability */
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
}

.hero-section h1 {
    font-family: 'Playfair Display', serif;
    font-size: 4.5em; /* Larger hero title */
    margin-bottom: 10px;
    letter-spacing: 5px;
    color: #ffd700; /* Moonlight Gold */
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
}

.hero-section p {
    font-size: 1.8em; /* Larger hero subtitle */
    font-style: italic;
    opacity: 0.9;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7);
    color: #999;
}

/* Main Content */
main {
    padding: 40px 20px;
    max-width: 900px;
    margin: 0 auto;
}

section {
    margin-bottom: 50px;
    padding: 30px;
    background-color: #1a3044; /* Section Background */
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

h2 {
    font-family: 'Playfair Display', serif;
    color: #93b7ff; /* Starry Blue */
    border-bottom: 2px solid #93b7ff;
    padding-bottom: 10px;
    margin-top: 0;
    margin-bottom: 20px;
}

/* About Section with Image */
#about.image-section {
    display: flex;
    flex-direction: row; /* Default for larger screens */
    align-items: center;
    gap: 30px;
}

#about .section-content {
    flex: 1;
    color: #528dc4;
}

#about .section-image {
    flex: 1;
    min-width: 250px; /* Ensure image doesn't get too small */
}

#about .section-image img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

/* Menu Section */
.menu-item {
    background-color: #0d1a26;
    padding: 15px;
    border-left: 4px solid #ffd700;
    margin-bottom: 15px;
    display: flex;
    align-items: center; /* Vertically align image and text */
    gap: 20px; /* Space between image and text */
    transition: background-color 0.3s;
}

.menu-item:hover {
    background-color: #2b4561;
}

.menu-image {
    flex-shrink: 0; /* Prevent image from shrinking */
    width: 100px; /* Fixed width for menu item images */
    height: 100px; /* Fixed height */
    overflow: hidden;
    border-radius: 50%; /* Make menu images circular */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.menu-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover the area without distortion */
}

.menu-details {
    flex-grow: 1;
}

.menu-details h3 {
    margin: 0;
    color: #fff;
    font-size: 1.1em;
}

.menu-details p {
    margin: 5px 0 10px 0
}

footer {
    display: block;
    margin: 60px auto;
    text-align: center;
}
footer li {
    display: inline-block;
}