body {
    font-family: 'Montserrat', sans-serif;
    background: #0b0b0b;
    color: white;
	margin: 0;
	width:100%;
    max-width:100%;
    overflow-x:hidden;
}
.reviews-track {
  display: flex;
  transition: transform 0.4s ease;
}
.home-cars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-top: 20px;
}
/* standaard verborgen op desktop */
.mobile-contact-top{
    display:none;
}
.services-mobile {
  display: none;
}
.mobile-menu-overlay{
    display:none;
}
.mobile-menu-social{
    display:none;
}
.mobile-home-cards{
    display:none;
}
.mobile-services-grid{
    display:none;
}
.mobile-header-layout {
    display:none;
}
.mobile-toggle {
    display:none;
}
.results-count {
    display:none;
}
.mobile-filter-bar {
    display:none;
}
.filter-popup {
    display:none;
}

/* card styling */
.car-card-mini {
    background: rgb(17 13 15);
	border: solid 1px rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    overflow: hidden;
    padding-bottom: 15px;
    transition: 0.3s;
	text-decoration: none;
	color: #fff;
}
.cta-center {
    margin-top: 35px;
    text-align: center;
}
.footer-links{
    font-size: 13px;
}

.car-card-mini:hover {
    transform: translateY(-5px);
}
.spec-groups {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin: 30px 0;
    flex-wrap: wrap;
	
}

.spec-group {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgb(17 13 15);
    padding: 12px 18px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.05);
    transition: 0.3s;
}

.spec-group:hover {
    border-color: rgba(255,42,42,0.5);
    transform: translateY(-2px);
}

/* icon */
.spec-group svg {
    color: #ff2a2a;
    width: 20px;
    height: 20px;
}

/* tekst */
.spec-group .label {
    display: block;
    font-size: 11px;
    color: #888;
}

.spec-group .values {
    color: #ccc;
}
/* image */
.car-card-mini img {
    width: 100%;
    object-fit: cover;
}

/* tekst */
.car-card-mini h4 {
    font-size: 16px;
    margin: 10px 15px 5px;
}

.car-card-mini p {
    margin: 0 15px;
    color: #ff2a2a;
    font-weight: bold;
}
.review-slide {
  min-width: 100%;
  padding: 30px;
  box-sizing: border-box;
  text-align: center;

  background: rgb(17 13 15);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
}

.review-stars {
  color: #ff3b3b;
  margin-bottom: 10px;
}
.review-card {
    max-width: 900px;
    margin: auto;
}

.review-slide strong {
  display: block;
  margin-bottom: 10px;
  color: #fff;
}
.reviews-slider {
  position: relative;
  padding: 20px 0 20px 0;
  overflow: hidden;
  transition: height 0.3s ease;
}
/* tekst */
.review-text {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.section-header {
	text-align: center;
}

.section-header h2 {
    font-size: 42px;
    opacity: 0.8;
}
.section-header span {
    color: #ff2a2a;
}

.section-header h3 {
    font-size: 38px;
    margin-top: 10px;
}
.review-text.expanded {
  -webkit-line-clamp: unset;
  overflow: visible;
}
.reviews-title {
}

.read-more3 {
  display: none;
  text-align: center;
  margin-top: 10px;
  color: #ff3b3b;
  cursor: pointer;
}
.read-more3:hover {
  text-decoration: underline;
}  

/* pijltjes */
.nav3 {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.0);
  border: none;
  color: white;
  font-size: 24px;
  padding: 8px 12px;
  cursor: pointer;
}

.prev3 { left: 1px; }
.next3 { right: 1px; }

/* dots */
.dots3 {
  text-align: center;
  margin-top: 2px;
}

.dots3 span {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: 0 4px;
  background: #555;
  border-radius: 50%;
  cursor: pointer;
}

.dots3 .active {
  background: #ff3b3b;
}
.container3{
    position:relative;
    z-index:2;

    width:100%;
    max-width:1300px;
    margin:auto;
}
.section-header span {
    color: #ff2a2a;
}
.aanbod-highlight{
    border-radius:20px;
	padding: 20px 40px 40px 40px;
}

.aanbod-highlight h3 {
    font-size: 32px;
    margin-bottom: 20px;
}
.stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 40px 0;
    text-align: center;
}

.stats p {
    font-size: 13px;
    opacity: 0.6;
}

.stats strong {
    font-size: 18px;
}
/* GRID */
.info-grid3 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.info-card3 {
    background: linear-gradient(145deg,#111,#1b1b1b);
    padding: 40px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.05);
}
.reviews-box {
    margin-top: 30px;
    text-align: center;
}

.reviews-box h3 {
    margin-bottom: 30px;
    font-size: 28px;
}
/* BUTTONS */
.btn3 {
    display: inline-block;
    padding: 12px 20px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
}

.btn3.primary {
    background: #ff2a2a;
    color: white;
}

.btn3.outline {
    border: 1px solid #ff2a2a;
    color: #ff2a2a;
}
/* CTA */
.cta3-banner {
    background: #0a0a0a;
    padding: 30px 0;
    border-bottom: solid 1px rgba(255, 255, 255, 0.08);
	border-top: solid 1px rgba(255, 255, 255, 0.08);
}

.cta3-inner {
    max-width: 1350px;
    margin: 0 auto;
    border-radius: 18px;
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 20px;
    align-items: center;
}
.cta3-bottom {
    display: flex;
    align-items: center;
    gap: 35px;
    flex-wrap: wrap;
}

.cta3-bottom h2 {
    font-size: 44px;
    line-height: 0.95;
    font-weight: 900;
    margin: 0;
    text-transform: uppercase;
    color: #fff;
    min-width: 420px;
}

.cta3-bottom h2 span {
    color: #ff2a2a;
}

.cta3-bottom p {
    max-width: 280px;
    color: #d0d0d0;
    font-size: 17px;
    line-height: 1.6;
    margin: 0;
}

.cta3-bottom .btn3 {
    min-width: 155px;
    justify-content: center;
}

.about-section{
    position:relative;
    padding:10px 0 60px 0;
    overflow:hidden;
}
.about-section2{
    position:relative;
    padding:10px 0 60px 0;
    overflow:hidden;
}

.about-section::before{
    content:"";
    position:absolute;
    inset:0;
    background:url('/images/background.png') center/cover no-repeat;
    opacity:1;
    z-index:-1;
	pointer-events:none;
}
.about-section2::before{
    content:"";
    position:absolute;
    inset:0;
    background: linear-gradient(to right, #000, #111);
    opacity:1;
    z-index:-1;
	pointer-events:none;
}
.occasies-section{
    position: relative;
    overflow: hidden;
}

.occasies-section::before{
    content:"";
    position:fixed;
    inset:0;
    background:url('/images/background.png') center/cover no-repeat;
    opacity:1;
    z-index:-1;
}
.legal7 {
  padding: 60px 20px;
}
.content7 {
 display: flex;
    flex-direction: column;
    align-items: stretch;
}
.container7 {
    max-width: 1200px;
    margin: 40px auto 40px auto;
    background: #0a0a0a;
    border-radius: 6px;
    padding: 30px 150px;
    border: solid 1px rgba(255, 255, 255, 0.08);
}

.title7 {
  text-align: center;
  color: #ff2a2a;
  margin-bottom: 40px;
  font-size: 28px;
}

.content7 h2 {
  margin-top: 30px;
  color: #fff;
  font-size: 18px;
}

.content7 p {
  margin-top: 10px;
  color: #ccc;
  font-size: 14px;
}

/* 📱 Mobile optimalisatie */
@media (max-width: 768px) {
  .title7 {
    font-size: 22px;
  }
  
  .container7 {
    padding: 30px 20px;
}
  .content7 h2 {
    font-size: 16px;
  }

  .content7 p {
    font-size: 13px;
  }
}
.occasies-section .container{
    position:relative;
    z-index:2;
}
.about-section::after{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.15);
    z-index:-1;
}
.about-section2::after{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.15);
    z-index:-1;
}

.about-section .container4{
    position:relative;
    z-index:2;
}

.container4 {
    width: 90%;
    max-width: 1300px;
    margin: auto;
}
.cta3-inner h2 span {
    color: #ff2a2a;
}
.about-combined-card {
    padding: 36px;

    display: grid;
    grid-template-columns: 1fr 0.95fr;
    gap: 28px;

}
.about-combined-card h3 span {
    color: #ff2a2a;
}
.about-combined-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.about-combined-left h3,
.about-combined-right h3 {
    font-size: 42px;
    line-height: 0.95;
    font-weight: 900;
    margin: 0 0 22px;
    color: #fff;
    text-transform: uppercase;
}
.about-combined-left .btn3 {
    width: fit-content;
}

.about-combined-left ul {
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
}

.about-combined-left li {
    color: #fff;
    font-size: 16px;
    margin-bottom: 16px;
    line-height: 1.35;
    position: relative;
    padding-left: 24px;
}

.about-combined-left li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: #ff2a2a;
    font-weight: 700;
}

.workshop-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.workshop-grid img {
    width: 100%;
    border-radius: 12px;
    object-fit: cover;
    display: block;
}

.workshop-grid img:first-child {
    grid-column: span 2;
    height: 210px;
}

.workshop-grid img:nth-child(2),
.workshop-grid img:nth-child(3) {
    height: 132px;
}

.about-combined-right p {
    margin-top: 15px;
    color: #aaa;
}

.gallery-note {
    margin-top: 18px;
    color: #aaa;
    font-size: 14px;
}
.home-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    grid-template-rows: 400px 300px;
    gap: 20px;
    padding: 40px;
    background: #000;
}
.home-grid h2 {
    color: white;
    font-size: 22px;
    margin-bottom: 10px;
}

.overlay-box h3 {
    font-size: 20px;
    margin-bottom: 10px;
}

.overlay-box ul {
    padding-left: 0;
    list-style: none;
}

.overlay-box li {
    margin-bottom: 8px;
    color: #ccc;
}
.big-image {
    background: url('/images/garage1.jpg') center/cover no-repeat;
}

.over {
    background: url('/images/garage2.jpg') center/cover no-repeat;
    position: relative;
}

.werkplaats {
    background: url('/images/garage3.jpg') center/cover no-repeat;
    position: relative;
}
.aanbod {
    background: #0b0b0b;
    padding: 30px;
}

.cars {
    display: flex;
    gap: 20px;
    margin: 20px 0;
}
.car-card2 {
    background: #111;
    border-radius: 10px;
    overflow: hidden;
    width: 100%;
}

.car-card2 img {
    width: 100%;
    height: 120px;
    object-fit: cover;
}

.car-card2 .info {
    padding: 15px;
}

.car-card2 .price {
    color: #ff2a2a;
    font-weight: 700;
}
.overlay-box {
    position: absolute;
    bottom: 20px;
    left: 20px;

    background: rgba(0,0,0,0.8);
    padding: 25px;
    max-width: 320px;

    border-left: 2px solid #ff2a2a;
}
.overlay-box.right {
    right: 20px;
    left: auto;
}
.footer {
    background: #050505;
    color: #fff;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 60px;
    padding-bottom: 60px;
}

.footer-col h4 {
    color: #ff2a2a;
    font-size: 15px;
    margin-bottom: 20px;
    letter-spacing: 1px;
}

.logo {
    font-size: 34px;
    font-weight: 800;
}

.footer-brand p {
    color: #b8b8b8;
    line-height: 1.8;
    max-width: 420px;
}

