*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: "Montserrat", system-ui;
}

.btn-abu {
	background-color: #323232 !important;
}

.bg-abu {
	background-color: #323232 !important;
}

.image-gallery {
	display: flex;
	justify-content: space-around;
	gap: 50px;

}

.image-gallery img {
		width: 200px;
		height: auto;
		border-radius: 8px;
		cursor: pointer;

}

.fancybox__slide img {
		width: 200px !important;
		height: auto !important;
		margin: auto;

}

.fancybox__nav .fancybox__button,
.fancybox__toolbar .fancybox__button--close {
		background: none !important;

}

/* Ganti ikon panah default Owl Carousel */
.owl-prev,
.owl-next {
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.8);
    color: #00000000;
    padding: 10px 15px;
    border-radius: 50%;
    font-size: 24px;
    z-index: 999;
}

.owl-prev {
    left: -30px;
}

.owl-next {
    right: -30px;
}

/* Logo wa */
.logo-wa {
	position: relative;
}

.wa {
	position: absolute;
	top: -180px;
	left: 88%;
	z-index: 100;
}

.wa img {
	position: fixed;
	width: 70px;
}

/* nav */
.navbar {
	z-index: 10;
}

.my-navbar {
	transition: background-color 0.3s ease;
}

.bg-transparent {
	background-color: transparent !important;
}

.navbar-brand img {
	width: 150px;
}

.navbar-toggler-icon {
    filter: brightness(0) invert(1); 
}

/* Banner */
.carousel-item img {
	height: 100vh;
}

.banner {
	margin-top: 0px;
}

.carousel-inner {
	position: relative;
}

.banner-desc {
	position: absolute;
	top: 270px;
	left: 640px;
}

.banner-desc h2 {
	width: 400px;
}

.footer-banner {
	background-color: #0E7276;
}

/* About us */
.about {
	color: #323232;
}

.desc-about-us {
	width: 50%;
}

.desc-about-us p {
	text-align: justify;
}

/* Commitment */
.title-our-commitment {
	color: #0E7276;
}

.card-commitment {
	background-color: #0E7276;
	width: 320px;
	height: 320px;
	padding: 10px;
	border-radius: 30px;
}

.card-commitment img {
	fill: #0E7276;
	width: 50px;
}

.icon-white-img {
	filter: brightness(0) invert(1);
}

.card-body {
	margin-top: 40px;
}

/* Product */
.title-product h3 {
	background-color: #323232;
	border-radius: 100px;
	width: 500px;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.card-product {
	background-color: #323232;
	width: 270px;
	height: 220px;
	border-radius: 30px;
}

.icon-card-product {
	background-color: #0E7276;
	padding: 15px;
	border-radius: 50px;
}

.icon-card-product img {
	width: 40px;
}

.card-product {
	position: relative;
}

.icon-card-product {
	position: absolute;
	top: -35px;
	left: 50%;
	transform: translateX(-50%);
}


/* Slide Pack */
.slide-pack{
	background-color: #0E7276;
}

.title-slide-pack img {
	width: 200px;
}

.card-pack {
	background-color: #323232;
	border-radius: 20px;
	padding-top: 20px;
	padding-bottom: 20px;
}

.desc-card-pack {
	width: 250px;
}

.title-card-pack h4 {
	font-size: 16px;
}

.title-card-pack h5 {
	font-size: 16px;
}

.title-card-pack p {
	font-size: 14px;
}

.title-card-pack h5 {
	color: #323232;
	width: 170px;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/* Contact */
.contact {
	background-color: #323232;
}

.card-contact .card{
	background-color: #0E7276;
}

.logo-contact img {
	width: 200px;
}

.footer-contact {
	margin-top: 180px;
}

.footer-contact .web img, .footer-contact .email img, .footer-contact .no-telp img {
	width: 40px;
}

@media (min-width: 360px) and (max-width: 760px){
    /* Logo wa */
	.logo-wa {
		position: relative;
	}

	.wa {
		position: absolute;
		left: 75%;
		z-index: 100;
	}

	.wa img {
		position: fixed;
		width: 70px;
		top: 88%;
	}
	
	.desc-about-us {
		width: 100%;
	}

	.desc-about-us h3, .title-our-commitment h3, .title-product h3, .footer-banner h3 {
		font-size: 20px;
	}
	
	.footer-banner p {
		font-size: 16px;
		width: 85%;
		display: block;
		margin-left: auto;
		margin-right: auto;
	}

	.image-about img {
		width: 160px;
	}

	/* .banner-image {
		position: relative;
	}

	.banner-image img {
		height: 300px;
		width: 100%;
		object-fit: cover;
	} */

	.carousel-inner {
		position: relative;
		height: 300px;
		width: 100%;
		object-fit: cover;
	}

	.carousel-inner img {
		height: 400px !important;
		width: 100%;
		object-fit: cover;
	}

	.banner-desc {
		position: absolute;
		top: 100px;
		left: 50%;
		transform: translateX(-50%);
		text-align: center;
	}
	
	.banner-desc h2 {
		width: 100%;
		font-size: 1.2rem;
	}

	.title-product h3 {
		background-color: #323232;
		border-radius: 100px;
		width: 90%;
		display: block;
		margin-left: auto;
		margin-right: auto;
	}

	.card-contact .card img{
		width: 100%;
		height: fit-content;
	}

	.logo-contact img {
		width: 140px !important;
	}

	.logo-contact h2 {
		font-size: 20px;
	}

	.footer-contact {
		margin-top: 80px;
	}

	.footer-contact .web img, .footer-contact .email img, .footer-contact .no-telp img {
		width: 30px !important;
	}

	.footer-contact .web h4, .footer-contact .email h4, .footer-contact .no-telp h4 {
		font-size: 14px;
	}

	.contact {
		width: 100%;
	}

	.contact-img {
		height: 400px !important;
		object-fit: cover;
	}

	.owl-prev,
    .owl-next {
        font-size: 18px;
        padding: 6px 10px;
    }

    .owl-prev {
        left: -15px;
    }

    .owl-next {
        right: -15px;
    }

	.image-gallery {
		display: flex;
		flex-wrap: wrap;
		gap: 0;
	}

	.image-gallery a {
		width: 140px;
		margin-top: 10px;
		margin-bottom: 5px;
	}
	
}
@media (min-width: 760px) and (max-width: 1200px){
	.desc-about-us {
		width: 50%;
	}

	.carousel-inner {
		position: relative;
	}

	.banner-desc {
		position: absolute;
		top: 100px;
		left: 40%;
		text-align: start;
	}

	.image-about img {
		margin-top: 30px;
		width: 160px;
		height: 320px;
	}

	.contact-img {
		height: 590px !important;
		object-fit: cover;
	}

	.owl-prev,
    .owl-next {
        font-size: 20px;
        padding: 8px 12px;
    }

    .owl-prev {
        left: -20px;
    }

    .owl-next {
        right: -20px;
    }

	.image-gallery {
		display: flex;
		flex-wrap: wrap;
		gap: 10;
	}

	.image-gallery a {
		width: 170px;
		margin-top: 10px;
		margin-bottom: 5px;
	}
}


@media (min-width: 1200px) {
	.load-more {
		display: none;
	}
}