/* ==========================================================================
   RESET & BASE STYLES
   ========================================================================== */

/* 1. Use a more-intuitive box-sizing model */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* 2. Remove default margin */
*:not(dialog) {
    margin: 0;
}

/* 3. Enable keyword animations */
@media (prefers-reduced-motion: no-preference) {
    html {
        interpolate-size: allow-keywords;
        color-scheme: light only;
    }
}

body {
    /* 4. Increase line-height */
    line-height: 1.5;
    /* 5. Improve text rendering */
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}

/* 6. Improve media defaults */
img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

/* 7. Inherit fonts for form controls */
input,
button,
textarea,
select {
    font: inherit;
}

/* 8. Avoid text overflows */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}

/* 9. Improve line wrapping */
p {
    text-wrap: pretty;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    text-wrap: balance;
}

/* 10. Create a root stacking context */
#root,
#__next {
    isolation: isolate;
}

:root {
    color-scheme: light;
    --font-libre: 'Libre Caslon Text', serif;
    --font-geist: 'Geist', sans-serif;

    /* MONOCHROME COLOR PALETTE */
    --white-trans-full: rgba(255, 255, 255, 0);
    --white-trans-2: rgba(255, 255, 255, 0.2);
    --white-one: #ffffff;
    --gray-950: #12171c;
    --gray-900: #212830;
    --gray-800: #212831;
    --gray-700: #3b4754;
    --gray-600: #46515d;
    --gray-500: #6e7887;
    --gray-400: #98a1ae;
    --gray-300: #d1d5db;
    --gray-200: #e2e5e9;
    --gray-100: #f3f5f6;
    --gray-50: #f9fafb;
    --gray-25: #fcfcfb;
    --gray-15: #fefefe;

    /* SCARLET RED COLOR PALETTE */
    --scarlet-red-950: #821a1e;
    --scarlet-red-900: #9d171d;
    --scarlet-red-800: #9d171d;
    --scarlet-red-700: #be171e;
    --scarlet-red-600: #e22028;
    /* PRIMARY COLOR LOGO */
    --scarlet-red-500: #f53e46;
    --scarlet-red-400: #fc6d73;
    --scarlet-red-300: #ffa2a6;
    --scarlet-red-200: #ffc8ca;
    --scarlet-red-100: #ffe1e2;
    --scarlet-red-50: #fef2f2;
}

/* DARK MODE SYSTEM START */
[data-theme="dark"] {
    color-scheme: dark;

    /* MONOCHROME COLOR PALETTE (DARK MODE INVERTED) */
    --white-trans-full: rgba(18, 23, 28, 0);
    --white-trans-2: rgba(255, 255, 255, 0.1);
    --white-one: #0f0f0f;
    --gray-950: #fcfcfb;
    --gray-900: #f9fafb;
    --gray-800: #f3f5f6;
    --gray-700: #e2e5e9;
    --gray-600: #d1d5db;
    --gray-500: #98a1ae;
    --gray-400: #6e7887;
    --gray-300: #46515d;
    --gray-200: #2b3440;
    --gray-100: #212830;
    --gray-50: #1a2027;
    --gray-25: #14191f;
    --gray-15: #12171c;

    /* SCARLET RED COLOR PALETTE (DARK MODE ACCENTS) */
    --scarlet-red-950: #fee2e2;
    --scarlet-red-900: #fecaca;
    --scarlet-red-800: #fca5a5;
    --scarlet-red-700: #f87171;
    --scarlet-red-600: #ef4444;
    --scarlet-red-500: #f87171;
    --scarlet-red-400: #fc6d73;
    --scarlet-red-300: #7f1d1d;
    --scarlet-red-200: #991b1b;
    --scarlet-red-100: #450a0a;
    --scarlet-red-50: #2a090b;
}

[data-theme="dark"] body {
    background-color: var(--gray-15);
    color: var(--gray-800);
}

[data-theme="dark"] .whatsapp-floating-button {
    background: rgba(22, 28, 35, 0.98);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
}

[data-theme="dark"] .navbar-mobile-wrapper,
[data-theme="dark"] .navbar-mobile-container {
    background-color: var(--white-one);
}

[data-theme="dark"] .hamburger-inner,
[data-theme="dark"] .hamburger-inner::after,
[data-theme="dark"] .hamburger-inner::before,
[data-theme="dark"] header.is-scrolled .hamburger-inner,
[data-theme="dark"] header.is-scrolled .hamburger-inner::after,
[data-theme="dark"] header.is-scrolled .hamburger-inner::before,
[data-theme="dark"] .hamburger.is-active .hamburger-inner::after,
[data-theme="dark"] .hamburger.is-active .hamburger-inner::before {
    background-color: var(--gray-950) !important;
}

[data-theme="dark"] header.is-scrolled .hamburger-inner {
    background-color: #fff !important;
}

[data-theme="dark"] header.is-scrolled .hamburger.is-active .hamburger-inner {
    background-color: #0f0f0f !important;
}

[data-theme="dark"] .menu-link,
[data-theme="dark"] .text-menu-link,
[data-theme="dark"] .text-menu-link p,
[data-theme="dark"] #mobile-menu-level-2 #submenu-title,
[data-theme="dark"] #mobile-menu-level-2 .back-to-level-1 {
    color: var(--gray-950) !important;
}

[data-theme="dark"] .menu-link .icon-menu-link svg,
[data-theme="dark"] .menu-link.has-submenu .icon-menu-link svg,
[data-theme="dark"] #mobile-menu-level-2 .back-to-level-1 svg {
    fill: var(--gray-950) !important;
    color: var(--gray-950) !important;
}

[data-theme="dark"] .sub-menu-list li a {
    color: var(--gray-900) !important;
    background-color: var(--white-one) !important;
    border-bottom-color: var(--gray-200) !important;
}

[data-theme="dark"] .menu-link:hover {
    background-color: var(--gray-100) !important;
}

[data-theme="dark"] .cta-btn-green-block a,
[data-theme="dark"] .cta-btn-green-block a span,
[data-theme="dark"] .cta-btn-green-sm a,
[data-theme="dark"] .cta-btn-green-sm a span {
    color: #ffffff !important;
}

[data-theme="dark"] .cta-btn-green-block a svg,
[data-theme="dark"] .cta-btn-green-block a svg path,
[data-theme="dark"] .cta-btn-green-sm a svg,
[data-theme="dark"] .cta-btn-green-sm a svg path {
    fill: #ffffff !important;
}

[data-theme="dark"] .icon-arrow-up svg,
[data-theme="dark"] .icon-arrow-up svg path,
[data-theme="dark"] .icon-arrow-up svg .cls-2 {
    fill: var(--gray-950) !important;
    color: var(--gray-950) !important;
}

[data-theme="dark"] .left-btn-floating a {
    background-color: var(--white-one) !important;
    border-color: var(--gray-200) !important;
}

[data-theme="dark"] .left-btn-floating a .text-btn-singleline span {
    color: var(--gray-950) !important;
}

[data-theme="dark"] .title-hero-main,
[data-theme="dark"] .title-hero-main h1,
[data-theme="dark"] .title-hero-main h2,
[data-theme="dark"] .title-hero-main h1 span,
[data-theme="dark"] .title-hero-main h2 span,
[data-theme="dark"] .desc-hero-main,
[data-theme="dark"] .desc-hero-main p,
[data-theme="dark"] .text-guarantee,
[data-theme="dark"] .text-guarantee h3,
[data-theme="dark"] .text-guarantee h3 span,
[data-theme="dark"] .text-content-about,
[data-theme="dark"] .text-content-about p,
[data-theme="dark"] .tagline-about h2 {
    color: #ffffff !important;
}

[data-theme="dark"] .tagline-about h2 span {
    color: #e41f28 !important;
}

[data-theme="dark"] header:hover,
[data-theme="dark"] header.is-scrolled {
    background: #0f0f0f !important;
    background-color: #0f0f0f !important;
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.6) !important;
}

[data-theme="dark"] .navbar-items-menu ul li a,
[data-theme="dark"] .navbar:hover .navbar-items-menu ul li a,
[data-theme="dark"] header.is-scrolled .navbar-items-menu ul li a {
    color: #ffffff !important;
}

[data-theme="dark"] .navbar-items-menu ul li a .chevron-down svg path.cls-1,
[data-theme="dark"] .navbar:hover .navbar-items-menu ul li a .chevron-down svg path.cls-1,
[data-theme="dark"] header.is-scrolled .navbar-items-menu ul li a .chevron-down svg path.cls-1 {
    fill: #ffffff !important;
}

[data-theme="dark"] .cta-btn-outline-sm a {
    color: #ffffff !important;
    border-color: #ffffff !important;
}

[data-theme="dark"] .cta-btn-outline-sm a .text-btn-singleline span {
    color: var(--gray-950) !important;
}

[data-theme="dark"] .cta-btn-outline-sm .icon-chevrondown-small svg path,
[data-theme="dark"] .cta-btn-outline-sm .icon-chevrondown-small svg .cls-1 {
    fill: #ffffff !important;
}

[data-theme="dark"] .navbar:hover .cta-btn-outline-sm a,
[data-theme="dark"] header.is-scrolled .cta-btn-outline-sm a,
[data-theme="dark"] .cta-btn-outline-sm.is-scrolled a {
    color: #ffffff !important;
    border-color: #ffffff !important;
}

[data-theme="dark"] .navbar:hover .cta-btn-outline-sm .text-btn-singleline span,
[data-theme="dark"] header.is-scrolled .cta-btn-outline-sm .text-btn-singleline span,
[data-theme="dark"] .cta-btn-outline-sm.is-scrolled .text-btn-singleline span {
    color: #fff !important;
}

[data-theme="dark"] .navbar:hover .cta-btn-outline-sm .icon-chevrondown-small svg path,
[data-theme="dark"] header.is-scrolled .cta-btn-outline-sm .icon-chevrondown-small svg path,
[data-theme="dark"] .cta-btn-outline-sm.is-scrolled .icon-chevrondown-small svg path {
    fill: #fff !important;
}

[data-theme="dark"] .cta-btn-outline-sm.dropdown-hover:hover>ul.dropdown-menu-small li a {
    color: var(--gray-950) !important;
    background-color: var(--white-one) !important;
}

[data-theme="dark"] .cta-btn-outline-sm.dropdown-hover:hover>ul.dropdown-menu-small li a:hover {
    background-color: var(--gray-100) !important;
    color: #fff !important;
}

[data-theme="dark"] .wrp-nav-item .navbar-nav li:hover>ul.dropdown-menu-small li a:focus,
[data-theme="dark"] .wrp-nav-item .navbar-nav li:hover>ul.dropdown-menu-small li a:hover,
[data-theme="dark"] .wrp-nav-item .navbar-nav li:hover>ul.dropdown-menu-small li a:hover {
    background: var(--gray-100) !important;
    background-color: var(--gray-100) !important;
}

[data-theme="dark"] .wrp-closing-cta {
    background: #e41f28 url(../images/grass-section-closing-cta.png) bottom center no-repeat !important;
    background-color: #e41f28 !important;
    background-size: 100% auto !important;
}

[data-theme="dark"] .title-head-closing-cta,
[data-theme="dark"] .title-head-closing-cta h2,
[data-theme="dark"] .title-head-closing-cta h2 span,
[data-theme="dark"] .desc-closing-cta,
[data-theme="dark"] .desc-closing-cta p {
    color: #ffffff !important;
}

[data-theme="dark"] .section-why-gonam {
    background: var(--gray-15) !important;
    background-color: var(--gray-15) !important;
}

[data-theme="dark"] .title-why-gonam,
[data-theme="dark"] .title-why-gonam h2,
[data-theme="dark"] .title-why-gonam h2 span,
[data-theme="dark"] .text-content-why,
[data-theme="dark"] .text-content-why p {
    color: #ffffff !important;
}

[data-theme="dark"] .section-package-gonam {
    background: var(--white-one) !important;
    background-color: var(--white-one) !important;
}

[data-theme="dark"] .title-left-package,
[data-theme="dark"] .title-left-package h2 {
    color: #ffffff !important;
}

[data-theme="dark"] .card-description-package {
    background: var(--gray-15) !important;
    background-color: var(--gray-15) !important;
}

[data-theme="dark"] .card-box-package:hover .card-description-package {
    background: #e41f28 !important;
    background-color: #e41f28 !important;
}

[data-theme="dark"] .card-title-package h3,
[data-theme="dark"] .card-title-package h3 a,
[data-theme="dark"] .card-box-package:hover .card-title-package h3 a {
    color: #ffffff !important;
}

[data-theme="dark"] .card-price-left,
[data-theme="dark"] .card-price-left a,
[data-theme="dark"] .price-label-card-cta,
[data-theme="dark"] .price-value-card-cta,
[data-theme="dark"] .price-value-card-cta p {
    color: #ffffff !important;
}

[data-theme="dark"] .card-box-package:hover .card-benefit-package span.badge-chips {
    color: #ffffff !important;
}

[data-theme="dark"] .card-cta-right a {
    background: #e41f28;
    color: #ffffff !important;
}

[data-theme="dark"] .card-cta-right a:hover,
[data-theme="dark"] .card-box-package:hover .card-cta-right a,
[data-theme="dark"] .card-box-package:hover .card-cta-right a:hover {
    color: #ffffff !important;
}

[data-theme="dark"] .brand-logo-title img,
[data-theme="dark"] .brand-logo-title a img,
[data-theme="dark"] .logo-brand-header a img {
    content: url("../images/logo/logo-gonam-aqiqah-white.png") !important;
}

/* DARK MODE SYSTEM END */

.center-container {
    max-width: 1320px;
    margin: 0 auto;
}

/* FLOATING BUTTON WA DESKTOP START */
.whatsapp-floating-button {
    width: 100%;
    display: none;
}

/* FLOATING BUTTON WA DESKTOP END */

/* ==========================================================================
   DESKTOP NAVIGATION START
   ========================================================================== */

.navbar {
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 10;
    background: transparent;
    transition: 0.5s;
    border-bottom: 1px solid var(--white-trans-2);
    padding-top: 6px;
    padding-bottom: 6px;
}

.row-navbar {
    width: 100%;
    padding-top: 6px;
    padding-bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 9;
}

.ornament-white-navbar {
    width: 434px;
    height: 124px;
    top: -4px;
    position: fixed;
    left: -4px;
    z-index: 10;
}

.ornament-white-navbar svg {
    width: 100%;
    height: 100%;
    display: block;
    fill: var(--white-one);
}

.logo-brand-header {
    width: 210px;
    height: 56px;
}

.logo-brand-header h2 {
    font: 400 12px/16.64px var(--font-geist);
    color: var(--gray-200);
}

.logo-brand-header a {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding-bottom: 1px;
    text-decoration: none;
    transition: 0.5s;
    position: relative;
    z-index: 12;
}

.logo-brand-header a img {
    max-width: 100%;
    height: 100%;
    object-fit: fill;
}

.logo-brand-header a:hover,
.logo-brand-header a:hover h2 {
    text-decoration: none;
    outline: none;
    color: var(--scarlet-red-600);
    transition: 0.5s;
}

.logo-brand-header a img .logo-main {
    width: 100%;
    height: auto;
    max-width: 100%;
}

.multy-cta-navbar {
    width: 100%;
    height: 56px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}

.navbar-mobile {
    display: none;
}

header {
    width: 100%;
    height: auto;
    min-height: 124px;
    position: fixed !important;
    top: 0px;
    z-index: 8;
    background: transparent;
    transition: all 0.5s ease-in-out;
}

header:hover,
header.is-scrolled {
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(32px);
    -webkit-backdrop-filter: blur(32px);
    box-shadow: 0 1px 10px rgba(151, 164, 175, .29);
}

.header.scroll {
    transform: translateY(-98px);
    transition: .4s ease-in-out;
}

.navbar-desc {
    background: transparent none;
    min-height: 72px;
    width: 100%;
    transition: 0.4s;
    position: fixed;
    top: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    z-index: 99;
}

.navbar-hidden {
    transform: translateY(-108px);
    transition: 0.4s;
}

.navbar-flex {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    padding-left: 0px;
    padding-right: 0px;
    position: relative;
    z-index: 7;
}

.navbar-gradients {
    background: transparent none;
    min-height: 14px;
    padding-top: 4px;
    padding-bottom: 4px;
    z-index: 9;
}

.navbar-solid {
    background: #034ea1;
    border: 1px solid #034ea1;
    border-radius: 5px;
    min-height: 18px;
    padding: 10px 0px;
    justify-content: center !important;
    z-index: 8;
    position: relative;
    box-shadow: 0 1px 10px rgba(151, 164, 175, .24);
}

.navbar:hover {
    background: transparent;
    border-radius: 0;
}

[data-theme="dark"].navbar:hover {
    background: #0f0f0f !important;
    border-radius: 0;
}

.navbar:hover .navbar::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 124px;
    background: transparent;
    border-radius: 0;
}

.right-header {
    padding-right: 0px;
}

.logo-brand {
    width: 124px;
    overflow: unset;
    position: relative;
    transition: 0.4s;
    margin-left: 10px;
}

.logo-brand a img,
.logo-brand-centered a img {
    max-width: 100%;
}

.logo-brand-centered {
    width: 304px;
}

.navbar-items-menu {
    width: 99.64%;
    min-height: 10px;
    height: auto;
}

.navbar-nav {
    flex-direction: row;
}

.wrp-nav-item {
    min-width: 820px;
    width: auto;
    display: flex;
    justify-content: flex-end;
    gap: 18px;
}

.header-right-content .row:last-child {
    display: none;
}

.nav-fill {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 16px;
}

.chevron-down {
    width: 16px;
    height: auto;
    padding: 3.5px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-top: 3.5px;
}

.navbar-items-menu ul li a:hover .all-menu svg path {
    fill: var(--scarlet-red-600);
    transition: 0.5s;
}

.text-nav {
    width: auto;
    height: auto;
    padding-right: 8px;
}

.text-nav p {
    margin-bottom: 0px;
}

.chevron-down svg {
    width: 100%;
    height: auto;
    max-width: 100%;
}

.chevron-down svg path.cls-1 {
    fill: var(--white-one);
    transition: 0.5s;
}

.navbar-items-menu ul li a {
    cursor: pointer;
    position: relative;
    overflow: unset;
    transition: 0.5s;
    color: var(--white-one);
    font: normal 400 16.56px/21.64px var(--font-geist);
    letter-spacing: 0.36px;
    line-height: 148%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding-left: 3.5px;
    padding-right: 3.5px;
}

.navbar:hover .navbar-items-menu ul li a,
header.is-scrolled .navbar-items-menu ul li a {
    color: var(--gray-600);
}

.navbar:hover .navbar-items-menu ul li a .chevron-down svg path.cls-1,
header.is-scrolled .navbar-items-menu ul li a .chevron-down svg path.cls-1 {
    fill: var(--gray-600);
}

header.is-scrolled .cta-btn-outline-sm a,
.cta-btn-outline-sm.is-scrolled a {
    border-color: var(--scarlet-red-600);
}

header.is-scrolled .cta-btn-outline-sm .text-btn-singleline span,
.cta-btn-outline-sm.is-scrolled .text-btn-singleline span,
header.is-scrolled .cta-btn-outline-sm .icon-chevrondown-small svg path,
.cta-btn-outline-sm.is-scrolled .icon-chevrondown-small svg path {
    color: var(--scarlet-red-600);
    fill: var(--scarlet-red-600);
}

.navbar-items-menu ul li a:hover,
.navbar-items-menu ul li a:hover .chevron-down svg path.cls-1 {
    color: var(--scarlet-red-600) !important;
    fill: var(--scarlet-red-600) !important;
}

.navbar-items-menu ul li a:focus {
    color: var(--scarlet-red-500);
}

.navbar-items-menu ul li a::before {
    content: "";
    width: 16px;
    height: 2px;
    background: var(--scarlet-red-400);
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    text-align: center;
    bottom: -1.5px;
    transition: 0.5s;
    opacity: 0;
}

.navbar-items-menu ul li:hover>a::before {
    content: "";
    width: 16px;
    height: 2px;
    bottom: -1.5px;
    transition: 0.5s;
    opacity: 1;
}

.navbar-items-menu ul li:hover>a {
    text-decoration: none;
    outline: none;
    color: var(--white-one);
    transition: 0.5s;
}

.navbar-items-menu ul li:focus>a {
    text-decoration: none;
    outline: none;
    color: var(--scarlet-red-600);
    transition: 0.5s;
}

.navbar-items-menu ul li:hover>a .chevron-down svg path {
    fill: var(--white-one);
    transition: 0.5s;
}

.dropdown-menu {
    position: absolute;
    left: 0px;
    top: 100%;
    min-width: 280px;
    z-index: 100;
    display: none;
    box-shadow: 0px 9px 8px 4px rgba(0, 0, 0, 0.056);
}

