@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

.font-Syne {
   font-family: 'Roboto', sans-serif;
}

.item-old {
   display: flex;
   justify-content: space-between;

   padding-top: 0.5rem
      /* 8px */
   ;
   padding-bottom: 0.5rem
      /* 8px */
   ;
}

.item {
   display: flex;
   justify-content: space-between;
   border-bottom-width: 1px;
   padding-top: 0.5rem
      /* 8px */
   ;
   padding-bottom: 0.5rem
      /* 8px */
   ;
}

.font-Montserrat {
   font-family: 'Montserrat', sans-serif;
}

.app-main {
   position: absolute;
   overflow-y: hidden;
   overflow: hidden;
}

.loader-section {


   position: absolute;
   z-index: 2;
}

.floating {
   animation-name: floating;
   animation-duration: 3s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in-out;

}

.floating-slow {
   animation-name: floating;
   animation-duration: 6s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in-out;

}

@keyframes floating {
   0% {
      transform: translate(0, 0px);
   }

   50% {
      transform: translate(0, 15px);
   }

   100% {
      transform: translate(0, -0px);
   }
}

.animate-blink {
   animation: blink-animation 2s steps(5, start) infinite;
   -webkit-animation: blink-animation 2s steps(5, start) infinite;
 }
 @keyframes blink-animation {
   to {
     visibility: hidden;
   }
 }
 @-webkit-keyframes blink-animation {
   to {
     visibility: hidden;
   }
 }

 video {
   object-fit: cover;
   position: absolute;
   top: 0;
   left: 0;
   height: 70%;
   width: 100vw;
 }
 .video-wrapper {


   position: relative;
   overflow: hidden;


 }
 .header{

 } 

 /* Marquee styles */
.marquee {
   --gap: 1rem;
   position: relative;
   display: flex;
   overflow: hidden;
   user-select: none;
   gap: var(--gap);
 }
 
 .marquee__content {
   flex-shrink: 0;
   display: flex;
   justify-content: space-around;
   gap: var(--gap);
   min-width: 100%;
 }
 
 @keyframes scroll {
   from {
     transform: translateX(0);
   }
   to {
     transform: translateX(calc(-100% - var(--gap)));
   }
 }
 
 /* Pause animation when reduced-motion is set */
 @media (prefers-reduced-motion: reduce) {
   .marquee__content {
     animation-play-state: paused !important;
   }
 }
 
 /* Enable animation */
 .enable-animation .marquee__content {
   animation: scroll 20s linear infinite;
 }
 
 /* Reverse animation */
 .marquee--reverse .marquee__content {
   animation-direction: reverse;
 }
 
 /* Pause on hover */
 .marquee--hover-pause:hover .marquee__content {
   animation-play-state: paused;
 }
 
 /* Attempt to size parent based on content. Keep in mind that the parent width is equal to both content containers that stretch to fill the parent. */
 .marquee--fit-content {
   max-width: fit-content;
 }
 
 /* A fit-content sizing fix: Absolute position the duplicate container. This will set the size of the parent wrapper to a single child container. Shout out to Olavi's article that had this solution 👏 @link: https://olavihaapala.fi/2021/02/23/modern-marquee.html  */
 .marquee--pos-absolute .marquee__content:last-child {
   position: absolute;
   top: 0;
   left: 0;
 }
 
 /* Enable position absolute animation on the duplicate content (last-child) */
 .enable-animation .marquee--pos-absolute .marquee__content:last-child {
   animation-name: scroll-abs;
 }
 
 @keyframes scroll-abs {
   from {
     transform: translateX(calc(100% + var(--gap)));
   }
   to {
     transform: translateX(0);
   }
 }
 
 /* Other page demo styles */
 .marquee__content > * {
   flex: 0 0 auto;
   color: white;
   justify-content:  center;
   align-items: center;
   width: 250px;
   border-radius: 0.25rem;
   text-align: center;
 }
 
 .marquee { 

   margin:auto;



 }
 
 * {
   box-sizing: border-box;
 }