.blobs {
    width: 5px;
    height: 5px;
    position: absolute;
    border-radius: 50%;
    opacity: 0.8;
    animation: move 50s infinite linear;
}
.circle-2 {
    background: #F59F00;
    box-shadow: 0px 0px 1px 0px #ab894a;
}

.circle-1 {
    background: #00A8E7;
    box-shadow: 0px 0px 1px 0px #508fb9;
}
.blob {
    background: #EB6177;
    box-shadow: 0px 0px 1px 0px #a14654;
    z-index: 0;
    position: absolute;
    border-radius: 67% 33% 61% 39% / 47% 30% 70% 53%;
    animation: ripple 15s infinite;
}
.blob-blue {
    background: #fff;
    border: 1px solid #00A8E7;
    z-index: 0;
    position: absolute;
    border-radius: 49% 51% 51% 49% / 36% 69% 31% 64%;
    animation: rotate-ripple 40s infinite;
    animation-timing-function: ease-out;
}
.blob-pink {
    background: #fff;
    border: 1px solid #EB6177;
    border-style: dashed;
    z-index: 0;
    position: absolute;
    border-radius: 47% 53% 53% 47% / 65% 46% 54% 35%;
    animation: rotate-dash 40s infinite;
    animation-timing-function: ease-in-out;
}

.circle {
    z-index: 0;
    position: absolute;
    border-radius: 50%;
    animation: ripple 15s infinite;
}

.xlarge-top {
    width: 400px;
    height: 400px;
    right: -200px;
    top: -200px;
}

.xxlarge-top {
    width: 500px;
    height: 500px;
    right: -250px;
    top: -250px;
}

.xlarge {
    width: 800px;
    height: 800px;
    left: -400px;
    bottom: -400px;
}

.center-middle {
    right: 0%;
    top: 50%;
}
.bottom-start {
    left: 0%;
    bottom: 0%;
}
.xxlarge {
    width: 1000px;
    height: 1000px;
    left: -500px;
    bottom: -500px;
}

.shade1 {
    opacity: 0.2;
}

.shade2 {
    opacity: 0.5;
}

