/*
    START: RESET
    Josh's Custom CSS Reset (with customization)
    https://www.joshwcomeau.com/css/custom-css-reset/
*/
:root {
    /* Colors */
    --color-black: #000000;
    --color-black-2: #3f4040;
    --color-pink: #f8b9ba;
    --color-pink-10: #f8b9ba1a;
    --color-dark-pink: #dd9498;
    --color-white: #ffffff;
    --color-cream: #f3e9e2;
    --color-charcoal: #4a4a4a;
    --color-gray-2: #828282;
    --color-gray-4: #bdbdbd;
    --color-gray-100: #f3f4f6;
    --color-gray-200: #e5e7eb;
    --color-gray-500: #6b7280;
    --color-gray-600: #4b5563;
    --color-green: #27ae60;

    --shadow: #aa4f5461;

    /* Theme colors */
    --color-primary: var(--color-black-2);
    --color-text-primary: var(--color-black-2);
    --color-secondary: var(--color-pink);
    --color-accent: var(--color-dark-pink);
    --color-text-muted: #999999;

    /* Font Family */
    --font-baskerville-bold: "Libre Baskerville Bold", serif;
    --font-figtree-bold: "Figtree Bold", sans-serif;
    --font-figtree-semibold: "Figtree SemiBold", sans-serif;
    --font-figtree-medium: "Figtree Medium", sans-serif;
    --font-figtree-regular: "Figtree Regular", sans-serif;
}

/* START: KEYFRAMES */
@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
    }

    to {
        opacity: 1;
        transform: translateZ(0);
    }
}

@keyframes fadeOutDown {
    0% {
        opacity: 1;
    }

    to {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes fadeOutDown {
    0% {
        opacity: 1;
    }

    to {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
    }
}

@keyframes slideInBounceLeft {
    0% {
        opacity: 0;
        transform: translate(-150%) rotate(15deg);
    }
    45% {
        opacity: 1;
        transform: translate(-26%) rotate(15deg);
    }
    60% {
        opacity: 1;
        transform: translate(-36%) rotate(15deg);
    }
    72% {
        opacity: 1;
        transform: translate(-31%) rotate(15deg);
    }
    82% {
        opacity: 1;
        transform: translate(-34%) rotate(15deg);
    }
    88% {
        opacity: 1;
        transform: translate(-32.5%) rotate(15deg);
    }
    93% {
        opacity: 1;
        transform: translate(-33.3%) rotate(15deg);
    }
    96% {
        opacity: 1;
        transform: translate(-32.8%) rotate(15deg);
    }
    98% {
        opacity: 1;
        transform: translate(-33.1%) rotate(15deg);
    }
    100% {
        opacity: 1;
        transform: translate(-33%) rotate(15deg);
    }
}

@keyframes slideInBounceRight {
    0% {
        opacity: 0;
        transform: translate(150%) rotate(-15deg);
    }
    45% {
        opacity: 1;
        transform: translate(36%) rotate(-15deg);
    }
    60% {
        opacity: 1;
        transform: translate(46%) rotate(-15deg);
    }
    72% {
        opacity: 1;
        transform: translate(41%) rotate(-15deg);
    }
    82% {
        opacity: 1;
        transform: translate(44%) rotate(-15deg);
    }
    88% {
        opacity: 1;
        transform: translate(42.5%) rotate(-15deg);
    }
    93% {
        opacity: 1;
        transform: translate(43.3%) rotate(-15deg);
    }
    96% {
        opacity: 1;
        transform: translate(42.8%) rotate(-15deg);
    }
    98% {
        opacity: 1;
        transform: translate(43.1%) rotate(-15deg);
    }
    100% {
        opacity: 1;
        transform: translate(43%) rotate(-15deg);
    }
}

@keyframes loading {
    to {
        transform: rotate(1turn);
    }
}

@keyframes slideInUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideHalfLeft {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-50%);
    }
}

@keyframes spinCounterClockWise {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-360deg);
    }
}

@keyframes spinAboutClockWise {
    0% {
        transform: translateX(-50%) rotate(0deg);
    }
    100% {
        transform: translateX(-50%) rotate(360deg);
    }
}

@keyframes floatingImageIn {
    from {
        transform: scale(0) rotate(-180deg);
    }

    to {
        transform: scale(1) rotate(0deg);
    }
}
/* END: KEYFRAMES */

/* START: UTILS */
.hidden {
    display: none !important;
}

.bg-pink {
    background-color: var(--color-pink);
}

.bg-black {
    background-color: var(--color-black-2);
}

.ml-auto {
    margin-left: auto;
}

.ml-12 {
    margin-left: 12px;
}

.mb-5 {
    margin-bottom: 5px;
}

.mb-10 {
    margin-bottom: 10px;
}

.mb-20 {
    margin-bottom: 20px;
}

.mb-25 {
    margin-bottom: 25px;
}

.mt-15 {
    margin-top: 15px;
}

.mt-40-desktop {
    @media (min-width: 769px) {
        margin-top: 40px;
    }
}

.text-center {
    text-align: center;
}

.pink {
    color: var(--color-pink);
}

.gray-4 {
    color: var(--color-gray-4);
}

.width-full {
    width: 100%;
}

.font-figtree-semibold {
    font-family: var(--font-figtree-semibold);
}

.font-figtree-bold {
    font-family: var(--font-figtree-bold);
}

.mb-35 {
    margin-bottom: 35px;
}

.pb-0 {
    padding-bottom: 0 !important;
}

.pb-5 {
    padding-bottom: 5px;
}

.pb-25 {
    padding-bottom: 25px;
}

.expand-column {
    grid-column: 1 / -1;
}

.overflow-x-hidden {
    overflow-x: hidden;
}

.relative {
    position: relative;
}

.nowrap {
    white-space: nowrap;
}

.inline-block {
    display: inline-block;
}

.block {
    display: block;
}

.rotate-180 {
    transform: rotate(180deg);
}

.justify-self-center {
    justify-self: center;
}

.height-full {
    height: 100%;
}
/* END: UTILS */

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

@media (prefers-reduced-motion: no-preference) {
    html {
        interpolate-size: allow-keywords;
    }
}

body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    font: 16px/1.2 var(--font-figtree-regular);
    transition: background-color 1.5s ease;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

input,
button,
textarea,
select,
pre {
    font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}

p {
    text-wrap: pretty;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    text-wrap: balance;
    font: inherit;
}

a {
    text-decoration: none;
    color: inherit;
}

#root,
#__next {
    isolation: isolate;
}
/* END: RESET */

/* START: CONTAINER */
.container {
    max-width: 1340px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;

    @media (max-width: 768px) {
        padding-left: 15px;
        padding-right: 15px;
    }
}
/* END: CONTAINER */

/* START: link */
.link {
    font: 14px/1.2 var(--font-figtree-semibold);
    color: var(--color-dark-pink);
    cursor: pointer;
    text-decoration: none;
    background: none;
    border: none;

    &[disabled] {
        color: var(--color-gray-4);
        cursor: not-allowed;
    }
}
/* END: link */

/* START: BUTTON */
.button {
    padding: 14px 24px;
    font: 16px/1.2 var(--font-baskerville-bold);
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s;

    display: inline-block;
    text-align: center;
    color: white;

    background-color: var(--color-black-2);
    color: var(--color-white);
    border: 1px solid var(--color-black-2);
    text-decoration: none;

    &:focus {
        outline: none;
    }

    @media (max-width: 768px) {
        padding: 10px 20px;
        font-size: 14px;
    }
}

.button--input {
    padding: 12px 18px;
}

.button--rounded {
    border-radius: 99px;
}

.button--fit {
    width: fit-content;
}

.button--full {
    width: 100%;
}

.button--justify-center {
    justify-content: center;
}

.button--pink,
.button--secondary {
    background-color: var(--color-secondary);
    color: var(--color-text-primary);
    border-color: var(--color-secondary);
}

.button--secondary-2 {
    background-color: var(--color-cream);
    color: var(--color-text-primary);
    border-color: var(--color-cream);
}

.button--outline {
    background-color: white;
    color: var(--color-black-2);
    border-color: var(--color-black-2);
}

.button--outline-dark {
    background-color: var(--color-black-2);
    color: var(--color-white);
    border: 1px solid var(--color-white);
}

.button--change-bg {
    --change-bg-to: var(--color-dark-pink);

    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: border-color 0.2s ease;

    .invert-image {
        -webkit-filter: invert(1) brightness(1);
        filter: invert(1) brightness(1);
        transition: filter 0.2s ease;
    }

    &::before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 0;
        background: var(--change-bg-to);
        transition:
            height 0.2s ease,
            color 0.2s ease;
        z-index: -1;
    }

    /* only works on mobile */
    @media (min-width: 568px) {
        &:hover {
            border-color: var(--change-bg-to);
            color: white;

            .invert-image {
                -webkit-filter: invert(0) brightness(0.7);
            }

            &::before {
                height: 100%;
            }
        }
    }
}

.button[disabled],
.button--disabled {
    &,
    &::before,
    &:hover {
        background-color: var(--color-gray-4);
        color: var(--color-white);
        border-color: var(--color-gray-4);
    }
}

.button--icon {
    display: flex;
    align-items: center;
    gap: 10px;
}

.button--icon {
    display: flex;
    align-items: center;
    gap: 10px;

    > img,
    > svg {
        width: 24px;
        height: 14px;
    }
}

.button--transition-transform {
    transition: transform 0.4s ease-in-out;
}

.button--translate-y-0 {
    transform: translateY(0);
}

.button--translate-y--1000 {
    transform: translateY(-1000px);
}

.button--long-mobile {
    @media (max-width: 768px) {
        padding-left: 50px;
        padding-right: 50px;
    }
}

.button--nowrap {
    white-space: nowrap;
}
/* END: BUTTON */

/* START: CARD */
.card {
    background-color: var(--color-white);
    border-radius: 25px;
    padding: 40px;
    transition: height 0.2s ease-in-out;

    @media (max-width: 768px) {
        padding: 25px 18px;
    }
}

.card__header-btn {
    display: none;
    width: 100%;
    max-width: 80px;
    border-radius: 4px;
    height: 4px;
    background-color: var(--color-cream);
    justify-self: center;
    margin-bottom: 30px;
    margin-left: auto;
    margin-right: auto;
    transform: translateY(-15px);
    cursor: grab;
    position: relative;

    &::after {
        content: "";
        position: absolute;
        top: -20px;
        bottom: -20px;
        left: -20px;
        right: -20px;
        cursor: grab;
    }

    @media (max-width: 768px) {
        display: block;
    }
}

.card--logout {
    width: 420px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;

    .card__title {
        font-size: 30px;
        margin-bottom: 23px;
    }

    .card__title,
    .card__subtitle {
        text-align: left;
        margin-left: 0;
        margin-right: 0;
        max-width: unset;
    }

    @media (max-width: 768px) {
        display: none;
    }
}

.card--bottom-sheet {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.card--no-padding {
    padding: 0;
}

.card__title {
    font: 40px/1.2 var(--font-baskerville-bold);
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;

    @media (max-width: 768px) {
        font-size: 25px;
    }
}

.card__subtitle {
    font: 16px/1.2 var(--font-figtree-regular);
    color: var(--color-black-2);
    width: 100%;
    margin-bottom: 30px;
    text-align: center;

    @media (max-width: 768px) {
        font-size: 14px;
        margin-bottom: 20px;
    }
}

.card__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}
/* END: CARD */

/* START: INPUT */
.input {
    width: 100%;
    padding: 12px 13px;
    font: 16px/1.2 var(--font-figtree-regular);
    border: 1px solid var(--color-cream);
    border-radius: 5px;
    transition: border-color 0.2s;
    color: var(--color-text-primary);

    &::placeholder {
        color: var(--color-gray-4);
        text-transform: capitalize;
    }

    &:focus {
        outline: none;
        border-color: var(--color-dark-pink);
    }

    &[type="date"]::-webkit-calendar-picker-indicator {
        width: 18px;
        position: relative;
        right: -5px;
        cursor: pointer;
    }

    &[type="date"]::-webkit-calendar-picker-indicator {
        background: transparent url("/static/img/icon-calendar.webp") center no-repeat;
        background-size: 18px;
    }

    &[type="date"]::placeholder {
        text-transform: uppercase;
    }

    &[type="number"] {
        appearance: textfield;

        /* remove arrow */
        &::-webkit-outer-spin-button,
        &::-webkit-inner-spin-button {
            -webkit-appearance: none;
        }
    }

    @media (max-width: 768px) {
        font-size: 15px;
    }
}

.input--error {
    border-color: var(--color-dark-pink);
    background-color: var(--color-pink-10);
}

.input-radio {
    height: 22px;
    aspect-ratio: 1;
    border: 1px solid var(--color-gray-4);
    background-color: white;
    border-radius: 50%;
    position: relative;
    cursor: pointer;
    user-select: none;

    &::before {
        content: "";
        position: absolute;
        display: block;

        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        height: 70%;
        aspect-ratio: 1;
        border-radius: 50%;
    }

    input:checked + & {
        border: 2px solid var(--color-dark-pink);

        &::before {
            background-color: var(--color-dark-pink);
        }
    }
}

.input-radio--error {
    border-color: var(--color-dark-pink);

    input:checked + &::before {
        background-color: var(--color-dark-pink);
    }
}

/* 2. Style the custom checkmark container (the box) */
.input-checkbox {
    display: block; /* Ensures the label and input behave as a block */
    position: relative;
    cursor: pointer;
    font-size: 16px;
    user-select: none; /* Prevent text selection */

    height: 20px;
    width: 20px;

    &::after {
        content: "";
        position: absolute;
        left: 7px; /* Adjust for centering */
        top: 3px; /* Adjust for centering */
        width: 6px;
        height: 12px;
        border: solid white;
        border-width: 0 3px 3px 0;
        transform: rotate(45deg);
        opacity: 0; /* Hide the checkmark by default */
        transition: all 0.2s ease;
    }

    &::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;

        border: 2px solid var(--color-cream);
        border-radius: 4px;
    }

    input[type="checkbox"]:checked + &::before {
        background-color: var(--color-dark-pink);
    }

    input[type="checkbox"]:checked + &::after {
        opacity: 1;
    }
}

.input-checkbox--error::before {
    border-color: var(--color-dark-pink);
}
/* END: INPUT */

/* START: INPUT WRAPPER  */
.input-icon {
    display: flex;
    align-items: center;
    position: relative;
}

.input-icon--suffix {
    > .input-icon__input {
        padding-right: 50px;
    }

    > .input-icon__icon,
    .input-icon__text {
        right: 15px;
    }
}

