/* =========================================================
   DR. M A SUBOOR SHAHEROSE
   OUR APPROACH PAGE
========================================================= */


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

:root {
    --approach-navy: #0c1d5b;
    --approach-navy-dark: #081542;

    --approach-purple: #8c3dcc;
    --approach-purple-dark: #6323ad;

    --approach-white: #ffffff;

    --approach-text: #17213d;
    --approach-muted: #606d89;

    --approach-light: #f8f5fc;
    --approach-soft-purple: #f1ebf8;

    --approach-border: #e5e1eb;

    --approach-shadow:
        0 12px 34px rgba(12, 29, 91, 0.07);

    --approach-shadow-hover:
        0 18px 44px rgba(12, 29, 91, 0.11);
}


/* =========================================================
   PAGE ONLY
   HEADER / FOOTER NOT CONTROLLED HERE
========================================================= */

.our-approach-page {
    display: block;
    width: 100%;
    overflow-x: hidden;

    background:
        var(--approach-white);

    color:
        var(--approach-text);
}


.approach-container {
    width:
        min(
            1240px,
            calc(100% - 48px)
        );

    margin-left: auto;
    margin-right: auto;
}


/* =========================================================
   COMMON SECTION
========================================================= */

.approach-section {
    position: relative;

    width: 100%;

    padding:
        92px 0;
}


/* =========================================================
   TYPOGRAPHY
========================================================= */

.our-approach-page .eyebrow {
    display: inline-block;

    margin-bottom: 12px;

    color:
        var(--approach-purple-dark);

    font-size: 14px;
    line-height: 1.4;

    font-weight: 800;

    letter-spacing: 1.6px;

    text-transform: uppercase;
}


.our-approach-page h2 {
    color:
        var(--approach-navy);

    font-size:
        clamp(36px, 3.4vw, 48px);

    line-height: 1.18;

    font-weight: 700;

    letter-spacing: -0.5px;
}


.our-approach-page h3 {
    color:
        var(--approach-navy);

    font-size: 21px;
    line-height: 1.35;

    font-weight: 700;
}


.our-approach-page p {
    color:
        var(--approach-muted);

    font-size: 17px;
    line-height: 1.8;
}


/* =========================================================
   FIRST HEADING
   CENTER HEADING + PARA
========================================================= */

.section-heading {
    width: 100%;
    max-width: 920px;

    margin:
        0 auto 52px;

    text-align: center;
}


.section-heading .eyebrow {
    display: block;

    width: fit-content;

    margin-left: auto;
    margin-right: auto;
}


.section-heading h2 {
    margin:
        0 0 16px;

    text-align: center;
}


.section-heading p {
    max-width: 820px;

    margin:
        0 auto;

    color:
        var(--approach-muted);

    font-size: 17px;
    line-height: 1.8;

    text-align: center;
}


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

.approach-intro {
    background:
        var(--approach-white);
}


.approach-grid {
    display: grid;

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

    gap: 22px;
}


.approach-card {
    position: relative;

    min-height: 305px;

    padding:
        31px 27px;

    background:
        var(--approach-white);

    border:
        1px solid
        var(--approach-border);

    border-radius: 16px;

    box-shadow:
        var(--approach-shadow);

    overflow: hidden;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}


/* REMOVE PURPLE/NAVY LINE ABOVE CARD */

.approach-card::before {
    content: none !important;
    display: none !important;
}


/* OLD NUMBERS NEVER SHOW */

.approach-card .card-number {
    display: none !important;
}


.approach-card:hover {
    transform:
        translateY(-5px);

    border-color:
        rgba(140, 61, 204, 0.30);

    box-shadow:
        var(--approach-shadow-hover);
}


.card-icon {
    width: 58px;
    height: 58px;

    margin-bottom: 23px;

    display: flex;

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

    color:
        var(--approach-purple);

    background:
        var(--approach-soft-purple);

    border-radius: 14px;
}


