/*Colors*/
.hero {
  position: relative; }
  .hero .hero-bg-wrapper {
    position: relative;
    width: 100%; }
    @media only screen and (max-width: 1250px) {
      .hero .hero-bg-wrapper {
        height: 600px; } }
    .hero .hero-bg-wrapper .hero-bg {
      width: 100%;
      height: auto;
      display: block;
      position: relative; }
      @media only screen and (max-width: 1250px) {
        .hero .hero-bg-wrapper .hero-bg {
          position: absolute;
          -o-object-fit: cover;
          object-fit: cover;
          height: 100%;
          top: 0;
          left: 0; } }
  .hero .hero-content {
    position: absolute;
    top: 20%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 90%; }
    .hero .hero-content span {
      display: block;
      text-align: center;
      letter-spacing: .04em;
      font-size: clamp(20px, 2vw, 28px);
      text-transform: uppercase;
      font-weight: 700;
      margin-bottom: clamp(20px, 2.5vw, 40px); }
      .hero .hero-content span large {
        display: block;
        font-size: clamp(36px, 5vw, 75px);
        letter-spacing: .07em;
        margin-bottom: clamp(10px, 1.5vw, 20px); }
  .hero .icon-wrapper {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30%;
    aspect-ratio: 1/1;
    background: -webkit-radial-gradient(bottom left, circle, rgba(90, 90, 90, 0.6) 0%, rgba(90, 90, 90, 0) 60%);
    background: -o-radial-gradient(bottom left, circle, rgba(90, 90, 90, 0.6) 0%, rgba(90, 90, 90, 0) 60%);
    background: radial-gradient(circle at bottom left, rgba(90, 90, 90, 0.6) 0%, rgba(90, 90, 90, 0) 60%); }
    @media only screen and (max-width: 800px) {
      .hero .icon-wrapper {
        display: none; } }
    .hero .icon-wrapper .hero-icon {
      position: absolute;
      bottom: 2.5vw;
      left: 2.5vw;
      width: clamp(100px, 11vw, 180px);
      height: auto;
      display: block; }
      .hero .icon-wrapper .hero-icon.animated {
        -webkit-animation: circle 30s infinite;
        animation: circle 30s infinite;
        -webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        -webkit-transform-origin: center;
        -ms-transform-origin: center;
        transform-origin: center; }

.associations .associations-list {
  padding: 0;
  list-style-type: none;
  margin-block: clamp(20px, 4.5vw, 60px) 0;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (auto)[4];
  grid-template-columns: repeat(4, auto);
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  max-width: 1600px;
  margin-inline: auto;
  gap: 20px; }
  @media only screen and (max-width: 1000px) {
    .associations .associations-list {
      -ms-grid-columns: (auto)[2];
      grid-template-columns: repeat(2, auto);
      -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
      justify-content: space-evenly; } }
  @media only screen and (max-width: 500px) {
    .associations .associations-list {
      -ms-grid-columns: auto;
      grid-template-columns: auto; } }
  .associations .associations-list li a img {
    height: clamp(75px, 6.5vw, 110px);
    width: auto;
    display: block;
    -webkit-transition: .3s all ease;
    -o-transition: .3s all ease;
    transition: .3s all ease; }
    @media only screen and (max-width: 1000px) {
      .associations .associations-list li a img {
        height: clamp(75px, 11vw, 110px); } }
  .associations .associations-list li a:hover img, .associations .associations-list li a:focus img, .associations .associations-list li a:active img {
    -webkit-transform: scale(0.96);
    -ms-transform: scale(0.96);
    transform: scale(0.96); }

@media only screen and (max-width: 800px) {
  .roof-bg.uneven-split .img-wrapper {
    display: none; } }

@media only screen and (max-width: 600px) {
  .roof-bg h1, .roof-bg h2, .roof-bg h3, .roof-bg p {
    text-align: center; } }

.roofing-types .types-list {
  padding: 0;
  list-style-type: none;
  margin-block: clamp(20px, 4.5vw, 60px) 0;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[2];
  grid-template-columns: repeat(2, 1fr);
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  gap: 55px; }
  @media only screen and (max-width: 1200px) {
    .roofing-types .types-list {
      -ms-grid-columns: 100%;
      grid-template-columns: 100%;
      gap: 0; } }
  .roofing-types .types-list li input {
    display: none; }
  .roofing-types .types-list li label {
    font-size: 18px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    font-weight: 600;
    padding-block: 20px;
    border-bottom: 1px solid #e7e7e7;
    cursor: pointer;
    -webkit-transition: .3s all ease;
    -o-transition: .3s all ease;
    transition: .3s all ease; }
    @media only screen and (min-width: 1201px) {
      .roofing-types .types-list li label {
        display: none; } }
    .roofing-types .types-list li label:hover, .roofing-types .types-list li label:active, .roofing-types .types-list li label:focus {
      color: #fbcb07; }
    .roofing-types .types-list li label svg {
      width: 10px;
      height: 6px;
      display: block;
      fill: currentColor;
      -webkit-transition: .3s all ease;
      -o-transition: .3s all ease;
      transition: .3s all ease; }
    .roofing-types .types-list li label.active svg {
      -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
      transform: rotate(180deg); }
  @media only screen and (max-width: 1200px) {
    .roofing-types .types-list li .mobile-expand {
      display: none; } }
  @media only screen and (max-width: 1200px) {
    .roofing-types .types-list li .inner {
      padding-block: 40px;
      display: -ms-grid;
      display: grid;
      -ms-grid-columns: 35% 1fr;
      grid-template-columns: 35% 1fr;
      gap: 40px;
      border-bottom: 1px solid #e7e7e7; } }
  @media only screen and (max-width: 850px) {
    .roofing-types .types-list li .inner {
      -ms-grid-columns: 100%;
      grid-template-columns: 100%;
      gap: 20px; } }
  .roofing-types .types-list li .inner .img-wrapper {
    margin-bottom: 35px;
    border-radius: 10px;
    overflow: hidden;
    aspect-ratio: 2/1;
    position: relative;
    width: 100%; }
    @media only screen and (max-width: 1200px) {
      .roofing-types .types-list li .inner .img-wrapper {
        aspect-ratio: 5/4; } }
    @media only screen and (max-width: 850px) {
      .roofing-types .types-list li .inner .img-wrapper {
        aspect-ratio: 5/2;
        margin-bottom: 20px; } }
    .roofing-types .types-list li .inner .img-wrapper img {
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      -o-object-fit: cover;
      object-fit: cover;
      position: absolute; }
  .roofing-types .types-list li .inner .content .learn {
    position: relative;
    font-weight: 700;
    text-transform: uppercase;
    padding-right: 30px;
    color: #000000;
    -webkit-transition: .3s all ease;
    -o-transition: .3s all ease;
    transition: .3s all ease; }
    .roofing-types .types-list li .inner .content .learn:hover, .roofing-types .types-list li .inner .content .learn:active, .roofing-types .types-list li .inner .content .learn:focus {
      text-decoration: none;
      color: #fbcb07; }
    .roofing-types .types-list li .inner .content .learn:after {
      position: absolute;
      left: 100%;
      top: 50%;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
      border-left: 7px solid currentColor;
      border-top: 5px solid transparent;
      border-bottom: 5px solid transparent;
      content: '';
      display: block; }
  @media only screen and (max-width: 850px) {
    .roofing-types .types-list li .inner .content h4, .roofing-types .types-list li .inner .content p {
      text-align: left; } }

@-webkit-keyframes circle {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0); }
  100% {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg); } }

@keyframes circle {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0); }
  100% {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg); } }