/* LINKS */
.footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer li {
    margin-bottom: 14px;
}

.footer a {
    color: #ddd;
    text-decoration: none;
    transition: 0.2s ease;
}

.footer a:hover {
    color: #ff2a2a;
}

/* SOCIALS */
.socials {
    display: flex;
    gap: 12px;
    margin-top: 25px;
}

.socials a {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #111;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.socials a:hover {
    background: #ff2a2a;
    color: white;
}

/* CONTACT */
.contact li {
    color: #ddd;
}

.hours-title {
    margin-top: 35px;
}

.hours {
    color: #b8b8b8;
    line-height: 1.7;
}

/* BOTTOM */
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.05);
    padding: 22px 0;
}

.bottom-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.bottom-inner p {
    color: #777;
    margin: 0;
}

.links {
    display: flex;
    gap: 30px;
}

.links a {
    color: #777;
    font-size: 14px;
}

.links a:hover {
    color: #ff2a2a;
}

/* CONTACT */
.contact li {
    line-height: 1.6;
}
.aanbod-section{
    position: relative;
    display: flex;
    align-items: center;

    overflow: hidden;
}
.aanbod-section::before{
    content:"";
    position: fixed;
	min-height: calc(100vh - 80px);
    inset:0;
	padding: 0;
    overflow: hidden;
    background: url('/images/background.png') center/cover no-repeat;
    z-index:0;
}
/* extra diepte */
.aanbod-section::after{
    content:"";
    position:absolute;
    inset:0;
    background: rgba(0,0,0,.15);
    z-index:-1;
}
/* BOTTOM */
.footer-bottom {
    margin-top: 40px;
    border-top: 1px solid rgba(255,255,255,0.05);
    padding: 20px 0;
}

.bottom-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-bottom p {
    font-size: 13px;
    color: #777;
}

.footer-bottom .links a {
    margin-left: 20px;
    color: #777;
    text-decoration: none;
    font-size: 13px;
}

.footer-bottom .links a:hover {
    color: #ff2a2a;
}
/* HEADER */
header {
position: sticky;
top: 0;
z-index: 9999;
background: rgba(0,0,0,0.85);
backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(255,0,0,0.3);
transition: all 0.3s ease;
padding: 18px 0;
}
/* CONTAINER */
.container2 {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
/* LOGO */
.logo{
font-size:26px;
font-weight:700;
letter-spacing:1px;
line-height: 1;
}

.logo .g {
    color: #ff2a2a;
    font-weight: 700;
}

.logo .sub {
    font-size: 9px;
    color: #888;
    margin-top: 4px;
    letter-spacing: 1.5px;
}
/* NAV */
.nav {
    display: flex;
    align-items: center;
}

.nav a {
    margin: 0 18px;
    text-decoration: none;
    color: #bbb;
    font-size: 13px;
    font-weight: 500;
    position: relative;
    transition: 0.3s;
}

.nav a:hover {
    color: white;
}

.nav a.active {
    color: white;
}

.nav a.active::after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100%;
    height: 2px;
    background: #e10600;
}
/* CTA BUTTON */
.cta-btn {
    background: linear-gradient(90deg, #e10600, #ff2a2a);
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    border-radius: 4px;
    letter-spacing: 0.5px;
    transition: 0.3s;
}

.cta-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 15px rgba(225,6,0,0.3);
}
/* HERO */
.hero2 {
    height: calc(100vh - 75px - 240px); 
    position: relative;
    display: flex;
    background: url('/images/hero-image.jpg') center/cover no-repeat;
	align-items: center;
}

/* LAYOUT */
.hero2-inner {
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 40px;

    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    align-items: center;
	
	z-index: 2;
}
.hero2-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;

    background: rgba(0, 0, 0, 0.5);
}
/* LEFT */
.hero2-left {
	margin-top: -150px;
	max-width: 800px;
}
.hero2-left h1 {
    font-size: 60px;
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -1px;
}
.hero2-bottom-icon img {
    width: 70px;
    height: 70px;
    object-fit: contain;
}
.hero2-left h1 span {
}
.hero2-content {
    position: relative;
    z-index: 2;
    padding-left: 80px; /* 🔥 meer naar links */
}

.hero2-left p {
    font-size: 16px;
    color: rgba(255,255,255,0.75);
    margin-bottom: 25px;
}
.hero2-title span {
    display: block;
}
.hero2-title {
    font-size: 72px;
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -1px;
    margin-bottom: 20px;
	text-shadow: 0 5px 20px rgba(0,0,0,0.6);
}

.hero2-title .red {
    color: #ff2a2a;
}
.hero2-bottom {
    height: 240px;
    background: #0a0a0a;
    display: flex;
    align-items: center;
	border-top: solid 1px rgba(255, 255, 255, 0.08);
    border-bottom: solid 1px rgba(255, 255, 255, 0.08);
}
.hero2-bottom-inner {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 40px; 
    
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
}
.hero2-bottom-item {
    position: relative;
	text-align: center;
    padding: 20px;
}
.hero2-bottom-icon {
    width: 70px;
    height: 70px;

    margin: 0 auto 15px;

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

    border-radius: 50%;
    border: 2px solid rgba(255,0,0,0.6);

    box-shadow:
        0 0 20px rgba(255,0,0,0.5),
        inset 0 0 15px rgba(255,0,0,0.25);
}
.hero2-bottom-icon svg {
    width: 28px;
    height: 28px;

    stroke: #ff2a2a;
    stroke-width: 2.2;
}
.hero2-bottom-item h4 {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 5px;
}

