/*
 Theme Name:   kavango-25-child
 Theme URI:    http://kavango.eu/kavango-25-child/
 Description:  Twenty Twenty Five Child Theme
 Author:       Jonathan
 Author URI:   https://kavango.eu
 Template:     twentytwentyfive
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twentytwentyfivechild
*/

.kma-footer a {
	text-decoration: none;
}

body, 
h1, h2, h3, h4, h5, h6, 
.wp-block-heading {
    font-family: "avenir-lt-pro", sans-serif !important;
    font-style: normal !important;
}

.kma-nav-item {
	text-decoration: none!important;
}

.kma-hero-mob {
		display: none;
	}

.wp-block-navigation__responsive-container-content {
	padding: 20px;
}

.kma-float-text {
	mix-blend-mode: difference;
}

@media (max-width: 680px) {
	.kma-deskmenu {
		display: none;
	}
	.kma-hero-mob {
		display: flex;
	}
	.kma-hero-desk {
		display: none;
	}
	.kma-museum-img {
		min-height: 0!important;
	}
	.kma-image-zoomeffect img {
	  transform: scale(1.3); 
	  transition: transform 1.5s cubic-bezier(0.2, 1, 0.3, 1);
	}

	/* 2. De eindstand (wordt geactiveerd door JS) */
	/* Let op: .is-visible staat aan de container vast, spatie daarna naar de img */
	.kma-image-zoomeffect.is-visible img {
	  transform: scale(1);
	}
	.kma-menu-hide {
		display: none;
	}
}

@media (min-width: 681px) {
	.mobile-quote-today {
		display: none;
	}
	.wp-block-navigation__responsive-container {
	width: 30vw;
	}


	
}



.floating_parent {
	position: relative;
}

.floating_wrapper {
	position: relative;
}


.floating_text {
	color: #D6C6A1;
	text-transform: uppercase;
	position: relative;
	
	.wp-block-column {
		position: relative;
	}
	
	
	h2 {
		font-size: 5rem;	
	}

	.blend_layer, .normal_layer {
		position: absolute;
		width: 100%;
		top: 200px;
		text-align: right;
		
	}
	.blend_layer {
		mix-blend-mode: luminosity;
		
		z-index: 999;


	}
	
}
@media (max-width: 680px) {
	
		.kma-image-zoomeffect {
	  overflow: hidden;    /* DIT IS DE KEY: houdt de afbeelding binnen de box */
	}

	.kma-image-zoomeffect img {
	  width: 100%;
	  height: 100%;
	  object-fit: cover;   /* Zorgt dat de afbeelding mooi vult */
	  transition: transform 0.8s ease; /* Zorgt voor de vloeiende beweging */
	}

	.kma-image-zoomeffect:hover img {
	  transform: scale(1.1); /* Vergoot de afbeelding met 20% */
	}
	
	.floating_text h2 {
		font-size: 2rem;
	}
		.kma-gal-2 {
	margin-top: -50px!important;
	}
	.kma-right-column {
		display: none;
	}
}



.kma_fade figure {
  position: absolute;

}

.kma_fade img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kma_fade {
  position: relative;
  overflow: hidden;
	
}

.kma_fade figure {
  position: absolute !important;
  top: 0;
  left: 0;

  opacity: 0;
    animation: fadeInOut 12s infinite;  
	object-fit: cover;
	width: 100% !important;
	height: 100% !important;
	display: block;
	z-index: 1;
	margin: 0;
}

.kma_fade img {
  object-fit: cover;
  display: block;
}

.kma_image {
	position: absolute;
	top: 0; 
	left: 0;
}
.aspect_169 {
	aspect-ratio: 16/9;
}

.aspect_916 {
	aspect-ratio: 9/16;
}
.aspect_11 {
	aspect-ratio: 1/1;
}
.aspect_34 {
	aspect-ratio: 3/4;
	.wp-block-image {
	justify-content: normal !important;
	}
}


.kma_fade0 figure:nth-child(1) { animation-delay: 0s; opacity: 1; animation: none; }
.kma_fade0 figure:nth-child(2) { animation-delay: 4s; }

.kma_fade1 figure:nth-child(1) { animation-delay: 2s; opacity: 1; animation: none;}
.kma_fade1 figure:nth-child(2) { animation-delay: 6s; }

.kma_fade2 figure:nth-child(1) { animation-delay: 4s; opacity: 1; animation: none;}
.kma_fade2 figure:nth-child(2) { animation-delay: 8s; }

.kma_fade3 figure:nth-child(1) { animation-delay: 5s; opacity: 1; animation: none;}
.kma_fade3 figure:nth-child(2) { animation-delay: 9s; }

.kma_fade4 figure:nth-child(1) { animation-delay: 6s; opacity: 1; animation: none;}
.kma_fade4 figure:nth-child(2) { animation-delay: 10s; }

.kma_fade5 figure:nth-child(1) { animation-delay: 8s; opacity: 1; animation: none;}
.kma_fade5 figure:nth-child(2) { animation-delay: 12s; }



/* Add more as needed for additional containers */
@keyframes fadeInOut {
    0%, 100% { opacity: 0; }
    25%, 75% { opacity: 1; }
}