/* Reset CSS */

@font-face {
	font-family: 'PalatinoLinotype-Roman';
	src: url('fonts/PalatinoLinotype-Roman.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

html {
	margin: 0; /* Отступы наружи блока */
	padding: 0; /* Отступы внутри блока */
}

body  {
	margin: 0; /* Отступы наружи блока */
	padding: 0; /* Отступы внутри блока */
	text-align: center;  /* Центрируем все объекты по центру  */
	font-family: 'PalatinoLinotype-Roman';
}
/* ***************************************************************** */
/* *** начало Шапка сайта ****************************************** */
/* ***************************************************************** */
#logocompany {
	float: left;
	border: 1px solid #000; /* Устанавливаем границу в 1 пиксель */
	width: 100px;
	height: 100px; /* Высота во весь экран 100vh*/	
}
#namecompany {
	float: left;
	border: 1px solid #000; 
	margin: 15px; 
	padding: 10px; 
	
	font-size: 34px; 
	font-weight: bold;
 	font-style: italic; 
	font-family: Palatino, Verdana, Montserrat, Arial, sans-serif; 
	color: #000; 
}
#telcompany {
	float: right; /* float: left; */
	border: 1px solid #000;
	margin: 15px; 
	padding: 10px; 
	
	font-size: 34px; 
	font-weight: bold; 
  	font-style: italic; 
	font-family: Palatino, Verdana, Montserrat, Arial, sans-serif;
	color: #000; 
}
#color-hapka {
	border: 1px solid #000; 
	/* background-color: #000105; */
}
/* ***************************************************************** */
/* *** конец Шапка сайта ******************************************* */
/* ***************************************************************** */

.container {
	border: 0px solid #00A2E8; 
	width: 1200px;
	text-align: center;
	margin-left: auto;
  	margin-right: auto;
}

#header {
	border: 0px solid black;
}
/*
#logocompany {
	float: left;
	margin: 0;
    padding: 0;
	width: 50px; 
	height: 50px; 
}
#namecompany {
	float: left;
	margin: 10px;
    padding: 0;
	font-size: 24px;
}
#telcompany {
	float: left;
	margin: 10px;
    padding: 0;
	font-size: 24px;
}
 */
