.elementor-876 .elementor-element.elementor-element-3d849e9{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-876 .elementor-element.elementor-element-12eb617{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}/* Start custom CSS for html, class: .elementor-element-12eb617 *//* ============================================================
   footer.css — PREMIUM LUXURY FOOTER
   Full‑width, edge‑to‑edge, responsive
   ============================================================ */

/* ----- CSS Variables (easy editing) ----- */
:root {
  --footer-bg-dark: #0B1120;
  --footer-bg-mid: #111D2E;
  --footer-bg-light: #1A2A3E;
  --footer-glass-bg: rgba(255, 255, 255, 0.04);
  --footer-glass-border: rgba(255, 255, 255, 0.07);
  --footer-glass-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  --footer-text-primary: #F1F5F9;
  --footer-text-secondary: #94A3B8;
  --footer-text-muted: #64748B;
  --footer-accent: #818CF8;
  --footer-accent-glow: rgba(129, 140, 248, 0.25);
  --footer-emerald: #34D399;
  --footer-emerald-glow: rgba(52, 211, 153, 0.15);
  --footer-cyan: #22D3EE;
  --footer-cyan-glow: rgba(34, 211, 238, 0.12);
  --footer-whatsapp: #25D366;
  --footer-whatsapp-dark: #1DA851;
  --footer-radius: 18px;
  --footer-radius-sm: 12px;
  --footer-radius-full: 60px;
  --footer-transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --footer-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --footer-font-display: 'Playfair Display', serif;
}

/* ----- Reset & Base (full‑width) ----- */
.premium-footer *,
.premium-footer *::before,
.premium-footer *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.premium-footer {
  font-family: var(--footer-font);
  color: var(--footer-text-primary);
  background: var(--footer-bg-dark);
  padding: 0;
  position: relative;
  overflow: hidden;
  width: 100vw;                     /* edge‑to‑edge */
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* ===== Background Layers (animated glow) ===== */
.footer-bg-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.footer-bg-layer .bg-grad-1 {
  position: absolute;
  top: -30%;
  left: -10%;
  width: 60%;
  height: 70%;
  background: radial-gradient(ellipse, rgba(129, 140, 248, 0.12) 0%, transparent 70%);
  animation: bgGlowFloat 12s ease-in-out infinite alternate;
}
.footer-bg-layer .bg-grad-2 {
  position: absolute;
  bottom: -20%;
  right: -10%;
  width: 50%;
  height: 60%;
  background: radial-gradient(ellipse, rgba(52, 211, 153, 0.08) 0%, transparent 70%);
  animation: bgGlowFloat 16s ease-in-out infinite alternate-reverse;
}
.footer-bg-layer .bg-grad-3 {
  position: absolute;
  top: 40%;
  left: 30%;
  width: 40%;
  height: 40%;
  background: radial-gradient(ellipse, rgba(34, 211, 238, 0.06) 0%, transparent 70%);
  animation: bgGlowFloat 20s ease-in-out infinite alternate;
}
@keyframes bgGlowFloat {
  0% { transform: translate(0,0) scale(1); }
  100% { transform: translate(40px,-30px) scale(1.1); }
}

/* ----- Floating Particles ----- */
.particles-container {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.particle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  box-shadow: 0 0 20px rgba(129, 140, 248, 0.15);
  animation: particleFloat var(--duration,15s) ease-in-out infinite alternate;
  opacity: 0;
  will-change: transform, opacity;
}
@keyframes particleFloat {
  0% { transform: translate(0,0) scale(0.5); opacity: 0; }
  20% { opacity: 0.6; }
  80% { opacity: 0.6; }
  100% { transform: translate(var(--tx,80px), var(--ty,-60px)) scale(1); opacity: 0; }
}

/* ----- Main Container (full‑width, internal padding) ----- */
.footer-container {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 0 40px;                /* side breathing space, no max‑width */
}

/* ============================================================
   SECTION 1 — NEWSLETTER (at the very top)
   ============================================================ */
.footer-newsletter {
  padding: 40px 0 36px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  margin-bottom: 36px;
  animation: footerFadeUp 0.9s ease 0.1s both;
  width: 100%;
}

.newsletter-card {
  background: var(--footer-glass-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--footer-glass-border);
  border-radius: var(--footer-radius);
  padding: 48px 56px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.25);
  position: relative;
  overflow: hidden;
  text-align: center;
  min-height: 380px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 0 auto;
}

/* Animated glass glow reflection */
.newsletter-card::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: var(--footer-radius);
  padding: 2px;
  background: conic-gradient(from var(--angle, 0deg),
      transparent 0%,
      rgba(129, 140, 248, 0.3) 20%,
      rgba(52, 211, 153, 0.2) 40%,
      rgba(34, 211, 238, 0.2) 60%,
      rgba(129, 140, 248, 0.3) 80%,
      transparent 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: borderGlow 6s linear infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes borderGlow {
  0% { --angle: 0deg; }
  100% { --angle: 360deg; }
}
@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.newsletter-card::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at 30% 20%, rgba(129, 140, 248, 0.06), transparent 60%);
  pointer-events: none;
  animation: newsletterGlow 8s ease-in-out infinite alternate;
  z-index: 0;
}
@keyframes newsletterGlow {
  0% { transform: translate(0,0) scale(1); }
  100% { transform: translate(20px,-20px) scale(1.1); }
}

