* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

body {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    color: white;
}

#scrollToTopBtn {
    display: none; /* Mulanya disembunyikan */
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    font-size: 18px;
    background-color: #0077b6;
    color: white;
    border: none;
    cursor: pointer;
    padding: 10px;
    border-radius: 50%; /* Membuat tombol berbentuk lingkaran */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease;
}

#scrollToTopBtn:hover {
    background-color: #005f91; /* Warna ketika tombol di-hover */
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.4);
}

#scrollToTopBtn i {
    background-color: #0077b6;
    font-size: 50px;
}

.mybg {
    width: 100vw;
}

.mybg img {
    width: 100vw;
    z-index: -9;
    position: fixed;
    top: 0;
}

/* Loader Container */
.loader-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(
        255,
        255,
        255,
        0.6
    ); /* Background color while loading */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Ensure the loader is above everything */
}

/* Spinner Animation */
.spinner {
    width: 60px;
    height: 60px;
    border: 8px solid rgba(0, 0, 0, 0.1);
    border-top: 8px solid #0077b6;
    border-bottom: 8px solid #0077b6;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Keyframes for the spinning animation */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Navbar */
.container-navbar {
    display: flex;
    background-color: #0077b6;
    justify-content: space-between;
    align-items: center;
    padding: 0.7rem 2rem;
    color: #fff;
    z-index: 10;
}

.container-navbar a {
    list-style: none;
    text-decoration: none;
    color: white;
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.logo-img {
    width: 50px;
}

nav {
    display: flex;
    position: fixed;
    width: 100%;
}

nav ul {
    display: flex;
    list-style: none;
    gap: 1rem;
    position: relative;
    color: #fff;
}

nav ul li a {
    text-decoration: none;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    padding: 5px 0;
}

.container-navbar ul li a.active {
    color: #6ad799;
    font-weight: bold;
    border-bottom: 1px solid #6ad799;
}

nav ul li a:hover {
    color: #6ad799;
    border-bottom: 1px solid #6ad799;
}

/* Style untuk dropdown-content tetap sama */

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #0077b6;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 1;
    min-width: auto; /* Biarkan lebar menyesuaikan dengan isi */
    padding: 5px; /* Tambahkan padding untuk spasi dalam dropdown */
    border-radius: 5px;
}

.dropdown-content li {
    list-style: none;
}

.dropdown-content li a {
    color: white;
    padding: 10px;
    text-decoration: none;
    display: block;
    font-size: 14px;
}

.dropdown-content li a:hover {
    background-color: #ffffff;
    color: #0077b6;
}

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

/* Caret Default (Menghadap Bawah) */
.fa-caret-down {
    transition: transform 0.3s ease; /* Animasi rotasi */
}

/* Caret ketika dropdown terbuka (Menghadap Atas) */
.fa-caret-down.active {
    transform: rotate(180deg); /* Membalikkan caret */
}

/* icon nav */
.icon-nav {
    font-size: 25px;
    display: none;
}

/* main page */
.main-page {
    display: flex;
    flex-direction: column;
}

.container-home {
    background: linear-gradient(to bottom, #0077b6, #0096c7, #48cae4, #ade8f4);
}

.home-content {
    display: flex;
}

.home-content .home-content-text {
    width: 60%;
}

.home-content .home-content-text a {
    scroll-behavior: smooth;
}

.home-content .home-content-logo {
    width: auto;
    display: flex;
    justify-content: space-around;
    margin-left: 5%;
}

/* Efek animasi slide-in dan bounce */
@keyframes slideInAndBounce {
    0% {
        transform: translateX(-100vw) rotate(-200deg); /* Mulai dari luar layar kiri dan miring */
    }
    70% {
        transform: translateX(0) rotate(0deg); /* Logo tiba di posisi akhir tanpa rotasi */
    }
    100% {
        transform: translateX(0) translateY(0); /* Posisi akhir tanpa efek bounce */
    }
}

@keyframes bounce {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-30px); /* Bounce lebih tinggi */
    }
}

.home-content-logo img {
    width: 350px;
    animation: slideInAndBounce 3s ease-out, bounce 3s 2s infinite ease-in-out; /* Slide-in + bounce */
    transition: transform 0.5s ease-in-out;
}

.home-title {
    width: 100%;
    height: 100vh;
    font-size: 22px;
    padding: 100px 50px;
    justify-content: space-around;
}

/* Animasi untuk huruf jatuh */
@keyframes dropLetter {
    0% {
        opacity: 0;
        transform: translateY(-50px); /* Mulai dari atas */
    }
    100% {
        opacity: 1;
        transform: translateY(0); /* Teks tiba di posisi akhir */
    }
}

.home-title h1 span {
    word-spacing: 5px;
    display: inline-block;
    opacity: 0;
    animation: dropLetter 0.3s forwards ease-in-out;
}

.home-content-text h6 {
    font-style: italic;
    font-size: 18px;
    padding: 20px 0;
    width: 90%;
    font-weight: 500;
}

.home-content-text p {
    font-size: 16px;
    margin-top: 10%;
    width: 100%;
}

