#body {
    width: 100%;
    display: flex;
    flex-direction: column;
    font-family: Verdana, sans-serif;
    overflow: hidden;
}

.participate-intro {
    background-image: url(image/equine-landscape1b.png);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 50vw;
}

.intro-contents {
    width: 57vw;
    height: 45vw;
    border-radius: 2vw 0 2vw 0;
    margin: 1.5vw;
    background-color: white;
    padding: 2.5vw;
    color: black;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}

.intro-contents div {
    width: 52vw;
    margin: 0 auto;
}

.intro-title h1 {
    font-size: 1.5vw;
    margin: 0 auto;
    color: #2B388F;
}

.intro-contents p {
    font-size: 1.3vw;
    margin: 1vw auto;
    text-align: justify;
    line-height: 1.4vw;
}


.join-now a {
    border-radius: 1vw 0 1vw 0;
    background-color: #2B388F;
    border: none;
    color: white;
    text-align: center;
    font-size: 1.4vw;
    line-height: 1.6vw;
    height: 3.5vw;
    width: 15vw;
    padding-top: 0.95vw;
    transition: all 0.5s;
    cursor: pointer;
    letter-spacing: 0.1vw;
    text-decoration: none;
    font-weight: bold;
}

.join-now a {
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: padding-right 0.3s ease, padding-left 0.3s ease;
}

.join-now-nl a {
    width: 18vw;
}

.join-now a:after {
    content: '❯';
    position: absolute;
    opacity: 0;
    top: 0.95vw;
    right: -1vw;
    transition: right 0.3s ease, opacity 0.3s ease;
    color: #8BC53F;
}

.join-now a:hover {
    padding-right: 1.5vw;
    padding-left: 0vw;
}

.join-now a:hover:after {
    opacity: 1;
    right: 1.5vw;
}

.join-now-nl a:hover:after {
    opacity: 1;
    right: 1.25vw;
}

.why-participate {
    width: 100%;
    height: 35vw;
    padding-top: 1vw;
}

.why-title {
    width: 100vw;
    height: 5vw;
    font-size: 1.8vw;
    text-align: center;
    color: #8BC53F;
}

.why {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 3vw;
    margin: 2vw auto;
    width: 88vw;
    justify-content: center;
    align-items: center;
}

.why img {
    width: 8vw;
    margin: 0vw 1.5vw;
    opacity: 1;
    transition: opacity 0.5s ease, scale 0.5s ease;
}

.why-contribute, .why-policy, .why-welfare, .why-connect, .why-recognition {
    width: 15vw;
    height: 20vw;
    background-color: #2B388F;
    border-radius: 1vw 0 1vw 0;
    padding: 2.5vw 2vw;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    overflow: hidden;
}

.line {
    border-bottom: solid 0.3vw #8BC53F;
    margin-top: 2vw;
    transition: translate 0.5s ease;
}

.why p {
    color: white;
    font-size: 1vw;
    text-align: center;
    opacity: 0;
    transition: opacity 0.5s ease, translate 0.5s ease, visibility 0.5s ease;
    visibility: hidden;
}

/* contribute hover */
.why-contribute:hover p {
    opacity: 1;
    translate: 0vw -7.5vw;
    visibility: visible;
}

.why-contribute-nl:hover p {
    opacity: 1;
    translate: 0vw -7.5vw;
    visibility: visible;
}

.why-contribute:hover img {
    scale: 0;
    opacity: 0;
}

.why-contribute:hover h3 {
    translate: 0vw -11vw;
}

.why-contribute:hover .line {
    translate: 0vw -4vw;
}

.why-contribute-nl:hover .line {
    translate: 0vw -4vw;
}

/* policy hover */
.why-policy:hover p {
    opacity: 1;
    translate: 0vw -7.5vw;
    visibility: visible;
}

.why-policy-nl:hover p {
    opacity: 1;
    translate: 0vw -7.5vw;
    visibility: visible;
}

.why-policy:hover img {
    scale: 0;
    opacity: 0;
}

