/* ===== HERO SECTION ===== */
.index__hero{
  padding: var(--section-padding);
  padding-top: clamp(1.5rem, 3vw, 4rem);
  background-color: var(--primary-color);
  display: flex;
  flex-direction: column;
  gap: var(--primary-sec-gap);
  color: var(--primary-text-color);
  background-image:
    linear-gradient(
      to right,
      rgba(10, 10, 15, 1) 0%,
      rgba(10, 10, 15, 0.95) 45%,
      rgba(10, 10, 15, 0.7) 70%,
      rgba(10, 10, 15, 0.3) 90%,
      rgba(10, 10, 15, 0) 100%
    ),
      linear-gradient(
      to top,
      rgba(10, 10, 15, 1) 0%,
      rgba(10, 10, 15, 0) 15%
    ),
    url("../images/output-image2.png");

  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.index__hero--stat svg{
  height: auto;
  width: clamp(2rem, 3vw, 4rem);
}

/* hero badge */
.index__hero--badge{
  color: var(--primary-accent-color);
  border: 1px solid var(--primary-accent-color-1);
  background: var(--primary-accent-color-trps);
  width: fit-content;
  border-radius: var(--main-br);
  backdrop-filter: blur(12px);
  padding: clamp(.5rem, .7vw, 1rem) clamp(.7rem, 1vw, 1.2rem);
  padding-left: clamp(1.5rem, 2vw, 2.5rem);
  font-size: var(--badge-fontsize);
  position: relative;
  display: block;
  text-transform: uppercase;
  font-weight: 500;
  white-space: nowrap;
}

.index__hero--badge::before{
  content: "";
  position: absolute;
  top: 
  50%;
  left: 3.5%;

  width: 9px !important;
  height: 9px !important;

  transform: translateY(-50%) !important;
  border-radius: 50% !important;

  background: var(--primary-accent-color);
  box-sizing: border-box !important;
}

/* Title & Text Wrapper */
.index__content--wrapper{
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Intro text */
.index__hero--title span:nth-child(1){
  display: block;
}

.index__hero--title em{
  color: var(--primary-accent-color);
  font-style: normal;
}

.index__hero--text{
  width: clamp(10rem, 37%, 35rem);
  line-height: var(--text-lh-spng)
}

/* cta buttons */
.index__hero--actions{
  display: flex;
  gap: clamp(.75rem, 1vw, 1.5rem);
  margin-bottom: var(--small-bottom-spng);
}

.index__hero--actions .button--primary{
  background: var(--primary-accent-color);
  color: var(--primary-text-color);
}

.index__hero--actions .button--secondary{
  border: var(--primary-border);
  color: var(--primary-text-color);
}

/* hero stats */
.index__hero--stats{
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 5vw;
}

.index__hero--stat h3{
  font-size: clamp(1.25rem, 2.5vw, 7rem);
}

.index__hero--stat p{
  color: var(--secondary-text-color);
  font-size: var(--container-SubText);
  text-wrap: nowrap;
}

.index__hero--stat span{
  color: var(--primary-accent-color);
}

.index__hero--stat h3 svg,
.index__hero--stat h3 svg path {
  fill: var(--primary-accent-color);
  width: clamp(1rem, 2vw, 2rem);
}

/* ===== About Section ===== */
.about{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: clamp(5rem, 7.5vw, 9.5rem);
  border-bottom: var(--primary-border);
}

/* About Intro */
.about__text{
  width: 95%;
  line-height: var(--text-lh-spng);
}

/* About List Content */
.about__list{
  display: flex;
  flex-direction: column;
  gap: var(--small-bottom-spng);
  margin: var(--mid-bottom-spng) 0;
}

.about__item{
  color: var(--secondary-text-color);
  font-size: var(--paragraph-fontsize);
  display: flex;
  flex-direction: row;
  gap: var(--list-gap);
}

.about__item svg,
.about__item svg path{
  stroke: var(--primary-accent-color);
}

.about__item svg {
  width: var(--svg__width-small);
}

/* About button */
.about__btn{
  background: var(--primary-accent-color);
  color: var(--primary-text-color);
}

/* About Image */
.about__image-wrapper{
  height: clamp(1rem, 30vw, 100rem);
  width: clamp(1rem, 30vw, 100rem);
  aspect-ratio: 1 / 1;
  position: relative;
  object-fit: contain;
}

.about__image-wrapper::before{
  content: "";
  position: absolute;
  border: var(--primary-accent-color) 2px solid;
  height: clamp(1rem, 30vw, 100rem);
  width: clamp(1rem, 30vw, 100rem);
  top: clamp(-1.5rem, -1.20vw, -.5rem);
  left: clamp(-1.5rem, -1.20vw, -.5rem); 
  border-radius: var(--main-br);
  z-index: 1;
}

.about__image-wrapper img{
  position: relative;
  object-fit: cover;
  height: 100%;
  width: 100%;
  z-index: 2;
  border-radius: 1px;
}

/* ===== SERVICES SECTION ===== */
.services{
  background-image: radial-gradient(#0F0F18 2px, transparent 0);
  background-size: 28px 28px;
  border-bottom: var(--primary-border);
  overflow: hidden;
}

.services__intro{
  display: flex;
  flex-direction: row;
  align-items: end;
  justify-content: space-between;
  margin-bottom: var(--mid-bottom-spng);
}

.services__title{
  width: 60%;
}

.services__btn-intro{
  border: var(--primary-border);
  color: var(--primary-text-color);
}

/* Services Grid */
.service__article{
  background: var(--secondary-color);
  border: var(--tertiary-border);
  padding: var(--card-padding_small);
  display: flex;
  flex-direction: column;
  align-content: start;
  justify-content: center;
  z-index: 1;
}

.services__grid{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: clamp(.7rem, 1vw, 1.3rem);
}

.service--large {
  grid-column: span 2;
}

.service--wide {
  grid-column: span 2;
}

/* --- Custom Container --- */
/* Services Large */
.service--large{
  display: flex;
  flex-direction: column;
  justify-content: start;
  padding: var(--card-padding_mid) !important;
  height: clamp(20rem, 25vw, 35rem);
  background-image:
    linear-gradient(rgba(10, 10, 15, 0.85), rgba(10, 10, 15, 0.85)),
    url("../images/car-engine.png");
  background-size: 100% 100%, 100%;
  background-position: center, center;
  background-repeat: no-repeat;
  overflow: hidden;
  position: relative;
}

.service--large p:first-child{
  margin-bottom: .85rem;
}

.service--large:hover{
  background-size: 100% 100%, 105%;
  filter: none !important;
}

.service--large h3{
  line-height: clamp(1.25rem, 3vw, 3.5rem);
  font-size: clamp(1.3rem, 2.15vw, 3rem);
  color: var(--primary-text-color);
  margin-bottom: var(--small-bottom-spng);
}

.article__text--large{
  color: var(--tertiary-text-color);
  line-height: var(--text-mid-lh-spng);
  font-size: clamp(.8rem, 1.1vw, 2rem);
  width: 65%;
  margin-bottom: clamp(.75rem, 1.2vw, 2rem);
}

/* Services Wide */
.service--wide{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: clamp(2rem, 2.75vw, 3.5rem);
}

.service--wide div > h4{
  font-size: clamp(1rem, 1.5vw, 1.75rem);;
}

.service__image--wrapper {
  width: clamp(5rem, 50vw, 55rem);
  aspect-ratio: 16 / 9;
  border-radius: var(--main-br);
  overflow: hidden;
}

.service__image--wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
  transition: all 300ms;
}

.service--wide:hover .service__image--wrapper img{
  filter: none;
}

/* Services Keuring */
.services--keuring{
  display: flex;
  flex-direction: column;
  justify-content: start; 
}

/* Services Contact CTA */
.services--cta{
  background: linear-gradient(135deg,rgba(30, 80, 255, 1) 0%, rgba(14, 63, 237, 1) 100%);
  position: relative;
  overflow: hidden;
  transform: none !important;
  filter: brightness(100%) !important;
}

.services--cta::after {
  content: "";
  display: block;
  position: absolute;
  width: clamp(7.5rem, 12.5vw, 11.25rem);
  height: clamp(5rem, 8.61vw, 7.75rem);
  color: var(--primary-accent-color);
  background-color: currentColor;
  mask-image:  
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.7848 0.449982C13.8239 0.449982 14.7167 1.16546 14.9122 2.15495L14.9991 2.59495C15.3408 4.32442 17.1859 5.35722 18.9016 4.7794L19.3383 4.63233C20.3199 4.30175 21.4054 4.69358 21.9249 5.56605L22.7097 6.88386C23.2293 7.75636 23.0365 8.86366 22.2504 9.52253L21.9008 9.81555C20.5267 10.9672 20.5267 13.0328 21.9008 14.1844L22.2504 14.4774C23.0365 15.1363 23.2293 16.2436 22.7097 17.1161L21.925 18.4339C21.4054 19.3064 20.3199 19.6982 19.3382 19.3676L18.9017 19.2205C17.1859 18.6426 15.3408 19.6754 14.9991 21.405L14.9122 21.845C14.7167 22.8345 13.8239 23.55 12.7848 23.55H11.2152C10.1761 23.55 9.28331 22.8345 9.08781 21.8451L9.00082 21.4048C8.65909 19.6754 6.81395 18.6426 5.09822 19.2205L4.66179 19.3675C3.68016 19.6982 2.59465 19.3063 2.07505 18.4338L1.2903 17.1161C0.770719 16.2436 0.963446 15.1363 1.74956 14.4774L2.09922 14.1844C3.47324 13.0327 3.47324 10.9672 2.09922 9.8156L1.74956 9.52254C0.963446 8.86366 0.77072 7.75638 1.2903 6.8839L2.07508 5.56608C2.59466 4.69359 3.68014 4.30176 4.66176 4.63236L5.09831 4.77939C6.81401 5.35722 8.65909 4.32449 9.00082 2.59506L9.0878 2.15487C9.28331 1.16542 10.176 0.449982 11.2152 0.449982H12.7848ZM12 15.3C13.8225 15.3 15.3 13.8225 15.3 12C15.3 10.1774 13.8225 8.69998 12 8.69998C10.1774 8.69998 8.69997 10.1774 8.69997 12C8.69997 13.8225 10.1774 15.3 12 15.3Z' fill='%23000'/%3E%3C/svg%3E"),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.7848 0.449982C13.8239 0.449982 14.7167 1.16546 14.9122 2.15495L14.9991 2.59495C15.3408 4.32442 17.1859 5.35722 18.9016 4.7794L19.3383 4.63233C20.3199 4.30175 21.4054 4.69358 21.9249 5.56605L22.7097 6.88386C23.2293 7.75636 23.0365 8.86366 22.2504 9.52253L21.9008 9.81555C20.5267 10.9672 20.5267 13.0328 21.9008 14.1844L22.2504 14.4774C23.0365 15.1363 23.2293 16.2436 22.7097 17.1161L21.925 18.4339C21.4054 19.3064 20.3199 19.6982 19.3382 19.3676L18.9017 19.2205C17.1859 18.6426 15.3408 19.6754 14.9991 21.405L14.9122 21.845C14.7167 22.8345 13.8239 23.55 12.7848 23.55H11.2152C10.1761 23.55 9.28331 22.8345 9.08781 21.8451L9.00082 21.4048C8.65909 19.6754 6.81395 18.6426 5.09822 19.2205L4.66179 19.3675C3.68016 19.6982 2.59465 19.3063 2.07505 18.4338L1.2903 17.1161C0.770719 16.2436 0.963446 15.1363 1.74956 14.4774L2.09922 14.1844C3.47324 13.0327 3.47324 10.9672 2.09922 9.8156L1.74956 9.52254C0.963446 8.86366 0.77072 7.75638 1.2903 6.8839L2.07508 5.56608C2.59466 4.69359 3.68014 4.30176 4.66176 4.63236L5.09831 4.77939C6.81401 5.35722 8.65909 4.32449 9.00082 2.59506L9.0878 2.15487C9.28331 1.16542 10.176 0.449982 11.2152 0.449982H12.7848ZM12 15.3C13.8225 15.3 15.3 13.8225 15.3 12C15.3 10.1774 13.8225 8.69998 12 8.69998C10.1774 8.69998 8.69997 10.1774 8.69997 12C8.69997 13.8225 10.1774 15.3 12 15.3Z' fill='%23000'/%3E%3C/svg%3E"); 
  bottom: clamp(10px, 1.04vw, 15px);
  right: clamp(-30px, -2.08vw, -20px);

  transform: rotate(25deg);
  mask-position:
    left bottom,
    right bottom;

  mask-size:
    clamp(50px, 5.56vw, 80px) clamp(50px, 5.56vw, 80px),
    clamp(50px, 5.56vw, 80px) clamp(50px, 5.56vw, 80px);

  mask-repeat: no-repeat;
  z-index: -1;
  transition: all 500ms;
}

.services--cta:hover::after{
  transform: rotate(45deg);
}

.services--cta h4{
  color: var(--primary-text-color);
  font-size: clamp(1rem, 1.4vw, 1.75rem);
}

.services--cta p{
  color: var(--tertiary-text-color);
  margin: clamp(.5rem, 1vw, 2rem) 0;
}

/* Container badge */
.services__badge{
  color: var(--primary-accent-color-1);
  font-size: var(--badge-fontsize_small);
  text-transform: uppercase;
}

/* --- Container Spacing --- */
.service__svg{
  margin-bottom: clamp(1.4rem, 1.7vw, 2rem);
}

.article__title{
  margin: clamp(.65rem, .75vw, 1.5rem) 0;
}

.article__text{
  margin-bottom: clamp(1.1rem, 1.3vw, 1.5rem);
  font-size: clamp(.8rem, 1vw, 2rem);

}

/* Container Ahref */
.services__action,
.services__action a,
.services__action svg path{
  display: flex;
  flex-direction: row;
  align-items: center;
  color: var(--primary-accent-color);
  stroke: var(--primary-accent-color);
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 600;
  font-size: var(--container-SubText);
  transition: var(--transition__mid);
  gap: var(--list-gap-small);
}

.services__action svg,
.services__action svg path{
  height: clamp(1.5rem, 2vw, 3rem);
}

.service__article:hover .services__action{
  gap: var(--list-gap);
}

/* Container Button */
.service__btn--first{
  background: var(--primary-accent-color);
  color: var(--primary-text-color);
}

.service__btn--secondary{
  color: var(--primary-text-color);
  border: var(--tertiary-border);
  padding: var(--tertiary-btn-padding);
}

.service__btn--third{
  background: var(--primary-text-color);
  color: var(--primary-accent-color);
}

/* Container SVG */
.service__svg{
  background: var(--primary-accent-color-trps);
  border: 1px solid rgba(30, 79, 255, 0.4);
  border-radius: var(--main-br);
  color: var(--primary-accent-color);
  height: clamp(2.75rem, 3.3vw, 4rem);
  width: fit-content;
  padding: clamp(.45rem, .7vw, 1rem);
}

/* ----- Services Grid Extra Styling ----- */
.service__article:nth-child(2),
.service__article:nth-child(3),
.service__article:nth-child(4),
.service__article:nth-child(5),
.service__article:nth-child(6){
  position: relative;
}

.service__article:nth-child(6){
  border-left: 4px solid var(--primary-accent-color);
}

.service__article:hover:nth-child(6){
  border-left: 4px solid rgba(30, 79, 255, 0.4);
}

.service__article:nth-child(2)::before,
.service__article:nth-child(3)::before,
.service__article:nth-child(4)::before,
.service__article:nth-child(5)::before,
.service__article:nth-child(6)::before{
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: clamp(3rem, 4.5vw, 7rem);
  height: clamp(3rem, 4.5vw, 7rem);
  border-top: 1px solid rgba(30, 79, 255, 0.4);
  border-right: 1px solid rgba(30, 79, 255, 0.4);
}

.service__article:hover{
  transform: translateY(-3px);
  border: 1px solid rgb(15, 38, 122);
  filter: brightness(120%);
}

.service__article{
  transition: 275ms all;
  filter: brightness(100%);
}

/* ----- Why Us Section ----- */
.why-us {
  display: grid;
  align-items: center;
  position: relative;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4.5vw, 6rem);
  border-bottom: var(--tertiary-border);
  overflow: hidden;
}

/* Left Side Title/Text */
.why-us__content{
  position: relative;
  z-index: 1;
}

/* Glow */
.global__glow {
	position: absolute;
	width: 1200px;
	height: 900px;
	background: radial-gradient(
		ellipse at center,
		rgba(30, 79, 255, 0.075),
		transparent 70%
	);
	filter: blur(50px);
	pointer-events: none;
	left: -450px;
	top: -450px;
	z-index: 0;
}

.why-us a{
  background: var(--primary-accent-color);
  color: var(--primary-text-color);
}

.why-us__content p:last-of-type{
  line-height: var(--text-lh-spng);
  margin-bottom: var(--mid-bottom-spng);
}

.why-us__cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 1.65vw, 2.5rem);
  z-index: 1;
}