.home-content-text .btn-form {
    margin-top: 40px;
    text-align: center;
}

.home-content-text button {
    background-color: #0077b6;
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    width: 250px;
    height: 50px;
    border-radius: 20px;
    border-style: none;
}

.home-content-text button:hover {
    background-color: #fff;
    color: #0077b6;
}

.home-content-text i {
    color: #fff;
}

.home-content-text i:hover {
    color: #0077b6;
}

/* CONTENT TUTORIAL */
.tutorial {
    background-color: rgba(232, 232, 232, 0.85);
    width: 100%;
    height: 100vh;
}

.tutorial .tutorial-header {
    display: flex;
    align-items: center;
    flex-direction: column;
    text-align: center;
    color: black;
    margin-top: 50px;
}
.tutorial-header p {
    margin-top: 20px;
}

.tutorial .tutorial-container {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    color: black;
    padding: 5%;
}

.tutorial .tutorial-main {
    height: 250px;
    width: 200px;
    background-color: #f3f3f3;
    box-shadow: 0 4px 8px 0 #0077b6, 0 6px 20px 0 #ade8f4;
    transition: all 0.3s ease-in-out;
}

.tutorial .tutorial-main:hover {
    transform: translateY(-25px);
    box-shadow: 0 8px 16px 0 #0077b6, 0 12px 24px 0 #ade8f4;
}

.tutorial .tutorial-title-container {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.tutorial-title-container h4 {
    padding: 5%;
}

.tutorial .tutorial-icon i {
    font-size: 30px;
    padding-bottom: 50%;
    color: #0077b6;
}

.tutorial .tutorial-content-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    height: 20%;
    margin-top: 10px;
    padding: 10px;
    font-size: 16px;
}

.tutorial-content-container span {
    font-weight: 700;
    color: red;
}

/* CONTENT ROLE */
.role {
    background-color: rgba(255, 255, 255, 0.85);
    width: 100%;
    height: 100vh;
}

.role .role-header {
    display: flex;
    align-items: center;
    flex-direction: column;
    color: black;
    margin-top: 50px;
}

.role .role-container {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    color: black;
    padding: 70px 0;
}

.role .role-main {
    background: linear-gradient(to bottom, #0096c7, #48cae4, #ade8f4);
    height: 280px;
    width: 220px;
    border-radius: 20px;
}

.role .role-title-container {
    height: 80%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-radius: 20px;
}

.role-title-container h4 {
    margin-top: 10px;
}

.role-image {
    background-color: #e8e8e8;
    width: 60%;
    height: 70%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
}

.role-image img {
    width: 100%;
    border-radius: 10px;
    cursor: pointer;
}

.role .role-button-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.role-button-container button {
    font-size: 16px;
    font-weight: 600;
    width: 150px;
    height: 40px;
    border-radius: 20px;
    border-style: none;
    background-color: #e8e8e8;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    transition: all 0.3s ease;
    cursor: pointer;
}

.role-button-container button:hover {
    background-color: #d0d0d0; /* Change background color on hover */
    box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.2),
        0 8px 24px 0 rgba(0, 0, 0, 0.19); /* Increase shadow on hover */
}

.role-button-container button:active {
    transform: scale(0.95); /* Slightly shrink the button when clicked */
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3); /* Add inset shadow to create pressed effect */
    background-color: #c0c0c0; /* Change background color when button is pressed */
}

.role-popup {
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    height: 100%;
    width: 100%;
    z-index: 1000;
    overflow: hidden;
    display: none;
    justify-content: center;
    align-items: center;
}

.role-popup-text {
    background: linear-gradient(135deg, #0077a4, #005f80);
    margin-inline: 100px;
    padding: 40px;
    border-radius: 10px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: fit-content;
    box-shadow: 0px 0px 0px 4px rgba(255, 255, 255, 0.4);
    max-height: 95%;
    overflow: scroll;
}

.role-close-btn {
    position: absolute;
    font-size: x-large;
    right: 30px;
    top: 15px;
    outline: none;
    border: none;
    background-color: transparent;
    padding-inline: 10px;
    padding-block: 5px;
    border-radius: 10px;
    cursor: pointer;
    color: white;
}

.role-close-btn:hover {
    background-color: rgba(255, 255, 255, 0.4);
}

.role-popup-text h3 {
    font-size: 24px;
    text-align: center;
    font-weight: 800;
}

.role-popup-text p {
    font-style: italic;
    font-weight: 600;
    color: yellow;
}

.role-popup-text ol {
    padding-left: 30px;
}

.role-popup.active {
    display: flex;
}

.isi-form {
    width: 100%;
    min-height: 100vh;
    background-color: rgba(232, 232, 232, 0.85);
}

.isi-form .form-title {
    display: flex;
    align-items: center;
    flex-direction: column;
    color: black;
    margin-top: 10%;
}

.isi-form .form-content {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 3% 5%;
}

.form-content .form-content-text {
    width: 60%;
}

.form-content .form-content-text-title {
    display: flex;
    align-items: center;
    justify-content: left;
    width: 50%;
    font-size: 20px;
    margin: 22% 0 10px 20%;
}

.form-content .form-choice {
    margin: 10px 0 10% 20%;
}

.form-choice p {
    font-size: 12px;
}

.form-choice select {
    width: 50%;
    padding: 10px;
    color: #0077b6;
    border: 1px solid #0077b6;
    border-radius: 10px;
    margin-top: 5px;
    font-weight: 600;
}

.form-content .form-content-logo {
    width: auto;
    display: flex;
    padding: 5%;
}

.form-content .form-content-logo img {
    width: 25vw;
}

.form-container {
    width: 45%;
    padding: 30px;
    border: 2px solid black;
    border-radius: 20px;
    background-color: #f3f3f3;
    color: black;
    margin-bottom: 10%;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4), 0 6px 20px 0 rgba(0, 0, 0, 0.4);
    display: none;
}

