/* MDIX audit: real laundromat photo behind the white hero text needs a tint */
.imgbg {
  position: relative;
}
.imgbg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 72, 140, 0.78) 0%, rgba(0, 72, 140, 0.45) 55%, rgba(0, 72, 140, 0.15) 100%);
}
/* testimonial "website" links pointed to google.com / dota.com */
.quote-box .q-url {
  display: none;
}
.banner .caption {
  z-index: 2;
}

/* the centre service photo used to be a transparent cut-out; the real photo is opaque,
   so keep it shorter and rounded so it does not cover the section intro */
.services-item-image img {
  width: 300px;
  height: 380px;
  max-width: 100%;
  object-fit: cover;
  border-radius: 150px 150px 0 0;
}
@media (max-width: 991px) {
  .services-item-image img {
    height: 320px;
    border-radius: 150px 150px 12px 12px;
  }
}

/* the logo has dark lettering; give it a light plate on the dark footer */
.footer-logo img {
  background: #fff;
  padding: 6px 10px;
  border-radius: 6px;
}

/* ===== design-QA 2026-10-13 (mdix-laundry-korporat) ===== */

/* Services (beranda): the centre photo column must start below BOTH side columns.
   At 992-1199px the left column wraps taller, the photo column floated beside it and
   its absolute image covered "Setrika Saja / Express / Dry Cleaning". */
@media (min-width: 992px) {
  .services .services-item-image { clear: both; }
  .services .row > [class*="col-md-offset-4"]:last-child { clear: both; float: none; margin-left: auto; margin-right: auto; }
}

/* FAQ: the transparent cut-out was replaced by an opaque photo -> same arch crop as the homepage */
.faq-item-image img {
  width: 295px;
  max-width: 100%;
  height: 440px;
  object-fit: cover;
  margin: 0 auto 40px;
  border-radius: 150px 150px 12px 12px;
}
@media (max-width: 991px) {
  .faq-item-image img { height: 320px; }
}

/* Slider homepage (index2): white captions over bright laundromat photos need a tint */
.banner .carousel-inner > .item { position: relative; }
.banner .carousel-inner > .item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 72, 140, 0.8) 0%, rgba(0, 72, 140, 0.5) 55%, rgba(0, 72, 140, 0.2) 100%);
  pointer-events: none;
}
.banner .carousel-caption { z-index: 2; }
.banner .carousel-control { z-index: 3; }

/* ---- AA contrast (D-20): the light brand blue #29ABE2 is 2.6:1 with white.
   Keep it for icons/decoration, use the theme's dark blue #0071BC for text and text-bearing fills. */
