body {
  font-family: "Inter", sans-serif;
  margin: 0;
  background: #f8fafc; /* Light gray background */
  line-height: 1.6;
  color: #334155; /* Default text color */
}

.container {
  max-width: 1024px; /* Max width similar to previous solution */
  margin: 0 auto;
  padding: 32px 16px;
}

.header-section h1 {
  font-size: 2.5rem; /* 40px */
  font-weight: 700;
  color: #1e293b; /* Darker text for heading */
  margin-bottom: 16px;
}

.header-section p {
  font-size: 1.125rem; /* 18px */
  color: #475569;
}

/* Card Styling */
.card {
  background: #ffffff;
  margin-bottom: 32px;
  border-radius: 0.5rem; /* 8px */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Subtle shadow */
  border: none; /* Remove default border */
}

.card-header {
  padding: 2rem; /* 32px */
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
  color: #ffffff;
}

.card-header.blue-gradient {
  background: linear-gradient(to right, #2563eb, #1d4ed8); /* Blue gradient */
}

.card-header.slate-gradient {
  background: linear-gradient(to right, #475569, #334155); /* Slate gradient */
}

.card-header-content {
  display: flex;
  align-items: center;
  gap: 0.75rem; /* 12px */
  margin-bottom: 0.5rem; /* 8px */
}

.card-header-content h2 {
  font-size: 1.5rem; /* 24px */
  font-weight: 600;
  margin: 0; /* Remove default margin */
}

.card-header .icon {
  width: 1.5rem; /* 24px */
  height: 1.5rem; /* 24px */
  color: #ffffff;
}

.card-description {
  font-size: 0.9375rem; /* 15px */
  color: rgba(255, 255, 255, 0.8);
}

.card-content {
  padding: 2rem; /* 32px */
}

/* Important Dates Grid */
.dates-grid {
  display: grid;
  grid-template-columns: 1fr; /* Single column by default */
  gap: 1.5rem; /* 24px */
}

@media (min-width: 768px) {
  /* Medium screens and up */
  .dates-grid {
    grid-template-columns: repeat(2, 1fr); /* Two columns */
  }
}

.date-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem; /* 16px */
  padding: 1rem; /* 16px */
  border-radius: 0.5rem; /* 8px */
  border-left-width: 4px;
  border-left-style: solid;
}

.date-item h3 {
  font-weight: 600;
  color: #1e293b;
  margin-top: 0;
  margin-bottom: 0.25rem; /* 4px */
}

.date-highlight {
  font-size: 1.5rem; /* 24px */
  font-weight: 700;
  margin: 0;
}

.date-icon {
  width: 1.25rem; /* 20px */
  height: 1.25rem; /* 20px */
  flex-shrink: 0;
  margin-top: 0.25rem; /* 4px */
}

/* Date Item Colors */
.date-item.red {
  background-color: #fef2f2; /* red-50 */
  border-color: #ef4444; /* red-500 */
}
.date-item.red .date-icon,
.date-item.red .date-highlight {
  color: #dc2626; /* red-600 */
}

.date-item.orange {
  background-color: #fff7ed; /* orange-50 */
  border-color: #f97316; /* orange-500 */
}
.date-item.orange .date-icon,
.date-item.orange .date-highlight {
  color: #ea580c; /* orange-600 */
}

.date-item.yellow {
  background-color: #fffbeb; /* yellow-50 */
  border-color: #f59e0b; /* yellow-500 */
}
.date-item.yellow .date-icon,
.date-item.yellow .date-highlight {
  color: #d97706; /* yellow-600 */
}

.date-item.green {
  background-color: #f0fdf4; /* green-50 */
  border-color: #22c55e; /* green-500 */
}
.date-item.green .date-icon,
.date-item.green .date-highlight {
  color: #16a34a; /* green-600 */
}

.date-item.blue {
  background-color: #eff6ff; /* blue-50 */
  border-color: #3b82f6; /* blue-500 */
}
.date-item.blue .date-icon,
.date-item.blue .date-highlight {
  color: #2563eb; /* blue-600 */
}

/* General Instructions Styling */
.section-subheading {
  margin-bottom: 1rem; /* 16px */
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem; /* 4px 12px */
  border-radius: 9999px; /* Full rounded */
  font-size: 0.875rem; /* 14px */
  font-weight: 500;
  background-color: #dbeafe; /* blue-100 */
  color: #1e40af; /* blue-800 */
}

.submission-section {
  margin-bottom: 2rem; /* 32px */
}

.submission-heading {
  font-size: 1.25rem; /* 20px */
  font-weight: 600;
  color: #1e293b;
  margin-top: 0;
  margin-bottom: 1rem; /* 16px */
}

.guidelines-list {
  list-style: none; /* Remove default list style */
  padding-left: 0;
  margin-top: 0;
  margin-bottom: 0; /* Remove default margin */
}

.guidelines-list li {
  display: flex;
  align-items: flex-start;
  margin-bottom: 1rem; /* 16px */
  text-align: justify;
  color: #475569;
}

.guidelines-list li::before {
  content: "";
  display: block;
  width: 0.5rem; /* 8px */
  height: 0.5rem; /* 8px */
  background-color: #3b82f6; /* blue-500 */
  border-radius: 50%;
  flex-shrink: 0;
  margin-right: 0.75rem; /* 12px */
  margin-top: 0.5rem; /* Align with text */
}

.guidelines-list li strong {
  font-weight: 600;
}

.link-text {
  color: #2563eb; /* blue-600 */
  text-decoration: underline;
  font-weight: 500;
  cursor: pointer;
}

.link-text:hover {
  color: #1d4ed8; /* blue-800 */
}

/* Fee Table Styling */
.fee-table-wrapper {
  overflow-x: auto; /* Allows horizontal scrolling on small screens */
  width: 100%;
  max-width: 800px; /* Keeps table from getting too wide */
  margin: 0 auto; /* Center the table */
  border-radius: 0.5rem; /* 8px */
  border: 1px solid #e2e8f0; /* slate-200 */
}

.fee-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 400px; /* was 600px */
  font-size: 0.9rem; /* slightly smaller text */
}

.fee-table th,
.fee-table td {
  border: 1px solid #e2e8f0; /* slate-200 */
  padding: 0.6rem 0.8rem; /* reduced padding */
  text-align: center;
}

.fee-table th {
  background-color: #f1f5f9; /* slate-100 */
  font-weight: 600;
  color: #1e293b;
  white-space: nowrap; /* Prevent header text from wrapping */
  font-size: 0.95rem;
}

.fee-table td:first-child {
  text-align: left;
  font-weight: 500;
  color: #1e293b;
  white-space: nowrap; /* keep category names in one line */
}

/* Added logo grid styling for better organization of indexing logos */
.logo-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}

.row {
  display: flex;
  gap: 40px;
  justify-content: center;
}

/* Added bank details styling */
.bank-details {
  border: 1px solid #000; /* black border */
  padding: 1rem 1.5rem; /* space inside box */
  max-width: 400px; /* box width */
  margin: 1.5rem auto; /* center horizontally */
  text-align: center; /* center text */
  font-size: 1rem; /* normal readable text */
  line-height: 1.6; /* spacing between lines */
  border-radius: 6px; /* slightly rounded corners */
  /* background-color: #fafafa;   light background */
}

.bank-details p {
  margin: 0.3rem 0; /* small spacing between lines */
}