@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
html {scroll-behavior: smooth;}
.parallax a {text-decoration: none;}
.parallax img {max-width: 100%;}
.main.parallax_version2 .img-col img{
  width: 100%;
}
.parallax .get-start, .parallax .discover-cta {display: inline-block;padding: 14px 35px;text-decoration: none;font-size: 16px;font-weight: 500;font-family: 'Roboto';line-height: 26px;}
.parallax .get-start {background: #FF725E;color: #EAEEFF;}
.parallax .discover-cta {color: #232323;background: #ffffff;margin-left: 16px;}


/* Version 1 style */
.parallax.version1 {padding: 120px 0;  background: #fff; }
.parallax.version1 .content-wrapper {background-image: url('https://19898180.fs1.hubspotusercontent-na1.net/hubfs/19898180/Hubspot%20Marketplace/Knowledge%20base/parallax-bg.png');padding: 178px 0;display: flex;align-items: center;justify-content: center;background-size: cover;overflow: hidden;position: relative;background-attachment: fixed;background-position: center;background-repeat: no-repeat;}
.parallax.version1 .content-wrapper .text-box {text-align: center;max-width: 792px;position: relative;z-index: 1;}
.parallax.version1 .content-wrapper:before {content: "";position: absolute;background: #000000;top: 0;right: 0;bottom: 0;left: 0;opacity: 0.5;}
.parallax.version1 .text-box h2 {color: #ffffff;font-size: 32px;font-weight: 600;font-family: 'Poppins';margin-bottom: 20px;}
.parallax.version1 .text-box p {font-size: 16px;font-weight: 400;font-family: 'Roboto';color: #EAEEFF;margin: auto;margin-bottom: 22px;}


/* Version 2 style */
.main.parallax_version2 {padding: 80px 0;background-image: url('https://19898180.fs1.hubspotusercontent-na1.net/hubfs/19898180/Hubspot%20Marketplace/Knowledge%20base/horizontal-bg.png');background-size: contain;position: relative;}
.parallax.version2 {overflow-x: hidden;max-width: 100%;}
.main.parallax_version2 .heading h2 {font-size: 42px;font-weight: 600;font-family: 'Poppins';color: #ffffff;margin-bottom: 18px;}
.main.parallax_version2 .heading h2 span {color: transparent;-webkit-text-stroke: 1px white;text-transform: uppercase;font-family: 'Poppins';font-size: 42px;font-weight: 600;}
.parallax.version2 .column-row {display: flex;justify-content: space-between;align-items: center;scroll-behavior: smooth;}
.parallax.version2 .slide {flex: 0 0 auto;}
.parallax.version2 .column-row > * {margin-right: 20px;}
.parallax.version2 .columns .column-row .col {margin-top: 30px;}
.parallax.version2 .columns .img-col {height: 196px;width: 100%;object-fit: cover;border-radius: 19px;overflow: hidden;object-position: center;margin-bottom: 22px;}
.parallax.version2 .columns .text-col p {font-size: 16px;font-weight: 400;font-family: 'Roboto';color: #EAEEFF;line-height: 26px;}
.parallax.version2 .columns .text-col a {font-size: 16px;font-weight: 500;  margin: 12px 0 0;font-family: 'Roboto';color: #EAEEFF;text-decoration: none;display: inline-block;}
.parallax.version2 .columns .text-col a span svg {fill: #ffffff;height: 12px;vertical-align: middle;transition: 0.4s all;} 
.parallax.version2 .columns .text-col a:hover span svg {margin-left: 4px;}
.parallax.version2 .columns .arrows {display: none;}

/* Version 3 style */
.parallax.version3 {padding:100px 0; background: #fff;}
.parallax.version3 .main-content-box {background:#fff;border: 1px solid #D3D5E4;box-shadow: 0px 0px 16px 0px #00000017;padding:90px 20px;border-radius: 10px;position: relative;overflow: hidden;max-width: 1200px;}
.parallax.version3 .main-content-box .element {position: absolute;}
.parallax.version3 .main-content-box .element.first {top: 10x;height: 100%;bottom: 0;left: 35px;}
.parallax.version3 .main-content-box .element.second {right: 0px;top: 0px;}
.parallax.version3 .main-content-box .element.third {right: 0;bottom: 0;}
.parallax.version3 .main-content-box .heading {max-width: 850px;margin: 0 auto;text-align: center;}
.parallax.version3 .heading h2.reveal {position: relative;transform: translateY(40px);opacity: 0.6;transition: 1s all ease;font-size: 34px;font-weight: 600;font-family: 'Poppins';color: #252430;}
.parallax.version3 .heading h2.reveal.active {transform: translateY(0px);opacity: 1;}
.parallax.version3 .main-content-box .heading p {max-width: 580px;margin: 0 auto;margin-top: 22px;font-size: 17px;font-weight: 400;font-family: 'Roboto';}
.parallax.version3 .cta-box .start-cta {margin-top:30px;font-size: 16px;font-weight: 500;color: #FFFFFF;background-color: #FF725E;border-radius: 70px;padding: 10px 40px;display: inline-block;text-decoration: none;font-family: "Roboto", sans-serif;}
.parallax.version3 .cta-box .start-cta:hover {background-color: #f65741;  transition: .3s; }
.parallax.version3 .get-start {border-radius: 75px;margin-top: 32px;padding: 12px 42px;line-height: 22px;}
.parallax.version3 .reveal {position: relative;transform: translateY(150px);opacity: 0;transition: 0.8s all ease;}
.parallax.version3 .reveal.active {transform: translateY(0);opacity: 1;}
.parallax.version3 .bottom-img img {position: absolute;transition: 1.5s all;}
.parallax.version3 .bottom-img .left {max-width: 294px;width: 294px;left: -19px;transform: rotate(349deg);bottom: -42px;visibility: hidden;}
.parallax.version3 .bottom-img .right {max-width: 294px;width: 294px;right: -19px;transform: rotate(11deg);bottom: -42px;visibility: hidden;}
.parallax.version3 .bottom-img.active img.left {animation: leftTransform 3s ease;visibility: visible;animation-range: 10px 2%;}
.parallax.version3 .bottom-img.active img.right {animation: rightTransform 3s ease;visibility: visible;animation-range: 10px 2%;}

@keyframes leftTransform {
  0% {transform: translateY(92%) rotate(360deg);}
  100% {transform: translateY(0%) rotate(349deg);}
}

@keyframes rightTransform {
  0% {transform: translateY(92%) rotate(0deg);}
  100% {transform: translateY(0%) rotate(11deg);}
}




/* Remove background-attachment fixed for mobile */
@supports (-webkit-touch-callout: none) {
  .parallax.version1 .content-wrapper {
    background-attachment: scroll;
  }
}

@media(max-width: 991.98px) {
  .parallax.version1 .content-wrapper {background-size: cover;background-position: center;}
  .parallax.version2 .column-row > * {margin-right: 0;padding-left: calc(var(--bs-gutter-x) / 2);padding-right: calc(var(--bs-gutter-x) / 2);}
  .parallax.version2 .columns .column-row {--bs-gutter-x: 1.5rem;margin-left: calc(var(--bs-gutter-x) / -2);margin-right: calc(var(--bs-gutter-x) / -2);margin-top: calc(var(--bs-gutter-y)* -1);}
  .parallax.version2 .columns .column-row {display: flex;flex-wrap: nowrap;padding: 0;overflow: hidden;scroll-behavior: smooth;padding-bottom: 14px;}
  .parallax.version2 .columns {max-width: 100%;margin: 0 auto;position: relative;}
  .parallax.version2 .slide {max-width: 100%;}
  .parallax.version2 button#left {right: 52px;}
  .parallax.version2 button#right {right: 5px;}
  .parallax.version2 button#right, .parallax.version2 button#left {position: absolute;display: flex;justify-content: center;align-items: center;bottom: 0;background: #ffffff;padding: 5px;border: none;height: 30px;width: 30px;text-align: center;align-content: center;line-height: 1;border-radius: 50px;}
  .parallax.version2 .columns .arrows button svg {width: 14px;fill: #000000;height: auto;}
  .parallax.version2 .columns .arrows {display: inline-block;}
  .parallax.version2 .columns .img-col {height: 240px;}
  .parallax.version2 .column-row {display: flex;overflow-x: auto;scroll-snap-type: x mandatory;scroll-behavior: smooth;}
}

@media(max-width:767.98px){
  .parallax.version1,
  .parallax.version3 {padding: 50px 0;}
  .parallax.version1 .content-wrapper {padding: 70px 0;}
  .parallax.version3 .main-content-box {padding:50px 20px;}
  .parallax.version3 .heading .cta-section-capl-heading {font-size: 28px;line-height: 1.4;}
  .parallax.version1 .content-wrapper .text-box {padding: 50px 12px;}
  .parallax.version1 .text-box .parallax-heading {font-size: 28px;line-height: 38px;}
  .parallax.version1 .content-wrapper {height: 100%;border-radius: 32px;background-position: center;min-height: 500px;}
  .parallax.version3 .bottom-img .left, .parallax.version3 .bottom-img .right {position: relative;bottom: inherit;left: inherit;right: inherit;transform: translateY(150px);opacity: 0;transition: 1.2s all ease;}
  .parallax.version3 .bottom-img.active img.left, .parallax.version3 .bottom-img.active img.right {animation: none;transform: translateY(0px);opacity: 1;}
  .parallax.version3 .bottom-img {text-align: center;margin-top: 20px;transition: 1s all;}
  .parallax.version3 .heading .parallax-heading {font-size: 28px;line-height: 40px;}
  .main.parallax_version2 .heading h2 {font-size: 32px;line-height: 44px;}
  .main.parallax_version2 .heading h2 span {font-size: 32px;line-height: 44px;}
  .parallax.version2 .columns .img-col {height: 240px;margin-bottom: 20px;}
  .parallax .element {display: none;}
  .parallax.version3 .heading h2.reveal {font-size: 30px;}
  .main.parallax_version2 .slide {min-width: 100%;}
}

@media(max-width:480.98px){
  .parallax.version2 .columns .img-col {height: 182px;}
}

@media(max-width:380.98px){
  .parallax .get-start, .parallax .discover-cta {display: block;width: max-content;margin-left: auto;margin-right: auto;margin-top: 20px;}
}


@media (min-width: 992px) and (max-width: 1199.98px) {
  .parallax.version3 .bottom-img .left {max-width: 280px;width: 280px;}
  .parallax.version3 .bottom-img .right {max-width: 280px;width: 280px;}
  .parallax.version3 .heading .parallax-heading {font-size: 32px;}
  .parallax.version3 .main-content-box .heading p {max-width: 520px;}
  .main.parallax_version2 .heading h2 {font-size: 34px;}
  .main.parallax_version2 .heading h2 span {font-size: 34px;}
}

@media(min-width:768px) and (max-width:991.98px){
  .parallax.version3 .bottom-img .left {max-width: 245px;width: 245px;}
  .parallax.version3 .bottom-img .right {max-width: 245px;width: 245px;}
  .parallax.version3 .heading .parallax-heading {font-size: 32px;}
  .parallax.version3 .main-content-box .heading p {max-width: 510px;}
  .main.parallax_version2 .heading h2 {font-size: 32px;line-height: 42px;}
  .main.parallax_version2 .heading h2 span {font-size: 32px;line-height: 42px;}
  .main.parallax_version2 .slide {min-width: 50%;}
}

.parallax .parallax-wrapper, .main .parallax-wrapper {margin-left: auto;margin-right: auto;padding-left: var(--bs-gutter-x, 0.75rem);padding-right: var(--bs-gutter-x, 0.75rem);width: 100%;}
.parallax .row {--bs-gutter-x: 1.5rem;display: flex;flex-wrap: wrap;margin-left: calc(var(--bs-gutter-x) / -2);margin-right: calc(var(--bs-gutter-x) / -2);margin-top: calc(var(--bs-gutter-y) * -1);}
.parallax .row > * {flex-shrink: 0;margin-top: var(--bs-gutter-y);max-width: 100%;padding-left: calc(var(--bs-gutter-x) / 2);padding-right: calc(var(--bs-gutter-x) / 2);width: 100%;}
.parallax .col {flex: 1 0 0%;}
.parallax .col-auto, .parallax .row-cols-auto > * {flex: 0 0 auto;width: auto;}
.parallax .col-12, .parallax .row-cols-1 > * {flex: 0 0 auto;width: 100%;}
.parallax .col-6, .parallax .row-cols-2 > * {flex: 0 0 auto;width: 50%;}
.parallax .col-4, .parallax .row-cols-3 > * {flex: 0 0 auto;width: 33.3333333333%;}
.parallax .col-3, .parallax .row-cols-4 > * {flex: 0 0 auto;width: 25%;}
.parallax .row-cols-5 > * {flex: 0 0 auto;width: 20%;}
.parallax .col-2, .parallax .row-cols-6 > * {flex: 0 0 auto;width: 16.6666666667%;}
.parallax .col-1,
.parallax .col-5,
.parallax .col-7,
.parallax .col-8 {flex: 0 0 auto;}
.parallax .col-1 {width: 8.3333333333%;}
.parallax .col-5 {width: 41.6666666667%;}
.parallax .col-7 {width: 58.3333333333%;}
.parallax .col-8 {width: 66.6666666667%;}
.parallax .col-9 {flex: 0 0 auto;width: 75%;}
.parallax .col-10 {flex: 0 0 auto;width: 83.3333333333%;}
.parallax .col-11 {flex: 0 0 auto;width: 91.6666666667%;}

@media (min-width: 576px) {
  .parallax .parallax-wrapper, .main.parallax_version2 .parallax-wrapper, .parallax .container-sm {max-width: 540px;}
  .parallax .col-sm {flex: 1 0 0%;}
  .parallax .col-sm-auto, .parallax .row-cols-sm-auto > * {flex: 0 0 auto;width: auto;}
  .parallax .col-sm-12, .parallax .row-cols-sm-1 > * {flex: 0 0 auto;width: 100%;}
  .parallax .col-sm-6, .parallax .row-cols-sm-2 > * {flex: 0 0 auto;width: 50%;}
  .parallax .col-sm-4, .parallax .row-cols-sm-3 > * {flex: 0 0 auto;width: 33.3333333333%;}
  .parallax .col-sm-3, .parallax .row-cols-sm-4 > * {flex: 0 0 auto;width: 25%;}
  .parallax .row-cols-sm-5 > * {flex: 0 0 auto;width: 20%;}
  .parallax .col-sm-2, .parallax .row-cols-sm-6 > * {flex: 0 0 auto;width: 16.6666666667%;}
  .parallax .col-sm-1 {flex: 0 0 auto;width: 8.3333333333%;}
  .parallax .col-sm-5 {flex: 0 0 auto;width: 41.6666666667%;}
  .parallax .col-sm-7 {flex: 0 0 auto;width: 58.3333333333%;}
  .parallax .col-sm-8 {flex: 0 0 auto;width: 66.6666666667%;}
  .parallax .col-sm-9 {flex: 0 0 auto;width: 75%;}
  .parallax .col-sm-10 {flex: 0 0 auto;width: 83.3333333333%;}
  .parallax .col-sm-11 {flex: 0 0 auto;width: 91.6666666667%;}
}
@media (min-width: 768px) {
  .parallax .parallax-wrapper, .main.parallax_version2 .parallax-wrapper {max-width: 720px;}
  .parallax .col-md {flex: 1 0 0%;}
  .parallax .col-md-auto, .parallax .row-cols-md-auto > * {flex: 0 0 auto;width: auto;}
  .parallax .col-md-12, .parallax .row-cols-md-1 > * {flex: 0 0 auto;width: 100%;}
  .parallax .col-md-6, .parallax .row-cols-md-2 > * {flex: 0 0 auto;width: 50%;}
  .parallax .col-md-4, .parallax .row-cols-md-3 > * {flex: 0 0 auto;width: 33.3333333333%;}
  .parallax .col-md-3, .parallax .row-cols-md-4 > * {flex: 0 0 auto;width: 25%;}
  .parallax .row-cols-md-5 > * {flex: 0 0 auto;width: 20%;}
  .parallax .col-md-2, .parallax .row-cols-md-6 > * {flex: 0 0 auto;width: 16.6666666667%;}
  .parallax .col-md-1 {flex: 0 0 auto;width: 8.3333333333%;}
  .parallax .col-md-5 {flex: 0 0 auto;width: 41.6666666667%;}
  .parallax .col-md-7 {flex: 0 0 auto;width: 58.3333333333%;}
  .parallax .col-md-8 {flex: 0 0 auto;width: 66.6666666667%;}
  .parallax .col-md-9 {flex: 0 0 auto;width: 75%;}
  .parallax .col-md-10 {flex: 0 0 auto;width: 83.3333333333%;}
  .parallax .col-md-11 {flex: 0 0 auto;width: 91.6666666667%;}
}
@media (min-width: 992px) {
  .parallax .parallax-wrapper, .main.parallax_version2 .parallax-wrapper {max-width: 960px;}
  .parallax .col-lg {flex: 1 0 0%;}
  .parallax .col-lg-auto, .parallax .row-cols-lg-auto > * {flex: 0 0 auto;width: auto;}
  .parallax .col-lg-12, .parallax .row-cols-lg-1 > * {flex: 0 0 auto;width: 100%;}
  .parallax .col-lg-6, .parallax .row-cols-lg-2 > * {flex: 0 0 auto;width: 50%;}
  .parallax .col-lg-4, .parallax .row-cols-lg-3 > * {flex: 0 0 auto;width: 33.3333333333%;}
  .parallax .col-lg-3, .parallax .row-cols-lg-4 > * {flex: 0 0 auto;width: 25%;}
  .parallax .row-cols-lg-5 > * {flex: 0 0 auto;width: 20%;}
  .parallax .col-lg-2, .parallax .row-cols-lg-6 > * {flex: 0 0 auto;width: 16.6666666667%;}
  .parallax .col-lg-1 {flex: 0 0 auto;width: 8.3333333333%;}
  .parallax .col-lg-5 {flex: 0 0 auto;width: 41.6666666667%;}
  .parallax .col-lg-7 {flex: 0 0 auto;width: 58.3333333333%;}
  .parallax .col-lg-8 {flex: 0 0 auto;width: 66.6666666667%;}
  .parallax .col-lg-9 {flex: 0 0 auto;width: 75%;}
  .parallax .col-lg-10 {flex: 0 0 auto;width: 83.3333333333%;}
  .parallax .col-lg-11 {flex: 0 0 auto;width: 91.6666666667%;}
}
@media (min-width: 1200px) {
  .parallax .parallax-wrapper, .main.parallax_version2 .parallax-wrapper {
    max-width: 1200px;
  }
}