@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
:root {
  --main-font: "Cinzel", serif;
  --second-font: "Montserrat", sans-serif;

  --curent-size: 1920;
}

body {
  background: #fffdfa;
}

.container {
  width: calc((1440 / var(--curent-size)) * 100vw);
  margin: 0 auto;
}

header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  padding: calc((20 / var(--curent-size)) * 100vw) 0;
}

#hero {
  background-image: url(/assets/img/bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: calc((900 / var(--curent-size)) * 100vw);
  position: relative;
}

.header-wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
}

.header-menu {
  display: flex;
  align-items: center;
  list-style: none;
  gap: calc((30 / var(--curent-size)) * 100vw);
  margin-right: calc((60 / var(--curent-size)) * 100vw);
}

.header-menu li a {
  font-family: var(--second-font);
  color: #202020;
  font-size: calc((16 / var(--curent-size)) * 100vw);
  text-decoration: none;
  font-weight: 600;
}

.logo {
  width: calc((270 / var(--curent-size)) * 100vw);
}

.hero-text-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: calc((30 / var(--curent-size)) * 100vw);
  width: 100%;
  position: relative;
}

.hero-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: calc((30 / var(--curent-size)) * 100vw);
}

.hero-text > p {
  font-family: var(--second-font);
  color: #202020;
  font-size: calc((18 / var(--curent-size)) * 100vw);
  text-decoration: none;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: calc((2 / var(--curent-size)) * 100vw);
}

.hero-text > h1 {
  font-family: var(--main-font);
  color: #1c2232;
  font-size: calc((84 / var(--curent-size)) * 100vw);
  text-decoration: none;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.9;
  margin: calc((10 / var(--curent-size)) * 100vw) 0
    calc((10 / var(--curent-size)) * 100vw) 0;
}

.hero-text > span {
  font-family: var(--second-font);
  color: #be9164;
  font-size: calc((22 / var(--curent-size)) * 100vw);
  text-decoration: none;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: calc((2 / var(--curent-size)) * 100vw);
}

.hero-text-block > p {
  font-family: var(--second-font);
  color: #202020;
  font-size: calc((17 / var(--curent-size)) * 100vw);
  text-decoration: none;
  font-weight: 600;
  text-align: left;
  margin-top: calc((20 / var(--curent-size)) * 100vw);
}

.hero-text-block > ul {
  display: flex;
  align-items: flex-start;
  list-style: none;
  gap: calc((30 / var(--curent-size)) * 100vw);
  margin-top: calc((60 / var(--curent-size)) * 100vw);
}

.hero-text-block > ul li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc((10 / var(--curent-size)) * 100vw);
}

.hero-text-block > ul li img {
  width: calc((80 / var(--curent-size)) * 100vw);
}

.hero-text-block > ul li span {
  font-family: var(--second-font);
  color: #202020;
  font-size: calc((18 / var(--curent-size)) * 100vw);
  text-decoration: none;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
}

.hero-text-block > a {
  width: calc((460 / var(--curent-size)) * 100vw);
  height: calc((80 / var(--curent-size)) * 100vw);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: calc((16 / var(--curent-size)) * 100vw);
  background: linear-gradient(
    166deg,
    rgba(255, 222, 186, 1) 0%,
    rgba(190, 145, 100, 1) 100%
  );

  font-family: var(--second-font);
  color: #fff;
  font-size: calc((24 / var(--curent-size)) * 100vw);
  text-decoration: none;
  font-weight: 600;
  text-align: center;
  box-shadow: 1px 4px 6px -3px #000;
  margin-top: calc((50 / var(--curent-size)) * 100vw);
}

.hero-text-block > span {
  text-align: center;
  width: calc((460 / var(--curent-size)) * 100vw);
  font-family: var(--second-font);
  color: #202020;
  font-size: calc((16 / var(--curent-size)) * 100vw);
  text-decoration: none;
  font-weight: 600;
  margin-top: calc((10 / var(--curent-size)) * 100vw);
  text-transform: uppercase;
}

