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


:root {
    --main-color: #021223;
    --background-color: #f2f2f2;
    --font-size: 16px;
    --link-color: #00b566;
    --link-color-hover: #731982;;
  }


@font-face {
  font-family: 'Rostel';
  src: url('/tools/font/RostelecomBasis-Regular.eot');
  src: url('/tools/font/RostelecomBasis-Regular.eot?#iefix') format('embedded-opentype'),
  url('/tools/font/RostelecomBasis-Regular.woff') format('woff'),
  url('/tools/font/RostelecomBasis-Regular.ttf') format('truetype');
  font-style: normal;
  font-weight: normal;
}

@font-face {
  font-family: 'Rostel';
  src: url('/tools/font/RostelecomBasis-Medium.eot');
  src: url('/tools/font/RostelecomBasis-Medium.eot?#iefix') format('embedded-opentype'),
  url('/tools/font/RostelecomBasis-Medium.woff') format('woff'),
  url('/tools/font/RostelecomBasis-Medium.ttf') format('truetype');
  font-style: normal;
  font-weight: 500;
}

@font-face {
  font-family: 'Rostel';
  src: url('/tools/font/RostelecomBasis-Light.eot');
  src: url('/tools/font/RostelecomBasis-Light.eot?#iefix') format('embedded-opentype'),
  url('/tools/font/RostelecomBasis-Light.woff') format('woff'),
  url('/tools/font/RostelecomBasis-Light.ttf') format('truetype');
  font-style: normal;
  font-weight: 300;
}

@font-face {
  font-family: 'Rostel';
  src: url('/tools/font/RostelecomBasis-Bold.eot');
  src: url('/tools/font/RostelecomBasis-Bold.eot?#iefix') format('embedded-opentype'),
  url('/tools/font/RostelecomBasis-Bold.woff') format('woff'),
  url('/tools/font/RostelecomBasis-Bold.ttf') format('truetype');
  font-style: normal;
  font-weight: bold;
}


/* Main css */

body {
    margin: 0;
    background: #fbfbfb82;
    max-width: 100%;
    min-height: 100vh;
    overflow-x: hidden;
    display: grid;
    grid-template-rows: auto 1fr auto;
    font-family: 'Rostel';
    font-size: clamp(14px, 16px, 18px);
    color: var(--main-color);
}


h1,
h2,
h3,
h4 {
    font-weight: 700;
}


img {
    max-width: 100%;
}

h1 {
  font-size: clamp(1.8em, 3vw, 2.8em);
}

h2 {
  font-size: clamp(1.6em, 3vw, 2.2em);
  line-height: 1.8;
}

b,
strong {
    font-weight: bold;
}

a {
    color: var(--link-color);
    text-decoration: none;
}

a:hover {
    color: var(--link-color-hover);
    text-decoration: none;
}

.container-full {
  width: 100%;
}

.container {
  width: min(1450px, 100%);
  margin: 0 auto;
  padding-left: 15px;
  padding-right: 15px;
}



/* ##################################################################################################################### */



/* Heder css */

.head__top_bar {
  grid-template-columns: 1fr 1fr auto;
  display: grid;
  padding: 5px 0;
  font-size: 14px;
  color: #021223cf;
}

.head__top_bar__bg {
  background-color: #4ba2ff0f;
}

.head__top_bar img {
  width: 12px;
}

.support a {
  color: #6f0099;
}
.support a:hover {
  color: var(--link-color);
}


.head {
  grid-template-columns: auto 1fr auto;
  display: grid;
  grid-gap: clamp(10px, 2vw, 25px);
  position: sticky;
  top: 0;
  z-index: 1;
  width: 100%;
  padding-top: 15px;
  padding-bottom: 15px;
  align-items: center;
}


.menu {
  display: flex;
  align-self: end;
  font-size: 18px;
  font-weight: 500;
  margin: auto;
  gap: 20px;
  padding-top: 15px;
}

.menu a {
  color: var(--main-color);
}

.menu a:hover {
  color: #8d00ff;
}


.phone {
  width: auto;
  background-image: url(/image/phone_icon.webp);
  background-position: 0px 2px;
  background-size: 30px;
  background-repeat: no-repeat;
  padding-left: 40px;
}


.phone--nomber {
  font-size: 21px;
  font-weight: 500;
  margin-top: -3px;
}

.phone--text{
  color: #555;
}

.box-shadow {
  box-shadow: 0px 0px 3px rgba(16, 24, 40, 0.06);
}


.title {
  position: relative;
  padding-left: 60px;
}

