:root {
    font-size: 16px;
    --text-primary-base: #4f4f4f;
    --text-primary-dark: #343434;
    --background-primary: #fff;
    --brand-primary-base: #2f379a;
    --grey-100: #ededed;
    --colors-black: #1e1e1e;
}

body {
    font-family: "Montserrat", sans-serif;
    color: var(--text-primary-base);
    background: var(--background-primary);
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.p,
h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0;
}

a,
a:focus,
a:hover {
    text-decoration: none;
}

.font-cardo {
    font-family: "Cardo", serif;
}

.font-lato {
    font-family: "Lato", sans-serif;
}

.font-mont {
    font-family: "Montserrat", sans-serif;
}

.fw-extrabold {
    font-weight: 800;
}

.fw-black {
    font-weight: 900;
}

.nav-fixed-menu {
    position: fixed;
    width: 100% !important;
    top: 0;
    z-index: 99999;
}

.fixed-menu {
    margin-top: 86px !important;
}

.form-label {
    color: var(--text-primary-base, #4f4f4f);
    text-align: center;
    font-family: Lato;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 34px;
}

.form-inputs {
    display: flex;
    padding: 12px 24px;
    gap: 40px;
    border-radius: 8px;
    color: var(--text-primary-base, #4f4f4f);
    font-family: Lato;
    font-size: 16px;
    font-style: normal;
    font-weight: 900;
    line-height: 34px;
    width: -webkit-fill-available;
    border: 0;
}

.form-inputs:focus,
.form-inputs:hover {
    border-color: var(--text-primary-base);
    outline: 0;
    border: 1px solid #4f4f4f;
    box-shadow: 0 0 0 0 var(--text-primary-dark);
}

.form-select {
    display: flex;
    padding: 12px 24px;
    gap: 40px;
    border-radius: 8px;
    color: var(--text-primary-base, #4f4f4f);
    font-family: Lato;
    font-size: 16px;
    font-style: normal;
    font-weight: 900;
    line-height: 34px;
}

.form-select:focus {
    border-color: var(--text-primary-base);
    outline: 0;
    box-shadow: 0 0 0 0 var(--text-primary-dark);
}

.form-select option {
    background-color: var(--background-primary);
    color: var(--text-primary-base);
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

.form-select option:checked,
.form-select option:hover,
.form-select option:focus {
    background-color: var(--text-primary-base) !important;
    color: var(--background-primary);
}

/* Component */

.btn-login {
    display: flex;
    padding: 8px 32px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 8px;
    border: 2px solid var(--text-primary-dark);
    background: var(--background-primary);
    color: var(--text-primary-dark);
    font-size: 18px;
    font-style: normal;
    font-weight: 900;
    line-height: 38px;
    transition: all 0.5s ease;
}

.btn-login:hover {
    color: var(--background-primary);
    background: var(--text-primary-dark);
}

.btn-trans {
    display: flex;
    min-width: 120px;
    padding: 6px 28px;
    border-radius: 4px;
    justify-content: center;
    align-items: center;
    gap: 6px;
    border: 2px solid var(--text-primary-dark, #343434);
    color: var(--text-primary-dark, #343434);
    background-color: transparent;
    font-family: Lato;
    font-size: 8px;
    font-style: normal;
    font-weight: 900;
    line-height: 14px;
    transition: all 0.5s ease;
}

.btn-trans:hover {
    transform: scale(1.1);
    border: 2px solid var(--text-primary-dark, #343434);
}

.btn-app {
    min-width: 295px;
    padding: 12px 70px;
    border-radius: 8px;
    background: var(--text-primary-dark);
    color: white;
    font-family: "Lato", sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 900;
    line-height: 38px;
    transition: all 0.5s ease;
}

.btn-app:hover {
    transform: scale(1.1);
    background-color: #1c1f23;
    color: white;
}

.btn-app-secondary {
    display: flex;
    padding: 8px 32px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    background: var(--background-primary);
    color: var(--brand-primary-base, #2f379a);
    font-family: Lato;
    font-size: 16px;
    font-style: normal;
    font-weight: 900;
    line-height: 34px;
    transition: all 0.5s ease;
}

.btn-app-secondary:hover {
    transform: scale(1.1);
    background-color: #ffffff;
    color: var(--brand-primary-base);
}

/* Menu */

.navbar {
    padding: 24px 0px;
}

.navbar-toggler {
    border: 0px;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 18C3.71667 18 3.479 17.904 3.287 17.712C3.095 17.52 2.99934 17.2827 3 17C3 16.7167 3.096 16.479 3.288 16.287C3.48 16.095 3.71734 15.9993 4 16H20C20.2833 16 20.521 16.096 20.713 16.288C20.905 16.48 21.0007 16.7173 21 17C21 17.2833 20.904 17.521 20.712 17.713C20.52 17.905 20.2827 18.0007 20 18H4ZM4 13C3.71667 13 3.479 12.904 3.287 12.712C3.095 12.52 2.99934 12.2827 3 12C3 11.7167 3.096 11.479 3.288 11.287C3.48 11.095 3.71734 10.9993 4 11H20C20.2833 11 20.521 11.096 20.713 11.288C20.905 11.48 21.0007 11.7173 21 12C21 12.2833 20.904 12.521 20.712 12.713C20.52 12.905 20.2827 13.0007 20 13H4ZM4 8C3.71667 8 3.479 7.904 3.287 7.712C3.095 7.52 2.99934 7.28267 3 7C3 6.71667 3.096 6.479 3.288 6.287C3.48 6.095 3.71734 5.99934 4 6H20C20.2833 6 20.521 6.096 20.713 6.288C20.905 6.48 21.0007 6.71734 21 7C21 7.28334 20.904 7.521 20.712 7.713C20.52 7.905 20.2827 8.00067 20 8H4Z' fill='black'%3E%3C/path%3E%3C/svg%3E");
}

.navbar-toggler:focus {
    text-decoration: none;
    outline: 0;
    box-shadow: 0 0 0 0;
}

.nav-link {
    color: var(--text-primary-base);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
}

.nav-link:focus,
.nav-link:hover {
    color: var(--text-primary-dark);
}

.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show {
    color: var(--text-primary-base);
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px;
}

.navbar-nav .dropdown-menu.show {
    background-color: #f8f9fa;
    display: inline-block;
    width: 100%;
    border: 0px !important;
    border-radius: 0px !important;
}

.dropdown-menu[data-bs-popper] {
    left: -7.5em !important;
}

.dropdown-menu li {
    color: var(--text-primary-dark);
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 28px;
}

.dropdown-menu .dropdown-item {
    font-weight: 400;
    color: var(--text-primary-base);
}

.dropdown-item.active,
.dropdown-item:active {
    color: var(--grey-100);
    text-decoration: none;
    background-color: var(--text-primary-dark);
    border-radius: 0.25em;
    padding-top: 10px;
    padding-bottom: 10px;
}

.dropdown-menu .dropdown-divider {
    border: 1px solid var(--text-primary-dark);
}

.img-brand {
    height: 54px;
    width: auto;
}

.img-brand-2 {
    height: 80px;
    width: auto;
}

.menu {
    background-color: var(--background-primary);
}

/* LOGIN */

.bg-logins {
    background-color: var(--brand-accent-base, #ffffff) !important;
}

.onzy-login .card-login {
    background-color: #2f379a;
    border-radius: 20px;
}

.onzy-login .card-login .card-img-top {
    border-radius: 20px;
    padding: 3px;
}

.onzy-login .card-login .card-logo {
    border-radius: 0px;
    height: 54px;
    width: fit-content;
    margin: 24px 0px;
}

.onzy-login .card-login .card-title {
    color: white;
    font-size: 42px;
    font-family: Cardo;
    font-weight: 700;
    line-height: 68px;
    word-wrap: break-word;
}

.onzy-login .card-login .card-text {
    color: white;
    font-size: 18px;
    font-family: Montserrat;
    font-weight: 400;
    line-height: 38px;
    word-wrap: break-word;
}

.onzy-login .heading-title {
    color: #4f4f4f;
    font-size: 26px;
    font-family: Montserrat;
    font-weight: 700;
    line-height: 48px;
    word-wrap: break-word;
}

.onzy-login .heading-text {
    color: #a7a7a7;
    font-size: 16px;
    font-family: Lato;
    font-weight: 400;
    line-height: 34px;
    word-wrap: break-word;
}

.onzy-login .form-login .form-control {
    border-radius: var(--bs-border-radius) !important;
    color: #4f4f4f;
    font-size: 14px;
    font-family: Lato;
    font-weight: 400;
    line-height: 28px;
    word-wrap: break-word;
}

.onzy-login .form-login .form-control:focus {
    border: #1e2235 2px solid;
    background-color: unset !important;
    box-shadow: unset;
}

.onzy-login .toggle-password {
    position: absolute;
    right: 1em;
    top: 0;
    bottom: 0;
}

.onzy-login .toggle-password:hover {
    cursor: pointer;
}

.onzy-login .toggle-m-password {
    position: absolute;
    right: 1em;
    top: 0;
    bottom: 0;
}

.onzy-login .toggle-m-password:hover {
    cursor: pointer;
}

.onzy-login .toggle-m-conf-password {
    position: absolute;
    right: 1em;
    top: 0;
    bottom: 0;
}

.onzy-login .toggle-m-conf-password:hover {
    cursor: pointer;
}

.onzy-login .btn {
    font-family: Lato;
}

/* HOME */

/* Hero */

.hero {
    display: flex;
    margin-top: 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
    align-self: stretch;
}

.hero #carousel-banner .carousel-item {
    max-height: 86vh;
}

.hero .hero-heading {
    position: absolute;
    /* top: 0; */
    /* bottom: 0; */
    left: 0;
    right: 0;
    /* display: flex;
  align-items: center; */
}

.hero .hero-heading .btn-app {
    min-width: 100px;
    padding: 6px 28px;
    border-radius: 4px;
    background: var(--text-primary-dark);
    color: white;
    font-family: "Lato", sans-serif;
    font-size: 8px;
    font-style: normal;
    font-weight: 900;
    line-height: 14px;
    transition: all 0.5s ease;
}

.hero .hero-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    align-self: stretch;
}

.hero .hero-heading-content-1 {
    display: flex;
    width: 60%;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding-top: 10px;
}

.hero .hero-heading-content-2 {
    display: flex;
    width: 60%;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding-top: 10px;
}

.hero .hero-heading-content-3 {
    display: flex;
    width: 100%;
    align-items: flex-start;
    gap: 6px;
    padding-top: 10px;
}

.hero .hero-heading-content-4 {
    display: flex;
    width: 100%;
    align-items: flex-end;
    gap: 6px;
    padding-bottom: 10px;
}

.hero .hero-heading-content-3 .hero-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    flex: 1 0 0;
}

.hero .hero-heading-content-3 .hero-subhead {
    display: flex;
    width: 35%;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 8px;
    flex-shrink: 0;
}

.hero .hero-content {
    margin-left: 50px;
    color: #fff;
}

.hero .hero-title {
    align-self: stretch;
    color: var(--text-primary-base);
    font-family: "Cardo", serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.hero .hero-title-2 {
    align-self: stretch;
    color: var(--text-primary-base);
    font-family: "Cardo", serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.hero .hero-title-3 {
    align-self: stretch;
    color: var(--text-primary-base);
    font-family: "Cardo", serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.hero .hero-title-4 {
    align-self: stretch;
    color: var(--text-primary-base);
    font-family: "Cardo", serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.hero .hero-subtitle {
    align-self: stretch;
    color: var(--text-primary-base);
    font-family: "Montserrat", sans-serif;
    font-size: 8px;
    font-style: normal;
    font-weight: 700;
    line-height: 12px;
}

.hero-description {
    align-self: stretch;
    color: var(--text-primary-base);
    font-family: "Lato", sans-serif;
    font-size: 6px;
    font-style: normal;
    font-weight: 400;
    line-height: inherit;
}

/* Bordir */

.bordir {
    background-image: url("../img/home/bordir/Bordir.jpg");
    background-size: cover;
    background-position: center;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 0 1.5em 0;
}

.bordir .bordir-heading {
    display: flex;
    width: 295px;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.bordir .bordir-title {
    max-width: 295px;
    color: var(--background-primary);
    text-align: center;
    font-family: Cardo;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.bordir .bordir-description {
    align-self: stretch;
    color: var(--background-primary);
    text-align: center;
    font-family: Lato;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

/* Products */

.product {
    background-color: #ffffff;
}

.product .nav-link {
    color: var(--text-primary-base, #4f4f4f);
    text-align: center;
    font-family: Montserrat;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 34px;
}

.product .nav-link.active {
    font-weight: 700;
}

.product .product-title {
    color: var(--text-primary-base, #4f4f4f);
    text-align: center;
    font-family: Cardo;
    font-size: 42px;
    font-style: normal;
    font-weight: 700;
    line-height: 68px;
}

.product .product-content {
    padding-top: 32px;
    min-height: 200px;
}

.product .product-card-title {
    margin-top: 50px;
    align-self: stretch;
    color: var(--text-primary-base);
    font-family: "Cardo", serif;
    font-size: 26px;
    font-style: normal;
    font-weight: 700;
    line-height: 48px;
}

.product .product-description {
    align-self: stretch;
    color: var(--text-primary-base);
    font-family: "Lato", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
    min-height: 170px;
    padding-bottom: 24px;
    text-align: justify !important;
}

.product .product-description-custom {
    align-self: stretch;
    color: var(--text-primary-base);
    font-family: "Lato", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px;
    min-height: 170px;
    padding-bottom: 24px;
}

.product .overlay {
    content: "";
    position: absolute;
    bottom: -30px;
    left: 0;
    width: 40px;
    height: 5px;
    border-radius: 20px;
    background-color: var(--text-primary-dark);
}

/* Satu Atap */

.satu-atap {
    background-color: #ffffff;
    padding: 20px 0;
}

.satu-atap .satu-title {
    color: var(--text-primary-base, #4f4f4f);
    text-align: center;
    font-family: Cardo;
    font-size: 26px;
    font-style: normal;
    font-weight: 700;
    line-height: 48px;
}

.satu-atap .satu-description {
    color: var(--text-primary-base, #4f4f4f);
    text-align: center;
    font-family: Lato;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
}

.satu-atap .satu-brand {
    color: var(--text-primary-base, #4f4f4f);
    font-family: Montserrat;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px;
}

.satu-atap .satu-subbrand {
    color: var(--text-primary-base, #4f4f4f);
    font-family: Lato;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
}

/* Outlet */

.outlet {
    background-color: var(--colors-black);
    color: white;
}

.outlet .outlet-heading {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
}

.outlet .outlet-heading-content {
    display: flex;
    width: 50%;
}

.outlet .outlet-banner {
    align-self: stretch;
    color: var(--background-primary);
    font-family: "Cardo", serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.outlet .outlet-title {
    align-self: stretch;
    color: var(--background-primary, #fff);
    text-align: center;
    font-family: Cardo;
    font-size: 42px;
    font-style: normal;
    font-weight: 700;
    line-height: 68px;
}

.outlet .outlet-subtitle {
    align-self: stretch;
    color: var(--background-primary, #fff);
    font-family: Lato;
    font-size: 18px;
    font-style: normal;
    font-weight: 900;
    line-height: 38px;
}

.outlet .outlet-description {
    align-self: stretch;
    color: var(--background-primary, #fff);
    font-family: Lato;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
}

.outlet .overlay {
    width: 200px;
    height: 7px;
    background-color: white;
}

.outlet .outlet-galeri {
    width: 20%;
}

/* Portfolio */

.portfolio {
    background-color: white;
}

.portfolio .portfolio-title {
    color: var(--text-primary-base, #4f4f4f);
    text-align: center;
    font-family: Cardo;
    font-size: 42px;
    font-style: normal;
    font-weight: 700;
    line-height: 68px;
}

.portfolio .portfolio-description {
    color: var(--text-primary-base, #4f4f4f);
    text-align: center;
    font-family: Lato;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
}

.portfolio .portfolio-description-2 {
    color: var(--text-primary-base);
    max-width: 1120px;
    margin: auto;
    text-align: center;
    font-family: "Lato", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 34px;
}

.portfolio #carousel-portfolio-2 .item img {
    max-height: 300px;
    object-fit: cover;
}

/* Media Partner */

.media {
    background-color: white;
}

.media .media-title {
    color: var(--text-primary-base, #4f4f4f);
    text-align: center;
    font-family: Cardo;
    font-size: 42px;
    font-style: normal;
    font-weight: 700;
    line-height: 68px;
}

.media .overlay {
    width: 80%;
    height: 4px;
    background: var(--text-primary-base, #4f4f4f);
}

.owl-prev,
.owl-next {
    position: absolute;
    top: 0;
    bottom: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
    color: var(--text-primary-dark);
}

.owl-prev {
    left: 12px;
}

.owl-next {
    right: 12px;
}

/* Kata Mereka */

.kata {
    background-color: #ffffff;
}

.kata .kata-title {
    color: var(--text-primary-base, #4f4f4f);
    text-align: center;
    font-family: Cardo;
    font-size: 42px;
    font-style: normal;
    font-weight: 700;
    line-height: 68px;
}

.kata .kata-subtitle {
    color: var(--text-primary-base, #4f4f4f);
    text-align: center;
    font-family: Lato;
    font-size: 16px;
    font-style: normal;
    font-weight: 900;
    line-height: 34px;
}

.kata .owl-carousel .item {
    border: 2px solid var(--grey-300, #cacaca);
    border-radius: 16px;
    cursor: pointer;
}

.kata .owl-carousel .item img {
    border-radius: 8px;
}

.owl-nav {
    display: block;
    text-align: center;
}

.owl-prev,
.owl-next {
    width: auto;
    max-width: 5px;
    color: var(--text-primary-dark);
}

.kata .form-kata {
    display: flex;
    width: 100%;
    height: 50px;
    padding: 10px 16px;
    border-radius: 8px;
    border: 1.5px solid var(--grey-100);
    background: var(--background-primary);
    align-items: center;
    gap: 10px;
}

/* PRODUCT */

.onzy-signature {
    background: var(--brand-accent-base, #ffffff);
}

.onzy-signature .product-card-title {
    align-self: stretch;
    color: var(--text-primary-base, #4f4f4f);
    font-family: Cardo;
    font-size: 42px;
    font-style: normal;
    font-weight: 700;
    line-height: 68px;
}

.onzy-signature .product-description {
    align-self: stretch;
    color: var(--text-primary-base, #4f4f4f);
    font-family: Lato;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 34px;
    padding: 12px 0px;
}

.card-product {
    background-color: transparent;
    border: 0px;
}

.card-product .card-img-top {
    border-radius: 12px;
    transition: all 0.5s ease;
}

.card-product .card-img-top:hover {
    transform: scale(1.1);
    cursor: pointer;
}

.card-product .card-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding-left: 0px;
    padding-right: 0px;
    align-self: stretch;
}

.card-product .card-title {
    align-self: stretch;
    color: var(--text-primary-base, #4f4f4f);
    font-family: Montserrat;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 34px;
}

.card-product .card-subtitle {
    align-self: stretch;
    color: var(--text-primary-base, #4f4f4f);
    font-family: Lato;
    font-size: 18px;
    font-style: normal;
    font-weight: 900;
    line-height: 38px;
}

.card-product .card-text {
    color: var(--text-primary-light, #a7a7a7);
    font-family: Lato;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 34px;
}

/* PRODUCT DETAIL */

.product-detail {
    background: var(--brand-accent-base, #ffffff);
}

.product-detail .breadcrumb-item {
    color: var(--text-primary-light, #a7a7a7);
    font-family: Lato;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
}

.product-detail .breadcrumb-item.active {
    color: var(--text-primary-base, #4f4f4f);
    font-family: Lato;
    font-size: 14px;
    font-style: normal;
    font-weight: 900;
    line-height: 28px;
}

.product-detail .product-detail-title {
    align-self: stretch;
    color: var(--text-primary-base, #4f4f4f);
    font-family: Cardo;
    font-size: 26px;
    font-style: normal;
    font-weight: 700;
    line-height: 48px;
}

.product-detail .product-detail-subtitle {
    align-self: stretch;
    color: var(--text-primary-base, #4f4f4f);
    font-family: Lato;
    font-size: 18px;
    font-style: normal;
    font-weight: 900;
    line-height: 38px;
}

.product-detail .product-detail-text {
    align-self: stretch;
    color: var(--text-primary-light, #a7a7a7);
    font-family: Lato;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 34px;
}

.product-detail .nav-link.active {
    background-color: var(--colors-black);
}

.product-detail .nav-link {
    display: flex;
    padding: 8px 32px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    min-width: 185px;
    border-radius: 8px;
    border: 2px solid var(--text-primary-dark, #343434);
    color: var(--text-primary-dark, #343434);
    font-family: Lato;
    font-size: 16px;
    font-style: normal;
    font-weight: 900;
    line-height: 34px;
}

.product-detail .price-tab {
    color: var(--text-primary-base, #4f4f4f);
    font-family: Lato;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 34px;
}

.product-detail .form-product-detail .form-label {
    color: var(--text-primary-base, #4f4f4f);
    text-align: center;
    font-family: Lato;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 34px;
}

.product-detail .form-product-detail .form-select {
    display: flex;
    padding: 12px 24px;
    gap: 40px;
    border-radius: 8px;
    color: var(--text-primary-base, #4f4f4f);
    font-family: Lato;
    font-size: 16px;
    font-style: normal;
    font-weight: 900;
    line-height: 34px;
}

.product-detail .form-product-detail .form-select:focus {
    border-color: var(--text-primary-base);
    outline: 0;
    box-shadow: 0 0 0 0 var(--text-primary-dark);
}

.product-detail .form-product-detail .form-select option {
    background-color: var(--background-primary);
    color: var(--text-primary-base);
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

.product-detail .form-product-detail .form-select option:checked,
.product-detail .form-product-detail .form-select option:hover,
.product-detail .form-product-detail .form-select option:focus {
    background-color: var(--text-primary-base) !important;
    color: var(--background-primary);
}

.product-detail .btn-trans {
    display: flex;
    padding: 12px 40px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 8px;
    border: 2px solid var(--text-primary-dark, #343434);
    color: var(--text-primary-dark, #343434);
    background-color: transparent;
    font-family: Lato;
    font-size: 18px;
    font-style: normal;
    font-weight: 900;
    line-height: 38px;
    transition: all 0.5s ease;
}

#productDetail {
    flex-wrap: nowrap;
    overflow: auto;
}

.swiper {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

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

.swiper {
    width: 100%;
    height: 250px;
    margin-left: auto;
    margin-right: auto;
}

.swiper-slide {
    background-size: cover;
    background-position: center;
}

.swiper-slide:hover {
    cursor: pointer;
}

.productSwiper2 {
    height: 50%;
    width: 100%;
}

.productSwiper2 .swiper-slide,
.productSwiper2 .swiper-slide img {
    border-radius: 16px;
}

.productSwiper {
    height: 20%;
    box-sizing: border-box;
    padding: 10px 0;
}

.productSwiper .swiper-slide {
    width: 25%;
    height: 100%;
    opacity: 0.5;
    border-radius: 4px;
}

.productSwiper .swiper-slide img {
    border-radius: 4px;
}

.productSwiper .swiper-slide-thumb-active {
    opacity: 1;
}

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

/* Related Item */

.related-item {
    background: var(--brand-accent-base, #ffffff);
}

.related-item .related-item-title {
    color: var(--text-primary-base, #4f4f4f);
    text-align: center;
    font-family: Cardo;
    font-size: 42px;
    font-style: normal;
    font-weight: 700;
    line-height: 68px;
}

.related-item .overlay {
    width: 250px;
    height: 8px;
    background: var(--text-primary-base, #4f4f4f);
}

/* BORDIR */

/* Hero */

.bordir-hero {
    background-image: url("../img/bordir/01.Design.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 50vh;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: 0 0 1.5em 0;
}

.bordir-hero .bordir-heading {
    display: flex;
    width: 350px;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding: 20px 0px;
}

.bordir-hero .bordir-title {
    max-width: 300px;
    color: var(--background-primary, #fff);
    text-align: center;
    font-family: Cardo;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.bordir-hero .bordir-description {
    max-width: 820px;
    align-self: stretch;
    color: var(--background-primary, #fff);
    text-align: center;
    font-family: Lato;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
}

.kualitas {
    background: var(--brand-accent-base, #ffffff);
}

.kualitas .kualitas-heading {
    max-width: 350px;
}

.kualitas .kualitas-title {
    color: var(--text-primary-base, #4f4f4f);
    text-align: center;
    font-family: Cardo;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 46px;
}

.kualitas .kualitas-description {
    color: var(--text-primary-base, #4f4f4f);
    font-family: Lato;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 34px;
}

.black-kualitas {
    background: var(--colors-black, #1e1e1e);
}

.black-kualitas .black-kualitas-heading {
    max-width: 350px;
}

.black-kualitas .black-kualitas-title {
    color: var(--background-primary, #fff);
    text-align: center;
    font-family: Cardo;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 46px;
}

.black-kualitas .slider-kualitas {
    background: var(--background-primary, #fff);
    max-width: 100vw;
}

.black-kualitas .owl-prev {
    left: 70px;
}

.black-kualitas .owl-next {
    right: 70px;
}

.black-kualitas .black-kualitas-description {
    color: var(--background-primary, #fff);
    font-family: Lato;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 34px;
}

.cek-video {
    background-image: url("../img/bordir/02.Design.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 90vh;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: 0 0 1.5em 0;
}

.cek-video .video-title {
    color: var(--background-primary, #fff);
    font-family: Cardo;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 46px;
}

/* E-KATALOG */

/* E-Katalog */

.katalog {
    background: var(--brand-accent-base, #ffffff);
}

.katalog .img-katalog {
    border-radius: 8px;
    box-shadow: 0px 76px 60px -52px rgba(97, 97, 97, 0.15);
}

.katalog .katalog-nb {
    color: var(--text-primary-base);
    min-height: 140px;
    align-self: stretch;
    font-family: Lato;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 34px;
}

.katalog .katalog-nb-2 {
    color: var(--text-primary-base);
    min-height: 95px;
    align-self: stretch;
    font-family: Lato;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 34px;
}

.katalog .katalog-detail {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
}

.katalog .katalog-subtitle {
    align-self: stretch;
    color: var(--text-primary-base);
    font-family: "Montserrat", sans-serif;
    font-size: 26px;
    font-style: normal;
    font-weight: 700;
    line-height: 48px;
}

/* FAQ */

.faq-hero {
    background: var(--brand-accent-base, #ffffff);
}

.faq {
    background: var(--brand-accent-base, #ffffff);
}

.faq .faq-title {
    color: var(--text-primary-base, #4f4f4f);
    text-align: center;
    font-family: Cardo;
    font-size: 56px;
    font-style: normal;
    font-weight: 700;
    line-height: 88px;
}

.faq .accordion-item {
    margin-bottom: 24px;
    border-radius: 12px !important;
    border: 1px solid var(--background-highlight, #f0f0f0);
}

.faq .accordion-button {
    border-radius: 12px !important;
    box-shadow: 0 0 0 0;
    color: #4f4f4f;
    font-size: 18px;
    font-family: Montserrat;
    font-weight: 700;
    line-height: 38px;
    word-wrap: break-word;
    padding-left: 65px;
}

.faq .accordion-button::after {
    position: absolute;
    left: 24px;
    width: 24px;
    height: 25px;
    background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="25" viewBox="0 0 24 25" fill="none"><path d="M12.0008 11.2326L8.10078 15.1326C7.91745 15.316 7.68411 15.4076 7.40078 15.4076C7.11745 15.4076 6.88411 15.316 6.70078 15.1326C6.51745 14.9493 6.42578 14.716 6.42578 14.4326C6.42578 14.1493 6.51745 13.916 6.70078 13.7326L11.3008 9.13264C11.5008 8.93264 11.7341 8.83264 12.0008 8.83264C12.2674 8.83264 12.5008 8.93264 12.7008 9.13264L17.3008 13.7326C17.4841 13.916 17.5758 14.1493 17.5758 14.4326C17.5758 14.716 17.4841 14.9493 17.3008 15.1326C17.1174 15.316 16.8841 15.4076 16.6008 15.4076C16.3174 15.4076 16.0841 15.316 15.9008 15.1326L12.0008 11.2326Z" fill="black"/></svg>');
}

.faq .accordion-body {
    color: #4f4f4f;
    font-size: 14px;
    font-family: Lato;
    font-weight: 400;
    line-height: 28px;
    word-wrap: break-word;
    padding-left: 65px;
    padding-top: 0px;
    padding-bottom: 24px;
}

.faq .accordion-button:not(.collapsed) {
    border-radius: 12px;
    background: var(--background-primary, #fff);
}

/* CONTACT */

.contact {
    background: var(--brand-accent-base, #ffffff);
}

.contact .contact-heading {
    display: flex;
    width: 791px;
    flex-direction: column;
    align-items: center;
}

.contact .contact-title {
    max-width: 735px;
    color: var(--text-primary-base, #4f4f4f);
    text-align: center;
    font-family: "Cardo", serif;
    font-size: 42px;
    font-style: normal;
    font-weight: 700;
    line-height: 68px;
    margin: 0 auto;
}

.contact .contact-description {
    color: var(--text-primary-base, #4f4f4f);
    text-align: center;
    font-family: Lato;
    font-size: 18px;
    font-style: normal;
    font-weight: 900;
    line-height: 38px;
}

.contact .btn-app {
    width: 100%;
    padding: 10px 70px;
}

.contact .table-responsive {
    background: var(--brand-accent-base, #ffffff);
}

.table-contact thead {
    justify-content: center;
    align-items: center;
    gap: 32px;
    position: relative;
    border-radius: 50px;
    height: 0px;
}

.table-contact th {
    padding: 20px 20px;
    align-self: stretch;
    background: var(--grey-500, #a7a7a7);
    color: var(--background-primary, #fff);
    font-family: Montserrat;
    font-size: 26px;
    font-style: normal;
    font-weight: 700;
    line-height: 48px;
}

.table-contact tbody > tr {
    display: block;
    border-radius: 0.8rem;
    outline: 0;
    margin-top: 0.5rem;
}

.table-contact tbody > tr > td {
    width: 100%;
    display: block;
}

.table-contact tbody > tr > td .title-small {
    display: block;
    color: var(--text-primary-light, #a7a7a7);
    font-family: Lato;
    font-size: 16px;
    font-style: normal;
    font-weight: 900;
    line-height: 34px;
    margin-top: 1em;
}

.table-contact .img-table {
    max-height: 250px;
}

.table-contact .table-title {
    color: var(--text-primary-base, #4f4f4f);
    font-family: Lato;
    font-size: 14px;
    font-style: normal;
    font-weight: 900;
    line-height: 28px;
}

.table-contact .table-subtitle {
    color: var(--text-primary-base, #4f4f4f);
    font-family: Lato;
    font-size: 14px;
    font-style: normal;
    font-weight: 900;
    line-height: 28px;
}

.table-contact .table-desc {
    color: var(--text-primary-base, #4f4f4f);
    font-family: Lato;
    font-size: 18px;
    font-style: normal;
    font-weight: 900;
    line-height: 38px;
}

.table-contact .table-description {
    color: var(--text-primary-base, #4f4f4f);
    font-family: Lato;
    font-size: 14px;
    font-style: normal;
    font-weight: 900;
    line-height: 28px;
}

/* ABOUT US */

.about-hero {
    background: var(--brand-accent-base, #ffffff);
}

.about-us {
    background: var(--brand-accent-base, #ffffff);
    min-height: 1500px;
}

.about-text,
.about-text-2,
.visi-text {
    align-self: stretch;
    color: var(--text-primary-base, #4f4f4f);
    /* text-align: center; */
    color: #4f4f4f;
    font-size: 14px;
    font-family: Lato;
    font-weight: 900;
    line-height: 28px;
    word-wrap: break-word;
}

.about-us .about-img-overlay {
    position: initial;
}

.about-us .about-text-overlay {
    width: 18px;
    align-self: stretch;
    background: #353a96;
    height: 100%;
}

.visi-misi {
    background: var(--brand-accent-base, #ffffff);
}

.visi-misi .visi-title {
    align-self: stretch;
    color: var(--text-primary-base, #4f4f4f);
    text-align: center;
    font-family: Cardo;
    font-size: 56px;
    font-style: normal;
    font-weight: 700;
    line-height: 88px;
}

.visi-misi .visi-subtitle {
    align-self: stretch;
    color: var(--text-primary-base, #4f4f4f);
    /* text-align: right; */
    font-family: Montserrat;
    font-size: 26px;
    font-style: normal;
    font-weight: 700;
    line-height: 48px;
}

.visi-misi .visi-text {
    align-self: stretch;
    color: #4f4f4f;
    font-size: 18px;
    font-family: Lato;
    font-weight: 900;
    line-height: 38px;
    word-wrap: break-word;
}

/* BLOG */

.blog {
    background: var(--brand-accent-base, #ffffff);
}

.blog .blog-title {
    color: var(--text-primary-base, #4f4f4f);
    font-family: Montserrat;
    font-size: 26px;
    font-style: normal;
    font-weight: 700;
    line-height: 48px;
}

.blog #blogDetail,
.blog #wisataDetail {
    flex-wrap: nowrap;
    overflow: auto;
}

.blog #blogDetail .nav-link {
    display: flex;
    width: 135px;
    height: 40px;
    padding: 10px 12.4px 10px 11px;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    border: 1px solid var(--grey-200, #dcdcdc);
    background-color: transparent;
}

.blog #blogDetail .nav-link.active {
    background: var(--background-primary, #fff);
    border: 0px;
}

.blog #blogDetail .nav-link img {
    max-height: 28px;
}

.blog #wisataDetail .nav-link {
    color: var(--text-primary-base, #4f4f4f);
    text-align: center;
    font-family: Lato;
    font-size: 16px;
    font-style: normal;
    font-weight: 900;
    line-height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    border-radius: 8px;
    border: 1px solid var(--grey-200, #dcdcdc);
    background-color: transparent;
    min-width: 215px;
}

.blog #wisataDetail .nav-link.active {
    background: var(--background-primary, #fff);
    border: 0px;
}

.blog #wisataDetail .nav-link img {
    max-height: 28px;
}

.blog .card-blog {
    width: 100% !important;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border: 0px;
    border-radius: 16px;
}

.blog .card-blog img {
    border-radius: 16px 16px 0 0;
}

.blog .card-blog .card-title {
    align-self: stretch;
    max-height: 75px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    /* white-space: nowrap; */
    color: var(--text-primary-base, #4f4f4f);
    font-family: Lato;
    font-size: 18px;
    font-style: normal;
    font-weight: 900;
    line-height: 38px;
}

.blog .card-blog .card-text {
    align-self: stretch;
    max-height: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    color: var(--text-primary-light, #a7a7a7);
    text-overflow: ellipsis;
    flex-wrap: nowrap;
    font-family: Lato;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 34px;
}

.blog .card-blog-small {
    width: 100% !important;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    border: 0px;
    background-color: transparent;
}

.blog .card-blog-small .card-title {
    overflow: hidden;
    color: var(--text-primary-base, #4f4f4f);
    text-overflow: ellipsis;
    font-family: Montserrat;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 38px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    align-self: stretch;
    margin: 0px !important;
}

.blog .card-blog-small .card-text {
    overflow: hidden;
    color: var(--text-primary-base, #4f4f4f);
    text-overflow: ellipsis;
    font-family: Lato;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    align-self: stretch;
}

.blog .card-blog-small .card-body {
    padding: 0px;
}

.blog .card-blog-small .img-thumb {
    height: 20px;
    width: auto;
}

.footer {
    background-color: #ffffff;
}

.footer-text {
    color: var(--text-primary-dark);
    font-family: "Lato", sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 900;
    line-height: 38px;
}

.footer-text-2 {
    color: var(--text-primary-dark);
    font-family: "Montserrat", sans-serif;
    font-size: 26px;
    font-style: normal;
    font-weight: 700;
    line-height: 48px;
}

.footer .footer-description {
    align-self: stretch;
    color: var(--text-primary-dark);
    font-family: "Lato", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 34px;
}

.footer .img-sosmed {
    max-width: 50px;
}

.footer .contact-detail {
    color: var(--text-primary-dark);
    font-family: "Lato", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 34px;
}

.footer .contact-detail a {
    text-decoration: none;
    color: inherit;
}

.footer .footer-title {
    color: var(--text-primary-dark);
    font-weight: 500;
    font-size: 24px;
}

@media (min-width: 375px) {
    .fixed-menu {
        margin-top: 112px !important;
    }

    .contact .contact-title {
        font-size: 33px !important;
    }

    .max-font-size {
        font-size: 22px !important;
    }
}

@media (max-width: 375px) {
    .katalog .katalog-nb {
        color: var(--text-primary-base);
        align-self: stretch;
        font-family: Lato;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 34px;
    }
}

@media (min-width: 412px) {
    .fixed-menu {
        margin-top: 112px !important;
    }

    .contact .contact-title {
        font-size: 33px !important;
    }

    .max-font-size {
        font-size: 24px !important;
    }
}

@media (max-width: 412px) {
    .katalog .katalog-nb {
        color: var(--text-primary-base);
        align-self: stretch;
        font-family: Lato;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 34px;
    }
}

/* `sm` applies to small devices (landscape phones, less than 576px) */

@media (min-width: 576px) {
    .fixed-menu {
        margin-top: 112px !important;
    }

    .contact .contact-title {
        font-size: 33px !important;
    }

    .max-font-size {
        font-size: 35px !important;
    }

    .katalog .katalog-nb {
        min-height: 120px !important;
    }
}

@media (max-width: 576px) {
    .katalog .katalog-nb {
        color: var(--text-primary-base);
        align-self: stretch;
        font-family: Lato;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 34px;
    }
}

/* `md` applies to small devices (landscape phones, less than 768px) */

@media (min-width: 768px) {
    .navbar-nav .dropdown-menu.show {
        display: inline-block;
        width: 700px;
        border: 0px !important;
        border-radius: 0px !important;
    }

    .fixed-menu {
        margin-top: 112px !important;
    }

    .katalog .katalog-nb {
        min-height: 120px !important;
    }
}

/* `lg` applies to medium devices (tablets, less than 992px) */

@media (min-width: 992px) {
    .navbar-nav .dropdown-menu.show {
        display: inline-block;
        width: 700px;
        border: 0px !important;
        border-radius: 0px !important;
    }

    .fixed-menu {
        margin-top: 112px !important;
    }

    .max-font-size {
        font-size: 35px !important;
    }

    .katalog .katalog-nb {
        min-height: 120px !important;
    }
}

/* `xl` applies to large devices (desktops, less than 1200px) */

@media (min-width: 1200px) {
    .max-font-size {
        font-size: 35px !important;
    }

    .katalog .katalog-nb {
        min-height: 120px !important;
    }

    /* Component */
    .btn-login {
        display: flex;
        padding: 8px 32px;
        justify-content: center;
        align-items: center;
        gap: 10px;
        border-radius: 8px;
        border: 2px solid var(--text-primary-dark);
        background: var(--background-primary);
        color: var(--text-primary-dark);
        font-size: 18px;
        font-style: normal;
        font-weight: 900;
        line-height: 38px;
        transition: all 0.5s ease;
    }

    .btn-login:hover {
        color: var(--background-primary);
        background: var(--text-primary-dark);
    }

    .btn-trans {
        display: flex;
        padding: 12px 40px;
        justify-content: center;
        align-items: center;
        gap: 10px;
        border-radius: 8px;
        border: 2px solid var(--text-primary-dark, #343434);
        color: var(--text-primary-dark, #343434);
        background-color: transparent;
        font-family: Lato;
        font-size: 18px;
        font-style: normal;
        font-weight: 900;
        line-height: 38px;
        transition: all 0.5s ease;
    }

    .btn-trans:hover {
        transform: scale(1.1);
        border: 2px solid var(--text-primary-dark, #343434);
    }

    .btn-app {
        min-width: 295px;
        padding: 12px 70px;
        border-radius: 8px;
        background: var(--text-primary-dark);
        color: white;
        font-family: "Lato", sans-serif;
        font-size: 18px;
        font-style: normal;
        font-weight: 900;
        line-height: 38px;
        transition: all 0.5s ease;
    }

    .btn-app:hover {
        transform: scale(1.1);
        background-color: #1c1f23;
        color: white;
    }

    .btn-app-secondary {
        display: flex;
        min-width: 295px;
        padding: 12px 70px;
        justify-content: center;
        align-items: center;
        gap: 10px;
        background: var(--background-primary);
        color: var(--brand-primary-base);
        font-family: "Lato", sans-serif;
        font-size: 18px;
        font-style: normal;
        font-weight: 900;
        line-height: 38px;
        margin: 0 auto;
        transition: all 0.5s ease;
    }

    .btn-app-secondary:hover {
        transform: scale(1.1);
        background-color: #ffffff;
        color: var(--brand-primary-base);
    }

    .container,
    .container-show-lg {
        max-width: 1140px;
        margin: 0 auto;
    }

    .nav-link {
        color: var(--text-primary-base);
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: 28px;
    }

    .navbar-nav .dropdown-menu.show {
        display: inline-block;
        width: 700px;
        border: 0px !important;
        border-radius: 0px !important;
    }

    .dropdown-menu li {
        color: var(--text-primary-dark);
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: 28px;
    }

    /* HOME */
    .hero .hero-heading .btn-app {
        min-width: 295px;
        padding: 12px 70px;
        border-radius: 8px;
        background: var(--text-primary-dark);
        color: white;
        font-family: "Lato", sans-serif;
        font-size: 18px;
        font-style: normal;
        font-weight: 900;
        line-height: 38px;
        transition: all 0.5s ease;
    }

    .hero .hero-heading-content-1 {
        display: flex;
        width: 465px;
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
        padding-top: 35px;
    }

    .hero .hero-heading-content-2 {
        display: flex;
        width: 640px;
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
        padding-top: 100px;
    }

    .hero .hero-heading-content-3 {
        display: flex;
        width: 1100px;
        align-items: flex-end;
        gap: 18px;
        padding-bottom: 30px;
    }

    .hero .hero-heading-content-4 {
        display: flex;
        width: 1100px;
        align-items: flex-end;
        gap: 18px;
        padding-bottom: 30px;
    }

    .hero .hero-heading-content-3 .hero-head {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        flex: 1 0 0;
    }

    .hero .hero-heading-content-3 .hero-subhead {
        display: flex;
        width: 442px;
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-start;
        gap: 18px;
        flex-shrink: 0;
    }

    .hero .hero-content {
        margin-left: 50px;
        color: #fff;
    }

    .hero .hero-title {
        align-self: stretch;
        color: var(--text-primary-base);
        font-family: "Cardo", serif;
        font-size: 60px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }

    .hero .hero-title-2 {
        align-self: stretch;
        color: var(--text-primary-base);
        font-family: "Cardo", serif;
        font-size: 48px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }

    .hero .hero-title-3 {
        align-self: stretch;
        color: var(--text-primary-base);
        font-family: "Cardo", serif;
        font-size: 48px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }

    .hero .hero-title-4 {
        align-self: stretch;
        color: var(--text-primary-base);
        font-family: "Cardo", serif;
        font-size: 32px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }

    .hero .hero-subtitle {
        align-self: stretch;
        color: var(--text-primary-base);
        font-family: "Montserrat", sans-serif;
        font-size: 18px;
        font-style: normal;
        font-weight: 700;
        line-height: 48px;
    }

    .hero-description {
        align-self: stretch;
        color: var(--text-primary-base);
        font-family: "Lato", sans-serif;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 28px;
    }

    /* Bordir */
    .bordir .bordir-heading {
        display: flex;
        width: 791px;
        flex-direction: column;
        align-items: center;
        gap: 18px;
    }

    .bordir .bordir-title {
        max-width: 735px;
        color: var(--background-primary);
        text-align: center;
        font-family: "Cardo", serif;
        font-size: 42px;
        font-style: normal;
        font-weight: 700;
        line-height: 68px;
        margin: 0 auto;
    }

    .bordir .bordir-description {
        align-self: stretch;
        color: var(--background-primary);
        font-family: "Lato", sans-serif;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 34px;
        text-align: center;
    }

    /* Products */
    .product {
        background-color: #ffffff;
    }

    .product .nav-link {
        color: var(--text-primary-base, #4f4f4f);
        text-align: center;
        font-family: Montserrat;
        font-size: 26px;
        font-style: normal;
        font-weight: 400;
        line-height: 48px;
    }

    .product .nav-link.active {
        font-weight: 700;
    }

    .product .product-title {
        color: var(--text-primary-base);
        text-align: center;
        font-family: "Cardo", serif;
        font-size: 56px;
        font-style: normal;
        font-weight: 700;
        line-height: 88px;
    }

    .product .product-content {
        padding-top: 0px;
        min-height: 200px;
    }

    .product .product-card-title {
        align-self: stretch;
        color: var(--text-primary-base);
        font-family: "Cardo", serif;
        font-size: 26px;
        font-style: normal;
        font-weight: 700;
        line-height: 48px;
    }

    .product .product-description {
        align-self: stretch;
        color: var(--text-primary-base);
        font-family: "Lato", sans-serif;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 28px;
        min-height: 195px;
        padding-bottom: 24px;
        text-align: justify !important;
    }

    .product .product-description-custom {
        align-self: stretch;
        color: var(--text-primary-base);
        font-family: "Lato", sans-serif;
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        line-height: 28px;
        min-height: 10px;
        padding-bottom: 24px;
    }

    .product .overlay {
        content: "";
        position: absolute;
        bottom: -30px;
        left: 0;
        width: 40px;
        height: 5px;
        border-radius: 20px;
        background-color: var(--text-primary-dark);
    }

    /* Satu Atap */
    .satu-atap {
        background-color: #ffffff;
        padding: 80px 0;
    }

    .satu-atap .satu-title {
        color: var(--text-primary-base);
        text-align: center;
        font-family: "Cardo", serif;
        font-size: 56px;
        font-style: normal;
        font-weight: 700;
        line-height: 88px;
    }

    .satu-atap .satu-description {
        color: var(--text-primary-base);
        max-width: 790px;
        margin: auto;
        text-align: center;
        font-family: "Lato", sans-serif;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 34px;
    }

    .satu-atap .satu-brand {
        color: var(--text-primary-base);
        font-family: "Montserrat", sans-serif;
        font-size: 26px;
        font-style: normal;
        font-weight: 700;
        line-height: 48px;
    }

    .satu-atap .satu-subbrand {
        color: var(--text-primary-base);
        text-align: right;
        font-family: "Lato", sans-serif;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 28px;
    }

    /* Outlet */
    .outlet {
        background-color: var(--colors-black);
        color: white;
    }

    .outlet .outlet-heading {
        position: absolute;
        top: 25px;
        left: 0;
    }

    .outlet .outlet-heading-content {
        display: flex;
        width: 488px;
    }

    .outlet .outlet-banner {
        align-self: stretch;
        color: var(--background-primary);
        font-family: "Cardo", serif;
        font-size: 56px;
        font-style: normal;
        line-height: 88px;
        font-weight: 700;
    }

    .outlet .outlet-title {
        align-self: stretch;
        color: var(--background-primary);
        font-family: "Cardo", serif;
        font-size: 56px;
        font-style: normal;
        line-height: 88px;
        font-weight: 700;
    }

    .outlet .outlet-subtitle {
        align-self: stretch;
        color: var(--background-primary);
        font-family: "Lato", sans-serif;
        font-size: 42px;
        font-style: normal;
        font-weight: 900;
        line-height: 68px;
    }

    .outlet .outlet-description {
        align-self: stretch;
        color: var(--background-primary, #fff);
        font-family: Lato;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 34px;
    }

    .outlet .overlay {
        width: 200px;
        height: 7px;
        background-color: white;
    }

    .outlet .outlet-galeri {
        width: 20%;
    }

    /* Portfolio */
    .portfolio {
        background-color: white;
    }

    .portfolio .portfolio-title {
        color: var(--text-primary-base);
        font-family: "Cardo", serif;
        font-size: 56px;
        font-style: normal;
        line-height: 88px;
        font-weight: 700;
        text-align: center;
    }

    .portfolio .portfolio-description {
        color: var(--text-primary-base);
        max-width: 500px;
        margin: auto;
        text-align: center;
        font-family: "Lato", sans-serif;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 34px;
    }

    .portfolio .portfolio-description-2 {
        color: var(--text-primary-base);
        max-width: 1120px;
        margin: auto;
        text-align: center;
        font-family: "Lato", sans-serif;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 34px;
    }

    .portfolio #carousel-portfolio-2 .item img {
        max-height: 244px;
        object-fit: cover;
    }

    /* Media Partner */
    .media {
        background-color: white;
    }

    .media .media-title {
        color: var(--text-primary-base);
        font-family: "Cardo", serif;
        font-size: 56px;
        font-style: normal;
        line-height: 88px;
        font-weight: 700;
        text-align: center;
    }

    .media .overlay {
        width: 385px;
        height: 8px;
        background: var(--text-primary-base, #4f4f4f);
    }

    /* Kata Mereka */
    .kata {
        background-color: #ffffff;
    }

    .kata .kata-title {
        color: var(--text-primary-base);
        font-family: "Cardo", serif;
        font-size: 56px;
        font-style: normal;
        line-height: 88px;
        font-weight: 700;
        text-align: center;
    }

    .kata .kata-subtitle {
        color: var(--text-primary-base);
        font-family: "Lato", sans-serif;
        font-size: 18px;
        font-style: normal;
        font-weight: 900;
        line-height: 38px;
        text-align: center;
    }

    .kata .owl-carousel .item {
        border: 2px solid var(--grey-300, #cacaca);
        border-radius: 16px;
        cursor: pointer;
    }

    .kata .owl-carousel .item img {
        border-radius: 8px;
    }

    .owl-nav {
        display: block;
        text-align: center;
    }

    .owl-prev,
    .owl-next {
        width: 2.5%;
        color: var(--text-primary-dark);
    }

    .kata .form-kata {
        display: flex;
        width: 50%;
        height: 50px;
        padding: 10px 16px;
        border-radius: 8px;
        border: 1.5px solid var(--grey-100);
        background: var(--background-primary);
        align-items: center;
        gap: 10px;
    }

    .owl-prev,
    .owl-next {
        position: absolute;
        top: 0;
        bottom: 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        text-align: center;
        width: 3.5%;
        color: var(--text-primary-dark);
    }

    .owl-prev {
        left: 0px;
    }

    .owl-next {
        right: 0px;
    }

    /* PRODUCT */
    .onzy-signature {
        background: var(--brand-accent-base, #ffffff);
    }

    .onzy-signature .product-card-title {
        align-self: stretch;
        color: var(--text-primary-base, #4f4f4f);
        font-family: Cardo;
        font-size: 42px;
        font-style: normal;
        font-weight: 700;
        line-height: 68px;
    }

    .onzy-signature .product-description {
        align-self: stretch;
        color: var(--text-primary-base, #4f4f4f);
        font-family: Lato;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 34px;
        padding: 12px 0px;
    }

    .card-product {
        background-color: transparent;
        border: 0px;
    }

    .card-product .card-img-top {
        border-radius: 12px;
        transition: all 0.5s ease;
    }

    .card-product .card-img-top:hover {
        transform: scale(1.1);
        cursor: pointer;
    }

    .card-product .card-body {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        padding-left: 0px;
        padding-right: 0px;
        align-self: stretch;
    }

    .card-product .card-title {
        align-self: stretch;
        color: var(--text-primary-base, #4f4f4f);
        font-family: Montserrat;
        font-size: 26px;
        font-style: normal;
        font-weight: 700;
        line-height: 48px;
        height: 100px;
    }

    .card-product .card-subtitle {
        align-self: stretch;
        color: var(--text-primary-base, #4f4f4f);
        font-family: Lato;
        font-size: 18px;
        font-style: normal;
        font-weight: 900;
        line-height: 38px;
    }

    .card-product .card-text {
        color: var(--text-primary-light, #a7a7a7);
        font-family: Lato;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 34px;
    }

    /* PRODUCT DETAIL */
    .product-detail {
        background: var(--brand-accent-base, #ffffff);
    }

    .product-detail .breadcrumb-item {
        color: var(--text-primary-light, #a7a7a7);
        font-family: Lato;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 28px;
    }

    .product-detail .breadcrumb-item.active {
        color: var(--text-primary-base, #4f4f4f);
        font-family: Lato;
        font-size: 14px;
        font-style: normal;
        font-weight: 900;
        line-height: 28px;
    }

    .product-detail .product-detail-title {
        align-self: stretch;
        color: var(--text-primary-base, #4f4f4f);
        font-family: Cardo;
        font-size: 42px;
        font-style: normal;
        font-weight: 700;
        line-height: 68px;
    }

    .product-detail .product-detail-subtitle {
        align-self: stretch;
        color: var(--text-primary-base, #4f4f4f);
        font-family: Lato;
        font-size: 18px;
        font-style: normal;
        font-weight: 900;
        line-height: 38px;
    }

    .product-detail .product-detail-text {
        align-self: stretch;
        color: var(--text-primary-light, #a7a7a7);
        font-family: Lato;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 34px;
    }

    .product-detail .nav-link.active {
        background-color: var(--colors-black);
    }

    .product-detail .nav-link {
        display: flex;
        padding: 8px 32px;
        justify-content: center;
        align-items: center;
        gap: 10px;
        min-width: 185px;
        border-radius: 8px;
        border: 2px solid var(--text-primary-dark, #343434);
        color: var(--text-primary-dark, #343434);
        font-family: Lato;
        font-size: 16px;
        font-style: normal;
        font-weight: 900;
        line-height: 34px;
    }

    .product-detail .price-tab {
        color: var(--text-primary-base, #4f4f4f);
        font-family: Lato;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 34px;
    }

    .product-detail .form-product-detail .form-label {
        color: var(--text-primary-base, #4f4f4f);
        text-align: center;
        font-family: Lato;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 34px;
    }

    .product-detail .form-product-detail .form-select {
        display: flex;
        padding: 12px 24px;
        gap: 40px;
        border-radius: 8px;
        color: var(--text-primary-base, #4f4f4f);
        font-family: Lato;
        font-size: 16px;
        font-style: normal;
        font-weight: 900;
        line-height: 34px;
    }

    .product-detail .form-product-detail .form-select:focus {
        border-color: var(--text-primary-base);
        outline: 0;
        box-shadow: 0 0 0 0 var(--text-primary-dark);
    }

    .product-detail .form-product-detail .form-select option {
        background-color: var(--background-primary);
        color: var(--text-primary-base);
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    .product-detail .form-product-detail .form-select option:checked,
    .product-detail .form-product-detail .form-select option:hover,
    .product-detail .form-product-detail .form-select option:focus {
        background-color: var(--text-primary-base) !important;
        color: var(--background-primary);
    }

    #productDetail {
        flex-wrap: nowrap;
        overflow: auto;
    }

    .swiper {
        width: 100%;
        height: 100%;
    }

    .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
    }

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

    .swiper {
        width: 100%;
        height: 250px;
        margin-left: auto;
        margin-right: auto;
    }

    .swiper-slide {
        background-size: cover;
        background-position: center;
    }

    .swiper-slide:hover {
        cursor: pointer;
    }

    .productSwiper2 {
        height: 50%;
        width: 100%;
    }

    .productSwiper2 .swiper-slide,
    .productSwiper2 .swiper-slide img {
        border-radius: 16px;
    }

    .productSwiper {
        height: 20%;
        box-sizing: border-box;
        padding: 10px 0;
    }

    .productSwiper .swiper-slide {
        width: 25%;
        height: 100%;
        opacity: 0.5;
        border-radius: 4px;
    }

    .productSwiper .swiper-slide img {
        border-radius: 4px;
    }

    .productSwiper .swiper-slide-thumb-active {
        opacity: 1;
    }

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

    /* Related Item */
    .related-item {
        background: var(--brand-accent-base, #ffffff);
    }

    .related-item .related-item-title {
        color: var(--text-primary-base);
        font-family: "Cardo", serif;
        font-size: 56px;
        font-style: normal;
        line-height: 88px;
        font-weight: 700;
        text-align: center;
    }

    .related-item .overlay {
        width: 350px;
        height: 8px;
        background: var(--text-primary-base, #4f4f4f);
    }

    /* BORDIR */
    /* Hero */
    .bordir-hero {
        background-image: url("../img/bordir/01.Design.jpg");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        min-height: 90vh;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        padding: 0 0 1.5em 0;
    }

    .bordir-hero .bordir-heading {
        display: flex;
        width: 1020px;
        flex-direction: column;
        align-items: center;
        gap: 18px;
        padding: 200px 0px;
    }

    .bordir-hero .bordir-title {
        max-width: 1020px;
        color: var(--background-primary, #fff);
        text-align: center;
        font-family: "Cardo", serif;
        font-size: 56px;
        font-style: normal;
        font-weight: 700;
        line-height: 88px;
    }

    .bordir-hero .bordir-description {
        max-width: 820px;
        align-self: stretch;
        color: var(--background-primary);
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: 38px;
        text-align: center;
        margin: auto;
    }

    .kualitas {
        background: var(--brand-accent-base, #ffffff);
    }

    .kualitas .kualitas-heading {
        max-width: 916px;
    }

    .kualitas .kualitas-title {
        color: var(--text-primary-base, #4f4f4f);
        text-align: center;
        font-family: Cardo;
        font-size: 56px;
        font-style: normal;
        font-weight: 700;
        line-height: 88px;
    }

    .kualitas .kualitas-description {
        color: var(--text-primary-base, #4f4f4f);
        font-family: Lato;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 34px;
    }

    .black-kualitas {
        background: var(--colors-black, #1e1e1e);
    }

    .black-kualitas .black-kualitas-heading {
        max-width: 1300px;
    }

    .black-kualitas .black-kualitas-title {
        color: var(--background-primary, #fff);
        text-align: center;
        font-family: Cardo;
        font-size: 56px;
        font-style: normal;
        font-weight: 700;
        line-height: 88px;
    }

    .black-kualitas .slider-kualitas {
        background: var(--background-primary, #fff);
        max-width: 100vw;
    }

    .black-kualitas .owl-prev {
        left: 70px;
    }

    .black-kualitas .owl-next {
        right: 70px;
    }

    .black-kualitas .black-kualitas-description {
        color: var(--background-primary, #fff);
        font-family: Lato;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 34px;
    }

    .cek-video {
        background-image: url("../img/bordir/02.Design.jpg");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        min-height: 90vh;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        padding: 0 0 1.5em 0;
    }

    .cek-video .video-title {
        color: var(--background-primary, #fff);
        font-family: Cardo;
        font-size: 56px;
        font-style: normal;
        font-weight: 700;
        line-height: 88px;
    }

    /* ABOUT US */
    .about-hero {
        background: var(--brand-accent-base, #ffffff);
    }

    .about-us {
        background: var(--brand-accent-base, #ffffff);
        min-height: 2000px;
        /* min-height: 100vh; */
    }

    .about-text,
    .about-text-2,
    .visi-text {
        align-self: stretch;
        color: var(--text-primary-base, #4f4f4f);
        /* text-align: center; */
        font-family: Lato;
        font-size: 18px;
        font-style: normal;
        font-weight: 900;
        line-height: 38px;
    }

    .about-us .about-img-overlay {
        position: absolute;
        bottom: -210px;
    }

    .about-us .about-text-overlay {
        width: 18px;
        align-self: stretch;
        background: #353a96;
        height: 100%;
    }

    .visi-misi {
        background: var(--brand-accent-base, #ffffff);
    }

    .visi-misi .visi-title {
        align-self: stretch;
        color: var(--text-primary-base, #4f4f4f);
        text-align: center;
        font-family: Cardo;
        font-size: 56px;
        font-style: normal;
        font-weight: 700;
        line-height: 88px;
    }

    .visi-misi .visi-subtitle {
        align-self: stretch;
        color: var(--text-primary-base, #4f4f4f);
        /* text-align: right; */
        font-family: Montserrat;
        font-size: 26px;
        font-style: normal;
        font-weight: 700;
        line-height: 48px;
    }

    /* BLOG */
    .blog {
        background: var(--brand-accent-base, #ffffff);
    }

    .blog .blog-title {
        color: var(--text-primary-base, #4f4f4f);
        font-family: Montserrat;
        font-size: 26px;
        font-style: normal;
        font-weight: 700;
        line-height: 48px;
    }

    .blog #blogDetail,
    .blog #wisataDetail {
        flex-wrap: wrap;
    }

    .blog #blogDetail .nav-link {
        display: flex;
        width: 135px;
        height: 40px;
        padding: 10px 12.4px 10px 11px;
        justify-content: center;
        align-items: center;
        border-radius: 8px;
        border: 1px solid var(--grey-200, #dcdcdc);
        background-color: transparent;
    }

    .blog #blogDetail .nav-link.active {
        background: var(--background-primary, #fff);
        border: 0px;
    }

    .blog #blogDetail .nav-link img {
        max-height: 28px;
    }

    .blog #wisataDetail .nav-link {
        color: var(--text-primary-base, #4f4f4f);
        text-align: center;
        font-family: Lato;
        font-size: 16px;
        font-style: normal;
        font-weight: 900;
        line-height: 34px;
        display: flex;
        padding: 12px 24px;
        align-items: center;
        border-radius: 8px;
        border: 1px solid var(--grey-200, #dcdcdc);
        background-color: transparent;
    }

    .blog #wisataDetail .nav-link.active {
        background: var(--background-primary, #fff);
        border: 0px;
    }

    .blog #wisataDetail .nav-link img {
        max-height: 28px;
    }

    .blog .card-blog {
        width: 100% !important;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        border: 0px;
        border-radius: 16px;
    }

    .blog .card-blog img {
        border-radius: 16px 16px 0 0;
    }

    .blog .card-blog .card-title {
        align-self: stretch;
        color: var(--text-primary-base, #4f4f4f);
        font-family: Montserrat;
        font-size: 26px;
        font-style: normal;
        font-weight: 700;
        line-height: 48px;
    }

    .blog .card-blog .card-text {
        align-self: stretch;
        min-height: 101px;
        overflow: hidden;
        color: var(--text-primary-light, #a7a7a7);
        text-overflow: ellipsis;
        flex-wrap: nowrap;
        font-family: Lato;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 34px;
    }

    .blog .card-blog-small {
        width: 100% !important;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        border: 0px;
        background-color: transparent;
    }

    .blog .card-blog-small .card-title {
        overflow: hidden;
        color: var(--text-primary-base, #4f4f4f);
        text-overflow: ellipsis;
        font-family: Montserrat;
        font-size: 18px;
        font-style: normal;
        font-weight: 700;
        line-height: 38px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        align-self: stretch;
        margin: 0px !important;
    }

    .blog .card-blog-small .card-text {
        overflow: hidden;
        color: var(--text-primary-base, #4f4f4f);
        text-overflow: ellipsis;
        font-family: Lato;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 28px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        align-self: stretch;
    }

    .blog .card-blog-small .card-body {
        padding: 0px;
    }

    .blog .card-blog-small .img-thumb {
        height: 20px;
        width: auto;
    }

    /* FAQ */
    .faq-hero {
        background: var(--brand-accent-base, #ffffff);
    }

    .faq {
        background: var(--brand-accent-base, #ffffff);
    }

    .faq .faq-title {
        color: var(--text-primary-base, #4f4f4f);
        text-align: center;
        font-family: Cardo;
        font-size: 56px;
        font-style: normal;
        font-weight: 700;
        line-height: 88px;
    }

    .faq .accordion-item {
        margin-bottom: 24px;
        border-radius: 12px !important;
        border: 1px solid var(--background-highlight, #f0f0f0);
    }

    .faq .accordion-button {
        border-radius: 12px !important;
        box-shadow: 0 0 0 0;
        color: var(--text-primary-base, #4f4f4f);
        font-family: Montserrat;
        font-size: 26px;
        font-style: normal;
        font-weight: 700;
        line-height: 48px;
        padding-left: 65px;
    }

    .faq .accordion-button::after {
        position: absolute;
        left: 24px;
        width: 24px;
        height: 25px;
        background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="25" viewBox="0 0 24 25" fill="none"><path d="M12.0008 11.2326L8.10078 15.1326C7.91745 15.316 7.68411 15.4076 7.40078 15.4076C7.11745 15.4076 6.88411 15.316 6.70078 15.1326C6.51745 14.9493 6.42578 14.716 6.42578 14.4326C6.42578 14.1493 6.51745 13.916 6.70078 13.7326L11.3008 9.13264C11.5008 8.93264 11.7341 8.83264 12.0008 8.83264C12.2674 8.83264 12.5008 8.93264 12.7008 9.13264L17.3008 13.7326C17.4841 13.916 17.5758 14.1493 17.5758 14.4326C17.5758 14.716 17.4841 14.9493 17.3008 15.1326C17.1174 15.316 16.8841 15.4076 16.6008 15.4076C16.3174 15.4076 16.0841 15.316 15.9008 15.1326L12.0008 11.2326Z" fill="black"/></svg>');
    }

    .faq .accordion-body {
        color: var(--text-primary-base, #4f4f4f);
        font-family: Lato;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 34px;
        padding-left: 65px;
        padding-top: 0px;
        padding-bottom: 24px;
    }

    .faq .accordion-button:not(.collapsed) {
        border-radius: 12px;
        background: var(--background-primary, #fff);
    }

    /* CONTACT */
    .contact {
        background: var(--brand-accent-base, #ffffff);
    }

    .contact .contact-heading {
        display: flex;
        width: 791px;
        flex-direction: column;
        align-items: center;
    }

    .contact .contact-title {
        max-width: 735px;
        color: var(--text-primary-base, #4f4f4f);
        text-align: center;
        font-family: "Cardo", serif;
        font-size: 42px;
        font-style: normal;
        font-weight: 700;
        line-height: 68px;
        margin: 0 auto;
    }

    .contact .contact-description {
        color: var(--text-primary-base, #4f4f4f);
        text-align: center;
        font-family: Lato;
        font-size: 18px;
        font-style: normal;
        font-weight: 900;
        line-height: 38px;
    }

    .contact .btn-app {
        width: 30%;
        padding: 10px 70px;
    }

    .contact .table-responsive {
        background: var(--brand-accent-base, #ffffff);
    }

    .table-contact.with-header {
        background: var(--grey-500, #a7a7a7);
        color: var(--background-primary, #fff);
    }

    .table-contact thead {
        justify-content: center;
        align-items: center;
        gap: 32px;
        position: relative;
        border-radius: 50px;
        height: 90px;
    }

    .table-contact th {
        padding: 20px 20px;
        align-self: stretch;
        background: var(--grey-500, #a7a7a7);
        color: var(--background-primary, #fff);
        font-family: Montserrat;
        font-size: 26px;
        font-style: normal;
        font-weight: 700;
        line-height: 48px;
    }

    .table-contact tbody {
        padding-top: 100px;
    }

    .table-contact tbody > tr {
        display: table-row;
    }

    .table-contact tbody > tr > td {
        display: table-cell;
    }

    .table-contact tbody > tr > td .title-small {
        display: none;
    }

    .table-contact .td-kota {
        width: 30%;
    }

    .table-contact .td-alamat {
        width: 25%;
    }

    .table-contact .td-email {
        width: 25%;
    }

    .table-contact .td-contact {
        width: 20%;
    }

    .table-contact .img-table {
        max-height: 250px;
    }

    .table-contact .table-title {
        color: var(--text-primary-base, #4f4f4f);
        font-family: Montserr at;
        font-size: 26px;
        font-style: normal;
        font-weight: 700;
        line-height: 48px;
    }

    .table-contact .table-subtitle {
        color: var(--text-primary-base, #4f4f4f);
        font-family: Montserrat;
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: 38px;
    }

    .table-contact .table-desc {
        color: var(--text-primary-base, #4f4f4f);
        font-family: Lato;
        font-size: 18px;
        font-style: normal;
        font-weight: 900;
        line-height: 38px;
    }

    .table-contact .table-description {
        color: var(--text-primary-base, #4f4f4f);
        font-family: Lato;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 22px;
    }
}

/* `xxl` applies to x-large devices (large desktops, less than 1400px) */

@media (min-width: 1400px) {
    .pe-xxl-4 {
        padding-right: 1rem !important;
    }

    .katalog .katalog-nb {
        min-height: 120px !important;
    }

    .max-font-size {
        font-size: 35px !important;
    }

    .container,
    .container-show-lg {
        max-width: 1350px;
    }

    .nav-link {
        color: var(--text-primary-base);
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: 28px;
    }

    .dropdown-menu li {
        color: var(--text-primary-dark);
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: 28px;
    }

    /* HOME */
    .hero .hero-heading-content-1 {
        display: flex;
        width: 510px;
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
        padding-top: 45px;
    }

    .hero .hero-heading-content-2 {
        display: flex;
        width: 660px;
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
        padding-top: 100px;
    }

    .hero .hero-heading-content-3 {
        display: flex;
        width: 1300px;
        align-items: flex-end;
        gap: 18px;
        padding-bottom: 30px;
    }

    .hero .hero-heading-content-4 {
        display: flex;
        width: 1300px;
        align-items: flex-end;
        gap: 18px;
        padding-bottom: 30px;
    }

    .hero .hero-heading-content-5 {
        display: flex;
        width: 1300px;
        align-items: flex-end;
        gap: 18px;
        padding-bottom: 30px;
    }

    .hero .hero-heading-content-6 {
        display: flex;
        width: 1300px;
        align-items: flex-end;
        gap: 18px;
        padding-bottom: 30px;
    }

    .hero .hero-heading-content-3 .hero-head {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        flex: 1 0 0;
    }

    .hero .hero-heading-content-3 .hero-subhead {
        display: flex;
        width: 442px;
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-start;
        gap: 18px;
        flex-shrink: 0;
    }

    .hero .hero-content {
        margin-left: 50px;
        color: #fff;
    }

    .hero .hero-title {
        align-self: stretch;
        color: var(--text-primary-base);
        font-family: "Cardo", serif;
        font-size: 72px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }

    .hero .hero-title-2 {
        align-self: stretch;
        color: var(--text-primary-base);
        font-family: "Cardo", serif;
        font-size: 60px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }

    .hero .hero-title-3 {
        align-self: stretch;
        color: var(--text-primary-base);
        font-family: "Cardo", serif;
        font-size: 60px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }

    .hero .hero-title-4 {
        align-self: stretch;
        color: var(--text-primary-base);
        font-family: "Cardo", serif;
        font-size: 48px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }

    .hero .hero-subtitle {
        align-self: stretch;
        color: var(--text-primary-base);
        font-family: "Montserrat", sans-serif;
        font-size: 26px;
        font-style: normal;
        font-weight: 700;
        line-height: 48px;
    }

    .hero-description {
        align-self: stretch;
        color: var(--text-primary-base);
        font-family: "Lato", sans-serif;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 28px;
    }
}

/* `xxxl` applies to x-large devices (large desktops, less than 1900px) */

@media (min-width: 1900px) {
    .max-font-size {
        font-size: 35px !important;
    }

    .katalog .katalog-nb {
        min-height: 120px !important;
    }
}