.why-us__cards .card{
  background: #11111c;
  border: var(--tertiary-border);
  padding: var(--card-padding_small);
  transition: all 300ms;
}

.why-us__cards .card:hover{
  transform: translateY(-5px);
  border: 1px solid rgb(15, 38, 122);
}

.why-us__cards .card h2{
  color: var(--primary-accent-color-trps);
  font-size: clamp(2rem, 3vw, 4rem);
  font-weight: 900;
}

/* ----- Frequently Asked Questions ----- */
.faq{
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(2rem, 5.5vw, 7rem);
  border-bottom: var(--tertiary-border);
}

.faq p:nth-child(3){
  line-height: var(--text-lh-spng);
  margin-bottom: var(--mid-bottom-spng);
}

.faq a{
  background: var(--primary-accent-color);
  color: var(--primary-text-color);
}
.faq__item {
  border-bottom: 1px solid #1a1a20;
}

.faq__toggle {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 0;
  cursor: pointer;
  color: var(--primary-text-color);
  font-weight: 500;
  transition: all 200ms;
  font-size: clamp(1rem, 1vw, 1.35rem);
}

.faq__question:hover{
  color: var(--primary-accent-color);
}

.faq__icon {
  transition: transform 300ms ease;
  scale: 135%;
  color: var(--primary-accent-color);
}

