/*
Theme Name: IBC Containers
Theme URI: https://lefcreative.nl/
Author: Lef Creative
Author URI: https://lefcreative.nl/
Description: Thema voor IBC
Version: 1.0.0
License: /
License URI: /
Template: leflite
*/

body {
  	position: relative;
}

header .navigation-inner .logo-outer {
  	position: relative;
  	z-index: 2;
}
body.fixed-header header.scrolled img.logo {
 filter: unset!important; 
}

header .navigation-inner .logo-outer img {
  	position: relative;
  	z-index: 2;
}

body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 1294px;
    height: 1228px;
    background: url('/app/themes/ibc/dist/img/ibc-black-top-square.svg');
    background-repeat: no-repeat;
    z-index: 1;
}

@media only screen and (max-width: 1679px) {
   	body::before {
      	background-size: 40%;
  	}
}

@media only screen and (max-width: 1359px) {
   	body::before {
      	background-size: 30%;
  	}
}

@media only screen and (max-width: 575px) {
   	body::before {
      	background-size: 20%;
  	}
}

header {
  	position: relative;
  	z-index: 2;
}

h2 {
  	display: inline-flex;
  	align-items: center;
}

h6 {
	font-family: var(--body-font);
  	font-weight: 400;
  	background: var(--gray);
  	width: auto;
  	padding: 10px;
  	display: inline-flex;
  	align-items: center;
}

h2::before,
h6::before {
	content: '';
  	width: 9px;
  	min-width: 9px;
  	height: 9px;
  	background: var(--primary);
  	border-radius: 2px;
  	transform: rotate(45deg);
  	display: block;
  	margin-right: 10px;
}

.lef-section.smaller-hero-image .background-image-wrapper img {
  width: 50%;
  object-fit: contain !important;	
  width: auto!important;
background-color: white!important;

}

.lef-section.block-has-margin {
  	margin: 0 23px;
  	border-radius: 10px;
}

@media only screen and (max-width: 991px) {
   	.lef-section.block-has-margin {
      	margin: unset;
  	}
}

.lef-section.block-has-clippath {
  	clip-path: polygon( 0.346% 1.083%,0.346% 1.083%,0.354% 0.902%,0.376% 0.731%,0.41% 0.572%,0.456% 0.427%,0.513% 0.3%,0.578% 0.192%,0.651% 0.106%,0.731% 0.044%,0.816% 0.008%,0.905% 0.001%,99.484% 8.932%,99.484% 8.932%,99.568% 8.953%,99.647% 8.999%,99.721% 9.069%,99.788% 9.159%,99.847% 9.268%,99.898% 9.394%,99.94% 9.534%,99.97% 9.687%,99.99% 9.851%,99.996% 10.023%,99.996% 98.829%,99.996% 98.829%,99.989% 99.009%,99.968% 99.18%,99.934% 99.339%,99.889% 99.483%,99.834% 99.611%,99.77% 99.72%,99.698% 99.808%,99.619% 99.872%,99.534% 99.91%,99.446% 99.92%,0.521% 94.424%,0.521% 94.424%,0.436% 94.405%,0.355% 94.36%,0.279% 94.291%,0.211% 94.201%,0.15% 94.091%,0.098% 93.963%,0.056% 93.821%,0.025% 93.665%,0.006% 93.499%,0% 93.324%,0.346% 1.083% );
}

.tns-outer .tns-controls button {
  	border-radius: var(--btn-border-radius) !important;
  	width: 37px !important;
  	height: 37px !important;
  	transform: rotate(-25deg);
}

/* GOOGLE TRANSLATE MENU ITEM */
.menu-item-has-translate,
.menu-item-has-translate .gtranslate_wrapper #gt_float_wrapper {
    height: 62px;
}

.menu-item-has-translate .gtranslate_wrapper .gt_float_switcher,
.menu-item-has-translate .gtranslate_wrapper .gt_float_switcher .gt-selected {
    background: var(--white);
    color: var(--white-content);
    box-shadow: unset;
    border-radius: var(--btn-border-radius);
}

