/**
========================================================================
 #operator-landing Globals
========================================================================
*/
:root {
   --green: #1FB584;
   --dark-blue: #3C4855;
   --violet: #7166F9;;
}
#content-wrapper {
   padding: 0 !important;
}
#operator-landing {
   margin: 0;
   padding: 0;
   font-size: 16px;
   background-color: #ffffff;
   line-height: 150%;
}
#operator-landing * {
   box-sizing: border-box;
}
#operator-landing input,
#operator-landing select {
   height: 57px !important;
   background-color: #fff;
}
#operator-landing button {
   height: 48px;
   /* font-family: Montserrat; */
   font-family: Inter;
   font-style: normal;
   font-weight: 600;
   line-height: 20px;
   letter-spacing: 0em;
   text-align: center;
   outline: none;
   text-shadow: none;
   background: var(--green);
   border: none;
   margin-top: 2rem;
}
#operator-landing input,
#operator-landing select,
#operator-landing button {
   border-radius: 8px;
   width: 100%;
}
#operator-landing select {
   -webkit-appearance: menulist;
   -moz-appearance: menulist; 
   appearance: menulist;
}
#operator-landing .btn-call-to-action {
   width: 250px;   
}
#operator-landing button:active {
   background-color: #0f6347;
}
#operator-landing .error-message {
   color: red;
   font-weight: bold;
}
#operator-landing #booking {
   font-size: 16px;
}
#operator-landing .container {
   padding: 20px;
   width: 100%;
   max-width: 1262px;
}
@media (max-width: 580px) {
   #operator-landing .container {
      padding-right: 20px;
      padding-left: 20px;
   }
}

/**
========================================================================
#banner-operator
========================================================================
*/
#operator-landing #banner-operator {
   height: 100%;
   background: url(/images/chargehound_landing/hero_image_2x.jpg) center center no-repeat;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
   padding-bottom: 0px;
   position: relative;
}
#operator-landing #banner-operator .call-out-badge {
   background: #FECE4D;
   color: #3C4855;
   border-radius: 6px 0px 0px 6px;
   padding: 15px 20px;
   margin-top: 20px;
   width: 600px;
   float: right;
   font-size: 16px;
   line-height: 24px;
}
#operator-landing #banner-operator .call-out-badge span {
   font-weight: 700;
   text-decoration-line: underline;
   cursor: pointer;
}
#operator-landing #banner-operator .mobile-bg {
   display: none;
   height: 400px;
   background: url(/images/chargehound_landing/hero_image_mobile.svg) center center no-repeat;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
}
#operator-landing #banner-operator #banner-text-content {
   max-width: 600px;
   margin: 5rem 0;
   height: 100%;
}
#operator-landing #banner-operator #banner-text-content h1,
#operator-landing #banner-operator #banner-text-content span {
   word-wrap: break-word;
   color: #FFFFFF;
}
#operator-landing #banner-operator #banner-text-content h1 {
   padding: unset;
   font-weight: 700;
   font-size: 32px;
   line-height: 48px;
   margin-bottom: 1rem;
   text-align: left;
}
#operator-landing #banner-operator #banner-text-content span {
   font-style: normal;
   font-weight: 400;
   font-size: 22px;
   line-height: 33px;
}
#operator-landing #banner-operator #banner-text-content .logo {
   margin-top: 3rem;
}
@media (max-width: 1440px) {
   #operator-landing #banner-operator {
      background: url(/images/chargehound_landing/hero_image.jpg) center center no-repeat;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
   }
   #operator-landing #banner-operator .call-out-badge {
      width: 530px;
   }
}
@media (max-width: 1000px) {
   #operator-landing #banner-operator {
      background: url(/images/chargehound_landing/hero_image_bg.jpg) center center no-repeat;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
   }
}
@media (max-width: 580px) {
   #operator-landing #banner-operator {
      background: #1D2329;
   }
   #operator-landing #banner-operator .call-out-badge {
      margin-top: 30px;
      text-align: right;
      width: 310px;
  }
   #operator-landing #banner-operator .mobile-bg {
      display: block;
   }
   #operator-landing #banner-operator #banner-text-content {
      max-width: 600px;
      margin: unset;
      height: 100%;
   }
   #operator-landing #banner-operator #banner-text-content .logo {
      margin: 2rem 0 1rem 0;
      text-align: center;
  }
   #operator-landing #banner-operator #banner-text-content .logo img {
      width: -webkit-fill-available;
      max-width: 350px;
      height: auto;
   }
   #operator-landing #banner-operator #banner-text-content h1 {
      line-height: 41px;
   }
   #operator-landing #banner-operator #banner-text-content span {
      line-height: 28px;
   }
}
@media (max-width: 490px) {
   #operator-landing #banner-operator .mobile-bg {
      height: 300px;
   }
   #operator-landing #banner-operator .call-out-badge {
      width: 265px;
      margin-top: 25px;
      padding: 10px 15px;
      font-size: 14px;
      line-height: 20px;
  }
}
@media (max-width: 400px) {
   #operator-landing #banner-operator .mobile-bg {
      height: 250px;
   }
   #operator-landing #banner-operator .call-out-badge {
      margin-top: 20px;
   }
}
@media (max-width: 300px) {
   #operator-landing #banner-operator .mobile-bg {
      height: 210px;
   }
   #operator-landing #banner-operator .call-out-badge {
      width: 240px;
      margin-top: 15px;
      padding: 5px 10px;
      font-size: 13px;
      line-height: 18px;
  }
}

