html,
body {
  max-width: 100%;
  overflow-x: hidden;
  background-color: #eeeeee;
}
.bg-light {
  background: #ffb402 !important;
}
.bg-gradient-maroon {
  background: linear-gradient(180deg, #841005 0%, #8c5650 100%);
}

.bgc-maroon {
  background: #841005 !important;
}

.bg-brown {
  background: #bc7c00 !important;
}

.bg-brown2 {
  background-color: #8c5e00 !important;
}

.bg-brown3 {
  background-color: #8b5c00;
}

.bg-brown4 {
  background-color: #935800;
}

.bg-brokenWhite {
  background-color: #eeeeee !important;
}

.bg-grey1 {
  background-color: #595959;
}

.bg-grey2 {
  background-color: #e2e2e2;
  /* border-radius: 1rem; */
  border-radius: 1rem 0px 0px 1rem;
}
.bg-grey3 {
  background-color: #797979;
}

.btn-block {
  width: 100%;
  font-family: "Poppins", sans-serif;
}

.btn-status:hover {
  background-color: #3a2802 !important;
}

.btn-done:hover {
  background-color: #363636 !important;
}
.img-circle {
  width: 100px;
}
.btn-red {
  background: #ffb402 !important;
}
#btnLogin,
#btnRegis {
  padding: 15px;
  border-radius: 1rem;
}
.text-right {
  text-align: right !important;
}
.carousel-wrapper {
  width: 100%;
  margin: auto;
  position: relative;
  text-align: center;
  font-family: sans-serif;
  justify-content: center;
}

.owl-carousel .owl-nav {
  overflow: hidden;
  height: 0px;
}
.owl-theme .owl-nav .owl-nav.active span,
.owl-theme .nav-button .nav-button:hover span {
  background: #461800 !important;
}
.owl-carousel .owl-item {
  text-align: center;
  transition: all 0.3s ease-in-out;
}

.owl-carousel .owl-item .card-body {
  padding: 20px;
  position: relative;
}
.owl-carousel .owl-item .card {
  opacity: 0.2;
  transform: scale3d(0.8, 0.8, 0.8);
  transition: all 0.3s ease-in-out;
}

.owl-carousel .owl-item .card .card-img-top {
  height: 210px;
  object-fit: cover;
  border-radius: 20px 20px 0px 0px;
}

.owl-carousel .owl-item.active.center .card {
  opacity: 1;
  transform: scale3d(1, 1, 1);
  z-index: 2;
}

.owl-carousel .owl-item .img-produk {
  opacity: 0.8;
  transform: scale3d(0.8, 0.8, 0.8);
  transition: all 0.3s ease-in-out;
}

.owl-carousel .owl-item.active.center .img-produk {
  opacity: 1;
  transform: scale3d(1.2, 1.2, 1.2);
  /* width: 500px; */
}

