:root {
    --default-font: "Poppins", sans-serif;
    --heading-font: "Poppins", sans-serif;
    --nav-font: "Poppins", sans-serif;
    --body-font-size: 1rem;
    --body-line-height: 1.5;
    --body-small-size: 0.875rem;
    --body-xsmall-size: 0.75rem;
}

:root {
    --background-color: #F9FAFB;
    /* Page background */
    --default-color: #111111;
    /* Main text */
    --heading-color: #111111;
    /* Headings and title text */
    --accent-color: #0bb4ad;
    /* Main brand color used for buttons, highlights, and links */
    --surface-color: #FFFFFF;
    /* Cards and surfaces */
    --contrast-color: #FFFFFF;
    /* Contrast text color for accent and dark backgrounds */
    --border-color: #E5E7EB;
    /* Border and divider color */
    --secondary-color: #6B7280;
    /* Secondary text color */
    --gradient-start: #0E9F8D;
    --gradient-end: #6CC4A1;
    --success-color: #22C55E;
    /* Success states */
    --warning-color: #F59E0B;
    /* Warning states */
    --error-color: #EF4444;
    /* Error states */
}

:root {
    --nav-color: #111111;
    --nav-hover-color: #0E9F8D;
    --nav-mobile-background-color: #FFFFFF;
    --nav-dropdown-background-color: #FFFFFF;
    --nav-dropdown-color: #111111;
    --nav-dropdown-hover-color: #0E9F8D
}

:root {
    --radius-button: 8px;
    --radius-card: 12px;
    --radius-container: 16px;

    --shadow-card: 0 4px 12px rgba(0, 0, 0, .08);
    --shadow-hover: 0 6px 16px rgba(0, 0, 0, .12);

    --text-xs: 12px;
    --text-sm: 14px;
    --text-md: 16px;
    --text-lg: 18px;
    --text-xl: 24px;
    --text-2xl: 32px;
    --text-3xl: 48px;

    --transition:
        .3s ease;

    --font-weight-500: 500;
    --font-weight-600: 600;
    --font-weight-700: 700;
}

.light-background {
    --background-color: #f1f7fc;
    --surface-color: #ffffff;
}

.dark-background {
    --background-color: #060606;
    --default-color: #ffffff;
    --heading-color: #ffffff;
    --surface-color: #252525;
    --contrast-color: #ffffff;
}

/* Smooth scroll */
:root {
    scroll-behavior: smooth;
}



body {
    color: var(--default-color);
    background-color: var(--background-color);
    font-family: var(--default-font);
    font-size: var(--body-font-size);
    line-height: var(--body-line-height);
}

body,
input,
textarea,
select,
button {
    font-family: var(--default-font);
}

a {
    color: var(--gradient-start);
    text-decoration: none;
    transition: 0.3s;
}

a:hover {
    color: color-mix(in srgb, var(--gradient-start), transparent 25%);
    text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--heading-color);
    font-family: var(--heading-font);
    margin-top: 0;
}



h1 {
    font-size: 3rem;
    font-weight: var(--font-weight-700);
    line-height: 1.2;
}

h2 {
    font-size: 2.5rem;
    font-weight: 600;
    line-height: 1.2;
}

h3 {
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.3;
}

h4 {
    font-size: 2.375rem;
    font-weight: 600;
    line-height: 1.3;
}

p,
li,
label,
button,
input,
textarea,
select {
    font-weight: 400;
}

p {
    font-size: 1rem;
    line-height: 1.5;
}

/* =========================================================
   TOPBAR
========================================================= */

.topbar {

    position: relative;

    background: var(--gradient-start);

    color: var(--contrast-color);

    font-size: var(--text-sm);

    z-index: 1000;
}

/* =========================================================
   CONTAINER
========================================================= */

.topbar .container {

    min-height: 46px;
}

/* =========================================================
   LEFT & RIGHT
========================================================= */

.topbar-left,
.topbar-right {

    display: flex;

    align-items: center;

    gap: 18px;
}

/* =========================================================
   ITEM
========================================================= */

.topbar span {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    line-height: 1.5;
}

/* =========================================================
   ICON
========================================================= */

.topbar i {

    font-size: var(--text-md);

    color: var(--contrast-color);
}

/* =========================================================
   LINK
========================================================= */

.topbar a {

    color: var(--contrast-color);

    text-decoration: none;

    transition: var(--transition);
}

.topbar a:hover {

    opacity: .85;
}

/* =========================================================
   EMERGENCY
========================================================= */

.topbar .emergency {

    color: var(--error-color);

    animation: pulseEmergency 1.6s infinite;
}

@keyframes pulseEmergency {

    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.15);
    }

    100% {
        transform: scale(1);
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 991px) {

    .topbar {

        padding: 8px 0;
    }

    .topbar .container {

        flex-direction: column;

        align-items: flex-start !important;

        gap: 6px;

        min-height: auto;
    }

    .topbar-left,
    .topbar-right {

        width: 100%;

        flex-wrap: wrap;

        gap: 10px;
    }

    .topbar-right {

        justify-content: flex-start;
    }

    .topbar span {

        font-size: 12px;
    }
}


/* =========================================================
   LANGUAGE SWITCHER
========================================================= */

.language-switcher {

    display: inline-flex;

    align-items: center;

    border: 1px solid rgba(255, 255, 255, .35);

    border-radius: 30px;

    padding: 2px;

    background: transparent;
}

/* BUTTON */

.language-switcher .lang-btn {

    border: none;

    background: transparent;

    color: rgba(255, 255, 255, .82);

    font-size: 12px;

    font-weight: 600;

    padding: 5px 12px;

    border-radius: 20px;

    transition: .25s ease;

    cursor: pointer;

    display: flex;

    align-items: center;

    gap: 5px;
}

/* ACTIVE */

.language-switcher .lang-btn.active {

    background: var(--contrast-color);

    color: var(--gradient-start);
}

/* HOVER */

.language-switcher .lang-btn:hover {

    color: var(--contrast-color);
}

/* FLAG */

#btn-id::before {

    content: "🇮🇩";
}

#btn-en::before {

    content: "🇺🇸";
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    .language-switcher {

        transform: scale(.95);
    }

    .language-switcher .lang-btn {

        padding: 5px 10px;

        font-size: 11px;
    }
}

/* =========================================================
   TOPBAR SEPARATOR
========================================================= */

.topbar-separator {

    opacity: .45;
}

/* =========================================================
   GOOGLE TRANSLATE
========================================================= */

/* HIDE WIDGET */

#google_translate_element {

    position: absolute;

    left: -9999px;

    opacity: 0;
}

/* HIDE TOP BAR */

.goog-te-banner-frame.skiptranslate {

    display: none !important;
}

/* REMOVE TOP SPACE */

body {

    top: 0 !important;

    margin-top: 0 !important;
}

/* HIDE LOGO */

.goog-logo-link,
.goog-te-gadget span {

    display: none !important;
}

/* CLEAN TEXT */

.goog-te-gadget {

    color: transparent !important;

    font-size: 0 !important;
}

/* REMOVE BLUE HIGHLIGHT */

.goog-text-highlight {

    background: transparent !important;

    box-shadow: none !important;
}

/* FIX IFRAME */

iframe.goog-te-banner-frame {

    display: none !important;
}


/* =========================================================
   FORCE HIDE GOOGLE TRANSLATE BAR
========================================================= */

/* HIDE TOP BAR */

iframe.goog-te-banner-frame,
.goog-te-banner-frame,
.goog-te-menu-frame {

    display: none !important;

    visibility: hidden !important;
}

/* RESET BODY POSITION */

body {

    top: 0 !important;

    position: static !important;

    min-height: auto !important;
}

/* RESET HTML */

html {

    top: 0 !important;
}

/* REMOVE GOOGLE BAR SPACE */

.skiptranslate {

    display: inline !important;
}

/* REMOVE BLUE GOOGLE BAR */

.goog-te-banner {

    display: none !important;
}

/* REMOVE GOOGLE TOOLBAR */

body>.skiptranslate {

    display: none !important;
}





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

.main-navbar {

    position: sticky;

    top: 0;

    z-index: 999;

    background: rgba(255, 255, 255, .96);

    backdrop-filter: blur(14px);

    box-shadow:
        0 2px 20px rgba(0, 0, 0, .04);

    transition:
        background .3s ease,
        box-shadow .3s ease,
        padding .3s ease;

    padding: 14px 0;
}

/* =========================================================
   SCROLL STATE
========================================================= */

.main-navbar.scrolled {

    background: rgba(255, 255, 255, .92);

    backdrop-filter: blur(18px);

    box-shadow:
        0 8px 28px rgba(0, 0, 0, .06);

    padding: 10px 0;
}

/* =========================================================
   LOGO
========================================================= */

.main-navbar .navbar-brand {

    padding: 0;
}

.main-navbar .navbar-brand img {

    height: 52px;

    transition: .3s ease;
}

.main-navbar.scrolled .navbar-brand img {

    height: 46px;
}

/* =========================================================
   NAVIGATION
========================================================= */

.main-navbar .navbar-nav {

    align-items: center;
}

/* LINK */

.main-navbar .nav-link {

    position: relative;

    font-size: var(--text-sm);

    font-weight: var(--font-weight-500);

    color: var(--heading-color) !important;

    padding: 10px 14px !important;

    transition: var(--transition);
}

/* UNDERLINE */

.main-navbar .nav-link::before {

    content: "";

    position: absolute;

    left: 14px;
    bottom: 4px;

    width: 0;
    height: 2px;

    background: var(--gradient-start);

    border-radius: 20px;

    transition: .3s ease;
}

.main-navbar .nav-link:hover::before {

    width: calc(100% - 28px);
}

.main-navbar .nav-link:hover {

    color: var(--gradient-start) !important;
}

/* ACTIVE */

.main-navbar .nav-item.active .nav-link {

    color: var(--gradient-start) !important;
}

/* =========================================================
   BUTTON DAFTAR
========================================================= */

.btn-daftar {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 11px 22px;

    border-radius: var(--radius-button);

    background: var(--nav-hover-color);

    color: var(--contrast-color);

    text-decoration: none;

    font-size: var(--text-sm);

    font-weight: var(--font-weight-600);

    white-space: nowrap;

    transition: var(--transition);
}

.btn-daftar:hover {

    color: var(--contrast-color);

    transform: translateY(-2px);

    box-shadow:
        0 10px 25px rgba(14, 159, 141, .18);
}

/* =========================================================
   TOGGLER
========================================================= */

.navbar-toggler {

    border: none !important;

    box-shadow: none !important;

    padding: 8px 10px;

    border-radius: var(--radius-container);

    background:
        rgba(14, 159, 141, .08);
}

.navbar-toggler:focus {

    box-shadow: none !important;
}

.navbar-toggler-icon {

    width: 1.2em;
    height: 1.2em;
}

/* =========================================================
   DROPDOWN DESKTOP
========================================================= */

.main-navbar .dropdown {
    position: relative;
}

/* LINK DROPDOWN */

.main-navbar .dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ICON */

.main-navbar .dropdown-toggle::after {

    border: none !important;

    content: "\f107";

    font-family: "Line Awesome Free";

    font-weight: var(--font-weight-700);

    font-size: var(--text-sm);

    transition: var(--transition);

    margin: 0;
}

/* ROTATE ICON */

.main-navbar .dropdown:hover>.nav-link.dropdown-toggle::after {

    transform: rotate(180deg);

    color: var(--gradient-start);
}

/* =========================================================
   DROPDOWN MENU
========================================================= */

.main-navbar .dropdown-menu {

    position: absolute;

    top: calc(100% + 10px);

    left: 0;

    min-width: 240px;

    padding: 10px 0;

    margin: 0;

    border: none;

    border-radius: var(--radius-container);

    background: rgba(255, 255, 255, .98);

    backdrop-filter: blur(18px);

    box-shadow:
        0 18px 45px rgba(0, 0, 0, .08);

    opacity: 0;

    visibility: hidden;

    transform: translateY(12px);

    transition:
        opacity .25s ease,
        transform .25s ease,
        visibility .25s ease;

    display: block;

    pointer-events: none;

    z-index: 9999;
}

/* HOVER BRIDGE */

.main-navbar .dropdown::before {

    content: "";

    position: absolute;

    left: 0;

    top: 100%;

    width: 100%;

    height: 16px;
}

/* SHOW MENU */

.main-navbar .dropdown:hover>.dropdown-menu {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

    pointer-events: auto;
}

/* =========================================================
   DROPDOWN ITEM
========================================================= */

.main-navbar .dropdown-menu .dropdown-item,
.main-navbar .dropdown-menu a {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    padding: 12px 20px;

    font-size: 14px;

    font-weight: 500;

    color: #333 !important;

    border-radius: 12px;

    margin: 0 8px;

    transition: .25s ease;
}

/* HOVER EFFECT */

.main-navbar .dropdown-menu .dropdown-item:hover,
.main-navbar .dropdown-menu a:hover {

    background:
        rgba(14, 159, 141, .08);

    color: var(--gradient-start) !important;

    transform: translateX(4px);
}

/* =========================================================
   SUBMENU
========================================================= */

.main-navbar .dropdown-menu .dropdown {
    position: relative;
}

/* SUBMENU POSITION */

.main-navbar .dropdown-menu .dropdown-menu {

    top: -8px;

    left: calc(100% + 10px);

    margin: 0;
}

/* HOVER BRIDGE SUBMENU */

.main-navbar .dropdown-menu .dropdown::before {

    content: "";

    position: absolute;

    top: 0;

    right: -14px;

    width: 14px;

    height: 100%;
}

/* SHOW SUBMENU */

.main-navbar .dropdown-menu .dropdown:hover>.dropdown-menu {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

    pointer-events: auto;
}


/* =========================================================
   AUTO 2 COLUMN DROPDOWN
========================================================= */

/* dropdown utama */
.main-navbar .dropdown-menu.multi-column {

    min-width: 520px;

    display: grid !important;

    grid-template-columns: repeat(2, minmax(300px, 1fr));

    gap: 4px 5px;
    align-items: start;

    padding: 14px;

    max-height: 420px;

    overflow-y: auto;
}

/* item full width */
.main-navbar .dropdown-menu.multi-column>li {

    width: 100%;
}

/* submenu level 2 */
.main-navbar .dropdown-menu .dropdown-menu.multi-column {

    min-width: 500px;

    display: grid !important;

    grid-template-columns: repeat(2, minmax(200px, 1fr));

    gap: 4px 5px;
    align-items: start;

    padding: 14px;

    max-height: 420px;

    overflow-y: auto;
}

/* item */
.main-navbar .dropdown-menu.multi-column a {

    white-space: normal;
}

/* scrollbar */
.main-navbar .dropdown-menu.multi-column::-webkit-scrollbar {

    width: 6px;
}

.main-navbar .dropdown-menu.multi-column::-webkit-scrollbar-thumb {

    background: rgba(0, 0, 0, .15);

    border-radius: var(--radius-container);
}

/* SUBMENU ARROW */

.main-navbar .dropdown-menu .dropdown-toggle::after {

    content: "\f105";

    font-family: "Line Awesome Free";

    font-weight: 900;

    font-size: 11px;

    border: none !important;

    transition: .3s ease;
}

/* =========================================================
   NAV LINK HOVER FIX
========================================================= */

.main-navbar .nav-link {

    position: relative;

    overflow: hidden;
}

.main-navbar .nav-link::before {

    content: "";

    position: absolute;

    left: 14px;

    bottom: 4px;

    width: 0;

    height: 2px;

    background: var(--gradient-start);

    border-radius: 20px;

    transition: width .3s ease;
}

/* HOVER */

.main-navbar .nav-link:hover::before,
.main-navbar .dropdown:hover>.nav-link::before {

    width: calc(100% - 28px);
}

/* COLOR */

