/* Gaya dasar untuk seluruh halaman */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Pastikan body setidaknya setinggi layar */
	font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    color: #333;
    background-image: url('background.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    
    /* Tambahkan jarak di bawah agar tidak tertutup footer */
    padding-bottom: 100px; 
}

/* Gaya untuk bagian header */
header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 15px 40px;
    background-image: url('header-bg.jpg');
    background-size: cover;
    background-position: center;
    color: #fff;
	/* Properti untuk membuat garis di bawah header */
    border-bottom: 2px solid #ffffff; 
    padding-bottom: 10px; /* Tambahkan sedikit jarak agar garis tidak terlalu mepet */
	/* Properti untuk membuat garis di atas header */
    border-top: 2px solid #ffffff; 
    padding-top: 10px; /* Tambahkan sedikit jarak di atas agar garis tidak terlalu mepet */
}

/* Gaya untuk logo */
.header-logo {
    height: 90px;
    width: auto;
	
	/* Gunakan align-self untuk memposisikan logo ke atas */
    align-self: flex-start;
}

/* Gaya untuk wadah sisi kanan */
.header-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
	gap: 20px; /*Memberi jarak antara element di dalam wadah */
    margin-left: auto; /* Mendorong seluruh wadah ke sisi kanan */
}

/* Gaya untuk teks di header */
.header-text {
    text-align: right;
    margin: 0;
}

/* Gaya untuk navigasi */
nav {
    margin-top: 10px;
}

/* Mengatur ulang gaya header untuk tampilan mobile */
@media (max-width: 768px) {
    header {
        flex-direction: column;
        align-items: flex-start;
        padding: 15px 20px;
    }
    .header-right {
        margin-left: 0;
        align-items: flex-start;
        width: 100%;
    }
    .header-text {
        text-align: left;
        margin-top: 10px;
    }
    nav {
        width: 100%;
        margin-top: 10px;
    }
}

/* Gaya untuk navigasi */
nav {
    margin-top: 10px; /* Jarak antara teks dan menu */
}

/* Gaya untuk navigasi */
nav {
    flex-shrink: 0; /* Mencegah navigasi menyusut */
}

header h1 {
    margin-bottom: 5px;
}

/* Gaya untuk menu navigasi */
nav ul {
    list-style-type: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin: 0 15px;
}

nav ul li a {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
}

/* Gaya untuk konten utama */
main {
    flex-grow: 1; /* Ini yang akan mendorong footer ke bawah */
	padding: 20px;
    text-align: center;
}

main h2 {
    color: #004a7c;
}

button {
    background-color: #ff5722;
    color: #fff;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 5px;
    font-size: 16px;
}

/* Gaya baru untuk footer yang tetap di layar */
footer {
    background-image: url('footer-bg.jpg');
    background-size: cover;
    background-position: center;
    color: #fff;
    text-align: center;
    padding: 5px;
	
	/* Properti penting untuk membuat footer tidak bergerak */
    position: fixed;
    bottom: 0;
    width: 100%;
	/* Properti untuk membuat garis di atas dan bawah footer */
    border-top: 1px solid #ffffff; 
    border-bottom: 1px solid #ffffff;
    
    padding-top: 10px; /* Tambahkan sedikit jarak di atas */
    padding-bottom: 10px; /* Tambahkan sedikit jarak di bawah */
}

/* Menyesuaikan menu navigasi untuk tampilan mobile */
@media (max-width: 600px) {
    header h1 {
        font-size: 24px;
    }

    header p {
        font-size: 14px;
    }
    
    nav ul li {
        display: block; /* Menjadikan menu vertikal */
        margin: 10px 0;
    }

    nav a {
        padding: 10px;
        display: block;
        background-color: #005f99;
        border-radius: 5px;
    }

    main {
        padding: 10px;
    }

    footer {
        position: static; /* Mengubah posisi footer di tampilan mobile */
    }
}

/* Gaya untuk gambar */
.content-image {
    max-width: 100%; /* Memastikan gambar tidak melebihi lebar kontainernya */
    height: auto;    /* Menjaga rasio aspek gambar saat ukurannya berubah */
    display: block;  /* Menghilangkan spasi ekstra di bawah gambar */
    margin: 20px auto; /* Memberikan jarak di atas dan bawah, serta membuat gambar di tengah */
    border-radius: 8px; /* Memberikan sudut yang membulat */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Menambahkan efek bayangan */
}

