@import url("general.css");

body,
html {
    font-size: 16px;
    margin: 0;
    padding: 0;
    font-family: Metropolis, sans-serif;
    background-color: #efede1;
    height: 100%;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

.desktop .header {
    top: 0;
    left: 0;
    padding-top: 50px;
}

.desktop .header-container {
    padding: 30px 6.94vw;
}

.back-page-symbol {
    display: none;
    /* Add any additional styling you want for the symbol here */
}

body.back-page .back-page-symbol {
    display: initial;
    font-size: 1.5rem;
    background: none;
    border: none;
    outline: none;
    box-shadow: none;
    cursor: pointer;
    float: right;
}

.desktop .text-wrapper-13 {
    position: relative;
    width: fit-content;
    font-family: "Metropolis-Black", Helvetica, sans-serif;
    font-weight: 900;
    font-size: 3.125rem;
    letter-spacing: 0;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
}

.desktop .main {
    width: 100vw;
    left: 0;
    height: 100%;
    margin-top: 5%;
    padding-left: 2.5%;
    position: relative;
    margin-bottom: 10%;
}

.desktop .main-container-p1 {
    display: inline-flex;
    align-items: center;
    width: 100vw;
    margin-left: 2.5%;
    margin-right: 2.5%;
    padding-top: 8%;
}

.desktop .right-container-p1 {
    position: relative;
}

.desktop .overlap-group-p1 {
    position: relative;
    width: 30vw;
    height: 100vh;
}

.desktop .forest-container-p1 {
    position: absolute;
    background-color: #cccccc;
    background-image: url("../images/1600x1200v8.png");
    background-size: contain;
    width: 93.75vw;
    height: 27vw;
    border-radius: 16px;
    top: 0;
    left: 0;
}

.desktop .rectangle-p1 {
    position: absolute;
    width: 47.08vw;
    height: auto;
    top: 0.38vh;
    left: 0.69vw;
}

.desktop .vector-container-p1 {
    position: absolute;
    width: 6vw;
    height: auto;
    top: 7vw;
    left: 8.13vw;
    animation: moveAndScale 1s ease-in-out;
}

.desktop .left-container-p1 {
    align-self: flex-start;
    width: 63vw;
    height: 100%;
    display: flex;
    flex-flow: column;
    margin-right: 5%;
}


.desktop .text-wrapper-2-p1 {
    font-family: "Metropolis-ExtraBold", Helvetica, sans-serif;
    font-weight: 800;
    color: #000000;
    font-size: clamp(0.5rem, -0.4454rem + 6.0504vw, 5rem);
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
}

.desktop .p-p1 {
    position: relative;
    width: 61.53vw;
    font-family: "Metropolis-SemiBold", Helvetica, sans-serif;
    font-weight: 600;
    color: #000000;
    font-size: clamp(0.5rem, 0.2479rem + 1.6134vw, 1.7rem);
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
}

.text-container2-p1 {
    display: inline-flex;
    flex-flow: row;
    align-items: flex-start;
    justify-content: space-around;
}

.desktop .text-wrapper-3-p1 {
    font-family: "Metropolis-Black", Helvetica, sans-serif;
    font-weight: 900;
    color: #000000;
    font-size: clamp(0.5rem, -0.9706rem + 9.4118vw, 7.5rem);
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
    padding-left: 5%;

    transition: font-size 0.3s ease;
    transform-origin: center;
    list-style: none;
    align-self: flex-start;
}

.desktop .text-wrapper-3-p1:hover {
    font-size: clamp(1rem, -0.5756rem + 10.084vw, 8.5rem);
    cursor: pointer;
}

.desktop .text-wrapper-4-p1 {
    font-family: "Metropolis-Black", Helvetica, sans-serif;
    font-weight: 900;
    color: #000000;
    font-size: clamp(0.5rem, -0.9706rem + 9.4118vw, 7.5rem);
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
    transition: font-size 0.3s ease;
    list-style: none;
    align-self: flex-start;
    padding-right: 5%;
}

.desktop .text-wrapper-4-p1:hover {
    font-size: clamp(1rem, -0.5756rem + 10.084vw, 8.5rem);
    cursor: pointer;
}

.desktop .left-container-p1 input,
.desktop .right-container-p5 input {
    visibility: hidden;
}


.desktop .text-wrapper-3-p1.clicked,
.desktop .text-wrapper-4-p1.clicked {
    font-size: clamp(1rem, -0.5756rem + 10.084vw, 8.5rem);
}


.desktop .button-container-p2,
.desktop .button-container-p1 {
    all: unset;
    padding: 1.85vh 3.48vw;
    background-color: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    margin-top: 5%;
    display: none;


    width: fit-content;
    font-family: "Metropolis-ExtraBold", Helvetica, sans-serif;
    font-weight: 800;
    font-size: clamp(0.5rem, 0.2269rem + 1.7479vw, 1.8rem);
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
    text-align: center;
    align-self: center;
}

.desktop .button-container-p9:hover,
.desktop .button-container-p8:hover,
.desktop .button-container-p7:hover,
.desktop .button-container-p6:hover,
.desktop .button-container-p5:hover,
.desktop .button-container-p4:hover,
.desktop .button-container-p3:hover,
.desktop .button-container-p2:hover,
.desktop .button-container-p1:hover {
    background-color: #434343;
    color: #ffffff;
    cursor: pointer;
}


/* CSS PAGE 2*/

.desktop .main-container-p2 {
    display: inline-flex;
    align-items: center;
    width: 100vw;
    margin-left: 2.5%;
    margin-right: 2.5%;
    padding-top: 8%;
    flex-flow: wrap;
}

.desktop .left-container-p2 {
    position: relative;
}

.desktop .overlap-group-p2 {
    position: relative;
    width: 30vw;
    height: 100vh;
}

.desktop .forest-container-p2 {
    position: absolute;
    background-color: #cccccc;
    background-image: url("../images/1600x1200v8.png");
    background-size: contain;
    width: 93.75vw;
    height: 27vw;
    border-radius: 16px;
    top: 0;
    right: 3vw;
}


.desktop .vector-container-p2 {
    position: absolute;
    width: 9.5vw;
    height: auto;
    top: 7vw;
    left: 8.13vw;
    animation: leftTOright 1s ease-in-out;
}

.desktop .right-container-p2 {
    align-self: flex-start;
    width: 63vw;
    height: 100%;
    display: flex;
    flex-flow: column;
    margin-right: 5%;
}

.input-container-p2 {
    all: unset;
    padding: 1.2em 4.8em 1.2em 4.8em;
    background-color: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    margin-top: 5%;


    width: fit-content;
    font-family: "Metropolis-ExtraBold", Helvetica, sans-serif;
    font-weight: 600;
    font-size: clamp(1rem, 0.8404rem + 0.5106vw, 1.3rem);
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
    text-align: center;
    align-self: center;
}


/* CSS PAGE 3*/

.desktop .middle-container-p3 {
    width: 63vw;
    height: 100%;
    display: flex;
    flex-flow: column;
}

.desktop .vector-container-p3 {
    align-self: flex-start;
    width: 9.5vw;
    height: auto;
    padding-right: 5%;
    animation: leftTOright 1s ease-in-out;
}

.desktop .vector2-container-p3 {
    align-self: flex-start;
    width: 5vw;
    height: auto;
    padding-left: 5%;
}

.desktop .text-wrapper-2-p3 {
    font-family: "Metropolis-ExtraBold", Helvetica, sans-serif;
    font-weight: 800;
    color: #000000;
    font-size: clamp(0.5rem, -0.4454rem + 6.0504vw, 5rem);
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
}

.desktop .p-p3 {
    font-family: "Metropolis-SemiBold", Helvetica, sans-serif;
    font-weight: 600;
    color: #000000;
    font-size: clamp(0.5rem, 0.2479rem + 1.6134vw, 1.7rem);
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
}


.desktop .main-container-p3 {
    display: inline-flex;
    align-items: center;
    width: 100vw;
    margin-left: 2.5%;
    margin-right: 2.5%;
    padding-top: 8%;
}

.desktop .select-container {
    all: unset;
    padding: 1.2em 4.8em 1.2em 4.8em;
    background-color: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    margin-top: 5%;


    width: fit-content;
    font-family: "Metropolis-ExtraBold", Helvetica, sans-serif;
    font-weight: 600;
    font-size: clamp(1rem, 0.8404rem + 0.5106vw, 1.3rem);
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
    text-align: center;
    align-self: center;
}

.desktop .button-container-p3 {

    all: unset;
    display: none;
    padding: 1.85vh 3.48vw;
    background-color: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    margin-top: 5%;

    width: fit-content;
    font-family: "Metropolis-ExtraBold", Helvetica, sans-serif;
    font-weight: 800;
    font-size: clamp(0.5rem, 0.2269rem + 1.7479vw, 1.8rem);
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
    text-align: center;
    align-self: center;
}


/* CSS PAGE 4*/

.desktop .main-container-p4 {
    display: inline-flex;
    align-items: center;
    width: 100vw;
    margin-left: 2.5%;
    margin-right: 2.5%;
    padding-top: 8%;
}

.desktop .left-container-p4 {
    align-self: flex-start;
    width: 63vw;
    height: 100%;
    display: flex;
    flex-flow: column;
    margin-right: 5%;
}


.desktop .text-wrapper-2-p4 {
    font-family: "Metropolis-ExtraBold", Helvetica, sans-serif;
    font-weight: 800;
    color: #000000;
    font-size: clamp(1rem, 0.3697rem + 4.0336vw, 4rem);
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
}

.desktop .p-p4 {
    font-family: "Metropolis-SemiBold", Helvetica, sans-serif;
    font-weight: 600;
    color: #000000;
    font-size: clamp(0.5rem, 0.2479rem + 1.6134vw, 1.7rem);
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
}

.desktop .select-container-p4 {
    all: unset;
    padding: 1.2em 4.8em 1.2em 4.8em;
    background-color: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    margin-top: 5%;


    width: fit-content;
    font-family: "Metropolis-ExtraBold", Helvetica, sans-serif;
    font-weight: 600;
    font-size: clamp(1rem, 0.8404rem + 0.5106vw, 1.3rem);
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
    text-align: center;
    align-self: center;
}


.desktop .button-container-p4 {

    all: unset;
    padding: 1.85vh 3.48vw;
    background-color: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    margin-top: 5%;
    display: none;


    width: fit-content;
    font-family: "Metropolis-ExtraBold", Helvetica, sans-serif;
    font-weight: 800;
    font-size: clamp(0.5rem, 0.2269rem + 1.7479vw, 1.8rem);
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
    text-align: center;
    align-self: center;
}

.right-container-p4 {
    position: relative;
}

.desktop .overlap-group-p4 {
    position: relative;
    width: 30vw;
    height: 100vh;
}


.desktop .ballroom-container-p4 {
    position: absolute;
    background-color: #cccccc;
    background-image: url("../images/1600x1200v3.png");
    background-size: contain;
    width: 93.75vw;
    height: 27vw;
    border-radius: 16px;
    top: 0;
    left: 0;
}

.desktop .vector-container-p4 {
    position: absolute;
    width: 9.5vw;
    height: auto;
    top: 7vw;
    left: 8.13vw;
    animation: moveAndScale 1s ease-in-out;

}


/* CSS PAGE 5*/

.main-container-p5 {
    display: inline-flex;
    align-items: center;
    width: 100vw;
    margin-left: 2.5%;
    margin-right: 2.5%;
    padding-top: 8%;
}

.left-container-p5 {
    position: relative;
}

.desktop .overlap-group-p5 {
    position: relative;
    width: 30vw;
    height: 100vh;
}

.desktop .ballroom-container-p5 {
    position: absolute;
    background-color: #cccccc;
    background-image: url("../images/1600x1200v3.png");
    background-size: contain;
    width: 93.75vw;
    height: 27vw;
    border-radius: 16px;
    top: 0;
    right: 3vw;
}


.desktop .vector-container-p5 {
    position: absolute;
    width: 9.5vw;
    height: auto;
    top: 7vw;
    left: 5.13vw;
    animation: leftTOright 1s ease-in-out;

}

.desktop .vector2-container-p5 {
    position: absolute;
    width: 5vw;
    height: auto;
    top: 7vw;
    left: 19.13vw;
}

.desktop .right-container-p5 {
    align-self: flex-start;
    width: 63vw;
    height: 100%;
    display: flex;
    flex-flow: column;
    margin-right: 5%;
}


.desktop .text-wrapper-2-p5 {
    font-family: "Metropolis-ExtraBold", Helvetica, sans-serif;
    font-weight: 800;
    color: #000000;
    font-size: clamp(1rem, 0.3697rem + 4.0336vw, 4rem);
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
}

.desktop .p-p5 {
    font-family: "Metropolis-SemiBold", Helvetica, sans-serif;
    font-weight: 600;
    color: #000000;
    font-size: clamp(0.5rem, 0.2479rem + 1.6134vw, 1.7rem);
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
}

.text-container2-p5 {
    margin-top: 5%;
    display: inline-flex;
    flex-flow: row;
    justify-content: space-between;
}

.desktop .text-wrapper-3-p5 {
    font-family: "Metropolis-Black", Helvetica, sans-serif;
    font-weight: 900;
    color: #000000;
    font-size: clamp(0.5rem, -0.9706rem + 9.4118vw, 7.5rem);
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
    transition: font-size 0.3s ease;
    transform-origin: center;
    list-style: none;
    align-self: flex-start;
    padding-left: 7%;
}

.desktop .text-wrapper-4-p5 {
    font-family: "Metropolis-Black", Helvetica, sans-serif;
    font-weight: 900;
    color: #000000;
    font-size: clamp(0.5rem, -0.9706rem + 9.4118vw, 7.5rem);
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
    transition: font-size 0.3s ease;
    list-style: none;
    align-self: flex-start;
    padding-right: 13%;
}

.desktop .text-wrapper-4-p5:hover,
.desktop .text-wrapper-3-p5:hover {
    font-size: clamp(1rem, -0.5756rem + 10.084vw, 8.5rem);
    cursor: pointer;
}

.desktop .text-wrapper-4-p5.scaled,
.desktop .text-wrapper-3-p5.scaled {
    font-size: clamp(1rem, -0.5756rem + 10.084vw, 8.5rem);
}

.desktop .button-container-p5 {

    all: unset;
    padding: 1.85vh 3.48vw;
    background-color: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    margin-top: 5%;
    display: none;


    width: fit-content;
    font-family: "Metropolis-ExtraBold", Helvetica, sans-serif;
    font-weight: 800;
    font-size: clamp(0.5rem, 0.2269rem + 1.7479vw, 1.8rem);
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
    text-align: center;
    align-self: center;
}


/* CSS PAGE 6*/

.main-container-p6 {
    display: inline-flex;
    align-items: center;
    width: 100vw;
    margin-left: 2.5%;
    margin-right: 2.5%;
    padding-top: 8%;
}

.desktop .left-container-p6 {
    align-self: flex-start;
    width: 58vw;
    height: 100%;
    display: flex;
    flex-flow: column;
    margin-right: 5%;
}


.desktop .text-wrapper-2-p6 {
    font-family: "Metropolis-ExtraBold", Helvetica, sans-serif;
    font-weight: 800;
    color: #000000;
    font-size: clamp(1rem, 0.3697rem + 4.0336vw, 4rem);
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
}

.desktop .p-p6 {
    font-family: "Metropolis-SemiBold", Helvetica, sans-serif;
    font-weight: 600;
    color: #000000;
    font-size: clamp(0.5rem, 0.2479rem + 1.6134vw, 1.7rem);
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
}

.desktop .select-container-p6 {
    all: unset;
    padding: 1.2em 4.8em 1.2em 4.8em;
    background-color: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    margin-top: 5%;


    width: fit-content;
    font-family: "Metropolis-ExtraBold", Helvetica, sans-serif;
    font-weight: 600;
    font-size: clamp(1rem, 0.8404rem + 0.5106vw, 1.3rem);
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
    text-align: center;
    align-self: center;
}

.desktop .input-container-p6 {
    all: unset;
    padding: 1.2em 4.8em 1.2em 4.8em;
    background-color: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    margin-top: 5%;


    width: fit-content;
    font-family: "Metropolis-ExtraBold", Helvetica, sans-serif;
    font-weight: 600;
    font-size: clamp(1rem, 0.8404rem + 0.5106vw, 1.3rem);
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
    text-align: center;
    align-self: center;
}


.desktop .button-container-p6 {

    all: unset;
    padding: 1.85vh 3.48vw;
    background-color: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    margin-top: 5%;
    display: none;


    width: fit-content;
    font-family: "Metropolis-ExtraBold", Helvetica, sans-serif;
    font-weight: 800;
    font-size: clamp(0.5rem, 0.2269rem + 1.7479vw, 1.8rem);
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
    text-align: center;
    align-self: center;
}


.desktop .overlap-group-p6 {
    position: relative;
    width: 30vw;
    height: 100vh;
}


.desktop .ballroom-container-p6 {
    position: absolute;
    background-color: #cccccc;
    background-image: url("../images/1600x1200v10.png");
    background-size: contain;
    width: 36vw;
    height: 27vw;
    border-radius: 16px;
    top: 0;
    left: 0;
}

.desktop .vector-container-p6 {
    position: absolute;
    width: 9.5vw;
    height: auto;
    top: 7vw;
    left: 8.13vw;
    animation: moveAndScale 1s ease-in-out;

}


/* CSS PAGE 7*/

.main-container-p7 {
    display: inline-flex;
    flex-flow: row-reverse;
    align-items: center;
    width: 100vw;
    margin-left: 2.5%;
    margin-right: 2.5%;
    padding-top: 8%;
}

.desktop .overlap-group-p7 {
    position: relative;
    width: 30vw;
    height: 100vh;
}


.desktop .ballroom-container-p7 {
    position: absolute;
    background-color: #cccccc;
    background-image: url("../images/1600x1200v10.png");
    background-size: contain;
    width: 36vw;
    height: 27vw;
    border-radius: 16px;
    top: 0;
    right: 3vw;
}

.desktop .vector-container-p7 {
    position: absolute;
    width: 25.5vw;
    height: auto;
    top: 0vw;
    animation: leftTOright 1s ease-in-out;

}

.desktop .right-container-p7 {
    align-self: flex-start;
    width: 63vw;
    height: 100%;
    display: flex;
    flex-flow: column;
    margin-right: 5%;
}


.desktop .text-wrapper-2-p7 {
    font-family: "Metropolis-ExtraBold", Helvetica, sans-serif;
    font-weight: 800;
    color: #000000;
    font-size: clamp(1rem, 0.3697rem + 4.0336vw, 4rem);
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
}

.desktop .p-p7 {
    font-family: "Metropolis-SemiBold", Helvetica, sans-serif;
    font-weight: 600;
    color: #000000;
    font-size: clamp(0.5rem, 0.2479rem + 1.6134vw, 1.7rem);
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
}

.desktop .select-container-p7 {
    all: unset;
    padding: 1.2em 4.8em 1.2em 4.8em;
    background-color: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    margin-top: 5%;


    width: fit-content;
    font-family: "Metropolis-ExtraBold", Helvetica, sans-serif;
    font-weight: 600;
    font-size: clamp(1rem, 0.8404rem + 0.5106vw, 1.3rem);
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
    text-align: center;
    align-self: center;
}

.desktop .input-container-p7 {
    all: unset;
    padding: 1.2em 4.8em 1.2em 4.8em;
    background-color: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    margin-top: 5%;


    width: fit-content;
    font-family: "Metropolis-ExtraBold", Helvetica, sans-serif;
    font-weight: 600;
    font-size: clamp(1rem, 0.8404rem + 0.5106vw, 1.3rem);
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
    text-align: center;
    align-self: center;
}

.desktop .text-wrapper-3-p7 {
    font-family: "Metropolis-SemiBold", Helvetica, sans-serif;
    font-weight: 600;
    font-size: clamp(0.5rem, 0.3529rem + 0.9412vw, 1.2rem);
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
    padding-top: 5%;
}

.desktop .button-container-p7 {

    all: unset;
    padding: 1.85vh 3.48vw;
    background-color: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    margin-top: 5%;
    display: none;



    width: fit-content;
    font-family: "Metropolis-ExtraBold", Helvetica, sans-serif;
    font-weight: 800;
    font-size: clamp(0.5rem, 0.2269rem + 1.7479vw, 1.8rem);
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
    text-align: center;
    align-self: center;
}

/* CSS PAGE 8*/

.main-container-p8 {
    display: inline-flex;
    align-items: center;
    width: 100vw;
    margin-left: 2.5%;
    margin-right: 2.5%;
    padding-top: 8%;

}

.desktop .left-container-p8 {
    align-self: flex-start;
    width: 58vw;
    height: 100%;
    display: flex;
    flex-flow: column;
    margin-right: 5%;
}


.desktop .text-wrapper-2-p8 {
    font-family: "Metropolis-ExtraBold", Helvetica, sans-serif;
    font-weight: 800;
    color: #000000;
    font-size: clamp(1rem, 0.3697rem + 4.0336vw, 4rem);
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
}

.desktop .p-p8 {
    font-family: "Metropolis-SemiBold", Helvetica, sans-serif;
    font-weight: 600;
    color: #000000;
    font-size: clamp(0.5rem, 0.2479rem + 1.6134vw, 1.7rem);
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
}

.desktop .select-container-p8 {
    all: unset;
    padding: 1.2em 4.8em 1.2em 4.8em;
    background-color: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    margin-top: 5%;

    width: fit-content;
    font-family: "Metropolis-ExtraBold", Helvetica, sans-serif;
    font-weight: 600;
    font-size: clamp(1rem, 0.8404rem + 0.5106vw, 1.3rem);
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
    text-align: center;
    align-self: center;
}

.desktop .input-container-p8 {
    all: unset;
    padding: 1.2em 4.8em 1.2em 4.8em;
    background-color: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    margin-top: 5%;


    width: fit-content;
    font-family: "Metropolis-ExtraBold", Helvetica, sans-serif;
    font-weight: 600;
    font-size: clamp(1rem, 0.8404rem + 0.5106vw, 1.3rem);
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
    text-align: center;
    align-self: center;
}


.desktop .button-container-p8 {

    all: unset;
    padding: 1.85vh 3.48vw;
    background-color: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    margin-top: 5%;
    display: none;



    width: fit-content;
    font-family: "Metropolis-ExtraBold", Helvetica, sans-serif;
    font-weight: 800;
    font-size: clamp(0.5rem, 0.2269rem + 1.7479vw, 1.8rem);
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
    text-align: center;
    align-self: center;
}

.desktop .image-container-p8 {
    position: relative;
    width: 30vw;
    height: 100vh;
}

.desktop .image-container-p8 .image {
    position: absolute;
    width: 25.5vw;
    height: auto;
    top: 0vw;
}

/* CSS PAGE 9*/

.main-container-p9 {
    display: inline-flex;
    flex-flow: column;
    align-items: center;
    width: 90vw;
    height: auto;
    margin-left: 2.5%;
    margin-right: 2.5%;
    position: relative;
    padding-top: 8%;
}


.desktop .section-container {
    display: flex;
    justify-content: space-around;
    align-items: baseline;
    width: 100%;
}

.desktop .page-container {
    display: flex;
    flex-flow: row;
    align-items: center;
    width: 40vw;
    height: auto;
    position: relative;
}

.desktop .image-container {
    flex: 1;
}

.desktop .animal-options {
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
    margin-left: 5%;
    width: 90vw;
    height: auto;
    margin-bottom: 10%;
    margin-top: 10%;
    flex-flow: column;
    align-self: center;

}


.desktop .animal-container {
    width: calc(25% - 15px);
    margin-bottom: 20px;
    display: inline-flex;
    flex-flow: column;
    align-items: center;
}

.desktop #prevButton {
    display: initial;
    font-size: clamp(0.5rem, -0.0252rem + 3.3613vw, 3rem);
    background: none;
    border: none;
    outline: none;
    box-shadow: none;
    cursor: pointer;
    padding-left: 15%;
}

