/* ####################################################
    :: Template Name: Essence - Fashion Ecommerce Template
    :: Author: Colorlib
    :: Author URL: https://colorlib.com
    :: Description: Essence is smart & elegant fashion e-commerce Template. It's suitable for all e-commerce business platform.
    :: Version: 1.0.0
    :: Created: April 27, 2018
    :: Last Updated: May 2, 2018
    #################################################### */

    /* ---------------------------------------
    ##### - PLACE YOUR CUSTOM CSS HERE - #####
    --------------------------------------- */

    /* Floating Social Bar */
    .social-info-floating {
        position: fixed;
        bottom: 20px;
        /* Positioned at the bottom */
        z-index: 10000;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .social-info-floating a {
        background: #fbb710;
        color: #131212;
        font-size: 18px; /* Reduced from 22px */
        width: 50px;    /* Reduced from 60px */
        height: 40px;   /* Reduced from 50px */
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: -2px 0 10px rgba(0, 0, 0, 0.2);
        transition: all 0.3s ease;
    }

    /* LTR Default (Left side) - Half Rounded Right */
    html[dir="ltr"] .social-info-floating {
        left: 0;
    }

    html[dir="ltr"] .social-info-floating a {
        border-radius: 0 30px 30px 0;
        padding-right: 5px;
    }

    html[dir="ltr"] .social-info-floating a:hover {
        padding-left: 8px;
        width: 58px;
    }

    /* RTL (Right side) - Half Rounded Left */
    html[dir="rtl"] .social-info-floating {
        right: 0;
    }

    html[dir="rtl"] .social-info-floating a {
        border-radius: 30px 0 0 30px;
        padding-left: 5px;
    }

    html[dir="rtl"] .social-info-floating a:hover {
        padding-right: 8px;
        width: 58px;
    }

    .social-info-floating a:hover {


        background: #131212;
        /* Dark background from image */
        color: #fbb710;
        /* Icon color */
    }

    /* Responsive adjustments */
    @media only screen and (max-width: 767px) {
        .social-info-floating a {
            width: 40px;
            height: 35px;
            font-size: 16px;
        }
    }