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

html {
    scroll-behavior: smooth; /* Включение плавного скроллинга с помощью CSS */	
}
h1,h2,h3,h4, img, table, center {
	margin: 0; /* Убираем отступы по умолчанию */
  	padding: 0; /* Убираем отступы по умолчанию */
}

a, a:link, a:visited, a:hover, a:active {
    color: #FFF; /* Вы можете заменить 'blue' на любой желаемый цвет */
    text-decoration: none; /* Убирает подчеркивание у ссылок */
}

body {
  	margin: 0; /* Убираем отступы по умолчанию */
  	padding: 0; /* Убираем отступы по умолчанию */
	
 	background-color: #000000; 
	color: #ffffff; /* Цвет текста на сайте */

	font-family: "PalatinoLinotype-Roman";
  	line-height: 1.5; /* Просторный межстрочный интервал */	
	text-align: center;  /* Центрируем все объекты по центру  */
}

#blok01 {
	margin: 0; /* Отступы наружи блока */
	padding: 0; /* Отступы внутри блока */
	border: 0px solid black; /* Устанавливаем границу в 1 пиксель */
	width: 100%; /* Ширина во весь экран 100vw*/
/*    height: 100vh;  Высота во весь экран 100vh*/	
/*	background-color: #ffffff; */	
}
#blok02 {
	margin: 0; /* Отступы наружи блока */
	padding: 0; /* Отступы внутри блока */
	border: 0px solid black; /* Устанавливаем границу в 1 пиксель */
	width: 100%; /* Ширина во весь экран 100vw*/
/*    height: 100vh; /* Высота во весь экран 100vh*/	
/*	background-color: #ffffff; */	
}
#blok03 {
	margin: 0; /* Отступы наружи блока */
	padding: 0; /* Отступы внутри блока */
	border: 0px solid black; /* Устанавливаем границу в 1 пиксель */
	width: 100%; /* Ширина во весь экран 100vw*/
    height: 100vh; /* Высота во весь экран 100vh*/	
/*	background-color: #ffffff; */	
}
#blok04 {
	margin: 0; /* Отступы наружи блока */
	padding: 0; /* Отступы внутри блока */
	border: 0px solid black; /* Устанавливаем границу в 1 пиксель */
	width: 100%; /* Ширина во весь экран 100vw*/
    height: 100vh; /* Высота во весь экран 100vh*/	
/*	background-color: #ffffff; */	
}

.background-block {
  background-image: url('0001.webp'); /* Установка изображения фона */
  background-size: cover; /* Покрытие всего доступного пространства, сохраняя пропорции */
  background-position: center; /* Центрирование изображения */
  background-repeat: no-repeat; /* Избегание повторения изображения */
 /* height: 1024px;  Высота блока */
 /* width: 1792px;  Ширина блока */	
	display: flex; /* Используем Flexbox */
  	justify-content: center; /* Центрирование по горизонтали */
  	align-items: center; /* Центрирование по вертикали */
  	height: 100vh; /* Высота блока (пример: на весь экран). Можно изменить по нужде */
}
#tonirovanit {	
	background: rgba(0, 0, 0, 0.7); /* Полупрозрачный черный цвет */
	margin: 0; /* Убираем отступы по умолчанию */
  	padding: 20px 0; /* Убираем отступы по умолчанию */
}
#logocompany {
	position: absolute;
  	top: 0;
 	left: 0;
}

#namecompany {
	border: 0px solid #fff;	
	background: rgba(0, 0, 0, 0.5); /* Полупрозрачный черный цвет */
	
	margin: 0; /* Убираем отступы по умолчанию */
  	padding: 5px 20px 5px 20px; /* Убираем отступы по умолчанию */

	font-size: 30px;
	font-weight: bold;
	text-align: center; 
	
	display: inline-block;  /*  ширина будет автоматически рассчитываться на основе содержимого.*/
	float: left; /* Прижимаем блок влево */
}

