:root{
	--width-wrapper : 1200px;
	--bgcolor : #FFFFFF;
	--bgcolor-light : #4D96E1;
	--text-heading :  #1779DE;
	--navcolor-panel : #1779DE;
	--navcolor-panel-line : #4D96E1;
	--navcolor-panel-hover : #0E64BC;
	--navcolor-text : #DAEAFB;
}


*{
	font-family: sans-serif;
	font-size: 16px;	
}

body{
	padding: 0;
	margin: 0;
	overflow-x: hidden;	
	background: var(--bgcolor);
	color : #333333;
}

h1,h2,h3,h4,h5{
	margin : 0;
}

/*nav{
	position : fixed;
	z-index : 99;
}*/

/* Content */
content{
	position: relative;
	display: flex;
	min-height: calc(100vh);
	/*padding-top: 65px;*/
	align-items: center;
	justify-content: center;
}
.wrapper{
	width: var(--width-wrapper);
	margin: auto;
	padding-top : 70px; 
	padding-bottom: 20px;
}
.wrapper h1{
	text-align: center;
	color: var(--text-heading);
	font-size: 3rem;
	margin-bottom: 30px;
}

.view-content{
	background:#C5DBFC;
}
.view-wrapper{
	width: var(--width-wrapper);
	min-height:calc(95vh - 80px);
	margin-top : 80px;
	background:#FFF;
	border-radius:10px;
	box-shadow : 5px 5px 7px rgba(0, 0, 0, 0.2);
	margin-bottom : 20px;
	padding :30px;
	box-sizing:border-box;
}

.btn-lkp{
	display:block;
	text-align:right;
	margin-top:20px;
}
.btn-lkp a{
	background:var(--navcolor-panel);
	padding:7px 12px;
	color:#FFFFFF;
	font-size:1.2rem;
	text-decoration:none;
	border-radius:10px;
}

.heading-box{ 
	width:100%;
	display:flex;
	align-items:center;
	background:var(--navcolor-panel);
	color:#FFF;	 
	padding:10px 20px;
	margin-bottom:30px;
	border-radius:5px;
	box-sizing:border-box;
}
.heading-box span{ 
	font-size:2.5rem ; 
	text-shadow:3px 3px 5px rgba(0, 0, 0, 0.2);
	margin-right: 20px;
}  
.heading-box h1{
	font-size:2rem;
	text-shadow:3px 3px 5px rgba(0, 0, 0, 0.2);
} 

/* Slider ======================================================= */
.slider{
	background-image: url("../images/metting_room.jpeg");
	background-repeat: no-repeat;
	background-size: cover;
  background-blend-mode: multiply;		
	background-color: #142889;
}

/* Animasi gelombang */
.wave{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 52px;
	background: url("../images/wave.png");
	background-size: 1000px 52px;
}
.wave.wave1{
	animation: animate 30s linear infinite;
	z-index: 13;
	opacity: 1;
	animation-delay: 0s;
	bottom: 0;
}
.wave.wave2{
	animation: animate2 15s linear infinite;
	z-index: 12;
	opacity: 0.5;
	animation-delay: -5s;
	bottom: 3px;
}
.wave.wave3{
	animation: animate 25s linear infinite;
	z-index: 11;
	opacity: 0.2;
	animation-delay: -2s;
	bottom: 6px;
}
.wave.wave4{
	animation: animate2 10s linear infinite;
	z-index: 10;
	opacity: 0.7;
	animation-delay: -5s;
	bottom: 10px;
}
@keyframes animate{ 
	0%{ background-position-x: 0;  }
	100%{ background-position-x: 1000px;  }
}
@keyframes animate2{ 
	0%{ background-position-x: 0;  }
	100%{ background-position-x: -1000px;  }
}

/* Profil ======================================================= */
.profil-ctn{
	width: 100%;
	display:grid;
	grid-template-columns:35% 63%;
	gap: 2%;
/*	margin:20px auto;*/	
}
.profil-ctn > div{
	box-sizing: border-box;
}
.profil-ctn .profil-isi h2{
	font-size : 2.1rem;
	border-bottom: solid 3px #DDDDDD;
	padding-bottom: 10px;
}
.profil-ctn .profil-isi p{
	font-size : 1.2rem;
	line-height: 160%;
}
.profil-ctn .profil-img img{
	width:100%;
}

/* Portofolio ======================================================= */
.galeri{
	background-color:rgba(255, 255, 255, 0.7);
	background-image:url("../images/mettingback.jpg");
	background-attachment: fixed;
	background-size: cover;
	background-blend-mode: soft-light;
}
.galeri-ctn{
	display:grid;
	grid-template-columns:repeat(5, 1fr);
	gap:20px;
}
.glr-box{
  	position: relative;
  	cursor: pointer;
}
.glr-box .overlay {
	position: absolute;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.502);
	top: 0;
	left: 0;
	transform: scale(0);
	transition: all 0.2s 0.1s ease-in-out;
	color: #fff;
	/* center overlay content */
	display: flex;
	align-items: center;
	justify-content: center;
}
.glr-box .overlay span{
	text-align: center;
	font-size: 1.3rem;
	padding:10px;
}
.glr-box:hover .overlay {
  	transform: scale(1);
  	border-radius: 5px;
}

