/* Parallax container setup */
#parallax-container {
    background-color: #0E202D;
    position: relative;
    width: 100vw;      /* Full viewport width */
    height: 150vh;     /* Full viewport height */
    top: 0;            /* No space above */
    overflow: hidden;  /* Hide anything that overflows */
}

/* Parallax image layers */
.parallax {
    position: absolute;
    width: 100%;       /* Full width */
    height: 100%;      /* Full height */
    background-size: cover;     /* Ensure images cover the full container */
    background-position: center center;  /* Keep the image centered */
    top: 0;
    left: 0;
    transition: transform 0.1s ease-out; /* Smooth movement */
}

/* Optional: adjust z-index to ensure proper layering */
.parallax:nth-child(1) {
    z-index: 1;
}

.parallax:nth-child(2) {
    z-index: 2;
}

.parallax:nth-child(3) {
    z-index: 3;
}

.parallax:nth-child(4) {
    z-index: 4;
}

.parallax:nth-child(5) {
    z-index: 5;
}

.parallax:nth-child(6) {
    z-index: 6;
}

/* Header styling */
.header {
    position: absolute; /* Position the header absolutely within the container */
    text-align: center;
    top: 52.5vh; /* Center the header vertically */
    left: 27%; /* Center the header horizontally */
    z-index: 3; /* Ensure it's above the parallax layers */
    display: flex;
    justify-content: center;
    align-items: center; /* Center the text vertically within the border */
    transition: transform 0.1s ease-out; /* Smooth transition as the header moves */
}

.header h1 {
    font-family: 'Brush Script MT', cursive; /* Use a web-safe cursive font */
    font-size: 5vh; /* Adjust the font size as needed */
    height: 10vh; /* Set a height for the border */
    width: 45vw; /* Set a width for the border */
    border: 0.5vw solid #0E202D;
    background-color: rgba(255, 255, 255, 0.8);
    display: flex;
    justify-content: center;
    align-items: center; /* Center the text vertically within the border */
}

@media (max-width: 600px) {
    #parallax {
        display: none; /* Hide parallax effect on small screens */
    }
}