/* This styles the entire page background and text */
body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    background-color: #f8f9fa;
    text-align: center;
    padding: 40px;
}

/* Let's give your main title a nice golf-course green color */
h1 {
    color: #2e8b57; 
}

/* This targets your logo and restricts its size */
img {
    max-width: 250px;
    height: auto;
    border-radius: 8px; /* Adds a subtle curve to the image corners */
}
/* Remove the default bullets and padding from the list */
nav ul {
    list-style-type: none;
    padding: 0;
    margin-top: 20px;
}

/* Make the list items sit side-by-side horizontally */
nav li {
    display: inline;
    margin: 0 15px;
}

/* Style the clickable links */
nav a {
    text-decoration: none; /* Removes the default underline */
    color: #333333; /* A dark gray color */
    font-weight: bold;
    font-size: 18px;
    padding: 8px 16px;
    border-radius: 5px;
    transition: background-color 0.3s; /* Makes the hover effect smooth */
}

/* Add a hover effect when the mouse moves over a link */
nav a:hover {
    background-color: #2e8b57; /* Uses your green theme color */
    color: white; /* Changes text to white so it's readable on green */
}
/* Center the form and give it a nice background card */
#contact {
    background-color: white;
    max-width: 500px;
    margin: 40px auto; /* Centers the box on the page */
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Adds a soft shadow behind the form */
}

/* Make sure the labels and inputs stack neatly on top of each other */
.form-group {
    margin-bottom: 20px;
    text-align: left; /* Aligns the text to the left inside the centered box */
}

label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
    color: #333;
}

/* Style the input boxes and the text area */
input[type="text"],
input[type="email"],
textarea {
    width: 100%; /* Makes the boxes fill the available space */
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-family: inherit; /* Uses the same font as the rest of your page */
    box-sizing: border-box; /* Ensures padding doesn't mess up the width */
}

/* Style the submit button to match your golf-green theme */
button {
    background-color: #2e8b57;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    width: 100%;
    transition: background-color 0.3s;
}

button:hover {
    background-color: #236b43; /* A slightly darker green for the hover effect */
}
/* This targets ONLY images that have the class "page-image" */
.page-image {
    max-width: 100%; /* Ensures it never overflows the screen */
    width: 800px; /* Lets it grow much larger than the logo */
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    margin-top: 20px;
}