.input-icon--prefix {
    > .input-icon__input {
        padding-left: 50px;
    }

    > .input-icon__icon {
        left: 15px;
    }
}

.input-icon__icon {
    position: absolute;
    cursor: pointer;
    color: var(--color-text-muted);
    width: 18px;
    height: 18px;

    /* if the icon is a font icon such as Rp or +62 */
    color: var(--color-text-primary);
    font-weight: 600;
    font-size: 16px;
}

.input-icon__text {
    display: block;
    position: absolute;
    cursor: pointer;
    color: var(--color-dark-pink);
    height: 18px;
    font-weight: 500;
    font-size: 16px;

    @media (max-width: 768px) {
        font-size: 13px;
    }
}

/* Radio buttons */
.radio-group {
    display: flex;
    gap: 30px;
    max-width: 200px;
    justify-content: space-between;
    width: 100%;
}

.radio-group__item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    cursor: pointer;
    color: var(--color-text-primary);
    position: relative;
}

.radio-group__input {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1;
}

.radio-group__label {
    font: 16px/1.2 var(--font-figtree-regular);

    @media (max-width: 768px) {
        font-size: 15px;
    }
}
/* END: INPUT WRAPPER */

/* START: IMAGE */
.bg-img {
    --bg-img-url: none;
    --bg-img-size: cover;
    --bg-img-position: center;
    --bg-img-repeat: no-repeat;
    --bg-img-attachment: scroll;

    background-image: var(--bg-img-url);
    background-size: var(--bg-img-size);
    background-position: var(--bg-img-position);
    background-repeat: var(--bg-img-repeat);
    background-attachment: var(--bg-img-attachment);
}

.bg-img--hero {
    --bg-img-url: url("/static/img/leave-pattern.webp");
    --bg-img-repeat: repeat;
    --bg-img-size: auto;
    --bg-img-position: top left;
}

.bg-img--fixed {
    --bg-img-attachment: fixed;
}

.bg-img--overlay::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40px;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(248, 185, 186, 0.3) 30%,
        /* var(--color-pink) */ rgba(248, 185, 186, 0.7) 70%,
        rgba(248, 185, 186, 1) 100%
    );
}
/* END: IMAGE */

/* START: BORDER */
.section-border {
    --section-border-url: url("/static/img/pattern-black.webp");
    --section-border-top: auto;
    --section-border-bottom: 8%;
    --section-border-left: auto;
    --section-border-right: auto;
    --section-border-height: 108px;
    --mobile-section-border-height: 64px;

    position: absolute;
    top: var(--section-border-top);
    bottom: var(--section-border-bottom);
    left: var(--section-border-left);
    right: var(--section-border-right);
    height: var(--section-border-height);
    width: 100%;
    overflow: hidden;

    &::before {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        background-image: var(--section-border-url);
        background-repeat: repeat;
        background-size: contain;
    }

    @media (max-width: 768px) {
        height: var(--mobile-section-border-height);
    }
}

.section-border--static {
    position: static;
}

.section-border--bg-cream {
    background-color: var(--color-cream);
}

.section-border-wrapper {
    position: sticky;
    top: 78vh;
    z-index: 1;
    height: 22vh;
}
/* END: BORDER */

/* START FORM */
.form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form__help-text {
    font: 15px/1.2 var(--font-figtree-medium);

    @media (max-width: 768px) {
        font-size: 14px;
    }
}

.form__resend-text {
    font: 15px/1.2 var(--font-figtree-regular);

    @media (max-width: 768px) {
        font-size: 14px;
    }
}

.form__field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form__field--inline {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;

    @media (max-width: 568px) {
        grid-template-columns: 1fr;
        gap: 20px; /* same gap with .form */
    }
}

.form__field-label {
    font: 15px/1.2 var(--font-figtree-medium);
    color: var(--color-text-primary);
    display: block;

    @media (max-width: 768px) {
        font-size: 13px;
    }
}

.form__field-label--required::after {
    content: "*";
    color: var(--color-dark-pink);
}
/* END FORM */

/* START: HEADER */
.header {
    position: relative; /* required to enable z-index */
    z-index: 1000;
    width: 100%;
}

.header--fixed-top {
    position: absolute;
    top: 0;
}

.header--max-level .header__nav-link {
    color: white;
}

.header__container {
    padding-top: 30px;
    padding-bottom: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    @media (max-width: 768px) {
        padding-top: 18px;
        padding-bottom: 12px;
        position: relative;
        justify-content: center;
    }
}

.header__logo {
    max-width: 150px;
}

.header__logo-image {
    width: 100%;
    height: auto;
    display: block;
}

.header__nav {
    display: flex;
    gap: 50px;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;

    @media (max-width: 768px) {
        display: none;
    }
}

.header__nav-link {
    color: var(--color-black-2);
    font: 16px/1 var(--font-baskerville-bold);

    &:hover {
        color: var(--color-dark-pink);
    }
}

.header__toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    display: none;
    align-items: center;
    justify-content: center;

    @media (max-width: 768px) {
        position: absolute;
        left: 15px;
        top: 50%;
        transform: translateY(-50%);
        display: block;
    }
}

.header__toggle-close {
    position: absolute;
    top: 35px;
    left: 23px;
    cursor: pointer;
}

.header__toggle-icon {
    width: 20px;
    height: 16px;
}

.header__toggle-icon-close {
    width: 15px;
    height: 15px;
}

.header__mobile {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100%;
    background-color: var(--color-black-2);
    background-image: url("/static/img/header-pattern.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    flex-direction: column;
    gap: 60px;
}

.header__mobile-nav {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    padding: 40px 20px 20px;

    @media (max-width: 768px) {
        display: flex;
    }
}

.header__mobile-link {
    color: var(--color-white);
    font: 20px/1 var(--font-baskerville-bold);
}

.header__mobile-logo {
    display: flex;
    justify-content: center;
    padding: 25px 0;
}

.header__mobile-logo-link {
    width: 120px;

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

input[type="checkbox"]:checked ~ .header__mobile {
    display: flex;
}

.header__mobile-intersection {
    height: 30px;
    background-image: url("/static/img/intersection-pink.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.header__mobile-bottom {
    display: flex;
    flex-direction: column;
    gap: 30px;
    position: relative;
    padding-bottom: 20px;
}

.header__mobile-footer {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}

.header__mobile-social {
    display: flex;
    gap: 10px;
}

.header__mobile-social-link {
    width: 43px;
    height: 43px;

    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

.header__mobile-copyright {
    font: 13px/1.2 var(--font-figtree-regular);
    color: var(--color-white);
}
/* END: HEADER */

/* START: FOOTER */
.footer {
    background-color: var(--color-pink);
    background-image: url("/static/img/footer-pattern.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 80px 0;

    @media (max-width: 768px) {
        background-image: url("/static/img/footer-pattern-mobile.webp");
        padding-bottom: 40px;
    }
}

.footer--corporate {
    background-image: none;
    background-color: var(--color-black-2);
    padding-top: 40px;
    padding-bottom: 40px;
    margin-top: -2px;

    @media (max-width: 768px) {
        .footer__nav-list {
            gap: 60px;
        }

        .footer__right {
            margin-top: 25px;
            gap: 25px;
        }

        .footer__copyright {
            text-align: left;
            align-self: flex-start;
            margin-bottom: 20px;
        }

        .footer__navs {
            gap: 0;
        }

        .footer__nav {
            align-items: flex-start;
            flex: 1;
        }
    }
}

.footer__container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 80px;
    align-items: start;

    @media (max-width: 1024px) {
        grid-template-columns: 1fr;
        gap: 40px;
        padding-left: 40px;
        padding-right: 40px;
    }

    @media (max-width: 768px) {
        padding-left: 20px;
        padding-right: 20px;
        gap: 50px;
    }
}

.footer__container--corporate {
    display: grid;
    justify-content: space-between;
    grid-template-columns: 2fr 1fr;
    gap: 25px;

    @media (max-width: 768px) {
        grid-template-columns: 1fr;

        .footer__social {
            width: 100%;
        }
    }
}

.footer__navs {
    display: flex;
    gap: 80px;
}

.footer__brand {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    min-height: 200px;
}

.footer__logo {
    width: 133px;
    height: 133px;
    margin-bottom: 10px;

    img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    @media (max-width: 768px) {
        margin-left: auto;
        margin-right: auto;
    }
}

.footer__description {
    font: 16px/1.2 var(--font-figtree-regular);
    color: var(--color-black-2);
    max-width: 280px;
    text-align: center;

    @media (max-width: 768px) {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        line-height: 1.3;
    }
}

.footer__nav {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;

    @media (max-width: 768px) {
        align-items: center;
    }
}

.footer__nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
    height: 100%;

    @media (max-width: 768px) {
        text-align: center;
        gap: 24px;
    }
}

.footer__nav-list--text-left-mobile {
    @media (max-width: 768px) {
        text-align: left;
        align-items: flex-start;
    }
}

.footer__nav-item {
    margin: 0;
}

.footer__nav-link {
    font: 18px/1.4 var(--font-baskerville-bold);
    color: var(--color-black-2);
    text-decoration: none;
    transition: color 0.2s;

    @media (max-width: 768px) {
        font-size: 20px;
    }
}

.footer__nav-link--white {
    color: var(--color-white);
}

.footer__right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    height: 100%;

    @media (max-width: 1024px) {
        align-items: center;
        min-height: auto;
        gap: 20px;
    }
}

.footer__right--self-start-mobile {
    @media (max-width: 1024px) {
        align-items: flex-start;
    }
}

.footer__social {
    display: flex;
    gap: 12px;
    align-items: center;
}

.footer__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer__social-icon {
    width: 43px;
    height: 43px;
    object-fit: contain;
}

.footer__copyright {
    font: 14px/1.2 var(--font-figtree-regular);
    color: var(--color-black-2);
    text-align: right;

    @media (max-width: 1024px) {
        text-align: center;
        font-size: 13px;
    }
}

.footer__copyright--white {
    color: var(--color-white);
}
/* END: FOOTER */

/* --- AUTH LAYOUT --- */
/* START: AUTH LAYOUT */
.auth-layout {
    min-height: calc(100vh - 100px); /* Full viewport height minus header/footer */
    display: flex; /* Still using flex for the overall column structure (nav + content) */
    flex-direction: column;
}

.auth-layout__content {
    flex-grow: 1;
    display: grid;
    place-items: center;
    padding: 60px 40px;

    @media (max-width: 1024px) {
        padding: 40px 30px;
    }

    @media (max-width: 768px) {
        padding: 30px 20px;
        place-items: start center;
    }

    @media (max-width: 568px) {
        padding: 40px 16px;
    }
}

.auth-layout__cards-container {
    display: grid;
    grid-template-columns: 528px 420px; /* Login card wider (2:1 ratio) */
    gap: 40px; /* Space between the two cards */
    width: 100%;
    max-width: 1000px;

    @media (max-width: 768px) {
        grid-template-columns: 1fr;
        gap: 20px;
        max-width: 500px;
    }
}

.auth-layout__cards-container--single {
    grid-template-columns: 1fr;
}

.auth-layout__cards-container--small {
    max-width: 595px;
}
/* END: AUTH LAYOUT */

.password-rules {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font: 12px/1.2 var(--font-figtree-medium);
}

.password-rules__list {
    list-style: none;
    padding-left: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.password-rules__item {
    font-size: 13px;
    color: var(--color-gray-4);
    display: flex;
    align-items: center;
    gap: 5px;

    &::before {
        content: "";
        display: block;
        background-image: url("/static/img/icon-gray-checkmark.webp");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        height: 10px;
        width: 10px;
    }
}

.password-rules__item--valid {
    color: var(--color-green);

    &::before {
        content: "";
        display: block;
        background-image: url("/static/img/icon-green-checkmark.webp");
    }
}

.tnc-checkbox-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tnc-checkbox-wrapper__input--error {
    border-color: var(--color-dark-pink);
}

.tnc-checkbox-wrapper__label {
    font-size: 14px;
    color: var(--color-text-primary);
}

.voucher-reward-content {
    width: 100%;

    padding-left: 16px;
    padding-right: 16px;
    padding-top: 32px;
    padding-bottom: 32px;

    @media (min-width: 1024px) {
        padding-left: 32px;
        padding-right: 32px;
    }
}

/* Elements within .welcome-area */
.welcome-area {
    display: flex;
    gap: 10px;
    justify-content: space-between;
    align-items: center;
}

.welcome-area--max-level .welcome-area__title {
    color: var(--color-pink);
}

.welcome-area__card {
    display: flex;
    align-items: center;
    justify-content: center;

    @media (max-width: 768px) {
        width: 100%;
    }
}

.welcome-area__title {
    font-size: 60px;
    font-family: var(--font-baskerville-bold);
    font-weight: 700;
    color: var(--color-black-2);

    @media (max-width: 1024px) {
        font-size: 48px;
    }

    @media (max-width: 768px) {
        display: none;
        font-size: 36px;
    }
}

.points-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: space-between;

    @media (max-width: 768px) {
        flex-direction: column;
    }
}

.points-summary--gap-bottom {
    margin-bottom: 35px;

    @media (max-width: 768px) {
        margin-bottom: 25px;
    }
}

.points-summary__expiry-text {
    font: 16px/1.2 var(--font-figtree-medium);
    background-color: var(--color-cream);
    padding: 8px 18px;
    border-radius: 5px;

    @media (max-width: 768px) {
        font-size: 11px;
        width: 100%;
        text-align: center;
    }
}

/*
* --- BEM BLOCK: .tabs-nav ---
*/
.tabs-nav {
    display: flex;
    border-bottom: 1px solid var(--color-cream);
    margin-bottom: 32px;
}

.tabs-nav__button {
    font: 16px/1.2 var(--font-figtree-medium);
    padding: 8px 16px;
    font-size: 14px;
    cursor: default; /* Non-clickable */
    border: none;
    background: none;
    transition: color 0.2s;
    text-decoration: none;
    color: var(--color-text-primary);
    cursor: pointer;

    @media (max-width: 768px) {
        flex: 1;
        text-align: center;
        font-size: 13px;
    }
}

.tabs-nav__button--active {
    border-bottom: 2px solid var(--color-dark-pink);
    color: var(--color-dark-pink);
    font-family: var(--font-figtree-bold);
}

.tabs-nav__button--inactive {
    color: var(--color-gray-500);
}

/*
* --- BEM BLOCK: .reward-list ---
*/
.reward-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    flex: 1;
    height: 320px;
    min-height: 320px;
    padding-bottom: 24px;
    overflow-y: auto;
    scrollbar-width: none;
    align-items: flex-start;

    @media (max-width: 1023px) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    @media (max-width: 767px) {
        grid-template-columns: 1fr;
        max-height: none;
        height: auto;
    }
}

/*
* --- BEM BLOCK: .reward-item ---
*/
.reward-item {
    display: grid;
    background-color: var(--color-white);
    padding: 16px;
    padding-left: 0;
    padding-top: 0;
    border-bottom-right-radius: 12px;
    transition: all 0.3s;
    border-right: 1px solid var(--color-cream);
    border-bottom: 1px solid var(--color-cream);
    height: 147px;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 22px;

    @media (max-width: 768px) {
        display: grid;
        grid-template-columns: 60px 1fr;
        gap: 10px;
        height: 115px;
        padding-right: 15px;
        padding-bottom: 15px;
        column-gap: 12px;
    }
}

.reward-item__image-container {
    > img {
        width: 88px;
        height: 88px;
        object-fit: cover;
        border-radius: 8px;
    }

    @media (max-width: 798px) {
        > img {
            width: 60px;
            height: 60px;
        }
    }
}

.reward-item__content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
}

.reward-item__title {
    font: 18px/1.2 var(--font-figtree-semibold);
    margin-bottom: 4px;

    @media (max-width: 768px) {
        font-size: 15px;
    }
}

.reward-item__description {
    font-size: 14px;
    color: var(--color-gray-600);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;

    @media (max-width: 768px) {
        font-size: 12px;
    }
}

.reward-item__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 5px;
}

.reward-item__footer--desktop-only {
    @media (max-width: 768px) {
        display: none;
    }
}

.reward-item__footer--mobile-only {
    @media (min-width: 768px) {
        display: none;
    }
}

.reward-item__points {
    font: 20px/1.2 var(--font-figtree-semibold);
    color: var(--color-black-2);
    display: inline-flex;
    align-items: center;
    gap: 5px;

    &::after {
        content: "";
        height: 15px;
        aspect-ratio: 1;
        background-image: url("/static/img/icon-point.svg");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        display: block;
    }

    @media (max-width: 768px) {
        font-size: 18px;

        &::after {
            height: 14px;
        }
    }
}

.reward-item__button {
    padding: 7px 15px;
    font: 16px/1.2 var(--font-figtree-semibold);
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s;

    display: inline-block;
    text-align: center;
    color: white;

    background-color: var(--color-black-2);
    color: var(--color-white);
    border: 1px solid var(--color-black-2);
    text-decoration: none;

    &:focus {
        outline: none;
    }

    @media (max-width: 768px) {
        padding: 4px 8px;
        font-size: 14px;
    }
}

/* START: MEMBERSHIP POINT */
.membership-point {
    font: 26px/1.2 var(--font-figtree-medium);
    color: var(--color-text-primary);
    display: inline-flex;
    align-items: center;
    gap: 5px;

    @media (max-width: 768px) {
        font-size: 13px;
    }
}

.membership-point--big {
    @media (max-width: 768px) {
        font-size: 17px;
    }
}

.membership-point--column {
    @media (max-width: 768px) {
        flex-direction: column;
        gap: 9px;
    }
}

.membership-point__content {
    display: flex;
    gap: 3px;
    align-items: center;
}

.membership-point__point {
    font: 36px/1.2 var(--font-figtree-bold);
    display: inline-flex;
    align-items: center;
    gap: 5px;

    @media (max-width: 768px) {
        font-size: 18px;
    }
}

.membership-point__point--big {
    @media (max-width: 768px) {
        font-size: 26px;
    }
}

.membership-point__point--icon::after {
    content: "";
    display: block;
    height: 10px;
    width: 20px;
    background-image: url("/static/img/icon-chevron-down.svg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    transform: rotate(-90deg);

    @media (max-width: 768px) {
        width: 10px;
        height: 6px;
    }
}

.membership-point__icon {
    display: block;
    height: 26px;
    width: 26px;

    @media (max-width: 768px) {
        height: 14px;
        width: 14px;
    }
}

.membership-point__icon--big {
    @media (max-width: 768px) {
        height: 18px;
        width: 18px;
    }
}
/* END: MEMBERSHIP POINT */

/* START: EXPAND LAYOUT */
.expand-layout {
    display: flex;
    flex-direction: column;
}

.expand-layout__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
/* END: EXPAND LAYOUT */

/* START: VOUCHER BODY */
.voucher-body {
    height: 100vh;
    overflow: hidden;

    @media (max-height: 900px) {
        height: auto;
        overflow: auto;
    }

    @media (max-width: 768px) {
        height: auto;
        min-height: 100vh;
        overflow: visible;
    }
}
/* END: VOUCHER BODY */

/* START: TRANSACTION HISTORY */
.transaction-history {
    padding: 40px 20px;

    @media (max-width: 768px) {
        padding: 0 20px;
    }
}

.transaction-history__tab {
    padding: 0 40px;

    @media (max-width: 768px) {
        padding: 0px;
        margin-bottom: 0;
    }
}

.transaction-history__header {
    text-align: center;
    padding: 40px 40px 30px;

    @media (max-width: 768px) {
        padding: 20px 13px;
    }
}

.transaction-table {
    width: calc(100% - 80px);
    margin-left: auto;
    margin-right: auto;

    @media (max-width: 768px) {
        width: calc(100% - 30px);
    }
}

.transaction-table--expiry {
    max-width: 390px;
    margin-right: auto;
    margin-left: 40px;

    @media (max-width: 768px) {
        margin: auto;
        max-width: unset;
    }
}

.transaction-table__header {
    display: grid;
    grid-template-columns: 60px 1fr 2fr 1fr 1fr;
    padding: 12px 0;
    border-bottom: 1px solid var(--color-cream);

    @media (max-width: 768px) {
        display: none;
    }
}

.transaction-table__header-cell {
    font: 14px/1.2 var(--font-figtree-medium);
    color: var(--color-text-primary);
}

.transaction-table__header-cell--right {
    text-align: right;
}

.transaction-table__body {
    display: flex;
    flex-direction: column;

    @media (max-width: 768px) {
        padding-top: 17px;
        padding-bottom: 0;
    }
}

.transaction-table__body-title {
    display: none;
    font: 13px/1.2 var(--font-figtree-medium);
    padding-bottom: 5px;

    @media (max-width: 768px) {
        display: block;
    }
}

.transaction-row {
    display: grid;
    grid-template-columns: 60px 1fr 2fr 1fr 1fr;
    grid-template-areas: "icon activity outlet date points";
    padding: 10px;
    border-bottom: 1px solid var(--color-cream);
    align-items: center;

    @media (max-width: 768px) {
        gap: 5px 15px;
        padding: 16px 0;
        align-items: flex-start;
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
            "icon activity points"
            "icon outlet points"
            "icon date points";

        &:last-child {
            margin-bottom: 20px;
        }
    }
}

.transaction-row:last-child {
    border-bottom: none;
    margin-bottom: 30px;

    @media (max-width: 768px) {
        margin-bottom: 5px;
    }
}

.transaction-cell--icon {
    grid-area: icon;
}

.transaction-cell--activity {
    grid-area: activity;
}

.transaction-cell--outlet {
    grid-area: outlet;

    @media (max-width: 768px) {
        font-size: 12px;
    }
}

.transaction-cell--date {
    grid-area: date;
}

.transaction-cell--points {
    grid-area: points;
    text-align: right;
    justify-self: end;

    @media (max-width: 768px) {
        align-self: start;
    }
}

.transaction-item__info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.transaction-item__info-icon {
    width: 40px;
    height: 40px;
    display: block;

    @media (max-width: 768px) {
        height: 57px;
        width: 57px;
    }
}

.transaction-item__title {
    font: 16px/1.2 var(--font-figtree-semibold);
    color: var(--color-text-primary);

    @media (max-width: 768px) {
        font-size: 15px;
    }
}

.transaction-item__date {
    font: 16px/1.2 var(--font-figtree-regular);
    color: var(--color-text-primary);

    @media (max-width: 768px) {
        font-size: 11px;
        color: var(--color-gray-500);
    }
}

.transaction-item__expiration-date {
    font: 16px/1.2 var(--font-figtree-regular);

    @media (max-width: 768px) {
        font-size: 15px;
    }
}

.transaction-item__points {
    font: 18px/1.2 var(--font-figtree-semibold);
    display: flex;
    align-items: center;
    gap: 3px;
    margin-left: auto;

    svg {
        height: 13px;
        width: 13px;
    }

    @media (max-width: 768px) {
        font-size: 15px;
    }
}

.transaction-item__points--positive {
    color: var(--color-text-primary);
}

.transaction-item__points--negative {
    color: var(--color-dark-pink);

    svg {
        fill: var(--color-dark-pink);
    }
}

@media (max-width: 768px) {
    .transaction-row {
        gap: 5px 15px;
        padding: 16px 0;
        align-items: flex-start;
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
            "icon activity points"
            "icon outlet points"
            "icon date points";
    }

    .transaction-cell--points {
        align-self: start;
    }

    .transaction-item__date {
        font-size: 12px;
        color: var(--color-gray-500);
    }
}
/* END: TRANSACTION HISTORY */

/* START: COIN EXPIRY */
.transaction-table__header--expiry {
    grid-template-columns: 1fr 1fr;
}

.transaction-row--expiry {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "date points";
    padding-top: 20px;
    padding-bottom: 20px;

    @media (max-width: 768px) {
        grid-template-columns: 1fr 1fr;
        grid-template-areas: "date points";
        gap: 0;
        padding: 16px 0;
    }
}
/* END: COIN EXPIRY */

/* START: EMPTY STATE */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
}

.empty-state--adjust-padding {
    padding-top: 80px;
    padding-bottom: 80px;
}

.empty-state__image-container {
    margin-bottom: 24px;
    width: 100%;
    max-width: 200px;
}

.empty-state__image {
    height: 96px;
    width: auto;
    display: block;
    object-fit: contain;
    margin: auto;
}

.empty-state__title {
    font-family: var(--font-figtree-bold);
    font-size: 20px;
    color: var(--color-text-primary);
    margin-bottom: 8px;
}

.empty-state__title--baskerville {
    font-family: var(--font-baskerville-bold);
}

.empty-state__title--big {
    font-size: 40px;

    @media (max-width: 768px) {
        font-size: 20px;
    }
}

.empty-state__description {
    font-family: var(--font-figtree-regular);
    font-size: 16px;
    color: var(--color-text-muted);
    max-width: 300px;
    margin: 0 auto;

    @media (max-width: 768px) {
        font-size: 14px;
    }
}

.empty-state__description--text-black {
    color: var(--color-black-2);
}

.empty-state__description--wide {
    max-width: none;
}

/* START: VOUCHER CARD DETAIL */
.voucher-card {
    background: var(--color-white);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    margin-bottom: 24px;
}

.voucher-card__header {
    display: flex;
    flex-direction: row;
}

.voucher-card__image-container {
    max-width: 460px;
    min-width: 460px;
    width: 100%;
    position: relative;
    padding: 40px;

    border-width: 0px;
    border-right-width: 1px;
    border-style: solid;
    border-color: transparent;

    border-image: repeating-linear-gradient(
            to bottom,
            var(--color-cream) 0,
            var(--color-cream) 5px,
            transparent 5px,
            transparent 10px
        )
        1;

    @media (max-width: 768px) {
        padding: 25px;
        max-width: 100%;
        min-width: auto;
        border-right-width: 0px;
        border-bottom-width: 1px;

        border-image: repeating-linear-gradient(
                to right,
                var(--color-cream) 0,
                var(--color-cream) 5px,
                transparent 5px,
                transparent 10px
            )
            1;
    }
}

.voucher-card__image {
    width: 100%;
    object-fit: cover;
    display: block;
    border-radius: 20px;
}

.voucher-card__content {
    padding: 40px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    align-items: flex-start;

    @media (max-width: 768px) {
        align-items: stretch;
        width: 100%;
        padding: 24px;
        padding-bottom: 34px;
    }
}

.voucher-card__title {
    font: 40px/1.2 var(--font-baskerville-bold);
    font-weight: 700;
    color: var(--color-black-2);
    margin: 0 0 8px 0;

    @media (max-width: 768px) {
        font-size: 20px;
        margin-bottom: 10px;
    }
}

.voucher-card__subtitle {
    font: 16px/1.5 var(--font-figtree-regular);
    color: var(--color-text-primary);
    margin: 0 0 24px 0;

    @media (max-width: 768px) {
        font-size: 14px;
        margin-bottom: 10px;
    }
}

.voucher-card__validity {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font: 16px/1.2 var(--font-figtree-regular);
    color: var(--color-gray-2);
    margin-bottom: 25px;

    &::before {
        content: "";
        width: 16px;
        height: 16px;
        background-image: url("/static/img/icon-clock.svg");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        display: inline-block;
    }

    @media (max-width: 768px) {
        font-size: 12px;
    }
}

.voucher-card__code-wrapper {
    font: 18px/1.2 var(--font-figtree-bold);
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--color-cream);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 10px;
    width: 100%;
    max-width: 310px;

    &::before {
        content: "";
        width: 26px;
        height: 22px;
        background-image: url("/static/img/icon-coupon.svg");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        display: inline-block;
    }

    @media (max-width: 768px) {
        max-width: 100%;
        padding: 10px 14px;
        font-size: 16px;
        margin-bottom: 10px;
    }
}

.voucher-card__code-text {
    font-family: var(--font-figtree-bold, sans-serif);
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text-primary);
    letter-spacing: 0.05em;
}

.voucher-card__copy-button {
    cursor: pointer;
    height: 22px;
    display: block;
    width: auto;
    margin-left: auto;
}

.voucher-card__help-text {
    font-size: 13px;
    color: var(--color-dark-pink);
    margin-bottom: 25px;

    @media (max-width: 768px) {
        font-size: 12px;
    }
}

.voucher-card__section {
    border-top: 1px solid var(--color-cream);
    width: 100%;

    &:last-child {
        border-bottom: 1px solid var(--color-cream);
        padding-bottom: 25px;
    }

    @media (max-width: 768px) {
        &,
        &:last-child {
            padding-bottom: 2px;
        }
    }
}

.voucher-card__section--expanded {
    @media (max-width: 768px) {
        &,
        &:last-child {
            padding-bottom: 12px;
        }
    }
}

.voucher-card__section--no-border-top-desktop {
    @media (min-width: 768px) {
        border-top: none;
    }
}

.voucher-card__section--expanded .voucher-card__toggle-button .voucher-card__toggle-icon {
    transform: rotate(180deg);
}

