/*Typography*/
h1 {
    font-family: 'Montserrat';
    font-weight: 700;
    font-size: 70px;
    color: #5cd293;
}
/*Layout*/
body {
    position: relative;
}

.bg-grey {
    background-color: #e2e2e2;
    margin: 20px;
}

section {
    height: calc(100vh - 40px);
    z-index: 0;
}

.container {
    z-index: 0;
    position: relative;
}

.bg-brand {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.brand {
    width: 30%;
    height: auto;
    opacity: 8%;
}

/*Call-to-Actions*/
.btn-outline-secondary{
    border-color: #5cd293;
    border-width: 2px;
    border-radius: 20px;
    padding-left: 16px;
    padding-left: 16px;
    color: black;
}

.btn-outline-secondary:hover .button-arrow{
    animation-iteration-count: infinite;
    position: relative;
    animation-name: arrow-punch;
    animation-duration: 2s;
    color:black;
}

@keyframes arrow-punch {
    0% {left:0px; top:0px;}
    50% {animation-timing-function: ease; left:10px; top:0px;}
    75% {left:-10px; top:0px;}
    100% {left:0px; top:0px;}
}

 
/*Breakpoints*/
@media (max-width: 562px) {
    h1{
        font-size: 50px;
    }
}

@media (max-width: 430px) {
    h1{
        font-size: 36px;
    }
}