/**
 * USM Eduan Custom CSS
 * Override Eduan template colors to USM branding
 * Primary Color: Orange (#E6B22C)
 */

:root {
  --usm-primary: #E6B22C;
  --usm-primary-dark: #C99A1F;
  --usm-primary-light: #F0C656;
  --usm-secondary: #1A1A2E;
  --usm-accent: #16213E;
}

/* Override Eduan primary colors - Replace all red buttons with USM gold */
.theme-btn-5,
.theme-btn-5:hover,
.theme-btn-5:focus {
  background-color: var(--usm-primary) !important;
  border-color: var(--usm-primary) !important;
  color: #fff !important;
}

.theme-btn-5::after {
  background-color: var(--usm-primary-dark) !important;
}

.theme-btn-5:hover {
  background-color: var(--usm-primary-dark) !important;
  border-color: var(--usm-primary-dark) !important;
  color: #fff !important;
}

.theme-btn-6,
.theme-btn-6:hover,
.theme-btn-6:focus {
  background-color: var(--usm-primary) !important;
  border-color: var(--usm-primary) !important;
}

.theme-btn-6::after {
  background-color: var(--usm-primary-dark) !important;
}

.theme-btn-6:hover {
  background-color: var(--usm-primary-dark) !important;
  border-color: var(--usm-primary-dark) !important;
}

/* Override red theme color variable */
:root {
  --clr-theme-primary-6: var(--usm-primary) !important;
}

/* Blog button (Read More) */
.t-theme-btn,
.blog-btn.t-theme-btn {
  background-color: var(--usm-primary) !important;
  border-color: var(--usm-primary) !important;
  color: #fff !important;
}

.t-theme-btn:hover,
.blog-btn.t-theme-btn:hover {
  background-color: var(--usm-primary-dark) !important;
  border-color: var(--usm-primary-dark) !important;
  color: #fff !important;
}

/* Header - Light Gradient for dark logo text */
.h6_header-area {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 50%, #e9ecef 100%);
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
}

.h6_header-area.header-sticky.sticky {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}

/* Header menu text color for light bg */
.h6_main-menu ul li a {
  color: #333333 !important;
}

.h6_main-menu ul li a:hover,
.h6_main-menu ul li.menu-has-child:hover>a {
  color: var(--usm-primary) !important;
}

/* ===================================
   Hero Banner - Fullscreen with Ken Burns Effect
   =================================== */

/* Fullscreen Hero Section */
.hero-fullscreen {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
}

.hero-fullscreen .swiper,
.hero-fullscreen .swiper-wrapper,
.hero-fullscreen .swiper-slide {
  height: 100vh;
}

/* Hero Slide Container */
.hero-slide {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* Ken Burns Background Image Wrapper */
.hero-bg-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}

/* Ken Burns Background Image */
.hero-bg-image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* Ken Burns zoom animation */
  animation: kenBurnsZoom 20s ease-out forwards;
  will-change: transform;
}

/* Ken Burns Zoom Animation */
@keyframes kenBurnsZoom {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    transform: translate(-50%, -50%) scale(1.15);
  }
}

/* Reset animation on slide change - handled by Swiper */
.swiper-slide-active .hero-bg-image {
  animation: kenBurnsZoom 20s ease-out forwards;
}

.swiper-slide:not(.swiper-slide-active) .hero-bg-image {
  animation: none;
  transform: translate(-50%, -50%) scale(1);
}

/* Dark Overlay - Gradient from left to right for cleaner appearance */
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Gradient kiri ke kanan: solid di kiri (konten), transparan di kanan (gambar) */
  background: linear-gradient(
    90deg,
    rgba(10, 15, 30, 0.95) 0%,
    rgba(10, 15, 30, 0.85) 25%,
    rgba(10, 15, 30, 0.6) 50%,
    rgba(10, 15, 30, 0.3) 70%,
    rgba(10, 15, 30, 0.1) 85%,
    transparent 100%
  );
  z-index: 1;
}

/* Additional gradient for top (header) and bottom edges */
.hero-overlay::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 150px;
  background: linear-gradient(
    180deg,
    rgba(10, 15, 30, 0.5) 0%,
    transparent 100%
  );
  pointer-events: none;
}

.hero-overlay::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background: linear-gradient(
    0deg,
    rgba(10, 15, 30, 0.4) 0%,
    transparent 100%
  );
  pointer-events: none;
}

/* Content Layer */
.hero-slide .container {
  position: relative;
  z-index: 2;
}

/* Smaller Title */
.hero-title-sm {
  font-size: 42px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
}

/* Banner content adjustments */
.hero-slide .h6_banner-content {
  padding-top: 80px;
}

.hero-slide .h6_banner-content-subtitle {
  background: rgba(230, 178, 44, 0.15);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(230, 178, 44, 0.3);
  padding: 8px 20px;
  border-radius: 50px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}

/* Navigation - Right Side Middle (Glassmorphism style like category badge) */
.hero-slider-navigation {
  position: absolute;
  right: 4%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: grid;
  grid-gap: 12px;
}

