@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;900&display=swap');

:root {
    --color-primary: rgb(128, 128, 128);
    --blue: #1E186B;
    --font-family: 'Poppins', sans-serif;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: #1E186B;
    font-family: 'Poppins', sans-serif;
    text-decoration: none;
    transition: .2s linear;
    overflow-x: hidden;
    /* TODO: usahakan jangan pakai ini */
}

h1,
h2,
h3,
p {
    font-family: 'Poppins', serif;
}


/* Header Style */

.navbar {
    background: transparent;
    display: flex;
    z-index: 1000;
    border-bottom: 1px solid #C4C4C4;
}

.navbar-nav .nav-link.active,
.tablinks.active {
    border-bottom: 2px solid #FFB800;
    text-decoration: none;
    font-weight: bold;
    color: #000;
}

.shadow {
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.digital-logo {
    position: absolute;
    right: -20px;
    bottom: 0px;
    width: 90px !important;
    height: auto !important;
    transform: rotate(18deg);
}

.navbar-nav .nav-link,
.tablinks {
    color: #5a626f;
    text-decoration: none;
    font-weight: 600;
    padding-bottom: 2px !important;
}

.tablinks {
    font-size: 16px !important;
    color: #5a626f;
    border: none;
    background-color: transparent !important;
}

.navbar ul li:hover .dropdown {
    display: block;
    background: #fff;
    padding: 10px;
    position: absolute;
}

.navbar ul li:hover .dropdown li {
    display: block;
    margin-bottom: 16px;
}

.navbar ul li:hover .dropdown li a {
    text-decoration: none;
}

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

.img-nav {
    height: 40px;
}

.nav-item a {
    color: rgba(0, 0, 0, 0.70);
}

.nav-item a:hover {
    /* color: #0066FF; */
    border-bottom: 2px solid #FFB800;
    color: #000;
}

.dropdown-menu>li:hover>a {
    border-bottom: 3px solid #FFB800;
    font-weight: 600;
}

.dropdown-menu>li>a {
    padding: 10px 20px;
}

.accordion-button:not(.collapsed) {
    color: white !important;
    background-color: #FFB800 !important;
    border-radius: 8px !important;

}

.dropdown-menu {
    padding: 0 !important;
}

.breadcrumb-item>a {
    font-family: 'Poppins', sans-serif;
    color: #000000 !important;
    text-decoration: none !important;
}

.breadcrumb-item.active>a {
    font-weight: 700 !important;
}

.nav-link {
    font-size: 16px;
    color: #5a626f;
}

.child-sidebar {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    color: #5a626f;
}

.child-sidebar.active {
    font-weight: 600;
    color: #000;
    border-bottom: 2px solid #FFB800;
}

.button-lms {
    width: 130px;
    height: 40px;
    background-color: transparent;
    color: #0066FF;
    border-radius: 8px;
    font-size: 16px;
    padding: 5px 20px;
    border: 1px solid #0066FF;
    transition: all 0.3s ease 0s;
}

.button-home {
    width: 130px;
    height: 40px;
    background-color: transparent;
    color: #0066FF;
    border-radius: 8px;
    font-size: 16px;
    padding: 5px 20px;
    border: 1px solid #0066FF;
    transition: all 0.3s ease 0s;
}

/* Bread Crumbs */
/*.breadcrumb {*/
/*    margin-top: 30px;*/
/*    margin-left: 10px;*/
/*}*/

/* Button Style */

.button-primary {
    background-color: #0066FF;
    color: #000;
    border-radius: 8px;
    font-size: 16px;
    padding: 5px 20px;
    border: 1px solid #0066FF;
    transition: all 0.3s ease 0s;
}

.button-biru-maxy {
    background-color: #1E186B;
    font-size: 16px;
    padding: 5px 20px;
    border: 1px solid #1E186B;
    transition: all 0.3s ease 0s;
    color: #fff;
    border-radius: 8px;
}

.button-primary-c {
    background-color: #0066FF;
    color: #fff;
    border-radius: 8px;
    font-size: 16px;
    padding: 5px 20px;
    border: 1px solid #0066FF;
    transition: all 0.3s ease 0s;
    font-weight: 600;

}

.button-language {
    background-color: #6c757d;
    color: #000;
    border-radius: 8px;
    font-size: 16px;
    padding: 8px 20px;
    /* border: 1px solid #FFB800; */
    transition: all 0.3s ease 0s;
}

/* PACKAGE COURSE */
button.btn-package {
    background-color: #fff;
    color: #000;
    border-radius: 20px;
    font-size: 16px;
    padding: 5px 20px;
    border: 1px solid #000;
    transition: all 0.3s ease 0s;
}

button.btn-package:hover {
    background-color: #F5F5F5;
}

button.btn-package.active {
    background-color: #FFB800;
    color: #000;
    border-radius: 20px;
    font-size: 16px;
    padding: 5px 20px;
    border: 1px solid #FFB800;
    transition: all 0.3s ease 0s;
}

/* end */

button.btn-partner {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    border-radius: 10px;
    padding: 4px 16px 4px 16px;
    background-color: #fff;
    border: none;
}

button.btn-partner:hover {
    background-color: #F5F5F5;
}

button.btn-partner.active {
    background-color: #F5F5F5;
}

button.button-primary-c:hover {
    background-color: #fff;
    color: #0066FF;
    border-radius: 8px;
    font-size: 16px;
    padding: 5px 20px;
    border: 1px solid #0066FF;
    transition: all 0.3s ease 0s;
}

.button-primary-cc {
    width: 203px;
    height: 88px;
    background-color: #0066FF;
    color: #fff;
    border-radius: 8px;
    font-size: 16px;
    border: 1px solid #0066FF;
    transition: all 0.3s ease 0s;
}

.button-regist {
    background-color: #FFB800;
    color: #000;
    border-radius: 8px;
    font-size: 16px;
    border: 1px solid #FFB800;
    transition: all 0.3s ease 0s;
    position: absolute;
    width: 296px;
    height: 40px;
    align-content: center;
}

.daftar-btn button:hover {
    color: #fff;
}

.button-secondary {
    background-color: #fff;
    color: #000;
    border-radius: 8px;
    font-size: 16px;
    padding: 5px 20px;
    border: 1px solid #000;
    transition: all 0.3s ease 0s;
    font-weight: 600;

}

button.button-secondary:hover {
    background-color: #FFB800;
    color: #000;
    border-radius: 8px;
    font-size: 16px;
    padding: 5px 20px;
    border: 1px solid #FFB800;
    transition: all 0.3s ease 0s;
}

button.button-bootcamp {
    background-color: transparent;
    color: #fff;
    border-radius: 50px;
    font-size: 16px;
    padding: 5px 20px;
    border: 1px solid #fff;
    transition: all 0.3s ease 0s;
}

.button-secondary-c {
    background-color: #FFB800;
    color: #fff;
    border-radius: 8px;
    font-size: 16px;
    padding: 5px 20px;
    border: 1px solid #FFB800;
    transition: all 0.3s ease 0s;
    font-weight: 600;

}

button.button-secondary-c:hover {
    background-color: #fff;
    color: #FFB800;
    border-radius: 8px;
    font-size: 16px;
    padding: 5px 20px;
    border: 1px solid #FFB800;
    transition: all 0.3s ease 0s;
}

.button-tertiary {
    width: 164px;
    height: 60px;
    background-color: #0066FF;
    color: #fff;
    border-radius: 8px;
    font-size: 16px;
    padding: 5px 20px;
    border: 1px solid #0066FF;
    transition: all 0.3s ease 0s;
}

.button-tertiary-c {
    width: 164px;
    height: 60px;
    background-color: transparent;
    color: #0066FF;
    border-radius: 8px;
    font-size: 16px;
    padding: 5px 20px;
    border: 1px solid #0066FF;
    transition: all 0.3s ease 0s;
}

.button-addition {
    background: #FFFFFF;
    border: 1px solid #000000;
    border-radius: 25px;
    color: #000;
    font-size: 16px;
    padding: 5px 20px;
    transition: all 0.3s ease 0s;
    width: 173px;
    height: 42px;
}


/* Home Section */

.home {
    align-items: center;
    /* background: url(../img/bgBanner.jpg) no-repeat; */
    /* background-color: #C4C4C4; */
    background-size: cover;
    background-position: center;
}

.home .img-ellipse {
    position: absolute;
    z-index: -2;
    top: -10%;
    left: 55.7%;
}

.home-tagline h3 {
    font-family: 'Poppins', sans-serif;
    text-align: start;
    color: #414141;
    font-weight: 500;
    font-size: 48px;
    line-height: 60px;
}

.home-tagline p {
    font-family: 'Poppins';
    margin-top: 24px;
    margin-bottom: 56px;
    font-weight: 400;
    font-size: 16px;
    color: #686868;
    line-height: 24px;
}

.home .banner-home img {
    max-width: 100%;
    height: auto;
}


/* .total{
    height: 100vh;
} */

.total h3 {
    font-family: 'Poppins';
    z-index: 2;
    font-weight: 600;
    font-size: 48px;
    line-height: 72px;
    color: #0066FF;
    text-align: center;
}

.total p {
    font-family: 'Poppins';
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
    color: #686868;
}

.total .icon {
    position: relative;
    padding-left: 20px;
    /* Sesuaikan dengan lebar ikon */
}

.total .icon img {
    position: absolute;
    left: -20px;
    top: -32px;
}

/* PARTNER PAGE */
.partners .card.banner {
    /* height: auto; */
}

.partners .img-partners-banner img {
    max-width: 100%;
}

.partners .card.first {
    width: 100%;
    height: 255px;
    border: none;
    background: linear-gradient(294deg, #06F 0%, rgba(0, 102, 255, 0.69) 49.13%, rgba(0, 102, 255, 0.00) 100%);
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
}

.partners .card.first h3 {
    color: #fff;
    text-align: center;
    font-size: 24px;
    font-weight: 700;
}

.partners .card.first p {
    color: #fff;
    text-align: center;
    font-size: 20px;
    font-weight: 400;
}

.partners .card {
    cursor: pointer;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 255px;
    background-color: #fff;
    margin: 0;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
    border-radius: 15px;
}

.partners .part-name {
    color: #000;
    padding: 10px 10px;
    text-align: center;
    font-size: 18px;
    font-weight: 500;
    height: 80px;
}

.partners .tab {
    justify-content: center;
    display: flex;
    align-items: center;
}

.partners .pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 40px;
    gap: 10px;
}

.partners .pagination a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    text-decoration: none;
    color: #333;
    border: 1px solid #ddd;
    border-radius: 4px;
    transition: background-color 0.3s;
}

.partners .img-card {
    justify-content: center;
    align-items: center;
    min-width: 200px;
    width: 100%;
    min-height: 150px;
    overflow: hidden;
    padding: 15px;
}

.partners .img-card img {
    max-width: 100%;
    object-fit: contain;
    width: 100%;
    max-height: 150px;
    height: 100%;
}

.partners .pagination a.active {
    background-color: #555;
    color: #fff;
    border-color: #555;
}

.partners .pagination a:hover:not(.active) {
    background-color: #f4f4f4;
}

.partners .tabcontent {
    display: none;
}

.partners .tabcontent.active {
    display: block;
}


/* Partner Section */

#partner .container {
    padding-top: 16px;
}

#partner {
    height: auto;
    width: 100%;
}

.partner h3 {
    padding-top: 1.5rem;
    font-family: 'Poppins';
    font-weight: 600;
    font-size: 28px;
    line-height: 42px;
    text-align: center;
}

/* .partner .img-ellipse-partner{
    position: absolute;
    z-index: -2;
    top: 65.5%;
    left: 40.6%;
} */
.partner p {
    font-family: 'Poppins';
    margin-top: 28px;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
}

.partner .item.box {
    margin: auto;
    width: 200px;
    height: 130px;
}

.partner .uni .item.box {
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: auto;
}

.partner .item.box img {
    margin: auto;
    max-width: fit-content;
}

.partner .btn-carrer {
    display: flex;
    justify-content: center;
    align-items: center;
}


/* Program Section */


#program {
    overflow: hidden;
    margin-top: 100px;
    padding-bottom: 450px;
}

/* #program {
    margin-bottom: 100px;
} */

.program .our-program {
    margin-top: 0;
    font-size: 20px;
    line-height: 42px;
    font-weight: 600;
}

.program-tagline {
    font-family: 'Poppins';
    margin-top: 32px;
    font-size: 28px;
    line-height: 42px;
    text-align: center;
    font-weight: 600;
}

.program .content {
    position: absolute;
    justify-content: center;
    text-align: center;
    transform: translateX(100%);
}

#program-area .card {
    position: relative;
    display: block;
    margin: auto;
    width: 100%;
    max-width: 300px;
    height: auto !important;
    box-shadow: 0px 1px 20px 1px rgba(0, 0, 0, 0.1);
    border-radius: 15px;
}

