:root {
    --header-gradient: linear-gradient(-45deg, #000000, #06000c);
    --main-gradient: linear-gradient(45deg, #000000, #0a0015, #06000b);
    --main-color2: linear-gradient(45deg, #c56ffd, #b242fc, #a115fd);
    --main-color: linear-gradient(45deg, #e7c2ff, #ca7bff, #b13cff);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'QuickSand';
    font-weight: 400;
    color: #fff;
}

body {
    background: var(--main-gradient);
    background-size: 1300% 1300%;
    animation: background-gradient-animation 12s ease-in-out infinite;
    background-color: #06000b;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1;
}

html,
body {
    height: 100%;
    margin: 0;
}

html {
    scroll-behavior: smooth;
}

::-webkit-scrollbar {
    width: 4px;
    height: 0px;
}

::-webkit-scrollbar-track {
    background: #000;
    border-radius: 6px;
}

::-webkit-scrollbar-thumb {
    background: #7728ac;
    border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
    background: #6c00b5;
}

#arrow_up {
    background: #7728ac;
    padding: 7px 10px;
    font-size: 1.2rem;
    position: fixed;
    bottom: 40px;
    right: -90px;
    border-radius: 10px;
    z-index: 1000;
    opacity: 50%;
    display: none;
    cursor: pointer;
    transition: right 1s ease;
}

@keyframes text-gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes background-gradient-animation {
    0% {
        background-position: 0 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0 50%;
    }
}

@keyframes blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes animate_hero_textbox {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }

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

    }
}

@keyframes animate_about_section {
    0% {
        opacity: 0;
        transform: translateY(50px);
    }

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

@keyframes fade_in_about_us_textbox {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

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

@keyframes fade_in_contact_form {
    0% {
        opacity: 0;
        transform: translateX(20px);
    }

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

@keyframes animate_services_header_line {
    0% {
        width: 0%;
    }

    100% {
        width: 90%;
    }
}

@keyframes fade_in_service_info_box {
    0% {
        opacity: 0;
        transform: translateX(20px);
    }

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

@keyframes fade_in_service_info_box2 {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }

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

@keyframes send_message_animation {
    0% {
        top: -60px;
        opacity: 0;
    }

    50% {
        top: 50px;
        opacity: 1;
    }

    100% {
        top: -60px;
        opacity: 0;
    }
}