@font-face {
    font-family: 'PowerGroteskTrial-Regular';
    src: url(fonts/PowerGroteskTrial-Regular.ttf);
}

@font-face {
    font-family:'PowerGroteskTrial-Medium';
    src: url(fonts/PowerGroteskTrial-Medium.ttf);
}

@font-face {
    font-family: 'PowerGroteskTrial-Bold';
    src: url(fonts/PowerGroteskTrial-Bold.ttf);
}

@font-face {
    font-family:'PowerGroteskTrial-Light';
    src: url(fonts/PowerGroteskTrial-Light.tff);
} 

body{
    background-color:#00296b;
    background-blend-mode: multiply;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.navbar-brand{
    color:white;
    font-size:1.25rem;
    transition: 0.3s color;

}
.menu{
    color:white;
    text-decoration: none;
    font-family: 'PowerGroteskTrial-Regular';
    position: relative;
}
.back{
    color:white;
    text-decoration: none;
    font-family: 'PowerGroteskTrial-Regular';
    position: relative;
}

.back:hover{
    color:white;
}

.back::before{
    content:'';
    position: absolute;
    bottom: -10px;
    left:0;
    width: 0%;
    height: 3px;
    Background-color: white;
    transition:all .5s;
}

.back:hover:before{
    width: 100%;
}

.menu:hover{
    color:white;
}

.menu::before{
    content:'';
    position: absolute;
    bottom: -10px;
    left:0;
    width: 0%;
    height: 3px;
    Background-color: white;
    transition:all .5s;

}

.menu:hover:before{
    width: 100%;


}
.nav-item{
    list-style: none;
}

.nav-link{
    color: black;
}

.nav-link:hover, nav.link.active{
    color: #00296b;
}

.nav-link:hover::before{
    content: "";
    position: absolute;
    bottom: 0;
    left:50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background-color: #00296b;
    visibility: hidden;
    transition: 0.3s ease-in-out;

}

.nav-link:hover::before, .nav-link.active::before{
    width: 100%;
    visibility: visible;
}

.type{
width: 100%;
height: 95vh;
display:flex;
align-items: flex-end;
justify-content: left;
font-family: 'PowerGroteskTrial-Bold';
}       

.type-content{
    color: white;
font-size: clamp(50px, 15vw, 200px);
margin-left: 10px;
margin-bottom: 15px;
position: relative;
  animation: move-words 10s linear infinite;

}

@keyframes move-words {
    0% {
      left: 100%;
    }
    100% {
      left: -100%;
    }
  }