.hero2-bottom-item p {
    font-size: 12px;
    color: #aaa;
}
.hero2-bottom-item:not(:last-child)::after {
    content: "";
    position: absolute;
    right: -20px;
    top: 50%;
    width: 1px;
    height: 60px;
    background: rgba(255,255,255,0.08);
}
/* BUTTONS */
.hero2-buttons {
    display: flex;
    gap: 15px;
    margin-top: 25px;
}
.btn2.primary {
    background: linear-gradient(90deg, #e10600, #ff2a2a);
    color: white;
    padding: 14px 26px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.btn2.secondary {
    background: rgba(255,255,255,0.05);
    color: white;
    padding: 14px 26px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    border: 1px solid rgba(255,255,255,0.2);
}
.btn2.secondary:hover {
    border-color: #ff2a2a;
}

/* FEATURES */
.hero2-features {
    display: flex;
    gap: 25px;
    font-size: 13px;
    color: rgba(255,255,255,0.7);
}

.hero2-features span {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hero2-features span::before {
    content: "✔";
    color: #ff2a2a;
    font-size: 12px;
}
.hero2-card-wrapper {
    position: absolute;
    right: 0; 
    z-index: 2;
}
.highlight {
    color: #ff2a2a;
}
.hero2-card {
    background: rgba(10,10,10,0.85);
    padding: 30px;
    border-radius: 6px 0px 0px 6px;
    backdrop-filter: blur(10px);

    border: 1px solid rgba(255,255,255,0.08);
}
.hero2-card h3 {
    margin: 0;
    font-size: 22px;
}

.hero2-card p {
    margin: 2px 0;
    color: #ddd;
}

.hero2-card small {
    color: #777;
    font-size: 12px;
}
.hero2-card-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 20px 0;
    position: relative;
}
.hero2-card-item .icon {
    display: flex;
    align-items: center;
    justify-content: center;
	color: #ff2a2a;
    width: 28px;
    height: 28px;
}

/* horizontale divider */
.hero2-card-item:not(:last-child) {
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* rode lijn links */
.hero2-card-item .line {
    width: 2px;
    height: 100%;
    background: #ff2a2a;
    position: absolute;
    left: -10px;
    top: 0;
}
/* RECHTS */
.hero2-right {
    position: absolute;
    right: 0px;
    top: 50%;
    transform: translateY(-50%);
	width: 320px;
}
.hero2-features {
    display: flex;
    gap: 20px;
    margin-top: 15px;
    font-size: 13px;
    color: #aaa;
}
/* INFO ITEMS */
.hero2-info-item {
    display: flex;
    gap: 15px;
    align-items: flex-start;
    margin-bottom: 20px;
}
.hero2-icon {
    font-size: 18px;
    color: #ff2a2a;
    width: 30px;
}

.hero2-info-item:last-child {
    margin-bottom: 0;
}
.gallery-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.95);
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.gallery-modal img {
    max-width: 90%;
    max-height: 85%;
    object-fit: contain;
}
/* ===== LAYOUT ===== */

.detail-wrapper {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 30px;
    max-width: 1300px;
    margin: auto;
    padding: 40px;
}

/* ===== LINKS ===== */

.main-image img {
    width: 100%;
    border-radius: 12px;
}
/* ===== RECHTS ===== */

.detail-right {
    background: #111;
    padding: 20px;
    border-radius: 12px;

    box-shadow:
        0 0 10px rgba(255,0,0,0.3),
        0 0 30px rgba(255,0,0,0.2);
}

.price {
    font-size: 26px;
    color: #ff2a2a;
    margin: 10px 0;
}

/* ===== SPEC GRID ===== */

.spec-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-top: 20px;
}

.spec-grid div {
    background: #0c0c0c;
    padding: 10px;
    border-radius: 8px;
}

.spec-grid span {
    font-size: 12px;
    color: #888;
}

.spec-grid strong {
    display: block;
    margin-top: 5px;
}

/* ===== BUTTON ===== */
.g-recaptcha {
  display: flex;
  justify-content: center;
  margin: 20px 0;
  transform: scale(0.95);
  transform-origin: center;
}
.btn-chat {
    width: 100%;
    padding: 12px;
    margin-top: 15px;
    background: #ff2a2a;
    border: none;
    border-radius: 8px;
    color: white;
    font-weight: bold;
    cursor: pointer;
}
.close-modal {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 30px;
    color: white;
    cursor: pointer;
}

.gallery-prev,
.gallery-next {
    position: absolute;
    top: 50%;
    font-size: 40px;
    color: white;
    background: none;
    border: none;
    cursor: pointer;
}

.gallery-prev { left: 30px; }
.gallery-next { right: 30px; }
/* 🔥 HERO */
.hero {
    height: 300px;
     background: #0b0b0c;
    position: relative;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.6);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.hero h1 {
    font-size: 40px;
    margin: 0;
}

.hero p {
    color: #aaa;
}

/* CONTAINER */
.container {
    max-width: 1200px;
    margin: auto;
    padding: 20px 20px;
}

/* LIST */
.car-list {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

/* CARD */
.car-card {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 25px;
    background: #0a0a0a;
    border-radius: 6px;
    padding: 18px;
    border: solid 1px rgba(255, 255, 255, 0.08);
    transition: all 0.3s ease;
}

/* SLIDER */
.carousel {
    position: relative;
    height: 240px;
    overflow: hidden;
}

/* BACK */
.back-btn {
    display:inline-flex;
    align-items:center;
    gap:8px;
	margin:20px 0 15px 0;
}
.back-btn:hover { color:white; }

/* TOP */
.top {
    max-width:1200px;
    margin:auto;
    display:grid;
    grid-template-columns:3fr 2fr;
    gap:30px;
}

/* GALLERY */
.gallery-wrapper {
    display:flex;
    flex-direction:column;
    gap:10px;
}
.gallery {
    position: relative;
    background: #111;
    border-radius: 6px;
    overflow: hidden;
    aspect-ratio: 16 / 10;
	box-shadow: 
        0 10px 40px rgba(0,0,0,0.8),
        inset 0 0 40px rgba(0,0,0,0.3);
}

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

.gallery-arrow {
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    background:rgba(0,0,0,0.6);
    border:none;
    color:white;
    font-size:22px;
    padding:10px;
    cursor:pointer;
    border-radius:50%;
}

.left { left:10px; }
.right { right:10px; }
/* GROTER */
.btn.big {
    padding:14px;
    font-size:15px;
}

/* ⚫ SECONDARY */
.btn.secondary {
    background:#181818;
    color:#ddd;
    border:1px solid rgba(255,255,255,0.08);
    flex:1;
}

.btn.secondary:hover {
    background:#222;
}

/* 🤍 GHOST */
.btn.ghost {
background: #0a0a0a;
    border:1px solid rgba(255,0,0,0.2);

    border-radius:8px;

    color:#ddd;
    font-size:14px;
    text-decoration:none;
}

.btn.ghost:hover {
    color:white;
    border-color:#ff2a2a;
}
.thumbs {
    display:flex;
    gap:8px;
    margin-top:10px;
	align-self: center;
}

.thumbs img {
    width:70px;
    height:50px;
    object-fit:cover;
    border-radius:6px;
    cursor:pointer;
	transition:0.2s;
    opacity:0.7;
}

.thumbs img:hover { 
    transform:scale(1.05);
	opacity:1; 
	}
.thumbs img.active {
    border:2px solid #ff2a2a;
    opacity:1;
}

/* SIDE */
.side h2 {
    font-size:24px;
    margin-bottom:5px;
}
.side {
    background: #0a0a0a;
    border-radius:6px;
    padding:25px;

    border: solid 1px rgba(255, 255, 255, 0.08);
}
.side .btn {
    margin-top:12px;
}

.btn.primary {
    background: linear-gradient(135deg, #ff2a2a, #ff4d4d);
    color:white;
    box-shadow: 0 8px 25px rgba(255,42,42,0.4);
}

.btn.primary:hover {
    transform:translateY(-2px);
    box-shadow: 0 12px 30px rgba(255,42,42,0.6);
}
.price {
    color:#ff2a2a;
    font-size:28px;
    margin:10px 0;
    font-size:32px;
    font-weight:bold;
    letter-spacing:1px;	
}

/* BUTTONS */
.btn {
    display:block;
    padding:12px;
    margin-top:10px;
    text-align:center;
    border-radius:8px;
    text-decoration:none;
    font-weight:bold;
    transition:0.2s;
}
.btn:hover { transform:scale(1.03); }

.btn-main { background:#ff2a2a; color:white; }
.btn-whatsapp { background:#25D366; color:white; }

/* BIDS */
.bids {
    margin-top: 20px;
    padding: 0px 15px 15px 15px;
    border-radius: 6px;
   background: #0a0a0a;
    border: 1px solid rgba(255,255,255,0.0);
	text-align: center;
}

/* titel */
.bids h3 {
    margin-bottom: 10px;
	text-align: center;

}

.bid-count {
    font-weight:600;
    margin-bottom:5px;
    text-align:center;
}

.highest-bid {
    color:#ff2a2a;
    font-weight:bold;
    text-align:center;
}

.no-bids {
    color:#888;
	text-align:center;
}

.bid-btn {
    display:block;
    margin-top:10px;
    text-align:center;
    background:#ff2a2a;
    color:white;
    padding:10px;
    border-radius:6px;
    text-decoration:none;
}
/* TABS */
.tabs {
    max-width:1200px;
    margin:30px auto;
}

/* container */
.tab-buttons {
    display: flex;
	backdrop-filter: blur(6px);
    gap: 25px;
}

/* buttons reset */
.tab-buttons button {
    background: none;
    border: none;
    color: #777;
    font-size: 15px;
    padding: 10px 0;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
}
/* hover */
.tab-buttons button:hover {
    color: #fff;
}

/* active */
.tab-buttons button.active {
    color: #fff;
}

/* underline effect */
.tab-buttons button.active::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 2px;
    background: #ff2a2a;
    border-radius: 2px;
}

/* subtle glow */
.tab-buttons button.active {
    text-shadow: 0 0 10px rgba(255,0,0,0.3);
}
/* wrapper */
.tabs-wrapper {
    margin-top: 30px;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    padding: 0px 0px 0px 30px;
    border-radius: 6px;
    background: #0a0a0a;
    border: solid 1px rgba(255, 255, 255, 0.08);
}
.tab-content {
    display:none;
    background:#111;;
    border-radius:10px;
    margin-top:10px;
}

/* OVERVIEW */
.overview-grid {
    display:grid;
    grid-template-columns: repeat(5,1fr);
    gap:15px;
}

.overview-item {
    background:#0c0c0c;
    padding:15px;
    border-radius:10px;
    text-align:center;
}

.overview-item span {
    font-size:12px;
    color:#888;
}

/* TECH */
.spec-grid {
    display:grid;
    grid-template-columns: repeat(3,1fr);
    gap:15px;
}

.spec-grid div {
    background:#0c0c0c;
    padding:15px;
    border-radius:10px;
}

/* DESCRIPTION */
.description-box {
    padding: 20px 20px 20px 20px;
    border-radius:10px;
    line-height:1.6;
}
.options-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px 25px;
}

.option-item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #ddd;
    font-size: 14px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(233,233,233,0.10);
}
.description-container {
    background: #0a0a0a;
    border-radius: 6px;
    padding: 10px 30px 30px 30px;
    border: 1px solid rgba(255,255,255,0.05);
    box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
.description-container h3 {
    margin-bottom: 15px;
    font-size: 18px;
    border-left: 3px solid #ff2a2a;
    padding-left: 10px;
}
.options-container h3 {
    margin-bottom: 15px;
    font-size: 18px;
    border-left: 3px solid #ff2a2a;
    padding-left: 10px;
}

.description-box {
    line-height: 1.7;
    color: #ddd;
    font-size: 15px;
}
.carpass-container {
    padding: 20px 40px 40px 40px;
    border-radius: 6px;
    background: #0a0a0a;
    border: 1px solid rgba(255,255,255,0.05);
    text-align: center;
}

.carpass-container h3 {
    margin-bottom: 10px;
	align-items: center;
}

.carpass-container p {
    color: #aaa;
    margin-bottom: 20px;
}
/* zelfde look als specs */
.options-container {
    padding: 10px 30px 30px 30px;
    border-radius: 6px;
    background: #0a0a0a;
    border: 1px solid rgba(255,255,255,0.05);
}
/* icoon */
.option-item::before {
    content: "✔";
    color: #ff2d2d;
    font-size: 12px;
}
.spec-item-detail {
    display:flex;
    gap:15px;
    align-items:center;
    background: #0a0a0a;
    border:1px solid #1a1a1a;
    padding:15px;
    border-radius:10px;
}

.spec-item-detail i {
    font-size:22px;
    color:#ff2a2a;
    width:40px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,0,0,0.08);
    border-radius:10px;
}

.spec-item-detail span {
    display:block;
    font-size:12px;
    color:#888;
    margin-bottom:4px;
}

.spec-item-detail strong {
    font-size:15px;
    color:white;
}
.btn {
    font-size:15px;
    padding:14px;
    border-radius:10px;
}

/* BEL KNOP = primary */
.btn-call {
    background:#1c1c1c;
    border:1px solid #333;
}

/* WHATSAPP */
.btn-whatsapp {
    background:#25D366;
}

/* 2DEHANDS */
.btn-2dehands {
    background: #0a0a0a;
    color:black;
}
/* MOBILE */
@media(max-width:768px){
    .options-grid {
        grid-template-columns:1fr;
    }
}

/* FULLSCREEN */
.fullscreen {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:black;
    display:flex;
    justify-content:center;
    align-items:center;
}

.fullscreen img {
    max-width:90%;
    max-height:90%;
}

/* MOBILE */
@media(max-width:768px){
    .top { grid-template-columns:1fr; }
    .overview-grid { grid-template-columns:repeat(2,1fr); }
    .spec-grid { grid-template-columns:1fr; }
}
.slide {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.4s ease;
}
.back-btn {
    display:inline-flex;
    align-items:center;
    gap:8px;

    margin:20px auto;
    padding:10px 16px;

    background: #0a0a0a;
    border:1px solid rgba(255,0,0,0.2);

    border-radius:8px;

    color:#ddd;
    font-size:14px;
    text-decoration:none;

    transition:all 0.25s ease;

    box-shadow:0 0 10px rgba(255,0,0,0.05);
}

/* hover */
.back-btn:hover {
    color:white;
    border-color:#ff2a2a;

    box-shadow:0 0 12px rgba(255,0,0,0.4);
    transform:translateX(-3px);
}

/* icon */
.back-btn i {
    font-size:13px;
    color:#ff2a2a;
}
.back-btn {
    backdrop-filter: blur(6px);
}
.slide.active {
    opacity: 1;
}
.carpass-logo img {
    height: 32px;
    opacity: 0.8;
    transition: 0.3s;
}

.carpass-logo img:hover {
    opacity: 1;
    transform: scale(1.05);
}
.price-filter {
    display:flex;
    align-items: center;
    gap:10px;
}

.price-inputs {
    display:flex;
    gap:8px;
}

.price-inputs input {
    width:80px;
    background:#0c0c0c;
    border:1px solid #222;
    color:white;
    padding:8px 10px;
    border-radius:6px;
}

/* sliders */
input[type=range] {
    width:100%;
    accent-color:#ff2a2a;
}

/* results */
.results-count {
    margin-top:10px;
    color:#aaa;
    font-size:14px;
}

/* empty state */
.no-results {
    display:none;
    text-align:center;
    color:#fff;
    font-size:18px;
	background: #0a0a0a;
    border-radius: 6px;
    padding: 18px;
    border: solid 1px rgba(255, 255, 255, 0.08);
    transition: all 0.3s ease;
}
/* ===========================
   PAGE HEADER - AANBOD
=========================== */

.page-header{
    position: relative;
    height: 40vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* BACKGROUND */
.aanbod-header{
    background:
    linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,.25)),
    url('images/aanbodheader.jpg') center center/cover no-repeat;
}

/* OVERLAY */
.overlay{
    position:absolute;
    inset:0;
    background: linear-gradient(
        90deg,
        rgba(0,0,0,.88) 0%,
        rgba(0,0,0,.45) 50%,
        rgba(0,0,0,.88) 100%
    );
    z-index:1;
	border-bottom: solid 1px rgb(79 2 2);
}

/* CONTENT */
.header-content{
    position: relative;
    z-index: 2;
    max-width: 950px;
    padding: 0 25px;
}

/* BREADCRUMB */
.breadcrumb{
    color:#ff2a2a;
    font-size:14px;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:18px;
    font-weight:700;
}

/* TITLE */
.page-header h1{
    font-size:60px;
    line-height:1;
    margin:0 0 18px;
    color:#fff;
    font-weight:900;
    text-transform:uppercase;
    font-style:italic;
    letter-spacing:3px;
    text-shadow:0 10px 25px rgba(0,0,0,.55);
}

/* SUBTITLE */
.subtitle{
    font-size:16px;
    line-height:1.6;
    color:rgba(255,255,255,.88);
    max-width:760px;
    margin:0 auto 38px;
}

/* BUTTONS */
.header-buttons{
    display:flex;
    gap:16px;
    justify-content:center;
    flex-wrap:wrap;
}

.header-buttons a{
    text-decoration:none;
    padding:16px 34px;
    font-weight:800;
    letter-spacing:1px;
    transition:.3s ease;
    border-radius:4px;
}

.btn-primary{
    background:#ff2a2a;
    color:#fff;
}

.btn-primary:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 25px rgba(255,42,42,.35);
}

