:root{
  --blue: #0267B1;
  --white-soft: #fff9f9;
  --card-bg: #f5f5f5;
  --card-w: 300px;
  --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 with overlay */
.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);
}

/* Logo grid */
.logo-grid{
  width:1760px;
  max-width:100%;
  margin:0 auto;
  display:grid;
  grid-template-columns: repeat(5, var(--card-w));
  column-gap: var(--card-gap-x);
  row-gap: var(--card-gap-y);
  justify-content:center;
}
.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;
}