.title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 38px;
  height: 35px;
  background: url(/image/title.webp);
  background-repeat: no-repeat;
}

/* Baner css */

.baner_bg {
  background: linear-gradient(120deg, rgba(0,185,86,1) 10%, rgba(0,162,185,1) 50%, rgba(66,82,153,1) 70%, rgba(115,25,130,1) 90%);   padding: 75px 0px;
  margin-bottom: 65px;
}

.baner_main {
  max-width: 1390px;
  margin: auto;
}

.baner_text { 
  font-size: 42px;
  color: #fff;
  font-weight: 500;
}

 .baner_tm{
  font-size: 32px;
  padding-top: 80px;
}


.option_h {
  font-size: 21px;
  font-weight: 500;
  margin-bottom: 10px;
}

.option_t {
  color: #555;
  padding-bottom: 3px;
}

.option_grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 85px);
  gap: 10px;
}

.opt_v {
  border: solid 1px #f9f6f6;
  padding: 7px;
 
  border-radius: 5px;
  line-height: 1.2;
  font-size: 15px;
  display: grid;
  align-items: center;
}

.opt_v:hover {
  border: solid 1px var(--link-color-hover);
}

.opt_v img  {
  margin: auto;
  max-height: 41px;
}

.opt_big {
  font-size: 20px;
  font-weight: 500;
  color: var(--link-color);
}

.option_row {
  margin-bottom: 7px;
  padding: 14px 0;
}

.opt_text {
  padding-right: 5px;
  line-height: 1.3;
  font-size: 16px;
}

.sila {
  border-radius: 5px;
  border: 1px solid #ddd;
  padding: 12px 15px;
  display: grid;
  grid-template-rows: auto auto 1fr;
  margin: 20px 10px;
  background-color: #fff;
}

.sila img {
align-self: end;
max-height: 51px;
}

.sila p  {
  margin-bottom: 10px;
}

.sila:hover {
  border: 1px solid var(--link-color-hover);
}


.sila-title {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 10px;
}

.sila-bg{
  background-color: #f7f7f7;
  padding: 50px 0;
  margin: 80px 0;

}



/* Block css */

.block {
  background: #fff;
  border-radius: 8px;
  padding: 30px 35px;
}

.m25 {
  margin-top: 25px;
  margin-bottom: 25px;
}

.tab_tar {
  padding: 8px;
  border-radius: 5px;
  border: solid 1px #ddd;
  background-color: #f7f7f7;
  text-align: center;
  transition: .3s,transform;
}

.taba_tar {
  padding: 8px;
  border-radius: 5px;
  border: solid 1px #ff4f12;
  background-color: #fff;
  text-align: center;
  transition: .3s,transform;
}

.grid-6 a {
  color: #333;
}


.tab_tar:hover {
  border: solid 1px #7500FB;
  background-color: #fff;
}


.tech {
  background-color: #ccc;
  padding: 5px 10px;
  text-align: center;
  border-radius: 5px;
  color: #111;
}

.tech-txt {
  text-align: right;
  padding: 5px;
  color: #7d7d7d;
}

.tech-akt {
  background-color: #ff4f12;
  padding: 5px 10px;
  text-align: center;
  border-radius: 5px;
  color: #fff;
}

.content {
  margin: 50px 0;
}

.tab-content {
  display: none;
}
.tab-content.active {
  display: block;
}

.center {
  text-align: center;
}

.tablinks {
  background-color: #fff;
  padding: 5px 10px;
  margin: auto;
  color: #000000;
  font-weight: 500;
  font-size: 21px;
  border-radius: 5px;
  width: auto;
  text-align: center;
  cursor: pointer;
  position: relative;
}

.act {
  background-color: var(--link-color-hover);
  padding: 5px 10px;
  margin: auto;
  color: #fff;
}

.act::before {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  margin: auto;
  content: "";
  background: var(--link-color-hover);
  width: 12px;
  height: 12px;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition: .3s;
  -o-transition: .3s;
  transition: .3s;
  z-index: 1;
}

.tab-tech {
  text-align: center;
  width: 250px;
  margin: auto;
  padding: 12px;
  border-radius: 7px;
  background-color: #fff;
  border: solid 2px #8d00ff;
  font-weight: 500;
}


.galka li {
  margin: 0;
  padding: 8px 0 8px 32px;
  list-style: none;
  background-image: url("/image/check_icon.webp");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 20px;
}


.chek-list {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 50px;
  color: #fff;
}

.under-txt {
  text-align: center;
  color: #333;
}

.bg-sky {
  background-color: #00a85c;
  position: relative;
}