@media only screen and (max-width: 500px) {
    #program-area .card {
        max-width: 320px;
    }
}

#program-area .img-prog {
    border-radius: 15px;
    padding: 16px;
}

#program-area .card h3 {
    font-family: 'Poppins';
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
    margin-bottom: 16px;
}

#program .nav-item {
    float: left;
}

#program span {
    font-family: "Poppins", serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;
}

.btn-prog {
    margin-top: 32px;
}

.btn-prog-rapid {
    margin-top: 32px;
}

/* TIMELINE HOME */
.home-tl {
    display: flex;
    background: #0066FF;
}

.home-tl .home-tl-tagline {
    text-align: center;
    font-weight: 600;
    font-size: 28px;
    line-height: 42px;
    color: #fff;
}

.home-tl .home-tl-sub {
    font-weight: 400;
    font-size: 20px;
    line-height: 30px;
    text-align: center;
    color: #fff;
}

.home-tl .card {
    border-radius: 30px;
}

.home-tl .card .right .right-title {
    padding-top: 32px;
    text-align: center;
}

.home-tl .card .left h3 {
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
}

.home-tl .bg-gray {
    background-color: #f2f2f2;
    border-radius: 10px;
}

.text-container {
    position: absolute;
    top: 170px;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
}


.jennyhouse {
    text-align: center;
}

.header-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
}

.header-section h3 {
    margin-bottom: 5px;
}

.header-section p {
    margin-bottom: 0;
}

.hackathon-slide img {
    max-width: 100%;
    height: auto;
}

.image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 100px;
}

.garis {
    margin-top: 100px;
}


.home-tl .card .tab-content .tagline {
    font-weight: 600;
    font-size: 24px;
    line-height: 36px;
    text-align: center;
}

.home-tl .card .tab-content .month-learn {
    font-weight: 600;
    font-size: 20px;
    line-height: 30px;
}

.home-tl .card .tab-content .sub {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    text-align: justify;
}

.home-tl .card .tab-content .tab1-sub {
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;
    text-align: center;
}

.home-tl .card .tab-content .custom-hr {
    border: none;
    background-color: #000;
    height: 3px;
}

.home-tl .card .tab-content .card.tab-structure {
    justify-content: center;
    align-items: center;
    background: #D9D9D9;
    border-radius: 15px;
    width: 100%;
    height: 456px;
}

.home-tl .card .tab-content .card.tab3 {
    justify-content: center;
    align-items: center;
    background: transparent;
    border-radius: 15px;
    width: 100%;
    height: 226px;
    border: none;
}

.home-tl .card .tab-content .card-container {
    justify-content: center;
    align-items: center;
}

.home-tl .card .tab-content .card.tab4 {
    background-color: transparent;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
    height: 600px;
}

.home-tl .card .tab-content .card.tab4 .card-img {
    display: flex;
    justify-content: center;
    align-items: center;
}

.home-tl .card .tab-content .card.tab3 .jennyhouse {
    z-index: 2;
    font-style: italic;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    text-align: justify;
}

.home-tl .card .tab-content .card.tab3 img {
    position: absolute;
    z-index: 1;
    max-width: 100%;
}

.home-tl .card .tab-content .tab4-sub {
    padding-top: 32px;
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;
    text-align: justify;
}

.tl-home .timeline {
    position: relative;
}

.tl-home .timeline-item::before {
    content: '';
    position: absolute;
    top: 20%;
    left: 12px;
    height: 70%;
    width: 2px;
    background-color: #ccc;
    border-radius: 0;
    z-index: 1;
}

.tl-home .timeline-item:last-child::before {
    display: none;
}

.tl-home .timeline-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 32px;
}

.tl-home .timeline-icon {
    flex-shrink: 0;
    z-index: 2;
    border: 2px solid #fff;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-top: 10px;
}

.tl-home .timeline-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: none;
    border-radius: 0;
    background-color: #ccc;
}

.tl-home .timeline-icon i {
    color: #333;
}

.tl-home .timeline-content {
    margin-left: 20px;
}

.tl-home .timeline h3 {
    font-weight: 500;
    font-size: 15px;
    line-height: 22px;
    margin-top: 0;
    text-align: left;
}

.tl-home .timeline p {
    text-align: justify;
    margin-bottom: 0;
    font-weight: 400;
    font-size: 15px;
    line-height: 22px;
}

/* tab home */
.tab-home .tab-container {
    display: flex;
}

.tab-home .tab {
    flex: 0 0 100px;
    background-color: #f1f1f1;
    height: 100%;
    width: 452px;
}

.tab-home .tabcontent .card {
    width: 200px;
    height: 157px;
    background: #D9D9D9;
    border-radius: 15px;
}

/* TAB 4 SLIDER */
#hackathon-area {
    padding: 24px 0;
}

#hackathon-area .owl-next {
    right: -60px;
    top: 128px;
}

#hackathon-area .owl-prev {
    left: -60px;
    top: 128px;
}

#hackathon-area .owl-prev,
#hackathon-area .owl-next {
    display: none;
}

/* #hackathon-area .card.tab4{
    background: #D9D9D9;
    border-radius: 15px;
    width: 719px;
    height: 226px;
  }
   */
.tab-home .tab button {
    display: block;
    width: 100%;
    padding: 10px;
    border: none;
    background-color: inherit;
    text-align: left;
    cursor: pointer;
}

.tab-home .tab button:hover {
    background-color: #ddd;
}

.tab-home .tab button.active {
    background-color: #ccc;
}

.tab-home .tab-content {
    flex: 1;
    padding: 20px;
}

.tab-home .tabcontent {
    display: none;
}

.tab-home .tabcontent.active {
    display: block;
}

/* TAB TIMELINE */

.tab5-tl {
    display: flex;
    flex-wrap: wrap;
    max-width: 800px;
    margin: 0 auto;
}

.tab5-tl .timeline {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    width: 100%;
}

.tab5-tl .icon {
    display: flex;
    background: #000;
    order: 2;
    text-align: center;
    color: #fff;
    font-size: 28px;
    flex-basis: 5px;
}

.tab5-tl .icon>span {
    font-size: 20px;
    margin: auto;
    border-radius: 50px;
    width: 50px;
    height: 50px;
    line-height: 40px;
    border: 5px solid #D9D9D9;
}

.tab5-tl .info {
    text-align: center;
    padding: 10px;
    border-radius: 5px;
    color: #383838;
    order: 3;
    width: 50%;
    padding-left: 10px;
    background: #fff;
    transition: all .6s ease;
}

.tab5-tl .info {
    margin-bottom: 3%;
    background: transparent;
}

.tab5-tl .info p {
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;
    text-align: justify;

}

/* HOME TL TAB */
.home-tl .tab {
    height: 820px;
    width: 630px;
}

.home-tl .tab .tablinks {
    width: 100%;
    height: 205px;
}

.home-tl .tabcontent .card {
    width: 200px;
    height: 157px;
    background: #D9D9D9;
    border-radius: 15px;
}

.home-tl .tab button {
    display: block;
    padding: 10px;
    border: none;
    background-color: inherit;
    cursor: pointer;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
}

.home-tl .btn-tab1 {
    border-radius: 30px 0px 0px 0px;
}

.home-tl .btn-tab4 {
    border-radius: 0px 0px 0px 30px;
}

.home-tl .tab button:hover {
    background-color: #fff;
}

.home-tl .tab button.active {
    background-color: #FFB800;
    color: #fff;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
}

.home-tl .tab-content {
    padding: 20px;
}

.home-tl .tabcontent {
    display: none;
}

.home-tl .tabcontent.active {
    display: block;
}


/* benefit Section */

.benefit h3 {
    font-family: 'Poppins', serif;
    font-weight: 600;
    font-size: 36px;
}

.benefit .sub {
    font-family: 'Poppins', serif;
    color: #6C6C6C;
    font-weight: 400;
    font-size: 12px;
}

.benefit-content {
    padding-bottom: 8px;
}

.benefit .card {
    width: 479px;
    height: auto;
    background: #FFFFFF;
    box-shadow: 0px -1.08744px 69.5961px rgba(5, 142, 110, 0.14);
    border-radius: 8.69952px;
}

.benefit .card h3 {
    font-family: 'Poppins', serif;
    color: #393939;
    font-weight: 600;
    font-size: 16px;
}

.benefit .card img {
    margin-top: 0.8rem;
}

.benefit .card p {
    font-family: 'Poppins', serif;
    color: #8D8D8D;
    font-weight: 400;
    font-size: 12px;
}


/* banner-home Section */

.banner-home {
    padding-left: 5%;
}

.banner-home .container img {
    max-width: 100%;
    height: auto;
}

/* package Section */

.card-container {
    display: flex;
    justify-content: center;
}

.package .card:hover {
    cursor: pointer;
    transform: translateY(-32px);
    border: 2px solid #0066FF;
    box-shadow: 0 1px 5px 1px #FDF4DB;
}

.package .card.active {
    background: #fff;
    border: 2px solid #0066FF;
    box-shadow: 0 1px 5px 1px #FDF4DB;
}

#package .card {
    box-sizing: border-box;
    width: 100%;
    height: 650px;
    border-radius: 4px;
}

@media (max-width: 500px) {
    #package .card {
        box-sizing: border-box;
        width: 340px;
        height: 650px;
        border-radius: 4px;
    }
}

.package-tagline {
    text-align: center;
    font-weight: 600;
    font-size: 36px;
    line-height: 54px;
    color: #0066FF;
}

.package p {
    font-family: 'Poppins', serif;
    color: #777777;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
}

.card-title {
    text-align: center;
}

.card-title1 {
    font-size: 15px;
}

.card-title1 a {
    color: black;
    /* Set the text color to black */
    text-decoration: none;
    /* Remove underline from the link */
}

.package .card-title h1,
.package h2 {
    font-family: 'Poppins', serif;
    text-align: start;
    /* margin-left: 24px; */
}

.package i {
    color: #000;
}

.package ul li {
    padding-inline-start: 0%;
    list-style-type: none;
    color: #777777;
    font-weight: 400;
    font-size: 15px;
    line-height: 24px;
    margin-bottom: 16px;
}

.package .package-1 {
    box-sizing: border-box;
    width: 308px;
    height: 556px;
    background: #FFFFFF;
    border-radius: 20px;
}

.package .package-1 h1 {
    font-family: "Poppins", serif;
    color: #0066FF;
    font-weight: 700;
    font-size: 20px;
    line-height: 30px;
}

.button .regist-package,
.button a.regist-package {
    margin-top: 24px;
    width: 257px;
    height: 51px;
    background: transparent;
    border: 1px solid #000000;
    border-radius: 8px;
}

.button .regist-package:hover,
.button a.regist-package:hover {
    margin-top: 24px;
    width: 257px;
    height: 51px;
    color: #fff;
    background: #0066FF;
    border: 1px solid #0066FF;
    border-radius: 8px;
}

.button .regist-choose-package,
.button a.regist-choose-package {
    margin-top: 5px;
    display: inline-block;
    width: 100%;
    height: 51px;
    color: #fff;
    background: #0066FF;
    border: 1px solid #0066FF;
    border-radius: 4px;
}

.button .regist-choose-package:hover,
.button a.regist-choose-package:hover {
    margin-top: 5px;
    width: 100%;
    height: 51px;
    background: transparent;
    border: 1px solid #000000;
    color: black;
    border-radius: 4px;
}

.txt-btn-package {
    font-weight: 700;
    font-size: 18px;
    line-height: 30px;
}

.card-title h1 {
    font-family: "Poppins", serif;
    margin-top: 24px;
    margin-bottom: 5px;
    color: #464646;
    font-weight: 700;
    font-size: 18px;
    line-height: 30px;
}

.card-title h2 {
    font-family: "Poppins", serif;
    color: #464646;
    font-weight: 700;
    font-size: 24px;
    line-height: 36px;
}

.sub-item p {
    font-family: "Poppins", serif;
    padding-top: 8px;
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;
    text-align: start;
}

/* aboutus Section */


/* .aboutus{
    height: 100vh;
} */

.aboutus .tagline h3 {
    font-family: "Poppins", serif;
    font-weight: 600;
    font-size: 36px;
}

.aboutus p {
    font-family: 'Poppins', serif;
    color: #6C6C6C;
    font-weight: 300;
    font-size: 11px;
}

.aboutus .img-ellipse-work {
    display: flex;
    width: 50px;
    height: 50px;
}

.aboutus .card {
    width: 100%;
    height: auto;
    background: #FFFFFF;
    box-shadow: 0px 2px 194.108px rgba(255, 146, 47, 0.15), 0px 0.272329px 24.3053px rgba(255, 146, 47, 0.075);
    border-radius: 8.69952px;
}

