    <style>
        body {
            height: 2000px; /* Just for demonstration */
            background: linear-gradient(to bottom, #f0f0f0, #ffffff);
            position: relative;
        }
        .back-to-top {
            position: fixed;
            bottom: 20px;
            right: 20px;
            display: none; /* Hidden by default */
            background: #000; /* Customize background */
            color: #fff; /* Customize text color */
            border: none;
            border-radius: 5px;
            padding: 10px;
            cursor: pointer;
            z-index: 1000; /* Make sure it’s on top */
        }
        .social-button {
            position: fixed;
            width: 160px; /* Adjusted for text */
            height: 50px; /* Height adjusted for smaller icons */
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 25px; /* Rounded edges */
            cursor: pointer;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            z-index: 1000;
            transition: transform 0.2s, background-color 0.3s;
            color: white;
            font-size: 14px; /* Text size */
            padding: 5px;
        }
        .social-button.whatsapp {
            background: linear-gradient(135deg, #25D366, #128C7E); /* WhatsApp gradient */
            bottom: 70px; /* Adjusted up by 10 pixels */
            left: 20px; /* Positioned on the left */
        }
        .social-button.telegram {
            background: linear-gradient(135deg, #0088cc, #007bbf); /* Telegram gradient */
            bottom: 70px; /* Adjusted up by 10 pixels */
            right: 20px; /* Positioned on the right */
        }
        .social-button i {
            margin-right: 5px; /* Space between icon and text */
            font-size: 20px; /* Reduced icon size */
        }
        .social-button:hover {
            transform: translateY(-5px) scale(1.05); /* 3D effect */
        }
    </style>