@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,700,800&display=swap');

/*
  Services - general styles  -------------------------------------
*/
/* header */
.service-header, .heartland-header {
  background-size: cover;
  margin-bottom: 60px;
  padding: 100px 10px 0;
}

.heartland-header {
  background-color: #192B3B;
}

.service-title {
  color: #fff;
  font-family:"ProximaNovaB";
  font-size: 2.2rem;
  line-height: 1.1em;
  padding-top: 10px;
  text-align: center;
  text-transform: uppercase;
}
.service-subtitle {
  color: #fff;
  font-size: 1.2rem;
  margin-bottom: 40px;
  text-align: center;
  text-transform: uppercase;
}
.sectitle {
  color: #363636;
  font-family: "ProximaNovaB";
  font-size: 1.8rem;
  line-height: 1.2em;
}
.service-header .cols {
  align-items: flex-end;
  display: flex;
  margin-top: 60px;
}
.service-image {
  box-sizing: border-box;
  display: none;
  width: 50%;
}
.service-image img {
  display: block;
  height: auto;
  max-width: 100%;
}
.service-intro {
  box-sizing: border-box;
  flex-grow: 1;
  margin: 0 auto -80px;
  max-width: 700px;
  padding: 0 0 20px;
  position: relative;
  width: 50%;
}
.service-intro:after {
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0) 80%,rgba(0,0,0,0) 100%);
  content: '';
  display: block;
  height: 20px;
  left: 0;
  margin: 0 40px;
  position: absolute;
  top: 100%;
  width: calc(100% - 80px);
}
.service-intro-box {
  box-shadow: -5px -5px 21px -9px rgba(0,0,0,.3);
}
.service-intro-box p {
  color: #404040;
  margin: 0;
}
.service-intro-box p:first-child {
  padding: 50px 20px 40px;
  background-color: #fff;
  margin: 0;
}
.service-intro-box p:last-child {
  padding: 40px 20px 50px;
  color: #fff;
  background-color: #23323c;
  margin: 0;
}
@media screen and (min-width: 500px) {
  .sectitle { font-size: 2.25rem; }
}
@media screen and (min-width: 560px) {
  .service-title    { font-size: 2.8rem; }
  .service-subtitle { font-size: 1.4rem; }
  .service-intro-box p:first-child { padding: 50px 60px 40px; }
  .service-intro-box p:last-child  { padding: 40px 60px 50px; }
}
@media screen and (min-width: 1000px) {
  .service-header {
    padding: 85px 0 0;
  }
  .service-intro {
    padding: 0 40px 20px;
  }
  .service-title {
    font-size: 3.6rem;
    padding-top: 60px;
  }
  .service-subtitle {
    font-size: 1.6rem;
    margin-bottom: 0;
  }
  .service-image {
    display: block;
  }
}

/* separators */
.chevron-separator {
  display: block;
  height: auto;
  margin: 0 auto;
  max-width: 30px;
  padding: 20px 0;
}

/* big-title divider */
.service-big-title {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  padding: 20px 0;
  text-align: center;
}
.service-big-title.center {
  justify-content: center;
}
.service-big-title .chevron {
  height: auto;
  margin: 0 auto;
  max-width: 50px;
  order: 2;
  padding-top: 15px;
  width: 100%;
}
.service-big-title .titles {
  width: 100%;
}
.service-big-title .title {
  color: #000;
  font-family: "ProximaNovaB";
  font-size: 2rem;
  line-height: 1.2em;
  margin-bottom: 0;
}
.service-big-title .subtitle {
  color: #828282;
  font-size: 1.4rem;
}
@media screen and (min-width: 800px) {
  .service-big-title .titles { width: auto; }
  .service-big-title {
    flex-wrap: nowrap;
    text-align: left;
  }
  .service-big-title .chevron {
    margin: 0;
    order: 0;
    padding-right: 20px;
    padding-top: 25px;
  }
  .service-big-title .title     { font-size: 3.6rem; }
  .service-big-title .subtitle  { font-size: 1.8rem; }
}

/* normal paragraph */
.normal-font,
.service-normal-text p {
  font-size: 1.2rem;
  line-height: 1.35em;
}
.service-normal-text {
  margin: 0 auto;
  max-width: 800px;
}
.service-normal-text.left   { margin-left: 0; }
.service-normal-text.center { text-align: center; }
.service-normal-text h2 {
  text-align: center;
}
.service-normal-text p:first-child { margin-top: 0; }
.service-normal-text p:last-child { margin-bottom: 0; }
.service-normal-text h2 {
  font-size: 1.8rem;
  font-family: "ProximaNovaB";
}

/* list of cards */
.service-cardlist {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.service-cardlist > li {
  box-sizing: border-box;
  padding: 10px;
  width: 100%;
}
.service-cardlist.single > li {
  max-width: 800px;
  margin: 0 auto;
  box-sizing: content-box;
}
.service-cardlist .card {
  background-color: #fff;
  border-color: #fff #ddd #ddd #eee;
  border-style: solid;
  border-width: 1px;
  box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.17);
  box-sizing: border-box;
  min-height: 100%;
  padding: 20px 20px 35px;
  position: relative;
}
.service-cardlist .card-header {
  border-bottom: 1px solid #ddd;
  margin-bottom: 20px;
  padding: 10px 0 12px;
  text-align: center;
}
.service-cardlist .card-header .icon {
  margin-bottom: 10px;
  max-height: 70px;
}
.service-cardlist .card-header .title {
  color: #6d6d6d;
  font-family: "ProximaNovaB";
  font-size: 1.2rem;
}
.service-cardlist .card ul {
  list-style: square;
}
@media screen and (min-width: 850px) {
  .service-cardlist.two > li    { width: 50%; }
  .service-cardlist.three > li  { width: calc(100% / 3); }
}

/* yellow lists */
.yellow-list {
  list-style-type:none;
  margin: 20px auto;
  max-width: 800px;
  padding: 0;
}
.yellow-list > li {
  border: 1px solid #fdc328;
  margin-bottom: 10px;
}
.yellow-list .bullet {
  background: #fdc328;
  box-sizing: border-box;
  min-height: 100%;
  padding: 5px 10px;
}
.yellow-list .numb {
  display: inline-block;
  vertical-align: middle;
  color: #fff;
  font-size: 1.3rem;
  font-family: "ProximaNovaB";
}
.yellow-list .txt {
  display: inline-block;
  vertical-align: middle;
  font-family: "ProximaNovaB";
  font-size: 1.18rem;
}
.yellow-list .desc {
  box-sizing: border-box;
  padding: 10px 20px;
}
@media screen and (min-width: 550px) {
  .yellow-list > li { display: flex; }
  .yellow-list .bullet {
    padding: 20px 10px;
    text-align: center;
    width: 150px;
  }
  .yellow-list .numb {
    display: block;
    font-size: 2rem;
  }
  .yellow-list .txt   { display: block; }
  .yellow-list .desc  { width: calc(100% - 150px); }
}

