html {
  scroll-behavior:smooth
}
.hero-section .container {
  position:relative;
  z-index:1
}
.feature-card,.vip-card,.promo-card,.security-card {
  height:100%
}
.hero-img-wrap {
  max-width:100%
}
@media(max-width:991px) {
  .hero-section {
    padding:36px 0
  }
  .hero-section>.container>.row {
    gap:24px
  }
  .hero-section>.container>.row>.col-lg-6 {
    width:100%;
    flex:0 0 100%;
    position:static!important
  }
  .hero-section h1 {
    font-size:clamp(1.7rem,6vw,2.8rem)
  }
}
@media(prefers-reduced-motion:reduce) {
  * {
    scroll-behavior:auto!important;
    transition:none!important
  }
}
.hero-section {
  background:var(--bg-dark);
  padding:42px 0
}
.hero-section>.container {
  padding:40px;
  border:1px solid #7544B866;
  border-radius:32px;
  background:linear-gradient(125deg,#F9F6FF,#F9F6FF)
}
.hero-section>.container>.row {
  align-items:center!important
}
.hero-badge {
  border-radius:6px;
  padding:8px 14px
}
.hero-section .stat-box {
  border:1px solid #7544B855
}
.feature-card,.promo-card,.vip-card {
  border-radius:8px;
  box-shadow:0 8px 0 #F9F6FF
}
@media(min-width:992px) {
  .hero-section>.container>.row>.col-lg-6:first-child {
    width:58%
  }
  .hero-section>.container>.row>.col-lg-6:last-child {
    width:42%
  }
  h1 {
    font-size:clamp(2rem,3.5vw,3.3rem)
  }
  .hero-section .img-fluid {
    border-radius:50% 50% 12px 12px;
    padding:12px;
    border:1px solid #7544B855
  }
  .bg-section>.container>.row.g-3>.col-lg-3 {
    width:50%
  }
  .feature-card {
    display:grid;
    grid-template-columns:60px 1fr;
    text-align:left;
    column-gap:20px
  }
  .feature-icon {
    grid-row:1/3;
    margin:0
  }
}
@media(max-width:991px) {
  .hero-section>.container {
    padding:24px;
    width:calc(100% - 24px)
  }
}
@media(max-width:991px) {
  .container>.row.g-5 {
    --bs-gutter-x:1.5rem
  }
}
@media(min-width:992px) {
  .hero-section>.container>.row {
    align-items:center!important
  }
}
@media(max-width:991px) {
  .container>.row.g-5 {
    --bs-gutter-x:1.5rem
  }
  .hero-section .d-flex {
    max-width:100%
  }
}
