@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  img,
  picture {
    max-width: 100%;
    height: auto;
    display: block;
  }

  body {
    min-height: 100vh;
    line-height: 1.5;
  }

  h1,
  h2,
  h3,
  h4,
  button,
  input,
  label {
    line-height: 1.1;
  }

  ul[role="list"],
  ol[role="list"] {
    list-style: none;
  }

  h1,
  h2,
  h3,
  h4 {
    text-wrap: balance;
  }

  p,
  li {
    text-wrap: pretty;
  }

  a:not([class]) {
    text-decoration-skip-ink: auto;
    color: currentColor;
  }

  input,
  button,
  select {
    font-family: inherit;
    font-size: inherit;
  }
}

@layer components {
  :root {
    text-size-adjust: none;
    -moz-text-size-adjust: none;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: none;
    -webkit-font-smoothing: antialiased;
    -ms-text-size-adjust: none;

    font-size: clamp(1.25rem, 1.25vw + 0.5rem, 1.5rem);

    --clr-white: #ffffff;
    --clr-black: #000;
    --clr-orange: #c93f1d;
    --clr-orange-200: #fe5000;
    --clr-grey-100: #141414;
    --clr-grey-200: #1a1a1a;
    --clr-grey-300: #181818;
    --clr-grey-400: #767776;
    --clr-grey-500: #8e8f8e;
    --clr-grey-600: #d4d6d4;
    --clr-grey-700: #eceeec;

    :focus {
      outline: 2px solid var(--clr-orange-200);
      outline-offset: 2px;
    }

    @media (prefers-reduced-motion: no-preference) {
      scroll-behavior: smooth;
    }
  }

  .main-heading-container {
    position: relative;
    margin-bottom: clamp(75px, 18vw, 112px);
    text-transform: capitalize;
  }

  .main-heading {
    font-size: clamp(2rem, 8vw, 2.25rem);
    font-family: "Castoro", serif;
    font-weight: 400;
  }

  .main-heading::before {
    font-size: clamp(6.5rem, 20vw, 8rem);
    content: "01";
    position: absolute;
    font-family: "Public Sans", sans-serif;
    font-weight: 600;
    color: rgb(212, 214, 212);
    opacity: 0.5;
    z-index: -1;
    bottom: -0.35em;
  }

  .main-btn {
    font-size: max(11.25px, 0.35rem);
    display: block;
    text-decoration: none;
    text-transform: uppercase;
    width: 75%;
    max-width: 400px;
    letter-spacing: 0.2rem;
    border: 2px solid var(--clr-white);
    margin-bottom: 1.35em;
    padding-inline: 2em;
    padding-block: 1.5em;
  }

  @keyframes fadeIn {
    0% {
      opacity: 0;
    }
    50% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  @keyframes slideIn {
    from {
      transform: translateY(80px);
    }
    to {
      transform: translateY(0);
    }
  }

  @keyframes slideOut {
    from {
      transform: translateY(-80px);
    }
    to {
      transform: translateY(0);
    }
  }

  @keyframes slideAcross {
    0% {
      transform: translateX(-1000px);
    }
    50% {
      transform: translateX(-400px);
    }
    100% {
      transform: translateX(0);
    }
  }
}

@layer base {
  body {
    font-size: 1rem;
    font-family: "Public Sans", sans-serif;
    font-weight: 400;
    color: var(--clr-grey-200);
    animation: fadeIn 1s ease-in;
  }

  /* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */
  /* \\\\\\\\\\\\\\\\\\\\\\\      ***HEADER***       \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */
  /* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */

  .header,
  .header-background {
    background: var(--clr-grey-200);
    padding-block: max(18px, 0.4em);
    position: absolute;
    width: 100%;
    max-width: 1800px;
    top: 0;
    left: 0;
    right: 0;
    margin-inline: auto;
    z-index: 10;
    animation: fadeIn 3.5s forwards;
  }

  .header-background {
    border-bottom: 1px solid #272525;
    min-height: min(4em, 78px);
  }

  .header--flex {
    justify-content: space-between;
    align-items: center;
    width: 95%;
    max-width: 1800px;
    margin-inline: auto;
  }

  .hudson-image {
    margin-left: 0.5rem;
    z-index: 10;
  }

  .animate-end {
    animation: none;
  }

  @media (min-width: 67.5rem) {
    .header,
    .header-background {
      width: 93%;
      top: 2%;
      left: 3.5%;
    }
  }

  /* Styling for header-bar when stuck to the top of the screen */
  .sticky {
    position: fixed;
    min-width: 100%;
    top: 0;
    left: 0;
    z-index: 999;
    animation: slideOut 0.5s;
  }

  .header-flex-sticky {
    width: 85%;
    max-width: 1400px;
  }

  /* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */
  /* \\\\\\\\\\\\\\\\\\\\\\\      ***NAV-BAR***       \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */
  /* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */

  .nav-bar {
    position: absolute;
    background: var(--clr-grey-300);
    padding: 0.4em 1.5em;
    right: 0;
    top: -9em;
    transition: transform 1.6s ease-in;
    transition-timing-function: linear(
      0,
      0.359 12%,
      0.836 30.5%,
      1 37.8%,
      0.909 43.9%,
      0.887 46.8%,
      0.88 49.7%,
      0.902 55.1%,
      1 65.5%,
      0.978 69.2%,
      0.97 72.9%,
      1 84.5%,
      1
    );
    box-shadow: 2px 2px 5px var(--clr-grey-300);
    opacity: 0;
    pointer-events: none;
    z-index: 5;
    transform: translateY(-100%);
    transition: transform 6s, opacity 0.3s;
  }

  .nav-bar.hamburger-btn__open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(140%); 
    transition: transform 0.6s ease-in-out;
  }

  .nav-bar__list {
    list-style: none;
    flex-direction: column;
  }

  .nav-bar__item {
    padding-block: 0.3em;
  }

  .nav-bar a {
    font-size: 0.7rem;
    text-decoration: none;
    color: var(--clr-grey-500);
    transition: color 0.8s ease;
  }

  .nav-bar a.active {
    color: var(--clr-white);
  }

  .hamburger-btn {
    width: 30px;
    height: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
    border: none;
    background-color: transparent;
    z-index: 10;

    span {
      height: 1px;
      background: var(--clr-grey-600);
      border-radius: 2px;
      transition: transform 0.6s ease, opacity 0.3s;
    }
  }

  .hamburger-btn.active span:first-child {
    transform: rotate(405deg) translate(5.7px, 5.7px);
  }

  .hamburger-btn.active span:nth-child(2) {
    opacity: 0;
  }

  .hamburger-btn.active span:last-child {
    transform: rotate(-405deg) translate(10px, -10px);
  }

  .hamburger-btn:hover span,
  .hamburger-btn:focus-visible span {
    background: var(--clr-white);
  }

  .nav-bar__links {
    &:hover,
    &:focus-visible {
      color: var(--clr-white);
    }
  }

  .hamburger-btn:active,
  .nav-bar__links:active {
    opacity: 0.2;
  }

  @media (min-width: 56.25rem) {
    .header {
      padding-block: 0;
    }

    .header-background {
      display: none;
    }

    .nav-bar {
      background: var(--clr-grey-200);
      position: relative;
      top: 0;
      transition: none;
      box-shadow: none;
    }

    .nav-bar__list {
      flex-direction: row;
      gap: 1.5em;
    }

    .hamburger-btn {
      display: none;
    }

    .hamburger-btn__open {
      transform: none;
    }
  }

  /* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */
  /* \\\\\\\\\\\\\\\\\\\\\\\      ***HERO-SECTION***       \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */
  /* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */

  .hero-section {
    background-image: image-set(
      url(./assets/works-images/bg-intro-image-s.webp) 1x,
      url(./assets/works-images/bg-intro-image-m.webp) 2x
    );

    background-size: cover;
    background-position: center;
    background-color: #e4e3e3;
    background-blend-mode: multiply;
    background-repeat: no-repeat;
    min-height: 100dvh;
    text-align: center;
  }

  .hero-section__block {
    position: relative;
    padding-top: max(280px, 36vh);
    padding-bottom: max(180px, 18vh);
  }

  .hero-section__inner-block {
    flex-direction: column;
    align-items: center;
  }

  .hero-section__text {
    font-size: clamp(0.77rem, 3.25vw, 0.84rem);
    font-weight: 600;
    display: inline-block;
    color: var(--clr-orange);
    text-transform: uppercase;
    letter-spacing: 2.35px;
    margin-bottom: 0.25em;
    animation: slideIn 0.5s ease 1s, fadeIn 2s ease;
  }

  .hero-section__heading {
    font-size: clamp(2.1rem, 8.5vw, 4rem);
    font-family: "Castoro", serif;
    font-weight: 400;
    color: var(--clr-white);
    max-width: 18ch;
    letter-spacing: -1.2px;
    margin-bottom: min(0.9em, 40px);
    animation: slideIn 0.5s ease 1.3s, fadeIn 2.6s ease;
  }

  .hero-section--btn-top,
  .hero-section--btn-bottom {
    animation: slideIn 0.5s ease 1.5s, fadeIn 3s ease;
    transition: background-color 0.3s, color 0.3s, border 0.3s;
  }

  .hero-section--btn-top {
    color: var(--clr-grey-100);
    background: var(--clr-white);
    font-weight: 500;

    &:hover {
      background-color: var(--clr-orange);
      color: var(--clr-white);
    }
  }

  .hero-section--btn-bottom {
    color: var(--clr-white);
    font-weight: 700;

    &:hover {
      background-color: var(--clr-white);
      color: var(--clr-black);
    }
  }

  .hero-section__cv-text {
    font-size: max(11.25px, 0.35rem);
    font-weight: 700;
    color: var(--clr-grey-700);
    position: absolute;
    padding-inline: 4em;
    letter-spacing: 3.6px;
    text-transform: uppercase;
    top: 90%;
    animation: slideAcross 2.5s;
  }

  .left-block__cv-text {
    color: var(--clr-grey-700);
    border: 2px solid var(--clr-grey-700);
    padding-block: 1.5em;
    padding-inline: 1.5em;
    left: 110%;
    width: 7rem;
    top: 80%;
    transition: background-color 0.3s, color 0.3s;

    &:hover {
      color: var(--clr-black);
      background-color: var(--clr-white);
      cursor: pointer;
    }
  }

  .hero-section__cv-text::before,
  .left-block__cv-text::before {
    content: "";
    display: block;
    position: inherit;
    width: 7rem;
    height: 1px;
    background: var(--clr-grey-700);
    right: 90%;
    top: 50%;
  }

  .left-block__cv-text::before {
    right: 100%;
  }

  @media (min-width: 45rem) {
    .hero-section {
      background-image: image-set(
        url(./assets/works-images/bg-intro-image-m.webp) 1x,
        url(./assets/works-images/bg-intro-image-l.webp) 2x
      );
    }
  }

  @media (min-width: 67.5rem) {
    .hero-section {
      background-image: url(./assets/works-images/bg-intro-image-l.webp);
      min-height: 120vh;
    }

    #intro {
      display: grid;
      grid-template-columns: 1fr 1fr;
    }

    .hero-section-left-block {
      padding-top: max(280px, 36vh);
      padding-bottom: max(50px, 5vh);
      background: var(--clr-grey-700);
      text-align: center;
    }

    .left-block__flex {
      flex-direction: column;
      width: fit-content;
      margin-left: 3em;
      position: relative;
    }

    .left-text {
      font-size: clamp(0.77rem, 3.25vw, 0.84rem);
      color: var(--clr-orange);
      align-self: start;
    }

    .left-heading {
      font-size: clamp(2.45rem, 4.5vw, 3.7rem);
      color: var(--clr-grey-100);
      text-align: left;
    }

    .hero-section--btn-top {
      color: var(--clr-white);
      background: var(--clr-grey-100);
      border: 2px solid var(--clr-black);
    }

    .hero-section--btn-top:hover {
      border: 2px solid var(--clr-orange);
    }

    .hero-section--btn-bottom {
      color: var(--clr-grey-100);
      border: 2px solid var(--clr-black);
    }

    .hero-section--btn-bottom:hover {
      background-color: var(--clr-black);
      color: var(--clr-white);
    }
  }

  @media (min-width: 75rem) {
    .left-block__button-container {
      flex-direction: row;
      gap: 1em;
      width: 20rem;
    }
  }

  @media (min-width: 112.5rem) {
    .left-block__flex {
      margin-left: auto;
    }
  }

  /* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */
  /* \\\\\\\\\\\\\\\\\\\\\\\      ***ABOUT-SECTION***       \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */
  /* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */

  .about-section {
    padding-block: clamp(110px, 18vw, 170px);
  }

  .about-section__text,
  .about-section__block {
    margin-bottom: 1.85em;
    text-wrap: initial;
  }

  .about-section__list-container {
    grid-template-columns: 1fr;
    margin-top: clamp(90px, 16vw, 96px);
  }

  .about-section__list__heading {
    font-size: clamp(27px, 5vw, 29px);
    font-family: "Castoro", serif;
    font-weight: 400;
    margin-bottom: max(30px, 1.2em);
  }

  .about-section__list__heading::before {
    content: "";
    display: inline-block;
    position: relative;
    background-color: var(--clr-orange);
    height: 20px;
    width: 2.5px;
    margin-right: 0.45em;
    top: 3px;
  }

  .about-section__item {
    font-size: min(21px, 0.95rem);
    font-weight: 500;
    list-style: none;
    padding-bottom: max(19px, 0.85em);

    span {
      font-size: 16.2px;
      font-weight: 300;
      color: var(--clr-grey-200);
      display: block;
      line-height: 1.1;
    }
  }

  @media (min-width: 46.875rem) {
    .about-section__list-container {
      grid-template-columns: 1fr 1fr;
    }
  }

  @media (min-width: 71.875rem) {
    .about-section__list-container {
      grid-template-columns: 1fr 1fr 1fr;
    }
  }

  /* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */
  /* \\\\\\\\\\\\\\\\\\\\\\\      ***WORKS-SECTION***       \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */
  /* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */

  .works-section--heading::before {
    content: "02";
  }

  .works-section__grid {
    background-color: #181818;
    width: 75%;
    margin-inline: auto;
    box-shadow: 2px 2px 10px var(--clr-grey-400);
  }

  picture {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
  }

  .works-section__image {
    aspect-ratio: 1;
    object-fit: cover;
    cursor: pointer;
    transition: opacity 0.3s;
    margin-inline: auto;

    &:hover {
      opacity: 0.04;
    }
  }

  .works-section__image-text {
    font-size: 0.85rem;
    position: absolute;
    color: var(--clr-white);
    opacity: 0;
    transform: translateY(80px);
    text-align: center;

    span {
      font-size: 0.6rem;
      color: var(--clr-grey-400);
      display: block;
    }
  }

  .works-section__image:hover + .works-section__image-text {
    opacity: 1;
    transform: translateY(0px);
    transition: opacity 0.25s, transform 0.25s;
    transition-delay: 0.25s;
  }

  .works-section__image-inner-text {
    font-size: 0.75rem;
    width: fit-content;
    margin-inline: auto;
    text-align: center;
    z-index: 2000;
    color: var(--clr-white);

    span {
      font-size: 0.6rem;
      font-weight: 300;
      display: inline-block;
      margin-top: 1em;
      opacity: 0.5;

      a {
        pointer-events: all;
        color: var(--clr-orange-200);
      }
    }
  }

  .overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--clr-black);
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.75s, visibility 0.5s;
    z-index: 1000;
  }

  .overlay.active {
    opacity: 1;
    visibility: visible;
  }

  .modal-content img {
    position: relative;
    max-width: 70vw;
    max-height: 70vh;
    top: -1.25em;
    padding-top: 0.75em;
    object-fit: contain;
    aspect-ratio: auto;
  }

  .modal-content p {
    max-width: 70%;
  }

  .modal-content img,
  .modal-content p {
    opacity: 0;
    transform: scale(0.1);
    transition: transform 0.5s, opacity 0.5s;
  }

  .overlay.active .modal-content img,
  .overlay.active .modal-content p {
    transform: scale(1);
    opacity: 1;
  }

  body.modal-active {
    overflow: hidden;
    touch-action: none;
    padding-right: 15px;
  }

  .arrow-button,
  .close-button {
    background-color: transparent;
    border: none;
  }

  .arrow-button {
    font-size: 1rem;
    position: absolute;
    top: 45%;
    color: #fff;
    cursor: pointer;
    transition: opacity 0.25s ease;

    &:hover,
    &:focus-visible {
      text-shadow: 1px 1px 5px var(--clr-white);
    }
  }

  .arrow-button.arrow-left {
    left: 5%;
    transform: rotate(180deg);
  }

  .arrow-button.arrow-right {
    right: 5%;
  }

  .arrow-button.disabled {
    opacity: 0.5;
  }

  .close-button {
    position: absolute;
    top: 2%;
    right: 3%;
    font-size: 1.25rem;
    color: #fff;
    cursor: pointer;
    z-index: 1000;

    &:hover {
      text-shadow: 1px 1px 5px var(--clr-white);
    }
  }

  .arrow-button,
  .modal-content img,
  .modal-content p,
  .close-button {
    user-select: none;
  }

  .works-section__image-text,
  .modal-content img,
  .modal-content p,
  .arrow-button.disabled {
    pointer-events: none;
  }

  @media (min-width: 47.5rem) {
    .works-section__grid {
      grid-template-columns: 1fr 1fr;
    }
  }

  @media (min-width: 100rem) {
    .arrow-button.arrow-left {
      left: 20%;
    }

    .arrow-button.arrow-right {
      right: 20%;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .modal-content img {
      transform: none;
    }

    .modal-content p {
      transform: none;
    }
  }

  /* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */
  /* \\\\\\\\\\\\\\\\\\\\\\\      ***TESTIMONIALS-AREA***       \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */
  /* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */

  .testimonials-area {
    padding-top: max(135px, 6em);
    padding-bottom: max(120px, 5.35em);
    text-align: center;
  }

  .testimonials-heading {
    font-size: clamp(1.5rem, 7vw, 1.6rem);
    font-family: "Castoro", serif;
    font-weight: 400;
    margin-bottom: min(1.85em, 66px);
    color: var(--clr-black);
  }

  .testimonials-carousel {
    display: flex;
    overflow-x: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    cursor: grab;

    &:active {
      cursor: grabbing;
    }

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .testimonials-block,
  .testimonials-buffer {
    flex: 0 0 100%;
    scroll-snap-align: left;
    user-select: none;
  }

  .testimonials-buffer {
    visibility: hidden;
    pointer-events: none;
  }

  .testimonials-hero {
    justify-content: center;
    margin-bottom: min(1.5em, 32px);
  }

  .testimonials-block__image {
    height: fit-content;
    border-radius: 50%;
  }

  .testimonials-block__sub-block {
    text-align: left;
    padding-left: 0.85em;
  }

  .testimonials-block__heading {
    font-size: clamp(0.75rem, 3.75vw, 0.85rem);
    font-weight: 600;
    color: var(--clr-grey-100);
  }

  .testimonials-block__sub-heading {
    font-size: clamp(0.65rem, 3.25vw, 0.7rem);
    font-weight: 300;
    color: var(--clr-grey-200);
    display: block;
    line-height: 1;
  }

  .testimonials-block__text {
    font-size: clamp(0.85rem, 3.25vw, 0.85rem);
    margin-bottom: min(1.67em, 32px);
    color: var(--clr-grey-300);
    max-width: 85%;
    margin-inline: auto;
  }

  .dot {
    height: 0.6em;
    width: 0.6em;
    margin-inline: 12px;
    background-color: var(--clr-grey-600);
    border: none;
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
    user-select: none;
  }

  .dot.active {
    background-color: var(--clr-grey-300);
  }

  @media (min-width: 48.75rem) {
    .testimonials-block,
    .testimonials-buffer {
      flex: 0 0 50%;
      text-align: left;
    }

    .testimonials-hero {
      justify-content: left;
    }

    .testimonials-block__text {
      margin-inline: 0;
    }
  }

  @media (min-width: 73.75rem) {
    .testimonials-block,
    .testimonials-buffer {
      flex: 0 0 33.33%;
    }
  }

  /* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */
  /* \\\\\\\\\\\\\\\\\\\\\\\      ***STATISTICS-ASIDE***       \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */
  /* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */

  .statistics-aside {
    background: var(--clr-grey-700);
    padding-block: max(100px, 4.75em);
  }

  .statistics-block {
    margin-bottom: 2.35em;
  }

  .statistics-block__number {
    font-size: clamp(4.2rem, 15vw, 5.2rem);
    font-weight: 700;
    display: inline;
    position: relative;
    letter-spacing: -3.6px;
    line-height: 0.9;

    span {
      font-size: clamp(2rem, 8vw, 2.6rem);
      position: absolute;
      top: 30%;
      margin-left: 0.1em;
    }
  }

  .statistics-block__heading {
    font-size: clamp(0.8rem, 3.5vw, 1rem);
    font-weight: 600;
    color: var(--clr-grey-100);
    margin-bottom: max(22px, 0.7em);
  }

  .statistics-block__text {
    font-size: clamp(0.7rem, 3vw, 0.8rem);
    font-weight: 300;
    color: var(--clr-grey-300);
  }

  @media (min-width: 43.75rem) {
    .statistics-grid {
      grid-template-columns: 1fr 1fr;
    }

    .statistics-block__text {
      max-width: 85%;
    }
  }

  /* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */
  /* \\\\\\\\\\\\\\\\\\\\\\\      ***FOOTER***       \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */
  /* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */

  .footer {
    padding-top: max(100px, 4.75em);
    padding-bottom: 2em;
    background-color: var(--clr-grey-200);
  }

  .footer--heading {
    color: var(--clr-white);
  }

  .footer--heading::before {
    content: "03";
    opacity: 0.1;
    z-index: 1;
  }

  .footer-container {
    display: grid;
    grid-template-columns: 1fr;
    color: var(--clr-grey-400);
    margin-top: 0.75em;
    margin-bottom: 2.25em;
  }

  .footer-text {
    font-size: clamp(0.9rem, 1.85vw, 1rem);
    color: var(--clr-grey-500);
    margin-bottom: 2.25em;
    text-wrap: initial;
  }

  .footer-links-block {
    margin-bottom: 1.25em;
  }

  .footer-links__heading {
    font-size: clamp(1rem, 2.5vw, 1.05rem);
    font-family: "Castoro", serif;
    font-weight: 400;
    color: var(--clr-white);
    margin-bottom: 0.65em;
  }

  .footer-links-block__list li,
  .contact-block__link {
    font-size: clamp(0.8rem, 1.85vw, 0.9rem);
    color: var(--clr-grey-500);
  }

  .footer-links-block__list li {
    list-style: none;
  }

  .contact-block__link {
    display: block;
    text-decoration: none;
  }

  .footer-button-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .footer--btn-top,
  .footer--btn-bottom {
    font-size: 0.65rem;
    font-weight: 500;
    color: var(--clr-white);
    min-width: 90%;
    transition: background-color 0.3s, color 0.3s;
  }

  .footer--btn-top {
    background: var(--clr-orange);
    border: none;

    &:hover,
    &:focus-visible {
      background-color: var(--clr-orange-200);
    }
  }

  .footer--btn-bottom {
    &:hover,
    &:focus-visible {
      background-color: var(--clr-white);
      color: var(--clr-black);
    }
  }

  .footer-socials-container {
    position: relative;
    margin-top: 5em;
  }

  .footer-socials-container::before {
    content: "";
    position: absolute;
    height: 1px;
    width: 100%;
    background-color: var(--clr-grey-400);
    opacity: 0.1;
    top: -30px;
  }

  .footer-socials__list {
    gap: 0.6em;
    align-items: baseline;
  }

  .footer-socials__list__item {
    padding-block: 0.5em;
    list-style: none;
  }

  .footer-socials__list a svg {
    fill: rgba(255, 255, 255, 0.4);
    transition: fill 0.3s ease;
  }

  .footer-socials__list a:hover svg {
    fill: rgba(255, 255, 255, 1);
  }

  .footer-developer {
    font-size: 0.75rem;
    color: var(--clr-grey-500);
    margin-top: 0.75em;
  }

  .footer-developer__link {
    font-size: 0.82rem;
    text-decoration: none;
    color: var(--clr-white);
  }

  @media (min-width: 50rem) {
    .footer-container {
      grid-template-columns: 1fr 1fr;
    }

    .footer-text {
      grid-column: span 3;
    }

    .footer-button-container {
      flex-direction: row;
      gap: 2em;
    }

    .footer--btn-top,
    .footer--btn-bottom {
      min-width: 50%;
    }
  }

  @media (min-width: 62.5rem) {
    .footer-container {
      grid-template-columns: 2fr 1fr 1fr;
      justify-items: center;
    }

    .footer-text {
      grid-column: 1;
      align-self: center;
      margin-bottom: 0;
    }
  }
}

@layer utilities {
  .flex {
    display: flex;
  }

  .grid {
    display: grid;
  }

  .wrapper {
    max-width: calc(1400px + 7rem);
    padding-inline: clamp(1rem, 7vw, 3.5rem);
    margin-inline: auto;
  }

  .hidden {
    display: none;
  }

  .visually-hidden {
    /* Use to visually hide text but to still have it there for screen readers so things such as 'learn more' can be much more descriptive instead */
    /* <a href="#"> Learn more <span class="visually-hidden"> about mushrooms with our helpful reference guide </span> </a> */
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }

  .skip-to-content:not(:focus) {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }

  .skip-to-content {
    position: absolute;
    color: black;
    top: 4rem;
  }
}