/* ----------------------------------------------------------------------------------------
* Author        : Awaiken
* Template Name : Toplax - Factory & Industry HTML Template
* 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 Service css
07. Our Story css
08. What We Do css
09. Our Work css
10. Our Process css
11. Our Pricing css
12. Our Testimonial css
13. Our Blog css
14. Footer css
15. About Us Page css
16. Services Page css
17. Services Single css
18. Blog Archive css
19. Blog Single css
20. Project Page css
21. Project Single css
22. Team Page css
23. Team Page css
24. Pricing Page css
25. Testimonial Page css
26. Image Gallery css
27. Video Gallery css
28. FAQs Page css
29. Contact Us Page css
30. 404 Page css
31. Responsive css
-------------------------------------------------------------------------------------- */

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

:root{
	--primary-color			: #00035E;
	--dark-color			: #00035E;
	--secondary-color		: #F5F5F5;
	--text-color			: #000000;
	--accent-color			: #00A2E9;
	--white-color			: #FFFFFF;
	--divider-color			: #EBEBEB;
	--dark-divider-color	: #FFFFFF1A;
	--error-color			: rgb(230, 87, 87);
	--default-font			: "Manrope", sans-serif;
}

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

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

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

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

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;
}

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

.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-block;
	font-size: 16px;
	font-weight: 600;
	line-height: 0.6em;
	text-transform: capitalize;
	color: var(--primary-color);
	background-color: var(--accent-color);
	border-radius: 10px;
	padding: 2px 40px 2px 2px;
	border: none;
	overflow: hidden;
	transition: all 0.5s ease-in-out;
}

.btn-default:hover{
	background-color: transparent;
}

.btn-default::before{
	content: '';
	position: absolute;
	top: 50%;
	right: 0;
	bottom: 0;
	width: 12px;
	height: 12px;
	background-image: url('../images/arrow-white.svg');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 24px auto;
	transform: translate(-15px, -50%);
	transition: all 0.4s ease-in-out;
	z-index: 1;
}

.btn-default:hover::before{
	transform: translate(-15px, -50%) rotate(45deg);
}

.btn-default::after{
	content: '';
    display: block;
    position: absolute;
	top: 0;
    left: auto;
	right: 0;
    bottom: 0;
	width: 0;
	height: 100%;
	border-radius: 8px;
    background: var(--primary-color);
    transition: all 0.4s ease-in-out;
	z-index: 0;
}

.btn-default:hover::after{
	width: 100%;
	left: 0;
	right: auto;
}

.btn-default span{
	position: relative;
	display: inline-block;
	font-size: 16px;
	font-weight: 600;
	line-height: 1em;
	background-color: var(--white-color);
	color: var(--primary-color);
	border-radius: 8px;
	padding: 15px 20px;
	overflow: hidden;
	z-index: 1;
	transition: all 0.5s ease-in-out;
}

.btn-default:hover span{
	background-color: transparent;
	color: var(--primary-color);
}

.btn-default span::after{
	content: '';
    display: block;
    position: absolute;
	top: 0;
    left: auto;
	right: 0;
    bottom: 0;
	width: 0;
	height: 100%;
	border-radius: 8px;
    background: var(--accent-color);
    transition: all 0.4s ease-in-out;
	z-index: -1;
}

.btn-default:hover span::after{
	width: 100%;
	left: 0;
	right: auto;
}

.btn-highlighted{
	background-color: var(--white-color);
}

.btn-highlighted:hover{
	background-color: var(--primary-color);
}

.btn-highlighted::before{
	background-image: url('../images/arrow-dark.svg');
}

.btn-highlighted:hover::before{
	filter: brightness(0) invert(1);
}

.btn-highlighted span{
	color: var(--white-color );
	background-color: var(--accent-color);
}

.btn-highlighted:hover span{
	color: var(--primary-color);
}

.btn-highlighted span::after{
    background: var(--white-color);
}

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

.preloader{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1000;
	background-color: var(--accent-color);
	display: flex;
	align-items: center;
	justify-content: center;
}

.loading-container,
.loading{
	height: 100px;
	position: relative;
	width: 100px;
	border-radius: 100%;
}

.loading-container{
	margin: 40px auto;
}

.loading{
	border: 1px solid transparent;
	border-color: transparent var(--white-color) transparent var(--white-color);
	animation: rotate-loading 1.5s linear 0s infinite normal;
	transform-origin: 50% 50%;
}

.loading-container:hover .loading,
.loading-container .loading{
	transition: all 0.5s ease-in-out;
}

#loading-icon{
	position: absolute;
	top: 50%;
	left: 50%;
	max-width: 66px;
	transform: translate(-50%, -50%);
}

@keyframes rotate-loading{
	0%{
		transform: rotate(0deg);
	}

	100%{
		transform: rotate(360deg);
	}
}

.section-row{
	position: relative;
	margin-bottom: 80px;
	z-index: 1;
}

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

.section-title-content{
	margin-left: 90px;
}

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

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

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

.section-title h3{
	display: inline-block;
	position: relative;
	font-size: 14px;
    font-weight: 700;
	line-height: normal;
	letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--primary-color);
	padding-left: 26px;
    margin-bottom: 15px;
}

.section-title h3::before{
	content: '';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    background: url('../images/icon-sub-heading-edu.svg') no-repeat;
    background-position: left center;
    background-size: contain;
    width: 18px;
    height: 18px;
}

.section-title h1{
	font-size: 70px;
	font-weight: 300;
	line-height: 1.2em;
	letter-spacing: -0.01em;
	color: var(--primary-color);
	margin-bottom: 0;
	cursor: none;
}

.section-title h2{
	font-size: 50px;
	font-weight: 300;
	line-height: 1.2em;
	letter-spacing: -0.01em;
	color: var(--primary-color);
	margin-bottom: 0;
	cursor: none;
}


.section-title h1 span,
.section-title h2 span{
	font-weight: 700;
}

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

.section-title-content.dark-section p,
.section-title.dark-section p,
.section-title.dark-section h1,
.section-title.dark-section h2,
.section-title.dark-section h3{
	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		 ****/
/************************************/

.topbar{
	padding: 20px 0;
}

.topbar-contact-info{
	display: flex;
	align-items: center;
	justify-content: end;
}

.topbar-contact-info ul{ 
	margin: 0;
	padding: 0;
	list-style: none;
	margin-right: 60px;
	padding-right: 60px;
	border-right: 1px solid var(--divider-color);
}

.topbar-contact-info ul li{
	display: inline-block;
	margin-right: 15px;
}

.topbar-contact-info ul li:last-child{
	margin-right: 0;
}

.topbar-contact-info ul li a{
	display: flex;
	align-items: center;
	justify-content: center;
}

.topbar-contact-info ul li .icon-box{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: var(--accent-color);
	border-radius: 10px;
	margin-right: 20px;
	transition: all 0.3s ease-in-out;
}

.topbar-contact-info ul li:hover .icon-box{
	background: var(--primary-color);
}

.topbar-contact-info li .icon-box img{
	max-width: 24px;
}

.topbar-contact-info ul li p{
	color: var(--primary-color);
	font-size: 20px;
	font-weight: 700;
	width: calc(100% - 60px);
	margin: 0;
}

.topbar-qoute-btn{
	line-height: 1em;
}

header.main-header{
	position: relative;
	z-index: 100;
}

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

header.main-header .header-sticky.hide{
	transform: translateY(-100%);
	transition: transform 0.3s ease-in-out;
	border-radius: 0;
}

header.main-header .header-sticky.active{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	border-radius: 0;
    transform: translateY(0);
	background: var(--dark-color);
	border-bottom: 1px solid var(--dark-divider-color);
}

.navbar{
	padding: 10px 0px;
	align-items: center;
	background: var(--primary-color);
}

.main-header .header-sticky.active-sticky-header.hide .navbar{
	padding: 20px 0;
}

.main-header .navbar-brand{
	padding: 0;
	margin: 0;
	display: none;
}

.main-header .header-sticky.active-sticky-header.hide .navbar-brand{
	display: block;
	margin-right: 40px;
}

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

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

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

.main-menu ul li.nav-item .nav-link{
	font-size: 16px;
	font-weight: 500;
	padding: 10px 20px;
	color: var(--white-color);
	text-transform: capitalize;
	transition: all 0.3s ease-in-out;
}

.main-menu ul li.nav-item:first-child .nav-link{
	padding-left: 0;
}

.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 .nav-link:hover,
.main-menu ul li .nav-link:focus{
	color: var(--accent-color);
}

.main-menu ul ul{
	visibility: hidden;
	opacity: 0;
	transform: scaleY(0.8);
	transform-origin: top;
	padding: 0;
	margin: 0;
	list-style: none;
	width: 230px;
	border-radius: 20px;
	position: absolute;
	left: 0;
	top: 100%;
	background: var(--accent-color);
	text-align: left;
	transition: all 0.3s ease-in-out;
}

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

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

.main-menu ul li:hover > ul{
	visibility: visible;
	opacity: 1;
	transform: scaleY(1);
    padding: 5px 0;
}

.main-menu ul li.submenu ul li.submenu > a:after{
    content: '\f105';
    float: right;
	transition: all 0.3s ease-in-out;
}

.main-menu ul li.submenu ul li.submenu > a:hover:after{
	transform: rotate(90deg);
}

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

.main-menu ul ul li.nav-item .nav-link{
	color: var(--white-color);
	padding: 4px 20px !important;
	transition: all 0.3s ease-in-out;
}

.main-menu ul li:hover > ul{
	visibility: visible;
	opacity: 1;
	transform: scaleY(1);
    padding: 5px 0;
}

.main-menu ul ul li .nav-link:hover,
.main-menu ul ul li .nav-link:focus{
	color: var(--primary-color);
	background-color: transparent;
	padding: 4px 20px 4px 23px !important;
}

.header-social-links ul{
	list-style: none;
	padding: 0;
	margin: 0;
}

.header-social-links ul li{
	display: inline-block;
	margin-right: 20px;
}

.header-social-links ul li:last-child{
	margin-right: 0;
}

.header-social-links ul li a{
	color: var(--accent-color);
	transition: all 0.3s ease-in-out;
}

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

.header-social-links ul li a i{
	font-size: 20px;
}

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

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

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

.slicknav_icon .slicknav_icon-bar{
	display: block;
	width: 100%;
	height: 3px;
	width: 22px;
	background-color: var(--accent-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);
}

.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: 8px 20px;
	color: var(--dark-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(--primary-color);
}

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

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

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

.slicknav_open > a .slicknav_arrow:after{
    transform: rotate(-180deg);
	color: var(--primary-color);
}

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


.hero{
	padding: 150px 0 40px;
	position: relative;
	background: url('../images/hero-bg.jpg') no-repeat;
	background-position: center center;
	background-size: cover;
}

.hero::before{
    content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(270deg, transparent 42.92%, rgba(0, 0, 0, 0.5) 100%);
    width: 100%;
    height: 100%;
    z-index: 1;
}

.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.hero-slider-layout{
	background: none;
	padding: 0;
}

.hero.hero-slider-layout .hero-slide{
	position: relative;
    padding: 210px 0;
}

.hero.hero-slider-layout .hero-slide::before{
	content: '';
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(270deg, rgba(30, 30, 30, 0) 0.02%, rgba(30, 30, 30, 0.9) 100%), linear-gradient(0deg, rgba(0, 0, 0, 0) 87.63%, rgba(30, 30, 30, 0.6) 100.45%);
	width: 100%;
	height: 100%;
	z-index: 1;
}

.hero.hero-slider-layout .hero-slide .hero-slider-image{
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
}

.hero.hero-slider-layout .hero-slide .hero-slider-image img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero.hero-slider-layout .hero-pagination{
	position: absolute;
    bottom: 50px;
	text-align: left;
	padding-left: calc(((100vw - 1300px) / 2));
	z-index: 2;
}

.hero.hero-slider-layout .hero-pagination .swiper-pagination-bullet{
    width: 12px;
    height: 12px;
    background: var(--white-color);
    opacity: 1;
    transition: all 0.3s ease-in-out;
    margin: 0 5px;
}

.hero.hero-slider-layout .hero-pagination .swiper-pagination-bullet-active{
    background-color: var(--accent-color);
}

.hero-content{
	position: relative;
	z-index: 1;
}

.excellence-innovating-list{
	position: relative;
	border-top: 1px solid var(--dark-divider-color);
	padding-top: 50px;
	margin-top: 150px;
	z-index: 1;
}

.excellence-innovating-list ul{
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px 100px;
}

.excellence-innovating-list ul li{
	position: relative;
	color: var(--white-color);
	padding-left: 40px;
}

.excellence-innovating-list ul li:before{
	content: '';
	position: absolute;
	width: 24px;
	height: 24px;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
	background: url('../images/icon-check.svg') no-repeat center left;
	background-size: cover;
}

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

.about-us{
	padding: 100px 0;
	background: url('../images/about-us-bg.svg') no-repeat;
	background-position: bottom left;
	background-size: auto;
}

.about-image{
	position: relative;
	display: flex;
	justify-content: end;
	padding-top: 150px;
	margin-right: 40px;
}

.about-img-1{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	max-width: 300px;
}

.about-img-2 figure,
.about-img-1 figure{
	display: block;
	border-radius: 40px;
}

.about-img-1 figure img{
	border-radius: 40px;
}

.about-img-2 img{
	border: 10px solid var(--white-color);
	aspect-ratio: 1 / 1.22;
	object-fit: cover;
	border-radius: 40px;
}

.company-experience{
	position: absolute;
	top: 50px;
	right: 0px;
	display: flex;
	align-items: center;
	max-width: 250px;
}

.company-experience-counter{
	width: 120px;
}

.company-experience-counter h2{
	font-size: 50px;
	color: var(--accent-color);
}

.company-experience-content p{
	font-size: 18px;
	line-height: 1.4em;
	text-transform: capitalize;
	color: var(--primary-color);
	margin: 0;
}

.about-content-list{
	margin-bottom: 40px;
}

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

.about-content-list ul li{
	position: relative;
    color: var(--primary-color);
	text-transform: capitalize;
    padding-left: 40px;
	margin-bottom: 20px;
}

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

.about-content-list ul li:before{
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    background: url('../images/icon-check.svg') no-repeat center left;
    background-size: cover;
}

.genuine-rating-counter{
	background: var(--secondary-color);
	border-radius: 40px;
	padding: 50px;
	text-align: center;
}

.genuine-rating-counter .about-counter{
	margin-bottom: 5px;
}

.genuine-rating-counter .about-counter h2{
    background: url('../images/genuine-rating-counter-bg.jpg');
    background-size: cover;
	background-clip: text;
    -webkit-text-fill-color: transparent;
	font-size: 80px;
	font-weight: 900;
}

.genuine-rating{
	margin-bottom: 20px;
}

.genuine-rating ul{
	margin: 0;
	padding: 0;
	list-style: none;
}

.genuine-rating ul li{
	margin-right: 5px;
}

.genuine-rating ul li:last-child{
	margin-right: 0;
}

.genuine-rating ul li i{
	color: var(--accent-color);
}

.genuine-rating-counter-content p{
	text-transform: capitalize;
	margin: 0;
}

/************************************/
/***     06. Our Service css      ***/
/************************************/

.our-services{
	position: relative;
	padding: 100px 0 280px;
	background-color: var(--primary-color);
	background-image: url('../images/our-service-bg.jpg'); /* default; bisa di-override per halaman via inline style="background-image:..." */
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

.our-services:before{
	content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--primary-color);
	opacity: 70%;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.our-services .container{
	position: relative;
	z-index: 1;
}

.our-services-list{
	position: relative;
	z-index: 2;
	margin-top: -180px;
}

.services-list-box{
	background: var(--white-color);
	border: 1px solid var(--secondary-color);
	border-radius: 40px;
	padding: 60px;
	box-shadow: 0px 4px 30px 0px #0000000A;
	display: flex;
	flex-wrap: wrap;
	gap: 30px 60px;
}

.services-list-box .service-item{
	width: calc(25% - 45px);
	position: relative;
}

.services-list-box .service-item:after{
	content: '';
	position: absolute;
	width: 1px;
	height: 100%;
	top: 0;
	right: -30px;
	bottom: 0;
	left: auto;
	border-right: 1px solid var(--divider-color);
}

.services-list-box .service-item:nth-child(4n + 4):after{
	display: none;
}

.service-item .icon-box{
	margin-bottom: 30px;
}

.service-item .icon-box img{
	max-width: 60px;
}

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

.service-body h3{
	font-size: 20px;
	font-weight: 600;
	text-transform: capitalize;
}

.service-item .service-footer a{
	background: var(--secondary-color);
	border-radius: 8px;
	width: 70px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease-in-out;
}

.service-item:hover .service-footer a{
	background: var(--accent-color);
}

.service-item .service-footer a img{
	max-width: 18px;
	transform: rotate(45deg);
	transition: all 0.3s ease-in-out;
}

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

/************************************/
/***       07. Our Story css      ***/
/************************************/

.our-story{
	padding: 100px 0;
}

.our-story-header-img{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}

.our-story-header-img figure{
	width: calc(50% - 15px);
	display: block;
	border-radius: 40px;
}

.our-story-header-img figure img{
	aspect-ratio: 1 / 0.71;
	object-fit: cover;
	border-radius: 40px;
}

.our-story-img{
	margin-right: 40px;
}

.our-story-img figure,
.our-story-img img{
	width: 100%;
	display: block;
	border-radius: 40px;
}

.our-story-img img{
	aspect-ratio: 1 / 0.85;
	object-fit: cover;
}

.our-story-content-body{
	border-bottom: 1px solid var(--divider-color);
	margin-bottom: 60px;
	padding-bottom: 60px;
}

.our-story-content-body p:last-child{
	margin: 0;
}

.our-story-counters{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	margin-bottom: 60px;
}

.our-story-counter{
	width: calc(33.33% - 20px);
}

.our-story-counter h3{
	font-size: 50px;
	font-weight: 700;
	color: var(--accent-color);
	margin-bottom: 5px;
}

.our-story-counter p{
	font-size: 20px;
	font-weight: 600;
	line-height: 1.4em;
	text-transform: capitalize;
	color: var(--primary-color);
	margin: 0;
}

.our-story-intro-video{
	display: flex;
	align-items: center;
}

.our-story-client-img{
	margin-right: 50px;
}

.our-story-client-img .client-image{
    display: inline-block;
	border: 1px solid var(--white-color);
	border-radius: 50%;
    margin-left: -18px;
	overflow: hidden;
}

.our-story-client-img .client-image:first-child{
    margin: 0;
}

.our-story-client-img .client-image figure{
	display: block;
}

.our-story-client-img .client-image img{
    max-width: 60px;
}

.video-play-button{
	display: flex;
	align-items: center;
	justify-content: center;
}

.video-play-button a{
	border: 6px solid var(--accent-color);
	border-radius: 50%;
	height: 66px;
	width: 66px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 20px;
	cursor: none;
	transition: all 0.3s ease-in-out;
}

.video-play-button:hover a{
	border-color: var(--primary-color);
}

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

.video-play-button:hover a i{
	color: var(--primary-color);
}

.video-play-button p{
	color: var(--primary-color);
	font-weight: 600;
	text-transform: capitalize;
	margin: 0;
}

/************************************/
/***       08. What We Do css     ***/
/************************************/

.what-we-do{
	background: url('../images/what-we-do-bg.svg'), var(--primary-color);
	background-repeat: no-repeat;
	background-position: bottom left;
	background-size: auto;
}

.what-we-do .container-fluid{
	padding: 0;
}

.what-we-do-content{
	padding: 100px 120px;
	height: 100%;
}

.what-we-do-list{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 30px;
}

.what-we-do-list-box-1,
.what-we-do-list-box-2{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}

.what-we-do-item{
	width: calc(50% - 15px);
	border: 1px solid var(--dark-divider-color);
	border-radius: 40px;
	padding: 30px;
}

.what-we-do-list-box-1 .what-we-do-item:nth-child(even){
	background: var(--dark-divider-color);
}

.what-we-do-list-box-2 .what-we-do-item:nth-child(odd){
	background: var(--dark-divider-color);
}

.what-we-do-item .icon-box{
	margin-bottom: 30px;
}

.what-we-do-item .icon-box img{
	max-width: 50px;
}

/* Ikon inline SVG (Vision & Mission) — bermakna per kolom, warna aksen */
.what-we-do-item .icon-box svg.wwd-icon{
	width: 46px;
	height: 46px;
	display: block;
	color: var(--accent-color);
}

.what-we-item-content h3{
	font-size: 20px;
	font-weight: 600;
	text-transform: capitalize;
	color: var(--white-color);
	margin-bottom: 10px;
}

.what-we-item-content p{
	color: var(--white-color);
	opacity: 80%;
	margin: 0;
}

.what-we-do-footer{
	margin-top: 40px;
}

.what-we-do-footer p{
	color: var(--white-color);
	margin: 0;
}
.what-we-do-footer p span{
	color: var(--accent-color);
	text-decoration: underline;
}

.what-we-do-image{
	position: relative;
}

.contact-now-circle{
	content: '';
	position: absolute;
	display: block;
	left: 0;
	top: 50%;
	transform: translate(-50% , -50%);
	z-index: 1;
}

.contact-now-circle img{
	width: 130px;
	height: 130px;
	animation: contactrotate 20s infinite linear;
}

@keyframes contactrotate{
	from{
		transform: rotate(0deg);
	  }
	to{
		transform: rotate(360deg);
	}
}

.what-we-do-image,
.what-we-do-image figure,
.what-we-do-image figure img{
	width: 100%;
	height: 100%;
}

.what-we-do-image figure img{
	aspect-ratio: 1 / 0.97;
	object-fit: cover;
}

/************************************/
/***       09. Our Work css       ***/
/************************************/

.our-work{
	padding: 100px 0 60px;
}

.our-Project-nav{
	text-align: center;
	margin-bottom: 60px;
}

.our-Project-nav ul{
	list-style: none;
	text-align: center;
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px 60px;
	padding: 0;margin: 0;
}

.our-Project-nav ul li a{
	position: relative;
	display: inline-block;
	color: var(--primary-color);
	font-weight: 600;
	line-height: 1.2em;
	text-transform: capitalize;
	transition: all 0.3s ease-in-out;
}

.our-Project-nav ul li a:before{
    content: '/';
    position: absolute;
    top: 0;
	bottom: 0;
    right: -35px;
}

.our-Project-nav ul li:last-child a:before{
	display: none;
}

.our-Project-nav ul li a.active-btn,
.our-Project-nav ul li a:hover{
	color: var(--accent-color);
}

.project-item{
	position: relative;
	height: calc(100% - 40px);
	margin-bottom: 40px;
	text-align: center;
	overflow: hidden;
}

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

.project-image figure{
	display: block;
	border-radius: 40px;
	overflow: hidden;
}

.project-image img{
	width: 100%;
	aspect-ratio: 1 / 0.7;
	object-fit: cover;
	border-radius: 40px;
	transition: all 0.4s ease-in-out;
}

.project-item:hover .project-image figure img{
	transform: scale(1.1);
}

.project-tag{
	position: absolute;
	top: 40px;
	left: 40px;
	z-index: 2;
}

.project-tag a{
	position: relative;
	display: block;
	backdrop-filter: blur(50px);
	-webkit-backdrop-filter: blur(50px);
	color: var(--white-color);
	border-radius: 10px;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.1em;
	text-transform: capitalize;
	padding: 10px 12px;
	overflow: hidden;
}

.project-tag  a::before{
    content: '';
    position: absolute;
    display: block;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--primary-color);
	opacity: 10%;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.project-content{
	text-align: center;
}

.project-content h3{
	font-size: 20px;
	font-weight: 600;
	text-transform: capitalize;
}

.project-content h3 a{
	color: inherit;
}

/************************************/
/***      10. Our Process css     ***/
/************************************/

.our-process{
	background: var(--secondary-color);
	padding: 100px 0;
}

.our-process-image{
	margin-right: 30px;
}

.our-process-image figure{
	display: block;
	border-radius: 40px;
	overflow: hidden;
}

.our-process-image img{
	width: 100%;
	aspect-ratio: 1 / 0.93;
	object-fit: cover;
	border-radius: 40px;
}

.process-step-item{
	position: relative;
	/* border: 1px solid var(--divider-color); */
	border-radius: 40px;
	display: flex;
	align-items: center;
	padding: 30px;
	margin-bottom: 30px;
	transition: all 0.3s ease-in-out;
	overflow: hidden;
}

.process-step-item:last-child{
	margin-bottom: 0;
}

.process-step-item::before{
	content: '';
    display: block;
    position: absolute;
    top: auto;
	bottom: 0;
	left: 0;
    right: 0;
    background: var(--accent-color);
	width: 100%;
    height: 0;
    transition: all 0.4s ease-in-out;
	z-index: 0;
}

.process-step-item.active:before,
.process-step-item:hover:before{
	height: 100%;
	top: 0;
	bottom: auto;
}

.process-step-no{
	position: relative;
	margin-right: 20px;
	z-index: 1;
}

.process-step-no h2{
	font-size: 50px;
	font-weight: 700;
	color: var(--accent-color);
	transition: all 0.3s ease-in-out;
}

.process-step-content{
	position: relative;
	z-index: 1;
}

.process-step-content h3{
	font-size: 20px;
	font-weight: 600;
	text-transform: capitalize;
	margin-bottom: 10px;
	transition: all 0.3s ease-in-out;
}

.process-step-content p{
	margin: 0;
	transition: all 0.3s ease-in-out;
}

.process-step-item.active .process-step-content p,
.process-step-item.active .process-step-content h3,
.process-step-item.active .process-step-no h2,
.process-step-item:hover .process-step-content p,
.process-step-item:hover .process-step-content h3,
.process-step-item:hover .process-step-no h2{
	color: var(--white-color);
}

/************************************/
/***      11. Our Pricing css     ***/
/************************************/

.our-pricing{
    padding: 100px 0;
}

.pricing-box{
	position: relative;
	background-color: var(--secondary-color);
	border-radius: 40px;
    height: calc(100% - 30px);
    margin-bottom: 30px;
    padding: 50px;
	overflow: hidden;
}

.pricing-box::before{
	content: '';
	position: absolute;
	top: -25px;
	right: -25px;
	background-repeat: no-repeat;
	background-position: top  right;
	background-size: cover;
	width: 150px;
	height: 150px;
	z-index: 0;
}

.pricing-box.highlighted-box::before{
	filter: brightness(0) invert(1);
}

.pricing-box.box-1::before{
	background-image: url('../images/icon-pricing-box-1.svg');
}

.pricing-box.box-2::before{
	background-image: url('../images/icon-pricing-box-2.svg');
}

.pricing-box.box-3::before{
	background-image: url('../images/icon-pricing-box-3.svg');
}

.pricing-box.highlighted-box{
	background-color: var(--accent-color);
}

.pricing-title{
    margin-bottom: 60px;
}

.pricing-title h2{
    font-size: 60px;
	font-weight: 700;
    color: var(--accent-color);
	margin-bottom: 10px;
}

.pricing-box.highlighted-box .pricing-title h2{
    color: var(--white-color);
}

.pricing-title h2 sup{
	font-size: 30px;
}

.pricing-title h2 sub{
    font-size: 16px;
	font-weight: 400;
    color: var(--text-color);
    bottom: 0;
}

.pricing-box.highlighted-box .pricing-title h2 sub{
	color: var(--white-color);
}

.pricing-title h3{
    font-size: 20px;
	font-weight: 600;
    text-transform: capitalize;
}

.pricing-box.highlighted-box .pricing-title h3{
    color: var(--white-color);
}

.pricing-list{
	margin-bottom: 60px;
}

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

.pricing-list ul li{
	width: 100%;
    position: relative;
    color: var(--primary-color);
	text-transform: capitalize;
    padding-left: 40px;
}

.pricing-box.highlighted-box .pricing-list ul li{
    color: var(--white-color);
}

.pricing-list ul li::before{
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    background: url('../images/icon-check.svg') no-repeat center left;
    background-size: cover;
}

.pricing-box.highlighted-box .pricing-list ul li::before{
    filter: brightness(0) invert(1);
}

.pricing-btn{
	line-height: 1em;
}

.pricing-benefit-list{
	margin-top: 30px;
}

.pricing-benefit-list ul{
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
    justify-content: center;
	gap: 20px 40px;
}

.pricing-benefit-list ul li{
	color: var(--primary-color);
	font-weight: 500;
    display: inline-flex;
    align-items: center;
}

.pricing-benefit-list ul li img{
	max-width: 20px;
	margin-right: 15px;
}

/************************************/
/***    12. Our Testimonial css   ***/
/************************************/

.our-testimonial{
	background: url('../images/testimonial-bg.png'), var(--secondary-color);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	padding: 100px 0;
}

.our-testimonial-image{
	margin-right: 30px;
}

.our-testimonial-image figure{
	display: block;
	border-radius: 40px;
	overflow: hidden;
}

.our-testimonial-image img{
	aspect-ratio:  1 / 1.05;
	border-radius: 40px;
	object-fit: cover;
}

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

.testimonial-rating{
	margin-bottom: 20px;
}

.testimonial-item .testimonial-rating i{
	color: var(--accent-color);
}

.testimonial-content{
	margin-bottom: 60px;
}

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

.testimonial-body{
	display: flex;
	align-items: center;
}

.testimonial-body .author-image{
	margin-right: 15px;
}

.testimonial-body .author-image img{
	width: 60px;
	height: 60px;
	border-radius: 10px;
}

.testimonial-body .author-content{
	width: calc(100% - 75px);
}

.testimonial-body .author-content h3{
	font-size: 20px;
	text-transform: capitalize;
	margin-bottom: 5px;
}

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

.testimonial-btn{
	position: absolute;
	bottom: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: right;
	margin-top: 30px;
	z-index: 2;
}

.testimonial-slider .testimonial-button-next,
.testimonial-slider .testimonial-button-prev{
	position: relative;
	width: 56px;
	height: 56px;
	background: var(--accent-color);
	border-radius: 10px;
	transition: all 0.4s ease-in-out;
}

.testimonial-slider .testimonial-button-next{
	margin-left: 30px;
}


.testimonial-slider .testimonial-button-next:hover,
.testimonial-slider .testimonial-button-prev:hover{
	background: var(--primary-color);
}

.testimonial-slider .testimonial-button-next::before,
.testimonial-slider .testimonial-button-prev::before{
	content: '';
	position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
	background: url('../images/arrow-white.svg');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 24px auto;
	transform: rotate(45deg);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease-in-out;
}

.testimonial-slider .testimonial-button-prev::before{
	transform: rotate(225deg);
}

.testimonial-slider .testimonial-button-next:hover:before,
.testimonial-slider .testimonial-button-prev:hover:before{
	color: var(--primary-color);
}

.testimonial-company-slider{
	border-top: 1px solid var(--divider-color);
	padding-top: 80px;
	margin-top: 80px;
}

.testimonial-company-slider .company-logo{
	text-align: center;
}

.testimonial-company-slider .company-logo img{
	width: 100%;
	max-height: 40px;
}

/************************************/
/***       13. Our Blog css       ***/
/************************************/

.our-blog{
	padding: 100px 0 70px;
}

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

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

.post-featured-image a{
    cursor: none;
}

.post-featured-image figure,
.post-featured-image a{
    display: block;
	border-radius: 40px;
}

.post-featured-image img{
    width: 100%;
    aspect-ratio: 1 / 0.63;
    object-fit: cover;
	border-radius: 40px;
    transition: all 0.4s ease-in-out;
}

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

.post-item-body{
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.post-item-content{
	width: 65%;
}

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

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

.post-item-btn{
	text-align: right;
	margin-left: 20px;
}

.post-item-btn a{
	background-color: var(--accent-color);
	border-radius: 10px;
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease-in-out;
}

.post-item-btn a:hover{
	background-color: var(--primary-color);
}

.post-item-btn a img{
	max-width: 24px;
	transition: all 0.3s ease-in-out;
}

.post-item-btn a:hover img{
	transform: rotate(45deg);
}

/************************************/
/***        14. Footer css        ***/
/************************************/

.main-footer{
	/* Overlay ber-brand An Nur: glow aksen + siluet masjid + pola khatim halus */
	background:
		radial-gradient(820px 380px at 90% -12%, rgba(0, 162, 233, 0.16), transparent 60%),
		url(../images/footer-mosque.svg),
		url(../images/footer-pattern.svg),
		var(--primary-color);
	background-repeat: no-repeat, no-repeat, repeat, no-repeat;
	background-position: top right, bottom center, top left, center;
	background-size: auto, 500px auto, 84px 84px, auto;
	padding: 100px 0 0;
}

.footer-header{
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid var(--dark-divider-color);
	margin-bottom: 60px;
	padding-bottom: 60px;
}

.footer-header .section-title{
	margin-bottom: 0;
}

.footer-contact-circle{
	margin-left: 20px;
}

.footer-contact-circle img{
	max-width: 130px;
	animation: contactrotate 20s infinite linear;
}

.about-footer{
	width: 100%;
	max-width: 300px;
}

.footer-logo{
	margin-bottom: 10px;
}

.footer-logo img{
	max-width: 180px;
}

.about-footer-content{
	margin-bottom: 20px;
}

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

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

.footer-social-links ul li{
	display: inline-block;
	border-radius: 50%;
	margin-right: 15px;
}

.footer-social-links ul li:last-child{
	margin-right: 0;
}

.footer-social-links ul li a{
	border: 1px solid var(--dark-divider-color);
	border-radius: 50%;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease-in-out;
}

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

.footer-social-links ul li a i{
	color: var(--accent-color);
	font-size: 18px;
	transition: all 0.3s ease-in-out;
}

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

.footer-links h3{
	font-size: 20px;
	font-weight: 600;
	text-transform: capitalize;
	color: var(--white-color);
	margin-bottom: 30px;
}

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

.footer-links ul li{
	color: var(--white-color);
	text-transform: capitalize;
	margin-bottom: 15px;
}

.footer-links ul li:last-child{
	margin-bottom: 0;
}

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

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

.footer-copyright{
	text-align: center;
	border-top: 1px solid var(--dark-divider-color);
	padding: 60px 0;
	margin-top: 60px;
}

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

/************************************/
/***     15. About Us Page css    ***/
/************************************/

.page-header{
	position: relative;
	background-color: var(--primary-color);
	background-image: url('../images/page-header-bg.jpg'); /* default; bisa di-override per halaman via inline style="background-image:..." */
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	padding: 150px 0;
}

.page-header::before{
	content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
	background: linear-gradient(270deg, rgba(0, 0, 0, 0) 23.99%, rgba(0, 0, 0, 0.8) 100%);
    width: 100%;
    height: 100%;
    z-index: 0;
}

.page-header-box{
	position: relative;
	z-index: 1;
}

.page-header-box h1{
    color: var(--white-color);
    font-size: 70px;
    font-weight: 300;
    line-height: 1.2em;
    letter-spacing: -0.01em;
    margin-bottom: 5px;
    cursor: none;
}

.page-header-box h1 span{
	font-weight: 700;
}

.page-header-box ol{
	margin: 0;
	padding: 0;
}

.page-header-box ol li.breadcrumb-item{
	text-transform: capitalize;
	color: var(--white-color);
}

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

.page-header-box ol li.breadcrumb-item.active{
	color: var(--accent-color);
}

.page-header-box ol .breadcrumb-item+.breadcrumb-item::before{
	content: "\f111";
    font-family: "FontAwesome";
	font-size: 6px;
    color: var(--accent-color);
}

.our-mission-vision{
	position: relative;
}

.mission-vision-bg{
	position: relative;
	background-color: var(--primary-color);
	background-image: url('../images/our-service-bg.jpg'); /* default; bisa di-override per halaman via inline style="background-image:..." */
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	padding: 100px 0 200px;
}

.mission-vision-bg:before{
    content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--primary-color);
    opacity: 70%;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.mission-vision-box{
	position: relative;
	border: 1px solid var(--dark-divider-color);
	box-shadow: 0px 4px 30px 0px #0000000A;
	border-radius: 40px;
	margin-top: -200px;
	overflow: hidden;
	z-index: 1;
}

.mission-vision-nav ul{
	list-style: none;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
	background-color: var(--white-color);
	border-bottom: 1px solid var(--divider-color);
	overflow: hidden;
}

.mission-vision-nav ul li{
	width: 33.33%;
	position: relative;
    display: inline-block;
	text-align: center;
}

.mission-vision-nav ul li:last-child{
	padding-right: 0;
}

.mission-vision-nav ul li .nav-link{
	display: block;
	width: 100%;
    background: transparent;
	border: none;
	border-radius: 0;
    color: var(--primary-color);
	font-size: 20px;
    font-weight: 600;
    line-height: 1.2em;
	padding: 30px;
    text-transform: capitalize;
    transition: all 0.3s ease-in-out;
}

.mission-vision-nav ul li .nav-link.active,
.mission-vision-nav ul li .nav-link:hover{
    background: var(--accent-color);
    color: var(--white-color);
	border-radius: 0;
}

.mission-vision-nav ul li .nav-link img{
	max-width: 40px;
	margin-right: 20px;
	transition: all 0.3s ease-in-out;
}

.mission-vision-nav ul li .nav-link.active img,
.mission-vision-nav ul li .nav-link:hover img{
	filter: brightness(0) invert(1);
}

.mission-vision-item{
	background-color: var(--white-color);
	padding: 80px;
}

.mission-vision-content-header{
	margin-bottom: 40px;
}

.mission-vision-content-header p{
	margin: 0;
}

.mission-vision-content-list ul{
	margin: 0;
    padding: 0;
    list-style: none;
}

.mission-vision-content-list ul li{
	position: relative;
    color: var(--primary-color);
	text-transform: capitalize;
    padding-left: 40px;
	margin-bottom: 20px;
}

.mission-vision-content-list ul li:last-child{
	margin-bottom: 0;
}

.mission-vision-content-list ul li:before{
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    background: url('../images/icon-check.svg') no-repeat center left;
    background-size: cover;
}

.mission-vision-image figure{
	display: block;
	border-radius: 40px;
	overflow: hidden;
}

.mission-vision-image img{
	width: 100%;
	aspect-ratio: 1 / 0.63;
	object-fit: cover;
	border-radius: 40px;
}

.our-history{
	padding: 100px 0;
}

.our-history-box{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 50px;
}

.our-history-nav{
	width: calc(30% - 25px);
}

.our-history-nav ul{
	list-style: none;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
	background-color: var(--white-color);
	border: 1px solid var(--secondary-color);
	box-shadow: 0px 4px 30px 0px #0000000A;
	border-radius: 20px;
	overflow: hidden;
}

.our-history-nav ul li{
	width: 100%;
	position: relative;
    display: inline-block;
	text-align: center;
}

.our-history-nav ul li:last-child{
	border: none;
}

.our-history-nav ul li .nav-link{
	display: block;
	width: 100%;
    background: transparent;
	border-radius: 0;
    color: var(--primary-color);
	font-size: 20px;
    font-weight: 600;
    line-height: 1.2em;
    text-transform: capitalize;
	border-bottom: 1px solid var(--divider-color);
	padding: 30px;
    transition: all 0.3s ease-in-out;
}

.our-history-nav ul li .nav-link.active,
.our-history-nav ul li .nav-link:hover{
    background: var(--accent-color);
    color: var(--white-color);
	border-radius: 0;
}

.our-history-item{
	width: calc(70% - 25px);
}

.our-history-list ul{
	margin: 0;
    padding: 0;
    list-style: none;
}

.our-history-list ul li{
	position: relative;
    color: var(--primary-color);
	text-transform: capitalize;
    padding-left: 40px;
	margin-bottom: 20px;
}

.our-history-list ul li:last-child{
	margin-bottom: 0;
}

.our-history-list ul li:before{
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    background: url('../images/icon-check.svg') no-repeat center left;
    background-size: cover;
}

.our-history-image figure{
	display: block;
	border-radius: 40px;
	overflow: hidden;
}

.our-history-image img{
    width: 100%;
	aspect-ratio: 1 / 0.96;
    object-fit: cover;
    border-radius: 40px;
}

.our-features{
	padding: 100px 0;
}

.our-features-boxes{
	display: flex;
	flex-wrap: wrap;
	border: 1px solid var(--divider-color);
	border-radius: 40px;
	overflow: hidden;
}

.our-features-item{
	position: relative;
	width: 50%;
	padding: 50px;
	overflow: hidden;
}

.our-features-item:nth-child(1n + 1){
	border-right: 1px solid var(--divider-color);
	border-bottom: 1px solid var(--divider-color);
}

.our-features-item:nth-child(2n + 2){
	border-right: none;
}

.our-features-item::before{
    content: '';
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    background-color: var(--accent-color);
    border-radius: 0;
    height: 100%;
    width: 100%;
    transition: all 0.4s ease-in-out;
    opacity: 0;
    z-index: -1;
}

.our-features-item:hover::before{
    top: 0;
    border-radius: 0;
    opacity: 1;
}

.our-features-item .icon-box{
	margin-bottom: 30px;
}

.our-features-item .icon-box img{
	max-width: 50px;
	transition: all 0.4s ease-in-out;
}

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

.features-item-content h3{
	font-size: 20px;
	font-weight: 600;
	text-transform: capitalize;
	margin-bottom: 20px;
	transition: all 0.3s ease-in-out;
}

.features-item-content p{
	margin: 0;
	transition: all 0.3s ease-in-out;
}

.our-features-item:hover .features-item-content p,
.our-features-item:hover .features-item-content h3{
	color: var(--white-color);
}

.our-features-item.features-image-box{
	border: none;
	padding: 0;
}

.our-features-item.features-image-box figure{
	display: block;
	height: 100%;
}

.our-features-item.features-image-box img{
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 0.485;
    object-fit: cover;
}

.our-team{
	padding: 100px 0 70px;
}

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

.team-image{
	position: relative;
	border-radius: 20px;
	margin-bottom: 20px;
    overflow: hidden;
}

.team-image a{
	display: block;
	cursor: none;
}

.team-image figure{
	position: relative;
}

.team-image figure::before{
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 71.93%, rgba(0, 0, 0, 0.8) 95.83%);
	width: 100%;
	height: 100%;
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease-in-out;
	z-index: 1;
}

.team-member-item:hover .team-image figure::before{
	opacity: 1;
	visibility: visible;
}

.team-image img{
	width: 100%;
	aspect-ratio: 1 / 1.15;
	object-fit: cover;
	border-radius: 20px;
	transition: all 0.5s ease-in-out;
}

.team-member-item:hover .team-image img{
    transform: scale(1.1);
}

.team-social-icon{
	position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
	margin: 0 auto; 
	transform: translateY(100%);
	text-align: center;
	z-index: 2;
    transition: all 0.5s ease-in-out;
}

.team-member-item:hover .team-social-icon{
	bottom: 20px;
	transform: translateY(0);
}

.team-social-icon ul{
	list-style: none;
	margin: 0;
	padding: 0;
}

.team-social-icon ul li{
	display: inline-block;
    text-align: center;
    margin-right: 20px;
}

.team-social-icon ul li:last-child{
	margin-right: 0;
}

.team-social-icon ul li a{
    color: var(--white-color);
	cursor: pointer;
    transition: all 0.3s ease-in-out;
}

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

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

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

.team-content h3{
	font-size: 20px;
	font-weight: 600;
	text-transform: capitalize;
	margin-bottom: 5px;
	transition: all 0.3s ease-in-out;
}

.team-content h3:hover{
	color: var(--accent-color);
}

.team-content h3 a{
	color: inherit;
}

.team-content p{
	text-transform: capitalize;
	margin: 0;
}

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

.our-faqs-images{
	position: relative;
}

.our-faqs-img figure{
	position: relative;
	display: block;
	border-radius: 40px;
	overflow: hidden;
}

.our-faqs-img figure::before{
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(180deg, rgba(34, 34, 34, 0) 64.31%, rgba(34, 34, 34, 0.8) 100%);
	width: 100%;
	height: 100%;
	z-index: 1;
}

.our-faqs-img figure img{
	width: 100%;
	aspect-ratio:  1 / 0.99;
	object-fit: cover;
}

.faqs-img-cta-box{
	position: absolute;
	bottom: 40px;
	left: 40px;
	right: 40px;
	z-index: 1;
}

.faqs-img-cta-box ul{
	list-style: none;
	padding: 0;
	margin: 0;
	text-align: center;
}

.faqs-img-cta-box ul li{
	display: inline-block;
	margin-right: 40px;
}

.faqs-img-cta-box ul li:last-child{
	margin-right: 0;
}

.faqs-img-cta-box ul li a img{
	max-width: 30px;
	margin-right: 15px;
}

.faqs-img-cta-box ul li a{
	font-size: 20px;
	font-weight: 600;
	color: var(--white-color);
	transition: all 0.3s ease-in-out;
}

.faqs-img-cta-box ul li:hover a{
	color: var(--accent-color);
}

.our-faq-section .accordion-item{
	padding: 0;
	border: 1px solid var(--divider-color);
	border-radius: 10px;
	overflow: hidden;
	margin-bottom: 30px;
	transition: all 0.3s ease-in-out;
}

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

.our-faq-section .accordion-header .accordion-button{
	font-size: 20px;
	font-weight: 600;
	line-height: 1.2em;
	background-color: transparent;
	color: var(--white-color);
	padding: 15px 50px 15px 20px;
	transition: all 0.3s ease-in-out;
}

.our-faq-section .accordion-button:not(.collapsed){
	background: var(--accent-color);
   	color: var(--white-color);
   	border-bottom: 1px solid var(--dark-divider-color);
}

.our-faq-section .accordion-header .accordion-button.collapsed{
	background-color: transparent;
	color: var(--primary-color);
}

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

.our-faq-section .accordion-button:not(.collapsed)::after{
    transform: translateY(-50%) rotate(180deg);
    color: var(--white-color);
}

.our-faq-section .accordion-item .accordion-body{
	background: var(--accent-color);
	padding: 15px 50px 15px 20px;
}

.our-faq-section .accordion-item .accordion-body p{
    color: var(--white-color);
	margin: 0;
}

/************************************/
/***     16. Services Page css    ***/
/************************************/

.page-services{
	padding: 100px 0 70px;
}

.page-services .service-item{
	border: 1px solid var(--divider-color);
	border-radius: 40px;
	height: calc(100% - 30px);
	margin-bottom: 30px;
	padding: 30px;
	transition: all 0.3s ease-in-out;
}

.page-services .service-item:hover{
	border-color: var(--secondary-color);
	box-shadow: 0px 4px 30px 0px #0000000A;
}

/************************************/
/***   17. Services Single css    ***/
/************************************/

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

.service-sidebar{
    position: sticky;
    top: 30px;
    margin-right: 20px;
}

.service-catagery-list{
	border: 1px solid var(--secondary-color);
    border-radius: 20px;
    margin-bottom: 60px;
	box-shadow: 0px 4px 30px 0px #0000000A;
	overflow: hidden;
}

.service-catagery-list h3{
	font-size: 20px;
    font-weight: 600;
    text-transform: capitalize;
    background-color: var(--accent-color);
    color: var(--white-color);
    padding: 20px 30px;
}

.service-catagery-list ul{
    list-style: none;
    margin: 0;
    padding: 30px;
}

.service-catagery-list ul li{
    border-bottom: 1px solid var(--divider-color);
    padding-bottom: 20px;
    margin-bottom: 20px;
    transition: all 0.3s ease-in-out;
}

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

.service-catagery-list ul li a{
    position: relative;
	display: block;
    text-transform: capitalize;
    color: var(--text-color);
    transition: all 0.3s ease-in-out;
}

.service-catagery-list ul li a:hover{
    color: var(--accent-color);
}

.service-catagery-list ul li a::before{
	content: '';
	position: absolute;
	top: 50%;
	right: 0;
	background: url(../images/arrow-dark.svg) no-repeat;
	background-size: cover;
	width: 24px;
	height: 24px;
    transform: translateY(-50%);
	transition: all 0.3s ease-in-out;
}

.service-catagery-list ul li a:hover:before{
	transform: translateY(-50%) rotate(45deg);
}

.sidebar-cta-box{
	position: relative;
	/* Gambar gerigi bawaan pabrik dihapus → gradient navy ber-brand yang bersih */
	background:
		radial-gradient(560px 300px at 88% -10%, rgba(0, 162, 233, 0.30), transparent 60%),
		linear-gradient(160deg, #00035E 0%, #020a2e 100%);
    border-radius: 20px;
	padding: 40px;
    overflow: hidden;
	z-index: 1;
}

/* Overlay gambar tidak diperlukan lagi (tanpa foto latar) */
.sidebar-cta-box::before{
	display: none;
}

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

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

.sidebar-cta-content{
	position: relative;
    margin-bottom: 30px;
}

.sidebar-cta-content h3{
    font-size: 40px;
	font-weight: 300;
	color: var(--white-color);
    margin-bottom: 10px;
}

.sidebar-cta-content h3 span{
	font-weight: 700;
}

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

.sidebar-cta-contact-list{
	position: relative;
}

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

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

.sidebar-cta-contact-item .icon-box{
	position: relative;
	height: 40px;
	width: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 10px;
	margin-right: 15px;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	overflow: hidden;
	z-index: 1;
}

.sidebar-cta-contact-item .icon-box::before{
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: var(--white-color);
	opacity: 16%;
	height: 100%;
	width: 100%;
	border-radius: 10px;
	z-index: 0;
}

.sidebar-cta-contact-item img{
	position: relative;
    max-width: 24px;
	z-index: 1;
}

.cta-contact-item-title h3{
	font-size: 20px;
	font-weight: 600;
	color: var(--white-color);
	transition: all 0.3s ease-in-out;
}

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

.service-featured-image{
    margin-bottom: 30px;
}

.service-featured-image figure{
    display: block;
    border-radius: 40px;
    overflow: hidden;
}

.service-featured-image img{
    border-radius: 40px;
    width: 100%;
    aspect-ratio: 1 / 0.67;
    object-fit: cover;
}

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

.service-entry h2{
    font-size: 50px;
    font-weight: 300;
    margin-bottom: 20px;
}

.service-entry h2 span{
    font-weight: 700;
}

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

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

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

.service-entry ul li{
	position: relative;
	width: calc(33.33% - 20px);
    color: var(--primary-color);
    text-transform: capitalize;
	padding-left: 40px;
}

.service-entry ul li::before{
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    background: url(../images/icon-check.svg) no-repeat center left;
    background-size: cover;
}

.service-entry-box{
	display: flex;
	gap: 80px 30px;
	flex-wrap: wrap;
	margin: 40px 0;
}

.service-entry-item{
	position: relative;
	width: calc(50% - 15px);
}

.service-entry-item::before{
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: var(--divider-color);
	height: 1px;
	width: 100%;
	transform: translateY(40px);
}

.service-entry-item:nth-last-child(-n + 2)::before{
	display: none;
}

.service-entry-item .icon-box{
	margin-bottom: 30px;
}

.service-entry-item .icon-box img{
	max-width: 50px;
}

.service-entry-item-content h3{
	font-size: 20px;
	font-weight: 600;
	text-transform: capitalize;
	margin-bottom: 20px;
}

.service-entry-item-content p{
	margin-bottom: 0;
}

.service-entry-images{
	display: flex;
	gap: 30px;
	flex-wrap: wrap;
}

.service-entry-img{
	width: calc(50% - 15px);
}

.service-entry-img figure{
	display: block;
	border-radius: 40px;
	overflow: hidden;
}

.service-entry-img img{
	width: 100%;
	aspect-ratio: 1 / 0.96;
	object-fit: cover;
	border-radius: 40px;
}

/************************************/
/***     18. Blog Archive css     ***/
/************************************/

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

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

.page-blog .post-featured-image img{
    aspect-ratio: 1 / 0.91;
}

.page-blog .post-item .post-item-body{
	display: block;
}

.page-blog .post-item .post-item-content{
	width: 100%;
	margin-bottom: 20px;
}

.post-readmore-btn a{
	position: relative;
	font-size: 16px;
	font-weight: 600;
	color: var(--accent-color);
	padding-right: 34px;
	transition: all 0.3s ease-in-out;
}

.post-readmore-btn a:hover{
	color: var(--primary-color);
}

.post-readmore-btn a::before{
	content: '';
	position: absolute;
	top: 50%;
    right: 0;
    width: 24px;
    height: 24px;
    background-image: url(../images/arrow-accent.svg);
    background-repeat: no-repeat;
    background-position: center right;
    background-size: cover;
    transform: translateY(-50%);
    transition: all 0.3s ease-in-out;
    z-index: 1;
}

.post-readmore-btn a:hover::before{
	transform: translateY(-50%) rotate(45deg);
	filter: brightness(0) invert(0);
}

.page-pagination{
    margin-top: 10px;
    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(--divider-color);
    color: var(--primary-color);
	border-radius: 10px;
    width: 40px;
    height: 40px;
    margin: 0 5px;
    font-weight: 700;
	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);
}

/************************************/
/***      19. Blog Single css     ***/
/************************************/

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

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

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

.post-image figure,
.post-image img{
	aspect-ratio: 1 / 0.50;
	border-radius: 40px;
	object-fit: cover;
}

.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: 700;
	line-height: 1.2em;
	margin: 0 0 0.6em;
}

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

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

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

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

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

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

.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 ol li{
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-color);
}

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

