.progress-container {
    display: flex;
    align-items: center;
    font-family: Arial, sans-serif;
    font-size: 16px;
    gap: 10px;
  }

  .progress-bar {
    position: relative;
    flex: 1;
    height: 2px;
    background-color: #e6e9ec;
    border-radius: 4px;
    overflow: hidden;
  }

  .progress-fill {
    height: 100%;
    background: linear-gradient(to right, #E43636, #6EC207);
    border-radius: 4px;
    transition: width 0.4s ease;
  }

  /* Polaroid Photo Effect by igniel.com */
  figure, figcaption {
    display: block;
  }
  #polaroid{
    width:100%;
    padding:0px 10px;
    margin:auto;
    text-align: center;
  }
  #polaroid figure{
    position:relative;
    width: auto;
    max-width: 400px; /* Lebar maksimal gambar */
    margin: 20px auto 0px;
    padding: 6px 8px 10px 8px;
    display:inline-block;
    -webkit-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
    -moz-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
    box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
    background-color: #eee6d8;
    -webkit-transform:rotate(-1deg);
    -moz-transform: rotate(-1deg);
    -o-transform: rotate(-1deg);
    -ms-transform: rotate(-1deg);
    transform: rotate(-1deg);
    -webkit-backface-visibility:hidden;
  }
  #polaroid figure:nth-child(even) {
    margin:20px 18px 20px 25px;
    -webkit-transform:rotate(2deg);
    -moz-transform: rotate(2deg);
    -o-transform: rotate(2deg);
    -ms-transform: rotate(2deg);
    transform: rotate(2deg);
    -webkit-backface-visibility:hidden;
    -webkit-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
    -moz-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
    box-shadow: -4px 4px 8px -4px rgba(0, 0, 0, .75);
  }
  #polaroid figure:before {
    content: '';
    display: block;
    position: absolute;
    left: 5px;
    top: -10px;
    width: 75px;
    height: 25px;
    z-index: 1;
    background-color: var(--accent);
    -webkit-transform: rotate(-12deg);
    -moz-transform: rotate(-12deg);
    -o-transform: rotate(-12deg);
    -ms-transform: rotate(-12deg);
  }
  #polaroid figure:nth-child(even):before {
    left:unset;
    right:10px;
    top:-10px;
    width: 55px;
    height: 25px;
    z-index: 1;
    -webkit-transform: rotate(12deg);
    -moz-transform: rotate(12deg);
    -o-transform: rotate(12deg);
    -ms-transform: rotate(12deg);
  }
  #polaroid img{
    max-width: 100%;
    width: 100%;
    height: auto;
  }
  #polaroid figcaption{
    text-align:center;
    font-family: cursive, Arial, Helvetica, sans-serif;
    color:#454f40;
    font-style:italic;
    letter-spacing:0.09em;
    margin-top:10px;
  }

  .author-username{
    font-family: cursive, Arial, Helvetica, sans-serif;
  }

  /* Rocket Back to Top by igniel.com */
  .ignielRocket svg {width:50px; height:50px; transition:all .3s ease;}
  .ignielRocket svg path {fill:var(--accent);}
  .ignielRocket:hover svg, .ignielRocket.launch svg {transform:rotate(-45deg);}
  .ignielRocket:hover svg path, .ignielRocket.launch svg path {fill:var(--heading-color);}
  .ignielRocket {visibility:hidden; opacity:0; position:fixed; right:30px; z-index:99; cursor:pointer; border-radius:100px; bottom:-30px;}
  .ignielRocket.show {visibility:visible; opacity:1; bottom:30px; transition: all .5s ease;}
  .ignielRocket.launch {visibility:visible; opacity:1; bottom:0px; transition: all 0s ease;}
  .ignielRocket.launch:after {background:url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M4,10A1,1 0 0,1 3,9A1,1 0 0,1 4,8H12A2,2 0 0,0 14,6A2,2 0 0,0 12,4C11.45,4 10.95,4.22 10.59,4.59C10.2,5 9.56,5 9.17,4.59C8.78,4.2 8.78,3.56 9.17,3.17C9.9,2.45 10.9,2 12,2A4,4 0 0,1 16,6A4,4 0 0,1 12,10H4M19,12A1,1 0 0,0 20,11A1,1 0 0,0 19,10C18.72,10 18.47,10.11 18.29,10.29C17.9,10.68 17.27,10.68 16.88,10.29C16.5,9.9 16.5,9.27 16.88,8.88C17.42,8.34 18.17,8 19,8A3,3 0 0,1 22,11A3,3 0 0,1 19,14H5A1,1 0 0,1 4,13A1,1 0 0,1 5,12H19M18,18H4A1,1 0 0,1 3,17A1,1 0 0,1 4,16H18A3,3 0 0,1 21,19A3,3 0 0,1 18,22C17.17,22 16.42,21.66 15.88,21.12C15.5,20.73 15.5,20.1 15.88,19.71C16.27,19.32 16.9,19.32 17.29,19.71C17.47,19.89 17.72,20 18,20A1,1 0 0,0 19,19A1,1 0 0,0 18,18Z' fill='%23ff5722'/></svg>") no-repeat center center; background-size:30px 30px; content:''; display:block; width:30px; height:30px; transform:rotate(90deg); position:relative; text-align:center; margin:auto;}
  

  


/*------------------TESTIMONI---------------------*/

#section-testimoni {
  background: #ffffff;
  color: #1c1c21;
  padding-bottom: 20px;
}