.badge {
  position: absolute;
  top: calc((150 / var(--curent-size)) * 100vw);
  right: calc((220 / var(--curent-size)) * 100vw);
  width: calc((140 / var(--curent-size)) * 100vw);
}

.up-text {
  position: absolute;
  top: calc((55 / var(--curent-size)) * 100vw);
  right: calc((-200 / var(--curent-size)) * 100vw);
}

.up-text p {
  font-family: var(--second-font);
  color: #be9164;
  font-size: calc((18 / var(--curent-size)) * 100vw);
  text-decoration: none;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: calc((2 / var(--curent-size)) * 100vw);
  position: relative;
}

.up-text p:after {
  content: "";
  position: absolute;
  top: calc((-10 / var(--curent-size)) * 100vw);
  left: 0;
  width: 30%;
  height: calc((2 / var(--curent-size)) * 100vw);
  background: #be9164;
}

#advantages {
  padding: calc((90 / var(--curent-size)) * 100vw) 0;
}

.advantages-wrapper {
  padding: calc((60 / var(--curent-size)) * 100vw);
  border-radius: calc((16 / var(--curent-size)) * 100vw);
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border: calc((1 / var(--curent-size)) * 100vw) solid #1c223214;
}

.advantages-wrapper > h2 {
  font-family: var(--second-font);
  color: #1c2232;
  font-size: calc((24 / var(--curent-size)) * 100vw);
  text-decoration: none;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.9;
  position: relative;
}

.advantages-wrapper > h2:after {
  content: "";
  position: absolute;
  bottom: calc((-10 / var(--curent-size)) * 100vw);
  left: 0;
  width: 30%;
  height: calc((2 / var(--curent-size)) * 100vw);
  background: #be9164;
}

.advantages-wrapper ul {
  display: flex;
  align-items: flex-start;
  list-style: none;
}

.advantages-wrapper ul li {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 calc((30 / var(--curent-size)) * 100vw);
  position: relative;
}

.advantages-wrapper ul li:not(:last-child):after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: calc((1 / var(--curent-size)) * 100vw);
  height: 100%;
  background: linear-gradient(
    0deg,
    rgba(255, 222, 186, 0) 0%,
    rgba(255, 222, 186, 1) 50%,
    rgba(255, 222, 186, 0) 100%
  );
}

.advantages-wrapper ul li img {
  width: calc((120 / var(--curent-size)) * 100vw);
}

.advantages-wrapper ul li p {
  font-family: var(--second-font);
  color: #202020;
  font-size: calc((16 / var(--curent-size)) * 100vw);
  text-decoration: none;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
}

#how-work {
  padding: calc((90 / var(--curent-size)) * 100vw) 0;
}