.box-shadow {
    transition: animation 0.8s;
    cursor: pointer;
}
.box-shadow:hover {
    animation: shadow 0.8s;
}
.fade-in,
.fade-in-delayed {
    opacity: 0;
    animation: fadeIn ease-in 1;
    animation-fill-mode: forwards;
    animation-duration: 2s;
}
.fade-in-delayed {
    animation-delay: 0.8s;
}
.move-up,
.move-up-delayed {
    opacity: 0;
    animation: bottom-to-top ease-in 1;
    animation-fill-mode: forwards;
    animation-duration: 1.4s;
}
.move-up-delayed {
    animation-delay: 0.8s;
}
.move-down,
.move-down-delayed {
    opacity: 0;
    animation: top-to-bottom ease-in 1;
    animation-fill-mode: forwards;
    animation-duration: 1.4s;
}
.move-down-delayed {
    animation-delay: 0.8s;
}
.icons-move {
    animation: move-l-r;
    animation-duration: 25s;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
}
.icons-move-rand {
    animation: move-l-d-r-u;
    animation-duration: 25s;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
}
.icons-round {
    animation: move-round;
    animation-duration: 25s;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
}
.blink-anim {
    animation: blink;
    animation-duration: 25s;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
}
.border-rotate {
    animation: rotateBorder 13s linear infinite;
}
.logo-anim {
    offset-path: path(
        "M2 122C2 55.7258 55.7258 2 122 2C188.274 2 242 55.7258 242 122C242 188.274 295.726 242 362 242C428.274 242 482 188.274 482 122"
    );
    offset-distance: 0;
    animation: logo-anim 2000ms infinite alternate;
    animation-duration: 50s;
}
.rotate-anim {
    animation: round-move 3000ms;
}
.rotate-anim-right {
    animation: round-right-to 3000ms;
}
.rotate-anim-left {
    animation: round-left-to 3000ms;
}
/* KeyFrames */
@keyframes logo-anim {
    to {
        offset-distance: 100%;
    }
}
@keyframes blink {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    25% {
        opacity: 1;
        transform: scale(0.9);
    }
    50% {
        opacity: 1;
        transform: scale(0.7);
    }
    75% {
        opacity: 1;
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}
@keyframes move-round {
    from {
        transform: rotate(-360deg);
    }
    to {
        transform: rotate(360deg);
    }
}
@keyframes move-l-d-r-u {
    0% {
        opacity: 1;
        transform: translateX(0px);
    }
    25% {
        opacity: 1;
        transform: XY(20px);
    }
    50% {
        opacity: 1;
        transform: translateX(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}
@keyframes move-l-r {
    0% {
        opacity: 1;
        transform: translateX(0px);
    }
    25% {
        opacity: 1;
        transform: translateY(20px);
    }
    50% {
        opacity: 1;
        transform: translateX(20px);
    }
    75% {
        opacity: 1;
        transform: translateY(0px);
    }
    100% {
        opacity: 1;
        transform: translateX(0px);
    }
}
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes top-to-bottom {
    from {
        opacity: 0;
        transform: translateY(-200px);
    }
    to {
        opacity: 1;
        transform: translateY(0px);
    }
}
@keyframes bottom-to-top {
    from {
        opacity: 0;
        transform: translateY(200px);
    }
    to {
        opacity: 1;
        transform: translateY(0px);
    }
}
@keyframes rotateBorder {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
@keyframes move {
    from {
        transform: translate(0, 0);
    }

    to {
        transform: translate(
            calc(var(--end-x) - var(--start-x)),
            calc(var(--end-y) - var(--start-y))
        );
    }
}
@keyframes shadow {
    0% {
        -webkit-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
        -moz-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
        box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
    }

    100% {
        -webkit-box-shadow: 0px 21px 38px -3px rgba(0, 0, 0, 0.41);
        -moz-box-shadow: 0px 21px 38px -3px rgba(0, 0, 0, 0.41);
        box-shadow: 0px 21px 38px -3px rgba(0, 0, 0, 0.41);
    }
}
@keyframes ripple {
    0% {
        transform: scale(0.8);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(0.8);
    }
}
@keyframes rotate-dash {
    0% {
        transform: scale(0.8) rotate(0deg);
        width: 0vw;
        height: 0vw;
    }

    50% {
        transform: scale(1.2) rotate(360deg);
        width: 50vw;
        height: 50vw;
    }

    100% {
        transform: scale(0.8) rotate(30deg);
        width: 10vw;
        height: 10vw;
    }
}
@keyframes rotate-ripple {
    0% {
        transform: scale(0.8);
        width: 10vw;
        height: 10vw;
    }

    50% {
        transform: scale(1.2);
        width: 50vw;
        height: 50vw;
    }

    100% {
        transform: scale(0.8);
        width: 10vw;
        height: 10vw;
    }
}
@keyframes round-move {
    0% {
        transform: translateX(-240px) rotate(-360deg);
        opacity: 0;
    }
    100% {
        transform: translateX(0px) rotate(0deg);
        opacity: 1;
    }
}
@keyframes round-right-to {
    0% {
        transform: translateX(300px) rotate(360deg);
        opacity: 0;
    }
    100% {
        transform: translateX(0px) rotate(0deg);
        opacity: 1;
    }
}
@keyframes round-left-to {
    0% {
        transform: translateX(-300px) rotate(-360deg);
        opacity: 0;
    }
    100% {
        transform: translateX(0px) rotate(0deg);
        opacity: 1;
    }
}
/* Media Query */
@media only screen and (max-width: 768px) {
    .xlarge {
        width: 400px;
        height: 400px;
        left: -200px;
        bottom: -200px;
    }

    .xxlarge {
        width: 500px;
        height: 500px;
        left: -250px;
        bottom: -250px;
    }
}



/* Hover ANimation On card */
/* hover down/bottom animation */
.hover-bottom-card {
    position: relative;
    cursor: pointer;
    box-shadow: none !important;
    transition: all 0.35s ease;
}
.hover-bottom-card .hover_content {
    overflow: hidden !important;
    max-height: 0;
    transform: translateY(1em);
    transition: all 0.55s ease;
    padding: 0px;
}

.hover-bottom-card:hover {
    box-shadow: 0px 4px 16px 0px #00000029 !important;
}

.hover-bottom-card:hover .hover_content {
    max-height: 10em;
    transform: none;
    padding: 24px 16px;
}