:root {
   --max-width: 1180px;
   --h2-min-size: 1.5em;
   --h2-max-size: 1.8em;
   --h3-min-size: 1.4em;
   --h3-max-size: 1.6em;
   --h4-min-size: 1.3em;
   --h4-max-size: 1.4em;
 }

 input[type=text], input[type=password], textarea, input[type=email], input[type=number]{
   box-shadow: none;
   border: none;
   color: unset;   
}








 #header-basic{
    overflow: hidden;
 }

#header-basic .centered{
   width: var(--max-width) !important;
   padding-left: 16px;
   padding-right: 16px;
   box-sizing: border-box;
}

#header-basic img.logo{
   width: 140px !important;
}



body{
   background: white;
}

section{
   margin-bottom: clamp(1.5rem, 2vw, 3.5rem);
}
section.hero{
   margin-bottom: 0;
}


.hero {   
   background-size: cover;
   height: 30vw; /* Sets the height to 30% of the viewport width */
   min-height: 180px; /* Ensures the height does not go below 180px */
   max-height: 320px; /* Ensures the height does not exceed 400px */
   display: flex;
   justify-content: center;
   align-items: center;
   position:relative;
   color:white;
   flex-direction: column;
}
.hero::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: rgba(0, 0, 0, 0.6); /* Black overlay with 50% opacity */
   z-index: 1; /* Ensures the overlay is above the background image but below any content */
}

.hero h1{
   font-size: clamp(1.5rem, 5vw, 3.5rem);
   color:white; 
   font-weight: bold;
   text-align: center;
   max-width: 740px;
   padding-left: 32px;
   padding-right: 32px;
}
.hero *{
   z-index: 2;
}
.hero a{
   color: white;
}


h2, .mobile h2{
   font-size: clamp(var(--h2-min-size), 3vw, var(--h2-max-size));
   font-weight: 500;
 }
 
 h3, .mobile h3 {
   font-size: clamp(var(--h3-min-size), 2.5vw, var(--h3-max-size));
   font-weight: 500;
 }
 
 h4, .mobile h4 {
   font-size: clamp(var(--h4-min-size), 2vw, var(--h4-max-size));
   font-weight: 500;
 }


.container {
   max-width: 1180px;
   margin: auto;
   position: relative;
   padding: 0 16px;
   box-sizing: border-box;
}

nav{
   display: flex;
   gap: 24px;
   overflow-x: auto;
}

.side-by-side div.col:first-child {
   margin-bottom: 2rem;
}
@media (min-width: 768px) {
   .side-by-side {
       display: flex;
       justify-content: space-between;
   }
   .side-by-side div.col:first-child {
       flex: 1;
       margin-right: 5rem;
       margin-bottom: 0;
   }
   .side-by-side div.col:last-child {
       width: 25%;
   }
}




.slider-wrapper {
   position: relative;
   max-width: 100%;
   overflow: hidden;
}

.navigation-info {
   padding: 4px 8px;
   border-radius: 24px;
   border: 1px solid #E5E5E5;
   position: absolute;
   top: 0;
   right: 10px;
   z-index: 10;
   font-size: 1.2em;
   color: #666;
}




.navigation-info button{
   font-size: 1.2em;
   margin: 4px 8px;
   height: 24px;
   width: 24px;
   color: black;
   background: white;
   border-radius: 50%;
   transition: background 0.3s ease, color 0.3s ease;
   padding: 0;
   text-align: center;
   line-height: 20px;
}

.navigation-info button:hover{
   background: black;
   color:white;
}

.navigation-info .current-page{
   line-height: 24px;
}

.slider {
   display: flex;
   transition: transform 0.5s ease;
   padding-top: 20px;
   margin-right: 30px; /*previews next card*/
}


.slider[data-slides='1'], .slider-wrapper[data-slides-per-page="2"] .slider[data-slides='2']{
   margin-right: 0;
}


a.slide{
   color: black !important;
}
a.slide:hover{
   text-decoration: none !important;
}

