/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/

:root {
  --primary-color: #705bb1;
  --secondary-color: #39a6da;
  --font-size: 16px;
}
        
body, h1{
    font-family: "Montserrat", sans-serif!important;
/*   background: linear-gradient(to bottom, #fff 0%, #fefefe); */
}

 h2, h3, h4, h5, h6{
 font-family: "Montserrat", sans-serif;
      font-weight: 800!important;
}

a, p, li{
   font-family: "Lexend", sans-serif!important;
   font-weight: 300;
}

p a{
  text-decoration:underline!important;
}

b, strong {
    font-weight: 600!important;
}

a.button {
/*     min-width: 274px; */
    justify-content: center;
}

li.hs-menu-item{
 font-family: 'Montserrat' !important; 
 line-height: 1.1em;
}

li.hs-menu-item a {
    text-transform: uppercase !important;
}


.cta {
    background: var(--primary-color);
    color: #fff;
    display: block;
    text-align: center;
    padding: 15px 10px;
    border-radius: 8px;
    max-width: 400px;
}

.primary-font-style{
   font-family: "Montserrat", sans-serif!important;
}

.secondary-font-style{
   font-family: "Lexend", sans-serif!important;
}

.hs-image__grid__list__item {
    align-items: center;
    display: flex;
    justify-content: center;
}
 #hero{
/*       background-image: url('https://20482961.fs1.hubspotusercontent-na1.net/hubfs/20482961/web/hero-bg.png'); */
}
/* 
home */
.hs-content-id-163191400859 #main-content h1{
    font-size: 45px;
    font-weight: 300;
    line-height: 69px;
    margin-top: 80px;
}

.container-fluid {
    padding: 0 !important;
}

  .cta-style-2{
    display:inline-block!important;
    padding: 15px 30px !important;
  }
  

a.cta:hover {
    color: var(--primary-color);
    background: #ccd7df;
}
#hero .right-col {
    padding-top: 4%;
}
#hero{
    background-position-y: 37px;
    background-position-x: 2px;
    background-repeat: no-repeat;
    background-size: 50.3% auto;
    padding: 0 20px;
/*     background-position-y: 30px; */
/*       min-height: 109vh; */

/*     min-height: 95vh; */
}

#hero-plug {
    margin-left: -122px;
    margin-top: 13px;
}


#hero .container-fluid{
  display: flex;
}

.secondary-color{
   color: var(--secondary-color);
}



ul.list-items {
/*     display: flex;
    flex-direction: column;
    gap: 15px; */
}

ul.list-items li {
    font-weight: 200 !important;
    margin: 0px 0 20px !important;
}
ul.list-items li::marker {
 color:#39a6da;
}

span.seperator {
    margin: 0 20px;
    font-weight: 200;
}

.card {
    border: none!important;
}

.card .bg-image img {
    width: 100%;
}
.card-overlay.content {
    position: absolute;
    background: #fff;
    bottom: 43px;
    width: 90%;
    padding: 10px;
}

.card.steps {
    display: flex;
    align-items: center;
}

.card.step1:after {
    right: -10%;
}
.card.step2:after { 
    right: -60%;
      top: 40% !important;
}   

.card.steps:not(:last-child):after{
    content: "";
    background: url(https://20482961.fs1.hubspotusercontent-na1.net/hubfs/20482961/web/arrow-right.png);
    background-size: 100%;
    width: 135px;
    background-repeat: no-repeat;
        height: 103px;
    position: absolute;
    top: 40%;
    transform: translate(-50%, -50%);
    width: 104px;
    z-index: 2;
}
}

.card.card-module-1 .card-overlay {
    text-align: right;
}

.nowrap{
  white-space:nowrap
}

li.header__menu-item.header__menu-item--depth-1, footer li{
 position: relative; 
}

footer li:not(:last-child):after {
    content: "";
    width: 2px;
    height: 16px;
    background: #fff;
    right: -15px;
    top: 5px;
    position: absolute;
}

li.header__menu-item.header__menu-item--depth-1:not(:last-child):after{
    content: "";
    width: 2px;
    height: 16px;
    background: #fff;
    right: -3px;
    top: 5px;
    position: absolute;
}