.p60 {
  padding-top: 60px;
  padding-bottom: 60px;
}

.p85 {
  padding-top: 85px;
  padding-bottom: 85px;
}


.bg-img-tech{
  position: absolute;
  max-height: 500px;
  left: 150px;
  opacity: 0.8;
}


.bg-img-l {
  position: absolute;
  max-width: 300px;
  left: 150px; 
  top: 50px;
}


.bg-img-r {
  position: absolute;
  max-width: 500px;
  right: 0;
  bottom: 0;
}


.block-priem {
  background-color: #fff;
  padding: 30px 50px;
  border-radius: 10px;
  box-shadow: 0 3px 10px #ddd;
  margin-top: 35px;
  margin-bottom: 35px;
}

.midle {
  align-self: center;
  text-align: center;
}


.step {
  padding: 35px 30px;
  background-color: #fff;
  border: 1px solid #00c890;
  border-radius: 10px;
  text-align: center;
  width: 350px;
  margin: auto;
  margin-top: 40px;

}

.step-title {
  font-weight: 500;
  font-size: 20px;
  padding-top: 10px;
}


.green-bg-title{
  color: #fff;
  font-size: clamp(1.6em, 3vw, 2.5em);
  padding-bottom: 20px;
}


.gard-block {
  border-radius: 10px;
    padding: 35px 85px 0px;
    background-color: #8c0a84;
}

/* Grid css */

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 20px;
}

.grid-a2 {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px 20px;
}

.grid-3 {
  grid-template-columns: 1fr 1fr 1fr;
  display: grid;
  grid-gap: 10px 25px;
}

.grid-4 {
  grid-template-columns: 1fr 1fr 1fr 1fr;
  display: grid;
  grid-gap: 10px 25px;
}

.grid-20-80 {
  display: grid;
  grid-template-columns: 20% 1fr;
  gap: 80px;
}

.grid_1fr2fr {
  grid-template-columns: 1fr 2fr;
  display: grid;
  grid-gap: 10px 20px;
}

.grid-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, auto));
  gap: 30px 45px;
  margin: 35px auto 55px auto;
  justify-content: center;
}

.girid-title {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 15px;
}

.grid-6 {
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  display: grid;
  grid-gap: 10px;
  padding: 10px 15px;
}

.tech-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(50px, auto));
  gap: 10px;
  justify-content: end;
}

.grid-piem {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
  max-width: 1250px;
  margin: auto;
}

.grid_footer {
  	grid-template-columns: 2fr 1fr 1fr 1fr;
	display: grid;
    grid-gap: 10px 55px;
	padding-top: 35px;
    padding-bottom: 25px;
}

.grid_footer> div:nth-child(4) {
justify-self: end;
}

.grid_footer > div:nth-child(3) {
  justify-self: center;
}

/* Растягиваем второй столбец на всю высоту */
.grid-piem > div:nth-child(2) {
  grid-row: span 2; /* Занимает две строки */
}

.w800 {
  max-width: 800px;
  margin: auto;
}


.bg_f {
  background: linear-gradient(125deg, rgb(0, 245, 94) 0%, rgb(0, 207, 255) 50%, rgb(181, 0, 255) 100%);
}


/* Tarif css - Тариф */



.grid-tar-3 {
  grid-template-columns: repeat(3, 1fr);
  display: grid;
  grid-gap: 10px 30px;
  justify-content: center;
}

.colum {
  background: #fff;
  -webkit-box-shadow: inset 0 0 0 2px #f3f3f4;
  box-shadow: inset 0 0 0 2px #f3f3f4;
  border-radius: 8px;
  color: #000;
  font-size: 14px;
  line-height: 20px;
  padding: 20px 0;
  position: relative;
  max-width: 410px;
  margin: 20px auto;
  display: grid;
  grid-template-rows: auto auto 1fr;
}

.colum:hover {
    box-shadow: inset 0 0 0 2px #8728e6cc;
}



.tar_name {
  font-size: 20px;
  line-height: 25px;
  padding: 0 20px;
  margin-bottom: 10px;
}

.tar_row {
  grid-template-columns: 35px auto;
  display: grid;
  grid-gap: 10px 15px;
  padding: 9px 20px;
}

.tar_r {
  grid-template-columns: 1fr;
  display: grid;
  grid-gap: 10px 20px;
  padding: 9px 20px;
}

.tar_icon {
  display: grid;
  align-items: center;
}

.tar_result {
  font-size: 16px;
}

.big {
  font-size: 20px;
  font-weight: 500;
  color: #FF4F12;
}