a { color: #0071BC; }
.header-top { background-color: #0071BC; }
.top-sosmed span { color: #0071BC; }
.btn-default,
.shake .btn-default,
.panel-pricing .btn-primary { background-color: #0071BC; border-color: #0071BC; }
.btn-default:hover, .btn-default:focus,
.shake .btn-default:hover,
.panel-pricing .btn-primary:hover, .panel-pricing .btn-primary:focus { background-color: #005A96; border-color: #005A96; color: #fff; }
.banner .caption a.btn-default,
.wrap-caption a.btn-default { color: #0071BC; background-color: #fff; }
.banner .caption a.btn-default:hover,
.wrap-caption a.btn-default:hover { background-color: #FBA301; color: #1d1d1d; }
.work-info-item:nth-child(1) { background-color: #0877B0; }
.work-info-item:nth-child(2) { background-color: #0067A8; }
.work-info-item:nth-child(3) { background-color: #00508A; }
.work-info-lead a { color: #fff; text-decoration: underline; }
.panel-faq .panel-default > .panel-heading { background-color: #0071BC; }
.blog-item .item-body .lead,
.blog-item .item-body .lead a,
.blog-item .item-body > div { color: #0071BC; }
.pagination > .active > a, .pagination > .active > span,
.pagination > .active > a:hover, .pagination > .active > span:hover,
.pagination > .active > a:focus, .pagination > .active > span:focus { background-color: #0071BC; border-color: #0071BC; }
.author-box { background-color: #0071BC; }
.panel-pricing .price { background-color: #0071BC; }
@media (max-width: 768px) {
  .navbar-main .navbar-nav > li.active > a,
  .navbar-main .navbar-nav > li > a:hover { background-color: #0071BC; color: #fff; }
}

/* ---- touch targets (D-11) */
.navbar-toggle { min-width: 44px; min-height: 44px; }
.footer-sosmed a { display: inline-block; }
.footer-sosmed .item { width: 36px; height: 36px; padding-top: 9px; margin: 0 2px 6px 0; }
.footer-sosmed .item .fa { font-size: 17px; }
.footer-blog-lead a,
.footer-getintouch-item .desc-3 a,
.work-info-lead a { display: inline-block; min-height: 24px; padding: 2px 0; }

/* footer "Hubungi Kami": floated label/colon/value wrapped apart at 992-1199px -> fixed grid */
.footer-getintouch-item { display: flex; align-items: flex-start; gap: 10px; }
.footer-getintouch-item .icon { float: none; margin-right: 0; flex: 0 0 20px; }
.footer-getintouch-item .desc { float: none; flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: 62px 10px minmax(0, 1fr); }
.footer-getintouch-item .desc .desc-1,
.footer-getintouch-item .desc .desc-2,
.footer-getintouch-item .desc .desc-3 { float: none; width: auto; }
@media (min-width: 992px) and (max-width: 1199px) {
  .footer-sosmed .item { width: 32px; height: 32px; padding-top: 7px; margin-right: 1px; }
}
/* slider photos are 1400px wide: fill the viewport instead of leaving white strips at >1400px */
.banner .carousel-inner > .item > img { width: 100%; height: auto; }

/* round 2 */
.footer-getintouch-item .desc .desc-3 a { color: #5BC0EB; }
@media (min-width: 992px) and (max-width: 1199px) {
  .footer-getintouch-item .desc { grid-template-columns: minmax(0, 1fr); }
  .footer-getintouch-item .desc .desc-2 { display: none; }
}
@media (max-width: 479px) {
  .banner .caption a.btn-default, .wrap-caption a.btn-default { font-size: 13px; padding: 8px 14px; }
}
.blog-item .item-body .lead a { display: inline-block; padding: 2px 0; min-height: 24px; }
.top-sosmed a { display: inline-block; }
.header-top .info-item a { display: inline-block; padding: 4px 0; }
/* grey #999/#777 small text on white is under 4.5:1 */
.panel-pricing .table td,
.testimonials-item .people p,
.comments-box .date, small.date { color: #666; }
.author-box .media-heading { color: #fff; }
/* touch targets >= 24px (D-11) */
.breadcrumb > li > a,
.post-read-more,
.widget .media-body p a,
.widget.categories li a,
.contact-address-item a { display: inline-block; padding: 3px 0; min-height: 24px; }
.panel-faq .panel-title > a { display: block; padding: 3px 0; }
.carousel-control { min-width: 44px; }
.panel-pricing .table > tbody > tr > td { color: #666; font-size: 13px; }
/* index2 slider on phones: the 1400x463 photo shrank to ~130px and squeezed the caption */
@media (max-width: 767px) {
  .banner .carousel-inner > .item > img { height: 380px; object-fit: cover; }
  .banner .carousel-caption { bottom: 40px; top: auto; padding-bottom: 0; }
  .item .carousel-caption .caption-heading { font-size: 24px; line-height: 30px; margin-bottom: 8px; }
  .item .caption-desc { display: block; font-size: 14px; line-height: 20px; }
  .banner .carousel-control .fa { top: 90px; }
}
/* 769-991px: the 200x80 logo overflowed the 50px brand box and the right-floated menu covered "…porat" */
@media (min-width: 768px) and (max-width: 991px) {
  .navbar-main .navbar-brand > img { width: 130px; height: auto; }
}

/* Final re-verification 2026-10-13: the preloader showed the theme seller's blue "L" icon
   (images/apple-touch-icon.png) while the page loads → MDIX favicon instead */
.loader { background-image: url("mdix-favicon.png") !important; background-size: 52px 52px !important; }

/* Final re-verification 2026-10-13: theme sample partner logos ("AlienValley", "MOUNTAINBIKE",
   "EXPLORE — Made in America", "Since 2014") read as invented clients in English → hidden.
   The about page keeps its "Mitra usaha" heading and service sentence. */
.stat-client .row:has(.client-img) { display: none !important; }
.stat-client:not(:has(.page-title)) { display: none !important; }