/*
  Magento development  -------------------------------------
*/
.service-development ul {
  color: #404040;
}
/* header */
.service-development .service-header  {
  background-image:  url(../img/magento-development-back.jpg);
  background-repeat: repeat-x;
  background-position: center bottom;
  background-size: initial;
  text-align: center;
}
.magento-dev-img:after {
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0) 80%,rgba(0,0,0,0) 100%);
  content: '';
  display: block;
  height: 20px;
  left: 0;
  margin-bottom: 100px;
  margin: 0 40px;
  position: absolute;
  top: 160px;
  width: calc(100% - 80px);
}
.magento-dev-img {
  display: inline-block;
  text-align: center;
  position: relative;
}
.magento-dev-img img {
  display: inline-block;
  margin-bottom: -87px;
  margin-top: 20px;
  max-width: 400px;
}

/* general */
.service-development .cols .sectitle {
  text-align: center;
}
.service-development .cols .image {
  box-sizing: border-box;
}
.service-development .cols img {
  display: block;
  height: auto;
  margin: 0 auto;
  max-width: 100%;
}
.service-development .cols .data {
  box-sizing: border-box;
  padding: 30px 0;
}
.service-development section:nth-child(odd) .cols .image {
  order: 2;
  padding-right: 0;
}

/* sections */
.service-development .development-frontend .cols {
  align-items: flex-end;
}
.development-backend {
  background-color: #d6dee2;
  padding: 40px 0;
}
.development-integrations {
  padding: 40px 0;
}
.development-marketing {
  padding: 50px 0;
  background-color: #d6dee2;
}
.development-performance {
  padding: 20px 0;
}
.development-extensions {
  background-color: #d6dee2;
  padding: 50px 0;
}
@media screen and (min-width: 800px) {
  .service-development .cols {
    align-items: center;
    display: flex;
  }
  .service-development .cols .image {
    padding-right: 20px;
    width: 60%
  }
  .service-development .cols .data {
    width: 40%;
  }
  .service-development section:nth-child(odd) .cols .image {
    padding-left: 20px;
    padding-right: 0;
  }

}

/*
  Responsive web development  -------------------------------------
*/
/* header */
.service-responsive .service-header  {
  background-image: url(../img/responsivebackground.jpg);
  background-blend-mode: hard-light;
}
.service-responsive .service-image {
  margin-bottom: -80px;
}
.responsive-introduction {
  margin-bottom: 80px;
}
.mobileopt-header {
  background: #077db2;
  margin-bottom: 50px;
}
.mobileopt-header .service-big-title .title     { color: #fff; }
.mobileopt-header .service-big-title .subtitle  { color: rgba(255,255,255,.7); }

/* mobile optimization */
.mobileopt-cols {
  align-items: center;
  display: flex;
  margin: 50px 0 70px;
}
.mobileopt-cols .image {
  display: none;
}
.mobileopt-cols .data {
  background-color: #fff;
  border-color: #ddd #ddd #ddd #eee;
  border-style: solid;
  border-width: 1px;
  box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.17);
}
.mobileopt-cols .data .title {
  background-color: #eee;
  color: #6d6d6d;
  font-family: "ProximaNovaB";
  font-size: 1.6rem;
  margin: 0;
  padding: 15px;
}
.mobileopt-cols .data .txt,
.mobileopt-cols .data .list {
  padding-left: 20px;
  padding-right: 20px;
}
.mobileopt-cols .data .list {
  margin-left: 20px;
}
@media screen and (min-width: 900px) {
  .mobileopt-cols .image {
    display: block;
    margin-right: -40px;
    position: relative;
    z-index: 1;
  }
  .mobileopt-cols .data .title {
    padding: 20px 60px;
  }
  .mobileopt-cols .data .txt,
  .mobileopt-cols .data .list {
    padding-left: 80px;
    padding-right: 80px;
  }
}

/*
  Web Marketing  -------------------------------------
*/
.service-marketing ul {
  color: #404040;
}
/* header */
.service-marketing .service-header  {
  background: url(../img/constelation.png) top left no-repeat #04b3db
}
.service-marketing .service-image img {
  margin: 0 0 0 auto;
}

/* infograph */
.hemispheres-infograph {
  padding-bottom: 60px;
}
.hemispheres-infograph .chevron-separator {
  display: inline-block;
  opacity: .3;
  padding: 0 20px 5px;
  transition-duration: .4s;
}
.hemispheres-infograph .chevron-separator:hover {
  opacity: .8;
  padding: 5px 20px 0;
}
.hemispheres-infograph .infograph {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
}
.hemispheres-infograph .infograph ul {
  display: none;
}
.hemispheres-infograph .arrow-link {
  display: none;
}
.hemispheres-infograph .left {
  text-align: left;
  width: 100%;
}
.hemispheres-infograph .right {
  text-align: right;
  width: 100%;
}
.hemispheres-infograph .graph {
  height: auto;
  margin: 0 auto;
  max-width: 440px;
  padding: 0 5px;
  width: 100%;
}
.hemispheres-infograph .hemtitle {
  color: #077db2;
  display: block;
  font-family: "ProximaNovaB";
  font-size: 2.2rem;
  transition-duration: .4s;
}
.hemispheres-infograph .right .hemtitle {
  color: #fdc328;
}
.hemispheres-infograph .hemtitle:hover {
  color: #000;
}
@media screen and (min-width: 800px) {
  .hemispheres-infograph { padding-bottom: 90px; }
  .hemispheres-infograph .infograph { flex-wrap: nowrap; }
  .hemispheres-infograph .left  {
    text-align: right;
    width: calc(100% - 200px);
  }
  .hemispheres-infograph .right {
    text-align: left;
    width: calc(100% - 200px);
  }
  .hemispheres-infograph .infograph ul {
    display: block;
    list-style: none;
    margin: 0;
    padding: 20px;
  }
  .hemispheres-infograph .arrow-link {
    display: inline-block;
  }
  .hemispheres-infograph .graph { max-width: 200px; }
}
@media screen and (min-width: 1100px) {
  .hemispheres-infograph .left,
  .hemispheres-infograph .right { width: calc(100% - 450px); }
  .hemispheres-infograph .graph { max-width: 430px; }
  .hemispheres-infograph .hemtitle { font-size: 3.6rem; }
}


/* explanation */
.traffic-hemisphere {
  background-color: #077db2;
  padding-bottom: 100px;
  padding-top: 25px;
}
.traffic-hemisphere .section-title {
  color: #fff;
}
.traffic-hemisphere .iconbox {
  background-color: #afafaf;
  height: 70px;
  margin: 0 auto;
  position: relative;
  width: 70px;
  border-radius: 70px;
  margin-bottom: 10px;
}
.traffic-hemisphere .iconbox .icon {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}
.marketing-iso {
  display: block;
  margin: -73px auto;
  max-width: 150px;
}
.conversion-hemisphere {
  background-color: #fdc328;
  padding-bottom: 50px;
  padding-top: 100px;
}
.conversion-hemisphere .section-title {
  color: #000;
}

