.hero {
    position: relative;
    width: 100%;
    height: 100svh;
    padding: 8rem 5rem;
    background-color: #c1c5c9;
    overflow: hidden;
    pointer-events: none
}

@media screen and (max-width: 991px) {
    .hero {
        padding: min(5rem, 5vh) min(2rem, 2vh)
    }
}

@media screen and (min-width: 992px) and (orientation: portrait) {
    .hero {
        padding: min(5rem, 5vh) min(2rem, 2vh)
    }
}

@media screen and (max-width: 991px) and (orientation: landscape) {
    .hero {
        padding: min(5rem, 5vh) 3.2rem !important
    }
}

.hero .secuence-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: -2;
    display: block;
    pointer-events: none
}

@media screen and (max-width: 991px) and (orientation: landscape) {
    .hero .secuence-canvas {
        height: 100%;
        width: 100%;
        top: 0
    }
}

.hero .hero__layer-wrapper {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
    z-index: 0
}

.hero .hero__layer-wrapper .hero__layer-landscape {
    display: none
}

@media screen and (orientation: landscape) {
    .hero .hero__layer-wrapper .hero__layer-landscape {
        display: block
    }
}

.hero .hero__layer-wrapper .hero__layer-mobile {
    display: none
}

@media screen and (orientation: portrait) {
    .hero .hero__layer-wrapper .hero__layer-mobile {
        display: block
    }
}

.hero .hero__ellipse-center {
    position: absolute;
    z-index: 0;
    width: max(51.8rem, 49vh);
    height: max(51.8rem, 49vh);
    border-radius: 51.8rem;
    background: #ff8400;
    filter: blur(120px);
    -webkit-filter: blur(120px);
    mix-blend-mode: overlay;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    will-change: transform;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none
}

@media screen and (max-width: 991px) {
    .hero .hero__ellipse-center {
        width: min(34rem, 34vh);
        height: min(34rem, 34vh);
        top: 43.5%;
        z-index: 1;
        background: #ff8200;
        filter: blur(40px);
        -webkit-filter: blur(40px)
    }
}

@media screen and (min-width: 992px) and (orientation: portrait) {
    .hero .hero__ellipse-center {
        width: min(34rem, 34vh);
        height: min(34rem, 34vh);
        top: 43.5%;
        z-index: 1;
        background: #ff8200;
        filter: blur(40px);
        -webkit-filter: blur(40px)
    }
}

@media screen and (min-width: 482px) and (max-width: 991px) {
    .hero .hero__ellipse-center {
        width: min(50rem, 50vh);
        height: min(50rem, 50vh);
        top: 40%
    }
}

