:root {
  --font-family: "Inter", serif;
  --container-width: 1200px;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-blue-purple: #593de4;
  --color-light-gray: #efefef;
  --gradient-hero-bg: linear-gradient(180deg, #00000000, #0000004d 100%);
  --overlay-hero-bg: #c4c4c4;
}
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  max-width: 100dvw;
  min-height: 100dvh;
  font-family: var(--font-family);
}
a {
  color: inherit;
  text-decoration: none;
}
ul {
  list-style: none;
}
.container {
  max-width: var(--container-width);
  margin-inline: auto;
}
.header {
  width: 100%;
  position: absolute;
  top: 26px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo span {
  display: block;
  color: var(--color-white);
  text-align: center;
  text-transform: uppercase;
}
.logo span:first-child {
  font-size: 28px;
  font-weight: 900;
}
.logo span:last-child {
  font-size: 12px;
  font-weight: 700;
}
.buttons-wrapper {
  display: flex;
  column-gap: 17px;
}
.buttons-wrapper a {
  color: var(--color-white);
  font-weight: 500;
  padding: 14px 45px;
  border-radius: 4px;
  transition: background-color 0.4s ease, border-color 0.4s ease;
}
.login-button,
.join-button:hover {
  border: 1px solid var(--color-white);
  background-color: transparent;
}
.join-button,
.login-button:hover {
  border: 1px solid var(--color-blue-purple);
  background-color: var(--color-blue-purple);
}
.hero {
  background: var(--gradient-hero-bg),
    url(./images/hero-bg-image.png) center/cover no-repeat,
    var(--overlay-hero-bg);
}
.hero-container {
  min-height: 100dvh;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.hero-container h1 {
  flex-basis: 456px;
  font-size: 50px;
  line-height: 61px;
  color: var(--color-white);
}
.hero-container form {
  flex-basis: 629px;
  border-radius: 10px;
  box-shadow: 0 4px 30px 0 #00000040;
  background-color: var(--color-white);
  padding: 52px 25px 55px;
}
.hero-container form h2 {
  color: var(--color-black);
  font-size: 18px;
}
.inputs-list-wrapper {
  margin-block: 31px 38px;
  display: flex;
  gap: 38px 23px;
  flex-wrap: wrap;
}
.inputs-list-wrapper li {
  flex: 1 0 278px;
}
.inputs-list-wrapper label {
  display: block;
  color: var(--color-blue-purple);
  font-size: 12px;
}
.inputs-list-wrapper :where(select,input) {
  display: block;
  width: 100%;
  margin-top: 11px;
  padding: 12px 20px 12px 55px;
  border-radius: 10px;
  border: 1px solid var(--color-light-gray);
}
.inputs-list-wrapper #pickup-address {
  background: var(--color-light-gray) url(./images/pickup-address-icon.png) 20px
    center/20px 20px no-repeat;
}
.inputs-list-wrapper #delivery-address {
  background: var(--color-light-gray) url(./images/delivery-address-icon.png)
    20px center/20px 20px no-repeat;
}
.inputs-list-wrapper #parcel-details {
  background: var(--color-light-gray) url(./images/parcel-details-icon.png) 20px
    center/20px 20px no-repeat;
}
.inputs-list-wrapper #ship-date {
  background: var(--color-light-gray) url(./images/ship-date-icon.png) 20px
    center/20px 20px no-repeat;
}
.inputs-list-wrapper input:focus {
  outline: 1px solid var(--input-focus-outline-color);
}
.hero-container form button {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 12px;
  border: 1px solid var(--color-blue-purple);
  cursor: pointer;
  background: var(--color-blue-purple);
  color: var(--color-white);
  font-weight: 500;
  padding: 14px 45px;
  border-radius: 4px;
  transition: background-color 0.4s ease, border-color 0.4s ease;
}
.hero-container form button:hover {
  background-color: transparent;
  color: var(--color-blue-purple);
}