@import url('https://fonts.googleapis.com/css2?family=Tilt+Warp&family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap');

/* Button hover effect: background becomes outline/text color, background goes transparent */
.joyous-site .frame-5,
.joyous-site .frame-8,
.joyous-site .frame-13 {
  cursor: pointer;
  user-select: none;
  border: 0;
  box-shadow: var(--joyous-shadow);
  transition:
    background-color 180ms ease,
    background 180ms ease,
    color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.joyous-site .frame-5:hover,
.joyous-site .frame-8:hover,
.joyous-site .frame-13:hover,
.joyous-site .frame-5:focus-visible,
.joyous-site .frame-8:focus-visible,
.joyous-site .frame-13:focus-visible {
  background: #ffffff;
  box-shadow:
    var(--joyous-shadow),
    inset 0 0 0 2px var(--variable-collection-primary-joyous);
  transform: translateY(-1px);
}

.joyous-site .frame-5:hover .text-wrapper-6,
.joyous-site .frame-8:hover .text-wrapper-6,
.joyous-site .frame-13:hover .text-wrapper-13,
.joyous-site .frame-5:focus-visible .text-wrapper-6,
.joyous-site .frame-8:focus-visible .text-wrapper-6,
.joyous-site .frame-13:focus-visible .text-wrapper-13 {
  color: var(--variable-collection-primary-joyous);
}

.joyous-site .frame-13:hover .vector,
.joyous-site .frame-13:focus-visible .vector {
  /* Approximate-tint the SVG icon to the Joyous orange */
  filter: brightness(0) saturate(100%) invert(48%) sepia(84%) saturate(1896%) hue-rotate(3deg) brightness(106%) contrast(105%);
}
.joyous-site {
    background-color: #ffffff;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    height: 3616px;
    position: relative;
  }

  .joyous-site .frame {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 581px;
    align-items: flex-start;
    justify-content: center;
    gap: 13px;
    padding-top: 80px;
    padding-bottom: 30px;
    padding-left: 92px;
    padding-right: 92px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: #181818;
    border-radius: 0 0 8px 8px;
    z-index: 1;
  }

  /* Reveal the header's bottom-right curve even when the right-side image overlaps it */
  .joyous-site::after {
    content: "";
    position: absolute;
    top: 573px; /* header height (581px) - curve radius (8px) */
    right: 0;
    width: 8px;
    height: 8px;
    background: #ffffff;
    pointer-events: none;
    z-index: 3; /* above the header image (.group) */

    /* concave cutout so the black curve from the header shows through */
    -webkit-mask: radial-gradient(circle at 0 0, transparent 7px, #000 8px);
    mask: radial-gradient(circle at 0 0, transparent 7px, #000 8px);
  }
  
  .joyous-site .text-wrapper {
    position: relative;
    width: fit-content;
    font-family: "Urbanist", Helvetica;
    font-weight: 800;
    color: #ffffff;
    font-size: 35px;
    letter-spacing: 1.4px;
    line-height: 35px;
    white-space: nowrap;
  }
  
  .joyous-site .div {
    position: relative;
    width: 741px;
    height: 63px;
    text-shadow: 0px 4px 4px #00000040;
    /* Match the site's orange gradient, but keep the darkest orange minimal */
    background: linear-gradient(
      180deg,
      rgba(255, 176, 116, 1) 0%,
      rgba(251, 86, 0, 1) 72%,
      rgba(251, 86, 0, 1) 92%,
      rgba(153, 20, 0, 1) 100%
    );
    -webkit-background-clip: text !important;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: "Tilt Warp", Helvetica;
    font-weight: 400;
    color: transparent;
    font-size: 60px;
    letter-spacing: 0;
    line-height: 60px;
    white-space: nowrap;
  }
  
  .joyous-site .p {
    position: relative;
    width: 632px;
    height: 83px;
    font-family: "Urbanist", Helvetica;
    font-weight: 300;
    color: #ffffff;
    font-size: 35px;
    letter-spacing: 1.4px;
    line-height: 35px;
  }
  
  .joyous-site .frame-2 {
    display: inline-flex;
    align-items: flex-start;
    justify-content: center;
    gap: 26px;
    position: relative;
    flex: 0 0 auto;
  }
  
  .joyous-site .type-white-BG {
    position: relative;
    width: 168px;
    height: 54px;
    margin-bottom: -8px;
    margin-left: -4px;
    object-fit: cover;
  }
  
  .joyous-site .img {
    position: relative;
    width: 168px;
    height: 54px;
    margin-bottom: -8px;
    margin-right: -4px;
    object-fit: cover;
  }
  
  .joyous-site .joyous-is-LOCAL {
    position: absolute;
    top: 631px;
    left: 97px;
    font-family: "Tilt Warp", Helvetica;
    font-weight: 400;
    color: transparent;
    font-size: 50px;
    letter-spacing: 0;
    line-height: 50px;
    white-space: nowrap;
  }
  
  .joyous-site .span {
    color: #181818;
  }
  
  .joyous-site .text-wrapper-2 {
    color: #ff6e00;
  }
  
  .joyous-site .neverending {
    position: absolute;
    top: 1555px;
    left: 97px;
    width: 588px;
    font-family: "Tilt Warp", Helvetica;
    font-weight: 400;
    color: transparent;
    font-size: 50px;
    letter-spacing: 0;
    line-height: 50px;
  }
  
  .joyous-site .only-local {
    position: absolute;
    top: 2607px;
    left: 771px;
    width: 572px;
    font-family: "Tilt Warp", Helvetica;
    font-weight: 400;
    color: transparent;
    font-size: 50px;
    letter-spacing: 0;
    line-height: 50px;
  }
  
  .joyous-site .helping-restaurants {
    position: absolute;
    top: 2607px;
    left: 100px;
    width: 572px;
    font-family: "Tilt Warp", Helvetica;
    font-weight: 400;
    color: transparent;
    font-size: 50px;
    letter-spacing: 0;
    line-height: 50px;
  }
  
  .joyous-site .group {
    position: absolute;
    top: 0;
    right: 0;
    width: min(732px, 100vw);
    height: 581px;
    object-fit: cover;
    object-position: right top;
    z-index: 2;
  }
  
  .joyous-site .rectangle {
    position: absolute;
    width: 46.67%;
    height: 7.27%;
    top: 16.07%;
    left: 53.33%;
    background-color: #ffffff;
    border-radius: 8px;
  }
  
  .joyous-site .home-group-eating {
    position: absolute;
    top: 646px;
    left: 768px;
    width: 571px;
    height: 421px;
    aspect-ratio: 1.36;
    border-radius: 8px;
    object-fit: cover;
  }
  
  .joyous-site .when-you-order {
    position: absolute;
    top: 715px;
    left: 97px;
    width: 571px;
    font-family: "Urbanist", Helvetica;
    font-weight: 400;
    color: transparent;
    font-size: 26px;
    letter-spacing: 0.52px;
    line-height: 35.9px;
  }
  
  .joyous-site .text-wrapper-3 {
    color: #000000;
    letter-spacing: 0.14px;
  }
  
  .joyous-site .text-wrapper-4 {
    font-family: "Urbanist", Helvetica;
    font-weight: 700;
    color: #ff6e00;
    letter-spacing: 0.14px;
  }
  
  .joyous-site .joyous-makes-it-easy {
    position: absolute;
    top: 1134px;
    left: 768px;
    width: 582px;
    font-family: "Urbanist", Helvetica;
    font-weight: 400;
    color: transparent;
    font-size: 26px;
    letter-spacing: 0.52px;
    line-height: 35.9px;
  }
  
  .joyous-site .you-start-saving-on {
    position: absolute;
    top: 1639px;
    left: 97px;
    width: 588px;
    font-family: "Urbanist", Helvetica;
    font-weight: 400;
    color: transparent;
    font-size: 26px;
    letter-spacing: 0.52px;
    line-height: 35.9px;
  }
  
  .joyous-site .that-s-why-we-only {
    position: absolute;
    top: 2741px;
    left: 771px;
    width: 572px;
    font-family: "Urbanist", Helvetica;
    font-weight: 400;
    color: transparent;
    font-size: 26px;
    letter-spacing: 0.52px;
    line-height: 35.9px;
  }
  
  .joyous-site .we-started-joyous {
    position: absolute;
    top: 2741px;
    left: 97px;
    width: 582px;
    font-family: "Urbanist", Helvetica;
    font-weight: 400;
    color: transparent;
    font-size: 26px;
    letter-spacing: 0.52px;
    line-height: 35.9px;
  }
  
  .joyous-site .iphone-pro-mockup {
    position: absolute;
    top: 1367px;
    left: 768px;
    width: 611px;
    height: 897px;
    border-radius: 8px;
  }
  
  /* Support CTA section - only apply to index support forms, not header hero */
  .joyous-site .frame-3.support-cta-section {
    display: flex;
    flex-direction: column;
    width: 571px;
    align-items: center;
    justify-content: center;
    gap: 30px;
    padding: 22px 20px;
    position: absolute;
    top: 1160px;
    left: 97px;
    background-color: #181818;
    border-radius: 8px;
    box-shadow: var(--joyous-shadow);
  }
  
  .joyous-site .support-local {
    position: relative;
    align-self: stretch;
    height: 120px;
    margin-top: -1px;
    background: var(--joyous-gradient);
    -webkit-background-clip: text !important;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: "Tilt Warp", Helvetica;
    font-weight: 400;
    color: transparent;
    font-size: 41px;
    text-align: center;
    letter-spacing: 0;
    line-height: 41px;
  }
  
  /* Support CTA form - only apply to index support form, not header hero text */
  .joyous-site .frame-4.support-cta-form {
    display: flex;
    align-items: stretch;
    gap: 11px;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
  }
  
  .joyous-site .div-wrapper {
    display: flex;
    min-height: 36px;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    position: relative;
    flex: 1;
    flex-grow: 1;
    background-color: #ffffff;
    border-radius: 8px;
    border: none;
  }

  /* CTA form: match input box height to frame-5 button (padding 16px*2 + content ≈ 52px) */
  .joyous-site .frame-4.support-cta-form .div-wrapper {
    min-height: 52px;
  }

  /* CTA phone input - match button height, match text styling */
  .joyous-site .frame-4.support-cta-form .cta-phone-input {
    flex: 1;
    min-width: 0;
    height: 100%;
    min-height: 20px;
    border: none;
    background: transparent;
    font-family: "Urbanist", Helvetica, sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #ff6e00;
    padding: 0;
    outline: none;
    box-sizing: border-box;
  }
  .joyous-site .frame-4.support-cta-form .cta-phone-input::placeholder {
    color: #ff6e00;
    opacity: 0.7;
  }
  
  .joyous-site .div-wrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 4px;
    border-radius: 8px;
    background: var(--joyous-gradient);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: 1;
    pointer-events: none;
  }
  
  .joyous-site .text-wrapper-5 {
    position: relative;
    width: 280px;
    height: auto;
    min-height: 20px;
    margin-top: 0;
    margin-bottom: 0;
    margin-right: -8px;
    font-family: "Urbanist", Helvetica;
    font-weight: 500;
    color: #ff6e00;
    font-size: 16px;
    letter-spacing: 0;
    line-height: 20px;
    white-space: nowrap;
  }
  
  .joyous-site .frame-5 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 14px;
    position: relative;
    flex: 0 0 auto;
    border-radius: 8px;
    box-shadow: var(--joyous-shadow);
    background: var(--joyous-gradient);
  }

  .joyous-site .frame-4.support-cta-form button.frame-5 {
    border: none;
    cursor: pointer;
    font: inherit;
  }

  .joyous-site .frame-4.support-cta-form button.frame-5:disabled {
    opacity: 0.7;
    cursor: default;
  }

  .joyous-site .sms-link-error {
    margin: 8px 0 0;
    font-family: "Urbanist", Helvetica, sans-serif;
    font-weight: 600;
    color: #ff6e00;
    font-size: 14px;
    line-height: 18px;
    text-align: center;
  }
  
  .joyous-site .frame-4.support-cta-form .text-wrapper-6 {
    position: relative;
    width: fit-content;
    margin-top: 0;
    font-family: "Urbanist", Helvetica;
    font-weight: 700;
    color: #ffffff;
    font-size: 14px;
    text-align: center;
    letter-spacing: 0;
    line-height: 20px;
    white-space: nowrap;
  }
  
  .joyous-site .text-wrapper-7 {
    position: relative;
    align-self: stretch;
    font-family: "Tajawal-Regular", Helvetica;
    font-weight: 400;
    color: #ffffff;
    font-size: 18px;
    text-align: center;
    letter-spacing: 0;
    line-height: 18px;
  }
  
  .joyous-site .frame-6 {
    display: flex;
    flex-direction: column;
    width: 571px;
    align-items: center;
    justify-content: center;
    gap: 30px;
    padding: 22px 20px;
    position: absolute;
    top: 1950px;
    left: 97px;
    background-color: #181818;
    border-radius: 8px;
    box-shadow: var(--joyous-shadow);
  }
  
  .joyous-site .frame-7 {
    display: flex;
    flex-direction: column;
    width: 1242px;
    align-items: center;
    justify-content: center;
    gap: 30px;
    padding: 22px 20px;
    position: absolute;
    top: 2344px;
    left: 97px;
    background-color: #181818;
    border-radius: 8px;
    box-shadow: var(--joyous-shadow);
  }
  
  .joyous-site .text-wrapper-8 {
    position: relative;
    width: fit-content;
    margin-top: -1px;
    background: var(--joyous-gradient);
    -webkit-background-clip: text !important;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: "Tilt Warp", Helvetica;
    font-weight: 400;
    color: transparent;
    font-size: 41px;
    text-align: center;
    letter-spacing: 0;
    line-height: 41px;
    white-space: nowrap;
  }
  
  .joyous-site .aloha-restaurants {
    position: relative;
    width: 1214px;
    margin-left: -6px;
    margin-right: -6px;
    font-family: "Tajawal-Regular", Helvetica;
    font-weight: 400;
    color: #ffffff;
    font-size: 30px;
    text-align: center;
    letter-spacing: 0;
    line-height: 30px;
  }
  
  .joyous-site .frame-8 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 18px;
    position: absolute;
    top: 3171px;
    left: 535px;
    border-radius: 8px;
    box-shadow: var(--joyous-shadow);
    background: var(--joyous-gradient);
  }
  
  .joyous-site .frame-9 {
    display: flex;
    width: 100vw;
    height: 319px;
    align-items: flex-start;
    justify-content: space-between;
    padding: 32px max(92px, calc((100vw - 1440px) / 2));
    margin-left: calc(50% - 50vw);
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    box-sizing: border-box;
    background-color: #181818;
    border-radius: 8px 8px 0 0;
  }
  
  .joyous-site .LOGO-SVG-for-cliff {
    position: relative;
    width: 215px;
    height: 86px;
  }
  
  .joyous-site .frame-10 {
    display: inline-flex;
    align-items: flex-start;
    justify-content: center;
    gap: 85px;
    position: relative;
    flex: 0 0 auto;
  }
  
  .joyous-site .text-wrapper-9 {
    position: relative;
    width: 175px;
    margin-top: -1px;
    font-family: "Tajawal-Regular", Helvetica;
    font-weight: 400;
    color: #ffffff;
    font-size: 16px;
    text-align: center;
    letter-spacing: 0;
    line-height: 24.5px;
  }
  
  .joyous-site .frame-11 {
    display: flex;
    width: 1242px;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    top: 24px;
    left: 92px;
    z-index: 5;
  }
  
  .joyous-site .frame-12 {
    display: inline-flex;
    align-items: center;
    gap: 42px;
    position: relative;
    flex: 0 0 auto;
  }
  
  .joyous-site .text-wrapper-10 {
    position: relative;
    width: 108px;
    height: 20px;
    font-family: "Urbanist", Helvetica;
    font-weight: 400;
    color: #ffffff;
    font-size: 24px;
    text-align: center;
    letter-spacing: 0.96px;
    line-height: 24px;
    text-decoration: none;
    white-space: nowrap;
  }
  
  .joyous-site .text-wrapper-11 {
    position: relative;
    width: 191px;
    height: 20px;
    font-family: "Urbanist", Helvetica;
    font-weight: 400;
    color: #ffffff;
    font-size: 24px;
    text-align: center;
    letter-spacing: 0.96px;
    line-height: 24px;
    white-space: nowrap;
  }
  
  .joyous-site .text-wrapper-12 {
    position: relative;
    width: 180px;
    height: 20px;
    font-family: "Urbanist", Helvetica;
    font-weight: 400;
    color: #ffffff;
    font-size: 24px;
    text-align: center;
    letter-spacing: 0.96px;
    line-height: 24px;
    white-space: nowrap;
  }
  
  .joyous-site .frame-13 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    position: relative;
    flex: 0 0 auto;
    border-radius: 8px;
    box-shadow: var(--joyous-shadow);
    background: var(--joyous-gradient);
  }
  
  .joyous-site .download {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 34px;
    height: 34px;
  }
  
  .joyous-site .vector {
    position: static;
    width: 24px;
    height: 24px;
  }
  
  .joyous-site .text-wrapper-13 {
    position: relative;
    width: fit-content;
    font-family: "Urbanist", Helvetica;
    font-weight: 700;
    color: #ffffff;
    font-size: 26px;
    text-align: center;
    letter-spacing: 0;
    line-height: 26px;
    white-space: nowrap;
  }
  
  /* Our Community Page Header Styles (higher specificity when inside our-community) */
  .our-community .header-for-community,
  .header-for-community {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 500px;
    align-items: stretch;
    gap: 27px;
    padding: 30px 65px 30px 92px;
    position: relative;
    background-color: #181818;
    background-image: radial-gradient(ellipse at 70% 50%, rgba(255, 110, 0, 0.15) 0%, transparent 50%);
    border-radius: 0 0 4px 4px;
    overflow: hidden;
  }
  
  .our-community .header-for-community .frame,
  .header-for-community .frame {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: auto;
    min-height: 0;
    align-items: center;
    justify-content: space-between;
    position: relative;
    flex: 0 0 auto;
    padding: 24px 0;
    z-index: 1;
  }
  
  .our-community .header-for-community .div,
  .header-for-community .div {
    display: inline-flex;
    align-items: center;
    gap: 42px;
    position: relative;
    flex: 0 0 auto;
    /* Override .joyous-site .div - nav div must not get "Restaurant partners" gradient styling */
    width: auto;
    height: auto;
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
    -webkit-text-fill-color: unset;
    color: inherit;
    font-size: inherit;
    text-shadow: none;
  }
  
  .our-community .header-for-community .LOGO-SVG-for-cliff,
  .header-for-community .LOGO-SVG-for-cliff {
    position: relative;
    width: 215px;
    height: 86px;
    object-fit: contain;
    display: block;
  }
  
  .our-community .header-for-community .div > a:first-child,
  .header-for-community .div > a:first-child {
    display: inline-block;
    text-decoration: none;
  }
  
  .our-community .header-for-community .text-wrapper,
  .header-for-community .text-wrapper {
    position: relative;
    width: 108px;
    height: 20px;
    font-family: "Urbanist-Regular", Helvetica;
    font-weight: 400;
    color: #ffffff;
    font-size: 24px;
    text-align: center;
    letter-spacing: 0.96px;
    line-height: 24px;
    white-space: nowrap;
  }
  
  .our-community .header-for-community .text-wrapper-2,
  .header-for-community .text-wrapper-2 {
    position: relative;
    width: 191px;
    height: 20px;
    font-family: "Urbanist-Regular", Helvetica;
    font-weight: 400;
    color: #ffffff;
    font-size: 24px;
    text-align: center;
    letter-spacing: 0.96px;
    line-height: 24px;
    text-decoration: none;
    white-space: nowrap;
  }
  
  /* Nav active state - only current page gets underline */
  .nav-link {
    text-decoration: none;
  }
  .nav-link.nav-current {
    text-decoration: underline !important;
    font-weight: 600 !important;
  }
  
  .our-community .header-for-community .text-wrapper-3,
  .header-for-community .text-wrapper-3 {
    position: relative;
    width: 180px;
    height: 20px;
    font-family: "Urbanist-Regular", Helvetica;
    font-weight: 400;
    color: #ffffff;
    font-size: 24px;
    text-align: center;
    letter-spacing: 0.96px;
    line-height: 24px;
    white-space: nowrap;
  }
  
  .our-community .header-for-community .frame-2,
  .header-for-community .frame-2 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    position: relative;
    flex: 0 0 auto;
    border-radius: 4px;
    box-shadow: 0px 4px 4px #00000040;
    background: linear-gradient(180deg, rgba(255, 176, 116, 1) 0%, rgba(251, 86, 0, 1) 49%, rgba(153, 20, 0, 1) 100%);
  }
  
  .our-community .header-for-community .download,
  .header-for-community .download {
    position: relative;
    width: 34px;
    height: 34px;
  }
  
  .our-community .header-for-community .vector,
  .header-for-community .vector {
    position: absolute;
    width: 58.33%;
    height: 70.83%;
    top: 12.5%;
    left: 20.83%;
  }
  
  .our-community .header-for-community .text-wrapper-4,
  .header-for-community .text-wrapper-4 {
    position: relative;
    width: fit-content;
    font-family: "Urbanist-Bold", Helvetica;
    font-weight: 700;
    color: #ffffff;
    font-size: 26px;
    text-align: center;
    letter-spacing: 0;
    line-height: 26px;
    white-space: nowrap;
  }
  
  .our-community .header-for-community .frame-3,
  .header-for-community .frame-3 {
    display: flex !important;
    width: 100%;
    flex: 1;
    min-height: 397px;
    align-items: center;
    justify-content: space-between;
    gap: 66px;
    position: relative;
    z-index: 1;
  }
  
  .our-community .header-for-community .frame-4,
  .header-for-community .frame-4 {
    display: flex;
    flex-direction: column;
    height: 232px;
    align-items: flex-start;
    justify-content: center;
    gap: 13px;
    position: relative;
    flex: 1;
    min-width: 0;
  }
  
  .our-community .header-for-community .p,
  .header-for-community .p {
    position: relative;
    width: fit-content;
    margin-top: -1px;
    font-family: "Urbanist-ExtraBold", Helvetica;
    font-weight: 800;
    color: #ffffff;
    font-size: 35px;
    letter-spacing: 1.4px;
    line-height: 35px;
    white-space: nowrap;
  }
  
  .our-community .header-for-community .text-wrapper-5,
  .header-for-community .text-wrapper-5 {
    position: relative;
    width: 804px;
    height: 63px;
    text-shadow: 0px 4px 4px #00000040;
    background: linear-gradient(167deg, rgba(255, 176, 116, 1) 0%, rgba(251, 86, 0, 1) 49%, rgba(153, 20, 0, 1) 100%);
    -webkit-background-clip: text !important;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: "Tilt Warp-Regular", Helvetica;
    font-weight: 400;
    color: transparent;
    font-size: 60px;
    letter-spacing: 0;
    line-height: 60px;
    white-space: nowrap;
  }
  
  .our-community .header-for-community .text-wrapper-6,
  .header-for-community .text-wrapper-6 {
    position: relative;
    width: 658px;
    font-family: "Urbanist-Light", Helvetica;
    font-weight: 300;
    color: #ffffff;
    font-size: 35px;
    letter-spacing: 1.4px;
    line-height: 35px;
  }
  
  .our-community .header-for-community .food-cart,
  .header-for-community .food-cart {
    position: relative;
    top: auto;
    left: auto;
    width: 375px;
    height: 404px;
    min-width: 375px;
    flex-shrink: 0;
    object-fit: contain;
    margin-top: -3.5px;
    margin-bottom: -3.5px;
    z-index: 0;
  }
  
  .our-community {
    background-color: #ffffff;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    min-height: auto; /* was 2817px - caused huge empty gap */
    position: relative;
  }
  
  .our-community > .frame {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 52px;
    padding: 60px 92px 80px;
    position: relative;
    border-radius: 4px;
  }
  
  .our-community > .frame .div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 34px;
    position: relative;
    width: 100%;
  }
  
  .our-community > .frame .p {
    position: relative;
    width: fit-content;
    margin-top: -1px;
    font-family: "Tilt Warp-Regular", Helvetica;
    font-weight: 400;
    color: #181818;
    font-size: 50px;
    text-align: center;
    letter-spacing: 0;
    line-height: 26.5px;
    white-space: nowrap;
  }
  
  .our-community > .frame .p .text-wrapper {
    color: #181818;
  }
  
  .our-community > .frame .p .span {
    color: #ff6e00;
  }
  
  .our-community > .frame .frame-2 {
    display: flex;
    flex-direction: column;
    width: 394px;
    align-items: center;
    gap: 0;
    position: relative;
    flex: 0 0 auto;
    border-radius: 4px;
    overflow: hidden;
    background-color: #ffffff;
  }
  
  .our-community .rectangle,
  .our-community img.rectangle {
    position: relative;
    align-self: stretch;
    width: 100%;
    height: 247px;
  }
  
  .our-community > .frame .frame-2 .frame-3,
  .our-community > .frame .frame-6 .frame-3,
  .our-community > .frame .frame-7 .frame-3 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
    border-radius: 0 0 4px 4px;
    background-color: #ffffff;
    padding: 20px 24px 24px;
  }
  
  .our-community .text-wrapper-2 {
    position: relative;
    width: 330px;
    height: 36px;
    margin-top: -1px;
    font-family: "Tilt Warp-Regular", Helvetica;
    font-weight: 400;
    color: #ff6e00;
    font-size: 30px;
    letter-spacing: 0;
    line-height: 30px;
    white-space: nowrap;
  }
  
  .our-community .text-wrapper-3 {
    position: relative;
    width: fit-content;
    font-family: "Tajawal-Bold", Helvetica;
    font-weight: 700;
    color: #181818;
    font-size: 24px;
    letter-spacing: 0;
    line-height: 24px;
    white-space: nowrap;
  }
  
  .our-community .text-wrapper-4 {
    position: relative;
    width: fit-content;
    font-family: "Tajawal-Regular", Helvetica;
    font-weight: 400;
    color: #181818;
    font-size: 20px;
    letter-spacing: 0;
    line-height: 20px;
    white-space: nowrap;
  }
  
  .our-community .frame-4 {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    position: relative;
    flex: 0 0 auto;
  }
  
  .our-community .vector {
    position: relative;
    width: 20px;
    height: 19px;
  }
  
  .our-community > .frame .frame-5 {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 30px;
    position: relative;
  }
  
  .our-community > .frame .frame-6 {
    display: flex;
    flex-direction: column;
    width: 394px;
    align-items: center;
    gap: 0;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    background-color: #ffffff;
  }
  
  .our-community > .frame .frame-7 {
    display: flex;
    flex-direction: column;
    width: 394px;
    align-items: center;
    gap: 0;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    background-color: #ffffff;
  }
  
  .our-community .img,
  .our-community img.img {
    position: relative;
    align-self: stretch;
    width: 100%;
    height: 247px;
    object-fit: cover;
  }
  
  .our-community .our-forest-grove {
    position: relative;
    width: fit-content;
    margin-top: -1px;
    font-family: "Tilt Warp-Regular", Helvetica;
    font-weight: 400;
    color: #181818;
    font-size: 40px;
    text-align: center;
    letter-spacing: 0;
    line-height: 21.2px;
    white-space: nowrap;
  }
  
  .our-community .our-forest-grove .text-wrapper {
    color: #181818;
  }
  
  .our-community .frame-8 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 16px 18px;
    position: absolute;
    top: 2435px;
    left: 1130px;
    border-radius: 4px;
    box-shadow: var(--joyous-shadow);
    background: var(--joyous-gradient);
  }
  
  .our-community .vector-2 {
    position: relative;
    width: 22px;
    height: 22px;
  }
  
  .our-community .text-wrapper-5 {
    position: relative;
    width: fit-content;
    margin-top: -1px;
    filter: blur(3px);
    font-family: "Urbanist-Bold", Helvetica;
    font-weight: 700;
    color: #ffffff;
    font-size: 26px;
    text-align: center;
    letter-spacing: 0;
    line-height: 26px;
    white-space: nowrap;
  }
  
  .our-community .frame-9 {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 581px;
    align-items: flex-start;
    justify-content: center;
    gap: 13px;
    padding: 80px 65px 30px 92px;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #181818;
    border-radius: 0 0 4px 4px;
  }
  
  .our-community .text-wrapper-6 {
    position: relative;
    width: fit-content;
    font-family: "Urbanist-ExtraBold", Helvetica;
    font-weight: 800;
    color: #ffffff;
    font-size: 35px;
    letter-spacing: 1.4px;
    line-height: 35px;
    white-space: nowrap;
  }
  
  .our-community .text-wrapper-7 {
    position: relative;
    width: 804px;
    height: 63px;
    text-shadow: 0px 4px 4px #00000040;
    background: linear-gradient(167deg, rgba(255, 176, 116, 1) 0%, rgba(251, 86, 0, 1) 49%, rgba(153, 20, 0, 1) 100%);
    -webkit-background-clip: text !important;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: "Tilt Warp-Regular", Helvetica;
    font-weight: 400;
    color: transparent;
    font-size: 60px;
    letter-spacing: 0;
    line-height: 60px;
    white-space: nowrap;
  }
  
  .our-community .text-wrapper-8 {
    position: relative;
    width: 658px;
    font-family: "Urbanist-Light", Helvetica;
    font-weight: 300;
    color: #ffffff;
    font-size: 35px;
    letter-spacing: 1.4px;
    line-height: 35px;
  }
  
  /* Only apply to food-cart outside header (e.g. other page sections) */
  .our-community > .frame .food-cart,
  .our-community > .community-restaurant-cards .food-cart {
    position: absolute;
    top: 141px;
    left: 720px;
    width: 220px;
    height: 220px;
  }
  
  .our-community .solid-gradient {
    position: relative;
    width: 85.94%;
    height: 92.19%;
    top: 3.91%;
    left: 7.03%;
    background-image: url(./img/food-cart%201.png);
    background-size: 100% 100%;
  }

  .our-community .frame4 {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .our-community .frame-10 {
    display: flex;
    width: 1242px;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    top: 24px;
    left: 92px;
  }
  
  .our-community .frame-11 {
    display: inline-flex;
    align-items: center;
    gap: 42px;
    position: relative;
    flex: 0 0 auto;
  }
  
  .our-community .LOGO-SVG-for-cliff {
    position: relative;
    width: 215px;
    height: 86px;
  }
  
  .our-community .text-wrapper-9 {
    position: relative;
    width: 108px;
    height: 20px;
    font-family: "Urbanist-Regular", Helvetica;
    font-weight: 400;
    color: #ffffff;
    font-size: 24px;
    text-align: center;
    letter-spacing: 0.96px;
    line-height: 24px;
    white-space: nowrap;
  }
  
  .our-community .text-wrapper-10 {
    position: relative;
    width: 108px;
    height: 20px;
    font-family: "Urbanist-Regular", Helvetica;
    font-weight: 400;
    color: #ffffff;
    font-size: 24px;
    text-align: center;
    letter-spacing: 0.96px;
    line-height: 24px;
    text-decoration: none;
    white-space: nowrap;
  }
  
  .our-community .text-wrapper-11 {
    position: relative;
    width: 180px;
    height: 20px;
    font-family: "Urbanist-Regular", Helvetica;
    font-weight: 400;
    color: #ffffff;
    font-size: 24px;
    text-align: center;
    letter-spacing: 0.96px;
    line-height: 24px;
    white-space: nowrap;
  }
  
  .our-community .frame-12 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    position: relative;
    flex: 0 0 auto;
    border-radius: 4px;
    box-shadow: 0px 4px 4px #00000040;
    background: linear-gradient(180deg, rgba(255, 176, 116, 1) 0%, rgba(251, 86, 0, 1) 49%, rgba(153, 20, 0, 1) 100%);
  }
  
  .our-community .download {
    position: relative;
    width: 34px;
    height: 34px;
  }
  
  .our-community .vector-3 {
    position: absolute;
    width: 58.33%;
    height: 70.83%;
    top: 12.5%;
    left: 20.83%;
  }
  
  .our-community .text-wrapper-12 {
    position: relative;
    width: fit-content;
    filter: blur(3px);
    font-family: "Urbanist-Bold", Helvetica;
    font-weight: 700;
    color: #ffffff;
    font-size: 26px;
    text-align: center;
    letter-spacing: 0;
    line-height: 26px;
    white-space: nowrap;
  }
  
  .our-community .frame-13 {
    display: flex;
    width: 100vw;
    height: 319px;
    align-items: flex-start;
    justify-content: space-between;
    padding: 32px max(92px, calc((100vw - 1440px) / 2));
    margin-left: calc(50% - 50vw);
    position: absolute;
    left: 0;
    bottom: 0;
    box-sizing: border-box;
    background-color: #181818;
  }
  
  .our-community .frame-14 {
    display: inline-flex;
    align-items: flex-start;
    justify-content: center;
    gap: 85px;
    position: relative;
    flex: 0 0 auto;
  }
  
  .our-community .text-wrapper-13 {
    position: relative;
    width: 175px;
    margin-top: -1px;
    font-family: "Tajawal-Regular", Helvetica;
    font-weight: 400;
    color: #ffffff;
    font-size: 16px;
    text-align: center;
    letter-spacing: 0;
    line-height: 24.5px;
  }
  


  /* For Restaurants Page Styles */
  .for-restaurants {
    background-color: #ffffff;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    min-height: 2584px;
    position: relative;
  }
  
  .for-restaurants .joyous-makes-you {
    position: absolute;
    top: 975px;
    left: 740px;
    width: 532px;
    font-family: "Tilt Warp-Regular", Helvetica;
    font-weight: 400;
    color: transparent;
    font-size: 50px;
    letter-spacing: 0;
    line-height: 50px;
  }
  
  .for-restaurants .text-wrapper {
    color: #181818;
  }
  
  .for-restaurants .span {
    color: #ff6e00;
  }
  
  .for-restaurants .joyous-provided {
    position: absolute;
    top: 1415px;
    left: 92px;
    width: 532px;
    font-family: "Tilt Warp-Regular", Helvetica;
    font-weight: 400;
    color: transparent;
    font-size: 50px;
    letter-spacing: 0;
    line-height: 50px;
  }
  
  .for-restaurants .for-restaurants-hero {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 16px;
    position: relative;
  }
  
  .for-restaurants .div {
    position: relative;
    width: 804px;
    height: 63px;
    text-shadow: var(--joyous-shadow);
    background: var(--joyous-gradient);
    -webkit-background-clip: text !important;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: "Tilt Warp-Regular", Helvetica;
    font-weight: 400;
    color: transparent;
    font-size: 60px;
    letter-spacing: 0;
    line-height: 60px;
    white-space: nowrap;
  }
  
  .for-restaurants .p {
    position: relative;
    width: 757px;
    font-family: "Urbanist-ExtraBold", Helvetica;
    font-weight: 800;
    color: #ffffff;
    font-size: 35px;
    letter-spacing: 1.4px;
    line-height: 35px;
  }
  
  .for-restaurants .new-customers-more {
    position: relative;
    width: 757px;
    height: 84px;
    font-family: "Urbanist-Light", Helvetica;
    font-weight: 300;
    color: #ffffff;
    font-size: 35px;
    letter-spacing: 1.4px;
    line-height: 35px;
  }
  
  .for-restaurants .frame-2 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    position: relative;
    flex: 0 0 auto;
    border-radius: 8px;
    box-shadow: var(--joyous-shadow);
    background: var(--joyous-gradient);
  }
  
  .for-restaurants .text-wrapper-2 {
    position: relative;
    width: fit-content;
    margin-top: -1px;
    filter: blur(3px);
    font-family: "Urbanist-Bold", Helvetica;
    font-weight: 700;
    color: #ffffff;
    font-size: 26px;
    text-align: center;
    letter-spacing: 0;
    line-height: 26px;
    white-space: nowrap;
  }
  
  .for-restaurants .salad {
    position: absolute;
    top: 104px;
    left: 915px;
    width: 421px;
    height: 435px;
    z-index: 0;
  }
  
  .for-restaurants .LOGO-SVG-for-cliff {
    position: relative;
    width: 215px;
    height: 86px;
  }
  
  .for-restaurants .download {
    position: relative;
    width: 34px;
    height: 34px;
  }
  
  .for-restaurants .vector {
    position: absolute;
    width: 58.33%;
    height: 70.83%;
    top: 12.5%;
    left: 20.83%;
  }
  
  .for-restaurants .text-wrapper-6 {
    position: relative;
    width: fit-content;
    filter: blur(3px);
    font-family: "Urbanist-Bold", Helvetica;
    font-weight: 700;
    color: #ffffff;
    font-size: 26px;
    text-align: center;
    letter-spacing: 0;
    line-height: 26px;
    white-space: nowrap;
  }
  
  .for-restaurants .frame-5 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    position: absolute;
    top: 2144px;
    left: 595px;
    border-radius: 8px;
    box-shadow: var(--joyous-shadow);
    background: var(--joyous-gradient);
  }
  
  .for-restaurants .frame-6 {
    display: flex;
    width: 100vw;
    height: 319px;
    align-items: flex-start;
    justify-content: space-between;
    padding: 32px max(92px, calc((100vw - 1440px) / 2));
    margin-left: calc(50% - 50vw);
    position: absolute;
    left: 0;
    bottom: 0;
    box-sizing: border-box;
    background-color: #181818;
  }
  
  .for-restaurants .frame-7 {
    display: inline-flex;
    align-items: flex-start;
    justify-content: center;
    gap: 85px;
    position: relative;
    flex: 0 0 auto;
  }
  
  .for-restaurants .text-wrapper-7 {
    position: relative;
    width: 175px;
    margin-top: -1px;
    font-family: "Tajawal-Regular", Helvetica;
    font-weight: 400;
    color: #ffffff;
    font-size: 16px;
    text-align: center;
    letter-spacing: 0;
    line-height: 24.5px;
  }
  
  .for-restaurants .joyous-invests-in {
    position: absolute;
    top: 1109px;
    left: 741px;
    width: 587px;
    font-family: "Urbanist-Regular", Helvetica;
    font-weight: 400;
    color: transparent;
    font-size: 26px;
    letter-spacing: 0.52px;
    line-height: 35.9px;
  }
  
  .for-restaurants .text-wrapper-8 {
    color: #181818;
    letter-spacing: 0.14px;
  }
  
  .for-restaurants .text-wrapper-9 {
    font-family: "Urbanist-Bold", Helvetica;
    font-weight: 700;
    color: #ff6e00;
    letter-spacing: 0.14px;
  }
  
  .for-restaurants .we-conducted-an {
    position: absolute;
    top: 1599px;
    left: 93px;
    width: 555px;
    font-family: "Urbanist-Regular", Helvetica;
    font-weight: 400;
    color: transparent;
    font-size: 26px;
    letter-spacing: 0.52px;
    line-height: 35.9px;
  }
  
  .for-restaurants .text-wrapper-10 {
    color: #000000;
    letter-spacing: 0.14px;
  }
  
  .for-restaurants .restaurant-ipad {
    position: absolute;
    top: 1400px;
    left: 741px;
    width: 587px;
    height: 599px;
  }
  
  .for-restaurants .frame-8 {
    display: flex;
    width: 1230px;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    top: 632px;
    left: calc(50% - 627px);
  }
  
  .for-restaurants .frame-9 {
    display: flex;
    flex-direction: column;
    width: 370px;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 30px;
    position: relative;
    background-color: #181818;
    border-radius: 8px;
    box-shadow: var(--joyous-shadow);
  }
  
  .for-restaurants .chart-line {
    position: relative;
    width: 107px;
    height: 107px;
  }
  
  .for-restaurants .img {
    position: absolute;
    width: 83.33%;
    height: 75%;
    top: 12.5%;
    left: 8.33%;
  }
  
  .for-restaurants .text-wrapper-11 {
    position: relative;
    align-self: stretch;
    height: 32px;
    font-family: "Tilt Warp-Regular", Helvetica;
    font-weight: 400;
    color: #ff6e00;
    font-size: 30px;
    text-align: center;
    letter-spacing: 0;
    line-height: 30px;
    white-space: nowrap;
  }
  
  .for-restaurants .text-wrapper-12 {
    position: relative;
    align-self: stretch;
    height: 40px;
    font-family: "Urbanist-Regular", Helvetica;
    font-weight: 400;
    color: #ffffff;
    font-size: 20px;
    text-align: center;
    letter-spacing: 0;
    line-height: 20px;
  }
  
  .for-restaurants .vector-wrapper {
    position: relative;
    width: 107px;
    height: 107px;
    aspect-ratio: 1;
  }
  
  .for-restaurants .vector-2 {
    position: absolute;
    width: 83.33%;
    height: 83.33%;
    top: 8.33%;
    left: 8.33%;
  }
  
  .for-restaurants .vector-3 {
    position: absolute;
    width: 87.51%;
    height: 87.51%;
    top: 8.33%;
    left: 4.16%;
  }
  
  .for-restaurants .frame-10 {
    display: flex;
    flex-direction: column;
    width: 555px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 36px 20px;
    position: absolute;
    top: 955px;
    left: 93px;
    background-color: #181818;
    border-radius: 8px;
    box-shadow: var(--joyous-shadow);
  }
  
  .for-restaurants .marketing {
    position: relative;
    width: 221px;
    height: 221px;
  }
  
  .for-restaurants .text-wrapper-13 {
    position: relative;
    align-self: stretch;
    font-family: "Tilt Warp-Regular", Helvetica;
    font-weight: 400;
    color: #ff6e00;
    font-size: 50px;
    text-align: center;
    letter-spacing: 0;
    line-height: 50px;
  }
  
  .for-restaurants .text-wrapper-14 {
    position: absolute;
    top: 2089px;
    left: 572px;
    font-family: "Tilt Warp-Regular", Helvetica;
    font-weight: 400;
    color: #181818;
    font-size: 40px;
    text-align: center;
    letter-spacing: 0;
    line-height: 21.2px;
    white-space: nowrap;
  }