/* Hero Section for brand */
.brand-hero {
  background: linear-gradient(270deg, #7f42a7, #5300a0);
  background-size: 400% 400%;
  animation: backgroundLoop 6s ease infinite;
  color: white;
  padding: 4rem 2rem;
  text-align: center;
}

.brand-hero-content {
  max-width: 800px;
  margin: 0 auto;
}

.brand-hero-content h1 {
  font-size: 2.8rem;
  margin-bottom: 1rem;
}

.underline {
  width: 60px;
  height: 4px;
  background-color: white;
  margin: 1rem auto 1.5rem auto;
  border-radius: 2px;
}

.brand-hero-content p {
  font-size: 1.2rem;
  opacity: 0.9;
  line-height: 1.7;
}

/* Table Section */
.brand-table-section {
  padding: 4rem 2rem;
  background: #f9f9f9;
}

.table-container {
  max-width: 95%;
  margin: 0 auto;
  overflow-x: auto;
}

table {
  border: 2px solid #c7b3da;
  width: 100%;
  border-collapse: collapse;
  background-color: white;
  overflow: hidden;

}

thead {
  background-color: #5300a0;
  color: white;
}

th, td {
  border: 2px solid #c7b3da;
  border-spacing: 0;
  padding: 1.2rem;
  text-align: left;
  font-size: 1rem;
}

tbody tr:nth-of-type(even) {
  background-color: #f3effc;
}

tbody tr:hover {
  background-color: #eee5ff;
}

@keyframes backgroundLoop {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Responsive */
@media (max-width: 768px) {
  th, td {
    font-size: 0.95rem;
  }
}