/* === Updated CSS for Brief Section === */

.brief-section {
    background-color: #101931;
    padding: 90px 0;

    height: 100vh;
    /* middle section height */
    display: flex;
    transition: background-color 0.3s ease;
    margin: 0; /* Remove margin */
  }
  
  .brief-badge {
    background: #7d25ec;
    color: white;
    padding: 6px 14px;
    border-radius: 999px;
    display: inline-block;
    margin-bottom: 32px;
    font-size: 1.3rem;
    font-weight: 600;
  }
  
  .brief-title {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.7;
    margin-bottom: 32px;
  }
  
  /* .brief-title .highlight-purple {
    color: #a472f8;
    text-decoration: underline;
  }
  
  .brief-title .highlight-pink {
    color: #f9a8d4;
    text-decoration: underline;
  } */

  .brief-title span {
    background: linear-gradient(90deg, #9F54FD 22.27%, #FFC69C 105.76%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
    z-index: 1;
    display: inline-block;
  }
  
  .brief-desc {
    font-size: 1.5rem;
    line-height: 1.7;
    color: #e1e1e1;
  }
  
  .brief-image-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    padding-top: 20px;
    position: relative;
    min-height: 320px;
  }
  
  .brief-img {
    width: 250px;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  }
  
  /* Optional large center image */
  .brief-img.center-img {
    width: 200px;
    z-index: 1;
  }

/* Mobile scaling for brief section  */
@media (max-width: 768px) {
  .brief-section { height: auto !important; min-height: unset !important; padding: 56px 0 !important; }
  .brief-image-wrapper { gap: 14px !important; padding-top: 12px !important; }
  .brief-img { width: min(42vw, 220px) !important; }
  .brief-img.center-img { width: min(55vw, 260px) !important; }
  .brief-badge { font-size: .85rem; padding: 6px 10px; }
}