*, *:after, *:before {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
   
   /* добавим плавность переходов для всех элементов страницы*/
}


 @font-face { 
  font-family: 'Deceptibots'; /* Задайте имя вашего шрифта */
  src: url('fonts/Deceptibots.otf') format('opentype'); /* Формат шрифта */
}
 @font-face { 
  font-family: 'Aerodynamic'; /* Задайте имя вашего шрифта */
  src: url('fonts/Aerodynamic.otf') format('otf'), /* Формат шрифта */
       url('fonts/AerodynamicBold.otf') format('woff'); 
}


ul {
   list-style: none;
}
a {
   text-decoration: none;
   outline: none;
}
img {
   display: block;
   width: 100%;
}
h1, h2, h3, h4, h5, h6 {
   font-weight: normal;
   letter-spacing: 1px;
}
body {
   font-family: 'Open Sans', arial, sans-serif;
   font-size: 14px;
   line-height: 1;
   color: #373737;
   background: #F0F0F0;
}

/* стилевой класс, который управляет шириной контейнера сетки*/
.container {
   margin: 0 auto;
   padding: 0;
   width: 100%;
   max-width: 1260px;
   
   
}

header {
   width: 100%; 
   position: relative; 
   background: #ffd700	; 
   box-shadow: 0px 4px 18px rgba(0, 0, 0, 0.51); /* Тень: смещение по X, смещение по Y, размытие, цвет */
   padding: 20px;
}

.header_container {
    display: flex;
    justify-content: space-between; /* Равномерное распределение между элементами */
    align-items: center; /* Выравнивание элементов по вертикали */
    margin: 0 auto;
    max-width: 1260px;
}

/* логотип */
.logo {
   display: block;
   /* float: left; Уберем float, так как используем flexbox */
}
.logo-name {
   display: block;
   font-size: 40px;
   line-height: 1;
   font-family: 'Deceptibots', serif;
   text-transform: uppercase;
   color: #19121e;

}
.logo-description {
   position: relative;
   display: block;
   text-align: right;
   font-size: 18px;
   text-transform: uppercase;
   color: #0d2136; z-index: 2;
   width: 100%;
}
.logo-description:before {
   content: "";
   position: absolute;
   top: 50%;
   left: 2px;
   right:  5px;
   height: 2px;
   background-color: #0d2136;
   z-index: -1; 
}
.logo-description span {
   padding-left: 10px;  
   padding-right: 3px; 
   background-color: #ffd700; 
   
}



nav {
  margin-left: auto; /* Переместим навигацию вправо */
}


nav ul {
  margin: 0;
  padding: 0;
  list-style: none; 
  display: flex; /* Используем flexbox для элементов списка */
  align-items: center; /* Выравнивание по центру по вертикали */
}

nav li {
  margin-left: 20px; /* Добавим отступ между элементами */
}
nav li:first-child {
  margin-left: 0; /* Сбрасываем отступ у первого элемента */
}

.contact-link {
    color: #000;
	text-decoration: none;
    font-size: 30px;
}

