/* Zorgt dat alle kaarten even hoog zijn */
.al-service-archi-wrapper{
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Zorgt dat de content kan “rekken” */
.al-service-archi-content{
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Duwt de pijl altijd naar de onderkant */
.al-service-archi-link{
  margin-top: auto;
}

.tp-team-value-list svg{
  color: var(--tp-text-grey-6);
}

/* Alleen de opsomming lichter maken */
.tp-about-feature-info .tp-team-value-list h6{
  color: rgba(255,255,255,.75) !important;  /* lichter */
  font-family: var(--tp-ff-dm);
  font-size: 18px;
  line-height: 140%;
  font-weight: 400;
}

/* Vinkje mee laten kleuren */
.tp-about-feature-info .tp-team-value-list svg{
  color: rgba(255,255,255,.75) !important;
}

/* Brand items: alles mooi gecentreerd */
.tp-brand-item{
  height: 70px;                 /* vaste hoogte voor iedereen */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Logo's: dezelfde optische grootte + in kleur */
.tp-brand-item img{
  max-height: 50px;             /* overal dezelfde hoogte */
  max-width: 160px;             /* voorkomt extreem brede logo's */
  width: auto;
  height: auto;
  object-fit: contain;

  filter: none !important;      /* geen zwart-wit */
  opacity: 1 !important;
}

.tp-brands-area{
  background: var(--tp-lichtgroen) !important; /* #45ACA3 */
}


/* grotere, uniforme badges */
.tp-brand-item {
  background: #fff;
  width: 240px;
  height: 95px;
  border-radius: 14px;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* logo mooi groot maar altijd passend */
.tp-brand-item img{
  max-height: 60px;
  max-width: 190px;
  width: auto;
  height: auto;
  object-fit: contain;

  filter: none !important;
  opacity: 1 !important;
}

.al-choose-archi-area .tp-team-value-title svg{
  color: #fff !important;
}

.tp-footer-wd-main,
.tp-footer-bottom{
  background: var(--tp-donkergroen) !important;
}

.tp-brands-area{
  padding-top: 30px !important;
  padding-bottom: 60px !important;
  background: var(--tp-lichtgroen) !important;
}

.tp-footer-cst-btp i,
.scrollToTop .arrowUp i{
  font-size: 22px;
  line-height: 1;
  color: #fff;
}

  /* ------------------------------------------------------------
         CLEAN MODERN MASONRY SYSTEM
      ------------------------------------------------------------ */

      .masonry {
         column-count: 1;
         column-gap: 25px;
         width: 100%;
      }

      @media (min-width: 640px) {
         .masonry { column-count: 2; }
      }

      @media (min-width: 1024px) {
         .masonry { column-count: 3; }
      }

      .masonry-item {
         break-inside: avoid;
         display: block;
         width: 100%;
         margin: 0 0 25px;
         position: relative;
         border-radius: 10px;
         background: #eee;
         box-shadow: inset 0 0 0 1px #ddd;
         overflow: hidden;
      }

      .masonry-img img {
         width: 100%;
         height: auto;
         display: block;
         border-radius: 10px;
         object-fit: cover;
      }

      /* ------------------------------------------------------------
         OVERLAY DESIGN
      ------------------------------------------------------------ */

      .gridinfo {
         position: absolute;
         inset: 0;
         background: rgba(0,0,0,0.4);
         text-align: center;
         transition: all 0.8s;
         pointer-events: none;
      }

      .gridinfo * {
         opacity: 0;
         transition: all 0.8s;
         pointer-events: auto;
      }

      .gridinfo h3 a {
         font-size: 20px;
         color: #fff;
         font-weight: bold;
         text-transform: uppercase;
         margin: 130px 0 20px;
         position: relative;
         opacity: 1;
		 
		 
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0 !important;
    opacity: 1;
	 width: 80%; /* creëert meer horizontale ruimte */
      }
	  
.gridinfo h3 {
    width: 80%; /* creëert meer horizontale ruimte */
}	  

      .gridinfo h3:after {
         content: '';
         width: 25px;
        color: #fff;
         display: block;
         margin: 25px auto 0 auto;
      }

      .gridinfo .gridmeta { transition-delay: 0.25s; }

      .gridinfo .gridmeta p {
         display: inline-block;
         font-size: 13px;
         color: #fff;
         margin-bottom: 15px;
      }

      .gridinfo .gridmeta p.gridwho { margin-left: 25px; }

      .gridinfo p.gridexerpt {
         width: 60%;
         margin: 0 auto 25px;
         line-height: 22px;
         color: #fff;
         transition-delay: 0.5s;
      }

      .gridinfo .grid-btn {
         color: #fff;
         text-decoration: none;
         margin: 0 auto;
         width: 35px;
         height: 35px;
         line-height: 35px;
         border-radius: 25px;
         border: 1px solid #fff;
         display: block;
         overflow: hidden;
         transition: all 0.8s;
         pointer-events: auto;
      }

      .gridinfo .grid-btn:hover {
         width: 75px;
         background: rgba(0,0,0,0.3);
      }

      .gridinfo .grid-btn span {
         opacity: 0;
         display: none;
      }
      .gridinfo .grid-btn:hover span {
         opacity: 1;
         display: inline;
      }
      .gridinfo .grid-btn:hover i {
         opacity: 0;
         display: none;
      }

      .masonry-item:hover .gridinfo {
         background: rgba(67, 100, 103, 0.7);
      }

      .masonry-item:hover .gridinfo * {
         opacity: 0.7;
      }

      .masonry-item:hover .gridinfo h3 {
         opacity: 1;
         margin-top: 70px;
      }

      .masonry-item:hover .gridinfo p {
         opacity: 1;
      }
	  






/* BASISPOSITIE — titel in het midden */
.gridinfo h3 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0 !important;
    opacity: 1;
    z-index: 3;
    transition: all 0.6s ease;
}

/* META, TEKST, BUTTON STARTEN VERBORGEN */
.gridinfo .gridmeta,
.gridinfo .gridexerpt,
.gridinfo .grid-btn {
    position: relative;
    top: 40%;
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.6s ease;
    z-index: 3;
}

/* HOVER OVERLAY */
.masonry-item:hover .gridinfo {
background: rgba(67, 100, 103, 0.7);
}

/* ⭐ HOVER: TITEL SCHUIFT MEE NAAR BOVEN */
.masonry-item:hover .gridinfo h3 {
    top: 25%;                    /* beweegt van 50% → 25% */
    transform: translate(-50%, -30%);
    opacity: 1;
}

/* ⭐ HOVER: REST VAN DE CONTENT KOMT ERONDER UIT */
.masonry-item:hover .gridinfo .gridmeta,
.masonry-item:hover .gridinfo .gridexerpt,
.masonry-item:hover .gridinfo .grid-btn {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.12s;
}

.tp-portfolio-outcome-bost{
  text-align: center;
}

.tp-portfolio-outcome-bost span{
  display: inline-block;
  text-align: center;
}

/* Center the slider only when there's exactly 1 slide */
.tp-pd-2-active .swiper-wrapper:has(> .swiper-slide:only-child) {
  justify-content: center;
}

/* Optional: prevents the slide from stretching full width */
.tp-pd-2-active .swiper-slide:only-child {
  width: auto !important;
}

/* Zorgt dat alle kolommen even hoog worden */
.tp-about-process-area .row > [class*="col-"] {
  align-self: stretch;
}

/* De card zelf even hoog */
.tp-about-process-item {
  height: 100%;
}

/* TITELS even hoog → tekst start overal op exact dezelfde lijn */
.tp-box-title {
  line-height: 1.3;
  min-height: calc(1.3em * 2);  /* ruimte voor max 2 regels */
  display: -webkit-box;
  -webkit-line-clamp: 2;        /* max 2 regels */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* (optioneel) kleine extra spacing consistent maken */
.tp-box-text {
  margin-top: 0;
}

.grid-btn i.fa-plus{
  width: 28px;              /* pas aan naar jouw smaak */
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* als je cirkel via background/border doet: */
  /* background: #000; */
  /* color: #fff; */
}