/*
 * Jasatranstirta brand theme
 * Palette sampled from public/frontend/images/logo.png
 */
:root {
    --brand-primary: #1475B5;
    --brand-primary-hover: #075B93;
    --brand-accent: #2988CA;
    --brand-highlight: #62B5E5;
    --brand-surface: #EEF8FD;
    --brand-surface-strong: #DDEFF9;
    --brand-primary-rgb: 20, 117, 181;
    --brand-accent-rgb: 41, 136, 202;
    --brand-ink: #0A2847;
    --brand-dark: #002150;
    --brand-dark-rgb: 0, 33, 80;
    --brand-dark-hover: #00183B;
    --brand-dark-soft: #063A68;
    --brand-on-dark: #F4FAFE;
}

::selection {
    color: #fff;
    background: var(--brand-primary);
}

a {
    color: var(--brand-primary);
}

a:hover,
a:focus {
    color: var(--brand-primary-hover);
}

a:focus.focus-visible,
button:focus.focus-visible,
div:focus.focus-visible {
    outline-color: var(--brand-accent) !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.section-title {
    color: var(--brand-ink);
}

.color {
    color: var(--brand-primary) !important;
}

.main-nav {
    background: rgba(255, 255, 255, .98);
    border-bottom: 3px solid var(--brand-primary);
    box-shadow: 0 8px 24px rgba(var(--brand-dark-rgb), .12);
}

.inner-nav ul li a,
.body-scrolled .inner-nav ul li a,
.js-no-transparent-white .inner-nav ul li a {
    color: var(--brand-ink);
}

.inner-nav ul li a:hover,
.inner-nav ul li a.active,
.body-scrolled .inner-nav ul li a:hover,
.body-scrolled .inner-nav ul li a.active,
.js-no-transparent-white .inner-nav ul li a:hover,
.js-no-transparent-white .inner-nav ul li a.active {
    color: var(--brand-primary);
}

.inner-nav ul li a.active {
    box-shadow: inset 0 -3px 0 var(--brand-primary);
}

/* Keep desktop chevrons dark on white and mobile chevrons light on navy. */
.main-nav:not(.mobile-on) .mn-has-sub-icon,
.main-nav:not(.mobile-on) .inner-nav ul li a:hover .mn-has-sub-icon,
.main-nav:not(.mobile-on) .inner-nav ul li a.active .mn-has-sub-icon {
    filter: none;
    opacity: 1;
    background-repeat: no-repeat;
    background-position: center;
}

.mn-sub {
    background: var(--brand-dark);
    border-top: 3px solid var(--brand-primary);
    box-shadow: 0 14px 30px rgba(var(--brand-dark-rgb), .24);
}

.mn-sub li a,
.body-scrolled .inner-nav ul li .mn-sub li a,
.js-no-transparent-white .inner-nav ul li .mn-sub li a {
    color: rgba(245, 250, 253, .86);
}

.mn-sub li a:hover,
.mn-sub li a.active {
    color: var(--brand-on-dark);
    background-color: var(--brand-dark-hover);
    box-shadow: inset 4px 0 0 var(--brand-accent);
}

.mn-sub .mn-group-title {
    color: var(--brand-on-dark) !important;
    border-bottom-color: rgba(223, 240, 250, .16);
}

/* Menargetkan khusus ikon pada sub-menu (dropdown) agar berwarna putih */
.main-nav .inner-nav ul ul li a .mn-has-sub-icon {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="9px" height="5px"><path fill-rule="evenodd" fill="rgb(255, 255, 255)" d="M8.886,0.631 L8.336,0.117 C8.263,0.049 8.178,0.015 8.083,0.015 C7.988,0.015 7.903,0.049 7.830,0.117 L4.506,3.155 L1.183,0.117 C1.109,0.049 1.025,0.015 0.930,0.015 C0.834,0.015 0.750,0.049 0.677,0.117 L0.127,0.631 C0.053,0.699 0.017,0.778 0.017,0.867 C0.017,0.956 0.053,1.035 0.127,1.103 L4.253,4.892 C4.327,4.960 4.411,4.994 4.506,4.994 C4.602,4.994 4.686,4.960 4.759,4.892 L8.886,1.103 C8.959,1.035 8.996,0.956 8.996,0.867 C8.996,0.778 8.959,0.699 8.886,0.631 L8.886,0.631 Z"/></svg>') !important;
}

.bg-dark {
    background-color: var(--brand-dark) !important;
}

.bg-dark-lighter,
.bg-dark.light-content {
    background-color: var(--brand-dark-soft) !important;
}

.bg-dark-lighter.light-content {
    background-color: var(--brand-dark-hover) !important;
}

.bg-dark,
.bg-dark-lighter,
.bg-dark-alfa,
.bg-dark-alfa-30,
.bg-dark-alfa-50,
.bg-dark-alfa-70,
.bg-dark-alfa-90 {
    color: var(--brand-on-dark);
}

.bg-dark-alfa::before,
.bg-dark-alfa .YTPOverlay::before {
    background: rgba(var(--brand-dark-rgb), .97);
}

.bg-dark-alfa-30::before,
.bg-dark-alfa-30 .YTPOverlay::before {
    background: rgba(var(--brand-dark-rgb), .30);
}

.bg-dark-alfa-50::before,
.bg-dark-alfa-50 .YTPOverlay::before {
    background: rgba(var(--brand-dark-rgb), .50);
}

.bg-dark-alfa-70::before,
.bg-dark-alfa-70 .YTPOverlay::before {
    background: rgba(var(--brand-dark-rgb), .70);
}

.bg-dark-alfa-90::before,
.bg-dark-alfa-90 .YTPOverlay::before {
    background: rgba(var(--brand-dark-rgb), .90);
}

.btn-mod.btn-border {
    color: var(--brand-dark);
    border-color: var(--brand-dark);
}

.btn-mod.btn-border:hover,
.btn-mod.btn-border:focus {
    color: var(--brand-on-dark);
    border-color: var(--brand-dark);
    background: var(--brand-dark);
}

.btn-mod.btn-dark,
.btn-mod.btn-black {
    color: var(--brand-on-dark);
    background: var(--brand-dark);
}

.btn-mod.btn-dark:hover,
.btn-mod.btn-dark:focus,
.btn-mod.btn-black:hover,
.btn-mod.btn-black:focus {
    color: #fff;
    background: var(--brand-dark-hover);
}

.btn-mod.btn-color,
.btn-mod.btn-border-c:hover,
.btn-mod.btn-border-c:focus,
.bg-color {
    color: #fff;
    background: var(--brand-primary);
}

.btn-mod.btn-color:hover,
.btn-mod.btn-color:focus {
    color: #fff;
    background: var(--brand-primary-hover);
    opacity: 1;
}

.btn-mod.btn-border-c {
    color: var(--brand-primary);
    border-color: var(--brand-primary);
}

.btn-mod.btn-w-color {
    color: var(--brand-primary);
}

.bg-color-alfa::before,
.bg-color-alfa .YTPOverlay::before,
.bg-color-alfa-30::before,
.bg-color-alfa-30 .YTPOverlay::before,
.bg-color-alfa-50::before,
.bg-color-alfa-50 .YTPOverlay::before,
.bg-color-alfa-70::before,
.bg-color-alfa-70 .YTPOverlay::before,
.bg-color-alfa-90::before,
.bg-color-alfa-90 .YTPOverlay::before {
    background: var(--brand-primary);
}

.bg-blue {
    background-color: var(--brand-primary) !important;
}

.bg-green {
    background-color: var(--brand-accent) !important;
}

/* Branded surfaces and interactive components. */
#services,
#contact,
.small-section.bg-gray,
.bg-gray-lighter {
    background-color: var(--brand-surface) !important;
}

.section-title::after {
    content: "";
    display: block;
    width: 52px;
    height: 3px;
    margin: 18px auto 0;
    background: linear-gradient(90deg, var(--brand-dark), var(--brand-accent));
    border-radius: 999px;
}

.align-left .section-title::after,
.section-title.align-left::after {
    margin-left: 0;
}

.brand-kicker,
.service-category {
    display: inline-block;
    margin-bottom: 12px;
    color: var(--brand-primary);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.brand-kicker-light {
    color: var(--brand-highlight);
}

.brand-info-card,
.contact-map-card,
.inquiry-panel,
.social-panel {
    padding: 34px;
    background: #fff;
    border: 1px solid rgba(var(--brand-primary-rgb), .16);
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(var(--brand-dark-rgb), .07);
}

.brand-info-card h3,
.contact-map-card h3,
.inquiry-panel h3,
.social-panel h3,
.management-card h3 {
    margin-bottom: 12px;
    color: var(--brand-ink);
}

.brand-card-number {
    display: block;
    margin-bottom: 18px;
    color: var(--brand-accent);
    font-size: 30px;
    font-weight: 700;
}

.brand-check-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.brand-check-list li {
    position: relative;
    margin-top: 9px;
    padding-left: 22px;
}

.brand-check-list li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    color: var(--brand-primary);
    font-weight: 700;
}

.management-card {
    height: 100%;
    overflow: hidden;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 14px 34px rgba(var(--brand-dark-rgb), .1);
}

.management-card img {
    width: 100%;
    height: 280px;
    object-fit: cover;
}

.management-card-content {
    padding: 28px 30px;
}

.management-card-content > span {
    color: var(--brand-primary);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.services-item {
    height: calc(100% - 60px);
    padding: 32px 26px;
    background: #fff;
    border: 1px solid rgba(var(--brand-primary-rgb), .18);
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(var(--brand-dark-rgb), .07);
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.services-item:hover {
    transform: translateY(-5px);
    border-color: var(--brand-accent);
    box-shadow: 0 18px 36px rgba(var(--brand-dark-rgb), .13);
}

.services-icon i {
    font-size: .78em;
}

/* Font Awesome Free provides these service icons as solid glyphs only.
   Keep their silhouette unfilled so they match the line-style service icons. */
.services-icon .fa {
    color: var(--brand-ink);
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1.5px currentColor;
}

.anchor-target {
    display: block;
    position: relative;
    top: -85px;
    visibility: hidden;
}

.services-title,
.team-item-name,
.work-process-title,
.ci-title {
    color: var(--brand-ink);
}

.team-item-decoration {
    background-color: var(--brand-surface-strong);
}

.no-mobile .team-item:hover .team-item-image::after,
.team-item.js-active .team-item-image::after {
    background: rgba(var(--brand-dark-rgb), .88);
}

.works-filter a,
.works-filter a.active:hover {
    color: var(--brand-ink);
}

.works-filter a:hover,
.works-filter a.active {
    color: var(--brand-primary);
}

.works-filter a::after,
.section-more::after {
    background-color: var(--brand-primary);
}

.work-process-icon {
    color: var(--brand-primary);
}

.ci-icon::before {
    background: linear-gradient(145deg, var(--brand-primary), var(--brand-dark-soft));
    box-shadow: 0 8px 20px rgba(var(--brand-dark-rgb), .18);
}

.testimonial-card {
    height: 100%;
    margin: 0;
    padding: 30px;
    color: rgba(244, 250, 254, .9);
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 12px;
    font-size: 18px;
    line-height: 1.7;
}

.testimonial-card footer {
    margin-top: 20px;
    color: var(--brand-highlight);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.partner-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.partner-list span {
    padding: 13px 20px;
    color: var(--brand-dark-soft);
    background: #fff;
    border: 1px solid rgba(var(--brand-primary-rgb), .18);
    border-radius: 999px;
    font-weight: 600;
}

.contact-map-card {
    height: 100%;
    text-align: center;
}

.contact-map-card > i {
    display: inline-grid;
    place-items: center;
    width: 54px;
    height: 54px;
    margin-bottom: 20px;
    color: #fff;
    background: linear-gradient(145deg, var(--brand-primary), var(--brand-dark-soft));
    border-radius: 50%;
}

.inquiry-panel label {
    margin-bottom: 7px;
    color: var(--brand-ink);
    font-weight: 600;
}

.social-panel {
    color: var(--brand-on-dark);
    background: var(--brand-dark);
    border-color: var(--brand-dark);
}

.social-panel h3 {
    color: #fff;
}

.brand-social-links {
    display: flex;
    gap: 12px;
    margin-top: 28px;
}

.brand-social-links a {
    display: inline-grid;
    place-items: center;
    width: 46px;
    height: 46px;
    color: #fff;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 50%;
}

.brand-social-links a:hover,
.brand-social-links a:focus {
    color: #fff;
    background: var(--brand-primary);
}

.brand-page-hero {
    padding: 150px 0 95px;
    background-image:
        radial-gradient(circle at 85% 25%, rgba(var(--brand-primary-rgb), .32), transparent 34%),
        linear-gradient(135deg, var(--brand-dark-hover), var(--brand-dark-soft));
}

.brand-page-hero h1 {
    max-width: 820px;
    margin: 0 0 22px;
    color: #fff;
    font-size: clamp(42px, 6vw, 72px);
    line-height: 1.08;
}

.brand-page-hero p {
    max-width: 760px;
    margin: 0;
    color: rgba(244, 250, 254, .82);
    font-size: 20px;
    line-height: 1.7;
}

.brand-page-content {
    min-height: 480px;
    background: linear-gradient(180deg, var(--brand-surface) 0, #fff 280px);
}

.brand-page-grid {
    margin-bottom: -30px;
}

.brand-page-card {
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(var(--brand-primary-rgb), .16);
    border-radius: 14px;
    box-shadow: 0 14px 34px rgba(var(--brand-dark-rgb), .08);
    transition: transform .25s ease, box-shadow .25s ease;
}

.brand-page-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 42px rgba(var(--brand-dark-rgb), .13);
}

.brand-page-card > img {
    width: 100%;
    height: 250px;
    object-fit: cover;
}

.brand-page-card-body {
    padding: 34px;
}

.brand-page-card-body h2 {
    margin-bottom: 12px;
    color: var(--brand-ink);
    font-size: 26px;
}

.brand-page-card-icon {
    display: inline-grid;
    place-items: center;
    width: 58px;
    height: 58px;
    margin-bottom: 24px;
    color: #fff;
    background: linear-gradient(145deg, var(--brand-primary), var(--brand-dark-soft));
    border-radius: 14px;
    font-size: 24px;
}

.brand-article {
    max-width: 850px;
    margin: 0 auto;
    padding: 50px;
    background: #fff;
    border-left: 5px solid var(--brand-primary);
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(var(--brand-dark-rgb), .09);
}

.brand-article h2 {
    font-size: clamp(32px, 5vw, 50px);
}

.brand-article p {
    margin-bottom: 34px;
    font-size: 19px;
    line-height: 1.8;
}

[id] {
    scroll-margin-top: 88px;
}

.btn-mod,
a.btn-mod {
    background: var(--brand-primary);
}

.btn-mod:hover,
.btn-mod:focus,
a.btn-mod:hover,
a.btn-mod:focus {
    background: var(--brand-primary-hover);
}

.banner-section .btn-mod.btn-w {
    color: var(--brand-dark);
}

.services-icon,
.alt-service-icon,
.count-number,
.footer-social-links a:hover {
    color: var(--brand-primary);
}

.services-more a,
.text-link {
    color: var(--brand-primary);
}

.services-more a:hover,
.text-link:hover {
    color: var(--brand-primary-hover);
}

.footer {
    color: var(--brand-ink);
    border-top: 1px solid rgba(var(--brand-primary-rgb), .2);
}

.link-to-top {
    color: #fff !important;
    background-color: var(--brand-primary);
}

.link-to-top:hover {
    background-color: var(--brand-primary-hover);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
input[type="color"]:focus,
select:focus,
textarea:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), .14);
}

.label-new {
    background: var(--brand-accent);
}

@media only screen and (max-width: 1024px) {
    .main-nav.mobile-on .inner-nav {
        background: var(--brand-dark);
        border-top: 1px solid rgba(255, 255, 255, .12);
    }

    .main-nav.mobile-on .inner-nav ul li a,
    .main-nav.mobile-on.body-scrolled .inner-nav ul li a,
    .main-nav.mobile-on.js-no-transparent-white .inner-nav ul li a {
        color: rgba(244, 250, 254, .88);
    }

    .main-nav.mobile-on .inner-nav ul li a:hover,
    .main-nav.mobile-on .inner-nav ul li a.active {
        color: #fff;
        background: rgba(var(--brand-primary-rgb), .18);
        box-shadow: inset 4px 0 0 var(--brand-accent);
    }

    .main-nav.mobile-on .mn-sub {
        border-top: 0;
        background: var(--brand-dark-hover);
    }
}

@media only screen and (min-width: 1025px) {
    .inner-nav > ul > li {
        margin-left: 24px;
    }

    .inner-nav > ul > li > a {
        font-size: 15px;
    }
}

@media only screen and (max-width: 767px) {
    .brand-info-card,
    .contact-map-card,
    .inquiry-panel,
    .social-panel {
        padding: 26px;
    }

    .management-card img {
        height: 220px;
    }

    .brand-page-hero {
        padding: 110px 0 70px;
    }

    .brand-page-hero p {
        font-size: 17px;
    }

    .brand-page-card-body,
    .brand-article {
        padding: 28px;
    }
}

/* Prevent the hero background from bleeding through below the curved SVG. */
.edge-bottom-figure {
    bottom: -1px;
    line-height: 0;
}

.edge-bottom-figure svg {
    display: block;
    height: auto;
    margin-bottom: -1px;
}