@tailwind base;
@tailwind components;
@tailwind utilities;

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
	font-family: 'DM Sans', sans-serif;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
*{ box-sizing: border-box;}
a{ text-decoration:none; display:inline-block;}
img{
	display: block;
	max-width: 100%;
}
body,html{
	scroll-behavior: smooth;
}
.product-h1{
	color: #161616;
	font-size: 40px;
	font-weight: 700;
	text-transform: uppercase;
	width: auto !important;
	height: auto !important;
}
body{
	font-size:16px;
	font-weight:400;
	line-height:normal;
	max-width: 1920px;
	margin:0 auto;
}
@font-face {
	font-family: 'DM Sans';
	src: url('../fonts/DMSans-Regular.ttf') format('truetype');
	font-weight:400;
}
@font-face {
	font-family: 'DM Sans';
	src: url('../fonts/DMSans-Bold.ttf') format('truetype');
	font-weight:700;
}
@font-face {
	font-family: 'DM Sans';
	src: url('../fonts/DMSans-Semibold.ttf') format('truetype');
	font-weight:600;
}
@font-face {
	font-family: 'DM Sans';
	src: url('../fonts/DMSans-Medium.ttf') format('truetype');
	font-weight:500;
}
@font-face {
	font-family: 'Grenze Gotisch';
	src: url("../fonts/GrenzeGotisch-Regular.ttf") format("truetype");
	font-weight: 400;
}
@font-face {
	font-family: 'Grenze Gotisch';
	src: url("../fonts/GrenzeGotisch-Bold.ttf") format("truetype");
	font-weight: 700;
}
@font-face {
	font-family: 'Grenze Gotisch';
	src: url("../fonts/GrenzeGotisch-SemiBold.ttf") format("truetype");
	font-weight: 600;
}
@font-face {
	font-family: 'Grenze Gotisch';
	src: url("../fonts/GrenzeGotisch-Medium.ttf") format("truetype");
	font-weight: 500;
}
input, select, textarea, button{
	border:0;
	outline:none;
	font-family: 'DM Sans', serif;
	font-weight: 600;
}
h1{
	font-size:14px;
	font-weight:400;
	overflow:hidden;
	height: 0;
	width: 0;
}
h2{
	color: #161616;
	font-size: 40px;
	font-weight: 700;
}
h3{
	color: #161616;
	font-size: 32px;
	font-weight: 700;
}
h4{
	color: #161616;
	font-size: 24px;
	font-weight: 600;
}
h5{
	color: #161616;
	font-size: 20px;
	font-weight: 600;
}
h3.text-600{
	font-weight: 600;
}
strong{
	font-weight: 600;
}
.center{
	text-align: center;
}
.uppercase{
	text-transform: uppercase;
}
ul,ol{
	list-style: none;
	margin: 0;
	padding: 0;
}
.pointer{
	cursor:pointer;
}
.flex{
	display:flex;
}
.flex-col{
	display:flex;
	flex-direction: column;
}
.text-danger{
	color:#ff0000;
}
.burgerbar{
	display: none;
	width: 24px;
	height: 24px;
	position:relative;
	flex-direction: column;
	align-items: end;
	justify-content: center;
	margin:auto 0 auto 24px;
	padding:0 1px;
	cursor: pointer;
	background: #fff;
	z-index: 5;
	gap: 4px;
}
.burgerbar.closed{
	align-items: center;
	gap: 0;
}
.burgerbar.closed span:nth-child(2){
	opacity: 0;
	display: none;
}
.burgerbar.closed span:nth-child(1){
	width: 24px;
	transform: rotate(45deg) translate(0px, 0px);
	position: absolute;
}
.burgerbar.closed span:nth-child(3){
	width: 24px;
	transform: rotate(-45deg) translate(0px, 0px);
	position: absolute;
}

.container{
	width: 1280px;
	margin:0 auto;
}
header{
	position: sticky;
	top:0;
	left:0;
	height:80px;
	z-index: 10;
	width: 100%;
	display: flex;
	align-items: center;
	background: #fff;
	/*box-shadow: 0 2px 2px rgba(0, 0, 0, 0.05);*/
}
header .nav-list{
	background: #fff;
}
header nav{
	position: relative;
	width: 100%;
	z-index: 5;
}
header nav .brand{
	height: 64px;
	display: flex;
	align-items: center;
}
header nav:not(.language-dropdown).open{
	top: 115px;
}
.hidden-bar{
	background: #fff;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 4;
}

.hidden-bar.shadow{
	box-shadow: 0px 8px 40px 0px rgba(0, 0, 0, 0.09);
}

.nav-container{
	background-color: #fff;
}

.nav-container.shadow {
	box-shadow: 0px 8px 40px 0px rgba(0, 0, 0, 0.09);
}

.brand{
	position: relative;
	z-index: 5;
}
.brand a{
	display: block;
	width: 120px;
}
nav {
	margin-right: 24px;
}
nav ul li{
	display: inline-block;
	margin:0 12px;
	padding: 8px 0;
	font-weight: 500;
	font-size: 16px;
	position: relative;
}
nav ul li a{
	color:#161616;
	font-weight: 500;
	font-size: 16px;
	position: relative;
	padding: 8px;
}
.parent-active > a,
nav ul li.active a,
nav ul li a:hover{
	color:#8E3EC9;
	background-color: rgba(142, 62, 201, 0.2);
	border-radius: 9px;
}
nav ul li .arrow-nav{
	display: inline-block;
	margin-left:4px;
	transition: all ease-in-out .2s;
}
nav ul li .flag{
	display: inline-block;
	width: 20px;
}
.li-flag{
	display: flex;
	align-items: center;
	gap: 2px;
}
.li-flag img{
	width: 26px;
}
nav ul li:hover .arrow-nav{
	transform: rotate(-180deg);
	transform-origin: center;
}
nav ul ul{
	max-height: 0;
	overflow: hidden;
	position: absolute;
	min-width: 180px;
	top:84px;
	left:0;
	margin:0;
	z-index: 2;
	transition: all ease-in .3s;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0px 8px 40px 0px rgba(0, 0, 0, 0.09);

}
nav ul li:hover ul{
	/*display: block;*/
	/*border: 1px solid #EAEAEA;*/
	max-height: 1000px;
	padding: 4px 0;
}
nav ul ul li{
	display: block;
	margin:12px;
	padding:0;
}
nav ul ul li a{
	font-weight: 500;
}
.nav-dropdown a{
	align-items: center;
}
.nav-logo{
	flex:0 0 100px;
	margin-right: 8px;
}
.btn-top-free{
	margin-left: auto;
	position: relative;
	z-index: 5;
}
.btn-global{
	padding: 12px 24px;
	justify-content: center;
	align-items: center;
	border-radius: 50px;
	font-size: 16px;
	font-weight: 700;
	white-space: nowrap;
	letter-spacing: 1px;
	display: inline-block;
	cursor: pointer;
	transition:all ease-in-out .5s;
	text-transform: uppercase
}
.btn-global:disabled{
	cursor: not-allowed;
}
.btn-primary{
	border:1px solid #6F42C1;
	background: #6F42C1;
	color:#fff;
	text-align: center;
}
.btn-primary:hover{
	color:#6F42C1;
	background: transparent;
}
.btn-secondary{
	border:1px solid #459891;
	background: #459891;
	color:#fff;
	text-align: center;
}
.btn-secondary:hover{
	color:#459891;
	background: transparent;
}

