#mission {
    background-color: #F4F4F4;
    padding: 3vw 5vw 0;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    border-bottom: 5vh solid #003399;
    height: 90vh;
}

.headerContainer h1 {
    color: blue;
    font-weight: bolder;
}

.headerContainer span {
    color: orange;
    font-size: 2.5vw;
}

.missionBox {
    display: flex;
    justify-content: space-between;
}

.missionBox .missionItem {
    padding: 1vw;
    background-color: #003399;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    width: 25vw;
    transition: box-shadow 0.3s ease-in-out;
    border-radius: 2vw;
}

.missionBox .missionItem:hover {
    box-shadow: 0 0 3vw rgba(0, 0, 0, 0.5);
}

.missionBox .missionItem img {
    width: 5vw;
}

.missionBox .missionItem h3 {
    font-weight: bolder;
    color: #FF9933;
    font-size: 1.6vw;
}

.missionBox .missionItem p {
    font-size: 1.2vw;   
    text-align: center;
}

.missionBottomNote {
    width: 32vw;
    color:  blue;
    font-weight: bold;
    font-size: 1.1vw;
}

@media (max-width: 767px) {
    #mission {
        padding: 5vw;
        justify-content: initial;
        height: fit-content;
    }

    .headerContainer {
        text-align: center;
        margin-bottom: 3vw;
    }

    .headerContainer h1 {
        font-size: 8vw;
    }

    .headerContainer span {
        font-size: 6.5vw;
    }

    .missionBox {
        flex-direction: column;
    }

    .missionBox .missionItem {
        padding: 5vw;
        width: 100%;
        border-radius: 5vw;
        margin-bottom: 3vh;
    }

    .missionBox .missionItem img {
        width: 12vw;
    }

    .missionBox .missionItem h3 {
        font-size: 6vw;
    }

    .missionBox .missionItem p {
        font-size: 4vw;
    }

    .missionBottomNote {
        text-align: center;
        width: 100%;
        font-size: 3.1vw;
    }
}