/** Shopify CDN: Minification failed

Line 77:0 Unexpected "}"
Line 680:1 Expected "}" to go with "{"

**/
/*==================================================
KASHIVALA ROTATING PAPAD V2
PART 1 : DESKTOP FOUNDATION
==================================================*/

/*==============================
SECTION
==============================*/

.kp-wheel{
    position:relative;
    overflow:hidden;
    padding:110px 0;
    background:#fff;
}

/*==============================
MAIN WRAPPER
==============================*/

.kp-wheel-wrap{

    position:relative;

    width:680px;
    height:680px;

    margin:0 auto;

}

/*==============================
ROTATING RING
==============================*/

.kp-ring{

    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    border-radius:50%;

}

/*==============================
CENTER HOLDER
==============================*/

.kp-center{

    position:absolute;
    left:50%;
    top:50%;

    transform:translate(-50%,-50%);

    width:240px;
    height:240px;

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

    z-index:5;

}

}

/*==============================
CENTER PNG
==============================*/

.kp-center-image{

    width:380px;
    height:auto;

    display:block;

    object-fit:contain;

    margin:0 auto;

    transition:.45s ease;

    filter:
    drop-shadow(0 18px 35px rgba(0,0,0,.18));

}

/*==============================
CENTER HOVER
==============================*/

.kp-center-image:hover{

    transform:translateY(-8px) scale(1.05);

}

/*==============================
CENTER GLOW
==============================*/

.kp-center::before{

    content:"";

    position:absolute;

    left:50%;
    top:50%;

    transform:translate(-50%,-50%);

    width:380px;
    height:380px;

    border-radius:50%;

    background:

    radial-gradient(circle,

    rgba(255,208,70,.38) 0%,

    rgba(255,208,70,.18) 40%,

    rgba(255,208,70,0) 72%

    );

    filter:blur(30px);

    z-index:-2;

}

/*==============================
CENTER SHADOW
==============================*/

.kp-center::after{

    content:"";

    position:absolute;

    bottom:18px;
    left:50%;

    transform:translateX(-50%);

    width:150px;
    height:24px;

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

    border-radius:50%;

    filter:blur(20px);

    z-index:-1;

}

/*==============================
INGREDIENT CIRCLE
==============================*/

.kp-item{

    position:absolute;

    left:50%;
    top:50%;

    width:138px;
    height:138px;

    margin-left:-69px;
    margin-top:-69px;

    border-radius:50%;

    border:1px solid rgba(255,255,255,.70);

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

    backdrop-filter:blur(12px);

    transition:.35s ease;

}

/*==============================
INGREDIENT IMAGE
==============================*/

.kp-item img{

    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

    padding:8px;

    border-radius:50%;

    background:#fff;

    transition:.35s ease;

    box-shadow:

    0 12px 28px rgba(0,0,0,.16),

    0 0 20px rgba(255,255,255,.30);

}

.kp-item:hover{

    transform-origin:center;

}

.kp-item:hover img{

    transform:scale(1.10);

}

/*==============================
DESKTOP POSITIONS
==============================*/

.kp-item:nth-child(1){
transform:rotate(0deg) translateY(-225px);
}

.kp-item:nth-child(2){
transform:rotate(45deg) translateY(-225px);
}

.kp-item:nth-child(3){
transform:rotate(90deg) translateY(-225px);
}

.kp-item:nth-child(4){
transform:rotate(135deg) translateY(-225px);
}

.kp-item:nth-child(5){
transform:rotate(180deg) translateY(-225px);
}

.kp-item:nth-child(6){
transform:rotate(225deg) translateY(-225px);
}

.kp-item:nth-child(7){
transform:rotate(270deg) translateY(-225px);
}

.kp-item:nth-child(8){
transform:rotate(315deg) translateY(-225px);
}

/*==================================================
KASHIVALA ROTATING PAPAD V2
PART 2 : ANIMATIONS + SPLASH + EFFECTS
==================================================*/


/*=========================================
CENTER FLOATING ANIMATION
=========================================*/

.kp-center-image{

    animation:none !important;

}

@keyframes kpFloat{

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

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

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

}


/*=========================================
SMOOTH HOVER
=========================================*/

.kp-center-image:hover{

    transform:scale(1.03);

}


/*=========================================
BOWL HOVER
=========================================*/

.kp-item{

    transition:
    transform .35s ease,
    box-shadow .35s ease;

}

.kp-item:hover{

    box-shadow:

    0 18px 35px rgba(0,0,0,.15);

}

.kp-item:hover img{

    transform:scale(1.10);

}


/*=========================================
LEFT SPLASH
=========================================*/

.kp-left-splash{

    position:absolute;

    left:-40px;

    top:50%;

    transform:translateY(-50%);

    width:340px;

    z-index:1;

    pointer-events:none;

}

.kp-left-img{

    display:block;

    width:100%;

    height:auto;

    opacity:.95;

}


/*=========================================
RIGHT SPLASH
=========================================*/

.kp-right-splash{

    position:absolute;

    right:-40px;

    top:50%;

    transform:translateY(-50%);

    width:340px;

    z-index:1;

    pointer-events:none;

}

.kp-right-img{

    display:block;

    width:100%;

    height:auto;

    opacity:.95;

}


/*=========================================
CONTENT ABOVE SPLASH
=========================================*/

.kp-wheel .page-width{

    position:relative;

    z-index:5;

}


