* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  margin: 0 !important;
}
main {
  overflow: hidden;
}


:root {
  --index: calc(1vw + 1vh);
  --colot-header: #f4efec;
  --color-text: #cdc6c3;
  --gallery-gap: 50px;
}

@font-face {
  font-family: Raleway-c;
  src: url(../fonts/raleway-regular.woff2);
}
@font-face {
  font-family: Outfit-c;
  src: url(../fonts/outfit-regular.woff2);
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: Outfit-c, Arial, Helvetica, sans-serif;
}
/* will-change 
Якщо елементи змінюються на сторінці (в основному змінюється transform)
обʼєкти можуть лагати. Тут ми знаходимо всі обʼєкти, що змінюються
і додаємо їм will-change, компʼютер виділяє більше ресурсів на ці обʼєкти.
Там ми забираємо лаги.
*/
.content,
.main-img,
.main-header,
.gallery > *,
.article-wrapper > * {
  will-change: transform;
}
body {
  background-color: #000;
  background-size: 50px;
  color: #fafafa;
  font-family: Arial, Helvetica, sans-serif;
  overflow-x: hidden;
}

a {
  text-decoration: none;
}
ul {
  list-style: none;
}
.main-header {
  height: 100vh;
}
/*.main-img {
  width: calc(var(--index) * 36);
  position: absolute;
  left: 36vw;
  top: 8vh;
  z-index: -1;
}*/
header {
  position: fixed;
  z-index: 10000;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.header-contacts a {
  transition: 0.3s ease all;
  color: #fff;

}

.no-animation {
  transition: none !important;
}

.header-contacts .copyrate-text-block.site-link {
  padding: 0;
}

.header-contacts .copyrate-text-block.site-link a {
  font-size: 32px;
  color: #0c97e0;
  line-height: 0.8;
  margin-bottom: 7px;
}

header a:hover, .footer a:hover {
  transition: 0.3s ease all;
  color: #0c97e0;
}
.header-contacts {
  position: relative;
  right: 0;
  z-index: 1000;
  padding: 30px 30px;
  font-size: 24px;
}

.burger-menu_text .copyrate-text-block.site-link {
  margin-left: 30px;
}

.burger-menu_text .copyrate-text-block.site-link a {
  font-size: 30px;
  color: #0c97e0;
}

.container {
  padding: 0 7vw;
  max-width: 1920px;
  margin: 0 auto;
}

.burger-menu {
  position: relative;
}
.menu-list {
  display: none;
}
.change.change-bg .menu-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  left: 56%;
  top: 50%;
}
.menu-item {
  margin: 10px 0;
}
.menu-item a {
  color: #fff;
}
#video_fish {
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.video-screen {
  height: 100vh;
  background-color: #000;
  position: relative;
  top: -120px;
}
.video-screen-title-block {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}
.main-title {
  font-size: 98px;
  /*font-family: "e-UkraineHead-Bold", sans-serif;*/
}
.main-subtitle {
  font-size: 40px;
  text-align: right;
  /*font-family: "e-Ukraine-Light", sans-serif;*/
  color: #0c97e0;
}

/* portfolio */
.gallery-title {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 10;
  top: 0;
}

.gallery-title h2 {
  font-size: 60px;
  color: #fafafa;
}

.portfolio {
  position: relative;
  background-color: #000;
  /*background-image: linear-gradient(
    to bottom,
    #000000,
    #160d12,
    #201621,
    #262033,
    #252b46
  );*/
}
.gallery {
  display: flex;
  padding: calc(var(--index) * 15) 0 50px;
  padding-top: 120px;
}

.seo-description {
  margin-bottom: 190px;
}

.seo-description b {
  font-size: 31px;
  color: #0c97e0;
}

.seo-description p {
  margin-bottom: 8px;
  font-size: 23px;
  letter-spacing: 0.4px;
}

.seo-description ol, .seo-description ul {
  padding-left: 20px;
  margin-bottom: 20px;
}

.seo-description ol li, .seo-description ul li {
  padding-bottom: 5px;
  color: #cdc6c3;
  font-size: 24px;
}

