/* Reset default styles for clean layout */
body, ul, li {
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-family: "Arial";
    font-size: 18px;
    color: #333; /* Charcoal gray text color */
    line-height: 1.6; /* Improve line spacing for readability */
}

html,
    body {
        margin: 0;
        padding: 0;
    }

.main-content {
    width: calc(100% * (3 /4));
    margin: 0 auto 40px;
}

/* Style for the eye-catch section */
.eye-catch {
    display: flex; /* Lay out the image and text side by side */
    align-items: center; /* Vertically align the content */
    justify-content: center; /* Horizontally center the content */
    margin: 40px 0 0 0; /* Add some margin to give space around this section */
    padding: 20px;
}

.eye-catch img {
    max-width: 200px; /* Set the image size */
    border-radius: 10px; /* Make the image round */
    margin-right: 20px; /* Add space between the image and the text */
    object-fit: cover; /* Ensure the image is cropped to fit within the size */
}

/* Style for the banner */
#banner {
    background-image: url("../assets/images/NYC.jpeg");
    background-size: cover; /* Ensures the image covers the entire area */
    background-position: center; /* Centers the image */
    background-repeat: no-repeat; /* Prevents tiling of the image */
    height: 300px; /* Set a height for the banner */
    width: 100%;
    position: relative;
}

#banner .content h1 {
    font-family: "Arial";
    color: white;
    font-size: 40px;
    position: absolute;
    bottom: 20px;
    left: 20px;
    border: 2px solid white;
    padding: 5px; /* Optional: Adds spacing inside the border */
}

/* Header and navigation container */
#header {
    background-color: #f8f9fa; /* Light gray background */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

.navigation {
    display: flex;
    justify-content: center; /* Center align the nav */
    padding: 1em 0;
}

.navigation .menu {
    display: flex;
    gap: 2em; /* Spacing between main menu items */
}

.menu li {
    position: relative; /* Needed for submenu positioning */
    font-family: Arial;
    font-size: 1rem;
    text-transform: uppercase;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s ease;
}

.menu li a {
    text-decoration: none;
    color: inherit;
}

.menu li:hover {
    color: #003874; /* Change to a blue shade on hover */
}

/* Submenu styling */
.menu li .menu {
    display: none; /* Hidden by default */
    position: absolute;
    top: 100%; /* Position submenu below the parent */
    left: 0;
    background-color: #ffffff; /* White background */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Subtle shadow */
    padding: 0.5em 0;
    z-index: 10;
    min-width: 200px; /* Ensure enough width for submenu items */
}

.menu li .menu li {
    padding: 0.5em 1em;
    text-transform: none;
    font-weight: normal;
}

.menu li .menu li:hover {
    background-color: #f1f1f1; /* Light gray background on hover */
    color: #003874; /* Match hover color */
}

/* Show submenu on hover */
.menu-item-expanded:hover .menu {
    display: block; /* Display submenu */
}

/* Interests Section Styling */
#interests {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center the entire row */
    align-items: center; /* Align items to the top */
    padding: 0px 0 40px 0;
    background-color: #ffffff; /* Optional: background for the section */
}

#interests ul {
    list-style: none; /* Remove bullets from the list */
    display: flex;
    gap: 60px; /* Space between the items */
    padding: 0;
    margin: 0;
}

#interests li {
    text-align: center; /* Center align each item */
}

#interests a {
    text-decoration: none; /* Remove underline from links */
    color: black; /* Text color */
}

.interest-header {
    text-align: center; /* Center the header text */
    margin-top: 0px; /* Add space above the header */
    padding: 0px; /* Add some padding inside the section */
}

.interest-header h1 {
    font-family: "Arial"; /* Match the font style */
    font-size: 36px; /* Adjust font size for visibility */
    color: #333; /* Use a neutral dark gray for text */
    border-bottom: 2px solid #ccc; /* Add a decorative border above */
    padding-top: 10px; /* Add space between the border and the text */
    text-transform: uppercase; /* Make the text uppercase for emphasis */
    letter-spacing: 2px; /* Add spacing between letters for style */
}

.interest-item {
    border: 2px solid #ccc; /* Border for each block */
    padding: 25px;
    transition: transform 0.3s, border-color 0.3s; /* Hover effects */
    display: flex;
    flex-direction: column; /* Stack content vertically */
    align-items: center; /* Center items inside the block */
    justify-content: space-between; /* Distribute space evenly */
    width: 250px; /* Set a fixed width */
    height: 300px; /* Set a fixed height */
    box-sizing: border-box; /* Include padding/borders in the size */
}

.interest-item:hover {
    transform: scale(1.15); /* Slight zoom on hover */
    border-color: #003874; /* Change border color on hover */
}

.interest-item img {
    width: 90px; /* Adjust icon size */
    height: 90px;
    margin-bottom: 40px; /* Space between the icon and text */
    margin-top: 50px;
}

.interest-item h3 {
    font-size: 20px; /* Adjust text size */
    font-family: "Arial";
    color: #003874;
    margin: 0; /* Remove default margin */
}

.interest-item p {
    font-size: 14px; /* Paragraph size */
    font-family: "Arial";
    color: rgb(118, 118, 118);
    text-align: center; /* Center-align the text */
    margin: 0; /* Remove default margins */
}
.image-and-quote {
    background-image: url("../assets/images/quote-background.jpeg"); /* Light background for contrast (optional) */
    height: 300px;
    width: 100%;
    background-size: cover;
    background-position: 0% 45%;
    position: relative;
    /*box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

.image-and-quote .text-content {
    display: flex; /* Create a vertical layout for the quote and attribution */
    flex-direction: column; /* Stack the quote and attribution vertically */
    position: absolute;
    bottom: 20px;
    right: 20px;
}

.image-and-quote .quote {
    font-size: 44px; /* Large text for the quote */
    color: #f1f1f1; /* Gray color for the text */
    font-style: italic; /* Italicize the quote for emphasis */
    margin: 0; /* Remove default paragraph margins */
}

.image-and-quote .quote-attribution {
    font-size: 14px; /* Slightly smaller font for the attribution */
    color: #f1f1f1; /* Same gray color as the quote */
    margin-top: 10px; /* Space between the quote and the attribution */
    text-align: right; /* Align attribution to the right */
}