/** Shopify CDN: Minification failed

Line 7:0 Unexpected "$"
Line 428:4 "marin-left" is not a known CSS property

**/
$body-font: ;
$body-weight: ;
$header-font: ;
$header-weight: ;
$button-font: ;
$button-weight: ;

$background-light: #fafafa;
$grey-rule: #979797;
$grey: #f3f5f8;
#C3DA4F: #c3d939;
$error-color: #e13333;
$success-color: #5bef6b;
$black: #000;
#fff: #fff;
$light-grey: #eeeeee;
$very-light-grey: #fafafa;
$dark-color: #4c4c4c;
$blue: #178cf9;
#182231: #182231;

$desktop-breakpoint: 1300px;
$tablet-breakpoint: 400px;

.section-container {
  width: 100vw;
}

.WhyEkmSection {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.WhyEkmSection__title {
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 600;
  line-height: 2;
  letter-spacing: 2px;
  margin-bottom: 12px;

  @media screen and (min-width: 1090px) {
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 24px;
  }
}

.WhyEkmSection__sub-title {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: normal;
  margin-bottom: 41px;
  width: 212px;
  text-align: center;

  @media screen and (min-width: 1090px) {
    font-size: 24px;
    margin-bottom: 48px;
    width: 560px;
  }
}

.WhyEkmSection__tiles-container {
  display: flex;
  flex-direction: column;
  margin-bottom: 113px;

  @media screen and (min-width: 1090px) {
    flex-direction: row;
  }
}

.WhyEkmSection__tile {
  width: 225px;
  min-height: 220px;
  text-align: center;

  @media screen and (min-width: 1090px) {
    margin: 0 32px;
  }
}


.WhyEkmSection__tile__icon {
  width: 42px;
  height: 42px;
  margin-bottom: 16px;

  @media screen and (min-width: 1090px) {
    margin-bottom: 24px;
  }
}

.WhyEkmSection__tile__title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: normal;
  margin-bottom: 8px;
  line-height: 25px;
}

.WhyEkmSection__tile__description {
  font-size: 16px;
  line-height: 25px;
}

.MeteringSolutionsSection {
  background-color: $grey;
  padding-top: 48px;
  display: flex;
  flex-direction: column; 
  align-items: center;
  text-align: center;

  @media screen and (min-width: 1216px) {
    background-color: #fff;
  }
}

.MeteringSolutionsSection__title {
  width: 325px;
  font-size: 24px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.33;
  letter-spacing: normal;
  color: #182231;
  margin-bottom: 40px;

  @media screen and (min-width: 1216px) {
    width: 488px;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.43;
    margin-bottom: 48px;
  }
}

.MeteringSolutionsSection__toggle-button-group {
  border-radius: 12px;
  border: 2px solid $blue;
  display: flex;
  width: 335px;
  height: 56px;
  margin-bottom: 29px;

  @media screen and (min-width: 1216px) {
    width: 867px;
    height: 61px;
    margin-bottom: 40px;
  }
}

.toggle-button {
  text-transform: uppercase;
  font-size: 12px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.33;
  height: 100%;
  width: 50%;
  letter-spacing: 1px;

  @media screen and (min-width: 1216px) {
    font-size: 18px;
  }
}

.active-button {
  background: $blue;
  color: #fff;
}

.left-radius {
  border-radius: 9px 0px 0px 9px;
  border: none;
}

.right-radius {
  border-radius: 0px 9px 9px 0px;
  border: none;
}

.MeteringSolutionsSection__meter-tiles-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 78px;

  @media screen and (min-width: 1216px) {
    background-color: $grey;
    width: 100%;
    max-width: 1344px;
    margin-bottom: 40px;
  }
}

.MeteringSolutionsSection__meter-tiles-container__sub-metering-group {
    width: 335px;
    background-color: #fff;
    padding: 24px 25px 32px 24px;
    margin-bottom: 24px;
    border-radius: 2px;
    display: flex;
    flex-direction: column;

  @media screen and (min-width: 1216px) {
    flex-direction: row;
    background-color: transparent;
    width: 1216px;
    align-items: center;
    position: relative;
    padding: 0;
    margin-bottom: 24px;
  }
}

.MeteringSolutionsSection__meter-tiles-container__car-charger-group {
  width: 335px;
  background-color: #fff;
  padding: 24px 25px 32px 24px;
  margin-bottom: 24px;
  border-radius: 2px;
  display: flex;
  flex-direction: column;

  @media screen and (min-width: 1216px) {
    flex-direction: row-reverse;
    background-color: transparent;
    width: 1216px;
    align-items: center;
    position: relative;
    right: 54px;
    padding: 0;
    margin-bottom: 68px;
  }
}

.MeteringSolutionsSection__meter-tiles-container__car-charger-group--green {
  background-color: #C3DA4F;

  @media screen and (min-width: 1216px) {
    flex-direction: row;
    width: 1216px;
    height: 442px;
    align-items: center;
    right: 0;
  }
}