.voucher-card__toggle-button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: none;
    border: none;
    padding-top: 20px;
    font: 14px/1.2 var(--font-figtree-medium);
    font-weight: 600;
    color: var(--color-text-primary);
    cursor: pointer;
    text-align: left;
    text-transform: uppercase;
    margin-bottom: 10px;

    @media (max-width: 768px) {
        font-size: 13px;
        padding-top: 12px;
    }
}

.voucher-card__toggle-icon {
    transition: transform 0.3s ease;
    font-size: 12px;
    display: none;
    cursor: pointer;

    @media (max-width: 768px) {
        display: block;
    }
}

.voucher-card__details {
    font: 16px/1.5 var(--font-figtree-medium);
    color: var(--color-text-primary);
    overflow: hidden;
    transition: max-height 0.3s ease-out;

    @media (max-width: 768px) {
        font-size: 14px;
    }
}

.voucher-card__details-item {
    font-family: var(--font-figtree-regular);
}

.voucher-card__list {
    margin: 0;
    padding: 0 0 24px 20px;
    color: var(--color-gray-500);
    font-size: 14px;
    line-height: 1.6;
}

@media (max-width: 768px) {
    .voucher-card__header {
        flex-direction: column;
    }

    .voucher-card__code-text {
        font-size: 20px;
    }
}
/* END: VOUCHER CARD DETAIL */

/* START: REWARD REDEEM */
.reward-redeem {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-areas:
        "point point"
        "button balance";
    align-items: center;
    gap: 25px 20px;
    margin-bottom: 30px;

    @media (max-width: 768px) {
        grid-template-columns: 1fr auto;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        padding: 15px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;

        background-color: white;
        margin-bottom: 0;
        box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 8px 0px;

        align-items: center;
        gap: 5px;
        grid-template-areas:
            "point button"
            "balance button";
    }
}

.reward-redeem__points {
    grid-area: point;
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 8px;
}

.reward-redeem__points-value {
    font: 36px/1.2 var(--font-figtree-bold);
    color: var(--color-black-2);

    @media (max-width: 768px) {
        font-size: 22px;
    }
}

.reward-redeem__points-icon {
    height: 32px;
    width: auto;
    display: block;

    @media (max-width: 768px) {
        height: 16px;
    }
}

.reward-redeem__button {
    --change-bg-to: var(--color-dark-pink);
    grid-area: button;
    padding: 14px 24px;
    background: var(--color-black-2);
    color: var(--color-white);
    border: none;
    border-radius: 5px;
    font: 16px/1.2 var(--font-figtree-semibold);
    cursor: pointer;
    transition: background-color 0.2s;

    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: border-color 0.2s ease;

    &::before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 0;
        background: var(--change-bg-to);
        transition: height 0.2s ease;
        z-index: -1;
    }

    @media (min-width: 568px) {
        &:hover {
            border-color: var(--change-bg-to);

            &::before {
                height: 100%;
            }
        }
    }

    @media (max-width: 768px) {
        width: 100%;
        font-size: 15px;
        padding: 12px 20px;
    }
}

.reward-redeem__balance {
    grid-area: balance;
    font: 16px/1.2 var(--font-figtree-medium);
    color: var(--color-black-2);
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;

    @media (max-width: 768px) {
        font-size: 13px;
    }
}

.reward-redeem__balance-icon {
    height: 20px;
    width: auto;
    display: block;

    @media (max-width: 768px) {
        height: 11px;
    }
}
/* END: REWARD REDEEM */

/* START: modal */
.modal {
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.3);

    display: flex;
    justify-content: center;
    align-items: center;
    animation: fadeOut 0.15s;

    padding: 20px;
    box-sizing: border-box;

    @media (max-width: 768px) {
        align-items: flex-end;
        padding: 0;
    }
}

.modal--loading {
    justify-content: center;
    align-items: center;

    @media (max-width: 768px) {
        align-items: center;
        justify-content: center;
    }
}

.modal--show {
    animation: fadeIn 0.3s;
}

.modal--show .modal__card {
    padding: 40px;
    animation: fadeInUp 0.3s;

    @media (max-width: 768px) {
        padding: 27px 15px;
        animation-name: slideInUp;
    }
}

.modal__header {
    display: flex;
    justify-content: space-between;
    font: 24px/1.2 var(--poppins-semibold);
    color: var(--color-text-primary);
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
}

.modal__card {
    animation-duration: 0.3s;
    background-color: white;
    border-radius: 8px;
    width: 100%;
    max-width: 560px;
    animation: fadeOut 0.15s;

    @media (max-width: 768px) {
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
        animation-name: slideOutDown;
        max-width: unset;
    }
}

.modal__header-btn {
    display: none;
    width: 100%;
    max-width: 80px;
    border-radius: 4px;
    height: 4px;
    background-color: var(--color-cream);
    justify-self: center;
    margin-bottom: 30px;
    margin-left: auto;
    margin-right: auto;
    transform: translateY(-15px);
    cursor: grab;
    position: relative;

    &::after {
        content: "";
        position: absolute;
        top: -20px;
        bottom: -20px;
        left: -20px;
        right: -20px;
        cursor: grab;
    }

    @media (max-width: 768px) {
        display: block;
    }
}

.modal__footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    align-items: center;

    /* center action button if only one */
    & > *:only-child {
        margin: auto;
    }
}

.modal__title {
    font: 40px/1.2 var(--font-baskerville-bold);
    color: var(--color-text-primary);

    @media (max-width: 768px) {
        font-size: 18px;
    }
}

.modal__content {
    display: flex;
    flex-direction: column;
    gap: 25px;
    font: 14px/1.5 var(--font-figtree-regular);

    @media (max-width: 768px) {
        font-size: 12px;
    }
}
/* END: EMPTY STATE */

/* START: REDEEM STATUS */
.redeem-status {
    background-color: var(--color-white);
    border-radius: 20px;
    padding: 30px;
    width: 100%;
    max-width: 340px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;

    @media (max-width: 768px) {
        width: 100%;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        max-width: 100%;
        padding-top: 10px;
    }
}

.redeem-status__header-btn {
    display: none;
    width: 100%;
    max-width: 80px;
    border-radius: 4px;
    height: 4px;
    background-color: var(--color-cream);
    justify-self: center;
    margin-bottom: 30px;
    margin-left: auto;
    margin-right: auto;
    cursor: grab;
    position: relative;

    &::after {
        content: "";
        position: absolute;
        top: -20px;
        bottom: -20px;
        left: -20px;
        right: -20px;
        cursor: grab;
    }

    @media (max-width: 768px) {
        display: block;
    }
}

.redeem-status__image-container {
    margin-bottom: 20px;
    width: 100%;
    display: flex;
    justify-content: center;
}

.redeem-status__image {
    width: 96px;
    height: auto;
    object-fit: contain;

    @media (max-width: 768px) {
        max-width: 80px;
        width: 100%;
    }
}

.redeem-status__title {
    font: 40px/1.2 var(--font-baskerville-bold);
    color: var(--color-text-primary);
    margin-bottom: 8px;

    @media (max-width: 768px) {
        font-size: 20px;
    }
}

.redeem-status__description {
    font-family: var(--font-figtree-regular);
    font-size: 16px;
    color: var(--color-text-primary);
    margin-bottom: 24px;
    line-height: 1.5;

    @media (max-width: 768px) {
        font-size: 12px;
    }
}

.redeem-status__button {
    width: 100%;
}
/* END: REDEEM STATUS */

/* START: HOMEPAGE */
.hero {
    position: relative;
    overflow: hidden;
    margin-top: -101px; /* offset header height */
}

.hero__container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 15% 0 25%;

    @media (max-width: 768px) {
        padding-top: 30%;
        padding-bottom: 85%;
    }
}

.hero__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    z-index: 20;

    @media (max-width: 768px) {
        gap: 20px;
    }
}

.hero__title {
    font: 90px/1 var(--font-baskerville-bold);
    color: var(--color-black-2);
    text-align: center;

    @media (max-width: 768px) {
        font-size: 40px;
        line-height: 1.2;
    }
}

.hero__subtitle {
    font: 16px/1 var(--font-figtree-regular);
    color: var(--color-black-2);
    text-align: center;
    margin-bottom: 20px;

    @media (max-width: 768px) {
        max-width: 274px;
        margin-bottom: 5px;
    }
}

.hero__left,
.hero__right {
    position: absolute;
    z-index: 10;
    opacity: 0;

    img {
        height: 100%;
        object-fit: contain;
    }

    &.animate-in {
        opacity: 1;
    }
}

.hero__left {
    left: 0;
    top: 10%;
    transform: translateX(-33%) rotate(15deg);

    img {
        width: 97%;
    }

    &.animate-in {
        animation: slideInBounceLeft 1.6s ease-out forwards;
    }

    @media (max-width: 768px) {
        top: 52%;
        width: 130%;
        transform: translateX(-33%) rotate(15deg);

        img {
            width: 100%;
        }
    }
}

.hero__right {
    top: 10%;
    right: 4%;
    transform: translateX(43%) rotate(-15deg);

    img {
        width: 93%;
    }

    &.animate-in {
        animation: slideInBounceRight 1.6s ease-out forwards;
    }

    @media (max-width: 768px) {
        top: 54%;
        right: 12%;
        width: 120%;
        transform: translateX(35%) rotate(-15deg);

        img {
            width: 100%;
        }
    }
}

.corporate-hero {
    padding-top: 10%;
    background-image:
        linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.2) 40%,
            rgba(255, 255, 255, 0.6) 70%,
            rgba(255, 255, 255, 1) 100%
        ),
        url("/static/img/leave-pattern.webp");
    background-color: var(--color-pink);
    transition: background-color 1s ease;

    background-size: contain;
    background-position: center;
    position: relative;
    overflow: hidden;

    @media (max-width: 768px) {
        padding-top: 20%;
    }
}

.corporate-hero__controls {
    position: absolute;
    background-color: var(--color-black-2);
    padding: 15px;
    border-radius: 50%;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    cursor: pointer;
    z-index: 100;

    img {
        width: 31px;
        height: 19px;
    }

    @media (max-width: 768px) {
        width: 60px;
        height: 60px;
        padding: 10px;

        img {
            width: 18px;
            height: 11px;
        }
    }
}

.corporate-hero__controls--left {
    left: 0;
    top: 50%;
    transform: translate(-50%, -50%);
    justify-content: end;

    img {
        transform: rotate(180deg);
    }
}

.corporate-hero__controls--right {
    right: 0;
    top: 50%;
    transform: translate(50%, -50%);
}

.corporate-hero--about-us {
    @media (max-width: 768px) {
        padding-top: 90px;
    }
}

