/* Animations */

@keyframes FadeIn {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes FadeOut {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

@keyframes bgMoveCenterToRight {
    from {
        transform: scale(1.2);
        opacity: 0;
        background-position: center;
    }

    to {
        transform: scale(1);
        opacity: 1;
        background-position: right;
    }
}

@keyframes slideUp {
    from {
        transform: translateY(30px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slide-in-left {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slide-in-right {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slide-in-top {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slide-in-bottom {
    from {
        transform: translateY(100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes zoomMove {
    from {
        transform: scale(1) translateX(0);
    }

    to {
        transform: scale(1.05) translateX(15px);
    }
}

@keyframes zoomMoveHover {
    from {
        transform: scale(1.05) translateX(15px);
    }

    to {
        transform: scale(1.05) translateX(0);
    }
}

@keyframes scaleDown {
    from {
        transform: scale(1.5);
        opacity: 0.3;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}


/*  Animated pages CSS */

@keyframes zoomInUpAnimation {
    0% {
        transform: translate3d(0, 100px, 0) scale(.6);
        opacity: 0;
    }

    100% {
        transform: translateZ(0) scale(1);
        opacity: 1;
    }
}

@keyframes fadeUpEffect {
    0% {
        transform: translate3d(0, 100px, 0);
        opacity: 0;
    }

    100% {
        transform: translateZ(0);
        opacity: 1;
    }
}

@keyframes fadeDownEffect {
    0% {
        transform: translate3d(0, -100px, 0);
        opacity: 0;
    }

    100% {
        transform: translateZ(0);
        opacity: 1;
    }
}

@keyframes zoomInScaleAnimation {
    0% {
        transform: scale(.6);
        opacity: 0;
    }

    100% {
        transform: translateZ(0) scale(1);
        opacity: 1;
    }
}

@keyframes bounceInUp {

    0%,
    60%,
    75%,
    90%,
    to {
        animation-timing-function: cubic-bezier(.215, .61, .355, 1);
    }

    0% {
        opacity: 0;
        transform: translate3d(0, 3000px, 0);
    }

    60% {
        opacity: 1;
        transform: translate3d(0, -20px, 0);
    }

    75% {
        transform: translate3d(0, 10px, 0);
    }

    90% {
        transform: translate3d(0, -5px, 0);
    }

    to {
        transform: translateZ(0);
        opacity: 1;
    }
}

@keyframes zoomIn {
    from {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

@keyframes bounceInDown {

    0%,
    60%,
    75%,
    90%,
    100% {
        animation-timing-function: cubic-bezier(.215, .61, .355, 1);
    }

    0% {
        opacity: 0;
        transform: translate3d(0, -3000px, 0);
    }

    60% {
        opacity: 1;
        transform: translate3d(0, 25px, 0);
    }

    75% {
        transform: translate3d(0, -10px, 0);
    }

    90% {
        transform: translate3d(0, 5px, 0);
    }

    100% {
        transform: none;
        opacity: 1;
    }
}

@keyframes bounceInLeft {

    0%,
    60%,
    75%,
    90%,
    100% {
        animation-timing-function: cubic-bezier(.215, .61, .355, 1);
    }

    0% {
        opacity: 0;
        transform: translate3d(-3000px, 0, 0);
    }

    60% {
        opacity: 1;
        transform: translate3d(25px, 0, 0);
    }

    75% {
        transform: translate3d(-10px, 0, 0);
    }

    90% {
        transform: translate3d(5px, 0, 0);
    }

    100% {
        transform: none;
        opacity: 1;
    }
}

@keyframes pulse-border {
    0% {
        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
        opacity: 1;
    }

    100% {
        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
        opacity: 0;
    }
}

/* Additional CSS */

.sticky-top a.active {
    border: 1px solid;
    border-radius: 5px;
}

@keyframes slideInFromRightBottomCorner {
    from {
        transform: translate(100px, 100px);
        opacity: 0;
    }

    to {
        transform: translate(0, 0);
        opacity: 1;
    }
}

@keyframes slideInFromTopLeftCorner {
    from {
        transform: translate(-100px, -100px);
        opacity: 0;
    }

    to {
        transform: translate(0, 0);
        opacity: 1;
    }
}

@keyframes slideInFromTopRightCorner {
    from {
        transform: translate(100px, -100px);
        opacity: 0;
    }

    to {
        transform: translate(0, 0);
        opacity: 1;
    }
}

@keyframes slideInFromleftBottomCorner {
    from {
        transform: translate(-100px, 100px);
        opacity: 0;
    }

    to {
        transform: translate(0, 0);
        opacity: 1;
    }
}

@keyframes fadeInLetter {
    to {
        opacity: 1;
    }
}

@keyframes moveRightToLeftSlowPauseFast {
    0% {
        opacity: 0;
        transform: translateX(100px);
        animation-timing-function: ease-in;
    }

    50% {
        transform: translateX(75px);
        animation-timing-function: linear;
    }

    75% {
        transform: translateX(50px);
        animation-timing-function: ease-out;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes moveLeftToRightSlowPauseFast {
    0% {
        opacity: 0;
        transform: translateX(-100px);
        animation-timing-function: ease-in;
    }

    50% {
        transform: translateX(-75px);
        animation-timing-function: linear;
    }

    75% {
        transform: translateX(-50px);
        animation-timing-function: ease-out;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes rotateToNormalAnimation {
    to {
        transform: translate(0px);
    }
}

@keyframes slidePushToTop {
    from {
        opacity: 0;
    }

    to {
        transform: translate3d(0px, 0px, 0px);
        opacity: 1;
    }
}

@keyframes slideInFromRightBottomCorner {
    from {
        transform: translate(100px, 100px);
        opacity: 0;
    }

    to {
        transform: translate(0, 0);
        opacity: 1;
    }
}

@keyframes slideInFromTopLeftCorner {
    from {
        transform: translate(-100px, -100px);
        opacity: 0;
    }

    to {
        transform: translate(0, 0);
        opacity: 1;
    }
}

@keyframes slideInFromTopRightCorner {
    from {
        transform: translate(100px, -100px);
        opacity: 0;
    }

    to {
        transform: translate(0, 0);
        opacity: 1;
    }
}

@keyframes slideInFromleftBottomCorner {
    from {
        transform: translate(-100px, 100px);
        opacity: 0;
    }

    to {
        transform: translate(0, 0);
        opacity: 1;
    }
}

@keyframes fadeInLetter {
    to {
        opacity: 1;
    }
}

@keyframes moveRightToLeftSlowPauseFast {
    0% {
        opacity: 0;
        transform: translateX(100px);
        animation-timing-function: ease-in;
    }

    50% {
        transform: translateX(75px);
        animation-timing-function: linear;
    }

    75% {
        transform: translateX(50px);
        animation-timing-function: ease-out;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes moveLeftToRightSlowPauseFast {
    0% {
        opacity: 0;
        transform: translateX(-100px);
        animation-timing-function: ease-in;
    }

    50% {
        transform: translateX(-75px);
        animation-timing-function: linear;
    }

    75% {
        transform: translateX(-50px);
        animation-timing-function: ease-out;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes rotateToNormalAnimation {
    to {
        transform: translate(0px);
    }
}

@keyframes slidePushToTop {
    from {
        opacity: 0;
    }

    to {
        transform: translate3d(0px, 0px, 0px);
        opacity: 1;
    }
}

body .zoom-out-animation.effect-on {
    animation-duration: 0.8s;
    animation-timing-function: ease-out;
    animation-delay: 0.3s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
    animation-play-state: running;
    animation-name: zoomOutEffect;
    animation-timeline: auto;
    animation-range-start: normal;
    animation-range-end: normal;
    transition-duration: 0.8s;
}

body .fade-up-animation.effect-on {
    opacity: 0;
    animation-delay: 0.1s;
    animation-name: fadeUpEffect;
    transition-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
    animation-fill-mode: forwards;
    animation-duration: 0.8s !important;
}

body .fade-down-animation.effect-on {
    opacity: 0;
    animation-timing-function: ease;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
    animation-play-state: running;
    animation-name: fadeDownEffect;
    animation-timeline: auto;
    animation-range-start: normal;
    animation-range-end: normal;
    transition-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
    animation-duration: 1.5s !important;
}

body .zoom-in-animation.effect-on {
    animation-duration: 0.8s;
    animation-timing-function: ease;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
    animation-play-state: running;
    animation-name: zoomInAnimation;
    animation-timeline: auto;
    animation-range-start: normal;
    animation-range-end: normal;
}

.bounceInUp-animation.effect-on.animation-delay-0-3s {
    animation-delay: 0.3s;
}

.bounceInUp-animation.effect-on.animation-delay-0-1s {
    animation-delay: 0.1s;
}

body .zoomIn-animation.effect-on {
    animation-delay: 0.1s;
    animation-name: zoomIn;
    animation-duration: 0.8s !important;
}

body .zoomInUpAnimation.effect-on {
    animation-duration: 0.8s;
    animation-timing-function: ease-out;
    animation-delay: 0.3s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
    animation-play-state: running;
    animation-name: zoomInUpAnimation;
    animation-timeline: auto;
    animation-range-start: normal;
    animation-range-end: normal;
    transition-duration: 0.8s;
    opacity: 0;
}

body .fadeUpAnimation.effect-on {
    opacity: 0;
    animation-delay: 0.1s;
    animation-name: fadeUpEffect;
    transition-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
    animation-fill-mode: forwards;
    animation-duration: 0.8s !important;
}

body .fadeDownAnimation.effect-on {
    opacity: 0;
    animation-timing-function: ease;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
    animation-play-state: running;
    animation-name: fadeDownEffect;
    animation-timeline: auto;
    animation-range-start: normal;
    animation-range-end: normal;
    transition-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
    animation-duration: 1.5s !important;
}

body .zoomInScaleAnimation.effect-on {
    animation-duration: 0.8s;
    animation-timing-function: ease;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
    animation-play-state: running;
    animation-name: zoomInScaleAnimation;
    animation-timeline: auto;
    animation-range-start: normal;
    animation-range-end: normal;
    opacity: 0;
}

.bounceInUpAnimation.effect-on {
    animation-name: bounceInUp;
    opacity: 0;
    animation-fill-mode: forwards;
    animation-duration: 2s !important;
}

.animation-delay-0-3s.effect-on {
    animation-delay: 0.3s;
}

.animation-delay-0-1s.effect-on {
    animation-delay: 0.1s;
}

body .zoomInAnimation.effect-on {
    animation-delay: 0.1s;
    animation-name: zoomIn;
    opacity: 0;
    animation-fill-mode: forwards;
    animation-duration: 0.8s !important;
}

body .bounceInDown.effect-on {
    opacity: 0;
    animation-name: bounceInDown;
    animation-fill-mode: forwards;
    animation-duration: 2s !important;
}

body .bounceInLeft.effect-on {
    opacity: 0;
    animation-name: bounceInLeft;
    animation-fill-mode: forwards;
    animation-duration: 2s !important;
}

.slideInFromRightBottomCorner.effect-on {
    opacity: 0;
    animation-name: slideInFromRightBottomCorner;
    animation-delay: 0s;
    animation-duration: 5s;
    animation-fill-mode: forwards;
    overflow-x: hidden;
    overflow-y: hidden;
}

.slideInFromTopLeftCorner.effect-on {
    opacity: 0;
    animation-name: slideInFromTopLeftCorner;
    animation-delay: 0s;
    animation-duration: 5s;
    animation-fill-mode: forwards;
    overflow-x: hidden;
    overflow-y: hidden;
}

.slideInFromTopRightCorner.effect-on {
    opacity: 0;
    animation-name: slideInFromTopRightCorner;
    animation-delay: 0s;
    animation-duration: 5s;
    animation-fill-mode: forwards;
    overflow-x: hidden;
    overflow-y: hidden;
}

.slideInFromleftBottomCorner.effect-on {
    opacity: 0;
    animation-name: slideInFromleftBottomCorner;
    animation-delay: 0s;
    animation-duration: 5s;
    animation-fill-mode: forwards;
    overflow-x: hidden;
    overflow-y: hidden;
}

.letterFadeInLeft.effect-on {
    opacity: 0;
    animation-duration: 0.5s;
    animation-timing-function: ease;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
    animation-play-state: running;
    animation-name: fadeInLetter;
    animation-timeline: auto;
    animation-range-start: normal;
    animation-range-end: normal;
    animation-delay: calc(var(--index) * 50ms);
}

.moveRightToLeftSlowPauseFast.effect-on {
    animation-name: moveRightToLeftSlowPauseFast;
    animation-delay: 0.5s;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    opacity: 0;
}

.moveLeftToRightSlowPauseFast.effect-on {
    animation-name: moveLeftToRightSlowPauseFast;
    animation-delay: 0.5s;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
}

body .slideUpAnimation.effect-on {
    opacity: 0;
    animation-duration: 0.8s;
    animation-timing-function: ease-out;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
    animation-play-state: running;
    animation-name: slideUp;
    animation-timeline: auto;
    animation-range-start: normal;
    animation-range-end: normal;
}

.animation-delay-0-5s.effect-on {
    animation-delay: 0.5s;
}

.animation-delay-0-7s.effect-on {
    animation-delay: 0.7s;
}

.animation-delay-0-9s.effect-on {
    animation-delay: 0.9s;
}

.animation-delay-1-1s.effect-on {
    animation-delay: 1.1s;
}

.animation-delay-1-3s.effect-on {
    animation-delay: 1.3s;
}

.animation-delay-1-5s.effect-on {
    animation-delay: 1.5s;
}

.bgMoveCenterToRightAnimation.effect-on {
    opacity: 0;
    animation-duration: 1.8s;
    animation-timing-function: ease-out;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
    animation-play-state: running;
    animation-name: bgMoveCenterToRight;
    background-size: contain;
    z-index: -1;
    background-repeat: no-repeat;
    opacity: 0;
    transform: scale(1.2);
    background-image: url("https://aiwebdesk.com/aimeos/1.d/cms/1/f/1ff253cf_0810fd66_bg-pattern1.webp");
}

.slideLeftAnimation.effect-on {
    animation-name: slide-in-left;
    animation-delay: 0s;
    opacity: 0;
    animation-fill-mode: forwards;
    animation-duration: 2s !important;
}

.slideRightAnimation.effect-on {
    animation-name: slide-in-right;
    animation-delay: 0s;
    opacity: 0;
    animation-fill-mode: forwards;
    animation-duration: 2s !important;
}

.slideTopAnimation.effect-on {
    animation-name: slide-in-top;
    animation-delay: 0s;
    opacity: 0;
    animation-fill-mode: forwards;
    animation-duration: 2s !important;
}

.slideBottomAnimation.effect-on {
    animation-name: slide-in-bottom;
    animation-delay: 0s;
    opacity: 0;
    animation-fill-mode: forwards;
    animation-duration: 2s !important;
}

.zoomOutToInAnimation.effect-on {
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-delay: 0.4s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
    animation-play-state: running;
    animation-name: scaleDown;
    animation-timeline: auto;
    animation-range-start: normal;
    animation-range-end: normal;
    opacity: 0;
}

body .rotateToNormalAnimation.effect-on {
    animation-name: rotateToNormalAnimation;
    animation-duration: 2.5s;
    animation-delay: 0.1s;
    animation-fill-mode: forwards;
    overflow-x: hidden;
    overflow-y: hidden;
}

/* Cube sliders small full */


.cube-slider-full-width-parent {
    margin: 0;
    background: #222;
}

.cube-slider-full-width-parent .slider-gallery {
    width: 100%;
    height: 100%;

    transform-style: preserve-3d;
    animation: rotatefullwidthCube 60s infinite cubic-bezier(.5, -0.5, .5, 1.5);
}

.cube-slider-full-width-parent .slide {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    backface-visibility: hidden;
    overflow: hidden;
}

.cube-slider-full-width-parent .slide img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    display: block;
}

.cube-slider-full-width-parent .caption-full-width-slider {
    position: absolute;
    left: 20%;
    bottom: 5%;
    color: white;
    font-size: 1.5rem;
    font-weight: bold;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7);
    background: rgba(0, 0, 0, 0.5);
    padding: 6px 12px;
    border-radius: 4px;
    pointer-events: none;
    white-space: nowrap;
}

.cube-slider-full-width-parent .front {
    transform: rotateY(0deg) translateZ(50vw);
}

.cube-slider-full-width-parent .back {
    transform: rotateY(180deg) translateZ(50vw);
}

.cube-slider-full-width-parent .right {
    transform: rotateY(90deg) translateZ(50vw);
}

.cube-slider-full-width-parent .left {
    transform: rotateY(-90deg) translateZ(50vw);
}

.cube-slider-full-width-parent .top {
    transform: rotateX(90deg) translateZ(0vw);
}

.cube-slider-full-width-parent .bottom {
    transform: rotateX(-90deg) translateZ(200px);
}

@keyframes rotatefullwidthCube {

    0%,
    3% {
        transform: rotate3d(0, 0, 0, 0deg);
    }

    14%,
    19% {
        transform: rotateY(180deg);
    }

    31%,
    36% {
        transform: rotateY(90deg);
    }

    47%,
    52% {
        transform: rotateX(90deg);
    }

    64%,
    69% {
        transform: rotateX(-90deg);
    }

    81%,
    86% {
        transform: rotateY(-90deg);
    }

    97%,
    100% {
        transform: rotate3d(0, 0, 0, 0deg);
    }
}



/* small cube RULES */

.gallery-cube-box {
    --s: 370px;
    display: grid;
    transform-style: preserve-3d;
    --_p: perspective(calc(2.5*var(--s)));
    animation: rotationcube 32s infinite cubic-bezier(.5, -0.5, .5, 1.5);
}

.gallery-cube-box>div {
    grid-area: 1/1;
    width: var(--s);
    aspect-ratio: 1;
    transform: var(--_t) translateZ(calc(var(--s)/2));
}

.gallery-cube-box>div img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* rotations */
.gallery-cube-box>div:nth-child(2) {
    --_t: rotateX(-90deg)
}

.gallery-cube-box>div:nth-child(3) {
    --_t: rotateY(90deg)
}

.gallery-cube-box>div:nth-child(4) {
    --_t: rotateX(180deg) rotate(90deg)
}

.gallery-cube-box>div:nth-child(5) {
    --_t: rotateX(90deg)
}

.gallery-cube-box>div:nth-child(6) {
    --_t: rotateY(-90deg)
}

@keyframes rotationcube {

    0%,
    3% {
        transform: var(--_p) rotate3d(0, 0, 0, 0deg)
    }

    14%,
    19% {
        transform: var(--_p) rotate3d(-1, 1, 0, 180deg)
    }

    31%,
    36% {
        transform: var(--_p) rotate3d(0, -1, 0, 90deg)
    }

    47%,
    52% {
        transform: var(--_p) rotate3d(1, 0, 0, 90deg)
    }

    64%,
    69% {
        transform: var(--_p) rotate3d(1, 0, 0, -90deg)
    }

    81%,
    86% {
        transform: var(--_p) rotate3d(0, 1, 0, 90deg)
    }

    97%,
    100% {
        transform: var(--_p) rotate3d(0, 0, 0, 0deg)
    }
}

.caption-cube-box {
    position: absolute;
    left: 20%;
    bottom: 5%;
    color: white;
    font-size: 1.5rem;
    font-weight: bold;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7);
    background: rgba(0, 0, 0, 0.5);
    padding: 6px 12px;
    border-radius: 4px;
    pointer-events: none;
    white-space: nowrap;
}

.gallery-cube-wrapper {
    margin: 0;
    min-height: 100vh;
    display: grid;
    place-content: center;
    background: #556270;
    animation: wrap-bg-color-change 18s infinite;
}

@keyframes wrap-bg-color-change {

    0%,
    3% {
        background: #774F38
    }

    14%,
    19% {
        background: #C5E0DC
    }

    31%,
    36% {
        background: #036564
    }

    45%,
    55% {
        background: #B38184
    }

    64%,
    69% {
        background: #424254
    }

    81%,
    86% {
        background: #4DBCE9
    }

    97%,
    to {
        background: #774F38
    }
}

/* Cube sliders small full */




/* Circilar blocks animation */

.cirle-sld-inx--1 {
    --i: 1;
}

.cirle-sld-inx--2 {
    --i: 2;
}

.cirle-sld-inx--3 {
    --i: 3;
}

.cirle-sld-inx--4 {
    --i: 4;
}

.circle-4-img-slider .box .imgBx .overlay-text h2 {
    font-size: 12px;
}

.circle-4-img-slider .box .imgBx .overlay-text {
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    transform: rotate(calc(-360deg/4 * var(--i)));
    animation: animateRotate0To-360 30s linear infinite;
}

.circle-4-img-slider {
    min-height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #071952;
    overflow: hidden;
}

.circle-4-img-slider .box {
    position: relative;
    width: 300px;
    height: 300px;
    animation: animateRotate0To360 30s linear infinite;
}

@keyframes animateRotate0To360 {
    0% {
        rotate: 0deg;
    }

    100% {
        rotate: 360deg;
    }
}

.circle-4-img-slider .box .img {
    position: relative;
    left: -50%;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.circle-4-img-slider .box .img .imgBx {
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    box-shadow: 0 0 0 3px #ffffff;
    transform: rotate(calc(360deg/4 * var(--i)));
    transform-origin: 330px;
}

.circle-4-img-slider .box .img .imgBx img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    transform: rotate(calc(-360deg/4 * var(--i)));
    animation: animateRotate0To-360 30s linear infinite;
}

@keyframes animateRotate0To-360 {
    0% {
        rotate: 0deg;
    }

    100% {
        rotate: -360deg;
    }
}

.circle-4-img-slider .circle-slider-parent:hover .box .img .imgBx img,
.circle-4-img-slider .circle-slider-parent:hover .box .imgBx .overlay-text,
.circle-4-img-slider .circle-slider-parent:hover .box {
    animation-play-state: paused;
}


/* Circilar blocks animation */

.bg-sliding-animated .bg-effect-1,
.bg-sliding-animated .bg-effect-2,
.bg-sliding-animated .bg-effect-3 {
  animation: bgSlidingAnimated 3s ease-in-out infinite alternate;
  background-image: linear-gradient(-60deg, #6c3 50%, #09f 50%);
  bottom: 0;
  left: -50%;
  opacity: .5;
  position: absolute;
  right: -50%;
  top: 0;
  z-index: 1;
}

.bg-sliding-animated .bg-effect-2 {
  animation-direction: alternate-reverse;
  animation-duration: 4s;
}

.bg-sliding-animated .bg-effect-3 {
  animation-duration: 5s;
}

@keyframes bgSlidingAnimated {
  0% {
    transform: translateX(-25%);
  }

  100% {
    transform: translateX(25%);
  }
}

.bg-color-animated {
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: bgColorAnimation 15s ease infinite;
}

@keyframes bgColorAnimation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}