/* Общие стили */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
aside, footer, address, section, nav {
  display: block;
}
img, iframe, video, embed {
  max-width: 100%;
}
font {
  font-family: Open Sans;
  font-size: 100%;
}
h1 { font-size: 3em; }
h2 { font-size: 2.5em; }
h3 { font-size: 2em; }
h4 { font-size: 1.5em; }
h5 { font-size: 1.2em; }
p { text-indent: 2em; }
a {
  text-decoration: underline;
  color: #054893;
  cursor: pointer;
}
a:hover { color: #81a1ab; }

/* Главный контейнер */
#page {
  color: #054893;
  font: 100% Open Sans;
  background-color: #fff;
  margin: auto;
}

/* Header */
header {
  max-width: 1280px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1em;
}
.logo, .container, .tel, .send {
  display: inline-block;
}
.logo {
  width: 8%;
}
.container {
  width: 60%;
  text-align: center;
}
.slogan {
  font-size: 1.7em;
  vertical-align: top;
  margin-top: 0.5%;
  text-align: center;
}
.tel {
  width: 20%;
}
.send {
  width: 10%;
  font-size: 1em;
  background-color: #E1AF00;
  text-align: center;
  vertical-align: top;
  margin-top: 2%;
}

/* Main Menu and Social Icons */
.line {
  width: 100%;
  background-color: #3949a0;
}
.mainmenu ul li {
  display: inline-block;
  padding: 1%;
}
.mainmenu {
  display: inline-block;
  width: 70%;
}
.width40 {
  display: inline-block;
  width: 20%;
  padding-left: 5%;
}
.width40 li {
  display: inline-block;
}
.okr {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border-width: 2px;
  border-color: #3949a0;
  margin: 0.3em;
}
.okr img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

/* Блоки контента */
.blok {
  background-color: #3949a0;
  width: 100%;
  vertical-align: top;
  color: #fff;
}
/* Контейнер для всех шагов */
.steps-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Две колонки */
  gap: 20px; /* Расстояние между блоками */
  justify-content: center; /* Центрируем блоки по центру */
}

/* Блоки шагов */
.block {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background-color: hsla(231, 76%, 21%, 1);
  color: #fff;
  padding: 2em;
  width: 100%; /* Занимает всю ширину на маленьких экранах */
  max-width: 450px; /* Максимальная ширина блока */
  border-radius: 10px; /* Добавляем скругление углов */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Добавляем тень для объема */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Анимация при наведении */
}

/* При наведении на блок */
.block:hover {
  transform: translateY(-10px); /* Поднимаем блок */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Увеличиваем тень */
}

/* Заголовки шагов */
.block h5 {
  font-size: 1.2em;
  margin-bottom: 1em;
  color: #ffc600; /* Цвет заголовка */
}

