* { margin: 0; padding: 0;  }
    body, h1, h2, h3, h4, h5, h6, p, span, div { font-family: 'Oswald', sans-serif; }
    
	
.video-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover; /* сохраняем пропорции и обрезаем лишнее */
  pointer-events: none;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

img,
video,
iframe {
  max-width: 100%;
  height: auto;
}	
	
	
	
    .gradient-overlay1 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.5) 60%, rgba(0, 0, 0, 0.85) 80%, rgba(0, 0, 0, 1) 100%); pointer-events: none; }
    .video-title { position: absolute; top: 50%; left: 5%; transform: translateY(-50%) translateY(30px); color: white; font-size: 3rem; font-weight: 200; z-index: 2; max-width: 40%; text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7); opacity: 0; transition: opacity 1s ease, transform 1s ease; }
    .video-title.visible { opacity: 1; transform: translateY(-50%) translateY(0); }
    .image-section { position: relative; width: 100%; height: auto; background: #000; padding: 60px 0px; text-align: center; }
    .image-section video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
    .image-section .section-title { position: relative; color: white; font-size: 3rem; font-weight: 200; text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7); z-index: 2; margin-bottom: 20px; opacity: 0; transform: translateY(30px); transition: opacity 1s ease, transform 1s ease; }
    .image-section .section-title.visible { opacity: 1; transform: translateY(0); }
    .image-section .image-links { position: relative; display: flex; justify-content: center; align-items: center; gap: 20px; flex-wrap: wrap; z-index: 2; margin-bottom: 90px; }
    .image-section .image-links a { display: block; width: 375px; max-width: 90%; cursor: pointer; opacity: 0; transform: translateY(30px); transition: opacity 1s ease, transform 1s ease; }
    .image-section .image-links a.visible { opacity: 1; transform: translateY(0); }
    .image-section .image-links img { width: 100%; display: block; }
    .image-section .description-text { position: relative; color: white; font-size: 1.2rem; font-weight: 300; max-width: 800px; margin: 0 auto; text-align: left; line-height: 1.5; z-index: 2; opacity: 0; transform: translateY(30px); transition: opacity 1s ease, transform 1s ease; }
    .image-section .description-text.visible { opacity: 1; transform: translateY(0); }
	.image-section .description-text2 { position: relative; color: white; font-size: 1.2rem; font-weight: 300; max-width: 800px; margin: 0 auto; text-align: center; line-height: 1.5; z-index: 2; opacity: 0; transform: translateY(30px); transition: opacity 1s ease, transform 1s ease; }
    .image-section .description-text2.visible { opacity: 1; transform: translateY(0); }
    .popup-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(1, 1, 1, 1); display: none; justify-content: center; align-items: center; z-index: 9999; }
    .popup-overlay iframe { width: 90%; height: 90%; max-width: 960px; max-height: 540px; }
	.image-section .description-text2 {
      position: relative;
      color: white;
      font-size: 1.7rem;
      font-weight: 300;
      max-width: 800px;
      margin: 0 auto;
      line-height: 1.5;
      z-index: 2;
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 1s ease, transform 1s ease;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
    }
    .image-section .description-text2.visible {
      opacity: 1;
      transform: translateY(0);
    }
	
	
	



	
	body {
  margin: 0;        /* Убираем отступы браузера */
  padding: 0;       /* Убираем отступы */
  width: 100%;     /* 100% от ширины окна браузера */
  overflow-x: hidden; /* Убираем горизонтальный скролл (если нужно) */
}
	
.popup-overlay .close-btn {
  display: none;
  position: fixed;
  top: 7%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 7.8rem;
  color: white;
  cursor: pointer;
  z-index: 10000;
}

    
@media (max-width: 768px) {
  .image-section .image-links {
    flex-direction: column;
    gap: 10px;
  }
  .image-section .image-links a {
    width: 100%;
  }
  .image-section .description-text {
    font-size: 1.4rem;
    padding: 0 10px;
    text-align: justify;
  }
  .image-section .section-title {
    font-size: 2.5rem;
  }
  .collaboration-section h1 {
    font-size: 2.5rem;
  }
}

    .collaboration-section { position: relative; width: 100%; padding: 40px 00px; text-align: center; }
    .collaboration-section h1 { color: white; font-size: 3rem; font-weight: 200; text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7); margin-bottom: 60px; opacity: 0; transform: translateY(30px); transition: opacity 1s ease, transform 1s ease; }
    .collaboration-section h1.visible { opacity: 1; transform: translateY(0); }
    .carousel { position: relative; width: 100%; overflow: hidden; }
    .carousel-track { display: flex; width: max-content; animation: scrollLeft 36s linear infinite; }
    .carousel-item { flex: 0 0 250px; margin-right: 20px; }
    .carousel-item img { width: 100%; height: auto; display: block; }
    @keyframes scrollLeft { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
    @media (max-width: 768px) { .carousel-item { flex: 0 0 200px; margin-right: 15px; } .carousel-track { animation: scrollLeftMobile 24s linear infinite; } @keyframes scrollLeftMobile { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } }