@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');


*,
*:before,
*:after{
	margin:0;
	padding:0;
	box-sizing:border-box;
}
:root{
	--theme-color : #e74c3c;
	--theme-color-hover : #cb3c2d;
	--theme-overlay:#e74c3ccc;
}
.btn-theme{
	background-color:var(--theme-color);
	color:#fff;
	border-color: transparent;
}
.btn-theme:hover{
	background-color:var(--theme-color-hover);
	color:#fff;
}
.text-theme{
	color:var(--theme-color)
}
.bg-theme{
	background-color: var(--theme-color);
}
body{
	font-family: "Inter", sans-serif;
	font-optical-sizing: auto;
	font-weight: <weight>;
	font-style: normal;
	font-variation-settings:"slnt" 0;  
}
.object-fit-cover{
	object-fit: cover;
}
#header{
	z-index: 9990;
}
.modal-backdrop{
	z-index: 9992;
}
.modal{
	z-index: 9993;
}
.fancybox__container{
	z-index: 9993!important;	
}
.mainnav{
	background: #fff;
	padding:0;
	box-shadow: 0px 10px 50px -20px #0001;
}
.mainnav .nav-link,
.mainnav .nav-link.show{
	color:#333;
}
.mainnav .nav-item .nav-link{
	padding:0 15px;
	height: 100px;
	line-height: 100px;
	color:#333;
	border-bottom: 4px solid transparent;
}
.mainnav .nav-link:hover{
	color:#111;
}
.mainnav .nav-link.active{
	color:var(--theme-color);
	border-bottom: 4px solid var(--theme-color);
}
.mainnav .dropdown-menu{
	border:none;
	background: var(--theme-color);
	backdrop-filter: blur(20px);
	box-shadow: 0px 10px 50px -20px #0001;
	border-radius: 0;
}
.mainnav .dropdown-menu .dropdown-item{
	color:#fffc;
	padding:10px 20px;
}
.mainnav .dropdown-menu .dropdown-item:hover{
	color:#fff;
	background: #fff1;
}
body .hero:has(video):before{
	content: "";
	position: absolute;
	inset: 0;
	background:#0004;
	z-index: 2;
}
body .hero:has(video) .container{
	z-index: 10;
}
.overlay{
	border-image: fill 0 linear-gradient(#0000,#000);
}
.overlay-full-red{
	border-image: fill 0 linear-gradient(var(--theme-overlay),var(--theme-overlay));
}
footer{
	color:#fffa;
}
footer a,footer a.nav-link{
	color:#fffa;
}
footer a:hover,footer a.nav-link:hover{
	color:#fff;
}
.section-contact{
	position: relative
}
.section-contact .contact-map{
	position: absolute;
	inset:0 0 0 auto;
	width: 50%;
}
.section-contact .contact-image{
	position: absolute;
	inset:0 auto 0 0;
	width: 50%;
}
.section-contact .contact-image img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.form-control{
	background: #eee;
	border: none;
	padding:15px;
}
.form-control:focus{
	box-shadow: none;
	background: #ddd;
}
#produk-layanan{
	background: linear-gradient(#fafafa,#fff);
}
.card-services{
	border:none;
	box-shadow: 0px 10px 50px -20px #0001;
	height: 100%;
}
.card-services .card-img{
	width: 100%;
	height: 240px;
	object-fit: cover;
}
.card-services .card-body{
	padding:30px;
}
.gallery-slider{
	position: relative;
	background:var(--theme-color);
}
.gallery-slider .slide{
	height: 400px;
	filter: grayscale(1) opacity(0.8);
	transition: .3s ease;
}
.gallery-slider .slide:hover{
	filter: grayscale(0) opacity(1);
}
.gallery-slider .slide img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.gallery-slider .slick-arrow{
	position: absolute;
	top:50%;
	z-index: 10;
	left:0;
	transform: translateY(-50%);
	background-color: var(--theme-overlay);
	color:#fff;
	padding:15px 20px;
	border:none;
}
.gallery-slider .slick-arrow.slick-next{
	left:auto;
	right:0;
}
.section-contact{
	position: relative
}
.section-contact .contact-map{
	position: absolute;
	inset:0 0 0 auto;
	width: 50%;
}
.section-contact .contact-image{
	position: absolute;
	inset:0 auto 0 0;
	width: 50%;
}
.section-contact .contact-image img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.form-control{
	background: #eee;
	border: none;
	padding:15px;
}
.form-control:focus{
	box-shadow: none;
	background: #ddd;
}
@media (max-width:769px){
	.mainnav .nav-item .nav-link{
		padding:15px;
		height: auto;
		line-height: 1;
		border:none;
	}
	
	.navbar-brand img{
		height: 40px!important;
	}
	#header .offcanvas{
		background: #fffc;
		backdrop-filter: blur(20px);
	}
	#header .offcanvas .offcanvas-header{
		padding:15px 30px;
	}
	#header .offcanvas .offcanvas-footer .info{
		font-size: .8rem;
	}
	.card-product-square .card-img-overlay{
		font-size: .8rem;
	}
	footer{
		font-size: .8rem;
	}
	footer .nav-link{
		font-size:.8rem;
	}
	.section-contact{
		padding-top:0!important;
	}
	.section-contact .contact-map,
	.section-contact .contact-image{
		position: relative;
		inset: auto;
		width: 100%;
		height: 300px;
		margin:0 0 30px;
	}
}