.video-container {
    position: relative;
    height: 100vh;
    width: 100%;
}

video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.text-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2;
    
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20px;
}

.arcNavImg {
    position: sticky;
    width: 250px;
    height: 200px;
}

table {
    margin: 0;
}

td {
    position: sticky;
    padding: 10px;
}

table a {
    color: white;
    font-size: 1.5em;
    text-decoration: none;
}

body {
    background-color: #f0e68c;
}

/* New CSS for Family & Pride text */
.family-pride {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 25%; /* Take up 25% of the bottom half */
    color: white;
    font-size: 3em; /* Large font size */
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

#about-us{
    display: flex;
}
#about-us img{
    width: 400px;
    height: 533px;
    float: left;
    margin-right: 20px;
}

#about-us p{
    text-align: justify;
    font-size: 40px;
}

/* Event section styling - Larger size */
#quickEvents {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin: 40px 0; /* Larger margin for more space */
}

/* Event text on the left */
.event-text {
    width: 55%; /* Takes up 55% of the section width */
    font-size: 1.2em; /* Larger font size */
    padding-right: 30px;
}

/* Event images on the right */
.event-images {
    display: flex;
    flex-direction: row; /* Horizontally aligns the images */
    justify-content: space-between;
    gap: 30px; /* Larger gap between the images */
    width: 45%; /* Takes up 45% of the section width */
}

/* Each image box with an image and description */
.image-box {
    flex: 1;
    text-align: center; /* Center the text below each image */
}

/* Increase image size */
.image-box img {
    width: 150px; /* Wider image boxes */
    height: auto;
}

/* Larger description text under the images */
.image-box p {
    font-size: 1.1em; /* Larger font for the description */
    color: #333;
}

.stay-connected {
    padding: 20px;
    border-radius: 8px;
    max-width: 100%; /* Use full width */
    margin: 20px auto;
    display: flex;
    flex-wrap: wrap; /* Allows items to wrap in smaller screens */
    justify-content: space-between; /* Space items evenly */
}

.stay-connected h2 {
    width: 100%; /* Ensure the heading takes the full width */
    text-align: center;
    color: #333; /* Adjust text color to match your theme */
}

.form-group {
    flex: 1 1 30%; /* Allows input fields to grow and shrink */
    margin-right: 10px; /* Space between input fields */
}

.form-group:last-child {
    margin-right: 0; /* Remove margin for the last input */
}

.label {
    display: block;
    margin-bottom: 5px;
    color: #555; /* Adjust to match your theme */
}

input[type="text"],
input[type="email"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.submit-btn {
    background-color: #007BFF; /* Adjust button color to match your theme */
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    flex-basis: 100%; /* Make button full width */
    margin-top: 10px; /* Add space above the button */
}

.submit-btn:hover {
    background-color: #0056b3; /* Darker shade for hover effect */
}