:root {
  --phone-border-width: 12px;
  --phone-border-color: #fcfcfc;
  --phone-screen-color: #333333;
  --phone-text-color: #5607d7;
  --phone-font-stack: "Josefin Sans", "Montserrat", "sans-serif";
}

.hero_phone {
  position: relative;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 10/21;
  max-height: 100%;
  background: var(--phone-screen-color);
  border: var(--phone-border-width) solid var(--phone-border-color);
  border-radius: 36px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero_phone:before {
  content: "";
  width: 58%;
  max-width: 175px;
  height: 30px;
  background: var(--phone-border-color);
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translatex(-50%);
  z-index: 1000;
}

.hero_phone:after {
  content: "";
  width: 140px;
  height: 6px;
  background: var(--phone-border-color);
  border-radius: 3px;
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translatex(-50%);
  z-index: 1000;
}

.hero_screen {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--phone-screen-color);
  overflow: hidden;
  /* background: url('data:image/svg+xml,%3Csvg width="300" height="300" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M8 16c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zm33.414-6l5.95-5.95L45.95.636 40 6.586 34.05.636 32.636 2.05 38.586 8l-5.95 5.95 1.414 1.414L40 9.414l5.95 5.95 1.414-1.414L41.414 8zM40 48c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zM9.414 40l5.95-5.95-1.414-1.414L8 38.586l-5.95-5.95L.636 34.05 6.586 40l-5.95 5.95 1.414 1.414L8 41.414l5.95 5.95 1.414-1.414L9.414 40z" fill="%239C92AC" fill-opacity="0.1" fill-rule="evenodd"/%3E%3C/svg%3E') fixed; */
}

/* =========================== */

.hero_video {
  width: 100%;
  height: 100%;
  background: var(--phone-screen-color);
  object-fit: cover;
  overflow: hidden;
}