/* Brand logo in top nav */

.brand{

  display:flex;

  align-items:center;

  gap:8px;

}



.brand-logo{

  height:56px;

  width:auto;

  max-height:none; /* ⬅ remove the cap */

  display:block;

}

/* ========================= */

/* Sponsor logo wall         */

/* ========================= */



.logo-wall{

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* wider tiles */

  gap: 32px;

  align-items: center;

}



/* Logo container */

.logo{

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 24px;

  background: #ffffff;

  border-radius: 12px;

  box-shadow: 0 6px 14px rgba(0,0,0,0.08);

  transition: transform 0.25s ease, box-shadow 0.25s ease;

}



/* Hover effect */

.logo:hover{

  transform: scale(1.06);

  box-shadow: 0 12px 26px rgba(0,0,0,0.18);

}



/* Logo images */

.logo img{

  height: 110px;       /* ⬅ noticeably bigger */

  width: auto;

  max-width: 100%;

  object-fit: contain;

  display: block;

}



/* ========================= */

/* Mobile tweaks             */

/* ========================= */



@media (max-width: 640px){

  .logo-wall{

    grid-template-columns: repeat(2, 1fr);

    gap: 20px;

  }



  .logo img{

    height: 80px; /* still readable on phones */

  }

}

/* ========================= */

/* FINAL OVERRIDES: Sponsors */

/* ========================= */



/* Sponsors section wrapper (your nav jumps to #Sponsors on the page) */

#sponsors .logo-wall{

  display: grid !important;

  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;

  gap: 32px !important;

  align-items: center !important;

}



/* Make each sponsor tile taller so the logo can actually grow */

#sponsors .logo{

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  padding: 24px !important;

  min-height: 140px !important;   /* <-- key: gives the logo room */

  border-radius: 12px !important;

  overflow: hidden !important;

}



/* Force the logo itself bigger */

#sponsors .logo img{

  height: 120px !important;       /* <-- bump to 120 for visibility */

  width: auto !important;

  max-width: 100% !important;

  object-fit: contain !important;

  display: block !important;

}



/* Mobile */

@media (max-width: 640px){

  #sponsors .logo-wall{

    grid-template-columns: repeat(2, 1fr) !important;

    gap: 20px !important;

  }

  #sponsors .logo{

    padding: 16px !important;

    min-height: 110px !important;

  }

  #sponsors .logo img{

    height: 85px !important;

  }

}