.testi-wrap {
  position: relative;
  height: 725px;
  margin-top: -80px;
}

.client-single {
  margin-top: 20px;
  text-align: center;
  position: absolute;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}

.client-info,
.client-comment {
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.client-single.inactive .client-comment,
.client-single.inactive .client-info {
  display: none;
}

.client-single.inactive .client-comment,
.client-single.inactive .client-info {
  opacity: 0;
  visibility: hidden;
}

.client-single.position-1 {
  -webkit-transform: scale(0.65);
  transform: scale(0.65);
}

.client-single.position-2 {
  left: -40px;
  top: 105px;
}

.client-single.position-3 {
  left: -60px;
  top: 240px;
  -webkit-transform: scale(0.4) !important;
  transform: scale(0.4) !important;
}

.client-single.position-4 {
  left: 55px;
  top: 380px;
}

.client-single.position-5 {
  top: 30px;
  right: 55px;
}

.client-single.position-6 {
  top: 225px;
  right: -40px;
}

.client-single.position-7 {
  top: 400px;
  right: 45px;
  -webkit-transform: scale(0.4) !important;
  transform: scale(0.4) !important;
}

.client-single.active {
  top: 10%;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  z-index: 10;
  width: 70%;
}

.client-single.active .client-comment,
.client-single.active .client-info {
  -webkit-transition-delay: 0.6s;
  transition-delay: 0.6s;
}

.client-single:not(.active) {
  -webkit-transform: scale(0.55);
  transform: scale(0.55);
  z-index: 99;
}

.client-single.active .client-img {
  width: 160px;
  height: 160px;
  margin: 0 auto 24px;
  position: relative;
}

.client-single.active .client-img:before {
  border-radius: 100%;
  content: "";
  background-image: -webkit-gradient(linear, left top, left bottom, from(#467A85), to(#215084));
  background-image: linear-gradient(180deg, #467A85 0%, #215084 100%);
  padding: 5px;
  width: 160px;
  height: 160px;
  top: -4px;
  left: 0px;
  position: absolute;
  z-index: -1;
}

.client-single .client-img img {
  width: 150px;
  border-radius: 50%;
  border: 8px solid var(--accent);
  cursor: pointer;
}

.client-single.active .client-img img {
  max-width: 160px;
  margin: 0 auto 24px;
  border: 0;
}

.client-comment {
  padding: 0 30px;
}

.client-comment h3 {
  font-size: 22px;
  line-height: 32px;
  color: #467A85;
}

.client-comment span i {
  font-size: 30px;
  color: #467A85;
  margin: 20px 0 20px;
  display: inline-block;
}

.client-info h3 {
  color: #000;
  font-weight: 200;
  margin-bottom: 4px;
}

.client-info p {
  color: #0084ff;
  text-transform: uppercase;
  font-size: 12px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  #section-testimoni .section-heading h2 {
    font-size: 30px;
  }
  .client-comment h3 {
    font-size: 18px;
    line-height: 28px;
  }
  .client-single.active {
    width: 60%;
  }
  .client-single:not(.active) {
    -webkit-transform: scale(0.55);
    transform: scale(0.35);
  }
  .client-single.position-3,
  .client-single.position-7 {
    -webkit-transform: scale(0.3) !important;
    transform: scale(0.3) !important;
  }
  .client-single.active .client-img img {
    max-width: 100px;
  }
  .client-single.active .client-img::before {
    padding: 5px;
    width: 108px;
    height: 108px;
    top: -4px;
    left: 6px;
  }
  .client-single.active .client-img {
    width: 120px;
    height: 100px;
  }
  .testi-wrap {
    height: 580px;
  }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
  #section-testimoni .section-heading h2 {
    font-size: 30px;
  }
  .client-comment h3 {
    font-size: 14px;
    line-height: 26px;
  }
  .client-single.active {
    width: 60%;
  }
  .client-comment span i {
    font-size: 40px;
  }
  .client-single:not(.active) {
    -webkit-transform: scale(0.55);
    transform: scale(0.35);
  }
  .client-single.position-5,
  .client-single.position-7 {
    right: 0;
  }
  .client-single.position-4 {
    left: 0;
  }
  .client-single.position-3,
  .client-single.position-7 {
    -webkit-transform: scale(0.3) !important;
    transform: scale(0.3) !important;
  }
  .client-single.active .client-img img {
    max-width: 80px;
  }
  .client-single.active .client-img::before {
    padding: 5px;
    width: 88px;
    height: 88px;
    top: -4px;
    left: 16px;
  }
  .client-single.active .client-img {
    width: 120px;
    height: 100px;
  }
  .testi-wrap {
    height: 630px;
  }
}

@media only screen and (min-width: 360px) and (max-width: 479px) {
  #section-testimoni .section-heading h2 {
    font-size: 30px;
    line-height: 40px;
  }
  .client-comment h3 {
    font-size: 14px;
    line-height: 26px;
  }
  .client-single.active {
    width: 80%;
  }
  .client-comment span i {
    font-size: 40px;
  }
  .client-single:not(.active) {
    -webkit-transform: scale(0.25);
    transform: scale(0.25);
  }
  .client-single.position-5,
  .client-single.position-7,
  .client-single.position-6 {
    right: -70px;
  }
  .client-single.position-4 {
    left: -60px;
  }
  .client-single.position-3 {
    left: -75px;
  }
  .client-single.position-3,
  .client-single.position-7 {
    -webkit-transform: scale(0.25) !important;
    transform: scale(0.25) !important;
  }
  .client-single.active .client-img img {
    max-width: 80px;
  }
  .client-single.active .client-img::before {
    padding: 5px;
    width: 88px;
    height: 88px;
    top: -4px;
    left: 16px;
  }
  .client-single.active .client-img {
    width: 120px;
    height: 100px;
  }
  .testi-wrap {
    height: 600px;
  }
}

@media only screen and (min-width: 320px) and (max-width: 359px) {
  #section-testimoni .section-heading h2 {
    font-size: 30px;
  }
  .client-comment h3 {
    font-size: 14px;
    line-height: 26px;
  }
  .client-single.active {
    width: 80%;
  }
  .client-comment span i {
    font-size: 40px;
  }
  .client-single:not(.active) {
    -webkit-transform: scale(0.25);
    transform: scale(0.25);
  }
  .client-single.position-5,
  .client-single.position-7,
  .client-single.position-6 {
    right: -70px;
  }
  .client-single.position-4 {
    left: -60px;
  }
  .client-single.position-3 {
    left: -75px;
  }
  .client-single.position-3,
  .client-single.position-7 {
    -webkit-transform: scale(0.25) !important;
    transform: scale(0.25) !important;
  }
  .client-single.active .client-img img {
    max-width: 80px;
  }
  .client-single.active .client-img::before {
    padding: 5px;
    width: 88px;
    height: 88px;
    top: -4px;
    left: 16px;
  }
  .client-single.active .client-img {
    width: 120px;
    height: 100px;
  }
  .testi-wrap {
    height: 550px;
  }
}


/************* END TESTIMONI *************/