*,
html {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    background-color: #ffffff;
    font-family: "Poppins", sans-serif;
}

/* ------------------------------------------------------navbar start------------------------------------------------------ */


nav {
    background-color:  #ffffff; /* Mengatur warna latar belakang navbar menjadi putih */
    display: flex; /* Menggunakan flexbox untuk tata letak navbar */
    justify-content: space-between; /* Menyebarkan elemen-elemen di dalam navbar dengan jarak yang merata di antara mereka */
    padding: 1rem 2rem; /* Memberikan jarak dalam navbar: atas-bawah 1rem, kiri-kanan 2rem */
    position: fixed; /* Menjadikan navbar tetap berada di atas halaman saat melakukan scroll */
    top: 0; /* Menempatkan navbar di posisi paling atas */
    left: 0; /* Menempatkan navbar di posisi paling kiri */
    width: 100%; /* Memastikan navbar memenuhi lebar layar */
    z-index: 999; /* Menempatkan navbar di atas elemen lainnya yang memiliki z-index lebih rendah */
    transition: background-color 0.3s ease; /* Menambahkan transisi lembut selama 0.3 detik saat terjadi perubahan warna latar belakang */
    box-shadow: 1px 1px 3px rgba(1, 1, 3, 0.5); /* Menambahkan bayangan lembut di bawah navbar untuk efek kedalaman */
}

nav.sticky {
    background-color: #000000; /* Mengubah warna latar belakang navbar menjadi putih saat navbar dalam keadaan sticky (tetap di atas saat scroll) */
}

nav ul {
    display: flex; /* Menggunakan flexbox untuk tata letak elemen-elemen dalam navbar */
    align-items: center; /* Menyelaraskan elemen-elemen secara vertikal di tengah */
    gap: 2rem; /* Memberikan jarak antar elemen dalam navbar sebesar 2rem */
    list-style: none; /* Menghilangkan penanda daftar (bullet points) pada elemen list */
}

nav div img {
    width: 70px; /* Mengatur lebar gambar logo di dalam div navbar menjadi 100px */
}

/* ---- font pada navbar -----*/
nav ul li a {
    text-decoration: none; /* Menghilangkan garis bawah pada teks tautan */
    color: #000000; /* Mengatur warna teks tautan menjadi #191919 (warna abu-abu tua) */
    font-weight: 600; /* Mengatur ketebalan teks menjadi semi-bold */
    padding: 8px 0; /* Menambahkan padding vertikal (atas dan bawah) sebesar 8px */
    transition: all; /* Mengaktifkan transisi untuk semua perubahan properti */
    transition-duration: 300ms; /* Durasi transisi diatur selama 300ms (0.3 detik) */
    border-bottom: 1px solid rgba(12, 116, 116, 0); /* Menambahkan garis bawah transparan (tidak terlihat) */
    border-radius: 5px; /* Membuat sudut elemen tautan melengkung dengan radius 5px */
    padding: 10px 15px; /* Menambahkan padding 10px di atas/bawah dan 15px di kiri/kanan dan juga dapat mempengaruhi spasi font navbar*/
}

/* ---- font pada navbar ----*/

nav ul li a:hover {
    /* color: #be9448; /* Mengubah warna teks tautan menjadi #be9448 (warna emas) saat di-hover */
    /* border-bottom: 1px solid #be9448; /* Menambahkan garis bawah berwarna emas saat di-hover */
    background-color:rgb(228, 228, 228); /* Mengubah warna latar belakang tautan menjadi biru saat di-hover */
    box-shadow: 0px 0px 20px 4px rgb(228, 228, 228); 
}


/* ----ikon pada navbar -----*/
nav .menu-icon {
    transition: all; /* Menambahkan transisi untuk semua properti CSS yang berubah */
    transition-duration: 300ms; /* Durasi transisi adalah 300ms (0.3 detik) */
    border-bottom: #ffffff00; /* Mengatur border-bottom dengan warna transparan (#19191900), yang sebenarnya tidak terlihat */
    color: #000000; /* Mengatur warna teks (atau ikon) menjadi putih */
    
}


nav .menu-list {
    color: #000000;
}

/* ---ikon pada navbar ------*/