.why-policy:hover h3 {
    translate: 0vw -11vw;
}

.why-policy-nl:hover h3 {
    translate: 0vw -11vw;
}

.why-policy:hover .line {
    translate: 0vw -4vw;
}

.why-policy-nl:hover .line {
    translate: 0vw -4vw;
}

/* welfare hover */
.why-welfare:hover p {
    opacity: 1;
    translate: 0vw -7.5vw;
    visibility: visible;
}

.why-welfare:hover img {
    scale: 0;
    opacity: 0;
}

.why-welfare:hover h3 {
    translate: 0vw -11vw;
}

.why-welfare:hover .line {
    translate: 0vw -4vw;
}

.why-welfare-nl:hover .line {
    translate: 0vw -4vw;
}

/* connect hover */
.why-connect:hover p {
    opacity: 1;
    translate: 0vw -7.5vw;
    visibility: visible;
}

.why-connect:hover img {
    scale: 0;
    opacity: 0;
}

.why-connect:hover h3 {
    translate: 0vw -11vw;
}

.why-connect:hover .line {
    translate: 0vw -4vw;
}

/* recognition hover */
.why-recognition:hover p {
    opacity: 1;
    translate: 0vw -7.5vw;
    visibility: visible;
}

.why-recognition:hover img {
    scale: 0;
    opacity: 0;
}

.why-recognition:hover h3 {
    translate: 0vw -11vw;
}

.why-recognition:hover .line {
    translate: 0vw -4vw;
}

.why h3 {
    text-align: center;
    color: white;
    font-size: 1.2vw;
    font-weight: bold;
    letter-spacing: 0.05vw;
    transition: translate 0.5s ease;
}

.participate-guide {
    width: 100%;
    height: 35vw;
    background-image: linear-gradient(to right, rgba(139, 197, 63, 1), rgba(98, 140, 42, 1));
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 5vw;
    padding: 2vw 7.5vw;
}

.what {
    width: 45%;
}

.app-pic {
    width: 30%;
}

.how {
    width: 45%;
}

.participate-guide h2 {
    text-align: center;
    font-size: 1.8vw;
    color: white;
    margin-bottom: 2vw;
    border-radius: 1vw 0 1vw 0;
}

.participate-guide p {
    margin: 0vw;
    color: white;
    font-weight: 100;
    font-size: 1vw;
    line-height: 1.5vw;
}

.participate-guide h3 {
    margin-bottom: 0.75vw;
    color: white;
    font-size: 1.4vw;
    font-weight: bold;
    letter-spacing: 0.05vw;
}

.participate-guide ul, .participate-guide ol {
    padding-left: 0vw;
    color: white;
    font-weight: bold;
}

.app-pic img {
    width: 22vw;
    margin-top: 2vw;
    margin-left: -2vw;
}

