/*!***************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[3]!./style/templates/boxes.scss ***!
  \***************************************************************************************************************************************************************************************************************************************************/
#main {
  overflow: visible;
}

.top-section {
  background-color: var(--block-bg);
  min-height: 590px;
  position: relative;
  display: flex;
  align-items: center;
  text-align: center;
}
.top-section figure {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.top-section figure img {
  -o-object-position: 50% bottom;
     object-position: 50% bottom;
}
.top-section .container {
  width: 700px;
}
.top-section h2 {
  font-size: 15px;
  font-weight: 500;
}
@media screen and (min-width: 1081px) {
  .top-section h1 {
    font-size: 36px;
  }
}

.how_it_works {
  background-color: #F7F7F7;
  padding: 40px 0;
  position: relative;
}
.how_it_works:before, .how_it_works:after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 42px;
  background-color: #F7F7F7;
  -webkit-mask: url("../images/wave.svg") no-repeat center top;
  -webkit-mask-size: cover;
  -webkit-mask: url("../images/wave.svg") no-repeat center top;
          mask: url("../images/wave.svg") no-repeat center top;
  mask-size: cover;
}
.how_it_works:before {
  top: -42px;
}
.how_it_works:after {
  bottom: -42px;
  transform: rotate(-180deg) scale(-1, 1);
}
.how_it_works h2, .how_it_works p {
  font-family: "Avenir", Sans-serif;
}
.how_it_works h2 {
  font-size: 25px;
  font-weight: 900;
  line-height: 1;
}
.how_it_works .steps-box {
  gap: 30px;
}
.how_it_works .steps-box .item {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: contain;
  min-height: 125px;
  flex: 1;
}
.how_it_works .steps-box p {
  padding-bottom: 0;
  font-weight: 700;
  font-size: 12px;
  line-height: 1.5;
}
.how_it_works .text-box {
  margin-bottom: 20px;
}
@media screen and (min-width: 768px) {
  .how_it_works .steps-box p {
    font-size: 17px;
  }
}
@media screen and (min-width: 1081px) {
  .how_it_works {
    padding: 80px 0;
  }
  .how_it_works .container {
    width: 1900px;
    gap: 20px;
    align-items: center;
  }
  .how_it_works h2 {
    font-size: 30px;
  }
  .how_it_works .text-box {
    width: 40%;
    margin-bottom: 0;
  }
  .how_it_works .steps-box {
    width: 57%;
    gap: 110px;
  }
  .how_it_works .steps-box .item {
    position: relative;
  }
  .how_it_works .steps-box .item:not(:last-child):after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    right: -90px;
    width: 71px;
    height: 18px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="71" height="18" viewBox="0 0 71 18" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M69.2841 8.11251C66.897 8.11251 64.4421 8.52516 62.0236 8.59306C59.2918 8.67141 56.5443 8.88557 53.8125 8.97437C47.9832 9.16241 42.1435 9.51238 36.3037 9.86234C24.5407 10.5675 12.7202 11.163 1.26008 9.79444C0.147496 9.65863 0.805642 11.001 1.5108 11.0898C2.26296 11.1786 3.02035 11.2622 3.77774 11.3353C3.93967 11.6017 4.18517 11.8629 4.30008 11.9204C5.38132 12.4845 6.44167 12.7613 7.77363 12.3643C7.78407 12.3643 7.7893 12.3539 7.79974 12.3539C12.0516 12.9337 16.2042 13.9209 20.4717 14.4171C25.4704 15.0021 30.3229 14.5947 35.4105 13.7485C46.9019 11.8316 58.6232 11.8002 70.0729 9.4288C70.9295 9.25121 69.7908 8.11773 69.2841 8.11773V8.11251ZM18.4554 12.8867C16.4706 12.5994 14.4961 12.2338 12.5165 11.8786C20.2784 12.1032 28.1396 11.7271 36.0008 11.2622C41.5166 10.9331 47.0273 10.5832 52.5328 10.3847C46.8184 10.9227 41.0936 11.3876 35.4314 12.3017C29.5603 13.2471 24.1698 13.7172 18.4554 12.8919V12.8867Z" fill="%2300203D"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M69.8639 11.048C69.5453 9.02138 67.8007 7.9976 65.8262 6.75966C63.2407 5.14041 61.308 3.16597 59.5948 1.01394C58.4508 -0.422487 57.2181 2.23099 57.9442 3.14508C59.1403 4.64419 60.42 6.09629 61.9818 7.40213C63.0474 8.29011 65.4502 9.38702 66.756 10.5832C64.0816 11.3771 61.3655 12.0771 58.6493 12.7874C57.2442 13.1583 48.4428 17.8228 50.1509 17.3736C53.4364 16.5065 65.8262 13.8896 69.0438 12.8762C69.8953 12.6098 69.9423 11.5547 69.8639 11.048Z" fill="%23000"></path></svg>');
    background-repeat: no-repeat;
  }
}

#boxes-section {
  text-align: center;
  position: relative;
}
#boxes-section h2 {
  font-size: 30px;
}

.boxes-tabs {
  margin-top: 10px;
  margin-bottom: 100px;
  z-index: 10;
  position: sticky;
  top: 80px;
}
.boxes-tabs > div {
  display: flex;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
  border-radius: 100px;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.08);
  background: #fff;
  padding: 8px;
}
.boxes-tabs .tab {
  display: inline-block;
  font-weight: 600;
  padding: 12px 16px;
  margin: 0 4px;
  border-radius: 40px;
  cursor: pointer;
  transition: all 0.4s ease;
}
.boxes-tabs .tab:hover {
  background: #F2F2F2;
}
.boxes-tabs .tab.active {
  background: #FAB71A;
}
@media screen and (min-width: 1081px) {
  .boxes-tabs > div {
    display: inline-block;
  }
}

.boxes {
  text-align: left;
}

.box {
  background-color: var(--box-bg);
  padding: 50px 0 100px;
  position: relative;
  margin-bottom: 55px;
}
.box .container {
  align-items: center;
  width: 1700px;
}
.box:before {
  content: "";
  position: absolute;
  top: -41px;
  left: 0;
  width: 100%;
  height: 42px;
  background: var(--box-bg);
  -webkit-mask: url("../images/wave.svg") no-repeat center top;
  mask: url("../images/wave.svg") no-repeat center top;
  -webkit-mask-size: cover;
  mask-size: cover;
}
.box:last-child:after {
  content: "";
  position: absolute;
  bottom: -103px;
  left: 0;
  width: 100%;
  height: 104px;
  background: var(--box-bg);
  -webkit-mask: url("../images/wave2.svg") no-repeat center bottom;
  mask: url("../images/wave2.svg") no-repeat center bottom;
  -webkit-mask-size: cover;
  mask-size: cover;
}
.box:nth-child(2n) .container {
  flex-direction: row-reverse;
}
.box figure {
  width: 48%;
}
.box figure img {
  margin: 0 auto;
  width: 414px;
}
.box .info {
  width: 48%;
}
.box .attr {
  display: inline-block;
  padding: 8px 20px;
  margin-bottom: 20px;
  background: #fff;
  font-weight: 600;
}
.box h3 {
  font-size: 22px;
}
.box .price {
  font-weight: 600;
  display: block;
  margin-bottom: 24px;
}
@media screen and (min-width: 1081px) {
  .box h3 {
    font-size: 27px;
  }
}

/*# sourceMappingURL=boxes_style.css.map*/