/* =============================
       Floating Social Buttons
    ============================== */
     .floating-social {
         position: fixed;
         top: 50%;
         left: 13px;
         /* 🔹 change to left:20px if you want left side */
         transform: translateY(-50%);
         display: flex;
         flex-direction: column;
         gap: 12px;
         z-index: 9999;
         transition: all 0.4s ease;
     }

     .floating-social.hide {
         opacity: 0;
         transform: translateY(-50%) translateX(80px);
         pointer-events: none;
     }

     .floating-social .social-btn {
         width: 48px;
         height: 48px;
         border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
         color: #fff;
         font-size: 22px;
         text-decoration: none;
         transition: all 0.3s ease;
         box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
         position: relative;
         overflow: hidden;
     }


     /* Hover Effects */
     .floating-social .social-btn:hover {
         transform: scale(1.12);
         box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
     }

     /* Tooltip */
     .floating-social .social-btn::after {
         content: attr(title);
         position: absolute;
         right: 60px;
         background: #333;
         color: #fff;
         padding: 6px 10px;
         border-radius: 6px;
         font-size: 14px;
         opacity: 0;
         transform: translateY(5px);
         pointer-events: none;
         transition: all 0.3s ease;
         white-space: nowrap;
     }

     .floating-social .social-btn:hover::after {
         opacity: 1;
         transform: translateY(0);
     }

     /* =============================
       Toggle Button
    ============================== */
     .toggle-social-btn {
         position: fixed;
         top: 92%;
         left: 13px;
         /* adjust if on left */
         transform: translateY(-50%);
         width: 45px;
         height: 45px;
         border-radius: 50%;
         background-color: #333;
         color: #fff;
         border: none;
         cursor: pointer;
         font-size: 22px;
         display: flex;
         align-items: center;
         justify-content: center;
         z-index: 10000;
         box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
         transition: background 0.3s ease;
     }

     .toggle-social-btn:hover {
         background-color: #555;
     }

     /* Demo Content */
     .content {
         text-align: center;
         margin-top: 100px;
     }