#telcompany {
	border: 1px solid #fff;
	border-radius: 15px; /* Скругленные углы */
	background: rgba(0, 0, 0, 0.5); /* Полупрозрачный черный цвет */
	
	margin: 0; /* Убираем отступы по умолчанию */
  	padding: 5px 20px 5px 20px; /* Убираем отступы по умолчанию */

	font-size: 30px;
	font-weight: bold; 
	font-style: italic;
	text-align: center; 
	
	display: inline-block;  /*  ширина будет автоматически рассчитываться на основе содержимого.*/
	float: right; /* Прижимаем первый блок вправо */
}
	/* width: 100%;  width: 100vw; */
	/*height: 100px; */

#ofer {
	margin: 0; /* Убираем отступы по умолчанию */
  	padding: 20px 0 0 0; /* Убираем отступы по умолчанию */
	font-size: 40px;
	font-weight: bold; 
	font-style: italic;
	text-align: center;
	color: #000000; /* Цвет текста на сайте */
}

.container {
	border: 0px solid #00A2E8; /* Устанавливаем границу в 1 пиксель */
	width: 1200px;
	text-align: center;
	margin-left: auto;
  	margin-right: auto;
}
.container2 {
	border: 0px solid #00A2E8; /* Устанавливаем границу в 1 пиксель */
	width: 1650px;
	text-align: center;
	margin-left: auto;
  	margin-right: auto;
}

.modern-block {
    float: left;
	border: 1px solid rgba(255, 255, 255, 0.18); /* Светлая граница для эффекта "стекла" */
  	background: rgba(255, 255, 255, 0.8); /* Полупрозрачный белый фон */
  	backdrop-filter: blur(10px); /* Размытие фона за элементом */
  	border-radius: 15px; /* Скругленные углы */
  	padding: 20px; /* Отступы внутри блока */
  	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Легкая тень для добавления глубины */
  	
  	max-width: 320px; /* Максимальная ширина блока */
  	margin: 20px; /* Отступы вокруг блока */
  	font-family: 'Arial', sans-serif; /* Современный и чистый шрифт */
  	color: #333; /* Цвет текста */
  	transition: transform 0.3s ease, box-shadow 0.3s ease; /* Плавный переход для эффектов */
}

.modern-block:hover {
  	transform: translateY(-5px); /* Поднимает блок при наведении */
  	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* Усиливает тень при наведении */
}

.pred1 {
	float: left;
	border: 1px solid rgba(255, 255, 255, 0.18); /* Светлая граница для эффекта "стекла" */

	backdrop-filter: blur(10px); /* Размытие фона за элементом */	
	border-radius: 15px; /* Радиус закругления краев */
	padding: 20px; /* Отступы внутри блока */
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Легкая тень для добавления глубины */
	max-width: 340px; /* Максимальная ширина блока */	
  	margin: 20px; /* Отступы вокруг блока */
	padding: 0; /* Отступы внутри блока */
	color: #ffffff; /* Цвет текста на сайте */
	background-color: #000000; /* Light blue */	
}

.pred1:hover {
	transform: translateY(-5px); /* Поднимает блок при наведении */
  	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* Усиливает тень при наведении */
	color: #000000; /* Цвет текста на сайте */
	background-color: #ffffff; /* Light blue */
}

.gotovie {
	float: left;
	border: 1px solid rgba(255, 255, 255, 0.18); /* Светлая граница для эффекта "стекла" */
	margin: 5px; /* Отступы вокруг блока */
	padding: 0 20px 0 20px; /* Отступы внутри блока */
}

.gotovie a:hover {
	color: #4CAF50; /* Цвет текста на сайте */
}

#price {
	color: #1DAA61; /* Цвет текста на сайте */
}

.info {
	float: left;
	border: 0px solid rgba(255, 255, 255, 0.18); /* Светлая граница для эффекта "стекла" */
	margin: 20px; /* Отступы вокруг блока */
	padding: 0 0 20px 0; /* Отступы внутри блока */

	backdrop-filter: blur(10px); /* Размытие фона за элементом */	
	border-radius: 15px; /* Радиус закругления краев */
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Легкая тень для добавления глубины */
	max-width: 400px; /* Максимальная ширина блока */	
  	
	 /* Минимальная ширина блока продукта min-width: 300px; */
	
	background-color: #ffffff; /* Light blue */
	color: #000000; /* Цвет текста на сайте */
}

