/* Подключение шрифтов */
@font-face {
    font-family: 'Moloko';
    src: url('../fonts/Moloko.ttf') format('truetype'),
         url('../fonts/Moloko.woff') format('woff');
}

@font-face {
    font-family: 'MOLOKO-by-Weekends';
    src: url('../fonts/MOLOKO-by-Weekends.ttf') format('truetype'),
         url('../fonts/MOLOKO-by-Weekends.woff') format('woff');
}

@font-face {
    font-family: 'Reef-Bold';
    src: url('../fonts/Reef-Bold.ttf') format('truetype'),
         url('../fonts/Reef-Bold.woff') format('woff');
}

body.home-page {
    margin: 0;
    font-family: 'Moloko', Arial, sans-serif; /* Основной шрифт для тела страницы */
    background-image: url('../media/img/grad.png'); /* Путь к фоновому изображению */
	background-size: 100% 100%; /* Размер фонового зображения */
    background-repeat: no-repeat; /* Фоновое изображение не повторяется */
	-webkit-user-select: none; /* Запрет на выделение текста */
}

/* Стили ТОЛЬКО для мобильных устройств (экраны меньше 768px) */
@media (max-width: 768px) {
    body.home-page {
        background-size: 480% auto;    /* На мобилках сильно увеличиваем */
        background-position: 28% center; /* И смещаем градиент */
        background-repeat: repeat;       /* Включаем повторение */
    }
}

body.works-page {
    margin: 0;
    font-family: 'Moloko', Arial, sans-serif; /* Основной шрифт для тела страницы */
    background-image: url('../media/img/grad_page2.png'); /* Путь к фоновому изображению */
	background-size: 100% 100%; /* Размер фонового зображения */
    background-repeat: no-repeat; /* Фоновое изображение не повторяется */
	-webkit-user-select: none; /* Запрет на выделение текста */
}

/* Стили ТОЛЬКО для мобильных устройств (экраны меньше 768px) */
@media (max-width: 768px) {
    body.works-page {      
        background-size: 150% 100%; /* Делаем картинку широкой, чтобы её можно было двигать */     
        background-position: 20% 0%; /* Сдвиг на 20% влево и 0% в самый верх сработает если увеличить background-size */
        background-repeat: no-repeat; /* Запрещаем дублирование */
        background-attachment: fixed; /* Фиксируем волну на экране при скролле */
    }
}

header {
    background-color: rgba(0, 0, 0, 0.025); /* Полупрозрачный фон для шапки */
    color: white;
    padding: 10px 0;
}

/* Ограничение ширины шапки выравнивание с содержимым main */
nav {
	display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
	padding-left: 15px;
    padding-right: 15px;
}

nav #logo img {
    max-height: 65px; /* Ограничение высоты логотипа */
}

nav #logo a {
    display: inline-block; /* Делаем логотип ссылкой */
    cursor: pointer; /* Добавляем стиль курсора для ссылки */
}

nav .logo-and-email a {
    font-family: 'Reef-Bold', Arial, sans-serif; /* Шрифт для почты */
    color: #7b7bff; /* Цвет почты */
	font-size: 2.0em; /* Увеличиваем размер шрифта для почты */
}

.logo-and-email {
    display: flex;
    align-items: center;
}

.logo-and-email #logo {
	margin-right: -20px; /* Уменьшаем расстояние между логотипом и адресом электронной почты и выравниваем по правому краю*/
	margin-left: -20px;
}

nav a {
    color: white;
    text-decoration: none;
    margin: 0 15px;
    display: inline-block;
}

nav label {
    display: none;
}

nav input[type="checkbox"] {
    display: none;
}

/* Стили для пунктов меню */
nav .menu a {
    font-size: 2.8em; /* Увеличиваем размер шрифта для пунктов меню */
    padding: 5px 10px; /* Внутренние отступы */
    border-radius: 10px; /* Скругление углов */
    display: inline-block; /* Для применения отступов и скругления */
    margin: 5px 5px; /* Добавляем немного маржина между элементами */
    transition: background-color 0.3s; /* Плавный переход фона */
}

