@font-face {
    font-family: 'Franklin Gothic Cond';
    src: url('fonts/FranklinGothicCondensed.eot');
    src: url('fonts/FranklinGothicCondensed.eot?#iefix') format('embedded-opentype'),
        url('fonts/FranklinGothicCondensed.woff2') format('woff2'),
        url('fonts/FranklinGothicCondensed.woff') format('woff'),
        url('fonts/FranklinGothicCondensed.ttf') format('truetype'),
        url('fonts/FranklinGothicCondensed.svg#FranklinGothicCondensed') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Franklin Gothic Medium Cond';
    src: url('fonts/FranklinGothic-MediumCond.eot');
    src: url('fonts/FranklinGothic-MediumCond.eot?#iefix') format('embedded-opentype'),
        url('fonts/FranklinGothic-MediumCond.woff2') format('woff2'),
        url('fonts/FranklinGothic-MediumCond.woff') format('woff'),
        url('fonts/FranklinGothic-MediumCond.ttf') format('truetype'),
        url('fonts/FranklinGothic-MediumCond.svg#FranklinGothic-MediumCond') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Franklin Gothic Book';
    src: url('fonts/FranklinGothic-Book.eot');
    src: url('fonts/FranklinGothic-Book.eot?#iefix') format('embedded-opentype'),
        url('fonts/FranklinGothic-Book.woff2') format('woff2'),
        url('fonts/FranklinGothic-Book.woff') format('woff'),
        url('fonts/FranklinGothic-Book.ttf') format('truetype'),
        url('fonts/FranklinGothic-Book.svg#FranklinGothic-Book') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Franklin Gothic Heavy';
    src: url('fonts/FranklinGothic-Heavy.eot');
    src: url('fonts/FranklinGothic-Heavy.eot?#iefix') format('embedded-opentype'),
        url('fonts/FranklinGothic-Heavy.woff2') format('woff2'),
        url('fonts/FranklinGothic-Heavy.woff') format('woff'),
        url('fonts/FranklinGothic-Heavy.ttf') format('truetype'),
        url('fonts/FranklinGothic-Heavy.svg#FranklinGothic-Heavy') format('svg');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Franklin Gothic Light';
    src: url('fonts/FranklinGothic-Light.eot');
    src: url('fonts/FranklinGothic-Light.eot?#iefix') format('embedded-opentype'),
        url('fonts/FranklinGothic-Light.woff2') format('woff2'),
        url('fonts/FranklinGothic-Light.woff') format('woff'),
        url('fonts/FranklinGothic-Light.ttf') format('truetype'),
        url('fonts/FranklinGothic-Light.svg#FranklinGothic-Light') format('svg');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Franklin Gothic';
    src: url('fonts/FranklinGothic.eot');
    src: url('fonts/FranklinGothic.eot?#iefix') format('embedded-opentype'),
        url('fonts/FranklinGothic.woff2') format('woff2'),
        url('fonts/FranklinGothic.woff') format('woff'),
        url('fonts/FranklinGothic.ttf') format('truetype'),
        url('fonts/FranklinGothic.svg#FranklinGothic') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Franklin Gothic Bold';
    src: url('fonts/FranklinGothicBT-Roman.eot');
    src: url('fonts/FranklinGothicBT-Roman.eot?#iefix') format('embedded-opentype'),
        url('fonts/FranklinGothicBT-Roman.woff2') format('woff2'),
        url('fonts/FranklinGothicBT-Roman.woff') format('woff'),
        url('fonts/FranklinGothicBT-Roman.ttf') format('truetype'),
        url('fonts/FranklinGothicBT-Roman.svg#FranklinGothicBT-Roman') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face{
	font-family: 'FontAwesome';
	src: url('fonts/fontawesome-webfont.eot?v=4.7.0');
	src: url('fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),
		url('fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),
		url('fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),
		url('fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),
		url('fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
	font-weight: normal;
	font-style:normal;
}

html, body{
	padding: 0px;
	margin: 0px;
	width: 100%;
	height: 100%;
	background-color: #d8ecf3;
}

.grecaptcha-badge{
	visibility: hidden;
}

button,
input,
textarea{
	outline: none;
}

.err{
	position: relative;
	display: block;
	color: red;
	display: none;
	font-family: 'Franklin Gothic Book';
	font-size: 14px;
	margin-top:5px;
}
	.text-error,
	.text-error:focus{
		border: solid 1px red;
	}
	
	.body{
		position: relative;
		display: block;
		width: 100%;
		background-color: #d8ecf3;
		font-family: 'Franklin Gothic';
	}
		.header{
			position: fixed;
			width: 100%;
			height: 60px;
			background-color: #01a6ce;
			display: block;
			z-index: 999;
		}
			.logo{
				width: auto;
				height: 60px;
				padding: 10px;
			}
				.logo img{
					height: 40px;
				}
			.box-menu{
				position: absolute;
				display: none;
				width: 100%;
				z-index: 9;
				background-color: #01a6ce;
			}
				.btn-menu{
					position: absolute;
					display: block;
					width: 45px;
					padding: 10px;
					background-color: #fff;
					top: 10px;
					right: 10px;
				}
					.menu-button{
						width: 25px;
						height: 20px;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						cursor: pointer;
					}

					.bar{
						width: 100%;
						height: 2px;
						background-color: #01a6ce;
						transition: transform 0.3s ease, opacity 0.3s ease;
					}

					/* Close button styles */
					.menu-button.open .bar:nth-child(1) {
						transform: translateY(9px) rotate(45deg);
					}

					.menu-button.open .bar:nth-child(2) {
						opacity: 0;
					}

					.menu-button.open .bar:nth-child(3) {
						transform: translateY(-9px) rotate(-45deg);
					}
				
				.menu{
					position: relative;
					display: block;
					padding: 10px 20px;
					font-family: 'Franklin Gothic Book';
					font-weight: bold;
					letter-spacing: 2px;
					color: #fff;
					font-size: 16px;
					border-top: solid 1px #fff;
					border-bottom: solid 1px #ccc;
				}
		
		.content{
			position: relative;
			display: block;
			width: 100%;
			padding-top: 60px;
		}
			.segment{
				position: relative;
				display: block;
				width: 100%;
				padding-bottom: 50px;
			}
				.video{
					position: relative;
					display: block;
					width: 100%;
					text-align: center;
				}
					.jdl-video{
						font-size: 24px;
						line-height: 24px;
						color: #004987;
						padding: 20px 0px;
						padding-bottom: 10px;
					}
					.frame-watch{
						position: relative;
						display: block;
						width: 100%;
					}
						.watch{
							position: relative;
							display: inline-block;
							padding: 7px 30px;
							background-color: #5383ff;
							color: #fff;
							font-size: 18px;
							border-radius: 30px;
						}
					.frame-video{
						position: relative;
						display: block;
						width: 100%;
						padding: 20px;
					}
						.video-container {
							position: relative;
							width: 100%; /* Adjust to the full width of its parent container */
							padding-bottom: 56.25%; /* 16:9 aspect ratio (height/width = 9/16 = 0.5625) */
							height: 0;
							overflow: hidden;
						}
						.video-container iframe {
							position: absolute;
							top: 0;
							left: 0;
							width: 100%;
							height: 100%;
							border: 0;
						}
						.chat{
							position: absolute;
							width: 100px;
							right: 0px;
							bottom: -50px;
						}
						.chatbot{
							position: fixed;
							width: 100px;
							right: 0px;
							bottom: 0px;
							z-index: 9;
							cursor: pointer;
						}
						.frame-chat{
							position: fixed;
							display: block;
							padding: 20px;
							background-color: #004987;
							z-index: 10;
							right: -100%;
							bottom: 0px;
							border-radius: 20px 0 0 20px;
							font-family: 'Franklin Gothic Book';
							font-size: 16px;
							color: #fff;
						}
							#chat{
								margin-bottom: 20px;
								cursor: pointer;
							}
							.icon-wa{
								height: 28px;
							}
			.judul-konsul{
				position: relative;
				display: block;
				text-align: center;
				font-size: 22px;
				line-height: 22px;
				color: #004987;
				padding-top: 20px;
				padding-bottom: 20px;
				text-shadow: -1px -1px 2px rgba(1,166,206,0.6);
			}
			.frame-konsul{
				position: relative;
				display: block;
				width: 90%;
				left: 50%;
				transform: translateX(-50%);
				font-family: 'Franklin Gothic Book';
				font-size: 16px;
				color: #004987;
			}
				.text-input{
					width: 100%;
					background-color: #fff;
					color: #000;
					padding: 12px 10px;
					border: none;
					border-radius: 10px;
				}
				.box-tgl{
					position: relative;
					display: block;
				}
					.icon-tgl{
						position: absolute;
						top: 10px;
						right: 10px;
						font-size: 28px;
					}
				.select2-container .select2-selection--single{
					height: 46px;
				}
				.select2-container .select2-selection--single .select2-selection__rendered{
					padding-left: 10px;
				}
				.select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered{
					padding-right: 10px;
				}
				.select2-container--default .select2-selection--single{
					border: none;
					border-radius: 10px;
				}
				.select2-container--default .select2-selection--single .select2-selection__rendered{
					color: #000;
					line-height: 46px;
				}
				.select2-container--default .select2-selection--single .select2-selection__placeholder{
					color: #777;
				}
				.select2-container--default .select2-selection--single .select2-selection__arrow{
					height: 44px;
					top: 0px;
					right: 5px;
					width: 20px;
				}
				.select2-container--default .select2-selection--single .select2-selection__arrow b {
					border-width: 6px 5px 0 6px;
					margin-left: -10px;
					margin-top: -3px;
				}
				.btn-submit{
					background-color: #004987;
					color: #fff;
					font-family: 'Franklin Gothic';
					font-size: 22px;
					padding: 10px 30px;
					border: none;
					border-radius: 20px;
				}
	
				

/*Tablet / iPad / Laptop Portraid*/
@media only screen
and (min-width: 601px) {
				.video{
					width: 80%;
					left: 50%;
					transform: translateX(-50%);
				}
					.jdl-video{
						font-size: 32px;
						line-height: 32px;
						padding: 20px 0px;
						padding-bottom: 10px;
					}
						.watch{
							padding: 7px 30px;
							font-size: 18px;
							border-radius: 30px;
						}
						.chat{
							position: absolute;
							width: 150px;
							right: -80px;
							bottom: -50px;
						}
						.chatbot{
							width: 150px;
						}
}


/*Tablet / iPad / Laptop Landscape*/
@media only screen
and (min-width: 1024px) {
		.header{
			position: fixed;
			display: block;
			width: 100%;
			height: 80px;
			z-index: 999;
		}
			.frame-header{
				position: relative;
				display: block;
				width: 90%;
				left: 50%;
				transform: translateX(-50%);
			}
				.logo{
					width: 250px;
					height: auto;
				}
					.logo img{
						height: 60px;
					}
				.box-menu{
					position: absolute;
					display: block;
					right: 0px;
					top: 20px;
					width: 70%;
					text-align: right;
				}
					.btn-menu{
						display: none;
					}
					.menu{
						display: inline-block;
						padding: 10px 5px;
						font-size: 18px;
						border: none;
						cursor: pointer;
						padding-left: 50px;
					}
					
		.content{
			padding-top: 80px;
		}
				.video{
					width: 70%;
				}
					.jdl-video{
						font-size: 32px;
						line-height: 32px;
						padding: 20px 0px;
						padding-bottom: 10px;
					}
						.watch{
							padding: 7px 30px;
							font-size: 18px;
							border-radius: 30px;
						}
						.chat{
							position: absolute;
							width: 150px;
							right: -140px;
							bottom: -50px;
						}
			
			.judul-konsul{
				font-size: 30px;
				line-height: 30px;
				padding-top: 30px;
				padding-bottom: 30px;
			}
			.frame-konsul{
				width: 70%;
				font-size: 16px;
			}
				.text-input{
					padding: 12px 20px;
				}
					.icon-tgl{
						position: absolute;
						top: 10px;
						right: 20px;
						font-size: 28px;
					}
				.select2-container .select2-selection--single .select2-selection__rendered{
					padding-left: 20px;
				}
				.select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered{
					padding-right: 20px;
				}
}


/*Laptop / Desktop*/
@media only screen
and (min-width: 1280px) {
	
}


/*Desktop 1366*/
@media only screen
and (min-width: 1366px) {
		.header{
			height: 100px;
		}
			.frame-header{
				width: 80%;
			}
				.logo{
					padding: 20px;
				}
					.logo img{
						height: 60px;
					}
				.box-menu{
					top: 30px;
				}
		
		.content{
			padding-top: 100px;
		}
				.video{
					width: 65%;
				}
					.jdl-video{
						font-size: 36px;
						line-height: 36px;
						padding: 30px 0px;
						padding-bottom: 20px;
					}
						.watch{
							padding: 10px 50px;
							font-size: 20px;
							border-radius: 30px;
						}
						.chat{
							width: 200px;
							right: -190px;
							bottom: -50px;
						}
						.chatbot{
							width: 180px;
						}
						
			.judul-konsul{
				font-size: 34px;
				line-height: 34px;
				padding-top: 30px;
				padding-bottom: 30px;
			}
			.frame-konsul{
				width: 65%;
				font-size: 16px;
			}
						.frame-chat{
							padding: 30px;
						}
							#chat{
								margin-bottom: 20px;
							}
							.icon-wa{
								height: 32px;
							}
}


/*Desktop MAC*/
@media only screen
and (min-width: 1440px) {
	
}


/*Desktop Full HD MAC*/
@media only screen
and (min-width: 1680px) {
			.frame-header{
				width: 70%;
			}
				.logo{
					padding: 20px;
				}
					.logo img{
						height: 60px;
					}
				.box-menu{
					top: 30px;
				}
				
				.video{
					width: 60%;
				}
					.jdl-video{
						font-size: 42px;
						line-height: 42px;
						padding: 30px 0px;
						padding-bottom: 20px;
					}
						.watch{
							padding: 10px 50px;
							font-size: 20px;
							border-radius: 30px;
							margin-bottom: 30px;
						}
						.chat{
							width: 250px;
							right: -240px;
							bottom: -50px;
						}
						.chatbot{
							width: 200px;
						}
						
			.judul-konsul{
				font-size: 40px;
				line-height: 40px;
				padding-top: 30px;
				padding-bottom: 30px;
			}
			.frame-konsul{
				width: 60%;
				font-size: 16px;
			}
}


/*Desktop Full HD*/
@media only screen
and (min-width: 1920px) {
	
}