/* =========================================================
   ABOUT PAGE — PREMIUM JKDIGI THEME
========================================================= */

#about-page-wrapper {

    --about-gold: #FF6400;
    --about-gold-light: #FF9A5C;

    --about-dark: #28214C;
    --about-black: #000000;

    --about-white: #ffffff;
    --about-light: #f7f7f5;

    --about-gray: #666;
    --about-border: rgba(0, 0, 0, .07);

    --about-pink: #e9a5bd;
    --about-pink-light: #fff1f6;

    overflow: hidden;
    background: #fafafa;
}



/* =========================================================
   GLOBAL
========================================================= */

#about-page-wrapper * {
    box-sizing: border-box;
}

.about-section {
    position: relative;
    overflow: hidden;
}

.about-container {
    position: relative;
    z-index: 3;
}

.about-section-label {

    display: inline-flex;
    align-items: center;
    gap: 10px;

    color: var(--about-gold);

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

    letter-spacing: 2px;
    text-transform: uppercase;
}

.about-section-label::before {

    content: "";

    width: 32px;
    height: 2px;

    background: var(--about-gold);
}




/* =========================================================
   ABOUT INTRO
========================================================= */

.about-intro {

    padding: 65px 0;

    background: #fff;
}


/* =========================================================
   VISUAL COMPOSITION
========================================================= */