.btn-secondary:disabled{
	color:#6C87A2;
	background: #405B76;
	border: none;
}
.btn-clear{
	border:1px solid #6F42C1;
	color:#6F42C1;
	text-align: center;
}
.btn-white{
	border:1px solid #fff;
	background: #fff;
	color:#6F42C1;
	text-align: center;
}
#methoding-study p,
.advance-card p,
.literation-text p,
.achieve-card p,
#they-says p,
.benefit-text p,
.slider-text p,
.vis-mis-card p,
.banners p,
.principe-card p{
	font-size:16px;
	font-weight: 500;
}
#main-banner{
	background: #F2F4F6;
}
#home-slider{
	padding-top:16px;
}
#home-slider .item{
	align-items: center;
	display: flex !important;
}
#home-slider .slick-dots{
	margin-top:-40px;
}
.slider-text p{
	font-size:16px;
}
.slider-text .btn-global{
	margin-top: 24px;
}
.slick-dots li.slick-active button{
	background: #6F42C1;
	color:#6F42C1;
}
.slick-prev:before, .slick-next:before{
	content: none;
}
.slick-prev,
.slick-next {
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	width: 50px;
	height: 50px;
	padding:0;
	background-color: unset;
}
.slick-prev:hover,
.slick-next:hover {
	opacity: .5;
}
.slick-prev{
	background-image:url(../images/assets/icon-prev.png);
	left:-50px;
}
.slick-next{
	background-image:url(../images/assets/icon-next.png);
	right:-50px;
}
.newsletter-form{
	margin-left: auto;
}
.cs-number p,
.newsletter-form p{
	font-size: 16px;
	font-weight: 500;
}
.cs-number h3, .newsletter-form h3{
	font-size: 16px;
	font-weight: 500;
	color: #fff;
}
.footer-cs{
	padding: 32px 0;
}
.contact-cs{
	border-radius: 24px;
	background: #1A3E63;
	padding: 32px;
	align-items: center;
}
.cs-number{
	margin-left:24px;
}
.newsletter-form strong,
.cs-number strong{
	font-size:24px;
	display: block;
}
.cs-number strong a,
.cs-number strong{
	color:#fff;
	text-decoration: none;
}
.form-newsletter{
	display: flex;
	align-items: center;
	margin-top:16px;
}
.form-newsletter input{
	border-radius: 8px;
	border: 1px solid #EAEAEA;
	padding: 12px 20px;
	font-size:16px;
	width: 100%;
}
.form-newsletter button{
	margin-left: 8px;
}
.copyright-wrap{
	border-top: 1px solid #0d4278;
	padding:24px 0;
}
.sosmed-wrap{
	display: flex;
	gap:10px;
	align-items: center;
}
.nav-bottom-wrap{
	padding:32px 0;
}
.nav-bottom-wrap strong{
	margin-bottom: 16px;
	display: inline-block;
}

.nav-bottom-wrap h3 strong{
	font-size: 14px;
	color: #fff;
	text-transform: uppercase;
}
.lr-club{
	padding-right: 120px;
}
.lr-club p{
	margin-bottom: 16px;
	width: 460px;
}
.nav-bottom{
	min-width: 130px;
}
.nav-bottom a{
	color:#fff;
	display: block;
	margin-bottom:16px;
	font-size:13px;
}

.nav-bottom h4 a{
	color:#fff;
	display: block;
	margin-bottom:16px;
	font-size:13px;
	font-weight: 400;
	line-height: normal;
}
.nav-bottom .contact{
	display: flex;
	align-items: flex-start;
}
.nav-bottom .contact img{
	margin-right: 8px;
}
.nav-bottom .contact a{
	margin:0;
}
.nav-bottom .address{
	margin-bottom: 16px;
}
.full-width{
	width: 100%;
}
#study-can-fun{
	padding:40px 0;
}
.fun-category{
	margin:24px 0;
}
.fun-category .item{
	padding:0 12px;
}
.fun-category .fun-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border-radius: 24px;
	background: #F2F4F6;
	aspect-ratio: 1 / 1;

}
.fun-category .fun-card strong{
	font-size:16px;
}

#video-interactive{
	padding:80px 0;
}
#video-interactive .video-laptop{
	justify-content: center;
	flex-direction: row;
	position:relative;

}
.video-laptop .video-content{
	border-radius:16px ;
	position: absolute;
	top: 30px;
	width: 66%;
	aspect-ratio: 1.6 / 1;
}
.video-laptop .lite-content{
	border-radius:16px ;
	position: absolute;
	top: 30px;
	width: 66%;
	aspect-ratio: 1.6 / 1;
	padding-bottom: 0 !important;
}

#teacher-benefit{
	background: #F2F4F6;
	padding:80px 0;
}
.benefit-text{
	flex-direction: column;
	flex:0 0 50%;
	align-items: flex-start;
	justify-content: center;
	padding-right: 24px;
}
.benefit-text p{
	margin-bottom: 24px;
}
#methode-study{
	background-image: url(../images/contents/bg-study-methode.webp);
	background-position: top center;
	background-repeat: no-repeat;
	background-size: cover;
	padding: 70px 0;
}
#methode-study-promo{
	background: linear-gradient(180deg, rgba(111, 66, 193, 0.10) 0%, rgba(111, 66, 193, 0.00) 100%);
	padding: 70px 0;
}
.methode-study-banner{
	background-image: url(../images/contents/bg-study-methode.webp);
	background-position: top center;
	background-repeat: no-repeat;
	background-size: cover;
	padding: 60px 56px;
	border-radius: 10px;
}
#methode-study-promo h3{
	color: #fff;
	margin-bottom: 32px;
}

#methode-study h2{
	color: #fff;
	margin-bottom: 32px;
}
.methode-study-list{
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
}
.methode-card{
	flex-basis: calc(100%/3);
	padding:0 12px;
	margin-top: 24px;

}
.methode-card .inside{
	border-radius: 16px;
	background: #8762CB;
	padding:32px 24px;
	text-align: center;
	color:#fff;
	height: 100%;
	font-size:16px;
	font-weight: 600;
}
.methode-card .inside img{
	display:inline-block;
	margin-bottom: 12px;
}

#they-says{
	text-align: center;
	padding:40px 0;
}
.img-testimony{
	width: 100%;
	display: flex;
	justify-content: center;
	position: absolute;
	top:-80px;
	left:0;
}
.img-testimony img{
	width: 140px;
	height: 140px;
	border-radius: 50%;
	border: 1px solid #EAEAEA;
}
.they-says-slider{
	margin-top:40px;
}
.they-says-slider .item{
	position: relative;
	border-radius: 24px;
	border: 1px solid #EAEAEA;
	background: #F2F4F6;
	padding:80px 24px 24px;
	margin:0 8px;
	height: auto;
}
.they-says-slider .slick-track{
	display:flex;
}
.they-says-slider .slick-list{
	padding-top:85px;
}
.testimony-text{
	margin-top:16px;

}
.they-says-slider p{
	font-size:14px !important;
}

#top-article{
	padding:56px 0;
}
.article-slider{
	margin:24px 0;
}
.article-slider .item img{
	transition:all ease-in-out .4s;
}
.article-slider .item a:hover img{
	opacity: .7;
}
.article-slider .item a{
	color:#fff;
	position: relative;
}
.article-slider .slick-list{
	border-radius: 16px;
}
.article-slider .article-short-desc {
	background: linear-gradient(0deg, #161616 0%, rgba(22, 22, 22, 0.20) 100%);
	padding: 16px;
	position: absolute;
	bottom: 0;
	left:0;
	margin:0;
	color:#fff;
}
.article-short-desc{
	min-height: 182px;
}
.article-short-desc .article-category{
	background: #5898B8;
	padding: 6px 16px;
	border-radius:12px;
}
.article-short-desc .uppercase{
	margin:12px 0;
	font-weight: 600;
	font-size:18px;
}
.article-short-desc .article-date{
	border-radius: 8px;
	background: #404040;
	padding: 4px 8px;
	display: inline-block;
}
.article-slider .slick-next{
	right: 0;
}
.article-slider .slick-prev{
	left: 0;
}
.banners{
	align-items: center;
}
.banners p{
	margin-bottom: 24px;
}
.banners .banner-text{
	flex:0 0 50%;
}
.banners .banner-images{
	padding-left:32px;
}
#vision-mission{
	background-color: #459891;
	background-image:  url(../images/assets/web.png);
	background-size: 50%;
	padding:40px 0;
}
.vis-mis-card{
	background: #326460;
	width: 60%;
	border-radius: 24px;
	padding:30px;
	text-align: center;
	margin:12px auto;
	color: rgba(255, 255, 255, 0.80);
}
.vis-mis-card h4{
	color:#fff;
}

#principe-company{
	padding:56px 0;
}
.principe-card{
	aspect-ratio: 1.9 / 1;
	border-radius: 24px;
	background: #F2F4F6;
	padding:40px 54px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	text-align: center;
	width: 100%;
}
.principe-card-slider .item{
	padding:0 12px;
}
.principe-card:first-child{
	margin-left:0;
}
.principe-card:last-child{
	margin-right:0;
}
.principe-card img{
	display: inline-block;
}
.principe-card strong{
	font-size:20px;
	margin-top:18px;
	margin-bottom:8px;
}

#our-journey{
	background: #F2F4F6;
	padding:40px 0;
}
.our-journey-wrap{
	flex-direction: row;
	align-items: center;
}
.our-journey-image{
	margin-left:auto;
	flex:0 0 50%;
	display: flex;
	justify-content: center;
}
.our-journey-text ul{
	margin-top:24px;
	list-style: disc;
	margin-left:20px;
}
.our-journey-text ul li{
	margin:4px 0;
	font-size:16px;
	font-weight: 500;
}

#company-achievement{
	padding:56px 0;
}
.lr-achievement{
	border-radius: 16px;
	background: #F2F4F6;
	padding: 24px;
}
.achieve-card{
	width: 100%;
	text-align: center;
	padding:24px 0;
	position:relative;
}
.achieve-card .achieve-number{
	color: #459891;
	font-size: 48px;
	font-weight: 600;
}
.achieve-card:after{
	content:'';
	width: 2px;
	height: 40px;
	background: #CECECE;
	position:absolute;
	top:54px;
	right:0;
}
/*
.achieve-card:last-child::after{
	width: 0;
}
*/