.hero-slider-navigation div {
  width: 46px;
  height: 46px;
  background: rgba(230, 178, 44, 0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(230, 178, 44, 0.35);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 16px;
  color: var(--usm-primary);
  cursor: pointer;
  transition: all 0.3s ease;
}

.hero-slider-navigation div:hover {
  background: rgba(230, 178, 44, 0.25);
  border-color: rgba(230, 178, 44, 0.6);
  color: #fff;
  transform: scale(1.08);
}

/* Mobile: show at bottom center */
@media (max-width: 767px) {
  .hero-slider-navigation {
    display: flex !important;
    position: absolute;
    right: auto;
    left: 50%;
    top: auto;
    bottom: 25px;
    transform: translateX(-50%);
    gap: 10px;
  }

  .hero-slider-navigation div {
    width: 40px;
    height: 40px;
    font-size: 14px;
  }
}

/* Responsive adjustments */
@media (max-width: 1199px) {
  .hero-title-sm {
    font-size: 36px !important;
  }
}

@media (max-width: 991px) {
  .hero-title-sm {
    font-size: 32px !important;
  }

  .hero-slide .h6_banner-content {
    padding-top: 100px;
  }
}

@media (max-width: 767px) {
  .hero-title-sm {
    font-size: 26px !important;
    line-height: 1.4 !important;
  }

  .hero-slide .h6_banner-content-subtitle {
    font-size: 13px;
    padding: 6px 14px;
  }

  .hero-fullscreen .h6_banner-navigation {
    bottom: 25px;
  }

  .hero-fullscreen .banner_6-swiper-prev,
  .hero-fullscreen .banner_6-swiper-next {
    width: 40px;
    height: 40px;
  }

  /* Mobile: gradient lebih merata karena konten full width */
  .hero-overlay {
    background: linear-gradient(
      90deg,
      rgba(10, 15, 30, 0.9) 0%,
      rgba(10, 15, 30, 0.75) 40%,
      rgba(10, 15, 30, 0.5) 70%,
      rgba(10, 15, 30, 0.3) 100%
    );
  }
}

@media (max-width: 575px) {
  .hero-title-sm {
    font-size: 22px !important;
  }

  .hero-slide .h6_banner-content {
    padding-top: 80px;
  }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .hero-bg-image {
    animation: none !important;
    transform: translate(-50%, -50%) scale(1.05);
  }
}

/* Original Banner styles */
.h6_banner-content-title span {
  color: var(--usm-primary) !important;
}

.h6_banner-content-subtitle i {
  color: var(--usm-primary) !important;
}

/* Program items */
.h6_program-item:hover .h6_program-item-content {
  background-color: var(--usm-primary);
}

.h6_program-item-content-info-link:hover {
  color: var(--usm-primary) !important;
}

/* Section titles */
.section-area-6 .section-subtitle {
  color: var(--usm-primary) !important;
}

/* About section */
.h6_about-img {
  position: relative;
}

.h6_about-img-content {
  background-color: var(--usm-primary);
}

.h6_about-btn.theme-btn-6 {
  background-color: var(--usm-primary) !important;
}

/* ===================================
   Running Text Ticker (Marquee Effect)
   =================================== */
.about-text-wrap {
  margin-top: 60px;
  overflow: hidden;
  width: 100%;
  padding: 40px 0;
}

.about-text-ticker {
  display: flex;
  white-space: nowrap;
  animation: ticker-scroll 80s linear infinite;
}

.h6_about-bottom-title {
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px #d0d0d0;
  font-size: 120px;
  font-weight: 600;
  line-height: 1.12;
  text-align: center;
  margin: 0;
  padding-right: 100px;
  width: max-content;
  flex-shrink: 0;
}

@media (max-width: 991px) {
  .h6_about-bottom-title {
    font-size: 90px;
  }
}

@media (max-width: 767px) {
  .h6_about-bottom-title {
    font-size: 60px;
  }
  .about-text-wrap {
    padding: 25px 0;
  }
}

@media (max-width: 575px) {
  .h6_about-bottom-title {
    font-size: 45px;
  }
}

/* Ticker animation - slow continuous scroll */
@keyframes ticker-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* ===================================
   Multi-Level Dropdown Menu (Desktop)
   Supports up to 4 levels of nesting
   =================================== */

/* Prevent header menu from wrapping */
/* Only apply flex to the top-level UL */
.h6_main-menu>ul {
  display: flex !important;
  flex-wrap: nowrap;
  white-space: nowrap;
  flex-direction: row;
}

.h6_main-menu ul>li>a {
  padding: 10px 3px;
  font-size: 13px;
}

/* RESET Submenu Styles - Force vertical stacking */
.h6_main-menu ul li .submenu {
  display: block;
  /* Important: override any inherited flex */
  text-align: left;
}

.h6_main-menu ul li .submenu li {
  display: block;
  width: 100%;
}

.h6_main-menu ul li .submenu li a {
  display: block;
  /* Make anchors full width */
  width: 100%;
}

/* Level 2 submenu (nested inside level 1) - has child indicator */
.h6_main-menu ul li .submenu li.menu-has-child {
  position: relative;
  display: block;
  /* Ensure it stays block */
}

/* Remove default theme arrow (down) for nested submenus */
.h6_main-menu ul li .submenu li.menu-has-child>a::after {
  content: none !important;
  display: none !important;
}

/* Arrow indicator styling for nested items (Manual Icon) */
.h6_main-menu ul li .submenu li.menu-has-child>a {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  padding-right: 15px;
  /* Reduced from 35px since we use flex space-between */
}

.h6_main-menu ul li .submenu li.menu-has-child>a i {
  font-size: 10px;
  color: inherit;
  /* Follow text color */
  transition: all 0.3s ease;
  margin-left: 10px;
}

.h6_main-menu ul li .submenu li.menu-has-child:hover>a i {
  color: #fff;
  transform: translateX(3px);
}

/* Level 2+ submenu positioning (appears to the right) */
.h6_main-menu ul li .submenu li .submenu {
  position: absolute;
  left: 100%;
  top: 0;
  min-width: 280px;
  max-width: 320px;
  opacity: 0;
  visibility: hidden;
  transform: translateX(10px);
  transition: all 0.25s ease;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  z-index: 1000;
}

/* Show level 2+ submenu on hover */
.h6_main-menu ul li .submenu li.menu-has-child:hover>.submenu {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

/* Nested submenu items styling */
.h6_main-menu ul li .submenu li .submenu li a {
  padding: 10px 20px;
  font-size: 13px;
  white-space: normal;
  line-height: 1.4;
}

/* Nested submenu hover state */
.h6_main-menu ul li .submenu li .submenu li:hover>a {
  background-color: var(--usm-primary);
  color: #fff;
}

/* Responsive: Show submenu on left for items near edge */
@media (max-width: 1400px) {
  .h6_main-menu ul>li:nth-child(n+4) .submenu li .submenu {
    left: auto;
    right: 100%;
    transform: translateX(-10px);
  }

  .h6_main-menu ul>li:nth-child(n+4) .submenu li.menu-has-child:hover>.submenu {
    transform: translateX(0);
  }
}


.h6_about-video-box {
  position: absolute;
  bottom: 30px;
  left: 30px;
  display: flex;
  align-items: center;
  gap: 15px;
  z-index: 10;
}

.h6_about-video-btn {
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--usm-primary);
  color: #ffffff;
  font-size: 20px;
  border-radius: 50%;
  box-shadow: 0 5px 25px rgba(230, 178, 44, 0.4);
  transition: all 0.4s ease;
  text-decoration: none;
  animation: pulse-animation 2s infinite;
}

.h6_about-video-btn:hover {
  background-color: var(--usm-primary-dark);
  color: #ffffff;
  transform: scale(1.1);
}

.h6_about-video-btn i {
  margin-left: 3px;
}

.h6_about-video-text {
  font-size: 16px;
  font-weight: 600;
  color: #1A1A2E;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Pulse Animation for Play Button */
@keyframes pulse-animation {
  0% {
    box-shadow: 0 0 0 0 rgba(230, 178, 44, 0.5);
  }

  70% {
    box-shadow: 0 0 0 20px rgba(230, 178, 44, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(230, 178, 44, 0);
  }
}

/* Video Modal Styling */
.mfp-iframe-holder .mfp-content {
  max-width: 900px;
}

.mfp-bg {
  background: #1A1A2E;
  opacity: 0.9;
}

.mfp-close {
  color: var(--usm-primary) !important;
  font-size: 30px;
}

/* Tuition */
.h6_tuition-content a:hover {
  color: var(--usm-primary) !important;
}

/* Event */
.h5_event-item-date h1 {
  color: var(--usm-primary) !important;
}

.h5_event-item-content h5 a:hover {
  color: var(--usm-primary) !important;
}

/* Teacher */
.h3_teacher-social ul li a:hover {
  background-color: var(--usm-primary) !important;
}

/* Blog */
.h5_blog-content-meta-tag {
  background-color: var(--usm-primary) !important;
}

.h5_blog-btn:hover svg path {
  fill: var(--usm-primary) !important;
}

/* Footer */
.h6_footer-area {
  background-color: var(--usm-secondary);
}

.h6_footer-widget-social a:hover {
  background-color: var(--usm-primary) !important;
  border-color: var(--usm-primary) !important;
}

.h6_footer-widget-list li a:hover,
.h6_footer-widget-contact li:hover {
  color: var(--usm-primary) !important;
}

/* Scroll to top */
.scroll-top {
  background-color: var(--usm-primary) !important;
}

/* Links */
a:hover {
  color: var(--usm-primary);
}

/* Menu hover */
.h6_main-menu ul li a:hover,
.h6_main-menu ul li.menu-has-child:hover>a {
  color: var(--usm-primary) !important;
}

/* Active menu state */
.h6_main-menu ul > li.active > a {
  color: var(--usm-primary) !important;
}

.h6_main-menu ul li ul.submenu li a:hover {
  color: #ffffff !important;
  background-color: var(--usm-primary) !important;
}

/* Submenu styling */
.h6_main-menu ul li ul.submenu {
  background-color: #ffffff;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.h6_main-menu ul li ul.submenu li a {
  color: #333333 !important;
}

/* Mobile menu - Light Theme */
.sidebar-info {
  background-color: #ffffff;
}

/* Mobile menu toggle button - Dark icon */
.side-toggle,
.header-menu-bar-icon {
  color: #333333 !important;
}

.side-toggle i,
.header-menu-bar-icon i {
  color: #333333 !important;
}

/* Mobile menu close button */
.side-info-close {
  color: #333333 !important;
}

/* Mobile menu links - Dark text */
.mobile-menu nav ul li a,
.mean-nav ul li a {
  color: #333333 !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
}

.mobile-menu nav ul li a:hover,
.mean-nav ul li a:hover {
  color: var(--usm-primary) !important;
}

/* Mobile menu dropdown toggle */
.mean-expand {
  color: #333333 !important;
  background: transparent !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
}

/* Mobile sidebar logo visibility */
.sidebar-info .h6_header-logo img {
  filter: none;
}

/* Breadcrumb area */
.breadcrumb-area {
  background-color: var(--usm-secondary);
}

/* Forms focus */
input:focus,
textarea:focus,
select:focus {
  border-color: var(--usm-primary) !important;
}

/* Pagination */
.pagination li a:hover,
.pagination li.active a {
  background-color: var(--usm-primary) !important;
  border-color: var(--usm-primary) !important;
}

/* ============================================
   FOOTER - Light Text Styles
   ============================================ */
.h6_footer-area {
  background-color: var(--usm-secondary);
  color: #ffffff;
  position: relative;
}

/* Footer has background image with overlay */
.h6_footer-area::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(23, 23, 23, 0.7);
  z-index: 0;
}

.h6_footer-area>.container {
  position: relative;
  z-index: 1;
}

/* Footer Widget Title */
.h6_footer-widget-title {
  color: #ffffff !important;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--usm-primary);
  display: inline-block;
}

/* Footer Logo */
.h6_footer-widget-logo {
  text-align: center;
}

.h6_footer-widget-logo img {
  width: 100%;
  max-width: 120px;
  height: auto;
}

/* Footer Widget Text */
.h6_footer-widget-text {
  color: rgba(255, 255, 255, 0.8) !important;
  font-size: 15px;
  line-height: 1.7;
}

/* Footer Widget List */
.h6_footer-widget-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.h6_footer-widget-list li {
  margin-bottom: 2px;
}

.h6_footer-widget-list li:last-child {
  margin-bottom: 0;
}

.h6_footer-widget-list li a {
  color: rgba(255, 255, 255, 0.8) !important;
  font-size: 14px;
  text-decoration: none;
  transition: all 0.3s ease;
  line-height: 1.4;
}

.h6_footer-widget-list li a:hover {
  color: var(--usm-primary) !important;
  padding-left: 5px;
}

/* Footer Contact Info */
.h6_footer-widget-contact {
  list-style: none;
  padding: 0;
  margin: 0;
}

.h6_footer-widget-contact li {
  color: rgba(255, 255, 255, 0.8) !important;
  font-size: 14px;
  margin-bottom: 15px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.h6_footer-widget-contact li i {
  color: var(--usm-primary) !important;
  font-size: 16px;
  margin-top: 3px;
}

.h6_footer-widget-contact li a {
  color: rgba(255, 255, 255, 0.8) !important;
  text-decoration: none;
  transition: all 0.3s ease;
}

.h6_footer-widget-contact li a:hover {
  color: var(--usm-primary) !important;
}

/* Footer Social Icons */
.h6_footer-widget-social {
  display: flex;
  gap: 10px;
}

.h6_footer-widget-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  color: #ffffff !important;
  font-size: 16px;
  transition: all 0.3s ease;
}

.h6_footer-widget-social a:hover {
  background-color: var(--usm-primary) !important;
  border-color: var(--usm-primary) !important;
  color: #ffffff !important;
}

/* Footer Copyright */
.h6_footer-copyright {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 30px;
  margin-top: 30px;
}

.h6_footer-copyright p {
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 14px;
  margin: 0;
}

/* ============================================
   SCROLL TO TOP / BACK TO TOP BUTTON
   ============================================ */
.scroll-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--usm-primary);
  color: #ffffff;
  font-size: 18px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease;
  box-shadow: 0 4px 15px rgba(230, 178, 44, 0.3);
  text-decoration: none;
}

