.team-profile{
    background: hsl(220, 75%, 98%);
    .single-profile{

        // front
        .single-profile-front{

            // hover effect
            position: relative;
            top: 0;
            backface-visibility: hidden;
            transition: transform 0.5s linear;
            transform: perspective(600px) rotateY(0deg);
            // hover effect End

            .profile-img{
                overflow: hidden;
                & img{
                    width: 100%;
                    margin-bottom: 30px;
                    @include transition(.4s);
                    border-bottom: 7px solid transparent;
                     transform:scale(1);
                    &:hover{
                        border-bottom: 7px solid $theme_color;
                        transform:scale(1.1)                    ;
                        -webkit-transform:scale(1.1);
                        -moz-transform:scale(1.1);
                        -ms-transform:scale(1.1);
                        -o-transform:scale(1.1);
                    }
                }
            }
            .profile-caption{
                overflow: hidden;
                h4{
                    & a{
                        color: $heading-color;
                        font-size:25px;
                        font-weight: 600;
                        margin-bottom: 23px;
                        display: block;
                        &:hover{
                            color: $theme_color;
                        }
                    }
                }
                p{
    
                }
            }

        }
        // Back
        .single-profile-back{
            border: 4px solid $theme_color;
            padding: 31px 32px 48px 52px;
            @media #{$lg}{
               padding: 20px;
            }
            @media #{$md}{
               padding: 20px;
            }
            @media #{$xs}{
               padding: 20px;
            }

            background: #fff;
            overflow: hidden;
            top: 0;

            // hover effect
            position: absolute;
            transform: perspective(600px) rotateY(180deg);
            backface-visibility: hidden;
            overflow: hidden;
            transition: transform 0.5s linear;
             // hover effect End


            & h2{
                color: $heading-color;
                font-size: 40px;
                font-weight: 700;
                line-height:1.3;
                margin-bottom: 30px;
                position: relative;
                display: block;
                padding-bottom: 29px;
                &::before{
                    content: "";
                    position: absolute;
                    width: 100px;
                    height: 4px;
                    background:$theme_color;
                    left: 0;
                    bottom: 0;
                }
            }
            & p{
                margin-bottom:30px;
            }
            & a{
                color: $heading-color;
                &:hover{
                    color: $theme_color;
                }
            }
        }

        //Last
        .single-profile-front-last{
            // hover effect End
            position: absolute;
            transform: perspective(600px) rotateY(180deg);
            backface-visibility: hidden;
            overflow: hidden;
            transition: transform 0.5s linear;

            .profile-img{
                overflow: hidden;
                & img{
                    width: 100%;
                    margin-bottom: 30px;
                    @include transition(.4s);
                    border-bottom: 7px solid transparent;
                     transform:scale(1);
                    &:hover{
                        border-bottom: 7px solid $theme_color;
                        transform:scale(1.1)                    ;
                        -webkit-transform:scale(1.1);
                        -moz-transform:scale(1.1);
                        -ms-transform:scale(1.1);
                        -o-transform:scale(1.1);
                    }
                }
            }
            .profile-caption{
                overflow: hidden;
                h4{
                    & a{
                        color: $heading-color;
                        font-size:25px;
                        font-weight: 600;
                        margin-bottom: 23px;
                        display: block;
                        &:hover{
                            color: $theme_color;
                        }
                    }
                }
                p{
    
                }
            }

        }
        // Back
        .single-profile-back-last{
            border: 4px solid $theme_color;
            padding: 31px 32px 48px 52px;
            
            @media #{$lg}{
                padding: 20px;
             }
            @media #{$xs}{
                padding: 20px;
             }
            background: #fff;
            overflow: hidden;
            top: 0;

            // hover effect
            position: relative;
            top: 0;
            backface-visibility: hidden;
            transition: transform 0.5s linear;
            transform: perspective(600px) rotateY(0deg);
             // hover effect End


            & h2{
                color: $heading-color;
                font-size: 40px;
                font-weight: 700;
                line-height:1.3;
                margin-bottom: 30px;
                position: relative;
                display: block;
                padding-bottom: 29px;
                &::before{
                    content: "";
                    position: absolute;
                    width: 100px;
                    height: 4px;
                    background:$theme_color;
                    left: 0;
                    bottom: 0;
                }
            }
            & p{
                margin-bottom:30px;

                @media #{$lg}{
                   font-size: 15px;
                 }
            }
            & a{
                color: $heading-color;
                &:hover{
                    color: $theme_color;
                }
            }
        }
        
    }
}



// First tow card
.single-profile:hover .single-profile-front{
    transform: perspective(600px) rotateY(-180deg);

}
.single-profile:hover .single-profile-back{
    transform: perspective(600px) rotateY(0deg);
}


// Last card.
.single-profile:hover .single-profile-front-last{
    transform: perspective(600px) rotateY(0deg);

}
.single-profile:hover .single-profile-back-last{
    transform: perspective(600px) rotateY(-180deg);
}