/*-------------------------
    Our Team Elements
-------------------------*/
.single-team-item {
    &.style-01 {
        padding: 40px 40px 35px;
        border: $border;
        border-radius: 20px;
        text-align: center;
        transition: $transition;
        margin: 15px 0;

        .thumbnail {
            position: relative;
            display: inline-block;
            border-radius: 50%;

            img {
                width: 200px;
                height: 200px;
                border-radius: 50%;
                object-fit: cover;
            }

            .social-media-list {
                justify-content: center;
                transition: all ease-in-out 0.4s;
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                bottom: -40px;
                width: 100%;
                opacity: 0;

                .single-social-item {
                    margin: 0;
                    position: relative;
                    z-index: 1;

                    &:first-child {
                        transition: all ease-in 0.3s;
                        margin-right: -40px;
                        z-index: 0;

                    }

                    &:last-child {
                        transition: all ease-in 0.3s;
                        margin-left: -40px;
                        z-index: 0;
                    }
                }
            }
        }

        .content {
            padding-top: 40px;
            text-align: center;

            .title {
                font-size: 24px;
                line-height: 30px;
            }

            .designation {
                margin-top: 14px;
                margin-bottom: 0;
            }
        }

        &:hover {
            border-color: transparent;
            box-shadow: 0px 0px 50px rgba(89, 86, 230, 0.1);

            .thumbnail {
                .social-media-list {
                    bottom: -55px;
                    opacity: 1;

                    .single-social-item {
                        &:first-child {
                            margin-bottom: 70px;
                            margin-right: 30px;
                        }

                        &:last-child {
                            margin-bottom: 70px;
                            margin-left: 30px;
                        }
                    }
                }
            }
        }
    }

    &.style-02 {
        padding: 40px 40px 37px;
        border: $border;
        border-radius: 20px;
        text-align: center;
        transition: $transition;
        margin: 0 10px;
        position: relative;
        overflow: hidden;

        .thumbnail {
            position: relative;
            display: inline-block;
            border-radius: 50%;

            img {
                width: 150px;
                height: 150px;
                border-radius: 50%;
                object-fit: cover;
                filter: drop-shadow(0px 20px 40px rgba(89, 86, 230, 0.08));
            }

            .social-media-list {
                justify-content: center;
                transition: all ease-in-out 0.4s;
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                bottom: -40px;
                width: 100%;
                opacity: 0;

                .single-social-item {
                    margin: 0;
                    position: relative;
                    z-index: 1;

                    &:first-child {
                        transition: all ease-in 0.3s;
                        margin-right: -40px;
                        z-index: 0;

                    }

                    &:last-child {
                        transition: all ease-in 0.3s;
                        margin-left: -40px;
                        z-index: 0;
                    }
                }
            }
        }

        .content {
            padding-top: 40px;
            text-align: center;

            .title {
                font-size: 24px;
                font-weight: 600;
                line-height: 30px;
            }

            .designation {
                font-family: var(--body-font);
                font-size: 16px;
                color: var(--paragraph-color);
                margin-top: 13px;
                margin-bottom: 0;
            }

            .email {
                display: flex;
                align-items: baseline;
                justify-content: center;
                margin: 20px 0 0;

                .icon-wrap {
                    margin-right: 12px;

                    .icon {
                        font-size: 14px;
                        color: #CDCDCD;
                    }
                }

                .text {
                    font-family: var(--body-font);
                    font-size: 16px;
                    font-weight: 400;
                    color: var(--heading-color);
                }
            }
        }

        .hover-content {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #fff;
            padding: 40px;
            text-align: center;
            border-radius: 20px;
            transform: scale(1.5);
            transition: all ease 0.3s;
            opacity: 0;
            visibility: hidden;

            .title {
                font-size: 24px;
                font-weight: 600;
                line-height: 30px;
            }

            .designation {
                font-family: var(--body-font);
                font-size: 16px;
                color: var(--paragraph-color);
                margin-top: 13px;
                margin-bottom: 35px;
            }

            .social-media-list {
                justify-content: center;
                margin-top: 55px;
            }
        }

        &:hover {
            border-color: transparent;
            box-shadow: 0px 0px 50px rgba(89, 86, 230, 0.1);

            .hover-content {
                transform: scale(1);
                visibility: visible;
                opacity: 1;
            }
        }
    }

    &.style-03 {
        padding: 50px 50px 47px;
        border: $border;
        border-radius: 20px;
        text-align: center;
        transition: $transition;
        margin: 0 10px;
        position: relative;
        overflow: hidden;

        .thumbnail {
            position: relative;
            display: inline-block;
            border-radius: 50%;

            img {
                width: 120px;
                height: 120px;
                border-radius: 50%;
                object-fit: cover;
                filter: drop-shadow(0px 20px 40px rgba(89, 86, 230, 0.08));
            }
        }

        .content {
            padding-top: 30px;
            text-align: center;

            .title {
                font-size: 24px;
                font-weight: 600;
                line-height: 30px;
            }

            .designation {
                font-family: var(--body-font);
                font-size: 16px;
                color: var(--paragraph-color);
                margin-top: 13px;
                margin-bottom: 35px;
            }

        }

        .hover-content {
            position: absolute;
            top: 50px;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(360deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 25%, rgb(255 255 255 / 32%) 50%, rgb(255 255 255 / 0%) 75%, rgb(255 255 255 / 4%) 100%);
            padding: 50px;
            text-align: center;
            border-radius: 20px;
            transition: all ease 0.3s;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            opacity: 0;

        }

        &:hover {
            border-color: transparent;
            box-shadow: 0px 0px 50px rgba(89, 86, 230, 0.1);
            background-color: #fff;

            .hover-content {
                top: 0;
                visibility: visible;
                opacity: 1;
            }
        }
    }
}

.single-instructor-details-wrap {
    text-align: center;

    .thumb {
        img {
            width: 140px;
            height: 140px;
            border-radius: 50%;
            border: 10px solid #fff;
            filter: drop-shadow(0px 20px 40px rgba(89, 86, 230, 0.08));
        }
    }

    .content {
        background-color: #fff;
        border-radius: 20px;
        padding: 115px 40px 40px;
        margin-top: -75px;

        .badge-box {
            font-size: 16px;

            .badges {
                font-family: var(--body-font);
                font-size: 16px;
                line-height: 28px;
                font-weight: 600;
                color: #fff;
                background-color: var(--main-color-one);
                border-radius: 8px;
                padding: 3px 8px 3px;
            }
        }

        .title {
            font-size: 32px;
            font-weight: 600;
            line-height: 60px;
            text-transform: capitalize;
            margin-top: 8px;
            margin-bottom: 5px;
        }

        .paragraph {
            .ex {
                font-weight: 500;
            }
        }

        .student-review {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 50px;
            position: relative;

            &::after {
                position: absolute;
                content: "";
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 1px;
                height: 40px;
                background-color: #E4E4E4;
            }

            .number {
                font-family: var(--heading-font);
                font-size: 24px;
                font-weight: 700;
                line-height: 45px;
                color: var(--main-color-one);
                display: block;
            }

            .text {
                font-family: var(--body-font);
                font-size: 16px;
                font-weight: 400;
                line-height: 30px;
                color: var(--heading-color);
            }

            .review-wrap {
                text-align: right;

                .number {
                    color: #FFC44E;
                    text-align: center;
                }
            }
        }

        .social-media-list {
            justify-content: center;
            margin-top: 50px;
        }
    }
}