footer a {
    color: #fff !important;
    padding: 0 15px;
/*     font-size: 18px !important; */
    font-weight: 500 !important;
    line-height:normal
}

.header__menu-container.header__menu-container--mobile {
    text-align: right;
    display: flex;
    justify-content: end;
}

h2.quote {
    position: relative;
    margin-left: 35px;
}

h2.quote:before {
    position: absolute;
    content: open-quote;
    left: -35px;
}

footer .button-wrapper {
    margin-top: -7px;
    margin-left: -25px !important;
}


#hero .left-col img{
  z-index: -9;
    position: relative;
    width: 111%;
    left: -9%;
    top: -25px;
}

.hero-gradient-bg {
    left: -54px;
    background: linear-gradient(to bottom, #f6f8f9bf, #fefeff);
    width: 113%;
    height: 14px;
    position: absolute;
    /* background: red; */
    bottom: 34px;
    z-index: -13;
    /* margin: 0 -54px !important; */
}

#book-demo .modal-body {
    padding: 20px 30px;
}

#book-demo .modal-dialog {
    width: 100% !important;
    max-width: 600px;
}

#book-demo button.btn-close {
    position: absolute;
    right: 11px;
    top: 12px;
    font-size: 16px;
}

.header__menu-submenu .header__menu-item {
    background-color: #1e1910!important;
    border-bottom: 1px solid #747474;
    width: 100%;
}
details.accordion.accordion--plus.card {
    max-width: unset !important;
    border-bottom: solid 1px #d9d9d9 !important;
    padding-bottom: 20px;
}

li.header__menu-item.header__menu-item--depth-2:hover a {
    color: #9c7eed !important;
}

#main-content section.blog-listing.blog-listing--card {
    justify-content: center !important;
}

.blog-listing__post-summary p {
    font-size: 16px !important;
    line-height: 26px !important;
}

article.news-card {
    background: #fff;
    border-radius: 5px;
    padding: 20px;
    box-shadow: 1px 4px 16px rgba(0, 0, 0, .1);
}

.news-card__media {
    height: 150px;
    display: flex;
    align-items: center;
}


@media screen and (min-width:768px){ 
 .blog-listing {
    gap: 40px!important;
 }
  img.header__logo-image {
    min-width: 214px;
  }
}

/********** Mobile CSS *************/
@media screen and (max-width:767px){ 
  .hs-content-id-163191400859 #main-content h1{
    line-height: 47px!important;
    margin-top:40px;
  }
  .hs-content-id-163191400859 h2, #main-content .hs_cos_wrapper_widget h2 {
    font-size: 35px !important;
  }
  .hs-content-id-163191400859 h3 {
    font-size: 32px !important;
  }
  .hs-content-id-163191400859 #main-content .dnd-section:not(.row-number-1, .row-number-28) .row-fluid {
    max-width: 1500px !important;
    margin: auto;
  }
   .hs-content-id-163191400859 p, .p-style-2 p, .hs-content-id-163191400859 p span {
    font-size: 20px !important;
    line-height: 37px !important;
  }
  .hero-mobile-img {
    margin-bottom: 30px;
  }
  .hs-content-id-163191400859 #hs_cos_wrapper_dnd_area-module-3 {
    margin-top: 0px !important;
  }
  .content-with-cta1 p{
     font-size:18px!important;
  }
   .image-list {
     margin-bottom: 80px;
     padding: 0 15px;
   }
  .image-list img {
    width: 100% !important;
}
   ul.list-items li {
    font-size: 20px !important;
  }
  .cta {
    font-size:18px!important
  }
  .horizontal-list p {
    display: flex!important;
    flex-direction: column!important;
    text-align: center;
   }
  .horizontal-list .seperator{
       color: transparent;
  }
    .card-overlay.content p {
    font-size:20px!important;
    line-height:31px!important;
  }
  .content-with-laptop p, .content-with-laptop ul{
    font-size:20px!important;
    line-height:37px!important;
  }
  ul.list-items {
    margin-top: 30px;
  }
    .card.steps:after {
    top: 100% !important;
    transform: rotate(90deg) !important;
    right: 42% !important;
}
  .card.steps.step1:after {
       transform: rotate(90deg) translate(0%, -50%) !important;
        right: 50% !important;
  }
  .card.steps.step2:after {
    right: 34% !important;
  }
  img.cropped-right-img {
    position: relative;
    margin-bottom: 35px;
    right: -25px;
  }
  .stats-col {
    margin-bottom: 60px;
  }
  .card.card-module-1 {
    margin-bottom: 60px;
  }
  footer .button-wrapper {
    margin-top: 0px!importan;
    margin-left: 0px !important; 
    text-align: center;
}
  footer li:not(:last-child):after {
    background:transparent;
  }
  .cta-wrapper{
    text-align:center;    
    margin-top: 30px;
  }
  .content-with-cta1 {
    flex-direction: column;
  }
  img.outlet-with-text {
     max-width: 300px !important;
     margin: auto !important;
     margin-bottom: -50px !important;
  }
  #volt-info-block{
    background: #eff5f9;
    margin: 0 -24px;
    padding: 40px 24px 0;
  }
  #volt-info-block .horizontal-list p{
    margin-bottom:50px!important
  }
  #hs_cos_wrapper_widget_1712700874660 {
    margin-top: 40px !important;
  }
  
  step3-title {
    margin-top: 30px;
}
  p.steps-title span {
    font-size: 28px !important;
}
li.header__menu-item.header__menu-item--depth-1.header__menu-item--has-submenu.hs-skip-lang-url-rewrite {
    background: #1e1910!important;
}
  li.header__menu-item.header__menu-item--depth-1.header__menu-item--has-submenu.hs-skip-lang-url-rewrite.header__menu-item--open a {
    color: #fff !important;
}
  p.steps-title.step1-title {
    background: #fff;
    margin-top: -64px;
 }
  p.steps-title.step3-title {
    margin-top: 30px;
 }
  .card.steps.step3 img {
    max-width: 330px !important;
  }
}
/********** END Mobile CSS END *************/






