/* 1. Initial Page Load Fade-in */
body.fade-in-body {
  animation: pageFadeIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes pageFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* 2. Micro-interactions for Navigation Links */
.nav-link {
  position: relative;
  transition: color 0.3s ease-in-out;
}

/* Avoid underline on mobile full-screen text links */
@media (min-width: 901px) {
  .nav-link::after {
    content: "";
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -4px;
    left: 0;
    background-color: #c1671d;
    transition: width 0.3s ease-in-out;
  }

  .nav-link:hover::after,
  .nav-link.active::after {
    width: 100%;
  }
}

/* 3. Micro-interactions for Buttons */
.btn-login {
  transition: all 0.3s ease;
  transform: translateY(0);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.btn-login:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(193, 103, 29, 0.25);
}

.btn-login:active {
  transform: translateY(1px);
}

/* 4. Footer Link Hover Micro-interactions */
.footer-nav a {
  position: relative;
  transition: all 0.3s ease;
  display: inline-block;
}

.footer-nav a:hover {
  transform: translateX(3px);
  color: #c1671d;
}

/* 5. Social Icons Hover Effects */
.social-icon {
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.social-icon:hover {
  transform: translateY(-4px) scale(1.1);
  box-shadow: 0 6px 15px rgba(193, 103, 29, 0.4);
}

/* 6. Service Box Subtle Scale Info */
.service-box {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease;
}

.service-box:hover {
  transform: translateY(-5px) scale(1.02);
}