/* ---------------coverpage----------------------------------------- */
.cover-page {
  background: #f7f5ff;
}

.cover-page .card {
  width: 100%;
  margin: auto;
  height: 40vh;
  position: relative;
}
.cover-page .card .img {
  position: absolute;
  height: 100%;
  width: 100%;
  background: linear-gradient(
      180deg,
      #4f3b78 0%,
      rgba(81, 51, 141, 0.791667) 20.83%,
      rgba(81, 51, 141, 0.791667) 99.99%,
      rgba(87, 22, 220, 0) 100%
    ),
    url(https://images.pexels.com/photos/6476260/pexels-photo-6476260.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
    background-size:100% 100%;
    background-position:center center;
    background-repeat:no-repeat;
}

.cover-page .form-group input {
  width: 100%;
  background-color: rgb(182, 175, 223);
  margin-left: 0px;
  border-radius: 9px;
  height: 50px;
}
.cover-page .btn {
  background-color: #4f3b78;
  border: none;

  border-radius: 9px;
}
.cover-page .card-body {
  padding: 10px !important;
  position: relative;
  background-color: white;
  height: 15vh;
  width: 50%;
  margin-left: 25%;
  margin-top: -70px;
  border-radius: 1.5rem;
  box-shadow: 3px 3px 10px grey;
  display: flex;
  justify-content: center;
  text-align: center;
}
.searchdrop {
  position: absolute;
  width: 95%;

  top: 100px;
  left: 30px;

  background-color: white;
}
.flow {
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  overflow-y: scroll;
}
.searchdrop .flow a {
  width: 100%;
  font-size: 18px;
  padding: 20px;
  text-align: left;
  display: block;
}
.searchdrop a:nth-child(2n) {
  background-color: rgba(128, 128, 128, 0.2);
}
.searchdrop a:hover {
  font-size: 25px;
}
.row {
  width: 100%;
}
.form-group {
  margin-left: 10px;
}

/* --------------------------TABLETS------------------------------------------- */

@media (max-width: 1024px) {
  .cover-page .card-body {
    height: 10vh;
    width: 80%;
    margin-left: 10%;
  }
  .cover-page .btn {
    width: auto;
  }
}

@media (max-width: 655px) and (min-width: 481px) {
  .cover-page .card-body {
    flex-direction: column;
    height: 20vh;
  }
  .form-group {
    width: 100%;
  }
  .cover-page .form-group input {
    margin-left: 0px;
  }
}

/* --------------------MOBILES------------------------------------------ */

@media (max-width: 480px) {
  .cover-page .card-body {
    flex-direction: column;
    height: 20vh;
    width: 95%;
    margin-left: 2%;
  }
  .form-group {
    width: 100%;
  }
  .cover-page .form-group input {
    margin-left: 0px;
  }
  .searchdrop {
    left: 10px;
  }
  .flow {
    height: 200px;
  }
  .searchdrop .flow a {
    padding: 10px;
  }
}