/**
 * Navbar Top
 *
 * @format
 */

.navtop textarea {
	width: 100%;
	padding: 7px;
	margin: 10px 0;
	border: 1px solid #0e5e6f;
	border-radius: 50px;
	font-size: 10px;
	box-sizing: border-box;
	height: 30px;
	padding-left: 10px;
}

.navtop button {
	background-color: transparent;
	border: none;
}

.navtop .search-icon {
	/* transform: translateY(-50%); */
	font-size: 13px;
	color: gray;
}

.navtop img.wangsaf {
	position: fixed;
	right: 0;
	bottom: 0;
	width: 100px;
	z-index: 9999;
}

/* Navbar Bottom */

.navbot {
	background-color: #1a1a1a;
	height: 60px;
}

.navbot .navmid ul {
	margin: 0 auto;
	padding: 0;
	display: flex;
	text-align: center;
	justify-content: center;
	align-items: center;
	list-style: none;
	font-size: 18px;
	padding-top: 11px;
}

.navbot .navmid ul li {
	display: flex;
	text-align: center;
	justify-content: center;
	align-items: center;
	font-family: montserrat, sans-serif;
}

.navbot .navmid ul li a {
	text-decoration: none;
	display: inline-block;
	color: white;
	letter-spacing: 1px;
	padding: 5px 20px;
	border-bottom: 3px solid transparent;
	transition: color 0.3s ease, border-bottom-color 0.3s ease;
	font-size: 16px;
	text-transform: uppercase;
}

.navbot .navmid ul li a:hover,
.navbot .navmid ul li.current_page_item a {
	color: #1e6edb;
	border-bottom-color: #1e6edb;
}

.navbot .navmid ul li.active a {
	color: #1e6edb;
	border-bottom-color: #1e6edb;
}

form.search-bt button {
	position: absolute;
	top: 10px;
	right: 5px;
}

form.search-bt {
	position: relative;
}

/* Banner */

.banner {
	background-image: url(foto/homepage.jpeg);
	background-position: center;
	height: 515px;
	background-size: cover;
	border-bottom: 10px solid #1e6edb;
}

.banner h1 {
	font-family: "Montserrat", Sans-serif;
	font-size: 54px;
	font-weight: 700;
	letter-spacing: 3.3px;
	color: white;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
	margin-top: 200px;
}

/* Banner Other */
.banner-other {
	background-image: url("https://www.bioclearance.com/wp-content/uploads/2022/12/img3-scaled.jpeg");
	background-size: cover;
	background-position: center;
	border-bottom: 12px solid #317bcf;
}

.banner-other .wrap {
	background-color: #102b49;
	opacity: 0.85;
	padding: 60px;
}

.banner-other h1 {
	color: #ffffff;
	font-size: 57px;
	font-weight: 700;
	text-transform: uppercase;
}

.banner-other p {
	color: #ffffff;
	font-family: "Montserrat", Sans-serif;
	font-weight: 600;
	font-size: 1.5rem;
	text-transform: uppercase;
	line-height: 1;
}

/* About */
.about {
	background-color: #1a1a1a;
}

.about .left {
	padding: 10px 0;
}

.about .left h1 {
	font-size: 40px;
	color: #ffffff;
	margin-bottom: 40px;
	font-weight: 700;
}

.about .left p {
	color: #ffffff;
	font-family: "Montserrat", Sans-serif;
	font-weight: 400;
}

.about .right {
	padding: 10px 0;
}

.about .visi-misi p {
	color: #fff;
	font-size: 16px;
}

/* Resource */
.resource {
	background-color: #1a1a1a;
}

/* Resource Associate */
.resource .associate {
	text-align: center;
}

.resource .associate h1 {
	margin: 20px 0 40px 0;
	color: #fff;
	font-weight: 700;
	font-size: 40px;
}

.resource .associate img {
	height: 204px;
	object-fit: cover;
	margin: 0 0 20px 0;
	width: 100%;
}

/* Resource Before */
.resource .before img {
	width: 100%;
}

.resource .before video {
	width: 100%;
}

.resource .before {
	text-align: center;
}

.resource .before h1 {
	color: #fff;
	margin: 0 0 40px 0;
	font-weight: 400;
	font-family: "Montserrat", Sans-serif;
}

/* Resource On Process */
.resource .on-process {
	text-align: center;
}

.resource .on-process h1 {
	color: #fff;
	font-family: "Montserrat", Sans-serif;
	font-weight: 400;
	margin: 20px 0 40px 0;
}

/* Resource On After */
.resource .after {
	text-align: center;
}