.scroll-top:hover {
  background-color: var(--usm-primary-dark);
  color: #ffffff;
  transform: translateY(-5px);
  box-shadow: 0 6px 20px rgba(230, 178, 44, 0.4);
}

.scroll-top.show {
  opacity: 1;
  visibility: visible;
}

/* Animation for scroll-top icon */
.scroll-top i {
  transition: transform 0.3s ease;
}

.scroll-top:hover i {
  transform: translateY(-3px);
}

/* ============================================
   BACK TO TOP JAVASCRIPT TRIGGER STYLES
   ============================================ */
.scroll-to-target {
  opacity: 0;
  visibility: hidden;
}

.scroll-to-target.open {
  opacity: 1;
  visibility: visible;
}

/* ============================================
   BLOG CARD STYLING - h2_blog style for Homepage
   ============================================ */
.h6_blog-area .h2_blog-item {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.h6_blog-area .h2_blog-item:hover {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  transform: translateY(-5px);
}

.h6_blog-area .h2_blog-img {
  position: relative;
  overflow: hidden;
  border-radius: 12px 12px 0 0;
}

.h6_blog-area .h2_blog-img img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.h6_blog-area .h2_blog-item:hover .h2_blog-img img {
  transform: scale(1.05);
}

.h6_blog-area .h2_blog-content {
  padding: 20px;
}

.h6_blog-area .h2_blog-content-meta {
  display: flex;
  gap: 15px;
  margin-bottom: 12px;
}

.h6_blog-area .h2_blog-content-meta span {
  font-size: 13px;
  color: #888;
}

.h6_blog-area .h2_blog-content-meta span i {
  margin-right: 5px;
}

.h6_blog-area .h2_blog-content-title {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 15px;
}

.h6_blog-area .h2_blog-content-title a {
  color: #1a1a2e;
  text-decoration: none;
  transition: color 0.3s ease;
}

.h6_blog-area .h2_blog-content-title a:hover {
  color: var(--usm-primary, #1865F2);
}

/* ============================================
   HEADER MENU Z-INDEX FIX
   ============================================ */
/* Ensure menu navigation has proper z-index */
.h6_header-middle {
  position: relative;
  z-index: 100;
}

.h6_main-menu {
  position: relative;
  z-index: 100;
}

.h6_main-menu>ul {
  position: relative;
  z-index: 100;
}

.h6_main-menu ul li a {
  position: relative;
  z-index: 100;
}

/* Prevent header-right from overlapping menu */
.h6_header-right {
  position: relative;
  z-index: 99;
}

/* ============================================
   FIX MISSING IMAGE REFERENCES (404 errors)
   ============================================ */

/* Fix main.css close cursor - use default instead of missing image */
.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close,
.offcanvas-overlay {
  cursor: pointer !important;
}

/* Fix bxslider missing images - hide loader and use CSS arrows */
.bx-wrapper .bx-loading {
  background-image: none !important;
}

.bx-wrapper .bx-prev,
.bx-wrapper .bx-next {
  background-image: none !important;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 4px;
}

.bx-wrapper .bx-prev::before {
  content: '\2039';
  font-size: 30px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.bx-wrapper .bx-next::before {
  content: '\203A';
  font-size: 30px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.bx-wrapper .bx-controls-auto .bx-start,
.bx-wrapper .bx-controls-auto .bx-stop {
  background-image: none !important;
}

/* ============================================
   ACCESSIBILITY GLOBAL STYLES
   ============================================ */

/* CSS Variables for Accessibility */
:root {
  --acc-font-scale: 1;
  --acc-line-height: 1;
  --acc-letter-spacing: 0px;
}

/* Font Size Scaling Classes */
body.acc-font-80 { zoom: 0.8; -moz-transform: scale(0.8); -moz-transform-origin: 0 0; }
body.acc-font-90 { zoom: 0.9; -moz-transform: scale(0.9); -moz-transform-origin: 0 0; }
body.acc-font-110 { zoom: 1.1; -moz-transform: scale(1.1); -moz-transform-origin: 0 0; }
body.acc-font-120 { zoom: 1.2; -moz-transform: scale(1.2); -moz-transform-origin: 0 0; }
body.acc-font-130 { zoom: 1.3; -moz-transform: scale(1.3); -moz-transform-origin: 0 0; }
body.acc-font-140 { zoom: 1.4; -moz-transform: scale(1.4); -moz-transform-origin: 0 0; }
body.acc-font-150 { zoom: 1.5; -moz-transform: scale(1.5); -moz-transform-origin: 0 0; }

/* Keep accessibility panel at normal size */
body[class*="acc-font-"] .accessibility-panel,
body[class*="acc-font-"] .accessibility-toggle,
body[class*="acc-font-"] .accessibility-overlay,
body[class*="acc-font-"] .reading-guide,
body[class*="acc-font-"] .skip-to-main {
  zoom: 1 !important;
  -moz-transform: scale(1) !important;
}

/* Line Height Mode */
body.acc-line-height * {
  line-height: calc(1.6 * var(--acc-line-height)) !important;
}

/* Letter Spacing Mode */
body.acc-letter-spacing * {
  letter-spacing: var(--acc-letter-spacing) !important;
}

/* Dyslexic Font - OpenDyslexic or similar readable font */
body.acc-dyslexic,
body.acc-dyslexic * {
  font-family: 'Comic Sans MS', 'OpenDyslexic', Arial, sans-serif !important;
}

/* High Contrast Mode - Using color changes instead of filter */
body.acc-contrast {
  background-color: #000 !important;
  color: #fff !important;
}

body.acc-contrast #page-wrapper,
body.acc-contrast #page-wrapper * {
  background-color: #000 !important;
  color: #fff !important;
  border-color: #fff !important;
}

body.acc-contrast #page-wrapper a {
  color: #ffff00 !important;
  text-decoration: underline !important;
}

body.acc-contrast #page-wrapper img,
body.acc-contrast #page-wrapper video {
  filter: contrast(1.2);
}

body.acc-contrast #page-wrapper button,
body.acc-contrast #page-wrapper input,
body.acc-contrast #page-wrapper select,
body.acc-contrast #page-wrapper textarea {
  background-color: #333 !important;
  color: #fff !important;
  border: 2px solid #fff !important;
}

