/* Gaya Dasar dan Reset */
/* Mengatur ukuran font dan elemen agar fleksibel */
h1, h2 {
    font-weight: 600;
}

/* Gaya Awal Header (Transparan) */
.main-header {
    background-color: transparent;
    transition: background-color 0.4s ease, box-shadow 0.4s ease;

    /* Properti untuk membuat header tetap di atas saat di-scroll */
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
}

/* Tambahkan gaya baru untuk kontainer di dalam header */
.header-container {
    max-width: 1200px; /* Sesuaikan dengan lebar kontainer utama Anda */
    width: 90%; /* Menggunakan persentase untuk responsif */
    margin: 0 auto; /* Memusatkan kontainer */

    /* Gunakan flexbox di sini untuk menempatkan logo dan nav */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8rem 0; /* Tambahkan padding di sini */
}

/* Gaya Header saat Di-scroll (Berwarna) */
.main-header.scrolled {
    background-color: #fff; /* Warna putih atau warna lain yang Anda inginkan */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Gaya untuk tombol hamburger */
.hamburger-menu {
    display: none; /* Sembunyikan tombol di desktop */
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 25px;
    cursor: pointer;
    z-index: 1000;
}

.hamburger-menu .bar {
    width: 100%;
    height: 3px;
    background-color: #333;
    border-radius: 5px;
    transition: all 0.3s ease-in-out;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 5px; /* Geser logo dan nama perusahaan 50px ke kanan dari tepi */
}

.main-nav {
    margin-right: 5px; /* Geser navigasi 50px ke kiri dari tepi */
}

.container {
    max-width: 1200px; /* Batasi lebar maksimal konten */
    margin: 0 auto;    /* Posisikan wadah di tengah layar */
    padding: 0 25px;   /* Tambahkan sedikit padding di samping untuk layar kecil */
}

.logo {
    display: flex; /* Mengatur elemen di dalamnya (gambar dan h1) berdampingan */
    align-items: center; /* Menyelaraskan secara vertikal agar sejajar */
    gap: 2px; /* Memberi jarak 10px antara logo dan nama perusahaan */
}

.logo img {
    height: 35px; /* Ukuran tinggi logo */
    width: auto;
}

.logo h1 {
    font-size: 1.2rem;
    margin: 0; /* Menghilangkan margin bawaan h1 agar lebih rapi */
}
.logo h1 {
    display: flex;
    justify-content: space-between; /* Membuat ruang di antara logo dan navigasi */
    align-items: center;
    padding: 0.5rem 10%;
    font-size: 1.3rem;
    color: #333;
    
}

.main-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.main-nav ul li a {
    display: flex;
    justify-content: space-between; /* Membuat ruang di antara logo dan navigasi */
    align-items: center;
    padding: 0.2rem 1rem;
    text-decoration: none;
    color: #555;
    transition: color 0.3s ease;
}

.main-nav ul li a:hover {
    color: #007bff; /* Warna biru modern saat dihover */
}

.main-nav .submenu {
    display: none;
    position: absolute;
    background-color: #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    z-index: 1000;
}

.main-nav li:hover .submenu {
    display: block;
}

.main-nav .submenu li a {
    padding: 0.2rem 1.5rem;
    white-space: nowrap; /* Mencegah teks menu terpotong */
}

/* Slider */
.slider-section {
    position: relative;
    display: flex;
    overflow: hidden; /* Penting! Menyembunyikan slide yang tidak terlihat */
    width: 100%;
    margin-bottom: 2rem;
}

.slider-item {
    flex-shrink: 0;
    width: 100%;
    position: relative;
    transition: transform 0.8s ease-in-out; /* Animasi pergerakan */
}

.slider-item img {
    width: 100%;
    height: auto;
    display: block;
}

.slider-item h2, .slider-item p {
    position: absolute;
    bottom: 20px;
    left: 20px;
    color: white;
    background-color: rgba(0, 0, 0, 0.5); /* Latar belakang semi-transparan */
    padding: 10px;
    border-radius: 5px;
}

/* Jika ingin hanya teks yang muncul */
.slider-item h2 {
    bottom: 50px;
}

/* Gaya Layanan (Grid Responsif) */
.services-section {
    padding: 4rem 5%;
    text-align: center;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-top: 1rem;
}

.service-card {
    background-color: #fefefe;
    padding: 1.5rem;
    border: 1px solid #eee;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
}

.service-card .layanan-img {
    max-width: 100%; /* Pastikan gambar tidak melebihi lebar kartu */
    height: 170px; /* Atur tinggi gambar agar seragam */
    object-fit: contain; /* Penting: Sesuaikan gambar agar muat tanpa terpotong atau merenggang */
    margin-bottom: 1rem; /* Jarak antara gambar dan judul */
    display: block; /* Menghilangkan ruang kosong di bawah gambar */
    margin-left: auto; /* Pusatkan gambar */
    margin-right: auto; /* Pusatkan gambar */
}

.service-card h3 {
    font-size: 1rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    color: #333;
}

.service-card p {
    font-size: 1rem;
    color: #666;
}

.service-card:hover {
    transform: translateY(-5px); /* Efek melayang saat kursor diarahkan */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

/* Pastikan kode ini sudah ada di file style.css Anda */
.service-card a {
    text-decoration: none; /* Menghilangkan garis bawah pada tautan */
    color: inherit;        /* Memastikan warna teks tetap sama dengan elemen induknya */
    display: block;        /* Agar seluruh area kartu layanan bisa diklik */
}

/* Konten Utama & Footer */
.main-content {
    padding: 4rem 25%;
}

.main-footer {
    text-align: center;
    padding: 2rem;
    background-color: #212529;
    color: #f8f9fa;
}

/* Untuk perangkat Mobile (lebar layar kurang dari 768px - Tablet dan Ponsel) */
@media (max-width: 768px) {
    .main-header {
        flex-direction: row; /* Kembali ke tata letak baris */
        justify-content: space-between; /* Pisahkan logo dan menu */
        align-items: center;
        padding: 1rem 20px;
    }

    .main-nav {
        display: none; /* Sembunyikan navigasi secara default di mobile */
    }

    .hamburger-menu {
        display: flex; /* Tampilkan tombol hamburger di mobile */
    }

    /* Tampilan menu saat aktif */
    .main-nav.active {
        display: flex; /* Tampilkan menu saat kelas 'active' ditambahkan */
        flex-direction: column;
        position: absolute;
        top: 60px; /* Posisi menu di bawah header */
        right: 0;
        width: 100%;
        background-color: #fff;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    }

    .main-nav.active ul {
        flex-direction: column;
        width: 100%;
        padding: 0;
        margin: 0;
    }

    .main-nav.active ul li {
        width: 100%;
        text-align: center;
        margin: 0;
    }

    .main-nav.active ul li a {
        display: block;
        padding: 15px;
        border-bottom: 1px solid #eee;
    }

    /* Animasi tombol hamburger saat diklik */
    .hamburger-menu.active .bar:nth-child(2) {
        opacity: 0;
    }
    .hamburger-menu.active .bar:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }
    .hamburger-menu.active .bar:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px);
    }
}

    /* Slider Text Positioning */
    .slider-item h2, .slider-item p {
        bottom: 10px; /* Geser teks ke atas sedikit */
        left: 10px;   /* Geser teks ke kanan sedikit */
        right: 10px;  /* Batasi lebar teks dari kanan juga */
        font-size: 1rem; /* Kurangi ukuran font judul slide */
        padding: 5px; /* Kurangi padding teks slide */
    }
    .slider-item h2 {
        bottom: 35px; /* Posisikan judul di atas deskripsi */
        font-size: 1.2rem;
    }

    .service-card {
        padding: 1.5rem; /* Kurangi padding kartu layanan */
    }

    .service-card img {
        height: 100px; /* Sesuaikan tinggi gambar layanan */
    }

    /* Tambahkan ke style.css */
