/* ---------------------------- */
/* Awards Section - Base Style */
/* ---------------------------- */
.awards-section {
  background-color: #f5f5f5;
  padding: 60px 20px;
  text-align: center;
}

.awards-container {
  max-width: 1000px;
  margin: auto;
}

.awards-section .highlight-title {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: #333;
}

/* Hero Image - Base */
.awards-section img.hero-image {
  max-width: 100%;   /* responsive width */
  height: auto;      /* keeps proportions */
  display: block;
  margin: 0 auto 2rem; /* center with some bottom space */
  border-radius: 8px;  /* optional: soft corners */
}

/* ---------------------------- */
/* Responsive Breakpoints */
/* ---------------------------- */

/* Small Devices (≤ 600px) */
@media (max-width: 600px) {
  .awards-section {
    padding: 40px 15px;
  }

  .awards-section .highlight-title {
    font-size: 1.5rem;
  }

  .awards-section img.hero-image {
    max-width: 90%;   /* keep some padding */
    margin-bottom: 1.5rem;
  }
}

/* Medium Devices (Tablets: 601px - 1024px) */
@media (min-width: 601px) and (max-width: 1024px) {
  .awards-section {
    padding: 50px 25px;
  }

  .awards-section .highlight-title {
    font-size: 1.75rem;
  }

  .awards-section img.hero-image {
    max-width: 95%;
  }
}

/* Large Devices (Desktop ≥ 1025px) */
/* No change needed – base styles apply */