.desktop #nextButton {
    display: initial;
    font-size: clamp(0.5rem, -0.0252rem + 3.3613vw, 3rem);
    background: none;
    border: none;
    outline: none;
    box-shadow: none;
    cursor: pointer;
    padding-right: 15%;

}

.animal-container {
    all: unset;
    margin-top: 5%;
    list-style: none;

    width: fit-content;
    font-family: "Metropolis-ExtraBold", Helvetica, sans-serif;
    font-weight: 800;
    font-size: clamp(0.5rem, 0.2269rem + 1.7479vw, 1.8rem);
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
    text-align: center;
    align-self: center;
}

.animal-container input {
    position: absolute;
    visibility: hidden;
}

.desktop .text-wrapper-2-p9 {
    font-family: "Metropolis-ExtraBold", Helvetica, sans-serif;
    font-weight: 800;
    color: #000000;
    font-size: clamp(0.5rem, 0.2479rem + 1.6134vw, 1.7rem);
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
}

.desktop .p-p9 {
    font-family: "Metropolis-SemiBold", Helvetica, sans-serif;
    font-weight: 600;
    color: #000000;
    font-size: clamp(0.5rem, 0.2479rem + 1.6134vw, 1.7rem);
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
}

.desktop .animal-container .image {
    width: 15vw;
    height: auto;
    margin-bottom: 20%;
}

