/* ============================================================
   TOPWERK EVENTS ¨C topwerkevents.css
   ============================================================ */

    /* ©¤©¤ Month heading with teal underline ©¤©¤ */
    .month-wrap {
        margin-bottom: 4rem;
    }

    .month-heading {
      font-weight: 700; color: #00494A;
      font-size: 1.75rem; text-transform: uppercase;
      border:none;
      border-bottom: 3px solid #007474;
      padding-bottom: 0.4rem; display: inline-block;
      margin-bottom: 1.5rem;
      width:100%;
        background: transparent;
        box-shadow: none;
        position: relative;
        display: flex;
        align-items: center;
        width: 100%;
    }
    .month-heading::after{
        flex-shrink: 0;
        width: 1.25rem;
        height: 1.25rem;
        margin-left: auto;
        content: "";
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23212529' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-size: 1.25rem;
        transition: transform 0.2s ease-in-out;
    }
    .month-heading.show::after{
        transform: rotate(-180deg);;
    }

    /* ©¤©¤ Search bar ©¤©¤ */
    .search-label {
      font-size: 0.875rem; font-weight: 700;
      letter-spacing: 0.05em; text-transform: uppercase;
      color: #00494A; margin-bottom: 0.75rem; display: block;
    }
    .search-input {
      flex: 1; padding: 1rem 1.5rem;
      border: 2px solid #00494A;
      color: #00494A; font-size: 0.875rem;
      text-transform: uppercase; background: #fff;
      font-family: 'Roboto', sans-serif;
    }
    .search-input:focus { outline: none; border-color: #007474; }
    .search-btn {
      padding: 1rem 2rem;
      background: #00494A; color: #fff;
      border: none; font-size: 0.875rem;
      letter-spacing: 0.1em; text-transform: uppercase;
      font-family: 'Roboto', sans-serif; cursor: pointer;
      transition: opacity 0.2s; white-space: nowrap;
    }
    .search-btn:hover { opacity: 0.9; }

    /* ©¤©¤ Event card ©¤©¤ */
    .event-card { overflow: hidden; }

    .event-card .ec-img-wrap {
      position: relative; 
      /* height: 256px;  */
      overflow: hidden;
    }
    .event-card .ec-img-wrap img {
      width: 100%; height: 100%; object-fit: cover;
    }

    /* Clipped teal badge top-left */
    .event-card .ec-badge {
      position: absolute; top: 0; left: 0;
      padding: 1.25rem 2rem;
      background: linear-gradient(135deg, rgba(0,73,74,0.95) 0%, rgba(0,116,116,0.85) 100%);
      /* clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%); */
    }
    .event-card .ec-badge .badge-title {
      font-size: 1.5rem; font-weight: 700;
      color: #fff; text-transform: uppercase; line-height: 1.1;
    }
    .event-card .ec-badge .badge-date {
      font-size: 0.75rem; color: rgba(255,255,255,0.9); margin-top: 2px;
    }

    .event-card .ec-info {
      padding: 1.25rem 1.5rem;
      background: linear-gradient(135deg, rgba(0,73,74,0.7) 0%, rgba(0,116,116,0.7) 100%);
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
    }
    .event-card .ec-meta {
      display: flex; align-items: center; gap: 0.6rem;
      font-size: 0.875rem; color: #fff; margin-bottom: 0.5rem;
    }
    .event-card .ec-meta:last-child { margin-bottom: 0; }
    .event-card .ec-meta i { flex-shrink: 0; color: #fff; }
    .event-card .btn-brand-mehr {
        color: #ffff;
        border: 2px solid #ffff;
        padding: 8px 49px;
    }

    /* ©¤©¤ Past events slider ©¤©¤ */
    .slider-wrap { position: relative; }
    .slider-arrow {
      position: absolute; top: 50%; transform: translateY(-50%);
      z-index: 10; width: 48px; height: 48px;
      border-radius: 50%; border: none; cursor: pointer;
      background: #00494A; color: #fff;
      display: flex; align-items: center; justify-content: center;
      transition: opacity 0.2s;
    }
    .slider-arrow:hover { opacity: 0.8; }
    .slider-arrow.prev { left: 0; }
    .slider-arrow.next { right: 0; }

    .slider-viewport {
      overflow: hidden;
      padding: 3rem 4rem;
    }
    .slider-track {
      display: flex; gap: 2rem;
      transition: transform 0.5s ease;
    }
    .slider-item {
      flex-shrink: 0;
      width: calc(95% - 1rem);
      background: #e5e5e5;
      padding: 1.5rem;
    }
    .slider-item img { width: 100%; height: 256px; object-fit: cover; display: block; }
    .slider-item h3 {
      font-size: 1.5rem; font-weight: 700;
      color: #00494A; text-transform: uppercase;
      margin-bottom: 0.75rem;
    }
    .slider-item .si-meta {
      display: flex; align-items: center; gap: 0.5rem;
      font-size: 0.875rem; color: #545454; margin-bottom: 1.25rem;
    }
    .slider-item .si-meta i { color: #00494A; }
    .slider-item p { font-size: 0.9rem; color: #545454; line-height: 1.6; margin-bottom: 1.5rem; flex-grow: 1; }
    .btn-teal-solid {
      display: inline-block; padding: 0.75rem 2rem;
      background: #007474; color: #fff;
      border: none; font-size: 0.875rem; font-weight: 500;
      letter-spacing: 0.1em; text-transform: uppercase;
      cursor: pointer; transition: opacity 0.2s;
    }
    .btn-teal-solid:hover { opacity: 0.9; color: #fff; text-decoration: none; }

    /* ©¤©¤ CTA ©¤©¤ */
    .cta-section {
      position: relative;
      background: linear-gradient(135deg, #e8e4df 0%, #d5cfc9 50%, #c9c3bb 100%);
    }
    .btn-teal-cta {
      display: inline-block; padding: 0.75rem 2rem;
      background: #007474; color: #fff;
      border: none; font-size: 0.875rem;
      letter-spacing: 0.1em; text-transform: uppercase;
      cursor: pointer; transition: opacity 0.2s; text-decoration: none;
    }
    .btn-teal-cta:hover { opacity: 0.9; color: #fff; }
    .btn-outline-teal-cta {
      display: inline-block; padding: 0.75rem 2rem;
      border: 2px solid #00494A; color: #00494A;
      background: transparent; font-size: 0.875rem;
      letter-spacing: 0.1em; text-transform: uppercase;
      cursor: pointer; transition: background 0.2s, color 0.2s; text-decoration: none;
    }
    .btn-outline-teal-cta:hover { background: #00494A; color: #fff; }

      .slider-dot {
    width: 10px; height: 10px; border-radius: 50%;
    border: 2px solid #00494A;
    background: transparent; cursor: pointer; padding: 0;
    transition: background 0.2s;
  }
  .slider-dot.active { background: #00494A; }

  .event-detail .grey-bg {
    background: #efefef;
}

.event-detail .event-title {
    font-size: clamp(40px, 5vw, 64px);
    line-height: .9;
    font-weight: 800;
    color: #00494A;
    text-transform: uppercase;
    margin: 0;
}

.event-image {
    overflow: hidden;
}

.event-image img {
    display: block;
    /* width: 100%; */
    height: auto;
}

.detail-title {
    color: #00494A;
    font-size: 2rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.detail-block h6 {
    font-size: .9rem;
    font-weight: 700;
    color: #555;
    margin-bottom: .25rem;
}

.detail-block p,
.detail-block a {
    font-size: .95rem;
    color: #666;
    line-height: 1.6;
    text-decoration: none;
    margin: 0;
}

.btn-calendar {
    border: 2px solid #8f8f8f;
    background: transparent;
    color: #666;
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .08em;
    padding: 14px 20px;
    border-radius: 0;
    transition: all .3s ease;
}

.btn-calendar:hover {
    background: #00494A;
    border-color: #00494A;
    color: #fff;
}

.btn-events {
    background: #00494A;
    color: #fff;
    padding: 16px 32px;
    border-radius: 0;
    text-decoration: none;
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .08em;
    transition: all .3s ease;
}

.btn-events:hover {
    background: #003d3d;
    color: #fff;
}

@media (max-width: 767.98px) {
  .slider-item img {
    height: 180px;
  }
}
@media (max-width: 575.98px) {
  .slider-item h3 {
    font-size: 16px;
  }
  .btn-teal-solid {
    padding: 0.4rem 1rem;
    font-size: 14px;
  }
}
@media (max-width: 430px) {
  .slider-item img {
    height: 95px;
  }
  .btn-teal-solid {
    padding: 0.2rem 0.5rem;
    font-size: 12px;
  }
}<!--ºÄʱ1792435970.9075Ãë-->