/* =======================================
   BANKING SOLUTIONS
======================================= */
/* ==========================================
   RESET
========================================== */

*,
*::before,
*::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

/* ==========================================
   PAGE
========================================== */

html{
    width:100%;
    max-width:100%;
    overflow-x:hidden !important;
    scroll-behavior:smooth;
}

body{
    width:100%;
    max-width:100%;
    min-height:100vh;
    overflow-x:hidden !important;
    position:relative;
    font-family:"Inter",sans-serif;
}

/* ==========================================
   MEDIA
========================================== */

img,
video,
canvas,
svg,
iframe{
    display:block;
    max-width:100%;
    height:auto;
}

/* ==========================================
   COMMON ELEMENTS
========================================== */



/* ==========================================
   CONTAINER
========================================== */



@media(max-width:768px){

    .container{
        padding-inline:18px;
    }

}

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

p,
h1,
h2,
h3,
h4,
h5,
h6,
a,
span{
    overflow-wrap:break-word;
    word-break:break-word;
}

table{
    width:100%;
    display:block;
    overflow-x:auto;
}

/* ==========================================
   FORM ELEMENTS
========================================== */



button{
    max-width:100%;
}

.banking-solutions {
    padding: 7rem 0;
    background: #ffffff;
}

.banking-solutions .container {
    width: min(1200px, 92%);
    margin: 0 auto;
}

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

.section-heading {
    max-width: 720px;
    margin: 0 auto 4rem;
    text-align: center;
}

.section-heading span {
    display: inline-block;

    margin-bottom: 1rem;

    color: #183261;
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.section-heading h2 {
    margin-bottom: 1.25rem;

    color: #07204A;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1.2;
}

.section-heading p {
    color: #5f6b7a;
    font-size: 1.05rem;
    line-height: 1.8;
}

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

.solutions-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

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

.solution-card {
    padding: 2.5rem;

    background: #ffffff;

    border: 1px solid #e8edf4;
    border-radius: 18px;

    transition: .35s ease;
}

.solution-card:hover {
    transform: translateY(-8px);

    border-color: #183261;

    box-shadow: 0 20px 45px rgba(7, 32, 74, .10);
}

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

.solution-icon {
    width: 72px;
    height: 72px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 1.75rem;

    border-radius: 18px;

    background: #eef4ff;
}

.solution-icon i {
    font-size: 1.8rem;
    color: #183261;
}

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

.solution-card h3 {
    margin-bottom: 1rem;

    color: #07204A;
    font-size: 1.35rem;
    font-weight: 700;
}

.solution-card p {
    margin-bottom: 2rem;

    color: #5f6b7a;
    line-height: 1.8;
}

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

.solution-card a {
    display: inline-flex;
    align-items: center;
    gap: .6rem;

    color: #183261;

    font-weight: 600;
    text-decoration: none;

    transition: .3s;
}

.solution-card a i {
    transition: .3s;
}

.solution-card:hover a {
    color: #07204A;
}

.solution-card:hover a i {
    transform: translateX(6px);
}

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

@media (max-width: 1024px) {

    .solutions-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}

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

@media (max-width: 768px) {

    .banking-solutions {
        padding: 5rem 0;
    }

    .section-heading {
        margin-bottom: 3rem;
    }

    .solutions-grid {
        grid-template-columns: 1fr;
    }

    .solution-card {
        padding: 2rem;
    }

}


/* =======================================
   WHY NORTHBRIDGE
======================================= */

.why-us{
    padding: 7rem 0;
    background: #f8fafc;
}

.why-us .container{
    width: min(1200px,92%);
    margin: 0 auto;
}

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

.why-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: center;
}

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

.why-image{
    position: relative;
    overflow: hidden;
    border-radius: 24px;
}

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

    transition: transform .6s ease;
}

.why-image:hover img{
    transform: scale(1.05);
}

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

.why-content{
    display: flex;
    flex-direction: column;
}

.section-tag{

    display:inline-block;

    margin-bottom:1rem;

    color:#183261;

    font-size:.9rem;

    font-weight:700;

    letter-spacing:.15em;

    text-transform:uppercase;
}

.why-content h2{

    margin-bottom:1.5rem;

    color:#07204A;

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

    line-height:1.2;
}

