*{
    font-family:'Inter',sans-serif;
}

body{
    overflow-x:hidden;
}

.bg-main{
    background:
    radial-gradient(circle at top left,#1b4ca8 0%,transparent 25%),
    linear-gradient(180deg,#012846 0%,#0d4ca8 45%,#012846 100%);
}

.circle-line{
    position:absolute;
    border:1px solid rgba(255,255,255,.15);
    border-radius:999px;
}

.service-card{
    transition:.3s;
}

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

.infrastructure-overlay{
    background:linear-gradient(
        90deg,
        transparent 0%,
        rgba(0,0,0,.6) 40%,
        rgba(0,0,0,.9) 100%
    );
}

.coverage-bg{
    background:
    linear-gradient(180deg,#0e4ba7 0%,#012846 100%);
}

.footer-bg{
    background:
    linear-gradient(180deg,#012846 0%,#0e4ba7 100%);
}

.lang-active{
    background:#fff;
    color:#000;
    font-weight:600;
}

#mainHeader{
    background: transparent;
}

#mainHeader.scrolled{
    background: rgba(0,0,0,.65);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    box-shadow:
        0 4px 20px rgba(0,0,0,.2);
}
.hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 70% center;
}

/* --- Custom Vertical Timeline Styling --- */
.custom-timeline {
    position: relative;
    border-left: 2px solid rgba(255, 255, 255, 0.4); /* Garis putih vertikal transparan */
    padding-left: 28px;
    margin-left: 8px;
}

.timeline-item {
    position: relative;
    padding-bottom: 2.5rem;
}

.timeline-item:last-child {
    padding-bottom: 0;
}

/* Membuat Dot Indikator Putih */
.timeline-item::before {
    content: '';
    position: absolute;
    left: -35px; /* Menyesuaikan jarak agar pas di tengah-tengah garis */
    top: 10px;
    width: 12px;
    height: 12px;
    background-color: #ffffff;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.9);
    z-index: 10;
}