.hero-banner-sec { width: 100%; margin-bottom: 70px; display: inline-block; vertical-align: top; padding-top: 164px; background-repeat: no-repeat; background-position: bottom center; background-size: 100%; }
.hero-banner-sec .hero-banner-wrap { width: 100%; display: inline-block; position: relative; z-index: 1; }
.hero-banner-sec { position: relative; }

.hero-banner-sec .hero-banner-wrap .sec-title { max-width: 700px; margin: 0 auto; display: block; text-align: center; }
.hero-banner-sec .hero-banner-wrap .sec-title .subtitle span { font-family: Work Sans; font-weight: 700; line-height: 100%; text-transform: uppercase; color: #fff; }
.hero-banner-sec .hero-banner-wrap .sec-title .title h1 { font-family: Work Sans; font-weight: 700; line-height: 65px;  color: #fff; margin: 0; }
.hero-banner-sec .hero-banner-wrap .contain p { font-family: Work Sans; font-weight: 700;  line-height: 100%; color: #fff; }
.hero-banner-sec .hero-banner-wrap .date-cta-wrap { position: relative; z-index: 1; max-width: 837px; margin: 45px auto -65px auto; display: block; width: 100%; }
.hero-banner-sec .hero-banner-wrap .date-cta-wrap .date-cta {gap: 90px;justify-self: center; align-items: center; background: #DCF3F8; border-radius: 16px; padding: 30px 63px; display: flex; }
.hero-banner-sec .hero-banner-wrap .date-cta-wrap .date-cta .date-time { width: 68%; display: flex; align-items: center; }
.hero-banner-sec .hero-banner-wrap .date-cta-wrap .date-cta .date-time .timer { display: flex; align-items: center; width: 100%; gap: 20px; }
.hero-banner-sec .hero-banner-wrap .date-cta-wrap .date-cta .date-time .timer .time { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.hero-banner-sec .hero-banner-wrap .date-cta-wrap .date-cta .date-time .timer .dot { font-family: Work Sans; font-weight: 300; font-size: 80px; line-height: 80px; text-align: center; text-transform: uppercase; display: block; color: #3E63F8; }
.hero-banner-sec .hero-banner-wrap .date-cta-wrap .date-cta .date-time .timer .time .number { font-family: Work Sans; font-weight: 300; font-size: 80px; line-height: 80px; text-align: center; text-transform: uppercase; color: #3E63F8; }
.hero-banner-sec .hero-banner-wrap .date-cta-wrap .date-cta .date-time .timer .time span.text { color: #3E63F8; font-family: Work Sans; font-weight: 700; font-size: 20px; line-height: 100%; text-align: center; text-transform: uppercase; }
.hero-banner-sec .hero-banner-wrap .date-cta-wrap .date-cta .cta {flex-shrink: 0; width: 32%; display: block; }
.hero-banner-sec .hero-banner-wrap .date-cta-wrap .date-cta .cta a { background: #3E63F8; color: #fff; border-radius: 8px; font-family: Work Sans; font-weight: 700; font-size: 16px; line-height: 28px; padding: 11px 61px; }
.hero-banner-sec .hero-banner-wrap .date-cta-wrap .date-cta .cta a:hover { background: #395ad1; }
@media(max-width:1440px) {
  .hero-banner-sec { background-position: top; }
}
@media(max-width:1300px) {
  .hero-banner-sec .hero-banner-wrap .sec-title .title h1, .hero-banner-sec .hero-banner-wrap .date-cta-wrap .date-cta .date-time .timer .dot { font-size: 60px; line-height: 60px; }
  .hero-banner-sec .hero-banner-wrap .date-cta-wrap .date-cta .date-time .timer .time .number { font-size: 60px; line-height: 60px; }
  .hero-banner-sec .hero-banner-wrap .date-cta-wrap .date-cta { justify-self:normal;padding: 24px; }
  .hero-banner-sec .hero-banner-wrap .date-cta-wrap { margin: 25px auto -50px auto; }
  .hero-banner-sec { padding-top: 140px; }
}
@media(max-width:1199px) {
  .hero-banner-sec { padding-top: 100px; }
}
@media(max-width:991px) {
  .hero-banner-sec .hero-banner-wrap .sec-title .subtitle span { font-size: 20px; }
  .hero-banner-sec .hero-banner-wrap .contain p { font-size: 20px; }
  .hero-banner-sec .hero-banner-wrap .sec-title .title h1, .hero-banner-sec .hero-banner-wrap .date-cta-wrap .date-cta .date-time .timer .dot { font-size: 50px; line-height: 50px; }
  .hero-banner-sec .hero-banner-wrap .date-cta-wrap .date-cta .date-time .timer .time .number { font-size: 50px; line-height: 50px; }
}
@media(max-width:767px) {
  .hero-banner-sec { background-position: bottom; background-color: #3E63F8; background-image: none !important; }
  .hero-banner-sec .hero-banner-wrap .date-cta-wrap { margin-bottom: -40px; }
  .hero-banner-sec .hero-banner-wrap .date-cta-wrap .date-cta { padding: 20px; flex-direction: column; align-items: center; gap: 30px; }
  .hero-banner-sec .hero-banner-wrap .date-cta-wrap .date-cta .date-time { width: 100%; align-items: center; }
  .hero-banner-sec .hero-banner-wrap .date-cta-wrap .date-cta .date-time .timer { justify-content: center; }
  .hero-banner-sec .hero-banner-wrap .date-cta-wrap .date-cta .cta { width: 100%; text-align: center; }
  .hero-banner-sec .hero-banner-wrap .date-cta-wrap .date-cta .cta a {padding: 11px 50px;}
}
@media(max-width:480px) {
  .hero-banner-sec .hero-banner-wrap .sec-title .title h1, .hero-banner-sec .hero-banner-wrap .date-cta-wrap .date-cta .date-time .timer .dot, .hero-banner-sec .hero-banner-wrap .date-cta-wrap .date-cta .date-time .timer .time .number { font-size: 36px; line-height: 1.25; }
  .hero-banner-sec .hero-banner-wrap .date-cta-wrap .date-cta .date-time .timer { gap: 10px; }
  .hero-banner-sec .hero-banner-wrap .date-cta-wrap .date-cta .date-time .timer .time span.text { font-size: 18px; }
  .hero-banner-sec .hero-banner-wrap .sec-title .subtitle span { font-size: 18px; }
  .hero-banner-sec .hero-banner-wrap .contain p { font-size: 18px; }
  .hero-banner-sec .hero-banner-wrap .date-cta-wrap .date-cta { gap: 20px; }