.why-content p{

    margin-bottom:2.5rem;

    color:#5f6b7a;

    line-height:1.9;

    font-size:1.05rem;
}

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

.why-features{

    display:grid;

    gap:1.25rem;

    margin-bottom:2.5rem;
}

.feature{

    display:flex;

    align-items:center;

    gap:1rem;

    padding:1rem 1.2rem;

    background:#ffffff;

    border:1px solid #e7edf5;

    border-radius:14px;

    transition:.35s ease;
}

.feature:hover{

    transform:translateX(10px);

    border-color:#183261;

    box-shadow:0 15px 35px rgba(7,32,74,.08);
}

.feature i{

    width:52px;

    height:52px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#eef4ff;

    color:#183261;

    font-size:1.2rem;

    transition:.35s ease;
}

.feature:hover i{

    background:#183261;

    color:#fff;

    transform:rotate(-10deg);
}

.feature span{

    color:#07204A;

    font-weight:600;
}

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

.why-content .btn{

    width:fit-content;
}

.why-content .btn i{

    margin-left:.6rem;

    transition:.3s;
}

.why-content .btn:hover i{

    transform:translateX(6px);
}

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

@media (max-width:992px){

    .why-grid{

        grid-template-columns:1fr;

        gap:3rem;
    }

    .why-image{

        order:-1;
    }

}

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

@media (max-width:768px){

    .why-us{

        padding:5rem 0;
    }

    .why-grid{

        gap:2.5rem;
    }

    .why-content{

        text-align:center;
    }

    .why-features{

        gap:1rem;
    }

    .feature{

        text-align:left;
    }

    .why-content .btn{

        width:100%;

        justify-content:center;
    }

}

/* =======================================
   DIGITAL BANKING
======================================= */

.digital-banking{
    padding: 7rem 0;
    background: #ffffff;
}

.digital-banking .container{
    width: min(1200px, 92%);
    margin: 0 auto;
}

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

.digital-grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5rem;
    align-items: center;
}

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

.digital-content{
    display: flex;
    flex-direction: column;
}

.digital-content h2{
    margin: 1rem 0 1.5rem;

    color: #07204A;

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

    line-height: 1.2;
}

.digital-content p{
    margin-bottom: 2.5rem;

    color: #5f6b7a;

    font-size: 1.05rem;

    line-height: 1.9;
}

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

.digital-features{
    display: grid;
    gap: 1rem;

    margin-bottom: 2.5rem;
}

.digital-item{
    display: flex;
    align-items: center;
    gap: 1rem;

    padding: 1rem 1.2rem;

    background: #f8fafc;

    border: 1px solid #e8edf4;

    border-radius: 14px;

    transition: .35s ease;
}

.digital-item:hover{

    transform: translateX(8px);

    border-color: #183261;

    box-shadow: 0 18px 35px rgba(7,32,74,.08);
}

.digital-item i{

    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #183261;

    color: #ffffff;

    font-size: .9rem;

    transition: .35s ease;
}

.digital-item:hover i{

    transform: rotate(360deg);

    background: #0b4da8;
}

.digital-item span{

    color: #07204A;

    font-weight: 600;
}

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

.digital-content .btn{

    width: fit-content;
}

.digital-content .btn i{

    margin-left: .6rem;

    transition: .35s ease;
}

.digital-content .btn:hover i{

    transform: translateX(6px);
}

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

.digital-image{

    display: flex;
    justify-content: center;
    align-items: center;
}

.digital-image img{

    width: 100%;
    max-width: 420px;

    transition: .5s ease;
}

.digital-image:hover img{

    transform: translateY(-12px) scale(1.03);
}

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

@media (max-width: 992px){

    .digital-grid{

        grid-template-columns: 1fr;

        gap: 4rem;
    }

    .digital-content{

        order: 2;

        text-align: center;
    }

    .digital-image{

        order: 1;
    }

    .digital-content .btn{

        margin: auto;
    }

}

@media (max-width: 768px){

    .digital-banking{

        padding: 5rem 0;
    }

    .digital-content p{

        font-size: 1rem;
    }

    .digital-item{

        text-align: left;
    }

    .digital-image img{

        max-width: 300px;
    }

}


/*=========================================
WHY CHOOSE NORTHBRIDGE
=========================================*/

.advantages{
    padding: 7rem 0;
    background: #f8fafc;
}

