/* =========================================================
   FUTURE GOALS COMMON
========================================================= */

.aar-future-section,
.aar-target-section,
.aar-our-targets{

    position:relative;
    overflow:hidden;

    background:#070707;
    color:#fff;

}


.aar-future-section{

    padding:120px 0 110px;

}


.aar-target-section{

    padding:110px 0;

    background:#0b0b0d;

}


.aar-our-targets{

    padding:120px 0 100px;

}


/* =========================================================
   BACKGROUNDS
========================================================= */

.aar-future-grid,
.aar-target-grid{

    position:absolute;
    inset:0;

    opacity:.035;

    background-image:
        linear-gradient(
            rgba(75,53,209,.8) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(75,53,209,.8) 1px,
            transparent 1px
        );

    background-size:80px 80px;

}


.aar-future-glow,
.aar-targets-glow{

    position:absolute;

    border-radius:50%;

    filter:blur(120px);

    pointer-events:none;

}


.aar-future-glow-1{

    width:450px;
    height:450px;

    left:-250px;
    top:150px;

    background:rgba(65,42,190,.15);

}


.aar-future-glow-2{

    width:400px;
    height:400px;

    right:-200px;
    bottom:100px;

    background:rgba(255,80,25,.07);

}


.aar-targets-glow{

    width:500px;
    height:500px;

    right:-300px;
    top:200px;

    background:rgba(65,42,190,.12);

}


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

.aar-future-heading{

    max-width:900px;

    margin-bottom:100px;

}


.aar-future-label{

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

    color:#ff5b20;

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

    letter-spacing:4px;

    margin-bottom:22px;

}


.aar-future-label span{

    width:42px;
    height:2px;

    background:#ff5b20;

}


.aar-future-heading h1{

    margin:0;

    font-size:clamp(45px,6vw,78px);

    line-height:.98;

    letter-spacing:-3px;

    font-weight:300;

}


.aar-future-heading h1 strong{

    color:#ff9b2d;
    font-weight:700;

}


.aar-future-heading p{

    max-width:650px;

    margin-top:30px;

    color:#777;

    font-size:13px;

    line-height:1.9;

}


/* =========================================================
   SECTION COMMON
========================================================= */

.aar-section-mini-title{

    color:#ff5b20;

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

    letter-spacing:3px;

    margin-bottom:18px;

}


.aar-future-number{

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

    font-size:80px;
    line-height:.7;

    font-weight:800;

    margin-bottom:20px;

}


.aar-future-title{

    margin:0;

    max-width:500px;

    font-size:clamp(32px,4vw,52px);

    line-height:1.05;

    font-weight:300;

    letter-spacing:-2px;

}


.aar-future-title strong{

    display:block;

    color:#ff9b2d;

    font-weight:700;

}


.aar-future-text{

    max-width:500px;

    color:#777;

    font-size:12px;

    line-height:1.9;

    margin-top:25px;

}


/* =========================================================
   TOTAL SALES
========================================================= */

.aar-total-sales{

    display:flex;

    align-items:center;

    gap:18px;

    margin-top:40px;

    padding:20px;

    width:max-content;

    background:#101010;

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

}


.aar-sales-icon{

    width:50px;
    height:50px;

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

    color:#ff5b20;

    border:1px solid rgba(255,91,32,.35);

    font-size:18px;

}


.aar-total-sales small{

    display:block;

    color:#555;

    font-size:7px;

    letter-spacing:2px;

}


.aar-total-sales h3{

    margin:5px 0 0;

    font-size:30px;

    font-weight:700;

}


.aar-total-sales h3 span{

    color:#ff5b20;

    font-size:13px;

}


.aar-total-sales p{

    margin:2px 0 0;

    color:#555;

    font-size:8px;

}


/* =========================================================
   CUSTOMER CHART
========================================================= */

.aar-customer-chart{

    padding:40px;

    background:#101010;

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

    box-shadow:0 30px 80px rgba(0,0,0,.25);

}


.aar-chart-heading{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    padding-bottom:25px;

    margin-bottom:10px;

   

}


.aar-chart-heading span{

    color:#555;

    font-size:7px;

    letter-spacing:2px;

}


.aar-chart-heading h3{

    margin:7px 0 0;

    font-size:20px;

    font-weight:400;

}