/* Стили для пунктов страница Home */
/* Стили для пунктов меню с индивидуальными фоновыми цветами и белым текстом */
nav a[href="#home"] { background-color: #7b7bff; color: white; }
nav a[href="#about"] { background-color: #a5a5ff; color: white; }
nav a[href="#works"] { background-color: #b7cbff; color: white; }
nav a[href="#contacts"] { background-color: #bbeae9; color: white; }

/* Стили для пунктов меню при наведении */
nav a[href="#home"]:hover { background-color: #6868ff; }
nav a[href="#about"]:hover { background-color: #8a8aff; }
nav a[href="#works"]:hover { background-color: #a0b0ff; }
nav a[href="#contacts"]:hover { background-color: #9adada; }

/* Стили для пунктов страница Works */
/* Стили для пунктов меню с индивидуальными фоновыми цветами и белым текстом для других страниц сайта */
nav a[href="index.html#home"] { background-color: #7b7bff; color: white; }
nav a[href="index.html#about"] { background-color: #a5a5ff; color: white; }
nav a[href="index.html#works"] { background-color: #b7cbff; color: white; }
nav a[href="index.html#contacts"] { background-color: #bbeae9; color: white; }

/* Стили для пунктов меню при наведении */
nav a[href="index.html#home"]:hover { background-color: #6868ff; }
nav a[href="index.html#about"]:hover { background-color: #8a8aff; }
nav a[href="index.html#works"]:hover { background-color: #a0b0ff; }
nav a[href="index.html#contacts"]:hover { background-color: #9adada; }

/* Плавное перемещение по якорям */
html {
    scroll-behavior: smooth;
}

/* Базовые стили для боковой навигации */
.side-navigation {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
	background-image: url('../media/img/novigation.png'); /* Путь к фоновому изображению */
	background-size: contain;
	background-repeat: no-repeat;
	width: 100px; /* Размер изображения звездочек */
    min-height: 250px;
	padding-left: 0px;
    padding-right: 0px;
}

.side-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.side-navigation li {
    margin: 10px 0;
    position: relative;
}

/* Стиль для точек навигации */
.nav-dot {
    display: block;
    width: 30px;
    height: 30px;
    background: #000; /* Цвет фона точек */
    border-radius: 50%;
    position: fixed;
}

.nav-dot.star-1 {
  right: 31px;
  top: 3px;
  background-color: rgb(123 123 255 / 27%);
}

.nav-dot.star-2 {
  left: 48px;
  top: 79px;
  background-color: rgb(138 138 255 / 27%)
}

.nav-dot.star-3 {
  right: 49px;
  bottom: 83px;
  background-color: rgb(183 203 255 / 27%)
}

.nav-dot.star-4 {
  right: 1px;
  bottom: 11px;
  background-color: rgb(154 218 218 / 27%);
}

/* Стили для пунктов меню при наведении */
.nav-dot.star-1:hover { background-color: rgb(104 104 255 / 50%); }
.nav-dot.star-2:hover { background-color: rgb(138 138 255 / 50%); }
.nav-dot.star-3:hover { background-color: rgb(160 176 255 / 50%); }
.nav-dot.star-4:hover { background-color: rgb(154 218 218 / 50%); }

/* Стиль для подсказок */
.nav-dot::after {
    content: attr(data-tooltip);
    position: absolute;
    white-space: nowrap;
    display: block;
    visibility: hidden; /* Сначала скрываем подсказку */
    background-color: #6b54be;
    color: #fff;
    padding: 5px 10px;
    font-size: 2.8em;
    border-radius: 10px;
    bottom: -60%; /* Позиционируем подсказку ниже точки */
    right: 450%; /* Центрируем подсказку относительно точки */
	bottom: -5px;/* Центрируем подсказку относительно точки */
    transform: translateX(50%); /* Дополнительно центрируем подсказку */
    transition: visibility 0s, opacity 0.2s linear; /* Плавное появление и исчезновение */
}

/* Показываем подсказки при наведении */
.nav-dot:hover::after,
.nav-dot:focus::after { /* Добавим фокус для доступности */
    visibility: visible; /* Показываем подсказку */
    opacity: 1; /* Делаем её полностью видимой */
}

/* Медиа-запросы для больших экранов */
@media (min-width: 1024px) {
    .side-navigation {
        display: block;
    }
}

/* Медиа-запросы для маленьких экранов */
@media (max-width: 1023px) {
    .side-navigation {
        display: none;
    }
}

/* Медиа-запросы для адаптивного меню */
@media (max-width: 768px) {
    header {
        position: relative; /* Для правильного позиционирования абсолютных элементов */
    }

    .logo-and-email {
        flex-direction: row; /* Элементы в строку для мобильной версии */
        justify-content: space-between; /* Распределение элементов по краям */
        align-items: center; /* Выравнивание элементов по центру */
        padding: 10px; /* Добавим отступы для визуального пространства */
    }

    .logo-and-email #logo,
    .logo-and-email a {
        margin-right: 0; /* Убираем отступ справа */
    }

    nav {
        width: 100%; /* Ширина навигации на 100% */
    }

    nav label {
        right: 10px; /* Справа от края на 10px */
        top: 10px; /* Сверху от края на 10px */
    }
		
	nav .menu a {
        display: block;
        width: 100%;
        padding: 10px;
        box-sizing: border-box;
        border-bottom: 1px solid #555;
        color: white;
        text-align: left;
        margin: 5px 0 !important; /* Убираем внешние отступы */
		text-align: center; /* Выравниваем текст по центру */
    }

    .side-menu:checked ~ .menu {
        display: block; /* Отображаем меню при активном чекбоксе */
    }
	
	.menu {
        display: none;
        position: absolute;
        top: 100%; /* Верхний край выпадающего меню у верхнего края шапки */
        left: 0;
        width: 100%;
        background-color: #fff;
        padding: 0;
        z-index: 2; /* Выпадающее меню будет под бургер-иконкой */
    }
	
	/* Стили для бургер-меню */
	.hamb {
		cursor: pointer;
		position: relative;
		display: block;
		width: 30px; /* Ширина бургер-меню */
		height: 23px; /* Высота бургер-меню */
		z-index: 3; /* Убедимся, что бургер-иконка всегда наверху */
		/* Убеждаемся, что 'float: right;' правильно позиционирует вашу иконку */
	}

	.hamb-line {
		display: block;
		position: absolute;
		height: 2px;
		width: 100%;
		background-color: #fff;
		transition: all .2s ease-out;
		left: 0;
	}

	.hamb-line::before,
	.hamb-line::after {
		content: '';
		position: absolute;
		height: 2px;
		width: 100%;
		background-color: #fff;
		transition: all .2s ease-out;
	}

	.hamb-line::before {
		top: 7px;
	}

	.hamb-line::after {
		bottom: 7px;
	}

	/* Скрыть чекбокс */
	.side-menu {
		display: none;
	}

	/* Трансформация бургер-меню в крестик */
	.side-menu:checked + .hamb .hamb-line {
		background: transparent;
	}

	.side-menu:checked + .hamb .hamb-line::before {
		transform: translateY(-1px) rotate(45deg);
		top: 50%;
	}

	.side-menu:checked + .hamb .hamb-line::after {
		transform: translateY(1px) rotate(-45deg);
		bottom: 50%;
	}
}

/* Общие стили для секций */
main section {
	max-width: 1200px; /* Пример максимальной ширины, соответствующей ширине шапки */
	min-height: 50vh; /* Минимальная высота для заполнения экрана */
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px; /* Отступы для небольшого пространства по краям */
    padding-right: 15px;
}

/* Стили для адаптивности */
@media (max-width: 768px) {
    main {
        padding-left: 10px; /* Меньше пространства по краям на мобильных */
        padding-right: 10px;
    }
}

/* Стили для секции Home */
.home-section {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.home-content {
    flex: 1 1 50%; /* Занимает половину ширины на больших экранах */
    max-width: 50%; /* Ограничивает максимальную ширину контента */
	z-index: 1;
}

.home-image {
    flex: 1 1 50%; /* Занимает половину ширины на больших экранах */
    max-width: 50%; /* Ограничивает максимальную ширину контента */
	text-align: center; /* Центрируем изображение */
}

.home-image img {
	max-width: 105%; /* Изображение будет масштабироваться в пределах своего блока */
	height: auto; /* Сохранение пропорций изображения */
	transform: translate(-3%, 7%);
}

.profession {
	display: inline-block; /* Элементы идут в ряд */
	margin-right: 5px; /* Небольшой отступ справа от текста */
}

span.profession {
    font-family: 'Reef-Bold', Arial, sans-serif;
    color: #b0fed1;
    font-size: 2.0em;
}

p.profession {
    display: flex;
	justify-content: space-between;
	padding-right: 100px;
}

.star-icon {
	width: 50px; /* Задаем размеры звездочке */
	vertical-align: middle; /* Выравнивание по центру относительно текста */
	margin-right: 5px; /* Отступ справа от звездочки */
	margin-bottom: 20px; /* Выравнивание по центру относительно текста */
}

/* Медиа-запросы для мобильных устройств */
@media (max-width: 768px) {
.home-section {
flex-direction: column; /* Стекаем блоки вертикально на мобильных */
}

.home-content,
.home-image {
    flex: 1 1 100%; /* Каждый блок занимает всю ширину */
    max-width: 100%; /* Отменяем ограничение ширины */
}

.home-content {
    order: -1; /* Текстовый блок идет первым */
}

}

/* Стили для секции About Me */
.about-section {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
}

.about-content {
    flex: 1 1 50%;
    max-width: 50%;
    color: #7b7bff; /* Цвет текста */
    padding: 20px; /* Отступы вокруг текста */
	transform: translate(0%, 10%);
}

.about-content p {
    font-family: 'Reef-Bold', Arial, sans-serif;
	background-color: #b7cbff; /* Фон текстового блока */
	margin-bottom: 5px; /* Отступ после абзаца */
	font-size: 2.0em;
	border-radius: 10px;
    padding: 5px 5px 10px 15px;
}

.skills {
    display: flex;
    align-items: center;
    color: #ffffff; /* Цвет текста SKILLS */
    padding: 5px 10px;
	justify-content: center;
}

.skills span {
    margin-right: 10px; /* Отступ между словом Skills и изображением */
}

span.skills {
	font-size: 2.8em; /* Увеличиваем размер шрифта для пунктов меню */
    padding: 5px 10px; /* Внутренние отступы */
    border-radius: 10px; /* Скругление углов */
    margin: 5px 5px; /* Добавляем немного маржина между элементами */
    background-color: #7b7bff;
}

.about-image {
    flex: 1 1 50%; /* Занимает половину ширины на больших экранах */
    max-width: 50%; /* Ограничивает максимальную ширину контента */
	text-align: center; /* Центрируем изображение */
}

.about-image img {
	max-width: 90%; /* Изображение будет масштабироваться в пределах своего блока 70% для статичнго img */
	height: auto; /* Сохранение пропорций изображения */
	margin-top: 50px; /* Отступ сверху изображения */
	transform: translate(-15%, 45%); /* (-25%, 45%) для статичнго img */
}

.skills-icon {
	width: 290px; /* Задаем размеры изображения skills  */
	vertical-align: middle; /* Выравнивание по центру относительно текста */
	margin-right: 5px; /* Отступ справа от звездочки */
	margin-bottom: -20px; /* Выравнивание по центру относительно текста */
}

@media (max-width: 768px) {
    .about-section {
        flex-direction: column-reverse; /* Изображение будет сверху, текст - снизу */
    }

    .about-content,
    .about-image {
        flex: 1 1 100%;
        max-width: 100%;
        text-align: center; /* Центрирование текста и изображения на мобильных */
    }
}

/* Стили для секции Works */
.works-section {
  padding: 20px;
  padding-bottom: 150px;
  text-align: center;
  transform: translate(0%, 15%);
}

.works-gallery {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(12, 2.5vw);
    gap: 20px;
    justify-content: center;
   
}

.work-item {
  position: relative; /* Относительное позиционирование для контейнера */
  overflow: hidden; /* Обрезаем всё, что выходит за границы */
  border-radius: 10px; /* Округление углов блока с работой */
  cursor: pointer;
}

.work-item img {
  width: 100%;
  height: auto;
  border-radius: 10px; /* Округление углов изображения */
  transition: opacity 0.3s ease; /* Плавность изменения прозрачности */
}

.work-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(183, 203, 255, 0.5); /* Полупрозрачный голубой фон */
  border-radius: 10px; /* Округление углов полупрозрачного фона */
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1; /* Начальная видимость */
  transition: opacity 0.3s ease; /* Плавность изменения прозрачности */
  border-style: solid;
  border-color: #b7cbff;
  border-width: 5px;
}
.work-overlay:hover {
  border-style: solid;
  border-color: #7b7bff;
  border-width: 5px;
}
.work-title {
  color: white; /* Цвет текста */
  font-size: 5.0em; /* Размер шрифта */
  text-align: center; /* Выравнивание текста по центру */
  transition: opacity 0.3s ease; /* Плавность перехода */
}

.work-item:hover .work-overlay {
  /* opacity: 0; */ /* Полная прозрачность при наведении */
  background-color: rgb(255 255 255 / 0%);
  border-style: solid; /* Стили для border */
 border-color: #7b7bff;
  border-width: 5px;
}

.work-item:hover .work-title {
  opacity: 0; /* Полная прозрачность при наведении */
}

.work-item:hover .work-image {
  opacity: 1; /* Полная непрозрачность изображения при наведении */
}

.see-all {
  font-size: 5.0em;
  text-decoration: none;
  color: #7b7bff; /* Цвет текста */
  float: right;
  margin-top: -210px;
  margin-right: 100px;
  transition: 0.6s ease;
}

.see-all:hover {
    color: #6868ff;
    padding-top: 5px;
    padding-bottom: 5px;
}

/* Стили для видео раздел frame-by-frame */
.work-image.work-img-1 {
    width: 100%; /* Установить нужную ширину */
    height: auto; /* Установить нужную высоту */
}

.work-image.work-img-1:hover {
    cursor: pointer;
}

.work-item:hover .work-image.work-img-1 {
    cursor: pointer;
}

/* Уникальные стили для разных размеров изображений расположение по сетке grid */
.frame-by-frame {
    grid-column: 1 / span 3;
	grid-row: 3 / span 4;
}

.poster {
	grid-column: 4 / span 2;
  grid-row: 1 / span 6;
}

.three-d {
    grid-column: 6 / span 3;
  grid-row: 1 / span 4;
}

.art {
    grid-column: 1 / span 2;
  grid-row: 7 / span 6;
}

/* Cтили для UI UX замена AI */
.ui {
    grid-column: 3 / span 3;
  grid-row: 7/ span 4;
}

.vector {
    grid-column: 6 / span 3;
  grid-row: 5 / span 4;
}

.image {
	grid-column: 3/ span 3;
    grid-row: 9 / span 5;
    transform: translate(0%, -2%);
    width: 100%;
}

/* Подстройка и позиционирование различных элементов сайта при разных расшерения экранах, от мобильного до больших маниторов */
/* Смартфоны (портрет) */
@media only screen and (max-width: 320px) {
  /* Стили для экранов до 320px */

nav {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

nav .logo-and-email a {
    font-size: 1.2em !important;
}

nav label {
    right: 30px !important;
}

h1.teg-h1 {
    font-size: 6.0em !important;
	text-align: center !important;
}

h2.teg-h2 {
    font-size: 4.0em !important;
	text-align: center !important;
}

p.profession {
    justify-content: center !important;
    padding-right: 0px !important;
}

span.profession {
    font-size: 1.2em !important;
}

.star-icon {
    width: 30px !important;
}

.home-image img {
    transform: translate(-1%, -9%)!important;
}

h3.teg-h3 {
    font-size: 5.0em !important;
}

.about-content {
    transform: translate(0%, -10%) !important;
}

img.about-star {
    transform: translate(145%, 165%) !important;
    width: 21% !important;
}

.skills {
    flex-wrap: wrap !important;
}

.skills-icon {
    width: 250px !important;
}

.about-image img {
    margin-top: 0px!important;
    transform: translate(-3%, -15%) !important;
	padding-bottom: 30px !important;
}

.works-section {
    transform: translate(0%, -4%) !important;
}

h3.teg-h3.work-teg {
    transform: translate(0%, -80%) !important;
	text-align: center !important;
}

img.work-star {
    transform: translate(330%, 40%) !important;
    width: 11% !important;
}

.works-gallery {
    display: flex !important;
}

.image {
    transform: translate(0%, -190%) !important;
}

.vector {
    transform: translate(0%, 32%) !important;
}

.see-all {
    margin-top: -70px !important;
}

section#contacts {
    transform: translate(0%, -10%) !important;
}

.contacts-section h3 {
    transform: translate(0%, -50%) !important;
}

.form-background-image {
    display: none !important;
}

.get-in-touch {
    display: none !important;
}

.contact-form {
    position: absolute;
    top: 100px !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
    background-color: #b7cbff !important;
    padding: 20px;
    border-radius: 10px;
	min-width: 200px !important;
}
input#name {
    max-width: 95% !important;
}
input#email {
    max-width: 95% !important;
}
.form-control-button {
    top: 120% !important;
    left: 50% !important;
}
.social-links {
    transform: translate(0%, 570%) !important;
	margin-top: 27px !important;
}

.social-links img {
    width: 50px !important;
    margin: 0 20px !important;
}

span.scroll-span {
    font-size: 6em !important;
}

.scroll-to-top {
    left: 0px !important;
    width: 50px !important;
    height: 50px !important;
}

.footer-span {
    font-size: 1.5em !important;
}

.footer-star {
    width: 25px !important;
}

.modal-content-size {
    max-width: 500px !important;
	min-width: auto !important;
	height: 550px !important;
}

#modal-img {
    max-width: 330px !important;
    max-height: 250px !important;
}

.modal-content-text {
    max-width: 300px !important;
}

.close {
    top: -20px !important;
    right: 15px !important;
}

h1.teg-h3.all-work-teg {
    font-size: 6.0em !important;
}

a.thumbnail-prev {
    left: 0;
    margin-top: -35px !important;
}
a.thumbnail-next {
    right: 5px !important;
    margin-top: -95px !important;
}
a.thumbnail-prev, a.thumbnail-next {
    font-size: 6em !important;
}

.work-overlay-gallery-img img {
    height: 50px !important;
}

.work-overlay-gallery-img video {
    height: 50px !important;
 }

.modal-content {
    padding: 20px 5px 80px 5px !important;
}

.works-gallery-big {
    justify-content: center !important;
}

.works-gallery-big img {
	max-width: 100% !important;
    max-height: 400px !important;
    height: auto !important;
}  
  
}

/* Смартфоны (портрет) и некоторые маленькие планшеты */
@media only screen and (min-width: 321px) and (max-width: 480px) {
  /* Стили для экранов от 321px до 480px */

nav {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

nav .logo-and-email a {
    font-size: 1.5em !important;
}

nav label {
    right: 30px !important;
}

h1.teg-h1 {
    font-size: 6.0em !important;
	text-align: center !important;
}

h2.teg-h2 {
    font-size: 4.0em !important;
	text-align: center !important;
}

p.profession {
    justify-content: center !important;
    padding-right: 0px !important;
}

span.profession {
    font-size: 1.5em !important;
}

.star-icon {
    width: 40px !important;
}

.home-image img {
    transform: translate(-1%, -9%)!important;
}

h3.teg-h3 {
    font-size: 6.0em !important;
}

.about-content {
    transform: translate(0%, -10%) !important;
}

img.about-star {
    transform: translate(145%, 165%) !important;
    width: 21% !important;
}
.skills-icon {
    width: 250px !important;
}

.about-image img {
    margin-top: 0px!important;
    transform: translate(-3%, -15%) !important;
	padding-bottom: 30px !important;
}

.works-section {
    transform: translate(0%, -4%) !important;
}

h3.teg-h3.work-teg {
    transform: translate(0%, -80%) !important;
	text-align: center !important;
}

img.work-star {
    transform: translate(330%, 40%) !important;
    width: 11% !important;
}

.works-gallery {
    display: flex !important;
}

.image {
    transform: translate(0%, -183%) !important;
}

.vector {
    transform: translate(0%, 32%) !important;
}

.see-all {
    margin-top: -70px !important;
}

section#contacts {
    transform: translate(0%, -10%) !important;
}

.contacts-section h3 {
    transform: translate(0%, -50%) !important;
}

.form-background-image {
    display: none !important;
}

.get-in-touch {
    display: none !important;
}

.contact-form {
    position: absolute;
    top: 100px !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
    background-color: #b7cbff !important;
    padding: 20px;
    border-radius: 10px;
	min-width: 300px !important;
}
input#name {
    max-width: 95% !important;
}
input#email {
    max-width: 95% !important;
}
.form-control-button {
    top: 120% !important;
    left: 50% !important;
}
.social-links {
    transform: translate(0%, 480%) !important;
	margin-top: 27px !important;
}

span.scroll-span {
    font-size: 6em !important;
}

.scroll-to-top {
    left: 0px !important;
    width: 50px !important;
    height: 50px !important;
}

.footer-span {
    font-size: 1.5em !important;
}

.footer-star {
    width: 25px !important;
}

.modal-content-size {
    max-width: 500px !important;
	min-width: auto !important;
	height: 550px !important;
}

#modal-img {
    max-width: 330px !important;
    max-height: 250px !important;
}

.modal-content-text {
    max-width: 300px !important;
}

.close {
    top: -20px !important;
    right: 15px !important;
}

h1.teg-h3.all-work-teg {
    font-size: 6.0em !important;
}

a.thumbnail-prev {
    left: 0;
    margin-top: -35px !important;
}
a.thumbnail-next {
    right: 5px !important;
    margin-top: -95px !important;
}
a.thumbnail-prev, a.thumbnail-next {
    font-size: 6em !important;
}

.work-overlay-gallery-img img {
    height: 50px !important;
}

.work-overlay-gallery-img video {
    height: 50px !important;
 }

.modal-content {
    padding: 20px 5px 80px 5px !important;
}

.works-gallery-big {
    justify-content: center !important;
}

.works-gallery-big img {
	max-width: 100% !important;
    max-height: 400px !important;
    height: auto !important;
}

}

/* Смартфоны (ландшафт)вертикально */
@media only screen and (min-width: 481px) and (max-width: 600px) {
  /* Стили для экранов от 481px до 600px */
nav {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

nav .logo-and-email a {
    font-size: 1.5em !important;
}

nav label {
    right: 30px !important;
}

h1.teg-h1 {
    font-size: 6.0em !important;
	text-align: center !important;
}

h2.teg-h2 {
    font-size: 4.0em !important;
	text-align: center !important;
}

p.profession {
    justify-content: center !important;
    padding-right: 0px !important;
}

span.profession {
    font-size: 1.5em !important;
}

.star-icon {
    width: 40px !important;
}

.home-image img {
    transform: translate(-1%, -9%)!important;
}

h3.teg-h3 {
    font-size: 6.0em !important;
}

.about-content {
    transform: translate(0%, -10%) !important;
}

img.about-star {
    transform: translate(115%, 165%) !important;
    width: 19% !important;
}
.skills-icon {
    width: 250px !important;
}

.about-image img {
    margin-top: 0px!important;
    transform: translate(-3%, -15%) !important;
	padding-bottom: 30px !important;
}

.works-section {
    transform: translate(0%, -4%) !important;
}

h3.teg-h3.work-teg {
    transform: translate(0%, -80%) !important;
	text-align: center !important;
}

img.work-star {
    transform: translate(330%, 40%) !important;
    width: 9% !important;
}

.works-gallery {
    display: flex !important;
}

.image {
    transform: translate(0%, -175%) !important;
}

.vector {
    transform: translate(0%, 32%) !important;
}

.see-all {
    margin-top: -70px !important;
}

section#contacts {
    transform: translate(0%, -10%) !important;
}

.contacts-section h3 {
    transform: translate(0%, -50%) !important;
}

.form-background-image {
    display: none !important;
}

.get-in-touch {
    display: none !important;
}

.contact-form {
    position: absolute;
    top: 100px !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
    background-color: #b7cbff !important;
    padding: 20px;
    border-radius: 10px;
	min-width: 400px !important;
}
input#name {
    max-width: 95% !important;
}
input#email {
    max-width: 95% !important;
}
.form-control-button {
    top: 120% !important;
    left: 50% !important;
}
.social-links {
    transform: translate(0%, 480%) !important;
	margin-top: 27px !important;
}

span.scroll-span {
    font-size: 6em !important;
}

.scroll-to-top {
    left: 0px !important;
    width: 50px !important;
    height: 50px !important;
}

.footer-span {
    font-size: 1.5em !important;
}

.footer-star {
    width: 25px !important;
}

.modal-content-size {
    max-width: 500px !important;
	min-width: auto !important;
	height: 550px !important;
}

#modal-img {
    max-width: 330px !important;
    max-height: 250px !important;
}

.modal-content-text {
    max-width: 300px !important;
}

.close {
    top: -20px !important;
    right: 15px !important;
}

h1.teg-h3.all-work-teg {
    font-size: 6.0em !important;
}

a.thumbnail-prev {
    left: 0;
    margin-top: -35px !important;
}
a.thumbnail-next {
    right: 5px !important;
    margin-top: -95px !important;
}
a.thumbnail-prev, a.thumbnail-next {
    font-size: 6em !important;
}

.work-overlay-gallery-img img {
    height: 50px !important;
}

.work-overlay-gallery-img video {
    height: 50px !important;
}

.modal-content {
    padding: 20px 5px 80px 5px !important;
} 

.works-gallery-big {
    justify-content: center !important;
}

.works-gallery-big img {
	max-width: 100% !important;
    max-height: 400px !important;
    height: auto !important;
}
} 
 
/* Мобильные телефоны горизонтально и небольшие планшеты */
@media only screen and (min-width: 601px) and (max-width: 768px) {
  /* Стили для экранов шириной от 601px до 768px */
nav {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

nav .logo-and-email a {
    font-size: 1.5em !important;
}

nav label {
    right: 30px !important;
}

h1.teg-h1 {
    font-size: 12.0em !important;
	text-align: center !important;
}

h2.teg-h2 {
    font-size: 6.0em !important;
	text-align: center !important;
}

p.profession {
    justify-content: center !important;
    padding-right: 0px !important;
}

span.profession {
    font-size: 2.0em !important;
}

.star-icon {
    width: 50px !important;
}

.home-image img {
    transform: translate(-1%, -9%)!important;
}

h3.teg-h3 {
    font-size: 6.0em !important;
}

.about-content {
    transform: translate(0%, -10%) !important;
}

img.about-star {
    transform: translate(125%, 130%) !important;
    width: 13% !important;
}
.skills-icon {
    width: 250px !important;
}

.about-image img {
    margin-top: 0px!important;
    transform: translate(-3%, -15%) !important;
	padding-bottom: 30px !important;
}

.works-section {
    transform: translate(0%, -4%) !important;
}

h3.teg-h3.work-teg {
    transform: translate(0%, -80%) !important;
	text-align: center !important;
}

img.work-star {
    transform: translate(330%, 40%) !important;
    width: 6% !important;
}

.works-gallery {
    display: flex !important;
}

.image {
    transform: translate(0%, -170%) !important;
}

.vector {
    transform: translate(0%, 37%) !important;
}

.see-all {
    margin-top: -70px !important;
}

section#contacts {
    transform: translate(0%, -10%) !important;
}

.contacts-section h3 {
    transform: translate(0%, -50%) !important;
}

.form-background-image {
    display: none !important;
}

.get-in-touch {
    display: none !important;
}

.contact-form {
    position: absolute;
    top: 100px !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
    background-color: #b7cbff !important;
    padding: 20px;
    border-radius: 10px;
	min-width: 500px !important;
}
input#name {
    max-width: 95% !important;
}
input#email {
    max-width: 95% !important;
}
.form-control-button {
    top: 120% !important;
    left: 50% !important;
}
.social-links {
    transform: translate(0%, 480%) !important;
	margin-top: 27px !important;
}

span.scroll-span {
    font-size: 6em !important;
}

.scroll-to-top {
    left: 0px !important;
    width: 50px !important;
    height: 50px !important;
}

.footer-span {
    font-size: 1.5em !important;
}

.footer-star {
    width: 25px !important;
}

.modal-content-size {
	max-width: 700px !important;
    min-width: auto !important;
    height: 650px !important;
}

#modal-img {
    max-width: 530px !important;
    max-height: 350px !important;
}

.modal-content-text {
    max-width: 300px !important;
}

.close {
    top: -20px !important;
    right: 15px !important;
}

h1.teg-h3.all-work-teg {
    font-size: 6.0em !important;
}

a.thumbnail-prev {
    left: 0;
    margin-top: -15px !important;
}
a.thumbnail-next {
    right: 5px !important;
    margin-top: -112px !important;
}
a.thumbnail-prev, a.thumbnail-next {
    font-size: 6em !important;
}

.work-overlay-gallery-img img {
    height: 90px !important;
}

.work-overlay-gallery-img video {
    height: 90px !important;
 }

.modal-content {
    padding: 20px 5px 80px 5px !important;
}

.works-gallery-big img {
	/* max-width: 22% !important; */
    max-height: 85px !important;
} 
  
}

/* Планшеты вертикально и горизонтально */
@media only screen and (min-width: 769px) and (max-width: 900px) {
  /* Для устройств с шириной экрана от 769px до 900px */
h3.teg-h3 {
    font-size: 7.5em !important;
}

.image {
    transform: translate(0%, -12%);
    width: 100%;
}

h3.teg-h3.about {
    text-align: center !important;
}
  
img.about-star {
    transform: translate(355%, 180%) !important;
    width: 20%!important;
}


h3.teg-h3.work-teg {
    transform: translate(0%, 80%) !important;
}

img.work-star {
    transform: translate(-420%, 315%) !important;
    width: 4% !important;
}

.see-all {
    margin-top: -120px !important;
}

section#contacts {
    transform: translate(0%, 20%) !important;
}

.contacts-section h3 {
    transform: translate(0%, -50%) !important;
}

.form-background-image {
    display: none !important;
}

.get-in-touch {
    display: none !important;
}

.contact-form {
    position: absolute;
    top: 100px !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
    background-color: #b7cbff !important;
    padding: 20px;
    border-radius: 10px;
	min-width: 500px !important;
}
input#name {
    max-width: 95% !important;
}
input#email {
    max-width: 95% !important;
}
.form-control-button {
    top: 120% !important;
    left: 50% !important;
}
.social-links {
    transform: translate(0%, 480%) !important;
	margin-top: 27px !important;
}

span.scroll-span {
    font-size: 6em !important;
}

.scroll-to-top {
    left: 0px !important;
    width: 50px !important;
    height: 50px !important;
}

.footer-span {
    font-size: 1.5em !important;
}

.footer-star {
    width: 25px !important;
}

.modal-content-size {
    min-width: auto !important;
    height: 650px !important;
}

#modal-img {
    max-width: 600px !important;
    max-height: 450px !important;
}

.modal-content-text {
    max-width: 300px !important;
}

.close {
    top: -20px !important;
    right: 15px !important;
}

h1.teg-h3.all-work-teg {
    font-size: 6.0em !important;
}

a.thumbnail-prev {
    left: 0;
    margin-top: 5px !important;
}
a.thumbnail-next {
    right: 5px !important;
    margin-top: -125px !important;
}
a.thumbnail-prev, a.thumbnail-next {
    font-size: 6em !important;
}

.work-overlay-gallery-img img {
    height: 120px !important;
}

.work-overlay-gallery-img video {
    height: 120px !important;
 }

.modal-content {
    padding: 20px 5px 80px 5px !important;
} 

.works-gallery-big img {
	/* max-width: 22% !important; */
    max-height: 105px !important;
} 

}

