/* Style for header and navigation */
header {
    background-color: #71e7f0; /* warna hijau pastel */
    padding: 20px;
}
nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #00BCD4; /* warna biru pastel */
}
nav li {
    float: left;
}
nav a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
nav a:hover {
    background-color: #4CAF50; /* warna hijau */
}
/* Style for sections */
section {
    padding: 20px;
}
#home {
    background-color: #E0F2F1; /* warna hijau pastel */
    text-align: center;
}
#home h1 {
    margin-top: 0;
}
#home button {
    background-color: #00BCD4; /* warna biru pastel */
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
}
#home button:hover {
    background-color: #009688; /* warna hijau pastel */
}
#about {
    background-color: #B2EBF2; /* warna biru pastel */
}
#services {
    background-color: #E0F2F1; /* warna hijau pastel */
}
#services ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#services li {
padding: 10px;
}
#services button {
background-color: #00BCD4; / warna biru pastel /
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
}
#services button:hover {
background-color: #009688; / warna hijau pastel /
}
#contact {
background-color: #B2EBF2; / warna biru pastel /
}
#contact form {
text-align: left;
}
#contact label {
display: block;
margin-bottom: 10px;
}
#contact input[type="text"], #contact input[type="email"], #contact textarea {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 4px;
}
#contact input[type="submit"] {
background-color: #00BCD4; / warna biru pastel /
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
}
#contact input[type="submit"]:hover {
background-color: #009688; / warna hijau pastel /
}
/ Style for footer /
footer {
background-color: #8BC34A; / warna hijau pastel */
text-align: center;
padding: 10px;
}
.right {
    float: right;
}
.login {
    background-color: rgb(30, 32, 32);
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
}
.login:hover {
    background-color: #111;
}
.typing-cursor {
  animation: blink 1s infinite;
}

@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}
.footer-container {
  display: flex;
  align-items: center;
}

.copyright-text {
  margin: 0 auto; /* posisi teks copyright di tengah */
}

.log-revisi-link {
  margin-left: 10px; /* margin dari link */
}
.service-item {
  display:inline-block;
  padding:10px;
}
.service-item a {
    color: #000000; /* warna hitam */
    text-decoration: none; /* menghilangkan garis bawah */
}

.service-item:hover {
  background-color: #8BC34A; /* warna hijau pastel saat didekati mouse */
}
.service-itemlink:hover {
  display:inline-block;
  padding:10px;
  background-color: #8BC34A; /* warna hijau pastel saat didekati mouse */
}
.service-itemlink a {
    color: #000000; /* warna hitam */
    text-decoration: none; /* menghilangkan garis bawah */
}
/* Tambahkan css untuk menyembunyikan form login */
#login-form {
  display: none;
}

/* Tambahkan css untuk menampilkan form login dalam bentuk pop-up */
.popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 20px;
  border: 1px solid black;
}


table {
    width: 100%; /* membuat tabel menempati seluruh lebar halaman */
    border-collapse: collapse; /* menghilangkan garis antar kolom */
    margin-bottom: 20px; /* memberikan margin di bawah tabel */
}

th, td {
    border: 1px solid #ccc; /* memberikan garis pada kolom */
    padding: 10px; /* memberikan padding pada kolom */
}

th {
    background-color: #8BC34A; /* warna hijau pastel untuk header tabel */
    color: white; /* warna tulisan putih */
}

form {
    background-color: #f5f5f5; /* warna background hijau pastel */
    padding: 20px; /* memberikan padding pada form */
    border-radius: 4px; /* memberikan efek rounded pada form */
    box-shadow: 2px 2px 4px #ccc; /* memberikan efek shadow pada form */
}

form label {
    font-size: 18px; /* membuat ukuran font label lebih besar */
    font-weight: bold; /* membuat font label lebih tebal */
}

form input[type="text"], form input[type="email"], form input[type="password"] {
    background-color: #fff; /* warna background putih */
    border: none; /* menghilangkan garis pada elemen input */
    border-bottom: 2px solid #8BC34A; /* memberikan garis hijau pastel pada bawah elemen input */
    font-size: 18px; /* membuat ukuran font elemen input lebih besar */
    padding: 10px; /* memberikan padding pada elemen input */
    margin-bottom: 20px; /* memberikan margin di bawah elemen input */
}

form input[type="submit"] {
    background-color: #8BC34A; /* warna hijau pastel untuk tombol */
    color: #fff; /* warna tulisan putih */
    font-size: 18px; /* membuat ukuran font tombol lebih besar */
    padding: 10px 20px; /* memberikan padding pada tombol */
    border: none; /* menghilangkan garis pada tombol */
    border-radius: 4px; /* memberikan efek rounded pada tombol */
    cursor: pointer; /* mengubah cursor menjadi pointer saat diatas tombol */
}

a {
    color: #8BC34A; /* warna hijau pastel untuk link */
    text-decoration: none; /* menghilangkan garis bawah pada link */
    font-size: 18px; /* membuat ukuran font link lebih besar */
}
.services-container {
    background-color: #E0F2F1; /* warna hijau pastel */
    padding: 20px; /* memberikan padding pada container layanan */
}