/* Grayscale Mode - Apply to page wrapper */
body.acc-grayscale #page-wrapper {
  filter: grayscale(100%) !important;
}

/* Negative/Inverted Colors Mode - Apply to page wrapper */
body.acc-negative #page-wrapper {
  filter: invert(100%) !important;
}

/* Ensure sidebar/offcanvas inside wrapper is also affected (already inside wrapper) */
/* No additional selectors needed as #page-wrapper contains all main content */

/* Highlight Links Mode */
body.acc-highlight-links a:not(.accessibility-panel a):not(.skip-to-main) {
  background-color: yellow !important;
  color: #000 !important;
  padding: 2px 4px !important;
  text-decoration: underline !important;
  border-radius: 2px;
}

body.acc-highlight-links a:not(.accessibility-panel a):not(.skip-to-main):hover {
  background-color: #ffd700 !important;
}

/* Big Cursor Mode */
body.acc-big-cursor,
body.acc-big-cursor * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' stroke='%23fff' stroke-width='1' d='M5 3l14 9-7 2-4 7-3-18z'/%3E%3C/svg%3E"), auto !important;
}

body.acc-big-cursor a,
body.acc-big-cursor button,
body.acc-big-cursor [role="button"],
body.acc-big-cursor input[type="submit"],
body.acc-big-cursor input[type="button"] {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath fill='%23E6B22C' stroke='%23000' stroke-width='1' d='M7 11l2-2 6 6-2 2-6-6zm7-4l2-2 2 2-2 2-2-2z'/%3E%3C/svg%3E"), pointer !important;
}

/* Accessibility elements are now outside #page-wrapper, so they won't be affected by filters */
/* This ensures they remain visible and functional in all accessibility modes */

/* Accessibility panel styling is preserved by being outside #page-wrapper */

/* Focus visible for keyboard navigation */
*:focus-visible {
  outline: 3px solid var(--usm-primary) !important;
  outline-offset: 2px !important;
}

/* Reduced Motion preference */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================
   DARK MODE STYLES
   ============================================ */

/* Dark Mode CSS Variables - Neutral Gray Palette (matching breadcrumb) */
body.dark-mode {
  /* Background hierarchy - from darkest to lightest */
  --dm-bg-darkest: #141414;      /* Darkest - for contrast sections */
  --dm-bg-primary: #1a1a1a;      /* Primary dark background */
  --dm-bg-secondary: #222222;    /* Secondary - slightly lighter */
  --dm-bg-tertiary: #2a2a2a;     /* Tertiary - for alternating sections */
  --dm-bg-light: #333333;        /* Light dark - for highlighted sections */

  /* Card & Container backgrounds */
  --dm-card-bg: #2d2d2d;
  --dm-card-bg-alt: #383838;     /* Alternative card bg - lighter */
  --dm-input-bg: #2a2a2a;

  /* Text colors */
  --dm-text-primary: #e8e8e8;
  --dm-text-secondary: #b0b0b0;
  --dm-text-muted: #808080;

  /* Border */
  --dm-border: #3d3d3d;
  --dm-border-light: #4a4a4a;
}

/* Smooth transition for all elements */
body,
body *,
body *::before,
body *::after {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Base Dark Mode */
body.dark-mode {
  background-color: var(--dm-bg-primary) !important;
  color: var(--dm-text-primary) !important;
}

body.dark-mode #page-wrapper {
  background-color: var(--dm-bg-primary);
}