.btn-secondary{
    border:2px solid rgba(255,255,255,.75);
    color:#fff;
}

.btn-secondary:hover{
    background:#fff;
    color:#000;
}


/* MOBILE */
@media(max-width:768px){

.page-header{
    height:38vh;
    min-height:260px;
    max-height:340px;
}

.page-header h1{
    font-size:43px;
}

.subtitle{
    font-size:14px;
}
.header-buttons a{
    width:100%;
    max-width:320px;
}

}
.filter-container {
    max-width:1200px;
    margin:0 auto 30px auto;
    padding:15px 20px;
    background: #0a0a0a;
    border-radius: 6px;

    border: solid 1px rgba(255, 255, 255, 0.08);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    border-radius:6px;
}

/* SORT BUTTON */
.sort-btn {
    background:#1a1a1a00;
    border:1px solid #222222;
    color:#ccc;
    padding:8px 12px;
    border-radius:6px;
    cursor:pointer;
    transition:0.2s;
}

.sort-btn:hover {
    border-color:#ff2a2a;
    color:white;
}
.filter-container select {
    background:#0c0c0c;
    color:white;
    border:1px solid #222;
    padding:8px 10px;
    border-radius:6px;
}
.filter-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
}
/* MAIN BAR */
.filter-bar {
    display: flex;
    align-items: center;
    gap: 20px;

    background: background: #0a0a0a;
    border: 1px solid rgba(255,0,0,0.15); 
    border-radius: 6px;
    padding: 15px 20px;
}

/* SELECTS */
.filter-bar select {
    background: #0b0b0c;
    border: 1px solid #333;
    color: #fff;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 13px;
}
/* GROEPEN */
.filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
/* LABELS */
.filter-label {
    font-size: 11px;
    color: #777;
    text-transform: uppercase;
}
.filter-title {
    font-size:12px;
    color:#888;
    display:block;
    margin-bottom:6px;
}
.sort-section,
.filter-section {
    display:flex;
    align-items:center;
    gap:10px;
}
/* focus effect */
.filter-bar input:focus,
.filter-bar select:focus {
    outline: none;
    border-color: #f59e0b;
    box-shadow: 0 0 6px rgba(245,158,11,0.4);
}

/* hover */
.filter-bar select:hover,
.filter-bar input:hover {
    border-color: #666;
}
/* SORTEREN = HIGHLIGHT */
.sort-select {
    border-color: #ff2a2a !important;
}
/* DIVIDER */
.filter-divider {
    width:1px;
    height:40px;
    background:#222;
}


/* glow effect */
.sort-select:hover {
    box-shadow: 0 0 10px rgba(245,158,11,0.4);
}

/* FILTERS = SUBTIEL */
.filter-right select:not(.sort-select) {
    opacity: 0.8;
}

.filter-right select:not(.sort-select):hover {
    opacity: 1;
}
/* RESET */
.reset-btn {
    background:#1a1a1a00;
    border:1px solid #222222;
    color:#ccc;
    padding:8px 12px;
    border-radius:6px;
    cursor:pointer;
}

.reset-btn:hover {
    border-color:#ff2a2a;
    color:white;
}
/* arrows */
.prev, .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    background: rgba(0,0,0,0.7);
    border: 1px solid rgba(255,0,0,0.4);

    color: #ff2a2a;

    padding: 8px 12px;
    border-radius: 6px;

    cursor: pointer;
    z-index: 5;

    transition: all 0.2s ease;
}

.prev:hover, .next:hover {
    background: rgba(255,0,0,0.15);
    box-shadow: 0 0 10px rgba(255,0,0,0.6);
}

.prev { left: 10px; }
.next { right: 10px; }


/* CONTENT */
.car-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.car-content h2 {
    margin: 0;
}

