.logo img {
    width: 280px;
}

.hero-container::after {
    bottom: 27.5em;
}

.hero-container {
    align-items: center;
}

.hero-text {
    max-width: 700px;
    gap: 3rem;
}

.hero-text h1 {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: bold;
    line-height: 1.2;
}

.subheading,
[data-key="line1"] {
    font-size: 18px;
    color: #6b6b6b;
    font-weight: 500;
    max-width: 75%;
}

.features {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.features span {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    color: #6b6b6b;
    font-size: 1rem;
}

.features span::before,
.content-right-side span::before {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    background: url("/assets/Icon/okay.svg") no-repeat center/contain;
}

.shop-btn {
    padding: 16px 40px;
}

.hero-image {
    flex: 1 1 400px;
}

.hero-text .highlight::after {
    content: "";
    position: absolute;
    bottom: -0.5em;
    right: 5%;
    width: 4em;
    height: 1em;
    background: url(/assets/shape/ZiczackLine.svg) no-repeat center/contain;
}

/* Section Containers */
.creators-container,
.work-container,
.monetize-container,
.content-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
    position: relative;
    z-index: 1;
    margin-bottom: 200px;
}

.creators-container p,
.work-container p,
.monetize-container p {
    font-size: clamp(1rem, 4vw, 1.2rem);
}

.work-container p {
    max-width: 51%;
}

.work-items .item h1 {
    max-width: 60%;
}

.work-items .item p {
    max-width: 100%;
}

[data-key="work-subheading2"] {
    margin-bottom: 50px;
}

.work {
    margin-bottom: 310px;
    z-index: 1;
}

.work-container::before {
    content: "";
    position: absolute;
    bottom: -10em;
    right: 45%;
    width: 5em;
    height: 5em;
    z-index: -1;
    background: url(/assets/shape/starts.svg) no-repeat center / contain;
}

.work-container::after {
    content: "";
    position: absolute;
    bottom: -16em;
    right: -45px;
    width: 12em;
    height: 12em;
    z-index: -1;
    background: url(/assets/shape/shape7.svg) no-repeat center / contain;
}

[data-key="work-subheading1"]{
    position: relative;
    z-index: 1;

    &::before{
        content: "";
        position: absolute;
        top: -10em;
        left: -52%;
        width: 12em;
        height: 12em;
        z-index: -1;
        background: url(/assets/shape/shape5.svg) no-repeat center / contain;
    }

    &::after{
        content: "";
        position: absolute;
        top: -4em;
        right: -75%;
        width: 20em;
        height: 12em;
        z-index: -1;
        background: url(/assets/shape/shape18.svg) no-repeat center / contain;
    }
}

/* Creators Section */

.creators-container p {
    max-width: 30%;
    margin-bottom: 50px;
}


/* Monetize Section */


.monetize-container>h1 {
    max-width: 68%;
}

[data-key="monetize-title1"] {
    position: relative;
}

[data-key="monetize-title1"]::before {
    content: "";
    position: absolute;
    top: -2em;
    left: -20%;
    width: 3em;
    height: 3em;
    z-index: -5;
    background: url(/assets/shape/openarrow.svg) no-repeat center/contain;
}

.monetize-container p {
    max-width: 65%;
    margin-bottom: 40px;
}

.monetize-items {
    position: relative;
    z-index: 1;
    align-items: flex-start !important;
}

.monetize-items::after {
    content: "";
    position: absolute;
    bottom: -5em;
    right: 3%;
    rotate: 180deg;
    width: 7em;
    height: 7em;
    z-index: -5;
    background: url(/assets/shape/openarrow.svg) no-repeat center/contain;
}

/* Titles */
.creators-container h1,
.work-container>h1,
.monetize-container>h1,
.content-container>h1 {
    font-size: clamp(2rem, 5vw, 2.5rem);
    line-height: 1em;
}

/* Work Section */
.work-container>img,
.content-container>img {
    width: 100px !important;
}

.work-container img {
    width: 150px;
}

.work-items {
    position: relative;
    align-items: flex-start !important;
}

.work-items::after {
    content: "";
    position: absolute;
    top: -4.9em;
    width: 115%;
    rotate: 355deg;
    height: 100%;
    z-index: -5;
    background: url(/assets/shape/dotLine.svg) no-repeat center/contain;
}

