.container {
      max-width: 1200px;
      margin: 20px auto;
      padding: 10px;
      }

      .job-card-logo-title {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      grid-column: span 3;
      margin-bottom: 10px;
      text-align: left;
      }

      .company-logo {
      max-width: 100px;
      max-height: 100px;
      width: auto;
      height: auto;
      object-fit: contain;
      border-radius: 8px;
      border: 1px solid #ddd; /* Adds a light border */
      padding: 2px; /* Optional: adds breathing room inside the border */
      background-color: #fff; /* Helps logos with transparent backgrounds */
    }

  #loading-message {
    display: flex;
  align-items: center;
  justify-content: center;
  min-height: 30vh; /* Responsive vertical space */
  margin-top: 1rem;
  margin-bottom: 2rem;
  text-align: center;
  position: relative;
  width: 100%;
  }

  .loading-center {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

  .spinner {
    display: inline-block;
    width: 4.75rem;
    height: 4.75rem;
    margin-bottom: .75rem;
    vertical-align: text-bottom;
    border: .15em solid #b4b7c9;
    border-right-color: transparent;
    border-radius: 50%;
    -webkit-animation: spinner .75s linear infinite;
    animation: spinner .75s linear infinite;
    position: relative;
  }

  .spinner-logo {
    width: 4.5rem;
    height: 4.5rem;
  }
  
  .loading-center p{
    font-size: 1.25rem;
  }

  @keyframes spin {
    from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }

}

.spinner-wrapper {
  transform: translateY(97.5%); 
  display: inline-block;
}

.job-listings {
  display: flex;
  flex-direction: column;
  align-items: center;
}