.owl-carousel .owl-stage-outer {
  overflow-y: auto !important;
  padding-bottom: 40px;
  padding-top: 40px;
}
.owl-carousel .nav-button {
  cursor: pointer;
  position: absolute;
  top: 40% !important;
}
.owl-carousel .owl-prev.disabled,
.owl-carousel .owl-next.disabled {
  pointer-events: none;
  opacity: 0.25;
}
.owl-carousel .owl-prev {
  left: -10px;
}
.owl-carousel .owl-next {
  right: -10px;
}
.owl-theme .owl-nav [class*="owl-"] {
  color: #fff;
  font-size: 80px;
  background: none;
  /* border-radius: 20px; */
}
.owl-carousel .prev-carousel:hover {
  background-position: 0px -53px;
  background: none;
}
.owl-carousel .next-carousel:hover {
  background-position: -24px -53px;
  background: none;
}
span.img-text {
  text-decoration: none;
  outline: none;
  transition: all 0.4s ease;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  cursor: pointer;
  width: 100%;
  font-size: 23px;
  display: block;
  text-transform: capitalize;
}
span.img-text:hover {
  color: #2caae1;
}
unselect {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.shadow:hover {
  -webkit-box-shadow: 0 0 11px rgba(33, 33, 33, 0.2);
  box-shadow: 0 0 11px rgba(33, 33, 33, 0.2);
}
.shadow::after {
  -webkit-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
}
.btn-hover-whatsapp {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  padding: 12px 40px;
  text-align: center;
  border: none;
  background-size: 300% 100%;
  background-image: -webkit-gradient(linear, left top, right top, from(#0ba360), color-stop(#3cba92), color-stop(#30dd8a), to(#2bb673));
  background-image: linear-gradient(to right, #0ba360, #3cba92, #30dd8a, #2bb673);
  -webkit-box-shadow: 0 4px 15px 0 rgba(23, 168, 108, 0.75);
  box-shadow: 0 4px 15px 0 rgba(23, 168, 108, 0.75);
  border-radius: 50px;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.btn-hover-whatsapp:hover {
  background-position: 100% 0;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.btn-hover-email {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  padding: 12px 40px;
  text-align: center;
  border: none;
  background-size: 300% 100%;
  background-image: -webkit-gradient(linear, left top, right top, from(#eb3941), color-stop(#f15e64), color-stop(#e14e53), to(#e2373f));
  background-image: linear-gradient(to right, #eb3941, #f15e64, #e14e53, #e2373f);
  -webkit-box-shadow: 0 5px 15px rgba(242, 97, 103, 0.4);
  box-shadow: 0 5px 15px rgba(242, 97, 103, 0.4);
  border-radius: 50px;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.btn-hover-email:hover {
  background-position: 100% 0;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.btn-hover:focus {
  outline: none;
}

#innerTab {
  margin-top: 23px;
  margin-bottom: 10px;
}
.card-trx {
  border-left: 3px solid blue;
}
.container_in {
  margin-top: 8rem;
  margin-bottom: 3rem;
}
.nav-x .nav-link .active {
  background-color: #8b5400 !important;
  color: #531b00 !important;
}
.nav-x {
  background-color: white !important;
  color: #531b00 !important;
  font-weight: 550;
  margin: 10px 20px;
  border-radius: 5px;
  border: 2px solid white !important;
}
.hovering,
.nav-x {
  -webkit-transition: 0.3s;
  transition: 0.3s;
  background-color: white !important;
}
.hovering:hover {
  background-color: #8b5400;
}
#imgHuawei {
  -webkit-transition: -webkit-transform 0.2s;
  transition: -webkit-transform 0.2s;
  transition: transform 0.2s;
  transition: transform 0.2s, -webkit-transform 0.2s;
}
#imgHuawei:hover {
  -webkit-transform: scale(2);
  transform: scale(2);
}
.subtitle {
  color: #2caae1;
  font-weight: bold;
  font-size: 1.2rem;
}
.yellow {
  color: yellow;
}
.pointer {
  cursor: pointer;
}
section img {
  max-width: 100%;
}
.navbar-light {
  background-color: #ffb402;
}
.navbar-light .nav-link {
  color: #4d2e00 !important;
  font-weight: 400px;
  font-family: "Poppins", sans-serif !important;
}
.navbar-light a {
  color: #4d2e00;
}
.navbar-light a:hover,
.navbar-light a:focus {
  color: #ffb402;
}
.title-sub {
  color: #461800 !important;
}

.sub-brown {
  color: #303030 !important;
}

.sub-brown1 {
  color: #474747;
  font-size: 10px;
  margin-top: -20px;
}
.sub-grey1 {
  color: #484848 !important;
}

.color-brown1 {
  color: #934e2d;
}

.color-brown2 {
  color: #8b5c00;
}
/* .nav-pills .nav-link .active {
  color: #241400 !important;
}
.nav-pills .nav-link {
  color: #d9d9d9;
} */

.hoverImage {
  -webkit-transition: -webkit-transform 0.2s;
  transition: -webkit-transform 0.2s;
  transition: transform 0.2s;
  transition: transform 0.2s, -webkit-transform 0.2s;
}
.hoverImage:hover {
  -webkit-transform: scale(2);
  transform: scale(2);
  z-index: 99999 !important;
}
.subtitle-nav {
  margin-top: -28px;
  margin-bottom: 1rem;
  color: #474747;
  font-size: 0.7rem;
}
h6.title-nav {
  font-size: 0.9rem;
  font-weight: bold;
  color: #8b5c00;
  text-decoration: none;
  cursor: pointer;
}
h6.title-nav:hover {
  color: #ffa602;
  text-decoration: none;
}
.text-red {
  color: #ca2221;
}
.text-hitam-custom {
  margin-bottom: auto;
}
@media (min-width: 992px) {
  .full-menu.show {
    display: block;
    width: 100%;
    max-width: 1050px;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    border-radius: 1rem;
    margin-top: 0.5rem;
    margin: 5% auto;
    left: 0;
    right: 0;
  }
  .dropdown-x {
    position: static !important;
  }
  .dropdown-menu-x {
    -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
    margin-top: 0px !important;
    width: 100% !important;
  }
  #judul1 {
    font-size: 2.4rem;
  }
}
@media (min-width: 992px) {
  .mid-menu.show {
    display: block;
    width: 50%;
    max-width: 700px;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    border-radius: 1rem;
    margin-top: 0.5rem;
    margin: 5% auto;
    left: 0;
    right: 0;
  }
  .dropdown-x {
    position: static !important;
  }
  .dropdown-menu-x {
    -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
    margin-top: 0px !important;
    width: 100% !important;
  }
  #judul1 {
    font-size: 2.4rem;
  }
}

@media (min-width: 992px) {
  .profile-menu.show {
    display: block;
    width: 100%;
    max-width: 850px;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    border-radius: 1rem;
    /* margin-top: 0.5rem; */
    /* margin: auto 5%; */
    /* left: 0; */
    right: 5%;
    padding: 0;
  }
  .dropdown-x {
    position: static !important;
  }
  .dropdown-menu-x {
    -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
    margin-top: 0px !important;
    width: 100% !important;
  }
  #judul1 {
    font-size: 2.4rem;
  }
}

@media (max-width: 992px) {
  .img-navbar {
    display: none;
  }
  .nav-judul {
    display: none;
  }
  .non-mobile {
    display: none;
  }
  .dropdown-menu-x {
    margin-left: -12px;
  }
  .navbar-collapse.collapse.show {
    max-height: 90vh;
    overflow-y: auto;
  }
  #judul1 {
    font-size: 2rem;
  }
  #btnLogin,
  #btnRegis {
    width: 100%;
  }
}

/* .bg-grey2 {
  background-color: #e2e2e2;
  border-radius: 1rem 0px 0px 1rem;
  width: 96% !important;
} */

select.form-control:not([size]):not([multiple]) {
  height: calc(3.25rem + 2px);
}
input.form-control {
  background-color: #cccccc;
  color: #727272 !important;
}
input[type="radio"] {
  height: 13px;
}
input[type="radio"] {
  border: var(--color-text-dark);
  border-radius: 16px;
  background-color: var(--color-ghost);
  color: var(--color-text-dark);
  padding: 15px 20px;
  width: auto;
}
.form-check-label {
  padding-top: 9px;
  padding-left: 1rem;
}
.form-check-input[type="radio"] {
  border-radius: 30%;
}

.form-check-input:checked {
  background-color: #8c5e00 !important;
  border-color: #8c5e00 !important;
}

.text-left {
  text-align: left;
}
.img-kolaborasi {
  height: 100px;
}
.color-white {
  color: #fff;
}
.btn-fill-secondary {
  background-color: #fff;
}
.bg-light {
  color: #fff;
}
.bg-light h1,
.bg-light h2,
.bg-light h3,
.bg-light h4,
.bg-light h5,
.bg-light h6,
.bg-light label,
.bg-light p,
.bg-light .subtitle {
  color: #fff;
}
.bg-light .text-muted {
  color: #fff !important;
}
.bg-light a {
  color: #000 !important;
}
.bg-light a:hover {
  color: #ffc107 !important;
}
.bg-light1 {
  background: #ffb402 !important;
  color: #461800 !important;
}
.platform-container {
  height: 330px;
  margin: 5px;
}
.footer-social-link {
  font-size: 2.2rem !important;
}
.footer-social-link a {
  color: #999ab8;
  margin: 10px;
}
.footer-social-link a:hover,
.footer-social-link a:focus {
  color: #ca2221;
}

/* -----------------
    Carousel Produk
  ------------------ */
.carousel-control-next-icon {
  background-color: #461800 !important;
  left: -20px !important;
}

.carousel-control-prev-icon {
  background-color: #461800 !important;
}

/* -----------------
        End Carousel Produk
      ------------------ */
/*# sourceMappingURL=custom.min.css.map */

#imgprev {
  background-color: antiquewhite;
  height: 200px;
  width: 200px;
  border: 3px solid #ffff;
  border-radius: 50%;
  transition: background ease-out 200ms;
}

#preview {
  position: relative;
}

.ubahFoto[type="file"] {
  display: none;
}

#upload-button {
  padding: 18px 21px 18px 21px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background-color: rgb(131, 132, 133);
  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  transition: background-color ease-out 120ms;
  position: absolute;
  right: 4%;
  bottom: 0%;
}

