.uxui-header-title{
    font-size: 123px;
    font-weight:500;
    margin-bottom:var(--text-margin);
    line-height:var(--line-height-title);
}
.phone-mockup-img-wrapper{
    position:relative;
    z-index:0;
    margin-top: -28%;
    margin-left: -18%;
    margin-bottom: -10%;
}
.uxui-page-wrapper{
    background-color:black;
    color:#e3f0d7;
    overflow:hidden;
}
.uxui-platform-offer-wrap{
    display: flex;
    flex-direction: column;
}
.uxui-platform{
}
.uxui-platform-offer-icon{
    width: 6rem;
    margin-right: 4%;
    height: 6rem;
    border: 3px solid #343434;
    border-radius: 40px;
    padding: 3%;
    background: #171717;
    align-content: center;
    display: flex;
    justify-content: center;
    align-items: center;
}
.uxui-platform-offer{display: flex;flex-direction: row;align-content: center;align-items: center;padding: 2% 2%;background: #000000;border-radius: 58px;border: 4px solid #484e41;margin: 2% 0%;box-shadow: 10px 10px 0px #484e414d;}
.uxui-platform-offer-title{
    font-size:var(--text-size-desc);
    font-weight: 500;
}
.uxui-block-wrapper{
    margin-bottom:7%;
    position: relative;
    z-index: 1;
}
.uxui-creep-blurb{
    position:relative;
    z-index:1;
    background: rgb(171 23 0 / 46%);
    padding: 6% 7%;
    border: 3px solid #ff2100;
    border-radius: 80px 80px 80px 20px;
    margin-bottom: -8%;
}
.scope-creep{
    color: rgba(185, 255, 118, 1);
}
.uxui-creep-bg{
    color:white;
    width: auto;
    height: 850px;
    background: linear-gradient(45deg, rgb(255 34 0 / 0%), rgb(171 23 0 / 73%));
    margin-left: var(--block-margin-l);
    margin-right: 7%;
    margin-top: -88%;
    border-radius: 0px 400px 80px 80px;
}
.uxui-mockup-title{
    font-size:var(--text-size-title);
    font-weight:var(--font-weight-title)
}
.uxui-mockup-subtitle{
    padding-top:var(--text-margin);
    font-size:var(--text-size-subtitle);
    font-weight:500;
    line-height:var(--line-height-title);
    color: #94a69e;
    padding-bottom:var(--text-margin);
}
.uxui-creep-blurb-wrapper{
    height: auto;
    width: 100%;
    background-size: 100% auto;
    padding-top: 0;
    margin-top: 0;
}
/*.uxui-phone-mockup-wrapper{
	background: url('https://a3x.co/wp-content/uploads/2025/08/uxui-iphone-bg.svg') no-repeat center/contain;
	height:auto;
	width:100%;
	padding-top:25%;
	background-size: 100% auto;
}*/
.uxui-platform-icon-wrapper{
    display: flex;
    height: 8rem;
    width: 100%;
    overflow: visible;
    position: absolute;
    z-index: 1;
    justify-content: flex-end;
    top: 26%;
    right: 7%;
}
.uxui-platform{
    height: 8rem;
    width: 8rem;
    will-change: transform, opacity;
}
.uxui-platform-icon{

}
.phone-mockup-img{
    display:flex;
    justify-content:flex-end;
    width:auto;
    margin-bottom: 18%;
    transform: scale(1.8);
    margin-right: 29%;
    position: relative;
    z-index: 0;
    margin-top: 30%;
}
.phone-mockup-sep{
    margin-left: 0;
    margin-right: auto;
    width: 20%;
    margin-top: 7%;
    margin-bottom: 7%;
    border: none;
    background-color: red;
    height: 8px;
}

#scroll-sequence {
    width: 2070px;
    height: auto;
    object-fit: contain;
    will-change: transform;
    transform: translate(-7%, -15%) scale(1.15);
    transform-origin: center;
    overflow:visible;
    pointer-events: none;
    touch-action: none;
}

.uxui-icon-blurb-wrapper{
    display:flex;
    flex-direction: row;
    font-size: var(--text-size-desc);
    border-radius: 80px;
}

.uxui-icon-blurb-wrapper{
    display: flex;
    flex-direction: column;
}

.uxui-icon-blurb-con{

}

.uxui-icon-blurb-img-wrapper{

}

/* your existing styles */
.uxui-icon-blurb-text{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    width: 100%;
    font-size: var(--text-size-subtitle);
    font-weight: var(--font-weight-subtitle);
}
.uxui-icon-blurb-num{
    font-size: 5.5rem;
    padding: 4% 4%;
    background: #000000;
    margin-top: 5%;
    border-radius: 44px;
    border: 4px solid #434242;
    color: rgba(185, 255, 118, 1);
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
}
.uxui-icon-blurb-counter-text{

}
.uxui-icon-blurb-counter{
    font-size: 5.5rem;
    padding: 0% 2%;
    background: #182222;
    border-radius: 20px;
    color: rgba(185, 255, 118, 1);
    margin-right: 3%;
}

.icon-styles-section-wrapper{
    margin-bottom: 5%;
}