.aboutus .card-body h3 {
    font-family: 'Poppins', serif;
    color: #FB9C46;
    font-weight: 600;
    font-size: 20px;
}

.aboutus .card.vid-maxy {
    width: 507px;
    height: 422px;
    background: linear-gradient(0deg, rgba(77, 77, 77, 0.49), rgba(77, 77, 77, 0.49));
    border-radius: 18px;
}

.card-aboutus {
    margin-bottom: 80px;
    width: 100%;
    height: 398px;
    border-radius: 8px;
    background-color: #D9D9D9;
}

.card-video iframe {
    width: 100%;
    height: 398px;
    border-radius: 20px;
}

.aboutus .icon-klip-bottom {
    position: relative;
    /* Sesuaikan dengan lebar ikon */
}

.aboutus .icon-klip-bottom img {
    position: absolute;
    right: 90px;
    top: 200px;
}

.about-us-video {
    margin-bottom: 80px;
    width: 100%;
    height: 398px;
    border-radius: 20px;
    background-color: #D9D9D9;
}

.our-team .card .name {
    color: #000;
    font-size: 18px;
    font-weight: 700;
    line-height: 28px;
    text-align: center;
}

.our-team .card .position {
    color: #000;
    font-weight: 400;
    font-size: 15.1678px;
    line-height: 23px;
    text-align: center;
}

.our-team p {
    font-family: 'Poppins';
    /* text-align: center; */
    font-weight: 600;
    font-size: 20px;
    color: #000;
}

.our-team h3 {
    font-family: 'Poppins';
    /* text-align: center; */
    font-weight: 700;
    font-size: 64px;
    line-height: 105.5%;
    color: #0066FF;
}

.our-team .card-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.our-team .card {
    text-align: center;
    width: 365px;
    height: auto;
}

.our-team .card h3 {
    font-family: 'Poppins';
    font-weight: 600;
    font-size: 19px;
    line-height: 28px;
    text-align: center;
}

.our-team .card p {
    font-family: 'Poppins';
    font-weight: 400;
    font-size: 15px;
    line-height: 23px;
}

.aboutus p {
    font-family: 'Poppins';
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    width: 100%;
}


/* testimonial-home Section */
#testimonial-home {
    /* 100% of the viewport height */
    max-height: 800px;
    /* Set a maximum height to avoid overflow on smaller screens */
    overflow-y: auto;
    /* Add vertical scroll if the content overflows */
}

/* Center the content vertically in the container */
#testimonial-home .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.testimonial-home .carousel-control-next-icon,
.testimonial-home .carousel-control-prev-icon {
    position: absolute;
    border-radius: 50%;
    background-color: #C4C4C4;
}

.testimonial-home .carousel-control-next-icon {
    right: 0;
}

.testimonial-home .carousel-control-prev-icon {
    left: 10%;
}

/* Add padding to the carousel to avoid cutting off content on smaller screens */
#carouselExampleControls .carousel-inner {
    padding: 20px;
}

.testimonial-home h3 {
    font-family: 'Poppins';
    /* text-align: center; */
    font-size: 28px;
    line-height: 42px;
    font-weight: 600;
    margin-bottom: 32px;
}


/* .testimonial-home p{
    text-align: center;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    width: 100%;
} */

.testimonial-home .carousel-item .card {
    border: none;
    width: 100%;
    height: auto;
}

.testimonial-home .carousel-item .card p {
    font-family: 'Poppins';
    color: #777777;
    font-style: italic;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    text-align: justify;
}

.testimonial-home .carousel-item .card h3 {
    font-family: 'Poppins';
    text-align: start;
    color: #0066FF;
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
}

.testimonial-home .carousel-item .card .img-testi img {
    width: 100%;
    height: 100%;
    /* filter: drop-shadow(0px 4px 5px rgba(0, 0, 0, 0.5)); */
}

.testimonial-home .carousel-item .card .alumni {
    color: #606060;
    text-align: start;
    font-weight: 400;
    font-size: 14px;
    line-height: 27px;
}

.aboutus .talent h3 {
    font-family: 'Poppins';
    color: #6C6C6C;
    font-weight: 600;
    font-size: 28px;
    line-height: 42px;
}

.aboutus .talent p {
    font-family: 'Poppins';
    color: #6C6C6C;
    font-weight: 400;
    font-size: 20px;
    line-height: 30px;
}

.card-xxnam {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 80px;
    width: 300px;
    height: 500px;
    /* background-color: #D9D9D9; */
}

.card-xxnam .card-body h3 {
    font-family: 'Poppins';
    padding-top: 32px;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
}

.card-xxnam .card-body p {
    font-family: 'Poppins';
    color: #777777;
    font-style: italic;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    text-align: justify;
}


/* FAQ Section */

#faq {
    margin-top: 64px;
    margin-bottom: 64px;
}

.faq span {
    font-weight: 700;
    font-size: 16px;
}

.faq span:hover {
    font-weight: 700;
    font-size: 16px;
    color: #000;
}

.faq .tab {
    display: flex;
    justify-content: center;
}

.faq .tabcontent {
    display: none;
}

.faq .tabcontent.active {
    display: block;
}

.faq-title {
    color: #0066FF;
    font-weight: 600;
    font-size: 28px;
    line-height: 42px;
    text-align: center;
}

.faq p {
    text-align: center;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}


/* Footer Section */

.footer {
    background-color: #fff;
    z-index: 2;
}

.footer h4 {
    padding: 8px;
    color: #000;
    font-weight: 700;
    font-size: 26px;
    line-height: 39px;
}

.footer p {
    padding: 8px;
    color: #000;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
}

.footer p a {
    color: #5C5A5A;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
}

.footer ul li a {
    text-decoration: none;
    padding: 0;
    text-align: start;
    font-size: 12px;
    font-weight: 400;
    padding-inline-start: 0%;
    list-style-type: none;
}

.footer a {
    color: #000;
    font-size: 12px;
}

.footer .text-white hover {
    color: #FFB800;
}

.footer .img-footer {
    padding: 0;
}

.note {
    color: #ffff;
    text-align: center;
}

.note a {
    color: #ffff;
    text-decoration: none;
}

.note a:hover {
    color: #000;
}


/* icon */

.fa-facebook,
.fa-instagram,
.fa-linkedin,
.fa-tiktok,
.fa-envelope,
.fa-whatsapp {
    font-size: 24px;
    margin-right: 6px;
}

.fa-facebook a:hover {
    color: #FFB800;
}


/* Register */

.register {
    height: 100vh;
}

.register .form-control {
    margin: 16px 0px 0px 0px;
}

.signup-txt {
    color: #6C6C6C;
}

.register a {
    color: #1E186B;
    text-decoration: none;
}

.register a:hover {
    color: #1E186B;
    text-decoration: none;
}

.register h1 {
    margin-bottom: 32px;
    font-weight: 600;
    font-size: 36px;
    line-height: 54px;
    color: #000000;
}

.register h2 {
    padding-top: 80%;
    color: #FFFFFF;
}

.register-form {
    margin-left: 120px;
    width: 340px;
}

.register .right {
    background: url('/img/bgUser.png');
    background-size: cover;
    margin-left: 0px;
}

.register .right-client {
    background: url('/img/login-client.png');
    background-size: cover;
    margin-left: 0px;
}

.register .custom-heading {
    line-height: 1.8;
    /* Adjust the line height for more spacing */
    margin-top: 20px;
    /* Add space above the heading */
    margin-bottom: 20px;
    /* Add space below the heading */
}

.register-form .signup {
    width: 100%;
    height: 42px;
    background: #FFB800;
    border: none;
    border-radius: 8px;
    color: #000;
    margin: 56px 0px 24px 0px;
}

/* INDEX */
.container-index {
    display: flex;
    flex-wrap: wrap;
}

/* CSS untuk mengatur tata letak card */
.card-index {
    flex: 1;
    min-width: 300px;
    padding: 10px;
    margin: 10px;
    border: 1px solid #ccc;
}

/* CSS untuk mengatur tata letak di card kedua */
#card2 {
    display: flex;
    align-items: center;
}

/* CSS untuk mengatur margin pada elemen dengan class "Output" */
.Output {
    margin-right: 10px;
}

/* CSS untuk mengatur margin pada tombol dengan ID "runButton" */
#runButton {
    margin-left: auto;
}


/* Login */
#login-error {
    color: red;
    margin-top: 5px;
}

.login h1 {
    font-weight: 600;
    font-size: 36px;
    line-height: 54px;
}

.fa-google {
    margin-left: 0px
}

.login a {
    color: #1E186B;
    text-decoration: none;
}

.login a:hover {
    color: #1E186B;
    text-decoration: none;
}

.login .right {
    background: url('/img/bgUser.png');
    background-size: cover;
    margin-left: 0px;
}

.login .right-client {
    background: url('/img/login-client.png');
    background-size: cover;
    margin-left: 0px;
}

.login .custom-heading {
    line-height: 1.8;
    /* Adjust the line height for more spacing */
    margin-top: 20px;
    /* Add space above the heading */
    margin-bottom: 20px;
    /* Add space below the heading */
}

.login-form {
    width: 340px;
}

.signin-txt {
    color: #6C6C6C;
}

.fa-google {
    margin-right: 25px;
}

.signin-google img {
    width: 20px;
    /* Set the desired width */
    height: 20px;
    /* Set the desired height */
    vertical-align: middle;
    /* Align the image vertically within the button */
    margin-right: 40px;
    /* Add some space between the image and the button text */
}

.signin-facebook img {
    width: 25px;
    /* Set the desired width */
    height: 25px;
    /* Set the desired height */
    vertical-align: middle;
    /* Align the image vertically within the button */
    margin-right: 31px;
    /* Add some space between the image and the button text */
}

.login-form .signin {
    width: 100%;
    height: 42px;
    background: #FFB800;
    border: none;
    border-radius: 8px;
    color: #000;
    margin: 36px 0px 24px 0px;
}

.login-form .signin-google {
    background: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    width: 100%;
    height: 42px;
    margin: 48px 0px 24px 0px;
}

.login .form-control {
    margin: 16px 0px 0px 0px;
}

.login-form .signin-facebook {
    background: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    width: 100%;
    height: 42px;
}

/* PRAKERJA PAGE */
.prakerja-banner h3 {
    padding-top: 130px;
    font-weight: 700;
    font-size: 40px;
    line-height: 60px;
}

.prakerja-banner p {
    padding-top: 32px;
    font-weight: 400;
    font-size: 24px;
    line-height: 34px;
}

.desc-pra p {
    font-weight: 400;
    font-size: 20px;
    line-height: 143%;
    text-align: justify;
}

.desc-pra h3 {
    font-weight: 700;
    font-size: 48px;
    line-height: 143%;
    text-align: justify;
}

.desc-pra {
    background: #232F65;
    color: #fff;
}

.benefit-pra {
    justify-content: center;
}

.benefit-pra .card-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.benefit-pra .pra-benefit {
    padding-bottom: 64px;
    text-align: center;
    font-weight: 700;
    font-size: 24px;
    line-height: 34px;
}

.benefit-pra .card h3 {
    font-weight: 700;
    font-size: 100%;
    line-height: 30px;
}

.benefit-pra .card p {
    color: #B0B0B0;
    font-weight: 400;
    font-size: 100%;
    line-height: 30px;
}

.benefit-pra .card {
    overflow: hidden;
    width: 80%;
    height: 157px;
    background: #FFFFFF;
    box-shadow: 0px -1.08744px 70px rgba(5, 142, 110, 0.14);
    border-radius: 150px;
}

.benefit-pra .img-pra-benefit img {
    width: 200px;
    height: 124px;
}

.lowongan .lowongan-tagline {
    text-align: center;
    font-weight: 700;
    font-size: 24px;
    line-height: 34px;
}

.lowongan .card {
    padding: 8px;
    width: 360px;
    height: 508px;
    background: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 10px;
}

.lowongan .card:hover {
    cursor: pointer;
    transform: translateY(-12px);
    box-shadow: 0px 1px 5px 1px #FDF4DB;
}

.lowongan .prakerja {
    color: #4883FF;
    font-weight: 600;
    font-size: 13px;
    line-height: 19px;
}

.lowongan .card .card-body h3 {
    font-weight: 600;
    font-size: 22px;
    line-height: 30px;
}

.lowongan .card .rate {
    color: #4883FF;
    font-weight: 500;
    font-size: 13px;
    line-height: 16px;
}

.lowongan .card a {
    color: #000;
    text-decoration: none;
}

.lowongan .card a :hover {
    text-decoration: none;
}

.lowongan .card .desc {
    color: #667085;
    font-weight: 400;
    font-size: 15px;
    line-height: 22px;
}

.lowongan .card i {
    transform: rotate(45deg);
}

