/*Memanggil Font google*/

  @import url('https://fonts.googleapis.com/css2?family=Phudu:wght@500&family=Poppins&family=Raleway:wght@600&display=swap');

/*Membuat Variable Css*/
:root {
	--warnaBackground: #698996;
	--warnaTextPutih: #ffffff;
	--warnaOrange: #FF7048;
	--warna1: #30394F;
	--warna2: #5F4CA5;
	--warna3: #202022;
}


/*Menerapkan Kesemua Element*/
body {
/*	background-color: var(--warna1);*/
	font-family: 'Raleway', sans-serif;
	overflow-x: hidden;
}

* {
	padding: 0;
	margin: 0;
}
html{
	scroll-behavior: smooth;
}
/*ambil kode di : https://codepen.io/sosuke/pen/Pjoqqp */

.filter-green{
    filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%);
}
.filter-white{
    filter: invert(100%) sepia(51%) saturate(0%) hue-rotate(359deg) brightness(111%) contrast(105%);
}



/*	[0] Utama
	[1A] Header - All
	[1B] Header - Mobile
*/



/* [0] Utama */

.row {display: flex;}
.align-center {align-items: center;}
.justify-center {justify-content: center;}
.justify-between {justify-content: space-between;}
.color-orange{color: var(--warnaOrange);}
.color-white{color: #fff;}
.fbold {font-weight: bold;}
.dblock{display: inline-block;}
.h-title {font-size: 2em; font-family: 'Phudu', cursive;}
.h-title-sm {font-size: 1.4em; font-family: 'Phudu', cursive;}
.p-title {opacity: 0.9;font-family: 'Poppins', sans-serif;}

.col-md-12 {width: 100%;}
.col-md-11 {width: 91.66666666666668%;}
.col-md-10 {width: 83.33333333333335%;}
.col-md-9 {width: 75%;}
.col-md-8 {width: 66.66666666666668%;}
.col-md-7 {width: 58.333333333333333%;}
.col-md-6 {width: 50%;}
.col-md-5 {width: 41.66666666666667%;}
.col-md-4 {width: 33.33333333333334%;}
.col-md-3 {width: 25%;}
.col-md-2 {width: 16.66666666666667%;}
.col-md-1 {width: 8.333333333333333%;}

.mt-1{margin-top: 5px;}
.mt-2{margin-top: 10px;}
.mt-3{margin-top: 15px;}
.mt-4{margin-top: 20px;}
.mt-5{margin-top: 25px;}

.p-1{padding: 5px;}
.p-2{padding: 10px;}
.p-3{padding: 15px;}
.p-4{padding: 20px;}
.p-5{padding: 25px;}

.m-0 {
	margin: 0 !important;;
}.p-0 {
	padding: 0 !important;;
}


.image-fix img{width: 100% }
.text-center {text-align: center;}

.container {
	display: flex;
	justify-content: center;
}
.content {
	max-width: 1200px;
	width: 100%;
}
.radius-1 {
	border-radius: 5px;
}
.radius-2 {
	border-radius: 10px;
}
.radius-3 {
	border-radius: 15px;
}
.radius-100 {
	border-radius: 50%;
}
.border-none {
	border: none;
	outline: none;
}





/* [1A] Header - All */
header {
		background: rgb(3,40,129);
		background: linear-gradient(153deg, rgba(3,40,129,1) 0%, rgba(161,38,8,1) 100%);
		padding: 0 13px;

}

header .fixed_container {

	position: fixed;
	z-index: 999;
	left: 0;
	right: 0;
	display: flex;
	justify-content: space-evenly;
}
header .fixed_container.bg-active {
	transition: all 2s;
	background: rgb(3,40,129);
	background: linear-gradient(153deg, rgba(3,40,129,1) 0%, rgba(161,38,8,1) 100%);
}
.header-menu{
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 100px;
	width: 100%;
	max-width: 1200px;
	 
}
.header-menu h2{
	font-family: 'Phudu', cursive;
	color: var(--warnaTextPutih);
}
.header-menu img{
	height: 20px;
	margin-right: 7px;
}
.header-menu ul {
	width: auto;
	display: flex;
	list-style: none;
	justify-content: space-between;
}
.header-menu ul li{
	padding: 30px;
}
.header-menu ul li a{
	text-decoration: none;
	color: var(--warnaTextPutih);
}
.header-menu a.btn-header {
	cursor: pointer;
	color: var(--warnaTextPutih);
	padding: 12px 30px;
	background-color: var(--warnaOrange);
	text-decoration: none;
}
.header-menu .btn-header:hover {
	transform: scale(1.01);
	background-color: #f77f00;
}




.jumbotron-header {
	display: flex;
	margin-top: 100px;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	height: calc(100vh - 100px);
}
.header-kiri {
	padding: 4em 0;
	width: 47%;
	color: var(--warnaTextPutih);
}
.header-kiri h2 {
	font-family: 'Phudu', cursive;
	padding: 10px 0;
	margin: 0;
	font-size: 3em;
}
.header-kiri p {
	padding: 10px 0;
	opacity: 0.7;
	font-family: 'Poppins', sans-serif;
}
.header-kiri form {
	padding: 10px 0;
	border: none;
	outline: none;
	margin-top: 20px;
}
.header-kiri form input {
	padding: 15px;
	width: 60%;
}
.header-kiri form button {
	background-color: var(--warnaOrange);
	cursor: pointer;
	padding: 15px;
	border: none;
	outline: none;
	width: 20%;
	color: white;
}
.header-kiri form button:hover {
	background-color: #e76f51;
}
.header-kanan {
	width: 47%;

	color: var(--warnaTextPutih);
}
.header-kanan img {
	width: 100%;
}

a.menu-xl {
	display: block;
}
img.menu-mobile {
	display: none;
}
.menu-kontak {
	display: none;
}





/* [1B] Header - Mobile */

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

	.header-kanan {
		display: none;
	}
	.row {
	display: flex;
	flex-wrap: wrap;
}
	.col-12 {width: 100%;}
	.col-11 {width: 91.66666666666668%;}
	.col-10 {width: 83.33333333333335%;}
	.col-9 {width: 75%;}
	.col-8 {width: 66.66666666666668%;}
	.col-7 {width: 58.333333333333333%;}
	.col-6 {width: 50%;}
	.col-5 {width: 41.66666666666667%;}
	.col-4 {width: 33.33333333333334%;}
	.col-3 {width: 25%;}
	.col-2 {width: 16.66666666666667%;}
	.col-1 {width: 8.333333333333333%;}

	a.menu-xl {
		display: none;
	

	}
	img.menu-mobile {
		display: block;
	}
	.menu-kontak {
	display: block;
}


	.header-menu h2{
		color: var(--warnaTextPutih);
	}
	.header-menu {
		padding: 0 15px;
	}
	.header-menu ul {
		display: none;
		flex-direction: column;
		position: fixed;
		left: 0;
		margin: 0;
		padding: 0;
		right: 0;
		top: 100px;
		background-color: var(--warnaTextPutih);
		z-index: 11;

	}

	.header-menu ul li {
		border-bottom: 1px solid #ccd5ae;
	}
	.header-menu ul li a {

		color: var(--warna3);


	}




   .header-menu h2{
		font-size: 1.3em;
	}	

	.jumbotron-header {
		display: flex;
		justify-content: space-between;
		flex-direction: column;
		align-items: center;
		width: 100%;
		height: calc(99vh - 100px);
	}

	.header-kiri {
		padding: 0;
		width: 100%;
		color: var(--warnaTextPutih);
	}
	.header-kiri h2 {
		padding: 10px 0;
		margin: 0;
		font-size: 2.5em;
	}


	.header-kanan {
		padding: 0;
		width: 100%;
		color: var(--warnaTextPutih);
	}

	.header-menu img.filter-white {
		height: 30px;
		margin-top: 4px;
	}



}





