:root{
  --blue: #0267B1;
  --white-soft: #fff9f9;
  --card-bg: #f5f5f5;
  --card-min-w: 260px;
  --card-h: 206px;
  --card-gap-x: 65px;
  --card-gap-y: 40px;
  --section-padding-lr: 80px;
  --card-padding: 38px;
  --card-radius: 6px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Manrope',sans-serif;background:#ffffff;color:#121212}

/* Header */
.header{
  background:#ffffff;
  padding:20px var(--section-padding-lr);
  display:flex;
  justify-content:space-between;
  align-items:center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.logo{font-weight:700;font-size:20px;color:var(--blue);}

/* Main section */
.main-section{
  position:relative;
  padding:80px var(--section-padding-lr);
  text-align:center;
  color:var(--white-soft);
  background:
    linear-gradient(rgba(2,103,177,0.8), rgba(2,103,177,0.8)),
    url('images/clienlist/main-image.png') center/cover no-repeat;
}
.section-heading{
  font-family:'Domine',serif;
  font-weight:700;
  font-size:56px;
  margin-bottom:60px;
  color:var(--white-soft);
}

/* Responsive wrapper */
.logo-grid-wrapper{
  width:100%;
  max-width:1760px;
  margin:0 auto;
  padding:0 var(--section-padding-lr);
  box-sizing:border-box;
}

/* Logo grid — auto-reflows on zoom and all screen sizes */
.logo-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--card-min-w), 1fr));
  gap: var(--card-gap-y) var(--card-gap-x);
  justify-content:center;
}

/* Breakpoints */
@media (max-width: 1400px){
  :root{
    --section-padding-lr: 40px;
    --card-gap-x: 32px;
  }
}
@media (max-width: 900px){
  :root{
    --card-min-w: 200px;
    --card-h: 170px;
    --card-gap-x: 24px;
    --card-gap-y: 24px;
    --card-padding: 24px;
    --section-padding-lr: 24px;
  }
  .section-heading{ font-size:38px; margin-bottom:36px; }
}
@media (max-width: 560px){
  :root{
    --card-min-w: 100%;
    --card-h: 140px;
    --card-gap-y: 16px;
    --card-padding: 20px;
    --section-padding-lr: 16px;
  }
  .header{ padding:16px var(--section-padding-lr); }
  .main-section{ padding:48px var(--section-padding-lr); }
  .section-heading{ font-size:28px; margin-bottom:24px; }
}

/* Logo card */
.logo-card{
  width:100%;
  height:var(--card-h);
  background:var(--card-bg);
  border-radius:var(--card-radius);
  padding:var(--card-padding);
  display:flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.logo-card:hover{
  transform: scale(1.05) translateY(-4px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.15);
}
.logo-card img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  display:block;
}