/**
 * Home 1 — Home 2 blue UI tokens + dark top bar + IAAI wordmark.
 */

/* Vertical grid lines were hardcoded green */
.line-shape-animation span {
  background: rgba(79, 96, 250, 0.08) !important;
}

.banner-section-one .image-box .play-now .icon {
  box-shadow: 0px 4px 60px 0px rgba(79, 96, 250, 0.12) !important;
}

/* Hero H1 — tighter line spacing */
.banner-section-one .sec-title .h1 {
  line-height: 1.05 !important;
}

/* Top “Get Started” bar — same blues, darkened */
.header-style-one .header-top {
  background-color: #2F3AD4 !important; /* darkened #4F60FA / lavender-blue */
  background-image: none !important;
}

/* Light mint/lavender shape wash — kill it */
.header-style-one .header-top .shape-1 {
  display: none !important;
}

.header-style-one .header-top .text {
  color: #ffffff !important;
}

.header-style-one .header-btn2 {
  background-color: #1E28A8 !important; /* darker button blue */
  color: #ffffff !important;
}

.header-style-one .header-btn2:hover {
  background-color: #171F86 !important;
  color: #ffffff !important;
}

/* Logo mark stays; wordmark → IAAI */
.header-style-one .logo-box .logo,
.sticky-header .logo,
.footer-style-one .about-widget .logo,
.mobile-menu .nav-logo {
  width: auto !important;
}

.brand-logo {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  text-decoration: none !important;
}

.brand-logo__mark {
  width: 40px !important;
  height: 40px !important;
  max-width: none !important;
  object-fit: cover;
  object-position: left center;
}

.brand-logo__text {
  font-family: var(--sec-title-font-family), Syne, sans-serif;
  font-weight: 700;
  font-size: 1.45rem;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--theme-color2);
}

.brand-logo--light .brand-logo__text {
  color: #ffffff;
}

/* Hero payment illustration — same footprint as banner1-1.png */
.banner-section-one .image-box .hero-payment-slot {
  width: 100%;
  line-height: 0;
  border-radius: 0 !important;
  overflow: visible !important;
  background: transparent !important;
}

.banner-section-one .image-box .hero-payment-slot .hero-payment-illu {
  display: block;
  width: 100%;
  height: auto;
  max-width: 942px;
  background: transparent;
}

/* Illustration on the LEFT (original template had it on the right) */
.banner-section-one .banner-flip .image-box {
  right: auto;
  left: -100px;
}

@media (max-width: 1599.98px) {
  .banner-section-one .banner-flip .image-box {
    right: auto;
    left: -200px;
  }
}

@media (max-width: 1399.98px) {
  .banner-section-one .banner-flip .image-box {
    right: auto;
    left: -280px;
  }
}

@media (min-width: 1200px) {
  .banner-section-one .banner-flip .content-box {
    margin-left: auto;
    display: flex;
    justify-content: flex-end;
  }

  .banner-section-one .banner-flip .content-box .inner-box {
    text-align: left;
  }
}

@media (max-width: 1199.98px) {
  .banner-section-one .banner-flip .image-box {
    left: 0;
    right: 0;
    margin-top: 0;
    margin-bottom: 40px;
  }
}

@keyframes hp-dash-flow {
  to {
    stroke-dashoffset: -120;
  }
}

@keyframes hp-pulse-scale {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.35);
    opacity: 0.75;
  }
}

@keyframes hp-ring-breathe {
  0%,
  100% {
    opacity: 0.08;
    transform-origin: center;
    transform: scale(1);
  }
  50% {
    opacity: 0.16;
    transform: scale(1.06);
  }
}

.hero-payment-illu .hp-dash-1,
.hero-payment-illu .hp-dash-2,
.hero-payment-illu .hp-dash-3,
.hero-payment-illu .hp-dash-4 {
  animation-name: hp-dash-flow;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.hero-payment-illu .hp-dash-1 {
  animation-duration: 2.1s;
}

.hero-payment-illu .hp-dash-2 {
  animation-duration: 1.7s;
}

.hero-payment-illu .hp-dash-3 {
  animation-duration: 2.4s;
  animation-direction: reverse;
}

.hero-payment-illu .hp-dash-4 {
  animation-duration: 2.8s;
}

.hero-payment-illu .hp-live-dot {
  transform-box: fill-box;
  transform-origin: center;
  animation: hp-pulse-scale 1.6s ease-in-out infinite;
}

.hero-payment-illu .hp-ring-outer {
  transform-box: fill-box;
  transform-origin: center;
  animation: hp-ring-breathe 3.2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .hero-payment-illu .hp-dash-1,
  .hero-payment-illu .hp-dash-2,
  .hero-payment-illu .hp-dash-3,
  .hero-payment-illu .hp-dash-4,
  .hero-payment-illu .hp-live-dot,
  .hero-payment-illu .hp-ring-outer {
    animation: none !important;
  }
}