.daftar-pra .daftar {
    text-align: center;
    font-weight: 700;
    font-size: 24px;
    line-height: 34px;
}

.daftar-pra .img-left img {
    max-width: 100%;
}

.daftar-pra .timeline {
    position: relative;
}

.daftar-pra .timeline-item::before {
    content: '';
    position: absolute;
    top: 80%;
    left: 25px;
    height: 100%;
    width: 2px;
    background-color: #ccc;
    border-radius: 0;
    z-index: -1;
}

.daftar-pra .timeline-item:last-child::before {
    display: none;
}

.daftar-pra .timeline-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 40px;
}

.daftar-pra .timeline-icon {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-top: 10px;
}

.daftar-pra .timeline-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: none;
    border-radius: 0;
    background-color: #ccc;
}

.daftar-pra .timeline-icon i {
    color: #333;
}

.daftar-pra .timeline-content {
    margin-left: 20px;
}

.daftar-pra .timeline h3 {
    font-weight: 500;
    font-size: 15px;
    line-height: 22px;
    margin-top: 0;
    text-align: left;
}

.daftar-pra .timeline p {
    text-align: justify;
    margin-bottom: 0;
    font-weight: 400;
    font-size: 15px;
    line-height: 22px;
}

/* MODULE DETAIL */

/* Style the anchor tag as a button */
.prev-module-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #e9e9ea;
    color: #333;
    /* Replace this with the desired text color */
    text-decoration: none;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    margin-top: 50px;
    transition: background-color 0.3s ease;
}

/* Add a hover effect */
.prev-module-button:hover {
    background-color: #d4d4d4;
    /* Replace this with the desired hover background color */
}

/* Style the anchor tag as a button */
.next-module-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    /* Replace this with the desired text color */
    text-decoration: none;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s ease;
}

/* Add a hover effect */
.next-module-button:hover {
    background-color: #d4d4d4;
    /* Replace this with the desired hover background color */
}

/* LMS BOOTCAMP */
/* Style the anchor tag as a button */
.start-now-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    /* Replace this with the desired text color */
    text-decoration: none;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s ease;
}

/* Add a hover effect */
.start-now-button:hover {
    background-color: #d4d4d4;
    /* Replace this with the desired hover background color */
}

.label-nama {
    margin-left: 13px;
}

/* PRAKERJA DETAIL */
.prakdetail-banner {
    height: 100vh;
    color: #000;
    display: flex;
    padding-bottom: 180px;
}

.prakdetail-banner h3 {
    padding-top: 200px;
    padding-bottom: 16px;
    font-weight: 700;
    font-size: 36px;
    line-height: 142%;
}

.prakdetail-banner .card {
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 30px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    position: absolute;
    top: 30%;
    left: 60%;
}

.prakdetail-banner .card1 {
    background: #0066FFB2;
    width: 612px;
    height: 420px;
}

.prakdetail-banner .card2 {
    background: #797878;
    width: 612px;
    height: 420px;
    top: 26%;
    left: 58%;
    box-shadow: 0px 0px 50px 20px rgba(0, 0, 0, 0.25);
}

.prakdetail-banner .card2 img {
    width: 612px;
    height: 420px;
    border-radius: 30px;
}

.prakdetail .list-container {
    display: flex;
    padding-left: 15%;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.prak-modul #accordion li {
    border: 1px solid #00000040;
}

.prak-modul .img-m {
    top: 103%;
    position: absolute;
    z-index: -1;
    left: 20%;
}

.prak-modul .img-m-ui {
    top: 100%;
    position: absolute;
    z-index: -1;
    left: 15%;
}

.prak-modul .img-m-ui img {
    max-width: 80%;
}

.prak-modul .img-m img {
    max-width: 100%;
}

.prak-modul h3 {
    text-align: center;
    font-weight: 700;
    font-size: 24px;
    line-height: 34px;
}

.prak-modul .timeline {
    position: relative;
}

.prak-modul .timeline-item:last-child::before {
    display: none;
}

.prak-modul .timeline-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 40px;
}

.prak-modul .timeline-icon {
    margin-right: 32px;
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    border-radius: 8px 8px 16px 16px;
    background-color: #0066FF;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-top: 10px;
}

.prak-modul .timeline-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: none;
    border-radius: 0;
    background-color: #ccc;
}

.prak-modul .timeline-icon p {
    color: #fff;
    padding-top: 16px;
    font-size: 32px;
}

.prak-modul .timeline-content {
    margin-left: 20px;
}

.prak-modul .timeline h3 {
    padding-top: 16px;
    font-weight: 500;
    font-size: 15px;
    line-height: 22px;
    margin-top: 0;
    text-align: left;
}

.tl-pra .timeline {
    position: relative;
}

.tl-pra .timeline-item::before {
    content: '';
    position: absolute;
    top: 10%;
    left: 9px;
    height: 85%;
    width: 2px;
    background-color: #ccc;
    border-radius: 0;
    z-index: 1;
}

.tl-pra .timeline-item:last-child::before {
    display: none;
}

.tl-pra .timeline-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 24px;
}

.tl-pra .timeline-icon {
    flex-shrink: 0;
    z-index: 2;
    width: 20px;
    height: 20px;
    border: 3px solid #fff;
    border-radius: 50%;
    background-color: #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-top: 10px;
}

.tl-pra .timeline-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: none;
    border-radius: 0;
    background-color: #000;
}

.tl-pra .timeline-content {
    margin-left: 4px;
}

.tl-pra .timeline h3 {
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    padding-top: 6px;
    text-align: left;
    color: #000;
}

.tl-pra .timeline p {
    text-align: justify;
    margin-bottom: 0;
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;
    color: #000;
}

.prak-regist .card h3 {
    padding-top: 16px;
    font-weight: 700;
    font-size: 24px;
    line-height: 34px;
    text-align: center;
    color: #fff;
}

.prak-regist .card p {
    text-align: center;
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 142%;
    color: #fff;
}

.prak-regist .card .sub-regist {
    font-weight: 500;
    font-size: 20px;
    line-height: 30px;
    text-align: center;
    padding-top: 16px;
    color: #000;
}

.prak-regist .card-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.prak-regist .card {
    box-shadow: 0px 0px 55px 7px rgba(0, 102, 255, 0.25);
    align-items: center;
    justify-content: center;
    margin: auto;
    background: linear-gradient(274.11deg, #0066FF -12.78%, #0066FF 58.68%, #FFFFFF 133.13%);
    border: 12px solid #FFFFFF;
    border-radius: 60px;
    width: 100%;
    height: auto;
}

.prak-regist .card.card-regist {
    align-items: center;
    justify-content: center;
    margin-bottom: 72px;
    border: none;
    border-radius: 15px;
    background: #fff;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    width: 200px;
    height: 150px;
}

.prak-regist .card .card-regist .img-card {
    border-radius: 7px;
    width: 75px;
    height: 75px;
    background: transparent;
}

.price-prakerja .tagline {
    font-weight: 600;
    font-size: 32px;
    line-height: 142%;
    text-align: center;
}

.price-prakerja .price {
    text-align: center;
    font-weight: 600;
    font-size: 36px;
    line-height: 142%;
}

.price-prakerja .nominal {
    text-align: center;
    font-weight: 500;
    font-size: 32px;
    line-height: 142%;
}

.price-prakerja .daftar-btn {
    display: flex;
    justify-content: center;
    align-items: center;
}


/* Rapid Course */

.career-card .career-tagline {
    text-align: center;
    margin-top: 64px;
    font-style: normal;
    font-weight: 600;
    font-size: 56px;
    line-height: 125%;
}

.career-card .card {
    width: 360px;
    height: 532px;
}

.career-card .card:hover {
    cursor: pointer;
}

.career-card .card .bootcamp {
    color: #4883FF;
    font-weight: 600;
    font-size: 13px;
    line-height: 19px;
}

.career-card .card i {
    transform: rotate(45deg);
    color: #000;
}

.career-card .card h3 {
    font-weight: 600;
    font-size: 20px;
    line-height: 30px;
}

.rapid h1 {
    margin-top: 100px;
    margin-bottom: 15px;
    font-style: normal;
    font-weight: 600;
    font-size: 56px;
    line-height: 125%;
}

.rapid-card h1 {
    margin-top: 100px;
    font-weight: 600;
    font-size: 40px;
    line-height: 59px;
    text-align: center;
}

#desc-bootcamp {
    width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rapid-card .card {
    padding: 8px;
}

.rapid-card .card i {
    transform: rotate(45deg);
}

.rapid-card .card .bootcamp-name {
    color: #101828;
    font-weight: 600;
    font-size: 20px;
    line-height: 30px;
}

.rapid-card .card .bootcamp {
    color: #4883FF;
    font-weight: 600;
    font-size: 13px;
    line-height: 19px;
}

.rapid-card .card-body a {
    color: #1E186B;
    text-decoration: none;
}

.why .card {
    max-width: 50px;
    height: 50px;
}

.why h1 {
    font-family: 'Poppins';
    color: #000;
    font-weight: 600;
    font-size: 36px;
    line-height: 125%;
}

.why p {
    color: #6C6C6C;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
}

#testimonials-area {
    padding: 24px 0;
}

#testimonials-area .owl-next {
    right: -60px;
    top: 128px;
}

#testimonials-area .owl-prev {
    left: -60px;
    top: 128px;
}

#testimonials-area .owl-prev,
#testimonials-area .owl-next {
    width: 40px;
    height: 40px;
    line-height: 40px;
    /* Menggunakan line-height yang sama dengan tinggi lingkaran */
    color: #000;
    text-align: center;
    background: #FFB800;
    position: absolute;
    border-radius: 50%;
    /* Menggunakan border-radius untuk membuat lingkaran */
    display: flex;
    align-items: center;
    justify-content: center;
}

.testimonials-slider .box-area {
    padding: 30px;
    position: relative;
    display: block;
    background: #fff;
    color: #000;
    margin: 20px 0;
}

.testimonials-slider .box-area .content .fas {
    width: 32px;
    color: #FFB800;
}

.testimonials-slider .box-area .content .fa-quote-left {
    font-size: 32px;
}

.testimonials-slider .box-area .content p {
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;
    font-style: italic;
    color: #90A3B4;
}

.rapid-card .card-body h3 {
    text-align: center;
    color: #6C6C6C;
    font-weight: 600;
    font-size: 20px;
    line-height: 30px
}

.rapid-card .card-body p {
    color: #6C6C6C;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
}

.testimonials h3 {
    margin-top: 128px;
    color: #FFB800;
    font-weight: 700;
    font-size: 36px;
    line-height: 47px;
}

.testimonials-slider .img-area {
    border-radius: 100%;
}

.testimonials-slider .img-area img {
    border-radius: 100%;
    width: 64px;
    height: 64px;
}

.box-area .name {
    color: #FAAD13;
    font-weight: 700;
    font-size: 16px;
    line-height: 13px;
}

.box-area .sub {
    color: #90A3B4;
    font-weight: 400;
    font-size: 11px;
    line-height: 15px;
}


/* Instructor */

.instructor .best-ins {
    margin-top: 120px;
    color: #000;
    font-weight: 600;
    font-size: 36px;
    line-height: 68px;
}

.instructor .gradient {
    background: linear-gradient(270deg, #FFB800 70.99%, #0B32FF 98.85%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#instructor-area {
    padding: 24px 0;
}

#instructor-area .owl-next {
    right: -8px;
    top: 128px;
}

#instructor-area .owl-prev {
    left: -10px;
    top: 128px;
}

#instructor-area .owl-prev,
#instructor-area .owl-next {
    width: 40px;
    height: 40px;
    line-height: 40px;
    /* Menggunakan line-height yang sama dengan tinggi lingkaran */
    color: #000;
    text-align: center;
    background: #FFB800;
    position: absolute;
    border-radius: 50%;
    /* Menggunakan border-radius untuk membuat lingkaran */
    display: flex;
    align-items: center;
    justify-content: center;
}