/**
========================================================================
#operator-landing GRID layout
========================================================================
*/
#operator-landing .grid-container {
   display: grid;
   display: -ms-grid;
   display: -moz-grid;
   column-gap: 30px;
}
#operator-landing .grid-2 {
   grid-template-columns: repeat(2, 1fr);
}
#operator-landing .grid-3 {
   grid-template-columns: repeat(3, 1fr);
}
#operator-landing .grid-4 {
   grid-template-columns: repeat(4, 1fr);
}
#operator-landing .grid-7 {
   grid-template-columns: repeat(7, 1fr);
}

/**
========================================================================
#operator-landing Chat form section
========================================================================
*/
#operator-landing #section-lets-chat {
   padding: 4rem 0;
}
#operator-landing .chat-container {
   width: 100%;
   max-width: 583px;
}
#operator-landing .cta-container {
   background: #3C4855;
   padding: 30px;
   text-align: center;
}
#operator-landing .cta-container h4 {
   font-weight: 700;
   font-size: 22px;
   line-height: 36px;
   color: #FFFFFF;
   text-align: center;
}
#operator-landing .cta-container .btn-list-space {
   margin-top: 10px;
   width: 330px;
   background: #FECE4D;
   border-radius: 8px;
   display: inline-block;
   font-weight: 600;
   font-size: 16px;
   line-height: 48px;
   color: #2D3236;
   text-decoration-line: none;
   position: relative;
}
#operator-landing .cta-container .btn-list-space span {
   position: absolute;
   background-image: url(/images/hiw/ribbon.png);
   height: 25px;
   right: -8px;
   line-height: 16px;
   font-size: 14px;
   padding: 3px 12px;
   color: #fecc46;
   text-shadow: none;
   top: -1px;
   bottom: 0;
   margin: auto;
   text-indent: 5px;
   background-repeat: no-repeat;
}
#operator-landing .cta-container .btn-join-ev {
   margin-top: 10px;
   width: 330px;
   height: 48px;
   font-size: 16px;
   color: #FFFFFF;
}
#operator-landing .cta-container hr {
   margin: 30px 0;
   border-top: unset;
   border-bottom: 1px solid #FFFFFF;
}
#operator-landing .chat-paragraph {
   /* font-family: Raleway; */
   font-family: Inter;
   font-size: 22px;
   font-style: normal;
   line-height: 36px;
   letter-spacing: 0em;
   text-align: left;
}
#operator-landing .chat-paragraph.txt-title {
   margin-bottom: 2rem;
}
#operator-landing .chat-paragraph a {
   color: #18B586;
   text-decoration-line: underline;
}
#operator-landing .chat-paragraph .bold {
   font-weight: 700;
}
#operator-landing h2.details-title {
   font-weight: 700;
   font-size: 32px;
   line-height: 38px;
   letter-spacing: 0em;
   margin-bottom: 10px;
   color: #3C4855;
}
#operator-landing h3.details-title {
   font-weight: 700;
   font-size: 22px;
   line-height: 26px;
   letter-spacing: 0em;
   margin-bottom: 2rem;
   color: #3C4855;
}
#operator-landing .details-paragraph {
   /* font-family: Raleway; */
   font-family: Inter;
   font-weight: 400;
   font-size: 16px;
   line-height: 24px;
   letter-spacing: 0em;
   margin-bottom: 2rem;
}
#operator-landing .operator-form {
   position: relative;
   padding: 2rem;
   width: 100%;
   max-width: 583px;
   background-color: #F2F4F5;
}
#operator-landing .operator-form h3,
#operator-landing .operator-form p {
   margin-bottom: 1rem;
}
#operator-landing .operator-form input {
   margin: unset;
}
#operator-landing .group-input input,
#operator-landing .group-input select {
   margin: 10px 0;
   padding: 10px;
}
#operator-landing .operator-form p {
   margin-top: 10px;
   font-size: 16px;
}
@media (max-width: 840px) {
   #operator-landing #section-lets-chat .chat-container,
   #operator-landing #section-lets-chat .operator-form {
      max-width: 100%;
   }
   #operator-landing #section-lets-chat .chat-container:first-child {
      padding: 20px;
   }
   #operator-landing #section-lets-chat .container > .grid-container {
      grid-template-columns: 1fr;
   }
   #operator-landing #section-lets-chat .container {
      width: 100%;
      padding: unset;
      margin: unset;
   }
   #operator-landing #section-lets-chat {
      padding: unset;
   }
}
@media (max-width: 700px) {
   #operator-landing #section-lets-chat .grid-2 {
      grid-template-columns: 1fr;
   }      
}
@media (max-width: 400px) {
   #operator-landing .cta-container .btn-list-space, 
   #operator-landing .cta-container .btn-join-ev {
      width: -webkit-fill-available;
   }
}

