/*--------------------------------------------------------------
THREE RANDOM BANNER LAYOUT
---------------------------------------------------------------
Updated : Mar 2026
Author  : Electricity Ratings
--------------------------------------------------------------*/
:root {
  --erllcblue: #0F2F8D;
  --si-blue:#00aeef;
  --cyan: #6ccafb;
  --form-bg: rgb(108, 202, 251, 0.43);
  --cyan-pale-light: #D9EFF9;
  --cyan-light: #f7fdff;
  --cyan-very-pale: #dbf2fb;
  --ui-si-pale-blue: #d2f3ff;
  --si-gray-100: #f3f6ff;
  --white: #fff;
  --gray-dark: #212529;
  --black: #000;
  --si-darker-blue-rgb: rgb(0, 50, 69);
  --ur-si-orange: #fbb040;
  --state-orange: #FF8200;
  --ur-si-darker-blue-rgb: #003245;
  --usa-red: #b22234;
  --usa-blue: #0e2e63;
}

/*-- option 1 or default --*/
.new-cta-banner .default-hide {
  display: none !important;
}
.new-cta-banner{
  background-image: none;
  position: relative;
  z-index: 1000;
  background-size: cover !important;
  padding: 2rem 1rem 4rem;
  position: relative;
  height: auto;
  z-index: 1000;
  background-position: bottom left;
}
  .new-cta-banner .overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
  }
  .new-cta-banner .cta-bottom {
    background-color: var(--cyan);
    z-index: 2000;
    position: relative;
  }
  .new-cta-banner h1 span{
    color:var(--state-orange);
  }
  .new-cta-banner .stars-container-banner .stars-container{
    width:120px;
  }
  .new-cta-banner .cta-bottom{
    background-color: var(--erllcblue) !important;
  }
  .new-cta-banner .cta-bottom h2,
  .new-cta-banner .cta-bottom .card.icon-card a{
    color: var(--white);
  }
  .new-cta-banner .fill-height {
    align-items: end;
    align-self: stretch;
    justify-content: end;
  }
@media (min-width: 1200px) {
  .new-cta-banner h1{
      font-size: 2.5rem !important;
  }
}
@media (max-width: 980px) {
  .new-cta-banner.default {
      padding-top:30px;
  }
 .new-cta-banner .zip-commerial-link-container{
      width:100%;
  }
}
/*-- option 2 --*/
.new-cta-banner.option-2 .option-2-hide{
  display:none !important;
}
.new-cta-banner.option-2 .default-hide{
  display:flex !important;
}
.new-cta-banner.option-2 {
  background-image:none;
}
.new-cta-banner.option-2 .overlay {
  background: rgba(0, 0, 0, 0.5);
}
.new-cta-banner.option-2 .option-2-center{
  display:flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin: 70px auto 10px;
  width: 100%;
}
.new-cta-banner.option-2 .cta-bottom {
  background-color: var(--cyan) !important;
}
.new-cta-banner.option-2 .cta-bottom h2,
.new-cta-banner.option-2 .cta-bottom .card.icon-card a{
  color: var(--black);
}

@media (min-width: 1200px) {
  .new-cta-banner.option-2 h6{
      font-size: 1.3rem !important;
  }
  .new-cta-banner.option-2 h1{
      width: 80%;
  }
  .new-cta-banner.option-2  .zip-commerial-link-container{
      margin-bottom: 50px;
  }
}
@media (max-width: 980px) {
 .new-cta-banner.option-2 .option-2-center{
      width: 100%;
  }
  .new-cta-banner.option-2 .option-2-center{
  margin: 30px auto 20px;
  }
}
/*-- option 3 --*/
.new-cta-banner.option-3 .option-3-hide{
  display: none !important;
}
.new-cta-banner.option-3{
  background-image: url(https://www.powerchoicetexas.org/energy-news/wp-content/uploads/2026/03/residential-neighborhood.webp);
  position: relative;
  z-index: 1000;
  background-size: cover !important;
  padding: 3rem 0rem 0rem;
  position: relative;
  height: auto;
  z-index: 1000;
  background-position: bottom left;
}
.new-cta-banner.option-3 .overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
}
.new-cta-banner.option-3 .cta-bottom {
  background-color: var(--cyan) !important;
}
.new-cta-banner.option-3 .cta-bottom h2, .new-cta-banner.option-3 .cta-bottom .card.icon-card a {
  color: var(--black);
}
.new-cta-banner.option-3 h1 span {
  color: var(--white);
}

@media (min-width: 1200px) {
  .new-cta-banner.option-3
  .container{
      margin:30px auto;
  }
}