/* =======================================================
   FUTURE ELITE HERO
======================================================= */

.hero-future{

       position: relative;

    overflow: hidden;

    isolation: isolate;

    background-image: url("../../images/future-elite.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding-top:6rem;
    padding-bottom:6rem;

}
.hero-future::before {

    content:"";

    position:absolute;
    inset:0;

    background:

    linear-gradient(
        90deg,

        rgba(255,255,255,.95) 0%,

        rgba(255,255,255,.88) 30%,

        rgba(255,255,255,.72) 60%,

        rgba(255,255,255,.55) 100%

    );

    z-index:-1;

}

@media (max-width: 500px) {

    .hero-future {
        text-align: center;
    }

    .hero-future .btn {
        width: auto;
        min-width: 240px;
        white-space: normal;
    }

    .hero-future .badge {
        margin-inline: auto;
    }

    .hero-future::before{

    background:

    linear-gradient(

        180deg,

        rgba(255,255,255,.96) 0%,

        rgba(255,255,255,.90) 35%,

        rgba(255,255,255,.78) 70%,

        rgba(255,255,255,.62) 100%

    );
    }

     .section-title {

        font-size: clamp(2rem, 7vw, 2.4rem);

        line-height: 1.15;

    }

    .section-subtitle {

        font-size: var(--text-base);

    }

}

.hero-future .hero-content{

    position:relative;
    z-index:2;

    max-width:760px;

    padding:7rem 0;

}

.hero-future .hero-title{

    color:black;

}

.hero-future .hero-title span{

    display:block;

    color:var(--primary-color);

}

.hero-subtitle{

    color:black;

    max-width:700px;

    font-size:1.15rem;

    line-height:1.9;

}



/* =======================================================
WHY SECTION
======================================================= */


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

@media (max-width:950px){

    .why-grid{

        gap:3rem;

    }

    .future-benefits{

        grid-template-columns:1fr 1fr;

    }

}

@media (max-width:700px){

    .future-benefits{

        grid-template-columns:1fr;

    }

    .hero-future .hero-content{

        text-align:center;

    }

    .hero-subtitle{

        margin:auto;

    }

}

/*==================================================
EARLY PLANNING STRATEGY
==================================================*/

.future-pillars{

    display:grid;

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

    gap:2rem;

    margin-top:4rem;

}

.pillar-card{

    position:relative;

    background:#fff;

    border-radius:22px;

    padding:2.5rem;

    border-top:5px solid var(--color-primary);

    box-shadow:0 18px 45px rgba(0,0,0,.06);

    transition:.35s;

    overflow:hidden;

}

.pillar-card:hover{

    transform:translateY(-10px);

    box-shadow:0 30px 70px rgba(0,0,0,.12);

}

.pillar-card::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:100%;

    background:linear-gradient(
        180deg,
        rgba(91,76,168,.03),
        transparent 35%
    );

    pointer-events:none;

}

.pillar-icon{

    width:78px;

    height:78px;

    margin-bottom:1.5rem;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(91,76,168,.10);

    font-size:2.2rem;

}

.pillar-card h3{

    margin-bottom:1rem;

    line-height:1.3;

}

.pillar-card p{

    color:var(--text-secondary);

    line-height:1.8;

    margin-bottom:1.8rem;

}

.pillar-list{

    list-style:none;

    padding:0;

    margin:0;

}

.pillar-list li{

    position:relative;

    padding-left:1.8rem;

    margin-bottom:.9rem;

    color:var(--text-secondary);

}

.pillar-list li::before{

    content:"✓";

    position:absolute;

    left:0;

    color:var(--color-primary);

    font-weight:700;

}


/*---------------- Tablet ----------------*/

@media (max-width:1100px){

.future-pillars{

grid-template-columns:1fr;

max-width:700px;

margin-inline:auto;

}

}

/*==================================================
FOUR YEAR ROADMAP
==================================================*/

.development-roadmap{

    position:relative;

    display:grid;

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

    gap:2rem;

    margin-top:5rem;

}

.roadmap-progress{

    position:absolute;

    left:8%;

    right:8%;

    top:58px;

    height:4px;

    background:#ececec;

    z-index:0;

}

.development-stage{

    position:relative;

    z-index:2;

}

.stage-number{

    width:130px;

    margin:0 auto 2rem;

    padding:.7rem;

    border-radius:999px;

    background:var(--color-primary);

    color:#fff;

    text-align:center;

    font-weight:700;

    box-shadow:0 12px 30px rgba(91,76,168,.25);

}

.stage-card{

    background:#fff;

    border-radius:22px;

    padding:2rem;

    text-align:center;

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

    transition:.35s;

    height:100%;

}

.stage-card:hover{

    transform:translateY(-10px);

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

}

.stage-icon{

    width:82px;

    height:82px;

    margin:0 auto 1.4rem;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:2.3rem;

    background:rgba(91,76,168,.08);

}

.stage-card h3{

    margin-bottom:.8rem;

}

.stage-card p{

    color:var(--text-secondary);

    line-height:1.8;

    margin-bottom:1.5rem;

}

.stage-card ul{

    list-style:none;

    padding:0;

    margin:0;

    text-align:left;

}

.stage-card li{

    position:relative;

    padding-left:1.6rem;

    margin-bottom:.8rem;

    color:var(--text-secondary);

}

.stage-card li::before{

    content:"✓";

    position:absolute;

    left:0;

    color:var(--color-primary);

    font-weight:700;

}

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

@media(max-width:1200px){

.development-roadmap{

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

}

.roadmap-progress{

display:none;

}

}

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

@media(max-width:768px){

.development-roadmap{

grid-template-columns:1fr;

gap:3rem;

}

.development-stage{

padding-left:2rem;

}

.development-stage::before{

content:"";

position:absolute;

left:.7rem;

top:0;

bottom:0;

width:4px;

background:#ececec;

}

.stage-number{

margin-left:0;

}

.stage-card{

text-align:left;

}

.stage-icon{

margin:0 0 1.3rem;

}

}

.badge-light {

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

    background: rgba(255,255,255,0.15);

    color: #fff;

    border: 1px solid rgba(255,255,255,0.35);

    backdrop-filter: blur(10px);

}

.text-inverse-small {
    color:white;
}