:root {
    --color-1: #aae63f;
    --color-2: #6be8e9;
    --color-3: #00a1cb;
}

* {
    font-family: "IBM Plex Sans", sans-serif;
}

body {
    background-color: #ededef;
}

.container-custom {
    margin: 0;
    padding: 20px;
}

.content {
    margin-top: 76px;
    min-height: 800px;
}

.text-color-1 {
    color: var(--color-1);
}

.text-color-2 {
    color: var(--color-2);
}

.text-color-3 {
    color: var(--color-3);
}

.bg-color-1 {
    background-color: var(--color-1);
}

.bg-color-2 {
    background-color: var(--color-2);
}

.bg-color-3 {
    background-color: var(--color-3);
}

/* Navbar */
.navar {
    position: fixed;
}

.navbar .navbar-nav .nav-item {
    padding-left: 10px;
    padding-right: 10px;
}

.nav-link.active,
.nav-link:hover {
    color: var(--color-3) !important;
}

/* Footer */
.footer {
    min-height: 320px;
    width: 100%;
    /* padding-top: 40px; */
}

.footer-copyright {
    font-size: 12px;
}

/* Home */
/* Banner 1 */
.banner-1 {
    min-height: 800px;
    background-image: url("../images/Foto-new.jpg");
    background-size: cover;
    background-position: center;
    position: relative;
}

.logo-banner-1 {
    position: absolute;
    top: 0;
    color: white;
}

.logo-banner-1 img {
    width: 38px;
    height: 26px;
}

.isi-banner-1 {
    color: white;
    position: absolute;
    bottom: 0;
}

.isi-banner-1 .title {
    font-size: 68px;
    letter-spacing: 10px;
    line-height: 80px;
    font-weight: 600;
    width: 75%;
}

.mask-banner-1 {
    position: absolute;
    width: 100%;
    min-height: 100%;
    background-image: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.853),
        transparent
    );
}

/* Banmer 2 */
.banner-2 {
    min-height: 400px;
    background-image: url("../images/Foto5.jpg");
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    position: relative;
}

.isi-banner-2 {
    color: white;
    position: absolute;
    text-align: center;
}

.isi-banner-2 .title {
    font-size: 28px;
}

.mask-banner-2 {
    position: absolute;
    width: 100%;
    min-height: 100%;
    background-color: rgba(0, 0, 0, 0.441);
}

/* Banner 3 */
.banner-3 {
    min-height: 377px;
    background-color: var(--color-1);
}

/* Banner 4 */
.banner-4 {
    min-height: 377px;
    background-color: var(--color-2);
}

.carousel {
    background-size: cover;
    min-height: 400px;
    background-position: center;
}

.carousel img {
    height: 720px;
    width: 100%;
}

/* Info */
.info-banner {
    min-height: 260px;
    background-image: url("../images/Foto5.jpg");
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    position: relative;
}

.isi-info-banner {
    color: white;
    position: absolute;
    text-align: center;
}

.mask-info-banner {
    position: absolute;
    width: 100%;
    min-height: 100%;
    background-color: rgba(0, 0, 0, 0.441);
}

/* banner 2 */
.info-banner-2 {
    min-height: 560px;
    background-image: url("../images/Foto6.jpg");
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    position: relative;
}

.isi-info-banner-2 {
    color: white;
    position: absolute;
    left: 0;
    bottom: 0;
}

.mask-info-banner-2 {
    position: absolute;
    width: 100%;
    min-height: 100%;
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.72), transparent);
}

.info-banner-3 {
    min-height: 560px;
    background-image: url("../images/Foto7.jpg");
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    position: relative;
}

/* Kontak */
.map-wrap img {
    width: 100%;
    height: 680px;
}

@media only screen and (max-width: 992px) {
    .container-custom {
        padding: 12px;
        margin: 0;
    }

    .navbar .navbar-nav .nav-item {
        padding-left: 0px;
        padding-right: 0px;
    }

    .login-wrap {
        margin-top: 20px;
        width: 100%;
    }

    .login-wrap a {
        width: 100%;
    }

    .isi-banner-1 .title {
        font-size: 42px;
        line-height: 58px;
        width: 100%;
    }

    .banner-3 {
        min-height: 200px;
    }

    .banner-4 {
        min-height: 200px;
    }

    .carousel {
        min-height: 300px;
    }

    .carousel img {
        height: 300px;
    }

    .map-wrap img {
        height: 300px;
    }
}