* {
  font-family: "Poppins", sans-serif;
}


.poppins-100 {
  font-family: "Poppins", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.poppins-200 {
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  font-style: normal;
}

.poppins-300 {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.poppins-400 {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.poppins-500 {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.poppins-600 {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.poppins-700 {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.poppins-800 {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-style: normal;
}

.poppins-900 {
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.lsp {
    letter-spacing: -1.5px;
}

.lsp-2 {
    letter-spacing: -2px;
}
.lsp-3 {
    letter-spacing: -3px;
}

.navbar-brand b {
  letter-spacing: -0.6px;
  font-size: 16px;
  color: #10366e;
}

.navbar-brand img {
    margin-right: 10px;
}

.bg-gradient, .btn.btn-primary.bg-gradient {
    background: #2E92FF !important;
    background: linear-gradient(178deg, rgba(46, 146, 255, 1) 0%, rgba(19, 102, 193, 1) 100%) !important;
}

nav .navbar-nav .nav-link {
    color: #000000 !important;
    font-size: 15px;
}

nav .navbar-nav .nav-link.btn.btn-primary.bg-gradient {
    color: white !important;
    padding-left: 30px;
    padding-right: 30px;
    border-radius: 25px;
}

nav .btn.btn-primary.bg-gradient:hover,nav .btn.btn-primary.bg-gradient:active {
    color: white;
}

header .bg-gradient {
    min-height: 400px;
    border-radius: 32px;
}


.text-dark-primary {
    color: #10366e;
}

.text-header {
        margin-bottom: 0px;
    }

header .lokasi {
    color: white;
    font-style: italic;
    letter-spacing: 8px;
    font-size: 15px;
}

header .img-fluid {
    border: 3px solid white;
    border-radius: 22px;
}

/* Container utama */
.brand-slider {
  overflow: hidden;
  background: #fff;
  padding: 30px 0;
}

/* Track animasi */
.brand-track {
  display: flex;
  width: max-content;
  animation: scroll-left 25s linear infinite;
}

/* Pause saat hover */
.brand-slider:hover .brand-track {
  animation-play-state: paused;
}

/* Logo */
.brand-logo {
  flex: 0 0 auto;
  margin: 0 20px;
}

.brand-logo img {
  height: 25px;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.8;
  transition: 0.3s;
}

.brand-logo img:hover {
  filter: grayscale(0%);
  opacity: 1;
}

.bg-white-blue {
    background-color: #e6f2f6;
}
.text-white-blue {
    color: #b7daff;
}

.bg-dark-blue {
    background-color: #10366e;
}

.bg-white-gradient {
    background: #E6F2F6;
    background: linear-gradient(178deg, rgba(230, 242, 246, 1) 0%, rgba(168, 183, 188, 1) 100%);
}

.bg-navy {
    background-color: #024ea1;
}

.card {
    border: none;
    border-radius: 18px;
    padding: 4px;
}

.card img {
    border-radius: 12px;
}

.grid-img {
    columns: 150px;
}

.grid-img img {
    border: 3px solid #e6f2f6;
    border-radius: 10px;
    width: 100%;
    margin-bottom: 16px;
}

iframe {
    border: 5px solid #2C8FFB;
    border-radius: 20px;
}

a.btnFix {
    display: inline-block;
    position: fixed;
    bottom: 10px;
    right: 10px;
    z-index: 1000;
}

a.btnFix img {
    height: 60px;
    border-radius: 100px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease;
}

/* Animasi kanan → kiri */
@keyframes scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (min-width: 992px) {

    a.btnFix {
        bottom: 20px;
        right: 20px;
    }

    a.btnFix img {
        height: 70px;
    }


    .grid-img {
        columns: 260px;
    }
    .card img {
        border-radius: 18px;
    }
    .card {
        border-radius: 24px;
        padding: 8px;
    }
    .brand-logo {
        flex: 0 0 auto;
        margin: 0 40px;
        }
    .navbar-brand b {
        font-size: 20px;
    }
    header .lokasi {
        font-size: 25px;
        letter-spacing: 18px;
    }
    .text-header {
        margin-bottom: -12px;
    }
    nav .navbar-nav {
        gap: 25px;
    }
}