.search {
  position: relative;
  z-index: 2;
  margin-top: -60px;

  @media screen and (min-width: 425px) {
    margin-top: -48px;
  }

  @media screen and (min-width: 960px) {
    margin-top: -32px;
  }
}

.search .main-group {
  display: flex;
  flex-direction: column;
  gap: var(--lg-spacing);
  padding: 32px;
  width: 100%;
  border-radius: var(--lg-border-radius);
  background: #30ADE7;
  background: linear-gradient(90deg, rgba(48, 173, 231, 1) 0%, rgba(26, 122, 203, 1) 100%);
}

.search .header {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  text-align: start;
  width: 100%;
  gap: var(--sm-spacing);
}

.search .main-group h2,
.search .main-group p {
  color: var(--white);
}

.search .buttons-wrapper {
  width: 100%;
  overflow-x: scroll;

  @media screen and (min-width: 768px) {
    overflow: hidden;
  }
}

.search .buttons {
  display: flex;
  flex-direction: row;
  gap: var(--sm-spacing);
  width: 510px;

  @media screen and (min-width: 768px) {
    width: 100%;
    gap: var(--md-spacing);
  }
}

.search .buttons button {
  border: none;
  color: var(--white);
  background-color: #FFFFFF14;
  width: auto;

  @media screen and (min-width: 768px) {
    width: 100%;
  }
}

.search .buttons button.selected {
  color: var(--primary-color);
  background-color: var(--white);
}

.search .buttons button:hover {
  cursor: pointer;
}

.search form {
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing);

  @media screen and (min-width: 960px) {
    flex-direction: row;
  }
}

.search .form-group {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  gap: var(--sm-spacing);
}

.search .form-group label {
  color: var(--white);
}