/* ==========================================================================
   FLOATING ACTION BUTTONS (CALL & WHATSAPP AT BOTTOM)
   ========================================================================== */
.floating-actions-container {
  position: fixed;
  bottom: 98px;
  right: 25px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 9998;
}

.floating-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 1.45rem;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
  position: relative;
}

.floating-btn.whatsapp {
  background: #25d366;
  box-shadow: 0 8px 25px rgba(37, 211, 102, 0.45);
  animation: floatPulse 2.5s infinite;
}

.floating-btn.call {
  background: #3b82f6;
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.45);
}

.floating-btn:hover {
  transform: scale(1.12) translateY(-3px);
  color: #ffffff;
}

.floating-tooltip {
  position: absolute;
  right: 65px;
  background: #1e1b2e;
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.4rem 0.8rem;
  border-radius: 8px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transform: translateX(10px);
  transition: all 0.2s ease;
  pointer-events: none;
}

.floating-btn:hover .floating-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

@keyframes floatPulse {
  0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6); }
  70% { box-shadow: 0 0 0 14px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* ==========================================================================
   HIGH-END MODERN PROFESSIONAL FOOTER SECTION
   ========================================================================== */
.footer-modern-section {
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  border-top: 1.5px solid #e2e8f0;
  padding: 4.5rem 0 2rem;
  position: relative;
  overflow: hidden;
}

/* 1. Top Availability Callout Bar */
.footer-availability-banner {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 20px;
  padding: 1.4rem 2.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 3.5rem;
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.04);
  transition: all 0.3s ease;
}
.footer-availability-banner:hover {
  border-color: #c4b5fd;
  box-shadow: 0 12px 35px rgba(124, 58, 237, 0.08);
}

.avail-status-left {
  display: flex;
  align-items: center;
  gap: 1.1rem;
}

.avail-pulse-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  animation: pulseGreenGlow 2s infinite;
  flex-shrink: 0;
}

