@font-face {
  font-family: 'Bebas Neue Cyrillic';
  src: url(../fonts/BebasNeueCyrillic.eot);
  src: local('Bebas Neue Cyrillic'),local('BebasNeueCyrillic'),url(../fonts/BebasNeueCyrillic.eot?#iefix) format('embedded-opentype'),url(../fonts/BebasNeueCyrillic.woff2) format('woff2'),url(../fonts/BebasNeueCyrillic.woff) format('woff'),url(../fonts/BebasNeueCyrillic.ttf) format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap
}
* {
  box-sizing: border-box
}
body {
  position: relative;
  font-family: Montserrat,sans-serif;
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-weight: 400;
  color: #000;
  overflow-x: hidden
}
body.no_scroll {
  overflow-y: hidden
}
.box {
  width: 1306px;
  margin: 0 auto;
  position: relative
}
input[type=text]:active,
input[type=text]:focus {
  outline: 0
}
.mobile_menu {
  display: none;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  padding: 40px;
  z-index: 4
}
.mobile_menu.open {
  display: block
}
.mobile_menu .wrap {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 90%;
  margin: 0 auto;
  justify-content: center;
  align-items: center
}
.mobile_menu .menu {
  display: inline-flex;
  flex-direction: column;
  gap: 20px;
  align-items: center
}
.mobile_menu .menu a {
  position: relative;
  font-family: 'Bebas Neue Cyrillic';
  color: #000;
  text-decoration: none;
  font-size: 24px;
  display: inline
}
.mobile_menu .btn {
  width: 264px;
  height: 38px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fbe82a;
  border-radius: 9px;
  font-size: 17px;
  line-height: 21px;
  font-weight: 300;
  cursor: pointer
}
.mobile_menu .enter {
  display: flex;
  align-items: center;
  color: #000;
  gap: 10px
}
.mobile_menu .menu_close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 25px;
  height: 25px
}
.mobile_menu .menu_close img {
  width: 100%
}
header {
  padding-top: 54px
}
header .box {
  width: 1380px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end
}
header .burger {
  display: none
}
header .left {
  display: flex;
  gap: 93px;
  align-items: flex-end;
  padding-left: 10px
}
header .left .menu {
  display: flex;
  align-items: flex-end;
  gap: 60px;
  margin-bottom: 9px
}
header .left .menu a {
  position: relative;
  font-family: 'Bebas Neue Cyrillic';
  color: #000;
  text-decoration: none;
  font-size: 24px
}
header .left .menu a.link::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  right: 0;
  height: 4px;
  background: #fbe82a
}
header .right {
  display: flex;
  gap: 34px;
  align-items: center;
  margin-bottom: 4px
}
header .right .btn {
  width: 264px;
  height: 38px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fbe82a;
  border-radius: 9px;
  font-size: 17px;
  line-height: 21px;
  font-weight: 300;
  cursor: pointer
}
.offer {
  height: 883px
}
.offer .box {
  height: 100%;
  width: 1380px
}
.offer .girl {
  position: absolute;
  bottom: 176px;
  left: 411px;
  width: 475px;
  height: 523px;
  background: url(../images/girl.jpg) center bottom no-repeat;
  z-index: -1
}
.offer .ttl {
  margin-top: 68px;
  text-align: center;
  color: #eb556b;
  font-family: Unbounded,serif;
  font-weight: 900;
  font-size: 43px;
  line-height: 134%
}
.offer .desc {
  margin-top: 23px;
  text-align: center;
  font-size: 19px;
  line-height: 139%;
  letter-spacing: -.7px;
  opacity: .8
}
.offer .tabs {
  margin-top: 141px;
  display: flex;
  justify-content: space-between
}
.offer .tabs .hosh {
  font-size: 20px;
  line-height: 139%;
  letter-spacing: -1.2px;
  width: 482px
}
.offer .tabs .hosh.left {
  padding-left: 12px
}
.offer .tabs .hosh.right {
  width: 492px
}
.offer .tabs .hosh .title {
  font-weight: 700
}
.offer .tabs .hosh .li {
  padding-left: 28px;
  position: relative
}
.offer .tabs .hosh .li::after {
  content: '.';
  position: absolute;
  top: -5px;
  left: 10px
}
.about_app {
  height: 984px;
  background: url(../images/bg-about.jpg) top center no-repeat;
  padding-top: 124px
}
.about_app .title {
  font-weight: 700;
  font-size: 70px;
  color: #fff
}
.about_app .desc {
  margin-top: 32px;
  text-align: center;
  color: #fff;
  line-height: 172%
}
.about_app .desc span {
  font-weight: 700
}
.about_app .tabs {
  margin-top: 42px;
  display: flex;
  justify-content: space-between
}
.about_app .tabs .tab {
  width: 406px;
  height: 411px;
  background: #fff;
  border-radius: 30px;
  padding-top: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center
}
.about_app .tabs .tab.yellow {
  width: 428px;
  background: #f9e000;
  border-radius: 0 30px 0 30px;
  padding-top: 28px
}
.about_app .tabs .tab.yellow .ttl {
  margin-top: 15px;
  font-weight: 600;
  font-size: 21px
}
.about_app .tabs .tab.yellow .sttl {
  max-width: 350px
}
.about_app .tabs .tab.t1 .sttl {
  max-width: 300px
}
.about_app .tabs .tab.t3 .sttl {
  max-width: 347px
}
.about_app .tabs .tab .ttl {
  margin-top: 8px;
  font-size: 19px;
  font-weight: 900;
  line-height: 150%;
  letter-spacing: -.7px
}
.about_app .tabs .tab .sttl {
  margin-top: 21px;
  font-size: 15px;
  letter-spacing: -.7px;
  line-height: 150%
}
.about_app .tabs .tab .btn {
  width: 308px;
  height: 77px;
  border-radius: 9px;
  margin-top: 36px;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 300;
  color: #fff;
  cursor: pointer
}
.suitable {
  height: 1044px;
  padding-top: 281px
}
.suitable .title {
  font-family: 'Bebas Neue Cyrillic';
  text-align: center;
  font-size: 70px;
  font-weight: 400
}
.suitable .tabs {
  display: flex;
  justify-content: center;
  gap: 120px;
  margin-top: 38px
}
.suitable .tabs .tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  letter-spacing: -1.2px;
  text-align: center
}
.suitable .tabs .tab.t1 {
  width: 280px
}
.suitable .tabs .tab.t2 {
  width: 320px
}
.suitable .tabs .tab.t3 {
  width: 260px
}
.suitable .tabs .tab img {
  width: 122px;
  height: 122px
}
.suitable .tabs .tab .ttl {
  font-size: 22px
}
.suitable .tabs .tab .desc {
  line-height: 150%
}
.suitable .btn_wrap {
  margin-top: 128px;
  display: flex;
  align-items: center;
  justify-content: center
}
.suitable .btn {
  width: 407px;
  height: 77px;
  background: #f9e000;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 300;
  color: #000;
  cursor: pointer
}
.suitable .phone1 {
  position: absolute;
  left: -224px;
  top: -383px;
  width: 510px;
  height: 685px;
  background: url(../images/suitable-1.png) center no-repeat
}
.suitable .phone2 {
  position: absolute;
  right: -92px;
  bottom: -452px;
  width: 434px;
  height: 677px;
  background: url(../images/suitable-2.png) center no-repeat
}
.advantages {
  background-image: url(../images/bg-advant.png);
  background-repeat: no-repeat;
  background-position: top center;
  padding-bottom: 260px
}
.advantages .title {
  padding-top: 193px;
  font-family: 'Bebas Neue Cyrillic';
  text-align: center;
  font-size: 70px;
  font-weight: 400;
  color: #fff
}
.advantages .tabs {
  margin-top: 53px;
  display: flex;
  flex-wrap: wrap;
  gap: 29px 26px;
  justify-content: center;
  align-items: center
}
.advantages .tab {
  width: 448px;
  height: 354px;
  border-radius: 26px;
  padding: 20px 28px 0;
  text-align: center;
  letter-spacing: -1.2px
}
.advantages .tab.tt {
  border: 1px solid #fff;
  color: #fff
}
.advantages .tab.ty {
  background: #fbe82a;
  color: #000
}
.advantages .tab .img {
  height: 122px
}
.advantages .tab .ttl {
  margin-top: 15px;
  font-weight: 700;
  font-size: 21px;
  text-transform: uppercase
}
.advantages .tab .desc {
  margin-top: 24px;
  line-height: 150%
}
.partners {
  padding: 120px 0 360px;
  background: url(../images/partners.png) top 226px center no-repeat
}
.partners .title {
  font-family: 'Bebas Neue Cyrillic';
  text-align: center;
  font-size: 70px;
  font-weight: 400;
  color: #eb556b
}
.partners img {
  display: none
}
.tarif {
  background-image: url(../images/bg-tarif.png);
  background-repeat: no-repeat;
  background-position: top center;
  padding-bottom: 300px
}
.tarif .title {
  padding-top: 220px;
  font-family: 'Bebas Neue Cyrillic';
  text-align: center;
  font-size: 70px;
  font-weight: 400;
  color: #fff
}
.tarif .item {
  width: 935px;
  height: 342px;
  border-radius: 26px;
  border: 1px solid #fff;
  overflow: hidden;
  margin: 0 auto;
  display: flex
}
.tarif .item.i1 .text {
  border-left: 1px solid #fff
}
.tarif .item.i2 .text {
  border-right: 1px solid #fff;
  width: 380px
}
.tarif .item.i2 {
  margin-top: 30px
}
.tarif .item.i1 {
  margin-top: 40px
}
.tarif .item.i1 .bg {
  background: url(../images/tarif-1.png) right 10px top -10px no-repeat
}
.tarif .item.i2 .bg {
  background: url(../images/tarif-2.png) center no-repeat
}
.tarif .item .bg {
  width: 529px;
  height: 100%
}
.tarif .item .text {
  width: 406px;
  height: 100%;
  background: #262626;
  padding: 37px 30px 0 60px;
  color: #fff
}
.tarif .item .ttl {
  font-weight: 700;
  font-size: 32px
}
.tarif .item .desc {
  padding-top: 19px;
  line-height: 150%;
  letter-spacing: -.7px;
  opacity: .7
}
.tarif .item .price {
  padding-top: 28px;
  font-size: 20px
}
.tarif .item .price span {
  font-weight: 700
}
.tarif .item .btn {
  margin-top: 36px;
  width: 288px;
  height: 54px;
  border-radius: 9px;
  background: #fbe82a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #000;
  cursor: pointer
}
.reviews {
  padding-top: 111px
}
.reviews .box {
  width: 1421px
}
.reviews .title {
  font-family: 'Bebas Neue Cyrillic';
  text-align: center;
  font-size: 70px;
  font-weight: 400
}
.reviews .tabs {
  margin-top: 35px;
  display: flex;
  justify-content: space-between;
  align-items: center
}
.reviews .tab {
  width: 443px;
  height: 480px;
  border-radius: 42px;
  background: #fbe82a;
  padding: 36px 28px 25px
}
.reviews .tab .inner {
  border-radius: 40px;
  padding: 44px 23px 0;
  background: #000;
  height: 100%;
  color: #fff;
  text-align: center
}
.reviews .tab .name {
  margin-top: 18px;
  font-family: 'Bebas Neue Cyrillic';
  font-size: 34px;
  text-transform: uppercase
}
.reviews .tab .text {
  margin-top: 38px;
  font-size: 20px;
  line-height: 100%
}
.reviews .tab .stars {
  margin-top: 50px
}
.feedback {
  padding: 215px 0 0;
  height: 900px;
  background-image: url(../images/bg-feedback.png);
  background-repeat: no-repeat;
  background-position: center
}
.feedback .box {
  display: flex;
  justify-content: space-between
}
.feedback .left {
  width: 678px;
  padding: 20px 0 0 68px
}
.feedback .left .title {
  font-weight: 800;
  font-size: 45px;
  color: #fff;
  line-height: 110%
}
.feedback .left .title span {
  color: #f9e000
}
.feedback .left .desc {
  margin-top: 23px;
  border-left: 1px solid rgba(255,255,255,.5);
  font-size: 16px;
  line-height: 150%;
  padding: 4px 0 4px 15px;
  letter-spacing: -.7px;
  opacity: .7;
  color: #fff
}
.feedback .left .contacts {
  margin-top: 46px;
  display: flex;
  gap: 5px;
  flex-direction: column
}
.feedback .left .contacts .item {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 19px;
  text-decoration: none;
  color: #fff
}
.feedback .left .contacts .item img {
  width: 30px;
  height: 30px;
  min-width: 30px;
  max-width: 30px
}
.feedback .right {
  width: 456px;
  border-radius: 40px;
  border: 1px solid #fff;
  padding: 30px 40px 40px;
  margin-right: 70px;
  color: #fff
}
.feedback .right .ttl {
  text-align: center;
  font-size: 24px;
  line-height: 29px;
  font-weight: 600
}
.feedback .form {
  width: 100%;
  display: block;
  margin-top: 23px
}
.feedback .form .inp {
  display: block;
  width: 100%;
  height: 26px;
  background: 0 0;
  padding-left: 5px;
  margin-bottom: 36px;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.5);
  color: #fff;
  font-size: 16px;
  font-family: Montserrat,sans-serif
}
.feedback .form .inp.error {
  border-bottom: 2px solid red
}
.feedback .form .inp::placeholder {
  opacity: .3;
  color: #fff;
  font-family: Montserrat,sans-serif;
  font-size: 16px
}
.feedback .form .btn_wrap {
  margin-top: 36px;
  display: flex;
  justify-content: center
}
.feedback .form .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 222px;
  height: 43px;
  border-radius: 9px;
  border: 0;
  background: #f9e000;
  font-size: 16px;
  color: #000;
  cursor: pointer
}
.feedback .form .plice {
  margin-top: 23px;
  text-align: center;
  font-size: 11px;
  line-height: 130%;
  opacity: .3
}
.feedback .thank {
  display: none;
  text-align: center;
  text-transform: uppercase;
  font-size: 20px;
  margin-top: 40px
}
.feedback .thank.show {
  display: block
}
.footer .box {
  width: 1380px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end
}
.footer .left {
  display: flex;
  gap: 93px;
  align-items: flex-end;
  padding-left: 10px
}
.footer .left .menu {
  display: flex;
  align-items: flex-end;
  gap: 60px;
  margin-bottom: 9px
}
.footer .left .menu a {
  position: relative;
  font-family: 'Bebas Neue Cyrillic';
  color: #000;
  text-decoration: none;
  font-size: 24px
}
.footer .left .menu a.link::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  right: 0;
  height: 4px;
  background: #fbe82a
}
.footer .right {
  display: flex;
  gap: 34px;
  align-items: center;
  margin-bottom: 4px
}
.footer .right .btn {
  width: 264px;
  height: 38px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fbe82a;
  border-radius: 9px;
  font-size: 17px;
  line-height: 21px;
  font-weight: 300;
  cursor: pointer
}
.privacy {
  padding: 44px 0;
  text-align: center;
  font-size: 17px;
  color: #000
}
.privacy a {
  text-decoration: none;
  color: #000
}
.overlay {
  background: rgba(0,0,0,.5);
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 5
}
.overlay.active {
  display: block
}
.modal {
  display: none;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 5;
  overflow-y: scroll
}
.modal.open {
  display: block
}
.modal .modal_close {
  height: 23px;
  width: 23px;
  background-image: url(../images/close.svg);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 23px 23px;
  position: absolute;
  top: 30px;
  right: 30px;
  cursor: pointer
}
.modal .wrap {
  width: 80%;
  max-width: 1100px;
  margin: 50px auto;
  background: #fff;
  padding: 80px 30px;
  border: 20px solid #ff2462;
  position: relative;
  z-index: 30
}
.modal .title {
  text-align: center;
  text-transform: uppercase;
  font-size: 54px;
  font-family: 'Bebas Neue Cyrillic'
}
.modal .info {
  margin-top: 40px;
  text-align: center;
  font-weight: 500;
  font-size: 20px
}
.modal .form {
  width: 50%;
  margin: 0 auto 0
}
.modal .thank {
  display: none;
  text-align: center;
  text-transform: uppercase;
  font-size: 20px;
  margin-top: 40px
}
.modal .thank.show {
  display: block
}
.modal .inp {
  background: 0 0;
  margin-top: 40px;
  border: none;
  outline: 0;
  border-bottom: 2px solid #a8a8a8;
  font-size: 20px;
  padding: 10px 14px;
  width: 100%
}
.modal .inp.error {
  border-bottom: 2px solid red
}
.modal .checkbox {
  display: none
}
.modal .checkbox + label {
  display: inline-block;
  margin-top: 40px;
  position: relative;
  padding: 0 0 0 30px;
  font-size: 13px;
  line-height: 19px;
  font-family: Montserrat,sans-serif
}
.modal .checkbox + label a {
  color: #007bff;
  text-decoration: none;
  background-color: transparent
}
.modal .checkbox + label:after {
  content: '';
  position: absolute;
  top: -2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background-color: #fff;
  border: 2px solid #ff2462;
  cursor: pointer
}
.modal .checkbox:checked + label:after {
  content: '\2713';
  color: #ff2462;
  font-weight: 700;
  text-align: center;
  font-size: 16px;
  line-height: 20px
}
.modal .btn {
  width: 220px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 0;
  margin-top: 30px;
  background: #ff2462;
  font-size: 17px;
  color: #fff
}
.modal .btn.disabled {
  opacity: .5;
  pointer-events: none;
  background: #999
}
@media screen and (max-width:1380px) {
  .box {
    width: 960px
  }
  header .box {
    width: 960px
  }
  .offer .box {
    width: 960px
  }
  .offer .tabs {
    margin-top: 100px;
    flex-direction: column;
    gap: 40px
  }
  .offer .tabs .hosh.left {
    padding-left: 0
  }
  .about_app .tabs .tab {
    width: 30%;
    padding-left: 10px;
    padding-right: 10px
  }
  .about_app .tabs .tab.yellow {
    width: 32%
  }
  .about_app .tabs .tab .btn {
    width: 90%;
    height: 62px;
    font-size: 16px
  }
  .suitable {
    height: 774px;
    padding-top: 120px
  }
  .suitable .title {
    font-size: 60px
  }
  .suitable .tabs {
    gap: 24px
  }
  .suitable .phone1 {
    background-size: cover;
    width: 396px;
    height: 528px;
    top: -330px
  }
  .suitable .phone2 {
    background-size: cover;
    width: 315px;
    height: 557px;
    bottom: -360px
  }
  .partners {
    padding: 66px 0 330px;
    background: url(../images/partners.png) top 160px center no-repeat
  }
  .tarif {
    padding-bottom: 280px
  }
  .reviews {
    padding-top: 60px
  }
  .reviews .box {
    width: 960px
  }
  .reviews .tab {
    width: 32%;
    padding: 20px
  }
  .reviews .tab .inner {
    padding: 30px 20px
  }
  .reviews .tab .text {
    font-size: 18px
  }
  .reviews .tab .stars img {
    width: 100%
  }
  .feedback .left {
    padding: 0;
    width: 500px
  }
  .feedback .left .title {
    font-size: 30px
  }
  .feedback .right {
    width: 435px;
    margin-right: 0
  }
  .footer .box {
    width: 960px
  }
}
@media screen and (max-width:960px) {
  .box {
    width: 680px
  }
  header {
    padding-top: 25px
  }
  header .box {
    width: 680px;
    align-items: center
  }
  header .left .menu {
    display: none
  }
  header .right .btn,
  header .right .enter {
    display: none
  }
  header .right .burger {
    display: block
  }
  .offer {
    height: 740px
  }
  .offer .box {
    width: 680px
  }
  .offer .ttl {
    font-size: 32px
  }
  .offer .desc {
    font-size: 17px
  }
  .offer .tabs {
    margin-top: 70px
  }
  .offer .tabs .hosh {
    font-size: 17px
  }
  .offer .girl {
    background-size: cover;
    width: 370px;
    height: 410px
  }
  .about_app {
    padding-top: 100px
  }
  .about_app .title {
    font-size: 44px
  }
  .about_app .tabs .tab {
    padding-top: 30px
  }
  .about_app .tabs .tab.yellow .ttl {
    font-size: 16px;
    font-weight: 700
  }
  .about_app .tabs .tab .ttl {
    font-size: 16px;
    font-weight: 700
  }
  .about_app .tabs .tab .sttl {
    font-size: 14px
  }
  .suitable {
    height: auto;
    padding-top: 40px
  }
  .suitable .phone1,
  .suitable .phone2 {
    display: none
  }
  .suitable .title {
    font-size: 44px
  }
  .suitable .tabs .tab .ttl {
    font-size: 20px
  }
  .suitable .tabs .tab .desc br {
    display: none
  }
  .suitable .btn_wrap {
    margin-top: 60px
  }
  .suitable .btn {
    width: 300px;
    height: 50px;
    font-size: 20px
  }
  .advantages {
    margin-top: 60px;
    padding-top: 60px;
    padding-bottom: 60px;
    background: #525252
  }
  .advantages .title {
    padding-top: 0;
    font-size: 44px
  }
  .partners {
    background: 0 0;
    padding: 60px 0
  }
  .partners .title {
    font-size: 44px
  }
  .partners img {
    display: block;
    width: 100%;
    max-width: 340px
  }
  .tarif {
    margin-top: 60px;
    padding-top: 60px;
    padding-bottom: 60px;
    background: #525252
  }
  .tarif .title {
    padding-top: 0;
    font-size: 44px
  }
  .tarif .item {
    width: 100%
  }
  .tarif .item .bg {
    width: 60%;
    background-size: cover
  }
  .tarif .item .text {
    width: 40%;
    padding: 20px
  }
  .tarif .item .text .ttl {
    font-size: 28px
  }
  .tarif .item .text .desc {
    font-size: 15px
  }
  .tarif .item .text .desc br {
    display: none
  }
  .tarif .item .text .price {
    font-size: 17px
  }
  .tarif .item .text .btn {
    width: 100%;
    font-size: 16px
  }
  .reviews .box {
    width: 680px
  }
  .reviews .title {
    font-size: 44px
  }
  .reviews .tabs {
    flex-direction: column;
    gap: 40px
  }
  .reviews .tabs .tab {
    width: 90%;
    height: auto
  }
  .reviews .tabs .tab .stars img {
    width: auto
  }
  .feedback {
    height: auto;
    margin-top: 60px;
    padding-top: 60px;
    padding-bottom: 60px;
    background: #525252
  }
  .feedback .box {
    flex-direction: column;
    gap: 30px
  }
  .feedback .left {
    width: 100%
  }
  .feedback .right {
    width: 100%;
    height: auto
  }
  .footer {
    padding: 60px 0 0
  }
  .footer .box {
    width: 680px;
    flex-direction: column;
    gap: 40px
  }
  .footer .left {
    width: 100%;
    justify-content: center
  }
  .footer .right {
    width: 100%;
    justify-content: center
  }
  .modal .title {
    font-size: 34px
  }
  .modal .info {
    font-size: 18px
  }
  .modal .form {
    width: 70%
  }
}
@media screen and (max-width:680px) {
  .box {
    width: 360px;
    padding-left: 10px;
    padding-right: 10px
  }
  header .box {
    width: 360px
  }
  .offer {
    height: auto
  }
  .offer .box {
    width: 360px
  }
  .offer .ttl {
    font-size: 26px
  }
  .offer .desc {
    font-size: 16px
  }
  .offer .desc br {
    display: none
  }
  .offer .tabs {
    margin-top: 20px
  }
  .offer .tabs .hosh {
    width: 100%
  }
  .offer .tabs .hosh.right {
    width: 100%
  }
  .offer .girl {
    position: relative;
    width: 200px;
    height: 220px;
    left: 70px;
    bottom: auto
  }
  .about_app {
    margin-top: 60px;
    padding-top: 40px;
    padding-bottom: 40px;
    background: #525252;
    height: auto
  }
  .about_app .title {
    font-size: 30px;
    text-align: center
  }
  .about_app .desc br {
    display: none
  }
  .about_app .tabs {
    flex-direction: column;
    gap: 24px
  }
  .about_app .tabs .tab {
    width: 100%;
    height: auto;
    padding-bottom: 30px;
    padding-left: 15px;
    padding-right: 15px
  }
  .about_app .tabs .tab.yellow {
    width: 100%
  }
  .about_app .tabs .tab.yellow .ttl {
    font-size: 18px
  }
  .about_app .tabs .tab .ttl {
    font-size: 18px
  }
  .about_app .tabs .tab .sttl {
    font-size: 16px
  }
  .suitable .title {
    font-size: 30px
  }
  .suitable .tabs {
    flex-direction: column;
    align-items: center
  }
  .suitable .tabs .tab {
    width: 100%;
    height: auto
  }
  .advantages .title {
    font-size: 30px
  }
  .advantages .tabs {
    flex-direction: column
  }
  .advantages .tabs .tab {
    width: 100%;
    height: auto;
    padding-bottom: 30px
  }
  .partners {
    padding: 40px 0
  }
  .partners .title {
    font-size: 30px
  }
  .tarif {
    margin-top: 0
  }
  .tarif .title {
    font-size: 30px
  }
  .tarif .item {
    height: auto;
    flex-direction: column
  }
  .tarif .item.i1 .bg {
    background-image: url(../images/tarif-1.png);
    background-repeat: no-repeat;
    background-position: top 11px right 32px;
    background-size: cover
  }
  .tarif .item.i2 .bg {
    background-image: url(../images/tarif-2.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 80%
  }
  .tarif .item.i2 {
    flex-direction: column-reverse
  }
  .tarif .item .bg {
    width: 100%;
    height: 220px
  }
  .tarif .item .text {
    width: 100%!important;
    height: auto
  }
  .reviews .box {
    width: 360px
  }
  .reviews .title {
    font-size: 30px
  }
  .reviews .tabs {
    gap: 26px
  }
  .reviews .tabs .tab {
    width: 100%;
    padding: 12px
  }
  .reviews .tabs .tab .name {
    font-size: 26px
  }
  .reviews .tabs .tab .text {
    margin-top: 16px;
    font-size: 16px
  }
  .reviews .tabs .tab .stars {
    margin-top: 24px
  }
  .reviews .tabs .tab .stars img {
    max-width: 160px
  }
  .feedback .right {
    padding: 20px;
    border-radius: 24px
  }
  .footer .box {
    width: 360px
  }
  .footer .left {
    padding-left: 0;
    flex-direction: column;
    gap: 24px;
    align-items: center;
    justify-content: center
  }
  .footer .left .menu {
    justify-content: space-between
  }
  .modal .wrap {
    padding: 20px;
    border: 10px solid #ff2462;
    width: 100%;
    margin: 0
  }
  .modal .info {
    font-size: 16px;
    margin-top: 12px
  }
  .modal .form {
    width: 100%
  }
  .modal .modal_close {
    top: 10px;
    right: 10px
  }
  .modal .inp {
    margin-top: 15px;
    font-size: 16px
  }
  .modal .inp::placeholder {
    font-size: 16px
  }
}