.desktop .animal-container .image-container .image:hover {
    scale: 1.3;
    cursor: pointer;
}

.desktop .button-container-p9 {

    all: unset;
    padding: 1.85vh 3.48vw;
    background-color: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    margin-top: 5%;
    display: none;

    width: fit-content;
    font-family: "Metropolis-ExtraBold", Helvetica, sans-serif;
    font-weight: 800;
    font-size: clamp(0.5rem, 0.2269rem + 1.7479vw, 1.8rem);
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
    text-align: center;
    align-self: center;
}

.clicked {
    scale: 1.3;
}

footer {
    display: none;
}

@media only screen and (min-width: 601px) and (max-width: 1200px) {

    body {
        display: flex;
        flex-direction: column;
        height: 100vh;
        width: 100vw;
        margin: 0;
        padding: 0;
        overflow-x: hidden;
    }

    main {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        width: 100%;
        height: 100%;
        overflow: hidden;
        padding-top: 30%;
    }

    footer {
        display: block;
        height: 20%;
    }

    .footer-container {
        display: flex;
        flex-direction: column;
        height: auto;
        align-items: center;
        justify-content: space-between;
        padding: 30px 30px;
        position: relative;
        background-color: #ffffff;
    }

    .desktop .headlinefooter {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        position: relative;
        flex: 0 0 auto;
    }

    .desktop .how-easy-life-is {
        position: relative;
        width: fit-content;
        font-family: "Metropolis-Black", Helvetica, sans-serif;
        font-weight: 900;
        color: #000000;
        font-size: clamp(0.2rem, 0.5500rem + 0.7100vw, 2rem);
        text-align: center;
        letter-spacing: 0;
        line-height: 1;
        white-space: nowrap;
        padding-bottom: 10px;
    }

    .desktop .textfooter-container {
        display: inline-flex;
        align-items: flex-start;
        justify-content: center;
        gap: 1.74vw;
        position: relative;
        flex: 0 0 auto;
    }

    .desktop .flexcontainer {
        width: 27.78vw;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.69vh;
    }

    .desktop .text {
        position: relative;
        align-self: stretch;
        font-family: "Metropolis-Bold", Helvetica, sans-serif;
        font-weight: 400;
        color: #000000;
        font-size: clamp(0.5rem, 0.3311rem + 0.5405vw, 1rem);
        letter-spacing: 0;
        line-height: 1;
    }

    .desktop .text-wrapper {
        font-weight: 700;
    }

    .desktop .span {
        font-family: "Metropolis-Medium", Helvetica, sans-serif;
        font-weight: 500;
    }

    .desktop .flexcontainer-2 {
        width: 35.14vw;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.69vh;
    }

    .desktop .p {
        position: relative;
        align-self: stretch;
        font-family: "Metropolis-Medium", Helvetica, sans-serif;
        font-weight: 400;
        color: #000000;
        font-size: clamp(0.5rem, 0.3311rem + 0.5405vw, 1rem);
        text-align: center;
        letter-spacing: 0;
        line-height: 1;
    }

    .desktop .text-wrapper-2 {
        font-weight: 500;
        text-decoration: none;
    }

    .desktop .text-wrapper-3 {
        font-family: "Metropolis-Bold", Helvetica, sans-serif;
        font-weight: 700;
        text-decoration: none;
    }

    .desktop .text-wrapper-4 {
        font-weight: 500;
    }

    .desktop .text-wrapper-5 {
        font-family: "Metropolis-SemiBold", Helvetica, sans-serif;
        font-weight: 600;
    }

    .desktop .flexcontainer-3 {
        width: 20.35vw;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.69vh;
    }

    .desktop .span-wrapper {
        position: relative;
        align-self: stretch;
        font-family: "Metropolis-Bold", Helvetica, sans-serif;
        font-weight: 700;
        color: #000000;
        font-size: 1rem;
        text-align: right;
        letter-spacing: 0;
        line-height: 1;
    }

    .desktop .text-wrapper-6 {
        font-family: "Metropolis-Bold", Helvetica, sans-serif;
        font-weight: 700;
        font-size: clamp(0.5rem, 0.3311rem + 0.5405vw, 1rem);
        letter-spacing: 0;
    }
}