.instructor-slider .card {
    margin: auto;
    width: 338px;
    height: 343px;
    background: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.instructor-slider .img-ins img {
    width: 338px;
}

.instructor .mentor-name {
    color: #0066FF;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
}

.instructor .position {
    color: #6C6C6C;
    font-weight: 400;
    font-size: 12px;
    line-height: 160%;
}

.instructor .program-class {
    color: #000000;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
}

.instructor .card p {
    font-weight: 500;
    font-size: 12px;
    line-height: 18px;
}

.instructor .card-body h1 {
    color: #0066FF;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
}

.instructor .card-body p {
    color: #6C6C6C;
    font-weight: 400;
    font-size: 12px;
    line-height: 160%;
}

.instructor .card-body h3 {
    color: #000;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
}

#desc-instructor {
    max-width: 95%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* MAXY TALKS */

.mtalks {
    margin-bottom: 30%;
    z-index: 1;
    height: 90vh;
}

.slidertalks {
    position: relative;
    top: -80vh;
    z-index: 2;
}

.mtalks h3 {
    margin-top: 120px;
    margin-bottom: 32px;
    font-weight: 600;
    font-size: 36px;
    line-height: 44px;
}

.mtalks p {
    font-weight: 400;
    font-size: 20px;
    line-height: 24px;
    margin-bottom: 32px;
}

.slidetalk {
    height: 50vh;
}

.swiper {
    width: 100%;
    height: 90vh;
}

.swiper-wrapper {
    width: 100%;
    height: 35em;
    margin-top: -30px;
    display: flex;
}

.swiper .card {
    width: 481px;
    height: 260px;
    border: 1px solid #6C6C6CB2;
    background-color: #fff;
    border-radius: 2em;
    display: flex;
    margin: 0 64px;
}

.swiper .card-content {
    margin-top: 24px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.swiper .card-content h3 {
    margin-top: 32px;
    text-align: start;
    font-weight: 600;
    font-size: 16px;
    line-height: 19px;
}

.swiper .card-text {
    font-weight: 400;
    font-size: 12px;
    line-height: 14px;
}


/* CALENDAR */

#calendar {
    width: 330px;
    /* Ganti dengan lebar yang diinginkan */
}

.card-section-asg {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.card-ra {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}


.wrapper {
    width: 350px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}

.wrapper header {
    display: flex;
    align-items: center;
    padding: 20px 30px 10px;
    justify-content: space-between;
}

header .icons {
    display: flex;
}

header .icons span {
    height: 38px;
    width: 38px;
    margin: 0 1px;
    cursor: pointer;
    color: #878787;
    text-align: center;
    line-height: 38px;
    font-size: 1.9rem;
    user-select: none;
    border-radius: 50%;
}

.icons span:last-child {
    margin-right: -10px;
}

header .icons span:hover {
    background: #f2f2f2;
}

header .current-date {
    font-size: 1.45rem;
    font-weight: 500;
}

.calendar {
    padding: 10px 0px 8px;
    /* justify-content: space-between;
    padding: 10px; */
}

.calendar ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    text-align: center;
}

.calendar .days {
    margin-bottom: 20px;
}

.calendar li {
    color: #333;
    width: calc(100% / 7);
    font-size: 1.07rem;
}

.calendar .weeks li {
    font-weight: 500;
    cursor: default;
}

.calendar .days li {
    z-index: 1;
    cursor: pointer;
    position: relative;
    margin-top: 30px;
}

.days li.inactive {
    color: #aaa;
}

.days li.active {
    color: #fff;
}

.days li::before {
    position: absolute;
    content: "";
    left: 50%;
    top: 50%;
    height: 40px;
    width: 40px;
    z-index: -1;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.days li.active::before {
    background: #9B59B6;
}

.days li:not(.active):hover::before {
    background: #f2f2f2;
}

#maxytalk {
    height: auto;
    margin-bottom: 64px;
}

.maxytalk {
    background-color: #000;
    /* display: flex;
    background: url(../img/maxytalk1.png) no-repeat;
    background-size: cover;
    background-position: center; */
}

.maxytalk .card {
    width: 8rem;
    background-color: #fff;
    margin-right: 24px;
}

.maxytalk h3 {
    padding-top: 100px;
    color: #fff;
    margin-top: 120px;
    font-weight: 700;
    font-size: 55px;
    line-height: 54px;
}

.maxytalk p {
    color: #fff;
    font-weight: 400;
    margin-bottom: 32px;
    font-size: 20px;
    line-height: 24px;
}

.maxytalk .box-time {
    position: relative;
    display: flex;
    width: 500px;
    height: 122px;
    margin-top: 178px;
    background: #FFFFFF;
    border-radius: 8px;
}

.box-time h3 {
    color: #000;
    margin-top: 20px;
    font-weight: 700;
    font-size: 40px;
}

.box-time p {
    color: #000;
    font-weight: 500;
    font-size: 16px;
    line-height: 8px;
}

.btn-talk {
    margin-top: 64px;
    margin-bottom: 64px;
}

.web-benefit .card {
    position: relative;
    text-align: center;
    width: 367px;
    height: 367px;
    background: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 5px;
}

.web-benefit h3 {
    font-weight: 600;
    font-size: 28px;
    line-height: 42px;
    text-align: center;
}

.web-benefit .card img {
    margin-top: 16px;
}

.web-benefit .card h3 {
    font-weight: 500;
    font-size: 20px;
    line-height: 42px;
}

.web-benefit .card p {
    font-weight: 500;
    font-size: 16px;
    line-height: 32px;
}

.webinar {
    text-align: center;
    align-items: center;
    justify-content: center;
}

.webinar .schedule {
    margin-top: 70%;
}

.webinar h3 {
    margin-top: 40%;
    font-weight: 600;
    font-size: 28px;
    line-height: 42px;
}

.webinar .container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.webinar .card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    box-shadow: 0px 0px 7px 3px rgba(0, 0, 0, 0.1);
    border-radius: 70px 70px 0px 0px;
    width: 180px;
    height: 201px;
}

.webinar .card-2 {
    margin-left: -20px;
    width: 221px;
    height: 76px;
    background: #FFB800;
    border-radius: 20px;
}

.webinar .schedule p {
    font-weight: 400;
    font-size: 16px;
    color: #6C6C6C;
}

.webinar .schedule h2 {
    margin-top: 20%;
    font-weight: 500;
    font-size: 20px;
    color: #6C6C6C;
    text-align: center;
}


/* ABOUT US PAGE */

.about {
    display: flex;
    background: url(../img/banner-aboutus.png) no-repeat;
    background-size: contain;
    background-position: center;
    background-color: #f7f7f7;
}

@media (max-width: 900px) {
    .about {
        background-size: cover;
        /* Ganti background-size menjadi contain untuk layar kecil */
    }
}

.about .card.tim {
    display: flex;
    align-items: center;
    border-radius: 8px;
    max-width: 100%;
    height: 250px;
    background-color: #000;
    border: none;
}

.about .card .img-tim {
    align-items: center;
    border-radius: 8px;
    height: 200px;
}

.access .banner-about {
    display: flex;
    align-items: center;
    justify-content: center;
}

.about .card .img-tim img {
    border-radius: 8px;
    max-width: 100%;
    height: 200px;
}

.our-team .team-m {
    z-index: -2;
    position: absolute;
    left: 0;
}

.our-team .team-m img {
    max-width: 90%;
}


.about h3 {
    margin-top: 200px;
    margin-bottom: 64px;
    font-weight: 700;
    font-size: 64px;
    line-height: 64px;
}

.about p {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 64px;
}

.about .card {
    margin-top: 120px;
    background: #D9D9D9;
    border-radius: 40px;
    width: 422px;
    height: 530px;
}

.timeline {
    position: relative;
}

.timeline-bar {
    position: absolute;
    top: 40.5%;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: #f1f1f1;
    transform: translateY(-50%);
    z-index: -1;
}

.timeline-list {
    list-style: none;
    display: flex;
    justify-content: space-between;
    padding: 0;
}

.timeline-item {
    flex: 1;
    text-align: center;
}

.timeline-button {
    background-color: #f1f1f1;
    color: #333;
    border: none;
    padding: 10px;
    border-radius: 50%;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out;
}

.timeline-button:focus {
    outline: none;
}

.timeline-item.active .timeline-button,
.timeline-button.completed {
    background-color: #007bff;
    color: #fff;
}

.timeline-item:not(.active) .timeline-button {
    cursor: not-allowed;
}

.about2 {
    margin-bottom: 120px;
}

.about2 h3 {
    margin-bottom: 32px;
    font-weight: 700;
    font-size: 64px;
    line-height: 96px;
    color: #0066FF;
}

.about2 p {
    margin-top: 30px;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
}

.about2 .card-left {
    background: #D9D9D9;
    border-radius: 40px;
    width: 422px;
    height: 530px;
}

.about2 .card {
    width: 570px;
    position: relative;
}

.about2 .card p {
    margin-left: 8px;
    margin-top: 4px;
}

.office1 .card {
    padding-top: 72px;
    padding-left: 64px;
    max-width: 100%;
    height: 720px;
    background: #0066FF;
    box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.15);
    border-radius: 59px 0 0 59px;
}

.office1 .card .img-map img {
    position: relative;
    display: flex;
    max-width: 100%;
    right: 0;
}

.office1 .card h3 {
    font-weight: 500;
    font-size: 64px;
    line-height: 72px;
    color: #fff;
}

.office1 .card .office-maxy {
    font-weight: 700;
}

.office1 .card p {
    font-size: 20px;
    line-height: 30px;
    color: #fff;
}

.aboutus .talent h3 {
    color: #000;
    font-weight: 700;
    font-size: 64px;
    line-height: 105.5%;
}


/* .office1{
    height: 80vh;
    display: flex;
    background: url(../img/offices.png) no-repeat;
    background-size: cover;
    background-position: center;
} */

.about3 .card {
    background: transparent;
    border: none;
    border-radius: 40px;
    width: 337px;
    height: 234px;
}

.about3 .card img {
    width: 100%;
    height: 100%;
}

.about3 p {
    text-align: center;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
}

.offices .card {
    width: 366px;
    height: 221px;
}

.offices .card h3 {
    margin-top: 16px;
    margin-left: 16px;
    font-weight: 500;
    font-size: 20px;
    line-height: 30px;
    display: flex;
    flex-direction: column;
}

.offices .card p {
    margin-top: 16px;
    margin-left: 16px;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    display: flex;
    flex-direction: column;
}

.warrior h3 {
    padding-top: 100px;
    text-align: center;
    color: #6C6C6C;
    font-weight: 600;
    font-size: 28px;
    line-height: 42px;
}


/* Detail Course */

#detail {
    max-width: 100%;
    height: auto;
    margin-bottom: 150px;
}

.detail .img-course img {
    padding-top: 64px;
    display: flex;
    max-width: 100%;
}

.detail .rapid-tag {
    margin-top: 120px;
    margin-bottom: 32px;
    color: #0066FF;
    font-weight: 600;
    font-size: 48px;
    line-height: 54px;
}

.detail h3 {
    margin-bottom: 32px;
    color: #0066FF;
    font-weight: 600;
    font-size: 48px;
    line-height: 54px;
}

.detail .fake-price {
    color: red;
    font-weight: 700;
    font-size: 32px;
    line-height: 54px;
    text-decoration: line-through;
}

.detail .price {
    margin-top: 20px;
    margin-bottom: 32px;
    color: #000;
    font-weight: 700;
    font-size: 36px;
    line-height: 54px;
}

.detail p {
    color: #5C5A5A;
    font-weight: 400;
    font-size: 24px;
    line-height: 128%;
}

.silabus h3 {
    margin: 28px;
    color: #0066FF;
    font-weight: 600;
    font-size: 24px;
    line-height: 36px;
}

.silabus .tabcontent {
    display: none;
}

.silabus .tabcontent.active {
    display: block;
}

.silabus .tab {
    justify-content: center;
    display: flex;
    align-items: center;
}

.nav-pills {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.nav-pills>.nav-item>.nav-link.active {
    background: #FFB800;
    border-radius: 20px;
    color: #000;
    border: none;
    font-weight: 600;
}

.nav-link:focus {
    color: #000 !important;
}

.nav-pills>.nav-item>.nav-link:hover {
    background: #FFB800;
    border-radius: 20px;
    color: #000;
    border: none;
    font-weight: 600;
}

.nav-pills>.nav-item>.nav-link {
    font-weight: 600;
    color: #5a626f;
}

.silabus .card-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.silabus .card {
    border: 1px solid rgba(0, 0, 0, 0.3);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    margin: 40px auto;
    display: flex;
    width: 360px;
    height: 700px;
}

.silabus .card-title h3 {
    text-align: center;
    color: #6C6C6C;
    font-weight: 500;
    font-size: 20px;
    line-height: 30px;
}

.silabus .content p {
    display: list-item;
    list-style-type: disc;
    margin-left: 20px;
    line-height: 0.8;
}

.silabus .card-content {
    margin-top: 16px;
}

.silabus .card-content hr {
    width: 90%;
}

.silabus .card-content .fa-check-circle {
    margin-top: 8px;
    font-size: 24px;
    color: #FFB800;
}

.silabus .card-content .fa-times {
    margin-top: 8px;
    font-size: 24px;
    color: #464646;
}

.silabus .card-content ul {
    list-style-type: none;
}

.silabus .card-content ul li {
    margin-bottom: 24px;
}

.partner-img {
    object-fit: contain !important;
}

.silabus .card-price h3 {
    font-weight: 600;
    font-size: 16px;
    text-align: end;
    line-height: 24px;
    color: #686868;
}

#accordion li {
    list-style: none;
    margin-bottom: 10px;
    background: #fff;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #000;
}

