.header-container {
    display: flex; /* Place elements in a row */
    align-items: center; /* Vertically align items */
    justify-content: flex-start; /* Align to the left */
    gap: 10px; /* Add space between the rectangle and text */
    position: relative; /* Relative positioning for further control */
    margin-bottom: 30px; /* Add space below the header-container to avoid overlap */
}
.rectangle {
    flex-shrink: 0;
    width: 274px; /* Width of the rectangle */
    height: 120px; /* Height of the rectangle */
    background-color:yellow; /* Rectangle background color */
    color: #031633; /* Text color */
    display: flex; /* Allows centering text */
    justify-content: center; /* Horizontal centering */
    align-items: center; /* Vertical centering */
    border-radius: 300px; /* Optional: rounded corners */
    font-size: calc(5vw + 10px); /* Dynamically adjusts font size */
    font-size: 82px; /* Text size */
    font-weight: bold;
    font-family:Send Flowers; /* Font family */
    text-align: center; /* Text alignment */
    margin-top: 0; /* Prevent floating above text */
}

/* Header Text Styling */
.header-text {
    font-size: 24px; /* Default font size for text */
    font-family: "Source Serif Pro"; /* Font family */
    font-weight: 600; /* Semi-bold */
    color: #031633; /* Text color */
    flex-grow: 1; /* Allow header text to grow and fill available space */
    text-align: center; /* Center header text */
    padding-left: 20px; /* Ensure space between the rectangle and header text */
}

/* Mobile Responsive - Shrink rectangle and change layout */
@media (max-width: 768px) {
    .header-container {
        flex-direction: column; /* Stack the items vertically */
        justify-content: center; /* Center items in column layout */
        align-items: center; /* Center items */
    }

    .rectangle {
        width: 205px; /* 50% of original width */
        height: 90px; /* 50% of original height */
        font-size: 61px; /* Scale down font size proportionally */
        position: relative; /* Move rectangle to the center on small screens */
        margin-top: 20px; /* Add spacing from top */
    }

    .header-text {
        font-size: 18px; /* Slightly smaller text size */
        text-align: center; /* Center-align text under rectangle */
    }
}

/* Very small screens or portrait layout */
@media (max-width: 480px) {
    .rectangle {
        width: 137px; /* Further reduce size for mobile */
        height: 60px;
        font-size: 41px;
    }

    .header-text {
        font-size: 16px;
    }
}


body {
    background-color: #BCFEFF;
}


.material-symbols-outlined.black-icon {
    color:black;
    font-size:14px;
    font-weight: 600;
}

.back-button {
    position: absolute; /* Position the button absolutely within the container */
    top: 100px; /* Adjust spacing from the top */
    right: 10px; /* Adjust spacing from the right */
    background-color: yellow; /* Rectangle background color */
    border-radius: 300px; /* Optional: rounded corners */
    border-color: yellow;
    width: 12vw;
    height: 5vw;
    border: none; /* Remove border */
    display: flex; /* Align children */
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
    font-family: "Inter Bold", sans-serif; /* Font family */
}
/* Style the link inside the button */
.back-button a {
    text-decoration: none; /* Remove underline */
    color: #000; /* Black text color */
    font-weight: bold;
    font-size: 3vw;
    text-align: center;
}
/* Media Query for smaller screens */
@media screen and (max-width: 768px) {
    .back-button {
        top: 20px; /* Move the button closer to the top */
        right: 10px; /* Keep it aligned to the right */
        width: 15vw; /* Slightly increase width for mobile screens */
        height: 6vw; /* Slightly increase height for mobile screens */
        margin-right: 20px; /* Reduce right margin for smaller screens */
    }

    /* Adjust text size for smaller screens */
    .back-button a {
        font-size: 4vw; /* Increase font size slightly for readability on small screens */
    }
}

/* Mobile Responsive - Shrink rectangle and change layout */
@media (max-width: 768px) {
    .header-container {
        flex-direction: column; /* Stack the items vertically */
        justify-content: center; /* Center items in column layout */
        align-items: center; /* Center items */
    }

    .rectangle {
        width: 205px; /* 50% of original width */
        height: 90px; /* 50% of original height */
        font-size: 61px; /* Scale down font size proportionally */
        position: relative; /* Move rectangle to the center on small screens */
        margin-top: 20px; /* Add spacing from top */
    }

    .header-text {
        font-size: 18px; /* Slightly smaller text size */
        text-align: center; /* Center-align text under rectangle */
    }


}