.tar_pod {
  font-size: 14px;
  line-height: 17px;
  opacity: .5;
}

.tar_mid {
  padding: 10px 0;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}

.tar_opis {
  font-size: 18px;
  line-height: 1.1;
  color: #868686;
}

.tar_price {
  text-align: center;
  padding: 5px 0;
}

.big_price {
  font-size: 28px;
  font-weight: 500;
}

.tar_but{
  color: #fff;
  text-align: center;
  display: block;
  margin: 10px auto 0;
  width: 200px;
  padding: 10px;
  border-radius: 5px;
  font-size: 21px;
}
.tar_but:hover{
  color: #fff;
}

.t_rt{
  background-color: #FF4F12;
}
.t_rt:hover {
  background-color: #ff8218;
}



.tar_item {
  align-self: start;
  outline: none;
  cursor: help;
  padding: 5px 10px;
  border-radius: 6px;
  width: 65px;
  text-align: center;
}


.tar_item img {
 max-width: 100%;
}

.tar_item_img {
  text-align: center;
  line-height: 0.2;
}



.tar_tech:hover .pops {
  opacity: 1;
  position: absolute;
  right: 10px;
  bottom: 2em;
  z-index: 99;
  width: 300px;
  color: #404040;
  border-radius: 6px;
  border: solid 1px #ddd;
  font-size: 14px;
  font-weight: 500;
  background: #f7f7f7;
  padding: 10px;
  line-height: 1.2;
  display: block;
}


.tar_tech .pops {
 opacity:0;
  position: absolute;
  display:none;
}


.tar_item .pops {
 opacity:0;
  position: absolute;
  display:none;
}

.tar_item:hover .pops {
  opacity: 1;
  position: absolute;
  right: 5px;
  z-index: 99;
  width: 300px;
  color: #222;
  border-radius: 6px;
  border: solid 1px #70f;
  font-size: 14px;
  font-weight: 500;
  background: #f7f7f7;
  padding: 10px;
  line-height: 1.3;
  display: block;
  text-align: left;
}

.tar_item .pob {
 opacity:0;
  position: absolute;
  display:none;
}

.tar_item:hover .pob {
  opacity: 1;
  position: absolute;
  right: -60px;
  z-index: 99;
  max-width: 480px;
  color: #222;
  border-radius: 6px;
  border: solid 1px #70f;
  font-size: 14px;
  font-weight: 500;
  background: #fff;
  padding: 10px;
  line-height: 1.3;
  display: block;
  text-align: left;
}

.row_pop_img {
  max-width: 140px !important;
}

.row_pop_img img {
  max-width: 140px !important;
}


.tar_usl {
  margin: 7px 0;
}

.tar_op {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  font-size: 12px;
  gap: 10px;
  justify-items: center;
}

.tar_podr {
  text-align: center;
  margin-top: 10px;
  color: #5b5b5b;
  cursor: pointer;
}

.podr-hide {
  position: fixed;
  z-index: 99999;
  background-color: #00000036;
  padding: 20px;
  margin: auto;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: none;
}


.row_op {
  font-size: 16px;
  padding: 3px 20px;
}
.mar_op  {
  margin: 15px 0;
}


.tar_result b {
  color: #ff4f12;
}

.besp {
  text-align: center;
  margin: 16px;
  font-size: 18px;
  color: #ff1212;
  text-shadow: 1px 1px 1px #ddd;
}


.tar_tp {
  grid-template-columns: auto auto;
  display: grid;
  grid-gap: 10px 20px;
  padding: 5px 0;
  color: #555;
}

.tar_promo, .tar_sale {
  justify-self: center;
}

.tar_sale skidon {
  font-size: 18px;
}


.tar_end {
  align-self: end;
  margin-top: 5px;
}

.tar_tp_skidka {
  text-align: center;
  padding: 7px;
  color: #fff;
  border-radius: 5px;
  border: solid 2px #02b942;
  width: 225px;
  margin: 10px auto;
  background: #8915b3;
  font-size: 16px;
}


