/* =========================================
   UNIVERSE VYPAAR HEADER
========================================= */

:root {
    --uv-purple: #24105f;
    --uv-purple-light: #4b24a7;
    --uv-pink: #ff174f;
    --uv-pink-light: #ff4167;
    --uv-blue: #1557a6;

    --uv-dark: #0d0b16;
    --uv-text: #24232b;
    --uv-muted: #777581;

    --uv-white: #ffffff;
    --uv-border: #eceaf1;
}

/* =========================================================
   RESET
========================================================= */

* {

    margin: 0;
    padding: 0;

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    font-family:
        "DM Sans",
        sans-serif;

    color:
        var(--uv-text);

    background:
        var(--uv-light);

    -webkit-font-smoothing:
        antialiased;

}


/* =========================================
   MAIN HEADER WRAPPER
========================================= */

.uv-header {
    position: fixed;
    top: 0;
    left: 0;

    width: 100%;

    z-index: 99999;

    background: #fff;

    transition:
        box-shadow .3s ease;
}


/* =========================================
   TOP BAR
========================================= */

.uv-topbar {
    height: 38px;

    background:
        linear-gradient(105deg,
            #1557a6 0%,
            #1557a6 28%,
            #24105f 65%,
            #1b2f67 100%);

    color: #fff;

    position: relative;

    overflow: visible;
}


.uv-topbar-inner {
    width: min(1400px, calc(100% - 70px));

    height: 100%;

    margin: auto;

    display: flex;
    align-items: center;
    justify-content: space-between;

    position: relative;
}


/* =========================================
   SOCIAL ICONS
========================================= */

.uv-top-social {
    display: flex;
    align-items: center;

    gap: 7px;
}


.uv-top-social a {
    width: 30px;
    height: 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: rgba(255, 255, 255, .12);

    color: #fff;

    text-decoration: none;

    font-size: 15px;
    font-weight: 700;

    transition:
        transform .25s ease,
        background .25s ease;
}


.uv-top-social a:hover {
    transform: translateY(-2px);

    background:
        linear-gradient(135deg,
            var(--uv-purple),
            var(--uv-pink));
}


/* =========================================
   CENTER BOUNCING BADGE
========================================= */

.uv-top-highlight {
    position: absolute;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%);

    min-width: 292px;

    height: 31px;

    padding: 0 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 9px;

    background:
        linear-gradient(100deg,
            var(--uv-pink),
            #ff3c3c);

    border: 1px solid rgba(255, 255, 255, .8);

    box-shadow:
        0 4px 14px rgba(0, 0, 0, .25);

    animation:
        uvBadgeBounce 1.5s ease-in-out infinite;
}


.uv-top-highlight span {
    color: #fff;

    font-size: 13px;
    font-weight: 800;

    white-space: nowrap;

    letter-spacing: -.1px;
}


/* BOUNCE */

@keyframes uvBadgeBounce {

    0%,
    100% {
        transform:
            translate(-50%, -50%) translateY(0);
    }

    12% {
        transform:
            translate(-50%, -50%) translateY(-4px);
    }

    24% {
        transform:
            translate(-50%, -50%) translateY(0);
    }

    32% {
        transform:
            translate(-50%, -50%) translateY(-2px);
    }

    42% {
        transform:
            translate(-50%, -50%) translateY(0);
    }

}


/* =========================================
   TOP CONTACT
========================================= */

.uv-top-contact {
    display: flex;
    align-items: center;

    gap: 22px;
}


.uv-top-contact a {
    display: flex;
    align-items: center;

    gap: 7px;

    color: #fff;

    text-decoration: none;

    font-size: 13px;
    font-weight: 600;

    white-space: nowrap;
}


.uv-contact-icon {
    font-size: 13px;
}


/* =========================================
   MAIN HEADER
========================================= */

.uv-main-header {
    height: 82px;

    background:
        rgba(255, 255, 255, .97);

    border-bottom: 1px solid rgba(36, 16, 95, .07);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    transition:
        height .3s ease,
        box-shadow .3s ease;
}


.uv-header.scrolled .uv-main-header {
    height: 74px;

    box-shadow:
        0 8px 30px rgba(20, 15, 40, .08);
}


.uv-header-inner {
    width: min(1400px, calc(100% - 70px));

    height: 100%;

    margin: auto;

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


/* =========================================
   LOGO
========================================= */

.uv-logo {
    display: flex;
    align-items: center;

    flex-shrink: 0;

    text-decoration: none;
}


.uv-logo img {
    width: 190px;
    height: auto;

    display: block;

    transition:
        transform .3s ease;
}


.uv-logo:hover img {
    transform: scale(1.025);
}


/* =========================================
   DESKTOP NAV
========================================= */

.uv-nav {
    display: flex;
    align-items: center;

    gap: 3px;

    margin-left: auto;
    margin-right: 25px;
}


.uv-nav-link {
    position: relative;

    border: 0;
    outline: none;

    background: transparent;

    padding: 30px 13px;

    font-family: inherit;

    font-size: 14px;
    font-weight: 650;

    color: var(--uv-text);

    text-decoration: none;

    cursor: pointer;

    display: inline-flex;
    align-items: center;

    gap: 5px;

    transition:
        color .25s ease;
}


.uv-nav-link::after {
    content: "";

    position: absolute;

    left: 13px;
    right: 13px;

    bottom: 19px;

    height: 2px;

    border-radius: 20px;

    background:
        linear-gradient(90deg,
            var(--uv-purple),
            var(--uv-pink));

    transform: scaleX(0);

    transition:
        transform .3s ease;
}


.uv-nav-link:hover,
.uv-nav-link.active {
    color: var(--uv-purple);
}


.uv-nav-link:hover::after,
.uv-nav-link.active::after {
    transform: scaleX(1);
}


.uv-arrow {
    font-size: 15px;

    line-height: 1;

    transition:
        transform .3s ease;
}


.uv-nav-dropdown.active .uv-arrow {
    transform: rotate(180deg);
}


/* =========================================
   SERVICES DROPDOWN
========================================= */

.uv-nav-dropdown {
    position: relative;
}


.uv-dropdown-menu {
    position: absolute;

    top: calc(100% - 4px);
    left: 50%;

    width: 1000px;

    padding: 28px;

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 22px;

    background: #fff;

    border:
        1px solid var(--uv-border);

    border-radius:
        0 0 20px 20px;

    box-shadow:
        0 25px 60px rgba(22, 14, 50, .14);

    transform:
        translate(-50%, 15px) scale(.97);

    transform-origin:
        top center;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity .25s ease,
        visibility .25s ease,
        transform .25s ease;
}


.uv-nav-dropdown:hover .uv-dropdown-menu,
.uv-nav-dropdown.active .uv-dropdown-menu {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform:
        translate(-50%, 0) scale(1);
}


.uv-service-column {
    padding: 5px 8px;
}


.uv-service-heading {
    display: flex;
    align-items: flex-start;

    gap: 11px;

    padding-bottom: 14px;
    margin-bottom: 6px;

    border-bottom:
        1px solid #f0eef4;
}


.uv-service-icon {
    width: 36px;
    height: 36px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background:
        linear-gradient(135deg,
            rgba(75, 36, 167, .10),
            rgba(255, 23, 79, .10));

    color: var(--uv-purple);

    font-size: 18px;
}


.uv-service-heading strong {
    display: block;

    color: var(--uv-text);

    font-size: 14px;
    font-weight: 750;
}


.uv-service-heading small {
    display: block;

    margin-top: 3px;

    color: var(--uv-muted);

    font-size: 10px;
}


.uv-service-column>a {
    display: block;

    padding: 7px 0;

    color: #333236;

    text-decoration: none;

    font-size: 12.5px;

    transition:
        color .2s ease,
        padding-left .2s ease;
}


.uv-service-column>a:hover {
    color: var(--uv-pink);

    padding-left: 5px;
}


/* =========================================
   SOLUTIONS DROPDOWN
========================================= */

.uv-simple-dropdown {
    position: absolute;

    top: calc(100% - 4px);
    left: 50%;

    width: 255px;

    padding: 12px;

    background: #fff;

    border: 1px solid var(--uv-border);

    border-radius:
        0 0 16px 16px;

    box-shadow:
        0 22px 50px rgba(22, 14, 50, .12);

    transform:
        translate(-50%, 15px) scale(.97);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition: .25s ease;
}


.uv-nav-dropdown:hover .uv-simple-dropdown,
.uv-nav-dropdown.active .uv-simple-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform:
        translate(-50%, 0) scale(1);
}


.uv-simple-dropdown a {
    display: flex;
    align-items: center;

    gap: 12px;

    padding: 11px 12px;

    border-radius: 9px;

    color: var(--uv-text);

    text-decoration: none;

    font-size: 13px;
    font-weight: 600;

    transition: .2s ease;
}


.uv-simple-dropdown a span {
    color: var(--uv-pink);

    font-size: 10px;
    font-weight: 800;
}


.uv-simple-dropdown a:hover {
    background: #f7f5fb;

    color: var(--uv-purple);

    padding-left: 16px;
}


/* =========================================
   HEADER CTA
========================================= */

.uv-header-cta {
    min-width: 138px;
    height: 45px;

    padding: 0 19px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 11px;

    border-radius: 8px;

    background:
        linear-gradient(135deg,
            var(--uv-purple),
            var(--uv-purple-light),
            var(--uv-pink));

    color: #fff;

    text-decoration: none;

    font-size: 13px;
    font-weight: 700;

    box-shadow:
        0 9px 25px rgba(75, 36, 167, .20);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}


.uv-header-cta:hover {
    transform: translateY(-2px);

    box-shadow:
        0 14px 32px rgba(75, 36, 167, .28);
}


.uv-header-cta i {
    font-style: normal;

    font-size: 17px;

    transition:
        transform .25s ease;
}


.uv-header-cta:hover i {
    transform:
        translate(3px, -3px);
}


/* =========================================
   MOBILE MENU BUTTON
========================================= */

.uv-menu-toggle {
    display: none;

    width: 43px;
    height: 43px;

    border:
        1px solid #e8e5ed;

    border-radius: 11px;

    background: #fff;

    cursor: pointer;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 5px;
}


.uv-menu-toggle span {
    width: 20px;
    height: 2px;

    border-radius: 20px;

    background:
        linear-gradient(90deg,
            var(--uv-purple),
            var(--uv-pink));

    transition: .3s ease;
}


.uv-menu-toggle.active span:nth-child(1) {
    transform:
        translateY(7px) rotate(45deg);
}


.uv-menu-toggle.active span:nth-child(2) {
    opacity: 0;
}


.uv-menu-toggle.active span:nth-child(3) {
    transform:
        translateY(-7px) rotate(-45deg);
}


/* =========================================
   MOBILE MENU
========================================= */

.uv-mobile-menu {
    display: none;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1200px) {

    .uv-topbar-inner,
    .uv-header-inner {
        width:
            min(100% - 40px,
                1150px);
    }


    .uv-nav {
        gap: 0;

        margin-right: 14px;
    }


    .uv-nav-link {
        padding-left: 8px;
        padding-right: 8px;

        font-size: 12.5px;
    }


    .uv-nav-link::after {
        left: 8px;
        right: 8px;
    }


    .uv-dropdown-menu {
        width: 900px;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 980px) {

    /* Hide desktop contact strip details */
    .uv-topbar {
        height: 30px;
    }


    .uv-topbar-inner {
        width: calc(100% - 24px);

        justify-content: center;
    }


    .uv-top-social,
    .uv-top-contact {
        display: none;
    }


    .uv-top-highlight {
        min-width: auto;

        width: auto;

        height: 24px;

        padding: 0 13px;

        border-radius: 7px;
    }


    .uv-top-highlight span {
        font-size: 8px;
    }


    /* Main Header */

    .uv-main-header {
        height: 70px;
    }


    .uv-header.scrolled .uv-main-header {
        height: 70px;
    }


    .uv-header-inner {
        width:
            calc(100% - 24px);
    }


    .uv-logo img {
        width: 148px;
    }


    .uv-nav,
    .uv-header-cta {
        display: none;
    }


    .uv-menu-toggle {
        display: flex;
    }


    /* MOBILE MENU */

    .uv-mobile-menu {

        display: block;

        position: fixed;

        left: 0;

        top: 100px;

        width: 100%;

        height:
            calc(100vh - 100px);

        max-height:
            calc(100vh - 100px);

        overflow-x: hidden;

        overflow-y: auto;

        overscroll-behavior:
            contain;

        -webkit-overflow-scrolling:
            touch;

        background: #fff;

        border-top:
            1px solid #eeeaf2;

        box-shadow:
            0 25px 50px rgba(20, 15, 40, .12);

        opacity: 0;

        visibility: hidden;

        transform:
            translateY(-10px);

        pointer-events: none;

        transition:
            opacity .28s ease,
            visibility .28s ease,
            transform .28s ease;
    }


    .uv-mobile-menu.active {

        opacity: 1;

        visibility: visible;

        pointer-events: auto;

        transform:
            translateY(0);
    }


    .uv-mobile-inner {

        width:
            calc(100% - 22px);

        margin: auto;

        padding:
            4px 0 30px;
    }


    /* IMPORTANT:
       Every menu item starts normally
       and menu itself is reset to top by JS.
    */

    .uv-mobile-link,
    .uv-mobile-dropdown-btn {

        width: 100%;

        min-height: 53px;

        display: flex;

        align-items: center;

        justify-content: space-between;

        border: 0;

        border-bottom:
            1px solid #ece9f0;

        background: transparent;

        color: var(--uv-text);

        text-decoration: none;

        font-family: inherit;

        font-size: 14.5px;

        font-weight: 650;

        cursor: pointer;

        box-sizing: border-box;
    }


    .uv-mobile-dropdown-btn {
        text-align: left;
    }


    .uv-mobile-plus {

        font-size: 21px;

        line-height: 1;

        color: var(--uv-purple);

        transition:
            transform .25s ease;
    }


    .uv-mobile-dropdown.active .uv-mobile-plus {

        transform:
            rotate(45deg);
    }


    /* MOBILE SUBMENU */

    .uv-mobile-submenu {

        display: grid;

        grid-template-rows:
            0fr;

        overflow: hidden;

        transition:
            grid-template-rows .35s ease;
    }


    .uv-mobile-dropdown.active .uv-mobile-submenu {

        grid-template-rows:
            1fr;
    }


    .uv-mobile-submenu-inner {

        min-height: 0;

        overflow: hidden;

        padding:
            0 10px;
    }


    /* SERVICE GROUP */

    .uv-mobile-service-group {

        padding:
            14px 0 7px;
    }


    .uv-mobile-service-group strong {

        display: block;

        margin-bottom: 5px;

        color: var(--uv-purple);

        font-size: 13px;

        font-weight: 750;
    }


    .uv-mobile-service-group a {

        display: block;

        padding: 7px 0;

        color: #777481;

        text-decoration: none;

        font-size: 13px;

        line-height: 1.3;
    }


    .uv-mobile-service-group a:hover {
        color: var(--uv-pink);
    }


    /* SIMPLE MOBILE DROPDOWN */

    .uv-mobile-simple .uv-mobile-submenu-inner {

        padding:
            5px 10px 12px;
    }


    .uv-mobile-simple a {

        display: block;

        padding: 8px 0;

        color: #777481;

        text-decoration: none;

        font-size: 13px;
    }


    /* MOBILE CTA */

    .uv-mobile-cta {

        width: 100%;

        height: 50px;

        margin-top: 20px;

        display: flex;

        align-items: center;

        justify-content: center;

        gap: 10px;

        border-radius: 9px;

        background:
            linear-gradient(135deg,
                var(--uv-purple),
                var(--uv-purple-light),
                var(--uv-pink));

        color: #fff;

        text-decoration: none;

        font-size: 14px;

        font-weight: 700;

        box-shadow:
            0 8px 22px rgba(75, 36, 167, .20);
    }


    .uv-mobile-cta b {

        font-size: 17px;

        font-weight: 600;
    }


    /* LOCK BACKGROUND WHEN MENU OPEN */

    body.uv-menu-open {
        overflow: hidden;
    }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

    .uv-topbar {
        height: 28px;
    }


    .uv-top-highlight {
        height: 22px;

        padding:
            0 10px;
    }


    .uv-top-highlight span {
        font-size: 10px;
    }


    .uv-main-header {
        height: 68px;
    }


    .uv-header.scrolled .uv-main-header {
        height: 68px;
    }


    .uv-mobile-menu {

        top: 96px;

        height:
            calc(100vh - 96px);

        max-height:
            calc(100vh - 96px);
    }


    .uv-logo img {
        width: 143px;
    }


    .uv-menu-toggle {
        width: 42px;
        height: 42px;
    }

}


/* =========================================
   REDUCED MOTION
========================================= */

@media (prefers-reduced-motion: reduce) {

    .uv-top-highlight {
        animation: none;
    }

    .uv-mobile-menu,
    .uv-mobile-submenu,
    .uv-nav-dropdown,
    * {
        scroll-behavior: auto !important;
    }

}

/* =========================================
   UV HERO SLIDER
========================================= */

.uv-image-hero {
    width: 100%;
    margin: 0;
    padding-top: 120px;

    position: relative;

    overflow: hidden;

    background: #fff;

    line-height: 0;
}


.uv-slider {
    position: relative;

    width: 100%;

    overflow: hidden;

    background: #fff;

    line-height: 0;
}


.uv-slides {
    display: flex;

    width: 100%;

    transform: translateX(0);

    transition:
        transform .65s cubic-bezier(.77,
            0,
            .175,
            1);
}


.uv-slide {
    flex: 0 0 100%;

    width: 100%;

    position: relative;

    overflow: hidden;

    line-height: 0;
}


.uv-slide picture {
    display: block;

    width: 100%;

    margin: 0;
    padding: 0;

    line-height: 0;
}


.uv-slide img {
    display: block;

    width: 100%;
    height: auto;

    margin: 0;
    padding: 0;

    max-width: 100%;

    object-fit: initial;

    transform: none !important;
    scale: 1 !important;

    transition: none !important;
    animation: none !important;

    user-select: none;

    -webkit-user-drag: none;
}


/* =========================================
   ARROWS
========================================= */

.uv-slider-arrows {
    position: absolute;

    right: 24px;
    bottom: 18px;

    z-index: 99999;

    display: flex;

    gap: 8px;

    pointer-events: auto;
}


.uv-slider-arrow {
    position: relative;

    width: 40px;
    height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 0;

    border-radius: 9px;

    background: rgba(20, 15, 40, .78);

    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 18px;
    font-weight: 700;

    cursor: pointer;

    z-index: 100000;

    pointer-events: auto;

    transition:
        background .2s ease,
        transform .2s ease;
}


.uv-slider-arrow:hover {
    background:
        linear-gradient(135deg,
            #24105f,
            #ff174f);

    transform: translateY(-2px);
}


.uv-slider-arrow:active {
    transform: scale(.94);
}


/* =========================================
   DOTS
========================================= */

.uv-slider-dots {
    position: absolute;

    left: 50%;
    bottom: 20px;

    transform: translateX(-50%);

    z-index: 99999;

    display: flex;

    gap: 7px;

    pointer-events: auto;
}


.uv-slider-dot {
    width: 8px;
    height: 8px;

    padding: 0;

    border: 0;

    border-radius: 50%;

    background: rgba(255, 255, 255, .75);

    cursor: pointer;

    transition:
        width .25s ease,
        background .25s ease;
}


.uv-slider-dot.active {
    width: 25px;

    border-radius: 20px;

    background:
        linear-gradient(90deg,
            #24105f,
            #ff174f);
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 980px) {

    .uv-image-hero {
        padding-top: 100px;
    }


    .uv-slider {
        width: 100%;
    }


    .uv-slide img {
        width: 100%;
        height: auto;

        transform: none !important;
        scale: 1 !important;
    }


    .uv-slider-arrows {
        right: 12px;
        bottom: 12px;

        gap: 5px;
    }


    .uv-slider-arrow {
        width: 34px;
        height: 34px;

        font-size: 15px;
    }


    .uv-slider-dots {
        left: 12px;

        bottom: 14px;

        transform: none;
    }


    .uv-slider-dot {
        width: 6px;
        height: 6px;
    }


    .uv-slider-dot.active {
        width: 20px;
    }

}


@media (max-width: 480px) {

    .uv-image-hero {
        padding-top: 96px;
    }

}

/* =========================================================
   GOOGLE GROWTH ENGINE
========================================================= */

.uv-google-engine {
    position: relative;
    width: 100%;
    min-height: 850px;
    overflow: hidden;

    background:
        radial-gradient(circle at 72% 45%,
            rgba(105, 53, 205, 0.12),
            transparent 28%),
        radial-gradient(circle at 90% 70%,
            rgba(255, 23, 79, 0.08),
            transparent 25%),
        #f8f8fb;

    color: #171522;
}


/* GRID */

.uv-ge-grid {
    position: absolute;
    inset: 0;

    opacity: .32;

    background-image:
        linear-gradient(rgba(36, 16, 95, .045) 1px,
            transparent 1px),
        linear-gradient(90deg,
            rgba(36, 16, 95, .045) 1px,
            transparent 1px);

    background-size: 70px 70px;

    mask-image:
        linear-gradient(to bottom,
            transparent,
            black 20%,
            black 80%,
            transparent);
}


/* NOISE */

.uv-ge-noise {
    position: absolute;
    inset: 0;

    opacity: .025;
    pointer-events: none;

    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}


/* =========================================================
   MAIN CONTAINER
========================================================= */

.uv-ge-container {
    position: relative;
    z-index: 2;

    width: min(1400px, calc(100% - 100px));

    min-height: 770px;

    margin: auto;

    display: grid;

    grid-template-columns:
        minmax(0, .9fr) minmax(0, 1.1fr);

    align-items: center;

    gap: 40px;
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.uv-ge-content {
    position: relative;
    z-index: 5;

    padding: 70px 0 60px;

    min-width: 0;
}


.uv-ge-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 24px;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;

    color: #4b24a7;
}


.uv-ge-eyebrow span {
    width: 9px;
    height: 9px;

    border-radius: 50%;

    background:
        linear-gradient(135deg,
            #4b24a7,
            #ff174f);

    box-shadow:
        0 0 0 6px rgba(255, 23, 79, .08);

    animation: uvGePulse 2s infinite;
}


.uv-ge-content h2 {
    margin: 0;

    max-width: 680px;

    font-size: clamp(52px, 5vw, 78px);
    line-height: .98;

    letter-spacing: -4px;

    font-weight: 800;
}


.uv-ge-content h2 strong {
    display: block;

    background:
        linear-gradient(90deg,
            #24105f,
            #6427c5,
            #ff174f);

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}


.uv-ge-description {
    max-width: 570px;

    margin: 28px 0 32px;

    color: #74727e;

    font-size: 17px;
    line-height: 1.75;
}


/* =========================================================
   SEARCH
========================================================= */

.uv-ge-search {
    width: min(100%, 590px);
    height: 68px;

    display: flex;
    align-items: center;
    gap: 15px;

    padding: 0 18px;

    background: rgba(255, 255, 255, .88);

    border: 1px solid rgba(36, 16, 95, .10);

    border-radius: 18px;

    box-shadow:
        0 18px 55px rgba(36, 16, 95, .08),
        inset 0 1px 0 rgba(255, 255, 255, .8);
}


.uv-ge-google-icon {
    font-size: 25px;
    font-weight: 800;
    color: #4285f4;
}


.uv-ge-search-text {
    flex: 1;

    min-width: 0;

    overflow: hidden;

    white-space: nowrap;

    color: #5f5d68;

    font-size: 14px;
}


.uv-ge-search-text i {
    display: inline-block;

    width: 2px;
    height: 16px;

    margin-left: 4px;

    vertical-align: middle;

    background: #ff174f;

    animation: uvGeCursor .8s infinite;
}


.uv-ge-search-icon {
    width: 38px;
    height: 38px;

    flex-shrink: 0;

    display: grid;
    place-items: center;

    border-radius: 11px;

    background: #f1edfb;

    color: #4520a0;

    font-size: 21px;
}


/* =========================================================
   BUTTONS
========================================================= */

.uv-ge-actions {
    display: flex;
    align-items: center;
    gap: 14px;

    margin-top: 24px;
}


.uv-ge-primary,
.uv-ge-secondary {
    min-height: 50px;

    padding: 0 22px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    border-radius: 13px;

    text-decoration: none;

    font-size: 14px;
    font-weight: 700;

    transition: .35s ease;
}


.uv-ge-primary {
    color: #fff;

    background:
        linear-gradient(110deg,
            #24105f,
            #5520ba,
            #ff174f);

    box-shadow:
        0 12px 30px rgba(82, 32, 186, .25);
}


.uv-ge-primary span {
    font-size: 18px;
    transition: .3s ease;
}


.uv-ge-primary:hover {
    transform: translateY(-4px);

    box-shadow:
        0 18px 40px rgba(82, 32, 186, .32);
}


.uv-ge-primary:hover span {
    transform: translate(3px, -3px);
}


.uv-ge-secondary {
    color: #292634;

    background: rgba(255, 255, 255, .7);

    border: 1px solid #ddd9e8;
}


.uv-ge-secondary:hover {
    border-color: #4b24a7;
    color: #4b24a7;

    transform: translateY(-3px);
}


/* =========================================================
   MINI STATS
========================================================= */

.uv-ge-mini-stats {
    display: flex;
    align-items: center;
    gap: 25px;

    margin-top: 48px;
}


.uv-ge-mini-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}


.uv-ge-mini-item strong {
    font-size: 20px;
    color: #24105f;
}


.uv-ge-mini-item span {
    color: #8b8993;
    font-size: 11px;
}


.uv-ge-mini-line {
    width: 1px;
    height: 35px;

    background: #ddd9e5;
}


/* =========================================================
   RIGHT VISUAL
========================================================= */

.uv-ge-visual {
    position: relative;

    width: 100%;
    min-width: 0;

    height: 650px;

    overflow: hidden;
}


/* =========================================================
   ORBITS
========================================================= */

.uv-ge-orbit {
    position: absolute;

    left: 50%;
    top: 42%;

    transform: translate(-50%, -50%);

    border: 1px solid rgba(76, 37, 167, .12);

    border-radius: 50%;

    pointer-events: none;
}


.orbit-one {
    width: 420px;
    height: 420px;

    animation:
        uvGeRotate 28s linear infinite;
}


.orbit-two {
    width: 570px;
    height: 570px;

    border-style: dashed;

    animation:
        uvGeRotateReverse 38s linear infinite;
}


.orbit-three {
    width: 720px;
    height: 720px;

    opacity: .45;
}


/* =========================================================
   GOOGLE CORE
========================================================= */

.uv-ge-google-core {
    position: absolute;

    left: 50%;
    top: 42%;

    width: 270px;
    height: 270px;

    transform: translate(-50%, -50%);

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        radial-gradient(circle,
            rgba(255, 255, 255, .98) 0%,
            rgba(248, 245, 255, .96) 48%,
            rgba(231, 222, 252, .75) 100%);

    box-shadow:
        0 30px 90px rgba(62, 29, 141, .20),
        inset 0 0 0 1px rgba(255, 255, 255, .9);

    transition: transform .25s ease;
}


.uv-ge-core-ring {
    position: absolute;

    inset: 16px;

    border: 1px solid rgba(78, 37, 168, .16);

    border-radius: 50%;

    animation:
        uvGeCorePulse 3s infinite;
}


.uv-ge-google-g {
    position: absolute;

    font-size: 135px;
    line-height: 1;

    font-weight: 900;

    background:
        conic-gradient(from 45deg,
            #4285f4,
            #34a853,
            #fbbc05,
            #ea4335,
            #4285f4);

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;

    filter:
        drop-shadow(0 15px 25px rgba(66, 133, 244, .15));
}


.uv-ge-core-label {
    position: absolute;

    bottom: 43px;

    text-align: center;

    font-size: 10px;
    font-weight: 900;

    letter-spacing: 3px;

    color: #24105f;
}


.uv-ge-core-label small {
    display: block;

    margin-top: 5px;

    font-size: 10px;
    letter-spacing: 2px;

    color: #9994a6;
}


/* =========================================================
   FLOATING CARDS
========================================================= */

.uv-ge-floating-card {
    position: absolute;

    z-index: 6;

    display: flex;
    align-items: center;
    gap: 12px;

    padding: 14px 18px;

    background: rgba(255, 255, 255, .92);

    border: 1px solid rgba(36, 16, 95, .09);

    border-radius: 15px;

    box-shadow:
        0 20px 45px rgba(39, 22, 88, .12);

    backdrop-filter: blur(15px);
}


.uv-ge-card-icon {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    border-radius: 11px;

    background:
        linear-gradient(135deg,
            #f0e9ff,
            #ffe6ef);

    color: #5421ae;

    font-size: 19px;
    font-weight: 800;
}


.uv-ge-floating-card small {
    display: block;

    margin-bottom: 3px;

    font-size: 8px;

    letter-spacing: 1px;

    color: #9995a3;

    font-weight: 700;
}


.uv-ge-floating-card strong {
    font-size: 19px;
    color: #28115f;
}


.rank-card {
    top: 8%;
    left: 2%;

    animation:
        uvGeFloatOne 4s ease-in-out infinite;
}


.traffic-card {
    top: 13%;
    right: 2%;

    animation:
        uvGeFloatTwo 5s ease-in-out infinite;
}


.leads-card {
    right: 7%;
    bottom: 26%;

    animation:
        uvGeFloatOne 4.5s ease-in-out infinite;
}


/* =========================================================
   KEYWORDS
========================================================= */

.uv-ge-keyword {
    position: absolute;

    z-index: 4;

    padding: 9px 14px;

    border-radius: 100px;

    background: rgba(255, 255, 255, .75);

    border: 1px solid rgba(75, 36, 167, .12);

    color: #6f6a7d;

    font-size: 10px;
    font-weight: 700;

    box-shadow:
        0 10px 25px rgba(36, 16, 95, .06);

    backdrop-filter: blur(10px);
}


.keyword-one {
    top: 29%;
    left: 3%;
}


.keyword-two {
    top: 48%;
    right: 1%;
}


.keyword-three {
    bottom: 31%;
    left: 8%;
}


.keyword-four {
    bottom: 19%;
    right: 29%;
}


/* =========================================================
   PARTICLES
========================================================= */

.uv-ge-particle {
    position: absolute;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        linear-gradient(135deg,
            #4b24a7,
            #ff174f);

    box-shadow:
        0 0 20px rgba(255, 23, 79, .5);

    animation:
        uvGeParticle 4s ease-in-out infinite;
}


.p1 {
    top: 10%;
    left: 40%;
}

.p2 {
    top: 35%;
    right: 15%;
    animation-delay: 1s;
}

.p3 {
    bottom: 15%;
    left: 30%;
    animation-delay: 1.7s;
}

.p4 {
    bottom: 33%;
    right: 37%;
    animation-delay: 2.3s;
}

.p5 {
    top: 60%;
    left: 5%;
    animation-delay: 3s;
}


/* =========================================================
   FIXED GROWTH PATH
========================================================= */

.uv-ge-growth-path {
    position: absolute;

    left: 50%;
    bottom: 10px;

    width: min(620px, calc(100% - 40px));

    height: 85px;

    transform: translateX(-50%);

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    z-index: 8;
}


.uv-ge-path-line {
    position: absolute;

    top: 18px;

    left: 18px;
    right: 18px;

    height: 2px;

    background:
        linear-gradient(90deg,
            #4b24a7,
            #ff174f);

    opacity: .28;
}


.uv-ge-path-item {
    position: relative;

    z-index: 2;

    width: 70px;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 8px;
}


.uv-ge-path-item span {
    width: 36px;
    height: 36px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: #fff;

    border: 2px solid #ddd6ef;

    color: #4b24a7;

    font-size: 9px;
    font-weight: 800;

    box-shadow:
        0 8px 20px rgba(36, 16, 95, .08);
}


.uv-ge-path-item strong {
    white-space: nowrap;

    font-size: 8px;

    letter-spacing: 1px;

    color: #85818e;
}


.uv-ge-path-item:last-child span {
    border-color: #ff174f;
    color: #ff174f;

    box-shadow:
        0 0 25px rgba(255, 23, 79, .18);
}


/* =========================================================
   BOTTOM SERVICES
========================================================= */

.uv-ge-bottom {
    position: relative;

    z-index: 10;

    border-top:
        1px solid rgba(36, 16, 95, .08);

    background:
        rgba(255, 255, 255, .72);
}


.uv-ge-bottom-label {
    text-align: center;

    padding-top: 17px;

    font-size: 9px;

    letter-spacing: 2px;

    font-weight: 800;

    color: #aaa6b2;
}


.uv-ge-services {
    min-height: 75px;

    display: flex;

    justify-content: center;
    align-items: center;

    gap: 0;
}


.uv-ge-services div {
    min-width: 180px;

    padding: 0 28px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    color: #393441;

    font-size: 14px;
    font-weight: 800;

    border-right:
        1px solid rgba(36, 16, 95, .08);

    transition: .3s ease;
}


.uv-ge-services div:last-child {
    border-right: none;
}


.uv-ge-services div:hover {
    color: #4b24a7;
    transform: translateY(-2px);
}


.uv-ge-services span {
    color: #ff174f;
    font-size: 15px;
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes uvGePulse {

    0%,
    100% {
        box-shadow:
            0 0 0 5px rgba(255, 23, 79, .08);
    }

    50% {
        box-shadow:
            0 0 0 9px rgba(255, 23, 79, .02);
    }
}


@keyframes uvGeCursor {

    0%,
    45% {
        opacity: 1;
    }

    46%,
    100% {
        opacity: 0;
    }
}


@keyframes uvGeRotate {

    from {
        transform:
            translate(-50%, -50%) rotate(0);
    }

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


@keyframes uvGeRotateReverse {

    from {
        transform:
            translate(-50%, -50%) rotate(360deg);
    }

    to {
        transform:
            translate(-50%, -50%) rotate(0);
    }
}


@keyframes uvGeCorePulse {

    0%,
    100% {
        transform: scale(1);
        opacity: .7;
    }

    50% {
        transform: scale(1.06);
        opacity: .3;
    }
}


@keyframes uvGeFloatOne {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-13px);
    }
}


@keyframes uvGeFloatTwo {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(11px);
    }
}


@keyframes uvGeParticle {

    0%,
    100% {
        transform: translate(0, 0);
        opacity: .5;
    }

    50% {
        transform: translate(15px, -20px);
        opacity: 1;
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .uv-ge-container {
        width: min(100% - 60px, 900px);

        grid-template-columns: 1fr;

        padding-top: 70px;
    }


    .uv-ge-content {
        padding: 30px 0 0;

        text-align: center;
    }


    .uv-ge-eyebrow,
    .uv-ge-actions,
    .uv-ge-mini-stats {
        justify-content: center;
    }


    .uv-ge-description,
    .uv-ge-search {
        margin-left: auto;
        margin-right: auto;
    }


    .uv-ge-content h2 {
        margin-left: auto;
        margin-right: auto;
    }


    .uv-ge-visual {
        height: 600px;

        overflow: hidden;
    }


    .uv-ge-growth-path {
        bottom: 5px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .uv-google-engine {
        min-height: auto;
    }


    .uv-ge-container {
        width: calc(100% - 34px);

        display: block;

        padding: 65px 0 20px;
    }


    .uv-ge-content {
        padding: 0;
    }


    .uv-ge-eyebrow {
        font-size: 9px;

        letter-spacing: 1.5px;

        margin-bottom: 18px;
    }


    .uv-ge-content h2 {
        font-size: clamp(39px, 11vw, 56px);

        line-height: 1;

        letter-spacing: -2.5px;
    }


    .uv-ge-description {
        font-size: 14px;

        line-height: 1.65;

        margin: 22px auto 25px;
    }


    .uv-ge-search {
        height: 58px;

        border-radius: 14px;

        padding: 0 13px;
    }


    .uv-ge-google-icon {
        font-size: 20px;
    }


    .uv-ge-search-text {
        font-size: 11px;
    }


    .uv-ge-actions {
        flex-direction: column;

        align-items: stretch;
    }


    .uv-ge-primary,
    .uv-ge-secondary {
        width: 100%;
    }


    .uv-ge-mini-stats {
        gap: 12px;

        margin-top: 32px;
    }


    .uv-ge-mini-item strong {
        font-size: 16px;
    }


    .uv-ge-mini-item span {
        font-size: 8px;
    }


    .uv-ge-mini-line {
        height: 28px;
    }


    /* VISUAL */

    .uv-ge-visual {
        height: 500px;

        margin-top: 15px;

        overflow: hidden;
    }


    .uv-ge-orbit {
        left: 50%;
        top: 42%;
    }


    .orbit-one {
        width: 245px;
        height: 245px;
    }


    .orbit-two {
        width: 340px;
        height: 340px;
    }


    .orbit-three {
        width: 430px;
        height: 430px;
    }


    .uv-ge-google-core {
        width: 175px;
        height: 175px;

        top: 42%;
    }


    .uv-ge-google-g {
        font-size: 90px;
    }


    .uv-ge-core-ring {
        inset: 10px;
    }


    .uv-ge-core-label {
        bottom: 27px;

        font-size: 10px;

        letter-spacing: 2px;
    }


    .uv-ge-core-label small {
        font-size: 5px;
    }


    /* CARDS */

    .uv-ge-floating-card {
        padding: 9px 11px;

        gap: 8px;

        border-radius: 11px;
    }


    .uv-ge-card-icon {
        width: 29px;
        height: 29px;

        border-radius: 8px;

        font-size: 14px;
    }


    .uv-ge-floating-card small {
        font-size: 10px;
    }


    .uv-ge-floating-card strong {
        font-size: 13px;
    }


    .rank-card {
        top: 12%;
        left: 0;
    }


    .traffic-card {
        top: 18%;
        right: 0;
    }


    .leads-card {
        right: 0;
        bottom: 28%;
    }


    /* KEYWORDS */

    .uv-ge-keyword {
        padding: 7px 10px;

        font-size: 10px;
    }


    .keyword-one {
        top: 34%;
        left: 0;
    }


    .keyword-two {
        top: 51%;
        right: 0;
    }


    .keyword-three {
        bottom: 36%;
        left: 5px;
    }


    .keyword-four {
        bottom: 23%;
        right: 20%;
    }


    /* GROWTH PATH */

    .uv-ge-growth-path {
        width: calc(100% - 20px);

        height: 72px;

        bottom: 0;

        overflow: visible;
    }


    .uv-ge-path-line {
        top: 15px;

        left: 14px;
        right: 14px;
    }


    .uv-ge-path-item {
        width: 48px;

        gap: 6px;
    }


    .uv-ge-path-item span {
        width: 30px;
        height: 30px;

        font-size: 10px;
    }


    .uv-ge-path-item strong {
        font-size: 10px;

        letter-spacing: .5px;
    }


    /* BOTTOM */

    .uv-ge-bottom-label {
        padding-top: 15px;

        font-size: 10px;
    }


    .uv-ge-services {
        overflow-x: auto;

        justify-content: flex-start;

        min-height: 65px;

        scrollbar-width: none;
    }


    .uv-ge-services::-webkit-scrollbar {
        display: none;
    }


    .uv-ge-services div {
        flex: 0 0 auto;

        min-width: 145px;

        padding: 0 18px;

        font-size: 9px;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

    .uv-ge-container {
        width: calc(100% - 26px);
    }


    .uv-ge-content h2 {
        font-size: 38px;
    }


    .uv-ge-description {
        font-size: 13px;
    }


    .uv-ge-mini-stats {
        gap: 8px;
    }


    .uv-ge-mini-item span {
        font-size: 10px;
    }


    .uv-ge-visual {
        height: 450px;
    }


    .uv-ge-google-core {
        width: 155px;
        height: 155px;
    }


    .uv-ge-google-g {
        font-size: 78px;
    }


    .orbit-one {
        width: 220px;
        height: 220px;
    }


    .orbit-two {
        width: 300px;
        height: 300px;
    }


    .orbit-three {
        width: 375px;
        height: 375px;
    }


    .uv-ge-growth-path {
        width: calc(100% - 6px);
    }


    .uv-ge-path-item {
        width: 42px;
    }


    .uv-ge-path-item strong {
        font-size: 5.5px;
    }


    .rank-card {
        left: -4px;
    }


    .traffic-card {
        right: -4px;
    }


    .leads-card {
        right: -4px;
    }
}

/* =========================================================
   SECTION 03 — TRUST & RESULTS
========================================================= */

.uv-trust {

    position: relative;

    padding:
        135px 6vw 125px;

    overflow: hidden;

    background:
        #f7f7fa;

    color:
        #17151d;

}


/* =========================================================
   BACKGROUND ACCENT
========================================================= */

.uv-trust::before {

    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    top: -280px;
    right: -150px;

    border-radius: 50%;

    background:
        rgba(75, 36, 167, .08);

    filter:
        blur(80px);

    pointer-events: none;

}


.uv-trust::after {

    content: "";

    position: absolute;

    width: 350px;
    height: 350px;

    left: -200px;
    bottom: -180px;

    border-radius: 50%;

    background:
        rgba(255, 23, 79, .06);

    filter:
        blur(80px);

    pointer-events: none;

}


/* =========================================================
   CONTAINER
========================================================= */

.uv-trust-container {

    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 1380px;

    margin: 0 auto;

}


/* =========================================================
   HEADING
========================================================= */

.uv-trust-heading {

    max-width: 760px;

}


/* =========================================================
   EYEBROW
========================================================= */

.uv-trust-eyebrow {

    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 22px;

    color:
        #777581;

    font-size: 14px;

    font-weight: 800;

    letter-spacing: .18em;

}


.uv-trust-eyebrow-line {

    width: 32px;
    height: 2px;

    background:
        linear-gradient(90deg,
            #4b24a7,
            #ff174f);

}


/* =========================================================
   TITLE
========================================================= */

.uv-trust-title {

    max-width: 720px;

    margin: 0;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(42px, 5vw, 70px);

    font-weight: 700;

    line-height: 1.02;

    letter-spacing:
        -.055em;

}


.uv-trust-title span {

    display: inline;

    color:
        #4b24a7;

}


/* =========================================================
   DESCRIPTION
========================================================= */

.uv-trust-description {

    max-width: 560px;

    margin:
        25px 0 0;

    color:
        #777581;

    font-size: 15px;

    line-height: 1.75;

}


/* =========================================================
   STATS GRID
========================================================= */

.uv-trust-stats {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 14px;

    margin-top: 70px;

}


/* =========================================================
   STAT CARD
========================================================= */

.uv-trust-stat {

    position: relative;

    min-height: 270px;

    padding: 24px;

    display: flex;

    flex-direction: column;

    overflow: hidden;

    background:
        rgba(255, 255, 255, .72);

    border:
        1px solid rgba(36, 16, 95, .08);

    border-radius: 22px;

    box-shadow:
        0 12px 40px rgba(25, 18, 45, .045);

    opacity: 0;

    transform:
        translateY(30px);

    transition:
        opacity .7s ease,
        transform .7s ease,
        border-color .35s ease,
        box-shadow .35s ease;

}


.uv-trust-stat.is-visible {

    opacity: 1;

    transform:
        translateY(0);

}


.uv-trust-stat:nth-child(2) {

    transition-delay: .08s;

}


.uv-trust-stat:nth-child(3) {

    transition-delay: .16s;

}


.uv-trust-stat:nth-child(4) {

    transition-delay: .24s;

}


/* =========================================================
   CARD HOVER
========================================================= */

.uv-trust-stat::before {

    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    top: -100px;
    right: -90px;

    border-radius: 50%;

    background:
        rgba(75, 36, 167, .06);

    transition:
        transform .5s ease,
        background .5s ease;

}


.uv-trust-stat:hover {

    transform:
        translateY(-7px);

    border-color:
        rgba(75, 36, 167, .20);

    box-shadow:
        0 22px 55px rgba(36, 16, 95, .09);

}


.uv-trust-stat:hover::before {

    transform:
        scale(1.5);

    background:
        rgba(255, 23, 79, .07);

}


/* =========================================================
   CARD TOP
========================================================= */

.uv-trust-stat-top {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;

}


.uv-trust-index {

    color:
        #a09da8;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: .1em;

}


.uv-trust-arrow {

    width: 30px;
    height: 30px;

    display: grid;

    place-items: center;

    color:
        #777581;

    border:
        1px solid rgba(36, 16, 95, .09);

    border-radius: 50%;

    font-size: 13px;

    transition:
        color .3s ease,
        background .3s ease,
        transform .3s ease;

}


.uv-trust-stat:hover .uv-trust-arrow {

    color: #ffffff;

    background:
        linear-gradient(135deg,
            #4b24a7,
            #ff174f);

    transform:
        rotate(8deg);

}


/* =========================================================
   NUMBER
========================================================= */

.uv-trust-number-wrap {

    position: relative;

    z-index: 2;

    margin-top: 42px;

}


.uv-trust-number {

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(48px, 4.5vw, 68px);

    font-weight: 700;

    line-height: .9;

    letter-spacing:
        -.065em;

    background:
        linear-gradient(120deg,
            #24105f,
            #4b24a7 55%,
            #ff174f);

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;

}


/* =========================================================
   CARD TITLE
========================================================= */

.uv-trust-stat h3 {

    position: relative;

    z-index: 2;

    margin:
        27px 0 0;

    font-family:
        "Manrope",
        sans-serif;

    color:
        #24232b;

    font-size: 14px;

    font-weight: 700;

}


.uv-trust-stat p {

    position: relative;

    z-index: 2;

    max-width: 220px;

    margin:
        8px 0 0;

    color:
        #85828d;

    font-size: 13px;

    line-height: 1.6;

}


/* =========================================================
   BOTTOM STATEMENT
========================================================= */

.uv-trust-bottom {

    display: flex;

    align-items: center;

    gap: 20px;

    margin-top: 70px;

}


.uv-trust-bottom-line {

    flex: 1;

    height: 1px;

    background:
        rgba(36, 16, 95, .10);

}


.uv-trust-bottom p {

    margin: 0;

    color:
        #8a8790;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: .13em;

    white-space: nowrap;

}


.uv-trust-bottom p span {

    margin:
        0 8px;

    color:
        #ff174f;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .uv-trust {

        padding:
            105px 5vw 95px;

    }


    .uv-trust-stats {

        grid-template-columns:
            repeat(2, 1fr);

        margin-top: 55px;

    }


    .uv-trust-stat {

        min-height: 245px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .uv-trust {

        padding:
            80px 20px 75px;

    }


    .uv-trust::before {

        width: 300px;
        height: 300px;

        top: -150px;
        right: -150px;

        filter: blur(65px);

    }


    .uv-trust::after {

        width: 240px;
        height: 240px;

        left: -150px;
        bottom: -120px;

        filter: blur(65px);

    }


    /* Eyebrow */

    .uv-trust-eyebrow {

        gap: 8px;

        margin-bottom: 17px;

        font-size: 10px;

        letter-spacing: .13em;

    }


    .uv-trust-eyebrow-line {

        width: 24px;

    }


    /* Heading */

    .uv-trust-title {

        font-size:
            clamp(38px, 11.5vw, 58px);

        line-height: 1.02;

        letter-spacing:
            -.06em;

    }


    .uv-trust-description {

        margin-top: 20px;

        font-size: 13px;

        line-height: 1.7;

    }


    /* Stats */

    .uv-trust-stats {

        grid-template-columns:
            repeat(2, 1fr);

        gap: 9px;

        margin-top: 40px;

    }


    .uv-trust-stat {

        min-height: 215px;

        padding: 17px;

        border-radius: 17px;

    }


    .uv-trust-stat:nth-child(2) {

        transition-delay: .05s;

    }


    .uv-trust-stat:nth-child(3) {

        transition-delay: .10s;

    }


    .uv-trust-stat:nth-child(4) {

        transition-delay: .15s;

    }


    .uv-trust-arrow {

        width: 25px;
        height: 25px;

        font-size: 13px;

    }


    .uv-trust-number-wrap {

        margin-top: 30px;

    }


    .uv-trust-number {

        font-size:
            clamp(38px, 11vw, 52px);

    }


    .uv-trust-stat h3 {

        margin-top: 21px;

        font-size: 13px;

        line-height: 1.3;

    }


    .uv-trust-stat p {

        margin-top: 6px;

        font-size: 8px;

        line-height: 1.55;

    }


    /* Bottom */

    .uv-trust-bottom {

        gap: 10px;

        margin-top: 42px;

    }


    .uv-trust-bottom p {

        font-size: 10px;

        letter-spacing: .08em;

    }


    .uv-trust-bottom p span {

        margin:
            0 3px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .uv-trust {

        padding:
            70px 15px 65px;

    }


    .uv-trust-title {

        font-size: 37px;

    }


    .uv-trust-description {

        font-size: 12px;

    }


    .uv-trust-stats {

        gap: 7px;

        margin-top: 34px;

    }


    .uv-trust-stat {

        min-height: 195px;

        padding: 14px;

        border-radius: 14px;

    }


    .uv-trust-index {

        font-size: 10px;

    }


    .uv-trust-arrow {

        width: 23px;
        height: 23px;

        font-size: 10px;

    }


    .uv-trust-number-wrap {

        margin-top: 25px;

    }


    .uv-trust-number {

        font-size: 36px;

    }


    .uv-trust-stat h3 {

        margin-top: 18px;

        font-size: 10px;

    }


    .uv-trust-stat p {

        font-size: 10px;

    }


    .uv-trust-bottom {

        margin-top: 32px;

    }


    .uv-trust-bottom p {

        font-size: 5px;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .uv-trust-stat,
    .uv-trust-stat::before,
    .uv-trust-arrow {

        transition: none !important;

    }

}

/* =========================================
   SECTION 04 — SERVICES
========================================= */

.uv-services {
    position: relative;
    overflow: hidden;

    padding: 125px 0 115px;

    background: #ffffff;
}

.uv-services-bg {
    position: absolute;

    width: 600px;
    height: 600px;

    top: 0;
    right: -300px;

    background: radial-gradient(circle,
            rgba(75, 36, 167, .09),
            transparent 68%);

    pointer-events: none;
}

.uv-services-container {
    position: relative;
    z-index: 2;

    width: min(1180px, calc(100% - 40px));

    margin: auto;
}


/* =========================================
   HEADING
========================================= */

.uv-services-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 22px;

    color: #ff174f;

    font-family: "Manrope", sans-serif;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2.2px;
}

.uv-services-eyebrow-line {
    width: 34px;
    height: 2px;

    border-radius: 20px;

    background: #ff174f;
}

.uv-services-title-row {
    display: grid;
    grid-template-columns: 1.15fr .75fr;
    gap: 70px;

    align-items: end;

    margin-bottom: 70px;
}

.uv-services-title-row h2 {
    margin: 0;

    color: #17151f;

    font-family: "Manrope", sans-serif;
    font-size: clamp(42px, 5vw, 70px);
    font-weight: 800;
    line-height: 1.03;
    letter-spacing: -3px;
}

.uv-services-title-row h2 span {
    display: block;
    color: #aaa8b1;
}

.uv-services-title-row p {
    max-width: 480px;

    margin: 0 0 5px;

    color: #777581;

    font-family: "DM Sans", sans-serif;
    font-size: 16px;
    line-height: 1.8;
}


/* =========================================
   MAIN BOX
========================================= */

.uv-services-layout {
    display: grid;
    grid-template-columns: 39% 61%;

    min-height: 590px;

    overflow: hidden;

    border: 1px solid #e9e7ee;
    border-radius: 28px;

    background: #f8f7fa;

    box-shadow:
        0 25px 70px rgba(36, 16, 95, .07);
}


/* =========================================
   NAVIGATION
========================================= */

.uv-services-nav {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 30px 0;

    border-right: 1px solid #e6e4eb;

    background: #f3f2f6;
}

.uv-service-tab {
    position: relative;

    display: grid;
    grid-template-columns: 40px 1fr 25px;

    align-items: center;
    gap: 15px;

    width: 100%;
    min-height: 92px;

    padding: 15px 30px;

    border: 0;
    border-left: 3px solid transparent;

    outline: none;

    background: transparent;

    text-align: left;

    cursor: pointer;

    transition:
        background .3s ease,
        border-color .3s ease;
}

.uv-service-tab:hover {
    background: rgba(255, 255, 255, .65);
}

.uv-service-tab.active {
    border-left-color: #ff174f;

    background: #ffffff;
}

.uv-service-number {
    color: #aaa8b1;

    font-family: "Manrope", sans-serif;
    font-size: 13px;
    font-weight: 800;
}

.uv-service-tab.active .uv-service-number {
    color: #ff174f;
}

.uv-service-tab-content {
    display: flex;
    flex-direction: column;
    gap: 5px;

    min-width: 0;
}

.uv-service-tab-content strong {
    color: #25232d;

    font-family: "Manrope", sans-serif;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.35;
}

.uv-service-tab-content small {
    color: #99969f;

    font-family: "DM Sans", sans-serif;
    font-size: 12px;
}

.uv-service-arrow {
    color: #aaa8b1;

    font-size: 19px;

    transition:
        transform .3s ease,
        color .3s ease;
}

.uv-service-tab.active .uv-service-arrow {
    color: #ff174f;

    transform: translate(3px, -3px);
}


/* =========================================
   DISPLAY
========================================= */

.uv-services-display {
    position: relative;

    min-width: 0;

    background: #ffffff;
}

.uv-service-panel {
    position: absolute;
    inset: 0;

    overflow: hidden;

    padding: 42px 48px;

    opacity: 0;
    visibility: hidden;

    transform: translateX(25px);

    transition:
        opacity .35s ease,
        transform .35s ease,
        visibility .35s ease;
}

.uv-service-panel.active {
    opacity: 1;
    visibility: visible;

    transform: translateX(0);
}


/* =========================================
   PANEL TOP
========================================= */

.uv-service-panel-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.uv-service-label {
    color: #aaa7b0;

    font-family: "Manrope", sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.7px;
}

.uv-service-icon {
    display: grid;
    place-items: center;

    width: 45px;
    height: 45px;

    flex-shrink: 0;

    border-radius: 13px;

    color: #ffffff;

    background: linear-gradient(135deg,
            #24105f,
            #ff174f);

    box-shadow:
        0 10px 25px rgba(75, 36, 167, .22);

    font-family: "Manrope", sans-serif;
    font-size: 16px;
    font-weight: 800;
}


/* =========================================
   COPY
========================================= */

.uv-service-copy {
    position: relative;
    z-index: 3;
}

.uv-service-panel h3 {
    max-width: 590px;

    margin: 40px 0 18px;

    color: #1b1922;

    font-family: "Manrope", sans-serif;
    font-size: clamp(28px, 3vw, 42px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -1.7px;
}

.uv-service-panel h3 em {
    display: block;

    color: #6d6879;

    font-style: normal;
}

.uv-service-panel p {
    max-width: 530px;

    margin: 0;

    color: #777581;

    font-family: "DM Sans", sans-serif;
    font-size: 14px;
    line-height: 1.8;
}


/* =========================================
   TAGS
========================================= */

.uv-service-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    max-width: 580px;

    margin-top: 24px;
}

.uv-service-tags span {
    padding: 8px 12px;

    border: 1px solid #e8e5ed;
    border-radius: 100px;

    color: #68646f;
    background: #faf9fb;

    font-family: "DM Sans", sans-serif;
    font-size: 13px;
    font-weight: 600;

    white-space: nowrap;
}


/* =========================================
   CTA
========================================= */

.uv-service-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    position: relative;
    z-index: 5;

    margin-top: 27px;

    color: #24105f;

    font-family: "Manrope", sans-serif;
    font-size: 12px;
    font-weight: 800;

    text-decoration: none;

    transition: gap .3s ease;
}

.uv-service-cta span {
    display: grid;
    place-items: center;

    width: 29px;
    height: 29px;

    border-radius: 50%;

    color: #ffffff;
    background: #24105f;

    transition:
        background .3s ease,
        transform .3s ease;
}

.uv-service-cta:hover {
    gap: 14px;
}

.uv-service-cta:hover span {
    background: #ff174f;

    transform: translate(2px, -2px);
}


/* =========================================
   VISUAL BASE
========================================= */

.uv-service-visual {
    position: absolute;

    right: 35px;
    bottom: 0;

    width: 330px;
    height: 185px;

    pointer-events: none;

    transition: transform .25s ease-out;
}


/* =========================================
   WEB VISUAL
========================================= */

.uv-browser {
    position: absolute;

    right: 0;
    bottom: -35px;

    width: 285px;
    height: 190px;

    overflow: hidden;

    border: 6px solid #e8e6ed;
    border-bottom: 0;

    border-radius: 18px 18px 0 0;

    background: #ffffff;

    box-shadow:
        -20px -15px 60px rgba(36, 16, 95, .12);

    transform: rotate(-4deg);
}

.uv-browser-top {
    display: flex;
    align-items: center;
    gap: 5px;

    height: 25px;

    padding-left: 12px;

    background: #f2f1f5;
}

.uv-browser-top i {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #c8c5cf;
}

.uv-browser-content {
    padding: 25px;
}

.uv-browser-line {
    width: 70%;
    height: 7px;

    margin-bottom: 9px;

    border-radius: 20px;

    background: #dedbe5;
}

.uv-browser-line.large {
    width: 82%;
    height: 13px;

    background: linear-gradient(90deg,
            #24105f,
            #8b5cf6);
}

.uv-browser-line.short {
    width: 45%;
}

.uv-browser-cards {
    display: flex;
    gap: 8px;

    margin-top: 22px;
}

.uv-browser-cards span {
    flex: 1;

    height: 58px;

    border-radius: 8px;

    background: linear-gradient(135deg,
            #f1eef8,
            #faf9fb);
}


/* =========================================
   E-COMMERCE VISUAL
========================================= */

.uv-shop-card {
    position: absolute;

    right: 90px;
    bottom: -35px;

    width: 140px;
    height: 180px;

    padding: 9px;

    border-radius: 15px;

    background: #ffffff;

    box-shadow:
        0 20px 50px rgba(36, 16, 95, .14);

    transform: rotate(-7deg);
}

.uv-shop-card.second {
    right: -10px;
    bottom: -10px;

    transform: rotate(7deg);
}

.uv-shop-image {
    width: 100%;
    height: 105px;

    border-radius: 10px;

    background: linear-gradient(135deg,
            #24105f,
            #ff174f);
}

.uv-shop-card.second .uv-shop-image {
    background: linear-gradient(135deg,
            #eeeaf7,
            #d8d0eb);
}

.uv-shop-info {
    padding: 10px 4px;
}

.uv-shop-info span {
    display: block;

    width: 75%;
    height: 5px;

    margin-bottom: 6px;

    border-radius: 10px;

    background: #dedbe4;
}

.uv-shop-info span:nth-child(2) {
    width: 48%;
}

.uv-shop-info b {
    display: block;

    width: 35%;
    height: 8px;

    margin-top: 10px;

    border-radius: 10px;

    background: #ff174f;
}


/* =========================================
   SEO VISUAL
========================================= */

.uv-seo-chart {
    position: absolute;

    right: 0;
    bottom: -15px;

    width: 340px;
    height: 185px;

    padding: 20px;

    border: 1px solid #ebe8f0;

    border-radius: 18px 18px 0 0;

    background: #fbfafd;

    box-shadow:
        0 20px 50px rgba(36, 16, 95, .09);
}

.uv-seo-grid {
    position: absolute;
    inset: 20px;

    background:
        linear-gradient(rgba(36, 16, 95, .06) 1px,
            transparent 1px),
        linear-gradient(90deg,
            rgba(36, 16, 95, .06) 1px,
            transparent 1px);

    background-size: 45px 35px;
}

.uv-seo-chart svg {
    position: relative;
    z-index: 2;

    width: 100%;
    height: 125px;
}

.uv-seo-growth {
    position: absolute;

    top: 15px;
    right: 15px;

    z-index: 3;

    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.uv-seo-growth span {
    color: #99959f;

    font-size: 14px;
}

.uv-seo-growth strong {
    color: #24105f;

    font-family: "Manrope", sans-serif;
    font-size: 17px;
}


/* =========================================
   MARKETING VISUAL
========================================= */

.uv-marketing-orbit {
    position: absolute;

    right: 35px;
    bottom: -25px;

    width: 180px;
    height: 180px;

    border: 1px solid #ded9e8;
    border-radius: 50%;
}

.uv-marketing-orbit::before,
.uv-marketing-orbit::after {
    content: "";

    position: absolute;
    inset: 22px;

    border: 1px dashed #ddd7e8;

    border-radius: 50%;
}

.uv-marketing-orbit::after {
    inset: 48px;
}

.uv-marketing-core {
    position: absolute;
    inset: 62px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: #ffffff;

    background: linear-gradient(135deg,
            #24105f,
            #8b5cf6);

    box-shadow:
        0 15px 40px rgba(36, 16, 95, .28);
}

.uv-marketing-core span {
    font-size: 8px;
    letter-spacing: 1px;
}

.uv-marketing-core strong {
    font-family: "Manrope", sans-serif;
    font-size: 18px;
}

.orbit-dot {
    position: absolute;

    width: 10px;
    height: 10px;

    border-radius: 50%;

    background: #ff174f;

    box-shadow:
        0 0 0 5px rgba(255, 23, 79, .08);

    animation: uvOrbit 5s linear infinite;
}

.orbit-dot.one {
    top: 15px;
    left: 82px;
}

.orbit-dot.two {
    top: 78px;
    right: 5px;

    animation-delay: -1.7s;
}

.orbit-dot.three {
    bottom: 18px;
    left: 25px;

    animation-delay: -3.3s;
}

@keyframes uvOrbit {

    0% {
        transform: rotate(0deg) translateX(4px);
    }

    50% {
        transform: rotate(180deg) translateX(-4px);
    }

    100% {
        transform: rotate(360deg) translateX(4px);
    }

}


/* =========================================
   BRANDING VISUAL
========================================= */

.uv-visual-branding {
    right: 45px;
    bottom: -10px;
}

.uv-brand-shape {
    position: absolute;

    width: 120px;
    height: 120px;

    border-radius: 30px;

    transform: rotate(25deg);
}

.uv-brand-shape.shape-one {
    right: 145px;
    bottom: -25px;

    background: #24105f;
}

.uv-brand-shape.shape-two {
    right: 75px;
    bottom: 15px;

    background: #8b5cf6;
}

.uv-brand-shape.shape-three {
    right: 10px;
    bottom: -20px;

    background: #ff174f;
}

.uv-brand-letter {
    position: absolute;

    right: 94px;
    bottom: 18px;

    z-index: 3;

    color: #ffffff;

    font-family: "Manrope", sans-serif;
    font-size: 70px;
    font-weight: 900;
    line-height: 1;

    transform: rotate(25deg);
}


/* =========================================
   BOTTOM CTA
========================================= */

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

    margin-top: 35px;
    padding: 0 8px;
}

.uv-services-bottom>span {
    color: #99969f;

    font-family: "DM Sans", sans-serif;
    font-size: 13px;
}

.uv-services-bottom a {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    color: #24105f;

    font-family: "Manrope", sans-serif;
    font-size: 13px;
    font-weight: 800;

    text-decoration: none;
}

.uv-services-bottom a span {
    display: grid;
    place-items: center;

    width: 30px;
    height: 30px;

    border-radius: 50%;

    color: #ffffff;
    background: #24105f;
}


/* =========================================
   REVEAL
========================================= */

.uv-reveal {
    opacity: 0;

    transform: translateY(30px);

    transition:
        opacity .8s ease,
        transform .8s ease;
}

.uv-reveal.uv-visible {
    opacity: 1;
    transform: translateY(0);
}


/* =========================================
   TABLET
========================================= */

@media (max-width:1000px) {

    .uv-services-title-row {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .uv-services-layout {
        grid-template-columns: 1fr;
    }

    .uv-services-nav {
        display: grid;
        grid-template-columns: repeat(5, 1fr);

        padding: 0;

        border-right: 0;
        border-bottom: 1px solid #e6e4eb;
    }

    .uv-service-tab {
        grid-template-columns: 1fr;
        gap: 6px;

        min-height: 105px;

        padding: 16px;

        border-left: 0;
        border-bottom: 3px solid transparent;
    }

    .uv-service-tab.active {
        border-left: 0;
        border-bottom-color: #ff174f;
    }

    .uv-service-arrow {
        display: none;
    }

    .uv-service-tab-content small {
        display: none;
    }

    .uv-services-display {
        min-height: 500px;
    }

    .uv-service-panel {
        min-height: 500px;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width:700px) {

    .uv-services {
        padding: 78px 0 70px;
    }

    .uv-services-container {
        width: calc(100% - 24px);
    }


    /* HEADING */

    .uv-services-title-row {
        gap: 17px;
        margin-bottom: 32px;
    }

    .uv-services-title-row h2 {
        font-size: 36px;
        line-height: 1.05;
        letter-spacing: -1.8px;
    }

    .uv-services-title-row p {
        font-size: 13px;
        line-height: 1.7;
    }


    /* =====================================
       SERVICE BOX
    ====================================== */

    .uv-services-layout {
        display: block;

        min-height: 0;

        border-radius: 20px;
    }


    /* =====================================
       HORIZONTAL TABS
    ====================================== */

    .uv-services-nav {

        display: flex;

        width: 100%;

        overflow-x: auto;
        overflow-y: hidden;

        padding: 0;

        border: 0;

        background: #f4f3f7;

        scrollbar-width: none;

        -webkit-overflow-scrolling: touch;

        scroll-snap-type: x mandatory;
    }

    .uv-services-nav::-webkit-scrollbar {
        display: none;
    }

    .uv-service-tab {

        flex: 0 0 120px;

        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;

        gap: 5px;

        min-height: 76px;

        padding: 12px 13px;

        border: 0;
        border-bottom: 3px solid transparent;

        scroll-snap-align: start;
    }

    .uv-service-tab.active {
        border-bottom-color: #ff174f;
    }

    .uv-service-number {
        font-size: 14px;
    }

    .uv-service-tab-content {
        display: block;
    }

    .uv-service-tab-content strong {
        display: block;

        font-size: 10.5px;
        line-height: 1.2;
    }

    .uv-service-tab-content small,
    .uv-service-arrow {
        display: none;
    }


    /* =====================================
       DISPLAY
    ====================================== */

    .uv-services-display {

        min-height: 0;

        background: #ffffff;
    }


    /* =====================================
       PANEL
    ====================================== */

    .uv-service-panel {

        position: relative;
        inset: auto;

        display: none;

        min-height: 0;

        overflow: hidden;

        padding: 25px 19px 0;

        opacity: 1;
        visibility: visible;

        transform: none;

        transition: none;
    }

    .uv-service-panel.active {
        display: block;

        transform: none;
    }


    /* =====================================
       TOP
    ====================================== */

    .uv-service-label {
        font-size: 8px;
        letter-spacing: 1.2px;
    }

    .uv-service-icon {
        width: 38px;
        height: 38px;

        border-radius: 11px;

        font-size: 14px;
    }


    /* =====================================
       COPY
    ====================================== */

    .uv-service-panel h3 {

        margin: 25px 0 14px;

        max-width: 100%;

        font-size: 28px;
        line-height: 1.08;
        letter-spacing: -1.2px;
    }

    .uv-service-panel h3 em {
        display: block;
    }

    .uv-service-panel p {

        max-width: 100%;

        font-size: 12.5px;
        line-height: 1.65;
    }


    /* =====================================
       TAGS
    ====================================== */

    .uv-service-tags {

        gap: 6px;

        margin-top: 17px;

        max-width: 100%;
    }

    .uv-service-tags span {

        padding: 6px 9px;

        font-size: 9.5px;
    }


    /* =====================================
       CTA
    ====================================== */

    .uv-service-cta {

        margin-top: 20px;

        font-size: 13px;
    }

    .uv-service-cta span {

        width: 27px;
        height: 27px;
    }


    /* =====================================
       VISUAL AREA
    ====================================== */

    .uv-service-visual {

        position: relative;

        right: auto;
        bottom: auto;

        width: 100%;
        height: 155px;

        margin-top: 12px;

        transform: none !important;

        pointer-events: none;
    }


    /* WEB */

    .uv-browser {

        right: 50%;

        bottom: -35px;

        width: 245px;
        height: 165px;

        transform: translateX(50%) rotate(-4deg);
    }

    .uv-browser-content {
        padding: 20px;
    }

    .uv-browser-cards {
        margin-top: 16px;
    }

    .uv-browser-cards span {
        height: 48px;
    }


    /* ECOMMERCE */

    .uv-visual-shop {
        height: 160px;
    }

    .uv-shop-card {

        right: calc(50% + 5px);

        bottom: -32px;

        width: 115px;
        height: 150px;
    }

    .uv-shop-card.second {

        right: calc(50% - 90px);

        bottom: -15px;
    }

    .uv-shop-image {
        height: 88px;
    }


    /* SEO */

    .uv-visual-seo {
        height: 145px;
    }

    .uv-seo-chart {

        left: 50%;
        right: auto;

        bottom: -15px;

        width: min(320px, 92vw);
        height: 155px;

        padding: 16px;

        transform: translateX(-50%);
    }

    .uv-seo-grid {
        inset: 16px;
    }

    .uv-seo-chart svg {
        height: 105px;
    }


    /* MARKETING */

    .uv-visual-marketing {

        height: 155px;
    }

    .uv-marketing-orbit {

        right: 50%;
        bottom: -30px;

        width: 155px;
        height: 155px;

        transform: translateX(50%);
    }

    .uv-marketing-core {
        inset: 54px;
    }


    /* BRANDING */

    .uv-visual-branding {

        height: 155px;

        margin-top: 5px;
    }

    .uv-brand-shape {

        width: 100px;
        height: 100px;

        border-radius: 25px;
    }

    .uv-brand-shape.shape-one {
        right: calc(50% + 40px);
        bottom: -25px;
    }

    .uv-brand-shape.shape-two {
        right: calc(50% - 20px);
        bottom: 5px;
    }

    .uv-brand-shape.shape-three {
        right: calc(50% - 80px);
        bottom: -20px;
    }

    .uv-brand-letter {

        right: calc(50% - 24px);
        bottom: 10px;

        font-size: 60px;
    }


    /* =====================================
       BOTTOM CTA
    ====================================== */

    .uv-services-bottom {

        flex-direction: column;
        align-items: flex-start;
        gap: 12px;

        margin-top: 25px;

        padding: 0 2px;
    }

    .uv-services-bottom>span {
        font-size: 13px;
    }

    .uv-services-bottom a {
        font-size: 13px;
    }

}


/* =========================================
   SMALL PHONES
========================================= */

@media (max-width:380px) {

    .uv-services {
        padding-top: 68px;
    }

    .uv-services-title-row h2 {
        font-size: 32px;
    }

    .uv-service-tab {
        flex-basis: 112px;

        padding-left: 11px;
        padding-right: 11px;
    }

    .uv-service-tab-content strong {
        font-size: 9.5px;
    }

    .uv-service-panel {
        padding-left: 16px;
        padding-right: 16px;
    }

    .uv-service-panel h3 {
        font-size: 25px;
    }

    .uv-service-panel p {
        font-size: 12px;
    }

    .uv-service-visual {
        height: 145px;
    }

}


/* =========================================
   REDUCED MOTION
========================================= */

@media (prefers-reduced-motion:reduce) {

    .uv-reveal,
    .uv-service-panel,
    .uv-service-tab,
    .uv-service-visual {
        transition: none !important;
    }

    .orbit-dot {
        animation: none !important;
    }

}

/* =========================================
   SECTION 04 — SERVICES
========================================= */

/* =========================================================
   UNIVERSE VYPAAR — SERVICES SHOWCASE
========================================================= */

.uv-services-showcase {
    --uv-purple: #24105f;
    --uv-purple-light: #5425b7;
    --uv-pink: #ff174f;
    --uv-blue: #1557a6;
    --uv-dark: #15122a;

    position: relative;
    width: 100%;
    min-height: 850px;

    overflow: hidden;

    background:
        linear-gradient(135deg,
            #24105f 0%,
            #3920a1 45%,
            #1557a6 100%);

    color: #fff;
}


/* =========================================================
   BACKGROUND
========================================================= */

.uv-services-showcase::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        radial-gradient(circle at 12% 35%,
            rgba(255, 23, 79, .28),
            transparent 25%),
        radial-gradient(circle at 90% 35%,
            rgba(21, 87, 166, .35),
            transparent 28%),
        radial-gradient(circle at 50% 80%,
            rgba(255, 255, 255, .08),
            transparent 35%);

    pointer-events: none;
}


.uv-services-glow {
    position: absolute;

    width: 280px;
    height: 280px;

    border-radius: 50%;

    filter: blur(80px);

    opacity: .35;

    pointer-events: none;
}


.uv-services-glow-left {
    left: -120px;
    top: 250px;

    background: #ff174f;
}


.uv-services-glow-right {
    right: -100px;
    top: 180px;

    background: #4285f4;
}


/* =========================================================
   WAVES
========================================================= */

.uv-services-wave {
    position: absolute;

    left: -5%;
    width: 110%;

    height: 125px;

    pointer-events: none;
}


.uv-services-wave-top {
    top: -65px;

    background: #f8f8fb;

    border-radius:
        0 0 50% 50%;
}


.uv-services-wave-bottom {
    bottom: -85px;

    height: 150px;

    background: #f8f8fb;

    border-radius:
        50% 50% 0 0;
}


/* =========================================================
   CONTAINER
========================================================= */

.uv-services-container {
    position: relative;

    z-index: 5;

    width: min(1500px, calc(100% - 60px));

    margin: auto;

    padding:
        105px 0 90px;
}


/* =========================================================
   HEADING
========================================================= */

.uv-services-heading {
    text-align: center;

    max-width: 1000px;

    margin:
        0 auto 45px;
}


.uv-services-badge {
    display: inline-flex;

    align-items: center;
    gap: 9px;

    padding: 8px 19px;

    border-radius: 100px;

    background:
        rgba(255, 255, 255, .95);

    color: var(--uv-purple);

    font-size: 12px;

    font-weight: 800;

    letter-spacing: .5px;

    box-shadow:
        0 12px 35px rgba(0, 0, 0, .12);
}


.uv-services-badge-icon {
    color: var(--uv-pink);

    font-size: 16px;

    animation:
        uvServiceSpin 4s linear infinite;
}


.uv-services-heading h2 {
    margin: 20px 0 13px;

    font-size:
        clamp(36px, 4vw, 58px);

    line-height: 1.05;

    letter-spacing: -2px;

    font-weight: 800;
}


.uv-services-heading h2 span {
    background:
        linear-gradient(90deg,
            #ff6688,
            #ff174f,
            #ff91ae);

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}


.uv-services-heading p {
    max-width: 720px;

    margin: auto;

    color: rgba(255, 255, 255, .72);

    font-size: 16px;

    line-height: 1.7;
}


/* =========================================================
   SLIDER
========================================================= */

.uv-services-slider {
    position: relative;

    display: flex;

    align-items: center;

    width: 100%;
}


.uv-services-track-wrap {
    width: 100%;

    overflow: hidden;

    padding:
        15px 5px 30px;
}


.uv-services-track {
    display: flex;

    gap: 18px;

    transition:
        transform .65s cubic-bezier(.77, 0, .175, 1);

    will-change: transform;
}


/* =========================================================
   SERVICE CARD
========================================================= */

.uv-service-card {
    position: relative;

    flex:
        0 0 calc((100% - 72px) / 5);

    min-width: 0;

    min-height: 365px;

    padding:
        25px 20px 22px;

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    border-radius: 24px;

    background:
        rgba(255, 255, 255, .98);

    color: var(--uv-dark);

    border:
        1px solid rgba(255, 255, 255, .7);

    box-shadow:
        0 22px 55px rgba(12, 5, 50, .18);

    overflow: hidden;

    transition:
        transform .4s ease,
        box-shadow .4s ease;
}


.uv-service-card::before {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    top: -90px;
    right: -70px;

    border-radius: 50%;

    background:
        linear-gradient(135deg,
            rgba(255, 23, 79, .13),
            rgba(84, 37, 183, .10));
}


.uv-service-card:hover {
    transform:
        translateY(-12px);

    box-shadow:
        0 30px 65px rgba(12, 5, 50, .25);
}


.uv-service-number {
    position: absolute;

    top: 15px;
    left: 17px;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1px;

    color: #aaa4b5;
}


/* =========================================================
   SERVICE ART
========================================================= */

.uv-service-art {
    position: relative;

    width: 190px;
    height: 155px;

    margin:
        8px auto 10px;

    display: flex;

    align-items: center;
    justify-content: center;
}


/* =========================================================
   SEO ART
========================================================= */

.uv-art-seo {
    background:
        radial-gradient(circle,
            #f0eaff,
            transparent 65%);

    border-radius: 50%;
}


.uv-art-window {
    position: relative;

    width: 125px;
    height: 95px;

    background: #fff;

    border-radius: 13px;

    border: 2px solid #e7ddfb;

    box-shadow:
        0 15px 30px rgba(36, 16, 95, .12);

    transform:
        rotate(-5deg);
}


.uv-art-window-top,
.uv-art-browser-bar {
    height: 18px;

    display: flex;

    align-items: center;

    gap: 4px;

    padding-left: 8px;

    background: #f4f1fb;

    border-radius:
        11px 11px 0 0;
}


.uv-art-window-top i,
.uv-art-browser-bar i {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #ff174f;
}


.uv-art-window-top i:nth-child(2),
.uv-art-browser-bar i:nth-child(2) {
    background: #5425b7;
}


.uv-art-window-top i:nth-child(3),
.uv-art-browser-bar i:nth-child(3) {
    background: #1557a6;
}


.uv-art-chart {
    position: absolute;

    bottom: 14px;
    left: 14px;

    width: 75px;
    height: 42px;

    display: flex;

    align-items: flex-end;

    gap: 5px;
}


.uv-art-chart span {
    width: 9px;

    border-radius: 4px 4px 0 0;

    background:
        linear-gradient(to top,
            #5425b7,
            #ff174f);
}


.uv-art-chart span:nth-child(1) {
    height: 15px;
}

.uv-art-chart span:nth-child(2) {
    height: 23px;
}

.uv-art-chart span:nth-child(3) {
    height: 18px;
}

.uv-art-chart span:nth-child(4) {
    height: 32px;
}

.uv-art-chart span:nth-child(5) {
    height: 40px;
}


.uv-art-arrow {
    position: absolute;

    top: 34px;
    right: 12px;

    font-size: 27px;

    font-weight: 900;

    color: #ff174f;

    transform:
        rotate(-15deg);
}


.uv-art-search {
    position: absolute;

    right: 18px;
    bottom: 16px;

    width: 39px;
    height: 39px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background:
        linear-gradient(135deg,
            #5425b7,
            #ff174f);

    color: #fff;

    font-size: 22px;

    box-shadow:
        0 10px 20px rgba(255, 23, 79, .25);
}


/* =========================================================
   ADS ART
========================================================= */

.uv-art-ads {
    background:
        radial-gradient(circle,
            #fff1df,
            transparent 65%);
}


.uv-art-ads-shape {
    position: absolute;

    border-radius: 15px;

    transform:
        rotate(20deg);
}


.ads-one {
    width: 85px;
    height: 55px;

    background:
        linear-gradient(135deg,
            #5425b7,
            #7b43db);

    left: 40px;
    top: 52px;
}


.ads-two {
    width: 72px;
    height: 72px;

    background:
        linear-gradient(135deg,
            #ffb400,
            #ff6b00);

    right: 32px;
    top: 35px;

    transform:
        rotate(35deg);
}


.ads-three {
    width: 42px;
    height: 42px;

    background:
        #2e80ff;

    right: 20px;
    bottom: 28px;

    transform:
        rotate(-20deg);
}


.uv-art-ads-label {
    position: absolute;

    z-index: 2;

    left: 78px;
    top: 70px;

    font-size: 17px;

    font-weight: 900;

    color: #fff;

    letter-spacing: 1px;
}


.uv-art-click {
    position: absolute;

    right: 24px;
    bottom: 22px;

    font-size: 28px;

    color: #1557a6;

    transform:
        rotate(-20deg);
}


/* =========================================================
   WEBSITE ART
========================================================= */

.uv-art-web {
    background:
        radial-gradient(circle,
            #e8e5ff,
            transparent 65%);
}


.uv-art-browser {
    position: relative;

    width: 145px;
    height: 105px;

    background: #fff;

    border-radius: 12px;

    box-shadow:
        0 18px 35px rgba(36, 16, 95, .14);

    transform:
        rotate(-3deg);
}


.uv-art-browser-content {
    position: relative;

    height:
        calc(100% - 18px);

    padding: 10px;
}


.uv-art-browser-image {
    width: 52px;
    height: 48px;

    float: left;

    margin-right: 9px;

    border-radius: 7px;

    background:
        linear-gradient(135deg,
            #5425b7,
            #ff174f);
}


.uv-art-browser-lines {
    display: flex;

    flex-direction: column;

    gap: 6px;

    padding-top: 4px;
}


.uv-art-browser-lines span {
    height: 5px;

    border-radius: 10px;

    background: #ded8ef;
}


.uv-art-browser-lines span:nth-child(1) {
    width: 50px;
}

.uv-art-browser-lines span:nth-child(2) {
    width: 35px;
}

.uv-art-browser-lines span:nth-child(3) {
    width: 45px;
}


.uv-art-pencil {
    position: absolute;

    right: 17px;
    bottom: 12px;

    font-size: 37px;

    color: #ff174f;

    transform:
        rotate(-35deg);
}


/* =========================================================
   SOCIAL ART
========================================================= */

.uv-art-social {
    background:
        radial-gradient(circle,
            #ffe7f0,
            transparent 68%);
}


.uv-social-bubble {
    position: absolute;

    width: 47px;
    height: 47px;

    display: grid;

    place-items: center;

    border-radius: 14px;

    color: #fff;

    font-size: 23px;

    font-weight: 900;

    box-shadow:
        0 12px 25px rgba(36, 16, 95, .18);
}


.social-instagram {
    top: 27px;
    left: 38px;

    background:
        linear-gradient(135deg,
            #833ab4,
            #fd1d1d,
            #fcb045);
}


.social-facebook {
    bottom: 27px;
    left: 55px;

    background: #1877f2;
}


.social-youtube {
    top: 52px;
    right: 32px;

    background: #ff174f;
}


.uv-social-megaphone {
    position: absolute;

    left: 84px;
    top: 70px;

    font-size: 45px;

    transform:
        rotate(-10deg);
}


.uv-social-spark {
    position: absolute;

    top: 20px;
    right: 55px;

    color: #ff174f;

    font-size: 20px;
}


/* =========================================================
   CONTENT ART
========================================================= */

.uv-art-content {
    background:
        radial-gradient(circle,
            #fff0f4,
            transparent 68%);
}


.uv-content-paper {
    position: relative;

    width: 105px;
    height: 125px;

    padding: 14px;

    border-radius: 9px;

    background: #fff;

    box-shadow:
        0 18px 35px rgba(36, 16, 95, .15);

    transform:
        rotate(-6deg);
}


.uv-content-paper-top {
    display: flex;

    justify-content: space-between;

    margin-bottom: 14px;
}


.uv-content-paper-top span {
    width: 28px;
    height: 6px;

    border-radius: 10px;

    background: #5425b7;
}


.uv-content-paper-top span:last-child {
    width: 17px;

    background: #ff174f;
}


.uv-content-lines {
    display: flex;

    flex-direction: column;

    gap: 6px;
}


.uv-content-lines i {
    display: block;

    height: 5px;

    border-radius: 10px;

    background: #e5e1ed;
}


.uv-content-lines i:nth-child(1) {
    width: 75%;
}

.uv-content-lines i:nth-child(2) {
    width: 95%;
}

.uv-content-lines i:nth-child(3) {
    width: 65%;
}

.uv-content-lines i:nth-child(4) {
    width: 82%;
}


.uv-content-image {
    width: 100%;
    height: 35px;

    margin-top: 12px;

    border-radius: 5px;

    background:
        linear-gradient(135deg,
            #5425b7,
            #ff174f);
}


.uv-content-pen {
    position: absolute;

    right: 27px;
    top: 45px;

    color: #ff174f;

    font-size: 42px;

    transform:
        rotate(35deg);
}


.uv-content-play {
    position: absolute;

    right: 24px;
    bottom: 28px;

    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: #1557a6;

    color: #fff;

    font-size: 13px;
}


/* =========================================================
   DEVELOPMENT ART
========================================================= */

.uv-art-development {
    background:
        radial-gradient(circle,
            #e9f1ff,
            transparent 68%);
}


.uv-code-window {
    position: relative;

    width: 145px;
    height: 105px;

    padding: 30px 15px 15px;

    border-radius: 13px;

    background:
        #17132a;

    box-shadow:
        0 20px 40px rgba(20, 10, 50, .2);

    transform:
        rotate(3deg);
}


.uv-code-top {
    position: absolute;

    left: 0;
    right: 0;
    top: 0;

    height: 22px;

    display: flex;

    align-items: center;

    gap: 5px;

    padding-left: 10px;

    background: #211b38;

    border-radius:
        13px 13px 0 0;
}


.uv-code-top i {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #ff174f;
}


.uv-code-top i:nth-child(2) {
    background: #ffb400;
}


.uv-code-top i:nth-child(3) {
    background: #35c759;
}


.uv-code-lines {
    display: flex;

    flex-direction: column;

    gap: 7px;
}


.uv-code-lines span {
    height: 4px;

    border-radius: 5px;

    background:
        linear-gradient(90deg,
            #5425b7,
            #ff174f);
}


.uv-code-lines span:nth-child(1) {
    width: 65%;
}

.uv-code-lines span:nth-child(2) {
    width: 90%;
}

.uv-code-lines span:nth-child(3) {
    width: 48%;
}

.uv-code-lines span:nth-child(4) {
    width: 75%;
}

.uv-code-lines span:nth-child(5) {
    width: 55%;
}


.uv-code-symbol {
    position: absolute;

    right: 12px;
    bottom: 10px;

    color: #fff;

    font-size: 16px;

    font-weight: 800;
}


/* =========================================================
   ECOMMERCE ART
========================================================= */

.uv-art-ecommerce {
    background:
        radial-gradient(circle,
            #e8f3ff,
            transparent 68%);
}


.uv-shop-bag {
    position: absolute;

    left: 55px;
    top: 40px;
}


.uv-shop-body {
    width: 75px;
    height: 75px;

    border-radius:
        7px 7px 14px 14px;

    background:
        linear-gradient(135deg,
            #5425b7,
            #1557a6);

    transform:
        skew(-5deg);
}


.uv-shop-handle {
    position: absolute;

    width: 32px;
    height: 22px;

    left: 21px;
    top: -13px;

    border:
        5px solid #5425b7;

    border-bottom: none;

    border-radius:
        20px 20px 0 0;
}


.uv-shop-product {
    position: absolute;

    width: 30px;
    height: 30px;

    border-radius: 8px;

    box-shadow:
        0 8px 20px rgba(36, 16, 95, .12);
}


.product-one {
    left: 35px;
    top: 22px;

    background: #ff174f;

    transform:
        rotate(-15deg);
}


.product-two {
    right: 30px;
    bottom: 20px;

    background: #ffb400;

    transform:
        rotate(15deg);
}


.uv-shop-cart {
    position: absolute;

    right: 20px;
    bottom: 20px;

    font-size: 30px;
}


/* =========================================================
   BRANDING ART
========================================================= */

.uv-art-branding {
    background:
        radial-gradient(circle,
            #f0eaff,
            transparent 68%);
}


.uv-brand-shape {
    position: absolute;

    border-radius: 20px;

    transform:
        rotate(25deg);
}


.brand-one {
    width: 65px;
    height: 65px;

    left: 48px;
    top: 43px;

    background: #5425b7;
}


.brand-two {
    width: 65px;
    height: 65px;

    right: 43px;
    top: 35px;

    background: #ff174f;

    transform:
        rotate(45deg);
}


.brand-three {
    width: 48px;
    height: 48px;

    left: 78px;
    bottom: 27px;

    background: #1557a6;

    transform:
        rotate(15deg);
}


.uv-brand-star {
    position: absolute;

    left: 80px;
    top: 62px;

    z-index: 2;

    color: #fff;

    font-size: 38px;
}


/* =========================================================
   CARD TEXT
========================================================= */

.uv-service-card h3 {
    position: relative;

    margin:
        5px 0 8px;

    font-size: 19px;

    line-height: 1.2;

    color: #201a30;
}


.uv-service-card p {
    position: relative;

    max-width: 215px;

    margin: 0 auto 18px;

    color: #777283;

    font-size: 12px;

    line-height: 1.55;
}


/* =========================================================
   CARD LINK
========================================================= */

.uv-service-link {
    position: relative;

    margin-top: auto;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: #4b24a7;

    font-size: 11px;

    font-weight: 800;

    text-decoration: none;

    transition: .3s ease;
}


.uv-service-link span {
    width: 28px;
    height: 28px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:
        linear-gradient(135deg,
            #5425b7,
            #ff174f);

    color: #fff;

    font-size: 14px;

    transition: .3s ease;
}


.uv-service-link:hover {
    color: #ff174f;
}


.uv-service-link:hover span {
    transform:
        translate(3px, -3px) rotate(5deg);
}


/* =========================================================
   SLIDER ARROWS
========================================================= */

.uv-services-arrow {
    position: absolute;

    z-index: 20;

    width: 52px;
    height: 52px;

    display: grid;

    place-items: center;

    border: none;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, .96);

    color: #24105f;

    font-size: 35px;

    line-height: 1;

    cursor: pointer;

    box-shadow:
        0 15px 35px rgba(12, 5, 50, .2);

    transition: .3s ease;
}


.uv-services-prev {
    left: -22px;
}


.uv-services-next {
    right: -22px;
}


.uv-services-arrow:hover {
    color: #fff;

    background:
        linear-gradient(135deg,
            #5425b7,
            #ff174f);

    transform:
        scale(1.08);
}


.uv-services-arrow:disabled {
    opacity: .35;

    cursor: default;

    transform: none;
}


/* =========================================================
   DOTS
========================================================= */

.uv-services-dots {
    display: flex;

    justify-content: center;

    align-items: center;

    gap: 9px;

    margin-top: 8px;
}


.uv-service-dot {
    width: 9px;
    height: 9px;

    padding: 0;

    border: none;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, .35);

    cursor: pointer;

    transition: .3s ease;
}


.uv-service-dot.active {
    width: 27px;

    border-radius: 20px;

    background:
        #ff174f;

    box-shadow:
        0 0 18px rgba(255, 23, 79, .45);
}


/* =========================================================
   BOTTOM
========================================================= */

.uv-services-bottom {
    position: relative;

    z-index: 5;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;

    margin-top: 38px;

    padding:
        0 25px;
}


.uv-services-trust {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding: 10px 17px;

    border-radius: 100px;

    background:
        rgba(255, 255, 255, .12);

    border:
        1px solid rgba(255, 255, 255, .13);

    color: rgba(255, 255, 255, .85);

    font-size: 10px;

    font-weight: 700;

    backdrop-filter:
        blur(10px);
}


.uv-trust-check,
.uv-trust-chart {
    width: 23px;
    height: 23px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:
        #ff174f;

    color: #fff;

    font-size: 11px;
}


.uv-services-bottom-center {
    display: flex;

    align-items: center;

    gap: 12px;

    color:
        rgba(255, 255, 255, .5);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.5px;
}


.uv-services-bottom-center span {
    color: #ff174f;
}


/* =========================================================
   ANIMATION
========================================================= */

@keyframes uvServiceSpin {

    from {
        transform: rotate(0);
    }

    to {
        transform: rotate(360deg);
    }
}


/* =========================================================
   LARGE LAPTOP
========================================================= */

@media (max-width: 1250px) {

    .uv-service-card {
        flex-basis:
            calc((100% - 54px) / 4);
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .uv-services-container {
        width:
            calc(100% - 50px);

        padding:
            100px 0 80px;
    }


    .uv-service-card {
        flex-basis:
            calc((100% - 36px) / 3);
    }


    .uv-services-bottom-center {
        display: none;
    }


    .uv-services-bottom {
        justify-content: space-between;
    }


    .uv-services-prev {
        left: -16px;
    }


    .uv-services-next {
        right: -16px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .uv-services-showcase {
        min-height: auto;
    }


    .uv-services-wave-top {
        height: 80px;

        top: -45px;
    }


    .uv-services-wave-bottom {
        height: 90px;

        bottom: -55px;
    }


    .uv-services-container {
        width:
            calc(100% - 30px);

        padding:
            85px 0 70px;
    }


    .uv-services-heading {
        margin-bottom: 28px;
    }


    .uv-services-badge {
        padding:
            7px 15px;

        font-size: 10px;
    }


    .uv-services-heading h2 {
        margin-top: 16px;

        font-size:
            clamp(31px, 9vw, 44px);

        letter-spacing:
            -1.5px;
    }


    .uv-services-heading p {
        font-size: 13px;

        line-height: 1.6;

        margin-top: 12px;
    }


    .uv-services-track-wrap {
        padding:
            10px 10px 25px;
    }


    .uv-service-card {
        flex:
            0 0 calc(100% - 10px);

        min-height: 390px;

        padding:
            28px 22px 25px;

        border-radius: 22px;
    }


    .uv-service-art {
        width: 210px;
        height: 175px;
    }


    .uv-service-card h3 {
        font-size: 20px;
    }


    .uv-service-card p {
        font-size: 13px;

        max-width: 270px;
    }


    .uv-services-arrow {
        width: 42px;
        height: 42px;

        font-size: 28px;
    }


    .uv-services-prev {
        left: -7px;
    }


    .uv-services-next {
        right: -7px;
    }


    .uv-services-bottom {
        margin-top: 20px;

        padding:
            0 4px;

        justify-content:
            center;
    }


    .uv-services-trust {
        font-size: 8px;

        padding:
            8px 11px;
    }


    .uv-services-trust:last-child {
        display: none;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

    .uv-services-container {
        width:
            calc(100% - 20px);
    }


    .uv-service-card {
        flex-basis:
            calc(100% - 5px);
    }


    .uv-services-heading h2 {
        font-size: 32px;
    }


    .uv-services-heading p {
        font-size: 12px;
    }


    .uv-service-art {
        transform:
            scale(.92);
    }


    .uv-services-arrow {
        width: 38px;
        height: 38px;

        font-size: 25px;
    }


    .uv-services-prev {
        left: -4px;
    }


    .uv-services-next {
        right: -4px;
    }

}

/* =========================================================
   SMOOTHER SERVICES CAROUSEL
========================================================= */

.uv-services-track {
    display: flex;
    gap: 18px;

    will-change: transform;

    transition:
        transform 900ms cubic-bezier(.65, 0, .35, 1);

    cursor: grab;
}

.uv-services-track.is-dragging {
    cursor: grabbing;
    transition: none;
}

.uv-service-card {
    transition:
        transform .45s cubic-bezier(.2, .8, .2, 1),
        box-shadow .45s ease,
        opacity .45s ease;
}

.uv-service-card:hover {
    transform: translateY(-10px) scale(1.015);
}


/* Smooth arrow interaction */

.uv-services-arrow {
    transition:
        transform .35s cubic-bezier(.2, .8, .2, 1),
        background .35s ease,
        color .35s ease,
        box-shadow .35s ease;
}

.uv-services-arrow:hover {
    transform: scale(1.08);
}

.uv-services-arrow:active {
    transform: scale(.94);
}


/* Active dot */

.uv-service-dot {
    transition:
        width .4s cubic-bezier(.2, .8, .2, 1),
        background .3s ease,
        transform .3s ease;
}

.uv-service-dot.active {
    width: 27px;
}


/* Mobile */

@media (max-width: 767px) {

    .uv-services-track {
        gap: 14px;
        transition:
            transform 700ms cubic-bezier(.65, 0, .35, 1);
    }

    .uv-service-card:hover {
        transform: none;
    }

}

/* =========================================
   SECTION 05 — CREATIVE DARK WORK
========================================= */

/* =========================================================
   UNIVERSE VYPAAR — CREATIVE PORTFOLIO
========================================================= */

.uv-portfolio-showcase {

    --uv-purple: #24105f;
    --uv-purple-light: #5b28c7;
    --uv-pink: #ff174f;
    --uv-blue: #1557a6;
    --uv-dark: #191522;
    --uv-muted: #777381;

    position: relative;

    width: 100%;

    overflow: hidden;

    background:
        radial-gradient(circle at 12% 20%,
            rgba(84, 37, 183, .07),
            transparent 25%),
        radial-gradient(circle at 90% 40%,
            rgba(255, 23, 79, .07),
            transparent 24%),
        #f8f8fb;

    color: var(--uv-dark);

    padding:
        110px 0 100px;
}


/* =========================================================
   BACKGROUND GRID
========================================================= */

.uv-portfolio-bg-grid {

    position: absolute;

    inset: 0;

    opacity: .4;

    background-image:
        linear-gradient(rgba(36, 16, 95, .035) 1px,
            transparent 1px),
        linear-gradient(90deg,
            rgba(36, 16, 95, .035) 1px,
            transparent 1px);

    background-size:
        70px 70px;

    mask-image:
        linear-gradient(to bottom,
            transparent,
            black 15%,
            black 85%,
            transparent);
}


.uv-portfolio-orb {

    position: absolute;

    border-radius: 50%;

    filter: blur(80px);

    pointer-events: none;

    opacity: .25;
}


.uv-portfolio-orb-one {

    width: 350px;
    height: 350px;

    top: 220px;
    left: -160px;

    background: #5425b7;
}


.uv-portfolio-orb-two {

    width: 300px;
    height: 300px;

    right: -130px;
    bottom: 180px;

    background: #ff174f;
}


/* =========================================================
   CONTAINER
========================================================= */

.uv-portfolio-container {

    position: relative;

    z-index: 2;

    width:
        min(1200px,
            calc(100% - 60px));

    margin: auto;
}


/* =========================================================
   HEADER
========================================================= */

.uv-portfolio-eyebrow {

    display: flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 20px;

    color: var(--uv-pink);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 2px;
}


.uv-portfolio-eyebrow span {

    width: 22px;
    height: 2px;

    background:
        linear-gradient(90deg,
            var(--uv-purple),
            var(--uv-pink));
}


.uv-portfolio-heading-row {

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    gap: 50px;
    padding-bottom: 15px;
}


.uv-portfolio-heading-row h2 {

    max-width: 760px;

    margin: 0;

    font-size:
        clamp(48px,
            5.5vw,
            76px);

    line-height: .98;

    letter-spacing: -4px;

    font-weight: 850;
}


.uv-portfolio-heading-row h2 span {

    display: block;

    background:
        linear-gradient(90deg,
            var(--uv-purple),
            var(--uv-purple-light),
            var(--uv-pink));

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}


.uv-portfolio-heading-row p {

    max-width: 530px;

    margin:
        22px 0 0;

    color: var(--uv-muted);

    font-size: 15px;

    line-height: 1.7;
}


/* HEADER STAT */

.uv-portfolio-header-stat {

    display: flex;

    align-items: flex-end;

    gap: 12px;

    padding-bottom: 5px;

    white-space: nowrap;
}


.uv-portfolio-header-stat strong {

    font-size: 42px;

    line-height: 1;

    color: var(--uv-purple);
}


.uv-portfolio-header-stat span {

    color: #aaa6b2;

    font-size: 8px;

    line-height: 1.5;

    font-weight: 800;

    letter-spacing: 1px;
}


/* =========================================================
   FILTERS
========================================================= */

.uv-portfolio-filters {

    display: flex;

    gap: 8px;

    margin:
        32px 0 22px;
}


.uv-portfolio-filter {

    padding:
        9px 17px;

    border:
        1px solid #ddd9e6;

    border-radius: 100px;

    background:
        rgba(255, 255, 255, .75);

    color: #777381;

    font-size: 10px;

    font-weight: 800;

    cursor: pointer;

    transition: .3s ease;
}


.uv-portfolio-filter:hover {

    border-color:
        var(--uv-purple);

    color:
        var(--uv-purple);
}


.uv-portfolio-filter.active {

    color: #fff;

    border-color:
        transparent;

    background:
        linear-gradient(100deg,
            var(--uv-purple),
            var(--uv-purple-light),
            var(--uv-pink));

    box-shadow:
        0 8px 22px rgba(84, 37, 183, .2);
}


/* =========================================================
   FEATURED PROJECT
========================================================= */

.uv-featured-project {

    position: relative;

    overflow: hidden;

    border:
        1px solid #e4e1eb;

    border-radius: 28px;

    background:
        linear-gradient(145deg,
            #21163d,
            #30205c 55%,
            #17152b);

    box-shadow:
        0 30px 80px rgba(36, 16, 95, .14);

    transition:
        transform .5s ease,
        box-shadow .5s ease;
}


.uv-featured-project:hover {

    transform:
        translateY(-5px);

    box-shadow:
        0 40px 100px rgba(36, 16, 95, .2);
}


.uv-featured-project-top {

    position: absolute;

    z-index: 10;

    left: 25px;
    right: 25px;
    top: 20px;

    display: flex;

    justify-content: space-between;

    color:
        rgba(255, 255, 255, .4);

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1.5px;
}


/* =========================================================
   FEATURED VISUAL
========================================================= */

.uv-featured-visual {

    position: relative;

    height: 490px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;
}


.uv-featured-bg-word {

    position: absolute;

    left: 30px;
    bottom: 35px;

    color:
        rgba(255, 255, 255, .025);

    font-size:
        clamp(100px,
            16vw,
            220px);

    font-weight: 900;

    line-height: .8;

    letter-spacing: -10px;

    user-select: none;
}


/* =========================================================
   BROWSER
========================================================= */

.uv-featured-browser {

    position: relative;

    z-index: 3;

    width:
        min(720px,
            68%);

    transform:
        rotate(-2deg);

    border-radius: 16px;

    background: #fff;

    box-shadow:
        0 40px 80px rgba(0, 0, 0, .3);

    transition:
        transform .6s cubic-bezier(.2, .8, .2, 1);
}


.uv-featured-project:hover .uv-featured-browser {

    transform:
        rotate(0deg) translateY(-8px) scale(1.015);
}


.uv-browser-header {

    height: 34px;

    display: flex;

    align-items: center;

    gap: 15px;

    padding:
        0 13px;

    border-bottom:
        1px solid #eee;

    background: #f6f5f8;

    border-radius:
        16px 16px 0 0;
}


.uv-browser-dots {

    display: flex;

    gap: 5px;
}


.uv-browser-dots i {

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #ff174f;
}


.uv-browser-dots i:nth-child(2) {
    background: #f2ad25;
}


.uv-browser-dots i:nth-child(3) {
    background: #35b85a;
}


.uv-browser-address {

    flex: 1;

    height: 19px;

    display: flex;

    align-items: center;

    padding: 0 10px;

    border-radius: 6px;

    background: #eae8ee;

    color: #aaa6b1;

    font-size: 10px;
}


/* SITE */

.uv-featured-site {

    position: relative;

    height: 365px;

    overflow: hidden;

    background:
        linear-gradient(135deg,
            #faf8ff,
            #ffffff);
}


.uv-featured-site-nav {

    height: 55px;

    display: flex;

    align-items: center;

    gap: 24px;

    padding:
        0 30px;

    border-bottom:
        1px solid #eeeaf5;

    color: #817c8d;

    font-size: 10px;
}


.uv-featured-site-nav strong {

    margin-right: auto;

    color: #24105f;

    font-size: 11px;

    letter-spacing: 1px;
}


.uv-featured-site-nav b {

    padding:
        8px 12px;

    border-radius: 8px;

    background:
        var(--uv-purple);

    color: #fff;

    font-size: 10px;
}


.uv-featured-site-content {

    position: absolute;

    z-index: 4;

    left: 55px;
    top: 105px;

    max-width: 310px;
}


.uv-featured-site-content small {

    color: var(--uv-pink);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 1.5px;
}


.uv-featured-site-content h3 {

    margin:
        12px 0 10px;

    color: #171322;

    font-size: 42px;

    line-height: .9;

    letter-spacing: -2px;
}


.uv-featured-site-content h3 em {

    display: block;

    color:
        var(--uv-purple-light);

    font-style: normal;
}


.uv-featured-site-content p {

    max-width: 220px;

    color: #85808d;

    font-size: 9px;

    line-height: 1.5;
}


.uv-featured-site-content button {

    margin-top: 14px;

    padding:
        9px 18px;

    border: none;

    border-radius: 8px;

    background:
        var(--uv-purple);

    color: #fff;

    font-size: 8px;

    font-weight: 800;
}


/* SITE SHAPE */

.uv-featured-site-shape {

    position: absolute;

    width: 310px;
    height: 310px;

    right: -45px;
    bottom: -80px;

    border-radius:
        50%;

    background:
        linear-gradient(135deg,
            #24105f,
            #ff174f);

    opacity: .95;
}


.uv-featured-site-shape div {

    position: absolute;

    width: 160px;
    height: 160px;

    left: 65px;
    top: 65px;

    border-radius:
        50%;

    background:
        rgba(255, 255, 255, .13);

    border:
        1px solid rgba(255, 255, 255, .3);
}


/* CHART */

.uv-featured-site-chart {

    position: absolute;

    z-index: 5;

    right: 50px;
    bottom: 30px;

    width: 180px;
    height: 90px;

    display: flex;

    align-items: flex-end;

    gap: 10px;
}


.uv-featured-site-chart span {

    width: 18px;

    border-radius:
        7px 7px 0 0;

    background:
        linear-gradient(to top,
            #ff174f,
            #8c4bea);

    opacity: .9;
}


.uv-featured-site-chart span:nth-child(1) {
    height: 25%;
}

.uv-featured-site-chart span:nth-child(2) {
    height: 35%;
}

.uv-featured-site-chart span:nth-child(3) {
    height: 42%;
}

.uv-featured-site-chart span:nth-child(4) {
    height: 58%;
}

.uv-featured-site-chart span:nth-child(5) {
    height: 75%;
}

.uv-featured-site-chart span:nth-child(6) {
    height: 95%;
}


/* =========================================================
   RESULT BADGE
========================================================= */

.uv-project-result {

    position: absolute;

    z-index: 7;

    right:
        10%;

    top:
        19%;

    padding:
        15px 20px;

    border:
        1px solid rgba(255, 255, 255, .12);

    border-radius:
        13px;

    background:
        rgba(20, 15, 36, .88);

    box-shadow:
        0 20px 40px rgba(0, 0, 0, .25);

    backdrop-filter:
        blur(12px);

    transform:
        rotate(4deg);

    animation:
        uvPortfolioFloat 4s ease-in-out infinite;
}


.uv-project-result span {

    display: block;

    margin-bottom: 4px;

    color:
        rgba(255, 255, 255, .45);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1px;
}


.uv-project-result strong {

    display: block;

    color: #fff;

    font-size: 23px;
}


.uv-project-result small {

    color: #48d995;

    font-size: 10px;
}


/* LIVE */

.uv-project-live {

    position: absolute;

    z-index: 7;

    left: 10%;

    top: 31%;

    display: flex;

    align-items: center;

    gap: 6px;

    padding:
        7px 11px;

    border-radius:
        100px;

    background:
        rgba(25, 20, 40, .85);

    color:
        rgba(255, 255, 255, .65);

    font-size: 10px;

    font-weight: 800;
}


.uv-project-live i {

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background:
        #35d68c;

    box-shadow:
        0 0 12px #35d68c;

    animation:
        uvLivePulse 1.5s infinite;
}


/* =========================================================
   FEATURED INFO
========================================================= */

.uv-featured-info {

    display: grid;

    grid-template-columns:
        1.1fr 1fr auto;

    align-items: center;

    gap: 35px;

    padding:
        23px 30px;

    border-top:
        1px solid rgba(255, 255, 255, .08);
}


.uv-featured-info small {

    color:
        #ff426d;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 1px;
}


.uv-featured-info h3 {

    margin:
        8px 0 0;

    color: #fff;

    font-size: 17px;
}


.uv-featured-info h3 span {

    color:
        #a873ff;
}


.uv-featured-info p {

    margin: 0;

    color:
        rgba(255, 255, 255, .45);

    font-size: 8px;

    line-height: 1.6;
}


.uv-featured-info a {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    color: #fff;

    font-size: 9px;

    font-weight: 800;

    text-decoration: none;

    white-space: nowrap;
}


.uv-featured-info a span {

    width: 27px;
    height: 27px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:
        var(--uv-pink);

    transition: .3s ease;
}


.uv-featured-info a:hover span {

    transform:
        translate(3px, -3px);
}


/* =========================================================
   PROJECT GRID
========================================================= */

.uv-project-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 15px;

    margin-top: 15px;
}


.uv-project-card {

    position: relative;

    overflow: hidden;

    border:
        1px solid #e3e0ea;

    border-radius: 22px;

    background: #fff;

    box-shadow:
        0 15px 40px rgba(36, 16, 95, .07);

    transition:
        transform .45s ease,
        box-shadow .45s ease;
}


.uv-project-card:hover {

    transform:
        translateY(-9px);

    box-shadow:
        0 25px 55px rgba(36, 16, 95, .13);
}


.uv-project-card-number {

    position: absolute;

    z-index: 5;

    left: 17px;
    top: 15px;

    color: #a5a1ae;

    font-size: 8px;

    font-weight: 900;
}


.uv-project-card-visual {

    position: relative;

    height: 245px;

    overflow: hidden;
}


/* =========================================================
   ECOMMERCE VISUAL
========================================================= */

.ecommerce-visual {

    background:
        linear-gradient(135deg,
            #eee8ff,
            #f9f6ff);
}


.uv-phone {

    position: absolute;

    left: 50%;
    top: 50%;

    width: 130px;
    height: 225px;

    transform:
        translate(-50%, -46%) rotate(-5deg);

    padding: 7px;

    border-radius: 20px;

    background:
        #181425;

    box-shadow:
        0 25px 45px rgba(36, 16, 95, .22);
}


.uv-phone-screen {

    position: relative;

    height: 100%;

    overflow: hidden;

    border-radius: 14px;

    background: #fff;
}


.uv-phone-top {

    position: absolute;

    z-index: 5;

    width: 45px;
    height: 9px;

    left: 50%;
    top: 9px;

    transform:
        translateX(-50%);

    border-radius: 20px;

    background: #181425;
}


.uv-shop-logo {

    margin:
        27px 10px 10px;

    color:
        var(--uv-purple);

    font-size: 16px;

    font-weight: 900;
}


.uv-shop-hero {

    height: 75px;

    margin:
        0 10px;

    border-radius: 10px;

    background:
        linear-gradient(135deg,
            #5425b7,
            #ff174f);
}


.uv-shop-lines {

    display: flex;

    flex-direction: column;

    gap: 4px;

    margin:
        12px 10px;
}


.uv-shop-lines i {

    height: 4px;

    border-radius: 5px;

    background: #ddd8e7;
}


.uv-shop-lines i:nth-child(1) {
    width: 75%;
}

.uv-shop-lines i:nth-child(2) {
    width: 55%;
}

.uv-shop-lines i:nth-child(3) {
    width: 65%;
}


.uv-shop-products {

    display: flex;

    gap: 5px;

    padding:
        0 10px;
}


.uv-shop-products span {

    width: 29px;
    height: 35px;

    border-radius: 6px;

    background:
        #f0ebf9;
}


.uv-shop-products span:nth-child(2) {
    background: #ffe7ef;
}


.uv-shop-products span:nth-child(3) {
    background: #e8f2ff;
}


.uv-project-floating-tag {

    position: absolute;

    right: 18%;

    top: 28%;

    padding:
        9px 13px;

    border-radius:
        10px;

    background:
        #fff;

    color:
        #35a878;

    font-size: 8px;

    font-weight: 900;

    box-shadow:
        0 15px 30px rgba(36, 16, 95, .12);

    transform:
        rotate(7deg);
}


/* =========================================================
   BRANDING
========================================================= */

.branding-visual {

    background:
        radial-gradient(circle at center,
            #eee5ff,
            #faf9fd 65%);
}


.uv-brand-orbit {

    position: absolute;

    width: 180px;
    height: 180px;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%);

    border:
        1px dashed #cfc5e8;

    border-radius: 50%;

    animation:
        uvBrandRotate 20s linear infinite;
}


.uv-brand-logo {

    position: absolute;

    left: 50%;
    top: 50%;

    width: 78px;
    height: 78px;

    display: grid;

    place-items: center;

    transform:
        translate(-50%, -50%);

    border-radius:
        23px;

    background:
        linear-gradient(135deg,
            #24105f,
            #ff174f);

    color: #fff;

    font-size: 38px;

    font-weight: 900;

    box-shadow:
        0 20px 40px rgba(84, 37, 183, .28);
}


.uv-brand-name {

    position: absolute;

    left: 50%;
    top: 73%;

    transform:
        translateX(-50%);

    color:
        #24105f;

    font-size: 11px;

    font-weight: 900;

    letter-spacing: 3px;
}


.uv-brand-name small {

    display: block;

    margin-top: 4px;

    color: #9993a5;

    font-size: 5px;

    text-align: center;

    letter-spacing: 2px;
}


.uv-brand-particle {

    position: absolute;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background:
        var(--uv-pink);
}


.bp-one {

    top: 27%;
    left: 24%;
}


.bp-two {

    right: 24%;
    top: 35%;

    background:
        var(--uv-blue);
}


.bp-three {

    left: 28%;
    bottom: 24%;

    background:
        var(--uv-purple-light);
}


/* =========================================================
   MARKETING
========================================================= */

.marketing-visual {

    background:
        linear-gradient(135deg,
            #f5efff,
            #fff1f5);
}


.uv-growth-value {

    position: absolute;

    top: 35px;
    right: 30px;

    color:
        #24105f;

    font-size: 34px;

    font-weight: 900;

    letter-spacing: -2px;
}


.uv-growth-chart {

    position: absolute;

    left: 30px;
    right: 30px;
    bottom: 45px;

    height: 105px;

    display: flex;

    align-items: flex-end;

    gap: 8px;
}


.uv-growth-chart span {

    flex: 1;

    border-radius:
        6px 6px 0 0;

    background:
        linear-gradient(to top,
            #5425b7,
            #ff174f);

    clip-path:
        polygon(0 100%,
            100% 100%,
            100% 0,
            0 100%);
}


.uv-growth-chart span:nth-child(1) {
    height: 20%;
}

.uv-growth-chart span:nth-child(2) {
    height: 32%;
}

.uv-growth-chart span:nth-child(3) {
    height: 38%;
}

.uv-growth-chart span:nth-child(4) {
    height: 52%;
}

.uv-growth-chart span:nth-child(5) {
    height: 67%;
}

.uv-growth-chart span:nth-child(6) {
    height: 82%;
}

.uv-growth-chart span:nth-child(7) {
    height: 100%;
}


.uv-growth-label {

    position: absolute;

    left: 30px;
    bottom: 18px;

    color: #aaa4b3;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 1.5px;
}


/* =========================================================
   PROJECT INFO
========================================================= */

.uv-project-card-info {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 15px;

    padding:
        18px 20px 20px;
}


.uv-project-card-info small {

    color:
        var(--uv-pink);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 1px;
}


.uv-project-card-info h3 {

    margin:
        5px 0 4px;

    color:
        #211b2d;

    font-size: 15px;
}


.uv-project-card-info p {

    margin: 0;

    color:
        #9994a1;

    font-size: 8px;
}


.uv-project-card-info a {

    width: 34px;
    height: 34px;

    flex-shrink: 0;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:
        #f1edfa;

    color:
        var(--uv-purple);

    text-decoration: none;

    font-size: 16px;

    transition: .3s ease;
}


.uv-project-card-info a:hover {

    color: #fff;

    background:
        linear-gradient(135deg,
            var(--uv-purple),
            var(--uv-pink));

    transform:
        translate(2px, -2px);
}


/* =========================================================
   BOTTOM CTA
========================================================= */

.uv-portfolio-bottom {

    display: grid;

    grid-template-columns:
        1fr 1fr auto;

    align-items: center;

    gap: 35px;

    margin-top: 45px;

    padding-top: 28px;

    border-top:
        1px solid #e1dee8;
}


.uv-portfolio-bottom>div span {

    color:
        var(--uv-pink);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 1.5px;
}


.uv-portfolio-bottom h3 {

    margin:
        8px 0 0;

    font-size: 23px;

    letter-spacing: -.7px;
}


.uv-portfolio-bottom h3 strong {

    color:
        var(--uv-purple-light);
}


.uv-portfolio-bottom p {

    margin: 0;

    color:
        #85808e;

    font-size: 13px;

    line-height: 1.6;
}


.uv-portfolio-bottom>a {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding:
        10px 15px;

    border-radius:
        100px;

    background:
        #fff;

    border:
        1px solid #ddd8e7;

    color:
        #30283d;

    text-decoration: none;

    font-size: 9px;

    font-weight: 800;

    white-space: nowrap;

    transition: .3s ease;
}


.uv-portfolio-bottom>a span {

    width: 25px;
    height: 25px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:
        var(--uv-pink);

    color: #fff;
}


.uv-portfolio-bottom>a:hover {

    color: #fff;

    border-color:
        transparent;

    background:
        var(--uv-purple);

    transform:
        translateY(-3px);
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes uvPortfolioFloat {

    0%,
    100% {
        transform:
            translateY(0) rotate(4deg);
    }

    50% {
        transform:
            translateY(-12px) rotate(4deg);
    }
}


@keyframes uvLivePulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: .4;
        transform: scale(.7);
    }
}


@keyframes uvBrandRotate {

    from {
        transform:
            translate(-50%, -50%) rotate(0);
    }

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


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .uv-portfolio-showcase {

        padding:
            90px 0 80px;
    }


    .uv-portfolio-heading-row {

        align-items: flex-start;
    }


    .uv-portfolio-header-stat {

        display: none;
    }


    .uv-featured-visual {

        height: 430px;
    }


    .uv-featured-site {

        height: 315px;
    }


    .uv-featured-browser {

        width: 75%;
    }


    .uv-featured-site-content {

        left: 40px;
        top: 85px;
    }


    .uv-featured-site-content h3 {

        font-size: 34px;
    }


    .uv-featured-info {

        grid-template-columns:
            1fr 1fr;
    }


    .uv-featured-info a {

        grid-column: 2;

        justify-self: end;
    }


    .uv-project-grid {

        gap: 12px;
    }


    .uv-project-card-visual {

        height: 210px;
    }


    .uv-portfolio-bottom {

        grid-template-columns:
            1fr 1fr;
    }


    .uv-portfolio-bottom>a {

        justify-self: start;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .uv-portfolio-showcase {

        padding:
            75px 0 70px;
    }


    .uv-portfolio-container {

        width:
            calc(100% - 30px);
    }


    .uv-portfolio-heading-row {

        display: block;
    }


    .uv-portfolio-heading-row h2 {

        font-size:
            clamp(40px,
                11vw,
                55px);

        letter-spacing:
            -2.5px;
    }


    .uv-portfolio-heading-row p {

        margin-top: 18px;

        font-size: 13px;
    }


    .uv-portfolio-filters {

        overflow-x: auto;

        padding-bottom: 4px;

        margin-top: 25px;

        scrollbar-width: none;
    }


    .uv-portfolio-filters::-webkit-scrollbar {
        display: none;
    }


    .uv-portfolio-filter {

        flex-shrink: 0;

        font-size: 9px;
    }


    /* FEATURED */

    .uv-featured-project {

        border-radius:
            22px;
    }


    .uv-featured-visual {

        height: 330px;
    }


    .uv-featured-browser {

        width: 90%;

        transform:
            rotate(-2deg) scale(.95);
    }


    .uv-featured-project:hover .uv-featured-browser {

        transform:
            rotate(0) scale(.97);
    }


    .uv-browser-header {

        height: 25px;
    }


    .uv-featured-site {

        height: 250px;
    }


    .uv-featured-site-nav {

        height: 38px;

        padding:
            0 15px;

        gap: 10px;

        font-size: 5px;
    }


    .uv-featured-site-nav strong {

        font-size: 8px;
    }


    .uv-featured-site-nav span {

        display: none;
    }


    .uv-featured-site-nav b {

        padding:
            5px 8px;

        font-size: 5px;
    }


    .uv-featured-site-content {

        left: 25px;

        top: 68px;
    }


    .uv-featured-site-content h3 {

        font-size: 27px;
    }


    .uv-featured-site-content p {

        max-width: 150px;

        font-size: 10px;
    }


    .uv-featured-site-content button {

        padding:
            6px 11px;

        font-size: 10px;
    }


    .uv-featured-site-shape {

        width: 190px;
        height: 190px;

        right: -45px;
        bottom: -55px;
    }


    .uv-featured-site-chart {

        right: 20px;
        bottom: 20px;

        width: 110px;
        height: 60px;

        gap: 5px;
    }


    .uv-featured-site-chart span {

        width: 10px;
    }


    .uv-project-result {

        right: 4%;

        top: 17%;

        padding:
            9px 12px;
    }


    .uv-project-result strong {

        font-size: 16px;
    }


    .uv-project-live {

        left: 5%;

        top: 32%;

        font-size: 10px;
    }


    .uv-featured-bg-word {

        font-size: 80px;

        left: 15px;
    }


    .uv-featured-info {

        display: block;

        padding:
            18px;
    }


    .uv-featured-info h3 {

        font-size: 14px;
    }


    .uv-featured-info p {

        margin:
            12px 0 15px;

        font-size: 8px;
    }


    /* SMALL PROJECTS */

    .uv-project-grid {

        display: flex;

        overflow-x: auto;

        scroll-snap-type: x mandatory;

        gap: 12px;

        margin-top: 12px;

        padding:
            5px 3px 15px;

        scrollbar-width: none;
    }


    .uv-project-grid::-webkit-scrollbar {
        display: none;
    }


    .uv-project-card {

        flex:
            0 0 calc(88%);

        scroll-snap-align: start;

        border-radius:
            20px;
    }


    .uv-project-card-visual {

        height: 235px;
    }


    /* BOTTOM */

    .uv-portfolio-bottom {

        display: block;

        margin-top: 30px;
    }


    .uv-portfolio-bottom p {

        margin:
            15px 0;
    }


    .uv-portfolio-bottom>a {

        display: inline-flex;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

    .uv-portfolio-heading-row h2 {

        font-size: 39px;
    }


    .uv-featured-visual {

        height: 300px;
    }


    .uv-featured-browser {

        width: 94%;
    }


    .uv-featured-site {

        height: 225px;
    }


    .uv-featured-site-content h3 {

        font-size: 24px;
    }


    .uv-project-result {

        transform:
            scale(.85) rotate(4deg);
    }


    .uv-project-card {

        flex-basis:
            92%;
    }

}

/* =========================================
   SECTION 06 — WHY US
========================================= */

.uv-why {

    position: relative;

    overflow: hidden;

    padding: 130px 0 125px;

    background:
        #f7f7fa;

    color: #211e29;
}


/* =========================================
   BACKGROUND
========================================= */

.uv-why-bg {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(15px);
}

.uv-why-bg-one {

    width: 600px;
    height: 600px;

    top: -300px;
    right: -250px;

    background:
        radial-gradient(circle,
            rgba(139, 92, 246, .10),
            transparent 68%);
}

.uv-why-bg-two {

    width: 500px;
    height: 500px;

    bottom: -300px;
    left: -250px;

    background:
        radial-gradient(circle,
            rgba(255, 23, 79, .06),
            transparent 68%);
}


.uv-why-container {

    position: relative;

    z-index: 2;

    width: min(1180px,
            calc(100% - 40px));

    margin: 0 auto;
}


/* =========================================
   EYEBROW
========================================= */

.uv-why-eyebrow {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 23px;

    color: #ff174f;

    font-family: "Manrope", sans-serif;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2.2px;
}

.uv-why-eyebrow span {

    width: 34px;
    height: 2px;

    border-radius: 20px;

    background:
        linear-gradient(90deg,
            #24105f,
            #ff174f);
}


/* =========================================
   HEADING
========================================= */

.uv-why-heading-grid {

    display: grid;

    grid-template-columns:
        1.15fr .7fr;

    gap: 90px;

    align-items: end;

    margin-bottom: 70px;
}

.uv-why-heading-grid h2 {

    margin: 0;

    color: #19171f;

    font-family: "Manrope", sans-serif;

    font-size: clamp(44px,
            5vw,
            72px);

    font-weight: 800;

    line-height: 1.01;

    letter-spacing: -3.5px;
}

.uv-why-heading-grid h2 span {

    display: block;

    color: #aaa7b0;
}

.uv-why-heading-grid p {

    max-width: 450px;

    margin: 0 0 5px;

    color: #77737e;

    font-family: "DM Sans", sans-serif;

    font-size: 14px;

    line-height: 1.85;
}


/* =========================================
   MAIN
========================================= */

.uv-why-main {

    display: grid;

    grid-template-columns:
        .9fr 1.1fr;

    gap: 80px;

    align-items: center;
}


/* =========================================
   POINTS
========================================= */

.uv-why-points {

    display: flex;

    flex-direction: column;
}


.uv-why-point {

    position: relative;

    display: grid;

    grid-template-columns:
        42px 1fr 34px;

    gap: 18px;

    align-items: start;

    padding: 25px 0;

    border-bottom:
        1px solid #e6e3e9;

    cursor: pointer;

    transition:
        padding .35s ease;
}

.uv-why-point:first-child {

    border-top:
        1px solid #e6e3e9;
}


.uv-why-point-number {

    padding-top: 2px;

    color: #aaa6b0;

    font-family: "Manrope", sans-serif;

    font-size: 14px;

    font-weight: 800;

    transition:
        color .3s ease;
}


.uv-why-point-content h3 {

    margin: 0;

    color: #28242f;

    font-family: "Manrope", sans-serif;

    font-size: 17px;

    font-weight: 800;

    transition:
        color .3s ease;
}

.uv-why-point-content p {

    max-width: 420px;

    margin: 8px 0 0;

    color: #89858e;

    font-size: 10px;

    line-height: 1.75;
}


.uv-why-point-arrow {

    display: grid;

    place-items: center;

    width: 30px;
    height: 30px;

    border-radius: 50%;

    color: #a7a3ad;

    background: #efedf2;

    font-size: 13px;

    transition:
        .35s ease;
}


.uv-why-point:hover,
.uv-why-point.active {

    padding-left: 8px;
}

.uv-why-point:hover .uv-why-point-number,
.uv-why-point.active .uv-why-point-number {

    color: #ff174f;
}

.uv-why-point:hover .uv-why-point-content h3,
.uv-why-point.active .uv-why-point-content h3 {

    color: #24105f;
}

.uv-why-point:hover .uv-why-point-arrow,
.uv-why-point.active .uv-why-point-arrow {

    color: #ffffff;

    background:
        linear-gradient(135deg,
            #24105f,
            #ff174f);

    transform:
        translate(2px, -2px);
}


/* =========================================
   VISUAL SYSTEM
========================================= */

.uv-why-visual {

    position: relative;

    height: 560px;

    overflow: hidden;

    border:
        1px solid #e5e1e9;

    border-radius: 28px;

    background:
        radial-gradient(circle at center,
            #ffffff,
            #f0edf5);

    box-shadow:
        0 30px 80px rgba(36, 16, 95, .07);
}


/* GRID */

.uv-why-visual::before {

    content: "";

    position: absolute;

    inset: 0;

    opacity: .45;

    background-image:
        linear-gradient(#ded9e6 1px,
            transparent 1px),
        linear-gradient(90deg,
            #ded9e6 1px,
            transparent 1px);

    background-size:
        45px 45px;

    mask-image:
        radial-gradient(circle at center,
            black,
            transparent 72%);
}


/* =========================================
   ORBITS
========================================= */

.uv-why-orbit {

    position: absolute;

    left: 50%;
    top: 50%;

    border: 1px solid rgba(36, 16, 95, .12);

    border-radius: 50%;

    transform:
        translate(-50%, -50%);

    pointer-events: none;
}

.orbit-one {

    width: 250px;
    height: 250px;

    animation:
        uvWhyRotate 18s linear infinite;
}

.orbit-two {

    width: 365px;
    height: 365px;

    border-style: dashed;

    animation:
        uvWhyRotateReverse 25s linear infinite;
}

.orbit-three {

    width: 475px;
    height: 475px;

    opacity: .55;

    animation:
        uvWhyRotate 32s linear infinite;
}


@keyframes uvWhyRotate {

    from {
        transform:
            translate(-50%, -50%) rotate(0);
    }

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

}

@keyframes uvWhyRotateReverse {

    from {
        transform:
            translate(-50%, -50%) rotate(360deg);
    }

    to {
        transform:
            translate(-50%, -50%) rotate(0);
    }

}


/* =========================================
   CENTER
========================================= */

.uv-why-center {

    position: absolute;

    z-index: 5;

    left: 50%;
    top: 50%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    width: 145px;
    height: 145px;

    border-radius: 50%;

    color: #ffffff;

    background:
        linear-gradient(145deg,
            #24105f,
            #4b24a7);

    box-shadow:
        0 25px 60px rgba(36, 16, 95, .25),
        inset 0 0 0 8px rgba(255, 255, 255, .08);

    transform:
        translate(-50%, -50%);
}

.uv-why-center span {

    color: #ff4167;

    font-family: "Manrope", sans-serif;

    font-size: 30px;

    font-weight: 900;

    line-height: 1;
}

.uv-why-center strong {

    margin-top: 7px;

    font-family: "Manrope", sans-serif;

    font-size: 12px;

    letter-spacing: 1px;
}

.uv-why-center small {

    margin-top: 5px;

    color: rgba(255, 255, 255, .55);

    font-size: 5px;

    letter-spacing: 1.5px;
}


/* =========================================
   LINES
========================================= */

.uv-why-line {

    position: absolute;

    z-index: 2;

    left: 50%;
    top: 50%;

    width: 180px;
    height: 1px;

    transform-origin: left center;

    background:
        linear-gradient(90deg,
            rgba(36, 16, 95, .3),
            transparent);
}

.line-one {
    transform:
        translate(0, -50%) rotate(-42deg);
}

.line-two {
    transform:
        translate(0, -50%) rotate(42deg);
}

.line-three {
    transform:
        translate(0, -50%) rotate(138deg);
}

.line-four {
    transform:
        translate(0, -50%) rotate(222deg);
}


/* =========================================
   NODES
========================================= */

.uv-why-node {

    position: absolute;

    z-index: 8;

    display: flex;

    align-items: center;

    gap: 10px;

    min-width: 125px;

    padding: 10px 13px;

    border:
        1px solid #e1dce7;

    border-radius: 13px;

    background:
        rgba(255, 255, 255, .88);

    box-shadow:
        0 12px 30px rgba(36, 16, 95, .09);

    backdrop-filter:
        blur(10px);

    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}

.uv-why-node:hover {

    border-color:
        rgba(255, 23, 79, .35);

    box-shadow:
        0 18px 40px rgba(36, 16, 95, .13);

    transform:
        translateY(-5px);
}


.uv-why-node-icon {

    display: grid;

    place-items: center;

    width: 32px;
    height: 32px;

    flex-shrink: 0;

    border-radius: 9px;

    color: #ffffff;

    background:
        linear-gradient(135deg,
            #24105f,
            #ff174f);

    font-size: 12px;
}


.uv-why-node div:last-child {

    display: flex;

    flex-direction: column;

    gap: 3px;
}

.uv-why-node div:last-child span {

    color: #aaa5af;

    font-size: 10px;

    font-weight: 800;
}

.uv-why-node div:last-child strong {

    color: #27232d;

    font-family: "Manrope", sans-serif;

    font-size: 10px;
}


/* POSITIONS */

.node-one {

    left: 9%;
    top: 22%;
}

.node-two {

    right: 8%;
    top: 22%;
}

.node-three {

    left: 7%;
    bottom: 22%;
}

.node-four {

    right: 7%;
    bottom: 22%;
}


/* =========================================
   RESULT
========================================= */

.uv-why-result {

    position: absolute;

    z-index: 8;

    left: 50%;
    bottom: 30px;

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 10px 15px;

    border:
        1px solid #e3dfe7;

    border-radius: 100px;

    background:
        rgba(255, 255, 255, .85);

    box-shadow:
        0 10px 30px rgba(36, 16, 95, .06);

    transform:
        translateX(-50%);
}

.uv-why-result span {

    color: #9b96a1;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1px;
}

.uv-why-result strong {

    color: #24105f;

    font-family: "Manrope", sans-serif;

    font-size: 13px;
}

.uv-why-result small {

    color: #aaa6af;

    font-size: 10px;
}


/* =========================================
   PRINCIPLES
========================================= */

.uv-why-principles {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    margin-top: 75px;

    border-top:
        1px solid #e2dfe5;

    border-bottom:
        1px solid #e2dfe5;
}


.uv-why-principle {

    display: flex;

    flex-direction: column;

    gap: 5px;

    padding: 25px 20px;

    border-right:
        1px solid #e2dfe5;
}

.uv-why-principle:first-child {

    padding-left: 0;
}

.uv-why-principle:last-child {

    border-right: 0;
}


.uv-why-principle>span {

    color: #ff174f;

    font-size: 10px;

    font-weight: 800;
}

.uv-why-principle strong {

    color: #27232d;

    font-family: "Manrope", sans-serif;

    font-size: 17px;
}

.uv-why-principle small {

    color: #99959f;

    font-size: 14px;
}


/* =========================================
   REVEAL
========================================= */

.uv-why-reveal {

    opacity: 0;

    transform:
        translateY(30px);

    transition:
        opacity .8s ease,
        transform .8s ease;
}

.uv-why-reveal.uv-why-visible {

    opacity: 1;

    transform:
        translateY(0);
}


/* =========================================
   TABLET
========================================= */

@media (max-width:900px) {

    .uv-why-heading-grid {

        grid-template-columns: 1fr;

        gap: 22px;
    }

    .uv-why-main {

        grid-template-columns: 1fr;

        gap: 55px;
    }

    .uv-why-visual {

        height: 500px;
    }

    .uv-why-principles {

        grid-template-columns:
            repeat(2, 1fr);
    }

    .uv-why-principle {

        border-bottom:
            1px solid #e2dfe5;
    }

    .uv-why-principle:nth-child(2) {

        border-right: 0;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width:700px) {

    .uv-why {

        padding: 85px 0 80px;
    }

    .uv-why-container {

        width:
            calc(100% - 24px);
    }


    /* HEADING */

    .uv-why-eyebrow {

        margin-bottom: 18px;

        font-size: 8px;

        letter-spacing: 1.7px;
    }

    .uv-why-heading-grid {

        display: block;

        margin-bottom: 42px;
    }

    .uv-why-heading-grid h2 {

        font-size: 37px;

        line-height: 1.03;

        letter-spacing: -2px;
    }

    .uv-why-heading-grid p {

        margin-top: 17px;

        font-size: 13px;

        line-height: 1.75;
    }


    /* POINTS */

    .uv-why-point {

        grid-template-columns:
            28px 1fr 29px;

        gap: 11px;

        padding: 20px 0;
    }

    .uv-why-point:hover,
    .uv-why-point.active {

        padding-left: 4px;
    }

    .uv-why-point-number {

        font-size: 10px;
    }

    .uv-why-point-content h3 {

        font-size: 13px;
    }

    .uv-why-point-content p {

        margin-top: 6px;

        font-size: 8.5px;

        line-height: 1.7;
    }

    .uv-why-point-arrow {

        width: 27px;
        height: 27px;

        font-size: 14px;
    }


    /* VISUAL */

    .uv-why-visual {

        height: 410px;

        border-radius: 20px;
    }

    .uv-why-visual::before {

        background-size:
            32px 32px;
    }


    /* ORBITS */

    .orbit-one {

        width: 180px;
        height: 180px;
    }

    .orbit-two {

        width: 270px;
        height: 270px;
    }

    .orbit-three {

        width: 345px;
        height: 345px;
    }


    /* CENTER */

    .uv-why-center {

        width: 105px;
        height: 105px;
    }

    .uv-why-center span {

        font-size: 22px;
    }

    .uv-why-center strong {

        font-size: 14px;
    }

    .uv-why-center small {

        font-size: 4px;
    }


    /* LINES */

    .uv-why-line {

        width: 115px;
    }


    /* NODES */

    .uv-why-node {

        min-width: 95px;

        padding: 7px 9px;

        gap: 7px;

        border-radius: 10px;
    }

    .uv-why-node-icon {

        width: 25px;
        height: 25px;

        border-radius: 7px;

        font-size: 14px;
    }

    .uv-why-node div:last-child span {

        font-size: 5px;
    }

    .uv-why-node div:last-child strong {

        font-size: 8px;
    }

    .node-one {

        left: 4%;

        top: 19%;
    }

    .node-two {

        right: 4%;

        top: 19%;
    }

    .node-three {

        left: 4%;

        bottom: 19%;
    }

    .node-four {

        right: 4%;

        bottom: 19%;
    }


    /* RESULT */

    .uv-why-result {

        bottom: 17px;

        gap: 7px;

        padding: 8px 11px;
    }

    .uv-why-result span {

        font-size: 5px;
    }

    .uv-why-result strong {

        font-size: 8px;
    }

    .uv-why-result small {

        font-size: 5px;
    }


    /* PRINCIPLES */

    .uv-why-principles {

        grid-template-columns:
            repeat(2, 1fr);

        margin-top: 48px;
    }

    .uv-why-principle {

        padding: 18px 14px;
    }

    .uv-why-principle:first-child {

        padding-left: 0;
    }

    .uv-why-principle strong {

        font-size: 12px;
    }

    .uv-why-principle small {

        font-size: 10px;

        line-height: 1.5;
    }

}


/* =========================================
   SMALL PHONES
========================================= */

@media (max-width:380px) {

    .uv-why {

        padding-top: 70px;
    }

    .uv-why-heading-grid h2 {

        font-size: 32px;
    }

    .uv-why-visual {

        height: 380px;
    }

    .orbit-one {

        width: 160px;
        height: 160px;
    }

    .orbit-two {

        width: 235px;
        height: 235px;
    }

    .orbit-three {

        width: 305px;
        height: 305px;
    }

    .uv-why-node {

        min-width: 88px;
    }

}


/* =========================================
   REDUCED MOTION
========================================= */

@media (prefers-reduced-motion: reduce) {

    .uv-why-reveal,
    .uv-why-point,
    .uv-why-node,
    .uv-why-point-arrow {

        transition: none !important;
    }

    .uv-why-orbit {

        animation: none !important;
    }

}

/* =========================================
   SECTION 07 — OUR PROCESS
========================================= */

.uv-process {

    position: relative;

    overflow: hidden;

    padding: 135px 0 125px;

    background:
        #ffffff;

    color: #211e29;
}


.uv-process-container {

    position: relative;

    z-index: 2;

    width: min(1180px,
            calc(100% - 40px));

    margin: 0 auto;
}


/* =========================================
   BACKGROUND
========================================= */

.uv-process-bg {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(20px);
}

.uv-process-bg-one {

    width: 650px;
    height: 650px;

    top: -350px;
    left: -300px;

    background:
        radial-gradient(circle,
            rgba(139, 92, 246, .08),
            transparent 68%);
}

.uv-process-bg-two {

    width: 550px;
    height: 550px;

    right: -280px;
    bottom: -300px;

    background:
        radial-gradient(circle,
            rgba(255, 23, 79, .06),
            transparent 68%);
}


/* =========================================
   HEADING
========================================= */

.uv-process-eyebrow {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 23px;

    color: #ff174f;

    font-family: "Manrope", sans-serif;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2.3px;
}

.uv-process-eyebrow span {

    width: 34px;
    height: 2px;

    border-radius: 20px;

    background:
        linear-gradient(90deg,
            #24105f,
            #ff174f);
}


.uv-process-heading-grid {

    display: grid;

    grid-template-columns:
        1.2fr .7fr;

    gap: 90px;

    align-items: end;

    margin-bottom: 75px;
}

.uv-process-heading-grid h2 {

    margin: 0;

    color: #1b1821;

    font-family: "Manrope", sans-serif;

    font-size: clamp(44px,
            5vw,
            72px);

    font-weight: 800;

    line-height: 1.01;

    letter-spacing: -3.5px;
}

.uv-process-heading-grid h2 span {

    display: block;

    color: #aaa6af;
}

.uv-process-heading-grid p {

    max-width: 440px;

    margin: 0 0 5px;

    color: #7d7883;

    font-size: 14px;

    line-height: 1.85;
}


/* =========================================
   WORKSPACE
========================================= */

.uv-process-workspace {

    display: grid;

    grid-template-columns:
        70px 1fr;

    gap: 35px;
}


/* =========================================
   PROGRESS
========================================= */

.uv-process-progress {

    position: relative;

    display: flex;

    flex-direction: column;

    align-items: center;
}

.uv-process-progress-track {

    position: relative;

    width: 2px;

    height: 100%;

    min-height: 650px;

    background:
        #e8e5eb;
}

.uv-process-progress-fill {

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;

    height: 20%;

    background:
        linear-gradient(180deg,
            #24105f,
            #ff174f);

    transition:
        height .6s cubic-bezier(.2, .8, .2, 1);
}

.uv-process-progress-label {

    position: absolute;

    bottom: 0;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 7px;

    width: 70px;
}

.uv-process-progress-label span {

    color: #aaa6af;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.5px;

    writing-mode:
        vertical-rl;
}

.uv-process-progress-label strong {

    color: #24105f;

    font-family: "Manrope", sans-serif;

    font-size: 14px;
}


/* =========================================
   STEP
========================================= */

.uv-process-steps {

    display: flex;

    flex-direction: column;
}


.uv-process-step {

    position: relative;

    display: grid;

    grid-template-columns:
        40px 1fr 330px;

    gap: 30px;

    min-height: 330px;

    padding:
        0 0 65px;

    margin-bottom: 65px;

    border-bottom:
        1px solid #e8e5eb;

    opacity: .42;

    transition:
        opacity .5s ease;
}

.uv-process-step:last-child {

    margin-bottom: 0;

    border-bottom: 0;
}

.uv-process-step.active {

    opacity: 1;
}


/* =========================================
   NUMBER
========================================= */

.uv-process-step-number {

    position: relative;

    display: flex;

    justify-content: center;
}

.uv-process-step-number::before {

    content: "";

    position: absolute;

    top: 0;

    left: 50%;

    width: 11px;
    height: 11px;

    border:
        2px solid #d8d3dd;

    border-radius: 50%;

    background: #ffffff;

    transform:
        translateX(-50%);

    transition:
        .35s ease;
}

.uv-process-step.active .uv-process-step-number::before {

    border-color:
        #ff174f;

    background:
        #ff174f;

    box-shadow:
        0 0 0 6px rgba(255, 23, 79, .09);
}

.uv-process-step-number span {

    position: absolute;

    top: 25px;

    color: #b1acb7;

    font-family: "Manrope", sans-serif;

    font-size: 8px;

    font-weight: 800;

    writing-mode:
        vertical-rl;

    transition:
        color .3s ease;
}

.uv-process-step.active .uv-process-step-number span {

    color: #24105f;
}


/* =========================================
   CONTENT
========================================= */

.uv-process-step-content {

    padding-top: 0;
}

.uv-process-step-top {

    display: flex;

    justify-content: space-between;

    margin-bottom: 19px;
}

.uv-process-step-top span {

    color: #ff174f;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1.8px;
}

.uv-process-step-top small {

    display: none;

    color: #aaa6af;

    font-size: 10px;
}


.uv-process-step-content h3 {

    max-width: 500px;

    margin: 0;

    color: #29252e;

    font-family: "Manrope", sans-serif;

    font-size: 31px;

    line-height: 1.12;

    letter-spacing: -1.3px;
}

.uv-process-step-content h3 em {

    color: #918b98;

    font-style: normal;
}


.uv-process-step-content p {

    max-width: 470px;

    margin: 17px 0 0;

    color: #817c87;

    font-size: 13px;

    line-height: 1.85;
}


/* =========================================
   TAGS
========================================= */

.uv-process-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 6px;

    margin-top: 22px;
}

.uv-process-tags span {

    padding:
        7px 10px;

    border:
        1px solid #e4e0e7;

    border-radius: 100px;

    color: #78727f;

    background: #faf9fb;

    font-size: 10px;

    font-weight: 700;
}


/* =========================================
   VISUAL
========================================= */

.uv-process-visual {

    position: relative;

    height: 270px;

    overflow: hidden;

    border:
        1px solid #e6e2e9;

    border-radius: 22px;

    background:
        radial-gradient(circle at center,
            #ffffff,
            #f3f0f6);

    box-shadow:
        0 20px 50px rgba(36, 16, 95, .05);
}


/* =========================================
   STEP 01
========================================= */

.uv-process-orbit {

    position: absolute;

    left: 50%;
    top: 50%;

    width: 160px;
    height: 160px;

    border:
        1px dashed #d8d2df;

    border-radius: 50%;

    transform:
        translate(-50%, -50%);

    animation:
        uvProcessRotate 16s linear infinite;
}

.uv-process-orbit::before {

    content: "";

    position: absolute;

    top: -5px;
    left: 50%;

    width: 9px;
    height: 9px;

    border-radius: 50%;

    background: #ff174f;

    box-shadow:
        0 0 16px rgba(255, 23, 79, .5);
}


.uv-process-icon {

    position: absolute;

    left: 50%;
    top: 50%;

    display: grid;

    place-items: center;

    width: 80px;
    height: 80px;

    border-radius: 50%;

    color: #ffffff;

    background:
        linear-gradient(135deg,
            #24105f,
            #8b5cf6);

    font-family: "Manrope", sans-serif;

    font-size: 30px;

    font-weight: 800;

    box-shadow:
        0 20px 45px rgba(36, 16, 95, .2);

    transform:
        translate(-50%, -50%);
}


.uv-process-floating {

    position: absolute;

    padding:
        7px 10px;

    border:
        1px solid #e2dde6;

    border-radius: 100px;

    color: #7f7887;

    background: rgba(255, 255, 255, .85);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1px;

    box-shadow:
        0 8px 20px rgba(36, 16, 95, .06);
}

.process-float-one {

    top: 28%;

    left: 11%;
}

.process-float-two {

    right: 10%;

    bottom: 26%;
}


/* =========================================
   STEP 02
========================================= */

.uv-process-strategy-card {

    position: absolute;

    left: 50%;
    top: 50%;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 10px;

    transform:
        translate(-50%, -50%);
}

.uv-process-strategy-card>span {

    color: #ff174f;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2px;
}

.uv-process-strategy-card>strong {

    display: grid;

    place-items: center;

    width: 115px;

    padding: 11px;

    border:
        1px solid #e0dbe5;

    border-radius: 10px;

    color: #302b38;

    background: #ffffff;

    font-family: "Manrope", sans-serif;

    font-size: 14px;

    box-shadow:
        0 8px 20px rgba(36, 16, 95, .06);
}

.uv-process-strategy-line {

    width: 1px;
    height: 17px;

    background:
        linear-gradient(180deg,
            #24105f,
            #ff174f);
}


/* =========================================
   STEP 03
========================================= */

.uv-process-create-visual {

    background:
        #12101a;
}

.uv-process-create-card {

    position: absolute;

    left: 50%;
    top: 50%;

    width: 230px;
    height: 165px;

    overflow: hidden;

    border-radius: 13px;

    background:
        linear-gradient(135deg,
            #24105f,
            #171320);

    box-shadow:
        0 25px 50px rgba(0, 0, 0, .3);

    transform:
        translate(-50%, -50%) rotate(-4deg);

    transition:
        transform .5s ease;
}

.uv-process-step:hover .uv-process-create-card {

    transform:
        translate(-50%, -50%) rotate(0) scale(1.04);
}

.uv-create-top {

    display: flex;

    gap: 5px;

    padding: 10px;

    border-bottom:
        1px solid rgba(255, 255, 255, .08);
}

.uv-create-top span {

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, .35);
}

.uv-create-content {

    padding: 28px 22px;
}

.uv-create-content small {

    color: #ff4167;

    font-size: 5px;

    font-weight: 800;

    letter-spacing: 1.8px;
}

.uv-create-content strong {

    display: block;

    margin-top: 9px;

    color: #ffffff;

    font-family: "Manrope", sans-serif;

    font-size: 27px;

    line-height: .95;
}

.uv-create-content strong em {

    display: block;

    color: #a98af3;

    font-style: normal;
}

.uv-create-content div {

    width: 65px;
    height: 3px;

    margin-top: 14px;

    border-radius: 20px;

    background: #ff174f;
}


/* =========================================
   STEP 04
========================================= */

.uv-process-launch {

    position: absolute;

    left: 50%;
    top: 50%;

    display: flex;

    flex-direction: column;

    align-items: center;

    transform:
        translate(-50%, -50%);
}

.uv-launch-ring {

    position: absolute;

    width: 145px;
    height: 145px;

    border:
        1px solid rgba(139, 92, 246, .25);

    border-radius: 50%;

    animation:
        uvLaunchPulse 2.5s ease-out infinite;
}

.uv-launch-core {

    position: relative;

    display: grid;

    place-items: center;

    width: 72px;
    height: 72px;

    border-radius: 50%;

    color: #ffffff;

    background:
        linear-gradient(135deg,
            #24105f,
            #ff174f);

    box-shadow:
        0 20px 45px rgba(36, 16, 95, .25);
}

.uv-launch-core span {

    font-size: 25px;
}

.uv-process-launch strong {

    margin-top: 15px;

    color: #24105f;

    font-family: "Manrope", sans-serif;

    font-size: 14px;

    letter-spacing: 2px;
}


/* =========================================
   STEP 05
========================================= */

.uv-process-growth-visual {

    background:
        linear-gradient(135deg,
            #f8f6fa,
            #eeeaf5);
}

.uv-process-growth-chart {

    position: absolute;

    left: 10%;
    right: 7%;

    bottom: 20px;

    height: 170px;
}

.uv-process-growth-chart svg {

    width: 100%;
    height: 100%;
}

.uv-process-growth-value {

    position: absolute;

    top: 25px;
    right: 22px;

    display: flex;

    flex-direction: column;

    align-items: flex-end;
}

.uv-process-growth-value span {

    color: #99939f;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.2px;
}

.uv-process-growth-value strong {

    margin-top: 3px;

    color: #24105f;

    font-family: "Manrope", sans-serif;

    font-size: 27px;
}


/* =========================================
   ANIMATIONS
========================================= */

@keyframes uvProcessRotate {

    from {

        transform:
            translate(-50%, -50%) rotate(0deg);

    }

    to {

        transform:
            translate(-50%, -50%) rotate(360deg);

    }

}

@keyframes uvLaunchPulse {

    0% {

        opacity: .8;

        transform: scale(.7);

    }

    70% {

        opacity: 0;

        transform: scale(1.35);

    }

    100% {

        opacity: 0;

        transform: scale(1.35);

    }

}


/* =========================================
   BOTTOM CTA
========================================= */

.uv-process-bottom {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 40px;

    margin-top: 80px;

    padding-top: 40px;

    border-top:
        1px solid #e5e1e8;
}

.uv-process-bottom>div>span {

    color: #ff174f;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.8px;
}

.uv-process-bottom h3 {

    margin: 9px 0 0;

    color: #27232d;

    font-family: "Manrope", sans-serif;

    font-size: 25px;

    line-height: 1.15;
}

.uv-process-bottom h3 em {

    color: #8b5cf6;

    font-style: normal;
}

.uv-process-bottom>a {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding:
        10px 10px 10px 17px;

    border-radius: 100px;

    color: #ffffff;

    background:
        linear-gradient(135deg,
            #24105f,
            #4b24a7);

    font-family: "Manrope", sans-serif;

    font-size: 14px;

    font-weight: 800;

    text-decoration: none;

    box-shadow:
        0 12px 30px rgba(36, 16, 95, .16);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.uv-process-bottom>a:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 18px 40px rgba(36, 16, 95, .22);
}

.uv-process-bottom>a b {

    display: grid;

    place-items: center;

    width: 28px;
    height: 28px;

    border-radius: 50%;

    background: #ff174f;
}


/* =========================================
   REVEAL
========================================= */

.uv-process-reveal {

    opacity: 0;

    transform:
        translateY(30px);

    transition:
        opacity .8s ease,
        transform .8s ease;
}

.uv-process-reveal.uv-process-visible {

    opacity: 1;

    transform:
        translateY(0);
}


/* =========================================
   TABLET
========================================= */

@media (max-width:950px) {

    .uv-process-heading-grid {

        grid-template-columns: 1fr;

        gap: 22px;
    }

    .uv-process-workspace {

        grid-template-columns:
            40px 1fr;

        gap: 20px;
    }

    .uv-process-step {

        grid-template-columns:
            30px 1fr 270px;

        gap: 20px;
    }

    .uv-process-visual {

        height: 230px;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width:700px) {

    .uv-process {

        padding: 85px 0 80px;
    }

    .uv-process-container {

        width:
            calc(100% - 24px);
    }


    /* HEADING */

    .uv-process-eyebrow {

        margin-bottom: 18px;

        font-size: 8px;

        letter-spacing: 1.7px;
    }

    .uv-process-heading-grid {

        display: block;

        margin-bottom: 48px;
    }

    .uv-process-heading-grid h2 {

        font-size: 37px;

        line-height: 1.03;

        letter-spacing: -2px;
    }

    .uv-process-heading-grid p {

        margin-top: 17px;

        font-size: 13px;

        line-height: 1.75;
    }


    /* WORKSPACE */

    .uv-process-workspace {

        display: block;
    }


    /* HIDE DESKTOP PROGRESS */

    .uv-process-progress {

        display: none;
    }


    /* STEPS */

    .uv-process-step {

        display: grid;

        grid-template-columns:
            27px 1fr;

        gap: 13px;

        min-height: auto;

        padding:
            0 0 38px;

        margin-bottom: 38px;

        opacity: 1;
    }


    .uv-process-step-number {

        min-height: 100%;
    }

    .uv-process-step-number::before {

        top: 2px;

        width: 9px;
        height: 9px;
    }

    .uv-process-step-number span {

        top: 25px;

        font-size: 10px;
    }


    /* CONTENT */

    .uv-process-step-content {

        min-width: 0;
    }

    .uv-process-step-top {

        margin-bottom: 13px;
    }

    .uv-process-step-top span {

        font-size: 10px;

        letter-spacing: 1.5px;
    }

    .uv-process-step-top small {

        display: block;
    }

    .uv-process-step-content h3 {

        font-size: 22px;

        line-height: 1.12;

        letter-spacing: -.7px;
    }

    .uv-process-step-content p {

        margin-top: 11px;

        font-size: 14px;

        line-height: 1.75;
    }


    /* TAGS */

    .uv-process-tags {

        margin-top: 15px;

        gap: 5px;
    }

    .uv-process-tags span {

        padding:
            6px 8px;

        font-size: 10px;
    }


    /* VISUAL */

    .uv-process-visual {

        grid-column:
            2;

        width: 100%;

        height: 210px;

        margin-top: 22px;

        border-radius: 16px;
    }


    /* DISCOVER */

    .uv-process-orbit {

        width: 125px;
        height: 125px;
    }

    .uv-process-icon {

        width: 64px;
        height: 64px;

        font-size: 23px;
    }

    .uv-process-floating {

        padding:
            6px 8px;

        font-size: 5px;
    }


    /* STRATEGY */

    .uv-process-strategy-card>strong {

        width: 105px;

        padding: 9px;

        font-size: 8px;
    }


    /* CREATE */

    .uv-process-create-card {

        width: 200px;

        height: 145px;
    }

    .uv-create-content {

        padding:
            24px 18px;
    }

    .uv-create-content strong {

        font-size: 23px;
    }


    /* LAUNCH */

    .uv-launch-core {

        width: 62px;
        height: 62px;
    }

    .uv-launch-ring {

        width: 125px;
        height: 125px;
    }


    /* GROWTH */

    .uv-process-growth-chart {

        left: 7%;

        right: 5%;

        bottom: 13px;

        height: 135px;
    }

    .uv-process-growth-value {

        top: 20px;

        right: 17px;
    }

    .uv-process-growth-value strong {

        font-size: 23px;
    }


    /* BOTTOM */

    .uv-process-bottom {

        display: block;

        margin-top: 48px;

        padding-top: 30px;
    }

    .uv-process-bottom h3 {

        font-size: 22px;
    }

    .uv-process-bottom>a {

        margin-top: 20px;

        font-size: 8px;
    }

}


/* =========================================
   SMALL PHONES
========================================= */

@media (max-width:380px) {

    .uv-process {

        padding-top: 70px;
    }

    .uv-process-container {

        width:
            calc(100% - 20px);
    }

    .uv-process-heading-grid h2 {

        font-size: 32px;
    }

    .uv-process-step {

        grid-template-columns:
            23px 1fr;

        gap: 10px;
    }

    .uv-process-step-content h3 {

        font-size: 20px;
    }

    .uv-process-visual {

        height: 190px;

        margin-top: 18px;
    }

}


/* =========================================
   REDUCED MOTION
========================================= */

@media (prefers-reduced-motion: reduce) {

    .uv-process-reveal,
    .uv-process-step,
    .uv-process-create-card {

        transition: none !important;
    }

    .uv-process-orbit,
    .uv-launch-ring {

        animation: none !important;
    }

}

/* =========================================
   SECTION 08 — INDUSTRIES
========================================= */

.uv-industries {

    position: relative;

    overflow: hidden;

    padding: 135px 0 120px;

    background:
        #0b0913;

    color: #ffffff;
}


.uv-industries-container {

    position: relative;

    z-index: 3;

    width: min(1180px,
            calc(100% - 40px));

    margin: 0 auto;
}


/* =========================================
   GLOWS
========================================= */

.uv-industries-glow {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(25px);
}

.uv-industries-glow-one {

    width: 650px;
    height: 650px;

    left: -350px;
    top: -280px;

    background:
        radial-gradient(circle,
            rgba(139, 92, 246, .15),
            transparent 68%);
}

.uv-industries-glow-two {

    width: 600px;
    height: 600px;

    right: -350px;
    bottom: -300px;

    background:
        radial-gradient(circle,
            rgba(255, 23, 79, .10),
            transparent 68%);
}


/* =========================================
   HEADING
========================================= */

.uv-industries-eyebrow {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 23px;

    color: #ff4167;

    font-family: "Manrope", sans-serif;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2.3px;
}

.uv-industries-eyebrow span {

    width: 34px;
    height: 2px;

    border-radius: 20px;

    background:
        linear-gradient(90deg,
            #8b5cf6,
            #ff174f);
}


.uv-industries-heading-grid {

    display: grid;

    grid-template-columns:
        1.2fr .7fr;

    gap: 90px;

    align-items: end;

    margin-bottom: 70px;
}

.uv-industries-heading-grid h2 {

    margin: 0;

    color: #ffffff;

    font-family: "Manrope", sans-serif;

    font-size: clamp(44px,
            5vw,
            72px);

    font-weight: 800;

    line-height: 1.01;

    letter-spacing: -3.5px;
}

.uv-industries-heading-grid h2 span {

    display: block;

    color: #666172;
}

.uv-industries-heading-grid p {

    max-width: 440px;

    margin: 0 0 5px;

    color: #898391;

    font-size: 14px;

    line-height: 1.85;
}


/* =========================================
   EXPERIENCE
========================================= */

.uv-industries-experience {

    display: grid;

    grid-template-columns:
        .62fr 1.38fr;

    gap: 22px;
}


/* =========================================
   INDUSTRY LIST
========================================= */

.uv-industries-list {

    display: flex;

    flex-direction: column;

    border-top:
        1px solid rgba(255, 255, 255, .09);
}


.uv-industry-item {

    position: relative;

    display: grid;

    grid-template-columns:
        38px 1fr 35px;

    align-items: center;

    gap: 15px;

    width: 100%;

    min-height: 75px;

    padding: 0 8px;

    border: 0;

    border-bottom:
        1px solid rgba(255, 255, 255, .09);

    color: #706b79;

    background: transparent;

    text-align: left;

    cursor: pointer;

    transition:
        .35s ease;
}

.uv-industry-item::before {

    content: "";

    position: absolute;

    left: 0;
    top: 50%;

    width: 0;
    height: 30px;

    border-radius: 0 5px 5px 0;

    background:
        linear-gradient(180deg,
            #8b5cf6,
            #ff174f);

    transform:
        translateY(-50%);

    transition:
        width .35s ease;
}

.uv-industry-item:hover,
.uv-industry-item.active {

    color: #ffffff;

    padding-left: 17px;

    background:
        linear-gradient(90deg,
            rgba(139, 92, 246, .08),
            transparent);
}

.uv-industry-item.active::before {

    width: 3px;
}


.uv-industry-number {

    color: #55515d;

    font-family: "Manrope", sans-serif;

    font-size: 8px;

    font-weight: 800;

    transition:
        color .3s ease;
}

.uv-industry-item.active .uv-industry-number {

    color: #ff4167;
}


.uv-industry-name {

    font-family: "Manrope", sans-serif;

    font-size: 13px;

    font-weight: 700;
}


.uv-industry-arrow {

    display: grid;

    place-items: center;

    width: 29px;
    height: 29px;

    border:
        1px solid rgba(255, 255, 255, .08);

    border-radius: 50%;

    color: #686270;

    font-size: 10px;

    transition:
        .35s ease;
}

.uv-industry-item:hover .uv-industry-arrow,
.uv-industry-item.active .uv-industry-arrow {

    color: #ffffff;

    border-color:
        rgba(255, 23, 79, .4);

    background:
        #24105f;

    transform:
        translate(2px, -2px);
}


/* =========================================
   PANEL
========================================= */

.uv-industries-panel {

    position: relative;

    min-height: 525px;

    overflow: hidden;

    border:
        1px solid rgba(255, 255, 255, .10);

    border-radius: 25px;

    background:
        radial-gradient(circle at 75% 45%,
            rgba(139, 92, 246, .14),
            transparent 33%),
        linear-gradient(135deg,
            #14111f,
            #0f0d15);

    transition:
        background .5s ease;
}


/* GRID */

.uv-industries-panel-grid {

    position: absolute;

    inset: 0;

    opacity: .35;

    background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px,
            transparent 1px),
        linear-gradient(90deg,
            rgba(255, 255, 255, .045) 1px,
            transparent 1px);

    background-size:
        45px 45px;

    mask-image:
        radial-gradient(circle at 70% 45%,
            black,
            transparent 70%);
}


/* =========================================
   PANEL TOP
========================================= */

.uv-industries-panel-top {

    position: absolute;

    z-index: 5;

    left: 27px;
    right: 27px;
    top: 23px;

    display: flex;

    align-items: center;

    justify-content: space-between;
}

.uv-industry-label {

    color: #777181;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.5px;
}

.uv-industry-status {

    display: flex;

    align-items: center;

    gap: 6px;

    color: #6e6877;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1px;
}

.uv-industry-status i {

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #53e49a;

    box-shadow:
        0 0 10px rgba(83, 228, 154, .7);
}


/* =========================================
   BIG NUMBER
========================================= */

.uv-industry-big-number {

    position: absolute;

    right: -15px;
    top: 20px;

    color:
        rgba(255, 255, 255, .025);

    font-family: "Manrope", sans-serif;

    font-size: 180px;

    font-weight: 900;

    line-height: 1;

    letter-spacing: -10px;
}


/* =========================================
   CONTENT
========================================= */

.uv-industry-panel-content {

    position: relative;

    z-index: 5;

    width: 53%;

    padding:
        115px 0 0 34px;
}

.uv-industry-mini-label {

    color: #ff4167;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.8px;
}

.uv-industry-panel-content h3 {

    margin: 14px 0 0;

    color: #ffffff;

    font-family: "Manrope", sans-serif;

    font-size: 32px;

    line-height: 1.05;

    letter-spacing: -1.3px;
}

.uv-industry-panel-content h3 em {

    display: block;

    color: #8b5cf6;

    font-style: normal;
}

.uv-industry-panel-content p {

    margin: 17px 0 0;

    color: #807a89;

    font-size: 10px;

    line-height: 1.8;
}


/* =========================================
   SERVICES
========================================= */

.uv-industry-services {

    display: flex;

    flex-wrap: wrap;

    gap: 6px;

    margin-top: 18px;
}

.uv-industry-services span {

    padding:
        6px 8px;

    border:
        1px solid rgba(255, 255, 255, .09);

    border-radius: 100px;

    color: #85808d;

    background:
        rgba(255, 255, 255, .025);

    font-size: 10px;

    font-weight: 700;
}


/* =========================================
   CTA
========================================= */

.uv-industry-cta {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-top: 22px;

    padding:
        8px 8px 8px 13px;

    border:
        1px solid rgba(255, 255, 255, .12);

    border-radius: 100px;

    color: #ffffff;

    background:
        rgba(255, 255, 255, .035);

    font-family: "Manrope", sans-serif;

    font-size: 8px;

    font-weight: 800;

    text-decoration: none;

    transition:
        .3s ease;
}

.uv-industry-cta:hover {

    background:
        #24105f;

    transform:
        translateY(-3px);
}

.uv-industry-cta b {

    display: grid;

    place-items: center;

    width: 25px;
    height: 25px;

    border-radius: 50%;

    background:
        #ff174f;
}


/* =========================================
   ABSTRACT BUILDINGS
========================================= */

.uv-industry-visual {

    position: absolute;

    right: 0;
    bottom: 0;

    width: 48%;
    height: 75%;
}

.uv-industry-building {

    position: absolute;

    bottom: 0;

    border:
        1px solid rgba(255, 255, 255, .09);

    background:
        linear-gradient(180deg,
            rgba(139, 92, 246, .16),
            rgba(36, 16, 95, .35));

    box-shadow:
        inset 0 0 35px rgba(139, 92, 246, .06);
}

.building-one {

    left: 18%;

    width: 25%;
    height: 48%;
}

.building-two {

    left: 43%;

    width: 30%;
    height: 70%;

    background:
        linear-gradient(180deg,
            rgba(255, 23, 79, .12),
            rgba(36, 16, 95, .35));
}

.building-three {

    right: 0;

    width: 25%;
    height: 38%;
}

.uv-industry-building::before {

    content: "";

    position: absolute;

    inset: 15px 8px;

    opacity: .5;

    background-image:
        linear-gradient(rgba(255, 255, 255, .14) 1px,
            transparent 1px),
        linear-gradient(90deg,
            rgba(255, 255, 255, .14) 1px,
            transparent 1px);

    background-size:
        11px 11px;
}


/* SCAN */

.uv-industry-scan-line {

    position: absolute;

    left: 5%;
    right: 0;

    top: 48%;

    height: 1px;

    background:
        linear-gradient(90deg,
            transparent,
            #ff174f,
            transparent);

    opacity: .6;

    animation:
        uvIndustryScan 3s ease-in-out infinite;
}

@keyframes uvIndustryScan {

    0%,
    100% {
        transform:
            translateY(-35px);

        opacity: 0;
    }

    50% {
        transform:
            translateY(35px);

        opacity: .7;
    }

}


/* LOCATION */

.uv-industry-location {

    position: absolute;

    left: 53%;
    top: 28%;

    display: flex;

    align-items: center;

    gap: 7px;
}

.uv-industry-location span {

    color: #ff174f;

    font-size: 14px;

    text-shadow:
        0 0 15px rgba(255, 23, 79, .7);
}

.uv-industry-location small {

    color: #8d8795;

    font-size: 5px;

    font-weight: 800;

    letter-spacing: 1px;
}


/* =========================================
   PANEL BOTTOM
========================================= */

.uv-industry-panel-bottom {

    position: absolute;

    z-index: 5;

    left: 27px;
    right: 27px;
    bottom: 21px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding-top: 15px;

    border-top:
        1px solid rgba(255, 255, 255, .08);
}

.uv-industry-panel-bottom span {

    color: #5e5967;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.2px;
}

.uv-industry-panel-bottom strong {

    color: #777181;

    font-family: "Manrope", sans-serif;

    font-size: 8px;
}


/* =========================================
   CLOUD
========================================= */

.uv-industry-cloud {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 9px;

    margin-top: 55px;
}

.uv-industry-cloud span {

    padding:
        9px 14px;

    border:
        1px solid rgba(255, 255, 255, .07);

    border-radius: 100px;

    color: #66616f;

    background:
        rgba(255, 255, 255, .018);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1px;

    transition:
        .3s ease;
}

.uv-industry-cloud span:hover {

    color: #ffffff;

    border-color:
        rgba(255, 23, 79, .3);

    background:
        #24105f;

    transform:
        translateY(-3px);
}


/* =========================================
   REVEAL
========================================= */

.uv-industries-reveal {

    opacity: 0;

    transform:
        translateY(25px);

    transition:
        opacity .75s ease,
        transform .75s ease;
}

.uv-industries-reveal.uv-industries-visible {

    opacity: 1;

    transform:
        translateY(0);
}


/* =========================================
   TABLET
========================================= */

@media (max-width:950px) {

    .uv-industries-heading-grid {

        grid-template-columns: 1fr;

        gap: 22px;
    }

    .uv-industries-experience {

        grid-template-columns:
            .7fr 1.3fr;
    }

    .uv-industry-panel-content {

        width: 62%;
    }

    .uv-industry-visual {

        width: 42%;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width:700px) {

    .uv-industries {

        padding: 85px 0 80px;
    }

    .uv-industries-container {

        width:
            calc(100% - 24px);
    }


    /* HEADING */

    .uv-industries-eyebrow {

        margin-bottom: 18px;

        font-size: 8px;

        letter-spacing: 1.7px;
    }

    .uv-industries-heading-grid {

        display: block;

        margin-bottom: 40px;
    }

    .uv-industries-heading-grid h2 {

        font-size: 37px;

        line-height: 1.03;

        letter-spacing: -2px;
    }

    .uv-industries-heading-grid p {

        margin-top: 17px;

        font-size: 13px;

        line-height: 1.75;
    }


    /* EXPERIENCE */

    .uv-industries-experience {

        display: block;
    }


    /* INDUSTRY LIST */

    .uv-industries-list {

        display: grid;

        grid-template-columns:
            repeat(2, 1fr);

        gap: 0 10px;

        border-top: 0;

        margin-bottom: 15px;
    }

    .uv-industry-item {

        min-height: 58px;

        grid-template-columns:
            24px 1fr 24px;

        gap: 7px;

        padding: 0 6px;

        border-top:
            1px solid rgba(255, 255, 255, .09);

        border-bottom: 0;

        font-size: 14px;
    }

    .uv-industry-item:nth-child(odd) {

        border-right:
            1px solid rgba(255, 255, 255, .09);
    }

    .uv-industry-item:hover,
    .uv-industry-item.active {

        padding-left: 10px;
    }

    .uv-industry-number {

        font-size: 10px;
    }

    .uv-industry-name {

        font-size: 14px;
    }

    .uv-industry-arrow {

        width: 23px;
        height: 23px;

        font-size: 8px;
    }


    /* PANEL */

    .uv-industries-panel {

        min-height: 470px;

        border-radius: 19px;
    }

    .uv-industries-panel-top {

        left: 18px;
        right: 18px;

        top: 18px;
    }

    .uv-industry-label {

        font-size: 10px;
    }

    .uv-industry-status {

        font-size: 5px;
    }


    /* NUMBER */

    .uv-industry-big-number {

        top: 30px;
        right: -10px;

        font-size: 130px;

        letter-spacing: -7px;
    }


    /* CONTENT */

    .uv-industry-panel-content {

        width: 78%;

        padding:
            88px 0 0 21px;
    }

    .uv-industry-mini-label {

        font-size: 10px;
    }

    .uv-industry-panel-content h3 {

        margin-top: 11px;

        font-size: 25px;

        letter-spacing: -.8px;
    }

    .uv-industry-panel-content p {

        margin-top: 12px;

        font-size: 8.5px;

        line-height: 1.75;
    }

    .uv-industry-services {

        margin-top: 13px;
    }

    .uv-industry-services span {

        padding:
            5px 7px;

        font-size: 5px;
    }

    .uv-industry-cta {

        margin-top: 16px;

        font-size: 10px;
    }


    /* VISUAL */

    .uv-industry-visual {

        width: 46%;

        height: 48%;

        opacity: .65;
    }

    .uv-industry-location {

        left: 35%;

        top: 28%;
    }


    /* BOTTOM */

    .uv-industry-panel-bottom {

        left: 18px;
        right: 18px;

        bottom: 16px;
    }

    .uv-industry-panel-bottom span {

        font-size: 5px;
    }

    .uv-industry-panel-bottom strong {

        font-size: 10px;
    }


    /* CLOUD */

    .uv-industry-cloud {

        justify-content: flex-start;

        gap: 6px;

        margin-top: 38px;
    }

    .uv-industry-cloud span {

        padding:
            7px 10px;

        font-size: 10px;
    }

}


/* =========================================
   SMALL PHONES
========================================= */

@media (max-width:380px) {

    .uv-industries {

        padding-top: 70px;
    }

    .uv-industries-container {

        width:
            calc(100% - 20px);
    }

    .uv-industries-heading-grid h2 {

        font-size: 32px;
    }

    .uv-industry-item {

        min-height: 53px;

        grid-template-columns:
            20px 1fr 21px;
    }

    .uv-industry-name {

        font-size: 8px;
    }

    .uv-industries-panel {

        min-height: 445px;
    }

    .uv-industry-panel-content {

        width: 82%;

        padding-left: 17px;
    }

    .uv-industry-panel-content h3 {

        font-size: 22px;
    }

}


/* =========================================
   REDUCED MOTION
========================================= */

@media (prefers-reduced-motion: reduce) {

    .uv-industries-reveal,
    .uv-industry-item,
    .uv-industry-arrow,
    .uv-industry-cta {

        transition: none !important;
    }

    .uv-industry-scan-line {

        animation: none !important;
    }

}

/* =========================================
   SECTION 09 — TESTIMONIALS / CLIENT STORIES
========================================= */

/* =========================================================
   UNIVERSE VYPAAR — CLIENT STORIES
========================================================= */

.uv-testimonials {

    --uv-purple: #24105f;
    --uv-purple-light: #5425b7;
    --uv-pink: #ff174f;
    --uv-blue: #1557a6;
    --uv-dark: #181425;
    --uv-muted: #777381;

    position: relative;

    width: 100%;

    overflow: hidden;

    padding:
        115px 0 95px;

    background:
        radial-gradient(circle at 8% 30%,
            rgba(84, 37, 183, .08),
            transparent 24%),
        radial-gradient(circle at 94% 55%,
            rgba(255, 23, 79, .07),
            transparent 23%),
        #f7f8fb;
}


/* =========================================================
   BACKGROUND GRID
========================================================= */

.uv-testimonials-grid {

    position: absolute;

    inset: 0;

    opacity: .45;

    background-image:
        linear-gradient(rgba(36, 16, 95, .035) 1px,
            transparent 1px),
        linear-gradient(90deg,
            rgba(36, 16, 95, .035) 1px,
            transparent 1px);

    background-size:
        65px 65px;

    mask-image:
        linear-gradient(to bottom,
            transparent,
            black 18%,
            black 82%,
            transparent);
}


/* =========================================================
   ORBS
========================================================= */

.uv-testimonial-orb {

    position: absolute;

    border-radius: 50%;

    filter: blur(80px);

    pointer-events: none;

    opacity: .22;
}


.uv-testimonial-orb-one {

    width: 330px;
    height: 330px;

    left: -180px;
    top: 230px;

    background:
        #5425b7;
}


.uv-testimonial-orb-two {

    width: 300px;
    height: 300px;

    right: -160px;
    bottom: 130px;

    background:
        #ff174f;
}


/* =========================================================
   CONTAINER
========================================================= */

.uv-testimonials-container {

    position: relative;

    z-index: 2;

    width:
        min(1260px,
            calc(100% - 60px));

    margin: auto;
}


/* =========================================================
   HEADER
========================================================= */

.uv-testimonials-heading {

    max-width: 850px;

    margin:
        0 auto 50px;

    text-align: center;
}


.uv-testimonials-eyebrow {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 9px;

    margin-bottom: 18px;

    color:
        var(--uv-pink);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 2px;
}


.uv-testimonials-eyebrow span {

    width: 23px;
    height: 2px;

    background:
        linear-gradient(90deg,
            var(--uv-purple),
            var(--uv-pink));
}


.uv-testimonials-heading h2 {

    margin: 0;

    font-size:
        clamp(42px,
            5vw,
            68px);

    line-height: .98;

    letter-spacing: -3.5px;

    color:
        var(--uv-dark);
}


.uv-testimonials-heading h2 strong {

    display: block;

    background:
        linear-gradient(90deg,
            var(--uv-purple),
            var(--uv-purple-light),
            var(--uv-pink));

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}


.uv-testimonials-heading p {

    max-width: 600px;

    margin:
        22px auto 0;

    color:
        var(--uv-muted);

    font-size: 14px;

    line-height: 1.7;
}


/* =========================================================
   SLIDER
========================================================= */

.uv-testimonials-slider {

    position: relative;

    display: flex;

    align-items: center;

    gap: 22px;
}


.uv-testimonials-track-wrap {

    width: 100%;

    overflow: hidden;

    padding:
        25px 5px 35px;
}


.uv-testimonials-track {

    display: flex;

    align-items: stretch;

    gap: 18px;

    transition:
        transform .8s cubic-bezier(.65, 0, .35, 1);

    will-change:
        transform;
}


/* =========================================================
   CARDS
========================================================= */

.uv-testimonial-card {

    position: relative;

    flex:
        0 0 calc((100% - 36px) / 3);

    min-width: 0;

    padding: 2px;

    border-radius:
        38px 38px 65px 65px;

    background:
        #fff;

    box-shadow:
        0 15px 45px rgba(36, 16, 95, .07);

    transition:
        transform .55s ease,
        box-shadow .55s ease,
        opacity .55s ease;
}


.uv-testimonial-card::before {

    content: "";

    position: absolute;

    inset: 0;

    border-radius:
        inherit;

    padding: 1px;

    background:
        linear-gradient(145deg,
            rgba(84, 37, 183, .28),
            transparent 45%,
            rgba(255, 23, 79, .2));

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite:
        xor;

    mask-composite:
        exclude;

    pointer-events: none;
}


.uv-testimonial-card:not(.active) {

    transform:
        scale(.91);

    opacity: .75;
}


.uv-testimonial-card.active {

    transform:
        translateY(-10px) scale(1);

    box-shadow:
        0 30px 70px rgba(36, 16, 95, .16);
}


/* =========================================================
   CARD INNER
========================================================= */

.uv-testimonial-card-inner {

    position: relative;

    min-height: 430px;

    display: flex;

    flex-direction: column;

    overflow: hidden;

    padding:
        28px 30px 25px;

    border-radius:
        36px 36px 63px 63px;

    background:
        #fff;
}


/* ACTIVE CARD */

.uv-testimonial-card.active .uv-testimonial-card-inner {

    background:
        linear-gradient(145deg,
            #24105f 0%,
            #362078 52%,
            #5425b7 100%);

    color: #fff;
}


/* =========================================================
   TOP
========================================================= */

.uv-testimonial-top {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;
}


.uv-testimonial-number {

    color:
        #aaa5b3;

    font-size: 8px;

    font-weight: 900;

    letter-spacing: 1.5px;
}


.uv-testimonial-card.active .uv-testimonial-number {

    color:
        rgba(255, 255, 255, .4);
}


.uv-testimonial-quote {

    height: 54px;

    font-family:
        Georgia,
        serif;

    color:
        var(--uv-purple);

    font-size: 78px;

    font-weight: 900;

    line-height: .65;
}


.uv-testimonial-card.active .uv-testimonial-quote {

    color:
        #fff;
}


/* =========================================================
   STARS
========================================================= */

.uv-testimonial-stars {

    margin-top: 22px;

    color:
        #ffae19;

    font-size: 16px;

    letter-spacing: 2px;

    white-space: nowrap;
}


/* =========================================================
   TEXT
========================================================= */

.uv-testimonial-text {

    position: relative;

    z-index: 2;

    margin:
        22px 0 25px;

    color:
        #45404f;

    font-size: 14px;

    line-height: 1.8;

    font-weight: 600;
}


.uv-testimonial-card.active .uv-testimonial-text {

    color:
        rgba(255, 255, 255, .9);
}


/* =========================================================
   AUTHOR
========================================================= */

.uv-testimonial-author {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-top: auto;
}


.uv-testimonial-avatar {

    width: 45px;
    height: 45px;

    flex-shrink: 0;

    display: grid;

    place-items: center;

    border-radius: 50%;

    color:
        #fff;

    font-size: 11px;

    font-weight: 900;

    background:
        linear-gradient(135deg,
            var(--uv-purple),
            var(--uv-pink));

    box-shadow:
        0 8px 20px rgba(84, 37, 183, .2);
}


.uv-testimonial-author strong {

    display: block;

    color:
        #211c2b;

    font-size: 13px;
}


.uv-testimonial-author span {

    display: block;

    margin-top: 3px;

    color:
        #9b96a4;

    font-size: 8px;

    font-weight: 700;
}


.uv-testimonial-card.active .uv-testimonial-author strong {

    color:
        #fff;
}


.uv-testimonial-card.active .uv-testimonial-author span {

    color:
        rgba(255, 255, 255, .5);
}


/* =========================================================
   CARD BOTTOM
========================================================= */

.uv-testimonial-bottom {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-top: 22px;

    padding-top: 15px;

    border-top:
        1px solid #ece9f0;
}


.uv-testimonial-bottom span {

    color:
        #a29dab;

    font-size: 7px;

    font-weight: 900;

    letter-spacing: 1px;
}


.uv-testimonial-bottom i {

    width: 28px;
    height: 28px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:
        #f2eff8;

    color:
        var(--uv-purple);

    font-size: 13px;

    font-style: normal;
}


.uv-testimonial-card.active .uv-testimonial-bottom {

    border-color:
        rgba(255, 255, 255, .15);
}


.uv-testimonial-card.active .uv-testimonial-bottom span {

    color:
        rgba(255, 255, 255, .5);
}


.uv-testimonial-card.active .uv-testimonial-bottom i {

    background:
        var(--uv-pink);

    color:
        #fff;
}


/* =========================================================
   ARROWS
========================================================= */

.uv-testimonial-arrow {

    position: relative;

    z-index: 5;

    width: 48px;
    height: 48px;

    flex-shrink: 0;

    display: grid;

    place-items: center;

    border:
        1px solid #ded9e8;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, .9);

    color:
        var(--uv-purple);

    font-size: 30px;

    line-height: 1;

    cursor: pointer;

    box-shadow:
        0 10px 25px rgba(36, 16, 95, .08);

    transition:
        .3s ease;
}


.uv-testimonial-arrow:hover {

    color:
        #fff;

    border-color:
        transparent;

    background:
        linear-gradient(135deg,
            var(--uv-purple),
            var(--uv-pink));

    transform:
        translateY(-3px);

    box-shadow:
        0 15px 30px rgba(84, 37, 183, .2);
}


/* =========================================================
   DOTS
========================================================= */

.uv-testimonial-dots {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 9px;

    margin-top: 5px;
}


.uv-testimonial-dots button {

    width: 10px;
    height: 10px;

    padding: 0;

    border: none;

    border-radius: 50%;

    background:
        #d0ced5;

    cursor: pointer;

    transition:
        .35s ease;
}


.uv-testimonial-dots button.active {

    width: 28px;

    border-radius:
        100px;

    background:
        linear-gradient(90deg,
            var(--uv-purple),
            var(--uv-pink));

    box-shadow:
        0 5px 14px rgba(84, 37, 183, .22);
}


/* =========================================================
   TRUST STRIP
========================================================= */

.uv-testimonials-trust {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 40px;

    margin-top: 55px;

    padding:
        20px 30px;

    border:
        1px solid #e5e2ea;

    border-radius:
        18px;

    background:
        rgba(255, 255, 255, .65);

    backdrop-filter:
        blur(10px);
}


.uv-testimonial-trust-item {

    display: flex;

    align-items: center;

    gap: 10px;
}


.uv-testimonial-trust-item strong {

    color:
        var(--uv-purple);

    font-size: 19px;
}


.uv-testimonial-trust-item span {

    color:
        #9893a1;

    font-size: 11px;

    font-weight: 700;
}


.uv-testimonial-trust-divider {

    width: 1px;

    height: 25px;

    background:
        #dedbe4;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

    .uv-testimonial-card {

        flex:
            0 0 calc((100% - 18px) / 2);
    }


    .uv-testimonial-card:not(.active) {

        transform:
            scale(.94);
    }


    .uv-testimonial-card-inner {

        min-height: 400px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .uv-testimonials {

        padding:
            80px 0 70px;
    }


    .uv-testimonials-container {

        width:
            calc(100% - 30px);
    }


    .uv-testimonials-heading {

        margin-bottom:
            25px;
    }


    .uv-testimonials-heading h2 {

        font-size:
            clamp(38px,
                10vw,
                50px);

        letter-spacing:
            -2.5px;
    }


    .uv-testimonials-heading p {

        margin-top: 17px;

        font-size: 12px;
    }


    .uv-testimonials-slider {

        gap: 8px;
    }


    .uv-testimonials-track-wrap {

        padding:
            20px 2px 30px;
    }


    .uv-testimonials-track {

        gap: 12px;
    }


    .uv-testimonial-card {

        flex:
            0 0 100%;

        transform:
            scale(1) !important;

        opacity: 1 !important;
    }


    .uv-testimonial-card-inner {

        min-height:
            390px;

        padding:
            25px 23px 22px;

        border-radius:
            30px 30px 52px 52px;
    }


    .uv-testimonial-arrow {

        width: 38px;
        height: 38px;

        font-size: 24px;
    }


    .uv-testimonial-stars {

        font-size: 14px;
    }


    .uv-testimonial-text {

        font-size: 13px;

        line-height: 1.75;
    }


    .uv-testimonials-trust {

        display: grid;

        grid-template-columns:
            1fr 1fr;

        gap: 18px;

        margin-top: 40px;

        padding:
            20px;
    }


    .uv-testimonial-trust-divider {

        display: none;
    }


    .uv-testimonial-trust-item {

        justify-content: center;

        flex-direction: column;

        text-align: center;

        gap: 4px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

    .uv-testimonials-heading h2 {

        font-size: 37px;
    }


    .uv-testimonial-card-inner {

        min-height:
            410px;
    }


    .uv-testimonial-quote {

        font-size: 68px;
    }


    .uv-testimonial-text {

        font-size: 12px;
    }


    .uv-testimonials-trust-item strong {

        font-size: 17px;
    }

}

/* =========================================
   SECTION 10 — FAQ
========================================= */

.uv-faq {
    position: relative;
    overflow: hidden;
    background: #ffffff;
    padding: 135px 0 120px;
    color: #24232b;
}

.uv-faq-container {
    width: min(1240px, calc(100% - 60px));
    margin: auto;
    position: relative;
    z-index: 2;
}


/* -----------------------------------------
   BACKGROUND
----------------------------------------- */

.uv-faq-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(5px);
}

.uv-faq-glow-one {
    width: 420px;
    height: 420px;
    top: -180px;
    left: -180px;
    background: rgba(75, 36, 167, .055);
}

.uv-faq-glow-two {
    width: 360px;
    height: 360px;
    right: -180px;
    bottom: -180px;
    background: rgba(255, 23, 79, .045);
}


/* -----------------------------------------
   HEADER
----------------------------------------- */

.uv-faq-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #4b24a7;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2.5px;
    margin-bottom: 24px;
}

.uv-faq-eyebrow span {
    width: 28px;
    height: 2px;
    border-radius: 5px;
    background: linear-gradient(90deg,
            #24105f,
            #ff174f);
}

.uv-faq-heading-grid {
    display: grid;
    grid-template-columns: 1.35fr .65fr;
    gap: 70px;
    align-items: end;
}

.uv-faq-heading h2 {
    margin: 0;
    max-width: 760px;
    font-size: clamp(42px, 5vw, 72px);
    line-height: .98;
    letter-spacing: -3.5px;
    font-weight: 800;
}

.uv-faq-heading h2 span {
    display: block;
    background: linear-gradient(90deg,
            #4b24a7,
            #ff174f);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.uv-faq-heading p {
    margin: 0 0 5px;
    max-width: 390px;
    color: #777581;
    font-size: 15px;
    line-height: 1.8;
}


/* -----------------------------------------
   LAYOUT
----------------------------------------- */

.uv-faq-layout {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 80px;
    margin-top: 75px;
}


/* -----------------------------------------
   INTRO CARD
----------------------------------------- */

.uv-faq-intro {
    align-self: start;
}

.uv-faq-intro-card {
    position: relative;
    overflow: hidden;
    padding: 34px;
    border-radius: 24px;
    background: #0b0913;
    color: #fff;
    box-shadow:
        0 25px 60px rgba(25, 15, 60, .15);
}

.uv-faq-intro-card::before {
    content: "";
    position: absolute;
    width: 230px;
    height: 230px;
    right: -100px;
    top: -90px;
    border-radius: 50%;
    background: rgba(75, 36, 167, .4);
    filter: blur(45px);
}

.uv-faq-intro-card::after {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    left: -90px;
    bottom: -100px;
    border-radius: 50%;
    background: rgba(255, 23, 79, .2);
    filter: blur(45px);
}

.uv-faq-intro-icon {
    position: relative;
    z-index: 2;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 15px;
    background: rgba(255, 255, 255, .05);
    color: #ff4167;
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 45px;
}

.uv-faq-intro-card>span {
    position: relative;
    z-index: 2;
    color: #ff4167;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 2px;
}

.uv-faq-intro-card h3 {
    position: relative;
    z-index: 2;
    margin: 14px 0 15px;
    font-size: 27px;
    line-height: 1.15;
    letter-spacing: -1px;
}

.uv-faq-intro-card p {
    position: relative;
    z-index: 2;
    margin: 0;
    color: #9993a7;
    font-size: 12px;
    line-height: 1.75;
}

.uv-faq-contact {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 15px;
    margin-top: 28px;
    padding: 12px 16px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 9px;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .7px;
    text-decoration: none;
    transition: .3s ease;
}

.uv-faq-contact b {
    color: #ff4167;
    font-size: 15px;
    transition: .3s ease;
}

.uv-faq-contact:hover {
    background: #fff;
    color: #24105f;
}

.uv-faq-contact:hover b {
    transform: translate(2px, -2px);
}


/* -----------------------------------------
   MINI STATS
----------------------------------------- */

.uv-faq-mini-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 25px;
    border-top: 1px solid #e4e3e9;
}

.uv-faq-mini-stats div {
    padding: 20px 8px 0;
}

.uv-faq-mini-stats div+div {
    border-left: 1px solid #e4e3e9;
    padding-left: 20px;
}

.uv-faq-mini-stats strong {
    display: block;
    color: #4b24a7;
    font-size: 22px;
    letter-spacing: -1px;
}

.uv-faq-mini-stats span {
    display: block;
    margin-top: 5px;
    color: #8b8994;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .6px;
}


/* -----------------------------------------
   FAQ LIST
----------------------------------------- */

.uv-faq-list {
    border-top: 1px solid #dedde4;
}

.uv-faq-item {
    border-bottom: 1px solid #dedde4;
}

.uv-faq-question {
    width: 100%;
    display: grid;
    grid-template-columns: 48px 1fr 35px;
    align-items: center;
    gap: 12px;
    padding: 27px 8px;
    border: 0;
    background: transparent;
    color: #24232b;
    text-align: left;
    cursor: pointer;
}

.uv-faq-number {
    color: #a3a1ab;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
}

.uv-faq-item.active .uv-faq-number {
    color: #ff174f;
}

.uv-faq-question-text {
    font-size: 15px;
    line-height: 1.4;
    font-weight: 700;
    transition: .3s ease;
}

.uv-faq-question:hover .uv-faq-question-text {
    color: #4b24a7;
}

.uv-faq-plus {
    position: relative;
    width: 26px;
    height: 26px;
    border: 1px solid #d9d7df;
    border-radius: 50%;
    transition: .35s ease;
}

.uv-faq-plus::before,
.uv-faq-plus::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 9px;
    height: 1px;
    background: #4b24a7;
    transform: translate(-50%, -50%);
}

.uv-faq-plus::after {
    transform:
        translate(-50%, -50%) rotate(90deg);
    transition: .3s ease;
}

.uv-faq-item.active .uv-faq-plus {
    border-color: #ff174f;
    background: #ff174f;
}

.uv-faq-item.active .uv-faq-plus::before,
.uv-faq-item.active .uv-faq-plus::after {
    background: #fff;
}

.uv-faq-item.active .uv-faq-plus::after {
    transform:
        translate(-50%, -50%) rotate(0);
}


/* -----------------------------------------
   ANSWER
----------------------------------------- */

.uv-faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    transition:
        grid-template-rows .45s cubic-bezier(.2, .7, .2, 1);
}

.uv-faq-answer>div {
    overflow: hidden;
}

.uv-faq-answer p {
    max-width: 700px;
    margin: 0;
    padding: 0 55px 0;
    color: #777581;
    font-size: 13px;
    line-height: 1.8;
}

.uv-faq-item.active .uv-faq-answer {
    grid-template-rows: 1fr;
}

.uv-faq-item.active .uv-faq-answer p {
    padding-bottom: 28px;
}


/* -----------------------------------------
   BOTTOM
----------------------------------------- */

.uv-faq-bottom {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 22px;
    margin-top: 45px;
}

.uv-faq-bottom span {
    color: #96949e;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.uv-faq-bottom a {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #4b24a7;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    text-decoration: none;
}

.uv-faq-bottom a b {
    color: #ff174f;
    font-size: 15px;
    transition: .3s ease;
}

.uv-faq-bottom a:hover b {
    transform: translate(3px, -3px);
}


/* -----------------------------------------
   REVEAL
----------------------------------------- */

.uv-faq-reveal {
    opacity: 0;
    transform: translateY(35px);
    transition:
        opacity .8s ease,
        transform .8s cubic-bezier(.2, .7, .2, 1);
}

.uv-faq-reveal.uv-faq-visible {
    opacity: 1;
    transform: translateY(0);
}


/* -----------------------------------------
   TABLET
----------------------------------------- */

@media (max-width: 1000px) {

    .uv-faq-heading-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .uv-faq-heading p {
        max-width: 600px;
    }

    .uv-faq-layout {
        grid-template-columns: 280px 1fr;
        gap: 45px;
    }

    .uv-faq-intro-card {
        padding: 27px;
    }

}


/* -----------------------------------------
   MOBILE
----------------------------------------- */

@media (max-width: 760px) {

    .uv-faq {
        padding: 90px 0 80px;
    }

    .uv-faq-container {
        width: calc(100% - 32px);
    }

    .uv-faq-heading h2 {
        font-size: clamp(38px, 11vw, 54px);
        letter-spacing: -2.5px;
    }

    .uv-faq-heading p {
        font-size: 14px;
        line-height: 1.7;
    }

    .uv-faq-layout {
        display: flex;
        flex-direction: column;
        gap: 45px;
        margin-top: 50px;
    }

    .uv-faq-intro-card {
        padding: 27px;
        border-radius: 21px;
    }

    .uv-faq-intro-icon {
        margin-bottom: 32px;
    }

    .uv-faq-intro-card h3 {
        font-size: 25px;
    }

    .uv-faq-question {
        grid-template-columns: 34px 1fr 30px;
        gap: 7px;
        padding: 22px 2px;
    }

    .uv-faq-question-text {
        font-size: 13px;
        padding-right: 5px;
    }

    .uv-faq-number {
        font-size: 14px;
    }

    .uv-faq-plus {
        width: 23px;
        height: 23px;
    }

    .uv-faq-answer p {
        padding-left: 41px;
        padding-right: 15px;
        font-size: 12px;
    }

    .uv-faq-item.active .uv-faq-answer p {
        padding-bottom: 22px;
    }

    .uv-faq-bottom {
        justify-content: center;
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }

}


/* -----------------------------------------
   SMALL MOBILE
----------------------------------------- */

@media (max-width: 400px) {

    .uv-faq-container {
        width: calc(100% - 24px);
    }

    .uv-faq-heading h2 {
        font-size: 36px;
    }

    .uv-faq-question {
        grid-template-columns: 28px 1fr 26px;
    }

    .uv-faq-question-text {
        font-size: 12px;
    }

}

/* =========================================
   SECTION 11 — FINAL CTA / LET'S TALK
========================================= */

.uv-final-cta {
    position: relative;
    min-height: 760px;
    overflow: hidden;
    background: #0b0913;
    color: #fff;
    display: flex;
    align-items: center;
    padding: 120px 0 100px;
}


/* -----------------------------------------
   CONTAINER
----------------------------------------- */

.uv-final-cta-container {
    width: min(1240px, calc(100% - 60px));
    margin: auto;
    position: relative;
    z-index: 5;
}


/* -----------------------------------------
   GRID BACKGROUND
----------------------------------------- */

.uv-final-cta-grid {
    position: absolute;
    inset: 0;
    opacity: .14;
    background-image:
        linear-gradient(rgba(255, 255, 255, .08) 1px,
            transparent 1px),
        linear-gradient(90deg,
            rgba(255, 255, 255, .08) 1px,
            transparent 1px);
    background-size: 55px 55px;

    mask-image:
        radial-gradient(circle at 50% 50%,
            black,
            transparent 75%);
}


/* -----------------------------------------
   GLOW
----------------------------------------- */

.uv-final-cta-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(80px);
}

.uv-final-cta-glow-one {
    width: 520px;
    height: 520px;
    top: -220px;
    left: 20%;
    background: rgba(75, 36, 167, .28);
}

.uv-final-cta-glow-two {
    width: 430px;
    height: 430px;
    right: -160px;
    bottom: -180px;
    background: rgba(255, 23, 79, .18);
}


/* -----------------------------------------
   TOP LABEL
----------------------------------------- */

.uv-final-cta-label {
    display: flex;
    align-items: center;
    gap: 13px;
    color: #8f899f;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 2px;
}

.uv-final-cta-label i {
    width: 35px;
    height: 1px;
    background: rgba(255, 255, 255, .2);
}

.uv-final-cta-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ff174f;
    box-shadow:
        0 0 0 5px rgba(255, 23, 79, .08),
        0 0 18px rgba(255, 23, 79, .7);
    animation: uvFinalPulse 2s infinite;
}

@keyframes uvFinalPulse {

    0%,
    100% {
        box-shadow:
            0 0 0 5px rgba(255, 23, 79, .08),
            0 0 18px rgba(255, 23, 79, .7);
    }

    50% {
        box-shadow:
            0 0 0 10px rgba(255, 23, 79, 0),
            0 0 30px rgba(255, 23, 79, .9);
    }

}


/* -----------------------------------------
   MAIN CONTENT
----------------------------------------- */

.uv-final-cta-content {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    align-items: center;
    gap: 70px;
    margin-top: 65px;
}


/* -----------------------------------------
   COPY
----------------------------------------- */

.uv-final-cta-copy {
    position: relative;
    z-index: 4;
}

.uv-final-cta-copy h2 {
    max-width: 760px;
    margin: 0;
    font-size: clamp(58px, 7vw, 100px);
    line-height: .9;
    letter-spacing: -6px;
    font-weight: 800;
}

.uv-final-cta-copy h2 span {
    display: block;
    width: fit-content;
    background: linear-gradient(90deg,
            #8f6cff,
            #ff4167);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.uv-final-cta-copy p {
    max-width: 510px;
    margin: 30px 0 35px;
    color: #9691a4;
    font-size: 15px;
    line-height: 1.8;
}


/* -----------------------------------------
   CTA BUTTON
----------------------------------------- */

.uv-final-cta-button {
    display: inline-flex;
    align-items: center;
    gap: 35px;
    min-width: 225px;
    justify-content: space-between;
    padding: 17px 19px 17px 22px;
    border-radius: 9px;
    background: #fff;
    color: #24105f;
    text-decoration: none;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .6px;
    box-shadow:
        0 15px 40px rgba(0, 0, 0, .25);
    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.uv-final-cta-button b {
    width: 35px;
    height: 35px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    background: linear-gradient(135deg,
            #4b24a7,
            #ff174f);
    color: #fff;
    font-size: 17px;
    transition: transform .35s ease;
}

.uv-final-cta-button:hover {
    transform: translateY(-4px);
    box-shadow:
        0 22px 50px rgba(0, 0, 0, .35);
}

.uv-final-cta-button:hover b {
    transform: translate(3px, -3px);
}


/* -----------------------------------------
   VISUAL SYSTEM
----------------------------------------- */

.uv-final-cta-visual {
    position: relative;
    width: 430px;
    height: 430px;
    margin: auto;
}


/* -----------------------------------------
   ORBITS
----------------------------------------- */

.uv-final-cta-ring {
    position: absolute;
    left: 50%;
    top: 50%;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.uv-final-cta-ring::before {
    content: "";
    position: absolute;
    width: 7px;
    height: 7px;
    top: 50%;
    left: -4px;
    border-radius: 50%;
    background: #ff174f;
    box-shadow: 0 0 15px rgba(255, 23, 79, .8);
}

.ring-one {
    width: 170px;
    height: 170px;
    animation: uvFinalRotate 12s linear infinite;
}

.ring-two {
    width: 280px;
    height: 280px;
    animation: uvFinalRotateReverse 18s linear infinite;
}

.ring-three {
    width: 400px;
    height: 400px;
    animation: uvFinalRotate 26s linear infinite;
}

.ring-two::before {
    top: auto;
    left: 50%;
    bottom: -4px;
    background: #8f6cff;
}

.ring-three::before {
    top: 30%;
    left: auto;
    right: -4px;
    background: #ff4167;
}

@keyframes uvFinalRotate {

    from {
        transform:
            translate(-50%, -50%) rotate(0deg);
    }

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

}

@keyframes uvFinalRotateReverse {

    from {
        transform:
            translate(-50%, -50%) rotate(360deg);
    }

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

}


/* -----------------------------------------
   CORE
----------------------------------------- */

.uv-final-cta-core {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 125px;
    height: 125px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 30%,
            #4b24a7,
            #191329 55%,
            #0b0913);
    box-shadow:
        0 0 70px rgba(75, 36, 167, .35),
        inset 0 0 30px rgba(255, 255, 255, .04);
    transform: translate(-50%, -50%);
    z-index: 3;
}

.uv-final-cta-core-glow {
    position: absolute;
    inset: 15px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .08);
    animation: uvCorePulse 3s ease-in-out infinite;
}

@keyframes uvCorePulse {

    0%,
    100% {
        transform: scale(.9);
        opacity: .5;
    }

    50% {
        transform: scale(1.1);
        opacity: 1;
    }

}

.uv-final-cta-core strong {
    position: relative;
    z-index: 2;
    font-size: 29px;
    letter-spacing: -2px;
}

.uv-final-cta-core span {
    position: relative;
    z-index: 2;
    color: #aaa4b8;
    font-size: 10px;
    letter-spacing: 3px;
    margin-top: 2px;
}


/* -----------------------------------------
   NODES
----------------------------------------- */

.uv-final-cta-node {
    position: absolute;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #898394;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.uv-final-cta-node span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4b24a7;
    box-shadow:
        0 0 14px rgba(75, 36, 167, .8);
}

.uv-final-cta-node b {
    font-weight: 800;
}

.node-one {
    top: 52px;
    left: 67px;
}

.node-two {
    top: 110px;
    right: 24px;
}

.node-three {
    bottom: 95px;
    right: 17px;
}

.node-four {
    bottom: 35px;
    left: 73px;
}

.node-two span {
    background: #ff174f;
    box-shadow:
        0 0 14px rgba(255, 23, 79, .8);
}

.node-three span {
    background: #8f6cff;
    box-shadow:
        0 0 14px rgba(143, 108, 255, .8);
}


/* -----------------------------------------
   BOTTOM INFO
----------------------------------------- */

.uv-final-cta-bottom {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: end;
    gap: 40px;
    margin-top: 85px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.uv-final-cta-contact {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.uv-final-cta-contact span {
    color: #686274;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.8px;
}

.uv-final-cta-contact a,
.uv-final-cta-contact strong {
    color: #d8d4df;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.uv-final-cta-contact a:hover {
    color: #ff4167;
}

.uv-final-cta-contact-right {
    text-align: right;
}

.uv-final-cta-scroll {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    color: #5e5969;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.uv-final-cta-scroll i {
    width: 1px;
    height: 30px;
    background: linear-gradient(180deg,
            #ff174f,
            transparent);
    animation: uvScrollLine 1.7s ease-in-out infinite;
}

@keyframes uvScrollLine {

    0%,
    100% {
        transform: scaleY(.5);
        transform-origin: top;
    }

    50% {
        transform: scaleY(1);
        transform-origin: top;
    }

}


/* -----------------------------------------
   REVEAL
----------------------------------------- */

.uv-final-cta-reveal {
    opacity: 0;
    transform: translateY(35px);
    transition:
        opacity .9s ease,
        transform .9s cubic-bezier(.2, .7, .2, 1);
}

.uv-final-cta-reveal.uv-final-cta-visible {
    opacity: 1;
    transform: translateY(0);
}


/* -----------------------------------------
   TABLET
----------------------------------------- */

@media (max-width: 1000px) {

    .uv-final-cta-content {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .uv-final-cta-visual {
        width: 360px;
        height: 360px;
    }

    .ring-one {
        width: 145px;
        height: 145px;
    }

    .ring-two {
        width: 240px;
        height: 240px;
    }

    .ring-three {
        width: 340px;
        height: 340px;
    }

    .uv-final-cta-copy {
        text-align: center;
    }

    .uv-final-cta-copy h2,
    .uv-final-cta-copy p {
        margin-left: auto;
        margin-right: auto;
    }

    .uv-final-cta-button {
        margin: auto;
    }

}


/* -----------------------------------------
   MOBILE
----------------------------------------- */

@media (max-width: 760px) {

    .uv-final-cta {
        min-height: auto;
        padding: 90px 0 70px;
    }

    .uv-final-cta-container {
        width: calc(100% - 32px);
    }

    .uv-final-cta-label {
        flex-wrap: wrap;
        gap: 9px;
        font-size: 10px;
        letter-spacing: 1.4px;
    }

    .uv-final-cta-label i {
        width: 20px;
    }

    .uv-final-cta-content {
        margin-top: 45px;
        gap: 35px;
    }

    .uv-final-cta-copy h2 {
        font-size: clamp(48px, 14vw, 68px);
        letter-spacing: -4px;
        line-height: .92;
    }

    .uv-final-cta-copy p {
        font-size: 13px;
        line-height: 1.75;
        margin-top: 25px;
    }

    .uv-final-cta-button {
        width: 100%;
        max-width: 320px;
    }

    .uv-final-cta-visual {
        width: 300px;
        height: 300px;
    }

    .ring-one {
        width: 115px;
        height: 115px;
    }

    .ring-two {
        width: 195px;
        height: 195px;
    }

    .ring-three {
        width: 285px;
        height: 285px;
    }

    .uv-final-cta-core {
        width: 100px;
        height: 100px;
    }

    .uv-final-cta-core strong {
        font-size: 24px;
    }

    .node-one {
        top: 35px;
        left: 35px;
    }

    .node-two {
        top: 72px;
        right: -3px;
    }

    .node-three {
        bottom: 68px;
        right: -8px;
    }

    .node-four {
        bottom: 22px;
        left: 39px;
    }

    .uv-final-cta-bottom {
        grid-template-columns: 1fr 1fr;
        gap: 25px;
        margin-top: 55px;
    }

    .uv-final-cta-scroll {
        display: none;
    }

    .uv-final-cta-contact-right {
        text-align: right;
    }

}


/* -----------------------------------------
   SMALL MOBILE
----------------------------------------- */

@media (max-width: 400px) {

    .uv-final-cta-container {
        width: calc(100% - 24px);
    }

    .uv-final-cta-copy h2 {
        font-size: 46px;
        letter-spacing: -3px;
    }

    .uv-final-cta-visual {
        width: 270px;
        height: 270px;
    }

    .ring-one {
        width: 105px;
        height: 105px;
    }

    .ring-two {
        width: 175px;
        height: 175px;
    }

    .ring-three {
        width: 255px;
        height: 255px;
    }

    .uv-final-cta-core {
        width: 92px;
        height: 92px;
    }

    .uv-final-cta-node {
        font-size: 10px;
    }

}

/* =========================================
   SECTION 12 — FOOTER
========================================= */

.uv-footer {
    position: relative;
    overflow: hidden;
    background: #08070d;
    color: #fff;
    padding: 95px 0 25px;
}

.uv-footer-container {
    width: min(1240px, calc(100% - 60px));
    margin: auto;
    position: relative;
    z-index: 3;
}

.uv-footer-top-glow {
    position: absolute;
    width: 650px;
    height: 300px;
    top: -180px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 50%;
    background: rgba(75, 36, 167, .16);
    filter: blur(80px);
    pointer-events: none;
}


/* -----------------------------------------
   TOP GRID
----------------------------------------- */

.uv-footer-brand {
    max-width: 300px;
}

.uv-footer-logo {
    display: inline-block;
}

.uv-footer-logo img {
    display: block;
    width: 185px;
    height: auto;
    object-fit: contain;
}

.uv-footer-brand p {
    max-width: 270px;
    margin: 24px 0 25px;
    color: #858090;
    font-size: 12px;
    line-height: 1.8;
}


/* -----------------------------------------
   SOCIALS
----------------------------------------- */

.uv-footer-socials {
    display: flex;
    gap: 8px;
}

.uv-footer-socials a {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 8px;
    color: #aaa5b4;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .5px;
    text-decoration: none;
    transition:
        background .3s ease,
        color .3s ease,
        border-color .3s ease,
        transform .3s ease;
}

.uv-footer-socials a:hover {
    background: #fff;
    border-color: #fff;
    color: #24105f;
    transform: translateY(-3px);
}


/* -----------------------------------------
   LINKS
----------------------------------------- */

.uv-footer-links {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(120px, 1fr));
    gap: 45px;
    margin-left: 390px;
    margin-top: -165px;
}

.uv-footer-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.uv-footer-column>span,
.uv-footer-contact>span {
    margin-bottom: 19px;
    color: #666172;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 2px;
}

.uv-footer-column a {
    margin-bottom: 11px;
    color: #a19cab;
    font-size: 13px;
    text-decoration: none;
    transition:
        color .25s ease,
        transform .25s ease;
}

.uv-footer-column a:hover {
    color: #fff;
    transform: translateX(4px);
}


/* -----------------------------------------
   CONTACT
----------------------------------------- */

.uv-footer-contact {
    margin-left: 390px;
    margin-top: 55px;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.uv-footer-contact>span {
    display: block;
}

.uv-footer-email {
    display: block;
    width: fit-content;
    color: #fff;
    font-size: clamp(20px, 2.3vw, 30px);
    font-weight: 600;
    letter-spacing: -1px;
    text-decoration: none;
    transition: color .3s ease;
}

.uv-footer-email:hover {
    color: #ff4167;
}

.uv-footer-talk {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-top: 20px;
    padding: 11px 14px;
    border-radius: 7px;
    background: linear-gradient(135deg,
            #4b24a7,
            #ff174f);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .8px;
    text-decoration: none;
}

.uv-footer-talk b {
    font-size: 15px;
    transition: transform .3s ease;
}

.uv-footer-talk:hover b {
    transform: translate(3px, -3px);
}


/* -----------------------------------------
   HUGE STATEMENT
----------------------------------------- */

.uv-footer-statement {
    display: flex;
    align-items: center;
    gap: 25px;
    margin-top: 100px;
}

.uv-footer-statement-line {
    height: 1px;
    flex: 1;
    background: rgba(255, 255, 255, .08);
}

.uv-footer-statement h2 {
    margin: 0;
    font-size: clamp(42px, 6vw, 78px);
    line-height: .9;
    letter-spacing: -5px;
    font-weight: 800;
    white-space: nowrap;
}

.uv-footer-statement h2 span {
    background: linear-gradient(90deg,
            #8f6cff,
            #ff4167);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}


/* -----------------------------------------
   BOTTOM BAR
----------------------------------------- */

.uv-footer-bottom {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 35px;
    margin-top: 70px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    color: #5f5a69;
    font-size: 11px;
}

.uv-footer-legal {
    display: flex;
    gap: 22px;
}

.uv-footer-legal a {
    color: #77717f;
    text-decoration: none;
    transition: color .25s ease;
}

.uv-footer-legal a:hover {
    color: #fff;
}


/* -----------------------------------------
   BACK TO TOP
----------------------------------------- */

.uv-footer-top {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 0;
    background: transparent;
    color: #8c8695;
    cursor: pointer;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1px;
}

.uv-footer-top b {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 7px;
    color: #fff;
    font-size: 15px;
    transition:
        background .3s ease,
        transform .3s ease;
}

.uv-footer-top:hover b {
    background: #ff174f;
    border-color: #ff174f;
    transform: translateY(-3px);
}


/* -----------------------------------------
   REVEAL
----------------------------------------- */

.uv-footer-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition:
        opacity .8s ease,
        transform .8s cubic-bezier(.2, .7, .2, 1);
}

.uv-footer-reveal.uv-footer-visible {
    opacity: 1;
    transform: translateY(0);
}


/* -----------------------------------------
   TABLET
----------------------------------------- */

@media (max-width: 1000px) {

    .uv-footer-links {
        margin-left: 0;
        margin-top: 60px;
    }

    .uv-footer-contact {
        margin-left: 0;
    }

}


/* -----------------------------------------
   MOBILE
----------------------------------------- */

@media (max-width: 760px) {

    .uv-footer {
        padding: 75px 0 22px;
    }

    .uv-footer-container {
        width: calc(100% - 32px);
    }

    .uv-footer-logo img {
        width: 165px;
    }

    .uv-footer-brand p {
        font-size: 13px;
    }

    .uv-footer-links {
        grid-template-columns:
            repeat(2, 1fr);
        gap: 40px 25px;
        margin-top: 55px;
    }

    .uv-footer-column:last-child {
        grid-column: 1 / -1;
    }

    .uv-footer-contact {
        margin-top: 50px;
        padding-top: 25px;
    }

    .uv-footer-email {
        font-size: 20px;
        line-height: 1.25;
        word-break: break-word;
    }

    .uv-footer-statement {
        margin-top: 70px;
        gap: 12px;
    }

    .uv-footer-statement-line {
        display: none;
    }

    .uv-footer-statement h2 {
        width: 100%;
        text-align: center;
        font-size: clamp(38px, 11vw, 56px);
        letter-spacing: -3px;
    }

    .uv-footer-bottom {
        grid-template-columns: 1fr auto;
        gap: 18px;
        margin-top: 55px;
    }

    .uv-footer-legal {
        grid-column: 1 / -1;
        grid-row: 2;
        gap: 15px;
    }

    .uv-footer-top {
        justify-self: end;
    }

}


/* -----------------------------------------
   SMALL MOBILE
----------------------------------------- */

@media (max-width: 400px) {

    .uv-footer-container {
        width: calc(100% - 24px);
    }

    .uv-footer-links {
        gap: 35px 15px;
    }

    .uv-footer-email {
        font-size: 17px;
    }

    .uv-footer-statement h2 {
        font-size: 35px;
    }

    .uv-footer-bottom {
        font-size: 10px;
    }

}


/* =========================================================
   UNIVERSE VYPAAR — INNER PAGE HERO / BREADCRUMB
========================================================= */

.uv-inner-hero {

    --uv-purple: #24105f;
    --uv-purple-light: #5425b7;
    --uv-pink: #ff174f;
    --uv-blue: #1557a6;

    position: relative;

    width: 100%;

    min-height: 470px;

    overflow: hidden;

    display: flex;

    align-items: center;

    background:
        linear-gradient(135deg,
            #24105f 0%,
            #36207c 48%,
            #1557a6 100%);

    color: #fff;
}


/* =========================================================
   BACKGROUND GRID
========================================================= */

.uv-inner-hero-grid {

    position: absolute;

    inset: 0;

    opacity: .13;

    background-image:
        linear-gradient(rgba(255, 255, 255, .35) 1px,
            transparent 1px),
        linear-gradient(90deg,
            rgba(255, 255, 255, .35) 1px,
            transparent 1px);

    background-size:
        65px 65px;

    mask-image:
        linear-gradient(to right,
            black,
            transparent 80%);
}


/* =========================================================
   GLOW ORBS
========================================================= */

.uv-inner-orb {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(80px);

    opacity: .28;

    animation:
        uvInnerOrbFloat 7s ease-in-out infinite;
}


.uv-inner-orb-one {

    width: 400px;
    height: 400px;

    left: -180px;
    top: -180px;

    background:
        #8e4cff;
}


.uv-inner-orb-two {

    width: 330px;
    height: 330px;

    right: -130px;
    bottom: -180px;

    background:
        #ff174f;

    animation-delay:
        -3s;
}


/* =========================================================
   CONTAINER
========================================================= */

.uv-inner-container {

    position: relative;

    z-index: 5;

    width:
        min(1240px,
            calc(100% - 60px));

    min-height: 470px;

    margin: auto;

    display: grid;

    grid-template-columns:
        1.1fr .9fr;

    align-items: center;

    gap: 50px;

    padding:
        120px 0 65px;
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.uv-breadcrumb-content {

    position: relative;

    z-index: 5;
}


.uv-breadcrumb-eyebrow {

    display: flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 18px;

    color:
        #ff7692;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 2px;
}


.uv-breadcrumb-eyebrow span {

    width: 25px;
    height: 2px;

    background:
        linear-gradient(90deg,
            #ff174f,
            #9d70ff);
}


.uv-breadcrumb-content h1 {

    max-width: 700px;

    margin: 0;

    font-size:
        clamp(55px,
            7vw,
            70px);

    line-height: .9;

    letter-spacing: -5px;

    font-weight: 900;
}


.uv-breadcrumb-content p {

    max-width: 570px;

    margin:
        25px 0 27px;

    color:
        rgba(255, 255, 255, .67);

    font-size: 14px;

    line-height: 1.7;
}


/* =========================================================
   BREADCRUMB
========================================================= */

.uv-breadcrumb {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding:
        10px 15px;

    border:
        1px solid rgba(255, 255, 255, .14);

    border-radius:
        100px;

    background:
        rgba(255, 255, 255, .07);

    backdrop-filter:
        blur(10px);

    font-size: 9px;

    font-weight: 700;
}


.uv-breadcrumb a {

    color:
        rgba(255, 255, 255, .55);

    text-decoration: none;

    transition: .3s ease;
}


.uv-breadcrumb a:hover {

    color:
        #fff;
}


.uv-breadcrumb span {

    color:
        #ff4167;

    font-size: 12px;
}


.uv-breadcrumb strong {

    color:
        #fff;
}


/* =========================================================
   RIGHT CREATIVE VISUAL
========================================================= */

.uv-inner-hero-decoration {

    position: relative;

    width: 100%;

    height: 350px;

    display: flex;

    align-items: center;

    justify-content: center;
}


/* CIRCLES */

.uv-inner-circle {

    position: absolute;

    border-radius: 50%;

    border:
        1px solid rgba(255, 255, 255, .16);

    animation:
        uvInnerRotate 20s linear infinite;
}


.circle-one {

    width: 330px;
    height: 330px;
}


.circle-two {

    width: 245px;
    height: 245px;

    border-style: dashed;

    animation-duration:
        15s;

    animation-direction:
        reverse;
}


.circle-three {

    width: 165px;
    height: 165px;

    border-color:
        rgba(255, 23, 79, .55);

    animation-duration:
        11s;
}


/* HERO CARD */

.uv-inner-hero-card {

    position: relative;

    z-index: 5;

    width: 220px;
    height: 170px;

    padding: 25px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    border:
        1px solid rgba(255, 255, 255, .2);

    border-radius:
        25px;

    background:
        linear-gradient(145deg,
            rgba(255, 255, 255, .15),
            rgba(255, 255, 255, .04));

    backdrop-filter:
        blur(20px);

    box-shadow:
        0 30px 70px rgba(0, 0, 0, .25);

    transform:
        rotate(-5deg);

    transition:
        .5s ease;
}


.uv-inner-hero-card:hover {

    transform:
        rotate(0) translateY(-8px);
}


.uv-inner-hero-card span {

    color:
        rgba(255, 255, 255, .5);

    font-size: 7px;

    font-weight: 900;

    letter-spacing: 2px;
}


.uv-inner-hero-card strong {

    font-size: 26px;

    line-height: .9;

    letter-spacing: -1px;
}


.uv-inner-hero-card em {

    color:
        #ff4167;

    font-style: normal;
}


.uv-inner-hero-card small {

    color:
        rgba(255, 255, 255, .45);

    font-size: 10px;

    letter-spacing: 1px;
}


/* =========================================================
   FLOATING CARDS
========================================================= */

.uv-inner-floating-card {

    position: absolute;

    z-index: 8;

    display: flex;

    align-items: center;

    gap: 8px;

    padding:
        10px 14px;

    border:
        1px solid rgba(255, 255, 255, .15);

    border-radius:
        10px;

    background:
        rgba(15, 10, 35, .65);

    backdrop-filter:
        blur(12px);

    color:
        rgba(255, 255, 255, .8);

    font-size: 7px;

    font-weight: 900;

    letter-spacing: 1px;

    box-shadow:
        0 15px 30px rgba(0, 0, 0, .2);

    animation:
        uvInnerFloat 4s ease-in-out infinite;
}


.uv-inner-floating-card span {

    color:
        #ff4167;
}


.card-one {

    left: 3%;

    top: 16%;
}


.card-two {

    right: 3%;

    bottom: 16%;

    animation-delay:
        -2s;
}


.card-two span {

    color:
        #a574ff;
}


/* =========================================================
   BOTTOM CURVE
========================================================= */

.uv-inner-bottom-shape {

    position: absolute;

    z-index: 4;

    left: -5%;

    bottom: -70px;

    width: 110%;

    height: 130px;

    border-radius:
        50% 50% 0 0;

    background:
        #f7f8fb;

    transform:
        rotate(-1deg);
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes uvInnerOrbFloat {

    0%,
    100% {

        transform:
            translate3d(0, 0, 0);

    }

    50% {

        transform:
            translate3d(25px, -20px, 0);

    }

}


@keyframes uvInnerRotate {

    from {

        transform:
            rotate(0deg);

    }

    to {

        transform:
            rotate(360deg);

    }

}


@keyframes uvInnerFloat {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-12px);

    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .uv-inner-container {

        grid-template-columns:
            1fr;

        text-align: center;

        padding:
            85px 0 80px;
    }


    .uv-breadcrumb-content {

        display: flex;

        flex-direction: column;

        align-items: center;
    }


    .uv-breadcrumb-content h1 {

        font-size:
            clamp(55px,
                9vw,
                75px);
    }


    .uv-inner-hero-decoration {

        height: 290px;
    }


    .uv-inner-hero-card {

        width: 200px;
        height: 155px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .uv-inner-hero {

        min-height:
            580px;
    }


    .uv-inner-container {

        width:
            calc(100% - 30px);

        min-height:
            580px;

        padding:
            130px 0 100px;

        gap: 25px;
    }


    .uv-breadcrumb-content h1 {

        font-size:
            clamp(46px,
                13vw,
                62px);

        letter-spacing:
            -3px;
    }


    .uv-breadcrumb-content p {

        max-width:
            360px;

        font-size:
            12px;
    }


    .uv-breadcrumb {

        font-size:
            8px;
    }


    .uv-inner-hero-decoration {

        height:
            245px;
    }


    .circle-one {

        width:
            235px;

        height:
            235px;
    }


    .circle-two {

        width:
            175px;

        height:
            175px;
    }


    .circle-three {

        width:
            120px;

        height:
            120px;
    }


    .uv-inner-hero-card {

        width:
            165px;

        height:
            130px;

        padding:
            18px;

        border-radius:
            19px;
    }


    .uv-inner-hero-card strong {

        font-size:
            21px;
    }


    .uv-inner-floating-card {

        padding:
            8px 10px;

        font-size:
            6px;
    }


    .card-one {

        left:
            0;

        top:
            10%;
    }


    .card-two {

        right:
            0;

        bottom:
            10%;
    }


    .uv-inner-bottom-shape {

        bottom:
            -75px;
    }

}

/* =========================================================
   UNIVERSE VYPAAR — ABOUT PAGE
========================================================= */

.uv-about-page {

    --uv-purple: #24105f;
    --uv-purple-light: #5425b7;
    --uv-pink: #ff174f;
    --uv-blue: #1557a6;
    --uv-dark: #181425;
    --uv-muted: #777381;

    background:
        #f7f8fb;

    color:
        var(--uv-dark);

    overflow: hidden;
}


.uv-about-container {

    width:
        min(1200px,
            calc(100% - 60px));

    margin:
        auto;
}


/* =========================================================
   EYEBROW
========================================================= */

.uv-about-eyebrow {

    display: flex;

    align-items: center;

    gap: 9px;

    color:
        var(--uv-pink);

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 2px;
}


.uv-about-eyebrow span {

    width: 23px;
    height: 2px;

    background:
        linear-gradient(90deg,
            var(--uv-purple),
            var(--uv-pink));
}


/* =========================================================
   INTRO
========================================================= */

.uv-about-intro {

    padding:
        115px 0 105px;

    background:
        #fff;
}


.uv-about-intro .uv-about-container {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 100px;

    align-items: center;
}


.uv-about-intro-left h2 {

    max-width: 520px;

    margin:
        20px 0 0;

    font-size:
        clamp(48px,
            6vw,
            76px);

    line-height: .95;

    letter-spacing:
        -4px;
}


.uv-about-intro-left h2 span {

    display: block;

    background:
        linear-gradient(90deg,
            var(--uv-purple),
            var(--uv-purple-light),
            var(--uv-pink));

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;
}


.uv-about-intro-right {

    max-width:
        540px;
}


.uv-about-lead {

    margin: 0 0 20px;

    color:
        #2c2638;

    font-size:
        21px;

    line-height:
        1.5;

    font-weight:
        650;
}


.uv-about-intro-right p:not(.uv-about-lead) {

    color:
        #77727f;

    font-size:
        13px;

    line-height:
        1.8;
}


.uv-about-link {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    margin-top:
        18px;

    color:
        var(--uv-purple);

    text-decoration:
        none;

    font-size:
        11px;

    font-weight:
        900;
}


.uv-about-link span {

    width:
        30px;

    height:
        30px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    color:
        #fff;

    background:
        var(--uv-pink);
}


/* =========================================================
   STATEMENT
========================================================= */

.uv-about-statement {

    position:
        relative;

    padding:
        100px 0;

    overflow:
        hidden;

    background:
        linear-gradient(135deg,
            #24105f,
            #382083 55%,
            #1557a6);

    color:
        #fff;
}


.uv-about-statement-bg {

    position:
        absolute;

    right:
        -50px;

    bottom:
        -40px;

    color:
        rgba(255, 255, 255, .025);

    font-size:
        240px;

    font-weight:
        900;

    letter-spacing:
        -15px;

    line-height:
        .7;
}


.uv-about-statement-card {

    position:
        relative;

    display:
        grid;

    grid-template-columns:
        60px 1fr 240px;

    gap:
        30px;

    align-items:
        center;

    padding:
        45px;

    border:
        1px solid rgba(255, 255, 255, .14);

    border-radius:
        30px;

    background:
        rgba(255, 255, 255, .06);

    backdrop-filter:
        blur(20px);
}


.uv-about-statement-number {

    color:
        rgba(255, 255, 255, .35);

    font-size:
        11px;

    font-weight:
        900;
}


.uv-about-statement-main small {

    color:
        #ff5575;

    font-size:
        8px;

    font-weight:
        900;

    letter-spacing:
        2px;
}


.uv-about-statement-main h2 {

    max-width:
        650px;

    margin:
        13px 0 0;

    font-size:
        clamp(30px,
            4vw,
            49px);

    line-height:
        1.05;

    letter-spacing:
        -2px;
}


.uv-about-statement-main h2 strong {

    display:
        block;

    color:
        #a77bff;
}


.uv-about-statement-side {

    display:
        flex;

    flex-direction:
        column;

    gap:
        8px;

    color:
        rgba(255, 255, 255, .55);

    font-size:
        7px;

    font-weight:
        900;

    letter-spacing:
        1.5px;
}


.uv-about-statement-side i {

    color:
        #ff4167;

    font-style:
        normal;
}


/* =========================================================
   STORY
========================================================= */

.uv-about-story {

    padding:
        120px 0;

    background:
        #fff;
}


.uv-about-story-heading {

    max-width:
        650px;

    margin-bottom:
        60px;
}


.uv-about-story-heading h2 {

    margin:
        18px 0 0;

    font-size:
        clamp(42px,
            5vw,
            65px);

    line-height:
        .95;

    letter-spacing:
        -3px;
}


.uv-about-story-heading h2 span {

    display:
        block;

    color:
        var(--uv-purple-light);
}


.uv-about-story-grid {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        100px;

    align-items:
        center;
}


.uv-about-story-text {

    max-width:
        550px;
}


.uv-about-story-text p {

    color:
        #77727f;

    font-size:
        13px;

    line-height:
        1.8;

    margin:
        0 0 20px;
}


.uv-about-story-text p.large {

    color:
        #282231;

    font-size:
        20px;

    line-height:
        1.55;

    font-weight:
        650;
}


/* =========================================================
   STORY VISUAL
========================================================= */

.uv-about-story-visual {

    position:
        relative;

    height:
        430px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;
}


.uv-story-circle {

    width:
        180px;

    height:
        180px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    background:
        linear-gradient(135deg,
            var(--uv-purple),
            var(--uv-pink));

    color:
        #fff;

    font-size:
        65px;

    font-weight:
        900;

    box-shadow:
        0 30px 70px rgba(84, 37, 183, .3);

    animation:
        uvStoryPulse 4s ease-in-out infinite;
}


.uv-story-line {

    position:
        absolute;

    width:
        330px;

    height:
        330px;

    border:
        1px dashed #d9d3e5;

    border-radius:
        50%;

    animation:
        uvStoryRotate 22s linear infinite;
}


.line-two {

    width:
        250px;

    height:
        250px;

    animation-direction:
        reverse;

    animation-duration:
        15s;
}


.uv-story-point {

    position:
        absolute;

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    padding:
        9px 12px;

    border:
        1px solid #e4dfeb;

    border-radius:
        100px;

    background:
        #fff;

    color:
        #77727f;

    font-size:
        7px;

    font-weight:
        900;

    letter-spacing:
        1px;

    box-shadow:
        0 10px 25px rgba(36, 16, 95, .08);
}


.uv-story-point b {

    color:
        var(--uv-pink);
}


.point-one {

    top:
        12%;

    left:
        8%;
}


.point-two {

    top:
        22%;

    right:
        4%;
}


.point-three {

    bottom:
        17%;

    left:
        5%;
}


.point-four {

    right:
        7%;

    bottom:
        13%;
}


/* =========================================================
   STATS
========================================================= */

.uv-about-stats {

    padding:
        70px 0;

    background:
        #f7f5fb;
}


.uv-about-stats-grid {

    display:
        grid;

    grid-template-columns:
        repeat(4, 1fr);

    border:
        1px solid #e4dfeb;

    border-radius:
        25px;

    background:
        #fff;

    overflow:
        hidden;
}


.uv-about-stat {

    padding:
        35px 25px;

    text-align:
        center;

    border-right:
        1px solid #eeeaf2;
}


.uv-about-stat:last-child {

    border-right:
        none;
}


.uv-about-stat strong {

    display:
        block;

    color:
        var(--uv-purple);

    font-size:
        40px;

    letter-spacing:
        -2px;
}


.uv-about-stat span {

    display:
        block;

    margin-top:
        5px;

    color:
        #918b9b;

    font-size:
        9px;

    font-weight:
        800;
}


/* =========================================================
   DIFFERENCE
========================================================= */

.uv-about-difference {

    padding:
        120px 0;

    background:
        #f7f8fb;
}


.uv-about-difference-header {

    display:
        flex;

    justify-content:
        space-between;

    gap:
        50px;

    align-items:
        flex-end;

    margin-bottom:
        55px;
}


.uv-about-difference-header h2 {

    margin:
        18px 0 0;

    font-size:
        clamp(43px,
            5vw,
            65px);

    line-height:
        .95;

    letter-spacing:
        -3px;
}


.uv-about-difference-header h2 span {

    color:
        var(--uv-purple-light);
}


.uv-about-difference-header>p {

    max-width:
        370px;

    margin:
        0;

    color:
        #77727f;

    font-size:
        12px;

    line-height:
        1.7;
}


.uv-about-values {

    display:
        grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap:
        14px;
}


.uv-about-value {

    position:
        relative;

    min-height:
        300px;

    padding:
        25px;

    border:
        1px solid #e4e0ea;

    border-radius:
        22px;

    background:
        #fff;

    overflow:
        hidden;

    transition:
        .45s ease;
}


.uv-about-value:hover {

    transform:
        translateY(-8px);

    border-color:
        #cfc4e6;

    box-shadow:
        0 25px 50px rgba(36, 16, 95, .1);
}


.uv-about-value>span {

    color:
        #aaa4b1;

    font-size:
        9px;

    font-weight:
        900;
}


.uv-about-value-icon {

    width:
        55px;

    height:
        55px;

    display:
        grid;

    place-items:
        center;

    margin:
        55px 0 25px;

    border-radius:
        17px;

    background:
        linear-gradient(135deg,
            #eee7ff,
            #fff0f5);

    color:
        var(--uv-purple);

    font-size:
        25px;
}


.uv-about-value h3 {

    margin:
        0 0 10px;

    font-size:
        17px;
}


.uv-about-value p {

    margin:
        0;

    color:
        #898391;

    font-size:
        10px;

    line-height:
        1.7;
}


/* =========================================================
   CTA
========================================================= */

.uv-about-cta {

    position:
        relative;

    padding:
        90px 0;

    overflow:
        hidden;

    background:
        #fff;
}


.uv-about-cta-glow {

    position:
        absolute;

    width:
        500px;

    height:
        500px;

    right:
        -200px;

    top:
        -250px;

    border-radius:
        50%;

    background:
        #5425b7;

    filter:
        blur(120px);

    opacity:
        .12;
}


.uv-about-cta-inner {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        40px;

    padding:
        45px 50px;

    border-radius:
        28px;

    background:
        linear-gradient(135deg,
            #24105f,
            #5425b7);

    color:
        #fff;

    overflow:
        hidden;
}


.uv-about-cta-inner>div span {

    color:
        #ff7190;

    font-size:
        8px;

    font-weight:
        900;

    letter-spacing:
        1.5px;
}


.uv-about-cta-inner h2 {

    max-width:
        650px;

    margin:
        12px 0 0;

    font-size:
        clamp(30px,
            4vw,
            48px);

    line-height:
        1;

    letter-spacing:
        -2px;
}


.uv-about-cta-inner h2 strong {

    color:
        #a879ff;
}


.uv-about-cta-inner>a {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        11px 15px 11px 18px;

    border-radius:
        100px;

    background:
        #fff;

    color:
        var(--uv-purple);

    text-decoration:
        none;

    font-size:
        9px;

    font-weight:
        900;

    white-space:
        nowrap;
}


.uv-about-cta-inner>a i {

    width:
        27px;

    height:
        27px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    background:
        var(--uv-pink);

    color:
        #fff;

    font-style:
        normal;
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes uvStoryPulse {

    0%,
    100% {
        transform:
            scale(1);
    }

    50% {
        transform:
            scale(1.05);
    }
}


@keyframes uvStoryRotate {

    from {
        transform:
            rotate(0);
    }

    to {
        transform:
            rotate(360deg);
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 950px) {

    .uv-about-intro .uv-about-container {

        gap:
            50px;
    }


    .uv-about-story-grid {

        gap:
            50px;
    }


    .uv-about-values {

        grid-template-columns:
            repeat(2, 1fr);
    }


    .uv-about-stats-grid {

        grid-template-columns:
            repeat(2, 1fr);
    }


    .uv-about-stat:nth-child(2) {

        border-right:
            none;
    }


    .uv-about-stat:nth-child(-n+2) {

        border-bottom:
            1px solid #eeeaf2;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .uv-about-container {

        width:
            calc(100% - 30px);
    }


    .uv-about-intro {

        padding:
            75px 0;
    }


    .uv-about-intro .uv-about-container {

        grid-template-columns:
            1fr;

        gap:
            35px;
    }


    .uv-about-intro-left h2 {

        font-size:
            48px;

        letter-spacing:
            -2.5px;
    }


    .uv-about-lead {

        font-size:
            17px;
    }


    .uv-about-statement {

        padding:
            70px 0;
    }


    .uv-about-statement-card {

        grid-template-columns:
            1fr;

        gap:
            20px;

        padding:
            30px;
    }


    .uv-about-statement-side {

        flex-direction:
            row;

        flex-wrap:
            wrap;
    }


    .uv-about-statement-side i {

        display:
            none;
    }


    .uv-about-story {

        padding:
            80px 0;
    }


    .uv-about-story-grid {

        grid-template-columns:
            1fr;
    }


    .uv-about-story-heading h2 {

        font-size:
            43px;
    }


    .uv-about-story-visual {

        height:
            350px;
    }


    .uv-about-stats {

        padding:
            50px 0;
    }


    .uv-about-stat {

        padding:
            25px 15px;
    }


    .uv-about-stat strong {

        font-size:
            31px;
    }


    .uv-about-stat span {

        font-size:
            8px;
    }


    .uv-about-difference {

        padding:
            80px 0;
    }


    .uv-about-difference-header {

        display:
            block;
    }


    .uv-about-difference-header>p {

        margin-top:
            20px;
    }


    .uv-about-values {

        grid-template-columns:
            1fr;

        gap:
            12px;
    }


    .uv-about-value {

        min-height:
            250px;
    }


    .uv-about-value-icon {

        margin-top:
            35px;
    }


    .uv-about-cta {

        padding:
            60px 0;
    }


    .uv-about-cta-inner {

        display:
            block;

        padding:
            32px 25px;
    }


    .uv-about-cta-inner>a {

        margin-top:
            25px;
    }

}

/* =========================================================
   UNIVERSE VYPAAR — CONTACT PAGE
========================================================= */

.uv-contact-page {

    --uv-purple: #24105f;
    --uv-purple-light: #5425b7;
    --uv-pink: #ff174f;
    --uv-pink-light: #ff4167;
    --uv-blue: #1557a6;
    --uv-dark: #181425;
    --uv-muted: #777381;

    overflow: hidden;

    background:
        #f7f8fb;

    color:
        var(--uv-dark);
}


.uv-contact-container {

    width:
        min(1200px,
            calc(100% - 60px));

    margin:
        auto;
}


/* =========================================================
   COMMON EYEBROW
========================================================= */

.uv-contact-eyebrow {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    color:
        var(--uv-pink);

    font-size:
        9px;

    font-weight:
        900;

    letter-spacing:
        2px;
}


.uv-contact-eyebrow span {

    width:
        24px;

    height:
        2px;

    background:
        linear-gradient(90deg,
            var(--uv-purple),
            var(--uv-pink));
}


/* =========================================================
   MAIN CONTACT
========================================================= */

.uv-contact-main {

    position:
        relative;

    padding:
        115px 0;

    background:
        #fff;
}


.uv-contact-main .uv-contact-container {

    display:
        grid;

    grid-template-columns:
        .9fr 1.1fr;

    gap:
        80px;

    align-items:
        center;
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.uv-contact-left {

    position:
        relative;
}


.uv-contact-left h2 {

    max-width:
        560px;

    margin:
        20px 0;

    font-size:
        clamp(48px,
            6vw,
            76px);

    line-height:
        .91;

    letter-spacing:
        -4px;
}


.uv-contact-left h2 strong {

    display:
        block;

    background:
        linear-gradient(90deg,
            var(--uv-purple),
            var(--uv-purple-light),
            var(--uv-pink));

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;
}


.uv-contact-intro {

    max-width:
        500px;

    margin:
        0 0 30px;

    color:
        #77727f;

    font-size:
        13px;

    line-height:
        1.8;
}


/* =========================================================
   CONTACT DETAILS
========================================================= */

.uv-contact-details {

    display:
        flex;

    flex-direction:
        column;

    gap:
        10px;

    max-width:
        500px;
}


.uv-contact-detail {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    padding:
        13px 15px;

    border:
        1px solid #e8e4ee;

    border-radius:
        15px;

    background:
        #fff;

    text-decoration:
        none;

    transition:
        .35s ease;
}


.uv-contact-detail:hover {

    transform:
        translateX(7px);

    border-color:
        #cfc4e5;

    box-shadow:
        0 15px 35px rgba(36, 16, 95, .08);
}


.uv-contact-detail-icon {

    width:
        40px;

    height:
        40px;

    flex-shrink:
        0;

    display:
        grid;

    place-items:
        center;

    border-radius:
        12px;

    background:
        linear-gradient(135deg,
            #eee7ff,
            #ffe9ef);

    color:
        var(--uv-purple);

    font-size:
        15px;

    font-weight:
        900;
}


.uv-contact-detail div:nth-child(2) {

    display:
        flex;

    flex-direction:
        column;

    gap:
        3px;
}


.uv-contact-detail span {

    color:
        #aaa4b1;

    font-size:
        7px;

    font-weight:
        900;

    letter-spacing:
        1px;
}


.uv-contact-detail strong {

    color:
        #2a2435;

    font-size:
        11px;
}


.uv-contact-detail i {

    margin-left:
        auto;

    color:
        var(--uv-pink);

    font-size:
        15px;

    font-style:
        normal;
}


/* =========================================================
   RESPONSE
========================================================= */

.uv-contact-response {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    margin-top:
        22px;
}


.uv-response-dot {

    width:
        9px;

    height:
        9px;

    border-radius:
        50%;

    background:
        #32c987;

    box-shadow:
        0 0 0 5px rgba(50, 201, 135, .1);

    animation:
        uvContactPulse 2s infinite;
}


.uv-contact-response strong {

    display:
        block;

    color:
        #38313f;

    font-size:
        9px;
}


.uv-contact-response span {

    display:
        block;

    margin-top:
        3px;

    color:
        #aaa5b0;

    font-size:
        7px;
}


/* =========================================================
   ORBIT VISUAL
========================================================= */

.uv-contact-orbit {

    position:
        relative;

    width:
        100%;

    height:
        260px;

    margin-top:
        35px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;
}


.uv-contact-orbit-ring {

    position:
        absolute;

    border-radius:
        50%;

    border:
        1px dashed #ded7e9;

    animation:
        uvContactRotate 20s linear infinite;
}


.ring-one {

    width:
        230px;

    height:
        230px;
}


.ring-two {

    width:
        175px;

    height:
        175px;

    border-style:
        solid;

    border-color:
        #eee9f3;

    animation-direction:
        reverse;

    animation-duration:
        14s;
}


.ring-three {

    width:
        120px;

    height:
        120px;

    border-color:
        rgba(255, 23, 79, .35);

    animation-duration:
        9s;
}


.uv-contact-core {

    position:
        relative;

    z-index:
        4;

    width:
        105px;

    height:
        105px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        linear-gradient(135deg,
            var(--uv-purple),
            var(--uv-purple-light));

    color:
        #fff;

    box-shadow:
        0 25px 50px rgba(84, 37, 183, .25);
}


.uv-contact-core small {

    color:
        rgba(255, 255, 255, .5);

    font-size:
        5px;

    font-weight:
        900;

    letter-spacing:
        2px;
}


.uv-contact-core strong {

    margin:
        6px 0;

    font-size:
        17px;

    line-height:
        .8;

    text-align:
        center;
}


.uv-contact-core strong span {

    color:
        #ff4167;
}


.uv-contact-core em {

    position:
        absolute;

    right:
        -3px;

    bottom:
        4px;

    width:
        25px;

    height:
        25px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    background:
        var(--uv-pink);

    font-style:
        normal;
}


/* ORBIT TAGS */

.uv-contact-orbit-tag {

    position:
        absolute;

    z-index:
        6;

    padding:
        7px 10px;

    border:
        1px solid #e5dfeb;

    border-radius:
        100px;

    background:
        #fff;

    color:
        var(--uv-purple);

    font-size:
        6px;

    font-weight:
        900;

    letter-spacing:
        1px;

    box-shadow:
        0 8px 20px rgba(36, 16, 95, .08);

    animation:
        uvContactFloat 4s ease-in-out infinite;
}


.tag-one {

    top:
        25%;

    left:
        8%;
}


.tag-two {

    right:
        8%;

    top:
        30%;

    animation-delay:
        -1.5s;
}


.tag-three {

    bottom:
        16%;

    right:
        19%;

    animation-delay:
        -3s;
}


/* =========================================================
   FORM CARD
========================================================= */

.uv-contact-form-card {

    position:
        relative;

    padding:
        35px;

    border:
        1px solid #e3dfea;

    border-radius:
        28px;

    background:
        #fff;

    box-shadow:
        0 30px 80px rgba(36, 16, 95, .1);
}


.uv-contact-form-card::before {

    content:
        "";

    position:
        absolute;

    left:
        30px;

    right:
        30px;

    top:
        0;

    height:
        3px;

    border-radius:
        0 0 10px 10px;

    background:
        linear-gradient(90deg,
            var(--uv-purple),
            var(--uv-pink));
}


/* =========================================================
   FORM HEADER
========================================================= */

.uv-contact-form-header {

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        20px;

    margin-bottom:
        28px;
}


.uv-contact-form-header span {

    color:
        var(--uv-pink);

    font-size:
        8px;

    font-weight:
        900;

    letter-spacing:
        1.5px;
}


.uv-contact-form-header h3 {

    max-width:
        350px;

    margin:
        9px 0 0;

    color:
        #211b2d;

    font-size:
        27px;

    line-height:
        1.05;

    letter-spacing:
        -1px;
}


.uv-form-number {

    color:
        #d2ced8;

    font-size:
        10px;

    font-weight:
        900;
}


/* =========================================================
   FORM
========================================================= */

.uv-contact-form {

    display:
        flex;

    flex-direction:
        column;

    gap:
        18px;
}


.uv-form-row {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        15px;
}


.uv-form-group {

    position:
        relative;
}


.uv-form-group label {

    display:
        block;

    margin-bottom:
        7px;

    color:
        #4d4658;

    font-size:
        8px;

    font-weight:
        900;
}


.uv-form-group label span {

    color:
        var(--uv-pink);
}


.uv-form-group input,
.uv-form-group textarea,
.uv-form-group select {

    width:
        100%;

    box-sizing:
        border-box;

    border:
        1px solid #e3dfe8;

    border-radius:
        10px;

    outline:
        none;

    background:
        #faf9fc;

    color:
        #2c2637;

    font-family:
        inherit;

    font-size:
        10px;

    transition:
        .3s ease;
}


.uv-form-group input,
.uv-form-group select {

    height:
        44px;

    padding:
        0 13px;
}


.uv-form-group textarea {

    min-height:
        105px;

    resize:
        vertical;

    padding:
        13px;
}


.uv-form-group input::placeholder,
.uv-form-group textarea::placeholder {

    color:
        #b2adb8;
}


.uv-form-group input:focus,
.uv-form-group textarea:focus,
.uv-form-group select:focus {

    border-color:
        var(--uv-purple-light);

    background:
        #fff;

    box-shadow:
        0 0 0 4px rgba(84, 37, 183, .07);
}


/* SELECT */

.uv-select-wrap {

    position:
        relative;
}


.uv-select-wrap select {

    appearance:
        none;

    cursor:
        pointer;

    padding-right:
        40px;
}


.uv-select-arrow {

    position:
        absolute;

    right:
        14px;

    top:
        50%;

    transform:
        translateY(-50%);

    color:
        var(--uv-purple);

    font-size:
        12px;

    pointer-events:
        none;
}


/* =========================================================
   BUDGET
========================================================= */

.uv-budget-options {

    display:
        grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap:
        7px;
}


.uv-budget-option {

    position:
        relative;

    cursor:
        pointer;
}


.uv-budget-option input {

    position:
        absolute;

    opacity:
        0;

    pointer-events:
        none;
}


.uv-budget-option span {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        38px;

    padding:
        5px;

    border:
        1px solid #e4e0e9;

    border-radius:
        8px;

    background:
        #faf9fc;

    color:
        #77717f;

    font-size:
        7px;

    font-weight:
        800;

    text-align:
        center;

    transition:
        .3s ease;
}


.uv-budget-option:hover span {

    border-color:
        #cfc2e5;

    color:
        var(--uv-purple);
}


.uv-budget-option input:checked+span {

    border-color:
        transparent;

    background:
        linear-gradient(135deg,
            var(--uv-purple),
            var(--uv-pink));

    color:
        #fff;

    box-shadow:
        0 8px 18px rgba(84, 37, 183, .15);
}


/* =========================================================
   SUBMIT
========================================================= */

.uv-contact-submit-row {

    display:
        flex;

    align-items:
        center;

    gap:
        15px;

    padding-top:
        3px;
}


.uv-contact-submit {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        12px;

    padding:
        6px 7px 6px 18px;

    border:
        none;

    border-radius:
        100px;

    background:
        linear-gradient(100deg,
            var(--uv-purple),
            var(--uv-purple-light),
            var(--uv-pink));

    color:
        #fff;

    font-family:
        inherit;

    font-size:
        9px;

    font-weight:
        900;

    cursor:
        pointer;

    box-shadow:
        0 12px 28px rgba(84, 37, 183, .22);

    transition:
        .35s ease;
}


.uv-contact-submit i {

    width:
        30px;

    height:
        30px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    background:
        rgba(255, 255, 255, .18);

    font-style:
        normal;

    transition:
        .3s ease;
}


.uv-contact-submit:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 18px 35px rgba(84, 37, 183, .28);
}


.uv-contact-submit:hover i {

    background:
        #fff;

    color:
        var(--uv-purple);

    transform:
        translate(2px, -2px);
}


.uv-contact-submit:disabled {

    opacity:
        .7;

    cursor:
        wait;
}


.uv-contact-submit-row small {

    max-width:
        220px;

    color:
        #aaa5b0;

    font-size:
        6px;

    line-height:
        1.5;
}


/* SUCCESS */

.uv-contact-success {

    display:
        none;

    align-items:
        center;

    gap:
        12px;

    padding:
        13px;

    border:
        1px solid #bdebd6;

    border-radius:
        12px;

    background:
        #f1fff8;
}


.uv-contact-success.show {

    display:
        flex;

    animation:
        uvContactSuccess .5s ease;
}


.uv-contact-success>span {

    width:
        30px;

    height:
        30px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    background:
        #32c987;

    color:
        #fff;

    font-weight:
        900;
}


.uv-contact-success strong {

    display:
        block;

    color:
        #227a58;

    font-size:
        9px;
}


.uv-contact-success p {

    margin:
        3px 0 0;

    color:
        #6e8e80;

    font-size:
        7px;
}


/* =========================================================
   PROCESS
========================================================= */

.uv-contact-process {

    padding:
        110px 0;

    background:
        #f7f8fb;
}


.uv-contact-process-heading {

    max-width:
        700px;

    margin-bottom:
        55px;
}


.uv-contact-process-heading h2 {

    margin:
        18px 0 0;

    font-size:
        clamp(43px,
            5vw,
            64px);

    line-height:
        .95;

    letter-spacing:
        -3px;
}


.uv-contact-process-heading h2 strong {

    color:
        var(--uv-purple-light);
}


.uv-contact-steps {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;
}


.uv-contact-step {

    position:
        relative;

    width:
        220px;

    min-height:
        220px;

    padding:
        22px;

    border:
        1px solid #e4e0e9;

    border-radius:
        20px;

    background:
        #fff;

    transition:
        .4s ease;
}


.uv-contact-step:hover {

    transform:
        translateY(-7px);

    border-color:
        #ccc1e1;

    box-shadow:
        0 20px 40px rgba(36, 16, 95, .08);
}


.uv-contact-step>span {

    color:
        #aaa5b1;

    font-size:
        8px;

    font-weight:
        900;
}


.uv-contact-step-icon {

    width:
        45px;

    height:
        45px;

    display:
        grid;

    place-items:
        center;

    margin:
        30px 0 20px;

    border-radius:
        13px;

    background:
        linear-gradient(135deg,
            #eee7ff,
            #ffeaf0);

    color:
        var(--uv-purple);

    font-size:
        20px;
}


.uv-contact-step h3 {

    margin:
        0 0 8px;

    font-size:
        14px;
}


.uv-contact-step p {

    margin:
        0;

    color:
        #898391;

    font-size:
        8px;

    line-height:
        1.7;
}


.uv-contact-step-line {

    width:
        35px;

    height:
        1px;

    background:
        #dcd7e4;
}


/* =========================================================
   FINAL CTA
========================================================= */

.uv-contact-final {

    position:
        relative;

    overflow:
        hidden;

    padding:
        105px 0;

    background:
        linear-gradient(135deg,
            #24105f,
            #392082 55%,
            #1557a6);

    color:
        #fff;
}


.uv-contact-final-glow {

    position:
        absolute;

    width:
        450px;

    height:
        450px;

    right:
        -120px;

    top:
        -230px;

    border-radius:
        50%;

    background:
        #ff174f;

    filter:
        blur(110px);

    opacity:
        .22;
}


.uv-contact-final-inner {

    position:
        relative;

    z-index:
        2;

    text-align:
        center;
}


.uv-contact-final-inner>span {

    color:
        #ff6e8a;

    font-size:
        8px;

    font-weight:
        900;

    letter-spacing:
        2px;
}


.uv-contact-final-inner h2 {

    margin:
        15px 0;

    font-size:
        clamp(45px,
            6vw,
            75px);

    line-height:
        .9;

    letter-spacing:
        -4px;
}


.uv-contact-final-inner h2 strong {

    color:
        #a97dff;
}


.uv-contact-final-inner p {

    max-width:
        520px;

    margin:
        0 auto 28px;

    color:
        rgba(255, 255, 255, .65);

    font-size:
        12px;

    line-height:
        1.7;
}


.uv-contact-final-inner a {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        8px 8px 8px 20px;

    border-radius:
        100px;

    background:
        #fff;

    color:
        var(--uv-purple);

    text-decoration:
        none;

    font-size:
        10px;

    font-weight:
        900;

    transition:
        .3s ease;
}


.uv-contact-final-inner a i {

    width:
        30px;

    height:
        30px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    background:
        var(--uv-pink);

    color:
        #fff;

    font-style:
        normal;
}


.uv-contact-final-inner a:hover {

    transform:
        translateY(-4px);

    box-shadow:
        0 15px 30px rgba(0, 0, 0, .2);
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes uvContactPulse {

    0%,
    100% {

        box-shadow:
            0 0 0 5px rgba(50, 201, 135, .1);

    }

    50% {

        box-shadow:
            0 0 0 9px rgba(50, 201, 135, .03);

    }

}


@keyframes uvContactRotate {

    from {
        transform:
            rotate(0);
    }

    to {
        transform:
            rotate(360deg);
    }

}


@keyframes uvContactFloat {

    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-10px);
    }

}


@keyframes uvContactSuccess {

    from {

        opacity:
            0;

        transform:
            translateY(8px);

    }

    to {

        opacity:
            1;

        transform:
            translateY(0);

    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 950px) {

    .uv-contact-main .uv-contact-container {

        grid-template-columns:
            1fr;

        gap:
            60px;
    }


    .uv-contact-left {

        max-width:
            700px;
    }


    .uv-contact-orbit {

        max-width:
            500px;
    }


    .uv-contact-steps {

        flex-wrap:
            wrap;

        justify-content:
            center;
    }


    .uv-contact-step {

        width:
            calc(50% - 20px);
    }


    .uv-contact-step-line {

        display:
            none;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .uv-contact-container {

        width:
            calc(100% - 30px);
    }


    .uv-contact-main {

        padding:
            75px 0;
    }


    .uv-contact-main .uv-contact-container {

        gap:
            40px;
    }


    .uv-contact-left h2 {

        font-size:
            48px;

        letter-spacing:
            -2.5px;
    }


    .uv-contact-intro {

        font-size:
            12px;
    }


    .uv-contact-form-card {

        padding:
            23px 18px;

        border-radius:
            22px;
    }


    .uv-contact-form-header h3 {

        font-size:
            23px;
    }


    .uv-form-row {

        grid-template-columns:
            1fr;

        gap:
            18px;
    }


    .uv-budget-options {

        grid-template-columns:
            1fr 1fr;
    }


    .uv-contact-submit-row {

        display:
            block;
    }


    .uv-contact-submit {

        width:
            100%;

        justify-content:
            space-between;
    }


    .uv-contact-submit-row small {

        display:
            block;

        margin-top:
            10px;
    }


    .uv-contact-process {

        padding:
            75px 0;
    }


    .uv-contact-process-heading h2 {

        font-size:
            43px;
    }


    .uv-contact-steps {

        display:
            grid;

        grid-template-columns:
            1fr 1fr;

        gap:
            10px;
    }


    .uv-contact-step {

        width:
            auto;

        min-height:
            210px;

        padding:
            18px;
    }


    .uv-contact-step-icon {

        margin-top:
            25px;
    }


    .uv-contact-final {

        padding:
            75px 0;
    }


    .uv-contact-final-inner h2 {

        font-size:
            47px;

        letter-spacing:
            -2.5px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

    .uv-contact-left h2 {

        font-size:
            43px;
    }


    .uv-contact-orbit {

        height:
            230px;
    }


    .uv-contact-orbit-ring.ring-one {

        width:
            205px;

        height:
            205px;
    }


    .uv-contact-form-card {

        padding:
            22px 15px;
    }


    .uv-contact-steps {

        grid-template-columns:
            1fr;
    }


    .uv-contact-step {

        min-height:
            185px;
    }

}

/* =========================================================
   CONTACT PAGE — DESKTOP SCALE IMPROVEMENT
   Add at the END of style.css
========================================================= */

.uv-contact-main {
    padding: 125px 0 130px;
}

.uv-contact-main .uv-contact-container {
    grid-template-columns: 0.95fr 1.05fr;
    gap: 90px;
}


/* LEFT HEADING */

.uv-contact-left h2 {
    max-width: 650px;
    margin: 24px 0 25px;

    font-size: clamp(58px, 5.2vw, 82px);
    line-height: 0.94;
    letter-spacing: -4.5px;
}


.uv-contact-intro {
    max-width: 570px;
    margin-bottom: 34px;

    font-size: 16px;
    line-height: 1.75;
}


/* CONTACT DETAILS */

.uv-contact-details {
    max-width: 570px;
    gap: 12px;
}


.uv-contact-detail {
    min-height: 68px;
    padding: 12px 17px;
    border-radius: 17px;
}


.uv-contact-detail-icon {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    font-size: 17px;
}


.uv-contact-detail span {
    font-size: 8px;
}


.uv-contact-detail strong {
    font-size: 13px;
}


.uv-contact-detail i {
    font-size: 17px;
}


/* RESPONSE */

.uv-contact-response {
    margin-top: 25px;
}


.uv-contact-response strong {
    font-size: 10px;
}


.uv-contact-response span {
    font-size: 8px;
}


/* ORBIT */

.uv-contact-orbit {
    max-width: 570px;
    height: 300px;
    margin-top: 42px;
}


.ring-one {
    width: 260px;
    height: 260px;
}


.ring-two {
    width: 205px;
    height: 205px;
}


.ring-three {
    width: 145px;
    height: 145px;
}


.uv-contact-core {
    width: 125px;
    height: 125px;
}


.uv-contact-core small {
    font-size: 6px;
}


.uv-contact-core strong {
    font-size: 20px;
}


.uv-contact-core em {
    width: 29px;
    height: 29px;
}


.uv-contact-orbit-tag {
    padding: 8px 12px;
    font-size: 7px;
}


/* =========================================================
   FORM CARD
========================================================= */

.uv-contact-form-card {
    padding: 42px;
    border-radius: 30px;

    box-shadow:
        0 35px 90px rgba(36, 16, 95, .11);
}


.uv-contact-form-header {
    margin-bottom: 34px;
}


.uv-contact-form-header span {
    font-size: 9px;
}


.uv-contact-form-header h3 {
    max-width: 450px;
    margin-top: 11px;

    font-size: 34px;
    line-height: 1.05;
    letter-spacing: -1.5px;
}


.uv-form-number {
    font-size: 12px;
}


/* FORM */

.uv-contact-form {
    gap: 22px;
}


.uv-form-row {
    gap: 18px;
}


.uv-form-group label {
    margin-bottom: 9px;
    font-size: 10px;
}


.uv-form-group input,
.uv-form-group select {
    height: 52px;
    padding: 0 15px;

    font-size: 13px;
    border-radius: 12px;
}


.uv-form-group textarea {
    min-height: 125px;
    padding: 15px;

    font-size: 13px;
    border-radius: 12px;
}


.uv-select-arrow {
    right: 17px;
    font-size: 15px;
}


/* BUDGET */

.uv-budget-options {
    gap: 9px;
}


.uv-budget-option span {
    min-height: 46px;
    padding: 7px;

    font-size: 9px;
    border-radius: 10px;
}


/* SUBMIT */

.uv-contact-submit {
    padding: 7px 8px 7px 21px;
    font-size: 11px;
}


.uv-contact-submit i {
    width: 34px;
    height: 34px;
}


.uv-contact-submit-row small {
    max-width: 260px;
    font-size: 8px;
}


/* =========================================================
   PROCESS
========================================================= */

.uv-contact-process {
    padding: 125px 0;
}


.uv-contact-process-heading {
    margin-bottom: 65px;
}


.uv-contact-process-heading h2 {
    font-size: clamp(48px, 5vw, 68px);
}


.uv-contact-steps {
    gap: 14px;
}


.uv-contact-step {
    width: 245px;
    min-height: 265px;
    padding: 27px;
    border-radius: 23px;
}


.uv-contact-step>span {
    font-size: 10px;
}


.uv-contact-step-icon {
    width: 52px;
    height: 52px;
    margin: 40px 0 23px;

    font-size: 22px;
}


.uv-contact-step h3 {
    font-size: 17px;
    margin-bottom: 10px;
}


.uv-contact-step p {
    font-size: 10px;
    line-height: 1.75;
}


.uv-contact-step-line {
    width: 45px;
}


/* =========================================================
   FINAL CTA
========================================================= */

.uv-contact-final {
    padding: 125px 0;
}


.uv-contact-final-inner>span {
    font-size: 9px;
}


.uv-contact-final-inner h2 {
    margin: 20px 0;

    font-size: clamp(50px, 5.5vw, 76px);
    letter-spacing: -4px;
}


.uv-contact-final-inner p {
    max-width: 600px;
    margin-bottom: 34px;

    font-size: 14px;
}


.uv-contact-final-inner a {
    padding: 9px 9px 9px 22px;
    font-size: 11px;
}


.uv-contact-final-inner a i {
    width: 34px;
    height: 34px;
}

/* =========================================================
   UNIVERSE VYPAAR — WEB DESIGN SERVICE PAGE
========================================================= */

.uv-webdesign-page {

    --uv-purple: #24105f;
    --uv-purple-light: #5425b7;
    --uv-pink: #ff174f;
    --uv-pink-light: #ff4167;
    --uv-blue: #1557a6;
    --uv-dark: #181425;
    --uv-muted: #777381;

    overflow: hidden;

    background: #f7f8fb;

    color: var(--uv-dark);
}


.uv-wd-container {

    width:
        min(1200px, calc(100% - 60px));

    margin: auto;
}


/* =========================================================
   COMMON
========================================================= */

.uv-wd-eyebrow {

    display: flex;

    align-items: center;

    gap: 9px;

    color: var(--uv-pink);

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 2px;
}


.uv-wd-eyebrow span {

    width: 25px;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            var(--uv-purple),
            var(--uv-pink)
        );
}


/* =========================================================
   HERO
========================================================= */

.uv-webdesign-hero {

    position: relative;

    overflow: hidden;

    padding:
        120px 0 135px;

    background: #fff;
}


.uv-webdesign-hero::before {

    content: "";

    position: absolute;

    width: 600px;

    height: 600px;

    right: -250px;

    top: -300px;

    border-radius: 50%;

    background: #ece4ff;

    filter: blur(100px);

    opacity: .65;
}


.uv-wd-container {

    position: relative;

    z-index: 2;
}


.uv-webdesign-hero
.uv-wd-container {

    display: grid;

    grid-template-columns:
        .92fr 1.08fr;

    gap: 60px;

    align-items: center;
}


.uv-wd-hero-content h2 {

    max-width: 650px;

    margin: 22px 0;

    font-size:
        clamp(54px, 5.3vw, 78px);

    line-height: .91;

    letter-spacing: -4px;
}


.uv-wd-hero-content h2 span {

    display: block;

    background:
        linear-gradient(
            90deg,
            var(--uv-purple),
            var(--uv-purple-light)
        );

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;
}


.uv-wd-hero-content h2 strong {

    display: block;

    background:
        linear-gradient(
            90deg,
            var(--uv-purple-light),
            var(--uv-pink)
        );

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;
}


.uv-wd-hero-content > p {

    max-width: 570px;

    color: #77727f;

    font-size: 15px;

    line-height: 1.8;
}


/* =========================================================
   ACTIONS
========================================================= */

.uv-wd-actions {

    display: flex;

    align-items: center;

    gap: 20px;

    margin-top: 30px;
}


.uv-wd-primary {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding:
        7px 8px 7px 21px;

    border-radius: 100px;

    background:
        linear-gradient(
            100deg,
            var(--uv-purple),
            var(--uv-purple-light),
            var(--uv-pink)
        );

    color: #fff;

    text-decoration: none;

    font-size: 10px;

    font-weight: 900;

    box-shadow:
        0 15px 30px
        rgba(84,37,183,.2);

    transition: .35s ease;
}


.uv-wd-primary i {

    width: 32px;

    height: 32px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:
        rgba(255,255,255,.18);

    font-style: normal;
}


.uv-wd-primary:hover {

    transform: translateY(-4px);

    box-shadow:
        0 20px 40px
        rgba(84,37,183,.27);
}


.uv-wd-secondary {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    color: var(--uv-purple);

    text-decoration: none;

    font-size: 10px;

    font-weight: 900;
}


.uv-wd-secondary span {

    color: var(--uv-pink);

    font-size: 14px;

    transition: .3s ease;
}


.uv-wd-secondary:hover span {

    transform: translateY(4px);
}


/* =========================================================
   HERO POINTS
========================================================= */

.uv-wd-hero-points {

    display: flex;

    gap: 30px;

    margin-top: 42px;

    padding-top: 20px;

    border-top:
        1px solid #ebe7f0;
}


.uv-wd-hero-points div {

    display: flex;

    flex-direction: column;

    gap: 5px;
}


.uv-wd-hero-points strong {

    color:
        var(--uv-purple-light);

    font-size: 12px;
}


.uv-wd-hero-points span {

    color: #8e8996;

    font-size: 8px;

    font-weight: 800;
}


/* =========================================================
   HERO VISUAL
========================================================= */

.uv-wd-hero-visual {

    position: relative;

    min-height: 560px;

    display: flex;

    align-items: center;

    justify-content: center;
}


.uv-wd-visual-glow {

    position: absolute;

    width: 380px;

    height: 380px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #dfd3ff,
            #ffe0e8
        );

    filter: blur(45px);

    opacity: .75;
}


/* =========================================================
   BROWSER
========================================================= */

.uv-wd-browser {

    position: relative;

    z-index: 5;

    width: 490px;

    height: 330px;

    overflow: hidden;

    border:
        1px solid #dcd6e7;

    border-radius: 20px;

    background: #fff;

    box-shadow:
        0 35px 80px
        rgba(36,16,95,.16);

    transform:
        perspective(1000px)
        rotateY(-7deg)
        rotateX(3deg);

    transition: .5s ease;
}


.uv-wd-browser:hover {

    transform:
        perspective(1000px)
        rotateY(0)
        rotateX(0)
        translateY(-7px);
}


.uv-wd-browser-top {

    height: 35px;

    display: flex;

    align-items: center;

    padding: 0 12px;

    gap: 15px;

    border-bottom:
        1px solid #ece8f1;

    background: #faf9fc;
}


.uv-wd-browser-dots {

    display: flex;

    gap: 5px;
}


.uv-wd-browser-dots span {

    width: 6px;

    height: 6px;

    border-radius: 50%;

    background: #d7d1df;
}


.uv-wd-browser-address {

    flex: 1;

    height: 20px;

    display: flex;

    align-items: center;

    padding: 0 10px;

    border-radius: 6px;

    background: #f0edf4;

    color: #aaa4b0;

    font-size: 6px;
}


.uv-wd-browser-menu {

    color: #aaa4b0;

    font-size: 8px;
}


.uv-wd-browser-body {

    height: calc(100% - 35px);

    padding: 17px 22px;

    background:
        linear-gradient(
            145deg,
            #fff,
            #f8f6fc
        );
}


.uv-wd-browser-nav {

    display: flex;

    align-items: center;

    justify-content: space-between;
}


.uv-wd-mini-logo {

    width: 25px;

    height: 25px;

    display: grid;

    place-items: center;

    border-radius: 7px;

    background:
        linear-gradient(
            135deg,
            var(--uv-purple),
            var(--uv-pink)
        );

    color: #fff;

    font-size: 7px;

    font-weight: 900;
}


.uv-wd-mini-nav {

    display: flex;

    align-items: center;

    gap: 13px;

    color: #85808d;

    font-size: 6px;

    font-weight: 800;
}


.uv-wd-mini-nav b {

    padding: 6px 9px;

    border-radius: 100px;

    background: var(--uv-purple);

    color: #fff;

    font-size: 5px;
}


/* BROWSER HERO */

.uv-wd-browser-hero {

    display: grid;

    grid-template-columns: 1fr .8fr;

    align-items: center;

    gap: 15px;

    height: 205px;
}


.uv-wd-browser-hero small {

    color: var(--uv-pink);

    font-size: 5px;

    font-weight: 900;

    letter-spacing: 1.5px;
}


.uv-wd-browser-hero strong {

    display: block;

    margin: 8px 0;

    color: #211b2d;

    font-size: 27px;

    line-height: .86;

    letter-spacing: -1.5px;
}


.uv-wd-browser-hero strong em {

    display: block;

    color: var(--uv-purple-light);

    font-style: normal;
}


.uv-wd-browser-hero p {

    max-width: 180px;

    color: #9993a0;

    font-size: 6px;

    line-height: 1.5;
}


.uv-wd-browser-hero button {

    display: flex;

    align-items: center;

    gap: 5px;

    margin-top: 10px;

    padding: 5px 7px;

    border: none;

    border-radius: 100px;

    background: var(--uv-pink);

    color: #fff;

    font-size: 5px;

    font-weight: 900;
}


.uv-wd-browser-hero button i {

    font-style: normal;
}


/* BROWSER ART */

.uv-wd-browser-art {

    position: relative;

    height: 160px;

    display: flex;

    align-items: center;

    justify-content: center;
}


.uv-wd-art-circle {

    width: 135px;

    height: 135px;

    border-radius: 50%;

    border:
        1px dashed
        #d5cbea;

    animation:
        uvWdRotate
        16s linear infinite;
}


.uv-wd-art-card {

    position: absolute;

    width: 105px;

    height: 85px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    padding: 13px;

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            var(--uv-purple),
            var(--uv-purple-light)
        );

    color: #fff;

    box-shadow:
        0 15px 30px
        rgba(36,16,95,.22);

    transform: rotate(7deg);
}


.uv-wd-art-card span {

    color:
        rgba(255,255,255,.5);

    font-size: 5px;
}


.uv-wd-art-card strong {

    font-size: 17px;

    line-height: 1;
}


.uv-wd-art-card small {

    color:
        rgba(255,255,255,.55);

    font-size: 5px;

    letter-spacing: 1px;
}


.uv-wd-browser-bottom {

    display: flex;

    justify-content: space-between;

    padding-top: 8px;

    border-top:
        1px solid #e9e5ee;

    color: #aaa5b0;

    font-size: 4px;

    letter-spacing: 1px;
}


/* =========================================================
   MOBILE DEVICE
========================================================= */

.uv-wd-device {

    position: absolute;

    z-index: 8;

    right: 4%;

    bottom: 65px;

    width: 105px;

    height: 190px;

    padding: 6px;

    border:
        2px solid #29233b;

    border-radius: 17px;

    background: #29233b;

    box-shadow:
        0 20px 40px
        rgba(36,16,95,.22);

    transform: rotate(7deg);
}


.uv-wd-device-screen {

    position: relative;

    width: 100%;

    height: 100%;

    overflow: hidden;

    border-radius: 11px;

    background:
        linear-gradient(
            160deg,
            #fff,
            #f2edff
        );
}


.uv-wd-mobile-top {

    height: 25px;

    background:
        var(--uv-purple);
}


.uv-wd-mobile-line {

    width: 45px;

    height: 5px;

    margin: 16px auto 10px;

    border-radius: 10px;

    background: var(--uv-pink);
}


.uv-wd-mobile-block {

    width: 70px;

    height: 50px;

    margin: auto;

    border-radius: 9px;

    background:
        linear-gradient(
            135deg,
            #ded3ff,
            #ffdae4
        );
}


.uv-wd-mobile-block.small {

    width: 55px;

    height: 8px;

    margin-top: 10px;

    background: #d8d2e2;
}


.uv-wd-mobile-button {

    width: 30px;

    height: 30px;

    display: grid;

    place-items: center;

    margin: 15px auto;

    border-radius: 50%;

    background: var(--uv-pink);

    color: #fff;

    font-size: 9px;
}


/* =========================================================
   FLOATING TAGS
========================================================= */

.uv-wd-floating-tag {

    position: absolute;

    z-index: 15;

    display: flex;

    align-items: center;

    gap: 6px;

    padding: 9px 12px;

    border:
        1px solid #e3ddea;

    border-radius: 100px;

    background: rgba(255,255,255,.9);

    backdrop-filter: blur(10px);

    color: var(--uv-purple);

    font-size: 7px;

    font-weight: 900;

    letter-spacing: 1px;

    box-shadow:
        0 15px 30px
        rgba(36,16,95,.1);

    animation:
        uvWdFloat
        4s ease-in-out infinite;
}


.uv-wd-floating-tag span {

    color: var(--uv-pink);

    font-size: 11px;
}


.tag-ui {

    top: 12%;

    left: 2%;
}


.tag-responsive {

    top: 22%;

    right: 0;

    animation-delay: -1.5s;
}


.tag-convert {

    bottom: 12%;

    left: 12%;

    animation-delay: -3s;
}


.uv-wd-cursor {

    position: absolute;

    z-index: 20;

    right: 24%;

    top: 47%;

    width: 0;

    height: 0;

    border-left:
        14px solid #24105f;

    border-top:
        9px solid transparent;

    border-bottom:
        9px solid transparent;

    transform:
        rotate(-35deg);

    animation:
        uvWdCursor
        3s ease-in-out infinite;
}


/* =========================================================
   INTRO
========================================================= */

.uv-wd-intro {

    padding:
        125px 0;

    background:
        #f7f8fb;
}


.uv-wd-section-heading {

    max-width:
        700px;

    margin-bottom:
        60px;
}


.uv-wd-section-heading.center {

    margin-left:
        auto;

    margin-right:
        auto;

    text-align:
        center;
}


.uv-wd-section-heading.center
.uv-wd-eyebrow {

    justify-content:
        center;
}


.uv-wd-section-heading h2 {

    margin:
        18px 0;

    font-size:
        clamp(
            46px,
            5vw,
            68px
        );

    line-height:
        .95;

    letter-spacing:
        -3px;
}


.uv-wd-section-heading h2 span {

    display:
        block;

    color:
        var(--uv-purple-light);
}


.uv-wd-section-heading p {

    max-width:
        580px;

    color:
        #77727f;

    font-size:
        14px;

    line-height:
        1.8;
}


/* =========================================================
   SERVICE CARDS
========================================================= */

.uv-wd-services-grid {

    display:
        grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:
        14px;
}


.uv-wd-service-card {

    position:
        relative;

    min-height:
        370px;

    padding:
        27px;

    overflow:
        hidden;

    border:
        1px solid #e4e0e9;

    border-radius:
        24px;

    background:
        #fff;

    transition:
        .45s ease;
}


.uv-wd-service-card:hover {

    transform:
        translateY(-10px);

    border-color:
        #cfc3e2;

    box-shadow:
        0 25px 55px
        rgba(36,16,95,.1);
}


.uv-wd-service-card.featured {

    background:
        linear-gradient(
            145deg,
            #24105f,
            #5425b7
        );

    color:
        #fff;
}


.uv-wd-service-number {

    color:
        #aaa5b0;

    font-size:
        9px;

    font-weight:
        900;
}


.featured .uv-wd-service-number {

    color:
        rgba(255,255,255,.4);
}


.uv-wd-service-icon {

    height:
        105px;

    display:
        flex;

    align-items:
        center;

    margin-top:
        25px;
}


.uv-wd-service-card h3 {

    margin:
        10px 0;

    font-size:
        19px;
}


.uv-wd-service-card p {

    color:
        #898391;

    font-size:
        10px;

    line-height:
        1.75;
}


.featured p {

    color:
        rgba(255,255,255,.62);
}


.uv-wd-service-card a {

    position:
        absolute;

    left:
        27px;

    bottom:
        25px;

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    color:
        var(--uv-purple);

    text-decoration:
        none;

    font-size:
        9px;

    font-weight:
        900;
}


.featured a {

    color:
        #fff;
}


.uv-wd-service-card a span {

    color:
        var(--uv-pink);

    font-size:
        13px;
}


/* =========================================================
   SERVICE ICONS
========================================================= */

.uv-icon-browser {

    position:
        relative;

    width:
        75px;

    height:
        55px;

    border:
        2px solid #d8d0e5;

    border-radius:
        8px;
}


.uv-icon-browser span {

    display:
        inline-block;

    width:
        5px;

    height:
        5px;

    margin:
        6px 0 0 4px;

    border-radius:
        50%;

    background:
        var(--uv-pink);
}


.uv-icon-browser b {

    position:
        absolute;

    left:
        8px;

    top:
        23px;

    width:
        35px;

    height:
        5px;

    border-radius:
        5px;

    background:
        var(--uv-purple-light);
}


.uv-icon-browser i {

    position:
        absolute;

    right:
        8px;

    bottom:
        8px;

    width:
        18px;

    height:
        18px;

    border-radius:
        5px;

    background:
        #e9e2ff;
}


.uv-icon-cart {

    position:
        relative;

    font-size:
        43px;
}


.uv-icon-cart b,
.uv-icon-cart i {

    position:
        absolute;

    bottom:
        2px;

    width:
        6px;

    height:
        6px;

    border-radius:
        50%;

    background:
        var(--uv-purple);
}


.uv-icon-cart b {

    left:
        11px;
}


.uv-icon-cart i {

    left:
        42px;
}


.uv-icon-layout {

    display:
        grid;

    grid-template-columns:
        30px 30px;

    grid-template-rows:
        22px 22px;

    gap:
        6px;
}


.uv-icon-layout span {

    border-radius:
        6px;

    background:
        #e9e2ff;
}


.uv-icon-layout span:first-child {

    grid-column:
        span 2;

    background:
        var(--uv-purple);
}


.uv-icon-responsive {

    position:
        relative;

    width:
        75px;

    height:
        65px;
}


.uv-res-desktop {

    position:
        absolute;

    left:
        0;

    top:
        8px;

    width:
        65px;

    height:
        42px;

    border:
        2px solid var(--uv-purple);

    border-radius:
        6px;

    background:
        #f0ecff;
}


.uv-res-mobile {

    position:
        absolute;

    right:
        0;

    bottom:
        0;

    width:
        25px;

    height:
        45px;

    border:
        2px solid var(--uv-pink);

    border-radius:
        6px;

    background:
        #fff;
}


/* =========================================================
   PHILOSOPHY
========================================================= */

.uv-wd-philosophy {

    position:
        relative;

    overflow:
        hidden;

    padding:
        125px 0;

    background:
        linear-gradient(
            135deg,
            #24105f,
            #392080 55%,
            #1557a6
        );

    color:
        #fff;
}


.uv-wd-philosophy-bg {

    position:
        absolute;

    right:
        -50px;

    bottom:
        -40px;

    color:
        rgba(255,255,255,.025);

    font-size:
        190px;

    font-weight:
        900;

    letter-spacing:
        -12px;
}


.uv-wd-philosophy-grid {

    position:
        relative;

    z-index:
        2;

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        100px;

    align-items:
        center;
}


.uv-wd-philosophy h2 {

    margin:
        20px 0 0;

    font-size:
        clamp(
            48px,
            5vw,
            68px
        );

    line-height:
        .93;

    letter-spacing:
        -3px;
}


.uv-wd-philosophy h2 span {

    display:
        block;

    color:
        #a77bff;
}


.uv-wd-philosophy-text > p {

    color:
        rgba(255,255,255,.66);

    font-size:
        14px;

    line-height:
        1.8;
}


.uv-wd-principles {

    margin-top:
        35px;

    border-top:
        1px solid
        rgba(255,255,255,.12);
}


.uv-wd-principles div {

    display:
        flex;

    align-items:
        center;

    gap:
        18px;

    padding:
        16px 0;

    border-bottom:
        1px solid
        rgba(255,255,255,.12);
}


.uv-wd-principles strong {

    color:
        #ff4167;

    font-size:
        10px;
}


.uv-wd-principles span {

    color:
        rgba(255,255,255,.7);

    font-size:
        10px;

    font-weight:
        700;
}


/* =========================================================
   BENEFITS
========================================================= */

.uv-wd-benefits {

    padding:
        125px 0;

    background:
        #fff;
}


.uv-wd-benefits-grid {

    display:
        grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:
        14px;
}


.uv-wd-benefit {

    padding:
        30px;

    min-height:
        320px;

    border:
        1px solid #e4e0e9;

    border-radius:
        23px;

    background:
        #fff;

    transition:
        .4s ease;
}


.uv-wd-benefit:hover {

    transform:
        translateY(-8px);

    box-shadow:
        0 20px 45px
        rgba(36,16,95,.08);
}


.uv-wd-benefit > span {

    color:
        #aaa4b0;

    font-size:
        9px;

    font-weight:
        900;
}


.uv-wd-benefit-icon {

    width:
        58px;

    height:
        58px;

    display:
        grid;

    place-items:
        center;

    margin:
        50px 0 25px;

    border-radius:
        16px;

    background:
        linear-gradient(
            135deg,
            #eee7ff,
            #ffeaf0
        );

    color:
        var(--uv-purple);

    font-size:
        25px;
}


.uv-wd-benefit h3 {

    margin:
        0 0 10px;

    font-size:
        18px;
}


.uv-wd-benefit p {

    color:
        #898391;

    font-size:
        10px;

    line-height:
        1.8;
}


/* =========================================================
   CTA
========================================================= */

.uv-wd-cta {

    position:
        relative;

    overflow:
        hidden;

    padding:
        110px 0;

    background:
        #f7f8fb;
}


.uv-wd-cta-glow {

    position:
        absolute;

    width:
        450px;

    height:
        450px;

    right:
        -200px;

    top:
        -250px;

    border-radius:
        50%;

    background:
        #5425b7;

    filter:
        blur(110px);

    opacity:
        .14;
}


.uv-wd-cta-inner {

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        40px;

    padding:
        55px 60px;

    border-radius:
        28px;

    background:
        linear-gradient(
            135deg,
            #24105f,
            #5425b7
        );

    color:
        #fff;
}


.uv-wd-cta-inner > div > span {

    color:
        #ff6d89;

    font-size:
        8px;

    font-weight:
        900;

    letter-spacing:
        2px;
}


.uv-wd-cta-inner h2 {

    max-width:
        700px;

    margin:
        14px 0 0;

    font-size:
        clamp(
            34px,
            4vw,
            53px
        );

    line-height:
        1;

    letter-spacing:
        -2px;
}


.uv-wd-cta-inner h2 strong {

    color:
        #a879ff;
}


.uv-wd-cta-inner > a {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        9px 9px 9px 20px;

    border-radius:
        100px;

    background:
        #fff;

    color:
        var(--uv-purple);

    text-decoration:
        none;

    font-size:
        10px;

    font-weight:
        900;

    white-space:
        nowrap;
}


.uv-wd-cta-inner > a i {

    width:
        32px;

    height:
        32px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    background:
        var(--uv-pink);

    color:
        #fff;

    font-style:
        normal;
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes uvWdFloat {

    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-12px);
    }

}


@keyframes uvWdRotate {

    from {
        transform:
            rotate(0);
    }

    to {
        transform:
            rotate(360deg);
    }

}


@keyframes uvWdCursor {

    0%,
    100% {
        transform:
            translate(0,0)
            rotate(-35deg);
    }

    50% {
        transform:
            translate(10px,-10px)
            rotate(-35deg);
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .uv-webdesign-hero
    .uv-wd-container {

        grid-template-columns:
            1fr;

        gap:
            50px;
    }


    .uv-wd-hero-content {

        max-width:
            750px;
    }


    .uv-wd-hero-visual {

        min-height:
            500px;
    }


    .uv-wd-services-grid,
    .uv-wd-benefits-grid {

        grid-template-columns:
            repeat(2,1fr);
    }


    .uv-wd-philosophy-grid {

        gap:
            60px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .uv-wd-container {

        width:
            calc(100% - 30px);
    }


    .uv-webdesign-hero {

        padding:
            80px 0 90px;
    }


    .uv-wd-hero-content h2 {

        font-size:
            50px;

        letter-spacing:
            -3px;
    }


    .uv-wd-hero-content > p {

        font-size:
            13px;

        line-height:
            1.75;
    }


    .uv-wd-actions {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            15px;
    }


    .uv-wd-hero-points {

        gap:
            18px;
    }


    .uv-wd-hero-visual {

        min-height:
            380px;
    }


    .uv-wd-browser {

        width:
            330px;

        height:
            225px;

        border-radius:
            14px;
    }


    .uv-wd-browser-body {

        padding:
            11px 14px;
    }


    .uv-wd-browser-hero {

        height:
            135px;
    }


    .uv-wd-browser-hero strong {

        font-size:
            19px;
    }


    .uv-wd-browser-art {

        height:
            105px;
    }


    .uv-wd-art-circle {

        width:
            90px;

        height:
            90px;
    }


    .uv-wd-art-card {

        width:
            75px;

        height:
            60px;

        padding:
            8px;
    }


    .uv-wd-art-card strong {

        font-size:
            12px;
    }


    .uv-wd-device {

        width:
            75px;

        height:
            140px;

        right:
            3%;

        bottom:
            20px;
    }


    .uv-wd-floating-tag {

        font-size:
            6px;

        padding:
            7px 9px;
    }


    .tag-ui {

        left:
            0;

        top:
            12%;
    }


    .tag-responsive {

        right:
            0;

        top:
            25%;
    }


    .tag-convert {

        left:
            8%;

        bottom:
            8%;
    }


    .uv-wd-intro,
    .uv-wd-benefits {

        padding:
            80px 0;
    }


    .uv-wd-section-heading h2 {

        font-size:
            45px;
    }


    .uv-wd-section-heading p {

        font-size:
            13px;
    }


    .uv-wd-services-grid,
    .uv-wd-benefits-grid {

        grid-template-columns:
            1fr;
    }


    .uv-wd-service-card {

        min-height:
            330px;
    }


    .uv-wd-philosophy {

        padding:
            80px 0;
    }


    .uv-wd-philosophy-grid {

        grid-template-columns:
            1fr;

        gap:
            45px;
    }


    .uv-wd-philosophy h2 {

        font-size:
            46px;
    }


    .uv-wd-philosophy-text > p {

        font-size:
            13px;
    }


    .uv-wd-benefit {

        min-height:
            270px;
    }


    .uv-wd-benefit-icon {

        margin-top:
            35px;
    }


    .uv-wd-cta {

        padding:
            70px 0;
    }


    .uv-wd-cta-inner {

        display:
            block;

        padding:
            35px 25px;
    }


    .uv-wd-cta-inner h2 {

        font-size:
            34px;
    }


    .uv-wd-cta-inner > a {

        margin-top:
            25px;
    }

}
/* =========================================================
   UNIVERSE VYPAAR — PACKAGES PAGE
========================================================= */

.uv-packages-page {

    --pkg-purple: #24105f;
    --pkg-purple-light: #5425b7;
    --pkg-pink: #ff174f;
    --pkg-pink-light: #ff4167;
    --pkg-blue: #1557a6;
    --pkg-dark: #171329;
    --pkg-muted: #777381;

    overflow: hidden;

    background: #f7f8fb;

    color: var(--pkg-dark);
}


.uv-pkg-container {

    width:
        min(1200px, calc(100% - 60px));

    margin: auto;
}


/* =========================================================
   COMMON
========================================================= */

.uv-pkg-eyebrow {

    display: flex;

    align-items: center;

    gap: 9px;

    color: var(--pkg-pink);

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 2px;
}


.uv-pkg-eyebrow span {

    width: 25px;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            var(--pkg-purple),
            var(--pkg-pink)
        );
}


/* =========================================================
   HERO
========================================================= */

.uv-pkg-hero {

    position: relative;

    overflow: hidden;

    min-height: 500px;

    display: flex;

    align-items: center;

    background:
        linear-gradient(
            135deg,
            #24105f 0%,
            #39209a 48%,
            #1557a6 100%
        );

    color: #fff;
}


.uv-pkg-hero::before {

    content: "";

    position: absolute;

    inset: 0;

    background-image:
        linear-gradient(
            rgba(255,255,255,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.035) 1px,
            transparent 1px
        );

    background-size: 55px 55px;

    opacity: .5;
}


.uv-pkg-hero-glow {

    position: absolute;

    border-radius: 50%;

    filter: blur(90px);

    pointer-events: none;
}


.uv-pkg-glow-one {

    width: 400px;

    height: 400px;

    left: -150px;

    top: -200px;

    background: #ff174f;

    opacity: .16;
}


.uv-pkg-glow-two {

    width: 450px;

    height: 450px;

    right: -180px;

    bottom: -250px;

    background: #55a5ff;

    opacity: .18;
}


.uv-pkg-hero .uv-pkg-container {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns: 1fr .75fr;

    gap: 70px;

    align-items: center;

    padding: 90px 0;
}


.uv-pkg-hero-content h1 {

    max-width: 680px;

    margin: 20px 0;

    font-size:
        clamp(58px, 6vw, 82px);

    line-height: .9;

    letter-spacing: -5px;
}


.uv-pkg-hero-content h1 span {

    display: block;

    background:
        linear-gradient(
            90deg,
            #fff,
            #c6a9ff,
            #ff6a86
        );

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;
}


.uv-pkg-hero-content > p {

    max-width: 590px;

    color:
        rgba(255,255,255,.68);

    font-size: 15px;

    line-height: 1.8;
}


/* =========================================================
   HERO ORBIT
========================================================= */

.uv-pkg-hero-orbit {

    position: relative;

    width: 400px;

    height: 400px;

    margin: auto;
}


.uv-pkg-orbit {

    position: absolute;

    left: 50%;

    top: 50%;

    border:
        1px solid rgba(255,255,255,.18);

    border-radius: 50%;

    transform:
        translate(-50%,-50%);
}


.orbit-a {

    width: 390px;

    height: 390px;

    animation:
        pkgOrbit 25s linear infinite;
}


.orbit-b {

    width: 285px;

    height: 285px;

    border-style: dashed;

    animation:
        pkgOrbitReverse 18s linear infinite;
}


.orbit-c {

    width: 180px;

    height: 180px;

    border-color:
        rgba(255,23,79,.45);
}


.uv-pkg-orbit-core {

    position: absolute;

    left: 50%;

    top: 50%;

    width: 145px;

    height: 145px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    transform:
        translate(-50%,-50%);

    border:
        1px solid rgba(255,255,255,.3);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.16),
            rgba(255,255,255,.03)
        );

    backdrop-filter: blur(10px);

    box-shadow:
        0 25px 60px rgba(0,0,0,.2);
}


.uv-pkg-orbit-core small {

    color:
        rgba(255,255,255,.45);

    font-size: 6px;

    letter-spacing: 2px;
}


.uv-pkg-orbit-core strong {

    font-size: 30px;

    line-height: 1;

    letter-spacing: -1px;
}


.uv-pkg-orbit-core span {

    margin-top: 4px;

    color: #ff6d89;

    font-size: 7px;

    font-weight: 900;

    letter-spacing: 2px;
}


.uv-pkg-orbit-node {

    position: absolute;

    display: grid;

    place-items: center;

    width: 50px;

    height: 50px;

    border:
        1px solid rgba(255,255,255,.2);

    border-radius: 50%;

    background:
        rgba(255,255,255,.08);

    backdrop-filter: blur(8px);

    color: #fff;

    font-size: 7px;

    font-weight: 900;

    letter-spacing: 1px;

    animation:
        pkgNodeFloat 4s ease-in-out infinite;
}


.node-one {

    top: 15px;

    right: 45px;
}


.node-two {

    bottom: 35px;

    left: 10px;

    animation-delay: -1.5s;
}


.node-three {

    right: 5px;

    bottom: 90px;

    animation-delay: -3s;
}


/* =========================================================
   PLANS
========================================================= */

.uv-pkg-plans {

    padding: 125px 0;

    background: #f7f8fb;
}


.uv-pkg-section-heading {

    max-width: 700px;

    margin-bottom: 65px;
}


.uv-pkg-section-heading.center {

    margin-left: auto;

    margin-right: auto;

    text-align: center;
}


.uv-pkg-section-heading.center
.uv-pkg-eyebrow {

    justify-content: center;
}


.uv-pkg-section-heading h2 {

    margin: 18px 0;

    font-size:
        clamp(48px, 5vw, 68px);

    line-height: .95;

    letter-spacing: -3px;
}


.uv-pkg-section-heading h2 span {

    display: block;

    color: var(--pkg-purple-light);
}


.uv-pkg-section-heading > p {

    max-width: 600px;

    color: var(--pkg-muted);

    font-size: 14px;

    line-height: 1.8;
}


/* =========================================================
   PACKAGE CARDS
========================================================= */

.uv-pkg-cards {

    display:
        grid;

    grid-template-columns:
        repeat(4,1fr);

    gap: 14px;

    align-items: stretch;
}


.uv-pkg-card {

    position: relative;

    display: flex;

    flex-direction: column;

    min-height: 580px;

    padding: 28px;

    overflow: hidden;

    border:
        1px solid #e2dee8;

    border-radius: 27px;

    background: #fff;

    transition:
        .45s cubic-bezier(.2,.8,.2,1);
}


.uv-pkg-card::before {

    content: "";

    position: absolute;

    width: 170px;

    height: 170px;

    right: -90px;

    top: -90px;

    border-radius: 50%;

    background:
        #eee8ff;

    transition: .45s ease;
}


.uv-pkg-card:hover {

    transform:
        translateY(-12px);

    border-color:
        #d2c4e5;

    box-shadow:
        0 30px 70px
        rgba(36,16,95,.12);
}


.uv-pkg-card:hover::before {

    transform:
        scale(1.5);

    opacity: .8;
}


.uv-pkg-card.featured {

    border:
        2px solid var(--pkg-purple-light);

    background:
        linear-gradient(
            150deg,
            #24105f,
            #4c20a3
        );

    color: #fff;

    box-shadow:
        0 30px 70px
        rgba(36,16,95,.2);

    transform:
        translateY(-10px);
}


.uv-pkg-card.featured:hover {

    transform:
        translateY(-20px);
}


.uv-pkg-popular {

    position: absolute;

    right: 20px;

    top: 20px;

    padding:
        7px 10px;

    border-radius: 100px;

    background:
        var(--pkg-pink);

    color: #fff;

    font-size: 6px;

    font-weight: 900;

    letter-spacing: 1px;
}


.uv-pkg-card-top {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;
}


.uv-pkg-number {

    color:
        #aaa4b0;

    font-size: 9px;

    font-weight: 900;
}


.featured .uv-pkg-number {

    color:
        rgba(255,255,255,.45);
}


.uv-pkg-icon {

    width: 45px;

    height: 45px;

    display: grid;

    place-items: center;

    border-radius: 14px;

    background:
        #f0eaff;

    color:
        var(--pkg-purple);

    font-size: 20px;

    transition: .4s ease;
}


.uv-pkg-card:hover
.uv-pkg-icon {

    transform:
        rotate(-8deg)
        scale(1.08);
}


.featured .uv-pkg-icon {

    background:
        rgba(255,255,255,.13);

    color: #fff;
}


.uv-pkg-card-heading {

    position:
        relative;

    z-index:
        2;

    margin-top:
        32px;
}


.uv-pkg-card-heading small {

    color:
        var(--pkg-pink);

    font-size:
        7px;

    font-weight:
        900;

    letter-spacing:
        1.5px;
}


.featured .uv-pkg-card-heading small {

    color:
        #ff718b;
}


.uv-pkg-card-heading h3 {

    margin:
        8px 0;

    font-size:
        29px;

    letter-spacing:
        -1px;
}


.uv-pkg-card-heading h3 b {

    color:
        var(--pkg-purple-light);
}


.featured .uv-pkg-card-heading h3 b {

    color:
        #b68cff;
}


.uv-pkg-card-heading p {

    min-height:
        45px;

    color:
        #8a8492;

    font-size:
        9px;

    line-height:
        1.65;
}


.featured .uv-pkg-card-heading p {

    color:
        rgba(255,255,255,.62);
}


.uv-pkg-card-heading p strong {

    color:
        var(--pkg-dark);
}


.featured .uv-pkg-card-heading p strong {

    color:
        #fff;
}


/* PRICE */

.uv-pkg-price {

    position:
        relative;

    z-index:
        2;

    margin:
        25px 0;

    padding:
        18px 0;

    border-top:
        1px solid #ebe7ef;

    border-bottom:
        1px solid #ebe7ef;
}


.featured .uv-pkg-price {

    border-color:
        rgba(255,255,255,.13);
}


.uv-pkg-price small {

    display:
        block;

    margin-bottom:
        6px;

    color:
        #aaa4b0;

    font-size:
        6px;

    font-weight:
        900;

    letter-spacing:
        1px;
}


.uv-pkg-price strong {

    font-size:
        28px;

    letter-spacing:
        -1px;

    color:
        var(--pkg-purple);
}


.featured .uv-pkg-price strong {

    color:
        #fff;
}


.uv-pkg-price span {

    margin-left:
        4px;

    color:
        #aaa4b0;

    font-size:
        7px;
}


/* HIGHLIGHTS */

.uv-pkg-highlights {

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    flex-direction:
        column;

    gap:
        12px;

    margin:
        0;

    padding:
        0;

    list-style:
        none;
}


.uv-pkg-highlights li {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    color:
        #74707c;

    font-size:
        9px;
}


.uv-pkg-highlights li span {

    width:
        17px;

    height:
        17px;

    display:
        grid;

    place-items:
        center;

    flex-shrink:
        0;

    border-radius:
        50%;

    background:
        #eee9fa;

    color:
        var(--pkg-purple-light);

    font-size:
        8px;

    font-weight:
        900;
}


.featured .uv-pkg-highlights li {

    color:
        rgba(255,255,255,.7);
}


.featured .uv-pkg-highlights li span {

    background:
        rgba(255,255,255,.13);

    color:
        #fff;
}


/* BUTTON */

.uv-pkg-button {

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    margin-top:
        auto;

    padding:
        7px 8px 7px 17px;

    border-radius:
        100px;

    background:
        linear-gradient(
            100deg,
            var(--pkg-purple),
            var(--pkg-pink)
        );

    color:
        #fff;

    text-decoration:
        none;

    font-size:
        9px;

    font-weight:
        900;

    box-shadow:
        0 12px 25px
        rgba(36,16,95,.16);

    transition:
        .3s ease;
}


.uv-pkg-button i {

    width:
        28px;

    height:
        28px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    background:
        rgba(255,255,255,.18);

    font-style:
        normal;
}


.uv-pkg-button:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 16px 30px
        rgba(36,16,95,.22);
}


/* =========================================================
   INCLUDED FEATURES
========================================================= */

.uv-pkg-features {

    position:
        relative;

    overflow:
        hidden;

    padding:
        125px 0;

    background:
        linear-gradient(
            135deg,
            #24105f,
            #392080 52%,
            #1557a6
        );

    color:
        #fff;
}


.uv-pkg-feature-bg {

    position:
        absolute;

    right:
        -80px;

    bottom:
        -60px;

    color:
        rgba(255,255,255,.025);

    font-size:
        180px;

    font-weight:
        900;

    letter-spacing:
        -10px;
}


.uv-pkg-feature-heading {

    position:
        relative;

    z-index:
        2;

    display:
        grid;

    grid-template-columns:
        1fr .65fr;

    gap:
        100px;

    align-items:
        end;

    margin-bottom:
        65px;
}


.uv-pkg-feature-heading h2 {

    margin:
        18px 0 0;

    font-size:
        clamp(
            46px,
            5vw,
            68px
        );

    line-height:
        .94;

    letter-spacing:
        -3px;
}


.uv-pkg-feature-heading h2 span {

    display:
        block;

    color:
        #a77cff;
}


.uv-pkg-feature-heading p {

    margin:
        0;

    color:
        rgba(255,255,255,.6);

    font-size:
        13px;

    line-height:
        1.8;
}


/* FEATURE GRID */

.uv-pkg-feature-grid {

    position:
        relative;

    z-index:
        2;

    display:
        grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:
        12px;
}


.uv-pkg-feature-item {

    position:
        relative;

    min-height:
        175px;

    padding:
        23px;

    border:
        1px solid
        rgba(255,255,255,.12);

    border-radius:
        19px;

    background:
        rgba(255,255,255,.055);

    backdrop-filter:
        blur(10px);

    transition:
        .4s ease;
}


.uv-pkg-feature-item:hover {

    transform:
        translateY(-7px);

    border-color:
        rgba(255,255,255,.3);

    background:
        rgba(255,255,255,.1);
}


.uv-pkg-feature-icon {

    width:
        42px;

    height:
        42px;

    display:
        grid;

    place-items:
        center;

    margin-bottom:
        28px;

    border-radius:
        12px;

    background:
        rgba(255,255,255,.1);

    color:
        #ff6380;

    font-size:
        17px;
}


.uv-pkg-feature-item > span {

    position:
        absolute;

    top:
        24px;

    right:
        23px;

    color:
        rgba(255,255,255,.3);

    font-size:
        7px;

    font-weight:
        900;
}


.uv-pkg-feature-item h3 {

    max-width:
        180px;

    margin:
        0;

    font-size:
        13px;

    line-height:
        1.4;
}


/* =========================================================
   COMPARISON
========================================================= */

.uv-pkg-comparison {

    padding:
        125px 0;

    background:
        #f7f8fb;
}


.uv-pkg-table-wrap {

    overflow-x:
        auto;

    border:
        1px solid #e1dce8;

    border-radius:
        22px;

    background:
        #fff;

    box-shadow:
        0 25px 60px
        rgba(36,16,95,.06);
}


.uv-pkg-table {

    width:
        100%;

    min-width:
        850px;

    border-collapse:
        collapse;
}


.uv-pkg-table th,
.uv-pkg-table td {

    padding:
        18px 20px;

    border-bottom:
        1px solid #eeeaf1;

    text-align:
        center;

    font-size:
        10px;
}


.uv-pkg-table th:first-child,
.uv-pkg-table td:first-child {

    text-align:
        left;

    font-weight:
        800;
}


.uv-pkg-table thead th {

    padding:
        25px 15px;

    background:
        #faf9fc;
}


.uv-pkg-table thead th:first-child {

    color:
        #77727f;

    font-size:
        8px;

    letter-spacing:
        1px;
}


.uv-pkg-table thead th span {

    display:
        block;

    margin-bottom:
        7px;

    color:
        var(--pkg-purple);

    font-size:
        8px;

    font-weight:
        900;
}


.uv-pkg-table thead th strong {

    display:
        block;

    color:
        var(--pkg-pink);

    font-size:
        17px;
}


.uv-pkg-table th.active {

    background:
        #f2edff;

    box-shadow:
        inset 0 3px 0
        var(--pkg-purple-light);
}


.uv-pkg-table tbody td {

    color:
        #77727f;
}


.uv-pkg-table tbody td:first-child {

    color:
        var(--pkg-dark);
}


.uv-pkg-table tbody td b {

    display:
        inline-grid;

    place-items:
        center;

    width:
        23px;

    height:
        23px;

    border-radius:
        50%;

    background:
        #eee8ff;

    color:
        var(--pkg-purple-light);
}


/* =========================================================
   CTA
========================================================= */

.uv-pkg-cta {

    padding:
        105px 0;

    background:
        #fff;
}


.uv-pkg-cta-inner {

    position:
        relative;

    overflow:
        hidden;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        50px;

    padding:
        60px;

    border-radius:
        30px;

    background:
        linear-gradient(
            135deg,
            #24105f,
            #5425b7
        );

    color:
        #fff;
}


.uv-pkg-cta-inner::after {

    content:
        "";

    position:
        absolute;

    width:
        300px;

    height:
        300px;

    right:
        -120px;

    top:
        -150px;

    border-radius:
        50%;

    background:
        #ff174f;

    filter:
        blur(80px);

    opacity:
        .2;
}


.uv-pkg-cta-inner > div {

    position:
        relative;

    z-index:
        2;
}


.uv-pkg-cta-inner > div > span {

    color:
        #ff708b;

    font-size:
        8px;

    font-weight:
        900;

    letter-spacing:
        2px;
}


.uv-pkg-cta-inner h2 {

    max-width:
        650px;

    margin:
        15px 0;

    font-size:
        clamp(
            38px,
            4.5vw,
            58px
        );

    line-height:
        .95;

    letter-spacing:
        -3px;
}


.uv-pkg-cta-inner h2 strong {

    color:
        #a97cff;
}


.uv-pkg-cta-inner p {

    max-width:
        560px;

    margin:
        0;

    color:
        rgba(255,255,255,.62);

    font-size:
        12px;

    line-height:
        1.8;
}


.uv-pkg-cta-inner > a {

    position:
        relative;

    z-index:
        2;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        8px 8px 8px 20px;

    border-radius:
        100px;

    background:
        #fff;

    color:
        var(--pkg-purple);

    text-decoration:
        none;

    font-size:
        10px;

    font-weight:
        900;

    white-space:
        nowrap;
}


.uv-pkg-cta-inner > a i {

    width:
        34px;

    height:
        34px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    background:
        var(--pkg-pink);

    color:
        #fff;

    font-style:
        normal;
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes pkgOrbit {

    from {
        transform:
            translate(-50%,-50%)
            rotate(0);
    }

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

}


@keyframes pkgOrbitReverse {

    from {
        transform:
            translate(-50%,-50%)
            rotate(360deg);
    }

    to {
        transform:
            translate(-50%,-50%)
            rotate(0);
    }

}


@keyframes pkgNodeFloat {

    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-10px);
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

    .uv-pkg-cards {

        grid-template-columns:
            repeat(2,1fr);
    }


    .uv-pkg-feature-grid {

        grid-template-columns:
            repeat(3,1fr);
    }


    .uv-pkg-hero .uv-pkg-container {

        grid-template-columns:
            1fr .7fr;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .uv-pkg-container {

        width:
            calc(100% - 30px);
    }


    .uv-pkg-hero {

        min-height:
            auto;
    }


    .uv-pkg-hero .uv-pkg-container {

        grid-template-columns:
            1fr;

        gap:
            35px;

        padding:
            75px 0 80px;
    }


    .uv-pkg-hero-content h1 {

        font-size:
            51px;

        letter-spacing:
            -3px;
    }


    .uv-pkg-hero-content > p {

        font-size:
            13px;
    }


    .uv-pkg-hero-orbit {

        width:
            300px;

        height:
            300px;
    }


    .orbit-a {

        width:
            290px;

        height:
            290px;
    }


    .orbit-b {

        width:
            215px;

        height:
            215px;
    }


    .orbit-c {

        width:
            140px;

        height:
            140px;
    }


    .uv-pkg-orbit-core {

        width:
            110px;

        height:
            110px;
    }


    .uv-pkg-orbit-core strong {

        font-size:
            23px;
    }


    .node-one {

        top:
            5px;

        right:
            20px;
    }


    .node-two {

        left:
            0;

        bottom:
            25px;
    }


    .node-three {

        right:
            0;

        bottom:
            65px;
    }


    .uv-pkg-plans,
    .uv-pkg-comparison {

        padding:
            80px 0;
    }


    .uv-pkg-section-heading {

        margin-bottom:
            45px;
    }


    .uv-pkg-section-heading h2 {

        font-size:
            44px;
    }


    .uv-pkg-cards {

        grid-template-columns:
            1fr;

        gap:
            18px;
    }


    .uv-pkg-card {

        min-height:
            550px;
    }


    .uv-pkg-card.featured {

        transform:
            none;
    }


    .uv-pkg-feature-heading {

        grid-template-columns:
            1fr;

        gap:
            25px;

        margin-bottom:
            45px;
    }


    .uv-pkg-feature-heading h2 {

        font-size:
            45px;
    }


    .uv-pkg-feature-heading p {

        font-size:
            12px;
    }


    .uv-pkg-features {

        padding:
            80px 0;
    }


    .uv-pkg-feature-grid {

        grid-template-columns:
            repeat(2,1fr);

        gap:
            10px;
    }


    .uv-pkg-feature-item {

        min-height:
            155px;

        padding:
            18px;
    }


    .uv-pkg-feature-item h3 {

        font-size:
            11px;
    }


    .uv-pkg-feature-icon {

        width:
            38px;

        height:
            38px;

        margin-bottom:
            24px;
    }


    .uv-pkg-cta {

        padding:
            70px 0;
    }


    .uv-pkg-cta-inner {

        display:
            block;

        padding:
            35px 25px;
    }


    .uv-pkg-cta-inner h2 {

        font-size:
            34px;

        letter-spacing:
            -2px;
    }


    .uv-pkg-cta-inner p {

        font-size:
            11px;
    }


    .uv-pkg-cta-inner > a {

        margin-top:
            25px;
    }

}