html {
  scroll-behavior: smooth;
}

section#event-page {
    padding: 50px 0px;
    background: #f3eee8;
}

.top-bar{
  margin-bottom:40px;
}

.filters{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}

.filter-item{
  position:relative;
}

.filter-btn img{
  width:14px;
}

.filter-popup {
    position: absolute;
    top: 35px;
    left: 0;
    background: #fff;
    border-radius: 10px;
    padding: 15px;
    display: none;
    z-index: 999;
    min-width: 500px;
}
.air-datepicker {
    width: 100% !important;
}
.air-datepicker-body--day-name {
    color: #04433b !important;
}

.filter-popup.active{
  display:block;
}
.air-datepicker-button {
    color: #fff !important;
    background: #04433b !important;
    border-radius: 100px !important;
}
.air-datepicker-cell.-current- {
    color: #ed6800 !important;
}
.air-datepicker-cell.-in-range- {
    background: #04433b12 !important;
}
.air-datepicker-cell.-range-to- {
    border: 1px solid #04433b !important;
    background-color: #04433b12 !important;
}
.air-datepicker-cell.-selected- {
    background: #04433b !important;
}

.filter-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

.filter-grid label{
  font-size:14px;
  display:flex;
  align-items:center;
  gap:10px;
  text-wrap-mode: nowrap;
}

.apply-btn {
    width: 100%;
    border: none;
    background: #04433b;
    color: #fff;
    padding: 8px;
    border-radius: 100px;
    cursor: pointer;
    font-size: 15px;
    margin-top: 20px;
}

#datePicker{
  width:100%;
  border:1px solid #ddd;
  border-radius:12px;
  padding:14px;
  margin-bottom:16px;
  font-size:14px;
}
/* Top Bar */
.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin: 10px 0 50px 0;
}

.filters {
  display: flex;
  gap: 10px;
}

.main-heading h1 {
    font-size: 35px !important;
    font-weight: bold !important;
}

.filters select {
    padding: 5px 0px 5px 5px;
    border: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: transparent;
    background-image: url("data:image/svg+xml;utf8,<svg fill='%23000000' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 5px center;
    background-size: 16px;
}

/* Cards Grid */
.events-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
}

/* Card */
.event-card {
  padding-bottom: 15px;
  transition: 0.3s;
}

.event-card-img > img {
  width: 100%;
  object-fit: cover;
  border-radius: 10px;
}

.event-card h3 {
    font-size: 25px;
    color: #04433B;
    margin: 0;
    padding-top: 25px;
    font-weight: 600 !important;
}

.category {
  color: #04433B;
  font-size: 18px;
  margin: 0;
  padding-top: 15px;
    font-weight: 600 !important;

}
.event-card-top-category {
    background: #04433B;
    display: inline;
    padding: 10px;
    font-size: 14px;
    color: #fff;
    position: absolute;
    top: 10px;
    left: 10px;
}
.event-card-top-fav {
    position: absolute;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    top: 15px;
    right: 15px;
}

.event-card-top-fav img{
  position:absolute;
  width:18px;
  transition:0.3s;
}

/* DEFAULT ICON */

.event-card-top-fav .default-icon{
  opacity:1;
  visibility:visible;
}

/* HOVER ICON */

.event-card-top-fav .hover-icon{
  opacity:0;
  visibility:hidden;
}

/* HOVER EFFECT */

.event-card-top-fav:hover .default-icon{
  opacity:0;
  visibility:hidden;
}

.event-card-top-fav:hover .hover-icon{
  opacity:1;
  visibility:visible;
}

/* TOOLTIP */

.event-card-top-fav span {
    position: absolute;
    right: 55px;
    top: 50%;
    transform: translateY(-50%);
    background: #04433b;
    color: #fff;
    font-size: 12px;
    padding: 8px 12px;
    border-radius: 8px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
}

/* TOOLTIP SHOW */

.event-card-top-fav:hover span{
  opacity:1;
  visibility:visible;
}

.date {
  font-size: 18px;
  color: #000000;
  font-weight: lighter;
  margin: 0;
  padding-top: 15px;
}

/* Pagination */
#pagination {
  display: flex;
  gap: 8px;
}

.page-btn {
    padding:5px 10px;
    cursor: pointer;
    border-radius: 100%;
    color: #04433B !important;
}

.page-btn.active {
  background: #333;
  color: #fff !important;
}
.event-card a {
    text-decoration: none;
}
.event-card-img {
    position: relative;
}

.event-single {
    padding: 60px 0px;
    background-color: #f2eee8;
}

.event-single h1 {
    font-size: 40px;
    text-align: center;
    padding: 10px 0;
}
.event-single h2 {
    font-size: 35px;
    padding: 10px 0;
}
.event-single hr {
    margin-top: 30px;
    margin-bottom: 20px;
}
.event-single-content p {
    font-size: 18px;
    padding: 5px 0;
}
.event-single-top-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
    gap: 20px;
}
.main-image {
    width: 100%;
    height: 450px;
    object-fit: cover;
    object-position: top center;
    border-radius: 10px;
    margin: 10px 0 30px 0;
}
.event-single-top-list li {
    list-style: none;
}

