/**
 * Main.css
 */

/**
 * Colors
 */

:root {
  --color-primary: hsl(145deg 69% 14%);
  --color-secondary: hsl(198.51deg 92.16% 60%);
  --color-accent-dark: hsl(230.68deg 54.5% 37.06%);
  --color-background-light: hsl(216deg 50% 96.08%);
  --color-foreground-light: hsl(0deg 4.88% 16.08%);
  --color-background-dark: hsl(216deg 50% 96.08%);
  --color-foreground-dark: hsl(240deg 49.47% 18.63%);
}


/**
 * Buttons
 */

#et-boc .et_pb_button {
  padding: 0.75rem 1.75rem !important;
}

/**
 * Menu
 */

/* Block scrolling when menu is opened */
.no-scroll {
  overflow: hidden;
  height: 100vh;
}

/* NOTE 2: Fix menu in tablet screens */

.et_pb_menu__logo {
  position: relative;
  margin-right: 8px !important;
}

.et_pb_menu .et_pb_menu__wrap {
  justify-content: flex-end;
}

.et_pb_menu .et_pb_menu__menu,
.et_pb_menu .et_pb_menu__menu > nav,
.et_pb_menu .et_pb_menu__menu > nav > ul {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.et-menu a {
  padding: 1rem 0.75rem !important;

  &:hover {
    opacity: 1;
  }
}

#page-container .menu-item.cta {
  background-color: #0b3d20;
  border-radius: 8px;
  font-weight: 700;
  padding-inline: 0.5rem !important;
  margin-left: 1.5rem !important;
  display: inline-block;

  &:hover {
    background: #082b17;
  }
}

.et_pb_menu_0_tb_header.et_pb_menu ul li.cta a {
    color: white !important;
}

/* Prevent scrolling when mobile menu is open using touch-action */
.mobile_nav.opened {
  touch-action: none;
}

/* ========================
   Header
======================== */

#page-container #et-boc .et_pb_section_0_tb_header {
  .sub-menu {
    --submenu-width: 330px;
    --anchor-width: 280px;
    border: none;
    background: var(--primary-color) !important;
    top: 4rem;
    width: var(--submenu-width);

    a {
      font-size: 0.9rem;
      text-shadow: none;
      color: white !important;
      width: var(--anchor-width);
    }
  }

  @media (max-width: 980px) {
    --menu-height: 109px;

    .et_mobile_menu {
      background: #E6E6DD !important;
      position: fixed !important;
      top: 109px !important;
      left: 50% !important;
      width: 100vw;
      height: calc(100dvh - var(--menu-height));
      transform: translatex(-50%);
      z-index: 999;
      padding-block: 6rem !important;
    }

    .menu-item.cta {
      color: white !important;
      width: 35vw;
      margin-top: 0.5rem;
      margin-left: 1rem !important;
      text-align: center;
    }

    .et_mobile_nav_menu .mobile_menu_bar {
      position: absolute;
      top: 0.25rem;
      right: unset;
      right: 0;
      z-index: 1000 !important;

      &:before {
        font-size: 2.75rem;
        color: #0b3d20;
        background: transparent !important;
        border-radius: 4px;
      }
    }

    /*change Divi hamburger menu to X*/
    .mobile_nav.opened .mobile_menu_bar:before {
      content: "\4d" !important;
    }

    /*rotate the Divi Menu icon on click*/
    .mobile_menu_bar:before {
      transition: all 0.4s ease;
      transform: rotate(0deg);
      display: block;
    }

    /*rotate the Divi Menu icon on click*/
    .mobile_nav.opened .mobile_menu_bar:before {
      transition: all 0.4s ease;
      transform: rotate(90deg);
      display: block;
    }
  }
}
/**
 * Make the blurbs even on desktop
 */

@media(min-width:981px){
#benefits .et_pb_blurb {
  min-height: 321px
}
}

@media(min-width:981px){
#savings .et_pb_blurb {
  min-height: 300px
}
}