.form-container .img-form {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.form-container img {
    width: 30%;
}

.form-container h3 {
    text-align: center;
    margin-bottom: 10px;
}

.form-group {
    margin-top: 20px;
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-size: 14px;
}

.form-group span {
    color: red;
}

.form-group input,
textarea,
select {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
    border-radius: 5px;
    border: 1px solid #ccc;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
    background-color: #fff;
}

textarea,
input:required:invalid:focus {
    border: none;
    outline: 2px solid red;
    border-radius: 5px;
}

/* Default valid state for inputs */
textarea,
input:valid,
textarea,
input:required {
    border: 2px solid #727272;
    outline: inherit;
    border-radius: 5px;
}

.input-group {
    display: flex;
    align-items: center;
    width: 100%;
}

.input-group-prepend {
    color: #000;
    display: flex;
    align-items: center;
    border: 2px solid #727272;
    padding: 7px;
    border-radius: 5px;
    background-color: #e8e8e8;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    font-size: 14px;
    margin-right: 3px;
}

.btn-send-form {
    margin-top: 30px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn-send-form button {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 5px;
    color: #0077b6;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
    background-color: #f0f0f0;
    transition: all 0.3s ease;
}

.btn-send-form button:hover {
    background-color: #e0e0e0;
    color: #005f91;
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.4);
}

/* Active click effect */
.btn-send-form button:active {
    background-color: #d0d0d0;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
    transform: scale(0.98);
}

/* page download surat */

.container-down-surat,
.container-edit-surat {
    color: black;
    width: 100%;
    min-height: 100vh;
    padding: 100px 60px;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.7);
}

.container-down-surat .title-down-surat,
.container-edit-surat .title-edit-surat {
    text-align: center;
    padding: 20px;
}

.form-user-edit {
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.container-down-surat-content {
    background-color: white;
    padding: 30px 0;
    margin-top: 30px;
    min-height: 40vh;
    border-radius: 20px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4), 0 6px 20px 0 rgba(0, 0, 0, 0.4);
}

.container-down-surat-content .add-surat {
    background-color: #0077b6;
    width: 12%;
    margin-left: 25px;
    margin-bottom: 20px;
    text-align: center;
    border-radius: 8px;
}

.add-surat a {
    text-decoration: none;
}

.add-surat h5 {
    margin: 0;
    padding: 10px 0;
    color: white;
    font-size: 14px;
    cursor: pointer;
}

.add-surat h5:hover {
    background-color: #caf0f8;
    transition: background-color 0.5s ease;
}

.add-surat h5 i {
    color: white;
    font-size: 14px;
}

.table-down-surat {
    width: 95%;
    margin: 0 auto;
    font-size: 14px;
    color: #000000;
    border-collapse: collapse;
}

.table-down-surat th,
.table-down-surat td {
    padding: 10px;
    text-align: left;
    vertical-align: top;
    font-size: 14px;
    border: 1px solid black;
}

.table-down-surat th {
    background-color: #0077b6;
    color: white;
    text-align: center;
    vertical-align: middle;
    font-size: 14px;
}

.table-down-surat td {
    color: black;
    word-wrap: break-word; /* Membungkus kata jika terlalu panjang */
    white-space: normal; /* Mengizinkan teks untuk berpindah baris */
    font-size: 14px;
    vertical-align: middle;
}

.table-down-surat th:nth-child(1),
.table-down-surat td:nth-child(1) {
    width: 2%; /* Lebar kolom untuk NO */
}

.table-down-surat th:nth-child(2),
.table-down-surat td:nth-child(2) {
    width: 20%; /* Lebar kolom untuk Nama */
}

.table-down-surat th:nth-child(3),
.table-down-surat td:nth-child(3) {
    width: 15%; /* Lebar kolom untuk Jabatan */
}

.table-down-surat th:nth-child(4),
.table-down-surat td:nth-child(4) {
    width: 30%; /* Lebar kolom untuk Instansi */
}

.table-down-surat th:nth-child(5),
.table-down-surat td:nth-child(5) {
    width: 30%; /* Lebar kolom untuk Email */
}

