/* General Styles */
.image_one {
  width: 312px;
  height: 415px;
  object-fit: cover;
}

.image_two {
  width: 300px;
  height: 415px;
  object-fit: cover;
}

.border5 img {
  width: 93% !important;
  height: 350px;
  object-fit: cover;
  margin: 20px;
}

.home1-header-img1 img {
  width: 550px;
  height: auto;
  margin: 80px 0 0 50px !important;
}

@media (max-width: 750px) {
  .border5 img {
    width: 90% !important;
    height: 350px;
    object-fit: cover;
    margin: 20px;
  }

  .about2-img1 {
    position: relative !important;
  }

  .image_one {
    width: 100%;
  }

  .about2-img2 {
    position: relative !important;
    display: none;
  }

  .home1-header-img1 {
    text-align: center;
    position: relative !important;
    bottom: 0px !important;
  }

  .home1-header-img1 img {
    width: 100%;
    height: auto;
    margin: 10px auto 0 auto;
  }
}

@media (min-width: 1201px) and (max-width: 1400px) {
  .image_one {
    width: 250px;
    height: 415px;
    object-fit: cover;
  }

  .image_two {
    width: 250px;
    height: 415px;
    object-fit: cover;
  }
}

.team3-box-img {
  height: 350px;
}

/* Full-screen loader */
#page-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: linear-gradient(135deg, #360033, #0b8793);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  opacity: 1;
  transition: opacity 1s ease-out;
}

.loader-content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  max-width: 1600px;
}

.loader-text {
  width: 50%;
  text-align: center;
  padding: 20px;
}

/* @keyframes typing {
  from {
    width: 0;
  }

  to {
    width: 25ch;
  }
}

@keyframes blink {
  50% {
    border-color: transparent;
  }
} */

/* .loader-text h2 {
  font-size: 3vw;
  font-weight: bold;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  border-right: 4px solid #ffffff;
  display: inline-block;
  width: 0;
  animation: typing 1s steps(20, end) forwards, blink 0.7s infinite;
} */

.loader-text h2 {
  font-size: 3vw;
  font-weight: bold;
  color: #ffffff;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
  animation: pulseGlow 2s ease-in-out infinite;
}

@keyframes pulseGlow {
  0%,
  100% {
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
    opacity: 0.9;
  }
  50% {
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.8);
    opacity: 1;
  }
}
.loader-image {
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loader-image img {
  width: 80%;
  max-width: 400px;
  height: auto;
  animation: bounce 1.5s infinite alternate ease-in-out;
}

@keyframes bounce {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-20px);
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
    visibility: visible;
  }

  100% {
    opacity: 0;
    visibility: hidden;
  }
}

.hide-loader {
  animation: fadeOut 1s ease-out forwards;
}

/* @media (max-width: 1024px) {
.loader-content {
    flex-direction: column;
    text-align: center;
  } 

  .loader-text,
  .loader-image {
    width: 100%;
  }

  .loader-text h2 {
    font-size: 4vw;
  }

  .loader-image img {
    max-width: 300px;
  }
}

@media (max-width: 768px) {
  .loader-text h2 {
    font-size: 5vw;
    margin: 30px 0px;
  }

  .loader-image img {
    max-width: 250px;
  }
}

@media (max-width: 480px) {
  .loader-text h2 {
    font-size: 5vw;
    border-right: 2px solid #ffffff;
    max-width: 360px;
  }

  .loader-image img {
    max-width: 250px;
  }
} */

.mobile-header,
.mobile-sidebar {
  display: none;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.show-mobile-header {
  display: block;
  opacity: 1;
}

/* Animation Wrapper */
.animation-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.animation-container {
  position: relative;
  width: 100%;
  max-width: 600px;
  height: 500px;
  margin: 0 auto;
}

.coin-stacks {
  position: absolute;
  bottom: 0;
  width: 100%;
  left: 10%;
  display: flex;
  justify-content: center;
}

.coin-stack {
  width: 100%;
  max-width: 420px;
  height: auto;
}

.rocket {
  position: absolute;
  width: 250px;
  height: auto;
  z-index: 10;
  left: -10%;
  bottom: 23%;
  animation: rocket-flight 3s ease-in-out forwards;
  animation-delay: 1s;
}

.rocket-img {
  width: 100%;
  height: auto;
  animation: rocket-thrust 1s ease-in-out infinite;
}

@keyframes rocket-thrust {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes rocket-flight {
  0% {
    left: -10%;
    bottom: 23%;
  }
  100% {
    left: 70%;
    bottom: 70%;
  }
}

@keyframes pulse {
  0%,
  100% {
    opacity: 0.4;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.1);
  }
}

@media (min-width: 768px) {
  .title {
    font-size: 3rem;
  }
}

/* Tablet Styles */
/* @media (max-width: 1024px) {
  .loader-content {
    flex-direction: row;
    text-align: center;
    padding: 0 20px;
  }

  .loader-text,
  .animation-wrapper {
    width: 50%;
  }

  .loader-text h2 {
    font-size: 4vw;
  }

  .animation-container {
    height: 350px;
  }

  .rocket {
    width: 30%;
  }

  @keyframes rocket-flight {
    0% {
      left: -10%;
      bottom: 23%;
    }
    100% {
      left: 70%;
      bottom: 70%;
    }
  }
} */

/* Mobile Styles */
@media (max-width: 768px) {
  .loader-content {
    flex-direction: column;
    justify-content: center;
  }

  .loader-text,
  .animation-wrapper {
    width: 100%;
  }

  .loader-text h2 {
    font-size: 4vw;
    margin: 20px 0;
    max-width: 90%;
  }

  .animation-container {
    height: 300px;
    max-width: 90%;
  }

  .coin-stacks {
    left: 30%;
    width: 100%;
    max-width: 350px;
    height: auto;
    top: 40%;
  }
  .rocket {
    width: 45%;
    animation: rocket-flight-mobile 3s ease-in-out forwards;
    animation-delay: 1s;
  }
  .animation-wrapper {
    flex: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start !important;
  }
  @keyframes rocket-flight-mobile {
    0% {
      left: -10%;
      bottom: 23%;
    }
    100% {
      left: 70%;
      bottom: 70%;
    }
  }
}

/* Small Mobile Styles */
@media (max-width: 480px) {
  .loader-text h2 {
    font-size: 4vw;
    border-right: 2px solid #ffffff;
    max-width: 100%;
  }

  .animation-container {
    height: 250px;
  }

  .rocket {
    width: 45%;
  }
  .coin-stacks {
    left: 15%;
    /* width: 100%; */
    width: 250px;
    height: auto;
    top: 50%;
  }
  .animation-wrapper {
    flex: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start !important;
  }
}

/* star */
.starfield {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.star {
  position: absolute;
  background-color: white;
  border-radius: 50%;
}

.star.small {
  width: 1px;
  height: 1px;
}
.star.medium {
  width: 2px;
  height: 2px;
}
.star.large {
  width: 4px;
  height: 4px;
}

.star.twinkling {
  animation: twinkle 3s infinite ease-in-out;
}

@keyframes twinkle {
  0%,
  100% {
    opacity: 0.2;
  }
  50% {
    opacity: 1;
  }
}

.shooting-star {
  position: absolute;
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), white);
  transform: rotate(-45deg);
  animation: shoot 5s infinite;
  opacity: 0;
}

@keyframes shoot {
  0% {
    transform: translateX(0) translateY(0) rotate(-45deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    transform: translateX(300px) translateY(-300px) rotate(-45deg);
    opacity: 0;
  }
}