body {
    cursor: none;
    /* background-color: #FAF8F3; */
    background-image: url(../images/product-bg-img.png);
    object-fit: contain;
    overflow-x: hidden;
}

/* main content css */
.container {
    margin-top: 4rem;
}

.product-content-container {
    z-index: 99;
}

.details-container {
    margin-bottom: 4rem;
    overflow: hidden;
    border-radius: .7rem;
    width: fit-content;
    background-color: hsl(0, 0%, 95%);
    box-shadow: 0px 0px 5px hsl(0, 0%, 30%);
    transition: all .5s ease;
    z-index: 5;
}

.details-container:hover {
    box-shadow: 0px 0px 15px hsl(0, 0%, 30%);
    transform: translateY(-10px) scale(1.02);
}

/* image scaling */
.details-container:hover .product-detail-img{
    transform: scale(1.2);
}

.product-detail-img {
    border-radius: .7rem 0 0 .7rem;
    transition: all .5s ease;
}

.product-detail-content {
    color: hsl(0, 0%, 20%);
}

.buy-btn {
    /* background-color: hsl(122, 59%, 40%); */
    background-color: #2aa22e;
    color: white;
}

.buy-btn:hover {
    /* background-color: mediumseagreen; */
    background-color: hsl(122, 59%, 45%);
    color: white;
}

.buy-btn:active {
    background-color: goldenrod !important;
    color: white !important;
}

@media (max-width: 1325) {
    .pricing-area {
        flex-direction: column !important;
        font-size: 5px !important;
    }

    body {
        overflow-x: hidden;
    }
}

/* for the blurring effect */
.row:has(.details-container:hover) .details-container:not(:hover) {
    /* opacity: .8; */
    filter: blur(1px);
}


/* animation dots */
/* .ani-dots {
    border-radius: 50%;
    position: absolute;
}

.ani-dots1 {
    height: 5rem;
    width: 5rem;
    background-color: #c2f0c3;
    left: 5rem;
    top: 40rem;
    animation: upDown 5s linear infinite;
}

.ani-dots2 {
    height: 8rem;
    width: 8rem;
    background-color: #92e394;
    left: 5rem;
    top: 13rem;
    animation: leftRight 5s linear infinite;
}

.ani-dots3 {
    height: 8rem;
    width: 8rem;
    background-color: #92e394;
    left: 10rem;
    top: 60rem;
    animation: doraDora 5s linear infinite;
}

@keyframes upDown {
    0% {
        transform: translateY(0);
    }

    33% {
        transform: translateY(-20px);
    }

    66% {
        transform: translateY(20px);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes leftRight {
    0% {
        transform: translateX(0)
    }

    33% {
        transform: translateX(-20px);
    }

    66% {
        transform: translateX(20px);
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes doraDora {
    0% {
        transform: translate(-20px, -20px);
    }

    25% {
        transform: translate(20px, -20px);
    }

    50% {
        transform: translateX(20px, 20px);
    }

    75% {
        transform: translate(-20px, 20px);
    }

    100% {
        transform: translate(-20px, -20px);
    }
} */