/* General variables */
:root {
    --animation-first-block-time: 4s;
}
/* ANIMATIONS */
/* Scalability for Growth */
.animation-col-1 {
    max-width: 392px !important;
    width: 100% !important;
}

.animation-container {
    display: flex;
	direction: ltr;
    flex-wrap: wrap;
    width: 392px;
    height: 260px;
	margin-left: auto;
}

.animation-block {
   position: relative;
   width: 112px;
   height: 112px;
   margin: 0 28px 36px 0;
   overflow: hidden;
   /* background-color: darkgray; */
}

.animation-block_visible {
    overflow: visible;
}

.animation-block:nth-child(3),
.animation-block:nth-child(6) {
    margin-right: 0;
}

.animation-block .animation-block__item {
    position: absolute;
}

.animation-block .animation-block__item_t-l {
    top: 0;
    left: 0;
}

.animation-block .animation-block__item_t-r {
   top: 0;
   right: 0;
}

.animation-block .animation-block__item_b-r {
    bottom: 0;
    right: 0;
}

.animation-block .animation-block__item_b-l {
    bottom: 0;
    left: 0;
}

/* Profile */
.animation-block .animation-block__item-profile {
    top: 0;
    left: 0;
    animation: profile var(--animation-first-block-time);
    animation-play-state: paused;

}

@keyframes profile {
    0% {
        transform: translateY(-200%);
    }
    15% {
        transform: translateY(0);
    }
}

/* arrows */
.animation-block .animation-block__item_t-l.arrows {
   animation: topLeftArrows var(--animation-first-block-time);
   animation-play-state: paused;
}

.animation-block .animation-block__item_t-r.arrows {
   animation: topRightArrows var(--animation-first-block-time);
   animation-play-state: paused;
}

.animation-block .animation-block__item_b-r.arrows {
    animation: bottomRightArrows var(--animation-first-block-time);
    animation-play-state: paused;
}

.animation-block .animation-block__item_b-l.arrows {
    animation: bottomLeftArrows var(--animation-first-block-time);
    animation-play-state: paused;
}

@keyframes topLeftArrows {
    0% {
       opacity: 0;
       transform: translate(20px, 20px)  scale(0.5);
    }
    12.5% {
        opacity: 0;
        transform: translate(20px, 20px)  scale(0.5);
    }
    18.75% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
    40% {
        opacity: 1;
        transform: translate(8px, 8px) scale(1);
    }
    44% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
}

@keyframes topRightArrows {
    0% {
       opacity: 0;
       transform: translate(-20px, 20px);
    }
    18% {
        opacity: 0;
        transform: translate(-1200px, 1200px);
    }
    18.5% {
        opacity: 1;
/*         transform: translate(-1200px, 1200px); */
    }
    45% {
       opacity: 1;
       transform: translate(0, 0);
    }
}

@keyframes bottomRightArrows {
    0% {
       opacity: 0;
       transform: translate(-20px, -20px)  scale(0.5);
    }
    10% {
        opacity: 0;
        transform: translate(-20px, -20px)  scale(0.5);
    }
    16.25% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
    40% {
        opacity: 1;
        transform: translate(-8px, -8px) scale(1);
    }
    44% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
}

@keyframes bottomLeftArrows {
    0% {
        opacity: 0;
        transform: translate(20px, -20px)  scale(0.5);
    }
    11.25% {
        opacity: 0;
        transform: translate(20px, -20px)  scale(0.5);
    }
    17.5% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
    40% {
        opacity: 1;
        transform: translate(8px, -8px) scale(1);
    }
    44% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
}

/* Document */
.animation-block .animation-block__item_t-l.document {
    animation: topLeftDocument var(--animation-first-block-time);
    animation-play-state: paused;
}
 
.animation-block .animation-block__item_t-r.document {
    animation: topRightDocument var(--animation-first-block-time);
    animation-play-state: paused;
}
 