.info h2 {
	margin: 10px 60px 10px 60px; /* Отступы наружи блока */
	padding: 0; /* Отступы внутри блока */
}
.info p {
	margin: 20px; /* Отступы наружи блока */
	padding: 0; /* Отступы внутри блока */
}

#pred2 {
	float: left;
	border: 1px solid #fff;
	border-radius: 15px; /* Радиус закругления краев */
	margin: 20px; /* Отступы вокруг блока */
	padding: 0; /* Отступы внутри блока */
	min-width: 300px; /* Минимальная ширина блока продукта */
	max-width: 320px; /* Максимальная ширина блока */
	
	background-color: #000000; /* Light blue */
	color: #f1f1f1; /* Цвет текста на сайте */

}

#pred3 {
	float: left;
	border: 1px solid #fff;
	border-radius: 15px; /* Радиус закругления краев */
	margin: 20px; /* Отступы вокруг блока */
  	padding: 0; /* Отступы внутри блока */
	min-width: 300px; /* Минимальная ширина блока продукта */
	max-width: 320px; /* Максимальная ширина блока */
	background-color: #000000; /* Light blue */
	color: #ffffff; /* Цвет текста на сайте */

}

#pred4 {
	float: left;
	border: 1px solid #fff;
	border-radius: 15px; /* Радиус закругления краев */
	margin: 20px; /* Отступы вокруг блока */
  	padding: 0; /* Отступы внутри блока */
	min-width: 300px; /* Минимальная ширина блока продукта */
	max-width: 320px; /* Максимальная ширина блока */
	
	background-color: #000000; /* Light blue */
	color: #ffffff; /* Цвет текста на сайте */

}





.product {
  	width: 300px; /* Ширина блока продукта */
  	padding: 10px; /* Поля вокруг содержимого */
	border-radius: 25px; /* Радиус закругления краев */
}

.product-name {
  background-color: #ff9999; /* Цвет фона для названия продукта */
  padding: 5px; /* Поля вокруг текста */
	border-radius: 25px; /* Радиус закругления краев */
}

.product-description {
  background-color: #99ff99; /* Цвет фона для описания продукта */
  padding: 5px; /* Поля вокруг текста */
	border-radius: 25px; /* Радиус закругления краев */
}

.product-price {
  background-color: #9999ff; /* Цвет фона для цены продукта */
  padding: 5px; /* Поля вокруг текста */
	border-radius: 25px; /* Радиус закругления краев */
}


/* ********************************************************************************************* */
/* Начало Кода Зеленой кнопки Вацапа *********************************************************** */
/* ********************************************************************************************* */
/* Стили для кнопки */
.green-button {	
  display: inline-block; /* Сделаем кнопку строчно-блочным элементом */
  margin: 0px 0 0 0; /* Убираем отступы по умолчанию */	
  padding: 15px 20px; /* Отступы внутри кнопки */
  font-size: 16px; /* Размер шрифта */
  font-weight: bold; /* Жирный текст */
  color: #fff; /* Цвет текста */
  background-color: #4CAF50; /* Зеленый цвет фона */
  border: none; /* Убираем границы */
  border-radius: 4px; /* Закругляем углы */
  cursor: pointer; /* Изменяем курсор при наведении */
  text-decoration: none; /* Убираем подчеркивание у ссылок */
  outline: none; /* Убираем обводку при фокусе */
}

/* При наведении */
.green-button:hover {
  background-color: #45a049; /* Темнозеленый цвет фона */
}

/* При нажатии */
.green-button:active {
  background-color: #367c39; /* Еще темнозеленый цвет фона */
}
/* ********************************************************************************************* */
/* ********************************************************************************************* */
/* ********************************************************************************************* */


/* ********************************************************************************************* */
/* Начало Кода Синей кнопки Telegram *********************************************************** */
/* ********************************************************************************************* */