/* Для устройств с шириной экрана от 901px до 1024px */
@media only screen and (min-width: 901px) and (max-width: 1024px) {
  /* Стили для этого диапазона */
.image {
    transform: translate(0%, -12%);
    width: 100%;
}  
img.about-star {
    transform: translate(360%, 190%) !important;
    width: 20%!important;
}


h3.teg-h3.work-teg {
    transform: translate(0%, 70%) !important;
}

img.work-star {
    transform: translate(-400%, 300%) !important;
    width: 4% !important;
}

.see-all {
    margin-top: -120px !important;
} 

section#contacts {
    transform: translate(0%, 20%) !important;
}

.contacts-section h3 {
    transform: translate(0%, -50%) !important;
}

.form-background-image {
    display: none !important;
}

.get-in-touch {
    display: none !important;
}

.contact-form {
    position: absolute;
    top: 100px !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
    background-color: #b7cbff !important;
    padding: 20px;
    border-radius: 10px;
	min-width: 500px !important;
}
input#name {
    max-width: 95% !important;
}
input#email {
    max-width: 95% !important;
}
.form-control-button {
    top: 120% !important;
    left: 50% !important;
}
.social-links {
    transform: translate(0%, 480%) !important;
	margin-top: 27px !important;
}

span.scroll-span {
    font-size: 6em !important;
}

