/* HERO / BANNER - Modern Auto Shop Design */
:root{
    --primary:#b30000; /* shop red */
    --dark:#0b0b0b;
    --muted:#f4f4f4;
    --glass-bg:rgba(255,255,255,0.06);
    --glass-border:rgba(255,255,255,0.08);
}

.hero{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:64vh;
    padding:48px 24px;
    color:var(--muted);
    background-color:var(--dark);
    background-image:linear-gradient(180deg,rgba(0,0,0,0.05),rgba(0,0,0,0.25));
    background-size:cover;
    background-position:center;
    overflow:hidden;
}

/* Background image handled via inline style on the element or utility class */
.hero--image{
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center center;
}

/* Background image as an absolutely positioned element for SEO/object-fit support */
.hero__bg{
    position:absolute;
    inset:0; /* top:0; right:0; bottom:0; left:0 */
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center;
    z-index:-1; /* sits behind overlays (::before/::after at z-index:0) */
    pointer-events:none; /* decorative */
    animation: fadeIn 3s ease-in-out infinite alternate;
}

/* Warm red gradient overlay + subtle vignette */
.hero::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(135deg, rgba(179,0,0,0.55) 0%, rgba(30,30,30,0.35) 60%);
    mix-blend-mode:overlay;
    z-index:0;
    pointer-events:none;
}

.hero::before{
    /* soft vignette */
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(60% 40% at 50% 30%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.45) 70%);
    z-index:0;
    pointer-events:none;
}

.hero__inner{
    position:relative;
    z-index:1;
    width:100%;
    max-width:1200px;
    display:grid;
    grid-template-columns:1fr 420px;
    gap:28px;
    align-items:center;
}

.hero__content{
    padding:28px 24px; /* Increased padding for better spacing */
    margin: 0 auto; /* Center content horizontally */
}

.hero h1{
    font-family: 'Segoe UI', Roboto, Arial, sans-serif;
    font-size:clamp(28px,4.5vw,56px);
    line-height:1.02;
    margin:0 0 12px 0;
    font-weight:700;
    color:#fff;
    text-shadow:0 6px 18px rgba(0,0,0,0.45);
}

.hero p{
    font-size:clamp(14px,1.6vw,20px);
    margin:0 0 20px 0;
    color:rgba(255,255,255,0.92);
    font-weight:500;
}

.hero__actions{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}

.btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:12px 18px;
    border-radius:8px;
    font-weight:600;
    cursor:pointer;
    transition:transform .12s ease, box-shadow .12s ease;
    text-decoration:none;
    border:0;
}

.btn--primary{
    background:linear-gradient(180deg,var(--primary), #870000);
    color:#fff;
    box-shadow:0 8px 18px rgba(179,0,0,0.22), 0 2px 6px rgba(0,0,0,0.45);
}

.btn--ghost{
    background:transparent;
    color:#fff;
    border:1px solid rgba(255,255,255,0.12);
    backdrop-filter: blur(6px);
}

.btn:active{transform:translateY(1px)}
.btn:focus{outline:3px solid rgba(179,0,0,0.18); outline-offset:2px}
.btn:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Glass card on the right for quick contact/offer */
.hero__card{
    background:var(--glass-bg);
    border:1px solid var(--glass-border);
    padding:22px;
    border-radius:12px;
    color:#fff;
    box-shadow:0 6px 30px rgba(0,0,0,0.45);
}

.hero__card h3{margin:0 0 8px 0; font-size:18px}
.hero__card p{margin:0 0 12px 0; color:rgba(255,255,255,0.9)}

/* responsive: single column on small screens */
@media (max-width:900px){
    .hero__inner{grid-template-columns:1fr; padding:8px}
    .hero{padding:36px 18px}
    .hero__card{order:2}
}

/* Ensure proper alignment on smaller screens */
@media (max-width: 768px) {
    .hero__content {
        padding: 20px 16px; /* Adjust padding for smaller devices */
    }
}

@media (prefers-reduced-motion:reduce){
    .btn{transition:none}
}

/* Utility: small hero variant */
.hero--compact{min-height:48vh}

/* End of hero styles */

/* -----------------------------
     Global & header/navigation
     ----------------------------- */
*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0;
    font-family: Inter, 'Segoe UI', Roboto, Arial, sans-serif;
    background: #070707;
    color: #e9e9e9;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

.container{width:100%; max-width:1100px; margin:0 auto; padding:0 18px}

.site-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:16px 20px;
    background:linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.15));
    border-bottom:1px solid rgba(255,255,255,0.03);
    position:sticky; top:0; z-index:9999; backdrop-filter: blur(4px);
}
.brand{font-weight:800; font-size:20px; color:#fff}
.nav{display:flex; gap:16px}
.nav a{color:rgba(255,255,255,0.9); text-decoration:none; padding:6px 8px; border-radius:6px; font-weight:600}
.nav a:hover{background:rgba(255,255,255,0.03)}

/* Main content spacing */
main{padding:36px 0 80px}

/* -----------------------------
   About Us
   ----------------------------- */
.about{padding:28px 0}
.about h2{font-size:28px; margin:12px 0 18px}
.about__content{
  display:grid;
  grid-template-columns:1fr 320px;
  gap:28px;
  align-items:start;
}
.about__text p{color:rgba(255,255,255,0.9); line-height:1.6; margin:12px 0}
.about__text h3{margin:0 0 12px; font-size:20px}
.about__promise{
  background:rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.04);
  padding:18px;
  border-radius:10px;
  box-shadow:0 6px 18px rgba(0,0,0,0.5);
}
.about__promise h3{margin:0 0 12px; font-size:18px}
.about__promise ul{list-style:none; padding:0; margin:0}
.about__promise li{padding:6px 0; color:rgba(255,255,255,0.9)}