.corporate-hero__product {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

.corporate-hero__product-name {
    font: 70px/1.2 var(--font-baskerville-bold);
    color: var(--color-black-2);
    text-align: center;
    max-width: 100%;
    opacity: 0;

    @media (max-width: 768px) {
        font-size: 35px;
    }
}

.corporate-hero__product-img {
    position: relative;
    margin: -50px auto 0;

    @media (max-width: 768px) {
        margin-top: -20px;
    }
}

.corporate-hero__img {
    display: block;
    width: 100%;
    height: 100%;
}

.corporate-hero__img--front {
    position: relative;
    z-index: 1;
    max-height: 620px;
    opacity: 0.5;
}

.corporate-hero__img--back {
    position: absolute;
}

.corporate-hero__img--right {
    top: 0;
    right: -10px;
    transform: rotate(-10deg) translateX(-130px);
    max-height: 422px;
    opacity: 0;
    will-change: transform, opacity;

    @media (max-width: 768px) {
        top: 20px;
        right: -35px;
        max-height: 270px;
    }
}

.corporate-hero__img--left {
    top: 80px;
    left: -12%;
    max-height: 415px;
    opacity: 0;
    transform: translateX(140px);
    will-change: transform, opacity;
}

.corporate-hero__img--orange {
    left: 5%;
    max-height: 350px;

    @media (max-width: 768px) {
        max-height: 220px;
    }
}

.corporate-hero__marquee {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;
    background-color: var(--color-black-2);
    width: 100%;
    overflow: hidden;
    padding: 10px 0;
}

.separator-dot {
    margin: 0 20px;

    @media (max-width: 768px) {
        margin-left: 15px;
        margin-right: 15px;
    }
}

.marquee-text {
    display: inline-block;
    white-space: nowrap;
    font: 30px/1.2 var(--font-baskerville-bold);
    color: var(--color-white);

    @media (max-width: 568px) {
        font-size: 20px;
    }
}

.marquee-animation {
    animation: slideHalfLeft 30s linear infinite;
    white-space: nowrap;
    display: inline-block;
    width: max-content;
    border-top: 1px solid var(--color-white);
    border-bottom: 1px solid var(--color-white);
    padding: 20px 0;
}

.about-wrapper {
    height: 400vh;
    position: relative;
    background-color: var(--color-cream);

    .section-border {
        position: static;
        z-index: 1;
        margin-bottom: 80px;
    }

    @media (max-width: 768px) {
        height: 400vh;

        .section-border {
            position: static;
            padding: 0;
            margin: 0;
        }
    }

}

.about {
    position: sticky;
    top: 0;
    overflow: hidden;
    z-index: 3;

    text {
        fill: var(--color-text-primary);
        font: 12px/1.2 var(--font-baskerville-bold); /* not representative of real font size */
    }

    svg:nth-child(2) {
        margin-top: -75px;
    }

    .button {
        position: absolute;
        bottom: 35%;
        left: 50%;
        transform: translateX(-50%);
    }

    @media (max-width: 768px) {
        padding: 0;
        margin: 0;

        text {
            font-size: 5px; /* not representative of real font size */
        }

        svg:nth-child(1) {
            margin-bottom: -105px;
        }

        svg:nth-child(2) {
            margin-top: 0;
            margin-bottom: 20px;
        }
    }
}

.about__img {
    position: absolute;
    z-index: 2;

    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

.img-wrapper {
    overflow: hidden;

    img {
        object-fit: contain;
    }
}

.about__img--1 {
    top: 16%;
    left: 10%;
    border-radius: 6px;
    background-color: var(--color-white);
    padding: 12px;
    transform: rotate(-15deg);

    .img-wrapper {
        width: 280px;
        height: 320px;

        img {
            transform: scale(2) translate(-5%, -20%);
        }
    }

    @media (max-width: 768px) {
        padding: 10px;
        top: 17%;
        left: 0;
        overflow: hidden;

        .img-wrapper {
            width: 175px;
            height: 190px;
        }
    }
}

.about__img--2 {
    top: 0;
    right: 0;
    width: 100%;
    max-width: 450px;
    overflow: hidden;

    img {
        transform: rotate(13deg) translateX(3%);
    }

    @media (max-width: 768px) {
        max-width: 275px;

        img {
            transform: rotate(13deg) translate(35%, -24%);
        }
    }
}

.about__img--3 {
    top: 18%;
    left: 0;
    width: 100%;
    max-width: 700px;
    overflow: hidden;

    img {
        transform: rotate(-10deg) translateX(-17%);
    }

    @media (max-width: 768px) {
        max-width: 300px;

        img {
            transform: rotate(-10deg) translate(-30%, 0%);
        }
    }
}

.about__img--4 {
    top: 38%;
    right: 6%;
    border-radius: 6px;
    background-color: var(--color-white);
    padding: 12px;
    transform: rotate(-10deg);

    .img-wrapper {
        width: 280px;
        height: 320px;

        img {
            transform: scale(1.3);
        }
    }

    @media (max-width: 768px) {
        top: 40%;
        padding: 10px;

        .img-wrapper {
            width: 200px;
            height: 235px;
        }
    }
}

.about__img--5 {
    top: 49%;
    right: 10%;
    border-radius: 6px;
    background-color: var(--color-white);
    padding: 12px;
    transform: rotate(15deg);

    .img-wrapper {
        width: 350px;
        height: 200px;

        img {
            transform: scale(2.6) translateY(10px);
        }
    }

    @media (max-width: 768px) {
        top: 48%;
        right: 5%;
        padding: 10px;

        .img-wrapper {
            width: 260px;
            height: 140px;
        }
    }
}

.about__img--6 {
    top: 60%;
    left: 5%;
    border-radius: 6px;
    background-color: var(--color-white);
    padding: 12px;
    transform: rotate(15deg);

    .img-wrapper {
        width: 300px;
        height: 250px;

        img {
            transform: scale(1.7) translateY(-40px);
        }
    }

    @media (max-width: 768px) {
        top: 65%;
        left: 0;
        padding: 10px;

        .img-wrapper {
            width: 250px;
            height: 200px;
        }
    }
}

.about__img--7 {
    top: 63%;
    right: 0;
    width: 100%;
    max-width: 500px;
    overflow: hidden;

    img {
        transform: rotate(10deg);
    }

    @media (max-width: 768px) {
        top: 67%;
        max-width: 300px;

        img {
            transform: rotate(10deg) translateX(25%);
        }
    }
}

.about__img--8 {
    top: 79%;
    right: 5%;
    border-radius: 6px;
    background-color: var(--color-white);
    padding: 12px;
    transform: rotate(-10deg);

    .img-wrapper {
        width: 380px;
        height: 180px;

        img {
            transform: scale(3) translateY(-20px);
        }
    }

    @media (max-width: 768px) {
        top: 77%;
        padding: 10px;

        .img-wrapper {
            width: 250px;
            height: 100px;
        }
    }
}

.about__img--9 {
    bottom: 0;
    left: 0;
    width: 100%;
    max-width: 600px;
    overflow: hidden;

    img {
        transform: rotate(-15deg) translateX(-18%);
    }

    @media (max-width: 768px) {
        max-width: 300px;
    }
}

.about__rotate {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    height: 400%;
    aspect-ratio: 1;
    transform: translateX(-50%);

    @media (max-width: 768px) {
        top: 55%;
    }
}

.about__curved {
    position: absolute;
    width: 100%;

    &:nth-child(1) {
        top: -5%;
    }

    &:nth-child(2) {
        top: 50%;
        right: -50%;
        transform: translateY(-50%) rotate(90deg);
    }

    &:nth-child(3) {
        bottom: -5%;
        transform: rotate(180deg);
    }

    &:nth-child(4) {
        top: 50%;
        left: -50%;
        transform: translateY(-50%) rotate(270deg);
    }

    @media (max-width: 768px) {
        &:nth-child(2) {
            transform: translate(1%, -50%) rotate(90deg);
        }

        &:nth-child(4) {
            transform: translate(-1%, -50%) rotate(270deg);
        }
    }
}

.about__container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(78vh);
    flex-direction: column;
    position: relative;

    @media (max-width: 768px) {
        height: 78vh;
        padding: 0;
        margin: 0;
    }
}

.stats {
    padding: 120px 0;
    position: relative;
    overflow: hidden;

    video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: -1;
    }

    @media (max-width: 768px) {
        padding-top: 65%;
        padding-bottom: 60px;
    }
}

.stats__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-black-2);
    opacity: 0.5;
    z-index: 1;
}

.stats__spinner {
    position: absolute;
    top: 20%;
    right: 7%;
    animation: spinCounterClockWise 20s linear infinite;
    max-width: 190px;
    width: 100%;
    z-index: 1;

    @media (max-width: 768px) {
        top: 4%;
        right: 3%;
        max-width: 130px;
    }
}

.stats__container {
    display: flex;
    flex-direction: column;
    gap: 30px;
    position: relative;
    z-index: 2;

    @media (max-width: 768px) {
        gap: 0;
    }
}

.stats__text {
    font: 68px/1.2 var(--font-baskerville-bold);
    color: var(--color-white);

    @media (max-width: 768px) {
        font-size: 28px;
        line-height: 1.7;

        &:nth-child(3) {
            transform: translateY(-15px);
        }
    }
}

.stats__img {
    display: inline-block;
    width: 226px;
    height: 116px;
    padding: 8px;
    background-color: var(--color-white);
    border-radius: 6px;
    transition: transform 0.5s linear;

    img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    @media (max-width: 768px) {
        width: 81px;
        height: 50px;
        padding: 3px;
        border-radius: 3px;
    }
}

.stats__img--top {
    transform: translateY(30px) rotate(5deg);

    img {
        object-position: 50% 85%;
    }

    @media (max-width: 768px) {
        transform: translateY(15px) rotate(5deg);
    }
}

.stats__img--top-translate-up {
    transform: translateY(-450px) rotate(5deg);
}

.stats__img--bottom {
    transform: translateY(30px) rotate(-5deg);
    margin-top: -45px;

    img {
        object-position: 50% 60%;
    }

    @media (max-width: 768px) {
        transform: translateY(15px) rotate(-5deg);
        margin-top: 0;
    }
}

.stats__img--bottom-translate-up {
    transform: translateY(-600px) rotate(-5deg);
}

.memberships {
    padding: 10% 0;
    position: relative;
    background-color: var(--color-pink);
    overflow: hidden;
    max-height: 585px;

    picture {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: top center;
        }
    }

    @media (max-width: 768px) {
        padding-top: 40%;
        padding-bottom: 40%;
        max-height: none;
    }
}

.memberships__img {
    position: absolute;
    z-index: 1;
}

.memberships__img--top {
    top: 0;
    right: 0;
    max-width: 376px;

    @media (max-width: 768px) {
        max-width: 228px;
    }
}

.memberships__img--bottom {
    bottom: 0;
    left: 0;
    max-width: 844px;

    @media (max-width: 768px) {
        left: 50%;
        transform: translateX(-50%);
        max-width: 583px;
    }
}

.memberships__container {
    display: flex;
    align-items: center;
    z-index: 2;
    position: relative;

    @media (max-width: 768px) {
        flex-direction: column;
        gap: 60px;
    }
}

.memberships__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;

    @media (max-width: 768px) {
        order: 2;
    }
}

.memberships__title {
    font: 50px/1.2 var(--font-baskerville-bold);
    color: var(--color-black-2);
    text-align: center;

    @media (max-width: 768px) {
        font-size: 25px;
    }
}

.memberships__desc {
    font: 16px/1.2 var(--font-figtree-regular);
    color: var(--color-black-2);
    margin-bottom: 20px;
    text-align: center;

    @media (max-width: 768px) {
        font-size: 14px;
        max-width: 260px;
        margin-bottom: 5px;
    }
}

.memberships__card {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(0);
    transition: transform 0.4s ease-in-out;

    @media (max-width: 768px) {
        order: 1;
    }
}

.memberships__card--hidden-up {
    transform: translateY(-450px);
}

.memberships__card--hidden-down {
    transform: translateY(450px);
}

.gallery {
    position: relative;
    padding: 15px 0;

    @media (max-width: 768px) {
        padding-top: 75%;
        padding-bottom: 75%;
    }
}

.gallery__pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    img {
        max-width: 438px;
        object-fit: contain;
        position: absolute;
    }

    img:first-child {
        top: 28%;
        right: 5%;
    }

    img:last-child {
        top: 50%;
        left: 0;
    }

    @media (max-width: 768px) {
        img:first-child {
            max-width: 146px;
            right: auto;
            left: 5%;
        }

        img:last-child {
            max-width: 341px;
            top: 55%;
            left: -10%;
        }
    }
}

.gallery__container {
    position: relative;
    z-index: 20;
    padding: 20% 0;
    display: flex;
    justify-content: center;
    align-items: center;

    @media (max-width: 768px) {
        padding-top: 60%;
        padding-bottom: 60%;
    }
}

.gallery__title {
    font: 70px/1.2 var(--font-baskerville-bold);
    color: var(--color-black-2);
    text-align: center;
    max-width: 770px;

    @media (max-width: 768px) {
        font-size: 40px;
        max-width: 330px;
    }
}

.gallery__images {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;

    @media (max-width: 768px) {
        overflow-x: hidden;
    }
}

.gallery__image {
    position: absolute;
    max-width: 388px;
    object-fit: contain;
    border-radius: 8px;
    opacity: 0;
    transition:
        transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        opacity 1s ease-out;

    &:nth-child(1) {
        top: -4%;
        left: 10%;
        transform: translateX(-150%) rotate(15deg);
    }

    &:nth-child(2) {
        top: 23%;
        left: -8%;
        transform: translateX(-150%) rotate(-10deg);
    }

    &:nth-child(3) {
        top: 72%;
        left: 12%;
        transform: translateX(-150%) rotate(13deg);
    }

    &:nth-child(4) {
        top: -4%;
        right: 5%;
        transform: translateX(150%) rotate(10deg);
    }

    &:nth-child(5) {
        top: 60%;
        right: -4%;
        transform: translateX(150%) rotate(10deg);
    }

    &:nth-child(6) {
        top: 72%;
        right: 12%;
        transform: translateX(150%) rotate(-6deg);
    }

    &.slide-in {
        opacity: 1;

        &:nth-child(1) {
            transform: translateX(0) rotate(15deg);
        }

        &:nth-child(2) {
            transform: translateX(0) rotate(-10deg);
        }

        &:nth-child(3) {
            transform: translateX(0) rotate(13deg);
        }

        &:nth-child(4) {
            transform: translateX(0) rotate(10deg);
        }

        &:nth-child(5) {
            transform: translateX(0) rotate(10deg);
        }

        &:nth-child(6) {
            transform: translateX(0) rotate(-6deg);
        }
    }

    @media (max-width: 768px) {
        max-width: 288px;

        &:nth-child(2) {
            top: 5%;
            left: 3%;
            z-index: 2;
        }

        &:nth-child(3) {
            z-index: 1;
            top: 20%;
            left: 20%;
        }

        &:nth-child(4) {
            top: 77%;
            right: 25%;
        }

        &:nth-child(6) {
            top: 65%;
            right: -5%;
        }
    }
}

.gallery__image--desktop {
    display: block;

    @media (max-width: 768px) {
        display: none;
    }
}

.features {
    padding: 110px 0;
    margin-top: 120px;

    @media (max-width: 768px) {
        padding: 70% 0 60px;
        margin-top: -70%; /* to make stacking with gallery__image */
    }
}

.features__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;

    @media (max-width: 1024px) {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }

    @media (max-width: 768px) {
        grid-template-columns: 1fr;
        gap: 60px;
        justify-items: center;
    }
}

.features__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;

    @media (max-width: 768px) {
        max-width: 300px;
    }
}

.features__icon {
    width: 71px;
    height: 71px;
    background-color: var(--color-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;

    img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    @media (max-width: 768px) {
        margin-bottom: 25px;
    }
}

.features__title {
    font: 20px/1.2 var(--font-baskerville-bold);
    color: var(--color-white);
    margin-bottom: 12px;

    @media (max-width: 768px) {
        font-size: 18px;
    }
}

.features__description {
    font: 14px/1.2 var(--font-figtree-regular);
    color: var(--color-white);
    max-width: 280px;

    @media (max-width: 768px) {
        font-size: 13px;
        max-width: 100%;
    }
}

.intersection {
    height: 30px;
    background-image: url("/static/img/intersection-pattern.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.registry {
    padding-top: 40px;
}

.registry__container {
    display: flex;
    padding-bottom: 0;
    overflow: hidden;

    @media (max-width: 768px) {
        flex-direction: column;
        gap: 80px;
    }
}

.registry__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 60px;

    @media (max-width: 768px) {
        gap: 20px;
    }
}

.registry__title {
    font: 70px/1.2 var(--font-baskerville-bold);
    color: var(--color-white);
    text-align: center;

    @media (max-width: 768px) {
        font-size: 25px;
    }
}

.registry__image {
    flex: 1.2;
    display: flex;
    transform: translateY(0);
    transition: transform 0.7s ease-in-out;

    img {
        width: 100%;
        height: auto;
        object-fit: contain;
        object-position: bottom;
    }

    @media (max-width: 768px) {
        img {
            scale: 1.2;
            transform: translateY(-16px);
        }
    }
}

.registry__image--hidden {
    transform: translateY(100%);
}
/* END: HOMEPAGE */

/* START: FAQ */
.faq {
    max-width: 950px;
    margin: 0 auto;
    margin-top: 15px;
    margin-bottom: 15px;
    padding: 40px;

    @media (max-width: 768px) {
        padding: 20px;
    }
}

.faq__list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.faq__item {
    border-bottom: 1px solid var(--color-gray-200);
    padding-bottom: 16px;
}

.faq__question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font: 18px/1.2 var(--font-figtree-semibold);
    color: var(--color-text-primary);
    cursor: pointer;
    list-style: none;
    padding: 8px 0;
    transition: color 0.2s;

    &::-webkit-details-marker {
        display: none;
    }

    @media (max-width: 768px) {
        font-size: 16px;
    }
}

.faq__icon {
    width: 24px;
    height: 24px;
    background-image: url("/static/img/icon-chevron-down.svg");
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.2s;
}

.faq__answer {
    font: 16px/1.5 var(--font-figtree-regular);
    color: var(--color-gray-600);
    overflow: hidden;

    @media (max-width: 768px) {
        font-size: 14px;
    }
}

.expandable {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.2s ease;
    overflow: hidden;

    input:checked ~ & {
        grid-template-rows: 1fr;
    }

    & > * {
        overflow: hidden;
    }
}

.expandable--active {
    grid-template-rows: 1fr;
}

/* END: FAQ */

