:root {
  --col-orange: #d17842;
  --col-dark: #0c0f14;
}

/* Floating Button Container */
:root {
  --col-orange: #d17842;
  --col-dark: #0c0f14;
}

/* Floating Button Container */
.floating-buttons {
  position: fixed;
  top: 40%;
  right: 30px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  background: transparent;
  padding: 0;
  border-radius: 30px;
  box-shadow: none;
  z-index: 9999;
}

/* Each Floating Button */
.float-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  width: 29px;
 height: 25px;
  transition: all 0.3s ease;
  position: relative;

  /* ✅ Add pulse animation */
  animation: floatPulse 2s ease-in-out infinite;
}

/* Icon Styling */
.float-btn img {
  width: 14px;
    height: 14px;
  filter: 
  brightness(0) saturate(100%) 
  invert(37%) sepia(90%) saturate(6368%) hue-rotate(11deg) 
  brightness(159%) contrast(117%);
  transition: all 0.3s ease;
}

/* Hover Effects */
.float-btn:hover {
  border-color: var(--col-orange);
  transform: translateY(-3px);
  box-shadow: 0 0 10px rgba(209, 120, 66, 0.4);
}

.float-btn:hover img {
  filter: brightness(0) invert(1); /* icon becomes white */
  transform: scale(1.1);
}

/* Tooltip Box */
.float-btn[data-title]:hover::after {
  content: attr(data-title);
  position: absolute;
  right: 45px; /* moved 5px closer (was 50px) */
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  font-size: 12px;
  padding: 4px 10px 4px 8px; /* balanced padding */
  border-radius: 6px;
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  pointer-events: none;
  z-index: 100;
}

/* Arrow perfectly attached to tooltip */
.float-btn[data-title]:hover::before {
  content: '';
  position: absolute;
  right: 37px; /* aligned with tooltip’s right edge */
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 6px solid rgba(0, 0, 0, 0.75); /* matches tooltip color */
  pointer-events: none;
  z-index: 101;
}

@media (min-width: 360px) and (max-width: 768px) {
  .floating-buttons {
    right: 10px;
  }
}
@media (min-width: 150px) and (max-width: 359px) {
  .floating-buttons {
    right: 8px;
  }
}

@keyframes floatPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 120px rgba(183, 131, 99, 0.4); /* stronger glow */
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 40px rgba(232, 216, 216, 0.993); /* more intense glow at peak */
  }
}







