.elementor-832 .elementor-element.elementor-element-6752fb0{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-832 .elementor-element.elementor-element-fbfd790{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:40px;--margin-bottom:40px;--margin-left:0px;--margin-right:0px;--padding-top:60px;--padding-bottom:60px;--padding-left:40px;--padding-right:40px;}.elementor-832 .elementor-element.elementor-element-fbfd790:not(.elementor-motion-effects-element-type-background), .elementor-832 .elementor-element.elementor-element-fbfd790 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://signaturesunrooms.com/wp-content/uploads/2024/03/SS_BorderBox_WhiteBlue.svg");background-position:center center;background-repeat:no-repeat;background-size:contain;}.elementor-832 .elementor-element.elementor-element-47cac7b{text-align:center;}.elementor-832 .elementor-element.elementor-element-47cac7b .elementor-heading-title{font-family:var( --e-global-typography-59db0a9-font-family ), Sans-serif;font-size:var( --e-global-typography-59db0a9-font-size );line-height:var( --e-global-typography-59db0a9-line-height );letter-spacing:var( --e-global-typography-59db0a9-letter-spacing );color:var( --e-global-color-primary );}.elementor-832 .elementor-element.elementor-element-dafb64c > .elementor-widget-container{margin:0% 15% 0% 15%;}.elementor-832 .elementor-element.elementor-element-dafb64c{text-align:center;color:var( --e-global-color-primary );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );}.elementor-832 .elementor-element.elementor-element-7019292{--display:flex;}.elementor-832 .elementor-element.elementor-element-9b9f662 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-832 .elementor-element.elementor-element-2233994{--display:flex;}@media(max-width:1024px){.elementor-832 .elementor-element.elementor-element-fbfd790:not(.elementor-motion-effects-element-type-background), .elementor-832 .elementor-element.elementor-element-fbfd790 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://signaturesunrooms.com/wp-content/uploads/2024/03/SS_BorderBox_Blue_tablet.png");background-size:contain;}.elementor-832 .elementor-element.elementor-element-47cac7b .elementor-heading-title{font-size:var( --e-global-typography-59db0a9-font-size );line-height:var( --e-global-typography-59db0a9-line-height );letter-spacing:var( --e-global-typography-59db0a9-letter-spacing );}.elementor-832 .elementor-element.elementor-element-dafb64c{font-size:var( --e-global-typography-text-font-size );}}@media(max-width:767px){.elementor-832 .elementor-element.elementor-element-6752fb0{--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--padding-top:40px;--padding-bottom:40px;--padding-left:0px;--padding-right:0px;}.elementor-832 .elementor-element.elementor-element-fbfd790:not(.elementor-motion-effects-element-type-background), .elementor-832 .elementor-element.elementor-element-fbfd790 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://signaturesunrooms.com/wp-content/uploads/2024/03/SS_BorderBox_Blue_mobile.png");background-size:contain;}.elementor-832 .elementor-element.elementor-element-fbfd790{--width:320px;--min-height:400px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-832 .elementor-element.elementor-element-47cac7b > .elementor-widget-container{margin:5% 15% 0% 15%;}.elementor-832 .elementor-element.elementor-element-47cac7b .elementor-heading-title{font-size:var( --e-global-typography-59db0a9-font-size );line-height:var( --e-global-typography-59db0a9-line-height );letter-spacing:var( --e-global-typography-59db0a9-letter-spacing );}.elementor-832 .elementor-element.elementor-element-dafb64c > .elementor-widget-container{margin:0% 5% 0% 5%;}.elementor-832 .elementor-element.elementor-element-dafb64c{font-size:var( --e-global-typography-text-font-size );}}/* Start custom CSS */body.elementor-page-832 {
  --clr-primary: var(--e-global-color-primary);
  --clr-secondary: color-mix(in sRGB, var(--e-global-color-secondary), #000 20%);

  --clr-link: var(--clr-primary);
  --clr-link-hover: var(--clr-secondary);

  --roadmap-columns-inline: repeat(14, 1fr);
  --roadmap-rows-inline: auto;
  --roadmap-gap-inline: 1rem;

  --roadmap-icon-size: 80px;
  --roadmap-icon-stroke-width: 5px;
  --roadmap-icon-inner-stroke-width: calc(
    1.875 * var(--roadmap-icon-stroke-width)
  ); 

  --heading-size: var(--e-global-typography-secondary-font-size);
}

.roadmap-wrapper {
  container: roadmap / inline-size;
}

:has(> .roadmap-content) {
  container: roadmap-content / inline-size;
}

.icon-nav--roadmap {
  display: grid;
  position: relative;

  grid-template-columns: var(--roadmap-columns-inline);
  grid-template-rows: var(--roadmap-rows-inline);
  gap: var(--roadmap-gap-inline);

  --_icon-center: calc(var(--roadmap-icon-size) / 2);

  /* the road */
  &::after {
    content: "";
    display: block;
    position: absolute;
    height: 50px;
    width: 100%;
    top: var(--_icon-center);
    transform: translateY(-50%);
    z-index: -1;
    grid-column: 2 / -2;
    grid-row: 1;

    --stroke-width: 14px;
    --dash-length: calc(var(--stroke-width) * 2.5);

    background: transparent
      url(/wp-content/uploads/2024/10/road-tile-simple.svg) center center
      repeat-x;
    background-size: contain;
  }

  .icon-block {
    text-align: center;
    grid-column: auto / span 2;

    a {
      color: var(--clr-primary);
      display: block;
      text-wrap: pretty;
      text-decoration: none;
      transition: all 100ms ease-in-out;
      transform-origin: center var(--_icon-center);

      &::before {
        content: "";
        display: block;
        margin-inline: auto;
        margin-block-end: 1em;
        aspect-ratio: 1 / 1;
        border-radius: 1000vw;

        width: var(--roadmap-icon-size);
        background: currentColor var(--_icon, "") center center no-repeat;
        border: var(--roadmap-icon-inner-stroke-width) solid #fff;
        box-shadow: 0 0 0 var(--roadmap-icon-stroke-width) currentColor,
          0 0px 10px #000;
      }

      &:hover,
      &:focus-visible {
        color: var(--clr-secondary);
        scale: 1.2;
      }
    } 
  }
}

.roadmap-content {
  h2.icon-heading {
    font-size: var(--heading-size);
    margin-block-end: 0;
    color: var(--clr-primary);
    &:target {
      color: var(--clr-secondary);
    }
  }
}
* + h2 {
  margin-block-start: 1rem;
}

    :has( > .roadmap-content) {
     /*outline: 1px solid red;*/
    }
@media screen and (max-width: 1024px) {
  .roadmap-content {
    position: relative;
    margin-inline: calc(1.5 * var(--heading-size) ); 
    &::after {
      content: "";
      display: block;
      position: absolute;
      transform: translateX(-50%);
      left: calc(-1 * var(--heading-size));
      top: 0;
      bottom: 0;
      width: 30px;

      background: transparent url(/wp-content/uploads/2024/10/road-vertical.svg)
        center center repeat-y;
      background-size: contain;
      z-index: -1;
    }
    &::before {
      content: "";
      display: block;
      position: absolute;
      bottom: -30px;
      left: calc(-1 * var(--heading-size));
      transform: translateX(-50%) rotate(180deg);

      border-style: solid;
      border-width: 0 20px 30px 20px;
      border-color: transparent transparent var(--clr-primary) transparent;
    }

    h2.icon-heading {
      --roadmap-icon-stroke-width: 3px;
      position: relative;

      &::before {
        content: "";
        display: block;
        position: absolute;
        top: calc(-2 * var(--roadmap-icon-stroke-width));
        /* left: 0; */
        transform: translateX(calc(-100% - (0.5 * var(--heading-size))));
        aspect-ratio: 1 / 1;
        border-radius: 1000vw;
        width: var(--heading-size);

        background: currentColor var(--_icon, "") center center no-repeat;
        background-size: contain;
        border: var(--roadmap-icon-stroke-width) solid #fff;
        box-shadow: 0 0 0 var(--roadmap-icon-stroke-width) currentColor;
      }
      &:target {
        color: var(--clr-secondary);
      }
    }
  }
}

.icon--planning {
  --_icon: url(/wp-content/uploads/2024/10/icon-planning-i.svg);
}

.icon--builder {
  --_icon: url(/wp-content/uploads/2024/10/icon-builder-i.svg);
}

.icon--design {
  --_icon: url(/wp-content/uploads/2024/10/icon-design-i.svg);
}

.icon--permitting {
  --_icon: url(/wp-content/uploads/2024/10/icon-permitting-i.svg);
}

.icon--construction {
  --_icon: url(/wp-content/uploads/2024/10/icon-construction-i.svg);
}

.icon--inspection {
  --_icon: url(/wp-content/uploads/2024/10/icon-inspections-i.svg);
}

.icon--enjoy {
  --_icon: url(/wp-content/uploads/2024/10/icon-enjoy-i.svg);
}/* End custom CSS */