.price {
    font-size: 28px;
    color: #ff2a2a;

    font-weight: bold;

    text-shadow: 
        0 0 3px rgba(255,0,0,0.6),
        0 0 10px rgba(255,0,0,0.3);
}
/* INLINE INFO (zoals voorbeeld) */
.car-info-inline {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* 1 lijn */
.info-line {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;

    font-size: 14px;
    color: #ddd;
}

/* divider */
.divider {
    opacity: 0.3;
}

/* ===== INFO CLEAN (zoals screenshot) ===== */
.car-info-clean {
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* lijn */
.divider-line {
    height: 1px;
    background: rgba(255,255,255,0.05);
    margin: 10px 0 0 0;
}


/* separators */
.sep {
    opacity: 0.3;
}

/* groene dot */
.dot {
    width: 0px;
    height: 0px;
    background: #22c55e;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
}
.published-box {
    position: absolute;
    right: 0;
    bottom: 15px;

    text-align: right;
    font-size: 12px;
    color: #777;
}
.published-date {
    margin-top: 4px;
    color: #aaa;
    font-size: 13px;
}
/* datum */
.published {
    color: #aaa;
}

/* ===== SCHEIDINGSLIJN (ZEER BELANGRIJK) ===== */
.car-content h2 {
    margin-bottom: 10px;
}
.car-main {
    position: relative; 
    display: flex;
    flex-direction: column;
}
.car-main h2 {
    margin-bottom: 5px;
	color: #cfcfcf;
}

.price {
    font-size: 28px;
    color: #ff2a2a;
    font-weight: bold;
	margin-bottom: 2px;
}

/* ===== SPECS ===== */
/* SPECS GRID */
.specs-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-top: 7px;
}


/* ITEM */
.spec-item {
    display: flex;
    flex-direction: column;
	text-transform: capitalize;
    align-items: center; 
    text-align: center;  
    gap: 4px;
}

/* LABEL */
.spec-label {
    font-size: 11px;
    color: #cfcfcf;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* VALUE */
.spec-value {
    font-size: 14px;
    color: #cfcfcf;
    font-weight: 600;
}

/* ICON */
.spec-value i {
    margin-right: 6px;
    color: #ff2c2c;
}

/* links blok */
.specs-left {
    display: flex;
    align-items: center;
    gap: 25px;
}

/* rechts (datum) */
.specs-right {
    margin-left: auto;
    color: #aaa;
    font-size: 13px;
}
.specs-row svg {
    width: 16px;
    height: 16px;
    stroke: #ff2a2a; 
}
.spec-col svg {
    width: 16px;
    height: 16px;
    stroke: #ff2a2a; 
}
.specs-row span i {
    margin-right: 8px;
    color: #ff2c2c; 
    font-size: 13px;
    width: 10px;
    text-align: center;
}
.specs-row span {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
}


.specs-row span:hover {
    color: #fff;
}

/* datum rechts */
.specs-row .date {
    margin-left: auto;
    color: #aaa;
}

/* ===== ACTION ROW ===== */
.action-row-clean {
    margin-top: 15px;
    display: flex;
    align-items: center;
    gap: 20px;
}
.action-buttons {
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-top:20px;
}
/* ROW */
.button-row {
    gap:10px;
}
/* carpass */
.carpass {
    color: #22c55e;
    font-weight: 500;
	font-size: 12px;
}
/* ===== BOTTOM ===== */
.bottom-row {
    margin-top: 8px;
    display: flex;
    gap: 20px;
    align-items: baseline;
}

/* ===== BADGE ===== */
.badge {
    position: absolute;
    top: 10px;
    left: 10px;

    background: linear-gradient(45deg, #ff0000, #cc0000);
    padding: 6px 10px;
    border-radius: 6px;

    font-size: 12px;
    font-weight: bold;
}

/* ===== BUTTON ===== */
.btn.primary {
    text-decoration: none;
	background: linear-gradient(135deg, #ff2a2a, #ff4d4d);
    color:white;
    box-shadow: 0 5px 15px rgba(255, 42, 42, 0.4);
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
position:relative;
    overflow:hidden;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.btn.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(255, 42, 42, 0.6);
}
.btn.primary:hover::after {
    left:100%;
}
.button-group {
    display:flex;
	text-align:center;
    flex-wrap:nowrap;
    justify-content:center;
    gap:10px;
}
.specs-modern {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    padding: 10px 30px 30px 30px;
    border-radius: 6px;
    background: #0a0a0a;
    border: solid 1px rgba(255, 255, 255, 0.08);
}
.specs-modern h4 {
    font-size: 13px;
    letter-spacing: 1px;
    color: #888;
    margin-bottom: 18px;
    text-transform: uppercase;
}
.carpass-title {
    display: flex;
    align-items: flex-end;
	justify-content: center;
    gap: 10px;
    font-size: 18px;
}

.carpass-title i {
    width: 20px;
    height: 20px;
    color: #4CAF50; /* groen zoals check */
}
.specs-modern div > div {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid rgba(233,233,233,0.10);
}

.specs-modern span {
    color: #888;
    font-size: 14px;
}

.specs-modern strong {
    font-weight: 500;
    color: #fff;
    font-size: 14px;
}
/* kolommen */
.spec-col {
    position: relative;
}

/* verticale lijn */
.spec-col:not(:last-child)::after {
    content: "";
    position: absolute;
    right: -15px;
    top: 0;
    height: 100%;
    width: 1px;
    background: rgba(255,255,255,0.05);
}

/* titel */
.spec-col h4 {
    font-size: 13px;
    letter-spacing: 1px;
    margin-bottom: 15px;
    color: #aaa;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* icon */
.spec-col h4 i {
    color: #ff2d2d;
	margin-right: 8px;
    font-size: 14px;
    opacity: 0.8;
}

/* rij */
.spec-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

/* labels */
.spec-row span {
    color: #888;
    font-size: 14px;
}

/* values */
.spec-row strong {
    color: #fff;
    font-weight: 500;
}
.values {
    color: #ccc;
	opacity: 0.9;
}

.values .num {
    color: #ff2a2a;
    font-weight: 700;
}
.values span.zero {
    opacity: 0.3;
}
/* carpass */
.carpass-link {
    color: #4CAF50;
    font-size: 12px;
    margin-left: 5px;
}
.button-group .btn {
    flex:1 1 45%;
    max-width:180px;
}
.btn.primary::after {
    content: "";
	position:absolute;
    top:0;
    left:-100%;
    width:100%;
    height:100%;
    background:linear-gradient(120deg, transparent, rgba(255,255,255,0.2), transparent);
    transition:0.5s;
}
.btn.primary:first-child {
    font-size:16px;
    padding:14px;
}
.btn.outline {
    align-items:center;
    gap:8px;

    padding:10px 16px;

    background:linear-gradient(145deg, #111, #0c0c0c);
    border:1px solid rgba(255,0,0,0.2);

    border-radius:8px;

    color:#ddd;
    font-size:14px;
    text-decoration:none;

    transition:all 0.25s ease;

    box-shadow:0 0 10px rgba(255,0,0,0.05);
}
/* BASE */
.btn {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    padding:12px;
    border-radius:10px;
    font-weight:600;
    text-decoration:none;

    transition:0.2s;
}
/* hover */
.btn.outline:hover {
    color:white;
    border-color:#ff2a2a;

    box-shadow:0 0 12px rgba(255,0,0,0.4);
    transform:translateX(-3px);
}

/* icon */
.btn.outline i {
    font-size:13px;
    color:#ff2a2a;
}
.btn.outline {
    backdrop-filter: blur(6px);
}
/* INFO */
.car-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* BUTTONS */
.buttons {
    margin-top: 15px;
    display: flex;
    gap: 12px; 
    align-items: center;
}

.btn {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    padding:12px;
    border-radius:10px;
    font-weight:600;
    text-decoration:none;
    transition:0.2s;
}

.primary {
    background: linear-gradient(45deg, #ff0000, #cc0000);
    color: white;
    font-weight: 600;

    box-shadow: 0 0 10px rgba(255,0,0,0.4);
    transition: all 0.2s ease;
}

.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 20px rgba(255,0,0,0.7);
}

.secondary {
    background: #1f1f1f;
    color: #ddd;
    border: 1px solid #333;
}
/* elke rij */
.info-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    position: relative;
}
/* subtiele lijn */
.info-row::after {
    content: "";
    position: absolute;
    bottom: -6px;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(255,255,255,0.05);
}

/* laatste rij geen lijn */
.info-row:last-child::after {
    display: none;
}

/* ITEMS */
.info-item {
    display: flex;
    flex-direction: column;
    padding: 6px 0;
    transition: 0.2s;
}

/* hover effect */
.info-item:hover {
    transform: translateY(-2px);
}

/* LABEL */
.label {
    color: #666;
    font-size: 10px;
    text-transform: uppercase;
}
/* VALUE */
.value {
    color: #fff;
    font-weight: 600;
    font-size: 14px;
}

/* icon spacing fix */
.value span {
    margin-right: 6px;
}
.about4{
    width:100%;
    background:#050505;
}

/* TOP */
.about-top4{
    max-width:1400px;
    margin:auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px;
    padding:80px 40px;
    align-items:center;
}

.about-img4 img{
    width:100%;
    border-radius:6px;
    display:block;
}

.about-content4 h2{
    font-size:42px;
    margin-bottom:25px;
}

.about-content4 p{
    color:#bbb;
    line-height:1.8;
    margin-bottom:20px;
}

.about-checks4{
	display:flex;
    flex-wrap:nowrap;      
    gap:40px;
    align-items:center;
    overflow-x:auto;       
    white-space:nowrap;
}

.about-checks4 span{
    display:inline-flex;
    align-items:center;
    white-space:nowrap;   
    flex-shrink:0;
}

.about-checks4 i{
    color:#ff2d2d;
    margin-right:8px;
}

/* WHY */
.why4{
    max-width:1400px;
    margin:auto;
    padding:60px 40px;
}

.why4 h2{
    text-align:center;
    font-size:38px;
    margin-bottom:50px;
}

.why-grid4{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
}

.why-card4{
    text-align:center;
    padding:35px;
    background:#0f0f0f;
    border:1px solid rgba(255,255,255,0.05);
    border-radius:8px;
}

.why-card4 i{
    font-size:30px;
    color:#ff2d2d;
    margin-bottom:18px;
}

.why-card4 h3{
    margin-bottom:15px;
    font-size:24px;
}

.why-card4 p{
    color:#999;
    line-height:1.7;
}

/* STATS */
.stats4{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    margin-top:60px;
    text-align:center;
    gap:20px;
}

.stats4 h3{
    font-size:42px;
    color:#ff2d2d;
    margin-bottom:10px;
}

.stats4 p{
    color:#aaa;
}

/* BOTTOM */
.about-bottom4{
    max-width:1400px;
    margin:auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px;
    padding:80px 40px;
    align-items:center;
}

.about-text4 h2{
    font-size:42px;
    margin-bottom:25px;
}

.about-text4 p{
    color:#bbb;
    line-height:1.8;
    margin-bottom:30px;
}

.about-text4 blockquote{
    font-style:italic;
    color:white;
    border-left:4px solid #ff2d2d;
    padding-left:20px;
    opacity:0.9;
}

/* CTA */
.cta4{
    text-align:center;
    padding:80px 20px;
}

.cta4 h2{
    font-size:38px;
    margin-bottom:30px;
}

.cta4 a{
    display:inline-block;
    padding:16px 35px;
    background:#ff2d2d;
    color:white;
    text-decoration:none;
    font-weight:700;
    border-radius:4px;
    transition:0.3s;
}

.cta4 a:hover{
    background:#ff0000;
}

/* RESPONSIVE */
@media(max-width:1000px){

.about-top4,
.about-bottom4{
    grid-template-columns:1fr;
}

.why-grid4{
    grid-template-columns:1fr;
}

.stats4{
    grid-template-columns:1fr 1fr;
}

.about-content4 h2,
.about-text4 h2,
.why4 h2,
.cta4 h2{
    font-size:32px;
}

}

@media(max-width:600px){

.stats4{
    grid-template-columns:1fr;
}

.about-top4,
.about-bottom4,
.why4{
    padding:50px 20px;
}

}
/* MOBILE */
@media (max-width: 768px) {
    .car-card {
        grid-template-columns: 1fr;
    }

   .info-row {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }


    .value {
        font-size: 12px;
    }
}
@media (max-width: 768px) {
    .filter-bar {
        flex-wrap: wrap;
        justify-content: center;
    }
.car-tags {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 30px;
}

.car-tags span {
    background: rgba(255,255,255,0.05);
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12px;
}
.car-tags span:hover {
    border-color: #ff2a2a;
    color: #fff;
}
    .filter-bar input {
        width: 100%;
    }
}
@media (max-width: 768px) {
    .car-card {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 768px) {
    .specs-row {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 768px) {
    .detail-wrapper {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 900px) {
    .home-cars {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    .home-cars {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 900px) {

.info-grid3 {
    grid-template-columns: 1fr;
}

.section-header h2 {
    font-size: 30px;
}

.reviews-box {
    padding: 0px 20px;
}
}
@media (max-width: 1100px) {

    .cta3-inner {
        grid-template-columns: 1fr;
    }

    .about-combined-card {
        grid-template-columns: 1fr;
		paddin: 36px 36px 10px 36px;
    }

    .cta3-bottom h2 {
        min-width: auto;
        font-size: 36px;
    }

    .cta3-bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 1100px) and (min-width: 769px) {

    /* hoofdlayout = naast elkaar */
    .cta3-inner {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 45px;
        align-items: center;
    }

    /* foto's weg */
    .about-combined-right {
        display: none;
    }

    /* enkel over ons card links */
    .about-combined-card {
        display: block;
        padding-right: 45px;
        position: relative;
    }

    /* verticale lijn */
    .about-combined-card::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 1px;
        height: 100%;

        background: linear-gradient(
            to bottom,
            transparent,
            rgba(255,255,255,0.08),
            rgba(255,0,0,0.28),
            rgba(255,255,255,0.08),
            transparent
        );
    }

    /* CTA rechts */
    .cta3-bottom {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    .cta3-bottom h2 {
        font-size: 42px;
        margin-bottom: 15px;
    }

    .cta3-bottom p {
        margin-bottom: 20px;
    }
}
@media (max-width: 768px) {

    .cta3-inner {
        grid-template-columns: 1fr;
    }

    .about-combined-card::after {
        display: none;
    }

    .cta3-bottom {
        align-items: flex-start;
        text-align: left;
		padding: 0 36px 36px;
    }
}
/* =========================
   TABLET
========================= */
@media (max-width:1000px){

.about-top4{
    grid-template-columns:1fr;
    gap:35px;
    padding:60px 30px;
}

.about-content4{
    text-align:center;
}

.about-checks4{
    justify-content:center;
}

.about-content4 h2{
    font-size:34px;
}

}


/* =========================
   MOBILE
========================= */
@media (max-width:768px){

.about-top4{
    grid-template-columns:1fr;
    padding:45px 20px;
    gap:25px;
}

.about-img4{
    order:1;
}

.about-content4{
    order:2;
    text-align:left;
}

.about-content4 h2{
    font-size:28px;
    line-height:1.2;
}

.about-content4 p{
    font-size:15px;
    line-height:1.7;
}

.about-checks4{
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
}

.about-checks4 span{
    font-size:15px;
}

}


/* =========================
   SMALL MOBILE
========================= */
@media (max-width:480px){

.about-content4 h2{
    font-size:24px;
}

.about-content4 p{
    font-size:14px;
}

.about-checks4 span{
    font-size:14px;
}
.header {
	padding: 5px 0;
}
/* ===================================
   HEADER RESPONSIVE
=================================== */

@media (max-width: 900px){

.container2{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:18px;
    padding:0 20px;
}

.logo{
    font-size:24px;
    text-align:center;
}

.nav{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:12px;
}

.nav a{
    margin:0;
    font-size:14px;
    padding:6px 10px;
}

.nav a.active::after{
    bottom:-4px;
}

.cta-btn{
    width:100%;
    max-width:260px;
    text-align:center;
    padding:14px 20px;
    font-size:13px;
}

}


/* ===================================
   EXTRA SMALL MOBILE
=================================== */

@media (max-width: 600px){

.logo{
    font-size:21px;
}

.nav{
    gap:8px;
}

.nav a{
    font-size:13px;
    padding:5px 8px;
}

.cta-btn{
    max-width:100%;
}

}


/* ===================================
   FOOTER RESPONSIVE
=================================== */

@media (max-width: 1000px){

.footer-grid{
    grid-template-columns:1fr 1fr;
    gap:35px;
    padding:40px 20px;
}

.footer-brand{
    grid-column:span 2;
}

.bottom-inner{
    flex-direction:column;
    gap:15px;
    text-align:center;
}

.footer-links{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:18px;
}

}


/* ===================================
   MOBILE FOOTER
=================================== */

@media (max-width: 700px){

.footer-grid{
    grid-template-columns:1fr;
    gap:30px;
    padding:35px 20px;
}

.footer-brand{
    grid-column:span 1;
}

.footer-col{
    text-align:center;
}

.footer-brand p{
    max-width:100%;
}

.socials{
    justify-content:center;
}

.contact-list{
    padding:0;
    list-style:none;
}

.footer-bottom{
    padding:20px;
}

.bottom-inner{
    flex-direction:column;
    gap:12px;
}

.footer-links{
    flex-direction:column;
    gap:10px;
}

.footer-links a{
    margin:0;
}

}


/* ===================================
   SMALL MOBILE
=================================== */

@media (max-width: 480px){

.footer-col h4{
    font-size:14px;
}

.footer-col li,
.footer-col a,
.footer-brand p{
    font-size:14px;
}

.logo{
    font-size:20px;
}

}
/* FINAL MOBILE FIX */

@media (max-width:768px){

.container2{
    flex-direction:row;
    gap:15px !important;
    padding:15px 20px !important;
}

.nav{
    flex-wrap:wrap !important;
    justify-content:center !important;
}

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

.footer-grid{
    grid-template-columns:1fr !important;
    gap:30px !important;
}

.footer-col{
    text-align:center;
}

.bottom-inner{
    flex-direction:column !important;
    gap:12px;
}

.footer-links{
    flex-direction:column;
}

}
/* =====================================
   RESPONSIVE .slide
===================================== */

/* standaard */
.slide{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

/* tablet */
@media (max-width:768px){

.slide{
    object-fit:cover;
    object-position:center;
}

}

/* small mobile */
@media (max-width:480px){

.slide{
    object-fit:cover;
    object-position:center center;
}

}
/* ======================================
MOBILE OCCASIES FIX
====================================== */

@media (max-width:768px){

/* card */
.car-card{
    display:block;
    padding:14px;
}

/* image */
.carousel{
    width:100%;
    height:220px;
    margin-bottom:18px;
}

/* title */
.car-main h2{
    font-size:18px;
    line-height:1.3;
    margin-bottom:8px;
}

/* price */
.price{
    font-size:22px;
    margin-bottom:18px;
}

/* specs netjes in 2 kolommen */
.specs-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
    margin-bottom:18px;
}

.spec-item{
    text-align:center;
    padding:8px;
}

.spec-item i{
    width:18px;
    height:18px;
}

.spec-label{
    font-size:10px;
    display:block;
    margin-top:6px;
}

.spec-value{
    font-size:13px;
    display:block;
    margin-top:3px;
}

/* button */
.bottom-row{
            display: flex;
            flex-direction: column;
            align-content: space-around;
            flex-wrap: wrap;
            align-items: stretch;
        }

.btn.primary{
    text-align:center;
}

.carpass{
    text-align:center;
    font-size:13px;
}

/* published */
.published-box{
    position:relative;
    margin-top:15px;
    text-align:center;
}

}
@media (max-width:768px){

/* CARD */
.car-card{
    padding:20px;
    border-radius:6px;
}

/* FOTO groter */
.carousel{
    height:250px;
    margin-bottom:18px;
}

/* titel */
.car-main h2{
    font-size:18px;
    line-height:1.3;
    margin-bottom:8px;
	text-align: center;
}

/* prijs */
.price{
    font-size:24px;
    margin-bottom:18px;
	text-align: center;
}

/* COMPACTE SPECS */
.specs-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    margin-bottom:18px;
}
.specs-row > :first-child{
    grid-column: span 2;
}

.spec-item{
    padding:10px 6px;
    text-align:center;
    background:#0d0d0d;
    border-radius:8px;
}

.spec-item i{
    width:17px;
    height:17px;
    margin-bottom:6px;
}

.spec-label{
    font-size:10px;
    margin-bottom:3px;
}

.spec-value{
    font-size:13px;
    font-weight:600;
}

.btn.primary{
    text-align:center;
    margin-top:8px;
    margin-bottom:14px;
}

/* carpass */
.carpass{
    display:block;
    text-align:center;
    font-size:13px;
    margin-bottom:10px;
	margin-top:-10px;
}

/* datum */
.published-box{
    position:relative;
    text-align:center;
    margin-top:12;
    padding-top:4px;
    border-top:1px solid rgba(255,255,255,.06);
}

.published-date{
    justify-content:center;
}

/* arrows */
.prev,
.next{
    top:45%;
}

}
/* DESKTOP */
.mobile-toggle,
.mobile-menu-overlay{
    display:none;
}


/* =================================================
   MOBILE
================================================= */
@media (max-width:768px){

/* hide desktop nav */
.nav,
.cta-btn{
    display:none !important;
}


/* =====================================
   HAMBURGER ICON
===================================== */
.mobile-toggle{
    display:flex !important;
    flex-direction:column;
    justify-content:center;
    gap:6px;
    cursor:pointer;
    z-index:100001;
}

.mobile-toggle span{
    width:28px;
    height:2px;
    background:#fff;
    border-radius:3px;
    transition:.3s ease;
}

/* active icon */
.mobile-toggle.active span:nth-child(1){
    transform:translateY(8px) rotate(45deg);
}

.mobile-toggle.active span:nth-child(2){
    opacity:0;
}

.mobile-toggle.active span:nth-child(3){
    transform:translateY(-8px) rotate(-45deg);
}


/* =====================================
   FULLSCREEN MENU
===================================== */
.mobile-menu-overlay{
    position:fixed;
    inset:0;
    width:100vw;
    height:100vh;
	top:0;
    left:0;

    z-index:99999;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    background:
        radial-gradient(circle at top, rgba(255,42,42,.08), transparent 40%),
        linear-gradient(rgba(0,0,0,.94), rgba(0,0,0,.98)),
        url('/images/background.png') center/cover no-repeat;

    backdrop-filter:blur(8px);

    opacity:0;
    visibility:hidden;
    pointer-events:none;
	overflow:hidden;
    box-sizing:border-box;

    transition:.35s ease;
}

.mobile-menu-overlay.active{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
	z-index: 999;
}


/* =====================================
   LOGO
===================================== */
.mobile-menu-logo{
    margin-bottom:38px;
}

.mobile-menu-logo img{
    width:180px;
    max-width:78%;
    height:auto;
    display:block;
    margin:auto;
    filter:drop-shadow(0 8px 18px rgba(255,0,0,.18));
}


/* =====================================
   NAV LINKS
===================================== */
.mobile-menu-content{
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:16px;
}

.mobile-menu-content a{
    width:82%;
    max-width:270px;
    min-height:54px;

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

    color:#fff;
    text-decoration:none;
    font-size:23px;
    font-weight:600;

    border-radius:10px;
    background:rgba(255,255,255,.02);
    border:1px solid rgba(255,255,255,.05);

    transition:.25s ease;
}

.mobile-menu-content a:hover{
    background:rgba(255,42,42,.12);
    border-color:rgba(255,42,42,.3);
}

/* active page */
.mobile-menu-content a.active{
    background:#ff2a2a;
    border-color:#ff2a2a;
    box-shadow:0 12px 28px rgba(255,42,42,.28);
}


/* =====================================
   CONTACT BUTTON
===================================== */
.mobile-menu-cta{
    margin-top:24px;
}

.mobile-contact-btn{
    min-width:220px;
    min-height:52px;

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

    background:#fff;
    color:#000;
    text-decoration:none;

    font-size:17px;
    font-weight:700;

    border-radius:10px;

    transition:.25s ease;
}

.mobile-contact-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 28px rgba(255,255,255,.14);
}


/* =====================================
   SOCIALS
===================================== */
.mobile-menu-social{
    display:flex;
    gap:12px;
    margin-top:30px;
}

.mobile-menu-social a{
    width:46px;
    height:46px;
    border-radius:50%;

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

    color:#fff;
    text-decoration:none;
    font-size:16px;

    background:rgba(255,255,255,.03);
    border:1px solid rgb(79 0 0);

    transition:.25s ease;
}

.mobile-menu-social a:hover{
    background:#ff2a2a;
    border-color:#ff2a2a;
    transform:translateY(-2px);
}


/* prevent page scroll */
body.menu-open{
    overflow:hidden;
}

}


/* =================================================
   SMALL MOBILE
================================================= */
@media (max-width:480px){

.mobile-menu-logo img{
    width:150px;
}

.mobile-menu-content a{
    width:86%;
    min-height:50px;
    font-size:20px;
}

.mobile-contact-btn{
    min-width:205px;
    min-height:48px;
    font-size:16px;
}

.mobile-menu-social{
    margin-top:24px;
}

}
.mobile-menu-content a{
    background:none;
    border:none;
    width:auto;
    min-height:auto;
    font-size:32px;
    font-weight:600;
    padding:8px 0;
    letter-spacing:.5px;
}

.mobile-menu-content a.active{
    background:none;
    box-shadow:none;
    color:#ff2a2a;
}

.mobile-contact-btn{
    background:#ff2a2a;
    color:#fff;
    border-radius:6px;
    min-width:240px;
    min-height:52px;
    box-shadow:0 10px 30px rgba(255,42,42,.22);
}

.mobile-menu-logo img{
    width:210px;
}

.mobile-menu-content{
    gap:22px;
}

.mobile-menu-social{
    margin-top:45px;
}
/* socials zone */
.mobile-menu-social{
    position:relative;
    margin-top:42px;
    padding-top:28px;

    display:flex;
    justify-content:center;
    gap:14px;
}

/* divider */
.mobile-menu-social::before{
    content:"";
    position:absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);
    width:180px;
    height:1px;

    background:linear-gradient(
        to right,
        transparent,
        rgba(255,255,255,.12),
        transparent
    );
}
/* =====================================
BIGGER + CLOSER MOBILE TRAIN SLIDER
===================================== */

@media (max-width:768px){

.hero2-bottom{
    overflow:hidden;
    padding:14px 0;
	background: #050505;
	display: none;
	}
.cta-center{
	display: flex;
	justify-content: center;
}	
/* track */
.hero2-bottom-inner{
    display:flex;
    gap:8px; /* dichter bij elkaar */
    width:max-content;

    animation:featureTrain 12s linear infinite;
}

/* grotere cards */
.hero2-bottom-item{
    flex:0 0 285px;   /* breder */
    min-height:175px; /* hoger */

    padding:22px 16px;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    text-align:center;

    border-radius:12px;
    background:#050505;
}

/* desktop lijnen uit */
.hero2-bottom-item::after{
    display:none !important;
}

/* grotere icons */
.hero2-bottom-icon{
    width:74px;
    height:74px;
    border-radius:50%;

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

    margin-bottom:16px;

    border:1px solid rgba(255,42,42,.65);
    box-shadow:0 0 22px rgba(255,42,42,.22);
}

.hero2-bottom-icon svg{
    width:28px;
    height:28px;
    stroke:#ff2a2a;
}

/* grotere tekst */
.hero2-bottom-item h4{
    margin:0;
    font-size:14px;
    line-height:1.35;
    font-weight:700;
}

/* pause */
.hero2-bottom:hover .hero2-bottom-inner{
    animation-play-state:paused;
}

}

/* loop */
@keyframes featureTrain{
    from{
        transform:translateX(0);
    }
    to{
        transform:translateX(calc(-50% - 4px));
    }
}

/* ==========================================
HERO MOBILE FIX
zelfde layout + right card terug + minder hoog
========================================== */

@media (max-width:768px){
.hero2-right{
    display:none !important;
}
.hero2{
    height:550px;
    min-height:550px;
}
.hero2-inner{
    transform:scale(0.75);
	margin: 0px;
    padding: 0px;
    display: flex;
    margin-top: -100px;
	transform-origin:top center;
}
.hero2-left h1 {
    font-size: 40px;
}
.hero2-left p {
	font-size: 12px; 
}
.btn2.primary {
	padding: 14px 20px;
	font-size: 12px; 
}
.btn2.secondary {
	padding: 14px 20px;
	font-size: 12px; 
}
.hero2-features {
	gap: 10px;
	font-size: 12px;
}
.hero2-features span {
	gap: 2px;
}	

}
/* iets grotere phones */
@media (min-width:430px){

.hero2{
    height:550px;
    min-height:550px;
}

.hero2-inner{
    transform:scale(0.75);
	margin: 0px;
    padding: 0px;
    display: flex;
    margin-top: -130px;
	transform-origin: center;
}
.hero2-left h1 {
    font-size: 44px;
}
.hero2-left p {
	font-size: 13px; 
}
.hero2-features span {
	gap: 2px;
}	
}
/* tablets */
@media (min-width:769px) and (max-width:1100px){

.hero2{
    height:350px;
    overflow:hidden;
}

.hero2-inner{
    position:absolute;
    top:120px;
    left:30px;

    width:1350px;
    transform:scale(.72);
    transform-origin:top left;
}

.hero2-right{
    display:block !important;
}

}
/* =====================================
MOBILE FILTER SYSTEM
===================================== */

.mobile-filter-bar,
.filter-popup{
    display:none;
}

@media (max-width:768px){

/* oude filters verbergen */
.filter-container{
    display:none;
}

/* top bar */
.mobile-filter-bar{
    display:grid;
    grid-template-columns:1fr 120px;
    gap:10px;

    margin-bottom:18px;
}
.mobile-filter-bar .sort-btn{
min-width:46px;
height:46px;
padding:0;
font-size:18px;
}

.mobile-filter-bar select,
.open-filter-btn{
    height:44px;
    border-radius:8px;
    border:1px solid rgba(255,255,255,.06);

    background:#0c0c0c;
    color:#fff;
    padding:0 14px;
    font-size:13px;
}

.open-filter-btn{
    background:#ff2a2a;
    border:none;
    font-weight:700;
}

/* popup */
.filter-popup{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.6);
    z-index:999999;

    display:flex;
    align-items:flex-end;

    opacity:0;
    visibility:hidden;
    transition:.25s ease;
}

.filter-popup.active{
    opacity:1;
    visibility:visible;
}

.filter-popup-inner{
    width:100%;
    background:#050505;
    border-radius:18px 18px 0 0;
    padding:20px;
}

.popup-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:16px;
}

.popup-head h3{
    margin:0;
    color:#fff;
}

.popup-head button{
    background:none;
    border:none;
    color:#fff;
    font-size:22px;
}

/* velden */
.filter-popup select,
.filter-popup input{
    width:100%;
    margin-bottom:10px;

    padding:0 14px;
    border-radius:8px;
    border:1px solid rgba(255,255,255,.06);

    background:#0c0c0c;
    color:#fff;
}

/* actions */
.popup-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-top:8px;
}

.reset-btn,
.apply-btn{
    height:46px;
    border:none;
    border-radius:8px;
    font-weight:700;
}

.reset-btn{
    background:#111;
    color:#fff;
}

.apply-btn{
    background:#ff2a2a;
    color:#fff;
}

}
/* popup filters zichtbaar maken */
@media(max-width:768px){

.popup-placeholder .filter-container{
    display:flex !important;
    flex-direction:column !important;
    gap:10px;
	z-index: 999999;
}

.filter-popup-inner{
    max-height:85vh;
    overflow-y:auto;
	z-index: 99999999;
}
.aanbod-highlight h3 {
	font-size: 21px;
	margin-bottom: 0px;
}	
.spec-groups {
	display: flex;
    gap: 20px;
    margin: 30px 0;
    flex-direction: column;
    align-items: stretch;
}	
.spec-groups .values {
	font-size: 14px;
}	
.about-combined-left h3 {
    font-size: 35px;
}	
.stats {
display: flex;
margin: 0px;
text-align: center;
justify-content: space-evenly;
flex-direction: column;
}
}
/* MOBILE ONLY */
@media (max-width: 768px) {

    .mobile-header-layout{
        display:flex;
        align-items:center;
        justify-content:space-between;
        position:relative;
    }
    /* hamburger links */
    .mobile-toggle{
        order:1;
        display:flex;
        flex-direction:column;
        gap:5px;
        width:24px;
        cursor:pointer;
        z-index:20;
    }

    .mobile-toggle span{
        height:2px;
        width:100%;
        background:#fff;
        display:block;
    }

    /* logo center */
    .mobile-logo{
        position:absolute;
        left:50%;
        transform:translateX(-50%);
        font-size:18px;
        font-weight:700;
        white-space:nowrap;
		padding-right: 30px;
    }

    /* contact rechts */
    .mobile-contact-top{
        order:3;
        background:#d60000;
        color:#fff;
        padding:8px 14px;
        border-radius:30px;
        font-size:13px;
        font-weight:600;
        text-decoration:none;
    }

    /* desktop verbergen */
    .nav,
    .cta-btn{
        display:none;
    }
}
/* enkel zichtbaar op mobile */
@media (max-width: 768px){

    .mobile-contact-top{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        background:#d60000;
        color:#fff;
        padding:5px 8px;
        border-radius:6px;
        font-size:10px;
        font-weight:600;
        text-decoration:none;
    }

}
}
/* HEADER IMAGE */
.contact-header33{
background:
linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.55)),
url('/images/contact-banner.jpg') center/cover no-repeat;
}

/* INFO */
.contact-info33{
padding:40px 0 40px;
background:#0b0b0b;
border-bottom: solid 1px rgba(255, 255, 255, 0.08);
}

.contact-grid33{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:25px;
}

.contact-card33{
background:#111;
padding:35px;
border-radius:8px;
border:1px solid rgba(255,255,255,0.05);
text-align:center;
}

.contact-card33 h3{
color:#fff;
margin-bottom:15px;
font-size:20px;
}

.contact-card33 p{
font-size:20px;
font-weight:700;
margin-bottom:8px;
color:#ff2a2a;
}
.contact-card33 svg {
font-size:20px;
color:#ff2a2a;
font-weight:700;
margin-bottom:8px;
}

.contact-card33 span{
color:#fff;
font-size:14px;
}
.btn-row33{
display:flex;
justify-content:center;
align-items:center;
gap:15px;
flex-wrap:wrap;
width:100%;
}
.contact-form33 textarea{
resize:none;
}
/* MAIN */
.contact-main33{
padding:40px 0 80px;
background:#0b0b0b;
}
.contact-form33 form{
display:flex;
flex-direction:column;
height:85%;
}

.contact-form33 textarea{
resize:none;
flex-grow:1;
min-height:180px;
}
.contact-layout33{
display:grid;
grid-template-columns:1.2fr .8fr;
gap:30px;
padding: 60px 0px 60px;
}

.contact-form33,
.contact-extra33{
background:#111;
padding:10px 40px 40px 40px;
border-radius:8px;
border:1px solid rgba(255,255,255,0.05);
}

.contact-form33 h2{
font-size:34px;
margin-bottom:25px;
text-align: center;
}

.contact-form33 input,
.contact-form33 textarea{
width:95%;
background:#0b0b0b;
border:1px solid rgba(255,255,255,0.08);
padding:16px;
margin-bottom:15px;
color:#fff;
border-radius:6px;
font-family:inherit;
}

.contact-form33 button{
width:100%;
padding:16px;
background:#ff2a2a;
border:none;
color:#fff;
font-weight:700;
font-size:15px;
cursor:pointer;
border-radius:6px;
transition:.3s;
}

.contact-form33 button:hover{
background:#e01c1c;
}

/* MAP */
.map-box33{
overflow:hidden;
border-radius:8px;
margin-bottom:25px;
border:1px solid rgba(255,255,255,0.05);
}

.map-box33 iframe{
width:100%;
height:320px;
border:0;
}

/* EXTRA */
.contact-extra33 h3{
font-size:28px;
margin-bottom:20px;

}

.contact-extra33 ul{
list-style:none;
padding:0;
margin:0 0 25px;
}

.contact-extra33 li{
padding:10px 0;
border-bottom:1px solid rgba(255,255,255,0.05);
color:#ccc;
}

.contact-extra33 li:before{
content:"✓ ";
color:#ff2a2a;
font-weight:bold;
}

/* MOBILE */
@media(max-width:950px){

.contact-grid33{
grid-template-columns:1fr;
}

.contact-layout33{
grid-template-columns:1fr;
}

}

@media(max-width:768px){

.contact-form33,
.contact-extra33,
.contact-card33{
padding:25px;
}

.contact-form33 h2{
font-size:28px;
}

}
/* WRAPPER */
.premium-map-real33{
position:relative;
height:430px;
border-radius:12px;
overflow:hidden;
border:1px solid rgba(255,255,255,0.05);
background:#0a0a0a;
}

/* LEAFLET MAP */
#map33{
height:100%;
width:100%;
filter:
grayscale(1)
invert(.92)
contrast(1.15)
brightness(.65);
}

/* remove default bg flash */
.leaflet-container{
background:#0b0b0b;
}

/* card */
.map-card33{
position:absolute;
left:25px;
bottom:25px;
z-index:999;
background:rgba(10,10,10,.78);
backdrop-filter:blur(10px);
padding:28px;
border-radius:10px;
border:1px solid rgba(255,255,255,0.06);
max-width:320px;
}

.map-label33{
display:block;
font-weight: bold;
font-size:11px;
letter-spacing:2px;
color:#ff2a2a;
margin-bottom:10px;
}

.map-card33 h3{
font-size:28px;
margin-bottom:10px;
line-height:1;
}

.map-card33 p{
font-size:14px;
line-height:1.6;
color:#aaa;
margin-bottom:20px;
}
.popup-filter-grid{
display:flex;
flex-direction:column;
gap:14px;
padding:20px;
}

.popup-filter-grid select{
width:100%;
padding:14px;
background:#0c0c0c;
border:1px solid #222;
color:#fff;
border-radius:8px;
font-family:inherit;
}
.popup-filter-grid input{
width:91%;
padding:14px;
background:#0c0c0c;
border:1px solid #222;
color:#fff;
border-radius:8px;
font-family:inherit;
}
/* custom marker */
.pin33{
width:18px;
height:18px;
background:#ff2a2a;
border-radius:50%;
box-shadow:
0 0 0 6px rgba(255,42,42,.18),
0 0 25px rgba(255,42,42,.65);
border:2px solid white;
}

/* mobile */
@media(max-width:768px){

.premium-map-real33{
height:500px;
}

.map-card33{
left:15px;
right:15px;
bottom:15px;
max-width:none;
padding:22px;
}

.map-card33 h3{
font-size:24px;
}
.contact-form33 input{
		width:91%;
	 }
.contact-form33 textarea{
width:91%;
}	 
}
@media (max-width:768px){

.mobile-filter-bar{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
margin:0 0 25px 0;
padding:14px;
flex: 1;
background:#0a0a0a;
border:1px solid rgba(255,255,255,0.08);
border-radius:8px;
}

/* SORT SELECT */
.mobile-filter-bar select{
flex:2;
height:46px;
padding:0 14px;

background:#111;
border:1px solid #222;
border-radius:8px;

color:#fff;
font-size:14px;
font-family:'Montserrat', sans-serif;

appearance:none;
outline:none;
}

/* PIJL KNOP */
.mobile-filter-bar .sort-btn{
width:46px;
min-width:46px;
height:46px;

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

padding:0;
margin:0;

background:#111;
border:1px solid #222;
border-radius:8px;

color:#fff;
font-size:18px;
cursor:pointer;
transition:.2s ease;
}

.mobile-filter-bar .sort-btn:hover{
border-color:#ff2a2a;
color:#ff2a2a;
}

/* FILTER KNOP */
.mobile-filter-bar .open-filter-btn{
height:46px;
padding:0 18px;

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

background:#ff2a2a;
border:none;
border-radius:8px;

color:#fff;
font-size:14px;
font-weight:600;
font-family:'Montserrat', sans-serif;

cursor:pointer;
white-space:nowrap;
transition:.2s ease;
}

.mobile-filter-bar .open-filter-btn:hover{
background:#e11d1d;
}

/* EXTRA SMALL */
@media (max-width:420px){

.mobile-filter-bar{
gap:8px;
padding:10px;
}

.mobile-filter-bar select{
font-size:13px;
padding:0 10px;
}

.mobile-filter-bar .open-filter-btn{
padding:0 14px;
font-size:13px;
}

}

}
/* =================================================
DETAIL PAGE MOBILE ONLY
Plakken ONDERAAN style.css
Desktop blijft volledig onaangeraakt
================================================= */

@media (max-width:768px){

/* algemene spacing */
.top{
grid-template-columns:1fr !important;
gap:20px !important;
}

.container{
padding:18px 14px !important;
}

/* back knop */
.back-btn{
justify-content:center;
margin:8px 0 18px 0 !important;
}

/* =========================
GALLERY
========================= */

.gallery{
aspect-ratio:4 / 3;
border-radius:10px;
}

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

.gallery-arrow,
.prev,
.next{
width:42px;
height:42px;
padding:0;
display:flex;
align-items:center;
justify-content:center;
font-size:22px;
border-radius:50%;
}

/* thumbnails */
.thumbs{
display:grid !important;
grid-template-columns:repeat(4,1fr);
gap:8px;
margin-top:10px;
width:100%;
}

.thumbs img{
width:100%;
height:70px;
object-fit:cover;
border-radius:8px;
}

/* =========================
RIGHT CARD
========================= */

.side{
padding:18px !important;
border-radius:10px;
}

.side h2{
font-size:22px !important;
line-height:1.3;
text-align:center;
margin-bottom:8px;
}

.side .price{
font-size:30px !important;
text-align:center;
margin-bottom:14px;
}

/* buttons */
.action-buttons{
gap:10px !important;
margin-top:10px;
}

.button-row{
display:grid !important;
grid-template-columns:1fr 1fr;
gap:10px;
}

.button-row .btn,
.action-buttons .btn{
min-height:22px;
}

/* biedingen */
.bids{
margin-top:18px;
padding:18px 14px !important;
}

/* =========================
TABS
========================= */

.tabs{
margin-top:24px !important;
}

.tabs-wrapper{
padding:0 12px !important;
overflow-x:auto;
}

.tab-buttons{
display:flex;
flex-wrap:nowrap;
gap:18px;
min-width:max-content;
overflow: hidden;
}

.tab-buttons button{
white-space:nowrap;
font-size:14px;
padding:14px 0;
}

/* =========================
CONTENT BLOCKS
========================= */

.tab-content{
margin-top:12px !important;
}

/* specs */
.specs-modern{
display:grid !important;
grid-template-columns:1fr !important;
gap:14px;
padding:18px !important;
}

.spec-col{
padding:0;
}

.spec-col::after{
display:none !important;
}

.spec-col h4{
font-size:14px;
margin-bottom:10px;
padding-bottom:8px;
border-bottom:1px solid rgba(255,255,255,.06);
}

.spec-row{
padding:10px 0;
}

.spec-row span,
.spec-row strong{
font-size:14px;
}

/* opties */
.options-container,
.description-container,
.carpass-container{
padding:18px !important;
border-radius:10px;
}

.options-grid{
grid-template-columns:1fr !important;
gap:0;
}

.option-item{
font-size:14px;
padding:10px 0;
}

/* beschrijving */
.description-box{
padding:0 !important;
font-size:15px;
line-height:1.7;
}

/* carpass */
.carpass-container .btn{
margin-top:15px;
}

/* =========================
FULLSCREEN IMAGE
========================= */

.fullscreen{
padding:20px;
}

.fullscreen img{
max-width:100%;
max-height:100%;
object-fit:contain;
}

}

/* =========================
SMALL PHONES
========================= */

@media (max-width:480px){

.side h2{
font-size:19px !important;
}

.side .price{
font-size:26px !important;
}

.button-row{
grid-template-columns:1fr;
}

.thumbs img{
height:64px;
}

.tab-buttons button{
font-size:13px;
}

}
/* ==================================
MOBILE HOME BLOCK
alleen mobiel zichtbaar
================================== */

.mobile-home-block{
display:none;
}

@media (max-width:768px){

.mobile-home-block{
display:block;
padding:22px 16px 28px;
background:#050505;
}

/* top cards */
.mobile-home-cards{
display:flex;
flex-direction:column;
gap:12px;
margin-bottom:18px;
}

.mobile-home-card{
display:flex;
align-items:center;
gap:14px;

padding:16px;
background:#0b0b0b;
border:1px solid rgba(255,255,255,.06);
border-radius:10px;
}

.mobile-home-card .icon{
width:42px;
height:42px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;

background:rgba(255,42,42,.08);
border:1px solid rgba(255,42,42,.28);
}

.mobile-home-card .icon svg{
width:18px;
height:18px;
stroke:#ff2a2a;
}

.mobile-home-card strong{
display:block;
font-size:14px;
color:#fff;
margin-bottom:4px;
}

.mobile-home-card span{
font-size:12px;
color:#999;
line-height:1.4;
}

/* services */
.mobile-services-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
}

.service-box{
padding:18px 12px;
text-align:center;

background:#0b0b0b;
border:1px solid rgba(255,255,255,.06);
border-radius:10px;
}

.service-box svg{
width:22px;
height:22px;
stroke:#ff2a2a;
margin-bottom:10px;
}

.service-box span{
display:block;
font-size:12px;
line-height:1.4;
color:#fff;
font-weight:600;
}

}