@media screen and (min-width:768px) and (max-width:1091px){ 
  .left-col{
    display:none!important
  }
  #hero {
    background-image: unset!important;
  }
  #hero .right-col{
    width:100%!important
  }
  #hero #hero-logo{
    margin-top:0!important
  }
   #hero .right-col #hero-plug {
    margin-left:0!important
  }
  .card.steps:not(:last-child):after {
    background-size: 75%!important;
  }
  

  
/*     .card.step1:after {
    right: -2%!important;
}
  .card.step2:after {
    right: -45%!important;
  } */
}



@media screen and (max-width:1200px){ 
  .hide-medium{
   display:none!important 
  }
}



/* Medium Screen CSS */
@media screen and (min-width:768px) and (max-width:1699px){ 
/*   home */
   .hs-content-id-163191400859 h2 {
    font-size: 57px !important;
  }
   .hs-content-id-163191400859 h3 {
    font-size: 34px !important;
  }
  .hs-content-id-163191400859 #main-content .dnd-section:not(.row-number-1, .row-number-28) .row-fluid {
    max-width: 1500px !important;
    margin: auto;
  }
   p {
    font-size: 22px !important;
    line-height: 39px !important;
  }
  .p-style-2 p {
    font-size: 34px !important;
    line-height: 56px !important;
  }
  
  #hero .cta {
    font-size:25px!important
  }
  
 #hero .left-col img {
 
    left: -14%!important;
  }
   #hero-plug {
    margin-left: -182px!important;
    max-width: 350px;
  }
  .hero-secondary-content {
    margin-left: 45px;
  }
  .hero-secondary-content p {
    font-family: inherit !important;
    font-size: 30px !important;
    line-height: 38px !important;
    margin-top: 90px;
  }
  #hs_cos_wrapper_dnd_area-module-3 {
    margin-top: 60px !important;
  }
  ul.list-items li {
    font-size: 16px !important;
    
  }
  
  .content-with-cta1 p{
    font-size:24px!important;
    line-height:32px!important
  }
  
  h3.card-headline {
    font-size: 28px !important;
  }
  ul.list-items {
    margin-top: 35px!important;
    max-width: 300px;
    margin: auto;
}
  
  #hs_cos_wrapper_widget_1712755385067 .button{
    font-size:25px!important
  }
  
 
  .card-overlay.content p {
    font-size:20px!important;
    line-height:33px!important;
  }
  .content-with-laptop p, .content-with-laptop ul{
    font-size:22px!important;
    line-height:39px!important;
  }
  .content-with-laptop {
    margin-right: -67px;
  }
  .card-module-1 {
    max-width: 502px!important;
  }
  .card-overlay.content{
    background: #fff;
    border-radius: 30px;
    bottom: 45px;
    margin-left: -21px;
    padding: 30px 40px 10px 10px;
    text-align:right;
  }
  img.laptop-img {
    position: absolute;
  }
  .steps-container {
    margin: 0 -4em;
  }
  
  .card.steps:not(:last-child) {
    margin-right:80px!important
  }
  
  .steps p, .step3-title {
    font-size:32px!important
}
  .steps img {
    max-width: 75% !important;
}
  .step3-title {
    position: relative;
    top: 91px;
}
  .step1-title {
    background:#fff;
    position: relative;
    top: -58px;
}
/*   .card.step2:after {
    right: -117px!important;
  } */

  #main-content .cta {
    background: var(--primary-color);
    color: #fff;
    display: block;
    font-size: 28px;
    text-align: center;
    padding: 15px 10px;
    border-radius: 8px;
    font-weight: 200;
    max-width: 400px;
  }
  #hs_cos_wrapper_header-module-1 .button {
    background-color: #39a6da;
    font-family: 'Montserrat' !important;
    font-weight: 500 !important;
    font-size: 21px !important;
    min-width: 165px;
    justify-content: center;
}
  a.header__menu-link {
    color: #fff!important;
    font-size: 18px !important;
    font-family: 'Montserrat' !important;
    font-weight: 500 !important;
  }
  .header__container--left .header__menu-col {
    flex: 7 0 0!important;
  }
  .header__menu-item--depth-1 {
        padding: 0px 1.5rem !important;
  }
  .header__bottom {
    padding: 1.6rem 2rem!important;
  }
  
  .row-fluid-wrapper.row-depth-1.row-number-1.dnd-section.header-row-0-margin.header-row-0-padding.header-row-0-force-full-width-section.header-row-0-background-color {
    height: 108px;
    background-color: #1e1910 !important;
}
  #hero .container-fluid {
    transform: translate(0, 6%);
  }
  #hero-logo {
    margin-bottom: 2%;
    margin-top: 7%;
