img {
    width: 100%;
}

.content {
    display: flex;
    justify-content: center;
    text-align: center;
    padding: 10%;
    margin-bottom: 5%;
}

.bg-odd-extend,
.bg-even-extend,
.bg-even-extend2 {
    background: linear-gradient(to bottom, #1E201E, #4E5252);
    padding: 0% 5% 15% 5%;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    box-sizing: border-box;
}

.bg-even-extend,
.bg-even-extend2 {
    background: linear-gradient(to bottom, #4E5252, #1E201E);
}

.bg-even-extend2 {
    padding: 0% 5% 10% 5%;
}

.bg-odd,
.bg-odd-even,
.bg-odd-even2 {
    max-width: 1440px;
    margin: auto;
}

.mission-content,
.mission-content-even {
    position: relative;
    max-height: 400px;
}

.mission-content-even {
    text-align: right;
}

.mission-image {
    position: absolute;
    right: 0;
    top: 0;
}

.mission-image-even {
    position: absolute;
    left: 0;
    top: 0;
}

.description {
    position: relative;
    padding-top: 11%;
}

.mission-objective {
    position: absolute;
    top: 0;
}

.mission-objective-even {
    position: absolute;
    top: 0;
    right: 0;
}

.step,
.step-even,
.step-even2 {
    display: flex;
    gap: 3.5%;
    margin-top: 5%;
}

.step-detail,
.step-detail-right {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

.step-detail h4,
.step-detail-right h4 {
    font-family: "Cormorant Infant", serif;
    margin-bottom: 0%;
}

.step-detail p,
.step-detail-right p {
    margin-top: 0%;
}

.next-page {
    position: absolute;
    right: 0%;
}

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

    .title h1 {
        font-size: 76px;
    }

    .description {
        padding-top: 16%;
    }

    .description h4 {
        font-size: 16px;
    }

    .step,
    .step-even,
    .step-even2 {
        margin-top: 10%;
    }
}

@media screen and (max-width: 1160px) {
    .title h1 {
        font-size: 64px;
    }

    .description {
        padding-top: 12%;
    }

    .description h4 {
        font-size: 14px;
    }

    .mission-image,
    .mission-image-even {
        width: 50%;
    }
}

@media screen and (max-width: 900px) {
    .title h1 {
        font-size: 56px;
    }
}

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

    .mission-content,
    .mission-content-even {
        position: static;
        max-height: none;
        text-align: left;
    }

    .title {
        text-align: center;
    }

    .title h1 {
        font-size: 48px;
    }

    .mission-image,
    .mission-image-even {
        position: static;
        width: 100%;
    }

    .description {
        position: static;
        padding-top: 0%;
    }

    .mission-objective,
    .mission-objective-even {
        position: static;
    }
}

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

    .step,
    .step-even,
    .step-even2 {
        flex-direction: column;
        margin-top: 15%;
    }

    .step-detail,
    .step-detail-right {
        flex-direction: row;
        gap: 5%;
        padding: 2% 0%;
        align-items: center;
    }

    .step-detail-right {
        flex-direction: row-reverse;
        text-align: right;
        display: flex;
    }

    .step-detail div,
    .step-detail-right div {
        width: 45%;
    }

    .step-detail h4,
    .step-detail-right h4 {
        margin: 0%;
    }
}

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

    .description h4 {
        font-size: 12px;
    }

}