nav .menu-icon:hover {
    /* background-color: #fffc00; /* Mengubah warna latar belakang tautan menjadi emas saat di-hover */
   /* box-shadow: 0px 0px 5px 1px #fffc00; /* Bayangan lebih kecil dan tidak terlalu menyebar */
    color: #000000; /* Mengubah warna ikon menu menjadi biru saat elemen dalam keadaan hover (ketika kursor berada di atasnya) */
    
}


.menu-icon {
    /* background-color: rgb(12, 116, 116); */ /* Baris ini dikomentari, seharusnya untuk mengatur warna latar belakang ikon menu */
    font-size: 25px; /* Mengatur ukuran font (atau ukuran ikon jika menggunakan font ikon) menjadi 25px */
    display: none; /* Menyembunyikan elemen dengan kelas .menu-icon, sehingga tidak ditampilkan di halaman */
    border-radius: 8px; /* Membuat sudut elemen tautan melengkung dengan radius 5px */
    padding: 5px; /* Menambahkan padding 10px di atas/bawah dan 15px di kiri/kanan dan juga dapat mempengaruhi spasi font navbar*/
}

/* ------------------------------------------------------Navbar End------------------------------------------------------ */

/* ------------------------------------------------------hero section------------------------------------------------------ */
.hero {
    background-image: url(asset/backgroud\ pantai.jpg); /* Mengatur gambar latar belakang elemen dengan path gambar pantai nusa dua */
    min-height: 130vh; /* Menentukan tinggi minimum elemen sebesar 130% dari tinggi viewport */
    display: flex; /* Mengatur elemen menjadi fleksibel untuk tata letak fleksibel */
    align-items: center; /* Menyelaraskan item fleksibel secara vertikal ke tengah */
    background-repeat: no-repeat; /* Mencegah pengulangan gambar latar belakang */
    background-size: cover; /* Memperbesar atau memperkecil gambar agar menutupi seluruh area elemen */
    background-position: center; /* Menempatkan gambar latar di tengah elemen */
    position: relative; /* Mengatur posisi elemen relatif terhadap lokasi aslinya untuk referensi posisi anak elemen */
}


.hero::after {
    content: ''; /* Membuat elemen pseudo-elemen kosong setelah elemen dengan kelas .hero */
    display: block; /* Menampilkan pseudo-elemen sebagai blok */
    position: absolute; /* Mengatur posisi pseudo-elemen secara absolut relatif terhadap elemen .hero */
    width: 100%; /* Lebar pseudo-elemen diatur agar menutupi seluruh lebar elemen .hero */
    height: 30%; /* Tinggi pseudo-elemen diatur menjadi 30% dari tinggi elemen .hero */
    bottom: 0; /* Meletakkan pseudo-elemen di bagian bawah elemen .hero */
    background: linear-gradient(0deg, rgb(255, 255, 255) 8%, rgba(255, 255, 255, 0) 50%); 
    /* Memberikan latar belakang gradasi dari hitam pekat (rgba(1, 1, 3, 1) pada 8%) menjadi transparan (rgba(255, 255, 255, 0) pada 50%) dari bawah ke atas (0 derajat) */
}


.hero .content {
    padding: 1.4rem 7%; /* Memberikan jarak di dalam elemen: atas/bawah 1.4rem, kiri/kanan 7% dari lebar */
    max-width: 60rem; /* Membatasi lebar maksimum elemen konten menjadi 60rem */
}

.hero .content h1 {
    font-size: 4rem; /* Mengatur ukuran font untuk elemen heading menjadi 4rem */
    color: #fff; /* Warna teks putih */
    text-shadow: 1px 1px 3px rgba(1, 1, 3, 0.5); /* Memberikan bayangan pada teks dengan warna hitam semi-transparan */
    line-height: 1.2; /* Mengatur jarak antar baris pada teks heading */
}

.hero .content p {
    font-size: 1.5rem; /* Ukuran font untuk paragraf menjadi 1.5rem */
    margin-top: 0.5; /* Memberikan jarak atas sebesar 0.5 (kemungkinan ada kesalahan; seharusnya `0.5rem`) */
    line-height: 1.4; /* Mengatur jarak antar baris teks */
    font-weight: 400; /* Ketebalan teks dengan nilai menengah */
    color: #ffffff; /* Warna teks putih */
}