/**
========================================================================
#EV Charger Section
========================================================================
*/
#operator-landing #section-evcharger-home {

}
#operator-landing #section-evcharger-home .mobile-bg {
   display: none;
}
#operator-landing #section-evcharger-home .container {
   padding: 0;
   max-width: 1440px;
}
#operator-landing #section-evcharger-home .container .grid-container {
   grid-template-columns: 735px 1fr;
   column-gap: unset;
}
#operator-landing #section-evcharger-home .chat-container {
   padding: 80px 30px 80px 123px;
   max-width: unset;
}
#operator-landing #section-evcharger-home .evhome-container {
   background: url(/images/chargehound_landing/ev_home_image2x.jpg) center center;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
}
#operator-landing #section-evcharger-home .btn-list-space {
   width: 330px;
   background: #FECE4D;
   border-radius: 8px;
   display: inline-block;
   font-weight: 600;
   font-size: 16px;
   line-height: 48px;
   color: #2D3236;
   text-decoration-line: none;
   text-align: center;
   position: relative;
}
#operator-landing #section-evcharger-home .btn-list-space span {
   position: absolute;
   background-image: url(/images/hiw/ribbon.png);
   height: 25px;
   right: -8px;
   line-height: 16px;
   font-size: 14px;
   padding: 3px 12px;
   color: #fecc46;
   text-shadow: none;
   top: -1px;
   bottom: 0;
   margin: auto;
   text-indent: 5px;
   background-repeat: no-repeat;
}
@media (max-width: 1439px) {
   #operator-landing #section-evcharger-home .container .grid-container {
      grid-template-columns: 1fr 1fr;
   }
}
@media (max-width: 1350px) {
   #operator-landing #section-evcharger-home .chat-container {
      padding: 80px 30px;
      max-width: unset;
  }
  #operator-landing #section-evcharger-home .evhome-container {
      background: url(/images/chargehound_landing/ev_home_image.jpg) center center no-repeat;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
   }
}
@media (max-width: 900px) {
   #operator-landing #section-evcharger-home .chat-container {
      padding: 40px 30px;
  }
}
@media (max-width: 780px) {
   #operator-landing #section-evcharger-home .container .grid-container {
      grid-template-columns: 1fr;
   }
   #operator-landing #section-evcharger-home .mobile-bg {
      display: block;
      height: 400px;
      background: url(/images/chargehound_landing/ev_home_image.jpg) center center no-repeat;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
   }
   #operator-landing #section-evcharger-home .evhome-container {
      display: none;
   }
}
@media (max-width: 580px) {
   #operator-landing #section-evcharger-home .mobile-bg {
      height: 300px;
   }
   #operator-landing #section-evcharger-home .chat-container {
      padding: 40px 20px;
   }
   #operator-landing #section-evcharger-home .btn-list-space {
      width: -webkit-fill-available;
   }
}
@media (max-width: 500px) {
   #operator-landing #section-evcharger-home .mobile-bg {
      height: 250px;
   }
}

