.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;
}


/* Parent container to spread out all icon-button pairs */
.button-container {
    display: flex; /* Enable flexbox for layout */
    flex-wrap: wrap; /* Ensures wrapping on smaller screens */
    gap: 1vw; /* Adds spacing between elements */
    justify-content: center; /* Space out pairs evenly */
    align-items: center;
    margin-top: 5vw; /* Set a fixed margin for consistent positioning */
}

/* Each pair of icon and button */
.icon-button-pair {
    display: flex; /* Enable flexbox for alignment */
    flex-direction: column; /* Stack icons above buttons */
    align-items: center; /* Center align icon and button */
    text-align: center;
    max-width: 20vw; /* Adjust max-width for proportional scaling */
    }


/* Icons styling */
.material-symbols-outlined {
    font-size: 5vw; /* Size of the icon */
    color:#1F1280;
}

/* Buttons styling */
button {
    width: 18vw; /* Button width */
    height: 4vw; /* Button height */
    background-color: #5FDF30; /* Background color */
    border: none; /* Remove border */
    border-radius: 1vw; /* Optional: Rounded corners */
    font-size: 1.5vw; /* Font size */
    font-family: "Inter", sans-serif;
    font-weight: 600;
    color: black; /* Button text color */
}

.icon-button-pair button a {
    text-decoration: none;
    color: #000; /* Text color */
}

.icon-button-pair p {
    font-size: 1.2vw; /* Smaller text size */
    text-align: left;
    margin: 0;
    word-wrap: break-word; /* Ensures text wraps if too long */

}

@media (max-width: 768px) {
    .button-container {
        flex-direction: column; /* Stacks all items in a column */
        gap:3vw;
        align-items: center;

    }

    .icon-button-pair {
        max-width:70%;
    }
    button {
        width: 50vw; /* Larger size for mobile */
        height: 13vw;
        font-size: 5vw;
    }

    .icon-button-pair p {
        font-size: 4.5vw; /* Larger text size */
        width: 50vw; /* Matches button width */
    }

    .material-symbols-outlined {
        font-size: 5vw; /* Size of the icon */
        color:#1F1280;}

    @media (max-width: 480px) {
        .button-container {
            flex-direction: column; /* Stack buttons when screen is really small */
        }
        .icon-button-pair {
            font-size: small;
        }
    }
}

img {
    max-width: 100%; /* Ensures the image doesn't exceed the container's width */
    height: auto; /* Maintains the aspect ratio */
}

footer {
    text-align: center;
    font-size: 16px;
}