.sticky-on header {
    padding: calc((var(--global-space)) * 0.5);
    transition-delay: 0.3s;
    
}
.sticky-on .arrow {
    /* left: calc((var(--global-space)) * 0.5);
    bottom: calc((var(--global-space)) * 0.5); */
    opacity: 0;
    transition-delay: 0s;
    pointer-events: none;
}
.sticky-on .since {
    /* right: calc((var(--global-space)) * 0.5);
    bottom: calc((var(--global-space)) * 0.5); */
    opacity: 0;
    transition-delay: 0s;
    pointer-events: none;
}
.sticky-on .circle-div {
    top: calc(100% - (var(--global-space)) * 0.5);
    transform: translate(0, -100%) scale(0.5);
    right: calc((var(--global-space)) * 0.5);
    transform-origin: bottom right;
    transition-delay: 0s;
}




.sticky-on .main-logo p{
    opacity: 0;
    transition-delay: 0s;
    pointer-events: none;
}
.sticky-on .main-logo p .stroke-text{
    color: transparent;
    -webkit-text-stroke: 1px white;
    text-stroke: 1px white;
}

.sticky-on .main-logo svg{
    opacity: 1;
    transition-delay: 0.3s;
}
#main-nav ul li:hover{
    cursor: pointer!important;
}
.sticky-on #main-nav ul li .huge-spacing{
    letter-spacing:1rem;
    transition-delay: 0.3s;
}
.sticky-on #main-nav ul li:first-child,
#main-nav ul li:hover:first-child{
}

.sticky-on #main-nav ul li:last-child,
#main-nav ul li:hover:last-child{
    margin-right: 0rem;
}

.sticky-on #main-nav ul li .huge-spacing,
#main-nav ul li:hover .huge-spacing{
    transition-delay: 0.4s;
}
.sticky-on .repeat-text:nth-of-type(2),
li:hover .repeat-text:nth-of-type(2){
    transition-delay: 0.4s;
}
.sticky-on .repeat-text:nth-of-type(3),
li:hover .repeat-text:nth-of-type(3){
    transition-delay: 0.3s;
}
.sticky-on .repeat-text:nth-of-type(4),
li:hover .repeat-text:nth-of-type(4){
    transition-delay: 0.2s;
}
.sticky-on .repeat-text:nth-of-type(5),
li:hover .repeat-text:nth-of-type(5){
    transition-delay: 0.1s;
}

.sticky-on li > * .repeat-text,
li:hover > * .repeat-text {
    transform: translate(-50%, 0%);
    opacity: 0;
    top : 0;
} 
.sticky-on:not(.footer-on) .repeat-arrow svg {
    transform: translate(0%, 0%);
    opacity: 0;
}
.arrow:hover .repeat-arrow svg,
.contact-arrow:hover .repeat-arrow svg {
    transform: translate(1rem, 1rem);
    opacity: 0;
}
.arrow:hover > div > svg{
    transform: translate(1rem, 1rem);
}
/* .sticky-on .arrow svg {
    width: 30px;
    height: 30px;
} */