.advantages .container{
    width: min(1200px, 92%);
    margin: 0 auto;
}

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

.advantages .section-heading{
    max-width: 760px;
    margin: 0 auto 4rem;
    text-align: center;
}

.advantages .section-heading h2{
    margin: 1rem 0 1.25rem;
    font-size: clamp(2rem, 4vw, 3rem);
    color: #07204A;
    line-height: 1.2;
}

.advantages .section-heading p{
    color: #667085;
    line-height: 1.8;
    font-size: 1.05rem;
}

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

.advantages-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

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

.advantage-card{
    background: #ffffff;
    border: 1px solid #e6edf5;
    border-radius: 18px;
    padding: 2.5rem;
    transition: all .35s ease;
}

.advantage-card:hover{
    transform: translateY(-10px);
    border-color: #183261;
    box-shadow: 0 20px 45px rgba(7,32,74,.08);
}

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

.advantage-card i{
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 1.5rem;

    border-radius: 18px;

    background: #183261;
    color: #ffffff;

    font-size: 1.5rem;

    transition: .35s ease;
}

.advantage-card:hover i{
    background: #0b4da8;
    transform: rotate(8deg) scale(1.08);
}

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

.advantage-card h3{
    margin-bottom: 1rem;
    color: #07204A;
    font-size: 1.3rem;
}

.advantage-card p{
    color: #667085;
    line-height: 1.8;
    font-size: .98rem;
}

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

@media (max-width: 992px){

    .advantages-grid{
        grid-template-columns: repeat(2, 1fr);
    }

}

@media (max-width: 768px){

    .advantages{
        padding: 5rem 0;
    }

    .advantages-grid{
        grid-template-columns: 1fr;
    }

    .advantage-card{
        padding: 2rem;
    }

    .advantage-card i{
        width: 60px;
        height: 60px;
        font-size: 1.3rem;
    }

}

/*=========================================
HOW IT WORKS
=========================================*/

.how-it-works{
    padding: 7rem 0;
    background: #ffffff;
}

.how-it-works .container{
    width: min(1200px, 92%);
    margin: 0 auto;
}

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

.how-it-works .section-heading{
    max-width: 760px;
    margin: 0 auto 5rem;
    text-align: center;
}

.how-it-works .section-heading h2{
    margin: 1rem 0;
    font-size: clamp(2rem, 4vw, 3rem);
    color: #07204A;
    line-height: 1.2;
}

.how-it-works .section-heading p{
    color: #667085;
    line-height: 1.8;
}

/*=========================================
TIMELINE
=========================================*/

.steps{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
}

.step{
    flex: 1;
    text-align: center;
}

.step-number{

    width: 90px;
    height: 90px;

    margin: 0 auto 2rem;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #183261;
    color: #ffffff;

    font-size: 1.6rem;
    font-weight: 700;

    transition: .35s ease;
}

.step:hover .step-number{

    background: #0b4da8;

    transform: scale(1.08);
}

.step h3{

    margin-bottom: 1rem;

    color: #07204A;

    font-size: 1.35rem;
}

.step p{

    color: #667085;

    line-height: 1.8;
}

/*=========================================
CONNECTOR LINE
=========================================*/

.step-line{

    flex: .4;

    height: 2px;

    margin-top: 45px;

    background: linear-gradient(
        to right,
        #183261,
        #d9e4f2
    );
}

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

@media(max-width:992px){

    .steps{

        flex-direction: column;

        align-items: center;

        gap: 2rem;
    }

    .step{

        max-width: 500px;
    }

    .step-line{

        width: 2px;
        height: 60px;

        margin: 0;

        background: linear-gradient(
            to bottom,
            #183261,
            #d9e4f2
        );
    }

}

@media(max-width:768px){

    .how-it-works{

        padding: 5rem 0;
    }

    .step-number{

        width: 75px;
        height: 75px;

        font-size: 1.3rem;
    }

    .step h3{

        font-size: 1.2rem;
    }

}


/*=========================================
SECURITY & COMPLIANCE
=========================================*/

.security{
    padding: 7rem 0;
    background: #f8fafc;
}

.security .container{
    width: min(1200px, 92%);
    margin: 0 auto;
}

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

.security .section-heading{
    max-width: 760px;
    margin: 0 auto 5rem;
    text-align: center;
}