.newsletter-card > * { position: relative; z-index: 1; }

.newsletter-card h3 {
  font-family: var(--footer-font-display);
  font-size: 1.8rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}
.newsletter-card h3 span {
  background: linear-gradient(135deg, var(--footer-accent), var(--footer-emerald));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.newsletter-card .sub-heading {
  font-size: 1rem;
  color: var(--footer-text-secondary);
  max-width: 560px;
  margin: 0 auto 24px;
  line-height: 1.7;
}

/* Benefits — premium animated icons */
.newsletter-benefits {
  display: flex;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.newsletter-benefits .benefit-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--footer-text-secondary);
  transition: all var(--footer-transition);
  cursor: default;
}
.newsletter-benefits .benefit-item i {
  font-size: 1.4rem;
  color: var(--footer-emerald);
  transition: all var(--footer-transition);
  animation: benefitBounce 2s ease-in-out infinite;
}
.newsletter-benefits .benefit-item:nth-child(2) i { animation-delay: 0.3s; }
.newsletter-benefits .benefit-item:nth-child(3) i { animation-delay: 0.6s; }
.newsletter-benefits .benefit-item:nth-child(4) i { animation-delay: 0.9s; }
@keyframes benefitBounce {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-6px) scale(1.1); }
}
.newsletter-benefits .benefit-item:hover i {
  transform: scale(1.25) rotate(-4deg);
  text-shadow: 0 0 30px var(--footer-emerald-glow);
  color: #fff;
}
.newsletter-benefits .benefit-item:hover { color: #fff; }

/* Newsletter Form */
.newsletter-form {
  display: flex;
  gap: 14px;
  max-width: 560px;
  width: 100%;
  margin: 0 auto;
  flex-wrap: wrap;
  justify-content: center;
}
.newsletter-form .input-group {
  flex: 1;
  min-width: 240px;
  position: relative;
}
.newsletter-form input {
  width: 100%;
  padding: 14px 22px;
  border-radius: var(--footer-radius-full);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size: 0.95rem;
  font-family: var(--footer-font);
  transition: all var(--footer-transition);
  outline: none;
  backdrop-filter: blur(4px);
}
.newsletter-form input::placeholder { color: var(--footer-text-muted); }
.newsletter-form input:focus {
  border-color: var(--footer-accent);
  box-shadow: 0 0 30px var(--footer-accent-glow);
  background: rgba(255, 255, 255, 0.08);
}
.newsletter-form .btn-subscribe {
  padding: 14px 38px;
  border-radius: var(--footer-radius-full);
  border: none;
  background: linear-gradient(135deg, var(--footer-accent), #6D28D9);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  font-family: var(--footer-font);
  cursor: pointer;
  transition: all var(--footer-transition);
  box-shadow: 0 4px 28px rgba(129, 140, 248, 0.25);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.newsletter-form .btn-subscribe::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--footer-radius-full);
  background: linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transform: translateX(-100%);
  transition: transform 0.6s;
}
.newsletter-form .btn-subscribe:hover::before { transform: translateX(100%); }
.newsletter-form .btn-subscribe:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 40px rgba(129, 140, 248, 0.40);
}
.newsletter-form .btn-subscribe:active { transform: scale(0.97); }