.work-data {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.work-data h3 {
  font-family: var(--second-font);
  color: #1c2232;
  font-size: calc((40 / var(--curent-size)) * 100vw);
  text-decoration: none;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.9;
}

.work-data > p {
  font-family: var(--second-font);
  color: #202020b5;
  font-size: calc((24 / var(--curent-size)) * 100vw);
  text-decoration: none;
  font-weight: 600;
  text-align: left;
  margin: calc((10 / var(--curent-size)) * 100vw) 0
    calc((40 / var(--curent-size)) * 100vw) 0;
}

.work-data ul {
  display: flex;
  align-items: flex-start;
  list-style: none;
  gap: calc((60 / var(--curent-size)) * 100vw);
}

.work-data ul li {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.work-data ul li img {
  width: calc((100 / var(--curent-size)) * 100vw);
  margin-bottom: calc((10 / var(--curent-size)) * 100vw);
}

.work-data ul li p {
  font-family: var(--second-font);
  color: #202020;
  font-size: calc((18 / var(--curent-size)) * 100vw);
  text-decoration: none;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
}

.work-data ul li span {
  font-family: var(--second-font);
  color: #202020;
  opacity: 0.7;
  font-size: calc((16 / var(--curent-size)) * 100vw);
  text-decoration: none;
  font-weight: 500;
  text-align: center;
  margin: calc((6 / var(--curent-size)) * 100vw) 0;
}

.work-data ul li div {
  font-family: var(--second-font);
  color: #be9164;
  opacity: 0.7;
  font-size: calc((16 / var(--curent-size)) * 100vw);
  text-decoration: none;
  font-weight: 500;
  text-align: center;
  margin: calc((6 / var(--curent-size)) * 100vw) 0 0 0;
}

.work-wrapper {
  display: flex;
  align-items: flex-start;
  width: 100%;
  justify-content: space-between;
}

.work-img-data {
  display: flex;
  align-items: stretch;
  gap: calc((15 / var(--curent-size)) * 100vw);
}

.work-imgs {
  display: flex;
  align-items: flex-start;
  gap: calc((15 / var(--curent-size)) * 100vw);
}

.work-img {
  display: flex;
  align-items: center;
  flex-direction: column;
  align-items: center;
  gap: calc((10 / var(--curent-size)) * 100vw);
}

.work-img img {
  width: calc((160 / var(--curent-size)) * 100vw);
}

.work-img p {
  font-family: var(--second-font);
  color: #202020;
  font-size: calc((18 / var(--curent-size)) * 100vw);
  text-decoration: none;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
}

.work-img-text {
  background: #f1f1f1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: calc((40 / var(--curent-size)) * 100vw);
  padding: calc((40 / var(--curent-size)) * 100vw);
}

.work-img-text p {
  font-family: var(--second-font);
  color: #1c2232;
  font-size: calc((20 / var(--curent-size)) * 100vw);
  text-decoration: none;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.9;
  position: relative;
}

.work-img-text p:after {
  content: "";
  position: absolute;
  bottom: calc((-20 / var(--curent-size)) * 100vw);
  left: 0;
  width: 30%;
  height: calc((2 / var(--curent-size)) * 100vw);
  background: #be9164;
}

.work-img-text span {
  font-family: var(--second-font);
  color: #1c2232;
  font-size: calc((16 / var(--curent-size)) * 100vw);
  text-decoration: none;
  font-weight: 500;
}

#form-section {
  background-image: url(/assets/img/form-bg.jpg);
  height: calc((500 / var(--curent-size)) * 100vw);
  width: 100%;
}

#form-section .container {
  height: 100%;
}

.form-section {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  justify-content: space-between;
}

.form-section-data {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  height: 100%;
}

.form-section-data > p {
  font-family: var(--second-font);
  color: #be9164;
  font-size: calc((22 / var(--curent-size)) * 100vw);
  text-decoration: none;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: calc((2 / var(--curent-size)) * 100vw);
}

.form-section-data > h4 {
  font-family: var(--second-font);
  color: #1c2232;
  font-size: calc((50 / var(--curent-size)) * 100vw);
  text-decoration: none;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.9;
  margin: calc((60 / var(--curent-size)) * 100vw) 0;
}

.header-mobile {
  display: none;
}

.form-section-data > ul {
  display: flex;
  align-items: flex-start;
  list-style: none;
  gap: calc((30 / var(--curent-size)) * 100vw);
}

.form-section-data > ul li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc((10 / var(--curent-size)) * 100vw);
}

.form-section-data > ul li img {
  width: calc((50 / var(--curent-size)) * 100vw);
}

.form-section-data > ul li span {
  font-family: var(--second-font);
  color: #202020;
  font-size: calc((16 / var(--curent-size)) * 100vw);
  text-decoration: none;
  font-weight: 500;
}

.form-wrap {
  background: #fff;
  border-radius: calc((20 / var(--curent-size)) * 100vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc((40 / var(--curent-size)) * 100vw)
    calc((30 / var(--curent-size)) * 100vw);
}

.form-wrap > p {
  font-family: var(--second-font);
  color: #1c2232;
  font-size: calc((30 / var(--curent-size)) * 100vw);
  text-decoration: none;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.9;
}

.form-wrap > span {
  font-family: var(--second-font);
  color: #202020;
  font-size: calc((12 / var(--curent-size)) * 100vw);
  text-decoration: none;
  font-weight: 500;
  margin-top: calc((10 / var(--curent-size)) * 100vw);
}

.form-wrap form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  margin-top: calc((20 / var(--curent-size)) * 100vw);
  gap: calc((10 / var(--curent-size)) * 100vw);
  width: calc((360 / var(--curent-size)) * 100vw);
}

