* {
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
  box-sizing: border-box;
}

 
@font-face {
  font-family: BananaGroteskBold;
  src: url(/Font/BananaGrotesk/BananaGrotesk-Bold.7b6ffd09.ttf);
}
@font-face {
  font-family: BananaGroteskRegular;
  src: url(/Font/BananaGrotesk/BananaGrotesk-Regular.e98d3c4e.ttf);
}
@font-face {
  font-family:BananaGroteskThin;
  src: url(/Font/BananaGrotesk/BananaGrotesk-Thin.8e89dd6e.ttf);
}

.colour30 {
  background: rgba( 0, 0, 0, 0.15 );
  /* box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 ); */
  backdrop-filter: blur( 15px );
  -webkit-backdrop-filter: blur( 15px );
  border: 1px solid rgba(196, 189, 189, 0.18);
}
.primary-font{
  font-family: BananaGroteskBold;
}
.secondary-font{
  font-family: BananaGroteskRegular;
}
.tertiary-font{
  font-family: BananaGroteskThin;
}
.primary-color{
  color: #F5F5F5;
  /* color: #a0a0a0; */
}
.primary-bg{
  background: #000000;
}
.secondary-color{
  color: #000000;
}
.secondary-bg{
  background-color: #F5F5F5;
}
.box-bg{
  background: rgba( 0, 0, 0, 0.15 );
  box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
  backdrop-filter: blur( 14px );
  -webkit-backdrop-filter: blur( 15px );
  border: 1.9px solid rgba( 255, 255, 255, 0.18 );
}
.text-shadow{
  text-shadow: 0px 2px 9px rgba(0, 0, 0, 0.5);
}
#loader {
  height: 100vh;
  width: 100%;
  background-color: rgb(0, 0, 0);
  z-index: 99;
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: rgb(255, 255, 255);
}

#loader h1 {
  font-size: 100px;
  font-weight: 300;
  font-family: Arial, Helvetica, sans-serif;
}

.text-stroke {
  -webkit-text-stroke: 2px #000000;
}

/* start */
/* hero section marquee animation */
.elem h1 {
  animation-name: marquee-anime;
  animation-duration: 8s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  margin-right: 20px;
}

@keyframes marquee-anime {
  from {
    transform: translateX(0%);
  }

  to {
    transform: translateX(calc(-100% - 20px));
  }
}

/* hero section marquee animation */
/* end */

.bg-blob-scene {
  background-image: url('Assets/hero-blob.svg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}