li.dropdown-hover {
    position: static;
}

.wrp-nav-item .nav-item {
    flex: unset !important;
}

.navbar-items-menu ul li.dropdown-hover ul li a {
    font: normal 400 16.56px/20.64px var(--font-geist);
    text-align: left;
    color: var(--gray-500);
    letter-spacing: -0.18px;
    line-height: 138%;
}

.dropdown-menu-small>li:first-child {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

.dropdown-menu-small>li:last-child {
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

.dropdown-menu-small li a:hover {
    color: var(--scarlet-red-600);
    border-radius: 6px;
}

/* SLIDE IN DROPDOWN ANIMATION */
.slideIn {
    animation-name: slideIn;
}

.animate {
    animation-duration: 0.3s;
    animation-fill-mode: both;
}

.navbar-nav li:hover>ul.first-level {
    border-top: 16px solid transparent;
}

@keyframes slideIn {
    0% {
        transform: translateY(1rem);
        opacity: 0;
    }

    100% {
        transform: translateY(0rem);
        opacity: 1;
    }
}

.dropdown-hover:hover>.dropdown-menu {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    position: absolute;
    left: 0px;
    top: 100%;
    border-image-source: linear-gradient(0deg, rgba(221, 221, 221, 1) 54%, rgba(255, 255, 255, 0) 100%);
    border-image-slice: 1;
    border-bottom-left-radius: 6.4px;
    border-bottom-right-radius: 6.4px;
    height: auto;
    width: 100%;
}

.navbar-items-menu ul li.position-relative a::before {
    margin-left: unset;
    margin-right: unset;
    left: 1px;
    width: 2px;
    height: 16px;
    bottom: 10px;
    opacity: 0;
}

.wrp-nav-item .navbar-nav li:hover>ul li.position-relative a:hover>a::before {
    content: "";
    width: 2px;
    height: 16px;
    bottom: 10px;
    left: 1px;
    transition: 0.5s;
    opacity: 1;
}

.wrp-nav-item .navbar-nav li:hover>ul.dropdown-menu-small li a:hover {
    color: var(--scarlet-red-600);
    transition: 0.5s;
}

.wrp-nav-item .navbar-nav li:hover>ul.dropdown-menu-small li a:hover::before {
    content: "";
    width: 2px;
    height: 16px;
    bottom: 15px;
    left: 1px !important;
    transition: 0.5s;
    opacity: 1;
    position: absolute;
    background: var(--scarlet-red-600);
    margin-left: unset;
    margin-right: unset;
}

.dropdown-menu-ds {
    width: 94px !important;
    min-width: 64px;
    padding: 0px 2px;
    text-align: center;
    top: -2px;
    z-index: 3;
}

.dropdown-menu-ds:hover {
    background-color: #f8f9fa;
}

.dropdown-menu-ds a {
    padding: 5px 5px !important;
    font-size: 15px;
    font-weight: 600;
    color: #363636;
}

.dropdown-menu-ds .dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 15px;
    cursor: pointer;
}

.section {
    padding: 86px 0px 76px 0px;
}

.sub-menu-company {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1050;
    background: #fcfcfb;
    min-height: 368px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    padding: 45px 16px 36px 16px;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.08);
}

li.dropdown-hover:hover>.sub-menu-company {
    display: flex;
    min-width: 100%;
    margin-left: -0.5px;
}

.wrp-nav-item .navbar-nav li:hover>ul.dropdown-menu-small {
    display: block;
    border-image-source: linear-gradient(0deg, rgba(221, 221, 221, 1) 54%, rgba(255, 255, 255, 0) 100%);
    border-image-slice: 1;
    border-bottom-left-radius: 1px;
    border-bottom-right-radius: 1px;
    height: auto;
    max-width: 325px;
    min-width: 260px;
    width: auto;
    margin-top: -18px;
}

.dropdown-menu-small {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1050;
    background: transparent;
    min-height: 50px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.08);
    padding: 10px 0px 0px 0px;
}

.wrp-nav-item ul li .dropdown-menu-small a {
    color: #363636;
    font-size: 14px;
    line-height: 22px;
    font-family: 'Rubik-Medium', sans-serif;
    letter-spacing: 0.35px;
    font-weight: 200;
    padding: 12.5px 14px 13px 14px;
    white-space: unset !important;
}

.wrp-nav-item .navbar-nav li:hover>ul.dropdown-menu-small li {
    width: 100%;
    height: auto;
    display: block;
    overflow: unset;
    background: var(--white-one);
    padding: 2px 0px;
    border-bottom: 1px solid var(--gray-100);
}

.wrp-nav-item .navbar-nav li:hover>ul.dropdown-menu-small li:last-child {
    border-bottom: 1px solid var(--white-one);
}

.wrp-nav-item .navbar-nav li:hover>ul.dropdown-menu-small li a {
    white-space: unset;
}

.wrp-nav-item .navbar-nav li:hover>ul.dropdown-menu-small li a:focus,
.wrp-nav-item .navbar-nav li:hover>ul.dropdown-menu-small li a:hover {
    background: var(--scarlet-red-50);
    color: var(--scarlet-red-600);
}

.burger-mobile {
    display: none;
}

.navbar-mobile-container {
    display: none;
}

/* ==========================================================================
   DESKTOP NAVIGATION END
   ========================================================================== */
/* ==========================================================================
   SECTION HERO IMAGES
   ========================================================================== */

.hero-images {
    width: 100%;
    height: 100vh;
    /* background: var(--scarlet-red-600); */
    background: #e41f28;
    position: relative;
    overflow: hidden;
}

.grass-hero-images {
    background: transparent url(../images/grass-hero-images.png) bottom center no-repeat;
    background-size: 100% auto;
    width: 100%;
    min-height: 100vh;
    position: absolute;
    bottom: -0.04%;
    left: 0;
    right: 0;
    z-index: 4;
}

.grass-hero-images img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.content-hero {
    width: 100%;
    height: 104vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 5;
}

.content-hero-centered {
    width: 100%;
    min-height: 360px;
    height: 100vh;
    background-color: transparent;
    padding-top: 120px;
    padding-bottom: 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 5;
    position: relative;
}

.left-content-hero {
    width: 57%;
    min-height: 120px;
    padding: 20px 32px;
}

.hero-sheep-two {
    width: 132px;
    height: auto;
    position: absolute;
    bottom: 13.24%;
    left: 7.24%;
    z-index: 6;
    transform: scaleX(-1);
}

.hero-sheep-two img {
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: cover;
    object-position: center;
}

.hero-sheep-three {
    width: 98px;
    height: auto;
    position: absolute;
    bottom: 5.24%;
    right: 11.5%;
    z-index: 5;
}

.hero-sheep-three img {
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: cover;
    object-position: center;
}

.image-model-gonamaqiqah {
    width: 552px;
    height: 612px;
    position: relative;
    margin-bottom: -64px;
    z-index: 3;
}

.content-hero-centered .left-clouds-one {
    left: -2%;
}

.content-hero-centered .left-clouds-two {
    right: 42%;
}

.content-hero-centered .left-clouds-three {
    right: 49%;
}

.image-model-gonamaqiqah img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.right-content-hero {
    width: 43%;
    min-height: 120px;
    padding: 20px 5px 20px 15px;
}

.title-hero-main {
    width: 100%;
    min-height: 64px;
    height: auto;
    font: normal 400 18.56px/26.24px var(--font-geist);
}

.title-hero-main h1,
.title-hero-main h2 {
    font: normal 600 44.44px/58.56px var(--font-geist);
    color: var(--white-one);
    letter-spacing: -0.64px;
    text-align: left;
    line-height: normal;
}

.title-hero-main h1 span,
.title-hero-main h2 span {
    font: normal 700 42.44px/56.56px var(--font-libre);
    color: var(--white-one);
    letter-spacing: -0.64px;
    text-align: left;
    font-weight: bold;
    font-style: italic;
}

.desc-hero-main {
    font: normal 400 18.56px/26.24px var(--font-geist);
    color: var(--gray-100);
    text-align: left;
    letter-spacing: -0.20px;
}

.card-cta-socialproof {
    background: var(--white-one);
    width: 100%;
    min-height: 192px;
    border-radius: 16px;
    margin-top: 36px;
    margin-bottom: 10px;
    padding: 30px 24px 24px 24px;
    box-shadow: 0 1px 10px rgba(72, 57, 57, 0.76);
    position: relative;
}