.aar-chart-year{

    color:#ff5b20;

    font-size:8px;

    letter-spacing:2px;

}


/* Customer Row */

.aar-customer-row{

    padding:18px 0;

}


.aar-customer-info{

    display:flex;

    justify-content:space-between;

    margin-bottom:8px;

}


.aar-customer-info span{

    color:#888;

    font-size:8px;

    letter-spacing:1px;

}


.aar-customer-info strong{

    color:#fff;

    font-size:11px;

}


.aar-progress{

    width:100%;
    height:5px;

    background:#1d1d1d;

    overflow:hidden;

}


.aar-progress span{

    display:block;

    height:100%;

    background:
        linear-gradient(
            90deg,
            #ff9b2d,
            #ff5b20
        );

    transition:
        width 1.5s cubic-bezier(.2,.7,.2,1);

}


.aar-chart-bottom{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-top:15px;

    padding-top:20px;

    border-top:1px solid rgba(255,255,255,.07);

}


.aar-chart-bottom span{

    color:#555;

    font-size:7px;

    letter-spacing:2px;

}


.aar-chart-bottom strong{

    color:#ff5b20;

    font-size:16px;

}


/* =========================================================
   FIVE YEAR HEADER
========================================================= */

.aar-target-header{

    display:flex;

    align-items:end;

    justify-content:space-between;

    gap:60px;

    margin-bottom:65px;

}


.aar-target-header > p{

    max-width:450px;

    margin:0;

    color:#666;

    font-size:12px;

    line-height:1.9;

}


/* =========================================================
   FIVE YEAR CHART
========================================================= */

.aar-five-year-chart{

    height:430px;

    display:grid;

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

    gap:25px;

    align-items:end;

    padding:
        0 20px;

   

}


.aar-year-column{

    position:relative;

    height:100%;

    display:flex;

    flex-direction:column;

    justify-content:end;

    align-items:center;

}


.aar-year-value{

    margin-bottom:12px;

    color:#bbb;

    font-size:11px;

    font-weight:600;

    opacity:0;

    transform:translateY(10px);

    transition:.5s;

}


.aar-year-bar{

    position:relative;

    width:75px;

    height:280px;

    display:flex;

    align-items:end;

    background:
        repeating-linear-gradient(
            to top,
            rgba(255,255,255,.035) 0,
            rgba(255,255,255,.035) 1px,
            transparent 1px,
            transparent 55px
        );

}


.aar-year-bar span{

    display:block;

    width:100%;

    background:
        linear-gradient(
            to top,
            #ff9b2d,
            #ff5b20
        );

    transition:
        height 1.5s cubic-bezier(.2,.7,.2,1);

    box-shadow:
        0 0 30px rgba(75,53,209,.15);

}


.aar-final-year
.aar-year-bar span{

    box-shadow:
        0 0 45px rgba(255,91,32,.25);

}


.aar-year{

    width:100%;

    text-align:center;

    padding-top:18px;

}


.aar-year strong{

    display:block;

    color:#fff;

    font-size:14px;

}


.aar-year small{

    display:block;

    margin-top:5px;

    color:#555;

    font-size:7px;

    letter-spacing:2px;

}


/* =========================================================
   GROWTH STRIP
========================================================= */

.aar-growth-strip{

    display:grid;

    grid-template-columns:
        1fr 1fr 1fr auto;

    margin-top:35px;

    background:#111;

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

}


.aar-growth-strip > div{

    padding:
        20px 25px;

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

}


.aar-growth-strip span{

    display:block;

    color:#555;

    font-size:7px;

    letter-spacing:2px;

    margin-bottom:7px;

}


.aar-growth-strip strong{

    color:#fff;

    font-size:18px;

}


.aar-growth-strip div:first-child strong{

    color:#ff5b20;

}


.aar-growth-arrow{

    width:80px;

    display:flex;

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

    color:#ff5b20;

    font-size:20px;

}


/* =========================================================
   GOAL CARDS
========================================================= */

.aar-goal-card{

    position:relative;

    min-height:300px;

    padding:30px;

    background:#101010;

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

    overflow:hidden;

    transition:
        transform .5s,
        border-color .5s,
        box-shadow .5s;

}


.aar-goal-card::before{

    content:"";

    position:absolute;

    width:100%;
    height:2px;

    left:0;
    top:0;

    background:
        linear-gradient(
            90deg,
            #ff9b2d,
            #ff5b20
        );

    transform:scaleX(0);

    transform-origin:left;

    transition:.5s;

}