/* ---- Header Dark Mode ---- */
body.dark-mode .h6_header-area {
  background: linear-gradient(135deg, #1a1a1a 0%, #242424 50%, #2d2d2d 100%) !important;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.3);
}

body.dark-mode .h6_header-area.header-sticky.sticky {
  background: linear-gradient(135deg, #1a1a1a 0%, #242424 100%) !important;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
}

/* Header Logo - Invert to white in dark mode */
body.dark-mode .h6_header-logo img,
body.dark-mode .sidebar-logo img {
  filter: brightness(0) invert(1);
  transition: filter 0.3s ease;
}

body.dark-mode .h6_main-menu ul li a {
  color: var(--dm-text-primary) !important;
}

body.dark-mode .h6_main-menu ul li a:hover,
body.dark-mode .h6_main-menu ul li.menu-has-child:hover > a {
  color: var(--usm-primary) !important;
}

/* Active menu state - dark mode */
body.dark-mode .h6_main-menu ul > li.active > a {
  color: var(--usm-primary) !important;
}

body.dark-mode .h6_main-menu ul li .submenu {
  background-color: var(--dm-bg-secondary) !important;
  border-color: var(--dm-border);
}

body.dark-mode .h6_main-menu ul li .submenu li a {
  color: var(--dm-text-secondary) !important;
}

body.dark-mode .h6_main-menu ul li .submenu li a:hover {
  background-color: var(--dm-bg-tertiary) !important;
  color: var(--usm-primary) !important;
}

body.dark-mode .h6_main-menu ul li .submenu li:not(:last-child) {
  border-bottom-color: var(--dm-border) !important;
}

/* ---- Mobile Menu Dark Mode ---- */
body.dark-mode .sidebar-info {
  background-color: var(--dm-bg-secondary) !important;
}

body.dark-mode .mean-container .mean-nav {
  background-color: var(--dm-bg-secondary) !important;
}

body.dark-mode .mean-container .mean-nav ul li a {
  color: var(--dm-text-primary) !important;
  border-color: var(--dm-border) !important;
}

body.dark-mode .sidebar-search-form input {
  background-color: var(--dm-input-bg) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text-primary) !important;
}

/* ---- Banner/Hero Section ---- */
body.dark-mode .h6_banner-content-title,
body.dark-mode .h6_banner-content-text,
body.dark-mode .h6_banner-content-subtitle {
  color: #fff !important;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
}

/* ---- Sections Dark Mode ---- */
body.dark-mode section {
  background-color: var(--dm-bg-primary);
}

body.dark-mode .section-title,
body.dark-mode .section-subtitle,
body.dark-mode h1, body.dark-mode h2,
body.dark-mode h3, body.dark-mode h4,
body.dark-mode h5, body.dark-mode h6 {
  color: var(--dm-text-primary) !important;
}

body.dark-mode p,
body.dark-mode .section-text {
  color: var(--dm-text-secondary) !important;
}

/* ---- Cards & Content Boxes ---- */
body.dark-mode .h6_program-item,
body.dark-mode .h2_blog-item,
body.dark-mode .h5_blog-item,
body.dark-mode .h6_counter-item,
body.dark-mode .faq-card,
body.dark-mode .card {
  background-color: var(--dm-card-bg) !important;
  border-color: var(--dm-border) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

body.dark-mode .h6_program-item-content {
  background-color: var(--dm-bg-secondary) !important;
}

body.dark-mode .h6_program-item-content-info-title a,
body.dark-mode .h2_blog-content-title a,
body.dark-mode .h5_blog-content-title a {
  color: var(--dm-text-primary) !important;
}

body.dark-mode .h6_program-item-content-info-title a:hover,
body.dark-mode .h2_blog-content-title a:hover,
body.dark-mode .h5_blog-content-title a:hover {
  color: var(--usm-primary) !important;
}

body.dark-mode .h2_blog-content,
body.dark-mode .h5_blog-content {
  background-color: var(--dm-card-bg) !important;
}

body.dark-mode .h2_blog-content-meta span {
  color: var(--dm-text-muted) !important;
}

/* ---- About Section ---- */
body.dark-mode .h6_about-area {
  background-color: var(--dm-bg-primary);
}

body.dark-mode .h6_about-content-title,
body.dark-mode .h6_about-content p {
  color: var(--dm-text-primary) !important;
}

/* Running Text Ticker Dark Mode */
body.dark-mode .about-text-wrap {
  background: var(--dm-bg-secondary) !important;
}

body.dark-mode .about-text-ticker h1,
body.dark-mode .h6_about-bottom-title {
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.15) !important;
}

/* ---- Counter Section ---- */
/* Counter item card padding (both light & dark mode) */
.h6_counter-item {
  padding: 40px 20px;
  border-radius: 12px;
  background-color: #fff;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.h6_counter-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

body.dark-mode .h6_counter-area {
  background-color: var(--dm-bg-secondary) !important;
}

body.dark-mode .h6_counter-item {
  background-color: var(--dm-card-bg) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

body.dark-mode .h6_counter-item:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

body.dark-mode .h6_counter-item-content h2,
body.dark-mode .h6_counter-item-content p {
  color: var(--dm-text-primary) !important;
}

/* ---- Blog/Berita Section ---- */
body.dark-mode .h5_blog-area,
body.dark-mode .h6_blog-area {
  background-color: var(--dm-bg-primary);
}

/* ---- CTA/Admission Section ---- */
body.dark-mode .h6_admission-area {
  background-color: var(--dm-bg-secondary);
}

/* ---- Breadcrumb Dark Mode ---- */
body.dark-mode .breadcrumb-area,
body.dark-mode .breadcumb-wrapper {
  background-image: url('/assets/img/custom/breadcumb-bg-dark.png') !important;
  background-size: cover !important;
  background-position: center !important;
}

body.dark-mode .breadcrumb-title {
  color: #ffffff !important;
}

body.dark-mode .breadcrumb-desc {
  color: #cccccc !important;
}

body.dark-mode .breadcrumb-list a,
body.dark-mode .breadcrumb-list span {
  color: #cccccc !important;
}

body.dark-mode .breadcrumb-list a:hover {
  color: var(--usm-primary) !important;
}

body.dark-mode .breadcrumb-list a::after {
  color: #888 !important;
}

/* ---- Footer Dark Mode ---- */
body.dark-mode .h6_footer-area {
  background-image: url('/assets/img/custom/footer-dark.png') !important;
  background-color: var(--dm-bg-secondary);
}

body.dark-mode .h6_footer-widget-title {
  color: var(--dm-text-primary) !important;
}

body.dark-mode .h6_footer-widget-text,
body.dark-mode .h6_footer-widget-list li a,
body.dark-mode .h6_footer-widget-contact li {
  color: var(--dm-text-secondary) !important;
}

body.dark-mode .h6_footer-widget-list li a:hover,
body.dark-mode .h6_footer-widget-contact li a:hover {
  color: var(--usm-primary) !important;
}

body.dark-mode .h6_footer-copyright p {
  color: var(--dm-text-muted) !important;
}

/* ---- Form Elements Dark Mode ---- */
body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select {
  background-color: var(--dm-input-bg) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text-primary) !important;
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
  color: var(--dm-text-muted) !important;
}

body.dark-mode input:focus,
body.dark-mode textarea:focus,
body.dark-mode select:focus {
  border-color: var(--usm-primary) !important;
}

/* ---- Links Dark Mode ---- */
body.dark-mode a {
  color: var(--dm-text-secondary);
}

body.dark-mode a:hover {
  color: var(--usm-primary);
}

/* ---- Scroll Top Button Dark Mode ---- */
body.dark-mode .scroll-top {
  background-color: var(--dm-bg-tertiary) !important;
  border: 1px solid var(--dm-border);
}

body.dark-mode .scroll-top:hover {
  background-color: var(--usm-primary) !important;
  border-color: var(--usm-primary);
}

/* ---- Tables Dark Mode ---- */
body.dark-mode table {
  background-color: var(--dm-card-bg) !important;
  border-color: var(--dm-border) !important;
}

body.dark-mode table th,
body.dark-mode table td {
  border-color: var(--dm-border) !important;
  color: var(--dm-text-primary) !important;
}

body.dark-mode table th {
  background-color: var(--dm-bg-tertiary) !important;
}

body.dark-mode table tr:nth-child(even) {
  background-color: var(--dm-bg-secondary) !important;
}

/* ---- Accordion/FAQ Dark Mode ---- */
body.dark-mode .accordion-item {
  background-color: var(--dm-card-bg) !important;
  border-color: var(--dm-border) !important;
}

body.dark-mode .accordion-button {
  background-color: var(--dm-card-bg) !important;
  color: var(--dm-text-primary) !important;
}

body.dark-mode .accordion-button:not(.collapsed) {
  background-color: var(--dm-bg-tertiary) !important;
  color: var(--usm-primary) !important;
}

body.dark-mode .accordion-body {
  background-color: var(--dm-card-bg) !important;
  color: var(--dm-text-secondary) !important;
}

/* ---- Pagination Dark Mode ---- */
body.dark-mode .pagination .page-link {
  background-color: var(--dm-card-bg) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text-primary) !important;
}

body.dark-mode .pagination .page-item.active .page-link {
  background-color: var(--usm-primary) !important;
  border-color: var(--usm-primary) !important;
  color: #1A1A2E !important;
}

/* ---- Contact Page Dark Mode ---- */
body.dark-mode .contact-info-card {
  background-color: var(--dm-card-bg) !important;
}

body.dark-mode .contact-info-icon {
  background-color: var(--dm-bg-tertiary) !important;
}

body.dark-mode .contact-info-title,
body.dark-mode .contact-info-text a {
  color: var(--dm-text-primary) !important;
}

/* ---- Gallery/Media Dark Mode ---- */
body.dark-mode .gallery-item,
body.dark-mode .video-item,
body.dark-mode .download-item {
  background-color: var(--dm-card-bg) !important;
  border-color: var(--dm-border) !important;
}

/* ---- Modal/Popup Dark Mode ---- */
body.dark-mode .modal-content {
  background-color: var(--dm-bg-secondary) !important;
  border-color: var(--dm-border) !important;
}

body.dark-mode .modal-header,
body.dark-mode .modal-footer {
  border-color: var(--dm-border) !important;
}

body.dark-mode .modal-title {
  color: var(--dm-text-primary) !important;
}

/* ---- Nice Select Dark Mode ---- */
body.dark-mode .nice-select {
  background-color: var(--dm-input-bg) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text-primary) !important;
}

