.nav-header {
    height: 80px;
    z-index: 9999;
    background-color: #fff;
}
.navbar-nav {
    margin-right: 20px;
    gap: 10px;
    font-size: 18px;
    font-weight: 400;
    font-family: 'Poppins', sans-serif;
}
.logo-img {
    width: 150px;
    /* height: 0px; */
}
.btn-login {
    border-radius: 50px;
    background-color: #4b3d88;
    color: #fff;
    border: none;
    font-weight: 700;
    width: 100px;
    height: 45px;
    padding: 10px;
}
.btn-login:hover {
    border: 1px solid #4b3d88;
    background-color: #fff;
    color: #4b3d88;
}
.slider-banner {
    width: 100%;
    height: 464px;
}
.btn-daftar-banner {
    margin-right: 760px;
    margin-top: -100px;
    box-shadow:0 1px 10px 0 rgb(255 255 255 / 10%), 0 1px 10px 0 rgb(255 255 255 / 50%);
    height: 60px;
    font-weight: 600;
    width: 180px;
    padding: 16px;
}
.text-banner-1 {
    margin-right: 590px; 
    font-size: 52px;
    font-family: 'Poppins', sans-serif;
}
.text-banner-2 {
    margin-right: 560px; 
    font-size: 52px; 
    margin-bottom: 100px;
    font-family: 'Poppins', sans-serif;
}

.carousel-item {
    width: 100%;
    position: relative;
}

/* responsive carousel */
@media (min-width: 768px) {
    .carousel-item {
        position: relative;
    }
    .carousel-item img{
      width: 100%;
    }
  }
  
  /* CSS untuk mengatur carousel dengan lebar yang berbeda di perangkat mobile (lebar layar kurang dari 768px) */
  @media (max-width: 767px) {
    .carousel-item {
        width: 200px;
    }
    .carousel-item img{
      /* max-width: 100%; Atur lebar sesuai keinginan Anda */
      /* max-width: 100px; */
      height: auto;
      background-size: cover;
      background-repeat: no-repeat;
      height: 480px;
      margin-left: -523px;
    }
    .area-text {
        margin: 0px 70px 310px;
    }
    .area-text,
    .text-banner-1,
    .text-banner-2{
        font-size: 27px;
        width: 195px;
    }
    .btn-daftar-banner {
        margin-top: -560px;
        margin-left: 93px;
        font-size: 12px;
        width: 150px;
        height: 40px;
        padding: 10px;
    }
    .heading-about {
        font-size: 32px;
        margin-top: -30px;
    }
    .deskripsi-about {
        font-size: 13px;
    }
    .btn-about {
        width: 25px;
    }
    .area-youtube {
        width: 180px!important;
        margin-top: -70px!important;
        height: 170px!important;
    }
    .cover-youtube {
        width: 250px!important;
        height: 150px!important;
        margin-left: 30px!important;
        margin-top: -200px!important;
    }
    .btn-play {
        margin-top: -110px!important;
        margin-left: -160px!important;
    }
    .modal-content {
        background-color: transparent;
        margin-top: 500px;
        margin-left: 35px;
        border: none;
    }
    .frame-youtube {
        width: 300px;
        height: 200px;
    }
    .materi {
        margin-top: -5px!important;
    }
    .card-materi {
        margin-bottom: 25px;
        margin-left: 55px;
    }
    .heading-materi {
        font-size: 22px!important;
    }
    .deskripsi-materi {
        font-size: 12px!important;
    }
    .btn-view-all {
        margin-top: 1180px;
        position: absolute;
        margin-left: 100px;
    }
    .kanan-achievement {
        display: none;
    }
    .icon-achievement {
        margin-top: -5px!important;
        width: 115px;
        margin-left: 45px;
    }
    .icon-achievement .ket-instructur {
        font-size: 20px!important;
        margin-right: 38px!important;
    }
    .icon-achievement .head-instructur {
        margin-right: 32px!important;
        font-size: 14px!important;
        margin-top: -10px!important;
    }
    .icon-achievement .ket-siswa {
        font-size: 20px!important;
        margin-right: 38px!important;
    }
    .icon-achievement .head-siswa {
        margin-right: 8px!important;
        font-size: 14px!important;
        margin-top: -10px!important;
        /* background: red; */
        width: 90px;
    }
    .icon-achievement .ket-video {
        font-size: 20px!important;
        margin-right: 28px!important;
    }
    .icon-achievement .head-video {
        margin-right: 23px!important;
        font-size: 14px!important;
        margin-top: -10px!important;
    }
    .icon-achievement .ket-users {
        font-size: 20px!important;
        margin-right: 45px!important;
    }
    .icon-achievement .head-users {
        margin-right: 18px!important;
        font-size: 14px!important;
        margin-top: -10px!important;
    }
    .icon-achievement .skills-img {
        width: 60px!important;
    }
    .testimonials {
        height: 380px!important;
    }
    .card-testi {
        width: 350px!important;
        margin: 20px;
    }
    .card-testi .nama-testi {
        margin-right: 170px!important;
    }
    .frame-join {
        display: none;
    }
    .img-join {
        margin-top: 1px!important;
    }
    .heading-gabung {
        font-size: 22px!important;
        margin-top: 15px!important;    
    }
    .deskripsi-gabung {
        font-size: 12px;
        margin-bottom: 1px;
    }
    .btn-daftar-gabung {
        width: 120px!important;
        height: 45px!important;
        font-size: 16px!important;
    }
    .section-list-footer {
        /* margin-bottom: 30px; */
        width: 170px;
        margin-left: 9px;
    }
    .list-footer-2 {
        margin-left: 20px;
    }
    .list-footer-4 {
        margin-left: 20px;
    }
    .logo-footer {
        width: 200px;
    }
    .navbar-collapse {
        background-color: #6176F7;
    }
    .navbar-collapse .nav-link {
        color: #fff !important;
        float: right;
    }
    .navbar-collapse .btn-login {
        margin-left: 240px;
    }
    .heading-baner {
        font-size: 37px!important;
    }
    .list-icon {
        margin-right: -32px!important;
    }
    .icon-jumb {
        width: 50px;
    }
    .ket-icon {
        font-size: 13px!important;
    }
    .hero-jumb {
        display: none;
    }
    .hero-about {
        width: 400px;
    }
    .about {
        height: 600px!important;
    }
    .navbar-brand {
        width: 100px;
    }
    .heading-platform {
        font-size: 30px!important;
    }
    .deskripsi-platform {
        font-size: 14px!important;
    }
    .support {
        margin-bottom: -100px!important;
    }
    .kiri-achievement {
        margin-top: 50px;
    }
}


  /* support */
  .support {
    margin-top: 30px;
    margin-bottom: -25px;
  }

