/*==================================================
BANKING HERO
==================================================*/

.industry-banking-hero{

    background:#050708;

}

.industry-banking-banner{

    position:relative;

    height:500px;

    overflow:hidden;

}

.industry-banking-bg{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center;

}

.industry-banking-overlay{

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.62) 0%,
            rgba(0,0,0,.18) 45%,
            rgba(0,0,0,.45) 100%
        );

}

.industry-banking-overlay .container{

    height:100%;

    display:flex;

    align-items:center;

}

.industry-banking-content{

    max-width:100%;

}

.industry-banking-content h1{

    margin:0;

    line-height:1.08;

    font-weight:normal;

}

.industry-banking-content span{

    display:block;

    margin-bottom:10px;

    color:#64d741;

    font-size:var(--fs-5xl);

    font-weight:normal;

}

.industry-banking-content strong{

    display:block;

    color:#ffffff;

    font-size:var(--fs-5xl);

    font-weight:normal;

}

/*==================================================
Responsive
==================================================*/

@media(max-width:1199px){

    .industry-banking-banner{

        height:440px;

    }

    .industry-banking-content span,

    .industry-banking-content strong{

        font-size:50px;
        font-weight:normal;

    }

}

@media(max-width:991px){

    .industry-banking-banner{

        height:360px;

    }

    .industry-banking-content{

        max-width:100%;

    }

    .industry-banking-content span,

    .industry-banking-content strong{

        font-size:var(--fs-lg);
        font-weight:normal;

    }

}

@media(max-width:767px){

    .industry-banking-banner{

        height:280px;

    }

    .industry-banking-overlay{

        background:
            linear-gradient(
                90deg,
                rgba(0,0,0,.75),
                rgba(0,0,0,.35)
            );

    }

    .industry-banking-content{

        text-align:left;

    }

    .industry-banking-content span,

    .industry-banking-content strong{

        font-size:var(--fs-2xl);

        line-height:1.2;
        font-weight:normal;

    }

}


/*==================================================
BANKING INTRO
==================================================*/

.industry-banking-intro{

    position:relative;

    background:#000;

    padding:90px 0 110px;

    overflow:hidden;

    box-shadow:
        inset 0 180px 180px -120px rgba(0,192,131,.18),
        inset 0 -180px 180px -120px rgba(0,192,131,.18);

}

/*=====================================
Content
=====================================*/

.industry-banking-intro-content{

    position:relative;

    z-index:5;

    /* max-width:1180px; */

    margin:auto;

}

.industry-banking-intro-content p span{

    color:#64d741;

    font-size:var(--fs-xl);

    line-height:1.6;

    font-weight:normal;

    margin:0 0 35px;

}

.industry-banking-intro-content p{

    color:#ffffff;

    font-size:var(--fs-lg);

    line-height:1.6;

    font-weight:normal;

    margin:0 0 35px;

    text-align:left;

}

.industry-banking-intro-content p:last-child{

    margin-bottom:0;

}

/*==================================================
Responsive
==================================================*/

@media(max-width:1199px){

    .industry-banking-intro-content p{

        font-size:24px;

    }

}

@media(max-width:991px){

    .industry-banking-intro{

        padding:70px 0;

    }

    .industry-banking-intro-content p{

        font-size:20px;

        line-height:1.7;

        margin-bottom:28px;

    }

}

@media(max-width:767px){

    .industry-banking-intro{

        padding:55px 0;

    }

    .industry-banking-intro-content{

        text-align:center;

    }

    .industry-banking-intro-content p{

        font-size:16px;

        line-height:1.8;

        margin-bottom:22px;

    }

}



/* services aree */

/*==================================================
BANKING SERVICES
==================================================*/

.banking-services{

    position:relative;

    padding:120px 0;

    background:#001c1d;

    overflow:hidden;

    box-shadow:
        inset 0 180px 180px -120px rgba(1,45,46,0.5),
        inset 0 -180px 180px -120px rgba(0,28,29,0.5);

}

/*==================================================
MESH
==================================================*/

.banking-services-mesh-left{

    position:absolute;

    left:-180px;

    top:-70px;

    width:560px;

    opacity:.28;

    pointer-events:none;

}

.banking-services-mesh-right{

    position:absolute;

    right:-180px;

    top:-30px;

    width:520px;

    opacity:.28;

    pointer-events:none;

}

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

.banking-services-heading{

    margin-bottom:55px;
    text-align:center;

}

.banking-services-heading h2{

    margin:0;

    color:#fff;

    font-size:var(--fs-5xl);

    font-weight:300;

    line-height:1.2;

}

.banking-services-heading span{

    color:#80ce0a;

}

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

.banking-left-column{

    display:flex;

    flex-direction:column;

    gap:14px;

    height:100%;

}

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

.banking-card{

    border-radius:16px;

    padding:40px;

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

    transition:.35s;

    overflow:hidden;

    position:relative;

}

.banking-card:hover{

    transform:translateY(-6px);

}

/*==================================================
CHALLENGE
==================================================*/

.banking-challenge{

    background:#133421;

    min-height:275px;

}

/*==================================================
SOLUTION
==================================================*/

.banking-solution{

    flex:1;

    background:#192521;

}

/*==================================================
OUTCOME
==================================================*/

.banking-outcome{

    height:100%;

    min-height:100%;

    background:

        linear-gradient(
            135deg,
            #028e69 0%,
            #065447 35%,
            #052929 100%
        );

}

/*==================================================
HEADINGS
==================================================*/