body.dark-mode .nice-select .list {
  background-color: var(--dm-bg-secondary) !important;
  border-color: var(--dm-border) !important;
}

body.dark-mode .nice-select .option {
  color: var(--dm-text-secondary) !important;
}

body.dark-mode .nice-select .option:hover,
body.dark-mode .nice-select .option.selected {
  background-color: var(--dm-bg-tertiary) !important;
  color: var(--usm-primary) !important;
}

/* ---- Swiper/Slider Dark Mode ---- */
body.dark-mode .swiper-pagination-bullet {
  background-color: var(--dm-text-muted) !important;
}

body.dark-mode .swiper-pagination-bullet-active {
  background-color: var(--usm-primary) !important;
}

/* ---- Running Text Ticker Dark Mode ---- */
body.dark-mode .running-text-section {
  background-color: var(--dm-bg-secondary) !important;
}

body.dark-mode .running-text-content {
  color: var(--dm-text-primary) !important;
}

/* ---- Partner/Logo Section Dark Mode ---- */
body.dark-mode .partner-area {
  background-color: var(--dm-bg-secondary);
}

body.dark-mode .partner-item {
  background-color: var(--dm-card-bg) !important;
  filter: brightness(0.9);
}

body.dark-mode .partner-item:hover {
  filter: brightness(1);
}

/* ---- Promo Section Dark Mode ---- */
body.dark-mode .promo-item {
  background-color: var(--dm-card-bg) !important;
  border-color: var(--dm-border) !important;
}

/* ---- Alert/Notice Dark Mode ---- */
body.dark-mode .alert {
  background-color: var(--dm-card-bg) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text-primary) !important;
}

/* ---- Loading/Skeleton Dark Mode ---- */
body.dark-mode .skeleton {
  background: linear-gradient(90deg, var(--dm-bg-tertiary) 25%, var(--dm-bg-secondary) 50%, var(--dm-bg-tertiary) 75%);
}

/* ---- Prevent flash of light mode on page load ---- */
html.dark-mode-preload {
  background-color: #1a1a1a;
}

/* ---- Ensure buttons stay styled ---- */
body.dark-mode .theme-btn-5,
body.dark-mode .theme-btn-6,
body.dark-mode .t-theme-btn {
  background-color: var(--usm-primary) !important;
  color: #1A1A2E !important;
}

body.dark-mode .theme-btn-5:hover,
body.dark-mode .theme-btn-6:hover,
body.dark-mode .t-theme-btn:hover {
  background-color: var(--usm-primary-dark) !important;
}

/* ============================================
   COMPREHENSIVE DARK MODE - Override Inline Styles
   Section Color Mapping:
   - Light mode white (#fff) → Dark mode primary (#1a1a1a)
   - Light mode light gray (#f8f9fa) → Dark mode tertiary (#2a2a2a)
   - Light mode medium gray (#e9ecef) → Dark mode light (#333333)
   ============================================ */

/* ---- Section Background Variations ---- */

/* WHITE sections in light mode → PRIMARY dark (#1a1a1a) */
body.dark-mode section[style*="background: white"],
body.dark-mode section[style*="background-color: white"],
body.dark-mode section[style*="background:#fff"],
body.dark-mode section[style*="background-color:#fff"],
body.dark-mode section[style*="background: #fff"],
body.dark-mode section[style*="background-color: #fff"],
body.dark-mode section[style*="background: #ffffff"],
body.dark-mode section[style*="background-color: #ffffff"] {
  background: var(--dm-bg-primary) !important;
  background-color: var(--dm-bg-primary) !important;
}

/* LIGHT GRAY sections (#f8f9fa) in light mode → TERTIARY dark (#2a2a2a) */
body.dark-mode section[style*="background: #f8f9fa"],
body.dark-mode section[style*="background-color: #f8f9fa"],
body.dark-mode section[style*="background:#f8f9fa"],
body.dark-mode section[style*="background-color:#f8f9fa"],
body.dark-mode section[style*="background: linear-gradient(135deg, #f8f9fa"],
body.dark-mode section[style*="background: linear-gradient(135deg, #ffffff"] {
  background: var(--dm-bg-tertiary) !important;
  background-color: var(--dm-bg-tertiary) !important;
}

/* MEDIUM GRAY sections (#e9ecef, #eee) → LIGHT dark (#333333) */
body.dark-mode section[style*="background: #e9ecef"],
body.dark-mode section[style*="background-color: #e9ecef"],
body.dark-mode section[style*="background:#eee"],
body.dark-mode section[style*="background-color:#eee"] {
  background: var(--dm-bg-light) !important;
  background-color: var(--dm-bg-light) !important;
}

/* Named section areas - alternating colors */
body.dark-mode .h3_about-area,
body.dark-mode .h2_about-area,
body.dark-mode .about-area {
  background: var(--dm-bg-primary) !important;
}

body.dark-mode .blog-area,
body.dark-mode .h5_blog-area,
body.dark-mode .h6_blog-area {
  background: var(--dm-bg-primary) !important;
}

body.dark-mode .service-area,
body.dark-mode .h3_service-area {
  background: var(--dm-bg-secondary) !important;
}

body.dark-mode .team-area {
  background: var(--dm-bg-tertiary) !important;
}

body.dark-mode .faq-area {
  background: var(--dm-bg-primary) !important;
}

body.dark-mode .contact-area {
  background: var(--dm-bg-secondary) !important;
}

/* Category/Feature sections - slightly lighter for emphasis */
body.dark-mode .h6_category-area,
body.dark-mode .category-area {
  background: var(--dm-bg-light) !important;
}

/* Counter/Stats sections - lighter for contrast with adjacent sections */
body.dark-mode .counter-area,
body.dark-mode .h3_counter-area,
body.dark-mode .h6_counter-area {
  background: var(--dm-bg-light) !important;
}

/* CTA sections - distinct color */
body.dark-mode .cta-area,
body.dark-mode .h3_cta-area {
  background: var(--dm-bg-light) !important;
}

/* ---- Card & Container Backgrounds ---- */

/* WHITE containers/cards → CARD dark (#2d2d2d) */
body.dark-mode .container [style*="background: white"],
body.dark-mode .container [style*="background-color: white"],
body.dark-mode .container [style*="background:#fff"],
body.dark-mode .container [style*="background-color:#fff"],
body.dark-mode .container [style*="background: #fff"],
body.dark-mode .container [style*="background-color: #fff"],
body.dark-mode .bg-white,
body.dark-mode .timeline-container,
body.dark-mode .leadership-card[style*="background: white"],
body.dark-mode .profil-card {
  background: var(--dm-card-bg) !important;
  background-color: var(--dm-card-bg) !important;
  border-color: var(--dm-border) !important;
}

/* LIGHT GRAY containers (#f8f9fa) → ALT CARD dark (#383838) */
body.dark-mode [style*="background-color: #f8f9fa"],
body.dark-mode [style*="background:#f8f9fa"],
body.dark-mode [style*="background: #f8f9fa"],
body.dark-mode [style*="background-color:#f8f9fa"],
body.dark-mode [style*="background: linear-gradient(135deg, #f8f9fa"],
body.dark-mode .unit-card[style*="background: #f8f9fa"],
body.dark-mode .unit-card {
  background: var(--dm-card-bg-alt) !important;
  background-color: var(--dm-card-bg-alt) !important;
}

