/* MDIX Industri Utama — per-template fixes */

/* Brand carousel showed the theme seller's logos (Envato, ThemeForest, CodeCanyon…). */
.brand-carousel-area { display: none; }

/* The "reveal" footer sat fixed behind the page and showed as a blank band in
   full-page captures; render it in the normal flow instead. */
footer.site-footer.fixed-footer { position: relative; }
.page-wrapper { margin-bottom: 0 !important; }

/* Keep the phone number on one line in the mobile top bar. */
.single-header-right-info .text-box h3 { white-space: nowrap; }

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

/* AA contrast (D-20): theme orange #fe5a0e behind white text is 3.14:1.
   Backgrounds and orange text on light surfaces use #c2410c (5.2:1);
   orange on dark surfaces keeps the original shade. */
.scroll-to-top:hover,
.header-navigation .container .right-side-box a.rqa-btn,
.header-navigation .container .right-side-box a.rqa-btn:after,
.header-navigation ul.navigation-box > li:before,
.header-navigation ul.navigation-box > li > .sub-menu li:hover > a,
.header.header-home-two .header-navigation .container .right-side-box a.rqa-btn:hover,
#minimal-bootstrap-carousel .carousel-control:hover,
.slider-home-one .content a.banner-btn,
.main-slider .theme-btn,
footer.site-footer .footer-widget.subscribe-widget form.subscribe-form button,
.single-blog-style-two .text-box a.more,
.blog-details-page .comment-box-wrapper .single-comment-box .text-box a.reply,
.blog-details-page .comment-form button.thm-btn,
.testimonials-style-one-carousel .owl-nav [class*=owl-]:hover,
.testimonials-style-three-carousel .owl-nav [class*=owl-]:hover,
.rqa-box form.rqa-form button,
.single-team-style-one .img-box .name-box .inner,
.team-style-two-carousel .owl-nav [class*=owl-]:hover,
.feature-style-one [class*=col-md]:nth-child(2),
.single-features-style-two:before,
.contact-page form.contact-form button,
.contact-info-style-two .left-content:after,
.error-404 .copy-text:after,
.coming-soon-block .box .content .btn-box a,
.coming-soon-block .copy-text:after,
.portfolio-style-two .gallery-filter ul li span:after,
.service-carousel-one .owl-nav [class*=owl-]:hover,
.service-carousel-style-two .owl-dots .owl-dot.active span,
.single-service-style-three .text-box .inner,
.single-service-style-three .text-box:hover .inner .icon-box,
.single-service-style-four .img-box .box .content a.more,
.service-style-four-carousel.owl-theme .owl-dots .owl-dot span:before,
.service-style-four-carousel .owl-nav [class*=owl-]:hover,
.about-style-one .about-content a.about-btn,
.about-style-two .about-content a.view-more,
.about-style-three .about-img-box .content,
.about-style-three .about-content a.about-btn,
.fact-counter-section .single-progress-bar .progress-scale .inner,
.time-line .timeline-tab-select-form .bootstrap-select > .dropdown-toggle,
.time-line .timeline-tab-select-form .dropdown-menu > li.selected > a,
.time-line .timeline-tab-select-form .dropdown-menu > li > a:hover,
.strategy-wrapper .container-fluid [class*='col-']:nth-child(3) .text-box,
.sidebar .single-sidebar.tags-widget ul.tags-list li a:hover,
.sidebar .single-sidebar.service-sidebar ul.service-list li a:before { background-color: #c2410c; }
.sec-title span,
.header-top.home-three .single-header-right-info .text-box p,
footer.site-footer .footer-widget.subscribe-widget h3,
.blog-style-one .single-blog-style-one .meta-info a:hover,
.blog-style-one .single-blog-style-one h3:hover,
.blog-style-one .single-blog-style-one a.read-more,
.blog-style-one .blog-list-sidebar .single-blog-list:hover h3,
.blog-style-one .blog-list-sidebar .btn-box a,
.single-blog-style-two .text-box h3:hover,
.single-blog-style-two .text-box .meta-info a:hover,
.single-blog-style-two .text-box .meta-info a i,
.faq-style-one .accrodion-grp .accrodion.active .accrodion-title h4,
.faq-style-one a.more-info,
.single-team-style-one .text-box .social a:hover,
.portfolio-style-two .gallery-filter ul li.active span,
.project-details .project-details-content ul.meta-info li i,
.about-style-one .about-content h3 span,
.about-style-one .about-content ul li i,
.about-style-two .about-content h3 span,
.time-line ul.tab-title li a:hover,
.time-line ul.tab-title li.active a,
.sidebar .single-sidebar.category-widget ul.category-list li a:hover,
.sidebar .single-sidebar.recent-post-widget .recent-post-list .single-recent-post h3:hover,
.error-404 .box .content h3,
.coming-soon-block .box .content ul.countdown-box li .box h4,
.testimonials-style-one .single-testimonials-style-one .name-box .text-box span { color: #c2410c; }
.sec-title.light span, .dark-bg .sec-title span { color: #fe5a0e; }
.single-team-style-one .text-box p { color: #5f5f5f; }

/* Service cards (home): the hover layer was only transparent, so its text stayed
   "visible" to assistive tech and contrast checks; show it on hover/focus only. */
.single-service-style-two .hover { visibility: hidden; }
.single-service-style-two:hover .hover,
.single-service-style-two:focus-within .hover { visibility: visible; opacity: 1; transform: translateY(0%); }
.single-service-style-two:focus-within .overlay { opacity: 0; }

/* Hero: darker scrim so the white/orange headline reads on light photos. */
#rev_slider_one .slotholder::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .42); z-index: 1; pointer-events: none; }

/* Request-a-quote button: text and arrow on one line. */
.rqa-box form.rqa-form button { width: auto; padding: 0 26px; white-space: nowrap; }

/* Project page CTA (was a third-party "Play Video" link) shown as a button. */
.contact-info-style-two .right-video-box a.video-popup-cta { background: #c2410c; padding: 16px 30px; display: inline-block; white-space: nowrap; }
.contact-info-style-two .right-video-box a.video-popup-cta:hover { background: #1f1f1f; }

/* Contact map: keyless embed fills the theme's map box. */
#contact-page-google-map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* 404 page: way back home. */
.mdix-404-link a { color: #fff; text-decoration: underline; display: inline-block; padding: 10px 0; }

/* Touch targets ≥ 24px (D-11) */
footer.site-footer .footer-widget .links-list li a { display: inline-block; padding: 3px 0; min-height: 24px; }
.single-team-style-one .text-box .social a { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; min-height: 28px; }
.header-top.home-three .top-info .social a { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 32px; }
.portfolio-style-two .single-portfolio-style-two .img-box .overlay .box .content a { display: inline-block; min-height: 24px; }
.portfolio-style-two .single-portfolio-style-two .img-box .overlay .box .content a.img-popup { min-width: 32px; min-height: 32px; line-height: 32px; text-align: center; }
.inner-banner ul.breadcumb li a { display: inline-block; min-height: 24px; }
.single-blog-style-two .text-box .meta-info a,
.blog-style-one .single-blog-style-one .meta-info a { display: inline-block; min-height: 24px; line-height: 24px; }
.single-service-style-two .hover .text-box a.more { display: inline-block; padding: 4px 0; }
.sidebar .single-sidebar.category-widget ul.category-list li a,
.sidebar .single-sidebar.recent-post-widget .recent-post-list .single-recent-post a { display: block; min-height: 24px; }
.hidden-sidebar .sidebar-content .social a { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 32px; }
.side-navigation-close-btn { min-width: 44px; min-height: 44px; display: inline-flex !important; align-items: center; justify-content: center; }

/* Phones */
@media (max-width: 767px) {
    /* Compact top header: logo + phone only, so the menu bar starts near the top. */
    .header-top .single-header-right-info + .single-header-right-info { display: none; }
    .header-top .logo { padding: 18px 0 12px; }
    .header-top.home-three .top-info { display: none; }
    .header-navigation .container .navbar-header button.side-nav-toggler { min-width: 44px; min-height: 44px; }
    /* Service cards no longer float 125px below the hero. */
    .service-carousel-style-two { margin-top: 30px; }
    /* Feature carousel arrows stayed half outside the 16px gutter. */
    .service-carousel-one .owl-nav .owl-prev { left: 4px; }
    .service-carousel-one .owl-nav .owl-next { right: 4px; }
    .service-carousel-one .owl-nav [class*=owl-] { width: 32px; height: 32px; }
    /* FAQ: the arrow icon sat 40px outside the question box. */
    .faq-style-one .accrodion-grp .accrodion .accrodion-title { padding-right: 20px; }
    .faq-style-one .accrodion-grp .accrodion .accrodion-title h4 { padding-right: 30px; }
    .faq-style-one .accrodion-grp .accrodion .accrodion-title h4:before { right: 0; }
}

/* Contact strip: phone/email links were browser-blue on the dark band. */
.contact-info-style-one .contact-infos .single-contact-infos .text-box p a { color: #fff; }
.contact-info-style-one .contact-infos .single-contact-infos .text-box p a:hover { color: #fe5a0e; }

/* Service photo cards: one readable accent on a dark scrim instead of
   cyan/lime/yellow words on bright photos (solar field, sky). */
.single-service-style-four .img-box .box { background: linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.45) 60%, rgba(0,0,0,.2) 100%); }
.single-service-style-four .img-box .box .content h3,
.single-service-style-four .img-box .box .content h3 span,
.gas.single-service-style-four .img-box .box .content h3 span,
.chemical.single-service-style-four .img-box .box .content h3 span,
.eco.single-service-style-four .img-box .box .content h3 span,
.mechanical.single-service-style-four .img-box .box .content h3 span,
.petrol.single-service-style-four .img-box .box .content h3 span,
.power.single-service-style-four .img-box .box .content h3 span,
.service-style-four .row [class*=col-] .single-service-style-four .img-box .box .content h3 span { color: #fff; }
.single-service-style-four .img-box .box .content h3 span { color: #ff8a4c !important; }

/* Project detail "Tantangan / Kajian / Solusi": photo + text side by side only fit
   from 1600px; below that the text was squeezed into a ~160px column. */
@media (max-width: 1599px) {
    .strategy-wrapper .single-strategy .img-box,
    .strategy-wrapper .single-strategy .text-box { display: block; width: 100%; }
    .strategy-wrapper .single-strategy .img-box > img { height: 280px; object-fit: cover; }
    .strategy-wrapper .single-strategy .text-box { padding: 40px; }
}

/* 404 / coming-soon sit on a dark photo: keep the bright theme orange there. */
.error-404 .box .content h3,
.coming-soon-block .box .content ul.countdown-box li .box h4 { color: #fe5a0e; }

/* CLS: the Revolution hero had no height until its script ran, so every section
   below jumped ~650px. Reserve the height the slider settles on (same grid
   as js/main-slider-script.js: 650/750/700/500 at levels 1200/1040/778/481). */
#rev_slider_one_wrapper { height: 650px; }
@media (max-width: 1200px) { #rev_slider_one_wrapper { height: 54.167vw; } }
@media (max-width: 1040px) { #rev_slider_one_wrapper { height: min(750px, 76.53vw); } }
@media (max-width: 778px)  { #rev_slider_one_wrapper { height: min(700px, 93.33vw); } }
@media (max-width: 481px)  { #rev_slider_one_wrapper { height: min(500px, 116.28vw); } }

/* Contrast: grey meta/excerpt text in the home blog block (3.54:1). */
.blog-style-one .single-blog-style-one .meta-info a,
.blog-style-one .single-blog-style-one p,
.blog-style-one .blog-list-sidebar .single-blog-list p,
.blog-style-one .blog-list-sidebar .single-blog-list a { color: #5f5f5f; }
/* Home service cards: solid dark label strip (was 80% black over the photo). */
.single-service-style-two .overlay, .single-service-style-two .hover { background: rgba(20, 20, 20, .92); }
/* Home blog block touch targets. */
.blog-style-one .single-blog-style-one .meta-info a,
.blog-style-one .blog-list-sidebar .single-blog-list a,
.blog-style-one .single-blog-style-one a.read-more,
.blog-style-one .blog-list-sidebar .btn-box a { display: inline-block; min-height: 24px; line-height: 24px; }

/* Contrast: light grey body text (#888–#999, 3.3–3.6:1) on white/grey surfaces. */
.blog-style-one .blog-list-sidebar .single-blog-list .cat-list a,
.service-details-content .feature-list-box .list-items li,
.service-item-box .list-items li,
.project-details .project-details-content p,
.project-details .project-details-content ul.meta-info li,
.testimonials-style-four .single-testimonial-style-four .top-box .text-box h4,
footer.site-footer .footer-widget.subscribe-widget p { color: #5f5f5f; }

/* Touch targets: logo links and linked blog images/titles were 19px inline boxes. */
.header-top .logo a, footer.site-footer .footer-widget.about-widget > a,
.hidden-sidebar .sidebar-content .top-content a { display: inline-block; }
.single-blog-style-two .img-box > a, .single-blog-style-two .text-box > a:first-child { display: block; }

.service-details-page .service-details-content ul.list-items li { color: #5f5f5f; }

/* CLS: owl hides the home service carousel (display:none) until it starts, so the
   welcome section jumped down once it appeared. Lay the cards out the same way
   before init (owl: 1 / 2 from 600px / 3 from 1200px, 30px gap; nav below on
   phones/tablets, dots on desktop). */
.service-carousel-style-two.owl-carousel:not(.owl-loaded) { display: flex; overflow: hidden; padding-bottom: 80px; }
.service-carousel-style-two.owl-carousel:not(.owl-loaded) > .item { flex: 0 0 100%; margin-right: 30px; }
@media (min-width: 600px) { .service-carousel-style-two.owl-carousel:not(.owl-loaded) > .item { flex-basis: calc((100% - 30px) / 2); } }
@media (min-width: 1024px) { .service-carousel-style-two.owl-carousel:not(.owl-loaded) { padding-bottom: var(--mdix-svc-dots, 0px); } }
@media (min-width: 1200px) { .service-carousel-style-two.owl-carousel:not(.owl-loaded) > .item { flex-basis: calc((100% - 60px) / 3); } }

/* Dark fallback behind the hero photos (shows while images load; text stays readable). */
#rev_slider_one_wrapper, #rev_slider_one { background-color: #1f1f1f; }

/* Phones: back-to-top button covered the copyright line. */
@media (max-width: 991px) { .bottom-footer { padding-bottom: 72px; } }