:root {
  --bg_color: #9099bf;
  --container_color: #e0e5f1;
  --btn_color: #52658e;
  --border_color: #a5b9ea;
  --btn_hover: #8092be;
}

body {
  background-color: var(--bg_color);
}
img {
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 767.98px) {
  .header img {
    width: 75%;
  }
  .content {
    padding: 15% 0px;
  }
}
@media (min-width: 767.99px) {
  .wrapper {
    width: 1180px;
    max-width: 97%;
    margin-left: auto;
    margin-right: auto;
  }
  .content {
    padding: 10% 0px;
    & .container {
      width: 50%;
    }
  }
}
.b-content {
  background-color: var(--container_color);
  padding: 30px 7px;
  border-radius: 30px;
}
.btn-primary {
  background-color: var(--btn_color);
  border: 0px;
  border-radius: 30px;
  min-width: 200px;
  padding: 16px 20px;
}
.btn-primary:focus {
  background-color: var(--btn_hover);
}
.btn-primary:hover {
  background-color: var(--btn_hover);
}
.h-logo,
.f-logo {
  display: flex;
}
.skin-input {
  width: 100%;
  padding: 7px;
  margin: 7px 0px;
  border-radius: 7px;
  background-color: transparent;
  border-width: 1px;
  border: solid 1px var(--border_color);
  color: var(--border_color);
}
::placeholder {
  color: var(--border_color);
  opacity: 1;
}
i {
  color: var(--border_color);
}