.telegram-button {
	margin: 0; /* Убираем отступы по умолчанию */	
	background-color: #0088cc; /* Цвет фона */
	color: white; /* Цвет текста */
	padding: 15px 20px; /* Отступы вокруг текста */
	text-decoration: none; /* Убираем подчёркивание */
	font-family: Arial, sans-serif; /* Шрифт текста */
	border-radius: 5px; /* Скругляем углы */
	display: inline-block; /* Делаем кнопку блочно-строчным элементом */
	font-size: 16px; /* Размер шрифта */
	font-weight: bold; /* Делает текст жирным */
}
.telegram-button:hover {
	background-color: #007bb5; /* Цвет фона при наведении */	
}
/* ********************************************************************************************* */
/* ********************************************************************************************* */
/* ********************************************************************************************* */

/* *********************************************************************** */
/* *** Стилизация кнопки перехода ниже к следующему Абзацу сайта ********* */
/* *********************************************************************** */

.circle-button {
	margin: 25px; /* отступы с наружи */
  	width: 50px; /* Размер кнопки */
 	height: 50px; /* Размер кнопки */
	border-radius: 50%; /* Делает кнопку круглой */
 	background-color: #000; /* Прозрачный фон transparent*/
 	border: 1px solid #f1f1f1; /* Граница кнопки */
	display: flex; /* Используется для центрирования стрелки */
	justify-content: center; /* Центрирует содержимое по горизонтали */
	align-items: center; /* Центрирует содержимое по вертикали */
	cursor: pointer; /* Курсор в виде руки при наведении */
	text-decoration: none; /* Убирает подчеркивание у ссылок */
}
.arrow-down {
	color: #fff; /* Цвет стрелки */
	font-size: 24px; /* Размер стрелки */
	text-decoration: none; /* Убирает подчеркивание у ссылок */
}
/* ***********************************************************************  */
/* ***********************************************************************  */
/* ***********************************************************************  */





/*  ******************************************************************************************************************************* */
/*  ******************************************************************************************************************************* */
/*  ******************************************************************************************************************************* */
@media (max-width: 599px) {	

.container {
	border: 0px solid #00A2E8; /* Устанавливаем границу в 1 пиксель */
	width: 100%;
	text-align: center;
	border: 0px;
	margin-left: auto;
  	margin-right: auto;
}
.container2 {
	border: 0px solid #00A2E8; /* Устанавливаем границу в 1 пиксель */
	width: 100%;
	text-align: center;
	margin-left: auto;
  	margin-right: auto;
}	
	
	/*.container {
/*	width: 100%; /* Ширина контейнера равна 80% ширины экрана */
/*		/* width: 100%;ширина контейнера */
/*/* 	text-align: center; /* Для выравнивания текста по центру внутри контейнера */
/* 	display: flex; /* Используем flexbox */
 /* 	align-items: flex-start; /* Притягиваем содержимое к верхнему краю */
 /* 	justify-content: center; /* Выравниваем содержимое по центру */
/* } */

#logocompany {
	position: absolute;
  	top: 0;
 	left: 0;
}

#namecompany {
	border: 0px solid #fff;	
	margin: 10px 0 0 5px; /* Убираем отступы по умолчанию */
  	padding: 0; /* Убираем отступы по умолчанию *//

	font-size: 25px;  
	font-weight: bold;
	text-align: center; 
}

#telcompany {
	border: 1px solid #fff;	
	
	margin: 0; /* Убираем отступы по умолчанию */
  	padding: 0 20px 0 20px; /* Убираем отступы по умолчанию */

 	font-size: 20px; 
	font-weight: bold; 
	font-style: italic;
	text-align: center; 
}
	
#ofer {
	margin: 0; /* Убираем отступы по умолчанию */
  	padding: 20px 10px 0 10px; /* Убираем отступы по умолчанию */
	font-size: 38px;
	font-weight: bold; 
	font-style: italic;
	text-align: center; 
}	
	

}
/*  ******************************************************************************************************************************* */
/*  ******************************************************************************************************************************* */
/*  ******************************************************************************************************************************* */