.hero .content .cta {
    margin-top: 2rem; /* Memberikan jarak atas sebesar 2rem */
    display: inline-block; /* Membuat elemen menjadi seperti kotak garis, memungkinkan pengaturan padding */
    padding: 1rem 3rem; /* Memberikan jarak dalam elemen: atas/bawah 1rem, kiri/kanan 3rem */
    font-size: 1.4rem; /* Ukuran teks tombol menjadi 1.4rem */
    color: #ffffff; /* Warna teks putih */
    background-color:rgb(157, 157, 157); /* Warna latar belakang tombol menjadi biru */
    border-radius: 0.5rem; /* Membulatkan sudut tombol sebesar 0.5rem */
    box-shadow: 0px 0px 20px 4px rgb(255, 255, 255);  /* Memberikan bayangan pada tombol dengan warna biru semi-transparan */
    text-decoration: none; /* Menghapus garis bawah pada teks tautan */
}


/* Hero Section End */


/* ------------------------------------------------------About Us------------------------------------------------------ */
section p.ringkasan {
    font-style: italic; /* Mengatur teks menjadi miring (italic) */
    font-size: 18px; /* Ukuran font 18 piksel */
    color: #000000; /* Warna teks abu-abu muda */
    margin-bottom: 3rem; /* Memberikan jarak bawah sebesar 3rem */
    text-align: center; /* Menengahkan teks secara horizontal */
    padding-top: 2rem; /* Memberikan jarak atas sebesar 2rem */
}

section {
    scroll-margin-top: 80px; /* Mengatur jarak elemen dari bagian atas viewport saat di-scroll, disesuaikan dengan tinggi navbar */
}

section h3 {
    font-size: 30px; /* Ukuran font untuk heading level 3 menjadi 30px */
}

section h3::after {
    content: ""; /* Menambahkan elemen pseudo untuk dekorasi di bawah heading */
    border-bottom: 5px solid rgba(0, 0, 0, 0.75); /* Menambahkan garis bawah dengan ketebalan 5px dan warna biru */
    box-shadow: 0px 0px 10px 4px rgba(227, 227, 227, 0.75); /* Menambahkan shadow di garid */
    width: 52px; /* Lebar garis 52px */
    display: block; /* Menampilkan elemen sebagai blok */
    margin: 20px auto; /* Memberikan jarak atas/bawah 20px dan menengahkan garis */
}

.layar-dalam {
    width: 1000px; /* Lebar elemen maksimum 1000px */
    margin: auto; /* Menengahkan elemen secara horizontal */
}

#aboutus {
    text-align: center; /* Menengahkan semua teks dalam elemen dengan ID `aboutus` */
    padding: 50px 10px 0px 10px; /* Memberikan jarak di dalam elemen: atas 50px, kanan/kiri 10px, bawah 50px */
    color: #000000;
}

.aboutus .ringkasan {
    text-align: center; /* Menengahkan teks di elemen dengan kelas `ringkasan` */
    max-width: 30rem; /* Membatasi lebar maksimum elemen menjadi 30rem */
    margin: auto; /* Menengahkan elemen secara horizontal */
    font-weight: 100; /* Menjadikan teks tipis */
    line-height: 1.6; /* Mengatur jarak antar baris sebesar 1.6 kali tinggi teks */
    margin-bottom: 25px; /* Memberikan jarak bawah sebesar 25px */
}


.konten {
    display: flex; /* Mengaktifkan flexbox */
    justify-content: space-between; /* Memberi jarak di antara elemen */
    align-items: flex-start; /* Menyelaraskan item ke bagian atas */
    flex-wrap: wrap; /* Agar elemen bisa turun ke bawah pada layar sempit */
    gap: 20px; /* Memberikan jarak antar elemen */
}

.konten-isi {
    flex: 1; /* Memungkinkan konten teks mengambil ruang yang tersedia */
    max-width: 90%; /* Batasi lebar maksimum menjadi 50% */
    margin: auto; /* Menengahkan paragraf secara horizontal */
    text-align: center; /* untuk merubah rata tulisan pada sejarah perusahaan */
    color:#000000
   /* margin-top: -40px; /* untuk menaikan posisi konten, menggunakan -40px dan untuk menurunkan konten menggunakan 40px */
}

