/* MDIX audit: the marquee plugin makes 100000px-wide strips; clip them to their box so the page
   has no hidden horizontal overflow (it broke full-page rendering and is heavy on phones). */
.marquee,
.marquee2 { overflow: hidden !important; contain: paint; }
/* The MDIX wordmark is dark text; on the dark-green footer and mobile sidebar it vanished. */
.footer .footer-logo img,
.sidebar .header-logo img { filter: brightness(0) invert(1); }
/* Decorative quote mark and spinning circle shipped as flat blank placeholders (visible as empty boxes). */
.quota-icon img,
.circle-2 img,
.banner-author-2-circle img { visibility: hidden; }

/* ---- Design QA 2026-10-12 ---- */

/* Theme CSS points at /img/… (site root) and ../../img/… — both 404 on the demo. */
.breadcrumb { background-image: url("img/breadcrumb.png"); }
.banner-2 { background-image: url("img/banner-2-bg.png"); }

/* Hero: the small photo was a cut-out on a circle; it is now a real photo, so give it a frame. */
.banner-author-2 { background: none; }
.banner-author-2 .banner-author-2-img { object-fit: cover; border-radius: 20px; }

/* Hero below 1200px: the theme hid the main photo, leaving a gap in the middle of the hero.
   Show it as a full-width photo under the intro + counter. */
@media (max-width: 1199.98px) {
  .banner-1 .row > .col-xl-5.d-none { display: block !important; order: 3; width: 100%; margin-top: 48px; }
  .banner-1 .banner-img .banner-img-1 {
    display: block; width: 100%; max-width: 100%; height: 440px;
    object-fit: cover; object-position: 50% 22%; border-radius: 24px;
  }
}
@media (max-width: 575.98px) {
  .banner-1 .banner-author-2 { display: none; }
  .banner-1 .banner-author-2 { margin: 0; }
  .banner-1 .flex-end { justify-content: center; margin-top: 8px; }
  .banner-1 .banner-img .banner-img-1 { height: 360px; }
}

/* About list: wrapped lines hang under the text, not under the chevron. */
.about-list li { padding-left: 26px; }
.about-list li::before { position: absolute; left: 0; top: 0.2em; margin-right: 0; }

/* Testimonials: Indonesian sentences in Title Case read oddly; use sentence case. */
.testimonial-item .testimonial-content { text-transform: none; }
/* The empty left column held a blank placeholder image; draw the quote mark with the icon font. */
.quota-icon { position: relative; }
.quota-icon::before {
  content: "\f10d";
  font-family: "Font Awesome 6 Pro";
  font-weight: 900;
  font-size: 120px;
  line-height: 1;
  color: var(--secondary);
  position: absolute;
  top: 0;
  left: 0;
}
@media (max-width: 575.98px) {
  .testimonial-item > .d-flex { flex-wrap: wrap; gap: 12px; }
  .testimonial-item .user-name { min-width: 0; }
}

/* FAQ: the +/- button sat on top of long questions on phones. */
.faq-items .faq-item h4.faq-toggle { padding-right: 52px; }
@media (max-width: 575.98px) {
  .faq-items .faq-item { padding: 15px 18px; gap: 10px; }
  .faq-items .faq-item h4 { font-size: 18px; line-height: 1.4; }
  .faq-items .faq-item h4.faq-toggle::after { top: -6px; }
}
/* Contact card and the FAQ heading were glued together once the columns stack. */
@media (max-width: 1199.98px) {
  .faq-contact { margin-bottom: 48px; }
}

/* Newsletter card: desktop padding left one word per line on phones. */
@media (max-width: 991.98px) {
  .subscribe { padding: 40px 32px; }
}
@media (max-width: 575.98px) {
  .subscribe { padding: 32px 20px; }
  .subscribe h2 { font-size: 30px; line-height: 1.3; }
  .subscribe-form .input-group,
  .subscribe-form .theme-btn-2,
  .subscribe-form button { width: 100%; }
}

