.hiro .content {
  max-width: 840px;
}

.hiro .content .shape {
  background-color: #51C9D0;
}

.hiro .content .shape.top {
  background-color: #C1F183;
  top: -200px;
  left: 100px;
}
main .hiro .icon {
  height: 64px;
  width: 64px;
  left: -5px;
}

.hiro {
  margin-bottom: 84px;
}

section.howto {
  display: flex;
  gap: 48px;
  margin-right: 32px;
  box-sizing: border-box;
  margin-bottom: 102px;
}

section.howto h1 {
  font-size: 50px;
  font-weight: 600;
  font-family: 'Syne', sans-serif;
  white-space: nowrap;
  margin: 0;
  margin-bottom: 42px;
}

section.howto .image {
  flex: 1;
  width: 100%;
}

section.howto .image img {
  transform: rotate(2deg);
  width: 500px;
  pointer-events: none;
  user-select: none;
}

section.howto .text .items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 26px 40px;
}

section.howto .text .items h2 {
  margin: 0;
  font-size: 26px;
  font-weight: normal;
  line-height: 170%;
}

section.howto .text .items p {
  margin: 0;
}

section.howto .text .items strong {
  color: var(--gr);
}

.gray {
  overflow: hidden;
  background-color: #FCFBFB;
}


.form h2 {
  font-size: 40px;
  font-family: 'Syne', sans-serif;
  text-align: center;
  font-weight: 600;
  margin: 0;
  line-height: 140%;
  margin-bottom: 36px;
}
.form .amount .prices {
  display: flex;
  justify-content: center;
  gap: 50px;
  margin-bottom: 138px;
  flex-wrap: wrap;
}

.form .amount .prices .card {
  width: 207px;
  height: 124px;
  border-radius: 18px;;
  border: solid 3px var(--gr);
  padding: 24px 70px 16px 35px;
  color: #676767;
  position: relative;
  transition: background-color 300ms;
}
.form .amount .prices .card p {
  font-size: 26px;
  margin: 0;
  text-align: center;
  user-select: none;
}
.form .amount .prices .card span {
  font-size: 31px;
  font-weight: bold;
}

.form .amount .prices .card .image {
  position: absolute;
  right: -22px;
  top: 32px;
  background-color: white;
  transform: rotate(24deg);
  width: 75px;
  height: 48px;
  border-radius: 6px;
  transition: transform 300ms, background-color 300ms;
}

.form .amount .prices .card img {
  transition: transform 300ms;
  filter: none;
  width: 87px;
  transform: rotate(-24.5deg) translate(0px, -13px);
}

.form .amount .prices .card.selected img {
  filter: brightness(999);
}
.form .amount .prices .card:hover .image {
  transform: rotate(-24.5deg);
}


.form .amount .prices .card:focus {
  background-color: white;
}
.form .amount .prices .card:focus .image {
  background-color: white;
}


.form .amount .prices .card.selected .image {
  transform: rotate(-24.5deg);
  background-color: var(--gr);
}

.form .amount .prices .card.selected {
  background-color: var(--gr);
  color: white;
}


.form .info {
  margin: auto;
}

.form form {
}
.form form .form-content{
  display: grid;
  grid-template: "a b" auto "c d" auto "e e" auto / 1fr 1fr;
  gap: 22px 37px;
  width: 100%;
  max-width: 715px;
  margin-bottom: 154px;
  margin: 0 auto;
  
}
.form .input-container {
  width: 100%;
  position: relative;
  align-items: center;
}

.form .input-container label.error {
  color: red;
}
.form .input-container input, .form textarea {
  width: 100%;
  height: 54px;
  border: solid 2px #a3a3a3;
  border-radius: 8px;
  padding: 17px 60px 17px 30px;
  box-sizing: border-box;
  font-size: 20px;
}
.form .input-container input.error {
  border-color: red;
}

.form .input-container input::placeholder {
  color: #a3a3a3;
}

.form .input-container input:focus {
  outline: none;
  border-color: #505050;
}

/*.form .input-container input:focus,.form textarea:focus {
  border-color: var(--gr);
  outline: none;
}*/

.form .input-container img {
  position: absolute;
  right: 22px;
  top: 10px;
  user-select: none;
  pointer-events: none;
}
input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-calendar-picker-indicator {
  display: none;
  -webkit-appearance: none;
}

input.flatpickr-input {
  background-color: white !important;
}

.flatpickr-mobile  {
  color: transparent;
}
.flatpickr-mobile:before  {
  content: attr(placeholder);
  color: #a3a3a3;
}
.flatpickr-mobile:focus:before {
  display: none;
}
.flatpickr-mobile:focus {
  color: black;
}