.sec1 {
  background: url(../images/fon1-1.jpg) no-repeat center;
  margin: auto;
}
.fon1 {
  background: rgba(0, 0, 0, 0.7);
}
.cont {
  max-width: 1280px;
  margin: auto;
  text-align: center;
}
.row {
  display: flex;
  flex-wrap: wrap;
  padding: 1em;
}
.box1 {
  position: relative;
  flex: 0 0 30%;
  max-width: 30%;
  background-color: #3949a0;
  color: #fff;
  animation-duration: 1000ms;
  animation-play-state: running;
  animation-name: l-r;
}
@keyframes l-r {
  from { transform: translateX(-100%); }
  to { transform: translateX(0%); }
}
@keyframes r-l {
  from { transform: translateX(+100%); }
  to { transform: translateX(0%); }
}
.ar1 img {
  object-fit: contain;
}
.art1txt {
  text-align: center;
  font-weight: bold;
  font-stretch: ultra-expanded;
}
.offer1 {
  font-size: 2em;
  padding: 1em;
}
.price1 {
  font-size: 3em;
  margin-bottom: 0.5em;
}
.flex {
  display: flex;
  width: 80%;
  margin: auto;
}
.button {
  width: auto;
  max-width: 50%;
  background-color: #ffc600;
  color: #3949a0;
  text-align: center;
  font-weight: bold;
  padding: 0px 10px;
  margin: auto;
  margin-top: 1em;
  margin-bottom: 1em;
}
.button:hover {
  background-color: gray;
  color: #000;
}
.box2 {
  position: relative;
  flex: 0 0 60%;
  max-width: 60%;
  margin-left: 3em;
  padding-left: 1em;
  text-align: left;
  animation-duration: 1000ms;
  animation-play-state: running;
  animation-name: r-l;
}
.offer2 {
  color: rgb(255, 213, 79);
  margin-top: 0.5em;
  margin-bottom: 6%;
}
.offer3 {
  color: #fff;
  margin-bottom: 10%;
  font-size: 1.2em;
}
.box3, .box4, .icon, .icontext, .fingar, .sp3, .col20, .col40, .stroka, .wrapper, .block {
  display: inline-block;
}
.box3 {
  width: 100%;
  margin-bottom: 5em;
}
.icon {
  width: 10%;
}
.icontext {
  max-width: 80%;
}
.fingar {
  color: #fff;
  text-align: center;
}
.gar {
  color: gray;
}
.box4 {
  display: inline-block;
  max-width: 29%;
  background-color: #fff;
  color: #3949a0;
  height: 710px;
  margin: 0.7em;
  text-align: left;
  font-weight: bold;
  padding: 0.5em;
  vertical-align: top;
}
.box4 h4 {
  margin: 1em;
  text-align: center;
  font-weight: bold;
}
.fill-first {
  fill: #3949a0;
}
.fill-second {
  fill: #fff !important;
}
.titles {
  width: 100%;
  background-color: #fff;
  color: #3949a0;
  text-align: center;
  font-weight: bold;
}
.text {
  color: #000;
  font-weight: 100;
  padding: 1em;
}
.text strong {
  color: green;
}
.w-blok {
  background-color: #fff;
  width: 100%;
}
.box5 {
  display: inline-block;
  max-width: 60%;
  vertical-align: top;
  margin-top: 2em;
  text-align: justify;
}
.box5 h3 {
  margin: auto;
  text-align: center !important;
}
.box5 p {
  margin: 1em;
}
.box5 strong {
  text-align: center;
}
.box6 {
  display: inline-block;
  max-width: 40%;
}
.box6 img {
  width: 480px;
  vertical-align: bottom;
  margin-left: 1em;
}
.mission {
  display: inline-block;
  text-align: center;
  background-color: #3949a0;
  color: #fff;
  margin: 1em;
  padding-bottom: 1em;
}
.mission strong {
  color: #ffc600;
  margin: 0 2em;
}
.fifty {
  display: inline-block;
  width: 47%;
  margin: 1%;
  vertical-align: top;
}
#sixty .block {
  height: 400px;
}
#sixty h5 {
  margin-bottom: 2em;
}
.picto {
  display: inline-block;
  max-width: 20%;
}
.blacktxt {
  display: inline-block;
  width: 80%;
  vertical-align: top;
}
.fon {
  max-width: 100%;
  background-color: #3949a0;
  color: #fff;
  margin: 2em 0;
  text-align: center;
  padding: 1em;
}
.fon2 {
  max-width: 100%;
  background-color: #fff;
  color: #3949a0;
  margin: 2em 0;
  text-align: center;
  padding: 1em;
}
.button1 {
  width: auto;
  max-width: 20%;
  background-color: #ffc600;
  color: #3949a0;
  text-align: center;
  font-weight: bold;
  padding: 0px 10px;
  margin: auto;
  margin-top: 1em;
  margin-bottom: 1em;
}
.button1:hover {
  background-color: gray;
  color: #000;
}
.centered {
  
  top: 50%;
  transform: translateY(-50%);
  -webkit-backface-visibility: hidden;
  background-color: transparent !important;
}

.krug {
  background-color: #3949a0;
  border-radius: 50%;
  width: 85px;
  height: 85px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 1em;
  border-width: 5px !important;
  transform: translateX(-96%);
  box-sizing: border-box;
}


.sp1 {
  color: #007bff;
  height: 85px !important;
  width: 85px !important;
  opacity: 0;
  position: absolute !important;
  left: 0;
  top: 0;
  border-radius: 50%;
  background-size: cover !important;
  display: block !important;
  box-sizing: border-box;
}
.sp2 {
  position: relative;
  display: flex !important;
  justify-content: center;
  align-items: center;
  height: 85px !important;
  width: 85px !important;
  opacity: 1;
  background-color: transparent !important;
  box-sizing: border-box;
}
.icon1 {
  z-index: 2;
  box-sizing: border-box;
}

* Изображение внутри круга */
.icon1 img {
  width: 50px;
  height: 50px;
  object-fit: contain;
}