.product-company-slider{
	margin-top:40px;
}
.product-company-slider .slick-track{
	display: flex;
	align-items: center;
}
.product-company-slider .item{
	border-radius: 12px;
	border:1px solid #E0E0E0;
	width: 100%;
	margin:0 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1.8/1;
}
.product-company-slider .item img{
	width: 200px;
}

#contact-me{
	background: #F2F4F6;
	padding:80px 0;
}
.contact-me-form{
	flex:0 0 57%;
	padding-left: 40px;
}
#lp-main-banner .contact-me-form{
	width: 540px;
	padding:16px;
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 16px;
	position:relative;
	margin:40px 0 44px auto;
}
#lp-main-banner .form-control{
	position: relative;
}
#lp-main-banner .form-control .error-message{
	position: absolute;
	right: 15px;
	top: 14px;
}
.contact-me-form h3{
	margin-bottom: 4px;
}
.contact-me-form h1{
	border-radius: 4px;
	background: #E2D9F3;
	color:#6F42C1;
	text-align: center;
	font-size: 16px;
	font-weight: 600;
	padding:12px;
	margin-bottom: 6px;
	text-transform: capitalize;
}
#contactForm{
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: flex-start;
}
.form-control{
	gap:12px;
	width: -webkit-fill-available;
}
.form-control textarea,
.form-control select,
.form-control input{
	border-radius: 8px;
	border: 1px solid #EAEAEA;
	padding: 16px 20px;
	width: 100%;

}
/*.form-control input:first-child{
	margin-left: 0;
}.form-control input:last-child{
	 margin-right: 0;
 }*/
.form-control textarea{
	height: 120px;
	/*margin: 6px 0 16px;*/
}
.form-control .form-coloum{
	width: 100%;
}
.form-control .error-message{

}
#lp-main-banner .contact-me-form h1{
	margin: -16px -16px 12px -16px;
	border-radius: 12px 12px 0 0;
	color:#000;
	background: #f5f5f5;
	padding:14px 12px;
}
#literation{
	padding:80px 0;
}
.literation-wrap{
	align-items: center;
}
.literation-text,
.literation-images{
	width: 50%;
}
.literation-images{
	padding-right:30px;
}
.literation-text p{
	margin-bottom: 24px;
}
#advance{
	padding:70px 0;
}
#advance h2{
	margin-bottom:30px;
}
.advance-wrap{
	align-items: center;
}
.advance-text{
	width: 50%;
	padding-right: 24px;
}
.advance-text h3{
	margin-bottom: 24px;
}
.advance-card{
	align-items: center;
	border-radius: 24px;
	background: #F2F4F6;
	padding:24px 32px;
	margin:16px 0;
}
.advance-card img{
	margin-right: 16px;
}

#methoding-study{
	text-align: center;
	padding:80px 0;
	background-image: url(../images/assets/web2.png);
	background-size: 60%;
	background-repeat: repeat;
}
#methoding-study h3{
	margin-bottom: 12px;
}
#methoding-study p{
	padding:0 120px;
}

.methode-student{
	margin-top:32px;
	border-radius: 24px;
	background: #fff;
	box-shadow: 1px 1px 4px #a1a1a1;
	padding: 40px 80px 80px 80px;
}
.methode-student .logo-student{
	display: inline-block;
}
.methode-student-slider{
	margin-top:18px;
}
#try-free{
	text-align: center;
	background: #6F42C1;
	padding:32px 0;
}
.logo-lr-mask-white{
	display: inline-block;
}
#try-free h4, #try-free h3{
	color:#fff;
	margin: 32px auto;
	width: 70%;
}
#interactive,
#our-advance{
	padding:80px 0;
	text-align: center;
}
.our-advance-wrap .item{
	padding:0 12px;
}
#our-advance p{
	margin-bottom: 24px;
}
#our-advance .container{
	padding: 0 10vw;
}
.our-advance-card{
	/*	border-radius: 24px;
        border: 1px solid #EAEAEA;
        background: #F2F4F6;*/
}
.our-advance-card img{
	width: 100%;
}
.our-advance-card strong{
	font-size:16px;
	padding:24px 12px;
	display: inline-block;
	text-transform: capitalize;
}
#interactive h3{
	/*margin-bottom: 32px;*/
}
.interactive-slider .item{
	text-align: center;
}
.interactive-slider .item img{
	display: inline-block;
}
.our-advance-card.teacher-page{
	padding:40px;
}
.our-advance-card.teacher-page strong{
	padding:24px 0 0;
}
.lr-english-book{
	text-align:center;
	padding:60px 0;
	font-size:16px;
	font-weight: 500;
}
.lr-english-book-wrap{
	justify-content: center;
	margin: 30px auto 0;
	width: 70%;
}
.lr-english-book-image{
	width: 50%;
	padding-right:12px;
}
.lr-english-book-text{
	width: 50%;
	text-align: justify;
	padding-left:12px;
	font-size:14px;
}
.lr-english-book-text p{
	margin-bottom: 12px;
}

#bimtek-training{
	background: #F2F4F6;
	padding:56px 0;
}
.bimtek-training{
	align-items: center;
}
.bimtek-training_{
	width: 100%;
}
.bimtek-training-text{
	padding-left: 16px;
	font-size:16px;
	font-weight: 500;
}
.bimtek-training-text h4{
	font-weight: 700;
}
.bimtek-training-text h5{
	font-size:24px;
	font-weight: 500;
	margin:8px 0;
}
.bimtek-training-text p{
	margin-bottom: 16px;
}

.blog-banner-slider .item{
	position:relative;
	margin:0 2px;
}
.blog-banner-slider .item a{
	color:#fff;
}
.blog-desc-card{
	position:absolute;
	bottom:48px;
	left:80px;
	width: 580px;
	padding:32px 32px 78px;
	font-size:16px;
	border-radius: 16px;
	background: rgba(22, 22, 22, 0.70);
}
.blog-desc-card strong{
	font-size:20px;
	display: inline-block;
	margin-bottom: 8px;
}
.blog-banner-slider .slick-prev{
	left:110px;
	bottom:46px;
	top:unset;
	width: 40px;
	height: 40px;
}
.blog-banner-slider .slick-next{
	left:160px;
	bottom:46px;
	top:unset;
	right: unset;
	width: 40px;
	height: 40px;
}
.blog-sorting{
	margin:32px 0;
}
.blog-sorting a,
.blog-sorting button{
	border-radius: 50px;
	border: 1px solid #E0E0E0;
	padding: 9px 20px;
	color:#757575;
	font-size:14px;
	cursor: pointer;
	background:#fff;
}
.blog-sorting button.mixitup-control-active,
.blog-sorting a.mixitup-control-active,
.blog-sorting button:hover{
	border: 1px solid #6F42C1;
	background: #E2D9F3;
	color:#6F42C1;
}
.blog-sorting a{
	color:#5898B8;
	border: 1px solid #5898B8;
	font-weight: 600;
	transition: all ease .4s;
}
.blog-list-wrap{
	margin-left:-8px;
	margin-right:-8px;
	flex-wrap: wrap;
}
.blog-card{
	width: 100%;
	padding:0 8px;
	font-weight: 500;
	margin-bottom: 40px;
	flex-basis: calc(100%/3);
}
.blog-card a{
	color:#757575;
}
.blog-card a:hover img{
	opacity: .7;
}
.blog-card a:hover .blog-title{
	color:#6F42C1;
}
.blog-card .blog-title{
	font-size:16px;
	margin-top:16px;
	margin-bottom: 8px;
	text-transform: uppercase;
}
.blog-thumb-img{
	border-radius: 8px;
	overflow: hidden;
}
.blog-thumb-img img{
	width: 100%;
	transition:all ease-in-out .2s;
}
.blog-short-desc{
	margin-bottom: 16px;
}
.blog-list{
	display: flex;
	flex-wrap: wrap;
	gap:8px;
	margin-top:16px;
}
.blog-list a:hover{
	background: #6F42C1;
	color:#fff;
	border-color:#6F42C1;
}
.paging{
	margin-bottom: 56px;
	align-items: center;
	justify-content: center;
}
.paging a{
	border-radius: 8px;
	border: 1px solid #F1F1F1;
	background: #FFF;
	margin:0 2px;
	font-weight: 500;
	color:#333;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.paging span{
	border-radius: 8px;
	border: 1px solid #F1F1F1;
	background: #FFF;
	margin:0 2px;
	font-weight: 500;
	color:#333;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.paging a.current{
	color:#fff;
	background: #6F42C1;
}

