@import url('https://fonts.googleapis.com/css2?family=Fahkwang:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');

@font-face {
    font-family: "Clash Display";
    src: url("https://katstudio.id/fonts/ClashDisplay/ClashDisplay-Bold.otf") format("opentype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    line-height: normal;
}

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

section.katstudio-home button {
    cursor: pointer;
}

section.katstudio-home a {
    cursor: pointer;
    text-decoration: none;
}

body.katstudio-home {
    overflow-x: hidden;

    /* Clash Family */
    --clash-text-family: "Clash Display", serif;
    --clash-text-style: normal;
    --clash-text-weight: 400;
    --clash-text-size: 80px;
    --clash-text-size-xl: 140px;
    --clash-text-size-m: 60px;
    --clash-text-size-s: 32px;
    --clash-text-lettercase: none;

    /* body Text */
    --body-text-family: "Fahkwang", sans-serif;
    --body-text-style: normal;
    --body-text-weight: 400;
    --body-text-size: 32px;
    --body-text-size-xl: 80px;
    --body-text-size-m: 24px;
    --body-text-size-s: 18px;
    --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://katstudio.id/assets/mask-1.png");
    --divid: url("https://katstudio.id/assets/divid.png");
}

/* Fonts */
body.katstudio-home h1,
body.katstudio-home h2,
body.katstudio-home h3,
body.katstudio-home h4,
body.katstudio-home h5,
body.katstudio-home h6 {
    font-weight: normal;
    line-height: normal;
    color: var(--text-primary);
    font-family: var(--clash-text-family);
    word-break: break-word;
}

body.katstudio-home p {
    font-family: var(--body-text-family);
}

body.katstudio-home {
    /* Colors */
    --background-primary: #FFFDF7;
    --background-secondary: #151489;
    --background-tertiary: #5122BE;

    /* Text Colors */
    --text-primary: #151489;
    --text-secondary: #ED3D63;
    --text-tertiary: #FFFF;
    --text-quarternary: #EAA938;
}

.katstudio-inner {
    overflow-x: hidden;
    background: var(--background-primary);
}

.lg-hidden {
    display: 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 */
}

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

@media (min-width: 1600px) {
    body.katstudio-home {}
}

@media (min-width: 1441px) and (max-width: 1600px) {
    body.katstudio-home {
        /* Clash Family */
        --clash-text-size: 72px;
        --clash-text-size-xl: 120px;
        --clash-text-size-m: 52px;
        --clash-text-size-s: 28px;

        /* body Text */
        --body-text-size: 24px;
        --body-text-size-xl: 72px;
        --body-text-size-m: 24px;
        --body-text-size-s: 18px;
    }
}

@media (max-width: 1440px) {
    body.katstudio-home {
        /* Clash Family */
        --clash-text-size: 60px;
        --clash-text-size-xl: 110px;
        --clash-text-size-m: 48px;
        --clash-text-size-s: 24px;

        /* body Text */
        --body-text-size: 20px;
        --body-text-size-xl: 60px;
        --body-text-size-m: 20px;
        --body-text-size-s: 18px;
    }

    .lg-hidden {
        display: block;
    }
}

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

@media (min-width: 560px) and (max-width: 960px) {
    body.katstudio-home {
        /* Clash Family */
        --clash-text-size: 52px;
        --clash-text-size-xl: 80px;
        --clash-text-size-m: 40px;
        --clash-text-size-s: 20px;

        /* body Text */
        --body-text-weight: 400;
        --body-text-size: 18px;
        --body-text-size-xl: 52px;
        --body-text-size-m: 18px;
        --body-text-size-s: 16px;
    }
}

@media (max-width: 559px) {
    body.katstudio-home {
        /* Clash Family */
        --clash-text-size: 40px;
        --clash-text-size-xl: 60px;
        --clash-text-size-m: 28px;
        --clash-text-size-s: 18px;

        /* body Text */
        --body-text-weight: 400;
        --body-text-size: 14px;
        --body-text-size-xl: 40px;
        --body-text-size-m: 14px;
        --body-text-size-s: 14px;
    }
}



/* img */
body.katstudio-home 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;
}

