/* ═══════════════════════════════════════════════════════════════
   DekhLaw — Global Animated Icons
   Applied to every Bootstrap Icon / FA icon across all pages
═══════════════════════════════════════════════════════════════ */

/* ── Keyframes ───────────────────────────────────────────── */
@keyframes iconBounce {
  0%,100% { transform: translateY(0); }
  40%     { transform: translateY(-8px); }
  60%     { transform: translateY(-4px); }
}
@keyframes iconPulseRing {
  0%   { transform: scale(1);   opacity: 1; }
  70%  { transform: scale(1.18); opacity: .6; }
  100% { transform: scale(1);   opacity: 1; }
}
@keyframes iconShake {
  0%,100% { transform: rotate(0deg); }
  15%     { transform: rotate(-18deg); }
  30%     { transform: rotate(16deg); }
  45%     { transform: rotate(-10deg); }
  60%     { transform: rotate(8deg); }
  75%     { transform: rotate(-4deg); }
}
@keyframes iconSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes iconSpinSlow {
  0%,80%,100% { transform: rotate(0deg); }
  30%          { transform: rotate(360deg); }
}
@keyframes iconSwing {
  0%,100% { transform: rotate(0deg); }
  25%     { transform: rotate(14deg); }
  75%     { transform: rotate(-14deg); }
}
@keyframes iconPop {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.22); }
}
@keyframes iconFloat {
  0%,100% { transform: translateY(0px); }
  50%     { transform: translateY(-6px); }
}
@keyframes iconSlideRight {
  0%,100% { transform: translateX(0); }
  50%     { transform: translateX(5px); }
}
@keyframes iconGlow {
  0%,100% { filter: drop-shadow(0 0 0 transparent); }
  50%     { filter: drop-shadow(0 0 8px rgba(202,162,79,.7)); }
}
@keyframes iconHeartbeat {
  0%,100% { transform: scale(1); }
  14%     { transform: scale(1.2); }
  28%     { transform: scale(1); }
  42%     { transform: scale(1.15); }
  56%,100%{ transform: scale(1); }
}
@keyframes iconWriting {
  0%,100% { transform: rotate(0deg) translateX(0); }
  25%     { transform: rotate(-15deg) translateX(-2px); }
  75%     { transform: rotate(15deg) translateX(2px); }
}
@keyframes iconRadar {
  0%   { transform: scale(1);   opacity: .8; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* ── Per-icon animation assignments ─────────────────────── */

/* Phone / Telephone — shake like ringing */
.bi-telephone-fill,
.bi-telephone,
.bi-telephone-inbound-fill,
.bi-telephone-outbound-fill {
  display: inline-block;
  animation: iconShake 3s ease-in-out infinite;
  transform-origin: center bottom;
}

/* Search / Magnify — scan bounce */
.bi-search {
  display: inline-block;
  animation: iconBounce 2.5s ease-in-out infinite;
}

/* Shield — heartbeat glow */
.bi-shield-lock-fill,
.bi-shield-check,
.bi-shield-fill {
  display: inline-block;
  animation: iconHeartbeat 2.8s ease-in-out infinite, iconGlow 2.8s ease-in-out infinite;
}

/* Patch check / verified — pop */
.bi-patch-check-fill,
.bi-check-circle-fill,
.bi-check2-circle {
  display: inline-block;
  animation: iconPop 2.2s ease-in-out infinite;
}

/* Coin / Rupee / Cash — slow spin */
.bi-cash-coin,
.bi-coin,
.bi-currency-rupee {
  display: inline-block;
  animation: iconSpinSlow 4s ease-in-out infinite;
  transform-origin: center;
}

/* Location pin — float up-down */
.bi-geo-alt-fill,
.bi-geo-alt,
.bi-pin-map-fill {
  display: inline-block;
  animation: iconFloat 2.4s ease-in-out infinite;
}

/* Clock / Time — swing */
.bi-clock-fill,
.bi-clock,
.bi-alarm-fill {
  display: inline-block;
  animation: iconSwing 2.6s ease-in-out infinite;
  transform-origin: center top;
}

/* WiFi / Signal — pulse ring */
.bi-wifi,
.bi-reception-4 {
  display: inline-block;
  animation: iconPulseRing 2s ease-in-out infinite;
}

/* Chat / Message dots — bounce */
.bi-chat-dots,
.bi-chat-fill,
.bi-chat-text-fill,
.bi-chat-dots-fill {
  display: inline-block;
  animation: iconBounce 2.2s ease-in-out infinite;
}

/* Person / User — float */
.bi-person,
.bi-person-fill,
.bi-person-badge-fill {
  display: inline-block;
  animation: iconFloat 2.8s ease-in-out infinite;
}

/* Briefcase / Work — swing */
.bi-briefcase-fill,
.bi-briefcase {
  display: inline-block;
  animation: iconSwing 3s ease-in-out infinite;
  transform-origin: center top;
}

/* Lightning / Flash — pop fast */
.bi-lightning-charge-fill,
.bi-lightning-fill {
  display: inline-block;
  animation: iconPop 1.4s ease-in-out infinite;
}

/* Star / Rating — spin slow */
.bi-star-fill,
.bi-star {
  display: inline-block;
  animation: iconSpinSlow 5s linear infinite;
  transform-origin: center;
}

/* Eye — float gentle */
.bi-eye-fill,
.bi-eye {
  display: inline-block;
  animation: iconFloat 3s ease-in-out infinite;
}

/* Lock — heartbeat */
.bi-lock-fill,
.bi-lock {
  display: inline-block;
  animation: iconHeartbeat 3.2s ease-in-out infinite;
}

/* Upload / Download — bounce */
.bi-upload,
.bi-download,
.bi-cloud-upload-fill {
  display: inline-block;
  animation: iconBounce 2s ease-in-out infinite;
}

/* Chevrons in nav buttons — slide */
.bi-chevron-right,
.bi-chevron-left { display: inline-block; }
.answers-next .bi-chevron-right,
.testimonial-next .bi-chevron-right { animation: iconSlideRight .8s ease-in-out infinite; }

/* Translate / Globe (language) — spin */
.lang-globe.bi-translate {
  animation: iconSpinSlow 6s ease-in-out infinite;
}

/* Envelope / Mail — swing */
.bi-envelope-fill,
.bi-envelope {
  display: inline-block;
  animation: iconSwing 2.8s ease-in-out infinite;
  transform-origin: center top;
}

/* Info / FAQ */
.bi-info-circle-fill,
.bi-question-circle-fill {
  display: inline-block;
  animation: iconPulseRing 2.5s ease-in-out infinite;
}

/* Social icons — scale pop on hover only (no loop) */
.footer-social a i {
  display: inline-block;
  transition: transform .25s ease;
}
.footer-social a:hover i {
  transform: scale(1.3) rotate(-8deg);
  animation: none;
}

/* WhatsApp icon — heartbeat */
.bi-whatsapp {
  display: inline-block;
  animation: iconHeartbeat 2s ease-in-out infinite;
}

/* Exclamation / Warning — shake */
.bi-exclamation-triangle-fill,
.bi-exclamation-circle-fill {
  display: inline-block;
  animation: iconShake 3.5s ease-in-out infinite;
}

/* ── Disable animations for users who prefer no motion ── */
@media (prefers-reduced-motion: reduce) {
  [class*="bi-"] { animation: none !important; }
}

/* ── Section image styles ──────────────────────────────── */
.section-img {
  width: 100%;
  border-radius: 16px;
  object-fit: cover;
  display: block;
}
.section-img-overlay {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
}
.section-img-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(0,0,0,.18) 0%, transparent 60%);
  pointer-events: none;
}

