.pt-30 {
    padding-top: 30px;
}

.silot-color {
    color: #d14528 !important;
}

.silot-colot-blue {
    color: #0146c9;
}

.header-img {
    width: 900px;
    top: 5%;
    left: -10%;
}

@media screen and (max-width: 375px) {
    .box-terms {
        text-align: center;
    }

    .btn-terms {
        margin-bottom: 1em;
    }

    .btn-privacy {
        margin-bottom: 5em;
    }
}

.logo-force {
    width: 140px;
}

.atompay-btn {
    background-color: #fa511f;
    border-color: #ff850b;
}

.custom-logo-footer {
    width: 350px;
    background-color: #fff;
    border-radius: 20px;
    padding: 10px;
}

.atompay-color {
    color: #fa511f !important;
}

/* =====================================================
   PARTNER LOGO AUTO SLIDE ANIMATION (NO GRAYSCALE)
   ===================================================== */
#partners {
  overflow: hidden;
  position: relative;
  background-color: #ffffff !important;
  padding: 40px 0 40px 0; /* ✅ lebih rapat */
  text-align: center;
  margin-top: -20px;  
}

.partners-slider {
  overflow: hidden;
  width: 100%;
  position: relative;
}

.partners-slider .partners-track {
  display: flex;
  flex-wrap: nowrap; /* cegah turun ke bawah */
  align-items: center;
  gap: 60px;
  width: max-content;
  min-width: 200%; /* wajib supaya looping */
  animation: scroll 30s linear infinite;
  -webkit-animation: scroll 30s linear infinite;
  will-change: transform;
}

.partners-slider img {
  height: 60px;
  flex-shrink: 0;
  object-fit: contain;
  -webkit-user-drag: none;
  filter: none;
  opacity: 0.9;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.partners-slider img:hover {
  transform: scale(1.05);
  opacity: 1;
}

/* Keyframes */
@keyframes scroll {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}

@-webkit-keyframes scroll {
 0%   { -webkit-transform: translate3d(0, 0, 0); }
  100% { -webkit-transform: translate3d(-50%, 0, 0); }
}

/* Responsive */
@media (max-width: 991px) {
  .partners-slider .partners-track {
    gap: 40px;
    animation: scroll 20s linear infinite;
  }
  .partners-slider img {
    height: 40px;
  }
}

@media (max-width: 375px) {
  .partners-slider img {
    height: 35px;
  }
}
#product .container { padding-top: 3rem !important; padding-bottom: 2rem !important; } #product .row { margin-bottom: 2rem !important; }

/* =====================================================
   LANGUAGE TOGGLE BUTTON (GLOBAL STYLE)
   ===================================================== */
.language-toggle {
  position: absolute;
  top: 15px;
  left: 20px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

/* Gaya toggle switch */
.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0;
  right: 0; bottom: 0;
  background-color: #ccc;
  transition: 0.3s;
  border-radius: 34px;
}
.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: 3px;
  background-color: white;
  transition: 0.3s;
  border-radius: 50%;
}
input:checked + .slider {
  background-color: #007bff;
}
input:checked + .slider:before {
  transform: translateX(18px);
}

/* Label teks */
.lang-text {
  font-size: 13px;
}

.language-toggle {
  position: absolute;
  top: 15px;
  left: 20px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

/* Toggle switch styling */
.switch {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 24px;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0;
  right: 0; bottom: 0;
  background-color: #ccc;
  transition: 0.3s;
  border-radius: 24px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);
}
.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  top: 3px;
  background-color: white;
  transition: 0.3s;
  border-radius: 50%;
}
.switch input:checked + .slider {
  background-color: #fa511f; /* AtomPay brand */
}
.switch input:checked + .slider:before {
  transform: translateX(18px);
}

/* label text */
.lang-text {
  font-size: 13px;
  color: #333;
  font-weight: 700;
}

/* ensure modal-body position for absolute toggle */
.modal-body.privacy-content { position: relative; }

/* optional small spacing for lists inside modal */
.modal-body .mb-list { margin-bottom: 0.75rem; }

/* =====================================================
   RESPONSIVE FIX: Section & Container (800px ↓)
   ===================================================== */
@media (max-width: 800px) {

  /* Pastikan semua section tidak melebar */
  section.wrapper {
    padding: 2rem 0 !important;
  }

  .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .row {
    margin: 0 !important;
  }

  .col-xl-10,
  .col-lg-10,
  .col-md-10,
  .col-sm-12 {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  /* Teks & elemen tengah */
  h1, h2, h3, p {
    text-align: center !important;
  }

  /* Gambar responsif penuh */
  img, .header-img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
  }

  /* Tombol & toggle tetap rapi */
  .language-toggle {
    top: 10px !important;
    left: 10px !important;
    transform: scale(0.9);
  }
}

/* =====================================================
   RESPONSIVE FIX: Extra Small (320px ↓)
   ===================================================== */
@media (max-width: 480px) {
  .terms-content {
    padding: 0 0.8rem 1rem;
    font-size: 12.5px;
  }

  .language-toggle {
    top: 8px !important;
    left: 8px !important;
    transform: scale(0.85);
  }

  .btn, button {
    font-size: 13px !important;
  }
}

/* =====================================================
   RESPONSIVE FIX — PARTNERS SECTION (800px–320px)
   ===================================================== */
@media (max-width: 600px) {
  html, body {
    overflow-x: hidden !important;
    width: 100%;
  }

  #partners {
    padding: 20px 0 !important;
    margin: 0 auto;
    overflow: hidden !important;
  }

  .partners-slider {
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
  }

  .partners-slider .partners-track {
    gap: 30px !important;
    min-width: 200% !important; /* tetap looping */
    animation: scroll 25s linear infinite !important;
  }

  .partners-slider img {
    height: 38px !important;
    margin: 0 10px !important;
    object-fit: contain;
    flex-shrink: 0;
  }
}

/* ✅ pastikan keyframes tetap aktif (jangan ditaruh dalam @media) */
@keyframes scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}


/* =============================
   FIX: Heading center di mobile
   ============================= */
@media (max-width: 800px) {
  /* Reset kolom teks agar tidak offset ke kanan */
  .col-md-10.offset-md-1.col-lg-5.offset-lg-7.offset-xxl-6 {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 auto !important;
    text-align: center !important;
  }

  /* Pastikan heading & paragraph full width dan center */
  .silot-colot-blue,
  .lead.fs-lg {
    display: block !important;
    text-align: center !important;
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 90% !important;
  }

  /* Reset padding kiri manual */
  [style*="padding-left: 60px"] {
    padding-left: 0 !important;
  }

  /* Center isi flex container juga */
  .d-flex.justify-content-center.justify-content-lg-start {
    justify-content: center !important;
  }
}