* {
    box-sizing: border-box;
}

@font-face {
    font-family: 'Spektra';
    src: url('Spektra-CondensedBold.ttf') format('truetype');
}

@font-face {
    font-family: 'Graphik';
    src: url('GraphikCompact-Super-Trial.otf') format('opentype');
}
@font-face {
    font-family: 'Spektraitalic';
    src: url('Spektra-CondensedBoldItalic.ttf') format('opentype');
}




.video-text-container {
    display: flex;
    align-items: center;  /* Align items in the center */
    justify-content: space-between; /* Space out video and text */
    width: 90%; /* Keep some margin on sides */
    margin: auto; /* Center it */
    padding: 20px 0;
}

.video-box {
    flex: 1; /* Takes 50% of space */
    max-width: 50%; /* Ensure video doesn't get too big */
}

.video-box video {
    width: 100%; /* Make video responsive */
    height: auto;
    border-radius: 10px; /* Optional rounded corners */
}

.text-box {
    flex: 1; /* Takes the remaining 50% */
    padding-left: 20px; /* Adds spacing between video and text */
    color: white;
    font-family: 'Graphik', sans-serif;
}

.text-box2 {
    margin-top: -50px;
    flex: 1; /* Takes the remaining 50% */
    padding-left: 20px; /* Adds spacing between video and text */
    color: white;
    font-family: 'Graphik', sans-serif;
}



header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Transparent black */
    backdrop-filter: blur(10px);
    color: white;
    padding: 10px;
    z-index: 9999; /* Ensures it's above all content */
}

nav {
    position: fixed;
    width: 100%;
    padding: 10px;
    display: flex;
    justify-content: center; /* Centers nav items horizontally */
    align-items: center;     /* Ensures nav items are aligned vertically */
    top: 0; /* Ensure nav stays at the top */
    z-index: 9998; /* Ensures it's below the header */
    background-color: transparent; /* Make sure background is transparent */
}

ol {
    display: flex;
    padding: 0;
    margin: 0;
    list-style: none;
}

li {
    border: solid 2px white;
    padding: 15px 40px;
    border-radius: 500px;
    text-align: center;
    display: inline-block;
    margin: 0 10px;
    min-width: 150px;
    font-family: 'Graphik', sans-serif;
    background-color: black; /* Set background color to make blend modes visible */
    transition: background-color 0.3s ease, mix-blend-mode 0.3s ease; /* Smooth transition */
}

il {
    border: solid 2px white;
    padding: 15px 40px;
    border-radius: 500px;
    text-align: center;
    display: inline-block;
    margin: 0 10px;
    min-width: 150px;
    font-family: 'Graphik', sans-serif;
    background-color: white; /* Set background color to make blend modes visible */
    transition: background-color 0.3s ease, mix-blend-mode 0.3s ease; /* Smooth transition */
}




/* Apply different blend modes for each list item */
li:nth-child(1) {
    mix-blend-mode: difference; /* Multiply blend mode for the first button */
}

li:nth-child(2) {
    mix-blend-mode: screen; /* Screen blend mode for the second button */
}

li:nth-child(3) {
    mix-blend-mode: overlay; /* Overlay blend mode for the third button */
}

li:nth-child(4) {
    mix-blend-mode: difference; /* Difference blend mode for the fourth button */
}

li:hover {
    background-color: white !important;
    mix-blend-mode: normal; /* Revert to normal when hovered */
}

a {
    color: white;
    text-decoration: none;
}



a:hover {
    color: black;
    text-decoration: none;
}

body {
    background-color: black;
    
    
}

img {
    max-width: 100%;
    height: auto;
}

h1 {
    font-family: 'Spektra', sans-serif;
    font-size: 100px;
    color: white;
    margin-bottom: -80px;
}

h2 {
    font-family: 'Spektra', sans-serif;
    font-size: 70px;
    color: white;
    margin-bottom: -20px;
}

h3 {
     font-family: 'Spektra', sans-serif;
    font-size: 70px;
    color: white;
    margin-bottom: 10px;
}



p {
    font-family: 'Graphik', sans-serif;
    font-size: 40px;
    color: white;
}

p2 {
    font-family: 'Graphik', sans-serif;
    font-size: 25px;
    color: white;
    margin-bottom: 1px;
}

.centered-section {
    display: flex;               /* Use flexbox */
    justify-content: center;     /* Center content horizontally */
    align-items: center;         /* Center content vertically */
    height: 100vh;               /* Full viewport height */
    margin: 0;                   /* Remove default margin */
}

.content {
    text-align: center;          /* Center the text inside the content div */
}

@media (min-width: 500px) {
    .half {
        padding: 10px;
        float: left;
        width: 50%;
    }
}





