/*butuh buatkan untuk layar 540*720 / 820*1180 / 912*1368 */

/*
	- tombol joint masih belum benar posisi dan kemiringan nya
	- margin untuk QUote atas terlalu banyak
	- paragraf yang dibawah masih belum pas posisi nya

	*/

/*	768*1024 
	paling rusakposisi quote paragraf dan tombol
	*/

/*
	layar 540*720
	posisi tombol dan kemiringan nya
 
	*/
	.collapse {
		border: 2px solid black;
	}

	.container-fluid {
		max-width: 1280px !important;
	}

	header {
		background-color: #ffffff;
		background: url(../img/logo/logokecil/mini_logolfh-smaill.png) no-repeat left center;
		background-size: auto;
		border: none;
		text-align: center;
		align-items: center;
		align-content: center;
		justify-content: center;
		margin-bottom: -5px;
		background-color: white;
		color: black;
		height: 200px;
		box-sizing: border-box;
		left: 110px;
		/*margin-right: 220px;*/
	}

	header a {
		margin-top: 30px;
	}

	.kanan {
		border-left: 2px solid black;
		padding: 0 50px;
	}

	.kiri {
		padding: 0 25px;
	}


	.home:hover,
	.program:hover,
	.teacher:hover,
	.loginan:hover {
		font-size: 1.2em;
		text-shadow: 1px 1px #ccc;
		text-decoration: underline;
		font-weight: bolder;
	}

	ul .joinan:hover {
		background-color: #22B2BB !important;
		color: white !important;
		/* text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); */
		text-decoration: none !important;
		font-size: 1.2em !important;
		font-weight: bolder;
	}

	ul .joinan a:hover {
		background-color: #22B2BB !important;
		color: white !important;
		text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
		text-decoration: none !important;
		font-size: 1.2em !important;
		font-weight: bolder;
	}

	ul .joinan::after a {
		background-color: #22B2BB;
		color: white !important;
		text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
		text-decoration: none;
	}

	.ajoinan {
		text-align: center;
	}

	.nav-link .ajoinan:hover {
		background-color: #22B2BB;
		color: white !important;
	}

	.nav-link .ajoinan::after {
		background-color: #22B2BB;
		color: white !important;
	}

    .navbarutama2 {
        margin-right: -300px;
    }

	video {
		width: 100% !important;
		height: auto !important;
		display: block !important;
		margin: 0 auto !important;
		margin-left: 0% !important;
	}

	.videomain {
		top: 140px;
		margin-bottom:200px;
	}
	

	.home_banner_area {
		padding: opx;
		justify-content: top;
		margin-bottom: -100px !important;
	}

	.finance_area {
		background-color: #fff !important;
		/*padding-bottom: 0px !important;*/
	}


	blockquote {
		display: block;
		position: relative;
		width: 56%;
		margin: 0rem auto;
		padding: .5rem;
		font-size: 4em;
		line-height: 1.5em;
		font-family: 'Times', serif;
		color: black;
	}

	blockquote::before {
		content: '\201c';
		top: 30px;
		left: -120px;
		color: #22B2BB;
	}

	blockquote::after {
		content: '\201d';
		bottom: -80px;
		right: -100px;
		color: #22B2BB;
	}

	blockquote::before,
	blockquote::after {
		font-size: 4.2em;
		position: absolute;
	}

	.layerquote {
		position: relative;
	}

	.tombol {
		position: absolute;
		top: 50px;
		left: 720px;
		transform: rotate(-3deg);
		border-radius: 50px;
		background-color: #22B2BB;
		font-size: 30px;
		box-shadow: 0 0 10px #fff;
	}

	.btn-shadow {
		position: absolute;
		top: 37px;
		left: 720px;
		/*transform: rotate(-10deg);*/
		border-radius: 50px;
		background-color: #fff;
		font-size: 30px;
		color: white;
	}

	.paragrafbawah .paragraf1 {
		position: absolute;
		font-size: 20px;
		top: 5%;
		right: 40% !important;
		left: 5% !important;
		color: black;
		line-height: 30px;
	}
    
    .paragrafbawah .paragraf1 .imgparagraf1 {
        left: 5%;
        top: 5%;
    }
	.paragrafbawah .paragraf2 {
		position: absolute;
		font-size: 20px;
		top: 50%;
		left: 40% !important;
		right: -20%;
		color: black;
		line-height: 30px;
	}

    .imgparagraf2 {
        left: 0% !important;
        top: 35% !important;
    }
    
	.tabelbawahtiga:hover ,
	.tabelbawahtiga:hover a,
	.tabelbawahtiga:hover tr {
		background-color: #22B2BB;
		color: white !important;
		font-size: 16px;
	}

	.kartupackage:hover,
	.kartupackage:hover .parkanan,
	.kartupackage:hover .judulkiri {
		background-color: #22B2BB;
		color: white !important;
		transform: scale(1.05);
	}

	.paragraf1guru {
		font-size: 20px !important;
	}

	.table {
		border: 1.5px solid #22B2BB !important;
	}
	.table th,
	.table td {
		color: #22B2BB !important;
		font-family: Arial, sans-serif;
	}
	.table th {
		background-color: #fff;
		border: 1.5px solid #22B2BB !important;
		text-decoration: none;
		color: #22B2BB !important;
	}


	.card {
		border-radius: 20px;
		overflow: hidden;
		border: 2px absolute black !important;
		box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.25);
		margin-bottom: 30px;
	}

	.card .card-footer {
		padding: 20px;
		background-color: #22B2BB;
		color: #FFFFFF;
		font-family: Arial, sans-serif;
		border-top: 2px solid #EEEEEE;
	}
	.card .card-footer .user-info {
		font-size: 14px;
	}

	.fa {
		font-size: 24px !important; /* ukuran icon */
		margin-right: 10px !important; /* jarak antar icon */
	}

	.social-icons a i.fa-instagram {
		color: #E1306C;
	}
	.social-icons a i.fa-linkedin {
		color: #0077B5;
	}
	.social-icons a i.fa-whatsapp {
		color: #25D366;
	}

	.position-absolute {
		font-size: 3em;
		position: absolute;
		top: 22%;
		left: 50%;
		transform: translate(-50%, -50%);
		text-align: center;
		width: 80%;
		line-height: 1.3em;
		color: black;
	}

	.line-circle {
		content: '';
		position: absolute;
		background-color: transparent;
		border-color: #22B2BB;
		height: 250px;
		width: 125px;
		border-radius: 0 250px 250px 0;
		border-style: solid;
		border-left: none;
		top: 50px;
		right: 150px;

	}


	/*halaman home guru */
	.homeguru {
		margin-top: 200px;
		align-content: center;
	}

	.homegurulayer2 {
		/*left: 50%;*/
		/*transform: translateX(-30%);*/
		text-align: center;
		top: 20px;
	}

	.homegurutext {
		margin-top: -400px;
		text-align: center;
		font-size: 30px;
	}

	.homeguruimg2 {
		width: 80% !important;
		border-radius: 45%;
		margin-top: 190px;
	}


	.bol1 {
		background: url(../img/freedom3.jpg) no-repeat center center !important;
	}

	.bol2 {
		background: url(../img/goodmoney7.jpg) no-repeat center center !important;
	}

	.bol3 {
		background: url(../img/arrange2.jpg) no-repeat center center !important;
	}
	
	.bolut1 {
		background: url(../img/banner/paragraf1.jpg) no-repeat center center !important;
	}
	
	.bolut2 {
		background: url(../img/banner/paragraf2.jpg) no-repeat center center !important;
	}

	.bol1:hover {
		transform: scale(1.2);
		cursor: pointer;
	}

	.bol2:hover {
		transform: scale(1.2);
		cursor: pointer;
	}

	.bol3:hover {
		transform: scale(1.2);
		cursor: pointer;
	}


	.btn-become {
		background-color: #22B2BB;
		color: white; 
		transform: rotate(-3deg);
		border-radius: 50px;
		box-shadow: 0 0 10px #fff;
		font-size: 30px;
		margin-top: 30px;
	}

	.seksion1 {
		margin-top: 30px;
		margin-bottom: 230px;
		border-top: 2px solid !important;
		border-bottom: 2px solid !important;
		border-color: #22B2BB !important;
	}

	.bola {
		display: grid;
		position: relative;
		width: 300px;
		height: 300px;
		border-radius: 50%;
		border: 4px solid black;
		text-align: center;
		align-content: center;
		justify-content: center;
		margin-top: 100px; 
		background-color: white;
		font-size: 25px;
		font-weight: bolder;
		bottom: -180px; /* adjust this value as needed */
		color: black;

	}
	
	/*.bolaut {*/
	/*	display: grid;*/
	/*	position: relative;*/
	/*	width: 200px;*/
	/*	height: 200px;*/
	/*	border-radius: 40%;*/
	/*	border: 4px solid black;*/
	/*	text-align: center;*/
	/*	align-content: center;*/
	/*	justify-content: center;*/
	/*	margin-top: 100px; */
	/*	background-color: white;*/
	/*	font-size: 25px;*/
	/*	font-weight: bolder;*/
		/*bottom: 100px; */
		/* adjust this value as needed 
	/*	color: black;*/

	/*}*/

	.bola p {
		position: absolute;
		bottom: 130px; /* adjust this value as needed */
		left: 50%;
		transform: translateX(-50%);
	}

	.bolaa3 {
		position: absolute;
		bottom: 115px !important; /* adjust this value as needed */
		left: 50%;
		transform: translateX(-50%);
	}

	.nonbola {
		display: grid;
		width: 200px;
		height: 200px;
		text-align: left;
		margin-top: 120px; 
		background-color: white;
		font-size: 40px;
		font-weight: bolder;
		color: red;

	}

	.a2 {
		margin-left: -50px;
		background-color: transparent;
	}

	.a3 {
		margin-left: -50px;
		background-color: transparent;
	}

	.quote1guru {
		margin-top: 110px !important;
		width: 100% !important;
	}

	.seksion1 {
		align-content: center;
		justify-content: center;
		align-content: center;

	}
	.seksion2 p {
		align-content: center;
		justify-content: center;
		align-content: center;

	}

	.paragrafbawahguru {
		border-bottom: 2px solid !important;
		border-color: #22B2BB !important;
		border-top: none !important;
	}

	.logobawahkiri {
		background: url(../img/logo/mini_logolfh-smaill.png) no-repeat center center !important;
		/*z-index: 999998;*/
	}

	.list-unstyled a {
		text-decoration: none;
		color: #22B2BB;
	}


	.list-unstyled a:hover {
		color: #000;
		font-size: 1.2em;
		text-shadow: 1px 1px #ccc;
	}

	.navbarutama {
		height: 80px !important;
		padding-top: -80px !important;
		left: 10px;
		max-width: 1280px !important;
	}

	.cardkids:hover .card-header,
	.cardkids:hover .card-body {
		transform: scale(1.1);
		background-color: white;
		color: #22B2BB !important;
		/*font-kerning: bold;*/
	}
	
	
	/*tambahan untuk paragraf bawah*/



	/*===========================================================*/

	@media (max-width: 1920px) {
		.navbarutama {
			/*left: 400px !important;*/
		}

		.line-circle {
			/*right: 500px !important;*/
		}

		.blockquote::after {
			right: 80px !important;
		}
		.blockquote::before {
			left: 65px !important;
		}
	}

	@media (max-width: 1280px) {
		.navbarutama {
			left: 70px !important;
		}

		.line-circle {
			/*right: 200px !important;*/
		}
	}

	@media (max-width: 810px) {

		.position-absolute {
			font-size: 1.5em;
			position: relative;

		}
		.kanan {
			border-left: none;
		}


		.tombol {
			position: relative;
			left: 60%;
			font-size: 15px;
			/*transform: translateX(-50%);*/
			top: -390px;
			transform: rotate(-15deg);
		}

		.btn-shadow {
			position: relative;
			left: 50%;
			transform: translateX(-50%);
			top: -388px;
			border-radius: 50px;
			transform: rotate(-4deg);
			font-size: 8px;
		}
		.quote2 div {
			position: static;
			margin-top: 20px;
			text-align: center;
		}

		.gambarquote2 {
			height: 300px !important;
			margin-left: 17px !important;
		}

		.paragrafbawah {
			position: relative;
			margin-top: -6%;
			margin-bottom: -250px;
		}

		.paragrafbawah .paragraf1 {
			position: relative;
			font-size: 10px;
			top: 0;
			right: 0%;
			left: 0%;
		}

		.paragrafbawah .paragraf2 {
			position: relative;
			font-size: 10px;
			top: 0;
			left: 0%;
			right: 0%;
		}

		.finance_area {
			padding-top: 10px !important;
			position: static;
			bottom: -50px !important;
		}

		.finance_inner {
			bottom: -40px;
		}

		.banner_inner {
			position: relative;
			bottom: -50px !important;	
			bottom-top: -30px !important;	
			top: 10px;
		}
		blockquote {
			font-size: 3em !important;
			width: 80%;
		}

		blockquote::before {
			top: 10px;
			left: -70px;
		}

		blockquote::after {
			bottom: -15px;
			right: -50px;
		}
		blockquote::before,
		blockquote::after {
			font-size: 2em;
			position: absolute;
		}
		.list-unstyled {
			text-align: center;
		}

		.line-circle {
			content: '';
			position: absolute;
			background-color: transparent;
			border-color: #22B2BB;
			height: 120px;
			width: 60px;
			border-radius: 0 250px 250px 0;
			border-style: solid;
			border-left: none;
			top: 330px;
			right: 90px;

		}

		.logobawahkiri {
			background: url(../img/logo/mini_logolfh-smaill.png) no-repeat center center !important;
			z-index: 997;
		}

		.img2classkids {
			position: absolute;
			left: -330px;
			top: 80px;
			width: 160%;
			/* background-size: cover; */
			z-index: -1;
			overflow: hidden;
		}

	}

	/*start layar 768*/
	@media (max-width: 768px) {


		.img2classkids {
			position: absolute;
			left: -330px;
			top: 80px;
			width: 160%;
			/* background-size: cover; */
			z-index: -1;
			overflow: hidden;
		}
		.position-absolute {
			font-size: 1.5em;
			position: relative;

		}
		.kanan {
			border-left: none;
		}


		.tombol {
			position: relative;
			left: 50%;
			/*transform: translateX(-50%);*/
			top: -300px;
			transform: rotate(-15deg);
		}

		.quote2 div {
			position: static;
			margin-top: 20px;
			text-align: center;
		}

		.gambarquote2 {
			height: 300px !important;
			margin-left: 17px !important;
		}

		.paragrafbawah {
			position: relative;
			margin-top: -6%;
			margin-bottom: -250px;
		}

		.paragrafbawah .paragraf1 {
			position: relative;
			font-size: 10px;
			top: 0;
			right: 0%;
			left: 0%;
		}

		.paragrafbawah .paragraf2 {
			position: relative;
			font-size: 10px;
			top: 0;
			left: 0%;
			right: 0%;
		}

		.finance_area {
			padding-top: 10px !important;
			position: static;
			bottom: -50px !important;
		}

		.finance_inner {
			bottom: -40px;
		}

		.banner_inner {
			position: relative;
			bottom: -50px !important;	
			bottom-top: -30px !important;	
			/*top: -5px;*/
			top: -140px;
		}
		blockquote {
			font-size: 2em !important;
		}

		blockquote::before {
			top: 10px;
			left: -5px;
		}

		blockquote::after {
			bottom: 0px;
			right: 3px;
		}
		blockquote::before,
		blockquote::after {
			font-size: 2em;
			position: absolute;
		}
		.list-unstyled {
			text-align: center;
		}

		.line-circle {
			content: '';
			position: absolute;
			background-color: transparent;
			border-color: #22B2BB;
			height: 120px;
			width: 60px;
			border-radius: 0 250px 250px 0;
			border-style: solid;
			border-left: none;
			top: 135px;
			right: 80px;

		}

		.logobawahkiri {
			background: url(../img/logo/mini_logolfh-smaill.png) no-repeat center center !important;
			z-index: 999998;
		}

	}




	/* Start Mobile Version */

	@media (max-width: 500px) {
		.navbarutama2 {
			display: none;
		}
		header {
			background: url(../img/logo/logokecil/mini_logolfh-smaill.png) no-repeat center center;
			margin-top: -50px; 
			margin-bottom: -50px;
			left: 20px !important;
		}

		.kanan {
			border-left: none;
		}

		blockquote {
			font-size: 1.5em !important;
			margin-top: 10px;
		}

		blockquote::before,
		blockquote::after {
			font-size: 2em;
			position: absolute;
		}

		blockquote::before {
			top: 5px;
			left: 0px;
		}

		blockquote::after {
			bottom: 1px !important;
			right: 0px !important;
		}

		.tombol {
			position: absolute;
			left: 65%;
			transform: translateX(-50%);
			top: -35px;
			border-radius: 35px;
			transform: rotate(-10deg);
			font-size: 8.5px;

		}

		.btn-shadow {
			position: relative;
			left: 72% !important;
			/*transform: translateX(-50%);*/
			top: -188px !important;
			border-radius: 50px;
			transform: rotate(-4deg);
			font-size: 8px;

		}

		.paragrafbawah {
			position: relative;
			margin-top: -15% !important;
			/*padding-top: 120px;*/
			margin-bottom: -273px;
		}

		.gambarquote2 {
			height: 1000px !important;
            max-width: 100%;
			margin-left: 0px !important;
		}

		.videomain {
			top: 280px;
			margin-bottom:200px;
		}


		.paragraf1 .prgf1 {
			position: absolute;
            font-size: 15px !important;
            top: -120px;
            right: 0%;
            left: -5%;
            margin-left: -10px;
            margin-right: 50px;
            margin-top: -850px;
		}
		
		/*.paragraf2 {*/
		/*	position: absolute;*/
		/*	font-size: 15px;*/
		/*	top: -300px;*/
		/*	left: 0%;*/
		/*	right: 0%;*/
			/*margin-left: 10px;*/
		/*	margin-right: 50px;*/
		/*}*/

		.paragraf2 .prgf2 {
			position: absolute;
            font-size: 15px;
            top: -480px;
            left: -49%;
            right: 50%;
            margin-left: 0px;
            margin-right: 30px;
		}

        .pargf1 {
            display: none !important;
        }
        
        .pargf2 {
            display: none !important;
        }
        
		.tabelbawah {
			position: relative;
			z-index: 997;
		}


		.position-absolute {
			position: absolute;
			margin-top: -190px;
			text-align: center;
			font-size: 14px;
		}

		.quote2 div {
			position: static;
			/*margin-top: 20px;*/
			text-align: center;

		}


		.line-circle {
			content: '';
			position: absolute;
			background-color: transparent;
			border-color: #22B2BB;
			height: 90px;
			width: 60px;
			border-radius: 0 250px 250px 0;
			border-style: solid;
			border-left: none;
			top: 38px !important;
			right: 2px !important;

		}

		.cardtestimoni {
			margin-top: -20px !important;
		}

		.logobawahkiri {
			background: url(../img/logo/mini_logolfh-smaill.png) no-repeat center center !important;
		}

		.logobawah {
			margin-bottom: 20px;
		}

		.nonbola {
			display: relative;
			height: 200px;
			font-size: 20PX;
		}

		.bola {
			margin-top: 20px; 
		}

		.seksion1  {
			display: grid;
			margin-top: 30px; 
			/*margin-bottom: 20px; */
		}

		.seksion2  {
			margin-top: -100px; 
			/*margin-bottom: 20px; */
		}
		.a1 {
			margin-top: -250px; 
			align-content: center;
			justify-content: center;
			left: 9% !important;
		}

		.a2, .a3 {
			left: 7% !important;
		}

		.kolomparagraf1guru {
			align-content: center !important;
			text-align: center !important;
			justify-content: center !important;
			left: 26% !important;
			position: relative;
			margin-top: -400px !important;
			margin-bottom: 230px !important;
		}

		.paragraf1guru {
			display: grid;
			font-size: 14px !important;
			left: 50% !important;
			width: 200px;
			margin-bottom: -280px;
			text-align: center;
			align-content: center;
		}


		.paragrafbawahguru {
			margin-top: 0px;
		}


		.paragrafbawahgurup {
			display: grid;
			font-size: 20px !important;
			left: -15%;
			width: 200px;
			margin-bottom: -280px;
		}

		.homegurutext {
			font-size: 15px;
			margin-top: -120px;
		}


		.buttonguru {
			font-size: 15px;
			margin-top: -10px;	
		}

		.homeguru {
			margin-bottom: 20px;
			margin-top: 50px;
			align-content: center;
		}

		.futer {
			margin-bottom: 20px;
		}

		/*untuk kelas kids*/

		.img2classkids {
			position: relative !important;
			margin-left: 12px;
			width: 106% !important;
			z-index: -1;
			top: 60px;
			margin-top: 40px;
		}

		.img2classbisnis {
			margin-left: 15px;
			/*left: -185px !important;*/
			top: 80px  !important;
			width: 100% !important;
			z-index: -1;
			/*overflow: hidden;*/
		}

		.img1classkids {
			position: relative;
			top: 75px !important;
			left: 2px !important;
			width: 75% !important;
		}

		.img1classbisnis {
			position: relative;
			top: 70px !important;
			left: 1px !important;
			width: 75% !important;
		}

		.paragraf1classkids {
			margin-top: 0px !important;
			background-color: transparent !important;
			font-size: 12px;
			padding-left: 40px;
			padding-right: 40px;
			top: -200px;
			left: -5px;

		}

		.homekidstext {
			margin-top: 50px !important;
		}

		.paragraf1classbisnis {
			position: relative !important;
			margin-top: -110px !important;
			font-size: 14px;
			background-color: #B3DFDB !important;
			left: 4.3% !important;
			font-size: 16px !important;
			color: black !important;
			width: 87.2% !important;
		}
		.classkids {
			background-color: #fff !important;
			border-radius: 10%;
			margin-top: -185px !important;
		}

		.paragraf1guru {
			font-size: 14px !important;
			margin-top: 300px !important;
			color: black;
		}

		.colclasskids {
			background-color: transparent !important;
			margin-top: -20px !important;
		}

		.colclassbisnis {
			font-size: 12px;
			padding-right: 40px;
			padding-left: 40px;
			top: -200px;
		}

		.container .imgtopclasskid {
			padding-left: 5.5px;
			margin-top: -70px !important;
			margin-left: -3.5px;
			width: inherit;
			padding-right: 11px;
		}

		.container .parbisnis {
			/*padding-left: 5.5px;*/
			margin-top: -80px !important;
			/*margin-left: -3.5px;*/
			width: inherit;
			/*padding-right: 11px;*/
		}

		.partengahbisnis {
			margin-top: 0 !important;
			font-size: 16px !important;
		}

		.tombolbisnis {
			position: relative !important;
			top: -195px !important;
			left: 50% !important;
			bottom: -0 !important;
			right: 0 !important;
			transform: rotate(-15deg) !important;
			background-color: white !important;
			border: 2px solid red !important;
			border-radius: 50% !important;
			width: 160px !important;
			height: 75px !important;
		}
		.captiontombolbisnis {
			position: absolute !important;
			transform: rotate(5deg) !important;
			left: 35px !important;
			font-size: 16px !important;
			font-weight: 5px !important;
			color: red !important;
			top: 10px !important;
		}

		.navbarutama {
			height: 150px !important;
			top: 10px !important;
			left: 0 !important;

		}

		.logokecilbawah {
			left: -60px;
		}

		.ourservice {
			left: -110px;
		}
		.followusatasan {
			left: -115px;
		}
		
		.listlogokecilbawah,
		.listourservice,
		.listfollowus {
			align-items: left !important;
			/*justify-content: left !important;*/
			text-align: left !important;
		}
		
		.tabelbawah {
		    top: -25px;
		}
	}


	/*@media (max-width: 412px) {*/
	/*	.navbarutama2 {*/
	/*		display: none;*/
	/*	}*/

	/*	header {*/
	/*		background: url(../img/logo/logokecil/mini_logolfh-smaill.png) no-repeat center center;*/
	/*		margin-top: -50px; */
	/*		margin-bottom: -50px;*/
	/*		left: 20px !important;*/
	/*	}*/
	/*	.navbarutama {*/
	/*		height: 150px !important;*/
	/*		top: 10px !important;*/
	/*		left: 0 !important;*/
	/*	}*/
	/*	.tombolbisnis {*/
	/*		position: relative !important;*/
	/*		top: -155px !important;*/
	/*		left: 50% !important;*/
	/*		bottom: -0 !important;*/
	/*		right: 0 !important;*/
	/*		transform: rotate(-15deg) !important;*/
	/*		background-color: white !important;*/
	/*		border: 2px solid red !important;*/
	/*		border-radius: 50% !important;*/
	/*		width: 160px !important;*/
	/*		height: 75px !important;*/
	/*	}*/
	/*	.captiontombolbisnis {*/
	/*		position: absolute !important;*/
	/*		transform: rotate(5deg) !important;*/
	/*		left: 35px !important;*/
	/*		font-size: 16px !important;*/
	/*		font-weight: 5px !important;*/
	/*		color: red !important;*/
	/*		top: 10px !important;*/
	/*	}*/
	/*	blockquote::before {*/
	/*		left: -5px;*/
	/*	}*/

	/*	blockquote::after {*/
	/*		right: 56px;*/
	/*	}*/

	/*	.tombol {*/
	/*		position: absolute;*/
	/*		left: 50%;*/
	/*		transform: translateX(-50%);*/
	/*		top: 20px;*/
	/*		border-radius: 50px;*/
	/*		transform: rotate(-10deg);*/
	/*		font-size: 8px;*/

	/*	}*/

	/*	.btn-shadow {*/
	/*		position: relative;*/
	/*		left: 50%;*/
	/*		transform: translateX(-50%);*/
	/*		top: -200px;*/
	/*		border-radius: 50px;*/
	/*		transform: rotate(-4deg);*/
	/*		font-size: 8px;*/

	/*	}*/


	/*	.line-circle {*/
	/*		content: '';*/
	/*		position: absolute;*/
	/*		background-color: transparent;*/
	/*		border-color: #22B2BB;*/
			/*#4dbf1c;*/
	/*		height: 120px;*/
	/*		width: 60px;*/
	/*		border-radius: 0 250px 250px 0;*/
	/*		border-style: solid;*/
	/*		border-left: none;*/
	/*		top: 140px;*/
	/*		right: 120px;*/

	/*	}*/

	/*	.nonbola {*/
	/*		display: relative;*/
	/*		height: 200px;*/
	/*		font-size: 20PX;*/
	/*	}*/

	/*	.bola {*/
	/*		margin-top: 20px; */
	/*	}*/


	/*	.seksion1  {*/
	/*		display: grid;*/
	/*		margin-top: 30px; */
	/*		margin-bottom: 150px;*/
	/*		align-content: center !important;*/
	/*		justify-content: center;*/
	/*	}*/

	/*	.seksion2  {*/
	/*		margin-top: -100px; */
	/*	}*/
	/*	.a1 {*/
	/*		margin-top: -250px; */
	/*		align-content: center;*/
	/*		justify-content: center;*/
	/*		left: 4% !important;*/
	/*	}*/

	/*	.a2, .a3 {*/
	/*		left: 7% !important;*/
	/*	}*/

	/*	.paragrafbawahguru {*/
	/*		margin-top: 400px;*/
	/*	}*/

	/*	.kolomparagraf1guru {*/
	/*		align-content: center !important;*/
	/*		text-align: center !important;*/
	/*		justify-content: center !important;*/
	/*		left: 24% !important;*/
	/*		position: relative;*/
	/*		margin-top: -600px !important;*/
	/*		margin-bottom: 230px !important;*/
	/*		font-size: 20px;*/
	/*	}*/

	/*	.paragraf1guru {*/
	/*		display: grid;*/
	/*		font-size: 14px !important;*/
	/*		left: 50% !important;*/
	/*		width: 200px;*/
	/*		margin-bottom: -280px;*/
	/*		text-align: center;*/
	/*		align-content: center;*/
	/*		color: black;*/
	/*	}*/

	/*	.homegurutext {*/
	/*		font-size: 15px;*/
	/*		margin-top: -120px;*/
	/*	}*/

	/*	.buttonguru {*/
	/*		font-size: 15px;*/
	/*		margin-top: -10px;	*/
	/*	}*/

	/*	.homeguru {*/
	/*		margin-bottom: 20px;*/
	/*		margin-top: 50px;*/
	/*		align-content: center;*/
	/*	}*/

	/*	.futer {*/
	/*		margin-bottom: 20px;*/
	/*	}*/
	/*	.paragrafbawah {*/
	/*		position: relative;*/
	/*		margin-top: -10% !important;*/
	/*		margin-bottom: -273px;*/
	/*	}*/

		/*.gambarquote2 {*/
		/*	height: 400px !important;*/
		/*}*/

	/*	.gambarquote2 {*/
	/*		height: 880px;*/
	/*	}*/

	/*	.paragraf1 {*/
	/*		position: relative;*/
	/*		font-size: 12px !important;*/
	/*		top: -360px !important;*/
	/*		right: 0%;*/
	/*		left: 0%;*/
	/*		margin-left: 10px;*/
	/*		margin-right: 5px;*/
	/*	}*/

	/*	.paragraf2 {*/
	/*		position: relative;*/
	/*		font-size: 12px !important;*/
	/*		top: -390px !important;*/
	/*		left: 0%;*/
	/*		right: 0%;*/
	/*		margin-left: 10px;*/
	/*		margin-right: 5px;*/
	/*	}*/

	/*	.tabelbawah {*/
	/*		position: relative;*/
	/*		z-index: 997;*/
	/*		top: -120px;*/
	/*	}*/

	/*	.img2classkids {*/
	/*		position: relative !important;*/
	/*		left: -25px !important;*/
	/*		top: 60px !important;*/
	/*		width: 109% !important;*/
	/*		z-index: -1;*/
	/*	}*/

	/*	.img2classbisnis {*/
	/*		position: relative !important;*/
	/*		margin-left: 15px;*/
	/*		left: -30px !important;*/
	/*		top: 80px !important;*/
	/*		width: 108.9% !important;*/
	/*		z-index: -1;*/
	/*	}*/

	/*	.img1classkids {*/
	/*		position: absolute !important;*/
	/*		top: 85px !important;*/
	/*		left: 2px !important;*/
	/*	}*/

	/*	.img1classbisnis {*/
	/*		position: relative;*/
	/*		top: 70px !important;*/
	/*		left: 1px !important;*/
	/*		width: 75% !important;*/
	/*	}*/

	/*	.paragraf1classkids {*/
	/*		margin-top: -80px !important;*/
	/*		background-color: transparent !important;*/
	/*		font-size: 16px;*/
	/*		padding-left: 40px;*/
	/*		padding-right: 40px;*/
	/*		top: -280px;*/

	/*	}*/

	/*	.homekidstext {*/
	/*		margin-top: 240px!important;*/
	/*	}*/

	/*	.colclasskids {*/
	/*		margin-top: -100px;*/
	/*		background-color: #B3DFDB;*/
	/*		border-top-right-radius: 20%;*/
	/*		background-color: transparent !important;*/
	/*	}*/


	/*	.paragraf1classbisnis {*/
	/*		position: relative !important;*/
	/*		margin-top: -80px !important;*/
	/*		background-color: #B3DFDB !important;*/
	/*		left: 4.2% !important;*/
	/*		font-size: 11.5px !important;*/
	/*		color: black !important;*/
	/*		width: 90.8% !important;*/
	/*		padding-left: 8px;*/
	/*		padding-right: 6px;*/
	/*		margin-bottom: 0px;*/
	/*		padding-bottom: 20px;*/
	/*	}*/

	/*	.boxkartupackage {*/
	/*		margin-top: -10;*/
	/*	}*/

	/*	.container.imgtopclasskid {*/
	/*		padding-left: 7px;*/
	/*	}*/

	/*	.classkids {*/
	/*		margin-top: -250px !important;*/
	/*	}*/


	/*	.colclassbisnis {*/
	/*		font-size: 12px;*/
	/*		padding-right: 40px;*/
	/*		padding-left: 40px;*/
	/*		top: -200px;*/
	/*	}*/

	/*	.partengahbisnis {*/
	/*		margin-top: 0 !important;*/
	/*		font-size: 12px !important;*/
	/*	}*/

	/*	.logokecilbawah {*/
	/*		left: -60px;*/
	/*	}*/

	/*	.ourservice {*/
	/*		left: -110px;*/
	/*	}*/
	/*	.followusatasan {*/
	/*		left: -115px;*/
	/*	}*/
		
	/*	.listlogokecilbawah,*/
	/*	.listourservice,*/
	/*	.listfollowus {*/
	/*		align-items: left !important;*/
			/*justify-content: left !important;*/
	/*		text-align: left !important;*/
	/*	}*/
		

	/*}*/



	/* End Mobile Version */




	/*Start Css Halaman Class Kids*/

	.container.section1classkids {
		display: grid;
		position: relative;
		/*overflow: hidden;*/
	}

	.container.imgtopclasskid{
		display: grid;
		max-width: 1170px;
		padding-left: 14.5px;
		justify-content: space-between;
		margin-bottom: 1rem;
	}
	.img1classkids {
		position: absolute;
		top: 40px;
		left: -10px;
		width: 60% !important;
	}

	.img2classkids {
		position: relative;
		left: -25px;
		top: 70px;
		width: 105%;
		z-index: -1;
		max-width: 1170px;
		padding-bottom: -300px;
	}
	.tombolkids {

		display: inline-block;
		width: 50px;
		height: 30px;
		border-radius: 50px;
		background-color: #007bff;
		position: absolute;
		top: 0;
		right: 0;
	}

	.homekidstext {
		display: grid;
		margin-top: -650px;
		text-align: center;
		font-size: 30px;
		grid-template-columns: kiri tengah kanan;
		grid-template-areas: 1fr 3fr 1fr;
	}
	.paragraf1classkids {
		grid-area: tengah;
		text-align: center;
		margin-top: 140px;
		color: black;
	}

	.paragrafkiriclasskids {
		grid-area: kiri;
	}

	.paragrafkananclasskids {
		grid-area: kanan;
	}
	.card-headerclasskids {
		font-weight: bold;
		color: black;
		font-size: 16px;
	}
	.card-textclasskids {
		font-size: 16px;
		color: black;
	}

	.classkids {
		margin-bottom: 20px !important;
		margin-top: -280px !important;
		/*margin-left: -30px;*/
		/*background-color: #B3DFDB !important;*/
	}

	.kelaskids {
		background-color: #B3DFDB;
		margin-left: 0px;
		margin-right: 0px;
	}



	.bodykelaskids {
		background-color: #B3DFDB;
	}

	.bodykelaskids:hover {
		background-color: white;	
	}

	.cardtitlepar2classkids {
		/*border-right: 2px solid #22B2BB;*/
		color: #22B2BB !important;
	}

	.Ikon {
		background-color: #22B2BB !important;
		border-radius: 50%;
		color: white;
	}
	.matauang {
		font-style: italic;
		font-weight: bold !important;
	}

	.colclasskids {
		display: flex;
		align-items: center; /* Posisikan vertikal ke tengah */
	}


	/*End Css Halaman Class Kids*/



	/*Start Css Halaman Class bisnis*/

	.section1classbisnis {
		display: grid;
		position: relative;
	}

	.img1classbisnis {
		position: absolute;
		top: 40px;
		left: -10px;
		width: 60% !important;
	}

	.img2classbisnis {
		position: relative;
		left: -25px;
		top: 70px;
		width: 105%;
		z-index: -1;
		max-width: 1170px;
		padding-bottom: -300px;
	}

	/*model tombol didalam nya ada tag a*/
	.tombolbisnis {
		position: absolute;
		top: 280px;
		left: 50%;
		bottom: 0;
		right: 0;
		transform: rotate(-15deg);
		background-color: white;
		border: 2px solid red;
		border-radius: 50%;
		width: 320px;
		height: 150px;
	}
	.captiontombolbisnis {
		position: relative;
		transform: rotate(5deg);
		left: 0;
		font-size: 30px;
		color: red;
		top: 0px;
		line-height: 30px;
		font-weight: bold;
	}
	/*sampai disini*/


	.paragraf1classbisnis {

		text-align: left;
		margin-top: 0px;
		background-color: #B3DFDB !important;
		/*left: 10px;*/
		font-size: 28px;
		color: black;
		line-height: 1;
	}

	.paragraf1guru {
		color: black;
		margin-top: -90px;
	}
	.card-headerclassbisnis {
		font-weight: bold;
		color: black;
	}
	.card-textclassbisnis {
		font-size: 14px;
		color: black;
	}

	.classbisnis {
		margin-bottom: 20px;
		margin-top: 50px;
		/*background-color: #B3DFDB !important;*/
	}

	.kelasbisnis {
		background-color: #B3DFDB;
		margin-left: 0px;
		margin-right: 0px;
	}

	.card {
		/*background-color: #transparent;*/

	}


	.bodykelasbisnis {
		background-color: #B3DFDB;
	}

	.bodykelasbisnis:hover {
		background-color: white;
		border-top-right-radius: 60	
	}

	.cardtitlepar2classbisnis {
		border-right: 2px solid #22B2BB;
		color: #22B2BB !important;
	}

	.ikon {
		background-color: #22B2BB !important;
		border-radius: 50%;
		color: white;
	}


	.matauang {
		font-style: italic;
		font-weight: bold !important;
		display: inline-block;
		vertical-align: top;
		margin-right: 8px;
		margin-top: -6px;
	}

	.hourstudent {
		position: relative;
		margin-left: 30px !important;
	}

	.btn-learn-more {
		text-decoration: none;
		font-size: 24px;
		background-color: #22B2BB !important;
		color: #fff !important;
		border-radius: 20px;
		margin: 5px;
		padding: 3px 35px;
		margin-top: 20px;
		margin-left: 0px;
		width: 120px;
		position: sticky;
		left: 65px;
	}


	.card:hover .merahmerona { 
		background-color: #ff0000 !important;
		color: #fff !important;
		transform: scale(1.2);
		border:	10px;
	}

	.merahmerona {
		transition: transform .5s;
	}

	.partengahbisnis {
		margin-top: -150px;
		font-size: 25px;
	}

	.card::after .card-body {
		transform: scale(1.2);
	}

	.cardheaderkids {
		font-size: 16px;
		font-weight: bold;
	}

	.cardkids:hover {
		transform: scale(1.1);
		background-color: red;
		color: white;
	}

	.colclassbisnis {
		display: flex;
		align-items: center; /* Posisikan vertikal ke tengah */
		font-size: 20px;
	}

	.judulkiri {
		display: grid;
		float: left !important;
		width: 30% !important;
		justify-content: center;
		align-content: center;
		/*margin-top: 30px;*/
		margin-left: 5px;
		font-size: 14px;
		text-align: center;
		top: 30%;
		position: sticky;
		color: black;
	}

	.parkanan {
		float: left !important;
		width: 65% !important;
		text-align: left;
		justify-content: center;
		align-content: 	center;
		font-size: 14px;
		color: #000;
		border-left: 2px solid #22B2BB;
		padding-left: 10px;
	}


	.boxkartupackage{
		margin-top: 20px;
	}

	.kartupackage{
		margin-top: 10px;

	}


	.packagebisnis {
		/*top: 200px;*/
	}

	.parbisnis : {
		background-color: #B3DFDB;
	}

	/*End Css Halaman Class bisnis*/



	.footer-big {
		padding: 105px 0 65px 0;
	}
	.footer-big .footer-widget {
		margin-bottom: 40px;
	}
	.footer--light {
		background: #fff;
	}
	.footer-big .footer-menu ul li a,
	.footer-big p,
	.footer-big ul li {
		color: #22B2BB;
	}
	.footer-menu {
		padding-left: 48px;
	}
	.footer-menu ul li a {
		font-size: 15px;
		line-height: 32px;
		-webkit-transition: 0.3s;
		-o-transition: 0.3s;
		transition: 0.3s;
	}
	.footer-menu ul li a:hover {
		color: #ce1a19;
	} 
	.footer-widget-title {
		line-height: 30px;
		margin-bottom: 10px;
		font-size: 18px;
		font-weight: 500;
	}