/*
  Conversion rate optimization  -------------------------------------
*/
.service-conversion .service-header  {
  background: url(../img/checkered.png) top center repeat #25b6ea;
}
.conversion-introduction {
  margin-bottom: 80px;
}
.conversion-introduction .service-big-title {
  padding-top: 0;
}
.lift-section {
  background: #ecf3f7;
  padding-bottom: 50px;
}
.lift-header {
  background: #006599 url(../img/practicepolygon.png) top center no-repeat;
  margin-bottom: 30px;
}
.lift-header .service-big-title .title { color: #fff; }
.lift-model {
  background-color: #fff;
  border-color: #fff #ddd #ddd #eee;
  border-style: solid;
  border-width: 1px;
  box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);
  margin: 15px auto 0;
  max-width: 294px;
  padding: 20px;
}
.lift-model img {
  height: auto;
  max-width: 100%;
}

.cro-five-factors {
  background-color: #d6dee2;
  padding: 40px 0 30px;
}
.cro-five-factors-impact {
  background-color: #4c4f51;
  padding: 20px 0 50px;
}
.cro-five-factors-impact h2 { color: #fff; }
.cro-five-factors-impact p  { color: #c3c3c3; }

.improving-header {  background: #fdc328 url(../img/practicepolygon.png) top center no-repeat; }
.improving-header .subtitle { color: #000000a1; }

/* explanation text */
.explanationtext {
  align-items: center;
  background: #25b6ea;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  padding: 30px 20px;
}
.explanationtext p {
  box-sizing: border-box;
  color:#FFF;
  font-family: "ProximaNovaB", "ProximaNova", sans-serif;
  font-size: 1.4rem;
  font-weight: bolder;
  line-height:1.3em;
  margin: 0;
  padding: 0;
  width: 100%;
}
.explanationtext img {
  margin: 0 auto;
  max-width: 30px;
  padding: 20px 0 0;
}


/* mqueries */
@media screen and (min-width: 370px) {
  .conversion_title { padding-bottom: 80px; }
}
@media screen and (min-width: 500px) {
  .conversion_title { padding-bottom: 150px; }
}
@media screen and (min-width: 650px) {
  .conversion_header > .rowcon {
    background-position: bottom right;
    background-size: initial;
    padding-top: 140px;
    padding-bottom: 170px;
  }
  .conversion_title {
    font-size: 3.2rem;
    max-width: 500px;
    padding-bottom: 160px;
    text-align: left;
  }
  .explanationtext {
    flex-wrap: nowrap;
  }
  .explanationtext p {
    order: 2;
  }
  .explanationtext img {
    padding: 0 20px 0 0;
  }
}
@media screen and (min-width: 830px) {
  .conversion_title { padding-bottom: 80px; }
}
@media screen and (min-width: 961px) {
  .yellow_divider .left_col {
    font-size: 2.5rem;
  }
  .explanationtext p {
    font-size: 2.1rem;
  }
  .explanationtext img {
    max-width: none;
  }
}

/*
  Advanced A/B test extention -------------------------------------
*/
.service-abtest p,
.service-abtest ul {
  color: #363636;
  font-size: 1.2rem;
  line-height: 1.35em;
}
.service-abtest img {
  height: auto;
  max-width: 100%;
}
/* columns */
.service-abtest .cols {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
}
.service-abtest .col_one_third {
  box-sizing: border-box;
  width: 100%;
}
.service-abtest .col_two_thirds {
  box-sizing: border-box;
  width: 100%;
}
.service-abtest .col_one_third img,
.service-abtest .col_two_thirds img {
  display: block;
  margin: 0 auto;
}
.service-abtest .col_one_third:first-child { padding: 0 0 20px 0; }
.service-abtest .col_one_third:last-child { padding: 20px 0 0 0; }
@media screen and (min-width: 850px) {
  .service-abtest .col_one_third  { width: 40%; }
  .service-abtest .col_two_thirds { width: 60%; }
  .service-abtest .col_one_third:first-child  { padding: 0 30px 0 0; }
  .service-abtest .col_one_third:last-child   { padding: 0 0 0 30px; }
}


/* header */
.abtest-header {
  background-color: #54b0d4;
  padding: 100px 0 40px;
}

.heartland-header {
  background-color: #192B3B;
}

.heartland .subtitle {
  color: #fff;
}
.abtest-header .title {
  color: #102c3d;
  font-family: "ProximaNovaB";
  font-size: 3.5rem;
  line-height: 1em;
}
.abtest-header .subtitle {
  color: #102c3d;
}
.abtest-header p {
  color: #102c3d;
}
.abtest-header .image {
  display: block;
  margin: 0 auto;
}
@media screen and (min-width: 820px) {
  .abtest-header {
    padding: 150px 0 40px;
  }
  .abtest-header > .rowcon {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
  }
  .abtest-header .left {
    box-sizing: border-box;
    padding-right: 10px;
    width: 50%;
  }
  .abtest-header .image {
    height: auto;
    width: 50%;
  }
}
/* price shipping */
.price-shipping {
  padding: 60px 0;
}
.price-shipping .button-bottom {
  display: block;
  margin: 0 auto;
}
@media screen and (min-width: 850px) {
  .price-shipping .button-bottom {
    display: inline-block;
    margin: 0;
  }
}
/* Data you need */
.data-you-need {
  background-color: #363636;
  color: #fff;
}
.data-you-need .cols {
  align-items: flex-end;
}
.data-you-need .sectitle,
.data-you-need p {
  color: #fff;
}
.data-you-need .text {
  padding: 60px 0;
}

@media screen and (min-width: 870px) {
  .data-you-need > .rowcon {
    background: url(../img/ab-test-data.png) bottom right no-repeat;
    background-size: 435px;
  }
  .data-you-need .text {
    width: 50%;
    margin-right: 50%;
  }
}
@media screen and (min-width: 1100px) {
  .data-you-need > .rowcon {
    background-size: auto;
  }
}
/* Flawed Methods */
.flawed-methods {
  padding: 60px 0;
}
/* How is AB Testing Extention different */
.extension-different {
  background-color: #fcc23d;
  padding: 50px 0;
}
.extension-different .left {
  width: 100%;
}
.extension-different .right {
  display: none;
}
@media screen and (min-width: 780px) {
  .extension-different .cols {
    flex-wrap: nowrap;
  }
  .extension-different .left {
    box-sizing: border-box;
    padding-right: 90px;
    width: calc(100% - 276px);
  }
  .extension-different .right {
    display: block;
    width: 276px;
  }
  
}

/* Test & Learn */
.test-learn {
  padding: 40px 0 0;
}
.test-learn > .rowcon {
  padding-bottom: 20px;
}
@media screen and (min-width: 850px) {
  .test-learn .col_one_third { display: none; }
  .test-learn { padding-bottom: 60px; }

  .test-learn > .rowcon {
    background: url(../img/ab-test-test-learn.jpg) right bottom no-repeat;
    background-size: 400px;
  }
  .abtestexample{
    width: 50%;
  }
}
@media screen and (min-width: 1100px) {
  .test-learn { padding-top: 80px; }
  .test-learn > .rowcon {
    background-size: auto;
  }
}
/* What test */
.what-test .intro {
  padding-bottom: 60px;
}
.what-test .intro .col_one_third {
  text-align: center;
  padding-bottom: 20px;
}
.what-test .revenue {
  padding-bottom: 80px;
  text-align: center;
}
.what-test .revenue h2 {
  font-family: "ProximaNovaB";
}
.what-test .images {
  margin: 40px auto 0;
}
@media screen and (min-width: 850px) {
  .what-test .intro .col_one_third  {
    width: 35%;
    padding-right: 0;
  }
  .what-test .intro .col_two_thirds {
    padding-left: 20px;
    width: 65%;
  }
}
@media screen and (min-width: 650px) {
  .what-test .images {
    display: flex;
    justify-content: space-between;
  }
}

/* How to get the code */
.how-to-code .cols {
  align-items: center;
  background-color: #31b7e7;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  margin: 0 -20px 80px;
  padding: 40px 20px;
}
.how-to-code .sectitle {
  color: #fff;
}
.how-to-code p {
  color: #fff;
}
.how-to-code .col_one_third {
  margin-top: 20px;
  order: 2;
  text-align: center;
}
.how-to-code .button-bottom {
  width: 100%;
}
@media screen and (min-width: 850px) {
  .how-to-code .cols { padding: 40px 30px 20px; }
  .how-to-code .col_one_third {
    margin-top: 0;
    order: 0;
  }
  .how-to-code .col_two_thirds { padding-left: 50px; }
  .how-to-code .button-bottom {
    display: inline-block;
    padding-left: 50px;
    padding-right: 50px;
    width: auto;
  }
}

/* Migration Service */
.migration h1,
.migration h2,
.migration h3,
.migration h4,
.migration h5 {
  font-family: 'Montserrat', sans-serif;
}

.migration p a {
      color: #077db2;
    font-weight: bold;
} 

.migration h1, .migration h2 {
  font-weight: 600;
}

.migration h2 {
    font-size: 30px;
}

.migration h3 {
    font-size: 23px;
    text-transform: uppercase;
}

.plus {
  color: #147fb4;
}

.migration .home-magento-award {
  margin-top: 92px;
}

.migration .home-magento-award .content {
   padding: 68px 20px;
}

@media screen and (max-width: 960px) {
 .migration .home-magento-award {
  margin-top: 63px;
} 
}
@media screen and (max-width: 780px) {

  .migration h2 {
    font-size: 24px;
  }

  .migration p {
    text-align: left;
    font-size: 1.1rem;
  }
  
}

/* main section */
.main-section {
  background-color: #09141f!important;
  padding: 126px 0 100px;
      background: url(../img/home_award_bck-v1.png) no-repeat;
    background-position: bottom center;
    min-height: 367px;
    
}

.main-section h2,
.main-section p {
  color: #fff;
}

.main-section h2 {
  margin-top: 8px;
}

.col_one_half, 
.col_two_half  {
  width: 50%;
}

@media screen and (max-width: 780px) {

  .col_one_half, 
  .col_two_half  {
    width: 100%;
    margin-bottom: 100px;
  }

  .col_one_half p, 
  .col_two_half p  {
    padding: 0 30px!important;
  }

  .main-section {
    padding: 126px 0 100px;
    background: url(../img/home_award_bck_mobile.png) no-repeat;
    background-position: bottom right;
    background-color: #09141f!important;
    height: unset;
  }

  
a.button-plain {
  font-size: 14px;
  padding: 10px 15px!important;
}

.main-section p {
  padding: 0 30px 0 0!important;
}

.main-section h2 {
  margin-top: 0!important;
}
 
}

a.button-plain {
  border-radius: 20px;
  background: #fec308;
  box-shadow: none;
  border: none;
  color: #000;
  margin: 0;
  padding: 10px 30px;
  font-family: "ProximaNovaB", sans-serif;
  letter-spacing: 1px;
  margin-top: 40px;
  transition: all 0.5s;
  text-decoration: none
}

a.button-plain:hover {
  background: #fff;
  transition: all 0.5s;
      box-shadow: 0px 0px 20px #00000050;
}

/* second section */

.second-section {
  padding: 100px 0;
}

.second-section h2, .second-section h3, .second-section p  {
  text-align: center;
  color: #000;
}

.countdown p.title01 {
  font-size: 16px;
  letter-spacing: 1px;
  color: #000;
  font-family: 'Montserrat', sans-serif;
  text-align: center;
  text-transform: uppercase;
}

#clock {
  display: flex;
  justify-content: space-between;
  margin: 40px auto 100px auto;
  max-width: 800px;
  text-align: center;
}

#clock .item {
  color: #147fb4;
  width: 25%;
  border-right: 1px solid black;

}

/* third section */

.third-section {
  padding: 80px 0;
  background: #0f1e2d;
}

.third-section .rowcon {
  max-width: 960px;
}

.third-section h2 {
  text-align: center;
  color: #147fb4;
}

.third-section h3, .third-section p  {
  text-align: center;
  color: #fff;
}


/* fourth section */

.fourth-section {
  padding: 80px 0;
  background: #ffcb00;
}

.fourth-section a.button-plain {
  border-radius: 20px;
  background: #147fb4;
  box-shadow: none;
  border: none;
  color: #fff;
  margin: 0;
  padding: 10px 30px;
  font-family: "ProximaNovaB", sans-serif;
  letter-spacing: 1px;
  margin-top: 40px;
   transition: all 0.5s;
  display: block;
}

.fourth-section a.button-plain:hover {
  background: #0f1e2d;
  transition: all 0.5s;
  color: #fff;
 
}

.third-section .rowcon {
  max-width: 960px;
}

.third-section h2 {
  text-align: center;
  color: #147fb4;
}

.fourth-section p  {
  text-align: center;
}

@media screen and (max-width: 780px) {

  .third-section p  {
    text-align: left;
    font-size: 1.1rem;
  }
  .third-section h2 {
  font-size: 24px;
}
  
}

/* Fifth section */

.fifth-section {
  margin-bottom: 100px;
}
.fifth-section .col_one_half, .fifth-section .col_two_half {
 
}
.fifth-section img {
  text-align: left;
}
.fifth-section .col_one_half p {
  padding-right: 50px;
}

.fifth-section .col_two_half p{
   padding-left: 50px;
}

.fifth-section p {
  text-align: left;
}

.cols .top {
  align-items: top!important;
}

@media screen and (max-width: 780px) {

  .col_one_half, 
  .col_two_half  {
    width: 100%;
  }

  .col_one_half p, 
  .col_two_half p  {
    padding: 0;
  }

  .fifth-section {
  margin-bottom: 0px;
}
 
}

/* Sixth section */

.sixth-section {
  padding-top: 120px;
  padding-bottom: 100px;
  background: #0f1e2d;
}

.fifth-section img {
  text-align: left;
}


.sixth-section p {
  padding: 20px 40px;
  color: #fff;
  text-align: justify;
}

.sixth-section .yellow {
  color: #ffcb00;
}

.sixth-section .corp {
  color: #147fb4;
}


.cols .top {
  align-items: top!important;
}

/* SEVENTH SECTION */

.seventh-section {
  padding: 150px 0;
  background: #000;
   background: url(../img/keyboard-bck.jpg) no-repeat bottom right #0a3e5a;
     background-size: cover;
    background-position: center;
  }


/* HEARTHLAND LANDING PAGE */

.heartland-integration .intro {
  padding-bottom: 0px;

}

.heartland-integration rowcon {
  max-width: 1200px;
}

.top-logos img{
  width: 100%;
  max-width: 960px;
}

.heartland-second .revenue, .heartland-third .revenue {
  padding-bottom: 0px!important;
}

.heartland-header {
  height: 450px;
  background-color: #192B3B; 
  color: #fff;
  
  background: linear-gradient(#192B3B 93%, #fff 10%);
  background
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding: 30px 0 ;
margin-bottom: 20px;

}


.heartland-header .rowcon {
  max-width: 1200px;
}

.transparent-button {
  background-color: transparent; /* Fondo transparente */
  color: #fff; /* Texto en blanco */
  border: 2px solid #fff; /* Borde blanco */
  border-radius: 50px; /* Borde redondeado */
  padding: 10px 20px; /* Espaciado interno del botón */
  font-size: 20px; /* Tamaño de fuente */
  width: 220px;
  height: 60px;
  cursor: pointer;

}

.transparent-button:hover {
  background-color: rgba(255, 255, 255, 0.1); 
}

.heartland-header{
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #192B3B;
}
.heartland-header .left {
  position: relative;
  padding: 0 20px;
}
@media screen and (max-width: 980px){

  .top-logos {
    margin-top: 80px;
  }

  .heartland-header .image {
    width: 90%!important;
  }
  .heartland-header > .rowcon {
    flex-direction: column;
  }

  .heartland-header::before {
    background-image: none!important;
  }

  .heartland-header .left {
    width:  100%!important;
    text-align: center;
    margin-bottom: 0!important;
    padding: 0;
  }
  .heartland-header .title, .heartland-header p {
    text-align: center;
    max-width: 100%!important;
  }
}

@media screen and (min-width: 981px){
  .heartland-header > .rowcon {
    flex-direction: row;
  }

  .heartland-header::before {
    content: "";
    position: absolute;
    top: -4px;
    right: 0;
    width: 80%; 
    height: 80%; 
    background-image: url('../img/circle-background.svg')!important; 
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top right;
  }

  .heartland-header >.left {
    width: 100%;
  }
}
.heartland-header .image {z-index:200}

.heartland-header::before {
  content: "";
  position: absolute;
  top: -4px;
  right: 0;
  width: 80%; 
  height: 80%; 
  background-image: url('../img/circle-background.svg'); 
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top right;
}

.heartland-header .left {
width: 47%; 
  margin-bottom: 100px;
  z-index:300;
} 

.heartland-header .image {
padding-top: 80px;
width: 53%;  
} 

.heartland-header .title, .heartland-header p,
.heartland-fourth h2, .heartland-cta h2, .heartland-fourth ul{
  color: #fff;
  max-width: 500px;
}

@media screen and (max-width: 980px){
.heartland-fourth ul {
  max-width: 100%;
}

.heartland-fourth .col_one_half {
  margin-bottom: 0;
}
}

p {
  font-size: 1.50rem;
}



/* Second Section */
.heartland-second, .heartland-third, .heartland-fourth  {

  padding: 50px 0;
}

.heartland-second {
  padding-top: 30px;
}

.heartland-third {
  background: #ccc
}

.heartland-fourth {
  background: #192B3B
}

.heartland-fourth h2, .heartland-cta h2, .heartland-cta p {
  text-align: center;
  color: #fff;
}

.heartland-fourth .cols {
      align-items: flex-start;
}
.heartland-second .sectitle, .heartland-third .sectitle, .heartland-fourth .sectitle, .heartland-cta .sectitle {
  max-width: 730px;
  margin: 0 auto;
  margin-bottom: 2rem
}

.heartland-second p, .heartland-third p {
  max-width: 730px;
  margin: 0 auto;
  font-size: 20px;
}



.outer-list {
  list-style-type: none; 
  padding: 0;
  padding-right: 20px;
  margin:0;
}

.outer-list li {
  margin-bottom: 2rem;
}

.inner-list li {
  margin-bottom: 1rem;
}

.inner-list {
  list-style-type: disc; 
  padding-left: 20px; 
  margin-top: 1rem;
}


.video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; 
  overflow: hidden;
  border-radius: 20px; 
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); 
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 20px;
}

.custom-play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px; 
  height: 80px;
  background-image: url('img/play-button.png'); 
  background-size: cover;
  cursor: pointer;
  z-index:100;
   transition: all 0.1s; 
}

