*{
    font-family: "Jost", sans-serif;
}

.hero-section{
    background-image: url('./assets/hero.png');
    background-size: cover;
    background-position: center;
    height: 100vh;
    color: white;
    display: flex;
    align-items: center;
    justify-content: left;
}

.hero-section button{
    background: #0D9DC9;
    padding: .5rem 2rem;
    border-radius: 25px;
    border: none;
    color: white;
}


.about{
    background:  #010230;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: left;
}


.about-container .row{
    background: white;
    color: black;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.about .aboutend{
    background-image: url('./assets/about-end.png');
    background-position: center;
    background-size: cover;
    height: 200px;
}

.why{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.why h1{
    text-align: center;
}

.why .force p{
    color: #787575;
    font-size: 18px;
}


.join{
    background-image: url('./assets/join-bg.png');
    background-position: center;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.join h1{
    text-align: center;
}

.join .join-force p{
    color: #575656;
    font-size: 18px;
}


.roles{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.roles h1{
    text-align: center;
}

.roles .roles-force p{
    color: #787575;
    font-size: 18px;
}


.how{
    background: #EAEBFE;
}


@media screen and (min-width: 768px) and (max-width: 1200px){
    .hero-section{
        height: 75vh;
    }
}


@media screen and (max-width: 767px){
    .hero-section{
        height: 65vh;
    }

    .join .join-force{
        padding: 0 !important;
        margin: 0 !important;
    }
    
}