.promo {
  background: linear-gradient(160deg,#8915b363 0,#e56af76b 29.69%,#bf71ea57 40.62%,#bfeada 52.08%,#91ffa2 71.87%,#30f420 100%);
  position: relative;
  z-index: 10;
  animation: blink 2.5s infinite ease-in-out;
}

.ptomo-none::before {
  content: "";
  background-image: url('/image/snow.webp');
  background-size: 65%;
  background-position: center;
  height: 100%;
  position: absolute;
  width: 100%;
  z-index: -1;
}


@keyframes blink {
0% {
  box-shadow: inset 0 0 0 2px #cb3bff;
}
50% {
  box-shadow: inset 0 0 12px 2px #00ff60;
}
100% {
  box-shadow: inset 0 0 0 2px #cb3bff;
}
}



.promo-sale {
  position: absolute;
  right: 0;
  padding: 7px 20px 5px;
  background: #8915b3;
  border-radius: 5px 0 0 5px;
  border: solid 2px #0dca07;
  font-weight: 500;
  font-size: 16px;
  color: #fff;
  border-right: none;
}



/* Foter css */






/* Loka css */





/* ##################################################################################################################### */




/* Forma css */

.required {
  border-color: #f45a57 !important;
  }
  
  .form-required {
  opacity: 1 !important;
  z-index: auto !important;
  }
  
  .form-required-hide {
  z-index: -1;
  opacity: 0;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: -12px;
  padding: 0 12px;
  width: 100%;
  background: #f45a57;
  color: #fff;
  font-size: 12px;
  line-height: 1.333333;
  -webkit-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
  }
  
    
.forma-hide-biz {
    position: fixed;
    z-index: 99999;
    background-color: #00000036;
    padding: 20px;
    margin: auto;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: none;
  }
  
  
  
  .form-line {
    display: flex;
    gap: 35px;
    align-items: baseline;
  }

  .wite-shadow h2 {
    color: #ffffff;
    font-size: 27.5px;
    text-shadow: 3px 3px 10px #797474;
    text-align: left;
  }

  .tech-vozm--bg {
    line-height: 0;
  }
  
  
  
  
  input {
    padding: 12px 15px;
    border-radius: 3px;
    width: 100%;
    border: 1px solid #73198212;
    outline:none;
  }
  
  
  
  .art_form {
    padding: 10px;
    font-size: 15px;
    margin: 7px 0;
  }
  
  .art_form:focus-visible {
    border-bottom: 2px solid var(--link-color-hover);
  }
  
  
  .forma-tech {
    margin: 50px 0;
  }
  
  .form-row {
    width: 100%;
    display: flex;
    gap: 12px;
    position: relative;
  }
  
  
  .font-form {
    text-align: center;
    font-size: 12px;
    color: #777;
    display: block;
    padding-top: 10px;
  }
  
  .forma, .forma-help {
    padding: 10px 20px;
  }
  
  
  
  
  
  .forma-hide {
    position: fixed;
    z-index: 99999;
    background-color: #00000036;
    padding: 20px;
    margin: auto;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: none;
  }
  
  .forma-hide-2 {
    position: fixed;
    z-index: 99999;
    background-color: #00000036;
    padding: 20px;
    margin: auto;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: none;
  }
  
  .forma-hide-help {
    position: fixed;
    z-index: 99999;
    background-color: #00000036;
    padding: 20px;
    margin: auto;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: none;
  }
  
  
  .forma-akt {
    display: block;
  }
  
  .forma-akt-2 {
    display: block;
  }
  
  
  
  .forma-success {
    position: fixed;
    z-index: 99999;
    background-color: #00000036;
    padding: 20px;
    margin: auto;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: none;
  }
  
  
  .modal-success {
    padding: 20px !important;
  }
  
  .img-ok {
    text-align: center;
    height: 75px;
    margin: 10px;
    padding-right: 10px;
  }
  
  .img-ok img {
    height: 75px;
  }
  
  .title-ok {
    text-align: center;
    font-size: 23px;
  }
  
  .text-ok {
    padding: 5px 0;
    line-height: 1.2;
  }
  
  
  .active {
    overflow-y: hidden;
  }
  
  .foma-modal {
    max-width: 425px;
    margin: 10% auto 0;
    padding: 10px 7px;
    background: #fff;
    border-radius: 6px;
    height: auto;
    position: relative;
  }
  

  
  
  
  .clos {
    position: absolute;
    display: block;
    right: 10px;
    top: 10px;
  }


  .modal-btn {
    background-color: var(--link-color);
    font-size: 18px;
    text-align: center;
    cursor: pointer;
    color: #fff;
    padding: 10px 15px 10px;
    border-radius: 7px;
    transition: background .2s linear,color .2s linear,border .2s linear,box-shadow .2s linear;
    width: 250px;
    margin: auto;
    display: block;
    margin-top: 10px;
  }

.modal-btn:hover {
  background-color: var(--link-color-hover);
  color: #fff;
}


.btn {
  background-color: var(--link-color);;
  font-size: 17px;
  width: 100%;
  text-align: center;
  cursor: pointer;
  color: #fff;
  padding: 7px 15px 10px;
  border-radius: 7px;
  transition: background .2s linear,color .2s linear,border .2s linear,box-shadow .2s linear;
}

.btn:hover {
  background-color: #08804b;
}




.show-btn {
  background-color: var(--link-color);
  font-size: 17px;
  width: 225px;
  text-align: center;
  cursor: pointer;
  color: #fff;
  padding: 7px 15px 10px;
  border-radius: 7px;
  transition: background .2s linear,color .2s linear,border .2s linear,box-shadow .2s linear;
  display: block;
  margin: auto;
  margin-bottom: 10px;
}

.show-btn:hover {
  background-color: #08804b;
}
  
/* ##################################################################################################################### */


/*--- Футер --- */

.end {
  padding: 20px 10px;
  color: #777;
  font-size: 12px;
  border-top: 1px solid #ddd;
}

.end a {
color: #777;
}


.foottxt{
  font-size: 14px;
  color: #777;
}

.footcol {
  padding: 0 10px;
}

.footcolend{
  padding-left:10px;
}

.footcolst{
  padding-right:10px;
}

.footzag{
  font-weight: 600;
  color: #555;
  padding-bottom: 20px;
  font-size: 15px;
}

.footmenu {
  color: #777;
  font-size: 1em;
  line-height: 1.5;
}

.footmenupod {
margin-top: 25px;
}

.footmenu a {
  color: #777;
} 

.footmenu a:hover {
  color: #00b92e;
} 


.footphone {
  font-weight: 600;
  color: #555;
  padding-bottom: 10px;
  font-size: 20px;
}

.phonefoot {
  font-size: 26px;
  font-weight: 600;
  color: #e30611;
}

.loka-hide {
  position: absolute;
  z-index: 99999;
  background-color: #fffffffc;
  padding: 20px;
  margin: auto;
  display: none;
  width: 100%;
  top: 120px;
  height: 100vh;
}

.loka-akt {
  display: block;
}

.geo {
  width: 1330px;
  margin: auto;
  padding: 30px;
  background: #fff;
  border-radius: 6px;
  height: 80vh;
  overflow-y: scroll;
  position: relative;
}

.reg a {
  padding-left: 5px;
  color: #002d84;
  font-size: 15px;
}

.reg {
  margin-bottom: 25px;
  break-inside: avoid;
}

.scroll {
  width: auto;
  column-count: 4;
}

.reg b {
  font-size: 16px;
  margin-bottom: 7px;
  display: block;
}

.cont {
  column-gap: 10px; /* Если вы хотите добавить промежуток между колонками */
}

.cont-item {
  break-inside: avoid; /* Это предотвращает разбиение элементов между колонками */
}

/* Медиа-запрос для экранов с шириной до 768 пикселей */
@media screen and (max-width: 668px) {
  .cont {
    column-count: 1;
  }
}

/* Медиа-запрос для экранов с шириной от 769 пикселей до 1024 пикселей */
@media screen and (min-width: 670px) and (max-width: 1024px) {
  .cont {
    column-count: 2;
  }
}

/* Медиа-запрос для экранов с шириной от 1025 пикселей до 1200 пикселей */
@media screen and (min-width: 1025px) and (max-width: 1200px) {
  .cont {
    column-count: 3;
  }
}




/* Медиа-запрос для экранов с шириной свыше 1200 пикселей */
@media screen and (min-width: 1201px) {
  .cont {
    column-count: 4;
  }
}




.cont-toggle {
  cursor: pointer;
  font-size: 16px;
  padding: 5px 0;
}

.cont-toggle-link {
  display: none;
  margin-left: 7px;
  font-size: 15px;
  padding: 2px 0;
}

.cont-toggle-link {
color: #0084f9;
}

.cont-toggle-link:hover {
color: #ff1212;
}


.loka_gorod {
  display: block;
  position: absolute;
  background: #fff;
  width: 330px;
  padding: 12px 15px;
  border: solid 1px #ddd;
  border-top: none;
  border-radius: 0 0 5px 5px;
  text-align: left;
}



.loka_input{
  border: solid 1px #ddd;
  border-radius: 5px;
  padding: 10px;
  min-width: 330px;
}



.loka_forma{
  max-width: 380px;
  display: block;
  position: relative;
  padding: 20px;
  background: #fff;
  margin: auto;
  border-radius: 5px;
  border: solid 1px #ddd;
}

#results {
  display: none;
}

