body {
      font-family: 'Inter', sans-serif;
    }

    /* Navbar */
    .navbar-brand img {
      height: 45px;
    }
/* Custom Navbar */
.custom-navbar {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  transition: background 0.3s ease-in-out;
}

.navbar-brand .brand-text {
  font-size: 1.1rem;
  color: #1d4ed8;
}

.navbar-nav .nav-link {
  font-weight: 500;
  color: #333 !important;
  padding: 0.7rem 1rem;
  position: relative;
  transition: color 0.3s;
}

.navbar-nav .nav-link:hover {
  color: #1d4ed8 !important;
}

.navbar-nav .nav-link.active {
  color: #1d4ed8 !important;
  font-weight: 600;
}

.navbar-nav .nav-link.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 30%;
  width: 40%;
  height: 2px;
  background: #1d4ed8;
  border-radius: 2px;
}

    /* Hero Section */
    .hero-section {
      background: url("/img/bg.webp") no-repeat center center/cover;
      padding: 10rem 0;
      color: white;
      position: relative;
    }

    .hero-section::before {
      content: "";
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.782);
    }

    .hero-section .container {
      position: relative;
      z-index: 1;
    }

    .hero-section h1 {
      font-size: 3.5rem;
      font-weight: 700;
    }

    .hero-section p {
      font-size: 1.2rem;
      max-width: 700px;
      margin: 0 auto 2rem;
    }

    /* Cards hover effect */
    .card-product, .card-service {
      transition: transform 0.3s ease-in-out, box-shadow 0.3s;
      cursor: pointer;
    }
    .card-product:hover, .card-service:hover {
      transform: translateY(-10px);
      box-shadow: 0 1rem 2rem rgba(0,0,0,0.15);
    }

    /* Gradient CTA */
    .bg-gradient-blue {
      background: linear-gradient(135deg, #1d4ed8, #2563eb);
    }
    /* Clients logos effect */
.grayscale {
  filter: grayscale(100%);
  opacity: 0.8;
  transition: all 0.3s ease-in-out;
}
.grayscale:hover {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.05);
}

/* Uniform client logos */
.client-logo {
  width: 180px;     /* adjust as needed */
  height: 120px;    /* same height for all logos */
  background: #fff;
  border-radius: 12px;
  padding: 10px;
  box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.05);
  transition: transform 0.3s ease-in-out;
  margin: 0 auto;
}

.client-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain; /* keeps aspect ratio */
  filter: grayscale(20%);
  opacity: 0.85;
  transition: all 0.3s ease-in-out;
}

.client-logo:hover {
  transform: scale(1.05);
}

.client-logo img:hover {
  filter: grayscale(0%);
  opacity: 1;
}

    /* Footer */
    footer a:hover {
      text-decoration: underline;
    }