/*


--------------------------------------------- */
/*
---------------------------------------------
font & reset css
---------------------------------------------
*/
@import url("https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i");
/*
---------------------------------------------
reset
---------------------------------------------
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, div
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q,
s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
figure, header, nav, section, article, aside, footer, figcaption {
  margin: 0;
}

/* Mobile-specific logo scaling: S, M, L sizes */
@media (max-width: 320px) {
  .main-banner .logo-container .responsive-logo,
  .main-banner .responsive-logo,
  .responsive-logo {
    width: 190px !important; /* Mobile S */
    margin-bottom: -3rem !important;
  }
}

@media (min-width: 321px) and (max-width: 375px) {
  .main-banner .logo-container .responsive-logo,
  .main-banner .responsive-logo,
  .responsive-logo {
    width: 190px !important; /* Mobile M */
  }
}

@media (min-width: 376px) and (max-width: 425px) {
  .main-banner .logo-container .responsive-logo,
  .main-banner .responsive-logo,
  .responsive-logo {
    width: 190px !important; /* Mobile L */
  }
}

/* Modern Route Map Styling */

@media (min-width: 768px) {
  .route-map-section h1 {
    font-size: 3rem;
  }
}



.map-card {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
              0 2px 4px -1px rgba(0, 0, 0, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.map-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
              0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.map-card img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.5s ease;
}

.map-card:hover img {
  transform: scale(1.02);
}

.map-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.5rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.map-overlay h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

@media (min-width: 768px) {
  .map-overlay h2 {
    font-size: 2rem;
  }
}



.map-overlay p {
  color: #e2e8f0;
  margin: 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.map-overlay .distance-badge {
  background: #dc2626;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-weight: 600;
  font-size: 0.875rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;
}

.map-card:hover .distance-badge {
  transform: scale(1.05);
}

@media (max-width: 640px) {
  .route-map-section {
    padding: 2rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .map-card {
    width: 100%;
    margin: 0 auto;
  }

  .map-overlay {
    padding: 1rem;
  }

  .map-overlay h2 {
    font-size: 1.25rem;
  }

  .map-overlay p {
    font-size: 0.875rem;
  }

  .distance-badge {
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
  }
}

/* rute */
    .map-card {
      position: relative;
      overflow: hidden;
      border-radius: 1rem;
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
      transition: all 0.4s ease;
      background: #fff;
    }

    .map-card:hover {
      transform: translateY(-6px) scale(1.02);
      box-shadow: 0 12px 25px rgba(0, 0, 0, 0.25);
    }

    .map-overlay {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
      color: white;
      padding: 1.25rem;
      border-radius: 0 0 1rem 1rem;
    }

    /* Responsif tambahan (gambar proporsional di layar kecil) */
    @media (max-width: 640px) {
      .map-card img {
        max-height: 320px;
        object-fit: cover;
      }
    }

/* Main banner / cover image styling */
.main-banner {
  position: relative;
  width: 100%;
  overflow: hidden;
  display: block;
  /* make banner span full viewport so cover looks 'full' even with absolute header */
  height: 100vh;
  min-height: 560px;
}
/* ===== Small-screen hero overrides (mobile M & similar) ===== */
/* Keeps hero logo small and heading centered without touching global layout rules. */
@media (max-width: 480px) {
  /* ensure caption padding so heading sits vertically centered on small phones */
  .main-banner .video-overlay.header-text .caption {
    padding-top: 2.5rem !important;
    padding-bottom: 1.5rem !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center !important;
  }

  .main-banner .video-overlay.header-text .caption h2 {
    font-size: 2.5rem !important;
    line-height: 1.05 !important;
    margin: 0.25rem auto !important;
    width: 100% !important;
    text-align: center !important;
    font-weight: 700;
  }

  /* neutralize negative margins coming from global rules */
  .main-banner .logo-container,
  .logo-container {
    margin-bottom: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
  }

  /* constrain hero logo to a compact size on small screens */
  .main-banner .logo-container .responsive-logo,
  .main-banner .responsive-logo,
  .responsive-logo {
    /* allow per-breakpoint rules to control logo size; fall back to auto */
    width: auto !important;
    max-width: 80% !important;
    height: auto !important;
    display: block !important;
  }
}

.main-banner .cover-img {
  width: 100%;
  height: 100%; /* fill the banner container */
  display: block;
  object-fit: cover;
  object-position: center center;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: transform 0.6s ease;
}

.main-banner .cover-img:focus,
.main-banner .cover-img:hover {
  transform: scale(1.01);
}

.video-overlay.header-text {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none; /* allow clicks to pass through except on interactive children */
}

.video-overlay .caption { pointer-events: auto; }

/* Hero caption responsive text sizing */
.video-overlay .caption {
  max-width: 1100px;
  padding: 0 1rem;
}

.video-overlay .caption h2 {
  /* fluid scaling: min 2rem, scales with viewport, max 5rem */
  font-size: clamp(2rem, 8vw, 5rem);
  line-height: 1.03;
  margin: 0;
  text-align: center;
  font-weight: 800;
  color: #ffffff;
  text-shadow: 0 6px 18px rgba(0,0,0,0.45);
}

.video-overlay .caption h2 em {
  display: block;
  font-style: normal;
  color: #ff7a5f;
  font-weight: 800;
  font-size: 0.85em; /* slightly smaller than main line */
}

.video-overlay .caption .main-button { margin-top: 1.25rem; }


@media (max-width: 767px) {
  /* Header adjustments for phones */
  .header-area { height: 64px; }
  .header-area .main-nav { min-height: 64px; }
  .header-area .main-nav .logo { line-height: 64px; }
  .header-area .main-nav .logo img.logo-img,
  .logo-container img.responsive-logo {
    max-height: 300px;
    width: auto;
  }

  /* Make hero slightly shorter on phones for better above-the-fold content */
  .main-banner {
    /* make hero fill the full viewport on phones so it appears 'full' */
    height: 100vh;
    min-height: 360px;
  }
  .main-banner .cover-img {
    height: 100%;
  }

  /* Overlay / caption adjustments */
  .video-overlay.header-text {
    padding: 0.75rem;
    align-items: center;
    justify-content: center;
  }
  .video-overlay .caption {
    padding: 0 1rem;
    text-align: center;
    width: 100%;
    max-width: 92%;
  }
  .video-overlay .caption h2 {
    font-size: 1.6rem;
    line-height: 1.05;
    margin: 0.25rem 0 0.5rem;
  }
  .video-overlay .caption em { display: block; font-style: normal; }

  /* CTA smaller but tappable */
  .main-button a {
    padding: 0.55rem 0.9rem;
    font-size: 0.95rem;
    border-radius: 8px;
  }

  /* Map card spacing on small screens */
  .map-card { margin: 1rem; border-radius: 0.75rem; }
  .map-card img { border-radius: 0.75rem; }

  /* Ensure text in overlays is readable on small screens */
  .map-overlay { padding: 0.75rem; }
  .map-overlay h2 { font-size: 1.15rem; }

  /* Slight adjustments to other sections to improve stacking */
  .registrasi-section .registrasi-container { gap: 1rem; }
}

/* Very small phones adjustments */
@media (max-width: 420px) {
  .header-area { height: 56px; }
  .header-area .main-nav { min-height: 56px; }
  .header-area .main-nav .logo { line-height: 56px; }
  .header-area .main-nav .logo img.logo-img,
  .logo-container img.responsive-logo {
    max-height: 100px;
  }

  /* ensure full-bleed cover on very small phones */
  .main-banner { height: 100vh; min-height: 300px; }
  .main-banner .cover-img { height: 100%; }

  /* push overlay content slightly lower so buttons/CTA are reachable */
  .video-overlay.header-text {
    align-items: flex-end;
    padding-bottom: 2.25rem;
  }

  .video-overlay .caption h2 {
    font-size: 2rem;
    line-height: 1.02;
    margin-bottom: 0.5rem;
    font-weight: 700;
  }

  .video-overlay .caption p { font-size: 0.95rem; }

  .main-button a {
    padding: 0.5rem 0.9rem;
    font-size: 0.92rem;
  }

  .map-card { margin: 0.75rem; }
}

/* Make main content text left-aligned on small/mobile screens (except hero) */
@media (max-width: 480px) {
  /* Left-align only paragraph text on small/mobile screens */
  .about-section .about-text p{
    text-align: left !important;
  }

  /* Keep headings and hero centered; only paragraphs are affected above */
}


/* desain jersey */
.section-title {
    text-align: center;
}

.desain-body{
    padding: 100px 20px;
    background-image: url('../images/faq.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed; /* background stabil saat scroll/expand */
    position: relative;
}

.sub-title {
    text-align: center;
    font-size: 2.2rem;
    color: #33c566;
    font-weight: 600;
    margin-bottom: 2rem;
}

.card-custom {
    background: #141b2d;
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    position: relative;
    overflow: hidden;
}

.card-custom::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; height: 8px;
    background: linear-gradient(90deg, #1d6937, #33af5f);
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
}

/* Layout dua kolom */
.jersey-layout {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.jersey-images {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
}

.jersey-images img {
    width: 230px;
    max-width: 100%;
    border-radius: 0.75rem;
    transition: transform 0.3s ease;
}



.jersey-table {
    flex: 1;
}

.table-dark {
    background: transparent;
    border-collapse: separate;
    border-spacing: 0 8px;
}

.table-dark thead th {
    background: #0f1729;
    color: #2a9d52;
    font-weight: 600;
    border: none;
}

.table-dark tbody tr {
    background: #1b243a;
    transition: 0.3s;
}

.table-dark tbody tr:hover {
    background: #25314f;
}

.table-dark td, .table-dark th {
    border: none;
    padding: 0.75rem 1rem;
}

.note {
    font-size: 0.85rem;
    color: #ccc;
    text-align: center;
    margin-top: 1.5rem;
}


.medal-gallery {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 2rem;
    margin-top: 1rem;
}

.medal-gallery img {
    width: 800px;
    max-width: 850%;
    border-radius: 0.5rem;
    transition: transform 0.3s ease;
}


/* Responsif */
@media (max-width: 768px) {
    .medal-gallery {
        gap: 1rem;
    }
    .medal-gallery img {
        width: 350px;
    }
}
@media (max-width: 525px) {
    .medal-gallery {
        gap: 1rem;
    }
    .medal-gallery img {
        width: 280px;
    }
}


/* Responsif: ubah ke tumpuk di layar kecil */
@media (max-width: 992px) {
    .jersey-layout {
        flex-direction: column;
    }
    .jersey-images {
        justify-content: center;
    }
    .jersey-table {
        width: 100%;
    }
    .jersey-images img {
    width: 170px;
    max-width: 100%;
}
}

/* Responsif: ubah ke tumpuk di layar kecil */
@media (max-width: 425px) {
    .jersey-layout {
        flex-direction: column;
    }
    .jersey-images {
        justify-content: center;
    }
    .jersey-table {
        width: 100%;
    }
    .jersey-images img {
    width: 170px;
    max-width: 100%;
}
}



/* Logo in header - responsive rules */
.header-area .main-nav .logo {
  line-height: 80px;
  color: #fff;
  font-size: 32px;
  font-weight: 800;
  text-transform: uppercase;
  float: left;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  display: flex;
  align-items: center;
  height: 100%;
}

.header-area .main-nav .logo img.logo-img {
  max-height: 50px;
  width: auto;
  object-fit: contain;
  transition: max-height 0.3s ease;
  margin-top: 15px;
}

@media (max-width: 767px) {
  .header-area .main-nav .logo img.logo-img {
    max-height: 40px;
  }
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}

ul, li {
  padding: 0;
  margin: 0;
  list-style: none;
}

header, nav, section, article, aside, footer, hgroup {
  display: block;
}

* {
  box-sizing: border-box;
}

html, body {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  background-color: #fff;
  font-size: 16px;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none !important;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0px;
  margin-bottom: 0px;
}

ul {
  margin-bottom: 0px;
}

p {
  font-size: 14px;
  line-height: 25px;
  color: #7a7a7a;
}

/*
---------------------------------------------
global styles
---------------------------------------------
*/
/* Responsif Logo */
.logo-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: -5rem;
}

.responsive-logo {
  width: 500px;
  max-width: 70%;
  height: auto;
  transition: transform 0.3s ease;
}

/* ===== Tentang Kami Section ===== */
.about-section {
 position: relative;
  padding: 100px 0;
  background: url("../images/bg-tentang.png") center/cover no-repeat;
  color: #fff;
  margin-top: -0.4rem;
}

/* Overlay gelap agar teks terlihat jelas */
.about-section::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.55); /* ubah tingkat kegelapan di sini */
  z-index: 0;
}

/* Pastikan konten di atas overlay */
.about-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2rem;
}

/* Teks tetap kontras di atas background */
.about-text {
  flex: 1 1 500px;
  color: #b6b6b6;
  animation: fadeInLeft 1s ease;
}

.about-text h2 {
  font-size: 2.8rem;
  margin-bottom: 20px;
  font-weight: 700;
  position: relative;
}

.about-text h2 span {
  color: #ff0000;
}

.about-text p {
  font-size: 1.1rem;
  line-height: 1.8;
  margin-bottom: 20px;
  color: #f6f6f6;
}


.btn-about:hover {
  background: linear-gradient(135deg, #f9735b, #ff0000);
  box-shadow: 0 6px 20px rgba(255, 0, 0, 0.6);
  transform: translateY(-3px);
}

/* Gambar */
.about-image {
  flex: 1 1 400px;
  text-align: center;
  animation: fadeInRight 1s ease;
}

.about-image img {
  width: 100%;
  max-width: 500px;
  border-radius: 20px;
  box-shadow: 0 6px 20px rgba(46, 54, 139, 0.642);
  transition: transform 0.4s ease, box-shadow 0.4s ease;

}

.about-image img:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
}

/* Animasi masuk */
@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Responsif */
@media (max-width: 992px) {
  .about-content {
    flex-direction: column;
    text-align: center;
  }

  .about-text {
    animation: fadeInUp 1s ease;
  }

  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(40px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}
/* end */


.event-schedule-section {
  background-color: #0d0d0d;
  color: #fff;
  padding: 100px 0;
  position: relative;
}

.schedule-image img {
  border-radius: 20px;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  width: 100%;
  max-width: 500px;
}

.schedule-image img:hover {
  transform: scale(1.03);
  box-shadow: 0 10px 30px rgba(237, 86, 59, 0.3);
}

.schedule-info .subtitle {
  font-size: 1rem;
  letter-spacing: 2px;
  color: #ff0000;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 8px;
}

.schedule-info .title {
  font-size: 2.2rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 40px;
  line-height: 1.3;
}

.schedule-item {
  margin-bottom: 30px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.schedule-item h4 {
  font-size: 1.2rem;
  font-weight: 700;
  color: #ff0000;
  margin-bottom: 8px;
}

.schedule-item p {
  font-size: 1rem;
  color: #ddd;
  margin-bottom: 5px;
}

.schedule-item i {
  color: #ff0000;
  margin-right: 10px;
  width: 18px;
}

/* Responsive */
@media (max-width: 991px) {
  .event-schedule-section {
    text-align: center;
    padding: 80px 20px;
  }

  .schedule-info {
    margin-top: 40px;
  }

  .schedule-item {
    text-align: left;
  }

  .schedule-info .title {
    font-size: 1.9rem;
  }
}


/* star regis */
.registrasi-section {
  background: radial-gradient(circle at top, #0b0b0b 0%, #000 100%);
  color: #fff;
  padding: 80px 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.section-title,
.route-map-section h1 {
  font-size: 2.5rem;
  font-weight: 800;
  color: #ff0000;
  letter-spacing: 2px;
  margin-bottom: 50px;
  text-shadow: 0 0 10px rgba(255, 72, 0, 0.605);
}

.registrasi-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 40px;
}

.registrasi-card {
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid rgba(255, 0, 0, 0.25);
  border-radius: 20px;
  width: 420px;
  padding: 30px;
  text-align: left;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  backdrop-filter: blur(6px);
}

.registrasi-card:hover {
  /* transform: translateY(-10px); */
  box-shadow: 0 0 20px rgba(255, 187, 0, 0.4);
}

.registrasi-card h3 {
  color: #ff0000;
  font-size: 1.8rem;
  margin-bottom: 15px;
  text-shadow: 0 0 10px rgba(255, 21, 0, 0.6);
}

.registrasi-card h4 {
  color: #ff7300;
  margin-top: 25px;
}

.registrasi-card ul {
  list-style: none;
  padding-left: 0;
  margin: 10px 0 20px 0;
}

.registrasi-card ul li {
  padding: 5px 0;
  position: relative;
}

.registrasi-card ul li::before {
  content: "•";
  color: #ff0000;
  font-weight: bold;
  margin-right: 8px;
}

.btn-daftar {
  display: block;
  text-align: center;
  padding: 12px 20px;
  border: 2px solid #ff0000;
  border-radius: 12px;
  color: #ff0000;
  font-weight: bold;
  text-decoration: none;
  transition: all 0.3s ease;
  margin-top: 10px;
}

.btn-daftar:hover {
    background: linear-gradient(135deg, #f9735b, #ff0000);
  box-shadow: 0 6px 20px rgba(255, 0, 0, 0.6);
  transform: translateY(-3px);
  color: #fff;
}


.hadiah-card {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 15px 20px;
  margin-top: 25px;
  border-left: 4px solid #ff7300;
}

.hadiah-card h4 {
  color: #ff7300;
  margin-bottom: 10px;
}

.hadiah-card ul li {
  color: #ccc;
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Responsif */
@media (max-width: 768px) {
  .registrasi-container {
    flex-direction: column;
    align-items: center;
  }

  .registrasi-card {
    width: 100%;
    max-width: 90%;
  }

  .section-title {
    font-size: 2rem;
  }
}
/* end */



/* FAQ Section */
.faq,
.route-map-section {
    padding: 100px 20px;
    background-image: url('../images/faq.png'); /* ganti sesuai path foto */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed; /* background stabil saat scroll/expand */
    color: #fff;
    font-family: 'Rajdhani', sans-serif;
    position: relative;
}

/* Overlay supaya tulisan tetap terbaca */
.faq::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.57);
    pointer-events: none; /* overlay tidak menghalangi klik */
    z-index: 1;
}

.faq-title {
    text-align: center;
    color: #ed563b;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 50px;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    z-index: 2; /* pastikan di atas overlay */
     text-shadow: 0 0 10px rgba(255, 72, 0, 0.605);
}

.faq-container {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    z-index: 2; /* pastikan konten di atas overlay */
}

.faq-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    margin-bottom: 10px;
    position: relative;
    z-index: 2; /* tetap di atas overlay */
}

.faq-question {
    background: none;
    color: #fff;
    border: none;
    width: 100%;
    text-align: left;
    padding: 20px;
    font-size: 1.2rem;
    cursor: pointer;
    position: relative;
    transition: color 0.3s ease;
}

.faq-question::after {
    content: '\25BC'; /* Panah bawah */
    position: absolute;
    right: 20px;
    transition: transform 0.3s ease;
}

.faq-item.active .faq-question {
    color: #f5be00;
}

.faq-item.active .faq-question::after {
    transform: rotate(180deg); /* Panah ke atas */
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
    padding: 0 20px;
    transition: max-height 0.4s ease, padding 0.3s ease;
    pointer-events: auto; /* pastikan bisa di klik */
}

.faq-item.active .faq-answer {
    /* Allow long answers to expand without clipping; enable internal scroll on very small screens */
    max-height: 1600px; /* large enough for long answers */
    padding: 20px;
    overflow: auto; /* allows scrolling if content still exceeds max-height */
}

@media (max-width: 420px) {
  .faq-item.active .faq-answer {
    max-height: 1200px; /* slightly smaller cap on very small phones */
  }
}

.faq-answer ol {
    counter-reset: faq-counter;   /* reset counter tiap ol */
    padding-left: 30px;
}

.faq-answer li {
    counter-increment: faq-counter;
    position: relative;
    margin-bottom: 8px;
    line-height: 1.5;
    color: #d3d2d2;              /* warna teks */
}

.faq-answer li::before {
    content: counter(faq-counter) ". ";
    position: absolute;
    left: -30px;                 /* sesuaikan padding */
    color: #eeedea;              /* warna nomor */
    font-weight: bold;
}





html,
body {
  background: #fff;
  font-family: 'Poppins', sans-serif;
}

::selection {
  background: #ed563b;
  color: #fff;
}

::-moz-selection {
  background: #ed563b;
  color: #fff;
}

@media (max-width: 991px) {
  html, body {
    overflow-x: hidden;
  }
  .mobile-top-fix {
    margin-top: 30px;
    margin-bottom: 0px;
  }
  .mobile-bottom-fix {
    margin-bottom: 30px;
  }
  .mobile-bottom-fix-big {
    margin-bottom: 60px;
  }
}

.section-heading {
  text-align: center;
  margin-top: 140px;
  margin-bottom: 80px;
}

.section-heading h2 {
  font-size: 28px;
  font-weight: 800;
  color: #232d39;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 0px;
  margin-bottom: 0px;
}

.section-heading h2 em {
  font-style: normal;
  color: #ed563b;
}

.section-heading img {
  margin: 20px auto;
}

.dark-bg h2 {
  color: #fff;
}

.dark-bg p {
  color: #fff;
}
.main-button a {
  margin-bottom: -4rem;
  display: inline-block;
  font-size: 16px;
  font-weight: 600;
  padding: 14px 30px;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(135deg, #ed563b, #f9735b);
  border-radius: 40px;
  box-shadow: 0 4px 15px rgba(237, 86, 59, 0.4);
  transition: all 0.35s ease;
  letter-spacing: 0.5px;
  position: relative;
  overflow: hidden;
}



/* Efek hover */
.main-button a:hover {
  background: linear-gradient(135deg, #f9735b, #ed563b);
  box-shadow: 0 6px 20px rgba(237, 86, 59, 0.6);
  transform: translateY(-3px);
}

/* Efek saat tombol diklik */
.main-button a:active {
  transform: scale(0.96);
}

/* Tambahkan efek glow animasi lembut */
.main-button a::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.2);
  transform: skewX(-20deg);
  transition: all 0.5s ease;
}

.main-button a:hover::after {
  left: 100%;
}


/*
---------------------------------------------
header
---------------------------------------------
*/

.background-header {
  background: rgba(250,250,250,0.99) !important;
  height: 80px!important;
  position: fixed!important;
  top: 0px;
  left: 0px;
  right: 0px;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.15)!important;
}

.background-header .logo,
.background-header .main-nav .nav li a {
  color: #232d39!important;
}

.background-header .main-nav .nav li:last-child a {
  color: #fff !important;
}

.background-header .main-nav .nav li:last-child a:hover {
  color: #fff!important;
}

.background-header .main-nav .nav li:hover a {
  color: #ed563b!important;
}

.background-header .nav li a.active {
  color: #ed563b!important;
}

.header-area {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  z-index: 100;
  height: 80px;
  background: rgba(250,250,250,0.1);
  -webkit-transition: all .5s ease 0s;
  -moz-transition: all .5s ease 0s;
  -o-transition: all .5s ease 0s;
  transition: all .5s ease 0s;
}

.header-area .main-nav {
  min-height: 80px;
  background: transparent;
}

.header-area .main-nav .logo {
  line-height: 80px;
  color: #fff;
  font-size: 32px;
  font-weight: 800;
  text-transform: uppercase;
  float: left;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.header-area .main-nav .logo em {
  font-style: normal;
  color: #ed563b;
  font-weight: 900;
}

.header-area .main-nav .nav {
  float: right;
  margin-top: 27px;
  margin-right: 0px;
  background-color: transparent;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  z-index: 999;
}

.header-area .main-nav .nav li {
  padding-left: 20px;
  padding-right: 20px;
}

.header-area .main-nav .nav li a {
  display: block;
  font-weight: 500;
  font-size: 13px;
  color: #7a7a7a;
  text-transform: uppercase;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  height: 40px;
  line-height: 40px;
  border: transparent;
  letter-spacing: 1px;
}

.header-area .main-nav .nav li a {
  color: #fff;
}

.header-area .main-nav .nav li:last-child a {
  display: inline-block;
  font-size: 13px;
  padding: 11px 17px;
  background-color: #ff0000;
  color: #fff;
  text-align: center;
  font-weight: 400;
  letter-spacing: 0px;
  text-transform: uppercase;
  transition: all .3s;
  height: auto;
  line-height: 20px;
}

.header-area .main-nav .nav li:last-child a:hover {
  background-color: #f9735b;
  opacity: 1;
}

.header-area .main-nav .nav li:hover a,
.header-area .main-nav .nav li a.active {
  color: #ff0000!important;
  opacity: 1;
}

.background-header .main-nav .nav li:hover a,
.background-header .main-nav .nav li a.active {
  color: #ff0000!important;
  opacity: 1;
}


.header-area .main-nav .menu-trigger {
  cursor: pointer;
  display: block;
  position: absolute;
  top: 23px;
  width: 32px;
  height: 40px;
  text-indent: -9999em;
  z-index: 99;
  right: 40px;
  display: none;
}

.header-area .main-nav .menu-trigger span,
.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #1e1e1e;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
}

.background-header .main-nav .menu-trigger span,
.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: #1e1e1e;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #1e1e1e;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
  width: 75%;
}

.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: #1e1e1e;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  content: "";
}

