@import url("https://fonts.googleapis.com/css2?family=Commissioner:wght@100..900&family=Gabarito:wght@400..900&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap");
/* ==== Banner ==== */
.baner {
    background-image: url("/img/gb.jpg");
    width: 100%;
    height: 100vh;
    margin-top: 50px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
}

.baner .conten {
    font-family: "Commissioner", sans-serif;
    text-align: center;
    font-weight: bold;
}

@property --rotate {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

.baner .conten .light {
    background-image: conic-gradient(from var(--rotate) at 29% 10%,
            #3333ff 40%,
            #e6e6ff,
            #3333ff 60%);
    font-size: 8vw;
    /* fleksibel */
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    animation: rotateLight 3s ease-in-out infinite alternate;
}

@keyframes rotateLight {
    from {
        --rotate: 0.15turn;
    }

    to {
        --rotate: -0.15turn;
    }
}

/* Tulisan baris 2 & 3 */
.baner .conten div:nth-child(2),
.baner .conten div:nth-child(3) {
    font-size: 6vw;
    /* fleksibel ikut lebar layar */
    color: #0000ff;
}

/* ===== Media Query ===== */
@media screen and (max-width: 992px) {
    .baner {
        height: 70vh;
        /* lebih pendek di tablet */
    }

    #map {
        height: 60vh;
        /* turunkan tinggi map */
    }
}

@media screen and (max-width: 576px) {
    .baner .conten .light {
        font-size: 12vw;
        /* lebih kecil lagi */
    }

    .baner .conten div:nth-child(2),
    .baner .conten div:nth-child(3) {
        font-size: 9vw;
    }

    #map {
        height: 50vh;
    }
}

.featurette-divider {
    margin: 5rem 0;
}