body{
    background-color:#FFF9FC;
    font-family:Segoe UI, sans-serif;
}

/* Navbar */

.navbar-custom{
    background:linear-gradient(
        90deg,
        #89CFF0,
        #F8C8DC
    );
}

.logo{
    width:50px;
    height:50px;
    object-fit:contain;
}

/* Hero */

.hero-title{
    font-size:3rem;
    font-weight:bold;
    color:#444;
}

.hero-text{
    font-size:1.1rem;
    color:#666;
    margin-bottom:25px;
}

.hero-image{
    max-width: 500px;
    width: 100%;
    height: auto;
    transition: 0.3s;
}

.hero-image:hover{
    transform: scale(1.03);
}

/* Card */

.card-custom{
    border:none;
    border-radius:20px;
    box-shadow:0 4px 15px rgba(0,0,0,0.08);
    transition:0.3s;
}

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

/* Tombol */

.btn-custom{
    background:#89CFF0;
    color:white;
    border:none;
}

.btn-custom:hover{
    background:#6DBEEA;
    color:white;
}

.btn-register{
    background:#F8C8DC;
    color:#444;
    border:none;
}

.btn-register:hover{
    background:#f4b8d0;
    color:#444;
}

/* Dashboard */

.title{
    color:#555;
    font-weight:bold;
}

/* Footer */

.footer-custom{
    background:#0F172A;
    color:white;
    padding:60px 0 20px;
    margin-top:80px;
}

.footer-custom h4{
    font-weight:bold;
    margin-bottom:20px;
}

.footer-custom p{
    color:#CBD5E1;
}

.footer-links{
    list-style:none;
    padding:0;
}

.footer-links li{
    margin-bottom:10px;
}

.footer-links a{
    color:#CBD5E1;
    text-decoration:none;
}

.footer-links a:hover{
    color:#F8C8DC;
}

.footer-custom hr{
    border-color:#334155;
    margin:30px 0;
}

/* Card Handphone */

.hp-card{
    border:none;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 4px 15px rgba(0,0,0,0.08);
    transition:0.3s;
}

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

.hp-image{
    width:100%;
    height:260px;
    object-fit:cover;
}

.hp-card .card-body{
    background:white;
}