.participate-cta-cont {
    width: 100%;
    height: 33vw;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

.participate-img {
    width: 60%;
}

.participate-img img {
    width: 100%;
}

.participate-cta {
    width: 40%;
    padding: 2.5vw 5vw;
}

.participate-cta h2 {
    margin-bottom: 0.75vw;
    font-size: 1.4vw;
    font-weight: bold;
    letter-spacing: 0.05vw;
    color: #8BC53F;
}

.participate-cta p {
    margin: 0vw 0vw 2vw 0vw;
    font-weight: 100;
    font-size: 1vw;
    line-height: 1.6vw;
    text-align: justify;
}

.join-now {
    width: 14vw;
    margin: 0 auto;
}

@media screen and (max-width: 768px) {
    #body {
        width: 100%;
        display: flex;
        flex-direction: column;
        font-family: Verdana, sans-serif;
        overflow: hidden;
    }

    .participate-intro {
        background-image: none;
        background-size: unset;
        background-repeat: unset;
        width: 100%;
        height: auto;
    }


    .mobile-image {
        background-image: url(image/equine-landscape-mobile.png);
        background-size: 100%;
        background-repeat: no-repeat;
        width: 100%;
        height: 60vw;
    }

    .intro-contents {
        width: 100%;
        height: max-content;
        border-radius: 0;
        padding: 5vw 10vw;
        background-color: unset;
        margin: 0;
        color: black;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
    }

    .intro-contents div {
        width: 100%;
        margin: 0 auto;
    }

    .intro-title h1 {
        font-size: 4.5vw;
        margin: 0 auto;
        color: #2B388F;
        text-align: center;
    }

    .intro-contents p {
        font-size: 3vw;
        margin: 2vw auto;
        text-align: justify;
        line-height: 4vw;
    }


    .join-now a {
        border-radius: 2vw 0 2vw 0;
        background-color: #2B388F;
        border: none;
        color: white;
        text-align: center;
        font-size: 3.5vw;
        line-height: 3.5vw;
        height: 8vw;
        width: 30vw;
        padding-top: 2vw;
        transition: all 0.5s;
        cursor: pointer;
        letter-spacing: 0.2vw;
        text-decoration: none;
        font-weight: bold;
    }

    .join-now a {
        cursor: pointer;
        display: inline-block;
        position: relative;
        transition: padding-right 0.3s ease, padding-left 0.3s ease;
    }

    .join-now-nl a {
        width: 40vw;
    }

    .join-now a:after {
        content: '❯';
        position: absolute;
        opacity: 0;
        top: 2vw;
        right: -1vw;
        transition: right 0.3s ease, opacity 0.3s ease;
        color: #8BC53F;
    }

    .join-now a:hover {
        padding-right: 2vw;
        padding-left: 0vw;
    }

    .join-now a:hover:after {
        opacity: 1;
        right: 3vw;
    }

    .join-now-nl a:hover {
        padding-right: 3vw;
        padding-left: 0vw;
    }

    .join-now-nl a:hover:after {
        opacity: 1;
        right: 3vw;
    }

    .why-participate {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: max-content;
        padding-top: 7.5vw;
    }

    .why-title {
        width: 100%;
        height: max-content;
        margin-bottom: 2.5vw;
    }

    .why-title h2 {
        font-size: 4.5vw;
        text-align: center;
        color: #8BC53F;
        margin: 0;
    }

    .why {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 5vw;
        width: 80vw;
        margin: 2.5vw 10vw 7.5vw 10vw;
        justify-content: center;
    }

    .why img {
        display: flex;
        width: 20vw;
        margin: 2.5vw auto;
        opacity: 1;
        transition: opacity 0.5s ease, scale 0.5s ease;
    }

    .why-contribute, .why-policy, .why-welfare, .why-connect, .why-recognition {
        width: 37.5vw;
        height: 50vw;
        background-color: #2B388F;
        border-radius: 5vw 0 5vw 0;
        padding: 5vw;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        overflow: hidden;
    }

    .line {
        border-bottom: solid 1vw #8BC53F;
        margin-top: 2vw;
        transition: translate 0.5s ease;
    }

    .why p {
        color: white;
        font-size: 3vw;
        text-align: center;
        opacity: 0;
        transition: opacity 0.5s ease, translate 0.5s ease, visibility 0.5s ease;
        visibility: hidden;
    }

    /* contribute hover */
    .why-contribute:hover p {
        opacity: 1;
        translate: 0vw -27vw;
        visibility: visible;
    }

    .why-contribute:hover img {
        scale: 0;
        opacity: 0;
    }

    .why-contribute:hover h3 {
        translate: 0vw -30vw;
    }

    .why-contribute:hover .line {
        translate: 0vw -15vw;
    }

    .why-contribute-nl:hover .line {
        translate: 0vw -15vw;
    }

    .why-contribute-nl:hover h3 {
        translate: 0vw -30vw;
    }

    .why-contribute-nl:hover p {
        opacity: 1;
        translate: 0vw -27vw;
        visibility: visible;
    }


    /* policy hover */
    .why-policy:hover p {
        opacity: 1;
        translate: 0vw -27vw;
        visibility: visible;
    }

    .why-policy:hover img {
        scale: 0;
        opacity: 0;
    }

    .why-policy:hover h3 {
        translate: 0vw -30vw;
    }

    .why-policy:hover .line {
        translate: 0vw -15vw;
    }

    .why-policy-nl:hover .line {
        translate: 0vw -15vw;
    }

    .why-policy-nl:hover p {
        opacity: 1;
        translate: 0vw -27vw;
        visibility: visible;
    }

    .why-policy-nl:hover h3 {
        translate: 0vw -30vw;
    }

    /* welfare hover */
    .why-welfare:hover p {
        opacity: 1;
        translate: 0vw -27vw;
        visibility: visible;
    }

    .why-welfare:hover img {
        scale: 0;
        opacity: 0;
    }

    .why-welfare:hover h3 {
        translate: 0vw -30vw;
    }

    .why-welfare:hover .line {
        translate: 0vw -15vw;
    }

    .why-welfare-nl:hover .line {
        translate: 0vw -15vw;
    }

    /* connect hover */
    .why-connect:hover p {
        opacity: 1;
        translate: 0vw -27vw;
        visibility: visible;
    }

    .why-connect:hover img {
        scale: 0;
        opacity: 0;
    }

    .why-connect:hover h3 {
        translate: 0vw -30vw;
    }

    .why-connect:hover .line {
        translate: 0vw -15vw;
    }

    .why-connect-nl:hover p {
        translate: 0vw -27vw;
    }

    .why-connect-nl:hover h3 {
        translate: 0vw -30vw;
    }

    .why-connect-nl:hover .line {
        translate: 0vw -15vw;
    }

    /* recognition hover */
    .why-recognition:hover p {
        opacity: 1;
        translate: 0vw -27vw;
        visibility: visible;
    }

    .why-recognition:hover img {
        scale: 0;
        opacity: 0;
    }

    .why-recognition:hover h3 {
        translate: 0vw -30vw;
    }

    .why-recognition:hover .line {
        translate: 0vw -15vw;
    }

    .why h3 {
        text-align: center;
        color: white;
        font-size: 3vw;
        font-weight: bold;
        letter-spacing: 0.1vw;
        transition: translate 0.5s ease;
    }

    .participate-guide {
        width: 100%;
        height: max-content;
        background-image: none;
        background-color: #8BC53F;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 5vw;
        padding: 5vw 10vw;
        margin: 0;
    }

    .what {
        width: 100%;
    }

    .app-pic {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .how {
        width: 100%;
    }

    .participate-guide h2 {
        text-align: center;
        font-size: 4.5vw;
        color: #FFF;
        margin-bottom: 0;
        border-radius: 0;
    }

    .participate-guide p {
        margin: 0vw;
        color: white;
        font-weight: 100;
        font-size: 3vw;
        line-height: 4vw;
    }

    .participate-guide h3 {
        margin-bottom: 1.5vw;
        color: white;
        font-size: 3.5vw;
        font-weight: bold;
        letter-spacing: 0.1vw;
    }

    .participate-guide ul, .participate-guide ol {
        padding-left: 0vw;
        color: white;
        font-weight: bold;
        margin-left: 5vw;
    }

    .app-pic img {
        width: 80vw;
        margin: 0 auto;
        justify-content: center;
    }

    .participate-cta-cont {
        width: 100%;
        height: max-content;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
    }

    .participate-img {
        width: 100%;
        height: max-content;
    }

    .participate-img img {
        width: 100%;
    }

    .participate-cta {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        gap: 5vw;
        width: 100%;
        padding: 5vw 10vw 7.5vw 10vw;

    }

    .participate-cta h2 {
        margin-bottom: 1.5vw;
        font-size: 3.5vw;
        font-weight: bold;
        letter-spacing: 0.1vw;
        color: #8BC53F;
        text-align: center;
        margin: 0 0 1.5vw 0;
    }

    .participate-cta p {
        margin: 0;
        font-weight: 100;
        font-size: 3vw;
        line-height: 4vw;
        text-align: center;
    }

    .outcome, .difference, .join-now {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .join-now {
        justify-content: center;
    }
}