.video-container {
    flex: 1; /* Memberikan elemen fleksibilitas untuk mengambil ruang yang tersedia dalam wadah flexbox */
    width: 800px; /* Mengatur lebar elemen video-container menjadi 350px */
    height: 400px; /* Mengatur tinggi elemen video-container menjadi 400px */
    margin: auto; /* Menengahkan paragraf secara horizontal */
    position: relative; /* Mengatur posisi elemen menjadi relatif terhadap posisi normalnya, memungkinkan elemen anak untuk diposisikan secara absolut */
    overflow: hidden; /* Menyembunyikan bagian elemen yang melebihi batas lebar dan tinggi yang ditentukan */
    background: #000000; /* Mengatur latar belakang elemen menjadi abu (#3d3b3b) */
    border-radius: 10px; /* Membuat sudut elemen menjadi melengkung dengan radius 10px */
}

.video-container iframe {
    position: absolute; /* Menetapkan posisi iframe menjadi absolut, relatif terhadap elemen induk yang memiliki posisi relatif (video-container) */
    top: 0; /* Menempatkan iframe di bagian atas container (0px dari atas) */
    left: 0; /* Menempatkan iframe di sisi kiri container (0px dari kiri) */
    width: 100%; /* Mengatur lebar iframe untuk memenuhi lebar penuh dari .video-container */
    height: 100%; /* Mengatur tinggi iframe untuk memenuhi tinggi penuh dari .video-container */
    object-fit: cover; /* Menjaga rasio aspek video dan memastikan bahwa video menutupi seluruh area iframe, meskipun ada pemotongan */
    border: 0; /* Menghilangkan border default pada iframe */
}

.menu .menu-card {
    text-align: center; /* Menengahkan teks dalam elemen dengan kelas `menu-card` */
    padding-bottom: 4rem; /* Memberikan jarak bawah sebesar 4rem */
    width: 80%; /* Mengatur lebar gambar menjadi 80% dari kontainer */
}

/* ------------------------------------------------------About Us-------------------------------------------------------- */

/* ------------------------------------------------------Produk---------------------------------------------------------- */
#menu {
    text-align: center; /* Menengahkan teks dalam elemen dengan ID `menu` */
    background-color: #ffffff; /* Mengatur warna latar belakang menjadi abu */
    padding: 50px 10px 50px 10px; /* Memberikan jarak di dalam elemen: atas 50px, kanan/kiri 10px, bawah 50px */
    width: 97%; border: none; border-top: 1px solid #000; margin: 0 auto;
    color:#000000
    
}

.menu h2, 
.contact h2 {
    margin-bottom: 1rem; /* Memberikan jarak bawah sebesar 1rem untuk heading level 2 di elemen dengan kelas `menu` dan `contact` */
}

.menu p {
    text-align: center; /* Menengahkan teks paragraf */
    max-width: 30rem; /* Membatasi lebar paragraf maksimum menjadi 30rem */
    margin: auto; /* Menengahkan paragraf secara horizontal */
    font-weight: 100; /* Membuat teks tipis */
    line-height: 1.6; /* Mengatur jarak antar baris sebesar 1.6 kali tinggi teks */
}

.menu .row {
    display: flex; /* Membuat elemen menjadi kontainer fleksibel untuk tata letak */
    flex-wrap: wrap; /* Memungkinkan item untuk berpindah ke baris berikutnya jika ruang tidak cukup */
    margin-top: 0rem; /* Memberikan jarak atas sebesar 5rem */
    justify-content: center; /* Menengahkan item dalam kontainer */
}

.menu .menu-card {
    text-align: center; /* Menengahkan teks dalam elemen dengan kelas `menu-card` */
    padding-bottom: 3rem; /* Memberikan jarak bawah sebesar 4rem */
    width: 80%; /* Mengatur lebar gambar menjadi 80% dari kontainer */
}

.menu .row .menu-card img {
    /* border-radius: 50%; */ /* Komentar: Membuat gambar berbentuk lingkaran (dalam keadaan aktif) */
    border-radius: 5px; /* Membulatkan sudut gambar sebesar 5px */
    width: 80%; /* Mengatur lebar gambar menjadi 80% dari kontainer */
}