/* Inhoud (vraag antwoord) */
.faq__answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 400ms cubic-bezier(.22, 1, .36, 1);
}

.faq__answer-inner {
  overflow: hidden;
  padding-bottom: 0;
  color: var(--secondary-text-color);
  font-size: var(--container-SubText);
  line-height: var(--text-mid-lh-spng);
  transition: all 400ms ease;
}


/* OPEN */
.faq__toggle:checked ~ .faq__answer {
  grid-template-rows: 1fr;
}
.faq__toggle:checked ~ .faq__question .faq__icon {
  transform: rotate(45deg);
}
.faq__toggle:checked ~ .faq__answer .faq__answer-inner {
  padding-bottom: 1.5rem;
}


/* ----- Contact Section ----- */
.contact{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 2.5vw, 4rem);
  background-image: radial-gradient(#0F0F18 2px, transparent 0);
  background-size: 28px 28px;
}

/* Table */
.contact__table--openingstijd {
  width: 100%;
  background: var(--secondary-color);
  border: var(--tertiary-border);
  border-collapse: separate;
  border-spacing: 0;
  margin-top: var(--mid-bottom-spng);
  border-radius: var(--main-br);
  border-radius: var(--main-br);
  overflow: hidden;
}

.contact__table--openingstijd tr:not(:last-child) td {
  border-bottom: var(--tertiary-border);
}