.main-navbar .nav-link:hover,
.main-navbar .dropdown:hover>.nav-link {

    color: var(--gradient-start) !important;
}

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

.navbar-extra {

    display: flex;

    align-items: center;

    gap: 16px;

    margin-left: 24px;
}

/* =========================================================
   SEARCH
========================================================= */

/* SEARCH WRAPPER */

.nav-search-wrapper {

    position: relative;
}

.search-form {

    position: relative;

    display: flex;

    align-items: center;
}

.search-form .input-search {

    width: 200px;

    height: 40px;

    border:
        1px solid rgba(0, 0, 0, .08);

    border-radius: 60px;

    padding:
        0 50px 0 18px;

    font-size: var(--text-sm);

    background: #fff;

    transition: var(--transition);
}

.search-form .input-search:focus {

    outline: none;

    border-color: var(--gradient-start);

    box-shadow:
        0 0 0 4px rgba(14, 159, 141, .08);
}

/* BUTTON */

.search-form button {

    position: absolute;

    right: 6px;

    width: 34px;
    height: 34px;

    border: none;

    border-radius: 50%;

    background: var(--gradient-start);

    color: #fff;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    transition: .3s ease;
}

.search-form button:hover {

    transform: scale(1.05);
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 991px) {

    .main-navbar {

        padding: 12px 0;
    }

    .main-navbar .navbar-brand img {

        height: 46px;
    }

    /* COLLAPSE */

    .main-navbar .navbar-collapse {

        background: #fff;

        padding: 20px;

        margin-top: 16px;

        border-radius: 24px;

        box-shadow:
            0 12px 30px rgba(0, 0, 0, .06);
    }

    /* NAV */

    .main-navbar .navbar-nav {

        align-items: flex-start;

        gap: 4px;
    }

    .main-navbar .nav-item {

        width: 100%;
    }

    .main-navbar .nav-link {

        padding: 14px 0 !important;
    }

    /* REMOVE UNDERLINE */

    .main-navbar .nav-link::before {

        display: none;
    }

    /* =========================================
   MOBILE DROPDOWN
========================================= */

    .main-navbar .dropdown::before,
    .main-navbar .dropdown-menu .dropdown::before {
        display: none;
    }

    /* MENU */

    .main-navbar .dropdown-menu {

        display: none;

        position: static !important;

        opacity: 1 !important;

        visibility: visible !important;

        transform: none !important;

        box-shadow: none;

        background: transparent;

        width: 100%;

        border: none;

        padding-left: 14px;

        margin-top: 6px;
    }

    /* SHOW */

    .main-navbar .dropdown-menu.show {
        display: block;
    }

    /* ITEM */

    .main-navbar .dropdown-menu .dropdown-item,
    .main-navbar .dropdown-menu a {

        padding: 12px 0;

        font-size: 14px;

        background: transparent;

        transform: none !important;
    }

    /* TOGGLE */

    .main-navbar .dropdown-toggle {

        display: flex;

        align-items: center;

        justify-content: space-between;

        width: 100%;
    }

    /* ICON */

    .main-navbar .dropdown-toggle::after {

        margin-left: auto;

        transition: .25s ease;
    }

    /* ROTATE */

    .main-navbar .dropdown.show>.dropdown-toggle::after {

        transform: rotate(90deg);
    }

    /* SUBMENU */

    .main-navbar .dropdown-menu .dropdown-menu {
        display: none;
        padding-left: 14px;

        margin-top: 4px;
    }

    /* SHOW SUBMENU */

    .main-navbar .dropdown-menu .dropdown-menu.show {

        display: block;
    }

    /* =========================================
       NAVBAR EXTRA MOBILE
    ========================================= */

    .navbar-extra {

        width: 100%;

        flex-direction: column;

        align-items: stretch;

        gap: 14px;

        margin:
            18px 0 0;
    }

    .nav-search-wrapper {

        width: 100%;
    }

    .search-form {

        width: 100%;
    }

    .search-form .input-search {

        width: 100%;
    }

    /* BUTTON */

    .btn-daftar {

        width: 100%;
    }

    .main-navbar .dropdown-menu.multi-column,
    .main-navbar .dropdown-menu .dropdown-menu.multi-column {

        display: none !important;

        grid-template-columns: 1fr !important;

        min-width: 100%;

        max-height: none;

        overflow: visible;

        padding: 0 0 0 14px;
    }

    .main-navbar .dropdown-menu.multi-column.show,
    .main-navbar .dropdown-menu .dropdown-menu.multi-column.show {

        display: block !important;
    }
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 576px) {

    .main-navbar .navbar-collapse {

        padding: 18px;
    }

    .main-navbar .nav-link {

        font-size: 14px;
    }

    .main-navbar .dropdown-menu .dropdown-item {

        font-size: 13px;
    }

    .search-form .input-search {

        height: 42px;

        font-size: 13px;
    }

    .search-form button {

        width: 32px;
        height: 32px;
    }

    .btn-daftar {

        padding: 10px 18px;

        font-size: 14px;
    }
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero {
    width: 100%;
    min-height: 695px;
    height: auto;
    position: relative;
    overflow: visible;
    color: #ffffff;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #e8f4f3;
}

.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: transparent;
    pointer-events: none;
}

.hero .container {
    position: relative;
    z-index: 2;
    height: 100%;
}

.hero-inner {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 30px;
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
}

.hero-text {
    margin-top: 70px;
    max-width: 640px;
    margin-bottom: -0px;
}

.hero-subtitle {
    display: inline-block;
    color: rgba(255, 255, 255, 0.92);
    font-weight: 500;
    font-size: 1rem;
    margin-bottom: 18px;
}

.hero .hero-text h1 {
    font-size: 64px;
    line-height: 1.05;
    margin-bottom: 18px;
    font-weight: 900;
    color: #ffffff;
}

.hero p {
    font-size: clamp(0.95rem, 2vw, 1.05rem);
    max-width: 560px;
    margin-bottom: 10px;
    color: rgba(255, 255, 255, 0.92);
}

.hero-bottom-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: flex-start;
}

.hero-search-card {
    flex: 1 1 520px;
    min-width: 280px;
    width: 100%;
    background: #ffffff;
    border-radius: 18px;
    padding: 16px 18px;
    max-width: 100%;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.hero-search-card label {
    display: block;
    font-size: 0.78rem;
    color: #6B7280;
    font-weight: var(--font-weight-700);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.hero-search-card .input-group {
    margin-top: 4px;
    height: 51px;
    border-radius: 12px;
    overflow: hidden;
    background: #F3F4F6;
    border: 1px solid #E5E7EB;
}

.hero-search-card .input-group-text {
    background: transparent;
    border: none;
    color: #9CA3AF;
    width: 52px;
    justify-content: center;
}

.hero-search-card .form-control {
    background: transparent;
    border: none;
    color: #111827;
    font-size: 0.95rem;
    height: 51px;
}

.hero-search-card .form-control::placeholder {
    color: #9CA3AF;
}

.hero-search-card .form-control:focus {
    box-shadow: none;
}

/* =========================================================
   SEARCH DROPDOWN
========================================================= */

.search-dropdown-wrapper {

    position: relative;

    width: 100%;

    z-index: 9999;
}

/* =========================================================
   TRIGGER
========================================================= */

.search-trigger {

    width: 100%;

    height: 58px;

    border-radius: 16px;

    background: #F3F4F6;

    border: 1px solid #E5E7EB;

    padding: 0 18px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    cursor: pointer;

    transition: .25s ease;
}

.search-trigger:hover {

    border-color: #d1d5db;

    background: #ffffff;
}

/* =========================================================
   LEFT
========================================================= */

.search-trigger-left {

    display: flex;

    align-items: center;

    gap: 12px;
}

.search-trigger-left i {

    font-size: 20px;

    color: #9CA3AF;
}

.search-trigger-left span {

    color: #9CA3AF;

    font-size: 0.95rem;
}

/* =========================================================
   ARROW
========================================================= */

.search-arrow {

    font-size: 18px;

    color: #9CA3AF;

    transition: .3s ease;
}

.search-dropdown.show~.search-trigger .search-arrow {

    transform: rotate(180deg);
}

/* =========================================================
   DROPDOWN
========================================================= */

.search-dropdown {

    position: absolute;

    top: calc(100% + 14px);

    left: 0;

    width: 100%;

    background: #ffffff;

    border-radius: 24px;

    padding: 14px;

    box-shadow:
        0 25px 60px rgba(0, 0, 0, .14);

    z-index: 99999;

    display: none;

    animation: dropdownFade .25s ease;
}

/* SHOW */

.search-dropdown.show {

    display: block;
}

/* =========================================================
   ANIMATION
========================================================= */

@keyframes dropdownFade {

    from {

        opacity: 0;

        transform: translateY(-8px);
    }

    to {

        opacity: 1;

        transform: translateY(0);
    }
}

/* =========================================================
   ITEM
========================================================= */

.dropdown-item-search {

    display: flex;

    align-items: center;

    gap: 18px;

    padding: 18px;

    border-radius: 18px;

    text-decoration: none;

    transition: .25s ease;
}

.dropdown-item-search:hover {

    background: #f7f9f8;
}

/* =========================================================
   ICON
========================================================= */

.dropdown-icon {

    width: 56px;

    height: 56px;

    border-radius: 16px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    font-size: 24px;
}

/* REGULER */

.dropdown-icon.reguler {

    background: rgba(14, 159, 141, .10);

    color: var(--gradient-start);
}

/* EKSEKUTIF */

.dropdown-icon.eksekutif {

    background: rgba(255, 193, 7, .10);

    color: var(--gradient-start);
}

/* ISTANO */

.dropdown-icon.istano {

    background: rgba(108, 196, 161, .10);

    color: var(--gradient-end);
}

/* =========================================================
   CONTENT
========================================================= */

.dropdown-content h6 {

    margin: 0;

    font-size: var(--text-md);

    font-weight: 700;

    color: var(--heading-color);
}

.dropdown-content p {

    margin: 6px 0 0;

    font-size: var(--text-sm);

    color: var(--secondary-color);

    line-height: 1.5;
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    .search-dropdown {

        border-radius: 20px;

        padding: 10px;
    }

    .dropdown-item-search {

        padding: 14px;
    }

    .dropdown-icon {

        width: 48px;

        height: 48px;

        font-size: 20px;
    }

    .dropdown-content h6 {

        font-size: 15px;
    }

    .dropdown-content p {

        font-size: 12px;
    }
}


.quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.action-card {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    flex: 0 0 120px;
    gap: 10px;
    min-height: 110px;
    padding: 16px 14px;
    background: #ffffff;
    border-radius: 14px;
    color: #111827;
    text-decoration: none;
    text-align: left;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    transition: transform 0.24s ease, box-shadow 0.24s ease;
}

.action-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.action-card i {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    font-size: 20px;
    color: #0E9F8D;
    background: rgba(14, 159, 141, 0.12);
    border-radius: 10px;
}

.action-label {
    display: inline-block;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
    max-width: 100%;
}

/* Hero Scroll Indicator */
.hero-scroll-indicator {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 1rem;
}

.scroll-lines {
    display: flex;
    align-items: center;
    gap: 8px;
}

.scroll-line {
    width: 24px;
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.25);
    transition: all 0.3s ease;
}

.scroll-line.active {
    width: 40px;
    background: #ffffff;
}

.scroll-link {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 2rem;
    text-decoration: none;
    transition: color 0.3s ease;
}

.scroll-link:hover {
    color: #ffffff;
}

@media (max-width: 991px) {
    .hero-bottom-cards {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-search-card,
    .quick-actions {
        width: 100%;
    }

    .quick-actions {
        justify-content: flex-start;
    }

    .hero-search-card .input-group {
        width: 100%;
    }
}

@media (max-width: 767px) {
    .hero {
        min-height: 650px;
        height: auto;
        padding: 20px 18px;
        overflow: visible;
    }

    .hero-inner {
        gap: 24px;
        height: auto;
    }

    .hero-text {
        max-width: 100%;
    }

    .hero h1 {
        font-size: 2.4rem;
    }

    .hero p {
        font-size: 0.95rem;
        max-width: 100%;
    }

    .hero-scroll-indicator {
        display: none;
    }

    .hero-search-card {
        order: 1;
        width: 100%;
        padding: 12px 14px;
        flex: 0 0 auto !important;
    }

    .hero-search-card label {
        font-size: 0.75rem;
        margin-bottom: 6px;
    }

    .hero-search-card .input-group {
        height: 34px;
        margin-top: 0;
    }

    .hero-search-card .form-control {
        height: 34px;
        font-size: 0.85rem;
        padding: 4px 8px;
    }

    .hero-search-card .input-group-text {
        width: 38px;
        font-size: 0.9rem;
    }

    .hero-search-card .input-group {
        width: 100%;
    }

    .quick-actions {
        order: 2;
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        align-items: stretch;
    }

    .action-card {
        width: 100%;
        min-width: auto;
        max-width: 100%;
        flex: none;
        padding: 14px 8px;
        min-height: auto;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .action-card i {
        width: 36px;
        height: 36px;
        font-size: 18px;
    }

    .action-label {
        display: block;
        font-size: 0.7rem;
        text-align: center;
    }
}

/* ==========================================
   SLIDER WRAPPER
========================================== */

.hero-bg-slider {

    overflow: hidden;
    position: absolute;

    inset: 0;

    z-index: 1;
}

/* ==========================================
   SLIDE
========================================== */

.hero-slide {

    position: absolute;

    inset: 0;

    opacity: 0;

    visibility: hidden;

    transition: opacity 1.2s ease;

    background-position: center;

    background-size: cover;

    background-repeat: no-repeat;

    transform: scale(1.03);
}

/* ACTIVE */

.hero-slide.active {

    opacity: 1;

    visibility: visible;

    animation: heroZoom 12s ease-in-out infinite alternate;
}

/* ==========================================
   ZOOM EFFECT
========================================== */

@keyframes heroZoom {

    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.01);
    }
}

/* ==========================================
   OVERLAY
========================================== */

.hero-overlay {

    position: absolute;

    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:

        radial-gradient(ellipse 42% 72% at 0% 0%,
            rgba(220, 255, 43, .88) 0%,
            rgba(220, 255, 43, .35) 35%,
            transparent 100%),

        linear-gradient(90deg,
            rgba(14, 159, 141, .94) 0%,
            rgba(14, 159, 141, .88) 38%,
            rgba(14, 159, 141, .52) 55%,
            rgba(14, 159, 141, .12) 72%,
            rgba(14, 159, 141, .02) 100%);
}

/* ==========================================
   GLOW EFFECT
========================================== */

.hero-overlay::before {

    content: "";

    position: absolute;

    width: 550px;
    height: 550px;

    top: -120px;
    left: -120px;

    border-radius: 50%;

    background:
        radial-gradient(circle,
            rgba(200, 255, 120, .35) 0%,
            rgba(140, 255, 180, .20) 40%,
            rgba(255, 255, 255, 0) 75%);

    filter: blur(60px);
}

/* ==========================================
   CONTENT
========================================== */

.hero .container {

    position: relative;

    z-index: 10;
}

/* ==========================================
   HERO TEXT
========================================== */

.hero-text {

    max-width: 700px;
}

.hero h1 {

    font-size: clamp(3rem, 6vw, 5rem);

    font-weight: 800;

    line-height: 1.05;

    letter-spacing: -2px;

    margin-bottom: 20px;
}

.hero p {

    font-size: 18px;

    line-height: 1.8;

    max-width: 620px;
}

/* ==========================================
   MOBILE
========================================== */

@media(max-width:768px) {

    .hero {

        min-height: auto;

        padding: 120px 0 70px;
    }

    .hero h1 {

        font-size: 42px;

        line-height: 1.2;
    }

    .hero p {

        font-size: 15px;
    }

    .hero-overlay::before {

        width: 350px;
        height: 350px;
    }
}


/* ===================================== */
/* PROFILE */
/* ===================================== */
.profile-section {
    padding: 60px 0;
    background: var(--background-color);
}

/* IMAGE */
.profile-section img {
    width: 100%;
    border-radius: 60px;
    box-shadow: var(--shadow-card);
    transition: var(--transition)
}

.profile-section img:hover {
    transform: scale(1.02);
}

/* TEXT */
.profile-section .about-text {
    padding-left: 30px;
    text-align: justify;
}

.profile-section .about-text h2 {
    font-size: 36px;
    font-weight: var(--font-weight-700);
    color: var(--default-color);
    margin-bottom: 15px;
    font-family: var(--font-heading);
}

.profile-section .about-text span {
    font-size: 18px;
    color: var(--gradient-start);
    font-weight: var(--font-weight-700);
    line-height: 1.7;
    margin-bottom: 30px;
}

.profile-section .about-text p {
    font-size: 15px;
    color: #555;
    line-height: 1.7;
    margin-bottom: 20px;
}

.about-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: 24px;
}