.header-area .main-nav .menu-trigger span {
  top: 16px;
}

.header-area .main-nav .menu-trigger span:before {
  -moz-transform-origin: 33% 100%;
  -ms-transform-origin: 33% 100%;
  -webkit-transform-origin: 33% 100%;
  transform-origin: 33% 100%;
  top: -10px;
  z-index: 10;
}

.header-area .main-nav .menu-trigger span:after {
  -moz-transform-origin: 33% 0;
  -ms-transform-origin: 33% 0;
  -webkit-transform-origin: 33% 0;
  transform-origin: 33% 0;
  top: 10px;
}

.header-area .main-nav .menu-trigger.active span,
.header-area .main-nav .menu-trigger.active span:before,
.header-area .main-nav .menu-trigger.active span:after {
  background-color: transparent;
  width: 100%;
}

.header-area .main-nav .menu-trigger.active span:before {
  -moz-transform: translateY(6px) translateX(1px) rotate(45deg);
  -ms-transform: translateY(6px) translateX(1px) rotate(45deg);
  -webkit-transform: translateY(6px) translateX(1px) rotate(45deg);
  transform: translateY(6px) translateX(1px) rotate(45deg);
  background-color: #1e1e1e;
}

.background-header .main-nav .menu-trigger.active span:before {
  background-color: #1e1e1e;
}

