usage-counts/src/app/home/home.component.css

.first {
  background-image: url("/assets/usage-statistics-assets/home/1.svg");
  background-size: auto;
  background-repeat: no-repeat;
  background-position: center top;
  height: 336px;
}

.second {
  background-image: url("/assets/usage-statistics-assets/home/2.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom center;
}

.second input, .second input:focus {
  background: #FFFFFF 0 0 no-repeat padding-box;
  box-shadow: 0 3px 6px #00000029;
  border-radius: 4px;
  padding: 15px;
  border: none;
  outline: none;
}

.second input::placeholder {
  color: #a3a3a3;
}

.third {
  background-image: url("/assets/usage-statistics-assets/home/3.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom center;
}

button.search, button.search:hover {
  color: #333333;
  font-weight: 700;
  border: none;
  outline: none;
  background-color: transparent;
}

button.search:hover {
  color: var(--portal-main-color);
}

.card {
  background: #FFFFFF 0 0 no-repeat padding-box;
  box-shadow: 0 3px 6px #00000029;
  border-radius: 4px;
  padding: 50px;
  text-align: center;
  position: relative;
  height: 113px;
}

.card > img {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);
}

iframe {
  box-shadow: 1px 10px 12px #00000029;
  border-radius: 5px;
}