#accordion li label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 400;
    font-size: 16px;
    line-height: 16px;
    cursor: pointer;
    color: #6C6C6C;
}

#accordion li label span {
    transform: rotate(90deg);
    font-size: 24px;
    color: #000;
}

#accordion label+input[type="radio"] {
    display: none;
}

#accordion .content {
    margin-top: 16px;
    color: #6C6C6C;
    padding: 0 10px;
    line-height: 24px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s;
}

#accordion label+input[type="radio"]:checked+.content {
    max-height: 400px;
}


/* PRAKERJA */

.chart-stat .card {
    width: 593px;
    height: 295px;
    background: #FFFFFF;
    box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.13);
    border-radius: 10px;
}

/* LMS */

.banner-lms {
    width: 100%;
    height: 200px;
    margin-left: 260px;
}

.banner-lms img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.lms .ui.progress {
    height: 40px;
}

.lms .event-progress {
    width: 335px;
}

.lms .ui.segment {
    width: 335px;
}

.lms .text-all {
    text-align: center;
}

.lms .ui.segment h4 {
    margin-top: 10px;
    margin-bottom: 10px;
}

.lms .ui.active,
.lms .ui.active .bar {
    border-radius: 20px;
}

.lms .progress-container .label {
    width: 335px;
    text-align: center;
    margin-top: 5px;
    margin-bottom: 20px;
}

.lms .card canvas {
    padding: 20px;
}

.lms .list-group-item {
    padding-top: 20px;
    padding-left: 25px;
    border-radius: 8px;
}

.lms .due-date {
    color: #9b9b9b;
    font-size: 14px;
}

.lms .progress {
    border-radius: 8px;
    width: 335px;
    height: 154px;
    background: #232F65;
}

.lms h3 {
    font-weight: 400;
    font-size: 20px;
    line-height: 30px;
    color: #1E186B;
}

.lms .ui.feed {
    width: 100%;
    padding: 20px;
    font-family: 'Poppins', sans-serif;
}

.lms a {
    text-decoration: none;
}

.lms #goToCourseButton {
    margin-bottom: 20px;
    background-color: #0066FF;
    color: white;
    border-radius: 5px;
    border: none;
    padding: 10px;
    padding-left: 30px;
    padding-right: 30px;
}

.lms .form-select {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: white;
    width: 335px;
    margin-bottom: 20px;
    font: optional;
}

.lms .form-select:focus {
    border-color: #3490dc;
    box-shadow: 0 0 0 0.25rem rgba(52, 144, 220, 0.25);
}

.lms .progress-bar {
    border-radius: 8px;
    background: #FAAD13;
    padding-left: 4px;
}

.lms .progress-bar h2 {
    font-weight: 600;
    font-size: 32px;
    color: #fff;
    position: absolute;
}

.lms .progress-bar .subtext {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
}

.lms .progress-bar .modult {
    margin-left: 20px;
}

/* styles.css */
.progress {
    border-radius: 8px;
    width: 250px;
    height: 154px;
}

.progress-bar {
    border-radius: 8px;
    padding-left: 4px;
}

.progress-bar h2 {
    font-weight: 600;
    font-size: 32px;
    color: #fff;
    position: absolute;
}

.progress-bar .subtext {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
}


/* Enrolled User (Mentor) */
.title-table {
    color: #0066FF;
    text-align: center;
}

.title-user {
    margin-left: 0px;
}

.enroll-container {
    width: 100%;
    height: 180px;
    background-color: #3e3a3a;
    padding: 20px;
    border-radius: 5px;
    margin-left: 0px;
    justify-content: center;
    align-items: center;
    margin-bottom: 100px;
}

.enroll-container1 {
    background-color: #f7f4f4;
    padding: 20px;
    border-radius: 5px;
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.plus-button {
    background-color: #3e3a3a;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    margin-left: -20px;
    width: 20%;
    margin-top: 10px;
}

.clear-button {
    background-color: #faf7f7;
    color: #e18e07;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    border-color: #e18e07;
    cursor: pointer;
    margin-left: 415px;
    margin-top: 10px;
    width: 17%;
}

.apply-button {
    background-color: #e18e07;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    margin-left: 5px;
    width: 17%;
    margin-top: 10px;
}

.table-container {
    width: 100%;
    /* Mengatur lebar kontainer tabel */
    overflow-x: auto;
    /* Menambahkan scroll horizontal jika tabel melebihi lebar kontainer */
    margin-left: 0px;
    text-align: center;
}


.sort {
    display: flex;
    align-items: center;
    cursor: pointer;
    background-color: transparent;
    border: none;
    margin-left: 0px;
}

.sort-text {
    margin-right: 10px;
    margin-bottom: 5px;
    font-weight: bold;
}

.match-title {
    margin: 0;
    font-size: 20px;
    margin-left: 10px;
    margin-top: 5px;

}

#sort-any {
    border-radius: 5px;
    padding: 5px;
    margin-top: 14px;
    margin-left: 10px;
    background-color: #e0e0e0;
}

#select {
    border-radius: 5px;
    padding: 5px;
    margin-top: 12px;
    margin-right: 630px;
    background-color: #e0e0e0;
}

.show-all-text {
    color: blue;
    font-size: 10px;
    text-align: left;
    margin-top: 90px;
}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px;
}

.page-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin: 2px;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
    color: #555;
    text-decoration: none;
    border-radius: 4px;
    cursor: pointer;
}

.chevron {
    font-size: 14px;
    margin: 0 4px;

}

.page-button.active {
    background-color: #4CAF50;
    color: white;
}

/*Enroll Detail (Mentor)*/

.enrolldetail {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100vh;
}

.card {
    width: 1150px;
    height: 400px;
    background: #FFFFFF;
    box-shadow: 0px 0px 12px 2px rgba(0, 0, 0, 0.09);
    border-radius: 10px;
    margin: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.card1 {
    width: 1150px;
    height: 200px;
    background: #FFFFFF;
    border-radius: 10px;
    margin: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.card2 {
    width: 400px;
    height: 250px;
    background: #FFFFFF;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    margin: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.title-detail {
    margin-top: 20px;
    font-weight: bold;
    font-size: 15px;
}

.horizontal-line {
    width: 45%;
    height: 1px;
    background-color: #ccc;
    margin: 10px 0;
    position: absolute;
    bottom: 330px;
}

.horizontal-line1 {
    width: 45%;
    height: 1px;
    background-color: #ccc;
    margin: 10px 0;
    position: absolute;
    bottom: 445px;
}

.horizontal-line2 {
    width: 20%;
    height: 1px;
    background-color: #ccc;
    margin: 10px 0;
    position: absolute;
    bottom: 200px;
}

.horizontal-line3 {
    width: 90%;
    height: 1px;
    background-color: #ccc;
    margin: 10px 0;
    position: absolute;
    bottom: 100px;
}

.icon-close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 15px;
    cursor: pointer;
}

.data-item {
    margin-bottom: 50px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.data-item h3 {
    margin-bottom: 5px;
}

.paragraph {
    margin-bottom: 150px;
    font-size: 13px;
    color: #333;
    text-align: center;
}

.button-container {
    /* Properti CSS untuk button-container */
    display: flex;
    gap: 10px;
    /* Jarak antara button */
    margin-top: 20px;
    position: absolute;
    /* Tambahkan properti position */
    bottom: 10px;
    /* Geser button ke atas */
    right: 10px;
    /* Geser button ke kiri */
}

.cancel-button,
.unenrol-button {
    /* Properti CSS untuk button */
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.cancel-button {
    background-color: #faf7f7;
    color: #1909f3;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    border-color: #1909f3;
    cursor: pointer;
    margin-left: 480px;
    margin-top: 10px;
    width: 17%;
}

.unenrol-button {
    background-color: #1909f3;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    margin-left: 5px;
    width: 17%;
    margin-top: 10px;
}

.left-right-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.enrolldetail .left,
.enrolldetail .right {
    flex: 1;
    margin-left: 150px;
    margin-bottom: 80px;
}

.button-container1 {
    /* Properti CSS untuk button-container */
    display: flex;
    gap: 10px;
    /* Jarak antara button */
    margin-top: 20px;
    position: absolute;
    /* Tambahkan properti position */
    bottom: 10px;
    /* Geser button ke atas */
    right: 10px;
    /* Geser button ke kiri */
}

.cancel1-button,
.save-button {
    /* Properti CSS untuk button */
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.cancel1-button {
    background-color: #faf7f7;
    color: #1909f3;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    border-color: #1909f3;
    cursor: pointer;
    margin-left: 480px;
    margin-top: 10px;
    width: 17%;
}

.save-button {
    background-color: #1909f3;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    margin-left: 5px;
    width: 30%;
    margin-top: 10px;
}

#active-edit {
    border-radius: 5px;
    padding: 5px;
    margin-top: 14px;
}


.button-container-start {
    /* Add your styles for the button container here */
    display: flex;
    justify-content: center;
    gap: 10px;
    /* Set the gap between buttons */
    margin-top: 20px;
    margin-right: 250px;
}

.p-start {
    /* Add your styles for the paragraph containing buttons here */
    display: flex;
    justify-content: space-between;
    width: 200px;
    /* Adjust the width as needed */
}


.button-container-create {
    /* Add your styles for the button container here */
    display: flex;
    justify-content: center;
    gap: 10px;
    /* Set the gap between buttons */
    margin-top: -7px;
    margin-right: 250px;
}

.p-create {
    /* Add your styles for the paragraph containing buttons here */
    display: flex;
    justify-content: space-between;
    width: 200px;
    /* Adjust the width as needed */
}

#duration {
    border-radius: 5px;
    padding: 5px;
    margin-top: 1px;
}

.enroll-created {
    margin-top: 1px;
}

.fa-calendar {
    margin-left: 10px;
    margin-top: 30px;
}

#calendar-enrol {
    margin-top: 20px;
}

/*!* Targeting the <input> element *!*/
/*input[type="checkbox"] {*/
/*    margin-left: 20px;*/
/*    margin-top: -5px;*/
/*}*/

/*!* Targeting the <label> element *!*/
/*label {*/
/*    margin-top: 40px;*/
/*    margin-left: -26px;*/
/*    font-size: 13px;*/
/*}*/

#date-start-enrol {
    border-radius: 5px;
    padding: 5px;
    height: 40px;
    margin-top: 10px;
}

#month-start-enrol {
    border-radius: 5px;
    padding: 5px;
    height: 40px;
    margin-top: 10px;
}

#year-start-enrol {
    border-radius: 5px;
    padding: 5px;
    height: 40px;
    margin-top: 10px;
}

#time-start-enrol {
    border-radius: 5px;
    padding: 5px;
    height: 40px;
    margin-top: 10px;
}


#date-end-enrol {
    border-radius: 5px;
    padding: 5px;
    height: 40px;
    margin-top: 10px;
}

#month-end-enrol {
    border-radius: 5px;
    padding: 5px;
    height: 40px;
    margin-top: 10px;
}

#year-end-enrol {
    border-radius: 5px;
    padding: 5px;
    height: 40px;
    margin-top: 10px;
}

#time-end-enrol {
    border-radius: 5px;
    padding: 5px;
    height: 40px;
    margin-top: 10px;
}


/* Settings (Mentor)*/
/* MGeneral */

.left-right-container-settings {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.left-settings {
    flex: 1;
    margin-left: 0px;
    margin-bottom: 80px;
}

.right-settings {
    flex: 1;
    margin-right: 500px;
    margin-bottom: 80px;
}

.p-settings {
    width: 250px;
}

.fa-exclamation-circle {
    color: red;
    margin-right: 30px;
    margin-left: 0px;
    margin-top: -100px;
}

#question-circle {
    color: rgb(5, 245, 241);
    margin-right: 30px;
    margin-top: 5px;
}

.sn {
    margin-top: 30px;
}

.category {
    margin-top: 40px;
}

#fname {
    border-radius: 5px;
}

#sname {
    border-radius: 5px;
    margin-left: 5px;
}

#coursectg {
    margin-top: -20px;
    border-radius: 5px;
}

#id {
    border-radius: 5px;
    margin-top: 10px;
    margin-left: 50px;
}


.button-container-start-date {
    /* Add your styles for the button container here */
    display: flex;
    justify-content: center;
    gap: 10px;
    /* Set the gap between buttons */
    margin-top: 40px;
    margin-right: 250px;
}

.button-container-end-date {
    /* Add your styles for the button container here */
    display: flex;
    justify-content: center;
    gap: 10px;
    /* Set the gap between buttons */
    margin-top: 5px;
    margin-right: 250px;
}


#general-visibility {
    border-radius: 5px;
    padding: 5px;
    margin-top: 10px;
    margin-left: 50px;
}