.header-area .main-nav .menu-trigger.active span:after {
  -moz-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -ms-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -webkit-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  transform: translateY(-6px) translateX(1px) rotate(-45deg);
  background-color: #1e1e1e;
}

.background-header .main-nav .menu-trigger.active span:after {
  background-color: #1e1e1e;
}

.header-area.header-sticky {
  min-height: 80px;
}

.header-area.header-sticky .nav {
  margin-top: 20px !important;
}

.header-area.header-sticky .nav li a.active {
  color: #ed563b;
}

@media (max-width: 1200px) {
  .header-area .main-nav .nav li {
    padding-left: 12px;
    padding-right: 12px;
  }
  .header-area .main-nav:before {
    display: none;
  }
}

@media (max-width: 767px) {
  .header-area .main-nav .logo {
    color: #1e1e1e;
  }
  .header-area.header-sticky .nav li a:hover,
  .header-area.header-sticky .nav li a.active {
    color: #ed563b!important;
    opacity: 1;
  }
  .header-area {
    background-color: #f7f7f7;
    padding: 0px 15px;
    height: 80px;
    box-shadow: none;
    text-align: center;
  }
  .header-area .container {
    padding: 0px;
  }
  .header-area .logo {
    margin-left: 30px;
  }
  .header-area .menu-trigger {
    display: block !important;
  }
  .header-area .main-nav {
    overflow: hidden;
  }
  .header-area .main-nav .nav {
    float: none;
    width: 100%;
    display: none;
    -webkit-transition: all 0s ease 0s;
    -moz-transition: all 0s ease 0s;
    -o-transition: all 0s ease 0s;
    transition: all 0s ease 0s;
    margin-left: 0px;
  }
  .header-area .main-nav .nav li:first-child {
    border-top: 1px solid #eee;
  }
  .header-area .main-nav .nav li:last-child {
    width: 100%;
    background-color: #ed563b;
    color: #fff;
  }
  .header-area .main-nav .nav li:last-child a {
    background-color: #ed563b!important;
  }
  .header-area .main-nav .nav li:last-child a:hover,
  .header-area .main-nav .nav li:last-child:hover a {
    background-color: #ed563b!important;
    color: #fff!important;
  }
  .header-area.header-sticky .nav {
    margin-top: 80px !important;
  }
  .header-area .main-nav .nav li {
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #eee;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
  .header-area .main-nav .nav li a {
    height: 50px !important;
    line-height: 50px !important;
    padding: 0px !important;
    border: none !important;
    background: #f7f7f7 !important;
    color: #232d39 !important;
  }
  .header-area .main-nav .nav li:last-child a {
    color: #fff!important;
  }
  .header-area .main-nav .nav li a:hover {
    background: #eee !important;
    color: #ed563b!important;
  }
  .header-area .main-nav .nav li.submenu ul {
    position: relative;
    visibility: inherit;
    opacity: 1;
    z-index: 1;
    transform: translateY(0%);
    transition-delay: 0s, 0s, 0.3s;
    top: 0px;
    width: 100%;
    box-shadow: none;
    height: 0px;
  }
  .header-area .main-nav .nav li.submenu ul li a {
    font-size: 12px;
    font-weight: 400;
  }
  .header-area .main-nav .nav li.submenu ul li a:hover:before {
    width: 0px;
  }
  .header-area .main-nav .nav li.submenu ul.active {
    height: auto !important;
  }
  .header-area .main-nav .nav li.submenu:after {
    color: #3B566E;
    right: 25px;
    font-size: 14px;
    top: 15px;
  }
  .header-area .main-nav .nav li.submenu:hover ul, .header-area .main-nav .nav li.submenu:focus ul {
    height: 0px;
  }
}

@media (min-width: 767px) {
  .header-area .main-nav .nav {
    display: flex !important;
  }
}


/*
---------------------------------------------
banner
---------------------------------------------
*/

.main-banner {
  position: relative;
}

#bg-video {
    min-width: 100%;
    min-height: 100vh;
    max-width: 100%;
    max-height: 100vh;
    object-fit: cover;
    z-index: -1;
}