/* gambar kotak  */
.imgsquare{
  position: relative;
  width: 100%;
  background: #333;
  overflow: hidden;
  border-radius: 5px;
}
.imgsquare:after {
  content: "";
  display: block;
  padding-bottom: 55%;
}
.imgsquare img{
 /*  left: -20%; */
  position: absolute;
  width: 100%;
}

/* Client ======================================================= */
.client-ctn{
	display:grid;
	grid-template-columns:repeat(5, 1fr);
	gap:10px;	
}
.client-box{
	display: flex;
	flex-direction : column;	
	justify-content:center;
	text-decoration: none;
	text-align:center;
	padding: 10px;
	align-items : center;	
	border:solid 1px #CCC;
	border-radius:5px;
}
.client-box .client-logo{
	width: auto;
  display: inline-block;   
}
.client-box .client-logo img{
	width: 60%; /* Will shrink image to 30% of its original width */
  height: auto;  
/*	height:100%;*/
}
.client-box h3{
	display:block;
	padding:10px;
	font-size:1.1rem;
}

/* kontak ======================================================= */
.kontak{
	background:#C5DBFC;
}
.kontak-ctn{
	width:90%;
	margin:auto;
	display:grid;
	grid-template-columns : 38% 60%;
	gap:2%;
	align-items:center;
}
.kontak-ctn > div{
	display:block;
	padding:10px;
}
.kontak-ctn .kontak-box{
	margin-right: 20px;
}
.kontak-ctn .kontak-box h2{
	font-size:2rem;
}
.kontak-ctn .kontak-box p{
	font-size:1.2rem;
}
.kontak-ctn .kontak-embed {
	background:#FFF;
	box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.3);
}

.kontak-ctn .kontak-embed .frame-peta{
	width:100%;
	height:500px;
	border:0;
}

/* fying chat */
.wachat{
	position:fixed;
	display:flex;
	z-index:60;
	bottom:50px;
	right:50px;
	align-items:center;
	font-size:1.5rem;
}
.wachat img{
	height : 80px;
}

/* show video */
.video-ctn{
	width:100%;
	display:grid;
	grid-template-columns: 75% 23%;
	gap:2%;	
	height:85vh;
}
.video-ctn .video-player{
/*	display:flex;
	align-items:center;
	justify-content:center;
	background:#DDDDDD;
	text-align:center;*/
}
.video-ctn .video-player video{
	max-width: 100%; /* Fill the available width */
	max-height: 85vh; /* Adjust height automatically */*/
}
.video-ctn .video-title{

}
.video-ctn .video-title h2{
	font-size:2rem;
	padding:10px 0;
/*	border-bottom:solid 2px #555;*/
}
.video-ctn .video-title .video-img{
	background:#555;
	text-align:center;
	margin-bottom:20px;
}
.video-ctn .video-title .video-img img{
	width:80%;
}

/* responsive view */
@media only screen and (max-width: 1200px) {
	.wrapper{ width:90%;}

}
@media only screen and (max-width: 1000px) {
	.kontak-ctn .kontak-embed .frame-peta{ height:400px; }
}

@media only screen and (max-width: 900px) {
	*{ font-size: 14px; }
	.galeri-ctn{ grid-template-columns:repeat(4, 1fr); }
	.client-ctn{ grid-template-columns:repeat(4, 1fr); }
	.client-box .client-logo{ height:80px; }	
	.kontak-ctn{ width:100%; /*	grid-template-columns : 38% 60%;*/ }
	.kontak-ctn .kontak-embed .frame-peta{ height:300px; }
	.kontak-ctn .kontak-box h2{	font-size:1.7rem; }
}

@media only screen and (max-width: 720px) {
	.galeri-ctn{ grid-template-columns:repeat(3, 1fr); }
	.kontak-ctn{ grid-template-columns : 1fr; gap:20px }
	.kontak-ctn .kontak-box h2{	font-size:1.5rem; }
	.kontak-ctn .kontak-box p{	font-size:1.1rem; }	
	.wachat{ bottom:20px; right:20px; }
	.wachat img{ height : 60px; }	
	.video-ctn{	grid-template-columns: 1fr; }	
	.video-ctn .video-player video{	max-height: 70vh; }	
}

@media only screen and (max-width: 560px) {
	.galeri-ctn{ grid-template-columns:repeat(2, 1fr); }
	.client-ctn{ grid-template-columns:repeat(3, 1fr); }
	.client-box .client-logo{ height:60px; }		
	.profil-ctn{ grid-template-columns:1fr;	gap:20px; }	

}
@media only screen and (max-width: 420px) {
	.galeri-ctn{ grid-template-columns:repeat(2, 1fr); }
	.client-ctn{ grid-template-columns:repeat(2, 1fr); }
}