.card-icon svg {
    width: 34px;
    height: 34px;
}


.approach-card h3 {
    margin:
        0 0 12px;

    font-size: 21px;
}


.approach-card p {
    margin: 0;

    font-size: 16px;
    line-height: 1.75;
}


/* =========================================================
   CARE JOURNEY
========================================================= */

.journey-section {
    background:
        var(--approach-light);
}


/* HEADING CENTER */

.journey-header {
    width: 100%;
    max-width: 920px;

    margin:
        0 auto 54px;

    text-align: center;
}


.journey-header .eyebrow {
    display: block;

    width: fit-content;

    margin-left: auto;
    margin-right: auto;
}


.journey-header h2 {
    margin:
        0 0 16px;

    text-align: center;
}


.journey-header p {
    max-width: 790px;

    margin:
        0 auto;

    color:
        var(--approach-muted);

    font-size: 17px;
    line-height: 1.8;

    text-align: center;
}


/* JOURNEY */

.journey-list {
    width: 100%;
    max-width: 920px;

    margin:
        0 auto;
}


.journey-item {
    position: relative;

    display: grid;

    grid-template-columns:
        74px minmax(0, 1fr);

    gap: 28px;

    padding-bottom:
        42px;
}


.journey-item:last-child {
    padding-bottom: 0;
}


.journey-item:not(:last-child)::before {
    content: "";

    position: absolute;

    top: 65px;
    left: 36px;

    width: 2px;

    height:
        calc(100% - 18px);

    background:
        #d9cbea;
}


.journey-step {
    position: relative;

    z-index: 2;

    width: 74px;
    height: 74px;

    display: flex;

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

    background:
        var(--approach-navy);

    color:
        var(--approach-white);

    border:
        6px solid
        var(--approach-white);

    border-radius: 50%;

    box-shadow:
        0 7px 20px
        rgba(12, 29, 91, 0.15);

    font-size: 15px;

    font-weight: 700;
}


.journey-content {
    padding-top: 7px;
}


.journey-content h3 {
    margin:
        0 0 8px;

    font-size: 21px;
}


.journey-content p {
    max-width: 740px;

    margin: 0;

    font-size: 16px;
    line-height: 1.75;
}


/* =========================================================
   PHILOSOPHY
========================================================= */

.philosophy-section {
    background:
        var(--approach-white);
}


.philosophy-box {
    width: 100%;
    max-width: 1100px;

    margin:
        0 auto;

    display: grid;

    grid-template-columns:
        minmax(310px, 0.78fr)
        minmax(0, 1.22fr);

    align-items: stretch;

    overflow: hidden;

    background:
        var(--approach-light);

    border-radius: 20px;

    box-shadow:
        0 12px 34px
        rgba(12, 29, 91, 0.05);
}


/* =========================================================
   REDUCED IMAGE SIZE
========================================================= */

.philosophy-image {
    position: relative;

    width: 100%;

    height: 430px;

    overflow: hidden;

    background:
        #edf1f7;
}


.philosophy-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position:
        center top;
}


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

.philosophy-content {
    min-height: 430px;

    padding:
        45px 48px;

    display: flex;

    flex-direction: column;

    justify-content: center;
}


.philosophy-content .eyebrow {
    margin-bottom: 10px;
}


.philosophy-content h2 {
    margin:
        0 0 17px;

    font-size:
        clamp(32px, 3vw, 42px);
}


.philosophy-content p {
    margin:
        0 0 13px;

    font-size: 16px;

    line-height: 1.75;
}


.philosophy-content p:last-of-type {
    margin-bottom: 0;
}


/* =========================================================
   PHILOSOPHY POINTS
========================================================= */

.philosophy-points {
    display: grid;

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

    gap:
        14px 24px;

    margin-top:
        22px;
}


.philosophy-points > div {
    display: flex;

    align-items: center;

    gap: 10px;

    color:
        var(--approach-text);

    font-size: 15px;

    font-weight: 600;
}


