* {

    box-sizing: border-box;

}

body {

    margin: 0;

    background: #f7f6f2;

    color: #2d2d2d;

    font-family: 'Poppins', sans-serif;

    overflow-x: hidden;

}

/* HERO */

.hero {

    position: relative;

    height: 460px;

    overflow: hidden;

    background-image:
    url('img/hero-achtergrond.jpg');

    background-size: cover;

    background-position: center;
    
    border-radius: 34px;    

}

.hero-overlay {

    position: absolute;

    inset: 0;

    background:
    linear-gradient(
        90deg,
        rgba(255,248,238,0.92) 0%,
        rgba(255,248,238,0.75) 45%,
        rgba(255,248,238,0.08) 100%
    );

    z-index: 1;

}

.hero-content {

    position: relative;

    z-index: 5;

    max-width: 650px;

    padding:
        70px
        60px;

}

.hero-subtitle {

    font-size: 20px;

    color: #57743e;

    font-weight: 600;

    margin-bottom: 10px;

}

.hero-title {

    font-size: 42px;

    line-height: 1.15;

    margin: 0;

    color: #355326;

    max-width: 700px;

    word-break: normal;

}

.hero-divider {

    width: 220px;

    height: 3px;

    background: #6f9342;

    margin:
        30px
        0;

    position: relative;

    z-index: 10;

}

.hero-text {

    font-size: 20px;

    line-height: 1.8;

    max-width: 520px;

}

.hero-car {

    position: absolute;

    right: 60px;

    bottom: 0;

    width: 560px;

    z-index: 6;

}

.hero-logo {

    position: absolute;

    right: 50px;

    top: 30px;

    width: 150px;

    z-index: 20;

}

.hero-compass {

    position: absolute;

    left: 35px;

    bottom: 35px;

    width: 130px;

    opacity: 0.10;

    z-index: 2;

}

.hero-wrapper {

    max-width: 1450px;

    margin: 25px auto 0 auto;

    padding: 0 25px;

}

/* CONTAINER */

.container {

    position: relative;

    z-index: 10;

    max-width: 1250px;

    margin:
        20px
        auto
        0
        auto;

    padding:
        0
        25px
        80px;

}

/* BIGGY */

.biggy-box {

    background: white;

    border-radius: 28px;

    padding: 30px;

    box-shadow:
    0 10px 30px rgba(0,0,0,0.08);

    margin-bottom: 40px;

}

.biggy-top {

    display: flex;

    align-items: center;

    gap: 20px;

    margin-bottom: 30px;

}

.biggy-icon {

    width: 80px;

    height: 80px;

    min-width: 80px;

    border-radius: 50%;

    background: #e4ecd4;

    display: flex;

    align-items: center;

    justify-content: center;

}

.biggy-image {

    width: 52px;

    height: 52px;

    object-fit: contain;

}

.biggy-content h3 {

    margin: 0;

    font-size: 36px;

    color: #355326;

}

.biggy-content p {

    margin-top: 10px;

    color: #666;

    font-size: 18px;

}

/* BIGGY INPUT */

.biggy-input {

    display: flex;

    gap: 12px;

    justify-content: flex-end;

}

.biggy-char {

    width: 60px;

    height: 72px;

    border-radius: 14px;

    border: 2px solid #d9ddcf;

    text-align: center;

    font-size: 30px;

    font-weight: 700;

    background: #fff;

}

.biggy-char:focus {

    outline: none;

    border-color: #c2e088;

    box-shadow:
    0 0 0 4px rgba(194,224,136,0.25);

}

/* MOBILE BIGGY */

.biggy-mobile-input {

    display: none;

}

/* TITEL */

.answers-title {

    display: flex;

    align-items: center;

    gap: 15px;

    font-size: 44px;

    color: #355326;

    margin:
        50px
        0
        40px;

}

/* GRID */

.answers-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 22px 50px;

}

.answer-item {

    display: flex;

    align-items: center;

    gap: 16px;

}

.question-number {

    min-width: 46px;

    height: 46px;

    border-radius: 50%;

    background: #6f9342;

    color: white;

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: 700;

}

.input-wrapper {

    position: relative;

    flex: 1;

}

