.main-gradient {
    background: radial-gradient(100% 100% at var(--g1-1-x-position) var(--g1-1-y-position), #3cc2dd 0%, transparent), radial-gradient(100% 100% at var(--g1-2-x-position) var(--g1-2-y-position), #93f179 0%, transparent), #33405b;
    animation-name: g-1;
    animation-iteration-count: infinite;
    animation-duration: 3s;
    transition-timing-function: ease-in;
}

@property --g1-1-x-position {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 20%;
}

@property --g1-1-y-position {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 80%;
}

@property --g1-2-x-position {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 80%;
}

@property --g1-2-y-position {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 20%;
}

:root {
    --g1-1-x-position: 20%;
    --g1-1-y-position: 80%;
    --g1-2-x-position: 80%;
    --g1-2-y-position: 20%;
}

@keyframes g-1 {
    25% {
        --g1-1-x-position: 15%;
        --g1-1-y-position: 15%;
        --g1-2-x-position: 85%;
        --g1-2-y-position: 80%;
    }

    50% {
        --g1-1-x-position: 80%;
        --g1-1-y-position: 15%;
        --g1-2-x-position: 15%;
        --g1-2-y-position: 85%;
    }
}

.btn-gradient:hover {
    background: radial-gradient(100% 100% at var(--5-x-position) var(--5-y-position), #307abc 0%, transparent), radial-gradient(100% 100% at var(--6-x-position) var(--6-y-position), #44a8df 0%, transparent), radial-gradient(100% 100% at var(--7-x-position) var(--7-y-position), #307abc 0%, transparent), #1b253b;
    animation-name: main;
    animation-iteration-count: infinite;
    animation-duration: 2s;
    transition-timing-function: ease-in;
}

.btn-gradient>a:hover {
    color: white !important;
}

@property --5-x-position {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 20%;
}

@property --5-y-position {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 80%;
}

@property --6-x-position {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 52.85156250000001%;
}

@property --6-y-position {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 52.03124999999999%;
}

@property --7-x-position {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 78.4375%;
}

@property --7-y-position {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 25.117187500000004%;
}

:root {
    --5-x-position: 20%;
    --5-y-position: 80%;
    --6-x-position: 52.85156250000001%;
    --6-y-position: 52.03124999999999%;
    --7-x-position: 78.4375%;
    --7-y-position: 25.117187500000004%;
}

@keyframes main {
    25% {
        --5-x-position: 15%;
        --5-y-position: 15%;
        --6-x-position: 85%;
        --6-y-position: 80%;
    }

    50% {
        --5-x-position: 80%;
        --5-y-position: 15%;
        --6-x-position: 15%;
        --6-y-position: 85%;
        --7-x-position: 20%;
        --7-y-position: 20%;
    }
}



.cta-gradient {
    background: radial-gradient(100% 100% at var(--6-x-position) var(--6-y-position), #3cc2dd 0%, transparent), radial-gradient(100% 100% at var(--7-x-position) var(--7-y-position), #00FAA7 0%, transparent), radial-gradient(100% 100% at var(--8-x-position) var(--8-y-position), #8623d7 0%, transparent), radial-gradient(100% 100% at var(--9-x-position) var(--9-y-position), #d72395 0%, transparent), #1b253b;
    animation-name: main;
    animation-iteration-count: infinite;
    animation-duration: 2s;
    transition-timing-function: ease-in;
}

@property --6-x-position {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 20%;
}

@property --6-y-position {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 80%;
}

@property --7-x-position {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 80%;
}

@property --7-y-position {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 20%;
}

@property --8-x-position {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 80%;
}

@property --8-y-position {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 80%;
}

@property --9-x-position {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 41.52343750000001%;
}

@property --9-y-position {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 30.390625000000004%;
}

:root {
    --6-x-position: 20%;
    --6-y-position: 80%;
    --7-x-position: 80%;
    --7-y-position: 20%;
    --8-x-position: 80%;
    --8-y-position: 80%;
    --9-x-position: 41.52343750000001%;
    --9-y-position: 30.390625000000004%;
}

@keyframes main {
    25% {
        --6-x-position: 15%;
        --6-y-position: 15%;
        --7-x-position: 85%;
        --7-y-position: 80%;
    }

    50% {
        --6-x-position: 80%;
        --6-y-position: 15%;
        --7-x-position: 15%;
        --7-y-position: 85%;
        --8-x-position: 20%;
        --8-y-position: 20%;
        --9-x-position: 20%;
        --9-y-position: 20%;
    }
}

/*Degradado Breadcrumb*/
.breadcrumb-gradient {
    background: radial-gradient(100% 100% at var(--4-x-position) var(--4-y-position), #3cc2dd 0%, transparent), radial-gradient(100% 100% at var(--5-x-position) var(--5-y-position), #ddfa00 0%, transparent), #1b253b;
    animation-name: main;
    animation-iteration-count: infinite;
    animation-duration: 2s;
    transition-timing-function: ease-in;
}

@property --4-x-position {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 20%;
}

@property --4-y-position {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 80%;
}

@property --5-x-position {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 80%;
}

@property --5-y-position {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 20%;
}

:root {
    --4-x-position: 20%;
    --4-y-position: 80%;
    --5-x-position: 80%;
    --5-y-position: 20%;
}

@keyframes main {
    25% {
        --4-x-position: 15%;
        --4-y-position: 15%;
        --5-x-position: 85%;
        --5-y-position: 80%;
    }

    50% {
        --4-x-position: 80%;
        --4-y-position: 15%;
        --5-x-position: 15%;
        --5-y-position: 85%;
    }
}