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

.why-us{

    position:relative;

    padding:90px 8%;

    background:#0B1F1A;

    overflow:hidden;

}


/* ==================================
        PREMIUM BACKGROUND GLOW
================================== */

.why-us::before{

    content:"";

    position:absolute;

    width:500px;
    height:500px;

    top:-250px;
    left:-180px;

    background:
        radial-gradient(
            circle,
            rgba(212,175,55,.09),
            transparent 70%
        );

    pointer-events:none;

    animation:
        whyGlowMove 10s ease-in-out infinite alternate;

}


.why-us::after{

    content:"";

    position:absolute;

    width:450px;
    height:450px;

    right:-220px;
    bottom:-220px;

    background:
        radial-gradient(
            circle,
            rgba(212,175,55,.07),
            transparent 70%
        );

    pointer-events:none;

    animation:
        whyGlowMoveReverse 12s ease-in-out infinite alternate;

}


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

.section-title{

    position:relative;

    z-index:2;

    text-align:center;

    margin-bottom:60px;

}


.section-title h1{

    font-size:56px;

    font-weight:700;

    color:#D4AF37;

    line-height:1.2;

    text-transform:uppercase;

    margin-bottom:20px;

    text-shadow:
        0 0 15px rgba(212,175,55,.10);

    animation:
        whyTitleReveal .9s ease both;

}


.section-title p{

    max-width:700px;

    margin:auto;

    color:#E5E5E5;

    line-height:1.8;

    font-size:18px;

    animation:
        whyDescriptionReveal .9s .2s ease both;

}


/* ==================================
      CARD GRID
================================== */

.why-container{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(280px,1fr));

    gap:30px;

    align-items:stretch;

}


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

.why-card{

    position:relative;

    overflow:hidden;

    background:#FFF9F0;

    border-left:5px solid #D4AF37;

    border-radius:14px;

    padding:30px;

    box-shadow:
        0 8px 25px rgba(0,0,0,.2);

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

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

    min-height:320px;

    opacity:0;

    animation:
        whyCardReveal .8s ease forwards;

}


/* ==================================
      CARD STAGGER
================================== */

.why-card:nth-child(1){

    animation-delay:.15s;

}


.why-card:nth-child(2){

    animation-delay:.25s;

}


.why-card:nth-child(3){

    animation-delay:.35s;

}


.why-card:nth-child(4){

    animation-delay:.45s;

}


.why-card:nth-child(5){

    animation-delay:.55s;

}


.why-card:nth-child(6){

    animation-delay:.65s;

}


/* ==================================
      CARD GOLD LIGHT EFFECT
================================== */

.why-card::before{

    content:"";

    position:absolute;

    top:0;
    left:-120%;

    width:80%;
    height:100%;

    background:
        linear-gradient(
            110deg,
            transparent,
            rgba(255,255,255,.45),
            transparent
        );

    transform:skewX(-20deg);

    transition:.8s ease;

    pointer-events:none;

}


.why-card:hover::before{

    left:140%;

}


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

.why-card::after{

    content:"";

    position:absolute;

    width:120px;
    height:120px;

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

    background:
        radial-gradient(
            circle,
            rgba(212,175,55,.18),
            transparent 70%
        );

    opacity:0;

    transition:
        opacity .4s ease,
        transform .5s ease;

    pointer-events:none;

}


.why-card:hover::after{

    opacity:1;

    transform:scale(1.5);

}


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

.why-card:hover{

    transform:
        translateY(-10px);

    border-left-color:#12372A;

    box-shadow:
        0 20px 45px rgba(0,0,0,.28),
        0 0 25px rgba(212,175,55,.08);

}


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

.why-icon{

    position:relative;

    width:65px;

    height:65px;

    border-radius:50%;

    background:#F6EFE2;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:20px;

    transition:
        transform .45s ease,
        background .45s ease,
        box-shadow .45s ease;

}


/* ==================================
      ICON GOLD RING
================================== */