.newsletter-status {
  margin-top: 14px;
  font-size: 0.9rem;
  color: var(--footer-text-secondary);
  min-height: 26px;
}
.newsletter-status.success { color: var(--footer-emerald); }
.newsletter-status.error { color: #F87171; }

/* ============================================================
   SECTION 2 — BRAND (logo, tagline, social)
   ============================================================ */
.footer-brand {
  text-align: center;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  margin-bottom: 48px;
  animation: footerFadeUp 0.9s ease 0.2s both;
  position: relative;
}
.footer-brand::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--footer-accent), transparent);
  border-radius: 2px;
}
.footer-brand-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 12px;
  text-decoration: none;
  animation: logoFloat 5s ease-in-out infinite;
}
.footer-brand-logo img {
  height: 56px;
  width: auto;
  filter: drop-shadow(0 0 40px rgba(129, 140, 248, 0.20));
  transition: filter var(--footer-transition);
}
.footer-brand-logo img:hover {
  filter: drop-shadow(0 0 60px rgba(129, 140, 248, 0.35));
}
.footer-brand-name {
  font-family: var(--footer-font-display);
  font-size: 2.2rem;
  font-weight: 600;
  font-style: italic;
  letter-spacing: -0.02em;
  color: #fff;
  text-shadow: 0 0 50px rgba(129, 140, 248, 0.12);
  line-height: 1.2;
}
.footer-brand-name span {
  background: linear-gradient(135deg, var(--footer-accent), var(--footer-emerald));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.footer-tagline {
  font-size: 1.1rem;
  font-weight: 300;
  color: var(--footer-text-secondary);
  letter-spacing: 0.06em;
  margin-top: 4px;
  margin-bottom: 8px;
  text-transform: uppercase;
}
.footer-description {
  font-size: 0.95rem;
  color: var(--footer-text-muted);
  max-width: 560px;
  margin: 6px auto 0;
  line-height: 1.7;
  letter-spacing: 0.01em;
}

/* ----- Social Icons — Brand Colors + Glass ----- */
.footer-social {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 28px;
  flex-wrap: wrap;
}
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--footer-radius-full);
  background: var(--footer-glass-bg);
  border: 1px solid var(--footer-glass-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: 1.6rem;
  text-decoration: none;
  transition: all var(--footer-transition);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
  animation: socialPulse 3.5s ease-in-out infinite;
  position: relative;
  overflow: hidden;
}
.footer-social a::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--footer-radius-full);
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.12), transparent 70%);
  opacity: 0;
  transition: opacity var(--footer-transition);
}
.footer-social a:hover::before { opacity: 1; }