.hero .hero__ellipse-gray-top {
    display: none;
    position: absolute;
    width: 81.3rem;
    background: linear-gradient(0deg, #ccced0 40.21%, #e0e1e2 75.15%, #fff0 98.78%);
    top: 0;
    left: 50%;
    transform: translate(-50%);
    mask-image: linear-gradient(black 70%, transparent);
    -webkit-mask-image: linear-gradient(black 70%, transparent);
    height: 12.3%;
    z-index: -1
}

@media screen and (orientation: portrait) {
    .hero .hero__ellipse-gray-top {
        display: none
    }
}

.hero .hero__ellipse-gray-bottom {
    display: none
}

@media screen and (orientation: portrait) {
    .hero .hero__ellipse-gray-bottom {
        display: block;
        position: absolute;
        width: 81.3rem;
        height: 31vh;
        background: linear-gradient(0deg, #ccced0 40.21%, #e0e1e2 75.15%, #fff0 98.78%);
        bottom: 0;
        left: 50%;
        transform: translate(-50%);
        mask-image: linear-gradient(black 70%, transparent);
        -webkit-mask-image: linear-gradient(black 70%, transparent);
        border: 1px solid red;
        display: none
    }
}

@media screen and (min-width: 482px) and (max-width: 991px) {
    .hero .hero__ellipse-gray-bottom {
        height: 32.3%
    }
}

.hero .hero__ellipse-white-bottom {
    position: absolute;
    bottom: 0rem;
    left: 50%;
    transform: translate(-50%);
    background: #fff;
    mask: linear-gradient(transparent 40%, black);
    -webkit-mask: linear-gradient(transparent 40%, black);
    z-index: 0;
    width: 100%;
    height: 20rem
}

.herovid {
    position: absolute;
    top: 49%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
    height: 75%;
    width: 49%;
}

@media screen and (max-width: 991px) {
    .hero .hero__ellipse-white-bottom {
        width: 221.6rem;
        height: 10rem
    }
}

@media screen and (min-width: 992px) and (orientation: portrait) {
    .hero .hero__ellipse-white-bottom {
        width: 221.6rem;
        height: 10rem
    }
}

.hero .hero-flex {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
    height: 100%
}

@media screen and (max-width: 991px) {
    .hero .hero-flex {
        height: 100%
    }
}

@media screen and (min-width: 992px) and (orientation: portrait) {
    .hero .hero-flex {
        height: 100%
    }
}

.hero .hero-flex__left {
    display: grid;
    gap: 2.8rem;
    max-width: min(82.4rem, 82.4vh);
    pointer-events: all
}

@media screen and (max-width: 991px) {
    .hero .hero-flex__left {
        max-width: 100%;
        gap: 1.4rem;
        pointer-events: none
    }
}

@media screen and (min-width: 992px) and (orientation: portrait) {
    .hero .hero-flex__left {
        max-width: 100%;
        gap: 1.4rem;
        pointer-events: none
    }
}

.hero .hero-flex__left-heading h1,
.hero .hero-flex__left-heading h2 {
    color: #101820;
    font-family: Orlean;
    font-size: min(6.5rem, 6.5vh);
    font-weight: 500;
    line-height: .8;
    letter-spacing: 1.95px
}

@media screen and (max-width: 991px) {

    .hero .hero-flex__left-heading h1,
    .hero .hero-flex__left-heading h2 {
        font-size: 3rem;
        letter-spacing: .9px
    }
}

@media screen and (min-width: 992px) and (orientation: portrait) {

    .hero .hero-flex__left-heading h1,
    .hero .hero-flex__left-heading h2 {
        font-size: 3rem;
        letter-spacing: .9px
    }
}

@media screen and (min-width: 482px) and (max-width: 991px) {

    .hero .hero-flex__left-heading h1,
    .hero .hero-flex__left-heading h2 {
        font-size: 4rem;
        letter-spacing: .9px
    }
}

@media screen and (max-width: 991px) and (orientation: landscape) {

    .hero .hero-flex__left-heading h1,
    .hero .hero-flex__left-heading h2 {
        font-size: 2rem
    }
}

.hero .hero-flex__left-heading h2 {
    font-weight: 400;
    margin-top: 1.2rem
}

@media screen and (max-width: 991px) {
    .hero .hero-flex__left-heading h2 {
        margin-top: .4rem
    }
}

@media screen and (min-width: 992px) and (orientation: portrait) {
    .hero .hero-flex__left-heading h2 {
        margin-top: .4rem
    }
}

.hero .hero-flex__left p {
    color: #8a8f8d;
    font-family: Aventa;
    font-size: min(2.5rem, 2.5vh);
    font-weight: 400;
    line-height: 1.2;
    width: min(72rem, 72vh)
}

@media screen and (max-width: 991px) {
    .hero .hero-flex__left p {
        font-size: 1.4rem;
        width: 100%;
        letter-spacing: -.28px
    }
}

@media screen and (min-width: 992px) and (orientation: portrait) {
    .hero .hero-flex__left p {
        font-size: 1.4rem;
        width: 100%;
        letter-spacing: -.28px
    }
}

@media screen and (min-width: 482px) and (max-width: 991px) {
    .hero .hero-flex__left p {
        font-size: 1.6rem;
        width: 70%
    }
}

@media screen and (max-width: 991px) and (orientation: landscape) {
    .hero .hero-flex__left p {
        font-size: 1rem;
        width: 40%
    }
}

@media (min-width: 992px) and (orientation: portrait) {
    .hero .hero-flex__left p {
        width: 65%
    }
}

.hero .hero-flex__left .cta-1 {
    pointer-events: all
}

.hero .hero-flex__right {
    display: grid;
    gap: 2rem;
    width: 47.1rem;
    pointer-events: all
}

@media screen and (max-width: 991px) {
    .hero .hero-flex__right {
        display: none
    }
}

@media screen and (min-width: 992px) and (orientation: portrait) {
    .hero .hero-flex__right {
        display: none
    }
}

@media screen and (max-width: 768px) {
    .herovid {
        height: 45%;
        width: 100%;
    }
}

.herobutton {
    background-color: #000;
}

.hero .hero-flex__right p {
    font-family: Aventa;
    font-size: min(2.5rem, 2.5vh);
    font-weight: 400;
    line-height: normal;
    color: #101820;
    width: 90%;
    line-height: 1.2
}

.hero .hero-flex__right p span {
    color: #8a8f8d
}

.hero .hero-flex__right__list {
    display: flex;
    gap: .6rem
}

.hero .hero-flex__right .hero-flex__right__list-item .cta-2 {
    padding: .8rem 2rem;
    border-radius: 3rem;
    border: 1.5px solid #000
}

.hero .hero-flex__right .hero-flex__right__list-item .btn-animate-chars__bg {
    box-shadow: none;
    -webkit-box-shadow: none
}

.btn-animate-chars__bg {
    background-color: #000;
}

.hero .hero-flex__right .hero-flex__right__list-item .btn__circle-wrap {
    border-radius: 3rem
}

.hero .hero-flex__right .hero-flex__right__list-item .btn-text-p {
    font-family: Aventa;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: normal
}





/* About */

.about {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background: #fff;
    overflow: hidden
}

@media screen and (max-width: 991px) {
    .about {
        min-height: 640px;
        overflow: visible;
        margin-top: 0
    }
}

@media screen and (min-width: 992px) and (orientation: portrait) {
    .about {
        min-height: 640px;
        overflow: visible;
        margin-top: 0
    }
}

@media screen and (max-width: 991px) and (orientation: landscape) {
    .about {
        min-height: 100svh
    }
}

.about .about__ellipse-globe {
    object-fit: contain;
    width: 100%
}

.about__ellipse-globe {
    opacity: 0;
    transform: scale(0.7);
    transition: all 1.2s ease;
}

.about__ellipse-globe.visible {
    opacity: 1;
    transform: scale(1);
}

@media screen and (max-width: 991px) {
    .about .about__ellipse-globe {
        object-fit: cover;
        height: 73.1rem;
        /* width: 73.1rem; */
        width: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%)
    }
}

@media screen and (min-width: 992px) and (orientation: portrait) {
    .about .about__ellipse-globe {
        object-fit: cover;
        height: 73.1rem;
        width: 73.1rem;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%)
    }
}

