/* ===== Hero Section ===== */
.csr-hero {
  background: #fafafa;
  position: relative;
  overflow: hidden;
}
.csr-hero h1 {
  color: black;
}

.csr-hero::before,
.csr-hero::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 165, 0, 0.2);
  filter: blur(100px);
}

.csr-hero::before {
  width: 250px;
  height: 250px;
  top: 10%;
  right: 15%;
}

.csr-hero::after {
  width: 250px;
  height: 250px;
  bottom: 10%;
  left: 15%;
}

/* ===== Partner Section ===== */
.csr-partner-section {
  background: linear-gradient(135deg, #111827, #1e293b);
}

/* ===== Focus Cards ===== */
.csr-focus-card {
  transition: all 0.3s ease;
  border-radius: 12px;
}

.csr-focus-card:hover {
  background-color: #fff8ef;
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(255, 165, 0, 0.2);
}

/* ===== Company Logos Section ===== */
.company-logos-section {
  background: linear-gradient(to bottom, #ffffff, #fff3e0);
}

.company-card {
  transition: all 0.3s ease;
  border-radius: 12px;
}

.company-card:hover {
  transform: translateY(-5px);
  background-color: #fff8ef;
  box-shadow: 0 6px 16px rgba(255, 165, 0, 0.2);
}

.company-icon {
  width: 70px;
  height: 70px;
  background: linear-gradient(135deg, #fff3cd, #fff8e1);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.company-card:hover .company-icon {
  background: linear-gradient(135deg, #ffc107, #ffb74d);
}

.company-name {
  font-size: 0.95rem;
  color: #444;
  transition: color 0.3s ease;
}

.company-card:hover .company-name {
  color: #ff9800;
}

/* ===== Join Section ===== */
.join-section {
  background: linear-gradient(90deg, #ff7a00, #ff9a3d);
  box-shadow: 0 8px 25px rgba(255, 153, 0, 0.3);
}