.blog-detail-wrap{
	margin-top: 40px;
}
.blog-left{
	flex:0 0 840px;
}
.blog-right{
	flex:0 0 410px;
	margin-left:auto;
}
.blog-title{
	text-transform: capitalize;
}
.blog-news{
	display: flex;
	gap: 8px;
	align-items: center;
	color:#757575;
	font-weight: 500;
}
.blog-news .publisher{
	display: flex;
	flex-direction: column;
	gap: 2px;
	align-items: start;
}
.blog-news .publisher strong{
	color: #000 !important;
}

.blog-news .author{
	display: flex;
	gap: 4px;
}
.blog-news .author a{
	display: flex;
	align-items: center;
}
.blog-banner{
	margin-top:24px;
	border-radius: 8px;
	overflow: hidden;
}
.blog-desc{
	margin-top:18px;
	font-size:16px;
}
.blog-desc img{
	border-radius: 8px;
	margin-bottom: 18px;
	height: 100%;
}
.blog-desc figure{
	margin: auto;
}

.blog-text-strong{
	font-size:20px;
	font-weight: 600;
	margin-bottom: 24px;
}
.blog-desc p{
	margin-bottom: 16px;
}
.blog-category{
	display: flex;
	flex-wrap:wrap;
	gap:8px;
	margin-top:12px;
}
.blog-category span{
	background: #E2D9F3;
	border-radius: 40px;
	color: #6F42C1;
	display: flex;
	padding: 4px 16px;
	justify-content: center;
	align-items: center;
	font-size:12px;
	cursor:pointer;
	transition: all ease .4s;
}
.blog-category span:hover{
	color:#fff;
	background: #6F42C1;
}
.title-blog-category{
	background: #F2F4F6;
	padding:12px;
	font-weight: 600;
	font-size:16px;
	border-radius: 4px;
}
.blog-caption{
	margin:20px 0;
}
.article-popular{
	margin-bottom: 28px;
}
.article-list a{
	flex-direction: row;
}

.article-most-view-text a:hover,
.article-list a:hover .article-short-desc strong.uppercase{
	color:#6F42C1;
}
.article-thumb{
	flex:0 0 170px;
}
.article-short-desc{
	margin-left:12px;
	color:#757575;
	font-weight: 500;
}
.article-short-desc strong.uppercase{
	margin:0;
	font-size:16px;
	color:#161616;
	font-weight: 700;

}
.article-short-desc p{
	margin:2px 0;
}
.blog-desc-card strong,
.article-most-view-text a,
.article-short-desc p,
.article-short-desc strong{
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	white-space: pre-wrap;
	word-break: keep-all;
	text-overflow: ellipsis
}
.article-date-list{
	font-size:12px;
}
.article-list{
	max-height: 100px;
	margin:16px 0;
	overflow: hidden;
}

.news-letter{
	font-weight:500;
	font-size:16px;
	margin-top:16px;
	margin-bottom:32px;
}
.news-letter .form-newsletter input{
	background: #F2F4F6;
}
.view-number{
	color:#C2C2C2;
	font-size:24px;
	font-weight: 700;
	min-width: 32px;
	margin-right: 16px;
}
.article-other{
	border-top: 1px solid #EAEAEA;
	margin:40px 0;
	padding-top:32px;
}
.article-most-view{
	margin:18px 0;
}
.article-most-view-text a{
	font-size:16px;
	font-weight: 700;
	color:#161616;
}
.article-most-view-text .article-date-list{
	margin-top:8px;
}
.article-view-wrap{
	margin-bottom: 28px;
}
.article-other-list{
	width: 100%;
	font-weight: 500;
	align-items: center;
}
.article-other-list a{
	align-items: center;
	font-weight: 600;
	color:#161616;
}
.article-other-list a:hover{
	color:#6F42C1;
}
.article-text{
	padding:0 32px;
}
.prev-article .article-text{
	padding-right:40px;
	border-right: 1px solid #EAEAEA;
}
.next-article .article-text{
	padding-left:40px;
}
.next-article{
	text-align: right;
	justify-content: flex-end;
}
.article-other-list a span{
	font-size:16px;
	color:#6F42C1;
}
.article-other-list .title-article{
	font-size: 20px;
}

#top-lead-generator{
	background: #F2F4F6;
	padding:80px 0;
}
.promo-banner-text{
	text-align: center;
	font-size:18px;
	font-weight: 500;
	color:#525252;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.promo-banner-text h3{
	margin-top:16px;
}
.promo-banner-text h4{
	margin-bottom: 16px;
}
.promo-banner-text strong{
	font-weight:700;
}
.form-lead-generator{
	border:1px solid #EAEAEA;
	border-radius: 8px;
	padding:0 16px 16px;
	overflow: hidden;
	margin-top:-40px;
}
.form-lead-generator .form-control textarea,
.form-lead-generator .form-control input{
	background: #FCFAFA;
}
.form-lead-generator h4{
	font-size:18px;
	font-weight: 700;
	color:#6F42C1;
	background: #E2D9F3;
	padding: 20px 16px;
	text-align: center;
	margin:0 -16px 12px;
}

#portal-fituring{
	padding:80px 0;
	text-align: center;
}
#portal-fituring h3,#portal-fituring h2{
	padding:0 40px;
	margin-bottom: 12px;
}
#portal-fituring p{
	font-size:24px;
	font-weight: 500;
	color:#525252;
}
#portal-fituring p span{
	display: inline-block;
	color: #FFF;
	padding:8px 28px;
	border-radius: 50px;
	background: #459891;
	font-size: 20px;
}
#portal-fituring .portal-card{
	width: 100%;
	margin-top:40px;
	padding:0 12px;
}
#portal-fituring .portal-card h4{
	font-weight: 700;
}
#portal-fituring .portal-card img{
	margin:24px 0;
	width: 100%;
}
#our-partner-wrap{
	margin-top:48px;
	margin-bottom:40px;
}
.partner-logo-slider{
	border-radius: 12px;
	border: 1px solid #E0E0E0;
}
.partner-logo-slider{
	border-radius: 12px;
	border: 1px solid #E0E0E0;
}
.partner-logo-slider .slick-track{
	display: flex !important;
	align-items: center;
}
.partner-logo-slider{
	margin-bottom: 24px;
}
.partner-logo-slider .item {
	padding:18px;
}
.our-partner-text{
	font-size:16px;
	margin-bottom:18px;
}
#they-says.promo-testi{
	padding-top:80px;
}
.link-promo{
	border-radius: 12px;
	background: #E2D9F3;
	display: block;
	padding:12px;
	text-align: center;
	color:#6F42C1;
	font-weight: 600;
	transition:all ease .4s;
}
.link-promo:hover{
	background: #6F42C1;
	color:#fff;
}
#faq-page{
	background: #fff;
	padding:60px 0 40px;
}
.faq-category{
	margin-top: 16px;
}
.faq-category .faq-card{
	width: 100%;
	background: #fff;
	border-radius: 12px;
	border: 1px solid #EAEAEA;
	font-weight: 600;
	font-size:16px;
	padding:24px;
	margin:0 8px;
	transition: all ease-in-out .4s;
}
.faq-card{
	color: #161616;
}
a.faq-card:hover{
	background: #EAEAEA;
}
.faq-card .faq-card-name{
	margin-top: 40px;
	align-items: center;
}
.faq-card:first-child{
	margin-left:0;
}
.faq-card:first-child .img-logo-lr{
	width: 140px;
	height: 64px;
}
.faq-card:first-child .img-logo-lr img{
	width: 114px;
}
.faq-card:last-child{
	margin-right:0;
}
.faq-card-name img{
	margin-left:auto;
	width: 20px;
}
.faq-list-wrap{
	margin-top:28px;
}
.faq-list-wrap h4{
	margin-bottom: 12px;
}
.faq-list-wrap h5{
	margin-bottom:8px;
}
.faq-list{
	font-size:16px;
	font-weight: 500;
	background: #fff;
	border-radius: 12px;
	border: 1px solid #EAEAEA;
	padding:4px 16px;
	cursor: pointer;
	margin:4px 0;
	transition: all ease-in-out .3s;
}
.faq-list.open,
.faq-list:hover{
	background: #f6f5f5;
}
.faq-question{
	align-items: flex-start;
	padding: 8px 0;
}
.faq-question .faq-number{
	display: flex;
	/*flex:0 0 20px;*/
	margin-right: 4px;
	justify-content: flex-end;
}
.faq-question .fa-chevron{
	margin-left: auto;
	flex: 0 0 12px;
	padding-top: 6px;
}
.faq-answers{
	color: #6B6B6B;
	display: none;
	padding:12px 0;
	border-top:1px solid #eaeaea;
	/*max-height: 0;
	overflow: hidden;
	transition: max-height ease-in-out .2s;*/
}
/*.faq-answers p{
	margin:6px 0;
}
.faq-list.open .faq-answers{
	max-height: 5000px;
}*/
.faq-card-desc{
	font-weight: 500;
}
.faq-card-desc p{
	margin-top:16px;
}

