.svg {
    position: fixed;
    top: 200px;
    right: 20px;
    margin-top: -50px;
    margin-left: -50px;
    animation: rotate 1s linear infinite;
    animation-play-state: paused;
    animation-delay: calc(var(--scroll) * -2s);

    animation-iteration-count: 1;
    animation-fill-mode: both;
}

@keyframes rotate {
    to {
        transform: rotate(360deg);
    }
}



.home {
    /* height: calc(100vh - 70px); */
    height: fit-content;
    /* background: url('../assets/images/bg.jpg'); */
    background-image: linear-gradient(to bottom, #000000a2, #0000007c, #304C5C04), url('./../assets/images/bg2.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;

}

.service {
    /* height: calc(100vh - 70px); */
    height: fit-content;
    /* background: url('../assets/images/bg.jpg'); */
    background-image: linear-gradient(to bottom right, #00000004, #000000fd), url('./../assets/images/services.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

@media screen and (max-width: 770px) {
    .home {
        height: fit-content;
    }
}

.animated-text {
    animation: slide-in 1s ease-out forwards;
    opacity: 0;
}

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

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

.from_bottom {
    animation: from_bottom 1.2s ease-out forwards;
    opacity: 0;
}

@keyframes from_bottom {
    from {
        transform: translateY(50%);
        opacity: 0;
    }

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


@keyframes from_top {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

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

/* .from_left {
            opacity: ;
        } */
@keyframes from_left {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

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

@keyframes from_right {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

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

@keyframes to_right {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }

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

@keyframes small_to_large {
    0% {
        opacity: 0;
        transform: scale(0.7);
    }

    /* 25% {
                opacity: 0.5;
                transform: scale(0.8);
            }

            50% {
                opacity: 1;
                transform: scale(1.1);
            }

            75% {
                opacity: 1;
                transform: scale(0.8);
            } */

    100% {
        opacity: 1;
        transform: scale(1);
    }
}
.shake {
    animation: shake 2s linear infinite;
}
@keyframes shake {
    0% {
        transform: translateX(-5px);
    }
    50% {
        transform: translateX(5px);
    }
    100% {
        transform: translateX(-5px);
    }
}