[data-key="work-title1"] {
    position: relative;
}

[data-key="work-title1"]::after {
    content: "";
    position: absolute;
    bottom: .1em;
    right: -70px;
    width: 1.5em;
    height: 1.5em;
    z-index: -5;
    background: url(/assets/shape/exclamation.svg) no-repeat center/contain;
}
[data-key="work-title1"]::before {
    content: "";
    position: absolute;
    bottom: 4.1em;
    right: -174%;
    width: 10.5em;
    height: 15.5em;
    z-index: -5;
    background: url(/assets/shape/shape4.svg) no-repeat center / contain;
}

/* Image Grids */
.creator-images,
.work-items,
.monetize-items,
.content-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}

/* Creators Container Shapes */
.creators-container {
    margin-top: 150px;
    position: relative;
}

.creators-container::after {
    content: "";
    position: absolute;
    bottom: 24.5em;
    right: -8%;
    width: 30em;
    height: 22em;
    z-index: -5;
    background: url(/assets/shape/shape10.svg) no-repeat center / contain;
}

.creators-container::before {
    content: "";
    position: absolute;
    bottom: 20.5em;
    left: -10%;
    width: 30em;
    rotate: 88deg;
    height: 20em;
    z-index: -5;
    background: url(/assets/shape/shape12.svg) no-repeat center / contain;
}

.creators-container h1[data-key="creator-title2"] {
    position: relative;
    z-index: 1;
}

.creators-container h1[data-key="creator-title2"]::after {
    content: "";
    position: absolute;
    bottom: .8em;
    right: -13%;
    rotate: 24deg;
    width: 1.5em;
    height: 1.5em;
    z-index: -1;
    background: url(/assets/shape/blackcrown.svg) no-repeat center/contain;
}

/* Creator Images */
.creator-images img {
    width: 15rem;
}

.image1 {
    position: relative;
    z-index: 1;

    &::before {
        content: "";
        position: absolute;
        bottom: -2.2em;
        left: -20%;
        width: 4em;
        height: 4em;
        z-index: -1;
        background: url(/assets/shape/emptystarts.svg) no-repeat center / contain;
    }

}

.image5 {
    position: relative;
    z-index: 1;

    &::after {
        content: "";
        position: absolute;
        top: -4em;
        right: 14%;
        rotate: 44deg;
        width: 5em;
        height: 5em;
        z-index: -1;
        background: url(/assets/shape/crown5.svg) no-repeat center / contain;
    }
}

/* Items */
.item,
.monetize-item {
    flex: 1 1 250px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
}

.monetize-container{
    margin-top: 350px;
}

/* Content Section */


.content-items {
    gap: 40px;
    padding: 20px 0;
    align-items: flex-start;
}

.content-left-side {
    flex: 1 1 300px;
    max-width: 700px;
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 1;

    &::after {
        content: "";
        position: absolute;
        bottom: -7em;
        left: 60%;
        width: 7em;
        rotate: 347deg;
        transform: scaleY(-1);
        height: 7em;
        z-index: -5;
        background: url(/assets/Icon/arrow2.svg) no-repeat center / contain;
    }
}

.content-left-side::before {
    content: "";
    position: absolute;
    top: -4em;
    left: -3%;
    width: 6em;
    height: 6em;
    z-index: -5;
    background: url(/assets/shape/heart.svg) no-repeat center/contain;
}

.content-left-side img {
    max-width: 60%;
    height: auto;
}

.content-right-side {
    flex: 1 1 600px;
    max-width: 700px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    position: relative;
}

.content-right-side::before {
    content: "";
    position: absolute;
    top: 2em;
    right: -52%;
    width: 22em;
    height: 7em;
    z-index: -5;
    background: url(/assets/shape/line2.svg) no-repeat center / contain;
}

.content-right-side p {
    text-align: start;
}

.content-right-side span::before {
    margin-right: 10px;
}

.content-container {
    position: relative;
    z-index: 1;
    gap: 50px;

    &::after{
        content: "";
        position: absolute;
        bottom: -20em;
        width: 105em;
        height: 38em;
        z-index: -5;
        background: url(/assets/shape/bottombackground.svg) no-repeat center / contain;
    }
}

