.why-page{
   min-height:auto;
   padding:0 80px 140px;
   overflow:visible;
   position:relative;
   

    background:
    url("images/why-bg.png") center/cover no-repeat fixed;
}

.why-page::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:180px;

    background: linear-gradient(
        to bottom,
        rgba(8,8,8,1) 0%,
        rgba(8,8,8,.85) 45%,
        rgba(8,8,8,0) 100%
    );

    z-index:40;
    pointer-events:none;
}

.why-heading{
    position: sticky;
    top: 0;
    z-index: 50;

    width: calc(100% + 160px);
    margin-left: -80px;
    margin-right: -80px;

    text-align:center;
    padding: 140px 0 40px;

    background: linear-gradient(
        to bottom,
        #160c07 0%,
        rgba(2, 1, 1, 0.95) 45%,
        rgba(8,8,8,1) 100%
    );
}

.why-heading::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-60px;
    width:100%;
    height:60px;

    background: linear-gradient(
        to bottom,
        rgba(8,8,8,1) 0%,
        rgba(8,8,8,0.7) 40%,
        rgba(8,8,8,0) 100%
    );

    pointer-events:none;
}


.why-heading span{
    font-size:24px;
    letter-spacing:14px;
    color:#ff8a2a;
}

.why-scroll{
    width:100%;
    display:flex;
    flex-direction:column;
    gap:80px;
    overflow:visible;
    height:auto;
   margin-top:-60px;
   padding-top:120px;
}

.why-scroll::-webkit-scrollbar{
    display:none;
}

.why-item{
     width:100%;
    min-height:420px;

    display:flex;
    align-items:center;
    justify-content:center;   /* instead of space-between */

    gap:10px; 
    transition: all 1s cubic-bezier(0.22,1,0.36,1);
}

.why-item.reverse .why-text{
    left:54%;
    right:auto;

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

    text-align:left;
}


.why-item.reverse .why-image{
    right: auto;
    left: 4%;
}

.why-text{
    width:40%;
    max-width:520px;

    position:absolute;
    top:50%;
    left:10%;

    transform:translateY(-50%);

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

    text-align:left;
}

.number{
    font-size:92px;
    font-weight:300;
    line-height:1;
    text-align:left;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.18); /* very low opacity */

    font-family: "Times New Roman", serif;

    display:block;
    margin-bottom:18px;

    text-shadow:
        0 0 8px rgba(255,140,40,0.04),
        0 0 18px rgba(255,140,40,0.025),
        0 0 28px rgba(255,140,40,0.015);

    letter-spacing:-3px;
}

.why-text h2{
    font-size:56px;
    line-height:1.15;
    margin:0 0 22px;
    text-align:left;
}

.line{
    width:120px;
    height:3px;
    margin:0 0 20px;

    background:#ff8a2a;
    border-radius:20px;

    box-shadow:
        0 0 8px rgba(255,140,40,.6),
        0 0 18px rgba(255,140,40,.35);
}

.why-text p{
    font-size:20px;
    line-height:1.8;
    color:rgba(255,255,255,.75);

    max-width:560px;
    text-align:left;
}

.why-image{
    width:620px;
    max-width:100%;
    height:380px;
    border-radius:24px;
    overflow:hidden;

    position:absolute;
    right:8%;
    top:50%;
    transform:translateY(-50%);
}

.why-image img{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* top line */
.why-top-line{
    width:420px;
    height:1px;
    margin:18px auto 0;
    background:rgba(255,140,40,0.38);
    position:relative;

     box-shadow:
    0 0 8px rgba(255,140,40,0.6),
    0 0 18px rgba(255,140,40,0.35),
    0 0 30px rgba(255,140,40,0.22);
}

.why-top-line .diamond{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    color:#ff8a2a;
    font-size:18px;
    text-shadow:0 0 12px rgba(255,140,40,.45);
}

/* bottom cta */
.why-bottom-cta{
    text-align:center;
    padding:40px 0 80px;
}

.why-bottom-line{
    width:520px;
    height:1px;
    margin:0 auto 35px;
    background:rgba(255,140,40,0.38);
    position:relative;

     box-shadow:
    0 0 8px rgba(255,140,40,0.6),
    0 0 18px rgba(255,140,40,0.35),
    0 0 30px rgba(255,140,40,0.22);
}

.why-bottom-line .diamond{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    color:#ff8a2a;
    font-size:18px;
    text-shadow:0 0 12px rgba(255,140,40,.45);
}

.why-bottom-cta h3{
    font-size:42px;
    font-weight:300;
    line-height:1.5;
    color:#fff;
    margin-bottom:30px;
}

.why-bottom-cta h3 span{
    color:#ff8a2a;
}

.why-btn{
    display:inline-block;
    padding:18px 42px;
    border-radius:40px;
    text-decoration:none;
    color:#ff8a2a;
    font-size:20px;

    border:1px solid rgba(255,140,40,.45);
    background:rgba(255,140,40,.05);

    box-shadow:
        inset 0 0 8px rgba(255,140,40,.08),
        0 0 16px rgba(255,140,40,.08);

    transition:.35s ease;
}

.why-btn:hover{
    transform:translateY(-2px);
    box-shadow:
        0 0 20px rgba(255,140,40,.18);
}

/* transition */
.why-page.in-view .why-item{
    opacity:1;
    transform: translateY(0);
}

.why-page.in-view .why-item:nth-child(1){
    animation: whyReveal 1.4s ease forwards;
    animation-delay: .4s;
}

.why-page.in-view .why-item:nth-child(2){
    animation: whyReveal 1.4s ease forwards;
    animation-delay: .9s;
}

.why-page.in-view .why-item:nth-child(3){
    animation: whyReveal 1.4s ease forwards;
    animation-delay: 1.4s;
}

.why-page.in-view .why-item:nth-child(4){
    animation: whyReveal 1.4s ease forwards;
    animation-delay: 1.9s;
}

.why-bottom-cta{
    opacity:0;
    transform: translateY(80px);
}

.why-page.in-view .why-bottom-cta{
    animation: whyCtaReveal 1.2s ease forwards;
    animation-delay: 1s;
}

@keyframes whyReveal{
    from{
        opacity:0;
        transform:translateY(140px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes whyCtaReveal{
    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* FINAL ALIGNMENT OVERRIDES */
.why-item{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:20px;
}

.why-text{
    flex:0 0 420px;
}

.why-image{
    flex:0 0 500px;
}

.why-item.reverse .why-text{
    margin-left:0;
}


.why-item.reverse .why-image{
    order:-1;
}