.menu-item-has-translate .gtranslate_wrapper .gt_float_switcher {
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.menu-item-has-translate .gtranslate_wrapper .gt_float_switcher .gt-selected .gt-current-lang {
    padding: 19px 14px;
    color: var(--white-content);
    display: flex;
    flex-direction: row;
    align-items: center;
}

.menu-item-has-translate .gtranslate_wrapper .gt_float_switcher .gt-selected .gt-current-lang img {
    margin-right: 9px;
    border-radius: 24px;
    width: 24px;
    height: 24px;
    object-fit: cover;
}

.menu-item-has-translate .gtranslate_wrapper .gt_float_switcher .gt-selected .gt-current-lang .gt-lang-code {
    font-family: var(--body-font);
    font-size: 16px;
    line-height: 1em;
    font-weight: 900;
    top: unset;
    display: block;
    margin-right: 4px;
}

.menu-item-has-translate .gtranslate_wrapper .gt_float_switcher .gt-selected .gt-current-lang span.gt_float_switcher-arrow {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 285 285'><path d='M282 76.5l-14.2-14.3a9 9 0 0 0-13.1 0L142.5 174.4 30.3 62.2a9 9 0 0 0-13.2 0L3 76.5a9 9 0 0 0 0 13.1l133 133a9 9 0 0 0 13.1 0l133-133a9 9 0 0 0 0-13z' style='fill:%23333'/></svg>");
    transform: rotate(0deg);
    margin-left: auto;
}

.menu-item-has-translate .gtranslate_wrapper .gt_float_switcher .gt-selected .gt-current-lang span.gt_float_switcher-arrow.gt_arrow_rotate {
    transform: rotate(180deg);
}

.menu-item-has-translate .gtranslate_wrapper .gt_float_switcher .gt_options {
    background: var(--white);
}

.menu-item-has-translate .gtranslate_wrapper .gt_float_switcher .gt_options a {
    padding: 10px 14px;
    color: var(--white-content);
    font-family: var(--body-font);
    font-size: 16px;
    font-weight: 900;
    line-height: 1em;
    text-transform: none;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.menu-item-has-translate .gtranslate_wrapper .gt_float_switcher .gt_options a:hover {
    background: var(--primary);
    color: var(--white);
}

.menu-item-has-translate .gtranslate_wrapper .gt_float_switcher .gt_options a img {
    border-radius: 24px;
    width: 24px;
    height: 24px;
    object-fit: cover;
}

.card-portfolio {
  	position: relative;
  	border: unset;
  	background: var(--black);
  	overflow: hidden;
  	border-radius: 15px 0 15px 0;
}

.card-portfolio .content-outer {
  	position: absolute;
  	bottom: 0;
  	left: 0;
}

.card-portfolio .content-outer h4 {
  	font-size: var(--h3-size);
  	font-weight: 900;
  	color: var(--white);
  	margin-bottom: unset;
  	position: relative;
  	z-index: 3;
  	display: flex;
  	align-items: center;
}

.card-portfolio .content-outer h4::after {
  	content: '\ee00';
  	font-family: 'icomoon';
  	font-size: 10px;
  	margin-left: 10px;
  	line-height: 10px;
}

.card-portfolio .content-outer .buttons-holder {
  	display: none;
}

.card-portfolio .image-outer {
  	height: 509px;
}

.card-portfolio .image-outer .image-holder {
  	height: 100%;
  	padding-bottom: unset;
  	position: relative;
  	z-index: 1;
}

.card-portfolio .image-outer .image-holder::after {
  	position: absolute;
  	top: 0;
  	left: 0;
  	background: var(--black);
  	opacity: .2;
  	content: '';
  	z-index: 2;
  	width: 100%;
  	height: 100%;
}

.card-portfolio .image-outer .image-holder img {
  	height: 100%;
	transition: transform .3s ease-in-out;
  	border-radius: unset;
}

.card-portfolio:hover .image-outer .image-holder img {
  	transform: scale(1.2);
}

.mobile-navigation .menu-item-has-translate {
    display: none !important;
}

.mobile-navigation .nav-holder-primary-1:not(:has(li:not(.menu-item-has-translate))) {
    display: none;
}

footer {
  	margin: 0 23px 23px 23px;
  	border-radius: 10px;
  	clip-path: polygon( 0% 1.783%,0% 1.783%,0.007% 1.485%,0.029% 1.203%,0.063% 0.942%,0.11% 0.704%,0.166% 0.494%,0.232% 0.317%,0.305% 0.175%,0.386% 0.072%,0.471% 0.013%,0.562% 0.002%,99.486% 14.609%,99.486% 14.609%,99.57% 14.644%,99.65% 14.719%,99.724% 14.832%,99.791% 14.98%,99.851% 15.158%,99.902% 15.364%,99.943% 15.593%,99.974% 15.843%,99.993% 16.11%,100% 16.39%,100% 98.136%,100% 98.136%,99.993% 98.426%,99.973% 98.7%,99.94% 98.956%,99.896% 99.189%,99.842% 99.397%,99.78% 99.575%,99.709% 99.72%,99.632% 99.828%,99.55% 99.896%,99.462% 99.919%,50.306% 99.919%,0.538% 99.919%,0.538% 99.919%,0.45% 99.896%,0.368% 99.828%,0.291% 99.72%,0.22% 99.575%,0.157% 99.397%,0.104% 99.189%,0.06% 98.956%,0.027% 98.7%,0.007% 98.426%,0% 98.136%,0% 1.783% );
}

footer .footer-inner {
  	padding: 167px 0 134px 0;
}

footer .footer-inner .row {
  	align-items: center;
}

@media only screen and (max-width: 991px) {
   	footer {
      	clip-path: unset;
      	margin: unset;
  	}
  
  	footer .footer-inner {
      	padding: 70px 0 70px 0;
  	}
}
@media only screen and (min-width: 2170px) {
   	img.logo {
          filter: grayscale(1) brightness(0.4);
  	}
}
@media only screen and (max-width: 1200px) {
  .smaller-hero-image .background-image-wrapper {
    display: none;
  }
}

.breadcrubs-h6 {

	font-family: var(--body-font);
  	font-weight: 400;
  	background: var(--gray);
  	width: auto;
  	padding: 10px;
  	display: inline-flex;
  	align-items: center;
}

.breadcrubs-h6::before {
	content: '';
  	width: 9px;
  	min-width: 9px;
  	height: 9px;
  	background: var(--primary);
  	border-radius: 2px;
  	transform: rotate(45deg);
  	display: block;
  	margin-right: 10px;
}
.card .image-outer .image-holder img {
 object-fit: contain;
  background-color: white;
}

/* Tabel shit */

.table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* soepele scroll op iOS */
}

.table-scroll table {
  width: 100%;
  border-collapse: collapse;
  min-width: 600px; /* voorkomt dat de tabel te smal wordt */
}

.table-scroll th,
.table-scroll td {
  padding: 8px 12px;
  text-align: left;
  white-space: nowrap; /* voorkomt afbreken van tekst */
}

/* optioneel: visuele stijl */
.table-scroll th {
  background: var(--gray-light, #f5f5f5);
  font-weight: 600;
}

.slider-normal .card .image-outer .image-holder img {
    object-fit: cover;
    background-color: white;
}