@media (max-width: 1366px) {
  .slick-next{
    right: 0;
  }
  .slick-prev{
    left: 0;
  }
}
@media (max-width: 1290px) {
  .container{
    width: 100%;
  }
  .video-laptop .video-content{
    aspect-ratio: 1.5 / 1;
  }
  .video-laptop .lite-content{
    aspect-ratio: 1.5 / 1;
  }
}
@media (max-width: 1279px) {
  .burgerbar{
    display: flex;
  }
  header nav:not(.language-dropdown){
    padding-top:24px;
    margin:0;
    position: absolute;
    top:-100vh;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100vh;
    background: #fff;
    border-top: 1px solid #EAEAEA;
    transition:top ease-in-out .4s;
  }
  nav:not(.language-dropdown) ul{
    width: 100%;
  }
  nav:not(.language-dropdown) ul li:not(.language-dropdown-item){
    display: block;
    padding:0;
    border-bottom: 1px solid #EAEAEA;
  }
  nav:not(.language-dropdown) ul li:not(.language-dropdown-item) a{
    display: block;
    padding:16px 12px;
  }
  nav:not(.language-dropdown) ul ul{
    position:relative;
    box-shadow: none;
    top:0;
  }
  nav:not(.language-dropdown) ul ul li:not(.language-dropdown-item){
    border:0;
    margin:0 12px;
  }
  nav:not(.language-dropdown) ul li:hover ul{
    padding:0;
  }
  nav:not(.language-dropdown) ul ul li:not(.language-dropdown-item) a{
    font-weight: 500;
    padding:0 12px 20px;
  }
  nav:not(.language-dropdown) ul li:not(.language-dropdown-item) .arrow-nav{
    float:right;
    margin-top:7px
  }
  .banner-text-inside p{
    padding:0 40px;
  }
}

@media (max-width: 900px) {
  h2{
    font-size: 28px;
  }
  h3{
    font-size:24px;
  }
  h4{
    font-size:18px;
  }
  .slick-prev, .slick-next{
    width: 25px;
    height: 25px;
  }
  .fun-category .fun-card{
    margin:0 8px;
    padding:12px 0;
  }
  .cs-number p, .newsletter-form p,
  .btn-global,
  .fun-category .fun-card strong {
    font-size: 14px;
  }
  #video-interactive {
    padding: 50px 0;
  }
  .video-laptop .video-content{
    width: 80%;
    aspect-ratio: 1.6 / 1;
  }
  .video-laptop .lite-content{
    width: 80%;
    aspect-ratio: 1.6 / 1;
  }
  .benefit-image{
    align-items: center;
    display: flex;
  }
  .article-slider .item a{
    display: block;
  }
  .article-slider .item img{
    width: 100%;
  }
  .contact-cs{
    padding:16px;
  }
  .cs-number{
    margin-left:14px;
  }
  .newsletter-form strong, .cs-number strong {
    font-size: 18px;
  }
  .newsletter-form {
    margin-left: 18px;
  }
  .footer-cs{
    padding-bottom: 0;
  }
  .form-newsletter input{
    padding:10px 20px;
  }
  .nav-bottom-wrap{
    flex-direction: column;
  }
  .lr-club {
    padding-right: 0;
    text-align: center;
    margin-bottom: 40px;
  }
  .lr-club p{
    width: 100%;
  }
  .nav-bottom-right{
    margin-left:0;
  }
  .banner-pad{
    padding:32px 0;
  }
  .advance-text,
  .vis-mis-card{
    width: 100%;
  }
  .achieve-card .achieve-number{
    font-size:32px;
  }
  .lr-achievement{
    padding: 14px 8px;
  }
  .product-company-slider .item{
    margin:0 6px;
  }
  .product-company-slider .item img {
    width: 80%;
  }
  .advance-wrap,
  .contact-me-wrap{
    flex-direction: column;
  }
  .contact-me-form{
    padding-left:0;
  }
  .contact-me-image img{
    width: 100%;
    margin-bottom: 16px;
  }
  .methode-student{
    padding:40px;
  }
  .blog-sorting a, .blog-sorting button{
    padding: 9px 14px;
    font-size:12px;
    margin:2px 1px;
  }
  .blog-desc-card{
    bottom: 20px;
    left:20px;
  }
  .blog-banner-slider .slick-prev {
    left: 50px;
    bottom: 22px;
  }
  .blog-banner-slider .slick-next{
    bottom: 22px;
    left: 100px;
  }
  #faq-page{
    padding: 50px 0 40px;
  }
  .lr-achievement-slider .slick-dots{
    margin-top:20px;
  }
  .product-company-slider {
    margin-top: 70px;
  }
  .nav-bottom {
    width: 100%;
  }
  .main-banner-community-content{
    text-align: center;
  }
  .relation-competition-wrap{
    flex-direction: column;
  }
  .relation-title{
    text-align: center;
  }
  #relation-community{
    overflow-x: hidden;
  }
  #relation-community .bg-relation{
    opacity: .4;
    height: 500px;
    max-width: 2750px;
    transform: translateX(-50%) translateY(0px);
  }
  
}