/* START: TERMS */
.terms {
    display: grid;
    grid-template-columns: 235px 1fr;
    gap: 80px;
    margin-bottom: 40px;
    color: var(--color-text-primary);

    @media (max-width: 768px) {
        grid-template-columns: 1fr;
        gap: 60px;
    }
}

.terms__header {
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: fit-content;
    top: 20px;
    z-index: 1;

    @media (max-width: 768px) {
        position: relative;
    }
}

.terms__header-container {
    position: relative;
}

.terms__title {
    font: 40px/1.2 var(--font-baskerville-bold);

    @media (max-width: 768px) {
        font-size: 25px;
        text-align: center;
    }
}

.terms__updated {
    font: 16px/1.2 var(--font-figtree-regular);
    color: var(--color-gray-500);

    @media (max-width: 768px) {
        font-size: 14px;
        text-align: center;
    }
}

.terms__content {
    flex: 1;

    h2 {
        font: 24px/1.2 var(--font-figtree-bold);
        margin-bottom: 8px;
    }

    h4 {
        font: 16px/1.2 var(--font-figtree-regular);
        font-weight: normal;
        margin-bottom: 16px;
    }

    p {
        font: 15px/1.4 var(--font-figtree-regular);
    }

    strong {
        font: 18px/1.4 var(--font-figtree-bold);
    }

    @media (max-width: 768px) {
        h2 {
            font-size: 20px;
        }

        h4 {
            font-size: 14px;
        }

        p {
            font-size: 14px;
        }

        strong {
            font-size: 16px;
        }
    }
}

.cream-line::after {
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--color-cream);
    margin-top: 20px;
    margin-bottom: 20px;
}
/* END: TERMS */

/* -------------------------------------------------------------------------- */
/* BEM Block: .membership-card */
/* -------------------------------------------------------------------------- */

.membership-card {
    /* Card Dimensions and Styling using PX */
    width: 100%;
    max-width: 500px;
    min-height: 295px;
    aspect-ratio: 5 / 3;
    padding: 30px 40px;
    border-radius: 20px;
    position: relative;
    overflow: hidden;

    display: flex;
    flex-direction: column;
    padding-bottom: 58px;

    /* Glassmorphism Effect */
    background-color: rgba(244, 233, 226, 0.2);
    backdrop-filter: blur(7.4px);
    border: 1.46px solid;
    border-image-source: linear-gradient(181.5deg, #ffdfe0 0.76%, #ffcecf 98.23%);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0px 21px 31px 0px var(--shadow);

    @media (max-width: 768px) {
        padding: 25px;
        min-height: 200px;
        padding-bottom: 35px;
    }
}

.membership-card--black {
    box-shadow: 0px 21px 31px 0px rgba(0, 0, 0, 0.6);

    .membership-card__message,
    .membership-card__link,
    .membership-card__header {
        color: var(--color-cream);
    }

    .membership-card__title {
        color: var(--color-pink);
    }
}

/* Element: .membership-card__header */
.membership-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
    font: 19px/1.2 var(--font-figtree-regular);
    letter-spacing: 1px;
    color: var(--color-text-primary);

    @media (max-width: 768px) {
        font-size: 13px;
    }
}

.membership-card__link {
    font: 18px/1.2 var(--font-figtree-regular);
    text-decoration: none;
    color: var(--color-text-primary);

    display: flex;
    align-items: center;
    gap: 6px;

    &::after {
        content: "";
        display: block;
        width: 14px;
        height: 8px;
        background-image: url("../img/icon-chevron-down.svg");
        background-size: contain;
        background-repeat: no-repeat;
        transform: rotate(-90deg);
    }
}

.membership-card__title {
    color: var(--color-text-primary);
    font: 36px/1.2 var(--font-baskerville-bold);
    margin-bottom: 30px;

    @media (max-width: 768px) {
        font-size: 25px;
        margin-bottom: 25px;
    }
}

.membership-card__message {
    font: 16px/1.5 var(--font-figtree-regular);
    margin-top: auto;
    color: var(--color-text-primary);

    @media (max-width: 768px) {
        font-size: 12px;
    }
}

/* Modifier for bold text in the message */
.membership-card__message-tier {
    font-weight: 700;
}

.membership-card__border {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 25px;
    overflow: hidden;

    &::before {
        content: "";
        display: block;
        height: 100%;
        width: 100%;
        background-image: url("/static/img/pattern-black.webp");
        background-repeat: repeat;
        background-size: contain;
    }
}

.membership-card--black .membership-card__border::before {
    background-image: url("/static/img/pattern-pink.svg");
}

/* -------------------------------------------------------------------------- */
/* BEM Block: .progress (Adjusted for light background) */
/* -------------------------------------------------------------------------- */

.progress {
    position: relative;
    padding: 10px 0px;
    padding-left: 35px;

    @media (max-width: 568px) {
        padding-left: 15px;
    }
}

.progress__line {
    height: 8px;
    background-color: var(--color-dark-pink);
    border-radius: 4px;
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
    overflow: hidden;
}

.progress__fill {
    height: 100%;
    width: 0; /* This will be dynamically set */
    background-color: var(--color-cream);
    border-radius: 4px;
    transition: width 0.8s ease-out;
}

.progress__steps {
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 10;
}

.progress__step {
    width: 35px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    font: 19px/1.2 var(--font-figtree-semibold);
    color: var(--color-text-primary); /* Dark text for contrast on white circle */

    background-color: transparent; /* White background for all steps */
    background-image: url("/static/img/membership-step-bg-pink.webp");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;

    @media (max-width: 568px) {
        height: 25px;
        width: 25px;
        font-size: 13px;
    }
}

/* Modifier: .progress__step--current (20 in the image) - Popping white highlight */
.progress__step--active {
    background-image: url("/static/img/membership-step-bg.webp");
}

.progress__step--active:last-child ~ .progress__step:not(.progress__step--target) {
    background-image: url("/static/img/membership-step-bg-pink.webp");
    color: var(--color-text-primary);
}

/* Modifier: .progress__step--target (30 in the image) - Vibrant color for goal */
.progress__step--target {
    background-image: url("/static/img/membership-step-bg-black.webp");
    color: white;
    transform: scale(1.2);
}

/* HTML: <div class="loader"></div> */
.loader {
    width: 50px;
    padding: 8px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--color-pink);
    --_m: conic-gradient(#0000 10%, #000), linear-gradient(#000 0 0) content-box;
    -webkit-mask: var(--_m);
    mask: var(--_m);
    -webkit-mask-composite: source-out;
    mask-composite: subtract;
    animation: loading 1s infinite linear;
}

/* -------------------------------------------------------------------------- */
/* OTP Input Styles */
/* -------------------------------------------------------------------------- */

.otp-field {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.otp-input-group {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 12px;
    justify-content: center;
    align-items: center;
    width: 100%;

    @media (max-width: 568px) {
        gap: 8px;
    }
}

.otp-input-group--error .otp-input {
    border-color: var(--color-dark-pink);
    background-color: var(--color-pink-10);
}

.otp-input {
    width: 64px;
    height: 64px;
    text-align: center;
    font: 24px/1.2 var(--font-figtree-semibold);
    border: 1px solid var(--color-cream);
    border-radius: 8px;
    background-color: var(--color-white);
    color: var(--color-text-primary);
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
    padding: 0;

    @media (max-width: 768px) {
        width: 46px;
        height: 46px;
        font-size: 20px;
    }

    @media (max-width: 568px) {
        width: 44px;
        height: 44px;
        font-size: 16px;
    }

    &:focus {
        outline: none;
        border-color: var(--color-dark-pink);
        box-shadow: 0 0 0 2px rgba(221, 148, 152, 0.2);
    }

    &::placeholder {
        color: var(--color-gray-4);
    }
}

/* -------------------------------------------------------------------------- */
/* Form Success Message Styles */
/* -------------------------------------------------------------------------- */

.form__field__success-message {
    display: block;
    font: 12px/1.4 var(--font-figtree-regular);
    color: var(--color-green);
    margin-top: 4px;
}

.text-validity-period {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font: 13px/1.2 var(--font-figtree-regular);
    color: var(--color-gray-2);

    &::before {
        content: "";
        width: 13px;
        height: 13px;
        background-image: url("/static/img/icon-clock.svg");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        display: inline-block;
    }

    @media (max-width: 768px) {
        font-size: 12px;
    }
}

.text-validity-period--big {
    font-size: 16px;
    margin-bottom: 25px;

    &::before {
        width: 16px;
        height: 16px;
    }

    @media (max-width: 768px) {
        font-size: 12px;
        margin-bottom: 20px;

        &::before {
            width: 12px;
            height: 12px;
        }
    }
}

.reward-mobile-header {
    display: none;
    text-align: center;
    font: 18px/1.2 var(--font-baskerville-bold);
    color: var(--color-text-primary);

    @media (max-width: 768px) {
        display: block;
    }
}

.no-scroll {
    overflow: hidden;
    height: 100vh;
}

/* START: FLATPICKR DATE */
.flatpickr-date {
    position: relative;
    display: flex;
    align-items: center;
}

.flatpickr-date--error .flatpickr-date__input {
    border-color: var(--color-dark-pink);
    background-color: var(--color-pink-10);
}

.flatpickr-date__input {
    background-color: white;
    color: var(--color-text-primary);
}

.flatpickr-date__icon {
    position: absolute;
    right: 15px;
    width: 18px;
    height: 18px;
    cursor: pointer;
    object-fit: contain;
}

/* END: FLATPICKR DATE */

.errorlist {
    font: 13px/1.2 var(--font-figtree-medium);
    color: var(--color-dark-pink);
    list-style: none;

    @media (max-width: 768px) {
        font-size: 12px;
    }
}

.toast-container {
    position: fixed;
    z-index: 1000; /* must be same with the z-index of the modal */
    left: 50%;
    transform: translateX(-50%);
    top: 105px;

    display: flex;
    flex-direction: column;
    gap: 5px;

    width: 90%;
    max-width: 1000px;

    > * {
        padding: 12px 24px;
        background-color: var(--color-cream);
        font: 16px/1.2 var(--font-figtree-medium);
        text-align: center;
        animation:
            fadeIn 0.3s ease-in-out forwards,
            fadeOut 0.3s ease-in-out forwards 3s;

        border-radius: 30px;

        /* hide fourth child and so on */
        &:nth-child(n + 4) {
            display: none;
        }

        &.success {
            color: var(--color-green);
            border: 1px solid var(--color-green);
        }
    }

    @media (max-width: 768px) {
        max-width: 430px;
        top: 65px;

        > * {
            padding-left: 10px;
            padding-right: 10px;
            font-size: 12px;
        }
    }
}

/* GET IN TOUCH */
.get-in-touch {
    background-color: var(--color-black-2);
    padding: 16px;
    position: relative;
    height: 740px;

    &::before {
        content: "";
        position: absolute;
        inset: 16px;
        border: 3px solid var(--color-white);
        border-radius: 10px;
        pointer-events: none;
    }

    &::after {
        content: "";
        position: absolute;
        inset: 29px;
        border: 3px solid var(--color-white);
        border-radius: 5px;
        pointer-events: none;
    }
}

.get-in-touch__container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
    height: 100%;
    padding: 53px 17px;
    z-index: 1;
}

.get-in-touch__decoration {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 511px;
    width: auto;
    pointer-events: none;
    opacity: 1;
    z-index: 0;
}

.get-in-touch__decoration--left {
    left: 17px;
}

.get-in-touch__decoration--right {
    right: 17px;
    transform: translateY(-50%);
}

.get-in-touch__title {
    font-family: var(--font-baskerville-bold);
    font-size: 50px;
    font-weight: 700;
    line-height: normal;
    color: var(--color-white);
    margin: 0;
    text-align: center;
    position: relative;
    z-index: 1;
}

.get-in-touch__logo {
    width: 189.13px;
    height: 188.619px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.get-in-touch__logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.get-in-touch__social {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.get-in-touch__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8.004px;
    padding: 19.429px 31.506px;
    height: 63.689px;
    width: 328px;
    background-color: var(--color-cream);
    border-radius: 40.021px;
    text-decoration: none;
    color: var(--color-black-2);
}

.get-in-touch__social-link--hover-text-white:hover {
    .get-in-touch__social-text {
        color: var(--color-white);
    }
}

.get-in-touch__social-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
    flex-shrink: 0;
}

.get-in-touch__social-text {
    font-family: var(--font-baskerville-bold);
    font-size: 25px;
    font-weight: 700;
    line-height: normal;
    color: var(--color-black-2);
}

.get-in-touch__image-trail {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;

    > img {
        /* position will be moved by javascript */
        top: 0;
        left: 0;
        position: absolute;
        width: 150px;
        height: 150px;
        object-fit: contain;
    }
}

.get-in-touch__floating-image {
    transform: translate(-50%, -50%) rotate(-25deg) scale(0);
}

.get-in-touch__floating-image--left {
    transform: translate(-50%, -50%) rotate(25deg) scale(0);
}

.get-in-touch__floating-image.get-in-touch__floating-image--animate {
    transform: translate(-50%, -50%) rotate(0) scale(1);
    transition: transform 0.5s
        linear(
            0,
            0.276 3.8%,
            0.52 7.7%,
            0.731 11.7%,
            0.911 15.8%,
            0.99 17.9%,
            1.06 20%,
            1.124 22.2%,
            1.18 24.4%,
            1.23 26.7%,
            1.272 29%,
            1.308 31.4%,
            1.335 33.8%,
            1.352 35.7%,
            1.364 37.6%,
            1.373 39.5%,
            1.378 41.5%,
            1.379 43.5%,
            1.377 45.6%,
            1.371 47.8%,
            1.361 50.1%,
            1.336 54.1%,
            1.299 58.6%,
            1.255 63.2%,
            1.124 76.1%,
            1.088 80.1%,
            1.058 83.8%,
            1.032 88%,
            1.014 92%,
            1.003 95.9%,
            1
        );
}

@media (max-width: 1200px) {
    .get-in-touch__decoration {
        height: 400px;
    }

    .get-in-touch__decoration--left {
        left: 20px;
    }

    .get-in-touch__decoration--right {
        right: 20px;
    }
}

@media (max-width: 900px) {
    .get-in-touch__decoration {
        height: 300px;
    }
}