.kotak {
    height: 130px;
    margin-top: -10px;
    margin-bottom: 150px;
}
.head-mitra {
    font-size: 35px;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    text-align: center;
    margin-bottom: 30px;
    margin-top: -70px;
}

/* jumbotron */
.heading-baner {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    margin-bottom: 20px;
    font-size: 3.1em;
}

.list-icon {
    float: right;
    display: flex;
    margin-right: 150px;
}
.list-icon .ket-icon {
    font-weight: 400!important;
    color: #000!important;
    font-size: 14px;
    font-family: 'Poppins', sans-serif;
    margin-top: 0px;
}

/* about */
.about {
    background-color: #F6F6FC;
    height: 400px;
    margin-bottom: 100px;
}
.kiri-about {
    margin-top: 20px;
}
.kanan-about {
    margin-top: 50px;
}
.heading-about {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    margin-bottom: 20px;
}
.deskripsi-about {
    font-weight: 400;
    margin-bottom: 50px;
}
.btn-about {
    width: 150px;
    font-weight: 600;
    border-radius: 10px;
    height: 50px;
    padding: 10px;
    font-size: 18px
}
.btn-about:hover {
    border: 1px solid #007bff;
    background-color: #fff;
    color: #000;
}
/* .kanan-about {
    background-color: red;
} */
.kanan-about .area-youtube {
    background-color: #6EC1E4;
    width: 400px;
    height: 280px;
    margin: 1px 150px 0px;
    border-radius: 15px;
}
.cover-youtube {
    width: 400px;
    height: 250px;
    /* position: relative; */
    border-radius: 10px;
    margin-top: -310px;
    margin-left: 70px;
    box-shadow:0 1px 10px 0 rgb(255 255 255 / 10%), 0 1px 10px 0 rgb(0 0 0 / 50%);
}
.btn-play {
    margin-top: -180px;
    margin-left: -230px;
    position: absolute;
    width: 80px;
    height: 50px;
    box-shadow:0 1px 10px 0 rgb(255 255 255 / 10%), 0 1px 10px 0 rgb(255 255 255 / 50%);
}

