/* MDIX Laundry Sentosa — audit fixes (2026-10-05) */

/* Decorative menu bar (::before, 11700px wide) made the page 11880px wide. */
.main-header,
.theme_menu,
.menu-area {
  overflow-x: clip;
}
.working-section {
  overflow-x: clip;
}

/* Theme colour switcher (gear button) is demo tooling. */
.switcher {
  display: none !important;
}

/* White titles on bright photos: darken the photo behind them. */
.choose-section,
.fact-counter {
  background-color: #1d2733 !important;
  background-blend-mode: multiply;
}


/* ===== design-qa 2026-10-13 ===== */

/* Brand blue #82a5fd fails AA on white (2.4:1). Same theme rules as css/custom/theme-2.css
   with a darker shade #3d64d8 (5.2:1 on white). The light shade stays on dark sections below. */
/* Filter the 'background' value classes*/

.switcher .switch_btn button,.main-header,.navigation > li > ul > li:hover,.search-box-area .form-group 
button,.btn-bg,.single-working-content:hover .icon,.single-working-content .count-text,.owl-theme 
.owl-dots .owl-dot span,.single-help-content.fourth-column .input-box button,.single-news-content .meta,
.team-section .owl-theme .owl-controls .owl-nav .owl-prev:hover, .team-section .owl-theme .owl-controls 
.owl-nav .owl-next:hover,.single-team-content .team-social li a,.our-history .owl-theme .owl-controls 
.owl-nav .owl-prev:hover, .our-history .owl-theme .owl-controls .owl-nav .owl-next:hover,.offer-content 
.offer-btn a,.accordion-box .accordion .acc-btn .title h3,.service-sidebar-content .categories-list li 
a.active, .service-sidebar-content .categories-list li a:hover,.service-sidebar-content .download a,
.service-sidebar-content .share li a,.sidbar-page-container .sidebar-search .input-box button,
.link-btn li a:hover, .link-btn li a.active,.blog-details-content .post-share-option .left-content 
.post-social li a:hover,.contact-section .contact-form-area,.single-pricing-content:hover .pricing-btn a

{
	background: #3d64d8;
}


/* background style two */

.single-item-hoverly .overlay,.video-gallery:hover .overlay-gallery

{
	background: rgba(61, 100, 216, 0.55);
}
.single-counter-content

{
	background: rgba(108, 150, 255, 0.20);
}



/* Filter the 'color' value classes*/

.header-top .header-info .top-btn a,.navigation > li > a,.navigation > li > ul > li > a,.search-box-area 
.search-toggle i:before,.btn-one:hover,.main-slider .title span,.sec-title span,.single-choose-content h3,
.single-counter-content .text h4,h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover,.single-help-content 
.top-content i:before,.single-help-content .call,.single-help-content .button a,.owl-theme .owl-controls 
.owl-nav [class*="owl-"] span,.single-testimonial-content .title,.single-pricing-content .icon-box i:before,
.single-pricing-content .list li:before,.apps-content .top-text,.apps-content h2 span,.logo-widget 
.location-box .icon-box i:before,.logo-widget .footer-social li a:hover,.footer-title h4,.service-widget 
.list li a:hover,.blog-widget .text a:hover,.instagram-widget .subscribe-widget .input-box button,
.footer-bottom .copyright, .footer-bottom .copyright a,.about-content .top-text,.single-team-content 
.lower-content .text,.history-content .slider-content h4,.error-section .title,.service-details-content 
.title h3,.price-list-section .price-btn a,.self-service h3,a:hover,.blog-details-content .post-share-option 
.right-content a,.contact-section .contact-info h3,.contact-section .contact-info .icon-box i:before,
.contact-section .social-info h4,.contact-section .social-info li a:hover,.contact-section 
.contact-form-area button

 {
	color:#3d64d8;
}

/* Filter the 'border color' value classes*/

.search-box-area input,.btn-bg,.single-help-content,.single-help-content .button a,.single-help-content 
.skype a,.single-help-content.fourth-column .input-box input,.apps-content .apps-box .single-apps-box,
.logo-widget .footer-social li a:hover,.service-sidebar-content .categories-list li a.active, 
.service-sidebar-content .categories-list li a:hover,.sidbar-page-container .sidebar-search input,
.blog-details-content .comment-form input:focus, .blog-details-content .comment-form textarea:focus,
.contact-section .contact-info .icon-box,.contact-section .social-info li a,.single-pricing-content:hover 
.pricing-btn a

{
  border-color:#3d64d8;
}




