@font-face {
          font-family: "aesthetix-caligraphy";
          src: url("fonts/Aesthetix-reduced.woff2") format("woff2");
      }

      @font-face {
          font-family: "eurostileregular";
          src: url("fonts/eurosti-webfont-reduced.woff2") format("woff2"),
              url("fonts/eurosti-webfont-reduced.woff") format("woff");
          font-weight: normal;
          font-style: normal;
      }

      /* Colors */

      :root {
          --white: #ffffff;
          --dark-text-color: #292929;
          --light-text-color: #5C5C5C;
          --dark-accent-color: #D37713;
          --light-accent-color: rgb(0, 178, 202);
          --highlight-color: #1C86EE;
          --vienna-blue: #1C86EE;
      }

      h1 {
          color: var(--light-accent-color);
          font-family: 'eurostileregular', sans-serif;
          font-size: 5rem;
          letter-spacing: 2px;
      }

      h2 {
          color: var(--dark-text-color);
          font-family: 'eurostileregular', sans-serif;
          font-size: 2.5rem;
      }

      a {
          text-decoration: none;
          font-family: 'eurostileregular', sans-serif;
      }

      p {
          font-family: 'eurostileregular', sans-serif;
          line-height: 24px;
      }

      img.lazy-fade {
          opacity: 0;
          filter: blur(12px);
          transform: translateY(6px) scale(1.01);
          transition:
              opacity 420ms ease,
              filter 700ms ease,
              transform 700ms ease;
          will-change: opacity, filter, transform;
      }

      img.lazy-fade.is-loaded {
          opacity: 1;
          filter: blur(0);
          transform: translateY(0) scale(1);
      }

      @media (prefers-reduced-motion: reduce) {
          img.lazy-fade {
              transition: none;
              filter: none;
              transform: none;
              opacity: 1;
          }
      }


      .aesthetix-caligraphy {
          font-family: "aesthetix-caligraphy", sans-serif;
          font-size: 4rem;
          color: #000000;
      }

      .featured_products {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
      }

      .products {
          width: 100%;
          display: flex;
          flex-direction: column;

          align-items: center;
          justify-content: center;
      }

      .card {
          width: 80%;
          margin: 10px auto 30px auto;
          padding-bottom: 1rem;
          background: #ffffff70;
          border: 3px solid var(--highlight-color);
          border-radius: 10px;
          overflow: hidden;
          transition: transform 0.3s;
      }

      .card-content {
          color: var(--light-text-color);
          padding: 15px;
      }

      .card-content h3 {
          color: var(--dark-text-color);
          font-size: 2.6rem;
          margin: 0;
          transition: color 0.3s;
      }

      .card-content h3::after {
          content: '';
          display: block;
          width: 100px;
          height: 2px;
          background: var(--vienna-blue);
          margin: 20px 0;
      }

      .card:hover .card-content h3 {
          color: var(--dark-accent-color);
          transition: color 0.3s;
      }

      .card:hover .card-content .read-more {
          display: inline;
      }

      .card-content p {
          color: var(--light-text-color);
          font-size: 2rem;
          line-height: normal;
          margin: 10px 0 0;
      }

      .card:hover {

          transform: translateY(-5px);
          transition: transform 0.3s;
      }

      .card:hover .card-content p {
          color: var(--dark-text-color);
          transition: color 0.3s;
      }

      .card img {
          display: block;
          height: auto;
          width: 100%;
      }

      .companies {
          display: flex;
          flex-direction: column;
          justify-content: center;
      }

      .companies a {
          color: #000000;
          text-decoration: none;
          transition: all 0.3s;
      }

      .companies a:hover {
          transform: translateY(-5px);
          transition: all 0.3s;
      }

      .companies h2 {
          margin: 0 0;
      }

      .container {
          margin: 0 auto;
          max-width: 100%;
          padding: 15px;
      }

      .contact {
          font-family: "eurostileregular", sans-serif;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          width: 300px;
          height: 100px;
          background-color: var(--vienna-blue);
          border-radius: 5px;
      }

      .contact a {
          color: var(--white);
          font-size: 1.8rem !important;
          text-decoration: none;
      }

      .contact:hover {
          transform: translateY(-5px);
          transition: transform 0.3s ease;
      }

      .download {
          font-family: "eurostileregular", sans-serif;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 300px;
          height: 100px;
          text-align: center;
          background-color: var(--vienna-blue);
          border-radius: 5px;
          transition: all 0.3s;
      }

      .download a {
          color: var(--white);
          font-family: "eurostileregular", sans-serif;
          display: inline-block;
          font-size: 1.8rem;
          text-decoration: none;
      }

      .download:hover {

          transform: translateY(-5px);
          transition: all 0.3s;
      }

      .header-links {
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          gap: 1rem;
          height: 200px;
      }

      .plus {
          font-family: "upstream-raleway", sans-serif;
          font-weight: 300;
          font-size: 96px;
          color: var(--vienna-blue);
      }

      .product-list {
          display: flex;
          flex-direction: column;
          justify-content: space-around;
      }

      .read-more {
          display: none;
          color: var(--dark-accent-color);
      }

      .section_header {
          align-items: center;
          display: flex;
          gap: 15px;
          justify-content: center;
          padding-left: 5px;
          padding-top: 25px;
      }

      .section_header a {
          padding-top: 5px;
      }

      .section_header h3 {
          color: var(--dark-text-color);
          font-size: 48px;
      }

      .sociallinks {
          border-left: var(--white) solid 2px;
          padding-left: 10px;
      }

      .sociallinks a {
          padding: 0 12px;
      }

      .social-icon-size {
          height: 60px;
          width: 60px;
      }

      .up {
          width: 100%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          color: var(--vienna-blue);
          font-family: "eurostyle", sans-serif;
      }

      .up a {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          text-decoration: none;
          color: var(--vienna-blue);
      }

      .up h4 {
          font-size: 3rem;
          margin: 0.5rem 0 0 0;
          line-height: 20px;
      }

      .up p {
          font-size: 0.9rem;
      }

      .up-blue {
          color: #82d1e0;
      }

      .upstream {
          font-family: "upstream-raleway", sans-serif;
          letter-spacing: 1px;
      }

      footer {
          color: var(--white);
          margin-top: 20px;
          padding: 10px 0;
          text-align: center;
      }

      footer p {
          font-size: 0.6rem;
          margin: 0;
      }

      header {
          display: flex;
          flex-direction: column;
          justify-content: center;
          gap: 2rem;
          align-items: center;
          border-bottom: 2px solid var(--light-text-color);
          color: var(--white);
          text-align: center;
          padding: 2rem;
      }

      header h1 {
          font-size: 2.75rem;
      }

      @media (min-width: 1000px) {
          header {
              height: auto;
              padding: 5rem;
              display: flex;
              flex-direction: column;
              justify-content: center;
              gap: 4rem;
          }

          h1 {
              font-size: 4rem;
          }

          .upstream-logo {
              height: 75px;
              width: auto;
          }

          .companies {
              width: 600px;
          }

          .companies a {
              font-size: 30px;
          }

          .header-links {
              display: flex;
              flex-direction: row;
              align-items: center;
              justify-content: space-around;
              height: auto;
              gap: 3rem;
          }

          .contact {
              margin-top: 0px;
          }

          .plus {
              font-size: 72px;
          }

          .featured_products h1 {
              width: 100%;
              text-align: center;
          }

          .section_header h3 {
              font-size: 42px;
          }

          .aesthetix-caligraphy {
              font-size: 60px;
          }

          .card {
              margin: 0 10px;
              width: 370px;
          }

          .card-content h3 {
              font-size: 1.6rem;
          }

          .card-content p {
              font-size: 1.3rem;
              line-height: 1.5rem;
              letter-spacing: 0.02em;
          }

          .container {
              max-width: 1500px;
              display: flex;
              flex-direction: column;
              justify-content: center;
              margin: 0 auto;
              padding: 15px 0;
          }

          .featured_news {
              display: flex;
              flex-direction: row;
              flex-wrap: wrap;
              align-items: flex-start;
              justify-content: center;
              gap: 2rem;
              padding: 0 3rem;
          }

          .showsite_news {
              width: 400px;
              margin: 0 20px;
          }

          .products {
              max-width: 1300px;
              margin: 0 auto;
          }

          .product-list {
              flex-direction: row;
              flex-wrap: wrap;
              justify-content: center;
              row-gap: 25px;
              margin-bottom: 4rem;
          }

          .section_header::before {
              content: "";
              display: inline-block;
              width: 70px;
              height: 2px;
              background-color: var(--highlight-color);
              margin-right: 15px;
          }

          .section_header {
              padding-bottom: 1rem
          }

          .section_header::after {
              content: "";
              display: inline-block;
              width: 70px;
              height: 2px;
              background-color: var(--highlight-color);
              margin-right: 15px;
          }

          .sociallinks a {
              padding: 0 15px;
          }

          .social-icon-size {
              height: 36px;
              width: 36px;
              transition: transform 0.3s;
          }

          .social-icon-size:hover {
              transform: translateY(-5px);
              transition: transform 0.3s;
          }

          footer p {
              font-size: 1rem;
              margin: 0.5rem 0;
          }
      }