*,
*::after,
*::before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  /** {
  outline: 1px solid red !important;
}*/
.clearfix::after,
.header::after,
.grid::after {
    content: "";
    display: table;
    clear: both;
}
html {
    font-size: 100%;
    color: #ffffff;
}
body {
    width: 100%;
    font-family: 'Times', sans-serif;
    font-weight: 300;
    color: #000;
    font-size: 1rem;
    line-height: 1.375;
    margin: 0;
    padding: 0;
    background: #0fffff;
}
p{
    margin: 0;
    padding: 0;
}
h1,h2,h3,h4{
  margin: 0;
  padding: 0;
  font-size: clamp(1.5rem, 4vw + 1rem, 3rem);
  text-align: center; 
  font-weight: normal;
}
  ul,li,ol{
    margin: 0px;
    padding: 0px;
  }
  ul.opportunity{
    padding: 25px;
    text-align: left;
  }
/*.wrapper{   
    width:70%;
    margin: 0 auto; 
    border: 1px solid #0000ff;
}   */
#wrapper{
    max-width: 100%;/*делаем блок на 90% ширины экрана*/
    margin: 0 auto;/*центрируем блок, для этого должна быть задана ширина*/
    background: #375892;
    /*background: #fff;*/
    -webkit-box-shadow: 0 5px 25px rgba(0,0,0,.05);
    box-shadow: 0 5px 25px rgba(0,0,0,.05);
    border: 1px solid white;
    font-size: 25.333px;
}
.inner-content-tovar-grid {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px;
    margin-top: -15px;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    height: 100%;
    border: 1px solid white;
}
.row-header {
    display: flex;
    /*flex-wrap: wrap;*/
    /*margin: 0 -15px;*/
    justify-content: space-around;
    align-items: center;
    border: 1px solid white;
    background: #04276F;
    background: linear-gradient(358deg, rgba(4, 39, 111, 1) 10%, rgba(16, 37, 126, 0.8) 50%, rgba(4, 39, 111, 1) 90%);
}
/*.inner-top-line {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: space-between;
    height: auto;
    font-size: 100%;
    color: #ffffff;
    background: #0079ae;
    margin-bottom: 50px;
}*/
.col-header-image{
    min-height: 190px;
    box-sizing: border-box;
    text-align: center;
    /*width: calc(8.3333% - 30px);*/
    margin: 5px 15px;   
    /*flex-basis: 280px;*/
    /*border: 2px solid;*/
    /*border-color: #7ab1cc;*/
}
.header-image{
    max-width: 100%; /* Картинка не шире родителя */
    height: auto;    /* Сохраняет пропорции */
    display: block;  /* Превращает в блочный элемент */
    margin: 0 auto;  /* Центрирует по горизонтали */
}
.mane-name p{
    margin: 0;
    padding: 0;
    font-size:larger;
    font-weight:bold;
    color: white;
    overflow-wrap: break-word;
}
.second-col-header{
    min-height: 200px;
    box-sizing: border-box;
    text-align: center;
    /*width: calc(8.3333% - 30px);*/
    margin: 5px 15px 5px 5px;  /*новые исправления*/ 
    /*flex-basis: 280px;*/
    /*border: 1px solid white;*/
}
.site_header{
    /*padding-right: 10pt;*/
    font-size: 19pt;
    color: white;
}
.content-row{
    background: #375892;
}
.content-row h1,h2,h3,h4,span,p,ul,li{
  margin: 0px;
  padding: 0px;
  /*padding-left: 10px;*/
  /*padding-right: 8px;*/
  color: #ffffff;
}
/* Базовый стиль для всех ссылок на почту */
a[href^="mailto:"] {
  /*color: #007bff;*/
  color: #ffb800;
  text-decoration: none;
  font-weight: bold;
  transition: color 0.3s ease;
}

/* Эффект при наведении */
a[href^="mailto:"]:hover {
  color: #ffb300;
  text-decoration: underline;
}

/* Добавление иконки конверта перед текстом */
a[href^="mailto:"]::before {
  content: "\1F4E7"; /* Юникод символ конверта */
  padding-right: 8px;
  font-size: 1.2em;
  vertical-align: middle;
}
 .content-row{
    margin-left: 10px;
    margin-right: 10px;
    padding-left: 10px;
    padding-right: 10px;
  }
  .content-row p{
    text-indent: 15px;
  }
  .refund li p{
    text-indent: 15px;
  }
