/* HEADER */

.large-header {
  background-image: url(../images/headers/webP/upgrades.webp);
  background-position: center;
  height: 60vh;
  margin-bottom: 0rem;
}

.gradient {
  /* background-image: linear-gradient(to right, #212529ab, #21252958, #21252900, #21252900); */
  background-image: linear-gradient(to right, #212529ad, #2125299a, #2125297b, #21252943, #21252900, #21252900);
  height: 100%;
  width: 100%;
}

@media only screen and (max-width: 992px) {
  .gradient {
    background-image: linear-gradient(to right, #212529c9, #2125298d, #21252952, #2125291f);
  }
}

/* JUMP TO SECTION */

.btn-group {
  flex-wrap: wrap;
}

/* SECTION 1 Intro*/

.section-1 {
  margin: 0rem;
  padding: 0rem;
  /* background-color: var(--dusty-blue); */
  color: var(--text-light);
  /* background-image: linear-gradient(to bottom, hsl(0, 0%, 20%), hsl(0, 0%, 25%), #21252900, #21252900); */
}

.section-1 .section-title {
  margin: 0 0 0.5rem 0rem;
}

.section-1 img {
  padding: 0.3rem 0rem 0rem 0rem;
  object-fit: cover;
  overflow: hidden;
  background-size: cover;
}

.section-1 .caption{
  padding: 0rem 1rem;
}

.section-1 .caption p {
  font-size: 1.2rem;
  text-align: center;
}

.section-1 .text {
  padding: 0rem;
  display: flex;
  flex-direction: column;
}

.section-1 .text-1{
  padding: 1rem .5rem;
}

.section-1 .text-1 p {
  margin: 0rem;
  padding: 0.5rem 1.5rem;
}

.section-1 .text-2 {
  background-color: var(--bg-dark-blue);
  padding: 1rem 0.5rem;
}

.section-1 .text-2 .section {
  padding: 0rem 0.5rem;
}

.section-1 .text-2 .section p {
  padding: 0.5rem;
}

.section-1 .text-2 .contact {
  padding: 0rem;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.section-1 .text-2 .contact h6 {
  padding-top: 0.5rem;
}

@media only screen and (min-width: 991px) {
  .section-1 img {
    object-position: left;
  }
}

@media only screen and (min-width: 1400px) {
  .section-1 p {
    font-size: 1.5rem;
  }

  .section-1 .text-2 h6{
    font-size: 1.3rem;
  }
}

/* Jump to section buttons */

  .title .jump .sections{
    display: flex;
    width: 100%;
    border-radius: .5rem;
    overflow: hidden;
    flex-wrap: wrap;
    justify-content: center;
  }

    .title .jump .sections a{
      width: 20%;
      color: var(--text-light);
      text-align: center;
      align-content: center;
      background-color: var(--bg-dark-blue);
      padding: .6rem .1rem;
      min-width: 100px ;
      flex-wrap: wrap;
    }

    .title .jump .sections a:hover{
      background-color: var(--dark-blue-shadow);
    }

    .title .jump .sections a p{
      padding: 0rem;
      font-size: 1rem;
      height:20px;
      margin: auto auto;
      align-items: center;
      justify-content: center;
      display: flex;
    }

    .title .jump .sections .window-btn {
      border-top-left-radius: .5rem;
      border-bottom-left-radius: .5rem;
    } 
      .title .jump .sections .window-btn p{
        border-left: 2px var(--text-light) solid;
      } 

      .title .jump .sections .roof-btn p{
        border-left: 2px var(--text-light) solid;
      } 

      .title .jump .sections .siding-btn p{
        border-left: 2px var(--text-light) solid;
        border-right: 2px var(--text-light) solid;
      } 

      .title .jump .sections .door-btn p{
        border-right: 2px var(--text-light) solid;
      } 

  .title .jump .sections .misc-btn {
    border-top-right-radius: .5rem;
    border-bottom-right-radius: .5rem;
  } 
    .title .jump .sections .misc-btn p{
      border-right: 2px var(--text-light) solid;
    } 

@media only screen and (min-width: 768px) and (max-width: 960px) {
  .title .jump .sections .door-btn p{
    border-right: 2px var(--text-light) solid;
    border-left: 2px var(--text-light) solid;
  } 

  .title .jump .sections .siding-btn {
      border-top-right-radius: .5rem;
      border-bottom-right-radius: .5rem;
  } 

  .title .jump .sections .door-btn {
    border-top-left-radius: .5rem;
    border-bottom-left-radius: .5rem;
  } 

}

@media only screen and (min-width: 960px) and (max-width: 1500px) {
  .title .jump .sections .misc-btn p{
    border-right: 2px var(--text-light) solid;
    border-left: 2px var(--text-light) solid;
  } 

  .title .jump .sections .door-btn {
    border-top-right-radius: .5rem;
    border-bottom-right-radius: .5rem;
  } 

  .title .jump .sections .misc-btn {
    border-top-left-radius: .5rem;
    border-bottom-left-radius: .5rem;
  } 
}

/* ALL UPGRADES SECTIONS */

.upgrade-section {
  margin: 0rem;
  padding: 2rem 1rem 0rem 1rem;
  border-top: 3px solid #cbd2dc80;
  border-bottom: none;
  color: var(--text-light);
  background-position: center;
  background-attachment: fixed;
  background-size: cover;
}

#window.upgrade-section,#siding.upgrade-section,#misc.upgrade-section {
  background-image: linear-gradient(to top, #212529a2, #212529a2), url(../images/background-images/webp/wood-2-background.webp);
}

#door.upgrade-section,#roof.upgrade-section {
  background-image: linear-gradient(to top, #2125298a, #2125298a), url(../images/background-images/webp/wood-background.webp);
}

.upgrade-section .section-title {
  margin: 0 0 2rem 0rem;
}

.upgrade-section .sub-heading {
  margin: 0rem;
}

.upgrade-section .content {
  padding: 0rem;
  display: flex;
  flex-direction: column;
}

.upgrade-section .content p.intro {
  padding: 1rem 1rem 0rem 1rem;
  font-style: italic;
}

.upgrade-section .content .sub-section {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-self: flex-start;
}

.upgrade-section .content .text {
  display: flex;
}

.upgrade-section .text .option {
  display: flex;
  flex-direction: row;
  padding: 1rem 0.7rem;
  margin: 1rem 0rem;
  background-color: #2125297b;
}

.upgrade-section .content .option p {
  padding: 0rem;
}

.upgrade-section .content .option .price {
  text-align: right;
  align-self: center;
  padding-right: 10%;
}

@media only screen and (max-width: 1105px) {
  .upgrade-section {
    background-attachment: unset;
  }
}

/* UPGRADES CAROUSEL */

.upgrade-section .content .carousel.slide {
  height: 25rem;
  padding: 0rem;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-self: center;
}

.carousel.slide .carousel-item img {
  object-fit: contain;
  overflow: hidden;
  height: 25rem;
  margin: 0rem auto;
  object-position: center;
}

.carousel.slide .carousel-item .carousel-caption {
  padding: 0rem;
}

.carousel.slide .carousel-inner {
  width: 88%;
}

.carousel.slide .carousel-control-prev,.carousel-control-next {
  width: 6%;
}

/* BOTTOM SUB CONTENT      */

.upgrade-section .sub-content {
  padding: 1rem 1.5rem;
  margin: 0rem 0rem 0rem -1rem;
  background-color: var(--bg-dark-blue);
  border: 3px solid #cbd2dc80;
  border-bottom: none;
}

.upgrade-section .sub-content p {
  padding: 0.25rem 0rem;
  font-size: 1rem;
}

/* DOOR UPGRADE INTRO TEXT */

.upgrade-section#door .content p.intro {
  padding: 1rem 0rem 0rem 1rem;
}

/* SIDING UPGRADES */

#siding.upgrade-section .content {
  padding: 0rem 1rem 2rem 2rem;
}

#siding.upgrade-section .content .text {
  flex-direction: column;
  justify-content: center;
}

#siding.upgrade-section .content .text p {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 1.5rem;
}

#siding.upgrade-section .content .text ul {
  padding: 0rem;
  margin: 0rem;
  list-style-position: inside;
}

#siding.upgrade-section .content .text li {
  background-color: #2125297b;
  padding: 1rem;
  margin: 1rem 0rem;
  font-size: 1.2rem;
}

/* ROOF PITCH/OVERHANG UPGRADE SUB-SECTION */

.upgrade-section #pitch-overhang.content .text {
  flex-direction: column;
}