.about-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: var(--gradient-start);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;

    transition: all 0.3s ease;
}

.about-link i {
    transition: transform 0.3s ease;
}

.about-link:hover {
    color: var(--accent-color);
}

.about-link:hover i {
    transform: translateX(4px);
}

/* SECTION */
.profile-detail {
    background: #f8fafc;
    padding-bottom: 100px;
}

/* HEADER */
.profile-detail h1 {
    font-weight: var(--font-weight-700);
    color: #1f2937;
}

.profile-detail .text-muted {
    font-size: 14px;
    color: #6b7280 !important;
}

/* IMAGE */
.profile-detail img {
    border-radius: 15px;
    transition: 0.3s;
}

.profile-detail img:hover {
    transform: scale(1.02);
}

/* DESKRIPSI */
.profile-detail h3 {
    font-weight: 600;
    margin-bottom: 10px;
    color: #111827;
}

.profile-detail hr {
    width: 60px;
    height: 3px;
    background: #0ea5a4;
    border: none;
    margin-bottom: 15px;
}

/* CARD VISI MISI */
.profile-detail .card {
    border: none;
    border-radius: 15px;
    transition: 0.3s;
}

.profile-detail .card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
}

.profile-detail .card-title {
    font-weight: 600;
    margin-bottom: 10px;
}

.profile-detail .card-title.text-primary {
    color: #0ea5a4 !important;
}

.profile-detail .card-title.text-success {
    color: #22c55e !important;
}

/* INFO BOX */
.profile-detail .p-3 {
    background: #ffffff;
    border-radius: 15px;
    transition: 0.3s;
}

.profile-detail .p-3:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
}

.profile-detail h5 {
    font-weight: 600;
    margin-bottom: 5px;
    color: #111827;
}

.profile-detail p {
    font-size: 14px;
    color: #4b5563;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .profile-detail h1 {
        font-size: 24px;
    }

    .profile-detail h3 {
        margin-top: 20px;
    }
}


/* PAKET LAYANAN */
.modal-paket {
    border-radius: 20px;
    overflow: hidden;
    border: none;
}

/* HEADER */
.modal-paket .header-paket {
    border-bottom: 1px solid #eee;
    padding: 20px 25px;
}

.modal-paket .header-paket h4 {
    font-weight: 600;
}

/* IMAGE */
.modal-paket .image-wrapper {
    text-align: center;
    margin-bottom: 20px;
}

.modal-paket .image-wrapper img {
    max-height: 300px;
    border-radius: 10px;
}

/* CONTENT */
.modal-paket .content-section h5 {
    font-weight: 600;
    margin-bottom: 10px;
}

.modal-paket .modalDeskripsi {
    color: #555;
    line-height: 1.7;
}

/* INFO BOX */
.modal-paket .info-box {
    background: #f5f1e6;
    border: 1px solid #e5d6a5;
    padding: 15px;
    border-radius: 10px;
    margin-top: 20px;
    color: #8a6d3b;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* FOOTER */
.modal-paket .custom-footer {
    display: flex;
    justify-content: space-between;
    padding: 20px;
}




/* TITLE */
.section-title {
    font-family: var(--font-heading);
    font-size: 32px;
    font-weight: 600;
}

.section-line {
    width: 60px;
    height: 4px;
    background: var(--gradient-start);
    margin: 10px auto 20px;
    border-radius: 10px;
}

.section-desc {
    max-width: 600px;
    margin: auto;
    color: var(--dark-gray);
    font-size: 14px;
}


/* =========================================================
   LAYANAN MODERN
========================================================= */

.layanan-modern {

    position: relative;

    padding: 80px 0;

    background: var(--nav-mobile-background-color);

    overflow: hidden;
}

/* =========================================================
   LAYOUT
========================================================= */

.layanan-layout {

    display: grid;

    grid-template-columns:
        350px 1fr;

    gap: 24px;

    align-items: center;
}

/* =========================================================
   LEFT
========================================================= */

.layanan-left {

    position: relative;

    z-index: 5;
}

.layanan-modern .section-title {

    font-size: var(--text-2xl);

    font-weight: var(--font-weight-700);

    line-height: 1.02;

    color: var(--default-color);

    margin-bottom: 18px;

    letter-spacing: -1px;
}

.layanan-modern .section-line {

    width: 100px;
    height: 5px;

    border-radius: 30px;

    background: var(--gradient-start);

    margin-bottom: 28px;
}

.layanan-modern .section-desc {

    font-size: 14px;

    line-height: 1.5;

    color: var(--secondary-color);

    margin-bottom: 28px;
}

/* =========================================================
   NAV
========================================================= */

.layanan-nav {

    display: flex;
    align-items: center;

    gap: 16px;
}

.nav-circle {

    width: 40px;
    height: 40px;

    border-radius: 50%;

    border: 2px solid var(--gradient-start);

    background: transparent;

    color: var(--gradient-start);

    display: flex;
    align-items: center;
    justify-content: center;

    transition: var(--transition);
}

.nav-circle:hover {

    background: var(--gradient-start);

    color: var(--contrast-color);
}

.nav-circle i {

    font-size: 24px;
}

/* =========================================================
   RIGHT
========================================================= */

.layanan-right {
    overflow: hidden;
    margin-right: -5px;
}

/* =========================================================
   WRAPPER
========================================================= */

.layanan-slider-wrapper {
    padding-right: 5px;
    overflow: hidden;
}

/* =========================================================
   SLIDER
========================================================= */

.layanan-slider {

    display: flex;

    gap: 22px;

    transition: transform .5s ease;
}

/* =========================================================
   ITEM
========================================================= */

.layanan-item {

    flex: 0 0 calc((100% - 44px) / 3);

    min-width: 0;
}

/* =========================================================
   CARD
========================================================= */

.layanan-card-modern {

    position: relative;

    width: 100%;
    aspect-ratio: 4 / 6;

    padding: 20px;

    overflow: hidden;
    isolation: isolate;

    border-radius: 16px;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);

    transition: transform 0.3s ease,
        box-shadow 0.3s ease;

    text-decoration: none;
}


/* =========================================================
   IMAGE
========================================================= */

.icon-box {

    position: absolute;

    inset: 0;
}

.icon-box img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 1.2s ease;
}

.layanan-card-modern:hover img {

    transform: scale(1.08);
}

/* =========================================================
   OVERLAY
========================================================= */

.layanan-card-modern::before {

    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 0%, rgba(14, 159, 141, 0.25) 40%, rgba(14, 159, 141, 0.88) 100%);
}

.layanan-card-modern::after {

    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
}

.layanan-card-modern-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 35%, rgba(14, 159, 141, 0.55) 70%, rgba(14, 159, 141, 0.92) 100%);
}

/* =========================================================
   BODY
========================================================= */

.layanan-body {

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    z-index: 5;

    padding: 20px;

    display: flex;

    flex-direction: column;
}

.layanan-body h5 {

    font-size: var(--text-md);

    font-weight: 800;

    line-height: 1.2;

    color: #fff;

    margin-bottom: 8px;

    letter-spacing: -.7px;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

    text-overflow: ellipsis;

    min-height: calc(1.2em * 2);
}

.layanan-body p {

    font-size: var(--text-sm);

    line-height: 1.2;

    color: rgba(255, 255, 255, .92);

    margin-bottom: 10px;

    max-width: 100%;

    display: -webkit-box;

    -webkit-line-clamp: 3;

    -webkit-box-orient: vertical;

    overflow: hidden;

    text-overflow: ellipsis;

    min-height: calc(1.2em * 3);
}

.link-detail {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    color: #fff;

    font-size: 13px;

    font-weight: var(--font-weight-700);

    text-decoration: none;

    transition: .3s ease;

    margin-top: auto;
}

.link-detail:hover {

    gap: 16px;

    color: #fff;
}

/* =========================================================
   DOTS
========================================================= */

.slider-dots {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 10px;

    margin-top: 34px;
}

.slider-dots span {

    width: 8px;
    height: 8px;

    border-radius: 20px;

    background: #cbd5e1;

    transition: .3s ease;

    cursor: pointer;
}

.slider-dots .active {

    width: 56px;

    background: var(--gradient-start);
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 992px) {

    .layanan-layout {

        grid-template-columns: 1fr;

        gap: 40px;
    }

    .layanan-left {

        max-width: 100%;
    }

    .layanan-item {

        flex: 0 0 calc((100% - 22px) / 2);
    }

    .layanan-card-modern {

        height: 540px;
    }

    .layanan-body h5 {

        font-size: 34px;
    }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .layanan-modern {

        padding: 70px 0;
    }

    .layanan-modern .section-title {

        font-size: 44px;
    }

    .layanan-modern .section-desc {

        font-size: 17px;
    }

    .layanan-item {

        flex: 0 0 88%;
    }

    .layanan-card-modern {

        height: 500px;

        border-radius: 28px;
    }

    .layanan-body {

        padding: 26px;
    }

    .layanan-body h5 {

        font-size: 30px;
    }

    .layanan-body p {

        font-size: 16px;
    }

    .nav-circle {

        width: 52px;
        height: 52px;
    }
}

/* =========================================================
   SECTION MITRA
========================================================= */

#asuransi-rekanan {
    position: relative;

    padding: 90px 0;

    background:
        linear-gradient(to bottom,
            #f8fafc,
            #ffffff);

    overflow: hidden;
}

/* =========================================================
   HEADER
========================================================= */

#asuransi-rekanan .section-heading {
    margin-bottom: 60px;
}

#asuransi-rekanan h2 {
    font-size: 40px;
    font-weight: 800;

    color: #0f172a;

    margin-bottom: 18px;
}

#asuransi-rekanan h2 span {
    color: var(--gradient-start);
}

#asuransi-rekanan p {
    max-width: 680px;

    margin: 0 auto;

    color: #64748b;

    font-size: 16px;

    line-height: 1.9;
}

/* =========================================================
   SLIDER
========================================================= */

.mitra-slider {
    position: relative;

    width: 100%;

    overflow: hidden;
}

/* TRACK */

.mitra-track {
    display: flex;

    align-items: center;

    gap: 24px;

    width: max-content;

    animation:
        scrollMitra 35s linear infinite;
}

/* =========================================================
   CARD
========================================================= */

.mitra-card {
    flex: 0 0 auto;

    width: 220px;
    height: 130px;

    background: #fff;

    border-radius: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 24px;

    border:
        1px solid rgba(15, 23, 42, .06);

    box-shadow:
        0 10px 30px rgba(0, 0, 0, .04);

    transition:
        transform .3s ease,
        box-shadow .3s ease;

    text-decoration: none;
}

/* HOVER */

.mitra-card:hover {
    transform: translateY(-6px);

    box-shadow:
        0 20px 40px rgba(14, 159, 141, .10);
}

/* =========================================================
   IMAGE
========================================================= */

.mitra-card img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    filter: grayscale(20%);

    transition:
        transform .35s ease,
        filter .35s ease;
}

.mitra-card:hover img {
    transform: scale(1.05);

    filter: grayscale(0%);
}

/* =========================================================
   ANIMATION
========================================================= */

@keyframes scrollMitra {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    #asuransi-rekanan {
        padding: 70px 0;
    }

    #asuransi-rekanan h2 {
        font-size: 32px;
    }

    .mitra-card {
        width: 170px;
        height: 100px;

        padding: 18px;

        border-radius: 18px;
    }

    .mitra-track {
        gap: 16px;

        animation-duration: 25s;
    }
}

/* ==========================================
   PAKET SECTION
========================================== */

.paket-section {

    padding: 80px 0;

    background: #f8fafc;

    overflow: hidden;
}

/* ==========================================
   HEADER
========================================== */

.paket-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 36px;
}

/* ==========================================
   NAVIGATION
========================================== */

.paket-nav {

    display: flex;

    align-items: center;

    gap: 12px;
}

.paket-btn {

    width: 45px;
    height: 45px;

    border-radius: 50%;

    border: 2px solid rgba(14, 159, 141, .5);

    background: transparent;

    color: var(--gradient-start);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 22px;

    transition: .3s ease;
}

.paket-btn:hover {

    background: var(--gradient-start);

    color: #fff;

    transform: translateY(-2px);
}

/* ==========================================
   SLIDER
========================================== */

.paket-slider-wrapper {

    overflow: hidden;
}

.paket-slider {

    display: flex;

    gap: 24px;

    transition: transform .45s ease;
}

/* ==========================================
   ITEM
========================================== */

.paket-item {

    flex: 0 0 calc((100% - 72px) / 4);

    min-width: 0;
}

/* ==========================================
   CARD
========================================== */

.paket-card {

    background: #fff;

    border-radius: 28px;

    overflow: hidden;

    border: 1px solid #e5e7eb;

    cursor: pointer;

    transition: .35s ease;

    box-shadow:
        0 4px 14px rgba(0, 0, 0, .04);
}

.paket-card:hover {

    transform: translateY(-8px);

    box-shadow:
        0 20px 40px rgba(0, 0, 0, .08);
}

/* ==========================================
   IMAGE
========================================== */

.paket-image {
    overflow: hidden;
}

.paket-card img {

    width: 100%;

    height: 300px;

    object-fit: cover;

    transition: .5s ease;
}

.paket-card:hover img {

    transform: scale(1.03);
}

/* ==========================================
   BODY
========================================== */

.paket-body {

    padding: 18px 18px 20px;
}

.paket-body h5 {

    font-size: var(--text-md);

    font-weight: var(--font-weight-500);

    line-height: 1.3;

    color: #111827;

    margin-bottom: 12px;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

    min-height: calc(1.4em * 2);
}

/* ==========================================
   DATE
========================================== */

.paket-date {

    display: flex;

    align-items: center;

    gap: 8px;

    font-size: 13px;

    color: #6b7280;
}

.paket-date i {

    color: var(--gradient-start);

    font-size: 15px;
}

.paket-empty{
    width:100%;
    min-height:250px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    background:#fff;
    border:1px dashed #d9d9d9;
    border-radius:12px;
    padding:40px 20px;
}

.paket-empty i{
    font-size:60px;
    color:#bdbdbd;
    margin-bottom:15px;
}

.paket-empty h5{
    font-weight:600;
    color:#555;
    margin-bottom:10px;
}

.paket-empty p{
    color:#777;
    max-width:500px;
    margin:0;
}

/* ==========================================
   RESPONSIVE
========================================== */

@media(max-width:1200px) {

    .paket-item {

        flex: 0 0 calc((100% - 48px) / 3);
    }
}

@media(max-width:991px) {

    .paket-item {

        flex: 0 0 calc((100% - 24px) / 2);
    }

    .paket-card img {

        height: 260px;
    }
}

