/* JOURNEY CARDS GRADIENTS */

.bg-grey {
    background-color: #FAFAFA;
  }
  .card.journey {
    width: 300px!important;
    max-width: 300px;
    height: 224px;
    position: relative; 
  }  
  .journey .card-body {
    z-index: 1 !important;
  }  

  .accordion .gradient {
    width: 100%;
    height: 100%;
    align-items: flex-end;
    position: absolute; 
    top: 0;
    left: 0;
    display: flex;
    flex-direction: row; 
    z-index: 1; 
  }

  .gradient.saving_money {
    width: 100%;
    height: 100%;
    align-items: flex-end;
    position: absolute; 
    top: 0;
    left: 0;
    display: flex;
    flex-direction: row; 
    z-index: 1; 
  }
  
  .gradient.saving_money.horizontal {
    width: 100%;
    height: 100%;
    align-items: flex-end;
    position: absolute; 
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column; 
    z-index: 1; 
  }
  .gradient.sustainability {
    width: 100%;
    height: 100%;
    align-items: flex-end;
    position: absolute; 
    top: 0;
    left: 0;
    display: flex;
    flex-direction: row; 
    z-index: 1; 
  }
  .gradient.sustainability.horizontal {
    width: 100%;
    height: 100%;
    align-items: flex-end;
    position: absolute; 
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column; 
    z-index: 1; 
  }
  .gradient.upgrade_property {
    width: 100%;
    height: 100%;
    align-items: flex-end;
    position: absolute; 
    top: 0;
    left: 0;
    display: flex;
    flex-direction: row;
    z-index: 1; 
  }
  
  .gradient.upgrade_property.horizontal {
    width: 100%;
    height: 100%;
    align-items: flex-end;
    position: absolute; 
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column; 
    z-index: 1; 
  }
  .gradient.saving_money .line {
    background: linear-gradient(180deg, rgba(250, 250, 250, 1) 24%, #FFC502 100%); /* Vertical gradient */
  }

  .inner .gradient.saving_money .line {
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 24%, #FFC502 100%); /* Vertical gradient */
  }
  
  .gradient.sustainability .line {
    background: linear-gradient(180deg, rgba(250, 250, 250, 1) 24%, #9EFF69 100%); /* Vertical gradient */
  }
  .inner .gradient.sustainability .line {
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 24%, #9EFF69 100%); /* Vertical gradient */
  }
  
  .gradient.upgrade_property .line {
    background: linear-gradient(180deg, rgba(250, 250, 250, 1) 24%, #53A7FF 100%); /* Vertical gradient */
  }
  .inner .gradient.upgrade_property .line {
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 24%, #53A7FF 100%); /* Vertical gradient */
  }
  
  .gradient .line {
    height: 25%; 
    width: 100%; 
    margin: 0;
    transition: 0.5s;
  }
  
  .gradient .line.line1 {
    height: 30%;
  }
  .gradient .line.line1.inner {
    height: 45%;
  }  
  .gradient .line.line2 {
    height: 50%; 
  }
  .gradient .line.line2.inner{
    height: 65%; 
  }   
  .gradient .line.line3 {
    height: 70%; 
  }
  .gradient .line.line3.inner {
    height: 85%; 
  }
  .gradient .line.line4 {
    height: 90%; 
  }
  .gradient .line.line4.inner {
    height: 100%; 
  }
  
  .br-bottom-left {
    border-bottom-left-radius: 8px;
  }
  
  .br-bottom-right {
    border-bottom-right-radius: 8px;
  }
  .alert-white {
    background-color: white;
  }
/* END JOURNEY CARDS */
  
/* GRADIENT GREEN BLACK */
.card-body .green-black {
  position: relative; 
  overflow: hidden; 
}
.gradient.green-black {
  width: 100%;
  height: 100%;
  align-items: flex-end;
  position: absolute; 
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  z-index: 1; 
}

.gradient.green-black .line {
  height: 100%; 
  border: none;
  transition: 0.5s;
  background: linear-gradient(90deg, rgba(250, 250, 250, 0) 0%, #00DC55 78%, #9EFF69 100%);

}
.gradient.green-black .line .landing {
  height: 100%;
  border: none;
  transition: 0.5s;
  background: linear-gradient(90deg, rgba(250, 250, 250, 0) 0%, #00DC55 78%, #9EFF69 100%);
}
.gradient.green-black .line.line1 {
    width: 30%; 
 }
 .gradient.green-black .line.line1.landing{
  width: 45%; 
}
.gradient.green-black .line.line2 {
  width: 50%; 
}
.gradient.green-black .line.line2.landing {
  width: 65%; 
}
.gradient.green-black .line.line3 {
  width: 75%;
}
.gradient.green-black .line.line3.landing{
  width: 85%;
}
.gradient.green-black .line.line4 {
  width: 100%;
}
.gradient.green-black .line.line4.landing{
  width: 100%;
}

/* END GRADIENT  GREEN BLACK  */

.gradient.saving_money.horizontal .line {
  height: 100%; 
  border: none;
  transition: 0.5s;
  background: linear-gradient(90deg, rgba(250, 250, 250, 0) 24%, #FFC502 100%);

}
.gradient.sustainability.horizontal .line {
  height: 100%; 
  border: none;
  transition: 0.5s;
  background: linear-gradient(90deg, rgba(250, 250, 250, 0) 24%, #9EFF69 100%);
}

.gradient.upgrade_property.horizontal .line {
  height: 100%; 
  border: none;
  transition: 0.5s;
  background: linear-gradient(90deg, rgba(250, 250, 250, 0) 24%, #53A7FF 100%);
}

.gradient.saving_money.horizontal .line.line1 {
  width: 100%; 
}
.gradient.saving_money.horizontal .line.line2 {
width: 80%; 
}
.gradient.saving_money.horizontal .line.line3 {
width: 60%;
}
.gradient.saving_money.horizontal .line.line4 {
width: 40%;
}

.gradient.sustainability.horizontal .line.line1 {
  width: 100%; 
}
.gradient.sustainability.horizontal .line.line2 {
width: 80%; 
}
.gradient.sustainability.horizontal .line.line3 {
width: 60%;
}
.gradient.sustainability.horizontal .line.line4 {
width: 40%;
}


.gradient.upgrade_property.horizontal .line.line1 {
  width: 100%; 
}
.gradient.upgrade_property.horizontal .line.line2 {
width: 80%; 
}
.gradient.upgrade_property.horizontal .line.line3 {
width: 60%;
}
.gradient.upgrade_property.horizontal .line.line4 {
width: 40%;
}
.z-index-1 {
  z-index: 1;
}
.br-bottom-left {
  border-bottom-left-radius: 8px;
}
.br-bottom-right {
  border-bottom-right-radius: 8px;
}
.br-bottom-left-6 {
  border-bottom-left-radius: 6px;
}
.br-bottom-right-6 {
  border-bottom-right-radius: 6px;
}
.br-top-right {
  border-top-right-radius: 8px;
}
.br-top-right-6 {
  border-top-right-radius: 6px;
}

/* END GRADIENT  BLACK BLUE */               


.accordion .card.journey {
  width: 100%!important;
  height: 140px;
}

.card.journey.toggle {
  width: 100%!important;
}

.z-index-neg {
  z-index: -1!important;
}
 .grey-border {
  border: 1px solid #D3D5D6;
  border-radius: 8px;
 }

 #consultingAccordion .accordion-item {
  border: 1px solid #D3D5D6;
  border-radius: 8px;
 }
.border-bottom-8 {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.accordion-button {
  position: relative; /* Ensures text stays above */
  z-index: 2; /* Higher than the gradient */
}

.gradient.head {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1!important; 
  transition: none !important; 
}
.accordion .card.journey {
  max-width: 100%;
}

/* GRADIENT GREEN HORIZONTAL */   
.gradient.green.horizontal {
  width: 100%;
  height: 100%;
  align-items: flex-end;
  position: absolute; 
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column; 
  z-index: 1; 
}
.gradient.green.horizontal .line {
  height: 100%; 
  border: none;
  transition: 0.5s;
  background: linear-gradient(90deg, rgba(250, 250, 250, 0) 24%, #00DC55 100%);

}
.gradient.green.horizontal .line.line1 {
  width: 90%; 
}
.gradient.green.horizontal .line.line2 {
width: 70%; 
}
.gradient.green.horizontal .line.line3 {
width: 50%;
}
.gradient.green.horizontal .line.line4 {
width: 30%;
}
/* END RADIENT GREEN HORIZONTAL */   



.gradient.green-black.sidebar {
  width: 100%;
  height: 100%;
  align-items: flex-end;
  position: absolute; 
  top: 0;
  left: 0;
  display: flex;
  flex-direction: row;
  z-index: -1; 
}

.gradient.green-black.sidebar .line {
  height: 100%; 
  border: none!important;
  transition: 0.5s;
  background: linear-gradient(180deg, #000000 0%, #00DC55 78%, #9EFF69 100%);
}
.gradient.green-black.sidebar .line.line1 {
  height: 22%;
  width: 100%;
  
}
.gradient.green-black.sidebar .line.line2 {
  height: 28%; 
  width: 100%;
}
.gradient.green-black.sidebar .line.line3 {
  height: 32%; 
  width: 100%;
}
.gradient.green-black.sidebar .line.line4 {
  height: 36%; 
  width: 100%;
}
.gradient.green-black.sidebar .line.line5 {
  height: 40%; 
  width: 100%;
}
.gradient.green-black.sidebar .line.line6 {
  height: 46%; 
  width: 100%;
}
.gradient.green-black.sidebar .line.line7 {
  height: 52%; 
  width: 100%;
}

.gradient.pv {
  width: 100%;
  height: 100%;
  align-items: flex-start;
  position: absolute; 
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  z-index: -1; 
}
.gradient.pv .line {
  height: 100%; 
  border: none!important;
  transition: 0.5s;
  background: linear-gradient(90deg, #FFEC45 0%, #FAFAFA 100%);
}
.gradient.pv .line.line1 {
  height: 100%;
  width: 70%;
  
}
.gradient.pv .line.line2 {
  height: 100%; 
  width: 60%;
}
.gradient.pv .line.line3 {
  height: 100%; 
  width: 50%;
}
.gradient.pv .line.line4 {
  height: 100%; 
  width: 40%;
}
.total-height {
  height: 100%;
}
.white-bg {
  background-color: #fafafa;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

@media screen and (min-width: 992px) {
.pv .br-bottom-left {
  border-bottom-left-radius: 0px!important;
  }
}
@media screen and (max-width: 991px) {
  .pv .br-top-right {
    border-top-right-radius: 0px!important;
    }
  .br-8-installations {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
      }    
  .white-bg {
      background-color: #fafafa;
      border-top-right-radius: 0px!important;
      }      
  }