body { margin: 0 auto; padding: 0; font-family: "Poppins"; font-size: 22px; width: 100%; background-color: #f1f1f1; }
section { width: 1240px; margin: 0 auto; padding: 50px; }
h1 { font-size: 40px;}
h2 { text-align: center; font-weight: bold; font-size: 26px; margin-bottom: 30px; }

.fullwidth { width: 100%; }
.col2 { width: 50%; float: left; padding: 20px}
.col3 { width: 33.33%; float: left;}
.subheadline { text-align: center; font-weight: bold; margin: 20px 0; }
.clear {clear: both; }
.hero-background { background: url(img/hero.jpg); background-repeat: no-repeat; background-size: cover; height: 600px; background-position: center top; }
.hero-headline { color: #fff; padding-top: 70px; text-align: right; }

.pain-point { margin: 50px auto; }
.pain-point ul { list-style-type: none; }
.pain-point ul li { line-height: 50px; }

.description { margin: 250px auto 0 auto; background-color: #fff; }
.description-logo { text-align: center; }

.testimony { height: 900px;}

* { box-sizing: border-box; }

/** Slider 3 column **/

.slider-container { max-width: 1200px; margin: 50px auto; overflow: hidden; position: relative; }
.slider-track { display: flex; transition: transform 0.5s ease-in-out; }
.slide { min-width: 33.3333%; flex-shrink: 0; padding: 5px; }
.slide img { width: 90%; border-radius: 10px; object-fit: cover; background-color: #ccc; padding: 10px; }
.nav-button { position: absolute; top: 50%; transform: translateY(-50%); background-color: rgba(0, 0, 0, 0.4); border: none; color: white; font-size: 2rem; padding: 10px; cursor: pointer; z-index: 10; border-radius: 50%; }
.prev { left: 10px; }
.next { right: 10px; }
.nav-button:hover { background-color: rgba(0, 0, 0, 0.7); }

/** Slider 1 column **/
.mySlides { display: none; }
img { vertical-align: middle; border-radius: 10px; }
/* Slideshow container */
.slideshow-container { width: 600px; position: relative; margin: auto; }
/* The dots/bullets/indicators */
.dot { height: 15px; width: 15px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; }
.active { background-color: #717171; }
/* Fading animation */
.fade { animation-name: fade; animation-duration: 1.5s; }
@keyframes fade { from {   opacity: .4  }
  to {   opacity: 1  }
}

.solusi { margin-bottom: -250px;}
.solusi li { font-size: 20px; line-height: 40px;}
.single-product img {padding-top: 100px; }

/** form **/
form { max-width: 500px; margin: auto; display: flex; flex-direction: column; gap: 16px; }
input, textarea { padding: 12px; border: 1px solid #ccc; border-radius: 8px; font-size: 1rem; }
.form-button { background-color: #03a855; color: white; padding: 14px; border: none; border-radius: 8px; font-size: 1.3rem; cursor: pointer; }

.success-message {
      display: none;
      color: green;
      margin-top: 1rem;
      font-weight: bold;
    }

@media only screen and (max-width: 768px) {

  /* For mobile: */
body {font-size: 20px;}
section { width: 100%; padding: 20px; }

  .hero-background {  height: auto; background-position: left center; }
.hero-headline {padding: 30px 0;}
h1 { font-size: 30px;}
h2 { font-size: 24px;}

  .col2 { width: 100%;}


  .pain-point { margin: 20px auto; height:550px; }
.pain-point ul li { font-size: 18px; line-height: 50px; margin-left: -30px;}

.description-logo img {width: 90%;}
.single-product img {padding-top: 20px; }
.sp  {width: 90%;}

.slideshow-container { width: 90%;}

.col3 { width: 100%; float: left;}
.arrow {width: 80%;}
.imgclient {width: 100%;}
.imgmarketplace {width: 50%; float: left;}
}