@layer global {
  /* Fonts */

  @font-face {
    font-family: "Source Sans 3 Variable";
    src: url("/staging/7610/wp-content/themes/fonts/SourceSans3-VariableFont_wght.ttf")
      format("woff2-variations");
    font-weight: 100 900;
    font-stretch: 50% 200%;
  }

  @font-face {
    font-family: "Source Sans 3 Italic";
    src: url("/staging/7610/wp-content/themes/fonts/SourceSans3-Italic-VariableFont_wght.ttf")
      format("woff2-variations");
    font-weight: 100 900;
    font-stretch: 50% 200%;
  }

  @font-face {
    font-family: "Raustila";
    src: url("/wp-content/fonts/raustila-Regular.ttf") format("truetype");
    font-style: normal;
  }
  :root {
    --fs-14: calc(14 / 16 * 1rem);
    --fs-16: calc(16 / 16 * 1rem);
    --fs-18: calc(18 / 16 * 1rem);
    --fs-24: calc(24 / 16 * 1rem);
    --fs-36: calc(36 / 16 * 1rem);
    --fs-42: calc(42 / 16 * 1rem);
    --fs-72: calc(72 / 16 * 1rem);
  }

  /* Colors */
  :root {
    --primary-color: hsl(0, 63%, 43%);
    --secondary-color: hsl(0, 63%, 74%);
    --lightpink-color: hsl(0, 68%, 96%);
    --black-color: hsl(0, 0%, 13%);
    --white-color: hsl(0, 0%, 100%);
    --background-overlay: hsla(0, 70%, 96%, 0.9);
  }

  body,
  html {
    xoverflow-x: hidden;
    position: relative;
  }

  body {
    font-family: "Source Sans 3 Variable", Arial, Helvetica, sans-serif;
    background: var(--white-color);
    color: var(--black-color);
  }

  .buttons {
    margin: 20px auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 10px;
  }

  h1,
  h2,
  h3 {
    line-height: 0.9;
    font-family: "Source Sans 3 Variable", Arial, Helvetica, sans-serif;
  }

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

  * {
    margin: 0;
  }

  a {
    text-decoration: none;
    color: var(--primary-color);
  }

  p {
    line-height: 1.5;
    font-size: var(--fs-18);
    font-weight: 200;
  }

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

  .wrapper {
    margin-inline: auto;
    padding: 0 24px;
  }

  .btn {
    padding: 12px 24px;
    border-radius: 25px;
    font-weight: 500;
    cursor: pointer;
    text-transform: uppercase;
    font-size: var(--fs-14);
    letter-spacing: 0.08em;
    transition: all 0.3s ease;
  }

  .primary {
    background: var(--primary-color);
    border: none;
    color: var(--white-color);

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

  .secondary {
    border: 2px solid var(--primary-color);
    background: transparent;
    color: var(--primary-color);

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

@layer components {
  .topnav {
    background-color: var(--white-color);
    max-width: 100%;
    width: 100%;
    height: 100%;
    position: -webkit-sticky; /* for Safari */
    position: sticky;
    top: 0;
    z-index: 1;
  }

  .topNavWrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-block: 8px;

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

  .logo {
    width: calc(100 / 16 * 1rem);

    &:hover {
      opacity: 0.8;
    }

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

  .navLinks {
    list-style-type: none;
    padding: 0;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: var(--fs-16);
    display: flex;
    gap: 20px;
  }

  .navItem {
    &:hover {
      text-decoration: underline 1px;
      text-underline-offset: 4px;
    }
  }

  .navItem a {
    color: var(--color-text-primary);
  }

  /* MOBILE MENU & ANIMATION */

  .menu-toggle .bar {
    width: 25px;
    height: 3px;
    background-color: #3f3f3f;
    margin: 5px auto;
    transition: all 0.3s ease-in-out;
  }

  .menu-toggle {
    justify-self: end;
    margin-right: 25px;
    display: none;
  }

  .menu-toggle:hover {
    cursor: pointer;
  }

  #mobile-menu.is-active .bar:nth-child(2) {
    opacity: 0;
  }

  #mobile-menu.is-active .bar:nth-child(1) {
    -webkit-transform: translateY(8px) rotate(45deg);
    -ms-transform: translateY(8px) rotate(45deg);
    -o-transform: translateY(8px) rotate(45deg);
    transform: translateY(8px) rotate(45deg);
  }

  #mobile-menu.is-active .bar:nth-child(3) {
    -webkit-transform: translateY(-8px) rotate(-45deg);
    -ms-transform: translateY(-8px) rotate(-45deg);
    -o-transform: translateY(-8px) rotate(-45deg);
    transform: translateY(-8px) rotate(-45deg);
  }

  @media only screen and (max-width: 720px) {
    .navLinks {
      display: flex;
      flex-direction: column;
      position: fixed;
      justify-content: start;
      top: 55px;
      background-color: #fff;
      width: 100%;
      height: calc(100vh - 55px);
      right: -100%;
      transition: right 0.3s ease-in-out;
      text-align: center;
      overflow: hidden;
      z-index: 10;
    }

    .navLinks li {
      padding: 15px;
    }

    .navLinks li:first-child {
      margin-top: 50px;
    }

    .navLinks li a {
      font-size: 1rem;
    }

    .menu-toggle,
    .bar {
      display: block;
      cursor: pointer;
    }

    .mobile-nav {
      right: 0 !important;
    }
  }

  /***** HERO SECTION *****/

  .heroWrapper {
    background: var(--lightpink-color);
    border-radius: 20px;
    display: grid;
    align-items: center;
    padding: 15px 10px;
    max-width: 100%;
    position: relative;
    overflow: hidden;

    @media (width >= calc(800 / 16 * 1rem)) {
      padding: 0 20px;
      max-width: 100%;
      margin: 0 auto;
      min-height: 37vw;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }

    @media (width <= calc(800 / 16 * 1rem)) {
      background-image:
        linear-gradient(
          to bottom,
          var(--background-overlay),
          var(--background-overlay)
        ),
        url("/wp-content/uploads/2026/03/hero-img-final.webp");
      background-repeat: no-repeat;
      background-size: 150%;
      background-position: center left;
    }
  }

  .heroWrapper p {
    @media (width <= calc(800 / 16 * 1rem)) {
      font-weight: 300;
    }
  }
  .hero-content {
    display: grid !important;
    gap: 15px;
    align-items: center;
    padding: 15px 10px;
    position: relative;
    grid-column: 1 / 3;

    @media (width >= calc(800 / 16 * 1rem)) {
      padding: min(5vw, 60px) 20px;
      max-width: 100%;
      width: 95%;
      text-align: left;
    }
    @media (width <= calc(800 / 16 * 1rem)) {
      text-align: center;
    }
  }

  .hero-content,
  .hero-img {
    @media (width >= calc(800 / 16 * 1rem)) {
      grid-row: 1 / 2;
    }
  }

  .hero-img {
    display: flex;
    align-items: center;
    justify-content: center;

    @media (width >= calc(800 / 16 * 1rem)) {
      grid-column: 2 / -1;
    }

    @media (width <= calc(800 / 16 * 1rem)) {
      display: none;
    }
  }

  .hero-img img {
    max-width: 200%;
    position: relative;

    @media (width >= calc(800 / 16 * 1rem)) {
      max-width: 100%;
      width: 50vw;
      position: absolute;
      top: initial;
      right: max(-11em, -40%);
      aspect-ratio: 1 / 1;
      object-fit: contain;
      margin: 0 auto;
    }
  }

  .hero-content h1 {
    font-size: clamp(2.5rem, 4vw + 1rem, 3rem);
    line-height: 0.8;

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

  .hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    @media (width <= calc(600 / 16 * 1rem)) {
      margin: auto;
    }
    @media (width <= calc(800 / 16 * 1rem)) {
      justify-content: center;
    }
  }

  /****** CONTENT #1 SECTION ******/
  .contentWrapper {
    display: grid;
    grid-template-columns: auto;
    gap: 30px;
    align-items: center;
    padding: 45px 20px;

    @media (width >= calc(800 / 16 * 1rem)) {
      grid-template-columns: 1fr 3fr 1fr;
      padding: 50px 20px;
      max-width: 100%;
      margin: 0 auto;
      margin-block-start: 2%;
    }
    @media (width <= calc(600 / 16 * 1rem)) {
    }
  }
  .content-left-img {
    @media (width >= calc(800 / 16 * 1rem)) {
      transform: translateY(80px);
    }
  }

  .content-right-img {
    @media (width >= calc(800 / 16 * 1rem)) {
      transform: translateY(-20px);
    }
  }
  .content-box {
    text-align: center;
    padding: 10px;

    @media (width >= calc(800 / 16 * 1rem)) {
      transform: translateY(10px);
    }

    @media (width <= calc(800 / 16 * 1rem)) {
      grid-row: 3 / 1;
    }
    @media (width <= calc(600 / 16 * 1rem)) {
      grid-row: 1 / 1;
      grid-column: 1 / 3;
    }
  }

  .content-image {
    height: 100%;
    position: relative;
  }

  .content-box h2,
  .content-box h3,
  .content-box2 h2,
  .content-box2 h3 {
    line-height: 1.1;
    font-weight: 400;
  }
  .content-box h2,
  .content-box2 h2 {
    font-size: 2em;
    padding-block-end: 10px;

    @media (width <= calc(600 / 16 * 1rem)) {
      font-size: 1.8em;
      line-height: 1;
      padding-block-end: 10px;
    }
  }
  .content-box h3,
  .content-box2 h3 {
    font-size: 1.2em;
    padding-block-end: 13px;

    @media (width <= calc(600 / 16 * 1rem)) {
      font-size: 1.1em;
      padding-block-end: 10px;
    }
  }
  .content-box .emphasis,
  .content-box2 .emphasis {
    font-weight: 800;
  }
  .content-right-img {
    @media (width <= calc(800 / 16 * 1rem)) {
      grid-column: 2 / -1;
    }
  }
  .content-left-img {
    @media (width <= calc(600 / 16 * 1rem)) {
      grid-row: 2 / 6;
    }
  }
  .content-left-img img {
    @media (width <= calc(600 / 16 * 1rem)) {
    }
  }
  .content-left-img img,
  .content-right-img img {
    border-radius: 25px;
  }

  /* ****** FEATURES SECTION ****** */

  .featureSection {
    background: var(--lightpink-color);
    border-radius: 20px;
    padding: 15px 10px;
    max-width: 100%;

    @media (width >= calc(800 / 16 * 1rem)) {
      margin-block-start: 5%;
    }
  }

  .features {
    display: flex;
    flex-direction: row;
    flex-flow: row wrap;
    gap: 50px;
    padding: 45px 0px;
    justify-content: space-evenly;
    text-align: center;

    @media (width >= calc(800 / 16 * 1rem)) {
      xgrid-template-columns: repeat(3, 1fr);

      padding: 50px 20px;
      max-width: 100%;
      margin: 0 auto;
    }
  }

  .features svg {
    display: inline-block;
    fill: var(--secondary-color);

    @media (width <= calc(600 / 16 * 1rem)) {
      width: 70px;
      height: 70px;
    }
  }

  .features h3 {
    font-size: 1.5em;
    padding-block: 10px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 10%;

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

  .feature-buttons {
    margin: 20px auto 0;
  }

  /* ****** CONTENT #2 SECTION ****** */
  .content2Wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
    gap: 20px;

    @media (width >= calc(800 / 16 * 1rem)) {
      gap: 60px;
    }
    @media (width <= calc(800 / 16 * 1rem)) {
      margin-block-start: 5%;
    }
  }
  .content2Wrapper div {
    padding: 10px;
    position: relative;
  }

  .content-box2 {
    grid-column: 1 / 3;

    @media (width <= calc(800 / 16 * 1rem)) {
      grid-column: 1 / 5;
    }
  }

  .content-box2,
  .content2-image-left,
  .content2-image-right {
    @media (width >= calc(800 / 16 * 1rem)) {
      grid-row: 2 / 2;
    }
  }

  .content2-image-left,
  .content2-image-right {
    @media (width <= calc(800 / 16 * 1rem)) {
      grid-row: 2 / 2;
    }
  }
  .content2-image-left {
    grid-column: 3 / -1;
    justify-self: end;
    max-width: 70%;
    xz-index: 1;

    @media (width <= calc(800 / 16 * 1rem)) {
      grid-column: 1 / 5;
      justify-self: auto;
    }
  }
  .content2-image-right {
    grid-column: 4 / 3;
    xz-index: 2;

    @media (width <= calc(800 / 16 * 1rem)) {
      grid-column: 3 / -1;
      max-width: 100%;
    }
  }

  .content2-image-right img,
  .content2-image-left img {
    border-radius: 20px;
  }

  /****** FOOTER SECTION *******/

  .footerWrapper {
    background: var(--lightpink-color);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    margin-block-start: 5%;
    gap: 5px;
    padding: 20px 40px;
    text-align: center;
    margin-top: 40px;

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

  .footer-logo,
  .social-media,
  .footerContact {
    @media (width <= calc(600 / 16 * 1rem)) {
      grid-column: 1 / 4;
    }
  }

  .footer-logo {
    @media (width <= calc(600 / 16 * 1rem)) {
      grid-row: 1 / 3;
    }
  }

  .contactInfo a {
    word-wrap: break-word;

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

  .footerContact h3 {
    font-size: 1.2em;
    padding-block-end: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 10%;

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

  .footerContact span {
    font-size: 0.8em;
    padding-block-end: 10px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 3%;

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

  .footer-logo img {
    width: calc(70 / 16 * 1rem);
    transition: all 0.3s ease;

    &:hover {
      opacity: 0.8;
    }

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

  .social-media svg {
    width: calc(40 / 16 * 1rem);
    height: calc(40 / 16 * 1rem);
    transition: all 0.3s ease;

    &:hover {
      opacity: 0.8;
    }

    @media (width >= calc(800 / 16 * 1rem)) {
      width: calc(60 / 16 * 1rem);
      height: calc(60 / 16 * 1rem);
    }
  }

  .copyright {
    grid-column: 1 / 4;
    margin-top: 20px;
  }

  /*** About Page ***/

  #about .heroWrapper {
    @media (width <= calc(800 / 16 * 1rem)) {
      background-image:
        linear-gradient(
          to bottom,
          var(--background-overlay),
          var(--background-overlay)
        ),
        url("/wp-content/uploads/2026/03/aboutimg.webp");
    }
  }

  #about .heroWrapper p {
    @media (width <= calc(800 / 16 * 1rem)) {
      font-weight: 300;
    }
  }

  #about .hero-content {
    @media (width >= calc(800 / 16 * 1rem)) {
      width: 100%;
    }
  }

  #about .hero-img img {
    @media (width >= calc(800 / 16 * 1rem)) {
      right: max(-19em, -30%);
    }
  }

  #about .hero-content h2 {
    font-size: clamp(1.1em, 1vw, 2.5em);
    font-weight: 400;
  }

  #about .aboutContent h3 {
    font-size: clamp(1.1em, 2vw, 2.5em);
    line-height: 1.2;
    font-weight: 400;
  }

  .bottomSection {
    display: flex;
    flex-direction: row;

    gap: 20px;
    padding: 45px 20px;

    @media (width >= calc(800 / 16 * 1rem)) {
      xgap: 60px;
      xpadding: 50px 20px;
      xmax-width: 100%;
      xmargin: 0 auto;
    }

    @media (width <= calc(600 / 16 * 1rem)) {
      flex-wrap: wrap;
    }
  }
  .aboutContent {
    flex: 1;
    min-width: 300px;
  }

  x.aboutImage img {
    max-width: 100%;
    width: 400px;
    display: block;
    border-radius: 20px;
    height: auto;
  }

  x.aboutImage {
    background-image: url(/img/about-img.jpg);
    background-size: cover;
    background-position: center;
  }

  x.aboutContent {
    display: flex;
    flex-direction: row;
    gap: 20px;

    @media (width <= calc(600 / 16 * 1rem)) {
      flex-direction: column;
    }
  }

  /*********** MENU PAGE ***********/
  .banner {
    background: var(--lightpink-color);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: min(7vw, 5%);
    max-width: 100%;
    margin: 0 auto;
    margin-block-end: 2%;
    text-align: center;

    @media (width >= calc(800 / 16 * 1rem)) {
      padding: min(7vw, 5%);
    }
  }

  .banner-content {
    max-width: 90%;
  }

  .banner h2 {
    font-weight: 400;
    letter-spacing: 3%;
  }

  .banner h1 {
    font-size: clamp(1.5rem, 3vw + 1rem, 3rem);
    line-height: min(1, 1%);
    font-weight: 600;
    text-wrap: balance;
    margin-bottom: 1%;
  }

  .menuWrapper {
    padding: min(7vw, 5%);
  }

  .menu-sections {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;

    @media (width >= calc(800 / 16 * 1rem)) {
      grid-template-columns: repeat(2, 1fr);
      gap: 60px;
    }
  }

  .fdm-item-price-wrapper {
    width: 100% !important;
  }
  .fdm-item-non-image-container {
    width: 75% !important;
  }

  .menu-items h3 {
    font-size: 1.5em;
    padding-block: 10px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 10%;
  }

  .menu-items {
    padding: min(30px, 5%);
    border: 1px solid var(--secondary-color);
    border-radius: 20px;
  }

  /***** CONTACT PAGE ******/
  .form-container {
    padding: min(7vw, 5%);
  }

  .form-container input,
  .form-container textarea {
    border: 1px solid var(--secondary-color) !important;
    border-radius: 5px !important;
  }

  .form-button {
    background-color: var(--primary-color) !important;
    border-radius: 20px !important;
    color: #fff !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;

    &:hover {
      background-color: var(--black-color) !important;
      color: var(--lightpink-color) !important;
    }
  }
}