/**
========================================================================
#Info Section
========================================================================
*/
#operator-landing .section-info {
   padding: 40px 0;
   background-color: var(--violet);
}
#operator-landing .section-info .grid-container .grid-2 {
   grid-template-columns: 60px 1fr;
   color: #ffffff;
   line-height: 24px;
   column-gap: 20px;
}
#operator-landing .section-info .grid-container .grid-2 .sub-heading {
   font-weight: bold;
}
@media (max-width: 780px) {
   #operator-landing .section-info .grid-container {
      grid-template-columns: 1fr;
      row-gap: 25px;
   }
   #operator-landing .section-info .grid-container .grid-2 img {
      display: block;
   }
   #operator-landing .section-info .grid-container .grid-2 .sub-heading {
      line-height: 21px;
   }
   #operator-landing .section-info .grid-container .grid-2 p {
      line-height: 21px;
      margin-top: 5px;
   }
}

/**
========================================================================
#Benefit section
========================================================================
*/
#operator-landing #section-benefit {
   background-color: #F2F4F5;
   padding: 2.5rem 0;
}
#operator-landing #section-benefit h2 {
   margin-bottom: 2rem;
}
#operator-landing #section-benefit .benefit-container .grid-2 {
   grid-template-columns: 1fr 6fr;
   justify-items: start;
   font-size: 22px;
}
#operator-landing #section-benefit h3 {
   font-weight: 700;
   font-size: 32px;
   line-height: 38px;
   color: #3C4855;
   margin-bottom: 40px;
}
#operator-landing #section-benefit p.title {
   font-weight: 700;
   font-size: 22px;
   line-height: 36px;
   color: #2D3236;
   margin-bottom: 5px;
}
#operator-landing #section-benefit p {
   font-weight: 400;
   font-size: 16px;
   line-height: 24px;
   color: #2D3236;
   margin-bottom: 40px;
}
@media (max-width: 780px) {
   #operator-landing #section-benefit .benefit-container.grid-container.grid-2 {
      grid-template-columns: 1fr;
   }
   #operator-landing #section-benefit .benefit-container.grid-container.grid-2 > div > .grid-container.grid-2 {
      margin-bottom: 20px;
   }
   #operator-landing #section-benefit h3 {
      margin-bottom: 30px;
   }
   #operator-landing #section-benefit .benefit-container .grid-2 {
      grid-template-columns: 70px 1fr;
      column-gap: 20px;
   }
}
@media (max-width: 580px) {
   #operator-landing #section-benefit {
      padding: 2.5rem 0 0 0;
   }
   #operator-landing #section-benefit .benefit-container .grid-2 {
      grid-template-columns: 50px 1fr;
   }
   #operator-landing #section-benefit p {
      margin-bottom: 10px;
   }
}