.about-visual {

    position: relative;

    min-height: 570px;

    display: flex;

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

.about-visual-circle {

    width: 390px;
    height: 390px;

    border-radius: 50%;

    position: absolute;

    background:
        radial-gradient(circle at 40% 30%,
            #f9d25b,
            var(--about-gold) 60%,
            #d39f00);

    box-shadow:
        0 40px 90px rgba(233, 179, 0, .18);

    animation:
        aboutCircleFloat 7s ease-in-out infinite;
}

.about-visual-circle::before {

    content: "";

    position: absolute;

    inset: -25px;

    border-radius: 50%;

    border: 1px dashed rgba(233, 179, 0, .35);

    animation:
        aboutRotate 20s linear infinite;
}

.about-person {

    position: relative;

    z-index: 3;

    width: 370px;

    height: 520px;

    object-fit: contain;

    object-position: bottom;

    filter:
        drop-shadow(0 25px 30px rgba(0, 0, 0, .15));

    transition:
        transform .8s cubic-bezier(.2, .8, .2, 1);
}

.about-visual:hover .about-person {

    transform:
        translateY(-12px) scale(1.035);
}


/* =========================================================
   FLOATING ENGAGEMENT CARD
========================================================= */

.about-float-card {

    position: absolute;

    z-index: 5;

    padding: 16px 20px;

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

    backdrop-filter: blur(15px);

    border: 1px solid rgba(0, 0, 0, .06);

    border-radius: 18px;

    box-shadow:
        0 25px 55px rgba(0, 0, 0, .12);

    transition:
        transform .5s cubic-bezier(.34, 1.56, .64, 1),
        box-shadow .4s ease;
}

.about-float-card:hover {

    transform:
        translateY(-10px) scale(1.04);

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

.about-engagement {
    left: 0;
    top: 70px;
    min-width: 190px;
    display: flex;
    gap: 15px;
    border-radius: 45px;
}
.about-engagement2{
    right: 10px;
    bottom: 0px;
    min-width: 190px;
    display: flex;
    gap: 15px;
    border-radius: 45px;
}

.about-engagement-icon {
    width: 42px;
    height: 42px;
    border-radius: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(233, 179, 0, .12);
    color: var(--about-gold);
    font-size: 17px;
    /* margin-bottom: 10px; */
}

.about-float-title {

    font-size: 17px;

    font-weight: 800;

    color: #111;

    line-height: 1;

    margin-bottom: 5px;
}

.about-float-text {

    color: #777;

    font-size: 14px;

    margin: 0;
}


/* =========================================================
   SALES CARD
========================================================= */

.about-sales {
    right: 0;
    /* bottom: 85px; */
    top: 95px;
    width: 140px;
    padding: 6px;
}

.about-sales-top {

    display: flex;

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

    margin-bottom: 15px;
}

.about-sales-title {

    font-size: 13px;

    font-weight: 700;

    color: #222;
}

.about-sales-percent {

    color: #25a567;

    font-size: 13px;

    font-weight: 800;
}

.about-sales-chart {

    height: 70px;

    display: flex;

    align-items: flex-end;

    gap: 6px;
}

.about-sales-bar {

    flex: 1;

    border-radius: 5px 5px 0 0;

    background:
        linear-gradient(to top,
            #FF6400,
            #f7d667);

    transition:
        height .6s ease,
        transform .3s ease;
}

.about-sales-bar:hover {

    transform:
        scaleY(1.08);
}

.about-sales-bar:nth-child(1) {
    height: 25%;
}

.about-sales-bar:nth-child(2) {
    height: 38%;
}

.about-sales-bar:nth-child(3) {
    height: 32%;
}

.about-sales-bar:nth-child(4) {
    height: 55%;
}

.about-sales-bar:nth-child(5) {
    height: 68%;
}

.about-sales-bar:nth-child(6) {
    height: 82%;
}

.about-sales-bar:nth-child(7) {
    height: 100%;
}


/* =========================================================
   ABOUT CONTENT
========================================================= */

.about-content {

    padding-left: 25px;
}

.about-content h2 {

    max-width: 600px;

    font-size: clamp(34px,
            3.5vw,
            45px);

    line-height: 1.12;

    letter-spacing: -2px;

    font-weight: 600;

    color: #000;

    margin: 13px 0 22px;
}

.about-content h2 span {

    color: var(--about-gold);
}

.about-content>p {

    max-width: 600px;

    color: #666;

    font-size: 15px;

    line-height: 1.9;
}


/* =========================================================
   ABOUT FEATURE CARDS
========================================================= */

.about-feature-grid {

    margin-top: 32px;

    display: flex;

    flex-direction: column;

    gap: 12px;
}

.about-feature-card {

    display: flex;

    align-items: center;

    gap: 17px;

    padding: 17px;

    border-radius: 30px;min-height: 100px;

    /* border: 1px solid rgba(0,0,0,.06); */

    background: #fff;

    position: relative;

    overflow: hidden;

    transition:
        transform .45s cubic-bezier(.34, 1.56, .64, 1),
        box-shadow .4s ease,
        background .4s ease;
}

.about-feature-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 3px;
    height: 0;
    background: var(--about-gold);
    transition: height .35s ease;
}
.about-feature-card.active::before {
    height: 100%;
    background: var(--about-gold);
}

.about-feature-card:hover {

    transform:
        translateX(8px) translateY(-4px);

    box-shadow:
        0 20px 45px rgba(0, 0, 0, .09);
}

.about-feature-card:hover::before {

    transform:
        scale(2);
}

.about-feature-card.active {

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

    border-color:
        rgba(233, 165, 189, .45);

    box-shadow:
        0 18px 40px rgba(233, 165, 189, .16);
}

.about-feature-icon {

    width: 45px;
    height: 45px;

    flex-shrink: 0;

    border-radius: 50%;

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

    color: #000;

    background: #FFE9BC;

    font-size: 18px;

    transition:
        transform .5s cubic-bezier(.34, 1.56, .64, 1);
}

.about-feature-icon i {
    /* border: 2px solid #000; */
    padding: 1px;
    border-radius: 50%;
    background-color: #fff;
    color: #d39f00;
}

.about-feature-card.active .about-feature-icon {

    background:
        #fff;

    color: #d39f00;
}

.about-feature-card:hover .about-feature-icon {

    transform:
        rotate(-8deg) scale(1.1);
}

.about-feature-content {

    position: relative;
    z-index: 2;
}

.about-feature-content h5 {

    margin: 0 0 4px;

    font-size: 18px;

    font-weight: 600;

    color: #111;
}

.about-feature-content p {

    margin: 0;

    color: #777;

    font-size: 13px;

    line-height: 1.6;
}


/* =========================================================
   VALUES
========================================================= */

.about-values {

    padding: 85px 0;

    background:
        #f7f7f5;

    position: relative;
}

.about-values::before {

    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    border-radius: 50%;

    right: -180px;
    top: -170px;

    background:
        rgba(233, 179, 0, .07);

    filter: blur(70px);
}

.about-values-header {

    text-align: center;

    margin-bottom: 60px;
}

.about-values-header h2 {

    margin: 12px 0;

    font-size: clamp(32px,
            3.5vw,
            45px);

    font-weight: 600;

    letter-spacing: -1.5px;
}

.about-values-header p {

    max-width: 650px;

    margin: auto;

    color: #707070;

    font-size: 15px;

    line-height: 1.8;
}


/* =========================================================
   VALUE CARDS
========================================================= */

.about-value-card {

    height: 100%;

    position: relative;

    padding: 35px 28px;

    border-radius: 25px;

    background: #fff;

    border:
        1px solid rgba(0, 0, 0, .06);

    overflow: hidden;

    transition:
        transform .6s cubic-bezier(.34, 1.56, .64, 1),
        box-shadow .5s ease,
        border-color .4s ease;
}

.about-value-card::before {

    content: "";

    position: absolute;

    width: 150px;
    height: 150px;

    border-radius: 50%;

    right: -80px;
    top: -80px;

    background:
        rgba(233, 179, 0, .08);

    transition:
        transform .6s ease;
}

.about-value-card::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 3px;

    background:
        linear-gradient(90deg,
            transparent,
            var(--about-gold),
            transparent);

    transform:
        scaleX(0);

    transition:
        transform .5s ease;
}

.about-value-card:hover {

    transform:
        translateY(-14px) rotateX(3deg);

    box-shadow:
        0 30px 65px rgba(0, 0, 0, .11);

    border-color:
        rgba(233, 179, 0, .2);
}

.about-value-card:hover::before {

    transform:
        scale(2);
}

.about-value-card:hover::after {

    transform:
        scaleX(1);
}

.about-value-icon {

    width: 65px;
    height: 65px;

    border-radius: 20px;

    background:
        rgba(233, 179, 0, .11);

    color: var(--about-gold);

    display: flex;

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

    font-size: 22px;

    margin-bottom: 25px;

    transition:
        transform .6s cubic-bezier(.34, 1.56, .64, 1),
        background .4s ease;
}

.about-value-card:hover .about-value-icon {

    transform:
        rotate(360deg) scale(1.12);

    background:
        var(--about-gold);

    color: #000;
}

.about-value-card h4 {

    font-size: 21px;

    font-weight: 800;

    margin-bottom: 12px;

    color: #111;
}

.about-value-card p {

    margin: 0;

    color: #6c6c6c;

    font-size: 14px;

    line-height: 1.8;
}


/* =========================================================
   WHY CHOOSE US
========================================================= */

.about-why {

    padding: 65px 0 85px;

    background: #fff;
}

.about-why-content h2 {

    max-width: 600px;

    margin:
        12px 0 20px;

    font-size: clamp(34px,
            3.5vw,
            45px);

    line-height: 1.1;

    letter-spacing: -2px;

    font-weight: 600;
}

.about-why-content>p {

    max-width: 570px;

    color: #666;

    font-size: 15px;

    line-height: 1.9;

    margin-bottom: 30px;
}


/* =========================================================
   WHY GRID
========================================================= */

.about-why-grid {

    display: grid;

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

    gap: 14px;
}

.about-why-card {

    position: relative;

    min-height: 185px;

    padding: 25px;

    border-radius: 22px;

    background:
        linear-gradient(145deg,
            #fff,
            #fafafa);

    border:
        1px solid rgba(0, 0, 0, .06);

    overflow: hidden;

    transform-style: preserve-3d;

    transition:
        transform .55s cubic-bezier(.34, 1.56, .64, 1),
        box-shadow .5s ease,
        border-color .4s ease;
}

.about-why-card::before {

    content: "";

    position: absolute;

    width: 110px;
    height: 110px;

    border-radius: 50%;

    right: -55px;
    bottom: -55px;

    background:
        rgba(233, 179, 0, .07);

    transition:
        transform .6s ease;
}

.about-why-card:hover {

    transform:
        perspective(1000px) rotateX(4deg) rotateY(-4deg) translateY(-10px);

    box-shadow:
        0 30px 60px rgba(0, 0, 0, .10);

    border-color:
        rgba(233, 179, 0, .22);
}

.about-why-card:hover::before {

    transform:
        scale(2);
}

.about-why-icon {

    width: 48px;
    height: 48px;

    border-radius: 14px;

    display: flex;

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

    background: var(--about-dark);

    color: var(--about-gold);

    font-size: 16px;

    margin-bottom: 18px;

    transition:
        transform .5s cubic-bezier(.34, 1.56, .64, 1);
}

.about-why-card:hover .about-why-icon {

    transform:
        translateZ(25px) scale(1.15) rotate(8deg);
}

.about-why-card h5 {

    position: relative;
    z-index: 2;

    font-size: 16px;

    font-weight: 600;

    margin-bottom: 7px;
}

.about-why-card p {

    position: relative;
    z-index: 2;

    color: #777;

    font-size: 13px;

    line-height: 1.65;

    margin: 0;
}


/* =========================================================
   WHY IMAGE
========================================================= */

.about-why-image {

    position: relative;

    min-height: 550px;

    margin-left: 25px;
}

.about-why-image img {

    width: 100%;
    height: 550px;

    object-fit: cover;

    border-radius: 28px;

    display: block;

    box-shadow:
        0 35px 75px rgba(0, 0, 0, .15);

    transition:
        transform .7s ease,
        filter .5s ease;
}

.about-why-image::before {

    content: "";

    position: absolute;

    width: 100%;
    height: 100%;

    left: -20px;
    top: 20px;

    border:
        1px solid rgba(233, 179, 0, .4);

    border-radius: 28px;

    z-index: -1;

    transition:
        left .5s ease,
        top .5s ease;
}

.about-why-image::after {

    content: "";

    position: absolute;

    inset: 0;

    border-radius: 28px;

    background:
        linear-gradient(135deg,
            rgba(233, 179, 0, .18),
            transparent 35%,
            rgba(0, 0, 0, .25));

    pointer-events: none;
}

.about-why-image:hover img {

    transform:
        scale(1.035);

    filter:
        brightness(1.05);
}

.about-why-image:hover::before {

    left: -10px;
    top: 10px;
}


/* =========================================================
   PROCESS
========================================================= */

.about-process {

    padding: 65px 0 75px;
    background:
        var(--about-dark);
    color: #fff;
    position: relative;
    overflow: hidden;
    /* margin-bottom: 3rem; */
}

.about-process::before {

    content: "";

    position: absolute;

    width: 650px;
    height: 650px;

    border-radius: 50%;

    border:
        1px solid rgba(233, 179, 0, .08);

    right: -300px;
    top: -250px;
}

.about-process::after {

    content: "";

    position: absolute;

    width: 350px;
    height: 350px;

    border-radius: 50%;

    background:
        rgba(233, 179, 0, .09);

    filter: blur(100px);

    left: -180px;
    bottom: -180px;
}

.about-process-header {

    text-align: center;

    margin-bottom: 70px;

    position: relative;
    z-index: 2;
}

.about-process-header h2 {
    margin: 12px 0 15px;
    font-size: clamp(34px, 3.5vw, 48px);
    font-weight: 600;
    letter-spacing: -2px;
}

.about-process-header p {

    max-width: 650px;

    margin: auto;

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

    line-height: 1.8;

    font-size: 15px;
}


/* =========================================================
   PROCESS CARDS
========================================================= */

.about-process-card {

    height: 100%;

    padding: 35px 28px;

    border-radius: 25px;

    background:
        linear-gradient(145deg,
            rgba(255, 255, 255, .075),
            rgba(255, 255, 255, .025));

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

    backdrop-filter:
        blur(12px);

    position: relative;

    overflow: hidden;

    transition:
        transform .6s cubic-bezier(.34, 1.56, .64, 1),
        box-shadow .5s ease,
        border-color .4s ease;
}

.about-process-card::before {

    content: "";

    position: absolute;

    width: 140px;
    height: 140px;

    border-radius: 50%;

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

    background:
        rgba(233, 179, 0, .06);

    transition:
        transform .6s ease;
}

.about-process-card::after {

    content: "";

    position: absolute;

    bottom: 0;
    left: 0;

    width: 100%;
    height: 3px;

    background:
        linear-gradient(90deg,
            transparent,
            var(--about-gold),
            transparent);

    transform:
        scaleX(0);

    transition:
        transform .5s ease;
}

.about-process-card:hover {

    transform:
        translateY(-14px) rotateX(3deg);

    box-shadow:
        0 35px 70px rgba(0, 0, 0, .45);

    border-color:
        rgba(233, 179, 0, .25);
}

.about-process-card:hover::before {

    transform:
        scale(2);
}

.about-process-card:hover::after {

    transform:
        scaleX(1);
}

.about-process-number {

    font-size: 12px;

    letter-spacing: 3px;

    color: var(--about-gold);

    font-weight: 800;

    margin-bottom: 22px;
}

.about-process-icon {

    width: 65px;
    height: 65px;

    display: flex;

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

    border-radius: 20px;

    background:
        rgba(233, 179, 0, .12);

    color: var(--about-gold);

    font-size: 22px;

    margin-bottom: 24px;

    transition:
        transform .6s cubic-bezier(.34, 1.56, .64, 1),
        background .4s ease;
}

.about-process-card:hover .about-process-icon {

    transform:
        rotate(360deg) scale(1.12);

    background:
        var(--about-gold);

    color: #000;
}

.about-process-card h4 {

    font-size: 21px;

    font-weight: 800;

    margin-bottom: 12px;
}

.about-process-card p {

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

    font-size: 14px;

    line-height: 1.8;

    margin: 0 0 6px 0;
}

.about-process-card a {
    color: var(--about-gold);
    text-decoration: none;
    font-size: 14px;
}


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

.about-cta {

    min-height: 500px;

    display: flex;

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

    position: relative;

    background:
        url("/assets/images/about/about-cta.jpg"
        ) center/cover no-repeat;

    text-align: center;

    color: #fff;
}

.about-cta::before {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(135deg,
            rgba(0, 0, 0, .88),
            rgba(0, 0, 0, .72));
}

.about-cta::after {

    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    border-radius: 50%;

    background:
        rgba(233, 179, 0, .1);

    filter:
        blur(100px);

    top: -300px;
    right: -100px;
}

.about-cta-content {

    max-width: 800px;

    position: relative;

    z-index: 3;

    padding: 80px 20px;
}

.about-cta-content h2 {
    font-size: clamp(38px, 3.5vw, 45px);
    line-height: 1.08;
    letter-spacing: -2px;
    font-weight: 600;
    margin: 15px 0 18px;
}

.about-cta-content h2 span {

    color: var(--about-gold);
}

.about-cta-content p {

    max-width: 650px;

    margin:
        0 auto 30px;

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

    font-size: 16px;

    line-height: 1.8;
}

.about-cta-btn {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    border: 0;

    padding:
        14px 30px;

    border-radius: 50px;

    background:
        var(--about-gold);

    color: #000;

    font-size: 15px;

    font-weight: 800;

    text-decoration: none;

    position: relative;

    overflow: hidden;

    transition:
        transform .45s cubic-bezier(.34, 1.56, .64, 1),
        box-shadow .4s ease;
}

.about-cta-btn::before {

    content: "";

    position: absolute;

    width: 0;
    height: 0;

    border-radius: 50%;

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

    left: 50%;
    top: 50%;

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

    transition:
        width .5s ease,
        height .5s ease;
}

.about-cta-btn span,
.about-cta-btn i {

    position: relative;

    z-index: 2;
}

.about-cta-btn:hover {

    transform:
        translateY(-6px) scale(1.04);

    box-shadow:
        0 18px 40px rgba(233, 179, 0, .35);
}

.about-cta-btn:hover::before {

    width: 300px;
    height: 300px;
}


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

.about-reveal {

    opacity: 0;

    transform:
        translateY(55px) scale(.96);

    transition:
        opacity .8s ease,
        transform .9s cubic-bezier(.34, 1.56, .64, 1);
}

.about-reveal.about-show {

    opacity: 1;

    transform:
        translateY(0) scale(1);
}

.about-delay-1 {
    transition-delay: .10s;
}

.about-delay-2 {
    transition-delay: .20s;
}

.about-delay-3 {
    transition-delay: .30s;
}

.about-delay-4 {
    transition-delay: .40s;
}


/* =========================================================
   KEYFRAMES
========================================================= */

@keyframes aboutBannerGlow {

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

    100% {
        transform:
            translate(-30px, 35px) scale(1.1);
    }
}

@keyframes aboutPulse {

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

    50% {
        transform: scale(1.5);
        opacity: .6;
    }
}

@keyframes aboutCircleFloat {

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

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

@keyframes aboutRotate {

    from {
        transform: rotate(0);
    }

    to {
        transform: rotate(360deg);
    }
}


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

@media (max-width: 991px) {

    .about-content {
        padding-left: 0;
    }

    .about-why-image {
        margin-left: 0;
    }

    .about-visual {
        min-height: 520px;
    }

    .about-engagement {
        left: 5px;
    }

    .about-sales {
        right: 5px;
    }
}


@media (max-width: 767px) {

    .about-intro,
    .about-values,
    .about-why,
    .about-process {
        padding: 75px 0;
    }

    .about-visual {
        min-height: 460px;

        margin-bottom: 25px;
    }

    .about-visual-circle {

        width: 280px;
        height: 280px;
    }

    .about-person {

        width: 280px;
        height: 400px;
    }

    .about-engagement {

        left: 0;
        top: 0px;

        min-width: 155px;

        padding: 13px;
    }

    .about-sales {

        right: 0;
        bottom: 45px;

        width: 125px;
        height: fit-content;

        padding: 0;
    }

    .about-float-title {
        font-size: 17px;
    }

    .about-float-text {
        font-size: 14px;
    }

    .about-content h2,
    .about-why-content h2 {
        font-size: 35px;
        letter-spacing: -1px;
    }

    .about-feature-card {
        padding: 14px;
    }

    .about-feature-icon {
        width: 48px;
        height: 48px;
    }

    .about-why-grid {
        grid-template-columns: 1fr;
    }

    .about-why-image,
    .about-why-image img {
        min-height: 380px;
        height: 380px;
    }

    .about-process-card {
        padding: 30px 23px;
    }

    .about-cta {
        min-height: 430px;
    }

    .about-cta-content {
        padding: 60px 20px;
    }

    .about-cta-content h2 {
        font-size: 38px;
    }
}


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

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

    *,
    *::before,
    *::after {

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;
    }
}





/* =========================================
   PREMIUM PROCESS SECTION
========================================= */

.aup-process-section {
    position: relative;
    padding: 1px 0;
    overflow: hidden;
}


/* Main Wrapper */

.aup-process-wrap {
    position: relative;
}


/* =========================================
   DOTTED CONNECTING LINE
========================================= */

.aup-process-line {
    position: absolute;
    top: 137px;
    left: 16.66%;
    width: 66.66%;
    border-top: 2px dashed rgba(233, 179, 0, 0.45);
    z-index: 0;
}


/* =========================================
   PROCESS CARD
========================================= */

.aup-process-card {
    position: relative;
    z-index: 2;

    height: 100%;

    padding: 15px 25px 35px;

    text-align: center;

    border: none;

    background: transparent;

    transition:
        transform 0.4s ease,
        background 0.4s ease;
}


.aup-process-card:hover {
    transform: translateY(-10px);
}


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

.aup-process-top {
    display: flex;

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

    gap: 10px;

    margin-bottom: 25px;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;
}


.aup-process-number {
    color: #FF6400;
}


.aup-process-label {
    color: #777;
}


/* =========================================
   ICON
========================================= */

.aup-process-icon {
    position: relative;

    width: 105px;
    height: 105px;

    margin: 0 auto 28px;

    display: flex;

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

    border-radius: 50%;

    background:
        linear-gradient(135deg,
            #FF6400,
            #FF9A5C);

    box-shadow:
        0 15px 40px rgba(233, 179, 0, 0.22);

    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease;

    z-index: 3;
}


/* Outer Ring */

.aup-process-icon::before {
    content: "";

    position: absolute;

    width: 122px;
    height: 122px;

    border-radius: 50%;

    border:
        1px dashed rgba(233, 179, 0, 0.65);

    animation:
        aupRotateRing 15s linear infinite;
}


/* Icon */

.aup-process-icon i {
    position: relative;

    z-index: 2;

    font-size: 34px;

    color: #000;
}


.aup-process-card:hover .aup-process-icon {
    transform: scale(1.08);

    box-shadow:
        0 20px 45px rgba(233, 179, 0, 0.35);
}


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

.aup-process-card h4 {
    margin-bottom: 15px;

    font-size: 25px;

    font-weight: 700;

    color: #fff;

    transition:
        color 0.3s ease;
}


.aup-process-card:hover h4 {
    color: #FF6400;
}


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

.aup-process-card p {
    max-width: 310px;

    margin:
        0 auto;

    color: #777;

    font-size: 15px;

    line-height: 1.8;
}


/* =========================================
   ARROW BETWEEN CARDS
========================================= */

.aup-process-arrow {
    position: absolute;

    top: 95px;

    right: -38px;

    z-index: 5;

    color: #FF6400;

    font-size: 25px;

    animation:
        aupArrowMove 2s ease-in-out infinite;
}


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

@keyframes aupRotateRing {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


@keyframes aupArrowMove {

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

    50% {
        transform: translateX(7px);
    }

}


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

@media (max-width: 991px) {

    .aup-process-line {
        display: none;
    }

    .aup-process-arrow {
        display: none;
    }

}


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

@media (max-width: 767px) {

    .aup-process-section {
        /* padding: 70px 0; */
    }

    .aup-process-card {
        padding: 30px 20px;
    }

    .aup-process-icon {
        width: 90px;
        height: 90px;
    }

    .aup-process-icon::before {
        width: 105px;
        height: 105px;
    }

    .aup-process-icon i {
        font-size: 28px;
    }

}