.slide {
   text-decoration: none;
   color: black;
   flex: 0 0 33.333%; /* Each slide takes up one third of the slider width */
   box-sizing: border-box;
   padding: 10px;
   overflow: hidden; /* Contain the zoomed image */
   display: flex; /* Make sure the <li> element is flexible */
   align-items: center; /* Center the content vertically */
}

/* 3 Slides per Page */
.slider-wrapper[data-slides-per-page="3"] .slide {
   flex: 0 0 calc((100% / 3) - 10.67px); /* Adjusted for 32px margin-right */
 }
 
 /* 2 Slides per Page */
 .slider-wrapper[data-slides-per-page="2"] .slide {
   flex: 0 0 calc((100% / 2) - 8px); /* Adjusted for 16px gap */
 }
 
 /* 1 Slide per Page */
 .slider-wrapper[data-slides-per-page="1"] .slide {
   flex: 0 0 100%;
 }
 /* One card only; over-write anything above */
 .slider[data-slides='1'] .slide{
    flex: 0 0 67% !important;
 }
 /* Two cards only; over-write anything above */
 .slider[data-slides='2'] .slide{
    flex: 0 0 calc((100% / 2) - 8px); /* Adjusted for 16px gap */
 }

.img-contain{
   border-radius: 8px;
   overflow: hidden;
   width: 100%;
   height: auto;
   margin-bottom: 1em;   
}


.slide img {
   width: 100%;
   height: 100%;
   aspect-ratio: 13/7;
   transition: transform 0.5s ease;
   object-fit: cover; /* Ensure the image covers the area without distortion */
   border-radius: 8px;
   min-height: 72px;
   filter: brightness(0.8);

}

.slide:hover img {
   transform: scale(1.1);
}


.item-card{
   width: 100%;
}

.item-card .event-details h3 {
   font-weight: bold;
   font-size: clamp(0.8rem, 2vw, 1.3em);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.item-card .event-details p {
   font-size: small;
   margin: 5px 0;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;   
}

.price {
   font-weight: bold;
}

.prev, .next {
   cursor: pointer;
   border: none;
   padding: 5px;
   display: inline;
}



p{
   margin-bottom: clamp(0.5em, 1vw, 1em);
   line-height: clamp(1.2em, 1.5em, 1.5em);
   font-size: clamp(1em, 2vw + 1em, 1.3em);
   color: #000;   
}


.breadcrumbs li{
   display: inline;
}

@media (hover: none) { /* Hide buttons on touch devices */
   .prev, .next {
       display: none;
   }
}



@media (max-width: 600px) {
   .navigation-info{
      display: none;
   }
   .slider{
      padding-top: 0;
   }   
}


.slide[data-link='event'] .event-details {
   position: absolute;
   top: 0;
   background: #00000099;
   width: 100%;
   color: white;
   padding: clamp(8px, 4vw, 16px);
   box-sizing: border-box;
   height: 100%;
   box-sizing: border-box;
   border-radius: 8px;
}

.slide[data-link='event'] .event-details p{
   color:white;
}

.slide[data-link='event']  .price{
    background: #0067ce;
    border-radius: 4px;
    color: white;
    padding: 6px 20px;
    position: absolute;
    bottom: clamp(8px, 4vw, 16px);
    font-size: 14px;
    margin: 0;
}

.slide[data-link='event']  .item-card .event-details h3 {
   font-weight: bold;
   font-size: clamp(16px, 3vw, 1.2rem);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   margin-bottom: 4px;
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2; /* Limit to 2 lines */
   -webkit-box-orient: vertical; /* Required for line clamping */
   white-space: unset;
}

.slide[data-link='event']  .slide img{
   aspect-ratio: 16 / 7;
   min-height: 144px;
}

.slide[data-link='event']  .item-card{
   position: relative;
}

.slide[data-link='event']  .img-contain{
   margin-bottom: 0;
   width: unset;
   height: unset;
}