/* BASIS
-------------------------------------------------- */
header {
	font-family: 'Lato';
}

body, html {
	height: 100%;
	margin: 0;
	padding: 0;
	background-color: #02072a; 
}

.page-template, .single, .page-template-default {
	color: #fffc;
}

.page-template-default a {
	color: #ecaf39;
}

.site-footer small p {
	margin-bottom: 0px;
}

.activiteiten {
	/*background-image: url(/wp-content/uploads/2025/05/snacks2.png); 
	background-position: right; 
	background-repeat: no-repeat; 
	background-size: 300px;*/
}

.wpcf7 form.sent .wpcf7-response-output {
	border-color: #800080;
	border-radius: 20px;
	padding: 15px;
	border-width: 3px;
	text-align: center;
}

.table > :not(caption) > * > * {
	border-color: #adc4d4
}

.height50 {
	height: 30px;
}

.height25 {
	height: 15px;
}

.accordion-button:focus {
	box-shadow: none !important;
}

.btn-primary, .btn-primary:hover {
	background-color: #ecaf39;
  	border-color: #ecaf39;
}

.mega-sub-menu img {
	border-radius: 20px;
}

.mega-sub-menu img:hover {
	opacity: 0.9;
}

.accordion-button:focus, .accordion-button:not(.collapsed) {
  	box-shadow: none !important;
  	outline: none !important;
}

.accordion-button:not(.collapsed):focus {
  	box-shadow: none !important;
  	outline: none !important;
}

.accordion-item:focus,
.accordion-body:focus,
.accordion-collapse:focus {
  outline: none !important;
  box-shadow: none !important;
}

.accordion-item,.accordion-button {
	background-color: transparent !important;
	border-color: purple;
	border-width: 3px;
	color: #fff;
}

.accordion-button {
	font-weight: bold;
}

.accordion-body {
	padding-top: 0px;
}

.accordion-button:not(.collapsed) {
	color: #ecaf39;
}

.accordion-item p {
	margin-bottom: 0px;
}

.accordion {
	border-radius: 15px !important;
 	border: 3px solid purple;
}

.widget_media_image {
	padding-bottom: 0px !important;
}

#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-megamenu > ul.mega-sub-menu {
	margin-top: 20px !important;
}

ul {
  	list-style: none;
  	padding-left: 0;
}

.form-check p, .ms-auto p {
	margin-bottom: 0px;
}

ul li {
  	position: relative;
  	padding-left: 1.5em;
}

ul:not(.mob-nav) li::before {
  	content: "\F138";
  	font-family: "bootstrap-icons";
  	position: absolute;
  	left: 0;
  	color: #ecaf39;
}

#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 li.mega-menu-item-has-children > a.mega-menu-link > span.mega-indicator {
	margin-left: 0px !important;
}

.rounded, .fancybox-image, .fancybox-spaceball {
	border-radius: 15px !important;
 	border: 3px solid rgb(236, 175, 57);
}

.modal {
	z-index: 999999999;
}

.form-control {
	border: 0 none;
}

.form-control::placeholder {
	color: #000;
}

.btn-dark {
	border-color: #000;
	background-color: #000;
}

#reservationModal p:last-child {
	margin-bottom: 0px;
}

.page-template a:not(.btn), .single a:not(.btn) {
	color: #ecaf39
}