@media (max-width:430px){

.mobile-services-grid{
grid-template-columns:1fr;
}

}
@media (max-width: 768px) {
	.hero2-bottom {
  display: none;
}
  .services-mobile {
	display: block;
    background: linear-gradient(to bottom, rgb(11 11 11) 0%, rgb(11 11 11) 60%, #0b0b0b 100%);
    padding: 30px 15px;
    margin-top: -163px;
    position: relative;
    z-index: 2;
    border-bottom: solid 1px rgba(255, 255, 255, 0.08);
    border-top: 1px solid rgba(255, 0, 0, 0.3);
  }

  .services-title {
    text-align: center;
    color: white;
    font-size: 18px;
    margin-bottom: 20px;
    position: relative;
  }

  .services-title::before,
  .services-title::after {
    content: "";
    width: 40px;
    height: 2px;
    background: #ff2a2a;
    position: absolute;
    top: 50%;
  }

  .services-title::before {
    left: 0;
  }

  .services-title::after {
    right: 0;
  }

  /* GRID */
  .services-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }

  /* CARD */
  .service-card {
    background: #111;
    border-radius: 16px;
    padding: 20px 10px;
    text-align: center;
    color: white;
    border: 1px solid rgba(255,255,255,0.05);
    box-shadow: 0 5px 15px rgba(0,0,0,0.4);
    transition: 0.2s;
  }

  .service-card:active {
    transform: scale(0.97);
  }

  /* ICON */
  .icon {
    font-size: 32px;
    margin-bottom: 10px;
    color: #ff2a2a
  }

  /* TITELS */
  .service-card h3 {
    font-size: 14px;
    margin-bottom: 5px;
  }

  .service-card p {
    font-size: 12px;
    color: #aaa;
  }

}
}
.services {
  background: #0d0d0d;
  color: #fff;
  padding: 80px 20px;
}