@media (min-width: 1024px){
    .uxui-header-title{
        font-size: 123px;
        font-weight:500;
        margin-bottom:var(--text-margin);
        line-height:var(--line-height-title);
    }
    .phone-mockup-img-wrapper{
        position:relative;
        z-index:0;
        margin-top: 0;
        margin-left: 0;
        margin-bottom: 0;
        display: flex;
        flex-direction: column;
        align-content: center;
        align-items: center;
    }
    .uxui-page-wrapper{
        background-color:black;
        color:#e3f0d7;
        overflow:hidden;
    }
    .uxui-platform-offer-wrap{
        display: flex;
        flex-direction: column;
        width: 50%;
    }
    .uxui-platform{
    }
    .uxui-platform-offer-icon{
        width: 4rem;
        margin-right: 2rem;
        height: 4rem;
        border: 3px solid #343434;
        border-radius: 40px;
        padding: 3%;
        background: #171717;
        align-content: center;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .uxui-platform-offer{display: flex;flex-direction: row;align-content: center;align-items: center;padding: 3%;background: #000000;border-radius: 58px;border: 4px solid #484e41;margin: 2% 0%;box-shadow: 10px 10px 0px #484e414d;}
    .uxui-platform-offer-title{
        font-size: 2rem;
        font-weight: 500;
    }
    .uxui-block-wrapper{
        margin-bottom: 5rem;
        position: relative;
        z-index: 1;
        margin-top: 0;
    }
    .uxui-creep-blurb{
        position:relative;
        z-index:1;
        background: rgb(171 23 0 / 46%);
        padding: 6% 7%;
        border: 3px solid #ff2100;
        border-radius: 80px 80px 80px 20px;
        margin-bottom: -8%;
    }
    .scope-creep{
        color: rgba(185, 255, 118, 1);
    }
    .uxui-creep-bg{
        color:white;
        width: auto;
        height: 850px;
        background: linear-gradient(45deg, rgb(255 34 0 / 0%), rgb(171 23 0 / 73%));
        margin-left: var(--block-margin-l);
        margin-right: 7%;
        margin-top: -88%;
        border-radius: 0px 400px 80px 80px;
    }
    .uxui-mockup-title{
        font-size:var(--text-size-title);
        font-weight:var(--font-weight-title)
    }
    .uxui-mockup-subtitle{
        padding-top:var(--text-margin);
        font-size:var(--text-size-subtitle);
        font-weight:500;
        line-height:var(--line-height-title);
        color: #94a69e;
        padding-bottom:var(--text-margin);
    }
    .uxui-creep-blurb-wrapper{
        height: auto;
        width: 115%;
        background-size: 100% auto;
        padding-top: 0;
        margin-top: 0;
    }
    /*.uxui-phone-mockup-wrapper{
        background: url('https://a3x.co/wp-content/uploads/2025/08/uxui-iphone-bg.svg') no-repeat center/contain;
        height:auto;
        width:100%;
        padding-top:25%;
        background-size: 100% auto;
    }*/
    .uxui-platform-icon-wrapper{
        display: flex;
        height: 8rem;
        width: 100%;
        overflow: visible;
        position: absolute;
        z-index: 1;
        justify-content: flex-end;
        top: 0;
        right: 0;
    }
    .uxui-platform{
        height: 8rem;
        width: 8rem;
        will-change: transform, opacity;
    }
    .uxui-platform-icon{
        width: 4rem !important;
        height: 4rem !important;
    }
    .phone-mockup-img{
        display:flex;
        justify-content:flex-end;
        width:auto;
        margin-bottom: 18%;
        transform: scale(1.8);
        margin-right: 29%;
        position: relative;
        z-index: 0;
        margin-top: 30%;
    }
    .phone-mockup-sep{
        margin-left: 0;
        margin-right: auto;
        width: 20%;
        margin-top: 7%;
        margin-bottom: 7%;
        border: none;
        background-color: red;
        height: 8px;
    }

    #scroll-sequence {
        width: 2070px;
        height: auto;
        object-fit: contain;
        will-change: transform;
        transform: translate(-7%, -15%) scale(1.15);
        transform-origin: center;
        overflow:visible;
        pointer-events: none;
        touch-action: none;
    }

    .uxui-icon-blurb-wrapper{
        display:flex;
        flex-direction: row;
        font-size: var(--text-size-desc);
        border-radius: 80px;
    }

    .uxui-icon-blurb-wrapper{
        display: flex;
        flex-direction: column;
        margin: 0 0 0 7%;
        width: 50%;
    }

    .uxui-icon-blurb-wrapper.tblock {}

    .uxui-icon-blurb-con{

    }

    .uxui-icon-blurb-img-wrapper{

    }

    /* your existing styles */
    .uxui-icon-blurb-text{
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        width: 100%;
        font-size: var(--text-size-subtitle);
        font-weight: var(--font-weight-subtitle);
        align-content: center;
        align-items: center;
    }
    .uxui-icon-blurb-num{
        font-size: 3rem;
        padding: 4% 4%;
        background: #000000;
        margin-top: 5%;
        border-radius: 44px;
        border: 4px solid #434242;
        color: rgba(185, 255, 118, 1);
        display: flex;
        flex-direction: row;
        align-content: center;
        justify-content: flex-start;
        align-items: center;
        width: 100%;
    }
    .uxui-icon-blurb-counter-text{

    }
    .uxui-icon-blurb-counter{
        font-size: 5.5rem;
        padding: 0% 2%;
        background: #182222;
        border-radius: 20px;
        color: rgba(185, 255, 118, 1);
        margin-right: 3%;
    }

    .icon-styles-section-wrapper{
        margin-bottom: 5%;
    }
    .phone-mockup-img-wrapper video {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain; /* or 'contain' depending on what you want */
        max-width: 100%;
        max-height: 100%;
    }
    .uxui-phone-vid{
        width: 38vw;
    }

    .scope-creep-width{
        width:44%;
    }
}