/* CSS Document */

* {
	margin: 0;
	padding: 0;
}
img {
	border: 0;
}

body {
	-moz-background-size: 100%; /* Firefox 3.6+ */
	-webkit-background-size: 100%; /* Safari 3.1+ и Chrome 4.0+ */
	background-size: 100%; /* Современные браузеры */
}

.main {
	margin-bottom: 80px;
	width: 970px;
	float: center;
	margin: auto auto;
}
.header {
	display:table;
	height: 200px; /* Задали высоту головы */
	width: 970px;
}
.company{
	display:table-cell!important;
	text-align: center;
	top: 20px; 
	height: 200px; 
	width: 970px;
	left: 185px;
	vertical-align:middle;
}
.obr-svyaz{
	display:table-cell!important;
	font: normal 44px "Times New Roman";
	color: #6E4A5D;
	height: 90px; 
	width: 180px;
	vertical-align:middle;
}
.contacty {
	display:table;
	height: 40px; /* Задали высоту головы */
	width: 970px;	
	background-color: #E2DEE8;
	margin-bottom: 20px; /* отступаем снизу 30px */
}
.deviz {
	height: 660px; /* Задали высоту головы */
	width: 970px;
	margin-bottom: 10px; /* отступаем снизу 30px */
	background-image: url(../images/deviz.avif);
	background-size: 100%;
	float: center;	
}

.Ocompanii{
	display:table;
	height: 960px; /* Задали высоту головы */
	width: 970px;
	color: #000000;	
	text-align: center;
	margin-left: auto;
	margin-right: auto;	
}
.block1{
	width: 970px;
	float: center;
	height: 900px;	
}
.uslugi{
	display:table;
	height: 700px; /* Задали высоту головы */
	width: 970px;
	font: bold 'Arial'; 
	font-size: 40px;
	color: #000000;	
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 10px; /* отступаем снизу 30px */
}
.premium{
	display:table-cell!important;
	height: 300px; /* Задали высоту головы */
	width: 320px;
	font: normal 'Times New Roman';
	text-align: center;
	background-color: #6E4A5D;
	margin-left: auto;
	margin-right: auto;
	background : url(../images/premium.avif) center top no-repeat;
	float: center;
}
.vybor{
	display:table;
	height: 550px; /* Задали высоту головы */
	width: 970px;
	font: bold 'Arial'; 
	font-size: 40px;
	color: #000000;	
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	vertical-align:middle;
	margin-bottom: 10px; /* отступаем снизу 30px */
}
.proekty{
	width: 970px;
	height: 380px;
	float: center;	
	margin-bottom: 5px; /* отступаем снизу 30px */
}

.klienty {
	width: 970px;
	height: 600px; /* Задали высоту головы */
	margin-bottom: 5px; /* отступаем снизу 30px */
}
/* Ограничиваем контейнер по ширине 1000px */
.container {
	width: 100%;
	max-width: 970px;
	height: 600px;
}

