/* General body settings */
body, html {
    height: 100%;
    margin: 0;
    font-family: 'Roboto', sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: url('/images/beach-ocean.jpg') no-repeat center center fixed;
    background-size: cover;
    overflow-x: hidden;
}

/* Overlay container styling */
.overlay {
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 20px;
    padding: 40px;
    max-width: 65%;
    width: 80%;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    border: 4px solid #e8a047;
    text-align: center;
    margin: 0 auto;
}

/* Content inside the overlay */
.content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* "JOIN US!" Section - Updated to Raleway and color #004D7C */
.join-us h2 {
    font-family: 'Raleway', sans-serif;
    font-size: 25pt;
    color: #004D7C; /* New color */
    margin-bottom: 35px;
}

/* Logo styling */
.logo {
    max-width: 85%;
    height: auto;
    margin-top: 30px;
    margin-bottom: 30px;
}

/* Event details section */
.title-area .event-date {
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    font-size: 19pt;
}

.title-area .event-time {
    font-size: 18pt; /* Increased font size for event time */
}

.title-area .venue {
    font-family: 'Raleway', sans-serif;
    font-size: 17pt;
    font-weight: 600;
}

.details-area {
    font-family: 'Raleway', sans-serif;
    font-size: 15pt;
}

.benefactor-area {
    margin: 20px 0;
}

/* Benefiting logo (2/3 the size of Priority Center logo) */
.benefactor-area .benefiting-logo {
    width: 192px; /* 2/3 the width of Priority Center logo */
    height: auto;
    margin-top: 10px;
}

/* Reduced spacing between Benefiting and Priority Center logos */
.benefactor-area .priority-center-logo {
    margin-top: 10px;
}

/* Increased spacing above the button */
.benefactor-area .event-button {
    margin-top: 30px;
}

/* Button styling */
.event-button {
    display: block;
}

/* Copyright area */
.copyright-area {
    font-size: 10pt;
    color: #999;
    text-align: center;
    margin-top: 20px;
}

/* Responsive styles for tablets (max-width: 768px) */
@media (max-width: 768px) {
    .overlay {
        padding: 20px;
        max-width: 90%; /* Allow for better fitting on tablets */
    }
    .logo {
        width: 90%; /* Slightly smaller logo for tablet screens */
    }
    .join-us h2 {
        font-size: 22pt; /* Reduced font size for "JOIN US!" */
    }
    .event-date {
        font-size: 18pt;
    }
    .event-time {
        font-size: 16pt;
    }
    .venue {
        font-size: 16pt;
        font-weight: 600;
    }
    .benefactor-area .benefiting-logo {
        width: 160px; /* Adjust logo size for tablet */
    }
    .benefactor-area .event-button {
        margin-top: 25px; /* Adjust button margin for better spacing */
    }
}

/* Responsive styles for mobile (max-width: 480px) */
@media (max-width: 480px) {
    .overlay {
        padding: 15px;
        max-width: 100%; /* Full width for mobile */
        width: 100%;
    }
    .logo {
        width: 80%; /* Smaller logo for mobile */
    }
    .join-us h2 {
        font-size: 20pt; /* Further reduced font size for "JOIN US!" */
    }
    .event-date {
        font-size: 16pt;
    }
    .event-time {
        font-size: 15pt;
    }
    .venue {
        font-size: 15pt;
        font-weight: 600;
    }
    .benefactor-area .benefiting-logo {
        width: 130px; /* Adjust size for mobile */
    }
    .benefactor-area .event-button {
        margin-top: 20px; /* Maintain proper spacing for mobile */
    }
    .copyright-area {
        font-size: 9pt;
    }
}