body {
  touch-action: pan-y;
}

/* The deployed header CSS can paint the hamburger white (it lacks the
   background reset from the newer common.css). Force it transparent —
   the icon color is controlled via `color`/currentColor only. */
.mobile-hamburger,
.mobile-hamburger:active,
.mobile-hamburger:focus {
    background: none !important;
    background-color: transparent !important;
    -webkit-tap-highlight-color: transparent;
}


.canvas-3d-container {
    width: 100vw;
    height: 100lvh;
    z-index: 0; 
    position: fixed;
    top: 0px;
    left: 0px;
  }


  .elements-3d{
    position: fixed;
  }

  .canvas-3d {
    width: 100%;
    height: 100lvh;
    position: absolute;
    top: 0px;
    left: 0px;
  }

  .scroll-dummy-div {
    height: 2000lvh; /* Adjust based on desired scroll length */
    background: transparent;
    will-change: transform;
    transform: translateZ(0); 
    position: relative;
    z-index: -1;
  }
  

  .content{
    position: relative;
    z-index: 1;
    background-color: white;
  }

  #the_footer{
    background-color: white;
  }

  .ta-footer{
    background-color: white;
  }

 



.heading-3d{
  font-size: 30px;
  text-align: center;
  line-height: 1.3;
}


/* old loading animation disabled
.loader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  pointer-events: none;
}
.loader-wrapper .loader {
  display: block;
  position: relative;
  left: 50%;
  top: 50%;
  width: 100px;
  height: 100px;
  margin-top: -50px;
  margin-left: -50px;
  border: 3px solid transparent;
  border-top-color: #000000;
  border-radius: 50%;
  z-index: 1001;
  -webkit-animation: spin 1.5s infinite linear;
          animation: spin 1.5s infinite linear;
}
.loader-wrapper .loader:before, .loader-wrapper .loader:after {
  content: '';
  position: absolute;
  border-radius: 50%;
}
.loader-wrapper .loader:before {
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  border: 3px solid transparent;
  border-top-color:#000000;
  -webkit-animation: spin 2s infinite linear;
          animation: spin 2s infinite linear;
}
.loader-wrapper .loader:after {
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 15px;
  border: 3px solid transparent;
  border-top-color: #000000;
  -webkit-animation: spin 1s infinite linear;
          animation: spin 1s infinite linear;
}
@-webkit-keyframes spin {
  0% {
      -webkit-transform: rotate(0);
              transform: rotate(0);
  }
  100% {
      -webkit-transform: rotate(360deg);
              transform: rotate(360deg);
  }
}
@keyframes spin {
  0% {
      -webkit-transform: rotate(0);
              transform: rotate(0);
  }
  100% {
      -webkit-transform: rotate(360deg);
              transform: rotate(360deg);
  }
}
*/


.scroll-icon {
  display: none;
  --borderColor:#000;
  position: fixed;
  left: 50%;
  bottom: 130px;
  transform: translate(-50%,0);
  text-align: center;
  font-size: 14px;
	animation: down 1.3s infinite;
	-webkit-animation: down 1.3s infinite;
  letter-spacing: 0.2;
}


@-webkit-keyframes down {
	0% {
    transform: translate(-50%,0);
	}
	30% {
    transform: translate(-50%,15px);
	}
	60% {
    transform: translate(-50%,0);
	}
}


.skip-intro{
  position: fixed;
  right: 20px;
  bottom: 20px;
  cursor: pointer;
  z-index: 5;
  font-size: 14px;
  letter-spacing: 0.2;
  opacity: 0;
  display: none;
}

.color-white{
  color: white;
}

.color-black{
  color: #000;
}

.text-paragraph-3d{
  font-size: 18px;
text-align: left;
line-height: 1.5;
}

.big{
  font-size: 40px;
}

.centered{
  text-align: center;
}

.left-align{
  text-align: left;
}

.bold{
  font-weight: bold;
}

.line-height-extra{
  line-height:2;
}
 

  .small{
    font-size: 12px;
  }


  .image-3d{
    width: 200px;
  }

  .image-3d-big{
    width: 300px;
  }

  .image-3d-logo{
    width: 150px;
  }

  .image-3d-small{
    width: 120px;
  }

  .rocket-image{
    width: 50px;
  }

  .background{
    width:400vw 
  }

  #background2{
    width:5000px
  }


  @media (max-width:768px) {
    .image-3d{
      width: 100px;
    }

    .image-3d-big{
      width: 150px;
    }

    .image-3d-logo{
      width: 75px;
    }

    .rocket-image{
      width: 25px;
    }

    .image-3d-small{
      width: 60px;
    }

  

    .mobile-small{
      font-size: 5px;
    }

    .mobile-medium{
      font-size: 10px;
    }

    
  }