body {
    font-family: 'Segoe UI', sans-serif;
    scroll-behavior: smooth;
  }
  
  .hero {
    background-image: url('../img/hero-banner.jpg');
    background-size: cover;
    background-position: center;
    height: 100vh;
  }
  
  .hero h1 {
    text-shadow: 2px 2px 5px rgba(0,0,0,0.5);
  }
  
  .card-title {
    font-weight: bold;
    color: #b30000;
  }
  
  footer a:hover {
    text-decoration: underline;
  }
  .hero-slide {
    height: 100vh;
    background-size: cover;
    background-position: center;
    position: relative;
  }
  
  .hero-slide .overlay {
    background-color: rgba(0, 0, 0, 0.55);
    padding: 40px;
    border-radius: 10px;
  }
  
  .carousel-fade .carousel-item {
    transition: opacity 1s ease-in-out;
  }
  .hero-slide {
    height: 100vh;
    background-size: cover;
    background-position: center;
  }
  
  .hero-overlay {
    position: absolute;
    inset: 0; /* full width & height */
    background-color: rgba(0, 0, 0, 0.6); /* Transparan gelap */
    z-index: 10;
    text-shadow: 1px 1px 5px rgba(0,0,0,0.5);
  }
  
  .carousel-inner,
  .carousel-item,
  .hero-slide {
    height: 100vh;
  }
  .navbar-brand img {
    height: 40px;
  }
  .navbar-transparent {
    background-color: rgba(200, 0, 0, 0.7); /* merah dengan transparansi */
    transition: background-color 0.4s ease;
    backdrop-filter: blur(5px); /* efek blur kaca */
  }
  
  .navbar-transparent .nav-link,
  .navbar-transparent .navbar-brand,
  .navbar-transparent .btn-outline-light {
    color: #fff;
  }
  
  .navbar-transparent .nav-link:hover {
    color: #ffdada;
  }