body {
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    padding: 0;
    background-color: white; /* Set background color to white */
    color: #333; /* Set text color to dark gray for better readability */
}

header {
    background-color: #40E0D0; /* Turquoise header background */
    color: white;
    padding: 10px 0;
}

.logo img {
    max-width: 100px; /* Adjust the size of the logo */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Make it block-level */
    margin: 0 auto; /* Center the logo */
}

nav {
    text-align: center;
}

nav ul {
    list-style: none;
    padding: 0;
}

nav ul li {
    display: inline; /* Horizontal navigation */
    margin: 0 15px;
}

nav ul li a {
    color: white; /* White text for links */
    text-decoration: none;
}

.hero {
    background-color: #20B2AA; /* Darker turquoise for hero section */
    text-align: center;
    padding: 50px 20px;
}

.hero h1 {
    font-size: 36px;
    color: white; /* White text for headings */
}

.btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: #40E0D0; /* Turquoise button */
    color: white;
    text-decoration: none;
    border-radius: 5px;
}

.btn:hover {
    background-color: #30B2A8; /* Darker turquoise on hover */
}

section {
    padding: 20px;
    margin: 20px;
    border: 1px solid #ccc; /* Light gray border */
    border-radius: 5px;
    background-color: #F0F8FF; /* Light turquoise background for sections */
}

.events {
    background-color: #E0FFFF; /* Lighter turquoise background for events */
}

.breakfast {
    background-color: #E0FFFF; /* Lighter turquoise background for breakfast */
}

.activity img {
    max-width: 100%; /* Responsive images */
    height: auto;
}

.signup {
    max-width: 600px; /* Max width for the signup section */
    margin: 40px auto; /* Center the section */
    padding: 20px;
    background: #E0FFFF; /* Light turquoise background */
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Slight shadow for depth */
}

.signup h2 {
    text-align: center; /* Center the signup title */
    color: #20B2AA; /* Darker turquoise for headings */
}

.signup form {
    display: flex;
    flex-direction: column; /* Stack form elements vertically */
}

.signup label {
    margin-bottom: 5px; /* Space between label and input */
}

.signup input,
.signup select {
    margin-bottom: 15px; /* Space between inputs */
    padding: 10px; /* Padding for input fields */
    border: 1px solid #ccc; /* Border for input fields */
    border-radius: 4px; /* Rounded corners */
}

.signup button {
    padding: 10px; /* Padding for the button */
    background: #40E0D0; /* Turquoise background */
    color: white; /* White text */
    border: none; /* Remove border */
    border-radius: 4px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor on hover */
}

.signup button:hover {
    background: #30B2A8; /* Darker turquoise on hover */
}

footer {
    background-color: #40E0D0; /* Turquoise footer background */
    color: white;
    text-align: center;
    padding: 10px 0;
}
/* Styles for the contact page */
.contact {
    max-width: 600px; /* Max width for the contact section */
    margin: 40px auto; /* Center the section */
    padding: 20px;
    background: #ecf0f1; /* Light background */
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.contact h1 {
    text-align: center; /* Center the contact title */
}

.contact form {
    display: flex;
    flex-direction: column; /* Stack form elements vertically */
}

.contact label {
    margin-bottom: 5px; /* Space between label and input */
}

.contact input,
.contact textarea {
    margin-bottom: 15px; /* Space between inputs */
    padding: 10px; /* Padding for input fields */
    border: 1px solid #ccc; /* Border for input fields */
    border-radius: 4px; /* Rounded corners */
}

.contact button {
    padding: 10px; /* Padding for the button */
    background: #3498db; /* Turquoise background */
    color: white; /* White text */
    border: none; /* Remove border */
    border-radius: 4px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor on hover */
}

.contact button:hover {
    background: #2980b9; /* Darker turquoise on hover */
}

.contact h2 {
    margin-top: 20px; /* Space above contact information */
}