/* Anim - CSS - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.element {
    position: relative;
    left: 0;
    opacity: 1;
    transform: scale(1);
    transition: ease 2s left, ease 2s opacity, ease 2s transform;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.anim-scale {
    transform: scale(0);
}

.anim-left {
    left: -1200px;
}

.anim-right {
    left: 1200px;
}

.anim-fade {
    opacity: 0;
}

.anim-delay-1 {
    transition-delay: 0.5s;
}

.anim-delay-2 {
    transition-delay: 1s;
}

.anim-delay-3 {
    transition-delay: 1.5s;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/*
.workspace
{
    overflow-x: hidden;
}    
*/

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.custom-shape-divider-top-1757341499 {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.custom-shape-divider-top-1757341499 svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 76px;
}

.custom-shape-divider-top-1757341499 .shape-fill {
    fill: #FA7B3F;
}

.custom-shape-divider-bottom-1757341542 {
    position: relative;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
}

.custom-shape-divider-bottom-1757341542 svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 76px;
}

.custom-shape-divider-bottom-1757341542 .shape-fill {
    fill: #FA7B3F;
}

/* HTML: <div class="wiggly-box"></div> */
.wiggly-box {
    --s: 20px;
    /* control the size of the wave */
    --w: 400px;
    /* preferred image width */

    width: round(var(--w), 4*var(--s));
    aspect-ratio: 1;
    border: calc(2*var(--s)) solid #0000;
    padding: calc(3*var(--s)/2);
    box-sizing: border-box;
    background: #4ea9cb;
    mask:
        conic-gradient(#000 0 0) no-repeat 50%/calc(100% - 6*var(--s)) calc(100% - 6*var(--s)),
        radial-gradient(var(--s), #000 100%, #0000 calc(100% + 1px)) 0 0/calc(4*var(--s)) calc(4*var(--s)),
        radial-gradient(var(--s), #0000 calc(100% - 1px), #000) var(--s) var(--s)/calc(2*var(--s)) calc(2*var(--s)) padding-box;
        align-content: center;

}

.butty {
    all: unset;
}

.butty {
    position: relative;
    display: inline-flex;
    height: 3.5rem;
    align-items: center;
    border-radius: 9999px;
    padding-left: 2rem;
    padding-right: 2rem;
    font-family: Segoe UI;
    font-size: 1.2rem;
    font-weight: 640;
    color: #2e6b82;
    letter-spacing: -0.06em;
}

.butty-item {
    background-color: #d6f6ff;
    color: #2e6b82;
}

.butty-item .button-bg {
    border-color: rgb(253, 167, 54);
    background-color: rgb(253, 167, 54);
}

.butty-inner,
.butty-inner-hover,
.butty-inner-static {
    pointer-events: none;
    display: block;
}

.butty-inner {
    position: relative;
}

.butty-inner-hover {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transform: translateY(70%);
}

.butty-bg {
    overflow: hidden;
    border-radius: 2rem;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: scale(1);
    transition: transform 1.8s cubic-bezier(0.19, 1, 0.22, 1);
}

.butty-bg,
.butty-bg-layer,
.butty-bg-layers {
    display: block;
}

.butty-bg-layers {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    top: -60%;
    aspect-ratio: 1 / 1;
    width: max(200%, 10rem);
}

.butty-bg-layer {
    border-radius: 9999px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: scale(0);
}

.butty-bg-layer.-purple {
    background-color: rgb(250, 123, 63);
}

.butty-bg-layer.-turquoise {
    background-color: rgb(253, 167, 54);
}

.butty-bg-layer.-yellow {
    --tw-bg-opacity: 1;
    background-color: rgb(123, 187, 103);
}

.butty:hover .butty-inner-static {
    opacity: 0;
    transform: translateY(-70%);
    transition: transform 1.4s cubic-bezier(0.19, 1, 0.22, 1),
        opacity 0.3s linear;
}

.butty:hover .butty-inner-hover {
    opacity: 1;
    transform: translateY(0);
    transition: transform 1.4s cubic-bezier(0.19, 1, 0.22, 1),
        opacity 1.4s cubic-bezier(0.19, 1, 0.22, 1);
}

.butty:hover .butty-bg-layer {
    transition: transform 1.3s cubic-bezier(0.19, 1, 0.22, 1),
        opacity 0.3s linear;
}

.butty:hover .butty-bg-layer-1 {
    transform: scale(1);
}

.butty:hover .butty-bg-layer-2 {
    transition-delay: 0.1s;
    transform: scale(1);
}

.butty:hover .butty-bg-layer-3 {
    transition-delay: 0.2s;
    transform: scale(1);
}