body{
    margin: 0px;
    padding: 0px;
}
.navLogo{
    padding-right: 10rem;
}
.nav-link{
    color:white;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    font-size: 15px;
}
.nav-link:hover{
    color:#e2bf5e;
}
a.nav-link{
  margin-right: 5px;
}
.active{
  color:#e2bf5e !important;
  border-bottom: 1px solid #e2bf5e;
}
.bar{
  background-color: #e2bf5e;
  height: 10px;
}
.login{
    width: 30rem;
    margin: 10rem 0px 10rem 25rem;
    padding:20px;
}
.header{
    font-size: 30px;
    font-family: 'Playfair Display', serif;
    font-weight: bold;
}
.form-control{
    border: none !important;
    border-bottom: 1px solid #1e4348 !important;
    border-radius: 0px !important;
}
.btn{
    width:100%;
    background-color: #e2bf5e;
    color:#ffff;
    border-radius: 20px;
}
.btn:hover{
  background-color: #e2bf5e;
  color:#ffff;
}
.employee{
  border: 2px solid #e2bf5e;
  border-radius: 25px;
  font-size: 12px;
}
.client{
  border: 2px solid #e2bf5e;
  border-radius: 25px;
  background-color: #e2bf5e;
  color: #fff;
  font-size: 12px;
}
.client:hover{
  color: #fff;
}
.form {
  --width-of-input: 100%;
  --border-height: 1px;
  --border-before-color: rgba(221, 221, 221, 0.39);
  --border-after-color: #e2bf5e;
  --input-hovered-color: #4985e01f;
  position: relative;
  width: var(--width-of-input);
}
/* styling of Input */
.input {
  color: black;
  font-size: 0.9rem;
  background-color: transparent;
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding-inline: 0.5em;
  padding-block: 0.7em;
  border: none;
  border-bottom: var(--border-height) solid var(--border-before-color);
}
/* styling of animated border */
.input-border {
  position: absolute;
  background: var(--border-after-color);
  width: 0%;
  height: 2px;
  bottom: 0;
  left: 0;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.search{
  border: 1px solid !important;
  border-radius: 20px !important;
}
.search:hover{
  background-color: #fff;
}
/* Hover on Input */
input:hover {
  background: var(--input-hovered-color);
}

input:focus {
  outline: none;
}
/* here is code of animated border */
input:focus ~ .input-border {
  width: 100%;
}
/* === if you want to do animated border on typing === */
/* remove input:focus code and uncomment below code */
/* input:valid ~ .input-border{
  width: 100%;
} */
.bg-wave{
  width: 100%;
  margin-top: 22px;
}
.link{
  text-decoration: none;
  color:white;

}
@media only screen and (max-width: 2560px) {
  .bg-wave{
  width: 100%;
  margin-top: 14rem;
}
}

@media only screen and (max-width: 820px) {
    .login{
    width: 23rem;
    margin: 10rem 0px 10rem 0rem;
    padding:20px;
    }
    .employee{
      width: 15rem;
      padding: 10px;
      margin-top: 5px;
    }
    .client{
      width: 15rem;
      padding: 10px;
      margin-top: 5px;
    }
    .navbar-brand img{
      width: 190px;
    }
    .bg-wave{
      margin-top: 236px;
    }
}
@media only screen and (max-width: 375px) {
    .login{
    width: 22rem;
    margin: 10rem 0px 0rem 0rem;
    padding:20px;
    }
    .employee{
      width: 15rem;
      padding: 10px;
      margin-top: 5px;
    }
    .client{
      width: 15rem;
      padding: 10px;
      margin-top: 5px;
    }
    .navbar-brand img{
      width: 190px;
    }
    .bg-wave{
      margin-top: 135px;
    }
}