:root {
    --primary: #155eef;
    --primary-dark: #0b47c9;
    --primary-light: #eef4ff;

    --secondary: #101828;

    --text: #344054;
    --muted: #667085;

    --border: #eaecf0;

    --surface: #ffffff;
    --background: #f8fafc;

    --radius: 18px;

    --shadow:
        0 10px 35px
        rgba(16, 24, 40, .07);
}


/* =========================================================
   GLOBAL
========================================================= */

* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    margin: 0;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

    color: var(--text);

    background: white;
}


a {
    text-decoration: none;
}


img {
    max-width: 100%;
}


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

.topbar {
    padding: 8px 0;

    font-size: 12px;

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

    background: #071b3d;
}


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

.main-navbar {
    min-height: 82px;

    background:
        linear-gradient(
            135deg,
            #eef4ff 0%,
            #f4f7fc 45%,
            #e8f0ff 100%
        );

    border-bottom:
        1px solid
        rgba(21, 94, 239, .10);

    backdrop-filter:
        blur(14px);

    box-shadow:
        0 4px 20px
        rgba(16, 24, 40, .05);

    z-index: 1000;
}


.navbar-brand {
    display: flex;
    align-items: center;
    gap: 12px;

    color: var(--secondary);
}


.navbar-brand:hover {
    color: var(--secondary);
}


.navbar-brand > span:last-child {
    display: flex;
    flex-direction: column;
}


.navbar-brand strong {
    font-size: 18px;
    line-height: 1.15;
}


.navbar-brand small {
    color: var(--muted);

    margin-top: 2px;

    font-size: 10px;

    letter-spacing: 1.4px;

    text-transform: uppercase;
}


.brand-symbol {
    width: 45px;
    height: 45px;

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

    border-radius: 13px;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            #4f85ff
        );

    color: white;

    font-size: 20px;
}


.main-navbar .nav-link {
    padding:
        10px 14px !important;

    color: #475467;

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

    border-radius: 9px;
}


.main-navbar .nav-link:hover,
.main-navbar .nav-link.active {
    color: var(--primary);

    background:
        var(--primary-light);
}


.btn-login {
    border-radius: 10px;

    padding:
        10px 17px;

    font-size: 13px;

    font-weight: 600;
}


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

.information-hero {
    position: relative;

    overflow: hidden;

    padding:
        90px 0 85px;

    color: white;

    background:
        linear-gradient(
            135deg,
            #071b3d 0%,
            #0b3b92 48%,
            #155eef 100%
        );
}


