html {
  margin-top: 0 !important;
}

body {
  margin: 0 !important;
}

:root {
  --ee-orange: #ffb500;
  --ee-orange-yellow: #ffd236;
  --ee-light-blue: #58a2df;
  --ee-dark-blue: #478fc8;
  --ee-green: #afe881;
  --ee-dark-green: #88d73f;
  --ee-green-normal: #afb418;

  * {
    font-family: "Inter", sans-serif;
    letter-spacing: -0.5px;
  }

  .greenBtn {
    background-color: var(--ee-dark-green);
    color: white;
    border: none;
    transition-duration: 0.1s;

    &:hover,
    &:active,
    &:focus {
      background-color: #7ac236;
    }

    &:active {
      transform: scale(0.95);
    }
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  p,
  a,
  li {
    margin: 0;
  }

  h1,
  h2,
  h3,
  h4,
  h5 {
    line-height: 120%;
  }

  a {
    text-decoration: none;
    transition-duration: 0.1s;
  }

  p,
  a,
  li {
    line-height: 140%;
  }

  h1 {
    font-weight: 800;
  }

  h2 {
    font-size: clamp(1.8rem, 3vw, 3rem);
    font-weight: 700;
  }

  .innerContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: clamp(30px, 5vw, 60px) 15px;
    gap: clamp(30px, 5vw, 40px);
  }

  .starsRating {
    display: flex;
    gap: 5px;

    svg {
      fill: var(--ee-orange-yellow);
      width: 20px;
    }
  }

  section.hero {
    background-color: var(--ee-light-blue);
    background-image: url(/wp-content/themes/eleck-energy/assets/img/hero-bg.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    min-height: 100vh;
    div.top-bar {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      max-width: 1600px;
      margin: 0 auto;
      padding: 0px 14px 30px 14px;

      * {
        margin: 0 auto;
      }

      img {
        max-width: clamp(100px, 20vw, 500px);
      }

      svg.fullSunSpinning {
        animation: sunRotation 20s infinite linear;
        position: relative;
        margin-top: -50px;

        @media (min-width: 481px) {
          & {
            margin-top: -75px;
          }
        }

        @media (min-width: 768px) {
          & {
            margin-top: -125px;
          }
        }

        @media (min-width: 1024px) {
          & {
            margin-top: -175px;
          }
        }

        @media (min-width: 1400px) {
          & {
            margin-top: -275px;
          }
        }
      }

      p {
        color: var(--ee-orange-yellow);
        font-weight: 800;
        text-align: center;
        font-size: clamp(1rem, 3vw, 2.5rem);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;

        a {
          color: white;

          &:hover {
            color: var(--ee-orange);
          }
        }
      }

      & > :nth-child(1),
      & > :nth-child(3) {
        margin-top: 50px;
      }
    }

    .innerContainer {
      h1 {
        max-width: 16ch;
        text-align: center;
        color: white;
        font-size: clamp(2rem, 5.5vw, 5rem);

        span:nth-of-type(1) {
          color: var(--ee-orange-yellow);
        }

        span:nth-of-type(2) {
          color: var(--ee-green);
        }
      }

      div.animatedHero {
        display: flex;
        gap: clamp(15px, 4vw, 60px);
        align-items: center;

        .movingLine {
          width: clamp(25px, 3vw, 100px);
          height: clamp(10px, 1vw, 20px);
          border-radius: 100px;
          &.mlYellow {
            background-color: var(--ee-orange-yellow);
          }

          &.mlGreen {
            background-color: var(--ee-green);
          }
        }

        img {
          max-width: clamp(50px, 13vw, 200px);

          &:nth-of-type(1) {
            animation: sunRotation 20s infinite linear;
          }

          &:nth-of-type(2) {
            animation: solarBounce 2s ease 0s infinite normal;
          }

          &:nth-of-type(3) {
            animation-name: moneyGlow;
            animation-duration: 1s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
          }
        }
      }

      div.heroInfoBox {
        width: 100%;
        max-width: 1000px;
        div.fakeTabs {
          display: grid;
          grid-template-columns: 1fr 1fr;

          * {
            font-size: clamp(0.9rem, 2vw, 1.4rem);
          }

          & > div:nth-of-type(1),
          & > div:nth-of-type(2) a {
            padding: 15px;
          }

          & > div:nth-of-type(1) {
            background-color: white;
            display: flex;
            flex-direction: column;
            gap: 10px;
            border-radius: 10px 10px 0 0;

            @media (min-width: 768px) {
              & {
                flex-direction: row;
                gap: 20px;
              }
            }
          }

          & > div:nth-of-type(2) {
            display: flex;
            align-items: flex-end;

            a {
              width: 100%;
              height: 80%;
              border-radius: 0 10px 0 0;
              transform: none;
              font-weight: 700;
              display: flex;
              justify-content: center;
              align-items: center;
            }
          }
        }

        div.textContent {
          background-color: white;
          padding: 30px 15px;
          border-radius: 0 0 10px 10px;

          & > div {
            max-width: 77ch;
            margin: 0 auto;
            h3 {
              font-size: clamp(1.45rem, 3vw, 2.5rem);
              font-weight: 600;
              text-align: center;
            }
            ul {
              margin-top: clamp(20px, 4vw, 40px);
              padding-left: 60px;

              li {
                padding-left: 10px;
                list-style-image: url('data:image/svg+xml,<svg fill="%2388d73f" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Pro 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.--><path d="M441 103c9.4 9.4 9.4 24.6 0 33.9L177 401c-9.4 9.4-24.6 9.4-33.9 0L7 265c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l119 119L407 103c9.4-9.4 24.6-9.4 33.9 0z"/></svg>');
                font-size: clamp(1.1rem, 2vw, 1.8rem);
                font-weight: 300;
                &::marker {
                  font-size: clamp(3rem, 8vw, 4rem);
                }
              }
            }
          }

          a.greenBtn {
            font-weight: 600;
            font-size: clamp(1rem, 3vw, 2rem);
            padding: 20px 8px;
            max-width: 100%;
            margin: clamp(20px, 4vw, 40px) auto 0 auto;
            width: 100%;
            border-radius: 10px;
            display: flex;
            justify-content: center;
            align-items: center;

            @media (min-width: 640px) {
              & {
                max-width: 80%;
              }
            }
          }
        }
      }
    }
  }

  section.getAQuote,
  section.googleReviewsDisplay {
    div.innerContainer {
      align-items: unset;
      div.googleReviewContainer {
        display: flex;
        flex-direction: column;
        gap: 15px;
        & > div:nth-of-type(1) {
          display: flex;
          align-items: center;
          justify-content: center;
        }

        & div.splide {
          padding: 0 30px;
          & > p {
            text-align: center;
            font-weight: 600;
          }

          p,
          span {
            font-size: clamp(0.9rem, 2vw, 1.4rem);
          }

          .splide__arrows.splide__arrows--ltr {
            button.splide__arrow {
              background: none;
              &.splide__arrow--prev {
                left: -0.5em;
              }

              &.splide__arrow--next {
                right: -0.5em;
                margin: 0;
              }
            }
          }

          .splide__pagination.splide__pagination--ltr {
            display: none !important;
          }

          & > div.splide__track {
            margin-top: clamp(15px, 2vw, 30px);

            ul.splide__list {
              li.splide__slide.googleReview {
                text-align: center;
                & > div {
                  display: flex;
                  justify-content: center;
                  font-weight: 600;
                  gap: 10px;
                  margin-top: clamp(15px, 2vw, 30px);
                  padding-bottom: 10px;
                }
              }
            }
          }

          @media (min-width: 768px) {
            & {
              max-width: 85ch;
              margin: 0 auto;

              .splide__arrows.splide__arrows--ltr {
                button.splide__arrow {
                  width: 3em;
                  height: 3em;
                  &.splide__arrow--prev {
                    left: -1em;
                  }

                  &.splide__arrow--next {
                    right: -1em;
                  }

                  svg {
                    width: 100% !important;
                    height: 100% !important;
                  }
                }
              }
            }
          }

          @media (min-width: 1024px) {
            & {
              .splide__arrows.splide__arrows--ltr {
                button.splide__arrow {
                  &.splide__arrow--prev {
                    left: -2.5em;
                  }

                  &.splide__arrow--next {
                    right: -2.5em;
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  section.formDropdownContainer {
    background-color: var(--ee-light-blue);
    border-top: 5px solid white;

    .getAQuoteArrowText {
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      padding: 50px 15px 0 15px;
      background-color: var(--ee-dark-blue);
      width: 100%;
      position: relative;
      z-index: 1;

      h2, span {
        color: white;
      }

      h2 {
        text-wrap: balance;
      }

      span {
        font-size: clamp(1.1rem, 2vw, 1.8rem);
        font-weight: 600;
      }
    }

    .wideCaretArrow {
      clip-path: polygon(50% 100%, 0 0, 100% 0);
      width: 100%;
      height: 100px;
      background-color: var(--ee-dark-blue);
      margin: 0 auto;
    }

    div.innerContainer {
      .formSection {
        &:not(&.active) {
          display: none;
        }

        & p.sectionTitle {
          font-size: clamp(1.6rem, 2.5vw, 2rem);
          font-weight: 600;
          color: white;
          text-align: center;
          text-wrap: balance;
        }

        & label.houseSelectCard {
          display: flex;
          flex-direction: column;
          align-items: center;
          background-color: white;
          border-radius: 5px;
          cursor: pointer;
          padding: clamp(15px, 2vw, 30px);
          max-width: clamp(100px, 13vw, 160px);
          width: 100%;
          text-align: center;

          span {
            font-weight: 600;
            color: #080808;
            font-size: clamp(1rem, 2vw, 1.4rem);
            margin-top: 20px;
          }

          img {
            max-width: 100%;
            width: 100%;
          }

          svg {
            fill: #080808;
          }

          input {
            appearance: none;
          }
        }

        & label.houseSelectCard:has(input:checked) {
          outline: 3px solid var(--ee-dark-green);
          box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.2);

          svg {
            fill: var(--ee-dark-green);
          }
        }

        &.ownAHomeQuestion {
          max-width: 1000px;
          width: 100%;
          div.houseSelectSection {
            display: flex;
            justify-content: center;
            gap: clamp(15px, 4vw, 30px);
            margin-top: 30px;
          }
        }

        &.typeOfHouse {
          max-width: 1000px;
          width: 100%;
          div.houseSelectSection {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: clamp(15px, 4vw, 30px);
            margin-top: 30px;
          }
        }

        &.getAQuoteForm {
          max-width: 1000px;
          width: 100%;
          form {
            background-color: white;
            margin-top: 30px;

            &,
            & fieldset {
              padding: clamp(15px, 4vw, 30px);
              border-radius: 10px;
            }

            fieldset {
              border: 2px solid var(--ee-orange);
              display: grid;
              grid-template-columns: 1fr;
              gap: clamp(15px, 4vw, 30px);
              legend {
                border: none;
                float: unset;
                width: unset;
                padding: 0 10px;
                margin: 0;

                img {
                  max-width: clamp(100px, 20vw, 150px);
                }
              }

              .labelAndInput {
                display: flex;
                flex-direction: column;
                gap: 3px;
                label {
                  font-weight: 600;
                  font-size: clamp(1.1rem, 3vw, 1.2rem);
                }

                input,
                textarea,
                select {
                  border-radius: 10px;
                  border: 1px solid rgba(0, 0, 0, 0.2);
                  padding: 10px;
                  background-color: white;
                  box-shadow: inset 1px 2px 5px rgba(0, 0, 0, 0.1);
                }

                select {
                    height: 45px;
                }

                textarea {
                  min-height: 15vh;
                }
              }
            }

            .greenBtn {
              max-width: 100%;
              width: 100%;
              padding: 10px;
              border-radius: 10px;
              font-weight: 600;
              font-size: 1.2rem;
            }

            @media (min-width: 768px) {
              & {
                fieldset {
                  grid-template-columns: 1fr 1fr;

                  .queriesInput,
                  .submitBtnContainer {
                    grid-column: span 2;
                  }

                  .submitBtnContainer {
                    display: flex;
                    justify-content: flex-end;

                    .greenBtn {
                      max-width: 300px;
                    }
                  }
                }
              }
            }
          }
        }

        &#errorMsg,
        &#successMsg {
          font-weight: 600;
          font-size: 1.4rem;
          max-width: 50ch;
          text-align: center;
          color: white;
          text-wrap: balance;

          a {
            color: var(--ee-orange-yellow);
            transition-duration: 0.1s;

            &:hover {
              color: var(--ee-orange);
            }
          }
        }
      }
    }
  }

  section.sponsorBanner {
    div.innerContainer {
      h2 {
        color: var(--ee-light-blue);
        text-wrap: balance;
        text-align: center;
      }

      & > div {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        align-items: center;
        gap: 15px;
        width: 100%;
        max-width: 1400px;

        & img {
          max-width: clamp(90px, 24vw, 250px);
          margin: 0 auto;
        }
      }
    }
  }

  section.twoCol {
    div.innerContainer {
      display: grid;
      grid-template-columns: 1fr;
      gap: clamp(30px, 3vw, 60px);
      max-width: 1400px;
      width: 100%;
      margin: 0 auto;

      div.textContent {
        display: flex;
        flex-direction: column;
        gap: clamp(15px, 3vw, 30px);

        & > div {
          display: flex;
          gap: 30px;
          align-items: center;
          img {
            max-width: clamp(90px, 24vw, 150px);
          }
        }

        & > p:nth-of-type(1) {
          font-weight: 600;
        }

        & > p {
          font-size: clamp(1rem, 2vw, 1.4rem);
        }
      }

      div.bgImg {
        background-image: url(/wp-content/themes/eleck-energy/assets/img/eleck-van.webp);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        min-height: 40vh;
      }

      @media (min-width: 768px) {
        & {
          grid-template-columns: 1fr 1fr;
          div.bgImg {
            order: -1;
            min-height: 60vh;
          }
        }
      }
    }
  }

  hr.seperator {
    border-top: 3px solid var(--ee-dark-blue);
    max-width: 300px;
    margin: 0 auto;
  }

  section.eleckLandingFooter {
    div.innerContainer {
      background-color: var(--ee-green-normal);
      img {
        max-width: clamp(100px, 24vw, 150px);
      }
    }
  }
}

@keyframes sunRotation {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes solarBounce {
  0% {
    transform: none;
  }

  50% {
    transform: translateY(-10px);
  }

  100% {
    transform: none;
  }
}

@keyframes moneyGlow {
  from {
    box-shadow: 0px 0px 5px #88d73f, 0px 0px 5px #afe881;
  }
  to {
    box-shadow: 0px 0px 20px #88d73f, 0px 0px 20px #afe881;
  }
}

#movingLines {
  .splide__pagination,
  .splide__arrows {
    display: none !important;
  }
}