/* Reset dasar */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Preloader container */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.34); /* ganti dengan warna background mu */
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Loader animation (contoh bola berputar) */
.loader {
  border: 5px solid #f3f3f3;
  border-top: 5px solid #052c60; /* warna utama mu */
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
}

/* Keyframes animasi spin */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

#preloader.fade-out {
  opacity: 0;
  pointer-events: none;
}

body {
  font-family: 'Poppins', sans-serif;
  background: #1c6fcf; /* biru tua seperti entercode, nanti bisa kamu ubah ke biru muda jika ingin */
}

header {
  position: absolute; /* dari fixed menjadi absolute agar menyatu dengan hero */
  top: 0;
  width: 100%;
  padding: 20px 30px;
  background: #1c6fcf;

  z-index: 999;

}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
}

.dropdown {
  position: relative;
}

/* Dropdown menu hidden by default */
.dropdown-menu {
  display: none;
  position: absolute;
  background: #052c60;
  top: 100%;
  left: 0;
  list-style: none;
  padding: 0;
  margin: 0;
  min-width: 150px;
  border-radius: 5px;
  overflow: hidden;
  z-index: 999;
}

/* Show dropdown on hover */
.dropdown:hover .dropdown-menu {
  display: block;
}

/* Dropdown menu items */
.dropdown-menu li a {
  display: block;
  padding: 10px 15px;
  color: white;
  text-decoration: none;
}

/* Hover effect for submenu items */
.dropdown-menu li a:hover {
  background: #004080;
}

/* Hover dropdown for desktop */
@media (min-width: 769px) {
  .dropdown {
    position: relative;
  }

  .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 150px;
    border-radius: 5px;
  }

  .dropdown:hover .dropdown-menu {
    display: block;
  }

  .dropdown-menu li a:hover {
    background: #004080;
  }
}

/* For mobile, dropdown-menu appears when .open class is added via JS */
@media (max-width: 768px) {
      .navbar {
    padding: 0px;
  }
  .dropdown-menu.open {
    display: flex;
  }
}

.hamburger {
  display: none;
  flex-direction: column;
  cursor: pointer;
}

.hamburger span {
  height: 3px;
  width: 25px;
  background: white;
  margin: 4px 0;
  border-radius: 2px;
}

.hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

.dropdown-menu {
  display: none;
  flex-direction: column;
  background: #052c60;
  padding-left: 20px;
}

.dropdown-menu.open {
  display: flex;
}

.close-btn {
  position: absolute;
  top: -220px;
  right: 20px;
}

@media (max-width: 768px) {
      .navbar {
    padding: 0px;
  }
  .nav-links {
    display: flex;
    flex-direction: column;
    position: fixed; /* ubah jadi fixed agar menutupi seluruh layar */
    top: 0;
    left: -100%; /* default disembunyikan di luar layar */
    width: 100%;
    height: 100vh; /* penuh tinggi layar */
    background: #052c60;
    text-align: center;
    gap: 20px;
    padding-top: 100px; /* space di atas agar tidak terlalu rapat */
    transition: left 0.3s ease;
    z-index: 999;
  }

  .nav-links.active {
    left: 0; /* tampil di layar */
  }

  .hamburger {
    display: flex;
  }

  .close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
  }

  .close-btn a {
    font-size: 2rem;
    color: white;
    text-decoration: none;
  }
}





.logo img {
  height: 40px;
}

.nav-links {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 30px;
}

.nav-links li a {
  color: white;
  text-decoration: none;
  font-weight: 550;
}

.login-btn {
  background: white;
  padding: 8px 15px;
  border-radius: 20px;
  color: #052c60;
}



.hero-options {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 30px;
}

.option-card {
  text-decoration: none; /* hilangkan underline */
  background: white;
  color: #333366; /* sesuai teks pada contohmu */
  display: flex;
  align-items: center;
  height: auto;
  border-radius: 10px;
  width: 250px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, background-color 0.3s ease, border 0.3s ease, color 0.3s ease;
  border: 2px solid transparent;}

  .option-card:hover {
    transform: translateY(-5px);
    background-color: #1c6fcf; /* biru sesuai tema mu */
    border: 2px solid white;
    color: white; /* ubah teks jadi putih agar tetap terbaca */
  }

  .option-card:hover p {
    color: white !important;
  }

