/* Klairs-style Project Section */
.project-klairs {
  /* REMOVE the background-color: var(--cultured); */
    /* ADD the following linear-gradient for a white to red gradient */
    background-image: linear-gradient(to right, #ffffff, #f39797); /* White to a light red */
    padding-block: var(--section-padding);
}

.project-klairs-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    max-width: 1000px; /* Reduced max-width for a smaller container, adjust as desired */
    margin-inline: auto; /* Center the container */
}

@media (min-width: 992px) {
    .project-klairs-container {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

.project-klairs-content {
    text-align: justify;
    max-width: 400px;
}

@media (min-width: 992px) {
    .project-klairs-content {
        text-align: left;
    }
}

.project-klairs-content .section-title {
    font-size: 3.5rem; /* Larger title */
    margin-bottom: 15px;
    color: var(--charcoal);
}

.project-klairs-text {
    font-size: 1.8rem;
    color: var(--sonic-silver);
    line-height: 1.6;
    margin-bottom: 30px;
}

.project-klairs-btn {
   --fs: 1.7rem; /* Font size variable from your existing styles */
    --padding-y: 15px; /* Vertical padding variable */
    --padding-x: 30px; /* Horizontal padding variable */

    background-color: transparent; /* No background color initially */
    color: var(--eerie-black); /* Text color set to black */
    border: 1px solid var(--eerie-black); /* 1px solid black border */
    border-radius: 0; /* Ensures sharp, square corners */
    padding: var(--padding-y) var(--padding-x); /* Apply padding using variables */
    text-decoration: none; /* Remove underline from link */
    display: inline-flex; /* Use flexbox to align content (text + arrow) */
    align-items: center; /* Vertically center items in flex container */
    gap: 10px; /* Space between the text and the arrow */
    cursor: pointer; /* Indicate it's clickable */
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; /* Smooth transitions */
    
}

.project-klairs-btn:is(:hover, :focus) {
    background-color: var(--eerie-black); /* Solid black background on hover */
    color: var(--eerie-black); /* White text on hover */
    border-color: var(--eerie-black); /* Maintain black border on hover (or change if desired) */
}

/* Pseudo-element for the right arrow */
.project-klairs-btn::after {
    content: "\2192"; /* Unicode character for a right arrow (→) */
    font-size: 1.8rem; /* Size of the arrow icon */
    transform: translateX(0); /* Initial position of the arrow */
    transition: transform 0.3s ease, color 0.3s ease; /* Smooth transition for arrow movement and color */
}

.project-klairs-btn:is(:hover, :focus)::after {
    transform: translateX(5px); /* Move arrow slightly to the right on hover */
    color: var(--eerie-black); /* Change arrow color to white on hover */
}

.project-slider-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    max-width: 300px; /* Adjust max width of the slider */
    max-height: 300px;
    overflow: hidden;
    
}

.project-slider-list {
    display: flex;
    transition: transform 0.7s ease-in-out;
    list-style: none;
    padding: 0;
    margin: 0;
    /* Important: width: fit-content; is crucial for the flex items to not wrap */
    width: fit-content;
}

.project-slider-item {
    flex-shrink: 0; /* Prevent items from shrinking */
    width: 100%; /* Make each item take full width of the wrapper */
     height: 100%; /* Pastikan item mengambil tinggi penuh dari list */
    display: flex;
    justify-content: center;
     max-height:300px ;
    align-items: center;
    /* White background for product images */
    
}

.project-slider-item img {
   width: 100%; /* Pastikan gambar mengisi lebar item */
    height: 100%; /* Ubah ini menjadi 100% untuk mengisi tinggi item */
    display: block;
    object-fit: contain; /* Tetap 'contain' jika Anda tidak ingin gambar terpotong */
    /* Jika Anda ingin gambar mengisi seluruh area item dan mungkin terpotong, ganti menjadi 'cover' */
    /* object-fit: cover; */
    padding: 20px; /* Padding di dalam slide item, sesuaikan jika perlu */
}

.project-slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.7); /* Semi-transparent white */
    color: var(--eerie-black); /* Darker icon color */
    font-size: 3rem; /* Larger icons */
    padding: 15px;
    border-radius: 50%; /* Circular buttons */
    border: none;
    cursor: pointer;
    z-index: 2;
    box-shadow: var(--shadow-1);
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.project-slider-btn:hover {
    background-color: var(--white);
    transform: translateY(-50%) scale(1.05);
}

.project-slider-btn.prev {
    left: 20px;
}

.project-slider-btn.next {
    right: 20px;
}

.project-slider-pagination {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: rgba(0, 0, 0, 0.5); /* Dark background for pagination */
    color: var(--white);
    padding: 8px 15px;
    border-radius: var(--radius-pill);
    font-size: 1.5rem;
    z-index: 2;
}

.project-slider-pagination .play-pause-btn {
    cursor: pointer;
    font-size: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.project-slider-pagination .play-icon,
.project-slider-pagination .pause-icon {
    display: none; /* Controlled by JS */
}

.project-slider-pagination .play-icon.active,
.project-slider-pagination .pause-icon.active {
    display: block;
}

/* Adjustments for smaller screens to ensure visibility */
@media (max-width: 575px) {
    .project-klairs-content .section-title {
        font-size: 3rem;
    }

    .project-klairs-text {
        font-size: 1.6rem;
    }

    .project-klairs-btn {
        --fs: 1.5rem;
        --padding-y: 12px;
        --padding-x: 25px;
    }

    .project-slider-btn {
        font-size: 2rem;
        padding: 10px;
    }

    .project-slider-btn.prev {
        left: 10px;
    }

    .project-slider-btn.next {
        right: 10px;
    }

    .project-slider-pagination {
        bottom: 10px;
        font-size: 1.3rem;
        padding: 6px 10px;
    }

    .project-slider-pagination .play-pause-btn {
        font-size: 1.8rem;
    }
}

/* Klairs-style Project Section */
.project-klairs {
    background-image: linear-gradient(to top, #f08d8d, #af17174b); /* White to a light red */
    padding-block: var(--section-padding);
    position: relative; /* ADD THIS: Essential for positioning child absolute elements */
    overflow: hidden; /* ADD THIS: To contain any overflow if elements are slightly out */
    width: 100%;
    height: 100%;
}

/* ... (keep existing .project-klairs-container, .project-klairs-content, etc.) ... */

.project-slider-btn {
    position: absolute; /* Keep this */
    top: 50%; /* Keep this */
    transform: translateY(-50%); /* Keep this */
    background-color: rgba(255, 255, 255, 0.7);
    color: var(--eerie-black);
    font-size: 3rem;
    padding: 15px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    z-index: 2;
    box-shadow: var(--shadow-1);
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.project-slider-btn:hover {
    background-color: var(--white);
    transform: translateY(-50%) scale(1.05);
}

.project-slider-btn.prev {
    left: 20px; /* Adjust as needed, e.g., 20px from the left edge of the section */
}

.project-slider-btn.next {
    right: 20px; /* Adjust as needed, e.g., 20px from the right edge of the section */
}

/* Adjustments for smaller screens (if you want them closer to edges on mobile) */
@media (max-width: 575px) {
    .project-slider-btn {
        font-size: 2.5rem; /* Slightly smaller buttons on mobile */
        padding: 12px;
    }
    .project-slider-btn.prev {
        left: 10px; /* Closer to the edge on small screens */
    }
    .project-slider-btn.next {
        right: 10px; /* Closer to the edge on small screens */
    }
    /* ... rest of your existing media queries ... */
}