.modal-content {
	background: linear-gradient(to right, #d5fbe1, #a3bff9);
	color: #000;
	border-left: 0 none;
}

.title-box {
	background-color: #ecaf39;
	display: inline-block;
	padding: 5px 30px 10px 30px;
	border-radius: 20px;
 	font-weight: bold;
	font-size: 2rem;
	color: #fff;
}

.modal-header {
	border: 0 none;
}

.modal-footer {
	border-color: #fff;
}

.highlight-box {
	background-color: #ecaf39;
	display: inline-block;
	padding: 5px 30px;
  	border-radius: 15px;
	font-weight: bold;
	font-size: 1.5rem;
   	margin: 15px 0;
}

.highlight-content h5 {
	font-weight: bold;
}

.modal-header {
	border-top-left-radius: 20px;
  	border-top-right-radius: 20px;
}

.section-title {
	font-weight: bold;
	margin-top: 15px;
}

.extra {
	font-weight: bold;
}

/*.fade-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.activity-item:hover .fade-overlay.right {
	background: linear-gradient(to right, #02072a 0%, transparent 100%);
}

.activity-item:hover .fade-overlay.left {
	background: linear-gradient(to left, #02072a 0%, transparent 100%);
}

.fade-overlay.right {
  background: linear-gradient(to right, #171b3c 0%, transparent 100%);
}


.fade-overlay.left {
  background: linear-gradient(to left, #171b3c 0%, transparent 100%);
}*/

a {
	text-decoration: none;
}

.ratio-3x4 {
  --bs-aspect-ratio: 133.3333333333%;
}

.ratio-16x9 {
  --bs-aspect-ratio: 75%;
}

.ratio > * {
  object-fit: cover;
}

.zoom-effect {
      overflow: hidden;
      border-radius: 12px;
    }

    .zoom-effect img {
      transition: transform 0.5s ease;
      width: 100%;
      display: block;
    }

    .zoom-effect:hover img {
      transform: scale(1.2); /* Hier zoomt de afbeelding in */
    }

.activity-item {
  transition: transform 0.3s ease;
}

.activity-item:hover {
  transform: scale(1.03);
  z-index: 2;
  cursor: pointer;
  background-color: #02072a !important;
}

.cursor {
    position: fixed;
    width: 15px; 
    height: 15px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.3s, height 0.3s;
    pointer-events: none;
    z-index:999999999999;
}

.hover-cursor {
    width: 20px;
    height: 20px;
    background-color: black;
    transition: width 0.5s height 0.5s;
}

.hover-overlay:hover {
	 cursor: none !important;
}

.top-bar {
  background-color: #222; /* Of transparant */
  font-size: 14px;
}

.btn {
	border-radius: 20px !important;
	padding-left: 20px !important; 
	padding-right: 20px !important;
	transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.btn:hover {
	transform: translate(3px, 3px); /* Naar rechtsonder */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Schaduw voor extra diepte */
}

.text-dark {
	color: #000 !important;
}

.btn-warning {
	background-color: #ecaf39 !important;
	border-color: #ecaf39 !important;
	color: #fff !important;
	font-weight: bold !important;
	text-transform: uppercase !important;
}

.btn-purple {
	background-color: purple !important;
	border-color: purple !important;
	color: #fff !important;
	font-weight: bold !important;
	text-transform: uppercase !important;
}

.mega-btn.btn-warning {
	margin-left: 15px !important;
}

.btn-warning a:hover, .btn-warning a:focus {
	color: #000 !important;
}

.nav-link {
	padding-right: 20px !important;
}

.nav-link:hover {
	color: #ecaf39 !important;
}

.image-card {
	position: relative;
	height: 300px;
	overflow: hidden;
	cursor: pointer;
}

.image-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 15px;
  opacity: 0.9;
  border: 3px solid #ecaf39
}

.image-card img:hover {
	opacity: 1;
}

.swiper-button-next {
  right: -20px;
}

.swiper-button-prev {
  left: -20px;
}

.swiper-button-next, .swiper-button-prev {
  	background-color: #ecaf39;
  	height: 40px;
  	width: 40px;
  	color: #fff !important;
  	border-radius: 50%;
  	position: absolute;
}

.swiper-button-next::after, .swiper-button-prev::after {
  	font-size: 16px;
}

.swiper-horizontal-e {
    width: 100%;
    height: auto;
}

.cat-product-image-second { 
	border: 3px solid #ecaf39;
	width: 100%;
  	object-fit: cover;
  	border-radius: 20px;
}

.swiper-horizontal-e .cat-product-image-second {
	border-color: purple;
}

.swiper-horizontal-e .swiper-slide {
  	display: -webkit-box;
  	display: -ms-flexbox;
  	display: flex;
  	-webkit-box-pack: center;
  	-ms-flex-pack: center;
  	justify-content: center;
  	-webkit-box-align: center;
  	-ms-flex-align: center;
  	-webkit-align-items: center;
  	align-items: center;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.swiper-horizontal-s .swiper-wrapper, .swiper-horizontal-e .swiper-wrapper {
  	-webkit-transition-timing-function: linear;
  	-o-transition-timing-function: linear;
  	transition-timing-function: linear;
  	margin: 0 auto;
}

/* Zorg ervoor dat de cursor niet verandert in een hand bij interactie */
.swiper-horizontal-e {
    pointer-events: none; /* Schakelt alle pointer events uit */
}

.swiper-no-swiping {
    touch-action: none; /* Schakelt swipe interacties uit */
}

.news-ticker {
  color: white;
  overflow: hidden;
  white-space: nowrap;
  font-family: sans-serif;
  padding: 10px 0;
}

.ticker-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.ticker {
  display: inline-block;
  white-space: nowrap;
  animation: scroll 60s linear infinite;
  will-change: transform;
}

.offcanvas {
	background-color: #ecaf39;
}

/* Ticker content styling */
.ticker span {
  display: inline-block;
  padding: 0 50px;
  font-size: 24px;
}

/* Scroll animatie - direct zichtbaar vanaf links */
@keyframes scroll {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}

.sector-item {
	transition: background-color 0.4s ease;
}

.sector-item:hover, .sector-item.hovered {
	background-color: purple;
}

.text-content {
  position: absolute;
  bottom: 15px;
  z-index: 2;
  color: white;
  padding: 15px 15px 0px 15px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
}

.title {
  font-size: 2rem;
  font-weight: bold;
}

.subtitle {
  font-size: 1rem;
}

.video-container {
	position: relative;
	height: 100vh;
	overflow: hidden;
	z-index: 999999;
}

.video-container.smaller {
	height: 40vh;
}

.video-container video {
	position: absolute;
	top: 0;
	left: 0;
	object-fit: cover;
	width: 100%;
	height: 100%;
	z-index: -1; /* Video achter alle andere elementen plaatsen */
}

.gradient-bottom {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 450px;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #02072a 100%);
	z-index: 1; /* De gradient komt boven de video */
}

.header-content {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 2; /* De navbar komt boven alles */
}

.bottom-text {
	position: absolute;
	bottom: 80px;
	width: 100%;
	color: #fff;
	z-index: 2; /* De tekst komt boven alles */
}

.bal {
	width: 100px;
	height: 100px;
}

.nav-link {
	font-weight: bold;
	text-transform: uppercase;
}

/* Vaste posities */
#bal1 {
	left: calc(50% - 80px);
	top: calc(50% - 50px);
}

#bal2 {
	left: calc(50% - 40px);
	top: calc(50% - 40px);
}

