/* ===== Base ===== */
:root{
  --bg:#0b0e12;
  --bg-soft:#11161c;
  --text:#e9eef4;
  --muted:#a7b0bb;
  --accent: #ff2800;
  --accent-2: #d42424;
  --white:#fff;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Poppins, system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
}
.bottoma{
  color:var(--text)
}
.container{
  width:min(1200px, 92%);
  margin-inline:auto;
}

/* ===== Top strip ===== */
.top-strip{
  background:var(--accent);
  color:var(--white);
  font-size:.9rem;
  padding:.4rem 0;
  text-align:center;
}
.top-strip a{color:var(--white); text-decoration:none;}

/* ===== Header / Nav ===== */
.site-header{
  position:sticky; top:0; z-index:50;
  background:#0e141a;
  border-bottom:1px solid rgba(255,255,255,.06);
  box-shadow:0 4px 20px rgba(0,0,0,.2);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:.9rem 0;
}
.brand{display:flex; align-items:center; gap:.6rem;}
.logo{width:44px; height:auto; filter:brightness(1.1) drop-shadow(0 2px 6px rgba(0,0,0,.4));}
.brand-text{font-weight:800; letter-spacing:.12em}

#mainNav{display:flex; gap:1.2rem; align-items:center;}
#mainNav a{
  color:var(--text);
  text-decoration:none;
  font-weight:600;
  opacity:.8;
  padding:.35rem .2rem;
  border-bottom:2px solid transparent;
  transition:opacity .2s ease, border-color .2s ease;
}
#mainNav a:hover{opacity:1}
#mainNav a.active{border-color:var(--accent); opacity:1}

.hamburger{display:none; background:none; border:0; width:40px; height:32px; position:relative; cursor:pointer}
.hamburger span{position:absolute; left:6px; right:6px; height:2px; background:var(--text); border-radius:2px; transition:transform .2s, top .2s, opacity .2s}
.hamburger span:nth-child(1){top:8px}
.hamburger span:nth-child(2){top:15px}
.hamburger span:nth-child(3){top:22px}
.hamburger.open span:nth-child(1){transform:rotate(45deg); top:15px}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:rotate(-45deg); top:15px}

/* ===== Hero ===== */
.hero{
  position:relative;
  min-height:78vh;
  display:grid;
  place-items:center;
  overflow:hidden;
}
.hero-media{
  position:absolute; inset:0;
  background:url('hero.jpg') center/cover no-repeat;
  transform:scale(1.05);
  filter:saturate(1.05) contrast(1.05) brightness(.9);
}
.hero-overlay{
  position:absolute; inset:0;
  background:
    radial-gradient(60% 60% at 50% 40%, rgba(0,0,0,.2), transparent 60%),
    linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,.65));
}
.hero-content{
  position:relative; text-align:center; z-index:2;
}
.hero-title{
  font-size: clamp(2.6rem, 6vw, 6rem);
  font-weight:900;
  letter-spacing:.04em;
  margin:0 0 .5rem;
  text-shadow:0 10px 36px rgba(0,0,0,.6);
}
.hero-sub{
  font-weight:600;
  margin:0 0 1.5rem;
  color:var(--muted);
  letter-spacing:.05em;
}
.btn{
  display:inline-block;
  padding:.9rem 1.3rem;
  border-radius:.7rem;
  text-decoration:none;
  font-weight:800;
  letter-spacing:.04em;
}
.btn-primary{
  background:var(--accent);
  color:var(--white);
  box-shadow:var(--shadow);
}
.btn-primary:hover{filter:brightness(1.08)}

.scroll-down{
  position:absolute; bottom:1.2rem; left:50%; transform:translateX(-50%);
  width:28px; height:44px; border:2px solid rgba(255,255,255,.5);
  border-radius:20px; display:grid; place-items:center; opacity:.7;
}
.scroll-down span{width:3px; height:9px; background:#fff; border-radius:4px; animation:scroll 1.6s infinite ease-in-out}
@keyframes scroll{0%{transform:translateY(-6px)} 50%{transform:translateY(6px)} 100%{transform:translateY(-6px)}}

/* ===== Sections ===== */
.section{padding:4.5rem 0;}
.section.alt{background:var(--bg-soft)}
.section h2{margin-top:0; font-size: clamp(1.6rem, 3vw, 2.2rem);}
.center{text-align:center}

.grid{display:grid; gap:1.6rem}
.grid.two{
  grid-template-columns:repeat(2, minmax(0,1fr));
  display: grid;
  align-items: stretch;
}
.grid.three{grid-template-columns:repeat(3, minmax(0,1fr))}

.card{
  background:#0f141b;
  border:1px solid rgba(255,255,255,.06);
  border-radius:1rem;
  overflow:hidden;
  box-shadow:var(--shadow);
}
.card img{
  display:block;
  width:100%;
  min-height:250px;
  max-height:500px;
  height:50vh;
  object-fit:cover;
}
.card-body{padding:1rem 1.2rem;background-color: #192331;}
.icon{font-size:2rem; margin:1rem 1.2rem 0}

/* ===== Gallery ===== */
.gallery img{border-radius:.8rem; border:1px solid rgba(255,255,255,.08); box-shadow:var(--shadow)}

/* ===== Form ===== */
.form .field{display:flex; flex-direction:column; gap:.4rem; margin-bottom:.9rem}
input, textarea{
  background:#0c1016; color:var(--text);
  border:1px solid rgba(255,255,255,.1);
  padding:.8rem .9rem; border-radius:.6rem; outline:none;
}
input:focus, textarea:focus{border-color:var(--accent)}

/* ===== Contact card ===== */
.map-holder{
  margin-top:1rem;
  background:#0c1016; border:1px dashed rgba(255,255,255,.15);
  border-radius:.6rem; padding:2.2rem; text-align:center; color:var(--muted)
}
#servicescards{
  padding-left: 1.5rem;
}
/* ===== Footer ===== */
.footer{padding:2.5rem 0; background:#0e141a; color:var(--muted)}
.footer p{margin:0; text-align:center}

#Autohausdiv{
  height: 100%;
}
/* ===== Responsive ===== */
@media (max-width: 980px){
  .grid.two{grid-template-columns:1fr}
  .grid.three{grid-template-columns:repeat(2, 1fr)}
}
@media (max-width: 720px){
  #mainNav{display:none; position:absolute; top:100%; right:4%; background:#0f141b;
    padding:1rem 1.2rem; border-radius:.8rem; box-shadow:var(--shadow); flex-direction:column; gap:.6rem;}
  #mainNav.open{display:flex}
  .hamburger{display:block}
  .grid.three{grid-template-columns:1fr}
}