@media(max-width:768px) {

    .paket-header {

        margin-bottom: 28px;
    }

    .paket-item {

        flex: 0 0 85%;
    }

    .paket-card img {

        height: 240px;
    }

    .paket-btn {

        width: 46px;
        height: 46px;

        font-size: 18px;
    }
}





/* ==========================================
   POLI EKSEKUTIF
========================================== */

.poli-eksekutif {

    position: relative;

    width: 100%;

    height: 695px;

    min-height: 695px;

    overflow: hidden;

    background-position: center;

    background-size: cover;

    background-repeat: no-repeat;
}


/* ==========================================
   OVERLAY
========================================== */

.poli-eksekutif::before {

    content: "";

    position: absolute;

    inset: 0;

    background:

        radial-gradient(ellipse 42% 72% at 0% 0%,
            rgba(220, 255, 43, 0.88) 0%,
            rgba(220, 255, 43, 0.35) 35%,
            transparent 100%),

        linear-gradient(90deg,
            rgba(14, 159, 141, 0.94) 0%,
            rgba(14, 159, 141, 0.88) 38%,
            rgba(14, 159, 141, 0.52) 55%,
            rgba(14, 159, 141, 0.12) 72%,
            rgba(14, 159, 141, 0.02) 100%);

    z-index: 1;
}

/* blur glow */

.poli-eksekutif::after {

    content: "";

    position: absolute;

    width: 695px;
    height: 695px;

    left: -250px;
    top: -150px;

    border-radius: 50%;

    background:
        radial-gradient(circle,
            rgba(255, 255, 255, .18) 0%,
            rgba(255, 255, 255, .05) 45%,
            transparent 70%);

    filter: blur(30px);

    z-index: 1;
}

/* ==========================================
   WRAPPER
========================================== */

.poli-eksekutif .overlay {

    position: relative;

    z-index: 5;

    width: 100%;

    padding: 50px 0 90px;
}

/* ==========================================
   CONTENT
========================================== */

.poli-eksekutif .content {

    max-width: 695px;

    color: #fff;
}

/* ==========================================
   BADGE
========================================== */

.poli-eksekutif .badge-eksekutif {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 10px 18px;

    border-radius: 50px;

    background: rgba(255, 255, 255, .14);

    border: 1px solid rgba(255, 255, 255, .18);

    backdrop-filter: blur(12px);

    color: #fff;

    font-size: 13px;

    font-weight: 600;

    margin-bottom: 24px;
}

/* ==========================================
   TITLE
========================================== */

.poli-eksekutif .content h1 {

    font-size: var(--text-3xl);

    font-weight: var(--font-weight-700);

    line-height: 1.1;

    color: #fff;

    margin-bottom: 24px;

    letter-spacing: -1px;
}

/* ==========================================
   SUBTITLE
========================================== */

.poli-eksekutif .content>p {

    font-size: var(--text-lg);

    line-height: 1.5;

    color: rgba(255, 255, 255, .92);

    max-width: 620px;

    margin-bottom: 40px;
}

/* ==========================================
   HIGHLIGHT
========================================== */

.poli-eksekutif .highlight {

    display: flex;

    flex-wrap: wrap;

    gap: 20px;

    margin-bottom: 20px;
}

.poli-eksekutif .highlight .item {

    display: flex;

    align-items: center;

    gap: 14px;

    min-width: 200px;
}

/* ICON */
.poli-eksekutif .highlight i {

    width: 35px;
    height: 35px;

    border-radius: 50%;

    border: 1px solid rgba(255, 255, 255, .35);

    background: rgba(255, 255, 255, .08);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: var(--text-md);

    color: var(--background-color);

    backdrop-filter: blur(12px);

    flex-shrink: 0;
}

/* TEXT */

.poli-eksekutif .highlight span {

    font-size: var(--text-md);

    font-weight: var(--font-weight-600);

    line-height: 1.5;

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

/* ==========================================
   ACTION BUTTON
========================================== */

.poli-eksekutif .hero-actions {

    display: flex;

    align-items: center;

    gap: 16px;

    margin-top: 30px;

    margin-bottom: 40px;
}

/* BUTTON */

.poli-eksekutif .btn-eksekutif {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    height: 50px;

    padding: 0 34px;

    border-radius: 999px;

    background: var(--background-color);

    color: var(--gradient-start);

    font-size: var(--text-sm);

    font-weight: var(--font-weight-700);

    text-decoration: none;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        background .3s ease;
}

/* HOVER */
.poli-eksekutif .btn-eksekutif:hover {

    transform: translateY(-2px);

    background: var(--background-color);

    color: var(--gradient-start);

    box-shadow:
        0 18px 40px rgba(0, 0, 0, .14);
}

/* ICON */

.poli-eksekutif .btn-eksekutif i {

    font-size: var(--text-md);

    transition: transform .3s ease;
}

.poli-eksekutif .btn-eksekutif:hover i {

    transform: translateX(4px);
}

/* ==========================================
   DESC STYLE
========================================== */

.poli-eksekutif .desc {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 26px;

    margin-top: 42px;
}

/* ITEM */

.poli-eksekutif .desc-item {

    position: relative;

    padding-bottom: 20px;
}

/* LABEL */

.poli-eksekutif .desc-item small {

    display: block;

    font-size: 11px;

    font-weight: var(--font-weight-700);

    letter-spacing: 1.2px;

    color: rgba(255, 255, 255, .65);

    margin-bottom: 12px;
}

/* TEXT */

.poli-eksekutif .desc-item p {

    margin: 0;

    font-size: 15px;

    line-height: 1.6;

    font-weight: 500;

    color: #fff;
}

/* LINE */

.poli-eksekutif .desc-item::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;

    height: 4px;

    border-radius: 999px;

    background: rgba(255, 255, 255, .18);
}

/* ACTIVE */

.poli-eksekutif .desc-item.active::after {

    width: 38px;

    background: #fff;
}

/* ==========================================
   DESKTOP LARGE
========================================== */

@media (min-width: 1400px) {

    .poli-eksekutif .content {

        max-width: 760px;
    }

    .poli-eksekutif .content h1 {

        font-size: var(--text-3xl);
    }
}

/* ==========================================
   LAPTOP
========================================== */

@media (max-width: 1200px) {

    .poli-eksekutif {

        height: auto;

        min-height: 695px;
    }

    .poli-eksekutif .overlay {

        padding: 100px 0 80px;
    }

    .poli-eksekutif .content {

        max-width: 620px;
    }

    .poli-eksekutif .content h1 {

        font-size: var(--text-2xl);
    }

    .poli-eksekutif .desc {

        gap: 22px;
    }
}

/* ==========================================
   TABLET
========================================== */

@media (max-width: 991px) {

    .poli-eksekutif {

        height: auto;

        min-height: auto;
    }

    .poli-eksekutif .overlay {

        padding: 90px 0 70px;
    }

    .poli-eksekutif .content {

        max-width: 100%;
    }

    .poli-eksekutif .content h1 {

        font-size: var(--text-2xl);

        line-height: 1.25;
    }

    .poli-eksekutif .content>p {

        font-size: 16px;

        line-height: 1.8;

        margin-bottom: 32px;
    }

    .poli-eksekutif .highlight {

        gap: 16px;
    }

    .poli-eksekutif .highlight .item {

        min-width: calc(50% - 10px);
    }

    .poli-eksekutif .desc {

        grid-template-columns: repeat(2, 1fr);

        gap: 20px;
    }

    .poli-eksekutif .desc p {

        min-height: 58px;
    }

    .poli-eksekutif .contact-title {

        margin-top: 28px;
    }
}

/* ==========================================
   MOBILE
========================================== */

@media (max-width: 768px) {

    .poli-eksekutif {

        height: auto;

        min-height: auto;
    }

    .poli-eksekutif::after {

        width: 420px;
        height: 420px;

        left: -140px;
        top: -100px;
    }

    .poli-eksekutif .overlay {

        padding: 80px 0 60px;
    }

    .poli-eksekutif .content .h1 {

        font-size: var(--text-xl);

        line-height: 1.3;

        margin-bottom: 18px;

        letter-spacing: -1px;
    }

    .poli-eksekutif .content>p {

        font-size: var(--text-md);

        line-height: 1.8;

        margin-bottom: 28px;
    }

    .poli-eksekutif .highlight {

        flex-direction: column;

        align-items: flex-start;

        gap: 14px;

        margin-bottom: 24px;
    }

    .poli-eksekutif .highlight .item {

        min-width: 100%;
    }

    .poli-eksekutif .highlight i {

        width: 42px;
        height: 42px;

        font-size: 16px;
    }

    .poli-eksekutif .highlight span {

        font-size: 15px;
    }

    .poli-eksekutif .desc {

        grid-template-columns: 1fr;

        gap: 16px;

        margin-top: 24px;

        padding-top: 22px;
    }

    .poli-eksekutif .desc p {

        min-height: auto;

        font-size: 14px;

        line-height: 1.6;
    }

    .poli-eksekutif .contact-title {

        margin-top: 24px;

        margin-bottom: 18px;

        font-size: 14px;
    }

    .poli-eksekutif .detail-eksekutif-btn {

        width: 100%;

        justify-content: center;

        padding: 15px 22px;

        font-size: 14px;
    }

    .poli-eksekutif .hero-actions {

        margin-top: 28px;

        margin-bottom: 32px;
    }

    .poli-eksekutif .btn-eksekutif {

        width: 100%;

        justify-content: center;

        height: 56px;

        font-size: 15px;
    }
}

/* ==========================================
   SMALL MOBILE
========================================== */

@media (max-width: 480px) {

    .poli-eksekutif .overlay {

        padding: 70px 0 50px;
    }

    .poli-eksekutif .content .h1 {

        font-size: var(--text-lg);
    }

    .poli-eksekutif .content>p {

        font-size: var(--text-md);
    }

    .poli-eksekutif .highlight span {

        font-size: var(--text-md);
    }

    .poli-eksekutif .desc p {

        font-size: var(--text-md);
    }

    .poli-eksekutif .detail-eksekutif-btn {

        border-radius: 14px;
    }
}

/* =========================================================
   ARTIKEL SECTION
========================================================= */

.artikel-section {

    padding: 50px 0;

    background: var(--background-color);

    overflow: hidden;
}

/* =========================================================
   HEADER
========================================================= */

.artikel-header {
    margin-top: -30px;
    margin-bottom: 30px;
    display: flex;

    align-items: center;

    justify-content: space-between;
}


/* =========================================================
   FILTER
========================================================= */

.artikel-filter {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 34px;
}

.artikel-filter-right {

    margin-left: auto;
}

/* =========================================================
   TABS
========================================================= */

.artikel-tabs {

    display: flex;

    align-items: center;

    gap: 14px;

    flex-wrap: wrap;
}

.artikel-section .tab-btn {

    height: 52px;

    padding: 0 28px;

    border-radius: 999px;

    border: 1px solid var(--border-color);

    background: #fff;

    color: #111827;

    font-size: 15px;

    font-weight: var(--font-weight-700);

    transition: .3s ease;
}

.artikel-section .tab-btn:hover {

    border-color: #5ca394;

    color: #5ca394;
}

.artikel-section .tab-btn.active {

    background: #5ca394;

    border-color: #5ca394;

    color: #fff;

    box-shadow:
        0 10px 22px rgba(92, 163, 148, .16);
}

/* =========================================================
   LIHAT SEMUA
========================================================= */

.btn-lihat {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 0;

    background: transparent;

    border: none;

    color: #3f7f74;

    font-size: 16px;

    font-weight: var(--font-weight-700);

    text-decoration: none;

    transition: .25s ease;
}

.btn-lihat:hover {

    color: #2d6f61;

    transform: translateX(2px);
}

/* =========================================================
   CARD
========================================================= */

.artikel-card {

    display: block;

    background: #fff;

    border-radius: 20px;

    overflow: hidden;

    border: 1px solid #e7edf4;

    text-decoration: none !important;

    transition:
        transform .3s ease,
        box-shadow .3s ease;

    height: 100%;
}

.artikel-card:hover {

    transform: translateY(-5px);

    box-shadow:
        0 18px 34px rgba(0, 0, 0, .06);
}

/* =========================================================
   IMAGE
========================================================= */

.artikel-image {

    position: relative;

    height: 180px;

    overflow: hidden;
}

.artikel-image img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .45s ease;
}

.artikel-card:hover img {

    transform: scale(1.04);
}

/* =========================================================
   BODY
========================================================= */

.artikel-body {

    padding: 18px;
}

/* =========================================================
   META
========================================================= */

.artikel-meta {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    margin-bottom: 14px;
}

.artikel-category {

    font-size: 14px;

    font-weight: var(--font-weight-700);

    color: #3f7f74;
}

.artikel-date {

    font-size: 13px;

    color: #94a3b8;
}

/* =========================================================
   TITLE
========================================================= */

.artikel-body h6 {

    margin: 0;

    font-size: 14px;

    line-height: 1.45;

    color: var(--default-color);

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

    min-height: calc(1.45em * 2);
}

/* =========================================================
   GRID SPACING
========================================================= */

.artikel-section .row {

    --bs-gutter-x: 1.2rem;

    --bs-gutter-y: 1.2rem;
}

/* =========================================================
   FIX INDICATOR
========================================================= */

.carousel-indicators {

    bottom: -55px !important;
}

.carousel-indicators button {

    width: 12px !important;
    height: 12px !important;

    min-width: 12px !important;
    max-width: 12px !important;

    border-radius: 50% !important;

    border: none !important;

    background: #cbd5e1 !important;

    opacity: 1 !important;

    margin: 0 6px !important;

    flex: 0 0 auto !important;
}

.carousel-indicators .active {

    background: #5ca394 !important;
}

/* =========================================================
   DESKTOP LARGE
========================================================= */

@media (min-width: 1400px) {

    .artikel-section .container {

        max-width: 1320px;
    }

    .artikel-image {

        height: 210px;
    }
}

/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1200px) {

    .artikel-section {

        padding: 90px 0;
    }

    .artikel-section .section-title {

        font-size: 52px;
    }

    .artikel-image {

        height: 190px;
    }

    .artikel-body {

        padding: 18px;
    }

    .artikel-body h6 {

        font-size: 15px;
    }

    .artikel-section .tab-btn {

        padding: 0 24px;
    }
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .artikel-section {

        padding: 80px 0;
    }

    .artikel-section .section-title {

        font-size: 42px;

        letter-spacing: -1px;
    }

    .artikel-filter {

        flex-direction: column;

        align-items: flex-start;

        gap: 20px;
    }

    .artikel-filter-right {

        width: 100%;
    }

    .btn-lihat {

        justify-content: flex-start;
    }

    .artikel-tabs {

        width: 100%;

        gap: 12px;
    }

    .artikel-section .tab-btn {

        height: 48px;

        padding: 0 22px;

        font-size: 14px;
    }

    .artikel-image {

        height: 210px;
    }

    .artikel-body {

        padding: 18px;
    }

    .artikel-body h6 {

        font-size: 15px;

        line-height: 1.5;
    }

    /* 2 CARD TABLET */
    .artikel-item {

        width: 50%;
    }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    .artikel-section {

        padding: 70px 0;
    }

    .artikel-header {

        margin-bottom: 24px;
    }

    .artikel-section .section-title {

        font-size: 34px;

        line-height: 1.15;
    }

    .artikel-tabs {

        gap: 10px;
    }

    .artikel-section .tab-btn {

        height: 44px;

        padding: 0 18px;

        font-size: 13px;

        border-radius: 999px;
    }

    .artikel-image {

        height: 220px;
    }

    .artikel-body {

        padding: 16px;
    }

    .artikel-meta {

        margin-bottom: 12px;
    }

    .artikel-category {

        font-size: 13px;
    }

    .artikel-date {

        font-size: 12px;
    }

    .artikel-body h6 {

        font-size: 15px;

        line-height: 1.45;
    }

    .btn-lihat {

        font-size: 14px;
    }

    /* 1 CARD MOBILE */
    .artikel-item {

        width: 100%;
    }

    .carousel-indicators {

        bottom: -45px !important;
    }
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .artikel-section {

        padding: 60px 0;
    }

    .artikel-section .section-title {

        font-size: 28px;
    }

    .artikel-tabs {

        gap: 8px;
    }

    .artikel-section .tab-btn {

        height: 40px;

        padding: 0 16px;

        font-size: 12px;
    }

    .artikel-image {

        height: 200px;
    }

    .artikel-body {

        padding: 14px;
    }

    .artikel-body h6 {

        font-size: 14px;
    }

    .btn-lihat {

        font-size: 13px;
    }
}

