@keyframes slide-downLeft {
    from{
        transform: translate(100%, 100%) scaleX(-1);
    }
    to {
        transform: translate(0, 0) scaleX(-1);
    }
}

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

@keyframes slide-right {
    from {
        transform: translateX(100%) scaleX(-1);
    }
    to {
        transform: translateX(0) scaleX(-1);
    }
}

@keyframes fade-right {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}
@keyframes fade-down{
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes fade-up{
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes weld-rotate {
    0%, 25% {
        transform: rotate(0deg);
    }
    50%, 75% {
        transform: rotate(180deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes s-card {
    0% {
        background-position: top;
    }
    100% {
        background-position: bottom;
    }
}

@property --color-1 {
  syntax: "<color>";
  inherits: false;
  initial-value: hsl(98 100% 62%);
}

@property --color-2 {
  syntax: "<color>";
  inherits: false;
  initial-value: hsl(204 100% 59%);
}

@keyframes gradient-change {
  to {
    --color-1: hsl(210 100% 59%);
    --color-2: hsl(310 100% 59%);
  }
}


#sec1 .container .arrows.first.animate{
    transform: translate(100%, 100%) scaleX(-1);
}

#sec1 .container .arrows.first.in-view{
    animation: slide-downLeft 1s ease-out 1s forwards;
}

#sec1 .container .content.animate h1{
    transform: translateX(-100vw);
    opacity: 0;
}

#sec1 .container .content.in-view h1{
    animation: fade-right 1s ease-out 1.5s forwards;
}

#sec1 .container .content.in-view h1:nth-child(3){
    animation: fade-down 0.5s ease-out 2.5s forwards;
}

#sec1 .man.animate{
    transform: translateX(-100%);
}

#sec1 .man.in-view{
    animation: slide-left 1s ease-out forwards;
}

#sec1 .container .arrows.second.animate{
    transform: translateX(-100%);
}

#sec1 .container .arrows.second.in-view{
    animation: slide-right 1s ease-out 1s forwards;
}

#sec1 .container .content p.animate{
    transform: translateY(100%);
    opacity: 0;
}

#sec1 .container .content p.in-view{
    animation: fade-down 1s ease-out 3s forwards;
}

#sec2 .content.animate{
    opacity: 0;
}

#sec2 .content.in-view{
    animation: fade-up 1s ease-out forwards;
}

#sec2 .swiper-container.animate{
    opacity: 0;
}

#sec2 .swiper-container.in-view{
    animation: fade-up 1s ease-out forwards;
}