#bal3 {
	left: calc(50% - 60px);
	top: calc(50% - 10px);
}

.book-now-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  border-radius: 999px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  text-decoration: none;
  z-index: 9999;
}

.icon-part {
  background-color: #f5c95f;
  padding: 10px 14px;
  font-size: 20px;
  color: #fff;
}

.text-part {
  background-color: #ecaf39;
  color: #fff;
  padding: 13px 20px;
  font-weight: 600;
  font-family: sans-serif;
}

.book-now-btn:hover {
  opacity: 0.9;
}

.hover-block {
  position: relative;
  overflow: hidden;
  height: 100%;
}

.hover-block img {
  display: block;
  width: 100%;
  height: auto;
}

.hover-title {
position: absolute;
  bottom: 20px;
  left: 20px;
  font-weight: 700;
  color: white;
  z-index: 1;
  text-transform: uppercase;
  background-color: purple;
  padding: 10px 20px;
  border-radius: 20px;
}

.hover-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(236, 175, 57, 0.85);
  color: black;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 30px;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.hover-block:hover .hover-overlay {
  opacity: 1;
}

.hover-overlay p {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 15px;
}

.billiard-hover-area {
  background-color: #222;
  color: white;
  border-radius: 12px;
  cursor: none; /* Verberg standaardcursor */
  position: relative;
  overflow: hidden;
}

.billiard-hover-area::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: white;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  left: var(--x);
  top: var(--y);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  transition: opacity 0.1s ease;
  opacity: 0;
  z-index: 10;
}

.billiard-hover-area:hover::before {
  opacity: 1;
}

/* Volg de muis */
.billiard-hover-area:hover {
  cursor: none;
}

.billiard-hover-area:hover::before {
  animation: followMouse 0.01s linear infinite;
}

@keyframes followMouse {
  0% {
    transform: translate(var(--x, 0px), var(--y, 0px));
  }
}

.table > :not(caption) > * > * {
	padding-left: 0px;
}



/* FOOTER
-------------------------------------------------- */
.site-footer {	
	background: linear-gradient(to bottom, #171b3c 0%, #448ec4 100%);
}

.site-footer a {
	color: #fff !important;
}

.widget-title {
	color: #448ec4;
	font-size: 20px;
}

.whatsapp {
	z-index: 9999;
	display: none;
	position: fixed;
	right: 1.25rem;
	width: 100%;
	bottom: 50px;
}

.whatsapp .whatsapp-button {
	position: absolute;
	right: 0;
	bottom: 0;
	height: 4.5rem;
	width: 4.5rem;
	background-color: #25d366;
	border-radius: 50%;
	box-shadow: 8px 9px 19px -9px rgba(107, 107, 107, .53);
	transition: .5s ease-out 0s;
	color: #fff;
	text-align: center;
	padding: 8px 5px 5px 5px;
	z-index: 999998 !important;
}

.whatsapp .whatsapp-button .bi {
	font-size: 34px;
}