.breadcrumb-faq{
	position: relative;
	top:-14px;
	font-size:16px;
	font-weight: 600;
	display: flex;
	gap: 6px;
}
.breadcrumb-faq a{
	color:#6F42C1;
}

.thank-you-page{
	padding:0 240px;
}
.thank-you-page img{
	display: inline-block;
}
.thank-you-page .btn-global{
	margin-top:40px;
}
.follow-sosmed-card{
	border-radius: 16px;
	background: #E6E8EB;
	padding:24px 32px;
	margin:24px auto 0;
	width:max-content;
}
.follow-sosmed-card img{
	filter: invert(1);
	margin:0 10px;
}
.follow-sosmed-card p{
	margin-bottom: 16px;
}
.lets-join{
	align-items: center;
}
.lets-join-image{
	flex:0 0 50%;
}
.lets-join-text{
	font-size:16px;
	font-weight: 500;
}
.lets-join-text p{
	margin: 16px 0;
}

#competence{
	background: #6F42C1;
	padding:80px 0;
}
#competence h3, #competence h2{
	text-align: center;
	color: #fff;
	margin-bottom: 32px;
}
.competence-coloum{
	background: #8660CB;
	border-radius: 16px;
	padding:24px;
	color:#fff;
}
.comptence-slider .item{
	padding:0 8px;
}
.competence-coloum .comptence-title{
	font-weight: 500;
	font-size:20px;
	margin-bottom: 16px;
}

#relation,
#benefit{
	padding:80px 0;
}
#benefit h3, #benefit h2{
	text-align: center;
	margin-bottom: 24px;
}
.benefit-slider .item{
	margin:0 10px;
	padding:20px;
	border-radius: 16px;
	border: 1px solid #EAEAEA;
	box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.05);
}
.benefit-slide-colum {
	text-align: center;
	font-size:16px;
	font-weight: 500;
}
.benefit-slide-colum img{
	width: 100%;
	border-radius: 8px;
	margin-bottom: 16px;
}
.benefit-slide-colum strong{
	font-size:20px;
}

#relation{
	background-image: url(../images/contents/relation-bg.png);
	background-position: top center;
	background-repeat: no-repeat;
	background-size: cover;
	color:#fff;
	text-align: center;
}
#relation h4{
	color:#fff;
	padding:0 200px;
}
#relation p{
	margin:8px 0 24px;
}
.slider-text{
	flex:0 0 50%;
	padding-right: 80px;
}

.event-banner{
	position:relative;
	background: #4B82A1;
}
.banner-text-inside{

	width: 100%;
	display: flex;
	height:100%;
	color:#fff;
	font-size:18px;
	font-weight:500;
	align-items: center;
	text-align: center;
}
.banner-text-inside h2{
	color:#fff;
}
.banner-text-inside p{
	margin:8px 0 24px;
	padding: 0 180px;
}
.event-banner-inside{
	flex-direction: row;
	align-items: center;
}
.event-banner-text{
	border-radius: 16px;
	background: rgba(22, 22, 22, 0.20);
	padding: 16px;
	color:#fff;
	width: 50%;
}
.event-banner-text h4{
	font-weight: 700;
	color:#fff;
}
.event-banner-text .event-set{
	margin:12px 0;
}
.event-banner-text .btn-primary:hover {
	color: #fff;
	background: #6F42C1;
}
.event-desc strong {
	min-height: 65px;
	display: block;
}
.event-banner-img{
	margin-left: 70px;
}
#latest-event{
	padding:80px 0;
	background-color:#F2F4F6 ;
	background-image: url("../images/assets/web2.png");
	background-position: center;
	background-size: 40%;
}
#latest-event h3{
	text-align: center;
	margin-bottom: 24px;
}
.event-slider .item{
	padding:0 8px;

	position: relative;
}
.event-slider .event-card{
	background: #fff;
	border-radius: 16px;
	padding:16px;
	font-size:16px;
	font-weight: 500;
	height: 100%;
}
.event-slider .event-card strong{
	font-size: 18px;
	margin:16px 0;
	display: block;
}
.event-slider .slick-track{
	display: flex;
}
.event-slider .slick-slide{
	height: auto;
}
#next-event{
	padding:80px 0 30px;
}
#next-event h3{
	text-align: center;
}
.next-event-card{
	border-radius: 16px;
	border: 1px solid #EAEAEA;
	overflow: hidden;
	height: 100%;
}
.next-event-slider{
	margin-top:24px;
}
.next-event-slider .item{
	padding:0 8px;

}
.next-event-slider .slick-track{
	display: flex !important;
}
.next-event-slider .slick-slide {
	height: inherit !important;
}
.event-thumb img{
	width: 100%;
}
.event-desc{
	padding:16px;
	font-size:16px;
}
.event-desc .link-to{
	width: 100%;
	margin-top:16px;
	text-align: center;

}
.event-desc .btn-clear{
	border-color:#0A0A0A;
	color:#0A0A0A;
}
.event-date{
	color:#6F42C1;
	font-weight: 500;
	margin:4px 0 16px;
}
.event-set{
	display: flex;
	align-items: center;
	font-size:14px;
}
.event-set img{
	margin-right: 6px;
}

#event-archive{
	padding:80px 0;
	text-align: center;
}
.font-desc{
	font-size:24px;
	font-weight: 500;
}

.video-event-wrap{
	margin-top:24px;
}
.video-event-wrap .video-card{
	width: 100%;
	margin:0 12px;
	border-radius: 8px;
	border: 1px solid #EAEAEA;
	aspect-ratio: 1.8 / 1;
	overflow: hidden;
}
.video-card iframe{
	width: 100%;
	height:100%;
	display:block;
}

#event-detail-banner{
	margin-top:32px;
}
#event-detail-content{
	margin-top:24px;
	margin-bottom:44px;
}
.event-detail-text{
	width: 70%;
	font-weight: 500;
	font-size:18px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding-right: 24px;
}
.event-detail-text p{
	margin:12px 0;
}
.event-box{
	padding:24px;
	margin-top:16px;
	border-radius: 12px;
	border: 2px solid #EAEAEA;
	width: 100%;
}
.speaking-people{
	margin: 16px 0;
}
.speaking-img{
	flex:0 0 64px;
}
.speaking-img img{
	width: 64px;
	height: 64px;
	border-radius: 50%;
}
.speaking-text{
	padding-left: 16px;
	font-size:14px;
}
.speaking-text label {
	color: #757575;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
}
.speaking-text p {
	color: #5C5C5C;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
}
.speaking-text label,
.speaking-text p{
	margin: 4px 0;
}

.event-detail-right{
	margin-left:auto;
	width: 30%;
	font-weight: 500;
}
.event-detail-right .event-box{
	margin:0;
}
.box-timing{
	margin:12px 0;
}
.box-timing svg,
.box-timing img{
	margin-right: 6px;
}
.form-register{
	margin-bottom: 16px;

}
.recap-event,
.event-register{
	margin-top:16px;
}
.box-register h5,
.box-register .form-register{
	/*display: none;*/
}
.box-register.show .form-register,
.box-register.show h5{
	display: block;
}

.item-text-wrapper {
	align-self: stretch;
	min-height: 144px;
	flex-direction: column; 
	justify-content: flex-start; 
	align-items: center; 
	gap: 12px;
	display: flex
}

.item-title {
	align-self: stretch;
	text-align: center;
	color: white;
	font-size: 20px;
	font-weight: 600;
	word-wrap: break-word
}

.item-caption {
	align-self: stretch;
	text-align: center;
	color: white;
	font-size: 16px;
	font-weight: 500;
	line-height: 26px;
	word-wrap: break-word
}

.item-container{
	margin: 24px;
	padding: 40px;
	background: rgba(22, 22, 22, 0.40);
	border-radius: 24px;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	gap: 24px;
	display: inline-flex
}

.item-container img{
	width: 80px;
	height: 80px
}

.benefit-list-wrapper{
	width: 100%;
	background: #FBFBFB;
	border-radius: 24px;
	border: 1px #EDEDED solid;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	display: inline-flex
}

.benefit-item {
	align-self: stretch;
	flex: 1 1 0;
	padding: 24px;
	border-bottom: 1px #EDEDED solid;
	justify-content: flex-start;
	align-items: center;
	gap: 12px;
	display: inline-flex
}
.benefit-item:last-child {
	border:0;
}

.benefit-item-text {
	color: #161616;
	font-size: 16px;
	font-weight: 500;
	word-wrap: break-word
}

.btn-whatsapp {
	padding-left: 24px;
	padding-right: 24px;
	padding-top: 12px;
	padding-bottom: 12px;
	background: #25D366;
	border-radius: 200px;
	justify-content: center;
	align-items: center;
	text-align: center;
	gap: 8px;
	display: flex;
	margin-bottom: 16px;
}