.why-icon::before{

    content:"";

    position:absolute;

    inset:-4px;

    border-radius:50%;

    border:1px solid rgba(212,175,55,.35);

    transform:scale(.85);

    opacity:0;

    transition:
        transform .45s ease,
        opacity .45s ease;

}


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

.why-icon i{

    color:#D4AF37;

    font-size:28px;

    transition:
        transform .45s ease,
        color .35s ease,
        text-shadow .35s ease;

}


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

.why-card:hover .why-icon{

    transform:
        translateY(-4px)
        scale(1.08);

    background:#FFF5D8;

    box-shadow:
        0 8px 20px rgba(212,175,55,.20);

}


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

    opacity:1;

    transform:scale(1.12);

}


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

    transform:
        rotate(-8deg)
        scale(1.12);

    color:#C49A20;

    text-shadow:
        0 0 12px rgba(212,175,55,.35);

}


/* ==================================
      ICON + STATUS
================================== */

.why-icon-wrap{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:20px;

}


.support-status{

    font-family:'Poppins',sans-serif;

    font-size:16px;

    font-weight:600;

    color:#12372A;

    white-space:nowrap;

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

}


/* ==================================
      SUPPORT STATUS HOVER
================================== */

.why-card:hover .support-status{

    color:#D4AF37;

    transform:translateX(3px);

}


/* ==================================
      TEXT
================================== */

.why-card h3{

    font-size:24px;

    color:#12372A;

    margin-bottom:15px;

    font-weight:700;

    line-height:1.3;

    transition:
        color .35s ease,
        transform .35s ease;

}


.why-card:hover h3{

    color:#0B2B26;

    transform:
        translateX(3px);

}


.why-card p{

    color:#555555;

    line-height:1.8;

    font-size:16px;

    transition:
        color .35s ease;

}


.why-card:hover p{

    color:#444444;

}


/* ==================================
      SUPPORT LINK
================================== */

.support-link{

    position:relative;

    width:max-content;

    margin-top:auto;

    display:inline-flex;

    align-items:center;

    gap:8px;

    color:#D4AF37;

    font-size:16px;

    font-weight:600;

    text-decoration:none;

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

}


/* ==================================
      SUPPORT LINK UNDERLINE
================================== */

.support-link::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-4px;

    width:0;

    height:2px;

    background:#D4AF37;

    transition:
        width .35s ease;

}


.support-link:hover{

    color:#12372A;

    text-decoration:none;

    transform:
        translateX(4px);

}


.support-link:hover::after{

    width:100%;

}


/* ==================================
      WHY US BANNER
================================== */

.why-banner{

    position:relative;

    width:100%;

    height:50vh;

    background:
        linear-gradient(
            rgba(11,31,26,.55),
            rgba(11,31,26,.55)
        ),
        url("../images/whyus.jpg");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    color:#FFFFFF;

    overflow:hidden;

    animation:
        whyBannerReveal 1s ease both;

}


/* ==================================
      BANNER BACKGROUND ZOOM
================================== */

.why-banner::before{

    content:"";

    position:absolute;

    inset:-5%;

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

    z-index:0;

    opacity:.20;

    transform:scale(1.05);

    animation:
        whyBannerZoom 15s ease-in-out infinite alternate;

}


/* ==================================
      BANNER GOLD GLOW
================================== */

.why-banner::after{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    left:50%;

    top:50%;

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

    background:
        radial-gradient(
            circle,
            rgba(212,175,55,.13),
            transparent 68%
        );

    pointer-events:none;

    animation:
        whyBannerGlow 6s ease-in-out infinite;

}


/* ==================================
      BACK BUTTON
================================== */

.back-arrow{

    position:absolute;

    top:30px;

    left:8%;

    z-index:5;

    display:flex;

    align-items:center;

    gap:8px;

    padding:10px 20px;

    background:#D4AF37;

    color:#12372A;

    text-decoration:none;

    font-size:16px;

    font-weight:600;

    border-radius:50px;

    box-shadow:
        0 8px 20px rgba(0,0,0,.15);

    transition:
        background .35s ease,
        color .35s ease,
        transform .35s ease,
        box-shadow .35s ease;

    animation:
        whyBackReveal .9s .25s ease both;

}