.menu .row .menu-card .menu-card-title {
    margin: 1rem auto 0.5rem; /* Memberikan jarak atas 1rem, bawah 0.5rem, dan menengahkan secara horizontal */
    color:#000000
}

.menu .row .Pesan {
    font-size: medium; /* Ukuran teks sedang */
    color: rgb(222, 222, 222); /* Warna teks aqua */
}

.menu .row .cta1 {
    margin-top: 0.5rem; /* Memberikan jarak atas sebesar 2rem */
    display: inline-block; /* Membuat elemen seperti tombol yang bisa diatur padding-nya */
    padding: 1rem 3rem; /* Jarak dalam elemen: atas/bawah 1rem, kiri/kanan 3rem */
    font-weight: 600; /* Ukuran teks 1rem (catatan: ada spasi tidak sengaja antara `1` dan `rem`) */
    color: #000000; /* Warna teks putih */
    background-color:rgb(229, 229, 229); /* Warna latar belakang tombol biru */
    border-radius: 0.5rem; /* Membulatkan sudut tombol sebesar 0.5rem */
    box-shadow: 10px 10px 20px 4px rgb(255, 255, 255); /* Memberikan bayangan pada tombol dengan warna biru semi-transparan */
    text-decoration: none; /* Menghapus garis bawah pada teks tautan */
}


/* ------------------------------------------------------Produk---------------------------------------------------------- */

/* ------------------------------------------------------Gallery--------------------------------------------------------- */
/* Gaya untuk galeri */
.gallery {
    text-align: center;
    padding: 20px;
    width: 97%; border: none; border-top: 1px solid #000; margin: 0 auto;
}

.gallery h3 {
    font-size: 30px;
    color: #000000;
}

.gallery1 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px; /* Jarak antar gambar */
}

.gallery-img {
    width: 300px;  /* Ukuran gambar lebih besar */
    height: 200px; /* Tinggi gambar lebih besar */
    object-fit: cover;
    cursor: pointer;
    border-radius: 10px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Efek hover untuk memperbesar gambar sebelum diklik */
.gallery-img:hover {
    transform: scale(1.15);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}

/* Modal */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    overflow: auto;
    text-align: center;
    padding-top: 60px;
}

/* Ukuran gambar saat modal terbuka */
.modal-content {
    max-width: 95%;
    max-height: 90%;
    border-radius: 10px;
}

/* Caption (Teks Deskripsi Gambar) */
#caption {
    color: rgb(0, 0, 0);
    margin: 20px auto;
    font-size: 20px;
    max-width: 85%;
    word-wrap: break-word; /* Supaya teks tidak keluar dari modal */
    overflow-wrap: break-word;
    text-align: center;
    padding: 15px;
    background: rgba(226, 226, 226, 0.7);
    border-radius: 8px;
}

/* Tombol Close */
.close {
    position: absolute;
    top: 20px;
    right: 40px;
    color: rgb(0, 0, 0);
    font-size: 45px;
    font-weight: bold;
    cursor: pointer;
}

.close:hover {
    color: red;
}

/* ------------------------------------------------------Gallery------------------------------------------------------ */



/* ------------------------------------------------------kontact------------------------------------------------------ */

.contact {
    width: 100%; /* Membatasi lebar maksimum konten menjadi 1200px */
    margin: 0 auto; /* Memusatkan konten secara horizontal di dalam elemen induk */
    padding: 50px 20px; /* Memberikan jarak dalam (padding): atas/bawah 50px, kiri/kanan 20px */
    width: 97%; border: none; border-top: 1px solid #000; margin: 0 auto;
    gap: 30px; /* Menambahkan jarak antar-elemen di dalam flexbox (jika digunakan) */
}

.contact h1 {
    width: 100%; border: none; border-top: 1px solid #000; margin: 0 auto;
}

.contact h3 {
    font-size: 2rem; /* Mengatur ukuran teks heading level 3 menjadi 2rem */
    margin-bottom: 1rem; /* Memberikan jarak bawah sebesar 1rem untuk elemen berikutnya */
    text-align: center; /* Memusatkan teks secara horizontal */
    color: #000000;
}

