html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    /* Optional but good practice */
}

html {
    scroll-behavior: smooth;
}

.kopidiam-food-reserve-section {
    margin-bottom: 100px;
}

p.tertiary-b,
p.category {
    text-transform: uppercase;
    font-weight: 700;
    color: var(--tertiary);
}

.title {
    background-image:
        linear-gradient(to top,
            var(--black-50),
            /* Black, 70% opaque at the bottom */
            var(--black-50))
        /* Black, 0% opaque (transparent) at the top */
        ,
        /* 2. List your image URL SECOND */
        url(../images/coffeebean-header.jpg);
}

.dark {
    border-radius: 0px 0px 30px 30px;
}



/**section1*/
div.intro {
    display: flex;
    flex-direction: column;
    gap: 15px;
    text-align: center;
    width: 80%;
    justify-content: center;
    margin: auto;
}

div div.intro h3 {
    margin-bottom: 15px;
}

div.intro-section {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

div.info {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6%;
}

img.decoline {
    height: 300px;
}

img.icon {
    width: 20%;
    margin-bottom: 10px;
}

div.info-card-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background-color: var(--light);
    border: 1px solid var(--grey-dark);
    padding: 30px;
    border-radius: 20px;
    height: 330px;
}

/*section2&3*/
button.b-green {
    display: flex;
    margin: auto;
    margin-top: 41px;
}

img.fnb {
    width: 30%;
    z-index: -1001;
    position: absolute;
}

div.fnb-card {
    transition: transform 0.3s;
}

div.fnb-card:hover {
    transform: scale(1.05);
}

div.coffeenbev-section, div.food-reserve-section {
    overflow-x: clip;
}

/**section2*/
div.coffeenbeverage-section,
div.kopidiam-food-reserve-section {
    display: flex;
    flex-direction: column;
    gap: clamp(50px, 6.9vw, 100px);
}

