@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

:root {
  --brand-blue: #114857;
}

.brand-text {
  color: var(--brand-blue);
}

.hover\:text-brand-blue:hover {
  color: var(--brand-blue);
}

body {
    font-family: 'Playfair Display';
}

html {
  scroll-behavior: smooth;
}

/* *{
  border: 2px solid black !important;
} */


  /* Capability image container */
  .capability-img {
    position: relative;
    width: 100%;
    height: 300px; /* Set uniform height */
    overflow: hidden;
    border-radius: 0.5rem; /* matches your rounded images */
  }

  /* Image styling */
  .capability-img img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* ensures it fills while keeping aspect ratio */
    display: block;
  }

  /* Tint overlay */
  .capability-img::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(17, 72, 87, 0.6); /* #114857 at 50% opacity */
    mix-blend-mode: multiply; /* keeps contrast */
    pointer-events: none;
  }

  /* Make it responsive on smaller devices */
  @media (max-width: 640px) {
    .capability-img {
      height: 200px;
    }
  }