.security .section-heading h2{
    margin: 1rem 0;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.2;
    color: #07204A;
}

.security .section-heading p{
    color: #667085;
    line-height: 1.8;
}

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

.security-grid{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    border-top: 1px solid #dbe5f0;
    border-left: 1px solid #dbe5f0;
}

/*=========================================
ITEM
=========================================*/

.security-item{
    padding: 2.5rem;

    border-right: 1px solid #dbe5f0;
    border-bottom: 1px solid #dbe5f0;

    transition: .3s ease;
}

.security-item:hover{
    background: #ffffff;
}

.security-item h3{
    margin-bottom: 1rem;
    color: #07204A;
    font-size: 1.35rem;
    font-weight: 600;
}

.security-item p{
    color: #667085;
    line-height: 1.8;
}

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

.security-footer{
    margin-top: 4rem;
    text-align: center;
}

.security-footer .btn{
    display: inline-flex;
    align-items: center;
    gap: .75rem;
}

.security-footer .btn i{
    transition: .3s;
}

.security-footer .btn:hover i{
    transform: translateX(6px);
}

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

@media (max-width:992px){

    .security-grid{
        grid-template-columns: 1fr;
    }

    .security-item{
        padding: 2rem;
    }

}

@media (max-width:768px){

    .security{
        padding: 5rem 0;
    }

    .security .section-heading{
        margin-bottom: 3rem;
    }

    .security-item h3{
        font-size: 1.2rem;
    }

}



/*=========================================
BANKING CTA
=========================================*/

.banking-cta{

    padding:8rem 0;

    background:linear-gradient(
        135deg,
        #07204A 0%,
        #0B2D63 55%,
        #143D7A 100%
    );

    text-align:center;

    overflow:hidden;

    position:relative;
}

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

.banking-cta::before{

    content:"";

    position:absolute;

    width:500px;
    height:500px;

    border-radius:50%;

    background:rgba(255,255,255,.04);

    top:-220px;
    left:-180px;
}

.banking-cta::after{

    content:"";

    position:absolute;

    width:420px;
    height:420px;

    border-radius:50%;

    background:rgba(255,255,255,.03);

    bottom:-180px;
    right:-150px;
}

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

.banking-cta .container{

    position:relative;

    z-index:2;

    max-width:760px;
}

.banking-cta .section-tag{

    color:#D4AF37;

    border-color:rgba(255,255,255,.2);
}

.banking-cta h2{

    margin:1.5rem 0;

    color:#ffffff;

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

    line-height:1.15;
}

.banking-cta p{

    color:rgba(255,255,255,.82);

    font-size:1.1rem;

    line-height:1.9;

    margin-bottom:3rem;
}

/*=========================================
BUTTONS
=========================================*/

.cta-buttons{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:1.2rem;

    flex-wrap:wrap;
}

.btn-gold{

    background:#D4AF37;

    color:#07204A;

    padding:16px 34px;

    border-radius:50px;

    font-weight:600;

    transition:.35s;
}

.btn-gold:hover{

    transform:translateY(-4px);

    background:#E3BE4A;
}

.btn-gold i{

    margin-left:.6rem;

    transition:.3s;
}

.btn-gold:hover i{

    transform:translateX(6px);
}

.btn-outline-light{

    padding:16px 34px;

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

    color:#ffffff;

    border-radius:50px;

    transition:.35s;
}

.btn-outline-light:hover{

    background:#ffffff;

    color:#07204A;
}

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

@media(max-width:768px){

    .banking-cta{

        padding:6rem 0;
    }

    .banking-cta p{

        font-size:1rem;
    }

    .cta-buttons{

        flex-direction:column;
    }

    .btn-gold,
    .btn-outline-light{

        width:100%;
        max-width:320px;
        justify-content:center;
    }

}


/*=========================================
LATEST INSIGHTS
=========================================*/

.insights{
    padding: 7rem 0;
    background: #f8fafc;
}

.insights .container{
    width: min(1200px, 92%);
    margin: 0 auto;
}

/*=========================================
HEADER
=========================================*/

.insights-header{
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 2rem;
    margin-bottom: 4rem;
}

.insights-header h2{
    margin-top: 1rem;
    color: #07204A;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.2;
    max-width: 650px;
}

