body{
    background-color: #f5f7fb;
}

.navbar{
    background-color: #0d6efd;
}

.navbar-brand{
    color: white !important;
    font-weight: bold;
}

.nav-link{
    border-radius: 8px;
    transition: 0.3s;
}

.nav-link:hover{
    background: rgba(255,255,255,0.2);
}

.hero{
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
    url('https://images.unsplash.com/photo-1522708323590-d24dbb6b0267?q=80&w=1200');

    background-size: cover;
    background-position: center;

    height: 350px;

    display: flex;
    align-items: center;

    color: white;
}

.search-box{
    background: white;
    padding: 20px;
    border-radius: 15px;
    margin-top: -40px;
    position: relative;
    z-index: 100;

    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.card-kos{
    border: none;
    border-radius: 15px;
    overflow: hidden;
    transition: 0.3s;
}

.card-kos:hover{
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.card-kos img{
    height: 200px;
    object-fit: cover;
}

.card{
    transition:0.3s;
}

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

.harga{
    color: #0d6efd;
    font-weight: bold;
    font-size: 18px;
}

footer{
    background: #0d6efd;
    color: white;
    padding: 20px;
    margin-top: 50px;
}

@media (max-width:768px){
    .card-img-top{
        height:180px;
    }
}

@media (max-width:768px){

    .hero-title{
        font-size:32px !important;
    }

    .hero-subtitle{
        font-size:16px !important;
    }

}

@media (max-width: 991px){

    .navbar-nav{
        margin-top:15px;
    }

    .navbar-nav .btn{
        width:100%;
    }

    .dropdown-menu{
        width:100%;
    }

}

.sidebar{
background: #1e293b;
}

.sidebar-link{
color: #fff !important;
border-radius: 10px;
padding: 12px 15px;
transition: all .3s ease;
}

.sidebar-link:hover{
background: #2563eb;
color: #fff !important;
transform: translateX(5px);
}

.sidebar-link.active{
background: #2563eb;
color: #fff !important;
}

@media(max-width:768px){
.sidebar{
    min-height: auto !important;
}

}

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

.dashboard-card:hover{
    transform: translateY(-5px);
}

@media(max-width:768px){

    .card-body h1{
        font-size: 2rem;
    }

}

.sidebar{
    background:#1e293b;
    min-height:100vh;
    flex-shrink:0;
}

.sidebar-link{
    color:#fff;
    border-radius:10px;
    padding:12px 15px;
    transition:.3s;
}

.sidebar-link:hover{
    background:#2563eb;
    color:#fff;
}

@media(max-width:991px){

    .sidebar{
        display:none;
    }

}

.sidebar{
background:#1e293b;
min-height:100vh;
flex-shrink:0;
}

.sidebar-link{
color:#fff !important;
padding:12px 15px;
border-radius:10px;
transition:.3s;
}

.sidebar-link:hover{
background:#2563eb;
color:#fff !important;
}

.card{
transition:.3s;
}

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

@media(max-width:991px){

.sidebar{
    display:none;
}

}