@media screen and (min-width: 482px) and (max-width: 991px) {
    .about .about__ellipse-globe {
        height: 100.1rem;
        width: 100.1rem
    }
}

@media screen and (max-width: 991px) and (orientation: landscape) {
    .about .about__ellipse-globe {
        height: 73.1rem;
        width: 73.1rem
    }
}

@keyframes rotate1 {
    0% {
        transform: translate(-50%, -50%) rotate(-15deg)
    }

    to {
        transform: translate(-50%, -50%) rotate(-35deg)
    }
}

@keyframes rotate2 {
    0% {
        transform: translate(-50%, -50%) rotate(165deg)
    }

    to {
        transform: translate(-50%, -50%) rotate(140deg)
    }
}

.about .about-grid {
    position: absolute;
    z-index: 1;
    display: grid;
    gap: 2.6rem;
    width: 100%;
    height: 100vh;
    place-content: center;
    place-items: center;
    top: 50%;
    transform: translateY(-50%)
}

@media screen and (max-width: 991px) {
    .about .about-grid {
        gap: 2rem;
        position: relative;
        transform: translateY(0)
    }
}

@media screen and (min-width: 992px) and (orientation: portrait) {
    .about .about-grid {
        gap: 2rem;
        position: relative;
        transform: translateY(0)
    }
}

.about .about-grid h2 {
    position: relative;
    color: #101820;
    text-align: center;
    font-family: Orlean;
    font-size: 15rem;
    font-weight: 400;
    line-height: 100%;
    letter-spacing: .45rem;
    max-width: 142.5rem;
    margin-bottom: 1rem
}

@media screen and (max-width: 991px) {
    .about .about-grid h2 {
        font-size: 4rem;
        letter-spacing: 1.2px;
        max-width: 39.5rem;
        margin-bottom: 0
    }
}

@media screen and (min-width: 992px) and (orientation: portrait) {
    .about .about-grid h2 {
        font-size: 4rem;
        letter-spacing: 1.2px;
        max-width: 39.5rem;
        margin-bottom: 0
    }
}

@media screen and (min-width: 482px) and (max-width: 991px) {
    .about .about-grid h2 {
        font-size: 6rem;
        max-width: 57rem
    }
}

@media screen and (max-width: 991px) and (orientation: landscape) {
    .about .about-grid h2 {
        font-size: 4rem;
        max-width: 40rem
    }
}

.about .about-grid h2 span {
    font-weight: 500
}

.about .about-grid p {
    position: relative;
    color: #101820;
    font-family: Aventa;
    font-size: 2.5rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-align: center;
    max-width: 100.1rem;
    line-height: 1.2
}