.custom-play-button:hover {
  transition: all 0.1s; 
  width: 90px;
  height: 90px;
}

.heartland-prices {
  padding: 50px 0 10px;
}

.heartland-prices h2 {text-align:center;
margin-bottom: 2rem;}

.heartland-prices .cols {
 text-align: center;
 align-items: flex-start;
 justify-content: space-between;
 
}

.heartland-prices .col-price {

 display: inline-block;
 height: 450px;
 padding: 10px;
 border: solid 1px #ccc;
 width: 22%;
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 


}

@media screen and (max-width:1150px){
  .heartland-header .title {
    font-size: 2.5rem;
  }
}

@media screen and (max-width:980px){
  .heartland-prices {
    padding: 50px 0 10px;
  }
 .heartland-prices .col-price {
width: 45%;
margin-bottom: 2rem;
}






.heartland-prices {
  padding-bottom: 0!important;
}
 
}

@media screen and (max-width:768px){
  .heartland-prices .col-price {
 width: 100%;
 height: auto;
 }

 .heartland-header .title {
  font-size: 2rem;
}


.digital-marketing .heartland .wrapper {
  height: auto!important;
  padding: 2rem!important;
}

.digital-marketing .title,
.digital-marketing .text {
  text-align: center!important;
}

.expertise .wrapper {
  height: auto!important;
}

.expertise-box h3 {font-size: 14px!important;}

.marketing-expertise .expertise-row {
  flex-direction: column-reverse;
}

.marketing-expertise .last {
  flex-direction: column!important;
}

.marketing-expertise .expertise-row .half {
  width: 100%!important;
  height: auto;
}
.marketing-expertise .expertise-row .half h2 {
  text-align: center;

}

.plans_pricing-row {
  flex-direction: column!important;
}

}