/* =========================================================
   INFORMASI PAGE
========================================================= */

.informasi-page {
    position: relative;

    padding: 70px 0;

    background:
        linear-gradient(to bottom,
            #f8fafc,
            #ffffff);
}

/* =========================================================
   HERO
========================================================= */

.informasi-page .informasi-hero {
    margin-bottom: 60px;
}

.informasi-page .hero-badge {
    display: inline-flex;
    align-items: center;

    padding: 10px 18px;

    border-radius: var(--radius-container);

    background:
        rgba(14, 159, 141, .08);

    color: var(--gradient-start);

    font-size: 13px;
    font-weight: 600;

    margin-bottom: 22px;
}

.informasi-page .informasi-hero h1 {
    font-size: 54px;
    font-weight: 800;

    line-height: 1.3;

    color: #111827;

    margin-bottom: 24px;
}

.informasi-page .informasi-hero p {
    font-size: 16px;

    line-height: 2;

    color: #6b7280;

    max-width: 620px;
}

/* =========================================================
   SEARCH
========================================================= */

.informasi-page .informasi-search {
    position: relative;
}

.informasi-page .informasi-search input {
    width: 100%;

    height: 64px;

    border: none;

    border-radius: 60px;

    padding: 0 70px 0 26px;

    background: #fff;

    font-size: 15px;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, .05);
}

.informasi-page .informasi-search button {
    position: absolute;

    top: 50%;
    right: 8px;

    transform: translateY(-50%);

    width: 48px;
    height: 48px;

    border: none;

    border-radius: 50%;

    background: var(--gradient-start);

    color: #fff;

    font-size: 20px;
}

/* =========================================================
   CATEGORY
========================================================= */

.informasi-page .category-filter {
    display: flex;

    gap: 14px;

    flex-wrap: wrap;

    margin-bottom: 50px;
}

.informasi-page .category-filter a {
    padding: 12px 22px;

    border-radius: 40px;

    background: #fff;

    color: #111827;

    text-decoration: none;

    font-size: 14px;
    font-weight: 600;

    box-shadow:
        0 8px 20px rgba(0, 0, 0, .05);

    transition: .25s ease;
}

.informasi-page .category-filter a:hover,
.informasi-page .category-filter a.active {
    background: var(--gradient-start);

    color: #fff;
}

/* =========================================================
   CARD
========================================================= */

.informasi-page .informasi-card {
    background: #fff;

    border-radius: 30px;

    overflow: hidden;

    height: 100%;

    box-shadow:
        0 12px 30px rgba(0, 0, 0, .05);

    transition: .35s ease;
}

.informasi-page .informasi-card:hover {
    transform: translateY(-8px);

    box-shadow:
        0 24px 50px rgba(0, 0, 0, .10);
}

/* IMAGE */
.informasi-page .informasi-image {
    display: block;

    height: 260px;

    overflow: hidden;
}

.informasi-page .informasi-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: .5s ease;
}

.informasi-page .informasi-card:hover img {
    transform: scale(1.08);
}

/* BODY */
.informasi-page .informasi-body {
    padding: 28px;
}

/* CATEGORY */
.informasi-page .informasi-category {
    display: inline-block;

    padding: 7px 14px;

    border-radius: 30px;

    background:
        rgba(14, 159, 141, .08);

    color: var(--gradient-start);

    font-size: 12px;
    font-weight: 600;

    margin-bottom: 18px;
}

/* TITLE */
.informasi-page .informasi-body h4 {
    margin-bottom: 18px;
}

.informasi-page .informasi-body h4 a {
    color: #111827;

    text-decoration: none;

    font-size: 18px;
    font-weight: var(--font-weight-700);

    line-height: 1.5;

    transition: .25s ease;
}

.informasi-page .informasi-body h4 a:hover {
    color: var(--gradient-start);
}

/* META */
.informasi-page .informasi-meta {
    display: flex;

    align-items: center;

    gap: 18px;

    flex-wrap: wrap;

    margin-bottom: 18px;
}

.informasi-page .informasi-meta span {
    display: flex;
    align-items: center;

    gap: 7px;

    color: #6b7280;

    font-size: 13px;
}

.informasi-page .informasi-meta i {
    color: var(--gradient-start);
}

/* DESC */
.informasi-page .informasi-body p {
    color: #6b7280;

    line-height: 1.9;

    margin-bottom: 24px;
}

/* BUTTON */
.informasi-page .btn-read {
    display: inline-flex;
    align-items: center;

    gap: 10px;

    color: var(--gradient-start);

    text-decoration: none;

    font-size: 14px;
    font-weight: var(--font-weight-700);

    transition: .25s ease;
}

.informasi-page .btn-read:hover {
    gap: 14px;
}

/* =========================================================
   PAGINATION
========================================================= */

.informasi-page .pagination-modern {
    margin-top: 70px;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;

    gap: 12px;
}

/* RESET */
.informasi-page .pagination-modern * {
    list-style: none;
}

/* LINK + ACTIVE */
.informasi-page .pagination-modern a,
.informasi-page .pagination-modern strong {

    min-width: 48px;
    height: 48px;

    padding: 0 18px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 16px;

    background: #fff;

    color: #111827;

    text-decoration: none;

    font-size: 14px;
    font-weight: 600;

    box-shadow:
        0 8px 20px rgba(0, 0, 0, .05);

    transition:
        all .25s ease;
}

/* HOVER */
.informasi-page .pagination-modern a:hover {
    background: var(--gradient-start);

    color: #fff;

    transform: translateY(-2px);
}

/* ACTIVE */
.informasi-page .pagination-modern strong {
    background: var(--gradient-start);

    color: #fff;
}

/* MOBILE */
@media (max-width: 576px) {

    .informasi-page .pagination-modern {
        gap: 8px;
    }

    .informasi-page .pagination-modern a,
    .informasi-page .pagination-modern strong {

        min-width: 42px;
        height: 42px;

        border-radius: 12px;

        font-size: 13px;
    }
}

/* =========================================================
   BOX CATEGORY
========================================================= */

.box-category {

    background: transparent;

    border: none;

    box-shadow: none;
}

/* =========================================================
   HEADER
========================================================= */

.box-category .post-head {

    padding: 0 0 24px;

    background: transparent;

    border: none;
}

/* WRAPPER */

.box-category .post-head-content {

    display: flex;

    align-items: center;

    gap: 16px;
}

/* ICON */

.box-category .post-head-icon {

    width: 58px;

    height: 58px;

    border-radius: 18px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: linear-gradient(135deg,
            rgba(14, 159, 141, .12),
            rgba(14, 159, 141, .06));

    color: var(--gradient-start);

    font-size: 24px;

    flex-shrink: 0;
}

/* TEXT */

.box-category .post-head-text h4 {

    margin: 0 0 4px;

    font-size: 26px;

    font-weight: var(--font-weight-700);

    color: #111827;
}

.box-category .post-head-text p {

    margin: 0;

    font-size: 14px;

    color: #6b7280;

    line-height: 1.6;
}

/* MOBILE */

@media (max-width: 767px) {

    .box-category .post-head {

        padding-bottom: 18px;
    }

    .box-category .post-head-content {

        align-items: flex-start;
    }

    .box-category .post-head-icon {

        width: 50px;

        height: 50px;

        border-radius: 14px;

        font-size: 20px;
    }

    .box-category .post-head-text h4 {

        font-size: 20px;
    }

    .box-category .post-head-text p {

        font-size: 13px;
    }
}

/* =========================================================
   LIST ITEM
========================================================= */

.box-category .post-lists {

    background: #fff;

    border-radius: 22px;

    padding: 22px;

    margin-bottom: 20px;

    border: 1px solid #eef2f7;

    box-shadow: 0 4px 18px rgba(0, 0, 0, .04);

    transition: .25s ease;
}

.box-category .post-lists:last-child {

    border-bottom: none;
}


/* =========================================================
   IMAGE
========================================================= */

.box-category .image-warper {
    height: 190px;

    border-radius: 14px;

    overflow: hidden;
}

.box-category .image-warper img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: .3s ease;
}

.box-category .post-lists:hover .image-warper img {

    transform: scale(1.03);
}

/* =========================================================
   INFO
========================================================= */

.box-category .post-info {

    height: 100%;

    display: flex;

    flex-direction: column;

    justify-content: center;
}

/* TITLE */

.box-category .post-info h5 {

    margin-bottom: 12px;

    line-height: 1.4;

    font-size: 20px;

    font-weight: var(--font-weight-700);
}

.box-category .post-info h5 a {

    color: var(--default-color);

    text-decoration: none;

    transition: .2s ease;
}

.box-category .post-info h5 a:hover {

    color: var(--gradient-start);
}

/* =========================================================
   META
========================================================= */

.box-category .entry-meta {

    display: flex;

    flex-wrap: wrap;

    gap: 14px;

    margin-bottom: 12px;

    padding: 0;

    list-style: none;
}

.box-category .entry-meta li {

    display: flex;

    align-items: center;

    gap: 6px;

    font-size: 12px;

    color: var(--dark-gray);
}

.box-category .entry-meta li i {

    color: var(--gradient-start);
}

/* =========================================================
   DESCRIPTION
========================================================= */

.box-category .description {

    font-size: 14px;

    line-height: 1.7;

    color: var(--dark-gray);

    margin-bottom: 16px;

    text-align: justify;
}

/* =========================================================
   BUTTON
========================================================= */

.box-category .readmore {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    width: fit-content;

    padding: 9px 16px;

    border-radius: 10px;

    background: rgba(14, 159, 141, .08);

    color: var(--gradient-start);

    font-size: 13px;

    font-weight: 600;

    text-decoration: none;

    transition: .2s ease;
}

.box-category .readmore:hover {

    background: var(--gradient-start);

    color: #fff;
}

/* =========================================================
   PAGINATION
========================================================= */

.box-category .pagination {

    display: flex;

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;

    gap: 8px;

    margin: 0;
}

.box-category .pagination li {

    list-style: none;
}

.box-category .pagination .page-link {

    min-width: 42px;

    height: 42px;

    padding: 0 14px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 10px !important;

    background: #fff;

    border: 1px solid #e5e7eb;

    color: #111827;

    font-size: 13px;

    font-weight: 600;

    text-decoration: none;

    transition: .2s ease;
}

/* HOVER */

.box-category .pagination .page-link:hover {

    background: var(--gradient-start);

    border-color: var(--gradient-start);

    color: #fff;
}

/* ACTIVE */

.box-category .pagination .active .page-link {

    background: var(--gradient-start);

    border-color: var(--gradient-start);

    color: #fff;

    box-shadow: 0 4px 12px rgba(14, 159, 141, .2);
}

/* DISABLED */

.box-category .pagination .disabled .page-link {

    opacity: .5;

    pointer-events: none;

    background: #f9fafb;
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 991px) {

    .box-category .post-info {

        margin-top: 18px;
    }

    .box-category .image-warper {

        height: 200px;
    }
}

@media (max-width: 767px) {

    .box-category {

        border-radius: 16px;
    }

    .box-category .post-head {

        padding: 18px;
    }

    .box-category .post-head h4 {

        font-size: 16px;
    }

    .box-category .post-lists {

        padding: 18px;
    }

    .box-category .image-warper {

        height: 180px;
    }

    .box-category .post-info h5 {

        font-size: 17px;
    }

    .box-category .description {

        font-size: 13px;
    }

    .box-category .post-footer {

        padding: 18px;
    }
}

/* =========================================================
   EMPTY SEARCH
========================================================= */

.empty-search-state {

    padding: 70px 30px;

    text-align: center;
}

/* ICON */

.empty-search-icon {

    width: 90px;

    height: 90px;

    margin: 0 auto 24px;

    border-radius: 24px;

    background: rgba(14, 159, 141, .08);

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--gradient-start);

    font-size: 42px;
}

/* TITLE */

.empty-search-state h4 {

    font-size: 26px;

    font-weight: var(--font-weight-700);

    color: #111827;

    margin-bottom: 12px;
}

/* DESCRIPTION */

.empty-search-state p {

    max-width: 500px;

    margin: 0 auto 24px;

    font-size: 15px;

    line-height: 1.8;

    color: #6b7280;
}

/* BUTTON */

.empty-search-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 12px 22px;

    border-radius: 14px;

    background: var(--gradient-start);

    color: #fff;

    font-size: 14px;

    font-weight: 600;

    text-decoration: none;

    transition: .25s ease;
}

.empty-search-button:hover {

    color: #fff;

    transform: translateY(-2px);

    box-shadow: 0 10px 24px rgba(14, 159, 141, .18);
}

/* MOBILE */

@media (max-width: 767px) {

    .empty-search-state {

        padding: 50px 20px;
    }

    .empty-search-icon {

        width: 72px;

        height: 72px;

        font-size: 34px;

        border-radius: 18px;
    }

    .empty-search-state h4 {

        font-size: 22px;
    }

    .empty-search-state p {

        font-size: 14px;
    }
}


/* ==========================================
   REVIEW SECTION
========================================== */

.review-section {

    padding: 80px 0;

    background: #f8fafc;

    overflow: hidden;
}

/* HEADER */

.review-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 60px;
}

/* NAV */
.review-nav {

    display: flex;

    gap: 14px;
}

.review-btn {

    width: 58px;
    height: 58px;

    border-radius: 50%;

    border: 1.5px solid rgba(14, 159, 141, .45);

    background: transparent;

    color: var(--gradient-start);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 22px;

    transition: .3s ease;
}

.review-btn:hover {

    background: var(--gradient-start);

    color: var(--contrast-color);
}

/* SLIDER */

.review-slider {

    display: flex;

    width: 100%;
}

/* ITEM */

.review-item {

    display: flex;

    align-items: center;

    gap: 44px;

    min-width: calc(50% - 35px);
    box-sizing: border-box;
    /* min-width: 100%; */
}

/* IMAGE */

.review-image {

    width: 200px;
    height: 200px;

    border-radius: 24px;

    overflow: hidden;

    flex-shrink: 0;

    background: #d1d5db;
}

.review-image img {

    width: 100%;
    height: 100%;

    object-fit: cover;
}

/* CONTENT */

.review-content {

    flex: 1;
}

/* QUOTE */

.quote-icon {

    font-size: 48px;

    color: rgba(14, 159, 141, .7);

    line-height: 1;

    margin-bottom: 20px;
}

/* TEXT */

.review-content p {

    font-size: 16px;

    line-height: 1.5;

    color: #4b5563;

    margin-bottom: 34px;
}

/* USER */

.review-user {

    display: flex;

    align-items: center;

    gap: 14px;

    padding-top: 20px;

    border-top: 1px solid #e5e7eb;
}

.review-user strong {

    font-size: 16px;

    color: #111827;
}

.review-user span {

    color: var(--secondary-color);

    font-size: 16px;
}

.review-slider-wrapper {
    overflow: hidden;
    width: 100%;
}


/* ==========================================
   LARGE TABLET
========================================== */
@media (max-width: 1199px) {

    .review-slider {
        gap: 50px;
    }

    .review-item {
        gap: 30px;
        min-width: calc(50% - 25px);
    }

    .review-image {
        width: 180px;
        height: 180px;
    }

    .quote-icon {
        font-size: 40px;
        margin-bottom: 16px;
    }

    .review-content p {
        font-size: 15px;
        margin-bottom: 24px;
    }
}

