@font-face {
	font-family: 'Montserrat';
	src: url('../font/Montserrat.eot');
	src: local(''), url('../font/Montserrat.woff') format('woff'), url('../font/Montserrat.ttf') format('truetype'), url('../font/Montserrat.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Montserrat-Light';
	src: url('../font/Montserrat-Light.eot');
	src: local(''), url('../font/Montserrat-Light.woff') format('woff'), url('../font/Montserrat-Light.ttf') format('truetype'), url('../font/Montserrat-Light.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Montserrat-Medium';
	src: url('../font/Montserrat-Medium.eot');
	src: local(''), url('../font/Montserrat-Medium.woff') format('woff'), url('../font/Montserrat-Medium.ttf') format('truetype'), url('../font/Montserrat-Medium.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Montserrat-Regular';
	src: url('../font/Montserrat-Regular.eot');
	src: local(''), url('../font/Montserrat-Regular.woff') format('woff'), url('../font/Montserrat-Regular.ttf') format('truetype'), url('../font/Montserrat-Regular.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Montserrat-ExtraLight';
	src: url('../font/Montserrat-ExtraLight.eot');
	src: local(''), url('../font/Montserrat-ExtraLight.woff') format('woff'), url('../font/Montserrat-ExtraLight.ttf') format('truetype'), url('../font/Montserrat-ExtraLight.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Montserrat-Black';
	src: url('../font/Montserrat-Black.eot');
	src: local(''), url('../font/Montserrat-Black.woff') format('woff'), url('../font/Montserrat-Black.ttf') format('truetype'), url('../font/Montserrat-Black.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Montserrat-Bold';
	src: url('../font/Montserrat-Bold.eot');
	src: local(''), url('../font/Montserrat-Bold.woff') format('woff'), url('../font/Montserrat-Bold.ttf') format('truetype'), url('../font/Montserrat-Bold.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Montserrat-ExtraBold';
	src: url('../font/Montserrat-ExtraBold.eot');
	src: local(''), url('../font/Montserrat-ExtraBold.woff') format('woff'), url('../font/Montserrat-ExtraBold.ttf') format('truetype'), url('../font/Montserrat-ExtraBold.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

.loadMore {
    display:none;
}

#loadMore a, a:focus {
  background: #fff;
  color: #552200;
  text-decoration: none;
}
#loadMore {
  text-decoration: none;
}
#loadMore:hover {
  background: #fff;
  color: #552200;
  text-decoration: none;
}
.footer img:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.search-container {
    position: relative;
    display: inline-block;
    float: left; /* dorong ke kanan */
    margin-right: 0; /* kasih jarak biar ga mepet */
}
.search-container-2 {
    position: relative;
    display: inline-block;
    float: right;
    margin-right: 0; /* kasih jarak biar ga mepet */
}
.cari-kolom { width: auto; float: right; padding-top: 10px; }
.search-input {
    padding: 2px 35px 2px 12px;
    border-radius: 20px;
    border: 2px solid #622E10;
    outline: none;
    width: 200px;
    transition: 0.3s ease;
    background: transparent;
    font-family: Montserrat;
}

.search-input:focus {
    width: 250px;
    border-color: #622E10;
    box-shadow: 0 0 5px rgba(255,255,255,0.7);
}

.search-btn {
    position: absolute;
    right: 10px;
    top: 55%;
    transform: translateY(-50%);
    border: none;
    background: none;
    cursor: pointer;
    font-size: 16px;
    color: #622E10;
    
}
.search-container input::-webkit-input-placeholder { /* Chrome, Safari */
    color: rgba(255, 255, 255, 0.7);
}
.search-container input:-ms-input-placeholder { /* IE 10+ */
    color: rgba(255, 255, 255, 0.7);
}
.search-container input::placeholder { /* Standar */
    color: rgba(255, 255, 255, 0.7);
}

.search-container-2 input::-webkit-input-placeholder { /* Chrome, Safari */
    color: rgba(98, 46, 16, 0.7);
}
.search-container-2 input:-ms-input-placeholder { /* IE 10+ */
    color: rgba(98, 46, 16, 0.7);
}
.search-container-2 input::placeholder { /* Standar */
    color: rgba(98, 46, 16, 0.7);
}

.solution-text-box {
  color: #D5AD90;
  font-family: Montserrat-Bold;
  font-size: 20px;
  min-height: 70px;
  max-height: 70px;
  align-items: center; 
  display: flex;
  /* -webkit-line-clamp: 2; */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: max-height 0.4s ease;
}

@media (max-width: 768px) {
  .solution-text-box {
    font-size: 22px;
    min-height: 50px !important;
    max-height: 100% !important;
    /* min-height / max-height bisa kamu adjust atau hapus */
  }
  
  .search-container-2 {
      position: relative;
      display: inline-block;
      float: right;
      margin-top: 5px; /* kasih jarak biar ga mepet */
  }
  .cari-kolom { width: auto; float: right; }
}


/* .solution-text-box:hover {
  max-height: 200px; buka lebih tinggi pas hover
  -webkit-line-clamp: unset; biar semua teks kelihatan
  cursor: pointer
} */

/* ====================================================== */
.animation-text {
    opacity: 0;
    transform: translateY(120px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.animation-text.fade-in {
    opacity: 1;
    transform: translateY(0);
}

.animation-text.fade-out {
    opacity: 0;
    transform: translateY(20px);
}


.animation-text2 {
    opacity: 0;
    transform: translateY(-50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.animation-text2.visible {
    opacity: 1;
    transform: translateY(0);
}
.animation-text3 {
    /* margin-bottom: 100px; */
    opacity: 0;
    transform: scale(0.8) translateY(20px);
    filter: blur(5px);
    transition: 
        opacity 0.8s ease-out,
        transform 0.8s ease-out,
        filter 0.8s ease-out;
}

.animation-text3.visible {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0);
}
/* @media (max-width: 768px) {
    .animation-text3 {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }
    .animation-text3.visible {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
} */

.card-box {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.card-box.show {
  opacity: 1;
  transform: translateY(0);
}

/* delay berurutan */
.card-box:nth-child(1).show { transition-delay: 0s; }
.card-box:nth-child(2).show { transition-delay: 0.5s; }
.card-box:nth-child(3).show { transition-delay: 1s; }
.card-box:nth-child(4).show { transition-delay: 1.5s; }
@media (max-width: 768px) {
  .card-box {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}
/* kaya fade in tapi dari kiri ke kanan */
.btn-arrowX {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 30px;
  border: 2px solid #552200;
  border-radius: 50px;
  font-size: 18px;
  font-weight: bold;
  color: #552200;
  background: #fff;
  text-decoration: none;
  overflow: hidden;
  transition: all 0.3s ease;
}

.btn-arrowX .arrow {
  position: absolute;
  left: 20px; /* start dekat teks */
  opacity: 0;
  transition: all 0.6s ease;
}

.btn-arrowX:hover {
  background: #552200;
  color: #fff;
}

.btn-arrowX:hover .arrow {
  left: calc(100% - 40px); /* geser ke kanan tombol */
  opacity: 0.0;
}

/* --------------------------------------- */

.btn-arrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: left;
  padding: 10px 30px 10px 50px;
  border: 2px solid #000000;
  border-radius: 50px;
  font-size: 30px;
  font-family: Montserrat-Bold;
  color: #552200;
  background: #fff;
  text-decoration: none;
  overflow: hidden;
  transition: all 0.3s ease;
  gap: 10px;
  width: 750px
}

@media (max-width: 768px) {
  .btn-arrow {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: left;
    padding: 10px 0 10px 30px !important;
    border: 2px solid #000000;
    border-radius: 50px;
    font-size: 21px;
    font-family: Montserrat-Bold;
    color: #552200;
    background: #fff;
    text-decoration: none;
    overflow: hidden;
    transition: all 0.3s ease;
    gap: 10px;
    width: 100%
  }
  .btn-arrow .arrow {
    right: 20px !important; display: none
  }
}
.btn-arrow:hover {
  background: #fff;
  color: #552200;
  text-decoration: none;
}

.btn-arrow .arrow {
  position: absolute;
  transition: transform 0.6s ease; right: 30px;
}

.btn-arrow:hover .arrow {
  transform: translateX(-360px) translateX(60px);
  /* trik: geser ke kiri lalu balik ke kanan */
  animation: moveArrow 0.6s ease forwards;
}

@keyframes moveArrow {
  0% {
    transform: translateX(-1180px); /* mulai dari dekat teks */
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateX(0); /* kembali ke posisi default kanan */
    opacity: 1;
  }
}



.btn-arrowsolution {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: left;
  /* padding: 10px 30px 10px 50px; */
  /* border: 2px solid #000000; */
  /* border-radius: 50px; */
  /* font-size: 35px;
  font-family: Montserrat-Bold; */
  /* color: #552200; */
  /* background: #fff; */
  text-decoration: none;
  overflow: hidden;
  transition: all 0.3s ease;
  gap: 10px;
  width: 350px;
  height: 45px
}
.btn-arrowsolution:focus,
.btn-arrowsolution:active {
  outline: none;       /* hilangin border fokus biru */
  background: none;    /* hilangin background putih */
  box-shadow: none;    /* hilangin shadow default */
  color: inherit;      /* biar warna text tetap sama */
}
.btn-arrowsolution:hover {
  /* background: #fff; */
  color: #552200;
  text-decoration: none;
}

.btn-arrowsolution .arrow {
  position: absolute;
  transition: transform 0.6s ease; right: 30px;
}

.btn-arrowsolution:hover .arrow {
  transform: translateX(-360px) translateX(60px);
  /* trik: geser ke kiri lalu balik ke kanan */
  animation: moveArrow 0.6s ease forwards;
}
.btn-arrowsolution:hover .arrow {
  transform: translateX(-360px) translateX(60px);
  /* trik: geser ke kiri lalu balik ke kanan */
  animation: moveArrow 0.6s ease forwards;
}

@keyframes moveArrow {
  0% {
    transform: translateX(-1180px); /* mulai dari dekat teks */
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateX(0); /* kembali ke posisi default kanan */
    opacity: 1;
  }
}
@media (max-width: 768px) {
  .btn-arrowsolution {
    all: unset; /* reset semua properti */
    display: inline-block; /* kasih display biar tetap keliatan */
    width: auto; 
    height: auto;
    text-decoration: none;
    color: inherit;
    margin-bottom: 30px !important
  }

  /* .btn-arrowsolution:hover,
  .btn-arrowsolution .arrow,
  .btn-arrowsolution:hover .arrow {
    all: unset;
  } */

  @keyframes moveArrow {
    from { transform: none; opacity: 1; }
    to { transform: none; opacity: 1; }
  }
}




.btn-arrowshadow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* gap: 10px; */
  padding: 12px;
  border-radius: 30px;
  width: 200px;
  font-size: 20px;
  font-family: Montserrat-Bold;
  font-weight: bold;
  color: #ffffff;
  background: #552200;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: none; /* default tanpa shadow */
}

.btn-arrowshadow:hover {
  background: #552200;
  box-shadow: 0px 0px 10px 0px #ffffff;
  text-decoration: none;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.7);
  /* box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25); shadow keluar saat hover */
  transform: translateY(-2px); /* efek naik sedikit */
}


/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++SLIDE SHOW TESTIMONIAL */
.carousel-container {
  position: relative;
  width: 100%;
  max-width: 1000px;
  margin: auto;
  overflow: hidden;
}

.carousel-track {
  display: flex;
  transition: transform 0.6s ease;
}

.card {
  min-width: 60%; /* fokus lebih besar */
  margin: 0 20px;
  background: #652c00;
  color: #fff;
  padding: 40px 20px;
  border-radius: 320px;
  text-align: center;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
  font-size: 16px;
  flex-shrink: 0; height: auto; 
  /* width: 700px !important; border: 10px solid red; */
}

.dots {
  text-align: center;
  margin-top: 20px;
}

.dot {
  height: 12px;
  width: 12px;
  margin: 0 5px;
  background-color: #c8a98d;
  border-radius: 50%;
  display: inline-block;
  cursor: pointer;
  transition: all 0.3s ease;
}

.dot.active {
  background-color: #552200;
  width: 30px;
  border-radius: 15px;
}

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */


@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.box-animate {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.3s ease;
}

.box-animate.show {
  animation: fadeUp 0.8s ease forwards;
}