/* Стили самой формы */
.content {
	display: flex; /* делаем колонки в ряд */
	align-items: center; /* выравниваем по центру */
	justify-content: space-between; /* колонки растянутся на всю ширину */
	background: linear-gradient(45deg, #fff1eb, #ace0f9);
	padding: 40px;
	border-radius: 5px;
	box-shadow: 4px 4px 8px 0 rgba(34, 60, 80, 0.2);
	
}

/* Стили левой колонки */
.left-side {
	width: 25%; /* занимает 25% общей ширины */
	height: 100%; /* растягиваем на всю высоту */
	position: relative; /* позиционирование относительное (для ::before) */
	display: flex;
	flex-direction: column; /* внутри элементы располагаем в колонку */
}

/* Стили разделительной линии между левой и правой колонкой */
.left-side::before {
	content: ""; /* контент нам не нужен */
	position: absolute; /* позиционируем относительно .left-side */
	height: 70%; /* высота 70% от .left-side */
	width: 2px; /* ширина 2px */
	background: #afafb6;
	right: -15px; /* позиционируем справа + отступ 15px (справа) */
	top: 50%; /* выравниваем по центру */
	transform: translateY(-50%); /* выравниваем по центру */
}

/* Стили правой колонки */
.right-side {
	width: 75%; /* занимает 75% общей ширины */
	margin-left: 75px;
}

/* Элементы левой колонки: адрес, телефон, email */
.details {
	margin-bottom: 15px;
	text-align: center;
}

/* Общие стили для иконок */
.details i {
	font-size: 25px; /* задаем размер */
	color: #3e2093; /* задаем цвет */
	margin-bottom: 10px;
}

/* Стили для заголовков левой колонки */
.topic {
	font-size: 18px;
	font-weight: 500;
	margin-bottom: 7px; /* отступ снизу 7px */
}

/* Стили для текста левой колонки */
.text-one,
.text-two {
	font-size: 14px;
	color: #afafb6;
}

/* Текст правой колонки */
.right-side p {
	margin-bottom: 20px;
}

/* Контейнер для input'ов формы */
.input-box {
	height: 30px; /* по сути задаем высоту input'а */
	width: 100%; /* ширина на всю ширину правой колонки (с учетом padding) */
	margin-bottom: 30px; /* отступаем снизу 20px */
}

/* Стили для input и textarea (поле сообщение) */
.input-box input,
.input-box textarea {
	height: 100%; /* растягиваем на всю высоту контейнера 50px */
	width: 90%; /* растягиваем на всю ширину */
	border: none; /* убираем внешние края */
	border-radius: 5px; /* скругляем края */
	background: #f0f1f8; /* задаем цвет фона */
	padding: 0 20px; /* отступ справа и слева 20px */
}

/* Отдельно стилизуем поле сообщение */
.input-box textarea {
	resize: none; /* чтобы нельзя было менять высоту */
	padding: 20px;
}

/* Это контейнер для поля сообщение */
.message-box {
	min-height: 110px; /* минимальная высота 110px */ 
	margin-bottom: 80px; /* отступаем снизу 80px */
}

/* Это контейнер для поля сообщение */
.chekbox {
	min-height: 40px; /* минимальная высота 110px */ 
	margin-bottom: 20px; /* отступаем снизу 20px */
}

/* Стили для контейнера кнопки */
.buttonblok {
	height: 50px;
	width: 90%;
}

/* Стили для самой кнопки */
.button1 {
  position: relative;
  display: inline-block;
  font-size: 90%;
  font-weight: 700;
  color: rgb(255,255,255);
  text-decoration: none;
  text-shadow: 0 -1px 2px rgba(0,0,0,.2);
  padding: .5em 1em;
  outline: none;
  border-radius: 3px;
  background: linear-gradient(rgb(105,208,228), rgb(81,81,86)) rgb(105,208,228);
  box-shadow:
   0 1px rgba(255,255,255,.2) inset,
   0 3px 5px rgba(0,1,6,.5),
   0 0 1px 1px rgba(0,1,6,.2);
  transition: .2s ease-in-out;
}
.button1:hover:not(:active) {
  background: linear-gradient(rgb(0,151,180), rgb(70,71,76)) rgb(0,151,180);
}
.button1:active {
  top: 1px;
  background: linear-gradient(rgb(0,105,123), rgb(56,57,62)) rgb(0,105,123);
  box-shadow:
   0 0 1px rgba(0,0,0,.5) inset,
   0 2px 3px rgba(0,0,0,.5) inset,
   0 1px 1px rgba(255,255,255,.1);
}

.razdel-usligi {
	margin-left: auto;
	margin-right: auto;
	overflow: auto;
	width: 970px;	
}
.razdel-podval {
	margin-left: auto;
	margin-right: auto;
	overflow: auto;
	position: fixed;
	width: 970px;	
}
.razdel img {
	max-width: 100%;
	max-height: 100%;
}
.copyrait{
	margin-left: auto;
	margin-right: auto;
	overflow: auto;
	position: fixed;
	bottom: 0;
	width: 970px;
	height: 41px;
	text-align: center; 
	font: normal 16px  "Times New Roman";
	background-color: #FFFFFF;	
}



/* МОБИЛЬНАЯ ВЕРСИЯ
	
/* Меняем стили при ширине экрана меньше 800px */
@media (max-width: 800px) {
	/* Теперь форма (правая колонка) будет сверху, а элементы (левая колонка) снизу */
	.content {
		height: 100%;
		flex-direction: column-reverse; /* располагаем в колонку и реверсивно */
	}
	
	/* Внутри левой колонки внутренние элементы располагаем в ряд */
	.left-side {
		margin-top: 50px;
		flex-direction: row; /* располагаем элементы (адрес, телефон, email) в ряд */
		width: 100%; /* левая колонка на всю ширину */
		justify-content: center;
		flex-wrap: wrap; /* перенос элементов, если не хватит места */
	}
	.details {
		margin-right: 20px;
	}
	.details:last-child {
		margin-right: 0;
	}
	
	/* Убираем разделительную линию */
	.left-side::before {
		display: none;
	}
	
	/* Правая колонка теперь на всю ширину и не имеет отступа слева */
	.right-side {
		width: 100%;
		margin-left: 0;
	}
}