.r4-brands-wrapper {
 display: flex;
 flex-wrap: wrap;
 gap: 1rem;
 width: 100%;
}

.r4-brand-box {
 flex: 0 0 calc(20% - 0.8rem);
 background: white !important;
 border-radius: 16px !important;
 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02);
 transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
 height: 130px;
 padding: 1rem;
 cursor: pointer;
 border: 1px solid rgba(0, 0, 0, 0.02);
 position: relative;
}

.r4-brand-box a {
 text-decoration: none;
 width: 100%;
 height: 100%;
 display: flex;
 align-items: center;
 justify-content: center;
}

.r4-brand-box img {
 max-width: 100%;
 max-height: 100%;
 width: auto;
 height: auto;
 object-fit: contain;
 transition: opacity 0.2s ease;
 opacity: 0.75;
}

.r4-brand-box:hover {
 transform: translateY(-4px);
 box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.03);
 background: #ffffff !important;
}

.r4-brand-box:hover img {
 opacity: 1;
}

.r4-see-all {
 color: #0d6efd !important;
 font-size: 0.85rem;
 font-weight: 600;
 transition: color 0.15s ease, gap 0.15s ease;
 gap: 0.3rem;
 letter-spacing: 0.01em;
 text-decoration: none;
 border-bottom: 2px solid transparent;
 padding-bottom: 0.15rem;
}

.r4-see-all:hover {
 color: #0a58ca !important;
 gap: 0.6rem;
 border-bottom-color: #0d6efd;
}

.r4-header h2 {
 font-size: 1.75rem;
 margin-bottom: 0;
}

.r4-header p {
 margin-bottom: 0.25rem;
}

@media (max-width: 992px) {
 .r4-brand-box {
  flex: 0 0 calc(20% - 0.8rem);
  height: 120px;
  padding: 0.75rem;
 }
}

@media (max-width: 768px) {
 .r4-brand-box {
  flex: 0 0 calc(33.333% - 0.8rem);
  height: 110px;
  padding: 0.75rem;
 }

 .r4-header h2 {
  font-size: 1.25rem;
 }

 .r4-see-all {
  font-size: 0.75rem;
 }
}

@media (max-width: 576px) {
 .r4-brands-wrapper {
  gap: 0.75rem;
 }

 .r4-brand-box {
  flex: 0 0 calc(50% - 0.4rem);
  height: 100px;
  padding: 0.5rem;
 }

 .r4-header {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0.5rem;
 }

 .r4-see-all {
  align-self: flex-start;
 }
}

@media (max-width: 400px) {
 .r4-brand-box {
  flex: 0 0 calc(50% - 0.4rem);
  height: 90px;
  padding: 0.5rem;
 }
}