:root {
    /** Use --dxp-g to make broad changes **/
    --dxp-g-root: #fff;
    --dxp-g-root-contrast: #333333;
    --dxp-g-root-1: #EBFCFF;
    --dxp-g-root-2: #E6F4F1;
    --dxp-g-root-contrast-1: #88A3BE;
    --dxp-g-root-contrast-2: #88A3BE;
    --dxp-g-brand: #5fa40f;
    --dxp-g-brand-contrast: #fff;
    --dxp-g-brand-1: #5fa40f; 
    --dxp-g-brand-2: #989898;
    --dxp-g-brand-3: #B7C1BA;
    --dxp-g-brand-contrast-1: #E7FDFF;
    --dxp-g-brand-contrast-2: #E7FDFF;
    --dxp-g-brand-contrast-3: #E7FDFF;
    --dxp-g-neutral: #76716b;
    --dxp-g-neutral-contrast: #fff;
    --dxp-g-neutral-1: #EBEEEC;
    --dxp-g-footer-contrast: #344A53;
    /** set the font for all root/body text **/
    --dxp-g-root-font-family: "Montserrat",sans-serif;
    /** set the font for headings **/
    --dxp-g-heading-font-family: 'Montserrat', sans-serif;
    --dxp-g-text-heading_large: 3rem;
  
    /** Set the link color **/
  /**  --dxp-c-link-text-color: #000000; */
  
    /** Font for buttons **/
  /**  --dxp-s-button-font-family: Futura; */
  
    --dxp-c-anchor-text-color: #333;
  
   /** --sds-c-button-radius-border: 1.5625rem; */
  
  
    --dxp-c-section-content-spacing-inline-start: 5rem;
    --dxp-c-section-content-spacing-inline-end: 5rem;
    --dxp-c-header-container-spacing-inline-start: 5rem;
    --dxp-c-header-container-spacing-inline-end: 5rem;
    --dxp-c-footer-container-spacing-inline-start: 5rem;
    --dxp-c-footer-container-spacing-inline-end: 5rem;
  
    --sds-c-button-brand-spacing-inline-start: 1.875rem;
    --sds-c-button-brand-spacing-inline-end: 1.875rem;
  }
  
  
  
  @media only screen and (min-width: 48em) {
      h1 {
          font-family: Montserrat;
          font-style: normal;
          font-weight: bold;
          font-size: 2.25rem;
          line-height: 3rem;
          letter-spacing: 0.05em;
      }
      h2 {
          font-family: Montserrat;
          font-style: normal;
          font-weight: bold;
          font-size: 2rem;
          line-height: 2.75rem;
          letter-spacing: 0.05em;
      }
      h3 {
        font-family: Montserrat;
        font-style: normal;
        font-weight: normal;
        font-size: 1.425rem;
        line-height: 1.8125rem;
        letter-spacing: 0.05em;
        color: var(--dxp-g-root-contrast, #333);
      }
      h4 {
        font-style: normal;
        font-weight: normal;
        font-size: 1.425rem;
        line-height: 1.8125rem;
        letter-spacing: 0.05em;
        color: var(--dxp-g-root-contrast, #333);
      }
  }
  
  @media only screen and (max-width: 47.99em) {
      h1 {
          font-family: Montserrat;
          font-style: normal;
          font-weight: bold;
          font-size: 1.75rem;
          line-height: 2.25rem;
          letter-spacing: 0.05em;
      }
      h2 {
          font-family: Montserrat;
          font-style: normal;
          font-weight: bold;
          font-size: 1.5rem;
          line-height: 2rem;
          letter-spacing: 0.05em;
      }
      h3 {
        font-family: Montserrat;
        font-style: normal;
        font-weight: normal;
        font-size: 1.25rem;
        line-height: 1.75rem;
        letter-spacing: 0.05em;
        color: var(--dxp-g-root-contrast, #333);
      }
      h4 {
        font-style: normal;
        font-weight: normal;
        font-size: 1rem;
        line-height: 1.75rem;
        letter-spacing: 0.05em;
        color: var(--dxp-g-root-contrast, #333);
      }
  }
  
  /* p {
      letter-spacing: 0.03rem;
  }
  
  img {
    vertical-align: middle;
  } */
  
  .scroll {
  
      width: 3rem;
      height: 3rem;
      border-color: var(--dxp-g-root-contrast-1);
      border:solid;
      background-color: white;
      position: fixed;
      display: none;
      justify-content: center;
      align-content: center;
      align-items: center;
      bottom: 80px;
      right: 60px;
      opacity: 0.8;
      border-radius: 50%;
      z-index: 9;
      cursor: pointer;
      transition: opacity 0.2s ease-in-out;
      animation: fadeup-scrolltop 0.7s;
  }
  
  @media all and (max-width: 400px) {
      .scroll {
          bottom: 40px;
          right: 40px;
          animation: fadeup-scrolltop-mobile 0.7s;
      }
  }
  
/*   .scroll svg {
      fill: var(--dxp-g-brand-1);
  } */
  
  @keyframes fadeup-content {
      0% {
          opacity: 0;
          position: relative;
          top: 2rem;
      }
      100% {
          opacity: 1;
          position: relative;
          top: 0;
      }
  }
  
  @keyframes fadeup-scrolltop {
      0% {
          opacity: 0;
          bottom: 20px;
      }
      100% {
          opacity: 0.8;
          bottom: 80px;
      }
  }
  
  @keyframes fadeup-scrolltop-mobile {
      0% {
          opacity: 0;
          bottom: 20px;
      }
      100% {
          opacity: 0.8;
          bottom: 40px;
      }
  }