.option-icon {
  background: #a5cbf6; /* ungu muda */
  border-radius: 50%;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0px 0px 0px 12px;
  vertical-align: middle;


}

.option-icon img {
  width: 24px;
  height: 24px;
}



.option-text p {
  margin: 10px ;
  padding: 0;
  font-size: 1rem;
  color: #052c60;
}

@media (max-width: 768px) {
  .hero-options {
    flex-direction: column;
    align-items: center;
  }

  .option-card {

    width: 200px;
  }

  .option-icon img {
    width: 20px;
    height: 20px;
  }
  

  .option-text p {
    margin: 10px ;
    padding: 0;
    font-size: 0.8rem;
    color: #052c60;
  }
}


main {
  padding-top: 20px; /* offset navbar fixed */
}

.hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  margin-top: -60px;
  
  padding: 0px 0px 30px 30px;
  min-height: 95vh;
  background: #1c6fcf;
  z-index: 0;
  position: relative;

}

.hero-left {
  flex: 1 1 400px;
  margin-left: 20px;
}

.hero-left h1 {
  font-size: 2.5rem;
  margin-bottom: 15px;
  color: white;
}

.hero-left p {
}



.btn {
  display: inline-block;
  background: white;
  color: #052c60;
  padding: 10px 20px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 500;
}

.hero-customers {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hero-customers img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.hero-right {
  flex: 1 1 400px;
  text-align: center;
}


.hero-right img {
  max-width: 90%;
  height: auto;
  animation: float 3s ease-in-out infinite;

}

@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-25px);
  }
}

@media (max-width: 768px) {
  .nav-links {
    flex-wrap: wrap;
    justify-content: center;
  }
  
    .hero-left {
    margin-left: -10px;
}

  .hero {
    flex-direction: column;
    text-align: center;
    padding: 133px 0px 0px 0px;
  }

  .hero-left h1 {
    margin-top: 40px;
    font-size: 1.4rem;
  }

  .hero-buttons {
    flex-direction: column;
  }


 

  .wave-container {
    margin-top: -120px; /* geser wave ke atas hero jika perlu */
    position: relative;
    width: 100%;
    height: 120px; /* tinggi wave sesuai keinginan */
    overflow: hidden;
    line-height: 0;
    z-index: 1;
  }
  
  .wave {
    width: 100%;
    height: 100%;
    display: block; /* penting agar svg tidak memiliki extra space */
  }
  .hero{
    min-height: 40vh;
  }

  .hero-right img {
    margin-top: -100px;
    max-width: 80%;
    height: auto;
  }
}

body {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    color: #333;
    background: #fff;
    scroll-behavior: smooth;
  }
  

  
 
  
  main {
    padding-top: 60px; /* offset navbar fixed */
  }
  
  section {
    padding: 80px 30px;
  }
  

  .cta-button {
    display: inline-block;
    background: #4DA6FF;
    color: white;
    padding: 10px 20px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
  }
  
  .about, .services, .portfolio, .contact {
    text-align: center;
  }

  .about {
    padding: 60px 20px 60px ;
  }
  
  .about-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    gap: 40px;
  }
  
  .about-image img {
    max-width: 350px;
    width: 100%;
    border-radius: 10px;
  }
  
  .about-content {
    flex: 1;
  }
  
  .about-content h2 {
    font-size: 2rem;
    margin-bottom: 10px;
    color: #1c6fcf;
  }
  
  .about-content p {
    margin-bottom: 20px;
    font-size: 1.1rem;
    color: #333;
  }
  
  /* option cards style */
  .about-options {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
  }
  
  .about-card {
    margin-top: 10px;
    flex: 1 1 calc(33.33% - 20px); /* 3 columns with gap */
    background: white;
    border-radius: 10px;
    text-align: center;
    padding: 20px;
    transition: transform 0.3s, box-shadow 0.3s;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  }



