@media (min-width: 772px) {
  .main-body {
    /* border:1px solid red; */
    width: 772px;
    margin-left: auto;
    margin-right: auto;
    height: 100dvh;
  }
}

.mobile-main {
  max-width: 772px;
  width: 100%;
  margin: 0 auto;
  position: relative;
}

.mobile-main-content-header {
  position: relative;
  width: 100%;
}

.mobile-main-content-header img {
  width: 100%;
  height: auto;
  display: block;
}

/* Floating Animation Keyframes */
@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
}

/* Pulse Animation Keyframes */
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

/* Base styles for all vector objects */
.vector-object-1,
.vector-object-2,
.vector-object-3,
.vector-object-4,
.vector-object-5 {
  position: absolute;
  animation: float 2.5s ease-in-out infinite;
}

/* Individual vector object positions and animation delays */
.vector-object-1 {
  top: 27%;
  left: 21%;
  width: 16%;
  animation-delay: 0s;
}

.vector-object-2 {
  top: 27%;
  left: 70%;
  width: 26%;
  animation-delay: 0.5s;
}

.vector-object-3 {
  top: 55%;
  left: 7%;
  width: 15%;
  animation-delay: 1s;
}

.vector-object-4 {
  top: 36%;
  left: 5%;
  width: 20%;
  animation-delay: 1.5s;
}

.vector-object-5 {
  top: 54%;
  left: 77%;
  width: 13%;
  animation-delay: 2s;
}

/* Make sure images inside vector objects are responsive */
.vector-object-1 img,
.vector-object-2 img,
.vector-object-3 img,
.vector-object-4 img,
.vector-object-5 img {
  width: 100%;
  height: auto;
  display: block;
}

.mobile-main-content-header-button {
  bottom: 6%;
}

.mobile-main-content-header-button-1,
.mobile-main-content-header-button-2 {
  animation: pulse 2s ease-in-out infinite;
}

.mobile-main-content-header-button-1 img,
.mobile-main-content-header-button-2 img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.3s ease;
}

.mobile-main-content-header-button-1:hover img,
.mobile-main-content-header-button-2:hover img {
  transform: scale(1.1);
}