body {
    background-color: #545454;
    color: white;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

#logo {
    padding: 4vh 5vw;
    height: 5em;
}

.hero {
    padding-left: 12vw;
    width: 65%;
}

button {
    margin-top: 2vh;
    line-height: 3;
    padding: 0 20px;
    border-radius: 10px;
    border: none;
    font-size: large;
}

button:hover {
    background-color: white;
}

button:active {
    transform: translateY(1px);
}

.banner {
    overflow: hidden;
    width: 100vw;
    height: 30vh; 
    margin-top: 0vh;
}

.banner img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    object-position: 95%;
}

.text {
    padding: 0 6vw 8vh;
}

#footer {
    display: flex;
    flex-wrap: wrap;
    padding: 10vh 7vw 0;
}

#footer div {
    padding: 0vh 5vw 6vh;
}

@media (max-width: 768px) {
    #logo {
        padding: 0;
        width: 100%;
        height: auto;
    }
    .hero {
        padding: 5vw;
        width: 90vw;
    }
    button {
        width: 100%;
        padding: 0;
        margin-bottom: 5vh;
    }
    .text {
        padding: 4vh 2vw 6vh ;
        min-height: 40vh;
    }
}