/*=========================================
HIDE SPLASH ON SMALL DEVICES
=========================================*/

@media(max-width:990px){

.kp-left-splash,
.kp-right-splash{

display:none;

}

}


/*=========================================
OPTIONAL RING SHADOW
=========================================*/

.kp-ring{

    filter:

    drop-shadow(
    0 15px 35px rgba(0,0,0,.06)
    );

}


/*=========================================
SMOOTH GPU RENDER
=========================================*/

.kp-center-image,
.kp-item,
.kp-item img{

    will-change:transform;

    backface-visibility:hidden;

    transform-style:preserve-3d;

}

/*==================================================
KASHIVALA ROTATING PAPAD V2
PART 3 : RESPONSIVE (TABLET + MOBILE)
==================================================*/


/*=========================================
TABLET (991px and below)
=========================================*/

@media screen and (max-width:991px){

.kp-wheel{
    padding:70px 0;
    background:linear-gradient(180deg,#ffffff 0%,#faf7f3 100%);
}

.kp-wheel-wrap{
    width:500px;
    height:500px;
}

.kp-ring{
    width:100%;
    height:100%;
}

.kp-center{
    width:220px;
    height:220px;
}

.kp-center-image{
    width:360px;
    max-width:360px;
    height:auto;
}

.kp-center::before{
    width:300px;
    height:300px;
}

.kp-center::after{
    width:120px;
    height:18px;
}

.kp-item{
    width:95px;
    height:95px;
    margin-left:-47.5px;
    margin-top:-47.5px;
}

.kp-item:nth-child(1){transform:rotate(0deg) translateY(-195px);}
.kp-item:nth-child(2){transform:rotate(45deg) translateY(-195px);}
.kp-item:nth-child(3){transform:rotate(90deg) translateY(-195px);}
.kp-item:nth-child(4){transform:rotate(135deg) translateY(-195px);}
.kp-item:nth-child(5){transform:rotate(180deg) translateY(-195px);}
.kp-item:nth-child(6){transform:rotate(225deg) translateY(-195px);}
.kp-item:nth-child(7){transform:rotate(270deg) translateY(-195px);}
.kp-item:nth-child(8){transform:rotate(315deg) translateY(-195px);}

}


/*=========================================
MOBILE (768px and below)
=========================================*/

@media screen and (max-width:768px){

.kp-wheel{
    padding:35px 0;
    overflow:hidden;
}

.kp-wheel-wrap{
    width:280px;
    height:280px;
    margin:auto;
}

.kp-ring{
    width:100%;
    height:100%;
}

.kp-center{
    width:150px;
    height:150px;
}

.kp-center-image{
    width:190px !important;
    max-width:190px;
    height:auto !important;
    margin-top:0;
}

.kp-center::before{
    width:210px;
    height:210px;
    filter:blur(22px);
}

.kp-center::after{
    width:90px;
    height:14px;
    filter:blur(14px);
}

.kp-item{
    width:62px;
    height:62px;
    margin-left:-31px;
    margin-top:-31px;
}

.kp-item img{
    padding:6px;
}

.kp-item:nth-child(1){transform:rotate(0deg) translateY(-108px);}
.kp-item:nth-child(2){transform:rotate(45deg) translateY(-108px);}
.kp-item:nth-child(3){transform:rotate(90deg) translateY(-108px);}
.kp-item:nth-child(4){transform:rotate(135deg) translateY(-108px);}
.kp-item:nth-child(5){transform:rotate(180deg) translateY(-108px);}
.kp-item:nth-child(6){transform:rotate(225deg) translateY(-108px);}
.kp-item:nth-child(7){transform:rotate(270deg) translateY(-108px);}
.kp-item:nth-child(8){transform:rotate(315deg) translateY(-108px);}

}


/*=========================================
SMALL PHONES (480px and below)
=========================================*/

@media screen and (max-width:480px){

@media screen and (max-width: 768px){

.kp-wheel{
    padding:20px 0 !important;
}

.kp-wheel-wrap{
    width:280px !important;
    height:280px !important;
    margin:0 auto !important;
}

.kp-center{
    width:150px !important;
    height:150px !important;
}

.kp-center-image{
    width:190px !important;
    max-width:190px !important;
    height:auto !important;
    margin:0 auto !important;
}

.kp-item{
    width:60px !important;
    height:60px !important;
    margin-left:-30px !important;
    margin-top:-30px !important;
}

.kp-item img{
    padding:5px !important;
}

.kp-item:nth-child(1){transform:rotate(0deg) translateY(-108px)!important;}
.kp-item:nth-child(2){transform:rotate(45deg) translateY(-108px)!important;}
.kp-item:nth-child(3){transform:rotate(90deg) translateY(-108px)!important;}
.kp-item:nth-child(4){transform:rotate(135deg) translateY(-108px)!important;}
.kp-item:nth-child(5){transform:rotate(180deg) translateY(-108px)!important;}
.kp-item:nth-child(6){transform:rotate(225deg) translateY(-108px)!important;}
.kp-item:nth-child(7){transform:rotate(270deg) translateY(-108px)!important;}
.kp-item:nth-child(8){transform:rotate(315deg) translateY(-108px)!important;}

.kp-center::before{
    width:180px !important;
    height:180px !important;
}

.kp-center::after{
    width:80px !important;
    height:12px !important;
}

}