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

	.navbar-custom {
	  background: linear-gradient(90deg, rgba(22, 69, 134, 1), #fff);
	  border-bottom: 5px solid #f4c029;
	  box-shadow: 0 2px 5px rgba(12, 86, 191, 0.8);
	  position: sticky;
	  top: 0;
	  z-index: 1030; /* pastikan di atas hero image */
	}
    .navbar-brand img {
      max-height: 50px;
    }

    .nav-link {
      color: #343a40 !important;
      font-weight: 600;
      transition: all 0.3s ease;
    }

    .nav-link:hover {
      color: #0d6efd !important;
    }

    .swiper-slide .card {
      height: 100%;
      border-radius: 12px;
      box-shadow: 0 5px 20px rgba(0,0,0,0.05);
      overflow: hidden;
      transition: transform 0.3s;
    }

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

    .card-img-top {
      height: 520px;
      object-fit: cover;
    }

    .swiper-button-next,
    .swiper-button-prev {
      color: #0d6efd;
    }

    h2.section-title {
      font-weight: 700;
      font-size: 2.2rem;
      color: #0d6efd;
    }

    .btn-primary {
      background-color: #0d6efd;
      border: none;
    }

    .btn-primary:hover {
      background-color: #084298;
    }

    /* css bagian header */
     .header {
        background-color: #24346D;
        color: white;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 40px; /* Tambahkan padding kanan-kiri */
      }

      .header-left {
        display: flex;
        align-items: center;
        gap: 10px;
      }

      .header-left img {
        height: 60px;
        border-radius: 6px;
      }
    /* css bagian header */


    /* Styling khusus untuk section #about */
    #about {
      position: relative;
      overflow: hidden;
    }

    /* Tambah aksen dekorasi berupa blob */
    #about::before {
      content: "";
      position: absolute;
      top: -50px;
      left: -50px;
      width: 200px;
      height: 200px;
      background: rgba(59,130,246,0.15);
      border-radius: 50%;
      filter: blur(60px);
      z-index: 0;
    }
    #about::after {
      content: "";
      position: absolute;
      bottom: -60px;
      right: -60px;
      width: 250px;
      height: 250px;
      background: rgba(16,185,129,0.15);
      border-radius: 50%;
      filter: blur(70px);
      z-index: 0;
    }

    #about .container {
      position: relative;
      z-index: 1; /* supaya konten di atas dekorasi */
    }

    /* Heading */
    #about h2 {
      font-size: 2.2rem;
      letter-spacing: 1px;
      margin-bottom: 2rem;
      text-transform: uppercase;
    }

    /* Paragraf */
    #about p {
      font-size: 1rem;
      line-height: 1.7;
      color: #334155;
    }

    /* List layanan */
    #about .list-group-item {
      border: none;
      font-size: 0.95rem;
      padding-left: 0;
      display: flex;
      align-items: start;
    }
    #about .list-group-item i {
      font-size: 1.1rem;
      margin-top: 3px;
    }

    /* Tombol */
    #about .btn {
      border-radius: 50px;
      font-weight: 500;
      transition: all .3s ease;
    }
    #about .btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 18px rgba(0,0,0,0.15);
    }

    /* Gambar GIF */
    #about img {
      max-width: 85%;
      border-radius: 1.25rem;
      box-shadow: 0 8px 24px rgba(0,0,0,0.12);
      animation: float 4s ease-in-out infinite;
    }

    /* Animasi float untuk GIF */
    @keyframes float {
      0% { transform: translateY(0); }
      50% { transform: translateY(-10px); }
      100% { transform: translateY(0); }
    }

    /* Dropdown muncul saat hover (hanya di desktop, min-width 992px) */
    @media (min-width: 992px) {
      .navbar .dropdown:hover .dropdown-menu {
        display: block;
        margin-top: 0; /* biar nempel */
      }
    }  

      /* Hover animasi untuk list */
      .service-item {
        transition: transform 0.3s, background 0.3s;
        cursor: pointer;
      }
      .service-item:hover {
        transform: translateX(8px);
        background: rgba(0, 123, 255, 0.05);
      }

      /* Parallax efek */
      .parallax-img img {
        transition: transform 0.5s ease;
      }
      .parallax-img:hover img {
        transform: scale(1.05) rotate(1deg);
      }

      /* Ripple button */
      .ripple {
        position: relative;
        overflow: hidden;
      }
      .ripple-effect {
        position: absolute;
        border-radius: 50%;
        background: rgba(255,255,255,0.5);
        transform: scale(0);
        animation: ripple 0.6s linear;
        pointer-events: none;
      }
      @keyframes ripple {
        to { transform: scale(4); opacity: 0; }
      }

          .section-title {
          font-weight: 700;
          font-size: 1.3rem;
          margin-bottom: .5rem;
        }
        .highlight-bar {
          height: 5px;
          background: linear-gradient(90deg, #f1c40f, #e67e22);
          margin-bottom: 1.5rem;
          border-radius: 4px;
        }
        .announcement-card {
          border: none;
          border-radius: 12px;
          box-shadow: 0 2px 6px rgba(0,0,0,0.08);
          transition: transform .2s;
        }
        .announcement-card:hover {
          transform: translateY(-3px);
        }
        .announcement-card img {
          object-fit: cover;
          height: 100%;
          width: 120px;
          border-radius: 12px 0 0 12px;
        }
        .agenda-card {
          border: 2px dashed #ddd;
          border-radius: 16px;
          text-align: center;
          padding: 3rem 1rem;
          background: #fafafa;
          box-shadow: inset 0 2px 8px rgba(0,0,0,0.03);
        }
        .agenda-card i {
          font-size: 64px;
          color: #e67e22;
          margin-bottom: 1rem;
        }
      
            #post-all .list-group-item:hover {
                background-color: #176ab0; /* warna hover (bisa diganti sesuai kebutuhan) */
                color: #fff;
                cursor: pointer;
            }

            /* Aktif saat diklik */
            #post-all .list-group-item:active {
                background-color: #1565c0; /* warna lebih gelap saat diklik */
                color: #fff;
                transform: scale(0.98); /* efek sedikit mengecil */
            }

            /* Transisi biar halus */
            #post-all .list-group-item {
                transition: all 0.2s ease;
            }
               /* Hover efek untuk semua link di navbar */
            .navbar-nav .nav-link:hover {
                color: #0056b3; /* Warna saat hover */
            }

            /* Aktif saat diklik */
            .navbar-nav .nav-link:active {
                color: #003580; /* Warna saat aktif */
                transform: scale(0.98); /* Sedikit mengecil saat ditekan */
            }

            /* Dropdown item hover */
            .dropdown-menu .dropdown-item:hover {
                background-color: #f8f9fa; /* Background saat hover di dropdown */
                color: #0056b3;
            }

            /* Dropdown item active */
            .dropdown-menu .dropdown-item:active {
                background-color: #e9ecef; /* Background saat aktif */
                color: #003580;
            }

            .navbar {
                background-color: #24346D;
                border-bottom: solid 3px orange;
            }

            .navbar .nav-link {
                color: white !important;
                font-weight: 400 !important;
                font-size: 16px !important; 
            }

            .img-logo {
                width: 25%;
            }

            @media  only screen and (max-width: 820px) {
                .navbar .nav-link {
                    color: white !important;
                }

                .img-logo {
                    width: 50% !important;
                }

                #clock {
                    display: none
                }
            }
            .cursor-pointer{
                cursor: pointer;
            }

              .btn {
        min-width: 140px;
        font-weight: 500;
        border-radius: 8px;
      }

      .active-custom {
        background-color: #eef3ff;
        border-color: #3366ff;
        color: #3366ff;
      }

      .active-custom:hover {
        background-color: #dbe5ff;
      }

    .header-container {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 9999;
      background-color: #fff; /* penting agar tidak transparan saat scroll */
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    }

    .breadcrumb-item a {
        text-decoration: none;
      }