.scroll-to-top {
    left: 0px !important;
    width: 50px !important;
    height: 50px !important;
}

.footer-span {
    font-size: 1.5em !important;
}

.footer-star {
    width: 25px !important;
}

.modal-content-size {
    min-width: auto !important;
    height: 650px !important;
}

#modal-img {
    max-width: 700px !important;
    max-height: 500px !important;
}

.modal-content-text {
    max-width: 300px !important;
}

.close {
    top: -20px !important;
    right: 15px !important;
}

h1.teg-h3.all-work-teg {
    font-size: 6.0em !important;
}

a.thumbnail-prev {
    left: 0;
    margin-top: 5px !important;
}
a.thumbnail-next {
    right: 5px !important;
    margin-top: -125px !important;
}
a.thumbnail-prev, a.thumbnail-next {
    font-size: 6em !important;
}

.work-overlay-gallery-img img {
    height: 120px !important;
}

.work-overlay-gallery-img video {
    height: 120px !important;
 }

.modal-content {
    padding: 20px 5px 80px 5px !important;
}  

.works-gallery-big img {
	/* max-width: 23% !important; */
    max-height: 120px !important;
}
 
}

/* Небольшие десктопы и ноутбуки */
@media only screen and (min-width: 1025px) and (max-width: 1152px) {
  /* Стили для экранов шириной от 1025px до 1152px */
.image {
    transform: translate(0%, -12%);
    width: 100%;
}
img.about-star {
    transform: translate(365%, 190%) !important;
    width: 16%!important;
}

img.work-star {
    transform: translate(-510%, 320%) !important;
    width: 4%;
}

h3.teg-h3.work-teg {
    transform: translate(0%, 95%) !important;
}

.contacts-section h3 {
    transform: translate(0%, 170%) !important;
}

input#name {
    max-width: 40% !important;
}
input#email {
    max-width: 40% !important;
}

