/*------------------------------------------
# COLOR
------------------------------------------*/
:root {
	--biru-gelap: #0A6295;
	--biru-tua:   #0078FF;
	--biru-muda:  #00A1FF;
	--biru-toska: #0C92C9;
}
.biru-gelap {
	color: var(--biru-gelap) !important;
}
.biru-tua {
	color: var(--biru-tua)   !important;
}
.biru-muda {
	color: var(--biru-muda)  !important;
}
.biru-toska {
	color: var(--biru-toska)  !important;
}

.bg-biru-gelap {
	background: var(--biru-gelap) !important;
}

/*------------------------------------------
# BUTTON
------------------------------------------*/
.scroll-top {
	border-radius: 1rem;
}

.scroll-top, .btn-blue {
	background-color: var(--biru-tua) !important;
	color: white;
	transition: background-color 0.3s ease;
}
.scroll-top:hover, .btn-blue:hover {
	background-color: var(--biru-gelap) !important;
	background-color: #1990FF !important; /* lighter */
	background-color: #0066D1 !important; /* darker  */
	color: white !important;
}

.btn-blue-gelap {
	background-color: var(--biru-gelap) !important;
	color: white;
	transition: background-color 0.3s ease;
}
.btn-blue-gelap:hover {
	background-color: var(--biru-tua) !important;
	background-color: #084F78 !important; /* darker  */
	background-color: #1573A8 !important; /* lighter */
	color: white !important;
}

/*------------------------------------------
# ICOMOON
------------------------------------------*/
[class^="icon-"], [class*=" icon-"]:before {
	font-family: 'icomoon' !important;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}


/*------------------------------------------
# AOS
------------------------------------------*/
@media screen and (max-width: 768px) {
    [data-aos-delay] {
        transition-delay: 0s !important;
    }
}

/*------------------------------------------
# PEMANIS
------------------------------------------*/
/* <576px (default mobile) */
.gelombang {
	margin-right: -127px;
	margin-top: -82px;
}
/* ≥576px (sm) */
@media (min-width: 576px) {
	.gelombang {
		margin-right: clamp(-127px, calc(((100vw - 540px) / 2) - 127px), 0px);
	}
}
/* ≥768px (md) */
@media (min-width: 768px) {
	.gelombang {
		margin-right: clamp(-127px, calc(((100vw - 720px) / 2) - 127px), -20px);
	}
}
/* ≥992px (lg) */
@media (min-width: 992px) {
	.gelombang {
			margin-right: clamp(-127px, calc(((100vw - 960px) / 2) - 127px), -20px);
		}
}
/* ≥1200px (xl) */
@media (min-width: 1200px) {
	.gelombang {
			margin-right: clamp(-127px, calc(((100vw - 1140px) / 2) - 127px), -20px);
		}
}
/* ≥1400px (xxl) */
@media (min-width: 1400px) {
	.gelombang {
		margin-right: clamp(-127px, calc(((100vw - 1320px) / 2) - 127px), -20px);
	}
}


/*------------------------------------------
# INFORMASI
------------------------------------------*/
.informasi .isotope-container {
	height: auto !important;
}

.informasi .portfolio-content {
    border-top-left-radius: calc(1rem - 1px);
    border-top-right-radius: calc(1rem - 1px);
}

.informasi .portfolio-title {
    font-weight: bolder;
    line-height: 1.15;
    max-height: calc(1.15 * 4 * var(--bs-body-font-size));
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

.informasi .portfolio-title a {
    color: var(--bs-body-color);
}

.informasi .portfolio-title:hover,
.informasi .portfolio-title a:hover {
    color: var(--accent-color);
}

.informasi .portfolio-summary {
    line-height: 1.15;
    max-height: calc(1.15 * 6 * var(--bs-body-font-size));
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
}

.informasi .portfolio-content img {
    object-fit: contain;
    aspect-ratio: 3/2;
}

.informasi .portfolio-content img.stretch {
    object-fit: fill;
}

.informasi .portfolio-description .bg-primary {
    background-color: var(--accent-color) !important;
}

/*------------------------------------------
# HEADER
------------------------------------------*/
.h-header {
	height: 90px;
}
.mt-header {
	margin-top: 90px;
}
.pt-header {
	padding-top: 90px;
}
@media (max-width: 1199.98px) {
	.h-header {
		height: 76px;
	}
	.mt-header {
		margin-top: 76px;
	}
	.pt-header {
		padding-top: 76px;
	}
}

/*------------------------------------------
# NEW CLASS
------------------------------------------*/
.fs-5x {
	font-size: 1.25rem;
}
.fs-6x {
	font-size: 1.1rem;
}
@media (max-width: 575.98px) {
	.fs-5x {
		font-size: 1.1rem !important;
	}
	.fs-6x {
		font-size: 1rem !important;
	}
}

.fw-800 {
    font-weight: 800 !important;
}