.services::before {
  content: "";
  position: fixed;
  inset: 0;
  background: url(/images/background.png) center / cover no-repeat;
  opacity: 1;
  z-index: -1;
  pointer-events: none;
}

.container6 {
  max-width: 1200px;
  margin: 0 auto;
}

/* Header */
.section-header {
  text-align: center;
  margin-bottom: 40px;
}

.section-header span {
  color: #ff2c2c;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.section-header h2 {
  font-size: 36px;
  margin-top: 10px;
}
select option:disabled {
    color: #999;
}
/* Service blocks */
.service-block {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
  margin-top: 30px;
  background: #0a0a0a;
  border: solid 1px rgba(255, 255, 255, 0.08);
}

.service-block.reverse {
  flex-direction: row-reverse;
  padding-left: 30px;
}

.service-image img {
  width: 100%;
  object-fit: cover;
}

.service-image {
  flex: 2;
  display: flex;
  align-items: center;
}

.service-content {
  flex: 3;
  display: flex;
    flex-direction: column;
    align-items: center;
}

.service-content h3 {
  font-size: 24px;
  margin-bottom: 15px;
}

.service-content p {
  color: #aaa;
  margin-bottom: 20px;
  text-align: center;
}

.service-content ul {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 85%;
}

.service-content ul li {
  margin-bottom: 10px;
  position: relative;
  padding-left: 20px;
}

