* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}


.hero {

 margin: 3rem;
 top: 0;
 position: relative;
 width: 50%;
 color: var(--font-base-color);
 overflow: hidden;
 border-radius: 50%;
}

.hero__image {
 position: relative;
 top: 0;
 left: 50%;
 transform: translateX(-50%);
 width: 100%;
 border-radius: 50%;
 overflow: hidden;
 display: flex;
 justify-items: center;
 justify-content: center;
 align-content: center;
 align-items: center;
 border: 1px white solid;
}

.hero__image img {
 background-color: white;
 width: 100%;
 aspect-ratio: 1;
 object-fit: cover;
 filter: var(--hero-filter);
 border-radius: 50%;
 animation: bganimate1 1s forwards;

}

.hero__animation {
 position: absolute;
 width: 100%;
 height: 100%;
 /* left: 50%;
top:-50%;*/
 transform: translateX(-50%);
 transform: translateY(-50%);
}

/* Content styling with elegant typography */
.hero__content {
 min-width: 50%;
 margin: 1rem;
 text-align: center;
 z-index: 2;
 /* padding: 1rem; */
 /* border-radius: 20px; */
 /* position: relative; */
 /* overflow: hidden; */
 /* height: fit-content; */
}

.hero__title {
 width: 100%;
 /* font-size: calc(1.6 * var(--font-base-size)); */
 color: hsl(150, calc(var(--s) - 20%), calc(var(--l) - 20%));
 color: hsl(calc(var(--h)), calc(var(--s) - 20%), calc(var(--l) - 80%));
 -webkit-text-stroke: 0.25px hsl(270, 100%, 40%);
 position: relative;
 line-height: var(--line-height-base);
 /* font-optical-sizing: auto; */
 text-transform: uppercase;
 text-shadow: 0 0 0.75px hsla(270, 100%, 100%, 1);
 font-weight: 900;
}



.hero__subtitle {
 font-size: calc(1.2 * var(--font-base-size));
 /* font-weight: 300; */
 line-height: var(--line-height-base);
 max-width: 600px;
 margin: 0 auto;
 color: hsl(270, 40%, 80%);
}

.hero__menu {
 font-size: calc(0.8 * var(--font-base-size));
 /* font-weight: 300; */
 line-height: var(--line-height-base);
 ;
 max-width: 600px;
 margin: 0 auto;
 color: hsl(270, 80%, 80%);
 text-shadow: 0 2px hsla(270, 80%, 20%, 0.75);

}

.hero__menu a {
 color: hsl(270, 20%, 80%);
}

/* Floating decorative elements */



.floating-circle {
 position: absolute;
 border-radius: 50%;
 background-color: hsla(270, 80%, 80%, 0.5);
 filter: blur(10px) lighten(120%);
 aspect-ratio: 1;
 z-index: 10;
 transform-origin: center;

}

.circle-1 {
 width: 10%;
 top: 200%;
 left: 7%;
 animation: float-circle1 22s infinite;
 animation-delay: 1s;
}

.circle-2 {
 width: 10%;
 top: 200%;
 left: 48%;
 animation: float-circle2 36s infinite;
 animation-delay: 3s;
}

.circle-3 {
 width: 10%;
 top: 200%;
 left: 80%;
 animation: float-circle3 28s infinite;
 animation-delay: 5s;
}

@keyframes float-circle1 {
 0% {
  top: 75%;
  transform: scale(1);
  opacity: 0.25;
 }

 100% {
  top: 75%;
  transform: scale(4);
  opacity: 0;
 }
}

@keyframes float-circle2 {
 0% {
  transform: scale(1);
  top: 75%;
  opacity: 0.25;
 }

 100% {
  transform: scale(6);
  top: 0%;
  opacity: 0;
 }
}

@keyframes float-circle3 {
 0% {
  transform: scale(1);
  top: 50%;
  opacity: 0.25;
 }

 100% {
  transform: scale(4);
  top: 50%;
  opacity: 0;
 }
}

.floating-element {
 position: absolute;
 border-radius: 50%;
 opacity: 0.5;
 filter: blur(1px);
 z-index: 1;
 background: radial-gradient(circle, transparent 0%, hsla(270, 30%, 90%, 0.25) 100%);
}

/* top right */
.element-1 {
 width: min(20vw, 20vh);
 aspect-ratio: 1;
 top: 35%;
 left: 10%;
 animation: floatanim 12s ease-in-out infinite;
 transform-origin: top left;
}

/* down right */
.element-2 {
 width: min(14vw, 14vh);
 aspect-ratio: 1;
 top: 75%;
 right: 10%;
 animation-delay: 1s;
 transform-origin: top right;
 animation: floatanim 8s ease-in-out infinite;
}

/* middle */
.element-3 {
 width: min(16vw, 16vh);
 aspect-ratio: 1;
 top: 15%;
 left: 55%;
 animation-delay: 2s;
 transform-origin: top left;
 animation: floatanim 10s ease-in-out infinite;
}


/* Animations */
@keyframes floatanim {
 0% {
  transform: translateY(0) rotate(0deg);
  transform: scale(1);
 }

 50% {
  transform: translateY(-20px) rotate(10deg);
  transform: scale(1.1);
 }

 100% {
  transform: translateY(0) rotate(0deg);
  transform: scale(1);
 }
}

@keyframes bganimate1 {
 0% {
  opacity: 0%;
 }
 100% {
  opacity: 100%;
 }
}


/* 576px and up */
@media (min-width: 576px) {
 .hero__title {
  font-size: calc(1.6 * var(--font-base-size));
  line-height: calc(1.5 *var(--line-height-base));
 }

 .hero__subtitle {
  font-size: calc(1.4 * var(--font-base-size));
  line-height: var(--line-height-base);
 }

 .hero__menu {
  font-size: calc(1.2 * var(--font-base-size));
  line-height: var(--line-height-base);
 }

}

/* Medium tablets (768px and up) */
@media (min-width: 768px) {
 .hero__title {
  font-size: calc(1.8 * var(--font-base-size));
  line-height: var(--line-height-base);
 }

 .hero__subtitle {
  font-size: calc(1.6 * var(--font-base-size));
  line-height: var(--line-height-base);
 }

 .hero__menu {
  font-size: calc(1.4 * var(--font-base-size));
  line-height: var(--line-height-base);
 }
}

/* Desktops (992px and up) */
@media (min-width: 992px) {}


@media (min-width:1024px) {

 .hero__content {
  margin-top: -1rem;
 }

 .hero__image::after {
  top: 95vh;
 }

 .hero__title {
  font-size: calc(1.6* var(--font-base-size));
  line-height: var(--line-height-base);
 }

 .hero__subtitle {
  font-size: calc(1.2 * var(--font-base-size));
 }

 .hero__menu {
  font-size: calc(1.2 * var(--font-base-size));
  line-height: var(--line-height-base);
  ;
 }
}

/* Large desktops (1200px and up) */
@media (min-width: 1200px) {
 .hero__title {
  font-size: calc(1.6* var(--font-base-size));
  line-height: var(--line-height-base);
 }

 .hero__subtitle {
  font-size: calc(1.4 * var(--font-base-size));
  line-height: var(--line-height-base);
 }

 .hero__menu {
  font-size: calc(1.2 * var(--font-base-size));
  line-height: var(--line-height-base);
 }

}