* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--inter);
}

section.kat__homepage-new-inner .pin-spacer {
    pointer-events: none;
    z-index: unset !important;
}

section.kat__homepage-new-inner button {
    cursor: pointer;
}

section.kat__homepage-new-inner a {
    cursor: pointer;
    text-decoration: none;
}

body.kat__homepage-new {
    /* Boxing Family */
    --boxing-text-family: "Boxing-Regular", serif;
    --boxing-text-style: normal;
    --boxing-text-weight: 400;
    --boxing-text-size: 72px;
    --boxing-text-size-m: 72px;
    --boxing-text-size-s: 48px;
    --boxing-text-size-xs: 28px;
    --boxing-text-lettercase: none;

    /* Gambarino Text */
    --gambarino-text-family: "Gambarino-Regular", serif;
    --gambarino-text-style: normal;
    --gambarino-text-weight: 400;
    --gambarino-text-size: 55px;
    --gambarino-text-size-s: 40px;
    --gambarino-text-lettercase: none;

    /* body Text */
    --body-text-family: var(--inter);
    --body-text-style: normal;
    --body-text-weight: 400;
    --body-text-size: 32px;
    --body-text-size-l: 28px;
    --body-text-size-m: 24px;
    --body-text-size-s: 20px;
    --body-text-size-xs: 16px;
    --body-text-lettercase: none;

    /* Font Size Extra */
    --fs-extra-1: 2px;
    --fs-extra-2: 4px;
    --fs-extra-3: 5px;
    --fs-extra-4: 6px;
    --fs-extra-5: 10px;
    --fs-extra-6: 12px;
    --fs-extra-7: 15px;
    --fs-extra-8: 20px;

    /* Attribute */
    --body-height: 100vh;

    --hero-bg: url("https://katsudoto.id/media/assets/pictures/homepage/sect-1/bg-hero.gif");
    --divider-1: url("https://katsudoto.id/media/assets/pictures/homepage/divider.png");
    --divider-2: url("https://katsudoto.id/media/assets/pictures/homepage/divider-2.png");
    --divider-4: url("https://katsudoto.id/media/assets/pictures/homepage/divider-4.png");
}

/* Fonts */
body.kat__homepage-new h1,
body.kat__homepage-new h2,
body.kat__homepage-new h3,
body.kat__homepage-new h4,
body.kat__homepage-new h5,
body.kat__homepage-new h6 {
    font-weight: normal;
    line-height: normal;
    color: var(--text-primary);
}

body.kat__homepage-new {
    /* Colors */
    --background-primary: var(--light-yellow-main);
    --background-secondary: var(--blue-main);
    --background-tertiary: var(--pink-main);
    --background-extend-primary: var(--yellow-main);
    --background-extend-secondary: var(--light-blue-main);

    /* Text Colors */
    --text-primary: var(--primary-main);
    --text-secondary: var(--blue-main);
    --text-tertiary: var(--light-yellow-main);
}

.lg-hidden {
    display: none;
}

@media only screen and (max-width: 960px) {}

@media (min-width: 1600px) {
    body.kat__homepage-new {}
}

@media (min-width: 1441px) and (max-width: 1599px) {
    body.kat__homepage-new {
        /* Boxing Family */
        --boxing-text-family: "Boxing-Regular", serif;
        --boxing-text-style: normal;
        --boxing-text-weight: 400;
        --boxing-text-size: 72px;
        --boxing-text-size-m: 72px;
        --boxing-text-size-s: 48px;
        --boxing-text-size-xs: 28px;
        --boxing-text-lettercase: none;

        /* Gambarino Text */
        --gambarino-text-family: "Gambarino-Regular", serif;
        --gambarino-text-style: normal;
        --gambarino-text-weight: 400;
        --gambarino-text-size: 52px;
        --gambarino-text-size-s: 32px;
        --gambarino-text-lettercase: none;

        /* body Text */
        --body-text-family: var(--inter);
        --body-text-style: normal;
        --body-text-weight: 400;
        --body-text-size: 32px;
        --body-text-size-l: 28px;
        --body-text-size-m: 20px;
        --body-text-size-s: 20px;
        --body-text-size-xs: 16px;
        --body-text-lettercase: none;

        /* Font Size Extra */
        --fs-extra-1: 2px;
        --fs-extra-2: 4px;
        --fs-extra-3: 5px;
        --fs-extra-4: 6px;
        --fs-extra-5: 10px;
        --fs-extra-6: 12px;
        --fs-extra-7: 15px;
        --fs-extra-8: 20px;
    }
}

@media (max-width: 1440px) {
    body.kat__homepage-new {
        /* Boxing Font  */
        --boxing-text-size: 72px;
        --boxing-text-size-m: 60px;
        --boxing-text-size-s: 40px;
        --boxing-text-size-xs: 28px;

        /* Gambarino Font  */
        --gambarino-text-size: 55px;
        --gambarino-text-size-s: 40px;

        /* Body Text Size  */
        --body-text-size: 32px;
        --body-text-size-l: 28px;
        --body-text-size-m: 24px;
        --body-text-size-s: 20px;
        --body-text-size-xs: 16px;
    }

    .lg-hidden {
        display: block;
    }
}

@media (min-width: 960px) and (max-width: 1440px) {
    body.kat__homepage-new {
        /* Boxing Font  */
        --boxing-text-size: 60px;
        --boxing-text-size-m: 52px;
        --boxing-text-size-s: 32px;
        --boxing-text-size-xs: 24px;

        /* Gambarino Font  */
        --gambarino-text-size: 48px;
        --gambarino-text-size-s: 34px;

        /* Body Text Size  */
        --body-text-size: 28px;
        --body-text-size-l: 20px;
        --body-text-size-m: 18px;
        --body-text-size-s: 18px;
        --body-text-size-xs: 16px;
    }
}

@media (min-width: 560px) and (max-width: 960px) {
    body.kat__homepage-new {
        /* Boxing Font  */
        --boxing-text-size: 52px;
        --boxing-text-size-m: 44px;
        --boxing-text-size-s: 28px;
        --boxing-text-size-xs: 20px;

        /* Gambarino Font  */
        --gambarino-text-size: 48px;
        --gambarino-text-size-s: 32px;

        /* kalam Font  */
        --kalam-text-size: 24px;

        /* Body Text Size  */
        --body-text-size: 24px;
        --body-text-size-l: 20px;
        --body-text-size-m: 18px;
        --body-text-size-s: 16px;
        --body-text-size-xs: 14px;
    }
}

@media (max-width: 559px) {
    body.kat__homepage-new {
        /* Boxing Font  */
        --boxing-text-size: 32px;
        --boxing-text-size-m: 28px;
        --boxing-text-size-s: 24px;
        --boxing-text-size-xs: 18px;

        /* Gambarino Font  */
        --gambarino-text-size: 35px;
        --gambarino-text-size-s: 24px;

        /* kalam Font  */
        --kalam-text-size: 24px;

        /* Body Text Size  */
        --body-text-size: 16px;
        --body-text-size-l: 16px;
        --body-text-size-m: 16px;
        --body-text-size-s: 16px;
        --body-text-size-xs: 12px;
    }
}



/* img */
body.kat__homepage-new img {
    max-width: 100%;
}

/* ======================
    GLOBAL
====================== */
.ornaments-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

.image-wrap {
    position: relative;
    width: 100%;
}

.image-wrap img {
    width: 100%;
    height: auto;
    max-width: 100%;
}

.p-relative {
    position: relative;
}

body.kat__homepage-new {
    /* overflow: hidden; */
}