/* Gaya untuk wadah galeri */
.image-gallery {
    display: flex;         /* Mengaktifkan Flexbox */
    justify-content: center; /* Meratakan item di tengah */
    flex-wrap: wrap;       /* Memungkinkan item pindah ke baris baru jika tidak muat */
    gap: 20px;             /* Memberikan jarak antar item */
    margin: 40px auto;     /* Memberikan jarak atas dan bawah */
}

/* Gaya untuk setiap item galeri */
.gallery-item {
    flex: 1 1 300px;
    max-width: 350px;
    
    /* Properti untuk membuat bingkai dan latar belakang transparan */
    background-color: rgba(0, 0, 0, 0.2); /* Latar belakang hitam dengan transparansi 20% */
    border: 1px solid rgba(255, 255, 255, 0.5); /* Garis bingkai putih semi-transparan */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    
    padding: 20px;
    text-align: center;
    color: #fff; /* Mengubah warna teks menjadi putih agar terlihat jelas */
}

.gallery-item h3 {
    color: #fff; /* Pastikan judul di dalam kotak juga berwarna putih */
    margin-top: 15px;
}

/* Mengatur agar gambar tidak terpecah oleh kolom */
.about-content img {
    display: block;          /* Memastikan gambar berada dalam satu blok */
    width: 10%;             /* Mengatur lebar gambar agar pas dengan kolom */
    margin: 20px 0;          /* Memberi jarak atas dan bawah */
}

/* Gaya khusus untuk judul di halaman Tentang Kami */
.about-content h2 {
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    
    /* Properti untuk membuat kotak hitam transparan */
    background-color: rgba(0, 0, 0, 0.5); /* Warna hitam dengan transparansi 50% */
    padding: 10px 20px; /* Jarak di dalam kotak */
    border-radius: 8px; /* Sudut membulat */
    display: inline-block; /* Membuat kotak hanya selebar teks */
}

/* Mengatur kembali tampilan di mobile agar tidak terbagi 2 kolom */
@media (max-width: 768px) {
    .about-content {
        column-count: 1;     /* Kembali ke 1 kolom di layar yang lebih kecil */
    }
}

/* Gaya khusus untuk halaman Beranda */
.hero-content {
    color: #fff; /* Mengubah warna tulisan menjadi putih */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Menambahkan bayangan teks agar lebih jelas */
}
.hero-content h1 {
    font-size: 48px;
}
.hero-content p {
    font-size: 20px;
}

/* Gaya khusus untuk halaman Support */
.support-content {
    color: #fff; /* Mengubah warna tulisan menjadi putih */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Menambahkan bayangan agar lebih jelas */
}
.support-content a {
    color: #fff; /* Pastikan tautan juga berwarna putih */
	font-size: 18px;
}

/* Gaya untuk judul h2 di halaman Support */
.support-content h2 {
	color: #fff; /* Pastikan tautan juga berwarna putih */
    font-size: 48px; /* Mengubah ukuran font menjadi 36 piksel */
    letter-spacing: 2px; /* Memberikan jarak antar huruf */
    border-bottom: 2px solid #fff; /* Menambahkan garis bawah */
    padding-bottom: 10px; /* Memberikan jarak antara teks dan garis bawah */
    margin-bottom: 30px; /* Memberikan jarak bawah dari elemen berikutnya */
}

@keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
}

/* Gaya untuk kotak menu */
.menu-box {
    background-color: rgba(255, 255, 255, 0.2); /* Latar belakang transparan */
    border: 1px solid rgba(255, 255, 255, 0.5); /* Garis tepi putih */
    border-radius: 8px; /* Sudut melengkung */
    padding: 10px 20px; /* Jarak di dalam kotak */
    margin-top: 15px; /* Jarak dari judul di atasnya */
    backdrop-filter: blur(5px); /* Efek blur pada latar belakang */
    display: inline-block; /* Membuat kotak menyesuaikan ukuran konten */
}

/* Gaya untuk setiap kotak menu */
.menu-item {
    display: inline-block; /* Membuat setiap item menjadi kotak terpisah */
    margin: 0 5px; /* Memberikan jarak antar kotak */
    background-color: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    backdrop-filter: blur(5px);
    transition: background-color 0.3s ease; /* Transisi halus saat dihover */
}