.about-card:hover p {
  color: white !important;
}
  
  .about-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.2);
    background-color: #1c6fcf; /* biru sesuai tema mu */
    color: white; /* teks putih saat hover */
  }
  
  .about-icon img {
    width: 40px;
    height: 40px;
  }
  
  .about-text p {
    font-size: 1.02rem;
    color: #333;
    font-weight: 550;
  }

  .about-icon-circle {
    background: #8ebef5; /* atau warna yang sesuai tema kamu */
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 10px auto; /* center dan beri margin bawah */
  }
  
  .about-icon-circle img {
    margin-top: 3px;
    width: 30px;
    height: 30px;
  }
  
  
  /* responsive mobile */
  @media (max-width: 768px) {
    .about-image img {
      max-width: 280px;
      width: 100%;
      border-radius: 10px;
    }
    
    .about-container {
      flex-direction: column;
      text-align: center;
    }
  
    .about-options {
      flex-direction: column;
    }
  
    .about-card {
      flex: 1 1 100%;
    }
  }
  
  

  .services{
    padding-left: 100px;
    background-color: #f0f0f0;
    padding-right: 100px;

  }



  .steps-container {
    position: relative;
    max-width: 1000px;
    margin: 50px auto;
    padding: 20px 0;
  }
  
  .steps-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 100%;
    background: #1c6fcf;
  }
  
  .step {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    margin: 50px 0;
  }
  
  .step:nth-child(odd) .step-content {
    order: 1;
    text-align: right;
  }
  
  .step:nth-child(odd) .step-image {
    order: 2;
  }
  
  .step:nth-child(even) .step-image {
    order: 1;
  }
  
  .step:nth-child(even) .step-content {
    order: 2;
    text-align: left;
  }
  
  .step-content {
    width: 40%;
    background: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);

  }
  
  .step-image {
    width: 40%;
  }
  
  .step-image img {
    width: 100%;
    border-radius: 8px;
    
  }
  
  .step-icon {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    padding-top: 15px;
    background: #1c6fcf;
    color: white;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    text-align: center;
    line-height: 40px;
    font-weight: bold;
    z-index: 1;
    font-size: 30px;
  }

  .step {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.6s ease-out;
  }

  .step img {
    width: 250px; /* atau max-width: 100%; untuk responsive */
    height: auto;
    object-fit: contain; /* atau cover jika ingin crop proporsional */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);

  }
  
  .step.show {
    opacity: 1;
    transform: translateY(0);
  }
  
  /* Responsive mobile */
  @media (max-width: 768px) {
    .step-icon {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      padding-top: 0px;
      background: #1c6fcf;
      color: white;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      text-align: center;
      line-height: 40px;
      font-weight: bold;
      z-index: 1;
      font-size: 14px;
    }
    .steps-container::before {
      left: 20px;
    }
    .services{
     padding: 30px;
    background-color: #f0f0f0;
  
    }

    .step img {
      width: 200px; /* atau max-width: 100%; untuk responsive */
      height: auto;
      object-fit: contain; /* atau cover jika ingin crop proporsional */
      box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  
    }
  
    .step {
      flex-direction: column;
      align-items: flex-start;
    }
  
    .step-content,
    .step-image {
      width: 100%;
      order: unset;
      text-align: left;
    }
  
    .step-icon {
      left: 0;
      transform: none;
      margin-bottom: 20px;
    }
  }
  
  
  .service-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
    margin-top: 30px;
  }
  
  .card {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    width: 300px;
    padding: 20px;
    transition: transform 0.3s ease;
  }
  
  .card:hover {
    transform: translateY(-5px);
  }
  
  .portfolio-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    margin-top: 30px;
  }


  .faq {
    padding: 50px 20px;
    background: #f5f5f5;
  }
  
  .faq h2 {
    text-align: center;
    margin-bottom: 30px;
  }

  .faq p {
    text-align: center;
    margin-bottom: 30px;
  }
  
  .faq-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 40px;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
  }
  
  .faq-left {
    flex: 1 1 500px;
  }
  
  .faq-item {
    background: white;
    margin: 10px 0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  }
  
  .question {
    padding: 20px;
    cursor: pointer;
    position: relative;
    font-weight: bold;
  }
  
  .question::after {
    content: "+";
    position: absolute;
    right: 20px;
    font-size: 20px;
    transition: transform 0.3s ease;
  }
  
  .question.active::after {
    content: "-";
    transform: rotate(180deg);
  }
  
  .answer {
    display: none;
    padding: 0 20px 20px 20px;
    line-height: 1.6;
    color: #333;
  }
  
  .faq-right {
    flex: 1 1 300px;
    text-align: center;
  }
  
  .faq-right img {
    max-width: 400px;
    width: 100%;
    height: auto;
  }
  
  /* Responsive */
  @media (max-width: 768px) {
    .faq-container {
      flex-direction: column;
      align-items: center;
    }

    .faq-left{
      margin-top: -100px;
    }

    .faq-right {
      order: -1; /* pindahkan gambar ke atas FAQ di mobile */
    }
  
  
    .faq-right img {
      margin-top: -20px;
      max-width: 250px;
    }
  }
  
  
  
  .project {
    background: #4DA6FF;
    color: white;
    width: 200px;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
  }
  
  .contact-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-width: 400px;
    margin: 0 auto;
  }
  
  .contact-form input,
  .contact-form textarea {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
  
  .contact-form button {
    background: #4DA6FF;
    color: white;
    border: none;
    padding: 10px;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
  }


  .wave-container {
    margin-top: -100px; /* geser wave ke atas hero jika perlu */
    position: relative;
    width: 100%;
    height: 120px; /* tinggi wave sesuai keinginan */
    overflow: hidden;
    line-height: 0;
    z-index: 1;
  }
  
  .wave {
    width: 100%;
    height: 100%;
    display: block; /* penting agar svg tidak memiliki extra space */
  }

  .path-0{
    animation:pathAnim-0 4s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }
  @keyframes pathAnim-0{
    0%{
      d: path("M 0,400 L 0,100 C 55.0216420474064,123.62418412916523 110.0432840948128,147.24836825833046 189,142 C 267.9567159051872,136.75163174166954 370.8485056681552,102.63071109584335 446,99 C 521.1514943318448,95.36928890415665 568.5626932325661,122.22878735829613 636,119 C 703.4373067674339,115.77121264170387 790.9007214015803,82.45413947097218 852,84 C 913.0992785984197,85.54586052902782 947.8344211611129,121.95465475781518 1002,136 C 1056.165578838887,150.04534524218482 1129.7615939539678,141.7272414977671 1206,132 C 1282.2384060460322,122.2727585022329 1361.119203023016,111.13637925111645 1440,100 L 1440,400 L 0,400 Z");
    }
    25%{
      d: path("M 0,400 L 0,100 C 88.71796633459294,102.74270010305736 177.4359326691859,105.48540020611473 238,100 C 298.5640673308141,94.51459979388527 330.97423565784953,80.80109927859843 393,75 C 455.02576434215047,69.19890072140157 546.6671246994159,71.31020267949158 630,88 C 713.3328753005841,104.68979732050842 788.3572655444864,135.95809000343527 851,133 C 913.6427344555136,130.04190999656473 963.9038131226384,92.85743730676742 1026,80 C 1088.0961868773616,67.14256269323258 1162.0274819649605,78.61216076949502 1233,86 C 1303.9725180350395,93.38783923050498 1371.9862590175198,96.6939196152525 1440,100 L 1440,400 L 0,400 Z");
    }
    50%{
      d: path("M 0,400 L 0,100 C 68.10305736860187,103.51288217107523 136.20611473720373,107.02576434215045 201,109 C 265.79388526279627,110.97423565784955 327.278598419787,111.4098248024734 396,116 C 464.721401580213,120.5901751975266 540.6794915836483,129.33493644795604 615,137 C 689.3205084163517,144.66506355204396 762.0034352456199,151.2504294057025 829,133 C 895.9965647543801,114.7495705942975 957.3067674338715,71.66334592923394 1020,71 C 1082.6932325661285,70.33665407076606 1146.7694950188938,112.09618687736173 1217,124 C 1287.2305049811062,135.90381312263827 1363.615252490553,117.95190656131913 1440,100 L 1440,400 L 0,400 Z");
    }
    75%{
      d: path("M 0,400 L 0,100 C 79.35898316729646,80.36344898660255 158.71796633459292,60.726897973205084 225,75 C 291.2820336654071,89.27310202679492 344.48711782892474,137.45585709378219 411,136 C 477.51288217107526,134.54414290621781 557.3335623497081,83.4496736516661 634,62 C 710.6664376502919,40.550326348333904 784.1786327722431,48.745448299553416 853,59 C 921.8213672277569,69.25455170044658 985.9519065613192,81.56853315012025 1052,88 C 1118.0480934386808,94.43146684987975 1186.0137409824802,94.98041909996564 1251,96 C 1315.9862590175198,97.01958090003436 1377.99312950876,98.50979045001718 1440,100 L 1440,400 L 0,400 Z");
    }
    100%{
      d: path("M 0,400 L 0,100 C 55.0216420474064,123.62418412916523 110.0432840948128,147.24836825833046 189,142 C 267.9567159051872,136.75163174166954 370.8485056681552,102.63071109584335 446,99 C 521.1514943318448,95.36928890415665 568.5626932325661,122.22878735829613 636,119 C 703.4373067674339,115.77121264170387 790.9007214015803,82.45413947097218 852,84 C 913.0992785984197,85.54586052902782 947.8344211611129,121.95465475781518 1002,136 C 1056.165578838887,150.04534524218482 1129.7615939539678,141.7272414977671 1206,132 C 1282.2384060460322,122.2727585022329 1361.119203023016,111.13637925111645 1440,100 L 1440,400 L 0,400 Z");
    }
  }

  .path-1{
    animation:pathAnim-1 4s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }
  @keyframes pathAnim-1{
    0%{
      d: path("M 0,400 L 0,233 C 52.45688766746824,235.55925798694608 104.91377533493647,238.11851597389213 169,237 C 233.08622466506353,235.88148402610787 308.80178632772237,231.08519409137753 375,223 C 441.19821367227763,214.91480590862247 497.8790793541739,203.54070766059775 581,198 C 664.1209206458261,192.45929233940225 773.6818962555823,192.7519752662315 847,189 C 920.3181037444177,185.2480247337685 957.393335623497,177.45139127447612 1026,196 C 1094.606664376503,214.54860872552388 1194.7447612504293,259.44245963586394 1269,270 C 1343.2552387495707,280.55754036413606 1391.6276193747854,256.778770182068 1440,233 L 1440,400 L 0,400 Z");
    }
    25%{
      d: path("M 0,400 L 0,233 C 76.20405358983169,219.27413260048093 152.40810717966338,205.54826520096185 217,208 C 281.5918928203366,210.45173479903815 334.5716248711782,229.08107179663347 404,235 C 473.4283751288218,240.91892820336653 559.3053933356235,234.1274476125043 643,222 C 726.6946066643765,209.8725523874957 808.2068017863278,192.40913775334937 861,195 C 913.7931982136722,197.59086224665063 937.8673995190654,220.23600137409824 1001,237 C 1064.1326004809346,253.76399862590176 1166.3236001374098,264.64685675025765 1246,263 C 1325.6763998625902,261.35314324974235 1382.838199931295,247.17657162487117 1440,233 L 1440,400 L 0,400 Z");
    }
    50%{
      d: path("M 0,400 L 0,233 C 67.30676743387153,253.94675369288905 134.61353486774306,274.8935073857781 206,276 C 277.38646513225694,277.1064926142219 352.85262796289936,258.3727241497767 426,245 C 499.14737203710064,231.6272758502233 569.9759532806595,223.6155960151151 641,212 C 712.0240467193405,200.3844039848849 783.2435589144625,185.16489178976295 842,188 C 900.7564410855375,190.83510821023705 947.0498110614908,211.72483682583305 1015,227 C 1082.9501889385092,242.27516317416695 1172.557196839574,251.93576090690485 1247,252 C 1321.442803160426,252.06423909309515 1380.7214015802128,242.53211954654756 1440,233 L 1440,400 L 0,400 Z");
    }
    75%{
      d: path("M 0,400 L 0,233 C 66.50635520439712,252.80625214702852 133.01271040879425,272.61250429405703 199,255 C 264.98728959120575,237.38749570594297 330.4555135692202,182.35623497080041 398,191 C 465.5444864307798,199.64376502919959 535.165235314325,271.9625558227413 599,277 C 662.834764685675,282.0374441772587 720.88354517348,219.79354173823424 790,213 C 859.11645482652,206.20645826176576 939.3005839917553,254.8632772243215 1008,277 C 1076.6994160082447,299.1367227756785 1133.9141188594983,294.75334936447956 1204,283 C 1274.0858811405017,271.24665063552044 1357.0429405702507,252.12332531776022 1440,233 L 1440,400 L 0,400 Z");
    }
    100%{
      d: path("M 0,400 L 0,233 C 52.45688766746824,235.55925798694608 104.91377533493647,238.11851597389213 169,237 C 233.08622466506353,235.88148402610787 308.80178632772237,231.08519409137753 375,223 C 441.19821367227763,214.91480590862247 497.8790793541739,203.54070766059775 581,198 C 664.1209206458261,192.45929233940225 773.6818962555823,192.7519752662315 847,189 C 920.3181037444177,185.2480247337685 957.393335623497,177.45139127447612 1026,196 C 1094.606664376503,214.54860872552388 1194.7447612504293,259.44245963586394 1269,270 C 1343.2552387495707,280.55754036413606 1391.6276193747854,256.778770182068 1440,233 L 1440,400 L 0,400 Z");
    }
  }
  
  @keyframes waveMove {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-50%);
    }
  }


  .fade {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease;
  }
  
  .fade.visible {
    opacity: 1;
    transform: translateY(0);
  }


  .footer {
    background: #1c6fcf;
    color: white;
    padding-top: 40px;
  }
  
  .footer-content {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px 40px 20px;
    gap: 40px;
  }
  
  .footer-left,
  .footer-center,
  .footer-right {
    flex: 1 1 250px;
  }
  
  .footer-logo {
    width: 200px;
    margin-bottom: 10px;
  }
  
  .footer-center h4,
  .footer-right h4 {
    margin-bottom: 10px;
  }
  
  .footer-center ul {
    list-style: none;
    padding: 0;
  }
  
  .footer-center ul li {
    margin-bottom: 8px;
  }
  
  .footer-center ul li a {
    color: white;
    text-decoration: none;
    transition: color 0.3s;
  }
  
  .footer-center ul li a:hover {
    color: #f0c040;
  }
  
  .social-icons a {
    margin-right: 10px;
  }
  
  .social-icons img {
    width: 24px;
    height: 24px;
  }
  
  .whatsapp-button {
    display: inline-block;
    margin-top: 10px;
    background: #0ab147;
    color: white;
    padding: 10px 20px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 550;
    transition: background 0.3s;
  }
  
  .whatsapp-button:hover {
    background: #1DA851;
  }
  
  .footer-bottom {
    background: #0d488b;
    text-align: center;
    padding: 15px 20px;
    font-size: 14px;
  }
  
  /* Responsive */
  @media (max-width: 768px) {
    .footer-content {
      flex-direction: column;
      align-items: center;
      text-align: center;
    }
  
    .footer-left,
    .footer-center,
    .footer-right {
      flex: none;
      width: 100%;
    }
  
    .social-icons a {
      margin: 0 10px;
    }
  }


  #scrollToTopBtn {
    position: fixed; /* stay di layar */
    bottom: 30px;
    right: 30px;
    z-index: 9999; /* paling atas di layar */
    font-size: 24px;
    border: none;
    outline: none;
    background-color: #052c60; /* warna tombol */
    color: white;
    cursor: pointer;
    padding: 12px 16px;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none; /* agar tidak bisa diklik saat hidden */
    transition: opacity 0.3s ease;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  }
  
  #scrollToTopBtn.show {
    opacity: 1;
    pointer-events: auto;
  }
  
  #scrollToTopBtn:hover {
    background-color: #021a38; /* warna saat hover */
  }