@media (max-width: 768px) {

  /* ===== ОБЩЕЕ ===== */
  h1 {
    font-size: 22px;
  }

  .wrap{
  	width: 100%;
  	padding: 0 20px;
  }

  .promotion{
    margin: 30px auto;
  }

  .products > .wrap > .flex > .item > .flex-column > .bottom > .flex-space > h2{
    font-size: 18px;
  }

  .products > .wrap > .flex > .item > .flex-column > .bottom > .approvals > h2{
    font-size: 12px;
  }

  .hero-content > .flex-center > .left > .main-title h1{
  	font-size: 18px;
  }

  .hero-content > .flex-center > .left > p{
  	font-size: 14px;
  }

 .hero-content > .flex-center > .right{
 	display: none;
 }

 .hero > .wrap > .flex-center > .nav-bg{
 	display: none;
 }

 .benefits > .wrap > .flex{
 	flex-direction: column;
 }

 .promotion{
 	padding: 50px 0 0 0;
 }

 .promotion > .wrap > .flex-center {
 	flex-direction: column;
 }

 .products > .wrap > .flex{
 	flex-direction: column;
 }

 .advantages > .wrap > .item-box{
 	display: flex;
 	flex-direction: column;
 }

 .steps,
 section.cta > .wrap > .flex,
 .footer > .wrap > .flex-center{
 	flex-direction: column;
 }

.steps > .progress-line,
.steps::before{
 	display: none;
 }

 .hero::after,
 .hero-content > .flex-center > .left > .button-box > .border{
 	display: none;
 }

 .hero-content > .flex-center > .left{
 	flex: 1;
 	padding: 40px 0;
 }

 .hero-content > .flex-center > .left > .main-title h1, .hero-content .left .advantages{
 	flex-direction: column;
 }

 .hero-content > .flex-center > .left > .advantages > .item{
 	margin-bottom: 10px;
 	justify-content: flex-start;
 }

 .promotion > .wrap > .flex-center > .right img{
 	width: 100%;
 }

 .hero-content > .flex-center > .left > .main-title h1, .hero-content .left .button-box{
 	flex-direction: column;
 }

 section.cta > .wrap > .contacts .contact-card > .card-grid{
 	grid-template-columns: unset;
 }

 .btn{
 	padding: 20px;
 }

 .form-grid{
 	display: flex !important;
 	flex-direction: column !important;
 }

 section.cta > .wrap > .flex > .right > form > .btn{
 	font-size: 12px;
 }

 .footer > .wrap > .flex-center > .promo > .flex-inline{
 	flex-direction: column;
 	gap: 10px;
 }

 section.advantages{
 	padding: 30px 0;
  margin: 50px auto;
 }

 .benefits .title, .products .title{
 	font-size: 22px
 }

 .products > .wrap > .flex > .item > .flex-column > .bottom > .flex-space > i,
 .products > .wrap > .flex > .item > .flex-column > .bottom > .flex-space > h2{
 	flex:2;
 }

 .products > .wrap > .flex > .item > .flex-column > .bottom > .cert-btn{
 	font-size: 14px;
 }

 .advantages > .wrap > .item-box > .item-3 > a,
 .advantages > .wrap > .item-box > .item-5 > a{
  font-size: 12px;
 }

 .advantages > .wrap > .item-box > .item-logos,
 .steps > .step:last-child{
  display: none;
 }

 section.cta{
  padding: 50px 0;
 }

 section.cta > .wrap > .flex > .left > .phones > h3 > a{
  font-size: 18px;
 }

 section.cta > .wrap > .contacts .contact-card{
  padding: 20px;
 }

 .hero-content > .flex-center > .left > .button-box > .btn-yellow{
  padding: 20px 50px;
 }

 .products > .wrap > .flex > .item > .flex-column > .bottom > .cert-btn{
  padding: 10px 5px;
 }
 .go-catalog{
  padding: 10px;
 }

 section.cta > .wrap > .contacts{
  margin-top: 50px;
 }

 .footer > .wrap > .flex-center > .promo > .flex-inline{
  align-items: flex-start;
 } 

}