#bg-video::-webkit-media-controls {
    display: none !important;
}

.video-overlay {
    position: absolute;
    background-color: rgba(35, 45, 57, 0.148);
    top: 0;
    left: 0;
    bottom: 7px;
    width: 100%;
}

.main-banner .caption {
  text-align: center;
  position: absolute;
  width: 80%;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

.main-banner .caption h6 {
  margin-top: 0px;
  font-size: 18px;
  text-transform: uppercase;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.5px;
}

.main-banner .caption h2 {
  margin-top: 30px;
  margin-bottom: 25px;
  font-size: 84px;
  text-transform: uppercase;
  font-weight: 800;
  color: #fff;
  letter-spacing: 1px;
}

.main-banner .caption h2 em {
  font-style: normal;
  color: #ed563b;
  font-weight: 900;
}


/*
---------------------------------------------
features
---------------------------------------------
*/

#features {
  margin-bottom: 80px;
}

.feature-item {
  display: inline-block;
  margin-bottom: 60px;
}

.feature-item .left-icon img {
  float: left;
  margin-right: 30px;
}

.feature-item .right-content {
  display: inline;
}

.feature-item .right-content h4 {
  margin-top: 0px;
  margin-bottom:  7px;
  letter-spacing: 0.25px;
  color: #232d39;
  font-size: 19px;
  font-weight: 600;
  text-transform: capitalize;
}