.contact__table--openingstijd tr:last-child {
  border-bottom: none;
}

.contact__table--openingstijd td {
  padding: clamp(.95rem, 1.1vw, 1.7rem) clamp(1.5rem, 2.2vw, 2.5rem);
}

.contact__table--openingstijd tr > td:first-child{
  color: var(--secondary-text-color);
  font-size: var(--container-SubText);
}

.contact__table--openingstijd tr > td:last-child{
  color: var(--primary-text-color);
  font-size: var(--container-SubText);
  font-weight: 700;
}

.contact__table--openingstijd td:last-child {
  text-align: right;
}

/* Gesloten */
.contact__table--openingstijd .gesloten {
  color: red;
}

/* Vandaag Row */
.contact__table--openingstijd tr.vandaag {
  background-color: var(--primary-accent-color-trps);
}

.contact__table--openingstijd tr.vandaag > td:first-child{
  color: var(--primary-text-color);
  font-weight: 600;
}

/* --- Contact Info --- */
.contact__info{
  background: var(--secondary-color);
  border: var(--tertiary-border);
  padding: var(--card-padding_mid);
  border-radius: var(--main-br);
}

.contact__info h3:first-of-type{
  font-size: var(--h3-font-size);
  color: var(--primary-text-color);
  font-weight: 900;
}