.welcome-csr-container {
	width: 100%;
	padding-top: 40px;
	padding-bottom: 40px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(0, 137, 143, 0.10) 100%);
	justify-content: center;
	align-items: center;
	gap: 40px;
	display: flex;
}
.welcome-csr-container img{
	justify-content: center;
	align-items: center;
	display: flex
}

.welcome-csr-text-wrapper {
	width: 100%;
	padding-left: 80px;
	align-self: stretch;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 12px;
	display: inline-flex;
}
.welcome-csr-img-wrapper {
	width: 100%;
}

.welcome-csr-text {
	align-self: stretch;
	color: #161616;
	font-size: 24px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.16px;
	word-wrap: break-word;
}

.welcome-csr-title {
	align-self: stretch;
	color: #0A0A0A;
	font-size: 40px;
	font-weight: 700;
	text-transform: uppercase;
	line-height: 50px;
	letter-spacing: 0.16px;
	word-wrap: break-word;
}

.welcome-csr-caption {
	align-self: stretch;
	color: #525252;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0.16px;
	word-wrap: break-word
}

.contact-me-section {
	background: white !important;
	padding: 40px 80px;
	display: flex
}
.contribution-section {
	background: white !important;
	padding: 40px 80px;
	display: flex
}

.contact-me-wrapper {
	border-radius: 24px; padding: 24px;
	background-size: cover;
	background: #F8F7FC url('../images/assets/bg-geometric.png') no-repeat;
}
.contact-me-wrap{
	align-items: center;
	justify-content: flex-start;
}
.service-slider-wrapper .slick-slide {
	display: flex;
}
.service-slider-wrapper .slick-track {
	display: flex;
}
.service-slider-wrapper .slick-list {
	display: flex;
}

.csr-service-section {
	background-size: cover;
	background-color: #6F42C1 ;
	/*background-image: url('/images/assets/bg-purple-geometric.png');*/
}

.recap-event .event-thumb{
	margin-top:12px;
}
.recap-event .event-thumb img{
	border-radius: 8px;
	border:1px solid #e3e3e3;
}
.recap-event .recap-title{
	font-weight: 700;
	margin-top:12px;
	color:#000;
}
.recap-short-text{
	margin:12px 0;
}
.whatsapp{
	background: #25D366;
	border-radius: 30px;
	justify-content: center;
	align-items: center;
	text-align: center;
	display: flex;
	margin-bottom: 16px;
	width: fit-content;
	padding: 8px 16px;
	margin-top:12px;
}
.whatsapp span{
	font-weight: 600;
	margin-left:8px;
}
.nav-bottom-right{
	gap:16px;
	align-items: baseline;
	margin-left:auto;
}

#csr-documentation{
	text-align: center;
}

#csr-documentation .container{
	padding:0 50px;
}
.csr-text-description{
	text-align: center;
	font-weight: 500;
	font-size:18px;
}
.csr-text-description h3{
	margin-bottom: 12px;
}
.csr-video{
	display: flex;
	gap:24px;
	margin-top:24px;
}
.csr-video .video-card{
	width: 100%;
}
.csr-video .video-card iframe{
	aspect-ratio: 16 / 9;
}

.modal-content {
	display: flex;
	padding: 1rem 3rem;
	margin-top: 1.5rem;
	flex-direction: column;
	gap: 8px;
	align-items: center;
	width: 100%;
}

.modal-header {
	display: flex;
	align-items: center;
}
.modal-title {
	font-size: 1.125rem;
	line-height: 1.75rem;
	font-style: normal;
	font-weight: 600;
	text-align: center;
}
.modal-caption {
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 500;
	text-align: center;
}
.modal-footer {
	display: flex;
	flex-direction: row;
	gap: 1rem;
	align-items: center;
	width: 100%;
	justify-content: center;
}
#customPrimaryButton {
	background: #6F42C1;
	border-radius: 200px;
	border: 1px #5D37A1 solid;
	padding: 12px 24px;
	justify-content: center;
	align-items: center;
	text-align: center;
	color: white;
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
	word-wrap: break-word;
	margin-top: 8px;
	cursor: pointer;
}

.top-bar-right{
	margin-left:auto;
	gap:32px;
}
.grade-text{
	display: flex;
	align-items: center;
	font-weight: 600;
}
.grade-text p{
	margin-left:8px;
}
#landing-page-header .brand {
	align-items: center;
	display: flex;
}
#landing-page-header .brand img{
	width: 215px;
}
#lp-main-banner {

	display: flex;
	position: relative;
	justify-content: center;
	overflow: hidden;
	/*background: linear-gradient(270deg, #662FC7 0%, #5528B2 47%, #8E32D8 100%);*/
}
#lp-main-banner picture{
	position: absolute;
	top:80px;
	left:0;
}
#lp-main-banner picture img{
	max-width: 100%;
}
#lp-content-effective .container{
	gap:40px;
	padding:80px 0;
}
.bg-laptop-video{
	flex:0 0 540px;
	position:relative;
	align-items: center;
	justify-content: center;
	display: flex;
}
.bg-laptop-video .lite-content{
	position: absolute;
	top: 14px;
	width: 75%;
	aspect-ratio: 1.6 / 1;
	padding-bottom: 0 !important;
}
.effective-text{
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
}
.effective-text h4{
	font-size:22px;
	font-weight: 700;
	line-height: 26px;
	margin-bottom: 16px;
}
.effective-text p{
	margin-bottom: 24px;
	font-size:16px;
}
.effective-text p strong{
	color:#6F42C1;
	font-weight: 600;
	text-decoration: underline;
}

#lp-content-school{
	background: #F5F5F5;
	padding:80px 0;
}
.content-school{
	/*	gap:24px;
        display: flex;
        align-items:start;
        justify-content: start;*/
}
.content-school .slick-track{
	/*display: flex;
	gap:12px;*/
}
.content-school .title-card{
	background: #f5f5f5;
	width: 100%;
}
.content-school .title-card strong{
	background: #E5A000;
	color:#fff;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px 24px;
	font-weight: 600;
	font-size: 16px;
	width: fit-content;
	margin: 0 auto;
	border-radius: 8px 8px 0 0;
}
.content-school .inner-card{
	background: #fff;
	border-radius: 12px;
}
.content-school .card-teacher{
	height:100%;
	padding:8px;
	/*background: #fff;*/
}
.title-card-text{
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 16px;
}
.inner-card .img-card-school{
	margin-bottom: 32px;
	padding:8px 8px 0;
}
.img-card-school img{
	width: 100%;
}
.card-content-teacher{
	padding:0 18px 18px;
}
#lp-joining-form{
	margin-bottom: 40px;
}
/*#lp-joining-form,*/
#lp-effective-studying{
	padding:80px 0;
}
#lp-joining-form h5,
#lp-content-joining h5,
#lp-effective-studying h5{
	font-weight: 700;
	text-align: center;
}
.effective-img-wrap{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin-top:32px;
	gap:32px;
}
.effective-img-wrap .img-thumb{
	position: relative;
	border-radius:12px;
	overflow: hidden;
	max-width: 624px;
	flex: 0 0 48%;
	aspect-ratio: 19 / 9;
	height: auto;
}

.effective-img-name{
	position: absolute;
	top:0;
	left:0;
	text-transform: uppercase;
	width: 100%;
	height: 100%;
	font-weight: 700;
	color:#fff;
	padding: 3vw;
	font-size: 18px;
	display: flex;
	text-align: center;
	align-items: center;
	justify-content: center;
}
.flip-card-wrap{
	overflow-y: hidden;
}
.img-thumb-card img{
	border-radius:12px;
}
.img-thumb-card{
	position: relative;
	transition:all ease-in-out .6s;
}
.flip-card-wrap:hover .img-thumb-card{
	margin-top: calc(-48.5%);
}
.effective-text-card{
	background:#6F42C1;
	color:#fff;
	height: 100%;
	width: 100%;
	border-radius:12px;
	padding: 3vw;
	display: flex;
	justify-content: center;
	flex-direction: column;
	gap:8px;
}
.effective-text-card strong{
	font-size:18px;
	font-weight: 600;
}
.effective-text-card a{
	font-weight: 700;
	border:1px solid #fff;
	border-radius: 30px;
	padding:8px 18px;
	color:#fff;
}

