@media screen and (max-width: 768px) {
 table, thead, tbody, th, td, tr {
table {width:100%;}
thead {display: block;}
tr:nth-of-type(2n) {background-color: transparent;}
tr:nth-of-type(1n) {background-color: transparent;}
tr td:first-child {background: transparent; font-weight:bold;font-size:1.1em;}
tr th:first-child {font-weight:bold;font-size:1.3em;}
tbody td, tbody th {display: block; text-align:center;}
tbody td, tbody th:before {
content: attr(data-th);
display: block;
text-align: left;
font-size: 16px;
max-width: 100%;          
height: auto;
}
}

@media (max-width: 768px) {
  table, table th, table td {
    background-color: transparent !important; /* Убирает фон */
   /* Или используйте полупрозрачный фон: background-color: rgba(255, 255, 255, 0.5) !important; */
  }
}


 @media (max-width: 768px) {
  /* Скрываем заголовки (необязательно, если используете подписи через data-атрибуты) */
  table thead {
    display: block;
  }

  table, table tbody, table tr, table td {
    display: block;
    width: 100%;
  }

  table tr {
    margin-bottom: 15px; /* Разделяем строки-карточки */
    border: 1px solid #;
 }


 Добавляем названия столбцов перед данными */
  table td::before {
    content: attr(data-label); /* Берет текст из атрибута data-label в HTML */
    position: absolute;
    left: 10px;
    width: 45%;
    font-weight: normal;
    text-align: left;
  }
}


 /*@media (max-width: 768px) {
  p, .your-text-class {
    text-align: left !important; /* Принудительно выравниваем по левому краю */
    hyphens: auto;              /* (Опционально) Добавляет переносы слов для аккуратности */
  }
}


@media (max-width: 768px) {
    .container {
        padding-left: 0;
        padding-right: 0;
        margin: 0;
    }
}


