@keyframes fadeUp {

  from {
    opacity: 0;
    transform: translateY(60px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }

}

@keyframes fadeLeft {

  from {
    opacity: 0;
    transform: translateX(-60px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }

}

@keyframes fadeRight {

  from {
    opacity: 0;
    transform: translateX(60px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }

}

.hero-left {
  animation: fadeLeft 1s ease forwards;
}

.hero-right {
  animation: fadeRight 1.2s ease forwards;
}

.stat-card,
.service-card,
.civil-card,
.contact-box,
.professional-content,
.professional-image {
  opacity: 0;
  animation: fadeUp 1s ease forwards;
}

.lawyer-card::after {

  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      to top,
      rgba(0,0,0,0.45),
      transparent 40%
    );

  opacity: 0;

  transition: 0.4s;
}

.lawyer-card:hover::after {
  opacity: 1;
}

.lawyer-card img {

  transition:
    transform 0.6s ease,
    filter 0.6s ease,
    box-shadow 0.6s ease;
}

.lawyer-card:hover img {

  transform: scale(1.03);

  filter:
    brightness(1.05)
    contrast(1.02);

  box-shadow:
    0 40px 100px rgba(0,0,0,0.55),
    0 0 40px rgba(213,177,107,0.15);
}

.service-card,
.civil-card,
.stat-card {

  transition:
    transform 0.4s ease,
    border 0.4s ease,
    background 0.4s ease,
    box-shadow 0.4s ease;
}

.service-card:hover,
.civil-card:hover,
.stat-card:hover {

  transform: translateY(-10px);

  border:
    1px solid rgba(213,177,107,0.25);

  background:
    rgba(255,255,255,0.045);

  box-shadow:
    0 20px 50px rgba(0,0,0,0.25),
    0 0 30px rgba(213,177,107,0.05);
}

.btn-primary,
.btn-secondary,
.btn-outline,
.btn-card {

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    background 0.3s ease,
    border 0.3s ease;
}

.btn-primary:hover,
.btn-card:hover {

  transform: translateY(-4px);

  box-shadow:
    0 15px 35px rgba(213,177,107,0.35);
}

.btn-secondary:hover,
.btn-outline:hover {

  transform: translateY(-4px);

  border-color:
    rgba(213,177,107,0.5);

  background:
    rgba(213,177,107,0.08);
}

.contact-box::before {

  content: "";

  position: absolute;

  width: 400px;
  height: 400px;

  background:
    radial-gradient(
      circle,
      rgba(213,177,107,0.12),
      transparent 70%
    );

  top: -200px;
  right: -150px;

  pointer-events: none;
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #071411;
}

::-webkit-scrollbar-thumb {
  background: rgba(213,177,107,0.4);
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(213,177,107,0.7);
}