.table-down-surat th:nth-child(6),
.table-down-surat td:nth-child(6) {
    width: 15%; /* Lebar kolom untuk Telepon/WA */
}

.table-down-surat th:nth-child(7),
.table-down-surat td:nth-child(7),
.table-down-surat th:nth-child(8),
.table-down-surat td:nth-child(8),
.table-down-surat th:nth-child(9),
.table-down-surat td:nth-child(9) {
    width: 8%;
}

.table-down-surat {
    color: black;
}

.table-down-surat a {
    text-decoration: none;
}

.table-down-surat .icon-action {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    width: 30px;
    height: 30px;
    border-radius: 3px;
    cursor: pointer;
    margin: auto;
}

.icon-action.print {
    background-color: #276ef1;
    color: white;
}

.icon-action.print:hover {
    color: black;
}

.icon-action.pencil {
    background-color: #f6bc2f;
    color: white;
}

.icon-action.pencil:hover {
    color: black;
}

/* page download surat end */

/* page web */
.container-web {
    color: black;
    width: 100%;
    min-height: 100vh;
    background-color: rgba(255, 255, 255, 0.85);
    padding: 100px 60px;
}

.container-web-title {
    display: flex;
    align-items: center;
    flex-direction: column;
    color: black;
    padding: 20px 0;
    width: 100%;
}

.container-web-title h2 {
    text-align: center;
    opacity: 0;
    transform: translateY(-30px);
    animation: slideDown 0.6s ease-out forwards;
}

.container-web-title img {
    text-align: center;
    width: 30%;
    opacity: 0;
    transform: translateY(-30px);
    animation: slideDown 0.6s ease-out forwards;
    animation-delay: 0.4s;
}

@keyframes slideDown {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.container-web-content {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-wrap: wrap;
    color: black;
    padding: 40px 0;
    gap: 20px;
}

.web-content-isi {
    background-color: #f8f8f8;
    height: 280px;
    width: 200px;
    margin: 10px 0;
    text-decoration: none;
    color: #333;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.8);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    z-index: 9;
}

.web-content-isi:hover,
.web-content-isi:focus {
    transform: scale(1.1);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.8);
}

.web-content-isi h5 {
    padding: 10px;
    text-align: center;
    color: black;
    font-size: 12px;
}

.web-content-title {
    height: 70%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    overflow: hidden;
}

.web-img {
    display: flex;
    align-items: center;
    justify-content: center;
}

.web-img img {
    height: 100%;
    object-fit: cover;
    width: 100%;
    transition: transform 0.3s ease;
}

.web-content-isi:hover img,
.web-content-isi:focus img {
    transform: scale(1.1);
}

.view-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.web-content-isi:hover .view-text,
.web-content-isi:focus .view-text {
    opacity: 1;
}
/* page web end*/

/* Page lapor */
.container-cara-melapor {
    color: black;
    width: 100%;
    min-height: 100vh;
    padding: 100px 60px;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.85);
}

.container-cara-melapor .cara-melapor-title {
    text-align: center;
    padding: 20px;
}

.cara-melapor-title h2 {
    opacity: 0;
    transform: translateY(-30px);
    animation: slideDown 0.6s ease-out forwards;
}

.cara-melapor-title img {
    opacity: 0;
    width: 18%;
    transform: translateY(-30px);
    animation: slideDown 0.6s ease-out forwards;
    animation-delay: 0.4s;
}

@keyframes slideDown {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cara-melapor-tutor h3 {
    font-size: 28px;
    font-weight: bold;
    color: #1e40af;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
}

.cara-melapor-tutor i {
    margin-right: 8px;
    font-size: 32px;
    color: #1e40af;
}

.tutor-lapor {
    background-color: #f9fafb;
    padding: 24px;
    border-radius: 8px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
    border-left: 4px solid #1e40af;
    margin-bottom: 50px;
}

.tutor-lapor ol {
    margin-left: 24px;
    color: #374151;
    font-size: 16px;
    line-height: 1.75;
}

.tutor-lapor .anak {
    margin-left: 24px;
    margin-top: 4px;
    color: #6b7280;
}

.tambahan-ajabang {
    padding-inline: 5px;
    border-left: 3px solid rgba(30, 64, 175, 0.7);
    margin-block: 10px;
}

.container-layanan-pengaduan {
    color: black;
    width: 100%;
    min-height: 100vh;
    background-color: rgba(255, 255, 255, 0.85);
}

.layanan-pengaduan-title {
    display: flex;
    align-items: center;
    flex-direction: column;
    color: black;
    padding-block: 20px;
}

.layanan-pengaduan-title img {
    width: 12%;
}

.container-layanan-content {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-wrap: wrap;
    color: black;
    padding: 0px 15px;
    gap: 10px;
}

.layanan-content-isi {
    background-color: #ffffff;
    height: 300px;
    width: 250px;
    margin: 30px 0;
    text-decoration: none;
    color: black;
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    overflow: hidden;
    /* position: relative; */
}

.layanan-content-isi:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

.layanan-content-isi h5 {
    padding: 10px;
    text-align: center;
}

.layanan-content-title {
    height: 75%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    overflow: hidden;
}

.layanan-img {
    display: flex;
    align-items: center;
    justify-content: center;
}

.layanan-img img {
    height: 100%;
    object-fit: cover;
    width: 100%;
    transition: all 0.3s ease;
}

.layanan-content-isi:hover img {
    transform: scale(1.1);
}

.view-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(252, 252, 252, 0.9);
    color: black;
    padding: 10px 20px;
    border-radius: 15px;
    font-size: 16px;
    font-weight: bold;
    transition: opacity 0.3s ease;
    opacity: 0;
    text-align: center;
    white-space: nowrap;
}