/* ==================================
      BACK BUTTON ICON
================================== */

.back-arrow i{

    transition:
        transform .35s ease;

}


/* ==================================
      BACK BUTTON HOVER
================================== */

.back-arrow:hover{

    background:#FFFFFF;

    color:#12372A;

    transform:
        translateX(6px);

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

}


.back-arrow:hover i{

    transform:
        translateX(-4px);

}


/* ==================================
      BANNER TEXT
================================== */

.why-banner h1{

    position:relative;

    z-index:2;

    font-size:60px;

    font-weight:700;

    margin-bottom:12px;

    text-shadow:
        0 0 18px rgba(0,0,0,.25);

    animation:
        whyBannerTitleReveal 1s .25s ease both;

}


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

@keyframes whyGlowMove{

    from{

        transform:
            translate3d(0,0,0);

    }

    to{

        transform:
            translate3d(120px,80px,0);

    }

}


@keyframes whyGlowMoveReverse{

    from{

        transform:
            translate3d(0,0,0);

    }

    to{

        transform:
            translate3d(-100px,-70px,0);

    }

}


@keyframes whyTitleReveal{

    from{

        opacity:0;

        transform:
            translateY(30px)
            scale(.97);

        letter-spacing:8px;

    }

    to{

        opacity:1;

        transform:
            translateY(0)
            scale(1);

        letter-spacing:normal;

    }

}


@keyframes whyDescriptionReveal{

    from{

        opacity:0;

        transform:
            translateY(20px);

    }

    to{

        opacity:1;

        transform:
            translateY(0);

    }

}


@keyframes whyCardReveal{

    from{

        opacity:0;

        transform:
            translateY(35px)
            scale(.97);

    }

    to{

        opacity:1;

        transform:
            translateY(0)
            scale(1);

    }

}


@keyframes whyBannerReveal{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}


@keyframes whyBannerZoom{

    from{

        transform:scale(1.05);

    }

    to{

        transform:scale(1.12);

    }

}


@keyframes whyBannerGlow{

    0%,
    100%{

        opacity:.4;

        transform:
            translate(-50%,-50%)
            scale(.9);

    }

    50%{

        opacity:.85;

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

    }

}


@keyframes whyBackReveal{

    from{

        opacity:0;

        transform:
            translateX(-25px);

    }

    to{

        opacity:1;

        transform:
            translateX(0);

    }

}


@keyframes whyBannerTitleReveal{

    from{

        opacity:0;

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

        letter-spacing:8px;

    }

    to{

        opacity:1;

        transform:
            translateY(0)
            scale(1);

        letter-spacing:normal;

    }

}


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

@media(max-width:768px){

    .why-us{

        padding:60px 6%;

    }


    .section-title{

        margin-bottom:40px;

    }


    .section-title h1{

        font-size:38px;

    }


    .section-title p{

        font-size:16px;

    }


    .why-container{

        gap:20px;

    }


    .why-card{

        padding:25px 20px;

        min-height:auto;

    }


    .why-icon{

        width:55px;

        height:55px;

        margin-bottom:15px;

    }


    .why-icon i{

        font-size:24px;

    }


    .why-card h3{

        font-size:20px;

        margin-bottom:12px;

    }


    .why-card p{

        font-size:15px;

        line-height:1.7;

    }


    .why-icon-wrap{

        gap:10px;

    }


    .support-status{

        font-size:12px;

        padding:5px 12px;

    }


    .why-banner{

        height:40vh;

    }


    .why-banner h1{

        font-size:42px;

    }


    .back-arrow{

        top:20px;

        left:20px;

        padding:8px 16px;

        font-size:14px;

    }

}


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

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

    .why-us::before,
    .why-us::after,
    .why-banner,
    .why-banner::before,
    .why-banner::after,
    .section-title h1,
    .section-title p,
    .why-card,
    .back-arrow,
    .why-banner h1{

        animation:none !important;

        transition:none !important;

    }

}