@import "https://fonts.googleapis.com/css2?family=Mulish:wght@400;500;600;700;800&display=swap";
@import "https://fonts.googleapis.com/css2?family=Mulish:wght@400;500;600;700;800&display=swap";
/****** RESET ******/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
}

html {
  height: 100%;
}

body {
  overflow-x: hidden !important;
}

ul {
  list-style: none;
}

a {
  cursor: pointer;
  text-decoration: none;
  -webkit-appearance: none;
  outline: none !important;
}

button {
  cursor: pointer;
  text-decoration: none;
  -webkit-appearance: none;
  outline: none !important;
}

input[type=submit] {
  cursor: pointer;
  text-decoration: none;
  -webkit-appearance: none;
  outline: none !important;
}

main {
  letter-spacing: -1px;
  padding-bottom: 30px;
}
main header {
  max-width: 714px;
  width: calc(100% - 40px);
  margin: auto;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}
main header h1 {
  font-size: 0;
}
main header h1 img {
  width: 100%;
  max-width: 170px;
}
main .banner {
  position: relative;
  max-width: 1180px;
  height: auto;
  width: calc(100% - 40px);
  margin: 20px auto 20px;
}
main .banner::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  border-radius: 8px;
}
main .banner img {
  float: left;
  width: 100%;
  height: auto;
}
main .banner .gas {
  position: relative;
  z-index: 1;
}
main .banner .gas img {
  width: 100%;
  height: auto;
}
main .banner .gas .banner-desktop {
  display: block;
}
main .banner .gas .banner-mobile {
  display: none;
}
main .banner .gas .slick-dots {
  bottom: -35px;
}
main .banner .gas .slick-dots li {
  width: 9.5px;
  height: 10px;
  border-radius: 50%;
  background: #C4C4C4;
}
main .banner .gas .slick-dots li button {
  display: none;
}
main .banner .gas .slick-dots li.slick-active {
  background: #00A3E0;
}
.slick-prev:before, .slick-next:before {
  font-size: 30px !important;
  color: #D82835 !important;
}
.slick-prev {
    left: 20px !important;
    z-index: 2 !important;
}
.slick-next {
    right: 30px !important;
    z-index: 2 !important;
}
main .info {
  margin-bottom: 50px;
}
main .info .text {
  max-width: 1180px;
  min-height: 140px;
  width: calc(100% - 40px);
  margin: 0 auto 40px;
  box-shadow: 0 4px 4px rgba(137, 137, 137, 0.25);
  border-radius: 8px;
  background: url(../img/graph-bg.svg) no-repeat 70px 40px;
  background-size: 77px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 20px;
}
main .info .text h2 {
  font: 700 36px/1 "Mulish", sans-serif;
  color: #051C24;
  text-align: center;
  margin: 0 auto 12px;
}
main .info .text p {
  font: 500 18px/1 "Mulish", sans-serif;
  color: #051C24;
  text-align: center;
  margin: 0 auto;
}
main .info .images {
  max-width: 1202px;
  width: calc(100% - 40px);
  margin: auto;
}
main .info .images .slick-dots {
  bottom: -35px;
}
main .info .images .slick-dots li {
  width: 9.5px;
  height: 10px;
  border-radius: 50%;
  background: #C4C4C4;
}
main .info .images .slick-dots li button {
  display: none;
}
main .info .images .slick-dots li.slick-active {
  background: #00A3E0;
}
main .info .images .box {
  height: 247px;
  width: 100%;
  border-radius: 8px;
  padding: 30px 15px;
  text-align: center;
  margin: 0 10px;
}
main .info .images .box img {
  margin: 0 auto 17px;
  height: 59px;
}
main .info .images .box h3 {
  font: 700 22px "Mulish", sans-serif;
  color: white;
  letter-spacing: normal;
  margin-bottom: 27px;
}
main .info .images .box h3 a {
  color: white;
  text-decoration: underline;
}
main .info .images .box h3 a:hover {
  text-decoration: none;
}
main .info .images .box .btn {
  font: 700 15px "Mulish", sans-serif;
  width: 100%;
  height: 40px;
  background: white;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: normal;
}
main .info .images .box.app {
  background: linear-gradient(333.38deg, #E71D31 22.4%, rgba(231, 29, 49, 0) 231.36%);
}
main .info .images .box.app .btn {
  color: #E72D3F;
}
main .info .images .box.web {
  background: linear-gradient(27.75deg, #0090D4 2.03%, rgba(0, 144, 212, 0.17) 147.29%);
}
main .info .images .box.web .btn {
  color: #179AD8;
}
main .info .images .box.tel {
  background: linear-gradient(352.38deg, #0039A6 17.3%, rgba(196, 196, 196, 0) 401.09%);
}
main .info .images .box.tel .btn {
  color: #0139A6;
}
main .info .images .box.pedidosya {
  background: linear-gradient(352.38deg, #FF0051 17.3%, rgba(196, 196, 196, 0) 401.09%);
}
main .info .images .box.pedidosya .btn {
  color: #FF0151;
}
main .info .images .box.wsp {
  background: linear-gradient(180deg, #25D366 0%, #14B450 100%);
}
main .info .images .box.wsp .btn {
  color: #14B450;
}
main .sizes {
  max-width: 1180px;
  width: calc(100% - 40px);
  margin: 0 auto 50px;
  padding: 76px 15px 40px;
  border-radius: 8px;
  box-shadow: 0 4px 4px rgba(137, 137, 137, 0.25);
}
main .sizes h2 {
  font: 700 55px/1 "Mulish", sans-serif;
  color: #051C24;
  text-align: center;
  margin: 0 auto 40px;
}
main .sizes p {
  font: 700 21px "Mulish", sans-serif;
  color: #051C24;
  max-width: 1040px;
  margin: 0 auto 60px;
}
@media (max-width: 650px) {
  main .sizes p {
    margin-bottom: 30px;
    text-align: center;
  }
}
main .sizes p a:hover span {
  text-decoration: none !important;
}
main .sizes p a span.red {
  color: #E71D31;
  text-decoration: underline;
}
main .sizes p a span.blue {
  color: #00A3E0;
  text-decoration: underline;
}
main .sizes .image {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 15px;
}
@media (max-width: 650px) {
  main .sizes .image {
    flex-direction: column;
  }
}
@media (max-width: 650px) {
  main .sizes .image img {
    width: 100% !important;
  }
}
main .sizes .image img:first-child {
  width: 40%;
  margin-right: 43px;
  max-width: 432px;
}
@media (max-width: 650px) {
  main .sizes .image img:first-child {
    max-width: 268px;
    margin: 0 auto 50px;
  }
}
main .sizes .image img:last-child {
  width: 60%;
  max-width: 585px;
}
@media (max-width: 650px) {
  main .sizes .image img:last-child {
    max-width: 300px;
    margin: auto;
  }
}
main .payment article {
  width: calc(100% - 40px);
  max-width: 714px;
  min-height: 251px;
  border-radius: 8px;
  margin: 0 auto 50px;
  padding: 0 20px;
  background: linear-gradient(52deg, #0090D4 50%, rgba(0, 144, 212, 0.65) 101.29%);
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
main .payment article h2 {
  font: 700 55px/1 "Mulish", sans-serif;
  color: white;
  text-align: center;
  max-width: 668px;
  margin: 0 auto 15px;
}
main .payment article p {
  font: 500 24px/1 "Mulish", sans-serif;
  color: white;
  text-align: center;
  max-width: 563px;
  margin: 0 auto;
}
main .payment .methods {
  box-shadow: 0 4px 4px rgba(137, 137, 137, 0.25);
  border-radius: 8px;
  width: calc(100% - 40px);
  max-width: 714px;
  border-radius: 8px;
  margin: 0 auto 50px;
  padding: 30px 20px;
}
main .payment .methods h2 {
  font: 700 25px "Mulish", sans-serif;
  color: black;
  text-align: center;
  margin-bottom: 40px;
}
main .payment .methods .payments .row {
  display: flex;
  align-items: flex-end;
  justify-content: space-evenly;
  margin: 0 auto 50px;
  max-width: 500px;
}
main .payment .methods .payments .row .image {
  text-align: center;
}
main .payment .methods .payments .row .image span {
  font: 12px "Mulish", sans-serif;
  color: black;
  display: block;
  letter-spacing: normal;
  margin-top: 10px;
}
main .payment .methods .row a {
  background: #00A3E0;
  border-radius: 31px;
  font-family: "Mulish";
  font-style: normal;
  font-weight: 700;
  font-size: 18px;
  text-align: center;
  color: #FFFFFF;
  padding: 12px 25px;
}
main .payment .methods:nth-of-type(2) .payments .row {
  align-items: center;
  max-width: 600px;
}
main .payment .methods:nth-of-type(2) .payments .row:last-child {
  margin-bottom: 0;
}
@media (max-width: 650px) {
  main .payment .methods:nth-of-type(2) .payments .row:first-child .image img:first-child {
    display: none;
  }
}
main .payment .methods:nth-of-type(2) .payments .row:first-child .image img:last-child {
  display: none;
}
@media (max-width: 650px) {
  main .payment .methods:nth-of-type(2) .payments .row:first-child .image img:last-child {
    display: block;
  }
}
main .schedule {
  width: calc(100% - 40px);
  max-width: 714px;
  border-radius: 8px;
  margin: 0 auto 50px;
  padding: 30px 20px;
  background: url(../img/schedule-bg.svg) no-repeat 103% 105%, linear-gradient(333deg, #E71D31 22.4%, rgba(231, 29, 49, 0) 231%);
}
main .schedule h2 {
  font: 900 46px "Mulish", sans-serif;
  color: white;
  text-align: center;
  margin-bottom: 20px;
}
main .schedule p {
  font: 500 26px "Mulish", sans-serif;
  color: white;
  text-align: center;
  max-width: 314px;
  margin: auto;
}
main .schedule p strong {
  font-weight: 700;
}
main footer {
  position: relative;
  width: calc(100% - 40px);
  min-height: 225px;
  border-radius: 8px;
  margin: 0 auto;
  padding: 20px;
  background: linear-gradient(324.33deg, #0090D4 33.67%, rgba(0, 144, 212, 0.17) 178.53%);
  display: flex;
  align-items: center;
  justify-content: center;
}
main footer h4 {
  font-size: 0;
}
@media (max-width: 650px) {
  main footer h4 {
    max-width: 205px;
  }
}
main footer h4 img {
  width: 100%;
}
main footer h5 {
  font: 700 18px "Mulish", sans-serif;
  color: white;
  text-align: center;
  position: absolute;
  bottom: 20px;
}

@media (max-width: 650px) {
  main .banner {
    width: 100%;
    height: auto;
    margin: 0 auto 20px;
  }
  main .banner .gas {
    margin: auto;
    text-align: center;
  }
  main .banner .gas .box-banner {
    position: relative;
    padding: 0;
  }
  main .banner .gas .banner-desktop {
    display: none;
  }
  main .banner .gas .banner-mobile {
    display: block;
  }
  main .info .text {
    background-position: center;
    padding: 0 20px;
  }
  main .info .text h2 {
    font-size: 18px;
  }
  main .info .text p {
    font-size: 18px;
  }
  main .sizes h2 {
    font-size: 28px;
    margin-bottom: 20px;
  }
  main .sizes p {
    font-size: 18px;
  }
  main .sizes img.desk {
    display: none;
  }
  main .sizes img.mob {
    display: block;
  }
  main .payment article h2 {
    font-size: 28px;
  }
  main .payment article p {
    font-size: 18px;
  }
  main .payment .methods .payments .row {
    flex-direction: column;
    align-items: center;
    margin-bottom: 0;
  }
  main .payment .methods .payments .row .image {
    margin-bottom: 40px;
  }
  main .schedule {
    background-position: center;
  }
  main .schedule h2 {
    font-size: 28px;
    margin-bottom: 30px;
  }
  main .schedule p {
    font-size: 18px;
  }
  main footer h5 {
    font-size: 14px;
  }
}
@media (max-width: 785px) {
  main .info .images {
    max-width: unset;
    width: 100%;
  }
}
@media (max-width: 570px) {
  main .info .images .box h3 {
    margin-bottom: 7px;
  }
}