.contact p {
    text-align: center; /* Menengahkan teks dalam paragraf */
    max-width: 30rem; /* Membatasi lebar paragraf maksimum menjadi 30rem */
    margin: auto; /* Memusatkan paragraf secara horizontal */
    font-weight: 100; /* Membuat teks tipis */
    line-height: 1.6; /* Menambahkan jarak antar baris */
}

.row {
    display: flex; /* Menggunakan Flexbox untuk mengatur tata letak */
    justify-content: ce; /* Menambahkan jarak antar elemen dengan merenggangkan secara proporsional */
    align-items: flex-start; /* Menyelaraskan elemen ke atas secara vertikal */
    margin-top: 20px; /* Menambahkan jarak di atas kontainer */
    margin-left: 20px; /* Menambahkan jarak di sisi kiri kontainer */
}

iframe {
    border-radius: 15px; /* Membulatkan sudut elemen iframe sebesar 15px */
    border: 0; /* Menghapus border bawaan iframe */
    width: 600px; /* Mengatur lebar peta menjadi 600px */
    height: 300px; /* Mengatur tinggi peta menjadi 300px */
}

.contact-info {
    flex: 1; /* Memungkinkan elemen ini untuk mengambil ruang yang tersedia */
    margin-left: 50px; /* Menambahkan jarak antara peta dan elemen informasi kontak */
}

.contact-icons {
    display: flex; /* Mengatur ikon menggunakan Flexbox */
    flex-direction: column; /* Mengatur elemen dalam kolom vertikal */
    align-items: flex-start; /* Menyelaraskan elemen ke kiri */
}

.icon-wrapper {
    display: flex; /* Menggunakan Flexbox untuk ikon */
    align-items: center; /* Menyelaraskan ikon dan teks secara vertikal */
    margin-bottom: 15px; /* Memberikan jarak bawah sebesar 15px */
}

.contact-icons a {
    margin-right: 8px; /* Menambahkan jarak antara ikon dan teks */
}

.icon-wrapper a {
    color: rgb(0, 0, 0); /* Memberikan warna hitam pada teks */
    text-decoration: none; /* Menghapus garis bawah pada teks */
}

.contact .icon-wrapper a:hover {
    color: rgba(0, 0, 0, 0.75); /* Mengubah warna teks menjadi kuning keemasan saat kursor diarahkan (hover) */
}

/* ------------------------------------------------------kontak------------------------------------------------------ */

/* Footer */
footer {
    /* background-color: #000000; Mengatur warna latar belakang footer menjadi putih */
    text-align: center; /* Menengahkan teks di dalam footer */
    padding: 1rem 0; /* Memberikan jarak bagian dalam: atas/bawah 1rem, kiri/kanan 0 */
    margin-top: 3rem; /* Menambahkan jarak atas sebesar 3rem dari elemen sebelumnya */
    box-shadow: 3px 1px 8px rgba(1, 1, 3, 0.5); /* Menambahkan bayangan pada footer */
    z-index: 999; /* Mengatur posisi elemen di atas elemen lainnya */
}

footer .socials {
    padding: 1rem 0 3rem; /* Memberikan jarak bagian dalam: atas 1rem, bawah 3rem, kiri/kanan 0 */
}

footer .socials a {
    color: #ffffff; /* Memberikan warna putih untuk teks tautan media sosial */
    margin: 1rem; /* Memberikan jarak di sekitar setiap tautan */
}

footer .socials a:hover {
    color: #031377; /* Mengubah warna tautan menjadi kuning keemasan saat hover */
}

footer .links a:hover {
    color: #000000; /* Mengubah warna teks tautan menjadi hitam saat hover */
    border-radius: 5px; /* Membulatkan sudut latar belakang sebesar 5px */
    background-color:rgba(29, 85, 230, 0.75); /* Mengubah warna latar belakang tautan menjadi emas saat di-hover */
    box-shadow: 0px 0px 20px 4px rgba(29, 85, 230, 0.75); 
}

footer .links {
    margin-bottom: 1.4rem; /* Memberikan jarak bawah sebesar 1.4rem untuk elemen berikutnya */
}

footer .links a {
    color: #ffffff; /* Memberikan warna hitam untuk teks tautan */
    padding: 0.7rem 1rem; /* Memberikan jarak dalam: atas/bawah 0.7rem, kiri/kanan 1rem */
    text-decoration: none; /* Menghapus garis bawah pada teks tautan */
    
}