.information-hero::before {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    right: -180px;
    top: -250px;

    border-radius: 50%;

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


.information-hero::after {
    content: "";

    position: absolute;

    width: 360px;
    height: 360px;

    left: -200px;
    bottom: -230px;

    border-radius: 50%;

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


.hero-content {
    position: relative;

    z-index: 2;

    max-width: 800px;
}


.hero-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding:
        7px 13px;

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

    border-radius: 30px;

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

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 1.2px;

    margin-bottom: 22px;
}


.information-hero h1 {
    margin: 0;

    font-size:
        clamp(
            40px,
            6vw,
            67px
        );

    line-height: 1.05;

    font-weight: 750;

    letter-spacing: -2px;
}


.information-hero p {
    max-width: 620px;

    margin:
        22px 0 32px;

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

    font-size: 17px;

    line-height: 1.7;
}


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

.hero-search {
    max-width: 650px;

    display: flex;

    padding: 7px;

    border-radius: 14px;

    background: white;

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


.hero-search-input {
    position: relative;

    flex: 1;
}


.hero-search-input i {
    position: absolute;

    left: 17px;
    top: 50%;

    transform:
        translateY(-50%);

    color: #98a2b3;
}


.hero-search-input input {
    width: 100%;
    height: 50px;

    border: 0;

    outline: none;

    padding:
        0 15px
        0 45px;

    color: var(--secondary);

    font-size: 14px;
}


.btn-search {
    min-width: 100px;

    border: 0;

    border-radius: 10px;

    background:
        var(--primary);

    color: white;

    font-weight: 600;

    font-size: 14px;
}


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

.category-section {
    border-bottom:
        1px solid
        var(--border);

    background: white;
}


.category-scroll {
    padding:
        20px 0;

    display: flex;

    gap: 9px;

    overflow-x: auto;

    scrollbar-width: none;
}


.category-scroll::-webkit-scrollbar {
    display: none;
}


.category-pill {
    flex-shrink: 0;

    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding:
        9px 14px;

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

    border-radius: 30px;

    background: white;

    color: var(--text);

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

    transition: .2s ease;
}


.category-pill span {
    min-width: 21px;

    padding:
        2px 6px;

    border-radius: 20px;

    text-align: center;

    background: #f2f4f7;

    color: var(--muted);

    font-size: 10px;
}


.category-pill:hover,
.category-pill.active {
    border-color:
        var(--primary);

    background:
        var(--primary);

    color: white;
}


.category-pill.active span,
.category-pill:hover span {
    background:
        rgba(255,255,255,.18);

    color: white;
}


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

.information-content {
    padding:
        75px 0 90px;

    background:
        var(--background);
}


.content-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 30px;
}


.section-eyebrow {
    display: block;

    margin-bottom: 7px;

    color: var(--primary);

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 1.4px;
}


.content-heading h2 {
    margin: 0;

    color: var(--secondary);

    font-size: 30px;
    font-weight: 700;

    letter-spacing: -.7px;
}


.result-count {
    flex-shrink: 0;

    color: var(--muted);

    font-size: 12px;
}


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

.information-card {
    height: 100%;

    overflow: hidden;

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

    border-radius:
        var(--radius);

    background:
        var(--surface);

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


.information-card:hover {
    transform:
        translateY(-5px);

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


.information-image {
    position: relative;

    display: block;

    height: 225px;

    overflow: hidden;

    background: #eef2f6;
}


.information-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .4s ease;
}


.information-card:hover
.information-image img {
    transform:
        scale(1.04);
}


.image-placeholder {
    width: 100%;
    height: 100%;

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

    background:
        linear-gradient(
            135deg,
            #eaf1ff,
            #f5f8ff
        );

    color: #9bb7ee;

    font-size: 44px;
}


.card-category {
    position: absolute;

    left: 15px;
    bottom: 15px;

    padding:
        6px 10px;

    border-radius: 20px;

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

    color: var(--primary);

    font-size: 10px;
    font-weight: 700;

    box-shadow:
        0 5px 15px
        rgba(0,0,0,.08);
}


.information-card-body {
    padding: 22px;
}


.information-meta {
    display: flex;
    flex-wrap: wrap;

    gap: 15px;

    margin-bottom: 13px;

    color: #98a2b3;

    font-size: 11px;
}


.information-meta span {
    display: flex;
    align-items: center;
    gap: 5px;
}


.information-card h3 {
    margin:
        0 0 12px;

    font-size: 19px;

    line-height: 1.42;

    font-weight: 700;
}


.information-card h3 a {
    color: var(--secondary);

    transition:
        color .2s;
}


.information-card h3 a:hover {
    color: var(--primary);
}


.information-card p {
    margin-bottom: 18px;

    color: var(--muted);

    font-size: 13px;

    line-height: 1.7;
}


.read-more {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    color: var(--primary);

    font-size: 12px;
    font-weight: 700;
}


.read-more i {
    transition:
        transform .2s;
}


.read-more:hover i {
    transform:
        translateX(4px);
}


/* =========================================================
   SIDEBAR
========================================================= */

.news-sidebar {
    position: sticky;

    top: 110px;
}


.sidebar-widget {
    margin-bottom: 25px;

    padding: 25px;

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

    border-radius:
        var(--radius);

    background: white;
}


.sidebar-widget h4 {
    margin:
        0 0 20px;

    color: var(--secondary);

    font-size: 17px;

    font-weight: 700;
}


.sidebar-search {
    display: flex;

    overflow: hidden;

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

    border-radius: 10px;
}


.sidebar-search input {
    min-width: 0;
    flex: 1;

    height: 45px;

    border: 0;

    outline: none;

    padding:
        0 13px;

    font-size: 12px;
}


.sidebar-search button {
    width: 46px;

    border: 0;

    background:
        var(--primary);

    color: white;
}


/* Latest */

.latest-item {
    display: flex;

    gap: 12px;

    padding:
        14px 0;

    border-bottom:
        1px solid
        var(--border);
}


.latest-item:first-child {
    padding-top: 0;
}


.latest-item:last-child {
    border-bottom: 0;

    padding-bottom: 0;
}


.latest-thumbnail {
    flex:
        0 0 80px;

    width: 80px;
    height: 66px;

    overflow: hidden;

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

    border-radius: 9px;

    background:
        var(--primary-light);

    color: var(--primary);
}


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

    object-fit: cover;
}


.latest-item span {
    color: #98a2b3;

    font-size: 10px;
}


.latest-item h5 {
    margin:
        5px 0 0;

    color: var(--secondary);

    font-size: 12px;

    line-height: 1.45;

    font-weight: 650;

    transition:
        color .2s;
}


.latest-item:hover h5 {
    color: var(--primary);
}


/* Category sidebar */

.sidebar-category a {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding:
        11px 0;

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

    color: var(--text);

    font-size: 12px;
}


.sidebar-category a:last-child {
    border: 0;
}


.sidebar-category strong {
    min-width: 26px;

    padding:
        4px 7px;

    border-radius: 20px;

    background:
        var(--primary-light);

    color: var(--primary);

    text-align: center;

    font-size: 10px;
}


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

.empty-information {
    padding:
        70px 25px;

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

    border-radius:
        var(--radius);

    background: white;

    text-align: center;
}


.empty-icon {
    width: 70px;
    height: 70px;

    margin:
        0 auto 20px;

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

    border-radius: 50%;

    background:
        var(--primary-light);

    color: var(--primary);

    font-size: 26px;
}


.empty-information h3 {
    color: var(--secondary);

    font-size: 20px;
}


.empty-information p {
    color: var(--muted);

    font-size: 13px;
}


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

.frontend-pagination {
    margin-top: 40px;
}


.frontend-pagination
.pagination {
    gap: 5px;
}


.frontend-pagination
.page-link {
    min-width: 38px;
    height: 38px;

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

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

    border-radius:
        8px !important;

    color: var(--text);

    font-size: 12px;
}


.frontend-pagination
.page-item.active
.page-link {
    border-color:
        var(--primary);

    background:
        var(--primary);

    color: white;
}


/* =========================================================
   ARTICLE BREADCRUMB
========================================================= */

.article-breadcrumb {
    padding:
        20px 0;

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

    background:
        var(--background);
}


.article-breadcrumb
.breadcrumb {
    margin: 0;

    font-size: 11px;
}


.article-breadcrumb a {
    color: var(--primary);
}


/* =========================================================
   ARTICLE
========================================================= */

.article-section {
    padding:
        65px 0 90px;

    background: white;
}


.article-container {
    max-width: 850px;
}


.article-category {
    display: inline-block;

    margin-bottom: 18px;

    padding:
        6px 11px;

    border-radius: 30px;

    background:
        var(--primary-light);

    color:
        var(--primary);

    font-size: 10px;
    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .7px;
}


.article-title {
    max-width: 850px;

    margin:
        0 0 20px;

    color:
        var(--secondary);

    font-size:
        clamp(
            34px,
            5vw,
            52px
        );

    line-height: 1.14;

    letter-spacing: -1.5px;

    font-weight: 750;
}


.article-meta {
    display: flex;
    flex-wrap: wrap;

    gap: 20px;

    color:
        var(--muted);

    font-size: 12px;

    margin-bottom: 35px;
}


.article-meta span {
    display: flex;
    align-items: center;
    gap: 7px;
}


.article-cover {
    overflow: hidden;

    margin-bottom: 40px;

    border-radius:
        20px;

    background:
        var(--background);
}


.article-cover img {
    width: 100%;

    max-height: 520px;

    object-fit: cover;
}


.article-body {
    color: #344054;

    font-size: 16px;

    line-height: 1.95;

    overflow-wrap:
        break-word;
}


/* =========================================================
   ATTACHMENT
========================================================= */

.article-attachment {
    margin-top: 40px;

    display: flex;
    align-items: center;

    gap: 14px;

    padding: 18px;

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

    border-radius: 14px;

    background:
        var(--background);
}


.attachment-icon {
    width: 48px;
    height: 48px;

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

    flex-shrink: 0;

    border-radius: 11px;

    background: #fff0f0;

    color: #d92d20;

    font-size: 22px;
}


.article-attachment div:nth-child(2) {
    display: flex;
    flex-direction: column;
}


.article-attachment span {
    color:
        var(--muted);

    font-size: 10px;
}


.article-attachment strong {
    color:
        var(--secondary);

    font-size: 13px;
}


/* =========================================================
   SHARE
========================================================= */

.article-share {
    margin-top: 45px;

    padding:
        22px 0;

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

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

    border-bottom:
        1px solid
        var(--border);
}


.article-share > span {
    font-size: 12px;

    font-weight: 600;

    color:
        var(--secondary);
}


.article-share > div {
    display: flex;

    gap: 8px;
}


.share-button {
    width: 38px;
    height: 38px;

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

    border-radius: 9px;

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

    background: white;

    color:
        var(--secondary);

    cursor: pointer;

    transition:
        .2s;
}


.share-button:hover {
    background:
        var(--primary);

    border-color:
        var(--primary);

    color: white;
}


/* =========================================================
   RELATED
========================================================= */

.related-section {
    margin-top: 65px;
}


.section-heading {
    margin-bottom: 25px;
}


.section-heading span {
    color:
        var(--primary);

    font-size: 10px;

    letter-spacing: 1.3px;

    font-weight: 700;
}


.section-heading h2 {
    margin-top: 6px;

    color:
        var(--secondary);

    font-size: 27px;

    font-weight: 700;
}


.related-card
.information-image {
    height: 180px;
}


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

.site-footer {
    padding:
        65px 0 0;

    background:
        #07152f;

    color: white;
}


.footer-brand {
    display: flex;
    align-items: center;

    gap: 12px;
}


.footer-brand > div {
    display: flex;
    flex-direction: column;
}


.footer-brand strong {
    font-size: 17px;
}


.footer-brand small {
    margin-top: 2px;

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

    font-size: 10px;
}


.footer-description {
    max-width: 420px;

    margin-top: 20px;

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

    font-size: 12px;

    line-height: 1.8;
}


.site-footer h6 {
    margin-bottom: 18px;

    font-size: 13px;

    font-weight: 700;
}


.footer-links {
    margin: 0;
    padding: 0;

    list-style: none;
}


.footer-links li {
    margin-bottom: 10px;
}


.footer-links a {
    color:
        rgba(255,255,255,.58);

    font-size: 12px;
}


.footer-links a:hover {
    color: white;
}


.footer-bottom {
    margin-top: 45px;

    padding:
        20px 0;

    display: flex;
    justify-content: space-between;

    gap: 20px;

    border-top:
        1px solid
        rgba(255,255,255,.09);

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

    font-size: 10px;
}


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

@media (
    max-width: 991px
) {

    .main-navbar {
        min-height: 72px;
    }


    .navbar-collapse {
        padding:
            20px 0;
    }


    .news-sidebar {
        position: static;
    }


    .information-hero {
        padding:
            70px 0;
    }


    .article-title {
        font-size: 38px;
    }

}


@media (
    max-width: 767px
) {

    .topbar {
        display: none;
    }


    .information-hero {
        padding:
            60px 0;
    }


    .information-hero h1 {
        font-size: 38px;
    }


    .information-hero p {
        font-size: 14px;
    }


    .hero-search {
        display: block;

        padding: 7px;
    }


    .btn-search {
        width: 100%;
        height: 45px;

        margin-top: 5px;
    }


    .content-heading {
        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .information-content {
        padding:
            55px 0;
    }


    .information-image {
        height: 230px;
    }


    .article-section {
        padding:
            45px 0 65px;
    }


    .article-title {
        font-size: 32px;
    }


    .article-body {
        font-size: 15px;
    }


    .article-attachment {
        align-items:
            flex-start;

        flex-wrap:
            wrap;
    }


    .article-attachment
    .btn {
        width: 100%;

        margin-left:
            0 !important;
    }


    .footer-bottom {
        flex-direction:
            column;
    }


}


/* =========================================================
   HOME - RUNNING TEXT
========================================================= */

.home-ticker {
    background:
        linear-gradient(
            90deg,
            #edf3ff 0%,
            #f8faff 50%,
            #edf3ff 100%
        );

    border-bottom:
        1px solid
        rgba(21, 94, 239, .10);
}

.ticker-wrapper {
    min-height: 48px;

    display: flex;
    align-items: stretch;

    overflow: hidden;
}

.ticker-label {
    position: relative;

    z-index: 5;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    gap: 8px;

    padding:
        0 20px;

    background:
        linear-gradient(
            135deg,
            #155eef,
            #3b73f1
        );

    color: white;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: .7px;

    box-shadow:
        4px 0 15px
        rgba(21, 94, 239, .12);
}

.ticker-content {
    flex: 1;

    min-width: 0;

    overflow: hidden;

    display: flex;

    align-items: center;

    background: transparent;
}

.ticker-track {
    width: max-content;

    display: flex;
    align-items: center;

    animation:
        homeTicker 35s linear infinite;
}

.ticker-track:hover {
    animation-play-state: paused;
}

.ticker-item {
    flex-shrink: 0;

    display: flex;

    align-items: center;

    gap: 11px;

    padding:
        0 25px;

    color: #344054;

    font-size: 12px;
}

.ticker-item i {
    color: var(--primary);

    font-size: 5px;
}

.ticker-item a {
    color: #344054;

    font-weight: 500;

    transition:
        color .2s ease;
}


.ticker-item a:hover {
    color: #155eef;
}

@keyframes homeTicker {

    from {
        transform: translateX(0);
    }

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


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

.home-hero {
    position: relative;

    overflow: hidden;

    background: #071b3d;
}

.hero-slide {
    position: relative;

    min-height: 620px;

    display: flex;
    align-items: center;

    overflow: hidden;
}

.hero-background {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.hero-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(4, 17, 45, .96) 0%,
            rgba(4, 25, 65, .86) 38%,
            rgba(4, 26, 67, .42) 72%,
            rgba(4, 26, 67, .18) 100%
        );
}

.hero-text-wrapper {
    position: relative;

    z-index: 5;

    max-width: 720px;

    padding: 90px 0;

    color: white;
}

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

    gap: 8px;

    padding: 7px 13px;

    margin-bottom: 22px;

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

    border-radius: 30px;

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

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 1.3px;
}

.hero-text-wrapper h1 {
    max-width: 700px;

    margin: 0;

    font-size:
        clamp(
            44px,
            6vw,
            72px
        );

    line-height: 1.05;

    letter-spacing: -2.3px;

    font-weight: 750;
}

.hero-text-wrapper p {
    max-width: 620px;

    margin:
        25px 0 34px;

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

    font-size: 17px;

    line-height: 1.75;
}

.hero-actions {
    display: flex;

    flex-wrap: wrap;

    gap: 12px;
}

.hero-primary-button {
    display: inline-flex;
    align-items: center;

    gap: 9px;

    padding:
        13px 21px;

    border-radius: 10px;

    background: white;

    color: #0b47c9;

    font-size: 13px;

    font-weight: 700;
}

.hero-primary-button:hover {
    background: #edf3ff;

    color: #0b47c9;
}

.hero-secondary-button {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    padding:
        13px 21px;

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

    border-radius: 10px;

    color: white;

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

.hero-secondary-button:hover {
    background:
        rgba(255,255,255,.1);

    color: white;
}

.hero-fallback {
    background:
        linear-gradient(
            135deg,
            #071b3d,
            #0b3b92 55%,
            #155eef
        );
}

.home-hero
.carousel-control-prev,
.home-hero
.carousel-control-next {
    width: 7%;
}

.home-hero
.carousel-indicators {
    bottom: 25px;
}


/* =========================================================
   GENERAL HOME SECTION
========================================================= */

.home-section-heading {
    max-width: 680px;

    margin:
        0 auto 45px;
}

.home-section-heading > span {
    display: block;

    margin-bottom: 8px;

    color: var(--primary);

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 1.5px;
}

.home-section-heading h2 {
    margin:
        0 0 13px;

    color: var(--secondary);

    font-size:
        clamp(
            29px,
            4vw,
            40px
        );

    font-weight: 750;

    letter-spacing: -1px;
}

.home-section-heading p {
    margin: 0;

    color: var(--muted);

    font-size: 14px;

    line-height: 1.75;
}

.home-section-heading-left {
    max-width: none;

    display: flex;
    align-items: end;
    justify-content: space-between;

    gap: 30px;
}

.home-section-heading-left > div {
    max-width: 620px;
}

.section-link {
    flex-shrink: 0;

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

    gap: 7px;

    color: var(--primary);

    font-size: 12px;

    font-weight: 700;
}


/* =========================================================
   SERVICES
========================================================= */

.home-services {
    padding:
        85px 0;

    background: white;
}

.service-card {
    height: 100%;

    display: block;

    padding: 30px 25px;

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

    border-radius: 18px;

    background: white;

    color: var(--text);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

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

    border-color:
        #cbd9ff;

    box-shadow:
        0 17px 40px
        rgba(16, 24, 40, .08);

    color: var(--text);
}

.service-icon {
    width: 54px;
    height: 54px;

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

    margin-bottom: 23px;

    border-radius: 15px;

    background:
        var(--primary-light);

    color: var(--primary);

    font-size: 23px;
}

.service-card h3 {
    margin:
        0 0 11px;

    color: var(--secondary);

    font-size: 18px;
    font-weight: 700;
}

.service-card p {
    min-height: 68px;

    margin-bottom: 19px;

    color: var(--muted);

    font-size: 12px;

    line-height: 1.75;
}

.service-card > span {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    color: var(--primary);

    font-size: 11px;

    font-weight: 700;
}


/* =========================================================
   HOME INFORMATION
========================================================= */

.home-information {
    padding:
        90px 0;

    background:
        var(--background);
}

.home-news-card {
    height: 100%;

    overflow: hidden;

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

    border-radius: 18px;

    background: white;

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

.home-news-card:hover {
    transform:
        translateY(-5px);

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

.home-news-image {
    position: relative;

    height: 235px;

    display: block;

    overflow: hidden;

    background: #eef2f6;
}

.home-news-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .35s ease;
}

.home-news-card:hover
.home-news-image img {
    transform:
        scale(1.04);
}

.home-image-placeholder {
    width: 100%;
    height: 100%;

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

    background:
        linear-gradient(
            135deg,
            #eaf1ff,
            #f7f9fc
        );

    color: #a4b9e4;

    font-size: 42px;
}

.home-news-category {
    position: absolute;

    left: 16px;
    bottom: 16px;

    padding:
        6px 11px;

    border-radius: 30px;

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

    color: var(--primary);

    font-size: 10px;

    font-weight: 700;
}

.home-news-pdf {
    position: absolute;

    top: 15px;
    right: 15px;

    width: 34px;
    height: 34px;

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

    border-radius: 9px;

    background:
        rgba(217,45,32,.92);

    color: white;
}

.home-news-body {
    padding: 23px;
}

.home-news-meta {
    display: flex;
    flex-wrap: wrap;

    gap: 14px;

    margin-bottom: 13px;

    color: #98a2b3;

    font-size: 10px;
}

.home-news-meta span {
    display: flex;
    align-items: center;

    gap: 5px;
}

.home-news-card h3 {
    margin:
        0 0 12px;

    font-size: 18px;

    line-height: 1.45;

    font-weight: 700;
}

.home-news-card h3 a {
    color: var(--secondary);
}

.home-news-card h3 a:hover {
    color: var(--primary);
}

.home-news-card p {
    margin:
        0 0 19px;

    color: var(--muted);

    font-size: 12px;

    line-height: 1.7;
}

.home-read-more {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    color: var(--primary);

    font-size: 11px;

    font-weight: 700;
}


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

.home-category-section {
    padding:
        90px 0;

    background: white;
}

.category-grid {
    display: grid;

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

    gap: 15px;
}

.home-category-card {
    position: relative;

    display: flex;
    align-items: center;

    gap: 14px;

    padding: 20px;

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

    border-radius: 15px;

    color: var(--text);

    background: white;

    transition: .25s;
}

.home-category-card:hover {
    transform:
        translateY(-3px);

    border-color:
        #b8ccff;

    box-shadow:
        0 12px 30px
        rgba(16,24,40,.07);

    color: var(--text);
}

.category-icon {
    width: 45px;
    height: 45px;

    flex-shrink: 0;

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

    border-radius: 12px;

    background:
        var(--primary-light);

    color: var(--primary);

    font-size: 19px;
}

.home-category-card h4 {
    margin:
        0 0 3px;

    color:
        var(--secondary);

    font-size: 13px;
    font-weight: 700;
}

.home-category-card span {
    color:
        var(--muted);

    font-size: 10px;
}

.category-arrow {
    margin-left: auto;

    color: #98a2b3;

    font-size: 12px;
}


/* =========================================================
   ANNOUNCEMENT
========================================================= */

.home-announcement-section {
    padding:
        90px 0;

    background:
        var(--background);
}

.announcement-card {
    height: 100%;

    display: flex;

    gap: 20px;

    padding: 25px;

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

    border-radius: 17px;

    background: white;

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

.announcement-card:hover {
    transform:
        translateY(-4px);

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

.announcement-icon {
    width: 52px;
    height: 52px;

    flex:
        0 0 52px;

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

    border-radius: 14px;

    background:
        #fff5e8;

    color:
        #f79009;

    font-size: 21px;
}

.announcement-meta {
    display: flex;

    flex-wrap: wrap;

    gap: 13px;

    margin-bottom: 9px;

    color:
        #98a2b3;

    font-size: 10px;
}

.announcement-card h3 {
    margin:
        0 0 9px;

    color:
        var(--secondary);

    font-size: 16px;

    line-height: 1.4;

    font-weight: 700;
}

.announcement-card p {
    margin:
        0 0 13px;

    color:
        var(--muted);

    font-size: 12px;

    line-height: 1.7;
}

.announcement-document {
    display: inline-flex;
    align-items: center;

    gap: 6px;

    color: #d92d20;

    font-size: 11px;

    font-weight: 700;
}


/* =========================================================
   STATISTICS
========================================================= */

.home-statistics {
    padding:
        85px 0;

    background: white;
}

.statistics-panel {
    position: relative;

    overflow: hidden;

    display: grid;

    grid-template-columns:
        .9fr 1.1fr;

    gap: 60px;

    align-items: center;

    padding:
        55px;

    border-radius: 24px;

    background:
        linear-gradient(
            135deg,
            #071b3d,
            #0b3b92 58%,
            #155eef
        );

    color: white;
}

.statistics-panel::after {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    right: -210px;
    top: -210px;

    border-radius: 50%;

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

.statistics-copy {
    position: relative;

    z-index: 2;
}

.statistics-badge {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    padding:
        7px 11px;

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

    border-radius: 30px;

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

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1px;
}

.statistics-copy h2 {
    margin:
        18px 0 14px;

    font-size: 35px;

    line-height: 1.2;

    font-weight: 720;

    letter-spacing: -1px;
}

.statistics-copy p {
    max-width: 480px;

    margin: 0;

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

    font-size: 13px;

    line-height: 1.8;
}

.statistics-grid {
    position: relative;

    z-index: 2;

    display: grid;

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

    gap: 15px;
}

.statistic-item {
    padding: 22px;

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

    border-radius: 16px;

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

    backdrop-filter:
        blur(8px);
}

.statistic-icon {
    width: 38px;
    height: 38px;

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

    margin-bottom: 15px;

    border-radius: 10px;

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

.statistic-item strong {
    display: block;

    margin-bottom: 4px;

    font-size: 29px;
    font-weight: 750;
}

.statistic-item span {
    color:
        rgba(255,255,255,.63);

    font-size: 10px;
}


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

.home-empty {
    padding:
        55px 20px;

    border:
        1px dashed
        #d0d5dd;

    border-radius: 18px;

    text-align: center;

    background: white;
}

.home-empty > i {
    display: block;

    margin-bottom: 15px;

    color: #a6b8da;

    font-size: 38px;
}

.home-empty h4 {
    color:
        var(--secondary);

    font-size: 18px;
}

.home-empty p {
    margin-bottom: 0;

    color:
        var(--muted);

    font-size: 12px;
}


/* =========================================================
   CTA
========================================================= */

.home-cta {
    padding:
        0 0 90px;

    background: white;
}

.home-cta-box {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 40px;

    padding:
        45px 50px;

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

    border-radius: 22px;

    background:
        linear-gradient(
            135deg,
            #f7f9fc,
            #eef4ff
        );
}

.home-cta-box span {
    display: block;

    margin-bottom: 7px;

    color: var(--primary);

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 1.4px;
}

.home-cta-box h2 {
    margin:
        0 0 9px;

    color:
        var(--secondary);

    font-size: 30px;

    font-weight: 730;

    letter-spacing: -.8px;
}

.home-cta-box p {
    margin: 0;

    color:
        var(--muted);

    font-size: 12px;
}

.home-cta-button {
    flex-shrink: 0;

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

    gap: 9px;

    padding:
        12px 20px;

    border-radius: 10px;

    background:
        var(--primary);

    color: white;

    font-size: 12px;

    font-weight: 700;
}

.home-cta-button:hover {
    background:
        var(--primary-dark);

    color: white;
}


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

@media (max-width: 991px) {

    .hero-slide {
        min-height: 560px;
    }


    .category-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .statistics-panel {
        grid-template-columns: 1fr;

        gap: 35px;

        padding: 40px;
    }

}


@media (max-width: 767px) {

    .ticker-label span {
        display: none;
    }


    .ticker-label {
        padding: 0 15px;
    }


    .hero-slide {
        min-height: 520px;
    }


    .hero-text-wrapper {
        padding:
            70px 0;
    }


    .hero-text-wrapper h1 {
        font-size: 39px;

        letter-spacing: -1.3px;
    }


    .hero-text-wrapper p {
        font-size: 14px;
    }


    .home-services,
    .home-information,
    .home-category-section,
    .home-announcement-section,
    .home-statistics {
        padding:
            65px 0;
    }


    .home-section-heading-left {
        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .category-grid {
        grid-template-columns: 1fr;
    }


    .statistics-panel {
        padding:
            30px 23px;

        border-radius: 18px;
    }


    .statistics-copy h2 {
        font-size: 28px;
    }


    .statistics-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .statistic-item {
        padding: 18px 15px;
    }


    .statistic-item strong {
        font-size: 23px;
    }


    .home-cta-box {
        align-items:
            flex-start;

        flex-direction:
            column;

        padding:
            30px 25px;
    }


    .home-cta-button {
        width: 100%;

        justify-content: center;
    }

}


@media (max-width: 480px) {

    .statistics-grid {
        grid-template-columns: 1fr 1fr;
    }


    .announcement-card {
        flex-direction: column;
    }


    .home-news-image {
        height: 220px;
    }

}

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

.smart-header {
    position: sticky;

    top: 0;

    z-index: 1050;

    width: 100%;

    background:
        linear-gradient(
            135deg,
            #eef4ff 0%,
            #f4f7fc 50%,
            #e8f0ff 100%
        );

    transform:
        translateY(0);

    transition:
        transform .35s ease,
        box-shadow .25s ease;
}


/* Header menghilang ketika scroll ke bawah */

.smart-header.header-hidden {
    transform: translateY(-100%);
}


/* Shadow ketika halaman sudah discroll */

.smart-header.header-scrolled {
    box-shadow:
        0 8px 25px
        rgba(16, 24, 40, .08);
}


/* Navbar tidak perlu sticky lagi */

.smart-header .main-navbar {
    position: relative !important;

    top: auto !important;
}


/* Mobile */

@media (max-width: 767.98px) {

    .smart-header {
        transition:
            transform .28s ease,
            box-shadow .2s ease;
    }

}

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

.brand-logo-wrapper {
    width: 48px;
    height: 48px;

    flex-shrink: 0;

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

    overflow: hidden;

    border-radius: 12px;

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


.brand-logo-image {
    width: 100%;
    height: 100%;

    object-fit: contain;
}


/* MOBILE */

@media (max-width: 575.98px) {

    .brand-logo-wrapper {
        width: 42px;
        height: 42px;
    }

}

.footer-logo-wrapper {
    width: 48px;
    height: 48px;

    flex-shrink: 0;

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

    overflow: hidden;

    border-radius: 12px;

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


.footer-logo-image {
    width: 100%;
    height: 100%;

    object-fit: contain;
}