/*.mini-footer {
	background: #000;
	text-align: center;
	padding: 32px 0;
}
.mini-footer p {
	margin: 0;
	line-height: 26px;
	font-size: 15px;
	color: #999;
}
.mini-footer p a {
	color: #ce1a19;
	font-weight: 500;
}
.mini-footer p a:hover {
	color: #34bfa3;
	}*/
	.widget-about img {
		display: block;
		margin-bottom: 30px;
		max-width: 70%;
	}
	.widget-about p {
		font-weight: 400;
	}
	.widget-about .contact-details {
		margin: 30px 0 0 0;
	}
	.widget-about .contact-details li {
		margin-bottom: 10px;
	}
	.widget-about .contact-details li:last-child {
		margin-bottom: 0;
	}
	.widget-about .contact-details li i {
		padding-right: 10px;
		color:#22B2BB;
	}
	.widget-about .contact-details li a {
		color: #22B2BB;
	}
	@media (max-width: 991px) {
		.footer-menu {
			padding-left: 0;
		}
		.widget-about img {
			max-width: 50%;
		}
	}




	/*whatsapp widget start */

	.ewChat {
		position: fixed;
		bottom: 15px;
		right: 120px;
		font-family: "Roboto", sans-serif;
		margin: 0;
		padding: 0;
		width: 320px;
		max-width: calc(100% - 60px);
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		z-index: 99999;
	}

	.ewChatBox {
		width: 100%;
		background-color: var(--ewc-color-2) !important;
		border-radius: 15px;
		display: none;
		opacity: 0;
		transition: opacity 1000ms;
		flex-direction: column;
	}

	.ewChatClose {
		color: var(--ewc-color-1) !important;
		display: none;
		position: absolute;
		top: -35px;
		right: 0;
		border: none;
		padding: 4px;
		border-radius: 100%;
		background-color: var(--ewc-color-4) !important;
	}

	.ewChatClose:hover {
		background-color: var(--ewc-color-3) !important;
	}

	.ewChatCloseMobile {
		width: 100%;
		position: absolute;
		text-align: center;
		color: var(--ewc-color-1) !important;
		top: -300px;
		padding: 100px 0;
		cursor: pointer;
	}

	.ewChatAvatar {
		position: absolute;
		left: calc(50% - 32px);
		top: -80px;
		width: 59px;
		height: 59px;
		padding: 3px;
		border: solid 2px var(--ewc-color-3) !important;
		border-radius: 100%;
		background-color: var(--ewc-color-1) !important;
		display: flex;
	}

	.ewChatAvatar img {
		border-radius: 100%;
	}

	.ewChatHeader {
		background-color: var(--ewc-color-4) !important;
		color: var(--ewc-color-1);
		border-radius: 15px 15px 0 0;
		padding: 12px;
		text-align: center;
		display: flex;
		flex-direction: column;
		justify-content: center;
		color: white;
	}

	.ewChatHeader h3 {
		color: var(--ewc-color-1) !important;
		font-size: 18px;
		margin: 3px;
		color: white;
	}

	.ewChatHeader p {
		font-size: 12px;
		margin: 0;
		color: white;
	}

	.ewChatBubble {
		background-color: var(--ewc-color-1) !important;
		margin: 10px 18px 10px 30px;
		padding: 9px 9px 25px 9px;
		text-align: left;
		border-radius: 0 10px 10px 10px;
		position: relative;
		opacity: 0;
		transition: opacity 1000ms;
		color: white;
	}

	.ewChatBubble:after {
		content: "";
		position: absolute;
		left: 0;
		top: 0;
		width: 0;
		height: 0;
		border: 15px solid transparent;
		border-right-color: var(--ewc-color-1) !important;
		border-left: 0;
		border-top: 0;
		margin-top: 0;
		margin-left: -15px;
		color: white;
	}

	.ewChatBubble p {
		margin: 0;
		font-size: 14px;
		color: white;
	}

	.ewChatBubble span {
		position: absolute;
		bottom: 5px;
		right: 9px;
		opacity: 0.5;
		font-size: 11px;
		color: white;
	}

	.ewChatInput {
		display: none;
		opacity: 0;
		transition: opacity 1000ms;
		width: 100%;
		margin-top: 10px;
		background-color: var(--ewc-color-1) !important;
		height: 48px;
		border-radius: 24px;
		color: black;
	}

	.ewChatInput input {
		font-family: "Roboto", sans-serif;
		font-size: 16px;
		background-color: var(--ewc-color-1) !important;
		height: 32px;
		margin: auto 20px;
		width: 100%;
		border: none;
		color: black;
	}

	.ewChatInput input:focus {
		outline: none;
		color: black;
	}

	.ewChatInput button {
		border: none;
		background-color: var(--ewc-color-4) !important;
		border-radius: 20px;
		margin: 4px;
		color: var(--ewc-color-1);
		padding: 8px;

	}

	.ewChatInput button:hover {
		background-color: var(--ewc-color-3) !important;
	}

	.ewChatDesktop {
		cursor: pointer;
		display: none;
		align-items: center;
		height: 36px;
		border-radius: 25px;
		background-color: var(--ewc-color-3) !important;
		width: 68%;
		padding: 4px 20px;
		font-size: 14px;
		color: white;
		margin-top: 20px;
	}

	.ewChatDesktop svg {
		margin-right: 10px;
	}

	.ewChatMobile {
		cursor: pointer;
		padding: 10px;
		background-color: var(--ewc-color-3) !important;
		display: flex;
		border-radius: 100%;
		color: var(--ewc-color-1);
		border: solid 2px var(--ewc-color-1) !important;
		margin-top: 20px;
		color: white;
	}

	.ewChatMobile:hover,
	.ewChatDesktop:hover {
		background-color: var(--ewc-color-3-dark) !important;
	}

	.ewChatBackdrop {
		position: fixed;
		inset: 0;
		background-color: #25D366;
		z-index: 99999;
		color: white;
	}

	@media screen and (min-width: 450px) {
		.ewChatAvatar {
			left: -80px;
			top: 80px;
		}

		.ewChatClose,
		.ewChatDesktop {
			display: flex;
		}

		.ewChatMobile,
		.ewChatCloseMobile {
			display: none;
		}
	}

/*end whatsapps widget*/