/* ==========================================
   TABLET
========================================== */
@media (max-width: 991px) {

    .review-header {
        margin-bottom: 40px;
    }

    .review-slider {
        gap: 30px;
    }

    .review-item {
        min-width: 100%;
        gap: 24px;
        align-items: center;
    }

    .review-image {
        width: 220px;
        height: 220px;
        border-radius: 20px;
    }

    .review-content p {
        font-size: 16px;
        line-height: 1.7;
        margin-bottom: 24px;
    }
}

/* ==========================================
   MOBILE
========================================== */
@media (max-width: 768px) {

    .review-section {
        padding: 60px 0;
    }

    .review-slider-wrapper {
        width: 100%;
        overflow: hidden;
    }

    .review-slider {
        display: flex;
        gap: 0;
        width: 100%;
    }

    .review-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        margin-bottom: 30px;
    }

    .review-nav {
        width: 100%;
    }

    .review-btn {
        width: 48px;
        height: 48px;
        font-size: 18px;
    }

    .review-item {
        flex: 0 0 100%;
        width: 100%;
        min-width: 100%;
        max-width: 100%;

        padding: 0;
        margin: 0;

        box-sizing: border-box;

        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .review-image {
        width: 100%;
        height: 240px;
        border-radius: 18px;
        overflow: hidden;
    }

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

    .review-content {
        width: 100%;
        flex: none;
    }

    .quote-icon {
        font-size: 34px;
        margin-bottom: 12px;
    }

    .review-content p {
        font-size: 15px;
        line-height: 1.7;
        margin-bottom: 20px;
    }

    .review-user {
        width: 100%;
        gap: 10px;
        padding-top: 16px;
    }

    .review-user strong,
    .review-user span {
        font-size: 14px;
    }
}

/* ==========================================
   SMALL MOBILE
========================================== */
@media (max-width: 576px) {

    .review-section {
        padding: 50px 0;
    }

    .review-image {
        height: 220px;
    }

    .review-content p {
        font-size: 14px;
        line-height: 1.8;
    }

    .review-user {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
}

/* =========================================================
   FEEDBACK SECTION
========================================================= */

.feedback {

    margin-top: 50px;

    padding: 50px 0;

    background: #edf5f3;

    border-top: 1px solid rgba(0, 0, 0, .04);

    border-bottom: 1px solid rgba(0, 0, 0, .04);
}

/* =========================================================
   CONTAINER
========================================================= */

.feedback .container {

    max-width: 100%;

    padding: 0;
}

/* =========================================================
   HIDE HEADER
========================================================= */

.feedback-header {

    display: none;
}

/* =========================================================
   ROW
========================================================= */

.feedback .row {

    --bs-gutter-x: 0;

    --bs-gutter-y: 0;
}

/* =========================================================
   COLUMN
========================================================= */

.feedback .col-md-4 {

    border-right: 1px solid rgba(0, 0, 0, .05);
}

.feedback .col-md-4:last-child {

    border-right: none;
}

/* =========================================================
   LINK
========================================================= */

.feedback .menu-link {

    text-decoration: none;

    color: inherit;

    display: block;

    height: 100%;
}

/* =========================================================
   CARD
========================================================= */

.feedback .menu-card {

    position: relative;

    display: flex;

    align-items: center;

    gap: 18px;

    min-height: 96px;

    padding: 26px 42px;

    background: transparent;

    transition: .25s ease;
}

.feedback .menu-card:hover {

    background: rgba(255, 255, 255, .32);
}

/* =========================================================
   ICON
========================================================= */

.feedback .menu-card .icon {

    display: flex;

    align-items: center;

    justify-content: center;

    color: #7a9ca7;

    font-size: 34px;

    flex-shrink: 0;
}

/* HAPUS BOX ICON */

.feedback .menu-card.survey .icon,
.feedback .menu-card.keluhan .icon,
.feedback .menu-card.lapor .icon {

    background: transparent;
}

/* =========================================================
   CONTENT
========================================================= */

.feedback .menu-content {

    flex: 1;

    min-width: 0;
}

/* =========================================================
   TITLE
========================================================= */

.feedback .menu-card h5 {

    margin: 0 0 2px;

    font-size: 16px;

    font-weight: 800;

    color: #111827;

    line-height: 1.3;
}

/* =========================================================
   DESCRIPTION
========================================================= */

.feedback .menu-card p {

    margin: 0;

    color: #667085;

    font-size: 13px;

    line-height: 1.5;
}

/* =========================================================
   ACTION
========================================================= */

.feedback .menu-card .action {

    color: #111827;

    font-size: 22px;

    flex-shrink: 0;

    transition: .25s ease;
}

.feedback .menu-card:hover .action {

    transform: translateX(4px);
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .feedback .menu-card {

        min-height: 88px;

        padding: 22px 26px;

        gap: 14px;
    }

    .feedback .menu-card .icon {

        font-size: 28px;
    }

    .feedback .menu-card h5 {

        font-size: 15px;
    }

    .feedback .menu-card p {

        font-size: 12px;
    }

    .feedback .menu-card .action {

        font-size: 20px;
    }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    .feedback .col-md-4 {

        border-right: none;

        border-bottom: 1px solid rgba(0, 0, 0, .05);
    }

    .feedback .menu-card {

        min-height: auto;

        padding: 18px 18px;

        gap: 14px;
    }

    .feedback .menu-card .icon {

        font-size: 24px;
    }

    .feedback .menu-card h5 {

        font-size: 14px;
    }

    .feedback .menu-card p {

        font-size: 11px;

        line-height: 1.4;
    }

    .feedback .menu-card .action {

        font-size: 18px;
    }
}

/* =========================================================
   DETAIL POST
========================================================= */

.post-detail-section {
    padding: 90px 0;

    background: #f8fafc;
}

/* CARD */
.post-detail-section .post-detail-card {
    background: #fff;

    border-radius: 28px;

    overflow: hidden;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, .06);
}

/* IMAGE */
.post-detail-section .post-thumbnail {
    height: 460px;

    overflow: hidden;
}

.post-detail-section .post-thumbnail img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

/* BODY */
.post-detail-section .post-body {
    padding: 40px;
}

/* META */
.post-detail-section .post-meta {
    display: flex;

    flex-wrap: wrap;

    gap: 18px;

    margin-bottom: 22px;

    color: #6b7280;

    font-size: 14px;
}

.post-detail-section .post-meta span {
    display: flex;
    align-items: center;

    gap: 8px;
}

/* TITLE */
.post-detail-section .post-title {
    font-size: 30px;
    font-weight: 800;

    line-height: 1.4;

    color: #111827;

    margin-bottom: 30px;
}

/* CONTENT */
.post-detail-section .post-content {
    font-size: 16px;

    line-height: 2;

    color: #374151;
}

.post-detail-section .post-content img {
    max-width: 100%;

    border-radius: 18px;

    margin: 24px 0;
}

.post-detail-section .post-content iframe {
    max-width: 100%;
}


.post-detail-section .post-nav-card {
    background: #fff;

    border-radius: 22px;

    padding: 24px;

    text-decoration: none;

    box-shadow:
        0 10px 24px rgba(0, 0, 0, .05);

    transition: .3s ease;
}

.post-detail-section .post-nav-card:hover {
    transform: translateY(-4px);
}

.post-detail-section .post-nav-card small {
    display: block;

    color: #6b7280;

    margin-bottom: 8px;
}

.post-detail-section .post-nav-card strong {
    color: #111827;

    line-height: 1.6;
}

/* SIDEBAR */
.post-detail-section .sidebar-widget {
    background: #fff;

    border-radius: 24px;

    padding: 28px;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, .06);

    position: sticky;

    top: 100px;
}

.post-detail-section .sidebar-widget h4 {
    font-size: 24px;
    font-weight: var(--font-weight-700);

    margin-bottom: 24px;
}

/* RELATED */
.post-detail-section .related-post {
    display: flex;

    gap: 14px;

    margin-bottom: 18px;

    text-decoration: none;

    transition: .3s ease;
}

.post-detail-section .related-post:hover {
    transform: translateX(4px);
}

.post-detail-section .related-post img {
    width: 90px;
    height: 90px;

    border-radius: 16px;

    object-fit: cover;

    flex-shrink: 0;
}

.post-detail-section .related-post h6 {
    font-size: 15px;

    line-height: 1.5;

    color: #111827;

    margin-bottom: 8px;
}

.post-detail-section .related-post span {
    font-size: 13px;

    color: #6b7280;
}

/* MOBILE */
@media (max-width: 767px) {

    .post-detail-section {
        padding: 60px 0;
    }

    .post-detail-section .post-thumbnail {
        height: 260px;
    }

    .post-detail-section .post-body {
        padding: 24px;
    }

    .post-detail-section .post-title {
        font-size: 30px;
    }


    .post-detail-section .sidebar-widget {
        margin-top: 30px;

        position: relative;

        top: 0;
    }
}

/* =========================================================
   COMMENT SECTION
========================================================= */

#comments,
#form-comment {
    margin-top: 40px;
}

#comments h4,
#form-comment h4 {
    font-size: 28px;
    font-weight: var(--font-weight-700);

    color: #111827;

    margin-bottom: 24px;
}

/* =========================================================
   COMMENT WRAPPER
========================================================= */

.entry-comment,
.form-comment {
    background: #fff;

    border-radius: 28px;

    padding: 32px;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, .06);
}

/* =========================================================
   COMMENT ITEM
========================================================= */

.list-comment .media {
    display: flex;

    gap: 18px;

    padding-bottom: 28px;

    margin-bottom: 28px;

    border-bottom: 1px solid #edf2f7;
}

.list-comment .media:last-child {
    border-bottom: none;

    margin-bottom: 0;

    padding-bottom: 0;
}

/* AVATAR */
.list-comment .media img {
    width: 52px;
    height: 52px;

    border-radius: 50%;

    object-fit: cover;

    flex-shrink: 0;

    border: 3px solid #f1f5f9;
}

/* =========================================================
   COMMENT BODY
========================================================= */

.comment-name {
    display: flex;
    align-items: center;

    flex-wrap: wrap;

    gap: 10px;

    font-size: 17px;
    font-weight: var(--font-weight-700);

    color: #111827;

    margin-bottom: 10px;
}

.comment-name small {
    font-size: 13px;

    color: #6b7280 !important;

    font-weight: 400;
}

.comment-body p {
    font-size: 15px;

    line-height: 1.9;

    color: #4b5563;

    margin-bottom: 14px;
}

/* REPLY BUTTON */
.reply_comment {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 8px 18px;

    border-radius: 30px;

    background: rgba(14, 159, 141, .08);

    color: var(--gradient-start);

    font-size: 13px;
    font-weight: 600;

    text-decoration: none !important;

    transition: .25s ease;
}

.reply_comment:hover {
    background: var(--gradient-start);

    color: #fff;

    transform: translateY(-2px);
}

/* =========================================================
   CHILD COMMENT
========================================================= */

.media .media {
    margin-top: 24px;

    padding: 24px;

    border-radius: 22px;

    background: #f8fafc;

    border: 1px solid #edf2f7;
}

/* =========================================================
   FORM
========================================================= */

.form-comment .form-group {
    margin-bottom: 22px;
}

.form-comment label {
    display: block;

    font-size: 14px;
    font-weight: 600;

    color: #374151;

    margin-bottom: 10px;
}

/* INPUT */
.form-comment .form-control {
    width: 100%;

    height: 54px;

    border-radius: 16px;

    border: 1px solid #dbe3ec;

    padding: 0 18px;

    font-size: 15px;

    color: #111827;

    background: #fff;

    box-shadow: none;

    transition: .25s ease;
}

/* TEXTAREA */
.form-comment textarea.form-control {
    height: 150px;

    padding-top: 16px;

    resize: none;
}

.form-comment .form-control:focus {
    border-color: var(--gradient-start);

    box-shadow:
        0 0 0 4px rgba(14, 159, 141, .12);
}

/* =========================================================
   BUTTON
========================================================= */

.btn-send {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    padding: 14px 28px;

    border: none;

    border-radius: 16px;

    background: var(--gradient-start);

    color: #fff;

    font-size: 15px;
    font-weight: 600;

    transition: .3s ease;
}

.btn-send:hover {
    transform: translateY(-3px);

    box-shadow:
        0 12px 24px rgba(14, 159, 141, .22);
}

/* =========================================================
   ALERT
========================================================= */

.alert {
    border: none;

    border-radius: 18px;

    padding: 16px 20px;

    margin-bottom: 24px;
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .entry-comment,
    .form-comment {
        padding: 22px;
    }

    #comments h4,
    #form-comment h4 {
        font-size: 24px;
    }

    .comment-name {
        flex-direction: column;

        align-items: flex-start;

        gap: 4px;
    }

    .list-comment .media {
        gap: 14px;
    }

    .media .media {
        padding: 18px;
    }
}


/* =========================================================
   COMMENT ALERT
========================================================= */

.form-comment .alert {
    position: relative;

    border: none;

    border-radius: 20px;

    padding: 18px 22px;

    margin-bottom: 24px;

    font-size: 14px;

    line-height: 1.8;

    box-shadow:
        0 10px 24px rgba(0, 0, 0, .05);
}

/* SUCCESS */
.form-comment .alert-success {
    background: rgba(34, 197, 94, .10);

    color: #166534;

    border-left: 5px solid #22c55e;
}

/* DANGER */
.form-comment .alert-danger {
    background: rgba(239, 68, 68, .10);

    color: #991b1b;

    border-left: 5px solid #ef4444;
}

/* WARNING */
.form-comment .alert-warning {
    background: rgba(245, 158, 11, .10);

    color: #92400e;

    border-left: 5px solid #f59e0b;
}

/* INFO */
.form-comment .alert-info {
    background: rgba(59, 130, 246, .10);

    color: #1d4ed8;

    border-left: 5px solid #3b82f6;
}

/* LIST ERROR */
.form-comment .alert p,
.form-comment .alert ul {
    margin-bottom: 0;
}

.form-comment .alert ul {
    padding-left: 18px;
}




/* =========================================================
   DETAIL PAGES
========================================================= */

.pages-detail-section {
    position: relative;

    padding: 50px 0;
}

/* =========================================================
   CARD
========================================================= */

.pages-detail-card {
    background: #fff;

    border-radius: var(--radius-card);

    overflow: hidden;

    box-shadow: var(--shadow-card);

    position: relative;
}

/* =========================================================
   IMAGE
========================================================= */

.pages-thumbnail {
    position: relative;

    height: 480px;

    overflow: hidden;
}

.pages-thumbnail img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: .5s ease;
}

.pages-detail-card:hover .pages-thumbnail img {
    transform: scale(1.03);
}

/* OVERLAY */
.pages-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(to top,
            rgba(0, 0, 0, .45),
            rgba(0, 0, 0, .05));
}

/* =========================================================
   BODY
========================================================= */

.pages-body {
    padding: 50px;
}

/* BADGE */
.pages-badge {
    display: inline-flex;
    align-items: center;

    gap: 10px;

    padding: 10px 18px;

    border-radius: 40px;

    background:
        rgba(14, 159, 141, .10);

    color: var(--gradient-start);

    font-size: 14px;
    font-weight: 600;

    margin-bottom: 26px;
}

.pages-badge i {
    font-size: 18px;
}

/* =========================================================
   TITLE
========================================================= */

.pages-title {
    font-size: 32px;
    font-weight: 800;

    line-height: 1.3;

    color: #111827;

    margin-bottom: 24px;
}

