body {
    background-image: url("/assets/aboutus/about_us_background.png");
    background-size: cover;
}

.about-us-page-content .planty-heading-1 {
    color: rgb(var(--font));
}

.about-us-page-content .planty-text-paragraph {
    color: rgb(var(--font));
}

/*--------------------------------------------- ABOUT US --------------------------------------------- */
.about-us {
    padding-top: 10rem;
}

.background-gradient {
    z-index: -1;
}

.about-us-content {
    border-radius: 15px;
    padding: 2.4rem 4% 3% 4%;
    background: linear-gradient(108deg,
            rgba(var(--white-background), 0.3) 10.91%,
            rgba(var(--hijau-gelap), 0.3) 111.54%);
    box-shadow: 0px 8px 30px 0px rgba(var(--hitam), 0.25);
    backdrop-filter: blur(6.099999904632568px);
    height: fit-content;
    margin-left: -3rem;
}

.about-us-content p {
    text-align: justify;
}

.about-us-image {
    box-shadow: 0px 4px 9.7px 0 rgba(var(--hitam), 0.25);
    border-radius: 15px;
    width: 30%;
    object-fit: cover;
}

.our-values {
    margin-top: 15rem;
    padding-left: 15%;
    padding-right: 15%;
    height: auto;
}

.our-values-list-container {
    margin-top: 3rem;
    height: 90%;
}

.our-values-item-container {
    border-radius: 15px;
    background: linear-gradient(108deg,
            rgba(var(--white-background), 0.3) 10.91%,
            rgba(var(--hijau-gelap), 0.3) 111.54%);
    box-shadow: 0px 8px 30px 0px rgba(var(--hitam), 0.25);
    backdrop-filter: blur(6.099999904632568px);
    padding: 1.5rem;
    transition: 0.5s;
    height: 100%;
}

.our-values-item-container:hover {
    border-radius: 15px;
    background: linear-gradient(180deg,
            rgba(var(--font), 1) 0%,
            rgba(var(--hijau-gelap), 1) 100%);
    box-shadow: 0px 8px 30px 0px #122218;
    backdrop-filter: blur(6.099999904632568px);
    color: rgba(var(--white-background), 1);
}

.our-values-item-container:hover h4 {
    color: white;
}

.our-values-item-container img {
    width: 15%;
}


.history-container {
    margin-top: 15rem;
    background-color: color-mix(in srgb, #adbc9f 100%, white 45%);
    box-shadow: 0px -4px 10px 0 rgba(var(--hitam), 0.25),
        0px 4px 10px 0 rgba(var(--hitam), 0.25);
    height: 70vh;
}

.history-content {
    padding-right: 9%;
}

.history-img {
    padding-right: 0;
}

.our-team {
    margin-top: 15rem;
    margin-bottom: 15rem;
    padding-left: 18%;
    padding-right: 18%;
}

.our-team-item-container {
    background: linear-gradient(108deg,
            rgba(var(--white-background), 0.3) 10.91%,
            rgba(var(--hijau-gelap), 0.3) 111.54%);
    box-shadow: 0px 8px 30px 0px rgba(var(--hitam), 0.25);
    backdrop-filter: blur(6.099999904632568px);
    padding: 1rem;
    border-radius: 15px;
    transition: 0.5s;
}

.our-team-item-container:hover {
    border-radius: 15px;
    background: linear-gradient(108deg,
            rgba(var(--white-background), 0.3) 10.91%,
            rgba(var(--hijau-gelap), 0.3) 111.54%);
    box-shadow: 0px 8px 30px 0px rgba(var(--white-background), 0.7);
    backdrop-filter: blur(6.099999904632568px);


}

.our-team-item-container h4 {
    margin: 0;
    margin-top: 1rem;

}

.our-team-item-container img {
    width: 100%;
}

.our-team-list-container {
    margin-top: 3rem;
}

@media (max-width: 992px) {
    .about-us {
        flex-direction: column;
        row-gap: 2rem;
    }

    .our-values {
        padding-left: 5%;
        padding-right: 5%;
        /* height: auto; */
    }

    .about-us-content {
        margin-left: 0rem;
        width: 80%;
    }

    .about-us-image {
        width: 80%;
        height: 80vh;
    }

    .history-container {
        flex-direction: row;
        background-color: transparent;
        box-shadow: none;
        height: fit-content;
    }

    .history-content {
        width: 100%;
        background-color: color-mix(in srgb, #adbc9f 100%, white 45%);
        box-shadow: 0px -4px 10px 0 rgba(var(--hitam), 0.25),
            0px 4px 10px 0 rgba(var(--hitam), 0.25);
        padding: 8% 25% 12% 10%;
    }

    .history-img {
        width: 100%;
        height: 70vh !important;
    }
}

@media (max-width: 576px) {
    .about-us-image {
        height: 40vh;
    }

    .history-img {
        height: 40vh !important;
    }

    .history-container {
        margin-top: 8rem;
    }

    .our-values {
        padding-left: 0;
        padding-right: 0;
        margin-top: 8rem;
    }

    .our-values-desc {
        padding-left: 10%;
        padding-right: 10%;
    }

    .our-values-list-container {
        overflow: scroll;
        -ms-overflow-style: none;
        /* IE and Edge */
        scrollbar-width: none;
        /* Firefox */
    }

    .our-values-list-container::-webkit-scrollbar {
        display: none;
        /* Safari and Chrome */
    }

    .our-values-list {
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start !important;
        padding-bottom: 4rem;
    }

    .our-values-list>* {
        width: fit-content;
    }

    .our-values-box:first-child {
        margin-left: 1rem !important;
    }

    .our-team {
        padding-left: 0;
        padding-right: 0;
        margin-top: 8rem;
        margin-bottom: 8rem;
    }

    .our-team-list-container {
        overflow: scroll;
        overflow: auto;
        /* Enable scrolling within the container */
        -ms-overflow-style: none;
        /* IE and Edge */
        scrollbar-width: none;
        /* Firefox */
    }

    .our-team-list-container::-webkit-scrollbar {
        display: none;
        /* Safari and Chrome */
    }

    .our-team-list {
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start !important;
        padding-bottom: 4rem;
    }

    .our-team-list>* {
        width: fit-content;
    }

    .our-team-box:first-child {
        margin-left: 1rem !important;
    }
}