@media only screen and (max-width: 600px) {

    .main-container-p9,
    .main-container-p7,
    .main-container-p6,
    .main-container-p5,
    .main-container-p4,
    .main-container-p3,
    .main-container-p2,
    .main-container-p1 {
        padding-top: 20%;
        margin-left: 0;
        width: 100%;
    }


    .main {
        padding-left: 0%;
    }

    .desktop .left-container-p7,
    .desktop .right-container-p6,
    .desktop .left-container-p5,
    .desktop .right-container-p4,
    .vector2-container-p3,
    .vector-container-p3,
    .desktop .left-container-p2,
    .desktop .right-container-p1 {
        display: none;
    }

    .desktop .right-container-p7,
    .desktop .left-container-p6,
    .desktop .right-container-p5,
    .desktop .left-container-p4,
    .desktop .middle-container-p3,
    .desktop .right-container-p2,
    .desktop .p-p1,
    .desktop .left-container-p1 {
        width: 100%;
    }
    
    .text-container2-p1 {
        padding-top: 10%;
    }


    .desktop .animal-container .image {
        width: 40vw;
        height: 100vh;
    }

    .desktop .text-wrapper-2-p1 {
        font-size: clamp(1rem, 1rem + 4vw, 2.5rem);
    }

    .desktop .text-wrapper-2-p3,
    .desktop .text-wrapper-2-p4,
    .text-wrapper-2-p5,
    .text-wrapper-2-p6,
    .text-wrapper-2-p7,
    .text-wrapper-2-p8 {
        font-size: clamp(1rem, 1rem + 1.8333vw, 1.6875rem);
        text-align: center;
    }


    .desktop .select-container-p7,
    .desktop .select-container-p8,
    .desktop .select-container-p6,
    .desktop .select-container-p4,
    .desktop .select-container {
        padding: 1.2em 0.8em 1.2em 0.8em;
    }

    .desktop .page-container {
        width: 100%;
    }

    .desktop .animal-options {
        margin-top: 15%;
        width: 100%;
        margin-left: 0;
    }

    .desktop .animal-container .image {
        height: auto;
    }

    .desktop .button-container-p9 {
        left: 0;
    }

    .desktop .left-container-p8 {
        width: 80%;
        margin-left: 5%;
    }

    .right-container-p8 {
        width: 80%;
        align-self: center;
        padding-top: 20%;

    }


    .desktop .image-container-p8 {
        width: 80%;
        height: auto;
        padding-left: 10%;

    }

    .desktop .image-container-p8 .image {
        width: inherit;
        height: auto;
    }

    .main-container-p8 {
        display: inline-flex;
        flex-flow: column;
    }

    
}

@keyframes moveAndScale {
    0% {
        transform: translateX(200%) scale(0);
    }

    100% {
        transform: translateX(0) scale(1.0);
    }
}


@keyframes leftTOright {
    0% {
        transform: translateX(-150vw) scale(0);
    }

    100% {
        transform: translateX(0) scale(1.0);
    }
}