.feature-item .right-content a.text-button {
  margin-top: 7px;
  display: inline-block;
  font-size: 13px;
  text-transform: uppercase;
  color: #ed563b;
  font-weight: 500;
}

/*
---------------------------------------------
subscribe
---------------------------------------------
*/

#call-to-action {
  padding: 120px 0px;
  background-image: url(../images/cta-bg.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  text-align: center;
}

.cta-content h2 {
  font-size: 36px;
  text-transform: uppercase;
  font-weight: 800;
  color: #fff;
  letter-spacing: 1px;
}

.cta-content h2 em {
  font-style: normal;
  color: #ed563b;
}

.cta-content p {
  font-size: 16px;
  color: #fff;
  margin: 15px 0px 25px 0px;
}



/*
--------------------------------------------
Our Classes
--------------------------------------------
*/

#our-classes {
  margin-bottom: 140px;
}

#tabs ul {
  margin: 0;
  padding: 0;
}
#tabs ul li {
  margin-bottom: 30px;
  display: inline-block;
  width: 100%;
}
#tabs ul li:last-child {
  margin-bottom: 0px;
}
#tabs ul li a {
  text-transform: capitalize;
  width: 100%;
  padding: 30px 30px;
  display: inline-block;
  background-color: #fff;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
  border-radius: 5px;
  font-size: 19px;
  color: #232d39;
  letter-spacing: 0.5px;
  font-weight: 600;
  transition: all 0.3s;
}
#tabs .main-rounded-button a {
  text-align: center;
  padding: 20px 30px;
  width: 100%;
  border-radius: 5px;
  display: inline-block;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
  color: #fff;
  font-size: 19px;
  letter-spacing: 0.5px;
  font-weight: 600;
  background-color: #ed563b;
}
#tabs .main-rounded-button a:hover {
  background-color: #f9735b;
}
#tabs ul li a img {
  max-width: 100%;
  margin-right: 20px;
}
#tabs ul .ui-tabs-active span {
  background: #faf5b2;
  border: #faf5b2;
  line-height: 90px;
  border-bottom: none;
}
#tabs ul .ui-tabs-active a {
  color: #ed563b;
}
#tabs ul .ui-tabs-active span {
  color: #1e1e1e;
}
.tabs-content {
  margin-left: 30px;
  text-align: left;
  display: inline-block;
  transition: all 0.3s;
}
.tabs-content img {
  max-width: 100%;
  overflow: hidden;
  border-radius: 5px;
}
.tabs-content h4 {
  font-size: 23px;
  font-weight: 700;
  color: #232d39;
  letter-spacing: 0.5px;
  margin-bottom: 20px;
  margin-top: 30px;
}
.tabs-content p {
  font-size: 14px;
  color: #7a7a7a;
  margin-bottom: 28px;
}