section#about {
  background: #000;
}

.home-description {
  position: relative;
}

.home-description_decorate {
  position: absolute;
  bottom: -140px;
  right: 325px;
}


.home-description_decorate img {
  width: 140%;
  position: relative;
  z-index: 1;
}


/* .gallery > *,
.article-wrapper > * {
  flex: 1;
  display: flex;
  align-items: center;
  flex-direction: column;
} */

.gallery-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.gallery-wrapper_block {
  display: flex;
  justify-content: center;
  gap: 80px;
}
.gallery-text-block {
  padding-top: 20px;
}
.gallery__item {
  max-width: calc(var(--index) * 21);
  margin-top: var(--gallery-gap);
  max-height: 180vh;
  border-radius: 8px;
  height: 360px;
  object-fit: cover;
}
/*_______анимация_______*/
/* Общие стили для начального состояния */
.gallery__item {
  opacity: 0;
  transform: translateX(0); /* Сброс анимации */
  transition: transform 0.9s ease, opacity 0.9s ease;
}

/* Анимация слева */
.animate-left {
  transform: translateX(-100%);
}

.animate-left.visible {
  transform: translateX(0);
  opacity: 1;
}

/* Анимация справа */
.animate-right {
  transform: translateX(100%);
}

.animate-right.visible {
  transform: translateX(0);
  opacity: 1;
}

/* Анимация для элементов, уходящих налево */
.animate-left {
  transform: translateX(-100%);
}

/* Анимация для элементов, уходящих направо */
.animate-right {
  transform: translateX(100%);
}

/* Элементы в зоне видимости */
.visible {
  transform: translateX(0);
  opacity: 1;
}

/* ____ */