#modal-img {
    max-width: 550px !important;
    max-height: 450px !important;
}

.form-control-button {
    top: 132% !important;
    left: 79% !important;
}

.works-gallery-big img {
	/* max-width: 24% !important; */
    max-height: 140px !important;
}

}

/* Небольшие десктопы и ноутбуки */
@media only screen and (min-width: 1153px) and (max-width: 1280px) {
  /* Стили для экранов шириной от 1153px до 1280px */
.image {
    transform: translate(0%, -12%);
    width: 100%;
}
img.about-star {
    transform: translate(325%, 190%) !important;
    width: 16%!important;
}

.contacts-section h3 {
    transform: translate(0%, 190%) !important;
}

input#name {
    max-width: 43% !important;
}
input#email {
    max-width: 43% !important;
}

#modal-img {
    max-width: 650px !important;
    max-height: 500px !important;
}

.works-gallery-big img {
	/* max-width: 25% !important; */
    max-height: 155px !important;
}

}

/* Большие десктопы */
@media only screen and (min-width: 1281px) and (max-width: 1440px) {
  /* Стили для экранов шириной от 1281px до 1440px */
.image {
    transform: translate(0%, -13%);
    width: 100%;
}
img.about-star {
    transform: translate(345%, 190%)!important;
    width: 15%!important;
}
}