div.base {
    position: absolute;
    background-color: var(--tertiary);
    width: 7vw;
    height: 7vw;
    border-radius: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

p.price,
p.subtitle {
    color: var(--white);
}

div.fnb-card {
    display: flex;
    flex-direction: row;
    background-color: var(--dark-brown);
    border-radius: 20px;
    padding: 20px;
    position: relative;
    height: 20vw;
}

div.fnb-card h4 {
    display: flex;
    align-items: center;
    z-index: 10;
    position: relative;
    top: 50%;
    left: 10%;
    transform: translateY(-50%);
    z-index: 10;
    width: 50%;
}

img.fnb {
    width: 65%;
    z-index: 1;
}

/*---------------------------*/
/*image*/
/*---------------------------*/
img.first {
    right: 0px;
}

img.second {
    right: 0px;
}

img.third {
    right: -50px;
}

img.img--kopi-diam {
    top: 0px;
    right: -20px;
}

img.img--kopi-bising {
    top: 50px;
    width: 70%;
}

img.img--milo-ahkow {
    top: 0px;
    right: -20px;
}

img.img--three-layer-milk-tea {
    top: -30px;
    right: -20px;
}

img.img--pure-coffee {
    top: 60px;

}

/*---------------------------*/
/*Coffeenbeverage base*/
/*---------------------------*/
/*coffeenbeverage first row*/
div.b-kopidiam,
div.b-kopibising,
div.b-caramellatte {
    position: absolute;
    top: -50px;
}

div.b-kopidiam {
    position: absolute;
    left: 50px;
}

div.b-kopibising {
    position: absolute;
    left: 50px;
}

div.b-caramellatte {
    position: absolute;
    left: 50px;
}

div.b-miloahkow,
div.b-threelayermilktea,
div.b-purecoffee {
    position: absolute;
    top: -50px;

}

div.b-miloahkow {
    position: absolute;
    left: 50px;
}

div.b-threelayermilktea {
    position: absolute;
    left: 50px;
}

div.b-purecoffee {
    position: absolute;
    left: 50px;
}

/*coffeenbeverage first row*/
div.coffeenbeverage,
div.foodpastry {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 63px 33px;
    align-items: center;
}

.fnb-card:first-child {
    grid-column: span 2;
}

.fnb-card:nth-child(2) {
    grid-column: span 2;
}

.fnb-card:nth-child(3) {
    grid-column: span 2;
}

.fnb-card:nth-child(4) {
    grid-column: span 2;
}

.fnb-card:nth-child(5) {
    grid-column: span 2;

}

.fnb-card:last-child {
    grid-column: span 2;
}

/*---------------------------*/
/*Food Pastry base*/
/*---------------------------*/
/*foodpastry*/
div.b-quaso,
div.b-currypuff,
div.b-chickenpie {
    position: absolute;
    top: -50px;

}

div.b-quaso {
    position: absolute;
    left: 50px;
}

div.b-currypuff {
    position: absolute;
    left: 50px;
}

div.b-chickenpie {
    position: absolute;
    left: 50px;
}

img.img--quaso {
    top: -20px;
}

/* ---------------------------------- */
/* Section 4 */
/* ---------------------------------- */
div.kopidiam-reserve-store-section>div.wrapper {
    padding-bottom: 40px;
}

div.kopidiam-reserve-store-section>div.dark {
    border-radius: 30px 30px 0px 0px;
}

/* Container for the overall layout (to center text and gallery) */
.store-gallery-section {
    text-align: center;
    padding: 50px 0;
    overflow: hidden;
    /* Important to keep the side images visible but contained */
    position: relative;
    /* To position the arrows */
}

/* ---------------------------------- */
/* The Gallery and Slides */
/* ---------------------------------- */

.gallery-wrapper {
    overflow: hidden;
    position: relative;
    /* CRITICAL: Set width to 100% and remove max-width/centering. */
    width: 100%;
    /* Use viewport width to span the whole screen */
    margin: 0;
    /* Ensure no margin/padding is inherited from a parent wrapper */

    /* REMOVE: max-width: 1200px; */
    /* REMOVE: margin: 0 auto; */
}

.slides-container {
    display: flex;
    overflow-x: scroll;
    scroll-behavior: smooth;

    /* CRITICAL: Use viewport width units for padding to match the screen edge */
    /* Remove the fixed padding: 0 15%; from the previous version. */
    /* Instead, we set the initial scroll offset using a large negative margin */
    /* Note: If you want the center slide to be the second one, you may need JS
       to set the initial scroll position after the page loads. */

    /* To push the first element off the left edge and center the second element
       We apply padding equal to half the visible slide width to the left.
       (If the slide is 70vw, the visible space is 30vw, so half is 15vw) */
    padding-left: 15vw;
    padding-right: 15vw;
    /* Keep this to ensure proper snapping on the last slide */

    /* Optional: Hide the scrollbar */
    -ms-overflow-style: none;
    scrollbar-width: none;
}


.slide {
    flex: 0 0 70vw;
    height: 100vh;
    /* CRITICAL: Define a height for the slide container. 
    Using 'vh' (viewport height) is common for hero sections. */
    scroll-snap-align: center;
    border-radius: 10px;
    overflow: hidden;
    /* CRITICAL: Ensures the image crops cleanly to the border-radius */
    margin: 0 10px;
}

.slide img {
    display: block;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

/* ---------------------------------- */
/* Navigation Arrows */
/* ---------------------------------- */

.nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 3rem;
    color: white;
    cursor: pointer;
    z-index: 10;
    padding: 20px;
}

.prev-btn {
    left: 10px;
}

.next-btn {
    right: 10px;
}

button.b-brown {
    display: flex;
    margin: auto;
    margin-top: 41px;
    margin-bottom: 120px;
}


@media (max-width: 1024px) {

    /*--------------------*/
    /*Section 1*/
    /*--------------------*/
    div.info-card-content {
        display: flex;
        flex-direction: row;
        height: auto;
        width: 100%;
        text-align: left;
        align-items: center;
        gap: 100px;
        padding: 50px 100px 50px 100px;
    }

    div.info-text {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    div.info-card-content img {
        position: static;
    }

    div.info {
        display: flex;
        flex-direction: column;
        gap: 30px;
    }

    div.info>img.decoline {
        display: none;
    }

    /*--------------------*/
    /*Section 2 & 3*/
    /*--------------------*/

    img.img--kopi-diam {
        top: -20px;
        right: -20px;
    }

    div.base {
        position: static;
        border-radius: 0px;
        height: 60px;
        width: 60px;
        border-radius: 8px;
        padding: 35px;
    }

    div.fnb-card h4 {
        top: 35%;
        text-align: left;
    }

    div.fnb-card {
        display: flex;
        flex-direction: column;
        height: 30vw;
    }

    .fnb-card:first-child {
        grid-column: span 3;
    }

    .fnb-card:nth-child(2) {
        grid-column: span 3;
    }

    .fnb-card:nth-child(3) {
        grid-column: span 3;
    }

    .fnb-card:nth-child(4) {
        grid-column: span 3;
    }

    .fnb-card:nth-child(5) {
        grid-column: span 3;

    }

    .fnb-card:last-child {
        grid-column: span 3;
    }

    .slide {
        height: 70vh;
    }

    img.fnb {
        right: -70px;
    }

}


@media (max-width: 768px) {
    div.wrapper-distance {
        display: flex;
        flex-direction: column;
        gap: 50px;
    }

    /*--------------------*/
    /*Section 1*/
    /*--------------------*/



    div.info-card-content {
        display: flex;
        flex-direction: column;
        height: auto;
        text-align: center;
        gap: 20px;
        padding: 50px;
    }

    div.info-card-content img {
        margin: auto;
    }



    /*--------------------*/
    /*Section 2 & 3*/
    /*--------------------*/
    div.base {
        display: flex;
        flex-direction: row-reverse;
        height: 30px;
        width: 100px;
        gap: 10px;
        padding: 10px;
    }

    div.coffeenbeverage,
    div.foodpastry {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 40px 33px;
    }

    div.fnb-card {
        min-height: 170px;
    }

    img.fnb {
        top: -20px;
        width: 35%;
        z-index: 1;
    }

    img.first {
        right: 0px;
    }

    img.second {
        right: 0px;
    }

    img.third {
        right: 0px;
    }

    /*--------------------*/
    /*Section 4*/
    /*--------------------*/
    .slide {
        height: 50vh;
    }
}