/* Color Palette  */
:root {
    --darkblue: #202d3d;
    --mediumblue: #333f4c;
    --lightblue: #434d59;
    --offwhite: #f1f1eb;
    --offgrey: #e8e5df;
    --newgrey: #dbd8d1;
    --gold: #fbb51f;
}

.dark-blue-background {
    background-color: var(--darkblue);
    color: white !important;
}

.dark-button{
    transition: 0.3s;
    background-color: var(--darkblue);
    color: white;
    border: 4px solid var(--darkblue);
}

.dark-button:hover{
    transition: 0.3s;
    background: none;
    color: var(--darkblue);
    border: 4px solid var(--darkblue);
}

.gold-button{
    transition: 0.3s;
    background-color: var(--gold);
    color: var(--darkblue);
    border: 4px solid var(--gold);
}

.gold-button:hover{
    transition: 0.3s;
    background: none;
    color: white;
    border: 4px solid var(--gold);
}

/* Custom Fonts */
@font-face {
    font-family: Manrope;
    src: url(Fonts/Manrope/fonts/variable/ManropeGX.ttf);
}
@font-face {
    font-family: Anton;
    src: url(Fonts/Anton/Anton-Regular.ttf);
}

body{
    font-family: Manrope;
}

/* Navbar */
.navbar{
    background-color: var(--darkblue);
    text-transform: uppercase;
    font-weight: 800;
    color: white;
    padding: 15px;
    box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
}

.nav-logo{
}
@media only screen and (max-width: 600px) {
    .nav-logo {
    }
}
.navbar-menu{
    background: none;
}

.navbar-burger{
    color: white;
}

.navbar-burger .is-active{
    color: white;
}

.navbar-item{
    color: white;

}
.navbar-item:hover{
    transition: 0.3s;
    background-color: var(--darkblue) !important;
    color: var(--gold) !important;
}
.start-training{
    background-color: var(--gold);
    color: var(--darkblue);
    border: none;
}
.start-training:hover{
    color: var(--lightblue);
}
.login{
    background-color: var(--lightblue);
}

/* Footer */

.footer{
    background-color: var(--mediumblue);
    color: white !important;
}
.footer a{
    color: white !important;
}
/* Homepage */
.frontpage-hero{
    background-image: url("images/Off White Grid.png");
}
.frontpage-hero h1{
    font-family: Anton;
    font-weight: 100 !important;
    color: var(--darkblue);
    font-size: 6em !important;
}

.course-info-box-one h2{
    font-family: Anton;
    color: white;
    letter-spacing: .05rem;
    font-size: 4em !important;
    font-weight: 100 !important;

}

.course-info-box-one .price{
    font-size: 7em !important;
    text-align: right;
    font-family: Manrope;
    font-weight: 300 !important;
}

.course-info-box-one h3{
    font-family: Anton;
    color: white;
    letter-spacing: .2rem;
    font-size: 3em !important;
    font-weight: 100 !important;
    letter-spacing: .05rem;
}

.feedback{
    background-image: url("images/Off White Grid.png");
}

.feedback h3{
    font-family: Anton;
    color: var(--darkblue) !important;
    font-size: 4em !important;
    font-weight: 100 !important;
}
.feedback .card{
    background-color: var(--darkblue);
    color: white;
}

.wmud{
    background-color: var(--darkblue);
    color: white;
}

.wmud ul{
    list-style-type: circle;
    color: white;
}

.wmud h3{
    color: white;
}

.wmud ul strong{
    color: white;
}

.course-preview h3{
    font-family: Anton;
    font-size: 3em !important;
    font-weight: 100 !important;

    color: var(--darkblue) !important;
}

.course-preview{
    background-image: url("images/Off White Grid.png");

}

.wmud-icon{
    text-align: center !important;
    padding: 25px;
    font-size: 4em;
}

.wmud h3{
    font-family: Anton;
    font-weight: 100 !important;
    text-align: center;
    font-size: 3em !important;
}

.wmud .card{
    color: var(--darkblue);
    background-color: #f1f1eb;
}