.MeteringSolutionsSection__meter-tiles-container__car-charger-group__image {
  width: 286px;
  height: 214px;
  margin-bottom: 24px;

  @media screen and (min-width: 1216px) {
    width: 626px;
    height: 469px;
  }
}

.MeteringSolutionsSection__meter-tiles-container__car-charger-group__image--small {
  width: 286px;
  height: 214px;
  margin-bottom: 24px;

  @media screen and (min-width: 1216px) {
    width: 603px;
    height: 394px;
    margin-bottom: 0;
    margin-left: 27px;
  }
}

.MeteringSolutionsSection__meter-tiles-container__sub-metering-group__image {
  margin-bottom: 30px;
  background-color: $grey;
  width: 285px;
  height: 214px;

  @media screen and (min-width: 1216px) {
    background-color: transparent;
    width: 580px;
    height: 504px;
  }
}

.MeteringCard {
  text-align: left;
  width: 286px;

  @media screen and (min-width: 1216px) {
    background-color: #fff;  
    width: 541px;
    height: 304px;
    padding: 48px 61px 0 48px;
    position: relative;
    left: 88px;
  }
}

.MeteringCard--green {
  box-shadow: none;
  @media screen and (min-width: 1216px) {
    background-color: #C3DA4F;  
    left: 0;
  }
}

.MeteringCard--static {
  @media screen and (min-width: 1216px) {
    left: 0;
  }
}

.MeteringCard__card-title {
  width: 266px;
  font-size: 20px;
  font-weight: 600;
  color: #000000;
  margin-bottom: 12px;
  line-height: normal;

  @media screen and (min-width: 1216px) {
    font-size: 24px;
    width: 421px;
  }
}

.MeteringCard__card-line {
  display: none;

  @media screen and (min-width: 1216px) {
    display: block;
    margin-bottom: 25px;
    width: 64px;
    height: 2px;
    background-color: $black;
  }
}

.MeteringCard__grey-line {
  background-color: #dee3e9;
}

.MeteringCard__card-description {
  font-size: 16px;
  line-height: 1.56;

  @media screen and (min-width: 1216px) {
    font-size: 18px;
  }
}

.MeteringSolutionsSection__meter-tiles-container__bottom-section {
  background-color: transparent;
  width: 267px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 10px;

  @media screen and (min-width: 1216px) {
    background-color: #182231;
    width: 1216px;
    height: 531px;
    padding: 67px 121px;
    margin-bottom: 48px;
  }
}

.MeteringSolutionsSection__meter-tiles-container__bottom-section__inner-container {
  
  
  @media screen and (min-width: 1216px) {
    display: flex; 
    flex-direction: row; 
    justify-content: space-between;
    width: 100%;
  }
}

.MeteringSolutionsSection__meter-tiles-container__bottom-section__line {
  display: none;

  @media screen and (min-width: 1216px) {
    display: flex;
    background-color: #fff;
    width: 1px;
    height: 143px;
    border: 1px solid #fff;
    position: absolute; 
    margin-left: 320px;
    margin-top: 80px;
  }
}

.MeteringSolutionsSection__meter-tiles-container__bottom-section__line--farther-right {
  display: none;

  @media screen and (min-width: 1216px) {
    display: flex;
    background-color: #fff;
    width: 1px;
    height: 143px;
    border: 1px solid #fff;
    position: absolute; 
    margin-left: 660px;
    margin-top: 80px;
  }
}

.absolute-right {
  @media screen and (min-width: 1216px) {
    marin-left: 660px;
  }
}

.MeteringSolutionsSection__meter-tiles-container__bottom-section__title {
  width: 266px;
  height: 48px;
  font-size: 20px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  color: #182231;
  margin-bottom: 32px;
  margin-top: 24px;

  @media screen and (min-width: 1216px) {
    color: #fff;
    width: 412px;
    height: 58px;
    font-size: 24px;
  }
}

.MeteringSolutionsSection__meter-tiles-container__bottom-section__blue-card {
  width: 267px;
  height: 289px;
  border-radius: 10px;
  background-color: #182231;
  margin-bottom: 32px;
  text-align: center;
  display: flex;
  flex-direction: column; 
  align-items: center;
  padding-top: 26px;

  @media screen and (min-width: 1216px) {
    height: auto;
  }
}

.blue-card__icon {
  height: 30px;
  width: 30px;
  margin-bottom: 20px;
}

.blue-card__title {
  width: 153px;
  font-size: 18px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.44;
  letter-spacing: normal;
  color: #C3DA4F;
  margin-bottom: 16px;
}

.blue-card__description {
  width: 222px;
  height: 100px;
  font-size: 16px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.56;
  letter-spacing: normal;
  color: #fdfdfd;
}