body{
  margin: 0;
}

.loader-container {
  display: flex;
  width: 100%;
  height: 100%;
  overflow: hidden;
  min-height: 100vh;
  background: #0a1422;
}

.loader {
  position: relative;
  margin: auto;
  width: 60px;
  height: 60px;
  perspective: 200px; 
}

.middle {
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 4px solid #fff;
  border-radius: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  animation: middleAnimation 1.2s linear infinite;
  box-shadow: 0 2px 8px #000a; 
}

.bottom {
  top: 50%;
  left: 50%;
  position: absolute;
  height: 40px;
  width: 40px;
  background: transparent;
  border-radius: 50%;
  border: 4px solid transparent;
  border-top: 4px solid #ffb300; 
  border-right: 4px solid #ffb300;
  transform-origin: 50% 50%;
  animation: bottomAnimation 1.2s cubic-bezier(.5,.2,.5,1) infinite;
  box-shadow: 0 2px 8px #000a; 
}

.bottom:nth-child(1) {
  animation-delay: 0s;
  border-top: 4px solid #ffb300; 
  border-right: 4px solid #ffb300; 
}

.bottom:nth-child(2) {
  animation-delay: -0.4s;
  border-top: 4px solid #fff;
  border-right: 4px solid #fff; 
}

.bottom:nth-child(3) {
  animation-delay: -0.8s;
  border-top: 4px solid #0a1422; 
  border-right: 4px solid #0a1422; 
}

.bottom-section,
.top-section {
  position: static;
  transform: none;
}

@keyframes bottomAnimation {
  0% {
    transform: translate(-50%, -50%) rotateZ(0deg) rotateX(0deg);
  }
  50% {
    transform: translate(-50%, -50%) rotateZ(180deg) rotateX(30deg);
  }
  100% {
    transform: translate(-50%, -50%) rotateZ(360deg) rotateX(0deg);
  }
}

@keyframes middleAnimation {
  0% {
    transform: translate(-50%, -50%) scale(1) rotateY(0deg);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.1) rotateY(180deg);
  }
  100% {
    transform: translate(-50%, -50%) scale(1) rotateY(360deg);
  }
}