/*
---------------------------------------------
schedule
---------------------------------------------
*/

#schedule {
  padding: 0px 0px 140px 0px;
  background-image: url(../images/schedule-bg.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

#schedule table {
  width: 100%;
  text-align: center;
  border: 1px solid #fff;
}

#schedule table tbody {
  border-top: 1px solid #fff;
}

#schedule table tbody tr {
  border-bottom: 1px solid #fff;
}

#schedule table tbody tr td {
  border-right: 1px solid #fff;
  height: 100px;
}

#schedule table tr td {
  color: #fff;
  font-size: 13px;
  text-transform: capitalize;
  font-weight: 500;
  letter-spacing: 0.25px;
}

.schedule-table.filtering .ts-item {
    opacity: 0;
    transition: all 0.5s;
}

.schedule-table.filtering .ts-item.show {
    opacity: 1;
    transition: all 0.5s;
}

#schedule .filters {
  margin-bottom: 40px;
}
#schedule .filters ul {
  padding: 0;
  text-align: center;
}
#schedule .filters ul li {
  list-style: none;
  display: inline;
  cursor: pointer;
  position: relative;
  margin-right: 10px;
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  text-transform: capitalize;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
#schedule .filters ul li:after {
  content: "/";
  margin-left: 10px;
  color: #fff;
}
#schedule .filters ul li:last-child {
  margin-right: 0px;
}
#schedule .filters ul li:last-child::after {
  display: none;
}
#schedule .filters ul li.active,
#schedule .filters ul li:hover {
  color: #ed563b;
}
#schedule .filters-content {
  margin-top: 50px;
}
#schedule .filters-content .show {
  opacity: 1;
  visibility: visible;
  transition: all 350ms;
}
#schedule .filters-content .hide {
  opacity: 0;
  visibility: hidden;
  transition: all 350ms;
}