.input-wrapper > i {

    position: absolute;

    left: 18px;

    top: 50%;

    transform: translateY(-50%);

    color: #888;

}

.input-wrapper input {

    width: 100%;

    padding:
        18px
        20px
        18px
        52px;

    border-radius: 16px;

    border: 2px solid #dde2d5;

    font-size: 17px;

    background: white;

    font-family: 'Poppins', sans-serif;

}

.input-wrapper input:focus {

    outline: none;

    border-color: #c2e088;

    box-shadow:
    0 0 0 4px rgba(194,224,136,0.25);

}

/* BUTTON */

.submit-container {

    text-align: center;

    margin-top: 70px;

}

.submit-button {

    border: none;

    background:
    linear-gradient(
        180deg,
        #6f9342,
        #4f6d2b
    );

    color: white;

    padding:
        24px
        55px;

    border-radius: 24px;

    font-size: 30px;

    font-weight: 600;

    cursor: pointer;

    box-shadow:
    0 12px 30px rgba(0,0,0,0.2);

}

.submit-button:hover {

    transform: translateY(-3px);

}

/* DECOR */

.decor-route {

    position: fixed;

    left: 0;

    bottom: 120px;

    width: 260px;

    opacity: 0.14;

    pointer-events: none;

}

.decor-tracks {

    position: fixed;

    right: 0;

    bottom: 50px;

    width: 340px;

    opacity: 0.10;

    pointer-events: none;

}

/* DEVICE SWITCH */

.desktop-only {

    display: block;

}

.mobile-only {

    display: none;

}

/* MOBIEL */

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

    .hero {

        height: 300px;

    }

    .hero-content {

        padding: 30px 25px;
        padding-top: 90px;

    }

    .hero-title {

        font-size: 44px;

    }

    .hero-subtitle {

        font-size: 18px;

    }

    .hero-text {

        font-size: 16px;

        max-width: 260px;

    }

    .hero-car {

        width: 340px;

        right: -40px;

        bottom: 0;

    }

    .hero-logo {

        width: 90px;

        top: 15px;

        right: 15px;

    }

    .hero-compass {

        width: 70px;

        left: 10px;

        bottom: 10px;

    }


    .container {

        margin-top: 20px;

        padding: 0 15px 50px;

    }

    .answers-grid {

        grid-template-columns: 1fr;

    }

    .answers-title {

        font-size: 28px;

    }

    .biggy-input {

        display: none !important;

    }

    .biggy-mobile-input {

        display: block !important;

        margin-bottom: 40px;

    }

    .biggy-mobile-input input {

        width: 100%;

        padding: 18px 20px;

        border-radius: 18px;

        border: 2px solid #dfe3d5;

        background: white;

        font-size: 24px;

        font-weight: 600;

        text-transform: uppercase;

        text-align: center;

        letter-spacing: 4px;

    }

    .desktop-only {

        display: none !important;

    }

    .mobile-only {

        display: block !important;

    }

    .decor-route,
    .decor-tracks {

        display: none;

    }

}

/* =========================================
   DROPDOWN MENU
========================================= */

.select-wrapper {

    position: relative;

    width: 100%;

}

.select-wrapper select {

    width: 100%;

    min-height: 72px;

    padding:
        20px
        60px
        20px
        58px;

    border-radius: 20px;

    border: 2px solid #dfe3d5;

    background: white;

    font-size: 18px;

    font-family: 'Poppins', sans-serif;

    color: #2d2d2d;

    cursor: pointer;

    appearance: none;

    -webkit-appearance: none;

    -moz-appearance: none;

    transition: all 0.2s;

    box-shadow:
    0 4px 10px rgba(0,0,0,0.03);

}

.select-wrapper select:hover {

    border-color: #c2e088;

}

.select-wrapper select:focus {

    outline: none;

    border-color: #c2e088;

    box-shadow:
    0 0 0 4px rgba(194,224,136,0.25);

}

/* PIJL */

.select-wrapper::after {

    content: "\f078";

    font-family: "Font Awesome 6 Free";

    font-weight: 900;

    position: absolute;

    right: 24px;

    top: 50%;

    transform: translateY(-50%);

    color: #6f9342;

    pointer-events: none;

    font-size: 18px;

}