.post-entry ul li{
	font-size: 18px;
    font-weight: 500;
    color: var(--text-color);
    position: relative;
    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: url(../images/icon-blockquote.svg), var(--primary-color);
	background-repeat: no-repeat;
	background-position: 35px 30px;
    background-size: 58px;
    border-radius: 30px;
    padding: 30px 30px 30px 100px;
    margin-bottom: 30px;
}

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

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

.tag-links{
	font-size: 20px;
	font-weight: 700;
	color: var(--primary-color);
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}

.post-tags .tag-links a{
    display: inline-block;
    font-size: 16px;
    font-weight: 600;
    text-transform: capitalize;
    background: var(--accent-color);
    color: var(--white-color);
	border-radius: 10px;
    padding: 6px 20px;
	transition: all 0.3s ease-in-out;
}

.post-tags .tag-links a:hover{
	background: var(--primary-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: 10px;
    width: 36px;
    height: 36px;
    transition: all 0.3s ease-in-out;
}

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

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

/************************************/
/***     20. Project Page css     ***/
/************************************/

.page-projects{
	padding: 100px 0 60px;
}

/************************************/
/***    21. Project Single css    ***/
/************************************/

.page-project-single{
	padding: 100px 0;
}

.project-sidebar{
	position: sticky;
	top: 30px;
	margin-right: 20px;
}

.project-detail-box{
	border: 1px solid var(--secondary-color);
	box-shadow: 0px 4px 30px 0px #0000000A;
	border-radius: 20px;
	margin-bottom: 60px;
	overflow: hidden;
}

.project-detail-title{
	background-color: var(--accent-color);
	padding: 20px 30px;
}

.project-detail-title h3{
	font-size: 20px;
	font-weight: 600;
	text-transform: capitalize;
	color: var(--white-color);
}

.project-detail-list{
	padding: 30px;
}

.project-detail-item{
	display: flex;
	align-items: center;
	border-bottom: 1px solid var(--divider-color);
	padding-bottom: 20px;
	margin-bottom: 20px;
}

.project-detail-item:last-child{
	border: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

.project-detail-item .icon-box{
	background-color: var(--accent-color);
	border-radius: 10px;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 20px;
	transition: all 0.3s ease-in-out;
}

.project-detail-item:hover .icon-box{
	background-color: var(--primary-color);
}

.project-detail-item .icon-box img{
	max-width: 20px;
}

.project-detail-content{
	width: calc(100% - 60px);
}

.project-detail-content h3{
	font-size: 16px;
	font-weight: 600;
	text-transform: capitalize;
	margin-bottom: 5px;
}

.project-detail-content p{
	margin-bottom: 0;
}

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

.project-single-image figure{
    display: block;
    border-radius: 40px;
    overflow: hidden;
}

.project-single-image img{
    border-radius: 40px;
    width: 100%;
    aspect-ratio: 1 / 0.67;
    object-fit: cover;
}

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

.project-info,
.project-goal{
	margin-bottom: 60px;
}

.project-entry h2{
    font-size: 50px;
    font-weight: 300;
    margin-bottom: 20px;
}

.project-entry h2 span{
    font-weight: 700;
}

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

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

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

.project-entry ul li{
	position: relative;
	width: calc(50% - 15px);
    color: var(--primary-color);
    text-transform: capitalize;
	padding-left: 40px;
}

.project-entry ul li::before{
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    background: url(../images/icon-check.svg) no-repeat center left;
    background-size: cover;
}

.project-query-item{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 30px;
	margin-bottom: 60px;
}

.project-query-item:last-child{
	margin-bottom: 0;
}

.project-query-item:nth-of-type(even){
	flex-direction: row-reverse;
}

.project-query-content{
	width: calc(50% - 15px);
}

.project-query-box ul{
	margin-bottom: 0;
}

.project-query-box ul li{
	width: 100%;
}

.project-query-img{
	width: calc(50% - 15px);
}

.project-query-img figure{
	display: block;
	border-radius: 40px;
	overflow: hidden;
}

.project-query-img img{
	width: 100%;
	aspect-ratio: 1 / 0.73;
	object-fit: cover;
	border-radius: 40px;
}

/************************************/
/***      22. Team Page css       ***/
/************************************/

.page-team{
	padding: 100px 0 70px;
}

/************************************/
/***      23. Team Single css     ***/
/************************************/

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

.team-member-sidebar{
	position: sticky;
	top: 20px;
	margin-right: 30px;
}

.team-member-box{
	background-color: var(--white-color);
	box-shadow: 0px 4px 30px 0px #0000000A;
	border: 1px solid var(--secondary-color);
	border-radius: 40px;
	padding: 30px;
	margin-bottom: 60px;
}

.team-member-image{
	margin-bottom: 30px;
}

.team-member-image figure{
	display: block;
	border-radius: 30px;
	overflow: hidden;
}

.team-member-image img{
	width: 100%;
	aspect-ratio: 1 / 1.15;
	object-fit: cover;
	border-radius: 30px;
	transition: all 0.4s ease-in-out;
}

.team-member-box:hover .team-member-image img{
    transform: scale(1.1);
}

.team-member-name{
	text-align: center;
	margin-bottom: 20px;
}
	
.team-member-name h3{
	font-size: 20px;
	font-weight: 600;
	color: var(--accent-color);
	text-transform: capitalize;
	margin-bottom: 5px;
}

.team-member-name p{
	text-transform: capitalize;
	margin: 0;
}

.team-member-social-list ul{
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: center;
}

.team-member-social-list ul li{
	display: inline-block;
    margin-right: 20px;
}

.team-member-social-list ul li:last-child{
	margin: 0;
}

.team-member-social-list ul li a{
	color: var(--accent-color);
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

.team-member-social-list ul li a:hover{
    color: var(--primary-color);
}

.team-member-social-list ul li a i{
    font-size: 20px;
    color: inherit;
}

.team-detail-box{
	border: 1px solid var(--secondary-color);
	box-shadow: 0px 4px 30px 0px #0000000A;
	border-radius: 20px;
	overflow: hidden;
}

.team-detail-title{
	background-color: var(--accent-color);
	padding: 22px 30px;
}

.team-detail-title h3{
	font-size: 20px;
	font-weight: 600;
	text-transform: capitalize;
	color: var(--white-color);
}

.team-detail-list{
	padding: 30px;
}

.team-detail-item{
	display: flex;
	align-items: center;
	border-bottom: 1px solid var(--divider-color);
	padding-bottom: 20px;
	margin-bottom: 20px;
}

.team-detail-item:last-child{
	border: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

.team-detail-item .icon-box{
	background-color: var(--accent-color);
	border-radius: 10px;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 20px;
	transition: all 0.3s ease-in-out;
}

.team-detail-item:hover .icon-box{
	background-color: var(--primary-color);
}

.team-detail-item .icon-box img{
	max-width: 20px;
}

.team-detail-content{
	width: calc(100% - 60px);
}

.team-detail-content h3{
	font-size: 16px;
	font-weight: 500;
	text-transform: capitalize;
	margin-bottom: 5px;
}

.team-detail-content p{
	margin-bottom: 0;
}

.team-member-info,
.team-member-skills-feature{
	margin-bottom: 60px;
}

.team-member-content h2{
	font-size: 40px;
    font-weight: 300;
    margin-bottom: 20px;
}

.team-member-content h2 span{
    font-weight: 700;
}

.team-member-content p{
	margin-bottom: 20px;
}

.team-member-content p:last-child{
	margin-bottom: 0;
}

.team-member-skills-feature{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}

.team-member-skills,
.team-member-feature{
	width: calc(50% - 15px);
}

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

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

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

.skills-progress-bar .skill-data .skill-title{
    font-size: 15px;
    font-weight: 400;
    color: var(--text-color);
	text-transform: capitalize;
}

.skills-progress-bar .skill-data .skill-no{
    font-size: 15px;
    font-weight: 400;
	color: var(--primary-color);
}

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

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

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

.team-member-content ul li{
    position: relative;
	width: 100%;
    color: var(--primary-color);
    text-transform: capitalize;
    padding-left: 40px;
}

.team-member-content ul li::before{
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    background: url(../images/icon-check.svg) no-repeat center left;
    background-size: cover;
}

/************************************/
/***     24. Pricing Page css     ***/
/************************************/

.page-pricing{
	padding: 100px 0;
}

/************************************/
/***   25. Testimonial Page css   ***/
/************************************/

.page-testimonial{
	padding: 100px 0 70px;
}

.client-testimonial-item{
	height: calc(100% - 30px);
	border: 1px solid var(--divider-color);
	border-radius: 40px;
	padding: 40px;
	margin-bottom: 30px;
}

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

.client-testimonial-rating{
	margin-bottom: 20px;
}

.client-testimonial-rating i{
	color: var(--accent-color);
}

.client-testimonial-content p{
	margin-bottom: 0;
}

.client-testimonial-author{
	display: flex;
	align-items: center;
}

.client-testimonial-author-content{
	width: calc(100% - 55px);
	display: flex;
	align-items: center;
}

.client-author-image{
	margin-right: 15px;
}

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

.client-author-image img{
	width: 60px;
	height: 60px;
	border-radius: 10px;
}

.client-author-content{
	width: calc(100% - 75px);
}

.client-author-content h3{
	font-size: 20px;
	font-weight: 600;
	text-transform: capitalize;
	margin-bottom: 5px;
}

.client-author-content p{
	margin: 0;
}

.client-testimonial-quote{
	margin-left: 15px;
}

.client-testimonial-quote img{
	max-width: 40px;
}

/************************************/
/***     26. Image Gallery css    ***/
/************************************/

.page-gallery{
	padding: 100px 0 70px;
}

.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{
	border-radius: 20px;
}

.page-gallery-box .photo-gallery img{
	aspect-ratio: 1 / 0.7;
	object-fit: cover;
	border-radius: 20px;
}

/************************************/
/***     27. Video Gallery css    ***/
/************************************/

.page-video-gallery{
	padding: 100px 0 70px;
}

.video-gallery-image{
	border-radius: 20px;
	overflow: hidden;
	height: calc(100% - 30px);
	margin-bottom: 30px;
}

.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: 20px;
    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{
	aspect-ratio: 1 / 0.7;
	object-fit: cover;
	border-radius: 20px;
}

/************************************/
/***      28. FAQs Page css       ***/
/************************************/

.page-faqs{
	padding: 100px 0;
}

.faq-sidebar{
	position: sticky;
	top: 30px;
	margin-right: 20px;
}

.faq-catagery-list{
	border: 1px solid var(--secondary-color);
	box-shadow: 0px 4px 30px 0px #0000000A;
	border-radius: 20px;
	padding: 30px;
	margin-bottom: 60px;
}

.faq-catagery-list ul{
	list-style: none;
	margin: 0;
	padding: 0;
}

.faq-catagery-list ul li{
    border-bottom: 1px solid var(--divider-color);
    padding-bottom: 20px;
    margin-bottom: 20px;
    transition: all 0.3s ease-in-out;
}

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

.faq-catagery-list ul li a{
	position: relative;
    display: block;
    color: var(--text-color);
    text-transform: capitalize;
    transition: all 0.3s ease-in-out;
}

.faq-catagery-list ul li:hover a{
	color: var(--accent-color);
}

.faq-catagery-list ul li a::after{
	content: '';
    position: absolute;
    top: 50%;
    right: 0;
	transform: translateY(-50%);
    background: url('../images/arrow-dark.svg') no-repeat;
    background-position: right center;
    background-size: cover;
    width: 24px;
    height: 24px;
    transition: all 0.3s ease-in-out;
}

.faq-catagery-list ul li:hover a::after{
	transform: translateY(-50%) rotate(45deg);
}

.our-faq-section.page-faq-accordion{
    margin-bottom: 60px;
}

.our-faq-section.page-faq-accordion:last-child{
    margin-bottom: 0;
}

/************************************/
/***   29. Contact Us Page css    ***/
/************************************/

.page-contact-us{
    padding: 100px 0;
	background: url(../images/about-us-bg.svg) no-repeat;
    background-position: bottom left;
    background-size: auto;
}

.contact-information{
	margin-right: 40px;
}

.contact-info-item{
    display: flex;
    flex-wrap: wrap;
	align-items: center;
	border-bottom: 1px solid var(--divider-color);
	padding-bottom: 40px;
    margin-bottom: 40px;
}

.contact-info-item:last-child{
	border: none;
	padding-bottom: 0;
    margin-bottom: 0;
}

.contact-info-item .icon-box{
	position: relative;
	background-color: var(--accent-color);
	border-radius: 10px;
	height: 60px;
	width: 60px;
	display: flex;
	justify-content: center;
	align-items: center;
    margin-right: 20px;
	transition: all 0.5s ease-in-out;
}

.contact-info-item:hover .icon-box{
	background-color: transparent;
}

.contact-info-item .icon-box::before{
	content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
	right: 0;
	bottom: 0;
    background: var(--primary-color);
    border-radius: 10px;
    width: 100%;
    height: 100%;
    transform: scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.contact-info-item:hover .icon-box::before{
	transform: scale(1);
}

.contact-info-item .icon-box img{
	position: relative;
    max-width: 30px;
	z-index: 1;
}

.contact-info-content{
    width: calc(100% - 80px);
}

.contact-info-content h3{
    font-size: 20px;
	font-weight: 600;
	text-transform: capitalize;
	margin-bottom: 5px;
}

.contact-info-content p{
    margin-bottom: 0;
}

.contact-us-form{
	background-color: var(--white-color);
	border: 1px solid var(--secondary-color);
	box-shadow: 0px 4px 30px 0px #0000000A;
	border-radius: 40px;
    padding: 40px;
}

.contact-form .form-control{
    font-size: 16px;
	font-weight: 400;
    background-color: var(--white-color);
    color: var(--text-color);
	border: 1px solid var(--divider-color);
    border-radius: 10px;
    outline: none;
    box-shadow: none;
    padding: 17px 15px;
}

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

.google-map-iframe,
.google-map-iframe iframe{
    height: 600px;
    width: 100%;
}

.google-map-iframe iframe{
    filter: grayscale(1);
    transition: all 0.4s ease-in-out;
}

.google-map-iframe iframe:hover{
    filter: grayscale(0);
}

/************************************/
/***      30. 404 Page css        ***/
/************************************/

.error-page{
	padding: 100px 0;
}

.error-page-image{
	text-align: center;
	margin-bottom: 30px;
}

.error-page-image img{
	width: 100%;
	max-width: 50%;
}

 .error-page-content{
	text-align: center;
}

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

.error-page-content-body p{
	margin-bottom: 20px;
}

/************************************/
/***      31. Responsive css      ***/
/************************************/

@media only screen and (max-width: 1366px){

	.what-we-do-content{
		padding: 100px 80px 100px 15px;
	}

	.contact-now-circle img{
		width: 100px;
		height: 100px;
	}
}

@media only screen and (max-width: 1024px){

	.what-we-do-content{
		padding: 100px 50px 100px 15px;
	}

	.contact-now-circle img{
		width: 80px;
		height: 80px;
	}
}

@media only screen and (max-width: 991px){

	.btn-default span{
		padding: 12px 15px;
	}

	.topbar{
		padding: 15px 0;
	}

	.site-logo{
		display: none;
	}

	.topbar-contact-info{
		justify-content: center;
	}

	.topbar-contact-info ul{
		margin-right: 40px;
		padding-right: 40px;
	}

	.topbar-contact-info ul li .icon-box{
		width: 35px;
		height: 35px;
		margin-right: 15px;
	}

	.topbar-contact-info li .icon-box img{
		max-width: 20px;
	}

	.topbar-contact-info ul li p{
		font-size: 18px;
		width: calc(100% - 50px);
	}

	.navbar{
		padding: 15px 0;
	}

	.main-header .navbar-brand{
		display: block;
	}

	.main-header .navbar-brand img{
		max-width: 130px;
	}

	.slicknav_nav li,
	.slicknav_nav ul{
        display: block;
    }

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

	.section-row{
		margin-bottom: 50px;
	}

	.section-title-content{
		margin-left: 0px;
		margin-top: 15px;
	}

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

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

	.section-title h3{
		margin-bottom: 15px;
	}

	.section-title h1{
		font-size: 54px;
	}

	.section-title h2{
		font-size: 40px;
	}

	.section-title p{
		margin-top: 15px;
	}

	.section-title-content{
		margin-top: 15px;
	}

	.header-social-links{
		display: none;
	}

	.hero{
		padding: 80px 0 40px;
	}

	.hero.hero-slider-layout .hero-slide{
		padding: 100px 0 150px;
	}

	.hero.hero-slider-layout .hero-pagination{
		padding-left: 15px;
		bottom: 30px;
	}

	.excellence-innovating-list{
		padding-top: 30px;
		margin-top: 80px;
	}

	.excellence-innovating-list ul{
		gap: 20px 30px;
	}

	.excellence-innovating-list ul li{
		font-size: 14px;
		padding-left: 30px;
	}

	.excellence-innovating-list ul li:before{
		width: 20px;
		height: 20px;
	}

	.about-us{
		padding: 50px 0;
		background-size: 50% auto;
	}

	.about-image{
		max-width: 80%;
		margin: 0 auto;
		margin-bottom: 30px;
		padding-top: 120px;
	}

	.company-experience{
		top: 30px;
		max-width: 195px;
	}

	.company-experience-counter h2{
		font-size: 40px;
	}

	.company-experience-content p{
		font-size: 16px;
	}

	.about-img-2 img{
		aspect-ratio: 1 / 1.1;
	}

	.about-content-list ul li{
		margin-bottom: 15px;
	}

	.about-content-list{
		margin-bottom: 30px;
	}

	.about-content-list ul li{
		padding-left: 30px;
	}

	.about-content-list ul li:before{
		width: 20px;
		height: 20px;
	}

	.genuine-rating-counter{
		padding: 40px;
	}

	.genuine-rating-counter .about-counter h2{
		font-size: 60px;
	}

	.genuine-rating-counter .genuine-rating{
		margin-bottom: 10px;
	}

	.our-services{
		padding: 50px 0 180px;
	}

	.services-list-box{
		padding: 40px;
	}

	.services-list-box .service-item{
		width: calc(50% - 30px);
	}

	.services-list-box .service-item:nth-child(2n + 2):after{
		display: none;
	}

	.service-item .icon-box{
		margin-bottom: 20px;
	}

	.service-item .icon-box img{
		max-width: 50px;
	}

	.service-body{
		margin-bottom: 30px;
	}

	.our-story{
		padding: 50px 0;
	}

	.our-story .section-row{
		margin-bottom: 30px;
	}

	.our-story-header-img{
		margin-top: 20px;
	}

	.our-story-img{
		margin-right: 0px;
		margin-bottom: 30px;
	}

	.our-story-img img{
		aspect-ratio: 1 / 0.55;
	}

	.our-story-content-body{
		margin-bottom: 40px;
		padding-bottom: 40px;
	}

	.our-story-counters{
		margin-bottom: 40px;
	}

	.our-story-counter h3{
		font-size: 40px;
	}

	.our-story-counter p{
		font-size: 18px;
	}

	.our-story-client-img .client-image img{
		max-width: 50px;
	}

	.what-we-do{
		background-position: bottom 50% left;
	}

	.what-we-do-content{
		padding: 50px 15px 70px;
		height: auto;
	}

	.what-we-do-item{
		padding: 30px 20px;
	}

	.what-we-do-item .icon-box{
		margin-bottom: 20px;
	}

	.what-we-do-footer{
		margin-top: 30px;
	}

	.what-we-do-image,
	.what-we-do-image figure,
	.what-we-do-image figure img{
		height: auto;
	}

	.what-we-do-image figure img{
		aspect-ratio: 1 / 0.77;
	}

	.contact-now-circle{
		left: 50%;
		top: 0;
		transform: translate(-50%, -50%);
	}

	.contact-now-circle img{
        width: 100px;
        height: 100px;
    }

	.our-work{
		padding: 50px 0 20px;
	}

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

	.our-Project-nav{
		margin-bottom: 40px;
	}

	.our-Project-nav ul{
		gap: 10px 30px;
	}

	.our-Project-nav ul li a:before{
		right: -20px;
	}

	.our-Project-nav ul li a{
		font-size: 14px;
	}

	.project-image{
		margin-bottom: 20px;
	}

	.project-tag{
		top: 15px;
		left: 15px;
	}

	.project-tag a{
		font-size: 14px;
	}

	.project-image figure{
		border-radius: 20px;
	}

	.project-image img{
		aspect-ratio: 1 / 0.7;
		border-radius: 30px;
	}

	.our-process{
		padding: 50px 0;
	}

	.our-process-image{
		margin-right: 0px;
		margin-bottom: 30px;
	}

	.our-process-image img{
		aspect-ratio: 1 / 0.73;
		border-radius: 30px;
	}

	.process-step-item{
		border-radius: 30px;
		padding: 20px;
	}

	.process-step-no h2{
		font-size: 40px;
	}

	.our-pricing{
		padding: 50px 0;
	}

	.pricing-box{
		border-radius: 30px;
		padding: 30px;
	}

	.pricing-box::before{
		width: 100px;
		height: 100px;
	}

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

	.pricing-title h2{
		font-size: 45px;
	}

	.pricing-title h2 sup{
		font-size: 24px;
	}

	.pricing-list{
		margin-bottom: 40px;
	}

	.pricing-list ul{
		gap: 15px;
	}

	.pricing-benefit-list{
		margin-top: 10px;
	}

	.our-testimonial{
		padding: 50px 0;
	}

	.our-testimonial-image{
		margin-right: 0px;
		margin-bottom: 30px;
	}

	.our-testimonial-image figure,
	.our-testimonial-image img{
		aspect-ratio: 1 / 0.8;
		border-radius: 30px;
	}

	.testimonial-rating{
		margin-bottom: 10px;
	}

	.testimonial-content{
		margin-bottom: 40px;
	}

	.testimonial-content p{
		font-size: 18px;
	}

	.testimonial-slider .testimonial-button-next,
	.testimonial-slider .testimonial-button-prev{
		width: 46px;
		height: 46px;
	}

	.testimonial-company-slider{
		padding-top: 40px;
		margin-top: 40px;
	}

	.our-blog{
		padding: 50px 0 20px;
	}

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

	.post-featured-image figure, 
	.post-featured-image a,
	.post-featured-image img{
		aspect-ratio: 1 / 0.73;
		border-radius: 30px;
	}

	.post-item-content{
		width: auto;
	}

	.post-item-content h2{
		font-size: 18px;
	}

	.post-item-btn{
		margin-left: 10px;
	}

	.post-item-btn a{
		width: 40px;
		height: 40px;
	}

	.main-footer{
		background-size: 50% auto;
		padding: 50px 0 0;
	}

	.footer-header{
		margin-bottom: 30px;
		padding-bottom: 30px;
	}

	.about-footer{
		max-width: 100%;
		margin-bottom: 30px;
	}

	.footer-links h3{
		margin-bottom: 20px;
	}

	.footer-links ul li{
		margin-bottom: 10px;
	}

	.footer-copyright{
		padding: 30px 0;
		margin-top: 30px;
	}

	.page-header{
		padding: 80px 0;
	}

	.page-header-box h1{
		font-size: 54px;
	}

	.mission-vision-bg{
		padding: 50px 0 150px;
	}

	.mission-vision-box{
		border-radius: 30px;
		margin-top: -150px;
	}

	.mission-vision-nav ul li .nav-link{
		font-size: 18px;
		padding: 20px;
	}

	.mission-vision-nav ul li .nav-link img{
		max-width: 30px;
		margin-right: 10px;
	}

	.mission-vision-item{
		padding: 30px;
	}

	.mission-vision-content{
		margin-bottom: 30px;
	}

	.mission-vision-content-header{
		margin-bottom: 20px;
	}

	.mission-vision-content-list ul li{
		margin-bottom: 15px;
	}

	.mission-vision-image figure{
		border-radius: 30px;
	}

	.mission-vision-image img{
		aspect-ratio: 1 / 0.53;
		border-radius: 30px;
	}

	.our-history{
		padding: 50px 0;
	}

	.our-history-box{
		gap: 30px;
	}

	.our-history-item,
	.our-history-nav{
		width: 100%;
	}

	.our-history-nav ul li .nav-link{
		padding: 20px;
	}

	.our-history-content{
		margin-bottom: 30px;
	}

	.our-history-list ul li{
		margin-bottom: 15px;
	}

	.our-history-image figure{
		border-radius: 30px;
	}

	.our-history-image img{
		aspect-ratio: 1 / 0.56;
		border-radius: 30px;
	}

	.our-features{
		padding: 50px 0;
	}

	.our-features-boxes{
		border-radius: 30px;
	}

	.our-features-item{
		padding: 20px;
	}

	.our-features-item .icon-box{
		margin-bottom: 20px;
	}

	.features-item-content h3{
		font-size: 18px;
		margin-bottom: 10px;
	}

	.our-team{
		padding: 50px 0 20px;
	}

	.team-image img{
		aspect-ratio: 1 / 1.1;
	}

	.team-image{
		margin-bottom: 15px;
	}

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

	.our-faqs-img{
		margin-bottom: 30px;
	}

	.our-faqs-img figure{
		border-radius: 30px;
	}

	.our-faqs-img figure img{
		aspect-ratio: 1 / 0.69;
		border-radius: 30px;
	}

	.faqs-img-cta-box{
		bottom: 20px;
		left: 20px;
		right: 20px;
	}

	.our-faq-section .accordion-header .accordion-button{
		font-size: 18px;
	}

	.page-services{
		padding: 50px 0 20px;
	}

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

	.service-sidebar{
		position: initial;
		margin-right: 0;
		margin-bottom: 30px;
	}

	.service-catagery-list{
		margin-bottom: 30px;
	}

	.service-catagery-list h3{
		padding: 15px 30px;
	}

	.service-catagery-list ul li{
		padding-bottom: 15px;
		margin-bottom: 15px;
	}

	.sidebar-cta-box{
		padding: 30px;
	}

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

	.sidebar-cta-content{
		margin-bottom: 20px;
	}

	.sidebar-cta-content h3{
		font-size: 34px;
	}

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

	.service-featured-image figure{
		border-radius: 30px;
	}

	.service-featured-image img{
		aspect-ratio: 1 / 0.6;
		border-radius: 30px;
	}

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

	.service-entry h2{
		font-size: 40px;
	}

	.service-entry-box{
		gap: 40px 30px;
		margin: 20px 0;
	}

	.service-entry-item::before{
		transform: translateY(20px);
	}

	.service-entry-item .icon-box{
		margin-bottom: 20px;
	}

	.service-entry-item .icon-box img{
		max-width: 40px;
	}

	.service-entry-item-content h3{
		margin-bottom: 15px;
	}

	.service-entry-img figure,
	.service-entry-img img{
		aspect-ratio: 1 / 0.89;
		border-radius: 30px;
	}

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

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

	.page-blog .post-featured-image img{
		aspect-ratio: 1 / 0.81;
	}

	.page-blog .post-item .post-item-content{
		margin-bottom: 15px;
	}

	.page-pagination{
        margin-top: 10px;
    }

	.page-projects{
		padding: 50px 0 20px;
	}

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

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

	.post-entry blockquote{
		background-position: 25px 25px;
        background-size: 50px;
        padding: 25px 25px 25px 90px;
        margin-bottom: 20px;
	}

	.post-entry blockquote p{
		font-size: 18px;
	}

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

	.post-entry ul li{
		font-size: 16px;
	}

	.post-tags{
		margin-bottom: 20px;
	}

	.post-social-sharing ul{
		text-align: left;
	}

	.tag-links{
		font-size: 22px;
	}

	.post-tags .tag-links a{
		font-size: 16px;
		padding: 6px 15px;
	}

	.page-project-single{
		padding: 50px 0;
	}

	.project-sidebar{
		position: initial;
		margin-right: 0px;
		margin-bottom: 30px;
	}

	.project-detail-box{
		margin-bottom: 30px;
	}

	.project-detail-title{
		padding: 15px 30px;
	}

	.project-detail-list{
		padding: 30px;
	}

	.project-detail-item{
		padding-bottom: 15px;
		margin-bottom: 15px;
	}

	.project-single-image{
		margin-bottom: 20px;
	}

	.project-single-image figure{
		border-radius: 30px;
	}

	.project-single-image img{
        aspect-ratio: 1 / 0.6;
		border-radius: 30px;
    }

	.project-entry{
		margin-bottom: 30px;
	}

	.project-info,
	.project-goal{
		margin-bottom: 30px;
	}

	.project-entry h2{
		font-size: 40px;
	}

	.project-entry ul{
		gap: 10px;
	}

	.project-entry ul li{
		width: calc(50% - 5px);
		padding-left: 30px;
		font-size: 14px;
	}

	.project-entry ul li::before{
		width: 20px;
		height: 20px;
	}

	.project-query-item{
		margin-bottom: 30px;
	}

	.project-query-box ul{
		margin-bottom: 0;
	}

	.project-query-box ul li{
		width: 100%;
	}

	.project-query-img figure,
	.project-query-img img{
		border-radius: 30px;
	}

	.page-team{
		padding: 50px 0 20px;
	}

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

	.team-member-sidebar{
		position: initial;
		margin-right: 0;
		margin-bottom: 30px;
	}

	.team-member-box{
		padding: 20px;
		margin-bottom: 30px;
	}

	.team-member-image{
		margin-bottom: 20px;
	}

	.team-member-image img{
		aspect-ratio: 1 / 0.85;
		object-position: top center;
	}

	.team-detail-title{
		padding: 15px 20px;
	}

	.team-detail-list{
		padding: 20px;
	}

	.team-detail-item{
		padding-bottom: 15px;
		margin-bottom: 15px;
	}

	.team-member-info,
	.team-member-skills-feature{
		margin-bottom: 30px;
	}

	.team-member-content h2{
		font-size: 34px;
	}

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

	.skills-progress-bar .skillbar .skill-progress{
		height: 12px;
	}

	.team-member-content ul li{
		padding-left: 30px;
	}

	.team-member-content ul li::before{
		width: 20px;
		height: 20px;
	}

	.page-pricing{
		padding: 50px 0;
	}

	.page-testimonial{
		padding: 50px 0 20px;
	}

	.client-testimonial-item{
		padding: 30px;
	}

	.client-testimonial-item-content{
		margin-bottom: 30px;
	}

	.client-testimonial-rating{
		margin-bottom: 10px;
	}

	.client-author-image{
		margin-right: 10px;
	}

	.client-author-image img{
		width: 50px;
		height: 50px;
		border-radius: 10px;
	}

	.client-author-content{
		width: calc(100% - 60px);
	}

	.client-author-content h3{
		font-size: 18px;
	}

	.page-gallery{
		padding: 50px 0 20px;
	}

	.page-video-gallery{
		padding: 50px 0 20px;
	}

	.page-faqs{
		padding: 50px 0;
	}
	
	.faq-sidebar{
		position: initial;
		margin-right: 0;
		margin-bottom: 30px;
	}
	
	.faq-catagery-list{
		margin-bottom: 30px;
	}
	
	.faq-catagery-list ul li{
		padding-bottom: 15px;
		margin-bottom: 15px;
	}
	
	.faq-catagery-list ul li a::after{
		width: 22px;
		height: 22px;
	}
	
	.our-faq-section.page-faq-accordion{
		margin-bottom: 30px;
	}	

	.page-contact-us{
		padding: 50px 0;
		background-size: 50% auto;
	}

	.contact-information{
		margin-right: 0;
		margin-bottom: 30px;
	}

	.contact-info-item{
		padding-bottom: 30px;
		margin-bottom: 30px;
	}

	.contact-info-item .icon-box{
		height: 50px;
		width: 50px;
	}

	.contact-info-item .icon-box img{
		max-width: 24px;
	}

	.contact-info-content{
		width: calc(100% - 70px);
	}

	.contact-us-form{
		border-radius: 30px;
		padding: 30px;
	}

	.google-map-iframe,
	.google-map-iframe iframe{
		height: 450px;
	}

	.error-page{
		padding: 50px 0;
	}
	
	.error-page-image{
		margin-bottom: 20px;
	}

	.error-page-image img{
		max-width: 80%;
	}
}

@media only screen and (max-width: 767px){

	.topbar{
        padding: 10px 0;
    }

	.topbar-contact-info ul{
        margin-right: 0px;
        padding-right: 0px;
		border: none;
    }

	.topbar-contact-info ul li .icon-box{
        width: 30px;
        height: 30px;
        margin-right: 10px;
    }

	.topbar-contact-info li .icon-box img{
        max-width: 16px;
    }

	.topbar-contact-info ul li p{
        font-size: 14px;
        width: calc(100% - 40px);
	}

	.topbar-qoute-btn{
		display: none;
	}

	.section-row{
        margin-bottom: 30px;
    }

	.section-title h1{
        font-size: 34px;
    }

	.section-title h2{
        font-size: 28px;
    }

	.excellence-innovating-list ul{
		gap: 15px;
	}

	.excellence-innovating-list ul li{
		width: 100%;
	}

	.about-image{
		max-width: 100%;
		padding-top: 90px;
	}

	.about-img-1{
		max-width: 200px;
	}

	.about-img-2 figure,
	.about-img-1 figure{
		border-radius: 30px;
	}

	.about-img-2 img,
	.about-img-1 figure img{
		border-radius: 30px;
	}

	.about-img-2{
		max-width: 250px;
	}
	
	.company-experience{
		display: block;
		top: 15px;
	}

	.company-experience-counter{
		width: 100%;
	}

	.company-experience-counter h2{
        font-size: 30px;
    }

	.company-experience-content{
		width: 100%;
	}

	.company-experience-content p{
        font-size: 14px;
    }

	.about-list-btn{
		margin-bottom: 30px;
	}

	.genuine-rating-counter{
		border-radius: 30px;
        padding: 30px;
    }

	.genuine-rating-counter .about-counter h2{
		font-size: 40px;
	}

	.services-list-box{
		border-radius: 30px;
        padding: 20px 15px;
		gap: 30px 10px;
    }

	.services-list-box .service-item{
        width: 100%;
    }

	.services-list-box .service-item:after{
		display: none;
	}

	.service-body,
	.service-item .icon-box{
        margin-bottom: 15px;
    }

	.service-body{
		margin-bottom: 20px;
	}

	.service-body h3{
        font-size: 18px;
    }

	.service-item .service-footer a{
		width: 60px;
		height: 30px;
	}

	.our-story-img figure,
	.our-story-img img,
	.our-story-header-img figure,
	.our-story-header-img figure img{
		border-radius: 20px;
	}

	.our-story-content-body{
        margin-bottom: 30px;
        padding-bottom: 30px;
    }

	.our-story-counters{
		gap: 15px;
		margin-bottom: 30px;
	}

	.our-story-counter{
		width: calc(33.33% - 10px);
	}

	.our-story-counter h3{
        font-size: 30px;
    }

	.our-story-counter p{
		font-size: 16px;
	}

	.our-story-client-img{
		margin-right: 30px;
	}

	.video-play-button a{
		height: 56px;
		width: 56px;
		margin-right: 10px;
	}

	.what-we-do-item{
		border-radius: 30px;
		width: 100%;
	}

	.what-we-do-list-box-2 .what-we-do-item:nth-child(odd){
		background: transparent;
	}

	.what-we-do-list-box-2 .what-we-do-item:nth-child(even){
		background: var(--dark-divider-color);
	}

	.what-we-item-content h3{
		font-size: 18px;
	}

	.project-tag a{
		padding: 8px 10px;
	}

	.project-content h3{
		font-size: 18px;
	}

	.process-step-no{
		margin-right: 10px;
	}

	.process-step-no h2{
        font-size: 30px;
    }

	.process-step-content h3{
		font-size: 18px;
	}

	.pricing-box{
        padding: 30px 20px;
    }

	.pricing-title{
        margin-bottom: 30px;
    }

	.pricing-title h2{
        font-size: 30px;
    }

	.pricing-title h2 sup{
        font-size: 18px;
    }

	.pricing-title h3{
		font-size: 18px;
	}

	.pricing-list{
        margin-bottom: 30px;
    }

	.pricing-list ul li{
		padding-left: 30px;
	}

	.pricing-list ul li::before{
		width: 20px;
		height: 20px;
	}

	.pricing-benefit-list ul{
        gap: 10px 15px;
    }

    .pricing-benefit-list ul li{
        width: calc(50% - 7.5px);
        font-size: 12px;
    }

    .pricing-benefit-list ul li img{
        max-width: 18px;
        margin-right: 5px;
    }

	.testimonial-content{
		margin-bottom: 20px;
	}

	.testimonial-content p{
		font-size: 16px;
	}

	.testimonial-body .author-content h3{
		font-size: 18px;
	}

	.testimonial-btn{
		position: initial;
		justify-content: left;
	}

	.testimonial-slider .testimonial-button-next,
	.testimonial-slider .testimonial-button-prev{
		width: 40px;
		height: 40px;
	}

	.testimonial-slider .testimonial-button-next{
		margin-left: 15px;
	}

	.testimonial-company-slider{
		padding-top: 30px;
		margin-top: 30px;
	}

	.main-footer{
        background-size: 100% auto;
    }

	.footer-header{
		display: block;
	}

	.footer-contact-circle{
		margin-left: 0;
		margin-top: 20px;
	}

	.footer-contact-circle img{
		max-width: 100px;
	}

	.footer-links{
		margin-bottom: 30px;
	}

	.footer-links h3{
		font-size: 18px;
        margin-bottom: 15px;
    }

	.footer-copyright{
        padding: 15px 0;
        margin-top: 0px;
    }

	.page-header-box h1{
        font-size: 34px;
    }

	.mission-vision-nav ul li .nav-link{
		display: grid;
		justify-content: center;
        font-size: 16px;
        padding: 10px;
    }

	.mission-vision-nav ul li .nav-link img{
        max-width: 25px;
        margin: 0 auto;
		margin-bottom: 5px;
    }

	.mission-vision-item{
        padding: 20px 15px;
    }

	.mission-vision-content-list ul li{
		font-size: 14px;
		padding-left: 30px;
		margin-bottom: 10px;
	}

	.mission-vision-content-list ul li:before{
		width: 20px;
		height: 20px;
	}

	.mission-vision-image img{
        aspect-ratio: 1 / 0.73;
    }

	.our-history-nav ul li .nav-link{
        padding: 10px;
		font-size: 18px;
    }

	.our-history-list ul li{
		font-size: 14px;
		padding-left: 30px;
		margin-bottom: 10px;
	}

	.our-history-list ul li:before{
		width: 20px;
		height: 20px;
	}

	.our-history-image img{
        aspect-ratio: 1 / 0.76;
    }

	.our-features-item{
       width: 100%;
    }

	.our-features-item:nth-child(1n + 1){
		border-right: none;
	}

	.our-features-item.features-image-box img{
		aspect-ratio: 1 / 0.81;
	}

	.team-content h3{
		font-size: 18px;
	}

	.our-faqs-img figure img{
        aspect-ratio: 1 / 0.89;
    }

	.faqs-img-cta-box ul li{
		margin-right: 0px;
		margin-bottom: 5px;
	}

	.faqs-img-cta-box ul li:last-child{
		margin-bottom: 0;
	}

	.faqs-img-cta-box ul li a img{
		max-width: 24px;
		margin-right: 10px;
	}

	.faqs-img-cta-box ul li a{
		font-size: 18px;
	}

	.our-faq-section .accordion-header .accordion-button{
		font-size: 16px;
		padding: 12px 35px 12px 12px;
	}

	.our-faq-section .accordion-item .accordion-button::after,
	.our-faq-section .accordion-item .accordion-button.collapsed::after{
		right: 12px;
		font-size: 14px;
	}

	.our-faq-section .accordion-item .accordion-body{
		background: var(--accent-color);
		padding: 12px;
	}

	.page-services .service-item{
		border-radius: 30px;
		padding: 20px 15px;
	}

	.service-catagery-list h3{
		font-size: 18px;
		padding: 15px 20px;
	}

	.service-catagery-list ul{
		padding: 20px;
	}

	.service-catagery-list ul li a::before{
		width: 20px;
		height: 20px;
	}

	.sidebar-cta-box{
        padding: 20px;
    }

	.sidebar-cta-content h3{
        font-size: 28px;
    }

	.cta-contact-item-title h3{
		font-size: 18px;
	}

	.service-featured-image img{
        aspect-ratio: 1 / 0.85;
    }

	.service-entry h2{
        font-size: 28px;
    }

	.service-entry-item{
		width: 100%;
	}

	.service-entry-item:nth-last-child(-n + 2)::before{
		display: block;
	}

	.service-entry-item:last-child::before{
		display: none;
	}

	.service-entry-item-content h3{
		font-size: 18px;
		margin-bottom: 10px;
	}

	.service-entry ul{
		gap: 10px;
		margin-bottom: 30px;
	}

	.service-entry ul li{
		width: 100%;
		padding-left: 30px;
	}

	.service-entry ul li::before{
		width: 20px;
		height: 20px;
	}

	.service-entry-img{
		width: 100%;
	}

	.post-image figure,
	.post-image img{
		aspect-ratio: 1 / 0.70;
		border-radius: 30px;
	}

	.post-entry blockquote{
		background-position: 15px 15px;
        padding: 65px 15px 15px 15px;
	}
	
	.post-entry h2{
		font-size: 28px;
	}

	.tag-links{
		font-size: 20px;
	}

	.project-detail-title{
        padding: 15px 20px;
    }

	.project-detail-title h3{
		font-size: 18px;
	}

	.project-detail-list{
        padding: 20px;
    }

	.project-detail-content h3{
		margin-bottom: 0;
	}

	.project-single-image img{
        aspect-ratio: 1 / 0.85;
    }

	.project-entry h2{
        font-size: 28px;
		margin-bottom: 15px;
    }

	.project-entry p{
		margin-bottom: 15px;
	}

	.project-entry ul{
        margin-bottom: 15px;
    }

	.project-entry ul li{
		width: 100%;
    }

	.project-query-content,
	.project-query-img{
		width: 100%;
	}

	.project-query-item{
		gap: 20px;
	}

	.project-query-box ul{
        margin-bottom: 0;
    }

	.team-member-image img{
        aspect-ratio: 1 / 0.99;
    }

	.team-member-name{
		margin-bottom: 15px;
	}

	.team-member-name h3{
		font-size: 18px;
	}

	.team-detail-title h3{
		font-size: 18px;
	}

	.team-member-info,
	.team-member-skills-feature{
        margin-bottom: 20px;
    }

	.team-member-content h2{
        font-size: 28px;
		margin-bottom: 15px;
    }

	.team-member-content p{
		margin-bottom: 15px;
	}

	.team-member-skills-feature{
		gap: 20px;
	}

	.team-member-skills,
	.team-member-feature{
		width: 100%;
	}

	.client-testimonial-item{
		border-radius: 30px;
		padding: 20px;
	}

	.client-testimonial-item-content{
        margin-bottom: 20px;
    }

	.faq-catagery-list{
		padding: 20px;
	}

	.contact-info-item{
        margin-bottom: 20px;
    }

	.contact-info-item .icon-box{
		margin-right: 10px;
    }

	.contact-info-content{
        width: calc(100% - 60px);
    }

	.contact-info-content h3{
		font-size: 18px;
	}

	.contact-us-form{
        padding: 20px;
    }

	.contact-form .form-control{
		padding: 12px;
	}

	.google-map-iframe,
	.google-map-iframe iframe{
        height: 350px;
    }
}

/************************************/
/***   An-Nur Custom Overrides    ***/
/************************************/

/* Logo topbar (logo-2.svg) — batasi tinggi agar tidak melebihi kolom */
.site-logo img{
	max-height: 52px;
	width: auto;
	max-width: 100%;
}

/* Logo navbar sticky (logo-1.svg) */
.main-header .navbar-brand img{
	max-height: 36px;
	width: auto;
}

/* Rapikan bar sticky: jarak logo & cegah teks menu bertumpuk */
.main-header .header-sticky.active-sticky-header.hide .navbar-brand{
	margin-right: 24px;
}

.main-header .header-sticky.active .main-menu > .nav-menu-wrapper > ul > li.nav-item > .nav-link{
	font-size: 15px !important;
	padding: 10px 12px !important;
}

.main-header .header-sticky.active .nav-menu-wrapper > ul{
	flex-wrap: nowrap;
}

/* --- Menu utama --- */

/* Label menu tidak boleh patah 2 baris */
.main-menu ul li.nav-item .nav-link{
	white-space: nowrap;
}

/* Jarak antar menu konsisten & seimbang */
.main-menu > .nav-menu-wrapper > ul > li.nav-item > .nav-link{
	padding: 10px 16px;
	letter-spacing: 0.01em;
}

/* Menu pertama tetap rata kiri dengan container (bawaan template) */
.main-menu > .nav-menu-wrapper > ul > li.nav-item:first-child > .nav-link{
	padding-left: 0;
}

/* Garis aksen tipis saat hover / halaman aktif
   (pakai ::before karena ::after sudah dipakai panah dropdown) */
.main-menu > .nav-menu-wrapper > ul > li.nav-item > .nav-link::before{
	content: '';
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 2px;
	height: 2px;
	background: var(--accent-color);
	border-radius: 2px;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.3s ease-in-out;
}

.main-menu > .nav-menu-wrapper > ul > li.nav-item:first-child > .nav-link::before{
	left: 0;
}

.main-menu > .nav-menu-wrapper > ul > li.nav-item:hover > .nav-link::before,
.main-menu > .nav-menu-wrapper > ul > li.nav-item > .nav-link.active::before{
	transform: scaleX(1);
}

.main-menu > .nav-menu-wrapper > ul > li.nav-item > .nav-link.active{
	color: var(--accent-color);
}

/* Panah dropdown: pakai pseudo-element bawaan, tambah animasi putar */
.main-menu ul li.submenu > a:after{
	position: static;
	display: inline-block;
	transition: transform 0.3s ease-in-out;
}

.main-menu ul li.submenu:hover > a:after{
	transform: rotate(-180deg);
}

/* --- Dropdown --- */

/* Lebar mengikuti isi (label sekolah panjang tidak terpotong) */
.main-menu ul ul,
.main-menu ul li.submenu:first-child ul{
	width: auto;
	min-width: 240px;
	padding: 10px 0;
	border-radius: 14px;
	box-shadow: 0 18px 40px rgba(0, 3, 94, 0.18);
}

.main-menu ul li:hover > ul{
	padding: 10px 0;
}

.main-menu ul ul li.nav-item .nav-link{
	font-size: 15px;
	font-weight: 500;
	padding: 9px 22px !important;
	border-left: 2px solid transparent;
	transition: all 0.25s ease-in-out;
}

/* Hover item dropdown: geser halus + penanda garis, bukan lompat padding */
.main-menu ul ul li .nav-link:hover,
.main-menu ul ul li .nav-link:focus{
	color: var(--primary-color);
	background-color: rgba(255, 255, 255, 0.18);
	border-left-color: var(--primary-color);
	padding: 9px 22px 9px 26px !important;
}

.main-header .header-sticky.active .header-social-box{
	display: none !important;
}

/* --- Kartu Jenjang Pendidikan (pricing-box) --- */

/* Hapus ikon dekoratif di pojok kanan atas kartu */
.pricing-box::before{
	display: none;
}

/* Baris header kartu: logo di kiri, teks judul di kanan */
.pricing-header{
	display: flex;
	align-items: center;
	gap: 18px;
	margin-bottom: 45px;
	position: relative;
	z-index: 1;
}

/* Kolom logo sekolah: ukuran seragam agar ketiga kartu tetap sejajar */
.pricing-logo{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 88px;
	height: 96px;
	flex-shrink: 0;
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 16px;
	padding: 10px;
}

.pricing-box.highlighted-box .pricing-logo{
	border-color: transparent;
	box-shadow: 0 8px 24px rgba(0, 3, 94, 0.15);
}

.pricing-logo img{
	max-height: 76px;
	max-width: 68px;
	width: auto;
	object-fit: contain;
}

/* Penataan teks di samping logo: skala tipografi disinkronkan */
.pricing-header .pricing-title{
	margin-bottom: 0;
	min-width: 0;
}

/* Baris 1: angka + label program (rata baseline, rapat) */
.pricing-header .pricing-title h2{
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	column-gap: 8px;
	row-gap: 2px;
	font-size: 30px;
	line-height: 1;
	margin-bottom: 8px;
}

.pricing-header .pricing-title h2 sup{
	font-size: 16px;
	top: auto;
}

.pricing-header .pricing-title h2 sub{
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	line-height: 1.35;
	bottom: 0;
	margin-left: 0;
}

/* Baris 2: nama sekolah */
.pricing-header .pricing-title h3{
	font-size: 18px;
	font-weight: 600;
	line-height: 1.4em;
}

/* --- Section Aplikasi Pesantren (slider kartu aplikasi) --- */

.our-apps{
	padding: 100px 0;
	background: var(--white-color);
}

.apps-slider .swiper{
	padding: 10px 5px 20px;
}

/* Kartu aplikasi: bisa diklik seluruhnya */
.app-item{
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	height: 100%;
	background: var(--secondary-color);
	border: 1px solid var(--divider-color);
	border-radius: 30px;
	padding: 35px 25px 30px;
	transition: all 0.4s ease-in-out;
}

.app-item:hover{
	background: var(--primary-color);
	border-color: var(--primary-color);
	transform: translateY(-8px);
	box-shadow: 0 20px 45px rgba(0, 3, 94, 0.2);
}

/* Kotak logo aplikasi */
.app-item .app-logo{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 92px;
	height: 92px;
	background: var(--white-color);
	border-radius: 22px;
	padding: 14px;
	margin-bottom: 25px;
	transition: all 0.4s ease-in-out;
}

.app-item:hover .app-logo{
	transform: scale(1.05);
}

.app-item .app-logo img{
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.app-item h3{
	font-size: 20px;
	font-weight: 600;
	color: var(--primary-color);
	margin-bottom: 10px;
	transition: all 0.4s ease-in-out;
}

.app-item p{
	font-size: 15px;
	color: var(--text-color);
	line-height: 1.6em;
	margin-bottom: 25px;
	transition: all 0.4s ease-in-out;
}

.app-item:hover h3,
.app-item:hover p{
	color: var(--white-color);
}

/* Tombol "Buka Aplikasi" ala service-btn template */
.app-item .app-link{
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: auto;
	background: var(--white-color);
	border-radius: 10px;
	padding: 10px 18px;
	transition: all 0.4s ease-in-out;
}

.app-item .app-link span{
	font-size: 15px;
	font-weight: 600;
	color: var(--primary-color);
}

.app-item .app-link img{
	max-width: 16px;
	transform: rotate(45deg);
	transition: all 0.4s ease-in-out;
}

.app-item:hover .app-link{
	background: var(--accent-color);
}

.app-item:hover .app-link span{
	color: var(--white-color);
}

.app-item:hover .app-link img{
	filter: brightness(0) invert(1);
	transform: rotate(45deg) translate(2px, -2px);
}

/* Pagination slider aplikasi (pola hero-pagination) */
.apps-pagination{
	text-align: center;
	margin-top: 10px;
}

.apps-pagination .swiper-pagination-bullet{
	width: 10px;
	height: 10px;
	background: var(--divider-color);
	opacity: 1;
	transition: all 0.3s ease-in-out;
	margin: 0 5px;
}

.apps-pagination .swiper-pagination-bullet-active{
	background-color: var(--accent-color);
	width: 26px;
	border-radius: 6px;
}

@media only screen and (max-width: 767px){
	.our-apps{
		padding: 50px 0;
	}
}

/* --- Section Guru & Karyawan (slider foto membesar di tengah) --- */

.our-team{
	padding: 100px 0;
	background: var(--secondary-color);
}

.team-slider .swiper{
	padding: 20px 0 25px;
}

/* Kartu foto guru/karyawan */
.team-card{
	position: relative;
	border-radius: 30px;
	overflow: hidden;
}

.team-card figure{
	margin: 0;
}

.team-card figure img{
	width: 100%;
	height: 400px;
	object-fit: cover;
	object-position: top center;
	display: block;
}

/* Overlay gradasi navy + nama & jabatan */
.team-card .team-info{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 60px 25px 22px;
	background: linear-gradient(180deg, rgba(0, 3, 94, 0) 0%, rgba(0, 3, 94, 0.85) 70%);
}

.team-card .team-info h3{
	font-size: 20px;
	font-weight: 700;
	color: var(--white-color);
	margin-bottom: 4px;
}

.team-card .team-info p{
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--accent-color);
	margin: 0;
}

/* Animasi 2D: slide samping kecil & redup, slide tengah membesar */
.team-slider .swiper-slide{
	transform: scale(0.85);
	opacity: 0.6;
	transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
}

.team-slider .swiper-slide-active{
	transform: scale(1);
	opacity: 1;
}

.team-slider .swiper-slide-active .team-card{
	box-shadow: 0 20px 45px rgba(0, 3, 94, 0.2);
}

/* Pagination (pola sama dengan slider aplikasi) */
.team-pagination{
	text-align: center;
	margin-top: 5px;
}

.team-pagination .swiper-pagination-bullet{
	width: 10px;
	height: 10px;
	background: var(--divider-color);
	opacity: 1;
	transition: all 0.3s ease-in-out;
	margin: 0 5px;
}

.team-pagination .swiper-pagination-bullet-active{
	background-color: var(--accent-color);
	width: 26px;
	border-radius: 6px;
}

/* Tombol lihat semua */
.team-btn{
	text-align: center;
	margin-top: 30px;
}

@media only screen and (max-width: 767px){
	.our-team{
		padding: 50px 0;
	}

	.team-card figure img{
		height: 340px;
	}
}

/* --- Footer: dua logo navbar SATU BARIS dipisah garis putih --- */
.footer-logo.footer-logo-double{
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	width: max-content;
	max-width: none;
	gap: 20px;
}

.footer-logo.footer-logo-double img{
	height: 38px;
	width: auto;
	max-width: none;
	flex-shrink: 0;
}

/* logo-2 aslinya hitam -> jadikan putih agar terlihat di footer gelap */
.footer-logo-invert{
	filter: brightness(0) invert(1);
}

/* Garis putih pemisah antar logo */
.footer-logo-divider{
	width: 1px;
	height: 36px;
	background: rgba(255, 255, 255, 0.4);
	flex-shrink: 0;
}

@media only screen and (max-width: 767px){
	.footer-logo.footer-logo-double{
		gap: 14px;
	}
	.footer-logo.footer-logo-double img{
		height: 26px;
	}
	.footer-logo-divider{
		height: 24px;
	}
}

/* --- Hero slide: ikuti aspek 16:9 poster agar tidak terpotong --- */
.hero.hero-slider-layout .hero-slide{
	aspect-ratio: 16 / 9;
	padding: 0;
	display: flex;
	align-items: center;
	overflow: hidden;
}

.hero.hero-slider-layout .hero-slide .container{
	width: 100%;
}

/* Video YouTube sebagai latar slide (cover, 16:9) */
.hero.hero-slider-layout .hero-slide .hero-slider-video{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow: hidden;
	z-index: 0;
}

.hero.hero-slider-layout .hero-slide .hero-slider-video iframe{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
	pointer-events: none;
	border: 0;
}

/* Mobile: 16:9 terlalu pendek utk teks -> beri tinggi minimum, fokus tengah */
@media only screen and (max-width: 991px){
	.hero.hero-slider-layout .hero-slide{
		aspect-ratio: auto;
		min-height: 460px;
		padding: 90px 0;
	}
	.hero.hero-slider-layout .hero-slide .hero-slider-image img{
		object-position: center;
	}
	/* Mobile: video tetap cover tanpa distorsi (aspek container bukan 16:9) */
	.hero.hero-slider-layout .hero-slide .hero-slider-video iframe{
		width: auto;
		height: 100%;
		min-width: 100%;
		aspect-ratio: 16 / 9;
	}
}

/* --- Marquee logo unit usaha (CSS animation, bergerak pelan terus, looping) --- */
.testimonial-company-slider .swiper{
	overflow: hidden;
}

/* track memanjang mengikuti isi lalu digeser -50% (loop mulus krn slide digandakan) */
.testimonial-company-slider .swiper-wrapper{
	width: max-content;
	transform: none;
	animation: annur-logo-marquee 55s linear infinite;
	will-change: transform;
}

/* jeda saat kursor di atas deretan logo */
.testimonial-company-slider:hover .swiper-wrapper{
	animation-play-state: paused;
}

@keyframes annur-logo-marquee{
	from{ transform: translateX(0); }
	to{ transform: translateX(-50%); }
}

/* tiap slide selebar isinya, spacing seragam */
.testimonial-company-slider .swiper-slide{
	width: auto;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Samakan TINGGI semua logo (lebar mengikuti) -> logo-strip rapi & seragam */
.testimonial-company-slider .company-logo{
	display: flex;
	align-items: center;
	justify-content: center;
	height: 80px;
	padding: 0 32px;
}

.testimonial-company-slider .company-logo img{
	height: 46px;
	width: auto;
	max-width: 280px;
	max-height: none;
	object-fit: contain;
	opacity: 0.85;
	transition: opacity 0.3s ease-in-out;
}

/* Penyesuaian optik per-logo (aspek ekstrem / whitespace bawaan PNG) */
.testimonial-company-slider .company-logo img[src*="logo-fest"],
.testimonial-company-slider .company-logo img[src*="ac.png"]{
	height: 54px;   /* logo kotak/emblem: sedikit dinaikkan agar setara massa visual */
}

.testimonial-company-slider .company-logo img[src*="logo-htq"]{
	height: 64px;   /* emblem HTQ padat -> dibesarkan agar sinkron */
}

.testimonial-company-slider .company-logo img[src*="marc.png"]{
	height: 52px;   /* logo portrait tinggi */
}

/* Wordmark lebar (AM Publisher, AM Corner, Forwas) -> dikecilkan sedikit agar sinkron */
.testimonial-company-slider .company-logo img[src*="logoam"],
.testimonial-company-slider .company-logo img[src*="logoacr"],
.testimonial-company-slider .company-logo img[src*="logof."]{
	height: 40px;
}

.testimonial-company-slider .company-logo img:hover{
	opacity: 1;
}

/* --- Avatar inisial testimoni alumni (pengganti foto stok) --- */
.testimonial-body .author-image .author-initial{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	border-radius: 10px;
	background: var(--primary-color);
	color: var(--white-color);
	font-size: 22px;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1;
}

/* Animasi kemunculan logo-1 saat navbar menjadi sticky */
.main-header .header-sticky.active .navbar-brand img{
	animation: annur-logo-in 0.5s ease-out both;
}

@keyframes annur-logo-in{
	from{ opacity: 0; transform: translateY(-16px); }
	to{ opacity: 1; transform: translateY(0); }
}

/* ============================================================
   MOBILE RESPONSIVE ENHANCEMENTS (UI/UX Pro Max)
   ============================================================ */

/* Cegah scroll horizontal tak sengaja & hilangkan jeda tap 300ms.
   Pakai clip (bukan hidden) agar position: sticky tetap berfungsi. */
html, body{ overflow-x: clip; }
a, button, .btn-default, .nav-link, .service-btn, .app-item, .app-link,
.slicknav_btn, .swiper-pagination-bullet{ touch-action: manipulation; }

/* Hormati preferensi "kurangi gerakan" (aksesibilitas) */
@media (prefers-reduced-motion: reduce){
	*, *::before, *::after{
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	.testimonial-company-slider .swiper-wrapper{ animation: none !important; }
}

@media only screen and (max-width: 991px){
	/* Menu mobile (slicknav): baris lebih tinggi & mudah disentuh jempol */
	.slicknav_nav a{
		padding: 12px 12px !important;
		font-size: 16px;
	}
	.slicknav_nav .slicknav_row{ padding: 12px 12px !important; }
	.slicknav_btn{
		min-width: 44px;
		min-height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

@media only screen and (max-width: 767px){
	/* Teks konten minimal 16px agar nyaman dibaca di HP */
	.section-title-content p,
	.hero-content p,
	.about-us p,
	.our-story p,
	.our-testimonial-content > .section-title + p,
	.testimonial-content p,
	.app-item p{
		font-size: 16px;
		line-height: 1.7em;
	}

	/* Touch target >= 44px untuk elemen interaktif utama */
	.btn-default span{ padding: 14px 22px; }

	.service-item .service-footer a{
		width: 56px;
		height: 48px;
	}

	.app-item .app-link{
		min-height: 46px;
		padding: 12px 20px;
	}

	.footer-social-links ul li a,
	.header-social-links ul li a{
		min-width: 44px;
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.topbar-contact-info ul li a{
		padding: 8px 0;
	}

	/* Umpan balik sentuh: sedikit meredup saat ditekan */
	.btn-default:active,
	.app-item:active,
	.service-item:active{ opacity: 0.85; }

	/* Area sentuh pagination (bullet) lebih longgar */
	.apps-pagination, .team-pagination{ padding: 8px 0; }
}


/* ============================================================
   SERVICE LIST — kolom sempurna (ikon seragam, tombol sejajar)
   ============================================================ */

/* Item jadi kolom flex supaya tombol bisa didorong ke dasar */
.services-list-box .service-item{
	display: flex;
	flex-direction: column;
}

/* Kotak ikon tinggi tetap + ikon dibatasi 2 sisi -> semua ikon setara */
.service-item .icon-box{
	height: 60px;
	display: flex;
	align-items: center;
	margin-bottom: 28px;
}
.service-item .icon-box img{
	width: 56px;
	height: 56px;
	max-width: 56px;
	object-fit: contain;
}

/* Judul cadangkan 2 baris -> ritme antar kartu seragam */
.service-body{
	margin-bottom: 28px;
}
.service-body h3{
	min-height: 52px;
	line-height: 1.3em;
}

/* Tombol panah menempel ke dasar -> sejajar di semua kolom */
.service-item .service-footer{
	margin-top: auto;
}

/* Mobile/tablet: garis pemisah vertikal antar-kolom disembunyikan */
@media only screen and (max-width: 991px){
	.services-list-box{
		gap: 34px 40px;
	}
	.services-list-box .service-item:after{
		display: none;
	}
	.service-body h3{
		min-height: 0;
	}
	.service-body{
		margin-bottom: 22px;
	}
}


/* ============================================================
   TOPBAR — disinkronkan (desktop lebih ramping, mobile rapi)
   ============================================================ */

/* Desktop: kecilkan proporsi agar tidak terlalu besar */
.topbar{
	padding: 13px 0;
}
.topbar-contact-info ul{
	margin-right: 30px;
	padding-right: 30px;
}
.topbar-contact-info ul li .icon-box{
	width: 36px;
	height: 36px;
}
.topbar-contact-info li .icon-box img{
	max-width: 18px;
}
.topbar-contact-info ul li p{
	font-size: 15px;
	font-weight: 600;
	width: auto;
	white-space: nowrap;
}

/* Tablet: proporsional */
@media only screen and (max-width: 991px){
	.topbar{ padding: 11px 0; }
	.topbar-contact-info ul li p{ font-size: 15px; }
	.topbar-contact-info ul li .icon-box{ width: 34px; height: 34px; }
}

/* Mobile: satu baris rapi -> Telepon (tappable) + tombol Daftar PPDB.
   Email disembunyikan di topbar (tetap tersedia di footer). */
@media only screen and (max-width: 767px){
	.topbar{ padding: 9px 0; }

	.topbar-contact-info{
		justify-content: space-between;
		flex-wrap: nowrap;
		gap: 12px;
	}
	.topbar-contact-info ul{
		margin-right: 0;
		padding-right: 0;
		border-right: 0;
		flex: 1;
		min-width: 0;
	}
	.topbar-contact-info ul li{ margin-right: 0; }
	.topbar-contact-info ul li:not(:first-child){ display: none; }
	.topbar-contact-info ul li .icon-box{
		width: 32px;
		height: 32px;
		margin-right: 10px;
	}
	.topbar-contact-info ul li p{
		font-size: 14px;
		white-space: nowrap;
	}

	/* Kembalikan tombol PPDB sebagai CTA yang selalu terlihat */
	.topbar-qoute-btn{ display: block; flex-shrink: 0; }
	.topbar-qoute-btn .btn-default span{ padding: 10px 16px; font-size: 13px; }
}


/* ============================================================
   SERVICE LIST — tata letak mobile rata tengah & lebih menarik
   ============================================================ */
@media only screen and (max-width: 767px){
	.services-list-box{
		justify-content: center;
		gap: 0;
		padding: 10px 0;
	}

	/* Tiap item: kartu terpusat, konten rata tengah */
	.services-list-box .service-item{
		width: 100%;
		max-width: 340px;
		margin: 0 auto;
		align-items: center;
		text-align: center;
		padding: 30px 16px;
		border-bottom: 1px solid var(--divider-color);
	}
	.services-list-box .service-item:last-child{
		border-bottom: none;
	}

	/* Ikon di tengah, lingkaran lembut agar lebih menonjol */
	.service-item .icon-box{
		justify-content: center;
		width: 88px;
		height: 88px;
		margin: 0 auto 22px;
		background: var(--secondary-color);
		border-radius: 50%;
	}
	.service-item .icon-box img{
		width: 46px;
		height: 46px;
		max-width: 46px;
	}

	/* Judul & tombol rata tengah */
	.service-body{
		margin-bottom: 22px;
	}
	.service-body h3{
		min-height: 0;
		font-size: 19px;
	}
	.service-item .service-footer{
		display: flex;
		justify-content: center;
	}
	.service-item .service-footer a{
		width: 60px;
		height: 48px;
	}
}


/* ============================================================
   HALAMAN SEJARAH — Timeline & Galeri Dokumentasi
   ============================================================ */

/* Jarak antar sub-section konten sejarah */
.history-timeline-section,
.history-gallery-section{
	margin-top: 50px;
}
.history-timeline-section .section-title,
.history-gallery-section .section-title{
	margin-bottom: 30px;
}

/* --- Timeline vertikal perkembangan --- */
.history-timeline{
	position: relative;
	margin-top: 10px;
}
.history-timeline::before{
	content: '';
	position: absolute;
	left: 9px;
	top: 10px;
	bottom: 10px;
	width: 2px;
	background: var(--divider-color);
}
.history-timeline .timeline-item{
	position: relative;
	padding-left: 46px;
	padding-bottom: 34px;
}
.history-timeline .timeline-item:last-child{
	padding-bottom: 0;
}
/* Titik penanda di garis */
.history-timeline .timeline-item::before{
	content: '';
	position: absolute;
	left: 2px;
	top: 3px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--accent-color);
	box-shadow: 0 0 0 5px rgba(0, 162, 233, 0.15);
}
.history-timeline .timeline-item:last-child::before{
	background: var(--primary-color);
	box-shadow: 0 0 0 5px rgba(0, 3, 94, 0.12);
}
.history-timeline .timeline-year{
	display: inline-block;
	background: var(--primary-color);
	color: var(--white-color);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	padding: 5px 14px;
	border-radius: 30px;
	margin-bottom: 12px;
}
.history-timeline .timeline-content h3{
	font-size: 22px;
	font-weight: 600;
	color: var(--primary-color);
	margin-bottom: 10px;
}
.history-timeline .timeline-content p{
	margin-bottom: 0;
}

/* --- Galeri dokumentasi lama --- */
.history-gallery .row{
	--bs-gutter-x: 24px;
}
.history-gallery figure{
	position: relative;
	margin: 0 0 24px;
	border-radius: 16px;
	overflow: hidden;
	background: var(--secondary-color);
}
.history-gallery figure img{
	width: 100%;
	height: 200px;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease-in-out;
}
.history-gallery figure:hover img{
	transform: scale(1.07);
}

@media only screen and (max-width: 767px){
	.history-timeline-section,
	.history-gallery-section{ margin-top: 36px; }
	.history-timeline .timeline-content h3{ font-size: 19px; }
	.history-gallery figure img{ height: 160px; }
}


/* ============================================================
   SIDEBAR WIDGET — Berita Terbaru (recent post) di halaman sub
   ============================================================ */
.sidebar-widget{
	border: 1px solid var(--secondary-color);
	box-shadow: 0px 4px 30px 0px #0000000A;
	border-radius: 20px;
	padding: 30px;
	margin-bottom: 60px;
}
.sidebar-widget-title h3{
	font-size: 22px;
	font-weight: 600;
	color: var(--primary-color);
	margin-bottom: 22px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--divider-color);
}

.recent-post-item{
	display: flex;
	align-items: center;
	gap: 15px;
	margin-bottom: 20px;
}
.recent-post-item:last-child{
	margin-bottom: 0;
}
.recent-post-image{
	flex-shrink: 0;
	width: 78px;
	height: 78px;
	border-radius: 12px;
	overflow: hidden;
}
.recent-post-image img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease-in-out;
}
.recent-post-item:hover .recent-post-image img{
	transform: scale(1.08);
}
.recent-post-date{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--accent-color);
	margin-bottom: 6px;
}
.recent-post-content h3{
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4em;
}
.recent-post-content h3 a{
	color: var(--primary-color);
	transition: color 0.3s ease-in-out;
}
.recent-post-content h3 a:hover{
	color: var(--accent-color);
}

.recent-post-more{
	margin-top: 24px;
	padding-top: 18px;
	border-top: 1px solid var(--divider-color);
}
.recent-post-more a{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	font-weight: 600;
	color: var(--primary-color);
	transition: all 0.3s ease-in-out;
}
.recent-post-more a:hover{
	color: var(--accent-color);
	gap: 12px;
}


/* ============================================================
   SEJARAH — Galeri sidebar variatif + rapikan section Momen
   ============================================================ */

/* Section Momen: beri jarak & konsisten dgn timeline/galeri */
.history-moment-section{
	margin-top: 50px;
}
.history-moment-section .section-title{
	margin-bottom: 30px;
}
/* Query box di dalam Momen: jarak antar item lebih lega */
.history-moment-section .project-query-item{
	margin-bottom: 40px;
}
.history-moment-section .project-query-item:last-child{
	margin-bottom: 0;
}

/* Galeri Sejarah sidebar — grid variatif (1 lebar + 4 kotak) */
.sidebar-history-gallery .history-gallery-grid{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}
.sidebar-history-gallery .hg-item{
	display: block;
	border-radius: 12px;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	position: relative;
}
.sidebar-history-gallery .hg-item-wide{
	grid-column: 1 / -1;
	aspect-ratio: 16 / 9;
}
.sidebar-history-gallery .hg-item img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease-in-out;
}
.sidebar-history-gallery .hg-item:hover img{
	transform: scale(1.1);
}
.sidebar-history-gallery .hg-item::after{
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 3, 94, 0);
	transition: background 0.3s ease-in-out;
}
.sidebar-history-gallery .hg-item:hover::after{
	background: rgba(0, 3, 94, 0.18);
}

@media only screen and (max-width: 767px){
	.history-moment-section{ margin-top: 36px; }
}


/* ============================================================
   SEJARAH — Sidebar sticky (kolom kiri tidak kosong saat scroll)
   ============================================================ */
@media only screen and (min-width: 992px){
	/* kolom dibiarkan stretch (tinggi = konten) agar sidebar punya ruang
	   untuk menempel; sidebar sticky mengisi kolom kiri saat scroll */
	.page-project-single .project-sidebar{
		position: sticky;
		top: 100px;
	}
}


/* ============================================================
   HALAMAN BERITA — layout news magazine (gaya Tailnews, warna PRD)
   ============================================================ */
.berita-section{ padding: 100px 0; }
.berita-section.berita-latest{ padding-top: 0; }

/* Badge kategori (di atas gambar) */
.berita-badge{
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 2;
	background: var(--accent-color);
	color: var(--white-color);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	padding: 6px 14px;
	border-radius: 30px;
}

/* Meta (tanggal / penulis) */
.berita-meta{
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	margin-bottom: 12px;
}
.berita-meta span{
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 13px;
	font-weight: 500;
	color: var(--text-color);
}
.berita-meta span i{ color: var(--accent-color); }

/* --- Kartu berita utama (featured) --- */
.berita-big-card{
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 24px;
	overflow: hidden;
	height: 100%;
	transition: box-shadow 0.3s ease-in-out;
}
.berita-big-card:hover{ box-shadow: 0 20px 45px rgba(0, 3, 94, 0.12); }
.berita-big-image{
	display: block;
	position: relative;
	overflow: hidden;
}
.berita-big-image img{
	width: 100%;
	height: 380px;
	object-fit: cover;
	transition: transform 0.5s ease-in-out;
}
.berita-big-card:hover .berita-big-image img{ transform: scale(1.05); }
.berita-big-body{ padding: 30px; }
.berita-big-body h2{
	font-size: 30px;
	font-weight: 700;
	line-height: 1.25em;
	margin-bottom: 14px;
}
.berita-big-body h2 a{ color: var(--primary-color); transition: color 0.3s ease-in-out; }
.berita-big-body h2 a:hover{ color: var(--accent-color); }
.berita-big-body p{ margin-bottom: 18px; }
.berita-readmore{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	font-weight: 600;
	color: var(--primary-color);
	transition: all 0.3s ease-in-out;
}
.berita-readmore:hover{ color: var(--accent-color); gap: 12px; }

/* --- Sorotan (headline list) --- */
.berita-headline{
	border: 1px solid var(--divider-color);
	border-radius: 24px;
	padding: 26px;
	height: 100%;
}
.berita-widget-title h3{
	font-size: 20px;
	font-weight: 700;
	color: var(--primary-color);
	margin-bottom: 20px;
	padding-bottom: 14px;
	border-bottom: 2px solid var(--accent-color);
	display: inline-block;
}
.berita-headline-item{
	display: flex;
	gap: 14px;
	align-items: center;
	padding-bottom: 18px;
	margin-bottom: 18px;
	border-bottom: 1px solid var(--divider-color);
}
.berita-headline-item:last-child{ padding-bottom: 0; margin-bottom: 0; border-bottom: none; }
.berita-headline-thumb{
	flex-shrink: 0;
	width: 84px;
	height: 84px;
	border-radius: 12px;
	overflow: hidden;
}
.berita-headline-thumb img{ width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease-in-out; }
.berita-headline-item:hover .berita-headline-thumb img{ transform: scale(1.1); }
.berita-badge-text{
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--accent-color);
	margin-bottom: 5px;
}
.berita-headline-content h4{
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4em;
	margin-bottom: 6px;
}
.berita-headline-content h4 a{ color: var(--primary-color); transition: color 0.3s ease-in-out; }
.berita-headline-content h4 a:hover{ color: var(--accent-color); }
.berita-meta-date{ font-size: 12px; color: var(--text-color); display: inline-flex; align-items: center; gap: 6px; }
.berita-meta-date i{ color: var(--accent-color); }

/* --- Filter kategori --- */
.berita-filter{
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: flex-end;
}
.berita-filter a{
	font-size: 14px;
	font-weight: 600;
	color: var(--primary-color);
	padding: 8px 18px;
	border: 1px solid var(--divider-color);
	border-radius: 30px;
	transition: all 0.3s ease-in-out;
}
.berita-filter a:hover, .berita-filter a.active{
	background: var(--accent-color);
	border-color: var(--accent-color);
	color: var(--white-color);
}

/* --- Kartu berita (grid) --- */
.berita-card{
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 20px;
	overflow: hidden;
	height: 100%;
	margin-bottom: 30px;
	transition: all 0.3s ease-in-out;
}
.berita-card:hover{ transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0, 3, 94, 0.12); }
.berita-card-image{ display: block; position: relative; overflow: hidden; }
.berita-card-image img{ width: 100%; height: 220px; object-fit: cover; transition: transform 0.5s ease-in-out; }
.berita-card:hover .berita-card-image img{ transform: scale(1.07); }
.berita-card-body{ padding: 24px; }
.berita-card-body h3{
	font-size: 19px;
	font-weight: 600;
	line-height: 1.35em;
	margin-bottom: 10px;
}
.berita-card-body h3 a{ color: var(--primary-color); transition: color 0.3s ease-in-out; }
.berita-card-body h3 a:hover{ color: var(--accent-color); }
.berita-card-body p{ font-size: 15px; margin-bottom: 0; }

/* Tombol muat lebih banyak */
.berita-more{ text-align: center; margin-top: 20px; }

/* --- Responsif --- */
@media only screen and (max-width: 991px){
	.berita-section{ padding: 60px 0; }
	.berita-headline{ margin-top: 30px; }
	.berita-filter{ justify-content: flex-start; margin-top: 15px; }
	.berita-big-body h2{ font-size: 24px; }
}
@media only screen and (max-width: 767px){
	.berita-section{ padding: 50px 0; }
	.berita-big-image img{ height: 240px; }
	.berita-big-body{ padding: 24px; }
	.berita-card-image img{ height: 200px; }
}


/* ============================================================
   DETAIL BERITA — tipografi artikel ala berita digital
   ============================================================ */
.artikel-section{ padding: 90px 0; }

/* --- Header artikel --- */
.artikel-breadcrumb{
	font-size: 14px;
	font-weight: 500;
	color: var(--text-color);
	margin-bottom: 18px;
}
.artikel-breadcrumb a{ color: var(--text-color); transition: color 0.3s; }
.artikel-breadcrumb a:hover{ color: var(--accent-color); }
.artikel-breadcrumb span{ margin: 0 6px; }
.artikel-breadcrumb .current{ color: var(--accent-color); }

.artikel-header .berita-badge-text{ font-size: 13px; margin-bottom: 12px; }

.artikel-title{
	font-size: 40px;
	font-weight: 700;
	line-height: 1.2em;
	color: var(--primary-color);
	letter-spacing: -0.01em;
	margin-bottom: 22px;
}

.artikel-meta{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px 18px;
	padding-bottom: 28px;
	border-bottom: 1px solid var(--divider-color);
	margin-bottom: 30px;
}
.artikel-author{ display: inline-flex; align-items: center; gap: 10px; }
.artikel-author img{ width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.artikel-author span{ font-size: 15px; font-weight: 600; color: var(--primary-color); }
.artikel-meta-sep{ width: 1px; height: 18px; background: var(--divider-color); }
.artikel-meta-item{ display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: var(--text-color); }
.artikel-meta-item i{ color: var(--accent-color); }

/* --- Gambar utama --- */
.artikel-featured{ margin: 0 0 34px; }
.artikel-featured img{ width: 100%; height: auto; border-radius: 20px; }
.artikel-featured figcaption,
.artikel-inline-image figcaption{
	font-size: 13px;
	color: var(--text-color);
	text-align: center;
	margin-top: 12px;
	font-style: italic;
}

/* --- Isi artikel (tipografi utama) --- */
.artikel-body{ font-size: 17px; line-height: 1.85em; color: #2b2b2b; }
.artikel-body p{ margin-bottom: 24px; }
.artikel-lead{
	font-size: 21px;
	line-height: 1.6em;
	font-weight: 500;
	color: var(--primary-color);
	margin-bottom: 28px;
}
.artikel-body h2{
	font-size: 27px;
	font-weight: 700;
	line-height: 1.3em;
	color: var(--primary-color);
	margin: 44px 0 16px;
}
.artikel-body h3{
	font-size: 21px;
	font-weight: 600;
	color: var(--primary-color);
	margin: 34px 0 14px;
}
.artikel-body a{ color: var(--accent-color); text-decoration: underline; text-underline-offset: 3px; }
.artikel-body ul,
.artikel-body ol{ margin: 0 0 26px; padding-left: 0; list-style: none; }
.artikel-body ul li,
.artikel-body ol li{
	position: relative;
	padding-left: 30px;
	margin-bottom: 12px;
	line-height: 1.7em;
}
.artikel-body ul li::before{
	content: '';
	position: absolute;
	left: 4px;
	top: 11px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--accent-color);
}
.artikel-body ol{ counter-reset: art; }
.artikel-body ol li{ counter-increment: art; }
.artikel-body ol li::before{
	content: counter(art);
	position: absolute;
	left: 0;
	top: 2px;
	width: 22px;
	height: 22px;
	font-size: 12px;
	font-weight: 700;
	color: var(--white-color);
	background: var(--accent-color);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

/* Gambar dalam artikel */
.artikel-inline-image{ margin: 34px 0; }
.artikel-inline-image img{ width: 100%; height: auto; border-radius: 16px; }

/* Kutipan */
.artikel-quote{
	margin: 34px 0;
	padding: 26px 30px;
	background: var(--secondary-color);
	border-left: 4px solid var(--accent-color);
	border-radius: 0 16px 16px 0;
}
.artikel-quote p{
	font-size: 21px;
	line-height: 1.5em;
	font-weight: 600;
	font-style: italic;
	color: var(--primary-color);
	margin-bottom: 12px;
}
.artikel-quote cite{ font-size: 15px; font-weight: 600; font-style: normal; color: var(--accent-color); }

/* --- Footer artikel: tag & share --- */
.artikel-footer{
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 18px;
	padding: 26px 0;
	margin-top: 34px;
	border-top: 1px solid var(--divider-color);
	border-bottom: 1px solid var(--divider-color);
}
.artikel-tags{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.artikel-tags-label{ font-weight: 700; color: var(--primary-color); }
.artikel-tags a{
	font-size: 14px;
	font-weight: 500;
	color: var(--primary-color);
	padding: 6px 14px;
	background: var(--secondary-color);
	border-radius: 30px;
	transition: all 0.3s;
}
.artikel-tags a:hover{ background: var(--accent-color); color: var(--white-color); }
.artikel-share{ display: inline-flex; align-items: center; gap: 10px; }
.artikel-share span{ font-weight: 700; color: var(--primary-color); }
.artikel-share a{
	width: 38px; height: 38px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--secondary-color); color: var(--primary-color);
	transition: all 0.3s;
}
.artikel-share a:hover{ background: var(--accent-color); color: var(--white-color); }

/* --- Kotak penulis --- */
.artikel-author-box{
	display: flex;
	gap: 20px;
	align-items: center;
	margin-top: 34px;
	padding: 28px;
	background: var(--secondary-color);
	border-radius: 20px;
}
.artikel-author-box img{ width: 76px; height: 76px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.artikel-author-box h4{ font-size: 18px; font-weight: 700; color: var(--primary-color); margin-bottom: 6px; }
.artikel-author-box p{ font-size: 15px; margin: 0; }

/* --- Sidebar artikel --- */
.artikel-kategori-list{ list-style: none; margin: 0; padding: 0; }
.artikel-kategori-list li{ border-bottom: 1px solid var(--divider-color); }
.artikel-kategori-list li:last-child{ border-bottom: none; }
.artikel-kategori-list li a{
	display: flex; justify-content: space-between; align-items: center;
	padding: 12px 0; font-size: 15px; font-weight: 600; color: var(--primary-color);
	transition: color 0.3s;
}
.artikel-kategori-list li a:hover{ color: var(--accent-color); padding-left: 6px; }
.artikel-kategori-list li a span{
	font-size: 13px; font-weight: 600; color: var(--accent-color);
	background: rgba(0,162,233,0.12); border-radius: 20px; padding: 2px 12px;
}

.artikel-cta{ text-align: center; background: var(--primary-color); border: none; }
.artikel-cta h3{ color: var(--white-color); font-size: 20px; font-weight: 700; margin-bottom: 10px; }
.artikel-cta p{ color: rgba(255,255,255,0.8); font-size: 15px; margin-bottom: 20px; }

/* --- Berita terkait --- */
.artikel-terkait{ margin-top: 70px; padding-top: 60px; border-top: 1px solid var(--divider-color); }
.artikel-terkait .section-title{ margin-bottom: 40px; }

/* --- Responsif --- */
@media only screen and (max-width: 991px){
	.artikel-section{ padding: 60px 0; }
	.artikel-sidebar{ margin-top: 40px; }
	.artikel-title{ font-size: 32px; }
	.artikel-terkait{ margin-top: 50px; padding-top: 45px; }
}
@media only screen and (max-width: 767px){
	.artikel-section{ padding: 45px 0; }
	.artikel-title{ font-size: 26px; }
	.artikel-lead{ font-size: 18px; }
	.artikel-body{ font-size: 16px; }
	.artikel-body h2{ font-size: 23px; }
	.artikel-quote p{ font-size: 18px; }
	.artikel-author-box{ flex-direction: column; text-align: center; }
	.artikel-footer{ flex-direction: column; align-items: flex-start; }
}


/* ============================================================
   GURU & KARYAWAN — grup hierarki + kartu fresh & profesional
   ============================================================ */
.page-team{ padding: 100px 0; }
.page-team .team-group{ margin-bottom: 80px; }
.page-team .team-group:last-child{ margin-bottom: 0; }

/* Judul tiap grup */
.page-team .section-title.text-center{
	text-align: center;
	max-width: 640px;
	margin: 0 auto 50px;
}
.page-team .section-title.text-center h3{ padding-left: 26px; }

/* Beri jarak vertikal lega antar kartu */
.page-team .row{ --bs-gutter-x: 30px; }

/* Kartu anggota: berbingkai, bersih, mengangkat saat hover */
.page-team .team-member-item{
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 24px;
	overflow: hidden;
	height: calc(100% - 46px);
	margin-bottom: 46px;
	transition: transform 0.35s ease-in-out, box-shadow 0.35s ease-in-out, border-color 0.35s ease-in-out;
}
.page-team .team-member-item:hover{
	transform: translateY(-8px);
	box-shadow: 0 24px 50px rgba(0, 3, 94, 0.14);
	border-color: transparent;
}

/* Foto menyatu ke atas kartu (sudut atas ikut kartu) */
.page-team .team-image{
	border-radius: 0;
	margin-bottom: 0;
}
.page-team .team-image img{
	border-radius: 0;
	aspect-ratio: 1 / 1;
}

/* Konten diberi ruang + garis aksen + jabatan biru */
.page-team .team-content{
	position: relative;
	padding: 24px 18px 28px;
}
.page-team .team-content::before{
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 44px;
	height: 3px;
	background: var(--accent-color);
	border-radius: 3px;
}
.page-team .team-content h3{ font-size: 19px; margin-bottom: 7px; }
.page-team .team-content p{
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.01em;
	text-transform: none;
	color: var(--accent-color);
	line-height: 1.45em;
}

/* Kartu Mudir ditonjolkan dengan bingkai aksen */
.page-team .team-member-lead{
	border: 2px solid var(--accent-color);
	box-shadow: 0 18px 40px rgba(0, 162, 233, 0.16);
}
.page-team .team-member-lead .team-content h3 a{ color: var(--primary-color); }

@media only screen and (max-width: 991px){
	.page-team{ padding: 60px 0; }
	.page-team .team-group{ margin-bottom: 55px; }
	.page-team .team-member-item{ margin-bottom: 30px; height: calc(100% - 30px); }
}


/* ============================================================
   HALAMAN FASILITAS — intro/stats, unggulan, grid berkategori
   ============================================================ */
.fasilitas-intro{ padding: 100px 0 0; }
.fasilitas-featured{ padding: 80px 0; }
.fasilitas-grid-section{ padding: 20px 0 100px; }

/* --- Statistik --- */
.fasilitas-stats{
	margin-top: 30px;
	padding: 40px 20px;
	background: var(--secondary-color);
	border-radius: 24px;
}
.fasilitas-stat-item{ text-align: center; padding: 12px 10px; }
.fasilitas-stat-item h2{
	font-size: 46px;
	font-weight: 700;
	color: var(--primary-color);
	line-height: 1;
	margin-bottom: 8px;
}
.fasilitas-stat-item h2 .counter{ color: var(--accent-color); }
.fasilitas-stat-item p{
	font-size: 15px;
	font-weight: 600;
	color: var(--text-color);
	margin: 0;
}

/* --- Fasilitas unggulan (blok besar bergantian) --- */
.fasilitas-featured .section-title.text-center{ text-align: center; max-width: 600px; margin: 0 auto 50px; }
.fasilitas-featured .section-title.text-center h3{ padding-left: 26px; }

.fasilitas-feature-item{
	display: flex;
	align-items: center;
	gap: 50px;
	margin-bottom: 60px;
}
.fasilitas-feature-item:last-child{ margin-bottom: 0; }
.fasilitas-feature-item.reverse{ flex-direction: row-reverse; }
.fasilitas-feature-image{ width: 50%; flex-shrink: 0; }
.fasilitas-feature-image figure{ margin: 0; border-radius: 24px; overflow: hidden; }
.fasilitas-feature-image img{ width: 100%; height: 400px; object-fit: cover; }
.fasilitas-feature-content{ width: 50%; }
.fasilitas-feature-content .berita-badge-text{ font-size: 13px; margin-bottom: 12px; }
.fasilitas-feature-content h2{
	font-size: 32px;
	font-weight: 700;
	color: var(--primary-color);
	margin-bottom: 16px;
}
.fasilitas-feature-content p{ margin-bottom: 22px; }
.fasilitas-feature-content ul{ list-style: none; margin: 0; padding: 0; }
.fasilitas-feature-content ul li{
	position: relative;
	padding-left: 32px;
	margin-bottom: 14px;
	font-weight: 500;
	color: var(--primary-color);
}
.fasilitas-feature-content ul li:last-child{ margin-bottom: 0; }
.fasilitas-feature-content ul li::before{
	content: '\f00c';
	font-family: 'FontAwesome';
	font-weight: 900;
	position: absolute;
	left: 0;
	top: 1px;
	width: 22px;
	height: 22px;
	font-size: 11px;
	color: var(--white-color);
	background: var(--accent-color);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* --- Grid kartu fasilitas --- */
.fasilitas-grid-section .berita-filter{ justify-content: flex-end; }
.fasilitas-card{
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 20px;
	overflow: hidden;
	height: calc(100% - 30px);
	margin-bottom: 30px;
	transition: all 0.35s ease-in-out;
}
.fasilitas-card:hover{ transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0, 3, 94, 0.12); border-color: transparent; }
.fasilitas-card-image{ position: relative; overflow: hidden; }
.fasilitas-card-image img{ width: 100%; height: 220px; object-fit: cover; transition: transform 0.5s ease-in-out; }
.fasilitas-card:hover .fasilitas-card-image img{ transform: scale(1.08); }
.fasilitas-card-body{ padding: 22px 22px 26px; }
.fasilitas-card-body h3{
	font-size: 19px;
	font-weight: 600;
	color: var(--primary-color);
	margin-bottom: 10px;
}
.fasilitas-card-body p{ font-size: 15px; margin: 0; line-height: 1.6em; }

/* --- Responsif --- */
@media only screen and (max-width: 991px){
	.fasilitas-intro{ padding: 60px 0 0; }
	.fasilitas-featured{ padding: 50px 0; }
	.fasilitas-grid-section{ padding: 10px 0 60px; }
	.fasilitas-feature-item, .fasilitas-feature-item.reverse{
		flex-direction: column;
		gap: 26px;
		margin-bottom: 45px;
	}
	.fasilitas-feature-image, .fasilitas-feature-content{ width: 100%; }
	.fasilitas-feature-image img{ height: 300px; }
	.fasilitas-grid-section .berita-filter{ justify-content: flex-start; margin-top: 15px; }
}
@media only screen and (max-width: 767px){
	.fasilitas-stat-item h2{ font-size: 36px; }
	.fasilitas-feature-content h2{ font-size: 26px; }
	.fasilitas-feature-image img{ height: 240px; }
}


/* ============================================================
   FASILITAS UNGGULAN — slider auto-play + animasi hidup
   ============================================================ */
.fasilitas-featured-slider{ position: relative; }
.fasilitas-featured-slider .swiper{ border-radius: 24px; }

/* Foto: efek Ken Burns (zoom pelan) saat slide aktif -> terasa hidup */
.fasilitas-featured-slider .fasilitas-feature-image figure{ border-radius: 24px; overflow: hidden; }
.fasilitas-featured-slider .fasilitas-feature-image img{ transform: scale(1); }
.fasilitas-featured-slider .swiper-slide-active .fasilitas-feature-image img{
	animation: fasilitas-kenburns 7s ease-out both;
}
@keyframes fasilitas-kenburns{
	from{ transform: scale(1); }
	to{ transform: scale(1.08); }
}

/* Konten: muncul lembut (fade + naik) saat slide aktif */
.fasilitas-featured-slider .swiper-slide-active .fasilitas-feature-content > *{
	animation: fasilitas-fadeup 0.7s ease-out both;
}
.fasilitas-featured-slider .swiper-slide-active .fasilitas-feature-content > *:nth-child(2){ animation-delay: 0.1s; }
.fasilitas-featured-slider .swiper-slide-active .fasilitas-feature-content > *:nth-child(3){ animation-delay: 0.2s; }
.fasilitas-featured-slider .swiper-slide-active .fasilitas-feature-content > *:nth-child(4){ animation-delay: 0.3s; }
@keyframes fasilitas-fadeup{
	from{ opacity: 0; transform: translateY(20px); }
	to{ opacity: 1; transform: translateY(0); }
}

/* Kontrol: prev / pagination / next dalam satu baris */
.fasilitas-featured-controls{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 22px;
	margin-top: 34px;
}
.fasilitas-featured-prev,
.fasilitas-featured-next{
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 1px solid var(--divider-color);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--primary-color);
	cursor: pointer;
	transition: all 0.3s ease-in-out;
}
.fasilitas-featured-prev:hover,
.fasilitas-featured-next:hover{
	background: var(--accent-color);
	border-color: var(--accent-color);
	color: var(--white-color);
}
.fasilitas-featured-pagination{
	display: flex;
	align-items: center;
	gap: 8px;
	width: auto;
}
.fasilitas-featured-pagination .swiper-pagination-bullet{
	width: 10px;
	height: 10px;
	background: var(--divider-color);
	opacity: 1;
	transition: all 0.3s ease-in-out;
	margin: 0 !important;
}
.fasilitas-featured-pagination .swiper-pagination-bullet-active{
	background: var(--accent-color);
	width: 28px;
	border-radius: 6px;
}

@media only screen and (max-width: 767px){
	.fasilitas-featured-controls{ gap: 16px; margin-top: 26px; }
	.fasilitas-featured-prev, .fasilitas-featured-next{ width: 42px; height: 42px; }
}


/* ============================================================
   FASILITAS — Modal detail (popup melayang)
   ============================================================ */
.fasilitas-card{ cursor: pointer; }

.fasilitas-modal{
	position: fixed;
	inset: 0;
	z-index: 1200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
.fasilitas-modal.is-open{ visibility: visible; opacity: 1; }
body.fasilitas-modal-open{ overflow: hidden; }

.fasilitas-modal-overlay{
	position: absolute;
	inset: 0;
	background: rgba(0, 3, 94, 0.55);
	backdrop-filter: blur(3px);
}

.fasilitas-modal-dialog{
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 560px;
	max-height: 90vh;
	overflow-y: auto;
	background: var(--white-color);
	border-radius: 24px;
	box-shadow: 0 30px 70px rgba(0, 3, 94, 0.35);
	transform: translateY(24px) scale(0.96);
	opacity: 0;
	transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease-in-out;
}
.fasilitas-modal.is-open .fasilitas-modal-dialog{ transform: translateY(0) scale(1); opacity: 1; }

.fasilitas-modal-close{
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 3;
	width: 42px;
	height: 42px;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
	color: var(--primary-color);
	font-size: 18px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease-in-out;
}
.fasilitas-modal-close:hover{ background: var(--accent-color); color: var(--white-color); transform: rotate(90deg); }

.fasilitas-modal-image{ position: relative; }
.fasilitas-modal-image img{
	width: 100%;
	height: 300px;
	object-fit: cover;
	border-radius: 24px 24px 0 0;
	display: block;
}
.fasilitas-modal-cat{ position: absolute; top: 18px; left: 18px; }

.fasilitas-modal-body{ padding: 26px 30px 32px; }
.fasilitas-modal-title{
	font-size: 26px;
	font-weight: 700;
	color: var(--primary-color);
	margin-bottom: 14px;
}
.fasilitas-modal-desc{
	font-size: 16px;
	line-height: 1.75em;
	color: #2b2b2b;
	margin: 0;
}

@media only screen and (max-width: 767px){
	.fasilitas-modal-image img{ height: 220px; }
	.fasilitas-modal-body{ padding: 22px 22px 26px; }
	.fasilitas-modal-title{ font-size: 22px; }
}


/* ============================================================
   HALAMAN PRESTASI — statistik, sorotan, kartu bermedali
   ============================================================ */
.prestasi-intro{ padding: 100px 0 0; }
.prestasi-featured{ padding: 80px 0; }
.prestasi-grid-section{ padding: 20px 0 100px; }

/* --- Statistik --- */
.prestasi-stats{
	margin-top: 30px;
	padding: 20px;
	background: var(--primary-color);
	border-radius: 24px;
}
.prestasi-stat-item{ text-align: center; padding: 22px 10px; }
.prestasi-stat-icon{
	width: 58px; height: 58px; margin: 0 auto 14px;
	display: flex; align-items: center; justify-content: center;
	border-radius: 50%;
	background: rgba(255,255,255,0.1);
	color: var(--accent-color);
	font-size: 24px;
}
.prestasi-stat-item h2{ font-size: 44px; font-weight: 700; color: var(--white-color); line-height: 1; margin-bottom: 8px; }
.prestasi-stat-item h2 .counter{ color: var(--accent-color); }
.prestasi-stat-item p{ font-size: 15px; font-weight: 500; color: rgba(255,255,255,0.75); margin: 0; }

/* --- Medali (emas/perak/perunggu) --- */
.prestasi-medal{
	position: absolute;
	top: 16px; left: 16px;
	z-index: 2;
	display: inline-flex; align-items: center; gap: 7px;
	font-size: 13px; font-weight: 700;
	color: #3a2c00;
	padding: 6px 14px;
	border-radius: 30px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}
.prestasi-medal i{ font-size: 13px; }
.prestasi-medal-gold{ background: linear-gradient(135deg, #ffd75e, #e0a80d); }
.prestasi-medal-silver{ background: linear-gradient(135deg, #e2e5ea, #a9afba); color: #333; }
.prestasi-medal-bronze{ background: linear-gradient(135deg, #e6a874, #c17a3f); color: #3a1f08; }
.prestasi-cat{ top: auto; bottom: 16px; left: 16px; }

/* --- Sorotan (highlight besar) --- */
.prestasi-featured .section-title.text-center{ text-align: center; max-width: 600px; margin: 0 auto 50px; }
.prestasi-featured .section-title.text-center h3{ padding-left: 26px; }
.prestasi-highlight{
	display: flex;
	align-items: stretch;
	gap: 0;
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 24px;
	overflow: hidden;
	transition: box-shadow 0.35s ease-in-out;
}
.prestasi-highlight:hover{ box-shadow: 0 24px 50px rgba(0,3,94,0.14); }
.prestasi-highlight-image{ position: relative; width: 50%; flex-shrink: 0; overflow: hidden; display: block; }
.prestasi-highlight-image img{ width: 100%; height: 100%; min-height: 340px; object-fit: cover; transition: transform 0.5s ease-in-out; }
.prestasi-highlight:hover .prestasi-highlight-image img{ transform: scale(1.05); }
.prestasi-highlight-content{ width: 50%; padding: 40px; display: flex; flex-direction: column; justify-content: center; }
.prestasi-highlight-content h2{ font-size: 28px; font-weight: 700; line-height: 1.3em; margin: 12px 0 14px; }
.prestasi-highlight-content h2 a{ color: var(--primary-color); transition: color 0.3s; }
.prestasi-highlight-content h2 a:hover{ color: var(--accent-color); }
.prestasi-highlight-content p{ margin-bottom: 18px; }
.prestasi-highlight-meta{ display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 22px; }
.prestasi-highlight-meta span{ display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 500; color: var(--text-color); }
.prestasi-highlight-meta i{ color: var(--accent-color); }

/* --- Kartu prestasi (grid) --- */
.prestasi-card{
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 20px;
	overflow: hidden;
	height: calc(100% - 30px);
	margin-bottom: 30px;
	transition: all 0.35s ease-in-out;
}
.prestasi-card:hover{ transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0,3,94,0.12); border-color: transparent; }
.prestasi-card-image{ position: relative; display: block; overflow: hidden; }
.prestasi-card-image img{ width: 100%; height: 230px; object-fit: cover; transition: transform 0.5s ease-in-out; }
.prestasi-card:hover .prestasi-card-image img{ transform: scale(1.08); }
.prestasi-card-body{ padding: 22px 22px 26px; }
.prestasi-level{ display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--accent-color); margin-bottom: 10px; }
.prestasi-card-body h3{ font-size: 18px; font-weight: 600; line-height: 1.4em; margin-bottom: 12px; }
.prestasi-card-body h3 a{ color: var(--primary-color); transition: color 0.3s; }
.prestasi-card-body h3 a:hover{ color: var(--accent-color); }
.prestasi-student{ display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--text-color); padding-top: 14px; border-top: 1px solid var(--divider-color); width: 100%; }
.prestasi-student i{ color: var(--accent-color); }

.prestasi-more{ text-align: center; margin-top: 20px; }

/* --- Responsif --- */
@media only screen and (max-width: 991px){
	.prestasi-intro{ padding: 60px 0 0; }
	.prestasi-featured{ padding: 50px 0; }
	.prestasi-grid-section{ padding: 10px 0 60px; }
	.prestasi-highlight{ flex-direction: column; }
	.prestasi-highlight-image, .prestasi-highlight-content{ width: 100%; }
	.prestasi-highlight-image img{ height: 280px; min-height: 0; }
	.prestasi-highlight-content{ padding: 30px; }
	.prestasi-grid-section .berita-filter{ justify-content: flex-start; margin-top: 15px; }
}
@media only screen and (max-width: 767px){
	.prestasi-stat-item h2{ font-size: 34px; }
	.prestasi-highlight-content h2{ font-size: 23px; }
}


/* ============================================================
   HALAMAN KURIKULUM — kelompok muatan + metode pembelajaran
   ============================================================ */
.kurikulum-intro{ padding: 100px 0 0; }
.kurikulum-groups{ padding: 70px 0; }
.kurikulum-metode{ padding: 100px 0; background: var(--primary-color); position: relative; }

.kurikulum-groups .section-title.text-center,
.kurikulum-metode .section-title.text-center{ text-align: center; max-width: 640px; margin: 0 auto 50px; }
.kurikulum-groups .section-title.text-center h3{ padding-left: 26px; }

/* --- Kartu kelompok kurikulum --- */
.kurikulum-card{
	display: flex;
	gap: 22px;
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 24px;
	padding: 30px;
	height: calc(100% - 30px);
	margin-bottom: 30px;
	transition: all 0.35s ease-in-out;
}
.kurikulum-card:hover{ transform: translateY(-6px); box-shadow: 0 20px 45px rgba(0,3,94,0.12); border-color: transparent; }
.kurikulum-card-icon{
	flex-shrink: 0;
	width: 64px; height: 64px;
	display: flex; align-items: center; justify-content: center;
	border-radius: 16px;
	background: var(--accent-color);
	color: var(--white-color);
	font-size: 26px;
}
.kurikulum-card:hover .kurikulum-card-icon{ background: var(--primary-color); }
.kurikulum-card-body h3{ font-size: 21px; font-weight: 700; color: var(--primary-color); margin-bottom: 10px; }
.kurikulum-card-body p{ font-size: 15px; margin-bottom: 16px; }
.kurikulum-card-body ul{ list-style: none; margin: 0; padding: 0; }
.kurikulum-card-body ul li{
	position: relative;
	padding-left: 26px;
	margin-bottom: 9px;
	font-size: 15px;
	font-weight: 500;
	color: var(--primary-color);
}
.kurikulum-card-body ul li:last-child{ margin-bottom: 0; }
.kurikulum-card-body ul li::before{
	content: '\f00c';
	font-family: 'FontAwesome';
	font-weight: 900;
	position: absolute;
	left: 0; top: 2px;
	font-size: 11px;
	color: var(--accent-color);
}

/* --- Metode (di section navy) --- */
.kurikulum-metode .section-title.dark-section h3{ color: var(--accent-color); }
.metode-item{
	background: rgba(255,255,255,0.05);
	border: 1px solid rgba(255,255,255,0.1);
	border-radius: 20px;
	padding: 30px 26px;
	height: calc(100% - 30px);
	margin-bottom: 30px;
	transition: all 0.35s ease-in-out;
}
.metode-item:hover{ background: rgba(255,255,255,0.09); transform: translateY(-6px); }
.metode-icon{
	width: 58px; height: 58px;
	display: flex; align-items: center; justify-content: center;
	border-radius: 50%;
	background: var(--accent-color);
	color: var(--white-color);
	font-size: 24px;
	margin-bottom: 20px;
}
.metode-item h3{ font-size: 19px; font-weight: 600; color: var(--white-color); margin-bottom: 10px; }
.metode-item p{ font-size: 15px; color: rgba(255,255,255,0.72); margin: 0; line-height: 1.6em; }

@media only screen and (max-width: 991px){
	.kurikulum-intro{ padding: 60px 0 0; }
	.kurikulum-groups{ padding: 50px 0; }
	.kurikulum-metode{ padding: 60px 0; }
}
@media only screen and (max-width: 767px){
	.kurikulum-card{ flex-direction: column; gap: 16px; padding: 26px; }
}

/* ============================================================= */
/* ===  An-Nur CMS — Penyempurnaan Menu Mobile (SlickNav)     === */
/* ============================================================= */
@media (max-width: 991.98px) {
	/* Wrapper transparan; panel putih ada di .slicknav_nav */
	.slicknav_menu {
		background: transparent !important;
		padding: 0 !important;
		margin-top: 12px;
	}
	.slicknav_menu .slicknav_nav {
		background: #ffffff;
		border: 1px solid #eef2f8;
		border-radius: 16px;
		box-shadow: 0 24px 55px rgba(0, 3, 94, 0.18);
		padding: 6px 0;
		margin: 0;
		overflow: hidden;
		max-height: calc(100vh - 150px);
		overflow-y: auto;
	}

	/* Item level atas */
	.slicknav_nav > li { border-bottom: 1px solid #eef2f8; }
	.slicknav_nav > li:last-child { border-bottom: none; }

	.slicknav_nav li a,
	.slicknav_nav .slicknav_row {
		color: var(--primary-color) !important;
		font-weight: 600;
		font-size: 15.5px;
		padding: 13px 22px !important;
		margin: 0 !important;
		border-radius: 0 !important;
	}
	.slicknav_nav a:hover,
	.slicknav_nav a:focus,
	.slicknav_nav .slicknav_row:hover,
	.slicknav_nav .slicknav_open > a,
	.slicknav_nav .slicknav_open > .slicknav_row {
		background: #f2f7ff !important;
		color: var(--accent-color) !important;
	}

	/* Submenu (indent + latar lembut) */
	.slicknav_nav ul {
		background: #f6f8fc;
		margin: 0 !important;
		padding: 0 !important;
	}
	.slicknav_nav ul li { border-top: 1px solid #e9eef7; }
	.slicknav_nav ul li a {
		padding: 11px 22px 11px 40px !important;
		font-weight: 500;
		font-size: 14.5px;
		color: #45506b !important;
	}
	.slicknav_nav ul li a:hover { color: var(--accent-color) !important; background: #eaf3ff !important; }

	/* Panah dropdown */
	.slicknav_arrow { position: static !important; }
	.slicknav_arrow:after { color: var(--primary-color); top: 15px; right: 18px; }
	.slicknav_open > a .slicknav_arrow:after,
	.slicknav_open > .slicknav_row .slicknav_arrow:after { color: var(--accent-color); }

	/* Tombol toggle lebih menonjol */
	.slicknav_btn { box-shadow: 0 6px 18px rgba(0, 3, 94, 0.14); }
}

/* ============================================================= */
/* ===  An-Nur CMS — Logo Mitra/Akreditasi di kanan navbar   === */
/* ============================================================= */
.header-social-box .navbar-logos {
	display: flex;
	align-items: center;
	gap: 22px;
	padding-left: 24px;
	margin-left: 8px;
	border-left: 1px solid rgba(255, 255, 255, 0.18);
}
.header-social-box .navbar-logos img {
	height: 38px;
	width: auto;
	max-width: 130px;
	object-fit: contain;
	opacity: .92;
	transition: opacity .3s ease-in-out, transform .3s ease-in-out;
}
.header-social-box .navbar-logos a:hover img,
.header-social-box .navbar-logos img:hover {
	opacity: 1;
	transform: translateY(-1px);
}
/* Sembunyikan di layar sempit agar menu tidak berdesakan (mobile pakai slicknav) */
@media (max-width: 1199.98px) {
	.header-social-box .navbar-logos { display: none; }
}

/* Logo navbar tetap menempel saat navbar sticky (scroll) — override display:none bawaan */
.main-header .header-sticky.active .header-social-box {
	display: inline-flex !important;
}
.main-header .header-sticky.active .header-social-box .header-social-links {
	display: none; /* ikon sosial tetap disembunyikan saat sticky, hanya logo & tombol yang tampil */
}

/* Tombol Virtual Tour (Roblox) di kanan navbar */
.header-social-box .navbar-vtour {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 10px 20px;
	border-radius: 30px;
	font-weight: 700;
	font-size: 14px;
	white-space: nowrap;
	color: #ffffff;
	background: linear-gradient(135deg, var(--accent-color), #0079c1);
	box-shadow: 0 8px 22px rgba(0, 162, 233, 0.35);
	transition: transform .3s ease, box-shadow .3s ease;
	margin-right: 4px;
}
.header-social-box .navbar-vtour:hover {
	color: #ffffff;
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(0, 162, 233, 0.5);
}
.header-social-box .navbar-vtour svg { flex: 0 0 auto; }

/* =====================================================================
   REDESIGN DROPDOWN NAVBAR — kartu glass putih mengambang, modern,
   dengan caret penunjuk, bar aksen per-item, & entrance stagger halus.
   (Menimpa gaya lama: kotak cyan solid). Desktop-only (mobile pakai slicknav).
   ===================================================================== */

/* Kartu dropdown */
.main-menu ul ul,
.main-menu ul li.submenu:first-child ul{
	background: rgba(255, 255, 255, 0.98);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border: 1px solid rgba(0, 3, 94, 0.07);
	border-radius: 16px;
	padding: 10px !important;
	min-width: 258px;
	width: auto;
	margin-top: 16px;                 /* jarak mengambang dari navbar */
	transform: translateY(12px) scale(0.97);
	transform-origin: top center;
	opacity: 0;
	visibility: hidden;
	box-shadow:
		0 26px 60px rgba(0, 3, 94, 0.20),
		0 6px 16px rgba(0, 3, 94, 0.08);
	transition:
		opacity 0.28s ease,
		transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
		visibility 0.4s;
}

/* Jembatan transparan menutup celah agar hover tidak putus */
.main-menu ul ul::before{
	content: '';
	position: absolute;
	top: -18px;
	left: 0;
	right: 0;
	height: 20px;
	background: transparent;
}

/* Caret kecil menunjuk ke menu induk */
.main-menu ul ul::after{
	content: '';
	position: absolute;
	top: -6px;
	left: 26px;
	width: 13px;
	height: 13px;
	background: rgba(255, 255, 255, 0.98);
	border-left: 1px solid rgba(0, 3, 94, 0.07);
	border-top: 1px solid rgba(0, 3, 94, 0.07);
	border-radius: 4px 0 0 0;
	transform: rotate(45deg);
}

/* Saat induk di-hover: kartu muncul dengan animasi naik + skala */
.main-menu ul li:hover > ul{
	opacity: 1;
	visibility: visible;
	transform: translateY(0) scale(1);
	padding: 10px !important;
}

/* Item dropdown */
.main-menu ul ul li{
	margin: 1px 0;
	/* State awal untuk entrance stagger */
	opacity: 0;
	transform: translateX(-10px);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.main-menu ul ul li.nav-item .nav-link{
	position: relative;
	color: #1b2440;
	font-size: 14.5px;
	font-weight: 600;
	white-space: nowrap;
	padding: 10px 16px 10px 20px !important;
	border-radius: 11px;
	border-left: 0 !important;
	transition:
		color 0.25s ease,
		background-color 0.25s ease,
		padding 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Bar aksen kiri yang tumbuh saat hover (absolute → tanpa geser layout) */
.main-menu ul ul li.nav-item .nav-link::before{
	content: '';
	position: absolute;
	left: 8px;
	top: 50%;
	width: 3px;
	height: 17px;
	border-radius: 3px;
	background: var(--accent-color);
	transform: translateY(-50%) scaleY(0);
	transform-origin: center;
	transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Hover / aktif item — prefix .main-header + !important agar pasti menang
   atas aturan dropdown lama yang setara spesifisitas. */
.main-header .main-menu ul ul li.nav-item .nav-link:hover,
.main-header .main-menu ul ul li.nav-item .nav-link:focus,
.main-header .main-menu ul ul li.nav-item .nav-link.active{
	color: var(--accent-color) !important;
	background: linear-gradient(90deg, rgba(0, 162, 233, 0.13), rgba(0, 162, 233, 0.03)) !important;
	padding-left: 26px !important;
}

.main-header .main-menu ul ul li.nav-item .nav-link:hover::before,
.main-header .main-menu ul ul li.nav-item .nav-link:focus::before,
.main-header .main-menu ul ul li.nav-item .nav-link.active::before{
	transform: translateY(-50%) scaleY(1) !important;
}

/* Entrance stagger: item muncul berurutan saat induk di-hover */
.main-menu ul li:hover > ul > li{
	opacity: 1;
	transform: translateX(0);
}
.main-menu ul li:hover > ul > li:nth-child(1){ transition-delay: 0.04s; }
.main-menu ul li:hover > ul > li:nth-child(2){ transition-delay: 0.08s; }
.main-menu ul li:hover > ul > li:nth-child(3){ transition-delay: 0.12s; }
.main-menu ul li:hover > ul > li:nth-child(4){ transition-delay: 0.16s; }
.main-menu ul li:hover > ul > li:nth-child(5){ transition-delay: 0.20s; }
.main-menu ul li:hover > ul > li:nth-child(6){ transition-delay: 0.24s; }
.main-menu ul li:hover > ul > li:nth-child(7){ transition-delay: 0.28s; }
.main-menu ul li:hover > ul > li:nth-child(8){ transition-delay: 0.32s; }

/* Sinkron di header sticky (kartu tetap putih, kontras di navbar navy) */
.main-header .header-sticky.active .main-menu ul ul{
	margin-top: 14px;
}