.loka_forma_mini {
  max-width: 380px;
  display: block;
  position: relative;
  padding: 20px;
  background: #fff;
  margin: auto;
}

.loka_link {
  font-size: 16px;
  line-height: 1.8;
  color: #145bcc;
}

.loka_link:hover {
  color: #ff1212;
}

.forma-hide {
  position: fixed;
  z-index: 99999;
  background-color: #00000036;
  padding: 20px;
  margin: auto;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: none;
}



.forma-akt {
  display: block;
}

.str {
  display: block;
  margin: 20px 0;
}

.ul-contakt {
  padding-left: 35px;
  margin: 15px 0;
}


.w80{
  max-width: 800px;
  margin: 50px auto;
  background: #fff;
  border-radius: 7px;
  box-shadow: 1px 1px 1px #ddd;
}


.cont-item {
    max-height: 500px; /* Задаем максимальную высоту для элементов списка */
    overflow-y: auto;  /* Добавляем вертикальный скролл при переполнении */
}






/* Стилизация радиокнопок */
#form label {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 15px;
  cursor: pointer;
  font-size: 16px;
  user-select: none;
  margin-top: 10px;
}

#form input[type="radio"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.radiomark {
  position: absolute;
  left: 0;
  top: 2px;
  height: 20px;
  width: 20px;
  background-color: #eee;
  border: 2px solid #ddd;
  border-radius: 50%;
  transition: all 0.3s;
}


