.hero:before {
  position: absolute;
  content: "";
   background-image: linear-gradient(to right, 
    rgba(29, 233, 182, 0.5), 
    rgba(142, 45, 226, 0.5));
  inset: 0;
 background-size: 200% 200%;
    animation: gradient 10s ease infinite;
}
@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@media (min-width: 1034px) {
  .hero:after {
    position: absolute;
    content: "";
    width: 40%;
    background-image: linear-gradient(to right, 
    rgba(29, 233, 182, 0.5), 
    rgba(142, 45, 226, 0.5));
    top: 0;
    bottom: 0;
    background-size: 200% 200%;
    animation: gradient 8s ease infinite;
  }
}
@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
/*.modal-content {*/
/*  background-image: linear-gradient(to top right, */
/*    rgba(29, 233, 182), */
/*    rgba(142, 45, 226));*/
/*  color:#fff;*/
/*}*/

/*Untuk Tombol Bootstrap*/
/*.btn {*/
/*  background-color: #000000;*/
/*  color: #ffffff;*/
/*  border: none;*/
/*}*/

/*.btn:hover {*/
/*  background-color: #ffffff;*/
/*  color: #000000;*/
/*}*/

.btn-canva {
  background-image: linear-gradient(to right, 
    rgba(29, 233, 182, 0.5), 
    rgba(142, 45, 226, 0.5));
  color:#fff;
  border: none;
}
.btn-canva:hover {
  background-image: linear-gradient(to right, 
    rgba(29, 233, 182, 0.8), 
    rgba(142, 45, 226, 0.8));
    color: #fff;
  border: none;
}
.btn-canva-max {
  background-image: linear-gradient(to right, 
    rgba(29, 233, 182, 0.8), 
    rgba(142, 45, 226, 0.8));
  color:#fff;
  border: none;
}
.btn-canva-max:hover {
  background-image: linear-gradient(to left, 
    rgba(29, 233, 182), 
    rgba(142, 45, 226));
    color: #fff;
  border: none;
}
/*.btn-danger {*/
/*  background-image: linear-gradient(to right, */
/*    rgba(29, 233, 182, 0.5), */
/*    rgba(142, 45, 226, 0.5));*/
/*  border: none;*/
/*}*/

input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"] {
  background-color: rgba(255, 255, 255, 0.3);
  border: none;
  border-bottom: 1px solid  rgba(142, 45, 226, 0.3);
  border-right: 1px solid  rgba(142, 45, 226, 0.3);
  border-top: 1px solid  rgba(142, 45, 226, 0.1);
  outline: none;
}

.select {
background-color: rgba(255, 255, 255, 0.3);
color: white;
}

.form-select .form-select-arrow {
  border-color: #7c4dff transparent transparent; /* warna panah ke bawah */
}

.focus:focus {
    background-color:rgba(255, 255, 255, 0.3);
}
.textarea {
  background-color:rgba(255, 255, 255, 0.3);
  border: none;
  border-bottom: 1px solid  rgba(142, 45, 226, 0.3);
  border-right: 1px solid  rgba(142, 45, 226, 0.3);
  border-top: 1px solid  rgba(142, 45, 226, 0.1);
  outline: none;
}



.bg-canva {
    background-image: linear-gradient(to right, 
    rgba(18, 150, 176, 0.5), 
    rgba(142, 45, 226, 0.5));
    border: none;
    background-size: 200% 200%;
    animation: gradient 15s ease infinite;
}
@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
/*Kode di atas adalah untuk menambahkan animasi pada background dengan class bg-canva agar berubah warna*/

/*Awal animasi gelembung*/
@keyframes bubble {
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(-5px);
  }
}

.bubble {
  position: relative;
  animation: bubble 1s ease-in-out infinite alternate;
}

@keyframes bubblex {
  0% {
    transform: translateX(-5);
  }
  100% {
    transform: translateX(5px);
  }
}

.bubblex {
  position: relative;
  animation: bubblex 1s ease-in-out infinite alternate;
}
/*@media (max-width: 767px) {*/
/*  .bubble {*/
    
