/*
 Theme Name:   Sapphire Falls Web Design
 Description:  Child Theme for Divi
 Author:       John Waraksa
 Template:     Divi
 Version:      1.00
 License:      GNU General Public License v2 or later
 License URI:  https://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  sf
*/


  #sw-credits {
    --crawl-height: clamp(360px, 65vh, 650px);
    --crawl-duration: 240s;

    width: 100%;
    background: #000;
    color: #e6eaff;
  }

  #sw-credits .sw-stage {
    position: relative;
    height: var(--crawl-height);
    overflow: hidden;

    perspective: 500px;
    perspective-origin: 50% 0%;

    /* Fade the text as it approaches the top. */
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      #000 25%,
      #000 100%
    );
    mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      #000 25%,
      #000 100%
    );
  }

  #sw-credits .sw-plane {
    position: absolute;
    inset: 0;

    transform: rotateX(25deg);
    transform-origin: 50% 100%;
  }

  #sw-credits .sw-track {
    position: absolute;
    top: 100%;
    left: 10%;
    width: 80%;

    text-align: center;
    font-family: Arial, sans-serif;
    font-size: clamp(20px, 3vw, 38px);
    font-weight: 700;
    line-height: 1.5;

    animation: sw-crawl var(--crawl-duration) linear infinite;
    animation-play-state: paused;
  }

  #sw-credits .sw-track p {
    margin: 0;
    padding: 0 0 0.8em;
    color: inherit;
  }

  #sw-credits .sw-stage.is-visible:not(.is-paused) .sw-track {
    animation-play-state: running;
  }

  @keyframes sw-crawl {
    from {
      transform: translateY(0);
    }

    to {
      transform: translateY(
        calc(-100% - var(--crawl-height))
      );
    }
  }

  #sw-credits .sw-controls {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px;
  }

  #sw-credits .sw-controls button {
    appearance: none;
    padding: 10px 16px;
    border: 1px solid #e6eaff;
    border-radius: 4px;
    background: #000;
    color: #e6eaff;
    font: inherit;
    cursor: pointer;
  }

  #sw-credits .sw-controls button:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 4px;
  }

  /* Show a readable, nonmoving list when reduced motion is requested. */
  @media (prefers-reduced-motion: reduce) {
    #sw-credits .sw-stage {
      overflow: auto;
      perspective: none;
      -webkit-mask-image: none;
      mask-image: none;
    }

    #sw-credits .sw-plane {
      position: relative;
      transform: none;
    }

    #sw-credits .sw-track {
      position: relative;
      top: auto;
      left: auto;
      width: auto;
      padding: 24px;
      animation: none;
      transform: none;
    }

    #sw-credits .sw-pause {
      display: none;
    }
  }

#sw-credits .sw-controls button {
  box-sizing: border-box;
  margin: 0;
  padding: 10px 16px;
  height: auto;
  min-height: 0;
  font-size: 16px;
  line-height: 1.2;
  vertical-align: middle;
}

/* Prevent inserted line breaks from adding vertical space. */
#sw-credits .sw-controls button br {
  display: none;
}

/* Remove spacing from any inserted paragraph wrappers. */
#sw-credits .sw-controls button p {
  display: inline;
  margin: 0;
  padding: 0;
  font: inherit;
}




#footer-bottom {
    padding: 0 !important;
}

/* --------------------------------------------------
 * External Links (Text Modules Only)
 * -------------------------------------------------- */

.et_pb_text a.external-link {
  padding-right: .2em;
}

.et_pb_text a.external-link::after {
  content: "\e03e"; /* up-right arrow */
  font-family: "ETmodules";
  font-size: .9em;
  margin-left: .15em;
  display: inline-block;
  transform: translateY(-0.1em) rotate(0deg);
  transition: transform 0.25s ease;
  color: var(--gcid-link-color);
}

/* rotate on hover */
.et_pb_text a.external-link:hover::after {
  transform: translateY(-0.1em) rotate(45deg);
}

/* --------------------------------------------------
 * Primary Menu Icon (First Item Only)
 * --------------------------------------------------*/ 

#et-top-navigation #top-menu > li:first-child > a {
  padding-left: 1.5em;
}

#et-top-navigation #top-menu > li:first-child > a::before {
  content: "\e074"; 
  font-family: "ETmodules";
  font-size: 1em;
  line-height: 1;
  margin-right: .25em;
  display: inline-block;
  transform: translateY(-10%);
  vertical-align: middle;
}


/* --------------------------------------------------
 * Typography Spacing (Text Modules)
 * -------------------------------------------------- */

/* Space before headings following content */
:where(.et_pb_text)
  :is(p, ul, ol, blockquote)
  ~ :is(h1, h2, h3, h4, h5, h6) {
  padding-top: .75em;
}

/* Normalize bottom spacing */
:where(.et_pb_text) p:last-of-type {
  padding-bottom: 1em;
}

:where(.et_pb_text)
  :is(p, ul, ol, blockquote):last-child {
  padding-bottom: 0;
}

/* --------------------------------------------------
 * Lists
 * -------------------------------------------------- */

:where(.et_pb_text) ::marker {
  color: var(--gcid-secondary-color);
  font-family: var(--et_global_heading_font);
}

:where(.et_pb_text)
  :is(ol, ul) li:not(:last-child) {
  padding-bottom: .5em;
}

/* --------------------------------------------------
 * Blockquotes
 * -------------------------------------------------- */

:where(.et_pb_text) blockquote {
  position: relative;
  margin: .5em 0 1.5em;
  padding: 1em 1em;
  border: none;
}

:where(.et_pb_text) blockquote::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gcid-primary-color);
  opacity: .05;
  border-radius: 5px;
}

:where(.et_pb_text) blockquote::after {
  content: "\7b"; /* ETmodules quote icon */
  font-family: "ETmodules";
  font-size: 3.5em;
  line-height: 1;
  position: absolute;
  top: -.52em;
  left: -.2em;
  opacity: .8;
  color: var(--gcid-primary-color);
}

/* --------------------------------------------------
 * Links
 * -------------------------------------------------- */

.mobile_menu_bar:before, .mobile_menu_bar:after, #top-menu li.current-menu-ancestor>a, #top-menu li.current-menu-item>a {
    color: var(--gcid-link-color) !important;
}

a, a:hover, a:active {
  text-decoration: underline;
  color: var(--gcid-link-color);
}

:where(.et_pb_text) a {
  transition: text-underline-offset .2s linear;
  text-underline-offset: .24em;
  text-decoration-thickness: .1em;
}

:where(.et_pb_text) a:hover {
  text-underline-offset: .12em;
}