.box-default {
        box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
        transition: all 0.2s ease-in-out;
}

.box-default:hover {
        box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
        transition: all 0.2s ease-in-out;
}

/* ----------------------------------------------
 * Generated by Animista on 2024-9-18 20:48:56
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation tilt-in-fwd-tr
 * ----------------------------------------
 */



.tilt-in-fwd-tr {
        -webkit-animation: tilt-in-fwd-tr 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
        animation: tilt-in-fwd-tr 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes tilt-in-fwd-tr {
        0% {
                -webkit-transform: rotateY(20deg) rotateX(35deg) translate(300px, -300px) skew(-35deg, 10deg);
                transform: rotateY(20deg) rotateX(35deg) translate(300px, -300px) skew(-35deg, 10deg);
                opacity: 0;
        }

        100% {
                -webkit-transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
                transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
                opacity: 1;
        }
}

@keyframes tilt-in-fwd-tr {
        0% {
                -webkit-transform: rotateY(20deg) rotateX(35deg) translate(300px, -300px) skew(-35deg, 10deg);
                transform: rotateY(20deg) rotateX(35deg) translate(300px, -300px) skew(-35deg, 10deg);
                opacity: 0;
        }

        100% {
                -webkit-transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
                transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
                opacity: 1;
        }
}

/* -------------------------------------------------------------------------------------------- */

.tilt-in-fwd-bl {
        -webkit-animation: tilt-in-fwd-bl 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
        animation: tilt-in-fwd-bl 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2024-9-18 20:49:54
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation tilt-in-fwd-bl
 * ----------------------------------------
 */
@-webkit-keyframes tilt-in-fwd-bl {
        0% {
                -webkit-transform: rotateY(-20deg) rotateX(-35deg) translate(-300px, 300px) skew(-35deg, 10deg);
                transform: rotateY(-20deg) rotateX(-35deg) translate(-300px, 300px) skew(-35deg, 10deg);
                opacity: 0;
        }

        100% {
                -webkit-transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
                transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
                opacity: 1;
        }
}

@keyframes tilt-in-fwd-bl {
        0% {
                -webkit-transform: rotateY(-20deg) rotateX(-35deg) translate(-300px, 300px) skew(-35deg, 10deg);
                transform: rotateY(-20deg) rotateX(-35deg) translate(-300px, 300px) skew(-35deg, 10deg);
                opacity: 0;
        }

        100% {
                -webkit-transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
                transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
                opacity: 1;
        }
}

/*------------------------------------------------  */
.slide-in-blurred-bottom {
        -webkit-animation: slide-in-blurred-bottom 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
        animation: slide-in-blurred-bottom 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2024-9-18 20:51:15
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-in-blurred-bottom
 * ----------------------------------------
 */
@-webkit-keyframes slide-in-blurred-bottom {
        0% {
                -webkit-transform: translateY(1000px) scaleY(2.5) scaleX(0.2);
                transform: translateY(1000px) scaleY(2.5) scaleX(0.2);
                -webkit-transform-origin: 50% 100%;
                transform-origin: 50% 100%;
                -webkit-filter: blur(40px);
                filter: blur(40px);
                opacity: 0;
        }

        100% {
                -webkit-transform: translateY(0) scaleY(1) scaleX(1);
                transform: translateY(0) scaleY(1) scaleX(1);
                -webkit-transform-origin: 50% 50%;
                transform-origin: 50% 50%;
                -webkit-filter: blur(0);
                filter: blur(0);
                opacity: 1;
        }
}

@keyframes slide-in-blurred-bottom {
        0% {
                -webkit-transform: translateY(1000px) scaleY(2.5) scaleX(0.2);
                transform: translateY(1000px) scaleY(2.5) scaleX(0.2);
                -webkit-transform-origin: 50% 100%;
                transform-origin: 50% 100%;
                -webkit-filter: blur(40px);
                filter: blur(40px);
                opacity: 0;
        }

        100% {
                -webkit-transform: translateY(0) scaleY(1) scaleX(1);
                transform: translateY(0) scaleY(1) scaleX(1);
                -webkit-transform-origin: 50% 50%;
                transform-origin: 50% 50%;
                -webkit-filter: blur(0);
                filter: blur(0);
                opacity: 1;
        }
}


/* thin to box shodow    */
.thin-box-shedow {
        box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
        transition: all 0.2s ease-in-out;
}

.thin-box-shedow:hover {
        box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
        transition: all 0.2s ease-in-out;
}

/* pop up screnn effect */
.pop-box-shedow {
        box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.15) 0px 50px 100px -20px, rgba(0, 0, 0, 0.2) 0px 30px 60px -30px;
        transition: all 0.2s ease-in;

}

div.pop-box-shedow:hover>img
 {
        box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.6) 0px 30px 60px -30px;

        -webkit-animation: zoom-in-zoom-out 1s ease;
        transition: all 0.2s ease-in;

}

.pop-box-shedow:hover{
        box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.6) 0px 30px 60px -30px;
}

@keyframes zoom-in-zoom-out {

        /* At the beginning of the animation */
        0% {
                /* Scale the element to its original size */
                transform: scale(1, 1);
        }

        /* At the middle of the animation */
        50% {
                /* Scale the element to 1.5 times its original size */
                transform: scale(1.3, 1.3);
        }

        100% {
                /* Scale the element back to its original size */
                transform: scale(1, 1);
        }
}

/* shake effect */
.wobble-hor-bottom {}

/* ----------------------------------------------
 * Generated by Animista on 2024-9-19 9:16:21
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation wobble-hor-bottom
 * ----------------------------------------
 */
@-webkit-keyframes wobble-hor-bottom {

        0%,
        100% {
                -webkit-transform: translateX(0%);
                transform: translateX(0%);
                -webkit-transform-origin: 50% 50%;
                transform-origin: 50% 50%;
        }

        15% {
                -webkit-transform: translateX(-30px) rotate(-6deg);
                transform: translateX(-30px) rotate(-6deg);
        }

        30% {
                -webkit-transform: translateX(15px) rotate(6deg);
                transform: translateX(15px) rotate(6deg);
        }

        45% {
                -webkit-transform: translateX(-15px) rotate(-3.6deg);
                transform: translateX(-15px) rotate(-3.6deg);
        }

        60% {
                -webkit-transform: translateX(9px) rotate(2.4deg);
                transform: translateX(9px) rotate(2.4deg);
        }

        75% {
                -webkit-transform: translateX(-6px) rotate(-1.2deg);
                transform: translateX(-6px) rotate(-1.2deg);
        }
}

@keyframes wobble-hor-bottom {

        0%,
        100% {
                -webkit-transform: translateX(0%);
                transform: translateX(0%);
                -webkit-transform-origin: 50% 50%;
                transform-origin: 50% 50%;
        }

        15% {
                -webkit-transform: translateX(-30px) rotate(-6deg);
                transform: translateX(-30px) rotate(-6deg);
        }

        30% {
                -webkit-transform: translateX(15px) rotate(6deg);
                transform: translateX(15px) rotate(6deg);
        }

        45% {
                -webkit-transform: translateX(-15px) rotate(-3.6deg);
                transform: translateX(-15px) rotate(-3.6deg);
        }

        60% {
                -webkit-transform: translateX(9px) rotate(2.4deg);
                transform: translateX(9px) rotate(2.4deg);
        }

        75% {
                -webkit-transform: translateX(-6px) rotate(-1.2deg);
                transform: translateX(-6px) rotate(-1.2deg);
        }
}