/*==================================================
SECTION 7 : OUR APPROACH
==================================================*/

.our-approach{
    padding:28px 0 36px;
    background:#FAFBFD;
    position:relative;
    overflow:hidden;
}

.our-approach .section-header{
    text-align:center;
    max-width:1000px;
    margin:0 auto 22px;
}

.our-approach .section-header h2,
.our-approach .section-header h3{
    color:#D62828;
    font-weight:700;
    text-align:center;
}

.our-approach .section-header h2{
    margin:0 0 8px;
    font-size:clamp(2rem, 3vw, 2.75rem);
    line-height:1.1;
}

.our-approach .section-header h3{
    margin:0 0 10px;
    font-size:clamp(1.25rem, 1.8vw, 1.65rem);
    line-height:1.15;
}

.our-approach .section-header p{
    max-width:980px;
    margin:0 auto 8px;
    font-size:clamp(.98rem, 1.05vw, 1.05rem);
    line-height:1.65;
}

/*==================================================
PROCESS FLOW
==================================================*/

.approach-process{

    display:grid;

    grid-template-columns:repeat(4,minmax(0,1fr));

    gap:20px;

    margin:28px 0 30px;

    position:relative;

}


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

.approach-step{

    position:relative;

    background:#ffffff;

    border:1px solid #E5EBF2;

    border-radius:18px;

    padding:18px 16px 20px;

    text-align:center;

    box-shadow:0 10px 28px rgba(14,73,124,.08);

    transition:.35s ease;

    min-height:220px;

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

    align-items:center;

}


.approach-step:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 40px rgba(14,73,124,.15);

}


/*==================================================
ARROW BETWEEN CARDS
==================================================*/

.approach-step:not(:last-child)::after{

    content:"➜";

    position:absolute;

    top:50%;

    right:-26px;

    transform:translateY(-50%);

    width:42px;

    height:42px;

    border-radius:50%;

    background:#0E497C;

    color:#ffffff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:18px;

    font-weight:700;

    box-shadow:0 8px 20px rgba(14,73,124,.18);

    z-index:50;

}


/*==================================================
STEP BADGE
==================================================*/

.step-badge{

    display:inline-block;

    padding:6px 14px;

    border-radius:999px;

    color:#fff;

    font-size:.76rem;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:14px;

}


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

.step-icon{

    width:68px;

    margin-bottom:12px;

}


.step-icon img{

    width:100%;

    display:block;

}


/*==================================================
TITLE
==================================================*/

.approach-step h4{

    font-family:"Oswald",sans-serif;

    font-size:1.65rem;

    color:#0E497C;

    margin:8px 0 12px;

    font-weight:500;

}


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

.approach-step p{

    font-family:"Lato",sans-serif;

    color:#555;

    line-height:1.6;

    margin:0;

    font-size:14px;

}


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

@media(max-width:992px){

    .approach-process{

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

        gap:18px;

    }

    .approach-step::after{

        display:none;

    }

}

@media(max-width:768px){

    .approach-process{

        grid-template-columns:1fr;

    }

}

/*==================================================
STEP COLOURS
==================================================*/

.step-blue{

    border-top:6px solid #0E497C;

}


.step-blue .step-badge{

    background:#0E497C;

}


.step-green{

    border-top:6px solid #118A52;

}


.step-green .step-badge{

    background:#118A52;

}


.step-purple{

    border-top:6px solid #6F42C1;

}


.step-purple .step-badge{

    background:#6F42C1;

}


.step-teal{

    border-top:6px solid #1B84A6;

}


.step-teal .step-badge{

    background:#1B84A6;

}

/*==================================================
DETAIL PANELS
==================================================*/

.approach-details{

    display:grid;

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

    gap:16px;

    margin-bottom:40px;

}


.detail-panel{

    background:#ffffff;

    border-radius:18px;

    padding:20px 18px 18px;

    border:1px solid #E5EBF2;

    box-shadow:
    0 10px 30px rgba(14,73,124,.08);

    transition:
    transform .35s ease,
    box-shadow .35s ease;

}


.detail-panel:hover{

    transform:translateY(-6px);

    box-shadow:
    0 18px 40px rgba(14,73,124,.14);

}


.detail-panel h4{

    font-family:"Oswald",sans-serif;

    font-size:1.22rem;

    color:#0E497C;

    line-height:1.35;

    margin-bottom:12px;

    font-weight:500;

}


.detail-panel p{

    font-family:"Lato",sans-serif;

    color:#555;

    line-height:1.65;

    margin-bottom:14px;

    font-size:14px;

}


.detail-divider{

    width:100%;

    height:1px;

    background:#E4EAF2;

    margin:16px 0;

}


.detail-panel h5{

    font-family:"Oswald",sans-serif;

    font-size:1.08rem;

    color:#0E497C;

    margin-bottom:12px;

    letter-spacing:.4px;

}


.detail-panel ul{

    margin:0;

    padding:0;

    list-style:none;

}


.detail-panel ul li{

    position:relative;

    padding-left:24px;

    margin-bottom:8px;

    line-height:1.6;

    color:#555;

    font-family:"Lato",sans-serif;

}


.detail-panel ul li::before{

    content:"✓";

    position:absolute;

    left:0;

    top:0;

    font-weight:700;

    color:#0E497C;

}


/*==================================================
JOURNEY BANNER
==================================================*/

.journey-banner{

    background:#ffffff;

    border-radius:24px;

    padding:34px 32px 30px;

    border:1px solid #E5EBF2;

    box-shadow:
    0 12px 34px rgba(14,73,124,.08);

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

}


.journey-icon{

    width:88px;

    margin-bottom:16px;

}


.journey-icon img{

    width:100%;

    height:auto;

}


.journey-content h3{

    font-family:"Oswald",sans-serif;

    font-size:1.65rem;

    color:#0E497C;

    margin-bottom:12px;

    font-weight:500;

}


.journey-content p{

    max-width:900px;

    margin:0 auto 22px;

    color:#555;

    line-height:1.9;

    font-family:"Lato",sans-serif;

    font-size:.98rem;

}


/*==================================================
BOTTOM FLOW
==================================================*/

.journey-flow{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    flex-wrap:wrap;

}


.journey-step{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:8px;

}


.journey-step img{

    width:44px;

    height:auto;

}


.journey-step span{

    font-family:"Oswald",sans-serif;

    color:#0E497C;

    font-size:.95rem;

    letter-spacing:.3px;

}


.journey-arrow{

    color:#0E497C;

    font-size:1.15rem;

}


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

@media(max-width:900px){

    .process-arrow{

        display:none;

    }

    .approach-details{

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

    }

}

@media(max-width:768px){

    .our-approach{

        padding:48px 0;

    }

    .approach-process{

        grid-template-columns:1fr;

    }

    .approach-details{

        grid-template-columns:1fr;

    }

    .journey-banner{

        padding:30px 22px;

    }

    .journey-content h3{

        font-size:1.6rem;

    }

    .journey-flow{

        flex-direction:column;

        gap:14px;

    }

    .journey-arrow{

        transform:rotate(90deg);

    }

}