.contact-phone {
    color: #000;
    text-decoration: none;
    font-size: 20px;
}

 
.background-container { 
	background-image: url(img/fon.jpg); /* Путь к фоновому изображению */
    /* Цвет фона */
	display: flex;
    justify-content: space-between;
    align-items: center; 
	 border-bottom: 3px solid;
	 
  border-image: linear-gradient(45deg, #ffd700 10%, #000 65%);
  border-image-slice: 1;
} 
.background-container2 { 	
	background: #3a3a3c;
    /* Цвет фона */ 
}
.container { 
    margin: 0 auto;
    max-width: 1260px;
	display: flex;
    justify-content: space-between;
    align-items: center; 
    padding: 30px 0;  /* Дополнительные стили по вашему выбору */
}

.text-block {
    flex: 1; /* Занимает доступное пространство слева */
    padding-right: 20px; /* Дополнительные стили по вашему выбору */
	align-items: left;
}

.image-block {
    position: relative;
    overflow: hidden;
    max-width: 560px;
	height: auto;
}


.floating-button {
	text-decoration: none;
	display: inline-block;
	width: 200px;
	height: 60px;
	line-height: 60px;
	border-radius: 45px;
	margin: 10px 0px;
	font-family: 'Aerodynamic', sans-serif;
	font-size: 18px;
	text-transform: uppercase;
	text-align: center;
	letter-spacing: 5px;
	font-weight: 600;
	color: #000;
	background: #ffd700;
	box-shadow: 0px 4px 18px rgba(0, 0, 0, 0.51);
	transition: .3s;
}
.floating-button:hover {
  background: #000;
  box-shadow: 0 5px 10px #ffd700;
  color: #ffd700;
  transform: translateY(-3px);
}

.tex{
	display: block;
	font-size: 48px;
	line-height: 1.5;
	letter-spacing: 5px;
	font-family: 'Aerodynamic';
	text-transform: uppercase;
	text-shadow: 5px 5px 10px #000, 0 0 5em #000, 0 0 0.2em #000;
	color: 	#ffd700;
}

#largeImg {
    border: solid 0px #ccc;
    width: 100%;
    box-shadow: 0px 4px 18px rgba(0, 0, 0, 0.51);
    object-fit: cover; /* Добавляем свойство object-fit для сохранения соотношения сторон */
    max-height: 100%; /* Добавим это свойство, чтобы изображение не растягивалось по высоте */
}
 
	.thumbs {
		display: flex;
		width: 560px;
		margin-top: 10px;
		box-sizing: border-box;
	}

	.block {
		flex: 1; /* Занимаем все доступное пространство внутри контейнера */
		aspect-ratio: 1 / 1; /* Сохраняем соотношение сторон 1:1 (ширина:высота) */
		margin-right: 10px; /* Задаем отступ справа */
	}  
  
	.block a {
		border: 2px solid #ffd700; 
		padding: 3px;
		float: left;
	}

	.block a:hover {
		border-color: #ecc97a;
	}
  
	.block:last-child {
		margin-right: 0;
	}


.post-wrap {
    max-width: 1280px;
    margin: 0 auto 20px;
    padding: 30px 0 50px;
    display: flex;
    justify-content: center;
    align-items: stretch; /* Установите выравнивание по высоте */
    flex-wrap: wrap;
    z-index: 1;
	
}

.post-item {
    padding: 15px; margin: 10px auto;
    z-index: 0;
}

.post-item-wrap {
    background: #FFF;
    position: relative;  border-radius: 45px 0;
}

.post-item-wrap:after {
    content: ""; border-radius: 45px 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    background: #ffd700;
    transform: rotate(1deg);
    transform-origin: left bottom;
    transition: .3s ease-in-out;
}

.post-item-wrap:hover:after {
    top: 5px;
    left: 5px;
    transform: rotate(2deg);
}

.post-link {
    text-decoration: none;
    display: block;
    padding: 30px;
}

.post-title {
    color: #000;
    margin-bottom: 15px;
    transition: .3s ease-in-out;
    font-size: 24px;
}
.prise {
    color: #ffd700;
    margin-top: 15px;
    transition: .3s ease-in-out;
    font-size: 24px; 
	font-weight: 600;
}

.post-item-wrap:hover .post-title {
    color: #ffd700;
}

.post-content {
    color: #3a3a3c;
    font-size: 16px;
    line-height: 1.5;
	margin: 10px auto;
}

.img_form {
	max-width: 725px;  
	object-fit: cover;  
	border-radius: 15px;
}


      @media (min-width: 768px) {
         .post-item {
            flex-basis: 50%;
            flex-shrink: 0;
         }
      }

      @media (min-width: 960px) {
         .post-item {
            flex-basis: 25%;
         }
      }
	  
	  
	  