/*     margin-left: 9%; */
    max-width: 410px;
    width: 100%;
    display: block;
}
    #hero{
/*       background-image: url('https://20482961.fs1.hubspotusercontent-na1.net/hubfs/20482961/web/hero-bg.png'); */
          background-size: 56.3% auto !important;
    background-position-x: -124px;
          min-height: 100vh;
/*       background-size: 47.3% auto!important; */
    }
   #hero .right-col{
        padding-top: 4%;
    } 
    #hero-plug{
/*         margin-left: -122px; */
        margin-top: 13px;
    }
  .hs-content-id-163191400859 #main-content h1 {
    font-size:36px;
    line-height: 1.5em;
  }
 
   
}

/* Large Screen CSS */
@media screen and (min-width:1700px){
  .hs-content-id-163191400859 #main-content h1{
    margin-left: 64px;
  }
/*   .hero-secondary-content p {
    font-size: 22px !important;
    line-height: 34px !important;
   } */
 
  .hs-content-id-163191400859 h2{
    line-height:71px
  }
  .hs-content-id-163191400859 p{
    font-size:42px;
    line-height: 47px;
  }

#hero .container-fluid{
  transform: translate(0, 6%);
  max-width: 1765px;
  padding: 0 24px;
}
  
  .hero-secondary-content {
         margin-left: 58px;
    margin-top: 147px;
}
  #hero p{
  font-family:inherit!important;
  font-size: 28.03px;
  line-height: 35px;
  margin-top: -15px;
}
#main-content .cta{
    background: var(--primary-color);
    color: #fff;
    font-size:33px;
    text-align: center;
    padding: 15px 20px;
    border-radius: 8px;
    font-weight: 200;
    text-decoration: none;
}

  #hero a.cta {
   margin-top: 40px;
    display: block;
    max-width: 91%;
    margin-left: -10px;
        white-space: nowrap
  
}
  
  ul.list-items {
    margin-top: 37px;
    max-width: 321px;
  }
  
  ul.list-items li {
    font-family: 'Lexend' !important;
    font-size: 21px !important;
    font-weight: 100;
}
/*   home */
   .hs-content-id-163191400859 .row-depth-1.row-number-7 span.hs_cos_wrapper {
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .card {
    max-width: 502px!important;
}
  .card .bg-image {
    min-width: 502px;
}
  .card-overlay.content {
    background: #fff;
    border-radius: 30px;
    bottom: 45px;
    margin-left: -130px;
    padding: 30px 40px 10px 10px;
    position: absolute;
    width: 111%;
    text-align: right;
}
  .card-overlay.content p {
    line-height: 41px;
    font-size: 28px !important;
        font-family: 'Montserrat' !important;
  }
  a.header__menu-link {
    color: #fff!important;
    font-size: 18px !important;
    font-family: 'Montserrat' !important;
    font-weight: 500 !important;
    line-height: normal;
  }
  .header__container--left .header__menu-col {
    flex: 7 0 0!important;
  }
  .header__menu-item--depth-1 {
    padding: 0 2.5rem!important;
  }
  .header__bottom {
    padding: 1.6rem 2rem!important;
  }
  #hs_cos_wrapper_header-module-1 .button {
    background-color: #39a6da;
    font-family: 'Montserrat' !important;
    font-weight: 500 !important;
    font-size: 21px !important;
    min-width: 165px;
    justify-content: center;
  }
  .step1-title {
    /* margin-top: -73px; */
    position: relative;
    top: -80px;
    background: #fff;
  }
  .step3-title {
    position: relative;
    top: 110px;
}
  
  .card.steps {
    margin: 0px 160px 0 0;
  }
  
  .card.steps.step1 {
    margin-right: 112px;
  }
  
  img.laptop-img {
    position: absolute;
    right: 0;
  }
  
  .content-with-laptop {
    width: 114%;
}
  div#hs_cos_wrapper_widget_1712755385067 {
    margin-left: -100px;
}
  
}
@media screen and (min-width:992px){

    #bg-img{
        position: absolute;
        left: -25%;
        width: 120%;
        /* top: -80px; */
   }
}

 .row-fluid-wrapper.row-depth-1.row-number-1.dnd-section.header-row-0-margin.header-row-0-padding.header-row-0-force-full-width-section.header-row-0-background-color, .header__bottom, #hs_cos_wrapper_header-module-1 .header__menu-link{
    background-color: #1e1910 !important;
}


