/* ==========================================================
   BELGRAVE PRIVATE BANK
   DIGITAL BANKING LAYOUT
========================================================== */


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

.banking-preview{

    position:relative;

    display:grid;

    grid-template-columns:1.05fr .95fr;

    align-items:center;

    gap:clamp(4rem,6vw,5.6rem);

    padding:clamp(6rem,9vw,9rem) 8%;

    overflow:hidden;

    background:
        radial-gradient(circle at 85% 20%,rgba(169,124,43,.08),transparent 42%),
        linear-gradient(180deg,#0B0B0D,#111214);

}


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

.banking-left{

    position:relative;

    z-index:2;

    max-width:620px;

}


.banking-left h2{

    margin:1.5rem 0;

    font-size:clamp(2.2rem,4vw,3.5rem);

    line-height:1.12;

    letter-spacing:-.03em;

}


.banking-left p{

    max-width:560px;

    margin-bottom:2.6rem;

    line-height:1.9;

}


/* ==========================================================
   FEATURES
========================================================== */

.bank-features{

    display:grid;

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

    gap:1.1rem 1.8rem;

    margin:0 0 2.6rem;

    padding:0;

    list-style:none;

}


.bank-features li{

    display:flex;

    align-items:center;

    gap:.75rem;

}


/* ==========================================================
   SHOWCASE
========================================================== */

.banking-right{

    position:relative;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:50px;

    min-height:850px;

}


.screen-card{

    position:relative;

    width:420px;

    z-index:2;

}


.cards-fan{

    position:absolute;

    top:110px;

    right:-30px;

    width:520px;

    height:420px;

    pointer-events:none;

    z-index:3;

}


.banking-image{

    width:100%;

    max-width:520px;

    border-radius:22px;

    overflow:hidden;

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

}


.banking-image img{

    display:block;

    width:100%;

    height:auto;

}

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

@media (max-width:1200px){

    .banking-preview{

        grid-template-columns:1fr;

        text-align:center;

    }

    .banking-left{

        margin-inline:auto;

    }

    .banking-left p{

        margin-inline:auto;

    }

    .bank-features{

        max-width:650px;

        margin:0 auto 2.5rem;

    }

}


@media (max-width:992px){

    .banking-preview{

        padding:clamp(5rem,8vw,7rem) 6%;

    }

    .cards-showcase{

        max-width:500px;

    }

}


@media (max-width:768px){

    .banking-preview{

        padding:5rem 24px;

        gap:3.5rem;

    }

    .bank-features{

        grid-template-columns:1fr;

        text-align:left;

    }

    .banking-right{

        min-height:440px;

    }

    .cards-showcase{

        max-width:380px;

    }

}


@media (max-width:480px){

    .banking-preview{

        padding:4.5rem 18px;

    }

    .banking-left h2{

        line-height:1.2;

    }

    .banking-left p{

        font-size:.96rem;

    }

    .banking-right{

        min-height:360px;

    }

    .cards-showcase{

        max-width:320px;

    }

}
/* ==========================================================
   DIGITAL BANKING SECTION
========================================================== */

.digital-banking-section{

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:90px;

    padding:120px 8%;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(212,175,55,.08),
            transparent 40%
        ),
        linear-gradient(
            180deg,
            #080b12,
            #111827
        );

}


/* ==========================================================
   LEFT
========================================================== */

.digital-left{

    max-width:620px;

}

.digital-left h2{

    margin:20px 0;

    font-family:"Playfair Display",serif;

    font-size:clamp(2.5rem,4vw,4rem);

    line-height:1.1;

}

.digital-left p{

    line-height:1.9;

    margin-bottom:40px;

}

.digital-features{

    display:grid;

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

    gap:18px 30px;

    list-style:none;

    padding:0;

    margin-bottom:40px;

}

.digital-features li{

    display:flex;

    align-items:center;

    gap:12px;

}

.digital-features i{

    color:#d4af37;

}


/* ==========================================================
   RIGHT IMAGE
========================================================== */

.banking-right{

    display:flex;

    justify-content:center;

    align-items:center;

}

.banking-image{

    width:100%;

    max-width:620px;

    border-radius:26px;

    overflow:hidden;

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

}

.banking-image img{

    display:block;

    width:100%;

    height:auto;

}


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

@media (max-width:992px){

    .digital-banking-section{

        grid-template-columns:1fr;

        text-align:center;

    }

    .digital-left{

        margin:auto;

    }

    .digital-features{

        grid-template-columns:1fr;

        text-align:left;

    }

    .banking-right{

        margin-top:50px;

    }

}


@media (max-width:768px){

    .digital-banking-section{

        padding:80px 24px;

        gap:60px;

    }

    .banking-image{

        max-width:460px;

    }

}


@media (max-width:480px){

    .digital-banking-section{

        padding:70px 18px;

    }

    .digital-left h2{

        font-size:2.2rem;

    }

}