.home-header {
    background: #F3F7FD;
    display: flex;
    gap: 4rem;
    align-items: center;
    padding: 7rem 5rem;
    border-radius: 0 0 50px 50px;
    margin-bottom: 8rem;

    .text h1 {
        font-weight: 700;
        font-size: 5.6rem;
        line-height: 80px;
    }

    .text p {
        color: #0E1628B2;
        /* margin: 2.4rem 0; */
    }

    .header-img {
        flex: 1 1 0%;
        /* max-width: 52.7rem;*/
        max-height: 52.7rem;
    }

    .header-img img {
        width: 100%;
    }

    .btns {
        display: flex;
        align-items: center;
        gap: 1.6rem;
    }

    .btns button {
        padding: 1.6rem 2.4rem;
    }
}

/* COLLABORATION */
.collaboration {
    margin-bottom: 8rem;

    p {
        color: #0E1628B2;
    }
}

/* EXPERTISE */
.expertise {
    background: #0E1628;
    padding: 10rem 4vw;
    border-radius: 0 0 50px 50px;
    margin-bottom: 8rem;


    .expertise-heading {
        max-width: 86.2rem;
        margin: 0 auto;
    }

    h2 {
        font-size: 3rem;
        margin-top: 1rem;
        margin-bottom: 2rem;
        line-height: 4rem;
    }

    h4 {
        color: #F8AC34;
    }

    p {
        color: #FFFFFFCC;
    }

    .cards {
        margin-top: 5.6rem;
        gap: 3rem;
        display: grid;
        overflow: hidden;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .card {
        background-color: transparent;
        border-radius: 2rem;
        border: 1px solid #FFFFFF33;
        padding: 4rem 3.2rem;
        display: flex;
        flex-direction: column;
        gap: 1.6rem;
        /* transition: transform 0.2s ease-in-out; */

        span {
            width: 6rem;
            height: 6rem;
            border-radius: 100%;
            background-color: #D9D9D9;
        }
    }

    .expertise-btns {
        display: flex;
        width: fit-content;
        margin: 0 auto;
        gap: 1.6rem;
        margin-top: 3rem;
    }

}



.approach {
    background: #F3F7FD;
    padding: 10rem 5rem;
    border-radius: 0 0 50px 50px;
    margin-bottom: 8rem;


    .approach-heading {
        max-width: 86.2rem;
        margin: 0 auto;
    }

    h2 {
        font-size: 3rem;
        text-align: center;
        max-width: 56.4rem;
        margin: 0 auto;
        line-height: 4rem;
        color: #0E1628;
    }


    .cards {
        margin-top: 5.6rem;
        gap: 3.2rem;
        display: grid;
        overflow: hidden;
        grid-template-columns: repeat(3, minmax(0, 1fr));

    }

    .card {
        background-color: transparent;
        /* padding: 4rem 3.2rem; */
        display: flex;
        border: none;
        flex-direction: column;
        align-items: center;
        gap: 1.2rem;
        text-align: center;

        h3 {
            font-weight: 500;
            color: #0E1628;
            font-size: 3rem;
        }

        p {
            font-weight: 500;
            color: #0E1628CC;
            line-height: 3rem;
        }

        /* transition: transform 0.2s ease-in-out; */

        span {
            width: 6rem;
            height: 6rem;
            border-radius: 100%;
            background-color: #D9D9D9;
        }
    }

    .approach-btns {
        display: flex;
        width: fit-content;
        margin: 0 auto;
        gap: 1.6rem;
        margin-top: 6.4rem;
    }

}





@media (max-width: 768px) {
    .home-header {
        flex-direction: column;
        text-align: center;
        padding: 5rem 2rem;
        gap: 5rem;
        border-radius: 0;
    }

    .home-header .text {
        align-items: center;
    }

    .home-header .text h1 {
        font-size: 3.2rem;
        line-height: normal;
    }


    .home-header .header-img img {
        width: 80%;
    }


    .expertise {
        border-radius: 0;
        padding: 5rem 2rem;

        h2 {
            font-size: 2.4rem;
            line-height: 1.2;
        }

        .cards {
            margin-top: 4rem;
            gap: 1.6rem;
            /* padding: 7rem 0rem; */
            /* grid-template-columns: repeat(1, minmax(0, 1fr)); */
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

        }
    }

    .mission {
        flex-direction: column;
        text-align: center;
        padding: 0rem 2rem;
        gap: 5rem;
        border-radius: 0;
        align-items: center;
    }

    .mission .text {
        align-items: center;
        order: 1;
    }

    .mission .text h1 {
        font-size: 3.6rem;
        line-height: normal;
    }

    .mission .text p {
        margin: 1.6rem 0;
    }

    .mission .mission-img {
        order: 2;
    }

    .mission .mission-img img {
        width: 80%;
    }

    .short-story {
        flex-direction: column;
        text-align: center;
        padding: 0rem 2rem;
        gap: 5rem;
        border-radius: 0;
        align-items: center;
    }

    .short-story .text {
        align-items: center;
        order: 1;
    }

    hr {
        width: 100%;
    }

    blockquote {
        margin-top: 0;
    }

    .short-story .text h1 {
        font-size: 3.6rem;
        line-height: normal;
    }

    .short-story .text p {
        margin: 1.6rem 0;
    }

    .short-story .short-story-img {
        order: 2;
    }

    .short-story .short-story-img img {
        width: 80%;
    }

    .approach {
        border-radius: 0;
        padding: 5rem 2rem;

        .cards {
            margin-top: 4rem;
            gap: 1.6rem;
            /* padding: 7rem 0rem; */
            /* grid-template-columns: repeat(1, minmax(0, 1fr)); */
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

        }
    }


}

@media (min-width:768px) and (max-width: 992px) {
    .home-header {
        padding: 5rem 4rem;
        margin-bottom: 6.4rem;
        border-radius: 0 0 20px 20px;

    }

    .home-header .text h1 {
        font-size: 3.2rem;
        line-height: normal;
    }

    .home-header .header-img img {
        width: 90%;
    }

    .expertise {
        border-radius: 0 0 20px 20px;
        padding: 5rem 4rem;


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

    .mission {
        padding: 0rem 4rem;
        margin-bottom: 6.4rem;
        border-radius: 0 0 20px 20px;
        align-items: start;
    }

    .mission .text h1 {
        font-size: 3.2rem;
        line-height: normal;
    }

    .mission .mission-img img {
        width: 90%;
    }

    .approach {
        border-radius: 0 0 20px 20px;
        padding: 5rem 4rem;


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

}