/* aboutArvaneh */
@layer components {
    @keyframes coming {
        0% {
            right: -15vw;
            top: 55vh;
            opacity: 0;
        }

        100% {
            top: 47.5vh;
            right: -3vw;
            opacity: 1;
        }
    }

    @keyframes comingMobile {
        0% {
            top: 25vh;
            right: -15vw;
            opacity: 0;
        }

        /* 60%{
        right: -5vw;
        top: 50vh;
        opacity: 0.8;
    } */
        100% {
            top: 17.5vh;
            right: -2.5vw;
            opacity: 1;
        }
    }

    .topBanner {
        width: 90vw;
        /* padding-right: 25vw; */
    }

    #arvanehImg {
        animation: coming 0.7s ease-in;
        position: absolute;
        right: -3vw;
        top: 47.5vh;
        width: 25vw;
        max-width: 100%;
        display: block;
    }

    #arvanehFlower {
        width: 27.5vw;
        height: auto;
        height: fit-content;
        padding-right: 12.5vw;
    }

    #arvanehExplain {
        width: 27.5vw;
        text-align: justify;
        direction: rtl;
        font-size: var(--text-size-medium);
        margin-top: 10vh;
    }

    #red {
        font-size: var(--text-size-large);
        color: red;
        font-family: kalamehSemi;
    }

    /* Carousel: 3 visible items, width from 65vw container, gap 2vw, height 7.5vh */
    .carousel.about-carousel {
        --carousel-item-height: 20vh;
        --carousel-gap: 2vw;
        height: calc(var(--carousel-item-height) + 5vh);
        width: 85vw;
    }

    .carousel.about-carousel .carousel-track-container {
        width: 65vw;
        display: flex;
        align-items: center;
    }

    .carousel.about-carousel .carousel-track {
        height: var(--carousel-item-height);
        gap: var(--carousel-gap);
    }

    .carousel.about-carousel .carousel-item {
        height: var(--carousel-item-height);
    }

    .carousel.about-carousel .carousel-item img {
        height: 20vh !important;
        border-radius: 9999px;
        object-fit: cover;
        min-width: 100%;
    }

    .carousel.about-carousel .carousel-nav .nav-icon {
        filter: hue-rotate(200deg) saturate(6.3);
    }

    #flower {
        height: 85vh;
        /* max-height: none; */
        margin-top: 29vh;
        padding: 7.5vh 8.5vh;
        justify-content: space-between;
    }

    #flowerImage {
        margin-top: -29vh;
        width: auto;
        width: fit-content;
        height: 106.5vh;
        max-width: 100%;
        display: block;
    }

    #flowerExplain {
        width: 65%;
        /* display: flex;
        flex-direction: column;
        justify-content: space-around; */
        padding-top: 2.5vh;
        /* text-align: justify;
    direction: rtl; */
        /* margin: 5vh 5vw 0; */
    }

    @media (max-width: 1100px) {
        @keyframes comingMobile {
            0% {
                top: 20vh;
                right: -15vw;
                opacity: 0;
            }

            100% {
                top: 17.5vh;
                right: -2.5vw;
                opacity: 1;
            }
        }

        :root {
            --carousel-item-width: 30vw;
            /* --carousel-item-height: 6.5vh;
        --gap: 2.5vw; */
        }

        .topBanner {
            width: 90vw;
            gap: 5vh 0 !important;
        }

        #arvanehImg {
            right: -2.5vw;
            top: 17.5vh;
            width: 50vw;
            animation: comingMobile 0.7s ease-in;
        }

        #arvanehFlower {
            width: 35vw;
            margin: 1vh 40vw 0 0;
            padding: 0;
        }

        #arvanehExplain {
            width: 70vw;
            margin: 0 auto;
        }

        .carousel.about-carousel {
            margin: 5vh auto;
            --carousel-item-height: 12.5vh;
            --carousel-gap: 2vw;
        }

        .carousel.about-carousel .carousel-track-container {
            width: 50vw;
        }

        .carousel.about-carousel .carousel-item img {
            height: 12.5vh !important;
        }

        #flower {
            width: 80vw;
            height: max-content;
            margin: 5vh auto;
            padding: 3vh 1.5vh;
            flex-direction: column-reverse;
            align-items: center;
        }

        #flowerImage {
            display: none;
            /* margin: 0;
        width: fit-content;
        height: 25vh; */
        }

        #flowerExplain {
            width: 90%;
            margin: 0 auto 2.5vh;
            padding: 0;
        }
    }

    @media (min-width: 600px) and (max-width: 1100px) {
        #arvanehExplain {
            margin: 10vh auto 0;
        }
    }
}