/* CSS Document */


/* =============== Main - Introduction Section =============== */

main {
    overflow: hidden;
}

#introduction {
    display: flex;
    flex-direction: column;
    gap: 112px;
    margin-top: 120px;
    margin-bottom: 122px;
}

#introduction-title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

#introduction-headline {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

#introduction-headline h3 {
    width: 254px;
    text-align: center;
}


/* =============== Main - Introduction Path =============== */
#front-page-content {
    display: flex;
    justify-content: center;
    margin-top: 122px;
    margin-bottom: 60px;
    width: 100%;
}

#front-page-content-box {
    padding: 0 15px;
    max-width: 1320px;
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.image-side-aligned {
    display: flex;
    justify-content: flex-start;
    padding: 0 60px 0 0px;
}

.index-image {
    width: 100%;
    max-width: 750px;
    border-radius: 10px;
}

.fp-textbox {
    display: flex;
    flex-direction: column;
    gap: 30px;

    border-radius: 10px;
    background: #DBD1AD;
    padding: 15px;

    flex: 0 1 76.92%; /* grow, shrink, basis */
}

.fp-textbox h4 {
    line-height: 100%;
}

.textbox-right {
    display: flex;
    justify-content: flex-end;
}


/* =============== Main - Front Page CTA =============== */

#fp-call-to-action {
    display: flex;
    flex-direction: column;
    gap: 60px;
    align-items: center;
}

#fp-headline {
    width: 65%;
    text-align: center;
}


/* =============== Main - Introduction Path Section (mountains & path) =============== */

#mountains {
    position: relative;
    left: 50%;
    width: 0;
}

#left-mountains {
    position: absolute;
    bottom: 45px;
    right: -43px;
    z-index: 2;
}

#right-mountains {
    position: absolute;
    bottom: 31px;
    left: -66px;
    z-index: 3;
}

#path-position {
    position: relative;
    left: 50%;
    width: 0;
}

#path {
    position: absolute;
    top: -46px;
    left: -175px;
    z-index: -5;
}

/* Circle and mountains for desktop */
#mountains-desktop {
    display: none;
    justify-content: center;
    position: absolute;
    top: 274px;
    z-index: -10;
    width: 100%;
    overflow: hidden;
}

/* Path for desktop */
#path-position-desktop {
    position: relative;
    left: 50%;
    width: 0;
}

#path-desktop {
    display: none;
    position: absolute;
    left: -558px;
    top: -71px;
    z-index: -15;
}


/* ======================================================================================================================== */
/* =============== Media Query ===============*/

@media only screen and (min-width: 992px) {

    /* ---------- Main - Introduction Path Section (desktop) ---------- */

    #mountains-desktop {
        display: flex;
    }

    /* Removes mountains (mobile) */
    #mountains {
        display: none;
    }

    #path-position {
        display: none;
    }

    #path-desktop {
        display: unset;
    }

    .fp-textbox {
        padding: 24px;
    }


    /* ---------- Main - Introduction Section (desktop) ---------- */

    #introduction-headline h3 {
        width: 100%;
    }

    #introduction {
        margin: 400px 0 280px 0;
        gap: 212px;
    }

    #introduction-title {
        gap: 24px;
        padding-top: unset;
    }

    #introduction-headline {
        padding: unset;
    }


    /* ---------- Main - Front Page Content Section (desktop) ---------- */

    #front-page-content {
        margin-top: 68px;
        margin-bottom: 140px;
    }

    #front-page-content-box {
        gap: 212px;
        padding: 0 24px;
    }


    /* ---------- Main - Front Page CTA (desktop) ---------- */

    #fp-call-to-action {
        gap: 70px;
    }

    #fp-headline {
        width: 100%;
    }
}