/* ------------------------------------------------------------------------------
  
  Имя шаблона: Hayley
  
  Описание: Hayley - Креативный персональный одностраничный HTML-шаблон
  Автор: Paul
  URI автора: http://themeforest.net/user/paul_tf
  
  СОДЕРЖАНИЕ:
  
  1.  Глобальные стили
      1.1 Общие настройки
      1.2 Типография
      1.3 Кнопки
      1.4 Формы
      1.5 Анимации
  
  2.  Прелоадер (анимация загрузки)
  3.  Шапка сайта (Header)
  4.  Главная страница (личное портфолио)
      4.1 Слайд Вступление
      4.2 Слайд Услуги
      4.3 Слайд Проекты
      4.4 Слайд Награды
      4.5 Слайд Опыт работы
      4.6 Слайд Клиенты
      4.7 Слайд Отзывы
      4.8 Слайд Контакты
  5.  Подвал (Footer)
  6.  Модальное окно

------------------------------------------------------------------------------*/

/*-------------------------------------------------------------------------------
  1. Глобальные стили
-------------------------------------------------------------------------------*/

/* 1.1 Общие настройки */

/* Подключение шрифта DM Sans с Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');

/* Подключение кастомного шрифта MonumentExtended */
@font-face {
	font-family: 'MonumentExtended';
	src: url('../fonts/monumentextended-regular-webfont.woff2') format('woff2'),
		 url('../fonts/monumentextended-regular-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

/* Базовый размер шрифта (12px на мобильных) */
html {
	font-size: 12px;
}

/* Основной шрифт для body */
body {
	font-family: 'DM Sans', sans-serif;
	color: #000000;
}

/* Стили для ссылок (основной цвет - бирюзовый) */
a,
a:hover {
	color: #5ca595;
}

/* Состояние при наведении для текстовых ссылок с классом text-primary */
a.text-primary:focus,
a.text-primary:hover {
	color: #5ca595 !important;
}

/* Стиль выделения текста (золотистый фон, белый текст) */
::selection {
	background-color: #b99e64;
	color: #ffffff;
	text-shadow: none;
}

/* Версия для WebKit */
-webkit-::selection {
	background-color: #b99e64;
	color: #ffffff;
	text-shadow: none;
}

/* Версия для Firefox */
::-moz-selection {
	background-color: #b99e64;
	color: #ffffff;
	text-shadow: none;
}

/* Стилизация полосы прокрутки (тонкая, золотистая) */
::-webkit-scrollbar {
	width: 5px;
	height: 5px;
}

::-webkit-scrollbar-thumb {
	cursor: pointer;
	background: #b99e64;
}

/* Максимальная ширина контейнера на больших экранах */
@media (min-width: 1200px) {
	.container,
	.container-sm,
	.container-md,
	.container-lg,
	.container-xl {
		max-width: 1200px;
	}
}

/* Дополнительные отступы для fluid-контейнера на очень широких экранах */
@media (min-width: 1600px) {
	.container-fluid {
		padding-left: 4.25rem;
		padding-right: 4.25rem;
	}
}

/* Класс для минимальной высоты во весь экран */
.full-height {
	min-height: 100vh;
}



/* 1.2 Типография */

/* Класс для кастомного шрифта MonumentExtended */
.font-custom {
	font-family: 'MonumentExtended', sans-serif;
}

/* Основной акцентный цвет (золотистый) */
.text-primary {
	color: #b99e64 !important;
}

/* Цвет для успешных сообщений и кнопок (бирюзовый) */
.text-success,
a.text-success:hover {
	color: #5ca595 !important;
}

/* Подчеркнутый текст */
.text-underline {
	text-decoration: underline;
}

/* Размер шрифта 1.125rem (около 18px при базовом 16px) */
.text-md {
	font-size: 1.125rem;
}

/* Белые ссылки внутри белого текста */
.text-white a {
	color: #ffffff;
}



/* 1.3 Кнопки */

/* Убираем outline у кнопок и полей ввода при фокусе */
button:focus,
input:focus {
	outline: none;
}

/* Базовые стили кнопок */
.btn {
	padding: 1rem 2.5rem;
	border-radius: 500px; /* Сильно скругленные углы (круглая кнопка) */
	font-weight: bold;
	font-size: 1.125rem;
	text-transform: uppercase;
}

/* Стили для кнопки успеха (зеленой) и её состояний */
.btn-success,
.btn-success:hover,
.btn-success.focus,
.btn-success:focus,
.btn-success:not(:disabled):not(.disabled).active,
.btn-success:not(:disabled):not(.disabled):active,
.show > .btn-success.dropdown-toggle {
	background-color: #5ca595;
	border-color: #5ca595;
}

/* Анимация тени при наведении на кнопку */
.btn-success {
	transition: box-shadow .3s ease-in-out;
	transition-delay: 0;
}

/* Эффект тени (свечения) при наведении */
.btn-success:hover,
.btn-success.focus,
.btn-success:focus {
	box-shadow: rgba(92,165,149,.2) 0 0 0 6px;
}

/* Маленькая кнопка */
.btn-sm {
	padding-top: .5rem;
	padding-bottom: .375rem;
	font-size: 1rem;
}

/* Круглая маленькая кнопка (для иконок) */
.btn-circle.btn-sm {
	padding-left: .4375rem;
	padding-right: .4375rem;
	min-width: calc(.875rem + 1.5em + 2px);
}



/* 1.4 Формы */

/* Отступ для контейнера с кнопкой отправки */
.control-btn {
	margin-top: 2rem;
}

/* Кастомная стрелка для выпадающего списка select */
select.form-control {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3e%3cpath fill='%23000000' d='M32,48.1c-1.3,0-2.4-0.5-3.5-1.3L0.8,20.7c-1.1-1.1-1.1-2.7,0-3.7c1.1-1.1,2.7-1.1,3.7,0L32,42.8l27.5-26.1 c1.1-1.1,2.7-1.1,3.7,0c1.1,1.1,1.1,2.7,0,3.7L35.5,46.5C34.4,47.9,33.3,48.1,32,48.1z'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-size: 1rem 1rem;
	background-position: 100% 50%;
	-webkit-appearance: none;
	   -moz-appearance: none;
	        appearance: none;
}

/* Стили для материального дизайна полей ввода */
.form-group-material {
	margin-bottom: .625rem;
	padding-top: 1rem;
	position: relative;
}

/* Плавающая метка (label) */
.form-group-material .label {
	position: absolute;
	left: 0;
	font-size: 1.125rem;
	color: #999999;
	pointer-events: none;
	transform-origin: left top;
	transition: all .3s ease-in-out;
}

/* Уменьшенная метка при активном/заполненном поле */
.form-group-material .label,
.form-group-material.a-form-group.active .label {
	transform: scale(.77777778);
	top: 0;
}

/* Обычное состояние метки (увеличенная, внизу) */
.form-group-material.a-form-group .label {
	transform: scale(1);
	top: 1.5625rem;
}

/* Стили самого поля ввода */
.form-group-material .form-control {
	border-radius: 0;
	border: none;
	border-bottom: #999999 1px solid;
	background-color: transparent;
	padding: .5rem 0;
	font-size: 1.125rem;
	color: #000000;
}

/* Высота для не-текстовых полей */
.form-group-material .form-control:not(textarea) {
	height: calc(1.5em + 1rem + 1px);
}

/* Фокус на поле: убираем тень, меняем цвет нижней границы */
.form-group-material .form-control:focus {
	outline: none;
	box-shadow: none;
	border-bottom-color: #000000;
}

/* Стиль сообщения об ошибке валидации */
label.error {
	margin-top: .5rem;
	margin-bottom: 0;
	color: #b99e64;
}

/* Поле с ошибкой - золотистая рамка */
.form-control.error,
.form-control.error:focus {
	border-color: #b99e64;
	color: #b99e64;
}

/* Стили для поля загрузки файла */
.control-file {
	margin-top: 1.625rem;
	margin-bottom: 2.5rem;
	position: relative;
}

/* Иконка скрепки внутри поля файла */
.control-file i {
	position: absolute;
	left: -.25rem;
	top: .5625rem;
	font-size: 1.625rem;
}

/* Обертка для пути к файлу */
.control-file .file-path-wrapper {
	overflow: hidden;
}

/* Поле отображения выбранного файла */
.control-file input.file-path {
	padding: 0 0 0 2.125rem;
	border: none;
	border-radius: 0;
	background: transparent;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 1.125rem;
}

/* Плейсхолдер для поля файла (подчеркнутый, золотистый) */
.control-file input.file-path::-moz-placeholder {
	color: #b99e64;
	text-decoration: underline;
	opacity: 1;
	transition: color .3s ease;
}

.control-file:hover input.file-path::-moz-placeholder {
	color: #5ca595;
}

.control-file input.file-path:-ms-input-placeholder {
	color: #b99e64;
	text-decoration: underline;
	transition: color .3s ease;
}

.control-file:hover input.file-path:-ms-input-placeholder {
	color: #5ca595;
}

.control-file input.file-path::-webkit-input-placeholder {
	color: #b99e64;
	text-decoration: underline;
	transition: color .3s ease;
}

.control-file:hover input.file-path::-webkit-input-placeholder {
	color: #5ca595;
}

/* Прозрачный input type=file, накладывающийся поверх */
.control-file input[type=file] {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	z-index: 10;
	width: 100%;
	margin: 0;
	padding: 0;
	font-size: 1.125rem;
	cursor: pointer;
	opacity: 0;
	filter: alpha(opacity=0)
}

/* Скрываем стандартную кнопку выбора файла */
.control-file input[type=file]::-webkit-file-upload-button {
	display: none;
}



/* 1.5 Анимации */

/* Ключевые кадры: появление с масштабированием и сдвигом */
@-webkit-keyframes fadeZooming {
	from {
		opacity: 0;
		-webkit-transform: scale3d(.6, .6, .6);
		transform: scale3d(.6, .6, .6);
		margin-left: -12rem;
	}

	100% {
		opacity: 1;
		margin-left: 0;
	}
}

@keyframes fadeZooming {
	from {
		opacity: 0;
		-webkit-transform: scale3d(.6, .6, .6);
		transform: scale3d(.6, .6, .6);
		margin-left: -12rem;
	}

	100% {
		opacity: 1;
		margin-left: 0;
	}
}

.fadeZooming {
	-webkit-animation-name: fadeZooming;
	animation-name: fadeZooming;
}

/* Ключевые кадры: появление сверху вниз */
@-webkit-keyframes fadeInDown {
	from {
		opacity: 0;
		-webkit-transform: translate3d(0, -6.5rem, 0);
		transform: translate3d(0, -6.5rem, 0);
	}

	to {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

@keyframes fadeInDown {
	from {
		opacity: 0;
		-webkit-transform: translate3d(0, -6.5rem, 0);
		transform: translate3d(0, -6.5rem, 0);
	}

	to {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

.fadeInDown {
	-webkit-animation-name: fadeInDown;
	animation-name: fadeInDown;
}

/* Ключевые кадры: появление снизу вверх */
@-webkit-keyframes fadeInUp {
	from {
		opacity: 0;
		-webkit-transform: translate3d(0, 10rem, 0);
		transform: translate3d(0, 10rem, 0);
	}

	to {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		-webkit-transform: translate3d(0, 10rem, 0);
		transform: translate3d(0, 10rem, 0);
	}

	to {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

.fadeInUp {
	-webkit-animation-name: fadeInUp;
	animation-name: fadeInUp;
}

/* Ключевые кадры: появление слева */
@-webkit-keyframes fadeInLeft {
	from {
		opacity: 0;
		-webkit-transform: translate3d(-10rem, 0, 0);
		transform: translate3d(-10rem, 0, 0);
	}

	to {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

@keyframes fadeInLeft {
	from {
		opacity: 0;
		-webkit-transform: translate3d(-10rem, 0, 0);
		transform: translate3d(-10rem, 0, 0);
	}

	to {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

/* Ключевые кадры: появление справа */
@-webkit-keyframes fadeInRight {
	from {
		opacity: 0;
		-webkit-transform: translate3d(10rem, 0, 0);
		transform: translate3d(10rem, 0, 0);
	}

	to {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

@keyframes fadeInRight {
	from {
		opacity: 0;
		-webkit-transform: translate3d(10rem, 0, 0);
		transform: translate3d(10rem, 0, 0);
	}

	to {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

.fadeInRight {
	-webkit-animation-name: fadeInRight;
	animation-name: fadeInRight;
}



/*-------------------------------------------------------------------------------
  2. Прелоадер (анимация загрузки страницы)
/* ------------------------------------------------------------------------------- */

.preloader {
	position: fixed;
	overflow: hidden;
	z-index: 999999;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: #f5f4f0;
	text-align: center;
}

/* Контейнер для анимированных шариков */
.three-bounce {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

/* Стили для трех прыгающих шариков */
.three-bounce > div {
	display: inline-block;
	width: 18px;
	height: 18px;
	border-radius: 100%;
	background-color: #c06451;
	-webkit-animation: bouncedelay 1.4s infinite ease-in-out both;
	animation: bouncedelay 1.4s infinite ease-in-out both;
}

/* Задержки для каждого шарика */
.three-bounce .one {
	-webkit-animation-delay: -0.32s;
	animation-delay: -0.32s;
}

.three-bounce .two {
	-webkit-animation-delay: -0.16s;
	animation-delay: -0.16s;
}

/* Анимация прыгающих шариков */
@-webkit-keyframes bouncedelay {
	0%, 80%, 100% { -webkit-transform: scale(0); }
	40% { -webkit-transform: scale(1) }
}

@keyframes bouncedelay {
	0%, 80%, 100% { -webkit-transform: scale(0); transform: scale(0); }
	40% { transform: scale(1); -webkit-transform: scale(1); }
}



/*-------------------------------------------------------------------------------
  3. Шапка сайта (Header)
-------------------------------------------------------------------------------*/

.header {
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
	margin-top: 0;
}

/* Цвет текста в шапке */
.header .container-fluid {
	color: #000000;
	transition: color .3s ease-in-out;
}

/* Увеличенные отступы на планшетах */
@media (min-width: 768px) {
	.header {
		padding-top: 2.75rem;
		padding-bottom: 2.75rem;
	}
}

/* Фиксированная шапка (прилипает к верху) */
.header-fixed {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 900;
}

/* Фон шапки (появляется при скролле) */
.header-bg {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 0;
	z-index: -1;
	background-color: #ffffff;
	box-shadow: 0 0 0px rgba(0,0,0,0.1);
	transition: .3s ease-in-out;
}

/* Класс, добавляемый при скролле для показа фона */
.header-shadow .header-bg {
	height: 100%;
	box-shadow: 0 0 30px rgba(0,0,0,0.1);
}

/* Бренд/логотип слева */
.brand {
	float: left;
	margin-right: 1rem;
	white-space: nowrap;
	font-size: 1.5rem;
	text-transform: uppercase;
}

.brand a {
	color: inherit;
	text-decoration: none;
}

/* Контент шапки (теги и контакты) */
.header-content {
	margin-left: 17.25%;
	margin-right: 17.25%;
	padding-top: 3px;
}

/* Слоган/теглайн */
.header-tagline {
	padding-top: 2px;
	font-size: .875rem;
	line-height: 1.28571429;
	color: #999999;
	font-weight: bold;
	text-transform: uppercase;
	transition: color .3s ease-in-out;
}

/* Контакты в шапке */
.header-contacts {
	font-weight: bold;
	text-transform: uppercase;
	font-size: .875rem;
}

/* Элемент контакта и разделитель */
.header-contact-item,
.header-contact-divider {
	display: inline-block;
	vertical-align: middle;
}

.header-contact-divider {
	margin-left: 1.875rem;
	margin-right: 1.875rem;
	opacity: .2;
}

/* Ссылки телефона и почты */
.phone-link,
.phone-link:hover,
.mail-link,
.mail-link:hover {
	color: inherit;
	text-decoration: none;
}

/* Телефон не кликабельный (курсор по умолчанию) */
.phone-link {
	cursor: default;
}

/* Кнопка-бургер для мобильного меню */
.nav-toggle-btn {
	background: none;
	border: none;
	padding: .625rem 0;
	margin: 0;
	border-radius: 0;
	outline: none;
	float: right;
	position: relative;
	z-index: 995;
	font-weight: bold;
	text-transform: uppercase;
	color: inherit;
}

.nav-toggle-btn:hover {
	color: #b11d11;
}

.nav-toggle-btn:focus {
	outline: none;
}

/* Иконка бургера (три полоски) */
.nav-toggle {
	display: block;
	width: 32px;
}

/* Стили для каждой полоски */
.nav-toggle .stick {
	display: block;
	width: 100%;
	border-radius: 3px;
	height: 3px;
	background: #000000;
	transition: all .3s;
	position: relative;
}

.nav-toggle .stick + .stick {
	margin-top: 9px;
}

/* Анимация превращения бургера в крестик */
.body-menu-opened .nav-toggle .stick-1 {
	animation: ease .5s top forwards;
}

.nav-toggle .stick-1 {
	animation: ease .5s top-2 forwards;
}

.body-menu-opened .nav-toggle .stick-2 {
	animation: ease .5s bottom forwards;
}

.nav-toggle .stick-2 {
	animation: ease .5s bottom-2 forwards;
}

@keyframes top {
	0% {
		top: 0;
		transform: rotate(0);
	}
	50% {
		top: 6px;
		transform: rotate(0);
	}
	100% {
		top: 6px;
		transform: rotate(45deg);
	}
}

@keyframes top-2 {
	0% {
		top: 6px;
		transform: rotate(45deg);
	}
	50% {
		top: 6px;
		transform: rotate(0deg);
	}
	100% {
		top: 0;
		transform: rotate(0deg);
	}
}

@keyframes bottom {
	0% {
		bottom: 0;
		transform: rotate(0);
	}
	50% {
		bottom: 6px;
		transform: rotate(0);
	}
	100% {
		bottom: 6px;
		transform: rotate(135deg);
	}
}

@keyframes bottom-2 {
	0% {
		bottom: 6px;
		transform: rotate(135deg);
	}
	50% {
		bottom: 6px;
		transform: rotate(0);
	}
	100% {
		bottom: 0;
		transform: rotate(0);
	}
}



/* Выезжающее меню (сайдбар) */
.menu {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 990;
	background: #ffffff;
	max-width: 100%;
	width: 100%;
	padding: 4.25rem 4.375rem 4.1875rem;
	display: flex;
	flex-direction: column;
	transition: transform .4s ease-in-out;
	-webkit-transform: translateX(100%);
		transform: translateX(100%);
}

/* При открытом меню сдвигаем его в поле зрения */
.body-menu-opened .menu {
	-webkit-transform: translateX(0%);
		transform: translateX(0%);
}

/* Затемнение фона при открытом меню */
.hide-menu {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 100%;
	background: rgba(0,0,0,.65);
	z-index: 980;
}

.body-menu-opened .hide-menu {
	bottom: 0;
}

/* Ширина меню на мобильных и планшетах */
@media (min-width: 576px) {
	.menu {
		width: 27.5rem;
	}

	.modal-dialog {
    	max-width: 450px;
	}
}

/* Анимация появления элементов меню */
.menu .menu-lang,
.menu .menu-main,
.menu .social,
.menu .menu-footer {
	opacity: 0;
	transform: translateY(3rem);
	transition: all .5s ease-in-out;
}

/* Задержки для последовательного появления */
.menu .menu-lang {
	transition-delay: .2s;
}

.menu .menu-main {
	transition-delay: .4s;
}

.menu .social {
	transition-delay: .6s;
}

.menu .menu-footer {
	transition-delay: .8s;
}

.body-menu-opened .menu .menu-lang,
.body-menu-opened .menu .menu-main,
.body-menu-opened .menu .social,
.body-menu-opened .menu .menu-footer {
	opacity: 1;
	transform: translateY(0);
}

/* Переключатель языков в меню */
.menu .menu-lang {
	padding-bottom: 5.875rem;
	padding-bottom: 8.70370370vmin;
}

.menu-lang {
	font-size: .875rem;
	text-transform: uppercase;
	font-weight: 600;
}

.menu-lang-item {
	display: inline-block;
	margin-right: 1.5rem;
	color: #a3a4a8;
	text-decoration: none;
}

.menu-lang-item.active,
.menu-lang-item:hover {
	color: #1f2044;
	text-decoration: none;
}

/* Основная навигация меню */
.menu-main {
	height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	font-size: 1.375rem;
	font-weight: bold;
}

.menu-main > ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.menu-main > ul > li {
	margin-bottom: 1.1875rem;
	padding-left: 2px;
}

.menu-main a,
.menu-main a:hover {
	color: #1f2044;
	text-decoration: none;
}

/* Активный пункт меню или при наведении */
.menu-main .active > a,
.menu-main a:hover {
	color: #b99e64;
}

/* Декоративная точка после пункта меню */
.menu-main a:after {
	content: ".";
	opacity: 0;
	display: inline-block;
	transform: translate(2rem,0);
	transition: all .3s ease-in-out;
}

.menu-main .active a:after {
	transform: translate(0,0);
	opacity: 1;
}

/* Футер меню */
.menu-footer {
	padding-top: 3rem;
}

.menu-copyright {
	margin-top: 2rem;
	text-transform: uppercase;
	font-size: .875rem;
	font-weight: bold;
	color: #999999;
}



/*-------------------------------------------------------------------------------
  4. Главная страница (личное портфолио)
-------------------------------------------------------------------------------*/

/* Плавный переход для ссылок */
.content a {
	transition: color .3s ease;
}

/* Отступы контейнера на мобильных */
@media (max-width: 575px) {
	.homepage-personal .container {
		padding-left: 43px;
		padding-right: 43px;
	}

	.homepage-personal .slide-personal-projects .container {
		padding-right: 53px;
	}
}

/* Стили для навигации pagepiling (точки справа) */
#pp-nav.right {
	right: 0;
}

#pp-nav li {
	width: auto;
	height: auto;
	margin: .5rem;
}

#pp-nav li a {
	display: block;
	padding: .375rem;
}

#pp-nav span {
	display: block;
	position: static;
	width: .625rem;
	height: .625rem;
	border: none;
	background-color: #e3e3e3;
	transition: background-color .3s ease-in-out;
}

#pp-nav a:hover span {
	background-color: #aaaaaa;
}

#pp-nav li .active span {
	background-color: #b99e64;
}

/* Отступ навигации на широких экранах */
@media (min-width: 1600px) {
	#pp-nav.right {
		right: 3.5rem;
	}
}

/* Прокручиваемый слайд */
.pp-scrollable {
	background-color: #ffffff;
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

/* Темный фон слайда */
.slide-dark {
	background-color: #f5f4f0;
}

/* Номер слайда */
.slide-num {
	margin-bottom: 1rem;
	position: relative;
	z-index: 200;
	font-family: 'MonumentExtended', sans-serif;
	font-size: 1.125rem;
	color: #999999;
	transition: color .3s ease-in-out;
}

/* Фиксированное положение номера слайда на широких экранах */
@media (min-width: 1400px) {
	.slide-num {
		position: fixed;
		left: 15px;
		top: 29.62962963vmin;
		z-index: 100;
		margin-bottom: 0;
	}
}

@media (min-width: 1600px) {
	.slide-num {
		left: 4.25rem;
	}
}

/* Контейнер слайда (вертикальное центрирование) */
.slide-container {
	width: 100%;
	min-height: 100%;
	display: flex;
	align-items: center;
	padding-top: 7.75rem;
	padding-bottom: 3.25rem;
	position: relative;
}

.slide-container > .container {
	position: relative;
	z-index: 200;
}

/* Заголовок слайда */
.slide-title {
	margin-bottom: 2rem;
	font-size: 6vmin;
	font-family: 'MonumentExtended', sans-serif;
	line-height: 1;
	color: #b99e64;
	text-transform: uppercase;
}

@media (min-width: 768px) {
	.slide-title {
		font-size: 7.40740741vmin;
	}
}

/* Крупный заголовок (цифра 23) */
.slide-title-lg {
	margin-left: -.25rem;
	font-size: 6.875rem;
}

/* Подзаголовок слайда */
.slide-title-sub {
	margin-bottom: 2.75rem;
	font-size: 1.375rem;
	font-family: 'MonumentExtended', sans-serif;
	line-height: 1.45454545;
	color: #111111;
	text-transform: uppercase;
	letter-spacing: .025em;
}

.text-white .slide-title-sub {
	color: #ffffff;
}

/* Маленький подзаголовок */
.slide-title-sub-sm {
	font-size: 1.125rem;
	line-height: 1.55555556;
}

/* Средний подзаголовок */
.slide-title-sub-md {
	font-size: 1.25rem;
}

/* Информационный заголовок */
.slide-title-info {
	font-size: 1.875rem;
	font-weight: bold;
	line-height: 1.35;
	letter-spacing: -.035em;
}

/* Описание слайда */
.slide-descr {
	color: #999999;
	font-size: 1.125rem;
	line-height: 1.66666667;
}

.text-white .slide-descr {
	color: #ffffff;
}

/* Специальный отступ для описания в интро */
.slide-descr-intro {
	margin-right: 18%;
}

/* Кнопка на слайде */
.slide-btn {
	margin-top: 6.85185185vmin;
}

/* Анимации элементов только на активном слайде */
.section:not(.active) .animate-element {
	animation-name: none;
}

.section.active .animate-element {
	animation-duration: .7s;
	animation-fill-mode: both;
}

/* Задержки анимации */
.section.active .delay1 { animation-delay: .1s; }
.section.active .delay2 { animation-delay: .2s; }
.section.active .delay3 { animation-delay: .3s; }
.section.active .delay4 { animation-delay: .4s; }
.section.active .delay5 { animation-delay: .5s; }
.section.active .delay6 { animation-delay: .6s; }
.section.active .delay7 { animation-delay: .7s; }
.section.active .delay8 { animation-delay: .8s; }
.section.active .delay9 { animation-delay: .9s; }
.section.active .delay10 { animation-delay: 1s; }

/* Классы для круглых декоративных элементов */
[class^="circle-"],
[class*=" circle-"] {
	border-radius: 70.625rem;
	transition: all .7s ease-in-out;
}

/* Цвета кругов */
.circle-golden { background-color: #b99e64; }
.circle-brown { background-color: #c06451; }
.circle-light { background-color: #f5f4f0; }
.circle-green { background-color: #5ca595; }

/* Анимации появления кругов (сдвиг из-за края) */
.transformLeft {
	transform: translate(-100%,0);
	opacity: 0;
}

.transformRight {
	transform: translate(100%,0);
	opacity: 0;
}

.active .transformLeft,
.active .transformRight {
	transform: translate(0%,0);
	opacity: 1;
}



/* 4.1 Слайд Вступление (Intro) */

/* Фоновое изображение для слайда вступления */
.slide-personal-intro {
	background-image: url("../img/bg-personal-intro.png");
	background-size: cover;
}

/* Общий контейнер для фоновых элементов */
.slide-bg {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 10;
	overflow: hidden;
	background-size: cover;
	background-position: 50% 50%;
	background-repeat: no-repeat;
}

/* Абсолютно позиционированное фото */
.slide-photo {
	position: absolute !important;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 50% 50%;
}

/* Фото девушки на слайде */
.slide-intro-man {
	background-image: url("../img/bg-personal-intro-man.png");
	background-position: 50% 50%;
}

/* Декоративные круги на слайде вступления */
.slide-intro-circle1 {
	width: 10.0625rem;
	height: 10.0625rem;
	left: -4.5rem !important;
	top: 45.46296296% !important;
	bottom: auto;
	right: auto;
}

.slide-intro-circle2 {
	width: 70.625rem;
	height: 70.625rem;
	left: 58.85416667% !important;
	top: 46.66666667% !important;
	bottom: auto;
	right: auto;
}



/* 4.2 Слайд Услуги (Services) */

/* Декоративные круги */
.slide-services-circle1 {
	width: 8.3125rem;
	height: 8.3125rem;
	right: -3.9375rem !important;
	top: 18.51851852% !important;
	bottom: auto;
	left: auto !important;
}

.slide-services-circle2 {
	width: 55rem;
	height: 55rem;
	left: -8.4375% !important;
	top: 49.44444444% !important;
	bottom: auto;
	right: auto;
}

/* Стили для списка услуг */
.service-list {
	margin-bottom: -1.75rem;
}

.service-item {
	margin-bottom: 3.75rem;
}

.service-item-title {
	margin-bottom: .5625rem;
}

.service-item-more {
	margin-top: 1.6875rem;
}

/* Описание услуг */
.slide-descr-personal-services {
	margin-right: 10%;
	margin-top: 2.375rem;
	margin-bottom: 2rem;
}

@media (min-width: 768px) {
	.slide-descr-personal-services {
		margin-top: 22.375rem;
		margin-bottom: 0;
	}
}

@media (min-width: 992px) {
	.slide-descr-personal-services {
		margin-right: 35%;
		margin-top: 14.375rem;
	}
}



/* 4.3 Слайд Проекты (Projects) */

/* Карусель проектов на весь экран */
.carousel-project-personal {
	min-height: 100%;
	display: flex !important;
}

.carousel-project-personal .owl-stage-outer {
	display: flex;
	overflow: visible;
}

.carousel-project-personal.owl-carousel .owl-stage {
	display: flex;
	flex-wrap: nowrap;
}

.carousel-project-personal.owl-carousel .owl-item {
	height: 100%;
	float: none;
	min-height: 100%;
}

.carousel-project-personal .carousel-project-item {
	height: 100%;
}

/* Стили навигации карусели */
.owl-theme .owl-nav {
	margin-top: 0;
}

.owl-carousel .owl-nav button.owl-next,
.owl-carousel .owl-nav button.owl-prev,
.carousel-nav button {
	border: none;
	background-color: transparent;
	padding: 0;
	margin: 0;
	font-size: 2.375rem;
	transition: all .3s ease-in-out;
	color: #999999;
}

/* Кнопки навигации карусели проектов (белые) */
.carousel-project-personal.owl-carousel .owl-nav button {
	position: absolute;
	top: 50%;
	z-index: 100;
	transform: translate(0,-50%);
	width: 4.375rem;
	color: rgba(255,255,255,.6);
}

.carousel-project-personal.owl-carousel .owl-nav button.owl-prev {
	left: -.5rem;
}

.carousel-project-personal.owl-carousel .owl-nav button.owl-next {
	right: 1rem;
}

/* Позиционирование кнопок на широких экранах */
@media (min-width: 1500px) {
	.carousel-project-personal.owl-carousel .owl-nav button,
	.carousel-project-personal.owl-carousel .owl-nav button.owl-prev {
		left: 50%;
		right: auto;
		transform: translate(-50%,-50%);
	}

	.carousel-project-personal.owl-carousel .owl-nav button.owl-prev {
		margin-left: -46rem;
	}

	.carousel-project-personal.owl-carousel .owl-nav button.owl-next {
		margin-left: 46rem;
	}
}

/* Фоновое изображение проекта */
.carousel-project-item {
	background-position: 50% 50%;
	background-size: cover;
	background-repeat: no-repeat;
}



/* 4.4 Слайд Награды (Awards) */

/* Фон слайда наград */
.slide-personal-awards .slide-bg {
	background-image: url("../img/bg-personal-awards.png");
}

/* Декоративные круги */
.slide-awards-circle1 {
	width: 8.125rem;
	height: 8.125rem;
	left: -4.0625rem !important;
	top: 50.92592593% !important;
	bottom: auto !important;
	right: auto !important;
}

.slide-awards-circle2 {
	width: 45.3125rem;
	height: 45.3125rem;
	right: -15.625% !important;
	top: 82.59259259% !important;
	bottom: auto !important;
	left: auto !important;
}

/* Карточка награды */
.award-item {
	background: #f5f4f0;
	border-radius: 1rem 1rem 3rem 1rem; /* Скругленные углы (нижний правый больше) */
	padding: 2.1875rem 2.5rem;
}

.award-list .award-item {
	margin-top: 4rem;
}

/* Дата награды */
.award-item-date {
	margin-bottom: .625rem;
	font-size: .875rem;
	color: #999999;
	text-transform: uppercase;
	font-weight: bold;
}

/* Логотип награды */
.award-item-logo {
	margin-bottom: .75rem;
	height: 9rem;
	display: flex;
	overflow: hidden;
	align-items: center;
}

.award-item-logo img {
	max-width: 100%;
	max-height: 100%;
}



/* 4.5 Слайд Опыт работы (Experience) */

/* Декоративные изображения на фоне */
.slide-experience-image1 {
	width: 15.5rem;
	height: 15.5rem;
	background-image: url("../img/bg-personal-experience-glasses.png");
	background-size: contain;
	position: absolute;
	top: 7.5% !important;
	right: 3.125% !important;
	bottom: auto !important;
	left: auto !important;
}

.slide-experience-image2 {
	width: 41.3125rem;
	height: 31.25rem;
	background-image: url("../img/bg-personal-experience-device.png");
	background-size: contain;
	position: absolute;
	top: 81.94444444% !important;
	right: 8.59375% !important;
	bottom: auto !important;
	left: auto !important;
}

.slide-experience-image3 {
	width: 42.875rem;
	height: 39.4375rem;
	background-image: url("../img/bg-personal-experience-briefcase.png");
	background-size: contain;
	position: absolute;
	top: 27% !important;
	right: 89% !important;
	bottom: auto !important;
	left: auto !important;
}

/* Разделитель между элементами опыта */
.experience-item:not(:first-child) {
	border-top: #e1ddd6 1px solid;
}

.experience-item {
	padding-top: 1.625rem;
}

/* Цвета компаний */
.company-blue { color: #1774eb; }
.company-pink { color: #f73163; }
.company-green { color: #1dd05d; }

/* Навигация карусели опыта */
.carousel-nav {
	margin-right: -.625rem;
}

.carousel-nav .owl-next {
	margin-left: .5rem;
}

@media (min-width: 768px) {
	.carousel-nav .owl-next {
		margin-left: 2rem;
	}
}



/* 4.6 Слайд Клиенты (Clients) */

/* Фон слайда клиентов */
.slide-personal-clients .slide-bg {
	background-image: url("../img/bg-personal-clients.png");
}

/* Иконки достижений */
.icon-partners {
	display: inline-block;
	vertical-align: top;
	width: 3.75rem;
	height: 3.75rem;
	background-image: url("../img/icon-partners.png");
	background-position: 50% 50%;
	background-size: 100%;
	background-repeat: no-repeat;
}

.icon-project {
	display: inline-block;
	vertical-align: top;
	width: 3.75rem;
	height: 3.75rem;
	background-image: url("../img/icon-project.png");
	background-position: 50% 50%;
	background-size: 100%;
	background-repeat: no-repeat;
}

.icon-worldwide {
	display: inline-block;
	vertical-align: top;
	width: 3.75rem;
	height: 3.75rem;
	background-image: url("../img/icon-worldwide.png");
	background-position: 50% 50%;
	background-size: 100%;
	background-repeat: no-repeat;
}

/* Контейнер для логотипов клиентов (облако) */
.clients-photo {
	height: 0;
	padding-bottom: 103.50877193%;
	margin-top: 2rem;
	margin-bottom: 2rem;
	position: relative;
}

/* Позиционирование каждого логотипа в облаке */
.clients-photo .clients-photo-item1 {
	width: 19.29824561%;
	top: 43.05084746%;
	left: 6.31578947%;
}

.clients-photo .clients-photo-item2 {
	top: 0%;
	left: 57.54385965%;
}

.clients-photo .clients-photo-item3 {
	top: 48.81355932%;
	right: 0;
}

.clients-photo .clients-photo-item4 {
	top: 11.52542373%;
	left: 11.57894737%;
}

.clients-photo .clients-photo-item5 {
	width: 31.92982456%;
	bottom: 0;
	right: 3.50877193%;
}

.clients-photo .clients-photo-item6 {
	width: 17.54385965%;
	bottom: 6.10169492%;
	left: 31.57894737%;
}

.clients-photo .clients-photo-item7 {
	width: 49.12280702%;
	top: 23.05084746%;
	left: 31.92982456%;
}

.clients-photo .clients-photo-item8 {
	width: 12.28070175%;
	top: 73.55932203%;
	left: 6.31578947%;
}



/* 4.7 Слайд Отзывы (Testimonials) */

/* Декоративные круги */
.slide-testimonials-circle1 {
	width: 10.5625rem;
	height: 10.5625rem;
	left: -14.89361702%;
	top: -11.70212766%;
}

.slide-testimonials-circle2 {
	width: 17.5rem;
	height: 17.5rem;
	left: 64.893617023%;
	top: 65.95744681%;
}

.slide-testimonials-circle3 {
	width: 6.875rem;
	height: 6.875rem;
	left: 27.55208333%;
	top: 100%;
	margin-top: -3.75rem;
}

/* Фон слайда отзывов */
.slide-personal-testimonials .slide-bg {
	background-image: url("../img/bg-personal-testimonials.png");
}

/* Аватар и логотип компании в отзыве */
.testimonials-item-avatar-container {
	margin-bottom: 3.25rem;
}

.testimonial-item-avatar,
.testimonial-item-company {
	display: inline-block;
	vertical-align: top;
	margin-right: -1.25rem;
	width: 4.375rem;
}

.avatar > .inside {
	display: block;
	height: 0;
	padding-bottom: 100%;
	border-radius: 500px;
	overflow: hidden;
	background-position: 50% 30%;
	background-repeat: no-repeat;
	background-size: cover;
}

/* Рейтинг (звезды) */
.testimonials-item-rating {
	margin-bottom: .875rem;
	color: #ffc705;
}

/* Ссылка на видео с анимацией */
.center-icon {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 100;
	transform: translate(-50%,-50%);
	color: #ffffff;
	font-size: 2.75rem;
}

.center-icon i {
	display: block;
	transform: scale(1);
	transition: all .3s ease-in-out;
}

a:hover .center-icon i {
	transform: scale(1.2);
}



/* 4.8 Слайд Контакты (Contact) */

/* Декоративные круги */
.slide-contacts-circle1 {
	width: 60.5625rem;
	height: 60.5625rem;
	top: 46.94444444%;
	left: -3.4375%;
}

.slide-contacts-circle2 {
	width: 8.125rem;
	height: 8.125rem;
	top: 15.55555556%;
	right: -2.96875%;
	left: auto;
}

/* Карточка с контактной информацией */
.contact-personal-card {
	height: 100%;
	display: flex;
	flex-direction: column;
}

.contact-personal-card-title {
	height: 100%;
}

.contact-personal-card .title-mini {
	margin-bottom: 2.875rem;
}

.contact-personal-card .slide-title-sub {
	margin-bottom: 1.6875rem;
}



/*-------------------------------------------------------------------------------
  5. Подвал (Footer)
-------------------------------------------------------------------------------*/

/* Социальные иконки */
.social {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 1.3125rem;
}

.social li {
	display: inline-block;
	vertical-align: middle;
	margin-right: 1rem;
}

.social a {
	color: #999999;
	transition: color .3s ease;
}

.social a:hover {
	color: #000000;
}

/* Фиксированные соцсети слева */
.social-fixed {
	position: fixed;
	z-index: 300;
	left: 15px;
	bottom: 0rem;
}

.social-fixed li {
	display: block;
	margin-right: 0;
	margin-bottom: 1.375rem;
}

/* Копирайт */
.copyright {
	text-align: right;
	color: #999999;
	font-weight: bold;
	font-size: .875rem;
	text-transform: uppercase;
	transition: all .3s ease-in-out;
}

/* Фиксированный копирайт справа */
.copyright-fixed {
	position: fixed;
	right: 15px;
	bottom: 1.5rem;
	z-index: 300;
}

/* Отступы на широких экранах */
@media (min-width: 1600px) {
	.social-fixed {
		left: 4.25rem;
		bottom: 2rem;
	}

	.copyright-fixed {
		right: 4.25rem;
		bottom: 3.5rem;
	}
}

/* Стили для темного фона (меняют цвет элементов) */
.body-bg-dark .header:not(.header-shadow) .container-fluid {
	color: #ffffff;
}

.body-bg-dark .header:not(.header-shadow) .header-tagline,
.body-bg-dark .copyright,
.body-bg-dark .slide-num,
.body-bg-dark .footer .social a,
.body-copyright-light .copyright {
	color: rgba(255,255,255,.6);
}

.body-bg-dark .social a:hover {
	color: #ffffff;
}

.body-bg-dark .header:not(.header-shadow) .nav-toggle .stick,
.body-bg-dark #pp-nav li a:not(.active) span {
	background: #ffffff;
}

.body-menu-opened .body-bg-dark .nav-toggle .stick {
	background: #000000;
}



/*-------------------------------------------------------------------------------
  6. Модальное окно (Modal)
-------------------------------------------------------------------------------*/

.modal-content {
	border: none;
	border-radius: 1rem 1rem 3rem 1rem;
}

.modal-header {
	padding-top: 2rem;
	padding-bottom: .5rem;
	border-bottom: none;
}

.modal-header,
.modal-body,
.modal-footer {
	padding-left: 2rem;
	padding-right: 2rem;
}

.modal-body {
	padding-bottom: 2rem;
}

.modal-title {
	font-family: 'MonumentExtended', sans-serif;
	font-size: 2rem;
	color: #b99e64;
	text-transform: uppercase;
}

.modal-header .close {
	padding: .5rem;
	position: relative;
	top: -.5rem;
	right: -.5rem;
	font-size: 1.5rem;
	line-height: .75;
}

/* Сообщения об успехе/ошибке (скрыты по умолчанию) */
.message {
	display: none;
}



/* Адаптивные размеры шрифта для разных разрешений */
@media (min-width: 768px) {
	html {
		font-size: 13px;
	}
}

@media (min-width: 992px) {
	html {
		font-size: 14px;
	}
}

@media (min-width: 1280px) {
	html {
		font-size: 15px;
	}
}

@media (min-width: 1600px) {
	html {
		font-size: 16px;
	}
}