/* Custom scrollbar with construction theme */
::-webkit-scrollbar {
  width: 12px;
}

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

::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #facc15, #2563eb);
  border-radius: 6px;
  border: 2px solid #f1f5f9;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #eab308, #1d4ed8);
}

/* Smooth transitions for construction elements */
* {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow,
    transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

/* Enhanced service card hover effects */
.service-card {
  position: relative;
  overflow: hidden;
}

.service-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: left 0.5s;
}

.service-card:hover::before {
  left: 100%;
}

.service-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

/* Construction-themed animations */
@keyframes constructionPulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.8;
  }
}

.construction-pulse {
  animation: constructionPulse 2s ease-in-out infinite;
}

/* Bounce animation for scroll indicator */
@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

.bounce-animation {
  animation: bounce 2s infinite;
}

/* Floating elements animation */
@keyframes float {
  0%,
  100% {
    transform: translateY(0px) translateX(0px) rotate(0deg);
  }
  33% {
    transform: translateY(-20px) translateX(10px) rotate(5deg);
  }
  66% {
    transform: translateY(-10px) translateX(-5px) rotate(-3deg);
  }
}

.floating-element {
  animation: float 8s ease-in-out infinite;
}

.floating-element:nth-child(2) {
  animation-delay: -2s;
}

.floating-element:nth-child(3) {
  animation-delay: -4s;
}

.floating-element:nth-child(4) {
  animation-delay: -6s;
}

/* Navigation active state */
.nav-link.active {
  color: #2563eb;
}

/* Mobile menu transition */
.mobile-menu-enter {
  opacity: 0;
  max-height: 0;
}

.mobile-menu-enter-active {
  opacity: 1;
  max-height: 300px;
  transition: opacity 300ms, max-height 300ms;
}

.mobile-menu-exit {
  opacity: 1;
  max-height: 300px;
}

.mobile-menu-exit-active {
  opacity: 0;
  max-height: 0;
  transition: opacity 300ms, max-height 300ms;
}

/* GSAP Animation Classes */
.gsap-fade-in {
  opacity: 0;
  transform: translateY(50px);
}

.gsap-slide-left {
  opacity: 0;
  transform: translateX(-100px);
}

.gsap-slide-right {
  opacity: 0;
  transform: translateX(100px);
}

.gsap-scale-in {
  opacity: 0;
  transform: scale(0.8);
}

/* Construction-themed button styles */
.btn-construction {
  background: #facc15;
  color: #2563eb;
  font-weight: bold;
  padding: 12px 24px;
  border-radius: 8px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  transition: all 0.3s;
}

.btn-construction:hover {
  background: #eab308;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  transform: scale(1.05);
}

.btn-construction-outline {
  border: 2px solid #2563eb;
  color: #2563eb;
  font-weight: bold;
  padding: 12px 24px;
  border-radius: 8px;
  transition: all 0.3s;
}

.btn-construction-outline:hover {
  background: #2563eb;
  color: white;
  transform: scale(1.05);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .hero-title {
    font-size: 3rem;
  }

  .services-title {
    font-size: 2.5rem;
  }

  .about-title {
    font-size: 2.5rem;
  }

  .contact-title {
    font-size: 2.5rem;
  }
}

/* Loading animation */
.loading {
  opacity: 0;
  transform: translateY(30px);
}

.loaded {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.8s ease-out;
}