.introduction-banner-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.introduction-logo {
    position: absolute;
    top: 11%;
    left: 15%;
    width: 10vw;
    aspect-ratio: 181 / 164;
    object-fit: contain;
    transform: translate(-50, -50);
}

.introduction-title {
    position: absolute;
    top: 25%;
    left: 45%;
    transform: translate(-50%, -50%);
    width: 30vw;
    aspect-ratio: 792 / 178;
}

.introduction-bg {
    position: absolute;
    aspect-ratio: 2560 / 3447;
    left: 50%;
    top: 50%;
    transform: translate(-50%, 5%);
    width: 100.5% !important;
    max-width: 100.5% !important;
}

.introduction-description-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
    flex-direction: column;
}

.introduction-description-right,
.introduction-description-left {
    width: 100%;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
}

.introduction-description-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.introduction-description-left {
    margin-top: -2%;
}

.introduction-description-right {
    padding-left: 1rem;
}

.introduction-description-left-img {
    aspect-ratio: 1230 / 1130;
    width: 100vw;
}

.introduction-description-right-img {
    aspect-ratio: 1072 / 1021;
    width: 100vw;
}

.introduction-description-right-img-tree {
    position: absolute;
    z-index: -1;
    top: 74%;
    left: 35%;
    transform: translate(-50%, -50%);
/*    filter: drop-shadow(0px -2px 2px rgba(0, 0, 0, 0.8));*/
    aspect-ratio: 1038 / 497;
    width: 100vw;
}

.introduction-description-container {
    position: relative;
    margin-top: -65%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 70%;
    align-self: center;
}

.introduction-description-title {
    position: relative;
    width: 100%;
    align-self: center;
    aspect-ratio: 544 / 384;
}

.introduction-text-wrapper {
    font-size: 10px;
    font-family: var(--font-base);
    text-align: justify;
    align-self: center;
}

.introduction-description-container p {
    margin: 0 !important;
}

.introduction-text-subtitle {
    font-weight: 700;
    text-transform: uppercase;
}

/* Small (≥576px) */
@media (min-width: 576px) {
    /* Styles for small devices */

}


/* Medium (≥768px) */
@media (min-width: 768px) {
    /* Styles for medium devices */

    .introduction-description-wrapper {
        flex-direction: row;
    }

    .introduction-description-left-img,
    .introduction-description-right-img,
    .introduction-description-right-img-tree {
        width: 50vw;
    }

    .introduction-description-right {
        margin-left: 0%;
        padding-left: 0;
    }

    .introduction-description-left {
        margin-top: -5%;
    }
}

/* Large (≥992px) */
@media (min-width: 992px) {
    /* Styles for large devices */
    .introduction-description-left {
        width: 50%;
    }

    .introduction-description-right {
        width: 50%;
        margin-left: -5%;
    }

    .introduction-description-container {
        width: 60%;
    }

    .introduction-description-left-img,
    .introduction-description-right-img,
    .introduction-description-right-img-tree {
        width: 100vw;
    }
}

/* Extra Large (≥1200px) */
@media (min-width: 1200px) {
    /* Styles for extra-large devices */
    .introduction-description-container {
        margin-top: -70%;
    }

    .introduction-description-right {
        margin-top: 5%;
        width: 50%;
        margin-left: -5%;
    }

    .introduction-description-left {
        width: 50%
    }

    .introduction-description-container {
        width: 60%;
    }
}

/* XXL (≥1400px) */
/*@media (min-width: 1400px) {*/
/* Styles for XXL devices */
/*.introduction-description-right {
        width: 50%;
        margin-left: -5%;
    }

    .introduction-description-left {
        width: 50%
    }

    .introduction-description-container {
        width: 60%;
    }
}*/

/* XXL (≥1920px) */
/*@media (min-width: 1920px) {
    .introduction-description-right {
        margin-left: 0;
    }
}*/
