:root {
  --main-blue-rgba: rgba(0%, 18.4%, 27.8%, 1);
  --main-blue-rgba0: rgba(0%, 18.4%, 27.8%, 0);
	--main-blue-rgba5: rgba(0%, 18.4%, 27.8%, 0.5);
}

.elementor-element.elementor-element-55073b5.elementor-widget.elementor-widget-shortcode:after {
    content: "";
    display: table;
    clear: both;
}

.elementor-element.elementor-element-55073b5.elementor-widget.elementor-widget-shortcode {
    display: flex;
    flex-direction: column; /* Adjust as needed */
}


.bfwrapper {
  color:white;
   display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}

@media only screen and (max-width: 600px) {
	.bfwrapper .item{min-height:10px!important;}
	
	
.bfwrapper {

   display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 30px;
}
}


.bfwrapper div {
 }

.bfwrapper .item {
  display: flex;
  flex-direction: column;
/*   aspect-ratio: 9/12; */
	min-height:400px;
  justify-content: space-between;
  position: relative; /* Added for positioning the h3 absolutely */
  overflow: hidden; /* Ensures that the animated h3 does not show outside the item */
}

.item .bekijkicon {
  opacity: 0; /* Make h3 invisible initially */
  transition: opacity 0.5s ease, transform 0.5s ease; /* Animate the opacity and transform */
  transform: translateY(30px); /* Start the element lower */
  position: absolute; /* Position h3 at the bottom */
  bottom: 0px; /* Adjust as needed */

  width: 100%; /* Ensure it spans the width of .item */
  text-align: left; /* Center the text */
  margin: 0;
		color:white!important;
}

.item h2 {
  transition: transform 0.5s ease; /* Animate the transform */
  margin: 0;
		color:white!important;

}
.bekijkicon h3{margin:0px;}
.bekijkicon img{width:24px; height:24px!important; }
.bekijkicon span{
	color:var( --e-global-color-secondary ); fill:var( --e-global-color-secondary );
	margin-left:8px;
}


.itembottom {
  position: relative;
  margin-bottom: 10px;
}

.projectlocatie{
	  transition: transform 0.5s ease; /* Animate the transform */
	  transform: translateY(0px); /* Move up on hover */
		color:white;
/* 	background-color:var(--e-global-color-secondary);

	display:inline-block;
	padding:0px 4px 2px 4px;
	border-radius:3px;
	margin-bottom:5px; */
	


}

.bfwrapper .item:hover h2, .bfwrapper .item:hover .projectlocatie {
  transform: translateY(-22px); /* Move up on hover */
} {
  transform: translateY(-22px); /* Move up on hover */
}

.bfwrapper .item:hover .bekijkicon {
  opacity: 1; /* Make h3 visible on hover */
  transform: translateY(10px); /* Move to original position */
}

.bekijkicon{display:flex; flex-direction:row; }
.bekijkicon *{color:var( --e-global-color-secondary )!important; }

.item::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  /* background-color: var(--main-blue-rgba); */
  background: linear-gradient(
    var(--main-blue-rgba0) 0%,
	   var(--main-blue-rgba0) 50%,
    var(--main-blue-rgba5) 80%,
	
    var(--main-blue-rgba) 100%
  );
  position: absolute;
}


.itemcontentflex {
    padding: 20px;
}

.itemcontent {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: none;
  position: absolute;
  justify-items: stretch;
  flex-direction: column;
}

.itembottom h2{
	font-size:28px!important;
}

.itembottom h3{
	font-size:16px!important;
}

.itemcontentflex {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  height: 100%; /* Added to make itemcontentflex full height */
}