.hero-banner { width: 100%; display: inline-block; vertical-align: middle; padding: 288px 0 88px; background-repeat: no-repeat; background-size: cover; background-position: center; position: relative; top: 0; left: 0; z-index: 0; }
.hero-banner:after { content: ""; width: 100%; height: 100%; display: inline-block; vertical-align: middle; background: rgba(0, 0, 0, 0.45); position: absolute; top: 0; left: 0; z-index: -1; }
.hero-banner .banner-wrap { width: 100%; display: flex; padding-right: 61px; align-items: baseline; }

.hero-banner .banner-wrap .left { width: 73.73%; padding-right: 96px; }
.hero-banner .banner-wrap .left .left-wrap { width: 100%; display: flex; flex-wrap: wrap; }
.hero-banner .banner-wrap .left .left-wrap h1 { width: 100%; display: inline-block; vertical-align: middle; font-size: 48px; line-height: 60px; font-weight: 400; color: #FFFFFF; text-transform: none; margin-bottom: 17px; }
.hero-banner .banner-wrap .left .left-wrap h1 span { font-weight: 600; }
.hero-banner .banner-wrap .left .left-wrap .cta-wrap { width: 100%; display: flex; align-items: center; }
.hero-banner .banner-wrap .left .left-wrap .cta-wrap .btn { padding-right: 32px; }
.hero-banner .banner-wrap .left .left-wrap .cta-wrap .play-btn { display: flex; align-items: center; }
.hero-banner .banner-wrap .left .left-wrap .cta-wrap .play-btn a { display: flex; align-items: center; font-weight: 600; font-size: 18px; line-height: 25px; color: #FFFFFF; }
.hero-banner .banner-wrap .left .left-wrap .cta-wrap .play-btn a img { width: 82px; height: 82px; object-fit: contain; object-position: center; display: inline-block; vertical-align: middle; margin-right: 15px; transition: .4s all ease-in-out; }
.hero-banner .banner-wrap .left .left-wrap .cta-wrap .play-btn a:hover { color: #CF4520; }
.hero-banner .banner-wrap .left .left-wrap .cta-wrap .play-btn a:hover img { box-shadow: 0px 0px 25px rgb(207 69 32); border-radius: 100%; }
.hero-banner .banner-wrap .right .right-wrap .post-box .box .content .bottom .cta-link { width: 100%; display: flex; align-items: center; }
.hero-banner .banner-wrap .right .right-wrap .post-box .box .content .bottom .cta-link a { width: 100%; display: flex; align-items: center; flex-direction: row-reverse; font-weight: 500; font-size: 10px; line-height: 12px; color: #CF4520; }
.hero-banner .banner-wrap .right .right-wrap .post-box .box .content .bottom .cta-link a img { width: 16px; height: 8px; margin-left: 5px; }
.hero-banner .banner-wrap .right .right-wrap .post-box .box .content .bottom .cta-link a:hover img { transform: translate(3px,0px); }

.hero-banner .banner-wrap .right { width: 26.27%; }
.hero-banner .banner-wrap .right .right-wrap { width: 100%; display: inline-block; vertical-align: middle; }
.hero-banner .banner-wrap .right .right-wrap h3 { color: #FFFFFF; margin-bottom: 21px; }

.hero-banner .banner-wrap .right .right-wrap .post-box { width: 100%; display: flex; flex-wrap: wrap; }
.hero-banner .banner-wrap .right .right-wrap .post-box .box { width: 100%; display: flex; padding: 12px 15px; margin-bottom: 10px; background: #fff; border-radius: 8px; margin-bottom: 15px; }
.hero-banner .banner-wrap .right .right-wrap .post-box .box .image { width: 34%; }
.hero-banner .banner-wrap .right .right-wrap .post-box .box .image img { width: 100%; height: 138px !important; object-fit: cover; object-position: center; display: inline-block; vertical-align: middle; border-radius: 8px; }


.hero-banner .banner-wrap .right .right-wrap .post-box .box .content { width: 66%; display: flex; flex-wrap: wrap; padding-left: 10px; }
.hero-banner .banner-wrap .right .right-wrap .post-box .box .content .top { width: 100%; display: flex; justify-content: space-between; height: 40px; }
.hero-banner .banner-wrap .right .right-wrap .post-box .box .content .top .title { display: block; }
.hero-banner .banner-wrap .right .right-wrap .post-box .box .content .top .title h6 { font-weight: 600; font-size: 14px; line-height: 17px; color: #1E293B; margin-bottom: 2px; }
.hero-banner .banner-wrap .right .right-wrap .post-box .box .content .top .title p { font-weight: 300; font-size: 10px; line-height: 18px; color: #6F2282; margin-bottom: 3px; }
.hero-banner .banner-wrap .right .right-wrap .post-box .box .content .top .icon-image { width: 34px; height: 32px; display: none; }
.hero-banner .banner-wrap .right .right-wrap .post-box .box .content .top .icon-image img { width: 32px; height: 32px; }

.hero-banner .banner-wrap .right .right-wrap .post-box .box .content .bottom { width: 100%; display: inline-block; vertical-align: middle; }
.hero-banner .banner-wrap .right .right-wrap .post-box .box .content .bottom .caption { width: 100%; display: inline-block; vertical-align: middle; }
.hero-banner .banner-wrap .right .right-wrap .post-box .box .content .bottom .caption p { width: 100%; display: inline-block; vertical-align: middle; font-size: 12px; line-height: 18px; color: #475569; margin-bottom: 11px; }

.hero-banner .banner-wrap .right .right-wrap .cta { width: 100%; display: inline-block; vertical-align: middle; }
.hero-banner .banner-wrap .right .right-wrap .cta .link { width: 100%; display: inline-block; vertical-align: middle; margin-bottom: 10px; text-align: right; }
.hero-banner .banner-wrap .right .right-wrap .cta .link a { font-size: 12px; line-height: 15px; font-weight: 700; text-align: right; text-decoration-line: underline; color: #FFFFFF; }
.hero-banner .banner-wrap .right .right-wrap .cta .link a:hover { color: #cf4520; }
.hero-banner .banner-wrap .right .right-wrap .cta .btn { width: 100%; display: inline-block; vertical-align: middle; }
.hero-banner .banner-wrap .right .right-wrap .cta .btn a { width: 100%; display: flex; align-items: center; justify-content: center; font-size: 16px; line-height: 20px; font-weight: 500; color: #FFFFFF; padding: 8px 55px; border: 1px solid #FFFFFF; filter: drop-shadow(5px 5px 20px rgba(0, 0, 0, 0.1)); border-radius: 8px; }
.hero-banner .banner-wrap .right .right-wrap .cta .btn a:after { content: ""; width: 22px; height: 30px; display: inline-block; background-image: url(https://fs.hubspotusercontent00.net/hubfs/6212555/Team%20Nila%20-%202021/Images/btn-paws-icon-white.png); background-repeat: no-repeat; background-size: cover; background-position: center; margin-left: 8px; transition: 0.4s all ease-in-out; }
.hero-banner .banner-wrap .right .right-wrap .cta .btn a:hover { color: #fff; background-color: #cf4520; border: 1px solid #cf4520; }

@media(max-width: 1343px){
  .hero-banner .banner-wrap { padding-right: 0; }
  .hero-banner .banner-wrap .left { width: 68%; padding-right: 40px; }
  .hero-banner .banner-wrap .right { width: 32%; }
  .hero-banner .banner-wrap .left .left-wrap h1 { font-size: 36px; line-height: 48px; }
  .hero-banner .banner-wrap .left .left-wrap h1 span { font-size: 36px; line-height: 48px; }
  .hero-banner .banner-wrap .left .left-wrap .cta-wrap .btn a.primary-btn-medium { font-size: 16px; line-height: 20px; padding: 14px 20.5px; }
  .hero-banner .banner-wrap .left .left-wrap .cta-wrap .play-btn a img { width: 70px; height: 70px; }
  .hero-banner .banner-wrap .left .left-wrap .cta-wrap .play-btn a { font-size: 16px; }
  .hero-banner .banner-wrap .right .right-wrap .post-box .box .content .top { height: unset; }
  .hero-banner .banner-wrap .right .right-wrap .post-box .box { align-items: center; }
}

@media(max-width: 1199px){
  .hero-banner { padding: 200px 0 88px; }
}

@media(max-width: 991px){
  .hero-banner .banner-wrap { flex-wrap: wrap; }
  .hero-banner .banner-wrap .left { width: 100%; padding-right: 0; margin-bottom: 50px; }
  .hero-banner .banner-wrap .left .left-wrap h1 { font-size: 48px; line-height: 60px; }
  .hero-banner .banner-wrap .left .left-wrap h1 span { font-size: 48px; line-height: 60px; }
  .hero-banner .banner-wrap .right { width: 100%; } 
  .hero-banner .banner-wrap .right .right-wrap .post-box .box { width: 100%; align-items: center; } 
  .hero-banner .banner-wrap .right .right-wrap .post-box .box .image { width: 18%; }
  .hero-banner .banner-wrap .right .right-wrap .post-box .box .content { width: 82%; }
  .hero-banner .banner-wrap .right .right-wrap .cta .btn { width: max-content; float: right; }
}

@media(max-width: 767px){
  .hero-banner { padding: 150px 0 88px; }
  .hero-banner .banner-wrap .left .left-wrap h1 { font-size: 36px; line-height: 48px; }
  .hero-banner .banner-wrap .left .left-wrap h1 span { font-size: 36px; line-height: 48px; }
  .hero-banner .banner-wrap .left .left-wrap .cta-wrap .play-btn a img { width: 50px; height: 50px; }
  .hero-banner .banner-wrap .right .right-wrap .cta{ text-align: center; }
  .hero-banner .banner-wrap .right .right-wrap .cta .btn { width: max-content; float: none; margin: 0 auto; text-align: center; }
  .hero-banner .banner-wrap .right .right-wrap .cta .link{ text-align: center;  }
}

@media(max-width: 576px){ 
  .hero-banner .banner-wrap .left .left-wrap h1 { font-size: 32px; line-height: 42px; }
  .hero-banner .banner-wrap .left .left-wrap h1 span { font-size: 32px; line-height: 42px; }  
  .hero-banner .banner-wrap .left .left-wrap h1 br { display: none; }
  .hero-banner .banner-wrap .left .left-wrap .cta-wrap { flex-wrap: wrap; }
  .hero-banner .banner-wrap .left .left-wrap .cta-wrap .btn { margin: 10px 0; }
  .hero-banner .banner-wrap .right .right-wrap .post-box .box { flex-wrap: wrap; }
  .hero-banner .banner-wrap .right .right-wrap .post-box .box .image { width: 100%; }
  .hero-banner .banner-wrap .right .right-wrap .post-box .box .content { width: 100%; padding-left: 0; padding-top: 15px; }
}