/* [2] Tentang - All */

/* [3] Service - All */

.service-bg {
	background: #e0fbfc;
	text-align: center;
}

.bg-card1{
	background-color: #2ec4b6;
}.bg-card2{
	background-color: #ff9f1c;
}

.card {
	background-color: #ffffff;
	box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
	border-radius: 5px;
	padding: 10px;
	cursor: pointer;
	max-width: 250px;
	margin: auto;

}
.card:hover{
	background-color: #ffbf69;
}
.img-logo img{
	max-width: 100px;
	padding: 20px;
}


/* [4] pricing-bg - All */

.pricing-bg {
	background-color: #e0fbfc;
	text-align: center;
}
.card-pricing {
	background-color: #fff;
	box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
	border-radius: 5px;
	cursor: pointer;
	max-width: 250px;
	margin: auto;

}
.card:hover{
	background-color: #ffbf69;
}

.title-pricing {
	padding: 10px;
	color: #1b263b;
}

ul.list-pricing {
	list-style: none;
	line-height: 2em;
	margin-top: 10px;
}

a.btn-pricing {
	text-decoration: none;
	padding: 10px 20px;
	border: none;
	border-radius: 7px;
	outline: none;
	color: #0a9396;
	display: inline-block;
	border: 1px solid #0a9396;
	margin: 16px 0;
}
a.btn-pricing:hover {
	color: white;
	background-color: #0d1b2a;
}
.bg-green1 {
	background-color: #0a9396;
}
.bg-pink1 {
	background-color: #ff8fa3;
}
.bg-orange1 {
	background-color: #ff9f1c;
}




/* [5] lovely-client - All */

.lovely-client {

	padding: 100px 0 20px 0 ;
	background: rgb(3,40,129);
		background: linear-gradient(153deg, rgba(3,40,129,1) 0%, rgba(161,38,8,1) 100%);
}

.list-img-lovely{
	color: white;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
}
.list-img-lovely img {
	padding: 10px;
	height: 30px;
}

ul.footer-list {

	list-style: none;
	line-height: 1.2em;
	opacity: 0.7;
	color: var(--warnaTextPutih);
}



/* [6] Accordian - All */
.accordian {

}
.accordian li {

	list-style: none;
	width: 100%;
	margin-bottom: 10px;
	background-color: #ffffff;
	box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
	border-radius: 5px;
	padding: 10px;
	box-sizing: border-box;
}

.accordian li label {
	padding: 10px;
	display: flex;
	justify-content: space-between;
	cursor: pointer;
	font-size: 1.3em;
	font-family: 'Raleway', sans-serif;


}

.accordian li label span {
	transform: rotate(90deg);
	font-size: 1.3em;


}

.accordian label + input[type='radio']{
	display: none;
}
.accordian .content-radio {
	padding: 0 10px;
	line-height: 26px;
	max-height: 0;
	overflow-x: hidden;
	transition: max-height 0.5s;
}

.accordian label + input[type='radio']:checked + .content-radio{
	max-height: 200px;
}





/*SCROL TO TOP*/

.scroltotop {
	position: fixed;
	cursor: pointer;
	
	right: 20px;
	bottom: 20px;
	height: 50px;
	width: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 999;
}
.scroltotop span {
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	height: 50px;
	width: 50px;
	text-align: center;
	background-color: #0a9396;
}

.scroltotop span img {
	transform: rotate(270deg);
	height: 25px;
	width: 25px;
}