html {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* 100% of the viewport height */
    margin: 0; /* Removes the default margin */
}

/* Ensures content pushes the footer down but can grow to fill available space */
.content-wrap {
    flex: 1; /* Takes up any available space */
}

/* Footer styles */
.footer {
    width: 100%;
    background-color: #4FAD5B; /* Example color */
    color: white;
    text-align: center;
    padding: 10px 0;
}

/* Hero Section */
.jumbotron {
    background-color: #4FAD5B;
    color: white;
    padding: 20px;
    text-align: center;
}

/* Override default primary color */
.jumbotron {
    background-color: #4FAD5B; /* Green color for hero section */
}
/* Button Styling for a Nicer and Smaller Email Button */
.btn-primary {
    padding: 6px 12px; /* Smaller padding */
    font-size: 0.8rem; /* Smaller text size */
    border-radius: 20px; /* Rounded corners for a nicer look */
    background-color: #4FAD5B; /* Corporate green color */
    border-color: #367a40; /* Slightly darker green for the border */
    transition: background-color 0.3s, border-color 0.3s; /* Smooth transition for hover effects */
}

.btn-primary:hover, .btn-primary:focus {
    background-color: #3d8c4a; /* Darker green on hover for visual feedback */
    border-color: #2e6b38; /* Even darker green for the border on hover */
}

/* Hero Section */
.jumbotron {
    background-color: #4FAD5B; /* Consistent with corporate color */
    margin-bottom: 0; /* Removes gap between hero and announcement section */
}

/* Announcement Section */
.announcement-section {
    padding: 40px 0; /* Sufficient padding for readability and balance */
    background-color: #ffffff; /* Provides a clean, contrasting background */
    border-top: 3px solid #4FAD5B; /* Continues the color theme */
}

/* Container within Announcement Section for consistent alignment */
.announcement-section .container {
    max-width: 800px;
    margin: auto;
    text-align: center; /* Aligns text to the center for focus */
}

/* Styling for headings and text within the announcement */
.announcement-section h2 {
    color: #333;
    font-size: 24px;
    margin-bottom: 15px; /* Tighter spacing between elements */
}

.announcement-section .club-name {
    font-size: 22px;
    color: #4FAD5B; /* Brand color for emphasis */
    font-weight: bold;
    margin-bottom: 20px;
}

.announcement-section p {
    color: #666;
    font-size: 16px;
    line-height: 1.6;
}

.announcement-section a {
    color: #4FAD5B;
    text-decoration: none; /* Keeps links clean */
}

.announcement-section a:hover,
.announcement-section a:focus {
    text-decoration: underline; /* Enhances usability on hover */
}