.heartland-prices .name {
 font-family: "ProximaNovaB", "ProximaNova", sans-serif;
 font-weight: bold;
 font-size: 24px;
 display: block;
 margin-top: 1rem;
 margin-bottom: 1rem;
 
}

.heartland-prices .price {
  font-family: "ProximaNovaB", "ProximaNova", sans-serif;
 font-weight: 900;
 font-size: 32px;
 display: block;
 color: #067eb3;
}

.heartland-prices .permonth {
 
 font-size: 14px;
 display: block;
 color: #747474;
 font-weight: 100;
 margin: 1.5rem 0;
}

.heartland-prices hr {
 
width: 30%;
 border: none; 
 border-top: 1px solid #747474; 
}

.heartland-prices p {
 
 font-size: 1rem;
}


.top-logos {
  height: 100px;
  display: flex;
  margin-top: 92px;
      justify-content: center;
  align-items: center;
}

.heartland-cta {
  background-color: #192B3B;
  height: auto;
  display: flex;
  margin-top: 50px;
      justify-content: center;
  align-items: center;
  padding: 50px 0;
}

.heartland-cta button {width: 400px;}

#SOI_klaviyo-integration {
  width: 70vw !important;
  border: none;
  border-radius: 20px;
  max-width: 1080px !important;
}