input[type="hidden"][value]:not([value=""]) + .flatpickr-mobile:before {
  display: none; 
}


.form textarea {
  grid-area: e;
  height: 130px;
  width: 717px;
  max-width: 100%;
  min-width: 100%;
  min-height: 130px;
  max-height: 130px;
  resize: none;
}

.form textarea::placeholder {
  color: #a3a3a3;
}

.form .send {
  margin: auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 111px;
}
.form .send h2 {
  max-width: 780px;
  margin-bottom: 55px;
}

.form .send h3.error {
  color: red;
}

.form .send button {
  width: 355px;
  height: 66px;
  border-radius: 13px;
  font-size: 24px;
}


section.bonus {
  margin-top: 66px;
  margin-bottom: 92px;
}

section.reviews {
  margin-top: 52px;
}

section.newsletter {
  margin-top: 63px;
}

@media screen and (max-width: 600px) {
  .hiro  {
    margin-bottom: 28px;
  }
  .hiro .icon {
    left: -40px;
  }
  .hiro .content {
    padding-left: 72px;
    padding-right: 24px;
  }
  .hiro .content .shape {
    left: -20px;
  }
  .hiro .content .shape.top {
    width: 166px;
    height: 166px;
    top: -100px;
    left: 60px;
    filter: blur(47px);
  }
  section.howto {
    flex-direction: column;
    margin: 0;
    gap: 28px;
    margin-bottom: 24px;
  }
  section.howto .image img {
    width: 100%;
  }
  section.howto h1 {
    font-size: 24px;
    text-align: center;
    margin-bottom: 12px;
  }
  section.howto .text .items {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 21px 0 21px;
  }
  section.howto .text .items > div {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
  }
  section.howto .text .items p {
    font-size: 17px;
    line-height: 22px;
  }
  section.howto .text .items h2 {
    font-size: 44px;
  }
  .gray main {
    margin-top: 42px;
  }
  .form h2 {
    font-size: 24px;
  }
  
  .form .amount .prices {
    flex-wrap: wrap;
    gap: 22px 35px;
    margin-bottom: 65px;
  }
  .form .amount .prices .card {
    width: 130px;
    height: 80px;
    padding: 2px 48px 0px 26px;
    border-width: 2.5px;
    border-radius: 12px;
  }
  .form .amount .prices .card p {
    font-size: 16px;
  }
  .form .amount .prices .card span {
    font-size: 19px;
  }
  .form .amount .prices .card .image {
    width: 50px;
    height: 32px;
    top: 20px;
    right: -14px;
  }
  .form .amount .prices .card .image img {
    width: 56px;
    transform: rotate(-24.5deg) translate(2px, -8px);
  }
  .form form {
    grid-template: "a" auto "b" auto "c" auto "e" auto / 100%;
    width: 100%;
    gap: 16px;
  }
  .form .input-container input, .form textarea {
    font-size: 16px;
    height: 42px;
    border-width: 1px;
    padding: 12px 24px;
  }
  .form .input-container img {
    width: 19px;
    right: 14px;
  }
  .form .info {
    margin-bottom: 35px;
  }
  .form .send h2 {
    margin-bottom: 32px;
  }
  .form .send button {
    width: 216px;
    height: 40px;
    border-radius: 8px;
    font-size: 15px;
  }
  .form .send {
    margin-bottom: 54px;
  }
  .form .methods, section.methods {
    gap: 20px;
    margin-bottom: 30px;
  }
  .form .methods img {
    width: 40px;
    height: 20px;
  }
  .form .methods > div {
    font-size: 7px;
  }
  section.bonus {
    margin-top: 0px;
    margin-bottom: 48px;
  }
  section.bonus .row {
    margin-top: 0px;
  }
  .cards h2, .subcategories h2 {
    font-size: 16px;
    margin-bottom: 20px;
  }
  
}

@media screen and (max-width: 1120px) {
  section.howto {
    flex-direction: column;
    align-items: center;
  }
  section.howto .image {
    width: auto;
  }
  section.howto .text {
    max-width: 600px;
    padding-left: 24px;
  }
}

@media screen and (max-width: 770px) {

  .form form .form-content{
    grid-template: "a" auto "b" auto "c" auto "d" auto "e" auto / 1fr;
    gap: 22px 37px;
    width: 100%;
    max-width: 715px;
    margin-bottom: 154px;
    margin: 0 auto;
    
  }

  .input-container, .form textarea {
    max-width: calc(100vw - 48px);
  }

}