/*    top: 5px;*/
/*  }*/
/*}*/

/*.bubble:before {*/
/*  content: "";*/
/*  width: 10px;*/
/*  height: 10px;*/
/*  border-radius: 50%;*/
/*  background-color: rgba(255, 255, 255, 0.3);*/
/*  display: block;*/
/*}*/
.bubble:hover{
    animation-play-state: paused;
}
.bubblex:hover{
    animation-play-state: paused;
}
/*Akhir dari animasi gelembung*/

.card {
  position: relative;
}

.bg-team {
    background-image: linear-gradient(to bottom, 
    rgba(29, 233, 182, 0.5), 
    rgba(142, 45, 226, 0.5));
  border: none;
}
.bg-canva-max {
    background-image: linear-gradient(to left, 
    rgba(18, 150, 176, 0.9), 
    rgba(142, 45, 226, 0.9));
   border: none;
    background-size: 200% 200%;
    animation: gradient 10s ease infinite;
}
@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.bg-footer-max {
    background-image: linear-gradient(to left, 
    rgba(142, 45, 226, 0.5),
    rgba(142, 45, 226, 0.8));
  border: none;
}
.bg-trans {
 background-image: linear-gradient(to right, 
    rgba(29, 233, 182, 0.3), 
    rgba(142, 45, 226, 0.3));
  border: none;
}

body {
  font-family: 'Montserrat', sans-serif;
}

.card-order {
    background-image: linear-gradient(to top, 
    rgba(29, 233, 182, 0.8), 
    rgba(142, 45, 226, 0.8));
}

/*h2 {*/
/*  background: -webkit-linear-gradient(rgba(142, 45, 226, 0.8),rgba(29, 233, 182, 0.8),rgba(255, 255, 255, 0.8));*/
/*  -webkit-background-clip: text;*/
/*  -webkit-text-fill-color: transparent;*/
/*  font-size: 48px;*/
/*  font-weight: bold;*/
/*}*/

.tittle-canva {
  background: -webkit-linear-gradient(rgba(142, 45, 226, 0.8),rgba(29, 233, 182, 0.8));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 48px;
  font-weight: bold;
}

.post-title:hover {
  background: -webkit-linear-gradient(rgba(142, 45, 226, 0.9),rgba(29, 233, 182, 0.9));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 48px;
  font-weight: bold;
}

.recent-posts .post-box:hover .post-title {
  background: -webkit-linear-gradient(rgba(142, 45, 226, 0.9),rgba(29, 233, 182, 0.9));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 28px;
  font-weight: bold;
}

.carousel-item img {
  border-top-right-radius: 20px;
  border-bottom-left-radius: 20px;
}

.carousel-item .badge {
  position: absolute;
  top: 10px;
  left: 10px;
}
.badge-card {
  position: absolute;
  top: 10px;
  left: 10px;
  margin-bottom: -3px;
  z-index:1;
}

.badge-container {
  position: absolute;
  top: 10px;
  left: 10px;
}

.glightbox-slide .glightbox-prev,
.glightbox-slide .glightbox-next {
  display: none;
}


/*Membuat Bubble Container*/
/*.bubble-container {*/
/*  display: flex;*/
/*  justify-content: center;*/
/*  align-items: center;*/
/*  height: 100vh;*/
/*}*/

/*.bubble {*/
/*  width: 50px;*/
/*  height: 50px;*/
/*  background-color: blue;*/
/*  border-radius: 50%;*/
/*  animation: float 1s ease-in-out infinite;*/
/*}*/

/*@keyframes float {*/
/*  0% {*/
/*    transform: translateY(0);*/
/*  }*/
/*  50% {*/
/*    transform: translateY(-20px);*/
/*  }*/
/*  100% {*/
/*    transform: translateY(0);*/
/*  }*/
/*}*/
/*Akhir bubble container*/

.form-control::-webkit-input-placeholder {
  color: white;
}

.form-control::-moz-placeholder {
  color: white;
}

.form-control:-ms-input-placeholder {
  color: white;
}

.form-control::-ms-input-placeholder {
  color: white;
}

.form-control::placeholder {
  color: white;
}