.banking-card h3{

    margin:0 0 28px;

    color:#02bd88;

    font-size:var(--fs-xl);

    font-weight:normal;

}

.banking-solution h3{

    margin:0 0 28px;

    color:#92cd41;

    font-size:var(--fs-xl);

    font-weight:normal;

}

.banking-outcome h3{

    margin:0 0 28px;

    color:#ffffff;

    font-size:var(--fs-xl);

    font-weight:normal;

}

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

.banking-card p{

    color:#fff;

    font-size:var(--fs-md);

    line-height:1.45;

    margin:0 0 28px;

    font-weight:normal;

}

.banking-card p:last-child{

    margin-bottom:0;

}

.banking-card strong{

    color:#fff;

    font-weight:600;

}

/*==================================================
OUTCOME LIST
==================================================*/

.banking-outcome ul{

    margin:0;

    padding:0;

    list-style:none;

}

.banking-outcome li{

    position:relative;

    padding-left:52px;

    margin-bottom:28px;

    color:#fff;

    font-size:var(--fs-md);

    line-height:1.45;

    font-weight:normal;

}

.banking-outcome li:last-child{

    margin-bottom:0;

}

/*==================================================
GREEN TICK
==================================================*/

.banking-outcome li::before{

    content:"✓";

    position:absolute;

    left:0;

    top:2px;

    width:28px;

    height:28px;

    border-radius:50%;

    background:#00b96d;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:15px;

    font-weight:700;

    box-shadow:

        0 0 0 3px rgba(0,185,109,.18),

        0 0 18px rgba(0,185,109,.35);

}

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

@media(max-width:1199px){

    .banking-services-heading h2{

        font-size:46px;

    }

}

@media(max-width:991px){

    .banking-services{

        padding:80px 0;

    }

    .banking-services-heading{

        margin-bottom:35px;

    }

    .banking-services-heading h2{

        font-size:38px;

    }

    .banking-left-column{

        margin-bottom:20px;

    }

    .banking-card{

        padding:30px;

    }

    .banking-card h3{

        font-size:20px;

    }

    .banking-card p,

    .banking-outcome li{

        font-size:16px;

    }

}

@media(max-width:767px){

    .banking-services{

        padding:60px 0;

    }

    .banking-services-heading h2{

        font-size:30px;

        line-height:1.3;

    }

    .banking-card{

        padding:24px;

        border-radius:14px;

    }

    .banking-card h3{

        margin-bottom:18px;

        font-size:20px;

    }

    .banking-card p{

        font-size:15px;

        margin-bottom:18px;

    }

    .banking-outcome li{

        font-size:15px;

        padding-left:42px;

        margin-bottom:20px;

    }

    .banking-outcome li::before{

        width:24px;

        height:24px;

        font-size:13px;

    }

    .banking-challenge{

        min-height:auto;

    }

    .banking-services-mesh-left,

    .banking-services-mesh-right{

        width:300px;

        opacity:.15;

    }

}


/* why */

/*==================================================
BANKING BENEFITS
==================================================*/

.banking-benefits{

    position:relative;

    padding:120px 0;

    background:#000;

    overflow:hidden;

    box-shadow:
        inset 0 180px 180px -120px rgba(0,192,131,.18),
        inset 0 -180px 180px -120px rgba(0,192,131,.18);

}

.banking-benefits-mesh-left{

    position:absolute;

    left:-180px;

    bottom:-80px;

    width:560px;

    opacity:.25;

    pointer-events:none;

}

.banking-benefits-heading h2{

    color:#fff;

    font-size:var(--fs-5xl);

    font-weight:300;

    text-align:center;

}

.banking-benefits-heading span{

    color:#80ce0a;

}

/*====================================*/

.benefit-card{

    position:relative;

    height:100%;

    padding:34px 34px 30px;

    border-radius:16px;

    overflow:hidden;

    border:1px solid rgba(0,192,131,.15);

    background:

        linear-gradient(
            90deg,
            #0b8f73 0%,
            #064c45 55%,
            #032f33 100%
        );

    transition:.35s;

}

.benefit-card:hover{

    transform:translateY(-8px);

    box-shadow:
        0 25px 60px rgba(0,192,131,.18);

}

.benefit-icon{

    position:absolute;

    top:28px;

    right:28px;

    width:58px;

}

/*====================================*/

.benefit-card h3{

    max-width:75%;

    color:#fff;

    font-size:var(--fs-2xl);

    font-weight:normal;

    line-height:1.2;

    margin-bottom:22px;

}

.benefit-card h5{

    color:#92cd3f;

    font-size:var(--fs-lg);

    font-weight:normal;

    line-height:1.35;

    margin-bottom:12px;

}

.benefit-card ul{

    margin:0;

    padding-left:22px;

}

.benefit-card li{

    color:#fff;

    font-size:var(--fs-lg);

    line-height:1.45;

    margin-bottom:12px;
    font-weight: normal;

}

/*====================================*/

@media(max-width:991px){

    .banking-benefits{

        padding:80px 0;

    }

    .banking-benefits-heading h2{

        font-size:40px;

    }

}

@media(max-width:767px){

    .banking-benefits{

        padding:60px 0;

    }

    .banking-benefits-heading h2{

        font-size:30px;

        line-height:1.3;

    }

    .benefit-card{

        padding:24px;

    }

    .benefit-icon{

        width:44px;

        top:20px;

        right:20px;

    }

    .benefit-card h3{

        font-size:24px;

        max-width:100%;

    }

    .benefit-card h5{

        font-size:17px;

    }

    .benefit-card li{

        font-size:15px;

    }

}