@keyframes pulse-dot {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: .3;
    }
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0px) rotate(-8deg);
    }

    50% {
        transform: translateY(-10px) rotate(-8deg);
    }
}

.pulse-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
    animation: pulse-dot 1.5s infinite;
}

.bottle {
    animation: float 3s ease-in-out infinite;
    transform-origin: center bottom;
}

.seg-val {
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.seg-lbl {
    font-size: 15px;
    font-weight: 500;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, .7);
    text-transform: uppercase;
    margin-top: 2px;
}

.colon {
    font-size: 28px;
    font-weight: 700;
    color: rgba(255, 255, 255, .5);
    padding: 0 2px;
    margin-bottom: 14px;
}

.equal-height {
    align-items: stretch;
}

.equal-height>div {
    display: flex;
}

.equal-height>div>.card-box {
    width: 100%;
    height: 100%;
}

.equal-height>div>.card-box.timer {
    background: var(--primary);
    border-radius: var(--border-radius-lg);
    padding: 14px 20px 18px;
}

@media(max-width:768px) {
    .countdown-box {
        flex-direction: column;
        gap: 10px !important;
    }

    .countdown-timer {
        justify-content: center;
        flex-wrap: wrap;
    }
}
.img-product{
    max-width: 220px;
    height:auto;
    object-fit:contain;
}
.card-box{
    transition: transform .25s ease, box-shadow .25s ease;
}

.card-box:hover{
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0,0,0,.08);
}
.bottle img{
    filter: contrast(1.1) brightness(1.05);
}