/* Berikan jarak vertikal yang konsisten antar bagian utama */
.slider-section,
.services-section,
.main-content {
    margin-bottom: 50px; /* Atur jarak di sini */
}

/* Tambahkan ke style.css */
.services-section {
    background-color: #f8f9fa; /* Warna abu-abu muda */
    padding: 50px 0;
}

.about-us-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Membagi menjadi dua kolom yang sama */
    gap: 30px; /* Jarak antar kolom */
}

/* Untuk tampilan mobile, kembalikan ke satu kolom */
@media (max-width: 768px) {
       /* Layanan Grid di Mobile: 2 Kolom */
    .services-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 1.5rem;
    margin-top: 2rem;
    }
}

/* Tambahkan ke style.css */
.main-nav a {
    transition: color 0.3s ease; /* Transisi halus saat warna berubah */
}

.main-nav a:hover {
    color: #007bff; /* Warna baru saat di hover */
}

/* Gaya untuk Halaman Profile */
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}

.about-grid img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

.vm-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.vision, .mission {
    padding: 2rem;
    border-radius: 10px;
    background-color: #f8f9fa;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.divider {
    border: 0;
    height: 1px;
    background-color: #ddd;
    margin: 4rem 0;
}

/* Responsif untuk Halaman Profile */
@media (max-width: 768px) {
    .about-grid, .vm-grid {
        grid-template-columns: 1fr;
    }
}
/* Gaya untuk Bagian Klien */
.clients {
    text-align: center;
}

.client-logos {
    /* Hapus display: grid dan properti lainnya */
    padding: 1rem 0;
}

.client-logos img {
    /* Gaya untuk satu gambar memanjang */
    max-width: 80%; /* Atur lebar maksimal agar tidak terlalu besar di desktop */
    height: auto;
    display: block;
    margin: 0 auto; /* Memusatkan gambar */
}

/* Responsif untuk gambar memanjang */
@media (max-width: 768px) {
    .client-logos img {
        max-width: 90%; /* Tingkatkan lebar di tablet */
    }
}

@media (max-width: 480px) {
    .client-logos img {
        max-width: 100%; /* Lebar penuh di mobile */
    }
}

/* Gaya untuk Halaman Profile Saja */
.profile-page {
    background-image: url('assets/image/background-profile.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    color: #333;
    position: relative;
}

/* Pseudo-element untuk overlay transparan, hanya untuk halaman profile */
.profile-page::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.6);
    z-index: -1;
}
/* Jika Anda ingin navigasi sembunyi total di layar mobile yang sangat kecil (<480px) */
/*
@media (max-width: 480px) {
    .main-nav {
        display: none; // Aktifkan ini jika ingin menu hamburger
    }
    .main-header {
        align-items: center; // Pusatkan logo di tengah jika nav disembunyikan
    }
}
*/
/* Tambahan: Untuk font 'Poppins' Anda perlu menambahkan ini di <head> HTML */
/* <link rel="preconnect" href="https://fonts.googleapis.com"> */
/* <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> */
/* <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet"> */