form {
    background-color: #fff; /* warna background putih */
    padding: 20px; /* memberikan padding pada form */
    border-radius: 4px; /* memberikan efek rounded pada form */
    box-shadow: 2px 2px 4px #ccc; /* memberikan efek shadow pada form */
}

form label {
    font-size: 18px; /* membuat ukuran font label lebih besar */
    font-weight: bold; /* membuat font label lebih tebal */
    color: #8BC34A; /* warna hijau pastel untuk label */
}

form textarea {
    background-color: #fff; /* warna background putih */
    border: none; /* menghilangkan garis pada elemen textarea */
    border-bottom: 2px solid #8BC34A; /* memberikan garis hijau pastel pada bawah elemen textarea */
    font-size: 18px; /* membuat ukuran font elemen textarea lebih besar */
    padding: 10px; /* memberikan padding pada elemen textarea */
    margin-bottom: 20px; /* memberikan margin di bawah elemen textarea */
}

form input[type="submit"] {
    background-color: #8BC34A; /* warna hijau pastel untuk tombol */
    color: #fff; /* warna tulisan putih */
    font-size: 18px; /* membuat ukuran font tombol lebih besar */
    padding: 10px 20px; /* memberikan padding pada tombol */
    border: none; /* menghilangkan garis pada tombol */
    border-radius: 4px; /* memberikan efek rounded pada tombol */
    cursor: pointer; /* mengubah cursor menjadi pointer saat diatas tombol */
}
.chat-container {
  width: 50%;
  margin: 0 auto;
}

.message-container {
  background-color: #f1f1f1;
  padding: 10px;
  margin-bottom: 10px;
}

.sender-name {
  font-weight: bold;
}

.message-text {
  margin-top: 5px;
}

.message-time {
  font-size: 12px;
  color: gray;
  margin-top: 5px;
  text-align: right;
}
.message-container {
  background-color: #f1f1f1;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 10px;
}

.message-container.green {
  background-color: #7FEC9F;
}

.message-container.blue {
  background-color: #9FB6F7;
}

.message-container.yellow {
  background-color: #F7F79F;
}
.cta {
 position: relative;
 margin: auto;
 padding: 12px 18px;
 transition: all 0.2s ease;
 border: none;
 background: none;
}

.cta:before {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 display: block;
 border-radius: 50px;
 background: #b1dae7;
 width: 45px;
 height: 45px;
 transition: all 0.3s ease;
}

.cta span {
 position: relative;
 font-family: "Ubuntu", sans-serif;
 font-size: 18px;
 font-weight: 700;
 letter-spacing: 0.05em;
 color: #234567;
}

.cta svg {
 position: relative;
 top: 0;
 margin-left: 10px;
 fill: none;
 stroke-linecap: round;
 stroke-linejoin: round;
 stroke: #234567;
 stroke-width: 2;
 transform: translateX(-5px);
 transition: all 0.3s ease;
}

.cta:hover:before {
 width: 100%;
 background: #b1dae7;
}

.cta:hover svg {
 transform: translateX(0);
}

.cta:active {
 transform: scale(0.95);
}
footer {
  background-color: #3798e7;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

footer h3, footer .copyright {
  flex: 1;
}

footer ul {
  margin: 0;
  padding: 0;
}

footer li {
  list-style: none;
  margin-bottom: 10px;
}

footer a {
  color: #fff;
}

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

footer .social-icons {
  margin: 0;
  padding: 0;
  text-align: center;
}

footer .social-icons li {
  display: inline-block;
  margin-right: 10px;
}

footer .social-icons li a {
  color: #fff;
  font-size: 20px;
}
/* Chat container */
.chat-container {
  width: 400px;
  margin: 0 auto;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 10px;
}

/* Chat header */
.chat-header {
  background-color: #f2f2f2;
  padding: 10px;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
}

/* Chat body */
.chat-body {
  height: 300px;
  overflow-y: scroll;
  margin-top: 10px;
}

/* Chat message */
.message {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 10px;
}

/* Message sender */
.sender {
  font-weight: bold;
  color: #075e54;
}

/* Message content */
.content {
  padding: 10px;
  background-color: #dcf8c6;
  border-radius: 10px;
  color: #000;
  margin-top: 5px;
  max-width: 300px;
}

/* Own message */
.message.own {
  align-items: flex-end;
}

/* Own message content */
.message.own .content {
  background-color: #e1ffc7;
}

/* Chat form */
form {
  margin-top: 10px;
}

form label {
  display: block;
  margin-bottom: 5px;
}

form input[type="text"],
form textarea {
  width: 100%;
  padding: 5px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

form input[type="submit"] {
  background-color: #4CAF50;
  color: #fff;
  padding: 5px 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.message {
  margin-bottom: 10px;
}

.sender {
  font-weight: bold;
  margin-bottom: 5px;
}

.bubble-container {
  display: flex;
  flex-direction: column;
}

.bubble {
  max-width: 250px;
  background-color: #f1f0f0;
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 5px;
  color: #000;
}

.bubble-container .bubble:last-child {
  margin-bottom: 0;
}