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

body {
    font-family: Arial, sans-serif;
	background: #f3f3f3;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* --- стиль для обертки --- */
.wrapper {
    max-width: 1200px; /* Максимальная ширина сайта */
    width: 100%;       /* Сайт занимает всю ширину на маленьких экранах */
    margin: 0 auto;     /* Центрируем сайт по горизонтали */
    padding: 0 20px;   /* Небольшие отступы по бокам, чтобы контент не прилипал к краю */
}

/* Шапка */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background-color: #808080;
	font-size: 1.4rem;
    color: #fff;
}

.logo {
    font-size: 1.5rem;
}

/* Навигация */
.nav__list {
    display: flex;
    list-style: none;
    gap: 20px; /* Отступы между ссылками */
}

.nav__link {
    color: #fff;
    text-decoration: none;
    padding: 10px 15px;
    display: block;
}

.nav__link_current_page {
    color: #fff;
    text-decoration: underline;
    padding: 10px 15px;
    display: block;
}

.nav__link:hover {
    background-color: #555;
    border-radius: 4px;
}


/* Иконка бургер */
.burger {
    display: none; /* Скрыта на десктопе */
    flex-direction: column;
    cursor: pointer;
}

.burger span {
    width: 25px;
    height: 3px;
    background-color: #fff;
    margin: 4px 0;
}

/* Основной контейнер (4 блока) */
.container {
    display: flex; /* Главный Flex-контейнер */
    flex-wrap: wrap; /* Перенос блоков на новую строку */
    gap: 20px; /* Отступы между блоками */
    padding: 20px 0;
}

.box {
    flex-basis: calc(50% - 10px); /* Занимают по 50% ширины минус половина отступа (gap) */
                                 /* На мобильных будет 100% */
    
	position:; /* Для позиционирования контента */
	background: #f3f3f3;
    padding: 30px;
    border-radius: ;
    box-shadow: ;
    text-align: center;
    font-size: 1.2rem;
}

.box_text {
    align-self: auto; /* отменяет вертикальное выравнивание для этого элемента */
    text-align: left;  /* стандартное выравнивание текста */
	background: #f3f3f3;
    font-size: 0.9rem;
}

.box_pict {
	display:;
    flex-basis: calc(25% - 25px); /* Занимают по 25% ширины отступ */
                                 /* На мобильных будет 100% */
    
	position:; /* Для позиционирования контента */
	background: #f3f3f3;
    padding: 10px;
    border-radius: ;
    box-shadow: ;
    text-align: center;
    font-size: 1.2rem;
}

.box_100 {
    flex-basis: calc(100% - 10px); /* Занимают по 50% ширины минус половина отступа (gap) */
                                 /* На мобильных будет 100% */
    display: flex;
	position:; /* Для позиционирования контента */
	background: #f3f3f3;
    padding: 30px 0px 30px 0px;
    border-radius: ;
    box-shadow: ;
    text-align: center;
    font-size: ;
}

.box_100_text {
    flex-basis: calc(100% - 10px); /* Занимают по 50% ширины минус половина отступа (gap) */
                                 /* На мобильных будет 100% */
    display: flex;
	position:; /* Для позиционирования контента */
	background: #f3f3f3;
    padding: 30px 0px 0px 30px;
    border-radius: ;
    box-shadow: ;
    text-align: center;
    font-size: ;
}

.box_zagol {
    flex-basis: calc(100% - 10px); /* Занимают по 50% ширины минус половина отступа (gap) */
                                 /* На мобильных будет 100% */
    display:;
	position:; /* Для позиционирования контента */
	background: #f3f3f3;
    padding: 30px;
    border-radius: ;
    box-shadow: ;
    text-align: center;
    font-size: ;
}

.box_40_button {
    flex-basis: calc(40% - 10px); /* Занимают по 50% ширины минус половина отступа (gap) */
                                 /* На мобильных будет 100% */
    
	position:; /* Для позиционирования контента */
	background: #f3f3f3;
    padding: 20px;
    border-radius: ;
    box-shadow: ;
    text-align: center;
    font-size: ;
}

.box_40 {
    flex-basis: calc(40% - 10px); /* Занимают по 50% ширины минус половина отступа (gap) */
                                 /* На мобильных будет 100% */
    display: flex;
	position:; /* Для позиционирования контента */
	background: #f3f3f3;
    padding: 20px;
    border-radius: ;
    box-shadow: ;
    text-align: center;
    font-size: ;
}

.box_30 {
    flex-basis: calc(30% - 10px); /* Занимают по 30% ширины минус отступ */
                                 /* На мобильных будет 100% */
    display: flex;
	position:; /* Для позиционирования контента */
	background: #f3f3f3;
    padding: 20px;
    border-radius: ;
    box-shadow: ;
    text-align: center;
    font-size: ;
}

.box_60 {
    flex-basis: calc(60% - 10px); /* Занимают по 60% ширины минус половина отступа (gap) */
                                 /* На мобильных будет 100% */
    display: flex;
	position:; /* Для позиционирования контента */
	background: #f3f3f3;
    padding: 30px;
    border-radius: ;
    box-shadow: ;
    text-align: ;
    font-size: ;
}