@media (max-width: 768px) {
    .get-in-touch {
        padding: 12px;
        height: 515px;
    }

    .get-in-touch::before {
        inset: 12px;
        border-width: 2px;
    }

    .get-in-touch::after {
        inset: 22px;
        border-width: 2px;
    }

    .get-in-touch__container {
        gap: 24px;
        padding: 40px 20px;
        overflow: hidden;
    }

    .get-in-touch__title {
        font-size: 25px;
    }

    .get-in-touch__logo {
        width: 116px;
        height: 116px;
    }

    .get-in-touch__social {
        flex-direction: column;
        width: 100%;
        gap: 16px;
    }

    .get-in-touch__social-link {
        width: 100%;
        max-width: 216px;
        height: auto;
        padding: 16px 24px;
        margin: auto;
    }

    .get-in-touch__social-text {
        font-size: 14px;
    }

    .get-in-touch__social-icon {
        width: 17px;
        height: 17px;
    }

    .get-in-touch__decoration {
        transform: none;
    }

    .get-in-touch__decoration--left {
        bottom: 15px;
        left: 10px;
    }

    .get-in-touch__decoration--right {
        top: 12px;
        right: -15px;
    }
}

/* Menu Section */
.menu {
    padding-top: 60px;
    padding-bottom: 120px;

    @media (max-width: 768px) {
        padding-top: 40px;
        padding-bottom: 80px;
    }
}

.menu__title {
    font: 70px/1.2 var(--font-baskerville-bold);
    text-align: center;
    margin-bottom: 45px;
    color: var(--color-primary);

    @media (max-width: 768px) {
        font-size: 32px;
        margin-bottom: 32px;
    }
}

.menu__categories {
    list-style: none;
    padding: 0 20px;
    margin: auto;
    margin-bottom: 65px;

    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 610px;
    width: 100%;
    gap: 16px;

    > * {
        font-size: 16px;
        font-weight: 500;
        color: var(--color-text-primary);
        background-color: var(--color-cream);
        cursor: pointer;
        padding: 5px 20px;
        white-space: nowrap;
        border-radius: 24px;
        transition: all 0.2s ease-in-out;

        &:hover,
        &.active {
            color: white;
            background-color: var(--color-text-primary);
        }
    }

    @media (max-width: 768px) {
        gap: 16px;
        margin-bottom: 32px;
        padding: 0 16px;

        > li {
            font-size: 14px;
            padding: 6px 12px;
        }
    }
}

