/* Для мобильных телефонов */
@media (max-width: 576px) {
    /* Стили для экранов до 576px (мобильные телефоны) */

:root {
  --main-container: calc(100% - 40px);
  --small-container: calc(100% - 40px);
  --radzel-margin: 70px;
  --radzel-dop: 40px;  
  --offset-content: 32px;
  --offset-small: 24px;
  --offset-mini: 10px;
}

html, body {
    font-size: 16px;
}

h1 {
    font-size: 24px; 
}

h2 {
    font-size: 24px;
}

h3 {
    font-size: 20px;
    line-height: 1.3;
}

p {
    line-height: 1.3;
     margin-bottom: 20px; /* Отступ после каждого абзаца */
}

.hidden-mobile {
    display: none;
}
    
.header-contact, .menu, .header-logo-description, .grid-footer, .cta-div-form-fio, .cta-div-form-fio-dop  {
    display: none;
}

.grid-container-half {
    grid-template-columns: 1fr;
    gap: 0px; /* Расстояние между колонками */
}



.grid-span-3, .grid-span-2, .grid-span-1 {
    grid-column: span 3; 
}


  .grid-container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "line"
      "image"
      "text"
      "button";
    gap: 0px;
  }

  .text-block {
    display: contents;
  }

  .text-block h3 {
    grid-area: title;
    margin-bottom: 8px; /* можно варьировать */
  }
  .text-block .green-line-under {
  grid-area: line;
}

  .text-block .green-line-under {
    margin-bottom: 12px;
  }

  .text-block .p-item {
    grid-area: text;
    margin: 10px 0 10px 0; /* выравнивание между текстом и кнопкой */
  }

  .text-block .btn {
    grid-area: button;
    margin-top: 0;
    margin-left: 0; /* вернёт кнопку влево, если она сместилась */
    margin-bottom: 30px;
  }
  

  
  
  

  .image-block {
    grid-area: image;
  }
  

.grid-img-text {
    grid-template-columns: 40px auto; /* Три столбца по 360px */
    gap: 30px;
     margin-top: 20px;
}

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

.grid-container-cta {
    display: grid;
    grid-template-columns: 1fr;  
    gap: 40px; 
}

.grid-container-two-modal {
    grid-template-columns: 1fr;
    gap: 0px;
}

.grid-container-two {
    grid-template-columns: 1fr;
    gap: 0px;
}

.grid-container-6 {
    grid-template-columns: repeat(3, 1fr); /* Три столбца по 360px */
}


.grid-container-item {
    grid-template-columns: 200px auto; 
    gap: 6px; 
}

.content-gird-5 {
   grid-template-columns: 1fr;
}

.content-gird-foto-3 {
    gap: 12px;
    grid-template-columns: 1fr 1fr; /* Один элемент в строке */
    padding: 15px; 
}

.content-gird-foto-3 p {
    font-size: 14px;
    margin-top: 10px; /* Отступ между изображением и текстом */
}

    
.header {
    display: flex;
    justify-content: space-between; /* распределяет элементы по краям */
    align-items: center; /* вертикальное выравнивание */
    flex-wrap: wrap; /* чтобы элементы не наезжали друг на друга на маленьких экранах */
    margin-top: 10px;
    margin-bottom: 10px;
}


.header-logo-img {
    width: 48px;
    height: 48px;
}

.header-logo-name {
    padding-left: 14px;
    padding-right: 14px;
}

.header-mobile-menu, .footer-mobile {
    display: block;
}


.menu {
    margin-left: auto; /* прижимает меню к правому краю */
}

.menu-left {
    display: flex;
    gap: 20px; /* расстояние между пунктами меню, можно подстроить под вкус */
}

.reviews-img-text {
    grid-template-columns: 1fr; 
    height: auto;
}

.reviews-img-item {
    height: auto;
}

.reviews-text-item {
    height: auto;
}

.cta-div-form {
    padding-left: 0px;
}

.cta-div-form-img {
    background-image: none; /* Убираем фон */
    height: auto; /* Делаем высоту адаптивной */
    background-size: cover; /* Можно использовать cover, если фон всё же нужен */
    background-position: center; /* Центрируем фон */
    overflow: hidden; /* Можно скрыть выходящее содержимое */
}

.faq-item {
    padding: 12px 4px 12px 20px;
    min-height: 40px;
    margin-bottom: 20px;
}

.grid-footer {
    grid-template-columns: 1fr;
}

.hero {
    padding-top: 40px;
    color: #fff;
    background-color: gray;
    height: 100vh;
}

.hero p {
    font-size: 18px;
    line-height: 1.3;
    margin-top: 30px;
    margin-bottom: 50px;
    width: 100%;
}

.about-stats {
    margin-top: 30px;
    gap: 40px;
}

.stat-number {
    font-size: 100px;
}

.stat-text {
    font-size: 16px;
    width: 142px;
}

.fact-container-width {
    display: flex; /* Можно использовать flex вместо grid */
    flex-direction: column; /* Размещаем элементы в столбец */
    width: var(--main-container);
    margin: 0 auto; 
    padding: 0;    
}

.fact-container-text {
}

.fact-container-img {
    width: 94vw;
    margin: 0 auto; 
    padding: 0;  
}

.modal-middle {
    width: var(--main-container);
}

.button-main {
    font-size: 16px;
}

.btn {
    font-size: 16px;
    height: 50px;
    width: 180px;
}

.btn-link {
    font-size: 16px;
    height: 50px;
}

.input__bottom {
    margin-bottom: 10px;
}

.policy {
    gap: 14px;
    line-height: 1.1;
}    

.policy input[type="checkbox"] {
    margin-left: 6px;
}

.footer {
    padding-top: 16px;
}

.grid-footer-mobile {
    display: grid;
    grid-template-columns: 32px auto;
    align-items: center;
    justify-content: start; 
    gap: 15px;
}

.footer-menu-mobile h4 {
    font-size: 18px;
    margin-bottom: 20px;
    text-transform: uppercase;    
}

.footer-copyright {
    height: 70px;
}

.breadcrumbs {
    padding-top: 0;
    padding-bottom: 2;
}

.bg-news {
    background-color: #fff;
}

.p-big {
    font-size: 20px;
}

.p-middle {
    font-size: 24px;
}

.p-link {
    margin-top: -10px;
}

.span-label {
    font-size: 14px;
}

.img-rounded {
    border-radius: 6px;
}

.img-icon-big-twin {
  height: 50px;
  width: 60px; /* фиксируем размер */
}

  
}