/* LINE */
.pages-line {
    width: 90px;
    height: 5px;

    border-radius: 10px;

    background:
        linear-gradient(90deg,
            var(--gradient-start), var(--primary-gradient-end));

    margin-bottom: 40px;
}

/* =========================================================
   CONTENT
========================================================= */

.pages-content {
    font-size: 14px;

    line-height: 2;

    color: var(--dark-gray);
    text-align: justify;
}

/* CONTENT IMAGE */
.pages-content img {
    max-width: 100% !important;

    height: auto !important;

    border-radius: var(--radius-container);

    margin: 28px auto;

    display: block;

    box-shadow: var(--shadow-card)
}

/* CONTENT IFRAME */
.pages-content iframe {
    max-width: 100%;
}

/* CONTENT TABLE */
.pages-content table {
    width: 100% !important;

    margin: 24px 0;

    border-collapse: collapse;
}

.pages-content table td,
.pages-content table th {
    border: 1px solid #e5e7eb;

    padding: 12px;
}

/* HEADINGS */
.pages-content h1,
.pages-content h2,
.pages-content h3,
.pages-content h4,
.pages-content h5 {
    color: #111827;

    margin-top: 34px;
    margin-bottom: 18px;

    line-height: 1.5;

    font-weight: var(--font-weight-700);
}

/* PARAGRAPH */
.pages-content p {
    margin-bottom: 22px;
}

/* LIST */
.pages-content ul,
.pages-content ol {
    padding-left: 24px;

    margin-bottom: 22px;
}

.pages-content li {
    margin-bottom: 10px;
}

/* LINKS */
.pages-content a {
    color: var(--gradient-start);

    text-decoration: none;

    font-weight: 600;
}

.pages-content a:hover {
    text-decoration: underline;
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 991px) {

    .pages-title {
        font-size: 40px;
    }

    .pages-thumbnail {
        height: 380px;
    }
}

@media (max-width: 767px) {

    .pages-detail-section {
        padding: 60px 0;
    }

    .pages-thumbnail {
        height: 250px;
    }

    .pages-body {
        padding: 28px 22px;
    }

    .pages-title {
        font-size: 30px;
    }

    .pages-content {
        font-size: 15px;

        line-height: 1.9;
    }

    .pages-line {
        margin-bottom: 28px;
    }
}

/* =========================================================
   DOKTER PAGE
========================================================= */

.spesialis-page {
    position: relative;

    padding: 80px 0;

    background:
        linear-gradient(to bottom,
            #f8fafc,
            #ffffff);
}

/* =========================================================
   HERO
========================================================= */

.spesialis-page .spesialis-hero {
    max-width: 760px;

    margin: 0 auto 50px;
}

.spesialis-page .hero-badge {
    display: inline-flex;
    align-items: center;

    padding: 10px 18px;

    border-radius: var(--radius-container);

    background:
        rgba(14, 159, 141, .08);

    color: var(--gradient-start);

    font-size: var(--text-sm);
    font-weight: var(--font-weight-700);

    margin-bottom: 24px;
}

.spesialis-page h1 {
    font-size: var(--text-3xl);
    font-weight: var(--font-weight-700);

    line-height: 1.3;

    color: #111827;

    margin-bottom: 20px;
}

.spesialis-page p {
    color: var(--dark-gray);

    line-height: 1.9;

    font-size: var(--text-lg);
}

.spesialis-page .spesialis-item {
    display: flex;
}


.spesialis-page .spesialis-item .spesialis-card {
    width: 100%;
}

/* =========================================================
   SEARCH
========================================================= */

.spesialis-search {
    margin-bottom: 50px;
}

.search-box {
    position: relative;

    max-width: 650px;

    margin: 0 auto;
}

.search-box i {
    position: absolute;

    top: 50%;
    left: 22px;

    transform: translateY(-50%);

    color: #9ca3af;

    font-size: var(--text-md);
}

.search-box input {
    width: 100%;
    height: 65px;

    border: none;

    border-radius: 60px;

    padding: 0 24px 0 60px;

    background: #fff;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, .05);

    font-size: 15px;
}

/* =========================================================
   CARD
========================================================= */

.spesialis-page .spesialis-card {
    position: relative;

    display: flex;

    flex-direction: column;
    justify-content: flex-start;

    height: 100%;

    background: #fff;

    border-radius: var(--radius-container);

    padding: 34px 28px;

    overflow: hidden;

    text-decoration: none;
    text-align: center;

    border:
        1px solid rgba(0, 0, 0, .04);

    box-shadow: var(--shadow-card);

    transition: var(--transition)
}

.spesialis-page .spesialis-card:hover {
    transform: translateY(-8px);

    box-shadow: var(--shadow-hover)
}

/* =========================================================
   ICON
========================================================= */

.spesialis-page .spesialis-icon {
    position: relative;

    width: 90px;
    height: 90px;

    border-radius: 28px;

    background:
        linear-gradient(135deg,
            rgba(14, 159, 141, .10),
            rgba(14, 159, 141, .03));

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0 auto 24px;
}

.spesialis-page .spesialis-icon img {
    width: 56px;
    height: 56px;

    object-fit: contain;
}

/* =========================================================
   CONTENT
========================================================= */
.spesialis-page .spesialis-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.spesialis-page .spesialis-content h4 {
    color: #111827;

    font-size: var(--text-md);
    font-weight: var(--font-weight-700);

    line-height: 1.5;

    margin-bottom: 12px;

    min-height: 58px;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

    overflow: hidden;
}

.spesialis-page .spesialis-content p {
    font-size: 14px;
    flex-grow: 1;
    margin-bottom: 26px;
}

/* =========================================================
   BUTTON
========================================================= */

.spesialis-page .btn-lihat {
    display: inline-flex;
    justify-content: center;
    align-items: center;

    gap: 10px;

    color: var(--gradient-start);

    font-size: 14px;
    font-weight: var(--font-weight-700);

    transition: .25s ease;
}

.spesialis-page .spesialis-card:hover .btn-lihat {
    gap: 14px;
}

/* =========================================================
   EMPTY
========================================================= */

.spesialis-page .empty-state {
    text-align: center;

    padding: 80px 20px;
}

.spesialis-page .empty-state img {
    width: 180px;

    margin-bottom: 24px;
}

.spesialis-page .empty-state h4 {
    color: #6b7280;
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 991px) {

    .spesialis-page h1 {
        font-size: 42px;
    }
}

@media (max-width: 767px) {

    .spesialis-page {
        padding: 70px 0;
    }

    .spesialis-page h1 {
        font-size: 32px;
    }

    .spesialis-page .spesialis-card {
        border-radius: 24px;

        padding: 28px 24px;
    }

    .spesialis-page .search-box input {
        height: 58px;
    }
}



/* =========================================================
   JADWAL PAGE
========================================================= */

.jadwal-page {
    padding: 55px 0;
}

/* =========================================================
   HERO
========================================================= */

.jadwal-page .jadwal-hero {
    max-width: 700px;
    margin: 0 auto 40px;
}

.jadwal-page .hero-badge {
    display: inline-flex;
    align-items: center;

    padding: 10px 18px;

    border-radius: var(--radius-container);

    background:
        rgba(14, 159, 141, .08);

    color: var(--gradient-start);

    font-size: var(--text-sm);
    font-weight: var(--font-weight-700);

    margin-bottom: 22px;
}

.jadwal-page h1 {
    font-size: var(--text-3xl);
    font-weight: var(--font-weight-700);

    line-height: 1;

    color: #111827;

    margin-bottom: 20px;
}

.jadwal-page .jadwal-hero p {
    color: var(--dark-gray);
    line-height: 1.8;
    font-size: var(--text-md);
}

/* =========================================================
   CARD
========================================================= */

.jadwal-card {
    position: relative;

    background: #fff;

    border-radius: var(--radius-card);

    padding: 15px;

    overflow: hidden;
    box-shadow: var(--shadow-card);
}

/* =========================================================
   FOTO
========================================================= */

.jadwal-page .dokter-photo {
    display: flex;
    justify-content: center;
}

.jadwal-page .dokter-photo img {
    width: 150px;
    height: 150px;

    object-fit: cover;

    border-radius: var(--radius-card);

    background: #f8fafc;

    padding: 10px;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, .05);
}

/* =========================================================
   CONTENT
========================================================= */

.jadwal-page .jadwal-content {
    height: 100%;
}

.jadwal-page .dokter-info {
    margin-bottom: 30px;
}

.jadwal-page .dokter-info h3 {
    font-size: var(--text-lg);
    font-weight: var(--font-weight-700);
    line-height: 1.4;
    color: var(--default-color);
    margin-bottom: 12px;
}

.jadwal-page .dokter-info span {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;

    border-radius: var(--radius-container);

    background:
        rgba(14, 159, 141, .08);

    color: var(--gradient-start);

    font-size: var(--text-xs);
    font-weight: var(--font-weight-600);
}

/* =========================================================
   TABLE
========================================================= */

.table-jadwal {
    width: 100%;

    margin-bottom: 12px;

    border-collapse: separate;

    border-spacing: 0;
}

.table-jadwal thead th {
    background: var(--gradient-start);

    color: var(--contrast-color);

    text-align: center;

    font-size: var(--text-sm);
    font-weight: var(--font-weight-600);
    padding: 15px;

    border: none;
}

.table-jadwal thead th:first-child {
    border-top-left-radius: var(--radius-container);
}

.table-jadwal thead th:last-child {
    border-top-right-radius: var(--radius-container);
}

.table-jadwal tbody td {
    text-align: center;

    vertical-align: middle;

    padding: 18px 14px;

    background: #fff;

    color: var(--dark-gray);

    border:
        1px solid #f1f5f9;
}

.table-jadwal tbody tr:hover td {
    background:
        rgba(14, 159, 141, .03);
}

/* =========================================================
   UPDATE
========================================================= */

.jadwal-page .jadwal-update {
    display: inline-flex;
    align-items: center;

    gap: 10px;

    padding: 12px 18px;

    border-radius: var(--radius-card);

    background:
        rgba(14, 159, 141, .05);

    color: var(--dark-gray);

    font-size: var(--text-sm);
}

.jadwal-page .jadwal-update i {
    color: var(--gradient-start);

    font-size: var(--text-md);
}

/* =========================================================
   EMPTY STATE
========================================================= */

.jadwal-page .empty-state {
    text-align: center;

    padding: 80px 20px;
}

.jadwal-page .empty-state img {
    width: 180px;

    margin-bottom: 24px;
}

.jadwal-page .empty-state h4 {
    color: #374151;

    font-size: 24px;
    font-weight: var(--font-weight-700);

    margin-bottom: 12px;
}

.jadwal-page .empty-state p {
    color: #6b7280;
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 991px) {

    .jadwal-page h1 {
        font-size: var(--text-lg);
    }

    .jadwal-page .dokter-photo {
        margin-bottom: 30px;
    }

    .jadwal-page .dokter-photo img {
        width: 180px;
        height: 180px;
    }

    .jadwal-page .dokter-info {
        text-align: center;
    }
}

@media (max-width: 767px) {

    .jadwal-page {
        padding: 70px 0;
    }

    .jadwal-page h1 {
        font-size: var(--text-lg);
    }

    .jadwal-card {
        padding: 24px;
        border-radius: var(--radius-card);
    }

    .jadwal-page .dokter-info h3 {
        font-size: 24px;
    }

    .table-responsive {
        overflow-x: auto;
    }

    .table-jadwal {
        min-width: 700px;
    }

    .table-jadwal thead th,
    .table-jadwal tbody td {
        font-size: var(--text-sm);

        padding: 14px 10px;
    }

    .jadwal-page .jadwal-update {
        width: 100%;

        justify-content: center;

        text-align: center;
    }
}


/* =========================================================
   404 PAGE
========================================================= */

.error-section {
    position: relative;

    min-height: 80vh;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 80px 0;

    overflow: hidden;

    background:
        linear-gradient(135deg,
            rgba(14, 159, 141, .08),
            rgba(108, 196, 161, .06));
}

/* =========================================================
   WRAPPER
========================================================= */

.error-wrapper {
    position: relative;

    background: rgba(255, 255, 255, .95);

    border-radius: var(--radius-card);

    padding: 70px 50px;

    text-align: center;

    overflow: hidden;

    box-shadow:
        0 20px 60px rgba(0, 0, 0, .08);

    backdrop-filter: blur(16px);

    max-width: 760px;

    margin: auto;
}

/* glow */
.error-wrapper::before {
    content: "";

    position: absolute;

    width: 240px;
    height: 240px;

    border-radius: 50%;

    background:
        rgba(14, 159, 141, .08);

    top: -120px;
    right: -80px;
}

/* =========================================================
   ICON
========================================================= */

.error-icon {
    position: relative;

    width: 100px;
    height: 100px;

    border-radius: var(--radius-card);

    margin: 0 auto 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        linear-gradient(135deg,
            rgba(14, 159, 141, .12),
            rgba(14, 159, 141, .04));
}

.error-icon i {
    font-size: 50px;

    color: var(--gradient-start);
}

/* =========================================================
   CODE
========================================================= */

.error-code {
    position: relative;

    font-size: 90px;
    font-weight: 900;

    line-height: 1;

    color: var(--gradient-start);

    margin-bottom: 18px;
}

/* =========================================================
   TITLE
========================================================= */

.error-wrapper h1 {
    position: relative;

    font-size: 36px;
    font-weight: var(--font-weight-700);

    line-height: 1.4;

    color: #111827;

    margin-bottom: 20px;
}

/* =========================================================
   DESCRIPTION
========================================================= */

.error-wrapper p {
    position: relative;

    max-width: 560px;

    margin: auto;

    font-size: 17px;

    line-height: 2;

    color: #6b7280;

    margin-bottom: 36px;
}

/* =========================================================
   BUTTON
========================================================= */

.error-actions {
    position: relative;
}

.btn-home {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    padding: 16px 32px;

    border-radius: var(--radius-container);

    background:
        linear-gradient(135deg,
            var(--gradient-start), var(--primary-gradient-end));

    color: #fff !important;

    font-size: 15px;
    font-weight: 600;

    text-decoration: none !important;

    transition: .3s ease;

    box-shadow: var(--shadow-card);
}

.btn-home:hover {
    transform: translateY(-4px);

    color: #fff !important;

    box-shadow:
        0 18px 36px rgba(14, 159, 141, .35);
}

.btn-home i {
    font-size: 20px;
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .error-section {
        min-height: auto;

        padding: 70px 0;
    }

    .error-wrapper {
        padding: 45px 24px;

        border-radius: 28px;
    }

    .error-icon {
        width: 90px;
        height: 90px;

        border-radius: 28px;
    }

    .error-icon i {
        font-size: 48px;
    }

    .error-code {
        font-size: 78px;
    }

    .error-wrapper h1 {
        font-size: 28px;
    }

    .error-wrapper p {
        font-size: 15px;

        line-height: 1.9;
    }

    .btn-home {
        width: 100%;
    }
}

/* =========================================================
   FAQ PAGE
========================================================= */

.faq-page {

    position: relative;

    background: #f8fafc;

    overflow: hidden;
}

/* =========================================================
   HEADER
========================================================= */

.faq-header {

    max-width: 760px;

    margin-inline: auto;
}

.faq-header h1 {

    font-size: var(--text-3xl);

    font-weight: var(--font-weight-700);

    color: var(--gradient-start);

    margin-bottom: 14px;

    line-height: 120%;
}

.faq-header p {

    font-size: var(--text-md);

    color: var(--dark-gray);

    line-height: 180%;
}

/* =========================================================
   SEARCH
========================================================= */

.faq-search {

    max-width: 700px;

    margin-inline: auto;
}

.faq-search .form-control {

    height: 60px;

    border-radius: var(--radius-container);

    border: 1px solid #e2e8f0;

    padding-inline: 22px;

    font-size: 15px;

    background: #fff;

    box-shadow: none;

    transition: var(--transition);

}