/* Очень большие десктопы */
@media only screen and (min-width: 1441px) and (max-width: 1680px) {
  /* Стили для экранов шириной от 1441px до 1680px */
.image {
    transform: translate(0%, -8%);
    width: 100%;
}  
img.about-star {
    transform: translate(340%, 190%);
    width: 15%;
}
}

/* Дополнительно переход галереии в разделе WORKS в вертикальный режим по одному изображению для просмотра на мобильных и маленьких экранах */
@media (max-width: 768px) {
  .works-gallery {
    flex-direction: column;
	justify-content: center;
    align-items: center;
}

.see-all {
  margin-top: -20px;
}

h3.teg-h3.work-teg {
   margin-bottom: 10px !important;
}
  
}

/* Стиль для тегов */
h1.teg-h1 {
    color: #7b7bff;
    font-size: 14.0em;
	margin-top: 10px;
	margin-bottom: 10px;
}

h1.teg-h3 {
    color: #7b7bff;
    font-size: 9.0em;
	margin-top: 10px;
	margin-bottom: 10px;
}

h3.teg-h3 {
    color: #7b7bff;
    font-size: 9.0em;
	margin-top: 10px;
	margin-bottom: 10px;
}

h3.teg-h3.work-teg {
    text-align: start;
    /* padding-left: 50px; */
    /* margin-bottom: -50px; */
	transform: translate(0%, 100%);
	
}

h2.teg-h2 {
    color: #7b7bff;
    font-size: 8.0em;
	margin-top: 10px;
    margin-bottom: 10px;
}

/* Стили для модального окна */
.modal {
  display: none; /* Скрыто по умолчанию */
  position: fixed; /* Фиксированное позиционирование */
  z-index: 1000; /* Поверх всех других элементов */
  left: 0;
  top: 0;
  width: 100%; /* Ширина во весь экран */
  height: 100%; /* Высота во весь экран */
  background-color: rgba(0, 0, 0, 0.6); /* Полупрозрачный черный фон */
  overflow: auto; /* Прокрутка, если содержимое больше экрана */
}

/* Стили для содержимого модального окна */
.modal-content {
  background-size: cover;
  background-color: #fefefe; /* Белый фон */
  background-image: url('../media/img/grad_preview.png'); /* Путь к фоновому изображению */
  margin: auto;
  padding: 20px; /* Отступы внутри блока */
  border: 1px solid #888; /* Граница */
  width: 95%; /* Ширина содержимого */
  height: 95%; /* Ширина содержимого */
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); /* Тень блока */
  position: relative; /* Для позиционирования кнопок закрытия и навигации */
}

/* Стили для галереи изображений и видео в модальном окне */
.gallery-container {
  display: flex; /* Размещение в ряд */
  justify-content: center; /* Центрирование изображений */
  margin-top: 20px; /* Отступ сверху */
}

.gallery-container img, video {
    cursor: pointer; /* Курсор в виде указателя */
    border-radius: 10px; /* Скругление углов */
}

.gallery-container img:hover,
.gallery-container video:hover {
  transform: scale(1.1); /* Увеличение при наведении */
}


.modal-content-size {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
	min-width: 500px;
    height: 600px;
	overflow: hidden;
}

/* Стили для основного блока изображения в модальном окне */
.modal-content-img {
    display: flex;
	flex-wrap: wrap;
    justify-content: center;

}

/* Стили для основного изображения в модальном окне */
#modal-img {
  max-width: 850px;
  max-height: 550px;
  border-radius: 10px; /* Скругление углов */
  margin-bottom: 20px; /* Отступ снизу */
  border-style: solid; /* Стиль линии border */
  border-color: #7b7bff; /* Цвет border */
  border-width: 5px; /* Ширина линии border */
}

#modal-description, #modal-description2 {
  font-family: 'Reef-Bold', Arial, sans-serif;
  font-size: 2.0em; /* Размер шрифта */
  color: #7b7bff;
  border-radius: 10px;
}

/* Примерные стили для текста описания */
#modal-description {
  margin-top: 10px; /* Отступ сверху */
  padding: 10px 20px 10px 20px;
  background-color: #b7cbff;
  color: #7b7bff;
  max-width: 300px;
  max-height: 300px;
  margin-left: 20px;
}

#modal-description2 {
  color: white; /* Цвет текста */
  margin-top: 10px; /* Отступ сверху */
  background-color: #7b7bff;
  max-width: 60px;
  max-height: 25px;
  margin-left: 20px;
  padding: 15px 20px 20px 20px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
	
}

.modal-line-text {
  font-family: 'Reef-Bold', Arial, sans-serif;
  font-size: 2.0em; /* Размер шрифта */
  color: #7b7bff;
}

.modal-line {
  height: 5px;
  box-shadow: 0 3px 20px 20px #7b7bff inset;
}

section#all-works .modal-line {
margin-bottom: 30px;
}

/* Стили для overlay градиента */
.work-overlay-gallery-img {
    position: relative;
    margin: 0px 20px 0px 0px; /* или другое значение, которое подходит для дизайна */
    border-radius: 10px;
	z-index: 1;
}

.work-overlay-img {
    position: absolute;
    top: 0;
    left: 0;
    right: -10px;
    bottom: 0;
    background-color: rgba(183, 203, 255, 0.5); /* ваш цвет оверлея */
    transition: opacity 0.3s ease;
    border-radius: 10px; /* соответствует радиусу контейнера */
}

.work-overlay-gallery-img img {
    display: block;
    width: 100%; /* растягиваем изображение на всю ширину контейнера */
    height: 150px; /* сохраняем аспектное соотношение */
    transition: transform 0.2s; /* плавность трансформации */
    object-fit: cover; /* обрезать изображение, чтобы оно заполняло контейнер */
}

.work-overlay-gallery-img video {
    display: block;
    width: 100%; /* растягиваем изображение на всю ширину контейнера */
    height: 150px; /* сохраняем аспектное соотношение */
    transition: transform 0.2s; /* плавность трансформации */
    object-fit: cover; /* обрезать изображение, чтобы оно заполняло контейнер */
}

/* Стили для скрытия оверлея при наведении (если требуется) */
.work-overlay-gallery-img:hover .work-overlay-img {
  opacity: 0; /* Скрываем оверлей при наведении */
  top:200px;
}

.work-overlay-gallery-img:hover {
    transform: scale(1.1);
    z-index: 2; /* При наведении контейнер и все его дочерние элементы поднимаются выше */
}

video, img.img-thumbnail {
    border-style: solid;
    border-color: #b7cbff;
    border-width: 5px;
}

video, img.img-thumbnail.active {
    border-color: #7b7bff;
}

