@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap");

/* * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Titillium Web", "Noto Sans JP", sans-serif;
} */
.w260 {
  width: clamp(180px, 50vw, 260px);
}

.w-160 {
  width: 160px;
}

:root {
  --lightWhite: #ffffff;
  --darkWhite: #f2f2f2;
  --blue: #1370ae;
  --black: #000000;
  --green: #7dc275;
  --red: #f36856;
  --gray: #666666;
  --amber: #f5b04d;
  --border: #cccccc;
  --bggray: #eeeeee;
  --textGray: #1a1a1a;
  --tag-list: #010202;
  --footer-3rd-menu: #15100d;
  --fontPrimary: "Titillium Web", sans-serif;
  --fontSecondary: "Archivo Narrow", sans-serif;
  --padding: 10px;
  --margin: 10px;
}

/* Tabs container */
.tabs-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media (max-width: 767.98px) {
  .tabs-container {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
}

/* Navigation tabs customization */
.nav-tabs {
  border: none;
  /* margin-bottom: 0; */
  gap: 10px;
}

.nav-tabs .nav-link {
  color: #010202;
  border: none;
  padding: 8px 25px;
  font-weight: 600;
  font-size: 20px;
  position: relative;
  background: #EEE;
  transition: color 0.3s ease;
  border-radius: 0px;
  font-family: var(--fontPrimary);
}
@media (max-width: 768px) {
  .nav-tabs .nav-link {
  padding:10px;
}
}

/*.nav-tabs .nav-link:hover {*/
/*  color: #1470ae;*/
/*}*/

.nav-tabs .nav-link.active {
  color: #010202;
  background: #FFF;
  border: none;
}

.nav-tabs .nav-link.active::after {
  content: "";
  top: 2px;
  position: absolute;
  bottom: 0px;
  left: 0;
  width: 100%;
  height: 3px;
  border-top: #1370AE 4px solid;
  background-color: #FFF;
  transition: width 0.3s ease;
}
.toggle-button-group {
  display: inline-flex;
  border: 1px solid #1470ae;
  border-radius: 6px;
  overflow: hidden;
  font-family: sans-serif;
}

.toggle-button {
  padding: 10px 25px;
  border: none;
  cursor: pointer;
  background: white;
  color: #535353;
  font-size: 20px;
  font-weight: 700;
  transition: background 0.3s, color 0.3s;
  font-family: "Titillium Web", sans-serif;
}
@media (max-width: 768px) {
  .toggle-button {
    padding: 8px 15px;
    font-size: 16px;

}
}

.toggle-button.active {
  background: #1470ae;
  color: #ffffff;
}

.toggle-button:not(:last-child) {
  border-right: 1px solid #0071bc;
}



/* Filter section customization */
.form-control,
.form-select {
  border: 1px solid #dee2e6;
  padding: 0.5rem 1rem;
}

.form-control:focus,
.form-select:focus {
  border-color: #0d6efd;
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

/* Input, Select, and Button basic styles */
.form-control,
.form-select {
  border: 1px solid #ccc;
  border-radius: 6px;
  box-shadow: none;
  font-size: 16px;
}
/*.custom-select-arrow {*/
/*  -webkit-appearance: none;*/
/*  -moz-appearance: none;*/
/*  appearance: none;*/
/*  background-image: none !important;*/
/*  padding-right: 2.5rem;*/
/*}*/

/* Add custom arrow using ::after */
.custom-select-wrapper::after {
  content: "";
  position: absolute;
  top: 60%;
  right: 1rem;
  transform: translateY(-50%);
  width: 18px;
  height: 14px;
  background-image: url("../img/icon-triangle-arrow-down-black.svg");
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}
/* Button appearance */
.btn-primary {
  background-color: #0b74c8;
  border-color: #0b74c8;
  font-weight: 600;
}

/* Button hover effect */
.btn-primary:hover {
  background-color: #085a9d;
  border-color: #085a9d;
}

.custom-select-wrapper {
  position: relative;
}

/* Showing entries text */
.showing-entries {
  color: #6c757d;
  font-size: 0.9rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .row {
    margin-right: -10px;
    margin-left: -10px;
  }

  .col-md-4 {
    padding-right: 10px;
    padding-left: 10px;
  }
}

/* Wrapper card styling */
.filter_section {
  background-color: #f5f5f5;
  border-radius: 6px;
  border: 1px solid #cccccc;
}
@media (max-width: 998.98px) {
  .filter-btn-warp {
    flex-wrap: wrap;
  }
}


.events_grid_section {
  margin-bottom: 60px;
}
.events_grid_warp {
  margin-bottom: 60px;

}
.no_records{
      text-align: center;
  font-size: 16px;
}
.event-bgCard {
  position: absolute;
  bottom: 0px;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 12px;
  align-items: center;
}
.eventCardDate {
  color: #ffffff;
  font-weight: 600;
  font-size: 14px;
}

.badge {
  padding: 0.5em 1em;
  border-radius: 30px;
}

.event-org {
  background-color: #1470ae !important;
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
}

/*.badge.bg-success {*/
/*  background-color: #B14B00 !important;*/
/*}*/
/*.badge.bg-partnership {*/
/*    background-color: #7A47B6 !important;*/
/*}*/

.badge.bg-nathnac {
    background-color: #1470AE !important; /* NaTHNaC */
    color: #fff !important;
}

.badge.bg-external {
    background-color: #B14B00 !important; /* External */
    color: #fff !important;
}

.badge.bg-partnership {
    background-color: #7A47B6 !important; /* Partnership */
    color: #fff !important;
}

.badge.bg-default {
    background-color: #6c757d !important; /* fallback grey */
    color: #fff !important;
}


/* Card title customization */
.card-img-top {
  height: 180px;
  object-fit: cover;
  object-position: top;
}
.card-title a {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #1370AE;
  text-underline-offset: .1578em;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  transition: all 0.3s ease;
}
.card-title a:hover {
    cursor: pointer;
    color: #003078;
    text-decoration: underline;
    text-decoration-thickness: 3px;
    text-underline-offset: .1578em;
}
/* Card text customization */
.card-text {
  color: #1a1a1a;
  font-size: 16px;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Event location styling */
.event-location {
  color: #1470ae;
  font-size: 14px;
  /*display: flex;*/
  align-items: center;
  gap: 8px;
  /*white-space: nowrap;*/
  /*overflow: hidden;*/
  /*text-overflow: ellipsis;*/
}

/* Fully booked badge */
.fully-booked {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #a02000;
  color: #ffffff;
  font-weight: 600;
  padding: 8px 20px;
  border: 2px solid #ffffff;
  outline: 3px solid #a02000;
  display: inline-block;
  font-size: 16px;
}

.completed_status {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #087443;
  color: #ffffff;
  font-weight: 600;
  padding: 8px 20px;
  border: 2px solid #ffffff;
  outline: 3px solid #087443;
  display: inline-block;
  font-size: 16px;
}
.pagination-wrap {
  position: relative;
  border-top: 1px solid #c8c8c9;
  border-bottom: 1px solid #c8c8c9;
  border-left: none;
  border-right: none;
}

.showing-entries {
  font-size: 14px;
  color: #666;
}

.pagination-wrap .btn-link {
  font-size: 16px;
  font-weight: 600;
  color: #4a4a49;
  text-decoration: underline;
}

/*------------------------- Calendar Styles ------------------------------------------- */
.calendar-section {
  background-color: var(--lightWhite);
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 30px;
  width: 100%;
  padding: 0px 0px;
}

/* Hide pagination in calendar view */
.calendar-section:not([style*="display: none"]) ~ .pagination-wrap {
  display: none !important;
}

/* FullCalendar Customization  */
.fc {
  width: 100%;
  background: white;
  border: 1px solid #e9eaeb;
  /* padding: 10px; */
  border-radius: 12px;
}

.fc .fc-toolbar.fc-header-toolbar {
  margin-bottom: 0px;
  border-bottom: 1px solid #e9eaeb;
  padding: 25px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
}

.fc .fc-toolbar-chunk {
  display: flex;
  align-items: center;
}

.fc .fc-toolbar-title {
  font-size: 20px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0;
}

.fc .fc-scrollgrid {
  border-collapse: collapse;
}
.fc .fc-button-primary {
  background: transparent;
  border: none;
  color: var(--blue);
  text-decoration: underline;
  font-weight: 600;
  padding: 0;
  margin: 0 10px;
}

.fc .fc-button-primary:hover {
  background: transparent;
  color: var(--blue);
  text-decoration: underline;
}

.fc .fc-button-primary:disabled {
  background: transparent;
  color: #6c757d;
}

.fc .fc-button-primary:not(:disabled):active,
.fc .fc-button-primary:not(:disabled).fc-button-active {
  background: transparent;
  color: var(--blue);
}

/* Remove button focus outline */
.fc .fc-button:focus {
  box-shadow: none !important;
  outline: none !important;
}

/* Adjust spacing between buttons */
.fc .fc-prev-button {
  margin-right: 10px;
}

.fc .fc-col-header-cell-cushion {
  color: #717680;
  font-size: 12px;
  padding: 10px;
  text-decoration: none;
}
.fc .fc-daygrid-day.fc-day-today {
  background-color: rgba(13, 110, 253, 0.1);
}

.fc .fc-daygrid-day-frame {
  min-height: 160px !important;
}
@media (max-width: 768px) {
  .fc .fc-daygrid-day-frame {
  min-height: 100px !important;
}
  
}
.fc .fc-daygrid-day-top {
  flex-direction: row;
}
.fc .fc-daygrid-day-number {
  font-size: 1em;
  font-weight: 500;
  text-decoration: none;
  color: var(--textGray);
}

.fc .fc-day-other .fc-daygrid-day-number {
  color: #999;
}

.fc-direction-ltr .fc-daygrid-event.fc-event-end {
  margin-right: 4px;
}

.fc-direction-ltr .fc-daygrid-event.fc-event-start {
  margin-left: 4px;
  border-radius: 6px;
}

.fc-event {
  border: none;
  padding: 4px 8px;
  margin: 2px 0;
  border-radius: 4px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.fc-event:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.fc-event-title {
  font-weight: 500;
  font-size: 13px;
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: #fff;
  text-decoration: none;
}
.fc-h-event .fc-event-title {
  display: -webkit-box;
}

.fc-event-title:hover {
  text-decoration: none;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .fc .fc-toolbar {
    flex-direction: column;
    gap: 10px;
  }

  .fc .fc-toolbar-title {
    font-size: 1.2em;
  }

  .fc .fc-button {
    padding: 0.2em 0.4em;
  }
}

/* Month View Container Styles */
.month-view-container {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* .month-view-label {
  font-size: 14px;
  color: #717680;
} */

.month-view-select {
  min-width: 140px;
  height: 36px;
  padding: 0.375rem 2rem 0.375rem 1rem;
  font-size: 14px;
  font-weight: 500;
  color: #1a1a1a;
  background-color: #fff;
  border: 1px solid #e9eaeb;
  border-radius: 6px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%231a1a1a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  cursor: pointer;
}

.month-view-select:focus {
  border-color: #1470ae;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(20, 112, 174, 0.25);
}

/* Hide the original calendar navigation buttons */
.fc .fc-prev-button,
.fc .fc-next-button {
  display: none !important;
}

/* Month View Button Styles */
.month-view-btn {
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 6px 12px;
    font-size: 14px;
    color: #6c757d;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 16px;
}

.month-view-btn svg {
    margin-left: 4px;
}

.month-view-btn:hover {
    background-color: #f8f9fa;
    border-color: #dee2e6;
    color: #6c757d;
}

/* Month Selector Styles */
.month-selector {
    margin-left: auto;
}

.month-select {
    appearance: none;
    background-color: #fff;
    border: 1px solid #E8E8E8;
    border-radius: 6px;
    padding: 8px 32px 8px 16px;
    font-size: 14px;
    color: #666;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23666666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    min-width: 160px;
}

.month-select:hover {
    background-color: #f8f9fa;
    border-color: #E0E0E0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.month-select:focus {
    outline: none;
    border-color: #E0E0E0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

/* Calendar Header Layout */
.fc .fc-toolbar.fc-header-toolbar {
    margin-bottom: 0px !important;
    border-bottom: 1px solid #e9eaeb;
    padding: 25px;
    display: flex;
    align-items: center;
    gap: 20px;
}

/* .fc .fc-toolbar-chunk {
    display: flex;
    align-items: center;
} */
 .fc-toolbar-chunk{
  display: none;
}

.fc .fc-toolbar-title {
    font-size: 20px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0;
}

/* Hide default navigation buttons */
.fc-prev-button,
.fc-next-button {
    display: none !important;
}

/* Remove old button styles */
.month-view-btn,
.month-view-btn svg,
.month-view-btn:hover {
    display: none;
}
/*-------------------------------  end ------------------------------*/

/* ---------------------- events details css --------------- */

.event-banner {
  height: 400px;
  overflow: hidden;
  border: #ececec solid 1px;
}

.event-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.event-meta {
  background-color: #ececec;
  margin: 0 0px 20px;
  padding: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.event-time,
.event-date {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #000000;
  font-size: 16px;
  font-weight: 500;
}

.add_calendar,
.share-btn {
  display: flex;
  align-items: center;
  background-color: transparent;
  gap: 5px;
  font-size: 14px;
  font-weight: 600;
  color: #1470ae;
  border: transparent;
  text-decoration: none;
}
.add_calendar:hover,
.share-btn:hover {
  text-decoration: underline;
  font-weight: 700; 
  color:#1470ae;
}

/*.event-meta .badge {*/
/*  font-size: 14px;*/
/*  background-color: #3e9233 !important;*/
/*  font-weight: 600;*/
/*  padding: 8px 16px;*/
/*  border-radius: 20px;*/
/*}*/

.event-title-section h1 {
  font-weight: 700;
  font-size: clamp(24px, 4vw, 36px);
  color: #1470ae;
  margin-bottom: 30px;
}

/* Event Description Styles */
.event-description h2 {
  font-size: 24px;
  font-weight: 600;
  color: #000000;
}

.event-description p {
  color: #000000;
  margin-bottom: 30px;
  font-size: 18px;
  font-family: var(--fontPrimary);
}

/*.event-description ul {*/
/*  list-style: square;*/
/*  margin-bottom: 45px;*/
/*}*/

/*.event-description li {*/
/*  margin-bottom: 1rem;*/
/*  font-size: 16px;*/
/*  color: #000000;*/
/*}*/

.register-note {
  font-weight: 500;
  font-size: 16px;
  color: #000000;
}

.sidebar-section {
  padding-left: 1.5rem;
  margin-bottom: 20px;
}

@media (max-width: 767.98px) {
  .sidebar-section {
  padding-left: 0px;
}
}

.sidebar-section h3 {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 5px;
  color: #000000;
}

.location-map iframe {
  display: block;
  width: 100%;
}

/*.location-details {*/
/*  display: flex;*/
/*  background-color: #ececec;*/
/*  align-items: center;*/
/*  gap: 10px;*/
/*  padding: 15px;*/
/*  margin-bottom: 20px;*/
/*}*/

/*.location-details p {*/
/*  margin: 0;*/
/*  color: var(--text-gray);*/
/*}*/

.host-list {
  list-style: none;
  padding: 0;
  margin-bottom: 20px;
}

.host-list li {
  color: #010202;
}

.ticket-status {
  padding: 10px 35px;
  font-size: 20px;
  margin-bottom: 15px;
  background-color: #087443;
  color: white;
  display: inline-block;
  border: 2px solid #ffffff;
  outline: 2px solid #087443;
  font-weight: 600;
}

.tickets_now_btn {
  background-color: #1370ae;
  font-size: 24px;
  color: #ffffff;
  border-radius: 0px;
  font-weight: 600;
  padding: 6px 50px;
}

.tickets_now_btn:hover {
  background-color: #085a9d;
  color: #ffffff;
}
.btn-primary {
  background-color: #0b74c8;
  font-weight: 600;
}
/*@media (min-width: 330px) and (max-width: 991.98px) {*/
/*  .event-meta {*/
/*    flex-direction: row;*/
/*    align-items: center;*/
/*  }*/
/*}*/

@media (min-width: 768px) and (max-width: 991.98px) {
  .event-meta {
    flex-direction: row !important;
    gap: 1rem;
    align-items: center;
  }
}

@media (min-width: 991.98px) and (max-width: 1200px) {
  span.badge.bg-success.event-org {
    margin-right: 15px;
  }
}
/* Default mobile: column */
@media (min-width: 330px) and (max-width: 767.98px) {
  .event-meta {
    flex-direction: column !important;
    gap: 1rem;
    align-items: flex-start;
  }

  /* If no date → row instead */
  .event-meta.no-date {
    flex-direction: row !important;
    align-items: center;
  }
}



/* Responsive Styles */
@media (max-width: 991.98px) {
  .event-description {
    padding-right: 0;
    margin-bottom: 2rem;
  }

  .event-banner {
    height: 300px;
  }

  /*.event-meta {*/
  /*  flex-direction: column;*/
  /*  gap: 1rem;*/
  /*  align-items: flex-start;*/
  /*}*/
}

@media (max-width: 767.98px) {
  .event-banner {
    height: 250px;
  }

  .event-description h2 {
    font-size: 20px;
  }
}
.dateTextsm{
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #000000 !important;
}
.org-text-sm{
  font-size: 14px !important;
  color: #FFFFFF !important;
  background-color: #1470AE;
  border-radius: 30px;
  padding: 1px 10px;
}
.location-details {
    border: #ddd solid 1px;
}
/*.sidebar-section p {*/
/*    text-transform: capitalize;*/
/*}*/