.faq-search .form-control:focus {

    border-color: var(--gradient-start);

    box-shadow: 0 0 0 4px rgba(37, 99, 235, .08);
}

/* =========================================================
   CATEGORY
========================================================= */

.faq-category {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 12px;
}

.faq-filter {

    border: none;

    background: #fff;

    color: var(--dark-gray);

    font-size: var(--text-sm);

    font-weight: var(--font-weight-600);

    padding: 12px 20px;

    border-radius: var(--radius-container);

    border: 1px solid #e2e8f0;

    transition: var(--transition);

    cursor: pointer;
}

.faq-filter:hover {

    background: var(--gradient-start);

    color: #fff;

    border-color: var(--gradient-start);
}

.faq-filter.active {

    background: var(--gradient-start);

    color: #fff;

    border-color: var(--gradient-start);

    box-shadow: 0 10px 25px rgba(37, 99, 235, .18);
}

/* =========================================================
   ACCORDION
========================================================= */

.faq-accordion {

    max-width: 950px;

    margin-inline: auto;
}

.faq-accordion .accordion-item {

    border: none;

    border-radius: var(--radius-container);

    overflow: hidden;

    background: #fff;

    box-shadow: 0 6px 22px rgba(15, 23, 42, .05);

    transition: var(--transition);
}

.faq-accordion .accordion-item:hover {

    transform: translateY(-2px);

    box-shadow: 0 10px 30px rgba(15, 23, 42, .08);
}

/* =========================================================
   BUTTON
========================================================= */

.faq-accordion .accordion-button {

    position: relative;

    background: #fff;

    color: #0f172a;

    font-size: 16px;

    font-weight: var(--font-weight-700);

    line-height: 160%;

    padding: 24px 70px 24px 24px;

    box-shadow: none !important;
}

/* ACTIVE */

.faq-accordion .accordion-button:not(.collapsed) {

    background: var(--gradient-start);

    color: #fff;
}

/* REMOVE DEFAULT ICON */

.faq-accordion .accordion-button::after {

    display: none;
}

/* CUSTOM ICON */

.faq-accordion .accordion-button::before {

    content: "+";

    position: absolute;

    right: 24px;

    top: 50%;

    transform: translateY(-50%);

    width: 34px;

    height: 34px;

    border-radius: 50%;

    background: rgba(37, 99, 235, .08);

    color: var(--gradient-start);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 22px;

    font-weight: 500;

    transition: var(--transition);
}

/* ACTIVE ICON */

.faq-accordion .accordion-button:not(.collapsed)::before {

    content: "–";

    background: rgba(255, 255, 255, .18);

    color: #fff;
}

/* =========================================================
   BODY
========================================================= */

.faq-accordion .accordion-body {

    padding: 20px 24px 10px;

    background: #fff;

    color: var(--dark-gray);

    line-height: 1.4;

    font-size: var(--text-md);
}

/* =========================================================
   EMPTY STATE
========================================================= */

.faq-empty {

    text-align: center;

    padding: 50px 20px;

    color: var(--dark-gray);
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 991px) {

    .faq-header h1 {

        font-size: 38px;
    }
}

@media (max-width: 768px) {

    .faq-page {

        padding: 60px 0;
    }

    .faq-header h1 {

        font-size: 30px;
    }

    .faq-header p {

        font-size: var(--text-sm);
    }

    .faq-search .form-control {

        height: 54px;

        font-size: var(--text-sm);
    }

    .faq-filter {

        font-size: var(--text-sm);

        padding: 10px 16px;
    }

    .faq-accordion .accordion-button {

        font-size: var(--text-md);

        padding: 20px 58px 20px 18px;
    }

    .faq-accordion .accordion-button::before {

        right: 18px;

        width: 30px;

        height: 30px;

        font-size: 18px;
    }

    .faq-accordion .accordion-body {

        padding: 0 18px 20px;

        font-size: var(--text-sm);
    }
}

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

.footer {
    position: relative;
    overflow: hidden;

    background: var(--gradient-start);

    color: #fff;

    padding: 50px 0 0;
}

/* efek glow */
.footer::before {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    border-radius: 50%;

    background: rgba(255, 255, 255, .05);

    top: -180px;
    right: -120px;

    filter: blur(40px);
}

/* =========================================================
   GRID
========================================================= */

.footer-grid {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(320px, 1.5fr) minmax(180px, 0.8fr) minmax(320px, 1.2fr);

    gap: 60px;

    padding-bottom: 55px;
}

/* =========================================================
   BRAND
========================================================= */

.footer-brand .logo {

    margin-bottom: 14px;
}

/* =========================================================
   LOGO
========================================================= */

.footer-logo {

    width: auto;
    height: auto;

    background: transparent;

    display: inline-flex;

    align-items: center;

    justify-content: flex-start;
}

.footer-logo img {

    width: 200px;

    height: auto;

    display: block;

    object-fit: contain;

    filter: brightness(0) invert(1);
    margin-left: -12px;

    opacity: .95;
}

/* =========================================================
   DESCRIPTION
========================================================= */

.footer-brand p {

    max-width: 340px;

    font-size: 15px;

    line-height: 1.7;

    color: rgba(255, 255, 255, .88);

    margin-bottom: 24px;
}

/* =========================================================
   SOCIAL
========================================================= */

.footer-socials {
    display: flex;
    gap: 14px;

    flex-wrap: wrap;

    margin-bottom: 26px;
}

.social-btn {
    width: 46px;
    height: 46px;

    border-radius: 14px;

    background: rgba(255, 255, 255, .10);

    border: 1px solid rgba(255, 255, 255, .12);

    display: inline-flex;
    align-items: center;
    justify-content: center;

    text-decoration: none !important;

    color: #fff !important;

    font-size: 17px;

    transition: .3s ease;
}

.social-btn:hover {
    transform: translateY(-4px);

    background: #fff;

    color: var(--gradient-start) !important;

    text-decoration: none !important;

    box-shadow: var(--shadow-hover);
}

/* =========================================================
   APP BUTTON
========================================================= */

.app-links {
    display: flex;

    flex-wrap: wrap;

    gap: 14px;
}

.app-btn {
    display: inline-flex;
    align-items: center;

    gap: 12px;

    padding: 12px 18px;

    border-radius: 16px;

    background: rgba(255, 255, 255, .10);

    border: 1px solid rgba(255, 255, 255, .15);

    color: #fff !important;

    text-decoration: none !important;

    min-width: 185px;

    transition:
        transform .25s ease,
        background .25s ease,
        box-shadow .25s ease;

    backdrop-filter: blur(10px);
}


.app-btn:visited {
    color: #fff !important;
}

.app-btn i {
    font-size: 24px;

    flex-shrink: 0;
}

.app-btn div {
    line-height: 1.2;
}

/* =========================================================
   TITLE
========================================================= */

.footer-nav h5,
.footer-contact h5 {
    position: relative;

    font-size: 14px;
    font-weight: var(--font-weight-700);

    letter-spacing: 1px;

    text-transform: uppercase;

    margin-bottom: 28px;

    padding-bottom: 12px;

    color: rgba(255, 255, 255, .92);
}

.footer-nav h5::after,
.footer-contact h5::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: 0;

    width: 45px;
    height: 3px;

    border-radius: 10px;

    background: rgba(255, 255, 255, .75);
}

/* =========================================================
   NAVIGATION
========================================================= */

.footer-nav {
    display: flex;
    flex-direction: column;
}

.footer-nav a {
    display: flex;
    align-items: center;
    gap: 10px;

    width: fit-content;

    padding: 8px 0;

    font-size: 14px;

    color: rgba(255, 255, 255, .82);
    text-decoration: none;

    transition: .25s ease;
}

.footer-nav a i {
    font-size: 11px;

    transition: .25s ease;
}

.footer-nav a:hover {
    color: #fff;

    transform: translateX(4px);
}

.footer-nav a:hover i {
    transform: translateX(2px);
}

/* =========================================================
   CONTACT
========================================================= */

.footer-contact-item {
    display: flex;
    gap: 12px;

    padding: 10px;

    border-radius: var(--radius-container);

    transition: .3s ease;
}

.footer-contact-item:hover {
    background: rgba(255, 255, 255, .10);

    transform: translateY(-2px);
}

.footer-contact-item i {
    width: 42px;
    height: 42px;

    border-radius: 12px;

    background: rgba(255, 255, 255, .10);

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 16px;

    flex-shrink: 0;
}

.footer-contact-item strong {
    display: block;

    font-size: 14px;

    margin-bottom: 5px;

    color: #fff;
}

.footer-contact-item span {
    font-size: 13px;

    line-height: 1.7;

    color: rgba(255, 255, 255, .75);
}

/* =========================================================
   BOTTOM
========================================================= */

.footer-bottom {
    position: relative;
    z-index: 2;

    border-top: 1px solid rgba(255, 255, 255, .12);

    padding: 24px 0;

    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 16px;

    flex-wrap: wrap;

    font-size: 13px;

    color: rgba(255, 255, 255, .72);
}

.footer-bottom-links {
    display: flex;
    align-items: center;

    gap: 18px;

    flex-wrap: wrap;
}

.footer-bottom-links a {
    position: relative;

    color: rgba(255, 255, 255, .82) !important;

    text-decoration: none !important;

    font-size: 13px;

    transition:
        color .25s ease,
        opacity .25s ease;
}

.footer-bottom-links a:hover {
    color: #fff;
}

/* =========================================================
   FLOATING WHATSAPP
========================================================= */

.wa-float {

    position: fixed;

    right: 22px;
    bottom: 22px;

    width: 60px;
    height: 60px;

    border-radius: 50%;

    background: #25D366;

    border: none;

    outline: none;

    display: flex;
    align-items: center;
    justify-content: center;

    box-shadow:
        0 10px 28px rgba(37, 211, 102, .35);

    z-index: 999;

    transition: .3s ease;

    cursor: pointer;

    animation: waPulse 2s infinite;
}

.wa-float:hover {
    transform: scale(1.08);
}

.wa-float img {
    width: 34px;
    height: 34px;
}

/* =========================================================
   WHATSAPP WRAPPER
========================================================= */

.wa-wrapper {

    position: fixed;

    right: 22px;

    bottom: 22px;

    z-index: 9999;
}

/* =========================================================
   POPUP
========================================================= */

.wa-popup {

    position: absolute;

    right: 0;

    bottom: 78px;

    width: 340px;

    background: #fff;

    border-radius: 24px;

    overflow: hidden;

    box-shadow:
        0 20px 50px rgba(0, 0, 0, .12);

    opacity: 0;

    visibility: hidden;

    transform: translateY(20px);

    transition: .3s ease;
}

/* SHOW */

.wa-popup.show {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);
}

/* =========================================================
   HEADER
========================================================= */

.wa-popup-header {

    position: relative;

    background:
        linear-gradient(135deg,
            #67c26f,
            #4cae50);

    padding: 28px 24px;

    text-align: center;

    color: #fff;
}

/* AVATAR */

.wa-popup-header img {

    width: 76px;

    height: 76px;

    border-radius: 50%;

    object-fit: cover;

    margin-bottom: 14px;

    border: 4px solid rgba(255, 255, 255, .25);
}

/* TITLE */

.wa-popup-header h5 {

    font-size: var(--text-md);
    color: #fff;

    font-weight: var(--font-weight-700);

    margin-bottom: 10px;
}

/* TEXT */

.wa-popup-header p {

    margin: 0;

    font-size: var(--text-sm);

    line-height: 1.5;
}

/* CLOSE */

.wa-close {

    position: absolute;

    top: 12px;

    right: 14px;

    border: none;

    background: transparent;

    color: #fff;

    font-size: 32px;

    cursor: pointer;

    line-height: 1;
}

/* =========================================================
   BODY
========================================================= */

.wa-popup-body {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 16px;
}

/* INPUT */

.wa-popup-body input {

    flex: 1;

    height: 48px;

    border: 1px solid #e5e7eb;

    border-radius: 14px;

    padding: 0 16px;

    font-size: 14px;

    outline: none;

    transition: .25s ease;
}

.wa-popup-body input:focus {

    border-color: #25D366;
}

/* SEND BUTTON */

.wa-send {

    width: 48px;

    height: 48px;

    border: none;

    border-radius: 14px;

    background: #67c26f;

    color: #fff;

    font-size: 20px;

    cursor: pointer;

    transition: .25s ease;
}

.wa-send:hover {

    transform: scale(1.05);
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .wa-wrapper {

        right: 16px;

        bottom: 16px;
    }

    .wa-popup {

        width: calc(100vw - 32px);

        max-width: 340px;
    }
}

@keyframes waPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, .5);
    }

    70% {
        box-shadow: 0 0 0 18px rgba(37, 211, 102, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .footer-grid {
        grid-template-columns: 1fr 1fr;

        gap: 42px;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .footer {
        padding-top: 52px;
    }

    .footer-grid {
        grid-template-columns: 1fr;

        gap: 36px;
    }

    .footer-brand .logo {
        align-items: flex-start;
    }

    .footer-logo {
        width: 64px;
        height: 64px;
    }

    .footer-logo img {
        width: 50px;
        height: 50px;
    }

    .footer-brand .logo-text .name {
        font-size: 18px;
    }

    .footer-brand p {
        max-width: 100%;
    }

    .footer-bottom {
        flex-direction: column;

        align-items: flex-start;

        text-align: left;
    }

    .footer-bottom-links {
        gap: 12px;
        flex-direction: column;

        align-items: flex-start;
    }



    .wa-float {
        width: 58px;
        height: 58px;

        right: 16px;
        bottom: 16px;
    }

    .wa-float img {
        width: 30px;
        height: 30px;
    }
}

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

.main-navbar .navbar-nav .nav-link {

    position: relative;

    font-weight: 600;

    transition: var(--transition);
}

/* ACTIVE TEXT */

.main-navbar .navbar-nav .nav-link.active {

    color: var(--gradient-start) !important;
}

/* ACTIVE INDICATOR */

.main-navbar .navbar-nav .nav-link.active::after {

    content: "";

    position: absolute;

    left: 50%;

    bottom: -8px;

    transform: translateX(-50%);

    width: 24px;

    height: 3px;

    border-radius: 20px;

    background: var(--gradient-start);
}

/* HOVER */

.main-navbar .navbar-nav .nav-link:hover {

    color: var(--gradient-start);
}


/* =========================================================
   PRELOADER
========================================================= */

#preloader {

    position: fixed;

    inset: 0;

    width: 100%;
    height: 100vh;

    background: #ffffff;

    z-index: 99999;

    display: flex;

    align-items: center;

    justify-content: center;

    transition:
        opacity .6s ease,
        visibility .6s ease;
}

/* HIDE */

#preloader.hide {

    opacity: 0;

    visibility: hidden;
}

/* =========================================================
   CONTENT
========================================================= */

.loader-content {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;
}

/* =========================================================
   LOGO
========================================================= */

.loader-content img {

    width: 120px;

    height: auto;

    object-fit: contain;

    margin-bottom: 28px;

    animation: pulse 1.5s ease infinite;
}

/* =========================================================
   SPINNER
========================================================= */

.loader-spinner {

    width: 42px;
    height: 42px;

    border-radius: 50%;

    border: 3px solid rgba(14, 159, 141, .15);

    border-top-color: #0E9F8D;

    animation: spin .8s linear infinite;
}

/* =========================================================
   ANIMATION
========================================================= */

@keyframes spin {

    to {

        transform: rotate(360deg);
    }
}

@keyframes pulse {

    0% {

        transform: scale(1);
    }

    50% {

        transform: scale(1.05);
    }

    100% {

        transform: scale(1);
    }
}

/* =========================================
   FINAL IMPROVEMENT
========================================= */

/* CONTAINER */
.container,
.container-fluid {
    max-width: 1330px;
}