body {

    font-family: 'Montserrat', sans-serif;

    background-color: black;

}



body, html {

    height: 100%;

    width: 100%;

    margin: 0;

}



.container {

    width: 100%;

    height: 100%;

    display: grid;

    grid-template-columns: 1fr 1fr;

}



#home {

    height: 100%;

}

h2 {

    font-weight: 700;

    font-size: 3.5rem;

    line-height: 1;

    margin: 0;

    color: white;

    margin-bottom: 1rem;

}



h3 {

    font-weight: 300;

    font-size: 1.5rem;

    margin: 0;

    color: white;

    margin-bottom: 2rem;

}



.col {

    display: flex; 

    align-items: center;

    justify-content: center;

    flex-direction: column;

    text-align: center;

    padding: 0 15px;
    position: relative;

}

.text {
    z-index: 1;
}



.btn {

    padding: 0.5rem 1rem;

    border: 1px solid white;

    text-decoration: none;

    color: white;

}



.btn:hover {

    background-color: white;

    color: black;

}



.bg-image {

    background-size: cover;
    background-position: center;

}

.bg-black {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgba(0,0,0,0.4);
}



@media (max-width:767px) {

    .container {

        grid-template-columns: 1fr;

    }



    h2 {

        font-size: 2rem;

    }

}