#instruction {
  background-color: rgba(147, 150, 2, 0.863);
  letter-spacing: 0.4px;
  padding: 10px 0px;
  color: white;
  text-align: center;
  font-weight: 500;
  margin-bottom: 0px;
}

/* search box */
.InputContainer {
  width: 400px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to bottom, rgb(227, 213, 255), #d9d7ec);
  border-radius: 30px;
  overflow: hidden;
  padding: 0px 5px;
  cursor: pointer;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.075);
}

.input {
  width: 100%;
  height: 80%;
  border: none;
  outline: none;
  caret-color: rgb(255, 81, 0);
  background-color: rgba(0, 0, 0, 0.925);
  ;
  border-radius: 30px;
  padding-left: 15px;
  letter-spacing: 0.8px;
  color: white;
  font-size: 17px;
  letter-spacing: 1px;
}

/* login/sighin button */
.button {
  position: relative;
  overflow: hidden;
  height: 2.5rem;
  padding: 0 2rem;
  border-radius: 1.5rem;
  background: #3d3a4e;
  background-size: 400%;
  color: #fff;
  border: none;
}

.button:hover::before {
  transform: scaleX(1);
}

.button-content {
  position: relative;
  z-index: 1;
}

.button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  transform: scaleX(0);
  transform-origin: 0 50%;
  width: 100%;
  height: inherit;
  border-radius: inherit;
  background: linear-gradient(82.3deg,
      rgba(150, 93, 233, 1) 10.8%,
      rgba(99, 88, 238, 1) 94.3%);
  transition: all 0.475s;
}

.navbar-nav {
  margin: 0px 0% 0px 15%;
}

/* all parts */
.part {
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
}

/* viratpart */
.viratpart {
  background-position: 60%;
  height: 90vh;
  background-image: url('img/virat.jpg');
}

#viratbox {
  height: 50%;
  width: 40%;
  padding: 50px 0px 0px 50px;
  color: rgba(0, 128, 0, 0.712);
}

#btn {
  width: 170px;
  border: none;
  padding: 5px;
  font-size: 17px;
  font-weight: bold;
}

/* karina part */
.karinapart {
  background-position: 40%;
  height: 75vh;
  background-image: url('img/katrina.jpg');
}

#karinabox {
  margin-top: 5%;
  width: 50%;
  float: right;
  color: rgba(1, 82, 148, 0.651);
  /* text-align: end; */
}

.karinabtn {
  height: 50px;
}

/* colorful part */
.colorpart {
  background-position: 25%;
  height: 75vh;
  background-image: url('img/colorful.jpg');
}

#colorbox {
  padding: 10% 2%;
  width: 50%;
  color: rgba(189, 1, 1, 0.842);
}

/* item part */
.itempart {
  margin: 20px 0px;
  text-align: center;
}

.itembox {
  padding: 5% 0px 0px 0%;
  width: 80%;
}

.category {
  cursor: pointer;
  margin: 10px 20px;
  box-shadow: 1px 1px 10px gray;
  background-size: cover;
  height: 120px;
  width: 120px;
  border-radius: 100%;
}

/* two person part */
.twopart {
  background-position: 70%;
  height: 100%;
  background-image: url('img/two\ person.jpg');
}

#twobox {
  height: 50%;
  width: 40%;
  padding: 50px 0px 0px 50px;
  color: rgba(128, 0, 100, 0.712);
}

/* lion part */
.lionpart {
  background-position: 30%;
  height: 55vh;
  background-image: url('img/lion.jpg');
}

#lionbox {
  padding: 5% 0px 0px 20%;
  width: 80%;
  text-align: center;
  color: rgba(255, 255, 255, 0.651);
  /* text-align: end; */
}

@media (max-width: 991px) {
  .InputContainer {
    width: 100%;
  }

  .input {
    width: 100%;
  }

  .navbar-nav {
    margin: 0px 0% 0px 0%;
  }
}

@media (max-width: 700px) {

  .viratpart,
  .karinapart,
  .colorpart,
  .lionpart {
    height: 60vh;
  }

  #viratbox,
  #twobox {
    width: 100%;
    padding: 70px 20px 0px 20px;
  }

  #karinabox,
  #colorbox {
    padding-top: 100px;
    width: 90%;
  }

  #lionbox {
    width: 100%;
    padding: 20% 5px 0px 5px;
  }

  .category {
    height: 110px;
    width: 110px;
    margin: 10px;
  }
}