#form input:checked ~ .radiomark {
  background-color: #2196F3;
  border-color: #1976D2;
}

.radiomark:after {
  content: "";
  position: absolute;
  display: none;
  left: 4px;
  top: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
}

#form input:checked ~ .radiomark:after {
  display: block;
}

.show-btn:disabled {
  background: #cccccc;
  cursor: not-allowed;
}

.show-btn:disabled:hover {
  background: #cccccc;
}

/* Блок с результатом */
#modal-result {
  padding: 20px;
  font-size: 18px;
}

.main-links {
  text-align: center;
  font-size: 23px;
  padding: 15px;
}


.checkbox-modal h3{
  padding: 5px 3px;
  font-size: 21px;
}

.checkbox-modal .link-group h3 {
  text-align: center;
}


.checkbox-modal .forma{
  padding: 5px;
}




@media screen and (max-width: 701px) {
.top_text {
  display: none;
}
}

.modal-btn-phone {
  background-color: var(--link-color);
  font-size: 18px;
  text-align: center;
  cursor: pointer;
  color: #fff;
  padding: 10px 15px 10px;
  border-radius: 7px;
  transition: background .2s linear,color .2s linear,border .2s linear,box-shadow .2s linear;
  width: 200px;
  margin: auto;
  display: block;
}

.modal-btn-phone:hover {
  background-color: var(--link-color-hover);
  color: #fff;
}



/* Баннер */
.hero-banner {
  background: #fff;
  margin-bottom: 50px;
}

.hero-banner-green {
  background: #90fbbf;
  margin-bottom: 50px;
}

.hero-banner__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

.hero-banner__content {
  max-width: 500px;
}

.hero-banner__title {
  font-size: 36px;
  margin-bottom: 20px;
  line-height: 1.3;
}

.hero-banner__subtitle {
  font-size: 18px;
  margin-bottom: 30px;
  line-height: 1.5;
}

.hero-banner__image {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Мобильная адаптация */
@media (max-width: 768px) {
  .hero-banner__grid {
    grid-template-columns: 1fr;
  }
  
  .hero-banner__image-wrap {
    display: none;
  }
  
  .hero-banner__title {
    font-size: 28px;
  }
}

/* Особенности */
.features-section {
  padding: 80px 0;
}

.features-section__title {
  text-align: center;
  margin-bottom: 50px;
  font-size: 32px;
}

.features-section__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

.features-item {
  text-align: center;
}

.features-item__icon {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
  object-fit: contain;
}

/* Мобильная адаптация */
@media (max-width: 768px) {
  .features-section__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 480px) {
  .features-section__grid {
    grid-template-columns: 1fr;
  }
}

/* Преимущества */
.advantages-section {
  padding: 80px 0;
  background: #fff;
}

.advantages-section__title {
  text-align: center;
  margin-bottom: 50px;
  font-size: 32px;
}

.advantages-section__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.advantage-card__image {
  width: 100%;
  object-fit: cover;
  margin-bottom: 25px;
}


.advantage-card__title {
  text-align: center;
  margin-bottom: 15px;
}

/* Мобильная адаптация */
@media (max-width: 992px) {
  .advantages-section__grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  
  .advantage-card__image {
    height: 200px;
  }
}


/* Блок с изображением и текстом */
.image-text-section {
  padding: 80px 0;
}

.image-text-section__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.image-text-section__image-wrap{
  text-align: center;
  display: block;
}

.image-text-section__image {
  border-radius: 20px;
  margin: auto;
}

.image-text-section__title {
  font-size: 32px;
  margin-bottom: 20px;
}

.image-text-section__text {
  font-size: 18px;
  line-height: 1.6;
}

/* Мобильная адаптация */
@media (max-width: 768px) {
  .image-text-section__grid {
    grid-template-columns: 1fr;
  }
  
  .image-text-section__image-wrap {
    order: -1;
  }
}



/* Все услуги для бизнеса */
.all-services-section {
  padding: 80px 0;
}

.all-services-section__title {
  text-align: center;
  margin-bottom: 50px;
  font-size: 32px;
}

.all-services-section__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

.business-service {
  padding: 30px;
  border-radius: 12px;
  background: #f8f9fa;
  text-align: center;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}

.business-service:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}