@media (max-width: 768px) {
  .your-div-class {
    margin-left: 0 !important;
    margin-right: 0 !important;
   padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
@media (max-width: 768px) {
    .photo-grid img {
        border-radius: 15px !important; /* Увеличьте значение */
       -webkit-border-radius: 15px !important; /* Для старых iOS */
        overflow: hidden; /* Скрывает фон, вылезающий за углы */
		   }
}


@media (max-width: 768px) {
.photo img { 
  border-radius: 15px !important; /* Увеличьте значение */
        -webkit-border-radius: 15px !important; /* Для старых iOS */
        overflow: hidden; /* Скрывает фон, вылезающий за углы */
    }
}



/* Малые ноутбуки */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  body { font-size: 14px; }
}

/* Стандартные и большие ноутбуки */
@media screen and (min-width: 1025px) {
 body { font-size: 16px; }
}

@media (max-width: 768px) {
   h1 {
        font-size: 1.3rem;; /* Уменьшенный размер для мобильных */
 }
    h2 {
        font-size: 1.3rem;
    }
    h3 {
        font-size: 1.2rem;
    }
    h4 {
       font-size: 1.3rem;
    }
}

@media (max-width: 768px) {
.text-content h4 {
font-size: 1.5rem; /* Пример использования rem */
}
}


@media screen and (orientation: portrait) {
  .body {
    background-color: #fff;
  }
  .container {
    flex-direction: column; /* Элементы друг под другом */
  }
}

/* Альбомная ориентация (Landscape) - при повороте */


@media only screen and (max-width: 900px) and (orientation: landscape) {
   body {
        font-size: 16px;
    }
   h1 {
        font-size: 1.1rem; /* Уменьшенный размер для мобильных */
 }
    h2 {
        font-size: 1.1rem;
    }
    h3 {
        font-size: 1.0rem;
    }
    h4 {
       font-size: 1.0rem;
    }
 .container {
    flex-direction: row; /* Элементы в ряд */
  }
  /* Уменьшение шапки для экономии места */
  header {
    height: 50px;
 }
   .company-name {
font-size: 18px; /* ??? ?????? */
        line-height: 1.1; /* ???????????? ??????????? ???????? */
    }
	 .menu li {
  text-align: center;
  overflow-wrap: break-word;
  font-size: 18px;  /* Можно увеличить шрифт */
	}
	}
	
@media only screen and (max-width: 900px) and (orientation: landscape) {
  .menu li:nth-child(4),
  .menu li:nth-child(5) {
    display: none !important;
  }
}

 

@media screen and (min-width: 800px) and (max-width: 1440px) {
  body {
        font-size: 16px;
    }
   h1 {
        font-size: 1.1rem; /* Уменьшенный размер для мобильных */
 }
    h2 {
        font-size: 1.1rem;
    }
    h3 {
        font-size: 1.0rem;
    }
    h4 {
       font-size: 1.0rem;
    }
 .container {
    flex-direction: row; /* Элементы в ряд */
  }
  /* Уменьшение шапки для экономии места */
  header {
    height: 50px;
 }
   .company-name {
font-size: 18px; /* ??? ?????? */
        line-height: 1.1; /* ???????????? ??????????? ???????? */
    }
	 .menu li {
  text-align: right;
  white-space: nowrap;
  font-size: 18px;  /* Можно увеличить шрифт */
	}
	
}

  
@media only screen and (max-width: 768px) {
    h4, .text-under-photo{
        font-size: 16px !important; /* Увеличьте значение */
        line-height: 1.2;
    }
}

@media only screen and (max-width: 768px) {
.landscape-img {
  width: 100%;               /* Ширина альбома */
  border-radius: 15px;        /* Радиус скругления */
  display: block;
}

@media only screen and (max-width: 768px) {
    h4, .text-content{
        font-size: 19px !important; /* Увеличьте значение */
        line-height: 1.2;
}
}

text-content

/* Мобильная версия */
@media (max-width: 600px) {
   .container {
        flex-direction: column; /* Элементы друг под другом */
    }
    .photo-item img {
        width: 50%; /* Фото меньше */
       margin: 0 auto; /* Центрирование */
    }
    .text {
        width: 100%; /* Текст на всю ширину, то есть больше */
        font-size: 14px; /* Можно увеличить шрифт */
    }
}

* ????????? ?????????? (????????, ?????? 768px) */
@media (max-width: 768px) {
  .logo img {
    width: 15px; /* ??????????? ?????? */
 }
}

 @media (max-width: 768px) {
  .body {
    font-size: 14px; /* ??? ??????, ????????, 14px */
  }
 }
 
@media (max-width: 768px) {
  .text-content {
font-size: 14px; /* ??? ??????, ????????, 14px */
  }
 }
 
 
 @media (max-width: 768px) {
  .text-block {
font-size: 16px; /* ??? ??????, ????????, 14px */
text-align:  left;
  }
 }
 
 
/* ????????? ??? ????????? ????????? (????? 600px) */
@media screen and (max-width: 768px) {
    .menu {
flex-direction: column; /* ???????????? ???????????? */
		
    }
    .menu li {
 text-align: center;
		white-space: nowrap; /* Запрещает перенос строк */
        font-size: 16x; /* Можно увеличить шрифт */
		
}
}

@media (max-width: 768px) {
.menu li:nth-child(4),
  .menu li:nth-child(5) {
    display: none !important;
  }
}


@media (min-width: 1024px) {
    .navbar menu {
        font-size: 10px; /* Уменьшаем размер шрифта */
        }
}

@media only screen and (max-width: 768px) {
  .dropbtn {
    display: block; /* Ссылки в столбик */
    position: relative;
	-webkit-box-shadow: none; /* ??? ????????????? ? Safari */
	background-color: #FFFFFF; /* Цвет фона меню */
    padding: 10px 15px; /* Увеличение зоны нажатия */
	 border-bottom: 1px solid #c7d0cc; /* Линия снизу */
 padding-bottom: 5px; /* Отступ от текста до линии */
	font-size: 16px; /* Размер шрифта */
	  }
}

@media (max-width: 768px) {
.dropbtn {
   	-webkit-box-shadow: none; /* ??? ????????????? ? Safari */
	shadow: none;
    line-height: 0.5; /* ??????????? ???????? */
	right: 0;
    background: none;
  }

}

@media (max-width: 768px) {
.dropdown {
   	-webkit-box-shadow: none; /* ??? ????????????? ? Safari */
	shadow: none;
    line-height: 1.2; /* ??????????? ???????? */
	right: 0;
    background: none;
	word-break: break-all;
}

}

/* Мобильная версия (например, до 768px) */
@media (max-width: 768px) {
  /* Предположим, что подменю - это список ul внутри li */
  .dropdown li:not(:first-child) {
border-top: 1px solid #c7d0cc; /* Линия над каждым пунктом, кроме первого */
  }
}


/* ????? ??? ????????? ????????? (????????, ?? 768px) */
@media (max-width: 768px) {
    .site-header {
        /* ???? ?????, ????? ????? ????? ???????????? ??? ?????? ??? */
        flex-direction: column; 
   align-items: flex-start;
    }
}
	

/* ??? ????????? ????????? ????????? (?????? ?????? 480px) */
@media (max-width: 768px) {
    .company-name {
font-size: 15px; /* ??? ?????? */
        line-height: 1.1; /* ???????????? ??????????? ???????? */
    }
}

/* ????????? ?????????? (????????, ?????? 768px) */
@media (max-width: 768px) {
  .logo img {
    width: 15px; /* ??????????? ?????? */
  }
}

* ?????-?????? ??? ????????? (????????, ?? 768px) */
@media (max-width: 768px) {
  .image-container {
    flex-direction: column; /* ???? ??? ?????? */
    align-items: center; /* ????????????? */
}
}


@media (max-width: 768px) {
  .gallery {
    /* 1 ??????? (??? ???? ???? ?? ??????) */
    grid-template-columns: 1fr;
}
}
/* Десктопные стили без ограничений */
@media screen and (min-width: 1024px) {
    body { width: 100%; }
}


/* Медиа-запрос для планшетов и мобильных устройств */
@media (max-width: 768px) {
    .video-container {
 width: 100%;
    }
    
    /* Дополнительно: фиксация пропорций видео */
    .video-wrapper {
        position: relative;
        padding-bottom: 56.25%; /* 16:9 aspect ratio */
        height: 0;
}
    .video-wrapper video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}



/* Мобильная версия (экран меньше 768px) */

@media (max-width: 768px) {
.dropbtn:visited {
color: #4169e1; /* Цвет посещенной ссылки (например, фиолетовый) */
  }
}


@media (max-width: 768px) {
  .dropdown-content:visited {
    color: #4169e1; /* Цвет посещенной ссылки (например, фиолетовый) */
  }
}


@media (max-width: 768px) {
  .text-under-photo {
    font-size: 0.8em; /* Описание становится крупнее (например, 150% от шрифта) */
    width: 100%; /* Описание занимает 100% ширины, становясь визуально больше */
    text-align: center;
	
  }
}
@media (max-width: 768px) {
  .footer-container {
    flex-direction: column; /* Элементы в один столбец */
    align-items: center; /* Центрирование элементов, если нужно */
    text-align: center; /* Центрирование текста */
  }
  }


}
@media screen and (max-width: 768px) {
.photo-item img {
  width: 200px;       /* ?????? ?? ??????? ????? */
  height: 100px;      /* ?????? ?? ??????? ????? */
  object-fit: fill; /* ????????? ????, ????????? ???????????, ?????? ?????????? */
}
}
@media screen and (max-width: 768px) {
.photo-item2 img {
  display: flex;
  justify-content: center;
  align-items: center;
}


@media screen and (max-width: 768px) {
.photo-item2 img {
  width: 200px;       /* ?????? ?? ??????? ????? */
  height: 100px;      /* ?????? ?? ??????? ????? */
  object-fit: fill; /* ????????? ????, ????????? ???????????, ?????? ?????????? */
   justify-content: center;
  align-items: center;
}
}

@media screen and (max-width: 768px) {
.photo-item img {
  width: 230px;       /* ?????? ?? ??????? ????? */
  height: 160px;      /* ?????? ?? ??????? ????? */
  object-fit: fill; /* ????????? ????, ????????? ???????????, ?????? ?????????? */
   justify-content: center;
  align-items: center;
}
}



@media (max-width: 768px) {
  .footer-bottom p {
    text-align: center;
  }
}


@media (max-width: 768px) {
    .photo-grid {
        margin-left: 0 !important;
        padding-left: 10px !important; /* Небольшой отступ от края экрана, чтобы не прилипало */
        width: 100%; /* Убедитесь, что ширина не превышает экран */
    }
}

@media (max-width: 768px) {
   .photo-grid {
        display: flex;
        flex-direction: column; /* Элементы друг под другом */
        align-items: flex-start; /* Выравнивание по левому краю */
        margin: 0;
        padding: 0;
    }
}