.resource .after h1 {
	color: #fff;
	font-family: "Montserrat", Sans-serif;
	font-weight: 400;
	margin: 0 0 40px 0;
}

.resource .after img {
	width: 100%;
	margin: 10px 0 20px 0;
}

.resource .after video {
	width: 100%;
	margin-bottom: 10px;
}

/* Service */
.service {
	background-color: #1a1a1a;
	color: #fff;
}

.service .left {
	padding: 10px 0;
}

.service .left h1 {
	margin-bottom: 40px;
	color: #ffffff;
	font-weight: 700;
	text-transform: uppercase;
}

.service .left .part {
	padding-bottom: 40px;
}

.service .left .part img {
	float: left;
	width: 150px;
	margin-right: 30px;
	filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(19deg)
		brightness(101%) contrast(102%);
}

.service .left .part h4 {
	font-size: 24px;
	margin-bottom: 16px;
}

/* Distribution */

.distribusi h1 {
	font-family: montserrat, sans-serif;
	font-weight: 700;
	color: white;
	margin-top: 70px;
}

.distribusi h2 {
	font-family: montserrat, sans-serif;
	font-weight: 700;
	color: white;
}

.distribusi p {
	font-family: montserrat, sans-serif;
	font-weight: 400;
	color: gainsboro;
	margin-top: 30px;
	text-align: justify;
}

.distribusi button {
	border: none;
	background: #041c36;
	font-weight: bold;
	color: orange;
	padding: 10px 15px;
	text-decoration: none;
	margin-top: 10px;
}

.distribusi .col-md-8 {
	padding: 0 50px;
	padding-right: 22px;
}

.distribusi .col-md-4 {
	text-align: center;
}

.distribusi .foto {
	border-radius: 50px;
}