/* Brand‑specific colours */
.footer-social a .fa-whatsapp { color: var(--footer-whatsapp); }
.footer-social a .fa-instagram { color: #E4405F; }
.footer-social a .fa-facebook { color: #1877F2; }
.footer-social a .fa-youtube { color: #FF0000; }

.footer-social a:hover {
  transform: scale(1.15) rotate(5deg);
  box-shadow: 0 0 50px var(--footer-accent-glow), 0 12px 40px rgba(0, 0, 0, 0.4);
  border-color: var(--footer-accent);
  background: rgba(255, 255, 255, 0.08);
}
.footer-social a:hover .fa-whatsapp { color: #fff; text-shadow: 0 0 30px var(--footer-whatsapp); }
.footer-social a:hover .fa-instagram { color: #fff; text-shadow: 0 0 30px #E4405F; }
.footer-social a:hover .fa-facebook { color: #fff; text-shadow: 0 0 30px #1877F2; }
.footer-social a:hover .fa-youtube { color: #fff; text-shadow: 0 0 30px #FF0000; }

.footer-social a:nth-child(1) { animation-delay: 0s; }
.footer-social a:nth-child(2) { animation-delay: 0.3s; }
.footer-social a:nth-child(3) { animation-delay: 0.6s; }
.footer-social a:nth-child(4) { animation-delay: 0.9s; }

@keyframes socialPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

/* ============================================================
   SECTION 3 — 5 COLUMNS with Icons
   ============================================================ */
.footer-links {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 36px 28px;
  padding-bottom: 44px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  margin-bottom: 44px;
  animation: footerFadeUp 0.9s ease 0.3s both;
}
.footer-links-col h4 {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
  color: var(--footer-text-primary);
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid rgba(129, 140, 248, 0.2);
  display: inline-block;
  position: relative;
}
.footer-links-col h4::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--footer-accent), var(--footer-emerald));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--footer-transition);
}
.footer-links-col:hover h4::after { transform: scaleX(1); }

.footer-links-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-links-col ul li {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.footer-links-col ul li i {
  font-size: 0.9rem;
  color: var(--footer-accent);
  width: 20px;
  text-align: center;
  transition: all var(--footer-transition);
  flex-shrink: 0;
}
.footer-links-col ul li:hover i {
  transform: translateY(-2px) scale(1.15) rotate(-4deg);
  color: #fff;
  text-shadow: 0 0 20px var(--footer-accent-glow);
}
.footer-links-col ul li a {
  font-size: 0.92rem;
  color: var(--footer-text-secondary);
  text-decoration: none;
  transition: all var(--footer-transition);
  display: inline-block;
  position: relative;
  padding-bottom: 2px;
  font-weight: 400;
  letter-spacing: 0.01em;
}
.footer-links-col ul li a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1.5px;
  background: linear-gradient(90deg, var(--footer-accent), var(--footer-emerald));
  transition: width var(--footer-transition);
}
.footer-links-col ul li a:hover {
  color: #fff;
  transform: translateX(6px);
}
.footer-links-col ul li a:hover::after { width: 100%; }

/* Get in Touch */
.footer-contact-detail {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 12px;
  font-size: 0.92rem;
  color: var(--footer-text-secondary);
  line-height: 1.6;
}
.footer-contact-detail i {
  color: var(--footer-accent);
  font-size: 1rem;
  width: 22px;
  margin-top: 2px;
  flex-shrink: 0;
}
.footer-contact-detail a {
  color: var(--footer-text-secondary);
  text-decoration: none;
  transition: color var(--footer-transition);
}
.footer-contact-detail a:hover { color: #fff; }

.footer-whatsapp-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--footer-whatsapp);
  color: #fff !important;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 12px 26px;
  border-radius: var(--footer-radius-full);
  text-decoration: none;
  transition: all var(--footer-transition);
  box-shadow: 0 4px 28px rgba(37, 211, 102, 0.25);
  margin-top: 8px;
  border: none;
  cursor: pointer;
}
.footer-whatsapp-btn i { font-size: 1.2rem; color: #fff !important; }
.footer-whatsapp-btn:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 10px 44px rgba(37, 211, 102, 0.40);
  background: var(--footer-whatsapp-dark);
  color: #fff !important;
}

/* ============================================================
   SECTION 4 — TRUST CAROUSEL (auto‑slide, no arrows)
   ============================================================ */
.footer-trust-wrapper {
  padding-bottom: 44px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  margin-bottom: 40px;
  animation: footerFadeUp 0.9s ease 0.4s both;
  position: relative;
  overflow: hidden;
}
.trust-carousel {
  position: relative;
  overflow: hidden;
  width: 100%;
}
.trust-track {
  display: flex;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}
.trust-card {
  flex: 0 0 calc(100% / 5);
  padding: 0 12px;
  box-sizing: border-box;
}
.trust-card-inner {
  background: var(--footer-glass-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--footer-glass-border);
  border-radius: var(--footer-radius);
  padding: 28px 20px 24px;
  text-align: center;
  transition: all var(--footer-transition);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
  height: 100%;
  cursor: default;
  position: relative;
  overflow: hidden;
}
.trust-card-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--footer-radius);
  background: radial-gradient(circle at 30% 20%, rgba(129, 140, 248, 0.06), transparent 70%);
  opacity: 0;
  transition: opacity var(--footer-transition);
}
.trust-card-inner:hover::before { opacity: 1; }
.trust-card-inner:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 56px rgba(0, 0, 0, 0.35), 0 0 50px var(--footer-accent-glow);
  border-color: rgba(129, 140, 248, 0.25);
  background: rgba(255, 255, 255, 0.06);
}
.trust-card-inner i {
  font-size: 2.4rem;
  color: var(--footer-accent);
  margin-bottom: 12px;
  display: block;
  transition: all var(--footer-transition);
}
.trust-card-inner:hover i {
  transform: scale(1.12) rotate(-2deg);
  color: #fff;
  text-shadow: 0 0 40px var(--footer-accent-glow);
}
.trust-card-inner h5 {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--footer-text-primary);
  margin-bottom: 4px;
  letter-spacing: 0.01em;
}
.trust-card-inner p {
  font-size: 0.8rem;
  color: var(--footer-text-muted);
  margin: 0;
  line-height: 1.5;
}

/* Dots (no arrows) */
.trust-dots {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
}
.trust-dots button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  cursor: pointer;
  transition: all var(--footer-transition);
  padding: 0;
}
.trust-dots button.active {
  background: var(--footer-accent);
  box-shadow: 0 0 20px var(--footer-accent-glow);
  width: 28px;
  border-radius: 6px;
}
.trust-dots button:hover { background: rgba(255, 255, 255, 0.3); }

/* ============================================================
   SECTION 5 — COPYRIGHT
   ============================================================ */
