/* ----------------------------------------------------------------------------------------
* Author        : White Dev
* Template Name : Balai Tekstil
* File          : CSS File
* Version       : 1.0
* ---------------------------------------------------------------------------------------- */
/* INDEX
----------------------------------------------------------------------------------------
01. Global Variables
02. General css
03. Header css
04. Hero css
05. About Us css
06. Our Services css
07. Our Journey css
08. Our Departments css
09. Our Awards css
10. Our Activities css
11. Our Testimonials css
12. Our Team css
13. Our FAQs css
14. CTA Box css
15. Our Blog css
16. Footer css
17. About Us Page css
18. Services Page css
19. Service Single css
20. Departments Page css
21. Department Single css
22. Blog Archive css
23. Blog Single css
24. Activities Page css
25. Activity Single css
26. Team Page css
27. Team Single css
28. Testimonials Page css
29. Image Gallery css
30. Video Gallery css
31. FAQ's Page css
32.	Contact Us Page css
33. 404 Error Page css
34. Responsive css
35. Home - Version 2 css
36. Home - Version 3 css
-------------------------------------------------------------------------------------- */

/************************************/
/*** 	 01. Global Variables	  ***/
/************************************/

:root{
	--primary-color				: #202020;
	--secondary-color			: #f5f5f599;
	--bg-color					: #FFFFFF;
	--text-color				: #5A6361;
	--accent-color				: #0B5CAB;
	--accent-secondary-color	: #17B0A7;
	--white-color				: #FFFFFF;
	--divider-color				: #2020201A;
	--dark-divider-color		: #FFFFFF1A;
	--error-color				: rgb(230, 87, 87);
	--default-font				: "Inter Tight", sans-serif;
	--card-shadow				: 0 2px 12px #2020200F;
	--card-shadow-hover			: 0 10px 26px #20202014;
}

/************************************/
/*** 	   02. General css		  ***/
/************************************/

html,
body{
	width: 100%;
	overflow-x: clip;
}

body{
	font-family: var(--default-font);
	font-size: 16px;
	font-weight: 400;
	line-height: 1em;
	color: var(--text-color);
	background: var(--bg-color);
}

::-webkit-scrollbar-track{
	background-color: var(--primary-color);
	border-left: 1px solid var(--primary-color);
}

::-webkit-scrollbar{
	width: 7px;
	background-color: var(--accent-secondary-color);
}

::-webkit-scrollbar-thumb{
	background: var(--accent-secondary-color);
}

::selection{
	color: var(--white-color);
	background-color: var(--accent-color);
	filter: invert(1);
}

p{
	line-height: 1.7em;
	margin-bottom: 1.5em;
}

h1,
h2,
h3,
h4,
h5,
h6{
	font-weight: 600;
	line-height: 1.2em;
	color: var(--primary-color);
	margin :0;
}

figure{
	margin: 0;
}

img{
	max-width: 100%;
}

a{
	text-decoration: none;
}

a:hover{
	text-decoration: none;
	outline: 0;
}

a:focus{
	text-decoration: none;
	outline: 0;
}

.container{
	max-width: 1300px;
}

.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl{
    padding-right: 15px;
    padding-left: 15px;
}

.image-anime{
	position: relative;
	overflow: hidden;
}

.image-anime:after{
	content: "";
	position: absolute;
    width: 200%;
    height: 0%;
    left: 50%;
    top: 50%;
    background-color: rgba(255,255,255,.3);
    transform: translate(-50%,-50%) rotate(-45deg);
    z-index: 1;
}

.image-anime:hover:after{
    height: 250%;
    transition: all 600ms linear;
    background-color: transparent;
}

.reveal{
	position: relative;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    visibility: hidden;
    overflow: hidden;
}

.reveal img{
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -webkit-transform-origin: left;
    transform-origin: left;
}

.row{
    margin-right: -15px;
    margin-left: -15px;
}

.row > *{
	padding-right: 15px;
	padding-left: 15px;
}

.row.no-gutters{
    margin-right: 0px;
    margin-left: 0px;
}

.row.no-gutters > *{
    padding-right: 0px;
    padding-left: 0px;
}

.btn-default{
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1em;
	text-transform: capitalize;
	color: var(--white-color);
	background-color: var(--accent-color);
	border: 1px solid var(--accent-color);
	border-radius: 6px;
	padding: 16px 26px;
	transition: background-color 0.35s ease-in-out, border-color 0.35s ease-in-out, color 0.35s ease-in-out, box-shadow 0.35s ease-in-out;
}

/* Panah sejajar teks, tanpa kotak aksen terpisah */
.btn-default::after{
	content: '';
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	background-image: url('../images/arrow-white.svg');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 16px auto;
	transition: transform 0.35s ease-in-out;
}

.btn-default:hover{
	background-color: #084A86;
	border-color: #084A86;
	color: var(--white-color);
	box-shadow: 0 10px 24px rgba(11, 92, 171, 0.22);
}

.btn-default:hover::after{
	transform: translateX(4px);
}

/* Varian terang untuk latar gelap */
.btn-default.btn-highlighted{
	background-color: var(--white-color);
	border-color: var(--white-color);
	color: var(--accent-color);
}

.btn-default.btn-highlighted::after{
	background-image: url('../images/arrow-primary.svg');
}

/* Varian putih bergaris untuk latar TERANG — pasangan .btn-default saat satu
   tombol solid dan satu tombol putih berdampingan. Berbeda dari
   .btn-highlighted yang bordernya putih dan hanya terlihat di latar gelap. */
.btn-default.btn-outline{
	background-color: var(--white-color);
	border-color: var(--divider-color);
	color: var(--accent-color);
}

.btn-default.btn-outline::after{
	background-image: url('../images/arrow-primary.svg');
}

.btn-default.btn-outline:hover{
	background-color: var(--white-color);
	border-color: var(--accent-color);
	color: var(--accent-color);
	box-shadow: 0 10px 24px rgba(32, 32, 32, 0.12);
}

.btn-default.btn-highlighted:hover{
	background-color: var(--secondary-color);
	border-color: var(--secondary-color);
	color: var(--accent-color);
	box-shadow: 0 10px 24px rgba(32, 32, 32, 0.18);
}

.readmore-btn{
	position: relative;
	display: inline-block;
	font-weight: 600;
	line-height: 1.5em;
	text-transform: capitalize;
	color: var(--primary-color);
	padding-right: 34px;
	transition: all 0.4s ease-in-out;
}

.readmore-btn::before{
	content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
    right: 0px;
    height: 24px;
    width: 24px;
    background-color: var(--accent-color);
    background-image: url('../images/arrow-white.svg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 14px auto;
    border-radius: 100px;
    transition: all 0.4s ease-in-out;
}

.readmore-btn:hover::before{
	transform: translateY(-50%) rotate(0deg);
}

.cb-cursor:before{
	background: var(--accent-color);
}

.preloader{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	background:
		radial-gradient(circle at 20% 20%, rgba(11, 92, 171, 0.35) 0%, rgba(11, 92, 171, 0) 55%),
		radial-gradient(circle at 80% 80%, rgba(23, 176, 167, 0.28) 0%, rgba(23, 176, 167, 0) 55%),
		var(--primary-color);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.6s ease-in-out, visibility 0.6s ease-in-out;
}

.preloader.is-hidden{
	opacity: 0;
	visibility: hidden;
}

/* Sudah tampil sekali di kunjungan ini (skrip di <head> header.php). */
.balai-preloaded .preloader{
	display: none;
}

.preloader-inner{
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 0 24px;
}

/* Dua cincin berputar berlawanan arah */
.preloader-ring{
	position: relative;
	width: 118px;
	height: 118px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.preloader-arc{
	position: absolute;
	border-radius: 50%;
	border: 2px solid transparent;
}

.preloader-arc-1{
	inset: 0;
	border-top-color: var(--accent-color);
	border-right-color: var(--accent-color);
	animation: preloader-spin 1.4s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

.preloader-arc-2{
	inset: 14px;
	border-bottom-color: var(--accent-secondary-color);
	border-left-color: var(--accent-secondary-color);
	animation: preloader-spin 1.9s cubic-bezier(0.65, 0, 0.35, 1) infinite reverse;
}

.preloader-logo{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.06);
	animation: preloader-pulse 2s ease-in-out infinite;
}

.preloader-logo img{
	max-width: 44px;
	height: auto;
}

.preloader-text{
	margin-top: 30px;
}

.preloader-title{
	display: block;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--white-color);
	margin-bottom: 8px;
}

.preloader-subtitle{
	display: block;
	font-size: 13px;
	line-height: 1.5em;
	color: rgba(255, 255, 255, 0.55);
}

/* Bar indeterminate */
.preloader-bar{
	position: relative;
	width: 190px;
	height: 3px;
	border-radius: 30px;
	background: rgba(255, 255, 255, 0.10);
	overflow: hidden;
	margin-top: 26px;
}

.preloader-bar span{
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 45%;
	border-radius: 30px;
	background: linear-gradient(90deg, var(--accent-color), var(--accent-secondary-color));
	animation: preloader-slide 1.4s ease-in-out infinite;
}

@keyframes preloader-spin{
	0%{ transform: rotate(0deg); }
	100%{ transform: rotate(360deg); }
}

@keyframes preloader-pulse{
	0%, 100%{ transform: scale(1); opacity: 1; }
	50%{ transform: scale(0.92); opacity: 0.75; }
}

@keyframes preloader-slide{
	0%{ left: -45%; }
	100%{ left: 100%; }
}

@media only screen and (max-width: 767px){
	.preloader-ring{ width: 96px; height: 96px; }
	.preloader-logo{ width: 60px; height: 60px; }
	.preloader-logo img{ max-width: 36px; }
	.preloader-title{ font-size: 18px; }
	.preloader-subtitle{ font-size: 12px; }
	.preloader-bar{ width: 160px; }
}

@media (prefers-reduced-motion: reduce){
	.preloader-arc,
	.preloader-logo,
	.preloader-bar span{ animation: none; }
	.preloader-bar span{ left: 0; width: 100%; }
}

.bg-section{
	background-color: var(--secondary-color);
}

.dark-section{
	background-color: var(--primary-color);
}

.section-row{
	margin-bottom: 80px;
	align-items: center;
}

.section-row .section-title{
	margin-bottom: 0; 
}

.section-row .section-title.section-title-center{
	width: 100%;
	max-width: 700px;
}

.our-services .about-us-btn,
.our-blog .about-us-btn,
.hm-encyclopedia .about-us-btn {
	text-align: end !important;
}

.section-btn{
	text-align: right;
}

.section-content-btn .section-btn{
	margin-top: 30px;
	text-align: left;
}

.section-title-content p{
	margin-bottom: 20px;
}

.section-title-content p:last-child{
	margin-bottom: 0;	
}

.section-title{
	margin-bottom: 40px;
}

/* Sub-judul seluruh section berwarna biru aksen (6.7:1 di atas putih).
   Dua konteks berlatar gelap sengaja tidak ikut karena biru di sana cuma
   2.4:1 — .dark-section tetap putih, .vismisi-visi tetap teal. Keduanya
   spesifisitasnya lebih tinggi, jadi menang atas aturan ini. */
.section-title .section-sub-title{
	position: relative;
	display: inline-block;
	color: var(--accent-color);
	font-size: 14px;
	font-weight: 500;
	text-transform: capitalize;
	line-height: normal;
	padding-left: 16px;
    margin-bottom: 15px;
}

.section-title .section-sub-title::before{
	content: '';
    position: absolute;
    left: 0px;
    top: 50%;
	transform: translateY(-50%);
    background-color: var(--accent-secondary-color);
	border-radius: 0;
    width: 6px;
    height: 6px;
}

.section-title h1{
	font-size: 50px;
	font-weight: 600;
	margin-bottom: 0;
	cursor: none;
}

.section-title h2{
	font-size: 25px;
	font-weight: 600;
	margin-bottom: 0;
	cursor: none;
}

.section-title p{
	margin-top: 20px;
	margin-bottom: 0;
}

.dark-section .section-title .section-sub-title,
.dark-section .section-title h1,
.dark-section .section-title h2,
.dark-section .section-title p,
.dark-section .section-title-content p{
	color: var(--white-color);
}

.help-block.with-errors ul{
	margin: 0;
	text-align: left;
}

.help-block.with-errors ul li{
	color: var(--error-color);
	font-weight: 500;
	font-size: 14px;
}

/************************************/
/**** 	    03. Header css		 ****/
/************************************/

header.main-header{
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	border-bottom: 1px solid var(--dark-divider-color);
	z-index: 100;
	padding:20px 0 10px 0;
}

/* --- Sticky header: pin + animasi turun dari atas ------------------------ */
/* Mesin state, dikendalikan js/function.js:
   (tanpa class)  = di puncak halaman, header transparan menumpuk hero
   .active        = ter-pin, position fixed, bar rapat
   .active.hide   = terparkir / keluar di atas viewport (translateY -100%)
   .is-parking    = satu frame saja, mematikan transisi saat memarkir
   Urutan turun: add .is-parking .active .hide -> lepas .is-parking -> lepas .hide */

header.main-header .header-sticky{
	position: relative;
	top: 0;
	z-index: 100;

	--header-slide-dur		: 380ms;
	--header-ease			: cubic-bezier(0.22, 0.61, 0.36, 1);
	--header-pinned-bg		: var(--white-color);
	--header-pinned-shadow	: 0 1px 2px #2020200D, 0 6px 16px #20202012;
	--header-pinned-pad		: 6px;
}

header.main-header .header-sticky.active{
	position: fixed;
	top: 0;
	left: 0px;
	right: 0px;
	transform: translateY(0);
	padding: var(--header-pinned-pad) 0;
	background: var(--header-pinned-bg);
	border-bottom: 1px solid var(--divider-color);
	border-radius: 0;
	box-shadow: var(--header-pinned-shadow);
	will-change: transform;
	transition: transform var(--header-slide-dur) var(--header-ease);
}

header.main-header .header-sticky.active.hide{
	transform: translateY(-100%);
	box-shadow: none;
}

/* --- Bar ter-pin berlatar putih: balik semua teks & ikon jadi gelap ------ */
/* Semua aturan di bawah ini dikunci ke .active. Di puncak halaman header
   tetap transparan dengan teks putih menumpuk hero — jangan diubah. */

header.main-header .header-sticky.active .main-menu ul li a{
	color: var(--primary-color);
}

/* Aksen teal #17B0A7 cuma ~2.7:1 di atas putih — gagal WCAG AA (min 4.5:1).
   Di state ter-pin hover pakai biru utama #0B5CAB (~6.7:1). */
header.main-header .header-sticky.active .main-menu ul li a:hover,
header.main-header .header-sticky.active .main-menu ul li a:focus{
	color: var(--accent-color);
}

/* Tombol hamburger — garis dan bingkainya dirancang untuk latar gelap. */
header.main-header .header-sticky.active .navbar-toggle{
	border-color: var(--divider-color);
	background: #20202008;
}

header.main-header .header-sticky.active .navbar-toggle-bar{
	background: var(--primary-color);
}

/* Kecuali saat tombolnya terisi biru penuh — garisnya balik putih. */
header.main-header .header-sticky.active .navbar-toggle:hover,
header.main-header .header-sticky.active .navbar-toggle.is-active{
	background: var(--accent-color);
	border-color: var(--accent-color);
}

header.main-header .header-sticky.active .navbar-toggle:hover .navbar-toggle-bar,
header.main-header .header-sticky.active .navbar-toggle.is-active .navbar-toggle-bar{
	background: var(--white-color);
}

/* Bar yang ter-pin lebih rapat: logo mengecil selagi masih di luar layar,
   jadi perubahannya tidak pernah terlihat sebagai lompatan. */
header.main-header .header-sticky.active .navbar-brand{
	width: 168px;
}

/* Mega-menu tidak boleh lebih tinggi dari layar saat header ter-pin,
   kalau tidak item paling bawah jadi tak terjangkau di viewport pendek. */
header.main-header .header-sticky.active .main-menu ul li.mega-menu-item > ul.mega-menu{
	max-height: calc(100vh - 110px);
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* Hanya berlaku satu frame, saat bar diparkir di atas viewport. Tanpa ini
   bar terlihat berkedip naik dulu sebelum turun. */
header.main-header .header-sticky.is-parking{
	transition: none !important;
}

/* Target anchor dalam halaman tidak tertutup bar yang ter-pin.
   Token-nya didefinisikan di section "Aksesibilitas — Focus Ring" di akhir
   file, dipakai bersama dengan scroll-margin untuk navigasi papan ketik. */
:target{
	scroll-margin-top: var(--header-scroll-offset, 96px);
}

@media (prefers-reduced-motion: reduce){
	header.main-header .header-sticky.active{
		transition: none;
		will-change: auto;
	}

	header.main-header .header-sticky.active.hide{
		transform: translateY(0);
	}
}

.navbar{
	align-items: center;
}

.topbar {
	margin-top: 25px;
}

.menu-topbar,
.social-media {
	margin-bottom: 5px;
}

.navbar-brand{
	padding: 0;
	margin: 0;
	width: 200px;
}

/* Dua logo bertumpuk: putih di atas banner, berwarna saat header ter-pin
   berlatar putih. Logo berwarna tetap menentukan ukuran; versi putih
   (Header Options → Logo Balai putih) dibuat dari gambar yang sama. */
.navbar-brand.has-logo-white{
	position: relative;
	display: block;
}

.navbar-brand.has-logo-white img{
	display: block;
	width: 100%;
	height: auto;
	transition: opacity 0.3s ease-in-out;
}

.navbar-brand-logo-white{
	position: absolute;
	top: 0;
	left: 0;
}

.navbar-brand.has-logo-white .navbar-brand-logo{
	opacity: 0;
}

header.main-header .header-sticky.active .navbar-brand.has-logo-white .navbar-brand-logo{
	opacity: 1;
}

header.main-header .header-sticky.active .navbar-brand-logo-white{
	opacity: 0;
}

@media (prefers-reduced-motion: reduce){
	.navbar-brand.has-logo-white img{
		transition: none;
	}
}

.main-menu .nav-menu-wrapper{
	flex: 1;
	text-align: center;
}

/* Anchor for the Layanan mega-menu panel (centered under the whole nav) */
.navbar > .container-fluid{
	position: relative;
}

.main-menu .nav-menu-wrapper > ul{
	align-items: center;
	display: flex;
	justify-content: end;
}

.main-menu ul li{
	margin-left:28px;
	position: relative;
}

.main-menu ul li a{
	font-size: 16px;
	font-weight: 500;
	line-height: 1.2em;
	color: var(--white-color);
	background: transparent;
	border-radius: 0px;
	text-transform: capitalize;
	transition: all 0.3s ease-in-out;
}

.swiper-slide.swiper-slide-active i{
	color: #fff !important;
}

.menu-topbar a {
	font-size: 16px;
}
.main-menu ul li.submenu > a:after{
	content: '\f107';
	font-family: 'FontAwesome';
	font-weight: 900;
	font-size: 14px;
	margin-left: 8px;
}

.main-menu ul li a:hover,
.main-menu ul li a:focus{
	color: var(--accent-secondary-color);
}

.main-menu ul ul{
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transform: scale(1,0.8);
	transform-origin: top;
	padding: 0;
	margin: 0;
	list-style: none;
	width: 235px;
	border-radius: 10px;
	position: absolute;
	left: 0;
	top: 100%;
	background: var(--white-color);
	box-shadow: 0 18px 40px rgba(32, 32, 32, 0.15);
	transition: all 0.3s ease-in-out;
	text-align: left;
}

.main-menu ul li.submenu:first-child ul{
    width: 235px;
}

.main-menu ul ul ul{
	left: 100%;
	top: 0;
	text-align: left;
}

.main-menu ul li:hover > ul{
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
	transform: scale(1,1);
    padding: 5px 0;
}

.main-menu ul li.submenu ul li.submenu > a:after{
    content: '\f105';
    float: right;
}

.main-menu ul ul li{
	margin: 0;
	padding: 0;
}

.main-menu ul ul li a{
	color: var(--primary-color);
	padding: 8px 20px !important;
	transition: all 0.3s ease-in-out;
}

.main-menu ul ul li a:hover,
.main-menu ul ul li a:focus{
	color: var(--accent-color);
	background-color: transparent;
	padding: 8px 20px 8px 23px !important;
}

.main-menu ul li.highlighted-menu{
    display: none;
}

/* ===== Mega Menu (Layanan) — desktop ===== */
.main-menu ul li.mega-menu-item{
	position: static;
}

/* Wide white panel, centered under the nav */
.main-menu ul li.mega-menu-item > ul.mega-menu{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 6px 30px;
	width: min(1180px, calc(100vw - 40px));
	left: 50%;
	right: auto;
	top: 100%;
	transform: translateX(-50%) scale(1, 0.85);
	transform-origin: top center;
	background: var(--white-color);
	border-radius: 12px;
	box-shadow: 0 24px 60px rgba(32, 32, 32, 0.18);
	padding: 32px 34px;
	position: absolute;
	z-index: 9 !important;
}

.main-menu ul li.mega-menu-item:hover > ul.mega-menu{
	transform: translateX(-50%) scale(1, 1);
	padding: 32px 34px;
}

/* invisible bridge so hover isn't lost between the nav item and the panel */
.main-menu ul li.mega-menu-item > ul.mega-menu::before{
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: -20px;
	height: 20px;
}

/* Columns */
.main-menu ul li.mega-menu-item .mega-menu-col{
	position: static;
	margin: 0;
	padding: 0;
}

.main-menu ul li.mega-menu-item .mega-menu-title{
	display: block;
	color: var(--primary-color) !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 1.4em;
	text-transform: none;
	padding: 0 0 12px !important;
	margin-bottom: 10px;
	border-bottom: 1px solid var(--divider-color);
}

.main-menu ul li.mega-menu-item .mega-menu-title:hover{
	color: var(--accent-color) !important;
	padding: 0 0 12px !important;
}

/* Nested link list: laid out as a static block (override the flyout submenu).
   NOTE: no visibility/opacity here — it must follow the panel's hidden state,
   otherwise the (invisible) list still catches hover and opens the mega menu. */
.main-menu ul li.mega-menu-item .mega-menu-col > ul{
	position: static;
	transform: none;
	width: 100%;
	background: transparent;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
}

/* Reveal the columns only while the parent (Layanan) is hovered */
.main-menu ul li.mega-menu-item:hover .mega-menu-col > ul{
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
}

.main-menu ul li.mega-menu-item .mega-menu-col > ul li{
	margin: 0;
	padding: 0;
}

.main-menu ul li.mega-menu-item .mega-menu-col > ul li a{
	display: block;
	color: var(--text-color) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	line-height: 1.45em;
	text-transform: none;
	white-space: normal;
	padding: 7px 0 !important;
}

.main-menu ul li.mega-menu-item .mega-menu-col > ul li a:hover,
.main-menu ul li.mega-menu-item .mega-menu-col > ul li a:focus{
	color: var(--accent-color) !important;
	padding: 7px 0 7px 6px !important;
}

.responsive-menu,
.navbar-toggle{
	display: none;
}

.responsive-menu{
	position: relative;
	top: 0;
}

/* Tombol hamburger (bar berubah jadi X saat aktif) */
.navbar-toggle{
	position: relative;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 1px solid var(--dark-divider-color);
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.06);
	cursor: pointer;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	transition: background 0.3s ease-in-out, border-color 0.3s ease-in-out;
}

.navbar-toggle:hover,
.navbar-toggle.is-active{
	background: var(--accent-color);
	border-color: var(--accent-color);
}

.navbar-toggle-bar{
	display: block;
	width: 22px;
	height: 2px;
	border-radius: 6px;
	background: var(--white-color);
	transition: transform 0.35s cubic-bezier(0.68, -0.4, 0.27, 1.4), opacity 0.2s ease-in-out, width 0.35s ease-in-out;
}

.navbar-toggle-bar:nth-child(2){ width: 15px; margin-right: -7px; }

.navbar-toggle.is-active .navbar-toggle-bar:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.navbar-toggle.is-active .navbar-toggle-bar:nth-child(2){ opacity: 0; width: 22px; }
.navbar-toggle.is-active .navbar-toggle-bar:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

.slicknav_btn{
	background: var(--accent-color);
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	margin: 0;
	border-radius: 6px;
}

.slicknav_icon .slicknav_icon-bar{
	display: block;
	width: 100%;
	height: 3px;
	width: 22px;
	background-color: var(--accent-secondary-color);
	border-radius: 6px;
	margin: 4px auto !important;
	transition: all 0.1s ease-in-out;
}

.slicknav_icon .slicknav_icon-bar:first-child{
	margin-top: 0 !important;
}

.slicknav_icon .slicknav_icon-bar:last-child{
	margin-bottom: 0 !important;
}

.navbar-toggle a.slicknav_btn.slicknav_open .slicknav_icon span.slicknav_icon-bar:nth-child(1){
    transform: rotate(-45deg) translate(-5px, 5px);
}

.navbar-toggle a.slicknav_btn.slicknav_open .slicknav_icon span.slicknav_icon-bar:nth-child(2){
    opacity: 0;
}

.navbar-toggle a.slicknav_btn.slicknav_open .slicknav_icon span.slicknav_icon-bar:nth-child(3){
    transform: rotate(45deg) translate(-5px, -5px);
}

.slicknav_menu{
	position: absolute;
    width: 100%;
	padding: 0;
	background: var(--accent-color);
	border-radius: 0 0 20px 20px;
}

.slicknav_menu ul{
	margin: 5px 0;
}

.slicknav_menu ul ul{
	margin: 0;
}

.slicknav_nav .slicknav_row,
.slicknav_nav li a{
	position: relative;
	font-size: 16px;
	font-weight: 500;
	text-transform: capitalize;
	padding: 7px 20px;
	color: var(--white-color);
	line-height: normal;
	margin: 0;
	border-radius: 0 !important;
	transition: all 0.3s ease-in-out;
}

.slicknav_nav a:hover,
.slicknav_nav a:focus,
.slicknav_nav .slicknav_row:hover{
	background-color: transparent;
	color: var(--accent-secondary-color);
}

.slicknav_menu ul ul li a{
    padding: 7px 20px 7px 30px;
}

.slicknav_arrow{
	font-size: 0 !important;
}

.slicknav_arrow:after{
	content: '\f107';
	position: absolute;
	font-family: 'FontAwesome';
	font-weight: 900;
	font-size: 12px;
	margin-left: 8px;
	color: var(--white-color);
	right: 15px;
	top: 50%;
	transform: translateY(-50%);
	transition: all 0.3s ease-out;
}

.slicknav_open > a .slicknav_arrow:after{
    transform: translateY(-50%) rotate(-180deg);
	color: var(--accent-secondary-color);
}

/************************************/
/*** 	    04. Hero css	      ***/
/************************************/

.hero{
    position: relative;
    align-content: end;
    height: 750px;
	min-height: 750px;
    align-content: end;
    overflow: hidden;
}

.hero::before{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.80) 0%, transparent 50.3%, transparent 49.98%, rgba(0, 0, 0, 0.80) 92.55%);
	width: 100%;
	height: 100%;
	z-index: 2;
}

.hero.hero-video .hero-bg-video{
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
}

.hero.hero-video .hero-bg-video video{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero .container{
    position: relative;
    z-index: 2;
}

.hero-content-body{
	border-top: 1px solid var(--dark-divider-color);
	margin-top: 40px;
	padding-top: 40px;
}

.hero-content-body ul{
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 20px;
}

.hero-content-body ul li{
	position: relative;
	width: calc(50% - 10px);
	color: var(--white-color);
	line-height: 1.5em;
	padding-left: 25px;
}

.hero-content-body ul li:before{
	content: '\f058';
    position: absolute;
    font-family: 'Font Awesome 7 Free';
    font-size: 18px;
    font-weight: 900;
    color: var(--accent-secondary-color);
    top: 0;
    left: 0;
}

.hero-info-box{
	max-width: 410px;
	background: var(--dark-divider-color);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
	border-radius: 10px;
	padding: 10px;
	margin-left: auto;
}

.hero-info-box-header{
	background: var(--dark-divider-color) url('../images/hero-info-box-quote.svg') no-repeat;
	background-position: right 30px center;
	border-radius: 10px;
	padding: 30px;
}

.hero-info-box-header-item{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.hero-info-box-header-item .icon-box{
	background-color: var(--accent-color);
	border-radius: 2px;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hero-info-box-header-item .icon-box i{
	color: var(--white-color);
	font-size: 14px;
}

.hero-info-box-header-content{
	width: calc(100% - 34px);
}

.hero-info-box-header-content p{
	color: var(--white-color);
	margin: 0;
}

.hero-info-box-content{
	margin-top: 20px;
}

.hero-info-box-content p{
	color: var(--white-color);
	line-height: 1.4em;
	font-weight: 600;
	margin: 0;
}

.hero-info-box-btn{
	padding: 20px 10px 10px;
}

/************************************/
/*** 	  05. About Us css	      ***/
/************************************/

.about-us{
	padding-top: 120px;
}

.about-image-box{
	position: relative;
	height: 100%;
	padding-right: 90px;
	margin-right: 15px;
}

.about-us-image{
	height: 100%;
}

.about-us-image figure{
	display: block;
	height: 100%;
	border-radius: 10px;
}

.about-us-image figure img{
	width: 100%;
	height: 100%;
	border-radius: 10px;
	aspect-ratio: 1 / 1.305;
    object-fit: cover;
}

.about-experience-box{
	position: absolute;
	top: 10px;
	left: 10px;
	max-width: 250px;
	background: var(--accent-secondary-color) url('../images/icon-about-experience-box.svg') no-repeat;
	background-position: bottom 25px right 25px;
	background-size: 80px auto;
	border-radius: 10px;
	padding: 30px;
	z-index: 2;
}

.about-experience-box h2{
	font-size: 48px;
	line-height: 1em;
	color: var(--accent-color);
}

.about-experience-box h3{
	font-size: 20px;
	margin-top: 15px;
}

.about-experience-box p{
	margin: 10px 0 0;
	line-height: 1.4em;
	color: var(--primary-color);
}

.about-image-skill-bar-box{
	position: absolute;
	bottom: 80px;
	right: 0;
	background-color: var(--white-color);
	box-shadow: 5px 0 15px 0 rgba(0, 0, 0, 0.05);
	border-radius: 10px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 15px;
	padding: 20px;
	animation: growthmove 3s infinite linear alternate;
	z-index: 2;
}

@keyframes growthmove{
	50%{
		right: 40px;
	}
}

.about-image-skill-bar-box .icon-box{
	position: relative;
	height: 50px;
	width: 50px;
	border-radius: 5px;
	background-color: var(--accent-color);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.about-image-skill-bar-box .icon-box::before{
	content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: var(--primary-color);
    width: 100%;
    height: 100%;
    transform: rotate(180deg) scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.about-image-skill-bar-box:hover .icon-box::before{
	transform: rotate(0) scale(1);
}

.about-image-skill-bar-box .icon-box img{
	position: relative;
	width: 100%;
	max-width: 24px;
	z-index: 1;
}

.about-image-skill-bar-box .skills-progress-bar{
	width: calc(100% - 65px);
}

.skills-progress-bar .skill-data{
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 15px;
}

.skills-progress-bar .skill-data .skill-title,
.skills-progress-bar .skill-data .skill-no{
	font-size: 14px;
	font-weight: 600;
	line-height: normal;
    color: var(--primary-color);
}

.skills-progress-bar .skillbar .skill-progress{
    position: relative;
    width: 100%;
    height: 10px;
    background: var(--divider-color);
    border-radius: 10px;
    overflow: hidden;
}

.skills-progress-bar .skillbar .skill-progress .count-bar{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    background: var(--accent-color);
    border-radius: 100px;
}

.about-us-contant{
	height: 100%;
	align-content: center;
}

.about-us-body{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 30px;
}

.about-us-list{
	width: calc(50% - 15px);
}

.about-us-list ul{
	list-style: none;
	margin: 0;
	padding: 0;
}

.about-us-list ul li{
	position: relative;
    line-height: 1.5em;
    padding-left: 25px;
    margin-bottom: 20px;
}

.about-us-list ul li:last-child{
	margin: 0;
}

.about-us-list ul li::before{
	content: '\f058';
    position: absolute;
    font-family: 'Font Awesome 7 Free';
    font-size: 18px;
    font-weight: 900;
    color: var(--accent-color);
    top: 0;
    left: 0;
}

.about-info-box{
	width:100%;
}

.about-author-Box{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 15px;
}

.about-author-image figure{
	display: block;
	border-radius: 50%;
}

.about-author-image figure img{
	width: 100%;
    max-width: 50px;
    border-radius: 50%;
}

.about-author-contant{
	width: calc(100% - 65px);
}

.about-author-contant h2{
	font-size: 20px;
}

.about-author-contant p{
	margin: 5px 0 0;
}

.about-us-btn{
	/* border-top: 1px solid var(--divider-color); */
	padding-top: 30px;
	margin-top: 30px;
}

.section-footer-text{
	margin-top: 30px;
	text-align: center;
}

.section-footer-text p{
	color: var(--text-color);
	margin-bottom: 0;
}

.section-footer-text p span{
	display: inline-block;
	font-size: 14px;
	font-weight: 500;
	background: var(--accent-color);
	color: var(--white-color);
	line-height: 1em;
	padding: 4px 10px;
	border-radius: 20px;
	margin-right: 10px;
}

.section-footer-text p a{
	font-weight: 600;
	text-transform: capitalize;
	text-decoration: underline;
	text-underline-offset: 3px;
	color: var(--accent-color);
	transition: all 0.3s ease-in-out;
}

.section-footer-text p a:hover{
	color: var(--primary-color);
}

.section-footer-text ul{
	width: 100%;
	padding: 0;
	margin: 20px 0 0;
	list-style: none;
}

.section-footer-text ul li{
	display: inline-block;
	font-size: 20px;
	font-weight: 600;
	line-height: normal;
	color: var(--primary-color);
	margin-right: 10px;
}

.section-footer-text ul li:last-child{
	margin: 0;
}

.section-footer-text ul li i{
	color: var(--accent-color);
}

.section-footer-text.section-footer-contact{
	display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 20px;
}

.section-footer-text.section-footer-contact span{
	width: 30px;
    height: 30px;
    padding: 0;
    display: inline-flex;
    justify-content: center;
	align-items: center;
    margin-right: 10px;
}

.section-footer-text.section-footer-contact span img{
	width: 100%;
	max-width: 16px;
}

.section-footer-text.section-satisfy-img{
	display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.section-footer-text.section-satisfy-img .satisfy-client-image figure img{
	max-width: 30px;
}

.section-footer-text.section-satisfy-img .satisfy-client-image.add-more{
	width: 32px;
	height: 32px;
    margin-left: -10px;
}

.section-footer-text.section-satisfy-img .satisfy-client-image.add-more img{
	max-width: 16px;
}

.section-footer-text.section-satisfy-img ul{
	margin: 5px 0 0;
}

.dark-section .section-footer-text.section-satisfy-img .satisfy-client-image{
    border-color: var(--primary-color);
}

.dark-section .section-footer-text p,
.dark-section .section-footer-text ul li{
	color: var(--white-color);
}

.dark-section .section-footer-text p a{
	color: var(--accent-secondary-color);
}

.dark-section .section-footer-text p a:hover{
	color: var(--white-color);
}

.satisfy-client-images{
	display: flex;
	align-items: center;
	justify-content: center;
}

.satisfy-client-image{
	position: relative;
    display: inline-block;
    margin-left: -14px;
    border: 1px solid var(--white-color);
    border-radius: 50%;
    overflow: hidden;
    z-index: 1;
}

.satisfy-client-image.add-more{
	width: 42px;
	height: 42px;
	background-color: var(--accent-color);
	display: flex;
	justify-content: center;
	align-items: center;
	transition: all 0.3s ease-in-out;
}

.satisfy-client-image.add-more i{
	font-size: 20px;
	color: var(--white-color);
}

.satisfy-client-image.add-more h3{
	color: var(--white-color);
	font-size: 16px;
	line-height: 1em;
}

.satisfy-client-content span i{
	color: var(--accent-color);
}

.satisfy-client-image:first-child{
	margin: 0;
}

.satisfy-client-image figure{
	display: block;
}

.satisfy-client-image figure img{
	width: 100%;
    max-width: 40px;
    border-radius: 50%;
}

.about-us-contant .section-footer-text{
	border-top: 1px solid var(--divider-color);
	padding-top: 40px;
	margin-top: 40px;
	justify-content: left;
}

/************************************/
/*** 	06. Our Services css      ***/
/************************************/

.our-services{
	background-repeat: no-repeat;
	background-position: bottom center;	
	background-size: auto;
	padding: 120px 0 0 0;
}

.service-item{
	background-color: var(--white-color);
	border-radius: 10px;
	min-height: 415px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 30px;
	height: calc(100% - 30px);
	margin-bottom: 30px;
	transition: all 0.4s ease-in-out;
}

.service-item-body {
	padding: 40px;
}

.service-item:hover{
	transform: translateY(-5px);
}

.service-item .icon-box{
	position: relative;
	height: 100%;
	width: 100%;
	border-radius: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.4s ease-in-out;
	overflow: hidden;
}

.service-item .icon-box::before{
	content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: var(--accent-color);
    width: 100%;
    height: 100%;
    transform: rotate(180deg) scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.service-item:hover .icon-box::before{
	transform: rotate(0) scale(1);
}

.service-item .icon-box img{
	position: relative;
	width: 100%;
	max-width: 100%;
	transition: all 0.4s ease-in-out;
	z-index: 1;
	height: 250px;
	object-fit: cover;
}

.service-item:hover .icon-box img{
	filter: brightness(0) invert(1);
}

.service-item-contant h2{
	font-size: 20px;
}

.service-item-contant h2 a{
	color: inherit;
}

.service-item-contant p{
	margin: 15px 0 0;
}

.service-item-btn{
	border-top: 1px solid var(--divider-color);
	padding-top: 30px;
	margin-top: 30px;
}

.our-services-slider{
	position: relative;
}

.our-services-slider .swiper-slide{
	height: auto;
}

.our-services-slider .service-item{
	height: 100%;
	margin-bottom: 0;
}

.our-services-arrow{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background-color: var(--white-color);
	border: 1px solid var(--divider-color);
	color: var(--primary-color);
	font-size: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.3s ease-in-out;
	z-index: 3;
}

.our-services-arrow:hover{
	background-color: var(--accent-color);
	border-color: var(--accent-color);
	color: var(--white-color);
}

.our-services-arrow.swiper-button-disabled{
	opacity: 0.4;
	cursor: default;
}

.our-services-button-prev{
	left: -25px;
}

.our-services-button-next{
	right: -25px;
}

/************************************/
/*** 	   06b. Our Counter css     ***/
/************************************/

.our-counter{
	position: relative;
	padding: 120px 0 120px 0;
	overflow: hidden;
}

/* Kartu statistik bergaya laporan resmi: rata, tanpa gradien, angka sebagai fokus */
.counter-item{
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 18px;
	background-color: var(--white-color);
	border: 1px solid var(--divider-color);
	border-left: 3px solid var(--accent-color);
	border-radius: 8px;
	padding: 26px 24px;
	margin-bottom: 30px;
	height: calc(100% - 30px);
	transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.counter-item:hover{
	border-color: rgba(11, 92, 171, 0.35);
	border-left-color: var(--accent-color);
	box-shadow: 0 12px 30px rgba(32, 32, 32, 0.07);
}

.counter-item .icon-box{
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(11, 92, 171, 0.07);
	border: 1px solid rgba(11, 92, 171, 0.12);
}

.counter-item .icon-box i{
	font-size: 19px;
	color: var(--accent-color);
}

.counter-item-content h2{
	font-size: 36px;
	line-height: 1;
	margin: 0;
	font-weight: 700;
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
	color: var(--primary-color);
}

.counter-item-content p{
	margin: 10px 0 0;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.5em;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--text-color);
}

/* Varian kedua: penanda kiri teal agar tetap ada ritme antar kolom */
.counter-item-alt{
	border-left-color: var(--accent-secondary-color);
}

.counter-item-alt:hover{
	border-left-color: var(--accent-secondary-color);
	border-color: rgba(23, 176, 167, 0.35);
}

.counter-item-alt .icon-box{
	background-color: rgba(23, 176, 167, 0.08);
	border-color: rgba(23, 176, 167, 0.16);
}

.counter-item-alt .icon-box i{
	color: var(--accent-secondary-color);
}

/************************************/
/*** 	  07. Our Journey css     ***/
/************************************/

.our-journey{
	padding: 120px 0;
}

.skills-progress-bar{
	margin-bottom: 30px;
}

.skills-progress-bar:last-child{
	margin-bottom: 0;
}

.journey-content-skillbar .skills-progress-bar .skill-data .skill-title,
.journey-content-skillbar .skills-progress-bar .skill-data .skill-no{
	font-size: 20px;
	font-weight: 600;
}

.journey-content-body-list{
	margin-top: 40px;
}

.journey-content-body-list ul{
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.journey-content-body-list ul li{
	position: relative;
	width: calc(50% - 10px);
	line-height: 1.5em;
	padding-left: 25px;
}

.journey-content-body-list ul li:before{
	content: '\f058';
    position: absolute;
    font-family: 'Font Awesome 7 Free';
    font-size: 18px;
    font-weight: 900;
    color: var(--accent-color);
    top: 0;
    left: 0;
}

.journey-footer{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px 40px;
	border-top: 1px solid var(--divider-color);
	margin-top: 40px;
	padding-top: 40px;
}

.about-us-contact-box{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 15px;
}

.about-us-contact-box .icon-box{
    position: relative;
    background: var(--accent-secondary-color);
    border-radius: 5px;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
	transition: all 0.4s ease-in-out;
	overflow: hidden;
}

.about-us-contact-box .icon-box::before{
	content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: var(--accent-color);
    width: 100%;
    height: 100%;
    transform: rotate(180deg) scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.about-us-contact-box:hover .icon-box::before{
    transform: rotate(0) scale(1);
}

.about-us-contact-box .icon-box img{
    position: relative;
    width: 100%;
    max-width: 26px;
	transition: all 0.4s ease-in-out;
	z-index: 1;
}

.about-us-contact-box:hover .icon-box img{
	filter: brightness(0) invert(1);
}

.about-us-conatct-content{
	width: calc(100% - 65px);
}

.about-us-conatct-content h3{
	font-size: 20px;
	line-height: normal;
}

.about-us-conatct-content p{
	margin: 5px 0 0;
}

.about-us-conatct-content p a{
	color: inherit;
    transition: all 0.4s ease-in-out;
}

.about-us-conatct-content p a:hover{
	color: var(--accent-color);
}

.journey-image-box{
	position: relative;
	margin-left: 15px;
}

.journey-image figure{
	display: block;
	border-radius: 5px;
}

.journey-image img{
	width: 100%;
	aspect-ratio: 1 / 1.025;
	object-fit: cover;
	border-radius: 5px;
}

.journey-counter-list{
	position: absolute;
	right: 10px;
	bottom: 10px;
	background-color: var(--white-color);
	border-radius: 5px;
	padding: 20px;
	z-index: 2;
}

.journey-counter-item{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 15px;
	border-bottom: 1px solid var(--divider-color);
	margin-bottom: 20px;
	padding-bottom: 20px;
}

.journey-counter-item:last-child{
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: none;
}

.journey-counter-item .icon-box{
    position: relative;
    background: var(--accent-color);
    border-radius: 5px;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
	transition: all 0.4s ease-in-out;
	overflow: hidden;
}

.journey-counter-item .icon-box::before{
	content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: var(--primary-color);
    width: 100%;
    height: 100%;
    transform: rotate(180deg) scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.journey-counter-item:hover .icon-box::before{
    transform: rotate(0) scale(1);
}

.journey-counter-item .icon-box img{
    position: relative;
    width: 100%;
    max-width: 24px;
	z-index: 1;
}

.journey-counter-item-content{
	width: calc(100% - 65px);
}

.journey-counter-item-content h2{
	font-size: 30px;
}

.journey-counter-item-content p{
	margin: 5px 0 0;
}

/************************************/
/***   08. Our Departments css    ***/
/************************************/

.our-departments{
	padding: 120px 0 0;
	margin-bottom: 250px;
}

.departments-tab-box{
	margin-bottom: -250px;
}

.departments-nav{
	margin-bottom: 80px;
}

.departments-nav .nav-tabs{
	max-width: 950px;
	padding: 0;
	margin: 0 auto;
	list-style: none;
	display: flex;
	justify-content: center;
	gap: 30px;
	border: none;
}

.departments-nav ul li{
	width: calc(33.33% - 20px);
}

.departments-nav ul li .nav-link{
	position: relative;
	width: 100%;
	display: flex;
    align-items: center;
	gap: 15px;
	border: none;
	font-size: 20px;
	font-weight: 600;
    line-height: 1.2em;
	color: var(--white-color);
	background: transparent;
	border: 1px solid var(--dark-divider-color);
	border-radius: 10px;
	padding: 19px 20px;
	overflow: hidden;
	transition: all 0.4s ease-in-out;
}

.departments-nav ul li .nav-link.active,
.departments-nav ul li .nav-link:hover{
	color: var(--primary-color);
	border-color: var(--dark-divider-color);
	background: var(--accent-secondary-color);
}

.departments-nav ul li .nav-link .icon-box{
	height: 40px;
	width: 40px;
	background-color: var(--accent-color);
	border-radius: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.departments-nav ul li .nav-link .icon-box img{
	width: 100%;
	max-width: 20px;
	transition: all 0.3s ease-in-out;
}

.departments-item{
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	border-radius: 10px;
	padding: 10px;
	overflow: hidden;
}

.departments-item-image{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.departments-item-image figure{
	display: block;
	height: 100%;
}

.departments-item-image img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 10px;
}

.departments-video-box{
	align-content: center;
	text-align: center;
	width: calc(100% - 470px);
	z-index: 2;
}

.departments-item-content-box{
	position: relative;
	width: 100%;
	max-width: 440px;
	background-color: var(--white-color);
	border-radius: 10px;
	padding: 40px;
	z-index: 2;
}

.video-play-button{
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 15px;
	z-index: 1;
}

.video-play-button a{
	position: relative;
	height: 70px;
	width: 70px;
	background: var(--accent-secondary-color);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: none;
	transition: all 0.3s ease-in-out;
}

.video-play-button:hover a{
	background: var(--secondary-color);
}

.video-play-button a.bg-effect:before,
.video-play-button a.bg-effect:after{
	content: '';
	position: absolute;
	top: -22%;
    left: -22%;
    width: 100%;
    height: 100%;
    border: 50px solid var(--primary-color);
	opacity: 50%;
	border-radius: 50%;
	transform: scale(0.6);
	z-index: -1;
	animation: border-zooming 1.2s infinite linear;
}

.video-play-button a.bg-effect:after{
	animation-delay: .3s;
}

@keyframes border-zooming{
	100%{
		transform: scale(1);
		opacity: 0;
	}
}

.video-play-button a i{
	font-size: 22px;
	color: var(--primary-color);
	transition: all 0.3s ease-in-out;
}

.departments-item-content-title{
	border-bottom: 1px solid var(--divider-color);
	margin-bottom: 40px;
	padding-bottom: 40px;
}

.departments-item-content-title h3{
	font-size: 28px;
}

.recent-documents-item{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
	border-bottom: 1px solid var(--divider-color);
	margin-bottom: 30px;
	padding-bottom: 30px;
}

.recent-documents-item:last-child{
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: none;
}

.recent-documents-item-content{
	width: calc(100% - 60px);
}

.recent-documents-item-content p{
	margin: 0;
}

.recent-documents-item-content h3{
	font-size: 20px;
	margin: 5px 0 0;
}

.recent-documents-item-content h3 a{
	color: inherit;
}

.recent-documents-download-btn a{
	width: 40px;
	height: 40px;
	background-color: var(--accent-color);
	border-radius: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.4s ease-in-out;
}

.recent-documents-download-btn a:hover{
	background-color: var(--primary-color);
}

.recent-documents-download-btn a img{
	width: 100%;
	max-width: 20px;
}

/************************************/
/***     09. Our Awards css       ***/
/************************************/

.our-awards{
	padding: 120px 0;
	background-image: url('../images/section-bg-image-3.png');
	background-position: bottom center;
	background-repeat: no-repeat;
	background-size: auto;
}

.award-item{
	background-color: var(--secondary-color);
	border-radius: 10px;
	text-align: center;
	height: calc(100% - 30px);
	margin-bottom: 30px;
	padding: 40px;
	transition: all 0.4s ease-in-out;
	overflow: hidden;
}

.award-item:hover{
	transform: translateY(-5px);
}

.award-item-image{
	margin-bottom: 40px;
}

.award-item-image figure{
	display: inline-block;
	border-radius: 50%;
	max-width: 100px;
	margin: 0 auto;
}

.award-item-image img{
	width: 100%;
	height: 100%;
	border-radius: 50%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.award-item-title{
	max-width: 270px;
	margin:  0 auto;
	margin-bottom: 40px;
}

.award-item-title h3{
	font-size: 20px;
	line-height: 1.3em;
}

.award-sponsor-content{
	position: relative;
	margin-bottom: 30px;
}

.award-sponsor-content::before{
	content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
	background-color: var(--divider-color);
    width: calc(100% + 80px);
    height: 1px;
	left: -40px;
}

.award-sponsor-content p{
	position: relative;
	display: inline-block;
	color: var(--primary-color);
	font-size: 14px;
	font-weight: 500;
	line-height: normal;
	background-color: var(--white-color);
	border-radius: 10px;
	padding: 12px 25px;
	margin: 0;
	transition: all 0.4s ease-in-out;
	z-index: 1;
}

.award-item:hover .award-sponsor-content p{
	background-color: var(--primary-color);
	color: var(--white-color);
}

.award-item-content p{
	margin: 0;
}

/************************************/
/***   10. Our Activities css     ***/
/************************************/

.our-activities{
	background-image: url('../images/section-bg-image-2.png');
	background-position: bottom center;
	background-repeat: no-repeat;
	background-size: auto;
	padding: 120px 0;
}

.activities-slider .swiper-wrapper{
    cursor: none;
}

.activities-item-image{
	margin-bottom: 20px;
}

.activities-item-image a{
	cursor: none;
}

.activities-item-image figure{
	display: block;
	border-radius: 10px;
}

.activities-item-image img{
	width: 100%;
	aspect-ratio: 1 / 1.155;
	object-fit: cover;
	border-radius: 10px;
	transition: all 0.6s ease-in-out;
}

.activities-item:hover .activities-item-image img{
	transform: scale(1.06);
}

.activities-item-content{
	text-align: center;
}

.activities-item-content h2{
	color: var(--white-color);
	font-size: 20px;
}

.activities-item-content h2 a{
	color: inherit;
}

.activities-slider .activities-pagination{
	text-align: center;
	margin-top: 40px;
}

.activities-slider .activities-pagination .swiper-pagination-bullet{
    position: relative;
    height: 6px;
    width: 6px;
    background: var(--secondary-color);
    margin: 0 3px;
	transition: all 0.3s ease-in-out;
}

.activities-slider .activities-pagination .swiper-pagination-bullet:before{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 0;
    width: 0;
    border-radius: 50%;
	transition: all 0.3s ease-in-out;
}

.activities-slider .activities-pagination .swiper-pagination-bullet-active{
	background: var(--accent-secondary-color);
    width: 14px;
    border-radius: 100px;
}

.our-activities .section-footer-text{
	margin-top: 40px;
}

/************************************/
/***   11. Our Testimonials css   ***/
/************************************/

.our-testimonials{
	background-image: url('../images/testimonial-bg-image.png');
	background-repeat: no-repeat;
	background-position: right -300px center;
	background-size: auto;
	padding: 120px 0;
}

.testimonial-image-box{
	position: relative;
	height: 100%;
	margin-right: 15px;
}

.testimonial-image{
	height: 100%;
}

.testimonial-image figure{
	display: block;
	height: 100%;
	border-radius: 10px;
}

.testimonial-image figure img{
	width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    aspect-ratio: 1 / 1.02;
}

.testimonial-client-box{
	position: absolute;
	bottom: 20px;
	right: 20px;
	left: 20px;
	border-radius: 100px;
	background-color: var(--white-color);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	padding: 10px 10px 10px 25px;
	width: 300px;
	margin: 0 auto;
	z-index: 1;
}

.testimonial-client-heading h3{
	font-size: 16px;
}

.testimonial-slider .swiper-wrapper{
	cursor: none;
}

.testimonial-item{
	min-height: 485px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 40px;
	background-color: var(--secondary-color);
	border-radius: 10px;
	padding: 60px;
}

.testimonial-item-header{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 30px;
}

.testimonial-item-quote img{
	width: 100%;
	max-width: 40px;
}

.testimonial-item-rating i{
	color: var(--accent-secondary-color);
    font-size: 18px;
}

.testimonial-item-content{
	margin-top: 40px;
}

.testimonial-item-content p{
	margin: 0;
	font-size: 20px;
	font-weight: 600;
}

.testimonial-item-author{
	border-top: 1px solid var(--divider-color);
	padding-top: 40px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 15px;
}

.testimonial-author-image figure{
	display: block;
	border-radius: 50%;
}

.testimonial-author-image figure img{
	width: 100%;
    max-width: 50px;
    border-radius: 50%;
}

.testimonial-author-content h2{
	font-size: 20px;
}

.testimonial-author-content p{
	margin: 5px 0 0;
}

.testimonial-pagination.swiper-pagination-bullets{
	position: absolute;
	bottom: 80px;
	right: 60px;
	left: auto;
	text-align: right;
	z-index: 1;
}

.testimonial-pagination .swiper-pagination-bullet{
	border-radius: 100px;
	height: 8px;
	width: 8px;
	background: var(--divider-color);
	opacity: 1;
	margin: 0 3px;
	transition: all 0.3s ease-in-out;
}

.testimonial-pagination .swiper-pagination-bullet-active{
	width: 20px;
	background: var(--accent-color);
}

.testimonial-footer-box{
	margin-top: 60px;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
}

.testimonial-footer-image img{
	width: 100%;
	max-width: 60px;
}

.testimonial-footer-title p{
	margin: 0;
	font-size: 20px;
	font-weight: 600;
	color: var(--primary-color);
}

.testimonial-footer-body ul{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px 15px;
    padding: 0;
    margin: 15px 0 0;
    list-style: none;
}

.testimonial-footer-body ul i{
	color: var(--accent-color);
	font-size: 18px;
}

/************************************/
/***       12. Our Team css       ***/
/************************************/

.our-team{
	padding: 120px 0;
}

.team-item{
	position: relative;
	border-radius: 10px;
	height: calc(100% - 30px);
	margin-bottom: 30px;
	overflow: hidden;
}

.team-item-image a,
.team-item-image figure{
	cursor: none;
	display: block;
	border-radius: 10px;
}

.team-item-image img{
	width: 100%;
	aspect-ratio: 1 / 1.26;
	object-fit: cover;
	border-radius: 10px;
	transition: all 0.6s ease-in-out;
}
 
.team-item:hover .team-item-image img{
	transform: scale(1.06);
}

.team-item-body{
	position: absolute;
	right: 15px;
	bottom: 15px;
	left: 15px;
	background-color: var(--white-color);
	border-radius: 10px;
	padding: 0 30px 30px;
	z-index: 2;
}

.team-social-link{
	text-align: center;
	margin: -26px 0 20px 0;
}

.team-social-link a{
	height: 52px;
	width: 52px;
	color: var(--white-color);
	background-color: var(--accent-color);
	border: 6px solid var(--white-color);
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.team-social-link a i{
	color: inherit;
	font-size: 18px;
}

.team-social-link a img{
	width: 100%;
	max-width: 20px;
}

.team-social-icon{
	position: absolute;
	bottom: 100%;
	left: 40px;
	right: 40px;
	opacity: 0;
    transition: all 0.4s ease-in-out;
    z-index: 1;
}

.team-item:hover .team-social-icon{
	transform: translateY(-40px);
	opacity: 1;
}

.team-social-icon ul{
    list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 15px;
}

.team-social-icon ul li a{
	height: 36px;
	width: 36px;
	background-color: var(--accent-secondary-color);
	color: var(--primary-color);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: all 0.4s ease-in-out;
}

.team-social-icon ul li a:hover{
	background-color: var(--accent-color);
	color: var(--white-color);
}

.team-social-icon ul li a i{
    font-size: 18px;
	color: inherit;
}

.team-item-content{
	text-align: center;
}

.team-item-content h2{
	font-size: 20px;
}

.team-item-content h2 a{
	color: inherit;
}

.team-item-content p{
	margin: 10px 0 0;
}

/************************************/
/***       13. Our Faqs css       ***/
/************************************/

.our-faqs{
	padding: 120px 0;
}

.faqs-image-box{
	position: relative;
	height: 100%;
	margin-right: 15px;
}

.faqs-image{
	height: 100%;
}

.faqs-image figure{
	display: block;
	height: 100%;
	border-radius: 10px;
}

.faqs-image img{
	width: 100%;
	height: 100%;
    aspect-ratio: 1 / 1.141;
	object-fit: cover;
	border-radius: 10px;
}

.faqs-cta-box{
	position: absolute;
	bottom: 0;
	right: 0;
	width: 220px;
	background: var(--bg-color);
    border: 20px solid var(--bg-color);
	border-right: none;
	border-bottom: none;
    border-radius: 10px 0 10px 0;
	text-align: center;
    z-index: 1;
}

.faqs-cta-box::before,
.faqs-cta-box::after{
	content: '';
	position: absolute;
	width: 20px;
    height: 20px;
	mask: url('../images/image-corner-bg-shape.svg');
	-webkit-mask: url('../images/image-corner-bg-shape.svg');
	background-color: var(--bg-color);
	mask-repeat: no-repeat;
	mask-size: cover;
	transform: rotate(180deg);
	z-index: 1;
}

.faqs-cta-box::before{
	top: -40px;
	right: 0;
}

.faqs-cta-box::after{
	left: -40px;
	bottom: 0;
}

.faqs-cta-box-content{
	min-height: 200px;
	background-color: var(--accent-secondary-color);
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 20px;
	padding: 15px;
}

.faqs-cta-box-content h2{
	font-size: 20px;
}

.faqs-cta-box-content h3{
	font-size: 20px;
}

.faqs-cta-box-content h3 a{
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
	color: inherit;
	transition: all 0.3s ease-in-out;
}

.faqs-cta-box-content h3 a:hover{
	color: var(--accent-color);
}

.faqs-content{
	height: 100%;
	align-content: center;
}

.faq-accordion .accordion-item{
	background: var(--secondary-color);
	border-radius: 10px;
	margin-bottom: 20px;
    padding: 0;
	overflow: hidden;
}

.faq-accordion .accordion-item:last-child{
	margin-bottom: 0;
}

.faq-accordion .accordion-header .accordion-button{
	font-size: 18px;
	font-weight: 600;
	line-height: 1.333em;
    background-color: transparent;
    color: var(--primary-color);
    padding: 23px 60px 23px 20px;
	transition: all 0.3s ease-in-out;
}

.faq-accordion .accordion-item .accordion-button::after, 
.faq-accordion .accordion-item .accordion-button.collapsed::after{
    content: '\f0fe';
    font-family: 'FontAwesome';
    position: absolute;
	right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 30px;
	color: var(--accent-color);
    transition: all 0.3s ease-in-out;
}

.faq-accordion .accordion-button:not(.collapsed)::after{
    content: '\f146';
}

.faq-accordion .accordion-item .accordion-body{
	border-top: 1px solid var(--divider-color);
    padding: 23px 20px;
}

.faq-accordion .accordion-item .accordion-body p{
	margin: 0;
}

/************************************/
/***       14. Cta Box css        ***/
/************************************/

.cta-box{
	background: transparent;
	overflow: hidden;
}

.cta-box .container-fluid{
	padding: 0;
}

.our-cta-box{
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	justify-content: space-between;
	gap: 30px;
	padding: 60px;
	overflow: hidden;
}

.cta-image{
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
}

.cta-image figure{
	display: block;
	height: 100%;
}

.cta-image figure img{
	height: 100%;
	width: 100%;
	object-fit: cover;
}

.cta-contact-box{
	position: relative;
	max-width: 800px;
	background: var(--white-color);
	border-radius: 10px;
	padding: 3.125vw;
	z-index: 1;
}

.cta-form .form-control{
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5em;
	color: var(--primary-color);
	background: var(--secondary-color);
	border: none;
	border-radius: 12px;
	padding: 18px 20px;
	box-shadow: none;
	outline: none;
}

.cta-form .form-control::placeholder{
	color: var(--text-color);
}

/************************************/
/***       15. Our Blog css       ***/
/************************************/

.our-blog{
	padding: 120px 0 90px;
	background-color: #f5f5f5;
}

.post-item{
	height: calc(100% - 30px);
	margin-bottom: 30px;
}

.post-featured-image{
	margin-bottom: 20px;
}

.post-featured-image a,
.post-featured-image figure{
	display: block;
	border-radius: 10px;
    cursor: none;
    overflow: hidden;
}

.post-featured-image img{
	width: 100%;
    aspect-ratio: 1 / 0.745;
    object-fit: cover;
    transition: all 0.6s ease-in-out;
}

.post-item:hover .post-featured-image img{
	transform: scale(1.06);
}

.post-item-content{
	border-bottom: 1px solid var(--divider-color);
	margin-bottom: 20px;
	padding-bottom: 20px;
}

.post-item-content p {
	margin: 20px 0;
}

.post-item-content h2{
    font-size: 15px;
	line-height: 1.4em;
}

.post-item-content h2 a{
    color: inherit;
}

/************************************/
/***        16. Footer css        ***/
/************************************/

.main-footer{
	background-color: var(--primary-color);
	padding: 100px 0 0;
}

.footer-logo img{
	width: 100%;
	max-width: 152px;
}

.about-footer-content{
	margin-top: 30px;
}

.about-footer-content p{
	color: var(--white-color);
	margin-bottom: 0;
}

.about-footer-btn{
	margin-top: 40px;
}

.about-footer-btn .readmore-btn{
	color: var(--white-color);
}

.about-footer-btn .readmore-btn:hover{
	color: var(--accent-secondary-color);
}

.footer-content-box{
	border-left: 1px solid var(--dark-divider-color);
	padding-left: 3.646vw;
	margin-left: 3.646vw;
}

.footer-content-box-title{
	border-bottom: 1px solid var(--dark-divider-color);
	margin-bottom: 60px;
	padding-bottom: 60px;
}

.footer-content-box-title h2{
	color: var(--white-color);
	font-size: 28px;
}

.footer-content-box-body{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 30px;
}

.footer-contact-list{
	max-width: 40%;
}

.footer-contact-list ul{
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-contact-list ul li{
	color: var(--white-color);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.4em;
	border-bottom: 1px solid var(--dark-divider-color);
	margin-bottom: 25px;
	padding-bottom: 25px;
}

.footer-contact-list ul li:last-child{
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: none;
}

.footer-contact-list ul li a{
	color: inherit;
	transition: all 0.4s ease-in-out;
}

.footer-contact-list ul li a:hover{
	color: var(--accent-secondary-color);
}

.footer-newsletter-box{
	max-width: 48%;
}

.footer-newsletter-form .form-group{
	display: flex;
	background-color: var(--dark-divider-color);
    backdrop-filter: blur(50px);
    -webkit-backdrop-filter: blur(50px);
	border-radius: 10px;
	padding: 5px;
}

.footer-newsletter-form .form-group .form-control{
	width: calc(100% - 50px);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5em;
	color: var(--white-color);
	background: transparent;
	border: none;
	border-radius: 0;
	outline: none;
	box-shadow: none;
	padding: 6px 15px;
}

.footer-newsletter-form .form-group .form-control::placeholder{
	color: var(--white-color);
	opacity: 40%;
}

.footer-newsletter-form .form-group .newsletter-btn{
	width: 50px;
	height: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--accent-secondary-color);
    color: var(--primary-color);
	border: none;
	border-radius: 10px;
	transition: all 0.3s ease-in-out;
}

.footer-newsletter-form .form-group .newsletter-btn:hover{
	background-color: var(--white-color);
}

.footer-newsletter-form .form-group .newsletter-btn i{
    font-size: 24px;
	color: inherit;
	transition: all 0.4s ease-in-out;
}

.footer-newsletter-content{
	margin-top: 20px;
}

.footer-newsletter-content p{
	color: var(--white-color);
	margin: 0;
}

.footer-social-links{
	margin-top: 40px;
}

.footer-social-links ul{
	display: flex;
	flex-wrap: wrap;
	gap: 15px 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-social-links ul li a{
	display: inline-block;
	color: var(--white-color);
	font-weight: 500;
	line-height: normal;
	border: 1px solid var(--white-color);
	border-radius: 100px;
	padding: 5px 12px;
	transition: all 0.4s ease-in-out;
}

.footer-social-links ul li a:hover{
	color: var(--primary-color);
	background-color: var(--white-color);
}

.footer-copyright{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	border-top: 1px solid var(--dark-divider-color);
	margin-top: 60px;
	padding: 60px 0;
}

.footer-copyright-text p{
	color: var(--white-color);
	margin-bottom: 0;
}

.footer-menu ul{
	display: flex;
	flex-wrap: wrap;
	gap: 5px 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-menu ul li{
	position: relative;
	font-weight: 500;
	line-height: 1.5em;
	color: var(--white-color);
}

.footer-menu ul li a{
	color: inherit;
	transition: all 0.3s ease-in-out;
}

.footer-menu ul li a:hover{
	color: var(--accent-secondary-color);
}

/************************************/
/***    17. About Us Page css     ***/
/************************************/


.page-header{
	position: relative;
	background: url('../images/page-header-bg.jpg') no-repeat;
	background-position: top center;
	background-size: cover;
	padding-top: 80px;
	overflow: visible;
	height: 350px;
	z-index: 3;
}

.page-header > .container{
	position: relative;
	z-index: 2;
	height: 100%;
}

.page-header .row{
	height: 100%;
}

.page-header:before{
	content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
	/* Sama dengan overlay banner Beranda (.hero-slide::before). */
	background:
		linear-gradient(180deg, rgba(6, 38, 72, 0.55) 0%, rgba(6, 38, 72, 0) 40%),
		linear-gradient(90deg, rgba(11, 92, 171, 0.92) 0%, rgba(11, 92, 171, 0.75) 45%, rgba(23, 176, 167, 0.55) 100%);
    width: 100%;
    height: 100%;
	z-index: 1;
}

.page-header-box{
	position: static;
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
	text-align: left;
}

.page-header-box h1,
.page-header-box .page-header-title{
	display: inline-block;
	font-size: 50px;
	font-weight: 600;
    line-height: 1.2em;
	color: var(--white-color);
	margin-bottom: 0;
	cursor: none;
}

/* Breadcrumb floats at the header bottom-right on desktop.
   Targets the <nav> so it works whether it sits in .page-header-box or .bradcrumbs. */
.page-header .bradcrumbs{
	position: static;
}

.page-header nav{
	position: absolute;
	right: calc(var(--bs-gutter-x, 1.5rem) / 2);
	bottom: -10px;
	left: auto;
	z-index: 3;
	max-width: calc(100% - var(--bs-gutter-x, 1.5rem));
}

/* Chevron / arrow-step stepper */
.page-header ol.breadcrumb{
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 6px;
	margin: 0;
	padding: 0;
	background: transparent;
	border-radius: 0;
	box-shadow: none;
	/* floating shadow that follows each arrow silhouette */
	filter: drop-shadow(0 14px 26px rgba(32, 32, 32, 0.28));
}

.page-header ol li.breadcrumb-item{
	display: inline-flex;
	align-items: center;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.35em;
	text-transform: capitalize;
	color: var(--white-color);
	background: var(--accent-color);
	padding: 12px 34px 12px 26px;
	clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 14px 50%);
	transition: filter 0.3s ease-in-out;
	max-width: 100%;
	word-break: break-word;
}

/* Check-circle icon before each label (injected via CSS, no markup change) */
/* !important overrides the global divider-reset at the bottom of this file */
.page-header ol li.breadcrumb-item::before{
	content: '\f058' !important;
	font-family: 'Font Awesome 7 Free';
	font-weight: 900;
	font-size: 15px;
	margin-right: 9px;
	padding: 0;
	color: var(--accent-secondary-color);
	float: none;
}

/* First step: flat left edge (no incoming notch) */
.page-header ol li.breadcrumb-item:first-child{
	padding-left: 22px;
	clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
}

.page-header ol li.breadcrumb-item a{
	color: inherit;
}

/* Parent (passed) steps — subtle hover feedback */
.page-header ol li.breadcrumb-item:not(.active):hover{
	filter: brightness(0.92);
}

/* Current page (active) — muted / lighter step, like the reference */
.page-header ol li.breadcrumb-item.active{
	background: color-mix(in srgb, var(--accent-color) 48%, #ffffff);
	color: var(--white-color);
	font-weight: 600;
}

.page-header ol li.breadcrumb-item.active::before{
	color: var(--white-color);
	opacity: 0.9;
}

.our-approach{
	padding: 120px 0;
	background-image: url('../images/section-bg-image-1.png');
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size: auto;
}

.approach-item{
	position: relative;
	background-color: var(--white-color);
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 30px;
	min-height: 370px;
	height: calc(100% - 30px);
	margin-bottom: 30px;
	padding: 40px;
	overflow: hidden;
}

.approach-cta-item-header h3{
	font-size: 20px;
}

.approach-cta-item-body{
	border-top: 1px solid var(--divider-color);
	padding-top: 40px;
}

.approach-cta-item-body .satisfy-client-images{
	justify-content: start;
}

.approach-cta-counter-item{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 15px;
	margin-top: 30px;
}

.approach-cta-counter-item-no h4{
	width: 75px;
	font-size: 40px;
}

.approach-cta-counter-item-content{
	width: calc(100% - 90px);
}

.approach-cta-counter-rating i{
	color: var(--accent-color);
}

.approach-cta-counter-item-content p{
	margin: 15px 0 0;
}

.approach-item .icon-box{
	position: relative;
	height: 60px;
	width: 60px;
	border-radius: 5px;
	background-color: var(--accent-secondary-color);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.4s ease-in-out;
	overflow: hidden;
}

.approach-item .icon-box::before{
	content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: var(--accent-color);
    width: 100%;
    height: 100%;
    transform: rotate(180deg) scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.approach-item:hover .icon-box::before{
	transform: rotate(0) scale(1);
}

.approach-item .icon-box img{
	position: relative;
	width: 100%;
	max-width: 30px;
	transition: all 0.4s ease-in-out;
	z-index: 1;
}

.approach-item:hover .icon-box img{
	filter: brightness(0) invert(1);
}

.approach-item-contant h3{
	font-size: 20px;
}

.approach-item-contant p{
	margin: 10px 0 0;
}

.approach-service-item-image{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	height: 100%;
	width: 100%;
}

.approach-service-item-image img{
	height: 100%;
	width: 100%;
	object-fit: cover;
	filter: brightness(50%);
}

.approach-item-contant{
	position: relative;
	z-index: 1;
}

.approach-service-item .approach-item-contant h3,
.approach-service-item .approach-item-contant p,
.approach-service-item-btn a{
	color: var(--white-color);
}

.our-story{
	position: relative;
	background-image: url('../images/our-story-bg-image.jpg');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	align-content: end;
	min-height: 46.875vw;
	padding: 120px 0;
	overflow: hidden;
}

.our-story:before{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.80) 100%);
	height: 100%;
	width: 100%;
	z-index: 1;
}

.our-story .container{
	position: relative;
	z-index: 2;
}

.our-story-box{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.our-story-box .section-title{
    max-width: 600px;
    margin: 0;
}

.our-story-button.video-play-button{
	margin-right: 30px;
}

.our-story-button.video-play-button a{
	width: 85px;
	height: 85px;
}

.our-story-button.video-play-button a.bg-effect:before,
.our-story-button.video-play-button a.bg-effect:after{
	border: 61px solid var(--white-color);
}

.our-story-button.video-play-button a i{
	font-size: 24px;
}

.our-progress{
	padding: 120px 0;
}

.progress-image-box{
	position: relative;
	height: 100%;
}

.progress-image{
	height: 100%;
}

.progress-image figure{
	display: block;
	height: 100%;
	border-radius: 10px;
}

.progress-image img{
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 0.955;
	object-fit: cover;
	border-radius: 10px;
}

.opening-hour-box{
	position: absolute;
	bottom: 40px;
	left: 40px;
	background-color: var(--divider-color);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 10px;
	padding: 20px;
}

.opening-hour-box h3{
	font-size: 20px;
	color: var(--white-color);
	margin-bottom: 20px;
}

.opening-hour-box ul{
	list-style: disc;
	margin: 0;
	padding: 0 0 0 20px;
}

.opening-hour-box ul li{
	color: var(--white-color);
	line-height: 1.5em;
	margin-bottom: 10px;
}

.opening-hour-box ul li:last-child{
	margin-bottom: 0;
}

.progress-content{
	height: 100%;
	align-content: center;
	margin-left: 15px;
}

.progress-body{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}

.progress-body-item{
	width: calc(50% - 15px);
	background-color: var(--secondary-color);
	border-radius: 10px;
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	padding: 30px;
}

.progress-body-item .icon-box{
	position: relative;
	height: 50px;
	width: 50px;
	border-radius: 5px;
	background-color: var(--accent-secondary-color);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.4s ease-in-out;
	overflow: hidden;
}

.progress-body-item .icon-box::before{
	content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: var(--accent-color);
    width: 100%;
    height: 100%;
    transform: rotate(180deg) scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.progress-body-item:hover .icon-box::before{
	transform: rotate(0) scale(1);
}

.progress-body-item .icon-box img{
	position: relative;
	width: 100%;
	max-width: 24px;
	transition: all 0.4s ease-in-out;
	z-index: 1;
}

.progress-body-item:hover .icon-box img{
	filter: brightness(0) invert(1);
}

.progress-body-item-content{
	width: calc(100% - 65px);
}

.progress-body-item-content h3{
	font-size: 20px;
}

.progress-body-item-content p{
	margin: 5px 0 0;
}

.progress-body-item-content p a{
	color: inherit;
	transition: all 0.4s ease-in-out;
}

.progress-body-item-content p a:hover{
	color: var(--primary-color);
}

.progress-body-list{
	margin-top: 30px;
}

.progress-body-list ul{
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.progress-body-list ul li{
	position: relative;
	width: calc(50% - 10px);
	line-height: 1.5em;
	padding-left: 25px;
}

.progress-body-list ul li:before{
	content: '\f058';
    position: absolute;
    font-family: 'Font Awesome 7 Free';
    font-size: 18px;
    font-weight: 900;
    color: var(--accent-color);
    top: 0;
    left: 0;
}

.progress-footer{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px 30px;
	margin-top: 40px;
}

.author-signature img{
	width: 100%;
	max-width: 200px;
}

.our-benefits{
	background-image: url(../images/section-bg-image-2.png);
    background-position: bottom center;
    background-repeat: no-repeat;
    background-size: auto;
	padding: 120px 0;
}

.benefits-items-list{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}

.benefits-item{
	width: calc(50% - 15px);
	background-color: var(--dark-divider-color);
    border-radius: 10px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
	padding: 30px;
}

.benefits-item .icon-box{
	position: relative;
	height: 50px;
	width: 50px;
	border-radius: 5px;
	background-color: var(--accent-secondary-color);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 40px;
	transition: all 0.4s ease-in-out;
	overflow: hidden;
}

.benefits-item .icon-box::before{
	content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: var(--accent-color);
    width: 100%;
    height: 100%;
    transform: rotate(180deg) scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.benefits-item:hover .icon-box::before{
	transform: rotate(0) scale(1);
}

.benefits-item .icon-box img{
	position: relative;
	width: 100%;
	max-width: 24px;
	transition: all 0.4s ease-in-out;
	z-index: 1;
}

.benefits-item:hover .icon-box img{
	filter: brightness(0) invert(1);
}

.benefits-item-content h3{
	color: var(--white-color);
	font-size: 20px;
}

.benefits-item-content p{
	color: var(--white-color);
	margin: 10px 0 0;
}

.benefits-footer{
	margin-top: 40px;
}

.benefits-footer .skills-progress-bar .skill-data .skill-title,
.benefits-footer .skills-progress-bar .skill-data .skill-no{
	color: var(--white-color);
	font-size: 20px;
}

.benefits-footer .skills-progress-bar .skillbar .skill-progress{
	background: var(--dark-divider-color);
}

.benefits-footer .skills-progress-bar .skillbar .skill-progress .count-bar{
	background: var(--accent-secondary-color);
}

.benefits-image{
	text-align: center;
	margin-left: 15px;
}

.benefits-image figure{
	position: relative;
	display: block;
	padding: 0 4.167vw;
	border-radius: 10px;
}

.benefits-image figure:before{
	content: '';
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 80%;
	border-radius: 10px;
	background: linear-gradient(180deg, transparent 0%, var(--dark-divider-color) 100%);
	backdrop-filter: blur(10px);
}

.benefits-image img{
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1.538;
	object-fit: cover;
	border-radius: 10px 10px 0 0;
	z-index: 1;
}

/************************************/
/***    18. Services Page css     ***/
/************************************/

.page-services{
	padding: 120px 0 90px;
}

.page-services .service-item{
	background-color: var(--secondary-color);
}

/************************************/
/***    19. Service Single css    ***/
/************************************/

.page-service-single{
	padding: 120px 0;
}

.page-single-sidebar{
	position: sticky;
	top: 30px;
	margin-right: 15px;
}

.page-category-list{
	background: var(--secondary-color);
	border-radius: 10px;
    margin-bottom: 60px;
	overflow: hidden;
}

.page-category-list .page-category-list-title{
	font-size: 20px;
	line-height: 1.4em;
	color: var(--white-color);
	background: var(--primary-color);
	padding: 18px 30px;
}

.page-category-list ul{
	list-style: none;
    margin: 0;
	padding: 30px;
}

.page-category-list ul li{
	line-height: 1.5em;
    border-bottom: 1px solid var(--divider-color);
    padding-bottom: 25px;
    margin-bottom: 25px;
}

.page-category-list ul li:last-child{
    border-bottom: none;
    margin: 0;
    padding: 0;
}

.page-category-list ul li a{
    position: relative;
    display: block;
    text-transform: capitalize;
	color: inherit;
    padding-right: 25px;
    transition: all 0.4s ease-in-out;
}

.page-category-list ul li a:hover{
    color: var(--primary-color);
}

.page-category-list ul li a::before{
	content: '';
    position: absolute;
    top: 50%;
    right: 0;
	background: url('../images/arrow-primary.svg') no-repeat;
	background-position: center center;
	background-size: cover;
    width: 20px;
    height: 20px;
	transform: translate(-2px, -50%);
    transition: all 0.4s ease-in-out;
}

.page-category-list ul li a:hover::before{
	transform: translate(0, -50%);
}

/* Kartu putih bertepi tipis; kotak ikon memakai gradasi footer versi solid. */
.sidebar-cta-box{
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 10px;
	padding: 30px;
	box-shadow: 0 14px 34px rgba(32, 32, 32, 0.08);
	overflow: hidden;
}

.sidebar-cta-box-header{
	border-bottom: 1px solid var(--divider-color);
	margin-bottom: 30px;
	padding-bottom: 30px;
}

.sidebar-cta-box-logo{
	margin-bottom: 30px;
}

.sidebar-cta-box-logo img{
	width: 100%;
	max-width: 152px;
}

.sidebar-cta-title h2{
	font-size: 20px;
	color: var(--primary-color);
}

.sidebar-cta-contact-item{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 15px;
	margin-bottom: 20px;
}

.sidebar-cta-contact-item:last-child{
	margin-bottom: 0;
}

.sidebar-cta-contact-item .icon-box{
	position: relative;
	height: 40px;
	width: 40px;
	border-radius: 5px;
	background: linear-gradient(120deg, #0B5CAB 0%, #0B5CAB 40%, #0E7F79 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.sidebar-cta-contact-item .icon-box::before{
	content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: var(--accent-color);
    width: 100%;
    height: 100%;
    transform: rotate(180deg) scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.sidebar-cta-contact-item:hover .icon-box::before{
	transform: rotate(0) scale(1);
}

.sidebar-cta-contact-item .icon-box img{
	position: relative;
	width: 100%;
	max-width: 20px;
	z-index: 1;
}

.sidebar-cta-contact-content{
	width: calc(100% - 55px);
}

.sidebar-cta-contact-content h3{
	font-size: 18px;
	font-weight: 400;
	color: var(--primary-color);
}

.sidebar-cta-contact-content h3 a{
	color: inherit;
	transition: all 0.3s ease-in-out;
}

.sidebar-cta-contact-content h3 a:hover{
	color: var(--accent-color);
}

.sidebar-cta-box-btn{
	margin-top: 40px;
}

.sidebar-cta-box-btn .btn-default{
	width: 100%;
	padding: 18px;
}

.page-single-image{
    margin-bottom: 30px;
}

.page-single-image figure{
    display: block;
    border-radius: 10px;
}

.page-single-image img{
    width: 100%;
    aspect-ratio: 1 / 0.6;
    object-fit: cover;
    border-radius: 10px;
}

.service-entry{
    margin-bottom: 60px;
}

.service-entry p{
    margin-bottom: 20px;
}

.service-entry h2{
	font-size: 48px;
    margin-bottom: 20px;
}

.service-entry h3{
	font-size: 20px;
	line-height: 1.3em;
	margin-bottom: 10px;
}

.service-entry p:last-child,
.service-entry h2:last-child,
.service-entry h3:last-child{
    margin: 0;
}

.service-entry ul{
    display: flex;
    flex-wrap: wrap;
    gap: 15px 20px;
	list-style: none;
	padding: 0;
	margin: 0;
}

.service-entry ul li{
    position: relative;
	width: calc(50% - 10px);
	line-height: 1.5em;
	padding-left: 25px;
}

.service-entry ul li::before{
	content: '\f058';
    position: absolute;
    font-family: 'Font Awesome 7 Free';
    font-size: 18px;
    font-weight: 900;
    color: var(--accent-color);
    top: 0;
    left: 0;
}

.service-features-box,
.service-access-box,
.service-complaint-box{
	margin-top: 60px;
}

.service-feature-image-content{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	margin-top: 40px;
}

.service-feature-image{
	width: calc(38% - 15px);
}

.service-feature-image figure{
	display: block;
	height: 100%;
	border-radius: 10px;
}

.service-feature-image img{
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 0.98;
	object-fit: cover;
	border-radius: 10px;
}

.service-feature-content{
	width: calc(62% - 15px);
}

.service-feature-items-list{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}

.service-feature-item{
	width: calc(50% - 15px);
	background: var(--secondary-color);
	border-radius: 10px;
	padding: 20px;
}

.service-feature-item-header{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 15px;
}

.service-feature-item-header .icon-box{
	position: relative;
	width: 50px;
	height: 50px;
	border-radius: 5px;
	background-color: var(--accent-secondary-color);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.4s ease-in-out;
	overflow: hidden;
}

.service-feature-item-header .icon-box::before{
	content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: var(--accent-color);
    width: 100%;
    height: 100%;
    transform: rotate(180deg) scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.service-feature-item:hover .service-feature-item-header .icon-box::before{
	transform: rotate(0) scale(1);
}

.service-feature-item-header .icon-box img{
	position: relative;
	width: 100%;
	max-width: 24px;
	transition: all 0.4s ease-in-out;
	z-index: 1;
}

.service-feature-item:hover .service-feature-item-header .icon-box img{
	filter: brightness(0) invert(1);
}

.service-feature-item-title{
	width: calc(100% - 65px);
}

.service-feature-item-content{
	border-top: 1px solid var(--divider-color);
	margin-top: 20px;
	padding-top: 20px;
}

.service-feature-item-content ul{
	list-style: disc;
	padding-left: 20px;
}

.service-feature-item-content ul li{
	padding: 0;
	width: 100%;
}

.service-feature-item-content ul li::before{
	display: none;
}

.service-feature-info-list{
	margin-top: 40px;
}

.service-feature-info-list ul li{
	width: 100%;
}

.service-access-image-content{
	position: relative;
	padding: 40px;
	margin-top: 40px;
}

.service-access-image{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	border-radius: 20px;
	overflow: hidden;
}

.service-access-image figure{
	display: block;
	height: 100%;	
}

.service-access-image img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.service-access-item-list{
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: 25px;
	z-index: 1;
}

.service-access-item{
	width: calc(33.33% - 16.67px);
	background: var(--divider-color);
	backdrop-filter: blur(30px);
	-webkit-backdrop-filter: blur(30px);
	padding: 20px;
	border-radius: 10px;
}

.service-access-item .icon-box{
	position: relative;
	width: 50px;
	height: 50px;
	border-radius: 5px;
	background-color: var(--accent-secondary-color);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.4s ease-in-out;
	overflow: hidden;
	margin-bottom: 30px;
}

.service-access-item .icon-box::before{
	content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: var(--accent-color);
    width: 100%;
    height: 100%;
    transform: rotate(180deg) scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.service-access-item:hover .icon-box::before{
	transform: rotate(0) scale(1);
}

.service-access-item .icon-box img{
	position: relative;
	width: 100%;
	max-width: 24px;
	transition: all 0.4s ease-in-out;
	z-index: 1;
}

.service-access-item:hover .icon-box img{
	filter: brightness(0) invert(1);
}

.service-access-item-content h3,
.service-access-item-content p{
	color: var(--white-color);
}

.service-complaint-list{
	margin-top: 40px;
}

/************************************/
/***   20. Departments Page css   ***/
/************************************/

.page-departments{
	padding: 120px 0 90px;
}

.page-departments .departments-item{
	background-color: var(--secondary-color);
	border-radius: 10px;
	padding: 30px;
	min-height: 400px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 20px;
	height: calc(100% - 30px);
	margin-bottom: 30px;
	transition: all 0.4s ease-in-out;
}

.page-departments .departments-item:hover{
	transform: translateY(-5px);
}

.departments-item-header .icon-box{
	position: relative;
	height: 50px;
	width: 50px;
	border-radius: 5px;
	background-color: var(--accent-secondary-color);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 30px;
	transition: all 0.4s ease-in-out;
	overflow: hidden;
}

.departments-item-header .icon-box::before{
	content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: var(--accent-color);
    width: 100%;
    height: 100%;
    transform: rotate(180deg) scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.departments-item:hover .departments-item-header .icon-box::before{
	transform: rotate(0) scale(1);
}

.departments-item-header .icon-box img{
	position: relative;
	width: 100%;
	max-width: 25px;
	transition: all 0.4s ease-in-out;
	z-index: 1;
}

.departments-item:hover .departments-item-header .icon-box img{
	filter: brightness(0) invert(1);
}

.departments-item-title h2{
	font-size: 20px;
}

.departments-item-title h2 a{
	color: inherit;
}

.departments-item-content{
	border-top: 1px solid var(--divider-color);
	padding-top: 20px;
}

.departments-item-content p{
	margin: 0;
}

/************************************/
/***   21. Department Single css  ***/
/************************************/

.page-department-single{
	padding: 120px 0;
}

.department-entry{
    margin-bottom: 60px;
}

.department-entry p{
    margin-bottom: 20px;
}

.department-entry h2{
	font-size: 48px;
    margin-bottom: 20px;
}

.department-entry h3{
	font-size: 20px;
	line-height: 1.4em;
	margin-bottom: 10px;
}

.department-entry p:last-child,
.department-entry h2:last-child,
.department-entry h3:last-child{
    margin: 0;
}

.department-highlighted-box{
	background: var(--secondary-color);
	border-left: 2px solid var(--accent-color);
	border-radius: 10px;
	padding: 30px;
	margin: 40px 0;
}

.department-responsibility-box,
.department-job-box{
	margin-top: 60px;
}

.department-responsibility-image-content{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	margin-top: 40px;
}

.department-responsibility-image,
.department-responsibility-items-list{
	width: calc(50% - 15px);
}

.department-responsibility-image figure{
	display: block;
	height: 100%;
	border-radius: 10px;
}

.department-responsibility-image img{
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1.3;
	object-fit: cover;
	border-radius: 10px;
}

.department-responsibility-item{
	background: var(--secondary-color);
	border-radius: 10px;
	margin-bottom: 30px;
	padding: 30px;
}

.department-responsibility-item:last-child{
	margin-bottom: 0;
}

.department-responsibility-item-header{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 15px;
	margin-bottom: 20px;
}

.department-responsibility-item-header .icon-box{
	position: relative;
	width: 40px;
	height: 40px;
	border-radius: 5px;
	background-color: var(--accent-secondary-color);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.4s ease-in-out;
	overflow: hidden;
}

.department-responsibility-item-header .icon-box::before{
	content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: var(--accent-color);
    width: 100%;
    height: 100%;
    transform: rotate(180deg) scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.department-responsibility-item:hover .department-responsibility-item-header .icon-box::before{
	transform: rotate(0) scale(1);
}

.department-responsibility-item-header .icon-box img{
	position: relative;
	width: 100%;
	max-width: 20px;
	transition: all 0.4s ease-in-out;
	z-index: 1;
}

.department-responsibility-item:hover .department-responsibility-item-header .icon-box img{
	filter: brightness(0) invert(1);
}

.department-responsibility-item-title{
	width: calc(100% - 55px);
}

.department-job-item-list{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	margin-top: 40px;
}

.department-job-item{
	width: calc(50% - 15px);
	background: var(--secondary-color);
	border-radius: 10px;
	padding: 30px;
}

.department-job-item .icon-box{
	position: relative;
	width: 50px;
	height: 50px;
	border-radius: 5px;
	background-color: var(--accent-secondary-color);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.4s ease-in-out;
	overflow: hidden;
	margin-bottom: 30px;
}

.department-job-item .icon-box::before{
	content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: var(--accent-color);
    width: 100%;
    height: 100%;
    transform: rotate(180deg) scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.department-job-item:hover .icon-box::before{
	transform: rotate(0) scale(1);
}

.department-job-item .icon-box img{
	position: relative;
	width: 100%;
	max-width: 24px;
	transition: all 0.4s ease-in-out;
	z-index: 1;
}

.department-job-item:hover .icon-box img{
	filter: brightness(0) invert(1);
}

/************************************/
/***    22. Blog Archive css      ***/
/************************************/

.page-blog{
	padding: 120px 0;
}

.page-pagination{
    margin-top: 30px;
    text-align: center;
}

.page-pagination ul{
    justify-content: center;
    padding: 0;
    margin: 0;
}

.page-pagination ul li a,
.page-pagination ul li span{
    display: flex;
    text-decoration: none;
    justify-content: center;
    align-items: center;
    background: var(--secondary-color);
    color: var(--primary-color);
	border-radius: 10px;
    width: 40px;
    height: 40px;
    margin: 0 5px;
    font-weight: 600;
	line-height: 1em;
    transition: all 0.3s ease-in-out;
}

.page-pagination ul li.active a, 
.page-pagination ul li a:hover{
    background: var(--accent-color);
	color: var(--white-color);
}

/************************************/
/***      23. Blog Single css     ***/
/************************************/

.page-single-post{
	padding: 120px 0;
}

.post-single-meta ol li{
	font-size: 18px;
	color: var(--white-color);
	margin-right: 15px;
}

.post-single-meta ol li:last-child{
	margin-right: 0;
}

.post-single-meta ol li i{
    font-size: 18px;
    color: var(--white-color);
    margin-right: 5px;
}

.post-image{
	position: relative;
	margin-bottom: 30px;
}

.post-image figure{
	display: block;	
	border-radius: 10px;
	overflow: hidden;
}

.post-image img{
	width: 100%;
	aspect-ratio: 1 / 0.50;
	object-fit: cover;
	border-radius: 10px;
}

.post-content{
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
}

.post-entry{
	border-bottom: 1px solid var(--divider-color);
	padding-bottom: 30px;
    margin-bottom: 30px;
}

.post-entry:after{
    content: '';
    display: block;
    clear: both;
}

.post-entry a{
    color: var(--accent-color);
}

.post-entry h1,
.post-entry h2,
.post-entry h3,
.post-entry h4,
.post-entry h5,
.post-entry h6{
	font-weight: 600;
	line-height: 1.2em;
	margin: 0 0 0.42em;
}

.post-entry h1{
	font-size: 60px;
}

.post-entry h2{
	font-size: 48px;
}

.post-entry h3{
	font-size: 40px;
}

.post-entry h4{
	font-size: 30px;
}

.post-entry h5{
	font-size: 24px;
}

.post-entry h6{
	font-size: 20px;
}

.post-entry p{
	margin-bottom: 20px;
}

.post-entry p:last-child{
	margin-bottom: 0;
}

.post-entry p strong{
	color: var(--primary-color);
	font-size: 18px;
	font-weight: 600;
}

.post-entry ol{
    margin: 0 0 30px;
}

.post-entry ul{
	padding: 0;
	margin: 20px 0 20px;
	padding-left: 20px;
}

.post-entry ol li,
.post-entry ul li{
    position: relative;
	font-size: 18px;
    font-weight: 400;
    line-height: 1.5em;
    color: var(--text-color);
    margin-bottom: 15px;
}

.post-entry ul li:last-child{
	margin-bottom: 0;
}

.post-entry ul ul,
.post-entry ul ol,
.post-entry ol ol,
.post-entry ol ul{
    margin-top: 20px;
    margin-bottom: 0;
}

.post-entry ul ul li:last-child,
.post-entry ul ol li:last-child,
.post-entry ol ol li:last-child,
.post-entry ol ul li:last-child{
    margin-bottom: 0;
}

.post-entry blockquote{
	background: var(--secondary-color) url('../images/icon-blockquote.svg');
	background-repeat: no-repeat;
	background-position: 30px 30px;
    background-size: 45px;
	border-radius: 10px;
    padding: 30px 30px 30px 90px;
    margin-bottom: 30px;
}

.post-entry blockquote p{
	font-size: 20px;
	font-weight: 600;
	line-height: 1.4em;
	color: var(--primary-color);
}

.post-entry blockquote p:last-child{
	margin-bottom: 0;
}

.tag-links{
    font-size: 20px;
	font-weight: 600;
    text-transform: capitalize;
	color: var(--primary-color);
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 15px;
}

.post-tags .tag-links a{
    display: inline-block;
    font-size: 16px;
    font-weight: 500;
    text-transform: capitalize;
    line-height: 1em;
	background: var(--accent-color);
    color: var(--white-color);
	border-radius: 5px;
    padding: 12px 20px;
	transition: all 0.4s ease-in-out;
}

.post-tags .tag-links a:hover{
	background: var(--primary-color);
	color: var(--white-color);
}

.post-social-sharing{
    text-align: right;
}

.post-social-sharing ul{
    list-style: none;
    padding: 0;
    margin: 0;
}

.post-social-sharing ul li{
    display: inline-block;
    margin-right: 10px;
}

.post-social-sharing ul li:last-child{
	margin-right: 0;
}

.post-social-sharing ul li a{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
	background: var(--accent-color);
    color: var(--white-color);
	border-radius: 5px;
    width: 40px;
    height: 40px;
    transition: all 0.4s ease-in-out;
}

.post-social-sharing ul li:hover a{
	background: var(--primary-color);
	color: var(--white-color);
}

.post-social-sharing ul li a i{
    font-size: 18px;
    color: inherit;
}

/************************************/
/***    24. Activities Page css   ***/
/************************************/

.page-activities{
	padding: 120px 0 90px;
}

.page-activities .activities-item{
	height: calc(100% - 30px);
	margin-bottom: 30px;
}

.page-activities .activities-item-content h2{
	color: var(--primary-color);
}

/************************************/
/***    25. Activity Single css   ***/
/************************************/

.page-activity-single{
	padding: 120px 0;
}

.activity-entry{
    margin-bottom: 60px;
}

.activity-entry p{
    margin-bottom: 20px;
}

.activity-entry h2{
	font-size: 48px;
    margin-bottom: 20px;
}

.activity-entry h3{
	font-size: 20px;
	line-height: 1.4em;
	margin-bottom: 10px;
}

.activity-entry p:last-child,
.activity-entry h2:last-child,
.activity-entry h3:last-child{
    margin: 0;
}

.activity-entry ul{
    display: flex;
    flex-wrap: wrap;
    gap: 15px 20px;
	list-style: none;
	padding: 0;
	margin: 0;
}

.activity-entry ul li{
    position: relative;
	width: calc(50% - 10px);
	line-height: 1.5em;
	padding-left: 25px;
}

.activity-entry ul li::before{
	content: '\f058';
    position: absolute;
    font-family: 'Font Awesome 7 Free';
    font-size: 18px;
    font-weight: 900;
    color: var(--accent-color);
    top: 0;
    left: 0;
}

.activity-purpose-box,
.activity-program-box,
.activity-support-box{
	margin-top: 60px;
}

.activity-purpose-list{
	margin-top: 40px;
}

.activity-program-content-box{
	margin-top: 40px;
}

.activity-program-item-list{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	border-bottom: 1px solid var(--divider-color);
	margin-bottom: 40px;
	padding-bottom: 40px;
}

.activity-program-item-list:last-child{
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

.activity-program-item{
	width: calc(50% - 15px);
}

.activity-program-item-header{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 15px;
	margin-bottom: 20px;
}

.activity-program-item-header .icon-box{
	position: relative;
	width: 40px;
	height: 40px;
	border-radius: 5px;
	background-color: var(--accent-secondary-color);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.4s ease-in-out;
	overflow: hidden;
}

.activity-program-item-header .icon-box::before{
	content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: var(--accent-color);
    width: 100%;
    height: 100%;
    transform: rotate(180deg) scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.activity-program-item:hover .activity-program-item-header .icon-box::before{
	transform: rotate(0) scale(1);
}

.activity-program-item-header .icon-box img{
	position: relative;
	width: 100%;
	max-width: 20px;
	transition: all 0.4s ease-in-out;
	z-index: 1;
}

.activity-program-item:hover .activity-program-item-header .icon-box img{
	filter: brightness(0) invert(1);
}

.activity-program-item-title{
	width: calc(100% - 55px);
}

.activity-support-item-list{
	margin-top: 40px;
}

.activity-support-item{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 15px 20px;
	margin-bottom: 40px;
}

.activity-support-item:last-child{
	margin-bottom: 0;
}

.activity-support-image figure{
	display: block;
	border-radius: 50%;
}

.activity-support-image img{
	width: 100%;
	max-width: 100px;
	border-radius: 50%;
}

.activity-support-item-content{
	width: calc(100% - 120px);
}

/************************************/
/***       26. Team Page css      ***/
/************************************/

.page-team{
	padding: 160px 0 90px;
}

/************************************/
/***      27. Team Single css     ***/
/************************************/

.page-team-single{
	padding: 120px 0;
}

.team-member-about{
	display: flex;
	flex-wrap: wrap;
	gap: 30px 60px;
}

.team-single-image-box,
.team-about-content{
	width: calc(50% - 30px);
}

.team-single-image-box{
	position: relative;
}

.team-single-image{
	height: 100%;
}

.team-single-image figure{
	display: block;
	height: 100%;
	border-radius: 10px;
}

.team-single-image img{
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 0.916;
	object-fit: cover;
	object-position: top center;
	border-radius: 10px;
}

.team-skills-list{
	position: absolute;
	bottom: 20px;
	left: 20px;
	max-width: 350px;
	background: var(--divider-color);
	backdrop-filter: blur(30px);
	-webkit-backdrop-filter: blur(30px);
	border-radius: 10px;
	padding: 30px;
	z-index: 2;
}

.team-skills-list .skills-progress-bar .skill-data .skill-title,
.team-skills-list .skills-progress-bar .skill-data .skill-no{
	font-size: 20px;
	color: var(--white-color);
}

.team-skills-list .skills-progress-bar .skillbar .skill-progress{
	background: var(--dark-divider-color);
}

.team-skills-list .skills-progress-bar .skillbar .skill-progress .count-bar{
	background: var(--accent-secondary-color);
}

.team-contact-item{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 15px;
	margin-bottom: 30px;
}

.team-contact-item:last-child{
	margin-bottom: 0;
}

.team-contact-item .icon-box{
	position: relative;
	width: 50px;
	height: 50px;
	border-radius: 5px;
	background-color: var(--accent-secondary-color);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.4s ease-in-out;
	overflow: hidden;
}

.team-contact-item .icon-box::before{
	content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: var(--accent-color);
    width: 100%;
    height: 100%;
    transform: rotate(180deg) scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.team-contact-item:hover .icon-box::before{
	transform: rotate(0) scale(1);
}

.team-contact-item .icon-box img{
	position: relative;
	width: 100%;
	max-width: 24px;
	transition: all 0.4s ease-in-out;
	z-index: 1;
}

.team-contact-item:hover .icon-box img{
	filter: brightness(0) invert(1);
}

.team-contact-item-content{
	width: calc(100% - 65px);
}

.team-contact-item-content h3{
	font-size: 20px;
}

.team-contact-item-content p{
	margin: 5px 0 0;
}

.team-member-btn{
	margin-top: 60px;
}

.team-personal-info,
.team-contact-qualification-box{
	margin-top: 60px;
}

.team-personal-info .section-title{
	margin: 0;
}

.team-contact-qualification-box{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 30px 60px;
}

.team-contact-form,
.team-qualification-box{
	width: calc(50% - 30px);
}

.team-contact-form{
	background: var(--secondary-color);
	border-radius: 10px;
	padding: 40px;
}

.team-qualification-item-list{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}

.team-qualification-item{
	width: calc(50% - 15px);
	background-color: var(--secondary-color);
	border-radius: 10px;
	padding: 25px;
}

.team-qualification-item-header{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	margin-bottom: 20px;
}

.team-qualification-item-header .icon-box{
	position: relative;
	width: 40px;
	height: 40px;
	border-radius: 5px;
	background-color: var(--accent-secondary-color);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.4s ease-in-out;
	overflow: hidden;
}

.team-qualification-item-header .icon-box::before{
	content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: var(--accent-color);
    width: 100%;
    height: 100%;
    transform: rotate(180deg) scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.team-qualification-item:hover .team-qualification-item-header .icon-box::before{
	transform: rotate(0) scale(1);
}

.team-qualification-item-header .icon-box img{
	position: relative;
	width: 100%;
	max-width: 20px;
	transition: all 0.4s ease-in-out;
	z-index: 1;
}

.team-qualification-item:hover .team-qualification-item-header .icon-box img{
	filter: brightness(0) invert(1);
}

.team-qualification-item-year p{
	margin: 0;
}

.team-qualification-item-title h3{
	font-size: 20px;
	line-height: 1.4em;
}

/************************************/
/***  28. Testimonials Page css   ***/
/************************************/

.page-testimonials{
	padding: 120px 0 90px;
}

.page-testimonials .testimonial-item{
	height: calc(100% - 30px);
	margin-bottom: 30px;
	padding: 40px;
}

/************************************/
/***    29. Image Gallery css     ***/
/************************************/

.page-gallery{
	padding: 120px 0 90px;
}

.page-gallery-box .photo-gallery{
	height: calc(100% - 30px);
	margin-bottom: 30px;
}

.page-gallery-box .photo-gallery a{
	cursor: none;
}

.page-gallery-box .photo-gallery figure{
	display: block;
	border-radius: 10px;
}

.page-gallery-box .photo-gallery img{
	width: 100%;
	aspect-ratio: 1 / 0.83;
	object-fit: cover;
	border-radius: 10px;
}

/************************************/
/***    30. Video Gallery css     ***/
/************************************/

.page-video-gallery{
	padding: 120px 0 90px;
}

.video-gallery-image{
	height: calc(100% - 30px);
	margin-bottom: 30px;
	overflow: hidden;
}

.video-gallery-image a{
	position: relative;
	display: block;
	cursor: none;
}

.video-gallery-image a::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--primary-color);
	border-radius: 10px;
    opacity: 0%;
    visibility: hidden;
    width: 100%;
    height: 100%;
    z-index: 1;
    transform: scale(0);
    transition: all 0.4s ease-in-out;
}

.video-gallery-image:hover a::before{
    opacity: 50%;
    visibility: visible;
    transform: scale(1);
}

.video-gallery-image a::after{
    content: '\f04b';
	font-family: 'FontAwesome';
    position: absolute;
    top: 50%;
    left: 50%;
    right: 0;
    transform: translate(-50%, -50%);
	font-size: 20px;
	background: var(--accent-color);
	color: var(--white-color);
    border-radius: 50%;
    height: 60px;
    width: 60px;
    cursor: none;
	display: flex;
	align-items: center;
	justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease-in-out;
    z-index: 1;
}

.video-gallery-image:hover a::after{
    opacity: 1;
    visibility: visible;
}

.video-gallery-image img{
	width: 100%;
	aspect-ratio: 1 / 0.83;
	object-fit: cover;
	border-radius: 10px;
}

/************************************/
/***      31. FAQ's Page css      ***/
/************************************/

.page-faqs{
	padding: 120px 0;
}

.page-faqs .page-single-faqs{
    margin-bottom: 60px;
}

.page-faqs .page-single-faqs:last-child{
    margin-bottom: 0px;
}

/************************************/
/***   32. Contact Us Page css    ***/
/************************************/

.page-contact-us{
	padding: 120px 0;
}

.contact-info-item{
	background-color: var(--secondary-color);
	border-radius: 10px;
	height: calc(100% - 30px);
	margin-bottom: 30px;
	padding: 40px;
}

.contact-info-item .icon-box{
	position: relative;
	height: 50px;
	width: 50px;
	border-radius: 5px;
	background-color: var(--accent-secondary-color);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 30px;
	transition: all 0.4s ease-in-out;
	overflow: hidden;
}

.contact-info-item .icon-box::before{
	content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: var(--accent-color);
    width: 100%;
    height: 100%;
    transform: rotate(180deg) scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.contact-info-item:hover .icon-box::before{
	transform: rotate(0) scale(1);
}

.contact-info-item .icon-box img{
	position: relative;
	width: 100%;
	max-width: 24px;
	transition: all 0.4s ease-in-out;
	z-index: 1;
}

.contact-info-item:hover .icon-box img{
	filter: brightness(0) invert(1);
}

.contact-info-item-content h2{
	font-size: 20px;
}

.contact-info-item-content p{
	margin: 10px 0 0;
}

.contact-info-item-content ul{
	list-style: disc;
	margin: 20px 0 0;
	padding: 0 0 0 20px;
}

.contact-info-item-content ul li{
	color: var(--primary-color);
	line-height: 1.5em;
	margin-bottom: 10px;
}

.contact-info-item-content ul li:last-child{
	margin-bottom: 0;
}

.contact-info-item-content ul li::marker{
	color: var(--accent-color);
}

.contact-info-item-content ul li a{
	color: inherit;
	transition: all 0.4s ease-in-out;
}

.contact-info-item-content ul li a:hover{
	color: var(--accent-color);
}

.contact-image-form-box{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	margin-top: 90px;
}

.contact-us-image{
	position: relative;
	width: calc(42% - 15px);
}

.contact-us-image figure{
	position: relative;
	display: block;
	height: 100%;
	border-radius: 10px;
}

.contact-us-image figure:before{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: linear-gradient(180deg, transparent 50%, var(--primary-color) 100%);
	border-radius: 10px;
}

.contact-us-image img{
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1.337;
	object-fit: cover;
	border-radius: 10px;
}

.contact-image-content{
	position: absolute;
	bottom: 40px;
	left: 40px;
	right: 40px;
	text-align: center;
	z-index: 1;
}

.contact-image-content h3{
	font-size: 20px;
	color: var(--white-color);
}

.contact-us-form{
	width: calc(58% - 15px);
	background-color: var(--secondary-color);
	border-radius: 10px;
	padding: 60px;
}

.contact-form .form-control{
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5em;
	color: var(--primary-color);
	background: var(--white-color);
	border: none;
	border-radius: 10px;
	padding: 18px 20px;
	box-shadow: none;
	outline: none;
}

.contact-form .form-control::placeholder{
	color: var(--primary-color);
}

.google-map .container-fluid{
	padding: 0;
}

.google-map-iframe{
	height: 800px;
}

.google-map-iframe iframe{
	width: 100%;
	height: 100%;
}

/************************************/
/***    33. 404 Error Page css    ***/
/************************************/

.error-page{
	padding: 120px 0;
}

.error-page-image{
	text-align: center;
	margin-bottom: 30px;
}

.error-page-image img{
	width: 100%;
	max-width: 720px;
}

.error-page-content{
	text-align: center;
}

.error-page-content .section-title{
	margin-bottom: 15px;
}

/************************************/
/***      34. Responsive css      ***/
/************************************/

@media only screen and (max-width: 1440px){

	.our-cta-box{
		padding: 40px;
	}

	.our-services-button-prev{
		left: -15px;
	}

	.our-services-button-next{
		right: -15px;
	}
}

@media only screen and (max-width: 1024px){

	/* Empat kolom terlalu sempit di bawah 1025px. Jadi 3 kolom — enam kartu
	   pas dua baris rata, dan kartu lebar dikembalikan jadi satu kolom. */
	.akses-cepat-grid{
		grid-template-columns: repeat(3, 1fr);
	}

	.akses-cepat-item-wide{
		grid-column: auto;
	}

	.main-menu ul li{
		margin: 0;
	}

	.section-content-btn .section-btn{
		margin-top: 20px;
	}
	
	.section-title-content{
        margin-top: 10px;
    }

	.section-btn{
        text-align: left;
        margin-top: 15px;
	}

	.hero{
		height: auto;
	}

	.hero-content{
		margin-bottom: 40px;
	}

	.hero-info-box{
		margin-left: 0;
	}

	.about-image-box{
		height: auto;
		margin: 0 auto 30px;
		max-width: 740px;
	}

	.about-us-image,
	.about-us-image figure{
		height: auto;
	}

	.about-us-image figure img{
		aspect-ratio: 1 / 1.101;
	}

	.our-journey-content{
		margin-bottom: 30px;
	}

	.journey-image-box{
		margin: 0;
	}

	.journey-image img{
		aspect-ratio: 1 / 0.75;
	}

	.departments-item{
		max-width: 900px;
		margin: 0 auto;
	}

	.departments-item-content-box{
		padding: 30px;
	}

	.departments-item-content-title{
		margin-bottom: 30px;
		padding-bottom: 30px;
	}
	
	.testimonial-client-box{
		padding: 10px 10px 10px 15px;
		width: 250px;
	}

	.testimonial-image-box .satisfy-client-image figure img{
		max-width: 30px;
	}

	.testimonial-item{
		padding: 30px;
		min-height: 420px;
	}

	.testimonial-item-content{
		margin-top: 30px;
	}

	.testimonial-pagination.swiper-pagination-bullets{
		right: 30px;
		bottom: 50px;
	}

	.faqs-image-box{
		height: auto;
		max-width: 740px;
		margin: 0 auto 30px;
	}

	.faqs-image,
	.faqs-image figure{
		height: auto;
	}

	.faqs-image img{
		height: auto;
		aspect-ratio: 1 / 0.9;
	}

	.cta-box{
		border-radius: 0;
	}

	.our-cta-box{
		padding: 0;
		gap: 0;
	}

	.cta-image{
		position: initial;
	}

	.cta-contact-box{
		padding: 60px 15px;
		width: 100%;
		max-width: 100%;
		background: var(--secondary-color);
		border-radius: 0;
	}	

	.cta-form .form-control{
		background: var(--white-color);
	}

	.about-footer-content{
		margin-top: 15px;
	}

	.about-footer-btn{
		margin-top: 20px;
	}

	.footer-content-box{
		border-top: 1px solid var(--dark-divider-color);
		margin: 30px 0 0;
		padding: 30px 0 0;
		border-left: none;
	}

	.footer-content-box-title{
		padding-bottom: 30px;
		margin-bottom: 30px;
	}

	.footer-contact-list ul li{
		margin-bottom: 20px;
		padding-bottom: 20px;
	}

	.footer-social-links{
		margin-top: 30px;
	}

	.our-story{
		min-height: 600px;
	}

	.progress-image-box,
	.progress-image,
	.progress-image figure,
	.progress-image img,
	.progress-content{
		height: auto;
	}

	.progress-image-box{
		margin-bottom: 30px;
	}

	.progress-image img{
		aspect-ratio: 1 / 0.7;
	}

	.progress-content{
		margin: 0;
	}

	.benefits-content{
		margin-bottom: 30px;
	}

	.benefits-image{
		max-width: 600px;
		margin: 0 auto;
	}

	.page-single-sidebar{
		margin: 0;
	}

	.page-category-list .page-category-list-title{
		padding: 15px 20px;
	}

	.page-category-list ul{
		padding: 20px;
	}

	.page-category-list ul li{
		margin-bottom: 20px;
		padding-bottom: 20px;
	}

	.page-category-list ul li a::before{
		width: 18px;
		height: 18px;
	}

	.sidebar-cta-box{
		padding: 20px;
	}

	.sidebar-cta-box-logo{
		margin-bottom: 20px;
	}

	.sidebar-cta-box-btn{
		margin-top: 30px;
	}

	.page-single-image{
		margin-bottom: 20px;
	}

	.service-entry{
		margin-bottom: 40px;
	}

	.service-features-box,
	.service-access-box,
	.service-complaint-box{
		margin-top: 40px;
	}

	.service-feature-image-content{
		margin-top: 30px;
	}

	.service-feature-image,
	.service-feature-content{
		width: 100%;
	}

	.service-feature-image img{
		aspect-ratio: 1 / 0.8;
	}

	.service-feature-info-list{
		margin-top: 30px;
	}

	.service-access-image-content{
		padding: 30px;
		margin-top: 30px;
	}

	.service-access-item{
		width: calc(50% - 12.5px);
	}

	.service-complaint-list{
		margin-top: 30px;
	}

	.page-departments .departments-item{
		min-height: 300px;
	}

	.department-entry{
		margin-bottom: 40px;
	}

	.department-highlighted-box{
		margin: 30px 0;
	}

	.department-responsibility-box,
	.department-job-box{
		margin-top: 40px;
	}

	.department-responsibility-image-content{
		margin-top: 30px;
	}

	.department-responsibility-item{
		padding: 20px;
		margin-bottom: 20px;
	}

	.department-job-item-list{
		gap: 20px;
		margin-top: 30px;
	}

	.department-job-item{
		width: calc(50% - 10px);
		padding: 20px;
	}

	.activity-entry{
		margin-bottom: 40px;
	}

	.activity-purpose-box,
	.activity-program-box,
	.activity-support-box{
		margin-top: 40px;
	}

	.activity-purpose-list,
	.activity-program-content-box,
	.activity-support-item-list{
		margin-top: 30px;
	}

	.activity-program-item-list{
		margin-bottom: 30px;
		padding-bottom: 30px;
	}

	.activity-support-item{
		margin-bottom: 30px;
	}

	.team-member-about{
		gap: 30px;
	}

	.team-single-image-box,
	.team-about-content{
		width: calc(50% - 15px);
	}

	.team-skills-list{
		padding: 20px;
	}

	.team-contact-item{
		margin-bottom: 20px;
	}

	.team-member-btn{
		margin-top: 40px;
	}

	.team-personal-info,
	.team-contact-qualification-box{
		margin-top: 40px;
	}
	
	.team-contact-form,
	.team-qualification-box{
		width: 100%;
	}

	.contact-us-image,
	.contact-us-form{
		width: 100%;
	}

	.contact-us-image figure,
	.contact-us-image img{
		height: auto;
	}

	.contact-us-image img{
		aspect-ratio: 1 / 0.8;
		object-position: top center;
	}

	.google-map-iframe{
		height: 550px;
	}
}

@media only screen and (max-width: 991px){

	.bg-section,
	.dark-section{
		border-radius: 0;
	}

	/* Di bawah 992px Swiper mengambil alih — kartu jadi geser horizontal.
	   Dipendekkan supaya satu kartu tetap muat utuh di layar tablet. */
	.layanan-grid{
		--layanan-card-min	: 440px;
		--layanan-pad		: 30px;
	}

	/* Dua kolom: enam kartu jadi tiga baris rata, tanpa sisa. */
	.akses-cepat{
		padding: 70px 0;
	}

	.hm-publikasi{
		padding: 70px 0;
	}

	.lyn-kat{
		padding: 56px 0 70px;
	}

	.lyn-kat-grid{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.lyn-kat-lead{
		font-size: 16px;
	}

	/* Section beranda struktur to-be. */
	.pgm-section{ padding: 50px 0 0; }
	.pgm-bar{ padding: 22px; gap: 18px; }
	.pgm-bar-title{ flex: 1 1 100%; font-size: 20px; }

	.tk-section,
	.lp-section{ padding: 0 0 70px; }

	.tk-tab{ margin-top: 22px; justify-content: flex-start; }
	.tk-button-prev{ left: 0; }
	.tk-button-next{ right: 0; }
	.tk-mitra-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }

	.lp-grid{ grid-template-columns: minmax(0, 1fr); }

	/* Panah ikut rata kiri saat kolom menumpuk. */
	.layanan-grid-action,
	.tk-action{ margin-top: 20px; }
	.hm-slider-nav{ justify-content: flex-start; margin-top: 24px; }

	.srl-section{ padding: 46px 0 70px; }
	.srl-bar{ align-items: flex-start; }

	/* Media sosial: rail jadi baris, panah masuk ke dalam. */
	.sm-section{ padding: 70px 0; }
	.sm-rail{ flex-direction: row; }
	.sm-rail .nav-link{ padding: 16px 18px; }
	.sm-rail-aksi{ margin-top: 16px; margin-bottom: 26px; }
	.sm-button-prev{ left: 0; }
	.sm-button-next{ right: 0; }

	/* Halaman baru struktur to-be. */
	.mk-statement{ padding: 60px 0; }
	.mk-statement-quote{ font-size: 26px; }
	.mk-nilai{ padding: 60px 0 50px; }
	.mk-nilai-list{ grid-template-columns: minmax(0, 1fr); }
	.mk-formal{ padding: 0 0 70px; }
	.mk-formal-box{ padding: 30px 26px; }

	.pi-section,
	.ph-section,
	.dk-section,
	.ev-section,
	.rm-section,
	.pk-section{ padding: 60px 0 70px; }

	.pi-aside,
	.rm-aside{ position: static; padding-right: 0; margin-bottom: 30px; }

	.tm-testimoni{ padding: 60px 0 50px; }
	.tm-mitra{ padding: 0 0 70px; }
	.tm-mitra-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }

	.dk-tautan{ grid-template-columns: minmax(0, 1fr); }

	.ph-tahun{ grid-template-columns: minmax(0, 1fr); gap: 18px; }

	/* Layanan: judul kategori berhenti menempel, kartu jadi satu kolom. */
	.lyn-intro{
		padding: 42px 0 46px;
	}

	.lyn-intro-title{
		font-size: 27px;
	}

	.lyn-list{
		padding: 56px 0 70px;
	}

	.lyn-cat-head{
		position: static;
		padding-right: 0;
		margin-bottom: 24px;
	}

	.lyn-cat + .lyn-cat{
		margin-top: 40px;
		padding-top: 40px;
	}

	/* Capaian: rail jadi baris, statistik jadi dua kolom. */
	.capaian-section{
		padding: 70px 0;
	}

	.ct-rail{
		flex-direction: row;
		margin-bottom: 26px;
	}

	.ct-rail .nav-link{
		padding: 16px 18px;
	}

	.ct-stat-grid,
	.ct-client-grid{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Panah masuk ke dalam supaya tidak terpotong tepi layar. */
	.ct-quote-button-prev{ left: 0; }
	.ct-quote-button-next{ right: 0; }

	/* Footer: identitas dan newsletter menumpuk. */
	.footer-slim{
		padding: 52px 0 0;
	}

	.footer-slim-top,
	.footer-slim-mid{
		grid-template-columns: minmax(0, 1fr);
		gap: 30px;
	}

	/* Enam ubin jadi empat: di bawah 1025px tiap ubin < 250px. */
	/* Judul dan tombol menumpuk, tombol ikut rata kiri. */
	/* Galeri split jadi menumpuk: teks dulu, baru foto. */
	.galeri-split{
		padding: 70px 0;
	}

	.galeri-split-content{
		max-width: 100%;
		margin-bottom: 40px;
	}

	.galeri-crosslink{
		padding: 26px 24px;
	}

	.akses-cepat-grid{
		grid-template-columns: repeat(2, 1fr);
	}

	.akses-cepat-head{
		margin-bottom: 36px;
	}

	.layanan-card-title{
		font-size: 15px;
	}

	.btn-default{
        padding: 14px 22px;
        gap: 10px;
    }

	.btn-default::after{
		width: 14px;
		height: 14px;
		background-size: 14px auto;
	}

	header.main-header .header-sticky{
		width: 100%;
		border-radius: 0;
	}

	.navbar{
		padding: 20px 0;
	}

	/* Bar ter-pin dirapatkan: di mobile .navbar sendiri sudah 20px atas-bawah,
	   tanpa ini header fixed memakan porsi layar yang terlalu besar. */
	header.main-header .header-sticky.active{
		padding: 0;
	}

	header.main-header .header-sticky.active .navbar{
		padding: 10px 0;
	}

	header.main-header .header-sticky.active .navbar-brand{
		width: 150px;
	}

	.navbar-toggle{
        display: flex;
    }

	.slicknav_nav li,
	.slicknav_nav ul{
        display: block;
    }

	.header-btn{
		display: none;
	}

	.section-row{
		margin-bottom: 40px;
	}
	
	.section-title{
		margin-bottom: 30px;
	}

	.section-title .section-sub-title{
		margin-bottom: 10px;
	}

	.section-title h1{
		font-size: 44px;
	}

	.section-title h2{
		font-size: 36px;
	}

	.section-title p{
		margin-top: 10px;
	}

	.hero{
		padding: 150px 0 60px;
	}

	.hero::before{
		background: var(--primary-color);
		opacity: 60%;
	}

	.hero-content{
		margin-bottom: 30px;
	}

	.hero-content-body{
		margin-top: 30px;
		padding-top: 30px;
	}

	.hero-content-body ul li:before{
		font-size: 16px;
	}

	.hero-info-box-header{
		padding: 20px;
	}

	.about-us{
		padding: 60px 0;
	}

	.about-us-image figure img{
		aspect-ratio: 1 / 1.079;
	}

	.about-experience-box{
		padding: 20px;
	}

	.about-experience-box h2{
		font-size: 40px;
	}

	.about-image-skill-bar-box{
		padding: 15px;
	}

	.about-us-list ul li{
		margin-bottom: 15px;
	}

	.about-us-list ul li::before{
		font-size: 16px;
	}

	.about-us-contant .section-footer-text{
		padding-top: 30px;
		margin-top: 30px;
	}

	.our-services{
		background-size: 100% auto;
		padding: 60px 0;
	}

	.service-item{
		padding: 30px;
		min-height: initial;
	}

	.service-item .icon-box{
		height: 50px;
		width: 50px;
	}

	.service-item .icon-box img{
		max-width: 24px;
	}

	.service-item-btn{
		padding-top: 20px;
		margin-top: 20px;
	}

	.section-footer-text{
		margin-top: 10px;
	}

	.section-footer-text ul li{
        font-size: 18px;
    }

	.our-journey{
		padding: 60px 0;
	}

	.journey-content-skillbar .skills-progress-bar .skill-data .skill-title,
	.journey-content-skillbar .skills-progress-bar .skill-data .skill-no{
		font-size: 18px;
	}

	.journey-content-body-list{
		margin-top: 30px;
	}

	.journey-content-body-list ul li:before{
		font-size: 16px;
	}

	.journey-footer{
		margin-top: 30px;
		padding-top: 30px;
		gap: 20px 30px;
	}

	.journey-counter-item-content h2{
		font-size: 26px;
	}

	.our-departments{
		padding: 60px 0 0;
		margin-bottom: 150px;
	}

	.departments-tab-box{
		margin-bottom: -150px;
	}

	.departments-nav{
		margin-bottom: 50px;
	}

	.departments-nav .nav-tabs{
		gap: 20px;
	}

	.departments-nav ul li{
		width: calc(33.33% - 13.33px);
	}

	.departments-nav ul li .nav-link{
		gap: 10px;
		font-size: 18px;
		padding: 10px;
	}

	.video-play-button a{
		width: 55px;
		height: 55px;
	}

	.video-play-button a.bg-effect:before,
	.video-play-button a.bg-effect:after{
		border-width: 40px;
	}

	.video-play-button a i{
		font-size: 20px;
	}

	.departments-item-content-title h3{
		font-size: 24px;
	}

	.recent-documents-item{
		margin-bottom: 20px;
		padding-bottom: 20px;
	}

	.our-awards{
		background-size: 100% auto;
		padding: 60px 0;
	}

	.award-item{
		padding: 30px;
	}

	.award-item-image,
	.award-item-title{
		margin-bottom: 30px;
	}

	.award-item-image figure{
		max-width: 80px;
	}

	.award-sponsor-content{
		margin-bottom: 20px;
	}

	.award-sponsor-content p{
		padding: 10px 20px;
	}

	.our-activities{
		background-size: 150% auto;
		padding: 60px 0;
	}

	.activities-item-image img{
		aspect-ratio: 1 / 0.95;
	}

	.activities-slider .activities-pagination{
		margin-top: 30px;
	}

	.our-activities .section-footer-text{
		margin-top: 30px;
	}

	.our-testimonials{
		padding: 60px 0;
	}

	.testimonial-image-box{
		height: auto;
		margin: 0 0 30px;
	}

	.testimonial-image figure img{
		aspect-ratio: 1 / 0.99;
	}

	.testimonial-image,
	.testimonial-image figure,
	.testimonial-image figure img{
		height: auto;
	}

	.testimonial-item{
		gap: 30px;
		min-height: auto;
	}

	.testimonial-item-content p{
		font-size: 18px;
	}

	.testimonial-item-author{
		padding-top: 30px;
	}

	.testimonial-footer-box{
		margin-top: 40px;
	}

	.testimonial-footer-image img{
		max-width: 50px;
	}

	.testimonial-footer-title p{
		font-size: 18px;
	}

	.testimonial-footer-body ul{
		margin-top: 10px;
	}

	.our-team{
		padding: 60px 0;
	}

	.team-item-body{
		padding: 0 20px 20px;
	}

	.team-social-link{
		margin-bottom: 10px;
	}

	.team-social-icon{
		right: 30px;	
		left: 30px;
	}

	.our-faqs{
		padding: 60px 0;
	}

	.faqs-cta-box-content h2,
	.faqs-cta-box-content h3{
		font-size: 18px;
	}

	.faq-accordion .accordion-header .accordion-button{
		padding: 15px 50px 15px 15px;
	}

	.faq-accordion .accordion-item .accordion-button::after,
	.faq-accordion .accordion-item .accordion-button.collapsed::after{
		font-size: 24px;
		right: 15px;
	}

	.faq-accordion .accordion-item .accordion-body{
		padding: 15px;
	}

	.cta-form .form-control{
		padding: 12px 15px;
	}

	.our-blog{
		padding: 60px 0 30px;
	}

	.post-featured-image{
		margin-bottom: 15px;
	}

	.main-footer{
		padding: 60px 0 0;
	}

	.footer-content-box-title h2{
		font-size: 24px;
	}

	.footer-contact-list ul li{
		font-size: 18px;
		margin-bottom: 15px;
		padding-bottom: 15px;
	}

	.footer-newsletter-form .form-group .form-control{
		width: calc(100% - 40px);
	}

	.footer-newsletter-form .form-group .newsletter-btn{
		height: 40px;
		width: 40px;
	}

	.footer-newsletter-form .form-group .newsletter-btn i{
		font-size: 20px;
	}

	.footer-social-links ul{
		gap: 10px 15px;
	}

	.footer-copyright{
		margin-top: 30px;
		padding: 30px 0;
	}

	.footer-menu ul{
		gap: 10px 15px;
	}

	.page-header{
		height: auto;
		min-height: 280px;
		padding: 140px 0 40px;
		overflow: visible;
	}

	.page-header > .container,
	.page-header .row,
	.page-header .row > [class*="col-"]{
		height: auto;
	}

	.page-header-box{
		height: auto;
		justify-content: flex-start;
		margin-bottom: 22px;
	}

	.page-header-box h1,
	.page-header-box .page-header-title{
		display: block;
		width: 100%;
		max-width: 100%;
		font-size: 36px;
		overflow-wrap: anywhere;
		word-break: break-word;
	}

	/* Breadcrumbs masuk alur normal di tablet agar tidak terpotong */
	.page-header .bradcrumbs{
		width: 100%;
		max-width: 100%;
		min-width: 0;
	}

	.page-header nav{
		position: relative;
		right: auto;
		bottom: auto;
		left: auto;
		width: 100%;
		max-width: 100%;
		min-width: 0;
		overflow: visible;
	}

	.page-header ol.breadcrumb{
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: stretch;
		gap: 8px;
		width: 100%;
		max-width: 100%;
		filter: drop-shadow(0 8px 16px rgba(32, 32, 32, 0.2));
	}

	.page-header ol li.breadcrumb-item{
		font-size: 13px;
		padding: 10px 26px 10px 20px;
		flex: 0 1 auto;
		max-width: 100%;
		white-space: normal;
		overflow-wrap: anywhere;
		word-break: break-word;
	}

	/* Tablet: pill shape agar clip-path chevron tidak rusak saat wrap */
	.page-header ol li.breadcrumb-item,
	.page-header ol li.breadcrumb-item:first-child{
		clip-path: none;
		border-radius: 6px;
		padding: 10px 14px;
	}

	.page-header ol li.breadcrumb-item::before{
		font-size: 13px;
		margin-right: 7px;
	}

	.our-approach{
		padding: 60px 0;
	}

	.approach-item{
		padding: 30px;
		min-height: 320px;
	}

	.approach-cta-item-body{
		padding-top: 30px;
	}

	.approach-cta-counter-item-no h4{
		width: 60px;
		font-size: 32px;
	}

	.approach-cta-counter-item-content{
		width: calc(100% - 75px);
	}

	.approach-cta-counter-item-content p{
		margin: 10px 0 0;
	}

	.approach-item .icon-box{
		height: 50px;
		width: 50px;
	}

	.approach-item .icon-box img{
		max-width: 24px;
	}

	.our-story{
		padding: 60px 0;
	}

	.our-story-button.video-play-button a{
		width: 65px;
		height: 65px;
	}

	.our-story-button.video-play-button a.bg-effect:before,
	.our-story-button.video-play-button a.bg-effect:after{
    	border-width: 47px;
	}

	.our-story-button.video-play-button a i{
		font-size: 20px;
	}

	.our-progress{
		padding: 60px 0;
	}

	.opening-hour-box{
		bottom: 20px;
		left: 20px;
	}

	.progress-body-item{
		padding: 20px;
	}

	.progress-body-list ul li:before{
		font-size: 16px;
	}

	.progress-footer{
		margin-top: 30px;
	}

	.our-benefits{
		background-size: 150% auto;
		padding: 60px 0;
	}

	.benefits-item{
		padding: 20px;
	}

	.benefits-item .icon-box{
		margin-bottom: 30px;
	}

	.benefits-footer{
		margin-top: 30px;
	}

	.page-services{
		padding: 60px 0 30px;
	}

	.page-service-single{
		padding: 60px 0;
	}

	.page-single-sidebar{
		position: initial;
		margin-bottom: 30px;
	}

	.page-category-list{
		margin-bottom: 30px;
	}

	.sidebar-cta-box-btn .btn-default{
		padding: 15px;
	}
	
	.service-entry p{
		margin-bottom: 15px;
	}

	.service-entry h2{
		font-size: 36px;
		margin-bottom: 15px;
	}

	.service-entry ul li::before{
		font-size: 16px;
	}	

	.page-departments{
		padding: 60px 0 30px;
	}

	.page-departments .departments-item{
		padding: 20px;
	}

	.departments-item-header .icon-box{
		margin-bottom: 20px;
	}

	.page-department-single{
		padding: 60px 0;
	}

	.department-entry p{
		margin-bottom: 15px;
	}

	.department-entry h2{
		font-size: 36px;
		margin-bottom: 15px;
	}

	.department-highlighted-box{
		padding: 20px;
	}

	.department-highlighted-box h3{
		font-size: 18px;
	}

	.department-job-item .icon-box{
		margin-bottom: 20px;
	}

	.page-blog{
		padding: 60px 0;
	}

	.page-pagination{
		margin-top: 10px;
	}

	.page-single-post{
        padding: 60px 0;
    }
    
    .post-image{
        margin-bottom: 20px;
    }
    
    .post-entry h2{
        font-size: 38px;
    }
    
    .post-entry p{
        margin-bottom: 15px;
    }
    
    .post-entry ol li,
    .post-entry ul li{
		font-size: 16px;
        margin-bottom: 10px;
    }
    
    .post-entry blockquote{
        background-position: 20px 20px;
        background-size: 40px;
        padding: 20px 20px 20px 70px;
        margin-bottom: 20px;
    }
    
    .post-entry blockquote p{
        font-size: 18px;
    }
    
    .post-tags{
        margin-bottom: 20px;
    }
    
    .post-tags .tag-links a{
        padding: 12px 15px;
    }
    
    .post-social-sharing ul{
        text-align: left;
    }

	.page-activities{
		padding: 60px 0 30px;
	}

	.page-activity-single{
		padding: 60px 0;
	}

	.activity-entry p{
		margin-bottom: 15px;
	}

	.activity-entry h2{
		font-size: 36px;
		margin-bottom: 15px;
	}

	.activity-entry ul li::before{
		font-size: 16px;
	}

	.page-team{
		padding: 60px 0 30px;
	}

	.page-team-single{
		padding: 60px 0;
	}
	
	.team-single-image-box,
	.team-about-content{
		width: 100%;
	}

	.team-single-image,
	.team-single-image figure,
	.team-single-image img{
		height: auto;
	}

	.team-member-btn{
		margin-top: 30px;
	}

	.team-contact-form{
		padding: 30px;
	}

	.team-qualification-item{
		padding: 20px;
	}

	.page-testimonials{
		padding: 60px 0 30px;
	}

	.page-testimonials .testimonial-item{
		padding: 30px;
	}

	.page-gallery{
		padding: 60px 0 30px;
	}

	.page-video-gallery{
		padding: 60px 0 30px;
	}

	.page-faqs{
        padding: 60px 0;
    }

    .page-faqs .page-single-faqs{
        margin-bottom: 40px;
    }

	.page-contact-us{
		padding: 60px 0;
	}

	.contact-info-item{
		padding: 20px;
	}

	.contact-image-form-box{
		margin-top: 30px;
	}

	.contact-image-content{
		right: 30px;
		bottom: 30px;
		left: 30px;
	}

	.contact-us-form{
		padding: 30px;
	}

	.contact-form .form-control{
		padding: 13px 15px;
	}

	.error-page{
		padding: 60px 0px;
	}
	
	.error-page-image{
		margin-bottom: 20px;
	}
}

@media only screen and (max-width: 767px){

	.section-row{
		margin-bottom: 30px;
	}

	.section-title h1{
		font-size: 28px;
	}

	.layanan-grid{
		--layanan-card-min	: 400px;
		--layanan-pad		: 26px;
	}

	/* Garis pemisah dibuang: di mode geser kartu sudah terpisah sendiri oleh
	   gerakan dan celah intip, garis di tepi layar malah terlihat seperti cacat. */
	.layanan-grid .swiper-slide .layanan-card{
		border-left: 0;
	}

	.section-title h2{
		font-size: 26px;
	}

	.hero-content-body ul li{
		width: 100%;
	}

	.hero-info-box-content{
		margin-top: 10px;
	}

	.about-image-box{
		padding: 0;
	}

	.about-experience-box{
		max-width: 200px;
		background-size: 60px auto;
		padding: 15px;
	}

	.about-experience-box h2{
        font-size: 30px;
    }

	.about-experience-box h3{
		font-size: 18px;
		margin-top: 10px;
	}

	.about-experience-box p{
		font-size: 14px;
		margin-top: 5px;
	}

	.about-image-skill-bar-box{
		bottom: 10px;
		right: 10px;
		padding: 10px;
		gap: 15px;
	}

	.about-us-image figure img{
		aspect-ratio: 1 / 1.305;
	}

	.about-image-skill-bar-box .icon-box{
		height: 40px;
		width: 40px;
	}

	.about-image-skill-bar-box .icon-box img{
		max-width: 20px;
	}

	.about-image-skill-bar-box .skills-progress-bar{
		width: calc(100% - 55px);
	}

	.skills-progress-bar .skill-data{
		margin-bottom: 10px;
	}

	.skills-progress-bar .skillbar .skill-progress{
		height: 7px;
	}

	.about-info-box,
	.about-us-list{
		width: 100%;
	}

	.about-us-list ul li{
		margin-bottom: 10px;
	}

	.about-author-contant h2{
		font-size: 18px;
	}

	.service-item{
		padding: 20px;
		gap: 20px;
	}

	.service-item-contant h2{
		font-size: 18px;
	}

	.service-item-contant p{
		margin: 10px 0 0;
	}

	.our-counter{
		padding: 0 0 60px;
	}

	.counter-item{
		padding: 20px;
		gap: 15px;
	}

	.counter-item .icon-box{
		width: 50px;
		height: 50px;
	}

	.counter-item .icon-box i{
		font-size: 20px;
	}

	.counter-item-content h2{
		font-size: 30px;
	}

	.our-services-slider{
		padding-bottom: 70px;
	}

	.our-services-arrow{
		top: auto;
		bottom: 0;
		transform: none;
		width: 45px;
		height: 45px;
	}

	.our-services-button-prev{
		left: calc(50% - 50px);
	}

	.our-services-button-next{
		right: calc(50% - 50px);
	}

	.section-footer-text ul li{
		font-size: 16px;
	}

	.journey-content-skillbar .skills-progress-bar .skill-data .skill-title,
	.journey-content-skillbar .skills-progress-bar .skill-data .skill-no{
		font-size: 16px;
	}

	.journey-content-body-list ul{
		gap: 10px;
	}

	.journey-content-body-list ul li{
		width: 100%;
	}

	.journey-footer{
		gap: 20px;
	}

	.about-us-conatct-content h3{
		font-size: 18px;
	}

	.journey-image img{
        aspect-ratio: 1 / 1.025;
    }

	.journey-counter-list{
		padding: 10px;
	}

	.journey-counter-item{
		margin-bottom: 15px;
		padding-bottom: 15px;
	}

	.journey-counter-item-content h2{
        font-size: 22px;
    }

	.our-departments{
		padding: 60px 0;
		margin-bottom: 0;
	}

	.departments-tab-box{
        margin-bottom: 0px;
    }

	.departments-nav{
        margin-bottom: 30px;
    }

	.departments-nav ul li{
		width: calc(50% - 10px);
	}

	.departments-nav ul li .nav-link{
		font-size: 16px;
		flex-direction: column;
	}

	.departments-item{
		padding: 0;
	}

	.departments-video-box{
		position: relative;
		width: 100%;
	}

	.departments-video-box .video-play-button{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50% , -50%);
	}

	.departments-item-image{
		position: initial;
	}

	.departments-item-image figure{
		height: auto;
	}

	.departments-item-image img{
		height: auto;
		aspect-ratio: 1 / 0.6;
	}

	.departments-item-content-box{
        padding: 20px;
    }

	.departments-item-content-title{
        margin-bottom: 20px;
        padding-bottom: 20px;
    }

	.departments-item-content-title h3{
        font-size: 20px;
    }

	.recent-documents-item-content h3{
		font-size: 18px;
	}

	.award-item{
		padding: 20px;
	}

	.award-item-image,
	.award-item-title{
        margin-bottom: 20px;
    }

	.award-item-image figure,
	.award-item-image img{
        max-width: 60px;
    }

	.award-item-title h3{
		font-size: 18px;
	}

	.activities-item-content h2{
		font-size: 18px;
	}

	.testimonial-item{
		padding: 20px;
		gap: 20px;
	}

	.testimonial-item-content{
		margin-top: 20px;
	}

	.testimonial-item-content p{
		font-size: 16px;
	}

	.testimonial-item-author{
		padding-top: 20px;
	}

	.testimonial-author-content h2{
		font-size: 18px;
	}

	.testimonial-pagination.swiper-pagination-bullets{
		right: 20px;
		bottom: 40px;
	}

	.testimonial-footer-box{
		gap: 10px;
	}

	.testimonial-footer-image img{
		max-width: 40px;
	}

	.testimonial-footer-title p{
		text-align: center;
	}

	.testimonial-footer-body ul i{
		font-size: 16px;
	}

	.testimonial-footer-body ul{
		justify-content: center;
	}

	.team-item-content p{
		margin: 5px 0 0;
	}

	.faqs-image img{
		aspect-ratio: 1 / 1.141;
	}

	.faqs-cta-box{
		width: 170px;
		border-width: 10px;
	}

	.faqs-cta-box::before{
		top: -30px;
	}

	.faqs-cta-box::after{
		left: -30px;
	}

	.faqs-cta-box-content{
		min-height: 120px;
		padding: 10px;
	}

	.faqs-cta-box-content h2,
	.faqs-cta-box-content h3{
        font-size: 16px;
    }

	.faq-accordion .accordion-header .accordion-button{
        padding: 12px 38px 12px 15px;
		font-size: 16px;
    }

	.faq-accordion .accordion-item .accordion-button::after,
	.faq-accordion .accordion-item .accordion-button.collapsed::after{
		font-size: 20px;
	}

	.faq-accordion .accordion-item .accordion-body{
        padding: 12px 15px;
    }

	.post-item-content h2{
		font-size: 18px;
	}

	.footer-content-box{
		margin-top: 20px;
		padding-top: 20px;
	}

	.footer-content-box-title h2{
        font-size: 20px;
    }

	.footer-content-box-title{
		margin-bottom: 20px;
		padding-bottom: 20px;
	}

	.footer-contact-list,
	.footer-newsletter-box{
		max-width: 100%;
	}

	.footer-contact-list ul li{
		font-size: 16px;
        margin-bottom: 10px;
        padding-bottom: 10px;
    }

	.footer-newsletter-content{
		margin-top: 15px;
	}

	.footer-social-links{
        margin-top: 20px;
    }

	.footer-copyright{
		justify-content: center;
		padding: 15px 0;
	}

	.footer-menu ul li{
		font-size: 14px;
	}
	
	.page-header{
		height: auto;
		min-height: 0;
		padding: 110px 0 34px;
		overflow-x: clip;
	}

	.page-header-box{
		height: auto;
		justify-content: flex-start;
		margin-bottom: 18px;
		width: 100%;
		max-width: 100%;
		min-width: 0;
	}

	.page-header-box h1,
	.page-header-box .page-header-title{
		display: block;
		width: 100%;
		max-width: 100%;
		font-size: 26px;
		line-height: 1.25em;
		overflow-wrap: anywhere;
		word-break: break-word;
		overflow: hidden; /* contain SplitText char offsets */
	}

	.page-header .bradcrumbs{
		width: 100%;
		max-width: 100%;
		min-width: 0;
	}

	.page-header nav{
		position: relative !important;
		right: auto !important;
		bottom: auto !important;
		left: auto !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		overflow: visible !important;
	}

	.page-header ol.breadcrumb{
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: wrap !important;
		justify-content: flex-start !important;
		align-items: flex-start !important;
		gap: 6px;
		width: 100% !important;
		max-width: 100% !important;
		filter: none;
	}

	/* Ponsel: pill kecil yang wrap ke baris baru (bukan scroll / stack penuh) */
	.page-header ol li.breadcrumb-item,
	.page-header ol li.breadcrumb-item:first-child{
		clip-path: none !important;
		border-radius: 6px;
		padding: 7px 10px;
		font-size: 11px;
		line-height: 1.35em;
		display: inline-flex !important;
		flex: 0 1 auto !important;
		width: auto !important;
		max-width: 100% !important;
		box-sizing: border-box;
		white-space: normal !important;
		overflow-wrap: anywhere;
		word-break: break-word;
	}

	.page-header ol li.breadcrumb-item a{
		white-space: normal !important;
		overflow-wrap: anywhere;
	}

	.page-header ol li.breadcrumb-item::before{
		font-size: 11px;
		margin-right: 6px;
		flex: 0 0 auto;
	}

	.approach-item{
        padding: 20px;
        min-height: 250px;
        gap: 20px;
    }

	.approach-cta-item-header h3{
		font-size: 18px;
	}

	.approach-cta-item-body{
        padding-top: 20px;
    }

	.approach-cta-counter-item{
		margin-top: 20px;
	}

	.approach-cta-counter-item-no h4{
        width: 45px;
        font-size: 24px;
    }

	.approach-cta-counter-item-content{
        width: calc(100% - 60px);
    }

	.approach-cta-counter-item-content p{
        margin: 5px 0 0;
    }

	.approach-item-contant h3{
		font-size: 18px;
	}

	.our-story{
		min-height: 450px;
	}

	.our-story-button.video-play-button{
		margin: 0 0 0 10px;
	}

	.progress-image img{
		aspect-ratio: 1 / 0.955;
	}

	.opening-hour-box{
		bottom: 10px;
		left: 10px;
		padding: 12px;
	}

	.opening-hour-box h3{
		font-size: 18px;
		margin-bottom: 10px;
	}

	.opening-hour-box ul li{
		font-size: 14px;
	}

	.progress-body{
		gap: 20px;
	}

	.progress-body-item{
		width: 100%;
	}

	.progress-body-item-content h3{
		font-size: 18px;
	}

	.progress-body-list ul{
		gap: 10px;
	}

	.progress-body-list ul li{
		width: 100%;
	}

	.author-signature img{
		max-width: 160px;
	}

	.benefits-item{
		width: 100%;
	}

	.benefits-item .icon-box{
        margin-bottom: 20px;
    }

	.benefits-item-content h3{
		font-size: 18px;
	}

	.benefits-footer .skills-progress-bar .skill-data .skill-title,
	.benefits-footer .skills-progress-bar .skill-data .skill-no{
		font-size: 18px;
	}

	.benefits-image figure{
		padding: 0 40px;
	}

	.page-category-list .page-category-list-title{
        font-size: 18px;
    }

	.page-category-list ul li{
        margin-bottom: 15px;
        padding-bottom: 15px;
    }

	.page-category-list ul li a::before{
        width: 16px;
        height: 16px;
    }

	.sidebar-cta-box-header{
		margin-bottom: 20px;
		padding-bottom: 20px;
	}

	.sidebar-cta-title h2{
		font-size: 18px;
	}

	.sidebar-cta-contact-content h3{
		font-size: 16px;
	}

	.sidebar-cta-box-btn{
        margin-top: 21px;
    }
	
	.page-single-image img{
		aspect-ratio: 1 / 0.65;
	}

	.service-entry h2{
		font-size: 26px;
	}

	.service-entry h3{
		font-size: 18px;
		margin-bottom: 5px;
	}

	.service-entry ul{
		gap: 10px;
	}

	.service-entry ul li{
		width: 100%;
	}

	.service-feature-image img{
        aspect-ratio: 1 / 0.98;
    }

	.service-feature-items-list{
		gap: 20px;
	}

	.service-feature-item{
		width: 100%;
	}

	.service-access-image-content{
		padding: 0;
	}

	.service-access-image{
		position: initial;
		height: auto;
		margin-bottom: 20px;
	}

	.service-access-image figure,
	.service-access-image img{
		height: auto;
	}

	.service-access-image img{
		aspect-ratio: 1 / 0.65;
	}

	.service-access-item-list{
		gap: 20px;
	}

	.service-access-item{
		width: 100%;
		background: var(--primary-color);
	}

	.service-access-item .icon-box{
		margin-bottom: 20px;
	}

	.service-complaint-list{
        margin-top: 20px;
    }

	.page-departments .departments-item{
		min-height: auto;
	}

	.departments-item-title h2{
		font-size: 18px;
	}

	.department-entry h2{
        font-size: 26px;
    }

	.department-entry h3{
		font-size: 18px;
	}

	.department-highlighted-box{
        margin: 20px 0;
		padding: 15px;
    }

	.department-highlighted-box h3{
        font-size: 16px;
    }

	.department-responsibility-image,
	.department-responsibility-items-list{
		width: 100%;
	}

	.department-responsibility-image figure,
	.department-responsibility-image img{
		height: auto;
	}

	.department-job-item{
		width: 100%;
	}

	.post-single-meta ol li,
	.post-single-meta ol li i{
		font-size: 16px;
	}

	.post-image img{
		aspect-ratio: 1 / 0.7;
	}

	.post-entry blockquote{
		padding: 65px 20px 20px 20px;
	}

	.post-entry blockquote p{
		font-size: 16px;
	}

	.post-entry h2{
		font-size: 26px;
	}
	
	.tag-links{
		font-size: 18px;
	}

	.activity-entry h2{
		font-size: 26px;
	}

	.activity-entry h3{
		font-size: 18px;
		margin-bottom: 5px;
	}

	.activity-entry ul{
		gap: 10px;
	}

	.activity-entry ul li{
		width: 100%;
	}

	.activity-program-item-list{
        margin-bottom: 20px;
        padding-bottom: 0;
        border: none;
        gap: 20px;
    }

	.activity-program-item{
		width: 100%;
	}

	.activity-program-item-header{
		margin-bottom: 10px;
	}

	.activity-support-item{
		gap: 15px;
	}

	.activity-support-item-content{
		width: 100%;
	}

	.team-single-image img{
		aspect-ratio: 1 / 1.26;
	}

	.team-skills-list{
		padding: 15px;
		left: 10px;
		right: 10px;
		bottom: 10px;
		max-width: 100%;
	}

	.team-skills-list .skills-progress-bar .skill-data .skill-title,
	.team-skills-list .skills-progress-bar .skill-data .skill-no{
		font-size: 16px;
	}

	.team-contact-item-content h3{
		font-size: 18px;
	}

	.team-contact-form{
        padding: 20px;
    }

	.team-qualification-item-list{
		gap: 15px;
	}

	.team-qualification-item{
        padding: 15px;
		width: calc(50% - 7.5px);
    }

	.team-qualification-item-header{
		gap: 10px;
	}

	.team-qualification-item-title h3{
		font-size: 16px;
	}

	.page-testimonials .testimonial-item{
        padding: 20px;
    }

	.contact-info-item .icon-box{
		margin-bottom: 20px;
	}

	.contact-info-item-content h2{
		font-size: 18px;
	}
	
	.contact-info-item-content ul{
		margin-top: 10px;
	}

	.contact-us-image img{
        aspect-ratio: 1 / 1.2;
        object-position: center center;
    }

	.contact-image-content{
        right: 20px;
        bottom: 20px;
        left: 20px;
    }

	.contact-image-content h3{
		font-size: 18px;
	}

	.contact-us-form{
        padding: 20px;
    }

	.google-map-iframe{
		height: 350px;
	}
}

/************************************/
/***   35. Home - Version 2 css   ***/
/************************************/

.hero-metal{
    position: relative;
	background-image: url('../images/hero-bg-metal.jpg');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	overflow: hidden;
}

.hero-box-metal{
	position: relative;
	min-height: 730px;
	align-content: center;
    padding: 295px 0 180px;
}

.hero-box-metal:before{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: linear-gradient(270deg, transparent 0%, rgba(32, 32, 32, 0.95) 65%);
	height: 100%;
	width: 100%;
	z-index: 1;
}

.hero-box-metal .container{
	position: relative;
	z-index: 2;
}

.hero-content-metal{
    max-width: 780px;
}

.hero-body-item-list-metal{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	border-top: 1px solid var(--dark-divider-color);
    margin-top: 40px;
	padding-top: 40px;
}

.hero-body-item-metal{
	width: calc(50% - 15px);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 15px;
}

.hero-body-item-metal .icon-box{
	position: relative;
	height: 60px;
	width: 60px;
	background-color: var(--accent-color);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.hero-body-item-metal .icon-box:before{
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	background: var(--accent-secondary-color);
	border-radius: 50%;
	width: 100%;
	height: 100%;
	transform: scale(0);
	transition: all 0.4s ease-in-out;
	z-index: 0;
}

.hero-body-item-metal:hover .icon-box:before{
	transform: scale(1);
}

.hero-body-item-metal .icon-box img{
	position: relative;
	width: 100%;
	max-width: 30px;
	transition: all 0.4s ease-in-out;
	z-index: 1;
}

.hero-body-item-metal:hover .icon-box img{
	filter: brightness(0) invert(0);
}

.hero-body-item-content-metal{
	width: calc(100% - 75px);
}

.hero-body-item-content-metal h2{
	font-size: 20px;
	line-height: 1.4em;
	color: var(--white-color);
}

.scrolling-ticker-metal{
    position: relative;
	background: var(--accent-color);
	padding: 30px 0;
    z-index: 1;
}

.scrolling-ticker-box-metal{
	--gap: 30px;
	display: flex;
	overflow: hidden;
	user-select: none;
	gap: var(--gap);
	align-items: center;
}

.scrolling-content-metal{
	flex-shrink: 0;
	display: flex;
	gap: var(--gap);
	min-width: 100%;
	animation: scroll 80s linear infinite;
}

.scrolling-content-metal span{
	display: inline-flex;
	align-items: center;
	gap: var(--gap);
	font-size: 30px;
	font-weight: 500;
	line-height: 1.1em;
	color: var(--white-color);
	text-transform: capitalize;
}

.scrolling-content-metal span img{
	width: 100%;
	max-width: 26px;
	animation: sparkelotate 3s linear infinite;
}

@keyframes sparkelotate{
	0%{
		transform: rotate(0) scale(1);
    }
	50%{
		transform: rotate(180deg) scale(0.5);
    }
    100%{
		transform: rotate(360deg) scale(1);
    }
}

@keyframes scroll{
	from{
		transform: translateX(0);
	}
	to{
		transform: translateX(calc(-100% - var(--gap)));
	}
}

.about-us-metal{
    padding: 120px 0;
}

.about-us-image-box-metal{
    position: relative;
    height: 100%;
}

.about-us-image-metal{
	height: 100%;
    margin-left: 50px;
}

.about-us-image-metal figure{
    display: block;
    height: 100%;
    border-radius: 10px;
}

.about-us-image-metal img{
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1.25;
    object-fit: cover;
    border-radius: 10px;
}

.about-us-rating-box-metal{
    position: absolute;
    top: 100px;
	left: 0;
    width: 200px;
    background: var(--accent-secondary-color);
    border-radius: 10px;
    text-align: center;
    padding: 30px 20px;
	animation: ratingmove 3s infinite linear alternate;
}

@keyframes ratingmove{
	50%{
		left: 40px;
	}
}

.about-rating-star-metal{
    display: block;
    margin-bottom: 20px;
}

.about-rating-star-metal i{
    color: var(--accent-color);
}

.about-us-rating-box-metal h2{
    font-size: 40px;
    line-height: 1em;
}

.about-us-rating-box-metal h2 sub{
    font-size: 20px;
    bottom: 0;
}

.about-us-rating-box-metal h3{
    font-size: 20px;
	line-height: 1.4em;
    margin-top: 20px;
}

.about-us-content-metal{
    height: 100%;
    align-content: center;
    margin-left: 15px;
}

.about-us-body-box-metal{
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.about-body-info-box-metal{
    width: calc(58% - 15px);
}

.about-skills-list-metal,
.about-author-box-metal{
    border-top: 1px solid var(--divider-color);
    margin-top: 40px;
    padding-top: 40px;
}

.about-skills-list-metal .skills-progress-bar{
    margin-bottom: 40px;
}

.about-skills-list-metal .skills-progress-bar:last-child{
    margin-bottom: 0;
}

.about-skills-list-metal .skills-progress-bar .skill-data .skill-title,
.about-skills-list-metal .skills-progress-bar .skill-data .skill-no{
    font-size: 16px;
}

.about-author-box-metal{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
}

.about-author-image-metal figure{
    display: block;
    border-radius: 50%;
}

.about-author-image-metal img{
    width: 100%;
    max-width: 50px;
    border-radius: 50%;
}

.about-author-content-metal{
    width: calc(100% - 65px);
}

.about-author-content-metal h3{
    font-size: 20px;
}

.about-author-content-metal p{
    margin: 5px 0 0;
}

.about-counter-box-metal{
    width: calc(42% - 15px);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 30px;
    background: var(--secondary-color);
	border-radius: 10px;
    padding: 30px;
}

.about-counter-content-metal{
	border-bottom: 1px solid var(--divider-color);
    padding-bottom: 30px;
}

.about-counter-content-metal h2{
    font-size: 40px;
}

.about-counter-content-metal h2 sub{
    font-size: 16px;
    bottom: 0;
}

.about-contact-box-metal .icon-box{
	position: relative;
	height: 50px;
	width: 50px;
	background-color: var(--accent-color);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	margin-bottom: 20px;
}

.about-contact-box-metal .icon-box:before{
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	background: var(--primary-color);
	border-radius: 50%;
	width: 100%;
	height: 100%;
	transform: scale(0);
	transition: all 0.4s ease-in-out;
	z-index: 0;
}

.about-counter-box-metal:hover .about-contact-box-metal .icon-box:before{
	transform: scale(1);
}

.about-contact-box-metal .icon-box img{
	position: relative;
	width: 100%;
	max-width: 24px;
	z-index: 1;
}

.about-contact-info-metal h3{
	font-size: 20px;
}

.about-contact-info-metal p{
	margin: 10px 0 0;
}

.about-contact-info-metal h4{
	font-size: 20px;
	color: var(--accent-color);
	border-top: 1px solid var(--divider-color);
	margin-top: 20px;
	padding-top: 20px;
}

.about-contact-info-metal h4 a{
	color: inherit;
	transition: all 0.3s ease-in-out;
}

.about-contact-info-metal h4 a:hover{
	color: var(--primary-color);
}

.our-service-metal{
	background-image: url('../images/section-bg-image-1.png');
	background-repeat: no-repeat;
	background-position: bottom center;	
	background-size: auto;
	padding: 120px 0;
}

.service-item-metal{
	min-height: 440px;
	background: var(--white-color);
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 30px;
	height: calc(100% - 30px);
	margin-bottom: 30px;
	padding: 50px;
	transition: all 0.4s ease-in-out;
}

.service-item-metal:hover{
	transform: translateY(-5px);
}

.service-item-header-metal .icon-box{
	position: relative;
	height: 60px;
	width: 60px;
	background-color: var(--accent-color);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	margin-bottom: 30px;
}

.service-item-header-metal .icon-box:before{
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	background: var(--primary-color);
	border-radius: 50%;
	width: 100%;
	height: 100%;
	transform: scale(0);
	transition: all 0.4s ease-in-out;
	z-index: 0;
}

.service-item-metal:hover .service-item-header-metal .icon-box:before{
	transform: scale(1);
}

.service-item-header-metal .icon-box img{
	position: relative;
	width: 100%;
	max-width: 30px;
	z-index: 1;
}

.service-item-content-metal h2{
	font-size: 20px;
}

.service-item-content-metal h2 a{
	color: inherit;
}

.service-item-content-metal p{
	margin: 10px 0 0;
}

.service-item-btn-metal{
	border-top: 1px solid var(--divider-color);
	padding-top: 30px;
}

.why-we-stand-metal{
	padding: 120px 0;
}

.why-we-stand-content-metal{
	margin-right: 15px;
}

.why-we-stand-item-metal{
    position: relative;
    border-radius: 10px;
    margin-bottom: 30px;
    padding: 30px;
    overflow: hidden;
}

.why-we-stand-item-metal:last-child{
	margin-bottom: 0;
}

.why-we-stand-item-metal:before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--secondary-color);
    border-radius: 0;
    width: 100%;
    height: 100%;
    transition: all 0.4s ease-in-out;
    z-index: 1;
}

.why-we-stand-item-metal.active::before,
.why-we-stand-item-metal:hover::before{
    transform: translate(0%, -100%);
}

.why-we-stand-item-image-metal{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	opacity: 0;
	transition: all 0.4s ease-in-out;
}

.why-we-stand-item-metal.active .why-we-stand-item-image-metal, 
.why-we-stand-item-metal:hover .why-we-stand-item-image-metal{
	opacity: 1;
}

.why-we-stand-item-image-metal::after{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--primary-color);
	opacity: 60%;
	width: 100%;
	height: 100%;
}

.why-we-stand-item-image-metal figure{
    display: block;
	width: 100%;
    height: 100%;
}

.why-we-stand-item-image-metal img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.why-we-stand-item-body-metal{
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	height: 100%;
    z-index: 2;
}

.why-we-stand-item-body-metal .icon-box{
    position: relative;
    height: 50px;
    width: 50px;
    background-color: var(--accent-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.why-we-stand-item-body-metal .icon-box img{
    width: 100%;
    max-width: 24px;
}

.why-we-stand-item-content-metal{
	width: calc(100% - 65px);
}

.why-we-stand-item-content-metal h3{
	font-size: 20px;
	transition: all 0.4s ease-in-out;
}

.why-we-stand-item-content-metal p{
	margin: 10px 0 0;
	transition: all 0.3s ease-in-out;
}

.why-we-stand-item-metal.active .why-we-stand-item-content-metal h3,
.why-we-stand-item-metal.active .why-we-stand-item-content-metal p,
.why-we-stand-item-metal:hover .why-we-stand-item-content-metal h3,
.why-we-stand-item-metal:hover .why-we-stand-item-content-metal p{
	color: var(--white-color);
}

.why-we-stand-image-box-metal{
	position: relative;
	height: 100%;
}

.why-we-stand-img-metal{
	height: 100%;
}

.why-we-stand-img-metal figure{
	height: 100%;
	display: block;
	border-radius: 10px;
}

.why-we-stand-img-metal img{
	width: 100%;
	height: 100%;
    aspect-ratio: 1 / 1.133;
	object-fit: cover;
	border-radius: 10px;
}

.why-we-stand-award-box-metal{
	max-width: 315px;
	position: absolute;
	right: 40px;
	bottom: 40px;
	background: var(--dark-divider-color);
    border-radius: 10px;
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	padding: 30px;
	z-index: 2;
}

.why-we-stand-award-box-metal .icon-box img{
	width: 100%;
	max-width: 65px;
	border-radius: 10px;
}

.why-we-stand-award-content-metal{
	width: calc(100% - 85px);
	border-left: 1px solid var(--dark-divider-color);
	margin-left: 20px;
	padding-left: 20px;
}

.why-we-stand-award-content-metal p{
	color: var(--white-color);
	margin: 0;
}

.our-awards-metal{
	background-image: url('../images/section-bg-image-2.png');
    background-position: bottom center;
    background-repeat: no-repeat;
    background-size: auto;
	padding: 120px 0;
}

.awards-item-metal{
	background: var(--dark-divider-color);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border-radius: 10px;
	min-height: 450px;
    display: flex;
    flex-direction: column;
	justify-content: space-between;
	gap: 30px;
	height: calc(100% - 30px);
	margin-bottom: 30px;
    padding: 40px;
	transition: all 0.4s ease-in-out;
}

.awards-item-metal:hover{
	transform: translateY(-5px);
}

.awards-item-header-metal h3{
	display: inline-block;
	color: var(--white-color);
	font-size: 16px;
	line-height: normal;
	background: var(--dark-divider-color);
    border-radius: 5px;
	padding: 7px 20px;
}

.award-item-img-metal img{
	width: 100%;
	max-width: 160px;
	object-fit: cover;
	border-radius: 10px;
}

.award-item-content-metal{
	border-top: 1px solid var(--dark-divider-color);
	margin-top: 40px;
	padding-top: 40px;
}

.award-item-content-metal h3{
	color: var(--white-color);
	font-size: 20px;
}

.award-item-content-metal p{
	color: var(--white-color);
	margin: 15px 0 0;
}

.company-supports-slider-box-metal{
    margin-top: 30px;
}

.company-supports-content-metal{
    display: flex;
    align-items: center;
	justify-content: space-between;
	gap: 30px;
	margin-bottom: 40px;
	text-align: center;
}

.company-supports-content-metal hr{
    height: 1px;
	flex-grow: 1;
    color: var(--dark-divider-color);
    opacity: 1;
    margin: 0;
}

.company-supports-content-metal h3{
	color: var(--white-color);
	font-size: 16px;
    margin-bottom: 0;
}

.company-supports-slider-metal{
	padding: 0 2.604vw;
} 

.company-supports-logo-metal{
	text-align: center;
}

.company-supports-logo-metal img{
	width: 100%;
	max-width: 165px;
	height: 40px;
}

.our-benefits-metal{
	padding: 120px 0;
}

.benefit-cta-box-metal{
	position: relative;
	padding: 40px;
	align-content: end;
	border-radius: 10px;
	height: 100%;
}

.benefit-cta-image-metal{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	height: 100%;
	width: 100%;
}

.benefit-cta-image-metal figure{
	position: relative;
	display: block;
	height: 100%;
	border-radius: 10px;
}

.benefit-cta-image-metal figure:before{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0px;
	height: 100%;
	width: 100%;
	background: linear-gradient(180deg, transparent 37.06%, var(--primary-color) 87.41%);
	border-radius: 10px;
}

.benefit-cta-image-metal img{
	height: 100%;
	width: 100%;
	object-fit: cover;
	border-radius: 10px;
}

.benefit-cta-content-metal{
	position: relative;
	z-index: 2;
}

.benefit-cta-content-metal p{
	font-size: 16px;
	font-weight: 500;
	color: var(--white-color);
	margin: 0;
}

.benefit-item-list-metal{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}

.benefit-item-metal{
	width: calc(50% - 15px);
	background-color:#f5f5f5;
	border-radius: 10px;
	min-height: 380px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 30px;
	padding: 30px;
}

.benefit-item-header-metal .icon-box{
	position: relative;
	height: 50px;
	width: 50px;
	background-color: var(--accent-color);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	margin-bottom: 30px;
}

.benefit-item-header-metal .icon-box:before{
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	background: var(--primary-color);
	border-radius: 50%;
	width: 100%;
	height: 100%;
	transform: scale(0);
	transition: all 0.4s ease-in-out;
	z-index: 0;
}

.benefit-item-metal:hover .benefit-item-header-metal .icon-box:before{
	transform: scale(1);
}

.benefit-item-header-metal .icon-box img{
	position: relative;
	width: 100%;
	max-width: 24px;
	z-index: 1;
}

.benefit-item-content-metal h3{
	font-size: 20px;
}

.benefit-item-content-metal p{
	margin: 10px 0 0;
}

.benefit-item-body-metal{
	border-top: 1px solid var(--divider-color);
	padding-top: 30px;
}

.benefit-item-body-metal ul{
	list-style: none;
	margin: 0;
	padding: 0;
}

.benefit-item-body-metal ul li{
	position: relative;
	color: var(--primary-color);
	line-height: 1.5em;
	padding-left: 16px;
	margin-bottom: 10px;
}

.benefit-item-body-metal ul li:last-child{
	margin-bottom: 0;
}

.benefit-item-body-metal ul li:before{
	content: '';
	position: absolute;
	top: 9px;
	left: 0;
	background-color: var(--accent-color);
	height: 6px;
	width: 6px;
}

.benfit-footer-metal{
	margin-top: 60px;
}

.benefit-footer-list-metal ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 15px 30px;
	list-style: none;
	padding: 0;
	margin: 0 auto;
}

.benefit-footer-list-metal ul li{
	position: relative;
	font-weight: 500;
	border: 1px solid var(--divider-color);
    color: var(--primary-color);
    padding: 12px 16px 12px 32px;
    border-radius: 100px;
	transition: all 0.4s ease-in-out;
}

.benefit-footer-list-metal ul li::before{
	content: '';
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--accent-color);
    border-radius: 50%;
    width: 6px;
    height: 6px;
	transition: all 0.4s ease-in-out;
}

.benefit-footer-list-metal ul li:hover{
	background: var(--primary-color);
	color: var(--white-color);
}

.benefit-footer-list-metal ul li:hover::before{
	background: var(--white-color);
}

.intro-video-metal{
    overflow: hidden;
}

.intro-video-metal .container-fluid{
    padding: 0;
}

.intro-video-box-metal{
    position: relative;
}

.intro-video-image-metal figure{
    position: relative;
    display: block;
}

.intro-video-image-metal figure::before{
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--primary-color);
    opacity: 40%;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.intro-video-image-metal figure img{
    width: 100%;
    aspect-ratio: 1 / 0.44;
    object-fit: cover;
	height: 500px;
}

.play-video-circle-metal{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.play-video-circle-metal a{
    display: block;
    border-radius: 50%;
    overflow: hidden;
    cursor: none;
}

.play-video-circle-metal a img{
    width: 100%;
    max-width: 130px;
    border-radius: 50%;
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    animation: infiniterotate 30s infinite linear;
}

.play-video-circle-metal a:hover img{
    animation-play-state: paused;
}

@keyframes infiniterotate{
    0%{
        transform: rotate(0);
    }

    100%{
        transform: rotate(360deg);
    }
}

.our-team-metal{
    padding: 120px 0;
}

.team-item-metal{
    position: relative;
    border-radius: 10px;
    height: calc(100% - 30px);
    margin-bottom: 30px;
    overflow: hidden;
}

.team-item-image-metal a{
    display: block;
    cursor: none;
}

.team-item-image-metal figure{
    display: block;
}

.team-item-image-metal figure img{
    width: 100%;
    aspect-ratio: 1 / 1.29;
    object-fit: cover;
    transition: all 0.6s ease-in-out;
}

.team-item-metal:hover .team-item-image-metal figure img{
	transform: scale(1.06);
}

.team-item-body-metal{
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 20px;
    text-align: center;
    background: var(--dark-divider-color);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-radius: 10px;
    padding: 20px;
    overflow: hidden;
    z-index: 1;
}

.team-item-content-metal h2{
    color: var(--white-color);
    font-size: 20px;
}

.team-item-content-metal h2 a{
    color: inherit;
}

.team-item-content-metal p{
    color: var(--white-color);
    margin: 10px 0 0;
}

.team-social-list-metal{
    height: 0;
    opacity: 0;
    visibility: hidden;
	border-top: 1px solid var(--dark-divider-color);
    transition: all 0.4s ease-in-out;
}

.team-item-metal:hover .team-social-list-metal{
    height: 59px;
    opacity: 1;
	margin-top: 20px;
	padding-top: 20px;
    visibility: visible;
}

.team-social-list-metal ul{
    list-style: none;
    display: inline-flex;
    justify-content: center;
    align-items: center;
	gap: 15px;
    margin: 0;
	padding: 0;
}

.team-social-list-metal ul li a{
	width: 40px;
	height: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: var(--dark-divider-color);
	border-radius: 100px;
	transition: all 0.3s ease-in-out;
}

.team-social-list-metal ul li a:hover{
	background: var(--accent-color);
}

.team-social-list-metal ul li a i{
	position: relative;
    font-size: 18px;
    color: var(--white-color);
	z-index: 1;
}

.our-departments-metal{
	background-image: url('../images/our-department-bg-image-metal.png');
    background-repeat: no-repeat;
    background-size: auto;
    background-position: bottom left;
    padding: 120px 0 0;
	margin-bottom: 95px;
}

.department-item-metal{
    position: relative;
    background-color: var(--white-color);
    border-radius: 10px;
    min-height: 295px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
    padding: 30px;
    overflow: hidden;
}

.department-item-metal::before{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    background: var(--accent-color);
    transition: all 0.4s ease-in-out;
}

.department-item-metal:hover:before{
	top: auto;
	height: 100%;
}

.department-item-header-metal .icon-box{
    position: relative;
    height: 50px;
    width: 50px;
    background-color: var(--accent-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.department-item-header-metal .icon-box::before{
    content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	background: var(--accent-secondary-color);
	border-radius: 50%;
	width: 100%;
	height: 100%;
	transform: scale(0);
	transition: all 0.4s ease-in-out;
	z-index: 0;
}

.department-item-metal:hover .icon-box::before{
    transform: scale(1);
}

.department-item-header-metal .icon-box img{
    position: relative;
    width: 100%;
    max-width: 24px;
    transition: all 0.4s ease-in-out;
    z-index: 1;
}

.department-item-metal:hover .icon-box img{
    filter: brightness(0) invert(0);    
}

.department-item-header-metal{
    position: relative;
    z-index: 1;
}

.department-item-content-metal{
    margin-top: 30px;
}

.department-item-content-metal h3{
    font-size: 20px;
    transition: all 0.4s ease-in-out;
}

.department-item-body-metal{
    position: relative;
    border-top: 1px solid var(--divider-color);
    padding-top: 20px;
    transition: all 0.4s ease-in-out;
}

.department-item-metal:hover .department-item-body-metal{
	border-color: var(--dark-divider-color);
}

.department-item-body-metal p{
	margin: 0;
    transition: all 0.3s ease-in-out;
}

.department-item-metal:hover .department-item-content-metal h3,
.department-item-metal:hover .department-item-body-metal p{
    color: var(--white-color);
}

.our-departments-pagination.swiper-pagination-bullets{
    text-align: center;
    margin-top: 40px;
}

.our-departments-pagination .swiper-pagination-bullet{
	border-radius: 100px;
	height: 10px;
	width: 10px;
	background: var(--divider-color);
	opacity: 1;
	margin: 0 3px;
	transition: all 0.3s ease-in-out;
}

.our-departments-pagination .swiper-pagination-bullet-active{
	width: 30px;
	background: var(--accent-color);
}

.department-footer-counter-list-metal{
    background-color: var(--primary-color);
    border-radius: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 30px 80px;
    align-items: center;
    margin-bottom: -95px;
	margin-top: 120px;
    padding: 60px;
}

.department-counter-item-metal{
    position: relative;
    width: calc(33.33% - 53.33px);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
}

.department-counter-item-metal::before{
    content: '';
    position: absolute;
    right: -40px;
    top: 0;
    bottom: 0;
    background: var(--dark-divider-color);
    width: 1px;
    height: 100%;
    transform: rotate(8deg);
}

.department-counter-item-metal:last-child::before,
.department-counter-item-metal:nth-child(3n + 3)::before{
    display: none;
}

.department-counter-item-metal .icon-box{
	position: relative;
    height: 50px;
    width: 50px;
    background-color: var(--accent-secondary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
	overflow: hidden;
	transition: all 0.4s ease-in-out;
}

.department-counter-item-metal:hover .icon-box{
	background: var(--accent-color);
}

.department-counter-item-metal .icon-box img{
	position: relative;
    width: 100%;
    max-width: 24px;
	transition: all 0.4s ease-in-out;
	z-index: 1;
}

.department-counter-item-metal:hover .icon-box img{
	filter: brightness(0) invert(1);
}

.department-counter-item-content-metal{
    width: calc(100% - 65px);
}

.department-counter-item-content-metal h2{
    color: var(--white-color);
    font-size: 30px;
}

.department-counter-item-content-metal h3{
    color: var(--white-color);
    font-size: 20px;
    margin: 10px 0 0;
    line-height: 1.4em;
}

.our-faqs-metal{
    padding: 120px 0;
}

.faq-image-box-metal{
    position: relative;
    height: 100%;
    margin-right: 15px;
}

.faq-image-metal{
    height: 100%;
}

.faq-image-metal figure{
    display: block;
    height: 100%;
    border-radius: 10px;
}

.faq-image-metal figure img{
    height: 100%;
    width: 100%;
    aspect-ratio: 1 / 1.16;
    object-fit: cover;
    border-radius: 10px;
}

.faq-cta-box-metal{
    position: absolute;
    right: 40px;
    bottom: 40px;
    text-align: center;
    max-width: 225px;
    background-color: var(--dark-divider-color);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-radius: 10px;
    padding: 30px;
    z-index: 1;
}

.faq-cta-box-header-metal h2{
    font-size: 48px;
    color: var(--white-color);
}

.faq-cta-box-header-metal p{
    color: var(--white-color);
    margin: 5px 0 0;
}

.faq-cta-box-body-metal{
    margin-top: 30px;
}

.faq-cta-box-body-metal span i{
    font-size: 18px;
    color: var(--accent-secondary-color);
}

.faq-cta-box-body-metal p{
    color: var(--white-color);
    margin: 10px 0 0;
}

.faq-contant-metal{
    height: 100%;
    align-content: center;
}

.faq-accordion-metal .accordion-item-metal{
    position: relative;
    background: var(--secondary-color);
    border-radius: 10px;
    margin-bottom: 25px;
    overflow: hidden;
}

.faq-accordion-metal .accordion-item-metal:last-child{
    margin-bottom: 0;
}

.faq-accordion-metal .accordion-header .accordion-button{
	font-size: 18px;
    font-weight: 500;
    line-height: 1.333em;
    background: transparent;
    color: var(--primary-color);
    padding: 16px 54px 16px 24px;
    transition: all 0.4s ease-in-out;
}

.faq-accordion-metal .accordion-item-metal .accordion-button:not(.collapsed){
	background-color: var(--accent-color);
    color: var(--white-color);
}

.faq-accordion-metal .accordion-item-metal .accordion-button::after{
    content: '\f068';
    font-family: 'Font Awesome 7 Free';
    position: absolute;
    right: 24px;
    top: 50%;
    font-size: 20px;
    font-weight: 600;
    transform: translateY(-50%);
    color: var(--primary-color);
    transition: all 0.4s ease-in-out;
}

.faq-accordion-metal .accordion-item-metal .accordion-button.collapsed::after{
    content: '\2b';
    font-family: 'FontAwesome';
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: var(--primary-color);
    transition: all 0.4s ease-in-out;
}

.faq-accordion-metal .accordion-button:not(.collapsed)::after{
    color: var(--white-color);
}

.faq-accordion-metal .accordion-item-metal .accordion-body{
    padding: 16px 24px;
}

.faq-accordion-metal .accordion-item-metal .accordion-body p{
    margin: 0;
}

.our-testimonials-metal{
	background-image: url('../images/testimonials-bg-metal.png');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: auto;
    padding: 120px 0;
}

.testimonial-client-box-metal{
    background-color: var(--accent-secondary-color);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 40px;
    height: 100%;
    padding: 50px;
}

.testimonial-client-box-header-metal h2{
    font-size: 18px;
	line-height: normal;
}

.testimonial-client-box-header-metal h2 span{
    font-size: 42px;
}

.testimonial-client-box-header-metal p{
    color: var(--primary-color);
    margin: 20px 0 0;
}

.testimonial-client-box-body-metal{
    border-top: 1px solid var(--divider-color);
    padding-top: 40px;
}

.testimonial-client-box-body-metal h2{
    font-size: 20px;
	line-height: normal;
}

.testimonial-client-box-body-metal h2 span{
    font-size: 44px;
}

.testimonial-rating-star-metal{
	display: inline-block;
	margin-top: 15px;
}

.testimonial-rating-star-metal i{
    font-size: 16px;
    color: var(--accent-color);
}

.testimonial-client-box-body-metal h3{
    font-size: 20px;
	line-height: 1.4em;
    max-width: 200px;
    margin-top: 30px;
}

.testimonial-slider-metal .swiper-wrapper{
	cursor: none;
}

.testimonial-item-metal{
    background-color: var(--dark-divider-color);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border-radius: 10px;
    min-height: 490px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: space-between;
    gap: 40px;
    padding: 40px;
}

.testimonial-item-rating-metal i{
    font-size: 16px;
    color: var(--accent-secondary-color);
}

.testimonial-item-content-metal p{
    font-size: 20px;
	font-weight: 500;
	line-height: 1.4em;
    color: var(--white-color);
    margin: 0;
}

.testimonial-author-metal{
    border-top: 1px solid var(--dark-divider-color);
    padding-top: 40px;
    margin-top: 40px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
}

.testimonial-author-image-metal figure{
    display: block;
    border-radius: 50%;
}

.testimonial-author-image-metal figure img{
    width: 100%;
    max-width: 50px;
    border-radius: 50%;
}

.testimonial-author-content-metal{
    width: calc(100% - 65px);
}

.testimonial-author-content-metal h3{
    font-size: 20px;
    color: var(--white-color);
}

.testimonial-author-content-metal p{
	color: var(--white-color);	
    margin: 5px 0 0;
}

.our-testimonials-metal .section-footer-text{
    margin-top: 60px;
}

.main-footer-metal{
	position: relative;
	background: var(--primary-color) url('../images/footer-bg-image-metal.jpg');
	background-repeat: no-repeat;
	background-position:  center center;
	background-size: cover;
	padding: 120px 0 0;
}

.main-footer-metal:before{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	height: 100%;
	width: 100%;
	/* Biru ke toska senada banner. Ujung toska digelapkan (#0E7F79, kontras
	   putih 4.85:1) karena footer berisi teks kecil. */
	background: linear-gradient(120deg, #0B5CAB 0%, #0B5CAB 40%, #0E7F79 100%);
	opacity: 96%;
	z-index: 1;
}

.main-footer-metal .container{
	position: relative;
	z-index: 2;
}

.footer-logo-metal img{
	width: 100%;
	max-width: 152px;
}

.about-footer-content-metal{
	margin-top: 20px;
}

.about-footer-content-metal p{
	color: var(--white-color);
	margin: 0;
}

.footer-social-links-metal{
	max-width: 340px;
	border-radius: 10px;
	margin-top: 50px;
}

.footer-social-links-metal h2{
	font-size: 20px;
	color: var(--white-color);
}

.footer-social-links-metal ul{
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	list-style: none;
	border-top: 1px solid var(--dark-divider-color);
	margin: 20px 0 0;
	padding: 20px 0 0;
}

.footer-social-links-metal ul li a{
	width: 40px;
	height: 40px;
	color: var(--white-color);
	background-color: var(--dark-divider-color);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: all 0.3s ease-in-out;
}

.footer-social-links-metal ul li a:hover{
	background: var(--accent-color);
}

.footer-social-links-metal ul li a i{
	font-size: 18px;
	color: inherit;
}

.footer-links-box-metal{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 30px 40px;
}

.footer-links-metal{
	max-width: 100%;
}

.footer-links-metal h2{
	font-size: 20px;
	color: var(--white-color);
	margin-bottom: 30px;
}

.footer-links-metal ul{
	list-style: disc;
	margin: 0;
	padding: 0 0 0 20px;
}

.footer-links-metal ul li{
	text-transform: capitalize;
	color: var(--white-color);
	line-height: 1.5em;
	margin-bottom: 15px;
}

.footer-links-metal ul li:last-child{
	margin-bottom: 0;
}

.footer-links-metal ul li::marker{
	color: var(--accent-secondary-color);
}

.footer-links-metal ul li a{
	color: inherit;
	transition: all 0.3s ease-in-out;
}

.footer-links-metal ul li a:hover{
	color: var(--accent-secondary-color);
}

.footer-links-metal.footer-contact-lists-metal{
	max-width: 100%;
}

.footer-links-metal.footer-contact-lists-metal ul{
	list-style: none;
	padding: 0;
}

.footer-contact-lists-metal ul li span{
	font-weight: 600;
}

.footer-links-metal.footer-newsletter-form-metal{
	width: 100%;
	max-width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 15px;
	border-top: 1px solid var(--dark-divider-color);
	margin-top: 10px;
	padding-top: 40px;
}

.footer-newsletter-form-metal form{
	width: 100%;
	max-width: 300px;
}

.footer-links-metal.footer-newsletter-form-metal h2{
	max-width: 350px;
	line-height: 1.4em;
	margin: 0;
}

.footer-newsletter-form-metal .form-group{
	display: flex;
	flex-wrap: wrap;
	background-color: var(--dark-divider-color);
	border-radius: 10px;
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
	border-radius: 10px;
	padding: 5px;
}

.footer-newsletter-form-metal .form-group .form-control{
	width: calc(100% - 40px);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5em;
	color: var(--white-color);
	background: transparent;
	border: none;
	border-radius: 0;
	outline: none;
	box-shadow: none;
	padding: 6px 14px;
}

.footer-newsletter-form-metal .form-group .form-control::placeholder{
	color: var(--white-color);
}

.footer-newsletter-form-metal .form-group .newsletter-btn-metal{
	width: 40px;
	height: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--accent-secondary-color);
	border: none;
	border-radius: 5px;
	outline: none;
	box-shadow: none;
	transition: all 0.3s ease-in-out;
}

.footer-newsletter-form-metal .form-group .newsletter-btn-metal:hover{
    background-color: var(--white-color);
}

.footer-newsletter-form-metal .form-group .newsletter-btn-metal i{
	color: var(--primary-color);
    font-size: 20px;
    transition: all 0.3s ease-in-out;
}

.footer-copyright-text-metal{
    border-top: 1px solid var(--dark-divider-color);
    margin-top: 80px;
    padding: 60px 0;
    text-align: center;
}

.footer-copyright-text-metal p{
    color: var(--white-color);
    margin: 0;
}

@media only screen and (max-width: 1024px){

	.hero-box-metal{
		padding: 235px 0 120px;
	}

	.about-us-image-box-metal{
		height: auto;
		max-width: 740px;
		margin: 0 auto 30px;
	}

	.about-us-image-metal,
	.about-us-image-metal figure,
	.about-us-image-metal img{
		height: auto;
	}

	.about-us-image-metal img{
		aspect-ratio: 1 / 1.1;
	}

	.about-us-content-metal{
		margin: 0;
	}

	.service-item-metal{
		min-height: 340px;
		padding: 30px;
	}

	.why-we-stand-content-metal{
		margin: 0 0 30px;
	}

	.why-we-stand-image-box-metal,
	.why-we-stand-img-metal,
	.why-we-stand-img-metal figure,
	.why-we-stand-img-metal img{
		height: auto;
	}
	
	.why-we-stand-img-metal img{
		aspect-ratio: 1 / 0.7;
	}

	.awards-item-metal{
		min-height: 380px;
		padding: 30px;
	}

	.award-item-img-metal img{
		max-width: 145px;
	}

	.award-item-content-metal{
		margin-top: 30px;
		padding-top: 30px;
	}

	.benefit-cta-box-metal{
		padding: 30px;
		height: auto;
		min-height: 500px;
		margin-bottom: 30px;
	}

	.benefit-item-metal{
    	min-height: 300px;
	}

	.intro-video-image-metal figure img{
		aspect-ratio: 1 / 0.66;
	}

	.team-item-image-metal figure img{
        aspect-ratio: 1 / 1.15;
    }

    .department-item-metal{
        padding: 20px;
        min-height: 260px;
    }

    .department-footer-counter-list-metal{
        padding: 20px;
        gap: 30px;
    }

    .department-counter-item-metal{
        width: calc(50% - 15px);
    }

    .department-counter-item-metal::before{
        right: -15px;
    }

    .department-counter-item-metal:nth-child(3n + 3)::before{
        display: block;
    }

    .department-counter-item-metal:nth-child(2n + 2)::before,
    .department-counter-item-metal:last-child::before{
        display: none;
    }

    .faq-image-box-metal{
        height: auto;
        margin: 0 auto 30px;
    }

    .faq-image-metal,
    .faq-image-metal figure,
    .faq-image-metal figure img{
        height: auto;
    }

    .faq-image-metal figure img{
        aspect-ratio: 1 / 0.7;
    }

    .faq-cta-box-metal{
        right: 30px;
        bottom: 30px;
        padding: 25px;
    }

    .testimonial-client-box-metal{
        height: auto;
        padding: 30px;
        margin-bottom: 30px;
    }

    .testimonial-item-metal{
        padding: 30px;
        gap: 30px;
        min-height: 370px;
    }

	.about-footer-metal{
		margin-bottom: 30px;
	}

	.footer-social-links-metal{
		padding: 20px;
		margin-top: 30px;
	}

	.footer-links-metal.footer-newsletter-form-metal{
		margin-top: 0;
		padding-top: 30px;
	}

	.footer-copyright-text-metal{
		margin-top: 30px;
    	padding: 30px 0;
	}
}

@media only screen and (max-width: 991px){

	.hero-box-metal{
		padding: 150px 0 60px;
	}

	.hero-box-metal:before{
		background: linear-gradient(270deg, transparent -52%, rgba(32, 32, 32, 0.95) 55%);
	}

	.hero-body-item-list-metal{
		margin-top: 30px;
		padding-top: 30px;
	}

	.hero-body-item-metal .icon-box{
		width: 50px;
		height: 50px;
	}

	.hero-body-item-metal .icon-box img{
		max-width: 24px;
	}

	.hero-body-item-content-metal{
		width: calc(100% - 65px);
	}

	.scrolling-ticker-metal{
		padding: 20px 0;
	}

	.scrolling-ticker-box-metal{
		--gap: 20px;
	}

	.scrolling-content-metal span{
		font-size: 26px;
	}

	.scrolling-content-metal span img{
		max-width: 22px;
	}

	.about-us-metal{
		padding: 60px 0;
	}

	.about-us-rating-box-metal h2{
		font-size: 32px;
	}

	.about-us-rating-box-metal h2 sub{
		font-size: 18px;
	}

	.about-skills-list-metal,
	.about-author-box-metal{
		margin-top: 30px;
		padding-top: 30px;
	}

	.about-skills-list-metal .skills-progress-bar{
		margin-bottom: 30px;
	}
		
	.about-counter-box-metal{
		gap: 20px;
		padding: 20px;
	}

	.about-counter-content-metal h2{
		font-size: 32px;
	}

	.about-counter-content-metal{
		padding-bottom: 20px;
	}

	.our-service-metal{
		background-size: 100% auto;
		padding: 60px 0;
	}

	.service-item-header-metal .icon-box{
		width: 50px;
		height: 50px;
	}

	.service-item-header-metal .icon-box img{
		max-width: 24px;
	}

	.why-we-stand-metal{
		padding: 60px 0;
	}

	.why-we-stand-item-metal{
		padding: 20px;
	}

	.why-we-stand-award-box-metal{
		width: 285px;
		padding: 20px;
		right: 30px;
		bottom: 30px;
	}

	.why-we-stand-award-content-metal{
		width: calc(100% - 75px);
		margin-left: 10px;
		padding-left: 10px;
	}

	.our-awards-metal{
		background-size: 150% auto;
		padding: 60px 0;
	}

	.company-supports-slider-box-metal{
		margin-top: 10px;
	}

	.company-supports-content-metal{
		margin-bottom: 30px;
	}

	.company-supports-slider-metal{
		padding: 0;
	}

	.company-supports-logo-metal img{
		max-width: 145px;
    	height: 34px;
	}

	.our-benefits-metal{
		padding: 60px 0;
	}

	.benfit-footer-metal{
		margin-top: 40px;
	}

	.benefit-footer-list-metal ul{
		gap: 15px;
	}

	.benefit-footer-list-metal ul li{
		font-size: 14px;
        padding: 10px 12px 10px 26px;
    }

	.benefit-footer-list-metal ul li:before{
		left: 12px;
	}

	.benfit-footer-metal .section-footer-text{
		margin-top: 20px;
	}

	.play-video-circle-metal a img{
        max-width: 100px;
    }

    .our-team-metal{
        padding: 60px 0;
    }

	.team-item-body-metal{
		left: 15px;
		right: 15px;
		bottom: 15px;
		padding: 15px;
	}

	.team-item-metal:hover .team-social-list-metal{
		margin-top: 15px;
    	padding-top: 15px;
	}

    .our-departments-metal{
		background-size: 300px auto;
        padding: 60px 0 0;
    }

    .our-departments-pagination.swiper-pagination-bullets{
        margin-top: 40px;
    }

    .department-footer-counter-list-metal{
        margin-top: 60px;
    }

    .department-counter-item-content-metal h2{
        font-size: 26px;
    }

    .department-counter-item-content-metal h3{
        font-size: 18px;
        margin: 5px 0 0;
    }

    .our-faqs-metal{
        padding: 60px 0;
    }

    .faq-cta-box-header-metal h2{
        font-size: 38px;
    }

    .faq-cta-box-body-metal{
        margin-top: 20px;
    }

    .faq-cta-box-body-metal span i{
        font-size: 16px;
    }

    .faq-accordion-metal .accordion-header .accordion-button{
        padding: 15px 45px 15px 20px;
    }

    .faq-accordion-metal .accordion-item-metal .accordion-button::after,
    .faq-accordion-metal .accordion-item-metal .accordion-button.collapsed::after{
        font-size: 18px;
        right: 20px;
    }

    .faq-accordion-metal .accordion-item-metal .accordion-body{
        padding: 15px 20px;
    }

    .our-testimonials-metal{
        padding: 60px 0;
    }

    .testimonial-client-box-metal{
        gap: 30px;
    }

    .testimonial-client-box-header-metal h2 span{
        font-size: 34px;
    }

    .testimonial-client-box-header-metal p{
        margin: 15px 0 0;
    }

    .testimonial-client-box-body-metal{
        padding-top: 30px;
    }

    .testimonial-client-box-body-metal h2 span{
        font-size: 34px;
    }

	.testimonial-client-box-body-metal h3{
		margin-top: 20px;
	}

    .testimonial-item-content-metal p{
        font-size: 18px;
    }

    .testimonial-author-metal{
        padding-top: 30px;
        margin-top: 30px;
    }

    .our-testimonials-metal .section-footer-text{
        margin-top: 40px;
    }

	.main-footer-metal{
		padding: 60px 0 0;
	}

	.footer-links-metal h2{
		margin-bottom: 20px;
	}

	.footer-links-metal ul li{
		margin-bottom: 10px;
	}
}

@media only screen and (max-width: 767px){

	.hero-body-item-list-metal{
		gap: 15px;
	}

	.hero-body-item-metal{
		width: calc(50% - 7.5px);
		text-align: center;
		justify-content: center;
	}

	.hero-body-item-content-metal{
		width: 100%;
	}

	.hero-body-item-content-metal h2{
		font-size: 16px;
	}

	.scrolling-ticker-metal{
        padding: 15px 0;
    }

	.scrolling-ticker-box-metal{
		--gap: 15px;
	}

	.scrolling-content-metal span{
		font-size: 22px;
	}

	.scrolling-content-metal span img{
		max-width: 18px;
	}

	.about-us-image-metal{
		margin-left: 30px;
	}

	.about-us-rating-box-metal{
		width: 150px;
		top: 20px;
		padding: 15px;
	}

	.about-rating-star-metal{
		margin-bottom: 15px;
	}

	.about-rating-star-metal i{
		font-size: 14px;
	}

	.about-us-rating-box-metal h2{
        font-size: 26px;
    }

	.about-us-rating-box-metal h2 sub{
        font-size: 16px;
    }

	.about-us-rating-box-metal h3{
		font-size: 16px;
		margin-top: 15px;
	}

	.about-body-info-box-metal,
	.about-counter-box-metal{
		width: 100%;
	}

	.about-skills-list-metal .skills-progress-bar{
        margin-bottom: 20px;
    }

	.about-author-content-metal h3{
		font-size: 18px;
	}

	.about-counter-content-metal h2{
        font-size: 26px;
    }

	.about-contact-info-metal h3,
	.about-contact-info-metal h4{
		font-size: 18px;
	}

	.service-item-metal{
        min-height: auto;
        padding: 20px;
		gap: 20px;
    }

	.service-item-header-metal .icon-box{
		margin-bottom: 20px;
	}

	.service-item-content-metal h2{
		font-size: 18px;
	}

	.service-item-btn-metal{
		padding-top: 20px;
	}

	.why-we-stand-item-content-metal{
		width: 100%;
	}

	.why-we-stand-item-content-metal h3{
		font-size: 18px;
	}

	.why-we-stand-img-metal img{
        aspect-ratio: 1 / 1.133;
    }

	.why-we-stand-award-box-metal{
        width: 245px;
        padding: 12px;
        right: 20px;
        bottom: 20px;
    }

	.why-we-stand-award-content-metal p{
		font-size: 14px;
	}

	.awards-item-metal{
		gap: 20px;
        padding: 20px;
        min-height: auto;
    }

	.award-item-img-metal img{
        max-width: 130px;
    }

	.award-item-content-metal{
        margin-top: 20px;
        padding-top: 20px;
    }

	.award-item-content-metal h3{
		font-size: 18px;
	}

	.award-item-content-metal p{
		margin-top: 10px;
	}
	
	.company-supports-content-metal{
		justify-content: center;
		gap: 10px;
	}

	.company-supports-content-metal{
		margin-bottom: 20px;
	}

	.company-supports-content-metal hr{
		display: none;
	}

	.benefit-cta-box-metal{
		padding: 20px;
		min-height: 350px;
	}

	.benefit-item-metal{
		width: 100%;
		min-height: auto;
		gap: 20px;
		padding: 20px;
	}

	.benefit-item-content-metal h3{
    	font-size: 18px;
	}

	.benefit-item-body-metal{
		padding-top: 20px;
	}

	.benefit-footer-list-metal ul li{
        padding: 8px 10px 8px 24px;
    }

	.benefit-footer-list-metal ul li:before{
        left: 10px;
    }

    .play-video-circle-metal a img{
        max-width: 80px;
    }

	.department-item-metal{
		min-height: auto;
	}

	.department-item-content-metal{
        margin-top: 20px;
    }

	.department-item-content-metal h3{
		font-size: 18px;
	}

    .our-departments-pagination.swiper-pagination-bullets{
        margin-top: 20px;
    }

	.department-footer-counter-list-metal{
		gap: 20px;
		margin-top: 30px;
	}

	.department-counter-item-metal{
		width: 100%;
	}

	.department-counter-item-metal::before{
		display: none;
	}

    .department-counter-item-content-metal h2{
        font-size: 22px;
    }

    .department-counter-item-content-metal h3{
        font-size: 16px;
    }

    .faq-image-metal figure img{
        aspect-ratio:  1 / 1.085;
    }

    .faq-cta-box-metal{
        right: 20px;
        bottom: 20px;
        padding: 15px;
    }

    .faq-cta-box-header-metal h2{
        font-size: 26px;
    }

    .faq-cta-box-body-metal{
        margin-top: 10px;
    }

    .faq-cta-box-header-metal p,
    .faq-cta-box-body-metal p{
        font-size: 14px;
    }

    .faq-cta-box-body-metal span i{
        font-size: 14px;
    }

    .faq-accordion-metal .accordion-header .accordion-button{
        font-size: 16px;
    }

	.faq-accordion-metal .accordion-header .accordion-button{
        padding: 12px 35px 12px 15px;
    }

    .faq-accordion-metal .accordion-item-metal .accordion-button::after, 
    .faq-accordion-metal .accordion-item-metal .accordion-button.collapsed::after{
        font-size: 16px;
        right: 15px;
    }

    .faq-accordion-metal .accordion-item-metal .accordion-body{
        padding: 12px 15px;
    }

    .testimonial-client-box-metal{
        gap: 20px;
		padding: 20px;
    }
    
    .testimonial-client-box-body-metal{
        padding-top: 20px;
    }

	.testimonial-client-box-body-metal h2 span,
    .testimonial-client-box-header-metal h2 span{
        font-size: 28px;
    }

	.testimonial-client-box-header-metal p{
		margin-top: 10px;
	}

    .testimonial-client-box-body-metal h3{
        font-size: 18px;
        margin-top: 15px;
		max-width: 100%;
    }

    .testimonial-item-metal{
        min-height: auto;
        gap: 20px;
		padding: 20px;
    }

    .testimonial-item-content-metal p{
        font-size: 16px;
    }

    .testimonial-author-metal{
        padding-top: 20px;
        margin-top: 20px;
    }

    .testimonial-author-content-metal h3{
        font-size: 18px;
    }

	.about-footer-content-metal{
		margin-top: 10px;
	}

	.footer-social-links-metal h2{
		font-size: 18px;
	}

	.footer-links-box-metal{
		grid-template-columns: 1fr;
	}

	.footer-links-metal,
	.footer-links-metal.footer-contact-lists-metal{
		max-width: 100%;
	}

	.footer-links-metal h2{
		font-size: 18px;
		margin-bottom: 15px;
	}

	.footer-newsletter-form-metal form{
		max-width: 100%;
	}

	.footer-copyright-text-metal{
		padding: 15px 0;
	}
}

/************************************/
/***   36. Home - Version 3 css   ***/
/************************************/

.hero-prime{
	position: relative;
	background-image: url('../images/hero-bg-prime.jpg');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	align-content: end;
	height: 100vh;
	min-height: 1000px;
	padding: 215px 0 100px;
	overflow: hidden;
    z-index: 1;
}

.hero-prime::before{
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--primary-color);
    width: 100%;
    height: 100%;
	opacity: 30%;
    z-index: 1;
}

.hero-prime::after{
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 17.1%, #000 91.71%);
    width: 100%;
    height: 500px;
	z-index: 2;
}

.hero-image-title-prime{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50% , -50%);
	text-align: center;
    z-index: 1;
}

.hero-image-title-prime span{
	display: inline-block;
	font-size: 20.833vw;
	font-weight: 600;
	line-height: 1em;
	color: transparent;
	background: linear-gradient(180deg, var(--white-color) 10.18%, transparent 85.55%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-stroke: 2px transparent;
}

.hero-content-prime{
	position: relative;
	max-width: 1100px;
	text-align: center;
	margin: 0 auto;
}

.hero-content-prime .section-title{
	position: relative;
	z-index: 3;
}

.hero-content-prime .section-title p{
	max-width: 750px;
	color: var(--white-color);
	margin-left: auto;
	margin-right: auto;
}

.hero-content-body-prime{
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 20px 40px;
	z-index: 3;
}

.video-play-button-prime{
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 20px;
	z-index: 1;
}

.video-play-button-prime a{
	position: relative;
	height: 50px;
	width: 50px;
	background: var(--accent-color);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: none;
	transition: all 0.3s ease-in-out;
}

.video-play-button-prime:hover a{
	background: var(--white-color);
}

.video-play-button-prime.play-effect a:before,
.video-play-button-prime.play-effect a:after{
	content: '';
	position: absolute;
	top: -30%;
	left: -30%;
	width: 100%;
	height: 100%;
	border: 40px solid var(--white-color);
	opacity: 50%;
	border-radius: 50%;
	transform: scale(0.6);
	z-index: -1;
	animation: border-zooming 1.2s infinite linear;
}

.video-play-button-prime.play-effect a:after{
	animation-delay: .3s;
}

@keyframes border-zooming{
	100%{
		transform: scale(1);
		opacity: 0;
	}
}

.video-play-button-prime a i{
	font-size: 18px;
	color: var(--accent-secondary-color);
	transition: all 0.3s ease-in-out;
}

.video-play-button-prime:hover a i{
	color: var(--primary-color);
}

.video-play-button-prime p{
	font-size: 16px;
	font-weight: 600;
	color: var(--white-color);
	margin: 0;
}

.hero-image-prime{
	position: absolute;
	bottom: -120px;
	left: 0;
	right: 0;
	z-index: 2;
}

.hero-image-prime figure{
	display: block;
    text-align: center;
}

.hero-image-prime figure img{
	width: 100%;
    max-width: 525px;
	aspect-ratio: 1 / 1.5;
	object-fit: cover;
}

.about-us-prime{
    padding: 120px 0;
}

.about-us-image-box-prime{
    position: relative;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    margin-right: 15px;
    overflow: hidden;
}

.about-image-box-1-prime{
    width: 44%;
    height: 100%;
}

.about-us-image-prime figure{
    display: block;
    border-radius: 20px;
    height: 100%;
}

.about-us-image-prime figure img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.about-image-box-1-prime.about-us-image-prime figure{
	margin-right: -192px;
}

.about-image-box-1-prime.about-us-image-prime figure img{
    aspect-ratio: 1 / 1.472;
}

.about-image-box-2-prime{
    width: 56%;
    display: flex;
    flex-direction: column;
    margin-bottom: -10px;
    align-items: end;
    z-index: 1;
}

.about-year-counter-box-prime{
    background-color: var(--accent-secondary-color);
    border: 5px solid var(--white-color);
    padding: 45px 35px;
    border-radius: 10px;
    text-align: center;
    margin-bottom: 70px;
    width: 225px;
}

.about-year-counter-box-prime h2{
    font-size: 48px;
    color: var(--accent-color);
    line-height: 1em;
}

.about-year-counter-box-prime p{
    color: var(--primary-color);
    margin: 10px 0 0;
}

.about-image-box-2-prime .about-us-image-prime figure{
    border: 10px solid var(--bg-color);
}

.about-image-box-2-prime .about-us-image-prime img{
    aspect-ratio: 1 / 1.141;
}


.about-us-contant-prime{
    height: 100%;
    align-content: center;
}

.about-us-body-item-prime{
	background-color: var(--secondary-color);
    border-radius: 10px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    padding: 30px;
}

.about-us-body-item-prime .icon-box{
    height: 60px;
    width: 60px;
    border-radius: 5px;
    background-color: var(--accent-secondary-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-us-body-item-prime .icon-box img{
    width: 100%;
    max-width: 30px;
}

.about-us-body-item-title-prime{
    width: calc(100% - 80px);
}

.about-us-body-item-title-prime h3{
    font-size: 20px;
    line-height: 1.4em;
}

.about-skills-list-prime{
    margin-top: 40px;
}

.about-skills-list-prime .skills-progress-bar .skill-data .skill-title, 
.about-skills-list-prime .skills-progress-bar .skill-data .skill-no{
    font-size: 20px;
}

.about-us-footer-prime{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px 40px;
    margin-top: 60px;
}

.about-author-Box-prime{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
}

.about-author-image-prime figure{
    display: block;
    border-radius: 50%;
}

.about-author-image-prime figure img{
    width: 100%;
    max-width: 50px;
    border-radius: 50%;
}

.about-author-content-prime h3{
    font-size: 20px;
}

.about-author-content-prime p{
    margin: 5px 0 0;
}

.our-services-prime{
	background-image: url('../images/section-bg-image-1.png');
	background-repeat: no-repeat;
	background-position: bottom center;	
	background-size: auto;
	padding: 120px 0;
}

.service-item-prime{
	background: var(--white-color);
	border-radius: 10px;
	min-height: 375px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 30px;
	height: calc(100% - 30px);
	margin-bottom: 30px;
	padding: 40px;
}

.service-item-prime .icon-box{
	position: relative;
	height: 50px;
	width: 50px;
	background-color: var(--accent-secondary-color);
	border-radius: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.service-item-prime .icon-box:before{
	content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: var(--primary-color);
    width: 100%;
    height: 100%;
    transform: rotate(180deg) scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.service-item-prime:hover  .icon-box:before{
	transform: rotate(0) scale(1);
}

.service-item-prime .icon-box img{
	position: relative;
	width: 100%;
	max-width: 24px;
	transition: all 0.4s ease-in-out;
	z-index: 1;
}

.service-item-prime:hover .icon-box img{
	filter: brightness(0) invert(1);
}

.service-item-body-prime{
	border-top: 1px solid var(--divider-color);
	padding-top: 30px;
}

.service-item-content-prime h2{
	font-size: 20px;
}

.service-item-content-prime h2 a{
	color: inherit;
}

.service-item-content-prime p{
	margin: 10px 0 0;
}

.service-item-btn-prime{
	margin-top: 30px;
}

.who-we-are-prime{
	padding: 120px 0;
}

.who-we-are-content-prime{
	height: 100%;
	align-content: center;
}

.who-we-are-body-prime ul{
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 15px 20px;
}

.who-we-are-body-prime ul li{
	position: relative;
	width: calc(50% - 10px);
	line-height: 1.5em;
	padding-left: 25px;
}

.who-we-are-body-prime ul li:before{
	content: '\f058';
    position: absolute;
    font-family: 'Font Awesome 7 Free';
    font-size: 18px;
    font-weight: 900;
    color: var(--accent-color);
    top: 0;
    left: 0;
}

.who-we-counter-list-prime{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	margin-top: 40px;
}

.who-we-counter-item-prime{
	width: calc(33.33% - 20px);
	background-color: var(--secondary-color);
	border-radius: 10px;
	text-align: center;
	padding: 20px;
}

.who-we-counter-item-prime h2{
	font-size: 48px;
}

.who-we-counter-item-prime p{
	margin: 5px 0 0;
}

.who-we-are-footer-prime{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px 40px;
	margin-top: 60px;
}

.who-we-image-box-prime{
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	padding-right: 40px;
	margin-left: 15px;
	height: 100%;
}

.who-we-image-1-prime{
	position: relative;
	width: 18%;
	padding-bottom: 40px;
	z-index: 2;
}

.who-we-image-2-prime{
	width: 82%;
	height: 100%;
}

.who-we-image-prime figure{
	display: block;
	height: 100%;
	border-radius: 10px;
}

.who-we-image-prime img{
	width: 100%;
	object-fit: cover;
	border-radius: 10px;
}

.who-we-image-1-prime .who-we-image-prime figure{
	border: 6px solid var(--white-color);
	border-radius: 16px;
	margin-right: -160px;
}

.who-we-image-1-prime .who-we-image-prime figure img{
	aspect-ratio: 1 / 1;
}

.who-we-image-2-prime .who-we-image-prime{
	height: 100%;
}

.who-we-image-2-prime .who-we-image-prime img{
	aspect-ratio: 1 / 1.41;
	height: 100%;
}

.who-we-award-box-prime{
	width: 265px;
	position: absolute;
	top: 15px;
	right: 0;
	background-color: var(--secondary-color);
	border-radius: 10px;
	padding: 30px;
	z-index: 1;
}

.who-we-award-header-prime{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 10px;
}

.who-we-award-img-prime img{
	width: 100%;
	max-width: 55px;
	border-radius: 10px;
}

.who-we-award-header-title-prime p{
	color: var(--primary-color);
	font-size: 12px;
	font-weight: 500;
	line-height: normal;
	padding: 4px 15px;
	border: 1px solid var(--divider-color);
	border-radius: 99px;
	margin: 0;
}

.who-we-award-content-prime{
	margin-top: 20px;
}

.who-we-award-content-prime h3{
	font-size: 20px;
	line-height: 1.4em;
}

.our-leaders-prime{
	background-image: url(../images/section-bg-image-2.png);
    background-position: bottom center;
    background-repeat: no-repeat;
    background-size: auto;
	padding: 120px 0 80px;
}

.leader-item-prime{
	height: calc(100% - 40px);
	margin-bottom: 40px;
}

.leader-item-image-prime{
	background-image: url('../images/leader-image-bg-shape.png');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	padding: 40px 55px;
	text-align: center;
	margin-bottom: 20px;
}

.leader-item-image-prime a,
.leader-item-image-prime figure{
	display: inline-block;
	cursor: none;
	border-radius: 50%;
}

.leader-item-image-prime{
	
}

.leader-item-image-prime img{
	width: 100%;
	max-width: 190px;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	object-fit: cover;
}

.leader-social-list-prime{
	margin-bottom: 20px;
}

.leader-social-list-prime ul{
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 15px;
}

.leader-social-list-prime ul li a{
	height: 36px;
	width: 36px;
	background-color: var(--dark-divider-color);
	border-radius: 100px;
	color: var(--accent-secondary-color);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.4s ease-in-out;
}

.leader-social-list-prime ul li a:hover{
	background-color: var(--accent-secondary-color);
	color: var(--accent-color);
}

.leader-social-list-prime ul li a i{
	font-size: 18px;
	color: inherit;
}

.leader-item-content-prime{
	text-align: center;
}

.leader-item-content-prime h2{
	color: var(--white-color);
	font-size: 20px;
}

.leader-item-content-prime h2 a{
	color: inherit;
}

.leader-item-content-prime p{
	color: var(--white-color);
	margin: 10px 0 0;
}

.our-key-fact-prime{
    padding: 120px 0;
}

.key-fact-image-prime{
    height: 100%;
    margin-right: 15px;
}

.key-fact-image-prime figure{
    display: block;
    height: 100%;
    border-radius: 10px;
}

.key-fact-image-prime figure img{
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1.025;
    object-fit: cover;
}

.key-fact-contant-prime{
    height: 100%;
    align-content: center;
}

.key-fact-items-list-prime{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 30px;
    margin-bottom: 40px;
}

.key-fact-item-prime{
    width: calc(50% - 15px);
    background-color: var(--secondary-color);
    border-radius: 10px;
    padding: 30px;
}

.key-fact-icon-box-prime .icon-box,
.key-fact-item-prime .icon-box{
    position: relative;
    height: 50px;
    width: 50px;
    background-color: var(--accent-secondary-color);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
    overflow: hidden;
}

.key-fact-icon-box-prime .icon-box::before,
.key-fact-item-prime .icon-box::before{
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: var(--accent-color);
    width: 100%;
    height: 100%;
    transform: rotate(180deg) scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.key-fact-icon-box-prime:hover .icon-box::before,
.key-fact-item-prime:hover .icon-box::before{
    transform: rotate(0) scale(1);
}

.key-fact-icon-box-prime .icon-box img,
.key-fact-item-prime .icon-box img{
    width: 100%;
    max-width: 24px;
    transition: all 0.4s ease-in-out;
    z-index: 1;
}

.key-fact-icon-box-prime:hover .icon-box img,
.key-fact-item-prime:hover .icon-box img{
    filter: brightness(0) invert(1);
}

.key-fact-icon-contant-prime h3,
.key-fact-item-content-prime h3{
    font-size: 20px;
}

.key-fact-icon-contant-prime p,
.key-fact-item-content-prime p{
    margin: 10px 0 0;
}

.key-fact-icon-box-prime{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.key-fact-icon-box-prime .icon-box{
    height: 60px;
    width: 60px;
	margin: 0;
}

.key-fact-icon-box-prime .icon-box img{
    max-width: 30px;
}

.key-fact-icon-box-prime .key-fact-icon-contant-prime{
    width: calc(100% - 80px);
}

.key-fact-footer-prime{
    display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px 40px;
	border-top: 1px solid var(--divider-color);
	margin-top: 40px;
	padding-top: 40px;
}

.about-us-contact-box-prime{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 15px;
}

.about-us-contact-box-prime .icon-box{
    position: relative;
    background: var(--accent-secondary-color);
    border-radius: 5px;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
	transition: all 0.4s ease-in-out;
	overflow: hidden;
}

.about-us-contact-box-prime .icon-box::before{
	content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: var(--accent-color);
    width: 100%;
    height: 100%;
    transform: rotate(180deg) scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.about-us-contact-box-prime:hover .icon-box::before{
    transform: rotate(0) scale(1);
}

.about-us-contact-box-prime .icon-box img{
    position: relative;
    width: 100%;
    max-width: 24px;
	transition: all 0.4s ease-in-out;
	z-index: 1;
}

.about-us-contact-box-prime:hover .icon-box img{
	filter: brightness(0) invert(1);
}

.about-us-conatct-content-prime{
	width: calc(100% - 65px);
}

.about-us-conatct-content-prime h3{
	font-size: 20px;
	line-height: normal;
}

.about-us-conatct-content-prime p{
	margin: 5px 0 0;
}

.dark-section .about-us-conatct-content-prime h3,
.dark-section .about-us-conatct-content-prime p{
	color: var(--white-color);
}

.dark-section .about-us-conatct-content-prime p a:hover{
	color: var(--accent-secondary-color);
}

.about-us-conatct-content-prime p a{
	color: inherit;
    transition: all 0.4s ease-in-out;
}

.about-us-conatct-content-prime p a:hover{
	color: var(--accent-color);
}

.why-choose-us-prime{
	padding: 120px 0;
}

.why-choose-us-content-prime{
	height: 100%;
	align-content: center;
}

.why-choose-body-prime{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	border-top: 1px solid var(--dark-divider-color);
	margin-top: 40px;
	padding-top: 40px;
}

.why-choose-body-item-list-prime,
.smart-solution-box-prime{
	width: calc(50% - 15px);
	align-content: center;
}

.smart-solution-box-prime{
	background-color: var(--dark-divider-color);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-radius: 10px;
	padding: 30px;
}

.why-choose-body-item-prime{
	border-bottom: 1px solid var(--dark-divider-color);
	margin-bottom: 30px;
	padding-bottom: 30px;
}

.why-choose-body-item-prime:last-child{
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: none;
}

.why-choose-body-item-prime h3{
	color: var(--white-color);
	font-size: 20px;
}

.why-choose-body-item-prime p{
	color: var(--white-color);
	margin: 10px 0 0;
}

.smart-solution-header-prime{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
}

.smart-solution-header-prime .icon-box{
	position: relative;
	height: 50px;
	width: 50px;
	background-color: var(--accent-secondary-color);
	border-radius: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.smart-solution-header-prime .icon-box:before{
	content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: var(--white-color);
    width: 100%;
    height: 100%;
    transform: rotate(180deg) scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.smart-solution-box-prime:hover .smart-solution-header-prime  .icon-box:before{
	transform: rotate(0) scale(1);
}

.smart-solution-header-prime .icon-box img{
	position: relative;
	width: 100%;
	max-width: 24px;
	transition: all 0.4s ease-in-out;
	z-index: 1;
}

.smart-solution-box-prime:hover .smart-solution-header-prime .icon-box img{
	filter: brightness(0) invert(0);
}

.smart-solution-counter-item-prime h3{
	font-size: 40px;
	line-height: 1em;
	color: var(--accent-secondary-color);
}

.smart-solution-counter-item-prime p{
	color: var(--white-color);
	margin: 5px 0 0;
}

.smart-solution-body-prime{
	border-top: 1px solid var(--dark-divider-color);
	margin-top: 30px;
	padding-top: 30px;
}

.smart-solution-body-prime h3{
	color: var(--white-color);
	font-size: 20px;
}

.smart-solution-body-prime p{
	color: var(--white-color);
	margin: 10px 0 0;
}

.why-choose-footer-prime{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px 40px;
	margin-top: 40px;
}

.why-choose-us-image-prime{
	margin-left: 15px;
	height: 100%;
}

.why-choose-us-image-prime figure{
	display: block;
	height: 100%;
	border-radius: 10px;
}

.why-choose-us-image-prime img{
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1.189;
	object-fit: cover;
	border-radius: 10px;
}

.our-faqs-prime{
    padding: 120px 0;
}

.faq-contant-box-prime{
    background-color: var(--secondary-color);
    border-radius: 10px;
    height: 100%;
    padding: 40px;
}

.faq-info-item-list-prime{
    background-color: var(--white-color);
    border-radius: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 30px 40px;
    padding: 30px;
}

.faq-info-item-prime{
	width: auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.faq-info-item-prime .icon-box{
	position: relative;
    height: 50px;
    width: 50px;
    background-color: var(--accent-secondary-color);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
	overflow: hidden;
}

.faq-info-item-prime .icon-box:before{
	content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: var(--accent-color);
    width: 100%;
    height: 100%;
    transform: rotate(180deg) scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.faq-info-item-prime:hover .icon-box:before{
	transform: rotate(0) scale(1);
}

.faq-info-item-prime .icon-box img{
    position: relative;
    width: 100%;
    max-width: 24px;
	transition: all 0.4s ease-in-out;
	z-index: 1;
}

.faq-info-item-prime:hover .icon-box img{
	filter: brightness(0) invert(1);
}

.faq-info-item-content-prime{
    width: calc(100% - 65px);
}

.faq-info-item-content-prime h3{
    font-size: 20px;
}

.faq-info-item-content-prime a{
    color: inherit;
    transition: all 0.3s ease-in-out;
}

.faq-info-item-content-prime p{
    margin: 10px 0 0;
}

.faq-info-prime p:hover{
    color: var(--accent-color);
}

.faq-info-item-prime.item-1{
    width: 100%;
	align-items: start;
    border-bottom: 1px solid var(--divider-color);
    padding-bottom: 30px;
}

.faq-info-prime{
    border-bottom: none;
    padding-bottom: 0;
}

.faq-contant-prime{
    align-content: center;
    height: 100%;
}

.faq-accordion-prime .accordion-item{
	background: var(--secondary-color);
	border-radius: 10px;
	margin-bottom: 30px;
    padding: 0;
	overflow: hidden;
}

.faq-accordion-prime .accordion-item:last-child{
	margin-bottom: 0;
}

.faq-accordion-prime .accordion-header .accordion-button{
	font-size: 18px;
	font-weight: 600;
	line-height: 1.333em;
    background-color   : transparent;
    color: var(--primary-color);
    padding: 20px 60px 20px 20px;
	transition: all 0.3s ease-in-out;
}

.faq-accordion-prime .accordion-item .accordion-button::after, 
.faq-accordion-prime .accordion-item .accordion-button.collapsed::after{
    content: '\f0fe';
    font-family: 'FontAwesome';
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 30px;
    color: var(--accent-color);
    transition: all 0.3s ease-in-out;
}

.faq-accordion-prime .accordion-button:not(.collapsed)::after{
    content: '\f146';
	color: var(--primary-color);
}

.faq-accordion-prime .accordion-item .accordion-body{
	border-top: 1px solid var(--divider-color);
    padding: 20px;
}

.faq-accordion-prime .accordion-item .accordion-body p{
	margin: 0;
}

.our-testimonials-prime{
	background-image: url(../images/testimonial-bg-image-prime.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: auto;
    padding: 120px 0;
}

.our-testimonials-content-prime{
    position: sticky;
    top: 30px;
}

.testimonial-item-prime{
    min-height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 30px;
    background: var(--dark-divider-color);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-radius: 10px;
    padding: 30px;
}

.testimonial-item-rating-prime{
    display: flex;
    gap: 10px;
}

.testimonial-item-rating-prime i{
	height: 24px;
    width: 24px;
    background-color: var(--accent-secondary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    color: var(--accent-color);
    font-size: 14px;
}

.testimonial-item-content-prime h2{
    color: var(--white-color);
    font-size: 20px;
}

.testimonial-item-content-prime p{
    margin: 10px 0 0;
    color: var(--white-color);
}

.testimonial-author-prime{
    border-top: 1px solid var(--dark-divider-color);
    padding-top: 30px;
    margin-top: 30px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.testimonial-author-image-prime figure{
    display: block;
    border-radius: 50%;
}

.testimonial-author-image-prime figure img{
    width: 100%;
    max-width: 50px;
    border-radius: 50%;
}

.testimonial-author-content-prime h2{
    color: var(--white-color);
    font-size: 20px;
}

.testimonial-author-content-prime p{
    margin: 5px 0 0;
    color: var(--white-color);
}

.company-supports-slider-box-prime{
    margin-top: 60px;
}

.company-supports-content-prime{
    display: flex;
    align-items: center;
	justify-content: space-between;
	gap: 30px;
	margin-bottom: 40px;
	text-align: center;
}

.company-supports-content-prime hr{
    height: 1px;
	flex-grow: 1;
    color: var(--dark-divider-color);
    opacity: 1;
    margin: 0;
}

.company-supports-content-prime p{
	font-size: 20px;
	font-weight: 500;
	color: var(--white-color);
    margin-bottom: 0;
}

.company-supports-slider-prime{
	margin: 0 4.167vw;
} 

.company-supports-logo-prime{
	text-align: center;
}

.company-supports-logo-prime img{
	width: 100%;
	max-width: 170px;
	height: 40px;
}

.main-footer-prime{
	background-color: var(--primary-color);
	padding: 120px 0 0;
}

.footer-header-box-prime{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	border-bottom: 1px solid var(--dark-divider-color);
	margin-bottom: 60px;
	padding-bottom: 60px;
}

.footer-logo-prime img{
	width: 100%;
	max-width: 152px;
}

.footer-newsletter-form-box-prime{
    display: flex;
    flex-wrap: wrap;
    width: calc(100% - 172px);
    align-items: center;
    justify-content: end;
    gap: 20px 30px;
}

.footer-newsletter-form-title-prime{
	max-width: 230px;
}

.footer-newsletter-form-title-prime h2{
	font-size: 20px;
	line-height: 1.4em;
	color: var(--white-color);
}

.footer-newsletter-form-box-prime .form-group{
    display: flex;
    flex-wrap: wrap;
	gap: 20px;
}

.footer-newsletter-form-box-prime .form-group .form-control{
    width: 400px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4em;
    color: var(--white-color);
    background: var(--dark-divider-color);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border: none;
    border-radius: 10px;
    padding: 10px 20px;
    outline: none;
    box-shadow: none;
}

.footer-newsletter-form-prime	.form-group .form-control::placeholder{
	color: var(--white-color);
	opacity: 50%;
}

.about-footer-prime{
	padding-right: 60px;
}

.about-footer-content-prime h2{
	color: var(--white-color);
	font-size: 20px;
}

.about-footer-content-prime p{
	color: var(--white-color);
	margin: 10px 0 0;
}

.footer-social-links-prime{
	border-top: 1px solid var(--dark-divider-color);
	margin-top: 30px;
	padding-top: 30px;
}

.footer-social-links-prime ul{
	display: flex;
    flex-wrap: wrap;
    gap: 15px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-social-links-prime ul li a{
	width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white-color);
    background-color: var(--dark-divider-color);
	backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 50%;
    transition: all 0.4s ease-in-out;
}

.footer-social-links-prime ul li a:hover{
	background-color: var(--accent-secondary-color);
	color: var(--accent-color);
}

.footer-social-links-prime ul li a i{
	font-size: 18px;
	color: inherit;
}

.footer-links-box-prime{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 30px;
}

.footer-links-prime{
	max-width: 32%;
}

.footer-links-prime h2{
	font-size: 20px;
	color: var(--white-color);
	margin-bottom: 30px;
}

.footer-links-prime ul{
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-links-prime ul li{
	text-transform: capitalize;
	color: var(--white-color);
	line-height: 1.5em;
	margin-bottom: 15px;
}

.footer-links-prime ul li:last-child{
	margin-bottom: 0;
}

.footer-links-prime ul li a{
	color: inherit;
	transition: all 0.3s ease-in-out;
}

.footer-links-prime ul li a:hover{
	color: var(--accent-secondary-color);
}

.footer-links-prime.footer-contact-lists-prime{
	max-width: 42%;
}

.footer-links-prime.footer-contact-lists-prime ul li{
	display: flex;
	margin-bottom: 20px;
}

.footer-links-prime.footer-contact-lists-prime ul li:last-child{
	margin-bottom: 0;
}

.footer-links-prime.footer-contact-lists-prime ul li img{
	width: 100%;
	max-width: 20px;
	margin-right: 10px;
}

.footer-contact-item-content-prime{
	width: calc(100% - 35px);
}

.footer-contact-item-content-prime p{
	color: var(--white-color);
	margin: 0;
}

.footer-contact-item-content-prime p a{
	color: inherit;
	transition: all 0.4s ease-in-out;
}

.footer-contact-item-content-prime p a:hover{
	color: var(--accent-secondary-color);
}

.footer-copyright-prime{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	border-top: 1px solid var(--dark-divider-color);
	margin-top: 60px;
	padding: 60px 0;
}

.footer-menu-prime ul{
	display: flex;
	flex-wrap: wrap;
	gap: 5px 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-menu-prime ul li{
	position: relative;
	font-weight: 500;
	line-height: 1.5em;
	color: var(--white-color);
}

.footer-menu-prime ul li a{
	color: inherit;
	transition: all 0.3s ease-in-out;
}

.footer-menu-prime ul li a:hover{
	color: var(--accent-secondary-color);
}

.footer-copyright-text-prime p{
	color: var(--white-color);
	margin-bottom: 0;
}

@media only screen and (max-width: 1024px){

	.hero-prime{
		height: auto;
		min-height: 920px;
	}

	.hero-image-prime figure img{
		max-width: 470px;
	}
	
	.about-us-image-box-prime{
        max-width: 605px;
        margin: 0 auto 30px;
    }

    .about-us-image-box-prime,
    .about-image-box-1-prime,
    .about-us-image-prime figure,
    .about-us-image-prime figure img{
        height: auto;
    }

	.service-item-prime{
    	padding: 30px;
    	min-height: auto;
	}

	.who-we-are-content-prime{
		height: auto;
		margin-bottom: 30px;
	}

	.who-we-image-box-prime{
		max-width: 740px;
		margin: 0 auto;
	}

	.who-we-image-box-prime,
	.who-we-image-2-prime .who-we-image-prime,
	.who-we-image-prime figure,
	.who-we-image-2-prime .who-we-image-prime img{
		height: auto;
	}

	.who-we-image-2-prime .who-we-image-prime img{
		aspect-ratio: 1 / 1.25;
	}

	.key-fact-image-prime{
		max-width: 740px;
        margin: 0 auto 30px;
        height: auto;
    }

	.key-fact-contant-prime,
	.key-fact-image-prime figure,
	.key-fact-image-prime figure img{
		height: auto;
	}

	.why-choose-us-content-prime{
		height: auto;
		margin-bottom: 30px;
	}

	.why-choose-us-image-prime,
	.why-choose-us-image-prime figure,
	.why-choose-us-image-prime img{
		height: auto;
	}

	.why-choose-us-image-prime{
		margin: 0;
	}

	.why-choose-us-image-prime img{
		aspect-ratio: 1 / 0.7;
	}

 	.faq-contant-box-prime{
        margin-bottom: 30px;
        height: auto;
    }

	.faq-contant-prime{
		height: auto;
	}

    .our-testimonials-content-prime{
        position: initial;
    }

	.footer-header-box-prime{
		margin-bottom: 30px;
		padding-bottom: 30px;
	}

	.footer-newsletter-form-title-prime{
		max-width: 210px;
	}

	.footer-newsletter-form-box-prime .form-group .form-control{
		width: 340px;
	}

	.about-footer-prime{
		padding: 0;
		margin-bottom: 30px;
	}

	.footer-links-prime h2{
		margin-bottom: 20px;
	}

	.footer-links-prime ul li{
		margin-bottom: 10px;
	}

	.footer-copyright-prime{
		margin-top: 30px;
    	padding: 30px 0;
	}
}

@media only screen and (max-width: 991px){

	.hero-prime{
		padding: 140px 0 60px;
    	height: auto;
    	min-height: 800px;
	}

	.hero-image-prime{
		bottom: -60px;
	}

	.hero-image-prime figure img{
        max-width: 420px;
    }

	.hero-image-title-prime span{
		font-size: 200px;
	}

	.about-us-prime{
        padding: 60px 0;
    }

    .about-year-counter-box-prime{
        padding: 30px;
    }

    .about-year-counter-box-prime h2{
        font-size: 38px;
    }

    .about-us-body-item-prime{
        padding: 20px;
        gap: 15px;
    }

    .about-us-body-item-prime .icon-box{
        height: 50px;
        width: 50px;
    }

    .about-us-body-item-prime .icon-box img{
        max-width: 24px;
    }

    .about-us-body-item-title-prime{
        width: calc(100% - 65px);
    }

    .about-us-body-item-title-prime h3{
        font-size: 18px
    }

    .about-skills-list-prime{
        margin-top: 30px;
    }

    .about-skills-list-prime .skills-progress-bar .skill-data .skill-title, 
    .about-skills-list-prime .skills-progress-bar .skill-data .skill-no{
        font-size: 18px;
    }

    .about-us-footer-prime{
        margin-top: 30px;
    }

	.our-services-prime{
		background-size: 100% auto;
		padding: 60px 0;
	}

	.who-we-are-prime{
		padding: 60px 0;
	}

	.who-we-are-body-prime ul li:before{
		font-size: 16px;
	}

	.who-we-counter-list-prime{
		margin-top: 30px;
	}

	.who-we-counter-item-prime h2{
		font-size: 38px;
	}

	.who-we-are-footer-prime{
		margin-top: 30px;
	}

	.who-we-award-box-prime{
		width: 225px;
		padding: 20px;
	}

	.who-we-award-content-prime h3{
		font-size: 18px;
	}

	.our-leaders-prime{
		background-size: 150% auto;
		padding: 60px 0 30px;
	}

	.leader-item-prime{
		height: calc(100% - 30px);
		margin-bottom: 30px;
	}

	.leader-item-image-prime,
	.leader-social-list-prime{
		margin-bottom: 15px;
	}

	.leader-item-image-prime{
		padding: 30px 45px;
	}

	.our-key-fact-prime{
        padding: 60px 0;
    }

    .key-fact-item-prime{
        padding: 20px;
    }

    .key-fact-items-list-prime{
        margin-bottom: 30px;
    }

	.key-fact-icon-box-prime{
		gap: 15px;
	}

    .key-fact-icon-box-prime .icon-box{
        height: 50px;
        width: 50px;
    }

    .key-fact-icon-box-prime .key-fact-icon-contant-prime{
        width: calc(100% - 65px);
    }

    .key-fact-icon-box-prime .icon-box img{
        max-width: 24px;
    }

    .key-fact-footer-prime{
        padding-top: 30px;
        margin-top: 30px;
    }

	.about-us-contact-box-prime{
		gap: 10px;
	}

	.about-us-contact-box-prime .icon-box{
		width: 44px;
		height: 44px;
	}

	.about-us-conatct-content-prime{
		width: calc(100% - 54px);
	}

	.about-us-conatct-content-prime h3{
		font-size: 18px;
	}
	
	.why-choose-us-prime{
		padding: 60px 0;
	}

	.why-choose-body-prime{
		margin-top: 30px;
		padding-top: 30px;
	}

	.why-choose-body-item-prime{
		margin-bottom: 20px;
		padding-bottom: 20px;
	}

	.smart-solution-box-prime{
		padding: 20px;
	}

	.smart-solution-counter-item-prime h3{
		font-size: 34px;
	}

	.smart-solution-body-prime{
		margin-top: 20px;
		padding-top: 20px;
	}

	.why-choose-footer-prime{
		margin-top: 30px;
	}

	.our-faqs-prime{
        padding: 60px 0;
    }

    .faq-contant-box-prime{
        padding: 30px;
    }

    .faq-info-item-list-prime{
        padding: 20px;
    }

    .faq-info-item-list-prime{
        gap: 20px 30px;
    }

    .faq-info-item-prime.item-1{
        padding-bottom: 20px;
    }

    .faq-info-item-content-prime p{
        margin: 5px 0 0;
    }

	.faq-accordion-prime .accordion-item{
		margin-bottom: 20px;
	}

    .faq-accordion-prime .accordion-header .accordion-button{
		padding: 15px 50px 15px 15px;
	}

	.faq-accordion-prime .accordion-item .accordion-button::after,
	.faq-accordion-prime .accordion-item .accordion-button.collapsed::after{
		font-size: 24px;
		right: 15px;
	}

	.faq-accordion-prime .accordion-item .accordion-body{
		padding: 15px;
	}

    .our-testimonials-prime{
        padding: 60px 0;
    }

    .testimonial-item-prime{
        padding: 20px;
        min-height: auto;
    }

    .testimonial-item-rating-prime i{
        height: 20px;
        width: 20px;
    }

    .testimonial-item-content-prime h2{
        font-size: 18px;
    }

    .company-supports-slider-box-prime{
		margin-top: 40px;
	}

	.company-supports-content-prime p{
		font-size: 18px;
	}

    .company-supports-content-prime{
        margin-bottom: 20px;
    }

	.company-supports-slider-prime{
		margin: 0;
	}

	.company-supports-logo-prime img{
        max-width: 145px;
        height: 34px;
    }

	.main-footer-prime{
		padding: 60px 0 0;
	}

	.footer-newsletter-form-box-prime{
		justify-content: left;
		gap: 15px;
	}

	.footer-newsletter-form-title-prime{
		max-width: 100%;
	}

	.footer-newsletter-form-prime{
		width: 100%;
	}

	.footer-newsletter-form-box-prime .form-group{
		gap: 10px;
	}

	.footer-newsletter-form-box-prime .form-group .form-control{
		width: calc(100% - 54px);
	}

	.footer-newsletter-form-prime .btn-default{
        padding: 22px;
        font-size: 0;
    }

	.footer-copyright-prime{
		flex-direction: column-reverse;
	}
}

@media only screen and (max-width: 767px){
	
	.hero-prime{
		min-height: 750px;
	}

	.hero-image-title-prime span{
        font-size: 100px;
    }

	.hero-content-body-prime .video-play-button-prime{
		display: none;
	}

	.about-image-box-1-prime.about-us-image-prime figure{
        margin-right: -100px;
    }

    .about-year-counter-box-prime{
		width: 170px;
        padding: 15px;
        margin-bottom: 20px;
    }

    .about-year-counter-box-prime h2{
        font-size: 26px;
    }

    .about-year-counter-box-prime p{
        margin: 5px 0 0;
        font-size: 14px;
    }

    .about-image-box-2-prime .about-us-image-prime figure{
        border-width: 5px;
    }

    .about-us-body-item-prime{
        padding: 15px;
    }

	.about-us-body-item-title-prime{
        width: 100%;
    }

    .about-us-body-item-title-prime h3{
        font-size: 16px;
    }

	.about-skills-list-prime .skills-progress-bar .skill-data .skill-title,
	.about-skills-list-prime .skills-progress-bar .skill-data .skill-no{
        font-size: 16px;
    }

	.about-us-footer-prime{
		gap: 20px;
	}

	.service-item-prime{
		padding: 20px;
	}

	.service-item-body-prime{
		padding-top: 20px;
	}

	.service-item-content-prime h2{
        font-size: 18px;
    }

	.service-item-btn-prime{
		margin-top: 20px;
	}

	.who-we-image-box-prime{
		padding-right: 20px;
	}

	.who-we-image-1-prime .who-we-image-prime figure{
		margin-right: -100px;
	}

	.who-we-are-body-prime ul{
		gap: 10px;
	}

	.who-we-are-body-prime ul li{
		width: 100%;
	}

	.who-we-counter-list-prime{
		gap: 20px;
	}

	.who-we-counter-item-prime{
		width: calc(50% - 10px);
		padding: 15px;
	}

	.who-we-counter-item-prime h2{
        font-size: 26px;
    }

	.who-we-are-footer-prime{
		gap: 20px;
	}

	.about-author-content-prime h3{
		font-size: 18px;
	}

	.who-we-image-1-prime{
		padding-bottom: 20px;
	}

	.who-we-award-box-prime{
        width: 170px;
        padding: 15px;
    }

	.who-we-award-img-prime img{
		max-width: 35px;
	}

	.who-we-award-content-prime{
		margin-top: 10px;
	}

	.who-we-image-2-prime .who-we-image-prime img{
        aspect-ratio: 1 / 1.41;
    }

	.leader-item-image-prime{
        padding: 25px 35px;
    }

	.leader-item-image-prime img{
		max-width: 160px;
	}

	.who-we-award-content-prime h3{
        font-size: 16px;
    }

	.leader-item-content-prime p{
		margin-top: 5px;
	}

	.key-fact-item-prime{
        width: 100%;
    }

    .key-fact-image-prime figure,
    .key-fact-image-prime figure img{
        height: auto;
    }

	.key-fact-item-prime .icon-box{
		margin-bottom: 20px;
	}

    .key-fact-item-content-prime h3,
    .key-fact-icon-contant-prime h3{
        font-size: 18px;
    }

    .key-fact-icon-box-prime{
        padding: 20px;
        background-color: var(--secondary-color);
        border-radius: 10px;
    }

    .key-fact-icon-box-prime .key-fact-icon-contant-prime{
        width: 100%;
    }

	.key-fact-footer-prime{
		gap: 20px;
	}

	.why-choose-body-item-list-prime,
	.smart-solution-box-prime{
		width: 100%;
	}

	.why-choose-body-item-prime h3,
	.smart-solution-body-prime h3{
		font-size: 18px;
	}

	.smart-solution-counter-item-prime h3{
        font-size: 26px;
    }

	.why-choose-footer-prime{
		gap: 20px;
	}

	.faq-contant-box-prime{
		padding: 20px;
	}

	.faq-info-item-prime.item-1 .faq-info-item-content-prime{
        width: 100%;
    }

    .faq-info-item-content-prime h3{
		font-size: 18px;
	}

    .faq-accordion-prime .accordion-header .accordion-button{
        padding: 12px 40px 12px 15px;
        font-size: 16px;
    }

    .faq-accordion-prime .accordion-item .accordion-button::after, 
    .faq-accordion-prime .accordion-item .accordion-button.collapsed::after{
        font-size: 20px;
    }

    .faq-accordion-prime .accordion-item .accordion-body{
        padding: 12px 15px;
    }

    .testimonial-item-prime{
        gap: 20px;
    }

    .testimonial-author-prime{
        padding-top: 20px;
        margin-top: 20px;
    }

	.testimonial-author-content-prime h2{
		font-size: 18px;
	}

    .company-supports-slider-box-prime{
		margin-top: 30px;
	}

	.company-supports-content-prime{
        justify-content: center;
    }

	.company-supports-content-prime p{
		font-size: 16px;
	}

	.company-supports-content-prime hr{
        display: none;
    }

	.footer-newsletter-form-box-prime{
		width: 100%;
	}

	.footer-newsletter-form-title-prime h2,
	.about-footer-content-prime h2{
		font-size: 18px;
	}

	.footer-links-prime,
	.footer-links-prime.footer-contact-lists-prime{
		max-width: 100%;
	}

	.footer-links-prime h2{
		font-size: 18px;
        margin-bottom: 15px;
    }

	.footer-copyright-prime{
        padding: 15px 0;
    }

	.footer-menu-prime ul{
		justify-content: center;
		gap: 5px 10px;
	}

	.footer-menu-prime ul li{
		font-size: 14px;
	}
}

/************************************/
/***      37. Hero Slider css     ***/
/************************************/

.hero-slider{
	position: relative;
	/* Tinggi tetap 700px (permintaan klien): di layar desktop lebar,
	   bar pengumuman masih terlihat dan Layanan Kami turun ke bawah lipatan. */
	height: 700px;
	min-height: 700px;
	padding: 0;
	overflow: hidden;
}

/* Disable the base .hero overlay — each slide has its own */
.hero-slider::before{
	content: none;
	display: none;
}

.hero-slider .hero-swiper,
.hero-slider .hero-swiper .swiper-wrapper,
.hero-slider .hero-swiper .swiper-slide{
	height: 100%;
}

.hero-slider .hero-slide{
	position: relative;
	height: 100%;
	display: flex;
	/* Isi di tengah area di bawah header (header ±100px). */
	align-items: center;
	padding: 130px 0 0;
	overflow: hidden;
}

.hero-slide-media{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
}

.hero-slide-media img,
.hero-slide-media video{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Ken Burns zoom on the active image slide */
.hero-slider .swiper-slide-active .hero-slide-image img{
	animation: heroKenBurns 8s ease-out forwards;
}

@keyframes heroKenBurns{
	from{ transform: scale(1); }
	to{ transform: scale(1.12); }
}

/* Overlay brand: biru pekat di sisi teks (kiri) memudar ke toska di kanan,
   plus gelap tipis di atas agar menu header tetap terbaca. */
.hero-slide::before{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background:
		linear-gradient(180deg, rgba(6, 38, 72, 0.55) 0%, rgba(6, 38, 72, 0) 28%),
		linear-gradient(90deg, rgba(11, 92, 171, 0.92) 0%, rgba(11, 92, 171, 0.75) 45%, rgba(23, 176, 167, 0.55) 100%);
	z-index: 1;
}

.hero-slider .hero-slide .container{
	position: relative;
	z-index: 2;
}

.hero-slide-btn{
	margin-top: 40px;
}

/* Content entrance animation on the active slide.
   Uses fill-mode "both" so the hidden start-state only exists while the
   animation is pending/running on the ACTIVE slide — content is never
   left permanently invisible if Swiper hasn't tagged an active slide. */
.hero-slider .swiper-slide-active .section-sub-title,
.hero-slider .swiper-slide-active .hero-content h1,
.hero-slider .swiper-slide-active .hero-content p,
.hero-slider .swiper-slide-active .hero-slide-btn{
	animation: heroFadeUp 0.8s ease both;
}

.hero-slider .swiper-slide-active .section-sub-title{ animation-delay: 0.3s; }
.hero-slider .swiper-slide-active .hero-content h1{ animation-delay: 0.5s; }
.hero-slider .swiper-slide-active .hero-content p{ animation-delay: 0.7s; }
.hero-slider .swiper-slide-active .hero-slide-btn{ animation-delay: 0.9s; }

@keyframes heroFadeUp{
	from{ opacity: 0; transform: translateY(40px); }
	to{ opacity: 1; transform: translateY(0); }
}

/* Slider controls (arrows + pagination) */
.hero-slider-controls{
	position: absolute !important;
	left: 0;
	right: 0;
	bottom: 50px;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	pointer-events: none;
}

.hero-slider-nav{
	display: flex;
	align-items: center;
	gap: 15px;
	pointer-events: auto;
}

.hero-button-prev,
.hero-button-next{
	width: 52px;
	height: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--white-color);
	background: var(--dark-divider-color);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border: 1px solid var(--dark-divider-color);
	border-radius: 50%;
	cursor: pointer;
	transition: all 0.4s ease-in-out;
}

.hero-button-prev:hover,
.hero-button-next:hover{
	color: var(--primary-color);
	background: var(--accent-secondary-color);
	border-color: var(--accent-secondary-color);
}

.hero-button-prev.swiper-button-disabled,
.hero-button-next.swiper-button-disabled{
	opacity: 0.4;
}

/* Banner hanya satu slide (Swiper mengunci navigasi): panah dan titik
   tidak berguna. */
.hero-button-prev.swiper-button-lock,
.hero-button-next.swiper-button-lock,
.hero-pagination.swiper-pagination-lock{
	display: none;
}

.hero-pagination{
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	width: auto;
	pointer-events: auto;
}

.hero-pagination .swiper-pagination-bullet{
	width: 10px;
	height: 10px;
	background: var(--white-color);
	opacity: 0.5;
	border-radius: 100px;
	margin: 0 !important;
	transition: all 0.3s ease-in-out;
}

.hero-pagination .swiper-pagination-bullet-active{
	width: 28px;
	opacity: 1;
	background: var(--accent-secondary-color);
}

/* Laptop (lebar 992-1399px, mis. 1366x657): banner 500px dan teks lebih
   rapat agar bar pengumuman di bawahnya terlihat utuh tanpa scroll. */
@media only screen and (min-width: 992px) and (max-width: 1399px){
	.hero-slider{
		height: 500px;
		min-height: 500px;
	}

	.hero-slider .hero-slide{
		padding: 100px 0 0;
	}

	.hero-slider .hero-content .section-title{
		margin-bottom: 0;
	}

	.hero-slider .hero-content .section-sub-title{
		margin-bottom: 12px;
	}

	.hero-slider .hero-content .section-title h1{
		font-size: 40px;
		line-height: 1.2em;
	}

	.hero-slider .hero-content .section-title p{
		margin-top: 14px;
		font-size: 15px;
		line-height: 1.6em;
	}

	.hero-slider .hero-content .hero-slide-btn{
		margin-top: 24px;
	}
}

/* Hero Slider Responsive */
@media only screen and (max-width: 991px){
	.hero-slider{
		height: auto;
		min-height: 0;
	}

	.hero-slider .hero-slide{
		min-height: 620px;
		padding: 150px 0 120px;
	}

	.hero-slider-controls{
		bottom: 30px;
	}
}

@media only screen and (max-width: 767px){
	.hero-slider .hero-slide{
		min-height: 560px;
	}

	/* Di ponsel teks melebar sampai kanan: ujung toska dipekatkan. */
	.hero-slide::before,
	.page-header:before{
		background:
			linear-gradient(180deg, rgba(6, 38, 72, 0.55) 0%, rgba(6, 38, 72, 0) 28%),
			linear-gradient(90deg, rgba(11, 92, 171, 0.92) 0%, rgba(11, 92, 171, 0.82) 45%, rgba(18, 150, 142, 0.78) 100%);
	}

	.hero-button-prev,
	.hero-button-next{
		width: 44px;
		height: 44px;
	}

	.hero-slide-btn{
		margin-top: 30px;
	}
}

.custom-width {
	max-width: 1700px;
	padding: 0 20px;
}

.menu-topbar {
	display: flex;
	justify-content: flex-end;
	list-style: none;
}

.social-media {
	display: flex;
	justify-content: start;
	list-style: none;
	padding: 0 !important;
}

.social-media li {
	margin-left: 10px;
}

.social-media a {
	color: #fff;
}

.menu-topbar li {
	margin-left: 30px;
}

.menu-topbar a {
	color: #fff;
}

.hero .swiper {
	height: 100%;
}

/************************************/
/***   37. Announcement Banner    ***/
/************************************/

.announcement-banner{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	padding: 22px 26px;
	border-radius: 10px;
	background: linear-gradient(120deg, var(--accent-color) 0%, var(--accent-secondary-color) 100%);
	background-size: 160% 160%;
	background-position: 0% 50%;
	box-shadow: 0 12px 30px rgba(11, 92, 171, 0.30);
	transition: background-position 0.6s ease, box-shadow 0.3s ease;
	margin-top: 100px;
	margin-bottom: 100px;
}

.announcement-banner:hover{
	background-position: 100% 50%;
	box-shadow: 0 16px 38px rgba(11, 92, 171, 0.40);
}

.announcement-title{
	margin: 0;
	color: var(--white-color);
	font-weight: 700;
	font-size: clamp(1.05rem, 2.2vw, 1.6rem);
	line-height: 1.3;
	letter-spacing: 0.2px;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.announcement-btn{
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 8px 8px 8px 26px;
	border-radius: 50px;
	background: var(--white-color);
	color: var(--accent-color);
	font-weight: 600;
	font-size: 0.95rem;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	white-space: nowrap;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
	transition: transform 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}

.announcement-btn:hover{
	transform: translateY(-3px);
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
	color: var(--primary-color);
}

.announcement-btn .btn-text{
	line-height: 1;
}

.announcement-btn .btn-icon{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--accent-color), var(--accent-secondary-color));
	color: var(--white-color);
	font-size: 1rem;
	transition: transform 0.3s ease;
}

.announcement-btn:hover .btn-icon{
	transform: rotate(-8deg) scale(1.06);
}

@media only screen and (max-width: 575px){

	/* Satu kolom penuh: dua kartu berdampingan di ponsel membuat deskripsinya
	   pecah jadi terlalu banyak baris. */
	.akses-cepat{
		padding: 60px 0;
	}

	.akses-cepat-grid{
		grid-template-columns: 1fr;
		--ac-gap: 16px;
	}

	.akses-cepat-item{
		padding: 22px 20px;
	}

	.hm-publikasi{
		padding: 60px 0;
	}

	/* Dua tombol jadi bertumpuk penuh agar labelnya tidak pecah dua baris. */
	.sm-section{ padding: 60px 0; }
	.sm-rail{ flex-direction: column; }

	/* Baris hasil menumpuk: aksi turun ke bawah isi. */
	.srl-row{
		align-items: flex-start;
		flex-wrap: wrap;
		gap: 14px;
	}

	.srl-aksi{
		width: 100%;
		padding-top: 12px;
		border-top: 1px solid var(--divider-color);
		justify-content: space-between;
	}

	.srl-chip{ padding: 9px 16px; font-size: 14px; }

	.alur-kanal-list,
	.dok-grid{
		grid-template-columns: minmax(0, 1fr);
	}

	.alur-toggle{ padding: 16px 18px; gap: 12px; }
	.alur-panel{ padding: 4px 18px 20px; }

	.pgm-bar-title{ font-size: 18px; }
	.pgm-bar-aksi{ flex-direction: column; align-items: stretch; width: 100%; }
	.pgm-btn{ justify-content: space-between; }

	.tk-mitra-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }

	/* Panah slider testimoni pindah ke bawah agar tidak menutupi kutipan. */
	.tk-button-prev,
	.tk-button-next{
		position: static;
		transform: none;
		display: inline-flex;
		margin: 16px 8px 0 0;
	}

	.layanan-grid-action .btn-default,
	.tk-action .btn-default{ width: 100%; }

	.mk-statement-quote{ font-size: 22px; }
	.mk-nilai-item{ gap: 14px; }

	.tm-mitra-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }

	/* Blok tanggal pindah ke atas supaya judul acara tidak terjepit. */
	.ev-item{ grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.ev-tanggal{ flex-direction: row; gap: 8px; align-self: flex-start; padding: 8px 14px; }
	.ev-tanggal-hari{ font-size: 20px; }
	.ev-aksi .btn-default{ width: 100%; }

	.rm-row{ grid-template-columns: minmax(0, 1fr) 34px; gap: 12px 16px; }
	.rm-row-tgl{ grid-column: 1 / -1; }

	.pk-file{ grid-template-columns: 56px minmax(0, 1fr) 38px; gap: 14px; padding: 14px 16px; }

	.lyn-kat-grid{
		grid-template-columns: minmax(0, 1fr);
	}

	.lyn-intro-title{
		font-size: 23px;
	}

	.lyn-grid{
		grid-template-columns: minmax(0, 1fr);
	}

		.capaian-section{
		padding: 60px 0;
	}

	.ct-rail{
		flex-direction: column;
	}

	.ct-stat-grid,
	.ct-client-grid{
		grid-template-columns: minmax(0, 1fr);
	}

	.ct-stat-num{
		font-size: 30px;
	}

	/* Panah dipindah ke bawah kartu agar tidak menutupi teks kutipan. */
	.ct-quote-button-prev,
	.ct-quote-button-next{
		position: static;
		transform: none;
		display: inline-flex;
		margin: 16px 8px 0 0;
	}

	.footer-slim{
		padding: 44px 0 0;
	}

	.footer-slim-top{
		padding-bottom: 30px;
	}

	.footer-slim-mid{
		padding: 28px 0;
	}

	/* Tautan jadi kolom supaya tiap label tetap satu baris. */
	.footer-slim-links{
		flex-direction: column;
		gap: 12px;
	}

	/* Tombol selebar layar supaya labelnya tidak pecah dua baris. */
	.hm-publikasi-action .btn-default{
		width: 100%;
	}

	/* Dua tombol kategori jadi bertumpuk selebar layar — berdampingan di
	   ponsel membuat labelnya pecah dua baris (melanggar aturan tombol
	   tidak boleh dua baris). */
	.galeri-split{
		padding: 60px 0;
	}

	.galeri-split-actions{
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}

	.galeri-crosslink{
		flex-direction: column;
		align-items: stretch;
	}

	.galeri-crosslink-btn{
		justify-content: space-between;
	}

	.announcement-banner{
		flex-direction: column;
		align-items: stretch;
		text-align: center;
		border-radius: 28px;
		padding: 24px 20px;
	}

	.announcement-btn{
		justify-content: center;
	}
}

/************************************/
/***     37. Articles Page css    ***/
/************************************/

.featured-articles{
	padding: 100px 0 0;
}

/* Featured overlay card */
.featured-article{
	position: relative;
	display: block;
	height: 100%;
	border-radius: 14px;
	overflow: hidden;
	cursor: none;
}

.featured-article-image{
	height: 100%;
}

.featured-article-image img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease-in-out;
}

.featured-article:hover .featured-article-image img{
	transform: scale(1.06);
}

.featured-article::before{
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(32, 32, 32, 0) 35%, rgba(32, 32, 32, 0.88) 100%);
	z-index: 1;
}

.featured-article-content{
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	padding: 30px;
	z-index: 2;
}

.featured-article-content h3{
	color: var(--white-color);
	font-size: 22px;
	line-height: 1.35em;
	margin: 15px 0 0;
}

.featured-article-large{
	min-height: 520px;
}

.featured-article-large .featured-article-content{
	padding: 40px;
}

.featured-article-large .featured-article-content h3{
	font-size: 30px;
	max-width: 90%;
}

.featured-right{
	display: flex;
	flex-direction: column;
	gap: 30px;
	height: 100%;
}

.featured-right .featured-article{
	flex: 1;
	min-height: 245px;
}

/* Category badge */
.article-badge{
	display: inline-block;
	background: var(--accent-color);
	color: var(--white-color);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1.4;
	padding: 6px 14px;
	border-radius: 4px;
}

.featured-right .featured-article:nth-child(2) .article-badge{
	background: var(--accent-secondary-color);
}

/* Latest news grid — reuse .post-item with category + meta */
.latest-articles{
	padding: 90px 0 100px;
}

.article-post .post-featured-image{
	position: relative;
}

.article-post .post-category{
	position: absolute;
	left: 15px;
	bottom: 15px;
	z-index: 2;
	background: var(--accent-color);
	color: var(--white-color);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1.4;
	padding: 5px 12px;
	border-radius: 4px;
}

.article-post .post-meta{
	margin-bottom: 12px;
}

.article-post .post-meta span{
	font-size: 14px;
	color: var(--text-color);
}

.article-post .post-meta i{
	margin-right: 6px;
	color: var(--accent-color);
}

.article-post .post-item-content h2{
	margin-bottom: 12px;
}

.article-post .post-item-content p{
	margin: 0;
}

/* Pagination */
.articles-pagination{
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	margin-top: 20px;
}

.articles-pagination a{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 1px solid var(--divider-color);
	color: var(--primary-color);
	font-size: 15px;
	font-weight: 600;
	transition: all 0.3s ease-in-out;
}

.articles-pagination a:hover,
.articles-pagination a.active{
	background: var(--accent-color);
	border-color: var(--accent-color);
	color: var(--white-color);
}

/* CTA band */
.articles-cta{
	position: relative;
	padding: 90px 0;
	background: var(--accent-color) url('../images/cta-box-bg-image.jpg') no-repeat center center / cover;
	overflow: hidden;
}

.articles-cta::before{
	content: '';
	position: absolute;
	inset: 0;
	background: var(--accent-color);
	opacity: 0.92;
	z-index: 1;
}

.articles-cta-box{
	position: relative;
	z-index: 2;
	text-align: center;
}

.articles-cta-box h2{
	color: var(--white-color);
	font-size: 40px;
	margin-bottom: 15px;
}

.articles-cta-box p{
	max-width: 600px;
	margin: 0 auto 30px;
	color: rgba(255, 255, 255, 0.9);
}

.articles-cta-box .btn-default{
	background-color: var(--white-color);
	border-color: var(--white-color);
	color: var(--accent-color);
}

.articles-cta-box .btn-default::after{
	background-image: url('../images/arrow-primary.svg');
}

.articles-cta-box .btn-default:hover{
	background-color: var(--secondary-color);
	border-color: var(--secondary-color);
	color: var(--accent-color);
}

@media only screen and (max-width: 991px){
	.featured-articles{
		padding: 80px 0 0;
	}

	.featured-article-large{
		min-height: 400px;
	}

	.featured-right{
		margin-top: 30px;
		height: auto;
	}

	.featured-right .featured-article{
		min-height: 240px;
	}

	.latest-articles{
		padding: 70px 0;
	}

	.articles-cta{
		padding: 70px 0;
	}

	.articles-cta-box h2{
		font-size: 30px;
	}
}

@media only screen and (max-width: 767px){
	.featured-articles{
		padding: 60px 0 0;
	}

	.featured-article-content{
		padding: 20px;
	}

	.featured-article-large .featured-article-content,
	.featured-article-large .featured-article-content h3,
	.featured-article-content h3{
		font-size: 20px;
	}

	.featured-article-large .featured-article-content{
		padding: 20px;
	}
}

.content-iframe {
	height: 100vh;
	position: relative;
	z-index: 10;
}

.breadcrumb-item+.breadcrumb-item::before {
	content: '' !important;
}

/************************************/
/***     38. Sejarah Page css     ***/
/************************************/

/* --- Intro (modern, creative) --- */
.sejarah-intro{
	position: relative;
	padding: 110px 0 90px;
	overflow: hidden;
}

/* Soft decorative background blobs */
.sejarah-intro-shape{
	position: absolute;
	border-radius: 50%;
	z-index: 0;
	pointer-events: none;
}
.sejarah-intro-shape-1{
	width: 460px;
	height: 460px;
	top: -160px;
	right: -140px;
	background: radial-gradient(circle, rgba(23, 176, 167, 0.16) 0%, rgba(23, 176, 167, 0) 70%);
}
.sejarah-intro-shape-2{
	width: 380px;
	height: 380px;
	bottom: -160px;
	left: -160px;
	background: radial-gradient(circle, rgba(11, 92, 171, 0.12) 0%, rgba(11, 92, 171, 0) 70%);
}
.sejarah-intro .container{
	position: relative;
	z-index: 1;
}

/* Image composition */
.sejarah-intro-image{
	position: relative;
	padding: 0 18px 34px 34px;
}

/* Offset accent shape peeking behind the photo */
.sejarah-intro-image-bg{
	position: absolute;
	left: 0;
	bottom: 0;
	width: 60%;
	height: 72%;
	border-radius: 22px;
	background: linear-gradient(135deg, var(--accent-color), var(--accent-secondary-color));
	z-index: 0;
}

.sejarah-intro-image figure{
	position: relative;
	z-index: 1;
	margin: 0;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 30px 60px rgba(32, 32, 32, 0.22);
}

.sejarah-intro-image img{
	width: 100%;
	height: 480px;
	object-fit: cover;
	display: block;
}

/* Dotted pattern accent */
.sejarah-intro-dots{
	position: absolute;
	top: -6px;
	right: 0;
	width: 118px;
	height: 118px;
	z-index: 0;
	background-image: radial-gradient(var(--accent-color) 2px, transparent 2px);
	background-size: 16px 16px;
	opacity: 0.30;
}

/* Floating glass badge */
.sejarah-intro-badge{
	position: absolute;
	right: 0;
	bottom: 6px;
	z-index: 2;
	max-width: 250px;
	padding: 20px 24px;
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(6px);
	border: 1px solid rgba(255, 255, 255, 0.7);
	box-shadow: 0 20px 45px rgba(11, 92, 171, 0.25);
}

.sejarah-intro-badge h3{
	font-size: 46px;
	line-height: 1;
	margin: 0 0 4px;
	font-weight: 700;
	background: linear-gradient(135deg, var(--accent-color), var(--accent-secondary-color));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.sejarah-intro-badge h3 span{
	-webkit-text-fill-color: var(--accent-secondary-color);
}

.sejarah-intro-badge p{
	color: var(--text-color);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.5em;
	margin: 0;
}

/* Content */
.sejarah-intro-content{
	padding-left: 30px;
}

.sejarah-intro-content .section-title{
	margin-bottom: 32px;
}

/* Highlights as modern stat cards */
.sejarah-intro-highlights{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}

.sejarah-highlight-item{
	position: relative;
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 14px;
	padding: 24px 18px;
	overflow: hidden;
	transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.sejarah-highlight-item::before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 4px;
	background: linear-gradient(90deg, var(--accent-color), var(--accent-secondary-color));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.45s ease;
}

.sejarah-highlight-item:hover{
	transform: translateY(-6px);
	box-shadow: 0 18px 40px rgba(11, 92, 171, 0.12);
}

.sejarah-highlight-item:hover::before{
	transform: scaleX(1);
}

.sejarah-highlight-icon{
	width: 44px;
	height: 44px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 14px;
	font-size: 18px;
	color: var(--accent-color);
	background: rgba(11, 92, 171, 0.10);
	transition: all 0.4s ease;
}

.sejarah-highlight-item:nth-child(2) .sejarah-highlight-icon{
	color: var(--accent-secondary-color);
	background: rgba(23, 176, 167, 0.12);
}

.sejarah-highlight-item:hover .sejarah-highlight-icon{
	color: var(--white-color);
	background: var(--accent-color);
}

.sejarah-highlight-item:nth-child(2):hover .sejarah-highlight-icon{
	background: var(--accent-secondary-color);
}

.sejarah-highlight-item h3{
	font-size: 32px;
	line-height: 1;
	margin: 0 0 8px;
	font-weight: 700;
	background: linear-gradient(135deg, var(--accent-color), var(--accent-secondary-color));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.sejarah-highlight-item p{
	margin: 0;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.5em;
	color: var(--text-color);
}

/* --- Journey Slider (horizontal timeline) --- */
.company-journey{
	position: relative;
	padding: 90px 0 100px;
	background: var(--secondary-color);
	overflow: hidden;
	margin-top: 120px;
}

/* Dynamic background that changes with the active year */
.journey-bg{
	position: absolute;
	inset: 0;
	z-index: 0;
}

.journey-bg-layer{
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transform: scale(1.03);
	transition: opacity 0.9s ease-in-out;
}

.journey-bg-layer.is-active{
	opacity: 1;
}

/* Readability overlay (keeps cards and text clear) */
.journey-bg::after{
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgb(255 255 255 / 97%) 0%, rgb(139 139 139 / 76%) 40%, rgb(147 147 147 / 82%) 100%);
}

.company-journey > .container{
	position: relative;
	z-index: 1;
}

.journey-slider{
	position: relative;
	z-index: 1;
	padding: 0 60px;
}

.journey-slider .swiper{
	position: relative;
	overflow: hidden;
}

/* horizontal path line running through the node centres */
.journey-slider .swiper::before{
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 3px;
	transform: translateY(-50%);
	background: linear-gradient(90deg, var(--accent-color), var(--accent-secondary-color));
	z-index: 0;
}

.journey-item{
	position: relative;
	height: 540px;
}

/* Year node (circle with icon) sitting on the line */
.journey-node{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 74px;
	height: 74px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--white-color);
	border: 3px solid var(--accent-color);
	color: var(--accent-color);
	font-size: 26px;
	box-shadow: 0 8px 22px rgba(11, 92, 171, 0.20);
	z-index: 2;
	transition: all 0.35s ease-in-out;
}

/* Card */
.journey-card{
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 250px;
	max-width: calc(100% - 24px);
	background: var(--white-color);
	border-radius: 14px;
	box-shadow: 0 15px 40px rgba(32, 32, 32, 0.10);
	padding: 22px 22px 24px;
	text-align: center;
	transition: all 0.35s ease-in-out;
}

/* vertical connector between the node and the card */
.journey-card::after{
	content: '';
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 2px;
	height: 34px;
	background: var(--divider-color);
}

.journey-year{
	display: inline-block;
	font-size: 22px;
	font-weight: 700;
	color: var(--accent-color);
	line-height: 1;
	margin-bottom: 8px;
}

.journey-card h3{
	font-size: 17px;
	line-height: 1.35em;
	margin-bottom: 8px;
}

.journey-card p{
	font-size: 14px;
	margin: 0;
}

/* Continuous marquee — constant (linear) speed */
.journey-slider .swiper-wrapper{
	transition-timing-function: linear !important;
}

/* Up (default): card above the line. Down variant: card below.
   Class-based (loop-safe) so cloned slides keep the right side. */
.journey-slider .swiper-slide:not(.journey-slide-down) .journey-card{
	bottom: calc(50% + 58px);
}
.journey-slider .swiper-slide:not(.journey-slide-down) .journey-card::after{
	bottom: -34px;
}

.journey-slider .swiper-slide.journey-slide-down .journey-card{
	top: calc(50% + 58px);
}
.journey-slider .swiper-slide.journey-slide-down .journey-card::after{
	top: -34px;
}

/* Down-variant node colour (teal) for rhythm */
.journey-slider .swiper-slide.journey-slide-down .journey-node{
	border-color: var(--accent-secondary-color);
	color: var(--accent-secondary-color);
}

/* Hover emphasis */
.journey-item:hover .journey-node{
	background: var(--accent-color);
	color: var(--white-color);
	transform: translate(-50%, -50%) scale(1.08);
}
.journey-slider .swiper-slide:nth-child(even) .journey-item:hover .journey-node{
	background: var(--accent-secondary-color);
	border-color: var(--accent-secondary-color);
}
.journey-item:hover .journey-card{
	box-shadow: 0 22px 50px rgba(11, 92, 171, 0.16);
}

/* Active (centered) year — filled node + emphasised card */
.journey-slider .swiper-slide-active .journey-node{
	background: var(--accent-color);
	border-color: var(--accent-color);
	color: var(--white-color);
	transform: translate(-50%, -50%) scale(1.12);
}

.journey-slider .swiper-slide-active.journey-slide-down .journey-node{
	background: var(--accent-secondary-color);
	border-color: var(--accent-secondary-color);
}

.journey-slider .swiper-slide-active .journey-card{
	box-shadow: 0 26px 55px rgba(11, 92, 171, 0.20);
}

/* Arrows */
.journey-arrow{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	color: var(--primary-color);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 5;
	transition: all 0.3s ease-in-out;
}
.journey-arrow:hover{
	background: var(--accent-color);
	border-color: var(--accent-color);
	color: var(--white-color);
}
.journey-arrow.swiper-button-disabled{
	opacity: 0.4;
	cursor: default;
}
.journey-button-prev{ left: 0; }
.journey-button-next{ right: 0; }

/* Pagination */
.journey-pagination{
	position: relative;
	margin-top: 22px;
	text-align: center;
}
.journey-pagination .swiper-pagination-bullet{
	width: 9px;
	height: 9px;
	background: var(--accent-color);
	opacity: 0.35;
	transition: all 0.3s ease-in-out;
}
.journey-pagination .swiper-pagination-bullet-active{
	opacity: 1;
	width: 26px;
	border-radius: 6px;
}

/* --- Sejarah responsive --- */
@media only screen and (max-width: 991px){
	.sejarah-intro{ padding: 70px 0 50px; }
	.sejarah-intro-image{ margin-bottom: 50px; }
	.sejarah-intro-content{ padding-left: 0; }
	.company-journey{ padding: 60px 0 70px; }
	.journey-slider{ padding: 0 50px; }
}

@media only screen and (max-width: 767px){
	.sejarah-intro{ padding: 50px 0 40px; }
	.sejarah-intro-shape-1, .sejarah-intro-shape-2{ display: none; }
	.sejarah-intro-image{ padding: 0 0 26px 24px; margin-bottom: 40px; }
	.sejarah-intro-image img{ height: 340px; }
	.sejarah-intro-badge{ right: 0; padding: 16px 20px; max-width: 210px; }
	.sejarah-intro-badge h3{ font-size: 38px; }
	.sejarah-intro-highlights{ gap: 12px; }
	.sejarah-highlight-item{ padding: 18px 14px; }
	.sejarah-highlight-item h3{ font-size: 26px; }
	.journey-slider{ padding: 0 16px; }
	.journey-item{ height: 500px; }
	.journey-card{ width: 250px; }
	.journey-arrow{ display: none; }
	.journey-pagination{ margin-top: 16px; }
}

@media only screen and (max-width: 480px){
	.sejarah-intro-highlights{ grid-template-columns: 1fr 1fr; }
}

/************************************/
/***     39. Profil Pages css     ***/
/************************************/

/* ---------- Shared ---------- */
.profil-leadership,
.org-structure,
.sdm-stats{ padding: 100px 0 40px; }
.profil-vismisi{ padding: 60px 0; background: var(--secondary-color); }
.profil-moto{ padding: 90px 0 100px; }
.org-chart-image{ padding: 40px 0 100px; }
.sdm-charts{ padding: 40px 0 100px; }

/* ---------- Leadership (Profil Pejabat) ---------- */
.leader-feature{
	display: grid;
	grid-template-columns: 320px 1fr;
	gap: 40px;
	align-items: center;
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 20px;
	padding: 30px;
	margin-bottom: 30px;
	box-shadow: 0 20px 50px rgba(32, 32, 32, 0.06);
}
.leader-feature-image figure{
	margin: 0;
	border-radius: 16px;
	overflow: hidden;
	aspect-ratio: 1 / 1;
}
.leader-feature-image img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.leader-badge{
	display: inline-block;
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--accent-color);
	background: rgba(11, 92, 171, 0.10);
	padding: 6px 14px;
	border-radius: 6px;
	margin-bottom: 14px;
}
.leader-feature-content h3{ font-size: 28px; margin-bottom: 14px; }
.leader-feature-content > p{ margin-bottom: 18px; font-size: 14px; }
.leader-meta{ list-style: none; margin-top: 40px; padding: 0; }
.leader-meta li{
	position: relative;
    padding-left: 30px;
    margin-bottom: 10px;
    color: var(--text-color);
    font-size: 12px;;
}

li.submenu ul li a{
	font-size: 12px !important;
}
.leader-meta li i{ position: absolute; left: 0; top: 4px; color: var(--accent-secondary-color); }

.leader-card{
	display: flex;
	gap: 22px;
	align-items: flex-start;
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 16px;
	padding: 26px;
	height: calc(100% - 30px);
	margin-bottom: 30px;
	transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.leader-card:hover{ transform: translateY(-6px); box-shadow: 0 20px 45px rgba(11, 92, 171, 0.10); }
.leader-card-image{ flex: 0 0 auto; width: 96px; height: 96px; border-radius: 14px; overflow: hidden; }
.leader-card-image img{ width: 100%; height: 100%; object-fit: cover; }
.leader-card-content h3{ font-size: 20px; margin-bottom: 10px; line-height: 1.35em; }
.leader-card-content p{ margin: 0; }
.leader-card-placeholder{ background: linear-gradient(135deg, var(--accent-color), var(--accent-secondary-color)); border: none; color: var(--white-color); align-items: center; text-align: center; flex-direction: column; }
.leader-card-placeholder .leader-badge{ color: var(--white-color); background: rgba(255, 255, 255, 0.2); }
.leader-card-placeholder h3{ color: var(--white-color); }
.leader-card-placeholder p{ color: rgba(255, 255, 255, 0.9); }
.leader-placeholder-icon{ width: 66px; height: 66px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); display: flex; align-items: center; justify-content: center; font-size: 26px; margin-bottom: 6px; }

/* ---------- Visi & Misi ---------- */
.vismisi-visi{
	position: relative;
	background: linear-gradient(135deg, var(--accent-color), #0a4e91);
	color: var(--white-color);
	border-radius: 20px;
	padding: 40px;
	height: 100%;
	overflow: hidden;
}
.vismisi-visi::after{
	content: '\201C';
	position: absolute; right: 24px; bottom: -30px;
	font-size: 160px; line-height: 1; color: rgba(255, 255, 255, 0.12);
	font-family: Georgia, serif;
}
.vismisi-visi .section-sub-title{ color: var(--accent-secondary-color); }
.vismisi-visi h2{ color: var(--white-color); font-size: 26px; margin-bottom: 16px; }
.vismisi-visi p{ color: rgba(255, 255, 255, 0.92); position: relative; z-index: 1; }
.vismisi-misi{ padding-left: 30px; }
.misi-list{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 6px; }
.misi-item{
	display: flex; gap: 14px; align-items: flex-start;
	background: var(--white-color); border: 1px solid var(--divider-color);
	border-radius: 12px; padding: 18px;
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.misi-item:hover{ transform: translateY(-4px); box-shadow: 0 14px 30px rgba(11, 92, 171, 0.10); }
.misi-no{ font-size: 20px; font-weight: 700; line-height: 1; color: var(--accent-color); flex: 0 0 auto; }
.misi-item p{ margin: 0; font-size: 14px; }

/* ---------- Moto & Komitmen ---------- */
.komitmen-item{
	position: relative;
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 16px;
	padding: 28px 24px;
	height: calc(100% - 24px);
	margin-bottom: 24px;
	overflow: hidden;
	transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.komitmen-item:hover{ transform: translateY(-6px); box-shadow: 0 18px 40px rgba(11, 92, 171, 0.12); }
.komitmen-letter{
	display: inline-flex; align-items: center; justify-content: center;
	width: 54px; height: 54px; border-radius: 14px;
	font-size: 22px; font-weight: 700; color: var(--white-color);
	background: linear-gradient(135deg, var(--accent-color), var(--accent-secondary-color));
	margin-bottom: 16px;
}
.komitmen-item h3{ font-size: 20px; margin-bottom: 8px; }
.komitmen-item p{ margin: 0; font-size: 14px; }
.komitmen-item-cta{
	background: linear-gradient(135deg, var(--accent-secondary-color), var(--accent-color));
	color: var(--white-color); display: flex; flex-direction: column; justify-content: center; text-align: center; border: none;
}
.komitmen-item-cta h3{ color: var(--white-color); font-size: 24px; }
.komitmen-item-cta p{ color: rgba(255, 255, 255, 0.9); }

/* ---------- Struktur Organisasi ---------- */
.org-tree{ max-width: 760px; margin: 0 auto 20px; text-align: center; }
.org-level{ display: flex; justify-content: center; gap: 30px; flex-wrap: wrap; }
.org-node{
	background: var(--white-color); border: 1px solid var(--divider-color);
	border-radius: 14px; padding: 22px 26px; min-width: 240px;
	box-shadow: 0 12px 30px rgba(32, 32, 32, 0.06);
}
.org-node-lead{ background: linear-gradient(135deg, var(--accent-color), var(--accent-secondary-color)); border: none; color: var(--white-color); display: inline-block; }
.org-node-lead h3, .org-node-lead .org-node-role{ color: var(--white-color); }
.org-node-lead p{ color: rgba(255, 255, 255, 0.9); margin: 0; }
.org-node-role{ font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; color: var(--accent-color); margin-bottom: 6px; }
.org-node h3{ font-size: 18px; margin-bottom: 4px; }
.org-node p{ margin: 0; font-size: 14px; color: #fff; }
.org-node-icon{ width: 46px; height: 46px; border-radius: 12px; background: rgba(11, 92, 171, 0.10); color: var(--accent-color); display: flex; align-items: center; justify-content: center; font-size: 18px; margin: 0 auto 12px; }
.org-connector{ width: 2px; height: 40px; background: var(--divider-color); margin: 0 auto; }

.org-func-row{ margin-top: 40px; }
.org-func-item{
	text-align: center; background: var(--white-color); border: 1px solid var(--divider-color);
	border-radius: 16px; padding: 30px 22px; height: calc(100% - 24px); margin-bottom: 24px;
	transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.org-func-item:hover{ transform: translateY(-6px); box-shadow: 0 18px 40px rgba(11, 92, 171, 0.10); }
.org-func-item .icon-box{
	width: 64px; height: 64px; border-radius: 16px; margin: 0 auto 16px;
	display: flex; align-items: center; justify-content: center; font-size: 24px; color: var(--white-color);
	background: linear-gradient(135deg, var(--accent-color), var(--accent-secondary-color));
}
.org-func-item h3{ font-size: 18px; margin-bottom: 8px; }
.org-func-item p{ margin: 0; font-size: 14px; }

.org-chart-frame{ position: relative; background: var(--white-color); border: 1px solid var(--divider-color); border-radius: 16px; padding: 16px; box-shadow: 0 20px 50px rgba(32, 32, 32, 0.08); }
.org-chart-frame a{ display: block; border-radius: 10px; overflow: hidden; }
.org-chart-frame img{ width: 100%; height: auto; display: block; border-radius: 10px; }
.org-chart-hint{ text-align: center; margin-top: 14px; font-size: 14px; color: var(--text-color); }
.org-chart-hint i{ color: var(--accent-color); margin-right: 6px; }

/* ---------- SDM ---------- */
.sdm-stat-item{
	text-align: center; background: var(--white-color); border: 1px solid var(--divider-color);
	border-radius: 16px; padding: 30px 22px; height: calc(100% - 24px); margin-bottom: 24px;
	transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.sdm-stat-item:hover{ transform: translateY(-6px); box-shadow: 0 18px 40px rgba(11, 92, 171, 0.12); }
.sdm-stat-item .icon-box{
	width: 64px; height: 64px; border-radius: 16px; margin: 0 auto 16px;
	display: flex; align-items: center; justify-content: center; font-size: 24px; color: var(--white-color);
	background: linear-gradient(135deg, var(--accent-color), var(--accent-secondary-color));
}
.sdm-stat-item h2{ font-size: 40px; line-height: 1; margin: 0 0 6px; color: var(--accent-color); }
.sdm-stat-item p{ margin: 0; font-weight: 500; }

.sdm-chart-card{
	background: var(--white-color); border: 1px solid var(--divider-color);
	border-radius: 16px; padding: 26px; height: calc(100% - 24px); margin-bottom: 24px;
	box-shadow: 0 12px 30px rgba(32, 32, 32, 0.05);
}
.sdm-chart-card h3{ font-size: 18px; margin-bottom: 18px; text-align: center; }
.sdm-chart-canvas{ position: relative; height: 280px; }

/* ---------- Responsive ---------- */
@media only screen and (max-width: 991px){
	.profil-leadership, .org-structure, .sdm-stats{ padding: 70px 0 20px; }
	.profil-moto, .org-chart-image, .sdm-charts{ padding: 30px 0 70px; }
	.leader-feature{ grid-template-columns: 240px 1fr; gap: 30px; }
	.vismisi-misi{ padding-left: 0; margin-top: 30px; }
	.vismisi-visi{ margin-bottom: 0; }
}

@media only screen and (max-width: 767px){
	.leader-feature{ grid-template-columns: 1fr; text-align: center; padding: 24px; }
	.leader-feature-image{ max-width: 240px; margin: 0 auto; }
	.leader-feature-content h3{ font-size: 24px; }
	.leader-meta li{ text-align: left; }
	.leader-card{ flex-direction: column; align-items: center; text-align: center; }
	.misi-list{ grid-template-columns: 1fr; }
	.org-node{ min-width: 100%; }
	.sdm-stat-item h2{ font-size: 34px; }
	.sdm-chart-canvas{ height: 260px; }
}

/************************************/
/***  40. Profil Sidebar Layout   ***/
/************************************/

.profil-section{ padding: 90px 0 100px; }

/* Sidebar */
.profil-sidebar{
	position: sticky;
	top: 110px;
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 16px;
	padding: 22px;
	box-shadow: 0 16px 40px rgba(32, 32, 32, 0.05);
}
.profil-sidebar-title{
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--primary-color);
	padding: 4px 14px 14px;
	margin: 0 0 8px;
	border-bottom: 1px solid var(--divider-color);
}
.profil-nav{ list-style: none; margin: 0; padding: 0; }
.profil-nav li{ margin: 0; }
.profil-nav li a{
	display: block;
	position: relative;
	padding: 13px 16px;
	border-radius: 10px;
	font-size: 15px;
	font-weight: 500;
	color: var(--text-color);
	border-left: 3px solid transparent;
	transition: all 0.25s ease-in-out;
}
.profil-nav li a:hover{
	background: var(--secondary-color);
	color: var(--accent-color);
}
.profil-nav li.active a{
	background: rgba(11, 92, 171, 0.08);
	color: var(--accent-color);
	font-weight: 600;
	border-left-color: var(--accent-color);
	border-radius: 0 10px 10px 0;
}

/* Content panel */
.profil-content{
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 20px;
	padding: 42px 44px;
	box-shadow: 0 20px 50px rgba(32, 32, 32, 0.05);
}
.profil-content-title{
	font-size: 30px;
	color: var(--primary-color);
	margin-bottom: 14px;
}
.profil-content-lead{
	font-size: 16px;
	color: var(--text-color);
	margin-bottom: 30px;
}
.profil-block-title{
	font-size: 20px;
	color: var(--primary-color);
	margin: 34px 0 18px;
	padding-top: 24px;
	border-top: 1px solid var(--divider-color);
}
.profil-content > .leader-feature:first-of-type,
.profil-content .misi-list,
.profil-content .org-tree{ margin-top: 6px; }

/* Small label (reference: PERILAKU UTAMA / Visi) */
.value-label{
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--accent-color);
	margin-bottom: 8px;
}

/* Visi highlight box */
.profil-visi-box{
	background: rgba(11, 92, 171, 0.05);
	border: 1px solid rgba(11, 92, 171, 0.15);
	border-left: 4px solid var(--accent-color);
	border-radius: 12px;
	padding: 24px 26px;
	margin-bottom: 10px;
}
.profil-visi-box p{ margin: 0; font-size: 16px; color: var(--primary-color); font-style: italic; }

/* Bullet list */
.profil-bullet-list{ margin: 6px 0 0; padding-left: 0; list-style: none; }
.profil-bullet-list li{
	position: relative;
	padding-left: 26px;
	margin-bottom: 10px;
	color: var(--text-color);
}
.profil-bullet-list li::before{
	content: '\f058';
	font-family: 'Font Awesome 7 Free';
	font-weight: 900;
	position: absolute;
	left: 0;
	top: 2px;
	color: var(--accent-secondary-color);
}

/* Value cards (Nilai & Budaya — reference style) */
.value-grid{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-top: 6px;
}
.value-card{
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 14px;
	padding: 26px 24px;
	transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.value-card:hover{
	transform: translateY(-5px);
	border-color: transparent;
	box-shadow: 0 18px 40px rgba(11, 92, 171, 0.12);
}
.value-letter{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 46px;
	height: 46px;
	padding: 0 10px;
	border-radius: 100%;
	font-size: 20px;
	font-weight: 700;
	color: var(--white-color);
	background: linear-gradient(135deg, var(--accent-color), var(--accent-secondary-color));
	margin-bottom: 16px;
}
.value-card h3{
	font-size: 18px;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--accent-color);
	margin-bottom: 10px;
}
.value-card p{ margin: 0; font-size: 14px; color: var(--text-color); }

/* SDM note card inside content */
.sdm-chart-note{ display: flex; flex-direction: column; justify-content: center; text-align: center; }
.sdm-chart-note .icon-box{
	width: 56px; height: 56px; border-radius: 14px; margin: 0 auto 14px;
	display: flex; align-items: center; justify-content: center; font-size: 22px;
	color: var(--accent-color); background: rgba(11, 92, 171, 0.10);
}
.sdm-chart-note p{ font-size: 14px; color: var(--text-color); margin: 0; }

/* ---- Responsive ---- */
@media only screen and (max-width: 991px){
	.profil-section{ padding: 60px 0 70px; }
	.profil-sidebar{ position: static; margin-bottom: 30px; }
	.profil-content{ padding: 32px 28px; }
	.value-grid{ grid-template-columns: 1fr 1fr; }
}

@media only screen and (max-width: 767px){
	.profil-content{ padding: 26px 20px; max-width: 100%; }
	.profil-content-title{ font-size: 24px; overflow-wrap: anywhere; }
	.value-grid{ grid-template-columns: 1fr; }
	/* sidebar as horizontal scroller on phones — jangan melebar keluar viewport */
	.profil-sidebar{
		padding: 16px;
		width: 100%;
		max-width: 100%;
		min-width: 0;
		overflow: hidden;
		box-sizing: border-box;
	}
	.profil-nav{
		display: flex;
		gap: 8px;
		width: 100%;
		max-width: 100%;
		min-width: 0;
		overflow-x: auto;
		overflow-y: hidden;
		padding-bottom: 4px;
		-webkit-overflow-scrolling: touch;
	}
	.profil-nav li{ flex: 0 0 auto; max-width: none; }
	.profil-nav li a{ white-space: nowrap; border-left: none; border-bottom: 3px solid transparent; border-radius: 8px; }
	.profil-nav li.active a{ border-left: none; border-bottom-color: var(--accent-color); border-radius: 8px; }

	.row > [class*="col-"]{
		min-width: 0;
	}
}

/************************************/
/***  41. Sejarah Kepala + Modal  ***/
/************************************/

/* Highlights inside content panel */
.sejarah-highlights{
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
	padding: 22px 0;
	margin: 8px 0 6px;
	border-top: 1px solid var(--divider-color);
	border-bottom: 1px solid var(--divider-color);
}
.sejarah-hl h3{ font-size: 28px; line-height: 1; margin: 0 0 4px; color: var(--accent-color); }
.sejarah-hl p{ margin: 0; font-size: 14px; }

/* Kepala list (clickable rows) */
.kepala-list{
	list-style: none;
	margin: 6px 0 30px;
	padding: 0;
	border: 1px solid var(--divider-color);
	border-radius: 12px;
	overflow: hidden;
}
.kepala-list li{
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px 18px;
	cursor: pointer;
	border-bottom: 1px solid var(--divider-color);
	transition: background 0.25s ease-in-out;
}
.kepala-list li:last-child{ border-bottom: none; }
.kepala-list li:hover{ background: rgba(11, 92, 171, 0.05); }
.kepala-year{ flex: 0 0 auto; width: 110px; font-weight: 600; font-size: 14px; color: var(--accent-color); }
.kepala-name{ flex: 1; font-weight: 500; color: var(--primary-color); }
.kepala-list li i{ color: var(--accent-color); opacity: 0; transform: translateX(-6px); transition: all 0.25s ease-in-out; }
.kepala-list li:hover i{ opacity: 1; transform: none; }

/* Kepala photo cards */
.kepala-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 6px; }
.kepala-card{
	cursor: pointer;
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 14px;
	overflow: hidden;
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.kepala-card:hover{ transform: translateY(-5px); box-shadow: 0 18px 40px rgba(11, 92, 171, 0.14); }
.kepala-card-photo{ aspect-ratio: 1 / 1; overflow: hidden; background: var(--secondary-color); }
.kepala-card-photo img{ width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease-in-out; }
.kepala-card:hover .kepala-card-photo img{ transform: scale(1.05); }
.kepala-card-info{ padding: 14px 12px 16px; text-align: center; }
.kepala-card-info span{ font-size: 13px; font-weight: 600; color: var(--accent-color); }
.kepala-card-info h4{ font-size: 15px; margin: 4px 0 0; line-height: 1.35em; }

/* Timeline card is clickable */
.journey-card.js-sejarah-pop{ cursor: pointer; }

/* Detail modal */
body.sejarah-modal-open{ overflow: hidden; }
.sejarah-modal{ position: fixed; inset: 0; z-index: 9999; display: none; }
.sejarah-modal.is-open{ display: block; }
.sejarah-modal-backdrop{ position: absolute; inset: 0; background: rgba(20, 25, 35, 0.62); }
.sejarah-modal-dialog{
	position: relative;
	z-index: 1;
	width: calc(100% - 40px);
	max-width: 520px;
	max-height: 86vh;
	margin: 7vh auto;
	background: var(--white-color);
	border-radius: 18px;
	overflow: hidden auto;
	box-shadow: 0 40px 90px rgba(0, 0, 0, 0.35);
	animation: sejarahModalPop 0.3s ease;
}
@keyframes sejarahModalPop{ from{ opacity: 0; transform: translateY(24px); } to{ opacity: 1; transform: none; } }
.sejarah-modal-close{
	position: absolute; top: 14px; right: 14px; z-index: 2;
	width: 40px; height: 40px; border-radius: 50%; border: none;
	background: rgba(255, 255, 255, 0.92); color: var(--primary-color);
	font-size: 16px; cursor: pointer; transition: all 0.25s ease-in-out;
}
.sejarah-modal-close:hover{ background: var(--accent-color); color: var(--white-color); }
.sejarah-modal-media img{ width: 100%; height: 270px; object-fit: cover; display: block; }
.sejarah-modal-body{ padding: 26px 30px 32px; }
.sejarah-modal-period{
	display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: 0.04em;
	color: var(--accent-color); background: rgba(11, 92, 171, 0.10);
	padding: 5px 12px; border-radius: 6px; margin-bottom: 12px;
}
.sejarah-modal-role{ display: block; font-size: 14px; font-weight: 500; color: var(--accent-secondary-color); margin-bottom: 4px; }
.sejarah-modal-title{ font-size: 24px; line-height: 1.3em; margin-bottom: 12px; }
.sejarah-modal-desc{ margin: 0; color: var(--text-color); }

/* ---- Responsive ---- */
@media only screen and (max-width: 767px){
	.sejarah-highlights{ gap: 18px; }
	.sejarah-hl h3{ font-size: 24px; }
	.kepala-grid{ grid-template-columns: repeat(2, 1fr); gap: 14px; }
	.kepala-year{ width: 88px; font-size: 13px; }
	.kepala-name{ font-size: 14px; }
	.sejarah-modal-media img{ height: 210px; }
	.sejarah-modal-body{ padding: 22px 22px 26px; }
	.sejarah-modal-title{ font-size: 20px; }
}

@media only screen and (max-width: 420px){
	.kepala-grid{ grid-template-columns: 1fr 1fr; }
}

/************************************/
/***  42. Sejarah Table + Modal v2 ***/
/************************************/

/* Kepala table */
.kepala-table-wrap{ margin: 6px 0 10px; border: 1px solid var(--divider-color); border-radius: 12px; overflow: hidden; }
.kepala-table{ width: 100%; border-collapse: collapse; }
.kepala-table thead th{
	text-align: left; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
	color: var(--text-color); background: var(--secondary-color);
	padding: 12px 16px; border-bottom: 1px solid var(--divider-color);
}
.kepala-table tbody tr{ cursor: pointer; transition: background 0.2s ease-in-out; border-bottom: 1px solid var(--divider-color); }
.kepala-table tbody tr:last-child{ border-bottom: none; }
.kepala-table tbody tr:hover{ background: rgba(11, 92, 171, 0.05); }
.kepala-table td{ padding: 13px 16px; font-size: 14px; vertical-align: middle; }
.kepala-table td:first-child{ font-weight: 600; color: var(--accent-color); white-space: nowrap; }
.kepala-table td:nth-child(2){ font-weight: 500; color: var(--primary-color); }
.kepala-table td:nth-child(3){ color: var(--text-color); }
.kepala-table .kepala-arrow{ width: 34px; text-align: right; color: var(--accent-color); }
.kepala-table .kepala-arrow i{ opacity: 0; transform: translateX(-6px); transition: all 0.2s ease-in-out; }
.kepala-table tbody tr:hover .kepala-arrow i{ opacity: 1; transform: none; }

/* Timeline inside the content card */
.company-journey-inline{
	position: relative;
	margin: 6px 0 0;
	padding: 0;
	border-radius: 16px;
	overflow: hidden;
	background: var(--secondary-color);
}
.company-journey-inline .journey-slider{ max-width: none; margin: 0; padding: 24px 0; }
.company-journey-inline .journey-item{ height: 500px; }
.company-journey-inline .journey-card{ width: 230px; }
.company-journey-inline .journey-pagination{ margin-top: 0; padding-bottom: 8px; }

@media only screen and (max-width: 767px){
	.company-journey-inline .journey-item{ height: 470px; }
	.company-journey-inline .journey-card{ width: 220px; }
	.kepala-table thead{ display: none; }
	.kepala-table, .kepala-table tbody, .kepala-table tr, .kepala-table td{ display: block; width: 100%; }
	.kepala-table tbody tr{ padding: 12px 14px; position: relative; }
	.kepala-table td{ padding: 2px 0; }
	.kepala-table td:first-child{ font-size: 13px; }
	.kepala-table td:nth-child(2){ font-size: 16px; }
	.kepala-table .kepala-arrow{ position: absolute; top: 14px; right: 12px; width: auto; }
	.kepala-table .kepala-arrow i{ opacity: 0.5; }
}

/* ===== Modal v2 — Wikipedia-style infobox (enlarged, photo not cropped) ===== */
.sejarah-modal-dialog{ max-width: 780px; }
.sejarah-modal-grid{ display: grid; grid-template-columns: 1fr 260px; gap: 0; }
.sejarah-modal-main{ padding: 40px 34px 40px 40px; order: 1; }
.sejarah-modal-kicker{
	display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: 0.04em;
	color: var(--accent-secondary-color); text-transform: uppercase; margin-bottom: 10px;
}
.sejarah-modal-title{ font-size: 26px; line-height: 1.25em; margin-bottom: 16px; color: var(--primary-color); }
.sejarah-modal-desc{ margin: 0; color: var(--text-color); font-size: 15.5px; line-height: 1.7em; }

/* Infobox (right) */
.sejarah-modal-infobox{
	order: 2;
	background: var(--secondary-color);
	border-left: 1px solid var(--divider-color);
	padding: 24px 22px;
	display: flex; flex-direction: column; align-items: center;
}
.sejarah-modal-media{ width: 100%; }
/* photo shown in full — NOT cropped */
.sejarah-modal-media img{
	width: 100%; height: auto; display: block; border-radius: 10px;
	background: var(--white-color); border: 1px solid var(--divider-color);
}
.sejarah-modal-noimg{
	width: 100%; aspect-ratio: 3 / 4; border-radius: 10px;
	background: var(--white-color); border: 1px dashed var(--divider-color);
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
	color: var(--text-color);
}
.sejarah-modal-noimg i{ font-size: 40px; color: var(--divider-color); }
.sejarah-modal-noimg span{ font-size: 12px; }
.sejarah-modal-caption{ font-size: 13px; font-weight: 600; text-align: center; color: var(--primary-color); margin-top: 12px; }
.sejarah-modal-facts{ width: 100%; margin: 16px 0 0; }
.sejarah-modal-facts .fact-row{
	display: flex; justify-content: space-between; gap: 12px;
	padding: 10px 0; border-top: 1px solid var(--divider-color);
}
.sejarah-modal-facts dt{ font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-color); }
.sejarah-modal-facts dd{ margin: 0; font-size: 13px; text-align: right; color: var(--primary-color); }

@media only screen and (max-width: 640px){
	.sejarah-modal-grid{ grid-template-columns: 1fr; }
	.sejarah-modal-infobox{ order: 1; border-left: none; border-bottom: 1px solid var(--divider-color); flex-direction: row; gap: 16px; align-items: flex-start; }
	.sejarah-modal-media{ width: 130px; flex: 0 0 auto; }
	.sejarah-modal-caption{ display: none; }
	.sejarah-modal-facts{ margin-top: 0; }
	.sejarah-modal-facts .fact-row:first-child{ border-top: none; padding-top: 0; }
	.sejarah-modal-main{ order: 2; padding: 24px; }
	.sejarah-modal-title{ font-size: 22px; }
}

/************************************/
/***  43. Sejarah Vertical Timeline ***/
/************************************/

.vtimeline{ position: relative; max-width: 720px; margin: 14px auto 0; padding: 6px 0; }
.vtimeline::before{
	content: ''; position: absolute; left: 50%; top: 0; bottom: 0;
	width: 2px; transform: translateX(-50%); background: var(--divider-color);
}

.vtimeline-item{
	position: relative; width: 50%; box-sizing: border-box;
	display: flex; align-items: center; gap: 18px;
	cursor: pointer; padding: 16px 46px 16px 0; margin-bottom: 6px;
}
.vtimeline-item:nth-child(odd){ left: 0; flex-direction: row; text-align: left; }
.vtimeline-item:nth-child(even){ left: 50%; flex-direction: row-reverse; text-align: right; padding: 16px 0 16px 46px; }

/* Year badge (outer side, alternating colour) */
.vtimeline-badge{
	flex: 0 0 auto; width: 60px; height: 60px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-size: 15px; font-weight: 700; color: var(--white-color);
	background: var(--accent-secondary-color);
	box-shadow: 0 8px 18px rgba(23, 176, 167, 0.30);
	transition: transform 0.3s ease-in-out;
}
.vtimeline-item:nth-child(even) .vtimeline-badge{
	background: var(--accent-color); box-shadow: 0 8px 18px rgba(11, 92, 171, 0.30);
}

.vtimeline-content{ flex: 1; }
.vtimeline-content h4{ font-size: 16px; line-height: 1.35em; margin: 0 0 6px; color: var(--accent-secondary-color); }
.vtimeline-item:nth-child(even) .vtimeline-content h4{ color: var(--accent-color); }
.vtimeline-content p{ margin: 0; font-size: 14px; color: var(--text-color); }

/* Dashed connector from content toward the center line */
.vtimeline-item::before{
	content: ''; position: absolute; top: 50%; width: 34px; height: 0;
	border-top: 2px dashed var(--divider-color);
}
.vtimeline-item:nth-child(odd)::before{ right: 8px; }
.vtimeline-item:nth-child(even)::before{ left: 8px; }

/* Dot sitting on the center line */
.vtimeline-item::after{
	content: ''; position: absolute; top: 50%; transform: translateY(-50%);
	width: 16px; height: 16px; border-radius: 50%;
	background: var(--accent-secondary-color); border: 3px solid var(--white-color);
	box-shadow: 0 0 0 2px var(--accent-secondary-color);
	z-index: 2;
}
.vtimeline-item:nth-child(odd)::after{ right: -8px; }
.vtimeline-item:nth-child(even)::after{
	left: -8px; background: var(--accent-color); box-shadow: 0 0 0 2px var(--accent-color);
}

/* Hover */
.vtimeline-item:hover .vtimeline-badge{ transform: scale(1.08); }
.vtimeline-item:hover .vtimeline-content h4{ text-decoration: underline; }

/* Responsive — single column (line on the left) */
@media only screen and (max-width: 767px){
	.vtimeline{ max-width: 100%; }
	.vtimeline::before{ left: 26px; }
	.vtimeline-item,
	.vtimeline-item:nth-child(even){
		width: 100%; left: 0; flex-direction: row; text-align: left;
		padding: 14px 0 14px 62px; gap: 14px;
	}
	.vtimeline-badge{ width: 50px; height: 50px; font-size: 13px; }
	.vtimeline-item::after,
	.vtimeline-item:nth-child(even)::after{ left: 18px; right: auto; }
	.vtimeline-item::before,
	.vtimeline-item:nth-child(even)::before{ left: 34px; right: auto; width: 20px; }
}

/************************************/
/***  44. Sejarah Circle Steps    ***/
/************************************/

.circle-steps{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	gap: 24px 34px;
	margin: 20px 0 10px;
	padding: 10px 0 4px;
}

.circle-step{
	flex: 0 0 auto;
	width: 190px;
	text-align: center;
}
/* gentle wave — every other circle sits lower */
.circle-step:nth-child(even){ margin-top: 44px; }

.circle-step-badge{
	position: relative;
	width: 124px;
	height: 124px;
	border-radius: 50%;
	margin: 0 auto 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--white-color);
	background: linear-gradient(135deg, var(--accent-color) 0%, #1a7fd1 100%);
	border: 5px solid var(--white-color);
	box-shadow: 0 16px 34px rgba(11, 92, 171, 0.30), 0 0 0 1px var(--divider-color);
	transition: transform 0.35s ease-in-out;
}
.circle-step-badge::after{
	content: '';
	position: absolute;
	inset: 8px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.35);
}
.circle-step:nth-child(even) .circle-step-badge{
	background: linear-gradient(135deg, var(--accent-secondary-color) 0%, #12968e 100%);
	box-shadow: 0 16px 34px rgba(23, 176, 167, 0.30), 0 0 0 1px var(--divider-color);
}
.circle-step:hover .circle-step-badge{ transform: translateY(-6px) scale(1.03); }
.circle-step-badge span{ font-size: 30px; font-weight: 700; line-height: 1; letter-spacing: -0.01em; }

.circle-step-info h4{
	font-size: 15px;
	margin: 0 0 6px;
	color: var(--primary-color);
	text-transform: uppercase;
	letter-spacing: 0.02em;
}
.circle-step-info p{ margin: 0; font-size: 13px; line-height: 1.55em; color: var(--text-color); }

/* Responsive */
@media only screen and (max-width: 767px){
	.circle-steps{ gap: 26px 20px; }
	.circle-step{ width: 45%; }
	.circle-step:nth-child(even){ margin-top: 0; }
	.circle-step-badge{ width: 104px; height: 104px; }
	.circle-step-badge span{ font-size: 26px; }
}

@media only screen and (max-width: 420px){
	.circle-step{ width: 100%; }
}

/************************************/
/***  45. SDM Year Tabs           ***/
/************************************/

.sdm-year-tabs{
	display: inline-flex;
	gap: 6px;
	padding: 5px;
	margin-bottom: 22px;
	background: var(--secondary-color);
	border-radius: 12px;
}
.sdm-year-tab{
	border: none;
	background: transparent;
	color: var(--text-color);
	font-size: 14px;
	font-weight: 600;
	padding: 9px 22px;
	border-radius: 9px;
	cursor: pointer;
	transition: all 0.25s ease-in-out;
}
.sdm-year-tab:hover{ color: var(--accent-color); }
.sdm-year-tab.is-active{
	background: var(--accent-color);
	color: var(--white-color);
	box-shadow: 0 6px 16px rgba(11, 92, 171, 0.25);
}

/* taller canvas so pie + multi-item legend both fit */
.sdm-charts .sdm-chart-canvas,
.profil-content .sdm-chart-canvas{ height: 330px; }

/************************************/
/***  46. Informasi Publik Pages  ***/
/************************************/

/* ---------- Intro / lead block ---------- */
.ip-kicker{
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--accent-color);
	background: rgba(11, 92, 171, 0.08);
	padding: 6px 14px;
	border-radius: 6px;
	margin-bottom: 14px;
}
.ip-intro{ font-size: 15px; line-height: 1.7em; text-align: justify; margin-bottom: 24px; }
.ip-intro:last-child{ margin-bottom: 0; }

/* ---------- Figure / image frame ---------- */
.ip-figure{
	margin: 6px 0 10px;
	background: var(--secondary-color);
	border: 1px solid var(--divider-color);
	border-radius: 16px;
	padding: 16px;
	text-align: center;
}
.ip-figure img{ width: 100%; height: auto; display: block; border-radius: 10px; }
.ip-figure figcaption{
	margin-top: 14px;
	font-size: 13px;
	font-style: italic;
	color: var(--text-color);
}
.ip-figure-plain{ background: var(--white-color); }
.ip-figure-narrow img{ max-width: 560px; margin: 0 auto; }

/* ---------- Update stamp ---------- */
.ip-update{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	font-style: italic;
	letter-spacing: 0.04em;
	color: var(--text-color);
	background: var(--secondary-color);
	border-radius: 30px;
	padding: 7px 16px;
	margin-top: 4px;
}
.ip-update i{ color: var(--accent-secondary-color); font-style: normal; }

/* ---------- Highlight / quote box ---------- */
.ip-highlight{
	background: rgba(11, 92, 171, 0.05);
	border: 1px solid rgba(11, 92, 171, 0.15);
	border-left: 4px solid var(--accent-color);
	border-radius: 12px;
	padding: 22px 26px;
	margin-bottom: 20px;
}
.ip-highlight h4{ font-size: 16px; color: var(--primary-color); margin-bottom: 8px; }
.ip-highlight p{ margin: 0; font-size: 15px; color: var(--primary-color); }
.ip-highlight-teal{
	background: rgba(23, 176, 167, 0.06);
	border-color: rgba(23, 176, 167, 0.20);
	border-left-color: var(--accent-secondary-color);
}

/* ---------- Motto strip ---------- */
.ip-motto{
	display: flex;
	align-items: center;
	gap: 22px;
	background: linear-gradient(135deg, var(--accent-color), var(--accent-secondary-color));
	color: var(--white-color);
	border-radius: 16px;
	padding: 26px 30px;
	margin-bottom: 10px;
}
.ip-motto-word{ font-size: 34px; font-weight: 700; line-height: 1; letter-spacing: 0.04em; }
.ip-motto p{ margin: 0; color: rgba(255, 255, 255, 0.92); font-size: 15px; }

/* ---------- Ordered legal list ---------- */
.ip-legal-list{ counter-reset: iplegal; list-style: none; margin: 6px 0 0; padding: 0; }
.ip-legal-list li{
	counter-increment: iplegal;
	position: relative;
	padding: 0 0 14px 44px;
	margin-bottom: 14px;
	font-size: 14px;
	line-height: 1.65em;
	color: var(--text-color);
	border-bottom: 1px dashed var(--divider-color);
}
.ip-legal-list li:last-child{ border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.ip-legal-list li::before{
	content: counter(iplegal);
	position: absolute;
	left: 0;
	top: -2px;
	width: 30px;
	height: 30px;
	border-radius: 8px;
	background: rgba(11, 92, 171, 0.08);
	color: var(--accent-color);
	font-size: 13px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ---------- Marker list (roman / alphabet) ---------- */
.ip-marker-list{ list-style: none; margin: 6px 0 0; padding: 0; }
.ip-marker-list > li{
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding: 16px 0;
	border-bottom: 1px solid var(--divider-color);
	font-size: 14px;
	line-height: 1.7em;
	text-align: justify;
}
.ip-marker-list > li:last-child{ border-bottom: none; padding-bottom: 0; }
.ip-marker{
	flex: 0 0 auto;
	min-width: 34px;
	height: 26px;
	padding: 0 8px;
	border-radius: 6px;
	background: var(--secondary-color);
	color: var(--accent-color);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 2px;
}

/* ---------- Split cards (hak / kewajiban) ---------- */
.ip-split{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 6px; }
.ip-panel{
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 14px;
	padding: 26px 24px;
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.ip-panel:hover{ transform: translateY(-5px); box-shadow: 0 18px 40px rgba(11, 92, 171, 0.10); }
.ip-panel-head{ display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.ip-panel-head .icon-box{
	width: 44px; height: 44px; border-radius: 12px; flex: 0 0 auto;
	display: flex; align-items: center; justify-content: center; font-size: 17px;
	color: var(--white-color);
	background: linear-gradient(135deg, var(--accent-color), var(--accent-secondary-color));
}
.ip-panel-head h3{ font-size: 16px; margin: 0; line-height: 1.4em; text-transform: uppercase; letter-spacing: 0.02em; }
.ip-panel ul{ list-style: none; margin: 0; padding: 0; }
.ip-panel ul li{
	position: relative;
	padding-left: 24px;
	margin-bottom: 12px;
	font-size: 14px;
	line-height: 1.65em;
	color: var(--text-color);
}
.ip-panel ul li:last-child{ margin-bottom: 0; }
.ip-panel ul li::before{
	content: "\f0da";
	font-family: 'Font Awesome 7 Free';
	font-weight: 900;
	position: absolute;
	left: 0;
	top: 1px;
	color: var(--accent-secondary-color);
}

/* ---------- Numbered flow (prosedur / mekanisme) ---------- */
.ip-flow{ counter-reset: ipflow; margin-top: 6px; }
.ip-flow-item{
	counter-increment: ipflow;
	position: relative;
	padding: 0 0 26px 56px;
	font-size: 14px;
	line-height: 1.7em;
	text-align: justify;
}
.ip-flow-item::before{
	content: counter(ipflow);
	position: absolute;
	left: 0;
	top: 0;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--accent-color), var(--accent-secondary-color));
	color: var(--white-color);
	font-size: 15px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
}
.ip-flow-item::after{
	content: '';
	position: absolute;
	left: 18px;
	top: 38px;
	bottom: 0;
	width: 2px;
	background: var(--divider-color);
}
.ip-flow-item:last-child{ padding-bottom: 0; }
.ip-flow-item:last-child::after{ display: none; }
.ip-flow-item h4{ font-size: 16px; margin-bottom: 8px; padding-top: 8px; }
.ip-flow-item p{ margin: 0; }

/* ---------- Stat tiles ---------- */
.ip-stat{
	text-align: center;
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 14px;
	padding: 26px 18px;
	height: calc(100% - 24px);
	margin-bottom: 24px;
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.ip-stat:hover{ transform: translateY(-5px); box-shadow: 0 18px 40px rgba(11, 92, 171, 0.10); }
.ip-stat .icon-box{
	width: 52px; height: 52px; border-radius: 14px; margin: 0 auto 14px;
	display: flex; align-items: center; justify-content: center; font-size: 20px;
	color: var(--accent-color); background: rgba(11, 92, 171, 0.10);
}
.ip-stat h2{ font-size: 36px; line-height: 1; margin: 0 0 6px; color: var(--accent-color); }
.ip-stat p{ margin: 0; font-size: 14px; font-weight: 500; }
.ip-stat-accent{ background: linear-gradient(135deg, var(--accent-color), var(--accent-secondary-color)); border: none; }
.ip-stat-accent .icon-box{ background: rgba(255, 255, 255, 0.20); color: var(--white-color); }
.ip-stat-accent h2, .ip-stat-accent p{ color: var(--white-color); }

/* ---------- Document table ---------- */
.ip-table-wrap{
	overflow-x: auto;
	border: 1px solid var(--divider-color);
	border-radius: 14px;
	margin-top: 6px;
	background: var(--white-color);
}
.ip-table{ width: 100%; border-collapse: collapse; min-width: 520px; }
.ip-table thead th{
	background: var(--accent-color);
	color: var(--white-color);
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	text-align: left;
	padding: 14px 18px;
	white-space: nowrap;
}
.ip-table tbody td{
	padding: 14px 18px;
	font-size: 14px;
	line-height: 1.6em;
	color: var(--text-color);
	border-bottom: 1px solid var(--divider-color);
	vertical-align: middle;
}
.ip-table tbody tr:last-child td{ border-bottom: none; }
.ip-table tbody tr:nth-child(even){ background: rgba(245, 245, 245, 0.6); }
.ip-table tbody tr:hover{ background: rgba(11, 92, 171, 0.05); }
.ip-table td.ip-col-num{ width: 60px; text-align: center; font-weight: 600; color: var(--primary-color); }
.ip-table td.ip-col-code{ width: 110px; text-align: center; font-weight: 700; color: var(--accent-color); }
.ip-table td.ip-col-score{ width: 120px; text-align: center; font-weight: 700; color: var(--primary-color); }
.ip-table td.ip-col-file{ width: 150px; text-align: right; white-space: nowrap; }

/* ---------- Download chips & buttons ---------- */
.ip-chips{ display: flex; flex-wrap: wrap; gap: 8px; }
.ip-chip{
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 14px;
	border-radius: 8px;
	background: var(--secondary-color);
	border: 1px solid transparent;
	font-size: 13px;
	font-weight: 600;
	color: var(--primary-color);
	transition: all 0.25s ease-in-out;
}
.ip-chip i{ font-size: 11px; color: var(--accent-secondary-color); transition: color 0.25s ease-in-out; }
.ip-chip:hover{ background: var(--accent-color); border-color: var(--accent-color); color: var(--white-color); }
.ip-chip:hover i{ color: var(--white-color); }

.ip-download{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	border-radius: 8px;
	background: rgba(11, 92, 171, 0.08);
	font-size: 13px;
	font-weight: 600;
	color: var(--accent-color);
	transition: all 0.25s ease-in-out;
}
.ip-download:hover{ background: var(--accent-color); color: var(--white-color); }

/* ---------- Document group (label + chips row) ---------- */
.ip-doc-group{
	padding: 20px 0;
	border-bottom: 1px solid var(--divider-color);
}
.ip-doc-group:last-child{ border-bottom: none; padding-bottom: 0; }
.ip-doc-group:first-child{ padding-top: 6px; }
.ip-doc-label{
	display: block;
	font-size: 15px;
	font-weight: 600;
	color: var(--primary-color);
	margin-bottom: 12px;
	line-height: 1.5em;
}
.ip-doc-label i{ color: var(--accent-color); margin-right: 8px; }

/* ---------- Document list (single links) ---------- */
.ip-doc-list{ list-style: none; margin: 6px 0 0; padding: 0; }
.ip-doc-list li{ margin-bottom: 10px; }
.ip-doc-list li:last-child{ margin-bottom: 0; }
/* Kartu tautan dokumen. :not(.doc-action): tombol bulat Pratinjau/Unduh
   (inc/documents.php) di dalam daftar yang sama tidak ikut bergaya kartu. */
.ip-doc-list li a:not(.doc-action){
	display: flex;
	align-items: flex-start;
	gap: 14px;
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 12px;
	padding: 16px 18px;
	font-size: 14px;
	line-height: 1.6em;
	color: var(--text-color);
	transition: all 0.3s ease-in-out;
}
.ip-doc-list li a:not(.doc-action):hover{
	border-color: var(--accent-color);
	color: var(--accent-color);
	transform: translateX(4px);
	box-shadow: 0 12px 28px rgba(11, 92, 171, 0.08);
}
.ip-doc-list li a:not(.doc-action) i{ color: var(--accent-secondary-color); font-size: 16px; margin-top: 2px; flex: 0 0 auto; }

/* ---------- Chart cards ---------- */
.ip-chart-card{
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 16px;
	padding: 24px;
	height: calc(100% - 24px);
	margin-bottom: 24px;
	box-shadow: 0 12px 30px rgba(32, 32, 32, 0.05);
}
.ip-chart-card h3{ font-size: 16px; margin-bottom: 18px; text-align: center; }
.ip-chart-canvas{ position: relative; height: 300px; }
.ip-chart-banner{
	background: linear-gradient(135deg, var(--accent-secondary-color), var(--accent-color));
	color: var(--white-color);
	border-radius: 12px;
	padding: 16px 20px;
	text-align: center;
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 22px;
}

/* ---------- Gauge (doughnut + nilai di tengah) ---------- */
.ip-gauge{ position: relative; }
.ip-gauge-center{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	pointer-events: none;
	width: 60%;
}
.ip-gauge-value{
	display: block;
	font-size: 38px;
	font-weight: 700;
	line-height: 1;
	color: var(--accent-color);
}
.ip-gauge-label{
	display: block;
	margin-top: 6px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--text-color);
}

/* ---------- Legenda data manual (di bawah chart) ---------- */
.ip-legend{ list-style: none; margin: 16px 0 0; padding: 0; }
.ip-legend li{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 0;
	font-size: 13px;
	color: var(--text-color);
	border-bottom: 1px dashed var(--divider-color);
}
.ip-legend li:last-child{ border-bottom: none; }
.ip-legend .ip-legend-key{ display: flex; align-items: center; gap: 9px; }
.ip-legend .ip-legend-dot{ width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.ip-legend .ip-legend-value{ font-weight: 700; color: var(--primary-color); white-space: nowrap; }

/* ---------- Catatan apresiasi ---------- */
.ip-note{
	background: var(--secondary-color);
	border-radius: 14px;
	padding: 22px 24px;
	display: flex;
	gap: 16px;
	align-items: flex-start;
	margin-top: 6px;
}
.ip-note .icon-box{
	width: 44px; height: 44px; border-radius: 12px; flex: 0 0 auto;
	display: flex; align-items: center; justify-content: center; font-size: 17px;
	color: var(--white-color);
	background: linear-gradient(135deg, var(--accent-color), var(--accent-secondary-color));
}
.ip-note p{ margin: 0; font-size: 14px; line-height: 1.7em; color: var(--text-color); }

/* ---------- Embedded form ---------- */
.ip-embed{
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 16px;
	padding: 10px;
	overflow: hidden;
}
.ip-embed iframe{ width: 100%; min-height: 1100px; border: 0; display: block; border-radius: 10px; }

/* ---------- Contact strip ---------- */
.ip-contact{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 6px; }
.ip-contact-item{
	background: var(--secondary-color);
	border-radius: 14px;
	padding: 22px 20px;
	text-align: center;
}
.ip-contact-item .icon-box{
	width: 46px; height: 46px; border-radius: 12px; margin: 0 auto 12px;
	display: flex; align-items: center; justify-content: center; font-size: 17px;
	color: var(--white-color);
	background: linear-gradient(135deg, var(--accent-color), var(--accent-secondary-color));
}
.ip-contact-item h4{ font-size: 14px; margin-bottom: 6px; }
.ip-contact-item p, .ip-contact-item a{ margin: 0; font-size: 13px; line-height: 1.6em; color: var(--text-color); }
.ip-contact-item a:hover{ color: var(--accent-color); }

/* ---------- Responsive ---------- */
@media only screen and (max-width: 991px){
	.ip-split{ grid-template-columns: 1fr; }
	.ip-contact{ grid-template-columns: 1fr; }
	.ip-embed iframe{ min-height: 1300px; }
}

@media only screen and (max-width: 767px){
	.ip-motto{ flex-direction: column; text-align: center; gap: 14px; padding: 24px 20px; }
	.ip-motto-word{ font-size: 28px; }
	.ip-flow-item{ padding-left: 48px; }
	.ip-flow-item::before{ width: 32px; height: 32px; font-size: 13px; }
	.ip-flow-item::after{ left: 15px; top: 32px; }
	.ip-figure{ padding: 10px; }
	.ip-stat h2{ font-size: 30px; }
	.ip-chart-canvas{ height: 260px; }
	.ip-table thead th, .ip-table tbody td{ padding: 12px 14px; }
	.ip-gauge-value{ font-size: 32px; }
	.ip-note{ flex-direction: column; }
}

@media only screen and (max-width: 575px){
	.ip-marker-list > li{ flex-direction: column; gap: 8px; }
	.ip-doc-list li a:not(.doc-action){ flex-direction: column; gap: 8px; }
	.ip-legend li{ flex-direction: column; align-items: flex-start; gap: 4px; }
}

@media (prefers-reduced-motion: reduce){
	.ip-panel, .ip-stat, .ip-chip, .ip-download, .ip-doc-list li a:not(.doc-action){ transition: none; }
	.ip-panel:hover, .ip-stat:hover, .ip-doc-list li a:not(.doc-action):hover{ transform: none; }
}

/************************************/
/***  47. FAQ & Kontak Content    ***/
/************************************/

/* ---------- FAQ answer content ---------- */
.accordion-body .faq-list{
	margin: 0 0 16px;
	padding-left: 22px;
}
.accordion-body .faq-list:last-child{ margin-bottom: 0; }
.accordion-body .faq-list li{
	margin-bottom: 8px;
	line-height: 1.65em;
	color: var(--text-color);
}
.accordion-body .faq-list li:last-child{ margin-bottom: 0; }
.accordion-body .faq-list li::marker{ color: var(--accent-secondary-color); }
.accordion-body .faq-list a{
	color: var(--accent-color);
	font-weight: 500;
	text-decoration: underline;
}
.accordion-body .faq-list a:hover{ color: var(--accent-secondary-color); }

.accordion-body .faq-note{
	font-size: 13px;
	font-style: italic;
	color: var(--text-color);
	margin: 0;
}

.accordion-body .faq-figure{
	margin: 0 0 18px;
	background: var(--secondary-color);
	border: 1px solid var(--divider-color);
	border-radius: 14px;
	padding: 14px;
}
.accordion-body .faq-figure img{
	width: 100%;
	height: auto;
	display: block;
	border-radius: 8px;
}

/* FAQ price / parameter tables */
.faq-table-wrap{
	overflow-x: auto;
	border: 1px solid var(--divider-color);
	border-radius: 12px;
	margin-bottom: 6px;
	background: var(--white-color);
}
.faq-table{ width: 100%; border-collapse: collapse; min-width: 420px; }
.faq-table thead th{
	background: var(--accent-color);
	color: var(--white-color);
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	text-align: left;
	padding: 12px 16px;
}
.faq-table tbody td{
	padding: 12px 16px;
	font-size: 14px;
	line-height: 1.6em;
	color: var(--text-color);
	border-bottom: 1px solid var(--divider-color);
}
.faq-table tbody tr:last-child td{ border-bottom: none; }
.faq-table tbody tr:nth-child(even){ background: rgba(245, 245, 245, 0.6); }
.faq-table tbody td:last-child{
	text-align: right;
	white-space: nowrap;
	font-weight: 600;
	color: var(--primary-color);
}

/* ---------- Kontak: alamat kantor ---------- */
.contact-address-box{
	display: flex;
	align-items: center;
	gap: 22px;
	background: var(--secondary-color);
	border-radius: 20px;
	padding: 30px 34px;
	margin-bottom: 40px;
}
.contact-address-box .icon-box{
	width: 62px;
	height: 62px;
	border-radius: 16px;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--white-color);
	box-shadow: 0 10px 24px rgba(32, 32, 32, 0.06);
}
.contact-address-box .icon-box img{ width: 26px; height: 26px; }
.contact-address-content h2{ font-size: 20px; margin-bottom: 8px; }
.contact-address-content p{ margin: 0; font-size: 15px; }

/* Kanal media sosial di kotak alamat (data sama dengan footer) */
.contact-social{
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 14px;
	flex-shrink: 0;
}
.contact-social-label{
	font-size: 15px;
	font-weight: 600;
	color: var(--primary-color);
}
.contact-social ul{
	display: flex;
	gap: 10px;
	list-style: none;
	padding: 0;
	margin: 0;
}
.contact-social a{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--white-color);
	color: var(--accent-color);
	font-size: 16px;
	transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}
.contact-social a:hover,
.contact-social a:focus-visible{
	background: var(--accent-color);
	color: var(--white-color);
}

/* ---------- Kontak: form + peta berdampingan ---------- */
.contact-form-map-box{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: start;
}
.contact-form-map-box .contact-us-form{ width: 100%; padding: 45px; }
.contact-form-map-box .section-title{ margin-bottom: 30px; }

.contact-map{
	position: relative;
	border-radius: 20px;
	overflow: hidden;
	border: 1px solid var(--divider-color);
	box-shadow: 0 20px 50px rgba(32, 32, 32, 0.08);
	min-height: 100%;
}
.contact-map iframe{
	width: 100%;
	height: 100%;
	min-height: 620px;
	border: 0;
	display: block;
}

/* ---------- Kontak: Contact Form 7 (inc/contact-form.php) ---------- */
.contact-form .wpcf7-form-control-wrap{ display: block; }
.contact-form .form-control.wpcf7-not-valid{ box-shadow: 0 0 0 1px var(--error-color); }
.contact-form .wpcf7-not-valid-tip{
	color: var(--error-color);
	font-size: 14px;
	margin-top: 6px;
}
.contact-form .wpcf7 form .wpcf7-response-output{
	margin: 20px 0 0;
	padding: 12px 16px;
	border: 0;
	border-radius: 10px;
	font-size: 15px;
	color: var(--error-color);
	background: rgba(230, 87, 87, 0.1);
}
.contact-form .wpcf7 form.sent .wpcf7-response-output{
	color: #198754;
	background: rgba(25, 135, 84, 0.1);
}
.contact-form .wpcf7-spinner{ vertical-align: middle; margin: 0 0 0 16px; }

/* ---------- Responsive ---------- */
@media only screen and (max-width: 991px){
	.contact-form-map-box{ grid-template-columns: 1fr; gap: 30px; }
	.contact-map iframe{ min-height: 400px; }
}

@media only screen and (max-width: 767px){
	.contact-address-box{ flex-direction: column; text-align: center; padding: 24px 20px; }
	.contact-address-content h2{ font-size: 18px; }
	.contact-social{ margin-left: 0; flex-direction: column; gap: 10px; }
	.faq-table thead th, .faq-table tbody td{ padding: 10px 12px; }
	.accordion-body .faq-figure{ padding: 10px; }
}

/************************************/
/***  48. Footer Newsletter css   ***/
/************************************/

/* Polos: tanpa kartu, tanpa border, tanpa overlay bercahaya.
   Melebar 100% mengikuti kolomnya. */
.footer-newsletter{
	position: relative;
	width: 100%;
	max-width: 100%;
}

.footer-newsletter h2{
	position: relative;
	z-index: 1;
	font-size: 21px;
	line-height: 1.35em;
	color: var(--white-color);
	margin-bottom: 10px;
}

.footer-newsletter > p{
	position: relative;
	z-index: 1;
	font-size: 14.5px;
	line-height: 1.65em;
	color: rgba(255, 255, 255, 0.72);
	margin-bottom: 20px;
}

.footer-newsletter-form{ position: relative; z-index: 1; }

.footer-newsletter-field{
	position: relative;
	display: flex;
	align-items: center;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid var(--dark-divider-color);
	border-radius: 50px;
	padding: 6px 6px 6px 18px;
	transition: border-color 0.3s ease-in-out, background 0.3s ease-in-out;
}

.footer-newsletter-field:focus-within{
	background: rgba(255, 255, 255, 0.12);
	border-color: var(--accent-secondary-color);
}

.footer-newsletter-icon{
	flex: 0 0 auto;
	font-size: 14px;
	color: rgba(255, 255, 255, 0.55);
	margin-right: 10px;
	transition: color 0.3s ease-in-out;
}

.footer-newsletter-field:focus-within .footer-newsletter-icon{
	color: var(--accent-secondary-color);
}

.footer-newsletter-field .form-control{
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	height: 42px;
	font-size: 14px;
	font-weight: 400;
	color: var(--white-color);
	background: transparent;
	border: none;
	border-radius: 0;
	padding: 0;
	box-shadow: none;
}

.footer-newsletter-field .form-control:focus{
	background: transparent;
	color: var(--white-color);
	border: none;
	box-shadow: none;
	outline: none;
}

.footer-newsletter-field .form-control::placeholder{
	color: rgba(255, 255, 255, 0.5);
	font-size: 14px;
}

.footer-newsletter-btn{
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	border: none;
	border-radius: 50%;
	color: var(--white-color);
	background: linear-gradient(135deg, var(--accent-color), var(--accent-secondary-color));
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.footer-newsletter-btn:hover{
	transform: translateX(2px) scale(1.06);
	box-shadow: 0 8px 20px rgba(23, 176, 167, 0.35);
}

.footer-newsletter-btn i{ font-size: 14px; color: inherit; }

/* Pesan validator.js */
.footer-newsletter .help-block{
	font-size: 12px;
	color: var(--error-color);
	margin-top: 10px;
}

/* Field nama: pil yang sama tanpa tombol, di atas field email */
.footer-newsletter-field-name{
	padding-right: 18px;
	margin-bottom: 10px;
}

/* Honeypot anti-bot: tersembunyi dari pengunjung dan pembaca layar */
.footer-newsletter-hp{
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.footer-newsletter-form.is-sending .footer-newsletter-btn{
	opacity: 0.6;
	cursor: progress;
}

.footer-newsletter-status{
	font-size: 13.5px;
	line-height: 1.55em;
	color: rgba(255, 255, 255, 0.72);
	margin: 12px 0 0 18px;
}

.footer-newsletter-status.is-success{ color: var(--accent-secondary-color); }
.footer-newsletter-status.is-error{ color: #FF8A8A; }

/* ---------- Responsive ---------- */
/* Aturan margin/max-width/padding kartu dibuang bersama kartunya. */
@media only screen and (max-width: 767px){
	.footer-newsletter h2{ font-size: 18px; }
	.footer-newsletter > p{ font-size: 14px; }
	.footer-newsletter-field{ padding-left: 14px; }
}

@media (prefers-reduced-motion: reduce){
	.footer-newsletter-field,
	.footer-newsletter-icon,
	.footer-newsletter-btn{ transition: none; }
	.footer-newsletter-btn:hover{ transform: none; }
}

/************************************/
/***  49. Mobile Off-canvas Nav   ***/
/************************************/

/* ---------- Overlay ---------- */
.mobile-nav-overlay{
	position: fixed;
	inset: 0;
	z-index: 1040;
	background: rgba(32, 32, 32, 0.6);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
}

.mobile-nav-overlay.is-visible{
	opacity: 1;
	visibility: visible;
}

/* ---------- Panel (slide dari kiri) ---------- */
.mobile-nav{
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	z-index: 1050;
	width: 340px;
	max-width: 86vw;
	display: flex;
	flex-direction: column;
	background:
		radial-gradient(circle at 0% 0%, rgba(11, 92, 171, 0.35) 0%, rgba(11, 92, 171, 0) 55%),
		var(--primary-color);
	box-shadow: 20px 0 60px rgba(0, 0, 0, 0.35);
	transform: translateX(-100%);
	visibility: hidden;
	transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1), visibility 0.45s;
	overflow: hidden;
}

.mobile-nav.is-open{
	transform: translateX(0);
	visibility: visible;
}

body.mobile-nav-open{ overflow: hidden; }

/* ---------- Header panel ---------- */
.mobile-nav-head{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 22px 24px;
	border-bottom: 1px solid var(--dark-divider-color);
	flex: 0 0 auto;
}

.mobile-nav-logo img{
	width: 100%;
	max-width: 130px;
	height: auto;
}

.mobile-nav-close{
	width: 38px;
	height: 38px;
	flex: 0 0 auto;
	border: 1px solid var(--dark-divider-color);
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.06);
	color: var(--white-color);
	font-size: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.3s ease-in-out;
}

.mobile-nav-close:hover{
	background: var(--accent-color);
	border-color: var(--accent-color);
	transform: rotate(90deg);
}

/* ---------- Isi menu ---------- */
.mobile-nav-body{
	flex: 1 1 auto;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 18px 16px 24px;
}

.mobile-nav-body::-webkit-scrollbar{ width: 4px; }
.mobile-nav-body::-webkit-scrollbar-thumb{ background: var(--dark-divider-color); border-radius: 30px; }

.mobile-nav-menu,
.mobile-nav-menu ul{
	list-style: none;
	margin: 0;
	padding: 0;
}

.mobile-nav-menu > li{
	margin: 0 0 4px;
	/* reveal bertahap saat panel dibuka */
	opacity: 0;
	transform: translateX(-18px);
}

.mobile-nav.is-open .mobile-nav-menu > li{
	animation: mobile-nav-item 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.mobile-nav.is-open .mobile-nav-menu > li:nth-child(1){ animation-delay: 0.10s; }
.mobile-nav.is-open .mobile-nav-menu > li:nth-child(2){ animation-delay: 0.15s; }
.mobile-nav.is-open .mobile-nav-menu > li:nth-child(3){ animation-delay: 0.20s; }
.mobile-nav.is-open .mobile-nav-menu > li:nth-child(4){ animation-delay: 0.25s; }
.mobile-nav.is-open .mobile-nav-menu > li:nth-child(5){ animation-delay: 0.30s; }
.mobile-nav.is-open .mobile-nav-menu > li:nth-child(6){ animation-delay: 0.35s; }
.mobile-nav.is-open .mobile-nav-menu > li:nth-child(7){ animation-delay: 0.40s; }
.mobile-nav.is-open .mobile-nav-menu > li:nth-child(8){ animation-delay: 0.45s; }

@keyframes mobile-nav-item{
	to{ opacity: 1; transform: translateX(0); }
}

/* Level 1 */
.mobile-nav-menu > li > a{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 16px;
	border-radius: 12px;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4em;
	color: var(--white-color);
	text-transform: capitalize;
	transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
}

.mobile-nav-menu > li > a:hover,
.mobile-nav-menu > li.is-open > a{
	background: rgba(255, 255, 255, 0.07);
	color: var(--accent-secondary-color);
}

/* Panah accordion */
.mobile-nav-arrow{
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.08);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	color: var(--white-color);
	transition: transform 0.35s ease-in-out, background 0.3s ease-in-out, color 0.3s ease-in-out;
}

.mobile-nav-menu li.is-open > a > .mobile-nav-arrow{
	transform: rotate(180deg);
	background: var(--accent-secondary-color);
	color: var(--primary-color);
}

/* Level 2 & 3 */
.mobile-nav-menu li > ul{
	display: none;
	margin: 4px 0 8px;
	padding-left: 16px;
	border-left: 1px solid var(--dark-divider-color);
}

.mobile-nav-menu li > ul > li > a{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 11px 14px;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5em;
	color: rgba(255, 255, 255, 0.72);
	transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
}

.mobile-nav-menu li > ul > li > a:hover{
	background: rgba(255, 255, 255, 0.06);
	color: var(--accent-secondary-color);
}

/* Judul kolom mega-menu jadi sub-heading */
.mobile-nav-menu .mega-menu-title{
	font-weight: 600 !important;
	color: var(--white-color) !important;
	font-size: 14px !important;
}

.mobile-nav-menu li > ul li > ul > li > a{
	font-size: 13px;
	padding: 9px 12px;
	color: rgba(255, 255, 255, 0.6);
}

/* ---------- Footer panel ---------- */
.mobile-nav-foot{
	flex: 0 0 auto;
	padding: 20px 24px 24px;
	border-top: 1px solid var(--dark-divider-color);
	background: rgba(0, 0, 0, 0.15);
}

.mobile-nav-cta{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 14px 20px;
	border-radius: 50px;
	font-size: 15px;
	font-weight: 600;
	color: var(--white-color);
	background: linear-gradient(135deg, var(--accent-color), var(--accent-secondary-color));
	transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.mobile-nav-cta:hover{
	color: var(--white-color);
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(23, 176, 167, 0.30);
}

.mobile-nav-social{
	display: flex;
	justify-content: center;
	gap: 12px;
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
}

.mobile-nav-social a{
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	color: var(--white-color);
	font-size: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease-in-out;
}

.mobile-nav-social a:hover{
	background: var(--accent-color);
	color: var(--white-color);
}

/* ---------- Perbaikan header di layar kecil ---------- */
@media only screen and (max-width: 991px){
	.topbar{
		margin-top: 14px;
	}

	.topbar .row{
		align-items: center;
	}

	.social-media,
	.menu-topbar{
		margin-bottom: 0;
	}

	.menu-topbar{
		flex-wrap: wrap;
		gap: 6px 0;
	}

	.menu-topbar li{
		margin-left: 22px;
	}

	.menu-topbar a{
		font-size: 14px;
	}

	.navbar-brand{
		width: 170px;
	}
}

@media only screen and (max-width: 767px){
	.topbar{
		margin-top: 10px;
		padding-bottom: 10px;
		border-bottom: 1px solid var(--dark-divider-color);
		display: none;
	}

	.topbar .col-md-4,
	.topbar .col-md-8{
		width: 100%;
	}

	.social-media{
		justify-content: center;
		margin-bottom: 8px;
	}

	.social-media li{
		margin: 0 5px;
	}

	.menu-topbar{
		justify-content: center;
		flex-wrap: wrap;
		gap: 4px 0;
	}

	.menu-topbar li{
		margin: 0 12px;
	}

	.menu-topbar a{
		font-size: 13px;
	}

	.navbar{
		padding: 14px 0 !important;
	}

	.navbar-brand{
		width: 140px;
	}

	.navbar-toggle{
		width: 42px;
		height: 42px;
	}

	.mobile-nav-head{ padding: 18px 20px; }
	.mobile-nav-body{ padding: 14px 12px 20px; }
	.mobile-nav-foot{ padding: 16px 20px 20px; }
}

@media only screen and (max-width: 575px){
	.menu-topbar li{
		margin: 0 8px;
	}

	.menu-topbar a{
		font-size: 12px;
	}

	.navbar-brand{
		width: 120px;
	}

	.mobile-nav{
		width: 300px;
	}
}

@media (prefers-reduced-motion: reduce){
	.mobile-nav,
	.mobile-nav-overlay,
	.navbar-toggle-bar,
	.mobile-nav-close,
	.mobile-nav-cta,
	.mobile-nav-arrow{ transition: none; }

	.mobile-nav.is-open .mobile-nav-menu > li{ animation: none; }
	.mobile-nav-menu > li{ opacity: 1; transform: none; }
	.mobile-nav-close:hover,
	.mobile-nav-cta:hover{ transform: none; }
}

/************************************/
/***  Alur Layanan (Service Flow) ***/
/************************************/

.sf-intro{ padding: 90px 0 20px; }
.sf-intro .section-title{ margin-bottom: 0; }
.sf-intro .section-title p{ max-width: 880px; }

/* ---------- Quick nav ---------- */
.sf-quicknav{
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	list-style: none;
	margin: 28px 0 0;
	padding: 0;
}
.sf-quicknav a{
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 18px 10px 10px;
	border: 1px solid var(--divider-color);
	border-radius: 100px;
	background: var(--white-color);
	font-size: 14px;
	font-weight: 600;
	color: var(--primary-color);
	transition: all 0.3s ease-in-out;
}
.sf-quicknav a span{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--accent-color);
	color: var(--white-color);
	font-size: 12px;
	font-weight: 700;
	transition: all 0.3s ease-in-out;
}
.sf-quicknav a:hover{
	border-color: var(--accent-color);
	color: var(--accent-color);
	box-shadow: 0 12px 26px rgba(11, 92, 171, 0.1);
}
.sf-quicknav a:hover span{ background: var(--accent-secondary-color); }

/* ---------- Stage band ---------- */
.sf-stage{
	--sf-accent: var(--accent-color);
	--sf-line: rgba(11, 92, 171, 0.3);
	--sf-gap: 26px;
	position: relative;
	padding: 70px 0;
	scroll-margin-top: 120px;
}
.sf-stage-2{
	background: var(--secondary-color);
	--sf-accent: var(--accent-secondary-color);
	--sf-line: rgba(23, 176, 167, 0.4);
}
.sf-stage-3{
	background: var(--primary-color);
	--sf-accent: var(--accent-secondary-color);
	--sf-line: rgba(255, 255, 255, 0.22);
}

.sf-stage-head{
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 20px;
	margin-bottom: 50px;
}
.sf-stage-num{
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	height: 62px;
	border-radius: 50%;
	background: var(--sf-accent);
	color: var(--white-color);
	font-size: 24px;
	font-weight: 700;
	line-height: 1;
	box-shadow: 0 14px 28px rgba(32, 32, 32, 0.14);
}
.sf-stage-heading h2{
	font-size: 32px;
	font-weight: 600;
	line-height: 1.2em;
	text-transform: uppercase;
	margin-bottom: 8px;
}
.sf-stage-heading p{
	font-size: 15px;
	line-height: 1.7em;
	max-width: 620px;
	margin: 0 auto;
}
.sf-stage-3 .sf-stage-heading h2{ color: var(--white-color); }
.sf-stage-3 .sf-stage-heading p{ color: rgba(255, 255, 255, 0.7); }

/* ---------- Flow grid ---------- */
.sf-flow{
	display: grid;
	gap: 45px var(--sf-gap);
	margin-top: 80px;
	margin-bottom: 80px;
}
.sf-flow-4{ grid-template-columns: repeat(4, 1fr); }
.sf-flow-3{ grid-template-columns: repeat(3, 1fr); }

/* ---------- Node ---------- */
.sf-node{
	position: relative;
	text-align: center;
}

/* Connector antar node (garis putus-putus, berhenti di tepi ikon) */
.sf-node::after{
	content: '';
	position: absolute;
	top: 44px;
	left: calc(50% + 54px);
	width: calc(100% + var(--sf-gap) - 108px);
	border-top: 2px dashed var(--sf-line);
}
.sf-flow-4 .sf-node:nth-child(4n)::after,
.sf-flow-3 .sf-node:nth-child(3n)::after,
.sf-flow .sf-node:last-child::after{ display: none; }

.sf-node-icon{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 88px;
	height: 88px;
	margin: 0 auto 20px;
	border-radius: 50%;
	background: var(--white-color);
	border: 2px solid var(--sf-line);
	color: var(--sf-accent);
	font-size: 30px;
	transition: all 0.4s ease-in-out;
}
.sf-node:hover .sf-node-icon{
	background: var(--sf-accent);
	border-color: var(--sf-accent);
	color: var(--white-color);
	transform: translateY(-5px);
	box-shadow: 0 16px 32px rgba(32, 32, 32, 0.12);
}
.sf-stage-3 .sf-node-icon{
	background: #2B2B2B;
	color: var(--white-color);
}

.sf-node-num{
	position: absolute;
	top: -6px;
	right: -6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--accent-color);
	color: var(--white-color);
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	border: 2px solid var(--white-color);
}
.sf-stage-2 .sf-node-num{ border-color: var(--secondary-color); }
.sf-stage-3 .sf-node-num{ border-color: var(--primary-color); }

.sf-node-title{
	font-size: 17px;
	font-weight: 700;
	line-height: 1.4em;
	text-transform: uppercase;
	margin-bottom: 10px;
}
.sf-node-text{
	font-size: 14px;
	line-height: 1.7em;
	color: var(--text-color);
	margin: 0;
}
.sf-node-text a{
	color: var(--accent-color);
	font-weight: 600;
}
.sf-node-text a:hover{ color: var(--accent-secondary-color); }
.sf-node-link{
	display: inline-block;
	margin-top: 10px;
	font-size: 13px;
	font-weight: 600;
	color: var(--sf-accent);
	word-break: break-word;
	border-bottom: 1px solid transparent;
	transition: all 0.3s ease-in-out;
}
.sf-node-link:hover{
	color: var(--accent-color);
	border-bottom-color: currentColor;
}
.sf-stage-3 .sf-node-title{ color: var(--white-color); }
.sf-stage-3 .sf-node-text{ color: rgba(255, 255, 255, 0.7); }
.sf-stage-3 .sf-node-link:hover{ color: var(--white-color); }

/* ---------- Stage footer ---------- */
.sf-stage-foot{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 18px 30px;
	margin-top: 55px;
}
.sf-stage-foot-link{
	font-size: 15px;
	font-weight: 600;
	color: var(--white-color);
	border-bottom: 1px solid rgba(255, 255, 255, 0.35);
	transition: all 0.3s ease-in-out;
}
.sf-stage-foot-link:hover{
	color: var(--accent-secondary-color);
	border-bottom-color: var(--accent-secondary-color);
}

/* ---------- Responsive ---------- */
@media only screen and (max-width: 1199px){
	.sf-stage{ --sf-gap: 20px; }
	.sf-node-icon{ width: 78px; height: 78px; font-size: 26px; }
	.sf-node::after{ top: 39px; left: calc(50% + 49px); width: calc(100% + var(--sf-gap) - 98px); }
	.sf-node-title{ font-size: 16px; }
}

@media only screen and (max-width: 991px){
	.sf-intro{ padding: 60px 0 10px; }
	.sf-stage{ padding: 55px 0; }
	.sf-stage-head{ margin-bottom: 40px; }
	.sf-stage-heading h2{ font-size: 28px; }
	.sf-flow-4,
	.sf-flow-3{ grid-template-columns: repeat(2, 1fr); }
	.sf-flow .sf-node:nth-child(2n)::after{ display: none; }
	.sf-flow-3 .sf-node:nth-child(3n)::after{ border-top: 2px dashed var(--sf-line); display: block; }
	.sf-flow-3 .sf-node:nth-child(2n)::after,
	.sf-flow .sf-node:last-child::after{ display: none; }
}

@media only screen and (max-width: 767px){
	.sf-intro{ padding: 50px 0 0; }
	.sf-stage{ padding: 50px 0; }
	.sf-stage-num{ width: 52px; height: 52px; font-size: 20px; }
	.sf-stage-heading h2{ font-size: 24px; }

	.sf-flow-4,
	.sf-flow-3{
		--sf-gap: 34px;
		grid-template-columns: 1fr;
		gap: var(--sf-gap);
	}

	/* Connector berubah menjadi garis vertikal */
	.sf-flow-4 .sf-node:nth-child(n)::after,
	.sf-flow-3 .sf-node:nth-child(n)::after{
		display: block;
		top: 78px;
		left: 50%;
		width: 0;
		height: calc(100% - 78px + var(--sf-gap));
		transform: translateX(-50%);
		border-top: none;
		border-left: 2px dashed var(--sf-line);
	}
	.sf-flow-4 .sf-node:last-child::after,
	.sf-flow-3 .sf-node:last-child::after{ display: none; }

	.sf-stage-foot{ margin-top: 40px; }
}

@media only screen and (max-width: 575px){
	.sf-quicknav a{ width: 100%; }
	.sf-stage-head{ flex-direction: column; gap: 14px; }
	.sf-stage-foot .btn-default{ width: 100%; text-align: center; }
}

/************************************/
/***    Beranda — Section Baru    ***/
/************************************/

/* ---------- Hero: dua aksi berdampingan ---------- */
.hm-hero-actions{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
}

.hm-btn-ghost{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 15px 24px;
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: 6px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1em;
	color: var(--white-color);
	transition: all 0.35s ease-in-out;
}

.hm-btn-ghost::after{
	content: '';
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	background-image: url('../images/arrow-white.svg');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 16px auto;
	transition: transform 0.35s ease-in-out;
}

.hm-btn-ghost:hover{
	background-color: var(--white-color);
	border-color: var(--white-color);
	color: var(--primary-color);
}

.hm-btn-ghost:hover::after{
	background-image: url('../images/arrow-primary.svg');
	transform: translateX(4px);
}

/* Tombol utama banner putih agar menonjol di overlay biru. Hover bawaan
   .btn-highlighted (--secondary-color) transparan 60% dan tembus ke biru,
   jadi diganti warna solid. */
.hm-hero-actions .btn-default.btn-highlighted:hover{
	background-color: #E6F0FA;
	border-color: #E6F0FA;
	color: var(--accent-color);
}

/* ---------- Tautan ringkas antar halaman ---------- */
.hm-quicklinks{
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	margin: 30px 0 0;
	padding: 0;
}

.hm-quicklinks a{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	border: 1px solid var(--divider-color);
	border-radius: 100px;
	background: var(--white-color);
	font-size: 13px;
	font-weight: 600;
	color: var(--primary-color);
	transition: all 0.3s ease-in-out;
}

.hm-quicklinks a::before{
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--accent-secondary-color);
}

.hm-quicklinks a:hover{
	border-color: var(--accent-color);
	color: var(--accent-color);
	box-shadow: 0 10px 22px rgba(11, 92, 171, 0.08);
}

/* ---------- Ringkasan ensiklopedia ---------- */
.hm-encyclopedia{
	padding: 90px 0 70px;
}

/* ---------- Slider kartu di home (pembaruan & ensiklopedia) ---------- */
.hm-slider{
	position: relative;
}

.hm-slider .swiper-slide{
	height: auto;
}

.hm-slider .post-item,
.hm-slider .enc-card{
	height: 100%;
	margin-bottom: 0;
}

.hm-slider-nav{
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
}

.hm-slider-arrow{
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background-color: var(--white-color);
	border: 1px solid var(--divider-color);
	color: var(--primary-color);
	font-size: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.3s ease-in-out;
	z-index: 3;
}

.hm-slider-arrow:hover{
	background-color: var(--accent-color);
	border-color: var(--accent-color);
	color: var(--white-color);
}

.hm-slider-arrow.swiper-button-disabled{
	opacity: 0.4;
	cursor: default;
}

/* Aturan global memutihkan ikon pada slide aktif, kartu di sini butuh warna aslinya */
.hm-slider .swiper-slide.swiper-slide-active .post-meta i{
	color: var(--accent-color) !important;
}

.hm-slider .swiper-slide.swiper-slide-active .enc-card-meta i{
	color: var(--accent-secondary-color) !important;
}

.hm-slider .swiper-slide.swiper-slide-active .enc-card-download i{
	color: inherit !important;
}

/* ---------- Galeri sertifikat & kegiatan ---------- */
.hm-gallery{
	position: relative;
	padding: 100px 0 70px;
	background:
		radial-gradient(circle at 0% 0%, rgba(11, 92, 171, 0.05) 0%, rgba(11, 92, 171, 0) 42%),
		linear-gradient(180deg, var(--secondary-color) 0%, var(--white-color) 48%, var(--white-color) 100%);
	overflow: hidden;
}

.hm-gallery-tabs{
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 0;
	margin-left: auto;
	padding: 5px;
	border: 1px solid var(--divider-color);
	border-radius: 8px;
	background-color: var(--white-color);
	list-style: none;
}

.hm-gallery-tabs .nav-item{
	margin: 0;
}

.hm-gallery-tabs .nav-link{
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2em;
	color: var(--text-color);
	background-color: transparent;
	border: 0;
	border-radius: 6px;
	padding: 12px 18px;
	transition: all 0.3s ease-in-out;
}

.hm-gallery-tabs .nav-link i{
	font-size: 14px;
	color: var(--accent-color);
	transition: color 0.3s ease-in-out;
}

.hm-gallery-tabs .nav-link:hover{
	color: var(--primary-color);
	background-color: rgba(11, 92, 171, 0.06);
}

.hm-gallery-tabs .nav-link.active{
	background-color: var(--accent-color);
	color: var(--white-color);
	box-shadow: 0 8px 18px rgba(11, 92, 171, 0.22);
}

.hm-gallery-tabs .nav-link.active i{
	color: var(--white-color);
}

.hm-gallery-content{
	margin-top: 10px;
}

.hm-gallery-item{
	display: block;
	height: calc(100% - 30px);
	margin-bottom: 30px;
	background-color: var(--white-color);
	border: 1px solid var(--divider-color);
	border-left: 3px solid transparent;
	border-radius: 8px;
	overflow: hidden;
	transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.hm-gallery-item:hover{
	border-color: rgba(11, 92, 171, 0.28);
	border-left-color: var(--accent-color);
	box-shadow: 0 14px 30px rgba(32, 32, 32, 0.07);
	transform: translateY(-3px);
}

.hm-gallery-thumb{
	position: relative;
	overflow: hidden;
	background-color: var(--secondary-color);
}

.hm-gallery-thumb img{
	width: 100%;
	height: 220px;
	object-fit: cover;
	transition: transform 0.5s ease-in-out;
}

.hm-gallery-item:hover .hm-gallery-thumb img{
	transform: scale(1.05);
}

.hm-gallery-zoom{
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(180deg, rgba(15, 40, 70, 0.15) 0%, rgba(11, 92, 171, 0.62) 100%);
	color: var(--white-color);
	font-size: 18px;
	opacity: 0;
	transition: opacity 0.3s ease-in-out;
}

.hm-gallery-item:hover .hm-gallery-zoom{
	opacity: 1;
}

.hm-gallery-seal{
	position: absolute;
	top: 14px;
	right: 14px;
	width: 34px;
	height: 34px;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--white-color);
	color: var(--accent-color);
	font-size: 14px;
	box-shadow: 0 6px 14px rgba(32, 32, 32, 0.12);
	z-index: 1;
}

.hm-gallery-body{
	padding: 20px 22px 22px;
}

.hm-gallery-tag{
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--accent-color);
	background-color: rgba(11, 92, 171, 0.08);
	border-radius: 4px;
	padding: 6px 10px;
	margin-bottom: 12px;
}

.hm-gallery-tag-alt{
	color: var(--accent-secondary-color);
	background-color: rgba(23, 176, 167, 0.10);
}

.hm-gallery-body h3{
	font-size: 17px;
	font-weight: 600;
	line-height: 1.45em;
	color: var(--primary-color);
	margin-bottom: 8px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	transition: color 0.3s ease-in-out;
}

.hm-gallery-item:hover .hm-gallery-body h3{
	color: var(--accent-color);
}

.hm-gallery-meta{
	margin: 0;
	font-size: 13px;
	line-height: 1.5em;
	color: var(--text-color);
}

/* ---------- Testimoni: pelengkap kotak indeks kepuasan ---------- */
.our-testimonials{
	background-color: var(--white-color);
}

.our-testimonials .testimonial-slider{
	position: relative;
}

.our-testimonials .testimonial-item{
	min-height: 420px;
	border: 1px solid var(--divider-color);
	box-shadow: 0 10px 28px rgba(32, 32, 32, 0.04);
}

.our-testimonials .testimonial-pagination.swiper-pagination-bullets{
	position: static;
	text-align: left;
	margin-top: 28px;
}

.our-testimonials .testimonial-client-box{
	width: auto;
	max-width: 360px;
	left: 24px;
	right: auto;
	bottom: 24px;
	margin: 0;
	border: 1px solid var(--divider-color);
	border-radius: 8px;
	box-shadow: 0 12px 28px rgba(32, 32, 32, 0.12);
	padding: 14px 14px 14px 20px;
	text-decoration: none;
	transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.our-testimonials .testimonial-client-box:hover{
	transform: translateY(-2px);
	box-shadow: 0 16px 32px rgba(32, 32, 32, 0.16);
}

.testimonial-client-heading h3{
	font-size: 15px;
	font-weight: 700;
	color: var(--primary-color);
}

.testimonial-client-heading p{
	margin: 2px 0 0;
	font-size: 12px;
	color: var(--text-color);
}

.testimonial-client-score{
	display: flex;
	align-items: baseline;
	gap: 2px;
	background-color: rgba(11, 92, 171, 0.08);
	border-radius: 6px;
	padding: 10px 14px;
}

.testimonial-client-score span{
	font-size: 22px;
	font-weight: 700;
	line-height: 1;
	color: var(--accent-color);
	font-variant-numeric: tabular-nums;
}

.testimonial-client-score small{
	font-size: 12px;
	font-weight: 600;
	color: var(--text-color);
}

.our-testimonials .testimonial-item-content p{
	font-size: 18px;
	line-height: 1.7em;
}

/* ---------- Mitra & pelanggan ---------- */
.hm-clients{
	padding: 10px 0 100px;
}

.hm-clients-inner{
	position: relative;
	background:
		radial-gradient(circle at 100% 0%, rgba(23, 176, 167, 0.10) 0%, rgba(23, 176, 167, 0) 40%),
		radial-gradient(circle at 0% 100%, rgba(11, 92, 171, 0.08) 0%, rgba(11, 92, 171, 0) 42%),
		var(--secondary-color);
	border: 1px solid var(--divider-color);
	border-radius: 14px;
	padding: 55px 50px;
	overflow: hidden;
}

.hm-clients-head{
	max-width: 760px;
	margin: 0 auto 40px;
	text-align: center;
}

.hm-clients-kicker{
	display: inline-block;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--accent-secondary-color);
	margin-bottom: 14px;
}

.hm-clients-head h2{
	font-size: 32px;
	font-weight: 600;
	line-height: 1.3em;
	color: var(--primary-color);
	margin-bottom: 12px;
}

.hm-clients-head p{
	margin: 0;
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
}

.hm-clients-slider .swiper{
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
}

.hm-clients-slider .swiper-wrapper{
	align-items: center;
	transition-timing-function: linear;
}

.hm-client-logo{
	display: flex;
	align-items: center;
	justify-content: center;
	height: 86px;
	padding: 0 18px;
	background-color: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 8px;
	transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.hm-client-logo:hover{
	border-color: rgba(11, 92, 171, 0.3);
	box-shadow: 0 10px 22px rgba(32, 32, 32, 0.06);
}

/* Logo mitra berwarna terang, dijadikan monokrom gelap agar terbaca di kartu putih */
.hm-client-logo img{
	width: auto;
	height: auto;
	max-width: 130px;
	max-height: 42px;
	filter: brightness(0);
	opacity: 0.42;
	transition: opacity 0.3s ease-in-out;
}

.hm-client-logo:hover img{
	opacity: 0.85;
}

.hm-clients-foot{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 16px 24px;
	margin-top: 42px;
}

.hm-clients-link{
	font-size: 15px;
	font-weight: 600;
	color: var(--accent-color);
	border-bottom: 1px solid rgba(11, 92, 171, 0.35);
	transition: all 0.3s ease-in-out;
}

.hm-clients-link:hover{
	color: var(--accent-secondary-color);
	border-bottom-color: var(--accent-secondary-color);
}

/* ---------- Ringkasan kontak ---------- */
.hm-contact{
	padding: 20px 0 100px;
}

.hm-contact-inner{
	background: var(--primary-color);
	border-radius: 16px;
	padding: 60px;
}

.hm-contact-head{
	max-width: 760px;
	margin: 0 auto 45px;
	text-align: center;
}

.hm-contact-kicker{
	display: inline-block;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--accent-secondary-color);
	margin-bottom: 14px;
}

.hm-contact-head h2{
	font-size: 32px;
	font-weight: 600;
	line-height: 1.3em;
	color: var(--white-color);
	margin-bottom: 12px;
}

.hm-contact-head p{
	color: rgba(255, 255, 255, 0.7);
	margin: 0;
}

.hm-contact-grid{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

.hm-contact-item{
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 12px;
	padding: 26px 24px;
	transition: border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

.hm-contact-item:hover{
	background: rgba(255, 255, 255, 0.07);
	border-color: rgba(23, 176, 167, 0.4);
}

.hm-contact-icon{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 8px;
	background: rgba(23, 176, 167, 0.14);
	color: var(--accent-secondary-color);
	font-size: 17px;
	margin-bottom: 18px;
}

.hm-contact-item h3{
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--white-color);
	margin-bottom: 10px;
}

.hm-contact-item p{
	font-size: 14px;
	line-height: 1.7em;
	color: rgba(255, 255, 255, 0.7);
	margin: 0;
}

.hm-contact-item a{
	color: rgba(255, 255, 255, 0.85);
	transition: color 0.3s ease-in-out;
}

.hm-contact-item a:hover{
	color: var(--accent-secondary-color);
}

.hm-contact-foot{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 18px 30px;
	margin-top: 45px;
}

.hm-contact-link{
	font-size: 15px;
	font-weight: 600;
	color: var(--white-color);
	border-bottom: 1px solid rgba(255, 255, 255, 0.35);
	transition: all 0.3s ease-in-out;
}

.hm-contact-link:hover{
	color: var(--accent-secondary-color);
	border-bottom-color: var(--accent-secondary-color);
}

/* ---------- Penyesuaian kecil section beranda ---------- */
.our-services .service-item:hover .icon-box img{
	filter: none;
	transform: scale(1.03);
}

.why-we-stand-item-content-metal h3 a{
	color: inherit;
}

.benefit-item-body-metal ul li a,
.benefit-footer-list-metal ul li a{
	color: inherit;
}

/* ---------- Responsive ---------- */
@media only screen and (max-width: 991px){
	.hm-encyclopedia{ padding: 60px 0 40px; }
	.our-services .about-us-btn,
	.our-blog .about-us-btn,
	.hm-encyclopedia .about-us-btn{ text-align: left !important; }
	.hm-slider-nav{ justify-content: flex-start; margin-top: 20px; }
	.hm-slider-arrow{ width: 44px; height: 44px; font-size: 14px; }
	.hm-gallery{ padding: 70px 0 40px; }
	.hm-gallery-tabs{ justify-content: flex-start; margin: 25px 0 0; width: 100%; }
	.our-testimonials .testimonial-item{ min-height: 0; padding: 40px 30px; }
	.our-testimonials .testimonial-client-box{ left: 16px; right: 16px; max-width: none; }
	.hm-clients{ padding: 10px 0 60px; }
	.hm-clients-inner{ padding: 40px 30px; }
	.hm-clients-head{ margin-bottom: 30px; }
	.hm-clients-head h2{ font-size: 26px; }
	.hm-clients-foot{ margin-top: 35px; }
	.hm-contact{ padding: 10px 0 60px; }
	.hm-contact-inner{ padding: 40px 30px; }
	.hm-contact-head{ margin-bottom: 35px; }
	.hm-contact-head h2{ font-size: 26px; }
	.hm-contact-grid{ grid-template-columns: repeat(2, 1fr); }
}

@media only screen and (max-width: 575px){
	.hm-contact-grid{ grid-template-columns: 1fr; }
	.hm-contact-inner{ padding: 32px 22px; }
	.hm-gallery-tabs{ display: flex; flex-direction: column; width: 100%; }
	.hm-gallery-tabs .nav-item{ width: 100%; }
	.hm-gallery-tabs .nav-link{ width: 100%; justify-content: center; }
	.hm-gallery-thumb img{ height: 200px; }
	.hm-clients-inner{ padding: 32px 20px; }
	.hm-clients-foot .btn-default{ width: 100%; justify-content: center; }
	.hm-hero-actions .btn-default,
	.hm-hero-actions .hm-btn-ghost{ width: 100%; }
	.hm-contact-foot .btn-default{ width: 100%; }
}

/************************************/
/***     Berita Detail Page css   ***/
/************************************/

.bd-section{
	padding: 100px 0 110px;
	background:
		radial-gradient(circle at 100% 0%, rgba(11, 92, 171, 0.04) 0%, rgba(11, 92, 171, 0) 40%),
		var(--white-color);
}

.bd-article{
	padding-right: 20px;
}

.bd-article-kicker{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--text-color);
	margin-bottom: 18px;
}

.bd-article-kicker a{
	color: var(--accent-color);
}

.bd-article-kicker a:hover{
	color: var(--accent-secondary-color);
}

.bd-article-kicker span{
	color: var(--divider-color);
}

.bd-article-meta{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 22px;
	list-style: none;
	padding: 0;
	margin: 0 0 22px;
}

.bd-article-meta li{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: var(--text-color);
}

.bd-article-meta li i{
	color: var(--accent-color);
}

.bd-article-title{
	font-size: 36px;
	font-weight: 700;
	line-height: 1.3em;
	color: var(--primary-color);
	margin-bottom: 28px;
}

.bd-article-image{
	margin-bottom: 34px;
}

.bd-article-image figure{
	display: block;
	border-radius: 10px;
	overflow: hidden;
}

.bd-article-image img{
	width: 100%;
	/* Atribut height dari WordPress (mis. 682) mengalahkan aspect-ratio. */
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 10px;
}

.bd-article-body{
	border-bottom: 0;
	padding-bottom: 0;
	margin-bottom: 0;
}

.bd-article-body p{
	font-size: 16px;
	line-height: 1.85em;
}

.bd-article-footer{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	border-top: 1px solid var(--divider-color);
	border-bottom: 1px solid var(--divider-color);
	padding: 24px 0;
	margin-top: 40px;
}

.bd-article-tags,
.bd-article-share{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.bd-article-tags span,
.bd-article-share span{
	font-size: 15px;
	font-weight: 600;
	color: var(--primary-color);
	margin-right: 4px;
}

.bd-article-tags a{
	display: inline-flex;
	align-items: center;
	font-size: 13px;
	font-weight: 600;
	color: var(--accent-color);
	background-color: rgba(11, 92, 171, 0.08);
	border-radius: 6px;
	padding: 8px 12px;
	transition: all 0.3s ease-in-out;
}

.bd-article-tags a:hover{
	background-color: var(--accent-color);
	color: var(--white-color);
}

.bd-article-share a{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 6px;
	background-color: var(--secondary-color);
	border: 1px solid var(--divider-color);
	color: var(--primary-color);
	transition: all 0.3s ease-in-out;
}

.bd-article-share a:hover{
	background-color: var(--accent-color);
	border-color: var(--accent-color);
	color: var(--white-color);
}

.bd-article-nav{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	margin-top: 34px;
}

.bd-back-link{
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
	font-weight: 600;
	color: var(--primary-color);
	transition: color 0.3s ease-in-out;
}

.bd-back-link:hover{
	color: var(--accent-color);
}

.bd-sidebar{
	position: sticky;
	top: 110px;
}

.bd-widget{
	background-color: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 10px;
	padding: 28px;
	margin-bottom: 24px;
}

.bd-widget-title{
	position: relative;
	font-size: 18px;
	font-weight: 700;
	color: var(--primary-color);
	margin-bottom: 22px;
	padding-bottom: 14px;
}

.bd-widget-title::after{
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 42px;
	height: 3px;
	border-radius: 30px;
	background-color: var(--accent-color);
}

.bd-search{
	display: flex;
	align-items: center;
	gap: 0;
	border: 1px solid var(--divider-color);
	border-radius: 8px;
	overflow: hidden;
	background-color: var(--secondary-color);
}

.bd-search input{
	flex: 1;
	border: 0;
	outline: 0;
	background: transparent;
	padding: 14px 16px;
	font-size: 14px;
	color: var(--primary-color);
}

.bd-search button{
	border: 0;
	background-color: var(--accent-color);
	color: var(--white-color);
	width: 50px;
	height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.3s ease-in-out;
}

.bd-search button:hover{
	background-color: #084A86;
}

.bd-related-list{
	list-style: none;
	padding: 0;
	margin: 0;
}

.bd-related-list li{
	border-bottom: 1px solid var(--divider-color);
	padding-bottom: 16px;
	margin-bottom: 16px;
}

.bd-related-list li:last-child{
	border-bottom: 0;
	padding-bottom: 0;
	margin-bottom: 0;
}

.bd-related-list a{
	display: block;
}

.bd-related-date{
	display: block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--accent-secondary-color);
	margin-bottom: 6px;
}

.bd-related-list h4{
	font-size: 15px;
	font-weight: 600;
	line-height: 1.5em;
	color: var(--primary-color);
	margin: 0;
	transition: color 0.3s ease-in-out;
}

.bd-related-list a:hover h4{
	color: var(--accent-color);
}

.bd-category-list{
	list-style: none;
	padding: 0;
	margin: 0;
}

.bd-category-list li{
	border-bottom: 1px solid var(--divider-color);
}

.bd-category-list li:last-child{
	border-bottom: 0;
}

.bd-category-list a{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 0;
	font-size: 14px;
	font-weight: 500;
	color: var(--text-color);
	transition: color 0.3s ease-in-out;
}

.bd-category-list a span{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	height: 28px;
	padding: 0 8px;
	border-radius: 6px;
	background-color: rgba(11, 92, 171, 0.08);
	color: var(--accent-color);
	font-size: 12px;
	font-weight: 700;
}

.bd-category-list a:hover{
	color: var(--accent-color);
}

.bd-widget-cta{
	background: var(--primary-color);
	border-color: var(--primary-color);
	color: rgba(255, 255, 255, 0.78);
}

.bd-widget-kicker{
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--accent-secondary-color);
	margin-bottom: 12px;
}

.bd-widget-cta h3{
	font-size: 22px;
	font-weight: 700;
	line-height: 1.35em;
	color: var(--white-color);
	margin-bottom: 12px;
}

.bd-widget-cta p{
	font-size: 14px;
	line-height: 1.7em;
	color: rgba(255, 255, 255, 0.72);
	margin-bottom: 22px;
}

.bd-widget-cta .btn-default{
	width: 100%;
	justify-content: center;
}

@media only screen and (max-width: 991px){
	.bd-section{ padding: 70px 0 80px; }
	.bd-article{ padding-right: 0; margin-bottom: 40px; }
	.bd-article-title{ font-size: 28px; }
	.bd-sidebar{ position: static; }
}

@media only screen and (max-width: 575px){
	.bd-article-title{ font-size: 24px; }
	.bd-article-footer{ flex-direction: column; align-items: flex-start; }
	.bd-article-nav{ flex-direction: column; align-items: stretch; }
	.bd-article-nav .btn-default{ width: 100%; justify-content: center; }
	.bd-widget{ padding: 22px; }
}

/************************************/
/***  Legal Template Page css     ***/
/************************************/

.lp-section{
	padding: 90px 0 100px;
	background:
		radial-gradient(circle at 100% 0%, rgba(11, 92, 171, 0.04) 0%, rgba(11, 92, 171, 0) 40%),
		var(--white-color);
}

.lp-sidebar{
	position: sticky;
	top: 110px;
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 12px;
	padding: 24px;
	margin-bottom: 30px;
	box-shadow: 0 12px 30px rgba(32, 32, 32, 0.04);
}

.lp-sidebar-title{
	font-size: 16px;
	font-weight: 700;
	color: var(--primary-color);
	margin-bottom: 18px;
}

.lp-nav{
	list-style: none;
	padding: 0;
	margin: 0 0 22px;
}

.lp-nav li{
	margin-bottom: 10px;
}

.lp-nav li:last-child{
	margin-bottom: 0;
}

.lp-nav a{
	display: block;
	border: 1px solid var(--divider-color);
	border-left: 3px solid transparent;
	border-radius: 8px;
	padding: 14px 16px;
	background: var(--secondary-color);
	transition: all 0.3s ease-in-out;
}

.lp-nav a:hover{
	border-color: rgba(11, 92, 171, 0.25);
	border-left-color: var(--accent-color);
}

.lp-nav li.active a{
	background: rgba(11, 92, 171, 0.06);
	border-color: rgba(11, 92, 171, 0.22);
	border-left-color: var(--accent-color);
}

.lp-nav-label{
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--accent-secondary-color);
	margin-bottom: 4px;
}

.lp-nav a strong{
	display: block;
	font-size: 15px;
	font-weight: 700;
	color: var(--primary-color);
}

.lp-sidebar-note{
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding-top: 18px;
	border-top: 1px solid var(--divider-color);
}

.lp-sidebar-note i{
	color: var(--accent-color);
	margin-top: 3px;
}

.lp-sidebar-note p{
	margin: 0;
	font-size: 13px;
	line-height: 1.7em;
	color: var(--text-color);
}

.lp-sidebar-note a{
	color: var(--accent-color);
	font-weight: 600;
}

.lp-content{
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 12px;
	padding: 40px 42px;
	box-shadow: 0 14px 34px rgba(32, 32, 32, 0.04);
}

.lp-kicker{
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--accent-color);
	margin-bottom: 12px;
}

.lp-title{
	font-size: 32px;
	font-weight: 700;
	line-height: 1.3em;
	color: var(--primary-color);
	margin-bottom: 12px;
}

.lp-lead{
	font-size: 16px;
	line-height: 1.75em;
	color: var(--text-color);
	margin-bottom: 22px;
	max-width: 720px;
}

.lp-meta{
	display: flex;
	flex-wrap: wrap;
	gap: 10px 20px;
	padding: 14px 0 24px;
	margin-bottom: 10px;
	border-bottom: 1px solid var(--divider-color);
}

.lp-meta span{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 500;
	color: var(--text-color);
}

.lp-meta span i{
	color: var(--accent-color);
}

.lp-block{
	padding: 26px 0;
	border-bottom: 1px solid var(--divider-color);
}

.lp-block:last-child{
	border-bottom: 0;
	padding-bottom: 0;
}

.lp-block h3{
	font-size: 20px;
	font-weight: 700;
	color: var(--primary-color);
	margin-bottom: 12px;
}

.lp-block p,
.lp-block li{
	font-size: 15px;
	line-height: 1.8em;
	color: var(--text-color);
}

.lp-block p{
	margin-bottom: 14px;
}

.lp-block p:last-child{
	margin-bottom: 0;
}

.lp-block ul{
	margin: 0 0 8px;
	padding-left: 20px;
}

.lp-block li{
	margin-bottom: 8px;
}

.lp-block li:last-child{
	margin-bottom: 0;
}

.lp-block a{
	color: var(--accent-color);
	font-weight: 600;
}

.lp-block a:hover{
	color: var(--accent-secondary-color);
}

.lp-footer{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 34px;
	padding-top: 24px;
	border-top: 1px solid var(--divider-color);
}

.lp-back-link{
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
	font-weight: 600;
	color: var(--primary-color);
	transition: color 0.3s ease-in-out;
}

.lp-back-link:hover{
	color: var(--accent-color);
}

@media only screen and (max-width: 991px){
	.lp-section{ padding: 60px 0 70px; }
	.lp-sidebar{ position: static; }
	.lp-content{ padding: 30px 26px; }
	.lp-title{ font-size: 26px; }
}

@media only screen and (max-width: 575px){
	.lp-content{ padding: 24px 18px; }
	.lp-title{ font-size: 22px; }
	.lp-block h3{ font-size: 18px; }
	.lp-footer{ flex-direction: column; align-items: stretch; }
	.lp-footer .btn-default{ width: 100%; justify-content: center; }
	.lp-nav{ display: flex; gap: 10px; overflow-x: auto; }
	.lp-nav li{ margin: 0; min-width: 220px; }
}

/************************************/
/*** Tarif Peraturan Form Layanan ***/
/************************************/

.tf-doc-list{
	margin-top: 16px;
}

.ip-doc-list li a:not(.doc-action) span em{
	font-style: normal;
	font-weight: 500;
	color: var(--accent-secondary-color);
}

.tf-footer{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 40px;
	padding-top: 24px;
	border-top: 1px solid var(--divider-color);
}

@media only screen and (max-width: 575px){
	.tf-footer{ flex-direction: column; align-items: stretch; }
	.tf-footer .btn-default{ width: 100%; justify-content: center; }
}

/************************************/
/***   Layanan Detail Template    ***/
/************************************/

.sv-section{
	padding: 90px 0 100px;
	background:
		radial-gradient(circle at 0% 0%, rgba(11, 92, 171, 0.04) 0%, rgba(11, 92, 171, 0) 40%),
		var(--white-color);
}

.page-category-list ul li a.active{
	color: var(--accent-color);
	font-weight: 600;
}

.sv-content{
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 12px;
	padding: 38px 40px;
	box-shadow: 0 14px 34px rgba(32, 32, 32, 0.04);
}

.sv-kicker{
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--accent-color);
	background: rgba(11, 92, 171, 0.08);
	padding: 6px 14px;
	border-radius: 6px;
	margin-bottom: 14px;
}

.sv-title{
	font-size: 32px;
	font-weight: 700;
	line-height: 1.3em;
	color: var(--primary-color);
	margin-bottom: 8px;
}

.sv-category-label{
	font-size: 14px;
	font-weight: 600;
	color: var(--accent-secondary-color);
	margin-bottom: 16px;
}

.sv-lead{
	font-size: 16px;
	line-height: 1.8em;
	color: var(--text-color);
	margin-bottom: 18px;
}

.sv-entry{
	margin-bottom: 10px;
}

.sv-entry p{
	font-size: 15px;
	line-height: 1.85em;
}

.sv-block{
	margin-top: 36px;
	padding-top: 28px;
	border-top: 1px solid var(--divider-color);
}

.sv-block-title{
	font-size: 22px;
	font-weight: 700;
	color: var(--primary-color);
	margin-bottom: 20px;
}

.sv-table-wrap{
	overflow-x: auto;
	border: 1px solid var(--divider-color);
	border-radius: 10px;
}

.sv-table{
	width: 100%;
	min-width: 640px;
	border-collapse: collapse;
	margin: 0;
}

.sv-table th,
.sv-table td{
	padding: 14px 16px;
	text-align: left;
	font-size: 14px;
	line-height: 1.55em;
	border-bottom: 1px solid var(--divider-color);
	vertical-align: top;
}

.sv-table thead th{
	background: var(--primary-color);
	color: var(--white-color);
	font-weight: 700;
	border-bottom: 0;
}

.sv-table tbody tr:nth-child(even){
	background: var(--secondary-color);
}

.sv-table tbody tr:last-child td{
	border-bottom: 1px solid var(--divider-color);
}

.sv-table tfoot td{
	background: rgba(11, 92, 171, 0.06);
	border-bottom: 0;
	color: var(--primary-color);
}

.sv-notes{
	margin-top: 20px;
	padding: 18px 20px;
	background: var(--secondary-color);
	border: 1px solid var(--divider-color);
	border-radius: 10px;
}

.sv-notes h4{
	font-size: 15px;
	font-weight: 700;
	color: var(--primary-color);
	margin-bottom: 10px;
}

.sv-notes ul{
	margin: 0;
	padding-left: 18px;
}

.sv-notes li{
	font-size: 14px;
	line-height: 1.7em;
	color: var(--text-color);
	margin-bottom: 6px;
}

.sv-notes li:last-child{
	margin-bottom: 0;
}

.sv-process-image{
	margin-bottom: 24px;
	border: 1px solid var(--divider-color);
	border-radius: 10px;
	overflow: hidden;
	background: var(--secondary-color);
}

.sv-process-image figure{
	margin: 0;
}

.sv-process-image img{
	display: block;
	width: 100%;
	height: auto;
}

.sv-process-list{
	list-style: none;
	counter-reset: sv-step;
	margin: 0;
	padding: 0;
}

.sv-process-list li{
	position: relative;
	counter-increment: sv-step;
	display: flex;
	gap: 16px;
	padding: 16px 0 16px 0;
	border-bottom: 1px solid var(--divider-color);
}

.sv-process-list li:last-child{
	border-bottom: 0;
	padding-bottom: 0;
}

.sv-process-list li::before{
	content: counter(sv-step);
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	border-radius: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(11, 92, 171, 0.08);
	color: var(--accent-color);
	font-size: 14px;
	font-weight: 700;
	margin-top: 2px;
}

.sv-process-text{
	font-size: 15px;
	line-height: 1.75em;
	color: var(--text-color);
}

.sv-footer{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	margin-top: 36px;
	padding-top: 24px;
	border-top: 1px solid var(--divider-color);
}

.sv-link{
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
	font-weight: 600;
	color: var(--accent-color);
}

.sv-link:hover{
	color: var(--accent-secondary-color);
}

.sv-footer-actions{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

@media only screen and (max-width: 991px){
	.sv-section{ padding: 60px 0 70px; }
	.sv-content{ padding: 28px 24px; }
	.sv-title{ font-size: 26px; }
	.page-single-sidebar{ margin-right: 0; margin-bottom: 30px; }
}

@media only screen and (max-width: 575px){
	.sv-content{ padding: 22px 18px; }
	.sv-title{ font-size: 22px; }
	.sv-block-title{ font-size: 18px; }
	.sv-footer{ flex-direction: column; align-items: stretch; }
	.sv-footer-actions{ flex-direction: column; }
	.sv-footer-actions .btn-default,
	.sv-footer-actions .hm-btn-ghost{ width: 100%; justify-content: center; }
}

/************************************/
/*** Mobile / Tablet Page Safety  ***/
/************************************/

@media only screen and (max-width: 1199px){
	.our-services-button-prev,
	.hm-slider-prev{ left: 0; }
	.our-services-button-next,
	.hm-slider-next{ right: 0; }
}

@media only screen and (max-width: 991px){
	.page-header{
		margin-bottom: 10px;
	}

	.page-single-sidebar,
	.profil-sidebar,
	.lp-sidebar,
	.bd-sidebar{
		position: static;
		top: auto;
		margin-right: 0;
	}

	.profil-content,
	.lp-content,
	.sv-content,
	.bd-article{
		max-width: 100%;
	}

	.our-services-slider,
	.hm-slider,
	.hm-post-slider,
	.hm-enc-slider{
		padding: 0 8px;
	}
}

@media only screen and (max-width: 767px){
	.container,
	.container-fluid{
		max-width: 100%;
	}

	/* SplitText (text-anime) sering meninggalkan overflow horizontal di ponsel */
	.page-header-box h1,
	.page-header-box .page-header-title,
	.page-header-box h1.div,
	.page-header-box .page-header-title.div,
	.page-header-box h1 .line,
	.page-header-box .page-header-title .line,
	.page-header-box h1 .word,
	.page-header-box .page-header-title .word,
	.page-header-box h1 .char,
	.page-header-box .page-header-title .char{
		max-width: 100%;
		white-space: normal !important;
	}

	.page-header-box h1,
	.page-header-box .page-header-title,
	.sv-title,
	.lp-title,
	.bd-article-title,
	.profil-content-title{
		display: block;
		width: 100%;
		max-width: 100%;
		white-space: normal !important;
		overflow: visible !important;
		text-overflow: clip;
		overflow-wrap: anywhere;
		word-break: break-word;
	}

	.page-header ol li.breadcrumb-item a,
	.page-header ol li.breadcrumb-item.active{
		overflow-wrap: anywhere;
		white-space: inherit;
	}

	/* Hindari elemen absolut keluar viewport di ponsel */
	.our-services-arrow,
	.hm-slider-arrow{
		width: 40px;
		height: 40px;
		font-size: 13px;
	}

	.sf-stage,
	.hm-gallery,
	.hm-clients,
	.hm-encyclopedia,
	.our-blog,
	.profil-section,
	.lp-section,
	.bd-section,
	.sv-section,
	.page-service-single,
	.page-faqs{
		overflow-x: clip;
	}

	.ip-doc-list li a:not(.doc-action),
	.enc-card,
	.post-item,
	.hm-gallery-item{
		max-width: 100%;
	}

	.sv-table-wrap,
	.ip-table-wrap,
	.faq-table-wrap{
		-webkit-overflow-scrolling: touch;
	}
}

@media only screen and (max-width: 575px){
	.page-header{
		padding-top: 100px;
		padding-bottom: 28px;
	}

	.page-header-box h1,
	.page-header-box .page-header-title{
		font-size: 22px;
	}

	/* Tetap wrap (bukan nowrap+scroll) agar tidak melebarkan layout */
	.page-header nav{
		position: relative !important;
		inset: auto !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		overflow: visible !important;
	}

	.page-header ol.breadcrumb{
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: wrap !important;
		justify-content: flex-start !important;
		align-items: flex-start !important;
		gap: 6px;
		width: 100% !important;
		max-width: 100% !important;
		filter: none;
	}

	.page-header ol li.breadcrumb-item,
	.page-header ol li.breadcrumb-item:first-child{
		clip-path: none !important;
		border-radius: 6px;
		padding: 7px 10px;
		font-size: 11px;
		line-height: 1.35em;
		display: inline-flex !important;
		flex: 0 1 auto !important;
		width: auto !important;
		max-width: 100% !important;
		box-sizing: border-box;
		white-space: normal !important;
		overflow-wrap: anywhere;
		word-break: break-word;
	}

	.container,
	.container-fluid{
		max-width: 100%;
		overflow-x: clip;
	}

	.row{
		margin-left: 0;
		margin-right: 0;
		max-width: 100%;
	}

	.row > [class*="col-"]{
		min-width: 0 !important;
		max-width: 100%;
		padding-left: 12px;
		padding-right: 12px;
	}

	.profil-sidebar,
	.profil-content,
	.lp-sidebar,
	.lp-content,
	.sv-content,
	.page-category-list,
	.page-single-sidebar,
	.bd-article{
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		box-sizing: border-box;
	}

	/* Sidebar nav: scroll di dalam kartu, tidak melebarkan halaman */
	.profil-sidebar,
	.lp-sidebar{
		overflow: hidden;
	}

	.profil-nav,
	.lp-nav{
		display: flex;
		width: 100%;
		max-width: 100%;
		min-width: 0;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
	}

	.profil-nav li,
	.lp-nav li{
		flex: 0 0 auto;
	}

	.profil-content-title,
	.profil-content-lead,
	.sv-title,
	.sv-lead,
	.lp-title,
	.lp-lead,
	.bd-article-title,
	.ip-update,
	.ip-intro,
	.ip-doc-list li a:not(.doc-action) span{
		max-width: 100%;
		overflow-wrap: anywhere;
		word-break: break-word;
		white-space: normal;
	}
}

/************************************/
/***  Beranda — Layanan Kami Grid  ***/
/************************************/

/* Kartu full-bleed 4 kolom untuk section "Layanan Kami" di index.php.
   Komponen baru, terpisah dari .service-item (§06) yang masih dipakai
   pembaruan.php — jangan digabung.
   Desktop (≥992px) 4 kolom sejajar tanpa jarak; di bawah itu Swiper aktif
   dan kartunya jadi geser horizontal. Init: js/function.js */

.layanan-grid{
	--layanan-card-min	: 500px;
	--layanan-pad		: 36px;
	--layanan-ease		: cubic-bezier(0.22, 0.61, 0.36, 1);

	position: relative;
	width: 100%;
	margin-top: 20px;
}

/* Swiper memakai flex; height auto menyamakan tinggi seluruh kartu. */
.layanan-grid .swiper-slide{
	height: auto;
	display: flex;
}

.layanan-card{
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	width: 100%;
	min-height: var(--layanan-card-min);
	padding: var(--layanan-pad);
	overflow: hidden;
	background-color: var(--primary-color);
}

/* Garis rambut pemisah — kartunya menempel tanpa gutter, tanpa ini
   batas antar kartu hilang saat dua foto kebetulan mirip warnanya. */
.layanan-grid .swiper-slide + .swiper-slide .layanan-card{
	border-left: 1px solid var(--dark-divider-color);
}

/* Panah geser di tepi kiri-kanan kartu, di area foto (teks kartu ada di bawah,
   jadi tidak di tengah supaya judul tidak tertutup). Sebelumnya di samping
   judul section, sehingga tidak terlihat saat pengunjung sedang melihat kartu
   (masukan klien). Di atas lapisan teks kartu (z 2). */
.layanan-grid .hm-slider-arrow{
	position: absolute;
	top: 30%;
	transform: translateY(-50%);
	z-index: 5;
	border-color: transparent;
	box-shadow: 0 6px 20px rgba(32, 32, 32, 0.3);
}

.layanan-grid .layanan-button-prev{ left: 20px; }
.layanan-grid .layanan-button-next{ right: 20px; }

/* Semua kartu sudah terlihat (Swiper mengunci slider): panah tidak berguna. */
.layanan-grid .hm-slider-arrow.swiper-button-lock{
	display: none;
}

@media only screen and (max-width: 767px){
	.layanan-grid .layanan-button-prev{ left: 10px; }
	.layanan-grid .layanan-button-next{ right: 10px; }
}

/* --- Lapisan: foto (0) < overlay (1) < teks (2) --- */
.layanan-card-media{
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform 0.7s var(--layanan-ease);
}

/* Gradien pekat di bawah tempat teks duduk. Foto apa pun yang dipasang,
   teks putih tetap terbaca — tidak bergantung pada terang/gelapnya gambar. */
.layanan-card::before{
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, #20202040 0%, #2020209E 46%, #202020F0 100%);
	transition: opacity 0.4s var(--layanan-ease);
}

.layanan-card-body{
	position: relative;
	z-index: 2;
}

.layanan-card-title{
	font-size: 18px;
	line-height: 1.35em;
	font-weight: 600;
	color: var(--white-color);
	margin: 0;
}

.layanan-card-title a{
	color: inherit;
	transition: color 0.3s var(--layanan-ease);
}

.layanan-card-title a:hover,
.layanan-card-title a:focus{
	color: var(--accent-secondary-color);
}

.layanan-card-text{
	font-size: 15px;
	line-height: 1.65em;
	color: #FFFFFFD1;
	margin: 14px 0 0;
}

.layanan-card-btn{
	display: inline-block;
	align-self: flex-start;
	margin-top: 26px;
	padding: 12px 24px;
	border-radius: 8px;
	background: var(--accent-color);
	color: var(--white-color);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2em;
	transition: background-color 0.3s var(--layanan-ease), transform 0.3s var(--layanan-ease);
}

.layanan-card-btn:hover,
.layanan-card-btn:focus{
	background: var(--accent-secondary-color);
	color: var(--white-color);
	transform: translateY(-2px);
}

/* Hover kartu: foto membesar pelan, overlay sedikit menipis. Hanya transform
   dan opacity — tidak ada properti layout yang dianimasikan. */
.layanan-card:hover .layanan-card-media{
	transform: scale(1.06);
}

.layanan-card:hover::before{
	opacity: 0.88;
}

@media (prefers-reduced-motion: reduce){
	.layanan-card-media,
	.layanan-card::before,
	.layanan-card-btn,
	.layanan-card-title a{
		transition: none;
	}

	.layanan-card:hover .layanan-card-media{
		transform: none;
	}
}

/************************************/
/***    Beranda — Akses Cepat     ***/
/************************************/

/* Enam pintu masuk dalam satu blok, menggantikan beberapa section yang
   dipangkas. Baris atas empat kartu, baris bawah dua kartu lebar — salah
   satunya "Informasi Layanan Jasa" yang sebelumnya berdiri sendiri sebagai
   .announcement-banner selebar layar.

   Latar section putih polos: kartunya kini bergradien semua, kalau latarnya
   ikut berwarna blok ini jadi terlalu ramai. */

.akses-cepat{
	--ac-ease	: cubic-bezier(0.22, 0.61, 0.36, 1);
	--ac-gap	: 24px;

	padding: 80px 0;
	background: var(--bg-color);
}

/* Rata kiri, bukan tengah: section Layanan Kami tepat di atasnya sudah
   memakai judul rata tengah — dua judul tengah beruntun bikin halaman
   terasa seragam. Lebarnya dibatasi supaya baris judul tidak terlalu panjang. */
.akses-cepat-head{
	max-width: 720px;
	margin-bottom: 50px;
}

.akses-cepat-grid{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--ac-gap);
}

/* Dua kartu baris bawah melebar dua kolom. */
.akses-cepat-item-wide{
	grid-column: span 2;
}

.akses-cepat-item{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 28px 26px 26px;
	border-radius: 12px;
	background-image: linear-gradient(135deg, var(--ac-from) 0%, var(--ac-to) 100%);
	background-size: 170% 170%;
	background-position: 0% 50%;
	box-shadow: 0 10px 26px #0B5CAB2E;
	transition: background-position 0.6s var(--ac-ease), transform 0.3s var(--ac-ease), box-shadow 0.3s var(--ac-ease);
}

/* --- Ramp warna: enam langkah dari biru aksen menuju teal aksen ----------
   Semua nilai diturunkan dari --accent-color #0B5CAB dan
   --accent-secondary-color #17B0A7, digelapkan secukupnya supaya teks putih
   tetap lolos WCAG AA (min 4.5:1). Teal aslinya cuma 2.7:1 di atas putih —
   dipakai apa adanya, label putihnya tidak terbaca. Rasio tiap stop
   paling terang dicatat di bawah. */

.akses-cepat-item-1{ --ac-from: #06355F; --ac-to: #0B5CAB; }	/* biru tua   · 6.7:1 */
.akses-cepat-item-2{ --ac-from: #0A4F92; --ac-to: #0C6898; }	/* biru       · 6.1:1 */
.akses-cepat-item-3{ --ac-from: #0A5C86; --ac-to: #0E7185; }	/* biru-sian  · 5.7:1 */
.akses-cepat-item-4{ --ac-from: #0C6B72; --ac-to: #0F7A73; }	/* teal       · 5.2:1 */
.akses-cepat-item-5{ --ac-from: #084571; --ac-to: #0D6E80; }	/* biru-teal  · 5.9:1 */
.akses-cepat-item-6{ --ac-from: #0B5CAB; --ac-to: #0F7A73; }	/* sapuan penuh · 5.2:1 */

.akses-cepat-icon{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	margin-bottom: 20px;
	border-radius: 50%;
	background: #FFFFFF2E;
	color: var(--white-color);
	font-size: 19px;
	transition: background-color 0.3s var(--ac-ease);
}

.akses-cepat-label{
	font-size: 17px;
	font-weight: 600;
	line-height: 1.35em;
	color: var(--white-color);
}

.akses-cepat-desc{
	font-size: 13.5px;
	line-height: 1.55em;
	color: #FFFFFFD1;
	margin-top: 8px;
}

/* Gradien bergeser saat hover — meniru gerak .announcement-banner supaya
   satu bahasa dengan komponen lain di halaman ini. */
.akses-cepat-item:hover{
	background-position: 100% 50%;
	transform: translateY(-4px);
	box-shadow: 0 16px 34px #0B5CAB47;
}

.akses-cepat-item:hover .akses-cepat-icon{
	background: #FFFFFF4D;
}

@media (prefers-reduced-motion: reduce){
	.akses-cepat-item,
	.akses-cepat-icon{
		transition: none;
	}

	.akses-cepat-item:hover{
		transform: none;
		background-position: 0% 50%;
	}
}

/************************************/
/***    Beranda — Galeri Split    ***/
/************************************/

/* Layout dua kolom: teks kiri, satu foto besar kanan, dua tombol kategori.
   Menggantikan galeri bertab yang isinya pindah ke
   galeri-corporate-achievement.php dan galeri-publikasi-layanan.php.

   Section ini sengaja tenang: tepat di atasnya ada enam kartu gradien
   (Akses Cepat). Dua blok ramai berturut-turut membuat halaman melelahkan. */

.galeri-split{
	--gs-ease	: cubic-bezier(0.22, 0.61, 0.36, 1);
	padding: 80px 0;
	overflow: hidden;
}

.galeri-split-content{
	max-width: 560px;
}

/* Judul memakai .section-title baku (sub-judul berbulat teal + h2 25px)
   supaya seragam dengan seluruh section lain di beranda. */
.galeri-split-content p{
	max-width: 500px;
}

/* --- Dua tombol kategori --- */
/* Sepasang .btn-default: satu solid, satu putih bergaris (.btn-outline).
   Keduanya varian bawaan project, bukan tombol baru. */
.galeri-split-actions{
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 34px;
}

/* --- Foto kanan --- */
/* Rasio dikunci 3:2 mengikuti seluruh aset galeri (semuanya 1200x800),
   jadi tidak ada pemotongan tak terduga. */
.galeri-split-figure{
	position: relative;
	margin: 0;
	border-radius: 4px;
	overflow: hidden;
}

.galeri-split-figure img{
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

/* Bilah aksen di tepi bawah foto, mengikuti acuan desain. */
.galeri-split-figure::after{
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 8px;
	background: linear-gradient(90deg, var(--accent-color) 0%, var(--accent-secondary-color) 100%);
}

/* --- Kartu tautan silang antar kategori (dipakai di dua halaman galeri) --- */
.galeri-crosslink{
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 24px;
	margin-top: 30px;
	padding: 32px 34px;
	border: 1px solid var(--divider-color);
	border-radius: 12px;
	background: var(--secondary-color);
}

.galeri-crosslink-label{
	display: block;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--accent-color);
	margin-bottom: 8px;
}

.galeri-crosslink-title{
	font-size: 22px;
	font-weight: 600;
	line-height: 1.3em;
	color: var(--primary-color);
	margin: 0;
}

.galeri-crosslink-desc{
	font-size: 15px;
	line-height: 1.6em;
	color: var(--text-color);
	margin: 8px 0 0;
	max-width: 520px;
}

.galeri-crosslink-btn{
	display: inline-flex;
	align-items: center;
	gap: 12px;
	flex: none;
	padding: 12px 12px 12px 24px;
	border-radius: 10px;
	background: var(--accent-color);
	color: var(--white-color);
	font-size: 15px;
	font-weight: 600;
	transition: background-color 0.3s var(--gs-ease), transform 0.3s var(--gs-ease);
}

.galeri-crosslink-btn-icon{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #FFFFFF2E;
	font-size: 13px;
}

.galeri-crosslink-btn:hover{
	background: var(--accent-secondary-color);
	color: var(--white-color);
	transform: translateY(-3px);
}

@media (prefers-reduced-motion: reduce){
	.galeri-crosslink-btn{
		transition: none;
	}

	.galeri-crosslink-btn:hover{
		transform: none;
	}
}

/************************************/
/***    Beranda — Publikasi       ***/
/************************************/

/* Satu section untuk publikasi: judul + panah slider di baris atas, tiga
   kartu artikel per layar, tombol "Lihat Semua Berita" di bawah barisnya.

   Kartunya memakai .post-item .article-post yang sudah ada — tidak ada
   komponen kartu baru. Slider memakai init .hm-post-slider yang sudah ada
   di js/function.js, jadi tidak ada JS baru. */

.hm-publikasi{
	padding: 80px 0;
}

/* Tombol di bawah baris kartu, rata tengah. */
.hm-publikasi-action{
	display: flex;
	justify-content: center;
	margin-top: 20px;
}

/************************************/
/***       Footer Ringkas         ***/
/************************************/

/* Menggantikan footer 4 kolom yang tinggi. Blok .footer-newsletter tidak
   disentuh sama sekali — seluruh 42 aturannya tetap berlaku.
   Tinggi footer turun kira-kira separuh. */

.footer-slim{
	--fs-ease : cubic-bezier(0.22, 0.61, 0.36, 1);

	padding: 64px 0 0;
}

.footer-slim .container{
	position: relative;
	z-index: 2;
}

/* --- Baris atas: identitas + newsletter --- */
.footer-slim-top{
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 40px 60px;
	align-items: start;
	padding-bottom: 40px;
}

.footer-slim-logo img{
	width: 210px;
	max-width: 100%;
	height: auto;
}

.footer-slim-tagline{
	margin: 20px 0 0;
	font-size: 15px;
	line-height: 1.7em;
	color: #FFFFFFC2;
	max-width: 420px;
}

.footer-slim-social{
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	padding: 0;
	margin: 22px 0 0;
}

.footer-slim-social a{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 1px solid var(--dark-divider-color);
	border-radius: 50%;
	color: var(--white-color);
	font-size: 14px;
	transition: background-color 0.3s var(--fs-ease), border-color 0.3s var(--fs-ease);
}

.footer-slim-social a:hover{
	background: var(--accent-color);
	border-color: var(--accent-color);
	color: var(--white-color);
}

/* --- Baris tengah: tautan + kontak --- */
.footer-slim-mid{
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 30px 60px;
	padding: 34px 0;
	border-top: 1px solid var(--dark-divider-color);
}

/* Satu baris tautan mengalir, bukan empat kolom bertumpuk. */
.footer-slim-links{
	display: flex;
	flex-wrap: wrap;
	gap: 12px 26px;
	align-content: flex-start;
}

.footer-slim-links a{
	font-size: 15px;
	line-height: 1.4em;
	color: #FFFFFFC2;
	transition: color 0.3s var(--fs-ease);
}

.footer-slim-links a:hover{
	color: var(--white-color);
}

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

.footer-slim-contact li{
	display: flex;
	gap: 11px;
	font-size: 14.5px;
	line-height: 1.6em;
	color: #FFFFFFC2;
}

.footer-slim-contact i{
	flex: none;
	margin-top: 4px;
	width: 15px;
	color: var(--accent-secondary-color);
	font-size: 13px;
}

.footer-slim-contact a{
	color: #FFFFFFC2;
	transition: color 0.3s var(--fs-ease);
}

.footer-slim-contact a:hover{
	color: var(--white-color);
}

/* --- Baris bawah --- */
.footer-slim-bottom{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 24px;
	padding: 22px 0;
	border-top: 1px solid var(--dark-divider-color);
}

.footer-slim-bottom p{
	margin: 0;
	font-size: 14px;
	line-height: 1.6em;
	color: #FFFFFF99;
}

.footer-slim-legal{
	display: flex;
	flex-wrap: wrap;
	gap: 6px 22px;
}

.footer-slim-legal a{
	font-size: 14px;
	line-height: 1.6em;
	color: #FFFFFF99;
	transition: color 0.3s ease-in-out;
}

.footer-slim-legal a:hover{
	color: var(--white-color);
}

/* Responsif footer ringkas. Aturan 991px/575px di bagian Responsive atas
   kalah urutan oleh aturan dasar di atas (spesifisitas sama), jadi
   footer tetap dua kolom di ponsel. Diulang di sini, setelah aturan dasar. */
@media only screen and (max-width: 991px){
	.footer-slim-top,
	.footer-slim-mid{
		grid-template-columns: minmax(0, 1fr);
		gap: 30px;
	}
}

@media only screen and (max-width: 575px){
	.footer-slim-top{
		padding-bottom: 30px;
	}

	.footer-slim-mid{
		padding: 28px 0;
	}

	.footer-slim-links{
		flex-direction: column;
		gap: 12px;
	}
}

@media (prefers-reduced-motion: reduce){
	.footer-slim-social a,
	.footer-slim-links a,
	.footer-slim-legal a,
	.footer-slim-contact a{
		transition: none;
	}
}

/************************************/
/***  Beranda — Capaian & Tab     ***/
/************************************/

/* Tiga tab: Capaian Layanan · Our Client · Testimoni.
   Nada sengaja institusional: tanpa gradien, tanpa ikon berwarna-warni,
   angka tegas berwarna tinta, aksen hanya sebagai garis tipis. */

.capaian-section{
	--ct-ease : cubic-bezier(0.22, 0.61, 0.36, 1);

	padding: 100px 0;
	background: var(--secondary-color);
}

/* --- Rail tab kiri --- */
/* Tab TIDAK aktif = kartu putih; tab aktif = biru penuh. */
.ct-rail{
	display: flex;
	flex-direction: column;
	border: 1px solid var(--divider-color);
	border-radius: 12px;
	overflow: hidden;
}

.ct-rail .nav-item{
	width: 100%;
}

.ct-rail .nav-link{
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	padding: 20px 22px;
	border: 0;
	border-radius: 0;
	text-align: left;
	background: var(--white-color);
	color: var(--primary-color);
	transition: background-color 0.3s var(--ct-ease), color 0.3s var(--ct-ease);
}

.ct-rail .nav-link:not(.active):hover{
	background: var(--secondary-color);
}

.ct-rail .nav-link.active{
	background: var(--accent-color);
	color: var(--white-color);
}

.ct-rail-icon{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex: none;
	border-radius: 8px;
	background: var(--accent-color);
	color: var(--white-color);
	font-size: 15px;
	transition: background-color 0.3s var(--ct-ease);
}

.ct-rail .nav-link.active .ct-rail-icon{
	background: #FFFFFF2E;
}

.ct-rail-text{
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.ct-rail-label{
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.3em;
}

.ct-rail-note{
	font-size: 12.5px;
	line-height: 1.3em;
	color: var(--text-color);
}

.ct-rail .nav-link.active .ct-rail-note{
	color: #FFFFFFB8;
}

/* --- Pane 1: kartu statistik --- */
/* Kartu polos berpagar garis rambut, dengan pita aksen tipis di sisi kiri.
   Angkanya berwarna tinta, bukan aksen — di situs pemerintah angka adalah
   data, bukan hiasan. */
.ct-stat-grid{
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}

.ct-stat{
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 22px 20px 22px 24px;
	border: 1px solid var(--divider-color);
	border-radius: 8px;
	background: var(--white-color);
	overflow: hidden;
	box-shadow: var(--card-shadow);
}

.ct-stat::before{
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: var(--accent-color);
}

.ct-stat-num{
	font-size: 34px;
	font-weight: 700;
	line-height: 1.1em;
	color: var(--primary-color);
	font-variant-numeric: tabular-nums;
}

.ct-stat-label{
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.45em;
	letter-spacing: 0.02em;
	color: var(--text-color);
	text-transform: uppercase;
}

/* Baris sumber data — penanda kredibilitas, wajib di situs pemerintah. */
.ct-source{
	margin: 20px 0 0;
	font-size: 13px;
	line-height: 1.6em;
	color: var(--text-color);
}

/* --- Pane 2: logo klien --- */
.ct-client-grid{
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}

.ct-client{
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 118px;
	padding: 22px;
	border: 1px solid var(--divider-color);
	border-radius: 8px;
	background: var(--white-color);
}

.ct-client img{
	max-width: 100%;
	max-height: 46px;
	width: auto;
	height: auto;
	filter: grayscale(1);
	opacity: 0.6;
	transition: filter 0.3s var(--ct-ease), opacity 0.3s var(--ct-ease);
}

.ct-client:hover img{
	filter: grayscale(0);
	opacity: 1;
}

/* --- Pane 3: slider testimoni --- */
.ct-quote-slider{
	position: relative;
}

.ct-quote-slider .swiper-slide{
	height: auto;
	display: flex;
}

.ct-quote{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 22px;
	width: 100%;
	margin: 0;
	padding: 30px 28px;
	border: 1px solid var(--divider-color);
	border-radius: 8px;
	background: var(--white-color);
	box-shadow: var(--card-shadow);
}

/* Tanda kutip tipografis — fa-quote-left tidak tersedia di Font Awesome
   Free edisi ini, jadi digambar dari karakter kutip. */
.ct-quote-text{
	position: relative;
	margin: 0;
	padding-top: 34px;
	font-size: 15.5px;
	line-height: 1.7em;
	color: var(--primary-color);
}

.ct-quote-text::before{
	content: '\201C';
	position: absolute;
	top: -6px;
	left: -2px;
	font-size: 54px;
	line-height: 1;
	color: var(--accent-color);
	opacity: 0.28;
}

.ct-quote-by{
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding-top: 18px;
	border-top: 1px solid var(--divider-color);
}

.ct-quote-name{
	font-size: 15px;
	font-weight: 600;
	color: var(--primary-color);
}

.ct-quote-role{
	font-size: 13px;
	color: var(--text-color);
}

.ct-quote-button-prev,
.ct-quote-button-next{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	color: var(--primary-color);
	font-size: 14px;
	cursor: pointer;
	transition: background-color 0.3s var(--ct-ease), color 0.3s var(--ct-ease), border-color 0.3s var(--ct-ease);
}

.ct-quote-button-prev{ left: -22px; }
.ct-quote-button-next{ right: -22px; }

.ct-quote-button-prev:hover,
.ct-quote-button-next:hover{
	background: var(--accent-color);
	border-color: var(--accent-color);
	color: var(--white-color);
}

@media (prefers-reduced-motion: reduce){
	.ct-rail .nav-link,
	.ct-rail-icon,
	.ct-client img,
	.ct-quote-button-prev,
	.ct-quote-button-next{
		transition: none;
	}
}

/************************************/
/***      Halaman Layanan         ***/
/************************************/

/* Halaman daftar seluruh layanan. Tanpa banner — header dibuat putih lewat
   <style> di layanan.php, pola sama dengan saran.php.

   Struktur: pita intro + pencarian, lalu per kategori: judul kategori di
   kiri, kartu layanan di kanan. Pencariannya menyaring kartu di sisi
   klien (js/function.js) — murni statis, tanpa backend. */

.lyn-intro{
	--lyn-ease  : cubic-bezier(0.22, 0.61, 0.36, 1);
	/* Biru sangat muda: campuran --accent-color di atas putih, senada dengan
	   pita pada acuan desain. */
	--lyn-band  : #E8F0F8;

	padding: 54px 0 58px;
	background: var(--lyn-band);
}

.lyn-intro-inner{
	margin: 0 auto;
	text-align: center;
}

/* Breadcrumb chip seperti .page-header di halaman lain (panah biru, ikon
   centang, halaman aktif lebih muda), di tengah dan dalam alur normal. */
.lyn-intro-crumbs ol.breadcrumb{
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 0 0 18px;
	padding: 0;
	background: transparent;
	filter: drop-shadow(0 10px 20px rgba(11, 92, 171, 0.18));
}
.lyn-intro-crumbs ol li.breadcrumb-item{
	display: inline-flex;
	align-items: center;
	padding: 10px 30px 10px 24px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.35em;
	color: var(--white-color);
	background: var(--accent-color);
	clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 14px 50%);
	transition: filter 0.3s ease-in-out;
}
.lyn-intro-crumbs ol li.breadcrumb-item:first-child{
	padding-left: 20px;
	clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
}
.lyn-intro-crumbs ol li.breadcrumb-item::before{
	content: '\f058' !important;
	font-family: 'Font Awesome 7 Free';
	font-weight: 900;
	font-size: 14px;
	margin-right: 8px;
	padding: 0;
	float: none;
	color: var(--accent-secondary-color);
}
.lyn-intro-crumbs ol li.breadcrumb-item a{ color: inherit; }
.lyn-intro-crumbs ol li.breadcrumb-item:not(.active):hover{ filter: brightness(0.92); }
.lyn-intro-crumbs ol li.breadcrumb-item.active{
	background: color-mix(in srgb, var(--accent-color) 48%, #ffffff);
	font-weight: 600;
}
.lyn-intro-crumbs ol li.breadcrumb-item.active::before{
	color: var(--white-color);
	opacity: 0.9;
}
@media only screen and (max-width: 767px){
	/* Ponsel: pil kecil, sama dengan breadcrumb .page-header di ponsel. */
	.lyn-intro-crumbs ol li.breadcrumb-item,
	.lyn-intro-crumbs ol li.breadcrumb-item:first-child{
		clip-path: none;
		border-radius: 6px;
		padding: 7px 10px;
		font-size: 12px;
	}
	.lyn-intro-crumbs ol li.breadcrumb-item::before{
		font-size: 12px;
		margin-right: 6px;
	}
}

.lyn-intro-title{
	font-size: 34px;
	font-weight: 700;
	line-height: 1.25em;
	color: var(--primary-color);
	margin: 0;
}

.lyn-intro-lead{
	margin: 14px auto 0;
	max-width: 100%;
	font-size: 16px;
	line-height: 1.7em;
	color: var(--text-color);
}

/* --- Kolom pencarian --- */
.lyn-search{
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 26px auto 0;
	max-width: 100%;
	padding: 6px 8px 6px 18px;
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 10px;
	transition: border-color 0.3s var(--lyn-ease), box-shadow 0.3s var(--lyn-ease);
}

.lyn-search:focus-within{
	border-color: var(--accent-color);
	box-shadow: 0 0 0 3px #0B5CAB1F;
}

.lyn-search-icon{
	flex: none;
	font-size: 15px;
	color: var(--text-color);
}

/* Tombol × bawaan browser disembunyikan: sudah ada .lyn-search-clear. */
.lyn-search-input::-webkit-search-cancel-button{
	display: none;
	-webkit-appearance: none;
}

.lyn-search-input{
	flex: 1 1 auto;
	min-width: 0;
	height: 44px;
	border: 0;
	background: transparent;
	font-size: 15px;
	color: var(--primary-color);
}

.lyn-search-input::placeholder{
	color: var(--text-color);
}

/* Field pencarian punya bingkai fokus sendiri di atas, jadi ring bawaan
   dimatikan khusus di sini agar tidak dobel. */
.lyn-search-input:focus,
.lyn-search-input:focus-visible{
	outline: none !important;
}

.lyn-search-clear{
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--secondary-color);
	color: var(--primary-color);
	font-size: 13px;
	cursor: pointer;
	transition: background-color 0.3s var(--lyn-ease);
}

/* Tombol mic: gaya dasar .site-search-mic, ukuran disesuaikan kolom ini. */
.lyn-search .lyn-search-mic{
	width: 40px;
	height: 40px;
	font-size: 15px;
}
.lyn-search-voice-msg{
	text-align: center;
}

.lyn-search-clear:hover{
	background: var(--accent-color);
	color: var(--white-color);
}

.lyn-search-status{
	margin: 12px 0 0;
	font-size: 13.5px;
	line-height: 1.5em;
	color: var(--text-color);
	min-height: 20px;
}

/* --- Daftar kategori --- */
.lyn-list{
	padding: 80px 0 100px;
	background: var(--bg-color);
}

.lyn-cat + .lyn-cat{
	margin-top: 54px;
	padding-top: 54px;
	border-top: 1px solid var(--divider-color);
}

/* Judul kategori menempel saat digulir, seperti kolom kiri pada acuan. */
.lyn-cat-head{
	position: sticky;
	top: 120px;
	padding-right: 24px;
}

.lyn-cat-icon{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin-bottom: 16px;
	border-radius: 8px;
	background: var(--accent-color);
	color: var(--white-color);
	font-size: 17px;
}

.lyn-cat-title{
	font-size: 22px;
	font-weight: 700;
	line-height: 1.35em;
	color: var(--primary-color);
	margin: 0;
}

.lyn-cat-count{
	display: inline-block;
	margin-top: 10px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--accent-color);
}

/* --- Kartu layanan --- */
/* Memakai .post-item .article-post yang sudah ada (kartu artikel),
   ditambah .layanan-post untuk penyesuaian di dalam grid. */
.lyn-grid{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 26px;
}

/* .post-item dirancang untuk row Bootstrap: height calc(100% - 30px)
   plus margin-bottom 30px. Di dalam grid yang sudah punya gap sendiri,
   margin itu bikin jarak dobel — dinetralkan di sini saja. */
.layanan-post{
	height: 100%;
	margin-bottom: 0;
	min-width: 0;
}

/* Featured image di kartu layanan selalu landscape, terlepas dari
   rasio asli file (object-fit: cover memotong sisi yang berlebih). */
.layanan-post .post-featured-image a,
.layanan-post .post-featured-image figure{
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.layanan-post .post-featured-image img{
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	object-fit: cover;
	object-position: center;
}

/* Deskripsi dipangkas tiga baris agar tinggi kartu seragam; teks
   lengkapnya tetap ada di DOM dan terbaca pembaca layar. */
.layanan-post .post-item-content p{
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.layanan-post .post-item-content h2{
	font-size: 19px;
	line-height: 1.4em;
}

/* Disembunyikan oleh penyaring pencarian. */
.layanan-post[hidden],
.lyn-cat[hidden]{
	display: none;
}

.lyn-empty{
	margin: 0;
	padding: 40px 24px;
	text-align: center;
	font-size: 15.5px;
	color: var(--text-color);
	border: 1px dashed var(--divider-color);
	border-radius: 10px;
}

@media (prefers-reduced-motion: reduce){
	.lyn-search,
	.lyn-search-clear{
		transition: none;
	}
}

/* Judul kategori di layanan.php kini jadi tautan ke halaman kategori. */
.lyn-cat-title a{
	color: inherit;
	transition: color 0.3s var(--lyn-ease);
}

.lyn-cat-title a:hover,
.lyn-cat-title a:focus{
	color: var(--accent-color);
}

/************************************/
/***   Halaman Kategori Layanan   ***/
/************************************/

/* Template layanan-kategori.php: banner + kartu layanan dalam kategori itu.
   Kartunya memakai ulang .lyn-grid dan .layanan-post dari halaman Layanan —
   tidak ada komponen kartu baru, cukup wadah dan jaraknya. */

.lyn-kat{
	padding: 80px 0 100px;
	background: var(--bg-color);
}

.lyn-kat-lead{
	margin: 0;
	font-size: 17px;
	line-height: 1.75em;
	color: var(--text-color);
}

.lyn-kat-bar{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	margin: 34px 0 22px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--divider-color);
}

.lyn-kat-count{
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--accent-color);
}

/* Tiga kolom di sini karena tidak berbagi ruang dengan judul kategori
   seperti di layanan.php — lebarnya penuh. */
.lyn-kat-grid{
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Lini yang kontennya belum tersedia (mis. Lembaga Pelatihan Kerja). */
.lyn-soon{
	margin: 0;
	padding: 28px 26px;
	font-size: 15.5px;
	line-height: 1.7em;
	color: var(--text-color);
	background: var(--secondary-color);
	border-left: 3px solid var(--accent-color);
	border-radius: 8px;
}

/* Pencarian versi ramping di dalam baris meta halaman lini. */
.lyn-search-inline{
	margin: 0 0 0 auto;
	max-width: 320px;
	flex: 1 1 240px;
}

.lyn-kat-bar-end{
	margin-top: 28px;
	padding-bottom: 0;
	border-bottom: 0;
}

/************************************/
/***  Halaman Baru — Struktur To-Be ***/
/************************************/

/* Delapan halaman baru dari dokumen arsitektur. Tiap halaman sengaja memakai
   susunan yang berbeda supaya tidak terbaca sebagai delapan salinan template
   yang sama:
     maklumat-layanan   → pernyataan besar + daftar nilai akrostik
     pakta-integritas   → sidebar kiri + daftar bernomor (benar-benar ordinal)
     penghargaan        → linimasa per tahun
     dashboard-capaian  → kisi angka (memakai ulang .ct-stat)
     testimoni-mitra    → slider kutipan + kisi logo
     event-promosi      → baris dengan blok tanggal di kiri
     rilis-media        → baris dokumen bergaris
     portal-akses-info  → pustaka berkas dengan pencarian
*/

.mk-statement,
.mk-nilai,
.mk-formal,
.pi-section,
.ph-section,
.dk-section,
.tm-testimoni,
.tm-mitra,
.ev-section,
.rm-section,
.pk-section{
	--pg-ease : cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- Maklumat Layanan ---------- */
.mk-statement{
	padding: 90px 0;
	background: var(--accent-color);
}

.mk-statement-inner{
	max-width: 860px;
	margin: 0 auto;
	text-align: center;
}

.mk-statement-label{
	display: inline-block;
	margin-bottom: 18px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #FFFFFFC2;
}

.mk-statement-quote{
	margin: 0;
	font-size: 34px;
	font-weight: 600;
	line-height: 1.4em;
	color: var(--white-color);
}

.mk-statement-quote strong{
	font-weight: 800;
}

.mk-statement-note{
	margin: 20px auto 0;
	max-width: 620px;
	font-size: 15.5px;
	line-height: 1.7em;
	color: #FFFFFFC2;
}

.mk-nilai{
	padding: 90px 0 80px;
	background: var(--bg-color);
}

.mk-nilai-list{
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px 40px;
}

.mk-nilai-item{
	display: flex;
	gap: 20px;
	padding-bottom: 22px;
	border-bottom: 1px solid var(--divider-color);
}

/* Huruf akrostik: bersama-sama membentuk kata HATI JUARA. */
.mk-nilai-huruf{
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 52px;
	height: 52px;
	padding: 0 10px;
	border-radius: 8px;
	background: var(--secondary-color);
	color: var(--accent-color);
	font-size: 20px;
	font-weight: 800;
	line-height: 1;
}

.mk-nilai-nama{
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	color: var(--primary-color);
}

.mk-nilai-desc{
	margin: 6px 0 0;
	font-size: 15px;
	line-height: 1.65em;
	color: var(--text-color);
}

.mk-formal{
	padding: 0 0 100px;
	background: var(--bg-color);
}

.mk-formal-box{
	max-width: 780px;
	margin: 0 auto;
	padding: 42px 44px;
	text-align: center;
	border: 1px solid var(--divider-color);
	border-top: 3px solid var(--accent-color);
	border-radius: 10px;
	background: var(--white-color);
	box-shadow: var(--card-shadow);
}

.mk-formal-tag{
	display: inline-block;
	margin-bottom: 16px;
	padding: 6px 14px;
	border-radius: 30px;
	background: var(--secondary-color);
	color: var(--text-color);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.mk-formal-title{
	margin: 0;
	font-size: 26px;
	font-weight: 700;
	color: var(--primary-color);
}

.mk-formal-body{
	margin: 18px 0 0;
	font-size: 16px;
	line-height: 1.8em;
	color: var(--text-color);
}

.mk-formal-sign{
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-top: 34px;
	padding-top: 24px;
	border-top: 1px solid var(--divider-color);
}

.mk-formal-sign-role{
	font-size: 14px;
	color: var(--text-color);
}

.mk-formal-sign-name{
	font-size: 18px;
	font-weight: 700;
	color: var(--primary-color);
}

/* ---------- Pakta Integritas ---------- */
.pi-section{
	padding: 90px 0 100px;
	background: var(--bg-color);
}

.pi-aside{
	position: sticky;
	top: 120px;
	padding-right: 26px;
}

.pi-aside-tag{
	display: inline-block;
	margin-bottom: 14px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--accent-color);
}

.pi-aside-title{
	margin: 0;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.35em;
	color: var(--primary-color);
}

.pi-aside-lead{
	margin: 14px 0 0;
	font-size: 15.5px;
	line-height: 1.7em;
	color: var(--text-color);
}

.pi-aside-dummy{
	margin: 20px 0 0;
	padding: 14px 16px;
	font-size: 13.5px;
	line-height: 1.6em;
	color: var(--text-color);
	background: var(--secondary-color);
	border-left: 3px solid var(--accent-secondary-color);
	border-radius: 6px;
}

.pi-intro{
	margin: 0 0 26px;
	font-size: 16.5px;
	line-height: 1.75em;
	color: var(--primary-color);
}

/* Daftar ini benar-benar ordinal (butir 1..6 pernyataan), jadi penomorannya
   memang bermakna — bukan hiasan. */
.pi-list{
	counter-reset: pakta;
	list-style: none;
	padding: 0;
	margin: 0;
}

.pi-poin{
	position: relative;
	counter-increment: pakta;
	padding: 20px 0 20px 62px;
	border-top: 1px solid var(--divider-color);
	font-size: 15.5px;
	line-height: 1.75em;
	color: var(--text-color);
}

.pi-poin::before{
	content: counter(pakta, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 20px;
	font-size: 17px;
	font-weight: 800;
	color: var(--accent-color);
	font-variant-numeric: tabular-nums;
}

.pi-sign{
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 40px;
	padding-top: 24px;
	border-top: 1px solid var(--divider-color);
	font-size: 15px;
	color: var(--text-color);
}

.pi-sign-role{
	font-weight: 700;
	color: var(--primary-color);
}

/* ---------- Penghargaan ---------- */
.ph-section{
	padding: 90px 0 100px;
	background: var(--secondary-color);
}

.ph-tahun{
	display: grid;
	grid-template-columns: 150px minmax(0, 1fr);
	gap: 30px;
	padding: 30px 0;
	border-top: 1px solid var(--divider-color);
}

.ph-tahun-label span{
	display: inline-block;
	padding: 8px 18px;
	border-radius: 30px;
	background: var(--accent-color);
	color: var(--white-color);
	font-size: 15px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.ph-entri-list{
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 16px;
}

.ph-entri{
	padding: 20px 22px;
	border-radius: 8px;
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	box-shadow: var(--card-shadow);
}

.ph-entri-nama{
	margin: 0;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.45em;
	color: var(--primary-color);
}

.ph-entri-oleh{
	display: block;
	margin-top: 6px;
	font-size: 14px;
	color: var(--text-color);
}

/* ---------- Dashboard Capaian ---------- */
.dk-section{
	padding: 90px 0 100px;
	background: var(--bg-color);
}

.dk-tautan{
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin-top: 40px;
}

.dk-tautan-item{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 22px;
	border: 1px solid var(--divider-color);
	border-radius: 10px;
	background: var(--white-color);
	color: var(--primary-color);
	font-size: 15.5px;
	font-weight: 600;
	transition: border-color 0.3s var(--pg-ease), transform 0.3s var(--pg-ease);
	box-shadow: var(--card-shadow);
}

.dk-tautan-arrow{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	flex: none;
	border-radius: 50%;
	background: var(--secondary-color);
	color: var(--accent-color);
	font-size: 12px;
}

.dk-tautan-item:hover{
	border-color: var(--accent-color);
	color: var(--accent-color);
	transform: translateY(-3px);
}

/* ---------- Testimoni & Mitra ---------- */
.tm-testimoni{
	padding: 90px 0 80px;
	background: var(--bg-color);
}

.tm-mitra{
	padding: 0 0 100px;
	background: var(--bg-color);
}

.tm-mitra-head{
	margin-bottom: 34px;
}

.tm-mitra-head h2{
	margin: 0;
}

.tm-mitra-grid{
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 16px;
}

.tm-mitra-item{
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100px;
	padding: 16px;
}

.tm-mitra-item img{
	max-width: 100%;
	max-height: 120px;
	filter: grayscale(1);
	opacity: 0.6;
	transition: filter 0.3s var(--pg-ease), opacity 0.3s var(--pg-ease);
}

.tm-mitra-item:hover img{
	filter: grayscale(0);
	opacity: 1;
}

.tm-note,
.ev-note,
.rm-note,
.pk-note{
	margin: 26px 0 0;
	padding: 14px 18px;
	font-size: 13.5px;
	line-height: 1.6em;
	color: var(--text-color);
	background: var(--secondary-color);
	border-left: 3px solid var(--accent-secondary-color);
	border-radius: 6px;
}

/* ---------- Event & Promosi ---------- */
.ev-section{
	padding: 90px 0 100px;
	background: var(--secondary-color);
}

.ev-list{
	display: grid;
	gap: 16px;
}

.ev-item{
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr) auto;
	align-items: center;
	gap: 26px;
	padding: 24px 26px;
	border: 1px solid var(--divider-color);
	border-radius: 10px;
	background: var(--white-color);
	box-shadow: var(--card-shadow);
}

/* Blok tanggal di kiri — bentuk yang berbeda dari kartu berfoto di halaman lain. */
.ev-tanggal{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	padding: 14px 8px;
	border-radius: 8px;
	background: var(--accent-color);
	color: var(--white-color);
}

.ev-tanggal-hari{
	font-size: 26px;
	font-weight: 800;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.ev-tanggal-bulan{
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.ev-tanggal-tahun{
	font-size: 12px;
	color: #FFFFFFB8;
}

.ev-tag{
	display: inline-block;
	margin-bottom: 8px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--accent-color);
}

.ev-judul{
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.45em;
	color: var(--primary-color);
}

.ev-desc{
	margin: 8px 0 0;
	font-size: 15px;
	line-height: 1.65em;
	color: var(--text-color);
}

.ev-aksi{
	flex: none;
}

/* ---------- Rilis Media ---------- */
.rm-section{
	padding: 90px 0 100px;
	background: var(--bg-color);
}

.rm-aside{
	position: sticky;
	top: 120px;
	padding-right: 26px;
}

.rm-aside-title{
	margin: 0;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.35em;
	color: var(--primary-color);
}

.rm-aside-lead{
	margin: 14px 0 24px;
	font-size: 15.5px;
	line-height: 1.7em;
	color: var(--text-color);
}

.rm-list{
	list-style: none;
	padding: 0;
	margin: 0;
}

/* Baris dokumen bergaris — bukan kartu, supaya beda dari halaman Berita. */
.rm-row{
	display: grid;
	grid-template-columns: 130px minmax(0, 1fr) 34px;
	align-items: center;
	gap: 22px;
	padding: 24px 0;
	border-top: 1px solid var(--divider-color);
}

.rm-row:last-child{
	border-bottom: 1px solid var(--divider-color);
}

.rm-row-tgl{
	font-size: 13.5px;
	font-weight: 600;
	color: var(--text-color);
	font-variant-numeric: tabular-nums;
}

.rm-row-judul{
	font-size: 17px;
	font-weight: 600;
	line-height: 1.5em;
	color: var(--primary-color);
	transition: color 0.3s var(--pg-ease);
}

.rm-row-aksi{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--secondary-color);
	color: var(--accent-color);
	font-size: 12px;
	transition: background-color 0.3s var(--pg-ease), color 0.3s var(--pg-ease);
}

.rm-row:hover .rm-row-judul{
	color: var(--accent-color);
}

.rm-row:hover .rm-row-aksi{
	background: var(--accent-color);
	color: var(--white-color);
}

/* ---------- Portal Akses Informasi ---------- */
.pk-section{
	padding: 90px 0 100px;
	background: var(--bg-color);
}

.pk-head{
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 24px;
	margin-bottom: 12px;
}

.pk-head-teks h2{
	margin: 0;
}

.pk-search{
	margin: 0;
	max-width: 340px;
	flex: 1 1 260px;
}

.pk-list{
	list-style: none;
	padding: 0;
	margin: 18px 0 0;
	display: grid;
	gap: 12px;
}

.pk-file{
	display: grid;
	grid-template-columns: 62px minmax(0, 1fr) 40px;
	align-items: center;
	gap: 20px;
	padding: 18px 22px;
	border: 1px solid var(--divider-color);
	border-radius: 10px;
	background: var(--white-color);
	transition: border-color 0.3s var(--pg-ease);
	box-shadow: var(--card-shadow);
}

.pk-file[hidden]{
	display: none;
}

.pk-file:hover{
	border-color: var(--accent-color);
}

/* Label jenis berkas, warnanya dibedakan agar cepat dipindai. */
.pk-file-jenis{
	display: flex;
	align-items: center;
	justify-content: center;
	height: 34px;
	border-radius: 6px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--white-color);
	background: var(--text-color);
}

.pk-file-pdf{ background: #B33A3A; }
.pk-file-docx{ background: var(--accent-color); }
.pk-file-xlsx{ background: #1B7A4B; }

.pk-file-judul{
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.45em;
	color: var(--primary-color);
}

.pk-file-meta{
	display: block;
	margin-top: 4px;
	font-size: 13px;
	color: var(--text-color);
}

.pk-file-unduh{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--secondary-color);
	color: var(--accent-color);
	font-size: 13px;
	transition: background-color 0.3s var(--pg-ease), color 0.3s var(--pg-ease);
}

.pk-file-unduh:hover{
	background: var(--accent-color);
	color: var(--white-color);
}

.pk-empty{
	margin: 18px 0 0;
	padding: 34px 24px;
	text-align: center;
	font-size: 15.5px;
	color: var(--text-color);
	border: 1px dashed var(--divider-color);
	border-radius: 10px;
}

@media (prefers-reduced-motion: reduce){
	.dk-tautan-item,
	.tm-mitra-item img,
	.rm-row-judul,
	.rm-row-aksi,
	.pk-file,
	.pk-file-unduh{
		transition: none;
	}

	.dk-tautan-item:hover{
		transform: none;
	}
}

/************************************/
/***  Beranda — Section To-Be     ***/
/************************************/

/* Empat section baru sesuai urutan beranda pada dokumen arsitektur:
     pgm-  Pengumuman        — kartu pemisah mendatar
     tk-   Testimoni & Mitra — tab: slider kutipan / kisi logo
     yt-   Frame YouTube     — rasio 16:9, iframe menyusul
     lp-   Lapor & Yanlink   — tiga kanal pengaduan
   Ditambah tombol di bawah slider Layanan Kami. */

.pgm-section,
.tk-section,
.sm-section,
.lp-section{
	--ix-ease : cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- Pengumuman ---------- */
/* Pita rata berwarna aksen: judul di kiri, dua tombol pil di kanan.
   Latar memakai --accent-color solid — putih di atasnya 6.7:1, aman.
   Biru muda pada acuan tidak ada di palet project, jadi tidak dipakai. */

.pgm-section{
	padding: 24px 0 0;
	background: var(--bg-color);
}

.pgm-bar{
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 20px 32px;
	padding: 18px 22px 22px 34px;
	border-radius: 16px;
	background: var(--accent-color);
}

.pgm-bar-teks{
	flex: 1 1 380px;
	min-width: 0;
}

.pgm-bar-title{
	margin: 0;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.35em;
	color: var(--white-color);
}

.pgm-bar-aksi{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	flex: none;
}

/* Tombol pil: teks kapital kecil + ikon dalam lingkaran, mengikuti acuan. */
.pgm-btn{
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 7px 7px 7px 24px;
	border: 1px solid var(--white-color);
	border-radius: 40px;
	background: var(--white-color);
	color: var(--accent-color);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1.2em;
	white-space: nowrap;
	transition: background-color 0.3s var(--ix-ease), color 0.3s var(--ix-ease), border-color 0.3s var(--ix-ease);
}

.pgm-btn-icon{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	flex: none;
	border-radius: 50%;
	background: var(--accent-color);
	color: var(--white-color);
	font-size: 13px;
	transition: background-color 0.3s var(--ix-ease), color 0.3s var(--ix-ease);
}

.pgm-btn:hover{
	background: var(--secondary-color);
	border-color: var(--secondary-color);
	color: var(--accent-color);
}

/* Tombol kedua: bergaris putih, supaya satu menonjol dan satu sekunder. */
.pgm-btn-ghost{
	background: transparent;
	border-color: #FFFFFF80;
	color: var(--white-color);
}

.pgm-btn-ghost .pgm-btn-icon{
	background: #FFFFFF2E;
	color: var(--white-color);
}

.pgm-btn-ghost:hover{
	background: var(--white-color);
	border-color: var(--white-color);
	color: var(--accent-color);
}

.pgm-btn-ghost:hover .pgm-btn-icon{
	background: var(--accent-color);
	color: var(--white-color);
}

.pgm-bar-desc{
	margin: 6px 0 0;
	font-size: 15px;
	line-height: 1.5em;
	color: #FFFFFFD1;
}

/* Slider pengumuman (function.js): fade otomatis tanpa panah, titik penanda
   di kiri bawah bar. Satu pengumuman: tampil biasa tanpa titik. */
.pgm-slider{
	border-radius: 16px;
	overflow: hidden;
}

.pgm-slider .swiper-slide{
	height: auto;
}

/* Hiasan pengeras suara di pojok kiri atas bar; teks digeser ke kanan. */
.pgm-wrap{
	position: relative;
}

.pgm-megafon{
	position: absolute;
	top: -24px;
	left: -24px;
	z-index: 3;
	width: 100px;
	height: auto;
	pointer-events: none;
	filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.18));
}

.pgm-wrap .pgm-bar{
	padding-left: 96px;
}

.pgm-wrap .pgm-slider .pgm-pagination{
	left: 96px;
}

.pgm-slider.is-multi .pgm-bar{
	padding-bottom: 36px;
}

/* Spesifisitas dinaikkan: aturan bawaan Swiper
   (.swiper-pagination-bullets.swiper-pagination-horizontal) memakai left 0
   dan lebar penuh. */
.pgm-slider .pgm-pagination{
	position: absolute;
	top: auto;
	left: 34px;
	bottom: 13px;
	z-index: 2;
	display: flex;
	gap: 8px;
	width: auto;
}

.pgm-pagination .swiper-pagination-bullet{
	width: 8px;
	height: 8px;
	margin: 0;
	border-radius: 8px;
	background: var(--white-color);
	opacity: 0.45;
	cursor: pointer;
	transition: width 0.3s var(--ix-ease), opacity 0.3s var(--ix-ease);
}

.pgm-pagination .swiper-pagination-bullet-active{
	width: 24px;
	opacity: 1;
}

.pgm-pagination .swiper-pagination-bullet:focus-visible{
	outline: 2px solid var(--white-color);
	outline-offset: 3px;
}

/* Responsif bar pengumuman. Aturan di bagian Responsive atas kalah urutan
   oleh aturan dasar di atas (spesifisitas sama); diulang di sini. */
@media only screen and (max-width: 991px){
	.pgm-section{ padding: 30px 0 0; }
	.pgm-bar{ padding: 22px; gap: 18px; }
	.pgm-slider.is-multi .pgm-bar{ padding-bottom: 42px; }
	.pgm-slider .pgm-pagination{ left: 22px; }
	.pgm-megafon{ top: -30px; left: -16px; width: 84px; }
	.pgm-wrap .pgm-bar{ padding-left: 80px; }
	.pgm-wrap .pgm-slider .pgm-pagination{ left: 80px; }
	.pgm-bar-teks{ flex: 1 1 100%; }
	.pgm-bar-title{ font-size: 20px; }
}

@media only screen and (max-width: 575px){
	/* Ponsel: gambar lebih kecil, teks mulai di bawahnya. */
	.pgm-section{ padding-top: 40px; }
	.pgm-megafon{ top: -30px; left: -8px; width: 70px; }
	.pgm-wrap .pgm-bar{ padding: 44px 22px 22px; }
	.pgm-wrap .pgm-slider.is-multi .pgm-bar{ padding-bottom: 42px; }
	.pgm-wrap .pgm-slider .pgm-pagination{ left: 22px; }
	.pgm-bar-title{ font-size: 18px; }
	.pgm-bar-aksi{ flex-direction: column; align-items: stretch; width: 100%; }
	.pgm-btn{ justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce){
	.pgm-pagination .swiper-pagination-bullet{ transition: none; }
}

/* ---------- Tombol di bawah judul section ---------- */
/* Rata kiri sejajar judul, mengikuti alur baca. Panah/tab tetap di kolom
   kanan; .align-items-end pada baris membuat keduanya rata bawah.
   Satu aturan dipakai bersama oleh section Layanan Kami dan Testimoni. */
.layanan-grid-action,
.tk-action{
	display: flex;
	justify-content: flex-start;
	margin-top: 26px;
}

/* ---------- Testimoni & Mitra ---------- */
.tk-section{
	padding: 100px 0;
	background: var(--secondary-color);
}

/* Tab mendatar rata kanan — menempel tepi kolom supaya tidak menyisakan
   celah dengan judul di sebelah kiri. Bentuknya juga sengaja berbeda dari
   rail vertikal di halaman lain. */
.tk-tab{
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: flex-end;
}

.tk-tab .nav-link{
	padding: 11px 22px;
	border: 1px solid var(--divider-color);
	border-radius: 30px;
	background: var(--white-color);
	color: var(--primary-color);
	font-size: 15px;
	font-weight: 600;
	transition: background-color 0.3s var(--ix-ease), color 0.3s var(--ix-ease), border-color 0.3s var(--ix-ease);
}

.tk-tab .nav-link.active{
	background: var(--accent-color);
	border-color: var(--accent-color);
	color: var(--white-color);
}

.tk-slider{
	position: relative;
}

.tk-slider .swiper-slide{
	height: auto;
	display: flex;
}

.tk-kartu{
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 24px;
	width: 100%;
	padding: 32px 30px;
	border: 1px solid var(--divider-color);
	border-radius: 12px;
	background: var(--white-color);
	box-shadow: var(--card-shadow);
}

.tk-kutip img{
	width: 34px;
	height: auto;
	opacity: 0.5;
}

.tk-teks{
	margin: 0;
	font-size: 16px;
	line-height: 1.75em;
	color: var(--primary-color);
}

/* Identitas narasumber: foto bulat + nama + jabatan/perusahaan. */
.tk-orang{
	display: flex;
	align-items: center;
	gap: 14px;
	padding-top: 20px;
	border-top: 1px solid var(--divider-color);
}

.tk-foto{
	width: 48px;
	height: 48px;
	flex: none;
	border-radius: 50%;
	object-fit: cover;
}

.tk-identitas{
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.tk-nama{
	font-size: 15.5px;
	font-weight: 700;
	color: var(--primary-color);
}

.tk-jabatan{
	font-size: 13.5px;
	line-height: 1.45em;
	color: var(--text-color);
}

.tk-button-prev,
.tk-button-next{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	color: var(--primary-color);
	font-size: 14px;
	cursor: pointer;
	transition: background-color 0.3s var(--ix-ease), color 0.3s var(--ix-ease), border-color 0.3s var(--ix-ease);
}

.tk-button-prev{ left: -22px; }
.tk-button-next{ right: -22px; }

/* Semua kartu sudah terlihat (Swiper mengunci slider): panah tidak berguna. */
.tk-button-prev.swiper-button-lock,
.tk-button-next.swiper-button-lock{
	display: none;
}

/* Aturan 991px/575px untuk panah di bagian Responsive atas kalah urutan oleh
   aturan dasar di atas (spesifisitas sama), sehingga panah terpotong tepi
   layar. Diulang di sini, setelah aturan dasar. */
@media only screen and (max-width: 991px){
	.tk-button-prev{ left: 0; }
	.tk-button-next{ right: 0; }
}

@media only screen and (max-width: 575px){
	/* Panah pindah ke bawah agar tidak menutupi kutipan. */
	.tk-button-prev,
	.tk-button-next{
		position: static;
		transform: none;
		display: inline-flex;
		margin: 16px 8px 0 0;
	}
}

.tk-button-prev:hover,
.tk-button-next:hover{
	background: var(--accent-color);
	border-color: var(--accent-color);
	color: var(--white-color);
}

.tk-mitra-grid{
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 16px;
}

.tk-mitra-item{
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100px;
	padding: 16px;
}

.tk-mitra-item img{
	max-width: 100%;
	max-height: 48px;
	filter: grayscale(1);
	opacity: 0.6;
	transition: filter 0.3s var(--ix-ease), opacity 0.3s var(--ix-ease);
}

.tk-mitra-item:hover img{
	filter: grayscale(0);
	opacity: 1;
}

/* ---------- Lapor & Yanlink ---------- */
/* Kartu menegak: logo resmi tiap kanal di atas, teks di bawah. Memakai logo
   asli dari bbt.kemenperin.go.id (diunduh ke images/pengaduan/), bukan ikon
   generik — kanal pihak ketiga lebih cepat dikenali lewat logonya sendiri. */

.lp-section{
	padding: 0 0 100px;
	background: var(--bg-color);
}

.lp-grid{
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
}

.lp-kanal{
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 22px 22px 20px;
	border: 1px solid var(--divider-color);
	border-radius: 12px;
	background: var(--white-color);
	box-shadow: var(--card-shadow);
	transition: border-color 0.3s var(--ix-ease), transform 0.3s var(--ix-ease), box-shadow 0.3s var(--ix-ease);
}

/* Kotak logo berlatar netral: ketiga berkas punya komposisi berbeda, dan
   contain menjaga proporsinya tanpa terpotong. */
.lp-kanal-logo{
	display: flex;
	align-items: center;
	justify-content: center;
	height: 96px;
	padding: 12px 18px;
	border-radius: 8px;
	overflow: hidden;
}

.lp-kanal-logo img{
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.lp-kanal-teks{
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1 1 auto;
	min-width: 0;
}

.lp-kanal-nama{
	font-size: 17px;
	font-weight: 700;
	line-height: 1.4em;
	color: var(--primary-color);
}

.lp-kanal-desc{
	font-size: 14.5px;
	line-height: 1.6em;
	color: var(--text-color);
}

.lp-kanal-arrow{
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding-top: 14px;
	border-top: 1px solid var(--divider-color);
	font-size: 14px;
	font-weight: 600;
	color: var(--accent-color);
	transition: gap 0.3s var(--ix-ease);
}

.lp-kanal-arrow i{
	font-size: 12px;
}

.lp-kanal:hover{
	border-color: var(--accent-color);
	transform: translateY(-3px);
	box-shadow: var(--card-shadow-hover);
}

.lp-kanal:hover .lp-kanal-arrow{
	gap: 14px;
}

@media (prefers-reduced-motion: reduce){
	.tk-tab .nav-link,
	.tk-button-prev,
	.tk-button-next,
	.tk-mitra-item img,
	.lp-kanal,
	.lp-kanal-arrow{
		transition: none;
	}

	.lp-kanal:hover{
		transform: none;
	}

	.lp-kanal:hover .lp-kanal-arrow{
		gap: 9px;
	}
}

/* --- Kartu artikel: bingkai tipis + bayangan --- */
/* .article-post sebelumnya transparan (gambar + teks di atas latar section).
   Sekarang jadi kartu utuh: bingkai rambut, sudut membulat, latar putih.
   Dipakai bersama oleh beranda, pembaruan.php, layanan.php, dan
   layanan-kategori.php — satu definisi, tampilannya seragam di semua. */
.article-post{
	display: flex;
	flex-direction: column;
	border: 1px solid var(--divider-color);
	border-radius: 12px;
	background: var(--white-color);
	box-shadow: var(--card-shadow);
	overflow: hidden;
	transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.article-post:hover{
	border-color: var(--accent-color);
	box-shadow: var(--card-shadow-hover);
	transform: translateY(-3px);
}

/* Gambar menempel ke tepi atas kartu, jadi radius sendirinya dilepas. */
.article-post .post-featured-image{
	margin-bottom: 0;
}

.article-post .post-featured-image a,
.article-post .post-featured-image figure{
	border-radius: 0;
}

.article-post .post-item-body{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	flex: 1 1 auto;
	padding: 22px 22px 20px;
}

@media (prefers-reduced-motion: reduce){
	.article-post{
		transition: none;
	}

	.article-post:hover{
		transform: none;
	}
}

/************************************/
/***  Beranda — Media Sosial      ***/
/************************************/

/* Instagram + YouTube dalam satu section bertab: rail kanal di kiri,
   empat ubin dalam slider di kanan. Menggantikan dua section terpisah. */

/* ---------- Video Company Profile ---------- */
/* Di antara Testimoni (latar abu) dan Media Sosial (putih): hanya padding
   atas, jarak bawah datang dari padding atas .sm-section. */
.cp-section{
	padding: 100px 0 0;
	background: var(--bg-color);
}
.cp-desc{
	margin: 0;
	font-size: 16px;
	line-height: 1.7em;
	color: var(--text-color);
}
.cp-player{
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: 24px;
	overflow: hidden;
	background: var(--primary-color);
	box-shadow: 0 24px 60px rgba(11, 92, 171, 0.14);
}
.cp-video{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: var(--primary-color);
}
/* Layar penuh: tampilkan utuh, jangan dipotong. */
.cp-video:fullscreen{ object-fit: contain; }

/* Tombol putar besar di atas sampul; disembunyikan selama video berjalan
   (function.js). Kontrol bawaan browser tetap ada untuk jeda, suara, dll. */
.cp-play{
	position: absolute;
	top: 50%;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 88px;
	height: 88px;
	padding: 0 0 0 6px;
	font-size: 28px;
	color: var(--accent-color);
	background: var(--white-color);
	border: 0;
	border-radius: 50%;
	box-shadow: 0 0 0 12px rgba(255, 255, 255, 0.28), 0 16px 36px rgba(0, 0, 0, 0.25);
	transform: translate(-50%, -50%);
	cursor: pointer;
	transition: transform 0.3s var(--ix-ease, ease), box-shadow 0.3s ease, opacity 0.3s ease;
}
.cp-play:hover{ transform: translate(-50%, -50%) scale(1.06); }
.cp-play:focus-visible{ outline: 3px solid var(--white-color); outline-offset: 6px; }
.cp-player.is-playing .cp-play{
	opacity: 0;
	pointer-events: none;
}

@media only screen and (max-width: 991px){
	.cp-section{ padding-top: 70px; }
	.cp-desc{ margin-top: 4px; }
	.cp-player{ border-radius: 18px; }
}

@media only screen and (max-width: 575px){
	.cp-section{ padding-top: 60px; }
	.cp-player{ border-radius: 14px; }
	.cp-play{ width: 64px; height: 64px; font-size: 20px; box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.28), 0 10px 24px rgba(0, 0, 0, 0.25); }
}

@media (prefers-reduced-motion: reduce){
	.cp-play{ transition: none; }
	.cp-play:hover{ transform: translate(-50%, -50%); }
}

.sm-section{
	--sm-ease : cubic-bezier(0.22, 0.61, 0.36, 1);
	padding: 100px 0;
}

/* --- Rail kanal --- */
/* Tab tidak aktif = kartu putih; tab aktif = biru penuh, sama seperti rail
   tab lain di situs ini. */
.sm-rail{
	display: flex;
	flex-direction: column;
	border: 1px solid var(--divider-color);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: var(--card-shadow);
}

.sm-rail .nav-item{
	width: 100%;
}

.sm-rail .nav-link{
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	padding: 18px 20px;
	border: 0;
	border-radius: 0;
	text-align: left;
	background: var(--white-color);
	color: var(--primary-color);
	transition: background-color 0.3s var(--sm-ease), color 0.3s var(--sm-ease);
}

.sm-rail .nav-link:not(.active):hover{
	background: var(--secondary-color);
}

.sm-rail .nav-link.active{
	background: var(--accent-color);
	color: var(--white-color);
}

/* Ikon memakai warna kanalnya masing-masing supaya cepat dikenali. */
.sm-rail-ikon{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	flex: none;
	border-radius: 10px;
	color: var(--white-color);
	font-size: 18px;
}

.sm-ikon-ig{ background: linear-gradient(135deg, #7A3BB5, #C13584 45%, #E1306C 70%, #F0803C); }
.sm-ikon-yt{ background: #C4302B; }

.sm-rail .nav-link.active .sm-rail-ikon{
	background: #FFFFFF2E;
}

.sm-rail-teks{
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.sm-rail-nama{
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.3em;
}

.sm-rail-akun{
	font-size: 12.5px;
	line-height: 1.3em;
	color: var(--text-color);
}

.sm-rail .nav-link.active .sm-rail-akun{
	color: #FFFFFFB8;
}

.sm-rail-aksi{
	display: flex;
	margin-top: 18px;
}

.sm-rail-aksi .btn-default{
	width: 100%;
}

/* --- Slider ubin --- */
.sm-slider{
	position: relative;
}

.sm-slider .swiper-slide{
	height: auto;
	display: flex;
}

/* Ubin Instagram: persegi, overlay muncul saat hover atau difokus. */
.sm-ig{
	position: relative;
	display: block;
	width: 100%;
	border-radius: 12px;
	overflow: hidden;
	background: var(--white-color);
	box-shadow: var(--card-shadow);
}

.sm-ig img{
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	transition: transform 0.5s var(--sm-ease);
}

.sm-ig-overlay{
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #0B5CABD9;
	color: var(--white-color);
	font-size: 28px;
	opacity: 0;
	transition: opacity 0.35s var(--sm-ease);
}

.sm-ig:hover .sm-ig-overlay,
.sm-ig:focus-visible .sm-ig-overlay{
	opacity: 1;
}

.sm-ig:hover img{
	transform: scale(1.06);
}

/* Ubin YouTube: 16:9 dengan tombol putar di tengah. */
.sm-yt{
	display: flex;
	flex-direction: column;
	gap: 14px;
	width: 100%;
	padding: 12px 12px 16px;
	border: 1px solid var(--divider-color);
	border-radius: 12px;
	background: var(--white-color);
	box-shadow: var(--card-shadow);
	transition: border-color 0.3s var(--sm-ease), box-shadow 0.3s var(--sm-ease);
}

.sm-yt-thumb{
	position: relative;
	display: block;
	border-radius: 8px;
	overflow: hidden;
}

.sm-yt-thumb img{
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.sm-yt-play{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: #C4302B;
	color: var(--white-color);
	font-size: 17px;
	padding-left: 3px;
	transition: transform 0.3s var(--sm-ease);
}

.sm-yt-judul{
	padding: 0 4px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.5em;
	color: var(--primary-color);
}

.sm-yt:hover{
	border-color: var(--accent-color);
	box-shadow: var(--card-shadow-hover);
}

.sm-yt:hover .sm-yt-play{
	transform: translate(-50%, -50%) scale(1.08);
}

/* --- Panah slider --- */
.sm-button-prev,
.sm-button-next{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	color: var(--primary-color);
	font-size: 14px;
	cursor: pointer;
	box-shadow: var(--card-shadow);
	transition: background-color 0.3s var(--sm-ease), color 0.3s var(--sm-ease), border-color 0.3s var(--sm-ease);
}

.sm-button-prev{ left: -22px; }
.sm-button-next{ right: -22px; }

.sm-button-prev:hover,
.sm-button-next:hover{
	background: var(--accent-color);
	border-color: var(--accent-color);
	color: var(--white-color);
}

.sm-note{
	margin: 22px 0 0;
	padding: 14px 18px;
	font-size: 13.5px;
	line-height: 1.6em;
	color: var(--text-color);
	background: var(--white-color);
	border-left: 3px solid var(--accent-secondary-color);
	border-radius: 6px;
}

.sm-note code{
	color: var(--accent-color);
	background: none;
	padding: 0;
}

@media (prefers-reduced-motion: reduce){
	.sm-rail .nav-link,
	.sm-ig img,
	.sm-ig-overlay,
	.sm-yt,
	.sm-yt-play,
	.sm-button-prev,
	.sm-button-next{
		transition: none;
	}

	.sm-ig:hover img{ transform: none; }
	.sm-yt:hover .sm-yt-play{ transform: translate(-50%, -50%); }
}

/* Tanggal video di bawah judul. */
.sm-yt-tgl{
	padding: 0 4px;
	font-size: 13px;
	color: var(--text-color);
}

/* Dua tombol kanal bertumpuk di bawah rail. */
.sm-rail-aksi{
	flex-direction: column;
	gap: 10px;
}

/* Panah dinonaktifkan otomatis saat semua slide sudah muat (watchOverflow). */
.sm-button-prev.swiper-button-disabled,
.sm-button-next.swiper-button-disabled{
	opacity: 0.35;
	pointer-events: none;
}

/* Versi halaman penuh (pengaduan.php): perlu padding atas karena tidak
   didahului section lain seperti di beranda. */
.lp-section-page{
	padding: 90px 0 100px;
}

/* Baris tautan terkait di bawah kartu kanal. */
.lp-terkait{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px 22px;
	margin-top: 40px;
	padding-top: 26px;
	border-top: 1px solid var(--divider-color);
}

.lp-terkait-label{
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--text-color);
}

.lp-terkait-list{
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
}

.lp-terkait-list a{
	font-size: 15px;
	font-weight: 600;
	color: var(--accent-color);
	transition: color 0.3s var(--ix-ease);
}

.lp-terkait-list a:hover{
	color: var(--primary-color);
}



/* Integrasi Smash Balloon dengan Swiper */
.sm-slider-ig .sm-ig-swiper {
    position: relative;
    width: 100%;
    min-width: 0;
    overflow: hidden;
}

.sm-slider-ig #sb_instagram {
    width: 100%;
    max-width: 100%;
    margin: 0 !important;
    padding: 0 !important;
}

.sm-slider-ig #sb_instagram #sbi_images.swiper-wrapper {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box;
}

.sm-slider-ig #sb_instagram .sbi_item.swiper-slide {
    flex-shrink: 0 !important;
    height: auto !important;
    margin: 0 !important;
    box-sizing: border-box;
}

.sm-slider-ig #sb_instagram .sbi_photo_wrap {
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

.sm-slider-ig #sb_instagram .sbi_photo.sm-ig {
    position: relative;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 12px;
    background-size: cover;
    background-position: center;
}

.sm-slider-ig #sb_instagram .sbi_photo.sm-ig img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}

.sm-slider-ig .sm-ig-overlay {
    z-index: 2;
}


/* Pastikan overlay theme berada di atas foto */
.sm-slider-ig .sm-ig-overlay {
    z-index: 2;
}


/* Hilangkan gradasi putih di sisi slider Instagram */
.sm-slider-ig::before,
.sm-slider-ig::after,
.sm-slider-ig .swiper::before,
.sm-slider-ig .swiper::after,
.sm-slider-ig .sm-ig-swiper::before,
.sm-slider-ig .sm-ig-swiper::after,
.sm-slider-ig #sb_instagram::before,
.sm-slider-ig #sb_instagram::after {
    content: none !important;
    display: none !important;
    background: none !important;
    opacity: 0 !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
}

/* Pastikan background container tidak menghasilkan efek putih */
.sm-slider-ig,
.sm-slider-ig .sm-ig-swiper,
.sm-slider-ig #sb_instagram {
    background-image: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
}


#sb_instagram .sbi_photo_wrap {
    position: relative;
    padding: 8px !important;
}


/************************************/
/***  Layanan — Alur & Dokumen    ***/
/************************************/

/* Accordion alur layanan + blok tarif/formulir pada layanan-detail.php.
   Memakai <details>/<summary> bawaan HTML: tidak butuh JavaScript, sudah
   dapat dibuka lewat papan ketik, dan tetap berfungsi bila skrip gagal. */

.alur-block{
	--al-ease : cubic-bezier(0.22, 0.61, 0.36, 1);

	margin-top: 36px;
	border: 1px solid var(--divider-color);
	border-radius: 12px;
	background: var(--white-color);
	box-shadow: var(--card-shadow);
	overflow: hidden;
}

/* Segitiga bawaan browser dimatikan; penandanya digambar sendiri. */
.alur-toggle{
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 20px 22px;
	cursor: pointer;
	list-style: none;
	transition: background-color 0.3s var(--al-ease);
}

.alur-toggle::-webkit-details-marker{ display: none; }
.alur-toggle::marker{ content: ''; }

.alur-toggle:hover{
	background: var(--secondary-color);
}

.alur-toggle-ikon{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	flex: none;
	border-radius: 10px;
	background: var(--accent-color);
	color: var(--white-color);
	font-size: 17px;
}

.alur-toggle-teks{
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1 1 auto;
	min-width: 0;
}

.alur-toggle-judul{
	font-size: 18px;
	font-weight: 700;
	color: var(--primary-color);
}

.alur-toggle-desc{
	font-size: 14px;
	line-height: 1.55em;
	color: var(--text-color);
}

.alur-toggle-tanda{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	flex: none;
	border-radius: 50%;
	background: var(--secondary-color);
	color: var(--accent-color);
	font-size: 12px;
	transition: transform 0.3s var(--al-ease), background-color 0.3s var(--al-ease), color 0.3s var(--al-ease);
}

.alur-block[open] .alur-toggle-tanda{
	transform: rotate(180deg);
	background: var(--accent-color);
	color: var(--white-color);
}

.alur-panel{
	padding: 4px 22px 24px;
	border-top: 1px solid var(--divider-color);
}

/* Daftar tahapan — penomorannya memang ordinal, bukan hiasan. */
.alur-langkah{
	list-style: none;
	padding: 0;
	margin: 20px 0 0;
	display: grid;
	gap: 2px;
}

.alur-langkah-item{
	display: flex;
	gap: 16px;
	padding: 16px 0;
	border-bottom: 1px solid var(--divider-color);
}

.alur-langkah-item:last-child{ border-bottom: 0; }

.alur-langkah-nomor{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	flex: none;
	border-radius: 50%;
	background: var(--secondary-color);
	color: var(--accent-color);
	font-size: 14px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.alur-langkah-teks{
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.alur-langkah-judul{
	font-size: 16px;
	font-weight: 600;
	color: var(--primary-color);
}

.alur-langkah-desc{
	font-size: 14.5px;
	line-height: 1.65em;
	color: var(--text-color);
}

/* Kanal permohonan */
.alur-kanal{
	margin-top: 24px;
	padding-top: 22px;
	border-top: 1px solid var(--divider-color);
}

.alur-kanal-judul{
	margin: 0 0 14px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--accent-color);
}

.alur-kanal-list{
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 26px;
}

.alur-kanal-item{
	display: flex;
	gap: 12px;
}

.alur-kanal-ikon{
	flex: none;
	margin-top: 3px;
	width: 16px;
	color: var(--accent-secondary-color);
	font-size: 13px;
}

.alur-kanal-teks{
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.alur-kanal-nama{
	font-size: 14.5px;
	font-weight: 600;
	color: var(--primary-color);
}

.alur-kanal-detail{
	font-size: 13.5px;
	line-height: 1.6em;
	color: var(--text-color);
	overflow-wrap: anywhere;
}

/* --- Blok tarif & formulir --- */
.dok-lead{
	margin: 0 0 20px;
	font-size: 15.5px;
	line-height: 1.7em;
	color: var(--text-color);
}

.dok-grid{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

.dok-item{
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 18px;
	border: 1px solid var(--divider-color);
	border-radius: 10px;
	background: var(--white-color);
	box-shadow: var(--card-shadow);
	transition: border-color 0.3s var(--al-ease), transform 0.3s var(--al-ease);
}

.dok-item-jenis{
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 52px;
	height: 32px;
	flex: none;
	padding: 0 8px;
	border-radius: 6px;
	background: var(--accent-color);
	color: var(--white-color);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.dok-item-teks{
	display: flex;
	flex-direction: column;
	gap: 3px;
	flex: 1 1 auto;
	min-width: 0;
}

.dok-item-nama{
	font-size: 15px;
	font-weight: 600;
	line-height: 1.45em;
	color: var(--primary-color);
}

.dok-item-meta{
	font-size: 13px;
	color: var(--text-color);
}

.dok-item-arrow{
	flex: none;
	font-size: 12px;
	color: var(--accent-color);
}

.dok-item:hover{
	border-color: var(--accent-color);
	transform: translateY(-2px);
}

.dok-note{
	margin: 18px 0 0;
	padding: 14px 18px;
	font-size: 13.5px;
	line-height: 1.6em;
	color: var(--text-color);
	background: var(--secondary-color);
	border-left: 3px solid var(--accent-secondary-color);
	border-radius: 6px;
}

@media (prefers-reduced-motion: reduce){
	.alur-toggle,
	.alur-toggle-tanda,
	.dok-item{
		transition: none;
	}

	.dok-item:hover{ transform: none; }
}

/* Halaman pengalihan (service-flow.php, tarif-peraturan-form-layanan.php):
   isinya sudah pindah, halamannya dipertahankan agar tautan lama tidak mati. */
.alih-section{
	padding: 90px 0 100px;
	background: var(--bg-color);
}

.alih-box{
	max-width: 720px;
	margin: 0 auto;
	padding: 40px 42px;
	text-align: center;
	border: 1px solid var(--divider-color);
	border-radius: 12px;
	background: var(--white-color);
	box-shadow: var(--card-shadow);
}

.alih-ikon{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	margin-bottom: 20px;
	border-radius: 50%;
	background: var(--secondary-color);
	color: var(--accent-color);
	font-size: 22px;
}

.alih-judul{
	margin: 0;
	font-size: 24px;
	font-weight: 700;
	color: var(--primary-color);
}

.alih-lead{
	margin: 14px 0 0;
	font-size: 15.5px;
	line-height: 1.75em;
	color: var(--text-color);
}

.alih-daftar{
	margin: 26px 0 0;
	padding: 20px 22px;
	text-align: left;
	border-radius: 10px;
	background: var(--secondary-color);
}

.alih-daftar-label{
	display: block;
	margin-bottom: 10px;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--accent-color);
}

.alih-daftar ul{
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 10px;
}

.alih-daftar li{
	position: relative;
	padding-left: 22px;
	font-size: 15px;
	line-height: 1.6em;
	color: var(--text-color);
}

.alih-daftar li::before{
	content: '';
	position: absolute;
	left: 0;
	top: 9px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--accent-secondary-color);
}

.alih-aksi{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-top: 28px;
}

/************************************/
/***  Cari Layanan & Tarif        ***/
/************************************/

/* search-layanan-tarif.php — hasil pencarian gabungan.
   Dua bentuk baris yang sengaja berbeda supaya jenis hasil langsung terbaca:
     .srl-row  → LAYANAN. Thumbnail di kiri, isi di kanannya, aksi di ujung.
     .pk-file  → TARIF/DOKUMEN. Memakai ulang baris pustaka berkas dari
                  portal-akses-informasi.php, tanpa gaya baru. */

.srl-section{
	--srl-ease : cubic-bezier(0.22, 0.61, 0.36, 1);

	padding: 60px 0 100px;
	background: var(--bg-color);
}

/* --- Baris saring + status --- */
.srl-bar{
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 14px 24px;
	margin-bottom: 34px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--divider-color);
}

.srl-filter{
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.srl-chip{
	padding: 10px 20px;
	border: 1px solid var(--divider-color);
	border-radius: 30px;
	background: var(--white-color);
	color: var(--primary-color);
	font-size: 14.5px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.3s var(--srl-ease), color 0.3s var(--srl-ease), border-color 0.3s var(--srl-ease);
}

.srl-chip:hover{
	border-color: var(--accent-color);
}

.srl-chip.is-active{
	background: var(--accent-color);
	border-color: var(--accent-color);
	color: var(--white-color);
}

.srl-status{
	margin: 0;
	font-size: 14px;
	color: var(--text-color);
}

/* --- Kelompok hasil --- */
.srl-grup + .srl-grup{
	margin-top: 46px;
}

.srl-grup[hidden]{
	display: none;
}

.srl-grup-judul{
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 18px;
	font-size: 18px;
	font-weight: 700;
	color: var(--primary-color);
}

.srl-grup-jumlah{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 30px;
	height: 24px;
	padding: 0 9px;
	border-radius: 30px;
	background: var(--secondary-color);
	color: var(--accent-color);
	font-size: 13px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.srl-list{
	display: grid;
	gap: 12px;
}

/* --- Baris hasil LAYANAN --- */
.srl-row{
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 16px 20px;
	border: 1px solid var(--divider-color);
	border-radius: 12px;
	background: var(--white-color);
	box-shadow: var(--card-shadow);
	transition: border-color 0.3s var(--srl-ease), transform 0.3s var(--srl-ease), box-shadow 0.3s var(--srl-ease);
}

.srl-row[hidden],
.srl-dok[hidden]{
	display: none;
}

.srl-thumb{
	flex: none;
	width: 56px;
	height: 56px;
	border-radius: 12px;
	overflow: hidden;
	background: var(--secondary-color);
}

.srl-thumb img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.srl-body{
	display: flex;
	flex-direction: column;
	gap: 5px;
	flex: 1 1 auto;
	min-width: 0;
}

.srl-head{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 12px;
}

.srl-judul{
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4em;
	color: var(--primary-color);
	transition: color 0.3s var(--srl-ease);
}

/* Pil kategori — menandai lini mana layanan ini berada. */
/* Pemisah kategori · ukuran berkas (Tarif & Dokumen, Portal Akses Informasi) */
.pk-file-meta > span + .srl-dok-size::before{
	content: " · ";
}

.srl-tag{
	/* Boleh menyusut dan turun baris: nama kategori bisa panjang
	   ("Fasilitasi Kemitraan dan Optimalisasi …") dan tidak boleh
	   melewati lebar kartu di layar kecil. */
	flex: 0 1 auto;
	max-width: 100%;
	padding: 4px 11px;
	border-radius: 30px;
	background: var(--secondary-color);
	color: var(--accent-color);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.4;
}

.srl-desc{
	font-size: 14px;
	line-height: 1.6em;
	color: var(--text-color);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.srl-aksi{
	display: inline-flex;
	align-items: center;
	gap: 9px;
	flex: none;
	font-size: 14px;
	font-weight: 600;
	color: var(--accent-color);
	white-space: nowrap;
	transition: gap 0.3s var(--srl-ease);
}

.srl-row:hover{
	border-color: var(--accent-color);
	transform: translateY(-2px);
	box-shadow: var(--card-shadow-hover);
}

.srl-row:hover .srl-judul{
	color: var(--accent-color);
}

.srl-row:hover .srl-aksi{
	gap: 14px;
}

/* --- Baris hasil TARIF: memakai .pk-file, hanya jarak yang disesuaikan --- */
.srl-list-dok{
	gap: 12px;
}

.srl-dok-note{
	margin: 20px 0 0;
	padding: 14px 18px;
	font-size: 13.5px;
	line-height: 1.6em;
	color: var(--text-color);
	background: var(--secondary-color);
	border-left: 3px solid var(--accent-secondary-color);
	border-radius: 6px;
}

@media (prefers-reduced-motion: reduce){
	.srl-chip,
	.srl-row,
	.srl-judul,
	.srl-aksi{
		transition: none;
	}

	.srl-row:hover{ transform: none; }
	.srl-row:hover .srl-aksi{ gap: 9px; }
}

/************************************/
/***  Text to Speech              ***/
/************************************/

/* Tombol mengambang pojok kiri bawah, semua halaman
   (template-parts/tts-player.php, assets/js/tts.js). Atribut [hidden] dipakai
   JS: tombol baru tampil bila browser punya suara untuk bahasa halaman.
   Saat membacakan: tombol biru, gelombang mengalir, cincin berdenyut, dan
   panel status + progres tetap terbuka. */
.tts-float{
	position: fixed;
	left: 24px;
	bottom: 24px;
	z-index: 990;
	display: flex;
	align-items: center;
	gap: 12px;
}
.tts-float[hidden],
.tts-float [hidden]{
	display: none !important;
}

.tts-float-btn{
	position: relative;
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	padding: 0;
	border: none;
	border-radius: 18px;
	background: var(--primary-color);
	color: var(--white-color);
	/* Garis putih memisahkan tombol dari latar berwarna (kartu biru, banner). */
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9), 0 10px 28px rgba(32, 32, 32, 0.28);
	cursor: pointer;
	transition: transform 0.25s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}
.tts-float-btn:hover{
	transform: translateY(-3px);
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9), 0 14px 32px rgba(32, 32, 32, 0.32);
}
.tts-float-wave{
	width: 28px;
	height: 28px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Cincin berdenyut, hanya saat membacakan. */
.tts-float-ring,
.tts-float-ring::before,
.tts-float-ring::after{
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
}
.tts-float-ring::before,
.tts-float-ring::after{
	content: "";
	border: 2px solid var(--accent-color);
	opacity: 0;
}

.tts-float.is-playing .tts-float-btn{
	background: var(--accent-color);
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9), 0 10px 28px rgba(11, 92, 171, 0.4);
}
.tts-float.is-playing .tts-float-wave path{
	stroke-dasharray: 70 30;
	animation: tts-wave-flow 1.4s linear infinite;
}
.tts-float.is-playing .tts-float-wave{
	animation: tts-wave-bounce 0.7s ease-in-out infinite alternate;
}
.tts-float.is-playing .tts-float-ring::before{
	animation: tts-ring 1.8s ease-out infinite;
}
.tts-float.is-playing .tts-float-ring::after{
	animation: tts-ring 1.8s ease-out 0.9s infinite;
}
.tts-float.is-paused .tts-float-wave{
	opacity: 0.6;
}

@keyframes tts-wave-flow{
	to{ stroke-dashoffset: -100; }
}
@keyframes tts-wave-bounce{
	from{ transform: scaleY(0.82); }
	to{ transform: scaleY(1.08); }
}
@keyframes tts-ring{
	0%{ transform: scale(1); opacity: 0.55; }
	100%{ transform: scale(1.55); opacity: 0; }
}

/* Panel: tooltip saat diam (hover/fokus), tetap terbuka saat aktif. */
.tts-float-panel{
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 10px 10px 16px;
	border-radius: 14px;
	background: var(--white-color);
	box-shadow: 0 10px 28px rgba(32, 32, 32, 0.16);
	opacity: 0;
	transform: translateX(-8px);
	pointer-events: none;
	transition: opacity 0.25s ease, transform 0.25s ease;
}
.tts-float:hover .tts-float-panel,
.tts-float:focus-within .tts-float-panel,
.tts-float.is-active .tts-float-panel{
	opacity: 1;
	transform: none;
	pointer-events: auto;
}
.tts-float-text{
	display: flex;
	flex-direction: column;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3em;
	color: var(--primary-color);
	white-space: nowrap;
}
.tts-float:not(.is-active) .tts-float-panel{
	padding-right: 16px;
}
.tts-float-progress{
	display: none;
	width: 150px;
	height: 3px;
	margin-top: 7px;
	border-radius: 3px;
	background: var(--divider-color);
	overflow: hidden;
}
.tts-float.is-active .tts-float-progress{
	display: block;
}
.tts-float-progress span{
	display: block;
	width: 0;
	height: 100%;
	border-radius: inherit;
	background: var(--accent-color);
	transition: width 0.4s ease;
}
.tts-float-ctrl{
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(32, 32, 32, 0.06);
	color: var(--primary-color);
	font-size: 14px;
	cursor: pointer;
	transition: all 0.25s ease;
}
.tts-float:not(.is-active) .tts-float-ctrl{
	display: none;
}
.tts-float-ctrl + .tts-float-ctrl{
	margin-left: -4px;
}
.tts-float-ctrl:hover{
	background: var(--primary-color);
	color: var(--white-color);
}

@media only screen and (max-width: 767px){
	.tts-float{
		left: 16px;
		bottom: 16px;
		gap: 10px;
	}
	.tts-float-btn{
		width: 50px;
		height: 50px;
		border-radius: 16px;
	}
	.tts-float-wave{
		width: 25px;
		height: 25px;
	}
	.tts-float-text{ font-size: 13px; }
	.tts-float-progress{ width: 120px; }
	/* Layar sentuh tidak punya hover: label diam tidak perlu muncul. */
	.tts-float:not(.is-active) .tts-float-panel{ display: none; }
}

@media (prefers-reduced-motion: reduce){
	.tts-float.is-playing .tts-float-wave,
	.tts-float.is-playing .tts-float-wave path,
	.tts-float.is-playing .tts-float-ring::before,
	.tts-float.is-playing .tts-float-ring::after{
		animation: none;
	}
	.tts-float-btn,
	.tts-float-panel{
		transition: none;
	}
}

/************************************/
/***  Header — Bahasa & Pencarian  ***/
/************************************/

/* Tombol bahasa (markup dari mu-plugin balai-i18n) dan tombol cari di ujung
   kanan menu. Mengikuti state header di §03: transparan di atas hero dengan
   ikon putih, gelap saat header ter-pin berlatar putih. */

.header-actions{
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
	margin-left: 28px;
}

.header-search-btn,
.balai-lang summary{
	height: 46px;
	border: 1px solid var(--dark-divider-color);
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.06);
	color: var(--white-color);
	cursor: pointer;
	transition: background 0.3s ease-in-out, border-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

.header-search-btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	padding: 0;
	font-size: 17px;
}

.header-search-btn:hover,
.balai-lang summary:hover,
.balai-lang[open] summary{
	background: var(--accent-color);
	border-color: var(--accent-color);
	color: var(--white-color);
}

.balai-lang{
	position: relative;
}

.balai-lang summary{
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 0 13px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	list-style: none;
	user-select: none;
}

.balai-lang summary::-webkit-details-marker{
	display: none;
}

.balai-lang summary::marker{
	content: '';
}

.balai-lang-globe{
	width: 18px;
	height: 18px;
}

.balai-lang-caret{
	width: 14px;
	height: 14px;
	transition: transform 0.25s ease-in-out;
}

.balai-lang[open] .balai-lang-caret{
	transform: rotate(180deg);
}

.balai-lang-menu{
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	z-index: 5;
	min-width: 210px;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: var(--white-color);
	border-radius: 14px;
	box-shadow: 0 18px 40px rgba(32, 32, 32, 0.15);
	animation: balai-lang-in 0.18s ease-out;
}

@keyframes balai-lang-in{
	from{ opacity: 0; transform: translateY(-6px); }
	to{ opacity: 1; transform: none; }
}

.balai-lang-menu li{
	margin: 0;
}

.balai-lang-menu a{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 12px;
	border-radius: 9px;
	color: var(--primary-color);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.2;
}

.balai-lang-menu a span{
	color: var(--text-color);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
}

.balai-lang-menu a:hover,
.balai-lang-menu a:focus-visible{
	background: rgba(11, 92, 171, 0.08);
	color: var(--accent-color);
}

.balai-lang-menu a[aria-current="true"]{
	color: var(--accent-color);
	font-weight: 700;
}

.balai-lang-menu a[aria-current="true"] span{
	color: var(--accent-color);
}

/* Header ter-pin berlatar putih */
header.main-header .header-sticky.active .header-search-btn,
header.main-header .header-sticky.active .balai-lang summary{
	border-color: var(--divider-color);
	background: #20202008;
	color: var(--primary-color);
}

header.main-header .header-sticky.active .header-search-btn:hover,
header.main-header .header-sticky.active .balai-lang summary:hover,
header.main-header .header-sticky.active .balai-lang[open] summary{
	background: var(--accent-color);
	border-color: var(--accent-color);
	color: var(--white-color);
}

@media only screen and (max-width: 991px){
	/* Menu desktop disembunyikan: tombol-tombol ini pindah ke kanan, di samping hamburger */
	.header-actions{
		gap: 8px;
		margin-left: auto;
	}

	.header-actions + .navbar-toggle{
		margin-left: 8px;
	}
}

@media only screen and (max-width: 575px){
	.header-search-btn{
		width: 42px;
	}

	.header-search-btn,
	.balai-lang summary{
		height: 42px;
	}

	.balai-lang summary{
		gap: 5px;
		padding: 0 10px;
		font-size: 14px;
	}

	.balai-lang-caret{
		display: none;
	}

	.header-actions + .navbar-toggle{
		width: 42px;
		height: 42px;
	}
}

/* --- Popup pencarian ------------------------------------------------------ */

html.site-search-open,
html.site-search-open body{
	overflow: hidden;
}

.site-search{
	position: fixed;
	inset: 0;
	z-index: 9990;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: clamp(16px, 7vh, 80px) 16px 16px;
}

.site-search[hidden]{
	display: none;
}

.site-search-backdrop{
	position: absolute;
	inset: 0;
	background: rgba(20, 24, 32, 0.55);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	opacity: 0;
	transition: opacity 0.22s ease-out;
}

.site-search-dialog{
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 920px;
	max-height: calc(100vh - clamp(16px, 7vh, 80px) - 16px);
	max-height: calc(100dvh - clamp(16px, 7vh, 80px) - 16px);
	padding: 44px 56px 48px;
	background: #F4F5F7;
	border-radius: 28px;
	box-shadow: 0 30px 80px rgba(20, 24, 32, 0.28);
	opacity: 0;
	transform: translateY(-14px) scale(0.985);
	transition: opacity 0.22s ease-out, transform 0.22s ease-out;
}

.site-search.is-open .site-search-backdrop,
.site-search.is-open .site-search-dialog{
	opacity: 1;
}

.site-search.is-open .site-search-dialog{
	transform: none;
}

.site-search-head{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.site-search-logo{
	width: auto;
	height: 46px;
}

.site-search-close{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--primary-color);
	font-size: 22px;
	cursor: pointer;
	transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
}

.site-search-close:hover{
	background: #2020200F;
	color: var(--accent-color);
}

.site-search-form{
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 36px;
	padding: 8px 8px 8px 28px;
	background: var(--white-color);
	border: 1px solid transparent;
	border-radius: 100px;
	box-shadow: 0 1px 2px #2020200A;
	transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.site-search-form:focus-within{
	border-color: var(--accent-color);
	box-shadow: 0 0 0 4px rgba(11, 92, 171, 0.12);
}

.site-search-input{
	flex: 1;
	min-width: 0;
	height: 52px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--primary-color);
	font-size: 18px;
	outline: none;
}

.site-search-input::placeholder{
	color: #8A9190;
}

.site-search-input::-webkit-search-cancel-button{
	cursor: pointer;
}

/* Penanda fokus sudah ditangani bingkai kolom (:focus-within) */
.site-search-form .site-search-input:focus-visible{
	outline: none !important;
}

.site-search-spinner{
	display: none;
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	border: 2px solid #2020201F;
	border-top-color: var(--accent-color);
	border-radius: 50%;
	animation: site-search-spin 0.7s linear infinite;
}

.site-search.is-loading .site-search-spinner{
	display: block;
}

@keyframes site-search-spin{
	to{ transform: rotate(360deg); }
}

/* Tombol mic (cari dengan suara, header-tools.js). Saat mendengarkan:
   merah dengan cincin berdenyut. */
.site-search-mic{
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 52px;
	height: 52px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #EEF4FB;
	color: var(--accent-color);
	font-size: 18px;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.site-search-mic[hidden]{ display: none; }
/* Hover hanya untuk perangkat ber-mouse: di layar sentuh warna hover
   "menempel" setelah diketuk. */
@media (hover: hover){
	.site-search-mic:hover{
		background: var(--accent-color);
		color: var(--white-color);
	}
}
.site-search-voice-msg{
	margin: 12px 0 0;
	padding: 0 8px;
	font-size: 14px;
	line-height: 1.5em;
	color: #B3261E;
}
.site-search-voice-msg[hidden]{ display: none; }
.site-search-mic:focus-visible{
	outline: 2px solid var(--accent-color);
	outline-offset: 3px;
}
.site-search-mic.is-listening{
	background: #D93025;
	color: var(--white-color);
}
.site-search-mic.is-listening::after{
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	box-shadow: 0 0 0 0 rgba(217, 48, 37, 0.45);
	animation: site-search-mic-pulse 1.4s ease-out infinite;
}
@keyframes site-search-mic-pulse{
	to{ box-shadow: 0 0 0 14px rgba(217, 48, 37, 0); }
}
@media (prefers-reduced-motion: reduce){
	.site-search-mic.is-listening::after{ animation: none; box-shadow: 0 0 0 4px rgba(217, 48, 37, 0.3); }
}

.site-search-submit{
	display: inline-flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
	height: 52px;
	padding: 0 26px;
	border: 0;
	border-radius: 100px;
	background: var(--accent-color);
	color: var(--white-color);
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s ease-in-out;
}

.site-search-submit:hover{
	background: #094C8E;
}

.site-search-submit i{
	font-size: 14px;
}

.site-search-body{
	min-height: 0;
	margin-top: 32px;
	margin-right: -12px;
	padding-right: 12px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.site-search-popular-title{
	margin: 0 0 16px;
	color: var(--text-color);
	font-size: 15px;
}

.site-search-chips{
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.site-search-chip{
	padding: 11px 22px;
	border: 1px solid transparent;
	border-radius: 100px;
	background: var(--white-color);
	color: var(--primary-color);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.2;
	cursor: pointer;
	transition: border-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.site-search-chip:hover{
	border-color: var(--accent-color);
	color: var(--accent-color);
}

.site-search-group + .site-search-group{
	margin-top: 26px;
}

.site-search-group-title{
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 12px;
	color: var(--text-color);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.site-search-group-count{
	padding: 3px 8px;
	border-radius: 100px;
	background: #2020200D;
	color: var(--primary-color);
	font-size: 12px;
	letter-spacing: 0;
}

.site-search-list{
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.site-search-item{
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 12px 18px 12px 12px;
	border: 1px solid transparent;
	border-radius: 16px;
	background: var(--white-color);
	color: var(--primary-color);
	transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.site-search-item:hover,
.site-search-item:focus-visible{
	border-color: var(--accent-color);
	box-shadow: 0 8px 22px rgba(11, 92, 171, 0.1);
	color: var(--primary-color);
}

.site-search-item-media{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	overflow: hidden;
	border-radius: 12px;
	background: rgba(11, 92, 171, 0.08);
	color: var(--accent-color);
	font-size: 20px;
}

.site-search-item-media img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.site-search-item-type{
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.site-search-item-type--pdf{
	background: #D92D200F;
	color: #B42318;
}

.site-search-item-type--xlsx,
.site-search-item-type--xls,
.site-search-item-type--csv{
	background: #0796420F;
	color: #067647;
}

.site-search-item-text{
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.site-search-item-title{
	display: -webkit-box;
	overflow: hidden;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.site-search-item-title mark{
	padding: 0 1px;
	border-radius: 3px;
	background: rgba(23, 176, 167, 0.2);
	color: inherit;
}

.site-search-item-meta{
	color: var(--text-color);
	font-size: 13px;
	line-height: 1.3;
}

.site-search-item > .fa-solid{
	flex-shrink: 0;
	color: #9AA1A0;
	font-size: 14px;
	transition: color 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.site-search-item:hover > .fa-solid,
.site-search-item:focus-visible > .fa-solid{
	color: var(--accent-color);
	transform: translateX(3px);
}

.site-search-more{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
	color: var(--accent-color);
	font-size: 15px;
	font-weight: 600;
}

.site-search-more i{
	font-size: 13px;
}

.site-search-more:hover{
	color: #094C8E;
	text-decoration: underline;
}

.site-search-empty{
	padding: 28px 16px 12px;
	text-align: center;
}

.site-search-empty > i{
	color: #B8BEBD;
	font-size: 28px;
}

.site-search-empty-title{
	margin: 14px 0 6px;
	color: var(--primary-color);
	font-size: 17px;
	font-weight: 600;
	overflow-wrap: anywhere;
}

.site-search-empty-hint{
	margin: 0;
	color: var(--text-color);
	font-size: 15px;
}

@media only screen and (max-width: 767px){
	.site-search{
		padding: 12px;
	}

	.site-search-dialog{
		max-height: calc(100vh - 24px);
		max-height: calc(100dvh - 24px);
		padding: 22px 20px 24px;
		border-radius: 22px;
	}

	.site-search-logo{
		height: 32px;
	}

	.site-search-form{
		margin-top: 22px;
		padding: 6px 6px 6px 18px;
	}

	.site-search-input{
		height: 46px;
		font-size: 16px;	/* < 16px membuat iOS men-zoom halaman saat fokus */
	}

	.site-search-submit{
		height: 46px;
		padding: 0 16px;
		font-size: 15px;
	}

	.site-search-body{
		margin-top: 22px;
	}

	.site-search-chips{
		gap: 8px;
	}

	.site-search-chip{
		padding: 9px 16px;
		font-size: 14px;
	}

	.site-search-item{
		gap: 12px;
		padding: 10px 14px 10px 10px;
	}

	.site-search-item-media{
		width: 48px;
		height: 48px;
	}

	.site-search-item-title{
		font-size: 15px;
	}
}

@media only screen and (max-width: 400px){
	.site-search-submit{
		justify-content: center;
		width: 46px;
		padding: 0;
		font-size: 0;	/* hanya panah; teks "Cari" tetap dibaca pembaca layar */
	}

	.site-search-submit i{
		font-size: 15px;
	}
}

@media (prefers-reduced-motion: reduce){
	.site-search-backdrop,
	.site-search-dialog,
	.balai-lang-menu{
		transition: none;
		animation: none;
	}

	.site-search-dialog{
		transform: none;
	}
}

/************************************/
/***         PDF Viewer           ***/
/************************************/

/* Popup untuk tautan PDF dan viewer di dalam halaman (shortcode [pdf]).
   Markup: template-parts/pdf-viewer.php, inc/pdf-viewer.php.
   Perilaku: assets/js/pdf-viewer.js. */

html.pdf-viewer-open,
html.pdf-viewer-open body{
	overflow: hidden;
}

.pdf-viewer{
	position: fixed;
	inset: 0;
	z-index: 9995;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.pdf-viewer[hidden]{
	display: none;
}

.pdf-viewer-backdrop{
	position: absolute;
	inset: 0;
	background: rgba(20, 24, 32, 0.7);
	opacity: 0;
	transition: opacity 0.2s ease-out;
}

.pdf-viewer-dialog{
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 1200px;
	height: 100%;
	overflow: hidden;
	background: var(--white-color);
	border-radius: 20px;
	box-shadow: 0 30px 80px rgba(20, 24, 32, 0.35);
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}

.pdf-viewer.is-open .pdf-viewer-backdrop,
.pdf-viewer.is-open .pdf-viewer-dialog{
	opacity: 1;
}

.pdf-viewer.is-open .pdf-viewer-dialog{
	transform: none;
}

.pdf-viewer-bar,
.pdf-embed-bar{
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 12px 16px;
	background: var(--white-color);
	border-bottom: 1px solid var(--divider-color);
}

.pdf-viewer-name{
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1;
	min-width: 0;
}

.pdf-embed-icon{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: #D92D200F;
	color: #B42318;
	font-size: 17px;
}

.pdf-viewer-title,
.pdf-embed-title{
	overflow: hidden;
	margin: 0;
	color: var(--primary-color);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.pdf-viewer-tools,
.pdf-embed-tools{
	display: flex;
	align-items: center;
	gap: 14px;
	flex-shrink: 0;
}

.pdf-viewer-pager,
.pdf-viewer-zoom,
.pdf-viewer-actions{
	display: flex;
	align-items: center;
	gap: 6px;
}

.pdf-tool{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid var(--divider-color);
	border-radius: 10px;
	background: var(--white-color);
	color: var(--primary-color);
	font-size: 14px;
	cursor: pointer;
	transition: background 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.pdf-tool:hover{
	background: var(--accent-color);
	border-color: var(--accent-color);
	color: var(--white-color);
}

.pdf-viewer-close{
	margin-left: 4px;
	font-size: 17px;
}

.pdf-viewer-page{
	width: 52px;
	height: 38px;
	padding: 0 6px;
	border: 1px solid var(--divider-color);
	border-radius: 10px;
	color: var(--primary-color);
	font-size: 14px;
	text-align: center;
	-moz-appearance: textfield;
}

.pdf-viewer-page::-webkit-inner-spin-button,
.pdf-viewer-page::-webkit-outer-spin-button{
	margin: 0;
	-webkit-appearance: none;
}

.pdf-viewer-count,
.pdf-embed-page{
	color: var(--text-color);
	font-size: 14px;
	white-space: nowrap;
}

.pdf-viewer-scale{
	min-width: 62px;
	height: 38px;
	padding: 0 8px;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: var(--primary-color);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.pdf-viewer-scale:hover{
	background: rgba(11, 92, 171, 0.08);
	color: var(--accent-color);
}

.pdf-viewer-stage,
.pdf-embed-stage{
	position: relative;
	flex: 1;
	min-height: 0;
	overflow: auto;
	overscroll-behavior: contain;
	background: #E8EBEE;
}

/* Lebar mengikuti halaman terlebar supaya halaman yang diperbesar tetap
   bisa di-scroll ke kiri; min-width menjaga halaman kecil tetap di tengah. */
.pdf-pages{
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: max-content;
	min-width: 100%;
	padding: 24px;
}

.pdf-page{
	position: relative;
	flex-shrink: 0;
	margin: 0 auto;
	background: var(--white-color);
	box-shadow: 0 2px 10px rgba(32, 32, 32, 0.12);
}

.pdf-page canvas{
	display: block;
	width: 100%;
	height: 100%;
}

.pdf-page.is-loading:empty{
	background: linear-gradient(100deg, #FFFFFF 40%, #F1F3F5 50%, #FFFFFF 60%) 0 0 / 200% 100%;
	animation: pdf-page-shimmer 1.2s linear infinite;
}

@keyframes pdf-page-shimmer{
	to{ background-position: -200% 0; }
}

.pdf-viewer-body{
	position: relative;
	display: flex;
	flex: 1;
	min-height: 0;
}

.pdf-viewer-state{
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 24px;
	background: #E8EBEE;
	text-align: center;
}

.pdf-viewer-state[hidden]{
	display: none;
}

.pdf-viewer-spinner{
	width: 36px;
	height: 36px;
	border: 3px solid #2020201F;
	border-top-color: var(--accent-color);
	border-radius: 50%;
	animation: site-search-spin 0.8s linear infinite;
}

.pdf-viewer-state-text{
	max-width: 420px;
	margin: 0;
	color: var(--primary-color);
	font-size: 16px;
}

/* --- Viewer di dalam halaman: [pdf] --------------------------------------- */

.pdf-embed{
	display: flex;
	flex-direction: column;
	margin: 28px 0;
	overflow: hidden;
	border: 1px solid var(--divider-color);
	border-radius: 16px;
	background: var(--white-color);
}

.pdf-embed-bar{
	padding: 10px 12px;
}

.pdf-embed-bar .pdf-embed-title{
	flex: 1;
	min-width: 0;
}

.pdf-embed-tools{
	gap: 6px;
}

.pdf-embed-page{
	margin-right: 6px;
}

.pdf-embed-stage{
	flex: none;
	height: var(--pdf-embed-height, 720px);
	max-height: 80vh;
}

.pdf-embed.is-loading .pdf-embed-stage{
	background: #E8EBEE linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, 0.5) 50%, transparent 60%) 0 0 / 200% 100%;
	animation: pdf-page-shimmer 1.2s linear infinite;
}

.pdf-embed-fallback{
	margin: 0;
	padding: 32px 24px;
	color: var(--primary-color);
	text-align: center;
}

.pdf-embed-fallback a{
	color: var(--accent-color);
	font-weight: 600;
	text-decoration: underline;
}

.pdf-embed-error{
	padding: 12px 16px;
	border-radius: 10px;
	background: #FFF4E5;
	color: #8A4B00;
}

@media only screen and (max-width: 991px){
	.pdf-viewer{
		padding: 0;
	}

	.pdf-viewer-dialog{
		max-width: none;
		border-radius: 0;
	}

	/* Bar dua baris: nama dokumen + unduh/tutup di atas, halaman + zoom di bawah */
	.pdf-viewer-bar{
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"name actions"
			"pager zoom";
		gap: 10px;
		padding: 10px 12px;
	}

	.pdf-viewer-name{
		grid-area: name;
	}

	.pdf-viewer-tools{
		display: contents;
	}

	.pdf-viewer-actions{
		grid-area: actions;
	}

	.pdf-viewer-pager{
		grid-area: pager;
	}

	.pdf-viewer-zoom{
		grid-area: zoom;
	}

	.pdf-viewer-newtab{
		display: none;
	}
}

@media only screen and (max-width: 767px){
	.pdf-pages{
		gap: 10px;
		padding: 12px;
	}

	.pdf-viewer-scale{
		min-width: 52px;
	}

	.pdf-embed-bar{
		flex-wrap: wrap;
	}

	.pdf-embed-tools{
		width: 100%;
		justify-content: flex-end;
	}

	.pdf-embed-page{
		margin-right: auto;
	}

	.pdf-embed-stage{
		height: min(var(--pdf-embed-height, 720px), 70vh);
	}
}

@media (prefers-reduced-motion: reduce){
	.pdf-viewer-backdrop,
	.pdf-viewer-dialog{
		transition: none;
	}

	.pdf-viewer-dialog{
		transform: none;
	}

	.pdf-page.is-loading:empty,
	.pdf-embed.is-loading .pdf-embed-stage{
		animation: none;
	}
}

/************************************/
/***  Tombol Dokumen              ***/
/************************************/

/* inc/documents.php: setiap dokumen punya Pratinjau (popup) dan Unduh.
   Label tombol berupa teks yang tampil sebagai tooltip, supaya terbaca
   pembaca layar dan ikut diterjemahkan. */
.doc-actions{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: none;
}
.doc-action{
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	font-size: 14px;
	color: var(--accent-color);
	background: rgba(11, 92, 171, 0.08);
	transition: background-color 0.3s ease, color 0.3s ease;
}
.doc-action:hover,
.doc-action:focus-visible{
	color: var(--white-color);
	background: var(--accent-color);
}
.doc-action-label{
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	z-index: 5;
	padding: 5px 9px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	color: var(--white-color);
	background: var(--primary-color);
	border-radius: 6px;
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, 4px);
	transition: opacity 0.2s ease, transform 0.2s ease;
}
.doc-action:hover .doc-action-label,
.doc-action:focus-visible .doc-action-label{
	opacity: 1;
	transform: translate(-50%, 0);
}

/* Portal Akses Informasi & Cari Layanan: kolom aksi selebar isinya. */
.pk-file{ grid-template-columns: 62px minmax(0, 1fr) auto; }
.pk-file-folder{ background: #8A6D1F; }
.pk-file-online,
.pk-file-doc{ background: var(--accent-color); }

/* Detail layanan: kartu dokumen. */
.dok-item .doc-actions{ margin-left: auto; }
.dok-item .doc-action{ width: 34px; height: 34px; font-size: 13px; }
div.dok-item:hover{ transform: none; }
/* Satu kolom di layar kecil. Aturan serupa di bagian responsif (max-width:
   575px) ditulis sebelum .dok-grid dasar sehingga tertimpa; ini menggantikannya. */
@media only screen and (max-width: 767px){
	.dok-grid{ grid-template-columns: minmax(0, 1fr); }
}

/* Daftar dokumen PPID (template-parts/ppid/documents.php). */
.ip-doc-list li.ip-doc-item{
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px 14px 18px;
	font-size: 14px;
	line-height: 1.6em;
	color: var(--text-color);
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 12px;
}
.ip-doc-item > i{ flex: 0 0 auto; font-size: 16px; color: var(--accent-secondary-color); }
.ip-doc-item-teks{ flex: 1 1 auto; min-width: 0; }

/* Chip tahun PPID: label = pratinjau, ikon = unduh. */
.ip-chip-split{
	gap: 0;
	padding: 0;
	overflow: hidden;
}
.ip-chip-split:hover{ color: var(--primary-color); background: var(--secondary-color); border-color: transparent; }
.ip-chip-main,
.ip-chip-dl{
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 12px;
	color: inherit;
	transition: background-color 0.25s ease-in-out, color 0.25s ease-in-out;
}
.ip-chip-dl{ border-left: 1px solid var(--divider-color); padding: 8px 10px; }
.ip-chip-main:hover,
.ip-chip-dl:hover,
.ip-chip-main:focus-visible,
.ip-chip-dl:focus-visible{ color: var(--white-color); background: var(--accent-color); }
.ip-chip-main:hover i,
.ip-chip-dl:hover i{ color: var(--white-color); }

/* Indeks Persepsi Korupsi: Pratinjau + Unduh berdampingan. */
.ip-download-row{ display: flex; flex-wrap: wrap; gap: 10px; }

/* Tabel laporan triwulan: ikon lebih kecil. */
.ip-table .doc-action{ width: 32px; height: 32px; font-size: 12px; }

/* Popup: mode iframe untuk Google Drive / Docs. */
.pdf-viewer.is-frame .pdf-viewer-pager,
.pdf-viewer.is-frame .pdf-viewer-zoom,
.pdf-viewer.is-frame .pdf-viewer-stage{ display: none; }
/* Iframe di atas lapisan "Memuat dokumen…" dan transparan: spinner terlihat
   sampai pratinjau Google tergambar. Event load tidak bisa diandalkan karena
   halaman pratinjau Google terus memuat. */
.pdf-viewer-frame{
	position: relative;
	z-index: 2;
	flex: 1;
	width: 100%;
	height: 100%;
	border: 0;
	background: transparent;
}

/************************************/
/***  Landing Page Promosi        ***/
/************************************/

/* single-landing_page.php (mu-plugin balai-landing). Isi halaman dari
   Elementor; tema hanya menyediakan pita atas, keterangan pengelola, dan
   pesan "Promo ini telah berakhir" (.status-page). */

/* Pita setinggi header: latar & overlay sama dengan .page-header, supaya
   header transparan bertulisan putih tetap terbaca. */
.page-topbar{
	position: relative;
	height: var(--page-topbar-h, 112px);
	background: url('../images/page-header-bg.jpg') no-repeat top center / cover;
}
.page-topbar::before{
	content: '';
	position: absolute;
	inset: 0;
	background: var(--primary-color);
	opacity: 70%;
}

.landing-manager-note{
	padding: 12px 0;
	font-size: 15px;
	line-height: 1.5em;
	color: #6B4300;
	background: #FFF4E0;
	border-bottom: 1px solid #F1D9AE;
}
.landing-manager-note i{ margin-right: 6px; }

/* Tombol widget Elementor mengikuti .btn-default. Global Kit sengaja tidak
   mengatur tombol (selektornya "body button" ikut mengubah tombol tema);
   pengaturan per widget di Elementor lebih spesifik, jadi tetap bisa diubah. */
.balai-landing .elementor-button{
	color: var(--white-color);
	background-color: var(--e-global-color-accent, #0B5CAB);
	font-size: 15px;
	font-weight: 600;
	border-radius: 6px;
	padding: 16px 26px;
	transition: background-color 0.35s ease-in-out, box-shadow 0.35s ease-in-out;
}
.balai-landing .elementor-button:hover,
.balai-landing .elementor-button:focus-visible{
	background-color: #084A86;
	box-shadow: 0 10px 24px rgba(11, 92, 171, 0.22);
}

.landing-content-classic{ padding: 80px 0; }
.landing-content-classic h1{ font-size: 40px; margin-bottom: 24px; }

.status-page{ padding: 100px 0; }
.status-page-box{
	max-width: 720px;
	margin: 0 auto;
	padding: 60px 40px;
	text-align: center;
	background: #F5F5F5;
	border-radius: 20px;
}
.status-page-icon{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	margin: 0 auto 24px;
	font-size: 30px;
	color: var(--accent-color);
	background: rgba(11, 92, 171, 0.1);
	border-radius: 50%;
}
.status-page-kicker{
	margin-bottom: 8px;
	font-weight: 600;
	color: var(--accent-color);
}
.status-page h1{
	font-size: 36px;
	margin-bottom: 16px;
}
.status-page-label{
	margin: 24px 0 4px;
	font-size: 14px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
.status-page-period{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 0 0 32px;
	padding: 0;
	list-style: none;
	font-weight: 600;
	color: var(--primary-color);
}
.status-page-period li + li::before{
	content: '–';
	margin-right: 10px;
}

/* --- Widget Elementor "Countdown Promo" (balai-landing/countdown-widget.php) ---
   Banner berlapis biru→toska, kartu hitung mundur menumpuk di tepi bawah
   banner, gambar, lalu pita CTA. Setiap bagian opsional. */
.lp-cd{
	--lp-cd-radius: 24px;
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.lp-cd-banner{
	position: relative;
	padding: 72px 56px;
	border-radius: var(--lp-cd-radius);
	background: var(--accent-color) no-repeat center / cover;
	overflow: hidden;
	color: var(--white-color);
}
.lp-cd-banner::before{
	content: '';
	position: absolute;
	inset: 0;
	/* Sama dengan overlay banner tema (.hero-slide::before). */
	background: linear-gradient(90deg, rgba(11, 92, 171, 0.92) 0%, rgba(11, 92, 171, 0.75) 45%, rgba(23, 176, 167, 0.55) 100%);
}
/* Ruang untuk kartu countdown yang menumpuk di tepi bawah banner. */
.lp-cd.has-banner .lp-cd-banner:has(+ .lp-cd-timer){ padding-bottom: 136px; }
.lp-cd-banner-teks{
	position: relative;
	max-width: 720px;
}
.lp-cd-kicker{
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 14px;
	font-size: 15px;
	font-weight: 600;
	color: var(--white-color);
}
.lp-cd-kicker::before{
	content: '';
	width: 8px;
	height: 8px;
	border-radius: 2px;
	background: var(--accent-secondary-color);
}
.lp-cd .lp-cd-title{
	margin: 0;
	font-size: 46px;
	font-weight: 700;
	line-height: 1.15em;
	color: var(--white-color);
}
.lp-cd-desc{
	margin: 16px 0 0;
	font-size: 17px;
	line-height: 1.6em;
	color: rgba(255, 255, 255, 0.88);
}

.lp-cd-timer{
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px 32px;
	padding: 28px 32px;
	border-radius: 20px;
	background: var(--white-color);
	box-shadow: 0 18px 44px rgba(11, 92, 171, 0.16);
}
.lp-cd.has-banner .lp-cd-banner + .lp-cd-timer{
	margin: -136px 40px 0;
}
.lp-cd-timer-label{
	margin: 0;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.3em;
	color: var(--primary-color);
}
.lp-cd-timer-when{
	margin: 6px 0 0;
	font-size: 15px;
	color: var(--text-color);
}
.lp-cd-timer-when i{
	margin-right: 4px;
	color: var(--accent-secondary-color);
}
.lp-cd-tiles{
	display: grid;
	grid-template-columns: repeat(4, 96px);
	gap: 12px;
}
.lp-cd-tile{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 16px 8px 14px;
	border-radius: 16px;
	background: #EEF4FB;
	text-align: center;
}
.lp-cd-num{
	font-size: 40px;
	font-weight: 700;
	line-height: 1em;
	font-variant-numeric: tabular-nums;
	color: var(--accent-color);
}
.lp-cd-unit{
	font-size: 14px;
	font-weight: 500;
	color: var(--text-color);
}
.lp-cd-done{
	display: none;
	margin: 0;
	font-size: 22px;
	font-weight: 700;
	color: var(--accent-color);
}
.lp-cd-done i{ color: var(--accent-secondary-color); margin-right: 6px; }
.lp-cd-timer.is-done .lp-cd-tiles,
.lp-cd-timer.is-done .lp-cd-timer-label{ display: none; }
.lp-cd-timer.is-done .lp-cd-done{ display: block; }
.lp-cd-timer-empty{
	justify-content: center;
	font-size: 15px;
	color: var(--text-color);
	border: 2px dashed #C9D6E4;
	box-shadow: none;
}

.lp-cd-image{
	margin: 0;
	text-align: center;
}
.lp-cd .lp-cd-image-img{
	display: inline-block;
	/* Lebar tegas: gambar lazy WordPress (sizes="auto") berukuran sementara
	   3000px sebelum dimuat; poster juga tidak perlu lebih lebar dari ini. */
	width: min(100%, 760px);
	height: auto;
	border-radius: 20px;
}

.lp-cd-cta{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px 32px;
	padding: 40px 48px;
	border-radius: var(--lp-cd-radius);
	background: linear-gradient(120deg, var(--accent-color) 0%, var(--accent-color) 40%, #0E7F79 100%);
	color: var(--white-color);
}
.lp-cd-cta-teks{
	flex: 1 1 380px;
	min-width: 0;
}
.lp-cd .lp-cd-cta-title{
	margin: 0;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.25em;
	color: var(--white-color);
}
.lp-cd-cta-desc{
	margin: 8px 0 0;
	font-size: 16px;
	line-height: 1.6em;
	color: rgba(255, 255, 255, 0.88);
}
.lp-cd-cta .btn-default.btn-highlighted:hover{
	background-color: #E6F0FA;
	border-color: #E6F0FA;
	color: var(--accent-color);
}

@media only screen and (max-width: 991px){
	.lp-cd-banner{ padding: 56px 36px; }
	.lp-cd.has-banner .lp-cd-banner:has(+ .lp-cd-timer){ padding-bottom: 120px; }
	.lp-cd.has-banner .lp-cd-banner + .lp-cd-timer{ margin: -96px 20px 0; }
	.lp-cd .lp-cd-title{ font-size: 36px; }
	.lp-cd-timer{ justify-content: center; text-align: center; }
	.lp-cd-timer-teks{ flex: 1 1 100%; }
	.lp-cd-cta{ padding: 32px; }
}

@media only screen and (max-width: 575px){
	.lp-cd{ gap: 28px; --lp-cd-radius: 18px; }
	.lp-cd-banner{ padding: 40px 22px; }
	.lp-cd.has-banner .lp-cd-banner:has(+ .lp-cd-timer){ padding-bottom: 100px; }
	.lp-cd.has-banner .lp-cd-banner + .lp-cd-timer{ margin: -72px 12px 0; }
	.lp-cd .lp-cd-title{ font-size: 28px; }
	.lp-cd-desc{ font-size: 16px; }
	.lp-cd-timer{ padding: 22px 16px; }
	.lp-cd-timer-label{ font-size: 18px; }
	.lp-cd-tiles{ grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; width: 100%; }
	.lp-cd-tile{ padding: 12px 4px 10px; border-radius: 12px; }
	.lp-cd-num{ font-size: 28px; }
	.lp-cd-unit{ font-size: 12px; }
	.lp-cd-cta{ padding: 28px 22px; }
	.lp-cd .lp-cd-cta-title{ font-size: 22px; }
	.lp-cd-cta .btn-default{ width: 100%; }
}

@media only screen and (max-width: 991px){
	.page-topbar{ height: var(--page-topbar-h-mobile, 90px); }
}

@media only screen and (max-width: 767px){
	.status-page{ padding: 60px 0; }
	.status-page-box{ padding: 40px 20px; }
	.status-page h1{ font-size: 28px; }
	.landing-content-classic{ padding: 50px 0; }
	.landing-content-classic h1{ font-size: 30px; }
}

/************************************/
/***  404 — Halaman Tidak Ditemukan ***/
/************************************/

/* 404.php. Satu elemen menonjol: angka 404 sebagai tenunan (SVG) dengan
   satu benang terlepas. Sisanya tenang: teks rata kiri, satu baris tujuan. */

.nf-hero{
	position: relative;
	overflow: hidden;
	padding: 210px 0 120px;
	color: var(--white-color);
	background-color: var(--primary-color);
	/* Tekstur anyaman sangat halus di latar */
	background-image:
		repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 14px),
		repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 14px);
}

.nf-grid{
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: 72px;
	align-items: center;
}

.nf-copy h1{
	font-size: 50px;
	color: var(--white-color);
	margin-bottom: 20px;
}

.nf-lead{
	max-width: 34em;
	font-size: 18px;
	line-height: 1.65em;
	color: rgba(255, 255, 255, 0.74);
	margin-bottom: 28px;
}

.nf-path{
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 12px;
	margin: 0 0 36px;
	padding: 12px 16px;
	font-size: 15px;
	background: rgba(255, 255, 255, 0.06);
	border-left: 3px solid var(--accent-secondary-color);
	border-radius: 0 6px 6px 0;
}
.nf-path dt{
	font-weight: 400;
	color: rgba(255, 255, 255, 0.6);
}
.nf-path dd{
	margin: 0;
	font-weight: 600;
	color: var(--white-color);
	word-break: break-all;
}

.nf-actions{
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.nf-search-btn{
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 16px 26px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1em;
	color: var(--white-color);
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 6px;
	transition: border-color 0.3s ease, background-color 0.3s ease;
}
.nf-search-btn:hover{
	border-color: var(--white-color);
	background-color: rgba(255, 255, 255, 0.08);
}

.nf-weave-svg{
	display: block;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.35));
}

/* Satu momen gerak: pakan ditenun baris demi baris, lalu benangnya terlepas. */
@keyframes nf-weave-in{
	from{ transform: translateX(-24px); opacity: 0; }
	to{ transform: none; opacity: 1; }
}
@keyframes nf-thread-out{
	to{ stroke-dashoffset: 0; }
}
.nf-weft{
	animation: nf-weave-in 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) both;
	animation-delay: calc(var(--row) * 70ms + 150ms);
}
.nf-thread{
	stroke-dasharray: 420;
	stroke-dashoffset: 420;
	animation: nf-thread-out 0.9s ease-out 1.1s forwards;
}
@media (prefers-reduced-motion: reduce){
	.nf-weft{ animation: none; }
	.nf-thread{ animation: none; stroke-dashoffset: 0; }
}

.nf-routes{
	padding: 90px 0 100px;
	background: var(--white-color);
}
.nf-routes h2{
	font-size: 25px;
	margin-bottom: 32px;
}
.nf-route-list{
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--divider-color);
}
.nf-route-list li + li{
	border-left: 1px solid var(--divider-color);
}
.nf-route{
	display: block;
	height: 100%;
	padding: 28px 28px 8px;
	text-decoration: none;
}
.nf-route-list li:first-child .nf-route{ padding-left: 0; }
.nf-route i{
	display: block;
	margin-bottom: 18px;
	font-size: 22px;
	color: var(--accent-secondary-color);
}
.nf-route-title{
	font-size: 20px;
	margin-bottom: 8px;
	transition: color 0.25s ease;
}
.nf-route-desc{
	margin: 0;
	font-size: 15px;
	line-height: 1.6em;
	color: var(--text-color);
}
.nf-route:hover .nf-route-title,
.nf-route:focus-visible .nf-route-title{
	color: var(--accent-color);
	text-decoration: underline;
	text-underline-offset: 4px;
}

@media only screen and (max-width: 1199px){
	.nf-grid{ gap: 48px; }
	.nf-copy h1{ font-size: 42px; }
}

@media only screen and (max-width: 991px){
	.nf-hero{ padding: 150px 0 80px; }
	.nf-grid{ grid-template-columns: 1fr; }
	.nf-weave{ max-width: 520px; }
	.nf-route-list{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.nf-route-list li:nth-child(3){ border-left: 0; }
	.nf-route-list li:nth-child(n+3){ border-top: 1px solid var(--divider-color); }
	.nf-route-list li:nth-child(odd) .nf-route{ padding-left: 0; }
}

@media only screen and (max-width: 575px){
	.nf-hero{ padding: 130px 0 64px; }
	.nf-copy h1{ font-size: 34px; }
	.nf-lead{ font-size: 16px; }
	.nf-actions > *{ width: 100%; justify-content: center; }
	.nf-routes{ padding: 60px 0 70px; }
	.nf-route-list{ grid-template-columns: 1fr; }
	.nf-route-list li + li{ border-left: 0; border-top: 1px solid var(--divider-color); }
	.nf-route{ padding: 24px 0 20px; }
}

/************************************/
/***  Aksesibilitas — Focus Ring  ***/
/************************************/

/* Sengaja ditaruh paling akhir. Ada 10 aturan `outline: none/0` tersebar di
   file ini — yang paling merusak `a:focus{outline:0}` di §02, yang mematikan
   penanda fokus SETIAP tautan di seluruh situs — plus 23 lagi di
   bootstrap.min.css. Menambalnya satu per satu di file 18k baris itu rapuh dan
   mudah bocor lagi; satu blok di ujung cascade jauh lebih mudah dipelihara.
   `!important` dipakai HANYA pada properti outline: tidak ada style lain yang
   punya alasan sah untuk menimpa penanda fokus. */

:root{
	--focus-ring-color			: var(--accent-color);	/* #0B5CAB — 6.7:1 di atas putih  */
	--focus-ring-color-invert	: var(--white-color);	/* #FFFFFF — 16.3:1 di atas #202020 */
	--focus-ring-width			: 3px;
	--focus-ring-offset			: 3px;
	--header-scroll-offset		: 96px;
}

/* Ring dasar. Hanya menyala untuk navigasi papan ketik — klik tetikus tidak
   memicu :focus-visible, jadi tampilan bagi pengguna mouse tidak berubah.
   Pengecualian bawaan spesifikasi: kolom isian teks tetap menampilkan ring
   walau diklik, karena elemen yang menerima ketikan wajib menandai fokusnya. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.btn:focus-visible,
.form-control:focus-visible{
	outline: var(--focus-ring-width) solid var(--focus-ring-color) !important;
	outline-offset: var(--focus-ring-offset) !important;
}

/* Permukaan gelap: ring biru cuma 2.4:1 di atas #202020 — gagal WCAG 1.4.11
   yang mensyaratkan 3:1 untuk komponen non-teks. Dibalik jadi putih. */
.dark-section :focus-visible,
.main-footer :focus-visible,
.main-footer-metal :focus-visible,
.page-header :focus-visible,
.mobile-nav :focus-visible,
.layanan-card :focus-visible,
header.main-header .header-sticky:not(.active) :focus-visible{
	outline-color: var(--focus-ring-color-invert) !important;
}

/* Kecuali panel dropdown dan mega-menu: latarnya putih walau header di atasnya
   transparan di depan hero gelap — ring putih akan lenyap di sana. */
header.main-header .header-sticky:not(.active) .main-menu ul ul :focus-visible{
	outline-color: var(--focus-ring-color) !important;
}

/* Header yang ter-pin menutupi elemen yang baru saja di-tab. Tanpa ini
   pengguna papan ketik kehilangan jejak fokusnya di balik bar. */
a,
button,
input,
select,
textarea,
summary,
[tabindex]{
	scroll-margin-top: var(--header-scroll-offset);
}

.accordion-body li:last-child {
	margin-bottom: 0;
}

.accordion-body ul {
	margin-top: 16px;
}

.accordion-body ul li {
	margin: 0 0 16px;
}
.accordion-body li::marker {
	color: var(--accent-secondary-color);
}
.accordion-body ul a {
	color: var(--accent-color);
	font-weight: 500;
	text-decoration: underline;
}
.accordion-body li {
	margin-bottom: 16px;
}

.accordion-body li:first-child {
	margin-top: 16px;
}

/************************************/
/***            Pop-Up            ***/
/************************************/

/* Poster dari Pop-Up Editor (mu-plugin balai-popup, template-parts/popup.php,
   assets/js/popup.js). Lebar mengikuti rasio gambar (--bp-ratio) supaya poster
   potret tetap utuh di layar pendek tanpa bidang kosong di sisinya. */
.bp-popup{
	position: fixed;
	inset: 0;
	/* Di atas widget live chat Sociomile (z-index 100000000). */
	z-index: 100000010;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 32px 16px;
}

.bp-popup[hidden]{
	display: none;
}

.bp-popup-backdrop{
	position: absolute;
	inset: 0;
	background: rgba(32, 32, 32, 0.72);
	backdrop-filter: blur(3px);
	opacity: 0;
	transition: opacity 0.25s ease-out;
}

.bp-popup-dialog{
	position: relative;
	width: min(560px, 100%, calc((100vh - 64px) * var(--bp-ratio, 0.8)));
	width: min(560px, 100%, calc((100dvh - 64px) * var(--bp-ratio, 0.8)));
	opacity: 0;
	transform: translateY(12px) scale(0.98);
	transition: opacity 0.25s ease-out, transform 0.25s ease-out;
}

.bp-popup.is-open .bp-popup-backdrop{
	opacity: 1;
}

.bp-popup.is-open .bp-popup-dialog{
	opacity: 1;
	transform: none;
}

.bp-popup-media{
	display: block;
	border-radius: 12px;
	overflow: hidden;
	background: var(--white-color);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

.bp-popup-img{
	display: block;
	width: 100%;
	height: auto;
}

a.bp-popup-media:focus-visible{
	outline: 3px solid var(--accent-secondary-color);
	outline-offset: 3px;
}

.bp-popup-close{
	position: absolute;
	top: -14px;
	right: -14px;
	z-index: 1;
	width: 40px;
	height: 40px;
	border: none;
	border-radius: 50%;
	background: var(--white-color);
	color: var(--primary-color);
	font-size: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
	cursor: pointer;
	transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.bp-popup-close:hover{
	background: var(--accent-color);
	color: var(--white-color);
}

.bp-popup-close:focus-visible{
	outline: 3px solid var(--accent-secondary-color);
	outline-offset: 2px;
}

body.bp-popup-open{
	overflow: hidden;
}

/* Widget live chat disembunyikan selama pop-up terbuka. */
body.bp-popup-open .custom_widget_container{
	visibility: hidden;
}

@media only screen and (max-width: 575px){
	.bp-popup-close{
		top: -12px;
		right: -6px;
	}
}

@media (prefers-reduced-motion: reduce){
	.bp-popup-backdrop,
	.bp-popup-dialog,
	.bp-popup-close{
		transition: none;
	}
	.bp-popup-dialog{
		transform: none;
	}
}

/************************************/
/***   Widget live chat Sociomile ***/
/************************************/

/* Skrip Sociomile (footer.php) memasang gambar dengan inline
   "width: 200px !important" — tidak bisa dikalahkan width dari sini,
   tetapi max-width tetap membatasinya. Dikecilkan agar tidak menutupi isi. */
.custom_widget_container{
	width: auto !important;
	height: auto !important;
	/* Bawaan Sociomile menempel ke tepi bawah layar. */
	bottom: 40px !important;
	line-height: 0;
}

.custom_widget_container .custom_widget{
	max-width: 130px !important;
	height: auto !important;
}

@media only screen and (max-width: 991px){
	.custom_widget_container .custom_widget{
		max-width: 110px !important;
	}
}

@media only screen and (max-width: 575px){
	.custom_widget_container .custom_widget{
		max-width: 90px !important;
	}
}

/************************************/
/***  Pemulihan aturan responsif  ***/
/************************************/

/* Aturan @media di bagian Responsive atas (sekitar baris 6000-7500 dan
   13700-13900) ditulis SEBELUM aturan dasarnya. Spesifisitasnya sama, jadi
   aturan dasar yang muncul belakangan selalu menang dan tampilan ponsel/tablet
   kembali ke versi desktop (grid 3 kolom di ponsel, judul terlalu besar,
   padding desktop). Blok ini mengulang aturan responsif tersebut setelah
   semua aturan dasar. Urutan: lebar terbesar dulu, supaya yang lebih kecil
   menang. Aturan baru: tulis @media SETELAH aturan dasarnya. */

@media only screen and (max-width: 1024px){
	.akses-cepat-grid{ grid-template-columns: repeat(3, 1fr); }
	.akses-cepat-item-wide{ grid-column: auto; }
}

@media only screen and (max-width: 991px){
	.layanan-grid{ --layanan-card-min: 440px; --layanan-pad: 30px; }
	.akses-cepat{ padding: 70px 0; }
	.hm-publikasi{ padding: 70px 0; }
	.lyn-kat{ padding: 56px 0 70px; }
	.lyn-kat-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.lyn-kat-lead{ font-size: 16px; }
	.lp-section{ padding: 60px 0 70px; }
	.tk-section{ padding: 0 0 70px; }
	.tk-tab{ justify-content: flex-start; }
	.tk-mitra-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.lp-grid{ grid-template-columns: minmax(0, 1fr); }
	.layanan-grid-action{ margin-top: 20px; }
	.tk-action{ margin-top: 20px; }
	.srl-section{ padding: 46px 0 70px; }
	.srl-bar{ align-items: flex-start; }
	.sm-section{ padding: 70px 0; }
	.sm-rail{ flex-direction: row; }
	.sm-rail .nav-link{ padding: 16px 18px; }
	.sm-rail-aksi{ margin-top: 16px; }
	.sm-button-prev{ left: 0; }
	.sm-button-next{ right: 0; }
	.mk-statement{ padding: 60px 0; }
	.mk-statement-quote{ font-size: 26px; }
	.mk-nilai{ padding: 60px 0 50px; }
	.mk-nilai-list{ grid-template-columns: minmax(0, 1fr); }
	.mk-formal{ padding: 0 0 70px; }
	.mk-formal-box{ padding: 30px 26px; }
	.dk-section{ padding: 60px 0 70px; }
	.ev-section{ padding: 60px 0 70px; }
	.ph-section{ padding: 60px 0 70px; }
	.pi-section{ padding: 60px 0 70px; }
	.pk-section{ padding: 60px 0 70px; }
	.rm-section{ padding: 60px 0 70px; }
	.pi-aside{ padding-right: 0; position: static; }
	.rm-aside{ padding-right: 0; position: static; }
	.tm-testimoni{ padding: 60px 0 50px; }
	.tm-mitra{ padding: 0 0 70px; }
	.tm-mitra-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.dk-tautan{ grid-template-columns: minmax(0, 1fr); }
	.ph-tahun{ gap: 18px; grid-template-columns: minmax(0, 1fr); }
	.lyn-intro{ padding: 42px 0 46px; }
	.lyn-intro-title{ font-size: 27px; }
	.lyn-list{ padding: 56px 0 70px; }
	.lyn-cat-head{ padding-right: 0; position: static; }
	.lyn-cat + .lyn-cat{ margin-top: 40px; padding-top: 40px; }
	.capaian-section{ padding: 70px 0; }
	.ct-rail{ flex-direction: row; }
	.ct-rail .nav-link{ padding: 16px 18px; }
	.ct-client-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ct-stat-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ct-quote-button-prev{ left: 0; }
	.ct-quote-button-next{ right: 0; }
	.footer-slim{ padding: 52px 0 0; }
	.galeri-split{ padding: 70px 0; }
	.galeri-split-content{ max-width: 100%; }
	.galeri-crosslink{ padding: 26px 24px; }
	.akses-cepat-grid{ grid-template-columns: repeat(2, 1fr); }
	.akses-cepat-head{ margin-bottom: 36px; }
	.layanan-card-title{ font-size: 15px; }
}

@media only screen and (max-width: 767px){
	.layanan-grid{ --layanan-card-min: 400px; --layanan-pad: 26px; }
	.sejarah-modal-media img{ height: 210px; }
}

@media only screen and (max-width: 575px){
	.akses-cepat{ padding: 60px 0; }
	.akses-cepat-grid{ grid-template-columns: 1fr; }
	.akses-cepat-item{ padding: 22px 20px; }
	.hm-publikasi{ padding: 60px 0; }
	.sm-section{ padding: 60px 0; }
	.srl-row{ align-items: flex-start; gap: 14px; }
	.srl-chip{ font-size: 14px; padding: 9px 16px; }
	.alur-kanal-list{ grid-template-columns: minmax(0, 1fr); }
	.dok-grid{ grid-template-columns: minmax(0, 1fr); }
	.alur-toggle{ gap: 12px; padding: 16px 18px; }
	.alur-panel{ padding: 4px 18px 20px; }
	.tk-mitra-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mk-statement-quote{ font-size: 22px; }
	.mk-nilai-item{ gap: 14px; }
	.tm-mitra-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ev-item{ gap: 16px; grid-template-columns: minmax(0, 1fr); }
	.ev-tanggal{ flex-direction: row; gap: 8px; padding: 8px 14px; }
	.ev-tanggal-hari{ font-size: 20px; }
	.rm-row{ gap: 12px 16px; grid-template-columns: minmax(0, 1fr) 34px; }
	.pk-file{ gap: 14px; grid-template-columns: 56px minmax(0, 1fr) auto; padding: 14px 16px; }
	.lyn-kat-grid{ grid-template-columns: minmax(0, 1fr); }
	.lyn-intro-title{ font-size: 23px; }
	.lyn-grid{ grid-template-columns: minmax(0, 1fr); }
	.capaian-section{ padding: 60px 0; }
	.ct-client-grid{ grid-template-columns: minmax(0, 1fr); }
	.ct-stat-grid{ grid-template-columns: minmax(0, 1fr); }
	.ct-stat-num{ font-size: 30px; }
	.ct-quote-button-next{ display: inline-flex; position: static; transform: none; }
	.ct-quote-button-prev{ display: inline-flex; position: static; transform: none; }
	.footer-slim{ padding: 44px 0 0; }
	.galeri-split{ padding: 60px 0; }
	.galeri-split-actions{ gap: 12px; }
	.galeri-crosslink{ align-items: stretch; }
}

/************************************/
/***  Slider: slide terpotong      ***/
/************************************/

/* function.js (balaiMarkPeek) mengukur lebar slide yang terpotong di tepi
   slider (--peek-l / --peek-r). Area itu memudar bertahap dengan mask
   linear-gradient: penuh di batas kartu, transparan di tepi, sehingga
   potongannya menyatu dengan latar tanpa garis tajam. Kartu yang tampil
   utuh tidak ikut memudar. */
.swiper.has-peek{
	/* Di area potongan: 30% di batas kartu, turun bertahap (ease-out) ke 0
	   di tepi, sehingga tepi kartu tidak tampak sebagai garis; selebihnya
	   penuh. */
	--peek-mask: linear-gradient(90deg,
		transparent 0,
		rgba(0, 0, 0, 0.02) calc(var(--peek-l, 0px) * 0.25),
		rgba(0, 0, 0, 0.07) calc(var(--peek-l, 0px) * 0.5),
		rgba(0, 0, 0, 0.16) calc(var(--peek-l, 0px) * 0.75),
		rgba(0, 0, 0, 0.3) var(--peek-l, 0px),
		#000 calc(var(--peek-l, 0px) + 1px),
		#000 calc(100% - var(--peek-r, 0px) - 1px),
		rgba(0, 0, 0, 0.3) calc(100% - var(--peek-r, 0px)),
		rgba(0, 0, 0, 0.16) calc(100% - var(--peek-r, 0px) * 0.75),
		rgba(0, 0, 0, 0.07) calc(100% - var(--peek-r, 0px) * 0.5),
		rgba(0, 0, 0, 0.02) calc(100% - var(--peek-r, 0px) * 0.25),
		transparent 100%);
	-webkit-mask-image: var(--peek-mask);
	mask-image: var(--peek-mask);
}

/************************************/
/***  Tombol melayang sejajar      ***/
/************************************/

/* Text to Speech (kiri bawah) dan live chat Sociomile (kanan bawah) memakai
   jarak tepi dan jarak bawah yang sama, sehingga tepi bawahnya sejajar. */
:root{
	--float-side: 24px;
	--float-bottom: 40px;
}
.tts-float{
	left: var(--float-side);
	bottom: var(--float-bottom);
}
.custom_widget_container{
	right: var(--float-side) !important;
	bottom: var(--float-bottom) !important;
}
@media only screen and (max-width: 767px){
	:root{
		--float-side: 16px;
		--float-bottom: 24px;
	}
	.tts-float{
		left: var(--float-side);
		bottom: var(--float-bottom);
	}
}
/* Ponsel landscape: layar pendek, kedua tombol diperkecil. */
@media only screen and (max-height: 500px) and (orientation: landscape){
	:root{
		--float-side: 16px;
		--float-bottom: 16px;
	}
	.tts-float{
		left: var(--float-side);
		bottom: var(--float-bottom);
	}
	.tts-float-btn{
		width: 46px;
		height: 46px;
		border-radius: 14px;
	}
	.custom_widget_container .custom_widget{
		max-width: 76px !important;
	}
}

/************************************/
/***  Menu header 992-1279px       ***/
/************************************/

/* Label menu sempat terpecah dua baris ("Tentang / Kami") di 992-1279px.
   - 992-1179px (mis. iPad landscape 1024): enam menu + logo + tombol tidak
     muat satu baris, jadi memakai hamburger seperti tablet.
   - 1180-1279px: menu tampil, label dikunci satu baris, lebih kecil dan
     rapat; logo tidak ikut menyusut. */
@media only screen and (min-width: 992px) and (max-width: 1179px){
	.navbar.navbar-expand-lg .navbar-collapse.main-menu{ display: none !important; }
	.navbar-toggle{ display: flex; }
	.header-actions{ margin-left: auto; }
	.header-actions + .navbar-toggle{ margin-left: 10px; }
}
@media only screen and (min-width: 1180px) and (max-width: 1279px){
	.navbar-brand{ flex-shrink: 0; }
	.main-menu ul#menu > li{ margin-left: 18px; }
	.main-menu ul#menu > li > a{
		font-size: 15px;
		white-space: nowrap;
	}
	.main-menu ul#menu > li.submenu > a:after{ margin-left: 5px; }
}

/************************************/
/***  Ponsel landscape            ***/
/************************************/

/* Tablet (576-991px): judul banner Beranda sedikit lebih kecil. */
@media only screen and (min-width: 576px) and (max-width: 991px){
	.hero-slider .hero-content .section-title h1{ font-size: 38px; }
}

/* Layar pendek (tinggi <= 500px, mis. 844x390): judul banner dan judul
   halaman diperkecil, banner Beranda tidak dipaksa setinggi 620px. */
@media only screen and (max-width: 991px) and (max-height: 500px) and (orientation: landscape){
	.hero-slider .hero-slide{
		min-height: 0;
		padding: 112px 0 56px;
	}
	.hero-slider .hero-content .section-title h1{
		font-size: 30px;
		line-height: 1.2em;
	}
	.hero-slider .hero-content .section-title p{
		margin-top: 12px;
		font-size: 15px;
		line-height: 1.6em;
	}
	.hero-slider .hero-content .hero-slide-btn{ margin-top: 22px; }
	.page-header-box h1,
	.page-header-box .page-header-title{ font-size: 28px; }
	.lyn-intro-title{ font-size: 24px; }
}

/* Daftar tautan PPID (template-parts/ppid/links.php) di ponsel: ikon tetap
   di samping teks. Aturan lama menumpuknya (ikon di atas teks). */
@media only screen and (max-width: 575px){
	.ip-doc-list li a:not(.doc-action){
		flex-direction: row;
		gap: 12px;
		padding: 14px 16px;
	}
}

/* Panah slider Media Sosial yang menimpa foto: saat nonaktif (awal/akhir
   slider) disembunyikan, tidak tampil samar di atas foto. */
.sm-button-prev.swiper-button-disabled,
.sm-button-next.swiper-button-disabled{
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

/* Header ponsel sangat sempit (<375px, mis. 320px atau label bahasa "EN"):
   hamburger sempat turun ke baris kedua. Logo dan tombol sedikit diperkecil. */
@media only screen and (max-width: 374px){
	.navbar-brand,
	header.main-header .header-sticky.active .navbar-brand{
		width: 104px;
		flex-shrink: 0;
	}
	.header-actions{ gap: 6px; }
	.header-actions + .navbar-toggle{
		width: 38px;
		height: 38px;
		margin-left: 6px;
	}
	.header-search-btn{ width: 38px; }
	.header-search-btn,
	.balai-lang summary{ height: 38px; }
	.balai-lang summary{
		gap: 4px;
		padding: 0 8px;
		font-size: 13px;
	}
}
@media only screen and (max-width: 300px){
	.navbar-brand,
	header.main-header .header-sticky.active .navbar-brand{ width: 88px; }
}

/************************************/
/***  Folder dokumen (accordion)   ***/
/************************************/

/* Portal Akses Informasi & Cari Layanan (inc/documents.php,
   function.js docFolderSet). Baris folder = tombol selebar baris dengan
   tata letak .pk-file; isinya daftar berkas dengan Pratinjau/Unduh. */
.pk-file.pk-folder{
	display: block;
	padding: 0;
}
.doc-folder-toggle{
	display: grid;
	grid-template-columns: 62px minmax(0, 1fr) auto;
	align-items: center;
	gap: 20px;
	width: 100%;
	padding: 18px 22px;
	border: 0;
	background: transparent;
	color: inherit;
	text-align: left;
	cursor: pointer;
}
.doc-folder-toggle:focus-visible{
	outline: 2px solid var(--accent-color);
	outline-offset: -2px;
	border-radius: 10px;
}
.doc-folder-toggle .pk-file-judul{ display: block; }
.doc-folder-count{
	display: inline-flex;
	gap: 4px;
	margin-left: 10px;
	padding-left: 10px;
	border-left: 1px solid var(--divider-color);
}
.doc-folder-chev{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(11, 92, 171, 0.08);
	color: var(--accent-color);
	font-size: 13px;
	transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}
.doc-folder-toggle:hover .doc-folder-chev,
.pk-folder.is-open .doc-folder-chev{
	background: var(--accent-color);
	color: var(--white-color);
}
.pk-folder.is-open .doc-folder-chev{ transform: rotate(180deg); }
.pk-folder.is-open{ border-color: var(--accent-color); }

.doc-folder-body{
	padding: 0 22px 18px 104px;
}
.doc-folder-body[hidden]{ display: none; }
.doc-folder-list{
	margin: 0;
	padding: 6px 0 0;
	list-style: none;
	border-top: 1px solid var(--divider-color);
}
.doc-folder-item{
	display: grid;
	grid-template-columns: 52px minmax(0, 1fr) auto;
	align-items: center;
	gap: 14px;
	margin: 0;
	padding: 10px 12px;
	border-radius: 8px;
	transition: background-color 0.3s ease;
}
.doc-folder-item + .doc-folder-item{ margin-top: 2px; }
.doc-folder-item:hover{ background: #F5F8FC; }
/* Berkas yang cocok dengan kata kunci pencarian. */
.doc-folder-item.is-match{
	background: #EEF4FB;
	box-shadow: inset 3px 0 0 var(--accent-color);
}
.doc-folder-jenis{
	display: flex;
	align-items: center;
	justify-content: center;
	height: 26px;
	border-radius: 5px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--white-color);
	background: var(--text-color);
}
/* Warna label sama dengan baris dokumen (.pk-file-pdf dkk.). */
.doc-folder-jenis.pk-file-pdf{ background: #B33A3A; }
.doc-folder-jenis.pk-file-docx,
.doc-folder-jenis.pk-file-doc,
.doc-folder-jenis.pk-file-online{ background: var(--accent-color); }
.doc-folder-jenis.pk-file-xlsx{ background: #1B7A4B; }
.doc-folder-teks{ min-width: 0; }
.doc-folder-judul{
	display: block;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.45em;
	color: var(--primary-color);
}
.doc-folder-size{
	display: block;
	margin-top: 2px;
	font-size: 12.5px;
	color: var(--text-color);
}
.doc-folder-item .doc-action{ width: 34px; height: 34px; font-size: 13px; }

@media only screen and (max-width: 575px){
	.doc-folder-toggle{
		grid-template-columns: 56px minmax(0, 1fr) auto;
		gap: 14px;
		padding: 14px 16px;
	}
	.doc-folder-count{
		margin-left: 8px;
		padding-left: 8px;
	}
	.doc-folder-body{ padding: 0 12px 14px; }
	.doc-folder-item{
		grid-template-columns: 44px minmax(0, 1fr) auto;
		gap: 10px;
		padding: 10px 8px;
	}
	.doc-folder-judul{ font-size: 14px; }
}
@media (prefers-reduced-motion: reduce){
	.doc-folder-chev{ transition: none; }
}