.service-content ul li::before {
  content: "✓";
  color: #ff2c2c;
  position: absolute;
  left: 0;
}

/* Responsive */
@media (max-width: 768px) {
  .service-block {
    flex-direction: column;
  }
  .section-header {
	margin-bottom: 20px;
  }	

  .service-block.reverse {
    flex-direction: column;
	padding-left: 0px;
  }
.service-content p {
	margin-left: 20px;
	margin-right: 20px;
	font-size: 15px;
}
.service-content ul li {
	font-size: 14px;
}
  .section-header h2 {
    font-size: 28px;
  }
}
.features7 {
  padding: 40px 20px;
  text-align: center;
  background: linear-gradient(to right, #000, #111);
  border-top: solid 1px rgba(255, 255, 255, 0.08);
  border-bottom: solid 1px rgba(255, 255, 255, 0.08);
}

.title7 {
  color: #fff;
  font-size: 26px;
  margin-bottom: 30px;
  letter-spacing: 1px;
}

.features-container7 {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  max-width: 1200px;   
  margin: 0 auto;      
  padding: 0 20px; 
}

.feature-box7 {
  flex: 1 1 20px;
  max-width: 250px;
  text-align: center;
}

.icon7 {
  font-size: 32px;
  margin-bottom: 10px;
  color: #ff2a2a;
}

.feature-box7 h3 {
  font-size: 14px;
  margin-bottom: 8px;
}

.feature-box7 p {
  font-size: 13px;
  color: #ccc;
}
.feature-box7 svg {
	font-size: 30px;
    color: #ff2d2d;
}	
/* 📱 Mobile */
@media (max-width: 768px) {
  .features-container7 {
    flex-direction: column;
    align-items: center;
  }

  .feature-box7 {
    max-width: 100%;
  }
}
#loading { background-color: #ffffff; height: 100%; width: 100%; position: fixed; z-index: 1; margin-top: 0px; top: 0px; left: 0px; bottom: 0px; overflow: hidden !important; right: 0px; z-index: 999999; }
#loading-center { width: 100%; height: 100%; position: relative; }
#loading-center img { text-align: center; left: 0; position: absolute; right: 0; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); -moz-transform: translateY(-50%); z-index: 99; margin: 0 auto; }
/* Cookie knop */
#cookie-button {
  position: fixed;
  bottom: 20px;
  left: 20px;
  font-size: 40px;
  cursor: pointer;
  background: #d2691e;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* Popup */
#cookie-popup {
  position: fixed;
  bottom: 90px;
  left: 20px;
  width: 260px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
  padding: 15px;
  display: none;
  font-family: sans-serif;
}

/* Content */
.cookie-content h3 {
  margin-top: 0;
}

.cookie-buttons {
  margin-top: 10px;
  display: flex;
  gap: 10px;
}

.cookie-buttons button {
  flex: 1;
  padding: 6px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

#accept-cookies {
  background: #4CAF50;
  color: white;
}

#reject-cookies {
  background: #ccc;
}
.cookie-face {
  width: 40px;
  height: 40px;
  background: #c68642;
  border-radius: 50%;
  position: relative;
}

.cookie-face::before,
.cookie-face::after {
  content: "";
  width: 5px;
  height: 5px;
  background: black;
  border-radius: 50%;
  position: absolute;
  top: 12px;
}

.cookie-face::before {
  left: 10px;
}

.cookie-face::after {
  right: 10px;
}