.custom-event-widget { 
max-width: 100%; 
margin: 0 auto; 
padding: 0; 
background-color: #f3f3f3; 
border-radius: 10px;
}
.custom-header { 
text-align: left; 
margin: 0; 
margin-top: -30px !important; 
letter-spacing: 0.01em; 
font-size: 2em; 
text-transform: uppercase;
margin-bottom: 25px;
}
.custom-event-list {
display: flex;
flex-wrap: wrap;
justify-content: flex-start; gap: 20px; }
.custom-event {
flex: 1 1 22%; min-width: 220px; 
min-height: 160px; 
margin-bottom: 20px; 
padding: 10px; 
border-radius: 5px; 
background-color: #f3f3f3;
transition: background-color 0.3s;
display: flex;
flex-direction: column;
justify-content: space-between;
} .custom-event-list::after {
content: none;
}
.custom-event:hover { 
background-color: #e0e0e0; 
}
.custom-event a { 
text-decoration: none; 
color: inherit; 
display: block; 
height: 100%; 
width: 100%; 
}
.custom-event-date { 
display: flex; 
align-items: baseline; 
justify-content: space-between; 
margin-bottom: 10px; 
}
.custom-date-info { 
display: flex; 
align-items: baseline; 
}
.custom-event-day { 
font-size: 2.5em; 
font-weight: bold; 
margin-right: 5px; 
color: #777777;
}
.custom-event-month { 
font-size: 1.2em; 
text-transform: uppercase; 
}
.custom-event-sector { 
font-size: 1em; 
text-transform: uppercase; 
margin-left: auto; 
font-weight: bold; 
}
.custom-event-details { 
border-top: 1px solid #ccc; 
padding-top: 10px; 
margin-top: 10px; 
}
.custom-event-title { 
font-size: 0.9em; 
font-weight: bold; 
color: #333; 
}
.custom-event-location { 
font-size: 0.8em; 
color: #666; 
text-transform: uppercase;
}
.custom-pagination { 
text-align: center; 
margin-top: 20px; 
}
.custom-pagination button { 
width: 40px; 
height: 20px; 
margin: 0 5px; 
padding: 5px; 
color: #007bff; 
border: 1px solid #ccc; 
border-radius: 10px; 
background-color: #fff; 
cursor: pointer; 
text-indent: -9999px; 
}
.custom-pagination button.active { 
font-weight: bold; 
color: #fff; 
background-color: #007bff; 
}
.custom-header a {
color: inherit; 
text-decoration: none; 
display: inline-block; 
position: relative;
width: 100%;
height: 100%;
}
.custom-header .default-text,
.custom-header .hover-text {
display: block;
transition: opacity 0.3s ease;
position: absolute;
top: 0;
left: 0;
white-space: nowrap;
}
.custom-header .hover-text {
opacity: 0;
visibility: hidden;
transition-delay: 0.5s; }
.custom-header a:hover .default-text {
opacity: 0;
visibility: hidden;
transition-delay: 0.5s; }
.custom-header a:hover .hover-text {
opacity: 1;
visibility: visible;
transition-delay: 0s; }
.custom-event-list {
margin-top: 10px; }