/* Header Styling */
header {
    background: url('000006370006.jpg') no-repeat center center/cover; /* Original, reused */
    color: #d1e7ff; /* Light blue text for contrast */
    padding: 60px 0; /* Increase padding for larger header */
    text-align: center;
    position: relative;
}

/* Centered Text Box in Header */
.header-content { /* NEW: Reusable styling for headers */
    background-color: rgba(13, 30, 51, 0.8); /* Dark blue with transparency */
    color: #ffffff; /* White text */
    display: inline-block;
    padding: 20px 40px; /* NEW: Uniform padding for all headers */
    border-radius: 12px; /* Rounded corners */
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
}

/* Navigation Bar */
nav ul {
    background: #173a5e; /* Slightly lighter blue for navigation */
    overflow: hidden;
    color: #fff;
    padding: 0;
    text-align: center;
    margin: 0;
    list-style: none;
}

nav ul li {
    display: inline;
    padding: 15px;
}

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

/* About Section */
.about-container {
    display: flex;
    align-items: center;
    gap: 20px; /* Space between text and image */
    margin-top: 20px;
}

.about-container p {
    flex: 1; /* Text takes up remaining space */
    line-height: 1.8;
    font-size: 1.1em;
}

.about-container .headshot {
    width: 190px; /* Increase width */
    height: 240px; /* Reduce height slightly */
    border-radius: 50%; /* Makes it oval */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}


/* Main Content Section */
main {
    padding: 20px;
    background: #102a45; /* Darker blue for sections */
    color: #d1e7ff;
}

h1, h2 {
    color: #d1e7ff;
}

/* Footer */
footer {
    text-align: center;
    padding: 10px 0;
    background: #173a5e;
    color: #d1e7ff;
    margin-top: 20px;
}

/* Gallery Section */
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Increase min width for larger images */
    gap: 5px; /* Reduce the gap between images */
    margin-top: 20px;
}

.gallery img {
    width: 100%; /* Images fit within grid items */
    height: auto; /* Maintain aspect ratio */
    border-radius: 6px; /* Keep slight rounding for aesthetics */
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    cursor: pointer; /* Interactive pointer */
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* Smooth animations */
}

/* Hover Effect for Images */
.gallery img:hover {
    transform: scale(1.03); /* Slight zoom effect */
    box-shadow: 0 5px 8px rgba(0, 0, 0, 0.2); /* Stronger shadow on hover */
}