/* Footer: columns were pushed right/centered on tablets and looked ragged; align them left. */
@media (max-width: 1199.98px) {
  .footer .row > [class*="col-"] { justify-content: flex-start !important; }
}
.footer-contact i { flex-shrink: 0; }
.footer-contact h4 a { color: inherit; }
.footer-contact h4 a:hover { color: var(--third); }
@media (max-width: 575.98px) {
  .footer-copyright .copyright-menu ul { flex-wrap: wrap; gap: 8px 24px; }
}

/* Team cards: the hidden social links only appeared on mouse hover; also show them on
   keyboard focus and after a tap (class set by the page script). */
.team-items .team-item .team-img:focus-within .share-icon,
.team-items .team-item .team-img.mdix-share-open .share-icon { opacity: 1 !important; }

/* Mobile menu: links were 16px tall (hard to tap) and the closed panel stayed keyboard-focusable. */
.sidebar { visibility: hidden; transition: right 0.5s, visibility 0s 0.5s; }
.sidebar.open { visibility: visible; transition: right 0.5s, visibility 0s; }
.sidebar .main-menu-mobile a { display: inline-flex; align-items: center; min-height: 40px; }
.sidebar .main-menu-mobile .dropdown-toggle-btn { min-width: 40px; min-height: 40px; }
/* Theme bug: between 992 and 1199px the menu panel was 1400px wide and its links sat off-screen,
   so the hamburger opened an empty black panel. Use the tablet panel up to 1199px. */
@media (max-width: 1199.98px) {
  .sidebar { width: 500px; max-width: 100%; padding: 100px 50px; }
  .sidebar .sidebar-content { width: 100%; position: static; transform: none; }
}
@media (max-width: 575.98px) {
  .sidebar { width: 300px; padding: 50px 20px; }
}
/* "Selengkapnya" links on service cards were 23px tall (WCAG 2.5.8 needs 24px). */
.read-more { min-height: 32px; }
/* Footer links were 20px tall; give them a 28px tap area without moving the layout much. */
.footer .footer-menu ul a,
.footer-copyright .copyright-menu ul a { display: inline-block; padding: 4px 0; }
.footer .footer-menu ul:not(.footer-contact) { gap: 7px; }
h4 > a[href^="tel:"],
h4 > a[href^="mailto:"] { display: inline-block; padding: 3px 0; color: inherit; }
/* Portfolio on phones: the desktop stagger (80px offsets + 57px gaps) left big holes in one column. */
@media (max-width: 767.98px) {
  .portfolio-items .row > .wv-mt-80 { margin-top: 0 !important; }
  .portfolio-items .portfolio-item { margin-bottom: 40px; }
  .portfolio-items .portfolio-item .portfolio-content h3 { font-size: 26px; }
}
/* Prices are now in Rupiah (longer than "$25"); keep them on one line inside the plan cards. */
.price-2-item .price-2-price { white-space: nowrap; }
.price-2-item .price-2-price span { font-size: clamp(28px, 2.6vw, 40px); text-transform: none; }

/* Final re-verification 2026-10-13: the faint 100px "Tentang Kami" watermark broke "Tentang" mid-word on phones. */
@media (max-width: 575px) {
  .section-title-under { font-size: 16vw; line-height: 1.1; }
}

/* Final re-verification 2026-10-13: larger SVG wordmark (the PNG text was ~10px); keep the footer
   back-to-top arrow off "Hubungi Kami". */
.header-logo img, .footer-logo img { height: 32px; width: auto; max-width: 70vw; }
@media (min-width: 992px) { .copyright-menu ul { padding-right: 64px !important; } }
/* Final re-verification 2026-10-13: selected option in the styled select read 2.85:1. */
.nice-select .option.selected, .nice-select .option.disabled { color: #4b5563; }
/* index-2 uses a footer without the .footer class: same 28px tap area for its menu links. */
.footer-menu ul a { display: inline-block; padding: 4px 0; }