@media (max-width: 800px){
  .btn-cta-community a{
    width: 100%;
    margin:4px;
  }
  .container{
  }
  .welcome-csr-title{
    font-size:28px;
  }
  .benefit-item{
    padding: 8px 18px;
  }
  #csr-documentation .container{
    padding:0 18px;
  }
  .csr-video{
    gap:14px;
  }
  #much-effect,
  .grade-text,
  .csr-video .video-card:last-child{
    display: none;
  }
  .benefit-item-text{
    text-align: left;
  }
  .event-banner-inside{
    flex-direction: column-reverse;
  }
  #next-event{
    padding:30px 0 30px;
  }
  .promo-banner-text{
    flex-direction: column-reverse;
  }
  .event-box{
    padding:16px;
  }
  #event-detail-banner{
    margin-top:14px;
  }
  .event-detail-right{
    margin-top: 16px;
  }
  .event-banner-text{
    padding:10px;
    border-radius: 0;
  }
  .event-banner-text h4{
    font-size:14px;
    font-weight: 600;
  }
  .event-banner-img {
    margin: 0 24px;
  }
  .event-banner-text,
  .event-detail-right,
  .event-detail-text{
    width: 100%;
  }
  .event-content{
    flex-direction: column;
  }
  #our-advance .container{
    padding:0 2vw;
  }
  .product-h1{
    font-size: 26px;
  }
  h2{
    font-size: 24px;
  }
  h3{
    font-size:24px;
  }
  h4{
    font-size:16px;
  }
  /*.brand a{
    width: 85px;
  }*/
  .btn-global {
    padding: 8px 18px;
  }
  .slider-text{
    text-align: center;
    margin-top:24px;
    padding-right: 0px;
    padding-bottom: 55px;
  }
  .font-desc {
    font-size:16px;
  }
  .vis-mis-card p,
  .article-other-list .title-article,
  .blog-desc-card strong,
  .lr-club p,
  .advance-card p{
    font-size:14px;
  }
  .event-slider .event-card strong,
  .fun-category .fun-card strong {
    font-size: 18px;
  }
  #methode-study h3 {
    font-size:20px;
  }
  .bimtek-training-text h4{
    font-size:24px;
  }
  .blog-desc-card{
    font-size:12px;
  }
  #top-article .center,
  #study-can-fun .center{
    margin-top:40px;
  }
  .video-event-wrap .video-card{
    margin:0;
  }
  #study-can-fun,
  #portal-fituring .portal-teacher,
  #portal-fituring .portal-student,
  .thank-you-page,
  #portal-fituring h3,
  .bimtek-training-text,
  #methoding-study p,
  .advance-text,
  .literation-images,
  .banners .banner-images,
  .fun-category .item{
    padding:0;
  }
  .video-laptop .video-content{
    top:12px;
  }
  #methode-study,
  #teacher-benefit {
    padding: 50px 0;
  }
  .benefit-text{
    align-items: center;
    text-align: center;
    margin-bottom: 28px;
  }
  #methode-study h3 br{
    display: contents;
  }
  #top-article{
    padding-top:0;
  }
  .lets-join,
  .our-journey-wrap,
  .faq-category,
  #portal-fituring .flex,
  .article-other,
  .form-control,
  #teacher-benefit .container,
  .copyright-wrap .container,
  .nav-bottom-right,
  .footer-cs{
    flex-direction: column;
  }
  .bimtek-training,
  .contact-me-wrap,
  .banners,
  .literation-wrap,
  #home-slider .item{
    flex-direction: column;
  }
  .newsletter-form {
    margin-left: 0;
    margin-top:16px;
  }
  .banner-text-inside p{
    display: none;
  }
  .blog-banner-slider .slick-dots,
  .blog-desc-card strong,
  .they-says-slider .item,
  .fun-category .fun-card{
    margin:0;
  }
  .form-newsletter button{
    position:relative;
    width: 44px;
    height: 44px
  }
  .video-event-wrap .video-card:last-child,
  .form-newsletter button span{
    display: none;
  }
  .form-newsletter button:after{
    content: '>';
    color: #fff;
    font-weight: 700;
    font-size: 34px;
    position: absolute;
    top: 0;
    left: 12px;
    font-family: monospace;
  }
  .article-other,
  .nav-bottom-wrap{
    padding-top:0;
  }
  .lr-club{
    text-align: left;
    border-top: 1px solid #014489;
    border-bottom: 1px solid #014489;
    padding:14px 0 24px;
    margin-bottom: 12px;
  }
  .nav-bottom{
    border-bottom: 1px solid #014489;
    margin-bottom: 16px;
  }
  .nav-bottom:last-child{
    border:0;
    margin-bottom: 0;
  }
  .bimtek-training-text,
  .copyright-wrap .container{
    text-align: center;
  }
  .banners .banner-text{
    text-align: center;
    margin-top: 24px;
  }
  #event-archive,
  #latest-event,
  #portal-fituring,
  #bimtek-training,
  #interactive,
  #our-advance,
  #contact-me,
  #literation{
    padding:40px 0;
  }
  .literation-text,
  .literation-images{
    width: 100%;
    text-align: center;
  }
  .interactive-slider,
  .literation-text{
    margin-bottom: 24px;
  }
  .form-lead-generator .center .btn-global,
  .contact-me-form .btn-global,
  #try-free h4,
  .literation-text .btn-global{
    width: 100%;
  }
  .literation-text .btn-primary{
    margin-bottom: 8px;
  }
  #methoding-study,
  #advance{
    padding:8px 0 40px;
  }
  .advance-card{
    padding:20px 24px;
  }
  #interactive h3,
  #our-advance h3,
  .advance-text h3 {
    margin-bottom: 16px;
  }
  .advance-card img{
    width: 32px;
  }
  .methode-student{
    padding:20px;
  }
  .methode-student .logo-student{
    width: 120px;
  }
  .form-control textarea,
  .form-control input{
    margin:4px 0;
  }
  .contact-me-form .btn-global{
    margin-top:12px;
  }
  .contact-me-image img{
    margin-bottom: 0;
    margin-top:16px;
  }
  .contact-cs {
    border-radius: 16px;
  }
  .contact-cs img{
    width: 32px;
  }
  .promo-page{
    padding-top:0 !important;
  }
  #portal-fituring p span{
    display: block;
    padding:8px;
    font-size:18px;
  }
  #portal-fituring .portal-card h4{
    font-size:20px;
  }
  .methode-study-banner{
    padding:40px 6px;
  }
  .methode-card {
    flex-basis: calc(100% / 1);
    padding: 0px;
    margin-top: 16px;
  }
  .our-advance-card.teacher-page{
    padding:16px;
  }
  .our-advance-card.teacher-page strong{
    padding: 8px 0 0;
  }
  .newsletter-form strong, .cs-number strong{
    margin-bottom: 6px;
  }
  .next-event-slider .item,
  .event-slider .item,
  .comptence-slider .item,
  .our-advance-wrap .item{
    padding:0 6px;
  }
  #our-advance .slick-dotted.slick-slider{
    margin-bottom: 30px;
  }
  .bimtek-training-text{
    margin-bottom: 24px;
  }
  .blog-banner-slider{
    margin-left:-12px;
    margin-right: -12px;
  }
  .blog-desc-card{
    width: 100%;
    padding:12px 12px;
    bottom: 7px;
    left: 0;
    border-radius: 0;
  }
  .blog-desc-card p{
    display: none;
  }
  .blog-card{
    flex-basis: calc(100% / 1);
  }
  .blog-sorting{
    display: flex;
    flex-direction: row;
    overflow: auto hidden;
    scrollbar-width: none;
    align-items: center;
    margin-top: 60px;
  }
  .blog-sorting a, .blog-sorting button{
    white-space: nowrap;
  }
  .paging a{
    width: 30px;
    height: 30px;
  }
  .paging span{
    width: 30px;
    height: 30px;
  }
  .blog-left{
    flex:0 0 100%;
  }
  .blog-right{
    display: none;
  }
  .blog-text-strong{
    font-size: 16px;
  }
  .prev-article .article-text,
  .article-other{
    border:0;
  }
  .article-other-list a{
    border-radius: 12px;
    border: 1px solid #EAEAEA;
    padding:24px 16px;
  }
  .next-article{
    margin-top:16px;
  }
  .article-text {
    padding: 0 12px;
  }
  #top-lead-generator{
    padding-top:30px;
  }
  .promo-banner-text strong {
    font-weight: 600;
  }
  .form-lead-generator .center{
    margin-top:16px;
  }
  #they-says.promo-testi{
    padding-top:40px ;
  }
  .partner-logo-slider {
    margin-bottom: 54px;
  }
  .faq-category .faq-card{
    margin:8px 0;
  }
  .faq-card img{
    width: 84px;
  }
  .faq-card-name img{
    width: 16px;
    position: absolute;
    top:0;
    right: 0;
    transform:translateY(40px) translateX(-24px);
  }
  .breadcrumb-faq{
    font-size:12px;
  }
  .faq-category .faq-card{
    padding:16px;
    font-size: 14px;
  }
  .faq-card .faq-card-name{
    margin-top:10px;
  }
  .faq-question .faq-number{
    margin-bottom:auto;
  }
  .faq-list{
    padding:4px 12px;
  }
  .faq-list-wrap {
    margin-top: 0;
  }
  .faq-text{
  padding-right: 12px;    
  }
  .blog-desc p{
    margin-left:0 !important;
  }
  .follow-sosmed-card{
    width: fit-content;
  }
  .principe-card{
    padding: 40px 20px;
  }
  .our-journey-image{
    margin-top:24px;
  }
  .achieve-card:last-child:after{
    content: none;
  }
  #relation,
  #benefit,
  #competence{
    margin-top:16px;
    padding:30px 0 50px;
  }
  .lets-join-image{
    padding:30px 0;
  }
  .lets-join-text{
    text-align: center;
  }
  #competence h3{
    margin-bottom: 12px;
  }
  #relation h4{
    padding:0;
  }
  .welcome-csr-container {
    flex-direction: column-reverse;
    text-align: center;
  }
  .welcome-csr-text-wrapper {
    padding: 0;
  }
  .contact-me-section {
    padding: 0 !important;
    margin-bottom: 24px;
  }
  .csr-service-section {
    padding: 40px 0 !important;
    margin-bottom: 40px;
  }
  .contribution-section {
    padding: 0 !important;
    margin-bottom: 40px;
  }
  .csr-form {
    text-align: center;
    padding: 24px 0;
  }
  .item-container{
    margin: 16px;
    padding: 16px;
  }
  .service-slider-wrapper{
    margin-bottom: 16px;
  }
  #landing-page-header img{
    width: 160px;
  }
  .whatsapp-floating{
    right:8px;
    top: 70vh;
  }
  /*#lp-joining-form,*/
  #lp-content-joining,
  #lp-effective-studying,
  #lp-content-school,
  #lp-content-effective .container{
    padding:40px 0;
  }
  #lp-content-effective .container{
    padding-left:12px;
    padding-right:12px;
  }
  .desktop{
    display: none;
  }
  .mobile{
    display: inline-block;
  }
  .bg-laptop-video {
    flex: 0 0 100%;
  }
  .content-school,
  #lp-content-effective .container{
    flex-direction: column;
    align-items:center;
  }
  .effective-text p {
    text-align: center;
  }
  .effective-text{
    align-items: center;
  }
  .effective-text h4{
    font-size: 18px;
    text-align: center;
    line-height: normal;
  }
  .effective-img-wrap{
    justify-content: center;
    gap: 16px;
  }
  .effective-img-wrap .img-thumb{
    flex: 0 0 100%;
  }
  .partner-short-text{
    width: 100%;
  }
  .banner-text-csr{
    justify-content: center;
  }
  #main-banner-csr .container{
    padding:0;
  }
  .banner-text-csr-inside{
    width: 90%;
    margin-left:unset;
    padding: 12px;
    gap:10px;
  }
  .banner-text-csr-inside img{
    width: 81px;
  }
  .banner-text-csr h4{
    font-size:18px;
  }
  #csr-partner-wrap .lp-partner-wrap{
    margin-top:40px;
  }
  #education-challenge-wrap h5, #csr-partner-wrap h5{
    width: 100%;
    font-size:18px;
  }
  .tab-content-image{
    flex: 0 0 100%;
  }
  .tabbed-content .item .item-content{
    flex-direction: column;
  }
  .tabbed-content .item::before{
    border-radius: 8px;
    border: 2px solid #E0E0E0;
    padding:16px 46px 16px 16px;
    font-size:16px;
    font-weight: 600;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center right 14px;
    background-image: url("../images/assets/arr-down-circle.png");
  }
  .tabbed-content .item{
    margin-bottom: 12px;
  }
  .item.active::before{
    color:#333;
    border-radius: 8px 8px 0 0;
    border-bottom: 2px solid #6F42C1;
    background-image: url("../images/assets/arr-up-circle.png");
  }

  .tabbed-content .item .item-content{
    padding:0 16px;
    gap: 20px;
    border: 2px solid #E0E0E0;
    border-top:0;
  }
  .tabbed-content .item.active .item-content{
    padding-top:12px;
    background: #fff;
  }
  #education-challenge-wrap{
    padding-bottom: 40px;
  }
  .video-csr-list .slick-dots{
    margin-top:0;
  }
  #video-csr-list{
    padding-top:20px;
  }
  #video-csr-list h5{
    margin-bottom: 26px;
  }
  .lp-joining-form.new-csr .contact-me-form{
    padding:16px;
  }
  .whatsapp-floating .whatsapp-title{
    padding: 0 8px;
  }
  .whatsapp-floating{
    align-items: flex-end;
    gap:8px;
    flex-direction: column-reverse;
  }
  .close-whatsapp{
    display:block;
    position: absolute;
    right: 36px;
    top: -10px;
    width: 16px;
    background: #fff;
    border-radius: 50%;
  }
  .contact-me-form{
    width: 100%;
  }
  .contact-me-form .btn-form-join .btn-global,
  .btn-form-join{
    margin-top:0;
  }
  #try-free h4, #try-free h3{
    width: 100%;
  }
  .unsub-form p{
    width: 100%;
    font-size:14px;
  }
  .sosmed-card-wrap{
    padding: 24px 18px;
    width: 100%;
    font-size:14px;
    text-align: center;
  }
  .unsub-container{
    gap: 26px;
  }
  .consumer-complaints{
    width: 100%;
    text-align: left;
  }
  .copyright-content{
    margin-left:0;
    text-align: left;
    gap:12px;
  }
  .copyright-wrap .container{
    gap:34px;
  }
  #lp-main-banner{
    padding-top:210px;
    padding-bottom: 40px;
  }
  #lp-main-banner .contact-me-form{
    width: 100%;
    margin:0;
  }
  #lp-main-banner .contact-me-form h1{
    text-align: left;
  }
  #lp-main-banner .contact-me-form .form-control input{
    margin:0;
  }
  #lp-main-banner .contact-me-form .btn-form-join {
    margin-top: 8px;
  }
  .slider-text .btn-global{
    margin:0 auto;
  }
  .training-content-wrapper {
    flex-direction: column;
  }
  .training-content-left,
  .training-content-right {
    width: 100%;
  }
  .training-navigation {
    overflow-x: scroll;
  }
  .training-testimoni-wrap {
    gap: 16px;
    grid-template-columns: repeat(1, 1fr);
  }
  .training-content {
    margin-top: 1rem;
  }
  .modal {
    padding: 16px 8px;
  }
  .modal-content {
    padding: unset;
  }
}

