/* ==========================================
   FLOW INTRO
========================================== */

.section-flow-intro {

    width: 100%;
    padding: 120px var(--space-5) 60px;
    box-sizing: border-box;

}


/* ==========================================
   CONTAINER
========================================== */

.section-flow-intro-container {

    width: 100%;

    max-width: 1900px;

    margin: 0 auto;

    display: flex;
    flex-direction: column;

    align-items: center;

    text-align: center;

}


/* ==========================================
   CONTENT
========================================== */

.section-flow-intro-content {

    width: 100%;

    max-width: 1900px;

    display: flex;
    flex-direction: column;

    align-items: center;

    gap: 25px;

}


/* ==========================================
   TITLE
========================================== */

.section-flow-intro-title {

    width: 100%;

    margin: 0;

    font-family: "MabryPro";

    font-size: 72px;
    font-weight: 900;

    line-height: 1.05;

    color: var(--text);

}


/* ==========================================
   DESCRIPTION
========================================== */

.section-flow-intro-description {

    max-width: 900px;

    margin: 0;

    font-family: "Inter";

    font-size: 18px;
    font-weight: 500;

    line-height: 1.5;

    color: var(--text-70);

}


/* ==========================================
   BUTTON
========================================== */

.section-flow-intro-button {

    width: fit-content;

    margin-top: 0;

}


/* ==========================================
   IMAGE
========================================== */

.section-flow-intro-image {

    width: 100%;

    margin-top: 70px;

    display: flex;

    justify-content: center;
    align-items: center;

    overflow: hidden;

}


.section-flow-intro-image img {

    height: 555px;

    width: auto;

    max-width: 100%;

    display: block;


}

/*--------------------------------------------------------------------------------------------

/* ==========================================
   FLOW MOODS
========================================== */

.section-flow-moods {

    width: 100%;
    padding: 60px var(--space-5);
    box-sizing: border-box;

}


/* ==========================================
   CONTAINER
========================================== */

.section-flow-moods-container {

    width: 100%;

    max-width: 1400px;

    margin: 0 auto;

    display: flex;
    flex-direction: column;

    align-items: center;

    text-align: center;

}


/* ==========================================
   CONTENT
========================================== */

.section-flow-moods-content {

    width: 100%;

    max-width: 1100px;

    display: flex;
    flex-direction: column;

    align-items: center;

    gap: 25px;

}


/* ==========================================
   TITLE
========================================== */

.section-flow-moods-title {

    width: 100%;

    margin: 0;

    font-family: "MabryPro";

    font-size: 56px;
    font-weight: 900;

    line-height: 1.1;

    color: var(--text);

}


/* ==========================================
   DESCRIPTION
========================================== */

.section-flow-moods-description {

    max-width: 1000px;

    margin: 0;

    font-family: "Inter";

    font-size: 18px;
    font-weight: 500;

    line-height: 1.5;

    color: var(--text-70);

}


/* ==========================================
   SELECTOR
========================================== */

.section-flow-moods-selector {

    width: 100%;

    margin-top: 60px;

    display: flex;

    justify-content: center;

    overflow: hidden;

}


/* ==========================================
   LIST
========================================== */

.section-flow-moods-list {

    width: fit-content;

    max-width: 100%;

    display: flex;

    align-items: flex-start;

    justify-content: center;

    gap: 15px;

}


/* ==========================================
   ITEM
========================================== */

.section-flow-moods-item {

    width: 185px;

    flex: 0 0 185px;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 12px;

}


/* ==========================================
   COVER
========================================== */

.section-flow-moods-item img {

    width: 185px;

    height: 185px;

    display: block;

    object-fit: cover;

    border-radius: 3px;

}


/* ==========================================
   TITLE
========================================== */

.section-flow-moods-item span {

    font-family: "Inter";

    font-size: 16px;

    font-weight: 500;

    line-height: 1.2;

    color: var(--text);

}

/*-----------------------------------------------------------------------

/* ==========================================
   FLOW AI
========================================== */

.section-flow-ai {

    width: 100%;
    padding: 60px var(--space-5);
    box-sizing: border-box;

}


/* ==========================================
   CONTAINER
========================================== */

.section-flow-ai-container {

    width: 100%;
    max-width: 1905px;
    margin: 0 auto;

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;

}


/* ==========================================
   CONTENT
========================================== */

.section-flow-ai-content {

    width: 100%;
    max-width: 1100px;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 25px;

}


/* ==========================================
   TITLE
========================================== */

.section-flow-ai-title {

    width: 100%;
    margin: 0;

    font-family: "MabryPro";
    font-size: 56px;
    font-weight: 900;
    line-height: 1.1;

    color: var(--text);

}


/* ==========================================
   DESCRIPTION
========================================== */

.section-flow-ai-description {

    max-width: 1000px;
    margin: 0;

    font-family: "Inter";
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;

    color: var(--text-70);

}


/* ==========================================
   IMAGE
========================================== */

