.line{
    color:#298;
    font-size: xx-large;
    
}
.navbar{
    background-color: #fff;
    height: 80px;
    margin: 20px;
    border-radius: 16px;
    padding: 0.5rem;
}
.navbar-brand{
    font-weight: 500;
    color:#298;
    font-size: 24px;
    transition: 0.3s color;
}
.login-button{
    background-color:rgb(249, 250, 250);
    color: #fefefe;
    font-size: 14px;
    padding: 8px 20px;
    border-radius: 50px;
    text-decoration: none;
    transition: 0.3s background-color;

}
.login-button:hover{
    background-color: rgb(81, 205, 186);
    text-decoration: none;
    color: #fff;
}
.navbar-toggler:focus,.btn-close:focus{
    box-shadow: none;
    outline: none;
}
.nav-link{
    color:#298;
    font-weight: 500;
    position:relative;
}
.nav-link:hover, .nav-link-active{
    color: #000;
}
@media(min-width:991px){
    .nav-link::before{
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%);
        width: 0;
        height: 2px;
        background-color: #298;
        visibility: hidden;
        transition: 0.3s ease-in-out;
    }
    .nav-link:hover::before,  .nav-link.active::before{
        width: 100%;
        visibility: visible;
    }


}
.hero-section{
    background-image: url(back.jpg) no-repeat center;
    /*background-size: cover;*/
    width: 100%;
    height: 100%;
}
.hero-section::before{
    background-color: rgba(0,0,0,0,6);
    content: "";
    position: absolute;
    top: 0;
    right:0;
    bottom: 0;
    left: 0;
}