/*
 Theme Name:   Fizzerr
 Description:  Fizzerr Theme
 Author:       Danish
 Template:     astra
 Version:      1.0.0
*/

/* Import the parent theme's styles */
@import url("../astra/style.css");

.floating {
    animation-name: floating;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;

}

.floating.delay-2 {
    animation-delay: 2s;
}

.wpr-cv-container {

    position: unset !important;

}


@keyframes floating {
    0% {
        transform: translate(0)
    }

    65% {
        transform: translateY(15px)
    }

    to {
        transform: translate(0)
    }
}

@keyframes floating-reverse {
    0% {
        transform: translate(0)
    }

    65% {
        transform: translateY(-15px)
    }

    to {
        transform: translate(0)
    }

}

.floating.reverse {
    animation-name: floating-reverse;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out
}

.banner_heading {
    font-size: 60px;
}

.rotating {
    animation-name: rotating;
    animation-duration: 26s;
    animation-iteration-count: infinite;
    animation-timing-function: linear
}

@keyframes rotating {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}




.accent-graphic-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
	overflow: hidden;
}

.accent-graphic-wrapper.shadow:after {
    -moz-border-radius: 30%;
    -o-border-radius: 30%;
    -ms-border-radius: 30%;
    -webkit-border-radius: 30%;
    border-radius: 30%;
    -moz-transform: translate(0, -50%) rotate(4deg);
    -o-transform: translate(0, -50%) rotate(4deg);
    -ms-transform: translate(0, -50%) rotate(4deg);
    -webkit-transform: translate(0, -50%) rotate(4deg);
    transform: translateY(-50%) rotate(4deg);
    opacity: .25;
    filter: blur(3rem);
    content: "";
    position: absolute;
    width: 100%;
    height: 1.875rem;
    bottom: -15%;
    left: 0;
    background-color: var(--color-black);
    z-index: 0
}

.accent-graphic-wrapper .accent-graphic {
    position: absolute;
    z-index: 11;
    display: none
}

.accent-graphic-wrapper .accent-graphic svg {
    width: 100%;
    height: 100%
}

.accent-graphic-wrapper .accent-graphic img {
    width: 100%
}

.accent-graphic-wrapper .accent-graphic.visible__always {
    display: block
}

@media print,
screen and (min-width:64em) {
    .accent-graphic-wrapper .accent-graphic.visible__desktop_only {
        display: block
    }
}

@media print,
screen and (max-width:63.99875em) {
    .accent-graphic-wrapper .accent-graphic.visible__mobile_only {
        display: block
    }
}

.accent-graphic-wrapper .accent-graphic__inner>div img,
.accent-graphic-wrapper .accent-graphic__inner>div svg {
    pointer-events: none
}


.accent-graphic.graphic-0 {
    left: -10%;
    top: 12%;
    width: 80px;
    z-index: 0;
}

@media print,
screen and (min-width: 64em) {
    .accent-graphic.graphic-0 {
        left: 44%;
        top: 25%;
        width: 100px;
    }
}

.accent-graphic.graphic-1 {
    right: 22%;
    top: -8%;
    width: 120px;
    z-index: 0;

}

@media print,
screen and (min-width: 64em) {
    .accent-graphic.graphic-1 {
        right: 22%;
        top: -8%;
        width: 200px;
    }
}

.accent-graphic.graphic-2 {
    left: -2%;
    top: 42%;
    width: 100px;
    z-index: 0;

}

@media print,
screen and (min-width: 64em) {
    .accent-graphic.graphic-2 {
        left: -2%;
        top: 42%;
        width: 100px;
    }
}

.accent-graphic.graphic-3 {
    left: -3%;
    bottom: 12%;
    width: 90px;
    z-index: 0;

}

@media print,
screen and (min-width: 64em) {
    .accent-graphic.graphic-3 {
        left: -3%;
        bottom: 12%;
        width: 110px;
    }
}

.accent-graphic.graphic-4 {
    left: 3%;
    bottom: 2%;
    width: 60px;
    z-index: 0;

}

