body { background: #eef3fb; }
        .goals-carousel-slide { display: none; }
        .goals-carousel-slide.active { display: block; }
        .carousel-dot { margin: 0 3px; cursor: pointer; border-radius: 999px; background: #0b0b28; width:12px; height:12px; display:inline-block;}
        .carousel-dot.active { background:#0b0b28!important; }
        .carousel-nav button { border:none; background: #d1e1ef; margin:0 5px;}
        .goal-legend-item {display:flex;align-items:center;margin-bottom:6px;}
        .goal-legend-color {width:20px;height:20px;margin-right:8px;}
        .empty-card {visibility:hidden;}
        .badge-container span {margin-right:8px;}
        .card small {
        display: none;
      }
      .card.expanded small {
        display: block; 
      }
      .metrics-cards {
      display: flex;
      flex-wrap: wrap;
      gap: 1.5rem;
      justify-content: center;
      margin: 0 auto;
      max-width: 1200px;
    }
    
/* Legend container */
#goals-carousel .goals-scroll-content {
  text-align: left;   /* ensure left alignment */
}

/* Each row */
.goal-label-row {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* left-align content */
  margin-bottom: 6px;
  font-size: 14px;
}

/* Color square */
.goal-color-box {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  margin-right: 8px;
  background-color: var(--box-color);
  flex-shrink: 0;
}
    
    .metrics-cards .card {
      flex: 0 0 280px;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 1.5rem 2rem;
      box-sizing: border-box;
      text-align: center;
      background: #0b0b28;
      border-radius: 10px;
      color: white;
      box-shadow: 0 2px 10px rgb(0 0 0 / 0.4);
    }
    
    .metrics-cards .card .card-header {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 0.6rem;
    }
    
    .metrics-cards .arrow {
      cursor: pointer;
      font-size: 22px;
      user-select: none;
    }
    
    .metrics-cards .value {
      font-size:1.25rem;
      font-weight: 700;
      margin: 0.5rem 0;
    }
    
    .metrics-cards .fontbold {
      margin-top: 0.8rem;
      line-height: 1.4;
    }
    
    @media (max-width: 600px) {
      .metrics-cards .card {
        flex: 1 1 100%;
        max-width: 100%;
      }
    }
    @media (max-width: 767px) {
      .goals-carousel-slide .row {
        flex-direction: column !important;
        gap: 1rem !important;
      }
      .goals-carousel-slide .col-md-5,
      .goals-carousel-slide .col-md-7 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 !important;
      }
      .goals-scroll-content {
        width: 100%;
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: 350px;
        margin: 0 auto;
      }
      .goals-scroll-content div {
        text-align: left !important;
      }
      .goals-carousel-slide .card {
        padding: 1rem 0.5rem !important;
      }
    }

    .controls{display:flex;gap:12px;align-items:center}
    select{padding:10px 14px;border-radius:8px;background:#0b0b28;border:1px solid rgba(255,255,255,0.04);color:var(--muted);font-weight:600}

    @media (max-width:520px){.card{padding:18px}.controls{flex-direction:column;align-items:stretch}select{width:100%}}
    
    .mainclass {
        padding-left: 5vw; padding-right:5vw;
    }
    .dropdowncolor{
        color:#fff;
    }
    
    .metric_dev {
        background:#0b0b28;
    }
    
    
    
    .modal {
      display: none;
      position: fixed;
      z-index: 9999;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.6);
      justify-content: center;
      align-items: center;
    }
    .modal-content {
      background: #fff;
      padding: 20px 30px;
      border-radius: 10px;
      text-align: center;
      max-width: 400px;
      width: 80%;
      box-shadow: 0px 4px 10px rgba(0,0,0,0.3);
    }
    .modal-content p {
      margin-bottom: 15px;
      font-size: 16px;
      color: #333;
    }
    .goal-color-box {
  width: 20px;
  height: 20px;
  display: inline-block;
  margin-right: 8px;
}
    .close-btn {
      background: #BA4E2B;
      color: #fff;
      border: none;
      padding: 10px 20px;
      border-radius: 5px;
      cursor: pointer;
      font-size: 14px;
    }
    .close-btn:hover {
      background: #0056b3;
    }
    
    
    
            .events-container {
            /*max-width: 1200px;*/
            margin: 0 auto;
            /*padding: 30px 20px;*/
            background-color: #fff;
            border-radius: 12px;
            /*box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);*/
        }
        
        .events > p {
            text-align: center;
            margin-bottom: 30px;
            color: #64748b;
            font-size: 1.1rem;
        }
        
        .carousel-container {
            position: relative;
            /*margin: 0 auto 40px;*/
            overflow: hidden;
            /*padding: 10px;*/
        }
        
        .event-cards {
            display: flex;
            transition: transform 0.5s ease;
            gap: 20px;
        }
        
        .event-card {
            flex: 0 0 calc(33.333% - 14px);
            background: white;
            border-radius: 12px;
            padding: 25px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            border: 1px solid #e2e8f0;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .event-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
        }
        
        .event-card h3 {
            font-size: 1.3rem;
            color: #1a365d;
            margin-bottom: 15px;
            min-height: 68px;
        }
        
        .badge-container {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 15px;
        }
        
        .badge {
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 600;
        }
        
        .badge:not(.type) {
            background-color: #e6f7ff;
            color: #1890ff;
        }
        
        .badge.type {
            background-color: #f6fef9;
            color: #0cce6b;
        }
        
        .event-card p {
            margin-bottom: 12px;
            color: #475569;
            display: flex;
            align-items: flex-start;
            gap: 8px;
        }
        
        .event-card .desc {
            margin-top: 15px;
            padding-top: 15px;
            border-top: 1px dashed #e2e8f0;
            font-style: italic;
            color: #64748b;
        }
        
        .carousel-nav {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-top: 20px;
        }
        
        .nav-btn {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border: none;
            background-color: #0b0b28;
            color: white;
            font-size: 18px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }
        
        .nav-btn:hover {
            background-color: #2c5282;
            transform: scale(1.05);
        }
        
        .nav-btn:disabled {
            background-color: #cbd5e0;
            cursor: not-allowed;
            transform: scale(1);
        }
        
        .carousel-dots {
            display: flex;
            justify-content: center;
            gap: 8px;
            margin-top: 15px;
        }
        
        .dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #cbd5e0;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        
        .dot.active {
            background-color: #1a365d;
            transform: scale(1.2);
        }
        
        .filters {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            justify-content: center;
            margin-top: 30px;
        }
        
        .filters button {
            padding: 8px 16px;
            border: 1px solid #cbd5e0;
            background-color: white;
            border-radius: 20px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 0.9rem;
        }
        
        .filters button:hover {
            background-color: #f1f5f9;
        }
        
        .filters button.active {
            background-color: #0b0b28;
            color: white;
            border-color: #0b0b28;
        }
        
        /*@media (max-width: 992px) {*/
        /*    .event-card {*/
        /*        flex: 0 0 calc(50% - 10px);*/
        /*    }*/
        /*}*/
        
        /*@media (max-width: 576px) {*/
        /*    .event-card {*/
        /*        flex: 0 0 100%;*/
        /*    }*/
            
        /*    .filters {*/
        /*        gap: 5px;*/
        /*    }*/
            
        /*    .filters button {*/
        /*        padding: 6px 12px;*/
        /*        font-size: 0.8rem;*/
        /*    }*/
        /*}*/
        
        .event-cards {
          display: flex;
          flex-wrap: wrap;
          gap: 20px;
        }
        
        .event-card {
          flex: 1 1 calc(33.333% - 20px);
        }
        
        @media (max-width: 768px) {
          .event-card {
            flex: 1 1 calc(50% - 20px);
          }
        }
        
        @media (max-width: 576px) {
          .event-card {
            flex: 1 1 100%;
          }
        }
        
        
        .footer-links ul.grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        list-style: none;
        padding: 0;
        margin: 0;
        }
        .footer-links li a {
        text-decoration: none;
        color: #333;
        font-size: 14px;
        transition: color 0.3s ease;
        }
        .footer-links li a:hover {
        color: #007acc;
        }
    
    .fullscreen-notice {
      padding: 20px;
      text-align: center;
    }
    .fullscreen-notice .notice-title {
      font-size: 14px;
      text-transform: uppercase;
    }
    .fullscreen-notice .notice-main {
      font-size: 28px;
      font-weight: bold;
      margin: 10px 0;
    }
    .fullscreen-notice .notice-sub {
      font-size: 16px;
    }
    .footer_center
    {
        text-align:center
    }
    
    
    .metrics-cards .card small.fontbold {
          display: none;
        }
        
        .metrics-cards .card.expanded small.fontbold {
          display: block;
        }