.hero {
  color: white;
  background-color: #182C43;
  /* background: linear-gradient(
    to bottom right,
    #ffffff,
    hsl(0, 0%, 95%),
    hsl(207, 65%, 48%, 0.05)
  ); */
  background-size: 160% 160%, 140% 140%;
  animation: heroDrift 18s ease-in-out infinite alternate;
  position: relative;
}
@keyframes heroDrift {
  0% {
    background-position: 0% 0%, 100% 20%;
  }
  100% {
    background-position: 20% 10%, 80% 40%;
  }
}
.hero-secondary{
  background: linear-gradient(
    to bottom right,
    #ffffff,
    hsl(0, 0%, 95%),
    hsl(207, 65%, 48%, 0.05)
  );
  /* background: radial-gradient(1200px 400px at 20% 10%, #ecf5ff 0%, transparent 70%), radial-gradient(900px 300px at 80% 30%, #dff0ff 0%, transparent 70%); */
  background-size: 160% 160%, 140% 140%;
  animation: heroDrift 18s ease-in-out infinite alternate;
}
@keyframes heroDrift{
  0%{background-position: 0% 0%, 100% 20%}
  100%{background-position: 20% 10%, 80% 40%}
}

.hero h1 {
  font-size: 72px;
  color: white;
  font-family: var(--font-secondary);
}

.hero-secondary h1 {
  font-size: 3.75rem;
  color: var(--primary-font-color);
}
@media screen and (max-width: 768px) {
  .hero h1 {
    font-size: 42px;
  }
}

.hero .pre-title{
  font-size: 14px;
  color: #ffffffe6;
  backdrop-filter: blur(4px); 
  background-color:#fff3;
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 500;
  text-align: center;
  margin: auto;
  margin-bottom: 12px;
}

.hero .text{
  max-width: 896px;
  padding: 0 20px;
}
.hero-icons__title{
  color: var(--primary-font-color);
}
.hero-icons svg {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  font-weight: 700;
}

.hero-icons__roi {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  font-weight: 700;
  border-radius: 50%;
  color: #f2f9ff;
  background: var(--accent);
}
.p-4_5 {
  padding: 2rem !important;
}
.py-4_5 {
  padding-top: 2rem !important;
  padding-bottom: 2rem !important;
}
.px-4_5 {
  padding-left: 2rem !important;
  padding-right: 2rem !important;
}

.py-6 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.py-lg-7 {
  padding-top: 5rem !important;
  padding-bottom: 5rem !important;
}

.g-4_5 {
  --bs-gutter-x: 2rem;
  --bs-gutter-y: 2rem;
}

.accent {
  color: var(--accent);
}
.accent.weak {
  color: var(--accent-weak);
}