:root {
  --step--2: clamp(3.13rem, 2.62rem + 2.51vw, 5.76rem);
  --step--1: clamp(3.75rem, 3.09rem + 3.29vw, 7.20rem);
  --step-0: clamp(4.50rem, 3.64rem + 4.29vw, 9.00rem);
}

@-webkit-keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
@-webkit-keyframes marquee-r {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes marquee-r {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}
@-webkit-keyframes rollCage {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(5turn);
  }
}
@keyframes rollCage {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(5turn);
  }
}
body {
  background-color: black;
  font-family: 'Spektra';
}

.marquee {
  border-bottom: 1px solid #efefef;
  -webkit-text-stroke: 2px #fff;
  color: black;
  font-size: var(--step-0);
  height: calc(170px + 4rem);
  overflow: hidden;
  position: relative;
  width: 100vw;
}
.marquee img {
  -o-object-fit: cover;
     object-fit: cover;
  max-height: 150px;
}

.track {
  height: 100%;
  overflow: hidden;
  padding: 2rem 0;
  position: absolute;
  transition: background-color 300ms ease, color 300ms ease;
  white-space: nowrap;
}
.track .text {
  -webkit-animation: marquee 50000ms linear infinite;
          animation: marquee 50000ms linear infinite;
  align-items: center;
  display: inline-flex;
  will-change: transform;
}
.track .text.-r {
  -webkit-animation-name: marquee-r;
          animation-name: marquee-r;
}
.track .text.-twox {
  -webkit-animation-duration: 30000ms;
          animation-duration: 30000ms;
}
.track .text.-r {
  -webkit-animation-name: marquee-r;
          animation-name: marquee-r;
}
.track .text.-twok {
  -webkit-animation-duration: 40000ms;
          animation-duration: 40000ms;
}
.track:hover {
    -webkit-text-stroke: -2px #000000;
  background-color: black;
  color: white;
}
.track:hover img {
  -webkit-animation: rollCage 10000ms linear infinite;
          animation: rollCage 10000ms linear infinite;
}
.track:hover .-green {
  color: white;
}

.-green {
  color: black;
  font-weight: 900;
}

html {
    scroll-behavior: smooth;
}

/* uus */
.justified-text {
    text-align: justify;
    max-width: 1000px; /* Adjust the width as needed */
    margin: 0 auto; /* Center the text box */
    padding: 20px;
    color: white; /* Adjust color if needed */
    font-family: 'Graphik', sans-serif;
    line-height: 1.6; /* Improves readability */
}
.spacer {
    height: 100px; /* Adjust height for bigger or smaller space */
    width: 100%;
}


.button {
  cursor: pointer;
  position: relative;
  padding: 10px 24px;
  font-size: 18px;
  color: white;
  border: 2px solid white;
  border-radius: 34px;
  background-color: black;
  font-family: 'Graphik', sans-serif;
  transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);
  overflow: hidden;
  margin: 10px; /* Adds spacing around the button */
}

.button::before {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 50px;
  height: 50px;
  border-radius: inherit;
  scale: 0;
  z-index: -1;
  background-color: white;
  transition: all 0.6s cubic-bezier(0.43, 2, 0.320, 2);
}

.button:hover::before {
  scale: 7;
}

.button:hover {
  color: black;
  scale: 1.1;
}

.button:active {
  scale: 1;
}

/* teine nupp */
.button2 {
  cursor: pointer;
  position: relative;
  padding: 10px 24px;
  font-size: 18px;
  color: black;
  border: 2px solid white;
  border-radius: 34px;
  background-color: white;
  font-family: 'Graphik', sans-serif;
  transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);
  overflow: hidden;
  margin: 10px; /* Adds spacing around the button */
}

.button2::before {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 50px;
  height: 50px;
  border-radius: inherit;
  scale: 0;
  z-index: -1;
  background-color: black;
  transition: all 0.6s cubic-bezier(0.43, 2, 0.320, 2);
}

.button2:hover::before {
  scale: 7;
}

.button2:hover {
  color: white;
  scale: 1.1;
}

.button2:active {
  scale: 1;
}



.image-box {
    display: flex;
    align-items: center;  /* Align items in the center */
    justify-content: space-between; /* Space out video and text */
    width: 90%; /* Keep some margin on sides */
    margin: auto; /* Center it */
    padding: 20px 0;
}

.image-box {
    flex: 1; /* Takes 50% of space */
    max-width: 50%; /* Ensure video doesn't get too big */
    width: 100%; /* Make video responsive */
    height: auto;
    border-radius: 30px; /* Optional rounded corners */
}