/* ==========================================================
   BELGRAVE PRIVATE BANK
   DIGITAL SECURITY
========================================================== */


.security-section{

    padding:140px 8%;

    background:
        linear-gradient(
            135deg,
            #07111f,
            #0c1b30
        );

    color:white;

}


.security-section .section-heading{

    max-width:760px;

    margin-bottom:70px;

}


.security-section .section-tag{

    display:inline-block;

    color:#d4af37;

    font-size:12px;

    letter-spacing:3px;

    font-weight:600;

    margin-bottom:20px;

}


.security-section h2{

    font-family:"Playfair Display",serif;

    font-size:clamp(36px,4vw,56px);

    margin-bottom:25px;

}


.security-section p{

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

    line-height:1.8;

    font-size:17px;

}


/* SECURITY CARDS */

.security-grid{

    display:grid;

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

    gap:35px;

}


.security-card{

    padding:45px 35px;

    background:

    linear-gradient(
        145deg,
        rgba(255,255,255,.08),
        rgba(255,255,255,.02)
    );

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

    border-radius:24px;

    backdrop-filter:blur(15px);

    transition:.35s ease;

}


.security-card:hover{

    transform:translateY(-10px);

    border-color:#d4af37;

}


.security-card i{

    font-size:38px;

    color:#d4af37;

    margin-bottom:25px;

}


.security-card h3{

    font-size:24px;

    margin-bottom:15px;

    font-family:"Playfair Display",serif;

}


.security-card p{

    font-size:15px;

}


/* RESPONSIVE */

@media(max-width:900px){

    .security-grid{

        grid-template-columns:1fr;

    }

}
/* ==========================================================
   SECURITY HEADING FIX
========================================================== */

.security-section .section-heading{
    position:relative;
    z-index:2;
}


.security-section .section-heading h2{
    position:relative;
    z-index:3;
    color:#ffffff;
    display:block;
}


.security-section .section-heading p{
    position:relative;
    z-index:3;
    color:rgba(255,255,255,.75);
}
.security-image{

    width:100%;

    height:180px;

    object-fit:cover;

    border-radius:18px;

    margin-bottom:25px;

}