/* SHED FEATURES TABLE/SECTION */

.features {
  margin: 0rem;
  padding: 2rem 1rem;
  background-image: linear-gradient(to top, #2125298a, #2125298a), url(../images/background-images/webp/wood-background.webp);
  background-size: cover;
  background-attachment: fixed;
}

.features .respon-table {
  width: 95%;
  background-color: var(--bg-grey);
  text-align: center;
  margin: 0rem auto;
  color: var(--bg-dark);
  font-size: 1.2rem;
  border-radius: .5rem;
  box-shadow: 0px 10px 15px hsl(0, 0%, 24%);
}

.features .respon-table .tbody {
  border-radius: .5rem;
  overflow: hidden;
}

.features .respon-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  border: none;
}

.features .cell {
  border: var(--table-border) 0.01rem solid;
  text-align: left;
  padding: 1rem 1rem;
  width: 50%;
  line-height: 1.7rem;
}

.features ul {
  margin: 0rem 0rem 0 1.2rem;
  padding: 0rem;
  height: 100%;
}

.features li {
  padding-left: 0.5rem;
  align-content: center;
  height: 90%;
}

/* FEATURES TABLE RESPONSIVE! */

@media only screen and (max-width: 768px) {
  .features {
    padding: 1.5rem 1rem;
  }

  .features .respon-table {
    width: 100%;
    background-color: var(--bg-grey);
    text-align: center;
    margin: 0rem;
    color: var(--bg-dark);
    border-radius: 1rem;
  }

  .features .respon-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    border: none;
  }

  .features .cell {
    padding: 1rem 1.5rem;
    width: 100%;
  }

  .features ul {
    margin: 0rem 0rem 0 1.2rem;
    padding: 0rem;
  }

  .features li {
    padding-left: 0.5rem;
  }
}

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

/* SHED PRICING TABLE/SECTION */

.pricing {
  margin: 0rem;
  padding: 2rem 1rem;
  background-image: linear-gradient(to top, #212529a2, #212529a2), url(../images/background-images/webp/wood-2-background.webp);
  background-size: cover;
  background-attachment: fixed;
}

.pricing .respon-table {
  width: 95%;
  color: var(--bg-dark);
  background-color: var(--bg-grey);
  margin: 0rem auto;
  text-align: center;
  font-size: 1.5rem;
  letter-spacing: 0.05rem;
  border-radius: 0.5rem;
  display: flex;
  flex-direction: column;
  box-shadow: 0px 10px 15px hsl(0, 0%, 24%);
}

@media only screen and (min-width: 1400px) {
  .pricing .respon-table {
    width: 80%;
  }
}

.pricing .thead {
  background-color: var(--text-light);
  border-top-left-radius: .5rem;
  border-top-right-radius: .5rem;
}

.pricing .t-heading {
  font-size: 2rem;
  font-weight: 500;
  padding: 1rem 0.5rem;
  width: 50%;
}

.pricing .respon-row {
  display: flex;
  flex-direction: row;
}

.pricing .cell {
  padding: 1rem;
  width: 50%;
  align-content: center;
  line-height: 1.7rem;
}

.pricing .tbody .respon-row:nth-child(2n) {
  background-color: var(--text-light);
}

.pricing .tbody .respon-row:hover {
  background-color: var(--dusty-blue);
  color: var(--bg-light);
}

.pricing .respon-row.end {
  overflow: hidden;
  border-bottom-left-radius: .5rem;
  border-bottom-right-radius: .5rem;
}

/* MEDIA CHANGE SCREEN SIZE RESPONSIVE */

@media only screen and (max-width: 768px) {
  .pricing {
    padding: 1.5rem 1rem;
  }

  .pricing .respon-table {
    width: 100%;
    font-size: 1.5rem;
  }

  .pricing .t-heading {
    font-size: 1.7rem;
    font-weight: 500;
  }

  .pricing .cell svg {
    display: none;
  }
}

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

  .pricing {
    background-attachment: unset;
  }
}