@media (max-width:900px){
  .about__content{grid-template-columns:1fr}
}

/* Main content spacing */

/* -----------------------------
     Services
     ----------------------------- */
.services{padding:28px 0}
.services h2{font-size:28px; margin:12px 0 18px}
.service-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
    gap:18px;
}
.service-card{
    background:rgba(255,255,255,0.02);
    border:1px solid rgba(255,255,255,0.04);
    padding:18px;
    border-radius:10px;
    box-shadow:0 6px 18px rgba(0,0,0,0.5);
}
.service-card h3{margin:0 0 8px; font-size:18px}
.service-card p{margin:0; color:rgba(255,255,255,0.85)}

/* -----------------------------
     Gallery
     ----------------------------- */
.gallery{padding:28px 0}
.gallery h2{font-size:28px; margin:12px 0 18px}
.gallery-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
    gap:12px;
    align-items:start;
}
.gallery-item{
    width:100%;
    height:140px;
    object-fit:cover;
    border-radius:8px;
    display:block;
    box-shadow:0 6px 18px rgba(0,0,0,0.45);
    border:1px solid rgba(255,255,255,0.03);
}

/* -----------------------------
   Contact & booking form
   ----------------------------- */
.contact{padding:28px 0}
.contact h2{font-size:28px; margin:12px 0 18px}

.contact__wrapper{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
  align-items:start;
}

.contact__info{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.contact__item{
  background:rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.04);
  padding:16px;
  border-radius:10px;
  display:flex;
  align-items:flex-start;
  gap:12px;
}

.contact__icon{
  font-size:24px;
  flex-shrink:0;
}

.contact__text h4{margin:0 0 4px; font-size:16px; color:#fff}
.contact__text p{margin:0; color:rgba(255,255,255,0.85); font-size:14px}

.contact__text a{
  color:var(--primary);
  text-decoration:none;
  font-weight:600;
}

.contact__text a:hover{text-decoration:underline}

.contact__form-wrapper h3{
  font-size:20px;
  margin:0 0 14px;
  color:#fff;
}

#booking-form{
  display:grid;
  gap:10px;
}
#booking-form input,
#booking-form textarea{
  width:100%;
  padding:12px 14px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.06);
  background:rgba(255,255,255,0.02);
  color:var(--muted);
  resize:vertical;
  font-family:inherit;
}

#booking-form input:focus,
#booking-form textarea:focus{
  outline:none;
  border-color:rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.04);
}

#booking-form button{margin-top:6px}

@media (max-width:900px){
  .contact__wrapper{grid-template-columns:1fr}
}

/* -----------------------------
     Inline messages & utilities
     ----------------------------- */
.inline-msg{
    position:fixed;
    top:22px;
    left:50%;
    transform:translateX(-50%);
    padding:10px 16px;
    border-radius:8px;
    z-index:99999;
    color:#fff;
    font-weight:600;
    box-shadow:0 10px 30px rgba(0,0,0,0.5);
    opacity:1;
    transition:opacity .3s ease, transform .3s ease;
}
.inline-msg--hide{opacity:0; transform:translateX(-50%) translateY(-6px)}
.inline-msg--success{background:linear-gradient(90deg, #2ecc71, #27ae60)}
.inline-msg--error{background:linear-gradient(90deg, #e74c3c, #c0392b)}
.inline-msg--info{background:linear-gradient(90deg, #3498db, #2980b9)}

/* Footer */
footer{
    padding:24px 0;
    text-align:center;
    color:rgba(255,255,255,0.7);
    border-top:1px solid rgba(255,255,255,0.03);
    margin-top:48px;
}

/* Responsive tweaks */
@media (max-width:700px){
    .site-header{padding:12px}
    .hero__inner{grid-template-columns:1fr; gap:18px}
    .hero__card{width:100%}
    .gallery-item{height:120px}
}

/* small improvement for images/alt text inline display */
.gallery-grid img{vertical-align:middle}

/* 4. Loading Spinner */
.spinner {
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-left-color: #000;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0.8;
  }
  to {
    opacity: 1;
  }
}