.katstudio-btn {
    font-size: var(--body-text-size-m);
    font-family: var(--body-text-family);
    padding: 16px;
    border: none;
    border-radius: 16px;
    background: var(--text-quarternary);
    color: var(--text-primary);
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
}
.katstudio-btn:hover {
    background: var(--text-primary);
    color: var(--text-quarternary);
}

/* ======================
    HERO
====================== */
.katstudio-hero {
    position: relative;
    width: 100%;
    min-height: 100vh;
    padding: 24px;
}

.katstudio-hero .kdio-inner {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    border-radius: 80px;
    overflow: hidden;
    background: linear-gradient(123deg, #151489 30.19%, #151489 66.97%, #5122BE 100.7%);
}

.katstudio-hero .nav-hero {
    width: 100%;
    padding: 24px 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kdio-logo {
    position: relative;
    width: 120px;
    margin: 0 auto;
}

.katstudio-hero .content-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    padding: 2% 16% 7%;
}

.katstudio-hero .content-hero h1 {
    font-size: var(--clash-text-size-xl);
    color: var(--text-tertiary);
    font-weight: 700;
    text-align: center;
    max-width: 1200px;
}

.mask-hero {
    position: absolute;
    width: 100%;
    height: 100%;
    inset: 0;
    background-image: var(--hero-bg);
    background-repeat: repeat;
    background-size: 100% auto;
    opacity: 0.2;
}

.orn-hero-1 {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 31%;
    transform: translate(27%, -20%) rotate(-12deg);
}

.orn-hero-2 {
    position: absolute;
    right: 11%;
    bottom: 20%;
    width: 9%;
    transform: translate(7%, -25%) rotate(19.9deg);
}

.orn-hero-3 {
    position: absolute;
    left: 0;
    bottom: 7%;
    width: 10%;
    transform: translate(33%, -37%) rotate(-15.3deg);
}

.orn-hero-4 {
    position: absolute;
    left: 14%;
    bottom: 1%;
    width: 10%;
    transform: translate(-18%, -3%) rotate(7deg);
}

.orn-hero-5 {
    position: absolute;
    right: 15%;
    bottom: 13%;
    width: 12%;
    transform: translate(-14%, 14%);
}

.orn-hero-6 {
    position: absolute;
    left: 2%;
    bottom: 4%;
    width: 12%;
    transform: translate(0%, -20%);
}

.orn-hero-7 {
    position: absolute;
    left: 8%;
    top: 6%;
    width: 10%;
    transform: translate(-17%, 20%);
}

.orn-hero-8 {
    position: absolute;
    right: 0%;
    top: 0%;
    width: 13%;
    transform: translate(-34%, -11%);
}

@media (min-width: 1700px) {
    .orn-hero-3 {
        bottom: 9%;
    }
}

@media (min-width: 561px) and (max-width: 1080px) {
    .katstudio-hero .kdio-inner {
        border-radius: 60px;
    }

    .katstudio-hero .content-hero {
        align-items: flex-start;
        padding-top: 16%;
        padding-bottom: 36%;
    }

    .orn-hero-1 {
        width: 46%;
        transform: translate(39%, -61%) rotate(-11deg);
    }

    .orn-hero-2 {
        bottom: unset;
        right: 4%;
        top: 22%;
        width: 15%;
        transform: translate(18%, -25%) rotate(10.9deg);
    }

    .orn-hero-3 {
        bottom: 25%;
        width: 18%;
        transform: translate(-7%, -34%) rotate(12.3deg);
    }

    .orn-hero-4 {
        left: 1%;
        bottom: 2%;
        width: 18%;
        transform: translate(1%, -6%) rotate(-15deg);
    }

    .orn-hero-6 {
        left: 22%;
        bottom: 3%;
        width: 25%;
        transform: translate(0%, -20%);
    }

    .orn-hero-7 {
        width: 19%;
    }

    .orn-hero-5 {
        right: 11%;
        bottom: 8%;
        width: 19%;
        transform: translate(-17%, 20%);
    }


    .orn-hero-8 {
        position: absolute;
        right: 0%;
        top: 48%;
        width: 22%;
        transform: translate(-6%, 22%);
    }
}

@media (min-width: 1080px) and (max-width: 1180px) {
    .orn-hero-8{
        transform: translate(43%, -11%);
    }
}

@media (max-width: 560px) {
    .katstudio-hero {
        padding: 12px;
    }

    .katstudio-hero .kdio-inner {
        border-radius: 40px;
    }

    .katstudio-hero .content-hero {
        align-items: flex-start;
        padding: 24px;
        padding-top: 9%;
        padding-bottom: 77%;
    }

    .orn-hero-1 {
        width: 46.8%;
        transform: translate(37%, -42%) rotate(-11deg);
    }

    .orn-hero-2 {
        right: 20%;
        bottom: 0%;
        width: 19%;
        transform: translate(-30%, -6%) rotate(15deg);
        z-index: 2;
    }

    .orn-hero-3 {
        left: 0;
        bottom: 0;
        width: 20%;
        transform: translate(7%, -24%) rotate(11deg);
    }

    .orn-hero-4 {
        left: 20%;
        bottom: 0%;
        width: 19%;
        transform: translate(30%, -6%) rotate(-15deg);
    }

    .orn-hero-6 {
        left: 0%;
        top: 35%;
        width: 23%;
        transform: translate(0%, 40%);
        bottom: unset;
    }

    .orn-hero-7 {
        width: 22%;
        left: 0;
        transform: translate(-28%, 20%);
    }

    .orn-hero-5 {
        right: 14%;
        bottom: 25%;
        width: 22%;
        transform: translate(-35%, 29%);
        z-index: 3;
    }

    .orn-hero-8 {
        position: absolute;
        right: 0%;
        top: 48%;
        width: 22%;
        transform: translate(18%, 22%);
    }

}


/* ======================
    INTRO
====================== */
.katstudio-intro {
    position: relative;
    width: 100%;
    padding-top: 80px;
}

.katstudio-intro .kdio-inner {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.katstudio-intro .kdio-inner .content-top {
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: center;
    justify-content: center;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.katstudio-intro .kdio-inner .content-top h1 {
    font-size: var(--clash-text-size);
    text-transform: uppercase;
}

.katstudio-intro .kdio-inner .content-top p {
    font-size: var(--body-text-size);
    font-family: var(--body-text-family);
}

.katstudio-intro .kdio-inner .content-top p span {
    font-size: var(--body-text-size);
    position: relative;
    font-family: var(--clash-text-family);
    color: var(--text-primary);
}

.katstudio-intro .kdio-inner .content-top p span::before {
    content: '';
    position: absolute;
    background: var(--text-quarternary);
    width: 106%;
    height: 108%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
}

.katstudio-intro .kdio-inner .content-top button {
    font-size: var(--body-text-size-m);
    font-family: var(--body-text-family);
    padding: 16px;
    border: none;
    border-radius: 16px;
    background: var(--text-quarternary);
    color: var(--text-primary);
    font-weight: 500;
    cursor: pointer;
}

.katstudio-intro .kdio-inner .stand-katstudio {
    position: relative;
    width: 62%;
    max-width: 1200px;
    margin: 0 auto;
}

.orn-stand-1 {
    position: absolute;
    width: 19.9%;
    right: 0%;
    bottom: 31%;
    transform: translate(46%);
}

.orn-stand-2 {
    position: absolute;
    width: 19.9%;
    left: 0%;
    top: 0%;
    transform: translate(-50%, -18%);
}

@media (max-width: 560px) {
    .katstudio-intro {
        padding-top: 40px;
    }

    .katstudio-intro .kdio-inner .content-top {
        gap: 16px;
        padding: 0px 24px;
    }

    .katstudio-intro .kdio-inner .stand-katstudio {
        width: 85%;
    }

    .orn-stand-1 {
        width: 23%;
        right: 12%;
        top: 16%;
        transform: translate(50%);
        z-index: -1;
    }

    .orn-stand-2 {
        width: 23%;
        left: 0%;
        top: 0%;
        transform: translate(-25%, -100%);
    }
}

@media (min-width: 561px) and (max-width: 1180px) {
    .katstudio-intro .kdio-inner .content-top{
        padding: 0 60px;
    }
}

/* ======================
    CTA
====================== */
.katstudio-cta {
    position: relative;
    width: 100%;
    margin: 80px 0;
    padding: 0 80px;
    overflow: hidden;
    background: var(--background-primary);
}

.katstudio-cta .kdio-inner {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    justify-content: center;
}

.katstudio-cta .kdio-inner .cta-ct-wrapper {
    width: 100%;
    display: flex;
    gap: 40px;
}

.katstudio-cta .kdio-inner .cta-item-wrapper {
    width: 55%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.katstudio-cta .kdio-inner .cta-item-wrapper h2 {
    font-family: var(--body-text-family);
    font-size: var(--clash-text-size);
}

.katstudio-cta .kdio-inner .cta-item-wrapper p {
    font-family: var(--body-text-family);
    font-size: var(--body-text-size);
    line-height: 125%;
    color: #0A0A0A;
}

.katstudio-cta .kdio-inner .cta-item-wrapper p span {
    font-family: var(--body-text-family);
    font-size: var(--body-text-size);
    line-height: 125%;
    color: var(--text-secondary);
}

.katstudio-cta .kdio-inner .cta-img {
    position: relative;
    width: 72%;
    height: fit-content;
}

.katstudio-cta .kdio-inner .orn-cta-img {
    position: absolute;
    width: 99%;
    bottom: 0%;
    left: 50%;
    transform: translate(-54%, 12%);
}

.katstudio-cta .kdio-inner .cta-card-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.katstudio-cta .kdio-inner .cta-card-inner {
    top: 0;
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    overflow-x: visible;
    padding: 0 10px;
    pointer-events: none;
}

.katstudio-cta .cta-card-wrapper .cta-card {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    /* opacity: 0; */
    /* transform: scale(0.95); */
    /* transition: all 0.3s ease; */

    display: flex;
    gap: 16px;
    padding: 40px;
    border-radius: 40px;
    background: #FFF;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10);
}

.katstudio-cta .cta-card-wrapper .cta-card:nth-child(6) {
    margin-bottom: 20%;
}

.katstudio-cta .cta-card-wrapper .cta-card .cta-number {
    border-radius: 999px;
    border: 1px solid var(--text-secondary);
    background: #FFF;
    min-width: 40px;
    height: 40px;
    text-align: center;

    padding: 8px;
    color: var(--text-secondary);
}

.katstudio-cta .cta-card-wrapper .cta-card .cta-item {
    display: flex;
    gap: 12px;
    flex-direction: column;
}

.katstudio-cta .cta-card-wrapper .cta-card .cta-item h5 {
    font-family: var(--body-text-family);
    font-size: var(--body-text-size);
    color: var(--text-secondary);
    line-height: 125%;
}


@media (min-width: 1081px) and (max-width: 1181px) {
    .katstudio-cta .kdio-inner .cta-item-wrapper{
        width: 50%;
    }
}
@media (min-width: 561px) and (max-width: 1080px) {
    .katstudio-cta {
        padding: 60px 40px;
        margin: 0;
    }

    .katstudio-cta .kdio-inner .cta-item-wrapper {
        width: 100%;
    }

    .katstudio-cta .kdio-inner .cta-item-wrapper p br {
        display: none;
    }

    .katstudio-cta .kdio-inner {
        flex-direction: column;
    }

    .katstudio-cta .kdio-inner .cta-card-inner {
        /* padding: 0; */
    }
}

@media (max-width: 560px) {
    .katstudio-cta {
        padding: 40px 24px;
        margin: 0;
    }

    .cta-card-wrapper {
        height: unset !important;
    }

    .katstudio-cta .kdio-inner .cta-item-wrapper {
        width: 100%;
    }

    .katstudio-cta .kdio-inner .cta-item-wrapper p br {
        display: none;
    }

    .katstudio-cta .kdio-inner {
        flex-direction: column;
    }

    .katstudio-cta .kdio-inner .cta-img {
        display: none;
    }

    .katstudio-cta .kdio-inner .cta-card-inner {
        position: relative;
        overflow: unset;
        padding: 0;
    }

}


/* ======================
    WHY US
====================== */
.katstudio-why {
    position: relative;
    width: 100%;
    padding: 80px 12.7%;
}

.katstudio-why .kdio-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: center;
    justify-content: center;
}

.katstudio-why .kdio-inner h1 {
    font-size: var(--clash-text-size);
    text-transform: uppercase;
    text-align: center;
}

.katstudio-why .kdio-inner h1 span {
    font-size: inherit;
    text-transform: inherit;
    font-family: inherit;
    color: var(--text-secondary);
}

.katstudio-why .kdio-inner .content-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.katstudio-why .content-wrapper .why-card-wrap {
    display: flex;
    gap: 40px;
    border-radius: 40px;
    background: #FFF;
    box-shadow: 0px 0px 100px 0px rgba(0, 0, 0, 0.10);
    max-width: 900px;
    width: 71%;
    padding: 60px;
    justify-content: space-between;
}

.katstudio-why .content-wrapper .why-card-wrap:nth-child(1) {
    margin-right: auto;
    transform: rotate(2deg);
}

.katstudio-why .content-wrapper .why-card-wrap:nth-child(2) {
    margin-left: auto;
    transform: rotate(-2deg);
    margin-top: -3%;
    margin-bottom: -2%;
}

.katstudio-why .content-wrapper .why-card-wrap:nth-child(3) {
    margin: auto;
    transform: rotate(4.901deg);
}

.why-card-wrap .why-card-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

.why-card-wrap .why-card-img {
    width: 30%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.why-card-wrap .why-card-content h4 {
    font-family: var(--body-text-family);
    font-size: var(--body-text-size);
    line-height: 125%;
}

.why-card-wrap .why-card-content p {
    font-family: var(--body-text-family);
    font-size: var(--body-text-size-m);
    line-height: 125%;
    color: #0A0A0A;
}


@media (min-width: 561px) and (max-width: 1080px) {
    .katstudio-why {
        padding: 40px;
    }

    .katstudio-why .content-wrapper .why-card-wrap {
        width: 90%;
        padding: 40px;
    }
}

@media (max-width: 560px) {
    .katstudio-why {
        padding: 24px;
        padding-bottom: 32px;
        gap: 12px;
    }

    .katstudio-why .content-wrapper .why-card-wrap {
        width: 100%;
        padding: 24px;
        flex-direction: column-reverse;
        gap: 24px;
        border-radius: 16px;
    }

    .why-card-wrap .why-card-content {
        gap: 12px;
    }

    .why-card-wrap .why-card-content h4 {
        font-size: 32px;
    }

    .why-card-wrap .why-card-img {
        width: 35%;
    }
}

/* ======================
    BASED IN
====================== */
.katstudio-based {
    position: relative;
    padding: 80px;
}

.katstudio-based .kdio-inner {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 400px auto 400px;
    gap: 24px;
    margin: 0 auto;
}

/* Override untuk baris 3 agar 2 foto setengah-setengah */
.rw-1-container {
    grid-column: 1 / -1;
    grid-row: 1;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 24px;
}

.rw-2-container {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 24px;
}

.rw-3-container {
    grid-column: 1 / -1;
    grid-row: 3;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.grid-based-item {
    border-radius: 40px;
    overflow: hidden;
    position: relative;
}

.grid-based-item.itbased-5 {
    overflow: unset;
    border-radius: unset;
}

.grid-based-item .image-wrap {
    height: 100%;
}

.grid-based-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.katstudio-based .promo-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
}

.katstudio-based .promo-content h2 {
    font-size: var(--clash-text-size-m);
    font-family: var(--clash-text-family);
    text-transform: uppercase;
    text-align: center;
}

.katstudio-based .promo-content h2 span {
    font-size: inherit;
    font-family: inherit;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.katstudio-based .promo-content p {
    font-size: var(--body-text-size);
    font-family: var(--body-text-family);
    text-align: center;
    line-height: 125%;
}

.dynamic-itbased {
    height: 100%;
}

.dynamic-itbased .image-wrap,
.dynamic-itbased .image-wrap img {
    height: 100%;
}

.dynamic-itbased .image-wrap img {
    position: absolute;
}

@media (min-width: 1081px) and (max-width: 1440px) {
    .katstudio-based {
        padding: 60px;
    }
}


@media (min-width: 561px) and (max-width: 1080px) {
    .katstudio-based {
        padding: 60px;
    }

    .katstudio-based .kdio-inner {
        grid-template-rows: 200px auto 320px;
    }

    .rw-2-container {
        grid-template-columns: 1fr;
        /* Jadi 1 kolom */
        grid-template-rows: 400px auto 400px;
        /* 3 baris */
    }
}

@media (max-width: 560px) {
    .katstudio-based {
        padding: 24px;
    }

    .katstudio-based .kdio-inner {
        grid-template-rows: auto;
    }

    .rw-1-container {
        grid-template-columns: 1fr;
        /* Jadi 1 kolom */
        grid-template-rows: 240px 240px 240px;
        /* 3 baris */
    }

    .rw-2-container {
        grid-template-columns: 1fr;
        /* Jadi 1 kolom */
        grid-template-rows: 240px auto 240px;
        /* 3 baris */
    }

    .rw-3-container {
        grid-template-columns: 1fr;
        /* Jadi 1 kolom */
        grid-template-rows: 240px 240px;
        /* 3 baris */
    }
}


/* ======================
    FEATURE
====================== */
.katstudio-feature {
    position: relative;
    padding: 80px;
}

.katstudio-feature .kdio-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: center;
    padding: 80px 120px;
    border-radius: 80px;
    background: linear-gradient(97deg, #151489 0%, #151489 50%, #5122BE 100%);
}

.katstudio-feature .kdio-inner .feature-title {
    font-family: var(--clash-text-family);
    font-size: var(--clash-text-size-m);
    color: var(--text-tertiary);
    text-transform: uppercase;
    text-align: center;
}

.katstudio-feature .kdio-inner .feature-title span {
    font-family: inherit;
    font-size: inherit;
    color: var(--text-quarternary);
    text-transform: inherit;
}

.katstudio-feature .kdio-inner .content-hero {
    width: 100%;
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.katstudio-feature .kdio-inner .content-hero .tag {
    border-radius: 99px;
    border: 1px solid var(--text-secondary);
    background: #FFF;
    box-shadow: 0px 0px 100px 0px rgba(0, 0, 0, 0.10);
    padding: 16px 40px;

    color: var(--text-secondary);
    font-size: var(--body-text-size-m);
    font-family: var(--body-text-family);
    line-height: 133%;
    text-align: center;
}

.orn-feature-1 {
    position: absolute;
    width: 11%;
    left: 2%;
    top: 28%;
    transform: translate(0%, 0%) rotate(90deg);
}


@media (min-width: 1081px) and (max-width: 1440px) {
    .katstudio-feature {
        padding: 40px;
    }

    .katstudio-feature .kdio-inner {
        padding: 80px 100px;
    }

    .orn-feature-1 {
        left: 5%;
    }
}

@media (min-width: 561px) and (max-width: 1080px) {
    .katstudio-feature {
        padding: 32px;
    }

    .katstudio-feature .kdio-inner {
        padding: 40px 24px;
    }

    .orn-feature-1 {
        width: 17%;
        left: 2%;
        top: 24%;
    }
}

@media (max-width: 560px) {
    .katstudio-feature {
        padding: 16px;
    }

    .katstudio-feature .kdio-inner {
        padding: 40px 24px;
        border-radius: 40px;
    }

    .katstudio-feature .kdio-inner .content-hero {
        flex-direction: column;
    }

    .katstudio-feature .kdio-inner .content-hero .tag {
        padding: 8px 16px;
        width: 100%;
    }

    .orn-feature-1 {
        width: 18%;
        top: 22%;
    }
}

/* ======================
    EXPERIENCE
====================== */
.katstudio-experience {
    position: relative;
    padding: 0 80px;
    overflow: hidden;
}

.katstudio-experience .kdio-inner {
    display: flex;
    gap: 80px;
    justify-content: space-around;
}

.katstudio-experience .kdio-inner .typhography-wrap {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
    justify-content: flex-start;
    width: 61%;
    padding: 220px 0;
}

.katstudio-experience .kdio-inner .typhography-wrap h1 {
    font-size: var(--clash-text-size);
    text-transform: uppercase;
}

.katstudio-experience .kdio-inner .typhography-wrap h1 span {
    position: relative;
    font-size: var(--clash-text-size);
    text-transform: uppercase;
    font-family: var(--clash-text-family);
}

.katstudio-experience .kdio-inner .typhography-wrap h1 span::before {
    content: '';
    position: absolute;
    background: var(--text-quarternary);
    width: 106%;
    height: 108%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
}

.katstudio-experience .kdio-inner .typhography-wrap p {
    font-size: var(--body-text-size);
    line-height: 125%;
    font-family: var(--body-text-family);
}

.katstudio-experience .kdio-inner .slider-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
    justify-content: flex-start;
    width: 27%;
    height: 100%;
}

.katstudio-experience .kdio-inner .slider-wrap .ex-slider-wrap {
    position: relative;
    height: 100%;
    width: 100%;
}

.katstudio-experience .kdio-inner .slider-wrap .ex-slider-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 130%;
    height: 30%;
    transform: translate(0%, -20%);
    background: linear-gradient(180deg, var(--background-primary) 0%, rgba(255, 253, 247, 0.00) 100%);
    z-index: 999;
}

.katstudio-experience .kdio-inner .slider-wrap .ex-slider-wrap .exp-slide {
    width: 100%;
    height: 600px;
    border-radius: 40px;
    border: 3px solid #151489;
    background: #FFF;
    overflow: hidden;
}

.katstudio-experience .kdio-inner .slider-wrap .ex-slider-wrap .exp-slide .img-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.katstudio-experience .kdio-inner .slider-wrap .ex-slider-wrap .exp-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.orn-exp-1 {
    position: absolute;
    width: 55.5%;
    left: 0%;
    bottom: 8%;
    transform: translate(-70%, 6%);
}

.orn-exp-2 {
    position: absolute;
    width: 39.5%;
    right: 0%;
    top: 8%;
    transform: translate(50%, 6%);
}


@media (max-width: 1080px) {
    .katstudio-experience {
        padding: 0 40px 60px;
    }

    .katstudio-experience .kdio-inner {
        flex-direction: column;
        gap: 40px;
    }

    .katstudio-experience .kdio-inner .typhography-wrap {
        width: 100%;
        padding: 0;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .katstudio-experience .kdio-inner .slider-wrap {
        width: 100%;
    }

    .katstudio-experience .kdio-inner .slider-wrap .ex-slider-wrap .exp-slide {
        width: 68%;
    }


    .katstudio-experience .kdio-inner .slider-wrap .ex-slider-wrap::after {
        content: unset;
    }

    .orn-exp-1 {
        width: 24.5%;
        left: 0%;
        bottom: 0%;
        transform: translate(10%, 26%);
    }

    .orn-exp-2 {
        width: 24.5%;
        right: 0%;
        top: 0%;
        transform: translate(0%, -11%);
    }
}

@media (max-width: 560px) {
    .katstudio-experience {
        padding: 24px;
    }

    .katstudio-experience .kdio-inner .slider-wrap .ex-slider-wrap .exp-slide {
        width: 68%;
        height: 325px;
        border-radius: 24px;
    }
}


/* ======================
    TESTIMONI SECTION
====================== */

.katstudio-testi {
    position: relative;
    overflow: hidden;
    padding: 80px;

    background: var(--background-secondary);
}

.katstudio-testi .kdio-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
}

.katstudio-testi .kdio-inner h1 {
    font-size: var(--clash-text-size);
    font-family: var(--clash-text-family);
    color: var(--text-quarternary);
    text-align: center;
    text-transform: uppercase;
}


.katstudio-testi .kdio-inner .body {
    max-width: 1200px;
    width: 80%;
    margin: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.katstudio-testi .kdio-inner .body .testi-swipper {
    position: relative;
}


.testi-paginiation-wrap {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 8px;
}

.testi-paginiation-wrap .testi-nav {
    width: 24px;
    height: 24px;
    cursor: pointer;
}

.testi-paginiation-wrap .swiper-pagination-bullets.swiper-pagination-horizontal.testi-pagination {
    width: unset;
    display: flex;
    gap: 8px;
}

.katstudio-testi .kdio-inner .slide-wrap {
    height: auto;
}

.testi-pagination .swiper-pagination-bullet {
    width: 16px;
    height: 16px;
    background: transparent;
    border-radius: 100px;
    border: 1px solid var(--background-primary);
    transition: width 0.3s ease, background 0.3s ease;
    opacity: 1;
}

.testi-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    width: 40px;
    height: 16px;
    background: var(--text-quarternary);
    border-radius: 100px;
}

.katstudio-testi .kdio-inner .testi-card {
    position: relative;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 40px;
    border-radius: 40px;
    background: var(--background-primary);
    box-shadow: 0px 0px 100px 0px rgba(0, 0, 0, 0.10);
    height: 100%;
    justify-content: space-between;
}

.katstudio-testi .kdio-inner .testi-card .testi-profile {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    gap: 12px;
}

.testi-profile .testi-img-wrap {
    width: 100px;
    height: 100px;
    overflow: hidden;
    border-radius: 140px;
    background: #FFF;
    
}
.testi-profile .testi-img-wrap .image-wrap,
.testi-profile .testi-img-wrap .image-wrap img{
    height: 100%;
    object-fit: cover;
}

.katstudio-testi .kdio-inner .testi-card .testi-biodata {
    display: flex;
    flex-direction: column;
    gap: 4px;

}

.katstudio-testi .kdio-inner .testi-card .testi-quote {
    font-family: var(--body-text-family);
    font-size: var(--body-text-size-m);
    color: var(--text-primary);
    line-height: 133%;
    font-weight: 400;
    font-family: var(--body-text-family);
}

.katstudio-testi .kdio-inner .testi-card .testi-biodata .testi-name {
    font-family: var(--body-text-family);
    font-size: var(--body-text-size);
    color: var(--text-secondary);
    line-height: 133%;
    font-weight: 400;
}

.katstudio-testi .kdio-inner .testi-card .testi-biodata .testi-as {
    font-family: var(--body-text-family);
    font-size: var(--body-text-size-s);
    color: #0A0A0A;
    line-height: 133%;
    font-weight: 400;
}


@media (min-width: 561px) and (max-width: 1080px) {
    .katstudio-testi {
        padding: 40px;
    }

    .katstudio-testi .kdio-inner .body {
        width: 100%;
    }
}

@media (max-width: 560px) {

    .katstudio-testi {
        padding: 24px;
    }

    .katstudio-testi .kdio-inner .body {
        width: 100%;
    }

    .testi-pagination .swiper-pagination-bullet {
        width: 12px;
        height: 12px;
    }

    .testi-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
        width: 34px;
        height: 12px;
    }

    .katstudio-testi .kdio-inner .testi-card {
        padding: 24px;
        border-radius: 20px;
    }

    .testi-paginiation-wrap {
        gap: 12px;
    }

    .testi-paginiation-wrap .swiper-pagination-bullets.swiper-pagination-horizontal.testi-pagination {
        gap: 4px;
    }

    .testi-profile .testi-img-wrap {
        width: 50px;
        height: 50px;
    }
}

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

.katstudio-foot {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;

    background: var(--background-secondary);
}

.katstudio-foot .footer-content-wrap {
    display: flex;
    flex-direction: column;
    gap: 16px;

    padding: 80px;
}

.katstudio-foot .footer-content-wrap .kdio-logo {
    position: relative;
    width: 10%;
    margin: auto;
}

.katstudio-foot .footer-content-wrap p {
    font-size: var(--body-text-size-m);
    font-family: var(--body-text-family);
    color: var(--text-tertiary);

    text-align: center;
    font-weight: 300;
}


.katstudio-foot .footer-content-bottom {
    width: 100%;
    display: flex;
    gap: 24px;
    align-items: center;
    padding: 28px 80px;
}

.katstudio-foot .footer-content-bottom .foot-inner {
    width: 100%;
    display: flex;
    gap: 16px;
}

.katstudio-foot .footer-content-bottom .foot-inner a {
    font-size: calc(var(--body-text-size-s) - 2px);
    color: var(--text-tertiary);
    text-decoration: none;
}

.katstudio-foot .footer-content-bottom .foot-sosmed-wrap {
    display: flex;
    gap: 16px;
}

.kdio-footdiv {
    position: relative;
    width: 100%;
    height: 10px;
    background-image: var(--divid);
    background-repeat: repeat-x;
    background-size: auto 100%;
}

@media (min-width: 561px) and (max-width: 1080px) {
    .katstudio-foot .footer-content-wrap {
        padding: 40px;
        padding-bottom: 24px;
    }

    .katstudio-foot .footer-content-bottom {
        padding: 24px 40px;
    }

    .katstudio-foot .footer-content-wrap .kdio-logo {
        width: 20%;
    }
}

@media (max-width: 560px) {
    .katstudio-foot .footer-content-wrap {
        padding: 24px;
        padding-bottom: 24px;
    }

    .katstudio-foot .footer-content-bottom {
        padding: 24px;
        flex-direction: column;
    }

    .katstudio-foot .footer-content-wrap .kdio-logo {
        width: 20%;
    }

    .katstudio-foot .footer-content-bottom .foot-inner {
        flex-direction: column;
        align-items: center;
    }
}