.custom-hero-banner {
  height: 676px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  text-align: center;
  padding-top:80px;
}
.main-section.hero-banner-sec {
  border-bottom:1px solid #D3DEE8;
}
/* Tablet background */
@media (max-width: 1024px) {
  .custom-hero-banner {
    {% if module.bg_image_tablet.src %}
      background-image: url('') !important;
    {% endif %}
  
}
}
/* Mobile background */
@media (max-width: 767.98px) {
  .custom-hero-banner {
    {% if module.bg_image_mobile.src %}
      background-image: url('') !important;
    {% endif %}
    height:400px;
  }
}

/* Video styling */
.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Hero content */
.hero-content {
  text-align: center;
}

.wrap-text {
  margin-bottom: 50px;
}

.hero-content .gradient-text {
  background-clip: text !important;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  padding-right: 0.05em;
}

.hero-content .normal-text {
  font-family: Graphik Web Thin, sans-serif !important;
  font-weight: 100;
  color: #556575;
}

/* Hero subtext */
.hero-subtext {
  color: #415569;
  font-family: Graphik Web Light, sans-serif !important;
  font-size: 3rem;
  font-weight: 300;
  letter-spacing: -2px;
  line-height: 3.6rem;
  margin-bottom: 25px;
  margin-top: 25px;
}

/* Hero button */
.hero-btn {
  padding: 12px 30px;
  font-size: 1rem;
}

/* PostHog experiment: hide the buttons until the runner in js/tracking.js picks
   a version. visibility keeps the space, so there is no layout shift. The
   animation reveals the wrapper after 3s if the runner never runs. */
.hero-cta-ab {
  visibility: hidden;
  animation: hero-cta-ab-reveal 0s linear 3s forwards;
}

.hero-cta-ab.is-decided {
  visibility: visible;
  animation: none;
}

@keyframes hero-cta-ab-reveal {
  to {
    visibility: visible;
  }
}

/* main.css hides every #free-demo-popup trigger for India visitors
   (body.india-region ... display: none !important). The hero popup buttons stay
   visible on purpose: India is part of the CTA test. :not(.d-none) keeps the
   button that the runner hides for the other variant hidden. */
body.india-region .hero-content a.hero-btn[href='#free-demo-popup']:not(.d-none) {
  display: inline-block !important;
}

/* Responsive text for tablet */
@media (max-width: 1024px) {
  .hero-subtext {
    font-size: 2.5rem;
    line-height: 3.125rem;
  }
  .hero-content .normal-text {
    font-size: 3.75rem;
    line-height: 4.5rem;
    letter-spacing: -1.329px;
  }
}
@media (max-width:991px){
  .custom-hero-banner{
    height:510px;
  }
}
/* Responsive text for mobile */
@media (max-width: 767px) {
  .hero-subtext {
    font-size: 2.25rem;
    line-height: 2.875rem;
  }
  .hero-content .normal-text {
    font-size: 2.75rem;
    letter-spacing: -0.8px;
    line-height: 2.75rem;
  }
  .hero-banner-sec h1 .normal-text{
      display: block;
    margin: 3px 0px;
  }
 .hs-content-id-196771878942 .hero-banner-sec .btn {
    font-size: 16px !important;
  }
      .custom-hero-banner {

        background-position: bottom;
    }
      .custom-hero-banner {
        height: 425px;
        padding-top:40px;
    }

}