/*          =========================================
              DESIGN                               */
/*#region   ========================================= */
/* -------- SEZIONE HERO-------- */

.design-hero {
    min-height: var(--hero-high);
    background-image: url("https://www.horizonfyw.com/wp-content/uploads/2026/01/Wow-scaled.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    display: flex;
}

.design-hero .design-hero-workspace {
    width: 100%;
    max-width: var(--workspace-width);
    margin-inline: auto;
    padding-inline: var(--paddinginline-workspace);
    padding-bottom: clamp(48px, 8vh, 96px);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    min-height: 100%;
}

.design-hero .design-hero--box-title {
    text-align: center;
}

/* -------- SEZIONE INTRO -------- */

.design-intro .design-intro-workspace>* {
    margin: 0;
    padding: 0;
}

.design-intro .design-intro-box-title>* {
    margin: 0;
    padding: 0;
}

.design-intro .design-intro-box-paragrafo>* {
    margin: 0;
    padding: 0;
}

.design-intro .design-intro-box-para-icon>* {
    margin: 0;
    padding: 0;
}

.design-intro .design-intro-workspace {
    width: 100%;
    max-width: var(--workspace-width);
    margin-inline: auto;
    padding-inline: var(--paddinginline-workspace);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.design-intro .design-intro-box-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.design-intro .design-intro-box-paragrafo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.design-intro .design-intro-box-para-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

/* -------- SEZIONE PARALLAX-------- */

.design-immagine-stacco-box {
    background-image: url("https://www.horizonfyw.com/wp-content/uploads/2025/12/Parallax-Design-Mobile.jpg");
    display: block;
    min-height: 187px;
}

/* -------- SEZIONE TOOLS -------- */

.design-tools .design-tools-workspace>* {
    margin: 0;
    padding: 0;
}

.design-tools .design-tools-box-title>* {
    margin: 0;
    padding: 0;
}

.design-tools .design-tools-workspace {
    width: 100%;
    max-width: var(--workspace-width);
    margin-inline: auto;
    padding-inline: var(--paddinginline-workspace);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.design-tools .design-tools-box-title {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 30px;
}

.design-tools .design-tools-box-rullo {
    max-width: 100%;
}

/* -------- SEZIONE SERVIZI -------- */

.design-servizi .design-servizi-workspace>* {
    margin: 0;
    padding: 0;
}

.design-servizi .design-servizi-workspace {
    width: 100%;
    max-width: var(--workspace-width);
    margin-inline: auto;
    padding-inline: var(--paddinginline-workspace);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.design-servizi .design-servizi-box-icon {
    margin-left: 0;
    margin-right: auto;
}

.design-servizi-link a,
.design-servizi-link a:visited {
    color: var(--strong-grey) !important;
    /* Colore desiderato */
    text-decoration: none;
    transition: color 0.3s ease;
}

/* Colore al passaggio del mouse (opzionale) */
.design-servizi-link a:hover {
    color: #544fa1 !important;
    text-decoration: none;
    /* Toglie la linea al passaggio se preferisci */
}

/* -------- SEZIONE COME LAVORIAMO -------- */

.design-work .design-work-workspace>* {
    margin: 0;
    padding: 0;
}

.design-work .design-work-box-title>* {
    margin: 0;
    padding: 0;
}

.design-work .design-work-box-card>* {
    margin: 0;
    padding: 0;
}

.design-work .design-work-box-card-superiore>* {
    margin: 0;
    padding: 0;
}

.design-work {
    margin-bottom: var(--section-spacing-desktop);
}

.design-work .design-work-workspace {
    width: 100%;
    max-width: var(--workspace-width);
    margin-inline: auto;
    padding-inline: var(--paddinginline-workspace);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.design-work .design-work-box-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.design-work .design-work-subtitle {
    font-weight: 400;
}

.design-work .design-work-box-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 50px;
}

.design-work .design-work-box-card-superiore {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 50px;
}

/* -------- SEZIONE FRASE MOTIVAZIONALE -------- */
.design-frase-mot {
    margin-bottom: var(--section-spacing-desktop);
}

.design-frase-mot .design-frase-mot-workspace {
    width: 100%;
    max-width: var(--workspace-width);
    margin-inline: auto;
    padding-inline: var(--paddinginline-workspace);
}

.design-frase-mot .design-frase-mot-title {
    text-align: center;
}


/* #endregion */

/*          =========================================
              DESIGN - DESKTOP                   */
/*#region   ========================================= */

@media (min-width: 900px) {
    /* -------- SEZIONE HERO-------- */

    .design-hero {
        max-width: 2560px;
        background-attachment: scroll;
    }

    .design-hero .design-hero-workspace {
        display: flex;
        flex-direction: unset;
        align-items: flex-end;
        justify-content: flex-start;
    }

    .design-hero .design-hero-title {
        padding-bottom: clamp(60px, 20vh, 200px);
    }

    /* -------- SEZIONE INTRO -------- */

    .design-intro .design-intro-workspace {
        display: flex;
        flex-direction: column;
        align-items: unset;
        justify-content: unset;
        gap: 50px;
    }

    .design-intro .design-intro-box-title {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 20px;
    }

    .design-intro .design-intro-box-paragrafo {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }

    .design-intro .design-intro-box-para-icon {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 20px;
    }

    /* -------- SEZIONE PARALLAX-------- */

    .design-immagine-stacco-box {
        width: 100%;
        background-image: url("https://www.horizonfyw.com/wp-content/uploads/2025/12/Immagine-Stacco-Design.jpg");
    }

    /* -------- SEZIONE TOOLS -------- */

    .design-tools .design-tools-workspace {
        gap: 50px;
    }

    .design-tools .design-tools-box-title {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 30px;
    }

    .design-tools .design-tools-box-rullo {
        max-width: 100%;
    }

    /* -------- SEZIONE SERVIZI -------- */

    .design-servizi .design-servizi-workspace {
        gap: 50px;
    }

    /* -------- SEZIONE COME LAVORIAMO -------- */

    .design-work .design-work-workspace {
        align-items: flex-start;
        justify-content: flex-start;
        gap: 50px;
    }

    .design-work .design-work-box-title {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 30px;
    }

    .design-work .design-work-subtitle {
        margin-left: 134px;
        font-weight: 400;
    }

    .design-work .design-work-box-card {
        width: 100%;

        gap: 150px;
        margin-top: var(--section-spacing-desktop);
    }

    .design-work .design-work-box-card-superiore {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 150px;
    }

    /* -------- SEZIONE FRASE MOTIVAZIONALE -------- */

    .design-frase-mot .design-frase-mot-title {
        text-align: center;
    }

}

/* #endregion */