.svg-clip-container {
    height: 0;
    width: 0;
}

.shape-circle {
    border-radius: 50%;
    aspect-ratio: 1;
    overflow: hidden;
}

.shape-square-rounded {
    border-radius: 0px 18px;
    aspect-ratio: 1;
}

.shape-quarter{
    border-radius: 0 100% 0 0;
    aspect-ratio: 1;
}

.shape-arch {
    -webkit-clip-path: url(#arch-clip);
            clip-path: url(#arch-clip);
    aspect-ratio: 1/1.3;
}

.shape-half-circle {
    border-radius: 50% 50% 0 0/100% 100% 0 0;
    aspect-ratio: 1/0.5;
}

.shape-oval {
    height: auto;
    aspect-ratio: 0.6;
    border-radius: 100px;
}

.shape-icon {
    -webkit-clip-path: url(#assist-icon-clip);
            clip-path: url(#assist-icon-clip);
    aspect-ratio: 1/0.95;
}

.shape-member {
    -webkit-clip-path: url(#svg-member-clip);
            clip-path: url(#svg-member-clip);
    aspect-ratio: 84/87;  
}

.shape-border {
    border-radius: 16px;
}

.hero-shape {
    z-index: 0;
}
/* Style 1 */
.shape-1.style-1 {
    display: none;
    z-index: -1;
}

.shape-2.style-1 {
    width: 4.5rem;
    top: -5rem;
    left: 0;
    z-index: -1;
}

.shape-3.style-1 {
    width: 4.5rem;
    top: -5rem;
    right: 0;
}

.shape-4.style-1 {
    width: 6.5rem;
    bottom: -5rem;
    left: 0;
    z-index: -1;
}

.shape-5.style-1 {
    width: 6.5rem;
    bottom: -5rem;
    right: 0;
    z-index: -1;
}

.shape-6.style-1 {
    width: 100%;
    bottom: -19.5rem;
    z-index: -1;
}

/* Style 2 */

.shape-1.style-2 {
    width: 65px;
    left: -3.5rem;
    top: 0;
    z-index: -1;
}
.shape-2.style-2 {
    width: 4rem;
    left: 1rem;
    bottom: 2rem;
    z-index: -1;
}
.shape-3.style-2 {
    width: 65px;
    right: 0;
    bottom: -2rem;
    z-index: -1;
}
/* Style 3 */
.shape-3.style-3 {
    width: 65px;
    right: 2rem;
    top: -8rem;
    z-index: -1;
}

.shape-2.style-3 {
    width: 4rem;
    left: -3.5rem;
    top: 95%;
    z-index: -1;
}

.shape-1.style-3 {
    width: 4rem;
    right: -3.5rem;
    top: 0;
    z-index: -1;
}

@media only screen and (min-width: 48rem) {
    .shape-1.style-3 {
        width:  6rem;
        right: -3rem;
        top: 10%;
        z-index: -1;
    }
    .hero-shape.show-mobile {
        display: none !important;
    }
    .shape-2.style-3 {
        width:  6rem;
        left: 10%;
        top: calc(100% + 6rem);
        z-index: -1;
    }
    .shape-3.style-3 {
        width: 6rem;
        right: 20%;
        top: -8rem;
        z-index: -1;
    }

    /* Style 1 */
    .shape-1.style-1 {
        display:none;
        width: 100%;
        top: -17.5rem;
        z-index: -1;
    }

    .shape-2.style-1 {
        width: 8rem;
        top: -10%;
        left: -8rem;
        z-index: -1;
    }

    .shape-3.style-1 {
        width: 8rem;
        top: -10%;
        right: -8rem;
        z-index: -1;
    }

    .shape-4.style-1 {
        width: 12rem;
        bottom: -10%;
        left: -8rem;
        z-index: -1;
    }

    .shape-5.style-1 {
        width: 12rem;
        bottom: -10%;
        right: -8rem;
        z-index: -1;
    }

    .shape-6.style-1 {
        width: 100%;
        bottom: -17.5rem;
        z-index: -1;
    }
}

@media only screen and (min-width: 62rem) {
    .shape-1.style-3 {
        width: 8rem;
        left: -4rem;
        top: 50%;
        z-index: -1;
    }
    .shape-2.style-3 {
        width: 8rem;
        left: 10%;
        top: 80%;
        z-index: -1;
    }
    .shape-3.style-3 {
        width: 107px;
        right: 100%;
        top: 20%;
        z-index: -1;
    }

    

 

/* Style 2 */
.shape-3.style-2 {
        width: 107px;
        right: -6rem;
        top: 12rem;
        z-index: -1;
    }
.shape-4.style-2 {
    width: 95px;
top: 15rem;
left: -12.5rem;
transform: rotate(90deg);
z-index: -1;
}
.shape-5.style-2 {
    width: 95px;
    top: 15rem;
    left: -5rem;
    transform: rotate(270deg);
    z-index: -1;
}

.shapes-style-2.hero-content-image .shape-2.style-2 {
    display: none;
}
}

@media only screen and (min-width: 76rem) {
   /* Style 1 */
   .shape-1.style-1 {
    display:block;
    width: 100%;
    top: -17.625rem;
    left: 0;
    z-index: -1;
}

.shape-2.style-1 {
    width: 25%;
    top: 15%;
    left: -25%;
    z-index: -1;
}

.shape-3.style-1 {
    width: 25%;
    top: 15%;
    right: -25%;
    z-index: -1;
}

.shape-4.style-1 {
    width: 37.5%;
    bottom: 15%;
    left: -25%;
    z-index: -1;
}

.shape-5.style-1 {
    width: 37.5%;
    bottom: 15%;
    right: -25%;
    z-index: -1;
}

.shape-6.style-1 {
    width: 100%;
    bottom: -12.625rem;
    left: 0;
    z-index: -1;
}
}