@use "../utilities" as *;

/**----------------------------------------
START: Theme Team Details CSS
----------------------------------------*/
.team-details-img{
    @include breakpoint(sm){
        margin-bottom: 30px;
    }
    img{
        width: 100%;
    }
}

.team-author-details{
    padding-left: 30px;
    @include breakpoint(md){
        padding-left: 0;
    }
    .title{
        font-size: 36px;
        font-weight: 700;
        margin-bottom: 15px;
    }
    p{
        font-size: 16px;
        margin-bottom: 0;
    }
    .author-contact{
        list-style: none;
        margin: 30px 0;
        padding-top: 30px;
        border-top: 1px solid var(--lt-color-border-2);
        li{
            color: var(--lt-color-heading-primary);
            font-weight: 600;
            font-size: 16px;
            &:not(:last-of-type){
                margin-bottom: 10px;
            }
            a{
                font-weight: 400;
                color: var(--lt-color-text-body);
                margin-left: 20px;
                &:hover{
                    color: var(--lt-color-theme-primary);
                }
            }
        }
    }
    .author-social{
        list-style: none;
        margin-bottom: 30px;
        li{
            display: inline-flex;
            &:not(:last-of-type){
                margin-right: 10px;
            }
            a{
                font-size: 15px;
                color: var(--lt-color-theme-primary);
                width: 35px;
                height: 35px;
                @include flex-center;
                border: 1px solid var(--lt-color-border-2);
                &:hover{
                    background-color: var(--lt-color-theme-primary);
                    color: var(--lt-color-common-white);
                    border: 1px solid var(--lt-color-theme-primary);
                }
            }
        }
    }
}

.team-details-content{
    margin-top: 40px;
    .details-box{
        margin-bottom: 35px;
    }
    .details-header{
        font-size: 40px;
        font-weight: 700;
        margin-bottom: 15px;
        @include breakpoint(md){
            font-size: 36px;
        }
        @include breakpoint(sm){
            font-size: 30px;
        }
    }
    p{
        margin-bottom: 25px;
    }
    .details-list{
        margin-left: 18px;
        list-style: number;
        li{
            color: var(--lt-color-heading-primary);
            font-size: 16px;
            font-weight: 400;
        }
    }
    .desc{
        margin-bottom: 0;
    }
}


/* !END: Theme Team Details CSS */