/* Basic styles for the background image */
.main-background-image {
    position: relative;
    background: url('../images/main/main_bg_01.webp') no-repeat top center;
    background-size: cover; /* Zoom out by increasing the size slightly */
    background-attachment: fixed;

    height: 100vh; /* Full viewport height */
    width: 100vw; /* Full viewport width */
   
    color: white; /* Ensure text is readable over the image */
    overflow: hidden; /* Prevent scrollbars */
    display: flex;
    justify-content: center;
    text-align: center;

    align-items: flex-end;
}

/* Styles for the content overlay */
.overlay-content {
    position: absolute;
    bottom: 12.5vh; /* Position it from the bottom */
    background-color: rgba(0, 0, 0, 0.75); /* Semi-transparent background for better readability */
    background-size: cover;
    padding: 20px;
    border-radius: 10px;
    max-width: 90%; /* Ensure it's mobile-friendly */
    width: 600px; /* Set a fixed width for larger screens */
    box-sizing: border-box;

}

.main-title {
    font-family: GGTitle, Arial, sans-serif;
    color: #FFA500;
    font-size: 3em; /* Equivalent to 32px */
    
    @media (max-width: 768px) {
        font-size: 1.125em; /* Equivalent to 18px */
    }
}

/* Button styles */
button {
    background-color: #ffcc00; /* Adjust this to match your branding */
    border: none;
    padding: 10px 20px;
    color: black;
    font-size: 1em;
    cursor: pointer;
    border-radius: 5px;
}

button:hover {
    background-color: #ffaa00; /* Adjust hover color to match your branding */
}

/* Responsive design */
@media (max-width: 600px) {
    .overlay-content {
        width: 100%;
        padding: 10px;
    }

    button {
        width: 100%;
    }
}