.arttext {
  padding: 1.5em;
  text-align: justify;
  font-size: 0.9em;
  line-height: 1.6; /* Улучшаем читаемость */
  margin-top: auto; /* Выравниваем текст внизу блока */
}
.col20 {
  max-width: 19.5%;
  vertical-align: top;
  margin: 0 2%;
}
.col40 {
  max-width: 39.5%;
  vertical-align: top;
}
footer {
  background-color: #3949a0;
  width: 100%;
  color: #fff;
}
footer a {
  color: #fff;
}
.footer {
  text-align: center;
  padding-bottom: 2%;
}
.sp3 img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}
.sp3 {
  width: 5%;
  margin-bottom: 0.5em;
}
.stroka {
  width: 88%;
  margin-bottom: 0.5em;
  padding-left: 1%;
}
.otstup {
  padding-left: 15%;
}
.debug {
  background-color: #ffc600;
  color: #3949a0;
}
.width60 {
  display: inline-block;
  width: 79%;
}

/* Адаптивность */
@media (max-width: 768px) {
	.krug  {
	display: none;	
	}
	#page {
	max-width: 100vw;
	}
  .row {
    flex-direction: column;
    align-items: center;
  }
  .box1, .box2 {
    max-width: 100%;
    margin: 0;
  }
  .col20, .col40 {
    max-width: 100%;
    margin: 0 auto;
  }
  .fifty {
    width: 100%;
  }
  .block {
    max-width: 100%;
  }
  .steps-container {
    grid-template-columns: 1fr; /* Один блок в строке */
  }
}
/* Адаптивность */
@media (max-width: 1200px) {
  .row {
    flex-direction: column;
    align-items: center;
  }
  .box1, .box2 {
    max-width: 100%;
    margin: 0;
  }
  .col20, .col40 {
    max-width: 100%;
    margin: 0 auto;
  }
  .fifty {
    width: 100%;
  }
  .block {
    max-width: 100%;
  }
}

@media (max-width: 992px) {
	#page {
	max-width: 100vw;
	}
	.krug  {
	display: none;	
	}
  .logo {
    width: 15%;
  }
  .container {
    width: 70%;
  }
  .tel {
    width: 25%;
  }
  .send {
    width: 15%;
  }
  .width40 {
    width: 25%;
  }
  .box4 {
    max-width: 48%;
    height: auto;
  }
  .box5 {
    max-width: 100%;
  }
  .box6 {
    max-width: 100%;
    margin-top: 2em;
  }
  .box6 img {
    width: 100%;
  }
  .mission {
    margin: 1em auto;
  }
  .chat-button {
    width: 114px;
    height: 40px;
    background-size: cover;
    position: fixed;
    bottom: 20px;
    right: 120px;
    cursor: pointer;
    z-index: 1000;
}
}

@media (max-width: 768px) {
	#page {
	max-width: 100vw;
	}
	.krug  {
	display: none;	
	}
  header {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .logo, .container, .tel, .send {
    width: 100%;
    margin: 0.5em 0;
  }
  .line {
    flex-direction: column;
    align-items: center;
  }
  .mainmenu {
    width: 100%;
    text-align: center;
  }
  .width40 {
    width: 100%;
    padding: 1em 0;
  }
  .okr {
    margin: 0.5em;
  }
  .sec1 {
    padding: 1em;
  }
  .box1, .box2 {
    max-width: 100%;
    margin: 1em 0;
  }
  .titles {
    padding: 1em;
  }
  .box4 {
    max-width: 100%;
    margin: 1em 0;
  }
  .w-blok {
    padding: 1em;
  }
  .fifty {
    width: 100%;
    margin: 1em 0;
  }
  .picto {
    max-width: 30%;
  }
  .blacktxt {
    width: 70%;
  }
  footer {
    flex-direction: column;
    align-items: center;
  }
  .col20, .col40 {
    max-width: 100%;
    margin: 1em 0;
  }
  .debug {
    flex-direction: column;
    align-items: center;
  }
}

@media (max-width: 480px) {
	#page {
	max-width: 100vw;
	}
	.krug  {
	display: none;	
	}
  h1 {
    font-size: 2.5em;
  }
  h2 {
    font-size: 2em;
  }
  h3 {
    font-size: 1.7em;
  }
  h4 {
    font-size: 1.3em;
  }
  h5 {
    font-size: 1em;
  }
  .logo {
    width: 25%;
  }
  .container {
    width: 80%;
  }
  .tel {
    width: 100%;
  }
  .send {
    width: 100%;
  }
  .box4 {
    height: auto;
    padding: 1em;
  }
  .box5 {
    padding: 1em;
  }
  .arttext {
    font-size: 0.9em;
  }
  .footer {
    padding: 1em;
  }
  .stroka {
    font-size: 0.9em;
  }
  .chat-button {
    width: 50px;
    height: 50px;
  }
  .chat-window {
    width: 90%;
    max-width: 400px;
  }
}