:root {
    --red-dark: #8B0000;
    --blue-dark: #001f3f;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400; /* sesuaikan: 400 = Regular, 700 = Bold, dsb */
  src: url('/Poppins/Poppins-Regular.ttf') format('truetype');
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: #f8f9fa;
    margin: 0;
}

.navbar-custom {
    background-color: var(--red-dark);
}
.navbar-custom .navbar-brand,
.navbar-custom .nav-link {
    color: white;
}
.navbar-custom .nav-link:hover {
    color: #ffc107;
}
.navbar-custom .nav-link.active {
    color: #ffc107 !important;
    /* font-weight: bold; */
}

.hero {
    margin-top: 0;
    margin-bottom: 30px;
    background: linear-gradient(135deg, rgba(0,31,63,1),rgba(139,0,0,0.9));
    color: white;
    /* padding: 150px 0; */
    padding-top: 170px;
    padding-bottom: 130px;
    text-align: center;
}

.feature-card {
    border: none;
    border-radius: 12px;
    padding: 25px;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    background-color: white;
}
.feature-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}
.feature-icon {
    font-size: 2.8rem;
    margin-bottom: 15px;
}

.footer {
    background-color: var(--blue-dark);
    color: white;
    padding: 20px 0;
    text-align: center;
}

.login-card {
      background-color: #fff;
      color: #333;
      border-radius: 12px;
      padding: 40px 30px;
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
      width: 100%;
      max-width: 420px;
    }

    .form-control:focus {
      box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5);
      border-color: #ffc107;
    }

    .btn-login {
      background-color: var(--blue-dark);
      color: white;
    }

    .btn-login:hover {
      background-color: #03254c;
    }

    .logo-title {
      font-weight: bold;
      font-size: 1.5rem;
      color: var(--blue-dark);
    }

    .header-bar {
      background-color: var(--blue-dark);
      color: white;
      padding-top: 100px;
      padding-bottom: 50px;
      text-align: center;
    }

    .table thead {
      background-color: var(--blue-dark);
      color: white;
    }

    .badge-admin {
      background-color: var(--red-dark);
    }