@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap');

@font-face {
    font-family: "Gambarino-Regular";
    src: url("https://katsudoto.id/plugin/fonts/Gambarino-Regular.otf") format("opentype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    line-height: normal;
}
@font-face {
    font-family: "Boxing-Regular";
    src: url("https://katsudoto.id/plugin/fonts/Boxing-Regular.otf") format("opentype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    line-height: normal;
}

:root {
    /* primary */
    --primary-pressed: #5F0421;
    --primary-hover: #8E0732;
    --primary-main: #ED0B53;
    --primary-border: #FAB6CB;
    --primary-surface: #FDE7EE;
    --primary-focused: #ED0B5333;

    /* secondary */
    --secondary-pressed: #433A0C;
    --secondary-hover: #A08C25;
    --secondary-main: #FEDE3E;
    --secondary-border: #FFF5C5;
    --secondary-surface: #FFFCEC;
    --secondary-focused: #FEDE3E33;

    /* Extended */
    --blue-pressed: #010C11;
    --blue-hover: #022533;
    --blue-main: #033D55;
    --blue-border: #519AB9;
    --blue-surface: #78C8EA;
    --blue-focused: #033D5533;

    --light-green-pressed: #4B7970;
    --light-green-hover: #8AB0A9;
    --light-green-main: #CAE7E1;
    --light-green-border: #EAF5F3;
    --light-green-surface: #F4FAF9;
    --light-green-focused: #CAE7E133;

    --light-blue-pressed: #2C87C1;
    --light-blue-hover: #83BCE0;
    --light-blue-main: #DBF1FF;
    --light-blue-border: #F1F9FF;
    --light-blue-surface: #F8FCFF;
    --light-blue-focused: #DBF1FF33;

    --yellow-pressed: #AFA127;
    --yellow-hover: #D7CD76;
    --yellow-main: #FFF9C5;
    --yellow-border: #FFFDE7;
    --yellow-surface: #FFFEF3;
    --yellow-focused: #FFF9C533;

    --light-yellow-pressed: #CBBE2E;
    --light-yellow-hover: #E5DD8B;
    --light-yellow-main: #FFFDE8;
    --light-yellow-border: #FFFEF5;
    --light-yellow-surface: #FFFFFA;
    --light-yellow-focused: #FFFDE833;

    --purple-pressed: #8D3F78;
    --purple-hover: #BF84AF;
    --purple-main: #F1C8E6;
    --purple-border: #F9E9F5;
    --purple-surface: #FCF4FA;
    --purple-focused: #F1C8E633;

    --pink-pressed: #C22C46;
    --pink-hover: #E18494;
    --pink-main: #FFDCE2;
    --pink-border: #FFF1F3;
    --pink-surface: #FFF8F9;
    --pink-focused: #FFDCE233;

    --inter: "Inter", serif;

    --divider-footer: url("https://katsudoto.id/media/assets/pictures/buku-tamu/divider-3.png");

    /* 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;

    /* 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);
}

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

.penanda {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: var(--boxing-text-family);
    font-size: var(--boxing-text-size-m);
    color: var(--text-primary);
    text-align: center;
}

/* ======================
    NAVBAR
====================== */

.kat__navbar {
    background-color: var(--blue-main);
}

.kat__navbar .kat--navbar {
    padding: 24px 80px;
    border: none;
}

.kat__dropdown .kat__nav-collapse-btn {
    color: var(--neutral-10);
}

.kat__dropdown .kat__dropdown-btn {
    color: var(--neutral-10);
}

.kat__nav-link.nav-displayed-text>p {
    color: var(--neutral-10);
}

.kat__nav-link svg path {
    fill: var(--neutral-10);
}

@media (max-width : 560px) {
    .kat__navbar .kat--navbar {
        padding: 16px 24px;
    }
}

@media (min-width : 561px) and (max-width : 960px) {
    .kat__navbar .kat--navbar {
        padding: 24px 48px;
    }
}

/* ======================
    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;
}

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

.marquee {
    position: relative;
    background-color: var(--background-tertiary);
    padding: 24px 0;
    white-space: nowrap;
    overflow: hidden;
}

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

.marquee .marquee_item {
    width: 40px;
    height: auto;
    position: relative;
}

.marquee .marquee-text {
    font-family: var(--inter);
    font-size: calc(var(--body-text-size) - 4px);
    font-weight: 600;

}

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

    .marquee .marquee-text {
        font-size: calc(var(--body-text-size) + 2px);
    }
}

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

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

.marquee-2 .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: 560px) and (max-width: 960px) {
    .marquee-2 {
        padding: 40px 0;
    }
}

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

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

/* ======================
    FOOTER
====================== */
.kat__landing-footer {
    position: relative;
    overflow: hidden;
    padding: 80px 80px 24px;
    background-color: var(--background-secondary);
}

.kat__landing-footer .footer__body {
    display: flex;
    gap: 16px;
    padding-bottom: 30px;
}

.kat__landing-footer .footer__body .about-wrap {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
}

.kat__landing-footer .footer__body .info-wrapper {
    display: flex;
    gap: 16px;
}

.kat__landing-footer .footer__body .about-wrap>a>svg {
    display: block;
    width: auto;
    height: 120px;
}

.kat__landing-footer .footer__body .about-wrap>a>svg path {
    fill: #FFFAF3;
}

.kat__landing-footer .footer__body .about-wrap p {
    font-family: var(--inter);
    color: var(--neutral-10);
    font-size: var(--body-text-size-s);
    line-height: 140%;
}

.kat__landing-footer .footer__body .info-wrapper .items-wrapper {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.kat__landing-footer .footer__body .info-wrapper .items-wrapper p.header {
    font-size: var(--body-text-size-s);
    font-weight: 700;
    line-height: 140%;
    color: var(--neutral-10);
}

.kat__landing-footer .footer__body .info-wrapper .items-wrapper .item-wrap ul {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.kat__landing-footer .footer__body .info-wrapper .items-wrapper .item-wrap ul li a {
    white-space: nowrap;
    font-size: var(--body-text-size-xs);
    color: var(--neutral-10);
}

.kat__landing-footer .footer__body .info-wrapper .items-wrapper .item-wrap ul li {
    white-space: nowrap;
    font-size: var(--body-text-size-xs);
    color: var(--neutral-10);
}

.kat__landing-footer .footer__divider {
    width: 100%;
    height: 10px;
    width: 100%;
    position: relative;
    background: var(--divider-footer) repeat-x;
    display: block;
    background-size: contain;
}

.kat__landing-footer .footer__foot {
    width: 100%;
    display: flex;
    gap: 24px;
    align-items: center;
    padding-top: 36px;
}

.kat__landing-footer .footer__foot .foot-inner {
    width: 100%;
    display: flex;
    gap: 16px;
}

.kat__landing-footer .footer__foot .foot-inner a {
    font-size: var(--body-text-size-xs);
    font-family: var(--inter);
    color: var(--neutral-10);
}

.kat__landing-footer .footer__foot .foot-sosmed-wrap {
    display: flex;
    gap: 16px;
}

.kat__landing-footer .footer__foot .foot-sosmed-wrap .sosmed-icon-wrap {}


@media (min-width: 1600px) {
    .kat__landing-footer .footer__body{
        gap: 105px;
    }
}
@media (min-width: 1281px) and (max-width: 1590px) {
    .kat__landing-footer .footer__body{
        gap: 92px;
    }

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

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

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

@media (min-width: 560px) and (max-width: 1024px) {
    .kat__landing-footer{
        padding: 80px 24px 24px;
    }
    .kat__landing-footer .footer__body {
        flex-direction: column;
        padding-bottom: 40px;
        gap: 32px;
    }

    .kat__landing-footer .footer__body .about-wrap>a>svg {
        height: 100px;
    }
    .kat__landing-footer{
        padding: 80px 48px 24px;
    }
}

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

    .kat__landing-footer .footer__body {
        flex-direction: column;
        padding-bottom: 40px;
        gap: 32px;
    }

    .kat__landing-footer .footer__foot {
        flex-direction: column;
        align-items: flex-start;
    }

    .kat__landing-footer .footer__body .about-wrap>a>svg {
        height: 70px;
    }
}

/* ======================
    WA CHAT FIDGET
====================== */

@media (max-width: 559px) {
    .wa-chat-widget .wa-chat-send{
        padding: 10px;
    }
    .wa-chat-widget .wa-chat-send .wa-chat-send-icon{
        margin-right: 0;
    }
    .wa-chat-widget .wa-chat-send .wa-chat-send-text{
        display: none;
    }
}