.business-service__icon {
  width: 60px;
  height: 60px;
  margin-bottom: 20px;
  object-fit: contain;
}

.business-service__title {
  font-size: 20px;
}

.business-service__text {
  margin-bottom: 20px;
  font-size: 15px;
  text-align: left;
  color: #333;
}

.business-service__button {
  padding: 10px 20px;
  background: #28a745;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.service-tile__head {
  align-items: center;
  display: flex;
  margin-bottom: 16px;
}

.ui-svg-icon {
  display: block;
}

.ui-svg-icon_size_medium {
  height: 32px;
  min-width: 32px;
  width: 32px;
}

.ui-svg-icon_fill_green {
  fill: #00bd58 !important;
}

@media screen and (min-width: 1024px) {
  .megafon-business-service-tile__svg-icon {
    margin-right: 16px;
  }
}

/* Мобильная адаптация */
@media (max-width: 992px) {
  .all-services-section__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .all-services-section__grid {
    grid-template-columns: 1fr;
  }
}



/* 5 блок - Услуги в сетке (исправленная версия) */
.services-grid-section {
  padding: 80px 0;
}

.services-grid-section__title {
  text-align: center;
  margin-bottom: 50px;
  font-size: 32px;
  color: #333;
}

.services-grid-section__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.service-card {
  display: flex;
  flex-direction: column;
  padding: 25px;
  border-radius: 12px;
  background: #f8f9fa;
  text-decoration: none;
  color: #333;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.service-card--main {
  grid-row: span 2;
  background: #e9f5ff;
}

.service-card__title {
  font-size: 24px;
  margin-bottom: 15px;
  color: #000;
}

.service-card__text {
  margin-bottom: 20px;
  color: #666;
  line-height: 1.5;
}

service-card__main-image {
  width: 100%;
  margin-bottom: 10px;
}

.service-card__price-wrapper {
  display: flex;
  align-items: center;
  margin-top: 15px;
}

.service-card__price-icon {
  color: #28a745;
  margin-right: 10px;
  font-weight: bold;
  font-size: 18px;
}

.service-card__price {
  font-weight: bold;
  color: #333;
  font-size: 18px;
}

/* Контейнер для картинки и цены */
.service-card__bottom {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 20px;
}

.service-card__image {
  width: 150px;
}

.service-card__main-image {
  margin-bottom: 20px;
}


/* Адаптация */
@media (max-width: 992px) {
  .services-grid-section__grid {
    grid-template-columns: 1fr;
  }

  .service-card__bottom {
    grid-template-columns: auto 1fr;
  }

  .service-card__image {
    order: -1;
  }


  .service-card--main {
    grid-row: auto;
  }



  .service-card__bottom {
    flex-direction: column;
    align-items: stretch;
  }

  .service-card__image {
    width: 100%;

  }

  .service-card__price-wrapper {
    justify-content: flex-start;
    margin-top: 10px;
  }
}



    .section-toggle {
        display: flex;
        gap: 20px;
    }
    
    .section-toggle a {
        text-decoration: none;
        font-weight: bold;
        border-radius: 5px;
        transition: color 0.3s ease;
    }
    
    .section-toggle a:not(.active) {
        color: #999;
        /*! background-color: #f5f5f5; */
    }
    
    .section-toggle a.active {
        color: #2ecc71;
         /* Зеленый цвет */
    }
    
    .section-toggle a:hover:not(.active) {
        color: #2ecc71;
        background-color: #f5f5f5;
    }
    
    /* Скрываем на мобильных устройствах */
    @media (max-width: 768px) {
        .section-toggle {
            display: none;
        }
    }