/* Advantege */
.advantage {
	background-image: linear-gradient(
			rgba(16, 43, 73, 0.8),
			rgba(16, 43, 73, 0.8)
		),
		url(https://sandbox.bioclearance.com/wp-content/uploads/2025/08/advantage.jpeg);
	height: 650px;
	background-position: center;
	background-size: cover;
}

.advantage .container {
	padding: 50px 50px;
	padding-bottom: 30px;
}

.advantage h1 {
	color: white;
	font-family: inherit;
	font-weight: 700;
	text-align: center;
	font-size: 45px;
}

.advantage p {
	font-family: montserrat, sans-serif;
	font-weight: 400;
	color: gainsboro;
	margin-top: 20px;
	text-align: center;
	letter-spacing: 0.5px;
}

.advantage .opper img {
	width: 110px;
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
	margin-top: 30px;
	filter: invert(100%) sepia(1%) saturate(7500%) hue-rotate(260deg)
		brightness(122%) contrast(120%);
}

.advantage .opper h5 {
	margin-top: 35px;
	font-weight: bold;
	color: white;
	text-align: center;
}

.advantage .opper h5::after {
	content: "";
	display: block;
	background: #fea042;
	height: 7px;
	width: 89px;
	margin: 20px auto;
}

.advantage .opper p {
	text-align: justify;
	padding: 20px 20px;
}

/* Grid */
.grid h3 {
	color: white;
	font-family: montserrat, sans-serif;
}
.grid p {
	color: white;
	font-family: montserrat, sans-serif;
	text-align: justify;
}

.grid .gridimg {
	height: 450px;
	background-position: center;
	background-size: cover;
}

.gridimg {
	padding: 80px;
}

/* Porto */
.porto {
	background-color: #323232;
	height: 550px;
}

.porto .title {
	color: white;
	font-weight: bold;
	font-family: montserrat, sans-serif;
	text-align: center;
}
.porto img {
	width: 190px;
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
	margin-top: 55px;
}

.porto h1 {
	margin: 0;
	text-align: center;
	color: #317bcf;
	margin-top: 40px;
}

.porto h5 {
	color: white;
	font-family: "Montserrat", Sans-serif;
	font-weight: 600;
	text-align: center;
	margin-top: 20px;
}

/* News */
.news {
	background-color: #1a1a1a;
	height: 800px;
}

.news img {
	margin: 50px 0px;
	width: 90%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
}

.news a {
	color: white;
	text-decoration: none;
	font-weight: 600;
}

.news p {
	text-align: justify;
	color: white;
	margin-top: 20px;
	/* padding-right: 44px; */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 6;
	overflow: hidden;
	text-overflow: ellipsis;
	max-height: calc(1.5rem * 6);
}

.news h1 {
	margin: 0;
	text-align: center;
	color: white;
	margin-top: 40px;
}

/* Modal */
.modal {
	display: none;
	position: fixed;
	z-index: 9999;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: black;
	padding: 20px;
	border-radius: 5px;
	width: 600px !important;
	color: white;
}

.modal-content .banner div {
	height: 275px !important;
}

.modal-content button {
	position: absolute;
	top: 0;
	right: 0;
	font-weight: bold;
	background: #cc517c;
	color: white;
}

/* Tabs */
.tabs {
	gap: 8px;
	flex-wrap: wrap;
	align-items: center;
	margin-bottom: 16px;
}

.tabs button {
	appearance: none;
	border: 0;
	background: #0e1118;
	color: #9aa3b2;
	padding: 10px 14px;
	border-radius: 12px;
	cursor: pointer;
	font-weight: 600;
	border: 1px solid #1e2433;
	transition: all 0.18s ease;
}

.tabs button[aria-selected="true"] {
	color: #fff;
	background: #12172a;
	border-color: #2a3160;
}

.tabs button:hover {
	border-color: #2a3160;
}

.panel {
	display: none;
	padding: 12px;
	border: 1px solid #1e2433;
	border-radius: 8px;
	background: #0d1017;
	color: #fff;
}

.panel.active {
	display: block;
}

.sec {
	position: relative;
	margin-left: 15px;
	margin-right: 15px;
	margin-bottom: 30px;
	z-index: 0;
	cursor: pointer;
}

.buletan-categori {
	border-top-left-radius: 219px;
	border-top-right-radius: 219px;
	background: rgb(52 165 205 / 71%);
	height: 160px;
	width: 100%;
	text-align: center;
	padding-top: 20px;
	position: absolute;
	z-index: -1;
	bottom: 0;
}

.sec > h6 {
	position: absolute;
	bottom: 35px;
	z-index: 3;
	left: 0;
	right: 0;
	margin: 0 auto;
	text-align: center;
	color: white;
}

.sec .gelombang {
	position: absolute;
	bottom: 0;
	width: 100%;
	left: 0;
}

/* studies */
section.case-studies {
	background: black;
	color: white;
	padding: 60px 0;
}

.case-studies .x > div:nth-child(1) {
	height: 400px;
	background-position: center;
	background-size: contain;
	margin-bottom: 20px;
	border-radius: 20px;
}

/* Contact */
.contact {
	padding: 50px 0;
}

.contact p {
	color: #fff;
	margin: 0 0 30px 0;
}

.contact .form input {
	width: 100%;
	padding: 10px;
	margin-bottom: 10px;
	border-radius: 10px;
}

.contact .form textarea {
	width: 100%;
	padding: 0 20px 40px 10px;
	border-radius: 10px;
}

.contact .form button {
	color: #fff;
	background-color: #000;
	padding: 12px 50px;
	border: none;
	border-radius: 10px;
	margin-top: 10px;
}

/* Top Footer */
.footer-top {
	background-color: #000;
	border-bottom: 2px dotted #fff;
}

.footer-top h1 {
	font-size: 59px;
	font-weight: 200;
	color: #fff;
	letter-spacing: 4px;
	padding: 15px 0;
}

/* Footer */
.footer {
	background-color: #000;
	padding: 50px 0 0 0;
}

.footer .content {
	margin: 20px 0;
}

/* Footer In title */
.footer .title h2 {
	color: #ffffff;
	font-family: "Montserrat", Sans-serif;
	font-weight: 600;
	border-bottom: 2px dotted #fff;
	font-size: 24px;
	line-height: 2.5em;
}

/* Footer Contact One */
.footer .contact-one a {
	color: #fff;
	font-size: 14px;
	text-decoration: none;
}

.footer .contact-one a i {
	color: #e69442;
	margin-right: 10px;
}

.footer .contact-one ul {
	padding: 0;
	margin: 20px 0;
}

.footer .contact-one ul li {
	display: block;
	padding: 4px 0;
}

/* Footer Contact two */
.footer .contact-two h5 {
	font-size: 15px;
	color: #fff;
}

.footer .contact-two ul li {
	display: inline-block;
	color: #fff;
	font-size: 14px;
	margin-right: 10px;
}

.footer .contact-two ul {
	padding: 0;
	margin: 0;
}

.footer .contact-two ul li a {
	color: #fff;
	text-decoration: none;
}

.footer .contact-two ul li i {
	color: #e69442;
	margin-right: 10px;
}

.footer .content h5 {
	font-size: 15px;
	color: #fff;
}

.footer .content ul {
	color: #fff;
	padding: 6px 20px;
}
li::marker {
	color: orange;
	font-size: 18px;
}

.footer .content ul li a {
	color: #fff;
	text-decoration: none;
}

/* Footer Sosmed */
.footer .sosmed {
	display: flex;
	justify-content: center;
	margin-bottom: 20px;
}

.footer .sosmed i {
	font-size: 32px;
	padding: 16px;
	color: #4d4d4d;
}

/* Footer Bottom */
.footer .bottom-footer {
	text-align: center;
	color: #54595f;
}

.footer .bottom-footer h5 {
	font-family: "Montserrat", Sans-serif;
	font-weight: 400;
	text-transform: uppercase;
	font-size: 16px;
	padding: 20px;
}

.footer .bottom-footer a {
	color: #54595f;
	text-decoration: none;
}

@media (max-width: 600px) {
	/* Navtop */
	.navtop {
		display: none;
	}

	.container-fluid.themobmenu.d-block.d-sm-none {
		padding: 0 !important;
	}

	.nav_bar .mobilebar {
		background-color: #323232;
	}

	#menumob {
		background-color: #1a1a1a !important;
	}

	.mobile_menu ul li a {
		color: #fff;
		text-decoration: none;
	}

	.hbar1,
	.hbar2,
	.hbar3 {
		background-color: #fff !important;
	}

	/* Banner */
	.banner {
		height: 315px !important;
	}

	.banner h1 {
		margin-top: 115px;
		font-size: 34px;
	}

	/* Banner Other */
	.banner-other .wrap {
		padding: 50px 20px;
	}

	.banner-other h1 {
		font-size: 34px;
	}

	.banner-other p {
		font-size: 16px;
	}

	/* Distribusi */
	.distribusi {
		height: auto !important;
	}

	.distribusi .col-md-7 {
		padding: 12px !important;
	}

	.distribusi .col-md-8 {
		padding: 0;
		padding-right: 0;
	}

	.distribusi h1 {
		font-size: 24px;
		margin-top: 25px;
	}

	.distribusi h2 {
		font-size: 24px;
	}

	.distribusi p {
		font-size: 14px;
	}

	.distribusi .col-md-5 {
		display: none;
	}

	/* Advantage */
	.advantage {
		height: auto;
	}

	.advantage .container {
		padding: 30px 20px !important;
	}

	.advantage h1 {
		font-size: 24px;
	}

	.advantage p {
		font-size: 14px;
	}

	.distribusi .foto {
		margin-bottom: 30px;
		width: 56%;
	}

	/* Grid */
	.grid .gridimg {
		height: auto;
	}

	.grid p {
		font-size: 14px;
	}

	.gridimg {
		padding: 30px 20px;
	}

	/* Portofolio */
	.porto {
		height: auto;
	}

	.porto .title {
		font-size: 24px;
	}

	.porto .col-md-3 {
		width: 50%;
		padding: 12px;
	}

	.porto img {
		width: 100%;
	}

	/* News */
	.news {
		padding: 50px 0;
		height: auto;
	}

	.news img {
		width: 100%;
	}

	.news h1 {
		margin: 0;
	}

	.news p {
		padding-right: 0;
		font-size: 14px;
	}

	/* About  */
	.about {
		padding: 20px 0;
	}

	.about .left h1 {
		font-size: 24px;
	}

	.about .left p {
		font-size: 14px;
	}

	.about .col-md-3 {
		display: none;
	}

	.about .visi-misi p {
		font-size: 14px;
	}

	.about .visi-misi strong {
		font-size: 24px;
	}

	.sec {
		margin-left: 0;
		margin-right: 0;
		width: 100%;
		height: 230px !important;
	}

	.buletan-categori {
		height: 100px !important;
	}

	.buletan-categori > h6 {
		font-size: 14px;
	}

	.sec > h6 {
		bottom: 10px !important;
		font-size: 12px;
	}

	.panel .col-md-4 {
		width: 50%;
		padding: 0 12px;
	}

	/* Resource */
	.resource .row-cols-5 {
		display: flex;
	}

	.resource .row-cols-5 .col {
		width: 50%;
	}

	.resource .before .row {
		display: flex;
	}

	.resource .before .col {
		width: 50%;
		padding: 12px;
		flex: 1 0 50%;
	}

	/* Service */
	.service .left {
		padding: 30px 0;
	}

	.service .left h1 {
		font-size: 34px;
		margin-bottom: 40px;
	}

	.service .left .part {
		text-align: center;
	}

	.service .left .part img {
		float: none;
		width: 125px;
		margin-right: 0 !important;
	}

	.service .left .part p {
		font-size: 14px;
	}

	.service .col-md-3 {
		display: none;
	}

	/* Contact */
	.contact .form {
		padding-bottom: 20px;
	}

	.contact iframe {
		width: 100% !important;
	}

	/* Footer */
	.footer-top h1 {
		font-size: 34px;
	}
}