/* ================================================================

   Mitra Proteksindo — Custom CSS v3.3

   ================================================================ */



:root {

	--navy:       #000d22;

	--blue:       #1a3a6e;

	--gold:       #515f74;

	--gold-light: #0a2342;

	--bg:         #f7f9fb;

	--text:       #191c1e;

	--white:      #ffffff;

	--gray:       #74777e;

	--dark:       #000831;

	--mp-blue:    #0d4a8a;

}



*, *::before, *::after { box-sizing: border-box; }

body { font-family: 'Inter', sans-serif; color: var(--text); background: var(--white); scroll-behavior: smooth; }

a { text-decoration: none; color: inherit; }

img { max-width: 100%; display: block; }





/* Force submenu to open RIGHT (not left) */

.wp-block-navigation .has-child .wp-block-navigation__submenu-container {

  left: 0 !important;

  right: auto !important;

}

.wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {

  left: 100% !important;

  right: auto !important;

  top: -1px !important;

}



/* ── NAVBAR — sticky ─────────────────────────────────────────────*/

.mp-navbar-wrap {

	position: sticky !important;

	top: 0 !important;

	left: 0;

	right: 0;

	z-index: 999;

	background: var(--navy) !important;

	box-shadow: 0 2px 16px rgba(0,0,0,.25);

}

.mp-navbar-inner { height: 70px; padding: 0 5%; max-width: 1400px; margin: 0 auto; }

.mp-nav-brand .wp-block-site-logo img { height: 40px; width: auto; }

.mp-nav-brand .wp-block-site-title,

