.section-about-banner img {
    display: block;
    width: 100%;
    height: 100%;
    margin-top: -3%;
    z-index: -1;
}

.section-about-banner {
    position: relative;
    height: 56.25vw;
}

.about-banner-text {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    position: relative;
    left: 6vw;
    bottom: 30vw;
    z-index: 2;
    color: var(--white);
    height: max-content;
    width: 38vw;
    gap: 1vw;
}
.btn:hover{
    color: var(--white) !important;
}

.about-banner-text h1 {
    font-size: 3vw;
    padding: 0;
    max-width: 30vw;
}

.about-banner-text p {
    font-size: 1vw;
    margin: 0;
    padding: 0;
}

.btn {
    background-color: var(--white);
    color: var(--red);
    padding: .5vw 1vw;
    border-radius: 6px;
    font-weight: 600;
    margin-top: 1vw;
    margin-bottom: 1vw;
}

.about-text-1,
.about-text-2 {
    display: flex;
    flex-direction: column;
    gap: 1vw;
    padding: 2vw;
    padding-left: 7vw;
    font-size: 1vw;
}

.about-text-1 {
    padding-bottom: 13vw;
}

.about-text-2 {
    background-color: var(--red);
    color: var(--white);
}

.about-text-1 ul,
.about-text-2 ul {
    list-style: disc;
    margin-left: 5vw;
    font-size: 1vw;
}

.about-text-1 p,
.about-text-2 p {
    align-self: center;
}

.about-text-1 h2,
.about-text-2 h2 {
    margin-top: 1vw;
    
}
.about-text-1 h2{
    color: var(--red);
}
.about-img-2 img {
    z-index: 3;
    position: absolute;
    right: -5vw;
    bottom: 0;
    left: auto;
    height: auto;
    width: 60vw;
}

.about-img-1 img {
    width: 200%;
    position: absolute;
    bottom: 0;
    left: 0;
}

.about-img-1 {
    display: flex;
    flex-direction: column;
    position: relative;
}

.about-img-2 {
    background-image: url(../media/png/about02.png);
    position: relative;

}

.about-img-2::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 50%;
    width: 100%;
    background-color: var(--yellow);
    z-index: 1;
}

.section-about-grid-1,
.section-about-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.grid-main {
    margin-top: 3vw;
}



@media (max-width: 996px) {
    li {
        font-size: 3.5vw;
    }

    .about-text-1,
    .about-text-2 {
        gap: 6vw;
        padding: 12vw 6vw;
    }

    .about-text-1 h2,
    .about-text-2 h2 {
        margin-top: 3vw;
    }

    .section-about-banner {
        height: 170vw;
        margin-bottom: 3vw;
    }

    .about-banner-text {
        width: 80vw;
        gap: 6vw;
        left: auto;
        bottom: auto;
        transform: translate(2%, -150%);
        margin: 7.5vw;
        text-align: center;
        display: flex;
        justify-content: center;
    }

    .about-banner-text h1 {
        font-size: 7vw;
        max-width: 80vw;
    }

    .about-banner-text p {
        font-size: 3.5vw;
    }

    .section-about-banner img {
        margin-top: 0;
        height: 170vw;
        width: 100%;
        object-fit: cover;
        object-position: left;
        display: block;
    }

    .btn {
        padding: 2vw 4vw;
        align-self: center;
        font-size: 3.5vw;
        margin: 0;
    }

    .section-about-grid-1,
    .section-about-grid-2 {
        display: grid;
        grid-template-columns: 1fr;
    }

    .about-img-2 img {
        position: relative;
        bottom: 0;
        left: 0;
        right: 0;
        height: auto;
        margin-right: 0vw;
        padding: 0;
        width: auto;
        display: block;
    }

    .about-img-1 img {
        width: 200%;
        position: static;
        bottom: 0;
        left: 0;
    }

    .about-img-2 {
        height: max-content;
        grid-row: 2;
    }
}