/*=====================================================
PURPOSE
Global Payments Intelligence Repository
======================================================*/

.purpose{

    padding: var(--space-xxl) 0;

    background: var(--hero-light-bg);

}
/*=====================================================
PURPOSE HEADER
======================================================*/

.purpose-header{

    max-width:820px;

    margin:0 auto 70px;

    text-align:center;

}

.purpose-grid{

    display:grid;

    grid-template-columns:1.4fr .9fr;

    gap:80px;

    align-items:center;
}


.purpose-left{

    max-width:720px;

}

.purpose h2{

    margin-bottom:28px;

    font-size:var(--fs-section-heading);

    color:var(--hero-navy);

}

.purpose p{

    margin-bottom:22px;

    color:var(--hero-light-body);

    line-height:1.9;

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

    text-align:justify;

    text-align-last:left;

}

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

.framework-card{

    background:var(--hero-light-card);

    border:1px solid var(--hero-light-border);

    border-radius:var(--radius-xl);

    padding:40px;

    box-shadow:0 4px 16px rgba(15,39,71,.05);

}

.framework-card h3{

    margin-bottom:30px;

    color:var(--hero-navy);

    text-align:center;

}

.framework-list{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.framework-item{

    display:flex;

    align-items:center;

    gap:18px;

}

.framework-icon{

    width:46px;

    height:46px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--hero-gold);

    color:var(--hero-navy);

    font-weight:700;

    flex-shrink:0;

}

.framework-text h4{

    margin:0;

    color:var(--hero-navy);

}

.framework-text p{

    margin-top:4px;

    font-size:14px;

    color:var(--hero-light-body);

}

.framework-line{

    width:2px;

    height:22px;

    background:var(--hero-gold);

    margin:0 auto;

}

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

@media(max-width:992px){

.purpose-grid{

grid-template-columns:1fr;

gap:50px;

}

.framework-card{

max-width:600px;

margin:auto;

}

}

@media(max-width:768px){

.purpose{

padding:var(--space-xl) 0;

}

.framework-card{

padding:28px;

}

}