/* Mengatur font Inter untuk seluruh body */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}
body { 
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif; 
    margin: 0; 
    padding: 0; 
    background-color: #f4f7f6; /* Warna latar belakang yang sedikit lebih lembut */
    line-height: 1.6;
    color: #333;
}
.logocompany {
    height: 200px;
    width: auto;
}
/* Header yang lebih menonjol */
header {
    background-color: #f4f7f6; /* Primary Blue from logo */
    color: black;
    padding: 20px 40px; /* Adjusted padding for flex layout */
    display: flex;
    align-items: center; /* Vertically align logo and text */
    /* text-align: center; */ /* Removed */
    position: sticky; /* Make header sticky */
    top: 0; /* Stick to the top */
    z-index: 1000; /* Ensure header is above other content */
    overflow: hidden;
}


/* Hero Section Styles */
#hero {
    background-color: #f4f7f6; /* Primary Blue */
    color: #f4f7f6;
    min-height: 75vh; 
    padding: 0.5% 8% 5% 8%; /* Further reduced top padding to move hero section up more */
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center; 
    text-align: left; 
    position: relative; /* For potential future pseudo-elements if needed */
}

.hero-text {
    width: 55%;
}

.hero-image {
    width: 40%;
}

.hero-image img {
    width: 100%;
    height: auto;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    #hero {
        flex-direction: column;
        align-items: center;
        text-align: center;
        min-height: 65vh;
        padding: 50px 25px;
    }
    .hero-text, .hero-image {
        width: 100%;
    }
    .hero-image {
        margin-top: 30px;
    }
}

/* Removed #hero img styles as the image is being removed */

#hero h1 {
    font-size: 3.5em; 
    margin-bottom: 25px; /* Increased margin */
    font-weight: 700;
    color: #ffffff; 
    line-height: 1.2;
}

#hero p {
    font-size: 1.3em; 
    color: #ffffff; 
    max-width: 600px; /* Limit width for better readability */
    margin-bottom: 35px; /* Increased margin */
    line-height: 1.7;
}

.hero-cta {
    display: inline-block;
    background-color: #E5A624; /* Accent Gold/Orange */
    color: white;
    padding: 15px 35px; /* Generous padding */
    text-decoration: none;
    font-weight: bold;
    border-radius: 8px;
    font-size: 1.15em;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
    cursor: pointer;
}

.hero-cta:hover, .hero-cta:focus {
    background-color: #d49413; /* Darker Gold/Orange */
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}
/* End Hero Section Styles */

/* Gaya umum untuk section */
section { 
    padding: 60px 20px; /* Padding section lebih besar */
    max-width: 1200px; /* Batasi lebar konten */
    margin: 0 auto; /* Pusatkan konten */
}

h2 { 
    color: #1B75BB; /* Primary Blue from logo */
    text-align: center; 
    margin-bottom: 50px; /* Jarak bawah judul lebih besar */
    font-size: 2.5em; /* Ukuran judul section lebih besar */
    font-weight: 600;
    position: relative;
}

h2::after { /* Garis bawah dekoratif untuk judul section */
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background-color: #E5A624; /* Accent Gold from logo */
    margin: 15px auto 0;
    border-radius: 2px;
}

/* Gaya untuk grid produk */
.products { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); /* Always 3 columns on larger screens */
    gap: 30px; /* Jarak antar kartu lebih besar */
    /* justify-content: center; */ /* Not strictly needed with repeat(3, 1fr) */
}

/* Gaya kartu produk yang diperbarui */
.product-item { 
    background: #ffffff; /* Latar belakang putih bersih */
    padding: 25px; /* Padding lebih besar */
    border-radius: 15px; /* Sudut lebih membulat */
    text-align: center; 
    transition: transform 0.4s ease, box-shadow 0.4s ease; /* Transisi lebih halus dan sedikit lebih lama */
    cursor: pointer; 
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); /* Bayangan awal yang lebih jelas */
    display: flex; /* Menggunakan flexbox untuk tata letak internal */
    flex-direction: column;
    justify-content: space-between; /* Memastikan tombol di bawah */
    align-items: center;
}

.product-item:hover { 
    transform: translateY(-12px); /* Sedikit lebih naik saat hover */
    box-shadow: 0 15px 30px rgba(10, 61, 98, 0.3); /* Bayangan lebih dramatis saat hover */
}

.product-item img { 
    border-radius: 10px; /* Sudut gambar lebih halus */
    width: 100%; 
    height: 180px; /* Tinggi gambar lebih besar */
    object-fit: cover; /* Pastikan gambar mengisi area tanpa distorsi */
    margin-bottom: 20px; /* Jarak antara gambar dan teks */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); /* Bayangan halus pada gambar */
}

.product-item p {
    font-weight: 600; /* Nama produk lebih tebal */
    color: #1B75BB; /* Primary Blue from logo */
    font-size: 1.2em; /* Ukuran teks nama produk lebih besar */
    margin-top: 0;
    margin-bottom: 15px; /* Adjusted Jarak */
    cursor: pointer; /* Add cursor pointer as it's clickable */
}

.product-buttons {
    display: flex;
    flex-direction: column; /* Stack buttons */
    gap: 10px; /* Space between buttons */
    margin-top: 15px; 
    width: 100%;
}

.gallery-btn {
    display: block; 
    padding: 12px 22px;
    background: #E5A624; /* Accent Gold */
    color: white;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 500;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 8px rgba(229, 166, 36, 0.25);
    text-align: center;
}
.gallery-btn:hover {
    background-color: #d49413; /* Darker Gold */
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(229, 166, 36, 0.3);
}