/* @media screen and (min-width:1500px){ 
  #hero{
     min-height: 88vh!important;
     display: flex;
     align-items: center;
  }
  #hero-plug {
    max-width: 350px;
  }
  #hero .right-col {
    padding-top:0!important
  }
  
} */

@media screen and (min-width:1700px){ 
  .outlet-with-text{
    position: relative;
    bottom: -50px;
  }
  #hs_cos_wrapper_module_1712700816115 {
    display: block !important;
    margin-top: 105px !important;
}
  span#hs_cos_wrapper_widget_1712700793901_ {
    position: relative;
    bottom: -50px;
}
/*     #hero{
     min-height: 78vh;
     display: flex;
     align-items: center;
  } */
  #hero-logo {
    margin-bottom: 20px;
    margin-top: 63px;
    margin-left: 63px;
   }
}

@media screen and (max-width:1199px){ 
 #main-content #hero h1{
    font-size: 30px;
  }
}

/* @media screen and (min-width:768px) and (max-width:1199px){ 
 
  #hero-plug {
    max-width: 270px;
  }
   
} */
@media screen and (max-width:767px){ 
  .row-fluid > .row-fluid-wrapper.row-depth-1 {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
    .bottom-content{
        flex-direction: column;
    }
    #hero{
          background: transparent;
        padding: 25px 20px;
    }

    #hero-logo{
        max-width: 350px;
    }
    #hero-plug{
      max-width: 300px;
      margin-left: 0!important;
      margin-top: 0px!important;
      margin-bottom: 20px;
    }
  .card.steps {
    margin-bottom: 135px;
    width: 100%;
  }


  span.seperator {
    margin: 0 10px!important;
    height: 20px;
  }
/*   .horizontal-list p{
    font-size:16px!important
  } */
}