@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");

}

.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;
    }
}

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