/* Footer */
footer { 
    background: #1B75BB; /* Primary Blue from logo */
    color: white; 
    text-align: center; 
    padding: 30px; /* Padding footer lebih besar */
    font-size: 0.9em;
}

/* Modal */
.modal { 
    display: none; 
    position: fixed; 
    z-index: 1000; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background-color: rgba(0,0,0,0.6); /* Latar belakang modal lebih gelap */
    justify-content: center; 
    align-items: center; 
    backdrop-filter: blur(5px); /* Efek blur pada latar belakang */
}

.modal-content { 
    background: white; 
    padding: 35px; /* Padding modal lebih besar */
    border-radius: 12px; 
    text-align: center; 
    width: 90%; 
    max-width: 550px; /* Lebar modal lebih besar */
    animation: fadeInDown 0.5s; 
    position: relative;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

.close { 
    position: absolute; 
    top: 15px; 
    right: 20px; 
    font-size: 35px; /* Ukuran tombol close lebih besar */
    cursor: pointer; 
    color: #555;
    transition: color 0.3s ease;
}

.close:hover {
    color: #1B75BB; /* Primary Blue from logo */
}

.preview-btn { 
    display: block; /* Changed to block for consistency in product-buttons */
    /* margin-top: auto; */ /* Removed as product-buttons handles layout */
    padding: 12px 22px; /* Padding tombol lebih besar */
    background: #1B75BB; /* Primary Blue from logo */
    color: white; 
    border-radius: 8px; /* Sudut tombol lebih membulat */
    text-decoration: none; 
    font-weight: 500;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 8px rgba(27, 117, 187, 0.25); /* Updated shadow for new blue */
}

.preview-btn:hover {
    background-color: #E5A624; /* Accent Gold from logo */
    color: #FFFFFF; /* Ensuring text is readable on gold */
    transform: translateY(-3px); /* Tombol sedikit terangkat saat hover */
    box-shadow: 0 6px 12px rgba(229, 166, 36, 0.3); /* Updated shadow for gold */
}

/* Responsive adjustments */
    @media (max-width: 768px) {
    header {
        padding: 15px 20px; /* Adjusted padding */
        justify-content: center; /* Center logo if it's the only item */
    }
    #hero {
        min-height: 65vh; /* Adjusted height for mobile */
        padding: 50px 25px; /* Adjusted padding for mobile */
        align-items: center; /* Center content on mobile */
        text-align: center; /* Center text on mobile */
    }
    /* #hero img styles removed */
    #hero h1 {
        font-size: 2.6em; /* Adjusted for mobile */
        margin-bottom: 20px;
    }
    #hero p {
        font-size: 1.1em; /* Adjusted for mobile */
        max-width: 90%; /* Allow more width on mobile */
        margin-bottom: 30px;
    }
    .hero-cta {
        padding: 12px 28px;
        font-size: 1.05em;
    }
    section {
        padding: 40px 15px;
    }
    h2 {
        font-size: 2em;
        margin-bottom: 40px;
    }
    .products {
        grid-template-columns: 1fr; /* Satu kolom di layar kecil */
    }
    .product-item {
        padding: 20px;
    }
    .product-item img {
        height: 160px;
    }
    .modal-content {
        padding: 25px;
    }
}

/* Styles for Image Lightbox Modal */
.image-lightbox-modal {
    display: none;
    position: fixed;
    z-index: 1001; /* Higher z-index than productModal */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.85); /* Darker overlay */
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(3px);
}

.image-lightbox-content {
    position: relative;
    padding: 15px; /* Padding around the image */
    background: white; /* Optional: if you want a border/bg for the image container */
    border-radius: 5px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    max-width: 50vw; /* Max width relative to viewport width - Further reduced for small size */
    max-height: 70vh; /* Max height relative to viewport height - Further reduced for small size */
    display: flex; /* To center the image if it's smaller than max dimensions */
    justify-content: center;
    align-items: center;
}

.image-lightbox-content img {
    display: block;
    max-width: 100%; /* Image scales down to fit content box */
    max-height: 100%; /* Image scales down to fit content box */
    object-fit: contain; /* Maintain aspect ratio */
    border-radius: 3px; /* Slight rounding of image corners */
}

.lightbox-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0,0,0,0.5);
    color: white;
    padding: 10px 15px;
    cursor: pointer;
    z-index: 1002; 
    border: none;
    font-size: 28px;
    font-weight: bold;
    border-radius: 5px;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}
.lightbox-arrow:hover {
    opacity: 1;
}
.lightbox-arrow.prev {
    left: 20px;
}
.lightbox-arrow.next {
    right: 20px;
}

#headerLogo {
    max-height: 90px; /* Increased logo size */
    margin-right: 30px; /* Space between logo and text content */
    /* display: block; */ /* Removed */
    /* margin-left: auto; */ /* Removed */
    /* margin-right: auto; */ /* Removed */
    /* margin-bottom: 15px; */ /* Removed */
}

.close-lightbox, .close-pdf {
    position: absolute;
    top: -30px; /* Positioned above the image content box */
    right: -5px;
    color: #fff; /* White color for better visibility on dark overlay */
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s ease;
}

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

/* Logo Fix */
#headerLogo, .logocompany {
    height: 150px;
    width: 140px;
    margin-top:20px;
    object-fit: cover;
    
}