@font-face {
    font-family: Montserrat;
    src: url(../fonts/Montserrat-Regular.ttf);
}
@font-face {
    font-family: Montserrat;
    src: url(../fonts/Montserrat-Medium.ttf);
    font-weight: 500;
}
@font-face {
    font-family: Montserrat;
    src: url(../fonts/Montserrat-Light.ttf);
    font-weight: 300;
}
@font-face {
    font-family: Montserrat;
    src: url(../fonts/Montserrat-Bold.ttf);
    font-weight: 600;
}

:root{
    --main-color: #524EE5;
    --main-color-light: #605CF2;
    --dark-color: #212529;
}

body, html {
    font-family: Montserrat !important;
}

.fs-large {
    font-size: 40px;
    line-height: 40px;
}

@media (min-width: 992px) {
    .fs-large {
        font-size: 60px;
        line-height: 60px;
    }
}

.mb-overlay{
    margin-bottom: -12rem !important;
}

.pt-overlay{
    padding-top: 12rem !important;
}

.bg-main-gradient{
    background: radial-gradient(at left top, var(--dark-color), var(--main-color));
}

.bg-main{
    background-color: var(--main-color) !important;
}

.outline-main{
    border: 1px solid var(--main-color) !important;
}

.text-main{
    color: var(--main-color) !important;
}

.bg-main-light{
    background-color: var(--main-color-light) !important;
}

.outline-main-light{
    border: 1px solid var(--main-color-light) !important;
}

.text-main-light{
    color: var(--main-color-light) !important;
}

.hover-action:not(:hover){
    transition: ease-in-out 0.3s;
}

.hover-action:hover{
    transition: ease-in-out 0.3s;
    transform: translateY(-3px);
}