/* Very small screens or portrait layout */
@media (max-width: 480px) {
    .rectangle {
        width: 137px; /* Further reduce size for mobile */
        height: 60px;
        font-size: 41px;
    }

    .header-text {
        font-size: 16px;
    }

}


body {
    background-color: #BCFEFF;
}


.material-symbols-outlined.black-icon {
    color:black;
    font-size:14px;
    font-weight: 600;
}

h1 {
    font-size: 4vw;
    text-align: center;
    font-family: "Inter", sans-serif;
    font-weight:800;
}

.gallery > div {
    align-self: start; /* Ensures all items in the grid align at the top */
}
.gallery {
    display: grid;
    grid-template-areas:
        "a b c"
        "d e f"
        ". . g"; /* Last image under the first column */
    gap: 20px; /* Maintain spacing */
}

.gallery > div:nth-child(1) { grid-area: a; }
.gallery > div:nth-child(2) { grid-area: b; }
.gallery > div:nth-child(3) { grid-area: c; }
.gallery > div:nth-child(4) { grid-area: d; }
.gallery > div:nth-child(5) { grid-area: e; margin-top: 40px; }
.gallery > div:nth-child(6) { grid-area: f; margin-top: 60px; }
.gallery > div:nth-child(7) { grid-area: g; margin-top: 20px; }


.gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
    gap: 20px; /* Space between images */
    max-width: 90%; /* Maintain page margins on left and right */
    margin: auto; /* Center the grid horizontally */
    grid-auto-rows: auto; /* Automatically adjust row heights */
    position: relative;
}


.image-text-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.image-text-container p {
    font-size: 24px;
    margin-bottom: 10px; /* Space between text and image */
    font-weight: 600;
}

.image-text-container img {
    width: 100%;
    height: auto;
    border-radius: 5px;
}

/* First row alignment */
.gallery > div:nth-child(1),
.gallery > div:nth-child(2),
.gallery > div:nth-child(3) {
    align-self: start;
}


.gallery > div:nth-child(2) .image-text-container p {
    transform: translateY(10px) !important;
}




/* Adjustments for the second row */
.gallery > div:nth-child(4) {
    margin-top: 30px;
    transform: translateY(-40px);
}

.gallery > div:nth-child(5) {
    margin-top: 60px;
    transform: translateY(-320px); /* Align neatly in a puzzle-like way */
}

.gallery > div:nth-child(6) {
    margin-top: 80px;
    transform: translateY(-160px);
}

/* Last image neatly below the leftmost image of the second row */
.gallery > div:nth-child(7) {
    grid-column: 3; /* Place it under the first column */
    margin-bottom: 120px; /* Adjust the spacing for consistency */
    transform: translateY(-680px);
}


    .brun {
        transform: translateY(-940px) translateX(-50px) scaleX(0.92); /* Squeeze by 10% */
        max-width: 90%;
        margin: 0 auto; /* Center the element horizontally */
    }


/* Responsive adjustments */
@media (max-width: 768px) {
    .gallery {
        grid-template-columns: repeat(2, 1fr); /* 2 columns for smaller screens */
    }

    .gallery > div:nth-child(7) {
        grid-column: span 2; /* Center the last item */
    }
}

@media (max-width: 480px) {
    .gallery {
        grid-template-columns: 1fr; /* 1 column for very small screens */
    }

    .gallery > div:nth-child(7) {
        grid-column: span 1; /* Adjust centering for mobile */
    }
}



.brun {
    text-align: center; /* Centers inline elements within the block */
    margin-top: 20px; /* Adjust positioning of the brun container */
}

.brun .material-symbols-outlined {
    display: inline-block; /* Ensure the symbol behaves as a block element */
    font-size: 24px; /* Adjust icon size */
    margin-top: 10px; /* Space between the image and the icon */
    horiz-align: center; /* Aligns the symbol to its container */
}