/* HERO */

.hero-img{ height:420px; object-fit:cover; display:block; border-radius:20px; }

/* PRODUCT */

.product-card{
    border-radius:15px;
    overflow:hidden;
}

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

.product-title{
    font-size:14px;
    font-weight:600;

    min-height:38px;
}

/* STICKY CART */
.sticky-cart{

    position:fixed;

    left:0;
    right:0;
    bottom:0;

    width:100%;

    background: linear-gradient(
        90deg,
        var(--red),
        var(--yellow),
        var(--blue)
    );

    padding:12px 15px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:10px;

    box-shadow:
        0 -5px 20px rgba(0,0,0,.08);

    z-index:999;

    border-top-left-radius:15px;
    border-top-right-radius:15px;
}

/* supaya content tidak ketutup sticky cart */

body{
    padding-bottom:50px;
}

/* MOBILE */

@media(max-width:768px){

    .sticky-cart{

        padding:10px 12px;
        z-index:9999;

    }

    .sticky-cart h6{

        font-size:14px;

        margin:0;
    }

    .sticky-cart small{

        font-size:11px;
    }

    .sticky-cart .btn{

        white-space:nowrap;
    }

}

/* MOBILE */

@media(max-width:768px){

    .hero-img{
        height:200px;
    }

    /* .product-img{
        height:140px;
    } */

}

.hero-slide{
    position:relative;
    overflow:hidden;
}

.hero-caption{
    position:absolute;

    left:30px;
    bottom:30px;

    color:#fff;

    z-index:10;

    max-width:500px;
}

.hero-caption h2{
    font-size:32px;

    font-weight:700;

    margin-bottom:10px;

    text-shadow:0 5px 15px rgba(0,0,0,.3);
}

.hero-caption p{
    font-size:15px;

    margin-bottom:0;

    text-shadow:0 5px 15px rgba(0,0,0,.3);
}

/* overlay gelap */

.hero-slide::before{
    content:"";

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.35);

    z-index:1;
}

/* mobile */

@media(max-width:768px){

    .hero-caption{
        left:20px;
        right:20px;
        bottom:20px;
    }

    .hero-caption h2{
        font-size:20px;
    }

    .hero-caption p{
        font-size:13px;
    }

}

/* SWIPER */

.heroSwiper{
    position:relative;
}

/* DOT */

.swiper-pagination-bullet{
    width:10px;
    height:10px;

    background:#fff;

    opacity:.7;
}

.swiper-pagination-bullet-active{
    opacity:1;
}

/* PROGRESS BAR */

.swiper-progressbar{
    position:absolute;

    left:0;
    bottom:0;

    width:100%;
    height:4px;

    background:rgba(255,255,255,.2);

    z-index:20;

    overflow:hidden;
}

.swiper-progressbar::after{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:100%;
    height:100%;

    background:#FFC107;

    animation:progressbar 3s linear infinite;
}

@keyframes progressbar{

    from{
        transform:translateX(-100%);
    }

    to{
        transform:translateX(0%);
    }

}

/* ======== PESANAN ======== */
.nav-pills .nav-link{

    background:#24f5f5;

    color:#000306;
    border-radius:10px;

    font-weight:600;
    font-size: 11px;
}

.nav-pills .nav-link.active{

    background:#0d6efd;

    color:#fff;
    font-size: 11px;
}