@keyframes pulseGreenGlow {
  0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
  70% { box-shadow: 0 0 0 12px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.avail-text {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}

.avail-title {
  font-family: var(--font-sans);
  font-size: 1.05rem;
  font-weight: 800;
  color: #0f172a;
}

.avail-sub {
  font-size: 0.8rem;
  color: #64748b;
  font-weight: 500;
}

.avail-btns-right {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-shrink: 0;
}

.btn-footer-chat {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.65rem 1.3rem;
  background: #7c3aed;
  color: #ffffff !important;
  border-radius: 9999px;
  font-weight: 700;
  font-size: 0.86rem;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.3);
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.btn-footer-chat:hover {
  transform: translateY(-2px);
  background: #6d28d9;
  box-shadow: 0 8px 20px rgba(124, 58, 237, 0.4);
}

.btn-footer-talk {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.65rem 1.4rem;
  background: #0f172a;
  color: #ffffff !important;
  border-radius: 9999px;
  font-weight: 700;
  font-size: 0.86rem;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.15);
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.btn-footer-talk:hover {
  background: #1e293b;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.25);
}

/* 2. Main 4-Column Footer Grid */
.footer-columns-grid {
  display: grid;
  grid-template-columns: 1.35fr 0.95fr 1.25fr 1.15fr;
  gap: 2.8rem;
  margin-bottom: 3.5rem;
}

/* Col 1: Brand */
.footer-brand-header {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  margin-bottom: 1.1rem;
}

.footer-logo-circle {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: linear-gradient(135deg, #7c3aed, #ec4899);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 0.95rem;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
}

.footer-logo-name {
  font-family: var(--font-sans);
  font-size: 1.32rem;
  font-weight: 900;
  color: #0f172a;
}

.gradient-text-logo {
  background: linear-gradient(135deg, #7c3aed, #f97316);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.footer-brand-bio {
  font-size: 0.84rem;
  color: #64748b;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.footer-trust-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.75rem;
  border-radius: 9999px;
  background: #ede9fe;
  border: 1px solid #ddd6fe;
  color: #6d28d9;
  font-size: 0.72rem;
  font-weight: 700;
  margin-bottom: 1.2rem;
}

.footer-social-icons {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.footer-social-link {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  text-decoration: none;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}
.footer-social-link:hover {
  transform: translateY(-3px) scale(1.06);
  color: #ffffff;
  background: linear-gradient(135deg, #7c3aed, #ec4899);
  border-color: transparent;
  box-shadow: 0 6px 16px rgba(124, 58, 237, 0.3);
}

/* Col 2 & 3: Links */
.footer-col-title {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 1.2rem;
  position: relative;
}
.footer-col-title::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 22px;
  height: 2.5px;
  background: #7c3aed;
  border-radius: 2px;
}

.footer-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.footer-nav-list li a {
  color: #64748b;
  text-decoration: none;
  font-size: 0.84rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  transition: all 0.2s ease;
}
.footer-nav-list li a i {
  font-size: 0.62rem;
  color: #94a3b8;
  transition: transform 0.2s ease;
}
.footer-nav-list li a:hover {
  color: #7c3aed;
  transform: translateX(4px);
}
.footer-nav-list li a:hover i {
  color: #7c3aed;
  transform: translateX(2px);
}

/* Solutions & Legal Custom Links with Icon Boxes */
.footer-custom-links li {
  margin-bottom: 0.15rem;
}

.f-custom-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.6rem !important;
  padding: 0.35rem 0.55rem;
  border-radius: 8px;
  color: #334155 !important;
  font-size: 0.83rem !important;
  font-weight: 700 !important;
  transition: all 0.2s ease;
}

.f-link-icon-box {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: #ede9fe;
  color: #7c3aed;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.f-custom-link:hover {
  background: #ffffff;
  color: #7c3aed !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
}
.f-custom-link:hover .f-link-icon-box {
  background: #7c3aed;
  color: #ffffff;
}

.f-custom-link.highlight-link {
  background: #faf5ff;
  border: 1px solid #ddd6fe;
  color: #7c3aed !important;
}
.f-custom-link.highlight-link .f-link-icon-box {
  background: #7c3aed;
  color: #ffffff;
}

/* Col 4: Contact Lines */
.footer-contact-items {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-bottom: 1.2rem;
}

.footer-contact-line {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.footer-contact-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  flex-shrink: 0;
}
.footer-contact-icon.purple { background: #ede9fe; color: #7c3aed; }
.footer-contact-icon.orange { background: #ffedd5; color: #ea580c; }
.footer-contact-icon.blue { background: #dbeafe; color: #2563eb; }

.footer-contact-details {
  display: flex;
  flex-direction: column;
}

.f-lbl {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #94a3b8;
  letter-spacing: 0.4px;
}

.f-val {
  font-size: 0.84rem;
  font-weight: 700;
  color: #1e293b;
  text-decoration: none;
  transition: color 0.2s ease;
}
a.f-val:hover {
  color: #7c3aed;
}

.footer-global-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.85rem;
  border-radius: 9999px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  color: #475569;
  font-size: 0.72rem;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(0,0,0,0.02);
}
.footer-global-pill i {
  color: #3b82f6;
}

/* 3. Bottom Copyright & Legal Links Bar */
.footer-bottom-bar {
  border-top: 1px solid #e2e8f0;
  padding-top: 1.8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.2rem;
}

.footer-copy-text {
  font-size: 0.78rem;
  color: #64748b;
  margin: 0;
}
.footer-copy-text strong {
  color: #0f172a;
}

.footer-bottom-legal-links {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.footer-bottom-legal-links a {
  font-size: 0.76rem;
  font-weight: 600;
  color: #64748b;
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer-bottom-legal-links a:hover {
  color: #7c3aed;
}

.f-legal-dot {
  color: #cbd5e1;
  font-size: 0.65rem;
}

.footer-bottom-right {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.btn-back-to-top {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.95rem;
  border-radius: 9999px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  color: #475569;
  font-size: 0.74rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.btn-back-to-top:hover {
  background: #0f172a;
  color: #ffffff;
  border-color: #0f172a;
  transform: translateY(-2px);
}

/* ==========================================================================
   MOBILE BOTTOM APP BAR
   ========================================================================== */
.mobile-bottom-app-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 64px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(14px);
  border-top: 1px solid #e2e8f0;
  z-index: 9990;
  align-items: center;
  justify-content: space-around;
  padding: 0 0.5rem;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.05);
}

.mobile-bar-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  text-decoration: none;
  color: #64748b;
  flex: 1;
  height: 100%;
  transition: all 0.2s ease;
}

.bar-tab-icon-box {
  font-size: 1.15rem;
}

.bar-tab-lbl {
  font-size: 0.65rem;
  font-weight: 700;
}

.mobile-bar-tab.active,
.mobile-bar-tab:hover {
  color: #7c3aed;
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS
   ========================================================================== */
@media (max-width: 1024px) {
  .footer-columns-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
  }
  .footer-availability-banner {
    flex-direction: column;
    align-items: flex-start;
    padding: 1.5rem;
  }
  .avail-btns-right {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 768px) {
  body {
    padding-bottom: 92px !important;
  }
  .footer-columns-grid {
    grid-template-columns: 1fr;
    gap: 2.2rem;
  }

  /* Dark Liquid Glass Neumorphic Bottom App Bar */
  .mobile-bottom-app-bar {
    display: flex !important;
    position: fixed !important;
    bottom: 12px !important;
    left: 12px !important;
    right: 12px !important;
    height: 66px !important;
    max-width: 480px !important;
    margin: 0 auto !important;
    background: rgba(11, 15, 25, 0.88) !important;
    backdrop-filter: blur(24px) saturate(190%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(190%) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
    border-top: 1.5px solid rgba(255, 255, 255, 0.22) !important;
    border-radius: 26px !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), 
                0 4px 12px rgba(0, 0, 0, 0.3),
                inset 0 1px 1px rgba(255, 255, 255, 0.25), 
                inset 0 -2px 4px rgba(0, 0, 0, 0.7) !important;
    z-index: 99990 !important;
    align-items: center !important;
    justify-content: space-around !important;
    padding: 0.3rem 0.5rem !important;
    overflow: hidden !important;
  }

  /* Liquid Glass Ambient Shimmer Overlay */
  .mobile-bottom-app-bar::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 200% !important;
    height: 100% !important;
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.04) 40%,
      rgba(255, 255, 255, 0.1) 50%,
      rgba(255, 255, 255, 0.04) 60%,
      transparent 100%
    ) !important;
    animation: liquidBarShimmer 6s infinite linear !important;
    pointer-events: none !important;
  }

  @keyframes liquidBarShimmer {
    0% { transform: translateX(0); }
    100% { transform: translateX(50%); }
  }

  .mobile-bar-tab {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    text-decoration: none !important;
    color: rgba(203, 213, 225, 0.65) !important;
    flex: 1 !important;
    height: 100% !important;
    position: relative !important;
    z-index: 2 !important;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    border-radius: 18px !important;
  }

  /* Fully Rounded Circular Icon with Glowing Snake Light Border */
  .bar-tab-icon-box {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.08rem !important;
    position: relative !important;
    background: radial-gradient(circle at 35% 35%, rgba(30, 41, 59, 0.95), rgba(11, 15, 25, 0.98)) !important;
    color: rgba(226, 232, 240, 0.85) !important;
    z-index: 1 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5),
                inset 0 1px 2px rgba(255, 255, 255, 0.25) !important;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  }

  /* Neon Snake Light Tracer Running Around Circle */
  .bar-tab-icon-box::before {
    content: '' !important;
    position: absolute !important;
    inset: -2px !important;
    border-radius: 50% !important;
    padding: 2px !important;
    background: conic-gradient(
      from 0deg,
      transparent 0deg,
      transparent 180deg,
      #7c3aed 240deg,
      #ec4899 290deg,
      #f97316 330deg,
      #38bdf8 350deg,
      #ffffff 360deg
    ) !important;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
    -webkit-mask-composite: xor !important;
    mask-composite: exclude !important;
    animation: snakeBorderRun 2.4s linear infinite !important;
    opacity: 0.75 !important;
    filter: drop-shadow(0 0 5px rgba(236, 72, 153, 0.8)) !important;
    transition: opacity 0.3s ease, filter 0.3s ease !important;
    z-index: -1 !important;
  }

  @keyframes snakeBorderRun {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  .bar-tab-lbl {
    font-size: 0.64rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.2px !important;
    color: rgba(148, 163, 184, 0.85) !important;
    transition: all 0.3s ease !important;
  }

  /* Hover / Focus State */
  .mobile-bar-tab:hover .bar-tab-icon-box,
  .mobile-bar-tab:focus .bar-tab-icon-box {
    transform: translateY(-3px) scale(1.1) !important;
    background: radial-gradient(circle at 35% 35%, rgba(51, 65, 85, 0.95), rgba(15, 23, 42, 0.98)) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6),
                inset 0 1px 3px rgba(255, 255, 255, 0.4) !important;
  }
  .mobile-bar-tab:hover .bar-tab-icon-box::before {
    opacity: 1 !important;
    filter: drop-shadow(0 0 8px #ec4899) drop-shadow(0 0 4px #38bdf8) !important;
    animation-duration: 1.8s !important;
  }

  /* Active Tab: Bright Liquid Neon Glow & Snake Light */
  .mobile-bar-tab.active {
    color: #ffffff !important;
  }

  .mobile-bar-tab.active .bar-tab-icon-box {
    background: radial-gradient(circle at 35% 35%, #7c3aed 0%, #db2777 55%, #1e1b4b 100%) !important;
    color: #ffffff !important;
    transform: translateY(-5px) scale(1.16) !important;
    box-shadow: 0 10px 25px rgba(236, 72, 153, 0.6),
                0 0 20px rgba(124, 58, 237, 0.6),
                inset 0 2px 4px rgba(255, 255, 255, 0.6),
                inset 0 -2px 4px rgba(0, 0, 0, 0.5) !important;
    animation: liquidIconFloat 2.8s ease-in-out infinite !important;
  }

  .mobile-bar-tab.active .bar-tab-icon-box::before {
    opacity: 1 !important;
    background: conic-gradient(
      from 0deg,
      transparent 0deg,
      #7c3aed 120deg,
      #ec4899 220deg,
      #f97316 300deg,
      #38bdf8 340deg,
      #ffffff 360deg
    ) !important;
    filter: drop-shadow(0 0 12px #ec4899) drop-shadow(0 0 6px #38bdf8) !important;
    animation-duration: 1.5s !important;
  }

  .mobile-bar-tab.active .bar-tab-lbl {
    color: #ffffff !important;
    font-weight: 800 !important;
    text-shadow: 0 0 10px rgba(236, 72, 153, 0.8), 0 0 5px rgba(124, 58, 237, 0.8) !important;
  }

  /* Neon Glowing Liquid Pill Indicator */
  .mobile-bar-tab.active::after {
    content: '' !important;
    position: absolute !important;
    bottom: -2px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 18px !important;
    height: 3.5px !important;
    background: linear-gradient(90deg, #38bdf8, #ec4899, #f97316) !important;
    border-radius: 9999px !important;
    box-shadow: 0 0 12px #ec4899, 0 0 6px #38bdf8 !important;
    animation: liquidPillGlow 2.5s infinite alternate !important;
  }

  @keyframes liquidIconFloat {
    0%, 100% {
      transform: translateY(-4px) scale(1.14);
      filter: drop-shadow(0 0 6px rgba(168, 85, 247, 0.5));
    }
    50% {
      transform: translateY(-7px) scale(1.18);
      filter: drop-shadow(0 0 12px rgba(236, 72, 153, 0.7));
    }
  }

  @keyframes liquidPillGlow {
    0% {
      width: 14px;
      opacity: 0.8;
      box-shadow: 0 0 6px #ec4899;
    }
    100% {
      width: 22px;
      opacity: 1;
      box-shadow: 0 0 14px #ec4899, 0 0 8px #a855f7;
    }
  }

  .floating-actions-container {
    bottom: 152px !important;
    right: 16px !important;
    gap: 8px !important;
    z-index: 9998 !important;
  }
  .floating-btn {
    width: 46px !important;
    height: 46px !important;
    font-size: 1.22rem !important;
  }
  .footer-modern-section {
    padding-bottom: 3.5rem;
  }
  .footer-bottom-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
}