.navbar {
    transition: all 0.4s;
    box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.1);
}

.navbar .nav-link {
    font-size: 20px;
    color: #29235C;
    border-radius: 10px;
    transition: all 0.6s;
    
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
    text-decoration: none;
    background-image: linear-gradient(#29235C, #29235C);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 2px;
    transition: background-size .3s ;
    background-size: 100% 2px;
    color: #9D9D9C ;
    transition: linear 0.5s;
    transform: translateY(-5px);   
    font-weight: bold;
}

.navbar .navbar-brand {
    color: #29235C;
    font-size: 45PX;
    font-weight: bold;

}

.navbar .navbar-brand:hover{
    color: #9D9D9C;
    font-size: 45PX;
    font-weight: bold;
    transition: linear 0.5s;
    font-weight: bold;

}




/* Change navbar styling on scroll */
.navbar.active {
   background: #29235C;
    box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.1);
}

.navbar.active .nav-link {
    font-size: 20px;
    color: #fff;
    text-decoration: none;
    border-radius: 10px;

}

.navbar.active .nav-link:hover,
.navbar.active .nav-link:focus {
    text-decoration: none;
    background-image: linear-gradient(#9D9D9C, #9D9D9C);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 2px;
    transition: background-size .3s ;
    background-size: 100% 2px;
    color: #9D9D9C;
    transition: linear 0.5s;
    transform: translateY(-5px);   
}

.navbar.active .navbar-brand {
    color: #fff;
}
  
.navbar.active .navbar-brand:hover {
    color: #9D9D9C;
}

/* Change navbar styling on small viewports */
@media (max-width: 991.98px) {
    .navbar {
        background: #fff;
    }

    .navbar .navbar-brand, .navbar .nav-link {
        color: #29235C;
        font-weight: bold;
    }
    .navbar .nav-link:hover,
.navbar .nav-link:focus {
    text-decoration: none;
    background-image: linear-gradient(#29235C, #29235C);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 2px;
    transition: background-size .3s ;
    background-size: 100% 2px;
    color: #9D9D9C ;
    transition: linear 0.5s;
    transform: translateY(-5px);  

}

}


@media (min-width: 1281px) {
    .containers{
        width: 450px;
    }
    .navbar .nav-link {
      font-size: 20px;
      color: #29235C;
      border-radius: 10px;
      transition: all 0.6s;
      font-family:'Arial';
      position: relative;
      left: 450px;
    }  
  }
  
  @media (min-width:1441px) and (max-width: 2560px) {
    .containers{
        width:1400px;

        
    }
    .navbar .nav-link {
      font-size: 20px;
      color: #29235C;
      border-radius: 10px;
      transition: all 0.6s;
      font-family:'Arial';
      position: relative;
      left: 600px;
    }  
  }