/* Custom Styles for D8M Engineers */

/* Hero Background */
.hero-bg {
  background-image: url("https://images.unsplash.com/photo-1541888946425-d81bb19240f5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.3;
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Service cards hover effects */
.service-card:hover .bg-primary\/10 {
  background-color: #f9b617;
}

.service-card:hover .text-primary {
  color: white;
}

/* Project overlay effects */
.project-overlay {
  transition: opacity 0.3s ease;
}

.project-card:hover .project-overlay {
  opacity: 1;
}

/* Custom focus styles */
input:focus,
textarea:focus,
select:focus {
  outline: none;
  ring: 2px;
  ring-color: #f9b617;
  border-color: transparent;
}

/* Button hover effects */
button {
  transition: all 0.3s ease;
}

/* Mobile menu animation */
#mobileMenu {
  transition: all 0.3s ease;
}

/* Popup styles */
#projectPopup {
  backdrop-filter: blur(8px);
}

#projectPopup .bg-white {
  animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Form input focus effects */
input:focus,
textarea:focus,
select:focus {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(249, 182, 23, 0.2);
}

/* Filter button styles */
.filter-btn.active {
  background-color: #f9b617;
  border-color: #f9b617;
  color: #1a1a1a;
}

.filter-btn:not(.active):hover {
  border-color: #f9b617;
  color: #f9b617;
}

/* Project item animations */
.project-item {
  transition: all 0.3s ease;
}

.project-item.hidden {
  opacity: 0;
  transform: scale(0.9);
  pointer-events: none;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .hero-section h1 {
    font-size: 3rem;
    line-height: 1.1;
  }

  .hero-section p {
    font-size: 1.125rem;
  }

  #projectPopup .bg-white {
    margin: 1rem;
    max-height: calc(100vh - 2rem);
  }
}

@media (max-width: 640px) {
  .hero-section h1 {
    font-size: 2.5rem;
  }

  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .filter-btn {
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
  }
}

/* Animation for service cards */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.service-card {
  animation: fadeInUp 0.6s ease forwards;
}

.service-card:nth-child(1) {
  animation-delay: 0.1s;
}
.service-card:nth-child(2) {
  animation-delay: 0.2s;
}
.service-card:nth-child(3) {
  animation-delay: 0.3s;
}
.service-card:nth-child(4) {
  animation-delay: 0.4s;
}

/* Project card hover effects */
.project-card img,
.project-item img {
  transition: transform 0.3s ease;
}

.project-card:hover img,
.project-item:hover img {
  transform: scale(1.05);
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

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

::-webkit-scrollbar-thumb {
  background: #f9b617;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #e6a515;
}

/* Popup form styling */
.popup-form-field {
  position: relative;
}

.popup-form-field input:focus + label,
.popup-form-field textarea:focus + label,
.popup-form-field select:focus + label {
  color: #f9b617;
}

/* Loading animation for form submission */
.loading {
  position: relative;
  pointer-events: none;
}

.loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid transparent;
  border-top: 2px solid #1a1a1a;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Enhanced filter button styles */
.filter-btn {
  transition: all 0.3s ease;
  cursor: pointer;
}

.filter-btn.active {
  background-color: #f9b617 !important;
  border-color: #f9b617 !important;
  color: #1a1a1a !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(249, 182, 23, 0.3);
}

.filter-btn:not(.active) {
  background-color: transparent;
  border-color: #d1d5db;
  color: #6b7280;
}

.filter-btn:not(.active):hover {
  border-color: #f9b617;
  color: #f9b617;
  transform: translateY(-1px);
}

/* Enhanced project item transitions */
.project-item {
  transition: all 0.3s ease;
  opacity: 1;
  transform: scale(1);
}

.project-item.hidden {
  opacity: 0;
  transform: scale(0.9);
  pointer-events: none;
}

/* Language selector styling */
#languageSelector {
  transition: all 0.3s ease;
}

#languageSelector:hover {
  border-color: #f9b617;
}

#languageSelector:focus {
  outline: none;
  border-color: #f9b617;
  box-shadow: 0 0 0 2px rgba(249, 182, 23, 0.2);
}

/* Smooth transitions for language changes */
.language-transition {
  transition: opacity 0.3s ease;
}

.language-transition.changing {
  opacity: 0.7;
}

/* Parallax Enhancement */
.hero-bg {
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
}

/* Ensure smooth scrolling on iOS */
.hero-section {
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
}

/* Hardware acceleration for better performance */
.hero-section .hero-bg {
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
}

/* Prevent layout shifts during parallax */
.hero-section .container {
  position: relative;
  z-index: 20;
}

/* Enhanced Responsive Parallax */
@media (max-width: 480px) {
  .hero-section {
    min-height: 100vh;
  }

  .hero-bg {
    background-size: cover;
    background-position: center center;
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  .hero-section {
    min-height: 100vh;
  }

  .hero-bg {
    background-size: cover;
    background-position: center center;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .hero-section {
    min-height: 100vh;
  }

  .hero-bg {
    background-size: cover;
    background-position: center top;
  }
}

@media (min-width: 1025px) {
  .hero-bg {
    background-size: cover;
    background-position: center center;
  }
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  .hero-bg {
    transform: none !important;
  }
}

/* High DPI displays optimization */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .hero-bg {
    background-image: url("https://blob.v0.dev/P2cQR.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=4140&q=80");
  }
}

/* Landscape orientation on mobile */
@media (max-width: 768px) and (orientation: landscape) {
  .hero-section {
    min-height: 100vh;
  }

  .hero-section h1 {
    font-size: 2.5rem;
  }

  .hero-section p {
    font-size: 1rem;
  }
}