:root{
    --hero-text:#ffffff;
    --hero-accent:#60a5fa;
    --hero-muted:rgba(255,255,255,0.75);
    --hero-overlay:rgba(10,15,25,0.75);
    --hero-tag-bg:rgba(255,255,255,0.06);
    --hero-tag-border:rgba(255,255,255,0.12);
}

/* HERO WRAPPER */
.hero-contact{
    position:relative;
    min-height:420px;
    display:flex;
    align-items:center;
    justify-content:center;
    background-image:url(../img/bg-img/container.webp);
    background-size:cover;
    background-position:center;
    overflow:hidden;
    font-family:Arial, sans-serif;
}

/* OVERLAY */
.hero-contact::before{
    content:"";
    position:absolute;
    inset:0;
    background:var(--hero-overlay);
    z-index:1;
}

/* CONTENT */
.hero-contact__content{
    position:relative;
    z-index:2;
    width:100%;
    max-width:1200px;
    padding:0 20px;
}

/* TAG */
.hero-contact__tag{
    display:inline-block;
    padding:6px 14px;
    font-size:12px;
    letter-spacing:1px;
    text-transform:uppercase;
    color:var(--hero-text);
    background:var(--hero-tag-bg);
    border:1px solid var(--hero-tag-border);
    border-radius:999px;
}

/* TITLE */
.hero-contact__title{
    margin-top:16px;
    font-size:46px;
    font-weight:800;
    line-height:1.2;
    color:var(--hero-text);
    max-width:800px;
}

.hero-contact__title span{
    color:var(--hero-accent);
}

/* BREADCRUMB STYLE (SIMPEL REPLACEMENT NAV TEXT) */
.hero-contact__nav{
    margin-top:18px;
    display:flex;
    gap:10px;
    font-size:13px;
    color:var(--hero-muted);
    align-items:center;
}

/* HOME LINK (BISA DI KLIK) */
.hero-contact__home{
    color:var(--hero-accent);
    text-decoration:none;
    font-weight:500;
    transition:0.2s;
}

.hero-contact__home:hover{
    color:#ffffff;
}

/* separator */
.hero-contact__divider{
    color:var(--hero-muted);
}

/* CURRENT PAGE (TEXT BIASA) */
.hero-contact__current{
    color:var(--hero-text);
    font-weight:500;
}

/* RESPONSIVE */
@media(max-width:768px){
    .hero-contact__title{
        font-size:32px;
    }
}