#date-start {
    border-radius: 5px;
    padding: 5px;
    margin-top: 0px;
    height: 40px;
    margin-left: 50px;
}

#month-start {
    border-radius: 5px;
    padding: 5px;
    margin-top: 0px;
    height: 40px;
}

#year-start {
    border-radius: 5px;
    padding: 5px;
    margin-top: 0px;
    height: 40px;
}

#time-start {
    border-radius: 5px;
    padding: 5px;
    margin-top: 0px;
    height: 40px;
}

#time-start1 {
    border-radius: 5px;
    padding: 5px;
    margin-top: 0px;
    height: 40px;
}


#date-end {
    border-radius: 5px;
    padding: 5px;
    margin-top: 0px;
    height: 40px;
    margin-left: 50px;
}

#month-end {
    border-radius: 5px;
    padding: 5px;
    margin-top: 0px;
    height: 40px;
}

#year-end {
    border-radius: 5px;
    padding: 5px;
    margin-top: 0px;
    height: 40px;
}

#time-end {
    border-radius: 5px;
    padding: 5px;
    margin-top: 0px;
    height: 40px;
}

#time-end1 {
    border-radius: 5px;
    padding: 5px;
    margin-top: 0px;
    height: 40px;
}

.fa-calendar {
    margin-top: 10px;
}


#course-layout {
    border-radius: 5px;
    padding: 5px;
    margin-top: 15px;
}

#hidden-sections {
    border-radius: 5px;
    padding: 5px;
    margin-top: 10px;
}

#format {
    border-radius: 5px;
    padding: 5px;

}

/*Appearance*/

#force {
    border-radius: 5px;
    padding: 5px;
}

#NoA {
    border-radius: 5px;
    padding: 5px;
    margin-top: 20px;
}

#show-gradebook {
    border-radius: 5px;
    padding: 5px;
    margin-top: 30px;
}

#show-reports {
    border-radius: 5px;
    padding: 5px;
    margin-top: 32px;
}

#show-dates {
    border-radius: 5px;
    padding: 5px;
    margin-top: 12px;
}

/*File Uploads*/
#upload {
    border-radius: 5px;
    padding: 5px;
    margin-left: 175px;
}

/*Completion Tracking*/
#enable-track {
    border-radius: 5px;
    padding: 5px;
}

#show-completion {
    border-radius: 5px;
    padding: 5px;
    margin-top: 17px;
}

/*Groups*/
#group-mode {
    border-radius: 5px;
    padding: 5px;
}

#force-group {
    border-radius: 5px;
    padding: 5px;
    margin-top: 14px;
}

#default-group {
    border-radius: 5px;
    padding: 5px;
    margin-top: 13px;
}

/*Role Renaming*/

#id0 {
    margin-top: 5px;
}

#id1 {
    margin-top: 13px;
}

#id2 {
    margin-top: 21px;
}

#id3 {
    margin-top: 21px;
}

#id4 {
    margin-top: 30px;
}

#id5 {
    margin-top: 30px;
}

#id6 {
    margin-top: 20px;
}

#id7 {
    margin-top: 30px;
}

#id8 {
    margin-top: 30px;
}

/*Tags*/
#tags {
    border-radius: 5px;
    padding: 5px;
    margin-top: 13px;
}

/*Button save*/

.cancel {
    background-color: #989494;
    color: black;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    border-color: #1909f3;
    cursor: pointer;
    margin-top: 10px;
    width: 10%;
}

.savedsp {
    background-color: #1909f3;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    margin-left: 350px;
    width: 20%;
    margin-top: 10px;
}


/*Reports (Mentor)*/
.reports-page {
    margin-left: 0px;
}

#choose-module {
    border-radius: 5px;
    padding: 5px;
    width: 400px;
}

#choose {
    border-radius: 5px;
    padding: 5px;
}

.courseparti {
    margin-left: 32px;
}

#jabatan {
    border-radius: 5px;
    padding: 5px;
}

#actions {
    border-radius: 5px;
    padding: 5px;
}

.button-go {
    background-color: #0066FFB2;
    border-radius: 5px;
}

#all-activities {
    border-radius: 5px;
    padding: 5px;
    width: 300px;
}

#order {
    border-radius: 5px;
    padding: 5px;
}

/* (Report) Activity Reports*/
#date-start-reports {
    border-radius: 5px;
    padding: 5px;
    height: 40px;
    margin-top: -20px;
}

#month-start-reports {
    border-radius: 5px;
    padding: 5px;
    height: 40px;
    margin-top: -20px;
}

#year-start-reports {
    border-radius: 5px;
    padding: 5px;
    height: 40px;
    margin-top: -20px;
}


#date-end-reports {
    border-radius: 5px;
    padding: 5px;
    height: 40px;
    margin-top: -20px;
}

#month-end-reports {
    border-radius: 5px;
    padding: 5px;
    height: 40px;
    margin-top: -20px;
}

#year-end-reports {
    border-radius: 5px;
    padding: 5px;
    height: 40px;
    margin-top: -20px;
}

#calendar-reports {
    margin-top: -10px;
}

/*input[type="checkbox"] {*/
/*    margin-left: 20px;*/
/*    margin-top: -5px;*/
/*}*/

/* Targeting the <label> element */
/*label {*/
/*    margin-top: 5px;*/
/*    margin-left: -26px;*/
/*    font-size: 13px;*/
/*}*/

#myCheckbox {
    margin-bottom: 60px;
}


.cancel-reports {
    background-color: #faf7f7;
    color: #1909f3;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    border-color: #1909f3;
    cursor: pointer;
    margin-left: 30px;
    margin-top: 10px;
    width: 10%;
}

.filter {
    background-color: #1909f3;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    margin-left: 310px;
    width: 10%;
    margin-top: -100px;
    margin-bottom: 50px;
}

/*reports(course completion)*/

#myCheckbox1 {
    margin-left: 0px;
}

#label {
    margin-left: 10px;
    white-space: nowrap;
}


#condition-requires {
    border-radius: 5px;
    padding: 5px;
    margin-bottom: 100px;
}

.p-con {
    margin-top: 10px;
}

#course-avail {
    border-radius: 5px;
    padding: 5px;
    margin-top: 1px;
}

#con-require {
    border-radius: 5px;
    padding: 5px;
    margin-top: 1px;
}

#date-start-cc {
    border-radius: 5px;
    padding: 5px;
    height: 40px;
    margin-top: 20px;
}

#month-start-cc {
    border-radius: 5px;
    padding: 5px;
    height: 40px;
    margin-top: 20px;
}

#year-start-cc {
    border-radius: 5px;
    padding: 5px;
    height: 40px;
    margin-top: 20px;
}

#calendar-cc {
    margin-top: 30px;
}

#myCheckbox2 {
    margin-left: -70px;
}

#grade {
    border-radius: 5px;
    padding: 5px;
    height: 40px;
    margin-top: 20px;
}

.p-manual {
    white-space: nowrap;
    margin-left: 310px;
}

#myCheckboxmanual {
    margin-left: 310px;
}

.savechg {
    background-color: #1909f3;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    margin-left: 450px;
    width: 15%;
    margin-top: 10px;
}


#myCheckboxOthers {
    margin-left: 230px;
}

.p-others {
    white-space: nowrap;
    margin-left: 230px;
}

.con-require1 {
    margin-left: 230px;
}

.con-require-text {
    margin-top: 30px;
}

/*batas*/

.scheduled {
    background-color: yellow;
    font-weight: bold;
}

.assignment-container {
    max-height: 300px;
    /* Set the maximum height for the container */
    overflow-y: auto;
    /* Enable vertical scrollbar when content overflows */
}


.assignment .card {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 335px;
    height: auto;
    background: #FFFFFF;
    box-shadow: 0px 0px 12px 2px rgba(0, 0, 0, 0.09);
    border-radius: 10px;
}

.activity .card {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 593px;
    height: auto;
    background: #FFFFFF;
    box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.13);
    border-radius: 10px;
}

.bullet-integrated-list {
    list-style-type: none;
    padding: 0;
}

.bullet-integrated-list li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 10px;
}

.bullet-integrated-list li:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: black;
}

.bullet-integrated-list li:after {
    content: "";
    position: absolute;
    top: 0;
    left: 5px;
    width: 2px;
    height: 100%;
    background-color: black;
}


.progress-checklist {
    list-style-type: none;
    padding: 0;
    position: relative;
    max-height: 500px;
    overflow-y: auto;
}

.progress-checklist li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 20px;
    /* cursor: pointer; */
}

.progress-checklist li h3 {
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: #000;
}

.progress-checklist li span {
    display: inline-block;
    vertical-align: top;
}

.progress-checklist li::before {
    content: "";
    position: absolute;
    top: 10px;
    left: 10px;
    width: 2px;
    height: 100px;
    background-color: #bbb;
}

.progress-checklist li:last-child:before {
    height: 0;
}

.progress-checklist li:after {
    content: "";
    position: absolute;
    top: 4px;
    left: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #bbb;
}

.progress-checklist .completed:before,
.progress-checklist .completed:after {
    background-color: #0066FF;
}

.progress-checklist .current:before,
.progress-checklist .current:after {
    background-color: #3498db;
}

/* Invoice LMS */
.lms-title h3 {
    color: #1E186B;
    font-weight: 600;
    font-size: 36px;
    line-height: 54px;
}

.lms-title .vert-line {
    height: 45px;
}

.invoice .card {
    text-align: center;
    width: 367px;
    height: 624px;
    background: #FFFFFF;
    border: 1px solid #000000;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 10px;
}

.invoice .card h3 {
    font-weight: 500;
    font-size: 20px;
    line-height: 30px;
    color: #6C6C6C;
}

.invoice .card p {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #6C6C6C;
}

.invoice .card .fa-check-circle {
    margin-top: 8px;
    font-size: 24px;
    color: #FFB800;
}

.invoice .card .fa-times {
    margin-top: 8px;
    font-size: 24px;
    color: #464646;
}

.invoice .card ul {
    list-style-type: none;
}

.invoice .card ul li {
    margin-bottom: 24px;
}

/* Order History */
.order-history h3 {
    text-align: center;
    color: #6C6C6C;
    font-weight: 600;
    font-size: 28px;
    line-height: 42px;
}

/* BOOTCAMP PAGE */
.clickable-element {
    cursor: pointer;
}

.bootcamp-home {
    margin-bottom: 32px;
}

.bootcamp-home .course {
    margin-bottom: 64px;
    font-size: 32px;
    font-weight: 700;
}

.bootcamp-home .box {
    display: flex;
    height: 290px;
    max-width: 605px;
    padding: 10px;
    border: 1px solid rgba(0, 0, 0, 0.10);
    margin: 10px auto;
}

.bootcamp-home .box .card {
    margin-top: 40px;
    border-radius: 15px;
    max-width: 245px;
    height: 162px;
    border: none;
    transition: box-shadow 0.3s ease;
}

.bootcamp-home .box .card:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.bootcamp-home .box .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 15px;
    border: none;
}

.bootcamp-home .box .card:hover .overlay {
    opacity: 1;
    border-radius: 15px;
    border: none;
}

.bootcamp-home .box .overlay h4 {
    color: #fff;
    font-size: 18px;
    text-align: center;
    padding: 10px;
}


.bootcamp-home .box h3 {
    padding-top: 40px;
    font-size: 20px;
    font-weight: 600;
}

.bootcamp-home .box p {
    font-size: 20px;
    font-weight: 400;
}

.bootcamp-home .box img {
    border-radius: 15px;
    max-width: 245px;
    height: 162px;
    display: block;
    object-fit: cover;
    padding: 5px;
}

.bootcamp {
    height: auto;
    margin-bottom: 32px;
}

.bootcamp .tabcontent {
    display: none;
}


.bootcamp .tab-content {
    margin: 10px;
}

.bootcamp .tabcontent.active {
    display: block;
}

.bootcamp .card {
    width: 100%;
    height: 250px;
    background-color: #D9D9D9;
}

.bootcamp .card1 {
    width: 100%;
    height: 250px;
    background-color: #fff;
}

/* Mengatur tampilan Dropzone container */
#myDropzone {
    border: 2px dashed #ccc;
    background: #f9f9f9;
    padding: 20px;
    text-align: center;
}

/* Mengatur tampilan pesan default */
#myDropzone .dz-default.dz-message {
    color: #888;
    font-size: 18px;
}

/* Gaya umum untuk komentar */
#comment-container {
    margin-bottom: 20px;
}

#belum-daftar {
    color: gray;
    font-size: 20px;
}

.buy-now-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    border: none;
    text-decoration: none;
    margin-top: 30px;
    cursor: pointer;
    border-radius: 5px;
    font-size: 14px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease;
    text-align: center;
}

/* Add a hover effect */
.buy-now-button:hover {
    background-color: #fff;
    /* Replace this with the desired hover background color */
}