.point-mark {
    flex:
        0 0 25px;

    width: 25px;
    height: 25px;

    display: inline-flex;

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

    background:
        var(--approach-purple);

    color:
        var(--approach-white);

    border-radius: 50%;

    font-size: 13px;

    font-weight: 700;
}


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

.approach-cta {
    position: relative;

    display: block;

    width: 100%;

    margin: 0;

    padding:
        72px 0;

    clear: both;

    color:
        var(--approach-white);

    background:
        linear-gradient(
            110deg,
            var(--approach-navy),
            var(--approach-purple-dark)
        );
}


.cta-inner {
    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 50px;
}


.cta-inner > div {
    max-width: 760px;
}


.cta-inner .eyebrow {
    color:
        #dfc8f2;
}


.cta-inner h2 {
    margin:
        0 0 12px;

    color:
        var(--approach-white);

    font-size:
        clamp(33px, 3vw, 44px);

    line-height: 1.2;
}


.cta-inner p {
    max-width: 680px;

    margin: 0;

    color:
        rgba(255, 255, 255, 0.84);

    font-size: 17px;

    line-height: 1.75;
}


.cta-button {
    flex:
        0 0 auto;

    min-width: 155px;
    min-height: 51px;

    padding:
        13px 24px;

    display: inline-flex;

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

    gap: 10px;

    background:
        var(--approach-white);

    color:
        var(--approach-navy);

    border-radius: 8px;

    font-size: 16px;

    font-weight: 700;

    text-decoration: none;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.cta-button:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 10px 27px
        rgba(0, 0, 0, 0.17);
}


.cta-button span {
    font-size: 20px;

    line-height: 1;
}


/* =========================================================
   FOOTER SEPARATION FIX
========================================================= */

.approach-cta::after {
    content: "";

    display: table;

    clear: both;
}


/* =========================================================
   LARGE DESKTOP / 24-INCH
========================================================= */

@media (min-width: 1440px) {

    .approach-container {
        width:
            min(
                1320px,
                calc(100% - 80px)
            );
    }


    .approach-section {
        padding:
            102px 0;
    }


    .our-approach-page h2 {
        font-size:
            clamp(
                40px,
                3vw,
                50px
            );
    }


    .our-approach-page p {
        font-size:
            18px;
    }


    .section-heading,
    .journey-header {
        max-width:
            960px;

        margin-bottom:
            58px;
    }


    .section-heading p,
    .journey-header p {
        max-width:
            860px;

        font-size:
            18px;
    }


    .approach-card {
        padding:
            34px 29px;
    }


    .philosophy-box {
        max-width:
            1180px;
    }


    .philosophy-image {
        height:
            450px;
    }


    .philosophy-content {
        min-height:
            450px;

        padding:
            48px 55px;
    }

}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1200px) {

    .approach-container {
        width:
            min(
                1140px,
                calc(100% - 44px)
            );
    }


    .approach-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap:
            22px;
    }


    .approach-card {
        min-height:
            270px;
    }


    .philosophy-box {
        grid-template-columns:
            0.85fr 1.15fr;
    }


    .philosophy-content {
        padding:
            40px 42px;
    }

}


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

@media (max-width: 900px) {

    .approach-container {
        width:
            calc(100% - 40px);
    }


    .approach-section {
        padding:
            72px 0;
    }


    .section-heading,
    .journey-header {
        margin-bottom:
            42px;
    }


    .philosophy-box {
        grid-template-columns:
            0.9fr 1.1fr;
    }


    .philosophy-image {
        height:
            400px;
    }


    .philosophy-content {
        min-height:
            400px;

        padding:
            34px 30px;
    }


    .philosophy-points {
        grid-template-columns:
            1fr;

        gap:
            11px;
    }


    .cta-inner {
        gap:
            35px;
    }

}


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

