.social-icon {
    margin: 0;
    padding: 0;
    list-style: none;
    li {
        color: #8B8B8B;
        display: inline-block;
        font-size: 16px;
        transition: all 0.3s ease-in;
        padding-left: 0;
        +li {
            margin-left: 10px;
        }
        &:hover {
            color: var(--main-color-one);
        }
        &:before {
            display: none !important;
        }
    }
    &.style-01 {
        top: 50%;
        transform: translateY(-50%);
        position: absolute;
        z-index: 999;
        &:after {
            content: '';
            height: 210px;
            width: 1px;
            left: 50%;
            top: 220px;
            transform: translateX(-50%);
            position: absolute;
            background-color: #FFFFFF40;
        }
        &:before {
            content: '';
            height: 210px;
            width: 1px;
            left: 50%;
            top: -280px;
            transform: translateX(-50%);
            position: absolute;
            background-color: #FFFFFF40;
        }
        li {
            display: block;
            width: 30px;
            height: 30px;
            line-height: 30px;
            border-radius: 50%;
            border: 1px solid rgba(220, 187, 135, 0.2);
            ;
            text-align: center;
            background: transparent;
            color: var(--main-color-one);
            font-size: 15px;
            &:hover {
                background-color: var(--main-color-one);
                color: $white;
            }
            +li {
                margin-left: 0;
                margin-top: 10px;
            }
        }
    }
    &.style-02 {
        background-color: #F9F8F7;
        li {
            font-size: 14px;
            font-weight: 600;
            display: block;
            width: 30px;
            height: 30px;
            line-height: 30px;
            transform: scale(0);
            border-radius: 50%;
            text-align: center;
            border: 1px solid var(--main-color-one);
            transition: all 300ms ease-in-out;
            opacity: 0;
            &:hover {
                background-color: var(--main-color-one);
                a {
                    color: #fff;
                    transition: all 300ms ease-in-out;
                }
            }
            +li {
                margin-left: 0;
                margin-top: 10px;
            }
            a {
                color: var(--main-color-one);
            }
            i {
                font-weight: normal;
            }
        }
    }
    &.style-03 {
        li {
            height: 30px;
            width: 30px;
            line-height: 30px;
            border-radius: 50%;
            font-size: 15px;
            background-color: #fff;
            border: 1px solid #19232D;
            text-align: center;
            display: inline-block;
            transition: all 300ms;
            +li {
                margin-left: 10px;
            }
            &:hover {
                border: 1px solid var(--main-color-one);
                background-color: var(--main-color-one);
                a {
                    color: $white;
                }
            }
            a {
                color: var(--heading-color);
            }
            i {
                font-weight: normal;
            }
        }
    }
}