/* materi */
.materi {
    margin-top: 70px;
    margin-bottom: 150px;
}
.heading-materi {
    font-size: 32px;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    margin-top: -60px;
}
.heading-materi span {
    color: #7F56D9;
}
.deskripsi-materi {
    font-size: 16px;
    font-weight: 300;
}
.btn-view-all {
    float: right;
}
.card-materi {
    width: 250px!important;
    height: 350px;
    border-radius: 15px;
}
.card-materi .img-materi {
    border-radius: 15px 15px 0px 0px;
    width: 30%!important;
    margin: 20px 85px;
}
.title-materi {
    font-size: 18px;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    margin-bottom: 70px;
    text-align: center;
}
.card-text {
    font-size: 14px;
    font-weight: 300;
    font-family: 'Poppins', sans-serif;
    margin-top: -50px;
    /* margin-bottom: -5px; */
}
.harga-materi {
    font-size: 24px;
    font-weight: 500;
    color: #7F56D9;
}
.btn-arrow-materi {
    border-radius: 50px;
    float: right;
    margin-top: -55px;
}

/* achievement */
.achievement {
    margin-bottom: 50px;
}
.icon-achievement {
    margin-top: 25px;
    margin-bottom: 30px;
}
.kiri-achievement {
    margin-top: 60px;
    /* margin-left: 100px; */
}
.kanan-achievement img {
    margin-top: 0px;
    width: 100%;
}
.icon-achievement .ket-instructur {
    font-size: 26px;
    font-weight: 700;
    float: right;
    margin-right: 40px;
}
.icon-achievement .head-instructur {
    margin: -30px 29px;
    float: right;
    font-weight: 300;
}
.icon-achievement .ket-siswa {
    font-size: 26px;
    font-weight: 700;
    float: right;
    margin-right: 40px;
}
.icon-achievement .head-siswa {
    margin: -30px -10px;
    float: right;
    font-weight: 300;
}
.icon-achievement .ket-video {
    font-size: 26px;
    font-weight: 700;
    float: right;
    margin-right: 5px;
}
.icon-achievement .head-video {
    float: right;
    font-weight: 300;
    margin: -30px 7px;
}
.icon-achievement .ket-users {
    font-size: 26px;
    font-weight: 700;
    float: right;
    margin-right: 55px;
}
.icon-achievement .head-users {
    float: right;
    font-weight: 300;
    margin: -30px -3px;
}
.icon-achievement .skills-img {
    width: 40%;
}


/* testimonials */
.platform {
    background-color: #F6F6FC;
    margin-bottom: 100px;
    height: 550px;
}
.testi {
    margin-top: 50px;
}
.heading-platform {
    font-size: 35px;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    text-align: center;
}
.heading-platform span {
    color: #7F56D9;
}
.deskripsi-platform {
    font-size: 16px;
    font-weight: 300;
    text-align: center;
    margin-bottom: 30px;
}
    
.card-testi {
    border-radius: 15px;
}
.card-testi .img-testi {
    width: 50px!important;
}
.card-testi .nama-testi {
    float: right;
    margin-top: -40px;
    margin-right: 190px;
}
.card-testi .komentar-testi {
    color: #adadb5;
    font-weight: 300;
    margin-top: 15px;
}

/* gabung */
.gabung {
    margin-bottom: 100px;
}
.img-join {
    z-index: 1000;
    margin-top: -270px;
    width: 480px;
    /* margin-left: 10px; */
}
.heading-gabung {
    font-family: 'Montserrat', sans-serif;
    font-size: 36px;
    font-weight: 600;
    margin-top: 80px;
}
.heading-gabung span {
    color: #7F56D9;
}
.deskripsi-gabung {
    font-size: 16px;
    font-weight: 300;
}
.btn-daftar-gabung {
    box-shadow: 0 1px 10px 0 rgb(255 255 255 / 10%), 0 1px 10px 0 rgb(0 0 0 / 50%);
    font-weight: 600;
    width: 150px;
    margin-top: 20px;
    height: 50px;
    padding: 9px;
    font-size: 21px;
}

.area-gabung {
    background-color: #4b3d88;
    width: 100%;
    height: 200px;
    border-radius: 20px;
}
.heading-mentor {
    color: #fff;
    margin: -60px 320px;
    font-family: 'Poppins', sans-serif;
    margin-bottom: 15px;
}
.deskripsi-mentor {
    color: #fff;
    margin-left: 450px;
}

/* footer */
.logo-footer {
    width: 150px;
    margin-top: -60px;
}
.container-fluid {
    background-color: #F6F6FC;
}
.list-footer li{
    color: #4b3d88;
    margin-bottom: 5px;
}
.list-footer-2 li{
    color: #4b3d88;
    margin-bottom: 5px;
}
.list-footer-4 li{
    color: #4b3d88;
    margin-bottom: 5px;
}