footer .credit {
    font-size: 0.8rem; /* Mengatur ukuran teks menjadi lebih kecil */
}

footer .credit p {
    color: #ffffff; /* Memberikan warna hitam untuk teks paragraf */        
}

footer .credit a {
    color: #ffffff; /* Memberikan warna hitam untuk teks tautan */
    font-weight: 700; /* Membuat teks tautan menjadi tebal */
    text-decoration: none; /* Menghapus garis bawah pada teks tautan */
    
    
}

footer .credit a:hover {
    color: rgba(29, 85, 230, 0.75); /* Mengubah warna teks tautan menjadi kuning keemasan saat hover */
}


@media (min-width: 1024px) {
    .video-container {
        max-width: 80%; /* Membatasi lebar maksimum elemen .video-container menjadi 80% dari lebar kontainer induk */
        margin: 0 auto; /* Memusatkan elemen secara horizontal dengan margin otomatis di kiri dan kanan */
    }

    .contact .row .map {
        height: 30rem; /* Mengatur tinggi elemen peta (.map) dalam bagian .contact menjadi 30rem */
    }

    .contact .row form {
        padding-top: 0; /* Menghapus jarak bagian atas (padding-top) pada elemen form dalam .contact */
    }
}



@media only screen and (max-width : 768px) {
    section {
        scroll-margin-top: 100px; /* Sesuaikan dengan tinggi navbar di tampilan mobile */
    }

    html {
        font-size: 62.5%; /* Mengatur ukuran font dasar menjadi 62.5% dari nilai default browser, yang setara dengan 10px (pada browser default 16px) */
    }
    
    nav {
        flex-wrap: wrap; /* Membuat elemen dalam navbar membungkus ke baris baru jika ruang tidak cukup */
       /* position: fixed; */ /* Baris ini dikomentari, namun jika diaktifkan, ini akan membuat navbar tetap di posisi atas halaman saat di-scroll */
       /* width: 100%; */ /* Baris ini dikomentari, namun jika diaktifkan, ini akan mengatur lebar navbar menjadi 100% dari lebar layar */
    }
    
    nav ul {
        flex-direction: column; /* Mengubah arah flex item dalam navbar menjadi kolom (vertikal) */
        width: 100%; /* Mengatur lebar ul (unordered list) menjadi 100% dari lebar navbar */
    }
    
    nav ul.hidden {
        display: none; /* Menyembunyikan elemen <ul> yang memiliki kelas "hidden" */
    }
    

    /* ---------------about us----------------*/
    .konten {
        flex-direction: column; /* Mengatur elemen menjadi kolom */
        align-items: center; /* Menyelaraskan elemen di tengah */
    }

    .konten-isi, .video-container {
        max-width: 100%; /* Memastikan elemen mengisi lebar penuh */
        width: 100%; /* Atur lebar menjadi 100% */
    }

    .video-container {
        height: auto; /* Atur tinggi video menjadi otomatis agar sesuai dengan rasio */
        padding-bottom: 56.25%; /* Tetap menjaga rasio aspek 16:9 */
    }

    .video-container iframe {
        height: 100%; /* Menggunakan 100% untuk menyesuaikan dengan wadah */
    }
    /* ---------------about us----------------*/

    /* --------------gallery -------------------------*/
    .gallery .gallery1 {
        justify-content: center;
        gap: 10px; /* Mengurangi jarak antar gambar pada layar lebih kecil */
    }

    .gallery .gallery-img, .gallery .gallery-img1 {
        width: 250px; /* Mengatur lebar gambar .gallery-img dan .gallery-img1 menjadi 250px untuk memastikan gambar tidak terlalu besar di layar tablet */
        height: 170px; /* Mengatur tinggi gambar .gallery-img dan .gallery-img1 menjadi 170px agar ukuran gambar tetap proporsional dan sesuai dengan ruang yang tersedia */
    }
    /* --------------gallery -------------------------*/




    /* -------------- kontak -------------------------*/
    .menu-icon {
        display: flex; /* Mengubah elemen .menu-icon menjadi elemen flexbox, memungkinkan penataan anak elemen secara fleksibel */
        align-items: center; /* Menyelaraskan elemen anak di dalam .menu-icon secara vertikal ke tengah */
    }
    
    .row {
        flex-direction: column; /* Menyusun elemen dalam .row secara vertikal (dari atas ke bawah) */
        align-items: center; /* Menyelaraskan elemen-elemen dalam .row secara horizontal ke tengah */
        text-align: center; /* Menyelaraskan teks di dalam .row ke tengah */
    }
    
    iframe {
        width: 100%; /* Mengatur lebar iframe agar memenuhi lebar elemen induknya */
        height: 250px; /* Mengatur tinggi iframe menjadi 250px */
    }
    
    .contact-info {
        margin-left: 0; /* Menghapus margin kiri pada elemen .contact-info */
        margin-top: 20px; /* Menambahkan jarak 20px di bagian atas elemen .contact-info */
    }    

    .contact-icons {
        align-items: center; /* untuk mengatur posisi ikon media sosial pada halaman kontak */
    }

    .icon-wrapper {
        justify-content: center; /* Menyelaraskan elemen-elemen anak dalam .icon-wrapper secara horizontal ke tengah */
    }    
   
}
/* -------------- kontak -------------------------*/



