#mHeader{
    height: fit-content;
    width: 100vw;
    margin-top: 10vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
#mHeader h1{
    font-size: 20vh;
    font-family: orbitron,sans-serif;
    color:#00bcd4;
}
#mpage1{
    height:fit-content;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
}
#mpage2{
    height:fit-content;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
}
.mpg-container{
    height: fit-content;
    width: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border: 2px solid #00bcd4;
    padding: 2%;
    border-radius:20px;
}
.mpg-container h2{
    font-size: 8vh;
    font-family: exo,sans-serif;
    color: wheat;
    text-decoration: underline;
}
.mission-box{
    height:fit-content;
    width: 100%;
    padding: 2%;
    display: flex;
    align-items: center;
    justify-content:space-around;
    flex-wrap: wrap;
}
.card{
    height: 50vh;
    width: 20vw;
    cursor: pointer;
    perspective: 1000px;
    border-radius: 20px;
    margin-top: 2vh;
}
.card-inner{
    height:100%;
    width:100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.8s;
}
.card-p{
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content:space-between;
    flex-direction: column;
    position: absolute;
    background-color: #00bcd4;
    border: 5px solid #1b2735;
    backface-visibility: hidden;
    border-radius: 20px;
    overflow: hidden;
}
h4{
    font-size: 3vh;
    font-weight: 900;
    font-family: rajdhani,sans serif;
    animation-name: text;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration:0.5s;
    animation-direction: alternate;
}
@keyframes text{
    0%{
        color:#2c5364;
    }
    100%{
        color:#00bcd4;
    }
}
.card-p img{
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
}
.card-p p{
    height: 100%;
    width: 100%;
    text-align: justify;
    color:black;
    font-family: rajdhani,sans;
    font-size: 2vh;
}
.card-p a{
    height: 100%;
    width: 100%;
    text-align:center;
    text-decoration:underline;
    color:#1b2735;
    font-family: orbitron,sans;
    font-size: 4vh;
}
#card-b{
    transform: rotateY(180deg);
    backface-visibility: hidden;
    background-color: #00bcd4;
    padding:4%;
}
#card-f{
    backface-visibility: hidden;
    background-color: #00bcd4;
}

@media only screen and (max-width: 1200px) {
    #mHeader h1{
        font-size: 6vh;
    }   
    .mpg-container h2{
        font-size: 3vh;
    }
    .mpg-container h4{
        font-size: 2vh;
    }
    .mission-box {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 1rem;
    padding: 1rem;
    scroll-snap-type: x mandatory;
    }

    .card {
        flex: 0 0 80vw; /* prevent shrink, fixed size */
        height: 40vh;
        scroll-snap-align: start;
        border-radius: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 3vh;
    }
}