#upload-button:hover {
  background-color: #461800;
}

.img-course {
  position: relative;
  z-index: 1;
  /* bottom: -20px; */
}

.img-course img {
  width: 100%;
  height: 20rem;
  object-fit: cover;
  border-radius: 20px;
}

.img-course:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
  position: absolute;
  bottom: 0;
  border-radius: 20px;
}

.course-detail {
  position: relative;
  z-index: 1;
}

.course-img {
  width: 100%;
  margin-top: -100px;
  border-radius: 10px;
}

.course-detail p {
  font-size: 18px;
  font-weight: 600;
}

.course-detail h4,
p {
  margin-top: 10px;
}

.detail-course .silabus {
  font-size: 18px;
  font-weight: 560;
  color: #ec8e00;
  margin-top: -20px;
}

.detail-course .deskripsi {
  color: #4d2e00 !important;
}
.detail-course .desc p {
  font-size: 16px !important;
}
.detail-course .info {
  font-size: 16px !important;
  color: #303030;
  font-weight: 550 !important;
}
.detail-course strong {
  color: #4d2e00 !important;
  font-size: 18px;
}

@media (max-width: 600px) {
  .img-course {
    position: relative;
    z-index: 1;
    /* bottom: -20px; */
  }

  .img-course img {
    width: 100%;
    height: 10rem;
    object-fit: cover;
    border-radius: 20px;
  }

  .img-course:after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
    position: absolute;
    bottom: 0;
    border-radius: 20px;
  }
  .course-detail {
    position: relative;
    z-index: 1;
  }

  .course-img {
    width: 7rem;
    margin-top: -15%;
    border-radius: 10px;
  }

  .course-detail h4,
  p {
    margin-top: 10px;
    text-align: center;
  }
}

.detail-course .row {
  margin-top: 20px;
}

@media (max-width: 600px) {
  .detail-course .row {
    margin-top: 10px;
  }

  .detail-course .deskripsi {
    text-justify: justify;
  }
}

.img-tk {
  position: relative;
  z-index: 1;
  /* bottom: -20px; */
}

.img-tk img {
  width: 100%;
  height: 20rem;
  object-fit: cover;
}

.img-tk:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to top, rgba(0, 0, 0.8, 1), rgba(0, 0, 0, 0.2));
  position: absolute;
  bottom: 0;
}

@media (max-width: 600px) {
  .img-tk {
    position: relative;
    z-index: 1;
    /* bottom: -20px; */
  }

  .img-tk img {
    width: 100%;
    height: 10rem;
    object-fit: cover;
  }

  .img-tk:after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
    position: absolute;
    bottom: 0;
  }
}