h3 {
	font-size: 48px;
	line-height: 1.5;
    letter-spacing: 5px;
	font-family: 'Aerodynamic';
	position: relative;
	display: inline-block;
	color: #ffd700;
}
	.d7  {
	margin: 20px auto 0; justify-content: space-between;
    align-items: center; 
	text-align: center;
}	  
	.d7 h3 {
	padding: 3px 0;
 	text-align: center;
	text-shadow: 3px 3px 6px #000, 0 0 3em #000, 0 0 0.2em #000;
}

.post-content span {
    margin-right: 15px; /* Добавляем отступ справа между соседними span-ами */
}

/* Чтобы избежать отступа после последнего span-а */
.post-content span:last-child {
    margin-right: 0;
}



.left-block {  
    flex: 1; 
    padding-right: 20px;  
}

.right-block {
    position: relative;
    overflow: hidden;
    max-width: 600px;
	height: auto; 
}

.postcard {
   width: 500px;
   padding: 30px ;
   background: #fff;
   color: #000;
   border-radius: 15px;
}
.form-row {
    margin-bottom: 15px;
   font-size: 15px;
}

.form-row input[type="text"],
.form-row input[type="tel"], /* добавлено новое поле для телефона */
.form-row textarea {
    width: 100%;
    padding: 0 10px;
    line-height: 35px;
    border-width: 0;
    outline: none;
    background: transparent url(https://html5book.ru/wp-content/uploads/2016/12/bg-form.png) bottom left repeat-x;
    background-size: 8px 35px;
}

.form-row textarea {
    background-attachment: local;
    background-repeat: repeat;
    resize: none;
}

.form-row input[type="submit"] {
    padding: 15px 20px;
    margin-top: 5px;
    margin-bottom: 10px;
    background: #ffd700;
    border-width: 0;
    cursor: pointer;
    outline: none;
    font-size: 18px;
    letter-spacing: 1px;
    color: #000;
    text-transform: uppercase;
    transition: 1s cubic-bezier(.165, .84, .44, 1);
	border-radius: 10px;
}

.form-row input[type=submit]:hover {
    background: #ffffff;
}

.social-icons {
    margin: 10px auto;
}
.contact-links {
    color: #000;
	text-decoration: none;
    font-size: 30px;
    margin-right: 15px;
}
.form-title {
line-height: 1.5;
letter-spacing: 1px;
 margin-bottom: 15px;
 font-size: 20px;
}
.form-row-p {
line-height: 1.5;
}



.post_wrap {
    width: 100%;
    margin: 0 auto;
	z-index: 1;
	
}

.post_item {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 30px; /* Задаємо відступ між блоками .post_item */
	z-index: 0;
}

.post_item-wrap {
    background: #FFF;
    position: relative;  
    border-radius: 45px 0;
}

.post_item-wrap:after {
    content: ""; 
    border-radius: 45px 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	
    z-index: -2;
    background: #ffd700;
    transform: rotate(0.25deg);
    transform-origin: left bottom;
    transition: .3s ease-in-out;
}

.post_item-wrap:hover:after {
    top: 5px;
    left: 5px;
    transform: rotate(0.5deg);
}

blockquote {
width: 100%;
    margin: 0 ;
    background: #FFF;
    color: #131314;
    padding: 30px 30px 30px 90px;
    position: relative;
    border-radius: 15px 0 45px;
}


blockquote:before {
   content: "\201C"; /* Unicode-код для иконки "fas fa-question-circle" */
   position: absolute;
   top: 20px;
   left: 16px;
   color: black;
   width: 40px;
   height: 40px;
   border-radius: 50%;
   background: #ffd700;
   font-size: 40px;
   font-weight: bold;
   text-align: center;
   line-height: 50px;
}
blockquote:after {
content: "";
width: 4px;
background: #ffd700;
position:absolute;
left: 70px;
top: 20px;
bottom: 20px;
}
blockquote p {
margin-top: 0;
font-size: 20px;
font-weight: 300;
}
blockquote cite {
font-style: normal;
margin-top: 20px;
line-height: 1.5;
    letter-spacing: 1px;
}
footer {
margin-top: 10px;

}

.post_item-wrap.active blockquote:after {
    top: 5px;
    left: 5px;
    transform: rotate(0.5deg);
}

.post_item-wrap.active blockquote footer {
    display: block;
}


.galler {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
}

.galler-image {
    flex: 0 0 calc(33.33% - 20px); /* 3 фото в строке с отступами */
    margin: 10px;
    background-color: #ddd; /* Замените на реальные изображения */
}

@media screen and (max-width: 768px) {
    .galler-image {
        flex: 0 0 calc(50% - 15px); /* 2 фото в строке с отступами при маленьком экране */
    }
}

@media screen and (max-width: 480px) {
    .galler-image {
        flex: 0 0 calc(100% - 20px); /* 1 фото в строке с отступами при очень маленьком экране */
    }
}








/* Медиа-запрос для экранов шириной меньше 768px (можете выбрать другое значение) */
@media (max-width: 768px) {
    .container {
        flex-direction: column; /* Изменяем направление на вертикальное */
        align-items: stretch; /* Растягиваем блоки по ширине контейнера */
		padding: 10px;
    }

    .text-block {
        padding-right: 0; /* Убираем отступ при вертикальной компоновке */
        margin-bottom: 20px; /* Добавляем отступ между блоками */
    }
}








@media (max-width: 480px) {

body {
    text-align: center;
}
	
header {
	padding-top: 10px;
	}

.header_container {
    flex-direction: column; /* Размещаем элементы в столбец */
    text-align: center; /* Выравниваем текст по центру */
	}

nav {
    margin: 15px auto 0; /* Добавим отступ сверху навигации */
    text-align: center; /* Выравниваем текст по центру */
	}

nav ul {
	justify-content: center; /* Выравниваем элементы по центру горизонтально */
	}
	
.tex{
	margin: 15px auto 10px; 
	font-size: 28px;
}	
.floating-button {

	width: 180px;
	height: 50px;
	line-height: 50px;
	border-radius: 35px;
	margin: 0px auto;
	font-size: 16px;
}	
 
	.thumbs {
		display: flex;
		width: 100%;
		margin-top: 10px;
		box-sizing: border-box;
	}

	h3 {
	font-size: 24px;
	
}
	.d7  {
	margin: 10px auto 0; justify-content: space-between;

}	  

.post-wrap {
    margin: 0 auto 20px;
	
}
.post-item {
    padding: 10px 15px; margin: 0px auto;
}

.post-link {
    padding: 20px 15px;
}

.img_form {
	width: 100%;  
	margin-bottom: 15px;
}
.left-block {  
    padding: 0px;  
}
.postcard {
   width: 100%;
   padding: 30px ;
   background: #fff;
   color: #000;
   border-radius: 15px;
}


blockquote {
	width: 100%;
    margin: 0 ;
    background: #FFF;
    color: #131314;
    padding: 20px 20px 20px 60px;
    position: relative;
    border-radius: 15px 0 45px;
}

blockquote:before {
   content: "\201C"; /* Unicode-код для иконки "fas fa-question-circle" */
   position: absolute;
   top: 15px;
   left: 11px;
   color: black;
   width: 20px;
   height: 20px;
   border-radius: 50%;
   background: #ffd700;
   font-size: 20px;
   font-weight: bold;
   text-align: center;
   line-height: 25px;
}
blockquote:after {
content: "";
width: 4px;
background: #ffd700;
position:absolute;
left: 40px;
top: 15px;
bottom: 20px;
}
blockquote p {
font-size: 18px;
font-weight: 300;
}





}