/* Timeline specific dark mode */
body.dark-mode .timeline-container {
  background: var(--dm-card-bg) !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .timeline-content {
  border-color: var(--dm-border) !important;
}

body.dark-mode .timeline-item h5,
body.dark-mode .timeline-content h5 {
  color: var(--dm-text-primary) !important;
}

body.dark-mode .timeline-content p {
  color: var(--dm-text-secondary) !important;
}

/* Leadership cards dark mode */
body.dark-mode .leadership-card {
  background: var(--dm-card-bg) !important;
  border-color: var(--dm-border) !important;
}

body.dark-mode .leadership-card h5,
body.dark-mode .leadership-card h4 {
  color: var(--dm-text-primary) !important;
}

body.dark-mode .leadership-card p {
  color: var(--dm-text-secondary) !important;
}

/* Unit cards dark mode */
body.dark-mode .unit-card {
  background: var(--dm-bg-tertiary) !important;
}

body.dark-mode .unit-card:hover {
  background: var(--dm-card-bg) !important;
}

body.dark-mode .unit-card p {
  color: var(--dm-text-primary) !important;
}

body.dark-mode .unit-card small {
  color: var(--dm-text-muted) !important;
}

/* Profil cards dark mode */
body.dark-mode .profil-card {
  background: var(--dm-card-bg) !important;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .profil-card h6 {
  color: var(--dm-text-primary) !important;
}

body.dark-mode .profil-card small {
  color: var(--dm-text-muted) !important;
}

/* Rektor section */
body.dark-mode .rektor-photo h5 {
  color: var(--dm-text-primary) !important;
}

body.dark-mode .rektor-photo p,
body.dark-mode .rektor-greeting,
body.dark-mode .rektor-greeting p {
  color: var(--dm-text-secondary) !important;
}

/* Mission list */
body.dark-mode .mission-list li {
  color: var(--dm-text-secondary) !important;
}

/* Video container */
body.dark-mode .video-container {
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4) !important;
}

/* All inline style text colors */
body.dark-mode [style*="color: #333"],
body.dark-mode [style*="color:#333"],
body.dark-mode [style*="color: #1A1A2E"],
body.dark-mode [style*="color:#1A1A2E"] {
  color: var(--dm-text-primary) !important;
}

body.dark-mode [style*="color: #666"],
body.dark-mode [style*="color:#666"],
body.dark-mode [style*="color: #6b7280"],
body.dark-mode [style*="color:#6b7280"] {
  color: var(--dm-text-secondary) !important;
}

/* Text muted */
body.dark-mode .text-muted {
  color: var(--dm-text-muted) !important;
}

/* General content text */
body.dark-mode .content-area,
body.dark-mode .content-area p,
body.dark-mode .content-area li,
body.dark-mode .post-content,
body.dark-mode .post-content p,
body.dark-mode .post-content li,
body.dark-mode article,
body.dark-mode article p {
  color: var(--dm-text-secondary) !important;
}

/* Page content with bg-white */
body.dark-mode .content-wrapper,
body.dark-mode .page-content,
body.dark-mode .blog-details-content {
  background: var(--dm-card-bg) !important;
}

/* Box shadows for cards in dark mode */
body.dark-mode [style*="box-shadow"] {
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3) !important;
}

/* Breadcrumb area */
body.dark-mode .breadcrumb-area + section,
body.dark-mode .breadcumb-wrapper + section {
  background: var(--dm-bg-primary) !important;
}

/* FAQ items */
body.dark-mode .faq-item,
body.dark-mode .faq-card {
  background: var(--dm-card-bg) !important;
  border-color: var(--dm-border) !important;
}

/* Layanan/Service cards */
body.dark-mode .service-item,
body.dark-mode .layanan-card,
body.dark-mode .layanan-item {
  background: var(--dm-card-bg) !important;
  border-color: var(--dm-border) !important;
}

/* Contact info cards */
body.dark-mode .contact-box,
body.dark-mode .info-box {
  background: var(--dm-card-bg) !important;
  border-color: var(--dm-border) !important;
}

/* Kontak page specific */
body.dark-mode .contact-section {
  background: var(--dm-bg-primary) !important;
}

/* Download/Media items */
body.dark-mode .download-card,
body.dark-mode .media-card {
  background: var(--dm-card-bg) !important;
  border-color: var(--dm-border) !important;
}

/* Publication detail pages */
body.dark-mode .publication-content,
body.dark-mode .news-content,
body.dark-mode .artikel-content {
  background: var(--dm-card-bg) !important;
}

/* General white backgrounds */
body.dark-mode div[style*="background: white"],
body.dark-mode div[style*="background-color: white"],
body.dark-mode div[style*="background:#ffffff"],
body.dark-mode div[style*="background-color:#ffffff"],
body.dark-mode div[style*="background: #ffffff"],
body.dark-mode div[style*="background-color: #ffffff"] {
  background: var(--dm-card-bg) !important;
  background-color: var(--dm-card-bg) !important;
}

/* Rounded containers */
body.dark-mode .rounded[style*="background"],
body.dark-mode .rounded-lg[style*="background"],
body.dark-mode .card[style*="background"] {
  background: var(--dm-card-bg) !important;
  border-color: var(--dm-border) !important;
}

/* Override any remaining light backgrounds */
body.dark-mode main section {
  background: var(--dm-bg-primary) !important;
}

body.dark-mode main section:nth-of-type(even) {
  background: var(--dm-bg-secondary) !important;
}

/* ============================================
   Search Box Dark Mode
   ============================================ */