.animation-block .animation-block__item_b-r.document {
    animation: bottomRightDocument var(--animation-first-block-time);
    animation-play-state: paused;
}
 
.animation-block .animation-block__item_b-l.document {
    animation: bottomLeftDocument var(--animation-first-block-time);
    animation-play-state: paused;
}

.animation-block .animation-block__item_line-l.document {
    top: 20px;
    left: 16px;
    animation: lineLDocument var(--animation-first-block-time);
    animation-play-state: paused;
}

.animation-block .animation-block__item_line-m.document {
    top: 36px;
    left: 16px;
    animation: lineMDocument var(--animation-first-block-time);
    animation-play-state: paused;
}

.animation-block .animation-block__item_check-mark.document {
    bottom: 16px;
    left: 48px;
    animation: checkMarkDocument var(--animation-first-block-time);
    animation-play-state: paused;
}

@keyframes topLeftDocument {
    0% {
        opacity: 0;
        transform: translate(50%, 50%);
       
    }
    40% {
        opacity: 0;
        transform: translate(50%, 50%);
    }
    46.25% {
        opacity: 1;
        transform: translate(0, 0);
    }
}

@keyframes topRightDocument {
    0% {
        opacity: 0;
        transform: translate(-50%, 50%);
    }
    40% {
        opacity: 0;
        transform: translate(-50%, 50%);
    }
    46.25% {
        opacity: 1;
        transform: translate(0, 0);
    }
}

@keyframes bottomRightDocument {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%);
    }
    40% {
        opacity: 0;
        transform: translate(-50%, -50%);
    }
    46.25% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
}

@keyframes bottomLeftDocument {
    0% {
        opacity: 0;
        transform: translate(50%, -50%);
    }
    40% {
        opacity: 0;
        transform: translate(50%, -50%);
    }
    46.25% {
        opacity: 1;
        transform: translate(0, 0);
    }
}

@keyframes lineMDocument {
    0% {
        opacity: 0;
        transform: translateX(-200%);
    }
    46.25% {
        opacity: 0;
        transform: translateX(-200%);
    }
    52.5% {
        opacity: 1;
        transform: translate(0, 0);
    }
}

@keyframes lineLDocument {
    0% {
        opacity: 0;
        transform: translateX(200%);
    }
    52.5% {
        opacity: 0;
        transform: translateX(200%);
    }
    57.75% {
        opacity: 1;
        transform: translate(0, 0);
    }
}

@keyframes checkMarkDocument {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    57.75% {
        opacity: 0;
        transform: scale(0);
    }
    62% {
        opacity: 1;
        transform: scale(1.2);
    }
    65% {
        transform: scale(1);
    }
}

/* Square */
.animation-block .animation-block__item_square {
    width: 100%;
    height: 100%;
    border: 3px solid #66C81C;
}

.animation-block .animation-block__item_square-1.square {
    animation: squareFirst var(--animation-first-block-time);
    animation-play-state: paused;
}

.animation-block .animation-block__item_square-2.square {
    animation: squareSecond var(--animation-first-block-time);
    animation-play-state: paused;
}

