@import url(home/banner.css);
@import url(home/nav.css);
@import url(home/hero.css);
@import url(home/story.css);
@import url(home/cooperation.css);
@import url(home/timeline.css);
@import url(home/quality-control.css);
@import url(home/foundation.css);
@import url(home/product-features.css);
@import url(home/sustainability.css);
@import url(home/products.css);
@import url(home/supermarkets.css);
@import url(home/how-to-support.css);
@import url(home/latest-news.css);
@import url(home/reviews.css);
@import url(home/blog.css);
@import url(home/floating-navigation.css);
@import url(home/footer.css);
/* #034F39  #4E4B4B*/
:root{
    /* Colors */
    --light-green: #034F39;
    --pistachio: #75B06C;
    --pale-spring-bud: #E6F2C8;
    --gray: #4E4B4B;
    --background: #FCFFF3;
    --pink: #FDCD93;

    /* Fonts family and size*/
    /* font-family: 'Noto Sans TC', sans-serif; */
    --ff-heading: 'Noto Sans TC', sans-serif;
    --ff-body: 'Noto Sans TC', sans-serif;

    --fs-xl: 4rem;
    --fs-600: 3rem;
    --fs-500: 1.8rem;
    --fs-400: 1.6rem;

    --max-xl-width: 1200px;
    --max-width: 1000px;

    --animate-duration: 1500ms;
    --animate-delay: 0.5s;
}

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    
}
html{
    font-size: 62.5%;
    scroll-behavior:smooth
}
body{
    background-color: #FCFFF3;
    font-family: var(--ff-body);
    font-size: var(--fs-400);
    letter-spacing: .2rem;
}
.background--gradientGreen{
    width: 100%;
    background:url('../assets/img/background-curve.png') no-repeat, var(--background);
    background-position: bottom;
}
.background--paleSpringBud{
    width: 100%;
    background: var(--pale-spring-bud);
    margin-top: -1px;
}

.backgroundMilk__topBackground{
    width: 100%;
}
.backgroundMilk__bottomBackground{
    width: 100%;
}
.background__milk{
    background-image: linear-gradient(rgba(201,224,141,0),rgba(201,224,141,0)),url('../assets/img/background-milk.png');
    background-size: cover;
    background-position: center;
}
.backgroundMilkSlash{
    width: 100%;
}

/* SLIDER Button used in many parts */
.scrollableContainer__controls{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
}
.scrollableContainerControls__left,
.scrollableContainerControls__right{
    position: relative;
    width: auto;
    background-color: #FFFFFF !important;
    padding: 1rem;
    border-radius: 50%;
    border: 1px solid #034F39;
}
.scrollableContainerControls__left span,
.scrollableContainerControls__right span{
    filter: invert(1) grayscale(100);
}

@media (min-width: 992px) {
    :root{
        --fs-500: 2rem;
    }
    .scrollableContainer__controls{
        display: none;
    }
}