.event-single-inner h3 {
    font-size: 28px;
    padding: 10px 0px;
    color: #05433c;
}
.fw-semibold {
    font-weight: 500 !important;
}
.event-single-top-list li a {
    display: flex;
    gap: 8px;
    align-items: center;
}

.event-share-main h4 {
    font-size: 24px;
    padding: 0;
}
.event-share-main {
    display: flex;
    gap: 11px;
    align-items: center;
}

  .top-bar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  position:relative;
}

.filters{
  display:flex;
  gap:20px;
}

.filter-item{
  position:relative;
}

.filter-btn{
  border:none;
  font-size:18px;
  font-weight:600;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:5px;
  background-color: transparent;
}
.filter-btn span {
    font-size: 18px;
    color: #04433b;
}
.filter-btn img {
    width: 13px;
    position: relative;
    top: 2px;
}

.filter-grid input {
    width: 16px;
    height: 16px;
}

.flatpickr-calendar{
  box-shadow:none !important;
}
.event-single-top-list li a {
    font-size: 18px;
}

.date-popup {
    background: #fff;
    border-radius: 10px;
    padding: 15px;
    border: 1px solid #04433b;
}
.flatpickr-months {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* input field */

.flatpickr-input {
    width: 100%;
    height: 45px;
    border: 1px solid #04433b;
    border-radius: 8px;
    padding: 0 10px;
    font-size: 16px;
    font-weight: 100;
    margin-bottom: 10px;
    outline: none;
}

.flatpickr-months {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.flatpickr-calendar{
  width:100% !important;
  max-width:100% !important;
  border:none !important;
  box-shadow:none !important;
  font-family:Arial, sans-serif;
}


/* top month section */

.flatpickr-months{
  margin-bottom:20px;
}

.flatpickr-current-month {
    font-size: 18px !important;
    font-weight: 100;
    display: flex;
    align-items: center;
}
input.numInput.cur-year {
    border: none;
}

.flatpickr-prev-month,
.flatpickr-next-month{
  padding:12px !important;
}

.flatpickr-weekday{
  font-size:18px !important;
  color:#777 !important;
  font-weight:600;
}


/* dates */

.flatpickr-day{
  width:90px !important;
  height:70px !important;
  line-height:70px !important;
  border-radius:10px !important;
  font-size:20px;
  font-weight:500;
  margin:4px;
  transition:0.3s;
}


/* hover effect */

.flatpickr-weekday{
  font-size:0 !important;
  text-align:center;
  color:#67c7cf !important;
  font-weight:600;
  position:relative;
}

/* custom short names */

.flatpickr-weekday:nth-child(1)::after{
  content:"SU";
}

.flatpickr-weekday:nth-child(2)::after{
  content:"MO";
}

.flatpickr-weekday:nth-child(3)::after{
  content:"TU";
}

.flatpickr-weekday:nth-child(4)::after{
  content:"WE";
}

.flatpickr-weekday:nth-child(5)::after{
  content:"TH";
}

.flatpickr-weekday:nth-child(6)::after{
  content:"FR";
}

.flatpickr-weekday:nth-child(7)::after{
  content:"SA";
}

.flatpickr-weekday::after{
  font-size:18px;
  display:block;
}


/* selected range */

.flatpickr-day.startRange,
.flatpickr-day.endRange{
  background:#57c7d4 !important;
  color:#fff !important;
  border-color:#57c7d4 !important;
}


/* between selected range */

.flatpickr-day.inRange{
  background:#dff5f8 !important;
  color:#222 !important;
  border-color:#dff5f8 !important;
}


/* today */

.flatpickr-day.today{
  border:2px solid #57c7d4 !important;
}


/* apply button */
.flatpickr-prev-month svg,
.flatpickr-next-month svg{
  width:16px !important;
  height:16px !important;
}

/* button padding small */

.flatpickr-prev-month,
.flatpickr-next-month{
  padding:6px !important;
}

/* Responsive */
@media (max-width: 992px) {
  .events-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media only screen and (max-width: 768px) {
.filter-popup {
    min-width: 270px;
}
}

@media only screen and (max-width: 600px) {
  .events-cards {
    grid-template-columns: 1fr;
  }
  .event-single-inner h3 {
    font-size: 25px;
}
.event-single-inner h2 {
  font-size: 30px;
}
.main-image {
    height: 215px;
}

  .top-bar {
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
  }
  .filters {
    flex-direction: column;
    width: 100%;
}
.event-card-top-category {
    padding: 7px;
    font-size: 11px;
}
.filter-grid {
    grid-template-columns: repeat(1,300px);
}

}