@media (max-width: 700px) {

    .approach-container {
        width:
            calc(100% - 32px);
    }


    .approach-section {
        padding:
            58px 0;
    }


    .our-approach-page .eyebrow {
        margin-bottom:
            9px;

        font-size:
            12px;

        letter-spacing:
            1.3px;
    }


    .our-approach-page h2 {
        font-size:
            31px;

        line-height:
            1.22;
    }


    .our-approach-page h3 {
        font-size:
            19px;
    }


    .our-approach-page p {
        font-size:
            16px;

        line-height:
            1.72;
    }


    /* HEADING */

    .section-heading {
        margin-bottom:
            34px;
    }


    .section-heading h2 {
        margin-bottom:
            13px;
    }


    .section-heading p {
        font-size:
            16px;
    }


    /* CARDS */

    .approach-grid {
        grid-template-columns:
            1fr;

        gap:
            17px;
    }


    .approach-card {
        min-height:
            auto;

        padding:
            26px 22px;
    }


    .card-icon {
        width:
            52px;

        height:
            52px;

        margin-bottom:
            19px;
    }


    .card-icon svg {
        width:
            30px;

        height:
            30px;
    }


    .approach-card h3 {
        font-size:
            19px;
    }


    .approach-card p {
        font-size:
            15.5px;
    }


    /* JOURNEY */

    .journey-header {
        margin-bottom:
            36px;
    }


    .journey-header p {
        font-size:
            16px;
    }


    .journey-item {
        grid-template-columns:
            58px minmax(0, 1fr);

        gap:
            17px;

        padding-bottom:
            34px;
    }


    .journey-step {
        width:
            58px;

        height:
            58px;

        border-width:
            5px;

        font-size:
            13px;
    }


    .journey-item:not(:last-child)::before {
        top:
            53px;

        left:
            28px;

        height:
            calc(100% - 14px);
    }


    .journey-content {
        padding-top:
            1px;
    }


    .journey-content h3 {
        font-size:
            18px;
    }


    .journey-content p {
        font-size:
            15px;
    }


    /* PHILOSOPHY */

    .philosophy-box {
        grid-template-columns:
            1fr;

        border-radius:
            16px;
    }


    .philosophy-image {
        height:
            330px;
    }


    .philosophy-image img {
        object-position:
            center 12%;
    }


    .philosophy-content {
        min-height:
            auto;

        padding:
            34px 25px;
    }


    .philosophy-content h2 {
        font-size:
            30px;
    }


    .philosophy-content p {
        font-size:
            15.5px;
    }


    .philosophy-points {
        grid-template-columns:
            1fr;

        gap:
            12px;
    }


    .philosophy-points > div {
        font-size:
            14.5px;
    }


    /* CTA */

    .approach-cta {
        padding:
            55px 0;
    }


    .cta-inner {
        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            28px;
    }


    .cta-inner h2 {
        font-size:
            31px;
    }


    .cta-inner p {
        font-size:
            16px;
    }


    .cta-button {
        min-height:
            48px;

        font-size:
            15px;
    }

}


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

@media (max-width: 480px) {

    .approach-container {
        width:
            calc(100% - 28px);
    }


    .approach-section {
        padding:
            50px 0;
    }


    .our-approach-page h2 {
        font-size:
            28px;
    }


    .section-heading,
    .journey-header {
        margin-bottom:
            30px;
    }


    .approach-card {
        padding:
            23px 19px;
    }


    .journey-item {
        grid-template-columns:
            52px minmax(0, 1fr);

        gap:
            14px;
    }


    .journey-step {
        width:
            52px;

        height:
            52px;

        font-size:
            12px;
    }


    .journey-item:not(:last-child)::before {
        top:
            48px;

        left:
            25px;
    }


    .philosophy-image {
        height:
            290px;
    }


    .philosophy-content {
        padding:
            29px 21px;
    }


    .philosophy-content h2 {
        font-size:
            28px;
    }


    .cta-inner h2 {
        font-size:
            28px;
    }


    .cta-button {
        width:
            100%;
    }

}