@keyframes squareFirst {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    65% {
        opacity: 0;
        transform: scale(0);
    }
    77.5% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes squareSecond{
    0% {
        opacity: 0;
    }
    71.25% {
        opacity: 0;
        transform: translateX(100%);
    }
    77.5% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Activate Animation */
.animation-container.activate .animation-block .animation-block__item-profile,
.animation-container.activate .animation-block .animation-block__item_t-l.arrows,
.animation-container.activate .animation-block .animation-block__item_t-r.arrows,
.animation-container.activate .animation-block .animation-block__item_b-r.arrows,
.animation-container.activate .animation-block .animation-block__item_b-l.arrows,
.animation-container.activate .animation-block .animation-block__item_t-l.document,
.animation-container.activate .animation-block .animation-block__item_t-r.document,
.animation-container.activate .animation-block .animation-block__item_b-r.document,
.animation-container.activate .animation-block .animation-block__item_b-l.document,
.animation-container.activate .animation-block .animation-block__item_line-l.document,
.animation-container.activate .animation-block .animation-block__item_line-m.document,
.animation-container.activate .animation-block .animation-block__item_check-mark.document,
.animation-container.activate .animation-block .animation-block__item_square-1.square,
.animation-container.activate .animation-block .animation-block__item_square-2.square {
    animation-play-state: running;
}

@media screen and (min-width: 1200px) {
	.home-benegits-column p {
		max-width: 888px;
	}
}

@media screen and (max-width: 1200px) {
    .animation-container {
        margin-left: auto;
        margin-right: auto;
    }
	.animation-col-1 {
		max-width: none !important;
		width: 100% !important;
	}
}

@media screen and (max-width: 424px) {
	.animation-1-row .animation-content-block p {
		max-width: calc(100dvw - 32px) !important;
	}
    .animation-container {
        transform: scale(0.8);
    	transform-origin: top right;
    	margin-bottom: -52px;
    	margin-left: calc((100dvw - 320px - 32px) / 2);
    }
}

/* Comprehensive Feature Set */
.animation-container-2 {
    position: relative;
	direction: ltr;
    display: flex;
    flex-wrap: wrap;
    width: 450px;
    height: 282px;
    padding: 0 62px 0 54px;
}

.animation-block-2 {
   position: relative;
   width: 115px;
   height: 115px;
   margin: 0 102px 50px 0;
   overflow: hidden;
}

.animation-block-2_visible {
    overflow: visible;
}

.animation-block-2:nth-child(2),
.animation-block-2:nth-child(4) {
    margin-right: 0;
}

.animation-block-2 .animation-block-2__item {
    position: absolute;
}

/* Building */
.animation-block-2 .animation-block-2__item_left.building {
    top: 0;
    left: 0;
    animation: leftBuildingPart var(--animation-first-block-time);
    animation-play-state: paused;
}

.animation-block-2 .animation-block-2__item_center.building {
    top: 22px;
    left: 22px;
    animation: centerBuildingPart var(--animation-first-block-time);
    animation-play-state: paused;
}

.animation-block-2 .animation-block-2__item_right.building {
    top: 0;
    right: 0;
    animation: rightBuildingPart var(--animation-first-block-time);
    animation-play-state: paused;
}

@keyframes leftBuildingPart {
    0% {
        opacity: 0;
    }
    5.25% {
        opacity: 0;
    }
    6.25% {
        opacity: 1;
    }
}

@keyframes centerBuildingPart {
    0% {
        opacity: 0;
    }
    6.25% {
        opacity: 0;
        transform: translateX(100%);

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

@keyframes rightBuildingPart {
    0% {
        opacity: 0;
    }
    12.5% {
        opacity: 0;
        transform: translateX(-100%);

    }
    17.75% {
        opacity: 1;

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

/* Chart */
.animation-block-2 .animation-block-2__item_left.chart {
    bottom: 0;
    left: 0;
    animation: leftChartPart var(--animation-first-block-time);
    animation-play-state: paused;
}

.animation-block-2 .animation-block-2__item_center.chart {
    bottom: 0;
    left: 35px;
    animation: centerChartPart var(--animation-first-block-time);
    animation-play-state: paused;
}

.animation-block-2 .animation-block-2__item_right.chart {
    bottom: 0;
    left: 70px;
    animation: rightChartPart var(--animation-first-block-time);
    animation-play-state: paused;
}

@keyframes leftChartPart {
    0% {
        transform: translateY(100%);
    }
    25% {
        transform: translateY(100%);
    }
    37.5% {
        transform: translateY(0);
    }
}

@keyframes centerChartPart {
    0% {
        transform: translateY(100%);
    }
    31.25% {
        transform: translateY(100%);
    }
    43.75% {
        transform: translateY(0);
    }
}

@keyframes rightChartPart {
    0% {
        transform: translateY(100%);
    }
    37.5% {
        transform: translateY(100%);
    }
    50% {
        transform: translateY(0);
    }
}

/* Document 2 */
.animation-block-2 .animation-block-2__item_left.doc {
    bottom: 0;
    left: 0;
    animation: leftChartDoc var(--animation-first-block-time);
    animation-play-state: paused;
}

.animation-block-2 .animation-block-2__item_center.doc {
    bottom: 40px;
    left: 18px;
    animation: centerChartDoc var(--animation-first-block-time);
    animation-play-state: paused;
}

.animation-block-2 .animation-block-2__item_right.doc {
    bottom: 40px;
    right: 18px;
    animation: rightChartDoc var(--animation-first-block-time);
    animation-play-state: paused;
}

@keyframes leftChartDoc {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    50% {
        opacity: 0;
        transform: scale(0);
    }
    56.25% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes centerChartDoc {
    0% {
        transform: scale(0);
    }
    62.5% {
        transform: scale(0);
    }
    67.75% {
        transform: scale(1.3);
    }
    75% {
        transform: scale(1);
    }
}

@keyframes rightChartDoc {
    0% {
        transform: translateX(200%);
    }
    56.25% {
        transform: translateX(200%);
    }
    62.5% {
        transform: translateX(0);
    }
}

/* Clock */
.animation-block-2 .animation-block-2__item_left.clock {
    bottom: 0;
    left: 0;
    animation: leftClockPart var(--animation-first-block-time);
    animation-play-state: paused;
}

.animation-block-2 .animation-block-2__item_right.clock {
    bottom: 40px;
    right: 56px;
    animation: rightClockPart var(--animation-first-block-time);
    animation-play-state: paused;
}

@keyframes leftClockPart {
    0% {
        opacity: 0;
        transform: rotate(-270deg);
    }
    74% {
        opacity: 0;
        transform: rotate(-270deg);
    }
    75% {
        opacity: 1;
        transform: rotate(-270deg);
    }
    93.75% {
        opacity: 1;
        transform: rotate(0);
    }
}

@keyframes rightClockPart {
    0% {
        opacity: 0;
        transform: rotate(90deg);
    }
    74% {
        opacity: 0;
        transform: rotate(90deg);
    }
    75% {
        opacity: 1;
        transform: rotate(90deg);
    }
    93.75% {
        opacity: 1;
        transform: rotate(0);
    }
}

/* Background */
.animation-container-2__bg {
    position: absolute;
    top: 48px;
    left: 2px;
    animation: backgroungAnimation var(--animation-first-block-time);
    animation-play-state: paused;
}

@keyframes backgroungAnimation {
    0% {
        opacity: 0;
        transform: scale(1);
    }
    87.5% {
        opacity: 0;
        transform: scale(1);
    }
    93.75% {
        opacity: 1;
        transform: scale(1.02);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Activate animation */
.animation-container-2.activate .animation-block-2 .animation-block-2__item_left.building,
.animation-container-2.activate .animation-block-2 .animation-block-2__item_center.building,
.animation-container-2.activate .animation-block-2 .animation-block-2__item_right.building,
.animation-container-2.activate .animation-block-2 .animation-block-2__item_left.chart,
.animation-container-2.activate .animation-block-2 .animation-block-2__item_center.chart,
.animation-container-2.activate .animation-block-2 .animation-block-2__item_right.chart,
.animation-container-2.activate .animation-block-2 .animation-block-2__item_left.doc,
.animation-container-2.activate .animation-block-2 .animation-block-2__item_center.doc,
.animation-container-2.activate .animation-block-2 .animation-block-2__item_right.doc,
.animation-container-2.activate .animation-block-2 .animation-block-2__item_left.clock,
.animation-container-2.activate .animation-block-2 .animation-block-2__item_right.clock,
.animation-container-2.activate .animation-container-2__bg {
    animation-play-state: running;
}

@media screen and (min-width: 1200px) {
	.animation-col-2 {
		min-width: 450px;
	}
}

@media screen and (max-width: 1200px) {
	.animation-col-2 {
		width: 100% !important;
	}
    .animation-container-2 {
        margin-left: auto;
        margin-right: auto;
    }
}

/* 360px - 80% from width */
@media screen and (max-width: 482px) {
	.animation-2-row .animation-content-block p {
		max-width: calc(100dvw - 32px) !important;
	}
    .animation-container-2 {
        transform: scale(0.8);
        transform-origin: right top;
    	margin-bottom: -56px;
    	margin-left: calc((100dvw - 360px - 32px) / 2);
    }
}

/* 315px - 70% from width */
@media screen and (max-width: 400px) {
    .animation-container-2 {
        transform: scale(0.7);
    	margin-bottom: -85px;
    	margin-left: calc((100dvw - 315px - 32px) / 2);
    }
}

/* Efficient & Streamlined Operations */


.animation-container-3 {
    position: relative;
    display: flex;
	direction: ltr;
    flex-wrap: wrap;
    width: 528px;
    height: 275px;
    padding: 0 ;
}

.animation-container-3 .animation-container-3__col-icons {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.animation-container-3 .animation-container-3__col-lines {
    display: flex;
    flex-direction: column;
    padding: 27px 10px 24px 12px;
}

.animation-container-3 .animation-container-3__col-gear {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Gear */
.animation-container-3 .animation-container-3__icon-gear-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 152px;
    height: 152px;
}

.animation-container-3 .animation-container-3__icon-gear {
    position: absolute;
}

.animation-container-3 .animation-container-3__icon-gear-circle.gear {
    animation: geraCircle var(--animation-first-block-time);
    animation-play-state: paused;
}

.animation-container-3 .animation-container-3__icon-gear-external.gear {
    animation: gearExternal var(--animation-first-block-time);
    animation-play-state: paused;
}

@keyframes geraCircle {
    0% {
        transform: scale(0);
    }
    5% {
        transform: scale(2);
    }
    10% {
        transform: scale(1);
    }
}

@keyframes gearExternal {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    5% {
        opacity: 1;
        transform: scale(0);
    }
    20% {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(-1080deg);
    }
}

/* First item */
.animation-container-3 .animation-container-3__line-1.lines {
    animation: line1 var(--animation-first-block-time);
    animation-play-state: paused;
}

@keyframes line1 {
    0% {
        opacity: 0;
        transform: scale(0);
        transform-origin: right;
    }
    20% {
        opacity: 0;
        transform-origin: right;
        transform: scale(0);
    }
    40% {
        opacity: 1;
        transform-origin: right;
        transform: scale(1);
    }
}

.animation-container-3 .animation-container-3__icon-doc.icons {
    animation: lineItem1 var(--animation-first-block-time);
    animation-play-state: paused;
}

@keyframes lineItem1 {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    35% {
        opacity: 0;
        transform: scale(0);
    }
    40% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Second item */
.animation-container-3 .animation-container-3__line-2.lines {
    animation: line2 var(--animation-first-block-time);
    animation-play-state: paused;
}

@keyframes line2 {
    0% {
        opacity: 0;
        transform: scale(0);
        transform-origin: right;
    }
    30% {
        opacity: 0;
        transform-origin: right;
        transform: scale(0);
    }
    50% {
        opacity: 1;
        transform-origin: right;
        transform: scale(1);
    }
}

.animation-container-3 .animation-container-3__icon-chat.icons {
    animation: lineItem2 var(--animation-first-block-time);
    animation-play-state: paused;
}

@keyframes lineItem2 {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    45% {
        opacity: 0;
        transform: scale(0);
    }
    50% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Third item */
.animation-container-3 .animation-container-3__line-3.lines {
    animation: line3 var(--animation-first-block-time);
    animation-play-state: paused;
}

@keyframes line3 {
    0% {
        opacity: 0;
        transform: scale(0);
        transform-origin: right;
    }
    40% {
        opacity: 0;
        transform-origin: right;
        transform: scale(0);
    }
    60% {
        opacity: 1;
        transform-origin: right;
        transform: scale(1);
    }
}

.animation-container-3 .animation-container-3__icon-schedule.icons {
    animation: lineItem3 var(--animation-first-block-time);
    animation-play-state: paused;
}

@keyframes lineItem3 {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    55% {
        opacity: 0;
        transform: scale(0);
    }
    60% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Activate animation */
.animation-container-3.activate .animation-container-3__icon-gear-circle.gear,
.animation-container-3.activate .animation-container-3__icon-gear-external.gear,
.animation-container-3.activate .animation-container-3__line-1.lines,
.animation-container-3.activate .animation-container-3__icon-doc.icons,
.animation-container-3.activate .animation-container-3__line-2.lines,
.animation-container-3.activate .animation-container-3__icon-chat.icons,
.animation-container-3.activate .animation-container-3__line-3.lines,
.animation-container-3.activate .animation-container-3__icon-schedule.icons {
    animation-play-state: running;
}

@media screen and (min-width: 1441px) {
	.animation-col-3 {
		min-width: 528px;
	}
}

@media screen and (min-width: 1201px) and (max-width: 1440px) {
	.animation-3-row .gspb_row__content {
		gap: 60px;
	}
	.animation-col-3 {
		width: 422px !important;
	}
	.animation-container-3 {
		transform: scale(0.8);
		transform-origin: top right;
	}
}

@media screen and (max-width: 1200px) {
	.animation-col-3 {
		width: 100% !important;
	}
    .animation-container-3 {
        margin-left: auto;
        margin-right: auto;
    }
}

@media screen and (max-width: 560px) {
	.animation-3-row .animation-content-block p {
		max-width: calc(100dvw - 32px) !important;
	}
    .animation-container-3 {
        transform: scale(0.8);
        transform-origin: right top;
    	margin-bottom: -55px;
    	margin-left: calc((100dvw - 422px - 32px) / 2);
    }
}

@media screen and (max-width: 480px) {
    .animation-container-3 {
        transform: scale(0.6);
        transform-origin: right top;
    	margin-bottom: -110px;
    	margin-left: calc((100dvw - 317px - 32px) / 2);
    }
}

/* Secure & Seamless Transactions */
.animation-container-4 {
    position: relative;
    display: flex;
	direction: ltr;
    flex-wrap: wrap;
    width: 440px;
    height: 254px;
    padding: 0;
    overflow: hidden;
}

.animation-container-4 .animation-container-4__wallet-1 {
    position: absolute;
    left: 78px;
    bottom: 0;
    background: #fff;
}

.animation-container-4 .animation-container-4__wallet-2 {
    position: absolute;
    left: 0;
    top: 18px;
}

.animation-container-4 .animation-container-4__lock-wrapper {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 132px;
    height: 164px;
}

.animation-container-4 .animation-container-4__lock-content {
    position: relative;
    width: inherit;
    height: inherit;
}

.animation-container-4 .animation-container-4__lock-body {
    position: absolute;
    right: 0;
    bottom: 0;
    background-color: #fff;
}

.animation-container-4 .animation-container-4__lock-top {
    position: absolute;
    right: 24px;
    top: 0;
}

.animation-container-4 .animation-container-4__lock-key {
    position: absolute;
    bottom: 33px;
    right: 64px;
}

.animation-container-4 .animation-container-4__cardio {
    position: absolute;
    top: 4px;
    right: 83px;
}

/* Wallets */
.animation-container-4 .animation-container-4__wallet-1.wallets {
    animation: wallet1 var(--animation-first-block-time);
    animation-play-state: paused;
}

.animation-container-4 .animation-container-4__wallet-2.wallets {
    animation: wallet2 var(--animation-first-block-time);
    animation-play-state: paused;
}

@keyframes wallet1 {
    0% {
        transform: translateY(100%);
    }
    10% {
        transform: translateY(0);
    }
}

@keyframes wallet2 {
    0% {
        opacity: 0;
        transform: rotate(19deg) translateY(80px) translateX(58px);
        transform-origin: bottom;
    }
    10% {
        opacity: 0;
        transform: rotate(19deg) translateY(80px) translateX(58px);
        transform-origin: bottom;
    }
    20% {
        opacity: 1;
        transform: scale(1) rotate(0);
        transform: rotate(0) translateY(0) translateX(0);
    }
}

/* Lock */
.animation-container-4 .animation-container-4__lock-body.lock {
    animation: lockBody var(--animation-first-block-time);
    animation-play-state: paused;
}

.animation-container-4 .animation-container-4__lock-top.lock {
    animation: lockTop var(--animation-first-block-time);
    animation-play-state: paused;
}

.animation-container-4 .animation-container-4__lock-key.lock {
    animation: lockKey var(--animation-first-block-time);
    animation-play-state: paused;
}

@keyframes lockBody {
    0% {
        transform: translateX(100%);
    }
    15% {
        transform: translateX(100%);
    }
    25% {
        transform: translateX(0);
    }
}

@keyframes lockTop {
    0% {
        opacity: 0;
        transform: translateY(100%);
    }
    25% {
        opacity: 0;
        transform: translateY(100%);
    }
    26% {
        opacity: 1;
        transform: translateY(100%);
    }
    35% {
        transform: translateY(0);
    }
}

@keyframes lockKey {
    0% {
        transform: scale(0);
    }
    35% {
        transform: scale(0);
    }
    40% {
        transform: scale(140%);
    }
    45% {
        transform: scale(100%);
    }
}

/* Cardio */
.animation-container-4 .animation-container-4__cardio.cardio {
    animation: cardio var(--animation-first-block-time);
    animation-play-state: paused;
}

@keyframes cardio {
    0% {
        transform: scale(0);
    }
    55% {
        transform: scale(0);
    }
    60% {
        transform: scale(110%, 120%);
    }
    65% {
        transform: scale(100%);
    }
}

/* Activate animation */
.animation-container-4.activate .animation-container-4__wallet-1.wallets,
.animation-container-4.activate .animation-container-4__wallet-2.wallets,
.animation-container-4.activate .animation-container-4__lock-body.lock,
.animation-container-4.activate .animation-container-4__lock-top.lock,
.animation-container-4.activate .animation-container-4__lock-key.lock,
.animation-container-4.activate .animation-container-4__cardio.cardio{
    animation-play-state: running;
}


@media screen and (min-width: 1441px) {
	.animation-col-4 {
		min-width: 440px;
	}
}

@media screen and (min-width: 1201px) and (max-width: 1440px) {
	.animation-4-row .gspb_row__content {
		gap: 60px;
	}
	.animation-col-4 {
		width: 378px !important;
	}
	.animation-container-4 {
		transform: scale(0.8);
		transform-origin: top right;
	}
}

@media screen and (max-width: 1200px) {
	.animation-col-4 {
		width: 100% !important;
	}
    .animation-container-4 {
        margin-left: auto;
        margin-right: auto;
    }
}

@media screen and (max-width: 510px) {
	.animation-4-row .animation-content-block p {
		max-width: calc(100dvw - 32px) !important;
	}
}

@media screen and (max-width: 472px) {
    .animation-container-4 {
        transform: scale(0.8);
        transform-origin: top right;
		margin-bottom: -51px;
    	margin-left: calc((100dvw - 352px - 32px) / 2);
    }
}