.aar-goal-card:hover{

    transform:
        translateY(-10px);

    border-color:
        rgba(75,53,209,.45);

    box-shadow:
        0 25px 60px rgba(0,0,0,.3);

}


.aar-goal-card:hover::before{

    transform:scaleX(1);

}


.aar-goal-top{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:35px;

}


.aar-goal-top span{

    color:#444;

    font-size:10px;

    letter-spacing:2px;

}


.aar-goal-top i{

    width:45px;
    height:45px;

    display:flex;

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

    color:#ff5b20;

    border:
        1px solid rgba(255,91,32,.25);

    font-size:18px;

    transition:.4s;

}


.aar-goal-card:hover
.aar-goal-top i{

    background:#ff5b20;

    color:#111;

    transform:
        rotate(10deg);

}


.aar-goal-card h3{

    margin:0;

    max-width:260px;

    font-size:25px;

    line-height:1.1;

    font-weight:300;

}


.aar-goal-card h3 strong{

    display:block;

    color:#ff9b2d;

    font-weight:700;

}


.aar-goal-card p{

    margin-top:18px;

    color:#666;

    font-size:10px;

    line-height:1.8;

}


.aar-goal-bottom{

    position:absolute;

    left:30px;
    right:30px;
    bottom:25px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding-top:15px;

    border-top:
        1px solid rgba(255,255,255,.07);

}


.aar-goal-bottom span{

    color:#444;

    font-size:7px;

    letter-spacing:2px;

}


.aar-goal-bottom strong{

    color:#ff5b20;

    font-size:9px;

    letter-spacing:1px;

}


.aar-goal-highlight{

    background:
        linear-gradient(
            145deg,
            #15106c,
            #101010 70%
        );

}


/* =========================================================
   FINAL STATEMENT
========================================================= */

.aar-future-statement{

    position:relative;

    display:flex;

    align-items:center;

    gap:25px;

    margin-top:70px;

    padding:35px 40px;

    background:#101010;

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

}


.aar-statement-line{

    width:3px;
    height:70px;

    flex-shrink:0;

    background:
        linear-gradient(
            #ff9b2d,
            #ff5b20
        );

}


.aar-future-statement small{

    color:#555;

    font-size:7px;

    letter-spacing:3px;

}


.aar-future-statement h3{

    margin:8px 0 0;

    font-size:24px;

    font-weight:300;

}


.aar-future-statement h3 span{

    color:#ff9b2d;

    font-weight:700;

}


.aar-future-statement > i{

    margin-left:auto;

    width:50px;
    height:50px;

    display:flex;

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

    color:#ff5b20;

    border:
        1px solid rgba(255,91,32,.3);

    font-size:18px;

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:991px){

    .aar-target-header{

        display:block;

    }

    .aar-target-header > p{

        margin-top:25px;

    }

    .aar-five-year-chart{

        gap:12px;

    }

    .aar-year-bar{

        width:55px;

    }

}


@media(max-width:767px){

    .aar-future-section,
    .aar-target-section,
    .aar-our-targets{

        padding:
            75px 0;

    }


    .aar-future-heading{

        margin-bottom:65px;

    }


    .aar-future-heading h1{

        font-size:45px;

        letter-spacing:-2px;

    }


    .aar-future-number{

        font-size:65px;

    }


    .aar-customer-chart{

        padding:25px 20px;

    }


    .aar-total-sales{

        width:100%;

    }


    .aar-five-year-chart{

        height:330px;

        gap:8px;

        padding:0 5px;

    }


    .aar-year-bar{

        width:42px;

        height:210px;

    }


    .aar-year-value{

        font-size:8px;

    }


    .aar-year strong{

        font-size:11px;

    }


    .aar-year small{

        font-size:5px;

    }


    .aar-growth-strip{

        grid-template-columns:
            1fr 1fr;

    }


    .aar-growth-strip > div{

        padding:15px;

    }


    .aar-growth-arrow{

        display:none;

    }


    .aar-goal-card{

        min-height:280px;

    }


    .aar-future-statement{

        padding:25px;

    }


    .aar-future-statement h3{

        font-size:19px;

    }


    .aar-future-statement > i{

        display:none;

    }

}