.banner {
    /*width: 100%; !* or set to a fixed width *!*/
    height: calc(100svh - 6rem); /* or set to a fixed height, or 'auto' depending on content */
    background-image: url('./assets/image 30.png'); /* path to your image file */
    background-size: cover; /* cover, contain, or a fixed size (e.g., '100% 100%') */
    background-position: center; /* alignment of the background image */
    background-repeat: no-repeat; /* no-repeat, repeat, repeat-x, repeat-y */
    width: 100svw;
}

.banner-content {
    position: relative;
    top: 10svh;
    margin: 0 5rem;
}
.banner h1 {
    font-size: 5rem;
    color: #f4f4f4;
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    width: 70%;
    margin-bottom: 1rem;
}

.blue-barr {
    width: 50%;
    height: 0.5rem;
    background-color: #01C1DE;
}

.subtitle {
    margin-top: 1rem;
    color: #f4f4f4;
    font-size: 2rem;
    width: 50%;
}

.buttons-holder {
    display: flex;
    flex-direction: row;
    margin-top: 2rem;
    width: 50%;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}
.buttons-holder .button{
    width: 40%;
    margin: 0;
}

.button-holder .button span {
    font-size: 1.5rem;
}

@media screen and (max-device-width: 500px) {
    .banner {
        height: calc(100svh - 16rem); /* or set to a fixed height, or 'auto' depending on content */
    }
    .banner h1 {
        font-size: 8rem;
    }

    .subtitle {
        font-size: 3rem;
        width: 70%;
    }

    .buttons-holder {
        width: auto;
        margin-top: 5rem;
        gap: 5rem;
    }

    .buttons-holder .button {
        width: 100%;
        margin: 0;
    }

    .buttons-holder .button span {
        font-size: 3rem;
    }
}