/* Container */
/*.social-buttons {
    display: flex;*/ /* left to right */
    /*gap: 20px;*/ /* spacing */
/*}*/

/* Sparkling effect */


/* Common Button Style */
/*.social-btn {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 28px;
    cursor: pointer;
    animation: sparkle 2s infinite;
    transition: transform 0.3s;
}

    .social-btn:hover {
        transform: scale(1.2);
    }*/

/* Specific Colors */
/*.facebook {
    background: #3b5998;
}

.instagram {
    background: radial-gradient(circle at 30% 30%, #f58529, #dd2a7b, #8134af, #515bd4);
}

.twitter {
    background: #1da1f2;
}

.linkedin {
    background: #0077b5;
}

.youtube {
    background: #ff0000;
}

.telegram {
    background: #0088cc;
}*/

/* Container */
/*.social-buttons {
    display: flex;*/ /* left to right */
    /*gap: 20px;*/ /* spacing */
/*}*/

/* Sparkling effect */
/*@keyframes sparkle {
    0% {
        box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
    }

    50% {
        box-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
    }

    100% {
        box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
    }
}*/


/* Common Button Style */
/*.social-btn {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 28px;
    cursor: pointer;*/
    /* Removed the original sparkle animation here */
    /*transition: transform 0.3s;
    position: relative;*/ /* This is crucial for positioning the pseudo-element */
/*}*/

    /* Hover effect */
    /*.social-btn:hover {
        transform: scale(1.2);
    }*/

    /* The new pulsating ring effect */
    /*.social-btn::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;*/ /* Initial size of the ring */
        /*height: 100%;
        border-radius: 50%;
        border: 3px solid transparent;*/ /* The initial transparent border */
        /*transform: translate(-50%, -50%) scale(1);
        opacity: 1;
        animation: pulse-ring 4s infinite cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }*/

/* Keyframes for the new animation */
/*@keyframes pulse-ring {
    0% {
        transform: translate(-50%, -50%) scale(1);
        border-color: #007bff;*/ /* blue */
        /*opacity: 1;
    }

    25% {
        border-color: #ffd700;*/ /* yellow */
    /*}

    50% {
        transform: translate(-50%, -50%) scale(1.5);*/ /* Scale up */
        /*border-color: #32cd32;*/ /* green */
        /*opacity: 0.5;*/ /* Fade out */
    /*}

    75% {
        border-color: #007bff;*/ /* blue */
    /*}

    100% {
        transform: translate(-50%, -50%) scale(1);
        border-color: #007bff;
        opacity: 1;
    }
}*/

/* Specific Colors */
/*.facebook {
    background: #3b5998;
}

.instagram {
    background: radial-gradient(circle at 30% 30%, #f58529, #dd2a7b, #8134af, #515bd4);
}

.twitter {
    background: #1da1f2;
}

.linkedin {
    background: #0077b5;
}

.youtube {
    background: #ff0000;
}

.telegram {
    background: #0088cc;
}*/

/* Container */
/* Container */
/* Container */
.social-buttons {
    display: flex;
    gap: 20px;
    justify-content: center; /* Center the icons on smaller screens */
    flex-wrap: wrap; /* Allow icons to wrap to the next line */
}

/* Common Button Style */
.social-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 28px;
    cursor: pointer;
    transition: transform 0.3s;
    position: relative;
    z-index: 1;
}

    /* Hover effect */
    .social-btn:hover {
        transform: scale(1.2);
    }

    /* The moving ring effect */
    .social-btn::before {
        content: '';
        position: absolute;
        top: -5px;
        left: -5px;
        width: 55px;
        height: 54px;
        border-radius: 50%;
        border: 3px solid transparent;
        border-top-color: #fff;
        transform-origin: center center;
        transform: rotate(0deg);
        animation: rotate-ring 3s linear infinite;
        z-index: 0;
    }

/* Keyframes for the rotation animation */
@keyframes rotate-ring {
    0% {
        transform: rotate(0deg);
        border-top-color: #fff;
        border-right-color: #007bff;
        border-bottom-color: #ffd700;
        border-left-color: #32cd32;
    }

    25% {
        border-top-color: #32cd32;
        border-right-color: #fff;
        border-bottom-color: #007bff;
        border-left-color: #ffd700;
    }

    50% {
        border-top-color: #ffd700;
        border-right-color: #32cd32;
        border-bottom-color: #fff;
        border-left-color: #007bff;
    }

    75% {
        border-top-color: #007bff;
        border-right-color: #ffd700;
        border-bottom-color: #32cd32;
        border-left-color: #fff;
    }

    100% {
        transform: rotate(360deg);
        border-top-color: #fff;
        border-right-color: #007bff;
        border-bottom-color: #ffd700;
        border-left-color: #32cd32;
    }
}

/* Specific Colors */
.facebook {
    background: #3b5998;
}

.instagram {
    background: radial-gradient(circle at 30% 30%, #f58529, #dd2a7b, #8134af, #515bd4);
}

.twitter {
    background: #1da1f2;
}

.linkedin {
    background: green;
}

.youtube {
    background: #ff0000;
}

.telegram {
    background: #0088cc;
}
.social-box {
    
    border-radius: 10px;
    padding: 13px 15px 9px;
    position: relative;
    text-align: center;
    display: inline-block;
    width: 92%;
}

.social-title {
    position: absolute;
    top: -14px;
    right: 36%;
    background: #fff;
    padding: 0 10px;
    font-weight: bold;
}

/* Responsive fix */
@media (max-width: 600px) {
    .social-title {
        font-size: 14px;
        right: 49px;
        top: -12px;
    }

    .social-box {
        padding: 25px 10px 15px; /* tighter padding for small screens */
        width: 88%;
    }
}

/* -------------------------------------------------------------------------- */
/* RESPONSIVE STYLES                               */
/* -------------------------------------------------------------------------- */

@media (max-width: 768px) {
    /* Adjust styles for screens smaller than 768px (e.g., tablets and phones) */
    .social-buttons {
        gap: 10px; /* Reduce spacing between icons */
    }

    .social-btn {
        width: 50px;
        height: 50px;
        font-size: 20px; /* Reduce icon size */
    }

        .social-btn::before {
            width: 60px; /* Adjust ring size */
            height: 60px;
            border-width: 2px; /* Reduce border thickness */
            top: -5px; /* Adjust ring position */
            left: -5px;
        }
}

@media (max-width: 480px) {
    /* Adjust styles for screens smaller than 480px (e.g., smartphones) */
    .social-btn {
        width: 35px;
        height: 35px;
        font-size: 16px;
    }

        .social-btn::before {
            width: 41px;
            height: 41px;
            top: -5px;
            left: -5px;
        }
}