@use '../utils' as *;

/*----------------------------------------*/
/*  37. team css start
/*----------------------------------------*/
.it-team {
    &-section-title-box {
        @media #{$xs}{
            margin-bottom: 30px;
        }
    }
    &-content {
        padding: 20px;
        padding-top: 46px;
    }
    &-title {
        font-size: 24px;
        margin-bottom: 7px;
        @media #{$xl,$lg,$md,$xs}{
            font-size: 20px;
        }
    }
    &-thumb {
        overflow: hidden;
        & img {
            transition: 1.3s all ease;
            width: 100%;
        }  
        &::after{
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            border-radius: 20px;
            background-color: rgba($color: #1F2432, $alpha: .4);
            -webkit-transform: perspective(400px) rotateX(90deg) scaleY(0.5);
            -ms-transform: perspective(400px) rotateX(90deg) scaleY(0.5);
            transform: perspective(400px) rotateX(90deg) scaleY(0.5);
            -webkit-transform-origin: center;
            -ms-transform-origin: center;
            transform-origin: center;
            transition-delay: .3s;
            transition-timing-function: ease-in-out;
            transition: .6s;
            transition-property: all;
        }
    }
    &-social {
        position: absolute;
        bottom: 40px;
        left: 0;
        right: 0;
        z-index: 1;
        text-align: center;
        -webkit-transform: perspective(400px) rotateX(90deg) scaleY(0.5);
        -ms-transform: perspective(400px) rotateX(90deg) scaleY(0.5);
        transform: perspective(400px) rotateX(90deg) scaleY(0.5);
        -webkit-transform-origin: center;
        -ms-transform-origin: center;
        transform-origin: center;
        transition-delay: .3s;
        transition-timing-function: ease-in-out;
        transition: .8s;
        transition-property: all;
        & a {
            width: 42px;
            height: 42px;
            line-height: 35px;
            margin: 0 5px;
            border-radius: 5px;
            display: inline-block;
            color: var(--it-common-white);
            border: 1px solid rgba(255, 255, 255, 0.2);
            background-color: rgba($color: #FFFFFF, $alpha: .15);
            &:hover {
                color: var(--it-theme-2);
            }
            @media #{$xs}{ 
                width: 35px;
                height: 35px;
                line-height: 29px;
            }
        }
    }
    &-item {
        border-radius: 20px;
        background-color: var(--it-common-white);
        border: 1px solid rgba(31, 36, 50, 0.1);
        &:hover {
            & .it-team-thumb {
                & img {
                    transform: scale(1.2);
                }
                &::after {
                    -webkit-transform: perspective(400px) rotateX(0deg) scaleY(1);
                    -ms-transform: perspective(400px) rotateX(0deg) scaleY(1);
                    transform: perspective(400px) rotateX(0deg) scaleY(1);
                }
            }
            & .it-team-social {
                -webkit-transform: perspective(400px) rotateX(0deg) scaleY(1);
                -ms-transform: perspective(400px) rotateX(0deg) scaleY(1);
                transform: perspective(400px) rotateX(0deg) scaleY(1);
            }
        }
        & .it-course-meta {
            padding-top: 18px;
            margin-top: 20px;
            border-top: 1px solid #d9d9d9;
            & span {
                font-size: 14px;
                &:first-child {
                    padding-right: 0;
                    width: 49%;
                    text-align: start;
                }
            }
        }
    }
    &-shape {
        &-1 {
            position: absolute;
            bottom: 28%;
            left: 54%;
            z-index: -1;
            animation: translateX2 2s infinite alternate;
            @media #{$lg,$md,$xs}{
                display: none;
            }
        }
        &-2 {
            position: absolute;
            top: -8%;
            right: 0%;
            z-index: -1;
        }
        &-3 {
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
            object-fit: cover;
            height: 100%;
        }
        &-4 {
            position: absolute;
            z-index: -1;
            top: 3.5%;
            left: 7%;
            animation: itswing 1s forwards infinite alternate;
            transform-origin: bottom center;
            @media #{$md}{
                left: 3%;
                top: 0;
            }
            @media #{$xs}{
                display: none;
            }
            & img {
                @media #{$xl,$lg}{
                    transform: scale(.7);
                }
                @media #{$md}{
                    transform: scale(.6);
                }
            }
        }
        &-5 {
            position: absolute;
            z-index: -1;
            top: 3%;
            left: 1.5%;
            @media #{$xl}{
                transform: scale(.6);
            }
            @media #{$lg}{
                top: 1%;
                left: -3%;
                transform: scale(.6);
            }
            @media #{$md,$xs}{
                display: none;
            }
        }
        &-6 {
            position: absolute;
            z-index: -1;
            top: 5%;
            right: 5%;
            @media #{$xl,$lg}{
                transform: scale(.6);
            }
            @media #{$md,$xs}{
                display: none;
            }
        }
        &-7 {
            position: absolute;
            top: 20%;
            left: 6%;
            opacity: 0.4;
        }
        &-8 {
            position: absolute;
            z-index: -1;
            right: 0;
            top: 0;
        }
        &-9 {
            position: absolute;
            z-index: -1;
            bottom: 0;
            left: 0;
        }
        &-10 {
            position: absolute;
            z-index: -1;
            top: 8%;
            left: 6%;
        }
    }
    &-style-2 {
        @include background;
        @media #{$lg,$md,$xs}{
            background-color: var(--it-gray-1);
            background-image: none !important;
        }
        & .it-team-content {
            padding: 24px 25px;
            padding-top: 25px;
        }
        & .it-team-section-title-box {
            @media #{$xs}{
                margin-bottom: 65px;
            }
        }
    }
    &-style-3 {
        & .it-team-thumb {
            & img {
                width: 100%;
            }
            &::after {
                display: none;
            }
        }
        & .it-team-title {
            margin-bottom: 5px;
            text-transform: uppercase;
            font-family: var(--it-ff-edensor-regular);
        }
        & .it-team-content {
            padding: 0;
            padding-top: 25px;
            & span {
                color: var(--it-theme-4);
            }
        }
        & .it-course-meta {
            margin-top: 15px;
            padding: 19px 80px;
            @media #{$xl,$lg,$md,$xs}{
                padding: 19px 20px;
            }
            & svg,i {
                color: var(--it-theme-4);
            }
        }
        & .it-team-item .it-course-meta span:first-child {
            @media #{$sm}{
                width: auto;
                text-align: center;
            }
        }
    }
    &-style-4 {
        & .it-team-title {
            font-weight: 700;
            transition: .4s;
            font-family: var(--it-ff-cinzel-decorative);
        }
        & .it-team-content {
            & span {
                transition: .4s;
            }
        }
        & .it-team-item {
            transition: .4s;
            & .it-course-meta {
                transition: .4s;
                & span,svg {
                    transition: .4s;
                }
            }
            &:hover {
                background-color: var(--it-theme-1);
                & .it-team-title {
                    color: var(--it-common-white);
                }
                & .it-team-content span {
                    color: var(--it-common-white);
                }
                & .it-course--meta {
                    background: rgba(255, 255, 255, 0.1);
                }
            }
        }
    }
}
.it-team-2 {
    &-content {
        position: absolute;
        z-index: 3;
        bottom: 35px;
        left: 0;
        right: 0;
        margin: 0 auto;
        & span {
            transition: .3s;
            color: var(--it-theme-5);
        }
    }
    &-title {
        font-weight: 600;
        font-size: 24px;
        transition: .3s;
        margin-bottom: 5px;
        color: var(--it-common-white);
        font-family: var(--it-ff-oxanium);
    }
    &-social {
        position: absolute;
        top: -40%;
        right: 20px;
        z-index: 3;
        transition: .5s;
        & a {
            width: 25px;
            height: 25px;
            display: block;
            transition: .3s;
            border-radius: 5px;
            border: 1px solid #dbe0e2;
            color: var(--it-common-black);
            &:not(:last-child){
                margin-bottom: 7px;
            }
            &:hover {
                color: var(--it-common-white);
                background-color: var(--it-theme-5);
            }
        }
    }
    &-thumb {
        & img {
            transition: 1.3s all ease;
        }
    }
    &-item {
        overflow: hidden;
        border-radius: 20px;
        border: 1px solid rgba(31, 36, 50, 0.1);
        &::before {
            position: absolute;
            content: '';
            bottom: 0;
            left: 0;
            width: 100%;
            height: 60%;
            border-radius: 20px;
            transition: .3s;
            z-index: 1;
            background: linear-gradient(180deg, rgba(240, 244, 245, 0) 0%, #1F2432 100%);
        }
        &::after {
            position: absolute;
            content: '';
            bottom: 0;
            left: 0;
            width: 100%;
            height: 50%;
            border-radius: 20px;
            transition: .3s;
            opacity: 0;
            z-index: 2;
            background: linear-gradient(180deg, rgba(254, 130, 53, 0) 0%, #fe8235 100%);
        }
        &:hover {
            & .it-team-2-thumb {
                & img {
                    transform: scale(1.2);
                }
            }
            & .it-team-2-title {
                color: var(--it-common-white);
            }
            & .it-team-2-social {
                top: 20px;
            }
            & .it-team-2-content span {
                color: var(--it-common-white);
            }
            &::after {
                opacity: 1;
            }
        }
    }
}
.it-team-3 {
    &-thumb {
        overflow: hidden;
        border-radius: 50%;
        margin-bottom: 25px;
        display: inline-block;
        & img {
            border-radius: 50%;
            transition: 1.3s all ease;
            border: 1px solid rgba($color: #6C757D, $alpha: .2);
        }
    }
    &-title {
        font-size: 24px;
        color: #000;
        margin-bottom: 7px;
        @media #{$xl,$lg,$md,$xs}{
            font-size: 20px;
        }
    }
    &-btn {
        @media #{$xs}{
            margin-top: 30px;
        }
    }
    &-item {
        padding: 50px 20px;
        padding-bottom: 46px;
        background-color: var(--it-common-white);
        &:hover {
            & .it-team-3-thumb {
                & img {
                    transform: scale(1.2);
                }
            }
        }
    }
}

// details csss here //
.it-team-details {
    &-left {
        margin-right: 40px;
        @media #{$xl,$lg,$md,$xs}{
            margin-right: 0;
        }
    }
    &-area {
        & .it-course-sidebar .social-section {
            margin-bottom: 0;
            padding: 0 15px 60px 15px;
            border-bottom: none;
            & .postbox-social {
                & a {
                    @media #{$xl}{
                        width: 40px;
                        height: 40px;
                        line-height: 35px;
                    }
                    @media #{$lg,$md}{
                        margin-bottom: 10px;
                    }
                    @media #{$xs}{
                        width: 40px;
                        height: 40px;
                        line-height: 35px;
                    }
                    & svg {
                        @media #{$xl,$lg,$md,$xs}{
                            height: 15px;
                        }
                    }
                }
            }
        }
        & .it-course-sidebar-wrap {
            margin-top: -185px;
            @media #{$md,$xs}{
                margin-top: 35px;
            }
        }
    }
}