/* =============================================
   Custom CSS (v1)
   ============================================= */

.custom-row-one {
  display: grid;
  /* Creates two equal columns */
  grid-template-columns: 1fr 1fr; 
  /* The 40px gap in the middle */
  column-gap: 40px; 
  /* Standard margin/padding for the row itself */
  padding: 20px;
  width: 100%;
  box-sizing: border-box;
}

.custom-row-one .column {
  background-color: #ffffff;
  /* The 30px internal padding */
  padding: 30px; 
  /* Drop shadow effect */
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); 
  border-radius: 4px;
}

/* Responsive adjustment for mobile devices */
@media (max-width: 768px) {
  .custom-row-one {
    grid-template-columns: 1fr;
    row-gap: 20px;
  }
}

/******** Wrapper for the entire section *********/
  .custom-page-container {
    max-width: 1200px;
    margin: 0 auto;
    font-family: sans-serif;
    padding: 20px;
  }

  /* Centering the title above the grid */
  .custom-grid-main-title {
    text-align: center;
    margin-bottom: 30px;
    font-size: 2rem;
    color: #222;
  }

  /* The Flexbox Container */
  .custom-logo-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
  }

  /* The Individual Card (4 Columns) */
  .custom-logo-card {
    /* calc(25% - 20px) accounts for the 4 columns and the gap */
    flex: 1 1 calc(25% - 20px); 
    display: flex;
    flex-direction: column;
    align-items: center; 
    justify-content: flex-start;
    
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #f9f9f9;
    text-align: center;
  }

  /* Image styling */
  .custom-logo-card img {
    max-width: 100%;
    height: auto;
    margin-bottom: 15px;
    max-height: 80px; /* Keeps logos looking uniform */
  }

  /* Caption styling */
  .custom-logo-card p {
    margin: 0;
    font-size: 0.95rem;
    color: #555;
    line-height: 1.4;
  }

  /* Responsive: 2 columns on tablets */
  @media (max-width: 900px) {
    .custom-logo-card {
      flex: 1 1 calc(50% - 20px);
    }
  }

  /* Responsive: 1 column on mobile */
  @media (max-width: 480px) {
    .custom-logo-card {
      flex: 1 1 100%;
    }
  }