@import url("font/inter/stylesheet.css");


input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder
{opacity: 1; transition: opacity 0.3s ease;   font-family:'Inter', 'sans-serif', 'arial';  }

input:focus::-webkit-input-placeholder,
textarea:focus::-webkit-input-placeholder
{opacity: 0; transition: opacity 0.3s ease;}

input:focus, *input:active  { background-color: inherit }

HTML{}

BODY{line-height:1.3;font-size:18px;font-family: 'Inter', sans-serif;background: #EEF1F5;color: #363B4A;}

.__wrapper{ padding-top: 81px; }
.__container{ max-width: 460px; margin:0  auto; }
.__header{}

.logo{ display: block; height: 30px; width: 80px; background-image: url(/images/sto-logo.png); background-size: contain; background-position: center; background-repeat: no-repeat;}

header{ position: fixed; top: 0; left: 0; width: 100%; z-index: 100;   }

.header{ border-bottom: 1px solid #DCDCDC;background: #EEF1F5;}
.header-items{  height: 80px}
.header-item-logo{ z-index: 100}
.header-logo{ }

.header-item-phone{display: none;}
.header-item-phone a{ background-image: url(../img/phone-icon.svg); background-size: 20px; background-repeat: no-repeat; background-position: 0 center; display: block; padding-left: 28px;   font-weight: 800; font-size: 16px; }
.header-item-menu{ display: none}
.header-item-menu nav{ display: none}

.is-scroll header{  }


h1{ font-size:28px; font-weight: 600;  }
h2{font-size: 18px;  }

.title-wrap { margin: 40px 0;}
.page .title-wrap { margin: 20px 0;}
.title-wrap h2{ text-align: center}
a{ color: inherit}
.page{ font-size: 16px; padding-bottom: 30px}
.page p{ margin-bottom:7px; }
.page ol li, .page ul li, .page .ol .li, .page .ul .li { margin-bottom:7px; }


.menu-button{ display:block; width: 30px; height:20px; z-index: 7100;   right: 0; }
.menu-button .menu-icon{ display:block; width:100%;position:absolute; height:3px;  top:0; bottom:0; left:0; right:0; margin:auto; background: #000;
    border-radius: 5px;}
.menu-button .menu-icon:before,
.menu-button .menu-icon:after{ display:block; content:""; position:absolute; height:3px; width:100%; left:0; background: #000;
    margin:auto;   border-radius:5px; transition: all 0.2s ease-out;}
.menu-button .menu-icon:before{ top:8px;}
.menu-button .menu-icon:after{ bottom:8px;}
.menu-button.is_open { -webkit-transform: rotate(-180deg)}
.menu-button.is_open .menu-icon{ height:30px; border-radius: 50% }
.menu-button.is_open .menu-icon:before{  transform: rotate(-45deg); background: #fff;   width: 55%; top: 0;bottom: 0;left: 0;right: 0;  }
.menu-button.is_open .menu-icon:after{ transform: rotate(45deg);  background: #fff;   width: 55%; top: 0;bottom: 0;left: 0;right: 0;}

header .over-container{ height: auto; bottom: auto; padding-bottom: 5px}
header .over-container .over-content{  transform: translateY(-100%);  transition: all 0.2s ease-out;     box-shadow: 0px 4px 6px -2px rgba(0 0 0 / 16%);}
header .over-container.is-show .over-content{  transform: translateY(0);}
header .over-container .over-content:before{display: none}
header .over-content nav{ padding: 60px 24px 15px 24px}

.submenu{ max-height: 0;  width: 100%; position: absolute; overflow: hidden; opacity: 0; visibility: hidden;  transition: all 0.3s ease;
display: block;  background: #EEF1F5;  border-bottom:  1px solid #DCDCDC;}
.submenu nav{ height: 52px;  display: flex; align-items: center; justify-content: flex-start;  }
.submenu a{ font-size: 13px; margin-right: 30px}

.over-content nav{ padding: 80px 30px; padding-left: 80px;   flex-direction: column;  justify-content: flex-start; align-items: stretch; font-sizealign-items: flex-start !important; }
.over-content nav a{ display: block;  margin: 5px 0; font-size: 24px; font-weight: 500  }
.over-content .lk-item{ margin-top: 10px; width: 100%}
.over-content .lk-item a{ font-size: 16px;  border: 1px solid #C2CCD9; border-radius: 12px; padding: 11px; text-align: center; display: block; width: 100%; box-sizing: border-box}
nav .current a{ color: #DD710F}


.button{ font-size: 16px;   font-weight: 500;    width: 100%;   padding: 11px; text-align: center; border-radius: 12px;  display: flex; align-items: center; justify-content: center;   text-decoration: none;  cursor: pointer;border: 1px solid #C2CCD9; box-sizing: border-box; }
.button.button-color{ background-color: #FD9333;  color: #fff; border: 1px solid #FD9333 }
.button.button-color2{ background-color: #515c6d;  color: #fff; border: 1px solid #515c6d }
.button.button-w{ background-color: #fff;    border: 1px solid #fff; color: #363B4A; }
.button:hover{ box-shadow: 0px 4px 13px rgba(13, 38, 79, 0.15); }


/*****************/
.buttons {display: flex; gap:15px}

.button.appstore,
.button.googleplay,
.button.rustore{height: auto;line-height: 45px;background: #000;color: #fff;background-repeat: no-repeat;background-position: center 12px;background-size: auto 26px ;padding-top: 45px;display: flex;flex-direction: column;text-align: left;font-size: 10px;line-height: 1em;justify-content: center;width: 33%; max-width: 120px; transition: all 0.3s ease;font-family: sans-serif; box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.2);   text-decoration: none;border-radius: 12px;font-size: 12px;}

.button.appstore span:last-child,
.button.googleplay span:last-child {font-size: 14px;font-weight: bold;padding-top: 4px;padding-bottom: 6px;}

.button.appstore {background-image: url(/images/apple-white.svg);}

.button.googleplay {background-image: url(/images/google-play.svg);}

.button.rustore{background-image: url(/images/rustore.svg);}

    /*****************/
.offer{ padding-bottom: 20px; border-bottom: 1px solid #DCDCDC;}

.offer .offer-content{padding-top:40px; max-width: 420px; margin: auto  }
.offer .offer-content h1{ font-size: 56px; font-weight: 500}
.offer .offer-content p{ font-size: 19px; letter-spacing: -.5px; margin: 0 }
.offer .offer-image-mobile{ width: 100%; max-width: 420px; display: block; margin: 25px auto}
.offer .offer-image-desktop{ display: none}
.offer .offer-buttons { margin-bottom: 30px}
.offer .offer-buttons .button { margin: auto; margin-bottom: 15px }
.offer .offer-buttons .button:last-child{ margin-bottom: 0px}
.offer .offer-content-partner{ display: flex; align-items: center}
.offer .offer-content-partner p{ font-size: 14px !important; margin-right: 15px  }
.offer .offer-content-partner img{  width: 96px;}
.offer .offer-content-slogans{ margin-top: 30px; display: flex; flex-direction: column; gap: 20px}
.offer .offer-slogan{ display: flex; align-items: center;  }
.offer .offer-slogan img{ display: block; width: 48px; margin-right: 15px}
.offer .offer-slogan p{ font-size: 14px;}

/**************/
.about{ padding-top: 20px; padding-bottom: 20px; }
.about h2{ font-size: 32px; font-weight: 500;line-height: 1.1;letter-spacing: -1px;}
.about h3{ font-size: 24px; font-weight: 500; letter-spacing: -.5px;}
.about h4{ font-size: 20px; line-height: 1.1; font-weight: 500}
.about p{ font-size: 14px;}
.about .text-block h4{ margin-top: 30px; margin-bottom: 15px}
.about .text-block.haveline{ border-bottom: 1px solid #DCDCDC; padding-bottom: 5px}
.about-1{border-bottom: 1px solid #DCDCDC;}

/**************/
.about-2 .__container{ max-width: unset}
.about-2-swiper{}
.about-2-swiper .swiper-slide{flex-basis: 260px;padding-left: 24px;height: auto;}
.about-2-item{background: #fff; border-radius: 16px; padding: 16px 24px 20px; display: flex; flex-direction: column; justify-content: space-between; height: 160px; box-sizing: border-box; }
.about-2-item .item-num{ font-size: 32px; color: #FD9333; font-weight: 500;}
.about-2-item .item-text{ font-size: 14px;}

.about-3{ padding-top: 0; border-bottom: 1px solid #DCDCDC;}
.about-3 .about-3-title br{ display: none}
.about-3 .about-3-img{display: block; margin: auto;}

.producer{display: flex; align-items: center;}
.producer .producer-desc{ padding-left: 20px }
.producer .producer-desc p{ font-size: 14px; margin: 0;}
.producer .producer-desc p:first-child{ font-size: 20px; font-weight: 500; margin-bottom: 10px;}

.offer-block{background: #9747FF; border-radius: 16px;  color: #fff; margin-top: 30px}
.offer-block-left{ padding: 24px;}
.offer-block-right{ display: none}
.offer-block h3{ margin: 0; margin-bottom: 30px}
.offer-block p{ font-size: 14px; margin-bottom: 25px;}

/**************/
.about-4{padding-top: 40px; border-bottom: 1px solid #DCDCDC;}
.about-4 h3{ margin-top: 0}
.about-4-items{}
.about-4-item{ display: flex; padding: 12px 20px ; margin-bottom: 20px; background: #fff; border-radius: 16px; align-items: center; font-size: 14px }
.about-4-item .item-num{ display: block; width: 36px; margin-right: 20px;}

.video-wrapper{ max-width: 590px; margin: 30px auto 20px; }
.video-wrapper video{ width: 100%; display: block; border-radius: 16px; overflow: hidden; }
.video-wrapper ul{ padding-left: 30px; margin-top:0; margin-bottom: 30px}
.video-wrapper h2{ margin: 30px 0}
.video-wrapper ul li{margin-bottom: 7px}

/**************/
.about-5{padding-top: 20px; border-bottom: 1px solid #DCDCDC;}
.about-5-item .item-head{ display: flex;  align-items: center; }
.about-5-item .item-icon{width: 36px; margin-right: 20px;}
.about-5-item .item-title{ font-size: 20px; line-height: 1.1; font-weight: 500; letter-spacing: -.5px}
.about-5-item {background: #fff; border-radius: 16px; padding: 20px; margin-bottom: 20px}
.about-5-item .item-body{  }

/**************/
.about-6{border-bottom: 1px solid #DCDCDC;}
.about-6 .about-content-left{ margin-bottom: 30px}
.about-6 .about-content-left p{ margin-bottom: 20px}
.about-6 .about-content-right{ background: #DFE3ED; border-radius: 16px; padding: 20px; box-sizing: border-box;  }
.about-6 .about-content-right img{display: block; max-width: 100%; max-height: 100%; margin: auto }

/**************/
.tarifs{ padding-top: 20px; padding-bottom: 20px; border-bottom:  1px solid #DCDCDC;}
.tarifs-desc p{ font-size: 14px}

.tarifs-mobile .swiper-slide{  box-sizing: border-box}

.tarifs .tarifs-item{}
.tarifs .tarif-header{ padding: 0 24px; border-bottom:  1px solid #DCDCDC;  padding-bottom: 20px; margin-bottom: 20px}
.tarifs .tarif-name{font-size: 24px; font-weight: 500; margin-bottom: 20px}
.tarifs .tarif-desc{font-size: 16px; margin-bottom: 15px}
.tarifs .tarif-price{ margin-bottom: 10px}
.tarifs .tarif-price > span{font-size: 48px; font-weight: 500; color:#FD9333 }
.tarifs .tarif-price > span >span{font-size: 16px; font-weight: 500; color: #363B4A}
.tarifs .tarif-block{ padding: 0 24px 10px;}
.tarifs .tarif-block h4{ font-size: 16px; font-weight: 500; margin: 10px 0}
.tarifs .tarif-block p{ font-size: 12px; background-image: url(../img/galka-green.svg); background-position: left center; background-repeat: no-repeat; background-size: 20px; padding-left: 25px; min-height: 20px; display: flex; align-items: center; margin: 10px 0 }
.tarifs .tarif-block p:last-child{ margin-bottom: 0}
.tarifs .swiper{ margin-top: 20px}
.tarifs .swiper-pagination{ position: relative}
.tarifs .swiper-pagination-bullet{ width: 12px; height: 12px}
.tarifs .swiper-pagination-bullet-active{ background: #363B4A; width:14px; height:14px }

.tarifs-rows{ display: none}

.faq{border-bottom:  1px solid #DCDCDC;}
.questions-item{ background: #DEE2ED; padding: 24px 45px 24px 24px; border-radius: 16px; margin-bottom: 15px}
.questions-item > div {display: none;  }
.questions-item h2{  font-size: 16px; font-weight: 500; letter-spacing: normal; margin: 0; position: relative; line-height: 1.3 }
.questions-item p{  font-size: 14px;  }
.questions-items .action{ display: block; width: 24px; height: 24px; background: #363B4A; border-radius: 50%; position: absolute; top: 0; right: -30px; cursor: pointer }
.questions-items .action:after,.questions-items .action:before{ display: block; position: absolute; content: ""; height: 3px; border-radius: 3px; background: #fff; top:0;   width: 16px; left: 0; right: 0; bottom: 0; margin: auto;  transition: all 0.3s ease;}
.questions-items .action:before{ transform: rotate(90deg)}
.questions-items .opened .action:before { transform: rotate(135deg)}
.questions-items .opened .action:after { transform: rotate(45deg)}

/**************/
.form-content{ max-width: 390px; margin: auto}
.form-row{ margin-bottom: 20px}
.form-row input, .form-row textarea{ display: block; height: 44px; width: 100%; box-sizing: border-box; border-radius: 12px; background: #fff; border: none; padding: 10px 15px; font-size: 16px}
.form-row textarea{height: auto; min-height: 100px; max-height: 200px; max-width: 100%; min-width: 100%}
.field-error span{ font-size: 13px; color: #ff4861; padding: 3px 10px 0px}

.acms_popup_wrapper{ background: #EEF1F5 !important; border-radius: 16px}
.acms_popup_case{ padding: 20px  !important;}

.acms_popup_wrapper .form-title{ font-size: 22px; font-weight: 500; margin: 10px 0}
.acms_popup_wrapper .form-desc{ font-size: 16px;   margin-top: 20px; margin-bottom: 40px;}

.acms_popup_wrapper_close{ border-radius: 50%; background: #363B4A; width: 24px!important; height: 24px!important;  }
.acms_popup_wrapper_close:after{ color: #fff !important; width: 16px!important; height: 16px!important;}

/**************/
.__footer{ background-color: #fff; border-top: 1px solid #DCDCDC; padding-top: 30px; line-height: 1.4  }
footer .logo{display: inline-block; height: 60px; width: 120px; margin-bottom: 10px }
.footer-item{ font-size: 14px;}
.footer-item p{ margin: 0}
.footer-item:first-child{ padding-right: 50%;}
.footer-item:nth-child(2){ position: absolute; top: 74px; right: 0; left: calc(50% + 25px) }
.footer-item:nth-child(2) a{ font-weight: bold}
.footer-item:nth-child(3) { margin-top:40px}
.footer-item .footer-menu{display: flex; flex-direction: column; margin-bottom: 20px }
.footer-item .footer-menu a{ padding: 2px 0; margin: 2px 0}

.footer-item .footer-apps p{ margin-bottom: 15px  }

.footer-end { font-size: 14px; margin-top: 40px}
.footer-end > div{ margin-bottom: 15px;}
.footer-end p, .footer-end a { margin:2px;}


/***************/
.files table{ width: 100%; border-collapse: collapse; font-size: 12px;}
.files table th{ background: #eee; padding: 5px; border: 1px solid #cacaca; }
.files table td{  padding: 5px; border: 1px solid #eee}
.files table td.folder{ font-size: 1.2em; font-weight: bold; background: #2b2955;color: #fff;}
.files .file-name a{ color: inherit}
.files .file-type{ height: 35px; width: 50px;}
.files .file-type svg{ display: block; height: 100%; width: auto;}
.files .file-type-text{ position: absolute; border: 1px solid #000; border-radius: 2px; padding: 1px 2px; font-size: 8px; bottom: 5px; left: 10px; background: #fff;}
.files .file-size{ text-align: center;   }
.files .file-link{ display:block; height: 20px; width: 30px; margin: auto}
.files .file-link svg{display: block; height: 100%; width: auto; margin: auto}

/*****************/
.page-contacts{ margin-bottom: 40px}
.page-company h1, .page-contacts h2{ font-size: 40px; letter-spacing: -.5px; margin-top: 40px; margin-bottom: 30px }
.page-contacts .contact-item{ font-size: 20px; font-weight: 500; margin-bottom: 10px;}
.page-contacts .contact-item p{ margin: 0;}
.page-contacts .contact-item a{ color: #DD710F; cursor: pointer; }
.page-contacts .contact-item:last-child{ margin-top: 30px}
.page-contacts .contact-item .adres{ display: block; font-size: 16px; margin-top: 10px}
.page-contacts  .contacts-content-left{ margin-bottom: 20px}
.page-contacts  .contacts-content-right{ border-radius: 14px; overflow: hidden}
.page-contacts  .contacts-content-right img{ width: 100%}

.page-company{ border-bottom: 1px solid #DCDCDC; padding-bottom: 30px; }
.page-company .company-content{ font-size: 16px;}
.page-company .company-video img{ border-radius: 16px; }
.page-company .company-video a:after {content: '';display: block;position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;height: 60px;width: 60px;background-image: url(../img/player-play-svgrepo-com.svg);background-position: 21px center;background-repeat: no-repeat;background-size: 24px;border-radius: 50%;background-color: #2f2f2f;}

/***************/
.app .buttons{ max-width: 340px; margin: auto}
.app .button { flex-basis: 50%}
.app h2{ font-size: 24px;  margin: 0 auto; margin-bottom: 15px; letter-spacing: -.5px; max-width: 600px;  }


/***************/
.app1-content{ margin-top: 35px; border-bottom:  1px solid #DCDCDC;}
.app1-content h1{ font-size: 56px; letter-spacing: -1px; margin: 0; margin-bottom: 5px }
.app1-content p{ font-size: 14px; margin:0; margin-bottom: 30px}
.app1-content img{ display: block; width: 100%; max-width: 800px; margin: 30px auto}

/***************/
.app2-content{ margin-top: 35px; border-bottom:  1px solid #DCDCDC; padding-bottom: 25px}
.app2-content h2{ font-size: 24px;  margin: 0; margin-bottom: 15px }
.app2-content p{ font-size: 14px; margin:0; margin-bottom:25px}
.app2-content p.pb{ font-size: 20px; font-weight: bold; margin:0; margin-bottom: 30px}
.app2-content img{ display: block; width: 100%; max-width: 800px; margin:auto; margin-bottom: 25px; border-radius: 16px}

/**************/
.app3{margin-top: 35px; padding-bottom: 30px;  border-bottom: 1px solid #DCDCDC;}
.app3-content-right{ border-radius: 16px; overflow: hidden; background: #F5B496}
.app3-content-right img{ width: 80%; display: block; margin: auto }

.app3-content{margin-top: 20px; max-width: 600px; margin: auto; margin-bottom: 35px}
.app3-item .item-title{ font-size: 20px; line-height: 1.1; font-weight: 500; letter-spacing: -.5px}
.app3-item .item-body p { font-size: 14px;}
.app3-item {background: #fff; border-radius: 16px; padding: 20px; margin-bottom: 20px}

.app4{margin-top: 35px; padding-bottom: 30px;  border-bottom: 1px solid #DCDCDC;}
.app4 img{ margin: auto}


/**************/
.app5{ padding-bottom: 30px;  border-bottom: 1px solid #DCDCDC;}
.app5 .__container{ max-width: unset}
.app5-swiper{}
.app5-swiper .swiper-slide{flex-basis: 260px;padding-left: 24px;height: auto;}
.app5-item{background: #fff; border-radius: 16px; padding: 16px 24px 20px; display: flex; flex-direction: column; justify-content: space-between; height: 160px; box-sizing: border-box; }
.app5 .item-num{ font-size: 32px; color: #FD9333; font-weight: 500;}
.app5 .item-text{ font-size: 14px;}
.app5-content{ padding-top: 10px; }


/**************/

.app6-content{ margin-top: 35px; border-bottom:  1px solid #DCDCDC; padding-bottom: 25px}
.app6-content h2{ font-size: 24px;  margin: 0; margin-bottom: 15px }
.app6-content p{ font-size: 14px; margin:0; margin-bottom:25px}
.app6-content p.pb{ font-size: 20px; font-weight: bold; margin:0; margin-bottom: 30px}
.app6-content img{ display: block; width: 100%; max-width: 800px; margin:auto; margin-bottom: 25px; border-radius: 16px}

@media only screen and (min-width: 768px) {

    .__side-padding {  padding: 0 40px; }
    .__container{ max-width: 1280px; margin:0  auto; }

    .logo {height: 42px;width: 87px;}

    .header-item-phone{ display: block; margin-left:60px}
    .header-item-menu{ display: block; flex: 1}

    /************/


    .offer{ overflow: hidden}
    .offer .offer-content{max-width:none; display: flex; justify-content: space-between}
    .offer .offer-content-left{flex-basis: 60%; padding-bottom: 20px;}
    .offer .offer-content-right{flex-basis: 40%; display: flex; align-items: center}
    .offer .offer-content-left h1{ font-size: 72px; }
    .offer .offer-content-left p{ font-size: 22px;}


    .offer .offer-content-right img{position: absolute; top:0; bottom: 0; left: -30px; margin:auto; max-width: unset; height: 100%; max-height: 550px}

    .offer .offer-image-mobile{ display: none}
    .offer .offer-image-desktop{ display: flex; align-items: center; justify-content: flex-end}
    .offer .offer-buttons{ margin-top: 30px; display: flex; justify-content: flex-start;  }
    .offer .offer-buttons .button{ margin: 0; margin-right: 15px; }
    .offer .offer-buttons .button:last-child{  margin-right: 0; }
    .offer .offer-content-partner{ position: absolute; bottom: 0; left: 0}
    .offer .offer-content-slogans{ margin: 60px 0px; flex-direction: row; gap:60px }
    .offer .offer-slogan{ flex-direction: column; align-items: flex-start}
    .offer .offer-slogan img{margin-bottom: 10px;}
    .offer .offer-slogan p{ font-size: 16px !important}

    /****************/
    .about-2-swiper .swiper-slide{flex-basis: calc(33% + 50px);padding-left: 24px;height: auto;}

    /****************/
    .about-3 h3{   margin: auto; margin-bottom: 20px; text-align: center; line-height: 1.1; letter-spacing: -1px}

    /******************/
    .about-4-items{display: flex; justify-content: space-between; flex-wrap: wrap}
    .about-4-item{ flex-basis: calc(50% - 10px); box-sizing: border-box; font-size: 18px}

    .producer{ justify-content: center}

    /***************/
    .about-5-items { display: flex; justify-content: space-between; flex-wrap: wrap}
    .about-5-item { flex-basis: calc(50% - 15px); box-sizing: border-box }

    /***************/
    .about-6 .about-content{ display: flex; gap:20px; max-height: 500px}
    .about-6 .about-content-left { flex-basis: 50%; margin: 0; display: flex; flex-direction: column; justify-content: space-between; }
    .about-6 .about-content-left p{ flex: 1}
    .about-6 .about-content-right { flex: 1}

    /**************/
    .offer-block{display: flex;  }
    .offer-block > div{ flex-basis: 50%; box-sizing: border-box}
    .offer-block-left{ display: flex; justify-content: center; flex-direction: column}
    .offer-block-right{ display: block; overflow: hidden; border-radius: 0 16px 16px 0}
    .offer-block-right img{ min-height: 100%; min-width: 100%; position: absolute; top: 0;bottom: 0;margin: auto; }
    .offer-block h3{ text-align: left; margin: 0}
    .offer-block p{ font-size: 14px; margin-bottom: 25px;}
    .offer-block .button{ width: 160px;}

    .tarifs .swiper{ padding: 0 30px}
    .tarifs-swiper{ display: flex !important}
    .tarifs-swiper .swiper-wrapper{ display: flex; flex-basis:70%}
    .tarifs-swiper .tarifs-rows{ display: block; width: 260px; max-width: 260px}
    .tarifs-swiper .swiper-slide{ flex-basis: 33.33%}

    .tarifs-swiper .tarifs-rows p{ padding-left: 0; background: none}


    .tarifs .tarifs-desc{ display: flex; justify-content: space-between; align-items: center; gap: 20px;}
    .tarifs .tarifs-desc h3{ margin: 30px 0; flex-basis: 40%; font-size: 24px;}
    .tarifs .tarifs-desc p{ margin: 0; flex-basis: 60%; font-size: 14px}
    .tarifs .tarif-price > span{ font-size: 20px;}
    .tarifs .tarif-price > span >span{ font-size: 12px;}
    .tarifs .tarif-block, .tarifs .tarif-header{ padding: 0 10px 20px}
    .tarifs .tarif-header{ height: 170px}
    .tarifs .swiper-wrapper .tarif-block h4{ display: none;}
    .tarifs .swiper-wrapper .tarif-block p span{ display: none;}
    .tarifs .tarif-name{ font-size: 18px;}
    .tarifs .tarif-block{ border-bottom: 1px solid #DCDCDC; box-sizing: border-box; margin-bottom: 20px;}
    .tarifs .tarif-block:last-child{ border: none; margin: 0; padding-bottom: 0}
    .tarifs .tarif-block h4{ margin-top: 0}

    .tarifs .tarif-block:nth-child(2){ height: 130px;}
    .tarifs .swiper-slide  .tarif-block:nth-child(2){ padding-top: 42px;}
    .tarifs .tarif-block:nth-child(3){ height: 230px;}
    .tarifs .swiper-slide  .tarif-block:nth-child(3){ padding-top: 22px;}
    .tarifs .tarif-block:nth-child(4){ height: 170px;}
    .tarifs .swiper-slide  .tarif-block:nth-child(4){ padding-top: 22px;}


    .__footer { padding-top: 50px; padding-bottom: 20px}

    footer .logo{height: 70px; width: 140px; margin-bottom: 30px }

    .footer-items{display: flex; justify-content: space-between}
    .footer-item:first-child{padding-right: unset; flex-basis: 30%}

    .footer-item:nth-child(2){ display: flex; justify-content:  flex-start; left: 30%; right: 0; top:0}
    .footer-item:nth-child(2) >div{ flex-basis: 33.33%}
    .footer-item .contact-item p{ margin-bottom: 10px}
    .footer-item:nth-child(3){ padding-top: 58px;  flex: 1; display: flex; gap: 30px}
    .footer-item .footer-menu a { padding: 0; margin: 0; margin-bottom: 12px}

    .footer-item .footer-menu{ flex-basis: 33.33%}
    .footer-item .button{ width: 150px}

    .footer-end{ display: flex; justify-content: space-between;  }
    .footer-end .footer-end-left{flex-basis: 50%}
    .footer-end .footer-end-right{flex-basis: 260px}

    .files table{ font-size: 14px;}
    .files table td{  padding: 7px 10px;}

    .form-content h3{ font-size: 36px; text-align: center}
    .form-content p{  text-align: center}
    .acms_popup_case{ padding: 30px 60px !important;}
    .acms_popup_wrapper_close{ top: 15px !important; right: 15px !important;}

    /***********/
    .page-contacts  .contacts-content{ display: flex; justify-content: space-between}
    .page-contacts  .contacts-content-left{flex-basis: 50%; display: flex; flex-direction: column; justify-content: center}
    .page-contacts  .contacts-content-right{flex-basis: 50%}
    .page-contacts  .contacts-content-right img{ min-height: 100%; object-fit: cover }

    .app h2{ font-size:36px; text-align: center; margin: auto; margin-bottom: 30px }

    /***********/
    .app1-content h1{ font-size: 72px; text-align: center; margin-bottom: 10px }
    .app1-content p{ font-size: 18px; text-align: center; margin-bottom: 50px}
    .app1-content img{ margin: 40px auto}

    /***********/
    .app2-content{ padding-bottom: 40px}
     .app2-content p{ font-size: 18px; margin: auto; margin-bottom:40px; text-align: center; max-width: 540px; }
    .app2-content p.pb{ font-size: 32px; max-width:620px; margin: auto; margin-bottom: 40px; letter-spacing: -1px }
    .app2-content img{  margin-bottom: 40px; }

    /****************/
    .app5-swiper .swiper-slide{flex-basis: calc(33% + 50px);padding-left: 24px;height: auto;}
    .app5-content p{ text-align: center; max-width: 600px; margin:20px auto; font-size: 18px}

    /***********/
    .app6-content{ padding-bottom: 40px}
     .app6-content p{ font-size: 18px; margin: auto; margin-bottom:40px; text-align: center; max-width: 540px; }
    .app6-content p.pb{ font-size: 32px; max-width:620px; margin: auto; margin-bottom: 40px; letter-spacing: -1px }
    .app6-content img{  margin-bottom: 40px; }

    .page-company{ padding-bottom: 40px; margin-bottom: 60px; }

}

@media only screen and (min-width: 1024px) {


    section.mobapp .__container{ max-width: 900px;}

    .header-item-menu{display: flex; flex: 1; justify-content: flex-end; z-index: 100}
    .header-item-menu nav{ display: flex; justify-content: flex-end; align-items: center}
    .header-item-menu a{  font-size: 16px; font-weight: 600; margin-left: 25px; text-decoration: none; cursor: pointer; position: relative;  display: inline-block;}
    .header-item-menu .lk-item a{ border: 1px solid #C2CCD9; border-radius:12px; padding: 11px 20px;  transition: all 0.3s ease;}
    .header-item-menu .lk-item a:hover  { background-color: #C2CCD9; color: #fff;  }
    .header-item-menu .lk-item a:hover svg path { fill: #fff !important}

    .is-scroll .submenu{ max-height: 52px;  opacity: 1; visibility: visible   }


    /**************/
    .offer .offer-content-left{flex-basis: 50%;  }
    .offer .offer-content-right{flex-basis: 50%; }
    .offer .offer-content-left h1{ font-size: 72px;}
    .offer .offer-content-left p{ font-size: 22px;}
    .offer .offer-content-slogans{margin-top:80px; margin-bottom: 60px; gap: 110px}
    .offer .offer-slogan p{ font-size: 16px}

    /*****************/
    .about .about-content{ display: flex; justify-content: space-between; padding-top: 40px}
    .about .about-content-left{ flex-basis: 30% }
    .about .about-content-left h3{ margin-top: 0}
    .about .about-content-right{flex-basis: 70%; }
    .about .about-content-right h2{ margin-top: 0}

    /*******************/
    .about-2 .__container {max-width: 1280px;}
    .about-2 h3{ margin-bottom: 20px}

    .swiper-wrapper{ flex-wrap: wrap}
    .about-2-items{ padding: 0 30px;}
    .about-2-swiper .swiper-slide{flex-basis: calc(25% - 20px); padding: 10px}
    .about-2-item{ height: 190px;}
    .about-2-item .item-num{ font-size: 48px;  }
    .about-2-item .item-text{ font-size: 14px;}

    /****************/
    .about-3 h3{ font-size: 48px !important; letter-spacing: -2px !important; margin-bottom: 30px}
    .about-3 .about-3-title br{ display: block}

    /******************/
     .about-4-item{ flex-basis: calc(25% - 15px); }

    /******************/
    .about-6 .about-content{  gap:40px;}

    /****************/
    .offer-block{ margin-top: 60px}
    .offer-block-left{ padding: 40px}

    .producer .producer-desc p{ font-size: 18px;  }
    .producer .producer-desc p:first-child{ font-size: 32px; }

    .tarifs-swiper .tarifs-rows {width: 300px;max-width: 300px;}
    .tarifs .swiper-slide .tarif-block, .tarifs .swiper-slide .tarif-header {padding: 0 20px 20px;}

    .faq-content{display: flex; justify-content: space-between; gap: 40px; padding-top: 30px}
    .faq-content h3{ margin: 0}
    .faq-content .faq-content-left{ flex-basis: 30%; }
    .faq-content .faq-content-right{ flex-basis: 70%}
    .questions-item { padding: 30px 80px 30px 30px;}
    .questions-item h2{ font-size: 24px !important; letter-spacing: -.5px !important}
    .questions-items .action{ right: -50px}
    .questions-item p { font-size: 18px}


    .footer-item { font-size: 16px}
    .footer-item:first-child {flex-basis: 40%;}
    .footer-item:nth-child(2) { left: 40%}
    .footer-item:nth-child(2) >div { flex-basis: 250px;}
    .footer-item:nth-child(3){ gap:unset}
    .footer-item .footer-menu{ flex-basis: 250px;}
    .footer-item .button{ width: 160px}

    /***********/
    .app1-content h1{ font-size: 90px; text-align: center; letter-spacing: -2px }
    .app1-content p{ font-size: 28px; text-align: center;}
    .app1-content img{ margin: 50px auto}

    .app3-content{ display: flex; gap: 20px; max-width: none}
    .app3-content >div{ flex-basis: 100%}
    .app3-item .item-title{ font-size: 28px; letter-spacing: -1px}
    .app3-item .item-body p { font-size: 16px;}
    .app3-item:last-child { margin-bottom: 0}

    .app3-content-right{ border-radius: 16px; overflow: hidden; background: #F5B496}
    .app3-content-right img{ width: 80%; height: 100%; object-fit: contain}

    /*******************/
    .app5 .__container {max-width: 1280px;}

    .swiper-wrapper{ flex-wrap: wrap;  justify-content: center}
    .app5-items{ padding: 0 30px; justify-content: center}
    .app5-swiper .swiper-slide{flex-basis: calc(25% - 20px); padding: 10px}
    .app5-item{ height: 190px;}
    .app5-item .item-num{ font-size: 48px;  }
    .app5-item .item-text{ font-size: 14px;}

    .page-company .company-content{ padding-right: calc(50% + 40px)}

    .page-company .company-video { position: absolute; width: 50%; top: 0; right: 0; bottom: 0}
    .page-company .company-video a{ display: block; height: 100%}
    .page-company .company-video img{ height: 100%; object-fit: cover}

}

@media only screen and (min-width: 1280px) {
    .header-item-phone a{ font-size: 18px; background-size: 24px; padding-left: 34px}

    .header-item-menu a{ margin-left:35px; }

    .submenu a{ font-size: 14px; margin-right: 30px}
    /**************/
    .offer .offer-content{ padding-top: 60px}
    .offer .offer-content-left h1{ font-size: 92px; letter-spacing: -.5px}
    .offer .offer-content-left p{ font-size: 28px;}
    .offer .offer-content-right img {right: -90px}
    .offer .offer-content-slogans{margin-top:150px;  margin-bottom: 70px;}
    .offer .offer-slogan p{ font-size: 18px}

    /**************/
    .about .about-content{ padding-top: 50px; padding-bottom: 30px}
    .about .about-content-left{ flex-basis: 34% }
    .about .about-content-right{flex-basis: 66%; }
    .about h2{ font-size: 48px; letter-spacing: -2px  }
    .about h3{ font-size: 36px; letter-spacing: -1px;  line-height: 1.2; }
    .about h4{ font-size: 32px; letter-spacing: -1px }
    .about p{ font-size: 18px;}
    .about .text-block h4{ margin-top: 35px; margin-bottom: 15px}
    .about .text-block.haveline{ border-bottom: 1px solid #DCDCDC; padding-bottom: 5px}

    .about-5-item{ padding: 30px; margin-bottom: 30px}
    .about-5-item .item-title{ font-size: 28px; letter-spacing: -1px;}


    .tarifs .tarifs-desc h3{ margin: 40px 0 60px; flex-basis: 50%; font-size: 32px;}
    .tarifs .tarifs-desc p{  font-size: 16px; flex-basis: 50%}
    .tarifs-swiper .swiper-wrapper{ flex-basis: 100%}

    .tarifs-swiper .tarifs-rows {width: 300px;max-width: 300px;flex-shrink: 0;}

    .tarifs .tarif-header{ height: 210px}
    .tarifs .tarif-block h4 { font-size: 20px}
    .tarifs .tarif-name{ font-size: 24px}
    .tarifs .tarif-price > span{ font-size: 48px; letter-spacing: -2px}
    .tarifs .tarif-price > span >span{ font-size: 16px; letter-spacing: normal}
    .tarifs .tarif-block, .tarifs .tarif-header{ padding: 0 10px 20px}

    .tarifs .tarif-block:nth-child(2){ height: 140px;}
    .tarifs .swiper-slide  .tarif-block:nth-child(2){padding-top: 52px;}

    .tarifs .tarif-block:nth-child(3){ height: 230px;}
    .tarifs .swiper-slide  .tarif-block:nth-child(3){ padding-top: 28px;}

    .tarifs .tarif-block:nth-child(4){ height: 170px;}
    .tarifs .swiper-slide  .tarif-block:nth-child(4){ padding-top: 28px;}

    .footer-item:nth-child(2) >div { flex-basis: 300px;}

    .footer-item .footer-menu{ flex-basis: 300px;}

    /**********/
    .page-contacts{ margin-bottom: 60px}
    .page-contacts h1{ font-size: 80px; letter-spacing: -2px; line-height: 1; margin-top: 0px;}
    .page-contacts .contacts-content{ }
    .page-contacts .contacts-content-left{ margin-bottom: 0}
    .page-contacts .contact-item{ font-size: 32px;  margin-bottom: 10px;}
    .page-contacts .contact-item p{ margin: 0;}
    .page-contacts .contact-item a{ color: #DD710F; cursor: pointer; }
    .page-contacts .contact-item .adres{  font-size: 22px; margin-top: 10px}

}