/* Container Item Wrapper */
.contact__wrapper{
  margin-top: var(--mid-bottom-spng);
  display: flex;
  flex-direction: column;
  gap: clamp(1.2rem, 1.5vw, 2rem);
}

.contact__item{
  display: flex;
  flex-direction: row;
  align-content: center;
  gap: var(--list-gap);
}

.contact__info div > svg{
  color: var(--primary-accent-color);
  height: clamp(.9rem, 1.2vw, 2rem);
}

.contact__item:last-of-type > svg {
  height: clamp(1rem, 1.5vw, 2rem);
}

.contact__info div > p{
  color: var(--primary-text-color);
  font-size: var(--container-SubText);
  font-weight: 600;
}

.contact__info div > a,
.contact__info div > span{
  color: var(--secondary-text-color);
  font-size: var(--container-SubText);
  background: none !important;
  text-decoration: none;
  transition: var(--transition__mid);
}

.contact__info div > a:hover{
  color: var(--primary-text-color);
}

.contact__info a{
  background: var(--primary-accent-color);
  color: var(--primary-text-color);
  width: 100% !important;
  margin-top: var(--mid-bottom-spng);
  transition: var(--transition__mid);
}

.contact__info a:hover{
  transform: translateY(-2px);
  background: var(--primary-accent-color-1);
}