/**
* Klaviyo integrations 
*
**/

.integrations-cta {
  background-color: #F8CC46;
  border: 2px solid #F8CC46;
  box-shadow: none;
  color: #313131;
  display: inline-block;
  font-family: var(--font-normal);
  font-size: 18px;
  font-weight: bold;
  padding: 15px 60px;
  transition-duration: .4s;
}
.integrations-cta:hover {
  background-color: #fff;
}

@media (min-width: 768px) {
  .integrations-cta {
    font-size: 1.4375rem;
    padding: 15px 60px;
  }
}

.klaviyo-integrations {
  margin-top: var(--toolbar-height-mobile);
}

.klaviyo-integrations .integrations-cta {
  margin-top: 10px;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
}
@media (min-width: 768px) {
  .klaviyo-integrations .integrations-cta {
    width: auto;
  }
}


@media (min-width: 768px) {
  .klaviyo-integrations .hero .col-left  {
    width: 45%;
  }
  .klaviyo-integrations .hero .col-right  {
    width: 55%;
  }
}


.klaviyo-integrations .hero {
  background-color: #F4F4F5;
  padding
}
.klaviyo-integrations .heartland {
  background-color: #1C2B3A;
}

.klaviyo-integrations .wrapper {
  box-sizing: border-box;
  padding: 30px 20px;
  width: 100%;
}

.digital-marketing .wrapper {
  padding-top: 0;

}

.klaviyo-integrations .col_left,
.klaviyo-integrations .col_right {
  box-sizing: border-box;
}


.klaviyo-integrations img {
  height: auto;
  max-width: 100%;
}

.klaviyo-integrations .title {
  color: var(--color-darkest-blue);
  font-family: var(--font-bold);
  font-size: 2rem;
  line-height: normal;
}
.klaviyo-integrations .title.small {
  font-size: 2.25rem;
}

.klaviyo-integrations .text {
  font-size: 1.25rem;
  line-height: 1.35em;
}

.klaviyo-integrations .hero .col_right {
  padding-top: 60px;
}
.klaviyo-integrations .hero .text {
  font-size: 20px;
  font-weight: bold;
}

.klaviyo-integrations .heartland {
  padding-bottom: 20px;
  padding-top: 20px;
}

.klaviyo-integrations .heartland .col_left {
  padding-bottom: 40px;
}
.klaviyo-integrations .heartland .title {
  color: #fff;
}
.klaviyo-integrations .heartland .text {
  color: #f1f1f1;
}
.klaviyo-integrations .hero img,
.klaviyo-integrations .heartland img {
  display: block;
  margin: 0 auto;
  max-width: 500px;
  width: 100%;
}

.klaviyo-integrations .winedirect .col_right {
  padding-top: 30px;
}

.klaviyo-integrations .wd_logos {
  align-items: center;
  column-gap: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding-top: 20px;
}
.klaviyo-integrations .wd_logos img {
  mix-blend-mode: multiply;
  width: auto;
}
.klaviyo-integrations .wd_logos .rostate {
  max-width: 100px;
}
.klaviyo-integrations .wd_logos .rhall {
  max-width: 90px;
}
.klaviyo-integrations .wd_logos .cellars {
  max-width: 80px;
}
.klaviyo-integrations .wd_logos .wolffer {
  max-width: 110px;
}
.klaviyo-integrations .wd_logos .jl {
  max-width: 90px;
}
.klaviyo-integrations .wd_logos .plumpjack {
  max-width: 90px;
}


.klaviyo-integrations .providers {
  background-color: #EEEEEE;
  padding: 30px 0;
}

.klaviyo-integrations .providers .logos {
  align-items: center;
  box-sizing: border-box;
  column-gap: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding-bottom: 0;
  padding-top: 0;
  width: 100%;
}
.klaviyo-integrations .providers .logo.netsuite {
  max-height: 18.75vw;
}
.klaviyo-integrations .providers .logo.salesforce {
  max-height: 12.5vw;
}
.klaviyo-integrations .providers .logo.rics {
  max-height: 9.375vw;
}
.klaviyo-integrations .providers .col_left,
.klaviyo-integrations .providers .col_right {
  padding: 10px 20px;
}
.klaviyo-integrations .providers .text {
  font-size: 1.25rem;
  line-height: 1.35rem;
  text-align: center;
}

.klaviyo-integrations .providers h3 {
  font-size: 1.8rem;

  text-align: center;
}
.klaviyo-integrations .providers .col_right {
  background-color: #4f4f4f;
  border-radius: 3px;
  padding-bottom: 30px;
}
.klaviyo-integrations .providers .col_right .text {
  color: #fff;
}
.klaviyo-integrations .providers .col_right .text.highlight {
  font-size: 20px;
  font-weight: bold;
}

.klaviyo-integrations .heartland-cta {
  margin-top: 0;
}
.klaviyo-integrations .heartland-cta .wrapper {
  flex-direction: column;
}
.klaviyo-integrations .heartland-cta .wrapper > * {
  width: 100%;
}

@media (min-width: 768px) {
  .klaviyo-integrations .wrapper {
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    max-width: 1080px;
    align-items: center;
  }
  .klaviyo-integrations .col_left,
  .klaviyo-integrations .col_right {
    width: 50%;
  }
  .klaviyo-integrations .cont_bottom {
    width: 100%;
  }
  .klaviyo-integrations .title {
    font-size: 2.625rem;
  }

  .klaviyo-integrations .heartland,
  .klaviyo-integrations .winedirect {
    padding-bottom: 80px;
    padding-top: 80px;
  }

  .klaviyo-integrations .hero .col_right {
    padding-top: 0;
  }
  .klaviyo-integrations .hero .text {
    font-size: 1.75rem;
    font-weight: bold;
  }

  .digital-marketing .hero .text {
    font-size: 36px;
    line-height: 46px;
    margin-top: 50px;
    margin-bottom: 30px;
  }

  .klaviyo-integrations .heartland .col_left {
    padding-bottom: 0;
    padding-right: 50px;
  }
  .klaviyo-integrations .heartland .col_right {
    padding-left: 20px;
    padding-right: 50px;
  }

  .klaviyo-integrations .winedirect .wrapper {
    align-items: flex-start;
  }
  .klaviyo-integrations .winedirect .col_left {
    width: 100%;
  }
  .klaviyo-integrations .winedirect .col_right {
    width: 100%;
  }

  .klaviyo-integrations .wd_logos {
    padding-top: 40px;
  }

  .klaviyo-integrations .providers {
    padding: 50px 0;
  }
  .klaviyo-integrations .providers .wrapper {
    justify-content: space-between;
  }
  .klaviyo-integrations .providers .col_left,
  .klaviyo-integrations .providers .col_right {
    width: 49%;
  }
  .klaviyo-integrations .providers .logos {
    column-gap: 50px;
    margin-bottom: 20px;
  }
  .klaviyo-integrations .providers .logo.salesforce {
    max-height: 80px;
  }
  .klaviyo-integrations .providers .integrations-cta {
    box-sizing: border-box;
    display: block;
    margin: 40px auto 0;
    max-width: 245px;
  }

}