.single-counter-content { background: rgba(108, 150, 255, 0.20); }
.link-btn li a.active, .offer-content .offer-btn a,
.sidbar-page-container .sidebar-search .input-box button { background: #3d64d8; }

/* Dark sections: keep the light brand blue (6.3:1 on the dark photo overlays). */
.choose-section .sec-title span, .fact-counter .sec-title span, .single-counter-content .text h4,
.testimonial-section .sec-title span, .apps-content .top-text, .apps-content h2 span,
.main-slider .title span, .footer-title h4, .footer-bottom .copyright, .footer-bottom .copyright a,
.logo-widget .location-box .icon-box i:before, .self-service h3,
.instagram-widget .subscribe-widget .input-box button { color: #9db8ff; }

/* Body copy #888 is 3.5:1 on white; #666 is 5.7:1. */
body, p, .help-section .title-text, .offer-content .text,
.price-list .single-price .view-content h4 { color: #666666; }
.white, .white p, p.white, .title-text.white, .loundry-apps p, .loundry-apps .text,
.main-footer .text, .main-footer p, .main-slider .text { color: #ffffff; }
.contact-section .contact-form-area .text { color: #ffffff; }

/* Inner-page title band: white title on a light laundromat photo -> dark overlay. */
.page-title::before { content: ""; position: absolute; inset: 0; background: rgba(17, 24, 39, 0.5); }
.page-title .container { position: relative; z-index: 1; }

/* Testimonial and app sections: overlay is already dark; make sure text sits above it. */

/* Footer soap bubbles drifted over the link text: keep them behind the content. */
.main-footer .bubbleContainer { z-index: 0; }
.main-footer .footer-top, .main-footer .footer-bottom { position: relative; z-index: 2; }

/* Footer social icons 25px -> 44px touch targets. */
.logo-widget .footer-social li a { width: 44px; height: 44px; line-height: 42px; font-size: 15px; }
.logo-widget .footer-social li { margin-right: 6px; }

/* Price list (price.html): prices were only visible on hover; now always shown. */
.price-list .single-price .view-content { padding: 40px 6px 32px; }
.price-list .single-price .view-content .icon-box { margin-bottom: 14px; }
.price-list .single-price .view-content .price { margin-top: 6px; font-size: 14px; line-height: 22px; color: #444; }
.price-list .single-price .view-content h4 { color: #333; }

/* Phone menu button: 52x40 -> 44px tall. */
@media (max-width: 991px) {
  .main-menu .navbar-toggle { min-height: 44px; min-width: 48px; padding: 10px 9px; }
}

/* images/home/shap.png is not in the theme package (404); the shape is decorative. */
.working-section:before { background-image: none; }
.logo-widget .footer-social li a { margin-right: 10px; color: #bbbbbb; border-color: #9a9a9a; }

/* about.html: the empty partner strip (grey 180x100 placeholders) was removed;
   give the history block room above the footer. */
.our-history { padding-bottom: 90px; }

/* price.html "Layanan di Outlet": white text on a light denim photo -> dark overlay. */
.self-service::before { content: ""; position: absolute; inset: 0; background: rgba(15, 23, 42, 0.68); opacity: 1; z-index: 0; }
.self-service .container { position: relative; z-index: 1; }

/* blog-grid.html: cards of unequal height broke the float grid (holes). */
@media (min-width: 992px) { .blog-grid .news-column:nth-child(3n+1) { clear: left; } }
@media (min-width: 768px) and (max-width: 991px) { .blog-grid .news-column:nth-child(2n+1) { clear: left; } }

/* Phones: the blue top bar was 280px tall (logo, e-mail, phone, button stacked), pushing the
   menu button below the first screen. E-mail and phone stay in the footer/contact page. */
@media (max-width: 767px) {
  .header-top { padding: 10px 0 14px; }
  .header-top .logo-box { margin: 6px auto 4px; }
  .header-top .header-info .single-info { display: none; }
  .header-top .header-info .top-btn { margin: 8px 0 0; }
}

/* Small text links (footer blog list, copyright, "Lihat Semua Layanan") -> 24px+ targets. */
.blog-widget .text a, .footer-bottom .copyright a, .service-section .service-btn a,
.instagram-widget .list li a { display: inline-block; min-height: 24px; padding: 2px 0; }
.instagram-widget .list li a { display: block; }

/* Hero (Revolution Slider) is display:none until its script runs, so the whole page jumped
   ~700px down after load (CLS 0.40). Reserve the slider's final size per breakpoint
   (gridheight 704/700 scaled by gridwidth 1240/1024/778/480 in js/slider-active.js). */
#rev_slider_486_1_wrapper { min-height: 704px; }
@media (max-width: 1239px) { #rev_slider_486_1_wrapper { min-height: 0; aspect-ratio: 1240 / 704; } }
@media (max-width: 1023px) { #rev_slider_486_1_wrapper { aspect-ratio: 1024 / 700; } }
@media (max-width: 777px)  { #rev_slider_486_1_wrapper { aspect-ratio: 778 / 700; } }
@media (max-width: 479px)  { #rev_slider_486_1_wrapper { aspect-ratio: 480 / 700; } }
.footer-logo a, .contact-section .contact-info .text a,
.blog-details-content .post-share-option .right-content a,
.single-news-content .lower-content h4 a { display: inline-block; min-height: 24px; }
.blog-details-content .replay-btn a { display: inline-block; min-width: 32px; min-height: 32px; text-align: center; line-height: 32px; }
/* "Berlangganan" broke mid-word in the narrow help card at 992-1199px. */
@media (min-width: 992px) and (max-width: 1199px) { .single-help-content h3 { font-size: 20px; } }

/* price.html on phones: one narrow 55% cell per row left large gaps; use a 2-column grid. */
@media (max-width: 767px) {
  .price-list { display: flex; flex-wrap: wrap; justify-content: space-between; }
  .price-list .single-price { width: calc(50% - 5px); max-width: none; margin: 5px 0; }
  .price-list .single-price .view-content .price { font-size: 13px; }
}

/* 992-1199px: menu + search did not fit on one line; the search button dropped onto the hero. */
@media (min-width: 992px) and (max-width: 1199px) {
  .navigation > li { margin: 0 16px; }
  .navigation > li > a { font-size: 16px; }
}
/* Hero arrows (white boxes at the screen edge) covered the first letters of the hero
   title below 1300px; slides still change by autoplay, swipe and bullets. */
@media (max-width: 1299px) { .main-slider .tparrows { display: none !important; } }

/* Hero text sits on a photo (35% dark layer); a soft shadow keeps it legible on light areas. */
.main-slider .title h1, .main-slider .text { text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); }