.kat__homepage-new-inner {
    overflow: hidden;
    background-color: var(--blue-main);
    height: 100dvh;
}

/* Wrapper  */
.landing-wrapper.homepage {
    height: 100dvh;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-radius: 40px 40px 0px 0px;
    background: var(--background-primary);
}

.homepage .landing-wrapper-inner {
    min-height: unset !important;
}

.landing-wrapper-inner {
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

@media (min-width : 561px) and (max-width : 960px) {
    .landing-wrapper.homepage {}
}

.kat__primary-button {}

.kat__primary-button {
    border-radius: 99px;
    border: 3px solid #000;
    box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.15);

    cursor: pointer;
    background: var(--primary-main);
    /* padding: 2px; */
}

.kat__primary-button div {
    color: var(--neutral-10);
    font-family: var(--inter);
    padding: 24px;
    border-radius: 100px;
    border: 3px solid var(--primary-main);
    background: var(--primary-main);
    font-size: calc(var(--body-text-size-s));
    font-weight: 600;
    line-height: 140%;
    transition: all 0.4s ease-in-out;
}

.kat__primary-button div:hover {
    border: 3px solid var(--primary-hover);
    background: var(--primary-hover);
}

/* Kat Chip  */
.kat__chip-item {
    display: flex;
    padding: 16px;
    align-items: center;
    gap: 8px;
    border-radius: 999px;
    background: var(--light-blue-main);
    width: max-content;

    /* Shadow sm */
    box-shadow: 0px 1px 3px 0px rgba(16, 24, 40, 0.10), 0px 1px 2px 0px rgba(16, 24, 40, 0.06);
}

.kat__chip-item .chip-icon {
    position: relative;
    width: 40px;
    height: 40px;
}

body.kat__homepage-new .kat__chip-item p {
    font-family: var(--boxing-text-family);
    font-size: var(--boxing-text-size-xs);
    color: var(--text-primary);
}

/* Divider  */
.divider-top img {
    opacity: 0;
}

.divider-top {
    position: absolute;
    background: var(--divider-1) repeat-x;
    display: block;
    background-size: cover;
    width: 100%;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0%);
    margin-top: -5%;
}

.divider-bottom img {
    opacity: 0;
}

.divider-bottom {
    position: absolute;
    background: var(--divider-1) repeat-x;
    display: block;
    background-size: cover;
    width: 100%;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0%) scaleY(-1);
    margin-bottom: -5%;
}

@media (min-width: 1440px) {}

@media (max-width: 1024px) {}

@media (min-width: 1281px) and (max-width: 1590px) {}

@media (min-width: 1080px) and (max-width: 1440px) {
    .kat__primary-button div {
        padding: 15px 24px;
    }
}

@media (min-width: 560px) and (max-width: 1024px) {
    .kat__primary-button div {
        padding: 15px 24px;
    }
    .kat__chip-item {
        padding: 12px 16px;
    }
}

@media (max-width: 559px) {
    .landing-wrapper.homepage {
        border-radius: 24px 24px 0px 0px;
    }

    .kat__primary-button {
        border: 2px solid #000;
    }

    .kat__primary-button div {
        padding: 10px 12px;
        font-size: calc(var(--body-text-size-s));
    }

    .kat__chip-item {
        padding: 6px 16px;
    }

    .kat__chip-item .chip-icon {
        width: 35px;
        height: 35px;
    }
}

/* ======================
    HOMEPAGE
====================== */

.kat__hero-homepage {
    position: relative;
    height: 100vh;
    padding: 24px;
    overflow: hidden;
}

.kat__hero-homepage .inner {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 80px;
    border: 3px solid #000;
    background: #FFF;
}

.hero-video-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 50%;
    top: 0;
    bottom: 0;
    transform: translate(-50%);
    background: var(--background-secondary);
    /* border-radius: 80px; */
    overflow: hidden;
}

.hero-video-wrapper video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* border-radius: 80px; */
}

.kat__hero-homepage .hero__detail {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 24px;
    padding: 40px 56px;
}

.kat__hero-homepage .hero__detail h2 {
    font-family: var(--boxing-text-family);
    font-size: var(--boxing-text-size);
    color: var(--text-tertiary);
    line-height: normal;
    text-align: center;
    max-width: 1400px;
    margin: 0 auto;
}

.kat__hero-homepage .hero__detail p {
    font-family: var(--body-text-family);
    font-size: var(--body-text-size-l);
    color: var(--text-tertiary);
    line-height: 150%;
    text-align: center;
    max-width: 1200px;
    margin: 0 auto;
}

@media (min-width: 1440px) {}

@media (max-width: 1024px) {}

@media (min-width: 1281px) and (max-width: 1590px) {}

@media (min-width: 1080px) and (max-width: 1440px) {}

@media (min-width: 560px) and (max-width: 1024px) {
    .kat__hero-homepage .inner {
        border-radius: 32px;
    }

    .hero-video-wrapper video,
    .hero-video-wrapper
    {
        border-radius: 30px;
    }
}

@media (max-width: 559px) {
    .kat__hero-homepage {
        padding: 12px;
    }

    .kat__hero-homepage .inner {
        border-radius: 16px;
    }

    .hero-video-wrapper video,
    .hero-video-wrapper
    {
        border-radius: 13px;
    }

    .kat__hero-homepage .hero__detail {
        padding: 40px 12px;
    }
}

/* ======================
    TOTAL PRODUCT STAT
====================== */
.kat__product-stat-homepage {
    position: relative;
    overflow: hidden;
    padding: 60px 80px;
    background: var(--background-primary);
}

.kat__product-stat-homepage .inner {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.kat__product-stat-homepage .inner .product-stat_title {
    font-family: var(--gambarino-text-family);
    font-size: var(--gambarino-text-size);
    color: var(--text-secondary);
    text-align: center;
    max-width: 1200px;
    margin: auto;
}

.kat__product-stat-homepage .inner .product-stat_title span {
    font-family: inherit;
    font-size: inherit;
    color: var(--text-primary);
}

.kat__product-stat-homepage .inner .body-wrapper {
    position: relative;
    display: flex;
    gap: 24px;
    max-width: 1200px;
    margin: auto;
}

.kat__product-stat-homepage .inner .body-wrapper .product-stats-item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px;
    justify-content: space-between;
    padding-bottom: 40px;
}

.kat__product-stat-homepage .inner .body-wrapper .product-stats-item .bg-ps-item {
    position: absolute;
    width: 100%;
    height: 80%;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
    border-radius: 28px;
    border: 3px solid #000;
}

.kat__product-stat-homepage .inner .body-wrapper .product-stats-item:nth-child(1) .bg-ps-item {
    background-color: var(--light-green-main);
    /* Warna untuk item pertama */
}

.kat__product-stat-homepage .inner .body-wrapper .product-stats-item:nth-child(2) .bg-ps-item {
    background-color: var(--purple-main);
    /* Warna untuk item kedua */
}

.kat__product-stat-homepage .inner .body-wrapper .product-stats-item:nth-child(3) .bg-ps-item {
    background-color: var(--light-blue-main);
    /* Warna untuk item ketiga */
}


