@layer global, component, utility;

@layer global {
  /* kadwa-regular - devanagari */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Kadwa";
    font-style: normal;
    font-weight: 400;
    src: url("/fonts/kadwa-v13-devanagari-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* kadwa-700 - devanagari */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Kadwa";
    font-style: normal;
    font-weight: 700;
    src: url("/fonts/kadwa-v13-devanagari-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }

  /* Fonts */
  :root {
    --fs-14: calc(14 / 16 * 1rem);
    --fs-16: calc(16 / 16 * 1rem);
    --fs-18: calc(18 / 16 * 1rem);
    --fs-20: calc(20 / 16 * 1rem);
    --fs-24: calc(24 / 16 * 1rem);
    --fs-36: calc(36 / 16 * 1rem);
    --fs-42: calc(42 / 16 * 1rem);
    --fs-48: calc(48 / 16 * 1rem);
    --fs-72: calc(72 / 16 * 1rem);

    --font-size-topnav: var(--fs-14);
    --font-size-h1: var(--fs-42);
    --font-size-h2: var(--fs-36);
    --font-size-h3: var(--fs-24);
    --font-size-button: var(--fs-18);
    --font-size-quote: var(--fs-24);
    --font-size-quote-author: var(--fs-20);

    @media (width >= calc(600 / 16 * 1rem)) {
      --font-size-topnav: var(--fs-16);
      --font-size-h1: var(--fs-72);
      --font-size-h2: var(--fs-48);
      --font-size-quote: var(--fs-36);
      --font-size-quote-author: var(--fs-24);
    }
  }

  /* Colors */
  :root {
    --c-white: hsl(0, 0%, 100%);
    --c-gray-dark: hsl(233, 14%, 25%);

    --c-blue: hsl(223, 90%, 16%);
    --c-teal: hsl(180, 100%, 42%);
    --c-teal-dark: hsl(180, 100%, 37%);
    --c-transparent: transparent;
    --c-red: hsl(0, 78%, 34%);

    --color-main-bg: var(--c-white);
    --color-text-dark: var(--c-gray-dark);
    --color-text-light: var(--c-white);
    --color-header-bg: var(--c-blue);
    --color-hero-bg: var(--c-blue);

    --color-button-primary-bg: var(--c-white);
    --color-button-primary-bg-hover: var(--c-teal);
    --color-button-primary-border: var(--c-red);
    --color-button-primary-border-hover: var(--c-teal);
    --color-button-primary-text: var(--c-gray-dark);

    --color-button-primary-white-bg: var(--c-white);
    --color-button-primary-white-bg-hover: var(--c-teal);
    --color-button-primary-white-border: var(--c-white);
    --color-button-primary-white-border-hover: var(--c-teal);
    --color-button-primary-white-text: var(--c-gray-dark);
    --color-button-primary-white-text-hover: var(--c-white);

    --color-button-secondary-bg: var(--c-transparent);
    --color-button-secondary-bg-hover: var(--c-white);
    --color-button-secondary-border: var(--c-white);
    --color-button-secondary-text: var(--c-white);
    --color-button-secondary-text-hover: var(--color-hero-bg);
    --color-fullwidth-bg: var(--c-blue);
    --color-cta-gradient-1: var(--c-red);
    --color-cta-gradient-2: var(--c-blue);
    --color-cta-gradient-3: var(--c-blue);
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  * {
    margin: 0;
  }

  body {
    font-family: "Kadwa", Arial, Helvetica, sans-serif;
    line-height: 1.3;
    color: var(--color-text-dark);
  }

  h1,
  h2,
  h3 {
    line-height: 1.1;
  }

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

  h1 {
    font-size: var(--font-size-h1);
  }

  h2 {
    font-size: var(--font-size-h2);
  }

  h3 {
    font-size: var(--font-size-h3);
  }

  a {
    text-decoration: none;
  }

  p {
    font-size: calc(18 / 16 * 1rem);

    &.medium {
      font-size: calc(20 / 16 * 1rem);

      @media (width >= calc(600 / 16 * 1rem)) {
        font-size: calc(24 / 16 * 1rem);
      }
    }

    &.large {
      font-size: calc(24 / 16 * 1rem);

      @media (width >= calc(600 / 16 * 1rem)) {
        font-size: calc(28 / 16 * 1rem);
      }
    }
  }

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

  header ul,
  footer ul {
    list-style-type: none;
    padding: 0;
  }

  .wrapper {
    width: min(calc(100% - 48px), calc(1200 / 16 * 1rem));
    margin-inline: auto;
    padding-block: 60px;

    @media (width >= calc(1000 / 16 * 1rem)) {
      padding-block: 80px;
    }
  }

  .fullwidth {
    text-align: center;

    .fullwidth__wrapper {
      display: grid;
      justify-items: center;
    }

    .fullwidth__title {
      margin-block-end: 20px;
    }

    .fullwidth__description {
      max-width: 80ch;
      margin-block-end: 1px;
    }
  }
}

@layer component {
  .button {
    display: inline-block;
    font-size: var(--font-size-button);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 10px 14px;
    border-radius: 24px;
    transition: 150ms ease-in-out;
    transition-property: background-color, border-color, color;

    &.primary {
      background-color: var(--color-button-primary-bg);
      color: var(--color-button-primary-text);
      border: 2px solid var(--color-button-primary-border);

      &:hover {
        background-color: var(--color-button-primary-bg-hover);
        border-color: var(--color-button-primary-border-hover);
      }

      &.white {
        background-color: var(--color-button-primary-white-bg);
        color: var(--color-button-primary-white-text);
        border: 2px solid var(--color-button-primary-white-border);

        &:hover {
          background-color: var(--color-button-primary-white-bg-hover);
          border-color: var(--color-button-primary-white-border-hover);
        }
      }
    }

    &.secondary {
      background-color: var(--color-button-secondary-bg);
      color: var(--color-button-secondary-text);
      border: 2px solid var(--color-button-secondary-border);

      &:hover {
        background-color: var(--color-button-secondary-bg-hover);
        color: var(--color-button-secondary-text-hover);
      }
    }
  }

  .topnav {
    background-color: var(--color-header-bg);

    .topnav__wrapper {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-block: 12px;

      @media (width >= calc(600 / 16 * 1rem)) {
        padding-block: 20px;
      }
    }

    .topnav__homelink {
    }

    .topnav__logo {
      width: calc(70 / 16 * 1rem);

      @media (width >= calc(600 / 16 * 1rem)) {
        width: calc(128 / 16 * 1rem);
      }
    }

    .topnav__links {
      display: flex;
      gap: 20px;

      @media (width >= calc(600 / 16 * 1rem)) {
        gap: 40px;
      }
    }

    .topnav__item {
    }

    .topnav__link {
      font-size: var(--font-size-topnav);
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: var(--color-text-light);

      &:hover {
        text-decoration: underline 2px;
        text-underline-offset: 4px;
      }
    }
  }
  /* Slider */
  .cd-hero {
    position: relative;
  }

  .cd-hero__slider {
    position: relative;
    height: 360px;
    width: 100%;
    overflow: hidden;
  }

  .cd-hero__slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Force Hardware Acceleration */
    -webkit-transform: translateZ(0px);
    transform: translateZ(0px);
    will-change: transform;
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .cd-hero__slide.cd-hero__slide--selected {
    /* this is the visible slide */
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  .cd-hero__slide.cd-hero__slide--move-left {
    /* slide hidden on the left */
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
  }

  .cd-hero__slide.cd-hero__slide--is-moving,
  .cd-hero__slide.cd-hero__slide--selected {
    /* the cd-hero__slide--is-moving class is assigned to the slide which is moving outside the viewport */
    -webkit-transition: -webkit-transform 0.5s;
    transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
    transition: transform 0.5s, -webkit-transform 0.5s;
  }

  @media only screen and (min-width: 768px) {
    .cd-hero__slider {
      height: 500px;
    }
  }

  @media only screen and (min-width: 1170px) {
    .cd-hero__slider {
      height: 680px;
    }
  }

  /* Slide style */
  .cd-hero__slide {
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .cd-hero__slide:first-of-type {
    background-image: url(/Assets/hero1.png);
  }

  .cd-hero__slide:nth-of-type(2) {
    background-image: url(/Assets/hero_alt1.png);
    background-color: var(--c-blue);
  }

  .cd-hero__slide:nth-of-type(3) {
    background-image: url(/Assets/hero_alt2.png);
    background-color: var(--c-red);
  }

  .cd-hero__slide:nth-of-type(4) {
    background-image: url(/Assets/hero_alt3.png);
  }

  .cd-hero__content.cd-hero__content--full-width,
  .cd-hero__content.cd-hero__content--half-width {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    left: 0;
    top: 0;
    /* this padding is used to align the text */
    padding-top: 100px;
    text-align: center;
    /* Force Hardware Acceleration */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: transform;
  }

  .cd-hero__content h2,
  .cd-hero__content p,
  .cd-hero__btn,
  .cd-hero__content--img img {
    /* Force Hardware Acceleration */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: transform;
  }

  .cd-hero__content.cd-hero__content--img {
    /* hide image on mobile device */
    display: none;
  }

  .cd-hero__content--img img {
    position: absolute;
    left: 50%;
    top: 50%;
    bottom: auto;
    right: auto;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
  }

  .cd-hero__content.cd-hero__content--bg-video {
    /* hide video on mobile device */
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .cd-hero__content--bg-video video {
    /* you won't see this element in the html, but it will be injected using javascript */
    display: block;
    min-height: 100%;
    min-width: 100%;
    max-width: none;
    height: auto;
    width: auto;
    position: absolute;
    left: 50%;
    top: 50%;
    bottom: auto;
    right: auto;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
  }

  .cd-hero__content h2,
  .cd-hero__content p {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    line-height: 1.2;
    margin: 0 auto 14px;
    color: #ffffff;
    width: 90%;
    max-width: 400px;
  }

  .cd-hero__content h2 {
    font-size: 1.5rem;
  }

  .cd-hero__content p {
    font-size: 1rem;
    line-height: 1;
  }

  .cd-hero__btn {
    display: inline-block;
    padding: 0.5em 1em;
    margin-top: 0.4em;
    background-color: var(--c-red);
    font-size: 0.5rem;
    font-weight: 150;
    letter-spacing: 1px;
    color: var(--c-white);
    text-transform: uppercase;
    -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
    -webkit-transition: background-color 0.2s;
    transition: background-color 0.2s;
  }

  .cd-hero__btn.cd-hero__btn--secondary {
    background-color: rgba(22, 26, 30, 0.8);
  }

  .cd-hero__btn:nth-of-type(2) {
    margin-left: 1em;
  }

  .cd-hero__btn:hover {
    background-color: #d44457;
  }

  .cd-hero__btn.cd-hero__btn--secondary:hover {
    background-color: #161a1e;
  }

  @media only screen and (min-width: 768px) {
    .cd-hero__slide:nth-of-type(2),
    .cd-hero__slide:nth-of-type(3),
    .cd-hero__slide:nth-of-type(4) {
      background-image: none;
    }
    .cd-hero__content.cd-hero__content--full-width,
    .cd-hero__content.cd-hero__content--half-width {
      padding-top: 150px;
    }
    .cd-hero__content.cd-hero__content--bg-video {
      display: block;
    }
    .cd-hero__content.cd-hero__content--half-width {
      width: 45%;
    }
    .cd-hero__content.cd-hero__content--half-width:first-of-type {
      left: 5%;
    }
    .cd-hero__content.cd-hero__content--half-width:nth-of-type(2) {
      right: 5%;
      left: auto;
    }
    .cd-hero__content.cd-hero__content--img {
      display: block;
    }
    .cd-hero__content h2,
    .cd-hero__content p {
      max-width: 300px;
    }
    .cd-hero__content h2 {
      font-size: 2em;
      font-weight: 00;
    }
    .cd-hero__btn {
      font-size: 1rem;
    }
  }

  @media only screen and (min-width: 1170px) {
    .cd-hero__content.cd-hero__content--full-width,
    .cd-hero__content.cd-hero__content--half-width {
      padding-top: 220px;
    }
    .cd-hero__content h2,
    .cd-hero__content p {
      margin-bottom: 20px;
    }
    .cd-hero__content h2 {
      font-size: 3em;
    }
    .cd-hero__content p {
      font-size: 1rem;
    }
  }

  /* Single slide animation */
  @media only screen and (min-width: 768px) {
    .cd-hero__content.cd-hero__content--half-width {
      opacity: 0;
      -webkit-transform: translateX(40px);
      -ms-transform: translateX(40px);
      transform: translateX(40px);
    }
    .cd-hero__slide--move-left .cd-hero__content.cd-hero__content--half-width {
      -webkit-transform: translateX(-40px);
      -ms-transform: translateX(-40px);
      transform: translateX(-40px);
    }
    .cd-hero__slide--selected .cd-hero__content.cd-hero__content--half-width {
      /* this is the visible slide */
      opacity: 1;
      -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
      transform: translateX(0);
    }
    .cd-hero__slide--is-moving .cd-hero__content.cd-hero__content--half-width {
      /* this is the slide moving outside the viewport 
    wait for the end of the transition on the <li> parent before set opacity to 0 and translate to 40px/-40px */
      -webkit-transition: opacity 0s 0.5s, -webkit-transform 0s 0.5s;
      transition: opacity 0s 0.5s, -webkit-transform 0s 0.5s;
      transition: opacity 0s 0.5s, transform 0s 0.5s;
      transition: opacity 0s 0.5s, transform 0s 0.5s, -webkit-transform 0s 0.5s;
    }
    .cd-hero__slide--from-left.cd-hero__slide--selected
      .cd-hero__content.cd-hero__content--half-width:nth-of-type(2),
    .cd-hero__slide--from-right.cd-hero__slide--selected
      .cd-hero__content.cd-hero__content--half-width:first-of-type {
      /* this is the selected slide - different animation if it's entering from left or right */
      -webkit-transition: opacity 0.4s 0.2s, -webkit-transform 0.5s 0.2s;
      transition: opacity 0.4s 0.2s, -webkit-transform 0.5s 0.2s;
      transition: opacity 0.4s 0.2s, transform 0.5s 0.2s;
      transition: opacity 0.4s 0.2s, transform 0.5s 0.2s,
        -webkit-transform 0.5s 0.2s;
    }
    .cd-hero__slide--from-left.cd-hero__slide--selected
      .cd-hero__content.cd-hero__content--half-width:first-of-type,
    .cd-hero__slide--from-right.cd-hero__slide--selected
      .cd-hero__content.cd-hero__content--half-width:nth-of-type(2) {
      /* this is the selected slide - different animation if it's entering from left or right */
      -webkit-transition: opacity 0.4s 0.4s, -webkit-transform 0.5s 0.4s;
      transition: opacity 0.4s 0.4s, -webkit-transform 0.5s 0.4s;
      transition: opacity 0.4s 0.4s, transform 0.5s 0.4s;
      transition: opacity 0.4s 0.4s, transform 0.5s 0.4s,
        -webkit-transform 0.5s 0.4s;
    }
    .cd-hero__content--full-width h2,
    .cd-hero__content--full-width p,
    .cd-hero__content--full-width .cd-hero__btn {
      -webkit-transform: translateX(100px);
      -ms-transform: translateX(100px);
      transform: translateX(100px);
    }
    .cd-hero__slide--move-left .cd-hero__content--full-width h2,
    .cd-hero__slide--move-left .cd-hero__content--full-width p,
    .cd-hero__slide--move-left .cd-hero__content--full-width .cd-hero__btn {
      -webkit-transform: translateX(-100px);
      -ms-transform: translateX(-100px);
      transform: translateX(-100px);
    }
    .cd-hero__slide--selected .cd-hero__content--full-width h2,
    .cd-hero__slide--selected .cd-hero__content--full-width p,
    .cd-hero__slide--selected .cd-hero__content--full-width .cd-hero__btn {
      -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
      transform: translateX(0);
    }
    .cd-hero__slide--is-moving .cd-hero__content--full-width h2,
    .cd-hero__slide--is-moving .cd-hero__content--full-width p,
    .cd-hero__slide--is-moving .cd-hero__content--full-width .cd-hero__btn {
      -webkit-transition: -webkit-transform 0s 0.5s;
      transition: -webkit-transform 0s 0.5s;
      transition: transform 0s 0.5s;
      transition: transform 0s 0.5s, -webkit-transform 0s 0.5s;
    }
    .cd-hero__slide--selected h2 {
      -webkit-transition: -webkit-transform 0.5s 0.2s;
      transition: -webkit-transform 0.5s 0.2s;
      transition: transform 0.5s 0.2s;
      transition: transform 0.5s 0.2s, -webkit-transform 0.5s 0.2s;
    }
    .cd-hero__slide--selected p {
      -webkit-transition: -webkit-transform 0.5s 0.3s;
      transition: -webkit-transform 0.5s 0.3s;
      transition: transform 0.5s 0.3s;
      transition: transform 0.5s 0.3s, -webkit-transform 0.5s 0.3s;
    }
    .cd-hero__slide--selected .cd-hero__btn {
      -webkit-transition: background-color 0.2s 0s, -webkit-transform 0.5s 0.4s;
      transition: background-color 0.2s 0s, -webkit-transform 0.5s 0.4s;
      transition: transform 0.5s 0.4s, background-color 0.2s 0s;
      transition: transform 0.5s 0.4s, background-color 0.2s 0s,
        -webkit-transform 0.5s 0.4s;
    }
  }

  /* Slider navigation */
  .cd-hero__nav {
    position: absolute;
    width: 100%;
    bottom: 0;
    z-index: 2;
    text-align: center;
    height: 55px;
    background-color: rgba(0, 1, 1, 0.5);
  }

  .cd-hero__nav nav,
  .cd-hero__nav ul,
  .cd-hero__nav li,
  .cd-hero__nav a {
    height: 100%;
  }

  .cd-hero__nav nav {
    display: inline-block;
    position: relative;
  }

  .cd-hero__marker {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 100%;
    color: var(--c-red);
    background-color: var(--c-white);
    -webkit-box-shadow: inset 0 2px 0 currentColor;
    box-shadow: inset 0 2px 0 currentColor;
    -webkit-transition: -webkit-transform 0.2s, -webkit-box-shadow 0.2s;
    transition: -webkit-transform 0.2s, -webkit-box-shadow 0.2s;
    transition: transform 0.2s, box-shadow 0.2s;
    transition: transform 0.2s, box-shadow 0.2s, -webkit-transform 0.2s,
      -webkit-box-shadow 0.2s;
  }

  .cd-hero__marker.cd-hero__marker--item-2 {
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%);
  }

  .cd-hero__marker.cd-hero__marker--item-3 {
    -webkit-transform: translateX(200%);
    -ms-transform: translateX(200%);
    transform: translateX(200%);
  }

  .cd-hero__marker.cd-hero__marker--item-4 {
    -webkit-transform: translateX(300%);
    -ms-transform: translateX(300%);
    transform: translateX(300%);
  }

  .cd-hero__marker.cd-hero__marker--item-5 {
    -webkit-transform: translateX(400%);
    -ms-transform: translateX(400%);
    transform: translateX(400%);
  }

  .cd-hero__nav ul::after {
    clear: both;
    content: "";
    display: table;
  }

  .cd-hero__nav li {
    display: inline-block;
    width: 60px;
    float: left;
  }

  .cd-hero__nav .cd-selected a {
    color: #2c343b;
  }

  .cd-hero__nav .cd-selected a:hover {
    background-color: transparent;
  }

  .cd-hero__nav a {
    display: block;
    position: relative;
    padding-top: 35px;
    font-size: 1rem;
    font-weight: 700;
    color: #a8b4be;
    -webkit-transition: background-color 0.2s;
    transition: background-color 0.2s;
  }

  .cd-hero__nav a::before {
    content: "";
    position: absolute;
    width: 24px;
    height: 24px;
    top: 8px;
    left: 50%;
    right: auto;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
  }

  .cd-hero__nav a:hover {
    background-color: rgba(0, 1, 1, 0.5);
  }

  .cd-hero__nav li:first-of-type a::before {
    background-position: 0 0;
  }

  .cd-hero__nav li.cd-selected:first-of-type a::before {
    background-position: 0 -24px;
  }

  .cd-hero__nav li:nth-of-type(2) a::before {
    background-position: -24px 0;
  }

  .cd-hero__nav li.cd-selected:nth-of-type(2) a::before {
    background-position: -24px -24px;
  }

  .cd-hero__nav li:nth-of-type(3) a::before {
    background-position: -48px 0;
  }

  .cd-hero__nav li.cd-selected:nth-of-type(3) a::before {
    background-position: -48px -24px;
  }

  .cd-hero__nav li:nth-of-type(4) a::before {
    background-position: -72px 0;
  }

  .cd-hero__nav li.cd-selected:nth-of-type(4) a::before {
    background-position: -72px -24px;
  }

  .cd-hero__nav li:nth-of-type(5) a::before {
    background-position: -96px 0;
  }

  .cd-hero__nav li.cd-selected:nth-of-type(5) a::before {
    background-position: -96px -24px;
  }

  @media only screen and (min-width: 768px) {
    .cd-hero__nav {
      height: 80px;
    }
    .cd-hero__marker,
    .cd-hero__nav li {
      width: 95px;
    }
    .cd-hero__nav a {
      padding-top: 48px;
      font-size: 1.1rem;
      text-transform: uppercase;
    }
    .cd-hero__nav a::before {
      top: 18px;
    }
  }

  .hero {
    background-color: var(--color-hero-bg);
    color: var(--color-text-light);

    .hero__wrapper {
      display: grid;
      padding-block: 30px 60px;

      @media (width >= calc(1000 / 16 * 1rem)) {
        grid-template-columns: 6fr 5fr;
        align-items: center;
        padding-block: 40px 80px;
      }
    }

    .hero__image {
      width: calc(200 / 16 * 1rem);
      margin-block-end: 40px;
      justify-self: center;

      @media (width >= calc(600 / 16 * 1rem)) {
        width: calc(483 / 16 * 1rem);
      }

      @media (width >= calc(1000 / 16 * 1rem)) {
        order: 2;
        margin-block-end: 0;
        justify-self: end;
      }
    }

    .hero__text {
    }

    .hero__title {
      margin-block-end: 12px;

      @media (width >= calc(600 / 16 * 1rem)) {
        margin-block-end: 20px;
      }
    }

    .hero__content {
      margin-block-end: 40px;
      max-width: 40ch;
    }

    .hero__buttons {
      display: flex;
      gap: 20px;
    }
  }

  .features {
    .features__wrapper {
      display: grid;
      gap: 40px;
      justify-items: center;

      @media (width >= calc(1000 / 16 * 1rem)) {
        grid-template-columns: repeat(4, 1fr);
      }
    }

    .features__item {
      display: grid;
      grid-auto-rows: min-content;
      gap: 10px;

      @media (width < calc(1000 / 16 * 1rem)) {
        justify-items: center;
        text-align: center;
      }
    }

    .features__icon {
      width: auto;
      height: auto;
      position: center;
    }

    .features__title {
      line-height: 1;
      text-align: center;
    }
    .features__title:hover {
      background-color: var(--c-red);
      color: var(--c-white);
    }

    .features__description {
      max-width: 40ch;
      text-align: center;
    }
  }

  .fw-feature {
    background-image: url(/Assets/footer.svg);
    color: var(--color-text-light);

    .fw-feature__image {
      width: 100%;
      max-width: calc(792 / 16 * 1rem);
    }
  }
  @layer demo {
    .carousel {
      --items: 6;
      --carousel-duration: 40s;
      @media (width > 600px) {
        --carousel-duration: 40s;
      }

      --carousel-width: min(80vw, 1200px);
      --carousel-item-width: 350px;
      --carousel-item-height: 600px;
      --carousel-item-gap: 2rem;

      --clr-cta: hsl(202, 100%, 41%);

      position: relative;
      width: var(--carousel-width);
      height: var(--carousel-item-height);
      overflow: clip;

      &[mask] {
        /* fade out on sides */
        mask-image: linear-gradient(
          to right,
          transparent,
          black 10% 90%,
          transparent
        );
      }

      &[reverse] > article {
        animation-direction: reverse;
      }

      &:hover > article {
        animation-play-state: paused;
      }
    }
    .carousel > article {
      position: absolute;
      top: 0;
      left: calc(100% + var(--carousel-item-gap));
      width: var(--carousel-item-width);
      height: var(--carousel-item-height);
      display: grid;
      grid-template-rows: 450px auto 1fr auto;
      gap: 0.25rem;
      border: 1px solid light-dark(rgba(0 0 0 / 0.25), rgba(255 255 255 / 0.15));

      padding-block-end: 1rem;
      border-radius: 10px;
      background: var(--c-white);
      color: light-dark(rgb(49, 65, 88), white);

      will-change: transform;
      animation-name: marquee;
      animation-duration: var(--carousel-duration);
      animation-timing-function: linear;
      animation-iteration-count: infinite;
      animation-delay: calc(
        var(--carousel-duration) / var(--items) * 1 * var(--i) * -1
      );
      &:nth-child(1) {
        --i: 0;
      }
      &:nth-child(2) {
        --i: 1;
      }
      &:nth-child(3) {
        --i: 2;
      }
      &:nth-child(4) {
        --i: 3;
      }
      &:nth-child(5) {
        --i: 4;
      }
      &:nth-child(6) {
        --i: 5;
      }
      &:nth-child(7) {
        --i: 6;
      }
      &:nth-child(8) {
        --i: 7;
      }
    }
    .carousel img {
      width: 100%;
      height: 100%;
      object-fit: cover;

      border-radius: 10px 10px 0 0;
    }
    .carousel > article > *:not(img) {
      padding: 0 1rem;
    }
    .carousel > article > div {
      grid-row: span 2;
      display: grid;
      grid-template-rows: subgrid;
      font-size: 0.8rem;
    }
    .carousel > article h2 {
      color: var(--c-blue);
      text-transform: uppercase;
      font-size: 1.2rem;
      padding-block: 0.75rem 0.25rem;
      margin: 0;
    }

    .carousel > article p {
      margin: 0;
    }
    .carousel > article a {
      text-decoration: none;
      text-transform: uppercase;

      border: 1px solid var(--c-b);
      color: light-dark(var(--clr-cta), white);
      border-radius: 3px;
      padding: 0.25rem 0.5rem;
      transition: 150ms ease-in-out;
      &:hover,
      &:focus-visible {
        background-color: var(--c-red);
        color: white;
        outline: none;
      }
    }

    @keyframes marquee {
      100% {
        transform: translateX(
          calc(
            (
                var(--items) *
                  (var(--carousel-item-width) + var(--carousel-item-gap))
              ) * -1
          )
        );
      }
    }
  }

  .hero__test {
    background-color: var(--c-white);

    .hero__test__wrapper {
      display: grid;
      padding-block: 30px 60px;

      @media (width >= calc(1000 / 16 * 1rem)) {
        grid-template-columns: 6fr 5fr;
        align-items: center;
        padding-block: 40px 80px;
      }
    }

    .hero__test__image {
      width: calc(200 / 16 * 1rem);
      margin-block-end: 40px;
      justify-self: center;

      @media (width >= calc(600 / 16 * 1rem)) {
        width: calc(483 / 16 * 1rem);
      }

      @media (width >= calc(1000 / 16 * 1rem)) {
        order: 2;
        margin-block-end: 0;
        justify-self: end;
      }
    }
  }

  .testimonial {
    .testimonial__blockquote {
    }

    .testimonial__quote-text {
      font-size: var(--font-size-quote);
      font-weight: 700;
      margin-block-end: 30px;

      @media (width >= calc(600 / 16 * 1rem)) {
        margin-block-end: 40px;
      }
    }

    .testimonial__author-description {
      color: var(--color-text-dark);
      font-size: var(--font-size-quote-author);
    }
  }

  .fw-cta {
    background: linear-gradient(
      to right,
      var(--color-cta-gradient-1),
      var(--color-cta-gradient-2) 75%,
      var(--color-cta-gradient-3) 150%
    );
    color: var(--color-text-light);

    @media (width >= calc(1000 / 16 * 1rem)) {
      background: linear-gradient(
        to right,
        var(--color-cta-gradient-1),
        var(--color-cta-gradient-2) 55%,
        var(--color-cta-gradient-3) 110%
      );
    }

    #survey-form {
      background: var(--c-blue);
      border-color: var(--c-white);
      border-width: 0cm;
      padding: 2.3rem 0.5rem;
      border-radius: 0.3rem;
    }

    .form-input {
      margin: 0 2.5rem 1.2rem 2rem;
    }

    .form-input-size {
      display: block;
      width: 100%;
      height: 1.5rem;
      padding: 0.3rem 0.4rem;
      border-radius: 0.2rem;
      outline: 0;
      border-style: none;
      margin-top: 0.4rem;
    }
  }

  .footer {
    background-color: var(--c-blue);
    color: var(--c-white);

    .footer__wrapper {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 40px 20px;

      @media (width >= calc(600 / 16 * 1rem)) {
        grid-template-columns: repeat(5, auto);
      }
    }

    .footer__top {
      display: grid;
      grid-auto-rows: min-content;
      gap: 10px;

      @media (width < calc(1000 / 16 * 1rem)) {
        justify-items: center;
        text-align: center;
      }
    }

    .footer__homelink {
      display: block;
      width: fit-content;
    }

    .footer__logo {
      width: calc(72 / 16 * 1rem);
      margin-block-end: 1px;
      align-items: center;
    }

    .footer__copyright {
    }

    .footer__column {
      display: grid;
    }

    .footer__title {
      font-size: calc(22 / 16 * 1rem);
      margin-block-end: 6px;
    }

    .footer__links {
      display: grid;
      gap: 6px;
    }

    .footer__item {
      display: grid;
    }

    .footer__link {
      font-size: calc(18 / 16 * 1rem);
      color: var(--color-text-dark);
      transition: color 150ms ease-in-out;
      display: inline-flex;
      gap: 16px;
      align-items: center;

      &:hover {
        color: var(--color-footer-link-hover);

        .footer__social-path {
          fill: var(--color-footer-link-hover);
        }
      }
    }

    .footer__social-svg {
      width: calc(18 / 16 * 1rem);
    }

    .footer__social-path {
      fill: var(--color-text-dark);
      transition: fill 150ms ease-in-out;
    }
  }
}

@layer utility {
  .visually-hidden {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;

    &.skip:focus {
      left: 0;
      width: auto;
      height: auto;
      background: #fff;
      padding: 10px;
      border: 1px solid;
    }
  }

  .hover-fade {
    transition: opacity 150ms ease-in-out;

    &:hover {
      opacity: 0.8;
    }
  }
}