.box_70 {
    flex-basis: calc(70% - 10px); /* Занимают по 70% ширины минус отступ */
                                 /* На мобильных будет 100% */
    display:;
	position:; /* Для позиционирования контента */
	background: #f3f3f3;
    padding: 20px;
    border-radius: ;
    box-shadow: ;
    text-align: center;
    font-size: ;
}

/* Стили для изображения */
.box__image {
    width: ; /* Картинка на всю ширину блока */
    height: auto; /* Сохраняет пропорции */
    display: ;
    border-radius: 8px; /* Скругляет всее углы */
}

.box_pict_image {
    width:; /* Картинка на всю ширину блока */
    height: 300px; /* Сохраняет пропорции */
    display: ;
    border-radius: 8px; /* Скругляет всее углы */
}

 /* адаптивность картинки для любых экранов */

.flex-image {
  max-width: 100%; /* не вылезает за пределы контейнера */
  height: auto;    /* сохраняет пропорции */
  display: block;  /* убирает отступ снизу */
}

.sdvig_img {
        padding: 0px 0px 0px 30px;
     }


/* Контейнер для цены и кнопки (для центрирования) */
.box__content {
    padding: 20px;
    text-align: center; /* Центрирует текст и кнопку */
}

/* Стили для цены */
.box__price {
    margin: 15px 0 20px; /* Отступы сверху и снизу */
    font-size: 1.4rem;
    font-weight: bold;
}

/* Стили для кнопки */
.box__button {
    display: inline-block;
    padding: 12px 25px;
    font-size: 1rem;
    font-weight: bold;
    color: #fff;
    background-color: #333; /* Темный фон */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease; /* Плавное изменение цвета при наведении */
}

.box__button_podr {
    display: inline-block;
	margin-top: 25px; /* сдвиг вниз от текста */
    padding: 12px 25px;
    font-size: 1rem;
    font-weight: bold;
    color: #fff;
    background-color: #FB7820; /* фон */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease; /* Плавное изменение цвета при наведении */
}

.box__button:hover {
    background-color: #555; /* Цвет при наведении */
}

.box__button_podr:hover {
    background-color: #555; /* Цвет при наведении */
}

/* Стили для горизонтальной линии */
.line {
    width: 100%; /* Линия занимает всю ширину контейнера */
    border: none; /* Убираем стандартные границы тега hr */
    height: 3px; /* Высота линии */
    background-color: #e0e0e0; /* Цвет линии */
    margin: 25px 0; /* Отступы сверху и снизу для воздуха */
}

/* Адаптивность */
@media (max-width: 768px) {
    
     /* Блоки занимают всю ширину на мобильных */
     .box {
        flex-basis: 100%;
     }
	 
	 .box_pict {
        flex-basis: 100%;
     }
	 
	 .box_60 {
        flex-basis: 100%;
     }
	 
	 .box_100_text {
        flex-basis: 100%;
     }
	 
	 .box_70 {
        flex-basis: 100%;
     }
	 
	 
	 
     .nav__list {
        display: none; /* Скрываем меню на мобильных */
        width: 100%;
        flex-direction: column; /* Вертикальный список */
        background-color: #333;
        position: absolute; /* Позиционируем поверх контента */
        top: 60px; /* Высота шапки + отступы */
        left: 0;
        right: 0;
        text-align: center;
        padding-top: 20px;
     }

     .nav__list.active { /* Показываем меню при клике на бургер */
        display: flex;
     }

     .burger {
        display: flex; /* Показываем бургер на мобильных */
     }
}

/* Текст */

.dimgray-text 
{
  color: dimgray;
  font-size: 0.9rem;
  line-height: 1.4em;
}

h4
{
  color: ;
  font-size: 1.0rem;
}

.bold-text {
    font-weight: bold; /* или font-weight: 700; */
}

.text_bottom {
    margin-bottom: 20px; /* отступ 20 пикселей снизу */
	margin-top:; /* отступ сверху */
	
}

.footer {
	
	text-align: center;
    padding-top: 15px;
    padding-bottom: 15px;
    margin-left: auto;
    margin-right: auto;
   
   background-color:#808080;
   color:#fff;
   
  
 }
 
 .flag {
	align-self: auto;
	display:inline-block;
	height: 40px;
	padding: ;
 }
 
 /* для списка с описанием */
 
 dl {
    margin-left: 0px; /* отступ слева от других эл-тов */
    padding-left: 0px; /* отступ внутри блока */
	line-height: 1.5em; /* расстояние между строками текста */
  }
 
 dt {
    margin-left: 0px; /* отступ слева от других эл-тов */
    padding-left: 0px; /* отступ внутри блока */
	font-weight: bold; /* или font-weight: 700; */
  }
 
 dd {
    margin-left: 10px; /* отступ слева от других эл-тов */
    padding-left: 0px; /* отступ внутри блока */
  }
  
  
.container_img {
  display: flex;
}
img {
  margin-right: 10px; /* отступ справа, если нужно */
}