/* Image float animation for hero/feature images */
@keyframes imgFloat {
  0%,100% { transform: translateY(0px); }
  50%     { transform: translateY(-10px); }
}
.img-float { animation: imgFloat 5s ease-in-out infinite; }

/* How-it-works step images */
.how-step-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 20px;
  transition: transform .4s ease;
}
.how-card:hover .how-step-img { transform: scale(1.04); }

/* Practice area image cards */
.practice-img-card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: transform .3s, box-shadow .3s;
}
.practice-img-card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(0,0,0,.12); }
.practice-img-card img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  display: block;
  transition: transform .4s;
}
.practice-img-card:hover img { transform: scale(1.08); }
.practice-img-label {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,.75));
  color: #fff;
  font-size: .82rem;
  font-weight: 700;
  padding: 20px 12px 12px;
}

/* Why-choose image */
.why-feature-img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 14px;
  margin-bottom: 0;
}

/* Testimonial avatar images */
.testimonial-avatar-img {
  width: 66px; height: 66px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--accent-gold);
  margin: 0 auto 18px;
  display: block;
}

/* SOS feature image */
.sos-feat-img {
  width: 100%;
  border-radius: 16px;
  object-fit: cover;
  height: 340px;
  box-shadow: 0 24px 64px rgba(0,0,0,.18);
}