/*
---------------------------------------------
trainers
---------------------------------------------
*/

#trainers .trainer-item {
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
  padding: 40px;
}

#trainers .trainer-item img {
  width: 100%;
  border-radius: 5px;
}

#trainers .trainer-item span {
  font-size: 13px;
  font-weight: 500;
  color: #ed563b;
  display: inline-block;
  margin-top: 25px;
  margin-bottom: 10px;
}

#trainers .trainer-item h4 {
  font-size: 19px;
  font-weight: 600;
  color: #232d39;
  letter-spacing: 0.5px;
  margin-bottom: 18px;
}

#trainers .trainer-item p {
  margin-bottom: 20px;
}

#trainers .trainer-item ul.social-icons li {
  display: inline-block;
  margin-right: 12px;
}

#trainers .trainer-item ul.social-icons li:last-child {
  margin-right: 0px;
}

#trainers .trainer-item ul.social-icons li a {
  color: #232d39;
  transition: all .3s;
}

#trainers .trainer-item ul.social-icons li a:hover {
  color: #ed563b;
}


/*
---------------------------------------------
contact
---------------------------------------------
*/

#contact-us {
  margin-top: 140px;
}

#contact-us .container-fluid .col-lg-6 {
  padding: 0px;
}

#contact-us .contact-form {
  padding: 80px;
  background-image: url(../images/contact-bg.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

#contact-us .contact-form #contact {
  background-color: #fff;
  padding: 40px;
  border-radius: 5px;
}

