:root {
    --primaryColor: #212223;
    --middleColor: #323234;
    --helperColor: #FED300;
    --lightHelper: #FFF2B2;
    --hrColor: rgb(222, 184, 135);
    --transparentColor: rgba(0, 0, 0, 0.699);
    --shadow: rgba(189, 188, 188, 0.514);
    /* --------------------------------- */
    --whatsappColor: #25D366;
    --white: #ffff;
    --blue: #1877F2;
    --green: #25D366;
    --gray: #f8f8f8;
}


/* ---------------------------- */
.team-title {

    width: fit-content;
    margin: 20px auto;
    font-size: 2.5rem;
    color: var(--primaryColor);
    border-bottom: 4px solid var(--primaryColor);
}

/* =========================================== */
.team-container {

    margin-top: 130px;
    width: 98%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 200px;

}

.member-container {
    box-shadow: 10px 40px 40px var(--shadow);
    border: var(--hrColor) 1px solid;
    border-radius: 0px 50px;
    transition: border-radius 0.5s ease-in-out;
    padding-bottom: 30px;
    width: 30%;
    margin: 130px auto 30px auto;
}

.member-container:hover {
    border-radius: 50px 0px;

}

.member-image-container {
    width: 60%;
    max-height: 70px;
    margin: auto;
}

.member-image {
    width: 90%;
    border-radius: 10%;
    max-height: 200px;
    min-height: 200px;
    transform: translate(0PX, -130px);
    margin: auto;
    /* max-height: 160px; */
}

.member-details {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    justify-content: center;
    width: 95%;
    margin: auto;
}

.member-details a {
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    gap: 5px;
    width: fit-content;
    margin: auto;
    padding: 10px;
    background: var(--gray);
    color: var(--whatsappColor);
    font-weight: 400;
    font-size: medium;
    text-decoration: none;
    border-radius: 25px;
    border: 1px solid var(--whatsappColor);
    box-shadow: 0px 4px 6px var(--shadow);
    transition: transform 0.5s ease-in-out;
    direction: ltr;
}

.member-details a:hover {
    transform: translateY(-10px);
}

.icon i {
    font-size: large;
    font-weight: bold;
}

.member-details h3 {
    color: var(--helperColor);

}

.member-details p {
    color: var(--primaryColor);
}

.member-details li {
    color: var(--primaryColor);
    width: 90%;
}


/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */

@media (max-width:400px) {
    .team-container {
        margin-top: 250px;
        grid-template-columns: repeat(1, 5fr);
        gap: 100px;
    }

    .member-image {
        width: 90%;
        border-radius: 50%;
        /* transform: translate(0PX, -170px); */
        margin: auto;
        /* max-height: 160px; */
    }

    .member-container {

        width: 90%;
        margin: 130px auto 0px auto;
    }


    /* ======================================== */

    .team-intro {

        text-align: center;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .team-title {
        font-size: 1.8rem;
    }

    .team-details p {
        font-size: 1rem;
    }

    .team-details h3 {
        font-size: 1.4rem;

    }

    /* ============================== */

    .images-column {
        width: 90%;
        margin: auto;
    }

    .images-column img {
        background-color: transparent;
        position: absolute;
        width: 50%;
        height: 200px;
        cursor: pointer;
    }

    .images-column a {
        position: absolute;
        top: 0px;
        width: 100%;
        height: 100%;

        aspect-ratio: 1 / 1;
        object-fit: cover;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
        transition: transform 0.3s ease;
    }


}

@media screen and (min-width:401px)and (max-width:500px) {
    .team-container {
        grid-template-columns: repeat(1, 5fr);
        gap: 130px;
    }

    .member-image {
        width: 90%;
        border-radius: 50%;
        /* transform: translate(0PX, -170px); */
        margin: auto;
        /* max-height: 160px; */
    }

    .member-container {
        width: 80%;
        margin: 130px auto 0px auto;
    }

    /* =============================== */

    .team-intro {

        text-align: center;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .team-title {
        font-size: 1.8rem;
    }

    .team-details p {
        font-size: 1rem;
    }

    .team-details h3 {
        font-size: 1.4rem;

    }

    /* ============================== */

    .images-column {
        width: 90%;
        margin: auto;
    }

    .images-column img {
        background-color: transparent;
        position: absolute;
        width: 50%;
        height: 200px;
        cursor: pointer;
    }

    .images-column a {
        position: absolute;
        top: 0px;
        width: 100%;
        height: 100%;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
        transition: transform 0.3s ease;
    }
}

@media screen and (min-width: 501px) and (max-width: 540px) {
    .team-container {
        grid-template-columns: repeat(1, 5fr);
        gap: 120px;
    }

    .member-image {

        border-radius: 50%;
        margin: auto;

    }

    .member-container {
        width: 80%;
    }

    /* =============================== */

    .team-intro {

        text-align: center;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .team-title {
        font-size: 1.8rem;
    }

    .team-details p {
        font-size: 1rem;
    }

    .team-details h3 {
        font-size: 1.4rem;

    }

    /* ============================== */

    .images-column {
        width: 90%;
        margin: auto;
    }

    .images-column img {
        background-color: transparent;
        position: absolute;
        width: 50%;
        height: 200px;
        cursor: pointer;
    }

    .images-column a {
        position: absolute;
        top: 0px;
        width: 100%;
        height: 100%;

        aspect-ratio: 1 / 1;
        object-fit: cover;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
        transition: transform 0.3s ease;
    }
}

@media screen and (min-width: 541px) and (max-width: 699px) {
    .team-container {
        grid-template-columns: repeat(1, 5fr);
        gap: 140px;
    }

    .member-image {
        border-radius: 50%;

    }

    .member-container {
        width: 80%;
    }

    .team-intro {

        text-align: center;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .team-title {
        font-size: 1.8rem;
    }

    .team-details p {
        font-size: 1rem;
    }

    .team-details h3 {
        font-size: 1.4rem;

    }

    /* ============================== */

    .images-column {
        width: 90%;
        margin: auto;
    }

    .images-column img {
        background-color: transparent;
        position: absolute;
        width: 50%;
        height: 200px;
        cursor: pointer;
    }

    .images-column a {
        position: absolute;
        top: 0px;
        width: 100%;
        height: 100%;

        aspect-ratio: 1 / 1;
        object-fit: cover;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
        transition: transform 0.3s ease;
    }

}

@media screen and (min-width: 700px) and (max-width: 820px) {
    .team-container {
        grid-template-columns: repeat(2, 5fr);
        gap: 90px;
    }

    .member-image {
        /* width: 50%; */
        border-radius: 50%;
        transform: translate(0px, -170px);
        margin: auto;
        /* max-height: 160px; */
    }

    .member-container {
        width: 80%;
        /* margin:130px auto 0px auto; */
    }

    /* ================================== */
    .team-intro {

        text-align: center;
        display: flex;
        flex-direction: flex;
        gap: 20px;
    }

    .team-title {
        font-size: 1.8rem;
    }

    .team-details p {
        font-size: 1rem;
    }

    .team-details h3 {
        font-size: 1.4rem;

    }

    /* ============================== */

    .images-column {
        width: 70%;
        margin: auto;
    }

    .images-column img {
        background-color: transparent;
        position: absolute;
        width: 50%;
        height: 200px;
        cursor: pointer;
    }

    .images-column a {
        position: absolute;
        top: 0px;
        width: 100%;
        height: 100%;

        aspect-ratio: 1 / 1;
        object-fit: cover;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
        transition: transform 0.3s ease;
    }


}

@media screen and (min-width:821px) and (max-width: 930px) {

    .team-container {
        grid-template-columns: repeat(2, 5fr);
        gap: 90px;
    }

    .member-image {
        width: 90%;
        border-radius: 50%;
        transform: translate(0PX, -170px);
        margin: auto;
        /* max-height: 160px; */
    }

    .member-container {
        width: 60%;
        /* margin:130px auto 0px auto; */
    }

    /* ================================== */
    .team-intro {

        text-align: center;
        display: flex;
        flex-direction: flex;
        gap: 20px;
    }

    .team-title {
        font-size: 1.8rem;
    }

    .team-details p {
        font-size: 1rem;
    }

    .team-details h3 {
        font-size: 1.4rem;

    }

    /* ============================== */

    .images-column {
        width: 50%;
        margin: auto;
    }

    .images-column img {
        background-color: transparent;
        position: absolute;
        width: 50%;
        height: 200px;
        cursor: pointer;
    }

    .images-column a {
        position: absolute;
        top: 0px;
        width: 100%;
        height: 100%;

        aspect-ratio: 1 / 1;
        object-fit: cover;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
        transition: transform 0.3s ease;
    }
}

@media screen and (min-width: 931px) and (max-width: 1000px) {
    .team-container {
        grid-template-columns: repeat(2, 5fr);
        gap: 100px;
    }

    .member-image {
        width: 90%;
        border-radius: 50%;
        transform: translate(0PX, -170px);
        margin: auto;
        /* max-height: 160px; */
    }

    .member-container {
        width: 80%;
        /* margin:130px auto 0px auto; */
    }

    /* ================================== */
    .team-intro {

        text-align: center;
        display: flex;
        flex-direction: flex;
        gap: 20px;
    }

    /* ============================== */

    .images-column {
        width: 50%;
        margin: auto;
    }

    .images-column img {
        background-color: transparent;
        position: absolute;
        width: 50%;
        height: 200px;
        cursor: pointer;
    }

    .images-column a {
        position: absolute;
        top: 0px;
        width: 100%;
        height: 100%;

        aspect-ratio: 1 / 1;
        object-fit: cover;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
        transition: transform 0.3s ease;
    }

}

@media screen and (min-width: 1001px) and (max-width: 1200px) {
    .team-container {
        grid-template-columns: repeat(2, 5fr);
        gap: 110px;
    }

    .member-image {
        width: 90%;
        border-radius: 50%;
        transform: translate(0PX, -170px);
        margin: auto;
        /* max-height: 160px; */
    }

    .member-container {
        width: 50%;
        /* margin:130px auto 0px auto; */
    }

    /* .images-column{
        height: ;
    } */
}