/* ----- Global Hovers ----- */
/* Blue */
.index__hero--actions .button--primary,
.about__btn,
.service__btn--first,
.why-us__content .global__btn,
.faq > div .global__btn,
/* White */
.service__btn--third,
/* Transparant */
.index__hero--actions .button--secondary,
.services__btn-intro,
.service__btn--secondary{
  transition: var(--transition__mid);
}

/* Hover Blue */
.index__hero--actions .button--primary:hover,
.about__btn:hover,
.service__btn--first:hover,
.why-us__content .global__btn:hover,
.faq > div .global__btn:hover{
  transform: translateY(-2px);
  background: var(--primary-accent-color-1);
}

/* Hover Transparant */
.index__hero--actions .button--secondary:hover,
.services__btn-intro:hover,
.service__btn--secondary:hover{
  border: var(--quaternary-border);
}

/* Hover White */
.service__btn--third:hover{
  background: var(--tertiary-accent-color-1);
}

/* ----- Media Query ----- */
/* Ipad */
@media (min-width: 768px) and (max-width: 1024px) {

  /* ----- Services ----- */
  .services__intro {
    flex-direction: row;
    justify-content: space-between;
  }

  .services__grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1rem;
  }

  .service--large{
    height: clamp(17rem, 27vh, 45rem) !important;
  }

  /* 2 — APK Keuring: LINKS */
  .services__grid > .services--keuring {
    grid-column: 1 !important;
  }

  /* 3 — Diagnose & Elektronica: RECHTS */
  .services__grid > .service__article:nth-child(3) {
    grid-column: 2 !important;
  }

  /* 4 — Schade Reparatie: VOLLEDIGE BREEDTE */
  .services__grid > .service--wide {
    grid-column: 1 / -1 !important;
  }

  /* 5 — Airco Service: LINKS */
  .services__grid > .service__article:nth-child(5) {
    grid-column: 1 !important;
  }

  /* 6 — Banden & Uitlijning: RECHTS */
  .services__grid > .service__article:nth-child(6) {
    grid-column: 2 !important;
  }

  /* 7 — CTA: VOLLEDIGE BREEDTE */
  .services__grid > .services--cta {
    grid-column: 1 / -1 !important;
  }

  /* ----- Why Us ----- */
  .why-us{
    display: flex;
    flex-direction: column;
  }
}