.text-block {
  color: var(--color-text);
  position: relative;
}
.text-block__h {
  font-size: 31px;
  line-height: 2.4rem;
  color: var(--colot-header);
  margin-bottom: 1.5rem;
}
.text-block__p {
  line-height: 23px;
  font-size: 23px;
  margin-bottom: 4px;
}
/* article */
section#about .container {
  position: relative;
  z-index: 2;
}
.article {
  position: relative;
}
.article-wrapper {
  position: relative;
  padding: 100px 0 200px;
}
.article-wrapper button {
  background-image: linear-gradient(to bottom, #d13f5f, #fb6b3e);
}
.article-wrapper button:hover {
  background-image: linear-gradient(to bottom, #d13f5f, #fb6b3e);
}
#blog {
  font-size: 60px;
  color: #ff5e1a;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 10;
  top: 0;
}
/* footer */
footer {
  background-color: #000000;
}
.footer {
  display: flex;
  position: relative;
  font-family: Arial, Helvetica, sans-serif;
  justify-content: space-between;
}
.block-img-footer {
  width: 25%;
  position: relative;
  top: -150px;
}
.img-right {
  top: -50px;
}
.block-img-footer img {
  width: 100%;
}
.img-right img {
  background: url(../images/right-bg.png) center/contain no-repeat;
  background-size: 77%;
  width: 150%;
  position: relative;
  bottom: -20px;
  left: -88px;
  z-index: 1;
}
.img-left img {
  background: url(../images/blue-bg.png) center/contain no-repeat;
  width: 155%;
  position: relative;
  bottom: -140px;
  left: -50px;
  rotate: 11deg;
  z-index: 1;
}

img.gallery__item {
  max-width: 400px;
}
.text-footer-wrapper {
  width: 60%;
  max-width: 700px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 100;
}
.lists-block-wrapper {
  display: flex;
  justify-content: center;
  text-align: center;
  align-items: start;
  width: 100%;
  padding: 20px 0;
}

.lists-block-wrapper .footer-info-block {
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: #cdc6c3;
  text-align: start;
}

.lists-block-wrapper .footer-info-block a {
  text-decoration: none; 
  color: inherit; 
  display: flex; 
  align-items: center;
  justify-content: start;
}

.lists-block-wrapper .footer-info-block a:hover {
  transition: 0.3s ease all;
  color: #0c97e0;
}

.lists-block-wrapper .footer-info-block strong {
  display: block;
  font-size: 18px;
  margin-bottom: 7px;
  color: #fff;
}

.copyrate-text-block.site-link a {
  font-size: 50px;
  color: #0c97e0;
}


.copyrate-text-block {
  padding: 30px 0 20px;
}
.copyrate-text-block img {
  width: 40px;
  height: 40px;
}
.copyrate-text-block a {
  color: #fff;
  display: flex;
  align-items: center;
}
.first-list h3,
.second-list h3,
.footer-title {
  font-weight: 400;
  color: #fff;
}
.first-list,
.second-list {
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.footer-item {
  padding-top: 15px;
}
.footer-item a {
  transition: 0.3s ease all;
}

.mobile {
  display: none;
}
/* ___________scroll arrow home___________ */
.scroll-home-down {
  display: block;
  position: absolute;
  bottom: 65px;
  z-index: 100;
  left: 50%;
  transform: translateX(-50%);
}
.scroll-home-down span {
  display: block;
  color: #fff;
  font-size: 20px;
  position: absolute; 
}
.scroll-home-down .scroll-home-down_one {
  animation: animeone 3s infinite linear;
  opacity: 0;
  transform: scale(.4, .4);
}
.scroll-home-down .scroll-home-down_two {
  animation: animetwo 3s infinite linear;
  opacity: 1;
}
.scroll-home-down .scroll-home-down_three {
  animation: animethree 3s infinite linear;
  opacity: 1;
}
.scroll-home-down .scroll-home-down_four {
  animation: animefour 3s infinite linear;
  opacity: 0;
  transform: scale(.4, .4);
}
@keyframes animeone {
  0%, 10% {
    opacity: 0;
    transform: translateY(0px) scale(.4, .4);
  }
  33.3%, 43.3% {
    opacity: 1;
    transform: translateY(20px);
  }
  66.6%, 76.6% {
    opacity: 1;
    transform: translateY(30px);
  }
  100% {
    opacity: 0;
    transform: translateY(50px) scale(.4, .4);
  }
}
@keyframes animetwo {
  0%, 10% {
    opacity: 1;
    transform: translateY(20px);
  }
  33.3%, 43.3% {
    opacity: 1;
    transform: translateY(30px);
  }
  66.6%, 76.6% {
    opacity: 0;
    transform: translateY(50px) scale(.4, .4);
  }
  100% {
    opacity: 0;
    transform: translateY(0px) scale(.4, .4);
  }
}
@keyframes animethree {
  0%, 10% {
    opacity: 1;
    transform: translateY(30px);
  }
  33.3%, 43.3% {
    opacity: 0;
    transform: translateY(50px) scale(.4, .4);
  }
  66.6%, 76.6% {
    opacity: 0;
    transform: translateY(0px) scale(.4, .4);
  }
  100% {
    opacity: 1;
    transform: translateY(20px);
  }
}
@keyframes animefour {
  0%, 10% {
    opacity: 0;
    transform: translateY(50px) scale(.4, .4);
  }
  33.3%, 43.3% {
    opacity: 0;
    transform: translateY(0px) scale(.4, .4);
  }
  66.6%, 76.6% {
    opacity: 1;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(30px);
  }
}
body {
	background: #000000;
	display: flex;
	justify-content: center;
}

/* ___________________СТАТТІ ___________________ */
.statty-page.container {
  padding-top: 100px;
  padding-bottom: 140px;
}
.statty-page__title {
  text-align: center;
  font-size: 42px;
  margin: 40px 0;
}

/* Контейнер постов */
.statty-page__posts-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
}

.statty-page__post-image a {
    display: flex;
    height: 240px;
}
.statty-page__post-image a img {
	object-fit: cover;
}

/* Ряд постов */
.statty-page__row {
  display: flex;
  justify-content: start;
  gap: 20px;
  margin-bottom: 30px;
}

/* Карточка поста */
.statty-page__post {
  background-color: #111111; /* Тёмный фон для карточек */
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  flex: 1;
  max-width: calc(33% - 20px);
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.statty-page__post:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
}

/* Изображение поста */
.statty-page__post-image img {
  max-width: 100%;
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin-bottom: 15px;
}

/* Заголовок поста */
.statty-page__post-title {
  font-size: 18px;
  margin: 10px 0;
}

.statty-page__post-title a {
  color: #ffffff;
  text-decoration: none;
  transition: color 0.3s ease;
}

.statty-page__post-title a:hover {
  color: #0c97e0; /* Светлый акцентный цвет при наведении */
}

/* Дата поста */
.statty-page__post-date {
  font-size: 14px;
  color: #aaaaaa;
  margin-bottom: 10px;
}

/* Описание поста */
.statty-page__post-excerpt {
  font-size: 16px;
  line-height: 1.6;
  color: #cccccc;
}

/* Пагинация */
.statty-page__pagination {
  text-align: center;
  margin: 40px 0;
}

.statty-page__pagination a {
  color: #ffffff;
  background-color: #1e1e1e;
  padding: 8px 16px;
  margin: 0 5px;
  border-radius: 4px;
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.statty-page__pagination a:hover {
  background-color: #0c97e0;
  color: #ffffff;
}

.statty-page__pagination .current {
  color: #ffffff;
  pointer-events: none;
}
/* ______ */
.statty-single-page {
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: center;
}

.statty-single-page_img {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 930px; /* Ограничиваем ширину изображения */
  max-height: 430px;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

.statty-single-page_img img {
  width: 100%;
  height: auto;
  display: block;
}

.statty-single-page_title {
  text-align: center;
  font-size: 2rem;
  font-weight: bold;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.statty-single-page_time {
  font-size: 1rem;
  color: #999; /* Слегка серый цвет для времени */
  text-align: center;
  margin: 0;
}

.statty-single-page_descr {
  font-size: 1.5rem;
  text-align: justify;
  word-break: break-word;
  margin-top: 20px;
  padding-bottom: 20px;
}

/* ___ */

.statty-single-page_descr p {
  margin-bottom: 20px;
  text-align: justify;
}

.statty-single-page_descr ul, .statty-single-page_descr ol {
  list-style: disc;
  padding: 8px 20px 0 12px;
}

.statty-single-page_descr ul li, .statty-single-page_descr ol li {
  list-style: disc;
}

.statty-single-page_descr a {
  color: #0c97e0;
}

.statty-single-page_descr img {
  height: auto;
  margin: 8px; 
}

.statty-single-page_descr img.alignright {
  float: right;
  clear: right; /* Обеспечивает, чтобы каждый блок обтекания начинался с новой строки */
}

.statty-single-page_descr img.alignleft {
  float: left;
  clear: left; /* Обеспечивает, чтобы каждый блок обтекания начинался с новой строки */
}




@media (max-width: 1200px) {
  .home-description_decorate {
    bottom: -40px;
    right: 0;
  }

  .home-description_decorate img {
    width: 100%;
  }
	
	.statty-page__post-image a {
    	height: 180px;
	}
}

@media (max-width: 899.9px) {
  .img-left img {
    bottom: -140px;
  }

  .img-right img {
    bottom: -80px;
  }

  .home-description_decorate {
    display: none;
  }
}

@media (max-width: 768.9px) {
  .statty-single-page_descr img {
    max-width: 100%;
    float: none; 
    margin: 0 0 20px 0; 
  }
	.statty-page__post-image a {
    	height: 140px;
	}

  .statty-page__row {
    flex-wrap: wrap; /* Позволяет постам переноситься */
  }

  .statty-page__post {
    flex: 1 1 calc(50% - 20px); /* Два поста в ряду */
    max-width: calc(50% - 20px);
  }

  .header-contacts a {
    font-size: 20px;
  }
  .header-contacts .copyrate-text-block.site-link a {
    font-size: 24px;
  }

  .header-contacts svg {
    width: 20px;
    height: 20px;
  }

  .main-title {
    font-size: 68px;
  }

  .main-subtitle {
    font-size: 32px;
  }

  .gallery-wrapper_block {
    gap: 40px;
    max-width: 100%;
    width: 100%;
  }

  .gallery-wrapper_block  .gallery__item {
    max-width: 100%;
    width: 100%;
    margin-top: 0;
  }

  .text-block.gallery__item.gallery-text-block {
    height: auto;
    max-height: 100%;
  }


  .gallery-title h2 {
    font-size: 50px;
    color: #fafafa;
  }

  .gallery-wrapper {
    gap: 80px;
  }

  .gallery-wrapper .gallery-wrapper_block {
    flex-direction: column;
  }
  
  .gallery-wrapper .gallery-wrapper_block:nth-child(1),
  .gallery-wrapper .gallery-wrapper_block:nth-child(3),
  .gallery-wrapper .gallery-wrapper_block:nth-child(5),
  .gallery-wrapper .gallery-wrapper_block:nth-child(7),
  .gallery-wrapper .gallery-wrapper_block:nth-child(9),
  .gallery-wrapper .gallery-wrapper_block:nth-child(11),
  .gallery-wrapper .gallery-wrapper_block:nth-child(13) {
    flex-direction: column-reverse;
  }

  .burger-menu_text .copyrate-text-block.site-link a {
    font-size: 24px;
  }

  .img-right img {
    left: -58px;
    bottom: -100px;
  }

  .img-left img {
    left: -30px;
    bottom: -180px;
  }
}

@media (max-width: 550px) {
  .img-right.block-img-footer, .img-left.block-img-footer {
    position: absolute;
    width: 100%;
    top: -100px;
  }

  .img-right img {
    background-size: 77%;
    width: 180px;
    position: absolute;
    top: -78px;
    left: auto;
    right: -30px;
    z-index: 1;
  }
	
	.statty-page__post-image a {
    	height: 160px;
	}

  .block-img-footer_wrapper {
    position: relative;
    width: 100%;
    height: 150px;
  }

  .img-left img {
    position: relative;
    width: 180px;
    left: -30px;
    z-index: 1;
    top: -68px;
  }

  .copyrate-text-block.site-link a {
    font-size: 30px;
  }

  .copyrate-text-block img {
    width: 30px;
    height: 30px;
  }

  .copyrate-text-block a {
    font-size: 16px;
  }

  .mobile {
    display: block;
  }

  .text-block__p, .seo-description ol li, .seo-description ul li, .seo-description p {
    font-size: 18px;
  }

  .main-title {
    font-size: 44px;
  }

  .main-subtitle {
    font-size: 20px;
  }

  .header-contacts {
    padding: 20px;
  }

  .header-contacts .copyrate-text-block.site-link a {
    font-size: 19px;
    margin-bottom: 6px;
  }

  .header-contacts p {
    line-height: 0.7;
  }

  .gallery-title h2 {
    font-size: 35px;
  }

  .header-contacts a {
    font-size: 16px;
  }

  .seo-description b {
    font-size: 28px;
  }

  .video-screen-title-block {
    top: 40%;
  }

  #video_fish {
    width: 115%;
  }

  .scroll-home-down {
    bottom: 100px;
  }

  .burger-btn.change span:nth-child(1) {
    top: 13px;
  }

  .text-footer-wrapper {
    width: 100%;
  }

  .burger-menu_text .copyrate-text-block.site-link {
    display: none;
  }

  .statty-single-page_title {
    font-size: 1.4rem;
  }

  .statty-single-page_time {
    font-size: 0.8rem;
  }

  .statty-single-page_descr {
    font-size: 1.1rem;
  }
  .statty-single-page.container {
    margin-bottom: 120px;
  }

  .portfolio {
    top: -60px;
  }

  .statty-page__post {
    flex: 1 1 100%; /* Один пост на строку */
    max-width: 100%;
  }

  .statty-page__row {
    gap: 20px; /* Между постами */
  }

  .statty-page.container {
    padding-top: 30px;
  }
}

@media (max-width: 400px) {

  .text-footer-wrapper {
    width: 100%;
  }

  h2.footer-title {
    text-align: center;
  }
}