#lp-content-joining{
	background: #F5F5F5;
	padding:80px 0;
}
.joining-wrapper{
	flex-direction: row;
	gap:16px;
	margin-top:24px;
}
.joining-card-list{
	width: 100%;
	border-radius: 12px;
	background: #fff;
	margin:0 4px;
	box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.03);
}
.joining-card-list .testi-circle-img{
	padding:16px;
}
.testi-text-detail{
	padding:14px 24px 24px;
}
.testi-text{
	min-height: 240px;
	font-weight: 500;
}
.testi-text img{
	margin-bottom: 16px;
}
.testi-name{
	border-left:2px solid #6F42C1;
	padding-left:16px;
}
.lp-partner-wrap{
	margin-top:64px;
}
.partner-short-text{
	width: 60%;
	text-align: center;
	margin:8px auto 0;
	font-weight: 500;
	font-size:16px;
}
.lp-partner-wrap .partner-logo-slider{
	margin-bottom: 0;
	border-width: 0;
	margin-top:24px;
}
.lp-partner-wrap .partner-logo-slider .slick-next{
	right: -30px;
}
.lp-partner-wrap .partner-logo-slider .slick-prev{
	left: -30px;
}

.lp-joining-form{
	margin-top:32px;
	gap:16px;
}
.lp-joining-form .contact-me-form{
	background: #f5f5f5;
	padding:64px;
	border-radius: 12px;
}
.lp-joining-form .contact-me-form h1{
	background: transparent;
	text-align: left;
	color:#333;
	font-size:20px;
	font-weight: 700;
	padding:0;
}
.btn-form-join{
	margin-top:20px;
}

#lp-joining-form .methode-study-banner{
	margin:40px 0;
	color:#fff;
	font-size:20px;
	font-weight: 500;
	background-image: url("../images/contents/Follow up banner.png");
}
#lp-joining-form .methode-study-banner strong{
	font-weight: 700;
}
.whatsapp-floating-wrap{
	position:fixed;
	bottom:20vh;
	right:24px;
	z-index:1;
	display: none;
}
.whatsapp-floating-wrap.show{
	display: block;
}
.whatsapp-floating{
	display: flex;
	gap:8px;
}
.whatsapp-floating .whatsapp-title{
	border-radius: 8px;
	border: 1px solid #E5E7EB;
	font-size: 16px;
	font-weight: 600;
	background: #fff;
	padding:0 16px;
	color:#000;
	height: 40px;
	display: flex;
	align-items: center;
}
.joining-wrapper .slick-track {
	display: flex !important;
}

.joining-wrapper .slick-slide {
	height: inherit !important;
}

#main-banner-csr .container{
	position:relative;
}
.banner-text-csr{
	position: absolute;
	height: 100%;
	top:0;
	left:0;
	display: flex;
	padding:30px 0;
	align-items: flex-end;
}
.banner-text-csr-inside {
	display: flex;
	width: 600px;
	padding: 26px 24px;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	border-radius: 16px;
	background: rgba(10, 10, 10, .7);
	backdrop-filter: blur(1px);
	color:#fff;
	font-size:16px;
	margin-left:40px;
	gap:18px;
}
.banner-text-csr h4{
	font-size: 24px;
	font-weight: 700;
	color:#fff;
}
#education-challenge-wrap h5,
#csr-partner-wrap h5{
	font-weight: 700;
	width: 50%;
	margin:0 auto;
	text-align: center;
}

#education-challenge-wrap{
	background: #f5f5f5;
	padding:80px 0;
}

.tabbed-content {
	margin-top:40px;
}

.tabs ul {
	margin: 0;
	padding: 0 0 40px 0;
	font-weight: bold;
	display: flex;
}
.tabs ul li {
	background: #EDEDED;
	font-size: 16px;
	font-weight: 500;
	width: 100%;
	display: flex;
	align-items: center;
	border-bottom: 2px solid #E0E0E0;

}
.tabs ul li a {
	padding: 16px;
	color:#757575;
	height: 100%;
	
}
/*.tabs ul li a:hover, */.tabs ul li a.active {
	background: #fff;
	color:#000;
	border-color:#6F42C1;
}

.item {
	margin-bottom: 2px;
}
.item::before {
	cursor: pointer;
	font-weight: bold;
	background: #eee;
	padding: 0.5em;
	display: block;
}
.item.active::before {
	background: #444;
	color: #eee;
}
.item.active .item-content {
	-webkit-transition: opacity 0.3s ease-in-out;
	-moz-transition: opacity 0.3s ease-in-out;
	-o-transition: opacity 0.3s ease-in-out;
	-ms-transition: opacity 0.3s ease-in-out;
	transition: opacity 0.3s ease-in-out;
}
.tab-content-image{
	flex:0 0 540px;
}
@media all and (min-width: 800px) {
	.item.active .item-content {
		padding-top: 0;
	}

	.tabs-side .tabs li {
		margin-bottom: 2px;
	}
}
/* 
The project specific CSS starts here
This is the minimum CSS that you will need in order for this to work
*/
.tabbed-content .tabs {
	display: none;
}
.tabbed-content .item {
	min-height: 2em;
}
.tabbed-content .item::before {
	content: attr(data-title);
}
.tabbed-content .item .item-content {
	opacity: 0;
	visibility: hidden;
	height: 0;
	display: flex;
	align-items: center;
	gap:40px;
}
.tabbed-content .item.active .item-content {
	opacity: 1;
	visibility: visible;
	height: auto;
}
.close-whatsapp{
	display: none;
}

@media all and (min-width: 800px) {
	.tabbed-content .tabs {
		display: block;
	}
	.tabbed-content .tabs li {
		display: inline-block;
	}
	.tabbed-content .tabs li a {
		display: block;
	}
	.tabbed-content .item {
		min-height: 0;
	}
	.tabbed-content .item::before {
		display: none;
	}
	.tabbed-content.tabs-side .tabs {
		width: 150px;
		float: left;
	}
	.tabbed-content.tabs-side .tabs li {
		display: block;
	}
	.tabbed-content.tabs-side .item {
		margin-left: 150px;
	}
}
.tab-content-text,
.tab-content-text p{
	color:#616161;
	font-weight: 500;
	font-size: 16px;
}
.tab-content-text p{
	margin-bottom:12px;
}
.tab-content-text p strong{
	font-weight:700;
	font-size: 18px;
	color:#0A0A0A;
	text-transform: uppercase;
}

.lp-joining-form.new-csr .contact-me-form{
	padding: 50px;
}

#video-csr-list{
	padding-top:50px;
	padding-bottom:40px;
}
#video-csr-list h5{
	font-size: 20px;
	font-weight: 700;
	text-align: center;
	margin-bottom: 56px;
}
.video-csr-list{
	gap:24px;
	margin-bottom: 24px;
}
.video-csr-list .card-video-csr{
	width: 100%;
	flex:0 0 100%;
	border-radius:12px;
	overflow: hidden;
	border:1px solid #e7e7e7;
	margin:0 6px;
}
.video-csr-list .slick-track{

}
.yt-video-csr{
	width: 100%;
	aspect-ratio: 16 / 9;
}

#much-effect h5{
	font-size: 20px;
	font-weight: 700;
	text-align: center;
}

.big-effect-short-text{
	text-align: center;
	margin: 8px auto 0;
	font-weight: 500;
	font-size: 16px;
	width: 70%;
}

/*Wheel carousel*/


/* carousel styles */
.spinning-carousel {
	--carousel-height: 470px;
	--carousel-width: 1000px;
	--carousel-item-height: 170px;
	--carousel-item-width: 303px;
	position:relative;
	width: 100%;
}
.spinning-carousel{
	/*height:450px;*/

}

.carousel-container {
	align-items: center;
	display: flex;
	min-height: var(--carousel-height);
	margin: 0 auto;
	max-width: var(--carousel-width);
	position: relative;
	/*height:450px;*/
}

.carousel-item {
	height: var(--carousel-item-height);
	opacity: 0;
	position: absolute;
	transform: translateX(-50%);
	transition: all 0.3s ease-in-out;
	width: var(--carousel-item-width);
	z-index: 0;
	border-radius:12px;
	filter: brightness(50%);
}

.carousel-item-1 {
	left: 15%;
	opacity: 0.4;
}

.carousel-item-2,
.carousel-item-4 {
	height: calc(var(--carousel-item-height) * 1.5);
	opacity: 1;
	width: calc(var(--carousel-item-width) * 1.5);
	z-index: 1;
}

.carousel-item-2 {
	left: 30%;
}

.carousel-item-3 {
	box-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1);
	height: calc(var(--carousel-item-height) * 2);
	opacity: 1;
	left: 50%;
	width: calc(var(--carousel-item-width) * 2);
	z-index: 2;
	filter: brightness(100%);
}

.carousel-item-4 {
	left: 70%;
}

.carousel-item-5 {
	left: 85%;
	opacity: 0.4;
}

.carousel-controls {
	display: flex;
	justify-content: center;
	position: absolute;
	top: 45%;
	width: 100%;
	z-index: 99;
	gap:48vw;
}

/* carousel button styles */
.carousel-control {
	cursor: pointer;
	position: relative;
	transition: transform 0.5s ease-out;
	overflow: hidden;
	text-indent:-99999px;
	gap: 30vw;
}