/* Phone */
@media (max-width: 767px) {
  .index__hero{
      background-image:
    linear-gradient(
      to bottom,
      rgba(10, 10, 15, 1) 0%,
      rgba(10, 10, 15, 0.8) 45%,
      rgba(10, 10, 15, 0.8) 70%,
      rgba(10, 10, 15, 0.8) 90%,
      rgba(10, 10, 15, 1) 100%
    ),
    url("../images/output-image2.png");
  }
  /* ----- Hero ----- */
  .index__hero{
    align-items: center;
  }

  .index__hero--title {
    white-space: normal !important;
    text-align: center;
  }

  .index__hero--title > span:first-child,
  .index__hero--title > span:nth-child(2) {
    display: inline !important;
    white-space: nowrap !important;
  }

  .index__hero--title em {
    display: block !important;
    font-style: normal !important;
  }

  .index__hero--text{
    width: 100%;
    text-align: center;
  }

  .index__hero--stats{
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10vw;
    align-content: center !important;
  }

  .index__hero--stat{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  /* ----- About us ----- */
  .about{
    display: flex;
    justify-items: center !important;
  }

  .about__image-wrapper{
    display: none;
  }

  .about__text{
    width: 100%;
  }

  /* ----- Services ----- */
  .services__intro {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    box-sizing: border-box;
  }

  .services__title {
    width: 80%;
    box-sizing: border-box;
  }

  .services__grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    gap: 1.25rem;
  }

  /* Elk vak apart onder elkaar */
  .services__grid > * {
    grid-column: 1 / -1 !important;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  /* ----- Services mobile fix ----- */
  .service--large {
    height: auto !important;
    min-height: 0 !important;
    box-sizing: border-box;
  }

  .service--large p{
    width: 100%;
  }

  .service--wide{
    flex-direction: column;
    align-items: start;
  }

  .service__image--wrapper{
    width: clamp(5rem, 100%, 20rem);
  }

  .service--wide .services__badge{
    white-space: nowrap;
  }

  .service__article {
    box-sizing: border-box;
  }

  /*  */
  .header{
    background-image: none  !important;
  }

  /* ----- Why Us ----- */
  .why-us {
    grid-template-columns: 1fr !important;
    box-sizing: border-box;
  }

  .why-us h2{
    width: 100%;
  }

  .why-us__cards {
    width: 100% !important;
    display: flex;
    flex-direction: column;
    justify-content: center !important;
    box-sizing: border-box;
  }

  /* ----- Frequently Asked Questions ----- */
  .faq{
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  /* ----- Openingstijden ----- */
  .contact{
    display: grid;
    grid-template-columns: 1fr !important;
  }
}