/* Custom styles for NovaTech Solutions - Minimal overrides for Bootstrap 5 */
.hero {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../hero.jpg') center/cover no-repeat;
  height: 100vh;
  color: #fff;
}

.card-img-top {
  height: 200px;
  object-fit: cover;
}

body {
  font-family: 'Arial', sans-serif;
  scroll-padding-top: 70px; /* Offset for fixed navbar to prevent content overlap */
}

.navbar-brand {
  font-size: 1.5rem;
}

footer {
  margin-top: auto;
}

/* Responsive tweaks - Adjust for mobile and tablet */
@media (max-width: 768px) {
  .hero h1 {
    font-size: 2rem; /* Smaller hero title on mobile for better fit */
  }
  
  .hero .lead {
    font-size: 1.1rem; /* Adjust lead text size */
  }
  
  .btn-lg {
    padding: 0.75rem 1.5rem; /* Slightly smaller buttons on mobile */
    font-size: 1rem;
  }
  
  .py-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important; /* Reduce vertical padding on sections for mobile */
  }
  
  .navbar-brand {
    font-size: 1.25rem; /* Smaller brand on mobile navbar */
  }
}

@media (max-width: 576px) {
  .hero {
    height: 80vh; /* Shorter hero on very small screens */
  }
  
  .display-4 {
    font-size: 2.5rem; /* Further reduce large headings */
  }
  
  .card-body {
    padding: 1rem; /* Tighter card padding on extra small devices */
  }
}

/* Optional: Hover effects for better interactivity (works on desktop) */
.card {
  transition: transform 0.2s ease-in-out;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

/* Form enhancements for contact page */
.form-control:focus {
  border-color: #007bff;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}