img.img-thumbnail:hover,
video.img-thumbnail:hover {  
	border-color: #7b7bff;
}

.img-thumbnail.active + .work-overlay-img {
  background-color: transparent; /* прозрачный фон при активном изображении */
}

/* Стили для стрелок */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -200px;
  color: #7b7bff;
  font-weight: normal;
  font-size: 12em;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none; /* Предотвращает выделение текста */
}

/* Позиционирование стрелок */
.prev {
  left: 0;
  border-radius: 3px 0 0 3px;
}

.next {
  right: 0;
  border-radius: 0 3px 3px 0;
}

/* Стили для наведения на стрелки */
.prev:hover,
.next:hover {
  background-color: rgba(183, 203, 255, 0.5); /* Полупрозрачный фоновый цвет */
  color: #6868ff;
  padding-top: 5px;
  padding-bottom: 5px;
  border-radius: 10px;
}

/* Стили для стрелок */
a.thumbnail-prev,
a.thumbnail-next {
  cursor: pointer;
  position: absolute;
  width: auto;
  padding: 16px;
  color: #7b7bff;
  font-weight: normal;
  font-size: 12em;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none; /* Предотвращает выделение текста */
  z-index: 10;
}

/* Позиционирование стрелок */
a.thumbnail-prev {
  left: 0;
  margin-top: -35px;
}

a.thumbnail-next {
  right: 0;
  margin-top: -200px;
}

/* Стили для наведения на стрелки */
a.thumbnail-prev:hover,
a.thumbnail-next:hover {
  background-color: rgba(183, 203, 255, 0.5); /* Полупрозрачный фоновый цвет */
  color: #6868ff;
  padding-top: 10px;
  padding-bottom: 10px;
  border-radius: 10px;
}

/* Стили для кнопки закрытия */
.close {
  color: #7b7bff; /* Цвет иконки закрытия */
  position: absolute; /* Абсолютное позиционирование */
  top: 10px; /* Отступ сверху */
  right: 25px; /* Отступ справа */
  font-size: 7em; /* Размер шрифта */
  font-weight: normal; /* Жирность шрифта */
  transform: scaleX(2.0);
}

.close:hover,
.close:focus {
  color: #6868ff; /* Цвет при наведении и фокусе */
  text-decoration: none; /* Убрать подчеркивание */
  cursor: pointer; /* Курсор в виде указателя */
}

/* Стили блока CONTACTS */
.contacts-section h3 {
  text-align: center;
  transform: translate(0%, 200%);
  -moz-transform: translate(0%, 180%);
}

.contact-form-container {
  position: relative;
  text-align: center;
}

.form-background-image {
  width: 80%; /* Подогнать по необходимости */
  height: auto; /* Подогнать по необходимости */
  transform: translate(-7%, 0%)
}

.get-in-touch {
  position: absolute;
  top: 75%; /* Измените значение в соответствии с нуждами */
  left: 30%;
  transform: translateX(-50%);
  color: #ffffff;
  padding: 5px 10px; /* Отступы вокруг текста */
  border-radius: 5px; /* Скругление углов */
  font-size: 2.8em;
}

.contact-form {
  position: absolute;
  top: 80%; /* Подогнать по необходимости */
  left: 60%;
  transform: translate(-50%, -50%);
}

.contact-form input, .contact-form textarea {
  width: 100%; /* Ширина поля ввода */
  padding: 10px;
  margin: 5px 0; /* Отступы между полями */
  border: 1px solid #ccc; /* Граница поля ввода */
  border-radius: 5px; /* Скругление углов поля ввода */
}

.contact-form .form-control {
    background: transparent;
    border: 0;
    border-bottom: 3px solid #ffffff;
    border-radius: 0;
    box-shadow: none;
    margin: 10px 0;
}

/* Placeholder поля ввода */
  ::-webkit-input-placeholder {color: white; opacity:1; font-size: 2.0em; font-family: 'Reef-Bold', Arial, sans-serif;}/* webkit */
  ::-moz-placeholder          {color: white; opacity:1; font-size: 2.0em; font-family: 'Reef-Bold', Arial, sans-serif;}/* Firefox 19+ */
  :-moz-placeholder           {color: white; opacity:1; font-size: 2.0em; font-family: 'Reef-Bold', Arial, sans-serif;}/* Firefox 18- */
  :-ms-input-placeholder      {color: white; opacity:1; font-size: 2.0em; font-family: 'Reef-Bold', Arial, sans-serif;}/* IE */

/* Стили для размера и цвета полей ввода */
input#email, input#name, textarea#message {
    color: white;   
}

input#name {
    max-width: 45%;
    margin-right: 5px;
}

input#email {
    max-width: 45%;
}

textarea#message {
    max-width: 95%;
}

.form-control-button {
  font-family: 'Moloko', Arial, sans-serif;
  position: absolute;
  top: 139%;
  left: 72%;
  transform: translate(-50%, -50%);
  font-size: 2.8em;
  padding: 8px 22px;
  background-color: #7b7bff;
  color: white;
  border-radius: 10px;
  border: none;
  cursor: pointer;
}

.form-control-button:hover { background-color: #6868ff; }

.social-links {
   display: flex;
   justify-content: center;
   align-items: center;
   margin-top: 15px;
}

.social-links img {
  width: 60px; /* Подогнать по необходимости */
  margin: 0 30px;
}

img.social-links-button:hover {
    width: 50px;
	transition-duration: 0.5s;
}

.cursor-pointer {
  cursor: pointer;
}

.email-info {
  font-family: 'Reef-Bold', Arial, sans-serif;
  text-align: center;
  margin-top: 20px;
  color: #7b7bff;
  font-size: 2.0em;
  text-decoration: none;
}

.email-info a:link{
  text-decoration: none !important;
  color: #7b7bff;
}

/* Убрать рамки в форме обратной связи при наведении по необходимости */
input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}
/* Убрать полосу прокрутки у textarea */
textarea {
    overflow: hidden; /* или auto */
}

/* Стили для Футера */
footer {
    background-color: rgb(255 255 255 / 0%); /* прозрачный фон */
    color: white;
    text-align: center; /* центрирование текста */
    padding: 20px 0;
    position: relative;
    bottom: 0;
    width: 100%;
}

.footer {
  padding-top: 120px; /* немного отступа сверху */
}

.footer-container {
  background-color: #fff;
  display: inline-flex; /* элементы в одну линию с возможностью использовать flex-свойства */
  align-items: center; /* вертикальное центрирование */
  justify-content: center; /* горизонтальное центрирование */
  gap: 10px; /* отступы между элементами внутри контейнера */
  width: 100%; /* ширина контейнера для полной заливки цветом */
}

.footer-span {
    font-family: 'Reef-Bold', Arial, sans-serif;
    color: #b0fed1;
    font-size: 2.0em;
}

.footer-star {
  width: 40px; /* задаем ширину звездочки */
  height: auto; /* высота будет пропорциональной */
  vertical-align: middle; /* Для выравнивания по центру */
  margin-top: -10px;
}

/* Стили для футера бегущая строка */
.marquee {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
}

.marquee-content {
    display: inline-block;
    padding-left: 100%; /* Начальное смещение */
    animation: marquee 20s linear 0s infinite;
	
}

@keyframes marquee {
    from { transform: translateX(10%); }
    to   { transform: translateX(-10%); }
}
}

.footer-span, .footer-star {
    display: inline-block;
    margin: 0 10px; /* Отступы между элементами */
}

/* Если нужно, добавяем медиа-запросы для адаптации к мобильным устройствам */
@media (max-width: 768px) {
  .footer-container {
    flex-direction: column; /* элементы друг под другом */
    gap: 5px; /* меньший отступ между элементами */
  }

  .footer-star {
    width: 15px; /* уменьшаем размер звездочек */
  }
}

/* Стили для кнопки "Наверх" */