@media (min-width: 850px) {
  .klaviyo-integrations .winedirect .col_left {
    padding-right: 60px;
    width: 50%;
  }
  .klaviyo-integrations .winedirect .col_right {
    padding-top: 0;
    width: 50%;
  }

}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .digital-marketing .hero .col_left {
    max-width: 70%;
  }
}

@media (min-width: 1024px) {
  .klaviyo-integrations .hero {
    padding-bottom: 20px;
    padding-top: 20px;
  }

  .klaviyo-integrations .hero .col_left {
    padding-right: 20px;
  }

  .klaviyo-integrations .winedirect {
    background-image:  url(../img/klaviyo-integrations/bw-background.jpg);
    background-position: left center;
    background-repeat: no-repeat;
  }
  .klaviyo-integrations .winedirect .col_left{
    padding-right: 80px;
  }
  .klaviyo-integrations .wd_logos {
    padding-top: 100px;
  }
  .klaviyo-integrations .providers .logos {
    column-gap: 70px;
  }


  
}

/* process image rules */
.klaviyo-integrations .img-desktop {
  display: none;
}

.klaviyo-integrations .img-mobile {
  display: block;
}

@media screen and (max-width:767px) {
  .process h1 {text-align: center; margin-bottom: 1rem}
 
}
@media screen and (min-width: 768px) {
   .klaviyo-integrations .img-desktop {
      display: block;
  }

  .klaviyo-integrations .img-mobile {
      display: none;
  }
}



/* Klaviyo Marketing Packages Page */

@media screen and (max-width: 1024px) {
  .digital-marketing .wrapper {
    flex-direction: column;
  }
  .digital-marketing .hero .col_left, .digital-marketing .hero .col_right {
    text-align: center;
    width: 100%!important;
  
  }

  .digital-marketing .hero .col_right img {
    left: unset!important;

  }
}


.klaviyo-integrations .integrations_made .wrapper {
  gap: 30px; 
  align-items: flex-start;
  align-items: stretch; 
}

.klaviyo-integrations .integrations_made .col_left,
.klaviyo-integrations .integrations_made .col_right {
    flex: 1; /* Ambas columnas ocupan el mismo espacio */
    padding: 1rem;
    background-color: lightgray; /* Solo para visualización */
    border-radius: 5px;
}


.klaviyo-integrations .integrations_made .col_right {
  background: linear-gradient(to bottom, rgba(200, 200, 200, 1) 0%, rgba(200, 200, 200, 0) 100%);
}


.klaviyo-integrations .integrations_made .col_left {
  margin-bottom: 2rem;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
}

.klaviyo-integrations .integrations_made .col_left img {
  background-color: #ffffff;
}

.klaviyo-integrations .integrations_made .col_left {
background-color: #fff;
border-radius: 5px;
padding: 1rem;
}

.klaviyo-integrations .integrations_made ul li {
  font-size: 1.1em;
}
.klaviyo-integrations .integrations_made .col_right li {
  line-height: 2.3rem;
}


.klaviyo-integrations .integrations_made {
  background-color: #EEEEEE;
  padding-bottom: 0px;
}

.integrations-list {
  list-style: none;
  padding: 0;
  line-height: 1.35em;
}

.integrations-list li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 10px; /* Espacio entre elementos */
}

.integrations-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px; 
  width: 16px;
  height: 16px;
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6.44 4.61"><path fill="%23e16226" d="M2.25,4.61c-.05,0-.11-.01-.16-.03-.05-.02-.1-.05-.13-.09l-1.96-1.96.59-.59,1.66,1.66L5.86,0l.59.59-3.9,3.9s-.08.07-.13.09c-.05.02-.1.03-.16.03Z"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
}

.col_right .integrations-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px; 
  width: 16px;
  height: 16px;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10.48 10.48"><circle fill="%2315498d" cx="5.24" cy="5.24" r="5.24"/><path fill="%23fff" d="M4.41,7.15s-.09,0-.14-.03c-.04-.02-.08-.04-.12-.08l-1.68-1.68.51-.51,1.43,1.43,3.1-3.1.51.51-3.35,3.35s-.07.06-.12.08c-.04.02-.09.03-.14.03Z"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
}


@media screen and (min-width: 1025px) {
  .digital-marketing .wrapper {
    height: 80vh;
    max-width: 1400px;
  }

  .digital-marketing .hero .col_left {
    width: 45%
  }
  .digital-marketing .hero .col_right {
    width: 55%
  }

  .digital-marketing .hero .image {
    max-width: 100% !important;
  }


}


  
    .digital-marketing .hero {
      padding-top: 0!important;
    }
  
    .digital-marketing h1 {
      font-size: 52px;
      line-height: 68px;
      color: #283340;
    }

 