.footer-copyright {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 18px 0 28px;
  font-size: 0.85rem;
  color: var(--footer-text-muted);
  animation: footerFadeUp 0.9s ease 0.5s both;
}
.footer-copyright p { margin: 0; line-height: 1.6; }
.footer-copyright .heart {
  color: #EF4444;
  display: inline-block;
  animation: heartBeat 1.6s ease-in-out infinite;
}
.footer-copyright a {
  color: var(--footer-text-secondary);
  text-decoration: none;
  transition: color var(--footer-transition);
}
.footer-copyright a:hover { color: var(--footer-accent); }

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes footerFadeUp {
  0% { opacity: 0; transform: translateY(40px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes logoFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes heartBeat {
  0%, 100% { transform: scale(1); }
  14% { transform: scale(1.2); }
  28% { transform: scale(1); }
  42% { transform: scale(1.15); }
  56% { transform: scale(1); }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Tablet (≤ 1024px) */
@media (max-width: 1024px) {
  .footer-container { padding: 0 32px; }
  .footer-links { grid-template-columns: repeat(3, 1fr); gap: 32px 24px; }
  .trust-card { flex: 0 0 calc(100% / 3); }
  .footer-brand-name { font-size: 1.9rem; }
  .newsletter-card { min-height: 340px; padding: 36px 32px; }
  .newsletter-card h3 { font-size: 1.6rem; }
}

/* Tablet small (≤ 820px) */
@media (max-width: 820px) {
  .footer-links { grid-template-columns: repeat(2, 1fr); gap: 30px 24px; }
  .trust-card { flex: 0 0 calc(100% / 3); }
  .footer-container { padding: 0 24px; }
  .newsletter-card h3 { font-size: 1.4rem; }
}

/* Mobile (≤ 640px) — everything LEFT aligned */
@media (max-width: 640px) {
  .premium-footer {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
  .footer-container { padding: 0 15px; }

  /* Newsletter */
  .footer-newsletter { padding: 24px 0 20px; margin-bottom: 24px; }
  .newsletter-card {
    min-height: 320px;
    padding: 28px 18px;
    border-radius: var(--footer-radius-sm);
    text-align: left;
    align-items: flex-start;
  }
  .newsletter-card h3 { font-size: 1.2rem; text-align: left; }
  .newsletter-card .sub-heading { font-size: 0.85rem; text-align: left; }
  .newsletter-benefits {
    justify-content: flex-start;
    gap: 16px;
    width: 100%;
  }
  .newsletter-benefits .benefit-item { font-size: 0.8rem; }
  .newsletter-form {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .newsletter-form .input-group { min-width: unset; }
  .newsletter-form input { text-align: left; }
  .newsletter-form .btn-subscribe { width: 100%; justify-content: center; }

  /* Brand — left align */
  .footer-brand { text-align: left; padding-bottom: 32px; margin-bottom: 32px; }
  .footer-brand-logo { justify-content: flex-start; }
  .footer-brand-name { font-size: 1.4rem; }
  .footer-tagline { font-size: 0.85rem; }
  .footer-description { font-size: 0.85rem; padding: 0; max-width: 100%; }
  .footer-social { justify-content: flex-start; gap: 14px; }
  .footer-social a { width: 48px; height: 48px; font-size: 1.4rem; }

  /* Columns — left align */
  .footer-links {
    grid-template-columns: 1fr;
    gap: 28px 0;
    text-align: left;
    padding-bottom: 32px;
    margin-bottom: 32px;
  }
  .footer-links-col { text-align: left; padding-left: 0; }
  .footer-links-col h4 { display: inline-block; margin-left: 0; }
  .footer-links-col ul li { gap: 12px; }
  .footer-links-col ul li a:hover { transform: translateX(4px) scale(1.02); }

  .footer-contact-detail { justify-content: flex-start; }
  .footer-whatsapp-btn {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    justify-content: center;
  }

  /* Trust — 1 card */
  .trust-card { flex: 0 0 100%; padding: 0 6px; }
  .trust-card-inner { padding: 20px 16px 18px; }
  .trust-card-inner i { font-size: 2rem; }
  .trust-dots { gap: 10px; margin-top: 20px; }
  .trust-dots button { width: 8px; height: 8px; }
  .trust-dots button.active { width: 22px; }

  .footer-trust-wrapper { padding-bottom: 32px; margin-bottom: 28px; }

  /* Copyright */
  .footer-copyright {
    flex-direction: column;
    text-align: center;
    gap: 6px;
    padding: 12px 0 20px;
    font-size: 0.78rem;
  }
  .footer-copyright p { text-align: center; }
}

/* Very small (≤ 400px) */
@media (max-width: 400px) {
  .footer-container { padding: 0 12px; }
  .footer-brand-name { font-size: 1.2rem; }
  .footer-social a { width: 42px; height: 42px; font-size: 1.2rem; }
  .trust-card-inner { padding: 16px 12px 14px; }
  .trust-card-inner i { font-size: 1.6rem; }
  .trust-card-inner h5 { font-size: 0.82rem; }
  .trust-card-inner p { font-size: 0.7rem; }
  .newsletter-card { min-height: 280px; padding: 20px 14px; }
  .newsletter-card h3 { font-size: 1rem; }
}

/* Prevent horizontal scroll */
.premium-footer { overflow-x: hidden; }

/* Accessibility */
.premium-footer a:focus-visible,
.premium-footer button:focus-visible,
.premium-footer input:focus-visible {
  outline: 2px solid var(--footer-accent);
  outline-offset: 3px;
}






/* ============================================================
   footer.js — Vanilla JavaScript
   ============================================================ */

(function() {
  'use strict';

  // ============================================================
  // 1. PARTICLES
  // ============================================================
  function initParticles() {
    const container = document.getElementById('particlesContainer');
    if (!container) return;
    const count = 30;
    const colors = ['rgba(129,140,248,0.3)', 'rgba(52,211,153,0.2)', 'rgba(34,211,238,0.2)'];
    for (let i = 0; i < count; i++) {
      const p = document.createElement('div');
      p.className = 'particle';
      const size = 2 + Math.random() * 4;
      const x = Math.random() * 100;
      const y = Math.random() * 100;
      const dur = 12 + Math.random() * 18;
      const tx = (Math.random() - 0.5) * 160;
      const ty = (Math.random() - 0.5) * 140;
      const delay = Math.random() * 20;
      p.style.width = size + 'px';
      p.style.height = size + 'px';
      p.style.left = x + '%';
      p.style.top = y + '%';
      p.style.setProperty('--duration', dur + 's');
      p.style.setProperty('--tx', tx + 'px');
      p.style.setProperty('--ty', ty + 'px');
      p.style.animationDelay = delay + 's';
      p.style.background = colors[i % colors.length];
      p.style.boxShadow = '0 0 ' + (size * 4) + 'px ' + colors[i % colors.length];
      container.appendChild(p);
    }
  }
  initParticles();

  // ============================================================
  // 2. TRUST CAROUSEL (auto‑slide, no arrows, swipe support)
  // ============================================================
  (function initTrustCarousel() {
    const track = document.getElementById('trustTrack');
    const dotsContainer = document.getElementById('trustDots');
    if (!track || !dotsContainer) return;

    const cards = track.querySelectorAll('.trust-card');
    const total = cards.length;
    let currentIndex = 0;
    let autoplayInterval = null;
    const intervalTime = 3000;
    let isPaused = false;
    let startX = 0;
    let isDragging = false;

    function getSlidesPerView() {
      const w = window.innerWidth;
      if (w < 640) return 1;
      if (w < 1024) return 3;
      return 5;
    }
    let slidesPerView = getSlidesPerView();

    function updateCarousel() {
      const cardWidth = track.parentElement.offsetWidth / slidesPerView;
      const offset = currentIndex * cardWidth;
      track.style.transform = 'translateX(-' + offset + 'px)';

      const dotButtons = dotsContainer.querySelectorAll('button');
      dotButtons.forEach((btn, idx) => {
        btn.classList.toggle('active', idx === currentIndex);
      });
    }

    function buildDots() {
      dotsContainer.innerHTML = '';
      const count = Math.ceil(total / slidesPerView);
      for (let i = 0; i < count; i++) {
        const btn = document.createElement('button');
        btn.setAttribute('role', 'tab');
        btn.setAttribute('aria-label', 'Slide ' + (i + 1));
        btn.classList.toggle('active', i === 0);
        btn.addEventListener('click', function() {
          currentIndex = i;
          updateCarousel();
          resetAutoplay();
        });
        dotsContainer.appendChild(btn);
      }
    }

    function goToNext() {
      const maxIndex = Math.ceil(total / slidesPerView) - 1;
      currentIndex = (currentIndex + 1) > maxIndex ? 0 : currentIndex + 1;
      updateCarousel();
    }

    function startAutoplay() {
      if (autoplayInterval) clearInterval(autoplayInterval);
      autoplayInterval = setInterval(function() {
        if (!isPaused) {
          goToNext();
        }
      }, intervalTime);
    }

    function resetAutoplay() {
      if (autoplayInterval) {
        clearInterval(autoplayInterval);
        startAutoplay();
      }
    }

    function handleResize() {
      const newSlides = getSlidesPerView();
      if (newSlides !== slidesPerView) {
        slidesPerView = newSlides;
        const maxIndex = Math.ceil(total / slidesPerView) - 1;
        if (currentIndex > maxIndex) currentIndex = maxIndex;
        if (currentIndex < 0) currentIndex = 0;
        buildDots();
        updateCarousel();
        resetAutoplay();
      } else {
        updateCarousel();
      }
    }

    // Swipe / Touch
    const carouselEl = track.parentElement;
    carouselEl.addEventListener('touchstart', function(e) {
      startX = e.touches[0].clientX;
      isDragging = true;
      isPaused = true;
    }, { passive: true });

    carouselEl.addEventListener('touchmove', function(e) {
      if (!isDragging) return;
      const diff = startX - e.touches[0].clientX;
      if (Math.abs(diff) > 30) {
        if (diff > 0) {
          goToNext();
        } else {
          const maxIndex = Math.ceil(total / slidesPerView) - 1;
          currentIndex = currentIndex > 0 ? currentIndex - 1 : maxIndex;
          updateCarousel();
        }
        isDragging = false;
        resetAutoplay();
      }
    }, { passive: true });

    carouselEl.addEventListener('touchend', function() {
      isDragging = false;
      isPaused = false;
    }, { passive: true });

    // Mouse drag for desktop
    let mouseStartX = 0;
    let mouseDown = false;
    carouselEl.addEventListener('mousedown', function(e) {
      mouseStartX = e.clientX;
      mouseDown = true;
      isPaused = true;
    });
    carouselEl.addEventListener('mousemove', function(e) {
      if (!mouseDown) return;
      const diff = mouseStartX - e.clientX;
      if (Math.abs(diff) > 40) {
        if (diff > 0) {
          goToNext();
        } else {
          const maxIndex = Math.ceil(total / slidesPerView) - 1;
          currentIndex = currentIndex > 0 ? currentIndex - 1 : maxIndex;
          updateCarousel();
        }
        mouseDown = false;
        resetAutoplay();
      }
    });
    carouselEl.addEventListener('mouseup', function() {
      mouseDown = false;
      isPaused = false;
    });
    carouselEl.addEventListener('mouseleave', function() {
      mouseDown = false;
      isPaused = false;
    });

    // Pause on hover
    carouselEl.addEventListener('mouseenter', function() { isPaused = true; });
    carouselEl.addEventListener('mouseleave', function() { isPaused = false; });

    // Init
    buildDots();
    updateCarousel();
    startAutoplay();

    let resizeTimeout;
    window.addEventListener('resize', function() {
      clearTimeout(resizeTimeout);
      resizeTimeout = setTimeout(handleResize, 200);
    });
    window.addEventListener('orientationchange', function() {
      setTimeout(handleResize, 400);
    });
  })();

  // ============================================================
  // 3. NEWSLETTER — Google Sheets Integration
  // ============================================================
  (function initNewsletter() {
    const form = document.getElementById('newsletterForm');
    const emailInput = document.getElementById('newsletterEmail');
    const status = document.getElementById('newsletterStatus');
    if (!form || !emailInput || !status) return;

    // ============================================================
    // STEP 1 — CHANGE GOOGLE APPS SCRIPT URL HERE
    // ============================================================
    const GOOGLE_SCRIPT_URL = 'https://script.google.com/macros/s/YOUR_SCRIPT_ID/exec';
    // ============================================================
    // STEP 2 — HOW TO DEPLOY GOOGLE APPS SCRIPT
    // 1. Go to https://script.google.com/ and create a new project.
    // 2. Paste the following code in the Code.gs editor:
    //    function doPost(e) {
    //      var data = JSON.parse(e.postData.contents);
    //      var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
    //      sheet.appendRow([data.email, data.timestamp]);
    //      return ContentService.createTextOutput(JSON.stringify({status:"success"}))
    //        .setMimeType(ContentService.MimeType.JSON);
    //    }
    // 3. Save the script and deploy it as a Web App:
    //    - Execute as: "Me"
    //    - Who has access: "Anyone" (or "Anyone with link" if you want to restrict)
    // 4. Copy the generated URL and replace the placeholder above.
    // ============================================================
    // STEP 3 — HOW TO CONNECT ANOTHER GOOGLE ACCOUNT LATER
    // If you switch Google accounts, simply re-deploy the script from the new account
    // and replace the URL above with the new deployment URL.
    // ============================================================
    // STEP 4 — HOW TO REPLACE THE GOOGLE SHEET
    // In the Google Apps Script, you can change the sheet by using:
    //   var ss = SpreadsheetApp.openById('YOUR_SPREADSHEET_ID');
    //   var sheet = ss.getSheetByName('YourSheetName');
    // Replace the spreadsheet ID and sheet name accordingly.
    // ============================================================

    form.addEventListener('submit', function(e) {
      e.preventDefault();

      const email = emailInput.value.trim();
      if (!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
        status.textContent = 'Please enter a valid email address.';
        status.className = 'newsletter-status error';
        return;
      }

      const btn = form.querySelector('.btn-subscribe');
      btn.disabled = true;
      btn.textContent = 'Subscribing...';
      status.textContent = '';
      status.className = 'newsletter-status';

      fetch(GOOGLE_SCRIPT_URL, {
          method: 'POST',
          mode: 'no-cors', // required to avoid CORS issues with Google Scripts
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ email: email, timestamp: new Date().toISOString() })
        })
        .then(function() {
          // With no-cors we can't read response, so assume success
          status.textContent = '✅ Thanks for subscribing! Check your inbox soon.';
          status.className = 'newsletter-status success';
          emailInput.value = '';
          btn.disabled = false;
          btn.innerHTML = '<i class="fa-regular fa-paper-plane" style="margin-right:8px;"></i> Subscribe';
        })
        .catch(function(err) {
          status.textContent = '❌ Something went wrong. Please try again.';
          status.className = 'newsletter-status error';
          console.error('Newsletter error:', err);
          btn.disabled = false;
          btn.innerHTML = '<i class="fa-regular fa-paper-plane" style="margin-right:8px;"></i> Subscribe';
        });
    });

    // Allow Enter key
    emailInput.addEventListener('keydown', function(e) {
      if (e.key === 'Enter') {
        form.dispatchEvent(new Event('submit'));
      }
    });

    // Clear status on focus
    emailInput.addEventListener('focus', function() {
      status.textContent = '';
      status.className = 'newsletter-status';
    });
  })();

  // ============================================================
  // 4. INTERSECTION OBSERVER — fade up animations
  // ============================================================
  (function initScrollAnimations() {
    const sections = document.querySelectorAll(
      '.footer-newsletter, .footer-brand, .footer-links, .footer-trust-wrapper, .footer-copyright'
    );

    if ('IntersectionObserver' in window) {
      const observer = new IntersectionObserver(function(entries) {
        entries.forEach(function(entry) {
          if (entry.isIntersecting) {
            entry.target.style.opacity = '1';
            entry.target.style.transform = 'translateY(0)';
          }
        });
      }, { threshold: 0.08, rootMargin: '0px 0px -40px 0px' });

      sections.forEach(function(el) {
        el.style.opacity = '0';
        el.style.transform = 'translateY(30px)';
        el.style.transition =
          'opacity 0.8s cubic-bezier(0.25,0.46,0.45,0.94), transform 0.8s cubic-bezier(0.25,0.46,0.45,0.94)';
        observer.observe(el);
      });

      const cards = document.querySelectorAll('.trust-card-inner');
      const cardObserver = new IntersectionObserver(function(entries) {
        entries.forEach(function(entry, idx) {
          if (entry.isIntersecting) {
            setTimeout(function() {
              entry.target.style.opacity = '1';
              entry.target.style.transform = 'translateY(0)';
            }, idx * 60);
          }
        });
      }, { threshold: 0.1 });

      cards.forEach(function(card, idx) {
        card.style.opacity = '0';
        card.style.transform = 'translateY(20px)';
        card.style.transition =
          'opacity 0.6s cubic-bezier(0.25,0.46,0.45,0.94), transform 0.6s cubic-bezier(0.25,0.46,0.45,0.94)';
        cardObserver.observe(card);
      });
    } else {
      // Fallback
      sections.forEach(function(el) {
        el.style.opacity = '1';
        el.style.transform = 'translateY(0)';
      });
      document.querySelectorAll('.trust-card-inner').forEach(function(el) {
        el.style.opacity = '1';
        el.style.transform = 'translateY(0)';
      });
    }
  })();

  console.log('✅ KYAM Premium Footer — loaded successfully.');
})();/* End custom CSS */