/* ============================= */
/* RESET */
/* ============================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{
    width:100%;
    overflow-x:hidden;
    font-family:Arial,sans-serif;
    background:#f5f5f5;
}

/* ============================= */
/* NAVBAR */
/* ============================= */
.navbar{

    position:fixed;
    top:0;
    left:0;

    width:100%;
    height:80px;

    background:#1f4f95;

    z-index:9999;

    display:flex;
    align-items:center;

    box-shadow:0 2px 10px rgba(0,0,0,.15);

}
.navbar .container,
.navbar .container-fluid{
    background:transparent !important;
}

.navbar-brand img{
    background:transparent;
}

/* Menu */

.nav-link{

    height:80px;

    display:flex;

    align-items:center;

    padding:0 18px;

    color:#fff;

    background:transparent;

    border:none;

    text-decoration:none;

    font-size:16px;

    font-weight:500;

}

.nav-link:hover,
.nav-link.active{
    background: rgba(255,255,255,.18);
    color: #fff;
}

/* Dropdown */

.dropdown-menu{
    border:none;
    border-radius:8px;
    box-shadow:0 10px 25px rgba(0,0,0,.15);
    overflow:hidden;
}

.dropdown-item{
    padding:12px 18px;
}

.dropdown-item:hover{
    background:#f5f5f5;
}

.dropdown-item.active{
    background:#07357e;
    color:#fff;
}

/* =========================== */
/* HERO */
/* =========================== */

#beranda{
    margin-top:0;
}

#heroCarousel{
    width:100%;
    height:650px;
}

#heroCarousel .carousel-item{
    height:650px;
}

#heroCarousel .carousel-item img{
    width:100%;
    height:100%;
    object-fit:cover;
}

#heroCarousel img {
    width: 100%;
    height: auto;
    object-fit: contain;
    background: #f5f5f5;
}

.hero-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.4);
    z-index:2;
}

.hero-content{
    position:absolute;
    top:50%;
    left:8%;
    transform:translateY(-50%);
    z-index:3;
    color:#fff;
    max-width:50px;
}

.hero-content h1{
    font-size:58px;
    font-weight:700;
    margin-bottom:20px;
}

.hero-content p{
    font-size:22px;
    line-height:1.7;
}

/* ============================= */
/* RESPONSIVE */
/* ============================= */
@media (max-width:991px){

    .navbar{
        height:auto;
        padding:10px 0;
    }

    .navbar-toggler{
        display:block;
    }

    .navbar-menu{
        display:none;
        width:100%;
        background:#fff;
        margin-top:10px;
        border-radius:10px;
        box-shadow:0 10px 25px rgba(0,0,0,.15);
    }

    .navbar-menu.show{
        display:block;
    }

    .navbar-nav{
        display:block;
        width:100%;
    }

    .nav-item{
        width:100%;
    }

    .nav-link,
    .dropdown-button{
        display:flex;
        justify-content:space-between;
        align-items:center;
        width:100%;
        height:auto;
        padding:16px 20px;
        color:#333;
        background:#fff;
        border:none;
        text-align:left;
    }

    .nav-link:hover,
    .dropdown-button:hover{
        background:#f5f5f5;
        color:#1f4f95;
    }

    .dropdown-custom-menu{
        position:static;
        display:none;
        width:100%;
        box-shadow:none;
        border-radius:0;
        padding:0;
        background:#f8f9fa;
    }

    .dropdown-custom-menu.show{
        display:block;
    }

    .dropdown-custom-menu li a{
        padding:14px 40px;
        color:#333;
    }

    .dropdown-custom-menu li a:hover{
        background:#07357e;
        color:#fff;
    }

    .btn-primary {
            background-color: #07357e !important;
            border-color: #07357e !important;
        }

}