@media screen and (max-width: 980px) {
  .digital-marketing .hero .col_right .image {
    display: block;
  }
  
}


  
    .digital-marketing .packages-container {
      max-width: 1180px;
      margin: auto;
      margin-top: 80px;
      display: flex;
      flex-wrap: wrap; 
      justify-content: space-between;
      row-gap: 40px; 
  }

  @media screen and (max-width: 1200px) {
    .packages-container {
     padding: 0 30px;
     padding-bottom: 4rem;
    }

    .packages-container .box {
        width: calc(50% - 20px)!important;
     }
  }

  @media screen and (max-width: 680px) {
    .packages-container .box {
     width: 100%!important;

    }
  }
  
  
  
  .packages-container .box {
    background-color: #1C2B3A;
    border-radius: 20px;
    width: calc(50% - 40px);
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    text-align: left;
    color: #fff;
    padding: 20px 35px;
    transition: background-color 0.5s ease, box-shadow 0.5s ease;
  }

  .packages-container .box:hover {
    background-color: #fff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: background-color 0.7s ease, box-shadow 0.7s ease;
    cursor: pointer;
  }

  .packages-container .box:hover a {
    background-color: #0E8AAE;
    color: #fff;
  }

  .packages-container .box:hover h2, .packages-container .box:hover p {
    color: #1C2B3A;
  }
  
  .digital-marketing .box h2 {
    font-family: "ProximaNovaB", sans-serif;
    color: #fff;
    font-size: 20px;
  }
  
  .digital-marketing .box p {
    color: #fff;
    font-size: 16px;
  }
  
  .digital-marketing .box a {
    margin-top: 20px;
      float: right;
      background-color: #fff;
      color: #1c2b3a;
      width: 170px;
      text-align: center;
      border-radius: 20px;
      padding: 10px 20px;
      font-weight: 800;
  }
  .digital-marketing .heartland  {padding:0!important;}
  
  .digital-marketing .heartland .col_left,
  .digital-marketing .heartland .col_right,
   {
  width: 50%!important;
  }


  @media (max-width: 768px) {
    .digital-marketing .hero .col_left {
      width: 100%!important;
      padding-top: 2rem!important;
    }
    .digital-marketing .hero .col_left h1 {
      font-size: 32px;
      line-height: 36px;
      text-align:center;
    }
    .digital-marketing .hero .col_left p {
      text-align:center;
    }

    .digital-marketing .hero .text {
      font-size: 24px!important;
      line-height: 36px!important;
      margin-top: 10px!important;
      margin-bottom: 20px!important;
  }

    .digital-marketing .hero .image {
      left: 0!important;
    }

    .digital-marketing .hero .col_right  {
      padding-top: 10px!important;
  
    }
  }
  
  @media (max-width: 1400px) {
  .digital-marketing h1 {
    font-size: 38px;
    line-height: 48px;
  }

  .digital-marketing .hero .text {
    font-size: 28px;
    line-height: 39px;
    margin-top: 30px;
    margin-bottom: 30px;
}

 
}



/* Marketing expertise */

.expertise {
  background-color: #e4e4e4;
}

@media screen and (min-width: 768px) {
  .expertise .wrapper {
    padding-top: 2rem;
  }
}

.marketing-expertise {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.marketing-expertise h2,
.plans-pricing h2 {
  font-size:42px;
  display:block;
  line-height: 1;
  color: #1c2b3a;
}
.expertise-row {
  display: flex;
  gap: 30px;
}
.expertise-box {
  background-color: #1c2b3a; 
  border-radius: 30px;
  height: 250px;
  flex: 1;
  padding: 30px;
}

.expertise-icon {
 
  margin-bottom: 20px;
}

@media screen and (max-width: 768px) {
  .expertise-icon {
    max-width: 50%!important;
  }
}

.expertise-box h3 {
  font-size: 24px;
  color: #fff;
}
.half {
  flex: 0.5;
  width: 50%; gap: 20px; display: flex;

}
.full {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f0f0f0;
  border-radius: 30px;
}
.nested-row {
  display: flex;
  gap: 30px;
}

/* Plans and Pricing */

.plans-pricing {
  background-color: #fff;
  margin-top: 4rem;
}

.plans-pricing .wrapper {
  max-width: 1600px;
  height: auto;
  justify-content: center;
}


.plans_pricing-row {
  width: 100%;
  display: flex;
  gap: 20px;

}

.plans-pricing .slick-track {
  width: 100%;
}

.plans_pricing-box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: #fff; 
  border-radius: 30px;
  flex: 1;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4); 
  transition: all 0.5s ease, box-shadow 0.5s ease; 
  padding: 20px;
}

.slick-initialized .slick-slide {
  display: flex!important;
}

.plans-pricing h2 {
 text-align: center;
}

.plans-pricing h3 {
  font-family: "ProximaNovaB", sans-serif;
  font-size:24px;
  font-weight: 800;
  color: #1C2B3A;
}

.plans-pricing h4 {
  font-family: "ProximaNovaB", sans-serif;
  color: #6F6C90;
  font-size: 18px;
}

.plans-pricing p {
  font-size: 18px;
  line-height: 20px;
  color: #6F6C90;
}

.plans-pricing .price {
  font-family: "ProximaNovaB", sans-serif;
  font-size: 46px;
  color: #1C2B3A;
}

.plans-pricing .price span {
  font-size: 22px;
}

@media screen and (max-width: 768px) {
  .plans-pricing .price {
    font-size: 28px;
  }

  .plans-pricing .price span {
    font-size: 18px;
  }

  .plans-pricing h3 {
    font-size: 18px;
  }

  .plans-pricing .bullet-features li {
    font-size: 14px;
  }
}



.bullet-features {
  list-style-type: none; /* Remove default bullets */
  padding-left: 0; /* Remove default padding */
  margin-top: 20px;
}

.bullet-features li {
  display: flex;
  align-items: flex-start;
  margin-bottom: 10px;
  font-size: 18px;
  line-height: 20px;
  color: #1C2B3A;
  margin-bottom: 20px;

  
}



.bullet-features li::before {
  content: ''; /* Add empty content to use background */
  display: inline-block; /* Make it an inline block element */
  min-width: 20px; /* Set fixed width of custom bullet */
  min-height: 20px; /* Set fixed height of custom bullet */
  margin-right: 8px; /* Space between bullet and text */
  background: url('/img/klaviyo-integrations/check-circle.svg') no-repeat center center;
  background-size: contain; /* Adjust background size to fit */
  flex-shrink: 0; /* Prevent flex from resizing bullet icon */
}

.plans-pricing .get-started-button {
  font-family: 'ProximaNovaB';
  display: block;
  margin-top: 30px;
  background-color: #1C2B3A;
  color: #fff;
  width: 100%;
  height: 60px;
  text-align: center;
  border-radius: 30px;
  padding: 10px 20px;
  font-weight: 800;
  line-height: 40px;
  font-size: 18px;
  letter-spacing: 1px;
}

@media screen and (min-width: 769px) {
  .plans_pricing-box:hover {
    background-color: #1c2b3a!important; 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4); 
    transition: all 0.5s ease, box-shadow 0.5s ease; 
    margin-top: -20px;
    cursor: pointer;
  }

  .plans_pricing-box:hover h3,
  .plans_pricing-box:hover p,
  .plans_pricing-box:hover .price,
  .plans_pricing-box:hover li,
  .plans-pricing-box:hover .terms-conditions {
    color: #fff!important;
  }

  .plans_pricing-box:hover .bullet-features li::before {
    background: url('/img/klaviyo-integrations/check-circle-inverted.svg') no-repeat center center;
    border-radius: 50%;
  }

  .plans_pricing-box:hover .get-started-button {
    color: #1C2B3A;
    background-color: #fff;
  }
}

.plans-pricing a.terms-conditions {
  display: block;
  text-align: center;
  color: #067eb3;
  margin: -12px 0 30px;
  font-size: 14px;
}

.plans-pricing .slick-slide {
  margin: 20px 10px;
}

.plans-pricing .slick-arrow {
  top: -30px;
}

.plans-pricing .slick-next {
  right: 0!important;
  z-index:9999;
  margin-top: 2px;
}

.plans-pricing .slick-prev {
  left: 0!important;
  z-index:9999;
}

.plans-pricing .slick-next:before, .plans-pricing .slick-prev:before {
  color: #1c2b3a!important;
  font-size: 30px!important;
}

.terms-conditions-row {
  margin: 2rem 0 2rem;
}