@layer utilities {
  /* Hidden class for accessibility */
  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    left: -10000px;
    top: auto;
    overflow: hidden;
    &.skip:focus {
      left: 0;
      width: auto;
      height: auto;
      background: #fff;
      padding: 10px;
      border: 1px solid;
    }
  }
}

/**** ANIMATIONS ****/

/* ----------------------------------------------
 * Generated by Animista on 2026-3-17 23:8:51
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-left
 * ----------------------------------------
 */
@-webkit-keyframes slide-in-left {
  0% {
    -webkit-transform: translateX(-100px);
    transform: translateX(-100px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slide-in-left {
  0% {
    -webkit-transform: translateX(-100px);
    transform: translateX(-100px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}

/* ----------------------------------------
 * ANIMATIONS
 * ----------------------------------------
 */

.fade-up {
  -webkit-animation: fade-in-bottom 0.6s cubic-bezier(0.39, 0.575, 0.565, 1)
    both;
  animation: fade-in-bottom 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}

/*.fade-up:nth-child(1) {
  animation-delay: 0.1s;
}
.fade-up:nth-child(2) {
  animation-delay: 0.2s;
}
.fade-up:nth-child(3) {
  animation-delay: 0.3s;
}*/

/* ----------------------------------------------
 * Generated by Animista on 2026-3-20 21:28:35
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

@-webkit-keyframes fade-in-bottom {
  0% {
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes fade-in-bottom {
  0% {
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}

@-webkit-keyframes slide-in-right {
  0% {
    -webkit-transform: translateX(1000px);
    transform: translateX(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slide-in-right {
  0% {
    -webkit-transform: translateX(1000px);
    transform: translateX(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes fade-up {
  0% {
    transform: translateY(30px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}