.event-lts{width:70%;padding-right:20px}
.event-lts .detail-content h2{
  margin-bottom:20px;
  color: var(--Text-text-Blue, #004A9E);
}
.event-lts .detail-content{max-width:736px;}
.event-lts .detail-content p{color:var(--secondary_colors4);}
.event-rts{width:30%; text-align:right;}
.event-flex{
  margin:30px 0 0;
  display: flex;
  flex-direction: row;
  align-items: stretch;
}
.evs-lts{
  width:50%; 
  padding-right:16px;
  display: flex;
  flex-direction: column;
  flex: 1 0 0;
}
.evs-rts{
  width:50%; 
  padding-left:16px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex: 1 0 0;
}
.event-item {
  padding: 16px; 
  border-radius: 11px;
  border: 1px solid rgba(166, 171, 184, 0.30);
  background: var(--white_color); 
  box-shadow: 0px 66px 19px 0px rgba(143, 143, 143, 0.00), 0px 43px 17px 0px rgba(143, 143, 143, 0.01), 0px 24px 14px 0px rgba(143, 143, 143, 0.05), 0px 11px 11px 0px rgba(143, 143, 143, 0.09), 0px 3px 6px 0px rgba(143, 143, 143, 0.10);
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  min-height: 0; /* Allow flex items to shrink */
}
/* Featured card should stretch to fill column */
.evs-lts .event-item {
  flex: 1 0 auto;
}
.event-images {
  height:370px;
  margin-bottom:24px;
  position: relative; /* Container for calendar badge positioning */
  overflow: hidden; /* Ensure content stays within container */
}
.event-images img,.event-image img{
  width:100%; 
  height:100% !important; 
  object-fit:cover;
  display: block; /* Remove inline spacing */
}
/* Calendar Badge - Top Left of Image (Figma Design) */
.event-calendar-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 38px;
  height: 38px;
  padding: 3.378px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: -3.378px;
  border-radius: 2.533px;
  background: var(--Background-white, #FFF);
  z-index: 2;
  box-sizing: border-box;
}
.calendar-day {
  color: var(--Text-text-primary, #000);
  text-align: center;
  font-family: var(--Font-Family-Title, "Aftika Soft");
  font-size: 16.889px;
  font-style: normal;
  font-weight: 600;
  line-height: 110%; /* 18.578px */
  letter-spacing: 0.051px;
  display: block;
}
.calendar-month {
  color: var(--Secondary-Red, #D50037);
  text-align: center;
  font-family: var(--Font-Family-Body, Gotham);
  font-size: 10.133px;
  font-style: normal;
  font-weight: 700; /* Bold weight */
  line-height: 140%; /* 14.187px */
  letter-spacing: -0.032px;
  display: block;
  text-transform: uppercase; /* Ensure month is always uppercase */
}
.event-content h5{color:var(--base_color);}
.event-content p{color:var(--secondary_colors4)}
.evet-rts .event-content.detail-content,
.evs-lts .event-content.detail-content {
  margin-bottom: 0; /* Remove extra space below description */
}
/* Bullet Points Typography - Exact Figma Specs */
.event-content li,
.event-content.detail-content ul li {
  color: var(--Text-text-secondary, #6F7482);
  font-family: var(--Font-Family-Body, 'Gotham', sans-serif);
  font-size: var(--Font-Size-Body, 17px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%; /* 23.8px */
  letter-spacing: -0.054px;
  margin: 0;
  margin-left: 12px;
}
.event-content.detail-content ul li:first-child {
  margin-bottom: 15px;
}
.event-content.detail-content ul li:before { 
  border-radius: 50px; 
  height: 5px; 
  width: 5px; 
  top: 50%; 
  transform: translateY(-50%); 
  content: ""; 
  background-color: var(--Text-text-secondary, #6F7482); 
  left: 10px; 
}
.events-btns {
  width: 100%;
  margin-top: auto; /* Anchor buttons to bottom (big card) */
  padding-top: 40px; /* Maintain 40px spacing from description */
}
.events-btns ul{
  display: flex;
  flex-direction: row;
  gap: 12px;
  justify-content: space-between;
  align-items: stretch; /* Make buttons same height */
}
.events-btns ul li{
  flex: 1 0 0;
  min-width: 0;
  display: flex; /* Ensure flex container for height matching */
}
.events-btns ul li a{
  width: 100%;
  display: block;
  box-sizing: border-box;
}
.events-btns ul li.third-button,
.events-btns ul li.primary-button {
  display: flex;
  align-items: stretch;
}
/* Register Button - Ensure Full Width and Same Height */
.events-btns ul li.primary-button a,
.events-btns ul li.primary-button a.register-btn,
.events-tbtns ul li.primary-button a,
.events-tbtns ul li.primary-button a.register-btn {
  width: 100% !important;
  display: inline-flex !important;
  box-sizing: border-box;
  flex: 1 0 0;
  min-width: 0;
  align-items: center;
  justify-content: center;
  height: 100%; /* Match height of learn-more button */
  word-wrap: break-word;
  white-space: normal;
}
/* Learn More Button - Match Register Button Structure Exactly */
.events-btns ul li.third-button a.learn-more,
.events-tbtns ul li.third-button a.learn-more {
  background-color: #D7DCEA !important;
  border-radius: var(--button-button-radius, 10px);
  color: var(--Text-text-secondary, #6F7482) !important;
  text-align: center;
  leading-trim: both;
  text-edge: cap;
  font-family: var(--Font-Family-Title, "Aftika Soft");
  font-size: var(--Form-Button, 17px);
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  transition: 0.3s all ease-in;
  text-decoration: none !important;
  display: inline-flex !important;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: var(--button-primary-tb-padding, 18px) var(--button-primary-lr-padding, 23px);
  flex: 1 0 0;
  min-width: 0;
  box-sizing: border-box;
  word-wrap: break-word;
  white-space: normal;
  height: 100% !important; /* Fill parent container - match register button height */
  width: 100% !important; /* Ensure full width */
}

.learn-more,
a.learn-more,
.events-btns ul li.third-button a.learn-more:hover,
.events-tbtns ul li.third-button a.learn-more:hover {
  background-color: #d1d8eb !important; /* Light grey-blue background */
  color: #004A9E !important; /* Medium blue text color on hover */
  text-decoration: none !important;
}

  
.evet-lts{
  width:50%; 
  padding-right:8px;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.evet-lts .event-image{
  height: 283px; /* Fixed height for small event cards */
  flex: 0 0 283px; /* Don't grow, fixed size */
}



.evet-rts{width:50%; padding-left:8px;position:relative;}
.event-image{
  height: 283px; /* Fixed height for smaller event cards */
  flex: 0 0 283px; /* Don't grow, fixed size */
  position: relative; /* Container for calendar badge positioning */
  overflow: hidden; /* Ensure content stays within container */
}
.event-image img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  display: block; /* Remove inline spacing */
}
.eitem{
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}
.eitem:not(:last-child){
  margin-bottom:0;
}
.eitem .dis-flex {
  display: flex;
  gap: 16px;
  flex: 1;
  min-height: 0;
}
.evet-rts {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Push buttons to bottom (small cards) */
  flex: 1;
  min-height: 0;
}
.events-tbtns{
  position:relative; 
  bottom:0; 
  width:100%;
  margin-top: auto; /* Push buttons to bottom (small cards) */
  margin-bottom: 0;
}
.events-tbtns ul{
  display: flex;
  flex-direction: row;
  gap: 12px;
  justify-content: space-between;
}
.events-tbtns ul li{
  flex: 1 0 0;
  min-width: 0;
}
.events-tbtns ul li a{
  width: 100%;
  display: block;
  box-sizing: border-box;
}
/* Register Button in Smaller Cards - Ensure Full Width and Same Height */
.events-tbtns ul li.primary-button a,
.events-tbtns ul li.primary-button a.register-btn {
  width: 100% !important;
  display: inline-flex !important;
  box-sizing: border-box;
  flex: 1 0 0;
  min-width: 0;
  align-items: center;
  justify-content: center;
  height: 100%; /* Match height of learn-more button */
  word-wrap: break-word;
  white-space: normal;
}
.event-mobslide{display:none;}

/* Small event card images: 100% height at 1550px and below */
@media(max-width:1550px){
  .evet-lts .event-image{
    height: 100%; /* 100% height for small event cards */
    flex: 0 0 auto; /* Allow natural sizing */
  }
  .event-image{
    height: 100%; /* 100% height for smaller event cards */
    flex: 0 0 auto; /* Allow natural sizing */
  }
}

@media(max-width:1440px){
  .events-tbtns.twoebtns{
    position:relative; 
    bottom:0; 
    width:100%;
    margin-top: 24px;
  }
  .twoebtns ul{
    flex-direction: row;
    gap: 12px;
    justify-content: space-between;
  }
  .twoebtns ul li{
    flex: 1 0 0;
    margin:0;
  }
}

/* Ensure buttons align properly and have same height */
.events-tbtns ul {
  align-items: stretch; /* Make buttons same height */
}

.events-tbtns ul li {
  display: flex; /* Ensure flex container for height matching */
}

.events-tbtns ul li.third-button,
.events-tbtns ul li.primary-button {
  display: flex;
  align-items: stretch;
}
@media(max-width:1280px){
  .event-flex {
    flex-direction: row;
    gap: 24px;
  }
  .evs-lts {
    padding:0 0 10px;
    width:50%;
  }
  .evs-rts {
    padding:10px 0 0;
    width:50%;
    gap: 24px;
  }
  .evs-lts .event-item,
  .eitem {
    flex: 1 0 auto;
  }
}


@media(max-width:1130px){
 .dis-flex.event-flex{display:none;}
 .event-mobslide{display:block;margin:34px 0 0;} 
  {# .event-images {height:280px;} #}
  
 /* Calendar badge responsive sizing for mobile */
 .event-calendar-badge {
   width: 34px;
   height: 34px;
   padding: 3px;
   gap: -3px;
 }
 .calendar-day {
   font-size: 15px;
 }
 .calendar-month {
   font-size: 9px;
 }
 /* Mobile margin for event content */
 .event-content.detail-content {
   margin-bottom: 40px;
 }
 
 /* Mobile Slider - Native CSS Scroll with Drag (same as Content And Card) */
 .event-mobslide {
   position: relative;
   width: 100%;
   padding: 0;
   overflow: visible; /* Allow next card to peek */
 }
 
 .event-slider {
   overflow-x: auto;
   overflow-y: hidden;
   padding: 10px 16px; /* Padding on sides */
   cursor: grab;
   -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
   scrollbar-width: none; /* Firefox - hide scrollbar */
   -ms-overflow-style: none; /* IE and Edge - hide scrollbar */
   scroll-snap-type: x proximity; /* Proximity snap for smoother transitions */
   scroll-behavior: smooth; /* Smooth scrolling */
 }
 
 /* Hide scrollbar for Chrome, Safari and Opera */
 .event-slider::-webkit-scrollbar {
   display: none;
 }
 
 /* Card track container */
 .event-slider-track {
   display: flex;
   gap: 16px;
   user-select: none; /* Prevent text selection while dragging */
   will-change: transform; /* Optimize for smooth scrolling */
   padding-right: 16px; /* Extra padding on right to show peek */
 }
 
 .event-mobslide .event-item {
   flex: 0 0 calc(100% - 32px); /* Card width minus padding to show peek of next card */
   width: calc(100% - 32px);
   max-width: calc(100% - 32px);
   min-width: calc(100% - 32px);
   scroll-snap-align: start; /* Start snap alignment */
   scroll-snap-stop: always; /* Always stop at each card */
   box-sizing: border-box;
   box-shadow: 0px 2px 8px 0px rgba(143, 143, 143, 0.15); /* Lighter shadow for mobile */
 }
 
 /* Active dragging state */
 .event-slider.dragging {
   cursor: grabbing;
   scroll-snap-type: none; /* Disable snap while dragging for smoother feel */
 }

  .event-item.eitem .detail-content {
    height: auto !important; 
  }
}

@media(max-width: 991px) {
  .event-images {
    height: 288px;
  }

  .event-images img {
    object-fit: contain;
  }  
}

@media (max-width: 767px) {
  .event-lts{width:100%;padding:0 0 30px}
  .event-rts{width:100%; text-align:left;}  
  .event-images {
    height: 113px;
  }
}

@media(max-width:480px){
  .events-btns {margin: 20px 0 0;}
  .events-btns ul li, .events-tbtns ul li { width: 100%;margin: 20px 0 0;}
}

/* Desktop updates */
.evs-rts {
  display: flex;
  flex-wrap: wrap;
  flex-direction: unset;
  width: unset;
  flex: unset;
  gap: 0;
  padding: 0;
  margin: 0 -15px;
}

.evs-rts > div {
  display: block !important;
  flex: unset;
  width: calc(100% / 3 - 30px);
  margin: 0 15px 30px !important;
}

.eitem .dis-flex {
  display: flex;
  flex-wrap: wrap;
  gap: unset;
  flex: unset;
  min-height: 0;
}

.eitem .dis-flex > div {
  width: 100%;
  display: block;
  flex-direction: unset;
  padding: 0;
  height: unset;
}

.eitem .dis-flex > div .event-image {
  height: 224px;
  margin: 0 0 30px;  
}

.eitem .dis-flex > div .event-image img {
  object-fit: contain;
}

.events-tbtns {
  margin-top: 15px;
}