@media print,
screen and (min-width: 64em) {
    .accent-graphic.graphic-4 {
        left: 26%;
        bottom: 6%;
        width: 75px;
    }
}

.accent-graphic.graphic-5 {
    left: 4%;
    bottom: 46%;
    width: 80px;
    z-index: 0;
    z-index: 2;
}

@media print,
screen and (min-width: 64em) {
    .accent-graphic.graphic-5 {
        left: 52%;
        bottom: 26%;
        width: 100px;
    }
}


.accent-graphic.graphic-6 {
    right: 42%;
    top: 20%;
    width: 55px;
    z-index: 0;
    z-index: 2;
}

@media print,
screen and (min-width: 64em) {
    .accent-graphic.graphic-6 {
        right: 25%;
        top: 25%;
        width: 70px;
    }
}

.accent-graphic.graphic-7 {
    right: 2%;
    top: 14%;
    width: 60px;
    z-index: 0;

}

@media print,
screen and (min-width: 64em) {
    .accent-graphic.graphic-7 {
        right: 2%;
        top: 18%;
        width: 88px;
    }
}

.accent-graphic.graphic-8 {
    right: 2%;
    top: 25%;
    width: 70px;
    z-index: 0;
    z-index: -1;
}

@media print,
screen and (min-width: 64em) {
    .accent-graphic.graphic-8 {
        right: 10%;
        top: 36%;
        width: 120px;
    }
}

.accent-graphic.graphic-9 {
    right: -30%;
    bottom: 44%;
    width: 160px;
    z-index: 0;
    z-index: 2;
}

@media print,
screen and (min-width: 64em) {
    .accent-graphic.graphic-9 {
        right: 2%;
        bottom: 20%;
        width: 270px;
    }
}

.accent-graphic.graphic-10 {
    right: 4%;
    bottom: 15%;
    width: 86px;
    z-index: 0;
    z-index: 4;
}

@media print,
screen and (min-width: 64em) {
    .accent-graphic.graphic-10 {
        right: 4%;
        bottom: 16%;
        width: 110px;
    }
}

/* .row {
    display: flex;
    gap: 20px;

    flex-wrap: wrap;
}

.col-6 {
    width: calc(50% - 10px);
} */



.fizzer-products .product-slide {
    text-align: center;
    padding: 20px 10px;
    border-radius: 30px;
    position: relative;
    z-index: 0;
    margin-bottom: 32px;
    color: #ffffff;
}
.fizzer-products .product-slide .product-image img {
    margin:  0 auto;
}
.fizzer-products .product-slide .productbox {
    padding-top: 70%;
    position: absolute;
    bottom: 10px;
    width: calc(100% - 20px);
    border-radius: 28px;
    background: #ffffff2b;
    z-index: -1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fizzer-products .product-slide .productbox::before{
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    animation: blurCircleAnimation 6s ease-out infinite;
    background-color: #ffffff21;
    border-radius: 50%;
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%);
}

@keyframes blurCircleAnimation {
    0% {
        width: 0;
        height: 0;
        filter: blur(0); /* Start with some blur */
    }
    25% {
        width: 40%;
        height: 40%;
        filter: blur(5px); /* Less blur at mid-size */
    }
    50% {
        width: 80%;
        height: 80%;
        filter: blur(10px); /* No blur at full size */
    }
    75% {
        width: 40%;
        height: 40%;
        filter: blur(5px); /* Less blur at mid-size */
    }
    100% {
        width: 0;
        height: 0;
        filter: blur(0); /* Less blur at mid-size */
    }
}

.fizzer-products.product-slide .product-label {
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    color: #ffffff;
    margin: 0;
    letter-spacing: 1px
}
.fizzer-products .product-slide .product-name{
    font-weight: 600;
    font-size: 20px;
    line-height: 24px;
    color: #ffffff; 
    letter-spacing: 1px;
    margin-bottom: 18px;
}

.eael-contact-form-7 .wpcf7-form p:nth-last-of-type(1) {
    display: block;
}
.swiper-fizzer-product {
	overflow: hidden;
}