:root { --maxw: 1400px; --muted:#666; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:#111; }
.container { 
  width: min(100% - 3rem, var(--maxw)); 
  margin-inline: auto; 
  padding: 0 1.5rem;
}

/* Ensure comfortable reading widths for text content */
.article,
.company-overview,
.company-description,
.key-services,
.performance-data,
.risk-management,
.portfolio-overview,
.mission-content,
.impact-stats,
.contact-content {
  max-width: none;
  width: 100%;
}

/* Add comfortable spacing for text sections */
.article h1,
.article h2,
.company-overview h2,
.company-description h2,
.key-services h2,
.performance-data h2,
.risk-management h2,
.portfolio-overview h2,
.mission-content h2,
.impact-stats h2,
.contact-content h2 {
  margin-bottom: 2.5rem;
  margin-top: 3rem;
}

.article p,
.company-overview p,
.company-description p,
.key-services p,
.performance-data p,
.risk-management p,
.portfolio-overview p,
.mission-content p,
.impact-stats p,
.contact-content p {
  margin-bottom: 1.5rem;
  line-height: 1.7;
}
header { position:sticky; top:0; background:#fff; border-bottom:1px solid #eee; z-index:10; }
header .bar { display:flex; align-items:center; justify-content:space-between; padding:0.9rem 0; gap:1rem; }
.brand { display:flex; align-items:center; gap:.65rem; font-weight:700; font-size:1.1rem; }
.brand img { height:40px; width:auto; border-radius:8px; }
.logo { 
  height: 50px; 
  width: auto; 
  display: block; 
  transition: transform 0.2s ease;
}
.brand a:hover .logo {
  transform: scale(1.05);
}
nav a { text-decoration:none; color:#333; padding:.45rem .6rem; border-radius:10px; margin:0 .2rem; }
nav a:hover { background:#f4f4f4; }
main { padding:3rem 0 4rem; line-height:1.65; }
/* Standardize main section spacing for all pages */
.hero,
.company-overview,
.company-description,
.industry-expertise,
.performance-metrics,
.overview-section,
.key-services,
.performance-data,
.risk-management,
.portfolio-overview,
.industry-breakdown,
.geographic-distribution,
.transaction-types,
.portfolio-performance,
.mission-content,
.impact-stats,
.client-network,
.industry-impact,
.geographic-impact,
.sustainable-impact,
.company-overview,
.timeline,
.growth-metrics,
.client-development,
.industry-expertise,
.future-vision,
.contact-content,
.office-locations {
  padding: 4rem 0;
}

/* Ensure consistent card spacing */
.card,
.metric-card,
.overview-card,
.description-card,
.service-card,
.risk-card,
.stat-card,
.industry-card,
.breakdown-item,
.geo-item,
.office-card,
.showcase-item {
  padding: 2.5rem;
  margin-bottom: 1.5rem;
}

/* Standardize grid gaps for consistent spacing */
.grid,
.metrics-grid,
.overview-grid,
.description-grid,
.services-grid,
.risk-grid,
.industry-grid,
.breakdown-grid,
.geo-grid,
.office-grid,
.showcase-grid {
  gap: 2.5rem;
  margin-top: 3rem;
}

/* Old hero styles removed - new styles below */
/* Old grid and card styles removed - new styles below */
.footer { border-top:1px solid #eee; color:var(--muted); padding:1rem 0; }
.article { max-width: none; }
blockquote { border-left:4px solid #ddd; padding-left:.8rem; color:#444; }

/* Enhanced Professional Styling */
.timeline-item {
  transition: transform 0.3s ease;
}

.timeline-item:hover {
  transform: translateX(10px);
}

.timeline-date {
  transition: all 0.3s ease;
}

.timeline-item:hover .timeline-date {
  transform: scale(1.1);
}

.card {
  transition: all 0.3s ease;
  border: 1px solid #eee;
  border-radius: 14px;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
  border-color: #007bff;
}

.hero {
  position: relative;
  overflow: hidden;
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.hero h1 {
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 800;
  margin-bottom: 1.5rem;
  color: #2c3e50;
  text-shadow: none;
  position: relative;
  z-index: 2;
}

.hero p {
  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
  max-width: 800px;
  margin: 0 auto 3rem;
  color: #555;
  text-shadow: none;
  position: relative;
  z-index: 2;
  line-height: 1.6;
}

.hero .grid {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1200px;
}

.hero .card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  transition: all 0.4s ease;
}

.hero .card:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
  background: rgba(255, 255, 255, 1);
}

.hero .card h3 {
  color: #2c3e50;
  margin-bottom: 0.8rem;
  font-size: 1.3rem;
  font-weight: 600;
}

.hero .card p {
  color: #555;
  margin-bottom: 1rem;
  text-shadow: none;
}

.hero .card a {
  color: #007bff;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s ease;
}

.hero .card a:hover {
  color: #0056b3;
  text-decoration: underline;
}

/* Add subtle animation to hero elements */
.hero h1,
.hero p,
.hero .grid {
  animation: fadeInUp 1s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Stagger the card animations */
.hero .card:nth-child(1) { animation-delay: 0.2s; }
.hero .card:nth-child(2) { animation-delay: 0.4s; }
.hero .card:nth-child(3) { animation-delay: 0.6s; }
.hero .card:nth-child(4) { animation-delay: 0.8s; }

/* Enhanced grid layout for better responsiveness */
.hero .grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  padding: 0 1rem;
}

/* Improved card styling */
.hero .card {
  padding: 1.5rem;
  border-radius: 16px;
  position: relative;
  overflow: hidden;
}

.hero .card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #667eea, #764ba2);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.hero .card:hover::before {
  transform: scaleX(1);
}

/* Responsive improvements */
@media (max-width: 768px) {
  .hero {
    min-height: 70vh;
    padding: 2rem 1rem;
  }
  
  .hero .grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .hero .card {
    padding: 1.25rem;
  }
}

@media (max-width: 480px) {
  .hero h1 {
    font-size: clamp(2rem, 8vw, 2.5rem);
  }
  
  .hero p {
    font-size: clamp(1rem, 4vw, 1.2rem);
    margin-bottom: 2rem;
  }
}

/* Form Styling */
input, select, textarea {
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 3px rgba(0,123,255,0.1);
}

button:hover {
  background-color: #0056b3 !important;
}

/* Responsive Timeline */
@media (max-width: 768px) {
  .timeline-item {
    flex-direction: column;
    text-align: center;
  }
  
  .timeline-date {
    margin-right: 0;
    margin-bottom: 1rem;
  }
}
@media (max-width:720px){ nav { overflow:auto; display:grid; grid-auto-flow:column; } }

/* Performance Metrics Section */
.performance-metrics {
  padding: 4rem 0;
  background: white;
}

.performance-metrics h2 {
  text-align: center;
  margin-bottom: 2rem;
  color: #2c3e50;
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-bottom: 2rem;
}

.metric-card {
  background: #f8f9fa;
  padding: 2rem;
  border-radius: 12px;
  text-align: center;
  border-left: 4px solid #007bff;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.metric-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}

.metric-number {
  font-size: 2.5rem;
  font-weight: 800;
  color: #007bff;
  margin-bottom: 0.5rem;
}

.metric-label {
  font-size: 1.1rem;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 0.5rem;
}

.metric-detail {
  color: #666;
  font-size: 0.9rem;
}

.performance-footnote {
  text-align: center;
  margin-top: 1rem;
}

.performance-footnote p {
  color: #6c757d;
  font-size: 0.85rem;
  font-style: italic;
  margin: 0;
  opacity: 0.8;
}

/* Industry Expertise Section */
.industry-expertise {
  padding: 4rem 0;
  background: #f8f9fa;
}

.industry-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 2rem;
}

.industry-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.industry-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.15);
}

.industry-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.industry-card h3 {
  color: #2c3e50;
  margin: 1.5rem 1.5rem 1rem 1.5rem;
}

.industry-card p {
  color: #666;
  line-height: 1.6;
  margin: 0 1.5rem 1rem 1.5rem;
}

.industry-stats {
  background: #007bff;
  color: white;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  text-align: center;
  margin: 0 1.5rem 1.5rem 1.5rem;
  border-radius: 6px;
}

/* Responsive Design for Industry Grid */
@media (max-width: 768px) {
  .industry-grid {
    grid-template-columns: 1fr;
  }
}

/* Global Reach Section */
.global-reach {
  padding: 4rem 0;
  background: #2c3e50;
  color: white;
}

.global-reach h2 {
  color: white;
  text-align: center;
  margin-bottom: 1rem;
}

.global-reach p {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 3rem;
  color: #bdc3c7;
  font-size: 1.1rem;
}

.reach-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.stat-item {
  text-align: center;
  padding: 1.5rem;
}

.stat-item h4 {
  color: #3498db;
  margin-bottom: 1rem;
  font-size: 1.3rem;
}

.stat-item p {
  color: #ecf0f1;
  line-height: 1.6;
  margin: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
  .metrics-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
  }
  
  .metric-number {
    font-size: 2.5rem;
  }
  
  .industry-grid {
    grid-template-columns: 1fr;
  }
  
  .reach-stats {
    grid-template-columns: 1fr;
  }
}

/* Corporate Profile Page Styles */
.company-overview {
  margin: 3rem 0;
}

.overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.overview-card {
  background: #f8f9fa;
  padding: 2rem;
  border-radius: 12px;
  border-left: 4px solid #007bff;
}

.overview-card h3 {
  color: #2c3e50;
  margin-bottom: 1rem;
}

.overview-card p {
  color: #666;
  line-height: 1.6;
  margin: 0;
}

/* Key Services Section */
.key-services {
  padding: 4rem 0;
  background: white;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.service-card {
  background: white;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}

.service-card h3 {
  color: #2c3e50;
  margin-bottom: 1rem;
  border-bottom: 2px solid #007bff;
  padding-bottom: 0.5rem;
}

.service-card p {
  color: #666;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.service-card ul {
  color: #666;
  line-height: 1.6;
  margin: 0;
  padding-left: 1.5rem;
}

.service-card li {
  margin-bottom: 0.5rem;
}

/* Performance Data Section */
.performance-data {
  padding: 4rem 0;
  background: #f8f9fa;
}

.data-highlights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.highlight-item {
  text-align: center;
  padding: 1.5rem;
  background: #f8f9fa;
  border-radius: 12px;
}

.highlight-number {
  display: block;
  font-size: 2rem;
  font-weight: 800;
  color: #007bff;
  margin-bottom: 0.5rem;
}

.highlight-label {
  color: #666;
  font-size: 0.9rem;
  line-height: 1.4;
}

/* Portfolio Breakdown */
.portfolio-breakdown {
  margin: 3rem 0;
}

.breakdown-grid {
  margin-top: 2rem;
}

.breakdown-item {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
  padding: 1rem;
  background: #f8f9fa;
  border-radius: 8px;
}

.breakdown-bar {
  height: 20px;
  background: linear-gradient(90deg, #007bff, #0056b3);
  border-radius: 10px;
  margin-right: 1rem;
  min-width: 100px;
}

.breakdown-label {
  color: #2c3e50;
  font-weight: 600;
}

/* Geographic Distribution */
.geographic-distribution {
  margin: 3rem 0;
}

.geo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}

.geo-item {
  background: white;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 1.5rem;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.geo-country {
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 0.5rem;
}

.geo-percentage {
  font-size: 1.5rem;
  font-weight: 800;
  color: #007bff;
  margin-bottom: 0.5rem;
}

.geo-amount {
  color: #666;
  font-size: 0.9rem;
}

/* Risk Management Section */
.risk-management {
  padding: 4rem 0;
  background: white;
}

.risk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.risk-card {
  background: white;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.risk-card h3 {
  color: #2c3e50;
  margin-bottom: 1rem;
  border-bottom: 2px solid #28a745;
  padding-bottom: 0.5rem;
}

.risk-card p {
  color: #666;
  line-height: 1.6;
  margin: 0;
}



/* Responsive Design for Corporate Profile */
@media (max-width: 768px) {
  .overview-grid,
  .services-grid,
  .risk-grid {
    grid-template-columns: 1fr;
  }
  
  .data-highlights {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
  
  .geo-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
  
  .breakdown-bar {
    min-width: 60px;
  }
}

/* Loan Portfolio Page Styles */
.portfolio-overview {
  margin: 3rem 0;
}

.overview-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.stat-card {
  background: white;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}

.stat-number {
  font-size: 2.5rem;
  font-weight: 800;
  color: #007bff;
  margin-bottom: 0.5rem;
}

.stat-label {
  color: #666;
  font-size: 0.9rem;
  font-weight: 600;
}

/* Industry Breakdown */
.industry-breakdown {
  margin: 3rem 0;
}

.industry-chart {
  margin: 2rem 0;
}

.chart-item {
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
}

.chart-bar {
  height: 30px;
  background: linear-gradient(90deg, #007bff, #0056b3);
  border-radius: 15px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  color: white;
  font-weight: 600;
  min-width: 200px;
}

.chart-label {
  font-size: 0.9rem;
}

.chart-value {
  font-size: 0.8rem;
}

.industry-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
}

.industry-card {
  background: white;
  border: 1px solid #eee;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.industry-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}

.industry-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.industry-content {
  padding: 1.5rem;
}

.industry-content h3 {
  color: #2c3e50;
  margin-bottom: 1rem;
  border-bottom: 2px solid #007bff;
  padding-bottom: 0.5rem;
}

.industry-content p {
  color: #666;
  line-height: 1.6;
  margin-bottom: 0.5rem;
}

/* Geographic Distribution */
.geographic-distribution {
  margin: 3rem 0;
}

.geo-chart {
  margin: 2rem 0;
}

.geo-item {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
  padding: 1rem;
  background: #f8f9fa;
  border-radius: 8px;
}

.geo-country {
  min-width: 120px;
  font-weight: 600;
  color: #2c3e50;
}

.geo-bar {
  height: 25px;
  background: linear-gradient(90deg, #28a745, #20c997);
  border-radius: 12px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  color: white;
  font-weight: 600;
  margin-left: 1rem;
  flex-grow: 1;
}

.geo-percentage {
  font-size: 0.9rem;
}

.geo-amount {
  font-size: 0.8rem;
}

/* Transaction Types */
.transaction-types {
  margin: 3rem 0;
}

.transaction-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.transaction-card {
  background: white;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.transaction-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}

.transaction-card h3 {
  color: #2c3e50;
  margin-bottom: 1rem;
  border-bottom: 2px solid #007bff;
  padding-bottom: 0.5rem;
}

.transaction-card p {
  color: #666;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.transaction-features {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.feature {
  background: #e3f2fd;
  color: #1976d2;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
}

/* Portfolio Performance */
.portfolio-performance {
  margin: 3rem 0;
}

.performance-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.metric-item {
  display: flex;
  align-items: flex-start;
  background: white;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.metric-icon {
  font-size: 2rem;
  margin-right: 1rem;
  margin-top: 0.5rem;
}

.metric-content h4 {
  color: #2c3e50;
  margin-bottom: 0.5rem;
}

.metric-content p {
  color: #666;
  line-height: 1.6;
  margin: 0;
}

/* Responsive Design for Loan Portfolio */
@media (max-width: 768px) {
  .overview-stats {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
  
  .industry-details {
    grid-template-columns: 1fr;
  }
  
  .transaction-grid {
    grid-template-columns: 1fr;
  }
  
  .performance-metrics {
    grid-template-columns: 1fr;
  }
  
  .chart-bar {
    min-width: 150px;
  }
  
  .geo-country {
    min-width: 80px;
    font-size: 0.9rem;
  }
}

/* Company Overview Section */
.company-overview {
  padding: 4rem 0;
  background: white;
}

.overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.overview-card {
  background: #f8f9fa;
  padding: 2rem;
  border-radius: 12px;
  border-left: 4px solid #007bff;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.overview-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}

.overview-card h3 {
  color: #2c3e50;
  margin-bottom: 1rem;
}

.overview-card p {
  color: #666;
  line-height: 1.6;
  margin: 0;
}

/* Responsive Design for Company Overview */
@media (max-width: 768px) {
  .overview-grid {
    grid-template-columns: 1fr;
  }
}

/* Company Description Section */
.company-description {
  padding: 4rem 0;
  background: #f8f9fa;
}

.company-description h2 {
  text-align: center;
  margin-bottom: 2rem;
  color: #2c3e50;
}

.company-description p {
  text-align: center;
  color: #666;
  line-height: 1.6;
  max-width: 800px;
  margin: 0 auto 2rem auto;
}

.description-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.description-card {
  background: white;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}

.description-card:hover {
  transform: translateY(-5px);
}

.description-card h3 {
  color: #2c3e50;
  margin-bottom: 1rem;
}

.description-card p {
  color: #666;
  line-height: 1.6;
  margin: 0;
  text-align: left;
}

/* Industry Showcase Section */
.industry-showcase {
  padding: 4rem 0;
  background: white;
}

.industry-showcase h2 {
  text-align: center;
  margin-bottom: 1rem;
  color: #2c3e50;
}

.industry-showcase p {
  text-align: center;
  color: #666;
  line-height: 1.6;
  max-width: 800px;
  margin: 0 auto 3rem auto;
}

.showcase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

.showcase-item {
  text-align: center;
  background: #f8f9fa;
  padding: 1.5rem;
  border-radius: 12px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.showcase-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}

.showcase-item img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 1rem;
}

.showcase-item h3 {
  color: #2c3e50;
  margin-bottom: 1rem;
}

.showcase-item p {
  color: #666;
  line-height: 1.6;
  margin: 0;
  text-align: left;
}

/* Update Industry Grid for 4 cards */
.industry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

/* Responsive Design Updates */
@media (max-width: 768px) {
  .description-grid {
    grid-template-columns: 1fr;
  }
  
  .showcase-grid {
    grid-template-columns: 1fr;
  }
  
  .industry-grid {
    grid-template-columns: 1fr;
  }
}

/* Office Locations Section */
.office-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.office-card {
  background: white;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}

.office-card:hover {
  transform: translateY(-5px);
}

.office-card h3 {
  color: #2c3e50;
  margin-bottom: 1rem;
  border-bottom: 2px solid #007bff;
  padding-bottom: 0.5rem;
}

.office-card p {
  color: #666;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.office-contact {
  background: #f8f9fa;
  padding: 1rem;
  border-radius: 8px;
  margin-top: 1rem;
}

.office-contact p {
  margin: 0.5rem 0;
  font-size: 0.95rem;
}

/* Responsive Design for Office Locations */
@media (max-width: 768px) {
  .office-grid {
    grid-template-columns: 1fr;
  }
}

/* Disclaimer Section */
.disclaimer-section {
  background: #f8f9fa;
  border-top: 1px solid #e9ecef;
  padding: 3rem 0;
  margin-top: 4rem;
}

.disclaimer-content {
  max-width: 1000px;
  margin: 0 auto;
}

.disclaimer-content h3 {
  color: #6c757d;
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
  text-align: center;
  font-weight: 600;
}

.disclaimer-content p {
  color: #6c757d;
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0;
  text-align: center;
  opacity: 0.8;
}

/* Footer spacing */
.footer {
  border-top: 1px solid #eee;
  color: var(--muted);
  padding: 2rem 0;
  margin-top: 2rem;
}

.disclaimer-link {
  color: #007bff;
  text-decoration: none;
  font-weight: 500;
}

.disclaimer-link:hover {
  text-decoration: underline;
}

/* Responsive Design for Disclaimer */
@media (max-width: 768px) {
  .disclaimer-content {
    padding: 0 1rem;
  }
  
  .disclaimer-content p {
    font-size: 0.85rem;
  }
}

/* Key Services Grid - 3 columns in single row */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Exactly 3 columns */
  gap: 2.5rem;
  margin-top: 3rem;
}

/* Risk Management Grid - 3 columns in single row */
.risk-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Exactly 3 columns */
  gap: 2.5rem;
  margin-top: 3rem;
}

/* Responsive design for mobile */
@media (max-width: 768px) {
  .services-grid,
  .risk-grid {
    grid-template-columns: 1fr;
  }
}

/* Pie Chart Styling */
.pie-chart-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
  margin-top: 3rem;
}

.pie-chart {
  position: relative;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: conic-gradient(
    #2E86AB 0deg 221.76deg,
    #A23B72 221.76deg 255.96deg,
    #F18F01 255.96deg 282.24deg,
    #C73E1D 282.24deg 306deg,
    #6A994E 306deg 327.6deg,
    #BC4749 327.6deg 346.5deg,
    #8B5A3C 346.5deg 360deg
  );
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pie-chart:hover {
  transform: scale(1.05);
}

.pie-chart-inner {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pie-center {
  background: white;
  border-radius: 50%;
  width: 120px;
  height: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  z-index: 2;
}

.total-amount {
  font-size: 1.2rem;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 0.5rem;
}

.total-label {
  font-size: 0.8rem;
  color: #6c757d;
  text-align: center;
  line-height: 1.2;
}

/* Pie Chart Legend */
.pie-legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
  max-width: 800px;
  width: 100%;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.legend-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.legend-color {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.legend-text {
  font-weight: 500;
  color: #333;
  font-size: 0.95rem;
}

/* Responsive Design for Pie Chart */
@media (max-width: 768px) {
  .pie-chart {
    width: 250px;
    height: 250px;
  }
  
  .pie-legend {
    grid-template-columns: 1fr;
  }
  
  .pie-center {
    width: 100px;
    height: 100px;
  }
  
  .total-amount {
    font-size: 1rem;
  }
  
  .total-label {
    font-size: 0.7rem;
  }
}

@media (max-width: 480px) {
  .pie-chart {
    width: 200px;
    height: 200px;
  }
  
  .pie-center {
    width: 80px;
    height: 80px;
  }
  
  .total-amount {
    font-size: 0.9rem;
  }
  
  .total-label {
    font-size: 0.6rem;
  }
}

/* Portfolio Visualization - Side by Side Layout */
.portfolio-visualization {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  margin-top: 3rem;
  align-items: start;
}

.portfolio-breakdown,
.geographic-distribution {
  width: 100%;
}

/* Responsive design for portfolio visualization */
@media (max-width: 1024px) {
  .portfolio-visualization {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}

@media (max-width: 768px) {
  .portfolio-visualization {
    gap: 2rem;
  }
}

/* Transaction Types Grid - 3 columns in single row */
.transaction-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Exactly 3 columns */
  gap: 2.5rem;
  margin-top: 3rem;
}

.transaction-card {
  background: white;
  border-radius: 14px;
  padding: 2.5rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  border: 1px solid #eee;
  transition: all 0.3s ease;
}

.transaction-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  border-color: #007bff;
}

.transaction-card h3 {
  color: #2c3e50;
  margin-bottom: 1rem;
  font-size: 1.3rem;
  font-weight: 600;
}

.transaction-card p {
  color: #555;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.transaction-features {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.feature {
  background: #f8f9fa;
  color: #495057;
  padding: 0.4rem 0.8rem;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 500;
  border: 1px solid #e9ecef;
}

/* Responsive design for transaction grid */
@media (max-width: 768px) {
  .transaction-grid {
    grid-template-columns: 1fr;
  }
}