.socialproof {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.left-social-proofs {
    width: 37%;
    min-height: 120px;
}

.right-social-proofs {
    width: 53%;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    row-gap: 24px;
    padding: 0px 4px;
}

.ribbon-holder {
    position: absolute;
    right: -5px;
    top: -5px;
    z-index: 1;
    width: 75px;
    height: 75px;
    text-align: right;
    overflow: hidden;
}

.ribbon {
    transform: rotate(45deg);
    display: block;
    box-shadow: 0 4px 10px -8px black;
    position: absolute;
    top: 14.3px;
    right: -23.8px;
    text-align: center;
}

.ribbon:before {
    content: '';
    position: absolute;
    left: 0;
    top: 100%;
    z-index: -1;
    border-left: 3px solid #666;
    border-right: 3px solid transparent;
    border-bottom: 3px solid transparent;
    border-top: 3px solid #666;
}

.ribbon:after {
    content: '';
    position: absolute;
    right: 0%;
    top: 100%;
    z-index: -1;
    border-right: 3px solid #666;
    border-left: 3px solid transparent;
    border-bottom: 3px solid transparent;
    border-top: 3px solid #666;
}

.ribbon>span {
    display: block;
    width: 100px;
    font: normal 700 18.56px/26px var(--font-geist);
    color: var(--white-one);
    letter-spacing: -0.20px;
    text-transform: uppercase;
}

.avatar-people-proofs {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    position: relative;
}

.list-avatar {
    display: flex;
    align-items: center;
    -ms-align-items: center;
    -moz-align-items: center;
    -webkit-align-items: center;
}


.ribbon-filled>span {
    border: 1px solid transparent;
    background: #2a80cd;
    color: #fff;
}

.description-socialproof {
    width: 100%;
    height: auto;
    margin-top: 15px;
}

.row-price-card {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.left-price-card {
    width: 60%;
    font: normal 400 18.56px/24.24px var(--font-geist);
    color: var(--gray-700);
    letter-spacing: -0.20px;
    padding-right: 24px;
}

.right-price-card {
    width: 40%;
}

.right-price-card p {
    font: normal 600 42px/43.64px var(--font-geist);
    color: #2a80cd;
    letter-spacing: -0.40px;
    width: 100%;
    margin-bottom: 0px;
    text-align: left;
}

.right-price-card span {
    font: normal 600 19.64px/30.64px var(--font-geist);
    color: #2a80cd;
    letter-spacing: 0.40px;
    width: 100%;
    margin-bottom: 0px;
    text-transform: uppercase;
    text-align: left;
    position: relative;
    margin-top: -3px;
}

.avatar-people {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    overflow: hidden;
    background-color: var(--gray-300);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid #ffffff;
}

.avatar-people img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-people:not(:first-child) {
    margin-left: -18px;
}

.avatar-people:nth-child(1) {
    z-index: 1;
}

.avatar-people:nth-child(2) {
    z-index: 2;
}

.avatar-people:nth-child(3) {
    z-index: 3;
}

.avatar-people:nth-child(4) {
    z-index: 4;
}

.icon-star-review {
    width: 24px;
    min-height: 24px;
}

.icon-star-review svg {
    fill: #ffae00;
}

.value-review-number {
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}

.circle-top {
    height: 36px;
    width: 36px;
    background-color: var(--scarlet-red-600);
    border-radius: 50px;
    position: absolute;
    top: -2px;
    left: 42%;
    transform: translate(-50%, -50%);
}

[data-theme="dark"] .circle-top {
    background-color: #e41f28;
}

.circle-bottom {
    height: 36px;
    width: 36px;
    background-color: var(--scarlet-red-600);
    border-radius: 50px;
    position: absolute;
    bottom: -36px;
    left: 42%;
    transform: translate(-50%, -50%);
}

[data-theme="dark"] .circle-bottom {
    background-color: #e41f28;
}

.point-number-review {
    width: auto;
}

.point-number-review h3 {
    font: normal 600 36.24px/40.64px var(--font-geist);
    color: #2a80cd;
    letter-spacing: -0.40px;
    width: fit-content;
    margin-bottom: 0px;
}

.value-costumer-proofs {
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    font: normal 400 18.56px/24.24px var(--font-geist);
    color: var(--gray-700);
    letter-spacing: -0.24px;
    width: fit-content;
    margin-bottom: 0px;
    margin-top: 5px;
}

.row-cta-hero {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.row-gurantee-package {
    width: 100%;
    height: auto;
    margin-top: 18px;
}

.wrp-circle-avatar .value-review-number {
    display: none;
}

.wrp-guarantee-package {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
}

.text-guarantee {
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
    padding-left: 10px;
}

.text-guarantee h3 {
    font: 400 18.64px/24.64px var(--font-geist);
    color: var(--gray-100);
    letter-spacing: 0.24px;
    width: 100%;
    margin-bottom: 0px;
    text-align: left;
}

.icon-guarantee {
    width: 36px;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.icon-guarantee img {
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: fill;
}

/* ==========================================================================
   SECTION ABOUT KEYMATRIX
   ========================================================================== */

.section-about-keymatrix {
    width: 100%;
    height: auto;
    background: var(--white-one);
    padding: 76px 0px 64px 0px;
}

.quote-islamic {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
}

.quote-islamic blockquote {
    width: fit-content;
    height: auto;
}

.blockquote-home p {
    font: normal 700 36.44px/43.56px var(--font-libre);
    color: var(--gray-800);
    text-align: left;
    font-weight: bold;
    font-style: italic;
    letter-spacing: -0.40px;
    width: fit-content;
    margin-bottom: 36px;
}

.blockquote-footer {
    margin-top: 30px;
}

.blockquote-wrapper .blockquote-footer::before {
    content: " ";
}

.blockquote-footer cite {
    font: normal 700 36.44px/43.56px var(--font-libre);
    color: var(--gray-800);
    text-align: left;
    font-weight: bold;
    font-style: italic;
    letter-spacing: -0.40px;
    width: fit-content;
}

.content-left-about {
    width: 100%;
    height: auto;
}

.tagline-about {
    padding: 18px 0px;
    width: 75%;
}

.tagline-about h2 {
    font: 700 36.56px/44.34px var(--font-geist);
    color: var(--gray-800);
    letter-spacing: -0.64px;
    width: 100%;
    text-align: left;
    margin-bottom: 0px;
}

.tagline-about h2 span {
    color: var(--scarlet-red-500);
    font: normal 700 36.44px/43.56px var(--font-libre);
    font-style: italic;
    font-weight: bold;
}

.content-right-about {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 18px 0px;
}

.text-content-about {
    width: 75%;
    font: normal 400 17.56px/24.24px var(--font-geist);
    color: var(--gray-500);
}

.inner-section {
    width: 100%;
    padding: 64px 0px;
}

.half-inner-section {
    width: 100%;
    padding: 64px 0px 0px 0px;
}

.key-matrix-item {
    width: 100%;
    height: auto;
}

.value-key-matrix {
    width: fit-content;
    height: auto;
}

.value-key-matrix span,
.value-key-matrix span.value-key-matrix {
    font: normal 600 42px/43.64px var(--font-geist);
    color: var(--gray-800);
    margin-bottom: 16px;
}

.content-desc-matrix {
    width: 56%;
    font: normal 600 20.24px/24.64px var(--font-geist);
    color: var(--gray-500);
    letter-spacing: 0.10px;
}

.label-text-cta {
    width: auto;
    font: 400 16px/20px var(--font-geist);
    color: var(--gray-700);
    letter-spacing: -0.40px;
}

.content-cta-button {
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
}

.wrp-cta-section {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 36px 0px 16px 0px;
}

.content-cta-button a {
    background: var(--white-trans-2);
    border-radius: 64px;
    padding: 18px 24px;
    border: 2px solid var(--gray-700);
    text-decoration: none;
    width: fit-content;
    height: fit-content;
    display: flex;
    align-items: center;
    gap: 12px;
}

.content-cta-button a:hover {
    color: var(--scarlet-red-600);
    border: 2px solid var(--scarlet-red-600);
    transition: ease 0.5s;
}

.content-cta-button a:hover .label-text-cta {
    color: var(--scarlet-red-600);
    transition: ease 0.5s;
}

.icon-text-cta {
    width: 10px;
    height: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.icon-text-cta svg {
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: fill;
}

[data-theme="dark"] .icon-text-cta svg {
    filter: invert(1);
}

.content-cta-button a:hover .icon-text-cta svg {
    fill: var(--scarlet-red-600);
    transition: ease 0.5s;
}

/* ==========================================================================
   SECTION WHY CHOOSE GONAM
   ========================================================================== */

.section-why-gonam {
    background: #f5fafe;
}

.content-left-why {
    width: 100%;
    height: auto;
}

.title-why-gonam {
    padding: 18px 0px;
    width: 65%;
}

.title-why-gonam h2 {
    font: 600 36.56px/44.34px var(--font-geist);
    color: var(--gray-800);
    letter-spacing: -0.64px;
    width: 100%;
    text-align: left;
    margin-bottom: 0px;
}

.title-why-gonam h2 span {
    color: var(--scarlet-red-500);
    font: normal 700 36.44px/43.56px var(--font-libre);
    font-style: italic;
    font-weight: bold;
}

.content-right-why {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 18px 0px;
}

.text-content-why {
    width: 75%;
    font: normal 400 17.56px/24.24px var(--font-geist);
    color: var(--gray-500);
}

/* LENIS SMOOTH SCROLL START */
html.lenis,
html.lenis body {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

.lenis.lenis-scrolling iframe {
    pointer-events: none;
}

/* LENIS SMOOTH SCROLL END */

/* HORIZONTAL SCROLLING START */
.section-why-gonam {
    position: relative;
    overflow: hidden;
    margin-top: 0;
    margin-bottom: 0;
    background: #f5fafe;
}

.why-gonam-pin-wrapper {
    width: 100%;
    position: relative;
}

.why-gonam-scroll-container {
    width: 100%;
    overflow: hidden;
    padding: 36px 0 44px 0;
    box-sizing: border-box;
    position: relative;
}

.why-gonam-track {
    display: flex;
    flex-wrap: nowrap;
    gap: 24px;
    width: max-content;
    will-change: transform;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.why-gonam-card-item {
    flex: 0 0 380px;
    width: 380px;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.why-gonam-card-item .card-box-gonam {
    height: 100%;
    margin-bottom: 0;
    box-sizing: border-box;
}

@media (max-width: 991px) {
    .why-gonam-card-item {
        flex: 0 0 320px;
        width: 320px;
    }
}

@media (max-width: 767px) {
    .section-why-gonam {
        min-height: auto;
        overflow: visible;
    }

    .why-gonam-scroll-container {
        width: 100%;
        overflow: visible;
        padding: 24px 0 32px 0;
    }

    .why-gonam-track {
        display: flex;
        flex-direction: column;
        gap: 16px;
        width: 100%;
        transform: none !important;
        will-change: auto;
    }

    .why-gonam-card-item {
        flex: 1 1 100%;
        width: 100%;
        max-width: 100%;
        transform: none !important;
    }
}

/* HORIZONTAL SCROLLING END */

/* DAFTAR MENU MOBILE FLOAT START */
#daftar-harga-menu-mobile {
    display: none;
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    width: 100%;
    list-style: none;
    padding: 0;
    margin: 4px 0 8px 0;
    background: var(--white-one);
    border-radius: 12px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    border: 1px solid var(--gray-100);
}

#daftar-harga-menu-mobile.active {
    display: block;
}

#daftar-harga-menu-mobile li {
    width: 100%;
    display: block;
    border-bottom: 1px solid var(--gray-100);
}

#daftar-harga-menu-mobile li:last-child {
    border-bottom: none;
}

#daftar-harga-menu-mobile li a {
    display: block;
    padding: 16px 18px;
    color: var(--gray-700);
    font: 400 16.24px/21px var(--font-geist);
    text-decoration: none;
    transition: all 0.3s ease;
    width: 100%;
    background: var(--white-one);
}

#daftar-harga-menu-mobile li a:hover,
#daftar-harga-menu-mobile li a:focus {
    background: var(--scarlet-red-50);
    color: var(--scarlet-red-600);
}

/* DAFTAR MENU MOBILE FLOAT END */
.card-box-gonam {
    background: var(--white-one);
    width: 100%;
    min-height: 376px;
    border-radius: 18px;
    padding: 32px 30px 36px 30px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

[data-theme="dark"] .card-box-gonam {
    background-color: #191f26 !important;
}

.item-icon-card {
    width: 76px;
    height: 76px;
    border-radius: 40px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.item-icon-card img {
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: fill;
}

.title-card-box {
    width: 100%;
    height: auto;
    padding-right: 40px;
}

.title-card-box h3 {
    font: 500 29.64px/35.64px var(--font-geist);
    color: var(--gray-800);
    letter-spacing: -0.45px;
    margin-bottom: 0px;
}

.des-card-box,
.des-card-box p {
    width: 86%;
    font: normal 400 17.56px/24.24px var(--font-geist);
    color: var(--gray-500);
}

/* ==========================================================================
   SECTION PACKAGE GONAM
   ========================================================================== */

.section-package-gonam {
    width: 100%;
    height: auto;
}

.section-package-gonam .row.gutter--18.mb-4 {
    padding: 0px 0px 36px 0px;
}

.section-package-gonam .row.gutter--18.mb-4:last-child {
    padding: 0px 0px 8px 0px;
}

.title-left-package {
    padding: 18px 0px;
    width: 75%;
}

.left-filter-column {
    height: auto;
}

.title-left-package h2 {
    font: 700 36.56px/44.34px var(--font-geist);
    color: var(--gray-800);
    letter-spacing: -0.64px;
    width: 100%;
    text-align: left;
    margin-bottom: 0px;
}

.title-left-package h2 span {
    color: var(--scarlet-red-500);
    font: normal 700 36.44px/43.56px var(--font-libre);
    font-style: italic;
    font-weight: bold;
}

.content-right-package {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 18px 0px;
}

.row-youtube-card.gutter--18.row,
.row-youtube-card.gutter--18.container,
.row-youtube-card.gutter--18.container-fluid {
    margin-left: -18px;
    margin-right: -18px;
}

.gutter--18>[class^="col-"] {
    padding-left: 18px;
    padding-right: 18px;
}

.text-content-package {
    width: 70%;
    font: normal 400 17.56px/24.24px var(--font-geist);
    color: var(--gray-500);
}

.card-box-package {
    width: 100%;
    height: auto;
    border-radius: 12px;
    border: 1.5px solid var(--gray-300);
    overflow: hidden;
    min-height: 124px;
}

[data-theme="dark"] .card-box-package {
    border-color: var(--gray-15) !important;
}

.card-box-package:hover .card-thumnnail-package a img {
    transform: scale(1.1, 1.1);
    transition: 0.5s;
}

.card-thumnnail-package {
    width: 100%;
    min-height: 286px;
    max-height: 329px;
    position: relative;
    background: var(--gray-300);
}

.card-thumnnail-package a {
    width: 100%;
    text-decoration: none;
    outline: none;
    position: relative;
}

.card-thumnnail-package a img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
    transition: 0.5s;
}

.card-title-package {
    width: 100%;
    height: auto;
    padding: 24px 24px 0px 24px;
}

.card-title-package a {
    width: 100%;
    text-decoration: none;
    outline: none;
}

.card-description-package {
    width: 100%;
    height: auto;
    position: relative;
    background: var(--white-one);
    z-index: 3;
}

.card-box-package:hover .card-description-package {
    background: var(--scarlet-red-500);
    transition: 0.3s;
}

.card-box-package:hover .card-title-package h3 a {
    color: var(--white-one);
    transition: 0.3s;
}

.card-title-package h3 a {
    letter-spacing: -0.45px;
    width: fit-content;
    font: 500 28.52px/34.64px var(--font-geist);
    color: var(--gray-800);
}

.card-benefit-package {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    flex-wrap: wrap;
    padding: 0px 24px 10px 24px;
}



.card-benefit-package span.badge-chips {
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    height: fit-content;
    padding: 8px 4px 8px 0px;
    border-radius: 24px;
    font: normal 400 14px/16.48px var(--font-geist);
    color: var(--gray-500);
    background: transparent;
    border: 1px solid var(--white-trans-full);
}

.price-card-cta {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0px 24px 32px 24px;
}

.price-label-card-cta {
    width: auto;
    font: normal 400 17.56px/24.24px var(--font-geist);
    color: var(--gray-500);
}

.card-price-left a {
    text-decoration: none;
    outline: none;
}

.price-value-card-cta {
    width: 100%;
    height: auto;
    font: 700 23.48px/30.36px var(--font-geist);
    color: var(--gray-800);
    letter-spacing: -0.45px;
}

.price-value-card-cta p {
    font: normal 600 24.64px/26.64px var(--font-geist);
    color: var(--scarlet-red-600);
    letter-spacing: -0.45px;
    width: fit-content;
}

.card-cta-right {
    width: auto;
    height: auto;
}

.card-box-package:hover .card-description-package {
    background: var(--scarlet-red-600);
    transition: 0.3s;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.card-box-package:hover .card-title-package h3 a {
    color: var(--white-one);
    transition: 0.3s;
}

.card-benefit-package span.badge-chips:hover {
    background: var(--white-trans-full);
    transition: 0.3s;
}

.card-box-package:hover .card-benefit-package span.badge-chips {
    color: var(--white-one);
    transition: 0.3s;
}

.card-box-package:hover .price-label-card-cta {
    color: var(--gray-100);
    transition: 0.3s;
}

[data-theme="dark"] .variant-cotumers-order {
    background-color: #29313a;
    border-color: #29313a !important;
}

.card-box-package:hover .price-value-card-cta p {
    color: var(--white-one);
    transition: 0.3s;
}

.card-box-package:hover .card-cta-right a {
    background: #1b64ae;
    border: 2px solid #2a80cd;
    color: var(--white-one);
    transition: 0.3s;
}

.card-box-package:hover .card-cta-right a:hover {
    background: #1b64ae;
    border: 2px solid #1b64ae;
    color: var(--white-one);
    transition: 0.3s;
}

.card-cta-right a {
    text-decoration: none;
    outline: none;
    text-align: center;
    font: 400 15.64px/20px var(--font-geist);
    letter-spacing: -0.40px;
    color: var(--gray-100);
    background: var(--scarlet-red-500);
    border: 2px solid var(--scarlet-red-500);
    border-radius: 24px;
    padding: 12px 15px;
    width: fit-content;
    transition: 0.5s;
}

.card-cta-right a:hover {
    background: var(--scarlet-red-600);
    border: 2px solid var(--scarlet-red-600);
    color: var(--white-one);
    transition: 0.5s;
}

.cta-button-daftarharga {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: flex-end;
}

.content-ghost-button {
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
}

.content-ghost-button a {
    background: var(--white-one);
    border-radius: 64px;
    padding: 18px 5px;
    border: 2px solid var(--white-one);
    text-decoration: none;
    width: fit-content;
    height: fit-content;
    display: flex;
    align-items: center;
    gap: 12px;
}

.content-ghost-button a:hover .label-text-cta span,
.content-ghost-button a:hover svg {
    color: var(--scarlet-red-600);
    fill: var(--scarlet-red-600);
    transition: 0.5s;
}

.panel-tab-package {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
}

.button-tab {
    background: var(--white-one);
    border-radius: 64px;
    padding: 12px 16px;
    border: 2px solid var(--gray-200);
    text-decoration: none;
    width: fit-content;
    height: fit-content;
    display: flex;
    align-items: center;
    gap: 12px;
}

.button-tab.current {
    background: var(--scarlet-red-500);
    border-radius: 64px;
    padding: 14px 16px;
    border: 2px solid var(--scarlet-red-600);
    text-decoration: none;
    width: fit-content;
    height: fit-content;
    display: flex;
    align-items: center;
    gap: 12px;
}

[data-theme="dark"] .button-tab.current {
    background: #e41f28 !important;
    color: #fff !important;
}

.button-tab.current .label-text-cta span {
    color: var(--white-one);
    transition: 0.5s;
}

[data-theme="dark"] .button-tab.current .label-text-cta span {
    color: #fff !important;
    transition: 0.5s;
}

.icon-check-cta {
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.icon-check-cta svg {
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: fill;
}

[data-theme="dark"] .button-tab.current .icon-check-cta svg {
    fill: #fff !important;
    transition: 0.5s;
}

.button-tab.current .icon-check-cta svg {
    fill: var(--white-one);
    transition: 0.5s;
}

.act-ghost-button {
    width: auto;
    height: auto;
}

.Title-package-info {
    font: 600 24.64px/26.64px var(--font-geist);
    color: var(--gray-800);
    letter-spacing: -0.45px;
    width: fit-content;
}

.catalog-package-info {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0px 0px 36px 0px;
}

.Title-package-info h3 {
    font: normal 600 24.64px/26.64px var(--font-geist);
    margin-right: 18px;
}

.act-ghost-button a {
    width: auto;
    font: 400 16px/20px var(--font-geist);
    color: var(--gray-700);
    letter-spacing: -0.40px;
    padding: 18px 5px;
    text-decoration: none;
    outline: none;
    transition: 0.5s;
}

.act-ghost-button a:hover {
    color: var(--scarlet-red-600);
    transition: 0.5s;
}

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

.section-testimoni {
    width: 100%;
    height: auto;
    background: #f5fafe;
}

[data-theme="dark"] .section-testimoni {
    background-color: var(--gray-15) !important;
}

.right-testimoni {
    display: flex;
    align-items: center;
}

.title-left-testimonial {
    padding: 18px 0px;
    width: 75%;
}

.title-left-testimonial h2 {
    width: fit-content;
    font: 700 36px/44px var(--font-geist);
    color: var(--gray-800);
    letter-spacing: -0.64px;
    padding: 20px 0px;
}

.title-left-testimonial h2 span {
    color: var(--scarlet-red-500);
    font: normal 700 36.44px/43.56px var(--font-libre);
    font-style: italic;
    font-weight: bold;
}

.content-right-testimony {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 18px 0px;
    position: relative;
    top: -8px;
}

.testimoni-bar {
    height: auto;
    overflow: hidden;
    position: relative;
    padding-bottom: 44px;
}

.testimoni-bar .slick-list {
    overflow: visible;
}

.testimoni-bar .slick-track {
    display: flex;
    align-items: stretch;
}

.testimoni-bar .slick-slide {
    height: auto;
    margin-right: 24px;
    outline: none;
    display: flex;
}

.testimoni-bar .slick-slide>div {
    height: 100%;
}

.testimoni-bar .wrapper-testimoni {
    height: 100%;
    margin-bottom: 0;
}

.testimoni-bar .slick-dots {
    bottom: 86px;
    left: 30px;
    display: flex !important;
    justify-content: flex-start;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

.testimoni-bar .slick-dots li {
    margin: 0 4px;
}

.testimoni-bar .slick-dots li button:before {
    font-size: 10px;
    color: var(--gray-400);
    opacity: 0.5;
}

.testimoni-bar .slick-dots li.slick-active button:before {
    color: var(--scarlet-red-600);
    opacity: 1;
}

@media (max-width: 991px) {
    .testimoni-bar .slick-slide {
        margin-right: 0;
        width: 100% !important;
    }

    .testimoni-bar .wrapper-testimoni {
        width: 100% !important;
    }

    .testimoni-bar .slick-dots {
        justify-content: center;
    }
}

.wrapper-testimoni {
    background: var(--white-one);
    border-radius: 16px;
    padding: 32px 24px;
    width: 932px;
    margin-bottom: 24px;
    height: auto;
    border: 1px solid #d9e3ec;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.left-card-testimoni {
    width: 48%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding-top: 8px;
}

.card-testimoni {
    width: 100%;
    height: auto;
    padding-right: 74px;
}

.text-content-testimony {
    width: 70%;
    font: normal 400 17.56px/24.24px var(--font-geist);
    color: var(--gray-500);
}

.quote-icon {
    width: 48px;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 20px;
    top: 5px;
}

.quote-icon svg {
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: fill;
    fill: #d9e3ec;
}

.content-text-testimoni {
    font: 500 20.24px/27.64px var(--font-geist);
    color: var(--gray-600);
    display: flex;
    flex-direction: column;
    gap: 24px;
    /* min-height: 264px; */
    min-height: 364px;
}

.avatar-costumer {
    width: 86px;
    height: 86px;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--gray-200);
}

.costumer-profile-name {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
    margin-top: 36px;
}

.avatar-costumer img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.name-costumer {
    width: auto;
    height: auto;
    font: normal 400 17.56px/24.24px var(--font-geist);
    color: var(--gray-500);
}

.costumer-parent {
    width: 100%;
    font: 600 20.24px/27.64px var(--font-geist);
    color: var(--gray-800);
    letter-spacing: -0.40px;
}

.costumer-child {
    width: 100%;
    font: normal 400 16px/24px var(--font-geist);
    color: var(--gray-500);
    letter-spacing: 0.24px;
}

.costumer-child p span {
    font: 600 18.24px/25.64px var(--font-geist);
    color: var(--gray-800);
}

.right-card-testimoni {
    width: 50%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card-photo-testimoni {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 120px;
    background: var(--gray-200);
    border-radius: 8px;
    height: auto;
    overflow: hidden;
}

.card-photo-testimoni img {
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: fill;
}

.google-review-costumer {
    width: 100%;
    height: auto;
    border: 1px solid #d9e3ec;
    padding: 23px 15px;
    border-radius: 8px;
    background: var(--white-one);
    justify-content: center;
}

[data-theme="dark"] .google-review-costumer {
    background-color: #29313a;
    border-color: #29313a !important;
}

.google-review-title {
    font: normal 400 17.56px/24.24px var(--font-geist);
    color: var(--gray-700);
}

.icon-star {
    width: 24px;
    min-height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card-review-testimoni {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.icon-star svg {
    fill: #ffae00;
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: fill;
}

.review-star-value {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    margin-bottom: 1px;
}

.value-review {
    width: auto;
}

.value-review span {
    font: normal 600 30.24px/40.64px var(--font-geist);
    color: var(--gray-800);
    letter-spacing: -0.32px;
}

.sub-title-review {
    width: auto;
    color: var(--gray-800);
    margin-top: 4px;
}

.sub-title-review p {
    font: normal 600 16.52px/24.24px var(--font-geist);
    color: var(--gray-800);
    letter-spacing: -0.52px;
}

.icon-personal-costumer {
    width: 48px;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.icon-personal-costumer svg {
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: fill;
    fill: var(--gray-800);
}

.variant-cotumers-order {
    width: 100%;
    height: auto;
    border: 1px solid #d9e3ec;
    padding: 18px 15px;
    border-radius: 8px;
    background: var(--white-one);
    justify-content: start;
    display: flex;
    flex-wrap: wrap;
    flex-direction: var(--white-one);
    min-height: 168px;
}

.icon-or-brand {
    width: 100%;
    height: auto;
    min-height: 62px;
    padding: 6px 0px;
}

.icon-or-brand img {
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: fill;
}

.costumer-icon-brand {
    width: 48px;
    height: auto;
    order: 1;
}

.costumer-type {
    font: normal 400 17.56px/24.24px var(--font-geist);
    color: var(--gray-700);
    padding: 4px 0px 10px 0px;
    width: 74%;
}

.costumer-order-type {
    width: 100%;
    height: auto;
    padding: 5px 0px;
    font: normal 400 17.56px/24.24px var(--font-geist);
    order: 3;
}

.costumer-order-type p {
    font: normal 400 17.56px/24.24px var(--font-geist);
    color: var(--gray-800);
    letter-spacing: -0.52px;
}

.client-list-container {
    width: 100%;
    height: auto;
    position: relative;
    overflow: hidden;
    padding: 56px 0px 28px 0px;
    -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
    mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}

.clients-list-items {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    width: max-content;
    gap: 48px;
    will-change: transform;
    animation: infiniteMarqueeLeft 30s linear infinite;
}

.client-list-container:hover .clients-list-items {
    animation-play-state: paused;
}

.client-list-item {
    position: relative;
    width: 200px;
    height: 65px;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px 0px;
}

.landscape-clients {
    width: 156px;
    height: auto;
    min-height: 65px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.landscape-clients img {
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: fill;
}

.portrait-clients {
    width: 74px;
    height: auto;
    min-height: 98px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.portrait-clients img {
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: fill;
}

@keyframes infiniteMarqueeLeft {
    0% {
        transform: translate3d(0%, 0, 0);
    }

    100% {
        transform: translate3d(-50%, 0, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .clients-list-items {
        animation: none;
    }
}

/* ==========================================================================
   SECTION OFFICE BRANCH HOME
   ========================================================================== */

.section-office-home {
    width: 100%;
    background: var(--white-one);
}

.office-branch-home {
    width: 100%;
    height: auto;
}

.title-office-home {
    width: fit-content;
    height: auto;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 48px;
}

.title-office-home h2 {
    font: 700 36.56px/44.34px var(--font-geist);
    color: var(--gray-800);
    letter-spacing: -0.64px;
    width: fit-content;
    text-align: center;
    margin-bottom: 0px;
}

.title-office-home h2 span {
    color: var(--scarlet-red-500);
    font: normal 700 36.44px/43.56px var(--font-libre);
    font-style: italic;
    font-weight: bold;
    text-align: center;
}

.content-desc-office-home {
    width: 100%;
    height: auto;
    margin-bottom: 48px;
    font: normal 400 17.56px/24.24px var(--font-geist);
    color: var(--gray-500);
    text-align: center;
}

.content-desc-office-home p {
    font: normal 400 17.56px/24.24px var(--font-geist);
    color: var(--gray-500);
    letter-spacing: -0.52px;
}

.wrp-head-office {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    position: relative;
    padding: 26px;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    overflow: hidden;
}

[data-theme="dark"] .wrp-head-office {
    background-color: var(--gray-15) !important;
    border-color: var(--gray-15) !important;
}

.left-head-office {
    width: 56%;
    height: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    z-index: 3;
}

.thumb-head-office {
    width: 40%;
    height: auto;
    border-radius: 8px;
    overflow: hidden;
    background: var(--gray-200);
}

.thumb-head-office img {
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: fill;
}

.content-office-home {
    width: 60%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px 48px 10px 32px;
    gap: 20px;
}

.title-location-office {
    width: 100%;
    height: auto;
}

.title-location-office h3 {
    font: 600 22.24px/27.64px var(--font-geist);
    color: var(--gray-800);
    margin-bottom: 0px;
    letter-spacing: -0.58px;
    width: fit-content;
}

.title-location-office span {
    font: 600 18px/22.64px var(--font-geist);
    color: var(--gray-800);
}

.cta-button-whatsapp .title-location-office h3 {
    margin-bottom: 16px;
}

.addres-head-office {
    width: 100%;
    font: normal 400 17.56px/24.24px var(--font-geist);
    color: var(--gray-500);
    position: relative;
    top: -5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.right-head-office {
    width: 44%;
    height: auto;
    padding: 10px 32px 10px 0px;
    display: flex;
    justify-content: flex-end;
    position: relative;
    z-index: 3;
}

.wrp-cta-map {
    width: 100%;
    height: auto;
}

.cta-btn-map {
    width: fit-content;
    height: auto;
}

.cta-btn-map a {
    background: var(--white-one);
    border-radius: 64px;
    padding: 10px 16px;
    border: 2px solid var(--gray-200);
    text-decoration: none;
    width: fit-content;
    height: fit-content;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.icon-direct-map {
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.icon-direct-map svg {
    fill: #2676bd;
    width: 100%;
    height: 100%;
    object-fit: fill;
}

.content-direction-office {
    width: auto;
    height: auto;
    margin-left: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.content-direction-office p {
    font: normal 400 17px/24.24px var(--font-geist);
    color: var(--gray-500);
    margin-bottom: 0px;
    letter-spacing: -0.48px;
}

.patern-card-address {
    width: 376px;
    height: auto;
    min-height: 205px;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    position: absolute;
    top: 0;
    right: 0;
}

[data-theme="dark"] .patern-card-address {
    opacity: 0.24;
}

.patern-card-address img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    transform: scaleX(-1);
}

.wrp-list-office-branch {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    position: relative;
    padding: 26px;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    overflow: hidden;
    min-height: 200px;
}

[data-theme="dark"] .wrp-list-office-branch {
    background-color: var(--gray-15) !important;
    border-color: var(--gray-15) !important;
}

.left-office-branch {
    width: 60%;
    height: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    border-radius: 12px;
    overflow: hidden;
    gap: 24px;
    position: relative;
    z-index: 3;
    min-height: 246px;
}

.right-office-branch {
    width: 40%;
    padding-right: 0px;
    padding-left: 5px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    position: relative;
    z-index: 3;
}

.vertical-gap {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* ==========================================================================
   SECTION NEWS FEED HOME
   ========================================================================== */

.section-newsfeed-home {
    width: 100%;
    height: auto;
    background: #f5fafe;
}

[data-theme="dark"] .section-newsfeed-home {
    background-color: var(--gray-15) !important;
}

.title-left-newsfeed {
    padding: 18px 0px;
    width: 75%;
}

.title-left-newsfeed h2 {
    width: fit-content;
    font: 700 36px/44px var(--font-geist);
    color: var(--gray-800);
    letter-spacing: -0.64px;
    padding: 20px 0px;
}

.title-left-newsfeed h2 span {
    color: var(--scarlet-red-500);
    font: normal 700 36.44px/43.56px var(--font-libre);
    font-style: italic;
    font-weight: bold;
}

[data-theme="dark"] .title-left-newsfeed h2 span {
    color: #e41f28 !important;
}

.content-right-newsfeed {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 18px 0px;
}

.text-content-newsfeed {
    width: 80%;
    font: normal 400 17.56px/24.24px var(--font-geist);
    color: var(--gray-500);
}

.grid-card-newsfeed {
    width: 100%;
    height: auto;
    display: flex;
    margin-top: 30px;
}

.left-card-newsfeed {
    width: 100%;
    height: auto;
    padding-right: 20px;
    font: normal 400 17.56px/24.24px var(--font-geist);
    color: var(--gray-500);
    display: flex;
    flex-direction: column-reverse;
    gap: 30px;
}

.card-newsfeed-vertical {
    width: 100%;
    height: auto;
    display: flex;
    align-items: flex-start;
}

.card-newsfeed-vertical a {
    text-decoration: none;
    outline: none;
    color: var(--gray-800);
    width: 100%;
    display: flex;
}

.card-newsfeed-vertical a:hover .title-newsfeed-vertical h3 {
    color: var(--scarlet-red-500);
    transition: 0.5s;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    -ms-transition: 0.5s;
}

[data-theme="dark"] .card-newsfeed-vertical a:hover .title-newsfeed-vertical h3 {
    color: #e5232c !important;
    transition: 0.5s;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    -ms-transition: 0.5s;
}

.wrp-newsfeed-vertical {
    width: 100%;
    height: auto;
    display: flex;
    align-items: flex-start;
    gap: 18px;
    flex-wrap: wrap;
    flex-direction: row;
}

.content-left-newsfeed {
    width: 100%;
    height: auto;
}

.thumbnail-newsfeed-vertical {
    width: 194px;
    height: 163px;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
}

.thumbnail-newsfeed-vertical img {
    width: 100%;
    height: 100%;
    object-fit: fill;
}

.content-newsfeed-vertical {
    min-width: 64%;
    max-width: 64%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.title-newsfeed-vertical {
    width: auto;
    height: auto;
}

.title-newsfeed-vertical h3 {
    font: 600 23px/28px var(--font-geist);
    color: var(--gray-800);
    margin-bottom: 0px;
    letter-spacing: -0.58px;
    width: fit-content;
}

.tag-news {
    width: fit-content;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tag-news span {
    background: var(--white-trans-full);
    font: normal 400 14px/19px var(--font-geist);
    color: var(--gray-500);
    border-radius: 64px;
    padding: 6px 10px;
    border: 2px solid var(--gray-200);
    text-decoration: none;
    width: fit-content;
    height: fit-content;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.right-card-newsfeed {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: flex-end;
}

.large-feature-feednews {
    width: 90%;
    height: auto;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

.wrp-feature-feednews {
    width: 100%;
    height: 100%;
    min-height: 520px;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
}

.wrp-feature-feednews a {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    text-decoration: none;
}

.wrp-feature-feednews img {
    width: 100%;
    height: 100%;
    min-height: 520px;
    object-fit: cover;
    display: block;
    border-radius: 20px;
    transition: transform 0.6s ease;
}

.large-feature-feednews:hover .wrp-feature-feednews img {
    transform: scale(1.03);
}

.play-button-overlay {
    position: absolute;
    top: 38%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 4;
    pointer-events: none;
    transition: transform 0.3s ease;
}

.large-feature-feednews:hover .play-button-overlay {
    transform: translate(-50%, -50%) scale(1.1);
}

.play-icon-circle {
    width: 72px;
    height: 72px;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 2px solid rgba(255, 255, 255, 0.85);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.play-icon-circle svg {
    width: 28px;
    height: 28px;
    fill: #e22028;
    margin-left: 4px;
}

.caption-title-feednews {
    width: calc(100% - 32px);
    position: absolute;
    bottom: 16px;
    left: 16px;
    right: 16px;
    z-index: 6;
    padding: 24px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

[data-theme="dark"] .caption-title-feednews {
    background-color: #191f26 !important;
    border-color: #191f26 !important;
}

.title-large-newsfeed h3 {
    font: 700 22px/30px var(--font-geist);
    color: var(--gray-900);
    letter-spacing: -0.5px;
    margin: 0;
}

.title-large-newsfeed h3 a {
    color: var(--gray-900);
    text-decoration: none;
    transition: color 0.3s ease;
}

.title-large-newsfeed h3 a:hover {
    color: var(--scarlet-red-600);
}

[data-theme="dark"] .title-large-newsfeed h3 a:hover {
    color: #e41f28 !important;
}

.desc-large-newsfeed p {
    font: normal 400 15px/22px var(--font-geist);
    color: var(--gray-600);
    margin: 0;
    letter-spacing: -0.2px;
}

.tag-and-openplatform {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 4px;
    clear: both;
}

.open-platform {
    display: flex;
    align-items: center;
}

.open-platform a.youtube-opened {
    display: inline-flex;
    align-items: center;
    padding: 8px 18px;
    border-radius: 50px;
    border: 1px solid var(--gray-300);
    background: var(--white-one);
    text-decoration: none;
    transition: all 0.3s ease;
    gap: 8px;
}

.wrp-icon-platform {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
}

.open-platform a.youtube-opened:hover {
    border-color: var(--scarlet-red-600);
    background: var(--scarlet-red-50);
}

.icon-youtube {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-youtube svg {
    width: 20px;
    height: 20px;
    fill: var(--scarlet-red-600);
}

.text-visit-youtube {
    line-height: 13px;
}

.text-visit-youtube span {
    font: 500 13px/13px var(--font-geist);
    color: var(--gray-700);
}

.tag-news .tag-pill {
    display: inline-block;
    padding: 8px 18px;
    border-radius: 50px;
    border: 1px solid var(--gray-300);
    background: rgba(255, 255, 255, 0.5);
    font: 500 13px/18px var(--font-geist);
    color: var(--gray-600);
    text-decoration: none;
}

[data-theme="dark"] .tag-news .tag-pill {
    background: rgba(255, 255, 255, 0.08);
}

.wrp-thumb-large-vertical {
    width: 100%;
    display: flex;
    justify-content: center;
    -ms-justify-content: center;
    -moz-justify-content: center;
    -webkit-justify-content: center;
    align-items: center;
    -ms-align-items: center;
    -moz-align-items: center;
    -webkit-align-items: center;
}

.thumbnail-large-vertical {
    width: 100%;
    height: auto;
    max-height: 276px;
    background: var(--gray-200);
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}

.thumbnail-large-vertical img {
    max-width: 100%;
    height: 100%;
    object-fit: contain;
}

.title-and-date {
    display: flex;
    flex-direction: column;
    gap: 15px;
    text-decoration: none;
    outline: none;
    transition: 0.5s;
}

.title-and-date:hover .title-newsfeed-vertical h3 {
    text-decoration: none;
    outline: none;
    color: var(--scarlet-red-600);
    transition: 0.5s;
}

.title-and-date:hover {
    text-decoration: none;
    outline: none;
    color: var(--scarlet-red-600);
    transition: 0.5s;
}

.title-large-vertical {
    height: 100%;
    padding-top: 8px;
}

.title-large-vertical {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.cta-blog-large {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    -ms-align-items: flex-end;
    -moz-align-items: flex-end;
    -webkit-align-items: flex-end;
    justify-content: flex-end;
    -ms-justify-content: flex-end;
    -moz-justify-content: flex-end;
    -webkit-justify-content: flex-end;
    padding-bottom: 8px;
}

.horizontal-card-newsfeed {
    padding-top: 20px;
    padding-bottom: 46px;
    border-bottom: 1px solid var(--gray-200);
}

.horizontal-card-newsfeed:last-child {
    border-bottom: 0px;
}

.section-list-blog .center-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* PAGINATION START */
.wrp-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 32px;
    padding-bottom: 16px;
    width: 100%;
}

.pagination-list {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
}

.pagination-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pagination-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 14px;
    border-radius: 10px;
    background-color: var(--white-one);
    border: 1px solid var(--gray-200);
    color: var(--gray-700);
    font-family: var(--font-geist);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
    cursor: pointer;
}

.pagination-link:hover {
    color: var(--scarlet-red-600);
    background-color: var(--gray-50);
    border-color: var(--scarlet-red-200);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.pagination-link:focus-visible {
    outline: 2px solid var(--scarlet-red-600);
    outline-offset: 2px;
}

.pagination-item.active .pagination-link {
    background-color: var(--scarlet-red-600);
    border-color: var(--scarlet-red-600);
    color: #ffffff;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(226, 32, 40, 0.35);
}

.pagination-item.active .pagination-link:hover {
    transform: none;
    background-color: var(--scarlet-red-700);
    border-color: var(--scarlet-red-700);
}

.pagination-item.disabled .pagination-link {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
    background-color: var(--gray-100);
    border-color: var(--gray-200);
    color: var(--gray-400);
    box-shadow: none;
    transform: none;
}

.pagination-link.btn-prev,
.pagination-link.btn-next {
    gap: 8px;
    font-weight: 500;
    padding: 0 16px;
}

.pagination-link.btn-prev svg,
.pagination-link.btn-next svg {
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.pagination-link.btn-prev:hover svg {
    transform: translateX(-3px);
}

.pagination-link.btn-next:hover svg {
    transform: translateX(3px);
}

.pagination-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 42px;
    color: var(--gray-400);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 2px;
    user-select: none;
}

/* Dark Mode Overrides */
[data-theme="dark"] .pagination-link {
    background-color: var(--gray-100);
    border-color: var(--gray-200);
    color: var(--gray-700);
}

[data-theme="dark"] .pagination-link:hover {
    background-color: var(--gray-200);
    color: var(--scarlet-red-500);
    border-color: var(--scarlet-red-500);
}

[data-theme="dark"] .pagination-item.active .pagination-link {
    background-color: var(--scarlet-red-600);
    border-color: var(--scarlet-red-600);
    color: #ffffff;
}

[data-theme="dark"] .pagination-item.disabled .pagination-link {
    background-color: var(--gray-50);
    border-color: var(--gray-200);
    color: var(--gray-500);
}

/* Responsive adjustments */
@media (max-width: 576px) {
    .pagination-list {
        gap: 6px;
    }

    .pagination-link {
        min-width: 36px;
        height: 36px;
        padding: 0 10px;
        font-size: 14px;
        border-radius: 8px;
    }

    .pagination-link.btn-prev span,
    .pagination-link.btn-next span {
        display: none;
    }

    .pagination-link.btn-prev,
    .pagination-link.btn-next {
        padding: 0 10px;
        min-width: 36px;
    }

    .pagination-ellipsis {
        min-width: 28px;
        height: 36px;
    }
}

/* PAGINATION END */
/* ==========================================================================
   SECTION CLOSING CTA
   ========================================================================== */

.section-closing-cta {
    width: 100%;
    background: var(--white-one);
    min-height: 270px;
}

.wrp-closing-cta {
    width: 100%;
    height: auto;
    min-height: 270px;
    background: var(--scarlet-red-600) url(../images/grass-section-closing-cta.png) bottom center no-repeat;
    background-size: 100% auto;
    border-radius: 16px;
    position: relative;
}

.righ-closing-cta {
    width: 100%;
    height: auto;
    min-height: 512px;
    position: relative;
    display: flex;
    align-items: center;
}

.flex-direct-column {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.title-head-closing-cta {
    width: 100%;
    height: auto;
}

.title-head-closing-cta h2 {
    font: normal 600 44.44px/52.56px var(--font-geist);
    color: var(--white-one);
    letter-spacing: -0.48px;
    text-align: left;
    width: fit-content;
}

.desc-closing-cta {
    width: 82%;
    height: auto;
}

.desc-closing-cta p {
    font: normal 400 20.24px/27.64px var(--font-geist);
    color: var(--white-one);
    letter-spacing: -0.40px;
    text-align: left;
    margin: 0px;
    width: fit-content;
}

.wrp-btn-closing-cta {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    gap: 16px;
}

.left-clouds-one {
    width: 355px;
    height: 240px;
    background: url(../images/clouds-001.png) bottom center no-repeat;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    bottom: 48%;
    right: unset;
    left: 6%;
    z-index: 1;
    opacity: 0.25;
    transform-origin: center center;
    will-change: transform, opacity;
}

.left-clouds-two {
    width: 355px;
    height: 240px;
    background: url(../images/clouds-002.png) bottom center no-repeat;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    bottom: 48%;
    right: 6%;
    left: unset;
    z-index: 2;
    opacity: 0.25;
    transform-origin: center center;
    will-change: transform, opacity;
}

.left-clouds-three {
    width: 293px;
    height: 205px;
    background: url(../images/clouds-003.png) bottom center no-repeat;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    bottom: 36%;
    right: 2.5%;
    left: unset;
    z-index: 2;
    opacity: 0.25;
    transform-origin: center center;
    will-change: transform, opacity;
}

.left-closing-cta,
.right-closing-cta,
.cta-btn-white {
    width: fit-content;
    height: auto;
}

.cta-btn-white a {
    display: flex;
    align-items: center;
    background: var(--white-one);
    border-radius: 48px;
    padding: 11px 22px;
    gap: 10px;
    color: var(--gray-800);
    font: 400 16px/20px var(--font-geist);
    width: fit-content;
    text-decoration: none;
    letter-spacing: -0.36px;
    border: 2px solid var(--white-one);
}

[data-theme="dark"] .left-closing-cta .cta-btn-white a {
    background: #fff !important;
    color: #212831 !important;
    border-color: #fff !important;
}

.cta-btn-white .text-btn-multyline::before {
    background: var(--gray-800);
}

.cta-btn-white a span {
    margin-right: 4px;
}

.wrp-model-package {
    width: 414px;
    height: 532px;
    position: absolute;
    bottom: 0;
    left: 7.4%;
    z-index: 7;
}

.wrp-model-package img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

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

footer,
footer.footer {
    width: 100%;
    height: auto;
}

footer.footer {
    background: var(--white-one);
    min-height: 320px;
    padding-top: 64px;
    padding-bottom: 72px;
    position: relative;
    overflow: hidden;
}

.content-copyright {
    font: normal 400 13.64px/21px var(--font-geist);
    color: var(--gray-500);
    letter-spacing: 0.24px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.addres-footer,
.address-company {
    width: 100%;
    height: auto;
}

.label-title-footer {
    height: auto;
    width: fit-content;
}

.label-title-footer h3 {
    font: 600 20.24px/27.64px var(--font-geist);
    color: var(--gray-800);
    margin-bottom: 18px;
    letter-spacing: -0.40px;
    width: fit-content;
}

.label-title-footer h2 {
    font: 600 20.24px/27.64px var(--font-geist);
    color: var(--gray-800);
    margin-bottom: 18px;
    letter-spacing: -0.40px;
    width: fit-content;
}

.label-link h2 {
    margin-bottom: 2px;
}

.item-link-footer {
    width: 100%;
    height: auto;
}

.item-link-footer ul {
    padding-left: 0px;
    list-style: none;
}

.item-link-footer ul li {
    padding: 8.6px 0px;
}

.item-link-footer ul li a {
    font: normal 400 17.56px/24.24px var(--font-geist);
    color: var(--gray-500);
    text-align: left;
    line-height: normal;
    margin-bottom: 0px;
    text-decoration: none;
    transition: 0.5s;
}

.label-title-footer .icon-expand-link {
    margin-bottom: 1px;
    margin-left: 10px;
    width: 16px;
    height: auto;
}

.icon-expand-link svg {
    width: 100%;
    height: auto;
    max-width: 100%;
}

.item-link-footer ul li a:hover,
.label-title-footer a:hover .label-link h3 {
    text-decoration: none;
    outline: none;
    color: var(--scarlet-red-600) !important;
    transition: 0.5s;
}

.label-title-footer a {
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: 0.5s;
    margin: 12px 0px 10px 0px;
}

.icon-expand-link svg .cls-1 {
    fill: var(--gray-950);
    stroke-width: 0px;
}

.icon-expand-link svg .cls-2 {
    fill: none;
    stroke-width: 0px;
}

.desc-address-company,
.registered-company {
    width: 100%;
    height: auto;
    font: 400 16px/21.64px var(--font-geist);
    letter-spacing: -0.21px;
    color: var(--gray-500);
    padding-bottom: 8px;
    text-align: left;
    padding-right: 64px;
    line-height: 152%;
}

.registered-company {
    margin-bottom: 24px;
}

.content-title-registered,
.right-content-copyright {
    width: 100%;
    font: 400 16px/21.64px var(--font-geist);
    letter-spacing: -0.21px;
    color: var(--gray-500);
}

.right-content-copyright {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.cta-btn-green,
.cta-btn-outline-sm {
    width: auto;
    height: auto;
}

/* ==========================================================================
   SUBMENU CTA DAFTAR HARGA HOVER START (Line 3151)
   ========================================================================== */
.cta-btn-outline-sm.dropdown-hover {
    position: relative;
}

.cta-btn-outline-sm.dropdown-hover:hover>ul.dropdown-menu-small {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 210px;
    background: transparent;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 0px 0px 0px 0px;
    margin-top: -2px;
    z-index: 1050;
    list-style: none;
    border-image-source: linear-gradient(0deg, rgba(221, 221, 221, 1) 54%, rgba(255, 255, 255, 0) 100%);
    border-image-slice: 1;
    border-bottom-left-radius: 6px !important;
    border-bottom-right-radius: 6px !important;
    overflow: hidden;
}

.cta-btn-outline-sm.dropdown-hover:hover>ul.dropdown-menu-small>li:first-child {
    border-top: 16px solid transparent;
    border-top-left-radius: 6px !important;
    border-top-right-radius: 6px !important;
}

.cta-btn-outline-sm.dropdown-hover:hover>ul.dropdown-menu-small>li:last-child {
    border-bottom-left-radius: 6px !important;
    border-bottom-right-radius: 6px !important;
}

.cta-btn-outline-sm.dropdown-hover:hover>ul.dropdown-menu-small li {
    width: 100%;
    display: block;
    position: relative;
    border-bottom: 1px solid var(--gray-100);
}

.cta-btn-outline-sm.dropdown-hover:hover>ul.dropdown-menu-small li a::before {
    margin-left: unset;
    margin-right: unset;
    left: 1px;
    width: 2px;
    height: 16px;
    bottom: 10px;
    content: "";
    width: 16px;
    height: 2px;
    background: var(--scarlet-red-400);
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    text-align: center;
    bottom: -1.5px;
    transition: 0.5s;
    opacity: 0;
    margin-left: unset;
    margin-right: unset;
    width: 2px;
    height: 16px;
    bottom: 15px;
}

.cta-btn-outline-sm.dropdown-hover:hover>ul.dropdown-menu-small li a:hover::before {
    content: "";
    width: 2px;
    height: 16px;
    bottom: 15px;
    left: 1px !important;
    transition: 0.5s;
    opacity: 1;
    position: absolute;
    background: var(--scarlet-red-600);
    margin-left: unset;
    margin-right: unset;
}

.cta-btn-outline-sm.dropdown-hover:hover>ul.dropdown-menu-small li:last-child {
    border-bottom: none;
    border-bottom-left-radius: 6px !important;
    border-bottom-right-radius: 6px !important;
}

.cta-btn-outline-sm.dropdown-hover:hover>ul.dropdown-menu-small li a {
    display: block;
    padding: 12px 18px 14px 18px;
    color: var(--gray-700);
    font: 400 15px/20px var(--font-geist);
    text-decoration: none;
    transition: all 0.3s ease;
    border-radius: 0;
    border: none;
    width: 100%;
    background: var(--white-one);
    font: 400 17px/21px var(--font-geist);
}

.cta-btn-outline-sm.dropdown-hover:hover>ul.dropdown-menu-small li:first-child a {
    border-top-left-radius: 6px !important;
    border-top-right-radius: 6px !important;
    overflow: hidden;
}

.cta-btn-outline-sm.dropdown-hover:hover>ul.dropdown-menu-small li a:hover {
    background: var(--scarlet-red-50);
    color: var(--scarlet-red-600);
}

.cta-btn-outline-sm.dropdown-hover:hover a .icon-chevrondown-small svg {
    transform: rotate(180deg);
    transition: transform 0.3s ease;
}

.cta-btn-outline-sm a .icon-chevrondown-small svg {
    transition: transform 0.3s ease;
}

/* ==========================================================================
   SUBMENU CTA DAFTAR HARGA HOVER END
   ========================================================================== */

.wrp-center-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.cta-btn-green a {
    display: flex;
    align-items: center;
    background: linear-gradient(to right, #2fb852 0%, #2fb852 71%, #21983f 100%);
    border-radius: 48px;
    padding: 8px 22px;
    gap: 10px;
    color: var(--white-one);
    font: 400 16px/20px var(--font-geist);
    width: fit-content;
    text-decoration: none;
    letter-spacing: -0.36px;
    border: 2px solid #8ee7a4;
}

.cta-btn-outline-sm a {
    display: flex;
    align-items: center;
    background: transparent;
    border-radius: 48px;
    padding: 13.5px 16px;
    gap: 10px;
    color: var(--white-one);
    font: 400 16px/18.5px var(--font-geist);
    width: fit-content;
    text-decoration: none;
    letter-spacing: -0.24px;
    border: 2px solid var(--white-one);
}

.cta-btn-outline-sm a span,
.text-btn-singleline span {
    font: 400 16px/20px var(--font-geist);
    letter-spacing: -0.10px;
}

.navbar:hover .cta-btn-outline-sm a {
    color: var(--scarlet-red-600);
    border: 2px solid var(--scarlet-red-600);
    transition: 0.5s;
}

.navbar:hover .cta-btn-outline-sm a .icon-chevrondown-small svg .cls-1 {
    fill: var(--scarlet-red-600);
    transition: 0.5s;
}

.cta-btn-green-sm a {
    display: flex;
    align-items: center;
    background: linear-gradient(to right, #2fb852 0%, #2fb852 71%, #21983f 100%);
    border-radius: 48px;
    padding: 13.5px 16px;
    gap: 10px;
    color: var(--white-one);
    font: 400 16px/18.5px var(--font-geist);
    width: fit-content;
    text-decoration: none;
    letter-spacing: -0.24px;
    border: 2px solid #8ee7a4;
}

.cta-btn-green-sm a span,
.cta-btn-green-block a span {
    font: 400 16px/20px var(--font-geist);
    letter-spacing: -0.40px;
}

.cta-btn-green-block {
    width: 100%;
    height: auto;
}

.cta-btn-green-block a {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to right, #2fb852 0%, #2fb852 71%, #21983f 100%);
    border-radius: 48px;
    padding: 16px;
    gap: 10px;
    color: var(--white-one);
    font: 400 16px/18.5px var(--font-geist);
    width: 100%;
    text-decoration: none;
    letter-spacing: -0.24px;
    border: 2px solid #8ee7a4;
}

.text-btn-multyline {
    padding-left: 6px;
    position: relative;
}

.text-btn-singleine {
    position: relative;
    padding: 0px;
    margin: 0px;
    width: fit-content;
}

.text-btn-multyline::before {
    content: "";
    position: absolute;
    width: 1.5px;
    height: 32px;
    background: var(--white-one);
    left: -2.5px;
    top: 50%;
    transform: translateY(-50%);
}

.icon-whatsapp {
    width: 30px;
    min-height: 30px;
}

.icon-whatsapp svg,
.icon-whatsapp-small svg,
.icon-chevrondown-small svg {
    fill: var(--white-one);
}

.icon-menu-order {
    width: 32px;
    min-height: 32px;
}

.icon-sheep-one {
    width: 90px;
    height: auto;
    position: absolute;
    bottom: 24.56%;
    left: 2.5%;
}

.icon-sheep-one img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.icon-sheep-two {
    width: 98px;
    height: auto;
    position: absolute;
    bottom: 8.56%;
    right: 3.5%;
    z-index: 2;
}

.icon-sheep-two img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.icon-sheep-three {
    width: 86px;
    height: auto;
    position: absolute;
    bottom: 3.56%;
    right: 53.5%;
    z-index: 2;
}

.icon-sheep-three img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.icon-sheep-tree {
    width: 148px;
    height: auto;
    position: absolute;
    bottom: 18.56%;
    right: 50.5%;
    z-index: 1;
}

.icon-sheep-tree img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.icon-menu-order svg {
    width: 100%;
    height: 100%;
    object-fit: fill;
    fill: var(--gray-800);
}

[data-theme="dark"] .left-closing-cta .cta-btn-white a .icon-menu-order svg {
    fill: #212831 !important;
}

.icon-whatsapp-small {
    width: 20px;
    min-height: 20px;
}

.icon-chevrondown-small {
    width: 12px;
    height: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.icon-chevrondown-small svg {
    width: 100%;
    height: 100%;
    display: block;
}

.label-title-registered {
    width: 100%;
    height: auto;
    margin-bottom: 10px;
}

.label-title-registered h3 {
    font: 600 18.56px/22.64px var(--font-geist);
    color: var(--gray-800);
    margin-bottom: 18px;
    letter-spacing: -0.36px;
    width: fit-content;
}

.address-footer {
    width: 100%;
    height: auto;
    margin-bottom: 30px;
}

.registered-list {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.content-logo-registered {
    width: 64px;
    height: 84px;
}

.content-logo-registered img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.social-network-corporate {
    font: normal clamp(0.8125rem, 0.7203rem + 0.4609vw, 1.0775rem) var(--font-geist);
    min-height: 32px;
    height: auto;
    color: var(--gray-500);
    letter-spacing: 0.24px;
}

.socmed-circle {
    width: 32px;
    height: 32px;
    background: #d9d9e4;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.social-network-corporate ul {
    width: auto;
    padding-left: 0px;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 5px;
}

.social-network-corporate ul li:first-child {
    padding-left: 0px;
}

.social-network-corporate ul li {
    padding: 6px 5px 6px 5px;
    list-style: none;
    display: inline-block;
}

.dialog-all-menu .social-network-corporate {
    display: flex;
    align-items: center;
}

.dialog-all-menu .social-network-corporate .show-hide-kit h4,
.dialog-all-menu .social-network-corporate .show-hide-kit h2 {
    margin-bottom: 1px;
}

.social-network-corporate ul li .socmed-circle.socmed-facebook {
    background: #5a79bc;
    border: 1px solid #5a79bc;
}

.social-network-corporate ul li .socmed-circle.socmed-facebook svg {
    width: 16px;
    fill: #fff;
}

.social-network-corporate ul li .socmed-circle.socmed-facebook:hover {
    background: #415DA1;
    border: 1px solid #415DA1;
    transition: 0.5s;
    box-shadow: 3px 3px 10px 0px rgba(76, 76, 76, 0.2);
}

.socmed-circle.socmed-facebook:hover svg {
    fill: #fff;
    transition: 0.5s;
}

.social-network-corporate ul li .socmed-circle.socmed-twitter,
.social-network-corporate ul li .socmed-circle.socmed-tiktok {
    background: #24292F;
    border: 1px solid #24292F;
}

.social-network-corporate ul li .socmed-circle.socmed-twitter svg,
.social-network-corporate ul li .socmed-circle.socmed-tiktok svg {
    width: 13px;
    fill: #fff;
}

.social-network-corporate ul li .socmed-circle.socmed-twitter:hover,
.social-network-corporate ul li .socmed-circle.socmed-tiktok:hover {
    background: #121721;
    border: 1px solid #121721;
    transition: 0.5s;
    box-shadow: 3px 3px 10px 0px rgba(76, 76, 76, 0.2);
}

.socmed-circle.socmed-twitter:hover svg,
.socmed-circle.socmed-tiktok:hover svg {
    fill: #fff;
    transition: 0.5s;
}

.social-network-corporate ul li .socmed-circle.socmed-instagram {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}

.social-network-corporate ul li .socmed-circle.socmed-instagram svg {
    width: 16px;
    fill: #fff !important;
}

.social-network-corporate ul li .socmed-circle.socmed-instagram svg path.st0,
.social-network-corporate ul li .socmed-circle.socmed-instagram .img-icon-socmed-share svg [class*="stop-frame-"] {
    stop-color: #fff;
    fill: #fff;
}

.social-network-corporate ul li .socmed-circle.socmed-instagram:hover .img-icon-socmed-share {
    background: radial-gradient(circle farthest-corner at 35% 90%, #fec564, transparent 50%), radial-gradient(circle farthest-corner at 0 140%, #fec564, transparent 50%), radial-gradient(ellipse farthest-corner at 0 -25%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 20% -50%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 0, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 60% -20%, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 100%, #d9317a, transparent), linear-gradient(#6559ca, #bc318f 30%, #e33f5f 50%, #f77638 70%, #fec66d 100%);
    border: double 1px transparent;
    background-origin: border-box;
    background-clip: content-box, border-box;
    border-radius: 20px;
    box-shadow: 3px 3px 10px 0px rgba(76, 76, 76, 0.2);
}

.social-network-corporate ul li .socmed-circle.socmed-instagram:hover .img-icon-socmed-share svg [class*="stop-frame-"] {
    stop-color: #fff;
    filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(288%) contrast(109%);
}

.social-network-corporate ul li .socmed-circle.socmed-wa {
    background: #e7fff2;
    border: 1px solid #e7fff2;
}

.social-network-corporate ul li .socmed-circle.socmed-wa svg {
    width: 16px;
    fill-rule: evenodd;
    clip-rule: evenodd;
    fill: #1bd741;
    transition: 0.5s;
}

.social-network-corporate ul li .socmed-circle.socmed-wa:hover {
    background: #1bd741;
    border: 1px solid #1bd741;
    transition: 0.5s;
    box-shadow: 3px 3px 10px 0px rgba(76, 76, 76, 0.2);
}

.socmed-circle.socmed-wa:hover svg path.st0 {
    fill-rule: evenodd;
    clip-rule: evenodd;
    fill: var(--white-one);
    transition: 0.5s;
}

.social-network-corporate ul li .socmed-circle.socmed-youtube {
    background: #ff0000;
    border: 1px solid #ff0000;
}

.social-network-corporate ul li .socmed-circle.socmed-youtube svg {
    width: 16px;
    fill-rule: evenodd;
    clip-rule: evenodd;
    fill: #fff;
    transition: 0.5s;
}

.social-network-corporate ul li .socmed-circle.socmed-youtube:hover {
    background: #DB0012;
    border: 1px solid #DB0012;
    transition: 0.5s;
    box-shadow: 3px 3px 10px 0px rgba(76, 76, 76, 0.2);
}

.socmed-circle.socmed-youtube:hover svg path.st0 {
    fill-rule: evenodd;
    clip-rule: evenodd;
    fill: var(--white-one);
    transition: 0.5s;
}

.socmed-circle .img-icon-socmed-share {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 6px 7px;
    min-height: 40px;
}

.socmed-circle.socmed-twitter .img-icon-socmed-share {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 6px 8.5px;
    min-height: 40px;
}

.footer-bottom {
    width: 100%;
    margin-top: 24px;
}

.right-copyright {
    display: flex;
    justify-content: flex-end;
}


/* DETAIL BLOG PAGE START */

.wrp-title-atribute {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: auto;
    margin-top: 86px;
    margin-bottom: 24px;
}

.wrp-breadcrumb {
    width: 100%;
    height: auto;
    padding: 5px 0px;
}

.wrp-title-details {
    width: 100%;
    height: auto;
}

.wrp-title-details .title-details {
    width: 90%;
    height: auto;
    padding-right: 56px;
    padding-bottom: 24px;
}

.wrp-title-details .title-details h1 {
    font: 700 46px/60px var(--font-geist);
    color: var(--gray-900);
}

.wrp-publisher-time {
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    -ms-align-items: center;
    -moz-align-items: center;
    -webkit-align-items: center;
}

.publisher-time time {
    width: 100%;
    font: normal 500 18.56px/25.24px var(--font-geist);
    color: var(--gray-800);
}

.wrp-publisher {
    width: auto;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    -ms-align-items: center;
    -moz-align-items: center;
    -webkit-align-items: center;
    gap: 15px;
}

.circle-publisher {
    width: 52px;
    height: 52px;
    border-radius: 26px;
    overflow: hidden;
    background: #e1e1e1;
}

.circle-publisher img {
    width: 100%;
    height: 100%;
    object-fit: fill;
}

.publisher-name span {
    font: normal 400 18.56px/25.24px var(--font-geist);
    color: var(--gray-500);
}

.publisher-name h4 {
    font: 600 22px/29px var(--font-geist);
    color: var(--gray-800);
}

.publisher-time {
    width: auto;
    padding-left: 30px;
    padding-right: 20px;
    font: normal 400 18.56px/25.24px var(--font-geist);
    color: var(--gray-500);
}

.publisher-name-text {
    font: normal 500 18.56px/25.24px var(--font-geist);
}

.publisher-time h4 {
    font: normal 400 18.56px/25.24px var(--font-geist);
    color: var(--gray-800);
}

.gutter-article {
    display: flex;
    flex-wrap: wrap;
    margin-left: -18px;
    margin-right: -18px;
}

.left-col-article {
    width: 64%;
    height: auto;
    padding-left: 18px;
    padding-right: 18px;
}

.article-content-text {
    font: normal 400 21px/29.86px var(--font-geist);
    color: var(--gray-500);
    letter-spacing: -0.32px;
    padding-right: 24px;
}

.article-content-text h2 {
    font: 600 28px/32.86px var(--font-geist);
    color: var(--gray-900);
    letter-spacing: -0.24px;
    margin-bottom: 24px;
    white-space: normal;
}

.article-content-text ul {
    padding-left: 15px;
}

.article-content-text ul li {
    margin-bottom: 15px;
}

.article-content-text p {
    margin-bottom: 26px;
}

.wrp-article-tag {
    max-width: 100%;
    flex: 0 0 100%;
    padding-left: 0px;
    padding-right: 15px;
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

.related-section {
    display: flex;
    gap: 20px;
    padding: 56px 0px 24px 0px;
}

.related-section h2 {
    font: 700 26.24px/30px var(--font-geist);
}

.badge-article {
    display: flex;
    gap: 10px;
    padding: 8px 18px;
    border-radius: 50px;
    border: 2px solid var(--gray-200);
    background: rgba(255, 255, 255, 0.5);
    font: 500 16px/21px var(--font-geist);
    color: var(--gray-600);
    text-decoration: none;
}

.article-content-text h4 {
    font: normal 500 22px/20.86px var(--font-geist);
    color: var(--gray-900);
    letter-spacing: -0.24px;
    padding-right: 6px;
    margin-bottom: 10px;
    white-space: normal;
}

.article-content-text img {
    max-width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 6.4px;
    overflow: hidden;
    margin-bottom: 16px;
    margin-top: 15px;
}

.right-col-popular {
    width: 36%;
    height: auto;
    padding-left: 18px;
    padding-right: 18px;
}

.right-col-popular .wrp-outline-popular {
    padding: 27px 0px 15px 0px;
}

.wrp-outline-popular {
    width: 100%;
    height: auto;
    border-radius: 12.5px;
    overflow: hidden;
    min-height: 225px;
    padding: 27px 10px 15px 0px;
}

.right-col-popular .wrp-title-section-card {
    padding: 24px 18px 36px 18px;
}

.share-top-socmed {
    width: 100%;
    height: auto;
    display: block;
    padding-left: 24px;
    padding-right: 24px;
}

.left-share-label {
    width: 120px;
    height: auto;
    border-right: 1px solid #dedede;
    color: #363636;
    margin-bottom: 20px;
    float: left;
}

.left-share-label p {
    font-size: 15px;
    color: #363636;
    line-height: 17px;
    margin-bottom: 2px;
}

.left-share-label span {
    font-size: 13px;
    color: #606060;
    line-height: 16px;
    margin-bottom: 3px;
}

.right-share-label {
    float: left;
}

.right-share-label ul {
    list-style: none;
    padding-left: 15px;
}

.right-share-label ul li {
    padding-left: 10px;
    display: inline;
    float: left;
}

.right-share-label ul li a {
    border-radius: 21px;
    border: 1px solid #606060;
    text-align: center;
    width: 40px !important;
    height: 40px !important;
    line-height: 25px;
    display: block;
}

.right-share-label ul li a:hover {
    border: 1px solid #e32028;
}

.right-share-label ul li a:focus {
    border: 1px solid #e32028;
}


.right-share-label ul li a img {
    width: 20px;
    margin-top: 10px;
}

.right-share-label ul li a svg {
    margin-top: 10px;
    fill: #606060;
}

.right-share-label ul li:nth-child(1) a:hover svg {
    fill: #e32028;
}

.right-share-label ul li:nth-child(2) a:hover svg {
    fill: #e32028;
}

.right-share-label ul li:nth-child(3) a:hover svg {
    fill: #e32028;
}

.right-share-label ul li:nth-child(1) a:focus svg {
    fill: #e32028;
}

.right-share-label ul li:nth-child(2) a:focus svg {
    fill: #e32028;
}

.right-share-label ul li:nth-child(3) a:focus svg {
    fill: #e32028;
}

.wrp-share-vertical {
    position: sticky;
    position: -webkit-sticky;
    position: sticky;
    top: 186px;
    height: 200px;
    width: 100%;
    margin-bottom: 76px;
}

.vertical-share-label {
    float: right;
    height: auto;
    margin-top: 4px;
}

.vertical-share-label ul {
    list-style: none;
    padding-left: 10px;
    margin-right: 4px;
    margin-top: 4px;
}

.vertical-share-label ul li {
    padding-left: 10px;
    display: list-item;
}

.vertical-share-label ul li a {
    border-radius: 21px;
    border: 1px solid #606060;
    text-align: center;
    width: 40px !important;
    height: 40px !important;
    line-height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
}

.vertical-share-label ul li a:hover {
    border: 1px solid #e32028;
}

.vertical-share-label ul li a:hover svg {
    fill: var(--scarlet-red-600) !important;
    transition: all .5s ease;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
}

.vertical-share-label ul li a:focus {
    border: 1px solid #e32028;
}

.vertical-share-label ul li a svg {
    fill: #606060;
    transition: all .5s ease;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
}

.vertical-share-label ul li:nth-child(1) a:hover svg {
    fill: #e32028;
}

.vertical-share-label ul li:nth-child(2) a:hover svg {
    fill: #e32028;
}

.vertical-share-label ul li:nth-child(3) a:hover svg {
    fill: #e32028;
}

.vertical-share-label ul li:nth-child(1) a:focus svg {
    fill: #e32028;
}

.vertical-share-label ul li:nth-child(2) a:focus svg {
    fill: #e32028;
}

.vertical-share-label ul li:nth-child(3) a:focus svg {
    fill: #e32028;
}

.share-text-vertical {
    height: 45px;
    width: 190px;
    background: #e32028;
    float: left;
    -ms-transform: rotate(270deg);
    /* IE 9 */
    transform: rotate(270deg);
    position: relative;
    top: 124px;
    line-height: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.share-text-vertical span {
    font-family: 'Rubik-Regular', sans-serif;
    font-size: 18px;
    color: #363636;
    line-height: 46px;
    font-weight: 500;
    letter-spacing: 0.5px;
    color: #fff;
}

.wa-icon-share {
    width: 21px;
    height: 21px;
}

.wa-icon-share svg {
    max-width: 100%;
    height: 100%;
    object-fit: contain;
}

.vertical-share-label li:nth-child(3 of li) svg {
    margin-top: 4px;
}

.vertical-share-label li:nth-child(4 of li) svg {
    margin-top: -1.5px;
}

.wrapper-shadow {
    width: 100%;
    height: auto;
    position: relative;
    overflow: hidden;
    margin-top: -124px;
}

.wrp-title-section-card {
    width: 100%;
    height: auto;
    background: #f5fafe;
    overflow: hidden;
    border-top-left-radius: 12.5px;
    border-top-right-radius: 12.5px;
    padding: 24px 23px 5px 23px;
}

.title-section-items h3 {
    font: normal 600 22px/20.86px var(--font-geist);
    color: var(--gray-900);
    letter-spacing: -0.36px;
}

.wrapper-shadow {
    width: 100%;
    height: auto;
    position: relative;
    overflow: visible;
    margin-top: -118px;
}

.shadow-white {
    width: 100%;
    height: 110px;
    background: -moz-linear-gradient(top, rgba(252, 252, 251, 0.24) 0%, rgb(252, 252, 251) 57%, rgb(252, 252, 251) 92%);
    background: -webkit-linear-gradient(top, rgba(252, 252, 251, 0.24) 0%, rgb(252, 252, 251) 57%, rgb(252, 252, 251) 92%);
    background: linear-gradient(to bottom, rgba(252, 252, 251, 0.24) 0%, rgb(252, 252, 251) 57%, rgb(252, 252, 251) 92%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#3dfcfcfb", endColorstr="#fcfcfb", GradientType=0);
    position: sticky;
    bottom: 0px;
    transform: translateY(494px);
    z-index: 3;
    border-bottom-left-radius: 12.5px;
    border-bottom-right-radius: 12.5px;
    margin-bottom: -2px;
    pointer-events: none;
}

.right-col-popular .wrp-inner-popular {
    padding: 10px 20px 24px 20px;
}

.wrp-outline-popular .wrp-inner-popular {
    background: #f5fafe;
    width: 100%;
    height: auto;
    border-radius: 12.5px;
    overflow: hidden;
    overflow-y: hidden;
    min-height: 225px;
    max-height: 496px;
    overflow-y: scroll;
    padding: 10px 20px 24px 20px;
    position: relative;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.wrp-card-list-popular {
    width: 100%;
    height: auto;
}

.card-list-popular {
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    -ms-align-items: center;
    padding: 15px 0px;
    display: block;
    border-radius: 6.4px;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
}

.hastag-link {
    width: 100%;
    height: auto;
    position: relative;
    padding-left: 76px;
}

.hastag-number {
    width: 48px;
    height: 48px;
    border-radius: 24px;
    background: #e3f0fb;
    position: absolute;
    top: 3.5px;
    left: 5px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    -ms-align-items: center;
    justify-content: center;
    -ms-justify-content: center;
}

.hastag-number a {
    text-decoration: none;
    outline: none;
    font: normal 400 20px/28.86px var(--font-geist);
    color: var(--gray-500);
    letter-spacing: -0.32px;
}

.hastag-number a span {
    font: normal 400 20px/28.86px var(--font-geist);
    color: var(--gray-500);
    letter-spacing: -0.32px;
}

.wrp-column-title-popular {
    width: 99%;
    height: auto;
}

.title-card-headline-one {
    min-height: 29px;
}

.title-card-headline-one a {
    text-decoration: none;
    outline: none;
    width: 100%;
    display: flex;
    transition: ease .5s;
    -webkit-transition: ease .5s;
    -moz-transition: ease .5s;
    -ms-transition: ease .5s;
    -o-transition: ease .5s;
}

.title-card-headline-one a:hover span {
    text-decoration: none;
    outline: none;
    color: var(--scarlet-red-600);
    transition: ease .5s;
    -webkit-transition: ease .5s;
    -moz-transition: ease .5s;
    -ms-transition: ease .5s;
    -o-transition: ease .5s;
}

.breadcrumb-item {
    font: normal 400 17.56px/24.24px var(--font-geist);
    color: var(--gray-500);
}

.breadcrumb-item a {
    color: #2a80cd !important;
    text-decoration: none;
    outline: none;
    font: normal 400 17.56px/24.24px var(--font-geist);
    color: var(--gray-500);
}

.title-card-headline-one a h3 {
    font: normal 500 22px/24.86px var(--font-geist);
    color: var(--gray-900);
    letter-spacing: -0.15px;
    padding-right: 6px;
    margin-bottom: 5px;
    white-space: normal;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
}

.title-card-headline-one a:hover h3 {
    color: var(--scarlet-red-600);
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
}

.share-button-mobile {
    display: none;
}

.row-article-detail {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.wrp-title-tag {
    font: normal 400 21px/29.86px var(--font-geist);
    width: 100%;
    margin-top: 24px;
}

.wrp-title-tag h4 {
    font: 600 21.64px/28px var(--font-geist);
}

.chanel-time {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    -ms-align-items: center;
    gap: 10px;
}

.btn-white {
    font: normal 400 18.32px/23.64px var(--font-geist);
    color: var(--gray-700);
    font-weight: 500;
    text-align: center;
    background: #fff;
    color: #76767e;
    border: 1px solid #d9d9e4;
    border-radius: 36.4px;
    text-decoration: none;
    padding: 15px 16px;
    margin: 15px 0px 15px 0px;
}

.all-action-floating {
    width: 100%;
    height: auto;
    padding: 10px 0px 5px 0px;
    position: sticky;
    bottom: 0px;
    left: 0px;
    overflow: unset;
    z-index: 3;
}

.btn-block {
    display: block;
    width: 100%;
}

.thumbnail-related-horizontal {
    width: 100%;
    height: auto;
    height: 194px;
    position: relative;
    overflow: hidden;
    background: #f9f9f8;
    border-radius: 6px;
    margin-bottom: 16px;
    margin-top: 6px;
}

.category-label {
    font-weight: 600;
    font: normal 500 22px/24.86px var(--font-geist);
    color: var(--gray-900);
    letter-spacing: -0.15px;
    padding-right: 6px;
    margin-bottom: 5px;
    white-space: normal;
}

.card-related-horizontal a {
    position: relative;
    width: 100%;
    height: auto;
    text-decoration: none;
    outline: none;
}

.content-related-horizontal h3 {
    font: normal 500 18.84px/25.44px var(--font-geist);
    color: var(--gray-900);
}

.card-related-horizontal {
    width: 100%;
    height: auto;
    font: normal 400 18.32px/22.64px var(--font-geist);
}

.card-related-horizontal .tag-news span {
    font: normal 400 16px/22.24px var(--font-geist);
    margin-bottom: 8px;
}

.card-related-horizontal:hover .thumbnail-related-horizontal img {
    transform: scale(1.1, 1.1);
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
}

.thumbnail-related-horizontal img {
    width: 100%;
    height: auto;
    position: relative;
    object-fit: cover;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
}

.content-related-horizontal h3 {
    font: 600 23px/28px var(--font-geist);
    color: var(--gray-800);
    margin-bottom: 0px;
    letter-spacing: -0.58px;
    width: fit-content;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
}

.card-related-horizontal a:hover .content-related-horizontal h3 {
    color: var(--scarlet-red-600);
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
}

.header-list-blog {
    width: 100%;
    min-height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 0px;
    margin-top: 36px;
}

.header-list-blog h1 {
    font: 600 44px/60px var(--font-geist);
    color: var(--gray-900);
    letter-spacing: -0.58px;
    margin-bottom: 0px;
    text-align: center;
}

.time-article {
    width: 100%;
    height: auto;
    font: normal 400 15px/23px var(--font-geist);
    color: var(--gray-500);
    margin-top: 2px;
}

/* DETAIL BLOG PAGE END */
/* ==========================================================================
   RESPONSIVE MEDIA QUERIES (NON-DESTRUCTIVE ADDONS)
   ========================================================================== */


@media screen and (max-width: 1920px) {
    .center-container {
        max-width: 1480px;
    }

    .ornament-white-navbar {
        width: 614px;
        left: 0;
        height: 128px;
        top: -1px;
    }

    .ornament-white-navbar::before {
        content: " ";
        position: absolute;
        top: 0;
        left: 0;
        width: 258px;
        height: 128px;
        background: var(--white-one);
    }

    header {
        min-height: 128px;
    }

    .navbar {
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .multy-cta-navbar {
        margin-bottom: 4px;
    }

    .cta-btn-outline-sm a span,
    .text-btn-singleline span {
        font: 400 17px/21px var(--font-geist);
    }

    .cta-btn-green-sm a span,
    .cta-btn-green-block a span {
        font: 400 17px/21px var(--font-geist);
    }

    .cta-btn-green-sm a span,
    .cta-btn-green-block a span {
        font: 400 18px/22px var(--font-geist);
    }

    .icon-whatsapp-small {
        width: 24px;
        min-height: 24px;
    }

    .navbar-items-menu ul li a {
        font: normal 400 18.32px/22.64px var(--font-geist);
    }

    .avatar-people {
        width: 56px;
        height: 56px;
    }

    .point-number-review h3 {
        font: normal 600 43px/44.64px var(--font-geist);
    }

    .wrp-nav-item .navbar-nav li:hover>ul.dropdown-menu-small {
        min-width: 276px;
    }

    .navbar-items-menu ul li.dropdown-hover ul li a {
        font: normal 400 18.32px/22.64px var(--font-geist);
    }

    .image-model-gonamaqiqah {
        width: 664px;
        height: 719px;
        position: relative;
        margin-bottom: -105px;
        left: -15px;
    }

    .title-hero-main h1,
    .title-hero-main h2 {
        font: normal 600 46px/60px var(--font-geist);
    }

    .title-hero-main h1 span,
    .title-hero-main h2 span {
        font: normal 700 44.24px/58.56px var(--font-libre);
        font-style: italic;
    }

    .desc-hero-main {
        font: normal 400 20px/25.24px var(--font-geist);
        margin-top: 5px;
    }

    .left-price-card {
        font: normal 400 20px/25.24px var(--font-geist);
    }

    .value-costumer-proofs {
        font: normal 400 20px/25.24px var(--font-geist);
    }

    .right-price-card p {
        font: normal 600 45px/45.64px var(--font-geist);
    }

    .right-price-card span {
        font: normal 600 20.64px/31.64px var(--font-geist);
    }

    .text-guarantee h3 {
        font: normal 400 20px/25.24px var(--font-geist);
    }

    .title-card-box h3 {
        font: 500 31.64px/36.64px var(--font-geist);
    }

    .des-card-box,
    .des-card-box p {
        width: 95.24%;
        font: normal 400 20px/25.24px var(--font-geist);
        color: var(--gray-500);
    }

    .blockquote-home {
        margin-top: 36px;
        margin-bottom: 30px;
    }

    .blockquote-home p {
        font: normal 700 40px/47px var(--font-libre);
        font-style: italic;
    }

    .blockquote-footer cite {
        font: normal 700 40px/47px var(--font-libre);
        font-style: italic;
    }

    .tagline-about h2 {
        font: 700 39px/47px var(--font-geist);
    }

    .value-key-matrix {
        margin-bottom: 10px;
    }

    .tagline-about h2 span {
        color: var(--scarlet-red-500);
        font: normal 700 38px/46px var(--font-libre);
        font-style: italic;
    }

    .label-text-cta {
        font: 400 18.32px/22.64px var(--font-geist);
    }

    .icon-text-cta {
        width: 12px;
        height: 12px;
    }

    .text-content-about {
        width: 75%;
        font: normal 400 19px/29px var(--font-geist);
    }

    .section-about-keymatrix {
        padding: 76px 0px 86px 0px;
    }

    .section-why-gonam {
        padding: 76px 0px 86px 0px;
    }

    .title-why-gonam h2 {
        font: 700 39px/47px var(--font-geist);
    }

    .tagline-about h2 span {
        font: normal 700 38px/46px var(--font-libre);
        font-style: italic;
    }

    .wrapper-testimoni {
        width: 986px;
        padding: 35px 28px;
    }

    [data-theme="dark"] .wrapper-testimoni {
        background-color: #191f26 !important;
        border-color: #191f26 !important;
    }

    .text-content-why {
        width: 75%;
        font: normal 400 19px/29px var(--font-geist);
    }

    .title-left-package h2 {
        font: 700 39px/47px var(--font-geist);
    }

    .title-left-package h2 span {
        font: normal 700 38px/46px var(--font-libre);
        font-style: italic;
    }

    [data-theme="dark"] .title-left-package h2 span {
        color: #e41f28 !important;
    }

    .text-content-package {
        font: normal 400 19px/29px var(--font-geist);
        width: 69%;
    }

    .act-ghost-button a {
        font: 400 18.32px/22.64px var(--font-geist);
    }

    .Title-package-info h3 {
        font: normal 600 26px/28px var(--font-geist);
    }

    .card-title-package h3 a {
        font: normal 600 29px/31px var(--font-geist);
    }

    .price-value-card-cta p {
        font: normal 600 30px/34px var(--font-geist);
    }

    .card-benefit-package span.badge-chips {
        font: normal 400 17px/20px var(--font-geist);
    }

    .price-label-card-cta {
        font: normal 400 19px/29px var(--font-geist);
    }

    .card-cta-right a {
        font: 400 18px/22px var(--font-geist);
        border-radius: 32px;
        padding: 14.5px 16px;
    }

    .title-left-testimonial h2 {
        font: 700 39px/47px var(--font-geist);
    }

    .title-left-testimonial h2 span {
        font: normal 700 38px/46px var(--font-libre);
        font-style: italic;
    }

    .text-content-testimony {
        font: normal 400 19px/29px var(--font-geist);
        width: 79%;
    }

    .costumer-type {
        font: normal 400 18.56px/25.24px var(--font-geist);
    }

    .costumer-order-type {
        font: normal 400 18px/25.24px var(--font-geist);
        letter-spacing: -0.56px;
    }

    .google-review-title {
        font: normal 400 18.56px/25.24px var(--font-geist);
    }

    .content-text-testimoni {
        font: 500 22px/29.64px var(--font-geist);
    }

    .costumer-parent {
        width: 100%;
        font: 600 22px/29px var(--font-geist);
    }

    .costumer-child {
        width: 100%;
        font: normal 400 18.56px/25.24px var(--font-geist);
    }

    .value-review span {
        font: normal 600 32px/40.64px var(--font-geist);
    }

    .sub-title-review p {
        font: normal 600 17.24px/25.24px var(--font-geist);
    }

    .title-office-home h2 {
        font: 700 39px/47px var(--font-geist);
    }

    .office-branch-home {
        display: flex;
        flex-direction: column;
        justify-content: center;
        -ms-justify-content: center;
        -moz-justify-content: center;
        -webkit-justify-content: center;
        align-items: center;
        -ms-align-items: center;
        -moz-align-items: center;
        -webkit-align-items: center;
    }

    .title-left-testimonial h2 span {
        font: normal 700 38px/46px var(--font-libre);
        font-style: italic;
    }

    [data-theme="dark"] .title-left-testimonial h2 span {
        color: #e41f28 !important;
    }

    .content-desc-office-home {
        font: normal 400 19px/29px var(--font-geist);
        width: 89%;
    }

    .content-desc-office-home p {
        font: normal 400 19px/29px var(--font-geist);
    }

    .addres-head-office {
        width: 100%;
        font: normal 400 18.56px/25.24px var(--font-geist);
    }

    .content-direction-office p {
        font: normal 400 17.56px/26px var(--font-geist);
    }

    .title-location-office h3 {
        font: 600 25px/30px var(--font-geist);
        letter-spacing: -0.64px;
    }

    .right-office-branch {
        padding-left: 0px;
    }

    .title-location-office span {
        font: 600 20px/24.64px var(--font-geist);
    }

    .addres-head-office {
        font: normal 400 19px/29px var(--font-geist);
        padding-right: 24px;
    }

    .cta-btn-green a {
        font: 400 18.32px/22.64px var(--font-geist);
    }

    [data-theme="dark"] .cta-btn-green a {
        color: #fff !important;
    }

    [data-theme="dark"] .cta-btn-green a svg {
        fill: #fff !important;
    }

    [data-theme="dark"] .text-btn-multyline::before {
        background: #fff;
    }

    [data-theme="dark"] .cta-btn-white .text-btn-multyline::before {
        background: var(--gray-600);
    }

    .title-left-newsfeed h2 {
        font: 700 39px/47px var(--font-geist);
    }

    .title-office-home h2 span {
        font: normal 700 38px/46px var(--font-libre);
        font-style: italic;
    }

    .title-large-newsfeed h3 {
        font: 700 26.24px/30px var(--font-geist);
    }

    .title-newsfeed-vertical h3 {
        font: 600 24.64px/30px var(--font-geist);
    }

    .text-content-newsfeed {
        font: normal 400 19px/29px var(--font-geist);
    }

    .tag-news span {
        font: normal 400 17.56px/24.24px var(--font-geist);
    }

    .desc-large-newsfeed p {
        font: normal 400 19px/29px var(--font-geist);
    }

    .desc-closing-cta {
        font: normal 400 21.64px/27.64px var(--font-geist);
    }

    .desc-closing-cta p {
        font: normal 400 21.64px/27.64px var(--font-geist);
    }

    .desc-address-company,
    .registered-company {
        font: normal 400 18.32px/22.64px var(--font-geist);
    }

    .content-title-registered,
    .right-content-copyright {
        font: normal 400 18.32px/22.64px var(--font-geist);
    }

    .item-link-footer ul li a {
        font: normal 400 18.32px/22.64px var(--font-geist);
    }

    .label-title-footer h3 {
        font: 600 21.64px/28px var(--font-geist);
    }
}

@media only screen and (min-width: 1512px) and (max-width: 1582px) and (orientation: landscape) {
    .center-container {
        max-width: 1340px;
        margin: 0 auto;
    }

    .des-card-box,
    .des-card-box p {
        width: 96.86%;
    }

    .ornament-white-navbar {
        width: 442px;
        top: -3px;
    }

    .navbar-items-menu ul li a {
        font: normal 400 17.64px/21.64px var(--font-geist);
    }

    .navbar-items-menu ul li.dropdown-hover ul li a {
        font: normal 400 17.64px/21.64px var(--font-geist);
    }

    .value-costumer-proofs {
        font: normal 400 18.86px/24.24px var(--font-geist);
    }

    .desc-hero-main {
        font: normal 400 19px/24.24px var(--font-geist);
    }

    .left-price-card {
        font: normal 400 18.86px/24.24px var(--font-geist);
    }

    .left-filter-column {
        width: 80%;
        flex: 0 0 auto;
    }

    .right-filter-column {
        width: 20%;
        flex: 0 0 auto;
    }

    .label-text-cta {
        font: normal 400 17.64px/21.64px var(--font-geist);
    }

    .card-title-package h3 a {
        font: normal 600 27.64px/30px var(--font-geist);
    }

    .price-value-card-cta p {
        font: normal 600 26.64px/30.64px var(--font-geist);
        letter-spacing: -0.64px;
    }

    .card-cta-right a {
        font: normal 400 17px/21px var(--font-geist);
        padding: 14.5px 14px;
        letter-spacing: -0.48px;
    }

    .title-newsfeed-vertical h3 {
        font: 600 23.56px/29.32px var(--font-geist);
    }

    .tag-news span {
        font: normal 400 15.24px/22.64px var(--font-geist);
    }

    .text-visit-youtube span {
        font: 500 14px/15px var(--font-geist);
    }

    .tag-news .tag-pill {
        font: 500 14px/15px var(--font-geist);
    }

    .item-link-footer ul li a {
        font: normal 400 17.64px/21.64px var(--font-geist);
    }

    .desc-address-company,
    .content-title-registered {
        font: normal 400 17.64px/21.64px var(--font-geist);
    }

    .content-title-registered,
    .right-content-copyright {
        font: normal 400 17.64px/21.64px var(--font-geist);
    }

    .label-title-footer h3 {
        font: 600 21px/27px var(--font-geist);
    }
}

/* --------------------------------------------------------------------------
   1. LAPTOPS & SMALL DESKTOPS (Max-Width: 1399px)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1399px) {
    .center-container {
        max-width: 1200px;
        padding-left: 20px;
        padding-right: 20px;
    }

    .row-navbar {
        padding-top: 2px;
        padding-bottom: 2px;
    }

    .wrp-nav-item {
        min-width: 720px;
        gap: 12px;
    }

    .wrapper-testimoni {
        width: 936px;
    }

    .navbar-items-menu ul li a {
        font: normal 400 14.32px/20.64px var(--font-geist);
        padding-left: 3px;
        padding-right: 3px;
    }

    .navbar-items-menu ul li.dropdown-hover ul li a {
        font: normal 400 14.32px/20.64px var(--font-geist);
    }

    .wrp-nav-item .navbar-nav li:hover>ul.dropdown-menu-small li {
        padding: 2px 0px;
    }

    .wrp-nav-item ul li .dropdown-menu-small a {
        padding: 9.5px 14px 10px 14px;
    }

    .wrp-nav-item .navbar-nav li:hover>ul.dropdown-menu-small {
        max-width: 236px;
        min-width: 232px;
    }

    .cta-btn-green-block a {
        padding: 14.5px 15px;
    }

    .content-cta-button a {
        padding: 16px 22px;
    }

    .label-text-cta {
        font: 400 14.24px/18px var(--font-geist);
    }

    .cta-btn-outline-sm a span,
    .text-btn-singleline span {
        font: 400 14.24px/18px var(--font-geist);
    }

    .cta-btn-green-sm a span,
    .cta-btn-green-block a span {
        font: 400 14.24px/18px var(--font-geist);
    }

    .cta-btn-outline-sm a {
        padding: 11.5px 14px;
    }

    .cta-btn-green-sm a {
        padding: 11.5px 14px;
    }

    header {
        min-height: 114px;
    }

    .ornament-white-navbar {
        top: -14px;
        position: fixed;
        left: -52px;
    }

    .image-model-gonamaqiqah {
        width: 472px;
        height: 520px;
    }

    .avatar-people {
        width: 48px;
        height: 48px;
    }

    .right-content-hero {
        padding: 20px 5px 20px 10px;
    }

    .right-price-card p {
        font: normal 600 40px/42.64px var(--font-geist);
    }

    .right-price-card span {
        font: normal 600 18px/29.64px var(--font-geist);
    }

    .card-cta-socialproof {
        margin-top: 22px;
    }

    .title-hero-main h1,
    .title-hero-main h2 {
        font: normal 600 40.44px/54.56px var(--font-geist);
    }

    .title-hero-main h2 {
        position: relative;
        top: -4px;
    }

    .title-hero-main h1 span,
    .title-hero-main h2 span {
        font: normal 700 38.44px/52.56px var(--font-libre);
        font-weight: bold;
        font-style: italic;
    }

    .desc-hero-main {
        font: normal 400 16.56px/24.24px var(--font-geist);
    }

    .icon-guarantee {
        width: 32px;
        height: 32px;
    }

    .text-guarantee h3 {
        font: 400 16.64px/22.64px var(--font-geist);
    }

    .point-number-review h3 {
        font: normal 600 34.24px/38.64px var(--font-geist);
    }

    .value-costumer-proofs {
        font: normal 400 16px/22.24px var(--font-geist);
    }

    .description-socialproof {
        margin-top: 12px;
    }

    .left-price-card {
        font: normal 400 16px/22.24px var(--font-geist);
    }

    .blockquote-home p {
        font: normal 700 32.44px/39.56px var(--font-libre);
        font-style: italic;
    }

    .content-desc-matrix {
        font: normal 600 18px/22.64px var(--font-geist);
    }

    .tagline-about h2 {
        font: 700 32.56px/40.34px var(--font-geist);
    }

    .tagline-about h2 span {
        font: normal 700 31px/40px var(--font-libre);
        font-style: italic;
    }

    .value-key-matrix span,
    .value-key-matrix span.value-key-matrix {
        font: normal 600 39px/40.64px var(--font-geist);
    }

    .text-content-about {
        width: 86%;
    }

    .title-why-gonam h2 {
        font: 700 32.56px/40.34px var(--font-geist);
    }

    .title-card-box h3 {
        font: 500 25.64px/32.64px var(--font-geist);
    }

    .title-why-gonam {
        padding: 18px 0px;
        width: 62.52%;
    }

    .left-filter-column {
        width: 80%;
        flex: 0 0 auto;
    }

    .right-filter-column {
        width: 20%;
        flex: 0 0 auto;
    }

    .button-tab.current {
        padding: 11px 15px;
    }

    .button-tab {
        padding: 11px 15px;
    }

    .title-left-package h2 {
        font: 700 32.56px/40.34px var(--font-geist);
    }

    .title-why-gonam h2 span {
        font: normal 700 31px/40px var(--font-libre);
        font-style: italic;
    }

    .title-left-package h2 span {
        font: normal 700 31px/40px var(--font-libre);
        font-style: italic;
    }

    .card-title-package {
        padding: 24px 20px 0px 20px;
    }

    .card-title-package h3 a {
        font: 500 25px/32px var(--font-geist);
    }

    .price-value-card-cta p {
        font: normal 600 23px/24.64px var(--font-geist);
    }

    .price-card-cta {
        padding: 0px 20px 30px 20px;
    }

    .card-cta-right a {
        padding: 11px 13px;
        font: 400 14px/19px var(--font-geist);
    }

    .text-content-package {
        width: 75%;
    }

    .title-left-testimonial h2 {
        font: 700 32.56px/40.34px var(--font-geist);
    }

    .title-left-testimonial h2 span {
        font: normal 700 31px/40px var(--font-libre);
        font-style: italic;
    }

    .text-content-testimony {
        width: 84.56%;
    }

    .card-testimoni {
        width: 100%;
        height: auto;
        padding-right: 80px;
    }

    .title-office-home h2 {
        font: 700 32.56px/40.34px var(--font-geist);
    }

    .title-office-home h2 span {
        font: normal 700 31px/40px var(--font-libre);
        font-style: italic;
    }

    [data-theme="dark"] .title-office-home h2 span {
        color: #e41f28 !important;
    }

    .title-location-office h3 {
        font: 600 20.24px/25.64px var(--font-geist);
    }

    .title-location-office span {
        font: 600 17px/21px var(--font-geist);
    }

    .addres-head-office {
        width: 100%;
        font: normal 400 16px/23px var(--font-geist);
    }

    .icon-direct-map {
        width: 20px;
        height: 20px;
    }

    .content-direction-office p {
        font: normal 400 15px/22px var(--font-geist);
    }

    .icon-whatsapp {
        width: 24px;
        min-height: 24px;
    }

    .cta-btn-green a {
        color: var(--white-one);
        font: 400 14.24px/18px var(--font-geist);
        padding: 7px 20px;
    }

    .addres-head-office {
        padding-right: 10px;
    }

    .patern-card-address {
        width: 336px;
        height: auto;
        min-height: 175px;
    }

    .icon-text-cta {
        width: 8px;
        height: 8px;
    }

    .thumbnail-newsfeed-vertical {
        width: 152px;
        height: 127px;
    }

    .content-newsfeed-vertical {
        min-width: 65.64%;
        max-width: 65.64%;
    }

    .left-card-newsfeed {
        padding-right: 10px;
    }

    .title-newsfeed-vertical h3 {
        font: 600 21.56px/26px var(--font-geist);
    }

    .title-left-newsfeed h2 {
        font: 700 32.56px/40.34px var(--font-geist);
    }

    .title-left-newsfeed h2 span {
        font: normal 700 31px/40px var(--font-libre);
        font-style: italic;
    }

    .title-large-newsfeed h3 {
        font: 700 21.56px/28px var(--font-geist);
    }

    .section-closing-cta {
        min-height: 230px;
    }

    .wrp-model-package {
        width: 320px;
        height: 440px;
    }

    .righ-closing-cta {
        width: 100%;
        height: auto;
        min-height: 418px;
    }

    .title-head-closing-cta h2 {
        font: normal 600 36px/42px var(--font-geist);
    }

    .desc-closing-cta p {
        font: normal 400 19.64px/26.64px var(--font-geist);
    }

    .item-link-footer ul li a {
        font: normal 400 15.64px/20px var(--font-geist);
    }

    .desc-address-company,
    .registered-company {
        font: normal 400 15.64px/20px var(--font-geist);
    }

    .content-title-registered,
    .right-content-copyright {
        font: normal 400 15.64px/20px var(--font-geist);
    }

    .label-title-footer h3 {
        font: 600 19.32px/26.64px var(--font-geist);
    }

    .label-title-registered h3 {
        font: 600 18px/22px var(--font-geist);
    }
}

/* --------------------------------------------------------------------------
   2. TABLETS LANDSCAPE & PORTRAIT (Max-Width: 1023px)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1023px) {
    .center-container {
        max-width: 100%;
        padding-left: 24px;
        padding-right: 24px;
    }

    .wrp-nav-item {
        min-width: 100%;
        justify-content: center;
    }

    .tagline-about,
    .title-why-gonam,
    .title-left-package,
    .title-left-testimonial,
    .title-left-newsfeed,
    .text-content-about,
    .text-content-why,
    .text-content-package,
    .text-content-newsfeed {
        width: 100%;
    }

    .content-right-about,
    .content-right-why,
    .content-right-package,
    .content-right-testimony,
    .content-right-newsfeed {
        justify-content: flex-start;
    }

    .large-feature-feednews {
        width: 100%;
    }

    .wrp-head-office,
    .wrp-list-office-branch {
        padding: 20px;
    }

    .left-head-office,
    .right-head-office,
    .left-office-branch,
    .right-office-branch {
        width: 100%;
        padding-right: 0px;
        padding-left: 0px;
    }

    .thumb-head-office,
    .content-office-home {
        width: 100%;
        padding: 10px 0px;
    }
}

/* --------------------------------------------------------------------------
   3. MOBILE SMARTPHONES (Max-Width: 767px)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
    body {
        overflow-x: clip;
    }

    .ornament-white-navbar {
        top: -14px;
        position: fixed;
        left: -152px;
        opacity: 0;
    }

    .navbar {
        padding-top: 8px;
        padding-bottom: 8px;
        box-shadow: 0 1px 10px rgba(151, 164, 175, .29);
    }

    /* 
    [data-theme="dark"].navbar {
        background: #0f0f0f !important;
        border-radius: 0;
    } */


    .right-header {
        position: relative;
        overflow: unset;
        height: auto;
    }

    .burger-mobile {
        display: flex;
    }

    .burger-mobile .hamburger {
        padding: 16px 1px 6px 5px;
        margin-right: -1px;
    }

    .ordered {
        order: 1;
        /* border: 2px solid #fff; */
        position: absolute;
        right: -10px;
        top: -56px;
        border-radius: 6px;
    }

    .left-header {
        padding-left: 10px;
        padding-right: 10px;
    }

    /* NAVBAR MOBILE START */

    body.unscrolled {
        overflow: hidden !important;
    }

    /* FLIP SLIDE MENU START */
    .tab-switch-map .nav-tabs {
        gap: 16px;
    }

    .navbar-desc {
        min-height: 80px;
    }

    .navbar-mobile-container {
        display: block;
    }

    /* 1. Kontainer Utama (Window) */
    .navbar-mobile-container {
        position: fixed;
        /* padding-top: 120px; */
        padding-top: 86px;
        margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0;
        width: 100vw;
        height: 101.5vh;
        height: calc(100vh - 2px);
        background: rgba(255, 255, 255, 1);
        border-radius: 16px;
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        z-index: 9;
        overflow: hidden;
        border-radius: 5px;
        /* Sembunyikan by default */
        visibility: hidden;
        opacity: 0;
        transition: opacity 0.3s ease, visibility 0.3s ease;
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;

    }

    .menu-link .icon-menu-link svg {
        fill: var(--white-one);
    }

    .menu-link.has-submenu .icon-menu-link svg {
        fill: var(--gray-800);
    }

    /* Status TERBUKA (dikontrol oleh hamburger) */
    .navbar-mobile-container.menu-is-open {
        visibility: visible;
        opacity: 1;
    }

    /* 2. Wrapper Geser (Slider) */
    /* Lvl 1 + Lvl 2 */
    /* Tinggi wrapper 100% dari parent (calc(100vh - 120px)) */
    .navbar-mobile-wrapper {
        position: relative;
        display: flex;
        width: 200%;
        /* height: auto; */
        height: 100%;
        transform: translateX(0);
        transition: transform 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);
        padding-left: 11px;
        padding-right: 12px;
        max-height: 96.99%;
        overflow-y: scroll;
        border-bottom-left-radius: 16px;
        border-bottom-right-radius: 16px;
    }

    /* THEME TOGGLE BUTTON MOBILE START */
    .theme-toggle-mobile-wrapper {
        position: absolute;
        bottom: 88px;
        left: 20px;
        z-index: 25;
    }

    .theme-toggle-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 9px 18px;
        border-radius: 30px;
        border: 1.5px solid var(--gray-200);
        background: var(--white-one);
        color: var(--gray-900);
        font: 500 14px/18px var(--font-geist);
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    }

    .theme-toggle-btn:hover {
        border-color: var(--gray-800);
        color: var(--gray-800);
    }

    [data-theme="dark"] .theme-toggle-btn:hover {
        border-color: var(--gray-100);
        color: #fff;
    }

    .theme-toggle-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 18px;
        height: 18px;
    }

    .theme-toggle-btn .icon-sun {
        display: none;
        color: #f59e0b;
    }

    .theme-toggle-btn .icon-moon {
        display: inline-flex;
        color: var(--gray-700);
    }

    [data-theme="dark"] .theme-toggle-btn .icon-sun {
        display: inline-flex;
    }

    [data-theme="dark"] .theme-toggle-btn .icon-moon {
        display: none;
    }

    [data-theme="dark"] .theme-toggle-btn {
        border-color: var(--gray-300);
        background: var(--gray-100);
        color: var(--gray-950);
    }

    /* THEME TOGGLE BUTTON MOBILE END */


    /* Status saat Lvl 2 aktif (digeser oleh jQuery) */
    /* Geser ke kiri */
    .navbar-mobile-wrapper.level-2-active {
        transform: translateX(-50%);
        overflow-x: hidden;
    }

    .mobile-menu-panel {
        overflow-x: hidden;
    }

    #mobileMenuContainer::before {
        content: "";
        height: 29px;
        background-color: #fff;
        top: 117px;
        width: calc(100vw - 4.89%);
        left: 0.24px;
        right: 0;
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
        z-index: 10;
        position: fixed;
        margin: 0 auto;
        display: none;
    }

    #mobileMenuContainer::after {
        content: "";
        height: 29px;
        background-color: #fff;
        bottom: -0.24px;
        width: calc(100vw - 4.89%);
        left: 0.24px;
        right: 0;
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
        z-index: 10;
        position: absolute;
        margin: 0 auto;
        display: none;
    }

    .navbar-mobile-wrapper::after {
        content: "";
        height: 29px;
        /* background-color: #cf0000; */
        bottom: -0.24px;
        width: calc(100% - 4.89%);
        left: 0;
        right: 0;
        border-bottom-left-radius: 6px;
        border-bottom-right-radius: 6px;
        z-index: 10;
        position: absolute;
        margin: 0 auto;
        display: none;
    }

    /* 3. Panel (Lvl 1 & Lvl 2) */
    /* 50% dari 200% = 100% lebar layar */
    .mobile-menu-panel {
        width: 50%;
        height: 100%;
        flex-shrink: 0;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    #mobile-menu-level-1 {
        left: -5px;
        position: relative;
    }

    #mobile-menu-level-2 {
        left: 6px;
        position: relative;
    }

    .mobile-menu-header {
        padding: 15px 0px;
        display: flex;
        align-items: center;
        justify-content: center;
        -ms-justify-content: center;
        -moz-justify-content: center;
        -webkit-justify-content: center;
        flex-shrink: 0;
        min-height: auto;
        flex-direction: column;
        background: var(--white-one);
        width: 98%;
        margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0;
        border-top-right-radius: 5px;
        border-top-left-radius: 5px;
        border-bottom: 6px solid #fff;
        position: relative;
        bottom: -4px;
    }

    [data-theme="dark"] .mobile-menu-header {
        border-bottom-color: #0f0f0f !important;
    }

    #mobile-menu-level-1 .mobile-menu-header {
        border-bottom: none;
        min-height: auto;
        padding: 0;
    }


    .mobile-menu-content,
    .submenu-content-wrapper {
        flex-grow: 1;
        overflow-y: auto;
        padding: 15px 0px;
        background: var(--white-one);
        width: 98%;
        margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0;
        border-radius: 5px;
    }


    .menu-link {
        display: flex;
        justify-content: space-between;
        -ms-justify-content: space-between;
        -moz-justify-content: space-between;
        -webkit-justify-content: space-between;
        width: 98%;
        margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0;
        padding: 12px 8px;
        font: 400 19.24px/26.64px var(--font-geist);
        color: #111;
        text-decoration: none;
        cursor: pointer;
        border-radius: 6px;
    }

    .mobile-menu-content .menu-link:last-child {
        margin-bottom: 86px;
    }

    .text-menu-link {
        height: auto;
    }

    .text-menu-link p {
        margin-bottom: 0px;
    }

    .menu-link:hover {
        background-color: #f9f9f9;
    }

    .menu-link.has-submenu {
        position: relative;
    }

    .menu-link.has-submenu::after {
        content: '›';
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        font-weight: 600;
        font-size: 26px;
        color: #034ea1;
        display: none;
    }

    /* 7. Styling Panel Lvl 2 (Submenu) */
    #mobile-menu-level-2 .back-to-level-1 {
        display: flex;
        align-items: center;
        text-decoration: none;
        font: normal 400 15.64px/21px var(--font-geist);
        color: #2a80cd;
        width: 100%;
        margin-top: 8px;
        margin-bottom: 8px;
    }

    #mobile-menu-level-2 .back-to-level-1 svg {
        margin-right: 5px;
        color: var(--color-gray-500);
    }

    #mobile-menu-level-2 #submenu-title {
        font: 400 20.64px/27.64px var(--font-geist);
        color: var(--color-gray-950);
        margin: 0;
        margin-left: 15px;
        width: 100%;

    }

    .mobile-submenu-panel {
        display: none;
    }

    .mobile-submenu-panel.active {
        display: block;
    }

    .desc-submenu {
        font: normal 400 13.64/21px var(--font-geist);
        color: var(--gray-500);
        padding-left: 10px;
        padding-right: 10px;
        text-align: left;
        top: -6px;
        position: relative;
    }

    .desc-submenu p {
        margin-top: 0px;
    }

    .explore-desc {
        width: 100%;
        height: auto;
        font: normal 400 13.64/21px var(--font-geist);
        color: var(--gray-500);
        padding-left: 10px;
        padding-right: 10px;
        text-align: left;
        margin-bottom: 16px;
    }

    .explore-desc a {
        color: var(--aqua-blue-500);
        text-decoration: none;
        display: flex;
        flex-direction: row;
        justify-content: start;
        -ms-justify-content: start;
        -moz-justify-content: start;
        -webkit-justify-content: start;
    }

    .text-explore-submenu {
        font: normal 400 13.64/21px var(--font-geist);
    }

    .explore-desc a .icon-18 {
        width: 24px;
    }

    .explore-desc a .icon-18 svg {
        width: 100%;
        height: auto;
        max-width: 100%;
        transform: rotate(270deg);
    }

    .text-explore-submenu p {
        margin-bottom: 0px;
    }

    .sub-menu-list {
        list-style: none;
        padding-left: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .sub-menu-list li a {
        padding: 13px 0px;
        display: block;
        text-decoration: none;
        color: #333;
        font-weight: 500;
        background-color: var(--white-one);
        border-radius: 0px;
        font: normal 400 18.24px/22.64px var(--font-geist);
        border-bottom: 1px solid #fff;
    }

    .sub-menu-list li a:hover {
        background-color: #e9e9e9;
        color: #034ea1;
    }

    .sub-menu-list:last-child {
        margin-bottom: 40px;
    }

    .navbar-align-right .btn-all-menu {
        display: none;
    }

    .hamburger-inner,
    .hamburger-inner::after,
    .hamburger-inner::before {
        width: 34px;
        background-color: var(--gray-800);
        height: 2.4px;
        transition: background-color 0.3s ease;
    }

    header.is-scrolled .hamburger-inner,
    header.is-scrolled .hamburger-inner::after,
    header.is-scrolled .hamburger-inner::before {
        background-color: var(--gray-800);
    }

    [data-theme="dark"] .hamburger.is-active .hamburger-inner {
        background-color: #fff;
    }

    [data-theme="dark"] .hamburger.is-active .hamburger-inner::after,
    [data-theme="dark"] .hamburger.is-active .hamburger-inner::before {
        background-color: var(--gray-800) !important;
    }

    .icon-18 {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        -ms-justify-content: center;
        -moz-justify-content: center;
        -webkit-justify-content: center;
        align-items: center;
        -ms-align-items: center;
        -moz-align-items: center;
        -webkit-align-items: center;
        margin-right: 8px;
        -ms-transform: rotate(270deg);
        transform: rotate(270deg);
        padding: 2.5px;
        width: 18px;
        margin-top: -2.4px;
    }

    /* FLIP SLIED MENU END */


    /* NAVBAR MOBILE END */

    /* FLOATING BUTTON WA MOBILE START */


    .title-hero-main {
        margin-top: 86px;
    }

    .right-btn-floating {
        order: 3;
    }

    .left-btn-floating {
        width: auto;
        order: 2;
    }

    .left-btn-floating a {
        padding: 13.5px 13px;
        background: var(--white-one);
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        -ms-align-items: center;
        -moz-align-items: center;
        -webkit-align-items: center;
        gap: 10px;
        border: 2px solid var(--gray-200);
        border-radius: 36px;
        text-decoration: none;
    }

    .cta-btn-green-block a {
        padding: 13.5px 14px;
    }

    .left-btn-floating a:focus {
        border: 2px solid var(--gray-300);
    }

    .left-btn-floating a .text-btn-singleline span {
        font: 400 16.24px/18px var(--font-geist);
        color: var(--gray-900);
    }


    .icon-arrow-up {
        width: 12px;
        height: 12px;
        display: flex;
        justify-content: center;
        -ms-justify-content: center;
        -moz-justify-content: center;
        -webkit-justify-content: center;
        align-items: center;
        -ms-align-items: center;
        -moz-align-items: center;
        -webkit-align-items: center;
        transition: transform 0.3s ease;
    }

    .left-btn-floating a.active .icon-arrow-up {
        transform: rotate(180deg);
    }

    .item-paket-mobile {
        order: 1;
    }

    .wrp-inner-left-btn {
        width: fit-content;
        display: flex;
        height: auto;
        justify-content: center;
        -ms-justify-content: center;
        -moz-justify-content: center;
        -webkit-justify-content: center;
        align-items: center;
        -ms-align-items: center;
        -moz-align-items: center;
        -webkit-align-items: center;
        gap: 8px;
    }

    .whatsapp-floating-button {
        min-width: 86%;
        width: fit-content;
        height: auto;
        padding: 6px 8px;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        -ms-justify-content: center;
        -moz-justify-content: center;
        -webkit-justify-content: center;
        align-items: center;
        -ms-align-items: center;
        -moz-align-items: center;
        -webkit-align-items: center;
        gap: 8px;
        min-height: 76px;
        background: linear-gradient(white, white) padding-box, linear-gradient(to right, darkblue, darkorchid) border-box;
        border: 10px solid transparent;
        position: fixed;
        top: unset;
        bottom: 5px;
        left: 0;
        right: 0;
        z-index: 7;
        background: rgba(255, 255, 255, 0.74);
        backdrop-filter: blur(8px);
        border-radius: 16px;
        box-shadow: 0 1px 10px rgba(72, 57, 57, 0.76);
        transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        will-change: transform;
    }

    .wrp-btn-floating {
        width: 100%;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        -ms-justify-content: center;
        -moz-justify-content: center;
        -webkit-justify-content: center;
        align-items: center;
        -ms-align-items: center;
        -moz-align-items: center;
        -webkit-align-items: center;
    }

    /* FLOATING BUTTON WA MOBILE END */

    .center-container {
        padding-left: 13px;
        padding-right: 13px;
    }

    .half-inner-section {
        width: auto;
    }

    .des-card-box {
        width: 100%;
    }

    .card-box-gonam {
        padding: 32px 24px 36px 24px;
    }

    .value-costumer-proofs {
        font: normal 400 19px/29px var(--font-geist);
        margin-top: -6px;
    }

    .circle-top {
        top: 46%;
        left: -2px;
        height: 30px;
        width: 30px;
    }

    .circle-bottom {
        top: 46%;
        right: -8%;
        left: unset;
        height: 30px;
        width: 30px;
    }

    /* Hero Section Reset */
    header {
        background: rgba(255, 255, 255, 0.88);
        min-height: 76px;
        backface-visibility: var(--scarlet-red-300);
    }

    [data-theme="dark"] header {
        background: rgba(22, 28, 35, 0.98) !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
    }

    .header-right-content .row:not(:last-child) {
        display: none;
    }

    .header-right-content .row:last-child {
        display: flex;
    }

    .hero-images {
        overflow: hidden;
    }

    .hero-images,
    .content-hero {
        height: auto;
        min-height: 100vh;
    }

    .content-hero-centered {
        flex-direction: column;
        height: auto;
        padding-top: 100px;
        padding-bottom: 40px;
    }

    .left-content-hero,
    .right-content-hero {
        width: 100%;
        padding: 36px 0px 0px 0px;
    }

    .title-hero-main h1,
    .title-hero-main h2 {
        font-size: 32px;
        line-height: 40px;
    }

    .title-hero-main h1 span,
    .title-hero-main h2 span {
        font-size: 30px;
        line-height: 38px;
    }

    .image-model-gonamaqiqah {
        width: 112%;
        height: auto;
        max-width: 112%;
        margin: 0 auto;
        left: -6%;
        right: 0;
    }

    .socialproof {
        flex-direction: column;
        gap: 20px;
    }

    .left-social-proofs,
    .right-social-proofs {
        width: 100%;
    }

    /* Headings & Section Titles */
    .tagline-about h2,
    .title-why-gonam h2,
    .title-left-package h2,
    .title-left-testimonial h2,
    .title-left-newsfeed h2,
    .title-office-home h2,
    .title-head-closing-cta h2 {
        font-size: 27px;
        line-height: 36px;
    }

    .card-cta-socialproof {
        padding: 30px 22px 30px 22px;
    }


    .left-price-card {
        padding-right: 40px;
        font: normal 400 19px/27px var(--font-geist);
    }

    .cta-btn-green-sm a span,
    .cta-btn-green-block a span {
        font: 400 17.24px/19px var(--font-geist);
    }

    .label-text-cta {
        font: 400 15.24px/19px var(--font-geist);
    }

    .icon-text-cta {
        width: 9px;
        height: 9px;
    }

    .catalog-package-info {
        padding: 0px 0px 15px 0px;
    }

    .catalog-package-info .act-ghost-button {
        display: none;
    }

    .whatsapp-floating-button .cta-btn-green-block a span {
        font: 400 16.24px/18px var(--font-geist);
    }

    .google-review-costumer {
        padding: 13px 15px;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
    }

    .avatar-costumer {
        width: 80px;
        height: 80px;
    }

    .content-text-testimoni {
        font: 500 21px/27.64px var(--font-geist);
        gap: 20px;
        min-height: 250px;
    }

    .testimoni-bar .slick-slide {
        margin: 0 10px;
    }

    .testimoni-bar .slick-list {
        margin: 0 -10px;
    }

    .content-text-testimoni p:first-of-type {
        width: 79%;
    }

    .text-content-testimony {
        width: 100%;
    }

    .testimoni-bar {
        padding-bottom: 48px;
    }

    .variant-cotumers-order {
        position: relative;
        top: -1px;
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
        padding: 13px 15px;
    }

    .see-all-package {
        width: 100%;
        display: flex;
        justify-content: center;
        -ms-justify-content: center;
        -moz-justify-content: center;
        -webkit-justify-content: center;
        align-items: center;
        -ms-align-items: center;
        -moz-align-items: center;
        -webkit-align-items: center;
        margin-top: 18px;
        margin-bottom: 6px;
    }

    .section-package-gonam .row:has(.see-all-package):last-of-type .see-all-package {
        margin-top: 18px;
        margin-bottom: 0px;
    }

    .section {
        padding: 76px 0px 36px 0px;
    }

    .section-detail-blog {
        overflow: hidden;
    }

    .article-content-text h2 {
        font: 600 24px/30.86px var(--font-geist);
        letter-spacing: -0.36px;
    }

    .wrp-title-atribute {
        margin-top: 36px;
    }

    .wrp-title-tag {
        margin-top: 32px;
    }

    .review-star-value {
        margin-top: 7px;
        margin-bottom: 1px;
    }

    .client-list-item {
        position: relative;
        width: 140px;
        height: 54px;
    }

    .value-review-number.hide-mobile {
        display: none;
    }

    .wrp-circle-avatar {
        display: flex;
        align-items: center;
        -ms-align-items: center;
        -moz-align-items: center;
        -webkit-align-items: center;
        gap: 18px;
    }

    .wrp-circle-avatar .value-review-number {
        display: flex;
    }

    .right-price-card {
        display: flex;
        align-items: center;
        -ms-align-items: center;
        -moz-align-items: center;
        -webkit-align-items: center;
        flex-direction: column;
    }

    .row-gurantee-package {
        margin-bottom: 96px;
    }

    .hero-sheep-three {
        width: 64px;
        height: auto;
        bottom: 0.24%;
    }

    .hero-sheep-two {
        width: 90px;
        bottom: 1.56%;
    }

    .right-price-card p {
        width: fit-content;
    }

    .right-price-card span {
        width: fit-content;
    }

    .row-key-matrix .col-sm-6:nth-child(1) {
        padding-bottom: 36px;
    }

    .row-key-matrix .col-sm-6:nth-child(2) {
        padding-bottom: 36px;
        position: relative;
    }

    .variant-cotumers-order {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
    }

    .costumer-icon-brand {
        width: 48px;
        height: auto;
        order: 1;
    }

    .costumer-type {
        width: 78%;
        order: 2;
        display: flex;
        align-items: center;
        -ms-align-items: center;
        -moz-align-items: center;
        -webkit-align-items: center;
        min-height: 48px;
        padding-left: 15px;
    }

    .testimoni-bar .slick-dots {
        bottom: -4px;
        left: 0;
    }

    .icon-personal-costumer {
        width: 48px;
        height: auto;
    }

    .costumer-order-type {
        width: 100%;
        order: 3;
    }

    .value-key-matrix {
        min-height: 74px;
        display: flex;
        align-items: flex-end;
        -ms-align-items: flex-end;
        -moz-align-items: flex-end;
        -webkit-align-items: flex-end;
    }

    .value-key-matrix span,
    .value-key-matrix span.value-key-matrix {
        font: normal 600 34px/38.64px var(--font-geist);
        margin-bottom: 0px;
    }

    .blockquote-home p {
        font: normal 700 28.14px/37.56px var(--font-libre);
        letter-spacing: -0.54px;
        font-style: italic;
    }

    .blockquote-footer cite {
        font: normal 700 28.14px/37.56px var(--font-libre);
        letter-spacing: -0.54px;
        font-style: italic;
    }

    .title-why-gonam {
        width: 90%;
    }

    .inner-section {
        width: auto;
    }

    .content-desc-matrix {
        width: 100%;
    }

    .ordered {}

    .catalog-package-info {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
    }

    .act-ghost-button a {
        padding-left: 0px;
    }

    /* Testimonial Section */
    .card-photo-testimoni {
        display: none;
    }

    .card-content-testimoni {
        margin-top: 24px;
    }

    .wrapper-testimoni {
        width: 100%;
        flex-direction: column;
        padding: 20px 16px;
    }

    .left-card-testimoni,
    .right-card-testimoni {
        width: 100%;
        padding-right: 0px;
    }

    .card-testimoni {
        padding-right: 0px;
    }

    /* Newsfeed Grid */
    .grid-card-newsfeed {
        width: fit-content;
        flex-direction: column-reverse;
        gap: 30px;
    }

    .left-card-newsfeed,
    .right-card-newsfeed {
        width: 100%;
        padding-right: 0px;
    }

    .content-newsfeed-vertical {
        min-width: 100%;
        max-width: 100%;
    }

    .left-filter-column {
        width: 100%;
        overflow: hidden;
    }

    .panel-tab-package {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-bottom: 8px;
    }

    .panel-tab-package::-webkit-scrollbar {
        display: none;
    }

    .panel-tab-package .button-tab {
        flex-shrink: 0;
        white-space: nowrap;
    }

    .right-filter-column {
        display: none;
    }

    .thumbnail-newsfeed-vertical {
        width: 118px;
        height: 100px;
    }

    .content-newsfeed-vertical {
        min-width: 56.52%;
        max-width: 56.64%;
    }

    .title-newsfeed-vertical h3 {
        font: 600 18.56px/24px var(--font-geist);
    }

    .horizontal-card-newsfeed .col-md-3 {
        display: none;
    }

    .horizontal-card-newsfeed .col-md-4 {
        width: 118px;
        min-height: 100px;
        height: auto;
    }

    .horizontal-card-newsfeed .col-md-5 {
        min-width: 56.52%;
        max-width: 56.64%;
    }

    .horizontal-card-newsfeed:nth-child(1 of .horizontal-card-newsfeed) .col-md-4 {
        flex: 0 0 auto;
        width: 100%;
    }

    .horizontal-card-newsfeed:nth-child(1 of .horizontal-card-newsfeed) .col-md-5 {
        flex: 0 0 auto;
        min-width: 100%;
        width: 100%;
    }

    .horizontal-card-newsfeed:nth-child(1 of .horizontal-card-newsfeed) .col-md-5 .title-large-vertical {
        padding-top: 18px;
    }

    .play-button-overlay {
        top: 36%;
    }



    .horizontal-card-newsfeed {
        border: 0;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .horizontal-card-newsfeed .col-md-5 .title-large-vertical {
        margin-top: 0;
        padding-top: 0;
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .package-category-group {
        display: flex;
        flex-wrap: wrap;
        row-gap: 24px;
        column-gap: 0;
    }

    .row-youtube-card.gutter--18.row,
    .row-youtube-card.gutter--18.container,
    .row-youtube-card.gutter--18.container-fluid {
        margin-left: -15px;
        margin-right: -15px;
    }

    .gutter--18>[class^="col-"] {
        padding-left: 15px;
        padding-right: 15px;
    }



    .package-category-group.gutter--18.row,
    .package-category-group.gutter--18.container,
    .package-category-group.gutter--18.container-fluid {
        margin-left: -6px;
        margin-right: -6px;
    }

    .gutter--18.package-category-group>[class^="col-"] {
        padding-left: 6px;
        padding-right: 6px;
    }



    .vertical-gap .row.gutter--18 {
        gap: 24px;
    }

    .card-title-package {
        padding: 15px 10px 0px 10px;
    }

    .price-card-cta {
        padding: 0px 10px 24px 10px;
    }

    .card-benefit-package {
        flex-wrap: wrap;
        padding: 0px 10px 10px 10px;
        row-gap: 0px;
        column-gap: 2px;
        display: flex;
    }

    .patern-card-address {
        width: 264px;
        height: auto;
        min-height: 152px;
    }

    .card-title-package h3 a {
        font: 500 20.56px/23px var(--font-geist);
    }

    .card-benefit-package span.badge-chips:first-child {
        margin-top: 6px;
    }

    .card-benefit-package span.badge-chips {
        font: normal 400 13px/17px var(--font-geist);
        padding: 0px 4px 1.5px 0px;
    }

    .price-card-cta {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        justify-content: center;
        -ms-justify-content: center;
        -moz-justify-content: center;
        -webkit-justify-content: center;
        align-items: start;
        -ms-align-items: start;
        -moz-align-items: start;
        -webkit-align-items: start;
        row-gap: 18px;
        column-gap: 0;
    }

    .thumb-head-office {
        padding: 0;
    }

    .price-label-card-cta {
        font: normal 400 17px/26px var(--font-geist);
    }

    .price-value-card-cta p {
        font: normal 600 20.52px/24px var(--font-geist);
        letter-spacing: -0.56px;
    }

    .card-cta-right {
        width: 100%;
    }

    .card-cta-right a {
        padding: 11px 9.5px;
        font: 400 13.24px/18px var(--font-geist);
        letter-spacing: -0.56px;
        width: 100%;
        display: flex;
        justify-content: center;
        -ms-justify-content: center;
        -webkit-justify-content: center;
        -moz-justify-content: center;
    }

    .card-thumnnail-package {
        width: 100%;
        min-height: 68px;
        max-height: 129px;
    }

    .right-head-office .cta-button-whatsapp {
        width: 100%;
        height: auto;
        /* border: 1px solid #cf0000; */
    }

    .cta-btn-green {
        width: 100%;
        display: flex;
        justify-content: center;
        -ms-justify-content: center;
        -webkit-justify-content: center;
        -moz-justify-content: center;
    }

    .cta-btn-white a span {
        font: 400 14.24px/18px var(--font-geist);
    }

    .cta-btn-green a {
        padding: 10px 20px;
    }

    .cta-btn-white a {
        padding: 8px 22px;
    }

    .cta-btn-green a,
    .cta-btn-white a {
        width: 100%;
        justify-content: center;
        -ms-justify-content: center;
        -webkit-justify-content: center;
        -moz-justify-content: center;
    }


    .text-btn-multyline {
        min-width: 125px;
    }


    [data-theme="dark"] .left-closing-cta .cta-btn-white a {
        color: #212831 !important;
    }

    .wrp-list-office-branch .right-office-branch .cta-button-whatsapp {
        width: 100%;
        height: auto;
        margin-top: 18px;
        margin-bottom: 16px;
    }

    .text-btn-multyline::before {
        content: "";
        position: absolute;
        width: 1px;
        height: 24px;
        background: var(--white-one);
        left: -2.5px;
        top: 50%;
        transform: translateY(-50%);
    }

    .left-office-branch {
        min-height: 156px;
    }

    .tag-news span {
        font: 500 13px/14px var(--font-geist);
    }

    /* Closing CTA Mobile */
    .wrp-closing-cta {
        padding: 32px 16px;
        min-height: 712px;
        background: var(--scarlet-red-600) url(../images/grass-section-closing-cta.png) bottom center no-repeat;
        background-size: 146% auto;
        overflow: hidden;
    }

    .righ-closing-cta {
        min-height: auto;
    }

    .desc-closing-cta {
        width: 100%;
    }

    .row-closing-cta {
        display: flex;
    }

    .row-closing-cta .position-relative {
        order: 2;
        overflow: unset;
    }

    .wrp-model-package {
        display: flex;
        width: 194px;
        height: 284px;
        bottom: -1px;
        left: 24.32%;
        z-index: 3;
    }

    .left-clouds-one {
        left: 6%;
        bottom: -16%;
        margin-bottom: -78%;
    }

    .left-clouds-two {
        right: -1.5%;
        bottom: unset;
        top: 0;
        margin-top: -115%;
    }

    .wrp-btn-closing-cta {
        display: flex;
        gap: 18px;
        flex-direction: column;
    }

    .left-closing-cta,
    .right-closing-cta {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .left-closing-cta .cta-btn-white,
    .right-closing-cta .cta-btn-green {
        min-width: 100%;
    }

    .righ-closing-cta {
        padding-left: 8px;
        padding-right: 8px;
        z-index: 6;
    }

    .desc-large-newsfeed {
        display: none;
    }

    .caption-title-feednews {
        padding: 16px 16px;
    }


    .tag-and-openplatform {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: start;
    }

    .icon-menu-order {
        width: 29px;
        min-height: 29px;

    }

    .open-platform {
        display: flex;
        align-items: center;
        -ms-align-items: center;
        -moz-align-items: center;
        -webkit-align-items: center;
        justify-content: center;
        -ms-justify-content: center;
        -moz-justify-content: center;
        -webkit-justify-content: center;
        width: 100%;
        order: 2;
    }

    .open-platform a.youtube-opened {
        width: 100%;
        display: flex;
        justify-content: center;
        -ms-justify-content: center;
        -moz-justify-content: center;
        -webkit-justify-content: center;
    }

    .title-large-newsfeed h3 {
        font: 700 20.56px/27px var(--font-geist);
    }

    .icon-sheep-tree {
        width: 132px;
        height: auto;
        position: absolute;
        bottom: 5.56%;
        right: 57.5%;
        z-index: 1;
    }

    .content-hero-centered .left-clouds-one {
        left: -2%;
        bottom: 88%;
    }

    .content-hero-centered .left-clouds-two {
        right: -35%;
        bottom: 62%;
    }

    .content-hero-centered .left-clouds-three {
        right: -39%;
        bottom: 69%;
    }

    .icon-sheep-two {
        width: 70px;
        height: auto;
        position: absolute;
        bottom: 1.16%;
        right: 2.5%;
        z-index: 3;
    }

    .icon-sheep-one {
        width: 60px;
        height: auto;
        position: absolute;
        bottom: 4.56%;
        left: -0.5%;
        z-index: 3;
    }

    .icon-sheep-three {
        width: 52px;
        height: auto;
        position: absolute;
        bottom: 0.76%;
        left: 9.5%;
        z-index: 2;
        transform: scaleX(-1);
    }

    .wrp-title-details .title-details {
        width: auto;
        height: auto;
        padding-right: 0;
    }

    .wrp-title-details .title-details h1 {
        font: 700 30px/37px var(--font-geist);
        letter-spacing: -0.52px;
    }

    .wrp-outline-popular .wrp-inner-popular {
        padding: 10px 15px 24px 15px;
    }

    .hastag-number a span {
        font: normal 400 19px/29.86px var(--font-geist);
    }

    .category-label {
        font: normal 500 21px/23.86px var(--font-geist);
    }

    .title-card-headline-one a h3 {
        font: normal 500 21px/23.86px var(--font-geist);
        letter-spacing: -0.4px;
    }

    .gutter-article {
        display: flex;
        flex-direction: column;
        gap: 48px;
    }

    .left-col-article {
        width: 100%;
    }

    .right-col-popular {
        width: 100%;
    }

    .article-content-text {
        padding-right: 0;
    }

    .article-content-text img {
        max-width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .row-related {
        display: flex;
        flex-direction: column;
        gap: 30px;
    }

    .wrp-article-tag {
        padding-right: 0;
        flex-wrap: wrap;
    }

    .wrp-publisher-time {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 15px;
    }

    .publisher-time {
        padding-left: 0px;
    }

    .header-list-blog h1 {
        font: 600 29px/35px var(--font-geist);
    }

    .wrp-feature-feednews {
        min-height: 435px;
    }

    .wrp-feature-feednews img {
        min-height: 435px;
    }

    .share-button-mobile {
        display: flex;
        padding-top: 25px;
        padding-bottom: 20px;
        flex-direction: column;
    }

    .share-button-mobile ul {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        padding-left: 0px;
        padding-right: 0px;
        gap: 12px;
    }

    .share-button-mobile ul li {
        padding-left: 0px;
        padding-right: 0px;
        list-style: none;
    }

    .share-button-mobile ul li a {
        text-decoration: none;
        outline: none;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 12px 12px;
        width: 52px;
        height: 52px;
        border-radius: 28px;
        border: 1px solid var(--gray-200);
    }

    .share-button-mobile ul li a svg {
        fill: var(--gray-700);
    }

    .share-button-mobile ul li:nth-child(3 of li) a {
        padding: 4px 4px;
    }

    /* Footer Mobile Adjustments */
    .desc-address-company,
    .registered-company {
        padding-right: 0px;
    }

    .right-content-copyright,
    .right-copyright {
        justify-content: flex-start;
        margin-top: 16px;
        font: normal 400 17px/21.64px var(--font-geist);
    }

    .desc-address-company,
    .registered-company {
        font: normal 400 17px/21.64px var(--font-geist);
    }

    .item-link-footer ul li a {
        font: normal 400 17px/21.64px var(--font-geist);
    }

    .right-footer .row {
        flex-direction: column;
        gap: 36px;
    }

}