.contact-form input,
.contact-form textarea {
  color: #7a7a7a;
  font-size: 13px;
  border: 1px solid #ddd;
  background-color: #fff;
  width: 100%;
  height: 40px;
  outline: none;
  line-height: 40px;
  padding: 0px 10px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin-bottom: 30px;
}

.contact-form textarea {
  height: 150px;
  resize: none;
}

.contact-form ::-webkit-input-placeholder { /* Edge */
  color: #7a7a7a;
}

.contact-form :-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #7a7a7a;
}

.contact-form ::placeholder {
  color: #7a7a7a;
}

.contact-form button {
  display: inline-block;
  font-size: 13px;
  padding: 11px 17px;
  background-color: #ed563b;
  color: #fff;
  text-align: center;
  font-weight: 400;
  text-transform: uppercase;
  transition: all .3s;
  border: none;
  outline: none;
  margin-top: -8px;
}

.contact-form button:hover {
  background-color: #f9735b;
}




/*
---------------------------------------------
footer
---------------------------------------------
*/
footer {
  text-align: center;
  padding: 30px 0px;
}

footer p {
  color: #232d39;
  font-size: 13px;
}

footer p a {
  cursor: pointer;
  color: #ed563b;
}

footer p a:hover {
  color: #ed563b;
}



/*
---------------------------------------------
preloader
---------------------------------------------
*/

.js-preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #232d39;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
    z-index: 9999;
    -webkit-transition: opacity 0.25s ease;
    transition: opacity 0.25s ease;
}

.js-preloader.loaded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

@-webkit-keyframes dot {
    50% {
        -webkit-transform: translateX(96px);
        transform: translateX(96px);
    }
}

@keyframes dot {
    50% {
        -webkit-transform: translateX(96px);
        transform: translateX(96px);
    }
}

@-webkit-keyframes dots {
    50% {
        -webkit-transform: translateX(-31px);
        transform: translateX(-31px);
    }
}

@keyframes dots {
    50% {
        -webkit-transform: translateX(-31px);
        transform: translateX(-31px);
    }
}

.preloader-inner {
    position: relative;
    width: 142px;
    height: 40px;
    background: #232d39;
}

.preloader-inner .dot {
    position: absolute;
    width: 16px;
    height: 16px;
    top: 12px;
    left: 15px;
    background: #fff;
    border-radius: 50%;
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-animation: dot 2.8s infinite;
    animation: dot 2.8s infinite;
}

.preloader-inner .dots {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    margin-top: 12px;
    margin-left: 31px;
    -webkit-animation: dots 2.8s infinite;
    animation: dots 2.8s infinite;
}

.preloader-inner .dots span {
    display: block;
    float: left;
    width: 16px;
    height: 16px;
    margin-left: 16px;
    background: #fff;
    border-radius: 50%;
}


/*
---------------------------------------------
responsive
---------------------------------------------
*/


@media (max-width: 992px) {

  .main-banner .caption h2 {
    font-size: 64px;
  }
  #features {
    margin-bottom: 110px;
  }
  #features .feature-item {
    margin-bottom: 30px;
  }
  #our-classes .tabs-content {
    margin-left: 0px;
    margin-top: 30px;
  }
  .trainer-item {
    margin-bottom: 30px;
  }
  #contact-us #map {
    margin-bottom: -7px;
  }
  #contact-us .contact-form {
    padding: 30px;
  }
  #contact-us .contact-form #contact {
    padding: 30px;
  }

}

@media (max-width: 450px) {
  .feature-item .right-content a.text-button {
    margin-left: 130px;
  }
}

/* ===== Accent override: enforce a normal red accent color ===== */
:root { --accent-red: #ff0000; }

/* Color accents (text) */
.about-text h2 span,
.schedule-info .subtitle,
.schedule-item h4,
.schedule-item i,
.registrasi-card h3,
.registrasi-card ul li::before,
.feature-item .right-content a.text-button,
.faq-title,
.section-title,
.route-map-section h1,
.tabs ul .ui-tabs-active a,
.tabs ul .ui-tabs-active span {
  color: var(--accent-red) !important;
}

/* Backgrounds, borders, and button accents */
.main-button a,
.btn-daftar,
.header-area .main-nav .nav li:last-child a,
.header-area .main-nav .nav li:last-child {
  background: var(--accent-red) !important;
  border-color: var(--accent-red) !important;
  box-shadow: 0 6px 20px rgba(255,0,0,0.35) !important;
  color: #fff !important;
}

/* Nav hover/active explicit override */
.header-area .main-nav .nav li:hover a,
.header-area .main-nav .nav li a.active,
.background-header .main-nav .nav li:hover a,
.background-header .main-nav .nav li a.active,
.header-area.header-sticky .nav li a.active {
  color: var(--accent-red) !important;
}

/* Selection color override */
::selection { background: var(--accent-red) !important; color: #fff !important; }
::-moz-selection { background: var(--accent-red) !important; color: #fff !important; }

/* Ensure CTA hover gradient keeps red as main hue */
.main-button a:hover,
.btn-daftar:hover {
  background: linear-gradient(135deg, #f9735b, var(--accent-red)) !important;
  box-shadow: 0 6px 20px rgba(255,0,0,0.45) !important;
}

/* Keep focus styles visible */
.btn-daftar:focus,
.main-button a:focus {
  outline: 3px solid rgba(255,0,0,0.12) !important;
  outline-offset: 3px !important;
}