.custom-card {
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.custom-card .card-header {
    background-color: #f1f1f1;
    padding: 10px;
    border-bottom: 1px solid #ccc;
}

.custom-card .card-body {
    padding: 10px;
}

.bootcamp .card.announce {
    height: 120px;
    background: linear-gradient(316deg, #06F 0%, rgba(0, 102, 255, 0.00) 100%);
    box-shadow: 0px 0px 55px 7px rgba(0, 102, 255, 0.25);
    border: 5px solid var(--white-prim, #FFF);
    margin-bottom: 80px;
}

.bootcamp .card.announce p {
    padding-top: 16px;
    color: #FFF;
    font-size: 20px;
    font-weight: 500;
}

.bootcamp .nav-pills li a:hover {
    background-color: #FAAD13;
}

.toggle-list {
    margin-bottom: 10px;
}

.description-container {
    padding: 20px;
    background-color: #f5f5f5;
    border-radius: 5px;
    border: none;
}

.description-title {
    font-size: 24px;
    margin-bottom: 10px;
}

.description-content {
    font-size: 16px;
    line-height: 1.6;
    font-family: 'Poppins', sans-serif;
}

.link-content {
    padding-top: 20px;
}

/* sidebar */
.bootcamp .sidebar {
    z-index: 1;
    height: 100%;
    width: 260px;
    position: fixed;
    top: 60px;
    left: 0;
    border: solid 1px rgba(0, 0, 0, 0.05);
    box-shadow: 1px 0px 2px 0px rgba(0, 0, 0, 0.25);
    background-color: #fff;
    padding: 20px;
    overflow: auto;
}

/* Gaya untuk bilah pengguliran WebKit (Chrome, Safari) */
.bootcamp .sidebar::-webkit-scrollbar {
    width: 8px;
    /* Lebar bilah pengguliran */
}

/* Gaya untuk thumb atau pegangan pada bilah pengguliran WebKit */
.bootcamp .sidebar::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.3);
    /* Warna pegangan */
    border-radius: 4px;
    /* Sudut melengkung pegangan */
}

/* Gaya untuk track atau lintasan pada bilah pengguliran WebKit */
.bootcamp .sidebar::-webkit-scrollbar-track {
    background-color: rgba(0, 0, 0, 0.1);
    /* Warna lintasan */
}

#outputHTML {
    padding: 20px;
    /* Berikan padding pada output agar tampilan lebih baik */
}

#runButtonHTML {
    padding: 5px 10px;
    /* Berikan padding pada tombol agar tampilan lebih baik */
}

/* .fa-lock{
    margin-top: 30px;
} */

.lock-icon {
    position: relative;
    margin-right: 10px;
}

.lock-icon::before {
    display: block;
    width: 10px;
    /* Sesuaikan margin sesuai keinginan Anda */
    height: 1px;
    /* Sesuaikan margin sesuai keinginan Anda */
    margin: 10px auto;
    /* Atur margin sesuai keinginan Anda */
}

.bootcamp .sidebar li a {
    text-decoration: none;
}

.nav-item.active a {
    color: #ff8800;
}

.ms-2 {
    color: rgb(214, 0, 0);
}

.ms-2:hover {
    color: rgb(234, 210, 0);
}

.bootcamp .nav-item a:hover {
    color: #232F65;
}

/* tab */
.bootcamp .tab {
    justify-content: center;
    display: flex;
    align-items: center;
}

/* CSS untuk konten */
.bootcamp .content {
    padding: 20px;
    z-index: 2;
    margin-left: 260px;
}

.bootcamp .content .toggle-label {
    background-color: #0066FF;
    border-radius: 8px;
    color: #fff;
    height: 67px;
    padding-top: 16px;
}

.bootcamp .toggle-content {
    border: none;
}


.bootcamp .img-announce {
    display: flex;
    padding-top: 14px;
    margin: auto;
    justify-content: center;
    align-items: end;
}

.bootcamp .img-announce img {
    margin: auto;
    max-width: 100%;
}

.bootcamp .dropzone {
    margin-top: 30px;
    margin-bottom: 30px;
}

/* Gaya untuk tombol "Add Submission" */
#addSubmissionBtn,
#removeButton {
    background-color: #007bff;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
}

#addSubmissionBtn:hover,
#removeButton:hover {
    background-color: #0056b3;
}

/* CSS untuk konten menu */
.bootcamp .menu-content {
    display: none;
}

.bootcamp .menu-content.active {
    display: block;
}

/* PROFILE SECTION */

.profile {
    height: 45vh;
    background: transparent;
}

/* Box Section */
.box-profile .img-profdet {
    position: absolute;
    z-index: -1;
    top: 10%;
    left: 0;
}

#box {
    padding-bottom: 32px;
}

#box .card-box {
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 1rem;
}

.box-profile h3 {
    font-weight: 500;
    font-size: 24px;
    line-height: 30px;
    text-align: center;
}

.box-profile {
    align-items: center;
    text-align: center;
}

/*.box-profile .card {*/
/*    border-radius: 100%;*/
/*    margin-top: 64px;*/
/*    border: none;*/
/*}*/

.card .img-profile {
    border-radius: 100%;
}

.card .img-profile i {
    border-radius: 100%;
    margin-bottom: 32px;
    font-size: 200px;
}

.box-profile .card p {
    margin-top: 32px;
    font-weight: 500;
    font-size: 24px;
    line-height: 30px;
}

.DocSearch-Button-Keys {
    display: flex;
    min-width: calc(40px + .8em)
}

.DocSearch-Button-Key {
    align-items: center;
    background: #fff;
    border-radius: 3px;
    color: var(--docsearch-muted-color);
    display: flex;
    justify-content: center;
    margin-right: .4em;
    top: -1px;
    border: 1px solid #96a0b080;
    position: initial;
    padding: 3px;
    height: 22px;
    width: 22px
}

.start-85 {
    left: 85% !important;
}

.start-73 {
    left: 73% !important;
}

.start-90 {
    left: 90% !important;
}

.nav-breadcrumb {
    margin-top: 65px;
}

.title-sidebar {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    color: #000000 !important;
    text-decoration: none !important;
}

.title-sidebar>a {
    border-bottom: 2px solid #FFB800;
    color: #000000 !important;
    padding-bottom: 5px;
}

.nav-breadcrumb.fixed-top {
    z-index: 1015;
}

.container-lms {
    margin-top: 5.5rem;
}

.body-container-lms {
    height: 100% !important;
    min-height: 725px !important;
}

/* Style Modal Search */
#modalSearch {
    padding-top: 4rem;
}

#modalSearch .modal-content .modal-body {
    padding: 12px;
}

#modalSearch .modal-content .list-group-item {
    cursor: pointer;
}

#modalSearch .search-img {
    width: 125px;
    height: 80px;
}

/* End LMS Section */

/* Responsive */
@media screen and (max-width: 2000px) {

    .tab5-tl .info,
    .custom {
        width: 40%;
    }

    .tab5-tl .box-right .info {
        order: 1;
        padding-right: 10px;
    }

    .tab5-tl .box-right .custom {
        order: 3;
    }

    .about .card.tim {
        display: none;
    }

    .prakdetail-banner .img-prak-det {
        display: none;
    }
}

@media screen and (max-width: 1400px) {
    .home .img-ellipse {
        position: absolute;
        z-index: -2;
        top: 14%;
        left: 0;
    }

    #program {
        overflow: hidden;
        padding-bottom: 300px;
    }
}

@media screen and (max-width: 1200px) {
    #program {
        overflow: hidden;
        padding-bottom: 200px;
    }

    .partner h3 {
        font-size: 1.3rem;
    }

    .aboutus .img-ellipse-work {
        height: 42px;
    }

    .rapid h1 {
        font-size: 48px;
        margin-top: 80px;
    }

    .why p {
        font-size: 14px;
    }

    .career-card .career-tagline {
        font-size: 42px;
    }
}

@media screen and (max-width: 995px) {
    .prakdetail-banner .card {
        display: none;
    }

    #program {
        overflow: hidden;
        padding-bottom: 150px;
    }

    .partner h3 {
        font-size: 1.1rem;
    }

    .aboutus .img-ellipse-work {
        height: 30px;
        margin-bottom: 7px;
    }

}

@media screen and (max-width: 991px) {
    .navbar {
        max-width: 100%;
    }

    .about-page {
        max-width: fit-content;
    }

    .owl-nav {
        display: none;
    }

    .benefit-pra .card {
        font-size: 80%;
        width: 100%;
    }

    .benefit-pra .card img {
        max-width: 20%;
        height: 20%;
    }

    .home .img-ellipse {
        display: none;
    }

    .prakdetail-banner .img-prak-det {
        display: block;
    }

    .about {
        background-image: none;
    }
}

@media screen and (max-width: 850px) {
    .partner h3 {
        font-size: 1rem;
    }
}

@media screen and (max-width: 767px) {
    .owl-nav {
        display: none;
    }

    .navbar {
        max-width: 100%;
    }

    .box-area {
        text-align: center;
    }

    .prog-carousel {
        width: 100%;
    }

    .benefit-pra .card {
        width: 100%;
        height: 200px;
    }

    .testimonial-home .carousel-item .card .img-testi img {
        width: 70%;
        height: 70%;
    }

    .office1 .card .img-map img {
        display: none;
    }

    .home-tl .btn-tab1 {
        border-radius: 30px 30px 0px 0px;
    }

    .aboutus .card h3 {
        font-size: 80%;
    }

    .aboutus .card p {
        font-size: 80%;
    }

    #program {
        overflow: hidden;
        margin-top: 50px;
        padding-bottom: 100px;
    }

    .aboutus .img-ellipse-work {
        margin-bottom: 4px;
    }

    .rapid h1 {
        font-size: 40px;
        margin-top: 60px;
    }

    .career-card .career-tagline {
        font-size: 36px;
    }
}

@media only screen and (max-width: 500px) {
    .navbar {
        max-width: 100%;
    }

    .program button {
        font-size: 12px;
    }

    .aboutus .card h3,
    p {
        font-size: 80%;
    }

    .home .img-ellipse {
        display: block;
        position: absolute;
        z-index: -2;
        top: 12%;
        left: 0;
    }

    .detail h3 {
        font-size: 32px;
    }

    .detail p {
        font-size: 16px;
    }

    .detail .fake-price {
        font-size: 24px;
    }

    .detail .price {
        font-size: 28px;
    }

    .prakdetail-banner .img-prak-det {
        display: block;
    }

    .benefit .card h3 {
        font-size: 13px;
    }

    .partner .img-ellipse-partner {
        display: none;
    }

    .testimonial-home .carousel-item .card .img-testi img {
        width: 60%;
        height: 60%;
    }

    .office1 .card p {
        font-size: 14px;
    }

    .office1 .card h3 {
        font-size: 54px;
    }

    .our-team .card {
        max-width: 90%;
    }

    .timeline {
        max-width: 100%;
    }

    .about p {
        color: #000;
        font-size: 16px;
    }

    .benefit-pra .card {
        border-radius: 8px;
        width: 100%;
        height: 200px;
    }

    .box-profile {
        max-width: 100%;
    }

    .home-tl {
        display: flex;
        height: auto;
        max-width: 100%;
        background: #0066FF;
    }

    .home-tagline p {
        margin-top: 15px;
        margin-bottom: 30px;
    }

    .home-tagline h3 {
        font-size: 36px;
        line-height: 1.5;
    }

    .home-tl .tab .tablinks {
        max-width: 100%;
    }

    .home-tl .card-container {
        max-width: 100%;
    }

    .home-tl .btn-tab1 {
        border-radius: 30px 30px 0px 0px;
    }

    .home-tl .btn-tab5 {
        border-radius: 0;
    }

    .home-tl .tab-content .card.tab4 {
        background: #D9D9D9;
        border-radius: 15px;
        width: 100%;
        height: 226px;
    }

    .home-tl .card .tab-content .card.tab3 {
        background-color: #FFB800;
    }

    .home-tl .card .tab-content .card.tab3 .jennyhouse {
        font-size: 12px;
        margin: 4px;
    }

    .home-tl .card .tab-content .card.tab3 img {
        display: none;
    }

    .lowongan .card {
        max-width: 98%;
    }

    .prakdetail-banner .card {
        display: none;
    }

    .prak-modul ul#accordion {
        margin-left: -32px;
    }

    .about .card.tim {
        display: block;
    }

    #program {
        overflow: hidden;
        padding-bottom: 70px;
    }

    .rapid h1 {
        font-size: 32px;
    }

    .why h1 {
        font-size: 32px;
    }

    .career-card .career-tagline {
        font-size: 32px;
    }
}

.icon-container,
.icon-container>i,
.icon-container>img {
    height: 20px;
    width: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px !important;
}