@font-face {
    font-family: 'M';
    src: url(../fonts/Inter/Inter.ttf);
    font-display: block;
}

@font-face {
    font-family: 'M-black';
    src: url(../fonts/Inter/Inter-Black.ttf);
    font-display: block;
}

@font-face {
    font-family: 'M-bold';
    src: url(../fonts/Inter/Inter-Bold.ttf);
    font-display: block;
}

@font-face {
    font-family: 'M-medium';
    src: url(../fonts/Inter/Inter-Medium.ttf);
    font-display: block;
}

.fw-bolder {
    font-family: 'M-black' !important;
    font-weight: 900;
}

.fw-bold {
    font-family: 'M-bold' !important;
    font-weight: 700;
}

.fw-medium {
    font-family: 'M-medium' !important;
    font-weight: 500;
}

body {
    font-family: 'M';
}

nav{
    z-index: 99;
}

.fs-14 {
    font-size: 14px !important;
}

#hero{
    position: relative;
}

#hero .background{
    background: url(../img/hero-bg.jpg);
    background-size: cover;
    opacity: 0.7;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -98;
}

#hero .background-filter{
    background-color: black;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -99;
}

.img-container{
    overflow: hidden;
    position: relative;
}

.img-desc{
    overflow: hidden;
    background: rgb(0,0,0);
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.719) 25%, rgba(255,255,255,0) 70%);
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
}