.content {
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.body {
    background-image: url("/assets/funfact/background-top.png");
}

.funfact-content {
    background-image: url('/assets/funfact/background-top.png');
    background-repeat: no-repeat;
    background-size: cover;
}

.background-top-fun {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    object-fit: cover;
    z-index: -1000;
}

.back {
    padding-left: 5%;
    padding-top: 7rem;
    z-index: 100000;
}



.back-icon {
    margin-left: 5%;
    margin-top: 5%;
}

.content-wrapper {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    margin-top: -7rem;
    height: 100vh;
    width: 100%;

}

.content-text {
    border-radius: 15px;
    right: 0rem;
    padding: 2.4rem 2.8rem 4.2rem 2.8rem;
    /* border-style: inset; */
    border-width: 1.5px;
    background-image: linear-gradient(to bottom right, rgba(255, 255, 255, 0.3), rgba(97, 130, 100, 0.3));
    border-image: linear-gradient(to bottom left, rgba(173, 188, 159, 0.5), rgba(255, 255, 255, 0.5));
    box-shadow: 0px 8px 30px 0 rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(12.2px);
    margin-top: 10% !important;
    margin-right: -5%;
    width: 25rem;
    height: 24rem;
    overflow: hidden;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    z-index: 10;
}

.content-image {
    width: 35%;
    /* max-height: 27.3125rem; */
    border: 0;
    flex-shrink: 0;
    /* margin-top: -30rem; */
    z-index: 0;

}

.benefit-title {
    display: flex;
    flex-direction: column;
    left: 0;
}

.benefit-item {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.benefit-item-container {
    /* margin-top: 0; */
    /* border-style: inset; */
    /* border-width: 1.5px; */
    border-radius: 0.9375rem;
    /* border: 1px solid var(--tes1, #ADBC9F); */
    border: 1px solid var(--tes1, #ADBC9F);
    background: linear-gradient(108deg, rgba(255, 255, 255, 0.30)10.91%, rgba(79, 86, 73, 0.30)111.54%);
    box-shadow: 0px 8px 30px 0 rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(6.099999904632568px);
    padding: 1.5rem;
    margin: 1rem;
    transition: all 0.3s ease-in;
    /* margin-right: 5%; */
}

.benefit-item-container:hover {
    border-radius: 0.95388rem;
    border: 1.017px solid var(--tes1, #ADBC9F);

    background: var(--lin3, linear-gradient(180deg, #122218 0%, #618264 100%));
    box-shadow: 0px 8px 30px 0px #122218;
    backdrop-filter: blur(6.099999904632568px);
}

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

.benefit-item-container:hover p {
    color: white;
}

.benefit-2 {
    display: none !important;
}

.why-image.container {
    width: 40%;
}

.why-image img {
    box-shadow: 0px 8px 30px 0px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(6.099999904632568px);
    border-radius: 15px;
}

.why-content {
    margin-top: 10rem;
    margin-bottom: 15rem;
}

@media (max-width: 992px) {
    .benefit-1 .planty-text-paragraph {
        text-align: center;
    }

    .benefit-1 .planty-heading-2 {
        text-align: center;
    }

    .content-text {
        width: 50%;
    }

    .content-image {
        width: 50%;
    }
}

@media (max-width: 576px) {
    .funfact-content {
        background-image: url('/assets/funfact/background-top-mobile.png');
        background-position: top;
    }

    .content-wrapper {
        height: 80vh;
    }

    .benefit-wrapper {
        height: 53vh;
    }

    .why-image {
        width: 100%;
    }

    .benefit-title {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }

    .planty-text-sentence,
    .planty-text-paragraph {
        font-size: var(--planty-heading-mobile-paragraph-font-size) !important;
    }

    .back-icon {
        margin-top: 17%;
    }

    .content-wrapper {
        flex-direction: column;
    }

    .content-text {
        background: rgba(255, 255, 255, 0.7);
        padding: 20px;
        border-radius: 10px;
        margin: 10px;
        width: 80%;
        height: auto;
        flex-shrink: 0
    }

    .content-image {
        margin: 10px;
        width: 80%;
        flex-shrink: 0;

    }

    .content-image img {
        width: 100%;
        border-radius: 10px;
    }

    .benefit-item {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: scroll;
        -ms-overflow-style: none;
        scrollbar-width: none;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        justify-content: first baseline;
        padding: 0;

    }

    .benefit-wrapper {
        padding: 0;
    }

    .benefit-2 {
        padding: 0;
    }

    .benefit-item:first-child {

        margin-left: 1rem !important;

    }

    .benefit-item::-webkit-scrollbar {
        display: none;
        /* for Chrome, Safari, and Opera */
    }


    .benefit-item-container {
        max-width: 10.9375rem;
        max-height: 12.5rem;
        flex-shrink: 0;

    }

    .why-content-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .benefit-1 {
        display: none !important;
    }

    .benefit-2 {
        display: block !important;
    }

    .container {

        --bs-gutter-x: 0 !important;
    }

    .why-content-text {
        text-align: center;
        justify-content: center;
    }

}