/* 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;
  color: var(--text-light);
}

.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;
  background-color: hsl(40, 4%, 26%);
  background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%236b5f47' fill-opacity='0.24' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
  box-shadow: inset 0 5px 3px hsl(40, 4%, 25%), inset 0 -5px 3px hsl(40, 4%, 25%);
}

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

@media only screen and (min-width: 768px) {
  .section-1 .caption{
    box-shadow: inset 0 15px 20px hsl(40, 4%, 25%), inset 0 -15px 20px hsl(40, 4%, 25%);
  }

  .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.4rem;
  }

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

/* Jump to section buttons */

.title .jump{
  justify-content: space-between;
  width: max-content;
  padding-right: 1rem;
}

.title .jump h6{
  align-items: baseline;
  padding-bottom: .5rem;
}

  .title .jump .sections{
    flex-wrap: wrap;
    justify-content: center;
    width: 525px;
  }

    .title .jump .sections a{
      width: 20%;
      min-width: 105px ;
      max-width: 105px;
      flex-wrap: wrap;
    }

    .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: 1105px) {
  .title .jump h6{
    padding-top: .75rem;
  }
  
  .title .jump .sections{
    flex-wrap: wrap;
    justify-content: center;
    width: 320px;
  }

   .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;
  } 
}

/* ALL UPGRADES SECTIONS */

.upgrade-section {
  margin: 0rem;
  padding: 2rem 0rem 0rem 0rem;
  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;
  box-shadow: inset 0 3px 3px hsl(0, 0%, 22%), inset 0 -3px 3px hsl(0, 0%, 22%);
}

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

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

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

/* UPGRADES CAROUSEL */

.upgrade-section .content .carousel.slide {
  height: 23rem;
  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: 23rem;
  margin: 0rem auto;
  object-position: center;
}

.carousel.slide .carousel-item .carousel-caption {
  padding: .5rem;
  background-color: #21252975;
  width: max-content;
  left: 28%;
}

.carousel.slide .carousel-inner {
  width: 88%;
  align-content: center;
  display: flex;
}

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

@media only screen and (max-width: 768px) {
  .upgrade-section .content .carousel.slide {
  height: 15.5rem;
}

.carousel.slide .carousel-item img {
  height: 15.5rem;
}
}

/* @media only screen and (min-width: 768px) {
  .upgrade-section .content .carousel.slide {
  height: 18rem;
}

.carousel.slide .carousel-item img {
  height: 18rem;
}
} */


/* 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;
}