.mp-nav-brand .wp-block-site-title a { color: #ffffff !important; font-weight: 700 !important; font-size: .95rem !important; line-height: 1.2; }



/* Nuclear nav link white override */

.mp-navbar-wrap a,

.mp-navbar-wrap a:visited,

.mp-navbar-wrap .wp-block-navigation a,

.mp-navbar-wrap .wp-block-navigation-item a,

.mp-navbar-wrap .wp-block-navigation-item__content,

.mp-navbar-wrap .wp-block-navigation__responsive-container a,

.mp-navbar-wrap :where(a),

.mp-navbar-wrap :where(.wp-block-navigation-item a),

.mp-navbar-wrap li a { color: rgba(255,255,255,.9) !important; text-decoration: none !important; }

.mp-navbar-wrap a:hover,

.mp-navbar-wrap .wp-block-navigation-item a:hover { color: #8fa0b4 !important; }

.mp-navbar-wrap .nav-cta a,

.mp-navbar-wrap .nav-cta a:hover { color: #ffffff !important; }

.mp-navbar-wrap .nav-cta a {

	background: linear-gradient(135deg, var(--navy), var(--gold-light)) !important;

	padding: 10px 22px !important; border-radius: 6px !important; font-weight: 600 !important;

}

.mp-navbar-wrap .nav-cta a:hover { background: var(--gold-light) !important; }

.wp-block-navigation__responsive-container-open,

.wp-block-navigation__responsive-container-close { color: #ffffff !important; }

.wp-block-navigation__responsive-container-open svg,

.wp-block-navigation__responsive-container-close svg { color: #ffffff !important; fill: #ffffff !important; }

.wp-block-navigation__responsive-container.is-menu-open { background: var(--navy) !important; }

.wp-block-navigation__responsive-container.is-menu-open a,

.wp-block-navigation__responsive-container.is-menu-open :where(a) { color: rgba(255,255,255,.9) !important; }



/* ── SECTION COMMON ──────────────────────────────────────────────*/

.mp-section-label {

	display: block !important; color: var(--gold) !important;

	font-size: .78rem !important; font-weight: 700 !important;

	letter-spacing: 3px !important; text-transform: uppercase !important;

	margin-bottom: 14px !important; margin-top: 0 !important;

}

.mp-section-title {

	font-size: clamp(1.7rem, 3.5vw, 2.5rem) !important; font-weight: 800 !important;

	color: var(--navy) !important; line-height: 1.25 !important;

	margin-bottom: 20px !important; margin-top: 0 !important;

}

.mp-section-sub { color: var(--gray) !important; font-size: 1rem !important; line-height: 1.8 !important; max-width: 680px; margin: 0 auto 0 !important; }

.mp-text-center { text-align: center !important; }

.mp-white { color: #ffffff !important; }

.mp-section-divider { margin: 60px 0 !important; border-color: #e5e7eb !important; }



/* ── HERO ────────────────────────────────────────────────────────*/

.mp-hero-section.wp-block-cover { min-height: 100vh !important; justify-content: flex-start !important; }

.mp-hero-section.mp-hero-group,
.mp-hero-section.wp-block-group { min-height: 100vh !important; background: linear-gradient(135deg,rgba(0,13,34,0.88) 0%,rgba(10,35,66,0.75) 100%) !important; }

.mp-hero-section .wp-block-cover__inner-container { margin-left: 0 !important; margin-right: auto !important; max-width: 700px; width: 100%; }

.mp-hero-badge { display: inline-block !important; background: rgba(81,95,116,.15) !important; border: 1px solid var(--gold) !important; color: var(--gold) !important; font-size: .78rem !important; font-weight: 600 !important; letter-spacing: 2px !important; text-transform: uppercase !important; padding: 6px 16px !important; border-radius: 30px !important; margin-bottom: 24px !important; }

.mp-hero-title { font-size: clamp(2.2rem, 5vw, 3.8rem) !important; font-weight: 800 !important; color: #ffffff !important; line-height: 1.15 !important; margin-bottom: 20px !important; }

.mp-hero-title .hero-accent { color: var(--gold); font-weight: 400; }

.mp-hero-desc { font-size: 1.1rem !important; color: rgba(255,255,255,.8) !important; line-height: 1.8 !important; margin-bottom: 36px !important; }

.mp-hero-btns { gap: 16px !important; }

.mp-btn-primary .wp-block-button__link { background: linear-gradient(135deg, var(--navy), var(--gold-light)) !important; color: #ffffff !important; border: 2px solid var(--navy) !important; padding: 14px 32px !important; border-radius: 8px !important; font-weight: 700 !important; font-size: .95rem !important; }

.mp-btn-primary .wp-block-button__link:hover { background: var(--gold-light) !important; transform: translateY(-2px); }

.mp-btn-outline .wp-block-button__link { background: transparent !important; color: #ffffff !important; border: 2px solid rgba(255,255,255,.5) !important; padding: 14px 32px !important; border-radius: 8px !important; font-weight: 600 !important; font-size: .95rem !important; }

.mp-btn-outline .wp-block-button__link:hover { border-color: #ffffff !important; background: rgba(255,255,255,.08) !important; }

@media (max-width: 480px) {

	.mp-hero-btns .wp-block-button { width: 100%; }

	.mp-hero-btns .wp-block-button__link { display: block !important; text-align: center !important; }

}



/* ── ABOUT ───────────────────────────────────────────────────────*/

.mp-about-section { background: #ffffff; }

/* Semua teks di kolom "Tentang Kami" rata kiri-kanan (justify) */
.mp-about-text-col p,
.mp-about-text-col .wp-block-paragraph,
.mp-about-text-col .mp-usp-desc { text-align: justify !important; }



/* ── PRODUCT PAGE HERO ───────────────────────────────────────────*/

.mp-product-hero-section { text-align: center; }

.mp-product-title { font-size: clamp(1.8rem, 4vw, 2.8rem) !important; font-weight: 800 !important; color: #ffffff !important; line-height: 1.2 !important; margin-bottom: 16px !important; }

.mp-product-tagline { font-size: 1.1rem !important; color: rgba(255,255,255,0.75) !important; line-height: 1.6 !important; max-width: 600px; margin: 0 auto !important; }

.mp-product-cta-section h2 { color: #ffffff !important; margin-bottom: 16px !important; }



/* ── SECTION ANIMATION OVERRIDE ──────────────────────────────────*/

/* Ensure sections that are already in viewport on load become visible */

.mp-scroll-fade.is-visible { opacity: 1 !important; transform: translateY(0) !important; }

/* Foto About: 80% dari rasio asli, dibuat portrait agar tidak terlalu mendominasi.
   Border ::after di-offset 20px, jadi figure diberi max-width 465px
   (425px foto + 40px ruang aksen) agar garis tidak melebar/gap tak terlihat. */
.mp-about-img-col { max-width: 465px; margin-left: 0 !important; }
.mp-about-img-col .wp-block-image { position: relative; margin: 0; max-width: 465px; }

/* Foto About: 80% dari rasio asli, dibuat portrait agar tidak terlalu mendominasi */
.mp-about-img-col .wp-block-image img {
	width: 100%;
	max-width: 425px;
	height: auto;
	aspect-ratio: 1080 / 1571;
	object-fit: cover;
	object-position: center;
	display: block;
	margin-left: 0;
	margin-right: auto;
}

/* Aksen garis emas di belakang foto — dekorasi offset, tidak menutup gambar */
.mp-about-img-col .wp-block-image::after {
	content: '';
	position: absolute;
	top: 20px;
	left: 20px;
	right: -20px;
	bottom: -20px;
	border: 3px solid var(--gold);
	border-radius: 16px;
	z-index: -1;
}

.mp-about-grid { padding-right: 24px; }

.mp-about-text-col > .wp-block-paragraph { color: var(--gray); line-height: 1.85; margin-bottom: 16px; font-size: .97rem; text-align: justify; }

.mp-usp-list { gap: 16px !important; margin-top: 28px !important; }

.mp-usp-item { padding: 16px !important; background: var(--bg) !important; border-radius: 10px !important; border-left: 3px solid var(--gold) !important; gap: 14px !important; align-items: flex-start !important; }

.mp-usp-icon { font-size: 1.4rem !important; flex-shrink: 0 !important; margin: 0 !important; line-height: 1.4 !important; }

.mp-usp-text { flex: 1 !important; min-width: 0 !important; }

.mp-usp-title { font-size: .92rem !important; font-weight: 700 !important; color: var(--navy) !important; margin-bottom: 4px !important; margin-top: 0 !important; }

.mp-usp-desc { font-size: .85rem !important; color: var(--gray) !important; line-height: 1.6 !important; margin: 0 !important; }



/* ── VISION / MISSION ────────────────────────────────────────────*/

.mp-vision-section { background: var(--navy) !important; }

.mp-vision-section .mp-section-title { color: #ffffff !important; }

.mp-vision-section .mp-section-label { text-align: center !important; }

.mp-vm-grid { display: flex !important; flex-wrap: nowrap !important; gap: 32px !important; margin-top: 48px !important; align-items: stretch !important; }

.mp-vm-grid > .wp-block-column { margin: 0 !important; }



/* Vision/Misi cards — dark glass (back to original style) */

.mp-vm-white-card,

.mp-vm-dark-card {

	background: rgba(255,255,255,.06) !important;

	border: 1px solid rgba(255,255,255,.12) !important;

	border-radius: 16px !important;

	padding: 36px !important;

	height: 100% !important;

	box-shadow: none !important;

}

.mp-vm-eyebrow { font-size: .8rem !important; font-weight: 700 !important; letter-spacing: 2px !important; text-transform: uppercase !important; color: var(--gold) !important; margin-bottom: 20px !important; margin-top: 0 !important; }

.mp-visi-quote { font-size: clamp(1rem, 1.8vw, 1.25rem) !important; font-weight: 400 !important; color: rgba(255,255,255,.9) !important; line-height: 1.85 !important; padding-left: 20px !important; border-left: 3px solid var(--gold) !important; margin-top: 0 !important; font-style: italic; }

.mp-misi-steps { gap: 20px !important; }

.mp-misi-step { gap: 16px !important; align-items: flex-start !important; }

.mp-misi-num { font-size: 1.6rem !important; font-weight: 800 !important; color: #8fa0b4 !important; line-height: 1 !important; flex-shrink: 0 !important; min-width: 40px !important; margin: 0 !important; opacity: 1 !important; }

.mp-misi-text { color: rgba(255,255,255,.75) !important; font-size: .92rem !important; line-height: 1.75 !important; padding-top: 2px !important; margin: 0 !important; text-align: justify !important; }

.mp-vm-divider { border: none !important; border-top: 1px solid rgba(255,255,255,.15) !important; margin: 56px 0 !important; background: transparent !important; height: 1px !important; }



/* Value cards — WHITE boxes on navy bg */

.mp-values-grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 20px !important; }

.mp-value-card {

	background: #ffffff !important;

	border: none !important;

	border-left: 4px solid var(--mp-blue) !important;

	border-radius: 12px !important;

	padding: 28px 20px !important;

	text-align: center !important;

	transition: box-shadow .25s, transform .25s;

	box-shadow: 0 2px 16px rgba(0,0,0,.1) !important;

}

.mp-value-card:hover { box-shadow: 0 8px 28px rgba(0,0,0,.16) !important; transform: translateY(-4px); }

.mp-value-card .mp-value-icon.wp-block-paragraph { font-size: 1.8rem !important; margin-bottom: 10px !important; margin-top: 0 !important; }

.mp-value-title { color: var(--navy) !important; font-weight: 700 !important; font-size: .9rem !important; margin-bottom: 8px !important; margin-top: 0 !important; }

.mp-value-card .wp-block-paragraph { color: var(--gray) !important; font-size: .82rem !important; line-height: 1.65 !important; margin: 0 !important; }

@media (max-width: 768px) {

	.mp-vm-grid { flex-wrap: wrap !important; }

	.mp-visi-col, .mp-misi-col { flex-basis: 100% !important; }

	.mp-values-grid { grid-template-columns: 1fr 1fr !important; }

}



/* ── SERVICES ────────────────────────────────────────────────────*/

.mp-services-section { background: var(--bg); }

.mp-services-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 28px !important; margin-top: 48px !important; }

.mp-service-card { background: #ffffff !important; border-radius: 14px !important; padding: 32px 28px !important; border: 1px solid #E5E7EB !important; transition: box-shadow .3s, transform .3s; position: relative; overflow: hidden; text-align: left !important; }

.mp-service-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--gold); transform: scaleX(0); transition: transform .3s; }

.mp-service-card:hover { box-shadow: 0 12px 40px rgba(13,33,55,.1); transform: translateY(-4px); }

.mp-service-card:hover::before { transform: scaleX(1); }

.mp-service-card .mp-service-icon.wp-block-paragraph { font-size: 2.2rem !important; margin-bottom: 18px !important; margin-top: 0 !important; }

.mp-service-card .wp-block-heading { font-size: 1rem !important; font-weight: 700 !important; color: var(--navy) !important; margin-bottom: 12px !important; margin-top: 0 !important; }

.mp-service-card .wp-block-paragraph { font-size: .88rem !important; color: var(--gray) !important; line-height: 1.75 !important; margin: 0 !important; }



/* ── PRODUCTS ────────────────────────────────────────────────────*/

.mp-products-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; margin-top: 40px !important; }

.mp-product-card { background: #ffffff !important; border-radius: 14px !important; padding: 28px 24px !important; border: 1px solid #E5E7EB !important; transition: box-shadow .25s, transform .25s; display: flex; flex-direction: column; gap: 10px; text-align: left !important; }

.mp-product-card:hover { box-shadow: 0 8px 32px rgba(13,33,55,.1); transform: translateY(-3px); border-color: var(--gold); }

.mp-product-icon { font-size: 1.8rem !important; margin: 0 !important; }

.mp-product-card .wp-block-heading { font-size: .95rem !important; font-weight: 700 !important; color: var(--navy) !important; margin: 0 !important; }

.mp-product-card .wp-block-paragraph { font-size: .85rem !important; color: var(--gray) !important; line-height: 1.7 !important; margin: 0 !important; }



/* ── WHY US — number + icon + content ───────────────────────────*/

.mp-why-section { background: #ffffff; }

.mp-why-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 28px !important; margin-top: 48px !important; }

.mp-why-card { padding: 32px 28px !important; border-radius: 14px !important; background: var(--bg) !important; border: 1px solid #E5E7EB !important; transition: border-color .25s, box-shadow .25s; text-align: left !important; }

.mp-why-card:hover { border-color: var(--gold); box-shadow: 0 8px 30px rgba(81,95,116,.12); }

/* Number — contrasting MP blue, prominent */

.mp-why-num {

	font-size: 2.2rem !important;

	font-weight: 800 !important;

	color: var(--mp-blue) !important;

	opacity: 1 !important;

	line-height: 1 !important;

	margin-bottom: 10px !important;

	margin-top: 0 !important;

	letter-spacing: -1px !important;

	display: block !important;

}

.mp-why-icon { font-size: 1.8rem !important; margin-bottom: 12px !important; margin-top: 0 !important; }

.mp-why-card .wp-block-heading { font-size: 1rem !important; font-weight: 700 !important; color: var(--navy) !important; margin-bottom: 10px !important; margin-top: 0 !important; }

.mp-why-card .wp-block-paragraph { font-size: .88rem !important; color: var(--gray) !important; line-height: 1.75 !important; margin: 0 !important; }



/* ── STATS ───────────────────────────────────────────────────────*/

.mp-stats-section { background: var(--navy) !important; }

.mp-stats-grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 24px !important; }

.mp-stat-item { padding: 44px 24px !important; text-align: center !important; }

.mp-stat-num { font-size: clamp(3rem, 5vw, 5rem) !important; font-weight: 800 !important; color: var(--gold) !important; line-height: 1 !important; margin-bottom: 16px !important; margin-top: 0 !important; }

.mp-stat-label { color: rgba(255,255,255,.85) !important; font-size: 1.15rem !important; font-weight: 600 !important; margin: 0 !important; letter-spacing: .3px !important; }



/* ── TEAM — single outer border via box-shadow ───────────────────*/

.mp-team-section { background: var(--bg); }

.mp-team-grid { gap: 32px !important; margin-top: 48px !important; align-items: stretch !important; }

.mp-team-card {

	width: 320px !important;

	background: #ffffff !important;

	border-radius: 16px !important;

	overflow: hidden !important;

	display: flex !important;

	flex-direction: column !important;

	/* Single outer border + drop shadow combined in one box-shadow */

	box-shadow: 0 0 0 4px var(--mp-blue), 0 12px 40px rgba(13,33,55,.18) !important;

	transition: transform .3s, box-shadow .3s;

	text-align: center !important;

}

.mp-team-card:hover {

	transform: translateY(-6px);

	box-shadow: 0 0 0 4px var(--mp-blue), 0 20px 50px rgba(13,33,55,.24) !important;

}

.mp-team-img-block { margin: 0 !important; }

.mp-team-img-block img { width: 100% !important; height: 280px !important; object-fit: cover !important; object-position: top !important; border-radius: 0 !important; display: block !important; }

.mp-team-img-block figcaption { display: none !important; }

.mp-team-info { padding: 24px 24px 28px !important; flex: 1 !important; display: flex !important; flex-direction: column !important; justify-content: center !important; }

.mp-team-info .wp-block-heading { font-size: 1.05rem !important; font-weight: 700 !important; color: var(--navy) !important; margin-bottom: 4px !important; margin-top: 0 !important; }

.mp-team-role { color: var(--mp-blue) !important; font-size: .82rem !important; font-weight: 600 !important; letter-spacing: 1px !important; text-transform: uppercase !important; margin-bottom: 12px !important; margin-top: 0 !important; }

.mp-team-info .wp-block-paragraph { font-size: .85rem !important; color: var(--gray) !important; line-height: 1.7 !important; margin: 0 !important; }



/* ── PARTNERS — logo image grid ──────────────────────────────────*/

.mp-partners-section { background: #ffffff; }

.mp-partners-note { color: var(--gray) !important; font-size: .88rem !important; max-width: 640px; margin: 0 auto 40px !important; }

.mp-partners-grid { display: grid !important; grid-template-columns: repeat(5, 1fr) !important; gap: 16px !important; margin-top: 0 !important; }

.mp-partner-card {

	background: var(--bg) !important;

	border: 1.5px solid #E5E7EB !important;

	border-radius: 12px !important;

	padding: 24px !important;

	transition: border-color .2s, box-shadow .2s, transform .2s;

	display: flex;

	align-items: center;

	justify-content: center;

	min-height: 100px;

}

.mp-partner-card:hover { border-color: var(--gold); box-shadow: 0 4px 16px rgba(81,95,116,.1); transform: translateY(-2px); }

.mp-partner-logo { margin: 0 !important; width: 100% !important; }

.mp-partner-logo img {

	max-height: 60px !important;

	width: auto !important;

	max-width: 100% !important;

	object-fit: contain !important;

	margin: 0 auto !important;

	display: block !important;

	filter: grayscale(0.2);

	transition: filter .2s;

}

.mp-partner-logo img:hover { filter: grayscale(0); }

/* Hide any figcaption if editor accidentally adds one */

.mp-partner-logo figcaption { display: none !important; }



/* ── GALLERY ─────────────────────────────────────────────────────*/

.mp-gallery-section { background: var(--bg); }

.mp-gallery-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 20px !important; margin-top: 40px !important; }

.mp-gallery-item { overflow: hidden; border-radius: 12px; }

.mp-gallery-img { margin: 0 !important; }

.mp-gallery-img img { width: 100% !important; height: 240px !important; object-fit: cover !important; border-radius: 12px !important; display: block !important; background: #d1d5db; transition: transform .3s; }

.mp-gallery-img:hover img { transform: scale(1.04); }

.mp-gallery-img figcaption { font-size: .82rem !important; color: var(--gray) !important; text-align: center !important; margin-top: 8px !important; }

.mp-gallery-note { font-size: .82rem !important; color: var(--gray) !important; margin-top: 20px !important; font-style: italic; }



/* ── CTA — fix spacing above button ─────────────────────────────*/

.mp-cta-section { background: linear-gradient(135deg, var(--navy) 0%, var(--gold-light) 100%) !important; }

.mp-cta-section .wp-block-heading { font-size: clamp(1.7rem, 3vw, 2.5rem) !important; font-weight: 800 !important; color: #ffffff !important; margin-bottom: 20px !important; margin-top: 0 !important; }

.mp-cta-section .wp-block-paragraph { color: rgba(255,255,255,.85) !important; font-size: 1.05rem !important; margin-bottom: 56px !important; line-height: 1.8 !important; }

.mp-btn-white .wp-block-button__link { background: #ffffff !important; color: var(--gold) !important; padding: 16px 48px !important; border-radius: 8px !important; font-weight: 700 !important; font-size: 1rem !important; border: none !important; }

.mp-btn-white .wp-block-button__link:hover { background: #f0f0f0 !important; transform: translateY(-2px); }



/* ── CONTACT ─────────────────────────────────────────────────────*/

.mp-contact-section { background: #ffffff; }

.mp-contact-grid { margin-top: 48px !important; }

.mp-contact-info { gap: 24px !important; }

.mp-contact-item { gap: 16px !important; align-items: flex-start !important; }

.mp-contact-icon { font-size: 1.3rem !important; flex-shrink: 0 !important; width: 48px !important; height: 48px !important; background: rgba(81,95,116,.1) !important; border-radius: 10px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; }

.mp-contact-item > .wp-block-group { flex: 1 !important; min-width: 0 !important; }

.mp-contact-label { font-size: .85rem !important; font-weight: 700 !important; color: var(--navy) !important; text-transform: uppercase !important; letter-spacing: .5px !important; margin-bottom: 4px !important; margin-top: 0 !important; }

.mp-contact-item .wp-block-group .wp-block-paragraph { font-size: .93rem !important; color: var(--gray) !important; line-height: 1.6 !important; margin: 0 !important; }

.mp-contact-item a:hover { color: var(--gold) !important; }

.mp-contact-section .wp-block-column:last-child iframe { display: block !important; border-radius: 12px !important; width: 100% !important; }



/* ── FOOTER ──────────────────────────────────────────────────────*/

.mp-footer { background: var(--dark) !important; padding: 64px 5% 0 !important; }

.mp-footer-grid { display: grid !important; grid-template-columns: 1.5fr 1fr 1fr 1.2fr !important; gap: 48px !important; margin-bottom: 48px !important; }

.mp-footer-brand .wp-block-site-logo img { height: 40px !important; margin-bottom: 16px !important; }

.mp-footer-tagline { color: var(--gold) !important; font-size: .82rem !important; font-weight: 600 !important; letter-spacing: 1px !important; text-transform: uppercase !important; margin-bottom: 12px !important; margin-top: 0 !important; }

.mp-footer-brand .wp-block-paragraph { color: rgba(255,255,255,.55) !important; font-size: .85rem !important; line-height: 1.75 !important; }

.mp-footer-col .wp-block-heading { color: #ffffff !important; font-size: .9rem !important; font-weight: 700 !important; margin-bottom: 18px !important; padding-bottom: 10px !important; border-bottom: 2px solid rgba(81,95,116,.3) !important; margin-top: 0 !important; }

.mp-footer-list { list-style: none !important; padding: 0 !important; display: flex !important; flex-direction: column !important; gap: 10px !important; margin: 0 !important; }

.mp-footer-list li, .mp-footer-list a { font-size: .85rem !important; color: rgba(255,255,255,.55) !important; transition: color .2s; }

.mp-footer-list a:hover { color: var(--gold) !important; }

.mp-footer-bottom { border-top: 1px solid rgba(255,255,255,.08) !important; padding: 20px 0 !important; text-align: center !important; }

.mp-footer-bottom .wp-block-paragraph { color: rgba(255,255,255,.35) !important; font-size: .82rem !important; margin: 0 !important; }



/* ── WHATSAPP ────────────────────────────────────────────────────*/

.mp-wa-btn { position: fixed !important; bottom: 28px; right: 28px; z-index: 1000; background: #25D366 !important; width: 58px; height: 58px; border-radius: 50%; display: flex !important; align-items: center; justify-content: center; box-shadow: 0 6px 24px rgba(37,211,102,.4); transition: transform .3s, box-shadow .3s; text-decoration: none !important; color: inherit !important; }

.mp-wa-btn:hover { transform: scale(1.1) translateY(-3px); box-shadow: 0 10px 30px rgba(37,211,102,.5); }

.mp-wa-icon { width: 30px; height: 30px; color: #ffffff; display: block; }

.mp-wa-tooltip { position: absolute; right: 68px; background: var(--navy); color: #ffffff; font-size: .82rem; font-weight: 600; padding: 6px 14px; border-radius: 6px; white-space: nowrap; opacity: 0; transition: opacity .2s; pointer-events: none; }

.mp-wa-btn:hover .mp-wa-tooltip { opacity: 1; }



/* ================================================================

   RESPONSIVE

   ================================================================ */

@media (max-width: 1024px) {

	.mp-services-grid, .mp-why-grid { grid-template-columns: repeat(2, 1fr) !important; }

	.mp-products-grid { grid-template-columns: repeat(2, 1fr) !important; }

	.mp-values-grid { grid-template-columns: repeat(2, 1fr) !important; }

	.mp-stats-grid  { grid-template-columns: repeat(2, 1fr) !important; }

	.mp-footer-grid { grid-template-columns: 1fr 1fr !important; }

	.mp-partners-grid { grid-template-columns: repeat(2, 1fr) !important; }

	.mp-gallery-grid { grid-template-columns: repeat(2, 1fr) !important; }

}

@media (max-width: 768px) {

	.mp-about-img-col { display: none !important; }

	.mp-services-grid, .mp-why-grid, .mp-products-grid { grid-template-columns: 1fr !important; }

	.mp-stats-grid { grid-template-columns: repeat(2, 1fr) !important; }

	.mp-values-grid { grid-template-columns: repeat(2, 1fr) !important; }

	.mp-footer-grid { grid-template-columns: 1fr !important; }

	.mp-team-card { width: 100% !important; max-width: 340px !important; }

	.mp-partners-grid { grid-template-columns: repeat(2, 1fr) !important; }

	.mp-gallery-grid { grid-template-columns: 1fr !important; }

}

/* Fix 2: values 1 column on small mobile */

@media (max-width: 480px) {

	.mp-values-grid { grid-template-columns: 1fr !important; }

	.mp-hero-btns .wp-block-button { width: 100%; }

	.mp-hero-btns .wp-block-button__link { display: block !important; text-align: center !important; }

}



/* ── PAGE TEMPLATE ───────────────────────────────────────────────*/

.mp-page-main { min-height: 60vh; }

.mp-page-title {

	font-size: clamp(1.8rem, 3.5vw, 2.8rem) !important;

	font-weight: 800 !important;

	color: var(--navy) !important;

	margin-bottom: 32px !important;

	margin-top: 0 !important;

	padding-bottom: 20px !important;

	border-bottom: 3px solid var(--gold) !important;

}

.mp-page-main .wp-block-post-content p {

	font-size: 1rem !important;

	line-height: 1.85 !important;

	color: #333 !important;

	margin-bottom: 16px !important;

}

.mp-page-main .wp-block-post-content h2 { color: var(--navy) !important; font-weight: 700 !important; margin-top: 32px !important; }

.mp-page-main .wp-block-post-content h3 { color: var(--navy) !important; font-weight: 600 !important; margin-top: 24px !important; }

.mp-page-main .wp-block-post-content a { color: var(--mp-blue) !important; text-decoration: underline !important; }

.mp-page-main .wp-block-post-content ul,

.mp-page-main .wp-block-post-content ol { padding-left: 24px !important; margin-bottom: 16px !important; }

.mp-page-main .wp-block-post-content li { line-height: 1.8 !important; color: #333 !important; }



/* Post meta */

.mp-post-meta { gap: 16px !important; margin-bottom: 32px !important; }

.mp-post-date { font-size: .85rem !important; color: var(--gray) !important; }



/* Back link */

.mp-post-back a { color: var(--mp-blue) !important; font-size: .9rem !important; font-weight: 500 !important; text-decoration: none !important; }

.mp-post-back a:hover { text-decoration: underline !important; }



/* 404 */

.mp-404 { background: var(--bg); }



/* ── PRODUCT PAGES — fix text visibility ─────────────────────────*/

/* Hero section on product page — white text on dark bg */

.mp-product-hero-section { background: var(--navy) !important; }

.mp-product-hero-section p,

.mp-product-hero-section h1,

.mp-product-hero-section h2 { color: #ffffff !important; }

.mp-product-tagline { color: rgba(255,255,255,.8) !important; font-size: 1.15rem !important; }



/* Content sections — dark text on light bg */

.mp-product-desc-section p,

.mp-product-desc-section li,

.mp-product-approach-section p,

.mp-product-approach-section li,

.mp-product-coverage-section p,

.mp-product-coverage-section li,

.mp-product-diff-section p,

.mp-product-diff-section li { color: #333333 !important; }



.mp-product-desc-section h2,

.mp-product-approach-section h2,

.mp-product-coverage-section h2,

.mp-product-diff-section h2 { color: var(--navy) !important; }



/* Coverage list styling */

.mp-product-coverage-section ul { padding-left: 20px !important; }

.mp-product-coverage-section li { color: #333333 !important; line-height: 1.8 !important; margin-bottom: 6px !important; }



/* CTA section on product page */

.mp-product-cta-section p,

.mp-product-cta-section h2 { color: #ffffff !important; }



/* General safety net — any text inside mp-page-main */

.mp-page-main p { color: #333333 !important; text-align: justify !important; }

.mp-page-main li { color: #333333 !important; }

.mp-page-main h1,

.mp-page-main h2,

.mp-page-main h3,

.mp-page-main h4 { color: var(--navy) !important; }

/* But CTA overrides back to white */

.mp-page-main .mp-product-cta-section p,

.mp-page-main .mp-product-cta-section h2 { color: #ffffff !important; }


/* ── DROPDOWN SUBMENU POSITIONING ───────────────────────────────*/
/* Reset semua positioning bawaan */
.wp-block-navigation__submenu-container {
	left: auto !important;
	right: auto !important;
	inset-inline-start: auto !important;
	inset-inline-end: auto !important;
}

/* Dropdown level pertama — muncul di bawah item nav */
.wp-block-navigation-item:hover > .wp-block-navigation__submenu-container,
.wp-block-navigation-item:focus-within > .wp-block-navigation__submenu-container {
	left: 0 !important;
	right: auto !important;
	top: 100% !important;
}

/* Dropdown level kedua dan seterusnya — muncul di kanan */
.wp-block-navigation__submenu-container .wp-block-navigation-item:hover > .wp-block-navigation__submenu-container,
.wp-block-navigation__submenu-container .wp-block-navigation-item:focus-within > .wp-block-navigation__submenu-container {
	left: 100% !important;
	right: auto !important;
	top: 0 !important;
}

/* ── HERO SLIDESHOW ──────────────────────────────────────────────*/
.mp-hero-slideshow {
	position: relative;
	min-height: 100vh;
	overflow: hidden;
	display: flex;
	align-items: center;
	padding: 90px 5% 80px 5%;
}
.mp-hero-slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0;
	animation: mpHeroCrossfade 12s infinite;
}
.mp-hero-slide:nth-child(1) { animation-delay: 0s; }
.mp-hero-slide:nth-child(2) { animation-delay: 6s; }
@keyframes mpHeroCrossfade {
	0%   { opacity: 0; }
	4%   { opacity: 1; }
	46%  { opacity: 1; }
	50%  { opacity: 0; }
	100% { opacity: 0; }
}
.mp-hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(0,13,34,0.88) 0%, rgba(10,35,66,0.75) 100%);
	z-index: 1;
}
.mp-hero-slideshow .mp-hero-inner {
	position: relative;
	z-index: 2;
	max-width: 700px;
}

/* ── PRODUCT CARD — clickable link ───────────────────────────────*/
a.mp-product-card {
	display: block !important;
	text-decoration: none !important;
	color: inherit !important;
	cursor: pointer;
	transition: box-shadow .25s, transform .25s, border-color .25s;
}
a.mp-product-card:hover {
	box-shadow: 0 8px 32px rgba(13,33,55,.12) !important;
	transform: translateY(-3px);
	border-color: var(--gold) !important;
}
a.mp-product-card .wp-block-heading,
a.mp-product-card p { color: inherit; }

/* ── HERO VISUAL (block-based, editor-friendly) ───────────────────*/
.mp-hero-section.mp-hero-visual {
	position: relative;
	min-height: 100vh !important;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding: 90px 5% 80px 5%;
	background-color: var(--navy) !important;
	background-image:
		linear-gradient(135deg, rgba(0,13,34,.88) 0%, rgba(10,35,66,.78) 100%),
		url('../images/hero-slide-1.png') !important;
	background-size: cover !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	overflow: hidden;
}
.mp-hero-visual .wp-block-group__inner-container,
.mp-hero-visual > * { position: relative; z-index: 2; }
.mp-hero-visual .mp-hero-badge { display: inline-block !important; background: rgba(81,95,116,.15) !important; border: 1px solid var(--gold) !important; color: var(--gold) !important; font-size: .78rem !important; font-weight: 600 !important; letter-spacing: 2px !important; text-transform: uppercase !important; padding: 6px 16px !important; border-radius: 30px !important; margin-bottom: 24px !important; }
.mp-hero-visual .mp-hero-title { font-size: clamp(2.2rem, 5vw, 3.8rem) !important; font-weight: 800 !important; color: #fff !important; line-height: 1.15 !important; margin-bottom: 20px !important; }
.mp-hero-visual .mp-hero-title .hero-accent { color: var(--gold) !important; font-weight: 400; }
.mp-hero-visual .mp-hero-desc { font-size: 1.1rem !important; color: rgba(255,255,255,.82) !important; line-height: 1.8 !important; margin-bottom: 36px !important; max-width: 640px; }