@media only screen and (max-width: 480px) {
    .gallery .gallery1 {
        justify-content: center; /* Tetap rata tengah */
    }

    .gallery .gallery-img, .gallery .gallery-img1, .gallery .gallery-img3 {
        width: 150px; /* Mengubah ukuran gambar .gallery-img, .gallery-img1, dan .gallery-img3 menjadi 150px di lebar agar lebih kecil di layar mobile */
        height: 100px; /* Mengubah tinggi gambar .gallery-img, .gallery-img1, dan .gallery-img3 menjadi 100px agar proporsional dengan ukuran lebar */
    }
    
    .gallery .gallery-img2 {
        width: 300px; /* Mengubah ukuran gambar .gallery-img2 menjadi 300px di lebar agar lebih besar dibandingkan gambar lainnya di layar mobile */
        height: 200px; /* Mengubah tinggi gambar .gallery-img2 menjadi 200px untuk menyesuaikan dengan lebar yang lebih besar */
    }    
}


/*tim bupda

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700&display=swap');

/* Global Styles */
body {
  font-family: 'Poppins', sans-serif;
  line-height: 1.6;
  font-weight: 500;
  color: #000;
  margin: 0;
  padding: 0;
  background-color: #fff;
}

p {
  font-size: 1rem;
  font-weight: 500;
  color: #000;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  color: #000;
}

/* Tombol Tampilkan */
.show-button {
  padding: 0.75rem 1.5rem;
  background-color: #e5e5e5; /* abu-abu terang */
  color: #000;
  border: none;
  border-radius: 0.5rem;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin: 2rem auto;
  display: block;
}

.show-button:hover {
  background-color: #d4d4d4;
}

/* Section Tim */
.section-container {
  background-color: white;
  padding: 0rem 1rem;
  display: none;
}

.wrapper {
  padding: 0 1.5rem;
  margin: 0 auto;
  max-width: 1280px;
}

@media (min-width: 1024px) {
  .wrapper {
    padding: 0 0rem;
  }
}

/* Judul Ringkasan */
.heading-container {
  margin: 0 auto 2rem;
  max-width: 640px;
  text-align: center;
}

.ringkasan {
  font-size: 1.25rem;
  font-weight: 500;
  color: #000;
}

/* Grid Tim */
.team-grid {
  display: grid;
  gap: 2rem;
  margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .team-grid {
    margin-bottom: 4rem;
  }
}

/* Kartu Anggota Tim */
.card {
  display: flex;
  flex-direction: column;
  background-color: #f9fafb;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

@media (min-width: 640px) {
  .card {
    flex-direction: row;
  }
}

.card img {
  width: 100%;
  max-width: 300px;
  height: auto;
  object-fit: cover;
}

.card-content {
  padding: 1.25rem;
  flex: 1;
}

.card-content h4 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #000;
  margin-top: 0;
}

.card-content span {
  display: block;
  font-weight: 500;
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
  color: #000;
}

.card-content p {
  margin-top: 0.75rem;
  margin-bottom: 1rem;
  font-weight: 300;
  color: #000;
}