.form-wrap form input {
  width: 100%;
  padding: calc((12 / var(--curent-size)) * 100vw)
    calc((25 / var(--curent-size)) * 100vw);
  border-radius: calc((12 / var(--curent-size)) * 100vw);
  outline: none;
  border: calc((1 / var(--curent-size)) * 100vw) solid #00000035;
  font-family: var(--second-font);
  color: #202020;
  font-size: calc((16 / var(--curent-size)) * 100vw);
  text-decoration: none;
  font-weight: 400;
}

.form-wrap form button {
  width: 100%;
  height: calc((50 / var(--curent-size)) * 100vw);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: calc((16 / var(--curent-size)) * 100vw);
  background: linear-gradient(
    166deg,
    rgba(255, 222, 186, 1) 0%,
    rgba(190, 145, 100, 1) 100%
  );
  font-family: var(--second-font);
  color: #fff;
  font-size: calc((20 / var(--curent-size)) * 100vw);
  text-decoration: none;
  font-weight: 600;
  text-align: center;
  box-shadow: 1px 4px 6px -3px #000;
  border: none;
  cursor: pointer;
}

.form-right-text {
  display: flex;
  align-items: flex-start;
  gap: calc((50 / var(--curent-size)) * 100vw);
  flex-direction: column;
}

.form-right-text p {
  font-family: var(--second-font);
  color: #1c2232;
  font-size: calc((30 / var(--curent-size)) * 100vw);
  text-decoration: none;
  font-weight: 500;
  text-transform: uppercase;
  position: relative;
}
.form-right-text p:after {
  content: "";
  position: absolute;
  bottom: calc((-20 / var(--curent-size)) * 100vw);
  left: 0;
  width: 30%;
  height: calc((2 / var(--curent-size)) * 100vw);
  background: #be9164;
}

.form-right-text span {
  font-family: var(--second-font);
  color: #202020;
  font-size: calc((20 / var(--curent-size)) * 100vw);
  text-decoration: none;
  font-weight: 500;
  text-transform: uppercase;
}

.footer-wrapper {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-between;
}

.footer-wrapper > p {
  font-family: var(--second-font);
  color: #202020;
  opacity: 0.6;
  font-size: calc((20 / var(--curent-size)) * 100vw);
  text-decoration: none;
  font-weight: 400;
  text-align: center;
}

.footer-wrapper .header-menu {
  margin: 0;
}

.footer-wrapper .header-menu li a {
  font-size: calc((14 / var(--curent-size)) * 100vw);
}

.logo-footer {
  width: calc((180 / var(--curent-size)) * 100vw);
}

.burger-wrapper {
  display: none;
}

footer {
  padding: calc((30 / var(--curent-size)) * 100vw) 0;
}

