#sy-hero-anim-container {
    position: absolute;
    inset: 0;
    overflow: hidden;
}
#sy-hero-text-container {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    width: 100%;
    z-index: 11000;
    /* user-select: none; */
}
#sy-hero-bg-container {
    position: absolute;
    inset: 0;
    z-index: 5000;
    overflow: hidden;
}
#sy-hero-bg-container img{
    user-drag: none;
    -webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}
#sy-hero-triang-01 {
    position: absolute;
    width: min(1500px, 90dvw);
    bottom: -20%;
    left: -35%;
    rotate: -1deg;
    opacity: 1;
    opacity: 0.25;
}
#sy-hero-triang-02 {
    position: absolute;
    width: min(1500px, 80dvw);
    top: -20%;
    right: -35%;
    rotate: -160deg;
    opacity: 0.3;
}
#sy-hero-triang-03 {
    position: absolute;
    width: min(1400px, 70dvw);
    rotate: -165deg;
    top: -20%;
    left: -30%;
    opacity: 0.2;
}
#sy-hero-triang-04 {
    position: absolute;
    width: min(1400px, 70dvw);
    rotate: -10deg;
    bottom: -20%;
    right: -35%;
    opacity: 0.3;
}
.sy-hero-tr-blur {
    filter: blur(40px);
}
#sy-hero-text-title-wrapper {
    width: 100%;
    max-width: clamp(300px, 65dvw, 850px);
}
#sy-hero-scroll-container {
    position: absolute;
    width: 100%;
    height: auto;
    bottom: 0;
    margin-bottom: 1rem;
    display: flex;
    justify-content: center;
    z-index: 12000;
}
#sy-hero-scroll-container button {
    background-color: #00000030;
    backdrop-filter: blur(3px);
    border: none;
    width: 2.5rem;
    height: 2.5rem;
    cursor: pointer;
    transform: translateY(-0rem);
    transition: transform 0.25s;
}
#sy-hero-scroll-container button:hover {
    transform: translateY(-0.5rem);
    transition: transform 0.25s;
}
#sy-hero-scroll-container button svg {
    color: var(--pallete-text-primary);
    width: 100%;
    height: 100%;
}

#sy-hero-wrapper {
    position: relative;
    z-index: 7000;
    margin-top: calc(-1 * var(--header-height));
    height: 100vh;
    max-height: 1440px;
    background-color: var(--pallete-brand-dark-700);
    /* background: radial-gradient(circle, #1b2525 0, #101312 80%); */
}

#sy-hero-text-title-wrapper h1 {
    display: inline;
    font-size: 5rem;
    font-weight: 400;
    padding: 0 0.75rem;
    color: var(--pallete-text-primary);
    font-family: "Manrope", sans-serif;
    margin: 0;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    letter-spacing: 1px;
}