:root {
    --box-shadow: 0px 0px 15px 1px rgba(0, 0, 0, 0.1);
    /* color  */
    --banner-bg-color: linear-gradient(170deg,
            #7D17FF,
            #0085FF);
    --body-bg-color: rgba(0, 133, 255, 0.05);
    --white: #fff;
    --white-1: #F9FBFC;
    --black: #101041;
    --sky: #0085FF;
    --blue: #3A38FF;
    --gray-0: #E5E4FF;
    --gray-1: #949293;
}

#team.center {
    flex-direction: column;

    .intro.center {
        width: 90%;
        justify-content: flex-start;

        p {
            font-size: 24px;
            font-weight: 500;
        }
    }

    .teamcontainer {
        width: 90%;
        display: grid;
        grid-template-columns: 35% 65%;
        gap: 20px;
        margin: 45px 0 25px 0;

        .showCardSec {
            width: 100%;
            height: auto;
            display: flex;
            align-items: flex-start;
            margin-top: 24px;
            box-shadow: var(--box-shadow);

            .container {
                width: 100%;
                height: auto;
                padding: 15px;
                background: var(--white);
                display: flex;
                flex-direction: column;
                gap: 15px;

                .info1 {
                    align-items: flex-start;
                    justify-content: flex-start;
                    gap: 15px;

                    .image img {
                        width: 130px;
                        height: 120px;
                        object-fit: cover;
                        margin-top: 8px;
                    }

                    .quick_info {
                        .role_name {
                            p.name {
                                font-size: 22px;
                                font-weight: 600;
                                color: var(--sky);
                                text-transform: capitalize;
                            }

                            p.role {
                                font-size: 16px;
                                font-weight: 400;
                                color: var(--black);
                                text-transform: capitalize;
                            }
                        }

                        div>div.socail_links.center {
                            width: auto;
                            height: auto;
                            justify-content: flex-start;

                            ul {
                                margin-top: 10px;
                                display: flex;
                                gap: 18px;

                                li>a {
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                    color: #222222;

                                    i {
                                        font-size: 16px;
                                    }
                                }
                            }
                        }


                    }
                }

                .info2.center {
                    justify-content: flex-start;
                    align-items: flex-start;
                    flex-direction: column;
                    gap: 10px;
                    padding-top: 15px;
                    border-top: 1px solid var(--gray-0);

                    .detail_info {
                        display: flex;
                        flex-direction: column;
                        gap: 15px;

                        div>p.titlePath {
                            font-size: 12px;
                            font-weight: 600;
                            text-transform: capitalize;
                            color: var(--sky);
                        }

                        div>ul {
                            display: flex;
                            flex-direction: column;
                            margin-top: 5px;
                            gap: 5px;

                            li {
                                font-size: 14px;
                                font-weight: 400;
                                color: var(--black);
                            }
                        }

                        div>ul.research_areas {
                            flex-direction: row;
                            flex-wrap: wrap;

                            li {
                                width: fit-content;
                            }
                        }

                    }

                    .short_bio {
                        h1 {
                            font-size: 12px;
                            font-weight: 600;
                            color: var(--sky);
                            text-transform: capitalize;
                        }

                        p {
                            font-size: 16px;
                            font-weight: 300;
                        }
                    }
                }

            }
        }

        .cardShowSec.center {
            width: 100%;
            align-items: flex-start;
            overflow: hidden;

            .category_card_container.center {
                width: 100%;
                align-items: flex-start;
                justify-content: flex-start;
                flex-direction: column;
            }
        }
    }
}


/**********************/
/* responsive design */
/********************/
@media (max-width: 992px) {
    #team.center .teamcontainer {
        display: flex;
        flex-direction: column;
    }

}