.carousel-control:hover {
	transform: scale(1.3);
}

/* previous button */
/*.carousel-control-previous::after,
.carousel-control-previous::before {
	box-sizing: border-box;
	content: '';
	display: block;
	height: 8px;
	position: absolute;
	top: 5px
}
.carousel-control-previous::before {
	background: currentColor;
	border-radius: 2px;
	right: 11px;
	width: 2px;
}
.carousel-control-previous::after {
	border-bottom: 4px solid transparent;
	border-right: 5px solid;
	border-top: 4px solid transparent;
	right: 5px;
	width: 0;
}

!* next button *!
.carousel-control-next::after,
.carousel-control-next::before {
	box-sizing: border-box;
	content: "";
	display: block;
	height: 8px;
	position: absolute;
	top: 5px
}
.carousel-control-next::before {
	background: currentColor;
	border-radius: 2px;
	left: 11px;
	width: 2px;
}
.carousel-control-next::after {
	border-bottom: 4px solid transparent;
	border-left: 5px solid;
	border-top: 4px solid transparent;
	left: 5px;
	width: 0;
}

!* play button *!
.carousel-control-play::before {
	border-bottom: 5px solid transparent;
	border-left: 6px solid;
	border-top: 5px solid transparent;
	box-sizing: border-box;
	content: "";
	display: block;
	height: 10px;
	position: absolute;
	left: 7px;
	top: 4px;
	width: 0;
}*/
.carousel-control-play,
.carousel-control-add{
	display:none;
}

.carousel-control-prev{
	display: inline-block;
	width: 48px;
	height: 48px;
	padding:0;
	margin:0;
	background-color: transparent;
	background-size: contain;
	background-position: center;
	background-image: url("../images/assets/wheel-prev.png");
}
.carousel-control-next{
	display: inline-block;
	width: 48px;
	height: 48px;
	padding:0;
	margin:0;
	background-color: transparent;
	background-size: contain;
	background-position: center;
	background-image: url("../images/assets/wheel-next.png");
}
.contact-me-image{
	display: flex;
}
.mobile{
	display: none;
}
.swal2-loading.swal2-popup{
	width: auto;
}
.swal2-loading .swal2-content,
.swal2-loading .swal2-header{
	display: none;
}
.swal2-loading .swal2-loader,
.swal2-loading .swal2-actions{
	margin:0;
}
.swal2-loading .swal2-popup{
	padding:1em;
}
.swal2-loading .swal2-loader{
	border-color:#6F42C1 #1c1a1a00 #6F42C1 #6F42C1;
}



#unsub-page-wrapper{
	background:#F2F4F6;
	padding:60px 0;
}
.unsub-container{
	max-width: 800px;
	margin:0 auto;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap:40px;
}
.unsub-form{
	text-align: center;
}
.unsub-form h4{
	color:#EC221F;
	margin-bottom: 8px;
}
.unsub-form p{
	width: 80%;
	margin:0 auto;
	font-size:20px;
	color:#525252;
	font-weight:500;
}
#unsubscribe-form{
	margin-top:24px;
}
#unsubscribe-form input{
	text-align: center;
}
.btn-form-unsub{
	margin-top:12px;
}
.sosmed-card-wrap{
	border-radius: 16px;
	background: #E6E8EB;
	display: flex;
	padding: 24px 32px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-size:16px;
	font-weight: 500;
	gap:16px;
}
.sosmed-dark-icon{
	display: flex;
	justify-content: center;
	align-items: center;
	gap:20px;
}

.copyright-content{
	flex-direction: column;
	margin-left:auto;
	gap:24px;
}
.consumer-complaints{
	width: 420px;
	gap:8px;
	flex-direction:column;
}
.consumer-complaints strong{
	font-size:16px;
}
.consumer-wa{
	align-items: center;
}

#lp-main-banner .contact-me-form .form-control input{
	padding:12px 14px;
}
#lp-main-banner .contact-me-form .btn-form-join{
	margin-top:16px;
}
#lp-main-banner{
	padding-top:80px;
}
#lp header{
	position:fixed;
}
#main-banner-community{
	position:relative;
	display: flex;
	justify-content: center;
}
.main-banner-community-content{
	position: absolute;
	gap:24px;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}
.main-banner-community-content h4,
.main-banner-community-content h2{
	color:#fff;
}
#join-journey{
	font-weight: 500;
	text-align: center;
	font-size:16px;
	margin-top:60px;
}
.join-journey-slider{
	margin:30px 0;
}
.join-journey-slider .item{
	margin:0 10px;
}
#relation-competition{
	background: #f1f1f1;
	padding:40px 0;
	margin-top:80px;
}
.relation-competition-wrap{
	display: flex;
	flex-shrink: 0;
	align-items: center;
}
.relation-list{
	display: flex;
	flex-direction: column;
	gap:18px;
}
.relation-list-content{
	padding:16px;
	font-weight:500;
	border-radius: 16px;
	background: #D3D3D3;
	display: flex;
	flex-direction: column;
	gap:10px;
	font-size:16px;
}
#teacher-community{
	background: #f1f1f1;
	padding:60px 0;
}
.teacher-community-slider{
	margin-top:40px;
}
.teacher-community-slider .item{
	margin:0 12px;
	font-weight: 500;
	padding:24px 18px;
	height: 100%;
	border-radius: 18px;
	border: 1px solid #EAEAEA;
	background: #FFF;
	box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.05);
}
.teacher-community-slider .community-detail-name{
	display: flex;
	align-items: center;
	gap:20px;
	font-size:16px;
}
.teacher-community-slider .slick-track{
	display: flex;
}
.teacher-community-text{
	margin-bottom: 24px;
}

#relation-community{
	position:relative;
	background-color: #000;
}
#relation-community .bg-relation{
	opacity: .6;
}
.relation-community-content{
	position: absolute;
	top:0;
	left:0;
	width: 100%;
	height:100%;
	display: flex;
	align-items: center;
	color:#fff;
	font-size:16px;
	font-weight: 500;
}
.relation-community-content .container{
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap:18px;
}
.relation-community-content h3{
	color:#fff;
}

#banner-short{
	background: linear-gradient(90deg, #001F3F 0%, #61409C 100%);
	display: flex;
	align-items: center;
	height:194px;

}
#banner-short h2{
	color:#fff;
}

.contributor-content-col{
	display: flex;
	margin:80px 0;
	gap:40px;
}
.contributor-image,
.contributor-form-wrapper{
	flex:1;
}
.contributor-image img{
	border-radius: 10px;
}
.contributor-form-wrapper{
	font-weight: 500;
	font-size:16px;
	display: flex;
	flex-direction: column;
	gap:18px;
}
.contributor-form-wrapper .form-wrapper{
	display: flex;
	flex-direction: column;
	gap:20px;
}

/* Add new styles to override hover effect for dropdown menu items */
nav ul ul li a:hover {
	background-color: transparent;
	border-radius: 0;
}

#plane_lg {
	position: absolute;
	inset: 0;
	transform: rotate(-15deg);
	
	offset-path: url(#plane_path_lg);
	animation: offsetDistance linear forwards;
	animation-timeline: --airport;
	animation-range:
            exit-crossing -15% /* start animation just before beginning to exit */
            entry-crossing 115%; /* end animation just after fully entering */
  }
  
  @keyframes offsetDistance {
	  from { offset-distance: 0%; }
	  to { offset-distance: 100%; }
  }

  #airport {
	timeline-scope: --airport;
}

#plane_path_lg {
	view-timeline-name: --airport;
	/* or using the shorthand */
	view-timeline: --airport;
}

#plane_md {
	position: absolute;
	inset: 0;
	transform: rotate(-15deg);

	offset-path: url(#plane_path_md);
	animation: offsetDistance linear forwards;
	animation-timeline: --airport;
	animation-range:
			exit-crossing -15% /* start animation just before beginning to exit */
			entry-crossing 115%; /* end animation just after fully entering */
}

#plane_path_md {
	view-timeline-name: --airport;
	/* or using the shorthand */
	view-timeline: --airport;
}

.slider-testimonials .slick-list {
	padding: 30px 10px !important;
}
#slider-mobile-school .slick-list .slick-track .slick-slide{
	margin: 10px;
}

.font-grenze {
	font-family: 'Grenze Gotisch', serif;
}

.clip-diagonal-section {
	clip-path: polygon(0 5%, 100% 0, 100% 95%, 0% 100%);
}

.substract-circle{
	background: linear-gradient(180deg, #F6EDFF -39.67%, rgba(255, 255, 255, 0.8) 78.68%);
	box-shadow: 0px 20px 24px -4px #0A0D121A;
}

.swiper-pagination-bullet-active{
	background-color: #8E3EC9 !important;
	opacity: 1;
}

.swiper-pagination-bullet{
	background-color: #8E3EC9 !important;
	opacity: 0.2;
}