.coffee-product-section.benefits-bg {
    background: url(../images/products/green-tea/benefits-bg.webp) no-repeat center center / cover;
    color: #fff;
    text-align: center;
    position: relative;
    z-index: 9;
}
.coffee-product-section.benefits-bg:before {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    top: 0;
    left: 0;
}
.coffee-product-section.formulation-bg {
    background: url(../images/products/blending-tea/formulation-bg.webp) no-repeat center center / cover;
    color: #fff;
    text-align: center;
    position: relative;
    z-index: 9;
}
.coffee-product-section.formulation-bg:before {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    top: 0;
    left: 0;
}
.coffee-product-section.video-wrapper {
    position: relative;
    color: #fff;
}

/* Video container */
.video-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 56.25vw; /* 16:9 ratio */
    min-height: 100vh;
    min-width: 177.77vh;
    transform: translate(-50%, -50%);
    z-index: 0;
    pointer-events: none;
}
/*.video-bg iframe {*/
/*    width: 100%;*/
/*    height: 100%;*/
/*}*/
/*.video-bg {*/
/*    position: relative;*/
/*    width: 100%;*/
/*    height: 100%;*/
/*}*/

.video-bg iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;   /* important */
    pointer-events: none; /* prevents user interaction */
}

/* Dark overlay */
.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.35);
    z-index: 1;
}

/* Content above video */
.coffee-product-section .container {
    position: relative;
    z-index: 2;
}

/* Optional: make cards slightly transparent */
/*.coffee-card {*/
/*    background: rgba(255,255,255,0.08);*/
/*    backdrop-filter: blur(6px);*/
/*    border-radius: 8px;*/
/*}*/



.circle-video2 {
    width: 600px;
    height: 600px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
}

.circle-video2 iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 177.77%; /* keep 16:9 ratio */
    height: 100%;
    transform: translate(-50%, -50%);
    pointer-events: none; /* prevents clicks */
}

.square-box {
    width: 100%;
    aspect-ratio: 1 / 1;
      max-width: 600px;
    margin: 0 auto;
    border-radius:50%;
    overflow: hidden;
}

.square-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-circle {
    width: 600px !important;
    height: 600px !important;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    background: #efefef;
    border: 15px solid #efefef;
}

.video-circle iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 177.77%; /* for vertical (shorts) */
    transform: translate(-50%, -50%);
    pointer-events: none;
}
@media screen and (max-width: 767px) {
    .blending-ul {
        column-count: 1 !important;
    }
}