/*Header Section*/

#headerMain {
    background-image: url(../assets/App_BCK.jpg);
    background-position: top left;
    background-repeat: no-repeat;
    background-size: auto 1920px;
}

#header-global-flex {
    display: grid;
    grid-template-columns: auto 370px;
    gap: 20px 50px;
}

#appStoreLogos {
    display: grid;
    grid-column: 1;
    grid-row: 2;
    gap: 0 30px;
    grid-template-columns: 160px 200px;
    margin-top: 40px;
}

.headerLeft {
    padding-top: 50px;
}

/* Navigating Life */

#navigatingLife {
    color: #fff;
}

#qr-flex {
    display: grid;
    gap: 0 5%;
    grid-template-columns: 45% 50%;
}

/* Your Life / Info and Guidance */

.multi-purpose-flex {
    display: grid;
    gap: 0 90px;
    grid-template-columns: auto 445px;
    min-height: 445px;
}

#yourLife, #communityChat, .header {
    background-image: url(https://www.cfglaw.co.uk/hubfs/cfg-2023/backgrounds/Support-BG-C-Bottom.svg);
    background-position: top right;
    background-repeat: no-repeat;
    background-size: auto 1200px;
}

#yourLife .multi-right, #communityChat .multi-right {
    position: relative;
}

#yourLife .multi-right img, #communityChat .multi-right img {
    position: absolute;
}

#Phone_01_1 {
    right: 200px;
    top: 15px;
    height: 420px;
}

#Phone_01_2 {
    right: 75px;
}

#Phone_04_2 {
    right: 110px;
}

#infoAndGuidance {
    min-height: 565px;
}

#infoAndGuidance .multi-right {
    position: relative;
}

#infoAndGuidance .multi-right img {
    position: absolute;
}

#Phone_02_2 {
    right: 200px;  
}

#Phone_02_1 {
    right: 75px;
    top: 40px;
    height: 375px;
}

/* Real People*/

.reason-list {
    display: grid;
    gap: 30px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    padding: 45px 0;
}

#livedExperience {
    background-image: url(https://www.cfglaw.co.uk/hubfs/cfg-2023/backgrounds/Support-BG-C-Top.svg);
    background-position: top right;
    background-repeat: no-repeat;
    background-size: auto 1200px;
}

.reason-box {
    background: #6182d9;
    border-radius: 6px;
    color: #fff;
    padding: 20px;
}

.reason-box h3 {
    color: #0f1f4f;
    font-size: 1rem;
    font-weight: 700;
}

/* Podcasts */

.service-flex {
    display: grid;
    gap: 0 5%;
    grid-template-columns: 45% 50%;
}

.bullets {
    background: #de7891;
    border-radius: 6px;
    color: #fff;
    padding: 26px 30px 6px;
}

.bullets-inner {
    display: grid;
    gap: 20px;
    grid-template-columns: 50px auto;
    margin-bottom: 20px;
}

#podcast {
    min-height: 565px;
}

#podcast .b {
    position: relative;
}

#podcast .b img {
    position: absolute;
}

#Phone_03_2 {
    right: 75px;  
}

#Phone_03_1 {
    right: 200px;
    top: 40px;
    height: 375px;
}

.service-flex .a {
    grid-column: 2;
    grid-row: 1;
}

.service-flex .b {
    grid-column: 1;
    grid-row: 1 / 3;
}

/* Download Today*/

.app-banner-flex {
    display: grid;
    gap: 0 5%;
    grid-template-columns: 45% 50%;
}

#downloadApp {
    background-image: url(../assets/App_BCK.jpg);
    background-position: top left;
    background-repeat: no-repeat;
    background-size: auto 1920px;
}


@media only screen and (max-width: 640px) {
    #header-global-flex, #qr-flex, .multi-purpose-flex, .reason-list, .service-flex, .app-banner-flex {
        display: block;
    }

    #livedExperience {
        background-size: cover;
        background-position: top left;
    }

    .page-wrap {
        padding-left: 30px;
        padding-right: 30px;
    }

    #appStoreLogos {
        grid-template-columns: 150px auto;
        gap: 10px;
    }

    #appStoreLogos img {
        height: 50px;
    }

    .headerLeft h1 {
        font-size: 3rem;
    }

    #headerRight {
        display: none;
    }

    #Phone_01_1 {
        right: 40%;
    }

    #Phone_01_2 {
        right: 0%;
    }

    #Phone_02_1 {
        right: 10%;
    }

    #Phone_02_2 {
        right: 35%;
    }

    #Phone_03_1 {
        left: 10%;
    }

    #Phone_03_2 {
        left: 35%;
    }

    #Phone_04_2 {
        right: 18%;
    }

    #downloadApp img {
        width: 100%;
    }

    #navigatingLife img {
        width: 100%;
    }

    #podcast .b {
        margin-top: 30px;
        height: 450px;
    }

    .reason-list {
        padding-bottom: 0px;
    }

    .reason-box {
        margin-bottom: 30px
    }

    .reason-box:last-child {
        margin-bottom: 0px;
    }

    h3{
        font-size: 2rem;
    }
}