body {
    background: url('../images/bg_road.jpg') no-repeat center center fixed;
    background-size: cover; /* Scale the image to cover the entire viewport */
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif; /* Optional: Set a default font */
    color: #fff;
}

.container {
    background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent black */
    padding: 20px;
    border-radius: 10px; /* Optional: Rounded corners */
    margin: 20px auto;
    max-width: 900px; /* Optional: Limit the width of the content */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* Optional: Add a shadow for depth */
    color: #fff;

}

.my-logo {
    width: 200px; /* Limit the logo width */
    height: auto; /* Maintain aspect ratio */
    padding-top: 10px; /* Add some padding at the top */
}

/* Footer styling */
#footer {
    background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent black background */
    color: #fff; /* White text for contrast */
    text-align: center; /* Center-align the text */
    padding: 10px 20px; /* Add padding for spacing */
    font-size: 0.9rem; /* Slightly smaller font size */
    position: relative; /* Ensure it stays at the bottom of the content */
    margin-top: 20px; /* Add spacing above the footer */
    border-top: 1px solid rgba(255, 255, 255, 0.2); /* Subtle top border */
}

/* Ensure footer text is readable */
#footer p {
    margin: 5px 0; /* Reduce margin between paragraphs */
    line-height: 1.5; /* Improve readability */
}

/* Add a hover effect for links in the footer */
#footer a {
    color: #ffcc00; /* Highlight links with a gold color */
    text-decoration: none; /* Remove underline */
}

#footer a:hover {
    text-decoration: underline; /* Add underline on hover */
}

.event-calendar {
    margin: 20px 0;
}

/* Remove padding around the iframe container */
.mt-5 {
    margin-top: 2rem;
    padding: 0; /* Ensure no padding is applied */
    text-align: center;
}

/* Ensure the iframe takes up the full width of its container */
iframe {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: 600px; /* Set a default height */
    border: none;
    padding: 20px;
}

/* Style the referral links section */
.referral-links {
    margin-top: 20px;
    padding: 15px;
    background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent background */
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* Add a shadow for depth */
}

.referral-links a {
    display: inline-block;
    margin: 10px 5px;
    text-decoration: none;
    font-weight: bold;
}

/* Align the text and icon vertically */
a.btn span.material-symbols-outlined {
    vertical-align: middle; /* Align the icon with the text */
    margin-right: 5px; /* Add spacing between the icon and the text */
    font-size: 1.2em; /* Adjust the icon size if needed */
}

a.btn {
    display: inline-flex; /* Use Flexbox for better alignment */
    align-items: center; /* Vertically align the icon and text */
}

@media (max-width: 768px) {
    iframe {
        height: 600px; /* Adjust height for smaller screens */
    }

    .mt-5 h2 {
        font-size: 1.5rem; /* Adjust heading size for mobile */
    }

    .mt-5 p {
        font-size: 1rem; /* Adjust paragraph size for mobile */
    }
}