.section-flow-ai-image {

    width: 100%;
    margin-top: 70px;

    display: flex;
    justify-content: center;
    align-items: center;

    overflow: hidden;

}


.section-flow-ai-image img {

    width: 100%;
    max-width: 1905px;
    height: auto;

    display: block;

}

/*-----------------------------------------------------------------------------

/* ==========================================
   FLOW PREFERENCES
========================================== */

.section-flow-preferences {

    width: 100%;
    padding: 60px var(--space-5) 120px;
    box-sizing: border-box;

}


/* ==========================================
   CONTAINER
========================================== */

.section-flow-preferences-container {

    width: 100%;
    max-width: 1905px;
    margin: 0 auto;

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;

}


/* ==========================================
   CONTENT
========================================== */

.section-flow-preferences-content {

    width: 100%;
    max-width: 1300px;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 25px;

}


/* ==========================================
   TITLE
========================================== */

.section-flow-preferences-title {

    width: 100%;
    margin: 0;

    font-family: "MabryPro";
    font-size: 56px;
    font-weight: 900;
    line-height: 1.1;

    color: var(--text);

}


/* ==========================================
   DESCRIPTION
========================================== */

.section-flow-preferences-description {

    max-width: 1100px;
    margin: 0;

    font-family: "Inter";
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;

    color: var(--text-70);

}


/* ==========================================
   IMAGE
========================================== */

.section-flow-preferences-image {

    width: 100%;
    margin-top: 70px;

    display: flex;
    justify-content: center;
    align-items: center;

    overflow: hidden;

}


.section-flow-preferences-image img {

    width: 100%;
    max-width: 1905px;
    height: auto;

    display: block;

}

.faq-bottom {
    margin-bottom: 60px;
}

/* ==========================================
   FLOW - MOBILE
========================================== */

@media (max-width: 850px) {


    /* ==========================================
       INTRO
    ========================================== */

    .section-flow-intro {
        padding: 70px 20px 50px;
    }

    .section-flow-intro-title {
        font-size: 40px;
    }

    .section-flow-intro-description {
        max-width: 100%;

        font-size: 16px;
    }

    .section-flow-intro-image {
        margin-top: 50px;
    }

    .section-flow-intro-image img {
        width: 100%;
        height: auto;
    }


    /* ==========================================
    MOODS
    ========================================== */

    .section-flow-moods-title {

        font-size: 36px;

    }


    .section-flow-moods-description {

        max-width: 100%;

        font-size: 16px;

    }


    .section-flow-moods-selector {

        width: calc(100% + 40px);

        margin-left: -20px;
        margin-right: -20px;

        margin-top: 40px;

        display: flex;
        justify-content: flex-start;

        overflow-x: auto;
        overflow-y: hidden;

        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;

    }


    .section-flow-moods-selector::-webkit-scrollbar {

        display: none;

    }


    .section-flow-moods-list {

        width: max-content;
        max-width: none;

        display: flex;

        align-items: flex-start;
        justify-content: flex-start;

        gap: 15px;

        padding-left: 20px;
        padding-right: 20px;

    }


    .section-flow-moods-item {

        width: 150px;
        flex: 0 0 150px;

    }


    .section-flow-moods-item img {

        width: 150px;
        height: 150px;

    }


    .section-flow-moods-item span {

        font-size: 14px;

    }


    /* ==========================================
       AI
    ========================================== */

    .section-flow-ai {
        padding: 50px 20px;
    }

    .section-flow-ai-title {
        font-size: 36px;
    }

    .section-flow-ai-description {
        max-width: 100%;

        font-size: 16px;
    }

    .section-flow-ai-image {
        margin-top: 40px;
    }

    .section-flow-ai-image img {
        width: 100%;
        height: auto;
    }


    /* ==========================================
       PREFERENCES
    ========================================== */

    .section-flow-preferences {
        padding: 50px 20px 70px;
    }

    .section-flow-preferences-title {
        font-size: 36px;
    }

    .section-flow-preferences-description {
        max-width: 100%;

        font-size: 16px;
    }

    .section-flow-preferences-image {
        margin-top: 40px;
    }

    .section-flow-preferences-image img {
        width: 100%;
        height: auto;
    }

}

/* ==========================================
   FLOW REVEAL
========================================== */


/* ==========================================
   SECTIONS
========================================== */

.section-flow-intro,
.section-flow-moods,
.section-flow-ai,
.section-flow-preferences,
.section-flow-faq {

    opacity: 0;

    transform: translateY(100px);

    transition:
        opacity 0.7s ease-out,
        transform 0.7s ease-out;

}


/* ==========================================
   VISIBLE
========================================== */

.section-flow-intro.is-visible,
.section-flow-moods.is-visible,
.section-flow-ai.is-visible,
.section-flow-preferences.is-visible,
.section-flow-faq.is-visible {

    opacity: 1;

    transform: translateY(0);

}