.layanan-content-isi:hover .view-text {
    opacity: 1;
}

/* Page lapor end*/

/* faq */
.contentFAQ {
    width: 70%;
    padding-top: 90px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    margin: 0 auto 30px auto;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.contentFAQ:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* Header untuk FAQ Chatbot */
.faqHeader {
    background-color: #0077b6;
    color: white;
    padding: 20px;
    text-align: center;
    border-radius: 10px;
    border-bottom: 1px solid #e8e8e8;
    transition: background-color 0.3s ease;
}

/* Chatbox untuk menampilkan pesan */
.chatBox {
    height: 70vh;
    padding: 20px;
    overflow-y: auto;
    background-color: #f3f3f3;
    display: flex;
    flex-direction: column;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

/* Daftar chat messages */
.chat-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}

/* Pesan individual */
.chat {
    display: flex;
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 10px;
    width: fit-content;
    max-width: 80%;
    word-wrap: break-word;
    opacity: 0;
    transform: translateY(20px);
    animation: slideUp 0.4s ease forwards;
}

/* Pesan yang diterima (incoming) */
.incoming {
    background-color: #fff;
    align-self: flex-start;
    color: #282828;
    border: 1px solid #bbbbbb;
}

/* Pesan yang dikirim (outgoing) */
.outgoing {
    background-color: #2ca474;
    color: white;
    align-self: flex-end;
    border: 1px solid #249c6c;
}

/* Styling untuk tombol opsi pertanyaan dalam chatbot */
.chat-options {
    display: flex;
    flex-direction: column;
    padding: 10px;
}

.chat-options button {
    background-color: #3ac890;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 8px;
    margin-top: 5px;
    cursor: pointer;
    text-align: left;
    transition: background-color 0.3s ease, transform 0.2s ease; /* Tambah animasi transisi */
}

.chat-options button:hover {
    background-color: #249c6c;
    transform: scale(1.05);
}

/* Tombol Mulai dan Pilih Lagi */
#startBtn {
    display: none;
    margin: 10px 43%;
    padding: 10px;
    background-color: #48cae4;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    width: 10%;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

#startBtn:hover {
    background-color: #00b4d8;
    transform: scale(1.05);
}

/* Keyframe animasi untuk pesan */
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0); /* Pesan berada di posisi akhir */
    }
}

/* Modal untuk gambar */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    background-color: rgba(0, 0, 0, 0.7);
}

.modal-content {
    display: block;
    margin: 50px auto;
    object-fit: contain;
    max-width: 100vw;
    max-height: 100vh;
}

.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: white;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
}

#caption {
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    padding: 10px 0;
    margin: 30px 0;
    color: white;
}

/* faq end*/

.ContainerDumas {
    padding: 30px;
    width: 70%;
    margin: 0 auto;
}

/* spg */

.ContainerSpg {
    padding: 30px;
    width: 50%;
    margin: 0 auto;
}

.upload-area {
    border: 2px dashed #28a745;
    padding: 20px;
    text-align: center;
    border-radius: 4px;
    cursor: pointer;
    margin-bottom: 15px;
}

.file-preview img {
    max-width: 100%;
    height: auto;
    margin-top: 10px;
}

/* spg end*/

/* Absen */

.participant-entry {
    border: 1px solid #ddd;
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 5px;
}

.btn-secondary {
    background-color: #6c757d;
    color: white;
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-bottom: 20px;
}

.btn-danger {
    background-color: #dc3545;
    color: white;
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 10px;
}

.btn-secondary:hover {
    background-color: #5a6268;
}

.btn-danger:hover {
    background-color: #c82333;
}

/* Absen end */

/* Footer */
footer {
    background: linear-gradient(
        to bottom,
        rgba(72, 202, 228, 0.8),
        rgba(0, 180, 216, 0.8),
        rgba(0, 150, 199, 0.8),
        rgba(0, 119, 182, 0.8)
    );
}

