/* Hero Section */
    .event-hero {
      position: relative;
      width: 100%;
      height: 450px;
      /* background: linear-gradient(135deg, #1a365d 0%, #2b6cb0 50%, #4299e1 100%); */
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    .event-hero::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="2" fill="rgba(255,255,255,0.1)"/><circle cx="80" cy="40" r="1.5" fill="rgba(255,255,255,0.08)"/><circle cx="40" cy="70" r="2.5" fill="rgba(255,255,255,0.06)"/><circle cx="90" cy="80" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="10" cy="90" r="2" fill="rgba(255,255,255,0.05)"/></svg>');
      opacity: 0.5;
    }

    .event-hero-title {
      position: relative;
      z-index: 1;
      color: #ffffff;
      font-size: 3.5rem;
      font-weight: 700;
      text-align: center;
      text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
      max-width: 900px;
      padding: 0 2rem;
    }

    /* Content Wrapper */
    .event-content-wrapper {
      max-width: 1280px;
      margin: 0 auto;
      padding: 4rem 2rem;
    }

    .event-details-grid {
      display: flex;
      gap: 3rem;
    }

    .event-left-section {
      flex: 0 0 68%;
    }

    .event-right-section {
      flex: 0 0 28%;
    }

    /* Featured Image */
    .event-featured-image {
      width: 100%;
      height: 400px;
      object-fit: cover;
      border-radius: 16px;
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

    /* About Section */
    .event-about-section {
      margin-top: 2.5rem;
    }

    .event-section-title {
      font-size: 1.75rem;
      font-weight: 700;
      color: #1a365d;
      margin-bottom: 1.5rem;
      position: relative;
      padding-bottom: 0.75rem;
    }

    .event-section-title::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 60px;
      height: 4px;
      background: linear-gradient(90deg, #e67e22, #f39c12);
      border-radius: 2px;
    }

    .event-description {
      color: #4a5568;
      font-size: 1.05rem;
      margin-bottom: 1.25rem;
    }

    /* Tags Section */
    .event-tags-section {
      margin-top: 2.5rem;
    }

    .event-tags-container {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
    }

    .event-tag {
      background: linear-gradient(135deg, #ebf8ff, #bee3f8);
      color: #2b6cb0;
      padding: 0.5rem 1.25rem;
      border-radius: 25px;
      font-size: 0.9rem;
      font-weight: 500;
      transition: all 0.3s ease;
      cursor: pointer;
      border: none;
    }

    .event-tag:hover {
      background: linear-gradient(135deg, #2b6cb0, #3182ce);
      color: #ffffff;
      transform: translateY(-2px);
      box-shadow: 0 4px 15px rgba(43, 108, 176, 0.3);
    }

    /* Details Card */
    .event-details-card {
      background: #ffffff;
      border-radius: 20px;
      box-shadow: 0 10px 50px rgba(0, 0, 0, 0.1);
      padding: 2rem;
      position: sticky;
      top: 2rem;
    }

    .event-card-title {
      font-size: 1.5rem;
      font-weight: 700;
      color: #1a365d;
      margin-bottom: 1.5rem;
      text-align: center;
    }

    .event-divider {
      height: 1px;
      background: linear-gradient(90deg, transparent, #e2e8f0, transparent);
      margin: 1.5rem 0;
    }

    .event-detail-row {
      display: flex;
      align-items: flex-start;
      gap: 1rem;
      margin-bottom: 1.25rem;
    }

    .event-detail-icon {
      width: 44px;
      height: 44px;
      background: linear-gradient(135deg, #ebf8ff, #bee3f8);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .event-detail-icon svg {
      width: 22px;
      height: 22px;
      color: #2b6cb0;
    }

    .event-detail-content {
      flex: 1;
    }

    .event-detail-label {
      font-size: 0.8rem;
      color: #718096;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 0.25rem;
    }

    .event-detail-value {
      font-size: 1rem;
      color: #2d3748;
      font-weight: 500;
    }

    .event-detail-link {
      color: #e67e22;
      text-decoration: none;
      font-weight: 600;
      transition: color 0.3s ease;
    }

    .event-detail-link:hover {
      color: #d35400;
      text-decoration: underline;
    }

    .event-status-badge {
      display: inline-block;
      background: linear-gradient(135deg, #48bb78, #38a169);
      color: #ffffff;
      padding: 0.35rem 1rem;
      border-radius: 20px;
      font-size: 0.85rem;
      font-weight: 600;
    }

    .event-status-badge.online {
      background: linear-gradient(135deg, #4299e1, #3182ce);
    }

    .event-categories-list {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
    }

    .event-category-item {
      background: #f7fafc;
      color: #4a5568;
      padding: 0.3rem 0.75rem;
      border-radius: 6px;
      font-size: 0.85rem;
      border: 1px solid #e2e8f0;
    }

    /* Share Section */
    .event-share-section {
      text-align: center;
    }

    .event-share-title {
      font-size: 1rem;
      color: #4a5568;
      margin-bottom: 1rem;
    }

    .event-social-icons {
      display: flex;
      justify-content: center;
      gap: 1rem;
    }

    .event-social-icon {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
      cursor: pointer;
      text-decoration: none;
    }

    .event-social-icon svg {
      width: 20px;
      height: 20px;
      color: #ffffff;
    }

    .event-social-icon.facebook { background: #1877f2; }
    .event-social-icon.twitter { background: #1da1f2; }
    .event-social-icon.linkedin { background: #0077b5; }
    .event-social-icon.email { background: #ea4335; }

    .event-social-icon:hover {
      transform: translateY(-3px);
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    }

    /* Map Section */
    .event-map-section {
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 2rem 4rem;
    }

    .event-map-container {
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    }

    .event-map-container iframe {
      width: 100%;
      height: 400px;
      border: none;
    }

    /* Upcoming Events Section */
    .event-upcoming-section {
      background: linear-gradient(180deg, #f7fafc, #edf2f7);
      padding: 5rem 2rem;
    }

    .event-upcoming-container {
      max-width: 1280px;
      margin: 0 auto;
    }

    .event-upcoming-title {
      font-size: 2.25rem;
      font-weight: 700;
      color: #1a365d;
      text-align: center;
      margin-bottom: 3rem;
    }

    .event-upcoming-grid {
      display: flex;
      gap: 2rem;
    }

    .event-upcoming-card {
      flex: 1;
      background: #ffffff;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
      transition: all 0.4s ease;
    }

    .event-upcoming-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
    }

    .event-upcoming-image-wrapper {
      position: relative;
      height: 220px;
      overflow: hidden;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

    .event-upcoming-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.4s ease;
    }

    .event-upcoming-card:hover .event-upcoming-image {
      transform: scale(1.08);
    }

    .event-date-badge {
      position: absolute;
      top: 1rem;
      left: 1rem;
      background: linear-gradient(135deg, #e67e22, #f39c12);
      color: #ffffff;
      padding: 0.75rem 1rem;
      border-radius: 12px;
      text-align: center;
      box-shadow: 0 4px 15px rgba(230, 126, 34, 0.4);
    }

    .event-date-month {
      font-size: 0.75rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    .event-date-day {
      font-size: 1.5rem;
      font-weight: 700;
      line-height: 1;
    }

    .event-upcoming-content {
      padding: 1.5rem;
    }

    .event-upcoming-card-title {
      font-size: 1.25rem;
      font-weight: 700;
      color: #1a365d;
      margin-bottom: 0.75rem;
    }

    .event-upcoming-description {
      color: #718096;
      font-size: 0.95rem;
      line-height: 1.6;
    }

    /* Responsive Design */
    @media (max-width: 1024px) {
      .event-details-grid {
        flex-direction: column;
      }

      .event-left-section,
      .event-right-section {
        flex: 1 1 100%;
      }

      .event-details-card {
        position: static;
      }
    }

    @media (max-width: 768px) {
      .event-hero {
        height: 350px;
      }

      .event-hero-title {
        font-size: 2.25rem;
      }

      .event-upcoming-grid {
        flex-direction: column;
      }

      .event-featured-image {
        height: 280px;
      }

      .event-content-wrapper {
        padding: 2rem 1rem;
      }

      .event-map-section {
        padding: 0 1rem 3rem;
      }

      .event-upcoming-section {
        padding: 3rem 1rem;
      }
    }

    @media (max-width: 480px) {
      .event-hero-title {
        font-size: 1.75rem;
      }

      .event-section-title {
        font-size: 1.5rem;
      }

      .event-upcoming-title {
        font-size: 1.75rem;
      }
    }