/* Настройка меню сайта *********************************************** */
* { 			/*	Селектор * применяется ко всем элементам на странице. */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.container_menu {
	border: 1px solid black; /* Граница шириной 1 пиксель, сплошная линия, черного цвета */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
}
.menu {
	border: 0px solid black; /* Граница шириной 1 пиксель, сплошная линия, черного цвета */
    list-style: none;
    display: flex;	
}
.menu li {
	border: 1px solid black; /* Граница шириной 1 пиксель, сплошная линия, черного цвета */
	padding: 0 20px; /* Отступы внутри блока */
	font-size: 24px;
    /* margin-bottom: 10px; Добавляем отступ между пунктами меню */
}
.menu a {
    text-decoration: none;
    color: #333;
    font-size: 18px;
}
.menu-toggle {
    display: none;
}
.menu-icon {
    font-size: 24px;
    cursor: pointer;
	display: none; /* Делаем невидимым при отображении на ПК*/
}
/* Конец Настройки меню сайта ***************************************** */


.offer {
	border: 1px solid black; /* Граница шириной 1 пиксель, сплошная линия, черного цвета */
	width: 100%; /* Ширина контейнера */
	/* height: 50px; Установка высоты */
	
	
	/* height: 70vh; 100% от высоты вьюпорта */
}
.kontakt {
	border: 1px solid black; /* Граница шириной 1 пиксель, сплошная линия, черного цвета */
	width: 100%; /* Ширина контейнера */
	height: 70vh; 
}


/* ********************************************************************************************* */
/* Начало Кода кнопки tel-button	 *********************************************************** */
/* ********************************************************************************************* */
.tel-button {		
	margin: 0px 20px 0px 20px; /* Отступы по умолчанию */
	padding: 15px 20px; /* Отступы вокруг текста */
	width: 200px;
	border: 1px solid #f1f1f1;
	background-color: #000; /* Цвет фона */
	color: white; /* Цвет текста */
	border-radius: 5px; /* Скругляем углы */
	display: inline-block; /* Делаем кнопку блочно-строчным элементом */
	font-size: 16px; /* Размер шрифта */
	font-weight: bold; /* Делает текст жирным */
	text-align: center;
	text-decoration: none;
}
/* При наведении */
.tel-button:hover {
	background-color: #fff; /* Цвет фона */
	color: #000; /* Цвет текста */
	text-decoration: none;
}
/* При нажатии */
.tel-button:active {
  	background-color: #f1f1f1; /* Еще темнозеленый цвет фона */
	text-decoration: none;
}
/* ********************************************************************************************* */
/* Начало Кода Зеленой кнопки Вацапа *********************************************************** */
/* ********************************************************************************************* */
/* Стили для кнопки */
.green-button {	
	margin: 0 20px 0 20px; /* Убираем отступы по умолчанию */
	padding: 15px 20px; /* Отступы внутри кнопки */
	width: 200px;
	display: inline-block; /* Сделаем кнопку строчно-блочным элементом */
 	font-size: 16px; /* Размер шрифта */
	font-weight: bold; /* Жирный текст */
	color: #fff; /* Цвет текста */
	background-color: #4CAF50; /* Зеленый цвет фона */
	border: none;  /* Убираем границы  */
	border-radius: 4px; /* Закругляем углы */
	cursor: pointer; /* Изменяем курсор при наведении */
	text-decoration: none; /* Убираем подчеркивание у ссылок */
	outline: none; /* Убираем обводку при фокусе */
	text-align: center;
}
/* При наведении */
.green-button:hover {
	background-color: #245426; /* Цвет фона */
}
/* При нажатии */
.green-button:active {
	background-color: #18381A; /* Еще темнозеленый цвет фона */
}
/* ********************************************************************************************* */
/* Начало Кода Синей кнопки Telegram *********************************************************** */
/* ********************************************************************************************* */
.telegram-button {	
	margin: 0 20px 0 20px; /* Убираем отступы по умолчанию */
	padding: 15px 20px; /* Отступы вокруг текста */
	width: 200px;
	background-color: #0088cc; /* Цвет фона */
	color: white; /* Цвет текста */	
	text-decoration: none; /* Убираем подчёркивание */
	border-radius: 5px; /* Скругляем углы */
	display: inline-block; /* Делаем кнопку блочно-строчным элементом */
	font-size: 16px; /* Размер шрифта */
	font-weight: bold; /* Делает текст жирным */
	text-align: center;
}
/* При наведении */
.telegram-button:hover {
	background-color: #004566; /* Цвет фона */
}
/* При нажатии */
.telegram-button:active {
	background-color: #002436; /* Еще темнозеленый цвет фона */
}
/* ********************************************************************************************* */
/* Начало Кода кнопки YouTube        *********************************************************** */
/* ********************************************************************************************* */
/* Стили для кнопки */
.YouTube-button {
	margin: 0 20px 0 20px; /* Убираем отступы по умолчанию */
	padding: 15px 20px; /* Отступы внутри кнопки */
	width: 200px;
	display: inline-block; /* Сделаем кнопку строчно-блочным элементом */
 	font-size: 16px; /* Размер шрифта */
	font-weight: bold; /* Жирный текст */
 	color: #fff; /* Цвет текста */
 	background-color: #FF0000; /* Зеленый цвет фона */
 	border: none;  /* Убираем границы  */
 	border-radius: 4px; /* Закругляем углы */
 	cursor: pointer; /* Изменяем курсор при наведении */
 	text-decoration: none; /* Убираем подчеркивание у ссылок */
 	outline: none; /* Убираем обводку при фокусе */
	text-align: center;
}
/* При наведении */
.YouTube-button:hover {
	background-color: #8F0000; /* Цвет фона при наведении */	
}
/* При нажатии */
.YouTube-button:active {
  	background-color: #5E0000; /* Еще темнозеленый цвет фона */
}
/* ********************************************************************************************* */
/* Начало Кода настройки ссылок  *************************************************************** */
/* ********************************************************************************************* */
/* 
a, a:link, a:visited, a:hover, a:active {
    color: #fff; 
    text-decoration: none; 
}
*/


/* ********************************************************************************************* */
/* Начало Кода footer  ************************************************************************* */
/* ********************************************************************************************* */
.footer {
	border: 1px solid black; /* Граница шириной 1 пиксель, сплошная линия, черного цвета */
	text-align: center;
	font-weight: bold;
	 /* height: 20vh;100% от высоты вьюпорта */
}
.footer a {
  	text-decoration: none;
	color: #000; /* Вы можете заменить 'blue' на любой желаемый цвет */
}
/* ********************************************************************************************* */
/* Конец  Кода footer  ************************************************************************* */
/* ********************************************************************************************* */


/* **************************************************************************************************************************** */
/* **************************************************************************************************************************** */
/* **************************************************************************************************************************** */
@media screen and (max-width: 768px) {
.container {
	width: 100%;
	text-align: center;
	border: 0px;
	margin-left: auto;
  	margin-right: auto;
}
#logocompany {
	float: left;
	border: 0px solid #000; 
	width: 80px;
	height: 80px; 
}
	
#namecompany {
	float: left; /* float: left; */
	border: 0px solid #000;
	margin: 25px 0 0 0; 
	padding: 0px; 

	font-size: 22px; 
	font-weight: bold; 
 	font-style: italic;
	font-family: Palatino, Verdana, Montserrat, Arial, sans-serif;
	color: #000000; 
}
#telcompany {
	float: right; 
	border: 0px solid #000; 
	margin: 5px 20px 0 0;
	padding: 0; 
	
	font-size: 18px; 
	font-weight: bold; 
  	font-style: italic; 
	font-family: Palatino, Verdana, Montserrat, Arial, sans-serif;
	color: #000;
}
	
	/* Настройка меню сайта *********************************************** */
    .container {
        flex-direction: column;
    }
	
	.kontakt {
		border: 1px solid black; /* Граница шириной 1 пиксель, сплошная линия, черного цвета */
		width: 100%; /* Установка ширины */
		height: 70vh; 
	}
	
	
    .menu {
        display: none;
        width: 100%;
        margin-top: 20px;
    }
    .menu.active {
        display: flex;
        flex-direction: column; /* Отображаем пункты меню в столбике */
        align-items: center; /* Выравниваем пункты меню по центру */
    }
    .menu li {
        margin-bottom: 15px; /* Увеличиваем отступ между пунктами меню */
    }
    .menu-toggle:checked + .menu-icon {
        color: #333;
    }
    .menu-toggle:checked ~ .menu {
        display: flex;
    }
	.menu-icon {
		float: right;
		display: inline-block;
	}
	/* Конец Настройка меню сайта *********************************************** */
	
	
	
	.tel-button {
		margin: 20px; /* Убираем отступы по умолчанию */
	}	
	.YouTube-button {
		margin: 20px; /* Убираем отступы по умолчанию */
	}	
	.telegram-button {
		margin: 20px; /* Убираем отступы по умолчанию */
	}	
	.green-button {	
		margin: 20px; /* Убираем отступы по умолчанию */
	}
	/* Конец Настройки меню сайта ***************************************** */
}