/* Gaya untuk tautan di dalam kotak menu */
.menu-item a {
    display: block; /* Membuat tautan memenuhi seluruh area kotak */
    padding: 10px 15px; /* Memberikan jarak di dalam kotak */
    text-decoration: none;
    color: #fff;
    font-weight: bold;
}

/* Efek saat mouse di atas kotak menu */
.menu-item:hover {
    background-color: rgba(255, 255, 255, 0.4);
}

/* Mengubah warna teks saat mouse di atas kotak */
.menu-item:hover a {
    color: #ff5722;
}

/* Mengubah warna tulisan di bagian "Mengapa Memilih Kami?" */
.why-us h2 {
    color: #fff; /* Mengubah warna tulisan menjadi putih */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Menambahkan bayangan untuk visibilitas */
}

/* Mengubah warna tulisan paragraf di bagian "Mengapa Memilih Kami?" */
.why-us p {
    color: #fff; /* Mengubah warna tulisan menjadi putih */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Menambahkan bayangan untuk visibilitas */
}

/* Gaya untuk tombol WhatsApp */
.whatsapp-btn {
    display: inline-block;
    background-color: #25D366; /* Warna hijau khas WhatsApp */
    color: #fff;
    padding: 12px 25px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 50px; /* Membuat sudut sangat melengkung */
    transition: background-color 0.3s ease;
    margin-top: 20px;
}

.whatsapp-btn:hover {
    background-color: #128C7E;
}

/* Container untuk seluruh slider */
.slider-container {
    max-width: 1000px; /* Lebar maksimal slider di layar besar */
    width: 100%; /* Slider akan mengambil 90% dari lebar layar */
    position: relative; /* Penting untuk memposisikan teks di dalamnya */
    margin: 40px auto; /* Memberi jarak atas/bawah dan memposisikan di tengah */
    border-radius: 12px;
    overflow: hidden; /* Penting agar gambar tidak keluar dari container */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* Gaya untuk setiap slide (gambar) */
.mySlides {
    display: none;
    width: 100%;
}

.mySlides img {
    width: 100%; /* Memastikan gambar memenuhi lebar container */
    height: auto; /* Menjaga rasio gambar tetap proporsional */
    vertical-align: middle;
}

/* Gaya untuk kontainer teks slide */
.slide-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0);
    color: #fff;
    padding: 20px;
    border-radius: 8px;
    width: 90%;
    text-align: center;
}

/* Efek transisi saat slide berubah */
.fade {
    animation-name: fade;
    animation-duration: 2s;
}

.text-box-black {
    background-color: rgba(0, 0, 0, 0.5); /* Latar belakang hitam transparan 50% */
    color: #fff; /* Warna tulisan menjadi putih */
    padding: 20px; /* Jarak di dalam kotak */
    border-radius: 10px; /* Sudut melengkung */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Bayangan halus */
    margin-bottom: 20px; /* Jarak antara kotak teks */
    line-height: 1.6; /* Jarak antar baris teks */
    text-align: center; /* Membuat teks rata kiri dan kanan */
}

/* Gaya untuk garis pemisah */
.section-divider {
    border: 0; /* Menghapus border default */
    height: 7px; /* Mengatur ketebalan garis */
    background-color: rgba(255, 255, 255, 1); /* Warna putih semi-transparan */
    margin: 50px auto; /* Memberi jarak di atas dan bawah serta memposisikan di tengah */
    width: 80%; /* Mengatur lebar garis */
}

/* Gaya untuk bagian Galeri Foto */
.photo-gallery-section {
    padding: 50px 20px;
    text-align: center;
	
	/* Tambahkan properti ini untuk mengubah warna tulisan */
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.photo-gallery-section h2 {
    color: #fff; /* Mengubah warna tulisan menjadi putih */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Menambahkan bayangan untuk visibilitas */
}

/* Gaya untuk wadah galeri */
.photo-gallery-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
}

/* Gaya untuk setiap item foto */
.gallery-item-photo {
    flex: 1 1 300px;
    max-width: 350px;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
}

/* Gambar di dalam item */
.gallery-item-photo img {
    width: 100%;
    height: auto;
    display: block;
}

/* Efek saat mouse di atas foto */
.gallery-item-photo:hover {
    transform: scale(1.05);
}