@media (max-width: 767px) {
  .language-dropdown {
    display: none;
  }
  header{
    height: 64px;
  }
  header nav:not(.language-dropdown).open{
    top: 64px;
  }
}

@media (max-width: 480px) {
  
  #join-journey{
    margin-top: 30px;
  }
  .faq-card:first-child .img-logo-lr img{
    width: 70px;
  }
  .faq-card:first-child .img-logo-lr{
    height: 38px;
  }
  .effective-text-card{
    font-size: 12px;
    gap:0;
  }
  .nav-bottom-right{
    gap: 0;
  }
  .nav-bottom-wrap{
    padding-bottom: 14px;
  }
  #landing-page-header .brand img{
    width: 160px;
  }
  .effective-text-card strong{
    font-size: 14px;
  }
  .lp-partner-wrap {
    margin-top: 94px;
  }
  #lp-joining-form h5, #lp-content-joining h5, #lp-effective-studying h5{
    font-size:18px;
  }
  .lp-joining-form .contact-me-form{
    padding:16px;
  }
  .lp-joining-form{
    margin-top: 14px;
  }
  .lp-joining-form .contact-me-image{
    display: none;
  }
  #lp-joining-form .methode-study-banner{
    margin-top: 40px;
    font-size: 16px;
  }
  .csr-banner img{
    width: 100%;
  }
}