.footer-container {
    width: 100%;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-container .footer-address {
    width: 22%;
    margin-left: 15%;
    margin-top: 50px;
    list-style: none;
    padding: 10px 0px 10px 10px;
}

.footer-address h3 {
    margin-bottom: 10px;
}

.footer-address p {
    font-size: 16px;
    padding-bottom: 8px;
    color: white;
}

.footer-address p a {
    text-decoration: none;
    color: white;
}

.footer-container .footer-sosmed {
    width: 23%;
    margin-right: 15%;
    margin-top: 50px;
    padding: 10px 0 10px 10px;
}

.footer-sosmed h3 {
    margin-bottom: 25px;
}
.footer-sosmed ul li {
    list-style: none;
    padding-bottom: 12px;
}

.footer-visitor-count ul li {
    list-style: none;
    padding-bottom: 12px;
}

.footer-sosmed a {
    text-decoration: none;
    color: white;
}

.footer-bottom {
    font-size: 10px;
    display: flex;
    justify-content: space-between;
    padding: 0 5px 5px 5px;
}

/* Responsive Breakpoint */

/* ukuran layar 1024px */
@media screen and (max-width: 1024px) {
    .hidden {
        display: none;
    }
    .dropdown-content {
        position: static;
        box-shadow: none;
        font-size: 90%;
        padding: 8px;
    }

    .logo-img {
        width: 50px;
    }

    .container-navbar {
        flex-wrap: wrap;
    }

    nav ul {
        flex-direction: column;
        width: 100%;
        padding: 10px;
    }

    nav ul li {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        border: none;
        padding: 8px;
        border-radius: 5px;
    }

    .dropdown-content li a {
        padding: 8px;
        border-radius: 5px;
    }

    .fa-caret-down {
        font-size: 16px;
    }

    .dropdown-i {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    nav ul.hidden {
        display: none;
    }

    .icon-nav {
        display: flex;
        align-items: center;
        font-size: 22px;
    }

    main {
        min-width: 100vw;
    }

    .container-home {
        margin-top: 40px;
        padding-top: 20px;
    }

    .home-title {
        width: 100%;
        padding: 15px 50px;
        height: fit-content;
        margin-top: 30px;
    }

    .home-title h1 {
        font-size: 26px;
        text-align: center;
        height: auto;
    }

    .home-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .home-content .home-content-text {
        order: 2;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 20px;
    }

    .home-content-text h6 {
        text-align: center;
        width: 100%;
        font-size: x-large;
    }

    .home-content-text p {
        margin-block: 20px;
        width: 100%;
        text-align: center;
    }

    .home-content .home-content-logo {
        order: 1;
    }

    .home-content-logo img {
        width: 350px;
        margin: 10px 20px 10px 0;
    }

    @keyframes bounce {
        0%,
        100% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-20px); /* Bounce lebih tinggi */
        }
    }

    .tutorial {
        width: 100%;
        height: fit-content;
    }

    .tutorial .tutorial-container {
        display: flex;
        flex-wrap: wrap;
    }

    .tutorial .tutorial-main {
        margin: 20px;
    }

    .role {
        width: 100%;
        height: fit-content;
    }

    .role .role-container {
        display: flex;
        flex-wrap: wrap;
    }

    .role .role-main {
        margin: 30px;
    }

    .isi-form {
        width: 100%;
        min-height: 100vh;
    }

    .form-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .form-content-logo {
        order: 1;
    }

    .form-content .form-content-text {
        order: 2;
        width: 100%;
    }

    .form-content .form-content-text-title {
        width: 100%;
        margin: 0;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .form-choice {
        margin: 0;
        width: 60%;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
    }

    .form-choice p {
        font-size: 18px;
    }

    .form-choice select {
        width: 85%;
        text-align: center;
    }

    .form-choice option {
        text-align: center;
    }

    .form-container {
        width: 65%;
        padding: 25px;
        margin-bottom: 10%;
    }

    .form-container img {
        width: 35%;
    }

    .form-container h3 {
        font-size: 20px;
    }

    .form-group label {
        font-size: 14px;
    }

    .input-group-prepend {
        font-size: 14px;
        padding: 8px;
    }

    .btn-send-form button {
        font-size: 16px;
        padding: 12px;
    }

    .footer-container {
        width: 100%;
    }

    .footer-container .footer-address {
        width: 40%;
        padding: 0 60px 40px 0;
    }

    .footer-container .footer-sosmed {
        width: 40%;
        padding: 0 0 40px 60px;
    }

    .footer-bottom {
        font-size: 10px;
    }

    .mybg img {
        height: 100vh;
        width: auto;
    }

    .container-layanan-pengaduan {
        padding: 60px 20px;
        width: 100%;
        height: fit-content;
    }

    .container-web {
        padding: 80px 40px;
        width: 100%;
        height: fit-content;
    }

    .container-web-title img {
        width: 25%;
    }

    .contentFAQ {
        width: 70%;
        padding-top: 90px;
    }

    .faqHeader h2 {
        font-size: 20px;
        padding: 0;
    }

    .chat-options button {
        padding: 10px;
        font-size: 16px;
    }

    #startBtn {
        width: 15%;
        margin: 5px 42%;
    }
}

