.about-header {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4rem;
    align-items: center;
    padding: 7rem 5rem 0 5rem;
    margin-bottom: 8rem;
    text-align: center;
    background: url("/assets/images/terms-img.png");
    background-size: 90%;
    background-repeat: no-repeat;
    background-position: top center;


    h1 {
        font-weight: 700;
        font-size: 6rem;
        line-height: 80px;
    }

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

    .background-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        /* filter: blur(4px); */
        z-index: 1;
    }
}

.image-section {
    padding: 0rem 5rem;


    .image-grid {
        border-bottom: 0.7px solid #0E16284D;
        padding-bottom: 7rem;
        margin-bottom: 2rem;
        display: grid;
        gap: 8px;
        grid-template-columns: repeat(10, 1fr);
        grid-template-rows: repeat(2, 1fr);
        max-height: 72rem;
    }

    .image-item {
        position: relative;
        overflow: hidden;
        border-radius: 8px;
    }

    .item1 {
        grid-column: span 2;
        grid-row: span 1;
        /* max-height: 41.7rem; */
    }

    .item2 {
        grid-column: span 2;
        grid-row: span 1;
        /* max-height: 26.5rem; */
    }

    .item3 {
        grid-column: span 2;
        grid-row: span 2;
        /* max-height: 71rem; */
    }

    .item4 {
        grid-column: span 2;
        grid-row: span 2;
        /* max-height: 71rem; */
    }

    .item5 {
        grid-column: span 4;
        grid-row: span 1;
        /* max-height: 35.1rem; */
    }

    .item6 {
        grid-column: span 2;
        grid-row: span 1;
        /* max-height: 34.7rem; */
    }

    .item7 {
        grid-column: span 2;
        grid-row: span 1;
        /* max-height: 34.7rem; */
    }

    .image-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease-in-out;
    }

    .image-item:hover img {
        transform: scale(1.05);
    }
}

/* CORE VALUES */
.core-values {
    background: #0E1628;
    padding: 10rem 4vw;
    border-radius: 0 0 50px 50px;
    margin-bottom: 8rem;


    .core-values-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;
        row-gap: 10rem;
        display: grid;
        overflow: hidden;
        grid-template-columns: repeat(3, 1fr);

    }

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

        h3 {
            font-weight: 700;
            color: #FFFFFF;
            font-size: 3rem;
        }

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

    .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: #FFFFFF;
            font-size: 3rem;
        }

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

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

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

}

/* OUR TEAM */
#our-team {
    padding: 0 5rem;

}

.our-team {

    .team-heading h4 {
        font-weight: 700;
        font-size: 4rem !important;
    }

    .team-heading p {
        margin-bottom: 3.2rem;
    }

    .team-cards {
        gap: 2.8rem;
        display: grid;
        overflow: hidden;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

    }

    .team-card {
        display: flex;
        flex-direction: column;
        gap: 2rem;
        background-color: #F3F7FD;
        border-radius: 50px 50px 0 0;
        /* flex-grow: 1; */
        padding: 3.2rem 3.2rem 0 3.2rem;

        .heading {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 1.4rem;
            flex-wrap: wrap;
        }

        .heading p {
            font-weight: 700;
            font-size: 2.5rem;
            /* max-width: 65%; */
        }

        .image {
            margin-top: auto;
            /* justify-self: flex-end; */
            height: 29rem;
        }

        .image img {
            object-fit: contain;
            width: 100%;
            height: auto;
            max-height: 100%;
        }

        .social-icons {
            display: flex;
            gap: 1rem;
            /* max-width: 30%; */
            align-items: center;
            justify-content: flex-end;

            svg path {
                fill: #5C81AE;
            }
        }

        .chip {
            background-color: #5C81AE;
            padding: .8rem 1.2rem;
            border-radius: 1rem;
            font-weight: 600;
            color: #fff;
            width: fit-content;
        }

        .chip2 {
            background-color: #C28320;
            padding: .8rem 1.2rem;
            border-radius: 1rem;
            font-weight: 600;
            color: #fff;
            width: fit-content;
        }
    }

    .right {
        /* right: 0; */
        /* height: fit-content; */
        background: #0E1628;
        border-radius: 0 0 50px 50px;
        padding: 4rem;
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        gap: 2.4rem;
        align-items: center;
        justify-content: center;
        text-align: center;

        h4 {
            font-weight: 700;
            font-size: 3rem;
            max-width: 28.3rem;
            margin: 0 auto;
            color: #FFF;
        }

        p {
            color: #FFFFFFB2;
        }
    }
}


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

    .about-header {
        align-items: center;
    }

    .about-header h1 {
        font-size: 3.4rem;
        line-height: normal;
    }

    .image-section {
        padding: 0rem 2rem;

        .image-grid {
            margin-top: 2rem;
            grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
            padding-bottom: 4rem;
            margin-bottom: 4rem;
            /* max-height: 98rem; */
        }

        .image-item img {
            width: 100%;
            height: 20rem;
            object-fit: cover;
        }

        .item1 {
            grid-column: span 1;
            grid-row: span 1;
        }

        .item2 {
            grid-column: span 1;
            grid-row: span 1;
        }

        .item3 {
            grid-column: span 1;
            grid-row: span 1;
        }

        .item4 {
            grid-column: span 1;
            grid-row: span 1;
        }

        .item5 {
            grid-column: span 1;
            grid-row: span 1;
        }

        .item6 {
            grid-column: span 1;
            grid-row: span 1;
        }

        .item7 {
            grid-column: span 1;
            grid-row: span 1;
            display: none;
        }
    }

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

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

        .card1 {
            gap: 2rem;
            align-items: left;

            /* h3 {

                text-align: left !important;
            } */
        }
    }

    #our-team {
        padding: 0 2rem;

    }

    .our-team {
        .team-heading {
            h4 {
                font-size: 3rem !important;
            }
        }

        .team-card {
            border-radius: 2rem 2rem 0 0;

            .heading {
                flex-wrap: wrap;
            }

            /* .social-icons{
                justify-self: flex-end;
            } */
        }

        .right {
            border-radius: 0 0 2rem 2rem;
        }
    }
}

@media (min-width:768px) and (max-width: 992px) {
    .image-section {
        padding: 0rem 4rem;
    }


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


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

    #our-team {
        padding: 0 4rem;

    }
}