body.dark-mode .page-search-box {
  background: var(--dm-card-bg) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .search-input-wrapper {
  background: var(--dm-card-bg) !important;
}

body.dark-mode .search-input-wrapper input {
  color: var(--dm-text-primary) !important;
}

body.dark-mode .search-input-wrapper input:focus {
  outline: none !important;
  box-shadow: none !important;
}

body.dark-mode .search-input-wrapper input::placeholder {
  color: var(--dm-text-muted) !important;
}

body.dark-mode .search-icon {
  color: var(--dm-text-muted) !important;
}

body.dark-mode .search-results-info {
  color: var(--dm-text-secondary) !important;
}

/* ============================================
   Pagination Dark Mode
   ============================================ */
body.dark-mode .pagination-area ul li a {
  background: var(--dm-card-bg) !important;
  color: var(--dm-text-primary) !important;
  border-color: var(--dm-border) !important;
}

body.dark-mode .pagination-area ul li a:hover {
  background: var(--usm-primary) !important;
  border-color: var(--usm-primary) !important;
  color: #1a1a1a !important;
}

body.dark-mode .pagination-area ul li.active a,
body.dark-mode .pagination-area ul li.active a:hover {
  background: var(--usm-primary) !important;
  border-color: var(--usm-primary) !important;
  color: #1a1a1a !important;
}

body.dark-mode .pagination-area ul li.dots span {
  color: var(--dm-text-muted) !important;
}

/* ============================================
   Page Detail Dark Mode
   ============================================ */
body.dark-mode .blog-details-area {
  background: var(--dm-bg-primary) !important;
}

body.dark-mode .blog-details-content {
  background: transparent !important;
}

body.dark-mode .blog-details-title {
  color: var(--dm-text-primary) !important;
}

body.dark-mode .blog-details-meta a,
body.dark-mode .blog-details-meta span {
  color: var(--dm-text-secondary) !important;
}

body.dark-mode .blog-details-text {
  color: var(--dm-text-secondary) !important;
}

body.dark-mode .blog-details-text p,
body.dark-mode .blog-details-text li,
body.dark-mode .blog-details-text span {
  color: var(--dm-text-secondary) !important;
}

body.dark-mode .blog-details-text h1,
body.dark-mode .blog-details-text h2,
body.dark-mode .blog-details-text h3,
body.dark-mode .blog-details-text h4,
body.dark-mode .blog-details-text h5,
body.dark-mode .blog-details-text h6 {
  color: var(--dm-text-primary) !important;
}

body.dark-mode .blog-details-text a {
  color: var(--usm-primary) !important;
}

body.dark-mode .blog-details-text blockquote {
  background: var(--dm-bg-secondary) !important;
  border-left-color: var(--usm-primary) !important;
  color: var(--dm-text-secondary) !important;
}

body.dark-mode .blog-details-text pre,
body.dark-mode .blog-details-text code {
  background: var(--dm-bg-secondary) !important;
  color: var(--dm-text-primary) !important;
}

body.dark-mode .blog-details-text table {
  border-color: var(--dm-border) !important;
}

body.dark-mode .blog-details-text table th,
body.dark-mode .blog-details-text table td {
  border-color: var(--dm-border) !important;
  color: var(--dm-text-secondary) !important;
}

body.dark-mode .blog-details-text table th {
  background: var(--dm-bg-secondary) !important;
  color: var(--dm-text-primary) !important;
}

/* Related Pages Section */
body.dark-mode .related-pages-area {
  background: var(--dm-bg-tertiary) !important;
}

/* ============================================
   Publikasi Detail Dark Mode
   ============================================ */
body.dark-mode .blog_details-area {
  background: var(--dm-bg-primary) !important;
}

body.dark-mode .blog_details-top {
  background: var(--dm-card-bg) !important;
  box-shadow: 0px 20px 80px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .blog_details-title {
  color: var(--dm-text-primary) !important;
}

body.dark-mode .blog_details-author-info span,
body.dark-mode .blog_details-category span,
body.dark-mode .blog_details-date span,
body.dark-mode .blog_details-views span {
  color: var(--dm-text-muted) !important;
}

body.dark-mode .blog_details-author-info h5,
body.dark-mode .blog_details-category h5,
body.dark-mode .blog_details-date h5,
body.dark-mode .blog_details-views h5 {
  color: var(--dm-text-primary) !important;
}

body.dark-mode .blog_details-author-img {
  border-color: var(--dm-border) !important;
}

body.dark-mode .blog_details-category::before,
body.dark-mode .blog_details-date::before,
body.dark-mode .blog_details-views::before {
  background: var(--dm-border) !important;
}

body.dark-mode .blog_details-inner-text {
  color: var(--dm-text-secondary) !important;
}

body.dark-mode .blog_details-inner-text p,
body.dark-mode .blog_details-inner-text li,
body.dark-mode .blog_details-inner-text span {
  color: var(--dm-text-secondary) !important;
}

body.dark-mode .blog_details-inner-text h1,
body.dark-mode .blog_details-inner-text h2,
body.dark-mode .blog_details-inner-text h3,
body.dark-mode .blog_details-inner-text h4,
body.dark-mode .blog_details-inner-text h5,
body.dark-mode .blog_details-inner-text h6 {
  color: var(--dm-text-primary) !important;
}

body.dark-mode .blog_details-inner-text a {
  color: var(--usm-primary) !important;
}

body.dark-mode .blog_details-inner-text blockquote {
  background: var(--dm-bg-secondary) !important;
  border-left-color: var(--usm-primary) !important;
}

body.dark-mode .blog_details-content-meta {
  border-color: var(--dm-border) !important;
}

body.dark-mode .blog_details-content-tag h6,
body.dark-mode .blog_details-content-social h6 {
  color: var(--dm-text-primary) !important;
}

body.dark-mode .blog_details-content-tag ul li a {
  background: var(--dm-bg-secondary) !important;
  color: var(--dm-text-secondary) !important;
}

body.dark-mode .blog_details-content-tag ul li a:hover {
  background: var(--usm-primary) !important;
  color: #1a1a1a !important;
}

body.dark-mode .blog_details-content-social ul li a {
  color: var(--dm-text-muted) !important;
}

body.dark-mode .blog_details-content-social ul li a:hover {
  color: var(--usm-primary) !important;
}

/* Post Navigation */
body.dark-mode .blog_details-bottom-item {
  background: var(--dm-bg-secondary) !important;
  border-color: transparent !important;
}

body.dark-mode .blog_details-bottom-item:hover {
  background: var(--dm-card-bg) !important;
  border-color: var(--dm-border) !important;
}

body.dark-mode .blog_details-bottom-item span,
body.dark-mode .blog_details-bottom-item h5,
body.dark-mode .blog_details-bottom-item h5 a {
  color: var(--dm-text-primary) !important;
}

body.dark-mode .blog_details-bottom-item h5 a:hover {
  color: var(--usm-primary) !important;
}

/* Related Posts */
body.dark-mode .blog_details-related-title {
  color: var(--dm-text-primary) !important;
}

/* Sidebar Widgets */
body.dark-mode .blog_details-widget {
  background: var(--dm-card-bg) !important;
  box-shadow: 0px 20px 80px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .blog_details-widget-title {
  color: var(--dm-text-primary) !important;
}

body.dark-mode .blog_details-widget-title::before {
  background: var(--usm-primary) !important;
}

/* Widget Banner */
body.dark-mode .widget-banner,
body.dark-mode .banner-slide {
  background: var(--dm-bg-secondary) !important;
}

body.dark-mode .widget-banner-title {
  color: var(--dm-text-primary) !important;
}

/* Widget Recent Posts */
body.dark-mode .blog_details-widget-post {
  border-color: var(--dm-border) !important;
}

body.dark-mode .blog_details-post-info span {
  color: var(--dm-text-muted) !important;
}

body.dark-mode .blog_details-post-info h6,
body.dark-mode .blog_details-post-info h6 a {
  color: var(--dm-text-primary) !important;
}

body.dark-mode .blog_details-post-info h6 a:hover {
  color: var(--usm-primary) !important;
}

/* Widget Tags */
body.dark-mode .blog_details-widget-tag ul li a {
  background: var(--dm-bg-secondary) !important;
  color: var(--dm-text-secondary) !important;
  border-color: var(--dm-border) !important;
}

body.dark-mode .blog_details-widget-tag ul li a:hover {
  background: var(--usm-primary) !important;
  color: #1a1a1a !important;
  border-color: var(--usm-primary) !important;
}

/* Banner Dots */
body.dark-mode .banner-dot {
  background: var(--dm-border) !important;
}

body.dark-mode .banner-dot.active {
  background: var(--usm-primary) !important;
}

/* Related Blog Cards (h2_blog-item) */
body.dark-mode .h2_blog-item {
  background: var(--dm-card-bg) !important;
}

body.dark-mode .h2_blog-content {
  background: var(--dm-card-bg) !important;
}

body.dark-mode .h2_blog-content-title a {
  color: var(--dm-text-primary) !important;
}

body.dark-mode .h2_blog-content-title a:hover {
  color: var(--usm-primary) !important;
}

body.dark-mode .h2_blog-content-meta span {
  color: var(--dm-text-muted) !important;
}

/* ============================================
   Image Lightbox Modal
   ============================================ */
.lightbox-modal {
  display: none;
  position: fixed;
  z-index: 99999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.95);
  cursor: zoom-out;
}

.lightbox-modal.active {
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-content {
  max-width: 90%;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5);
  cursor: default;
}

.lightbox-close {
  position: absolute;
  top: 20px;
  right: 30px;
  color: #fff;
  font-size: 36px;
  font-weight: 300;
  cursor: pointer;
  transition: color 0.3s ease;
  z-index: 100000;
}

.lightbox-close:hover {
  color: var(--usm-primary);
}

.lightbox-caption {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 14px;
  text-align: center;
  max-width: 80%;
  padding: 10px 20px;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 8px;
}

/* Clickable thumbnail indicator */
.blog_details-img img,
.lightbox-trigger {
  cursor: zoom-in;
  transition: opacity 0.3s ease;
}

.blog_details-img img:hover,
.lightbox-trigger:hover {
  opacity: 0.9;
}