:root {
    --skew-angle: -3deg;
    --skew-padding: 80px;
    --primary-cyan: rgb(0, 159, 206);
    --dark-teal: rgb(0, 95, 130);
    --light-cyan: rgb(0, 190, 230);
    --bright-cyan: rgb(50, 210, 245);
  }
  
  /* Diagonal Section Base */
  .diagonal-section {
    position: relative;
    padding: calc(var(--skew-padding) + 10px) 0;
    margin: 0;
    isolation: isolate;
  }
  
  /* Background Gradient with Skew */
  .diagonal-section::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: skewY(var(--skew-angle));
    transform-origin: top left;
    z-index: -1;
  }
  
  /* Background Topography Image Layer */
  .diagonal-section::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: skewY(var(--skew-angle));
    transform-origin: top left;
    z-index: 0;
    opacity: 0.15;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
  }
  
  /* Base opacity for all tiers */
.diagonal-section::after {
  opacity: 0.15;  /* Default for all */
}
 
/* Override for specific tiers */
.polygon-sponsors::after {
  opacity: 0.10;  /* Polygon: more subtle */
}
 
.line-sponsors::after {
  opacity: 0.10;  /* Line: more visible */
}
 
.point-sponsors::after {
  opacity: 0.05;  /* Point: very subtle */
}
  
  /* Polygon Sponsors - Dark Teal with Topography */
  .polygon-sponsors::before {
    background: linear-gradient(135deg, 
      var(--dark-teal) 0%, 
      var(--primary-cyan) 50%, 
      rgb(0, 120, 170) 100%);
  }
  
  .polygon-sponsors::after {
    background-image: url('../img/topography.svg');
    /* Alternative: use Banner.png for this tier */
    /* background-image: url('img/Banner.png'); */
  }
  
  /* Line Sponsors - Primary Cyan with Banner */
  .line-sponsors::before {
    background: linear-gradient(135deg,   
    var(--primary-cyan) 0%, 
      var(--light-cyan) 50%, 
      var(--primary-cyan) 100%);
  }
  
  .line-sponsors::after {
      background-image: url('../img/graph-paper.svg');
      /*circuit-board or bank-note or hexagons or floating-cogs or diagonal-stripes or graph-paper or topography or wiggle or diagonal-lines */
    /*background-image: url('../img/Banner.png');*/
    /* Alternative: use topography for this tier */
      background-repeat: repeat;
      background-size:100px 100px;
  }
  
  /* Point Sponsors - Light Cyan with Topography */
  .point-sponsors::before {
    background: linear-gradient(135deg, 
      var(--light-cyan) 0%, 
      var(--bright-cyan) 50%, 
      var(--light-cyan) 100%);
  }
  
  .point-sponsors::after {
    background-image: url('../img/diagonal-lines.svg');
    background-repeat: repeat;
    background-size:20px 20px;
  }
  
  /* Content Container */
  .diagonal-content {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
  }
  
  /* Tier Headers - Staggered Left/Right */
  .tier-header {
    margin-bottom: 40px;
    display: flex;
    align-items: center;
  }
  
  .tier-header.align-left {
    justify-content: flex-start;
  }
  
  .tier-header.align-right {
    justify-content: flex-end;
  }
  
  /* Tier Title - Parallelogram/Skewed Style */
  .tier-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: white;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    margin: 0;
    padding: 15px 50px;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    display: inline-block;
    transform: skewX(-10deg);
    border: 2px solid rgba(255, 255, 255, 0.3);
  }
  
  /* Sponsor Grid */
  .sponsor-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 280px));
    justify-content: center;
    gap: 30px;
    margin-top: 20px;
  }
  
 .sponsor-grid.align-right {
    justify-content: flex-end;
  }
  
  .sponsor-card {
    background: white;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 160px;
    width: 100%;
  }
  
  .sponsor-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 24px rgba(0, 159, 206, 0.4);
  }
  
  .sponsor-link {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border-bottom: none !important;
    width: 100%;
    height: 100%;
  }
  
  .sponsor-logo {
    max-width: 100%;
    width: 100%;
    height: auto;
    object-fit: contain;
    max-height: 120px;
  }
  
  /* Mobile Responsive */
  @media (max-width: 768px) {
    :root {
      --skew-angle: -2deg;
      --skew-padding: 50px;
    }
    
    .tier-title {
      font-size: 1.8rem;
      padding: 12px 35px;
    }
    
    .sponsor-grid {
      grid-template-columns: 1fr;
      gap: 20px;
    }
    
    .tier-header.align-left,
    .tier-header.align-right {
      justify-content: center;
    }
    
    .sponsor-logo {
      max-height: 100px;
    }
    
    /* Reduce background image opacity on mobile for better readability */
    .diagonal-section::after {
      opacity: 0.08;
    }
  }
  
  @media (max-width: 576px) {
    .tier-title {
      font-size: 1.5rem;
      padding: 10px 30px;
    }
    
    .diagonal-section {
      padding: calc(var(--skew-padding) + 40px) 0;
    }
    
    .sponsor-card {
      min-height: 140px;
    }
    
    .sponsor-logo {
      max-height: 90px;
    }
  }
  
  /* Animation */
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .sponsor-card {
    animation: fadeInUp 0.6s ease-out backwards;
  }
  
  .sponsor-card:nth-child(1) { animation-delay: 0.1s; }
  .sponsor-card:nth-child(2) { animation-delay: 0.2s; }
  .sponsor-card:nth-child(3) { animation-delay: 0.3s; }
  .sponsor-card:nth-child(4) { animation-delay: 0.4s; }
  .sponsor-card:nth-child(5) { animation-delay: 0.5s; }
  .sponsor-card:nth-child(6) { animation-delay: 0.6s; }
  
    /* Logo Size Control */
 /* .sponsor-logo {*/
 /*   max-height: 120px; */ /* Change to 100px, 140px, or 150px */
 /* }*/
 
/* Card Width Control */
 /* .sponsor-grid {*/
  /* Min width: 220px, Max width: 280px */
   /* grid-template-columns: repeat(auto-fill, minmax(220px, 280px));*/
  
  /* Want wider cards? Try: */
  /* grid-template-columns: repeat(auto-fill, minmax(250px, 320px)); */
  
  /* Want narrower cards? Try: */
  /* grid-template-columns: repeat(auto-fill, minmax(180px, 240px)); */
 /*}*/
 
/* Card Height Control */
 /* .sponsor-card {*/
  /*  min-height: 160px;  /* Adjust based on logo size */
 /* }*/
 
 
 /*Extra Large Logos (90% of card):
 .sponsor-logo { max-height: 140px; }
.sponsor-card { min-height: 180px; padding: 15px; }

Medium Logos (60% of card):
.sponsor-logo { max-height: 100px; }
.sponsor-card { min-height: 150px; padding: 22px; }*/