.ai-button {
      --sz-btn: 68px;
      --space: calc(var(--sz-btn) / 5.5);
      --gen-sz: calc(var(--space) * 2);
      --sz-text: calc(var(--sz-btn) - var(--gen-sz));
      
      position: relative;
      outline: 0;
      height: 29px;
      width: 29px;
      border: 1px solid transparent;
      border-radius: 7px;
      display: flex;
      align-items: center;
      justify-content: center;
      aspect-ratio: 1;
      cursor: pointer;
      transition: transform 0.2s;
      /* background: linear-gradient(45deg, #efad21, #ffd60f); */
      background: transparent;
      box-shadow: 
        0 1px 2px 0 rgba(60, 64, 67, 0.3),
        0 2px 6px 2px rgba(60, 64, 67, 0.15),
        0 30px 60px -30px rgba(0, 0, 0, 0.3),
        0 -2px 6px 0 rgba(52, 52, 52, 0.35) inset;
      z-index: 10;
      flex-shrink: 0;
      border: 1px solid rgba(255, 255, 255, 0.2);
    }

    .ai-button:active {
      transform: scale(0.95);
    }

    .ai-button svg {
      position: absolute;
      z-index: 10;
      overflow: visible;
      transition: all 0.3s;
      color: #ffea50;
             top: 6px;
    
    left: -1px;
    height: 14px;      width: var(--gen-sz);
      animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }
    @keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

    .ai-button:hover svg,
    .container:hover .ai-button svg {
          color: white;
    height: 22px;
    width: var(--sz-text);
    left: 13px;
    top: 14px;
    }

    @keyframes pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.5; }
    }

    .ai-button span {
      font-size: 14px;
      font-weight: 800;
      line-height: 1;
      color: white;
      transition: opacity 0.2s;
    }

    .ai-button:hover span,
    .container:hover .ai-button span {
      opacity: 0;
    }

    /* SOCIAL BUTTONS CONTAINER */
    .socialBtn {
      width: 0;
      display: flex;
      align-items: center;
      gap: 0;
      padding: 0;
      background: rgb(44, 44, 44);
      border-radius: 50px;
      border: none;
      position: absolute;
      right: 42px;
      /* transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); */
      min-height: 68px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0);
      overflow: visible;
      opacity: 0;
    }

    .container:hover .socialBtn {
   bottom: 28px;
    right: 51px;
    min-height: 38px;
    width: 166px;
    padding: 0 12px 0 12px;
    gap: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    opacity: 1;
}

    .socialIcon {
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      transition: all 0.3s ease;
      flex-shrink: 0;
      opacity: 0;
      transform: translateX(20px);
      text-decoration: none;
    }

    .container:hover .socialIcon {
      opacity: 1;
      transform: translateX(0);
    }

    .container:hover .socialIcon:nth-child(1) {
      transition-delay: 0.1s;
    }

    .container:hover .socialIcon:nth-child(2) {
      transition-delay: 0.2s;
    }

    .container:hover .socialIcon:nth-child(3) {
      transition-delay: 0.3s;
    }

    .container:hover .socialIcon:nth-child(4) {
      transition-delay: 0.4s;
    }

    .socialSvg {
      width: 18px !important;
      height: 18px !important;
      transition: all 0.3s ease;
      display: block;
    }

    .socialSvg path {
      fill: rgb(255, 255, 255);
      transition: all 0.3s ease;
    }
    .socialSvg1 path {
      fill: rgb(217, 119, 87);
      transition: all 0.3s ease;
    }
    .socialSvg2 path {
     background: linear-gradient(
  to right, 
  rgb(66, 133, 244), 
  rgb(234, 67, 53), 
  rgb(251, 188, 4), 
  rgb(52, 168, 83)
);
      transition: all 0.3s ease;
    }

  
    
    

    .socialIcon .tooltip {
      position: absolute;
      bottom: 79%;
      left: 50%;
      transform: translateX(-50%);
      margin-bottom: 10px;
      background-color: #fff;
      color: #000;
          padding: 4px 12px;
      border-radius: 8px;
      opacity: 0;
      visibility: hidden;
      font-size: 12px;
      font-weight: 600;
      transition: all 0.3s ease;
      white-space: nowrap;
      z-index: 999999;
      box-shadow: 0 4px 12px rgba(0,0,0,0.25);
      border: 1px solid #eee;
      pointer-events: none;
    }

    .socialIcon:hover .tooltip {
      opacity: 1;
      visibility: visible;
      margin-bottom: 15px;
    }

    .instagramIcon:hover .socialSvg1 path { 
      cursor: pointer;
      fill: rgb(255, 255, 255); 
      transform: scale(1.1); 
    }
    
    .twitterIcon:hover .socialSvg path { 
      fill: rgb(114, 107, 237); 
      transform: scale(1.1); 
    }
    
    .linkedinIcon:hover .socialSvg path { 
      fill: #0072b1; 
      transform: scale(1.1); 
    }
    
    .whatsappIcon:hover .socialSvg path { 
      fill: #128c7e; 
      transform: scale(1.1); 
    }

    .socialIcon:hover .socialSvg {
      cursor: pointer ;
      animation: slide-in-top 0.3s both;
    }

    @keyframes slide-in-top {
      0% { 
        transform: translateY(-10px) scale(0.8); 
        opacity: 0; 
      }
      100% { 
        transform: translateY(0) scale(1); 
        opacity: 1; 
      }
    }

    @media (max-width: 480px) {
      .container:hover .socialBtn {
        width: 200px;
        padding: 0 10px 0 20px;
      }
      .socialIcon { 
        width: 20px; 
        height: 20px; 
      }
      .socialSvg { 
        width: 16px !important; 
        height: 16px !important; 
      }
      .socialIcon .tooltip { 
        font-size: 12px; 
        padding: 6px 10px; 
        margin-bottom: 8px;
      }
      .socialIcon:hover .tooltip { 
        margin-bottom: 12px;
      }
    }