.kat__product-stat-homepage .inner .body-wrapper .swrap-item-1 {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

.kat__product-stat-homepage .inner .body-wrapper .product-stats-img {
    width: 80%;
    max-width: 320px;
    margin: 0 auto;
}

.kat__product-stat-homepage .inner .body-wrapper h2 {
    font-size: var(--boxing-text-size-m);
    font-family: var(--boxing-text-family);
    color: var(--text-primary);
}

.kat__product-stat-homepage .inner .body-wrapper p {
    color: var(--text-primary);
    font-family: var(--body-text-family);
    font-size: var(--body-text-size-m);
    font-weight: 500;
    text-align: center;
    line-height: 133%;
}

.kat__product-stat-homepage .inner .body-wrapper p span {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: var(--text-primary);
    font-weight: 700;
}

@media (min-width: 560px) and (max-width: 1024px) {
    .kat__product-stat-homepage {
        padding: 40px 24px 20px;
    }

    .kat__product-stat-homepage .inner .body-wrapper {
        flex-direction: column;
        padding-right: 24px;
        gap: 2px;
    }

    .kat__product-stat-homepage .inner .body-wrapper .product-stats-item {
        flex-direction: row;
        align-items: center;
    }

    .kat__product-stat-homepage .inner .body-wrapper .product-stats-img {
        width: 45%;
    }

    .kat__product-stat-homepage .inner .body-wrapper .product-stats-item .bg-ps-item {
        bottom: 50%;
        transform: translate(0%, 45%);
        left: unset;
        right: 0;
        height: 75%;
        width: 88%;
    }

    .kat__product-stat-homepage .inner .body-wrapper h2{
        font-size: calc(var(--boxing-text-size-m) + 4px);
    }
}

@media (max-width: 559px) {
    .kat__product-stat-homepage {
        padding: 40px 24px 24px;
    }

    .kat__product-stat-homepage .inner .body-wrapper {
        flex-direction: column;
    }

    .kat__product-stat-homepage .inner .body-wrapper .product-stats-img {
        width: 65%;
    }

    .kat__product-stat-homepage .inner .body-wrapper .product-stats-item {
        padding-bottom: 24px;
    }
}

@media (min-width: 960px) and (max-width: 1599px) {
    .kat__product-stat-homepage .inner .body-wrapper {
        max-width: 1000px;
    }

    .kat__product-stat-homepage .inner {
        gap: 24px;
    }
}


/* ======================
    MAP PRODUCT
====================== */
.kat__map-homepage {
    position: relative;
    overflow: hidden;
    padding: 60px 80px;
}

.kat__map-homepage .inner {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.kat__map-homepage .inner .kat-map_title {
    font-family: var(--gambarino-text-family);
    font-size: var(--gambarino-text-size);
    color: var(--text-primary);
    text-align: center;
    max-width: 1200px;
    margin: auto;
}

.kat__map-homepage .inner .body-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 80px;
    max-width: 1200px;
    margin: auto;
    background: var(--background-secondary);
    padding: 40px;
}

.kat__map-homepage .inner .body-wrapper .map_product-img {
    position: relative;
    width: 100%;
}

.map_product-img .us-ic {
    position: absolute;
    width: 8.54%;
    left: 15%;
    top: 37%;
    transform: translate(1%, 0%);
}

.map_product-img .neth-ic {
    position: absolute;
    width: 8.03%;
    left: 39%;
    top: 33%;
    transform: translate(-3%, 0%);
}

.map_product-img .ger-ic {
    position: absolute;
    width: 6.69%;
    left: 47%;
    top: 28%;
    transform: translate(0%, 0%);
}

.map_product-img .switz-ic {
    position: absolute;
    width: 7.79%;
    left: 41%;
    top: 40%;
    transform: translate(-1%, 2%);
}

.map_product-img .austri-ic {
    position: absolute;
    width: 5.67%;
    left: 49%;
    top: 35%;
    transform: translate(6%, 0%);
}

.map_product-img .turk-ic {
    position: absolute;
    width: 5.75%;
    right: 40%;
    top: 40%;
    transform: translate(6%, 0%);
}

.map_product-img .egypt-ic {
    position: absolute;
    width: 5.9%;
    right: 45%;
    bottom: 44%;
    transform: translate(-6%, -4%);
}

.map_product-img .qatar-ic {
    position: absolute;
    width: 5.9%;
    right: 37%;
    bottom: 41%;
    transform: translate(-6%, -4%);
}

.map_product-img .india-ic {
    position: absolute;
    width: 5.75%;
    right: 27%;
    bottom: 46%;
    transform: translate(-1%, 8%);
}

.map_product-img .rusia-ic {
    position: absolute;
    width: 5.35%;
    right: 27%;
    top: 25%;
    transform: translate(-1%, 8%);
}

.map_product-img .japan-ic {
    position: absolute;
    width: 5.16%;
    right: 8%;
    top: 38%;
    transform: translate(-14%, 8%);
}

.map_product-img .sk-ic {
    position: absolute;
    width: 8.05%;
    right: 13%;
    top: 45%;
    transform: translate(-14%, 13%);
}

.map_product-img .malay-ic {
    position: absolute;
    width: 6.3%;
    right: 25%;
    bottom: 38%;
    transform: translate(-1%, 2%);
}

.map_product-img .sg-ic {
    position: absolute;
    width: 7.07%;
    right: 24%;
    bottom: 31%;
    transform: translate(-5%, -12%);
}

.map_product-img .id-ic {
    position: absolute;
    width: 6.88%;
    right: 14%;
    bottom: 31%;
    transform: translate(-1%, 3%);
}

.map_product-img .austra-ic {
    position: absolute;
    width: 6.44%;
    right: 9%;
    bottom: 16%;
    transform: translate(-3%, -5%);
}

.map_product-img .map-prod-title {
    font-family: var(--boxing-text-family);
    font-size: var(--boxing-text-size);
    color: var(--text-tertiary);
    position: absolute;
    left: 0;
    bottom: 0;
}


@media (min-width: 560px) and (max-width: 1024px) {
    .kat__map-homepage {
        padding: 40px 24px 80px;
    }

    .kat__map-homepage .inner .body-wrapper {
        border-radius: 24px;
    }
}

@media (max-width: 559px) {
    .kat__map-homepage {
        padding: 30px 24px 60px;
    }

    .kat__map-homepage .inner .body-wrapper {
        border-radius: 24px;
        padding: 16px;
    }
}

@media (min-width: 1080px) and (max-width: 1599px) {
    .kat__map-homepage .inner .body-wrapper {
        border-radius: 60px;
        max-width: 1000px;
        padding: 30px;
    }
}

/* ======================
    WEB INVITATION
====================== */
.kat__web-inv-homepage {
    position: relative;
    overflow: hidden;
    padding: 120px 80px;
    background: var(--background-tertiary);
}

.kat__web-inv-homepage .inner {
    position: relative;
    display: flex;
    flex-direction: row;
}

.kat__web-inv-homepage .inner .it-1,
.kat__web-inv-homepage .inner .it-2 {
    width: 100%;
}

.kat__web-inv-homepage .inner .it-1 {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 40px;
    justify-content: flex-start;
    align-items: flex-start;
}

.kat__web-inv-homepage .inner .it-1 .qq-wrap {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.kat__web-inv-homepage .inner .it-1 .ph-wrap {
    position: relative;
    width: 100%;
}

.kat__web-inv-homepage .inner .it-1 .kat__primary-button {
    margin: 0 auto;
}

.kat__web-inv-homepage .inner .it-2 {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.kat__web-inv-homepage .inner .it-1 .uw-typho-wrap {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.kat__web-inv-homepage .inner .it-1 .uw-typho-wrap h2.title-it {
    font-family: var(--gambarino-text-family);
    font-size: var(--gambarino-text-size);
    color: var(--text-primary);
}

.kat__web-inv-homepage .inner .it-1 .uw-typho-wrap p.desc-it {
    font-family: var(--body-text-family);
    font-size: var(--body-text-size-l);
    color: var(--text-primary);
}

.uiks-wrap {
    display: flex;
    gap: 12px;
    justify-content: flex-start;
}

.uiks-wrap p {
    font-family: var(--body-text-family);
    font-size: var(--body-text-size-m);
    color: var(--text-secondary);
    line-height: 133%;
    font-weight: 600;
}

.uiks-ita-wrap {
    display: flex;
    flex-direction: row;
    gap: 12px;
    justify-content: center;
}

.uiks-ita {
    display: flex;
    gap: 12px;
    justify-content: flex-start;
}

.uiks-ita .star-icon {
    width: 20px;
    height: 20px;
}

.kat__web-inv-homepage .inner .it-1 .phone-uw {
    position: relative;
    width: 46.2%;
    padding-bottom: 10%;
}

.it-1 .phone-uw .uphone-1 {
    position: absolute;
    width: 100%;
    bottom: 0;
    right: 0%;
    transform: translate(75%, 0%);
}

.it-1 .phone-uw .uphone-2 {
    position: absolute;
    width: 82.35%;
    top: 27%;
    right: 0%;
    transform: translate(9%, 0%);
}

.it-1 .phone-uw .uphone-3 {
    position: absolute;
    width: 126.35%;
    top: 0%;
    left: 0%;
    transform: translate(65%, 38%);
}

.it-1 .phone-uw .uphone-4 {
    position: absolute;
    width: 76.83%;
    bottom: 0%;
    left: 0%;
    transform: translate(70%, 0%);
}

.kat__web-inv-homepage .inner .it-2 .uw-item-wrap {
    display: flex;
    position: relative;
}

.kat__web-inv-homepage .inner .it-2::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 100%;
    bottom: 0;
    left: 0;
    background: linear-gradient(90deg, rgba(250, 182, 203, 0.00) 0%, #FAB6CB 50%, rgba(250, 182, 203, 0.00) 100%);
}

.kat__web-inv-homepage .inner .it-2::before {
    content: '';
    position: absolute;
    width: 2px;
    height: 100%;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0%);
    background: linear-gradient(90deg, rgba(250, 182, 203, 0.00) 0%, #FAB6CB 50%, rgba(250, 182, 203, 0.00) 100%);
}

.kat__web-inv-homepage .inner .it-2 .uw-item-wrap.ut-1::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0;
    background: linear-gradient(90deg, rgba(250, 182, 203, 0.00) 0%, #FAB6CB 50%, rgba(250, 182, 203, 0.00) 100%);
}


.kat__web-inv-homepage .inner .it-2 .uw-item-wrap .uw-inner {
    display: flex;
    flex-direction: column;
    gap: 16px;
    justify-content: space-between;
    padding: 16px 24px;
    flex: 1;
}

.kat__web-inv-homepage .inner .it-2 .uw-item-wrap .uw-inner .wp-ty {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.kat__web-inv-homepage .inner .it-2 .uw-item-wrap .uw-inner h4 {
    font-family: var(--gambarino-text-family);
    font-size: var(--gambarino-text-size-s);
    color: var(--text-secondary);
}

.kat__web-inv-homepage .inner .it-2 .uw-item-wrap .uw-inner p {
    font-family: var(--body-text-family);
    font-size: var(--body-text-size-s);
    color: var(--neutral-90);
    line-height: 140%;
}

.uiks-wrap.sm {
    display: none;
}

@media (min-width: 1080px) and (max-width: 1440px) {}

@media (min-width: 560px) and (max-width: 1024px) {
    .kat__web-inv-homepage {
        padding: 120px 24px;
    }

    .kat__web-inv-homepage .inner {
        flex-direction: column;
        gap: 30px;
    }

    .kat__web-inv-homepage .inner .it-1 {
        gap: 30px;
    }

    .kat__web-inv-homepage .inner .it-1 .qq-wrap {
        flex-direction: row;
        gap: 24px;
    }

    .kat__web-inv-homepage .inner .it-1 .uw-typho-wrap {
        width: 50%;
    }

    .kat__web-inv-homepage .inner .it-1 .uw-typho-wrap .uiks-wrap {
        display: none;
    }

    .kat__web-inv-homepage .inner .it-1 .phone-uw {
        width: 41.2%;
        padding-bottom: 5%;
    }

    .uiks-wrap.sm {
        display: flex;
    }

    .kat__web-inv-homepage .inner .it-1 .kat__primary-button {
        margin: 0;
    }

    .kat__web-inv-homepage .inner .it-2 .uw-item-wrap {
        flex-direction: column;
    }

    .kat__web-inv-homepage .inner .it-2 .uw-item-wrap .uw-inner {
        flex-direction: row;
        position: relative;
        padding: 20px 0;
    }

    .kat__web-inv-homepage .inner .it-2 .uw-item-wrap .uw-inner::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 2px;
        bottom: 0;
        background: linear-gradient(90deg, rgba(250, 182, 203, 0.00) 0%, #FAB6CB 50%, rgba(250, 182, 203, 0.00) 100%);
    }

    .kat__web-inv-homepage .inner .it-2 .uw-item-wrap .uw-inner .wp-ty {
        width: 60%;
        justify-content: center;
    }

    .uw-item-img {
        width: 40%;
    }

    .kat__web-inv-homepage .inner .it-2::after {
        display: none;
    }

    .kat__web-inv-homepage .inner .it-2 .uw-item-wrap.ut-1::after {
        display: none;
    }

    .kat__web-inv-homepage .inner .it-2::before {
        display: none;
    }
}

@media (max-width: 559px) {
    .kat__web-inv-homepage {
        padding: 60px 24px;
    }

    .kat__web-inv-homepage .inner {
        flex-direction: column;
        gap: 20px;
    }

    .kat__web-inv-homepage .inner .it-1 {
        gap: 30px;
    }

    .kat__web-inv-homepage .inner .it-1 .qq-wrap {
        flex-direction: column;
        gap: 24px;
    }

    .kat__web-inv-homepage .inner .it-1 .uw-typho-wrap {
        width: 100%;
        align-items: center;
        text-align: center;
    }

    .kat__web-inv-homepage .inner .it-1 .uw-typho-wrap .uiks-wrap {
        display: none;
    }

    .kat__web-inv-homepage .inner .it-1 .phone-uw {
        width: 41.2%;
        padding-bottom: 5%;
        margin-left: 12%;
    }

    .uiks-wrap.sm {
        display: flex;
        flex-direction: column;
        margin: auto;
    }

    .kat__web-inv-homepage .inner .it-2 .uw-item-wrap {
        flex-direction: column;
    }

    .kat__web-inv-homepage .inner .it-2 .uw-item-wrap .uw-inner {
        flex-direction: column-reverse;
        position: relative;
        padding: 16px 0;
        align-items: center;
        text-align: center;
    }

    .kat__web-inv-homepage .inner .it-2 .uw-item-wrap .uw-inner::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 2px;
        bottom: 0;
        background: linear-gradient(90deg, rgba(250, 182, 203, 0.00) 0%, #FAB6CB 50%, rgba(250, 182, 203, 0.00) 100%);
    }

    .kat__web-inv-homepage .inner .it-2 .uw-item-wrap .uw-inner .wp-ty {
        width: 100%;
    }

    .uw-item-img {
        width: 85%;
    }

    .kat__web-inv-homepage .inner .it-2::after {
        display: none;
    }

    .kat__web-inv-homepage .inner .it-2 .uw-item-wrap.ut-1::after {
        display: none;
    }

    .kat__web-inv-homepage .inner .it-2::before {
        display: none;
    }
}


/* ======================
    BUKU TAMU DIGITAL
====================== */
.kat__buku-tamu-homepage {
    position: relative;
    overflow: hidden;
    padding: 60px 80px;
}

.kat__buku-tamu-homepage .inner {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: center;
}

.kat__buku-tamu-homepage .inner .top-wrapper-it {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.kat__buku-tamu-homepage .inner .top-wrapper-it h4 {
    font-family: var(--gambarino-text-family);
    font-size: var(--gambarino-text-size);
    color: var(--text-primary);
}

.kat__buku-tamu-homepage .top-wrapper-it p {
    font-family: var(--body-text-family);
    font-size: var(--body-text-size-l);
    color: var(--text-primary);
}

.kat__buku-tamu-homepage .inner .bt-box-wrapper {
    display: flex;
    gap: 36px;
    justify-content: center;
    max-width: 1200px;
    margin: auto;
}

.kat__buku-tamu-homepage .inner .bt-box-wrapper .bt-line-item {
    min-width: 2px;
    width: 2px;
    height: auto;
    position: relative;
    background: linear-gradient(0deg, rgba(250, 182, 203, 0.00) 0%, #FAB6CB 50%, rgba(250, 182, 203, 0.00) 100%);
}

.kat__buku-tamu-homepage .inner .bt-box-wrapper .bt-box-item {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    align-items: center;
    text-align: center;
}

.kat__buku-tamu-homepage .inner .bt-box-wrapper .bt-box-item .bt-box-icon {
    width: clamp(40px, 35%, 80px);
}

.kat__buku-tamu-homepage .inner .bt-box-wrapper .bt-box-item p {
    font-family: var(--body-text-family);
    font-size: var(--body-text-size-s);
    color: var(--neutral-90);
    font-weight: 500;
    line-height: 140%;
}


.dash-item-1-wrap {
    position: relative;
    padding: 40px;
    border-radius: 60px;
    background: var(--background-secondary);
    width: 70%;
    overflow: hidden;
    max-width: 1200px;
    margin: auto;
}

.dash-item-1 {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    border-radius: 40px;
}


@media (min-width: 560px) and (max-width: 1024px) {
    .kat__buku-tamu-homepage {
        padding: 80px 24px;
    }

    .dash-item-1-wrap {
        padding: 24px;
        border-radius: 40px;
        width: 100%;
    }

    .dash-item-1 {
        border-radius: 20px;
    }

    .kat__buku-tamu-homepage .inner .bt-box-wrapper {
        flex-wrap: wrap;
    }

    .kat__buku-tamu-homepage .inner .bt-box-wrapper .bt-box-item {
        width: 23%;
    }

    .kat__buku-tamu-homepage .inner .top-wrapper-it{
        gap: 16px;
    }
}

@media (max-width: 559px) {
    .kat__buku-tamu-homepage {
        padding: 60px 24px;
    }

    .dash-item-1-wrap {
        padding: 16px;
        border-radius: 40px;
        width: 100%;
    }

    .dash-item-1 {
        border-radius: 20px;
    }

    .kat__buku-tamu-homepage .inner .bt-box-wrapper {
        flex-wrap: wrap;
        max-width: 342px;
    }

    .kat__buku-tamu-homepage .inner .bt-box-wrapper .bt-box-item {
        width: 34%;
    }

    .kat__buku-tamu-homepage .inner .bt-box-wrapper .bt-box-item p {
        font-size: calc(var(--body-text-size-s) - 2px);
    }
}


/* ======================
    FITUR BARU WEB INVITATION
====================== */
.fitur-baru-wrapper {
    background: var(--background-primary);
}

.fitur-baru-wrapper-inner {}

.kat__fitur-baru-web-invitation {
    display: flex;
    flex-direction: column;
}

.fitur-baru-swiper {
    height: 100%;
    width: 100%;
}

.kat__fitur-baru-web-invitation .fb-slide-inner {
    height: 100%;
    position: relative;
    overflow: hidden;
    padding: 80px;
    padding-top: 32px;
    display: flex;
    flex-direction: column;
    gap: clamp(24px, 6%, 40px);
    background: var(--background-primary);
    border-radius: 40px 40px 0 0;
}

.kat__fitur-baru-web-invitation .fb-slide-inner .header {
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.kat__fitur-baru-web-invitation .fb-slide-inner .header h1 {
    font-family: var(--gambarino-text-family);
    font-size: var(--gambarino-text-size);
    color: var(--text-primary);
}

.kat__fitur-baru-web-invitation .fb-slide-inner .header p.desc {
    font-family: var(--body-text-family);
    font-size: var(--body-text-size-l);
    color: var(--text-primary);
}

.kat__fitur-baru-web-invitation .fb-slide-inner .body {
    display: flex;
    gap: 40px;
    flex: 1;
}

.kat__fitur-baru-web-invitation .fb-slide-inner .body>div {
    flex: 1;

}

.kat__fitur-baru-web-invitation .fb-slide-inner .body .fb-item-wrap {
    display: flex;
    gap: 40px;
    flex: 2;
}

.kat__fitur-baru-web-invitation .fb-slide-inner .body .fb-item-1 {
    display: flex;
    gap: 4px;
    max-width: 360px;
}

.kat__fitur-baru-web-invitation .fb-slide-inner .body .fb-item-1 p {
    color: var(--blue-main);
    font-weight: 600;
    font-size: var(--body-text-size-m);
}

/* no pinned  */
.kat__fitur-baru-web-invitation.no-pinned {
    height: unset !important;
}

.kat__fitur-baru-web-invitation.no-pinned .fitur-baru-slide-wrapper {
    flex-direction: column;
}

.kat__fitur-baru-web-invitation.no-pinned .fitur-baru-slide-wrapper .fitur-baru_slide .header {
    display: none;
}

.kat__fitur-baru-web-invitation.no-pinned .fitur-baru-slide-wrapper .fitur-baru_slide:first-of-type .header {
    display: flex;
    align-items: center;
    text-align: center;
}

.kat__fitur-baru-web-invitation.no-pinned .fb-slide-inner .body .fb-item-2 {
    height: 220px;
}

.fb-step-subtitle {
    display: none;
    color: var(--blue-main);
    font-weight: 600;
    font-size: var(--body-text-size);
}

.fb-item-1 .fb-step-wrap {
    position: relative;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

.fb-item-1 .fb-step-wrap .fb-step-dot {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1px solid #000000;
    background: linear-gradient(180deg, #DBF1FF 0%, #83BCE0 100%);
}

.fb-item-1 .fb-step-wrap .fb-step-line {
    width: 1px;
    background: var(--blue-border);
    position: relative;
    height: 100%;
}

.kat__fitur-baru-web-invitation .fb-slide-inner .body .fb-item-2 {
    position: relative;
    border-radius: 28px;
    border: 3px solid #000;
    background: var(--pink-main);
    width: 75%;
    height: 100%;
    max-width: 543px;
    overflow: hidden;
}

.fb-item-2 .fb-item-2-img {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    transform: translate(0%, -8%);
}

.kat__fitur-baru-web-invitation .fb-slide-inner .body .fb-item-3 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: clamp(12px, 7%, 32px);
    width: 100%;
}

.fb-item-3 .fb-item-3-logo {
    width: 80px;
    position: relative;
}

.fb-item-3 .fb-item-3-title {
    font-family: var(--gambarino-text-family);
    font-size: var(--gambarino-text-size-s);
}

.fb-item-3 .fb-item-3-desc {
    font-family: var(--body-text-family);
    font-size: var(--body-text-size-m);
}

@media (max-width: 960px) {
    .kat__fitur-baru-web-invitation .fb-slide-inner {
        background: unset;
        border-radius: unset;
    }
}

@media (min-width: 1441px) and (max-width: 1599px) {
    .kat__fitur-baru-web-invitation .fb-slide-inner {
        gap: clamp(24px, 3%, 40px);
        padding-bottom: 40px;
    }

    .fb-item-3 .fb-item-3-logo {
        width: 60px;
    }

    .kat__fitur-baru-web-invitation .fb-slide-inner .body .fb-item-3 {
        gap: 4px;
    }

    .kat__primary-button div {
        padding: 20px;
    }
}

@media (min-width: 1921px) {
    .kat__fitur-baru-web-invitation .fb-slide-inner .body .fb-item-2 {
        max-width: unset;
        width: 100%;
    }

    .kat__fitur-baru-web-invitation .fb-slide-inner .body .fb-item-1 {
        min-width: 360px;
        max-width: 360px;
    }

    .kat__fitur-baru-web-invitation .fb-slide-inner .body>div {
        flex: unset;
    }
}

@media (min-width: 1080px) and (max-width: 1440px) {
    .kat__fitur-baru-web-invitation .fb-slide-inner .body>div {
        flex: unset;

    }

    .kat__fitur-baru-web-invitation .fb-slide-inner .body .fb-item-1 {
        max-width: 160px;
        min-width: 160px;
    }

    .kat__fitur-baru-web-invitation .fb-slide-inner .body {
        gap: 16px;
    }

    .kat__fitur-baru-web-invitation .fb-slide-inner {
        gap: clamp(24px, 3%, 40px);
        padding-bottom: 40px;
    }

    .fb-item-3 .fb-item-3-logo {
        width: 50px;
    }

    .kat__fitur-baru-web-invitation .fb-slide-inner .body .fb-item-3 {
        gap: 4px;
    }

    .kat__primary-button div {
        padding: 14px;
    }
}

@media (min-width: 560px) and (max-width: 1079px) {
    .kat__fitur-baru-web-invitation .fb-slide-inner {
        padding: 32px 24px 32px;
        gap: 40px;
    }

    .kat__fitur-baru-web-invitation .fb-slide-inner .body {
        gap: 24px;
    }

    .kat__fitur-baru-web-invitation .fb-slide-inner .body .fb-item-wrap {
        flex-direction: column;
        gap: 12px;
    }

    .kat__fitur-baru-web-invitation .fb-slide-inner .body .fb-item-2 {
        /* width: 100%; */
        max-height: 500px;
    }

    .kat__fitur-baru-web-invitation .fb-slide-inner .body>div {
        flex: unset;
    }

    .kat__fitur-baru-web-invitation .fb-slide-inner .body .fb-item-1 {
        min-width: 205px;
        max-width: 205px;
    }

    .fb-item-3 .fb-item-3-logo {
        width: 60px;
    }

    .kat__fitur-baru-web-invitation .fb-slide-inner .header{
        gap: 20px;
    }

    .kat__fitur-baru-web-invitation.no-pinned .fitur-baru-slide-wrapper {
        padding-bottom: 44px;
    }

    /* .kat__fitur-baru-web-invitation .fb-slide-inner .body .fb-item-1 p {
        display: none;
    } */

    /* .fb-step-subtitle {
        display: block;
    } */
}

@media (max-width: 559px) {
    .fitur-baru-wrapper-inner {}

    .kat__fitur-baru-web-invitation .fb-slide-inner {
        padding: 14px 24px;
        gap: 40px;
    }

    .kat__fitur-baru-web-invitation .fb-slide-inner .body {
        display: flex;
        gap: 16px;
    }

    .kat__fitur-baru-web-invitation .fb-slide-inner .body .fb-item-wrap {
        flex-direction: column;
        gap: 12px;
    }

    .fb-item-3 .fb-item-3-logo {
        width: 40px;
    }

    .kat__fitur-baru-web-invitation .fb-slide-inner .body>div {
        flex: unset;
    }

    .kat__fitur-baru-web-invitation .fb-slide-inner .body .fb-item-1 p {
        display: none;
    }

    .fb-step-subtitle {
        display: block;
    }

    .kat__fitur-baru-web-invitation.no-pinned .fitur-baru-slide-wrapper {
        padding-bottom: 44px;
    }
    .kat__fitur-baru-web-invitation .fb-slide-inner .header {
        gap: 16px;
    }
}

/* ======================
    WHY US
====================== */
.why-us-wrap {
    position: relative;
    height: auto;
    width: 100%;
}

.why-us-wrap::before {
    content: '';
    position: relative;
    background: var(--divider-2) repeat-x;
    display: block;
    background-size: cover;
    width: 100%;
    height: 34px;
}

.why-us-wrap::after {
    content: '';
    position: relative;
    background: var(--divider-2) repeat-x;
    display: block;
    background-size: cover;
    width: 100%;
    height: 34px;
}

.kat__why-homepage {
    position: relative;
    overflow: hidden;
    padding: 60px 80px;
    background: var(--background-extend-primary);
}

.kat__why-homepage .inner {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: center;
}

.kat__why-homepage .inner .header {
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: center;
    max-width: 1200px;
    margin: auto;
}

.kat__why-homepage .inner .header h4 {
    font-family: var(--gambarino-text-family);
    font-size: var(--gambarino-text-size);
    color: var(--text-primary);
}

.kat__why-homepage .inner .header p {
    font-family: var(--body-text-family);
    font-size: var(--body-text-size-l);
    color: var(--text-primary);
    line-height: 128%;
}

.kat__why-homepage .inner .body {
    position: relative;
    display: flex;
    gap: 24px;
}

.kat__why-homepage .inner .body .why-tem:nth-child(1) {
    background-color: var(--light-green-main);
}

.kat__why-homepage .inner .body .why-tem:nth-child(2) {
    background-color: var(--purple-main);
}

.kat__why-homepage .inner .body .why-tem:nth-child(3) {
    background-color: var(--light-blue-main);
}

.kat__why-homepage .inner .body .why-tem:nth-child(4) {
    background-color: var(--pink-main);
}

.kat__why-homepage .inner .body .why-tem {
    padding: 32px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    border-radius: 28px;
    border: 3px solid #000;
    width: 100%;
    text-align: center;
    word-break: break-word;
}

.kat__why-homepage .inner .body .why-tem h3 {
    font-family: var(--boxing-text-family);
    font-size: var(--boxing-text-size-s);
    color: var(--text-primary);
}

.kat__why-homepage .inner .body .why-tem p {
    font-family: var(--body-text-family);
    font-size: var(--body-text-size-s);
    line-height: 140%;
    color: #000000;
}

@media (min-width: 560px) and (max-width: 1080px) {
    .kat__why-homepage {
        padding: 60px 24px;
    }

    .kat__why-homepage .inner .body {
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }

    .kat__why-homepage .inner .body .why-tem {
        width: 48%;
    }

    .kat__why-homepage .inner .body .why-tem h3 {
        font-size: 32px;
    }
}

@media (max-width: 559px) {
    .kat__why-homepage {
        padding: 60px 24px;
    }

    .kat__why-homepage .inner .body {
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }

    .kat__why-homepage .inner .body .why-tem {
        width: 100%;
    }

    .kat__why-homepage .inner .body .why-tem h3 {
        font-size: 30px;
    }
}


/* ==============================
        Landing - Live Wedding
============================== */

/* six */
.six-wrapper {
    padding: 80px 0px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--background-primary);
}

.six-inner a.guide {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 12px 24px;
    font-family: var(--inter);
    font-size: 18px;
    line-height: 1.4;
    font-weight: 600;
    border: 1px solid var(--neutral);
    border-radius: 50px;
    background: #EB2F59;
    color: #fff;
    text-decoration: none;
    text-align: center;
    transition: 0.2s ease-in;
    max-width: 260px;
    margin: 45px auto 0;
    display: none;
}

.six-inner a.guide>svg {
    display: block;
    width: 24px;
    height: 24px;
}

.six-inner a.guide>svg path {
    fill: #fff;
}

.six-inner a.guide:hover {
    background: #F7456D;
}

.six-inner a.guide:focus {
    background: #F7456D;
}

/* inner */
.six-wrapper .six-inner {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* live wedding */
.lw-wrapper {
    margin-bottom: 25px;
}

.lw-wrapper:last-of-type {
    margin-bottom: 0px;
}

/* live wedding head */
.lw-wrapper .lw-head {
    padding: 0 10%;
}

.lw-wrapper .lw-head.desktop {
    display: none;
}

.lw-head .lw-title {
    font-family: var(--gambarino-text-family);
    font-size: calc(var(--gambarino-text-size));
    color: var(--text-secondary);
    text-align: center;
    max-width: 1200px;
    margin: auto;
}

.lw-head .lw-title>span {
    color: var(--text-primary);
    font-family: inherit;
}

/* live wedding body */
.lw-wrapper .lw-body {
    position: relative;
    padding-top: 40px;
}

.lw-body .lw-item-wrap {
    padding: 0;
    display: flex;
}

/* live wedding item */
.lw-item-wrap .lw-item {
    padding: 0;
    padding-left: 16px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: all 0.25s ease-in-out;
}

.lw-item .img-wrap {}

.lw-item .img-wrap .img {
    width: 240px;
    height: 240px;
    display: block;
    margin: 0 auto;
    border-radius: 24px;
    border: 3px solid #000;
    background: #FFF;
    object-position: center;
    object-fit: cover;
    transition: all 0.25s ease-in-out;
}

.lw-item .caption-wrap {
    text-align: center;
}

.lw-item .caption-wrap .title {
    font-size: var(--body-text-size-m);
    font-weight: 700;
    line-height: 133%;
    margin-bottom: 8px;
    text-overflow: ellipsis;
}

.lw-item .caption-wrap .title>a {
    display: inline-block;
    vertical-align: top;
    text-decoration: none;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    transition: all 0.15s ease-out;
}

.lw-item .caption-wrap .title>a:hover {
    color: var(--primary-clr);
}

.lw-item .caption-wrap .date {
    font-size: calc(var(--body-text-size-s));
    font-weight: 400;
}


@media (min-width: 560px) and (max-width: 1079px) {
    .lw-item .img-wrap .img {
        width: 200px;
        height: 200px;
    }

    .six-wrapper .six-inner {
        gap: 48px;
    }
}

@media (max-width: 559px) {
    .six-wrapper{
        padding: 60px 0;
    }
    .lw-item .img-wrap .img {
        width: 200px;
        height: 200px;
    }

    .six-wrapper .six-inner {
        gap: 48px;
    }

}

/* ======================
    CUSTOMER SERVICE
====================== */

.kat__cs-homepage {
    position: relative;
    overflow: hidden;
    padding: 60px 80px;
    background: var(--background-secondary);
    border-top: 5px solid var(--primary-main);
}

.kat__cs-homepage .inner {
    position: relative;
    display: flex;
    flex-direction: column;
    /* gap: 40px; */
}

.kat__cs-homepage .inner .cs_title {
    font-family: var(--boxing-text-family);
    font-size: var(--boxing-text-size);
    color: var(--text-primary);
    text-align: center;
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 4%;
}

.kat__cs-homepage .inner .body-wrapper {
    position: relative;
    display: flex;
    gap: 35px;
    max-width: 1200px;
    margin: auto;
}

.kat__cs-homepage .inner .body-wrapper .cs-item-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 40px;
    border-radius: 80px;
    border: 3px solid #000;
    background: var(--background-primary);
    width: 100%;
}

.kat__cs-homepage .inner .body-wrapper .cs-item-wrap .itop-cs {
    position: relative;
    border-radius: 80px;
    background: var(--background-extend-primary);
    display: flex;
    overflow: hidden;
    flex: 1;
    padding: 26px 32px 26px 35%;
    text-align: right;
}

.body-wrapper .cs-item-wrap .itop-cs h3 {
    font-family: var(--gambarino-text-family);
    font-size: var(--gambarino-text-size);
    color: var(--text-primary);
    margin: auto 0;
}

.body-wrapper .cs-item-wrap .mincs {
    position: absolute;
    width: 44.6%;
    left: 0;
    bottom: 0;
    transform: translate(-8%, 4%);
}

.body-wrapper .cs-item-wrap .mincs-2 {
    position: absolute;
    width: 39.6%;
    left: 0;
    bottom: 0;
    transform: translate(-10%, 7%);
}

.body-wrapper .cs-item-wrap .idesc-cs {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px;
    padding-top: 0;
    gap: 12px;
    text-align: center;
}

.body-wrapper .cs-item-wrap .idesc-cs p {
    font-family: var(--body-text-family);
    color: var(--neutral-90);
    line-height: 133%;
    font-size: var(--body-text-size-m);
}

.cs-wave {
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    transform: translate(-50%);
    display: flex;
    flex-direction: column;
}

.cs-wave .image-wrap {
    margin-bottom: -1%;
}


@media (min-width: 560px) and (max-width: 1079px) {
    .kat__cs-homepage {
        padding: 40px 24px 60px;
    }

    .kat__cs-homepage .inner .cs_title {
        padding-bottom: 15%;
    }

    .cs-wave {
        width: 130%;
    }

    .kat__cs-homepage .inner .body-wrapper {
        flex-direction: column;
        max-width: 600px;
    }

    .kat__cs-homepage .inner .body-wrapper .cs-item-wrap .itop-cs {
        padding: 10% 32px 10% 42%;
    }
}

@media (max-width: 559px) {
    .kat__cs-homepage {
        padding: 40px 24px;
    }

    .kat__cs-homepage .inner .cs_title {
        padding-bottom: 20%;
    }

    .cs-wave {
        width: 180%;
    }

    .kat__cs-homepage .inner .body-wrapper {
        flex-direction: column;
    }

    .kat__cs-homepage .inner .body-wrapper .cs-item-wrap {
        border-radius: 40px;
        gap: 0px;
    }

    .kat__cs-homepage .inner .body-wrapper .cs-item-wrap .itop-cs {
        padding: 24px;
        padding-bottom: 0;
        flex-direction: column-reverse;
        text-align: center;
        border-radius: 40px;
    }

    .body-wrapper .cs-item-wrap .idesc-cs {
        padding: 24px;
    }

    .body-wrapper .cs-item-wrap .mincs {
        position: relative;
        transform: unset;
        margin: 0 auto;
        width: 59.6%;
        margin-bottom: -3%;
    }

    .body-wrapper .cs-item-wrap .mincs-2 {
        position: relative;
        transform: unset;
        margin: 0 auto;
        width: 59.6%;
        margin-bottom: -3%;
    }
}

/* ======================
    MITRA
====================== */
.kat__mitra-homepage {
    position: relative;
    overflow: hidden;
    background: var(--background-secondary);
}

.kat__mitra-homepage .inner {
    position: relative;
    background: var(--background-tertiary);
    padding: 120px 80px 80px;
    border-radius: 80px 80px 0px 0px;
}

.kat__mitra-homepage .body-mitra {
    display: flex;
    gap: 40px;
}

.kat__mitra-homepage .inner .it-1,
.kat__mitra-homepage .inner .it-2 {
    width: 100%;
    position: relative;
}

.kat__mitra-homepage .inner .it-1 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
}

.kat__mitra-homepage .inner .it-1 h3 {
    font-family: var(--gambarino-text-family);
    font-size: var(--gambarino-text-size);
    color: var(--text-primary);
}

.kat__mitra-homepage .inner .it-1 p {
    font-family: var(--body-text-family);
    font-size: var(--body-text-size-l);
    color: var(--text-primary);

}

.kat__mitra-homepage .inner .it-2 {
    display: flex;
    flex-direction: column;
}

.kat__mitra-homepage .inner .it-2 .uw-item-wrap {
    display: flex;
    position: relative;
    flex: 1;
}

.kat__mitra-homepage .inner .it-2::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 100%;
    bottom: 0;
    left: 0;
    background: linear-gradient(90deg, rgba(250, 182, 203, 0.00) 0%, #FAB6CB 50%, rgba(250, 182, 203, 0.00) 100%);
}

.kat__mitra-homepage .inner .it-2::before {
    content: '';
    position: absolute;
    width: 2px;
    height: 100%;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0%);
    background: linear-gradient(90deg, rgba(250, 182, 203, 0.00) 0%, #FAB6CB 50%, rgba(250, 182, 203, 0.00) 100%);
}

.kat__mitra-homepage .inner .it-2 .uw-item-wrap.ut-1::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0;
    background: linear-gradient(90deg, rgba(250, 182, 203, 0.00) 0%, #FAB6CB 50%, rgba(250, 182, 203, 0.00) 100%);
}


.kat__mitra-homepage .inner .it-2 .uw-item-wrap .uw-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    justify-content: space-between;
    padding: 16px;
    width: 100%;
}

.kat__mitra-homepage .inner .it-2 .uw-item-wrap .uw-inner .wp-ty {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.kat__mitra-homepage .inner .it-2 .uw-item-wrap .uw-inner .wp-ty .wdap {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.kat__mitra-homepage .inner .it-2 .uw-item-wrap .uw-inner .mitra-ic {
    width: 80px;
}

.kat__mitra-homepage .inner .it-2 .uw-item-wrap .uw-inner h4 {
    font-family: var(--body-text-family);
    font-size: var(--body-text-size-m);
    color: var(--text-secondary);
    font-weight: 600;
    line-height: 133%;
}

.kat__mitra-homepage .inner .it-2 .uw-item-wrap .uw-inner p {
    font-family: var(--body-text-family);
    font-size: var(--body-text-size-s);
    color: var(--neutral-90);
}

.kat__mitra-homepage::after {
    content: '';
    position: absolute;
    bottom: 0;
    background: var(--divider-4) repeat-x;
    display: block;
    background-size: cover;
    width: 100%;
    height: 34px;
}

@media (max-width: 1079px) {
    .kat__mitra-homepage .body-mitra {
        display: flex;
        gap: 12px;
    }
}

@media (min-width: 560px) and (max-width: 1079px) {
    .kat__mitra-homepage .inner {
        padding: 60px 24px 100px;
    }

    .kat__mitra-homepage .body-mitra {
        flex-direction: column;
    }

    .kat__mitra-homepage .inner .it-1 {
        align-items: center;
        text-align: center;
    }

    .kat__mitra-homepage .inner .it-2 .uw-item-wrap {
        flex-direction: column;
    }

    .kat__mitra-homepage .inner .it-2 .uw-item-wrap .uw-inner {
        padding: 24px 16px;
    }

    .kat__mitra-homepage .inner .it-2 .uw-item-wrap .uw-inner .wp-ty {
        flex-direction: column;
        gap: 12px;
        align-items: anchor-center;
        text-align: center;
    }

    .kat__mitra-homepage .inner .it-2 .uw-item-wrap .uw-inner .wp-ty .wdap {
        justify-content: center;
    }

    .kat__mitra-homepage .inner .it-2 .uw-item-wrap .uw-inner .mitra-ic {
        width: 60px;
        margin: auto;
    }

    .kat__mitra-homepage .inner .it-2::after {
        display: none;
    }

    .kat__mitra-homepage .inner .it-2 .uw-item-wrap.ut-1::after {
        display: none;
    }

    .kat__mitra-homepage .inner .it-2::before {
        display: none;
    }

    .kat__mitra-homepage .inner .uw-item-wrap .uw-inner::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 2px;
        bottom: 0;
        background: linear-gradient(90deg, rgba(250, 182, 203, 0.00) 0%, #FAB6CB 50%, rgba(250, 182, 203, 0.00) 100%);
    }
}

@media (max-width: 559px) {
    .kat__mitra-homepage .inner {
        padding: 60px 24px 85px;
        border-radius: 60px 60px 0px 0px;
    }

    .kat__mitra-homepage .body-mitra {
        flex-direction: column;
        gap: 25px;
    }

    .kat__mitra-homepage .inner .it-1 {
        align-items: center;
        text-align: center;
    }

    .kat__mitra-homepage .inner .it-2 .uw-item-wrap {
        flex-direction: column;
    }

    .kat__mitra-homepage .inner .it-2 .uw-item-wrap .uw-inner {
        padding: 12px 16px;
        padding-left: 0;
    }

    .kat__mitra-homepage .inner .it-2 .uw-item-wrap .uw-inner .wp-ty {
        flex-direction: row;
        gap: 12px;
    }

    .kat__mitra-homepage .inner .it-2 .uw-item-wrap .uw-inner .wp-ty .wdap {
        justify-content: center;
    }

    .kat__mitra-homepage .inner .it-2 .uw-item-wrap .uw-inner .mitra-ic {
        width: 60px;
    }

    .kat__mitra-homepage .inner .it-2::after {
        display: none;
    }

    .kat__mitra-homepage .inner .it-2 .uw-item-wrap.ut-1::after {
        display: none;
    }

    .kat__mitra-homepage .inner .it-2::before {
        display: none;
    }

    .kat__mitra-homepage .inner .uw-item-wrap .uw-inner::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 2px;
        bottom: 0;
        background: linear-gradient(90deg, rgba(250, 182, 203, 0.00) 0%, #FAB6CB 50%, rgba(250, 182, 203, 0.00) 100%);
    }
}

/* ======================
    MARQUEE 2
====================== */

.marquee-2 {
    position: relative;
    background-color: var(--background-extend-primary);
    padding: 80px 0;
    white-space: nowrap;
    overflow: hidden;
    border-top: 2px solid var(--background-extend-primary);
}

.marquee-inner {
    display: flex;
    flex-direction: row;
    gap: 80px;
    white-space: nowrap;
    justify-content: center;
    align-items: center;
    width: fit-content;
}

.marquee-2_item {
    width: 80px;
    height: auto;
    position: relative;
}

.marquee-2 .marquee-2-text {
    font-family: var(--boxing-text-family);
    font-size: calc(var(--boxing-text-size-s));
    font-weight: 400;
    color: var(--text-primary);

}

@media (min-width: 1281px) and (max-width: 1590px) {
    .marquee-2 {
        --boxing-text-size-s: 30px;
        padding: 25px 0;
    }
}

@media (min-width: 560px) and (max-width: 960px) {
    .marquee-2 {
        padding: 40px 0;
    }
}

@media (max-width: 559px) {
    .marquee-2 {
        padding: 40px 0;
    }

    .marquee-2_item {
        width: 40px;
    }
}