/*================Контейнер для названия оператора и иконок============================*/
.phone-operator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 5px;
}
.operator-name {
    font-size: 0.85rem;
    font-weight: bold;
    color: #ffffff;
}

/* Сетка для иконок */
.messenger-icons {
    display: flex;
    gap: 8px;
}

.messenger-icons a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 16px;
    color: #fff !important; /* Перебиваем общие стили ссылок */
    text-decoration: none;
    transition: transform 0.2s, filter 0.2s;
}

.messenger-icons a:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
}
/* Описание анимации пульсации */
@keyframes pulse-red {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(227, 6, 19, 0.7);
    }
    70% {
        transform: scale(1.1);
        box-shadow: 0 0 0 10px rgba(227, 6, 19, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(227, 6, 19, 0);
    }
}

/* Применяем анимацию только при наведении на иконку МТС */
.icon-mts:hover {
    animation: pulse-red 1.5s infinite; /* Анимация будет повторяться бесконечно, пока наведен курсор */
    transform: translateY(0); /* Отменяем стандартный подъем, чтобы не мешать пульсации */
}

/* Цвета мессенджеров */
.icon-mts { background-color: #e30613; } /* Фирменный красный МТС */
.icon-viber { background-color: #7360f2; }
.icon-whatsapp { background-color: #25d366; }
.icon-telegram { background-color: #0088cc; }

/* Убираем лишние отступы у абзацев в сайдбаре, если они мешают */
.phone-number p { margin: 0; }
/*=============================Мы в соцсетях============================================*/
/*генератор кнопок соцсетей: https://kalk.top/g/social-buttons*/
.social-block{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    margin-top: 10px;
    display: flex;
    align-items: center;  
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.social-block p {
  margin-right: 6px;
  font-size: 19px;
  color: white;
}
.social {display: inline-block;}
.social a {
  display: block;
  width: 40px;
  height: 40px;
  margin: 0 8px 0px 0;
  text-align: center;
  color: #fff;
  border: 1px solid #ccc;
  border-radius: 24px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}
.social a:hover {
  border-color: #888;
  opacity: .8;
}
.social svg {
  margin-top: 5px;
  width: 28px;
  height: 28px;
}
.odnoklassniki a {background: #f93}
.telegram a {background: #249bd7}
.vk a {background: #4a76a8}
.youtube a {background: #c4302b}
/*===========================конец стиля мы в соцсетях==================================*/
/*==============кнопка для грждан===================================*/
.btn-for-citizen {
  /* Базовые стили */
  display: inline-block;
  padding: 10px 10px;
  margin-top: 10px;
  margin-bottom: 5px;
  margin-left: 15px;
  margin-right: 15px;
  /*background-color: #007bff; *//* Основной синий цвет */
  background-color: #FFB800;
  color: #ffffff; /* Цвет текста */
  text-decoration: none; /* Убираем подчеркивание ссылки */
  font-family: Arial, sans-serif;
  font-size: 18px;
  font-weight: bold;
  border-radius: 6px; /* Скругление углов */
  transition: all 0.3s ease; /* Плавность анимации */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Легкая тень */
}
/*================конец стилей кнопки для граждан==========================================*/
/*============================кнопка Подать заявку=====================================*/
.btn-apply {
  /* Базовые стили */
  display: inline-block;
  padding: 10px 10px;
  margin-top: 10px;
  margin-bottom: 5px;
  /*background-color: #007bff; *//* Основной синий цвет */
  background-color: #FFB800;
  color: #ffffff; /* Цвет текста */
  text-decoration: none; /* Убираем подчеркивание ссылки */
  font-family: Arial, sans-serif;
  font-weight: bold;
  border-radius: 8px; /* Скругление углов */
  transition: all 0.3s ease; /* Плавность анимации */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Легкая тень */
}

/* Эффект при наведении курсора */
.btn-apply:hover {
  /*background-color: #0056b3; *//* Цвет становится темнее */
  background-color: #E6A600;
  transform: translateY(-2px); /* Кнопка слегка "подпрыгивает" */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* Тень усиливается */
}

/* Эффект при нажатии */
.btn-apply:active {
  transform: translateY(0); /* Возвращается на место */
}
/*==============конец стилей кнопки Подать заявку========================================*/
/*============контент индексной страницы=================================================*/
.navigation-row {
    display: flex;
    align-items: stretch;
    /*flex-wrap: wrap;*/
    /*margin: 0 -15px;*/
    justify-content: space-around;
    /*border: 1px solid white;*/
    color: white;
    background: #375892;
}
.main-content-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;/* Отступ между сайдбаром и контентом */
    align-items: flex-start;/* Чтобы сайдбар не растягивался по высоте контента */
    margin: 0 auto;
    max-width: 1200px; /* Установите ширину вашего макета */
    width: 100%;       /* Чтобы блок сужался на мобильных */
    box-sizing: border-box; /* Чтобы gap не распирал блок */
}
.possibility-sidebar{
    flex: 0 0 300px;
    align-items: stretch;
    height: 330px;
    box-sizing: border-box;
    text-align: center;
    /*width: 288px;*/
    /*width: calc(8.3333% - 30px);*/
    margin: 5px 15px;
    /*padding-right: 5px;   *//*новый стиль*/
    /*flex-basis: 280px;*/
    border: 2px solid white;
}
.possibility-sidebar a {
    text-decoration: none;
    color: white;
    font-weight: bold;
}
/* Основной контейнер */
  .container-registration {
    display: flex;
    flex: 1;
    min-width: 300px;
    /*max-width: 880px;*/
    flex-direction: column; /* Элементы идут друг под другом */
    gap: 10px;/* Расстояние между блоками */
    margin: 5px 15px;
    /*border: 2px solid white;*/
  }
section.online-registration{
   margin: 5px 10px;
   border: 2px solid white;
}
section.online-registration p{
  text-indent: 15px;
  margin: 0px 5px 0px 5px;
}
section.online-registration h1{
  color: white;
}
/* Контейнер для двух нижних блоков */
.bottom-wrapper {
    display: flex;
    flex-wrap: wrap; /* Позволяет блокам падать друг под друга на узких экранах */
    gap: 10px;
    /*border: 2px solid white;*/
    width: 100%;
    box-sizing: border-box;
}
.possibility{
    flex: 1;
    align-items: stretch;
    min-height: 200px;
    box-sizing: border-box;
    text-align: center;
    /*width: calc(8.3333% - 30px);*/
    margin: 5px 15px;
    /*padding-right: 5px;   *//*новый стиль*/
    /*flex-basis: 280px;*/
    border: 2px solid white;
}
.possibility p{
  margin: 0px 5px 0px 5px;
}
.list{
    /*display: block;*/
    text-align: left;
}
.online-registration-header p{
  text-indent: 15px;
  margin: 0px 5px 0px 5px;
}
}
/*============конец стилей контента индексной страницы=================================================*/
/*.online-registration-header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    /*flex-wrap: wrap;*/
    /*margin: 0 -15px;*/
    justify-content: space-around;
    /*border: 1px solid white;*/
    color: white;
    background: #375892;
}*/

/*.second-block-header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    /*flex-wrap: wrap;*/
    /*margin: 0 -15px;*/
    justify-content: space-around;
    /*border: 1px solid white;*/
    color: white;
    background: #375892;
}*/

/*.sheath{
    flex: 1;
    align-items: stretch;
    min-height: 200px;
    box-sizing: border-box;
    text-align: center;
    /*width: calc(8.3333% - 30px);*/
    margin: 5px 15px;
    /*padding-right: 5px;   *//*новый стиль*/
    /*flex-basis: 280px;*/
    border: 2px solid white;
}*/
/*.online-registration{
     margin: 5px 15px;
    border: 2px solid white;
}*/


  /* Первый блок на всю ширину */
  /*.header-block {
    margin: 5px 15px;
    border: 2px solid white;
  }*/
  /* Два блока рядом */
  /*.side-block {
    flex: 1; /* Равномерно делят ширину */
    padding: 20px;
    margin: 5px 15px;
    border: 2px solid white;
  }*/
/*p.phone-operator{
   display: inline; 
   color: white;
    font-weight: bold;
    font-size: 28px;
}*/
/*.possibility a {
    text-decoration: none;
    color: white;
    font-weight: bold;
    font-size: 28px;
}

.possibility p{
   display: inline;
   margin: 0 auto; 
   color: white;
    font-weight: bold;
    font-size: 28px;
}
.possibility-sidebar p{
   display: inline;
   margin: 0 auto; 
   color: white;
    font-weight: bold;
    font-size: 28px;
}

.menu-row {
    display: flex;
    flex-wrap: wrap;
    /*margin: 0 -15px;*//*новый стиль*/
    justify-content: center;
    border: 1px solid white;
    background: #04276F;
}*/
/*Адаптируем  меню при разрешении экрана 992px*/
@media all and (max-width: 992px) {
    .possibility a {
    font-size: 26px;
}
    .possibility p {
    font-size: 26px;
}

}
@media all and (max-width: 768px) {
img.header-image{
    display: none;
    }
    .row-header {
    display: flex;
    /* flex-wrap: wrap; */
    /* margin: 0 -15px; */
    justify-content: center;
    align-items: center;
    margin: 0px;
    border: 1px solid white;
    background: #04276F;
    background: linear-gradient(358deg, rgba(4, 39, 111, 1) 10%, rgba(16, 37, 126, 0.8) 50%, rgba(4, 39, 111, 1) 90%);
}
.second-row-header{
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0px;
    }
}
/*------------------------------------------------------------------------------------Меню-----------------------------------------------------*/
.page_cell_menu{
  /*max-width: 1200px;*/
  margin: 10px auto;
  padding: 0;
  background: #375892;
  /*border: 1px solid white;*/
}
.menu{
  /*margin: 0;*/
  margin-left: 10px;
  margin-right: 10px;
  padding: 0;
  cursor: pointer;
}
/*Убираем маркеры у списков*/
ul{
  /*list-style: none;*/
}
.ul-class{
  margin: 0;
  padding: 0;
}
.li-class{
  margin: 0;
  padding: 0;
}
.p-class{
  margin: 0;
  padding: 0;
}
/*Делаем изображения в размер */
.menu ul li a img {
    display: none;
    margin: 0;
    padding-left: 5px;
    max-width: 18px;
    height: auto;  
}
/*Делаем невидимой радиокнопку и лэйбл субменю*/
.menu [type="checkbox"],
.menu label.toggleSubmenu {
  display: none;
}

.menu label.togglemenu {
  display: none;
  padding: 10px;
    /*padding-left: 10px;/*с отступом в 10 px*/ */
    align-items: center;/*Выравниваем содержимое ячеек по вертикали*/
  /*display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: flex-start;
  -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;*/
    width: 110px;
    height: 60px;
    /*margin-left: 30px;*//*новый стиль*/
    margin-top: 5px;
    margin-right: 30px;
    margin-bottom: 5px;
    color: #ffffff;
    font-weight: bold;
    background: #375892;
    border-radius: 5px;
    cursor: pointer;
}
.menu label.toggleMenu .fa{
 position: absolute;
 top: 15px;
 left: 12px;
}
/* Подключаем и позиционируем изображение «гамбургер»(fa-bars)*/
nav label img{
  margin: 0px;
  padding: 0px;
  max-width: 40px;
  height: auto;
  padding-right: 8px;
  -webkit-filter: brightness(10);
}
/*Делаем меню горизонтальным*/
.menu > ul{
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;/*Делаем меню горизонтальным*/
  justify-content: center;/*Отцентрируем списки */
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
}
.menu > ul li {
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  text-align: center;
  position: relative;
  list-style: none;
  border: 1px solid white;
}
/*Стилизуем содержимое ячеек*/
.menu ul li a {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;/*Делаем содержимое кнопок меню горизонтальным*/
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;/*Выравниваем содержимое ячеек по горизонтали*/
  align-items: center;/*Выравниваем содержимое ячеек по вертикали*/
  text-decoration: none;
  color: #ffffff;
  transition: all 0.3s ease;/*Плавное исчезновение*/
}
/*Делаем шрифт при наведении на текст меню красным*/
.menu ul li a:hover{
  color: #f44336;
}
/*Запрещаем перенос слов  и делаем отступы от текста в ячейках главного меню*/
.menu ul li a p {
  white-space: pre;
  padding: 1.3rem;
}
.menu > ul li > a i.fa{
 position: absolute;
 top: 15px;
 left: 12px;
 font-size: 18px;
}
.menu ul li ul{
  z-index: 9999;
}
/*АНИМИРУЕМ МЕНЮ*/
/*стилизуем ячейки меню при наведении*/
.menu li a:hover {
  transition: all 0.3s ease;/*плавное появление*/
}
/*Делаем кнопки белыми при наведении*/
.menu li a:hover > img{
 -webkit-filter: brightness(10);
}
/*П О Д М Е Н Ю */
/*позиционируем и делаем невидимым подменю*/
.menu li ul {
  position: absolute;
  min-width: 280px;
  display: none;
  background: #ffffff;
  border: 1px solid #c7c8ca;
}
/*позиционируем текст подменю слева с отступом*/
.menu ul li ul li a {
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  padding-left: 7px;
  padding-top: 10px;
  padding-bottom: 10px;
}
/*позиционируем подменю 2 уровня и сдвигаем его вправо*/
.menu li > ul li ul {
  position: absolute;
  right: -280px;
  top: 0;
}
/*делаем видимым подменю при наведении*/
.menu li:hover > ul {
  display: block;
  position: absolute;
}
/*Адаптация меню 1 порядка на 1310px*/
@media screen and (max-width: 1310px) {   
  .menu > ul {
    font-size: 75%;
  }
  /*позиционируем и делаем невидимым подменю*/
.menu li ul {
  position: absolute;
  min-width: 290px;
  display: none;
  border: 1px solid #c7c8ca;
}
.menu ul li ul{
  z-index: 9999;
}
/*позиционируем подменю 2 уровня*/
.menu li ul > li ul {
  position: absolute;
  right: -290px;
  top: 0;
}
}
/*Адаптируем  меню при разрешении экрана 1062px*/
@media all and (max-width: 1062px) {
.menu ul li a p {
    white-space: pre;
    padding: 0.8rem
}
}
/*Адаптируем  меню при разрешении экрана 992px*/
@media all and (max-width: 992px) {
.menu-row{
    display: flex;
    justify-content: flex-start;
}
.page_cell_menu{
    display: block;
    margin: 6px 18px;
    padding: 0px;
    border: 1px solid white;
}
  .menu {
    overflow: hidden;/* Отображается только область внутри элемента, остальное будет скрыто.*/
/*Свойство overflow управляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров.*/
margin: 0;
}
/*Делаем меню блочным на маленьком экране*/
/*.page__row{
  margin-left: 15px;
}*/
/*Пропишем display: none; для списка в медиазапросе*/
.menu ul{
  /*display: none;*/
  display: block;
  max-height: 0;
  transition: max-height 0.3s;
  -webkit-transition: max-height 0.3s;
  -o-transition: max-height 0.3s;

}
/*Стилизуем содержимое ячеек*/
.menu ul li a {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;/*Делаем содержимое кнопок меню горизонтальным*/
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;/*Выравниваем содержимое ячеек по горизонтали*/
          align-items: center;/*Выравниваем содержимое ячеек по вертикали*/
  border-right: 1px solid #b2b3b5;
  border-right: 1px solid #c7c8ca;
  background: rgb 201, 201, 201;
  background-image: #f6f6f6 2%, #c4c5c7 98%, #757577 100%;
  background-image: -o-linear-gradient(#c9c9c9 0%, #f6f6f6 2%, #c4c5c7 98%, #757577 100%);
  background-image: -webkit-linear-gradient(#c9c9c9 0%, #f6f6f6 2%, #c4c5c7 98%, #757577 100%);
  background-image: -o-linear-gradient(#c9c9c9 0%, #f6f6f6 2%, #c4c5c7 98%, #757577 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#c9c9c9), color-stop(2%, #f6f6f6), color-stop(98%, #c4c5c7), to(#757577));
  background-image: linear-gradient(#c9c9c9 0%, #f6f6f6 2%, #c4c5c7 98%, #757577 100%);
  background: -webkit-gradient(linear, left top, left bottom, from(#c9c9c9), color-stop(2%, #f6f6f6), color-stop(98%, #c4c5c7), to(#757577));
  background: -webkit-linear-gradient(#c9c9c9 0%, #f6f6f6 2%, #c4c5c7 98%, #757577 100%);
  background: -o-linear-gradient(#c9c9c9 0%, #f6f6f6 2%, #c4c5c7 98%, #757577 100%);
  background: linear-gradient(#c9c9c9 0%, #f6f6f6 2%, #c4c5c7 98%, #757577 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9c9c9', endColorstr='#757577',GradientType=0 );
  padding: 5px 0 5px 0;
  text-decoration: none;
  color: #454547;
  /*color: #000000;*/
  transition: all 0.3s ease;/*Плавное исчезновение*/
   cursor: pointer;
}
/*Делаем шрифт при наведении на текст меню красным*/
.menu ul li a:hover{
  color: #ffffff;
  background: #e0e1e5;
  background: -webkit-linear-gradient(top, #e0e1e5 0%, #454547 2%, #454547 98%, #e0e1e5 100%);
  background: -webkit-gradient(linear, left top, left bottom, from(#e0e1e5), color-stop(2%, #454547), color-stop(98%, #454547), to(#e0e1e5));
  background: -o-linear-gradient(top, #e0e1e5 0%, #454547 2%, #454547 98%, #e0e1e5 100%);
  background: linear-gradient(to bottom, #e0e1e5 0%, #454547 2%, #454547 98%, #e0e1e5 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0e1e5', endColorstr='#e0e1e5',GradientType=0 );
  color: #ffffff;
  -webkit-box-shadow: 1px 5px 10px -5px black;
          box-shadow: 1px 5px 10px -5px black;
          transition: all 0.3s ease;/*плавное появление*/
}
/*Запрещаем перенос слов  и делаем отступы от текста в ячейках главного меню*/
.menu ul li a p {
  padding: 5px;
  white-space: pre;
   color: #454547;
}
.menu ul li ul{
  z-index: 0000;
}
/*Позиционирование пунктов подменю второй вложенности*/
  .menu li > ul li ul {
    position: absolute;
    right: auto;
    top: auto;
  }
/* Стилизуем кнопку label. Код напишем выше медиазапросов, чтобы эти стили применялись изначально, когда страница загружается:
*/
.menu label.togglemenu {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  cursor: pointer;
}
  /*Стилизация лэйбла  кнопки  меню при щелчке*/
  input.togglemenu:checked + label.togglemenu {
    color: #fff;
  }
  /*Стилизация гамбургера при щелчке*/
   input.togglemenu:checked +  label.togglemenu img{
    -webkit-filter: brightness(10);
  }
  /*Раскрытие главного меню при нажатии на кнопку -  отбираем щелчек по кнопке */
  input.togglemenu:checked ~ ul,
  input.toggleSubmenu:checked ~ ul {
    display: block;
    position: relative;
    max-height: 5000px;
    -webkit-transition: max-height 2s ease-in;
    -o-transition: max-height 2s ease-in;
    transition: max-height 2s ease-in;
  }
.menu ul li a{
  justify-content: flex-start;
  -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
     -ms-flex-pack: start;
     padding-left: 10px;/*с отступом в 10 px*/ 
    cursor: pointer; 
}
/*ВЛОЖЕННЫЕ ПУНКЫ*/
/*2. Отображаем пункты по щелчку. Для этого отбираем label  в Submenu:*/
.menu label.toggleSubmenu {
   position: absolute;/*Позиционируем абсолютно*/
   top: 0;/*с нулевыми значениями*/
   right: 0;/*с нулевыми значениями*/
   width: 100%;/*растягиваем на всю ширину*/
   height: 100%;/*делаем максимальной высоту*/
   cursor: pointer;/*курсор-рука*/
   display: block;/*делаем блочным*/
  }
    /*Изменение цвета кнопкок подменю при нажатии на маленьком экране*/
  input.toggleSubmenu:checked ~ a {
    background: #454547;
    color: #fff;
  }
  /*меняем цвет картенки при нажатии на кнопки меню на маленьком экране*/
 input.toggleSubmenu:checked ~ a img{
    -webkit-filter: brightness(10);
  }
.menu ul li a img {
    display: block;
    margin: 0;
    padding-left: 5px;
    max-width: 25px;
    height: auto; 
     cursor: pointer; 
}

/*ВЛОЖЕННЫЕ ПОДПУНКЫ*/
.menu label.toggleSubmenu .fa:before{
  content: "\f0d7";
  color: #454547;
 }
 .menu label.toggleSubmenu .fa{
  position: absolute;
  top: 15px;
  right: 30px;
 }
.menu input.toggleSubmenu:checked ~ label.toggleSubmenu .fa::before{
  content: "\f0d8";
  color: #ffffff;
 }
}
#block-step{
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    word-wrap: break-word;
    margin-left: 15px;
    margin-right: 15px;
} 
=======================конец стилей меню======================================

.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
    justify-content: center;
    border: 1px solid black;
    background: #ccc;
}
.col{
    min-height: 200px;
    box-sizing: border-box;
    text-align: center;
    background: #999;
    /*width: calc(8.3333% - 30px);*/
    margin: 5px 15px;   
    /*flex-basis: 280px;*/
    border: 2px solid white;
}
/*Стили формы оплаты*/
.payment-form{
  font-family: 'Segoe UI', Arial, sans-serif;
  font-size: 1rem;
  max-width: 550px;
  margin: 20px auto; 
  padding: 30px; 
  border: 1px solid #e0e0e0; 
  border-radius: 15px; 
  background-color: #ffffff; 
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}
/*footer*/
.site-footer {
    background-color: #122b5e/*#1a1a1a*/ /*#f8f9fa*/;
    color: #fff;
    padding: 40px 20px 20px;
    font-family: Arial, sans-serif;
    border-top: 1px solid #e1e1e1;
    font-size: 14px;
    line-height: 1.6;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

.footer-section h4 {
    font-size: 16px;
    margin-bottom: 15px;
    color: #fff;
    text-transform: uppercase;
}

.footer-section ul {
    list-style: none;
    padding: 0;
}

.footer-section ul li {
    margin-bottom: 8px;
}

.footer-section ul li a {
    text-decoration: none;
    color: #0056b3;
    cursor: pointer;
}

.footer-section ul li a:hover {
    text-decoration: underline;
}

/* Стили для логотипов */
.payment-logos {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-top: 10px;
}

.payment-logos img {
    height: 30px; /* Высота логотипов для единообразия */
    width: auto;
    filter: grayscale(20%);
    transition: filter 0.3s;
}

.payment-logos img:hover {
    filter: grayscale(0%);
}

.payment-note {
    font-size: 12px;
    margin-top: 10px;
    color: #666;
}

.footer-bottom {
    text-align: center;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #ddd;
    font-size: 12px;
    color: #888;
}
.webpay-bg {
    background-color: white;
    padding: 5px; /* отступ, чтобы лого не прилипало к краям */
    border-radius: 4px; /* по желанию: скругление углов */
  }

@media (max-width: 768px) {
    .footer-container {
        grid-template-columns: 1fr;
    }
}
============/*стили договора оферты*/=================================
/* Обнуляем стандартную нумерацию для всех списков внутри договора */
ol.dogovor, ol.dogovor ol {
  list-style-type: none;
  counter-reset: item; /* Создаем локальный счетчик для каждого уровня */
  padding-left: 25px;  /* Отступ для вложенности */
}

ol.dogovor li {
  margin: 8px 0;
  display: table; /* Чтобы номер и текст не слипались при переносе строк */
}

ol.dogovor li::before {
  /* Главная магия: counters (во множественном числе) собирает номера всех предков */
  content: counters(item, ".") ". "; 
  counter-increment: item; /* Увеличиваем счетчик именно этого уровня */
  
  font-weight: bold;
  display: table-cell;
  padding-right: 10px;
  white-space: nowrap;
}
/*конец стилей договора оферы*/

=======================адаптированные стили------------------------------------
.content-row{
   display: flex;
    flex-wrap: wrap;
    /*margin: 0 -15px;*/
    justify-content: center;
    border: 1px solid black;
    /*background: #ffffff;*/
    background: #375892;
}
.refund li{
  margin-left: 40px;
}
@media all and (max-width: 992px) {
  .content-row{
    margin-left: 10px;
    margin-right: 10px;
    padding-left: 10px;
    padding-right: 10px;
  }
  .menu > ul li {
  border: 1px solid white;
}
}
@media all and (max-width: 965px) {
  .site_header{
    font-size: large;
  }
}
@media all and (max-width: 810px) {
  .mane-name p {
    font-size: 28px;
  }
}
@media all and (max-width: 680px) {
  .possibility-sidebar{
    flex: 1;
    flex-basis: 100%;
  }
}
@media all and (max-width: 480px) {
  .mane-name p {
    font-size: 20px;
}
  .social-block p {
    font-size: 14px;
}

}
@media all and (max-width: 380px) {
 .social a {
    display: block;
    width: 32px;
    height: 32px;
    margin: 0 5px 0px 0;
}
.social svg {
  margin-top: 5px;
  width: 22px;
  height: 22px;
}
}
@media all and (max-width: 360px) {
.possibility-sidebar {
    min-height: 330px;
  }
  .navigation-row{
    flex-direction: column;
  }
}