.homepage {
  display: flex;
  flex-direction: column;
  height: 1192px;
  align-items: flex-start;
  position: relative;
  background: linear-gradient(
    180deg,
    rgba(254, 254, 254, 1) 0%,
    rgba(255, 252, 247, 1) 100%
  );
}

.homepage .frame {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 215px;
  padding: 0px 0px 323px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.homepage .layer {
  position: absolute;
  width: 878px;
  height: 1192px;
  top: 0;
  left: 850px;
}

.homepage .overlap-group-wrapper {
  position: absolute;
  width: 1728px;
  height: 1381px;
  top: -196px;
  left: 0;
}

.homepage .overlap-group {
  position: relative;
  height: 1185px;
  top: 196px;
  background-image: url(https://c.animaapp.com/lDbItGGT/img/adobestock-259938773-1.png);
  background-size: cover;
  background-position: 50% 50%;
}

.homepage .shot {
  position: absolute;
  width: 1424px;
  height: 1185px;
  top: 0;
  left: 304px;
  aspect-ratio: 1.33;
  object-fit: cover;
}

.homepage .text-wrapper {
  position: absolute;
  top: 494px;
  left: 99px;
  font-family: "Poppins", Helvetica;
  font-weight: 500;
  color: #000000;
  font-size: 64px;
  letter-spacing: 0;
  line-height: normal;
}

.homepage .div {
  position: absolute;
  top: 567px;
  left: 99px;
  font-family: "Poppins", Helvetica;
  font-weight: 100;
  color: #000000;
  font-size: 64px;
  letter-spacing: 0;
  line-height: normal;
}

.homepage .YB-logo {
  position: absolute;
  width: 482px;
  height: 106px;
  top: 681px;
  left: 99px;
  aspect-ratio: 4.53;
  object-fit: cover;
}

.homepage .frame-2 {
  position: relative;
  width: 1020px;
  height: 228px;
}
/* Original CSS code should be injected here */

/* Responsive enhancements and accessibility improvements */
@media (max-width: 768px) {
  .homepage .text-wrapper {
    font-size: 2.5rem;
    left: 5%;
    right: 5%;
    width: auto;
  }

  .homepage .div {
    font-size: 2.5rem;
    left: 5%;
    right: 5%;
    width: auto;
  }

  .homepage .YB-logo {
    width: 80%;
    max-width: 300px;
    left: 5%;
    height: auto;
  }

  .homepage .shot {
    width: 100%;
    left: 0;
    height: auto;
  }

  .homepage .layer {
    width: 100%;
    left: 0;
  }

  .homepage .overlap-group-wrapper {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .homepage .text-wrapper {
    font-size: 2rem;
    top: 40%;
  }

  .homepage .div {
    font-size: 2rem;
    top: 50%;
  }

  .homepage .YB-logo {
    top: 60%;
  }
}

/* Focus styles for accessibility */
.homepage .YB-logo:focus {
  outline: 2px solid #4a90e2;
  outline-offset: 2px;
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