/* ukuran tablet */
@media screen and (max-width: 768px) {
    .role-popup-text {
        margin-inline: 50px;
        padding: 20px;
        gap: 10px;
        height: fit-content;
        box-shadow: 0px 0px 0p x 4px rgba(255, 255, 255, 0.4);
        max-height: 90%;
        overflow: scroll;
    }

    .role-popup-text h3 {
        margin-inline: 60px;
    }

    .role-popup-text .role-close-btn {
        right: 10px;
    }

    .hidden {
        display: none;
    }
    .dropdown-content {
        position: static;
        box-shadow: none;
        font-size: 80%;
        padding: 5px;
    }

    .logo-img {
        width: 40px;
    }

    .container-navbar {
        flex-wrap: wrap;
    }

    nav ul {
        flex-direction: column;
        width: 100%;
        padding: 5px;
    }

    nav ul li {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Bayangan samar */
        border: none; /* Hapus border default */
        padding: 5px;
        border-radius: 5px;
    }

    .dropdown-content li a {
        padding: 5px;
        border-radius: 5px;
    }

    .fa-caret-down {
        font-size: 14px;
    }

    .dropdown-i {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    nav ul.hidden {
        display: none;
    }

    .icon-nav {
        display: flex;
        align-items: center;
        font-size: 20px;
    }

    main {
        min-width: 100vw;
    }

    .container-home {
        margin-top: 50px;
        padding-top: 40px;
    }

    .home-title {
        width: 100%;
        padding: 10px 50px;
        height: fit-content;
        margin-top: 30px;
    }

    .home-title h1 {
        font-size: 24px;
        text-align: center;
        height: auto;
        margin-block: 0px;
        padding-block: 0px;
        line-height: 1.2;
    }

    .home-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .home-content .home-content-text {
        order: 2;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 20px;
    }

    .home-content-text h6 {
        text-align: center;
        width: 100%;
        font-size: x-large;
    }

    .home-content-text p {
        margin-block: 20px;
        width: 100%;
        text-align: center;
    }
    .home-content .home-content-logo {
        order: 1;
    }
    .home-content-logo img {
        width: 300px;
        margin: 10px 20px 10px 0;
    }

    .tutorial {
        width: 100%;
        height: fit-content;
        /* min-height: 100vh; */
    }

    .tutorial .tutorial-container {
        display: flex;
        flex-wrap: wrap;
    }

    .tutorial .tutorial-main {
        margin: 15px;
    }

    .role {
        width: 100%;
        /* min-height: 100vh; */
        height: fit-content;
    }

    .role .role-container {
        display: flex;
        flex-wrap: wrap;
    }

    .role .role-main {
        margin: 20px;
    }

    .isi-form {
        width: 100%;
        min-height: 100vh;
    }

    .form-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .form-content-logo {
        order: 1;
    }

    .form-content .form-content-text {
        order: 2;
        width: 100%;
    }

    .form-content .form-content-text-title {
        width: 100%;
        margin: 0;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .form-choice {
        margin: 0;
        width: 58%; /* Buat form-choice memiliki lebar penuh */
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
    }

    .form-choice p {
        font-size: 16px;
    }

    .form-choice select {
        width: 80%;
        text-align: center;
    }

    .form-choice option {
        text-align: center;
    }

    .form-container {
        width: 60%;
        padding: 20px;
        margin-bottom: 10%;
    }

    .form-container img {
        width: 30%;
    }

    .form-container h3 {
        font-size: 18px;
    }

    .form-group label {
        font-size: 12px;
    }

    .input-group-prepend {
        font-size: 12px;
        padding: 6px;
    }

    .btn-send-form button {
        font-size: 14px;
        padding: 10px;
    }

    .footer-container {
        width: 100%;
    }

    .footer-container .footer-address {
        width: 35%;
        padding: 0 50px 30px 0;
    }

    .footer-container .footer-sosmed {
        width: 35%;
        padding: 0 0 30px 50px;
    }

    .footer-bottom {
        font-size: 8px;
    }

    .mybg img {
        height: 100vh;
        width: auto;
        object-position: center;
    }

    .cara-melapor-content {
        padding: 20px;
    }

    .cara-melapor-tutor h3 {
        font-size: 24px;
    }

    .cara-melapor-title img {
        width: 50%;
    }

    .tutor-lapor ol {
        font-size: 14px;
    }

    .layanan-pengaduan-title img {
        width: 50%;
    }

    .container-layanan-pengaduan {
        padding: 50px 20px;
        width: 100%;
        height: fit-content;
    }

    .container-web {
        padding: 60px 30px;
        width: 100%;
        height: fit-content;
    }

    .container-web-title img {
        width: 50%;
    }
    .contentFAQ {
        width: 80%;
        padding-top: 70px;
    }

    .faqHeader h2 {
        font-size: 18px;
        padding: 0;
    }

    .chat-options button {
        padding: 10px;
        font-size: 14px;
    }

    #startBtn {
        width: 20%;
        margin: 5px 40%;
    }
}

/* ukuran mobile */
@media screen and (max-width: 576px) {
    .role-popup-text h3 {
        margin-inline: 20px;
    }

    .hidden {
        display: none;
    }
    .dropdown-content {
        position: static;
        box-shadow: none;
        font-size: 70%;
        padding: 5px;
    }
    .logo-img {
        width: 30px;
    }

    .container-navbar {
        flex-wrap: wrap;
    }

    nav ul {
        flex-direction: column;
        width: 100%;
        padding: 5px;
    }

    nav ul li {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Bayangan samar */
        border: none; /* Hapus border default */
        padding: 5px;
        border-radius: 5px;
    }

    .dropdown-content li a {
        padding: 5px;
        border-radius: 5px;
    }

    .fa-caret-down {
        font-size: 14px;
    }

    .dropdown-i {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    nav ul.hidden {
        display: none;
    }

    .icon-nav {
        display: flex;
        align-items: center;
        font-size: 15px;
    }

    main {
        width: 100vw;
    }

    .container-home {
        margin-top: 20px;
        padding-top: 0px;
    }

    .home-title {
        width: 100%;
        height: fit-content;
        margin-top: 40px;
    }

    .home-title h1 {
        font-size: 24px;
        text-align: center;
        line-height: 1.3;
        word-spacing: 3px;
    }

    .home-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .home-content .home-content-text {
        order: 2;
        width: 100%;
    }

    .home-content-text h6 {
        text-align: center;
        width: 100%;
        margin-top: 20px;
    }

    .home-content-text p {
        margin-top: 3%;
        width: 100%;
        text-align: center;
    }

    .home-content .home-content-logo {
        order: 1;
    }
    .home-content-logo img {
        width: 300px;
        margin: 10px 20px 10px 0;
    }

    .tutorial {
        height: fit-content;
        width: 100%;
        min-height: 100vh;
    }

    .tutorial .tutorial-container {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .tutorial .tutorial-main {
        margin: 15px;
        width: 90%;
    }
    .tutorial .tutorial-main:hover {
        transform: translateY(-10px);
    }
    .tutorial-title-container h4 {
        font-size: 20px;
    }
    .tutorial .tutorial-icon i {
        font-size: 50px;
        padding-bottom: 0;
    }

    .tutorial .tutorial-content-container {
        font-size: 20px;
        margin: 0;
        height: 0;
    }

    .role {
        width: 100%;
        /* height: 100vh; */
        height: fit-content;
    }

    .role .role-container {
        display: flex;
        flex-direction: column;
        padding-block: 20px;
    }

    #role h2 {
        text-align: center;
    }

    .role .role-main {
        margin: 20px;
        width: 80%;
    }

    .role-image {
        overflow: hidden;
    }

    .role-image img {
        width: 170px;
        height: auto;
    }

    .isi-form {
        width: 100%;
        min-height: 100vh;
    }

    .form-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .form-content-logo {
        order: 1;
    }

    .form-content .form-content-text {
        order: 2;
        width: 100%;
    }

    .form-content .form-content-text-title {
        width: 100%;
        margin: 0;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .form-choice {
        margin: 0 !important;
        width: 100%; /* Buat form-choice memiliki lebar penuh */
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        padding-inline: 20px;
    }

    .form-choice p {
        font-size: 16px;
    }

    .form-choice select {
        width: 100%;
        text-align: center;
    }

    .form-choice option {
        text-align: center;
    }

    .form-container {
        width: 90%;
        padding: 15px;
        margin-bottom: 10%;
        margin-top: 20px;
    }

    .form-container img {
        width: 25%;
    }

    .form-container h3 {
        font-size: 16px;
    }

    .form-group label {
        font-size: 10px;
    }

    .form-group input {
        padding: 10px 5px;
    }

    .input-group-prepend {
        font-size: 10px;
        padding: 4px;
    }

    .cara-melapor-title img {
        width: 60%;
    }

    .layanan-pengaduan-title img {
        width: 60%;
    }

    .container-web-title img {
        width: 60%;
    }

    .btn-send-form button {
        font-size: 12px;
        padding: 10px;
    }

    .footer-container {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .footer-container .footer-address {
        width: 85%;
        margin: 0;
        padding: 20px 0 0 0;
    }

    .footer-container .footer-sosmed {
        width: 85%;
    }

    .footer-sosmed ul {
        display: flex;
        flex-direction: column;
        margin-left: 10px;
    }

    .footer-sosmed h3 {
        margin-bottom: 10px;
    }

    .footer-bottom {
        font-size: 6px;
    }

    .container-cara-melapor {
        color: black;
        width: 100%;
        padding: 70px 0px;
        border-radius: 8px;
        background-color: rgba(255, 255, 255, 0.85);
    }

    .tutor-lapor {
        width: 100%;
    }

    .container-layanan-pengaduan {
        padding: 40px 15px;
        width: 100%;
        height: fit-content;
    }

    .layanan-content-isi {
        width: 320px;
    }
    .container-web {
        padding: 40px 20px;
        width: 100%;
        height: fit-content;
    }

    .web-content-isi {
        width: 300px;
    }

    .contentFAQ {
        width: 90%;
        padding-top: 60px;
    }

    .faqHeader h2 {
        font-size: 18px;
        padding: 0;
    }

    .chat-options button {
        padding: 10px;
        font-size: 14px;
    }

    #startBtn {
        width: 20%;
        margin: 5px 40%;
    }
}