@media screen and (max-width: 991px) {
    .about .about-grid p {
        font-size: 1.4rem;
        max-width: 31.4rem;
        letter-spacing: -.28px
    }
}

@media screen and (min-width: 992px) and (orientation: portrait) {
    .about .about-grid p {
        font-size: 1.4rem;
        max-width: 31.4rem;
        letter-spacing: -.28px
    }
}

@media screen and (min-width: 482px) and (max-width: 991px) {
    .about .about-grid p {
        font-size: 1.6rem;
        max-width: 42rem
    }
}

@media screen and (max-width: 991px) and (orientation: landscape) {
    .about .about-grid p {
        font-size: 1.2rem
    }
}

.about .about-grid p span {
    color: #8a8f8d
}




.ideas {
    width: 100%;
    height: 100vh;
    position: relative;
    display: flex;
    justify-content: center;
    z-index: 1
}

@media screen and (max-width: 991px) {
    .ideas {
        min-height: 640px
    }
}

@media screen and (min-width: 992px) and (orientation: portrait) {
    .ideas {
        min-height: 640px
    }
}

.ideas .ideas__blur-0 {
    border-radius: 100%;
    position: absolute;
    width: 71.2rem;
    height: 71.2rem;
    background: #ffaa52;
    filter: blur(250px);
    -webkit-filter: blur(200px);
    transform: translate(-50%, -50%);
    top: 50%;
    will-change: transform;
    left: 50%
}

@media screen and (max-width: 991px) {
    .ideas .ideas__blur-0 {
        width: 37.3rem;
        height: 37.3rem;
        background: #ffab52;
        top: 45%
    }
}

@media screen and (min-width: 992px) and (orientation: portrait) {
    .ideas .ideas__blur-0 {
        width: 37.3rem;
        height: 37.3rem;
        background: #ffab52;
        top: 45%
    }
}

.ideas .ideas__blur-1 {
    position: absolute;
    top: 8%;
    left: 50%;
    transform: translate(-50%);
    width: 50rem;
    height: 45rem;
    mix-blend-mode: multiply
}

@media screen and (max-width: 991px) {
    .ideas .ideas__blur-1 {
        width: 20rem;
        height: 20rem;
        top: 22%;
        filter: blur(20px);
        -webkit-filter: blur(20px)
    }
}

@media screen and (min-width: 992px) and (orientation: portrait) {
    .ideas .ideas__blur-1 {
        width: 20rem;
        height: 20rem;
        top: 22%;
        filter: blur(20px);
        -webkit-filter: blur(20px)
    }
}

@media screen and (min-width: 482px) and (max-width: 991px) {
    .ideas .ideas__blur-1 {
        height: 40.1rem;
        width: 40.1rem;
        top: 14%
    }
}

.ideas .ideas__blur-2 {
    position: absolute;
    top: 22%;
    left: 50%;
    transform: translate(-50%);
    width: 113rem;
    height: 113rem
}

@media screen and (max-width: 991px) {
    .ideas .ideas__blur-2 {
        width: 100%;
        /* width: 59.3rem; */
        height: 59.3rem;
        top: 30%
    }
}

@media screen and (min-width: 992px) and (orientation: portrait) {
    .ideas .ideas__blur-2 {
        width: 59.3rem;
        height: 59.3rem;
        top: 30%
    }
}

@media screen and (min-width: 482px) and (max-width: 991px) {
    .ideas .ideas__blur-2 {
        height: 80.1rem;
        width: 80.1rem
    }
}

.ideas .ideas__ellipse-1 {
    position: absolute;
    border-radius: 100%;
    width: 25rem;
    height: 25rem;
    background-color: #ff8400;
    transform: translate(-50%, -150%);
    top: 55%;
    left: 50%;
    filter: blur(40px);
    -webkit-filter: blur(40px);
    will-change: transform;
    mix-blend-mode: multiply
}

@media screen and (max-width: 991px) {
    .ideas .ideas__ellipse-1 {
        width: 13.1rem;
        height: 13.1rem;
        top: 51%;
        filter: blur(25px);
        -webkit-filter: blur(25px)
    }
}

@media screen and (min-width: 992px) and (orientation: portrait) {
    .ideas .ideas__ellipse-1 {
        width: 13.1rem;
        height: 13.1rem;
        top: 51%;
        filter: blur(25px);
        -webkit-filter: blur(25px)
    }
}