[data-key="content-title1"]{
    position: relative;
    z-index: 1;

    &::before{
        content: "";
        position: absolute;
        top: -8em;
        left: -90%;
        width: 15em;
        rotate: 29deg;
        height: 8em;
        z-index: -5;
        background: url(/assets/shape/shape18.svg) no-repeat center / contain;
    }
    &::after{
        content: "";
        position: absolute;
        top: -6em;
        right: -70%;
        width: 12em;
        height: 6em;
        z-index: -5;
        background: url(/assets/shape/shape16.svg) no-repeat center / contain;
    }
}


.shop-button2 {
    margin-top: 100px;
    position: relative;
    z-index: 1;

    &::before {
        content: "";
        position: absolute;
        top: -5em;
        left: 140px;
        rotate: 45deg;
        width: 6em;
        height: 6em;
        z-index: -5;
        background: url(/assets/shape/crown5.svg) no-repeat center / contain;
    }

    &::after {
        content: "";
        position: absolute;
        top: -6em;
        right: -39px;
        width: 16em;
        height: 16em;
        z-index: -5;
        background: url(/assets/shape/shape6.svg) no-repeat center / contain;
    }
}


/* Responsive */

@media (min-width: 1274px) and (max-width: 1440px) {
    
    .hero-container {
        gap: 1.5rem;
        padding: 50px 50px;
    }

    .hero-text {
        max-width: 620px;
    }

    .hero-text h1 span {
        font-size: clamp(2.5rem, 5vw, 3.1rem);
    }

    .hero-text p {
        font-size: 20px;
        max-width: 85%;
    }

    .hero-image {
        max-width: 680px;
        gap: 15px;
    }

    .banner-image::after {
        width: 20em;
        height: 20em;
        left: 100px;  /* adjust positioning */
    }
}

@media (max-width: 1273px) {
    .hero-container {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }
    .hero-text {
    align-items: center;
}
    .shop-btn{
        align-self: center;
    }
}

@media (max-width: 1024px) {
    .content-right-side::before {
        display: none;
    }

    .content-left-side {
        &::after {
            display: none;
        }
    }

    .brand-container p,
    .work-container p,
    .monetize-container p {
        max-width: 70%;
    }

    .work-items::after {
        display: none;
    }

    .creators-container::before {
        width: 15em;
    }

    .creators-container::after {
        width: 15em;
    }

    .content {
        &::after {
            height: 34%;
        }
    }
}

@media (max-width: 768px) {
    .features {
        justify-content: center;
    }

    .brand-images img {
        width: 8rem;
    }

    .work-container p,
    .monetize-container p {
        max-width: 90%;
    }

    .content-right-side,
    .partner-content-right-side {
        align-items: center;
    }

    .work-items::after {
        display: none;
    }

    .creators-container::before {
        width: 10em;
    }

    .creators-container::after {
        width: 10em;
    }

    .content-right-side p {
        text-align: center;
    }

    .content {
        &::after {
            height: 33%;
        }
    }
    .monetize::after {
    width: 10em;
    height: 10em;
}
    .monetize::before {
    left: -12%;
    width: 14em;
    height: 14em;
    }
}

@media (max-width: 480px) {

    [data-key="content-title1"] {
    &::after {
        right: -52%;
    }
}

    [data-key="content-title1"] {
    &::before {
        top: -14em;
    }
}
    [data-key="work-subheading1"] {
    &::after {
        top: 19em;
    }
}
    .creators-container::after {
        width: 10em;
        top: -16.5em;
    }
    .creators-container::before {
        bottom: -16.5em;
        left: -26%;
        width: 10em;
    }
    .creators-container p {
    max-width: 100%;
    }
    .brand-images img {
        width: 7rem;
    }

    .work-items::after {
        display: none;
    }

    .content-container .creators-container::before {
        width: 8em;
    }

    .content-container .creators-container::after {
        width: 8em;
    }

    .content-container [data-key="work-title1"]::after {
        right: -34px;
        width: 1em;
        height: 1em;
    }

    .content-right-side p {
        text-align: center;
    }

    .content {
        &::after {

            height: 35%;
        }
    }
.hero-container {
    margin-bottom: 0px;
    flex-direction: column-reverse;
    gap: 0px !important;
    padding: clamp(40px, 6vw, 50px) 15px !important;
}
.hero-container::after {
    bottom: 39.5em;
    left: -22%;
}
}