.hero-bg {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

/* Background image */
.hero-bg .bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Video overlay */
.hero-bg .video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.4;
  pointer-events: none;
  z-index: 1;
}

.rounded-logo {
  position: absolute;
  top: clamp(80%, 40%, 80%); /* min 40%, preferred 45%, max 55% */
  left: 50%;
  transform: translate(-50%, -50%); /* center relative to top/left */
  width: clamp(30%, 33%, 35%); /* scales with viewport width */
  height: clamp(auto, auto, auto); /* keeps aspect ratio */
  border-radius: 50%;
  object-fit: cover;
  z-index: 2;
}

@media (min-width: 750px) {
  .rounded-logo {
    position: absolute;
    left: 70%;
    top: 35%;
    width: 30%;
  }
}