.ideas .ideas__ellipse-2 {
    position: absolute;
    width: 115.9rem;
    height: 113rem;
    border-radius: 100%;
    border: 2px solid #fff;
    background: linear-gradient(180deg, #ffffff4d, #fff0 54.81%);
    -webkit-mask-image: linear-gradient(to bottom, #fff 10%, transparent 30%);
    mask-image: linear-gradient(to bottom, #fff 10%, transparent 30%);
    top: 50%;
    transform: translate(-50%, -23.5%);
    will-change: transform;
    left: 50%
}

@media screen and (max-width: 991px) {
    .ideas .ideas__ellipse-2 {
        width: 59.3rem;
        height: 59.3rem;
        top: 48%;
        backdrop-filter: blur(50px);
        -webkit-backdrop-filter: blur(50px)
    }
}

@media screen and (min-width: 992px) and (orientation: portrait) {
    .ideas .ideas__ellipse-2 {
        width: 59.3rem;
        height: 59.3rem;
        top: 48%;
        backdrop-filter: blur(50px);
        -webkit-backdrop-filter: blur(50px)
    }
}

.ideas .ideas-grid {
    position: absolute;
    display: grid;
    gap: 2.6rem;
    width: 100%;
    height: 40rem;
    place-content: center;
    place-items: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 145rem
}

@media screen and (max-width: 991px) {
    .ideas .ideas-grid {
        width: 38.2rem;
        height: 20rem;
        gap: 2rem;
        top: 48.5%
    }
}

@media screen and (min-width: 992px) and (orientation: portrait) {
    .ideas .ideas-grid {
        width: 38.2rem;
        height: 20rem;
        gap: 2rem;
        top: 48.5%
    }
}

@media screen and (min-width: 482px) and (max-width: 991px) {
    .ideas .ideas-grid {
        width: 58rem;
        top: 50.5%
    }
}

.ideas .ideas-grid h2 {
    color: #101820;
    text-align: center;
    font-family: Orlean;
    font-size: 15rem;
    font-weight: 400;
    line-height: 100%;
    letter-spacing: .45rem;
    max-width: 144.7rem;
    /* visibility: hidden */
}

@media screen and (max-width: 991px) {
    .ideas .ideas-grid h2 {
        font-size: 4rem;
        letter-spacing: 1.2px;
        max-width: 100%
    }
}

@media screen and (min-width: 992px) and (orientation: portrait) {
    .ideas .ideas-grid h2 {
        font-size: 4rem;
        letter-spacing: 1.2px;
        max-width: 100%
    }
}

@media screen and (min-width: 482px) and (max-width: 991px) {
    .ideas .ideas-grid h2 {
        font-size: 6rem
    }
}

@media screen and (max-width: 991px) and (orientation: landscape) {
    .ideas .ideas-grid h2 {
        font-size: 4rem;
        max-width: 40.7rem
    }
}

.ideas .ideas-grid h2 span {
    font-weight: 500
}

.ideas .ideas-grid p {
    color: #8a8f8d;
    font-family: Aventa;
    font-size: 2.5rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-align: center;
    max-width: 80.6rem;
    /* visibility: hidden; */
    line-height: 1.2
}

@media screen and (max-width: 991px) {
    .ideas .ideas-grid p {
        font-size: 1.4rem;
        letter-spacing: -.28px;
        max-width: 31.4rem
    }
}

@media screen and (min-width: 992px) and (orientation: portrait) {
    .ideas .ideas-grid p {
        font-size: 1.4rem;
        letter-spacing: -.28px;
        max-width: 31.4rem
    }
}

@media screen and (min-width: 482px) and (max-width: 991px) {
    .ideas .ideas-grid p {
        font-size: 1.6rem;
        max-width: 40rem
    }
}

@media screen and (max-width: 991px) and (orientation: landscape) {
    .ideas .ideas-grid p {
        font-size: 1.2rem
    }
}

.ideas .ideas-grid p span {
    color: #101820
}








.services-bg-wrapper {
    background-color: #feffff;
    position: relative;
    padding-top: min(20rem, 20vh);
    min-height: 100vh
}

@media screen and (max-width: 991px) {
    .services-bg-wrapper {
        padding-top: min(5rem, 5vh);
        min-height: fit-content
    }
}

@media screen and (min-width: 992px) and (orientation: portrait) {
    .services-bg-wrapper {
        padding-top: min(5rem, 5vh);
        min-height: fit-content
    }
}

.services-bg-wrapper .services__ellipse {
    position: absolute;
    border-radius: 100%;
    background: #ff8200;
    filter: blur(150px);
    -webkit-filter: blur(150px);
    z-index: 1
}

.services-bg-wrapper .services__ellipse-0 {
    width: 18rem;
    height: 18rem;
    top: min(20rem, 20vh);
    left: 3.4rem
}

@media screen and (max-width: 991px) {
    .services-bg-wrapper .services__ellipse-0 {
        display: none
    }
}

@media screen and (min-width: 992px) and (orientation: portrait) {
    .services-bg-wrapper .services__ellipse-0 {
        display: none
    }
}

.services-bg-wrapper .services__ellipse-1 {
    width: 24rem;
    height: 24rem;
    top: min(31rem, 31vh);
    right: -19rem
}

@media screen and (max-width: 991px) {
    .services-bg-wrapper .services__ellipse-1 {
        width: 16rem;
        height: 16rem;
        top: 6.6rem;
        right: -13.5rem
    }
}

@media screen and (min-width: 992px) and (orientation: portrait) {
    .services-bg-wrapper .services__ellipse-1 {
        width: 16rem;
        height: 16rem;
        top: 6.6rem;
        right: -13.5rem
    }
}

.services-bg-wrapper .services__ellipse-2 {
    position: absolute;
    border-radius: 100%;
    width: 18rem;
    height: 18rem;
    flex-shrink: 0;
    background-color: #ff84008b;
    filter: blur(150px);
    -webkit-filter: blur(150px);
    left: 0;
    top: min(35rem, 35vh);
    z-index: 1
}

@media screen and (max-width: 991px) {
    .services-bg-wrapper .services__ellipse-2 {
        width: 16rem;
        height: 16rem;
        top: 11rem;
        left: -12.7rem;
        z-index: 1;
        top: -5rem
    }
}

@media screen and (min-width: 992px) and (orientation: portrait) {
    .services-bg-wrapper .services__ellipse-2 {
        width: 16rem;
        height: 16rem;
        top: 11rem;
        left: -12.7rem;
        z-index: 1;
        top: -5rem
    }
}

.services-bg-wrapper .services__ellipse-3 {
    position: absolute;
    border-radius: 100%;
    width: 18rem;
    height: 18rem;
    flex-shrink: 0;
    background-color: #ff84008b;
    filter: blur(150px);
    -webkit-filter: blur(150px);
    right: -8rem;
    top: min(80rem, 80vh);
    z-index: 1
}

@media screen and (max-width: 991px) {
    .services-bg-wrapper .services__ellipse-3 {
        width: 16rem;
        height: 16rem;
        right: -11rem;
        top: auto;
        bottom: 0;
        transform: translateY(0)
    }
}

@media screen and (min-width: 992px) and (orientation: portrait) {
    .services-bg-wrapper .services__ellipse-3 {
        width: 16rem;
        height: 16rem;
        right: -11rem;
        top: auto;
        bottom: 0;
        transform: translateY(0)
    }
}

.services {
    position: absolute;
    width: 100%;
    height: fit-content;
    padding: 0 5rem;
    z-index: 1;
    top: min(20rem, 20vh)
}

@media screen and (max-width: 991px) {
    .services {
        margin-bottom: -12rem;
        top: min(10rem, 10vh);
        padding: 0rem 3rem
    }
}

@media screen and (min-width: 992px) and (orientation: portrait) {
    .services {
        margin-bottom: -12rem;
        top: min(10rem, 10vh);
        padding: 0rem 3rem
    }
}

@media screen and (min-width: 482px) and (max-width: 991px) {
    .services {
        top: min(12rem, 12vh)
    }
}

.services .services-flex {
    display: flex;
    align-items: center;
    justify-content: space-between
}

@media screen and (max-width: 991px) {
    .services .services-flex {
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        gap: 2rem
    }
}

@media screen and (min-width: 992px) and (orientation: portrait) {
    .services .services-flex {
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        gap: 2rem
    }
}

.services .services-flex .services-heading {
    color: #101820;
    font-family: Orlean;
    font-size: min(6rem, 6vh);
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    letter-spacing: 1.8px;
    width: min(58.9rem, 58.9vh)
}

@media screen and (max-width: 991px) {
    .services .services-flex .services-heading {
        width: 100%;
        font-size: 4rem;
        letter-spacing: 1.2px;
        text-align: center
    }
}

@media screen and (min-width: 992px) and (orientation: portrait) {
    .services .services-flex .services-heading {
        width: 100%;
        font-size: 4rem;
        letter-spacing: 1.2px;
        text-align: center
    }
}

@media screen and (min-width: 482px) and (max-width: 991px) {
    .services .services-flex .services-heading {
        font-size: 6rem;
        width: 58.3rem
    }
}

.services .services-flex .services-heading span {
    font-weight: 500
}

.services .services-flex .services-text {
    justify-self: end;
    color: #8a8f8d;
    font-family: Aventa;
    font-size: min(2.5rem, 2.5vh);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    width: min(49.4rem, 49.4vh);
    line-height: 1.2
}

.services .services-flex .services-text span {
    color: #334049
}

@media screen and (max-width: 991px) {
    .services .services-flex .services-text {
        margin: 0;
        font-size: 1.4rem;
        letter-spacing: -.28px;
        width: 31.4rem;
        text-align: center
    }
}

@media screen and (min-width: 992px) and (orientation: portrait) {
    .services .services-flex .services-text {
        margin: 0;
        font-size: 1.4rem;
        letter-spacing: -.28px;
        width: 31.4rem;
        text-align: center
    }
}

@media screen and (min-width: 482px) and (max-width: 991px) {
    .services .services-flex .services-text {
        width: 40.3rem;
        font-size: 1.5rem
    }
}

.services-video {
    position: relative;
    width: 100%;
    min-height: 600px;
    height: min(108rem, 100vh);
    overflow: hidden
}

@media screen and (max-width: 991px) {
    .services-video {
        min-height: 640px;
        height: 100vh;
        overflow: visible
    }
}

@media screen and (min-width: 992px) and (orientation: portrait) {
    .services-video {
        min-height: 640px;
        height: 100vh;
        overflow: visible
    }
}

.services-video .services-container {
    position: relative;
    height: 100%;
    z-index: 1
}

@media screen and (max-width: 991px) {
    .services-video .services-container {
        height: 52.6rem;
        min-height: 640px;
        top: 50%;
        transform: translateY(-50%)
    }
}

@media screen and (min-width: 992px) and (orientation: portrait) {
    .services-video .services-container {
        height: 52.6rem;
        min-height: 640px;
        top: 50%;
        transform: translateY(-50%)
    }
}

.services-video .services-container .services-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    border-radius: 6.8rem;
    padding: 2.3rem 3.4rem;
    width: fit-content;
    height: fit-content;
    max-height: 6.8rem;
    position: absolute;
    backdrop-filter: blur(8.5px);
    -webkit-backdrop-filter: blur(8.5px);
    left: 50%;
    top: 50%;
    background: #ffffff1f;
    box-shadow: 15px 19px 76.6px #0000000f
}

@media screen and (max-width: 991px) {
    .services-video .services-container .services-button {
        border-radius: 3rem;
        padding: .9rem 2.15rem;
        max-height: 3.4rem;
        gap: .8rem;
        height: 3.4rem
    }
}

@media screen and (min-width: 992px) and (orientation: portrait) {
    .services-video .services-container .services-button {
        border-radius: 3rem;
        padding: .9rem 2.15rem;
        max-height: 3.4rem;
        gap: .8rem;
        height: 3.4rem
    }
}

.services-video .services-container .services-button:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 3rem;
    background: linear-gradient(to right, #ffb263, #ffb16335, #fff0, #fff0, #ffb16335, #ffb263);
    mask: linear-gradient(rgba(255, 255, 255, .42) 0px, rgb(255, 255, 255) 0px) content-box exclude, linear-gradient(rgb(255, 255, 255) 0px, rgb(255, 255, 255) 0px);
    padding: 1px
}

.services-video .services-container .services-button svg {
    width: 2.4rem;
    height: 2.4rem
}

@media screen and (max-width: 991px) {
    .services-video .services-container .services-button svg {
        width: 1.38rem;
        height: 1.38rem
    }
}

@media screen and (min-width: 992px) and (orientation: portrait) {
    .services-video .services-container .services-button svg {
        width: 1.38rem;
        height: 1.38rem
    }
}

.services-video .services-container .services-button .services-button__text {
    color: #101820;
    font-family: Orlean;
    font-size: 3rem;
    font-weight: 400;
    line-height: 100%;
    letter-spacing: .9px
}

@media screen and (max-width: 991px) {
    .services-video .services-container .services-button .services-button__text {
        font-size: 1.2rem;
        letter-spacing: .36px;
        line-height: .8
    }
}

@media screen and (min-width: 992px) and (orientation: portrait) {
    .services-video .services-container .services-button .services-button__text {
        font-size: 1.2rem;
        letter-spacing: .36px;
        line-height: .8
    }
}

.services-video .services-container .services-button.--is-uiux {
    transform: translate(-40rem, -18rem)
}

@media screen and (max-width: 991px) {
    .services-video .services-container .services-button.--is-uiux {
        transform: translate(-18rem, -15rem)
    }
}

@media screen and (min-width: 992px) and (orientation: portrait) {
    .services-video .services-container .services-button.--is-uiux {
        transform: translate(-18rem, -15rem)
    }
}

.services-video .services-container .services-button.--is-development {
    transform: translate(17rem, -16rem)
}

.services-video .services-container .services-button.--is-development svg {
    width: 2rem;
    height: 2rem
}

@media screen and (max-width: 991px) {
    .services-video .services-container .services-button.--is-development {
        transform: translate(7rem, -13rem)
    }
}

@media screen and (min-width: 992px) and (orientation: portrait) {
    .services-video .services-container .services-button.--is-development {
        transform: translate(7rem, -13rem)
    }
}

@media screen and (max-width: 991px) {
    .services-video .services-container .services-button.--is-development svg {
        width: 1rem;
        height: 1rem
    }
}

@media screen and (min-width: 992px) and (orientation: portrait) {
    .services-video .services-container .services-button.--is-development svg {
        width: 1rem;
        height: 1rem
    }
}

.services-video .services-container .services-button.--is-branding {
    transform: translate(-40rem, 12rem)
}

@media screen and (max-width: 991px) {
    .services-video .services-container .services-button.--is-branding {
        transform: translate(-19rem, 10rem)
    }
}

@media screen and (min-width: 992px) and (orientation: portrait) {
    .services-video .services-container .services-button.--is-branding {
        transform: translate(-19rem, 10rem)
    }
}

.services-video .services-container .services-button.--is-animation {
    transform: translate(21rem, 9rem)
}

@media screen and (max-width: 991px) {
    .services-video .services-container .services-button.--is-animation {
        transform: translate(7rem, 11rem)
    }
}

@media screen and (min-width: 992px) and (orientation: portrait) {
    .services-video .services-container .services-button.--is-animation {
        transform: translate(7rem, 11rem)
    }
}

.services-video .services-container__copy {
    position: absolute;
    top: 50%;
    display: grid;
    align-items: center;
    justify-items: center;
    /* visibility: hidden; */
    opacity: 0;
    width: 100%
}

@media screen and (max-width: 991px) {
    .services-video .services-container__copy {
        gap: 1rem
    }
}

@media screen and (min-width: 992px) and (orientation: portrait) {
    .services-video .services-container__copy {
        gap: 1rem
    }
}

.services-video .services-container__copy h3 {
    color: #101820;
    text-align: center;
    font-family: Orlean;
    font-size: 10rem;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    letter-spacing: .3rem;
    width: 98.8rem
}

@media screen and (max-width: 991px) {
    .services-video .services-container__copy h3 {
        font-size: 4rem;
        letter-spacing: 1.2px;
        width: 41.9rem
    }
}

@media screen and (min-width: 992px) and (orientation: portrait) {
    .services-video .services-container__copy h3 {
        font-size: 4rem;
        letter-spacing: 1.2px;
        width: 41.9rem
    }
}

.services-video .services-container__copy h3 span {
    font-weight: 500
}

.services-video .services-container__copy p {
    color: #101820;
    text-align: center;
    font-family: Aventa;
    font-size: 2.5rem;
    font-weight: 400;
    line-height: 1.2;
    width: 72.6rem
}

@media screen and (max-width: 991px) {
    .services-video .services-container__copy p {
        font-size: 1.4rem;
        width: 35.1rem;
        letter-spacing: -.28px
    }
}

@media screen and (min-width: 992px) and (orientation: portrait) {
    .services-video .services-container__copy p {
        font-size: 1.4rem;
        width: 35.1rem;
        letter-spacing: -.28px
    }
}

.services-video .services-container__copy p span {
    color: #8a8f8d
}

.services-video video {
    position: absolute;
    object-fit: contain;
    width: min(175rem, 175vh);
    height: min(100rem, 100vh);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
}

@media screen and (max-width: 991px) {
    .services-video video {
        width: 100%;
        /* width: 85.7rem; */
        height: 52.6rem;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%)
    }
}

@media screen and (min-width: 992px) and (orientation: portrait) {
    .services-video video {
        width: 85.7rem;
        height: 52.6rem;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%)
    }
}

@media screen and (max-width: 991px) and (orientation: landscape) {
    .services-video video {
        height: 33.6rem
    }
}

@media screen and (min-width: 482px) and (max-width: 991px) {
    .services-video video {
        width: 95.7rem;
        height: 60.6rem;
        top: 52%
    }
}