.scroll-to-top {
    position: fixed;
    left: 20px;
    bottom: 65px;
	width: 100px;
    height: 100px;
    display: none;
    background-color: rgba(183, 203, 255, 0.5);
    border-radius: 50%;
    text-decoration: none;
    z-index: 999;
    transition: background-color 0.3s, color 0.3s;
}

.scroll-to-top:hover {
  background-color: rgb(255 255 255 / 30%); /* Белый фон при наведении */
}

span.scroll-span {
    font-size: 12em;
    display: inline-block;
    transform: translate(30%, -22%) rotate(285deg);
	color: #fff;
}

span.scroll-span:hover {
	color: #7b7bff; /* Фиолетовый цвет текста при наведении */
}

/* Показывать кнопку при скролле страницы */
body.scrolled .scroll-to-top {
  display: block; /* Отображать кнопку */
}

/* Стили для страницы WORKS */

/* Блок изображений общие стили */
.works-gallery-big {
    display: flex;
    justify-content: space-between;
    align-items: center;
	flex-wrap: wrap;
}

.works-gallery-big img {
    max-width: 350px;
    max-height: 165px;
    margin: 4px 1px;
    cursor: pointer;
    border-radius: 10px;
    transition: transform 0.2s;
    object-fit: cover;
    border-style: solid;
    border-color: #b7cbff;
    border-width: 5px;
}

.works-gallery-big img:hover {
  border-color: #7b7bff;
  transform: scale(1.1);
}

/* Стили для неполного 8-го ряда изображений */
.works-gallery-big.row-img-8 {
    justify-content: flex-start;
}

.works-gallery-big.row-img-8 img {
    margin: 4px 7px 0px 0px;
}

h3.teg-h3.about {
    transform: translate(0%, 20%);
}

img.about-star {
    transform: translate(340%, 190%);
    width: 15%;
}


img.work-star {
    transform: translate(-550%, 290%);
    width: 4%;
}

span.see-all-next {
cursor: pointer;
    position: absolute;
    color: #7b7bff;
    font-size: 3em;
    transition: 0.6s ease;
    user-select: none;
    transform: translate(0%, -42%);
}

span.see-all-next:hover {
    color: #6868ff;
    padding-top: 5px;
    padding-bottom: 5px;
}

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff; /* или любой другой цвет фона */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Прелоадер над другими элементами */	
}

/* Стили прелоадера */
/* Скрыть прелоадер */
.hide-preloader {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Размер изображения прелоадера */
.preloader-image {
	width: 200px;
    height: auto;
}	

/* Значек видео на превью */
/* Делаем сам контейнер родителем для абсолютных координат значка */
.work-overlay-gallery-img.has-video {
    position: relative;
}

/* Блок оверлея делаем кликабельно-прозрачным */
.work-overlay-gallery-img.has-video .work-overlay-img {
	top: 0;
    left: 0;
    pointer-events: none; 
}

/* Позиционируем значок ▶ относительно ВСЕГО контейнера миниатюры */
.work-overlay-gallery-img.has-video .work-overlay-img::after {
    content: '▶';
    font-family: Arial, sans-serif;
    font-size: 13px;
    color: #ffffff;
    background-color: rgba(123, 123, 255, 0.9); /* Ваш фирменный цвет */
    width: 26px;
    height: 26px;
    border-radius: 50%;
    
    /* Идеальное динамическое центрирование для любых экранов */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-left: 2px; 
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    
    /* Пропускаем клики мыши сквозь значок, чтобы работал JS плеера */
    pointer-events: none; 
    
    will-change: transform;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

/* Анимация увеличения при наведении мыши */
.work-overlay-gallery-img.has-video:hover .work-overlay-img::after {
    transform: translate(-50%, -50%) scale(1.15);
    background-color: #6868ff; 
}
/* Значек видео на end */

/* Значек видео страница works для галереии всех изображений */
/* Контейнер-изолятор для картинки с видео, повторяет её размеры */
.video-card-wrapper {
    position: relative;
    display: inline-block;
    width: auto;
    height: auto;
}

/* Иконка ▶ строго в углу конкретной картинки */
.grid-video-badge {
    content: '▶';
    font-family: Arial, sans-serif;
    font-size: 10px;
    color: #ffffff;
    background-color: rgba(123, 123, 255, 0.9); /* Ваш фирменный цвет */
    width: 22px;
    height: 22px;
    border-radius: 4px; /* Слегка скругленный квадрат */
    
    /* Абсолютное позиционирование внутри самой картинки */
    position: absolute;
    top: 10px;
    right: 10px;
    
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-left: 1px; /* Точная центровка треугольника */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    
    /* Пропускаем клики, чтобы при нажатии на значок открывалась модалка */
    pointer-events: none; 
    z-index: 1;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

/* Эффект увеличения значка при наведении на карточку */
.video-card-wrapper:hover .grid-video-badge {
    transform: scale(1.15);
    background-color: #6868ff;
}
/* Значек видео страница works для галереии всех изображений end*/

/* Дополнительный стиль специально для плашки GIF */
.grid-video-badge.gif-badge {
    font-size: 9px;
    font-weight: bold;
    letter-spacing: 0.5px;
    background-color: rgba(123, 123, 255, 0.9); /* Можно сделать её другого цвета, например, коралловой */
    padding-left: 0; /* Для текста убираем микро-смещение треугольника */
}

/* Изменяем цвет ховера для гифок */
.video-card-wrapper:hover .grid-video-badge.gif-badge {
    background-color: #6868ff;
}
/* Дополнительный стиль специально для плашки GIF end */

/* Плей для гивок главная страница */
/* Делаем сам контейнер родителем для абсолютных координат значка */
.work-overlay-gallery-img.has-gif {
    position: relative;
}

/* Блок оверлея делаем кликабельно-прозрачным и фиксируем в углу */
.work-overlay-gallery-img.has-gif .work-overlay-img {
    top: 0;
    left: 0;
    pointer-events: none; 
}

/* Позиционируем значок ▶ относительно ВСЕГО контейнера миниатюры */
.work-overlay-gallery-img.has-gif .work-overlay-img::after {
    content: '▶';
    font-family: Arial, sans-serif;
    font-size: 13px;
    color: #ffffff;
    background-color: rgba(123, 123, 255, 0.9); /* Ваш фирменный цвет */
    width: 26px;
    height: 26px;
    border-radius: 50%;
    
    /* Идеальное динамическое центрирование для любых экранов */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-left: 2px; 
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    
    /* Пропускаем клики мыши сквозь значок, чтобы работал JS плеера */
    pointer-events: none; 
    
    will-change: transform;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

/* Анимация увеличения при наведении мыши */
.work-overlay-gallery-img.has-gif:hover .work-overlay-img::after {
    transform: translate(-50%, -50%) scale(1.15);
    background-color: #6868ff; 
}
/* Плей для гивок главная страница end */

/* Для поля сообщение ограничение на растягивание */
#message {
    /* Полностью убирает возможность растягивать текстовое поле */
    resize: none; 
}

/* Контейнер кастомного уведомления при отправке почты */
.toast-notification {
    position: fixed;
    bottom: -100px; /* Изначально спрятано под экраном */
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(123, 123, 255, 0.95); /* Фирменный сине-фиолетовый */
    color: #ffffff;
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 0.5px;
    padding: 14px 28px;
    border-radius: 30px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 9999; /* Поверх модальных окон */
    opacity: 0;
    visibility: hidden;
    transition: bottom 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease, visibility 0.3s ease;
}

/* Иконка галочки/крестика */
.toast-icon {
    font-size: 16px;
    background: rgba(255, 255, 255, 0.2);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Класс, который JS будет добавлять для показа */
.toast-notification.show {
    bottom: 40px; /* Плавно выплывает снизу */
    opacity: 1;
    visibility: visible;
}

/* Модификатор для ошибок (если форма не отправилась, плашка станет коралловой) */
.toast-notification.toast-error {
    background-color: rgba(255, 123, 123, 0.95); /* Коралловый цвет, как у гифок */
}
/* Контейнер кастомного уведомления при отправке почты end */