body {
  color: #fff;
  font-family: 'Kanit', sans-serif;
  margin: 0;
  padding: 0;
}

.container {
  align-items: center;
  background: rgb(36,37,217);
  background: linear-gradient(160deg, rgba(36,37,217,1) 0%, rgba(50,51,255,1) 25%, rgba(177,0,255,1) 90%);
  box-sizing: border-box;
  display: flex;
  height: 100vh;
  justify-content: space-between;
  position: relative;
  width: 100vw;
}

.left {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-around;
  padding-left: 2em;
  position: relative;
  max-width: 33%;
}

.main {
  display: block;
  font-size: 1.5em;
  text-align: right;
  max-width: 66%;
  padding-right: 4em;
}

.circle-avatar {
  border: 10px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  filter: grayscale(100%);
  height: 300px;
  margin-bottom: 2em;
  object-fit: cover;
  width: 300px;
}

.hero {
  font-family: 'Megrim', sans-serif;
  font-size: 4em;
  margin-bottom: 0.25em;
}

p {
  color: #D8D8FF;
  line-height: 1.3;
  margin: 0 0 0.5em 0;
}

p.margin {
  margin: 0 0 0.75em 0;
}

.small {
  font-size: 0.75em;
}

.highlight {
  color: #fff;
}

a {
  color: #fff;
  text-decoration: none;
}

.dotted {
  background-image: linear-gradient(to right, #fff 50%, transparent 50%);
  background-position: 0 1.25em;
  background-repeat: repeat-x;
  background-size: 2px 1px;
}

.icon-wrapper {
  color: #a9a9ff;
  cursor: pointer;
  display: inline-block;
  font-size: 1.5em;
  padding: 0.10em;
  transition: all 200ms ease-out;
}

.icon-wrapper:hover {
  color: #fff;
}

/* fade in animation */

@keyframes fadein {
  100% { opacity: 1; }
}

.fade-init {
  opacity: 0;
}

.fade-item {
  animation: fadein 2s forwards;
}

.item-1 {
  animation-delay: .5s;
}

.item-2 {
  animation-delay: 1s;
}

.item-3 {
  animation-delay: 1.5s;
}

.item-4 {
  animation-delay: 2s;
}

.item-5 {
  animation-delay: 2s;
}

/* background orbs animation */

.background-container {
  position: relative;
  width: 100%;
  height: 600px; /* Adjust to fit your section height */
  overflow: hidden;
  background-color: #0f172a;
}

/* base circle style */
.circle-element {
  position: absolute;
  border-radius: 50%;

  /* These variables will be injected via HTML to create variation */
  width: var(--size, 100px);
  height: var(--size, 100px);
  top: var(--top, 20%);
  left: var(--left, 30%);
  background-color: var(--color, rgba(99, 102, 241, var(--opacity, 0.4)));

  /* Creates a soft, atmospheric glow rather than a harsh solid circle */
  filter: blur(10px);

  /* Triggers the smooth, infinite floating motion */
  animation: floatAround var(--duration, 25s) ease-in-out infinite alternate;
  animation-delay: var(--delay, 0s);
}

.circle-element.small {
  filter: blur(4px);
}

/* fluid motion: A fluid, non-linear path for organic movement */
@keyframes floatAround {
  0% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(30px, -50px) scale(1.1);
  }
  66% {
    transform: translate(-40px, 20px) scale(0.9);
  }
  100% {
    transform: translate(20px, -20px) scale(1.05);
  }
}

/* media queries */

@media (max-width: 1200px) {
  .main {
    font-size: 1.25em;
    max-width: 100%;
  }
}

@media (max-width: 750px) {
  .container {
    flex-direction: column;
    padding: 2em;
  }
  .left {
    max-width: 100%;
    padding: 0;
  }
  .main {
    font-size: 1em;
    max-width: 100%;
    padding: 0;
    text-align: left;
  }
  .circle-avatar {
    border: 8px solid rgba(255, 255, 255, 0.5);
    height: 150px;
    margin-bottom: 2em;
    object-fit: cover;
    width: 150px;
  }
  .hero {
    font-size: 2.5em;
  }
  p {
    margin: 0 0 0.5em 0;
  }
  p.margin {
    margin: 0 0 1em 0;
  }
}