/**
========================================================================
#Renters Section
========================================================================
*/
#operator-landing #section-renters {
   padding: 4rem 0;
}
#operator-landing #section-renters .grid-container {
   margin-top: 2rem;
   line-height: 36px;
}
#operator-landing #section-renters .grid-container p{
   font-size: 22px;
}
#operator-landing #section-renters .grid-2 {
   margin-bottom: 5rem;
}
#operator-landing #section-renters h5 {
   margin-top: 1rem;
}
#operator-landing #section-renters .grid-3 {
   justify-items: center;
   text-align: center;
}
@media (max-width: 780px) {
   #operator-landing #section-renters .grid-2, 
   #operator-landing #section-renters .grid-3 {
      grid-template-columns: 1fr;
      row-gap: 30px;
   }
   #operator-landing #section-renters .grid-3 div:nth-child(1) img {
      content: url(/images/chargehound_landing/screen-1-mobile.png);
   }
   #operator-landing #section-renters .grid-3 div:nth-child(2) img {
      content: url(/images/chargehound_landing/screen-2-mobile.png);
   }
   #operator-landing #section-renters .grid-3 div:nth-child(3) img {
      content: url(/images/chargehound_landing/screen-3-mobile.png);
   }
}
@media (max-width: 580px) {
   #operator-landing #section-renters {
      padding: 40px 0;
   }
}

/**
========================================================================
#Bottom Section
========================================================================
*/
#operator-landing #section-lets-chat-two {
   background: #F2F4F5;
}
#operator-landing #section-lets-chat-two .container {
   padding: 0;
   max-width: 1440px;
}
#operator-landing #section-lets-chat-two .container .grid-container {
   grid-template-columns: 705px 1fr;
   column-gap: unset;
}
#operator-landing #section-lets-chat-two .sub-heading {
   color: #ffffff;
   font-size: 22px;
   font-weight: bold;
}
#operator-landing #section-lets-chat-two h2 {
   margin-top: 2rem;
   margin-bottom: 2rem;
}
#operator-landing #section-lets-chat-two .text-group-container {
   padding: 80px 30px 80px 153px;
}
#operator-landing #section-lets-chat-two .charging-container {
   background: url(/images/chargehound_landing/charging_image.jpg) 100% 100% no-repeat;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
}
#operator-landing #section-lets-chat-two .text-group-container p {
   margin: 2rem 0;
}
@media (max-width: 1439px) {
   #operator-landing #section-lets-chat-two .container .grid-container {
      grid-template-columns: 1fr 1fr;
   }
}
@media (max-width: 1350px) {
   #operator-landing #section-lets-chat-two .text-group-container {
      padding: 80px 30px;
  }
}
@media (max-width: 780px) {
   #operator-landing #section-lets-chat-two {
      padding: unset;
   }
   #operator-landing #section-lets-chat-two .grid-2 {
      display: block;
   }
   #operator-landing #section-lets-chat-two .chat-container,
   #operator-landing #section-lets-chat-two .operator-form {
      max-width: 100%;
   }
   #operator-landing #section-lets-chat-two .container > .grid-container {
      grid-template-columns: 1fr;
   }
   #operator-landing #section-lets-chat-two .container {
      width: 100%;
      padding: unset;
      margin: unset;
   }
   #operator-landing #section-lets-chat-two .text-group-container {
      padding: 3rem 1rem;
   }
   #operator-landing #section-lets-chat-two .text-group-container img {
      width: -webkit-fill-available;
      max-width: 350px;
      height: auto;
   }
   #operator-landing #section-lets-chat-two .charging-container {
      height: 500px;
   }
}
@media (max-width: 580px) {
   #operator-landing #section-lets-chat-two .charging-container {
      height: 400px;
   }
}
@media (max-width: 380px) {
   #operator-landing #section-lets-chat-two .charging-container {
      height: 300px;
   }
}