main form {
  flex: 20em;
}

main .carousel {
  flex: 20em;
  background-color: white;
  border-radius: 8px;
  min-height: 595px;
  padding: 2rem;
}

.login-linkedin {
  display: flex;
  gap: 1rem;
  align-items: center;
  border: 2px solid var(--color-navy-200);
  color: var(--color-navy-200) !important;
}

.btn-tab.active {
  background-color: var(--color-navy-200);
  color: white;
}
.btn-tab {
  color: var(--color-navy-200);
  background-color: white;
}

main .carousel .carousel-indicators {
  bottom: 10%;
}

main .carousel .carousel-control-next,
main .carousel .carousel-control-prev {
  top: revert;
  margin: 2rem;
  color: var(--color-navy-200);
  font-weight: 700;
  opacity: revert;
}

main .carousel-item .hero {
  width: 70%;
}

main .carousel .carousel-control-next span,
main .carousel .carousel-control-prev span {
  text-underline-position: under;
}

main .carousel .carousel-indicators button {
  height: 9px;
  width: 9px;
  border-radius: 50%;
  background-color: transparent;
  border: 1px solid var(--color-navy-200);
}

main .carousel .carousel-indicators button.active {
  background-color: var(--color-navy-200);
}

.phone-number-input {
  display: flex;
  gap: 0.3rem;
}

.phone-number-input select {
  width: 30%;
}

.tab-item {
  display: none;
}

.tab-item.active {
  display: flex;
}

#login-form {
  --gap: 1.5rem;
}

@media (min-width: 1000px){
  #login-form {
    --gap: 2rem;
  }
}