.menu__products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 50px 20px;
    margin-top: 48px;

    @media (max-width: 768px) {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 16px;
    }

    @media (max-width: 568px) {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* Product Card */
.product {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;

    display: flex;
    flex-direction: column;
    gap: 22px;

    isolation: isolate;
}

.product__img-wrapper {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
}

.product__img {
    width: 100%;
    height: 100%;
    aspect-ratio: 1;
    object-fit: contain;
    display: block;
}

.product__img-hover {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 0;
    width: 0;
    border-radius: 100%;
    overflow: hidden;
    transform: translate(-50%, -50%);

    transition: all 0.4s ease-in-out;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;

    > img {
        height: 320px;
        width: 320px;
        object-fit: cover;
    }

    @media (max-width: 568px) {
        > img {
            height: 200px;
            width: 200px;
        }
    }
}

.product__img-bg {
    height: 100%;
    width: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

.product:hover .product__img-hover {
    height: 150%;
    width: 150%;
}

.product__title {
    font: 16px/1.2 var(--font-figtree-semibold);
    color: var(--color-primary, #2c1810);
    text-align: center;

    @media (max-width: 768px) {
        font-size: 16px;
        padding: 16px 12px;
    }

    @media (max-width: 568px) {
        font-size: 28px;
    }
}

.product__tag {
    position: absolute;
    top: 16px;
    left: 16px;
    background-color: var(--color-accent);
    color: var(--color-white, #ffffff);
    font: 14px/1.2 var(--font-figtree-semibold);
    padding: 6px 12px;
    border-radius: 20px;

    z-index: 3;
}

.locations {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    padding-top: 50px;
    max-width: 1440px;
    margin: 0 auto;
    background: linear-gradient(to bottom, rgba(243, 233, 226, 0), var(--color-cream));

    @media (max-width: 1024px) {
        grid-template-columns: 1fr;
        gap: 10px;
        padding-top: 0px;
        padding-left: 0px;
        border-radius: 0;
    }
}

.locations__store-content {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -100%;
    right: 0;
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;

    transform: translateX(100%);
    transition: transform 0.3s ease-out;
}

.locations__section {
    position: relative;
    column-gap: 20px;
    transition: height 0.3s ease-out;
}

.locations__content {
    padding: 80px 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    /* If we had the floral background, we would add it here */
    background-image: url("../img/pattern-flower.png"); /* Placeholder */
    background-size: cover;
    background-blend-mode: overlay;

    transform: translateX(0);
    transition: transform 0.3s ease-out;

    @media (max-width: 1024px) {
        padding: 0 16px;
        align-items: center;
        text-align: center;
    }

    @media (max-width: 896px) {
        padding: 30px 16px;
    }
}

.locations__content-store {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0 60px;

    display: grid;
    grid-template-rows: auto 1fr;
    gap: 40px;

    transform: translateX(-100%);
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
    opacity: 0;

    @media screen and (max-width: 768px) {
        padding: 0 20px;
    }
}

.locations__section--show-store {
    .locations__content {
        transform: translateX(-100%);
    }

    .locations__content-store {
        transform: translateX(0);
        opacity: 1;
    }
}

.locations__stores {
    position: relative;
}

.locations__button-back {
    font: 16px/1.2 var(--font-baskerville-bold);
    display: flex;
    align-items: center;
    gap: 10px;
    background: none;
    border: none;
    outline: none;
    color: var(--color-black-2);
    transition: color 0.3s ease-out;
    cursor: pointer;

    > svg {
        height: 15px;
        display: block;
        transform: translateX(0);
        color: inherit;
        transition: transform 0.3s ease-out, color 0.3s ease-out;
        height: 13px;
    }

    &:hover {
        color: var(--color-dark-pink);

        > svg {
            transform: translateX(-10px);
        }
    }
}

.locations__map {
    /* background-color: #e5e3df; Map placeholder color */
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    overflow: hidden;
    width: 100%;
    /* transform: translateX(20px); */

    @media (max-width: 1024px) {
        transform: unset;
        width: 100%;
        height: 400px;
        border-radius: 0;
    }
}

.locations__map iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.locations__title {
    font: 70px/1.2 var(--font-baskerville-bold);
    color: var(--color-text-primary);
    margin-bottom: 30px;

    @media (max-width: 1024px) {
        font-size: 48px;
        margin-bottom: 17px;
    }

    @media (max-width: 896px) {
        font-size: 35px;
    }
}

.locations__subtitle {
    font-family: var(--font-figtree-regular);
    font-size: 18px;
    color: var(--color-text-primary);
    margin-bottom: 40px;

    @media (max-width: 896px) {
        font-size: 14px;
        margin-bottom: 20px;
    }
}

.locations__search {
    width: 100%;
    max-width: 500px;
}

.locations__search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    background: white;
    border-radius: 50px;
    padding: 10px 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.locations__search-icon {
    width: 24px;
    height: 24px;
    margin-right: 15px;
}

.locations__search-input {
    border: none;
    outline: none;
    width: 100%;
    font-family: var(--font-figtree-regular);
    font-size: 16px;
    color: var(--color-gray-500);
}

.locations__search-input::placeholder {
    color: #9ca3af;
}

.location-store {
    padding: 100px 0;
    background-color: var(--color-cream);

    @media (max-width: 1024px) {
        padding: 40px 0;
    }

    @media (max-width: 900px) {
        flex-direction: column;
        height: auto;
        min-height: auto;
    }
}

.location-store__heading {
    font: 50px/1.2 var(--font-baskerville-bold);
    color: var(--color-text-primary);
    margin-bottom: 40px;
    font-weight: 700;

    @media (max-width: 768px) {
        font-size: 25px;
        margin-bottom: 20px;
    }
}

.location-store__filters {
    display: flex;
    gap: 12px;
    margin-bottom: 60px;
    flex-wrap: wrap;

    @media (max-width: 768px) {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 10px;
        white-space: nowrap;
        margin-bottom: 47px;
        font-size: 14px;

        scrollbar-width: 0;

    }
}

.location-store__filter {
    background: transparent;
    border: none;
    font-family: var(--font-figtree-medium);
    font-size: 16px;
    color: var(--color-gray-600);
    cursor: pointer;
    padding: 8px 16px;
    border-radius: 20px;
    transition: all 0.3s ease;
}

.location-store__filter.active,
.location-store__filter:hover {
    background-color: var(--color-charcoal);
    color: var(--color-white);
}

.location-store__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 30px;

    @media (max-width: 1024px) {
        grid-template-columns: repeat(2, 1fr);
    }

    @media (max-width: 768px) {
        grid-template-columns: 1fr;
        gap: 44px;
    }
}

/* store card */
.store-card {
    display: grid;
    grid-template-rows: 273px 1fr;
    gap: 20px;
}

.store-card__image-wrapper {
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9;
    margin-bottom: 24px;
    border-radius: 20px;
    overflow: hidden;
    background-color: #ddd;
}

.store-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.store-card__details {
    display: flex;
    flex-direction: column;
    gap: 5px;
    height: 100%;
}

.store-card__name {
    font-family: var(--font-figtree-semibold);
    font-size: 20px;
    color: var(--color-text-primary);
    margin-bottom: 12px;
    line-height: 1.2;
}

.store-card__address {
    font: 16px/1.2 var(--font-figtree-regular);
    color: var(--color-text-primary);
    font-style: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding-right: 50px;
}

.store-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: auto;
}

.store-card__hours {
    font-family: var(--font-figtree-regular);
    font-size: 16px;
    color: var(--color-text-primary);
}

.store-card__hours strong {
    font-weight: 700;
    margin-right: 4px;
}

.store-card__direction {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    background-color: #4a4a4a;
    border-radius: 50%;
    color: white;
    transition: background-color 0.3s ease-out, transform 0.3s ease-out;
    flex-shrink: 0;
    transform: scale(1);

    outline: 1px solid white;
    outline-offset: -4px;
    > img {
        width: 20px;
        height: 20px;
        object-fit: contain;
    }

    &:hover {
        background-color: var(--color-pink);
        transform: scale(1.1);
    }
}
/* store card */

/* About Us Hero */
.hero-about-us {
    position: relative;
    overflow: hidden;
    padding-top: 100px;
    padding-bottom: 200px;
    isolation: isolate;

    @media (max-width: 768px) {
        padding-top: 10px;
        padding-bottom: 250px;
    }

    @media (max-width: 568px) {
        padding-bottom: 230px;
    }
}

.hero-about-us__container {
    display: flex;
    justify-content: center;
    gap: 25px;
    position: relative;
    z-index: 1;
}

.hero-about-us__content {
    max-width: 450px;

    display: flex;
    flex-direction: column;
    gap: 25px;
    font: 16px/1.2 var(--font-figtree-regular);
    color: var(--color-text-primary);
    text-align: center;

    @media (max-width: 768px) {
        max-width: 350px;
        font-size: 14px;
    }
}

.hero-about-us__title {
    font: 70px/1.2 var(--font-baskerville-bold);

    @media (max-width: 768px) {
        font-size: 35px;
    }
}

.hero-about-us__description {
    font: 16px/1.4 var(--font-figtree-regular);

    @media (max-width: 768px) {
        font-size: 14px;
    }
}

.hero-about-us__image {
    width: 100%;
    height: auto;
    border-radius: 8px;
    object-fit: cover;

    position: absolute;
    left: 0;
    bottom: 0;

    @media (max-width: 768px) {
        display: none;
    }
}

.hero-about-us__image--mobile {
    height: 380px;
    width: auto;
    display: none;

    @media (max-width: 768px) {
        display: block;
    }

    @media (max-width: 568px) {
        height: 300px;
    }

    @media (max-width: 400px) {
        height: auto;
        width: 49%;
    }
}

.hero-about-us__image--right {
    left: unset;
    right: 0;
}

.who-we-are {
    background-color: var(--color-cream);
    padding: 120px 20px;
    padding-bottom: 0;
    overflow: hidden;
    position: relative;

    isolation: isolate;

    @media (max-width: 896px) {
        padding-top: 50px;
    }
}

.who-we-are__empty-space {
    height: 120px; /* same size with who-we-are padding */
    width: 100%;
    background-color: var(--color-cream);
    position: relative;
    z-index: 2;

    @media (max-width: 896px) {
        height: 90px;
    }
}

.who-we-are__container {
    background-color: var(--color-black-2);
    padding: 0 80px;
    display: grid;
    grid-template-columns: 1.7fr 1fr;
    grid-template-areas: "img content";
    gap: 25px;

    border-radius: 20px;

    height: 520px;
    position: relative;

    &::before,
    &::after {
        content: "";
        display: block;
        border: 3px solid var(--color-white);
        border-top-color: transparent;
        border-radius: 20px;
        position: absolute;
        left: 10px;
        top: 10px;
        bottom: 10px;
        right: 10px;
    }

    &::before {
        border-color: transparent;
        border-top-color: white;
    }

    @media (max-width: 896px) {
        grid-template-columns: 1fr;
        grid-template-areas: "content" "img";
        height: auto;
        padding: 50px 35px 13px 35px;
    }
}

.who-we-are__background-img,
.who-we-are__leaf {
    transition: all 0.8s ease-out;
}

.who-we-are__background-img {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60%;
    transform: translateY(100%);

    @media screen and (max-width: 896px) {
        width: 100%;
    }
}

.who-we-are__leaf {
    display: block;
    position: absolute;
    z-index: 1;
}

.who-we-are__leaf--1 {
    top: 0;
    left: 0;
    height: 250px;
    transform: translateY(-100%) rotate(-53deg);

    @media screen and (max-width: 896px) {
        height: 110px;
    }
}

.who-we-are__leaf--2 {
    top: 0%;
    left: 33%;
    height: 220px;
    transform: translateY(-100%) rotate(53deg);

    @media screen and (max-width: 896px) {
        height: 95px;
    }
}

.who-we-are__leaf--3 {
    top: 0;
    left: 36%;
    height: 245px;
    transform: translateY(-100%) rotate(65deg);

    @media screen and (max-width: 896px) {
        height: 110px;
    }
}

.who-we-are--active {
    .who-we-are__background-img {
        transform: translateY(0);
    }

    .who-we-are__leaf--1 {
        top: 2%;
        left: 3%;
        transform: translateY(0) rotate(24deg);

        @media screen and (max-width: 896px) {
            top: 40%;
            left: 10%;
        }

        @media screen and (max-width: 568px) {
            top: 46%;
        }
    }

    .who-we-are__leaf--2 {
        top: 21%;
        transform: translateY(0%) rotate(76deg);

        @media screen and (max-width: 896px) {
            top: 45%;
            left: unset;
            right: 15%;
            transform: translateY(0%) rotate(88deg);
        }
    }

    .who-we-are__leaf--3 {
        top: 37%;
        transform: translateY(0%) rotate(12deg);

        @media screen and (max-width: 896px) {
            top: 57%;
            left: unset;
            right: 9%;
            transform: translateY(0%) rotate(-12deg);
        }
    }
}

.who-we-are__content {
    grid-area: content;
    font: 16px/1.5 var(--font-figtree-regular);
    display: flex;
    justify-content: center;
    text-align: left;
    flex-direction: column;
    gap: 25px;
    color: white;
    z-index: 1;

    @media (max-width: 896px) {
        font-size: 14px;
    }
}

.who-we-are__title {
    font: 50px/1.2 var(--font-baskerville-bold);
    color: var(--color-white);

    @media (max-width: 896px) {
        font-size: 25px;
    }
}

.who-we-are__img-wrapper {
    grid-area: img;
    position: relative;

    @media (max-width: 896px) {
        width: 50%;
        height: auto;
        margin: auto;
    }
}

.who-we-are__img {
    display: block;
    position: absolute;
    bottom: 0;
    left: 50%;
    height: 100%;
    transform: translateX(-50%) scale(1.1);
    transform-origin: 100% 100%;

    @media (max-width: 896px) {
        position: unset;
        transform: unset;
        width: 100%;
    }
}

.more-than-beverage {
    background-color: var(--color-cream);
}

.more-than-beverage__container {
    display: grid;
    grid-template-columns: 610px 1fr;
    align-items: center;
    column-gap: 25px;
    padding: 110px 20px;
    min-height: 450px;
    overflow: hidden;


    @media (max-width: 968px) {
        grid-template-columns: 1fr;
        gap: 40px;
        padding-top: 0px;
    }
}

.more-than-beverage__content {
    display: flex;
    flex-direction: column;
    gap: 25px;

    @media (max-width: 968px) {
        font-size: 14px;
    }
}

.more-than-beverage__title {
    font: 50px/1.2 var(--font-baskerville-bold);
    color: var(--color-black-2);

    @media (max-width: 1220px) {
        font-size: 45px;
    }

    @media (max-width: 968px) {
        font-size: 25px;
    }
}

.more-than-beverage__videos {
    display: flex;

    > *:first-child {
        transform: translateY(calc(110% + 110px)) rotate(-5deg);
        transition: transform 0.3s ease-out;
    }

    > *:nth-child(2) {
        transform: translateY(calc(110% + 110px)) rotate(9deg);
        transition: transform 0.3s ease-out;
        transition-delay: 300ms;
    }

    @media (max-width: 968px) {
        margin: auto;
        transform: translate(20px, 40px);
    }

    @media (max-width: 768px) {
        transform: translate(20px, 40px) scale(1.1);
    }
}

.more-than-beverage--active {
    .more-than-beverage__videos > *:first-child {
        transform: translateY(0%) rotate(-5deg);
    }

    .more-than-beverage__videos > *:nth-child(2) {
        transform: translate(-20%, -10%) rotate(9deg);
    }
}

.more-than-beverage__video {
    padding: 15px;
    object-fit: cover;
    aspect-ratio: 350 / 440;
    border-radius: 24px;

    @media (max-width: 968px) {
        padding: 8px;
    }
}

.more-than-beverage__video-wrapper {
    border-radius: 20px;
    background-color: white;
    width: 350px;

    @media (max-width: 1350px) {
        width: 330px;
    }

    @media (max-width: 1300px) {
        width: 310px;
    }

    @media (max-width: 1280px) {
        width: 310px;
    }

    @media (max-width: 1260px) {
        width: 290px;
    }

    @media (max-width: 1200px) {
        width: 270px;
    }

    @media (max-width: 1140px) {
        width: 250px;
    }

    @media (max-width: 1120px) {
        width: 200px;
    }

    @media (max-width: 1024px) {
        width: 100%;
        max-width: 250px;
    }
}

.craft {
    background-color: var(--color-black-2);
    padding: 110px 0;

    @media (max-width: 768px) {
        padding: 55px 0;
    }
}

.craft--active {
    .craft-point {
        height: 100%;
    }

    .craft-point__img-wrapper,
    .craft-point__content {
        opacity: 1;
    }
}

.craft__title {
    font: 67px/1.2 var(--font-baskerville-bold);
    color: white;
    text-align: center;

    @media (max-width: 768px) {
        font-size: 25px;
    }
}

.craft__container {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.craft__points {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 300px;
    gap: 20px;
    align-items: center;

    @media (max-width: 898px) {
        grid-template-columns: 1fr;
    }

    @media (max-width: 768px) {
        grid-auto-rows: 260px;
    }
}

.craft__empty {
    display: block;
    @media (max-width: 898px) {
        display: none;
    }
}

.craft-point {
    display: flex;
    flex-direction: column;
    gap: 21px;
    padding: 46px 34px;
    border: 1px solid white;
    border-radius: 10px;
    position: relative;
    grid-column: span 2;

    transition: height 0.3s ease-out;
    height: 0;
    overflow: hidden;

    &::after {
        content: "";
        display: block;
        top: 10px;
        bottom: 10px;
        left: 10px;
        right: 10px;
        border: 1px solid white;
        border-radius: 10px;
        position: absolute;
    }

    @media screen and (max-width: 768px) {
        height: 100%;
    }
}

.craft-point__img-wrapper {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 9px;
    opacity: 0;
    transition: opacity 0.3s ease-out;

    @media screen and (max-width: 768px) {
        opacity: 1;
    }
}

.craft-point__spacer {
    position: relative;
    height: 1px;
    background-color: var(--color-pink);
    width: 100%;

    &::before,
    &::after {
        content: "";
        display: block;
        position: absolute;
        top: 50%;
        left: 0;
        height: 6px;
        transform: translateY(-50%);
        border-radius: 50%;
        aspect-ratio: 1;
        background-color: var(--color-pink);
    }

    &::before {
        left: 8px;
        height: 9px;
    }

    &:last-of-type {
        transform: rotate(180deg);
    }
}

.craft-point__img {
    height: 68px;
    width: auto;
    display: block;
}

.craft-point__content {
    display: flex;
    flex-direction: column;
    gap: 13px;
    font: 16px/1.2 var(--font-baskerville-regular);
    color: white;
    text-align: center;
    transition: opacity 0.3s ease-out;
    opacity: 0;

    @media screen and (max-width: 768px) {
        opacity: 1;
        font-size: 14px;
    }
}

.craft-point__title {
    font: 24px/1.2 var(--font-baskerville-bold);
    color: white;
    text-align: center;

    @media (max-width: 768px) {
        font-size: 20px;
    }
}

.different {
    background-color: var(--color-pink);
    padding: 100px 70px;

    @media (max-width: 898px) {
        padding: 60px 15px;
    }
}

.different__container {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: 20px;
    padding: 0; /* clear padding container */

    @media (max-width: 898px) {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

.different__title-wrapper {
    position: sticky;
    top: 40px;
    z-index: 10;

    @media (max-width: 898px) {
        position: relative;
        top: unset;
        text-align: center;
    }
}

.different__title {
    font: 68px/1.2 var(--font-baskerville-bold);
    max-width: 450px;
    width: 100%;

    @media (max-width: 898px) {
        font-size: 25px;
        max-width: unset;
    }
}

.different__cards {
    display: flex;
    flex-direction: column;
    transform: translateY(160px);

    @media screen and (max-width: 898px) {
        transform: translateY(0);
        gap: 20px;
    }
}

.different-card {
    min-width: 500px;
    max-width: 550px;
    width: 100%;
    border-radius: 15px;

    overflow: hidden;

    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease-out;

    top: 0;
    transform: translateY(-160px);

    @media screen and (max-width: 898px) {
        transform: translateY(0);
        min-width: unset;
        width: 100%;
        margin: auto;
    }
}

.different-card--active {
    transform: translateY(-140px);

    .different-card__img {
        transform: translateY(0);
        opacity: 1;
        height: 100%;
    }

    .different-card__content {
        border-radius: 0;
    }

    @media screen and (max-width: 898px) {
        transform: translateY(0);
    }
}

.different-card__img-wrapper {
    height: 180px;

    @media (max-width: 898px) {
        height: 100px;
    }
}

.different-card__img {
    height: 100%;
    transform: translateY(50%);
    opacity: 0;
    transition: transform 0.3s ease-out, opacity 0.3s ease-out, height 0.3s ease-out;

    @media (max-width: 898px) {
        opacity: 1;
        transform: translateY(0);
        aspect-ratio: 360 / 160;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

.different-card__content {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    padding: 35px;
    height: 100%;
    font: 25px/1.2 var(--font-baskerville-bold);
    background-color: var(--color-cream);
    border-radius: inherit;

    @media screen and (max-width: 898px) {
        font-size: 20px;
        padding: 30px 20px;
        border-radius: unset;
        justify-content: flex-start;
    }

    @media screen and (max-width: 568px) {
        font-size: 16px;
    }
}

.different-card__title {
    font: 60px/1.2 var(--font-baskerville-bold);
    color: var(--color-black-2);

    @media screen and (max-width: 898px) {
        font-size: 40px;
    }

    @media screen and (max-width: 568px) {
        font-size: 30px;
    }
}

.different-card__desc {
    max-width: 300px;
    width: 100%;
}

.sancha-marker {
    height: 40px;
    cursor: pointer;
    color: var(--color-black-2);
    transition: color 0.3s ease-out, transform 0.3s ease-out;
    transform: scale(1);

    &:hover {
        color: var(--color-pink);
        transform: scale(1.1);
        transform-origin: 50% 100%;
    }
}

.pac-container {
    background-color: #fff;
    border: none;
    margin-top: 8px;
    padding: 8px 0;
    font: 16px/1.2 var(--font-figtree-regular);

    border-radius: 24px;
    transform: translate(-6px, 10px) scaleX(1.24);
    z-index: 9999;

    > .pac-item:not(:first-child) {
        border-top: 1px solid var(--color-cream);
    }

    * {
        font: inherit;
        color: inherit;
    }
}

.pac-item {
    font: 16px/1.2 var(--font-figtree-regular);
    padding: 20px;
    color: var(--color-black-2);
    cursor: pointer;
    border: none;
    white-space: nowrap;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pac-matched {
    font-family: var(--font-figtree-semibold);
    color: var(--color-dark-pink);
}

.pac-icon,
.pac-logo::after {
    display: none;
}
/* START: CONTACT US PAGE */
.contact-us {
    padding-top: 120px;
    padding-bottom: 80px;
    min-height: 100vh;
    background-image:
        linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.2) 50%,
            rgba(243, 233, 226, 0.8) 80%,
            rgba(243, 233, 226, 1) 100%
        ),
        url("/static/img/leave-pattern.webp");
    background-color: var(--color-pink);
    background-size: auto;
    background-position: top left;
    background-repeat: repeat;
    position: relative;
    overflow: hidden;

    @media (max-width: 768px) {
        padding-top: 100px;
        padding-bottom: 60px;
    }
}

.contact-us__container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    position: relative;
    z-index: 10;

    @media (max-width: 768px) {
        gap: 30px;
    }
}

.contact-us__title {
    font: 70px/1.2 var(--font-baskerville-bold);
    color: var(--color-black-2);
    text-align: center;

    @media (max-width: 768px) {
        font-size: 35px;
    }
}

.contact-us__card {
    background-color: var(--color-white);
    border-radius: 20px;
    padding: 40px;
    width: 100%;
    max-width: 900px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);

    @media (max-width: 768px) {
        padding: 30px 20px;
        border-radius: 15px;
    }
}

.contact-us__textarea {
    resize: vertical;
    min-height: 120px;
}

.contact-us__submit {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 40px;
    padding: 16px 24px;
    margin-top: 10px;

    img {
        width: 24px;
        height: auto;
    }
}

.contact-us__decoration {
    position: absolute;
    bottom: 0;
    height: 18.8vw;
    width: auto;
    pointer-events: none;
    z-index: 0;
    opacity: 1;
}

.contact-us__decoration--left {
    left: 0;
}

.contact-us__decoration--right {
    right: 0;
    transform: scaleX(-1);
}

.contact-us__product {
    position: absolute;
    height: auto;
    width: 480px;
    max-width: 25vw;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);

    @media (max-width: 1200px) {
        width: 240px;
        max-width: 18vw;
    }

    @media (max-width: 900px) {
        width: 200px;
        max-width: 22vw;
    }

    @media (max-width: 768px) {
        width: 150px;
        max-width: 25vw;
    }
}

.contact-us__product--left {
    left: -3%;
    top: 55%;
    transform: translateX(-120%) rotate(-25deg);

    @media (max-width: 768px) {
        left: 0;
        top: 50%;
    }
}

.contact-us__product--right {
    right: -5%;
    top: 10%;
    transform: translateX(150%) rotate(25deg);
    max-width: 50vw;


    @media (max-width: 768px) {
        right: 0;
        top: 30%;
    }
}

.contact-us--animate .contact-us__product--left {
    opacity: 1;
    transform: translateX(0) rotate(15deg);
}

.contact-us--animate .contact-us__product--right {
    opacity: 1;
    transform: translateX(0) rotate(-15deg);
}

.contact-us__message {
  padding: 16px 20px;
  border-radius: 12px;
  margin-bottom: 24px;
  font-size: 14px;
  line-height: 1.5;
  display: flex;
  align-items: center;
  gap: 12px;
  animation: fadeInUp 0.4s ease-out;
}

.contact-us__message--success {
  background-color: #e8f5e9;
  border-left: 4px solid #4caf50;
  color: #2e7d32;
}
/* END: CONTACT US PAGE */

.button-our-menu {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    transform: translate(-50%, -50%);
    height: 0;
    width: 0;
    padding: 0;

    border-radius: 50%;
    background-color: var(--color-black-2);
    outline: 1px solid white;
    outline-offset: -5px;
    cursor: pointer;
    transition: width 0.3s ease-out, height 0.3s ease-out, padding 0.3s ease-out;

    display: flex;
    align-items: center;
    justify-content: center;
    color: white;


    font: 16px/1.2 var(--font-baskerville-bold);

    text-align: center;
    user-select: none;

    overflow: hidden;

    &::after {
        content: "";
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        height: 100%;
        opacity: 1;
        background-color: white;
        border-radius: 50%;
        transform: translate(-50%, -50%);
        z-index: 1;
        transition: width 0.1s, height 0.1s, opacity 0.2s;
    }
}

.button-our-menu--visible {
    height: 120px;
    width: 120px;
    padding: 2%;

    &::after {
        width: 0;
        height: 0;
        opacity: 0;
    }
}