@media all and (max-width: 768px) {
  :root {
    --curent-size: 375;
  }

  .container {
    width: calc((355 / var(--curent-size)) * 100vw);
  }

  .logo {
    display: none;
    width: calc((270 / var(--curent-size)) * 100vw);
  }

  .badge {
    display: none;
    position: absolute;
    top: calc((150 / var(--curent-size)) * 100vw);
    right: calc((220 / var(--curent-size)) * 100vw);
    width: calc((140 / var(--curent-size)) * 100vw);
  }

  .hero-text > h1 {
    font-size: calc((40 / var(--curent-size)) * 100vw);
    margin: calc((10 / var(--curent-size)) * 100vw) 0
      calc((10 / var(--curent-size)) * 100vw) 0;
  }

  .hero-text > span {
    font-size: calc((14 / var(--curent-size)) * 100vw);
  }

  .hero-text-block > p {
    font-size: calc((14 / var(--curent-size)) * 100vw);
    margin-top: calc((10 / var(--curent-size)) * 100vw);
  }

  .hero-text > p {
    font-size: calc((12 / var(--curent-size)) * 100vw);
  }

  .hero-text-block > a {
    width: 100%;
    height: calc((50 / var(--curent-size)) * 100vw);
    border-radius: calc((16 / var(--curent-size)) * 100vw);
    font-size: calc((18 / var(--curent-size)) * 100vw);
    margin-top: calc((15 / var(--curent-size)) * 100vw);
  }

  .header-menu {
    display: none;
  }

  .hero-text-block > ul {
    flex-wrap: wrap;
    gap: calc((10 / var(--curent-size)) * 100vw);
    margin-top: auto;
    width: 100%;
    justify-content: space-between;
  }

  .hero-text-block > ul li span {
    font-size: calc((10 / var(--curent-size)) * 100vw);
  }

  .hero-text-block > ul li img {
    width: calc((50 / var(--curent-size)) * 100vw);
  }

  #hero {
    background-image: url(/assets/img/bg-m.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: calc((766 / var(--curent-size)) * 100vw);
    position: relative;
    padding-bottom: calc((20 / var(--curent-size)) * 100vw);
  }
  .up-text {
    position: absolute;
    top: calc((95 / var(--curent-size)) * 100vw);
    right: calc((0 / var(--curent-size)) * 100vw);
  }
  .up-text p {
    font-family: var(--second-font);
    color: #be9164;
    font-size: calc((12 / var(--curent-size)) * 100vw);
    text-decoration: none;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: calc((2 / var(--curent-size)) * 100vw);
    position: relative;
    text-align: right;
  }

  .up-text p:after {
    content: "";
    position: absolute;
    top: calc((-10 / var(--curent-size)) * 100vw);
    left: unset;
    right: 0;
    width: 30%;
    height: calc((2 / var(--curent-size)) * 100vw);
    background: #be9164;
  }

  .hero-text-block > span {
    width: 100%;
    font-size: calc((12 / var(--curent-size)) * 100vw);
    margin-top: calc((10 / var(--curent-size)) * 100vw);
  }

  #hero .container {
    height: 100%;
  }

  .hero-text-block {
    height: 100%;
  }

  .header-mobile {
    display: flex;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .logo-burger {
    width: calc((100 / var(--curent-size)) * 100vw);
  }

  header {
    padding: calc((10 / var(--curent-size)) * 100vw) 0;
  }

  #nav-toggle {
    background: initial;
    height: calc((24 / var(--curent-size)) * 100vw);
    width: calc((38 / var(--curent-size)) * 100vw);
    cursor: pointer;
    border: none;
    z-index: 10;
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  #nav-toggle span,
  #nav-toggle span:before,
  #nav-toggle span:after {
    cursor: pointer;
    border-radius: calc((1 / var(--curent-size)) * 100vw);
    height: calc((2 / var(--curent-size)) * 100vw);
    width: calc((35 / var(--curent-size)) * 100vw);
    background: #be9164;
    position: absolute;
    right: 0;
    top: 50%;
    display: block;
    content: "";
    border-radius: calc((20 / var(--curent-size)) * 100vw);
  }

  #nav-toggle span {
    width: calc((24 / var(--curent-size)) * 100vw);
    position: relative;
    top: 0;
    right: 0;
    border-radius: calc((20 / var(--curent-size)) * 100vw);
  }

  #nav-toggle span:before {
    top: calc((-10 / var(--curent-size)) * 100vw);
  }

  #nav-toggle span:after {
    top: calc((10 / var(--curent-size)) * 100vw);
  }

  #nav-toggle span {
    transition: all 0.2s ease-in-out;
  }

  #nav-toggle span:before,
  #nav-toggle span:after {
    transition: all 0.3s ease-in-out;
  }

  #nav-toggle.active span {
    background-color: transparent;
  }

  #nav-toggle.active span:before,
  #nav-toggle.active span:after {
    top: 0;
  }

  #nav-toggle.active span:before {
    transform: rotate(-45deg);
  }

  #nav-toggle.active span:after {
    transform: rotate(-135deg);
  }

  .advantages-wrapper {
    padding: calc((20 / var(--curent-size)) * 100vw);
    border-radius: calc((16 / var(--curent-size)) * 100vw);
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    border: calc((1 / var(--curent-size)) * 100vw) solid #1c223214;
  }

  .advantages-wrapper > h2 {
    font-size: calc((20 / var(--curent-size)) * 100vw);
  }

  .advantages-wrapper ul {
    flex-wrap: wrap;
  }

  .advantages-wrapper ul li img {
    width: calc((70 / var(--curent-size)) * 100vw);
  }
  .advantages-wrapper ul li p {
    font-size: calc((12 / var(--curent-size)) * 100vw);
  }

  .advantages-wrapper ul li {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 calc((0 / var(--curent-size)) * 100vw);
    position: relative;
    width: 50%;
  }

  .advantages-wrapper ul li:nth-child(2):after {
    content: none;
  }

  .advantages-wrapper {
    gap: calc((30 / var(--curent-size)) * 100vw);
  }

  #advantages {
    padding: calc((40 / var(--curent-size)) * 100vw) 0;
  }

  .work-wrapper {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    width: 100%;
    justify-content: space-between;
    gap: calc((20 / var(--curent-size)) * 100vw);
  }

  .work-data h3 {
    font-size: calc((24 / var(--curent-size)) * 100vw);
  }

  .work-data > p {
    font-size: calc((16 / var(--curent-size)) * 100vw);
    margin: calc((10 / var(--curent-size)) * 100vw) 0
      calc((40 / var(--curent-size)) * 100vw) 0;
  }

  .work-data ul {
    flex-wrap: wrap;
    gap: calc((0 / var(--curent-size)) * 100vw);
  }

  .work-data ul li {
    width: 50%;
  }

  .work-data ul li img {
    width: calc((55 / var(--curent-size)) * 100vw);
    margin-bottom: calc((10 / var(--curent-size)) * 100vw);
  }

  .work-data ul li p {
    font-size: calc((14 / var(--curent-size)) * 100vw);
  }

  .work-data ul li span {
    font-family: var(--second-font);
    color: #202020;
    opacity: 0.7;
    font-size: calc((13 / var(--curent-size)) * 100vw);
    text-decoration: none;
    font-weight: 500;
    text-align: center;
    margin: calc((6 / var(--curent-size)) * 100vw) 0;
  }

  .work-img-data {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: calc((15 / var(--curent-size)) * 100vw);
  }

  .work-imgs {
    display: flex;
    align-items: flex-start;
    gap: calc((15 / var(--curent-size)) * 100vw);
    width: 100%;
  }

  .work-img img {
    width: calc((170 / var(--curent-size)) * 100vw);
  }

  .work-img-text {
    background: #f1f1f1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: calc((40 / var(--curent-size)) * 100vw);
    padding: calc((40 / var(--curent-size)) * 100vw);
    width: 100%;
  }

  .work-img-text span br {
    display: none;
  }

  .work-img-text {
    background: #f1f1f1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: calc((40 / var(--curent-size)) * 100vw);
    padding: calc((20 / var(--curent-size)) * 100vw);
  }
  .work-img p {
    font-size: calc((14 / var(--curent-size)) * 100vw);
  }

  .form-section {
    flex-direction: column;
    align-items: flex-start;
    gap: calc((30 / var(--curent-size)) * 100vw);
  }

  .form-right-text p {
    font-size: calc((18 / var(--curent-size)) * 100vw);
  }

  .form-right-text span {
    font-size: calc((14 / var(--curent-size)) * 100vw);
  }

  #form-section {
    background-size: cover;
    background-image: url(/assets/img/form-bg-m.jpg);
    height: fit-content;
    width: 100%;
    padding: calc((20 / var(--curent-size)) * 100vw) 0;
  }

  .form-section-data > p {
    font-size: calc((14 / var(--curent-size)) * 100vw);
    letter-spacing: calc((2 / var(--curent-size)) * 100vw);
  }

  #how-work {
    padding: calc((40 / var(--curent-size)) * 100vw) 0;
  }

  .form-section-data > h4 {
    font-size: calc((30 / var(--curent-size)) * 100vw);
    margin: calc((20 / var(--curent-size)) * 100vw) 0;
  }

  .form-section-data > ul li img {
    width: calc((30 / var(--curent-size)) * 100vw);
  }

  .form-section-data > ul li span {
    font-size: calc((12 / var(--curent-size)) * 100vw);
  }

  .form-wrap form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    margin-top: calc((20 / var(--curent-size)) * 100vw);
    gap: calc((10 / var(--curent-size)) * 100vw);
    width: 100%;
  }
  .form-wrap {
    background: #fff;
    border-radius: calc((20 / var(--curent-size)) * 100vw);
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: calc((30 / var(--curent-size)) * 100vw)
      calc((20 / var(--curent-size)) * 100vw);
  }

  .form-wrap > p {
    font-size: calc((20 / var(--curent-size)) * 100vw);
  }
  .form-wrap > span {
    font-family: var(--second-font);
    color: #202020;
    font-size: calc((10 / var(--curent-size)) * 100vw);
    text-decoration: none;
    font-weight: 500;
    margin-top: calc((10 / var(--curent-size)) * 100vw);
  }

  .form-wrap form input {
    padding: calc((10 / var(--curent-size)) * 100vw)
      calc((20 / var(--curent-size)) * 100vw);
    font-size: calc((14 / var(--curent-size)) * 100vw);
  }

  .form-wrap form button {
    height: calc((40 / var(--curent-size)) * 100vw);
    border-radius: calc((10 / var(--curent-size)) * 100vw);
    font-size: calc((15 / var(--curent-size)) * 100vw);
  }

  .footer-wrapper {
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 100%;
    justify-content: space-between;
    gap: calc((20 / var(--curent-size)) * 100vw);
  }

  .form-wrap {
    order: 100;
  }

  .footer-wrapper > p {
    font-family: var(--second-font);
    font-size: calc((12 / var(--curent-size)) * 100vw);
    order: 100;
  }

  .footer-wrapper .header-menu {
    display: flex;
  }

  .footer-wrapper .header-menu li a {
    font-size: calc((11 / var(--curent-size)) * 100vw);
  }

  .burger-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-end;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s ease;
  }

  .burger-wrapper.open {
    opacity: 1;
    visibility: visible;
    transition: 0.3s ease;
  }

  .burger-content {
    width: 100%;
    background: #fff;
    height: 100%;
    box-shadow: 0 0 17px -8px #000;
    padding: calc((120 / var(--curent-size)) * 100vw)
      calc((30 / var(--curent-size)) * 100vw)
      calc((60 / var(--curent-size)) * 100vw)
      calc((30 / var(--curent-size)) * 100vw);
    transform: translateX(100%);
    transition: 0.3s ease;
  }

  .burger-content.open {
    transform: translateX(00%);
    transition: 0.3s ease;
  }

  .burger-menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    list-style: none;
    gap: calc((50 / var(--curent-size)) * 100vw);
    margin-right: calc((60 / var(--curent-size)) * 100vw);
    width: 100%;
  }

  .burger-menu li a {
    font-family: var(--second-font);
    color: #202020;
    font-size: calc((20 / var(--curent-size)) * 100vw);
    text-decoration: none;
    font-weight: 600;
    position: relative;
  }

  .burger-menu li a:after {
    content: "";
    position: absolute;
    bottom: calc((-10 / var(--curent-size)) * 100vw);
    left: 50%;
    transform: translate(-50%, 0);
    width: 100%;
    height: calc((2 / var(--curent-size)) * 100vw);
    background: linear-gradient(
      90deg,
      rgba(255, 222, 186, 0) 0%,
      rgba(255, 222, 186, 1) 50%,
      rgba(255, 222, 186, 0) 100%
    );
  }

  header {
    position: fixed;
  }
}