.view-all{
    display: inline-flex;
    align-items: center;
    gap: .7rem;

    color: #183261;
    font-weight: 600;
    text-decoration: none;

    transition: .3s ease;
}

.view-all:hover{
    gap: 1rem;
}

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

.insights-list{
    border-top: 1px solid #dfe6ef;
}

.insight-item{
    padding: 2.5rem 0;

    display: grid;
    grid-template-columns: 180px 1fr 170px;
    gap: 2rem;

    align-items: center;

    border-bottom: 1px solid #dfe6ef;

    transition: .3s ease;
}

.insight-item:hover{
    padding-left: 1rem;
}

.date{
    color: #7a8799;
    font-size: .95rem;
    font-weight: 500;
}

.insight-item h3{
    color: #07204A;
    font-size: 1.55rem;
    margin-bottom: .8rem;
    line-height: 1.4;
}

.insight-item p{
    color: #667085;
    line-height: 1.8;
}

.insight-item a{
    justify-self: end;

    display: inline-flex;
    align-items: center;
    gap: .6rem;

    color: #183261;
    font-weight: 600;
    text-decoration: none;

    transition: .3s ease;
}

.insight-item a:hover{
    gap: 1rem;
}

.insight-item a i{
    transition: .3s;
}

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

@media(max-width:992px){

    .insights-header{
        flex-direction: column;
        align-items: flex-start;
    }

    .insight-item{
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .insight-item a{
        justify-self: start;
    }

}

@media(max-width:768px){

    .insights{
        padding: 5rem 0;
    }

    .insight-item h3{
        font-size: 1.3rem;
    }

}



/*=========================================
CONTACT & SUPPORT
=========================================*/

.support{
    padding: 7rem 0;
    background: #f5f7fa;
}

.support .container{
    width: min(1200px, 92%);
    margin: 0 auto;
}

/*=========================================
HEADER
=========================================*/

.support .section-heading{
    max-width: 720px;
    margin: 0 auto 4rem;
    text-align: center;
}

.support .section-heading h2{
    margin: 1rem 0;
    color: #07204A;
    font-size: clamp(2.2rem,4vw,3.5rem);
    line-height: 1.2;
}

.support .section-heading p{
    color: #667085;
    line-height: 1.9;
    font-size: 1.05rem;
}

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

.support-grid{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 3rem;

    text-align: center;

    margin-bottom: 4rem;
}

.support-item{
    padding: 0 1rem;
}

.support-item span{
    display: block;

    margin-bottom: 1rem;

    color: #8b98ab;

    text-transform: uppercase;

    letter-spacing: 2px;

    font-size: .8rem;

    font-weight: 600;
}

.support-item h3{
    color: #07204A;
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.6;
}

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

.support-action{
    text-align: center;
}

.support-action .btn{
    display: inline-flex;
    align-items: center;
    gap: .75rem;
}

.support-action .btn i{
    transition: .3s ease;
}

.support-action .btn:hover i{
    transform: translateX(6px);
}

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

@media (max-width:768px){

    .support{
        padding: 5rem 0;
    }

    .support-grid{
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .support-item h3{
        font-size: 1.2rem;
    }

}

/*=========================================
SECURITY & FRAUD PROTECTION
=========================================*/

.security-section{
    padding: 7rem 0;
    background: #fff;
}

.security-section .container{
    width: min(1200px,92%);
    margin: 0 auto;
}

/*=========================================
HEADER
=========================================*/

.security-header{
    max-width: 760px;
    margin: 0 auto 5rem;
    text-align: center;
}

.security-header h2{
    margin: 1rem 0 1.5rem;
    color: #07204A;
    font-size: clamp(2.6rem,4vw,3.8rem);
    line-height: 1.15;
}

.security-header p{
    color: #667085;
    font-size: 1.08rem;
    line-height: 1.9;
}

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

.security-grid{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 2rem;
    margin-bottom: 5rem;
}

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

.security-card{

    position: relative;

    padding: 2.75rem 2rem;

    background: #fff;

    border: 1px solid #E5E7EB;

    border-radius: 24px;

    text-align: center;

    overflow: hidden;

    transition: all .35s ease;

    box-shadow: 0 15px 35px rgba(15,23,42,.05);

}

.security-card::before{

    content: "";

    position: absolute;

    inset: 0;

    height: 5px;

    background: linear-gradient(
        90deg,
        #07204A,
        #D4AF37
    );

    transform: scaleX(0);

    transform-origin: left;

    transition: .35s;

}

.security-card:hover{

    transform: translateY(-10px);

    border-color: rgba(212,175,55,.35);

    box-shadow: 0 25px 50px rgba(15,23,42,.10);

}

.security-card:hover::before{

    transform: scaleX(1);

}

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

.security-icon{

    width: 85px;
    height: 85px;

    margin: 0 auto 2rem;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: rgba(212,175,55,.10);

    color: #D4AF37;

    font-size: 2rem;

    transition: .35s ease;

}

.security-card:hover .security-icon{

    background: #D4AF37;

    color: #07204A;

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

}

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

.security-card h3{

    margin-bottom: 1rem;

    color: #07204A;

    font-size: 1.45rem;

}

.security-card p{

    color: #667085;

    line-height: 1.9;

}

/*=========================================
BOTTOM PANEL
=========================================*/

.security-bottom{

    padding: 4rem;

    text-align: center;

    border-radius: 30px;

    background: linear-gradient(
        135deg,
        #04152E,
        #07204A
    );

    position: relative;

    overflow: hidden;

}

.security-bottom::before{

    content: "";

    position: absolute;

    width: 320px;
    height: 320px;

    top: -150px;
    right: -120px;

    border-radius: 50%;

    background: rgba(255,255,255,.05);

}

.security-bottom>*{

    position: relative;
    z-index: 2;

}

.security-bottom h3{

    margin-bottom: 1rem;

    color: #fff;

    font-size: 2.1rem;

}

.security-bottom p{

    max-width: 720px;

    margin: 0 auto 2rem;

    color: rgba(255,255,255,.82);

    line-height: 1.9;

}

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

.security-bottom .btn{

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

    padding: 1rem 2.5rem;

    border-radius: 999px;

    background: #D4AF37;

    color: #07204A;

    text-decoration: none;

    font-weight: 600;

    transition: .35s ease;

}

.security-bottom .btn:hover{

    background: #E6C24B;

    transform: translateY(-4px);

    box-shadow: 0 15px 35px rgba(212,175,55,.30);

}

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

@media (max-width:1100px){

    .security-grid{

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

    }

}

@media (max-width:768px){

    .security-section{

        padding: 5rem 0;

    }

    .security-header{

        margin-bottom: 3.5rem;

    }

    .security-header h2{

        font-size: 2.3rem;

    }

    .security-grid{

        grid-template-columns: 1fr;

    }

    .security-bottom{

        padding: 2.5rem;

    }

    .security-bottom h3{

        font-size: 1.8rem;

    }

}

@media (max-width:480px){

    .security-card{

        padding: 2rem 1.5rem;

    }

    .security-icon{

        width: 72px;
        height: 72px;

        font-size: 1.8rem;

    }

    .security-card h3{

        font-size: 1.3rem;

    }

}


/*=========================================
BANKING BY THE NUMBERS
=========================================*/

.numbers-section{
    padding: 7rem 0;
    background: #F8FAFC;
}

.numbers-section .container{
    width: min(1200px,92%);
    margin: 0 auto;
}

/*=========================================
HEADER
=========================================*/

.numbers-header{
    max-width: 760px;
    margin: 0 auto 5rem;
    text-align: center;
}

.numbers-header h2{
    margin: 1rem 0 1.5rem;
    color: #07204A;
    font-size: clamp(2.6rem,4vw,3.8rem);
    line-height: 1.15;
}

.numbers-header p{
    color: #667085;
    font-size: 1.08rem;
    line-height: 1.9;
}

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

.numbers-grid{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 2rem;
}

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

.number-card{

    position: relative;

    padding: 3rem 2rem;

    text-align: center;

    background: #fff;

    border: 1px solid #E5E7EB;

    border-radius: 24px;

    overflow: hidden;

    transition: all .35s ease;

    box-shadow: 0 15px 35px rgba(15,23,42,.05);

}

.number-card::before{

    content: "";

    position: absolute;

    inset: 0;

    background: linear-gradient(
        135deg,
        rgba(212,175,55,.04),
        rgba(7,32,74,.03)
    );

    opacity: 0;

    transition: .35s;

}

.number-card:hover{

    transform: translateY(-10px);

    border-color: rgba(212,175,55,.35);

    box-shadow: 0 25px 55px rgba(15,23,42,.10);

}

.number-card:hover::before{

    opacity: 1;

}

.number-card > *{

    position: relative;

    z-index: 2;

}

/*=========================================
NUMBER
=========================================*/

.number-card h3{

    margin-bottom: .75rem;

    color: #D4AF37;

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

    font-weight: 700;

    line-height: 1;

}

.number-card p{

    color: #07204A;

    font-size: 1.05rem;

    font-weight: 600;

    line-height: 1.7;

}

/*=========================================
HOVER EFFECT
=========================================*/

.number-card:hover h3{

    transform: scale(1.08);

    transition: .35s;

}

.number-card:hover p{

    color: #0B2C5E;

}

/*=========================================
OPTIONAL DECORATIVE CIRCLE
=========================================*/

.number-card::after{

    content: "";

    position: absolute;

    width: 130px;
    height: 130px;

    right: -60px;
    bottom: -60px;

    border-radius: 50%;

    background: rgba(212,175,55,.06);

}

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

@media (max-width:992px){

    .numbers-grid{

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

    }

}

@media (max-width:768px){

    .numbers-section{

        padding: 5rem 0;

    }

    .numbers-header{

        margin-bottom: 3.5rem;

    }

    .numbers-header h2{

        font-size: 2.3rem;

    }

}

@media (max-width:576px){

    .numbers-grid{

        grid-template-columns: 1fr;

    }

    .number-card{

        padding: 2.5rem 2rem;

    }

    .number-card h3{

        font-size: 2.6rem;

    }

}


/*=========================================
FINANCIAL INSIGHTS
=========================================*/

.insights-section{
    padding: 7rem 0;
    background: #fff;
}

.insights-section .container{
    width: min(1200px,92%);
    margin: 0 auto;
}

/*=========================================
HEADER
=========================================*/

.insights-header{
    max-width: 760px;
    margin: 0 auto 5rem;
    text-align: center;
}

.insights-header h2{
    margin: 1rem 0 1.5rem;
    color: #07204A;
    font-size: clamp(2.6rem,4vw,3.8rem);
    line-height: 1.15;
}

.insights-header p{
    color: #667085;
    font-size: 1.08rem;
    line-height: 1.9;
}

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

.insights-grid{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 2rem;
    margin-bottom: 4rem;
}

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

.insight-card{

    position: relative;

    padding: 2.5rem;

    background: #fff;

    border: 1px solid #E5E7EB;

    border-radius: 24px;

    overflow: hidden;

    transition: all .35s ease;

    box-shadow: 0 15px 35px rgba(15,23,42,.05);

}

.insight-card::before{

    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 5px;

    background: linear-gradient(
        90deg,
        #07204A,
        #D4AF37
    );

    transform: scaleX(0);

    transform-origin: left;

    transition: .35s;

}

.insight-card:hover{

    transform: translateY(-10px);

    border-color: rgba(212,175,55,.35);

    box-shadow: 0 25px 55px rgba(15,23,42,.10);

}

.insight-card:hover::before{

    transform: scaleX(1);

}

/*=========================================
CATEGORY TAG
=========================================*/

.article-tag{

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

    padding: .55rem 1rem;

    margin-bottom: 1.5rem;

    border-radius: 999px;

    background: rgba(212,175,55,.12);

    color: #D4AF37;

    font-size: .8rem;
    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;

}

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

.insight-card h3{

    margin-bottom: 1rem;

    color: #07204A;

    font-size: 1.5rem;

    line-height: 1.4;

}

.insight-card p{

    margin-bottom: 2rem;

    color: #667085;

    line-height: 1.9;

}

/*=========================================
READ MORE LINK
=========================================*/

.insight-card a{

    display: inline-flex;
    align-items: center;
    gap: .6rem;

    text-decoration: none;

    color: #07204A;

    font-weight: 600;

    transition: .3s;

}

.insight-card a i{

    transition: .3s;

}

.insight-card:hover a{

    color: #D4AF37;

}

.insight-card:hover a i{

    transform: translateX(6px);

}

/*=========================================
BOTTOM BUTTON
=========================================*/

.insights-action{

    text-align: center;

}

.insights-action .btn{

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

    padding: 1rem 2.5rem;

    border: 2px solid #07204A;

    border-radius: 999px;

    background: transparent;

    color: #07204A;

    text-decoration: none;

    font-weight: 600;

    transition: .35s ease;

}

.insights-action .btn:hover{

    background: #07204A;

    color: #fff;

    transform: translateY(-4px);

}

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

@media (max-width:1100px){

    .insights-grid{

        grid-template-columns: 1fr;

    }

}

@media (max-width:768px){

    .insights-section{

        padding: 5rem 0;

    }

    .insights-header{

        margin-bottom: 3.5rem;

    }

    .insights-header h2{

        font-size: 2.3rem;

    }

    .insight-card{

        padding: 2rem;

    }

}

@media (max-width:480px){

    .insight-card h3{

        font-size: 1.35rem;

    }

    .article-tag{

        font-size: .75rem;

    }

}

/*=========================================
LEADERSHIP & TRUST
=========================================*/

.trust-section{
    padding: 7rem 0;
    background: linear-gradient(to bottom,#ffffff,#f8fafc);
    overflow: hidden;
}

.trust-section .container{
    width: min(1200px,92%);
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1.2fr .9fr;
    gap: 4rem;
    align-items: center;
}

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

.trust-content h2{
    margin: 1rem 0 1.5rem;
    color: #07204A;
    font-size: clamp(2.5rem,4vw,3.8rem);
    line-height: 1.15;
}

.trust-content p{
    color: #667085;
    line-height: 1.9;
    font-size: 1.08rem;
    margin-bottom: 2.5rem;
    max-width: 620px;
}

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

.trust-content .btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 1rem 2.4rem;

    background: #07204A;
    color: #fff;

    text-decoration: none;

    border-radius: 999px;

    font-weight: 600;

    transition: .35s ease;
}

.trust-content .btn:hover{

    background: #D4AF37;
    color: #07204A;

    transform: translateY(-4px);

    box-shadow: 0 15px 35px rgba(212,175,55,.30);

}

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

.trust-box{

    position: relative;

    background: #fff;

    border: 1px solid #E5E7EB;

    border-radius: 28px;

    padding: 3rem;

    box-shadow: 0 20px 50px rgba(15,23,42,.06);

    overflow: hidden;

    transition: .35s ease;

}

.trust-box::before{

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 6px;

    background: linear-gradient(
        90deg,
        #07204A,
        #D4AF37
    );

}

.trust-box:hover{

    transform: translateY(-10px);

    box-shadow: 0 30px 60px rgba(15,23,42,.10);

}

.trust-box h3{

    color: #07204A;

    font-size: 1.8rem;

    margin-bottom: 2rem;

}

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

.trust-box ul{

    list-style: none;

    padding: 0;
    margin: 0;

}

.trust-box li{

    display: flex;
    align-items: center;

    gap: 1rem;

    padding: 1rem 0;

    color: #344054;

    font-size: 1.05rem;

    border-bottom: 1px solid #EEF2F6;

}

.trust-box li:last-child{

    border-bottom: none;

}

.trust-box li i{

    width: 38px;
    height: 38px;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(212,175,55,.12);

    color: #D4AF37;

    font-size: .95rem;

    flex-shrink: 0;

    transition: .35s;

}

.trust-box:hover li i{

    background: #D4AF37;

    color: #07204A;

}

/*=========================================
DECORATION
=========================================*/

.trust-box::after{

    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    border-radius: 50%;

    background: rgba(212,175,55,.05);

    right: -90px;
    bottom: -90px;

}

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

@media (max-width:992px){

    .trust-section .container{

        grid-template-columns: 1fr;

        gap: 3rem;

    }

    .trust-content{

        text-align: center;

    }

    .trust-content p{

        margin-inline: auto;

    }

}

@media (max-width:768px){

    .trust-section{

        padding: 5rem 0;

    }

    .trust-content h2{

        font-size: 2.3rem;

    }

    .trust-box{

        padding: 2.3rem;

    }

    .trust-box h3{

        font-size: 1.55rem;

    }

}

@media (max-width:480px){

    .trust-box{

        padding: 2rem 1.5rem;

    }

    .trust-box li{

        font-size: .98rem;

        align-items: flex-start;

    }

    .trust-box li i{

        width: 34px;
        height: 34px;
    }

}